@shohojdhara/atomix 0.3.7 → 0.3.8

package/dist/theme.d.ts

@@ -294,6 +294,203 @@ declare const defaultTokens: DesignTokens;
  */
 declare function createTokens(overrides?: Partial<DesignTokens>): DesignTokens;
 
+/**
+ * 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
+ *
+ * Simplified theme system using DesignTokens only.
+ * Config-first approach: loads from atomix.config.ts when no input is provided.
+ */
+
+/**
+ * Create theme CSS from DesignTokens
+ *
+ * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
+ *
+ * @param input - DesignTokens (partial) or undefined (loads from config)
+ * @param options - CSS generation options (prefix is automatically read from config if not provided)
+ * @returns CSS string with custom properties
+ * @throws Error if config loading fails when no input is provided
+ *
+ * @example
+ * ```typescript
+ * // Loads from atomix.config.ts
+ * const css = createTheme();
+ *
+ * // Using DesignTokens
+ * const css = createTheme({
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * });
+ *
+ * // With custom options
+ * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
+ * ```
+ */
+declare function createTheme(input?: Partial<DesignTokens>, options?: GenerateCSSVariablesOptions): string;
+
+/**
+ * Theme Composition Utilities
+ *
+ * Simplified utilities for composing and merging DesignTokens.
+ */
+/**
+ * Deep merge multiple objects
+ * Later objects override earlier ones
+ */
+declare function deepMerge<T extends Record<string, unknown>>(...objects: Partial<T>[]): T;
+
+/**
+ * Merge multiple DesignTokens objects into a single DesignTokens object
+ *
+ * @param tokens - DesignTokens objects to merge
+ * @returns Merged DesignTokens object
+ *
+ * @example
+ * ```typescript
+ * const baseTokens = { 'primary': '#000', 'spacing-4': '1rem' };
+ * const customTokens = { 'secondary': '#fff', 'spacing-4': '1.5rem' };
+ * const merged = mergeTheme(baseTokens, customTokens);
+ * // Returns: { 'primary': '#000', 'secondary': '#fff', 'spacing-4': '1.5rem' }
+ * ```
+ */
+declare function mergeTheme(...tokens: Partial<DesignTokens>[]): Partial<DesignTokens>;
+/**
+ * Extend DesignTokens with additional tokens
+ *
+ * @param baseTokens - Base DesignTokens to extend
+ * @param extension - Additional DesignTokens to merge
+ * @returns Extended DesignTokens object
+ *
+ * @example
+ * ```typescript
+ * const base = { 'primary': '#000' };
+ * const extended = extendTheme(base, { 'secondary': '#fff' });
+ * // Returns: { 'primary': '#000', 'secondary': '#fff' }
+ * ```
+ */
+declare function extendTheme(baseTokens: Partial<DesignTokens>, extension: Partial<DesignTokens>): Partial<DesignTokens>;
+
+/**
+ * Theme Metadata interface
+ */
+interface ThemeMetadata$1 {
+    name: string;
+    class: string;
+    description?: string;
+    version?: string;
+    [key: string]: any;
+}
+/**
+ * Theme Registry type - a record of theme IDs to metadata
+ */
+type ThemeRegistry = Record<string, ThemeMetadata$1>;
+/**
+ * Create a new theme registry
+ */
+declare function createThemeRegistry(): ThemeRegistry;
+/**
+ * Register a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ * @param metadata - Theme metadata
+ */
+declare function registerTheme(registry: ThemeRegistry, id: string, metadata: ThemeMetadata$1): void;
+/**
+ * Unregister a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+declare function unregisterTheme(registry: ThemeRegistry, id: string): boolean;
+/**
+ * Check if a theme is registered
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+declare function hasTheme(registry: ThemeRegistry, id: string): boolean;
+/**
+ * Get theme metadata
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+declare function getTheme(registry: ThemeRegistry, id: string): ThemeMetadata$1 | undefined;
+/**
+ * Get all registered theme metadata
+ * @param registry - Theme registry object
+ */
+declare function getAllThemes(registry: ThemeRegistry): ThemeMetadata$1[];
+/**
+ * Get all registered theme IDs
+ * @param registry - Theme registry object
+ */
+declare function getThemeIds(registry: ThemeRegistry): string[];
+/**
+ * Clear all registered themes
+ * @param registry - Theme registry object
+ */
+declare function clearThemes(registry: ThemeRegistry): void;
+/**
+ * Get the number of registered themes
+ * @param registry - Theme registry object
+ */
+declare function getThemeCount(registry: ThemeRegistry): number;
+
 /**
  * Theme Manager Type Definitions
  *
@@ -302,7 +499,7 @@ declare function createTokens(overrides?: Partial<DesignTokens>): DesignTokens;
 /**
  * Theme metadata interface matching themes.config.js structure
  */
-interface ThemeMetadata$1 {
+interface ThemeMetadata {
     /** Display name of the theme */
     name: string;
     /** Unique identifier/class name for the theme */
@@ -341,8 +538,8 @@ interface ThemeChangeEvent {
     previousTheme: string | null;
     /** New theme name */
     currentTheme: string;
-    /** Theme object (for JS themes) */
-    themeObject?: Theme | null;
+    /** DesignTokens if using tokens-based theme */
+    tokens?: DesignTokens | null;
     /** Timestamp of the change */
     timestamp: number;
     /** Whether the change was from user action or system */
@@ -380,12 +577,12 @@ interface ThemeValidationResult {
 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>;
+    /** Current active DesignTokens (if using tokens-based theme) */
+    activeTokens: DesignTokens | null;
+    /** Function to change theme (supports string or DesignTokens) */
+    setTheme: (theme: string | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
     /** Available themes */
-    availableThemes: ThemeMetadata$1[];
+    availableThemes: ThemeMetadata[];
     /** Whether a theme is currently loading */
     isLoading: boolean;
     /** Current error, if any */
@@ -451,10 +648,10 @@ interface ThemeComponentOverrides {
 interface ThemeProviderProps {
     /** Child components */
     children: React.ReactNode;
-    /** Default theme */
-    defaultTheme?: string | Theme;
+    /** Default theme (string name or DesignTokens) */
+    defaultTheme?: string | DesignTokens | Partial<DesignTokens>;
     /** Available themes */
-    themes?: Record<string, ThemeMetadata$1>;
+    themes?: Record<string, ThemeMetadata>;
     /** Base path for theme CSS */
     basePath?: string;
     /** CDN path for theme CSS */
@@ -472,7 +669,7 @@ interface ThemeProviderProps {
     /** Use minified CSS */
     useMinified?: boolean;
     /** Callback when theme changes */
-    onThemeChange?: (theme: string | Theme | DesignTokens) => void;
+    onThemeChange?: (theme: string | DesignTokens) => void;
     /** Callback on error */
     onError?: (error: Error, themeName: string) => void;
 }
@@ -482,12 +679,12 @@ interface ThemeProviderProps {
 interface ThemeContextValue {
     /** Current theme name */
     theme: string;
-    /** Current active theme object (for JS themes) */
-    activeTheme: Theme | null;
-    /** Set theme function (supports string, Theme, or DesignTokens) */
-    setTheme: (theme: string | Theme | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
+    /** Current active DesignTokens (if using tokens-based theme) */
+    activeTokens: DesignTokens | null;
+    /** Set theme function (supports string or DesignTokens) */
+    setTheme: (theme: string | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
     /** Available themes */
-    availableThemes: ThemeMetadata$1[];
+    availableThemes: ThemeMetadata[];
     /** Loading state */
     isLoading: boolean;
     /** Error state */
@@ -510,36 +707,6 @@ interface PaletteColor {
     /** Contrast text color (auto-generated if not provided) */
     contrastText?: string;
 }
-/**
- * Palette configuration options for createTheme
- */
-interface PaletteOptions {
-    /** Primary color configuration */
-    primary?: Partial<PaletteColor> | string;
-    /** Secondary color configuration */
-    secondary?: Partial<PaletteColor> | string;
-    /** Error color configuration */
-    error?: Partial<PaletteColor> | string;
-    /** Warning color configuration */
-    warning?: Partial<PaletteColor> | string;
-    /** Info color configuration */
-    info?: Partial<PaletteColor> | string;
-    /** Success color configuration */
-    success?: Partial<PaletteColor> | string;
-    /** Background colors */
-    background?: {
-        default?: string;
-        subtle?: string;
-    };
-    /** Text colors */
-    text?: {
-        primary?: string;
-        secondary?: string;
-        disabled?: string;
-    };
-    /** Additional custom colors */
-    [key: string]: any;
-}
 /**
  * Typography configuration options for createTheme
  */
@@ -609,10 +776,6 @@ interface TypographyOptions {
  * Spacing function type
  */
 type SpacingFunction = (...values: number[]) => string;
-/**
- * Spacing configuration options for createTheme
- */
-type SpacingOptions = number | number[] | SpacingFunction;
 /**
  * Breakpoint values configuration
  */
@@ -624,15 +787,6 @@ interface BreakpointValues {
     xl?: number;
     [key: string]: number | undefined;
 }
-/**
- * Breakpoints configuration options for createTheme
- */
-interface BreakpointsOptions {
-    /** Breakpoint values in pixels */
-    values?: BreakpointValues;
-    /** Unit for breakpoints (default: 'px') */
-    unit?: string;
-}
 /**
  * Shadow configuration
  */
@@ -710,35 +864,11 @@ interface BorderRadiusOptions {
 interface ThemeCustomProperties {
     [key: string]: any;
 }
-/**
- * Theme configuration options for createTheme
- * Extends ThemeMetadata to support both CSS and JS theme properties
- */
-interface ThemeOptions extends Partial<ThemeMetadata$1> {
-    /** 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$1 {
+interface Theme extends ThemeMetadata {
     /** Color palette with computed values */
     palette: {
         primary: PaletteColor;
@@ -804,241 +934,6 @@ interface Theme extends ThemeMetadata$1 {
     __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
- *
- * Simplified theme system that handles both DesignTokens and Theme objects.
- * Config-first approach: loads from atomix.config.ts when no input is provided.
- * Config file is required for automatic loading.
- */
-
-/**
- * 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
- *
- * Simplified utilities for composing, merging, and extending themes.
- */
-
-/**
- * Deep merge multiple objects
- * Later objects override earlier ones
- */
-declare function deepMerge<T extends Record<string, unknown>>(...objects: Partial<T>[]): T;
-/**
- * Merge multiple theme options into a single theme options object
- *
- * @param themes - Theme options to merge
- * @returns Merged theme options
- *
- * @example
- * ```typescript
- * const baseTheme = { palette: { primary: { main: '#000' } } };
- * const customTheme = { palette: { secondary: { main: '#fff' } } };
- * const merged = mergeTheme(baseTheme, customTheme);
- * ```
- */
-declare function mergeTheme(...themes: ThemeOptions[]): ThemeOptions;
-/**
- * Extend an existing theme with new options
- *
- * @param baseTheme - Base theme to extend (can be Theme or ThemeOptions)
- * @param extension - Theme options to extend with
- * @returns New theme with extended options
- *
- * @example
- * ```typescript
- * const base = createTheme({ palette: { primary: { main: '#000' } } });
- * const extended = extendTheme(base, {
- *   palette: { secondary: { main: '#fff' } }
- * });
- * ```
- */
-declare function extendTheme(baseTheme: Theme | ThemeOptions, extension: ThemeOptions): Theme;
-
-/**
- * Theme Metadata interface
- */
-interface ThemeMetadata {
-    name: string;
-    class: string;
-    description?: string;
-    version?: string;
-    [key: string]: any;
-}
-/**
- * Theme Registry type - a record of theme IDs to metadata
- */
-type ThemeRegistry = Record<string, ThemeMetadata>;
-/**
- * Create a new theme registry
- */
-declare function createThemeRegistry(): ThemeRegistry;
-/**
- * Register a theme
- * @param registry - Theme registry object
- * @param id - Theme identifier
- * @param metadata - Theme metadata
- */
-declare function registerTheme(registry: ThemeRegistry, id: string, metadata: ThemeMetadata): void;
-/**
- * Unregister a theme
- * @param registry - Theme registry object
- * @param id - Theme identifier
- */
-declare function unregisterTheme(registry: ThemeRegistry, id: string): boolean;
-/**
- * Check if a theme is registered
- * @param registry - Theme registry object
- * @param id - Theme identifier
- */
-declare function hasTheme(registry: ThemeRegistry, id: string): boolean;
-/**
- * Get theme metadata
- * @param registry - Theme registry object
- * @param id - Theme identifier
- */
-declare function getTheme(registry: ThemeRegistry, id: string): ThemeMetadata | undefined;
-/**
- * Get all registered theme metadata
- * @param registry - Theme registry object
- */
-declare function getAllThemes(registry: ThemeRegistry): ThemeMetadata[];
-/**
- * Get all registered theme IDs
- * @param registry - Theme registry object
- */
-declare function getThemeIds(registry: ThemeRegistry): string[];
-/**
- * Clear all registered themes
- * @param registry - Theme registry object
- */
-declare function clearThemes(registry: ThemeRegistry): void;
-/**
- * Get the number of registered themes
- * @param registry - Theme registry object
- */
-declare function getThemeCount(registry: ThemeRegistry): number;
-
 /**
  * Naming Utilities
  *
@@ -1075,13 +970,14 @@ declare function themePropertyToCSSVar(propertyPath: string, prefix?: string): s
  * Component Theming Utilities
  *
  * Provides consistent patterns for applying theme values to components
+ * using DesignTokens and CSS variables
  */
 
 interface ComponentThemeOptions {
     component: string;
     variant?: string;
     size?: string;
-    theme: Theme;
+    tokens?: Partial<DesignTokens>;
 }
 /**
  * Get a theme value for a specific component using CSS variables
@@ -1089,17 +985,17 @@ interface ComponentThemeOptions {
  */
 declare function getComponentThemeValue(component: string, property: string, variant?: string, size?: string): string;
 /**
- * Generate component-specific CSS variables from theme
+ * Generate component-specific CSS variables from DesignTokens
  */
-declare function generateComponentCSSVars(component: string, theme: Theme, variant?: string, size?: string): Record<string, string>;
+declare function generateComponentCSSVars(component: string, tokens?: Partial<DesignTokens>, variant?: string, size?: string): Record<string, string>;
 /**
- * Apply consistent theme to component style object
+ * Apply consistent theme to component style object using DesignTokens
  */
-declare function applyComponentTheme(component: string, style?: React.CSSProperties, variant?: string, size?: string, theme?: Theme): React.CSSProperties;
+declare function applyComponentTheme(component: string, style?: React.CSSProperties, variant?: string, size?: string, tokens?: Partial<DesignTokens>): React.CSSProperties;
 /**
  * Create a hook for consistent component theming
  */
-declare function useComponentTheme(component: string, variant?: string, size?: string, theme?: Theme): (property: string) => string;
+declare function useComponentTheme(component: string, variant?: string, size?: string, tokens?: Partial<DesignTokens>): (property: string) => string;
 
 /**
  * CSS Injection Utilities
@@ -1187,7 +1083,7 @@ declare function loadThemeFromConfig(options?: {
  * React context provider for theme management with separated concerns.
  * Simplified version focusing on core functionality:
  * - String-based themes (CSS files)
- * - JS Theme objects
+ * - DesignTokens (dynamic themes)
  * - Persistence via localStorage
  *
  * Falls back to 'default' theme if no configuration is found.
@@ -1226,14 +1122,13 @@ declare function useTheme(): UseThemeReturn;
 /**
  * Standardized hook for accessing theme tokens in components
  *
- * Provides consistent access to theme values across all components
- * using either CSS custom properties or theme object values.
+ * Provides consistent access to theme values using CSS custom properties
+ * and DesignTokens.
  */
 type ThemeTokens = {
     theme: string;
-    activeTheme: Theme | null;
+    activeTokens: DesignTokens | null;
     getToken: (tokenName: string, fallback?: string) => string;
-    getThemeValue: (path: string, fallback?: any) => any;
     colors: {
         primary: string;
         secondary: string;
@@ -1328,35 +1223,16 @@ declare class ThemeApplicator {
     private styleId;
     constructor(root?: HTMLElement);
     /**
-     * Apply a complete theme configuration
+     * Apply a complete theme configuration using DesignTokens
      *
-     * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
+     * Uses the unified theme system to generate 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;
+    applyTheme(tokens: Partial<DesignTokens>): void;
     /**
-     * Check if object is DesignTokens
-     */
-    private isDesignTokens;
-    /**
-     * Apply global CSS variables (for component overrides)
+     * Apply global CSS variables
      */
     private applyGlobalCSSVars;
-    /**
-     * Apply component-level overrides
-     */
-    private applyComponentOverrides;
-    /**
-     * Apply override for a specific component
-     */
-    private applyComponentOverride;
     /**
      * Clear all applied CSS variables
      */
@@ -1377,7 +1253,7 @@ declare function getThemeApplicator(): ThemeApplicator;
 /**
  * Apply theme using global applicator
  */
-declare function applyTheme(theme: Theme | DesignTokens): void;
+declare function applyTheme(tokens: Partial<DesignTokens>): void;
 
 /**
  * Theme Preview Component
@@ -1546,7 +1422,7 @@ declare class ThemeValidator {
     /**
      * Validate theme
      */
-    validate(theme: Theme, metadata?: ThemeMetadata$1): ValidationResult;
+    validate(theme: Theme, metadata?: ThemeMetadata): ValidationResult;
     /**
      * Validate palette
      */
@@ -1642,22 +1518,6 @@ declare function useHistory<T>(options?: UseHistoryOptions): UseHistoryReturn<T>
  * Converts between Theme objects and DesignTokens.
  */
 
-/**
- * Convert Theme object to DesignTokens
- *
- * Extracts values from a Theme object and converts them to flat DesignTokens format.
- *
- * @param theme - Theme object to convert
- * @returns Partial DesignTokens object
- *
- * @example
- * ```typescript
- * const theme = createTheme({ palette: { primary: { main: '#7c3aed' } } });
- * const tokens = themeToDesignTokens(theme);
- * // Returns: { 'primary': '#7c3aed', ... }
- * ```
- */
-declare function themeToDesignTokens(theme: Theme): Partial<DesignTokens>;
 /**
  * Convert DesignTokens to Theme-compatible CSS variables
  *
@@ -1665,22 +1525,6 @@ declare function themeToDesignTokens(theme: Theme): Partial<DesignTokens>;
  * @returns CSS variables object compatible with Theme.cssVars
  */
 declare function designTokensToCSSVars(tokens: Partial<DesignTokens>): Record<string, string>;
-/**
- * Create DesignTokens from Theme with defaults
- *
- * Converts a Theme to DesignTokens and merges with default tokens.
- *
- * @param theme - Theme object to convert
- * @returns Complete DesignTokens object
- */
-declare function createDesignTokensFromTheme(theme: Theme): DesignTokens;
-/**
- * Create a minimal Theme object from DesignTokens
- *
- * @param tokens - DesignTokens to convert
- * @returns Minimal Theme object with cssVars populated
- */
-declare function designTokensToTheme(tokens: Partial<DesignTokens>): Partial<Theme>;
 
 /**
  * CSS Variable Mapper
@@ -1726,8 +1570,8 @@ declare function mapSCSSTokensToCSSVars(tokens: Record<string, any>, options?: C
 /**
  * Apply CSS variables to an element
  *
- * @param element - Target element (defaults to document.documentElement)
  * @param vars - CSS variables to apply
+ * @param element - Target element (defaults to document.documentElement)
  */
 declare function applyCSSVariables(vars: Record<string, string | number>, element?: HTMLElement): void;
 /**
@@ -1775,27 +1619,9 @@ declare function extractComponentName(varName: string, prefix?: string): string
 /**
  * Theme Helper Functions
  *
- * Utility functions for working with themes and DesignTokens
+ * Utility functions for working with DesignTokens
  */
 
-/**
- * Get DesignTokens from current theme
- *
- * Converts a Theme object to DesignTokens. Useful when you need to
- * work with DesignTokens but have a Theme object.
- *
- * @param theme - Theme object to convert
- * @returns DesignTokens object
- *
- * @example
- * ```typescript
- * // If you have a Theme object, convert it to DesignTokens
- * const tokens = getDesignTokensFromTheme(theme);
- * // Now you can use tokens with unified theme system
- * const css = createTheme(tokens);
- * ```
- */
-declare function getDesignTokensFromTheme(theme: Theme | null): DesignTokens | null;
 /**
  * Check if a value is DesignTokens
  *
@@ -1805,15 +1631,6 @@ declare function getDesignTokensFromTheme(theme: Theme | null): DesignTokens | n
  * @returns True if value is DesignTokens
  */
 declare function isDesignTokens(value: unknown): value is DesignTokens;
-/**
- * Check if a value is a Theme object
- *
- * Type guard to check if an object is a Theme.
- *
- * @param value - Value to check
- * @returns True if value is Theme
- */
-declare function isThemeObject(value: unknown): value is Theme;
 
 /**
  * RTL (Right-to-Left) Support Utilities
@@ -1917,13 +1734,13 @@ declare class RTLManager {
 /**
  * Theme System Exports
  *
- * Unified theme system - handles both DesignTokens and Theme objects.
+ * Simplified theme system using DesignTokens only.
  *
  * @example
  * ```typescript
  * import { createTheme, injectTheme } from '@shohojdhara/atomix/theme';
  *
- * // Using DesignTokens (recommended - flat structure)
+ * // Using DesignTokens
  * const css = createTheme({ 'primary': '#7AFFD7', 'spacing-4': '1rem' });
  * injectTheme(css);
  *
@@ -1947,5 +1764,5 @@ declare function removeTheme(id?: string): void;
  */
 declare function saveTheme(css: string, filePath: string): Promise<void>;
 
-export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createDesignTokensFromTheme, createTheme, createThemeObject, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, designTokensToTheme, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getDesignTokensFromTheme, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isThemeObject, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, saveTheme, themePropertyToCSSVar, themeToDesignTokens, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
+export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, saveTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
 export type { A11yIssue, CSSVariableConfig, CSSVariableNamingOptions, ComponentThemeOptions, ComponentThemeOverride, DesignTokens, GenerateCSSVariablesOptions, NamingOptions, RTLConfig, Theme, ThemeChangeEvent, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemePreviewProps, ThemeProviderProps, ThemeValidationResult, UseHistoryOptions, UseHistoryReturn, UseThemeReturn, ValidationResult };