@shohojdhara/atomix 0.3.5 → 0.3.6

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 };
 }
 
 /**
@@ -8417,6 +8346,15 @@ declare const BUTTON: {
         SELECTED: string;
     };
 };
+/**
+ * ButtonGroup-specific constants
+ */
+declare const BUTTON_GROUP: {
+    BASE_CLASS: string;
+    CLASSES: {
+        BASE: string;
+    };
+};
 /**
  * Callout-specific constants
  */
@@ -10121,6 +10059,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;
@@ -10178,6 +10117,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,
@@ -10729,7 +10669,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 +11430,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,1519 +12305,1543 @@ 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 {
+    /** 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[];
+    /** 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;
-    defaultTheme?: string;
+    /** 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 | DesignTokens) => void;
+    /** Callback on error */
+    onError?: (error: Error, themeName: string) => void;
+}
 /**
- * Integration settings (migrated from theme.config.ts)
+ * Theme context value
  */
-interface IntegrationConfig {
-    cssVariables?: Record<string, string>;
-    classNames?: {
-        theme?: string;
-        colorMode?: string;
-    };
+interface ThemeContextValue {
+    /** Current theme name */
+    theme: string;
+    /** Current active theme object (for JS themes) */
+    activeTheme: Theme | null;
+    /** Set theme function (supports string, Theme, or DesignTokens) */
+    setTheme: (theme: string | Theme | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
+    /** Available themes */
+    availableThemes: ThemeMetadata[];
+    /** Loading state */
+    isLoading: boolean;
+    /** Error state */
+    error: Error | null;
+    /** Check if theme is loaded */
+    isThemeLoaded: (themeName: string) => boolean;
+    /** Preload theme */
+    preloadTheme: (themeName: string) => Promise<void>;
 }
 /**
- * Atomix Configuration Interface
- *
- * Tailwind-like configuration for external developers.
- * Focus on theme customization - build/runtime configs are internal only.
+ * Color palette configuration for a single color
  */
-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>;
+interface PaletteColor {
+    /** Main color value */
+    main: string;
+    /** Light variant (auto-generated if not provided) */
+    light?: string;
+    /** Dark variant (auto-generated if not provided) */
+    dark?: string;
+    /** Contrast text color (auto-generated if not provided) */
+    contrastText?: string;
+}
+/**
+ * Palette configuration options for createTheme
+ */
+interface PaletteOptions {
+    /** Primary color configuration */
+    primary?: Partial<PaletteColor> | string;
+    /** Secondary color configuration */
+    secondary?: Partial<PaletteColor> | string;
+    /** Error color configuration */
+    error?: Partial<PaletteColor> | string;
+    /** Warning color configuration */
+    warning?: Partial<PaletteColor> | string;
+    /** Info color configuration */
+    info?: Partial<PaletteColor> | string;
+    /** Success color configuration */
+    success?: Partial<PaletteColor> | string;
+    /** Background colors */
+    background?: {
+        default?: string;
+        subtle?: string;
     };
-    /** @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[]>;
+    /** Text colors */
+    text?: {
+        primary?: string;
+        secondary?: string;
+        disabled?: string;
+    };
+    /** Additional custom colors */
+    [key: string]: any;
 }
 /**
- * Helper function to define Atomix configuration with type safety
- *
- * @param config - Atomix configuration object
- * @returns The configuration object
+ * Typography configuration options for createTheme
  */
+interface TypographyOptions {
+    /** Font family */
+    fontFamily?: string;
+    /** Base font size in pixels */
+    fontSize?: number;
+    /** Font weight scale */
+    fontWeightLight?: number;
+    fontWeightRegular?: number;
+    fontWeightMedium?: number;
+    fontWeightSemiBold?: number;
+    fontWeightBold?: number;
+    /** Heading configurations */
+    h1?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h2?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h3?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h4?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h5?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h6?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    /** Body text configurations */
+    body1?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+    };
+    body2?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+    };
+    /** Additional custom typography */
+    [key: string]: any;
+}
 /**
- * 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' },
- *       },
- *     },
- *   },
- * });
- * ```
+ * Spacing function type
  */
-declare function defineConfig(config: AtomixConfig): AtomixConfig;
-
+type SpacingFunction = (...values: number[]) => string;
 /**
- * Theme Configuration Types
- *
- * Type definitions for the theme configuration system
+ * Spacing configuration options for createTheme
  */
-
+type SpacingOptions = number | number[] | SpacingFunction;
 /**
- * Loaded and validated theme configuration
+ * Breakpoint values 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;
+interface BreakpointValues {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    [key: string]: number | undefined;
 }
-
 /**
- * Theme Registry
- *
- * Central registry for all themes with discovery and dependency management
+ * Breakpoints configuration options for createTheme
  */
-
+interface BreakpointsOptions {
+    /** Breakpoint values in pixels */
+    values?: BreakpointValues;
+    /** Unit for breakpoints (default: 'px') */
+    unit?: string;
+}
 /**
- * Registry entry
+ * Shadow configuration
  */
-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[];
+interface ShadowOptions {
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    [key: string]: string | undefined;
 }
 /**
- * Theme Registry
- *
- * Manages theme registration, discovery, and dependency resolution
+ * Transition configuration
  */
-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[];
+interface TransitionOptions {
+    /** Transition duration values */
+    duration?: {
+        shortest?: number;
+        shorter?: number;
+        short?: number;
+        standard?: number;
+        complex?: number;
+        enteringScreen?: number;
+        leavingScreen?: number;
     };
-    /**
-     * 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;
+    /** Easing functions */
+    easing?: {
+        easeInOut?: string;
+        easeOut?: string;
+        easeIn?: string;
+        sharp?: string;
     };
-    /**
-     * 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
+ * Z-index configuration
  */
-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';
+interface ZIndexOptions {
+    mobileStepper?: number;
+    speedDial?: number;
+    appBar?: number;
+    drawer?: number;
+    modal?: number;
+    snackbar?: number;
+    tooltip?: number;
+    [key: string]: number | undefined;
 }
 /**
- * Theme load options
+ * Border radius configuration
  */
-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;
+interface BorderRadiusOptions {
+    /** Base border radius */
+    base?: string | number;
+    /** Small border radius */
+    sm?: string | number;
+    /** Medium border radius */
+    md?: string | number;
+    /** Large border radius */
+    lg?: string | number;
+    /** Extra large border radius */
+    xl?: string | number;
+    /** 2X large border radius */
+    xxl?: string | number;
+    /** 3X large border radius */
+    '3xl'?: string | number;
+    /** 4X large border radius */
+    '4xl'?: string | number;
+    /** Pill shape (fully rounded) */
+    pill?: string | number;
+    [key: string]: string | number | undefined;
 }
 /**
- * Theme revert event
+ * Custom theme properties for extension
+ * Users can augment this interface via module augmentation
  */
-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;
+interface ThemeCustomProperties {
+    [key: string]: any;
 }
 /**
- * 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
+ * Theme configuration options for createTheme
+ * Extends ThemeMetadata to support both CSS and JS theme properties
  */
-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;
+interface ThemeOptions extends Partial<ThemeMetadata> {
+    /** Color palette configuration */
+    palette?: PaletteOptions;
+    /** Typography configuration */
+    typography?: TypographyOptions;
+    /** Spacing configuration */
+    spacing?: SpacingOptions;
+    /** Breakpoints configuration */
+    breakpoints?: BreakpointsOptions;
+    /** Shadow configuration */
+    shadows?: ShadowOptions;
+    /** Transition configuration */
+    transitions?: TransitionOptions;
+    /** Z-index configuration */
+    zIndex?: ZIndexOptions;
+    /** Border radius configuration */
+    borderRadius?: BorderRadiusOptions;
+    /** Custom properties */
+    custom?: ThemeCustomProperties;
 }
 /**
- * Theme Engine
- *
- * Unified engine for managing CSS and JS themes
+ * Complete theme object with computed values
+ * Generated by createTheme function
  */
-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;
+interface Theme extends ThemeMetadata {
+    /** Color palette with computed values */
+    palette: {
+        primary: PaletteColor;
+        secondary: PaletteColor;
+        error: PaletteColor;
+        warning: PaletteColor;
+        info: PaletteColor;
+        success: PaletteColor;
+        background: {
+            default: string;
+            paper: string;
+            subtle: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        [key: string]: any;
+    };
+    /** Typography with computed values */
+    typography: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeightLight: number;
+        fontWeightRegular: number;
+        fontWeightMedium: number;
+        fontWeightSemiBold: number;
+        fontWeightBold: number;
+        h1: Required<NonNullable<TypographyOptions['h1']>>;
+        h2: Required<NonNullable<TypographyOptions['h2']>>;
+        h3: Required<NonNullable<TypographyOptions['h3']>>;
+        h4: Required<NonNullable<TypographyOptions['h4']>>;
+        h5: Required<NonNullable<TypographyOptions['h5']>>;
+        h6: Required<NonNullable<TypographyOptions['h6']>>;
+        body1: Required<NonNullable<TypographyOptions['body1']>>;
+        body2: Required<NonNullable<TypographyOptions['body2']>>;
+        [key: string]: any;
+    };
+    /** Spacing function */
+    spacing: SpacingFunction;
+    /** Breakpoints with computed values */
+    breakpoints: {
+        values: Required<BreakpointValues>;
+        unit: string;
+        up: (key: keyof BreakpointValues | number) => string;
+        down: (key: keyof BreakpointValues | number) => string;
+        between: (start: keyof BreakpointValues | number, end: keyof BreakpointValues | number) => string;
+    };
+    /** Shadows */
+    shadows: Required<ShadowOptions>;
+    /** Transitions */
+    transitions: Required<TransitionOptions>;
+    /** Z-index values */
+    zIndex: Required<ZIndexOptions>;
+    /** Border radius values */
+    borderRadius: Required<BorderRadiusOptions>;
+    /** Custom properties */
+    custom: ThemeCustomProperties;
+    /** Global CSS variables to apply */
+    cssVars?: Record<string, string | number>;
+    /** Indicates this is a JS theme (not CSS-only) */
+    __isJSTheme: true;
 }
 
 /**
- * Theme Manager
+ * CSS Variable Generator
  *
- * 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.
+ * Generates CSS custom properties from design tokens.
  */
 
 /**
- * ThemeManager class
+ * 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.
  *
- * Manages theme loading, switching, and persistence for Atomix Design System.
- * Uses the new ThemeEngine architecture for unified CSS/JS theme support.
+ * @param tokens - Design tokens object
+ * @param options - Generation options
+ * @returns CSS string with custom properties
  *
  * @example
  * ```typescript
- * const themeManager = new ThemeManager({
- *   // No defaultTheme - uses built-in styles
- * });
+ * const tokens = {
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * };
  *
- * await themeManager.setTheme('my-custom-theme');
+ * const css = generateCSSVariables(tokens);
+ * // Returns: ":root {\n  --atomix-primary: #7c3aed;\n  --atomix-spacing-4: 1rem;\n}"
  * ```
  */
-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;
-}
-
+declare function generateCSSVariables(tokens: DesignTokens, options?: GenerateCSSVariablesOptions): string;
 /**
- * Theme metadata interface matching themes.config.js structure
+ * Generate CSS variables with custom selector
+ *
+ * Useful for theme-specific selectors like `[data-theme="dark"]`
+ *
+ * @param tokens - Design tokens object
+ * @param selector - CSS selector (e.g., '[data-theme="dark"]')
+ * @param prefix - CSS variable prefix
+ * @returns CSS string
+ *
+ * @example
+ * ```typescript
+ * const css = generateCSSVariablesForSelector(
+ *   tokens,
+ *   '[data-theme="dark"]',
+ *   'atomix'
+ * );
+ * ```
  */
-interface 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[];
-}
+declare function generateCSSVariablesForSelector(tokens: DesignTokens, selector: string, prefix?: string): string;
+
 /**
- * Theme manager configuration options
+ * Core Theme Functions
+ *
+ * Unified theme system that handles both DesignTokens and Theme objects.
+ * Config-first approach: loads from atomix.config.ts when no input is provided.
+ * Config file is required for automatic loading.
  */
-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
+ * Create theme CSS from tokens or Theme object
+ *
+ * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
+ * Config file is required for automatic loading.
+ *
+ * @param input - DesignTokens (partial), Theme object, or undefined (loads from config)
+ * @param options - CSS generation options (prefix is automatically read from config if not provided)
+ * @returns CSS string with custom properties
+ * @throws Error if config loading fails when no input is provided
+ *
+ * @example
+ * ```typescript
+ * // Loads from atomix.config.ts (config file required)
+ * const css = createTheme();
+ *
+ * // Using DesignTokens
+ * const css = createTheme({
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * });
+ *
+ * // Using Theme object
+ * const theme = createThemeObject({ palette: { primary: { main: '#7c3aed' } } });
+ * const css = createTheme(theme);
+ *
+ * // With custom options
+ * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
+ * ```
  */
-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';
-}
+declare function createTheme(input?: Partial<DesignTokens> | Theme, options?: GenerateCSSVariablesOptions): string;
+
 /**
- * Theme load options
+ * 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',
+ *   },
+ * });
+ * ```
  */
-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
+ * Create a theme object with computed values
+ *
+ * @param options - Theme configuration options
+ * @returns Complete theme object
  */
-interface ThemeValidationResult {
-    /** Whether the theme is valid */
-    valid: boolean;
-    /** Validation errors */
-    errors: string[];
-    /** Validation warnings */
-    warnings: string[];
-}
+declare function createThemeObject(...options: ThemeOptions[]): Theme;
+
 /**
- * Theme change callback function
+ * Theme Composition Utilities
+ *
+ * Utilities for composing, merging, and extending themes.
  */
-type ThemeChangeCallback = (event: ThemeChangeEvent) => void;
+
 /**
- * Theme load callback function
+ * Deep merge multiple objects
+ * Later objects override earlier ones
  */
-type ThemeLoadCallback = (themeName: string) => void;
+declare function deepMerge<T extends Record<string, any>>(...objects: Partial<T>[]): T;
 /**
- * Theme error callback function
+ * 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);
+ * ```
  */
-type ThemeErrorCallback = (error: Error, themeName: string) => void;
+declare function mergeTheme(...themes: ThemeOptions[]): ThemeOptions;
 /**
- * React hook return type for useTheme
+ * 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' } }
+ * });
+ * ```
  */
-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>;
-}
+declare function extendTheme(baseTheme: Theme | ThemeOptions, extension: ThemeOptions): Theme;
+
 /**
- * Component-level theme override configuration
+ * Atomix Config Loader
+ *
+ * Helper functions to load atomix.config.ts from external projects.
+ * Similar to how Tailwind loads tailwind.config.js
  */
-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
+ * Load Atomix configuration from project root
+ *
+ * Attempts to load atomix.config.ts from the current working directory.
+ * Falls back to default config if file doesn't exist.
+ *
+ * @param options - Loader options
+ * @returns Loaded configuration or default
+ *
+ * @example
+ * ```typescript
+ * import { loadAtomixConfig } from '@shohojdhara/atomix/config';
+ * import { createTheme } from '@shohojdhara/atomix/theme';
+ *
+ * const config = loadAtomixConfig();
+ * const theme = createTheme(config.theme?.tokens || {});
+ * ```
  */
-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;
-}
+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;
 /**
- * Theme provider props
+ * Resolve config path
+ *
+ * Finds atomix.config.ts in the project, checking common locations.
+ * Returns null in browser environments where file system access is not available.
+ *
+ * This function is designed to work in Node.js environments only.
+ * In browser builds, it will always return null without attempting to access Node.js modules.
+ *
+ * @internal This function uses Node.js modules and should not be called in browser environments.
  */
-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;
-}
+declare function resolveConfigPath(): string | null;
+
 /**
- * Theme context value
+ * 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' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
  */
-interface ThemeContextValue {
-    /** Current theme name */
-    theme: string;
-    /** Current active theme object (for JS themes) */
-    activeTheme: Theme | null;
-    /** Set theme function */
-    setTheme: (theme: string | Theme, options?: ThemeLoadOptions) => Promise<void>;
-    /** Available themes */
-    availableThemes: ThemeMetadata[];
-    /** Loading state */
-    isLoading: boolean;
-    /** Error state */
-    error: Error | null;
-    /** Check if theme is loaded */
-    isThemeLoaded: (themeName: string) => boolean;
-    /** Preload theme */
-    preloadTheme: (themeName: string) => Promise<void>;
-    /** Theme manager instance */
-    themeManager: ThemeManager;
+
+/**
+ * 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;
 }
 /**
- * Color palette configuration for a single color
+ * Palette Color Options
  */
-interface PaletteColor {
-    /** Main color value */
+interface PaletteColorOptions {
     main: string;
-    /** Light variant (auto-generated if not provided) */
     light?: string;
-    /** Dark variant (auto-generated if not provided) */
     dark?: string;
-    /** Contrast text color (auto-generated if not provided) */
     contrastText?: string;
 }
 /**
- * Palette configuration options for createTheme
+ * Design Tokens Schema (Tailwind-like)
  */
-interface PaletteOptions {
-    /** Primary color configuration */
-    primary?: Partial<PaletteColor> | string;
-    /** Secondary color configuration */
-    secondary?: Partial<PaletteColor> | string;
-    /** Error color configuration */
-    error?: Partial<PaletteColor> | string;
-    /** Warning color configuration */
-    warning?: Partial<PaletteColor> | string;
-    /** Info color configuration */
-    info?: Partial<PaletteColor> | string;
-    /** Success color configuration */
-    success?: Partial<PaletteColor> | string;
-    /** Background colors */
-    background?: {
-        default?: string;
-        subtle?: string;
-    };
-    /** Text colors */
-    text?: {
-        primary?: string;
-        secondary?: string;
-        disabled?: string;
-    };
-    /** Additional custom colors */
-    [key: string]: any;
+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>;
+    };
 }
 /**
- * Typography configuration options for createTheme
+ * CSS Theme Definition
  */
-interface TypographyOptions {
-    /** Font family */
-    fontFamily?: string;
-    /** Base font size in pixels */
-    fontSize?: number;
-    /** Font weight scale */
-    fontWeightLight?: number;
-    fontWeightRegular?: number;
-    fontWeightMedium?: number;
-    fontWeightSemiBold?: number;
-    fontWeightBold?: number;
-    /** Heading configurations */
-    h1?: {
-        fontSize?: string | number;
-        fontWeight?: number;
-        lineHeight?: number | string;
-        letterSpacing?: string;
-    };
-    h2?: {
-        fontSize?: string | number;
-        fontWeight?: number;
-        lineHeight?: number | string;
-        letterSpacing?: string;
-    };
-    h3?: {
-        fontSize?: string | number;
-        fontWeight?: number;
-        lineHeight?: number | string;
-        letterSpacing?: string;
+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[];
     };
-    h4?: {
-        fontSize?: string | number;
-        fontWeight?: number;
-        lineHeight?: number | string;
-        letterSpacing?: string;
+    color?: string;
+    features?: string[];
+    dependencies?: string[];
+    cssPath?: string;
+}
+/**
+ * JavaScript Theme Definition
+ */
+interface JSThemeDefinition {
+    type: 'js';
+    name: string;
+    class?: string;
+    description?: string;
+    author?: string;
+    version?: string;
+    tags?: string[];
+    supportsDarkMode?: boolean;
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    a11y?: {
+        contrastTarget?: number;
+        modes?: string[];
     };
-    h5?: {
-        fontSize?: string | number;
-        fontWeight?: number;
-        lineHeight?: number | string;
-        letterSpacing?: string;
+    color?: string;
+    features?: string[];
+    dependencies?: string[];
+    createTheme: () => Theme;
+}
+/**
+ * Theme Definition (CSS or JS)
+ */
+type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
+/**
+ * Build configuration (migrated from theme.config.ts)
+ */
+interface BuildConfig {
+    output?: {
+        directory?: string;
+        formats?: {
+            expanded?: string;
+            compressed?: string;
+        };
     };
-    h6?: {
-        fontSize?: string | number;
-        fontWeight?: number;
-        lineHeight?: number | string;
-        letterSpacing?: string;
+    sass?: {
+        style?: 'expanded' | 'compressed';
+        sourceMap?: boolean;
+        loadPaths?: string[];
     };
-    /** Body text configurations */
-    body1?: {
-        fontSize?: string | number;
-        fontWeight?: number;
-        lineHeight?: number | string;
+}
+/**
+ * Runtime configuration (migrated from theme.config.ts)
+ */
+interface RuntimeConfig {
+    basePath?: string;
+    cdnPath?: string | null;
+    preload?: string[];
+    lazy?: boolean;
+    defaultTheme?: string;
+    storageKey?: string;
+    dataAttribute?: string;
+    enablePersistence?: boolean;
+    useMinified?: boolean;
+}
+/**
+ * Integration settings (migrated from theme.config.ts)
+ */
+interface IntegrationConfig {
+    cssVariables?: Record<string, string>;
+    classNames?: {
+        theme?: string;
+        colorMode?: string;
     };
-    body2?: {
-        fontSize?: string | number;
-        fontWeight?: number;
-        lineHeight?: number | 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>;
     };
-    /** Additional custom typography */
-    [key: string]: any;
+    /** @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[]>;
 }
 /**
- * Spacing function type
+ * Helper function to define Atomix configuration with type safety
+ *
+ * @param config - Atomix configuration object
+ * @returns The configuration object
  */
-type SpacingFunction = (...values: number[]) => string;
 /**
- * Spacing configuration options for createTheme
+ * 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' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
  */
-type SpacingOptions = number | number[] | SpacingFunction;
+declare function defineConfig(config: AtomixConfig): AtomixConfig;
+
 /**
- * Breakpoint values configuration
+ * Theme Configuration Types
+ *
+ * Type definitions for the theme configuration system
  */
-interface BreakpointValues {
-    xs?: number;
-    sm?: number;
-    md?: number;
-    lg?: number;
-    xl?: number;
-    [key: string]: number | undefined;
+
+/**
+ * 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;
 }
+
 /**
- * Breakpoints configuration options for createTheme
+ * Theme Registry
+ *
+ * Central registry for all themes with discovery and dependency management
  */
-interface BreakpointsOptions {
-    /** Breakpoint values in pixels */
-    values?: BreakpointValues;
-    /** Unit for breakpoints (default: 'px') */
-    unit?: string;
+
+/**
+ * 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[];
 }
 /**
- * Shadow configuration
+ * Theme Registry
+ *
+ * Manages theme registration, discovery, and dependency resolution
  */
-interface ShadowOptions {
-    xs?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    [key: string]: string | undefined;
+declare class ThemeRegistry {
+    private entries;
+    private config;
+    private initialized;
+    /**
+     * Initialize registry from config
+     */
+    initialize(config?: LoadedThemeConfig): Promise<void>;
+    /**
+     * Register a theme
+     */
+    register(themeId: string, definition: ThemeDefinition): void;
+    /**
+     * Get theme entry
+     */
+    get(themeId: string): RegistryEntry | undefined;
+    /**
+     * Check if theme exists
+     */
+    has(themeId: string): boolean;
+    /**
+     * Get all theme IDs
+     */
+    getAllIds(): string[];
+    /**
+     * Get all theme metadata
+     */
+    getAllMetadata(): ThemeMetadata[];
+    /**
+     * Get theme definition
+     */
+    getDefinition(themeId: string): ThemeDefinition | undefined;
+    /**
+     * Check if a theme is loaded
+     */
+    isThemeLoaded(themeId: string): boolean;
+    /**
+     * Mark a theme as loaded
+     */
+    markLoaded(themeId: string, theme?: Theme): void;
+    /**
+     * Get theme object (for JS themes)
+     */
+    getTheme(themeId: string): Theme | undefined;
+    /**
+     * Get dependencies for a theme
+     */
+    getDependencies(themeId: string): string[];
+    /**
+     * Get dependents for a theme (themes that depend on this one)
+     */
+    getDependents(themeId: string): string[];
+    /**
+     * Resolve all dependencies in correct order
+     */
+    resolveDependencyOrder(themeId: string): string[];
+    /**
+     * Resolve dependencies and build dependency graph
+     */
+    private resolveDependencies;
+    /**
+     * Validate all themes
+     */
+    validate(): {
+        valid: boolean;
+        errors: string[];
+    };
+    /**
+     * Clear registry
+     */
+    clear(): void;
 }
+
 /**
- * Transition configuration
+ * CSS File Utilities
+ *
+ * Save CSS to file system (Node.js only).
+ */
+/**
+ * Save CSS to file
+ *
+ * Writes CSS string to a file. Only works in Node.js environment.
+ *
+ * @param css - CSS string to save
+ * @param filePath - Output file path
+ * @throws Error if called in browser environment
+ *
+ * @example
+ * ```typescript
+ * const css = ':root { --atomix-color-primary: #7AFFD7; }';
+ * await saveCSSFile(css, './themes/custom.css');
+ * ```
+ */
+declare function saveCSSFile(css: string, filePath: string): Promise<void>;
+/**
+ * Save CSS to file (synchronous version)
+ *
+ * Synchronous version of saveCSSFile. Only works in Node.js environment.
+ *
+ * @param css - CSS string to save
+ * @param filePath - Output file path
+ * @throws Error if called in browser environment
+ */
+declare function saveCSSFileSync(css: string, filePath: string): void;
+
+/**
+ * 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');
+ * ```
  */
-interface TransitionOptions {
-    /** Transition duration values */
-    duration?: {
-        shortest?: number;
-        shorter?: number;
-        short?: number;
-        standard?: number;
-        complex?: number;
-        enteringScreen?: number;
-        leavingScreen?: number;
-    };
-    /** Easing functions */
-    easing?: {
-        easeInOut?: string;
-        easeOut?: string;
-        easeIn?: string;
-        sharp?: string;
-    };
-}
+declare function injectCSS(css: string, id?: string): void;
 /**
- * Z-index configuration
+ * 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
+ * ```
  */
-interface ZIndexOptions {
-    mobileStepper?: number;
-    speedDial?: number;
-    appBar?: number;
-    drawer?: number;
-    modal?: number;
-    snackbar?: number;
-    tooltip?: number;
-    [key: string]: number | undefined;
-}
+declare function removeCSS(id?: string): void;
 /**
- * Border radius configuration
+ * Check if CSS is already injected
+ *
+ * @param id - Style element ID to check (default: 'atomix-theme')
+ * @returns True if style element exists
  */
-interface BorderRadiusOptions {
-    /** Base border radius */
-    base?: string | number;
-    /** Small border radius */
-    sm?: string | number;
-    /** Medium border radius */
-    md?: string | number;
-    /** Large border radius */
-    lg?: string | number;
-    /** Extra large border radius */
-    xl?: string | number;
-    /** 2X large border radius */
-    xxl?: string | number;
-    /** 3X large border radius */
-    '3xl'?: string | number;
-    /** 4X large border radius */
-    '4xl'?: string | number;
-    /** Pill shape (fully rounded) */
-    pill?: string | number;
-    [key: string]: string | number | undefined;
-}
+declare function isCSSInjected(id?: string): boolean;
+
 /**
- * Custom theme properties for extension
- * Users can augment this interface via module augmentation
+ * Config Loader
+ *
+ * Load design tokens from atomix.config.ts and convert to flat token format.
  */
-interface ThemeCustomProperties {
-    [key: string]: any;
-}
+
 /**
- * Theme configuration options for createTheme
- * Extends ThemeMetadata to support both CSS and JS theme properties
+ * Load theme tokens from atomix.config.ts
+ *
+ * Loads atomix.config.ts and extracts theme tokens.
+ * Config file is required - throws error if not found.
+ *
+ * @param configPath - Optional custom config path (default: 'atomix.config.ts')
+ * @returns Partial DesignTokens from config
+ * @throws Error if config file is not found or cannot be loaded
+ *
+ * @example
+ * ```typescript
+ * const tokens = await loadThemeFromConfig();
+ * const css = createTheme(tokens);
+ * injectTheme(css);
+ * ```
  */
-interface ThemeOptions extends Partial<ThemeMetadata> {
-    /** Color palette configuration */
-    palette?: PaletteOptions;
-    /** Typography configuration */
-    typography?: TypographyOptions;
-    /** Spacing configuration */
-    spacing?: SpacingOptions;
-    /** Breakpoints configuration */
-    breakpoints?: BreakpointsOptions;
-    /** Shadow configuration */
-    shadows?: ShadowOptions;
-    /** Transition configuration */
-    transitions?: TransitionOptions;
-    /** Z-index configuration */
-    zIndex?: ZIndexOptions;
-    /** Border radius configuration */
-    borderRadius?: BorderRadiusOptions;
-    /** Custom properties */
-    custom?: ThemeCustomProperties;
-}
+declare function loadThemeFromConfig(configPath?: string): Promise<Partial<DesignTokens>>;
 /**
- * Complete theme object with computed values
- * Generated by createTheme function
+ * Load theme tokens from atomix.config.ts (synchronous version)
+ *
+ * Synchronous version that uses require() instead of dynamic import.
+ * Only works in Node.js environment.
+ * Config file is required - throws error if not found.
+ *
+ * @param configPath - Optional custom config path
+ * @returns Partial DesignTokens from config
+ * @throws Error if config file is not found or cannot be loaded
  */
-interface Theme extends ThemeMetadata {
-    /** Color palette with computed values */
-    palette: {
-        primary: PaletteColor;
-        secondary: PaletteColor;
-        error: PaletteColor;
-        warning: PaletteColor;
-        info: PaletteColor;
-        success: PaletteColor;
-        background: {
-            default: string;
-            paper: string;
-            subtle: string;
-        };
-        text: {
-            primary: string;
-            secondary: string;
-            disabled: string;
-        };
-        [key: string]: any;
-    };
-    /** Typography with computed values */
-    typography: {
-        fontFamily: string;
-        fontSize: number;
-        fontWeightLight: number;
-        fontWeightRegular: number;
-        fontWeightMedium: number;
-        fontWeightSemiBold: number;
-        fontWeightBold: number;
-        h1: Required<NonNullable<TypographyOptions['h1']>>;
-        h2: Required<NonNullable<TypographyOptions['h2']>>;
-        h3: Required<NonNullable<TypographyOptions['h3']>>;
-        h4: Required<NonNullable<TypographyOptions['h4']>>;
-        h5: Required<NonNullable<TypographyOptions['h5']>>;
-        h6: Required<NonNullable<TypographyOptions['h6']>>;
-        body1: Required<NonNullable<TypographyOptions['body1']>>;
-        body2: Required<NonNullable<TypographyOptions['body2']>>;
-        [key: string]: any;
-    };
-    /** Spacing function */
-    spacing: SpacingFunction;
-    /** Breakpoints with computed values */
-    breakpoints: {
-        values: Required<BreakpointValues>;
-        unit: string;
-        up: (key: keyof BreakpointValues | number) => string;
-        down: (key: keyof BreakpointValues | number) => string;
-        between: (start: keyof BreakpointValues | number, end: keyof BreakpointValues | number) => string;
-    };
-    /** Shadows */
-    shadows: Required<ShadowOptions>;
-    /** Transitions */
-    transitions: Required<TransitionOptions>;
-    /** Z-index values */
-    zIndex: Required<ZIndexOptions>;
-    /** Border radius values */
-    borderRadius: Required<BorderRadiusOptions>;
-    /** Custom properties */
-    custom: ThemeCustomProperties;
-    /** Global CSS variables to apply */
-    cssVars?: Record<string, string | number>;
-    /** Indicates this is a JS theme (not CSS-only) */
-    __isJSTheme: true;
-}
+declare function loadThemeFromConfigSync(configPath?: string): Partial<DesignTokens>;
 
 /**
  * Theme Provider
  *
  * React context provider for theme management
- * Updated to use the new ThemeEngine architecture
  */
 
 /**
  * ThemeProvider component
  *
  * Provides theme context to child components and manages theme state.
- * Uses the new ThemeEngine-based ThemeManager.
+ *
+ * **Config-First Approach**: If `defaultTheme` is not provided, loads from `atomix.config.ts`.
+ * Config file is required when `defaultTheme` is not provided.
  *
  * @example
  * ```tsx
  * import { ThemeProvider } from '@shohojdhara/atomix/theme';
  *
+ * // Loads from atomix.config.ts (config file required)
  * function App() {
  *   return (
  *     <ThemeProvider>
@@ -13869,6 +13849,15 @@ interface Theme extends ThemeMetadata {
  *     </ThemeProvider>
  *   );
  * }
+ *
+ * // Provide explicit theme (bypasses config)
+ * function App() {
+ *   return (
+ *     <ThemeProvider defaultTheme="dark">
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
  * ```
  */
 declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
@@ -13877,7 +13866,6 @@ declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
  * useTheme Hook
  *
  * React hook for accessing theme context
- * Updated to work with new ThemeEngine architecture
  */
 
 /**
@@ -13929,190 +13917,108 @@ interface ThemeErrorBoundaryState {
 /**
  * Error boundary props
  */
-interface ThemeErrorBoundaryProps {
-    /** Child components */
-    children: ReactNode;
-    /** Fallback UI to render when error occurs */
-    fallback?: (error: Error, errorInfo: ErrorInfo) => ReactNode;
-    /** Callback when error occurs */
-    onError?: (error: Error, errorInfo: ErrorInfo) => void;
-    /** Whether to reset error on children change */
-    resetOnPropsChange?: boolean;
-    /** Custom error message */
-    errorMessage?: string;
-}
-/**
- * Theme Error Boundary Component
- *
- * Catches errors in the theme system and displays a fallback UI
- * instead of crashing the entire application.
- */
-declare class ThemeErrorBoundary extends Component<ThemeErrorBoundaryProps, ThemeErrorBoundaryState> {
-    private logger;
-    constructor(props: ThemeErrorBoundaryProps);
-    static getDerivedStateFromError(error: Error): Partial<ThemeErrorBoundaryState>;
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void;
-    render(): ReactNode;
-}
-
-/**
- * createTheme - 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.
- *
- * @example
- * ```typescript
- * const theme = createTheme({
- *   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 createTheme(...options: ThemeOptions[]): Theme;
-
-/**
- * Create a theme from Atomix configuration
- *
- * This function converts atomix.config.ts format to a theme object
- * that can be used with ThemeProvider.
- *
- * @param config - Atomix configuration object
- * @returns Theme object ready for use
- *
- * @example
- * ```typescript
- * import { createThemeFromConfig } from '@shohojdhara/atomix/theme';
- * import config from './atomix.config';
- *
- * const theme = createThemeFromConfig(config);
- * ```
- */
-declare function createThemeFromConfig(config: AtomixConfig): Theme;
-
-/**
- * Theme Tools for Library Users
- *
- * Developer-friendly utilities for working with Atomix themes
- */
-
-/**
- * Quick theme creator with sensible defaults
- */
-declare function quickTheme(name: string, primaryColor: string, secondaryColor?: string): Theme;
-/**
- * Create a dark theme variant from a light theme
- */
-declare function createDarkVariant(lightTheme: Theme): Theme;
-/**
- * Validate theme structure
- */
-declare function validateTheme(theme: Theme): {
-    valid: boolean;
-    errors: string[];
-};
-/**
- * Generate CSS string from theme
- */
-declare function themeToCSS(theme: Theme, selector?: string): string;
-/**
- * Export theme as JSON
- */
-declare function exportTheme(theme: Theme): string;
+interface ThemeErrorBoundaryProps {
+    /** Child components */
+    children: ReactNode;
+    /** Fallback UI to render when error occurs */
+    fallback?: (error: Error, errorInfo: ErrorInfo) => ReactNode;
+    /** Callback when error occurs */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** Whether to reset error on children change */
+    resetOnPropsChange?: boolean;
+    /** Custom error message */
+    errorMessage?: string;
+}
 /**
- * Import theme from JSON
+ * Theme Error Boundary Component
+ *
+ * Catches errors in the theme system and displays a fallback UI
+ * instead of crashing the entire application.
  */
-declare function importTheme(json: string): Theme;
+declare class ThemeErrorBoundary extends Component<ThemeErrorBoundaryProps, ThemeErrorBoundaryState> {
+    private logger;
+    constructor(props: ThemeErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ThemeErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void;
+    render(): ReactNode;
+}
 
 /**
- * Theme CLI
+ * Theme Applicator
  *
- * Command-line interface for theme management
- */
-/**
- * CLI command interface
+ * Applies theme configurations to the DOM, including CSS variables,
+ * component overrides, typography, spacing, and color palettes.
+ *
+ * Uses the unified theme system for CSS generation and injection.
  */
-interface CLICommand {
-    name: string;
-    description: string;
-    options?: Record<string, string>;
-    handler: (args: string[], options: Record<string, any>) => Promise<void> | void;
-}
+
 /**
- * Theme CLI
+ * Theme applicator class for runtime theme application
  *
- * Command-line interface for theme operations
+ * Uses the unified theme system for efficient CSS variable generation and injection.
  */
-declare class ThemeCLI {
-    private commands;
-    constructor();
-    /**
-     * Register default commands
-     */
-    private registerDefaultCommands;
+declare class ThemeApplicator {
+    private root;
+    private styleId;
+    constructor(root?: HTMLElement);
     /**
-     * Register a command
+     * 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.
      */
-    register(command: CLICommand): void;
+    applyTheme(theme: Theme | DesignTokens): void;
     /**
-     * Run CLI with arguments
+     * 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.
      */
-    run(args: string[]): Promise<void>;
+    private applyDesignTokens;
     /**
-     * Parse command arguments
+     * Check if object is DesignTokens
      */
-    private parseArgs;
+    private isDesignTokens;
     /**
-     * Handle validate command
+     * Apply global CSS variables (for component overrides)
      */
-    private handleValidate;
+    private applyGlobalCSSVars;
     /**
-     * Handle list command
+     * Apply component-level overrides
      */
-    private handleList;
+    private applyComponentOverrides;
     /**
-     * Handle inspect command
+     * Apply override for a specific component
      */
-    private handleInspect;
+    private applyComponentOverride;
     /**
-     * Handle compare command
+     * Clear all applied CSS variables
      */
-    private handleCompare;
+    private clearAppliedVars;
     /**
-     * Handle export command
+     * Remove theme application
      */
-    private handleExport;
+    removeTheme(): void;
     /**
-     * Handle help command
+     * Update specific CSS variables without clearing all
      */
-    private handleHelp;
+    updateCSSVars(vars: Record<string, string | number>): void;
 }
 /**
- * Create CLI instance
+ * Get or create global theme applicator
  */
-declare function createCLI(): ThemeCLI;
+declare function getThemeApplicator(): ThemeApplicator;
 /**
- * Run CLI with process arguments
+ * Apply theme using global applicator
  */
-declare function runCLI(): void;
+declare function applyTheme(theme: Theme): void;
 
 /**
  * Theme Preview Component
  *
  * React component for previewing themes in development
+ * Enhanced with interactive components, viewport controls, and dark mode toggle
  */
 
 /**
@@ -14147,6 +14053,7 @@ declare const ThemePreview: React__default.FC<ThemePreviewProps>;
  * Theme Inspector Component
  *
  * React component for inspecting and debugging themes
+ * Enhanced with search/filter and copy path functionality
  */
 
 /**
@@ -14177,6 +14084,7 @@ declare const ThemeInspector: React__default.FC<ThemeInspectorProps>;
  * Theme Comparator Component
  *
  * React component for comparing two themes side-by-side
+ * Enhanced with search/filter and improved visual diff styling
  */
 
 /**
@@ -14205,6 +14113,7 @@ declare const ThemeComparator: React__default.FC<ThemeComparatorProps>;
  * Theme Live Editor Component
  *
  * React component for live editing themes in development
+ * Enhanced with undo/redo, keyboard shortcuts, resizable layout, and better color pickers
  */
 
 /**
@@ -14228,76 +14137,185 @@ interface ThemeLiveEditorProps {
 declare const ThemeLiveEditor: React__default.FC<ThemeLiveEditorProps>;
 
 /**
- * Theme Applicator
+ * Theme Validator
  *
- * Applies theme configurations to the DOM, including CSS variables,
- * component overrides, typography, spacing, and color palettes.
+ * Runtime theme validation including color contrast and accessibility checks
  */
 
 /**
- * Theme applicator class for runtime theme application
+ * Validation result
  */
-declare class ThemeApplicator {
-    private appliedVars;
-    private root;
-    constructor(root?: HTMLElement);
+interface ValidationResult {
+    /** Whether theme is valid */
+    valid: boolean;
+    /** Validation errors */
+    errors: string[];
+    /** Validation warnings */
+    warnings: string[];
+    /** Accessibility issues */
+    a11yIssues: A11yIssue[];
+}
+/**
+ * Accessibility issue
+ */
+interface A11yIssue {
+    /** Issue type */
+    type: 'contrast' | 'color' | 'missing';
+    /** Severity */
+    severity: 'error' | 'warning';
+    /** Issue message */
+    message: string;
+    /** Affected property */
+    property?: string;
+    /** Current value */
+    value?: string;
+    /** Recommended value */
+    recommended?: string;
+}
+/**
+ * Theme Validator
+ *
+ * Validates themes for correctness and accessibility
+ */
+declare class ThemeValidator {
     /**
-     * Apply a complete theme configuration
+     * Validate theme
      */
-    applyTheme(theme: Theme): void;
+    validate(theme: Theme, metadata?: ThemeMetadata): ValidationResult;
     /**
-     * Apply global CSS variables
+     * Validate palette
      */
-    private applyGlobalCSSVars;
+    private validatePalette;
     /**
-     * Apply typography system
+     * Validate typography
      */
-    private applyTypography;
+    private validateTypography;
     /**
-     * Apply spacing system
+     * Validate spacing
      */
-    private applySpacing;
+    private validateSpacing;
     /**
-     * Apply color palette
+     * Validate breakpoints
      */
-    private applyPalette;
+    private validateBreakpoints;
     /**
-     * Apply component-level overrides
+     * Check color contrast ratio
      */
-    private applyComponentOverrides;
+    private checkContrast;
     /**
-     * Apply override for a specific component
+     * Check if color is valid
      */
-    private applyComponentOverride;
+    private isValidColor;
     /**
-     * Clear all applied CSS variables
+     * Validate transitions
      */
-    private clearAppliedVars;
+    private validateTransitions;
     /**
-     * Get all currently applied variables
+     * Validate z-index
      */
-    getAppliedVars(): string[];
+    private validateZIndex;
     /**
-     * Remove theme application
+     * Validate border radius
      */
-    removeTheme(): void;
+    private validateBorderRadius;
     /**
-     * Update specific CSS variables without clearing all
+     * Validate custom properties
      */
-    updateCSSVars(vars: Record<string, string | number>): void;
+    private validateCustom;
 }
+
 /**
- * Get or create global theme applicator
+ * useHistory Hook
+ *
+ * React hook for managing undo/redo history
  */
-declare function getThemeApplicator(): ThemeApplicator;
+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;
+    };
+}
 /**
- * Apply theme using global applicator
+ * 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 applyTheme(theme: Theme): void;
+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;
 /**
- * Remove theme using global applicator
+ * Create a minimal Theme object from DesignTokens
+ *
+ * @param tokens - DesignTokens to convert
+ * @returns Minimal Theme object with cssVars populated
  */
-declare function removeTheme(): void;
+declare function designTokensToTheme(tokens: Partial<DesignTokens>): Partial<Theme>;
 
 /**
  * CSS Variable Mapper
@@ -14408,24 +14426,193 @@ declare function isValidCSSVariableName(name: string): boolean;
  */
 declare function extractComponentName(varName: string, prefix?: string): string | null;
 
+/**
+ * Theme Helper Functions
+ *
+ * Utility functions for working with themes and DesignTokens
+ */
+
+/**
+ * Get DesignTokens from current theme
+ *
+ * Converts a Theme object to DesignTokens. Useful when you need to
+ * work with DesignTokens but have a Theme object.
+ *
+ * @param theme - Theme object to convert
+ * @returns DesignTokens object
+ *
+ * @example
+ * ```typescript
+ * // If you have a Theme object, convert it to DesignTokens
+ * const tokens = getDesignTokensFromTheme(theme);
+ * // Now you can use tokens with unified theme system
+ * const css = createTheme(tokens);
+ * ```
+ */
+declare function getDesignTokensFromTheme(theme: Theme | null): DesignTokens | null;
+/**
+ * Check if a value is DesignTokens
+ *
+ * Type guard to check if an object is DesignTokens format.
+ *
+ * @param value - Value to check
+ * @returns True if value is DesignTokens
+ */
+declare function isDesignTokens(value: unknown): value is DesignTokens;
+/**
+ * Check if a value is a Theme object
+ *
+ * Type guard to check if an object is a Theme.
+ *
+ * @param value - Value to check
+ * @returns True if value is Theme
+ */
+declare function isThemeObject(value: unknown): value is Theme;
+
+/**
+ * RTL (Right-to-Left) Support Utilities
+ *
+ * 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;
+}
+
 /**
  * Theme System Exports
  *
- * Central export point for all theme-related functionality
+ * 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_CLICommand = CLICommand;
+type themeImport_A11yIssue = A11yIssue;
 type themeImport_CSSVariableConfig = CSSVariableConfig;
 type themeImport_CSSVariableNamingOptions = CSSVariableNamingOptions;
 type themeImport_ComponentThemeOverride = ComponentThemeOverride;
+type themeImport_DesignTokens = DesignTokens;
+type themeImport_GenerateCSSVariablesOptions = GenerateCSSVariablesOptions;
 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;
@@ -14440,43 +14627,63 @@ 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_ThemeRegistry = ThemeRegistry;
+declare const themeImport_ThemeRegistry: typeof ThemeRegistry;
 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_applyTheme: typeof applyTheme;
-declare const themeImport_createCLI: typeof createCLI;
-declare const themeImport_createDarkVariant: typeof createDarkVariant;
+declare const themeImport_createDesignTokensFromTheme: typeof createDesignTokensFromTheme;
 declare const themeImport_createTheme: typeof createTheme;
-declare const themeImport_createThemeFromConfig: typeof createThemeFromConfig;
+declare const themeImport_createThemeObject: typeof createThemeObject;
+declare const themeImport_createTokens: typeof createTokens;
 declare const themeImport_cssVarsToStyle: typeof cssVarsToStyle;
-declare const themeImport_exportTheme: typeof exportTheme;
+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_generateComponentCSSVars: typeof generateComponentCSSVars;
 declare const themeImport_getCSSVariable: typeof getCSSVariable;
+declare const themeImport_getDesignTokensFromTheme: typeof getDesignTokensFromTheme;
 declare const themeImport_getThemeApplicator: typeof getThemeApplicator;
-declare const themeImport_importTheme: typeof importTheme;
+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_quickTheme: typeof quickTheme;
+declare const themeImport_mergeTheme: typeof mergeTheme;
+declare const themeImport_removeCSS: typeof removeCSS;
 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_saveCSSFile: typeof saveCSSFile;
+declare const themeImport_saveCSSFileSync: typeof saveCSSFileSync;
+declare const themeImport_saveTheme: typeof saveTheme;
+declare const themeImport_themeToDesignTokens: typeof themeToDesignTokens;
+declare const themeImport_useHistory: typeof useHistory;
 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 };
+  export { themeImport_RTLManager as RTLManager, themeImport_ThemeApplicator as ThemeApplicator, themeImport_ThemeComparator as ThemeComparator, themeImport_ThemeContext as ThemeContext, themeImport_ThemeErrorBoundary as ThemeErrorBoundary, themeImport_ThemeInspector as ThemeInspector, themeImport_ThemeLiveEditor as ThemeLiveEditor, themeImport_ThemePreview as ThemePreview, themeImport_ThemeProvider as ThemeProvider, themeImport_ThemeRegistry as ThemeRegistry, themeImport_ThemeValidator as ThemeValidator, themeImport_applyCSSVariables as applyCSSVariables, themeImport_applyTheme as applyTheme, themeImport_createDesignTokensFromTheme as createDesignTokensFromTheme, themeImport_createTheme as createTheme, themeImport_createThemeObject as createThemeObject, themeImport_createTokens as createTokens, themeImport_cssVarsToStyle as cssVarsToStyle, themeImport_deepMerge as deepMerge, themeImport_defaultTokens as defaultTokens, themeImport_designTokensToCSSVars as designTokensToCSSVars, themeImport_designTokensToTheme as designTokensToTheme, themeImport_extendTheme as extendTheme, themeImport_extractComponentName as extractComponentName, themeImport_generateCSSVariableName as generateCSSVariableName, themeImport_generateCSSVariables as generateCSSVariables, themeImport_generateCSSVariablesForSelector as generateCSSVariablesForSelector, themeImport_generateComponentCSSVars as generateComponentCSSVars, themeImport_getCSSVariable as getCSSVariable, themeImport_getDesignTokensFromTheme as getDesignTokensFromTheme, themeImport_getThemeApplicator as getThemeApplicator, themeImport_injectCSS as injectCSS, themeImport_injectTheme as injectTheme, themeImport_isCSSInjected as isCSSInjected, themeImport_isDesignTokens as isDesignTokens, themeImport_isThemeObject as isThemeObject, themeImport_isValidCSSVariableName as isValidCSSVariableName, themeImport_loadThemeFromConfig as loadThemeFromConfig, themeImport_loadThemeFromConfigSync as loadThemeFromConfigSync, themeImport_mapSCSSTokensToCSSVars as mapSCSSTokensToCSSVars, themeImport_mergeCSSVars as mergeCSSVars, themeImport_mergeTheme as mergeTheme, themeImport_removeCSS as removeCSS, themeImport_removeCSSVariables as removeCSSVariables, themeImport_removeTheme as removeTheme, themeImport_saveCSSFile as saveCSSFile, themeImport_saveCSSFileSync as saveCSSFileSync, themeImport_saveTheme as saveTheme, themeImport_themeToDesignTokens as themeToDesignTokens, themeImport_useHistory as useHistory, themeImport_useTheme as useTheme };
+  export type { themeImport_A11yIssue as A11yIssue, themeImport_CSSVariableConfig as CSSVariableConfig, themeImport_CSSVariableNamingOptions as CSSVariableNamingOptions, themeImport_ComponentThemeOverride as ComponentThemeOverride, themeImport_DesignTokens as DesignTokens, themeImport_GenerateCSSVariablesOptions as GenerateCSSVariablesOptions, themeImport_RTLConfig as RTLConfig, themeImport_Theme as Theme, themeImport_ThemeChangeEvent as ThemeChangeEvent, themeImport_ThemeComparatorProps as ThemeComparatorProps, themeImport_ThemeComponentOverrides as ThemeComponentOverrides, themeImport_ThemeContextValue as ThemeContextValue, themeImport_ThemeErrorBoundaryProps as ThemeErrorBoundaryProps, themeImport_ThemeInspectorProps as ThemeInspectorProps, themeImport_ThemeLiveEditorProps as ThemeLiveEditorProps, themeImport_ThemeLoadOptions as ThemeLoadOptions, themeImport_ThemeMetadata as ThemeMetadata, themeImport_ThemePreviewProps as ThemePreviewProps, themeImport_ThemeProviderProps as ThemeProviderProps, themeImport_ThemeValidationResult as ThemeValidationResult, themeImport_UseHistoryOptions as UseHistoryOptions, themeImport_UseHistoryReturn as UseHistoryReturn, themeImport_UseThemeReturn as UseThemeReturn, themeImport_ValidationResult as ValidationResult };
 }
 
 /**
@@ -14845,6 +15052,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 +15143,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, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeRegistry, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyPartStyles, applyTheme, composables, constants, createCSSVarStyle, createDebugAttrs, createDesignTokensFromTheme, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeObject, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, designTokensToTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getCSSVariable, getComponentCSSVars, getDesignTokensFromTheme, getPartStyles, getThemeApplicator, hasCustomization, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isThemeObject, isValidCSSVariableName, isYouTubeUrl, loadAtomixConfig, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, preloadFonts, removeCSS, removeCSSVariables, removeTheme, renderSlot, resolveConfigPath, saveCSSFile, saveCSSFileSync, saveTheme, sliderConstants, theme, themeToDesignTokens, types, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useBreadcrumb, useButton, useCard, useChartData, useChartInteraction, useChartScale, useCheckbox, useComponentCustomization, useComponentDefaultProps, useDataTable, useEdgePanel, useForm, useFormGroup, useGlassContainer, useHero, useHistory, useInput, useLineChart, useMergedProps, useModal, useNav, useNavDropdown, useNavItem, useNavbar, usePagination, usePieChart, useRadio, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlider, useSlot, useSpinner, useTextarea, useTheme, useTodo, utils };
+export type { A11yIssue, AccordionParts, AccordionProps$1 as AccordionProps, AccordionState, AnimatedChartProps, AreaChartProps, AtomixConfig, AtomixGlassProps, AtomixLogoProps, AvatarGroupProps, AvatarParts, AvatarProps, AvatarSize, BadgeCSSVariable, BadgeParts, BadgeProps, BarChartOptions, BarChartProps, BarDimensions, BaseComponentProps, BlockProps, BreadcrumbInstance, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbOptions$1 as BreadcrumbOptions, BreadcrumbProps, BubbleChartProps, BubbleDataPoint, BuildConfig, ButtonCSSVariable, ButtonGroupProps, ButtonIconSlotProps, ButtonLabelSlotProps, ButtonParts, ButtonProps, ButtonRootSlotProps, ButtonSpinnerSlotProps, CSSThemeDefinition, CSSVariableConfig, CSSVariableNamingOptions, CalloutProps, CandlestickChartProps, CandlestickDataPoint, CardBodySlotProps, CardCSSVariable, CardFooterSlotProps, CardHeaderSlotProps, CardParts, CardProps, CardRootSlotProps, ChartAxis$1 as ChartAxis, ChartConfig$1 as ChartConfig, ChartDataPoint$1 as ChartDataPoint, ChartDataset$1 as ChartDataset, ChartProps$1 as ChartProps, ChartSize$1 as ChartSize, ChartType$1 as ChartType, CheckboxCSSVariable, CheckboxParts, CheckboxProps, CodeBlockProps, ColorModeToggleProps, ColorScale, ComponentCSSVariables, ComponentCustomization, ComponentName, ComponentParts, ComponentPartsMap, ComponentThemeOverride, ContainerProps, CountdownProps, CustomizableComponentProps, DataTableColumn, DataTableParts, DataTableProps, DatePickerProps, DesignTokens, DisplacementMode, DonutChartProps, DropdownCSSVariable, DropdownDividerProps, DropdownHeaderProps, DropdownItemProps, DropdownMenuSlotProps, DropdownParts, DropdownPlacement, DropdownProps, DropdownRootSlotProps, DropdownToggleSlotProps, DropdownTrigger, EdgePanelMode, EdgePanelPosition, EdgePanelProps, ElementRefs, ElevationCardProps, FontPreloadConfig, FooterLayout, FooterLinkProps, FooterProps, FooterSectionProps, FooterSocialLinkProps, FormGroupParts, FormGroupProps, FormProps, FunnelChartProps, FunnelDataPoint, GaugeChartProps, GenerateCSSVariablesOptions, GlassContainerProps, GlassMode, GlassSize, GridColProps, GridProps, HeatmapChartProps, HeatmapDataPoint, HeroAlignment, HeroBackgroundSlide, HeroBackgroundSliderConfig, HeroProps, IconPosition, IconProps, IconSize$1 as IconSize, IconWeight$1 as IconWeight, ImageType, InputCSSVariable, InputElementSlotProps, InputParts, InputProps, InputRootSlotProps, IntegrationConfig, JSThemeDefinition, LineChartOptions, LineChartProps, ListGroupProps$1 as ListGroupProps, ListParts, ListProps, MasonryGridItemProps, MasonryGridProps, MegaMenuColumnProps, MegaMenuLinkProps, MegaMenuProps, MenuDividerProps, MenuItemProps, MenuProps, MergePropsOptions, MessageItem, MessagesProps, ModalBackdropSlotProps, ModalCSSVariable, ModalContentSlotProps, ModalDialogSlotProps, ModalParts, ModalProps, ModalRootSlotProps, MousePosition, MultiAxisChartProps, NavAlignment, NavDropdownProps, NavItemProps, NavProps, NavVariant, NavbarParts, NavbarPosition, NavbarProps, OverLightConfig, OverLightObjectConfig, PaginationProps, PaletteColorOptions, PartStyleProps, PhosphorIconsType$1 as PhosphorIconsType, PhotoViewerProps, PieChartOptions, PieChartProps, PieSlice, PopoverProps, PopoverTriggerProps, ProductReviewProps, ProgressCSSVariable, ProgressParts, ProgressProps, RTLConfig, RadarChartProps, RadioCSSVariable, RadioParts, RadioProps, RatingProps, RiverContentColumn, RiverProps, RowProps, RuntimeConfig, ScatterChartProps, ScatterDataPoint, SectionIntroProps, SelectOption, SelectParts, SelectProps, SideMenuItemProps, SideMenuListProps, SideMenuProps, Size, SliderAutoplay, SliderBreakpoint, SliderEffect, SliderLazy, SliderNavigation, SliderPagination, SliderProps, SliderRefs, SliderScrollbar, SliderSlide, SliderState, SliderThumbs, SliderVirtual, SliderZoom, SlotProps, SocialLink, SocialPlatform, SortConfig, SpinnerProps, StateModifier, StepsProps, TabsCSSVariable, TabsParts, TabsProps, TestimonialProps, TextareaParts, TextareaProps, Theme, ThemeChangeEvent, ThemeColor, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeDefinition, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemeMetadata, ThemeName, ThemePreviewProps, ThemeProviderProps, ThemeTokens, ThemeValidationResult, TodoItem, TodoProps, ToggleProps, TooltipCSSVariable, TooltipParts, TooltipProps, TreemapChartProps, TreemapDataPoint, TreemapNode, UploadProps, UseBlockOptions, UseBlockReturn, UseCardOptions, UseCardReturn, UseDataTableProps, UseDataTableReturn, UseHistoryOptions, UseHistoryReturn, UseModalProps, UseModalReturn, UseSliderOptions, UseSliderReturn, UseThemeReturn, ValidationResult, Variant, VideoChapter, VideoPlayerProps, VideoQuality, VideoSubtitle, WaterfallChartProps, WaterfallDataPoint, listvariant };