@lego-box/ui-kit - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

dist/index.d.mts

@@ -616,2 +616,48 @@ import * as class_variance_authority_types from 'class-variance-authority/types';
 
+interface LayoutOption {
+    id: string;
+    name: string;
+    description: string;
+    icon: React.ReactNode;
+    preview: React.ReactNode;
+}
+interface LayoutSwitcherProps {
+    selectedLayoutId: string;
+    onLayoutChange: (layoutId: string) => void;
+    layouts: LayoutOption[];
+    className?: string;
+}
+/**
+ * LayoutSwitcher - UI component for selecting application layout
+ * Displays layout options as cards with preview diagrams
+ */
+declare function LayoutSwitcher({ selectedLayoutId, onLayoutChange, layouts, className, }: LayoutSwitcherProps): react_jsx_runtime.JSX.Element;
+/** Pre-built layout previews for common layouts */
+declare const LayoutPreviews: {
+    Classic: react_jsx_runtime.JSX.Element;
+    Minimal: react_jsx_runtime.JSX.Element;
+    Horizontal: react_jsx_runtime.JSX.Element;
+    Hybrid: react_jsx_runtime.JSX.Element;
+};
+/** Default layout icons */
+declare const LayoutIcons: {
+    Classic: react_jsx_runtime.JSX.Element;
+    Minimal: react_jsx_runtime.JSX.Element;
+    Horizontal: react_jsx_runtime.JSX.Element;
+    Hybrid: react_jsx_runtime.JSX.Element;
+};
+
+type LayoutType = 'classic' | 'minimal' | 'horizontal' | 'hybrid';
+type LayoutSelectorType = LayoutType;
+interface LayoutSelectorProps {
+    selectedLayout: LayoutType;
+    onLayoutChange: (layout: LayoutType) => void;
+    className?: string;
+}
+/**
+ * LayoutSelector - UI component for selecting application layout
+ * Displays layout options as cards with preview diagrams
+ */
+declare function LayoutSelector({ selectedLayout, onLayoutChange, className, }: LayoutSelectorProps): react_jsx_runtime.JSX.Element;
+
 interface TopBarNavItem {
@@ -689,2 +735,22 @@ id: string;
     onHelpSupportClick?: () => void;
+    /**
+     * Available layout options for Theme Customizer
+     */
+    layoutOptions?: LayoutOption[];
+    /**
+     * Current selected layout ID
+     */
+    selectedLayoutId?: LayoutSelectorType;
+    /**
+     * Callback when layout changes
+     */
+    onLayoutChange?: (layoutId: LayoutSelectorType) => void;
+    /**
+     * Current selected theme ID
+     */
+    selectedThemeId?: string;
+    /**
+     * Callback when theme changes
+     */
+    onThemeChange?: (themeId: string) => void;
 }
@@ -815,2 +881,22 @@ /**
     onHelpSupportClick?: () => void;
+    /**
+     * Available layout options for Theme Customizer
+     */
+    layoutOptions?: LayoutOption[];
+    /**
+     * Current selected layout ID
+     */
+    selectedLayoutId?: LayoutSelectorType;
+    /**
+     * Callback when layout changes
+     */
+    onLayoutChange?: (layoutId: LayoutSelectorType) => void;
+    /**
+     * Current selected theme ID
+     */
+    selectedThemeId?: string;
+    /**
+     * Callback when theme changes
+     */
+    onThemeChange?: (themeId: string) => void;
 }
@@ -832,3 +918,3 @@ /**
  * 40px square button with icon.
- * Persists theme preference to localStorage.
+ * Persists theme preference to localStorage via ThemeProvider.
  */
@@ -854,2 +940,13 @@ declare const ThemeToggle: React.ForwardRefExoticComponent<ThemeToggleProps & React.RefAttributes<HTMLButtonElement>>;
 
+interface ThemeSelectorProps {
+    selectedThemeId: string;
+    onThemeChange: (themeId: string) => void;
+    className?: string;
+}
+/**
+ * ThemeSelector - UI component for selecting color themes
+ * Displays theme options as cards with color previews
+ */
+declare function ThemeSelector({ selectedThemeId, onThemeChange, className, }: ThemeSelectorProps): react_jsx_runtime.JSX.Element;
+
 interface DialogProps {
@@ -1003,2 +1100,138 @@ isOpen: boolean;
 
-export { AccessDenied, type AccessDeniedProps, AdminShell, type AdminShellProps, AssignUsersToRoleDialog, type AssignUsersToRoleDialogProps, Badge, type BadgeProps, BulkActionToolbar, type BulkActionToolbarProps, BulkConfirmationDialog, type BulkConfirmationDialogProps, Button, type ButtonProps, CanDisable, type CanDisableProps, CanGuard, type CanGuardProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, ChangePasswordDialog, type ChangePasswordDialogProps, Checkbox, type CheckboxProps, ConsoleLog, type ConsoleLogProps, DataTable, type DataTableColumn, type DataTableProps, DeleteConfirmationDialog, type DeleteConfirmationDialogProps, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, type DialogProps, DialogTitle, DialogTrigger, FeatureCard, type FeatureCardProps, FilterChip, type FilterChipProps, GroupedTable, type GroupedTableColumn, type GroupedTableProps, HealthStatusCard, type HealthStatusCardProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Loading, type LoadingProps, type LogEntry, type MenuItem, NO_ACCESS_MESSAGE, NotFound, type NotFoundProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type Permission, type PermissionFormData, PermissionFormDialog, type PermissionFormDialogProps, ProfileDropdown, type ProfileDropdownProps, QuickActionCard, type QuickActionCardProps, type RoleFormData, RoleFormDialog, type RoleFormDialogProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, ServiceStatusCard, type ServiceStatusCardProps, SideNav, type SideNavProps, StatsCard, type StatsCardProps, StatusBadge, type StatusBadgeProps, Tabs, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TechStackCard, type TechStackCardProps, ThemeToggle, type ThemeToggleProps, type TicketFormData, TicketFormDialog, type TicketFormDialogProps, TicketStatsCard, type TicketStatsCardProps, Tooltip, type TooltipProps, TopBar, type TopBarMoreItem, type TopBarNavItem, type TopBarProps, type UserForAssign, type UserFormData, UserFormDialog, type UserFormDialogProps, WelcomeBanner, type WelcomeBannerProps, badgeVariants, cn };
+/**
+ * Theme Configuration
+ *
+ * Defines themes that combine color scheme, typography, shadows,
+ * and border-radius. Themes are now independent of layouts and can
+ * be combined with any layout type.
+ */
+interface ColorScheme {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+}
+interface TypographyConfig {
+    fontHeading: string;
+    fontBody: string;
+}
+interface SpacingConfig {
+    unit: number;
+}
+interface ShadowConfig {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+interface BorderRadiusConfig {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+interface ComponentStyleConfig {
+    topbar: {
+        background: string;
+        foreground: string;
+    };
+    sidebar: {
+        background: string;
+        foreground: string;
+    };
+    content: {
+        background: string;
+    };
+}
+interface ThemeConfig {
+    id: string;
+    name: string;
+    description: string;
+    preview: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        gradient?: string;
+    };
+    colors: {
+        light: ColorScheme;
+        dark: ColorScheme;
+    };
+    components: {
+        light: ComponentStyleConfig;
+        dark: ComponentStyleConfig;
+    };
+    typography: TypographyConfig;
+    spacing: SpacingConfig;
+    shadows: ShadowConfig;
+    borderRadius: BorderRadiusConfig;
+}
+/**
+ * All available themes
+ */
+declare const themes: ThemeConfig[];
+/**
+ * Get theme by ID
+ */
+declare function getThemeById(id: string): ThemeConfig | undefined;
+/**
+ * Default theme - Purple Mist
+ */
+declare const defaultTheme: ThemeConfig;
+
+type ThemeMode = 'light' | 'dark';
+interface ThemeContextValue {
+    /** Current theme configuration */
+    theme: ThemeConfig;
+    /** Current theme mode (light/dark) */
+    mode: ThemeMode;
+    /** Change theme by ID */
+    setTheme: (themeId: string) => void;
+    /** Toggle between light and dark mode */
+    toggleMode: () => void;
+    /** Set specific mode */
+    setMode: (mode: ThemeMode) => void;
+}
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    /** Default theme ID to use on first load */
+    defaultThemeId?: string;
+    /** Default mode to use on first load */
+    defaultMode?: ThemeMode;
+}
+/**
+ * ThemeProvider - Manages theme state and applies CSS variables
+ *
+ * Persists theme selection in localStorage
+ */
+declare function ThemeProvider({ children, defaultThemeId, defaultMode, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * useTheme hook - Access theme context
+ *
+ * @example
+ * ```tsx
+ * const { theme, mode, setTheme, setMode } = useTheme();
+ * ```
+ */
+declare function useTheme(): ThemeContextValue;
+
+export { AccessDenied, type AccessDeniedProps, AdminShell, type AdminShellProps, AssignUsersToRoleDialog, type AssignUsersToRoleDialogProps, Badge, type BadgeProps, BulkActionToolbar, type BulkActionToolbarProps, BulkConfirmationDialog, type BulkConfirmationDialogProps, Button, type ButtonProps, CanDisable, type CanDisableProps, CanGuard, type CanGuardProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, ChangePasswordDialog, type ChangePasswordDialogProps, Checkbox, type CheckboxProps, type ColorScheme, ConsoleLog, type ConsoleLogProps, DataTable, type DataTableColumn, type DataTableProps, DeleteConfirmationDialog, type DeleteConfirmationDialogProps, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, type DialogProps, DialogTitle, DialogTrigger, FeatureCard, type FeatureCardProps, FilterChip, type FilterChipProps, GroupedTable, type GroupedTableColumn, type GroupedTableProps, HealthStatusCard, type HealthStatusCardProps, Input, type InputProps, Label, type LabelProps, LayoutIcons, type LayoutOption, LayoutPreviews, LayoutSelector, type LayoutSelectorProps, type LayoutType as LayoutSelectorType, LayoutSwitcher, type LayoutSwitcherProps, Link, type LinkProps, Loading, type LoadingProps, type LogEntry, type MenuItem, NO_ACCESS_MESSAGE, NotFound, type NotFoundProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type Permission, type PermissionFormData, PermissionFormDialog, type PermissionFormDialogProps, ProfileDropdown, type ProfileDropdownProps, QuickActionCard, type QuickActionCardProps, type RoleFormData, RoleFormDialog, type RoleFormDialogProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, ServiceStatusCard, type ServiceStatusCardProps, SideNav, type SideNavProps, StatsCard, type StatsCardProps, StatusBadge, type StatusBadgeProps, Tabs, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TechStackCard, type TechStackCardProps, type ThemeConfig, type ThemeMode, ThemeProvider, ThemeSelector, type ThemeSelectorProps, ThemeToggle, type ThemeToggleProps, type TicketFormData, TicketFormDialog, type TicketFormDialogProps, TicketStatsCard, type TicketStatsCardProps, Tooltip, type TooltipProps, TopBar, type TopBarMoreItem, type TopBarNavItem, type TopBarProps, type UserForAssign, type UserFormData, UserFormDialog, type UserFormDialogProps, WelcomeBanner, type WelcomeBannerProps, badgeVariants, cn, defaultTheme, getThemeById, themes, useTheme };

dist/index.d.ts

@@ -616,2 +616,48 @@ import * as class_variance_authority_types from 'class-variance-authority/types';
 
+interface LayoutOption {
+    id: string;
+    name: string;
+    description: string;
+    icon: React.ReactNode;
+    preview: React.ReactNode;
+}
+interface LayoutSwitcherProps {
+    selectedLayoutId: string;
+    onLayoutChange: (layoutId: string) => void;
+    layouts: LayoutOption[];
+    className?: string;
+}
+/**
+ * LayoutSwitcher - UI component for selecting application layout
+ * Displays layout options as cards with preview diagrams
+ */
+declare function LayoutSwitcher({ selectedLayoutId, onLayoutChange, layouts, className, }: LayoutSwitcherProps): react_jsx_runtime.JSX.Element;
+/** Pre-built layout previews for common layouts */
+declare const LayoutPreviews: {
+    Classic: react_jsx_runtime.JSX.Element;
+    Minimal: react_jsx_runtime.JSX.Element;
+    Horizontal: react_jsx_runtime.JSX.Element;
+    Hybrid: react_jsx_runtime.JSX.Element;
+};
+/** Default layout icons */
+declare const LayoutIcons: {
+    Classic: react_jsx_runtime.JSX.Element;
+    Minimal: react_jsx_runtime.JSX.Element;
+    Horizontal: react_jsx_runtime.JSX.Element;
+    Hybrid: react_jsx_runtime.JSX.Element;
+};
+
+type LayoutType = 'classic' | 'minimal' | 'horizontal' | 'hybrid';
+type LayoutSelectorType = LayoutType;
+interface LayoutSelectorProps {
+    selectedLayout: LayoutType;
+    onLayoutChange: (layout: LayoutType) => void;
+    className?: string;
+}
+/**
+ * LayoutSelector - UI component for selecting application layout
+ * Displays layout options as cards with preview diagrams
+ */
+declare function LayoutSelector({ selectedLayout, onLayoutChange, className, }: LayoutSelectorProps): react_jsx_runtime.JSX.Element;
+
 interface TopBarNavItem {
@@ -689,2 +735,22 @@ id: string;
     onHelpSupportClick?: () => void;
+    /**
+     * Available layout options for Theme Customizer
+     */
+    layoutOptions?: LayoutOption[];
+    /**
+     * Current selected layout ID
+     */
+    selectedLayoutId?: LayoutSelectorType;
+    /**
+     * Callback when layout changes
+     */
+    onLayoutChange?: (layoutId: LayoutSelectorType) => void;
+    /**
+     * Current selected theme ID
+     */
+    selectedThemeId?: string;
+    /**
+     * Callback when theme changes
+     */
+    onThemeChange?: (themeId: string) => void;
 }
@@ -815,2 +881,22 @@ /**
     onHelpSupportClick?: () => void;
+    /**
+     * Available layout options for Theme Customizer
+     */
+    layoutOptions?: LayoutOption[];
+    /**
+     * Current selected layout ID
+     */
+    selectedLayoutId?: LayoutSelectorType;
+    /**
+     * Callback when layout changes
+     */
+    onLayoutChange?: (layoutId: LayoutSelectorType) => void;
+    /**
+     * Current selected theme ID
+     */
+    selectedThemeId?: string;
+    /**
+     * Callback when theme changes
+     */
+    onThemeChange?: (themeId: string) => void;
 }
@@ -832,3 +918,3 @@ /**
  * 40px square button with icon.
- * Persists theme preference to localStorage.
+ * Persists theme preference to localStorage via ThemeProvider.
  */
@@ -854,2 +940,13 @@ declare const ThemeToggle: React.ForwardRefExoticComponent<ThemeToggleProps & React.RefAttributes<HTMLButtonElement>>;
 
+interface ThemeSelectorProps {
+    selectedThemeId: string;
+    onThemeChange: (themeId: string) => void;
+    className?: string;
+}
+/**
+ * ThemeSelector - UI component for selecting color themes
+ * Displays theme options as cards with color previews
+ */
+declare function ThemeSelector({ selectedThemeId, onThemeChange, className, }: ThemeSelectorProps): react_jsx_runtime.JSX.Element;
+
 interface DialogProps {
@@ -1003,2 +1100,138 @@ isOpen: boolean;
 
-export { AccessDenied, type AccessDeniedProps, AdminShell, type AdminShellProps, AssignUsersToRoleDialog, type AssignUsersToRoleDialogProps, Badge, type BadgeProps, BulkActionToolbar, type BulkActionToolbarProps, BulkConfirmationDialog, type BulkConfirmationDialogProps, Button, type ButtonProps, CanDisable, type CanDisableProps, CanGuard, type CanGuardProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, ChangePasswordDialog, type ChangePasswordDialogProps, Checkbox, type CheckboxProps, ConsoleLog, type ConsoleLogProps, DataTable, type DataTableColumn, type DataTableProps, DeleteConfirmationDialog, type DeleteConfirmationDialogProps, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, type DialogProps, DialogTitle, DialogTrigger, FeatureCard, type FeatureCardProps, FilterChip, type FilterChipProps, GroupedTable, type GroupedTableColumn, type GroupedTableProps, HealthStatusCard, type HealthStatusCardProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Loading, type LoadingProps, type LogEntry, type MenuItem, NO_ACCESS_MESSAGE, NotFound, type NotFoundProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type Permission, type PermissionFormData, PermissionFormDialog, type PermissionFormDialogProps, ProfileDropdown, type ProfileDropdownProps, QuickActionCard, type QuickActionCardProps, type RoleFormData, RoleFormDialog, type RoleFormDialogProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, ServiceStatusCard, type ServiceStatusCardProps, SideNav, type SideNavProps, StatsCard, type StatsCardProps, StatusBadge, type StatusBadgeProps, Tabs, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TechStackCard, type TechStackCardProps, ThemeToggle, type ThemeToggleProps, type TicketFormData, TicketFormDialog, type TicketFormDialogProps, TicketStatsCard, type TicketStatsCardProps, Tooltip, type TooltipProps, TopBar, type TopBarMoreItem, type TopBarNavItem, type TopBarProps, type UserForAssign, type UserFormData, UserFormDialog, type UserFormDialogProps, WelcomeBanner, type WelcomeBannerProps, badgeVariants, cn };
+/**
+ * Theme Configuration
+ *
+ * Defines themes that combine color scheme, typography, shadows,
+ * and border-radius. Themes are now independent of layouts and can
+ * be combined with any layout type.
+ */
+interface ColorScheme {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+}
+interface TypographyConfig {
+    fontHeading: string;
+    fontBody: string;
+}
+interface SpacingConfig {
+    unit: number;
+}
+interface ShadowConfig {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+interface BorderRadiusConfig {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+interface ComponentStyleConfig {
+    topbar: {
+        background: string;
+        foreground: string;
+    };
+    sidebar: {
+        background: string;
+        foreground: string;
+    };
+    content: {
+        background: string;
+    };
+}
+interface ThemeConfig {
+    id: string;
+    name: string;
+    description: string;
+    preview: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        gradient?: string;
+    };
+    colors: {
+        light: ColorScheme;
+        dark: ColorScheme;
+    };
+    components: {
+        light: ComponentStyleConfig;
+        dark: ComponentStyleConfig;
+    };
+    typography: TypographyConfig;
+    spacing: SpacingConfig;
+    shadows: ShadowConfig;
+    borderRadius: BorderRadiusConfig;
+}
+/**
+ * All available themes
+ */
+declare const themes: ThemeConfig[];
+/**
+ * Get theme by ID
+ */
+declare function getThemeById(id: string): ThemeConfig | undefined;
+/**
+ * Default theme - Purple Mist
+ */
+declare const defaultTheme: ThemeConfig;
+
+type ThemeMode = 'light' | 'dark';
+interface ThemeContextValue {
+    /** Current theme configuration */
+    theme: ThemeConfig;
+    /** Current theme mode (light/dark) */
+    mode: ThemeMode;
+    /** Change theme by ID */
+    setTheme: (themeId: string) => void;
+    /** Toggle between light and dark mode */
+    toggleMode: () => void;
+    /** Set specific mode */
+    setMode: (mode: ThemeMode) => void;
+}
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    /** Default theme ID to use on first load */
+    defaultThemeId?: string;
+    /** Default mode to use on first load */
+    defaultMode?: ThemeMode;
+}
+/**
+ * ThemeProvider - Manages theme state and applies CSS variables
+ *
+ * Persists theme selection in localStorage
+ */
+declare function ThemeProvider({ children, defaultThemeId, defaultMode, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * useTheme hook - Access theme context
+ *
+ * @example
+ * ```tsx
+ * const { theme, mode, setTheme, setMode } = useTheme();
+ * ```
+ */
+declare function useTheme(): ThemeContextValue;
+
+export { AccessDenied, type AccessDeniedProps, AdminShell, type AdminShellProps, AssignUsersToRoleDialog, type AssignUsersToRoleDialogProps, Badge, type BadgeProps, BulkActionToolbar, type BulkActionToolbarProps, BulkConfirmationDialog, type BulkConfirmationDialogProps, Button, type ButtonProps, CanDisable, type CanDisableProps, CanGuard, type CanGuardProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, ChangePasswordDialog, type ChangePasswordDialogProps, Checkbox, type CheckboxProps, type ColorScheme, ConsoleLog, type ConsoleLogProps, DataTable, type DataTableColumn, type DataTableProps, DeleteConfirmationDialog, type DeleteConfirmationDialogProps, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, type DialogProps, DialogTitle, DialogTrigger, FeatureCard, type FeatureCardProps, FilterChip, type FilterChipProps, GroupedTable, type GroupedTableColumn, type GroupedTableProps, HealthStatusCard, type HealthStatusCardProps, Input, type InputProps, Label, type LabelProps, LayoutIcons, type LayoutOption, LayoutPreviews, LayoutSelector, type LayoutSelectorProps, type LayoutType as LayoutSelectorType, LayoutSwitcher, type LayoutSwitcherProps, Link, type LinkProps, Loading, type LoadingProps, type LogEntry, type MenuItem, NO_ACCESS_MESSAGE, NotFound, type NotFoundProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type Permission, type PermissionFormData, PermissionFormDialog, type PermissionFormDialogProps, ProfileDropdown, type ProfileDropdownProps, QuickActionCard, type QuickActionCardProps, type RoleFormData, RoleFormDialog, type RoleFormDialogProps, SearchInput, type SearchInputProps, Select, type SelectOption, type SelectProps, ServiceStatusCard, type ServiceStatusCardProps, SideNav, type SideNavProps, StatsCard, type StatsCardProps, StatusBadge, type StatusBadgeProps, Tabs, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TechStackCard, type TechStackCardProps, type ThemeConfig, type ThemeMode, ThemeProvider, ThemeSelector, type ThemeSelectorProps, ThemeToggle, type ThemeToggleProps, type TicketFormData, TicketFormDialog, type TicketFormDialogProps, TicketStatsCard, type TicketStatsCardProps, Tooltip, type TooltipProps, TopBar, type TopBarMoreItem, type TopBarNavItem, type TopBarProps, type UserForAssign, type UserFormData, UserFormDialog, type UserFormDialogProps, WelcomeBanner, type WelcomeBannerProps, badgeVariants, cn, defaultTheme, getThemeById, themes, useTheme };

package.json

 {
   "name": "@lego-box/ui-kit",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Reusable UI component library for Lego Box - Tailwind CSS components with dark mode support",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Improved metrics

Total package byte prevSize

1589082

14.21%

Lines of code

13121

18.96%

No dependency changes