@shohojdhara/atomix 0.3.4 → 0.3.6

package/dist/theme.d.ts

@@ -0,0 +1,2122 @@
+import * as React$1 from 'react';
+import React__default, { ReactNode, ErrorInfo, Component } from 'react';
+
+/**
+ * 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;
+}
+/**
+ * Default design tokens
+ *
+ * Based on Atomix default theme values from docs/tokes-list.md (light mode)
+ */
+declare const defaultTokens: DesignTokens;
+/**
+ * Create tokens from defaults and overrides
+ *
+ * @param overrides - Partial tokens to override defaults
+ * @returns Complete DesignTokens object
+ *
+ * @example
+ * ```typescript
+ * const tokens = createTokens({
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * });
+ * ```
+ */
+declare function createTokens(overrides?: Partial<DesignTokens>): DesignTokens;
+
+/**
+ * Theme Manager Type Definitions
+ *
+ * TypeScript types and interfaces for the Atomix Design System theme management system.
+ */
+/**
+ * Theme metadata interface matching themes.config.js structure
+ */
+interface ThemeMetadata {
+    /** Display name of the theme */
+    name: string;
+    /** Unique identifier/class name for the theme */
+    class?: string;
+    /** Theme description */
+    description?: string;
+    /** Theme author */
+    author?: string;
+    /** Theme version (semver) */
+    version?: string;
+    /** Theme tags for categorization */
+    tags?: string[];
+    /** Whether the theme supports dark mode */
+    supportsDarkMode?: boolean;
+    /** Theme status: stable, beta, experimental, deprecated */
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    /** Accessibility information */
+    a11y?: {
+        /** Target contrast ratio */
+        contrastTarget?: number;
+        /** Supported color modes */
+        modes?: string[];
+    };
+    /** Primary theme color (for UI display) */
+    color?: string;
+    /** Theme features list */
+    features?: string[];
+    /** Theme dependencies (other themes required) */
+    dependencies?: string[];
+}
+/**
+ * Theme change event payload
+ */
+interface ThemeChangeEvent {
+    /** Previous theme name */
+    previousTheme: string | null;
+    /** New theme name */
+    currentTheme: string;
+    /** Theme object (for JS themes) */
+    themeObject?: Theme | null;
+    /** Timestamp of the change */
+    timestamp: number;
+    /** Whether the change was from user action or system */
+    source: 'user' | 'system' | 'storage';
+}
+/**
+ * Theme load options
+ */
+interface ThemeLoadOptions {
+    /** Force reload even if already loaded */
+    force?: boolean;
+    /** Preload without applying */
+    preload?: boolean;
+    /** Remove previous theme CSS */
+    removePrevious?: boolean;
+    /** Custom CSS path override */
+    customPath?: string;
+    /** Fallback to default theme on error */
+    fallbackOnError?: boolean;
+}
+/**
+ * Theme validation result
+ */
+interface ThemeValidationResult {
+    /** Whether the theme is valid */
+    valid: boolean;
+    /** Validation errors */
+    errors: string[];
+    /** Validation warnings */
+    warnings: string[];
+}
+/**
+ * React hook return type for useTheme
+ */
+interface UseThemeReturn {
+    /** Current theme name */
+    theme: string;
+    /** Current active theme object (for JS themes) */
+    activeTheme: Theme | null;
+    /** Function to change theme (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;
+    /** 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;
+}
+/**
+ * Theme context value
+ */
+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>;
+}
+/**
+ * Color palette configuration for a single color
+ */
+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;
+    };
+    /** Text colors */
+    text?: {
+        primary?: string;
+        secondary?: string;
+        disabled?: string;
+    };
+    /** Additional custom colors */
+    [key: string]: any;
+}
+/**
+ * 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;
+}
+/**
+ * Spacing function type
+ */
+type SpacingFunction = (...values: number[]) => string;
+/**
+ * Spacing configuration options for createTheme
+ */
+type SpacingOptions = number | number[] | SpacingFunction;
+/**
+ * Breakpoint values configuration
+ */
+interface BreakpointValues {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    [key: string]: number | undefined;
+}
+/**
+ * Breakpoints configuration options for createTheme
+ */
+interface BreakpointsOptions {
+    /** Breakpoint values in pixels */
+    values?: BreakpointValues;
+    /** Unit for breakpoints (default: 'px') */
+    unit?: string;
+}
+/**
+ * Shadow configuration
+ */
+interface ShadowOptions {
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    [key: string]: string | undefined;
+}
+/**
+ * Transition configuration
+ */
+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;
+    };
+}
+/**
+ * Z-index configuration
+ */
+interface ZIndexOptions {
+    mobileStepper?: number;
+    speedDial?: number;
+    appBar?: number;
+    drawer?: number;
+    modal?: number;
+    snackbar?: number;
+    tooltip?: number;
+    [key: string]: number | undefined;
+}
+/**
+ * Border radius configuration
+ */
+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;
+}
+/**
+ * Custom theme properties for extension
+ * Users can augment this interface via module augmentation
+ */
+interface ThemeCustomProperties {
+    [key: string]: any;
+}
+/**
+ * Theme configuration options for createTheme
+ * Extends ThemeMetadata to support both CSS and JS theme properties
+ */
+interface ThemeOptions extends Partial<ThemeMetadata> {
+    /** Color palette configuration */
+    palette?: PaletteOptions;
+    /** Typography configuration */
+    typography?: TypographyOptions;
+    /** Spacing configuration */
+    spacing?: SpacingOptions;
+    /** Breakpoints configuration */
+    breakpoints?: BreakpointsOptions;
+    /** Shadow configuration */
+    shadows?: ShadowOptions;
+    /** Transition configuration */
+    transitions?: TransitionOptions;
+    /** Z-index configuration */
+    zIndex?: ZIndexOptions;
+    /** Border radius configuration */
+    borderRadius?: BorderRadiusOptions;
+    /** Custom properties */
+    custom?: ThemeCustomProperties;
+}
+/**
+ * Complete theme object with computed values
+ * Generated by createTheme function
+ */
+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;
+}
+
+/**
+ * CSS Variable Generator
+ *
+ * Generates CSS custom properties from design tokens.
+ */
+
+/**
+ * Options for CSS variable generation
+ */
+interface GenerateCSSVariablesOptions {
+    /** CSS selector for the variables (default: ':root') */
+    selector?: string;
+    /** Prefix for CSS variables (default: 'atomix') */
+    prefix?: string;
+}
+/**
+ * Generate CSS variables from tokens
+ *
+ * Converts flat token object to CSS custom properties.
+ *
+ * @param tokens - Design tokens object
+ * @param options - Generation options
+ * @returns CSS string with custom properties
+ *
+ * @example
+ * ```typescript
+ * const tokens = {
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * };
+ *
+ * const css = generateCSSVariables(tokens);
+ * // Returns: ":root {\n  --atomix-primary: #7c3aed;\n  --atomix-spacing-4: 1rem;\n}"
+ * ```
+ */
+declare function generateCSSVariables(tokens: DesignTokens, options?: GenerateCSSVariablesOptions): string;
+/**
+ * Generate CSS variables with custom selector
+ *
+ * Useful for theme-specific selectors like `[data-theme="dark"]`
+ *
+ * @param tokens - Design tokens object
+ * @param selector - CSS selector (e.g., '[data-theme="dark"]')
+ * @param prefix - CSS variable prefix
+ * @returns CSS string
+ *
+ * @example
+ * ```typescript
+ * const css = generateCSSVariablesForSelector(
+ *   tokens,
+ *   '[data-theme="dark"]',
+ *   'atomix'
+ * );
+ * ```
+ */
+declare function generateCSSVariablesForSelector(tokens: DesignTokens, selector: string, prefix?: string): string;
+
+/**
+ * Core Theme Functions
+ *
+ * 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.
+ */
+
+/**
+ * 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' });
+ * ```
+ */
+declare function createTheme(input?: Partial<DesignTokens> | Theme, options?: GenerateCSSVariablesOptions): string;
+
+/**
+ * createThemeObject - Create a theme object with computed values
+ *
+ * Similar to Material-UI's createTheme, this function accepts theme configuration
+ * options and returns a complete theme object with computed values.
+ *
+ * NOTE: For most use cases, use the simple theme system's `createTheme` instead,
+ * which generates CSS from DesignTokens. This function is for advanced use cases
+ * that need the full Theme object structure.
+ *
+ * @example
+ * ```typescript
+ * const theme = createThemeObject({
+ *   palette: {
+ *     primary: { main: '#7AFFD7' },
+ *     secondary: { main: '#FF5733' },
+ *   },
+ *   typography: {
+ *     fontFamily: 'Inter, sans-serif',
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * Create a theme object with computed values
+ *
+ * @param options - Theme configuration options
+ * @returns Complete theme object
+ */
+declare function createThemeObject(...options: ThemeOptions[]): Theme;
+
+/**
+ * Theme Composition Utilities
+ *
+ * Utilities for composing, merging, and extending themes.
+ */
+
+/**
+ * Deep merge multiple objects
+ * Later objects override earlier ones
+ */
+declare function deepMerge<T extends Record<string, any>>(...objects: Partial<T>[]): T;
+/**
+ * Merge multiple theme options into a single theme options object
+ *
+ * @param themes - Theme options to merge
+ * @returns Merged theme options
+ *
+ * @example
+ * ```typescript
+ * const baseTheme = { palette: { primary: { main: '#000' } } };
+ * const customTheme = { palette: { secondary: { main: '#fff' } } };
+ * const merged = mergeTheme(baseTheme, customTheme);
+ * ```
+ */
+declare function mergeTheme(...themes: ThemeOptions[]): ThemeOptions;
+/**
+ * Extend an existing theme with new options
+ *
+ * @param baseTheme - Base theme to extend (can be Theme or ThemeOptions)
+ * @param extension - Theme options to extend with
+ * @returns New theme with extended options
+ *
+ * @example
+ * ```typescript
+ * const base = createTheme({ palette: { primary: { main: '#000' } } });
+ * const extended = extendTheme(base, {
+ *   palette: { secondary: { main: '#fff' } }
+ * });
+ * ```
+ */
+declare function extendTheme(baseTheme: Theme | ThemeOptions, extension: ThemeOptions): Theme;
+
+/**
+ * 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' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * CSS Theme Definition
+ */
+interface CSSThemeDefinition {
+    type: 'css';
+    name: string;
+    class?: string;
+    description?: string;
+    author?: string;
+    version?: string;
+    tags?: string[];
+    supportsDarkMode?: boolean;
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    a11y?: {
+        contrastTarget?: number;
+        modes?: string[];
+    };
+    color?: string;
+    features?: string[];
+    dependencies?: string[];
+    cssPath?: string;
+}
+/**
+ * JavaScript Theme Definition
+ */
+interface JSThemeDefinition {
+    type: 'js';
+    name: string;
+    class?: string;
+    description?: string;
+    author?: string;
+    version?: string;
+    tags?: string[];
+    supportsDarkMode?: boolean;
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    a11y?: {
+        contrastTarget?: number;
+        modes?: string[];
+    };
+    color?: string;
+    features?: string[];
+    dependencies?: string[];
+    createTheme: () => Theme;
+}
+/**
+ * Theme Definition (CSS or JS)
+ */
+type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
+/**
+ * Build configuration (migrated from theme.config.ts)
+ */
+interface BuildConfig {
+    output?: {
+        directory?: string;
+        formats?: {
+            expanded?: string;
+            compressed?: string;
+        };
+    };
+    sass?: {
+        style?: 'expanded' | 'compressed';
+        sourceMap?: boolean;
+        loadPaths?: string[];
+    };
+}
+/**
+ * Runtime configuration (migrated from theme.config.ts)
+ */
+interface RuntimeConfig {
+    basePath?: string;
+    cdnPath?: string | null;
+    preload?: string[];
+    lazy?: boolean;
+    defaultTheme?: string;
+    storageKey?: string;
+    dataAttribute?: string;
+    enablePersistence?: boolean;
+    useMinified?: boolean;
+}
+/**
+ * Integration settings (migrated from theme.config.ts)
+ */
+interface IntegrationConfig {
+    cssVariables?: Record<string, string>;
+    classNames?: {
+        theme?: string;
+        colorMode?: string;
+    };
+}
+
+/**
+ * Theme Configuration Types
+ *
+ * Type definitions for the theme configuration system
+ */
+
+/**
+ * Loaded and validated theme configuration
+ */
+interface LoadedThemeConfig {
+    /** Registered themes */
+    themes: Record<string, ThemeDefinition>;
+    /** Build configuration */
+    build: BuildConfig;
+    /** Runtime configuration */
+    runtime: RuntimeConfig;
+    /** Integration settings */
+    integration: IntegrationConfig;
+    /** Theme dependencies mapping */
+    dependencies: Record<string, string[]>;
+    /** Whether config was validated */
+    validated: boolean;
+    /** Validation errors (if any) */
+    errors?: string[];
+    /** Validation warnings (if any) */
+    warnings?: string[];
+    /** Internal tokens (for generator) */
+    __tokens?: any;
+    /** Internal extensions (for generator) */
+    __extend?: any;
+}
+
+/**
+ * Theme Registry
+ *
+ * Central registry for all themes with discovery and dependency management
+ */
+
+/**
+ * Registry entry
+ */
+interface RegistryEntry {
+    /** Theme ID */
+    id: string;
+    /** Theme definition from config */
+    definition: ThemeDefinition;
+    /** Resolved theme object (for JS themes) */
+    theme?: Theme;
+    /** Whether theme is loaded */
+    loaded: boolean;
+    /** Loading promise (if currently loading) */
+    loading?: Promise<Theme | void>;
+    /** Dependencies */
+    dependencies: string[];
+    /** Dependent themes (themes that depend on this one) */
+    dependents: string[];
+}
+/**
+ * Theme Registry
+ *
+ * Manages theme registration, discovery, and dependency resolution
+ */
+declare class ThemeRegistry {
+    private entries;
+    private config;
+    private initialized;
+    /**
+     * Initialize registry from config
+     */
+    initialize(config?: LoadedThemeConfig): Promise<void>;
+    /**
+     * Register a theme
+     */
+    register(themeId: string, definition: ThemeDefinition): void;
+    /**
+     * Get theme entry
+     */
+    get(themeId: string): RegistryEntry | undefined;
+    /**
+     * Check if theme exists
+     */
+    has(themeId: string): boolean;
+    /**
+     * Get all theme IDs
+     */
+    getAllIds(): string[];
+    /**
+     * Get all theme metadata
+     */
+    getAllMetadata(): ThemeMetadata[];
+    /**
+     * Get theme definition
+     */
+    getDefinition(themeId: string): ThemeDefinition | undefined;
+    /**
+     * Check if a theme is loaded
+     */
+    isThemeLoaded(themeId: string): boolean;
+    /**
+     * Mark a theme as loaded
+     */
+    markLoaded(themeId: string, theme?: Theme): void;
+    /**
+     * Get theme object (for JS themes)
+     */
+    getTheme(themeId: string): Theme | undefined;
+    /**
+     * Get dependencies for a theme
+     */
+    getDependencies(themeId: string): string[];
+    /**
+     * Get dependents for a theme (themes that depend on this one)
+     */
+    getDependents(themeId: string): string[];
+    /**
+     * Resolve all dependencies in correct order
+     */
+    resolveDependencyOrder(themeId: string): string[];
+    /**
+     * Resolve dependencies and build dependency graph
+     */
+    private resolveDependencies;
+    /**
+     * Validate all themes
+     */
+    validate(): {
+        valid: boolean;
+        errors: string[];
+    };
+    /**
+     * Clear registry
+     */
+    clear(): void;
+}
+
+/**
+ * CSS File Utilities
+ *
+ * Save CSS to file system (Node.js only).
+ */
+/**
+ * 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');
+ * ```
+ */
+declare function injectCSS(css: string, id?: string): void;
+/**
+ * Remove injected CSS from DOM
+ *
+ * Removes the style element with the given ID from the document head.
+ *
+ * @param id - Style element ID to remove (default: 'atomix-theme')
+ *
+ * @example
+ * ```typescript
+ * removeCSS(); // Removes default 'atomix-theme'
+ * removeCSS('my-custom-theme'); // Removes custom ID
+ * ```
+ */
+declare function removeCSS(id?: string): void;
+/**
+ * Check if CSS is already injected
+ *
+ * @param id - Style element ID to check (default: 'atomix-theme')
+ * @returns True if style element exists
+ */
+declare function isCSSInjected(id?: string): boolean;
+
+/**
+ * Config Loader
+ *
+ * Load design tokens from atomix.config.ts and convert to flat token format.
+ */
+
+/**
+ * Load theme tokens from atomix.config.ts
+ *
+ * Loads atomix.config.ts and extracts theme tokens.
+ * Config file is required - throws error if not found.
+ *
+ * @param configPath - Optional custom config path (default: 'atomix.config.ts')
+ * @returns Partial DesignTokens from config
+ * @throws Error if config file is not found or cannot be loaded
+ *
+ * @example
+ * ```typescript
+ * const tokens = await loadThemeFromConfig();
+ * const css = createTheme(tokens);
+ * injectTheme(css);
+ * ```
+ */
+declare function loadThemeFromConfig(configPath?: string): Promise<Partial<DesignTokens>>;
+/**
+ * Load theme tokens from atomix.config.ts (synchronous version)
+ *
+ * Synchronous version that uses require() instead of dynamic import.
+ * Only works in Node.js environment.
+ * Config file is required - throws error if not found.
+ *
+ * @param configPath - Optional custom config path
+ * @returns Partial DesignTokens from config
+ * @throws Error if config file is not found or cannot be loaded
+ */
+declare function loadThemeFromConfigSync(configPath?: string): Partial<DesignTokens>;
+
+/**
+ * Theme Provider
+ *
+ * React context provider for theme management
+ */
+
+/**
+ * ThemeProvider component
+ *
+ * Provides theme context to child components and manages theme state.
+ *
+ * **Config-First Approach**: If `defaultTheme` is not provided, loads from `atomix.config.ts`.
+ * Config file is required when `defaultTheme` is not provided.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider } from '@shohojdhara/atomix/theme';
+ *
+ * // Loads from atomix.config.ts (config file required)
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ *
+ * // Provide explicit theme (bypasses config)
+ * function App() {
+ *   return (
+ *     <ThemeProvider defaultTheme="dark">
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
+
+/**
+ * useTheme Hook
+ *
+ * React hook for accessing theme context
+ */
+
+/**
+ * useTheme hook
+ *
+ * Access theme context and theme management functions
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, setTheme, availableThemes } = useTheme();
+ *
+ *   return (
+ *     <div>
+ *       <p>Current theme: {theme}</p>
+ *       <button onClick={() => setTheme('dark-theme')}>
+ *         Switch to Dark
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useTheme(): UseThemeReturn;
+
+/**
+ * Theme context with default values
+ */
+declare const ThemeContext: React$1.Context<ThemeContextValue | null>;
+
+/**
+ * Theme Error Boundary
+ *
+ * React error boundary for catching and handling theme-related errors.
+ * Prevents the entire app from crashing when theme errors occur.
+ */
+
+/**
+ * Error boundary state
+ */
+interface ThemeErrorBoundaryState {
+    /** Whether an error has occurred */
+    hasError: boolean;
+    /** The error that occurred */
+    error: Error | null;
+    /** Error information */
+    errorInfo: ErrorInfo | null;
+}
+/**
+ * Error boundary props
+ */
+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;
+}
+
+/**
+ * Theme Applicator
+ *
+ * Applies theme configurations to the DOM, including CSS variables,
+ * component overrides, typography, spacing, and color palettes.
+ *
+ * Uses the unified theme system for CSS generation and injection.
+ */
+
+/**
+ * Theme applicator class for runtime theme application
+ *
+ * Uses the unified theme system for efficient CSS variable generation and injection.
+ */
+declare class ThemeApplicator {
+    private root;
+    private styleId;
+    constructor(root?: HTMLElement);
+    /**
+     * Apply a complete theme configuration
+     *
+     * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
+     * Automatically respects atomix.config.ts when using DesignTokens.
+     */
+    applyTheme(theme: Theme | DesignTokens): void;
+    /**
+     * Apply DesignTokens using unified theme system
+     *
+     * Uses createTheme() which automatically loads from atomix.config.ts
+     * if no tokens are provided, ensuring config is always respected.
+     */
+    private applyDesignTokens;
+    /**
+     * Check if object is DesignTokens
+     */
+    private isDesignTokens;
+    /**
+     * Apply global CSS variables (for component overrides)
+     */
+    private applyGlobalCSSVars;
+    /**
+     * Apply component-level overrides
+     */
+    private applyComponentOverrides;
+    /**
+     * Apply override for a specific component
+     */
+    private applyComponentOverride;
+    /**
+     * Clear all applied CSS variables
+     */
+    private clearAppliedVars;
+    /**
+     * Remove theme application
+     */
+    removeTheme(): void;
+    /**
+     * Update specific CSS variables without clearing all
+     */
+    updateCSSVars(vars: Record<string, string | number>): void;
+}
+/**
+ * Get or create global theme applicator
+ */
+declare function getThemeApplicator(): ThemeApplicator;
+/**
+ * Apply theme using global applicator
+ */
+declare function applyTheme(theme: Theme): void;
+
+/**
+ * Theme Preview Component
+ *
+ * React component for previewing themes in development
+ * Enhanced with interactive components, viewport controls, and dark mode toggle
+ */
+
+/**
+ * Theme preview props
+ */
+interface ThemePreviewProps {
+    /** Theme to preview */
+    theme: Theme;
+    /** Show theme details */
+    showDetails?: boolean;
+    /** Show color palette */
+    showPalette?: boolean;
+    /** Show typography */
+    showTypography?: boolean;
+    /** Show spacing */
+    showSpacing?: boolean;
+    /** Custom components to render */
+    children?: React__default.ReactNode;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
+/**
+ * Theme Preview Component
+ *
+ * Renders a preview of a theme with sample components
+ */
+declare const ThemePreview: React__default.FC<ThemePreviewProps>;
+
+/**
+ * Theme Inspector Component
+ *
+ * React component for inspecting and debugging themes
+ * Enhanced with search/filter and copy path functionality
+ */
+
+/**
+ * Theme inspector props
+ */
+interface ThemeInspectorProps {
+    /** Theme to inspect */
+    theme: Theme;
+    /** Show validation results */
+    showValidation?: boolean;
+    /** Show CSS variables */
+    showCSSVariables?: boolean;
+    /** Show theme structure */
+    showStructure?: boolean;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
+/**
+ * Theme Inspector Component
+ *
+ * Provides detailed inspection and debugging information for themes
+ */
+declare const ThemeInspector: React__default.FC<ThemeInspectorProps>;
+
+/**
+ * Theme Comparator Component
+ *
+ * React component for comparing two themes side-by-side
+ * Enhanced with search/filter and improved visual diff styling
+ */
+
+/**
+ * Theme comparator props
+ */
+interface ThemeComparatorProps {
+    /** First theme to compare */
+    themeA: Theme;
+    /** Second theme to compare */
+    themeB: Theme;
+    /** Show only differences */
+    showOnlyDifferences?: boolean;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
+/**
+ * Theme Comparator Component
+ *
+ * Compares two themes and highlights differences
+ */
+declare const ThemeComparator: React__default.FC<ThemeComparatorProps>;
+
+/**
+ * Theme Live Editor Component
+ *
+ * React component for live editing themes in development
+ * Enhanced with undo/redo, keyboard shortcuts, resizable layout, and better color pickers
+ */
+
+/**
+ * Live editor props
+ */
+interface ThemeLiveEditorProps {
+    /** Initial theme */
+    initialTheme: Theme;
+    /** Callback when theme changes */
+    onChange?: (theme: Theme) => void;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
+/**
+ * Theme Live Editor Component
+ *
+ * Allows live editing of theme properties with instant preview
+ */
+declare const ThemeLiveEditor: React__default.FC<ThemeLiveEditorProps>;
+
+/**
+ * Theme Validator
+ *
+ * Runtime theme validation including color contrast and accessibility checks
+ */
+
+/**
+ * Validation result
+ */
+interface ValidationResult {
+    /** Whether theme is valid */
+    valid: boolean;
+    /** Validation errors */
+    errors: string[];
+    /** Validation warnings */
+    warnings: string[];
+    /** Accessibility issues */
+    a11yIssues: A11yIssue[];
+}
+/**
+ * Accessibility issue
+ */
+interface A11yIssue {
+    /** Issue type */
+    type: 'contrast' | 'color' | 'missing';
+    /** Severity */
+    severity: 'error' | 'warning';
+    /** Issue message */
+    message: string;
+    /** Affected property */
+    property?: string;
+    /** Current value */
+    value?: string;
+    /** Recommended value */
+    recommended?: string;
+}
+/**
+ * Theme Validator
+ *
+ * Validates themes for correctness and accessibility
+ */
+declare class ThemeValidator {
+    /**
+     * Validate theme
+     */
+    validate(theme: Theme, metadata?: ThemeMetadata): ValidationResult;
+    /**
+     * Validate palette
+     */
+    private validatePalette;
+    /**
+     * Validate typography
+     */
+    private validateTypography;
+    /**
+     * Validate spacing
+     */
+    private validateSpacing;
+    /**
+     * Validate breakpoints
+     */
+    private validateBreakpoints;
+    /**
+     * Check color contrast ratio
+     */
+    private checkContrast;
+    /**
+     * Check if color is valid
+     */
+    private isValidColor;
+    /**
+     * Validate transitions
+     */
+    private validateTransitions;
+    /**
+     * Validate z-index
+     */
+    private validateZIndex;
+    /**
+     * Validate border radius
+     */
+    private validateBorderRadius;
+    /**
+     * Validate custom properties
+     */
+    private validateCustom;
+}
+
+/**
+ * useHistory Hook
+ *
+ * React hook for managing undo/redo history
+ */
+interface UseHistoryOptions {
+    /** Maximum number of history entries (default: 50) */
+    maxHistorySize?: number;
+    /** Initial state */
+    initialState?: any;
+}
+interface UseHistoryReturn<T> {
+    /** Current state */
+    state: T;
+    /** Update state and add to history */
+    setState: (newState: T) => void;
+    /** Undo last change */
+    undo: () => void;
+    /** Redo last undone change */
+    redo: () => void;
+    /** Check if undo is available */
+    canUndo: boolean;
+    /** Check if redo is available */
+    canRedo: boolean;
+    /** Clear history */
+    clearHistory: () => void;
+    /** Get history statistics */
+    getHistoryStats: () => {
+        currentIndex: number;
+        totalEntries: number;
+    };
+}
+/**
+ * useHistory hook
+ *
+ * Provides undo/redo functionality for state management
+ *
+ * @example
+ * ```tsx
+ * const { state, setState, undo, redo, canUndo, canRedo } = useHistory({
+ *   initialState: theme,
+ *   maxHistorySize: 50
+ * });
+ * ```
+ */
+declare function useHistory<T>(options?: UseHistoryOptions): UseHistoryReturn<T>;
+
+/**
+ * Theme Adapter
+ *
+ * Converts between Theme objects and DesignTokens.
+ */
+
+/**
+ * Convert Theme object to DesignTokens
+ *
+ * Extracts values from a Theme object and converts them to flat DesignTokens format.
+ *
+ * @param theme - Theme object to convert
+ * @returns Partial DesignTokens object
+ *
+ * @example
+ * ```typescript
+ * const theme = createTheme({ palette: { primary: { main: '#7c3aed' } } });
+ * const tokens = themeToDesignTokens(theme);
+ * // Returns: { 'primary': '#7c3aed', ... }
+ * ```
+ */
+declare function themeToDesignTokens(theme: Theme): Partial<DesignTokens>;
+/**
+ * Convert DesignTokens to Theme-compatible CSS variables
+ *
+ * @param tokens - DesignTokens object
+ * @returns CSS variables object compatible with Theme.cssVars
+ */
+declare function designTokensToCSSVars(tokens: Partial<DesignTokens>): Record<string, string>;
+/**
+ * Create DesignTokens from Theme with defaults
+ *
+ * Converts a Theme to DesignTokens and merges with default tokens.
+ *
+ * @param theme - Theme object to convert
+ * @returns Complete DesignTokens object
+ */
+declare function createDesignTokensFromTheme(theme: Theme): DesignTokens;
+/**
+ * Create a minimal Theme object from DesignTokens
+ *
+ * @param tokens - DesignTokens to convert
+ * @returns Minimal Theme object with cssVars populated
+ */
+declare function designTokensToTheme(tokens: Partial<DesignTokens>): Partial<Theme>;
+
+/**
+ * CSS Variable Mapper
+ *
+ * Utilities for generating and managing CSS custom properties from SCSS tokens
+ * and component configurations.
+ */
+/**
+ * Configuration for generating CSS variables for a component
+ */
+interface CSSVariableConfig {
+    /** Component name (e.g., 'button', 'card') */
+    component: string;
+    /** Base properties for the component */
+    properties: Record<string, string | number>;
+    /** Part-specific properties (e.g., icon, label) */
+    parts?: Record<string, Record<string, string | number>>;
+    /** State-specific properties (e.g., hover, active, disabled) */
+    states?: Record<string, Record<string, string | number>>;
+    /** Variant-specific properties (e.g., primary, secondary) */
+    variants?: Record<string, Record<string, string | number>>;
+}
+/**
+ * CSS variable naming options
+ */
+interface CSSVariableNamingOptions {
+    /** Prefix for all variables (default: 'atomix') */
+    prefix?: string;
+    /** Separator between parts (default: '-') */
+    separator?: string;
+    /** Whether to include component name in variable (default: true) */
+    includeComponent?: boolean;
+}
+/**
+ * Generate CSS variable name from parts
+ *
+ * @example
+ * generateCSSVariableName('button', 'bg', { prefix: 'atomix' })
+ * // Returns: '--atomix-button-bg'
+ */
+declare function generateCSSVariableName(component: string, property: string, options?: CSSVariableNamingOptions): string;
+/**
+ * Generate CSS variables object from configuration
+ *
+ * @example
+ * const vars = generateComponentCSSVars({
+ *   component: 'button',
+ *   properties: { bg: '#000', color: '#fff' }
+ * })
+ * // Returns: { '--atomix-button-bg': '#000', '--atomix-button-color': '#fff' }
+ */
+declare function generateComponentCSSVars(config: CSSVariableConfig, options?: CSSVariableNamingOptions): Record<string, string>;
+/**
+ * Map SCSS tokens to CSS custom properties
+ *
+ * @example
+ * const tokens = { '$primary-color': '#7AFFD7', '$spacing-md': '16px' }
+ * const vars = mapSCSSTokensToCSSVars(tokens)
+ * // Returns: { '--primary-color': '#7AFFD7', '--spacing-md': '16px' }
+ */
+declare function mapSCSSTokensToCSSVars(tokens: Record<string, any>, options?: CSSVariableNamingOptions): Record<string, string>;
+/**
+ * Apply CSS variables to an element
+ *
+ * @param element - Target element (defaults to document.documentElement)
+ * @param vars - CSS variables to apply
+ */
+declare function applyCSSVariables(vars: Record<string, string | number>, element?: HTMLElement): void;
+/**
+ * Remove CSS variables from an element
+ *
+ * @param varNames - Variable names to remove
+ * @param element - Target element (defaults to document.documentElement)
+ */
+declare function removeCSSVariables(varNames: string[], element?: HTMLElement): void;
+/**
+ * Get CSS variable value from an element
+ *
+ * @param varName - Variable name to get
+ * @param element - Target element (defaults to document.documentElement)
+ * @returns Variable value or null if not found
+ */
+declare function getCSSVariable(varName: string, element?: HTMLElement): string | null;
+/**
+ * Convert CSS variable object to inline style object
+ *
+ * @example
+ * const vars = { '--atomix-button-bg': '#000' }
+ * const style = cssVarsToStyle(vars)
+ * // Returns: { '--atomix-button-bg': '#000' } as React.CSSProperties
+ */
+declare function cssVarsToStyle(vars: Record<string, string | number>): React.CSSProperties;
+/**
+ * Merge multiple CSS variable objects
+ * Later objects override earlier ones
+ */
+declare function mergeCSSVars(...varObjects: Array<Record<string, string | number> | undefined>): Record<string, string | number>;
+/**
+ * Validate CSS variable name format
+ */
+declare function isValidCSSVariableName(name: string): boolean;
+/**
+ * Extract component name from CSS variable name
+ *
+ * @example
+ * extractComponentName('--atomix-button-bg')
+ * // Returns: 'button'
+ */
+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
+ *
+ * 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>;
+
+export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeRegistry, ThemeValidator, applyCSSVariables, applyTheme, createDesignTokensFromTheme, createTheme, createThemeObject, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, designTokensToTheme, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateComponentCSSVars, getCSSVariable, getDesignTokensFromTheme, getThemeApplicator, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isThemeObject, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, removeCSS, removeCSSVariables, removeTheme, saveCSSFile, saveCSSFileSync, saveTheme, themeToDesignTokens, useHistory, useTheme };
+export type { A11yIssue, CSSVariableConfig, CSSVariableNamingOptions, ComponentThemeOverride, DesignTokens, GenerateCSSVariablesOptions, RTLConfig, Theme, ThemeChangeEvent, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemeMetadata, ThemePreviewProps, ThemeProviderProps, ThemeValidationResult, UseHistoryOptions, UseHistoryReturn, UseThemeReturn, ValidationResult };