@shohojdhara/atomix 0.3.6 → 0.3.8

package/dist/index.d.ts

@@ -2539,6 +2539,41 @@ interface DataTableColumn {
      * Width of the column (CSS value)
      */
     width?: string;
+    /**
+     * Minimum width for resizable columns (CSS value)
+     */
+    minWidth?: string;
+    /**
+     * Maximum width for resizable columns (CSS value)
+     */
+    maxWidth?: string;
+    /**
+     * Whether the column is resizable
+     */
+    resizable?: boolean;
+    /**
+     * Whether the column is visible by default
+     */
+    visible?: boolean;
+    /**
+     * Whether the column can be reordered
+     */
+    reorderable?: boolean;
+    /**
+     * Custom filter function for column-specific filtering
+     */
+    filterFunction?: (value: any, filterValue: string) => boolean;
+    /**
+     * Filter type for column-specific filtering
+     */
+    filterType?: 'text' | 'select' | 'date' | 'number' | 'custom';
+    /**
+     * Options for select-type filters
+     */
+    filterOptions?: Array<{
+        label: string;
+        value: any;
+    }>;
 }
 /**
  * Sort configuration
@@ -2553,6 +2588,14 @@ interface SortConfig {
      */
     direction: 'asc' | 'desc';
 }
+/**
+ * Row selection mode
+ */
+type SelectionMode = 'single' | 'multiple' | 'none';
+/**
+ * Export format
+ */
+type ExportFormat = 'csv' | 'excel' | 'json';
 /**
  * DataTable component properties
  */
@@ -2614,6 +2657,82 @@ interface DataTableProps extends BaseComponentProps {
      * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
      */
     glass?: AtomixGlassProps | boolean;
+    /**
+     * Row selection mode ('single', 'multiple', or 'none')
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * Selected row IDs (for controlled selection)
+     */
+    selectedRowIds?: (string | number)[];
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange?: (selectedRows: any[], selectedIds: (string | number)[]) => void;
+    /**
+     * Key to use as unique identifier for rows (defaults to 'id')
+     */
+    rowKey?: string | ((row: any) => string | number);
+    /**
+     * Whether columns are resizable
+     */
+    resizable?: boolean;
+    /**
+     * Whether columns can be reordered
+     */
+    reorderable?: boolean;
+    /**
+     * Callback when column order changes
+     */
+    onColumnReorder?: (columnKeys: string[]) => void;
+    /**
+     * Whether to show column visibility toggle
+     */
+    showColumnVisibility?: boolean;
+    /**
+     * Callback when column visibility changes
+     */
+    onColumnVisibilityChange?: (visibleColumns: string[]) => void;
+    /**
+     * Whether to enable sticky headers
+     */
+    stickyHeader?: boolean;
+    /**
+     * Offset from top for sticky headers (CSS value)
+     */
+    stickyHeaderOffset?: string;
+    /**
+     * Whether to enable virtual scrolling for large datasets
+     */
+    virtualScrolling?: boolean;
+    /**
+     * Estimated row height for virtual scrolling (in pixels)
+     */
+    estimatedRowHeight?: number;
+    /**
+     * Number of rows to render outside visible area (overscan)
+     */
+    overscan?: number;
+    /**
+     * Whether to enable export functionality
+     */
+    exportable?: boolean;
+    /**
+     * Export formats available
+     */
+    exportFormats?: ExportFormat[];
+    /**
+     * Custom export filename
+     */
+    exportFilename?: string;
+    /**
+     * Callback for custom export logic
+     */
+    onExport?: (format: ExportFormat, data: any[]) => void;
+    /**
+     * Whether to show column-specific filters
+     */
+    columnFilters?: boolean;
 }
 /**
  * Pagination component properties
@@ -8226,6 +8345,7 @@ type __lib_types_EdgePanelPosition = EdgePanelPosition;
 type __lib_types_EdgePanelProps = EdgePanelProps;
 type __lib_types_ElementRefs = ElementRefs;
 type __lib_types_ElevationCardProps = ElevationCardProps;
+type __lib_types_ExportFormat = ExportFormat;
 type __lib_types_FooterLayout = FooterLayout;
 type __lib_types_FooterLinkProps = FooterLinkProps;
 type __lib_types_FooterProps = FooterProps;
@@ -8271,6 +8391,7 @@ type __lib_types_RadioProps = RadioProps;
 type __lib_types_RatingProps = RatingProps;
 type __lib_types_SelectOption = SelectOption;
 type __lib_types_SelectProps = SelectProps;
+type __lib_types_SelectionMode = SelectionMode;
 type __lib_types_SideMenuItemProps = SideMenuItemProps;
 type __lib_types_SideMenuListProps = SideMenuListProps;
 type __lib_types_SideMenuProps = SideMenuProps;
@@ -8308,7 +8429,7 @@ type __lib_types_VideoQuality = VideoQuality;
 type __lib_types_VideoSubtitle = VideoSubtitle;
 type __lib_types_listvariant = listvariant;
 declare namespace __lib_types {
-  export type { AccordionProps$1 as AccordionProps, __lib_types_AccordionState as AccordionState, __lib_types_AtomixGlassProps as AtomixGlassProps, __lib_types_AvatarGroupProps as AvatarGroupProps, __lib_types_AvatarProps as AvatarProps, __lib_types_AvatarSize as AvatarSize, __lib_types_BadgeProps as BadgeProps, __lib_types_BaseComponentProps as BaseComponentProps, __lib_types_BreadcrumbInstance as BreadcrumbInstance, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbOptions$1 as BreadcrumbOptions, __lib_types_ButtonGroupProps as ButtonGroupProps, __lib_types_ButtonProps as ButtonProps, __lib_types_CalloutProps as CalloutProps, __lib_types_CardProps as CardProps, ChartAxis$1 as ChartAxis, ChartConfig$1 as ChartConfig, ChartDataPoint$1 as ChartDataPoint, ChartDataset$1 as ChartDataset, ChartProps$1 as ChartProps, ChartSize$1 as ChartSize, ChartType$1 as ChartType, __lib_types_CheckboxProps as CheckboxProps, __lib_types_CodeBlockProps as CodeBlockProps, __lib_types_DataTableColumn as DataTableColumn, __lib_types_DataTableProps as DataTableProps, __lib_types_DisplacementMode as DisplacementMode, __lib_types_DropdownDividerProps as DropdownDividerProps, __lib_types_DropdownHeaderProps as DropdownHeaderProps, __lib_types_DropdownItemProps as DropdownItemProps, __lib_types_DropdownPlacement as DropdownPlacement, __lib_types_DropdownProps as DropdownProps, __lib_types_DropdownTrigger as DropdownTrigger, __lib_types_EdgePanelMode as EdgePanelMode, __lib_types_EdgePanelPosition as EdgePanelPosition, __lib_types_EdgePanelProps as EdgePanelProps, __lib_types_ElementRefs as ElementRefs, __lib_types_ElevationCardProps as ElevationCardProps, __lib_types_FooterLayout as FooterLayout, __lib_types_FooterLinkProps as FooterLinkProps, __lib_types_FooterProps as FooterProps, __lib_types_FooterSectionProps as FooterSectionProps, __lib_types_FooterSocialLinkProps as FooterSocialLinkProps, __lib_types_FormGroupProps as FormGroupProps, __lib_types_FormProps as FormProps, __lib_types_GlassContainerProps as GlassContainerProps, __lib_types_GlassMode as GlassMode, __lib_types_GlassSize as GlassSize, __lib_types_HeroAlignment as HeroAlignment, __lib_types_HeroBackgroundSlide as HeroBackgroundSlide, __lib_types_HeroBackgroundSliderConfig as HeroBackgroundSliderConfig, __lib_types_HeroProps as HeroProps, __lib_types_IconPosition as IconPosition, IconSize$1 as IconSize, IconWeight$1 as IconWeight, __lib_types_ImageType as ImageType, __lib_types_InputProps as InputProps, ListGroupProps$1 as ListGroupProps, __lib_types_ListProps as ListProps, __lib_types_MegaMenuColumnProps as MegaMenuColumnProps, __lib_types_MegaMenuLinkProps as MegaMenuLinkProps, __lib_types_MegaMenuProps as MegaMenuProps, __lib_types_MenuItemProps as MenuItemProps, __lib_types_MenuProps as MenuProps, __lib_types_MessageItem as MessageItem, __lib_types_MessagesProps as MessagesProps, __lib_types_ModalProps as ModalProps, __lib_types_MousePosition as MousePosition, __lib_types_NavAlignment as NavAlignment, __lib_types_NavDropdownProps as NavDropdownProps, __lib_types_NavItemProps as NavItemProps, __lib_types_NavProps as NavProps, __lib_types_NavVariant as NavVariant, __lib_types_NavbarPosition as NavbarPosition, __lib_types_NavbarProps as NavbarProps, __lib_types_OverLightConfig as OverLightConfig, __lib_types_OverLightObjectConfig as OverLightObjectConfig, __lib_types_PaginationProps as PaginationProps, PhosphorIconsType$1 as PhosphorIconsType, __lib_types_PhotoViewerProps as PhotoViewerProps, __lib_types_PopoverProps as PopoverProps, __lib_types_PopoverTriggerProps as PopoverTriggerProps, __lib_types_ProgressProps as ProgressProps, __lib_types_RadioProps as RadioProps, __lib_types_RatingProps as RatingProps, __lib_types_SelectOption as SelectOption, __lib_types_SelectProps as SelectProps, __lib_types_SideMenuItemProps as SideMenuItemProps, __lib_types_SideMenuListProps as SideMenuListProps, __lib_types_SideMenuProps as SideMenuProps, __lib_types_Size as Size, __lib_types_SliderAutoplay as SliderAutoplay, __lib_types_SliderBreakpoint as SliderBreakpoint, __lib_types_SliderEffect as SliderEffect, __lib_types_SliderLazy as SliderLazy, __lib_types_SliderNavigation as SliderNavigation, __lib_types_SliderPagination as SliderPagination, __lib_types_SliderProps as SliderProps, __lib_types_SliderRefs as SliderRefs, __lib_types_SliderScrollbar as SliderScrollbar, __lib_types_SliderSlide as SliderSlide, __lib_types_SliderState as SliderState, __lib_types_SliderThumbs as SliderThumbs, __lib_types_SliderVirtual as SliderVirtual, __lib_types_SliderZoom as SliderZoom, __lib_types_SocialLink as SocialLink, __lib_types_SocialPlatform as SocialPlatform, __lib_types_SortConfig as SortConfig, __lib_types_SpinnerProps as SpinnerProps, __lib_types_StateModifier as StateModifier, __lib_types_TextareaProps as TextareaProps, __lib_types_ThemeColor as ThemeColor, __lib_types_ThemeName as ThemeName, __lib_types_TodoItem as TodoItem, __lib_types_TodoProps as TodoProps, __lib_types_UseCardOptions as UseCardOptions, __lib_types_UseCardReturn as UseCardReturn, __lib_types_Variant as Variant, __lib_types_VideoChapter as VideoChapter, __lib_types_VideoPlayerProps as VideoPlayerProps, __lib_types_VideoQuality as VideoQuality, __lib_types_VideoSubtitle as VideoSubtitle, __lib_types_listvariant as listvariant };
+  export type { AccordionProps$1 as AccordionProps, __lib_types_AccordionState as AccordionState, __lib_types_AtomixGlassProps as AtomixGlassProps, __lib_types_AvatarGroupProps as AvatarGroupProps, __lib_types_AvatarProps as AvatarProps, __lib_types_AvatarSize as AvatarSize, __lib_types_BadgeProps as BadgeProps, __lib_types_BaseComponentProps as BaseComponentProps, __lib_types_BreadcrumbInstance as BreadcrumbInstance, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbOptions$1 as BreadcrumbOptions, __lib_types_ButtonGroupProps as ButtonGroupProps, __lib_types_ButtonProps as ButtonProps, __lib_types_CalloutProps as CalloutProps, __lib_types_CardProps as CardProps, ChartAxis$1 as ChartAxis, ChartConfig$1 as ChartConfig, ChartDataPoint$1 as ChartDataPoint, ChartDataset$1 as ChartDataset, ChartProps$1 as ChartProps, ChartSize$1 as ChartSize, ChartType$1 as ChartType, __lib_types_CheckboxProps as CheckboxProps, __lib_types_CodeBlockProps as CodeBlockProps, __lib_types_DataTableColumn as DataTableColumn, __lib_types_DataTableProps as DataTableProps, __lib_types_DisplacementMode as DisplacementMode, __lib_types_DropdownDividerProps as DropdownDividerProps, __lib_types_DropdownHeaderProps as DropdownHeaderProps, __lib_types_DropdownItemProps as DropdownItemProps, __lib_types_DropdownPlacement as DropdownPlacement, __lib_types_DropdownProps as DropdownProps, __lib_types_DropdownTrigger as DropdownTrigger, __lib_types_EdgePanelMode as EdgePanelMode, __lib_types_EdgePanelPosition as EdgePanelPosition, __lib_types_EdgePanelProps as EdgePanelProps, __lib_types_ElementRefs as ElementRefs, __lib_types_ElevationCardProps as ElevationCardProps, __lib_types_ExportFormat as ExportFormat, __lib_types_FooterLayout as FooterLayout, __lib_types_FooterLinkProps as FooterLinkProps, __lib_types_FooterProps as FooterProps, __lib_types_FooterSectionProps as FooterSectionProps, __lib_types_FooterSocialLinkProps as FooterSocialLinkProps, __lib_types_FormGroupProps as FormGroupProps, __lib_types_FormProps as FormProps, __lib_types_GlassContainerProps as GlassContainerProps, __lib_types_GlassMode as GlassMode, __lib_types_GlassSize as GlassSize, __lib_types_HeroAlignment as HeroAlignment, __lib_types_HeroBackgroundSlide as HeroBackgroundSlide, __lib_types_HeroBackgroundSliderConfig as HeroBackgroundSliderConfig, __lib_types_HeroProps as HeroProps, __lib_types_IconPosition as IconPosition, IconSize$1 as IconSize, IconWeight$1 as IconWeight, __lib_types_ImageType as ImageType, __lib_types_InputProps as InputProps, ListGroupProps$1 as ListGroupProps, __lib_types_ListProps as ListProps, __lib_types_MegaMenuColumnProps as MegaMenuColumnProps, __lib_types_MegaMenuLinkProps as MegaMenuLinkProps, __lib_types_MegaMenuProps as MegaMenuProps, __lib_types_MenuItemProps as MenuItemProps, __lib_types_MenuProps as MenuProps, __lib_types_MessageItem as MessageItem, __lib_types_MessagesProps as MessagesProps, __lib_types_ModalProps as ModalProps, __lib_types_MousePosition as MousePosition, __lib_types_NavAlignment as NavAlignment, __lib_types_NavDropdownProps as NavDropdownProps, __lib_types_NavItemProps as NavItemProps, __lib_types_NavProps as NavProps, __lib_types_NavVariant as NavVariant, __lib_types_NavbarPosition as NavbarPosition, __lib_types_NavbarProps as NavbarProps, __lib_types_OverLightConfig as OverLightConfig, __lib_types_OverLightObjectConfig as OverLightObjectConfig, __lib_types_PaginationProps as PaginationProps, PhosphorIconsType$1 as PhosphorIconsType, __lib_types_PhotoViewerProps as PhotoViewerProps, __lib_types_PopoverProps as PopoverProps, __lib_types_PopoverTriggerProps as PopoverTriggerProps, __lib_types_ProgressProps as ProgressProps, __lib_types_RadioProps as RadioProps, __lib_types_RatingProps as RatingProps, __lib_types_SelectOption as SelectOption, __lib_types_SelectProps as SelectProps, __lib_types_SelectionMode as SelectionMode, __lib_types_SideMenuItemProps as SideMenuItemProps, __lib_types_SideMenuListProps as SideMenuListProps, __lib_types_SideMenuProps as SideMenuProps, __lib_types_Size as Size, __lib_types_SliderAutoplay as SliderAutoplay, __lib_types_SliderBreakpoint as SliderBreakpoint, __lib_types_SliderEffect as SliderEffect, __lib_types_SliderLazy as SliderLazy, __lib_types_SliderNavigation as SliderNavigation, __lib_types_SliderPagination as SliderPagination, __lib_types_SliderProps as SliderProps, __lib_types_SliderRefs as SliderRefs, __lib_types_SliderScrollbar as SliderScrollbar, __lib_types_SliderSlide as SliderSlide, __lib_types_SliderState as SliderState, __lib_types_SliderThumbs as SliderThumbs, __lib_types_SliderVirtual as SliderVirtual, __lib_types_SliderZoom as SliderZoom, __lib_types_SocialLink as SocialLink, __lib_types_SocialPlatform as SocialPlatform, __lib_types_SortConfig as SortConfig, __lib_types_SpinnerProps as SpinnerProps, __lib_types_StateModifier as StateModifier, __lib_types_TextareaProps as TextareaProps, __lib_types_ThemeColor as ThemeColor, __lib_types_ThemeName as ThemeName, __lib_types_TodoItem as TodoItem, __lib_types_TodoProps as TodoProps, __lib_types_UseCardOptions as UseCardOptions, __lib_types_UseCardReturn as UseCardReturn, __lib_types_Variant as Variant, __lib_types_VideoChapter as VideoChapter, __lib_types_VideoPlayerProps as VideoPlayerProps, __lib_types_VideoQuality as VideoQuality, __lib_types_VideoSubtitle as VideoSubtitle, __lib_types_listvariant as listvariant };
 }
 
 /**
@@ -8331,6 +8452,12 @@ declare const CLASS_PREFIX: {
 /**
  * Button-specific constants
  */
+declare const THEME_NAMING: {
+    BUTTON_PREFIX: string;
+    ICON_ELEMENT: string;
+    LABEL_ELEMENT: string;
+    SPINNER_ELEMENT: string;
+};
 declare const BUTTON: {
     BASE_CLASS: string;
     ICON_CLASS: string;
@@ -8900,21 +9027,31 @@ declare const DATA_TABLE_CLASSES: {
     header: string;
     headerCell: string;
     headerContent: string;
+    headerActions: string;
     sortable: string;
     sortIcon: string;
     row: string;
+    rowSelected: string;
     cell: string;
+    selectionCell: string;
     loadingCell: string;
     loadingIndicator: string;
     emptyCell: string;
     toolbar: string;
+    toolbarLeft: string;
+    toolbarRight: string;
     search: string;
     searchInput: string;
+    columnFilter: string;
     pagination: string;
     striped: string;
     bordered: string;
     dense: string;
     loading: string;
+    stickyHeader: string;
+    dragging: string;
+    dragOver: string;
+    resizeHandle: string;
     open: string;
 };
 /**
@@ -10101,6 +10238,7 @@ declare const __lib_constants_TAB: typeof TAB;
 declare const __lib_constants_TESTIMONIAL: typeof TESTIMONIAL;
 declare const __lib_constants_TEXTAREA: typeof TEXTAREA;
 declare const __lib_constants_THEME_COLORS: typeof THEME_COLORS;
+declare const __lib_constants_THEME_NAMING: typeof THEME_NAMING;
 declare const __lib_constants_TODO: typeof TODO;
 declare const __lib_constants_TOGGLE: typeof TOGGLE;
 declare const __lib_constants_TOOLTIP: typeof TOOLTIP;
@@ -10159,6 +10297,7 @@ declare namespace __lib_constants {
     __lib_constants_TESTIMONIAL as TESTIMONIAL,
     __lib_constants_TEXTAREA as TEXTAREA,
     __lib_constants_THEME_COLORS as THEME_COLORS,
+    __lib_constants_THEME_NAMING as THEME_NAMING,
     __lib_constants_TODO as TODO,
     __lib_constants_TOGGLE as TOGGLE,
     __lib_constants_TOOLTIP as TOOLTIP,
@@ -11002,6 +11141,38 @@ interface UseDataTableProps {
      * Initial sort configuration
      */
     initialSortConfig?: SortConfig;
+    /**
+     * Row selection mode
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * Selected row IDs (controlled)
+     */
+    selectedRowIds?: (string | number)[];
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange?: (selectedRows: any[], selectedIds: (string | number)[]) => void;
+    /**
+     * Key to use as unique identifier for rows
+     */
+    rowKey?: string | ((row: any) => string | number);
+    /**
+     * Column-specific filters
+     */
+    columnFilters?: boolean;
+    /**
+     * Whether columns can be reordered
+     */
+    reorderable?: boolean;
+    /**
+     * Callback when column order changes
+     */
+    onColumnReorder?: (columnKeys: string[]) => void;
+    /**
+     * Callback when column visibility changes
+     */
+    onColumnVisibilityChange?: (visibleColumns: string[]) => void;
 }
 interface UseDataTableReturn {
     /**
@@ -11032,11 +11203,63 @@ interface UseDataTableReturn {
      * Handle search input
      */
     handleSearch: (query: string) => void;
+    /**
+     * Selected row IDs
+     */
+    selectedRowIds: (string | number)[];
+    /**
+     * Selected rows data
+     */
+    selectedRows: any[];
+    /**
+     * Handle row selection
+     */
+    handleRowSelect: (rowId: string | number, selected: boolean) => void;
+    /**
+     * Handle select all
+     */
+    handleSelectAll: (selected: boolean) => void;
+    /**
+     * Whether all rows are selected
+     */
+    isAllSelected: boolean;
+    /**
+     * Whether some rows are selected
+     */
+    isIndeterminate: boolean;
+    /**
+     * Column order
+     */
+    columnOrder: string[];
+    /**
+     * Visible columns
+     */
+    visibleColumns: DataTableColumn[];
+    /**
+     * Column visibility map
+     */
+    columnVisibility: Record<string, boolean>;
+    /**
+     * Handle column visibility toggle
+     */
+    handleColumnVisibilityToggle: (columnKey: string) => void;
+    /**
+     * Column-specific filter values
+     */
+    columnFilterValues: Record<string, string>;
+    /**
+     * Handle column filter change
+     */
+    handleColumnFilterChange: (columnKey: string, value: string) => void;
+    /**
+     * Clear all column filters
+     */
+    clearColumnFilters: () => void;
 }
 /**
  * Hook for managing DataTable state and behavior
  */
-declare function useDataTable({ data, columns, sortable, paginated, pageSize, onSort, initialSortConfig, }: UseDataTableProps): UseDataTableReturn;
+declare function useDataTable({ data, columns, sortable, paginated, pageSize, onSort, initialSortConfig, selectionMode, selectedRowIds: controlledSelectedRowIds, onSelectionChange, rowKey, columnFilters, reorderable, onColumnReorder, onColumnVisibilityChange, }: UseDataTableProps): UseDataTableReturn;
 
 interface UseModalProps {
     /**
@@ -11510,7 +11733,7 @@ interface CountdownProps {
 declare const Countdown: React__default.FC<CountdownProps>;
 
 /**
- * DataTable - A flexible and accessible data table component
+ * DataTable - A flexible and accessible data table component with advanced features
  *
  * @example
  * ```tsx
@@ -11518,6 +11741,7 @@ declare const Countdown: React__default.FC<CountdownProps>;
  *   data={users}
  *   columns={columns}
  *   sortable={true}
+ *   selectionMode="multiple"
  *   onRowClick={handleRowClick}
  * />
  * ```
@@ -12269,6 +12493,38 @@ interface UploadProps {
      * Icon component or class name
      */
     icon?: React__default.ReactNode;
+    /**
+     * Upload endpoint URL. If not provided, upload will be simulated.
+     */
+    uploadEndpoint?: string;
+    /**
+     * HTTP method for upload request
+     */
+    uploadMethod?: 'POST' | 'PUT' | 'PATCH';
+    /**
+     * Additional headers to include in upload request
+     */
+    uploadHeaders?: Record<string, string>;
+    /**
+     * Additional form data fields to include in upload
+     */
+    uploadData?: Record<string, string>;
+    /**
+     * Chunk size in MB for chunked uploads (0 = no chunking)
+     */
+    chunkSizeInMB?: number;
+    /**
+     * Maximum number of retry attempts for failed uploads
+     */
+    maxRetries?: number;
+    /**
+     * Delay in milliseconds between retry attempts
+     */
+    retryDelay?: number;
+    /**
+     * Whether to automatically upload files after selection
+     */
+    autoUpload?: boolean;
     /**
      * Called when files are selected
      */
@@ -12280,11 +12536,15 @@ interface UploadProps {
     /**
      * Called when file upload is complete
      */
-    onFileUploadComplete?: (file: File) => void;
+    onFileUploadComplete?: (file: File, response?: any) => void;
     /**
      * Called on file upload errors
      */
     onFileUploadError?: (file: File, error: string) => void;
+    /**
+     * Called when upload is cancelled
+     */
+    onUploadCancel?: (file: File) => void;
     /**
      * Additional CSS class
      */
@@ -12598,106 +12858,303 @@ declare const defaultTokens: DesignTokens;
 declare function createTokens(overrides?: Partial<DesignTokens>): DesignTokens;
 
 /**
- * Theme Manager Type Definitions
+ * CSS Variable Generator
  *
- * TypeScript types and interfaces for the Atomix Design System theme management system.
- */
-/**
- * Theme metadata interface matching themes.config.js structure
+ * Generates CSS custom properties from design tokens.
  */
-interface ThemeMetadata {
-    /** Display name of the theme */
-    name: string;
-    /** Unique identifier/class name for the theme */
-    class?: string;
-    /** Theme description */
-    description?: string;
-    /** Theme author */
-    author?: string;
-    /** Theme version (semver) */
-    version?: string;
-    /** Theme tags for categorization */
-    tags?: string[];
-    /** Whether the theme supports dark mode */
-    supportsDarkMode?: boolean;
-    /** Theme status: stable, beta, experimental, deprecated */
-    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-    /** Accessibility information */
-    a11y?: {
-        /** Target contrast ratio */
-        contrastTarget?: number;
-        /** Supported color modes */
-        modes?: string[];
-    };
-    /** Primary theme color (for UI display) */
-    color?: string;
-    /** Theme features list */
-    features?: string[];
-    /** Theme dependencies (other themes required) */
-    dependencies?: string[];
-}
+
 /**
- * Theme change event payload
+ * Options for CSS variable generation
  */
-interface ThemeChangeEvent {
-    /** Previous theme name */
-    previousTheme: string | null;
-    /** New theme name */
-    currentTheme: string;
-    /** Theme object (for JS themes) */
-    themeObject?: Theme | null;
-    /** Timestamp of the change */
-    timestamp: number;
-    /** Whether the change was from user action or system */
-    source: 'user' | 'system' | 'storage';
+interface GenerateCSSVariablesOptions {
+    /** CSS selector for the variables (default: ':root') */
+    selector?: string;
+    /** Prefix for CSS variables (default: 'atomix') */
+    prefix?: string;
 }
 /**
- * Theme load options
+ * Generate CSS variables from tokens
+ *
+ * Converts flat token object to CSS custom properties.
+ *
+ * @param tokens - Design tokens object
+ * @param options - Generation options
+ * @returns CSS string with custom properties
+ *
+ * @example
+ * ```typescript
+ * const tokens = {
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * };
+ *
+ * const css = generateCSSVariables(tokens);
+ * // Returns: ":root {\n  --atomix-primary: #7c3aed;\n  --atomix-spacing-4: 1rem;\n}"
+ * ```
  */
-interface ThemeLoadOptions {
-    /** Force reload even if already loaded */
-    force?: boolean;
-    /** Preload without applying */
-    preload?: boolean;
-    /** Remove previous theme CSS */
-    removePrevious?: boolean;
-    /** Custom CSS path override */
-    customPath?: string;
-    /** Fallback to default theme on error */
-    fallbackOnError?: boolean;
-}
+declare function generateCSSVariables(tokens: DesignTokens, options?: GenerateCSSVariablesOptions): string;
 /**
- * Theme validation result
+ * Generate CSS variables with custom selector
+ *
+ * Useful for theme-specific selectors like `[data-theme="dark"]`
+ *
+ * @param tokens - Design tokens object
+ * @param selector - CSS selector (e.g., '[data-theme="dark"]')
+ * @param prefix - CSS variable prefix
+ * @returns CSS string
+ *
+ * @example
+ * ```typescript
+ * const css = generateCSSVariablesForSelector(
+ *   tokens,
+ *   '[data-theme="dark"]',
+ *   'atomix'
+ * );
+ * ```
  */
-interface ThemeValidationResult {
-    /** Whether the theme is valid */
-    valid: boolean;
-    /** Validation errors */
-    errors: string[];
-    /** Validation warnings */
-    warnings: string[];
-}
+declare function generateCSSVariablesForSelector(tokens: DesignTokens, selector: string, prefix?: string): string;
+
 /**
- * React hook return type for useTheme
+ * Core Theme Functions
+ *
+ * Simplified theme system using DesignTokens only.
+ * Config-first approach: loads from atomix.config.ts when no input is provided.
  */
-interface UseThemeReturn {
-    /** Current theme name */
-    theme: string;
-    /** Current active theme object (for JS themes) */
-    activeTheme: Theme | null;
-    /** Function to change theme (supports string, Theme, or DesignTokens) */
-    setTheme: (theme: string | Theme | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
-    /** Available themes */
-    availableThemes: ThemeMetadata[];
-    /** Whether a theme is currently loading */
-    isLoading: boolean;
-    /** Current error, if any */
-    error: Error | null;
-    /** Whether a specific theme is loaded */
-    isThemeLoaded: (themeName: string) => boolean;
-    /** Preload a theme */
-    preloadTheme: (themeName: string) => Promise<void>;
-}
+
+/**
+ * Create theme CSS from DesignTokens
+ *
+ * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
+ *
+ * @param input - DesignTokens (partial) or undefined (loads from config)
+ * @param options - CSS generation options (prefix is automatically read from config if not provided)
+ * @returns CSS string with custom properties
+ * @throws Error if config loading fails when no input is provided
+ *
+ * @example
+ * ```typescript
+ * // Loads from atomix.config.ts
+ * const css = createTheme();
+ *
+ * // Using DesignTokens
+ * const css = createTheme({
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * });
+ *
+ * // With custom options
+ * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
+ * ```
+ */
+declare function createTheme(input?: Partial<DesignTokens>, options?: GenerateCSSVariablesOptions): string;
+
+/**
+ * Theme Composition Utilities
+ *
+ * Simplified utilities for composing and merging DesignTokens.
+ */
+/**
+ * Deep merge multiple objects
+ * Later objects override earlier ones
+ */
+declare function deepMerge<T extends Record<string, unknown>>(...objects: Partial<T>[]): T;
+
+/**
+ * Merge multiple DesignTokens objects into a single DesignTokens object
+ *
+ * @param tokens - DesignTokens objects to merge
+ * @returns Merged DesignTokens object
+ *
+ * @example
+ * ```typescript
+ * const baseTokens = { 'primary': '#000', 'spacing-4': '1rem' };
+ * const customTokens = { 'secondary': '#fff', 'spacing-4': '1.5rem' };
+ * const merged = mergeTheme(baseTokens, customTokens);
+ * // Returns: { 'primary': '#000', 'secondary': '#fff', 'spacing-4': '1.5rem' }
+ * ```
+ */
+declare function mergeTheme(...tokens: Partial<DesignTokens>[]): Partial<DesignTokens>;
+/**
+ * Extend DesignTokens with additional tokens
+ *
+ * @param baseTokens - Base DesignTokens to extend
+ * @param extension - Additional DesignTokens to merge
+ * @returns Extended DesignTokens object
+ *
+ * @example
+ * ```typescript
+ * const base = { 'primary': '#000' };
+ * const extended = extendTheme(base, { 'secondary': '#fff' });
+ * // Returns: { 'primary': '#000', 'secondary': '#fff' }
+ * ```
+ */
+declare function extendTheme(baseTokens: Partial<DesignTokens>, extension: Partial<DesignTokens>): Partial<DesignTokens>;
+
+/**
+ * Theme Metadata interface
+ */
+interface ThemeMetadata$1 {
+    name: string;
+    class: string;
+    description?: string;
+    version?: string;
+    [key: string]: any;
+}
+/**
+ * Theme Registry type - a record of theme IDs to metadata
+ */
+type ThemeRegistry = Record<string, ThemeMetadata$1>;
+/**
+ * Create a new theme registry
+ */
+declare function createThemeRegistry(): ThemeRegistry;
+/**
+ * Register a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ * @param metadata - Theme metadata
+ */
+declare function registerTheme(registry: ThemeRegistry, id: string, metadata: ThemeMetadata$1): void;
+/**
+ * Unregister a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+declare function unregisterTheme(registry: ThemeRegistry, id: string): boolean;
+/**
+ * Check if a theme is registered
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+declare function hasTheme(registry: ThemeRegistry, id: string): boolean;
+/**
+ * Get theme metadata
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+declare function getTheme(registry: ThemeRegistry, id: string): ThemeMetadata$1 | undefined;
+/**
+ * Get all registered theme metadata
+ * @param registry - Theme registry object
+ */
+declare function getAllThemes(registry: ThemeRegistry): ThemeMetadata$1[];
+/**
+ * Get all registered theme IDs
+ * @param registry - Theme registry object
+ */
+declare function getThemeIds(registry: ThemeRegistry): string[];
+/**
+ * Clear all registered themes
+ * @param registry - Theme registry object
+ */
+declare function clearThemes(registry: ThemeRegistry): void;
+/**
+ * Get the number of registered themes
+ * @param registry - Theme registry object
+ */
+declare function getThemeCount(registry: ThemeRegistry): number;
+
+/**
+ * Theme Manager Type Definitions
+ *
+ * TypeScript types and interfaces for the Atomix Design System theme management system.
+ */
+/**
+ * Theme metadata interface matching themes.config.js structure
+ */
+interface ThemeMetadata {
+    /** Display name of the theme */
+    name: string;
+    /** Unique identifier/class name for the theme */
+    class?: string;
+    /** Theme description */
+    description?: string;
+    /** Theme author */
+    author?: string;
+    /** Theme version (semver) */
+    version?: string;
+    /** Theme tags for categorization */
+    tags?: string[];
+    /** Whether the theme supports dark mode */
+    supportsDarkMode?: boolean;
+    /** Theme status: stable, beta, experimental, deprecated */
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    /** Accessibility information */
+    a11y?: {
+        /** Target contrast ratio */
+        contrastTarget?: number;
+        /** Supported color modes */
+        modes?: string[];
+    };
+    /** Primary theme color (for UI display) */
+    color?: string;
+    /** Theme features list */
+    features?: string[];
+    /** Theme dependencies (other themes required) */
+    dependencies?: string[];
+}
+/**
+ * Theme change event payload
+ */
+interface ThemeChangeEvent {
+    /** Previous theme name */
+    previousTheme: string | null;
+    /** New theme name */
+    currentTheme: string;
+    /** DesignTokens if using tokens-based theme */
+    tokens?: DesignTokens | null;
+    /** Timestamp of the change */
+    timestamp: number;
+    /** Whether the change was from user action or system */
+    source: 'user' | 'system' | 'storage';
+}
+/**
+ * Theme load options
+ */
+interface ThemeLoadOptions {
+    /** Force reload even if already loaded */
+    force?: boolean;
+    /** Preload without applying */
+    preload?: boolean;
+    /** Remove previous theme CSS */
+    removePrevious?: boolean;
+    /** Custom CSS path override */
+    customPath?: string;
+    /** Fallback to default theme on error */
+    fallbackOnError?: boolean;
+}
+/**
+ * Theme validation result
+ */
+interface ThemeValidationResult {
+    /** Whether the theme is valid */
+    valid: boolean;
+    /** Validation errors */
+    errors: string[];
+    /** Validation warnings */
+    warnings: string[];
+}
+/**
+ * React hook return type for useTheme
+ */
+interface UseThemeReturn {
+    /** Current theme name */
+    theme: string;
+    /** Current active DesignTokens (if using tokens-based theme) */
+    activeTokens: DesignTokens | null;
+    /** Function to change theme (supports string or DesignTokens) */
+    setTheme: (theme: string | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
+    /** Available themes */
+    availableThemes: ThemeMetadata[];
+    /** Whether a theme is currently loading */
+    isLoading: boolean;
+    /** Current error, if any */
+    error: Error | null;
+    /** Whether a specific theme is loaded */
+    isThemeLoaded: (themeName: string) => boolean;
+    /** Preload a theme */
+    preloadTheme: (themeName: string) => Promise<void>;
+}
 /**
  * Component-level theme override configuration
  */
@@ -12754,8 +13211,8 @@ interface ThemeComponentOverrides {
 interface ThemeProviderProps {
     /** Child components */
     children: React.ReactNode;
-    /** Default theme */
-    defaultTheme?: string | Theme;
+    /** Default theme (string name or DesignTokens) */
+    defaultTheme?: string | DesignTokens | Partial<DesignTokens>;
     /** Available themes */
     themes?: Record<string, ThemeMetadata>;
     /** Base path for theme CSS */
@@ -12775,7 +13232,7 @@ interface ThemeProviderProps {
     /** Use minified CSS */
     useMinified?: boolean;
     /** Callback when theme changes */
-    onThemeChange?: (theme: string | Theme | DesignTokens) => void;
+    onThemeChange?: (theme: string | DesignTokens) => void;
     /** Callback on error */
     onError?: (error: Error, themeName: string) => void;
 }
@@ -12785,10 +13242,10 @@ interface ThemeProviderProps {
 interface ThemeContextValue {
     /** Current theme name */
     theme: string;
-    /** Current active theme object (for JS themes) */
-    activeTheme: Theme | null;
-    /** Set theme function (supports string, Theme, or DesignTokens) */
-    setTheme: (theme: string | Theme | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
+    /** Current active DesignTokens (if using tokens-based theme) */
+    activeTokens: DesignTokens | null;
+    /** Set theme function (supports string or DesignTokens) */
+    setTheme: (theme: string | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
     /** Available themes */
     availableThemes: ThemeMetadata[];
     /** Loading state */
@@ -12813,36 +13270,6 @@ interface PaletteColor {
     /** Contrast text color (auto-generated if not provided) */
     contrastText?: string;
 }
-/**
- * Palette configuration options for createTheme
- */
-interface PaletteOptions {
-    /** Primary color configuration */
-    primary?: Partial<PaletteColor> | string;
-    /** Secondary color configuration */
-    secondary?: Partial<PaletteColor> | string;
-    /** Error color configuration */
-    error?: Partial<PaletteColor> | string;
-    /** Warning color configuration */
-    warning?: Partial<PaletteColor> | string;
-    /** Info color configuration */
-    info?: Partial<PaletteColor> | string;
-    /** Success color configuration */
-    success?: Partial<PaletteColor> | string;
-    /** Background colors */
-    background?: {
-        default?: string;
-        subtle?: string;
-    };
-    /** Text colors */
-    text?: {
-        primary?: string;
-        secondary?: string;
-        disabled?: string;
-    };
-    /** Additional custom colors */
-    [key: string]: any;
-}
 /**
  * Typography configuration options for createTheme
  */
@@ -12912,10 +13339,6 @@ interface TypographyOptions {
  * Spacing function type
  */
 type SpacingFunction = (...values: number[]) => string;
-/**
- * Spacing configuration options for createTheme
- */
-type SpacingOptions = number | number[] | SpacingFunction;
 /**
  * Breakpoint values configuration
  */
@@ -12927,15 +13350,6 @@ interface BreakpointValues {
     xl?: number;
     [key: string]: number | undefined;
 }
-/**
- * Breakpoints configuration options for createTheme
- */
-interface BreakpointsOptions {
-    /** Breakpoint values in pixels */
-    values?: BreakpointValues;
-    /** Unit for breakpoints (default: 'px') */
-    unit?: string;
-}
 /**
  * Shadow configuration
  */
@@ -13013,30 +13427,6 @@ interface BorderRadiusOptions {
 interface ThemeCustomProperties {
     [key: string]: any;
 }
-/**
- * Theme configuration options for createTheme
- * Extends ThemeMetadata to support both CSS and JS theme properties
- */
-interface ThemeOptions extends Partial<ThemeMetadata> {
-    /** Color palette configuration */
-    palette?: PaletteOptions;
-    /** Typography configuration */
-    typography?: TypographyOptions;
-    /** Spacing configuration */
-    spacing?: SpacingOptions;
-    /** Breakpoints configuration */
-    breakpoints?: BreakpointsOptions;
-    /** Shadow configuration */
-    shadows?: ShadowOptions;
-    /** Transition configuration */
-    transitions?: TransitionOptions;
-    /** Z-index configuration */
-    zIndex?: ZIndexOptions;
-    /** Border radius configuration */
-    borderRadius?: BorderRadiusOptions;
-    /** Custom properties */
-    custom?: ThemeCustomProperties;
-}
 /**
  * Complete theme object with computed values
  * Generated by createTheme function
@@ -13108,1126 +13498,540 @@ interface Theme extends ThemeMetadata {
 }
 
 /**
- * CSS Variable Generator
+ * Naming Utilities
  *
- * Generates CSS custom properties from design tokens.
+ * Provides consistent naming conventions across the theme system
+ */
+interface NamingOptions {
+    prefix?: string;
+    component?: string;
+    variant?: string;
+    state?: string;
+}
+/**
+ * Generate consistent CSS class names following BEM methodology
+ */
+declare function generateClassName(block: string, element?: string, modifiers?: Record<string, boolean | string>): string;
+/**
+ * Generate consistent CSS variable names
+ */
+declare function generateCSSVariableName(property: string, options?: NamingOptions): string;
+/**
+ * Normalize theme tokens to consistent naming convention
  */
+declare function normalizeThemeTokens(tokens: Record<string, any>): Record<string, any>;
+/**
+ * Convert camelCase to kebab-case for CSS custom properties
+ */
+declare function camelToKebab(str: string): string;
+/**
+ * Convert theme property to CSS variable name
+ */
+declare function themePropertyToCSSVar(propertyPath: string, prefix?: string): string;
 
 /**
- * Options for CSS variable generation
+ * Component Theming Utilities
+ *
+ * Provides consistent patterns for applying theme values to components
+ * using DesignTokens and CSS variables
  */
-interface GenerateCSSVariablesOptions {
-    /** CSS selector for the variables (default: ':root') */
-    selector?: string;
-    /** Prefix for CSS variables (default: 'atomix') */
-    prefix?: string;
+
+interface ComponentThemeOptions {
+    component: string;
+    variant?: string;
+    size?: string;
+    tokens?: Partial<DesignTokens>;
 }
 /**
- * Generate CSS variables from tokens
+ * Get a theme value for a specific component using CSS variables
+ * This ensures all components access theme values consistently
+ */
+declare function getComponentThemeValue(component: string, property: string, variant?: string, size?: string): string;
+/**
+ * Generate component-specific CSS variables from DesignTokens
+ */
+declare function generateComponentCSSVars(component: string, tokens?: Partial<DesignTokens>, variant?: string, size?: string): Record<string, string>;
+/**
+ * Apply consistent theme to component style object using DesignTokens
+ */
+declare function applyComponentTheme(component: string, style?: React.CSSProperties, variant?: string, size?: string, tokens?: Partial<DesignTokens>): React.CSSProperties;
+/**
+ * Create a hook for consistent component theming
+ */
+declare function useComponentTheme(component: string, variant?: string, size?: string, tokens?: Partial<DesignTokens>): (property: string) => string;
+
+/**
+ * CSS Injection Utilities
  *
- * Converts flat token object to CSS custom properties.
+ * Inject CSS into HTML head via <style> element.
+ */
+/**
+ * Inject CSS into HTML head via <style> element
  *
- * @param tokens - Design tokens object
- * @param options - Generation options
- * @returns CSS string with custom properties
+ * Creates or updates a style element in the document head.
+ * If an element with the same ID exists, it will be updated.
+ *
+ * @param css - CSS string to inject
+ * @param id - Style element ID (default: 'atomix-theme')
  *
  * @example
  * ```typescript
- * const tokens = {
- *   'primary': '#7c3aed',
- *   'spacing-4': '1rem',
- * };
+ * const css = ':root { --atomix-color-primary: #7AFFD7; }';
+ * injectCSS(css);
  *
- * const css = generateCSSVariables(tokens);
- * // Returns: ":root {\n  --atomix-primary: #7c3aed;\n  --atomix-spacing-4: 1rem;\n}"
+ * // With custom ID
+ * injectCSS(css, 'my-custom-theme');
  * ```
  */
-declare function generateCSSVariables(tokens: DesignTokens, options?: GenerateCSSVariablesOptions): string;
+declare function injectCSS(css: string, id?: string): void;
 /**
- * Generate CSS variables with custom selector
+ * Remove injected CSS from DOM
  *
- * Useful for theme-specific selectors like `[data-theme="dark"]`
+ * Removes the style element with the given ID from the document head.
  *
- * @param tokens - Design tokens object
- * @param selector - CSS selector (e.g., '[data-theme="dark"]')
- * @param prefix - CSS variable prefix
- * @returns CSS string
+ * @param id - Style element ID to remove (default: 'atomix-theme')
  *
  * @example
  * ```typescript
- * const css = generateCSSVariablesForSelector(
- *   tokens,
- *   '[data-theme="dark"]',
- *   'atomix'
- * );
+ * removeCSS(); // Removes default 'atomix-theme'
+ * removeCSS('my-custom-theme'); // Removes custom ID
  * ```
  */
-declare function generateCSSVariablesForSelector(tokens: DesignTokens, selector: string, prefix?: string): string;
-
+declare function removeCSS(id?: string): void;
 /**
- * Core Theme Functions
+ * Check if CSS is already injected
  *
- * Unified theme system that handles both DesignTokens and Theme objects.
- * Config-first approach: loads from atomix.config.ts when no input is provided.
- * Config file is required for automatic loading.
+ * @param id - Style element ID to check (default: 'atomix-theme')
+ * @returns True if style element exists
  */
+declare function isCSSInjected(id?: string): boolean;
 
 /**
- * Create theme CSS from tokens or Theme object
- *
- * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
- * Config file is required for automatic loading.
- *
- * @param input - DesignTokens (partial), Theme object, or undefined (loads from config)
- * @param options - CSS generation options (prefix is automatically read from config if not provided)
- * @returns CSS string with custom properties
- * @throws Error if config loading fails when no input is provided
- *
- * @example
- * ```typescript
- * // Loads from atomix.config.ts (config file required)
- * const css = createTheme();
- *
- * // Using DesignTokens
- * const css = createTheme({
- *   'primary': '#7c3aed',
- *   'spacing-4': '1rem',
- * });
- *
- * // Using Theme object
- * const theme = createThemeObject({ palette: { primary: { main: '#7c3aed' } } });
- * const css = createTheme(theme);
+ * Theme Configuration Loader
  *
- * // With custom options
- * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
- * ```
+ * Provides functions to load theme configurations from atomix.config.ts
+ * Includes both sync and async versions, with automatic fallbacks
  */
-declare function createTheme(input?: Partial<DesignTokens> | Theme, options?: GenerateCSSVariablesOptions): string;
 
 /**
- * createThemeObject - Create a theme object with computed values
- *
- * Similar to Material-UI's createTheme, this function accepts theme configuration
- * options and returns a complete theme object with computed values.
- *
- * NOTE: For most use cases, use the simple theme system's `createTheme` instead,
- * which generates CSS from DesignTokens. This function is for advanced use cases
- * that need the full Theme object structure.
- *
- * @example
- * ```typescript
- * const theme = createThemeObject({
- *   palette: {
- *     primary: { main: '#7AFFD7' },
- *     secondary: { main: '#FF5733' },
- *   },
- *   typography: {
- *     fontFamily: 'Inter, sans-serif',
- *   },
- * });
- * ```
+ * Load theme from config file (synchronous, Node.js only)
+ * @param configPath - Path to config file (default: atomix.config.ts)
+ * @returns DesignTokens from theme configuration
+ * @throws Error if config loading is not available in browser environment
  */
-
+declare function loadThemeFromConfigSync(options?: {
+    configPath?: string;
+    required?: boolean;
+}): DesignTokens;
 /**
- * Create a theme object with computed values
- *
- * @param options - Theme configuration options
- * @returns Complete theme object
+ * Load theme from config file (asynchronous)
+ * @param configPath - Path to config file (default: atomix.config.ts)
+ * @returns Promise resolving to DesignTokens from theme configuration
  */
-declare function createThemeObject(...options: ThemeOptions[]): Theme;
+declare function loadThemeFromConfig(options?: {
+    configPath?: string;
+    required?: boolean;
+}): Promise<DesignTokens>;
 
 /**
- * Theme Composition Utilities
+ * Theme Provider
  *
- * Utilities for composing, merging, and extending themes.
+ * React context provider for theme management with separated concerns
+ * Updated to use the new simplified theme system
  */
 
 /**
- * Deep merge multiple objects
- * Later objects override earlier ones
- */
-declare function deepMerge<T extends Record<string, any>>(...objects: Partial<T>[]): T;
-/**
- * Merge multiple theme options into a single theme options object
- *
- * @param themes - Theme options to merge
- * @returns Merged theme options
- *
- * @example
- * ```typescript
- * const baseTheme = { palette: { primary: { main: '#000' } } };
- * const customTheme = { palette: { secondary: { main: '#fff' } } };
- * const merged = mergeTheme(baseTheme, customTheme);
- * ```
- */
-declare function mergeTheme(...themes: ThemeOptions[]): ThemeOptions;
-/**
- * Extend an existing theme with new options
+ * Theme Provider
  *
- * @param baseTheme - Base theme to extend (can be Theme or ThemeOptions)
- * @param extension - Theme options to extend with
- * @returns New theme with extended options
+ * React context provider for theme management with separated concerns.
+ * Simplified version focusing on core functionality:
+ * - String-based themes (CSS files)
+ * - DesignTokens (dynamic themes)
+ * - Persistence via localStorage
  *
- * @example
- * ```typescript
- * const base = createTheme({ palette: { primary: { main: '#000' } } });
- * const extended = extendTheme(base, {
- *   palette: { secondary: { main: '#fff' } }
- * });
- * ```
+ * Falls back to 'default' theme if no configuration is found.
  */
-declare function extendTheme(baseTheme: Theme | ThemeOptions, extension: ThemeOptions): Theme;
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
 
 /**
- * Atomix Config Loader
+ * useTheme Hook
  *
- * Helper functions to load atomix.config.ts from external projects.
- * Similar to how Tailwind loads tailwind.config.js
+ * React hook for accessing theme context
  */
 
 /**
- * Load Atomix configuration from project root
- *
- * Attempts to load atomix.config.ts from the current working directory.
- * Falls back to default config if file doesn't exist.
+ * useTheme hook
  *
- * @param options - Loader options
- * @returns Loaded configuration or default
+ * Access theme context and theme management functions
  *
  * @example
- * ```typescript
- * import { loadAtomixConfig } from '@shohojdhara/atomix/config';
- * import { createTheme } from '@shohojdhara/atomix/theme';
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, setTheme, availableThemes } = useTheme();
  *
- * const config = loadAtomixConfig();
- * const theme = createTheme(config.theme?.tokens || {});
+ *   return (
+ *     <div>
+ *       <p>Current theme: {theme}</p>
+ *       <button onClick={() => setTheme('dark-theme')}>
+ *         Switch to Dark
+ *       </button>
+ *     </div>
+ *   );
+ * }
  * ```
  */
-declare function loadAtomixConfig(options?: {
-    /** Custom config path (default: 'atomix.config.ts') */
-    configPath?: string;
-    /** Whether to throw error if config not found (default: false) */
-    required?: boolean;
-}): AtomixConfig;
+declare function useTheme(): UseThemeReturn;
+
 /**
- * Resolve config path
+ * Standardized hook for accessing theme tokens in components
  *
- * Finds atomix.config.ts in the project, checking common locations.
- * Returns null in browser environments where file system access is not available.
- *
- * This function is designed to work in Node.js environments only.
- * In browser builds, it will always return null without attempting to access Node.js modules.
- *
- * @internal This function uses Node.js modules and should not be called in browser environments.
+ * Provides consistent access to theme values using CSS custom properties
+ * and DesignTokens.
  */
-declare function resolveConfigPath(): string | null;
+type ThemeTokens$1 = {
+    theme: string;
+    activeTokens: DesignTokens | null;
+    getToken: (tokenName: string, fallback?: string) => string;
+    colors: {
+        primary: string;
+        secondary: string;
+        error: string;
+        success: string;
+        warning: string;
+        info: string;
+        light: string;
+        dark: string;
+    };
+    spacing: Record<string, string>;
+    borderRadius: Record<string, string>;
+    typography: {
+        fontFamily: Record<string, string>;
+        fontSize: Record<string, string>;
+        fontWeight: Record<string, string>;
+    };
+    shadows: Record<string, string>;
+    transitions: Record<string, string>;
+};
+declare function useThemeTokens(): ThemeTokens$1;
 
 /**
- * Atomix Configuration System
- *
- * Tailwind-like configuration for customizing the Atomix Design System.
- *
- * External developers can create `atomix.config.ts` in their project root
- * to customize design tokens, similar to Tailwind's tailwind.config.js
- *
- * @example
- * ```typescript
- * // atomix.config.ts (in your project)
- * import { defineConfig } from '@shohojdhara/atomix/config';
+ * Theme context with default values
+ */
+declare const ThemeContext: React$1.Context<ThemeContextValue | null>;
+
+/**
+ * Theme Error Boundary
  *
- * export default defineConfig({
- *   theme: {
- *     extend: {
- *       colors: {
- *         primary: { main: '#7AFFD7' },
- *       },
- *     },
- *   },
- * });
- * ```
+ * React error boundary for catching and handling theme-related errors.
+ * Prevents the entire app from crashing when theme errors occur.
  */
 
 /**
- * Color Scale (1-10)
+ * Error boundary state
  */
-interface ColorScale {
-    1?: string;
-    2?: string;
-    3?: string;
-    4?: string;
-    5?: string;
-    6?: string;
-    7?: string;
-    8?: string;
-    9?: string;
-    10?: string;
-    [key: string]: string | undefined;
+interface ThemeErrorBoundaryState {
+    /** Whether an error has occurred */
+    hasError: boolean;
+    /** The error that occurred */
+    error: Error | null;
+    /** Error information */
+    errorInfo: ErrorInfo | null;
 }
 /**
- * Palette Color Options
+ * Error boundary props
  */
-interface PaletteColorOptions {
-    main: string;
-    light?: string;
-    dark?: string;
-    contrastText?: string;
+interface ThemeErrorBoundaryProps {
+    /** Child components */
+    children: ReactNode;
+    /** Fallback UI to render when error occurs */
+    fallback?: (error: Error, errorInfo: ErrorInfo) => ReactNode;
+    /** Callback when error occurs */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** Whether to reset error on children change */
+    resetOnPropsChange?: boolean;
+    /** Custom error message */
+    errorMessage?: string;
 }
 /**
- * Design Tokens Schema (Tailwind-like)
+ * Theme Error Boundary Component
+ *
+ * Catches errors in the theme system and displays a fallback UI
+ * instead of crashing the entire application.
  */
-interface ThemeTokens {
-    /** Color palette */
-    colors?: Record<string, string | PaletteColorOptions | ColorScale | Record<string, string>>;
-    /** Spacing scale */
-    spacing?: Record<string, string>;
-    /** Border radius scale */
-    borderRadius?: Record<string, string>;
-    /** Typography scale and settings */
-    typography?: {
-        fontFamilies?: Record<string, string>;
-        fontSizes?: Record<string, string>;
-        fontWeights?: Record<string, string | number>;
-        lineHeights?: Record<string, string | number>;
-        letterSpacings?: Record<string, string>;
-    };
-    /** Shadow scale */
-    shadows?: Record<string, string>;
-    /** Z-index scale */
-    zIndex?: Record<string, string | number>;
-    /** Breakpoints scale */
-    breakpoints?: Record<string, string | number>;
-    /** Transitions settings */
-    transitions?: {
-        durations?: Record<string, string>;
-        easings?: Record<string, string>;
-    };
+declare class ThemeErrorBoundary extends Component<ThemeErrorBoundaryProps, ThemeErrorBoundaryState> {
+    private logger;
+    constructor(props: ThemeErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ThemeErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void;
+    render(): ReactNode;
 }
+
 /**
- * CSS Theme Definition
+ * Theme Applicator
+ *
+ * Applies theme configurations to the DOM, including CSS variables,
+ * component overrides, typography, spacing, and color palettes.
+ *
+ * Uses the unified theme system for CSS generation and injection.
  */
-interface CSSThemeDefinition {
-    type: 'css';
-    name: string;
-    class?: string;
-    description?: string;
-    author?: string;
-    version?: string;
-    tags?: string[];
-    supportsDarkMode?: boolean;
-    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-    a11y?: {
-        contrastTarget?: number;
-        modes?: string[];
-    };
-    color?: string;
-    features?: string[];
-    dependencies?: string[];
-    cssPath?: string;
-}
+
 /**
- * JavaScript Theme Definition
+ * Theme applicator class for runtime theme application
+ *
+ * Uses the unified theme system for efficient CSS variable generation and injection.
  */
-interface JSThemeDefinition {
-    type: 'js';
-    name: string;
-    class?: string;
-    description?: string;
-    author?: string;
-    version?: string;
-    tags?: string[];
-    supportsDarkMode?: boolean;
-    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-    a11y?: {
-        contrastTarget?: number;
-        modes?: string[];
-    };
-    color?: string;
-    features?: string[];
-    dependencies?: string[];
-    createTheme: () => Theme;
-}
-/**
- * Theme Definition (CSS or JS)
- */
-type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
-/**
- * Build configuration (migrated from theme.config.ts)
- */
-interface BuildConfig {
-    output?: {
-        directory?: string;
-        formats?: {
-            expanded?: string;
-            compressed?: string;
-        };
-    };
-    sass?: {
-        style?: 'expanded' | 'compressed';
-        sourceMap?: boolean;
-        loadPaths?: string[];
-    };
-}
-/**
- * Runtime configuration (migrated from theme.config.ts)
- */
-interface RuntimeConfig {
-    basePath?: string;
-    cdnPath?: string | null;
-    preload?: string[];
-    lazy?: boolean;
-    defaultTheme?: string;
-    storageKey?: string;
-    dataAttribute?: string;
-    enablePersistence?: boolean;
-    useMinified?: boolean;
-}
-/**
- * Integration settings (migrated from theme.config.ts)
- */
-interface IntegrationConfig {
-    cssVariables?: Record<string, string>;
-    classNames?: {
-        theme?: string;
-        colorMode?: string;
-    };
-}
-/**
- * Atomix Configuration Interface
- *
- * Tailwind-like configuration for external developers.
- * Focus on theme customization - build/runtime configs are internal only.
- */
-interface AtomixConfig {
+declare class ThemeApplicator {
+    private root;
+    private styleId;
+    constructor(root?: HTMLElement);
     /**
-     * CSS variable prefix (default: 'atomix')
+     * Apply a complete theme configuration using DesignTokens
      *
-     * Change this to customize all CSS variable names.
-     * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
+     * Uses the unified theme system to generate and inject CSS.
+     * Automatically respects atomix.config.ts when using DesignTokens.
      */
-    prefix?: string;
+    applyTheme(tokens: Partial<DesignTokens>): void;
     /**
-     * Theme customization (Tailwind-like)
-     *
-     * Use `extend` to add or override design tokens.
-     * Use `tokens` to completely replace the default token system (advanced).
+     * Apply global CSS variables
      */
-    theme?: {
-        /**
-         * Extend the default design tokens
-         *
-         * This is the recommended way to customize Atomix.
-         * Your values will override or extend the base tokens.
-         */
-        extend?: ThemeTokens;
-        /**
-         * Override the default tokens entirely (advanced)
-         *
-         * Use with caution - this replaces the entire token system.
-         * Most users should use `extend` instead.
-         */
-        tokens?: ThemeTokens;
-        /**
-         * Register custom themes (optional)
-         *
-         * Define CSS or JavaScript themes that can be loaded dynamically.
-         */
-        themes?: Record<string, ThemeDefinition>;
-    };
-    /** @internal Build configuration (internal use only) */
-    build?: BuildConfig;
-    /** @internal Runtime configuration (internal use only) */
-    runtime?: RuntimeConfig;
-    /** @internal Integration settings (internal use only) */
-    integration?: IntegrationConfig;
-    /** @internal Theme dependencies mapping (internal use only) */
-    dependencies?: Record<string, string[]>;
+    private applyGlobalCSSVars;
+    /**
+     * Clear all applied CSS variables
+     */
+    private clearAppliedVars;
+    /**
+     * Remove theme application
+     */
+    removeTheme(): void;
+    /**
+     * Update specific CSS variables without clearing all
+     */
+    updateCSSVars(vars: Record<string, string | number>): void;
 }
 /**
- * Helper function to define Atomix configuration with type safety
- *
- * @param config - Atomix configuration object
- * @returns The configuration object
+ * Get or create global theme applicator
  */
+declare function getThemeApplicator(): ThemeApplicator;
 /**
- * Helper function to define Atomix configuration with type safety
- *
- * Similar to Tailwind's defineConfig, provides autocomplete and type checking.
- *
- * @param config - Atomix configuration object
- * @returns The configuration object
- *
- * @example
- * ```typescript
- * import { defineConfig } from '@shohojdhara/atomix/config';
- *
- * export default defineConfig({
- *   theme: {
- *     extend: {
- *       colors: {
- *         primary: { main: '#7AFFD7' },
- *       },
- *     },
- *   },
- * });
- * ```
+ * Apply theme using global applicator
  */
-declare function defineConfig(config: AtomixConfig): AtomixConfig;
+declare function applyTheme(tokens: Partial<DesignTokens>): void;
 
 /**
- * Theme Configuration Types
+ * Theme Preview Component
  *
- * Type definitions for the theme configuration system
+ * React component for previewing themes in development
+ * Enhanced with interactive components, viewport controls, and dark mode toggle
  */
 
 /**
- * Loaded and validated theme configuration
+ * Theme preview props
  */
-interface LoadedThemeConfig {
-    /** Registered themes */
-    themes: Record<string, ThemeDefinition>;
-    /** Build configuration */
-    build: BuildConfig;
-    /** Runtime configuration */
-    runtime: RuntimeConfig;
-    /** Integration settings */
-    integration: IntegrationConfig;
-    /** Theme dependencies mapping */
-    dependencies: Record<string, string[]>;
-    /** Whether config was validated */
-    validated: boolean;
-    /** Validation errors (if any) */
-    errors?: string[];
-    /** Validation warnings (if any) */
-    warnings?: string[];
-    /** Internal tokens (for generator) */
-    __tokens?: any;
-    /** Internal extensions (for generator) */
-    __extend?: any;
+interface ThemePreviewProps {
+    /** Theme to preview */
+    theme: Theme;
+    /** Show theme details */
+    showDetails?: boolean;
+    /** Show color palette */
+    showPalette?: boolean;
+    /** Show typography */
+    showTypography?: boolean;
+    /** Show spacing */
+    showSpacing?: boolean;
+    /** Custom components to render */
+    children?: React__default.ReactNode;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
 }
-
 /**
- * Theme Registry
+ * Theme Preview Component
  *
- * Central registry for all themes with discovery and dependency management
+ * Renders a preview of a theme with sample components
  */
+declare const ThemePreview: React__default.FC<ThemePreviewProps>;
 
 /**
- * Registry entry
+ * Theme Inspector Component
+ *
+ * React component for inspecting and debugging themes
+ * Enhanced with search/filter and copy path functionality
  */
-interface RegistryEntry {
-    /** Theme ID */
-    id: string;
-    /** Theme definition from config */
-    definition: ThemeDefinition;
-    /** Resolved theme object (for JS themes) */
-    theme?: Theme;
-    /** Whether theme is loaded */
-    loaded: boolean;
-    /** Loading promise (if currently loading) */
-    loading?: Promise<Theme | void>;
-    /** Dependencies */
-    dependencies: string[];
-    /** Dependent themes (themes that depend on this one) */
-    dependents: string[];
-}
-/**
- * Theme Registry
- *
- * Manages theme registration, discovery, and dependency resolution
- */
-declare class ThemeRegistry {
-    private entries;
-    private config;
-    private initialized;
-    /**
-     * Initialize registry from config
-     */
-    initialize(config?: LoadedThemeConfig): Promise<void>;
-    /**
-     * Register a theme
-     */
-    register(themeId: string, definition: ThemeDefinition): void;
-    /**
-     * Get theme entry
-     */
-    get(themeId: string): RegistryEntry | undefined;
-    /**
-     * Check if theme exists
-     */
-    has(themeId: string): boolean;
-    /**
-     * Get all theme IDs
-     */
-    getAllIds(): string[];
-    /**
-     * Get all theme metadata
-     */
-    getAllMetadata(): ThemeMetadata[];
-    /**
-     * Get theme definition
-     */
-    getDefinition(themeId: string): ThemeDefinition | undefined;
-    /**
-     * Check if a theme is loaded
-     */
-    isThemeLoaded(themeId: string): boolean;
-    /**
-     * Mark a theme as loaded
-     */
-    markLoaded(themeId: string, theme?: Theme): void;
-    /**
-     * Get theme object (for JS themes)
-     */
-    getTheme(themeId: string): Theme | undefined;
-    /**
-     * Get dependencies for a theme
-     */
-    getDependencies(themeId: string): string[];
-    /**
-     * Get dependents for a theme (themes that depend on this one)
-     */
-    getDependents(themeId: string): string[];
-    /**
-     * Resolve all dependencies in correct order
-     */
-    resolveDependencyOrder(themeId: string): string[];
-    /**
-     * Resolve dependencies and build dependency graph
-     */
-    private resolveDependencies;
-    /**
-     * Validate all themes
-     */
-    validate(): {
-        valid: boolean;
-        errors: string[];
-    };
-    /**
-     * Clear registry
-     */
-    clear(): void;
-}
 
 /**
- * CSS File Utilities
- *
- * Save CSS to file system (Node.js only).
+ * Theme inspector props
  */
+interface ThemeInspectorProps {
+    /** Theme to inspect */
+    theme: Theme;
+    /** Show validation results */
+    showValidation?: boolean;
+    /** Show CSS variables */
+    showCSSVariables?: boolean;
+    /** Show theme structure */
+    showStructure?: boolean;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
 /**
- * Save CSS to file
- *
- * Writes CSS string to a file. Only works in Node.js environment.
- *
- * @param css - CSS string to save
- * @param filePath - Output file path
- * @throws Error if called in browser environment
+ * Theme Inspector Component
  *
- * @example
- * ```typescript
- * const css = ':root { --atomix-color-primary: #7AFFD7; }';
- * await saveCSSFile(css, './themes/custom.css');
- * ```
+ * Provides detailed inspection and debugging information for themes
  */
-declare function saveCSSFile(css: string, filePath: string): Promise<void>;
+declare const ThemeInspector: React__default.FC<ThemeInspectorProps>;
+
 /**
- * Save CSS to file (synchronous version)
- *
- * Synchronous version of saveCSSFile. Only works in Node.js environment.
+ * Theme Comparator Component
  *
- * @param css - CSS string to save
- * @param filePath - Output file path
- * @throws Error if called in browser environment
+ * React component for comparing two themes side-by-side
+ * Enhanced with search/filter and improved visual diff styling
  */
-declare function saveCSSFileSync(css: string, filePath: string): void;
 
 /**
- * CSS Injection Utilities
- *
- * Inject CSS into HTML head via <style> element.
+ * Theme comparator props
  */
+interface ThemeComparatorProps {
+    /** First theme to compare */
+    themeA: Theme;
+    /** Second theme to compare */
+    themeB: Theme;
+    /** Show only differences */
+    showOnlyDifferences?: boolean;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
 /**
- * Inject CSS into HTML head via <style> element
- *
- * Creates or updates a style element in the document head.
- * If an element with the same ID exists, it will be updated.
- *
- * @param css - CSS string to inject
- * @param id - Style element ID (default: 'atomix-theme')
- *
- * @example
- * ```typescript
- * const css = ':root { --atomix-color-primary: #7AFFD7; }';
- * injectCSS(css);
- *
- * // With custom ID
- * injectCSS(css, 'my-custom-theme');
- * ```
- */
-declare function injectCSS(css: string, id?: string): void;
-/**
- * Remove injected CSS from DOM
- *
- * Removes the style element with the given ID from the document head.
- *
- * @param id - Style element ID to remove (default: 'atomix-theme')
- *
- * @example
- * ```typescript
- * removeCSS(); // Removes default 'atomix-theme'
- * removeCSS('my-custom-theme'); // Removes custom ID
- * ```
- */
-declare function removeCSS(id?: string): void;
-/**
- * Check if CSS is already injected
- *
- * @param id - Style element ID to check (default: 'atomix-theme')
- * @returns True if style element exists
- */
-declare function isCSSInjected(id?: string): boolean;
-
-/**
- * Config Loader
- *
- * Load design tokens from atomix.config.ts and convert to flat token format.
- */
-
-/**
- * Load theme tokens from atomix.config.ts
- *
- * Loads atomix.config.ts and extracts theme tokens.
- * Config file is required - throws error if not found.
- *
- * @param configPath - Optional custom config path (default: 'atomix.config.ts')
- * @returns Partial DesignTokens from config
- * @throws Error if config file is not found or cannot be loaded
- *
- * @example
- * ```typescript
- * const tokens = await loadThemeFromConfig();
- * const css = createTheme(tokens);
- * injectTheme(css);
- * ```
- */
-declare function loadThemeFromConfig(configPath?: string): Promise<Partial<DesignTokens>>;
-/**
- * Load theme tokens from atomix.config.ts (synchronous version)
- *
- * Synchronous version that uses require() instead of dynamic import.
- * Only works in Node.js environment.
- * Config file is required - throws error if not found.
- *
- * @param configPath - Optional custom config path
- * @returns Partial DesignTokens from config
- * @throws Error if config file is not found or cannot be loaded
- */
-declare function loadThemeFromConfigSync(configPath?: string): Partial<DesignTokens>;
-
-/**
- * Theme Provider
+ * Theme Comparator Component
  *
- * React context provider for theme management
+ * Compares two themes and highlights differences
  */
+declare const ThemeComparator: React__default.FC<ThemeComparatorProps>;
 
 /**
- * ThemeProvider component
- *
- * Provides theme context to child components and manages theme state.
- *
- * **Config-First Approach**: If `defaultTheme` is not provided, loads from `atomix.config.ts`.
- * Config file is required when `defaultTheme` is not provided.
- *
- * @example
- * ```tsx
- * import { ThemeProvider } from '@shohojdhara/atomix/theme';
- *
- * // Loads from atomix.config.ts (config file required)
- * function App() {
- *   return (
- *     <ThemeProvider>
- *       <YourApp />
- *     </ThemeProvider>
- *   );
- * }
+ * Theme Live Editor Component
  *
- * // Provide explicit theme (bypasses config)
- * function App() {
- *   return (
- *     <ThemeProvider defaultTheme="dark">
- *       <YourApp />
- *     </ThemeProvider>
- *   );
- * }
- * ```
+ * React component for live editing themes in development
+ * Enhanced with undo/redo, keyboard shortcuts, resizable layout, and better color pickers
  */
-declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
 
 /**
- * useTheme Hook
- *
- * React hook for accessing theme context
+ * Live editor props
  */
-
+interface ThemeLiveEditorProps {
+    /** Initial theme */
+    initialTheme: Theme;
+    /** Callback when theme changes */
+    onChange?: (theme: Theme) => void;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
 /**
- * useTheme hook
- *
- * Access theme context and theme management functions
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { theme, setTheme, availableThemes } = useTheme();
+ * Theme Live Editor Component
  *
- *   return (
- *     <div>
- *       <p>Current theme: {theme}</p>
- *       <button onClick={() => setTheme('dark-theme')}>
- *         Switch to Dark
- *       </button>
- *     </div>
- *   );
- * }
- * ```
- */
-declare function useTheme(): UseThemeReturn;
-
-/**
- * Theme context with default values
+ * Allows live editing of theme properties with instant preview
  */
-declare const ThemeContext: React$1.Context<ThemeContextValue | null>;
+declare const ThemeLiveEditor: React__default.FC<ThemeLiveEditorProps>;
 
 /**
- * Theme Error Boundary
+ * Theme Validator
  *
- * React error boundary for catching and handling theme-related errors.
- * Prevents the entire app from crashing when theme errors occur.
+ * Runtime theme validation including color contrast and accessibility checks
  */
 
 /**
- * Error boundary state
- */
-interface ThemeErrorBoundaryState {
-    /** Whether an error has occurred */
-    hasError: boolean;
-    /** The error that occurred */
-    error: Error | null;
-    /** Error information */
-    errorInfo: ErrorInfo | null;
-}
-/**
- * Error boundary props
+ * Validation result
  */
-interface ThemeErrorBoundaryProps {
-    /** Child components */
-    children: ReactNode;
-    /** Fallback UI to render when error occurs */
-    fallback?: (error: Error, errorInfo: ErrorInfo) => ReactNode;
-    /** Callback when error occurs */
-    onError?: (error: Error, errorInfo: ErrorInfo) => void;
-    /** Whether to reset error on children change */
-    resetOnPropsChange?: boolean;
-    /** Custom error message */
-    errorMessage?: string;
+interface ValidationResult {
+    /** Whether theme is valid */
+    valid: boolean;
+    /** Validation errors */
+    errors: string[];
+    /** Validation warnings */
+    warnings: string[];
+    /** Accessibility issues */
+    a11yIssues: A11yIssue[];
 }
 /**
- * Theme Error Boundary Component
- *
- * Catches errors in the theme system and displays a fallback UI
- * instead of crashing the entire application.
+ * Accessibility issue
  */
-declare class ThemeErrorBoundary extends Component<ThemeErrorBoundaryProps, ThemeErrorBoundaryState> {
-    private logger;
-    constructor(props: ThemeErrorBoundaryProps);
-    static getDerivedStateFromError(error: Error): Partial<ThemeErrorBoundaryState>;
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void;
-    render(): ReactNode;
+interface A11yIssue {
+    /** Issue type */
+    type: 'contrast' | 'color' | 'missing';
+    /** Severity */
+    severity: 'error' | 'warning';
+    /** Issue message */
+    message: string;
+    /** Affected property */
+    property?: string;
+    /** Current value */
+    value?: string;
+    /** Recommended value */
+    recommended?: string;
 }
-
-/**
- * Theme Applicator
- *
- * Applies theme configurations to the DOM, including CSS variables,
- * component overrides, typography, spacing, and color palettes.
- *
- * Uses the unified theme system for CSS generation and injection.
- */
-
 /**
- * Theme applicator class for runtime theme application
+ * Theme Validator
  *
- * Uses the unified theme system for efficient CSS variable generation and injection.
+ * Validates themes for correctness and accessibility
  */
-declare class ThemeApplicator {
-    private root;
-    private styleId;
-    constructor(root?: HTMLElement);
+declare class ThemeValidator {
     /**
-     * Apply a complete theme configuration
-     *
-     * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
-     * Automatically respects atomix.config.ts when using DesignTokens.
+     * Validate theme
      */
-    applyTheme(theme: Theme | DesignTokens): void;
+    validate(theme: Theme, metadata?: ThemeMetadata): ValidationResult;
     /**
-     * Apply DesignTokens using unified theme system
-     *
-     * Uses createTheme() which automatically loads from atomix.config.ts
-     * if no tokens are provided, ensuring config is always respected.
+     * Validate palette
+     */
+    private validatePalette;
+    /**
+     * Validate typography
      */
-    private applyDesignTokens;
+    private validateTypography;
     /**
-     * Check if object is DesignTokens
+     * Validate spacing
      */
-    private isDesignTokens;
+    private validateSpacing;
     /**
-     * Apply global CSS variables (for component overrides)
+     * Validate breakpoints
      */
-    private applyGlobalCSSVars;
+    private validateBreakpoints;
     /**
-     * Apply component-level overrides
+     * Check color contrast ratio
      */
-    private applyComponentOverrides;
+    private checkContrast;
     /**
-     * Apply override for a specific component
+     * Check if color is valid
      */
-    private applyComponentOverride;
+    private isValidColor;
     /**
-     * Clear all applied CSS variables
+     * Validate transitions
      */
-    private clearAppliedVars;
+    private validateTransitions;
     /**
-     * Remove theme application
+     * Validate z-index
      */
-    removeTheme(): void;
+    private validateZIndex;
     /**
-     * Update specific CSS variables without clearing all
+     * Validate border radius
      */
-    updateCSSVars(vars: Record<string, string | number>): void;
+    private validateBorderRadius;
+    /**
+     * Validate custom properties
+     */
+    private validateCustom;
 }
+
 /**
- * Get or create global theme applicator
- */
-declare function getThemeApplicator(): ThemeApplicator;
-/**
- * Apply theme using global applicator
- */
-declare function applyTheme(theme: Theme): void;
-
-/**
- * Theme Preview Component
- *
- * React component for previewing themes in development
- * Enhanced with interactive components, viewport controls, and dark mode toggle
- */
-
-/**
- * Theme preview props
- */
-interface ThemePreviewProps {
-    /** Theme to preview */
-    theme: Theme;
-    /** Show theme details */
-    showDetails?: boolean;
-    /** Show color palette */
-    showPalette?: boolean;
-    /** Show typography */
-    showTypography?: boolean;
-    /** Show spacing */
-    showSpacing?: boolean;
-    /** Custom components to render */
-    children?: React__default.ReactNode;
-    /** CSS class name */
-    className?: string;
-    /** Inline styles */
-    style?: React__default.CSSProperties;
-}
-/**
- * Theme Preview Component
- *
- * Renders a preview of a theme with sample components
- */
-declare const ThemePreview: React__default.FC<ThemePreviewProps>;
-
-/**
- * Theme Inspector Component
- *
- * React component for inspecting and debugging themes
- * Enhanced with search/filter and copy path functionality
- */
-
-/**
- * Theme inspector props
- */
-interface ThemeInspectorProps {
-    /** Theme to inspect */
-    theme: Theme;
-    /** Show validation results */
-    showValidation?: boolean;
-    /** Show CSS variables */
-    showCSSVariables?: boolean;
-    /** Show theme structure */
-    showStructure?: boolean;
-    /** CSS class name */
-    className?: string;
-    /** Inline styles */
-    style?: React__default.CSSProperties;
-}
-/**
- * Theme Inspector Component
- *
- * Provides detailed inspection and debugging information for themes
- */
-declare const ThemeInspector: React__default.FC<ThemeInspectorProps>;
-
-/**
- * Theme Comparator Component
- *
- * React component for comparing two themes side-by-side
- * Enhanced with search/filter and improved visual diff styling
- */
-
-/**
- * Theme comparator props
- */
-interface ThemeComparatorProps {
-    /** First theme to compare */
-    themeA: Theme;
-    /** Second theme to compare */
-    themeB: Theme;
-    /** Show only differences */
-    showOnlyDifferences?: boolean;
-    /** CSS class name */
-    className?: string;
-    /** Inline styles */
-    style?: React__default.CSSProperties;
-}
-/**
- * Theme Comparator Component
- *
- * Compares two themes and highlights differences
- */
-declare const ThemeComparator: React__default.FC<ThemeComparatorProps>;
-
-/**
- * Theme Live Editor Component
- *
- * React component for live editing themes in development
- * Enhanced with undo/redo, keyboard shortcuts, resizable layout, and better color pickers
- */
-
-/**
- * Live editor props
- */
-interface ThemeLiveEditorProps {
-    /** Initial theme */
-    initialTheme: Theme;
-    /** Callback when theme changes */
-    onChange?: (theme: Theme) => void;
-    /** CSS class name */
-    className?: string;
-    /** Inline styles */
-    style?: React__default.CSSProperties;
-}
-/**
- * Theme Live Editor Component
- *
- * Allows live editing of theme properties with instant preview
- */
-declare const ThemeLiveEditor: React__default.FC<ThemeLiveEditorProps>;
-
-/**
- * Theme Validator
- *
- * Runtime theme validation including color contrast and accessibility checks
- */
-
-/**
- * Validation result
- */
-interface ValidationResult {
-    /** Whether theme is valid */
-    valid: boolean;
-    /** Validation errors */
-    errors: string[];
-    /** Validation warnings */
-    warnings: string[];
-    /** Accessibility issues */
-    a11yIssues: A11yIssue[];
-}
-/**
- * Accessibility issue
- */
-interface A11yIssue {
-    /** Issue type */
-    type: 'contrast' | 'color' | 'missing';
-    /** Severity */
-    severity: 'error' | 'warning';
-    /** Issue message */
-    message: string;
-    /** Affected property */
-    property?: string;
-    /** Current value */
-    value?: string;
-    /** Recommended value */
-    recommended?: string;
-}
-/**
- * Theme Validator
- *
- * Validates themes for correctness and accessibility
- */
-declare class ThemeValidator {
-    /**
-     * Validate theme
-     */
-    validate(theme: Theme, metadata?: ThemeMetadata): ValidationResult;
-    /**
-     * Validate palette
-     */
-    private validatePalette;
-    /**
-     * Validate typography
-     */
-    private validateTypography;
-    /**
-     * Validate spacing
-     */
-    private validateSpacing;
-    /**
-     * Validate breakpoints
-     */
-    private validateBreakpoints;
-    /**
-     * Check color contrast ratio
-     */
-    private checkContrast;
-    /**
-     * Check if color is valid
-     */
-    private isValidColor;
-    /**
-     * Validate transitions
-     */
-    private validateTransitions;
-    /**
-     * Validate z-index
-     */
-    private validateZIndex;
-    /**
-     * Validate border radius
-     */
-    private validateBorderRadius;
-    /**
-     * Validate custom properties
-     */
-    private validateCustom;
-}
-
-/**
- * useHistory Hook
- *
- * React hook for managing undo/redo history
+ * useHistory Hook
+ *
+ * React hook for managing undo/redo history
  */
 interface UseHistoryOptions {
     /** Maximum number of history entries (default: 50) */
@@ -14277,22 +14081,6 @@ declare function useHistory<T>(options?: UseHistoryOptions): UseHistoryReturn<T>
  * Converts between Theme objects and DesignTokens.
  */
 
-/**
- * Convert Theme object to DesignTokens
- *
- * Extracts values from a Theme object and converts them to flat DesignTokens format.
- *
- * @param theme - Theme object to convert
- * @returns Partial DesignTokens object
- *
- * @example
- * ```typescript
- * const theme = createTheme({ palette: { primary: { main: '#7c3aed' } } });
- * const tokens = themeToDesignTokens(theme);
- * // Returns: { 'primary': '#7c3aed', ... }
- * ```
- */
-declare function themeToDesignTokens(theme: Theme): Partial<DesignTokens>;
 /**
  * Convert DesignTokens to Theme-compatible CSS variables
  *
@@ -14300,22 +14088,6 @@ declare function themeToDesignTokens(theme: Theme): Partial<DesignTokens>;
  * @returns CSS variables object compatible with Theme.cssVars
  */
 declare function designTokensToCSSVars(tokens: Partial<DesignTokens>): Record<string, string>;
-/**
- * Create DesignTokens from Theme with defaults
- *
- * Converts a Theme to DesignTokens and merges with default tokens.
- *
- * @param theme - Theme object to convert
- * @returns Complete DesignTokens object
- */
-declare function createDesignTokensFromTheme(theme: Theme): DesignTokens;
-/**
- * Create a minimal Theme object from DesignTokens
- *
- * @param tokens - DesignTokens to convert
- * @returns Minimal Theme object with cssVars populated
- */
-declare function designTokensToTheme(tokens: Partial<DesignTokens>): Partial<Theme>;
 
 /**
  * CSS Variable Mapper
@@ -14349,25 +14121,6 @@ interface CSSVariableNamingOptions {
     /** Whether to include component name in variable (default: true) */
     includeComponent?: boolean;
 }
-/**
- * Generate CSS variable name from parts
- *
- * @example
- * generateCSSVariableName('button', 'bg', { prefix: 'atomix' })
- * // Returns: '--atomix-button-bg'
- */
-declare function generateCSSVariableName(component: string, property: string, options?: CSSVariableNamingOptions): string;
-/**
- * Generate CSS variables object from configuration
- *
- * @example
- * const vars = generateComponentCSSVars({
- *   component: 'button',
- *   properties: { bg: '#000', color: '#fff' }
- * })
- * // Returns: { '--atomix-button-bg': '#000', '--atomix-button-color': '#fff' }
- */
-declare function generateComponentCSSVars(config: CSSVariableConfig, options?: CSSVariableNamingOptions): Record<string, string>;
 /**
  * Map SCSS tokens to CSS custom properties
  *
@@ -14380,8 +14133,8 @@ declare function mapSCSSTokensToCSSVars(tokens: Record<string, any>, options?: C
 /**
  * Apply CSS variables to an element
  *
- * @param element - Target element (defaults to document.documentElement)
  * @param vars - CSS variables to apply
+ * @param element - Target element (defaults to document.documentElement)
  */
 declare function applyCSSVariables(vars: Record<string, string | number>, element?: HTMLElement): void;
 /**
@@ -14429,27 +14182,9 @@ declare function extractComponentName(varName: string, prefix?: string): string
 /**
  * Theme Helper Functions
  *
- * Utility functions for working with themes and DesignTokens
+ * Utility functions for working with DesignTokens
  */
 
-/**
- * Get DesignTokens from current theme
- *
- * Converts a Theme object to DesignTokens. Useful when you need to
- * work with DesignTokens but have a Theme object.
- *
- * @param theme - Theme object to convert
- * @returns DesignTokens object
- *
- * @example
- * ```typescript
- * // If you have a Theme object, convert it to DesignTokens
- * const tokens = getDesignTokensFromTheme(theme);
- * // Now you can use tokens with unified theme system
- * const css = createTheme(tokens);
- * ```
- */
-declare function getDesignTokensFromTheme(theme: Theme | null): DesignTokens | null;
 /**
  * Check if a value is DesignTokens
  *
@@ -14459,18 +14194,9 @@ declare function getDesignTokensFromTheme(theme: Theme | null): DesignTokens | n
  * @returns True if value is DesignTokens
  */
 declare function isDesignTokens(value: unknown): value is DesignTokens;
+
 /**
- * Check if a value is a Theme object
- *
- * Type guard to check if an object is a Theme.
- *
- * @param value - Value to check
- * @returns True if value is Theme
- */
-declare function isThemeObject(value: unknown): value is Theme;
-
-/**
- * RTL (Right-to-Left) Support Utilities
+ * RTL (Right-to-Left) Support Utilities
  *
  * Provides utilities for managing RTL text direction in themes
  */
@@ -14571,13 +14297,13 @@ declare class RTLManager {
 /**
  * Theme System Exports
  *
- * Unified theme system - handles both DesignTokens and Theme objects.
+ * Simplified theme system using DesignTokens only.
  *
  * @example
  * ```typescript
  * import { createTheme, injectTheme } from '@shohojdhara/atomix/theme';
  *
- * // Using DesignTokens (recommended - flat structure)
+ * // Using DesignTokens
  * const css = createTheme({ 'primary': '#7AFFD7', 'spacing-4': '1rem' });
  * injectTheme(css);
  *
@@ -14604,9 +14330,11 @@ declare function saveTheme(css: string, filePath: string): Promise<void>;
 type themeImport_A11yIssue = A11yIssue;
 type themeImport_CSSVariableConfig = CSSVariableConfig;
 type themeImport_CSSVariableNamingOptions = CSSVariableNamingOptions;
+type themeImport_ComponentThemeOptions = ComponentThemeOptions;
 type themeImport_ComponentThemeOverride = ComponentThemeOverride;
 type themeImport_DesignTokens = DesignTokens;
 type themeImport_GenerateCSSVariablesOptions = GenerateCSSVariablesOptions;
+type themeImport_NamingOptions = NamingOptions;
 type themeImport_RTLConfig = RTLConfig;
 type themeImport_RTLManager = RTLManager;
 declare const themeImport_RTLManager: typeof RTLManager;
@@ -14627,13 +14355,10 @@ type themeImport_ThemeInspectorProps = ThemeInspectorProps;
 declare const themeImport_ThemeLiveEditor: typeof ThemeLiveEditor;
 type themeImport_ThemeLiveEditorProps = ThemeLiveEditorProps;
 type themeImport_ThemeLoadOptions = ThemeLoadOptions;
-type themeImport_ThemeMetadata = ThemeMetadata;
 declare const themeImport_ThemePreview: typeof ThemePreview;
 type themeImport_ThemePreviewProps = ThemePreviewProps;
 declare const themeImport_ThemeProvider: typeof ThemeProvider;
 type themeImport_ThemeProviderProps = ThemeProviderProps;
-type themeImport_ThemeRegistry = ThemeRegistry;
-declare const themeImport_ThemeRegistry: typeof ThemeRegistry;
 type themeImport_ThemeValidationResult = ThemeValidationResult;
 type themeImport_ThemeValidator = ThemeValidator;
 declare const themeImport_ThemeValidator: typeof ThemeValidator;
@@ -14642,48 +14367,57 @@ type themeImport_UseHistoryReturn<T> = UseHistoryReturn<T>;
 type themeImport_UseThemeReturn = UseThemeReturn;
 type themeImport_ValidationResult = ValidationResult;
 declare const themeImport_applyCSSVariables: typeof applyCSSVariables;
+declare const themeImport_applyComponentTheme: typeof applyComponentTheme;
 declare const themeImport_applyTheme: typeof applyTheme;
-declare const themeImport_createDesignTokensFromTheme: typeof createDesignTokensFromTheme;
+declare const themeImport_camelToKebab: typeof camelToKebab;
+declare const themeImport_clearThemes: typeof clearThemes;
 declare const themeImport_createTheme: typeof createTheme;
-declare const themeImport_createThemeObject: typeof createThemeObject;
+declare const themeImport_createThemeRegistry: typeof createThemeRegistry;
 declare const themeImport_createTokens: typeof createTokens;
 declare const themeImport_cssVarsToStyle: typeof cssVarsToStyle;
 declare const themeImport_deepMerge: typeof deepMerge;
 declare const themeImport_defaultTokens: typeof defaultTokens;
 declare const themeImport_designTokensToCSSVars: typeof designTokensToCSSVars;
-declare const themeImport_designTokensToTheme: typeof designTokensToTheme;
 declare const themeImport_extendTheme: typeof extendTheme;
 declare const themeImport_extractComponentName: typeof extractComponentName;
 declare const themeImport_generateCSSVariableName: typeof generateCSSVariableName;
 declare const themeImport_generateCSSVariables: typeof generateCSSVariables;
 declare const themeImport_generateCSSVariablesForSelector: typeof generateCSSVariablesForSelector;
+declare const themeImport_generateClassName: typeof generateClassName;
 declare const themeImport_generateComponentCSSVars: typeof generateComponentCSSVars;
+declare const themeImport_getAllThemes: typeof getAllThemes;
 declare const themeImport_getCSSVariable: typeof getCSSVariable;
-declare const themeImport_getDesignTokensFromTheme: typeof getDesignTokensFromTheme;
+declare const themeImport_getComponentThemeValue: typeof getComponentThemeValue;
+declare const themeImport_getTheme: typeof getTheme;
 declare const themeImport_getThemeApplicator: typeof getThemeApplicator;
+declare const themeImport_getThemeCount: typeof getThemeCount;
+declare const themeImport_getThemeIds: typeof getThemeIds;
+declare const themeImport_hasTheme: typeof hasTheme;
 declare const themeImport_injectCSS: typeof injectCSS;
 declare const themeImport_injectTheme: typeof injectTheme;
 declare const themeImport_isCSSInjected: typeof isCSSInjected;
 declare const themeImport_isDesignTokens: typeof isDesignTokens;
-declare const themeImport_isThemeObject: typeof isThemeObject;
 declare const themeImport_isValidCSSVariableName: typeof isValidCSSVariableName;
 declare const themeImport_loadThemeFromConfig: typeof loadThemeFromConfig;
 declare const themeImport_loadThemeFromConfigSync: typeof loadThemeFromConfigSync;
 declare const themeImport_mapSCSSTokensToCSSVars: typeof mapSCSSTokensToCSSVars;
 declare const themeImport_mergeCSSVars: typeof mergeCSSVars;
 declare const themeImport_mergeTheme: typeof mergeTheme;
+declare const themeImport_normalizeThemeTokens: typeof normalizeThemeTokens;
+declare const themeImport_registerTheme: typeof registerTheme;
 declare const themeImport_removeCSS: typeof removeCSS;
 declare const themeImport_removeCSSVariables: typeof removeCSSVariables;
 declare const themeImport_removeTheme: typeof removeTheme;
-declare const themeImport_saveCSSFile: typeof saveCSSFile;
-declare const themeImport_saveCSSFileSync: typeof saveCSSFileSync;
 declare const themeImport_saveTheme: typeof saveTheme;
-declare const themeImport_themeToDesignTokens: typeof themeToDesignTokens;
+declare const themeImport_themePropertyToCSSVar: typeof themePropertyToCSSVar;
+declare const themeImport_unregisterTheme: typeof unregisterTheme;
+declare const themeImport_useComponentTheme: typeof useComponentTheme;
 declare const themeImport_useHistory: typeof useHistory;
 declare const themeImport_useTheme: typeof useTheme;
+declare const themeImport_useThemeTokens: typeof useThemeTokens;
 declare namespace themeImport {
-  export { themeImport_RTLManager as RTLManager, themeImport_ThemeApplicator as ThemeApplicator, themeImport_ThemeComparator as ThemeComparator, themeImport_ThemeContext as ThemeContext, themeImport_ThemeErrorBoundary as ThemeErrorBoundary, themeImport_ThemeInspector as ThemeInspector, themeImport_ThemeLiveEditor as ThemeLiveEditor, themeImport_ThemePreview as ThemePreview, themeImport_ThemeProvider as ThemeProvider, themeImport_ThemeRegistry as ThemeRegistry, themeImport_ThemeValidator as ThemeValidator, themeImport_applyCSSVariables as applyCSSVariables, themeImport_applyTheme as applyTheme, themeImport_createDesignTokensFromTheme as createDesignTokensFromTheme, themeImport_createTheme as createTheme, themeImport_createThemeObject as createThemeObject, themeImport_createTokens as createTokens, themeImport_cssVarsToStyle as cssVarsToStyle, themeImport_deepMerge as deepMerge, themeImport_defaultTokens as defaultTokens, themeImport_designTokensToCSSVars as designTokensToCSSVars, themeImport_designTokensToTheme as designTokensToTheme, themeImport_extendTheme as extendTheme, themeImport_extractComponentName as extractComponentName, themeImport_generateCSSVariableName as generateCSSVariableName, themeImport_generateCSSVariables as generateCSSVariables, themeImport_generateCSSVariablesForSelector as generateCSSVariablesForSelector, themeImport_generateComponentCSSVars as generateComponentCSSVars, themeImport_getCSSVariable as getCSSVariable, themeImport_getDesignTokensFromTheme as getDesignTokensFromTheme, themeImport_getThemeApplicator as getThemeApplicator, themeImport_injectCSS as injectCSS, themeImport_injectTheme as injectTheme, themeImport_isCSSInjected as isCSSInjected, themeImport_isDesignTokens as isDesignTokens, themeImport_isThemeObject as isThemeObject, themeImport_isValidCSSVariableName as isValidCSSVariableName, themeImport_loadThemeFromConfig as loadThemeFromConfig, themeImport_loadThemeFromConfigSync as loadThemeFromConfigSync, themeImport_mapSCSSTokensToCSSVars as mapSCSSTokensToCSSVars, themeImport_mergeCSSVars as mergeCSSVars, themeImport_mergeTheme as mergeTheme, themeImport_removeCSS as removeCSS, themeImport_removeCSSVariables as removeCSSVariables, themeImport_removeTheme as removeTheme, themeImport_saveCSSFile as saveCSSFile, themeImport_saveCSSFileSync as saveCSSFileSync, themeImport_saveTheme as saveTheme, themeImport_themeToDesignTokens as themeToDesignTokens, themeImport_useHistory as useHistory, themeImport_useTheme as useTheme };
-  export type { themeImport_A11yIssue as A11yIssue, themeImport_CSSVariableConfig as CSSVariableConfig, themeImport_CSSVariableNamingOptions as CSSVariableNamingOptions, themeImport_ComponentThemeOverride as ComponentThemeOverride, themeImport_DesignTokens as DesignTokens, themeImport_GenerateCSSVariablesOptions as GenerateCSSVariablesOptions, themeImport_RTLConfig as RTLConfig, themeImport_Theme as Theme, themeImport_ThemeChangeEvent as ThemeChangeEvent, themeImport_ThemeComparatorProps as ThemeComparatorProps, themeImport_ThemeComponentOverrides as ThemeComponentOverrides, themeImport_ThemeContextValue as ThemeContextValue, themeImport_ThemeErrorBoundaryProps as ThemeErrorBoundaryProps, themeImport_ThemeInspectorProps as ThemeInspectorProps, themeImport_ThemeLiveEditorProps as ThemeLiveEditorProps, themeImport_ThemeLoadOptions as ThemeLoadOptions, themeImport_ThemeMetadata as ThemeMetadata, themeImport_ThemePreviewProps as ThemePreviewProps, themeImport_ThemeProviderProps as ThemeProviderProps, themeImport_ThemeValidationResult as ThemeValidationResult, themeImport_UseHistoryOptions as UseHistoryOptions, themeImport_UseHistoryReturn as UseHistoryReturn, themeImport_UseThemeReturn as UseThemeReturn, themeImport_ValidationResult as ValidationResult };
+  export { themeImport_RTLManager as RTLManager, themeImport_ThemeApplicator as ThemeApplicator, themeImport_ThemeComparator as ThemeComparator, themeImport_ThemeContext as ThemeContext, themeImport_ThemeErrorBoundary as ThemeErrorBoundary, themeImport_ThemeInspector as ThemeInspector, themeImport_ThemeLiveEditor as ThemeLiveEditor, themeImport_ThemePreview as ThemePreview, themeImport_ThemeProvider as ThemeProvider, themeImport_ThemeValidator as ThemeValidator, themeImport_applyCSSVariables as applyCSSVariables, themeImport_applyComponentTheme as applyComponentTheme, themeImport_applyTheme as applyTheme, themeImport_camelToKebab as camelToKebab, themeImport_clearThemes as clearThemes, themeImport_createTheme as createTheme, themeImport_createThemeRegistry as createThemeRegistry, themeImport_createTokens as createTokens, themeImport_cssVarsToStyle as cssVarsToStyle, themeImport_deepMerge as deepMerge, themeImport_defaultTokens as defaultTokens, themeImport_designTokensToCSSVars as designTokensToCSSVars, themeImport_extendTheme as extendTheme, themeImport_extractComponentName as extractComponentName, themeImport_generateCSSVariableName as generateCSSVariableName, themeImport_generateCSSVariables as generateCSSVariables, themeImport_generateCSSVariablesForSelector as generateCSSVariablesForSelector, themeImport_generateClassName as generateClassName, themeImport_generateComponentCSSVars as generateComponentCSSVars, themeImport_getAllThemes as getAllThemes, themeImport_getCSSVariable as getCSSVariable, themeImport_getComponentThemeValue as getComponentThemeValue, themeImport_getTheme as getTheme, themeImport_getThemeApplicator as getThemeApplicator, themeImport_getThemeCount as getThemeCount, themeImport_getThemeIds as getThemeIds, themeImport_hasTheme as hasTheme, themeImport_injectCSS as injectCSS, themeImport_injectTheme as injectTheme, themeImport_isCSSInjected as isCSSInjected, themeImport_isDesignTokens as isDesignTokens, themeImport_isValidCSSVariableName as isValidCSSVariableName, themeImport_loadThemeFromConfig as loadThemeFromConfig, themeImport_loadThemeFromConfigSync as loadThemeFromConfigSync, themeImport_mapSCSSTokensToCSSVars as mapSCSSTokensToCSSVars, themeImport_mergeCSSVars as mergeCSSVars, themeImport_mergeTheme as mergeTheme, themeImport_normalizeThemeTokens as normalizeThemeTokens, themeImport_registerTheme as registerTheme, themeImport_removeCSS as removeCSS, themeImport_removeCSSVariables as removeCSSVariables, themeImport_removeTheme as removeTheme, themeImport_saveTheme as saveTheme, themeImport_themePropertyToCSSVar as themePropertyToCSSVar, themeImport_unregisterTheme as unregisterTheme, themeImport_useComponentTheme as useComponentTheme, themeImport_useHistory as useHistory, themeImport_useTheme as useTheme, themeImport_useThemeTokens as useThemeTokens };
+  export type { themeImport_A11yIssue as A11yIssue, themeImport_CSSVariableConfig as CSSVariableConfig, themeImport_CSSVariableNamingOptions as CSSVariableNamingOptions, themeImport_ComponentThemeOptions as ComponentThemeOptions, themeImport_ComponentThemeOverride as ComponentThemeOverride, themeImport_DesignTokens as DesignTokens, themeImport_GenerateCSSVariablesOptions as GenerateCSSVariablesOptions, themeImport_NamingOptions as NamingOptions, themeImport_RTLConfig as RTLConfig, themeImport_Theme as Theme, themeImport_ThemeChangeEvent as ThemeChangeEvent, themeImport_ThemeComparatorProps as ThemeComparatorProps, themeImport_ThemeComponentOverrides as ThemeComponentOverrides, themeImport_ThemeContextValue as ThemeContextValue, themeImport_ThemeErrorBoundaryProps as ThemeErrorBoundaryProps, themeImport_ThemeInspectorProps as ThemeInspectorProps, themeImport_ThemeLiveEditorProps as ThemeLiveEditorProps, themeImport_ThemeLoadOptions as ThemeLoadOptions, themeImport_ThemePreviewProps as ThemePreviewProps, themeImport_ThemeProviderProps as ThemeProviderProps, themeImport_ThemeValidationResult as ThemeValidationResult, themeImport_UseHistoryOptions as UseHistoryOptions, themeImport_UseHistoryReturn as UseHistoryReturn, themeImport_UseThemeReturn as UseThemeReturn, themeImport_ValidationResult as ValidationResult };
 }
 
 /**
@@ -14756,6 +14490,301 @@ declare function useMergedProps<T extends Record<string, any>>(defaultProps: T,
  */
 declare function applyCSSVarsToStyle(cssVars: Record<string, string | number>, baseStyle?: React.CSSProperties): React.CSSProperties;
 
+/**
+ * Atomix Config Loader
+ *
+ * Helper functions to load atomix.config.ts from external projects.
+ * Similar to how Tailwind loads tailwind.config.js
+ */
+
+/**
+ * Load Atomix configuration from project root
+ *
+ * Attempts to load atomix.config.ts from the current working directory.
+ * Falls back to default config if file doesn't exist.
+ *
+ * @param options - Loader options
+ * @returns Loaded configuration or default
+ *
+ * @example
+ * ```typescript
+ * import { loadAtomixConfig } from '@shohojdhara/atomix/config';
+ * import { createTheme } from '@shohojdhara/atomix/theme';
+ *
+ * const config = loadAtomixConfig();
+ * const theme = createTheme(config.theme?.tokens || {});
+ * ```
+ */
+declare function loadAtomixConfig(options?: {
+    /** Custom config path (default: 'atomix.config.ts') */
+    configPath?: string;
+    /** Whether to throw error if config not found (default: false) */
+    required?: boolean;
+}): AtomixConfig;
+/**
+ * Resolve config path
+ *
+ * Finds atomix.config.ts in the project, checking common locations.
+ * Returns null in browser environments where file system access is not available.
+ *
+ * This function is designed to work in Node.js environments only.
+ * In browser builds, it will always return null without attempting to access Node.js modules.
+ *
+ * @internal This function uses Node.js modules and should not be called in browser environments.
+ */
+declare function resolveConfigPath(): string | null;
+
+/**
+ * Atomix Configuration System
+ *
+ * Tailwind-like configuration for customizing the Atomix Design System.
+ *
+ * External developers can create `atomix.config.ts` in their project root
+ * to customize design tokens, similar to Tailwind's tailwind.config.js
+ *
+ * @example
+ * ```typescript
+ * // atomix.config.ts (in your project)
+ * import { defineConfig } from '@shohojdhara/atomix/config';
+ *
+ * export default defineConfig({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         primary: { main: '#7AFFD7' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * Color Scale (1-10)
+ */
+interface ColorScale {
+    1?: string;
+    2?: string;
+    3?: string;
+    4?: string;
+    5?: string;
+    6?: string;
+    7?: string;
+    8?: string;
+    9?: string;
+    10?: string;
+    [key: string]: string | undefined;
+}
+/**
+ * Palette Color Options
+ */
+interface PaletteColorOptions {
+    main: string;
+    light?: string;
+    dark?: string;
+    contrastText?: string;
+}
+/**
+ * Design Tokens Schema (Tailwind-like)
+ */
+interface ThemeTokens {
+    /** Color palette */
+    colors?: Record<string, string | PaletteColorOptions | ColorScale | Record<string, string>>;
+    /** Spacing scale */
+    spacing?: Record<string, string>;
+    /** Border radius scale */
+    borderRadius?: Record<string, string>;
+    /** Typography scale and settings */
+    typography?: {
+        fontFamilies?: Record<string, string>;
+        fontSizes?: Record<string, string>;
+        fontWeights?: Record<string, string | number>;
+        lineHeights?: Record<string, string | number>;
+        letterSpacings?: Record<string, string>;
+    };
+    /** Shadow scale */
+    shadows?: Record<string, string>;
+    /** Z-index scale */
+    zIndex?: Record<string, string | number>;
+    /** Breakpoints scale */
+    breakpoints?: Record<string, string | number>;
+    /** Transitions settings */
+    transitions?: {
+        durations?: Record<string, string>;
+        easings?: Record<string, string>;
+    };
+}
+/**
+ * CSS Theme Definition
+ */
+interface CSSThemeDefinition {
+    type: 'css';
+    name: string;
+    class?: string;
+    description?: string;
+    author?: string;
+    version?: string;
+    tags?: string[];
+    supportsDarkMode?: boolean;
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    a11y?: {
+        contrastTarget?: number;
+        modes?: string[];
+    };
+    color?: string;
+    features?: string[];
+    dependencies?: string[];
+    cssPath?: string;
+}
+/**
+ * JavaScript Theme Definition
+ */
+interface JSThemeDefinition {
+    type: 'js';
+    name: string;
+    class?: string;
+    description?: string;
+    author?: string;
+    version?: string;
+    tags?: string[];
+    supportsDarkMode?: boolean;
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    a11y?: {
+        contrastTarget?: number;
+        modes?: string[];
+    };
+    color?: string;
+    features?: string[];
+    dependencies?: string[];
+    createTheme: () => Theme;
+}
+/**
+ * Theme Definition (CSS or JS)
+ */
+type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
+/**
+ * Build configuration (migrated from theme.config.ts)
+ */
+interface BuildConfig {
+    output?: {
+        directory?: string;
+        formats?: {
+            expanded?: string;
+            compressed?: string;
+        };
+    };
+    sass?: {
+        style?: 'expanded' | 'compressed';
+        sourceMap?: boolean;
+        loadPaths?: string[];
+    };
+}
+/**
+ * Runtime configuration (migrated from theme.config.ts)
+ */
+interface RuntimeConfig {
+    basePath?: string;
+    cdnPath?: string | null;
+    preload?: string[];
+    lazy?: boolean;
+    defaultTheme?: string;
+    storageKey?: string;
+    dataAttribute?: string;
+    enablePersistence?: boolean;
+    useMinified?: boolean;
+}
+/**
+ * Integration settings (migrated from theme.config.ts)
+ */
+interface IntegrationConfig {
+    cssVariables?: Record<string, string>;
+    classNames?: {
+        theme?: string;
+        colorMode?: string;
+    };
+}
+/**
+ * Atomix Configuration Interface
+ *
+ * Tailwind-like configuration for external developers.
+ * Focus on theme customization - build/runtime configs are internal only.
+ */
+interface AtomixConfig {
+    /**
+     * CSS variable prefix (default: 'atomix')
+     *
+     * Change this to customize all CSS variable names.
+     * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
+     */
+    prefix?: string;
+    /**
+     * Theme customization (Tailwind-like)
+     *
+     * Use `extend` to add or override design tokens.
+     * Use `tokens` to completely replace the default token system (advanced).
+     */
+    theme?: {
+        /**
+         * Extend the default design tokens
+         *
+         * This is the recommended way to customize Atomix.
+         * Your values will override or extend the base tokens.
+         */
+        extend?: ThemeTokens;
+        /**
+         * Override the default tokens entirely (advanced)
+         *
+         * Use with caution - this replaces the entire token system.
+         * Most users should use `extend` instead.
+         */
+        tokens?: ThemeTokens;
+        /**
+         * Register custom themes (optional)
+         *
+         * Define CSS or JavaScript themes that can be loaded dynamically.
+         */
+        themes?: Record<string, ThemeDefinition>;
+    };
+    /** @internal Build configuration (internal use only) */
+    build?: BuildConfig;
+    /** @internal Runtime configuration (internal use only) */
+    runtime?: RuntimeConfig;
+    /** @internal Integration settings (internal use only) */
+    integration?: IntegrationConfig;
+    /** @internal Theme dependencies mapping (internal use only) */
+    dependencies?: Record<string, string[]>;
+}
+/**
+ * Helper function to define Atomix configuration with type safety
+ *
+ * @param config - Atomix configuration object
+ * @returns The configuration object
+ */
+/**
+ * Helper function to define Atomix configuration with type safety
+ *
+ * Similar to Tailwind's defineConfig, provides autocomplete and type checking.
+ *
+ * @param config - Atomix configuration object
+ * @returns The configuration object
+ *
+ * @example
+ * ```typescript
+ * import { defineConfig } from '@shohojdhara/atomix/config';
+ *
+ * export default defineConfig({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         primary: { main: '#7AFFD7' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+declare function defineConfig(config: AtomixConfig): AtomixConfig;
+
 declare const composables: typeof __lib_composables;
 declare const utils: typeof __lib_utils;
 declare const types: typeof __lib_types;
@@ -15143,5 +15172,5 @@ declare const atomix: {
     VideoPlayer: React$1.ForwardRefExoticComponent<VideoPlayerProps & React$1.RefAttributes<HTMLVideoElement>>;
 };
 
-export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GLASS_CONTAINER, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeRegistry, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyPartStyles, applyTheme, composables, constants, createCSSVarStyle, createDebugAttrs, createDesignTokensFromTheme, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeObject, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, designTokensToTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getCSSVariable, getComponentCSSVars, getDesignTokensFromTheme, getPartStyles, getThemeApplicator, hasCustomization, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isThemeObject, isValidCSSVariableName, isYouTubeUrl, loadAtomixConfig, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, preloadFonts, removeCSS, removeCSSVariables, removeTheme, renderSlot, resolveConfigPath, saveCSSFile, saveCSSFileSync, saveTheme, sliderConstants, theme, themeToDesignTokens, types, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useButton, useCard, useChartData, useChartInteraction, useChartScale, useCheckbox, useComponentCustomization, useComponentDefaultProps, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useHistory, useInput, useLineChart, useMergedProps, useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useTodo, utils };
-export type { A11yIssue, AccordionParts, AccordionProps$1 as AccordionProps, AccordionState, AnimatedChartProps, AreaChartProps, AtomixConfig, AtomixGlassProps, AtomixLogoProps, AvatarGroupProps, AvatarParts, AvatarProps, AvatarSize, BadgeCSSVariable, BadgeParts, BadgeProps, BarChartOptions, BarChartProps, BarDimensions, BaseComponentProps, BlockProps, BreadcrumbInstance, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbOptions$1 as BreadcrumbOptions, BreadcrumbProps, BubbleChartProps, BubbleDataPoint, BuildConfig, ButtonCSSVariable, ButtonGroupProps, ButtonIconSlotProps, ButtonLabelSlotProps, ButtonParts, ButtonProps, ButtonRootSlotProps, ButtonSpinnerSlotProps, CSSThemeDefinition, CSSVariableConfig, CSSVariableNamingOptions, CalloutProps, CandlestickChartProps, CandlestickDataPoint, CardBodySlotProps, CardCSSVariable, CardFooterSlotProps, CardHeaderSlotProps, CardParts, CardProps, CardRootSlotProps, ChartAxis$1 as ChartAxis, ChartConfig$1 as ChartConfig, ChartDataPoint$1 as ChartDataPoint, ChartDataset$1 as ChartDataset, ChartProps$1 as ChartProps, ChartSize$1 as ChartSize, ChartType$1 as ChartType, CheckboxCSSVariable, CheckboxParts, CheckboxProps, CodeBlockProps, ColorModeToggleProps, ColorScale, ComponentCSSVariables, ComponentCustomization, ComponentName, ComponentParts, ComponentPartsMap, ComponentThemeOverride, ContainerProps, CountdownProps, CustomizableComponentProps, DataTableColumn, DataTableParts, DataTableProps, DatePickerProps, DesignTokens, DisplacementMode, DonutChartProps, DropdownCSSVariable, DropdownDividerProps, DropdownHeaderProps, DropdownItemProps, DropdownMenuSlotProps, DropdownParts, DropdownPlacement, DropdownProps, DropdownRootSlotProps, DropdownToggleSlotProps, DropdownTrigger, EdgePanelMode, EdgePanelPosition, EdgePanelProps, ElementRefs, ElevationCardProps, FontPreloadConfig, FooterLayout, FooterLinkProps, FooterProps, FooterSectionProps, FooterSocialLinkProps, FormGroupParts, FormGroupProps, FormProps, FunnelChartProps, FunnelDataPoint, GaugeChartProps, GenerateCSSVariablesOptions, GlassContainerProps, GlassMode, GlassSize, GridColProps, GridProps, HeatmapChartProps, HeatmapDataPoint, HeroAlignment, HeroBackgroundSlide, HeroBackgroundSliderConfig, HeroProps, IconPosition, IconProps, IconSize$1 as IconSize, IconWeight$1 as IconWeight, ImageType, InputCSSVariable, InputElementSlotProps, InputParts, InputProps, InputRootSlotProps, IntegrationConfig, JSThemeDefinition, LineChartOptions, LineChartProps, ListGroupProps$1 as ListGroupProps, ListParts, ListProps, MasonryGridItemProps, MasonryGridProps, MegaMenuColumnProps, MegaMenuLinkProps, MegaMenuProps, MenuDividerProps, MenuItemProps, MenuProps, MergePropsOptions, MessageItem, MessagesProps, ModalBackdropSlotProps, ModalCSSVariable, ModalContentSlotProps, ModalDialogSlotProps, ModalParts, ModalProps, ModalRootSlotProps, MousePosition, MultiAxisChartProps, NavAlignment, NavDropdownProps, NavItemProps, NavProps, NavVariant, NavbarParts, NavbarPosition, NavbarProps, OverLightConfig, OverLightObjectConfig, PaginationProps, PaletteColorOptions, PartStyleProps, PhosphorIconsType$1 as PhosphorIconsType, PhotoViewerProps, PieChartOptions, PieChartProps, PieSlice, PopoverProps, PopoverTriggerProps, ProductReviewProps, ProgressCSSVariable, ProgressParts, ProgressProps, RTLConfig, RadarChartProps, RadioCSSVariable, RadioParts, RadioProps, RatingProps, RiverContentColumn, RiverProps, RowProps, RuntimeConfig, ScatterChartProps, ScatterDataPoint, SectionIntroProps, SelectOption, SelectParts, SelectProps, SideMenuItemProps, SideMenuListProps, SideMenuProps, Size, SliderAutoplay, SliderBreakpoint, SliderEffect, SliderLazy, SliderNavigation, SliderPagination, SliderProps, SliderRefs, SliderScrollbar, SliderSlide, SliderState, SliderThumbs, SliderVirtual, SliderZoom, SlotProps, SocialLink, SocialPlatform, SortConfig, SpinnerProps, StateModifier, StepsProps, TabsCSSVariable, TabsParts, TabsProps, TestimonialProps, TextareaParts, TextareaProps, Theme, ThemeChangeEvent, ThemeColor, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeDefinition, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemeMetadata, ThemeName, ThemePreviewProps, ThemeProviderProps, ThemeTokens, ThemeValidationResult, TodoItem, TodoProps, ToggleProps, TooltipCSSVariable, TooltipParts, TooltipProps, TreemapChartProps, TreemapDataPoint, TreemapNode, UploadProps, UseBlockOptions, UseBlockReturn, UseCardOptions, UseCardReturn, UseDataTableProps, UseDataTableReturn, UseHistoryOptions, UseHistoryReturn, UseModalProps, UseModalReturn, UseSliderOptions, UseSliderReturn, UseThemeReturn, ValidationResult, Variant, VideoChapter, VideoPlayerProps, VideoQuality, VideoSubtitle, WaterfallChartProps, WaterfallDataPoint, listvariant };
+export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, Accordion, AnimatedChart, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DOTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GLASS_CONTAINER, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PhotoViewer, PieChart, Popover, ProductReview, Progress, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, THEME_NAMING, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyComponentTheme, applyPartStyles, applyTheme, camelToKebab, clearThemes, composables, constants, createCSSVarStyle, createDebugAttrs, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getAllThemes, getCSSVariable, getComponentCSSVars, getComponentThemeValue, getPartStyles, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasCustomization, hasTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isValidCSSVariableName, isYouTubeUrl, loadAtomixConfig, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, normalizeThemeTokens, preloadFonts, registerTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, resolveConfigPath, saveTheme, sliderConstants, theme, themePropertyToCSSVar, types, unregisterTheme, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useButton, useCard, useChartData, useChartInteraction, useChartScale, useCheckbox, useComponentCustomization, useComponentDefaultProps, useComponentTheme, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useHistory, useInput, useLineChart, useMergedProps, useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useThemeTokens, useTodo, utils };
+export type { A11yIssue, AccordionParts, AccordionProps$1 as AccordionProps, AccordionState, AnimatedChartProps, AreaChartProps, AtomixConfig, AtomixGlassProps, AtomixLogoProps, AvatarGroupProps, AvatarParts, AvatarProps, AvatarSize, BadgeCSSVariable, BadgeParts, BadgeProps, BarChartOptions, BarChartProps, BarDimensions, BaseComponentProps, BlockProps, BreadcrumbInstance, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbOptions$1 as BreadcrumbOptions, BreadcrumbProps, BubbleChartProps, BubbleDataPoint, BuildConfig, ButtonCSSVariable, ButtonGroupProps, ButtonIconSlotProps, ButtonLabelSlotProps, ButtonParts, ButtonProps, ButtonRootSlotProps, ButtonSpinnerSlotProps, CSSThemeDefinition, CSSVariableConfig, CSSVariableNamingOptions, CalloutProps, CandlestickChartProps, CandlestickDataPoint, CardBodySlotProps, CardCSSVariable, CardFooterSlotProps, CardHeaderSlotProps, CardParts, CardProps, CardRootSlotProps, ChartAxis$1 as ChartAxis, ChartConfig$1 as ChartConfig, ChartDataPoint$1 as ChartDataPoint, ChartDataset$1 as ChartDataset, ChartProps$1 as ChartProps, ChartSize$1 as ChartSize, ChartType$1 as ChartType, CheckboxCSSVariable, CheckboxParts, CheckboxProps, CodeBlockProps, ColorModeToggleProps, ColorScale, ComponentCSSVariables, ComponentCustomization, ComponentName, ComponentParts, ComponentPartsMap, ComponentThemeOptions, ComponentThemeOverride, ContainerProps, CountdownProps, CustomizableComponentProps, DataTableColumn, DataTableParts, DataTableProps, DatePickerProps, DesignTokens, DisplacementMode, DonutChartProps, DropdownCSSVariable, DropdownDividerProps, DropdownHeaderProps, DropdownItemProps, DropdownMenuSlotProps, DropdownParts, DropdownPlacement, DropdownProps, DropdownRootSlotProps, DropdownToggleSlotProps, DropdownTrigger, EdgePanelMode, EdgePanelPosition, EdgePanelProps, ElementRefs, ElevationCardProps, ExportFormat, FontPreloadConfig, FooterLayout, FooterLinkProps, FooterProps, FooterSectionProps, FooterSocialLinkProps, FormGroupParts, FormGroupProps, FormProps, FunnelChartProps, FunnelDataPoint, GaugeChartProps, GenerateCSSVariablesOptions, GlassContainerProps, GlassMode, GlassSize, GridColProps, GridProps, HeatmapChartProps, HeatmapDataPoint, HeroAlignment, HeroBackgroundSlide, HeroBackgroundSliderConfig, HeroProps, IconPosition, IconProps, IconSize$1 as IconSize, IconWeight$1 as IconWeight, ImageType, InputCSSVariable, InputElementSlotProps, InputParts, InputProps, InputRootSlotProps, IntegrationConfig, JSThemeDefinition, LineChartOptions, LineChartProps, ListGroupProps$1 as ListGroupProps, ListParts, ListProps, MasonryGridItemProps, MasonryGridProps, MegaMenuColumnProps, MegaMenuLinkProps, MegaMenuProps, MenuDividerProps, MenuItemProps, MenuProps, MergePropsOptions, MessageItem, MessagesProps, ModalBackdropSlotProps, ModalCSSVariable, ModalContentSlotProps, ModalDialogSlotProps, ModalParts, ModalProps, ModalRootSlotProps, MousePosition, MultiAxisChartProps, NamingOptions, NavAlignment, NavDropdownProps, NavItemProps, NavProps, NavVariant, NavbarParts, NavbarPosition, NavbarProps, OverLightConfig, OverLightObjectConfig, PaginationProps, PaletteColorOptions, PartStyleProps, PhosphorIconsType$1 as PhosphorIconsType, PhotoViewerProps, PieChartOptions, PieChartProps, PieSlice, PopoverProps, PopoverTriggerProps, ProductReviewProps, ProgressCSSVariable, ProgressParts, ProgressProps, RTLConfig, RadarChartProps, RadioCSSVariable, RadioParts, RadioProps, RatingProps, RiverContentColumn, RiverProps, RowProps, RuntimeConfig, ScatterChartProps, ScatterDataPoint, SectionIntroProps, SelectOption, SelectParts, SelectProps, SelectionMode, SideMenuItemProps, SideMenuListProps, SideMenuProps, Size, SliderAutoplay, SliderBreakpoint, SliderEffect, SliderLazy, SliderNavigation, SliderPagination, SliderProps, SliderRefs, SliderScrollbar, SliderSlide, SliderState, SliderThumbs, SliderVirtual, SliderZoom, SlotProps, SocialLink, SocialPlatform, SortConfig, SpinnerProps, StateModifier, StepsProps, TabsCSSVariable, TabsParts, TabsProps, TestimonialProps, TextareaParts, TextareaProps, Theme, ThemeChangeEvent, ThemeColor, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeDefinition, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemeName, ThemePreviewProps, ThemeProviderProps, ThemeTokens, ThemeValidationResult, TodoItem, TodoProps, ToggleProps, TooltipCSSVariable, TooltipParts, TooltipProps, TreemapChartProps, TreemapDataPoint, TreemapNode, UploadProps, UseBlockOptions, UseBlockReturn, UseCardOptions, UseCardReturn, UseDataTableProps, UseDataTableReturn, UseHistoryOptions, UseHistoryReturn, UseModalProps, UseModalReturn, UseSliderOptions, UseSliderReturn, UseThemeReturn, ValidationResult, Variant, VideoChapter, VideoPlayerProps, VideoQuality, VideoSubtitle, WaterfallChartProps, WaterfallDataPoint, listvariant };