@shohojdhara/atomix 0.3.5 → 0.3.7

package/dist/index.d.ts

@@ -1627,6 +1627,31 @@ interface ButtonProps extends BaseComponentProps {
      */
     style?: React.CSSProperties;
 }
+/**
+ * ButtonGroup component properties
+ */
+interface ButtonGroupProps extends BaseComponentProps {
+    /**
+     * ButtonGroup children (should be Button components)
+     */
+    children?: ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Inline style for the component root element
+     */
+    style?: React.CSSProperties;
+    /**
+     * ARIA label for accessibility
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA role for the button group
+     */
+    role?: string;
+}
 /**
  * Badge component properties
  */
@@ -1689,52 +1714,6 @@ interface BadgeProps extends BaseComponentProps {
         label?: SlotProps<BadgeLabelSlotProps>;
     };
 }
-/**
- * Block component properties (legacy - use BlockProps from component instead)
- * @deprecated Use BlockProps from '@atomix/components/Block' instead
- */
-interface LegacyBlockProps extends BaseComponentProps {
-    /**
-     * The content to be rendered within the block
-     */
-    children: ReactNode;
-    /**
-     * The HTML element to render as
-     * @default 'section'
-     */
-    as?: 'section' | 'div' | 'article' | 'aside' | 'main';
-    /**
-     * Spacing size for vertical padding
-     * @default 'md'
-     */
-    spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
-    /**
-     * Container configuration
-     */
-    container?: {
-        /**
-         * Container type for content width
-         */
-        type?: 'sm' | 'md' | 'lg' | 'xl' | 'fluid';
-        /**
-         * Additional container classes
-         */
-        className?: string;
-    };
-    /**
-     * Whether to enable full-width content
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Background color variant
-     */
-    background?: 'primary' | 'secondary' | 'tertiary' | 'invert' | 'brand' | 'error' | 'success' | 'warning' | 'info' | 'light';
-    /**
-     * Custom style for the block
-     */
-    style?: React.CSSProperties;
-}
 /**
  * Callout component properties
  */
@@ -2068,36 +2047,6 @@ type IconWeight$1 = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
  * Phosphor icon type - excludes internal Phosphor exports
  */
 type PhosphorIconsType$1 = Exclude<keyof typeof _phosphor_icons_react, 'IconContext' | 'IconBase' | 'createIcon' | 'default' | 'SSR'>;
-/**
- * Icon component properties (legacy - use IconProps from component instead)
- * @deprecated Use IconProps from '@atomix/components/Icon' instead
- */
-interface LegacyIconProps extends BaseComponentProps {
-    /**
-     * Icon name from Phosphor Icons
-     */
-    name: PhosphorIconsType$1;
-    /**
-     * Icon size
-     */
-    size?: IconSize$1 | number;
-    /**
-     * Icon weight/style
-     */
-    weight?: IconWeight$1;
-    /**
-     * Icon color
-     */
-    color?: string;
-    /**
-     * Alt text for accessibility
-     */
-    alt?: string;
-    /**
-     * Custom style
-     */
-    style?: React.CSSProperties;
-}
 /**
  * Navbar position options
  */
@@ -2694,6 +2643,14 @@ interface PaginationProps extends BaseComponentProps {
      * Whether to show previous/next page buttons
      */
     showPrevNextButtons?: boolean;
+    /**
+     * Whether to show search input for jumping to a specific page
+     */
+    showSearch?: boolean;
+    /**
+     * Placeholder text for the search input
+     */
+    searchPlaceholder?: string;
     /**
      * Custom class for the pagination container
      */
@@ -3555,32 +3512,6 @@ interface BreadcrumbItem$1 {
      */
     className?: string;
 }
-/**
- * Breadcrumb component properties (legacy - use BreadcrumbProps from component instead)
- * @deprecated Use BreadcrumbProps from '@atomix/components/Breadcrumb' instead
- */
-interface LegacyBreadcrumbProps extends BaseComponentProps {
-    /**
-     * Array of breadcrumb items
-     */
-    items: BreadcrumbItem$1[];
-    /**
-     * Custom divider character or element
-     */
-    divider?: ReactNode;
-    /**
-     * Aria label for the navigation
-     */
-    ariaLabel?: string;
-    /**
-     * Optional custom link component
-     */
-    LinkComponent?: React.ElementType;
-    /**
-     * Custom style for the breadcrumb
-     */
-    style?: React.CSSProperties;
-}
 /**
  * Breadcrumb options interface (for vanilla JS)
  */
@@ -8275,6 +8206,7 @@ type __lib_types_AvatarSize = AvatarSize;
 type __lib_types_BadgeProps = BadgeProps;
 type __lib_types_BaseComponentProps = BaseComponentProps;
 type __lib_types_BreadcrumbInstance = BreadcrumbInstance;
+type __lib_types_ButtonGroupProps = ButtonGroupProps;
 type __lib_types_ButtonProps = ButtonProps;
 type __lib_types_CalloutProps = CalloutProps;
 type __lib_types_CardProps = CardProps;
@@ -8311,9 +8243,6 @@ type __lib_types_HeroProps = HeroProps;
 type __lib_types_IconPosition = IconPosition;
 type __lib_types_ImageType = ImageType;
 type __lib_types_InputProps = InputProps;
-type __lib_types_LegacyBlockProps = LegacyBlockProps;
-type __lib_types_LegacyBreadcrumbProps = LegacyBreadcrumbProps;
-type __lib_types_LegacyIconProps = LegacyIconProps;
 type __lib_types_ListProps = ListProps;
 type __lib_types_MegaMenuColumnProps = MegaMenuColumnProps;
 type __lib_types_MegaMenuLinkProps = MegaMenuLinkProps;
@@ -8379,7 +8308,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_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, __lib_types_LegacyBlockProps as LegacyBlockProps, __lib_types_LegacyBreadcrumbProps as LegacyBreadcrumbProps, __lib_types_LegacyIconProps as LegacyIconProps, 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_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 };
 }
 
 /**
@@ -8402,6 +8331,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;
@@ -8417,6 +8352,15 @@ declare const BUTTON: {
         SELECTED: string;
     };
 };
+/**
+ * ButtonGroup-specific constants
+ */
+declare const BUTTON_GROUP: {
+    BASE_CLASS: string;
+    CLASSES: {
+        BASE: string;
+    };
+};
 /**
  * Callout-specific constants
  */
@@ -10121,6 +10065,7 @@ declare const __lib_constants_BADGE: typeof BADGE;
 declare const __lib_constants_BLOCK: typeof BLOCK;
 declare const __lib_constants_BREADCRUMB: typeof BREADCRUMB;
 declare const __lib_constants_BUTTON: typeof BUTTON;
+declare const __lib_constants_BUTTON_GROUP: typeof BUTTON_GROUP;
 declare const __lib_constants_CALLOUT: typeof CALLOUT;
 declare const __lib_constants_CARD: typeof CARD;
 declare const __lib_constants_CHART: typeof CHART;
@@ -10162,6 +10107,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;
@@ -10178,6 +10124,7 @@ declare namespace __lib_constants {
     __lib_constants_BLOCK as BLOCK,
     __lib_constants_BREADCRUMB as BREADCRUMB,
     __lib_constants_BUTTON as BUTTON,
+    __lib_constants_BUTTON_GROUP as BUTTON_GROUP,
     __lib_constants_CALLOUT as CALLOUT,
     __lib_constants_CARD as CARD,
     __lib_constants_CHART as CHART,
@@ -10219,6 +10166,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,
@@ -10729,7 +10677,6 @@ declare function useNavDropdown(initialProps?: Partial<NavDropdownProps>): {
     defaultProps: Partial<NavDropdownProps>;
     generateDropdownMenuClass: (props: Partial<NavDropdownProps>) => string;
     isInFixedBottomNavbar: () => boolean;
-    getIconClass: (isMegaMenu?: boolean) => string;
     getIconName: (isMegaMenu?: boolean) => string;
 };
 
@@ -11491,6 +11438,23 @@ interface BlockProps extends HTMLAttributes<HTMLElement> {
  */
 declare const Block: React__default.ForwardRefExoticComponent<BlockProps & React__default.RefAttributes<HTMLDivElement>>;
 
+/**
+ * ButtonGroup - A component for grouping buttons together
+ *
+ * Groups buttons together with proper border radius handling and spacing.
+ * The buttons will be visually connected with shared borders.
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup>
+ *   <Button label="Left" />
+ *   <Button label="Middle" />
+ *   <Button label="Right" />
+ * </ButtonGroup>
+ * ```
+ */
+declare const ButtonGroup: React__default.FC<ButtonGroupProps>;
+
 /**
  * Callout component for displaying important messages, notifications, or alerts
  */
@@ -12349,1171 +12313,479 @@ declare const Upload: React__default.FC<UploadProps>;
 declare const VideoPlayer: React__default.ForwardRefExoticComponent<VideoPlayerProps & React__default.RefAttributes<HTMLVideoElement>>;
 
 /**
- * RTL (Right-to-Left) Support Utilities
- *
- * Provides utilities for managing RTL text direction in themes
- */
-/**
- * RTL configuration options
- */
-interface RTLConfig {
-    /** Enable RTL mode */
-    enabled: boolean;
-    /** Current direction ('ltr' | 'rtl') */
-    direction: 'ltr' | 'rtl';
-    /** Data attribute name for direction */
-    dataAttribute?: string;
-    /** Auto-detect from locale */
-    autoDetect?: boolean;
-    /** Locale code (e.g., 'ar', 'he', 'fa') */
-    locale?: string;
-}
-/**
- * RTL Manager
- *
- * Manages RTL text direction for the theme system
- */
-declare class RTLManager {
-    private config;
-    private listeners;
-    constructor(config?: Partial<RTLConfig>);
-    /**
-     * Detect locale from browser
-     */
-    private detectLocale;
-    /**
-     * Check if locale is RTL
-     */
-    isRTLLocale(locale: string): boolean;
-    /**
-     * Get current direction
-     */
-    getDirection(): 'ltr' | 'rtl';
-    /**
-     * Check if RTL is enabled
-     */
-    isEnabled(): boolean;
-    /**
-     * Set direction
-     */
-    setDirection(direction: 'ltr' | 'rtl'): void;
-    /**
-     * Toggle direction
-     */
-    toggleDirection(): 'ltr' | 'rtl';
-    /**
-     * Enable RTL
-     */
-    enable(): void;
-    /**
-     * Disable RTL
-     */
-    disable(): void;
-    /**
-     * Set locale and auto-adjust direction
-     */
-    setLocale(locale: string): void;
-    /**
-     * Get current locale
-     */
-    getLocale(): string | undefined;
-    /**
-     * Apply direction to DOM
-     */
-    private applyDirection;
-    /**
-     * Add direction change listener
-     */
-    onDirectionChange(callback: (direction: 'ltr' | 'rtl') => void): () => void;
-    /**
-     * Notify listeners of direction change
-     */
-    private notifyListeners;
-    /**
-     * Get RTL-aware value
-     *
-     * Returns different values based on direction
-     */
-    getValue<T>(ltrValue: T, rtlValue: T): T;
-    /**
-     * Get RTL-aware CSS property
-     *
-     * Returns appropriate CSS property based on direction
-     */
-    getCSSProperty(property: string): string;
-    /**
-     * Destroy RTL manager
-     */
-    destroy(): void;
+ * Design Tokens
+ *
+ * Simple flat structure for design tokens.
+ * All tokens match the actual CSS variables used in Atomix.
+ * Based on docs/tokes-list.md
+ */
+/**
+ * Design tokens interface
+ *
+ * Flat structure - no nesting complexity.
+ * Keys use kebab-case format matching CSS variable names (without --atomix- prefix).
+ */
+interface DesignTokens {
+    'primary': string;
+    'secondary': string;
+    'success': string;
+    'info': string;
+    'warning': string;
+    'error': string;
+    'light': string;
+    'dark': string;
+    'primary-rgb': string;
+    'secondary-rgb': string;
+    'success-rgb': string;
+    'info-rgb': string;
+    'warning-rgb': string;
+    'error-rgb': string;
+    'light-rgb': string;
+    'dark-rgb': string;
+    'gray-1': string;
+    'gray-2': string;
+    'gray-3': string;
+    'gray-4': string;
+    'gray-5': string;
+    'gray-6': string;
+    'gray-7': string;
+    'gray-8': string;
+    'gray-9': string;
+    'gray-10': string;
+    'primary-1': string;
+    'primary-2': string;
+    'primary-3': string;
+    'primary-4': string;
+    'primary-5': string;
+    'primary-6': string;
+    'primary-7': string;
+    'primary-8': string;
+    'primary-9': string;
+    'primary-10': string;
+    'red-1': string;
+    'red-2': string;
+    'red-3': string;
+    'red-4': string;
+    'red-5': string;
+    'red-6': string;
+    'red-7': string;
+    'red-8': string;
+    'red-9': string;
+    'red-10': string;
+    'green-1': string;
+    'green-2': string;
+    'green-3': string;
+    'green-4': string;
+    'green-5': string;
+    'green-6': string;
+    'green-7': string;
+    'green-8': string;
+    'green-9': string;
+    'green-10': string;
+    'blue-1': string;
+    'blue-2': string;
+    'blue-3': string;
+    'blue-4': string;
+    'blue-5': string;
+    'blue-6': string;
+    'blue-7': string;
+    'blue-8': string;
+    'blue-9': string;
+    'blue-10': string;
+    'yellow-1': string;
+    'yellow-2': string;
+    'yellow-3': string;
+    'yellow-4': string;
+    'yellow-5': string;
+    'yellow-6': string;
+    'yellow-7': string;
+    'yellow-8': string;
+    'yellow-9': string;
+    'yellow-10': string;
+    'primary-text-emphasis': string;
+    'secondary-text-emphasis': string;
+    'tertiary-text-emphasis': string;
+    'disabled-text-emphasis': string;
+    'invert-text-emphasis': string;
+    'brand-text-emphasis': string;
+    'error-text-emphasis': string;
+    'success-text-emphasis': string;
+    'warning-text-emphasis': string;
+    'info-text-emphasis': string;
+    'light-text-emphasis': string;
+    'dark-text-emphasis': string;
+    'primary-bg-subtle': string;
+    'secondary-bg-subtle': string;
+    'tertiary-bg-subtle': string;
+    'invert-bg-subtle': string;
+    'brand-bg-subtle': string;
+    'error-bg-subtle': string;
+    'success-bg-subtle': string;
+    'warning-bg-subtle': string;
+    'info-bg-subtle': string;
+    'light-bg-subtle': string;
+    'dark-bg-subtle': string;
+    'primary-border-subtle': string;
+    'secondary-border-subtle': string;
+    'success-border-subtle': string;
+    'error-border-subtle': string;
+    'warning-border-subtle': string;
+    'info-border-subtle': string;
+    'brand-border-subtle': string;
+    'light-border-subtle': string;
+    'dark-border-subtle': string;
+    'primary-hover': string;
+    'secondary-hover': string;
+    'light-hover': string;
+    'dark-hover': string;
+    'error-hover': string;
+    'success-hover': string;
+    'warning-hover': string;
+    'info-hover': string;
+    'primary-gradient': string;
+    'secondary-gradient': string;
+    'light-gradient': string;
+    'dark-gradient': string;
+    'success-gradient': string;
+    'info-gradient': string;
+    'warning-gradient': string;
+    'error-gradient': string;
+    'gradient': string;
+    'font-sans-serif': string;
+    'font-monospace': string;
+    'body-font-family': string;
+    'body-font-size': string;
+    'body-font-weight': string;
+    'body-line-height': string;
+    'body-color': string;
+    'body-bg': string;
+    'heading-color': string;
+    'font-size-xl': string;
+    'font-size-2xl': string;
+    'display-1': string;
+    'font-weight-light': string;
+    'font-weight-normal': string;
+    'font-weight-medium': string;
+    'font-weight-semibold': string;
+    'font-weight-bold': string;
+    'font-weight-heavy': string;
+    'font-weight-black': string;
+    'line-height-base': string;
+    'line-height-sm': string;
+    'line-height-lg': string;
+    'letter-spacing-h1': string;
+    'letter-spacing-h2': string;
+    'letter-spacing-h3': string;
+    'letter-spacing-h4': string;
+    'letter-spacing-h5': string;
+    'letter-spacing-h6': string;
+    'link-color': string;
+    'link-color-rgb': string;
+    'link-decoration': string;
+    'link-hover-color': string;
+    'link-hover-color-rgb': string;
+    'highlight-bg': string;
+    'code-color': string;
+    'border-width': string;
+    'border-style': string;
+    'border-color': string;
+    'border-color-translucent': string;
+    'border-radius': string;
+    'border-radius-sm': string;
+    'border-radius-lg': string;
+    'border-radius-xl': string;
+    'border-radius-xxl': string;
+    'border-radius-2xl': string;
+    'border-radius-3xl': string;
+    'border-radius-4xl': string;
+    'border-radius-pill': string;
+    'box-shadow': string;
+    'box-shadow-xs': string;
+    'box-shadow-sm': string;
+    'box-shadow-lg': string;
+    'box-shadow-xl': string;
+    'box-shadow-inset': string;
+    'focus-border-color': string;
+    'focus-ring-width': string;
+    'focus-ring-offset': string;
+    'focus-ring-opacity': string;
+    'form-valid-color': string;
+    'form-valid-border-color': string;
+    'form-invalid-color': string;
+    'form-invalid-border-color': string;
+    'spacing-0': string;
+    'spacing-1': string;
+    'spacing-px-6': string;
+    'spacing-2': string;
+    'spacing-px-10': string;
+    'spacing-3': string;
+    'spacing-px-14': string;
+    'spacing-4': string;
+    'spacing-5': string;
+    'spacing-px-22': string;
+    'spacing-6': string;
+    'spacing-7': string;
+    'spacing-px-30': string;
+    'spacing-8': string;
+    'spacing-9': string;
+    'spacing-10': string;
+    'spacing-11': string;
+    'spacing-12': string;
+    'spacing-14': string;
+    'spacing-16': string;
+    'spacing-20': string;
+    'spacing-24': string;
+    'spacing-28': string;
+    'spacing-32': string;
+    'spacing-36': string;
+    'spacing-40': string;
+    'spacing-44': string;
+    'spacing-48': string;
+    'spacing-52': string;
+    'spacing-56': string;
+    'spacing-60': string;
+    'spacing-64': string;
+    'spacing-72': string;
+    'spacing-80': string;
+    'spacing-90': string;
+    'spacing-200': string;
+    'transition-duration-fast': string;
+    'transition-duration-base': string;
+    'transition-duration-slow': string;
+    'transition-duration-slower': string;
+    'easing-base': string;
+    'easing-ease-in-out': string;
+    'easing-ease-out': string;
+    'easing-ease-in': string;
+    'easing-ease-linear': string;
+    'transition-fast': string;
+    'transition-base': string;
+    'transition-slow': string;
+    'z-n1': string;
+    'z-0': string;
+    'z-1': string;
+    'z-2': string;
+    'z-3': string;
+    'z-4': string;
+    'z-5': string;
+    'z-dropdown': string;
+    'z-sticky': string;
+    'z-fixed': string;
+    'z-modal': string;
+    'z-popover': string;
+    'z-tooltip': string;
+    'z-drawer': string;
+    'breakpoint-xs': string;
+    'breakpoint-sm': string;
+    'breakpoint-md': string;
+    'breakpoint-lg': string;
+    'breakpoint-xl': string;
+    'breakpoint-xxl': string;
+    [key: string]: string | undefined;
 }
-
 /**
- * Atomix Config Loader
+ * Default design tokens
  *
- * Helper functions to load atomix.config.ts from external projects.
- * Similar to how Tailwind loads tailwind.config.js
+ * Based on Atomix default theme values from docs/tokes-list.md (light mode)
  */
-
+declare const defaultTokens: DesignTokens;
 /**
- * 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.
+ * Create tokens from defaults and overrides
  *
- * @param options - Loader options
- * @returns Loaded configuration or default
+ * @param overrides - Partial tokens to override defaults
+ * @returns Complete DesignTokens object
  *
  * @example
  * ```typescript
- * import { loadAtomixConfig } from '@shohojdhara/atomix/config';
- *
- * const config = loadAtomixConfig();
- * const theme = createThemeFromConfig(config);
+ * const tokens = createTokens({
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * });
  * ```
  */
-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 createTokens(overrides?: Partial<DesignTokens>): DesignTokens;
+
 /**
- * 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.
+ * Theme Manager Type Definitions
  *
- * @internal This function uses Node.js modules and should not be called in browser environments.
+ * TypeScript types and interfaces for the Atomix Design System theme management system.
  */
-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
+ * Theme metadata interface matching themes.config.js structure
  */
-interface CSSThemeDefinition {
-    type: 'css';
+interface ThemeMetadata$1 {
+    /** 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[];
-    cssPath?: string;
 }
 /**
- * JavaScript Theme Definition
+ * Theme change event payload
  */
-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;
+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';
 }
 /**
- * Theme Definition (CSS or JS)
+ * Theme load options
  */
-type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
+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;
+}
 /**
- * Build configuration (migrated from theme.config.ts)
+ * Theme validation result
  */
-interface BuildConfig {
-    output?: {
-        directory?: string;
-        formats?: {
-            expanded?: string;
-            compressed?: string;
-        };
-    };
-    sass?: {
-        style?: 'expanded' | 'compressed';
-        sourceMap?: boolean;
-        loadPaths?: string[];
-    };
+interface ThemeValidationResult {
+    /** Whether the theme is valid */
+    valid: boolean;
+    /** Validation errors */
+    errors: string[];
+    /** Validation warnings */
+    warnings: string[];
 }
 /**
- * Runtime configuration (migrated from theme.config.ts)
+ * React hook return type for useTheme
  */
-interface RuntimeConfig {
+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$1[];
+    /** 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
+ */
+interface ComponentThemeOverride {
+    /** CSS variable overrides for the component */
+    cssVars?: Record<string, string | number>;
+    /** Default prop overrides */
+    defaultProps?: Record<string, any>;
+    /** Part-specific overrides */
+    parts?: Record<string, {
+        cssVars?: Record<string, string | number>;
+        className?: string;
+    }>;
+    /** Variant overrides */
+    variants?: Record<string, {
+        cssVars?: Record<string, string | number>;
+        className?: string;
+    }>;
+    /** Additional className for the component */
+    className?: string;
+}
+/**
+ * Theme component overrides for all components
+ */
+interface ThemeComponentOverrides {
+    Button?: ComponentThemeOverride;
+    Card?: ComponentThemeOverride;
+    Input?: ComponentThemeOverride;
+    Modal?: ComponentThemeOverride;
+    Dropdown?: ComponentThemeOverride;
+    Badge?: ComponentThemeOverride;
+    Tabs?: ComponentThemeOverride;
+    Progress?: ComponentThemeOverride;
+    Tooltip?: ComponentThemeOverride;
+    Select?: ComponentThemeOverride;
+    Checkbox?: ComponentThemeOverride;
+    Radio?: ComponentThemeOverride;
+    Textarea?: ComponentThemeOverride;
+    FormGroup?: ComponentThemeOverride;
+    Navbar?: ComponentThemeOverride;
+    Accordion?: ComponentThemeOverride;
+    DataTable?: ComponentThemeOverride;
+    Avatar?: ComponentThemeOverride;
+    List?: ComponentThemeOverride;
+    Popover?: ComponentThemeOverride;
+    Messages?: ComponentThemeOverride;
+    Callout?: ComponentThemeOverride;
+    Spinner?: ComponentThemeOverride;
+    [key: string]: ComponentThemeOverride | undefined;
+}
+/**
+ * Theme provider props
+ */
+interface ThemeProviderProps {
+    /** Child components */
+    children: React.ReactNode;
+    /** Default theme */
+    defaultTheme?: string | Theme;
+    /** Available themes */
+    themes?: Record<string, ThemeMetadata$1>;
+    /** Base path for theme CSS */
     basePath?: string;
+    /** CDN path for theme CSS */
     cdnPath?: string | null;
+    /** Themes to preload */
     preload?: string[];
+    /** Enable lazy loading */
     lazy?: boolean;
-    defaultTheme?: string;
+    /** localStorage key */
     storageKey?: string;
+    /** Data attribute name */
     dataAttribute?: string;
+    /** Enable persistence */
     enablePersistence?: boolean;
+    /** Use minified CSS */
     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;
-
-/**
- * Theme Configuration Types
- *
- * Type definitions for the theme configuration system
- */
-
-/**
- * Loaded and validated theme configuration
- */
-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;
-}
-
-/**
- * Theme Registry
- *
- * Central registry for all themes with discovery and dependency management
- */
-
-/**
- * Registry entry
- */
-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;
-    /**
-     * Get theme object (for JS themes)
-     */
-    getTheme(themeId: string): Theme | undefined;
-    /**
-     * Set theme object (for JS themes)
-     */
-    setTheme(themeId: string, theme: Theme): void;
-    /**
-     * 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;
-}
-
-/**
- * Theme Cache
- *
- * Performance caching layer for loaded themes (CSS and JS)
- */
-
-/**
- * Cache entry for CSS theme
- */
-interface CSSCacheEntry {
-    type: 'css' | 'js';
-    themeId: string;
-    cssContent?: string;
-    loaded: boolean;
-    loading: Promise<void> | null;
-    timestamp: number;
-}
-/**
- * Cache entry for JS theme
- */
-interface JSCacheEntry {
-    type: 'js';
-    themeId: string;
-    theme: Theme;
-    loaded: boolean;
-    timestamp: number;
-}
-/**
- * Theme cache configuration
- */
-interface CacheConfig {
-    /** Maximum cache size (number of themes) */
-    maxSize?: number;
-    /** Cache TTL in milliseconds (0 = no expiration) */
-    ttl?: number;
-    /** Enable cache */
-    enabled?: boolean;
-}
-/**
- * Theme Cache
- *
- * Manages caching of loaded themes for performance optimization
- */
-declare class ThemeCache {
-    private cache;
-    private config;
-    private accessOrder;
-    constructor(config?: CacheConfig);
-    /**
-     * Get cached CSS theme
-     */
-    getCSS(themeId: string): CSSCacheEntry | null;
-    /**
-     * Get cached JS theme
-     */
-    getJS(themeId: string): JSCacheEntry | null;
-    /**
-     * Set CSS theme cache entry
-     */
-    setCSS(themeId: string, entry: Partial<CSSCacheEntry>): void;
-    /**
-     * Set JS theme cache entry
-     */
-    setJS(themeId: string, theme: Theme): void;
-    /**
-     * Check if theme is cached
-     */
-    has(themeId: string): boolean;
-    /**
-     * Remove theme from cache
-     */
-    delete(themeId: string): boolean;
-    /**
-     * Clear all cache
-     */
-    clear(): void;
-    /**
-     * Get cache statistics
-     */
-    getStats(): {
-        size: number;
-        maxSize: number;
-        cssThemes: number;
-        jsThemes: number;
-    };
-    /**
-     * Update access order for LRU
-     */
-    private updateAccessOrder;
-    /**
-     * Remove from access order
-     */
-    private removeFromAccessOrder;
-    /**
-     * Evict least recently used entries if cache is full
-     */
-    private evictIfNeeded;
-}
-
-/**
- * Theme Engine
- *
- * Core engine for unified CSS and JS theme support
- */
-
-/**
- * Theme change event
- */
-interface ThemeChangeEvent$1 {
-    /** Previous theme ID */
-    previousTheme: string | null;
-    /** Current theme ID */
-    currentTheme: string;
-    /** Theme object (for JS themes) */
-    themeObject?: Theme | null;
-    /** Timestamp */
-    timestamp: number;
-    /** Source of change */
-    source: 'user' | 'system' | 'storage';
-}
-/**
- * Theme load options
- */
-interface ThemeLoadOptions$1 {
-    /** 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 revert event
- */
-interface ThemeRevertEvent {
-    /** Theme ID that was attempted */
-    attemptedTheme: string;
-    /** Theme ID that was reverted to (null if no previous theme) */
-    revertedToTheme: string | null;
-    /** Error that caused the revert */
-    error: Error;
-    /** Timestamp */
-    timestamp: number;
-}
-/**
- * Event listener types
- */
-type ThemeChangeListener = (event: ThemeChangeEvent$1) => void;
-type ThemeLoadListener = (themeId: string) => void;
-type ThemeErrorListener = (error: Error, themeId: string) => void;
-type ThemeRevertListener = (event: ThemeRevertEvent) => void;
-/**
- * Theme Engine Configuration
- */
-interface ThemeEngineConfig {
-    /** Base path for CSS themes */
-    basePath?: string;
-    /** CDN path for CSS themes */
-    cdnPath?: string | null;
-    /** Use minified CSS */
-    useMinified?: boolean;
-    /** Data attribute name */
-    dataAttribute?: string;
-    /** Enable caching */
-    enableCache?: boolean;
-    /** Cache configuration */
-    cacheConfig?: {
-        maxSize?: number;
-        ttl?: number;
-    };
-    /** Custom style ID for JS theme CSS injection */
-    styleId?: string;
-}
-/**
- * Theme Engine
- *
- * Unified engine for managing CSS and JS themes
- */
-declare class ThemeEngine {
-    private registry;
-    private cache;
-    private validator;
-    private config;
-    private currentTheme;
-    private activeTheme;
-    private loadedThemes;
-    private loadingThemes;
-    private failedThemes;
-    private changeListeners;
-    private loadListeners;
-    private errorListeners;
-    private revertListeners;
-    private logger;
-    constructor(config?: ThemeEngineConfig);
-    /**
-     * Initialize engine with theme registry
-     */
-    initialize(): Promise<void>;
-    /**
-     * Get current theme ID
-     */
-    getCurrentTheme(): string | null;
-    /**
-     * Get active theme object
-     */
-    getActiveTheme(): Theme | null;
-    /**
-     * Check if theme is loaded
-     */
-    isThemeLoaded(themeId: string): boolean;
-    /**
-     * Load and apply theme
-     */
-    setTheme(themeId: string | Theme, options?: ThemeLoadOptions$1): Promise<void>;
-    /**
-     * Load theme (CSS or JS)
-     */
-    private loadTheme;
-    /**
-     * Load CSS theme
-     */
-    private loadCSSTheme;
-    /**
-     * Load JS theme
-     */
-    private loadJSTheme;
-    /**
-     * Apply theme (set as active)
-     */
-    private applyTheme;
-    /**
-     * Apply CSS theme
-     */
-    private applyCSSTheme;
-    /**
-     * Apply JS theme
-     */
-    private applyJSTheme;
-    /**
-     * Remove theme
-     */
-    private removeTheme;
-    /**
-     * Preload theme
-     */
-    preloadTheme(themeId: string): Promise<void>;
-    /**
-     * Get registry
-     */
-    getRegistry(): ThemeRegistry;
-    /**
-     * Get cache
-     */
-    getCache(): ThemeCache;
-    /**
-     * Clear failed theme tracking (allows retry of previously failed themes)
-     */
-    clearFailedThemes(): void;
-    /**
-     * Clear specific failed theme (allows retry of a specific theme)
-     */
-    clearFailedTheme(themeId: string): void;
-    /**
-     * Check if theme has failed to load
-     */
-    hasFailedTheme(themeId: string): boolean;
-    /**
-     * Add change listener
-     */
-    on(event: 'change', listener: ThemeChangeListener): void;
-    on(event: 'load', listener: ThemeLoadListener): void;
-    on(event: 'error', listener: ThemeErrorListener): void;
-    on(event: 'revert', listener: ThemeRevertListener): void;
-    /**
-     * Remove listener
-     */
-    off(event: 'change', listener: ThemeChangeListener): void;
-    off(event: 'load', listener: ThemeLoadListener): void;
-    off(event: 'error', listener: ThemeErrorListener): void;
-    off(event: 'revert', listener: ThemeRevertListener): void;
-    /**
-     * Emit change event
-     */
-    private emitChange;
-    /**
-     * Emit load event
-     */
-    private emitLoad;
-    /**
-     * Emit error event
-     * Emits error to listeners (error emission is controlled at call site)
-     */
-    private emitError;
-    /**
-     * Emit revert event
-     */
-    private emitRevert;
-}
-
-/**
- * Theme Manager
- *
- * Core theme management class for the Atomix Design System.
- * Rewritten to use the new ThemeEngine architecture.
- * Handles theme loading, switching, persistence, and events.
- * Supports both CSS-based themes and JavaScript-based themes.
- */
-
-/**
- * ThemeManager class
- *
- * Manages theme loading, switching, and persistence for Atomix Design System.
- * Uses the new ThemeEngine architecture for unified CSS/JS theme support.
- *
- * @example
- * ```typescript
- * const themeManager = new ThemeManager({
- *   // No defaultTheme - uses built-in styles
- * });
- *
- * await themeManager.setTheme('my-custom-theme');
- * ```
- */
-declare class ThemeManager {
-    private engine;
-    private config;
-    private currentTheme;
-    private activeTheme;
-    private eventListeners;
-    private storageAdapter;
-    private initialized;
-    private rtlManager?;
-    private logger;
-    /**
-     * Create a new ThemeManager instance
-     *
-     * @param config - Theme manager configuration
-     */
-    constructor(config: ThemeManagerConfig);
-    /**
-     * Initialize the theme manager
-     */
-    private initialize;
-    /**
-     * Get default theme
-     */
-    private getDefaultTheme;
-    /**
-     * Set theme
-     */
-    setTheme(theme: string | Theme, options?: ThemeLoadOptions): Promise<void>;
-    /**
-     * Get current theme
-     */
-    getTheme(): string;
-    /**
-     * Get active theme object (for JS themes)
-     */
-    getActiveTheme(): Theme | null;
-    /**
-     * Get available themes
-     */
-    getAvailableThemes(): ThemeMetadata[];
-    /**
-     * Check if theme is loaded
-     */
-    isThemeLoaded(themeName: string): boolean;
-    /**
-     * Preload theme
-     */
-    preloadTheme(themeName: string): Promise<void>;
-    /**
-     * Add event listener
-     */
-    on(event: 'themeChange', callback: ThemeChangeCallback): void;
-    on(event: 'themeLoad', callback: ThemeLoadCallback): void;
-    on(event: 'themeError', callback: ThemeErrorCallback): void;
-    /**
-     * Remove event listener
-     */
-    off(event: 'themeChange', callback: ThemeChangeCallback): void;
-    off(event: 'themeLoad', callback: ThemeLoadCallback): void;
-    off(event: 'themeError', callback: ThemeErrorCallback): void;
-    /**
-     * Emit theme change event
-     */
-    private emitThemeChange;
-    /**
-     * Emit theme load event
-     */
-    private emitThemeLoad;
-    /**
-     * Emit theme error event
-     */
-    private emitThemeError;
-    /**
-     * Get engine instance (for advanced usage)
-     */
-    getEngine(): ThemeEngine;
-    /**
-     * Get RTL manager
-     */
-    getRTLManager(): RTLManager | undefined;
-    /**
-     * Set RTL direction
-     */
-    setDirection(direction: 'ltr' | 'rtl'): void;
-    /**
-     * Get current direction
-     */
-    getDirection(): 'ltr' | 'rtl';
-    /**
-     * Destroy theme manager
-     */
-    destroy(): void;
-}
-
-/**
- * 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 manager configuration options
- */
-interface ThemeManagerConfig {
-    /** Available themes metadata */
-    themes: Record<string, ThemeMetadata>;
-    /** Default theme to use */
-    defaultTheme?: string | Theme;
-    /** Base path for theme CSS files */
-    basePath?: string;
-    /** CDN path for theme CSS files (optional) */
-    cdnPath?: string | null;
-    /** Themes to preload on initialization */
-    preload?: string[];
-    /** Enable lazy loading of themes */
-    lazy?: boolean;
-    /** localStorage key for persistence */
-    storageKey?: string;
-    /** Data attribute name for theme */
-    dataAttribute?: string;
-    /** Enable persistence */
-    enablePersistence?: boolean;
-    /** Custom CSS file extension */
-    cssExtension?: string;
-    /** Use minified CSS files */
-    useMinified?: boolean;
-    /** Callback when theme changes */
-    onThemeChange?: (theme: string | Theme) => void;
-    /** Callback when theme load fails */
-    onError?: (error: Error, themeName: string) => void;
-    /** RTL configuration */
-    rtl?: RTLConfig;
-}
-/**
- * Theme change event payload
- */
-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';
-}
-/**
- * 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[];
-}
-/**
- * Theme change callback function
- */
-type ThemeChangeCallback = (event: ThemeChangeEvent) => void;
-/**
- * Theme load callback function
- */
-type ThemeLoadCallback = (themeName: string) => void;
-/**
- * Theme error callback function
- */
-type ThemeErrorCallback = (error: Error, themeName: string) => void;
-/**
- * React hook return type for useTheme
- */
-interface UseThemeReturn {
-    /** Current theme name */
-    theme: string;
-    /** Current active theme object (for JS themes) */
-    activeTheme: Theme | null;
-    /** Function to change theme */
-    setTheme: (theme: string | Theme, 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
- */
-interface ComponentThemeOverride {
-    /** CSS variable overrides for the component */
-    cssVars?: Record<string, string | number>;
-    /** Default prop overrides */
-    defaultProps?: Record<string, any>;
-    /** Part-specific overrides */
-    parts?: Record<string, {
-        cssVars?: Record<string, string | number>;
-        className?: string;
-    }>;
-    /** Variant overrides */
-    variants?: Record<string, {
-        cssVars?: Record<string, string | number>;
-        className?: string;
-    }>;
-    /** Additional className for the component */
-    className?: string;
-}
-/**
- * Theme component overrides for all components
- */
-interface ThemeComponentOverrides {
-    Button?: ComponentThemeOverride;
-    Card?: ComponentThemeOverride;
-    Input?: ComponentThemeOverride;
-    Modal?: ComponentThemeOverride;
-    Dropdown?: ComponentThemeOverride;
-    Badge?: ComponentThemeOverride;
-    Tabs?: ComponentThemeOverride;
-    Progress?: ComponentThemeOverride;
-    Tooltip?: ComponentThemeOverride;
-    Select?: ComponentThemeOverride;
-    Checkbox?: ComponentThemeOverride;
-    Radio?: ComponentThemeOverride;
-    Textarea?: ComponentThemeOverride;
-    FormGroup?: ComponentThemeOverride;
-    Navbar?: ComponentThemeOverride;
-    Accordion?: ComponentThemeOverride;
-    DataTable?: ComponentThemeOverride;
-    Avatar?: ComponentThemeOverride;
-    List?: ComponentThemeOverride;
-    Popover?: ComponentThemeOverride;
-    Messages?: ComponentThemeOverride;
-    Callout?: ComponentThemeOverride;
-    Spinner?: ComponentThemeOverride;
-    [key: string]: ComponentThemeOverride | undefined;
-}
-/**
- * Theme provider props
- */
-interface ThemeProviderProps {
-    /** Child components */
-    children: React.ReactNode;
-    /** Default theme */
-    defaultTheme?: string | Theme;
-    /** Available themes */
-    themes?: Record<string, ThemeMetadata>;
-    /** Base path for theme CSS */
-    basePath?: string;
-    /** CDN path for theme CSS */
-    cdnPath?: string | null;
-    /** Themes to preload */
-    preload?: string[];
-    /** Enable lazy loading */
-    lazy?: boolean;
-    /** localStorage key */
-    storageKey?: string;
-    /** Data attribute name */
-    dataAttribute?: string;
-    /** Enable persistence */
-    enablePersistence?: boolean;
-    /** Use minified CSS */
-    useMinified?: boolean;
-    /** Callback when theme changes */
-    onThemeChange?: (theme: string | Theme) => void;
-    /** Callback on error */
-    onError?: (error: Error, themeName: string) => void;
+    /** Callback when theme changes */
+    onThemeChange?: (theme: string | Theme | DesignTokens) => void;
+    /** Callback on error */
+    onError?: (error: Error, themeName: string) => void;
 }
 /**
  * Theme context value
@@ -13523,10 +12795,10 @@ interface ThemeContextValue {
     theme: string;
     /** Current active theme object (for JS themes) */
     activeTheme: Theme | null;
-    /** Set theme function */
-    setTheme: (theme: string | Theme, options?: ThemeLoadOptions) => Promise<void>;
+    /** Set theme function (supports string, Theme, or DesignTokens) */
+    setTheme: (theme: string | Theme | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
     /** Available themes */
-    availableThemes: ThemeMetadata[];
+    availableThemes: ThemeMetadata$1[];
     /** Loading state */
     isLoading: boolean;
     /** Error state */
@@ -13535,8 +12807,6 @@ interface ThemeContextValue {
     isThemeLoaded: (themeName: string) => boolean;
     /** Preload theme */
     preloadTheme: (themeName: string) => Promise<void>;
-    /** Theme manager instance */
-    themeManager: ThemeManager;
 }
 /**
  * Color palette configuration for a single color
@@ -13755,7 +13025,7 @@ interface ThemeCustomProperties {
  * Theme configuration options for createTheme
  * Extends ThemeMetadata to support both CSS and JS theme properties
  */
-interface ThemeOptions extends Partial<ThemeMetadata> {
+interface ThemeOptions extends Partial<ThemeMetadata$1> {
     /** Color palette configuration */
     palette?: PaletteOptions;
     /** Typography configuration */
@@ -13779,7 +13049,7 @@ interface ThemeOptions extends Partial<ThemeMetadata> {
  * Complete theme object with computed values
  * Generated by createTheme function
  */
-interface Theme extends ThemeMetadata {
+interface Theme extends ThemeMetadata$1 {
     /** Color palette with computed values */
     palette: {
         primary: PaletteColor;
@@ -13846,30 +13116,392 @@ interface Theme extends ThemeMetadata {
 }
 
 /**
- * Theme Provider
+ * CSS Variable Generator
+ *
+ * Generates CSS custom properties from design tokens.
+ */
+
+/**
+ * Options for CSS variable generation
+ */
+interface GenerateCSSVariablesOptions {
+    /** CSS selector for the variables (default: ':root') */
+    selector?: string;
+    /** Prefix for CSS variables (default: 'atomix') */
+    prefix?: string;
+}
+/**
+ * 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}"
+ * ```
+ */
+declare function generateCSSVariables(tokens: DesignTokens, options?: GenerateCSSVariablesOptions): string;
+/**
+ * Generate CSS variables with custom selector
+ *
+ * Useful for theme-specific selectors like `[data-theme="dark"]`
  *
- * React context provider for theme management
- * Updated to use the new ThemeEngine architecture
+ * @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'
+ * );
+ * ```
+ */
+declare function generateCSSVariablesForSelector(tokens: DesignTokens, selector: string, prefix?: string): string;
+
+/**
+ * Core Theme Functions
+ *
+ * Simplified 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.
  */
 
 /**
- * ThemeProvider component
+ * Create theme CSS from tokens or Theme object
  *
- * Provides theme context to child components and manages theme state.
- * Uses the new ThemeEngine-based ThemeManager.
+ * **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
- * ```tsx
- * import { ThemeProvider } from '@shohojdhara/atomix/theme';
+ * ```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);
+ *
+ * // With custom options
+ * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
+ * ```
+ */
+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',
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * Create a theme object with computed values
+ *
+ * @param options - Theme configuration options
+ * @returns Complete theme object
+ */
+declare function createThemeObject(...options: ThemeOptions[]): Theme;
+
+/**
+ * Theme Composition Utilities
+ *
+ * Simplified utilities for composing, merging, and extending themes.
+ */
+
+/**
+ * Deep merge multiple objects
+ * Later objects override earlier ones
+ */
+declare function deepMerge<T extends Record<string, unknown>>(...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
+ *
+ * @param baseTheme - Base theme to extend (can be Theme or ThemeOptions)
+ * @param extension - Theme options to extend with
+ * @returns New theme with extended options
+ *
+ * @example
+ * ```typescript
+ * const base = createTheme({ palette: { primary: { main: '#000' } } });
+ * const extended = extendTheme(base, {
+ *   palette: { secondary: { main: '#fff' } }
+ * });
+ * ```
+ */
+declare function extendTheme(baseTheme: Theme | ThemeOptions, extension: ThemeOptions): Theme;
+
+/**
+ * Theme Metadata interface
+ */
+interface ThemeMetadata {
+    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>;
+/**
+ * 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): 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 | undefined;
+/**
+ * Get all registered theme metadata
+ * @param registry - Theme registry object
+ */
+declare function getAllThemes(registry: ThemeRegistry): ThemeMetadata[];
+/**
+ * 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;
+
+/**
+ * Naming Utilities
+ *
+ * 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;
+
+/**
+ * Component Theming Utilities
+ *
+ * Provides consistent patterns for applying theme values to components
+ */
+
+interface ComponentThemeOptions {
+    component: string;
+    variant?: string;
+    size?: string;
+    theme: Theme;
+}
+/**
+ * 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 theme
+ */
+declare function generateComponentCSSVars(component: string, theme: Theme, variant?: string, size?: string): Record<string, string>;
+/**
+ * Apply consistent theme to component style object
+ */
+declare function applyComponentTheme(component: string, style?: React.CSSProperties, variant?: string, size?: string, theme?: Theme): React.CSSProperties;
+/**
+ * Create a hook for consistent component theming
+ */
+declare function useComponentTheme(component: string, variant?: string, size?: string, theme?: Theme): (property: string) => string;
+
+/**
+ * CSS Injection Utilities
+ *
+ * Inject CSS into HTML head via <style> element.
+ */
+/**
+ * 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;
+
+/**
+ * Theme Configuration Loader
+ *
+ * Provides functions to load theme configurations from atomix.config.ts
+ * Includes both sync and async versions, with automatic fallbacks
+ */
+
+/**
+ * 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;
+/**
+ * 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 loadThemeFromConfig(options?: {
+    configPath?: string;
+    required?: boolean;
+}): Promise<DesignTokens>;
+
+/**
+ * Theme Provider
+ *
+ * React context provider for theme management with separated concerns
+ * Updated to use the new simplified theme system
+ */
+
+/**
+ * Theme Provider
+ *
+ * React context provider for theme management with separated concerns.
+ * Simplified version focusing on core functionality:
+ * - String-based themes (CSS files)
+ * - JS Theme objects
+ * - Persistence via localStorage
  *
- * function App() {
- *   return (
- *     <ThemeProvider>
- *       <YourApp />
- *     </ThemeProvider>
- *   );
- * }
- * ```
+ * Falls back to 'default' theme if no configuration is found.
  */
 declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
 
@@ -13877,7 +13509,6 @@ declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
  * useTheme Hook
  *
  * React hook for accessing theme context
- * Updated to work with new ThemeEngine architecture
  */
 
 /**
@@ -13903,6 +13534,39 @@ declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
  */
 declare function useTheme(): UseThemeReturn;
 
+/**
+ * Standardized hook for accessing theme tokens in components
+ *
+ * Provides consistent access to theme values across all components
+ * using either CSS custom properties or theme object values.
+ */
+type ThemeTokens$1 = {
+    theme: string;
+    activeTheme: Theme | null;
+    getToken: (tokenName: string, fallback?: string) => string;
+    getThemeValue: (path: string, fallback?: any) => any;
+    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;
+
 /**
  * Theme context with default values
  */
@@ -13957,597 +13621,1106 @@ declare class ThemeErrorBoundary extends Component<ThemeErrorBoundaryProps, Them
 }
 
 /**
- * createTheme - Create a theme object with computed values
+ * Theme Applicator
  *
- * Similar to Material-UI's createTheme, this function accepts theme configuration
- * options and returns a complete theme object with computed values.
+ * Applies theme configurations to the DOM, including CSS variables,
+ * component overrides, typography, spacing, and color palettes.
  *
- * @example
- * ```typescript
- * const theme = createTheme({
- *   palette: {
- *     primary: { main: '#7AFFD7' },
- *     secondary: { main: '#FF5733' },
- *   },
- *   typography: {
- *     fontFamily: 'Inter, sans-serif',
- *   },
- * });
- * ```
+ * Uses the unified theme system for CSS generation and injection.
  */
 
 /**
- * Create a theme object with computed values
+ * Theme applicator class for runtime theme application
  *
- * @param options - Theme configuration options
- * @returns Complete theme object
+ * Uses the unified theme system for efficient CSS variable generation and injection.
+ */
+declare class ThemeApplicator {
+    private root;
+    private styleId;
+    constructor(root?: HTMLElement);
+    /**
+     * 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.
+     */
+    applyTheme(theme: Theme | DesignTokens): void;
+    /**
+     * 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.
+     */
+    private applyDesignTokens;
+    /**
+     * Check if object is DesignTokens
+     */
+    private isDesignTokens;
+    /**
+     * Apply global CSS variables (for component overrides)
+     */
+    private applyGlobalCSSVars;
+    /**
+     * Apply component-level overrides
+     */
+    private applyComponentOverrides;
+    /**
+     * Apply override for a specific component
+     */
+    private applyComponentOverride;
+    /**
+     * 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;
+}
+/**
+ * Get or create global theme applicator
  */
-declare function createTheme(...options: ThemeOptions[]): Theme;
+declare function getThemeApplicator(): ThemeApplicator;
+/**
+ * Apply theme using global applicator
+ */
+declare function applyTheme(theme: Theme | DesignTokens): void;
 
 /**
- * Create a theme from Atomix configuration
- *
- * This function converts atomix.config.ts format to a theme object
- * that can be used with ThemeProvider.
+ * Theme Preview Component
  *
- * @param config - Atomix configuration object
- * @returns Theme object ready for use
+ * 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
  *
- * @example
- * ```typescript
- * import { createThemeFromConfig } from '@shohojdhara/atomix/theme';
- * import config from './atomix.config';
+ * Renders a preview of a theme with sample components
+ */
+declare const ThemePreview: React__default.FC<ThemePreviewProps>;
+
+/**
+ * Theme Inspector Component
  *
- * const theme = createThemeFromConfig(config);
- * ```
+ * React component for inspecting and debugging themes
+ * Enhanced with search/filter and copy path functionality
  */
-declare function createThemeFromConfig(config: AtomixConfig): Theme;
 
 /**
- * Theme Tools for Library Users
+ * 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
  *
- * Developer-friendly utilities for working with Atomix themes
+ * Provides detailed inspection and debugging information for themes
  */
+declare const ThemeInspector: React__default.FC<ThemeInspectorProps>;
 
 /**
- * Quick theme creator with sensible defaults
+ * Theme Comparator Component
+ *
+ * React component for comparing two themes side-by-side
+ * Enhanced with search/filter and improved visual diff styling
  */
-declare function quickTheme(name: string, primaryColor: string, secondaryColor?: string): Theme;
+
 /**
- * Create a dark theme variant from a light theme
+ * Theme comparator props
  */
-declare function createDarkVariant(lightTheme: Theme): Theme;
+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;
+}
 /**
- * Validate theme structure
+ * Theme Comparator Component
+ *
+ * Compares two themes and highlights differences
  */
-declare function validateTheme(theme: Theme): {
-    valid: boolean;
-    errors: string[];
-};
+declare const ThemeComparator: React__default.FC<ThemeComparatorProps>;
+
 /**
- * Generate CSS string from theme
+ * Theme Live Editor Component
+ *
+ * React component for live editing themes in development
+ * Enhanced with undo/redo, keyboard shortcuts, resizable layout, and better color pickers
  */
-declare function themeToCSS(theme: Theme, selector?: string): string;
+
 /**
- * Export theme as JSON
+ * Live editor props
  */
-declare function exportTheme(theme: Theme): string;
+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;
+}
 /**
- * Import theme from JSON
+ * Theme Live Editor Component
+ *
+ * Allows live editing of theme properties with instant preview
  */
-declare function importTheme(json: string): Theme;
+declare const ThemeLiveEditor: React__default.FC<ThemeLiveEditorProps>;
 
 /**
- * Theme CLI
+ * Theme Validator
  *
- * Command-line interface for theme management
+ * Runtime theme validation including color contrast and accessibility checks
  */
+
 /**
- * CLI command interface
+ * Validation result
  */
-interface CLICommand {
-    name: string;
-    description: string;
-    options?: Record<string, string>;
-    handler: (args: string[], options: Record<string, any>) => Promise<void> | void;
+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 CLI
+ * Theme Validator
  *
- * Command-line interface for theme operations
+ * Validates themes for correctness and accessibility
  */
-declare class ThemeCLI {
-    private commands;
-    constructor();
+declare class ThemeValidator {
+    /**
+     * Validate theme
+     */
+    validate(theme: Theme, metadata?: ThemeMetadata$1): ValidationResult;
     /**
-     * Register default commands
+     * Validate palette
      */
-    private registerDefaultCommands;
+    private validatePalette;
     /**
-     * Register a command
+     * Validate typography
      */
-    register(command: CLICommand): void;
+    private validateTypography;
     /**
-     * Run CLI with arguments
+     * Validate spacing
      */
-    run(args: string[]): Promise<void>;
+    private validateSpacing;
     /**
-     * Parse command arguments
+     * Validate breakpoints
      */
-    private parseArgs;
+    private validateBreakpoints;
     /**
-     * Handle validate command
+     * Check color contrast ratio
      */
-    private handleValidate;
+    private checkContrast;
     /**
-     * Handle list command
+     * Check if color is valid
      */
-    private handleList;
+    private isValidColor;
     /**
-     * Handle inspect command
+     * Validate transitions
      */
-    private handleInspect;
+    private validateTransitions;
     /**
-     * Handle compare command
+     * Validate z-index
      */
-    private handleCompare;
+    private validateZIndex;
     /**
-     * Handle export command
+     * Validate border radius
      */
-    private handleExport;
+    private validateBorderRadius;
     /**
-     * Handle help command
+     * Validate custom properties
      */
-    private handleHelp;
+    private validateCustom;
+}
+
+/**
+ * useHistory Hook
+ *
+ * React hook for managing undo/redo history
+ */
+interface UseHistoryOptions {
+    /** Maximum number of history entries (default: 50) */
+    maxHistorySize?: number;
+    /** Initial state */
+    initialState?: any;
+}
+interface UseHistoryReturn<T> {
+    /** Current state */
+    state: T;
+    /** Update state and add to history */
+    setState: (newState: T) => void;
+    /** Undo last change */
+    undo: () => void;
+    /** Redo last undone change */
+    redo: () => void;
+    /** Check if undo is available */
+    canUndo: boolean;
+    /** Check if redo is available */
+    canRedo: boolean;
+    /** Clear history */
+    clearHistory: () => void;
+    /** Get history statistics */
+    getHistoryStats: () => {
+        currentIndex: number;
+        totalEntries: number;
+    };
+}
+/**
+ * useHistory hook
+ *
+ * Provides undo/redo functionality for state management
+ *
+ * @example
+ * ```tsx
+ * const { state, setState, undo, redo, canUndo, canRedo } = useHistory({
+ *   initialState: theme,
+ *   maxHistorySize: 50
+ * });
+ * ```
+ */
+declare function useHistory<T>(options?: UseHistoryOptions): UseHistoryReturn<T>;
+
+/**
+ * Theme Adapter
+ *
+ * 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
+ *
+ * @param tokens - DesignTokens object
+ * @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
+ *
+ * Utilities for generating and managing CSS custom properties from SCSS tokens
+ * and component configurations.
+ */
+/**
+ * Configuration for generating CSS variables for a component
+ */
+interface CSSVariableConfig {
+    /** Component name (e.g., 'button', 'card') */
+    component: string;
+    /** Base properties for the component */
+    properties: Record<string, string | number>;
+    /** Part-specific properties (e.g., icon, label) */
+    parts?: Record<string, Record<string, string | number>>;
+    /** State-specific properties (e.g., hover, active, disabled) */
+    states?: Record<string, Record<string, string | number>>;
+    /** Variant-specific properties (e.g., primary, secondary) */
+    variants?: Record<string, Record<string, string | number>>;
+}
+/**
+ * CSS variable naming options
+ */
+interface CSSVariableNamingOptions {
+    /** Prefix for all variables (default: 'atomix') */
+    prefix?: string;
+    /** Separator between parts (default: '-') */
+    separator?: string;
+    /** Whether to include component name in variable (default: true) */
+    includeComponent?: boolean;
 }
 /**
- * Create CLI instance
+ * Map SCSS tokens to CSS custom properties
+ *
+ * @example
+ * const tokens = { '$primary-color': '#7AFFD7', '$spacing-md': '16px' }
+ * const vars = mapSCSSTokensToCSSVars(tokens)
+ * // Returns: { '--primary-color': '#7AFFD7', '--spacing-md': '16px' }
  */
-declare function createCLI(): ThemeCLI;
+declare function mapSCSSTokensToCSSVars(tokens: Record<string, any>, options?: CSSVariableNamingOptions): Record<string, string>;
 /**
- * Run CLI with process arguments
+ * Apply CSS variables to an element
+ *
+ * @param element - Target element (defaults to document.documentElement)
+ * @param vars - CSS variables to apply
  */
-declare function runCLI(): void;
-
+declare function applyCSSVariables(vars: Record<string, string | number>, element?: HTMLElement): void;
 /**
- * Theme Preview Component
+ * Remove CSS variables from an element
  *
- * React component for previewing themes in development
+ * @param varNames - Variable names to remove
+ * @param element - Target element (defaults to document.documentElement)
  */
-
+declare function removeCSSVariables(varNames: string[], element?: HTMLElement): void;
 /**
- * Theme preview props
+ * Get CSS variable value from an element
+ *
+ * @param varName - Variable name to get
+ * @param element - Target element (defaults to document.documentElement)
+ * @returns Variable value or null if not found
  */
-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;
-}
+declare function getCSSVariable(varName: string, element?: HTMLElement): string | null;
 /**
- * Theme Preview Component
+ * Convert CSS variable object to inline style object
  *
- * Renders a preview of a theme with sample components
+ * @example
+ * const vars = { '--atomix-button-bg': '#000' }
+ * const style = cssVarsToStyle(vars)
+ * // Returns: { '--atomix-button-bg': '#000' } as React.CSSProperties
  */
-declare const ThemePreview: React__default.FC<ThemePreviewProps>;
-
+declare function cssVarsToStyle(vars: Record<string, string | number>): React.CSSProperties;
 /**
- * Theme Inspector Component
- *
- * React component for inspecting and debugging themes
+ * Merge multiple CSS variable objects
+ * Later objects override earlier ones
  */
-
+declare function mergeCSSVars(...varObjects: Array<Record<string, string | number> | undefined>): Record<string, string | number>;
 /**
- * Theme inspector props
+ * Validate CSS variable name format
  */
-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;
-}
+declare function isValidCSSVariableName(name: string): boolean;
 /**
- * Theme Inspector Component
+ * Extract component name from CSS variable name
  *
- * Provides detailed inspection and debugging information for themes
+ * @example
+ * extractComponentName('--atomix-button-bg')
+ * // Returns: 'button'
  */
-declare const ThemeInspector: React__default.FC<ThemeInspectorProps>;
+declare function extractComponentName(varName: string, prefix?: string): string | null;
 
 /**
- * Theme Comparator Component
+ * Theme Helper Functions
  *
- * React component for comparing two themes side-by-side
+ * Utility functions for working with themes and DesignTokens
  */
 
 /**
- * Theme comparator props
+ * 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);
+ * ```
  */
-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;
-}
+declare function getDesignTokensFromTheme(theme: Theme | null): DesignTokens | null;
 /**
- * Theme Comparator Component
+ * Check if a value is DesignTokens
  *
- * Compares two themes and highlights differences
+ * Type guard to check if an object is DesignTokens format.
+ *
+ * @param value - Value to check
+ * @returns True if value is DesignTokens
  */
-declare const ThemeComparator: React__default.FC<ThemeComparatorProps>;
-
+declare function isDesignTokens(value: unknown): value is DesignTokens;
 /**
- * Theme Live Editor Component
+ * Check if a value is a Theme object
  *
- * React component for live editing themes in development
+ * 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;
 
 /**
- * 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
+ * RTL (Right-to-Left) Support Utilities
  *
- * Allows live editing of theme properties with instant preview
+ * Provides utilities for managing RTL text direction in themes
  */
-declare const ThemeLiveEditor: React__default.FC<ThemeLiveEditorProps>;
-
 /**
- * Theme Applicator
- *
- * Applies theme configurations to the DOM, including CSS variables,
- * component overrides, typography, spacing, and color palettes.
+ * RTL configuration options
  */
-
+interface RTLConfig {
+    /** Enable RTL mode */
+    enabled: boolean;
+    /** Current direction ('ltr' | 'rtl') */
+    direction: 'ltr' | 'rtl';
+    /** Data attribute name for direction */
+    dataAttribute?: string;
+    /** Auto-detect from locale */
+    autoDetect?: boolean;
+    /** Locale code (e.g., 'ar', 'he', 'fa') */
+    locale?: string;
+}
 /**
- * Theme applicator class for runtime theme application
+ * RTL Manager
+ *
+ * Manages RTL text direction for the theme system
  */
-declare class ThemeApplicator {
-    private appliedVars;
-    private root;
-    constructor(root?: HTMLElement);
+declare class RTLManager {
+    private config;
+    private listeners;
+    constructor(config?: Partial<RTLConfig>);
     /**
-     * Apply a complete theme configuration
+     * Detect locale from browser
      */
-    applyTheme(theme: Theme): void;
+    private detectLocale;
     /**
-     * Apply global CSS variables
+     * Check if locale is RTL
      */
-    private applyGlobalCSSVars;
+    isRTLLocale(locale: string): boolean;
     /**
-     * Apply typography system
+     * Get current direction
      */
-    private applyTypography;
+    getDirection(): 'ltr' | 'rtl';
     /**
-     * Apply spacing system
+     * Check if RTL is enabled
      */
-    private applySpacing;
+    isEnabled(): boolean;
     /**
-     * Apply color palette
+     * Set direction
      */
-    private applyPalette;
+    setDirection(direction: 'ltr' | 'rtl'): void;
     /**
-     * Apply component-level overrides
+     * Toggle direction
      */
-    private applyComponentOverrides;
+    toggleDirection(): 'ltr' | 'rtl';
     /**
-     * Apply override for a specific component
+     * Enable RTL
      */
-    private applyComponentOverride;
+    enable(): void;
     /**
-     * Clear all applied CSS variables
+     * Disable RTL
      */
-    private clearAppliedVars;
+    disable(): void;
     /**
-     * Get all currently applied variables
+     * Set locale and auto-adjust direction
      */
-    getAppliedVars(): string[];
+    setLocale(locale: string): void;
     /**
-     * Remove theme application
+     * Get current locale
      */
-    removeTheme(): void;
+    getLocale(): string | undefined;
     /**
-     * Update specific CSS variables without clearing all
+     * Apply direction to DOM
      */
-    updateCSSVars(vars: Record<string, string | number>): void;
+    private applyDirection;
+    /**
+     * Add direction change listener
+     */
+    onDirectionChange(callback: (direction: 'ltr' | 'rtl') => void): () => void;
+    /**
+     * Notify listeners of direction change
+     */
+    private notifyListeners;
+    /**
+     * Get RTL-aware value
+     *
+     * Returns different values based on direction
+     */
+    getValue<T>(ltrValue: T, rtlValue: T): T;
+    /**
+     * Get RTL-aware CSS property
+     *
+     * Returns appropriate CSS property based on direction
+     */
+    getCSSProperty(property: string): string;
+    /**
+     * Destroy RTL manager
+     */
+    destroy(): void;
+}
+
+/**
+ * Theme System Exports
+ *
+ * Unified theme system - handles both DesignTokens and Theme objects.
+ *
+ * @example
+ * ```typescript
+ * import { createTheme, injectTheme } from '@shohojdhara/atomix/theme';
+ *
+ * // Using DesignTokens (recommended - flat structure)
+ * const css = createTheme({ 'primary': '#7AFFD7', 'spacing-4': '1rem' });
+ * injectTheme(css);
+ *
+ * // Or use with ThemeProvider
+ * import { ThemeProvider } from '@shohojdhara/atomix/theme';
+ * const tokens = { 'primary': '#7c3aed' };
+ * <ThemeProvider defaultTheme={tokens}>...</ThemeProvider>
+ * ```
+ */
+
+/**
+ * Inject theme CSS into DOM
+ */
+declare function injectTheme(css: string, id?: string): void;
+/**
+ * Remove theme from DOM
+ */
+declare function removeTheme(id?: string): void;
+/**
+ * Save theme to CSS file
+ */
+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;
+type themeImport_Theme = Theme;
+type themeImport_ThemeApplicator = ThemeApplicator;
+declare const themeImport_ThemeApplicator: typeof ThemeApplicator;
+type themeImport_ThemeChangeEvent = ThemeChangeEvent;
+declare const themeImport_ThemeComparator: typeof ThemeComparator;
+type themeImport_ThemeComparatorProps = ThemeComparatorProps;
+type themeImport_ThemeComponentOverrides = ThemeComponentOverrides;
+declare const themeImport_ThemeContext: typeof ThemeContext;
+type themeImport_ThemeContextValue = ThemeContextValue;
+type themeImport_ThemeErrorBoundary = ThemeErrorBoundary;
+declare const themeImport_ThemeErrorBoundary: typeof ThemeErrorBoundary;
+type themeImport_ThemeErrorBoundaryProps = ThemeErrorBoundaryProps;
+declare const themeImport_ThemeInspector: typeof ThemeInspector;
+type themeImport_ThemeInspectorProps = ThemeInspectorProps;
+declare const themeImport_ThemeLiveEditor: typeof ThemeLiveEditor;
+type themeImport_ThemeLiveEditorProps = ThemeLiveEditorProps;
+type themeImport_ThemeLoadOptions = ThemeLoadOptions;
+declare const themeImport_ThemePreview: typeof ThemePreview;
+type themeImport_ThemePreviewProps = ThemePreviewProps;
+declare const themeImport_ThemeProvider: typeof ThemeProvider;
+type themeImport_ThemeProviderProps = ThemeProviderProps;
+type themeImport_ThemeValidationResult = ThemeValidationResult;
+type themeImport_ThemeValidator = ThemeValidator;
+declare const themeImport_ThemeValidator: typeof ThemeValidator;
+type themeImport_UseHistoryOptions = UseHistoryOptions;
+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_camelToKebab: typeof camelToKebab;
+declare const themeImport_clearThemes: typeof clearThemes;
+declare const themeImport_createDesignTokensFromTheme: typeof createDesignTokensFromTheme;
+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_getComponentThemeValue: typeof getComponentThemeValue;
+declare const themeImport_getDesignTokensFromTheme: typeof getDesignTokensFromTheme;
+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_saveTheme: typeof saveTheme;
+declare const themeImport_themePropertyToCSSVar: typeof themePropertyToCSSVar;
+declare const themeImport_themeToDesignTokens: typeof themeToDesignTokens;
+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_ThemeValidator as ThemeValidator, themeImport_applyCSSVariables as applyCSSVariables, themeImport_applyComponentTheme as applyComponentTheme, themeImport_applyTheme as applyTheme, themeImport_camelToKebab as camelToKebab, themeImport_clearThemes as clearThemes, themeImport_createDesignTokensFromTheme as createDesignTokensFromTheme, themeImport_createTheme as createTheme, themeImport_createThemeObject as createThemeObject, 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_designTokensToTheme as designTokensToTheme, 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_getDesignTokensFromTheme as getDesignTokensFromTheme, 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_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_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_themeToDesignTokens as themeToDesignTokens, 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 };
 }
+
 /**
- * Get or create global theme applicator
- */
-declare function getThemeApplicator(): ThemeApplicator;
-/**
- * Apply theme using global applicator
- */
-declare function applyTheme(theme: Theme): void;
-/**
- * Remove theme using global applicator
+ * Component Customization Hook
+ *
+ * Merges theme-level component overrides with component-level props
+ * for comprehensive customization support.
  */
-declare function removeTheme(): void;
 
 /**
- * CSS Variable Mapper
- *
- * Utilities for generating and managing CSS custom properties from SCSS tokens
- * and component configurations.
+ * Component names that support customization
  */
+type ComponentName = keyof ComponentPartsMap;
 /**
- * Configuration for generating CSS variables for a component
+ * Props for a customizable component
  */
-interface CSSVariableConfig {
-    /** Component name (e.g., 'button', 'card') */
-    component: string;
-    /** Base properties for the component */
-    properties: Record<string, string | number>;
-    /** Part-specific properties (e.g., icon, label) */
-    parts?: Record<string, Record<string, string | number>>;
-    /** State-specific properties (e.g., hover, active, disabled) */
-    states?: Record<string, Record<string, string | number>>;
-    /** Variant-specific properties (e.g., primary, secondary) */
-    variants?: Record<string, Record<string, string | number>>;
+interface CustomizableComponentProps<T extends ComponentName> {
+    /** CSS variable overrides */
+    cssVars?: T extends keyof ComponentCSSVariables ? Partial<Record<ComponentCSSVariables[T], string | number>> : Record<string, string | number>;
+    /** Part-based styling */
+    parts?: ComponentPartsMap[T];
+    /** Additional className */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
 }
 /**
- * CSS variable naming options
+ * Result of component customization
  */
-interface CSSVariableNamingOptions {
-    /** Prefix for all variables (default: 'atomix') */
-    prefix?: string;
-    /** Separator between parts (default: '-') */
-    separator?: string;
-    /** Whether to include component name in variable (default: true) */
-    includeComponent?: boolean;
+interface ComponentCustomization<T extends ComponentName> {
+    /** Merged CSS variables */
+    cssVars: Record<string, string | number>;
+    /** Merged part styles */
+    parts: ComponentPartsMap[T];
+    /** Merged className */
+    className: string;
+    /** Merged inline styles */
+    style: React.CSSProperties;
+    /** CSS variable style object for inline application */
+    cssVarStyle: React.CSSProperties;
 }
 /**
- * Generate CSS variable name from parts
+ * Hook to merge theme overrides with component props
  *
  * @example
- * generateCSSVariableName('button', 'bg', { prefix: 'atomix' })
- * // Returns: '--atomix-button-bg'
+ * function Button(props: ButtonProps) {
+ *   const customization = useComponentCustomization('Button', props);
+ *
+ *   return (
+ *     <button
+ *       className={customization.className}
+ *       style={customization.style}
+ *     >
+ *       {props.children}
+ *     </button>
+ *   );
+ * }
  */
-declare function generateCSSVariableName(component: string, property: string, options?: CSSVariableNamingOptions): string;
+declare function useComponentCustomization<T extends ComponentName>(component: T, props: CustomizableComponentProps<T>): ComponentCustomization<T>;
 /**
- * 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' }
+ * Hook to get default props from theme
  */
-declare function generateComponentCSSVars(config: CSSVariableConfig, options?: CSSVariableNamingOptions): Record<string, string>;
+declare function useComponentDefaultProps<T extends ComponentName>(component: T): Record<string, any>;
 /**
- * Map SCSS tokens to CSS custom properties
- *
- * @example
- * const tokens = { '$primary-color': '#7AFFD7', '$spacing-md': '16px' }
- * const vars = mapSCSSTokensToCSSVars(tokens)
- * // Returns: { '--primary-color': '#7AFFD7', '--spacing-md': '16px' }
+ * Hook to merge default props with provided props
  */
-declare function mapSCSSTokensToCSSVars(tokens: Record<string, any>, options?: CSSVariableNamingOptions): Record<string, string>;
+declare function useMergedProps<T extends Record<string, any>>(defaultProps: T, props: Partial<T>): T;
 /**
- * Apply CSS variables to an element
+ * Utility to apply CSS variables to style object
+ */
+declare function applyCSSVarsToStyle(cssVars: Record<string, string | number>, baseStyle?: React.CSSProperties): React.CSSProperties;
+
+/**
+ * Atomix Config Loader
  *
- * @param element - Target element (defaults to document.documentElement)
- * @param vars - CSS variables to apply
+ * Helper functions to load atomix.config.ts from external projects.
+ * Similar to how Tailwind loads tailwind.config.js
  */
-declare function applyCSSVariables(vars: Record<string, string | number>, element?: HTMLElement): void;
+
 /**
- * Remove CSS variables from an element
+ * Load Atomix configuration from project root
  *
- * @param varNames - Variable names to remove
- * @param element - Target element (defaults to document.documentElement)
+ * 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 removeCSSVariables(varNames: string[], element?: HTMLElement): void;
+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;
 /**
- * Get CSS variable value from an element
+ * Resolve config path
  *
- * @param varName - Variable name to get
- * @param element - Target element (defaults to document.documentElement)
- * @returns Variable value or null if not found
+ * 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 getCSSVariable(varName: string, element?: HTMLElement): string | null;
+declare function resolveConfigPath(): string | null;
+
 /**
- * Convert CSS variable object to inline style object
+ * 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
- * const vars = { '--atomix-button-bg': '#000' }
- * const style = cssVarsToStyle(vars)
- * // Returns: { '--atomix-button-bg': '#000' } as React.CSSProperties
+ * ```typescript
+ * // atomix.config.ts (in your project)
+ * import { defineConfig } from '@shohojdhara/atomix/config';
+ *
+ * export default defineConfig({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         primary: { main: '#7AFFD7' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
  */
-declare function cssVarsToStyle(vars: Record<string, string | number>): React.CSSProperties;
+
 /**
- * Merge multiple CSS variable objects
- * Later objects override earlier ones
+ * Color Scale (1-10)
  */
-declare function mergeCSSVars(...varObjects: Array<Record<string, string | number> | undefined>): Record<string, string | number>;
+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;
+}
 /**
- * Validate CSS variable name format
+ * Palette Color Options
  */
-declare function isValidCSSVariableName(name: string): boolean;
+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>;
+    };
+}
 /**
- * Extract component name from CSS variable name
- *
- * @example
- * extractComponentName('--atomix-button-bg')
- * // Returns: 'button'
+ * CSS Theme Definition
  */
-declare function extractComponentName(varName: string, prefix?: string): string | null;
-
+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;
+}
 /**
- * Theme System Exports
- *
- * Central export point for all theme-related functionality
+ * JavaScript Theme Definition
  */
-
-type themeImport_CLICommand = CLICommand;
-type themeImport_CSSVariableConfig = CSSVariableConfig;
-type themeImport_CSSVariableNamingOptions = CSSVariableNamingOptions;
-type themeImport_ComponentThemeOverride = ComponentThemeOverride;
-type themeImport_RTLConfig = RTLConfig;
-type themeImport_RTLManager = RTLManager;
-declare const themeImport_RTLManager: typeof RTLManager;
-type themeImport_Theme = Theme;
-type themeImport_ThemeApplicator = ThemeApplicator;
-declare const themeImport_ThemeApplicator: typeof ThemeApplicator;
-type themeImport_ThemeCLI = ThemeCLI;
-declare const themeImport_ThemeCLI: typeof ThemeCLI;
-type themeImport_ThemeChangeEvent = ThemeChangeEvent;
-declare const themeImport_ThemeComparator: typeof ThemeComparator;
-type themeImport_ThemeComparatorProps = ThemeComparatorProps;
-type themeImport_ThemeComponentOverrides = ThemeComponentOverrides;
-declare const themeImport_ThemeContext: typeof ThemeContext;
-type themeImport_ThemeContextValue = ThemeContextValue;
-type themeImport_ThemeErrorBoundary = ThemeErrorBoundary;
-declare const themeImport_ThemeErrorBoundary: typeof ThemeErrorBoundary;
-type themeImport_ThemeErrorBoundaryProps = ThemeErrorBoundaryProps;
-declare const themeImport_ThemeInspector: typeof ThemeInspector;
-type themeImport_ThemeInspectorProps = ThemeInspectorProps;
-declare const themeImport_ThemeLiveEditor: typeof ThemeLiveEditor;
-type themeImport_ThemeLiveEditorProps = ThemeLiveEditorProps;
-type themeImport_ThemeLoadOptions = ThemeLoadOptions;
-type themeImport_ThemeManager = ThemeManager;
-declare const themeImport_ThemeManager: typeof ThemeManager;
-type themeImport_ThemeManagerConfig = ThemeManagerConfig;
-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_ThemeValidationResult = ThemeValidationResult;
-type themeImport_UseThemeReturn = UseThemeReturn;
-declare const themeImport_applyCSSVariables: typeof applyCSSVariables;
-declare const themeImport_applyTheme: typeof applyTheme;
-declare const themeImport_createCLI: typeof createCLI;
-declare const themeImport_createDarkVariant: typeof createDarkVariant;
-declare const themeImport_createTheme: typeof createTheme;
-declare const themeImport_createThemeFromConfig: typeof createThemeFromConfig;
-declare const themeImport_cssVarsToStyle: typeof cssVarsToStyle;
-declare const themeImport_exportTheme: typeof exportTheme;
-declare const themeImport_extractComponentName: typeof extractComponentName;
-declare const themeImport_generateCSSVariableName: typeof generateCSSVariableName;
-declare const themeImport_generateComponentCSSVars: typeof generateComponentCSSVars;
-declare const themeImport_getCSSVariable: typeof getCSSVariable;
-declare const themeImport_getThemeApplicator: typeof getThemeApplicator;
-declare const themeImport_importTheme: typeof importTheme;
-declare const themeImport_isValidCSSVariableName: typeof isValidCSSVariableName;
-declare const themeImport_mapSCSSTokensToCSSVars: typeof mapSCSSTokensToCSSVars;
-declare const themeImport_mergeCSSVars: typeof mergeCSSVars;
-declare const themeImport_quickTheme: typeof quickTheme;
-declare const themeImport_removeCSSVariables: typeof removeCSSVariables;
-declare const themeImport_removeTheme: typeof removeTheme;
-declare const themeImport_runCLI: typeof runCLI;
-declare const themeImport_themeToCSS: typeof themeToCSS;
-declare const themeImport_useTheme: typeof useTheme;
-declare const themeImport_validateTheme: typeof validateTheme;
-declare namespace themeImport {
-  export { themeImport_RTLManager as RTLManager, themeImport_ThemeApplicator as ThemeApplicator, themeImport_ThemeCLI as ThemeCLI, themeImport_ThemeComparator as ThemeComparator, themeImport_ThemeContext as ThemeContext, themeImport_ThemeErrorBoundary as ThemeErrorBoundary, themeImport_ThemeInspector as ThemeInspector, themeImport_ThemeLiveEditor as ThemeLiveEditor, themeImport_ThemeManager as ThemeManager, themeImport_ThemePreview as ThemePreview, themeImport_ThemeProvider as ThemeProvider, themeImport_applyCSSVariables as applyCSSVariables, themeImport_applyTheme as applyTheme, themeImport_createCLI as createCLI, themeImport_createDarkVariant as createDarkVariant, themeImport_createTheme as createTheme, themeImport_createThemeFromConfig as createThemeFromConfig, themeImport_cssVarsToStyle as cssVarsToStyle, themeImport_exportTheme as exportTheme, themeImport_extractComponentName as extractComponentName, themeImport_generateCSSVariableName as generateCSSVariableName, themeImport_generateComponentCSSVars as generateComponentCSSVars, themeImport_getCSSVariable as getCSSVariable, themeImport_getThemeApplicator as getThemeApplicator, themeImport_importTheme as importTheme, themeImport_isValidCSSVariableName as isValidCSSVariableName, themeImport_mapSCSSTokensToCSSVars as mapSCSSTokensToCSSVars, themeImport_mergeCSSVars as mergeCSSVars, themeImport_quickTheme as quickTheme, themeImport_removeCSSVariables as removeCSSVariables, themeImport_removeTheme as removeTheme, themeImport_runCLI as runCLI, themeImport_themeToCSS as themeToCSS, themeImport_useTheme as useTheme, themeImport_validateTheme as validateTheme };
-  export type { themeImport_CLICommand as CLICommand, themeImport_CSSVariableConfig as CSSVariableConfig, themeImport_CSSVariableNamingOptions as CSSVariableNamingOptions, themeImport_ComponentThemeOverride as ComponentThemeOverride, 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_ThemeManagerConfig as ThemeManagerConfig, themeImport_ThemeMetadata as ThemeMetadata, themeImport_ThemePreviewProps as ThemePreviewProps, themeImport_ThemeProviderProps as ThemeProviderProps, themeImport_ThemeValidationResult as ThemeValidationResult, themeImport_UseThemeReturn as UseThemeReturn };
+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;
 }
-
 /**
- * Component Customization Hook
- *
- * Merges theme-level component overrides with component-level props
- * for comprehensive customization support.
+ * Theme Definition (CSS or JS)
  */
-
+type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
 /**
- * Component names that support customization
+ * Build configuration (migrated from theme.config.ts)
  */
-type ComponentName = keyof ComponentPartsMap;
+interface BuildConfig {
+    output?: {
+        directory?: string;
+        formats?: {
+            expanded?: string;
+            compressed?: string;
+        };
+    };
+    sass?: {
+        style?: 'expanded' | 'compressed';
+        sourceMap?: boolean;
+        loadPaths?: string[];
+    };
+}
 /**
- * Props for a customizable component
+ * Runtime configuration (migrated from theme.config.ts)
  */
-interface CustomizableComponentProps<T extends ComponentName> {
-    /** CSS variable overrides */
-    cssVars?: T extends keyof ComponentCSSVariables ? Partial<Record<ComponentCSSVariables[T], string | number>> : Record<string, string | number>;
-    /** Part-based styling */
-    parts?: ComponentPartsMap[T];
-    /** Additional className */
-    className?: string;
-    /** Inline styles */
-    style?: React.CSSProperties;
+interface RuntimeConfig {
+    basePath?: string;
+    cdnPath?: string | null;
+    preload?: string[];
+    lazy?: boolean;
+    defaultTheme?: string;
+    storageKey?: string;
+    dataAttribute?: string;
+    enablePersistence?: boolean;
+    useMinified?: boolean;
 }
 /**
- * Result of component customization
+ * Integration settings (migrated from theme.config.ts)
  */
-interface ComponentCustomization<T extends ComponentName> {
-    /** Merged CSS variables */
-    cssVars: Record<string, string | number>;
-    /** Merged part styles */
-    parts: ComponentPartsMap[T];
-    /** Merged className */
-    className: string;
-    /** Merged inline styles */
-    style: React.CSSProperties;
-    /** CSS variable style object for inline application */
-    cssVarStyle: React.CSSProperties;
+interface IntegrationConfig {
+    cssVariables?: Record<string, string>;
+    classNames?: {
+        theme?: string;
+        colorMode?: string;
+    };
 }
 /**
- * Hook to merge theme overrides with component props
- *
- * @example
- * function Button(props: ButtonProps) {
- *   const customization = useComponentCustomization('Button', props);
+ * Atomix Configuration Interface
  *
- *   return (
- *     <button
- *       className={customization.className}
- *       style={customization.style}
- *     >
- *       {props.children}
- *     </button>
- *   );
- * }
- */
-declare function useComponentCustomization<T extends ComponentName>(component: T, props: CustomizableComponentProps<T>): ComponentCustomization<T>;
-/**
- * Hook to get default props from theme
+ * Tailwind-like configuration for external developers.
+ * Focus on theme customization - build/runtime configs are internal only.
  */
-declare function useComponentDefaultProps<T extends ComponentName>(component: T): Record<string, any>;
+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[]>;
+}
 /**
- * Hook to merge default props with provided props
+ * Helper function to define Atomix configuration with type safety
+ *
+ * @param config - Atomix configuration object
+ * @returns The configuration object
  */
-declare function useMergedProps<T extends Record<string, any>>(defaultProps: T, props: Partial<T>): T;
 /**
- * Utility to apply CSS variables to style 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 applyCSSVarsToStyle(cssVars: Record<string, string | number>, baseStyle?: React.CSSProperties): React.CSSProperties;
+declare function defineConfig(config: AtomixConfig): AtomixConfig;
 
 declare const composables: typeof __lib_composables;
 declare const utils: typeof __lib_utils;
@@ -14845,6 +15018,7 @@ declare const atomix: {
     Block: React$1.ForwardRefExoticComponent<BlockProps & React$1.RefAttributes<HTMLDivElement>>;
     Breadcrumb: React$1.FC<BreadcrumbProps>;
     Button: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<ButtonProps & ButtonAsProp, "ref"> & React$1.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>>;
+    ButtonGroup: React$1.FC<ButtonGroupProps>;
     Callout: React$1.FC<CalloutProps>;
     Card: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement | HTMLAnchorElement>>>;
     ElevationCard: React$1.FC<ElevationCardProps>;
@@ -14935,5 +15109,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, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, 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, ThemeCLI, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemeManager, ThemePreview, ThemeProvider, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyPartStyles, applyTheme, composables, constants, createCLI, createCSSVarStyle, createDarkVariant, createDebugAttrs, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeFromConfig, cssVarsToStyle, atomix as default, defineConfig, exportTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getCSSVariable, getComponentCSSVars, getPartStyles, getThemeApplicator, hasCustomization, importTheme, isSlot, isValidCSSVariableName, isYouTubeUrl, loadAtomixConfig, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, preloadFonts, quickTheme, removeCSSVariables, removeTheme, renderSlot, resolveConfigPath, runCLI, sliderConstants, theme, themeToCSS, types, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useButton, useCard, useChartData, useChartInteraction, useChartScale, useCheckbox, useComponentCustomization, useComponentDefaultProps, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useInput, useLineChart, useMergedProps, useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useTodo, utils, validateTheme };
-export type { 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, ButtonIconSlotProps, ButtonLabelSlotProps, ButtonParts, ButtonProps, ButtonRootSlotProps, ButtonSpinnerSlotProps, CLICommand, 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, 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, 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, LegacyBlockProps, LegacyBreadcrumbProps, LegacyIconProps, 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, ThemeManagerConfig, ThemeMetadata, ThemeName, ThemePreviewProps, ThemeProviderProps, ThemeTokens, ThemeValidationResult, TodoItem, TodoProps, ToggleProps, TooltipCSSVariable, TooltipParts, TooltipProps, TreemapChartProps, TreemapDataPoint, TreemapNode, UploadProps, UseBlockOptions, UseBlockReturn, UseCardOptions, UseCardReturn, UseDataTableProps, UseDataTableReturn, UseModalProps, UseModalReturn, UseSliderOptions, UseSliderReturn, UseThemeReturn, 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, createDesignTokensFromTheme, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeObject, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, designTokensToTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getAllThemes, getCSSVariable, getComponentCSSVars, getComponentThemeValue, getDesignTokensFromTheme, getPartStyles, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasCustomization, hasTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isThemeObject, isValidCSSVariableName, isYouTubeUrl, loadAtomixConfig, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, normalizeThemeTokens, preloadFonts, registerTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, resolveConfigPath, saveTheme, sliderConstants, theme, themePropertyToCSSVar, themeToDesignTokens, 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, 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, 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 };