@shohojdhara/atomix 0.3.12 → 0.3.14

package/dist/theme.js

@@ -406,6 +406,14 @@ import { createContext, useRef, useEffect, useCallback, useMemo, useState, useCo
     ThemeErrorCode.INVALID_THEME_NAME = "INVALID_THEME_NAME", 
     /** CSS injection failed */
     ThemeErrorCode.CSS_INJECTION_FAILED = "CSS_INJECTION_FAILED", 
+    /** Invalid color format */
+    ThemeErrorCode.INVALID_COLOR_FORMAT = "INVALID_COLOR_FORMAT", 
+    /** Missing required token */
+    ThemeErrorCode.MISSING_REQUIRED_TOKEN = "MISSING_REQUIRED_TOKEN", 
+    /** Accessibility contrast violation */
+    ThemeErrorCode.CONTRAST_VIOLATION = "CONTRAST_VIOLATION", 
+    /** Invalid token type */
+    ThemeErrorCode.INVALID_TOKEN_TYPE = "INVALID_TOKEN_TYPE", 
     /** Unknown error */
     ThemeErrorCode.UNKNOWN_ERROR = "UNKNOWN_ERROR";
 }(ThemeErrorCode || (ThemeErrorCode = {}));
@@ -707,29 +715,6 @@ class ThemeLogger {
     return Object.keys(registry).length;
 }
 
-/**
- * Core Theme Engine
- *
- * Core theme creation, composition, and registry functionality
- */ const index =  Object.freeze( Object.defineProperty({
-    __proto__: null,
-    clearThemes: clearThemes,
-    createTheme: createTheme,
-    createThemeRegistry: createThemeRegistry,
-    deepMerge: deepMerge,
-    extendTheme: extendTheme,
-    getAllThemes: getAllThemes,
-    getTheme: getTheme,
-    getThemeCount: getThemeCount,
-    getThemeIds: getThemeIds,
-    hasTheme: hasTheme,
-    mergeTheme: mergeTheme,
-    registerTheme: registerTheme,
-    unregisterTheme: unregisterTheme
-}, Symbol.toStringTag, {
-    value: "Module"
-}));
-
 /**
  * CSS Injection Utilities
  *
@@ -1276,7 +1261,7 @@ const isBrowser = () => "undefined" != typeof window && "undefined" != typeof do
 /**
  * Convert hex color to RGB object
  */
-function hexToRgb(hex) {
+function hexToRgb$1(hex) {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     return result ? {
         r: parseInt(result[1], 16),
@@ -1296,7 +1281,7 @@ function hexToRgb(hex) {
  * Calculate relative luminance of a color
  * Used for determining contrast ratios
  */ function getLuminance(color) {
-    const rgb = hexToRgb(color);
+    const rgb = hexToRgb$1(color);
     if (!rgb) return 0;
     const {r: r, g: g, b: b} = rgb, [rs, gs, bs] = [ r ?? 0, g ?? 0, b ?? 0 ].map((c => {
         const val = c / 255;
@@ -1326,7 +1311,7 @@ function hexToRgb(hex) {
  * @param amount - Amount to lighten (0-1), default 0.2
  * @returns Lightened hex color
  */ function lighten(color, amount = .2) {
-    const rgb = hexToRgb(color);
+    const rgb = hexToRgb$1(color);
     if (!rgb) return color;
     const {r: r, g: g, b: b} = rgb, lightenValue = val => Math.min(255, Math.round(val + (255 - val) * amount));
     return rgbToHex(lightenValue(r), lightenValue(g), lightenValue(b));
@@ -1339,7 +1324,7 @@ function hexToRgb(hex) {
  * @param amount - Amount to darken (0-1), default 0.2
  * @returns Darkened hex color
  */ function darken(color, amount = .2) {
-    const rgb = hexToRgb(color);
+    const rgb = hexToRgb$1(color);
     if (!rgb) return color;
     const {r: r, g: g, b: b} = rgb, darkenValue = val => Math.max(0, Math.round(val * (1 - amount)));
     return rgbToHex(darkenValue(r), darkenValue(g), darkenValue(b));
@@ -1352,7 +1337,7 @@ function hexToRgb(hex) {
  * @param opacity - Opacity value (0-1)
  * @returns RGBA color string
  */ function alpha(color, opacity) {
-    const rgb = hexToRgb(color);
+    const rgb = hexToRgb$1(color);
     if (!rgb) return color;
     const {r: r, g: g, b: b} = rgb;
     return `rgba(${r}, ${g}, ${b}, ${Math.max(0, Math.min(1, opacity))})`;
@@ -1371,7 +1356,7 @@ function hexToRgb(hex) {
  */
 function generateColorScale(baseColor, prefix, colorName) {
     const vars = {};
-    if (!hexToRgb(baseColor)) return vars;
+    if (!hexToRgb$1(baseColor)) return vars;
     // Generate 10-step scale
     // Steps 1-5: lighter variations
     // Step 6: base color
@@ -1417,7 +1402,7 @@ function generateCSSVariables(theme, options = {}) {
                 // Main color (flat structure, matches SCSS: --atomix-primary)
                 vars[`${prefix}-${key}`] = color.main;
                 // Generate RGB for transparency support (matches SCSS: --atomix-primary-rgb)
-                const rgb = hexToRgb(color.main);
+                const rgb = hexToRgb$1(color.main);
                 // Generate full color scale (1-10) - matches SCSS: --atomix-primary-1 through --atomix-primary-10
                 // Only for primary, secondary, error, warning, info, success (not for light/dark)
                 if (rgb && (vars[`${prefix}-${key}-rgb`] = `${rgb.r}, ${rgb.g}, ${rgb.b}`), "light" !== key && "dark" !== key) {
@@ -1500,11 +1485,11 @@ function generateCSSVariables(theme, options = {}) {
         // Heading color (defaults to text primary) - matches SCSS: --atomix-heading-color
         palette.text && (vars[`${prefix}-heading-color`] = palette.text.primary), palette.primary) {
             vars[`${prefix}-link-color`] = palette.primary.main;
-            const linkRgb = hexToRgb(palette.primary.main);
+            const linkRgb = hexToRgb$1(palette.primary.main);
             linkRgb && (vars[`${prefix}-link-color-rgb`] = `${linkRgb.r}, ${linkRgb.g}, ${linkRgb.b}`), 
             // Link hover color (slightly darker)
             vars[`${prefix}-link-hover-color`] = palette.primary.dark || darken(palette.primary.main, .1);
-            const linkHoverRgb = hexToRgb(palette.primary.dark || darken(palette.primary.main, .1));
+            const linkHoverRgb = hexToRgb$1(palette.primary.dark || darken(palette.primary.main, .1));
             linkHoverRgb && (vars[`${prefix}-link-hover-color-rgb`] = `${linkHoverRgb.r}, ${linkHoverRgb.g}, ${linkHoverRgb.b}`), 
             // Link decoration (default: none, matching tokens list)
             vars[`${prefix}-link-decoration`] = "none";
@@ -1962,17 +1947,292 @@ function generateClassName(block, element, modifiers) {
 ThemeContext.displayName = "ThemeContext";
 
 /**
- * Theme Provider
+ * Theme Validation Utilities
  *
- * React context provider for theme management with separated concerns.
- * Simplified version focusing on core functionality:
- * - String-based themes (CSS files)
- * - DesignTokens (dynamic themes)
- * - Persistence via localStorage
- *
- * Falls back to 'default' theme if no configuration is found.
+ * Comprehensive validation utilities for DesignTokens objects.
+ * Includes color format validation, accessibility checks, and required properties verification.
  */
-const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes: themes = {}, basePath: basePath = "/themes", cdnPath: cdnPath = null, useMinified: useMinified = !1, storageKey: storageKey = "atomix-theme", dataAttribute: dataAttribute = "data-theme", enablePersistence: enablePersistence = !0, onThemeChange: onThemeChange, onError: onError}) => {
+const logger$1 = getLogger(), COLOR_PATTERNS = {
+    /** Hex color: #RGB, #RRGGBB, #RRGGBBAA */
+    hex: /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{4}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/,
+    /** RGB color: rgb(r, g, b) or rgb(r, g, b, a) */
+    rgb: /^rgb\(\s*(\d{1,3}(?:\.\d+)?)\s*,\s*(\d{1,3}(?:\.\d+)?)\s*,\s*(\d{1,3}(?:\.\d+)?)\s*(?:,\s*([01]?\.?\d+))?\s*\)$/,
+    /** RGBA color: rgba(r, g, b, a) */
+    rgba: /^rgba\(\s*(\d{1,3}(?:\.\d+)?)\s*,\s*(\d{1,3}(?:\.\d+)?)\s*,\s*(\d{1,3}(?:\.\d+)?)\s*,\s*([01]?\.?\d+)\s*\)$/,
+    /** HSL color: hsl(h, s%, l%) */
+    hsl: /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/,
+    /** HSLA color: hsla(h, s%, l%, a) */
+    hsla: /^hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*,\s*([01]?\.?\d+)\s*\)$/
+}, REQUIRED_COLOR_TOKENS = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ], REQUIRED_TEXT_EMPHASIS_TOKENS = [ "primary-text-emphasis", "secondary-text-emphasis", "tertiary-text-emphasis", "disabled-text-emphasis" ], ACCESSIBILITY_CHECKS = [ {
+    text: "primary-text-emphasis",
+    background: "primary-bg-subtle",
+    name: "Primary text on subtle background"
+}, {
+    text: "secondary-text-emphasis",
+    background: "secondary-bg-subtle",
+    name: "Secondary text on subtle background"
+}, {
+    text: "error-text-emphasis",
+    background: "error-bg-subtle",
+    name: "Error text on subtle background"
+}, {
+    text: "success-text-emphasis",
+    background: "success-bg-subtle",
+    name: "Success text on subtle background"
+} ];
+
+/**
+ * Color format validation patterns
+ */
+/**
+ * Parse RGB/RGBA color string to RGB values
+ */
+function rgbToRgb(rgb) {
+    const match = rgb.match(COLOR_PATTERNS.rgb) || rgb.match(COLOR_PATTERNS.rgba);
+    if (!match) return null;
+    const r = parseInt(match[1] ?? "0", 10), g = parseInt(match[2] ?? "0", 10), b = parseInt(match[3] ?? "0", 10);
+    // Validate RGB ranges
+    return r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255 ? null : {
+        r: r,
+        g: g,
+        b: b
+    };
+}
+
+/**
+ * Parse HSL/HSLA color string to RGB values
+ */ function hslToRgb(hsl) {
+    const match = hsl.match(COLOR_PATTERNS.hsl) || hsl.match(COLOR_PATTERNS.hsla);
+    if (!match) return null;
+    let h = parseInt(match[1] ?? "0", 10) / 360, s = parseInt(match[2] ?? "0", 10) / 100, l = parseInt(match[3] ?? "0", 10) / 100;
+    // Validate HSL ranges
+    if (h < 0 || h > 1 || s < 0 || s > 1 || l < 0 || l > 1) return null;
+    const hue2rgb = (p, q, t) => (t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? p + 6 * (q - p) * t : t < .5 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p);
+    let r, g, b;
+    if (0 === s) r = g = b = l; // achromatic
+     else {
+        const q = l < .5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3), g = hue2rgb(p, q, h), b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return {
+        r: Math.round(255 * r),
+        g: Math.round(255 * g),
+        b: Math.round(255 * b)
+    };
+}
+
+/**
+ * Convert any valid color format to RGB values
+ */ function colorToRgb(color) {
+    // Try hex first
+    return COLOR_PATTERNS.hex.test(color) ? 
+    /**
+ * Convert hex color to RGB values
+ */
+    function(hex) {
+        const result = COLOR_PATTERNS.hex.exec(hex);
+        if (!result || !result[1]) return null;
+        const digits = result[1];
+        let r, g, b;
+        switch (digits.length) {
+          case 3:
+          case 4:
+            // #RGBA (ignore alpha)
+            r = parseInt((digits[0] ?? "0") + (digits[0] ?? "0"), 16), g = parseInt((digits[1] ?? "0") + (digits[1] ?? "0"), 16), 
+            b = parseInt((digits[2] ?? "0") + (digits[2] ?? "0"), 16);
+            break;
+
+          case 6:
+          case 8:
+            // #RRGGBBAA (ignore alpha)
+            r = parseInt(digits.slice(0, 2), 16), g = parseInt(digits.slice(2, 4), 16), b = parseInt(digits.slice(4, 6), 16);
+            break;
+
+          default:
+            return null;
+        }
+        return {
+            r: r,
+            g: g,
+            b: b
+        };
+    }(color) : 
+    // Try RGB/RGBA
+    color.startsWith("rgb") ? rgbToRgb(color) : 
+    // Try HSL/HSLA
+    color.startsWith("hsl") ? hslToRgb(color) : null;
+}
+
+/**
+ * Validate that a color string is in a valid format (hex, rgb, hsl, etc.)
+ * Includes validation of value ranges for RGB and HSL
+ */
+/**
+ * Calculate relative luminance of a color
+ * Based on WCAG guidelines: https://www.w3.org/TR/WCAG20-TECHS/G17.html
+ */
+function getRelativeLuminance(r, g, b) {
+    const normalize = val => (val /= 255) <= .03928 ? val / 12.92 : Math.pow((val + .055) / 1.055, 2.4);
+    return .2126 * normalize(r) + .7152 * normalize(g) + .0722 * normalize(b);
+}
+
+/**
+ * Calculate contrast ratio between two colors (supports multiple formats)
+ */
+/**
+ * Check if contrast ratio meets WCAG AA standards
+ * AA requires 4.5:1 for normal text, 3:1 for large text
+ */
+function validateContrastRatio(foreground, background, isLargeText = !1) {
+    const ratio = function(color1, color2) {
+        const rgb1 = colorToRgb(color1), rgb2 = colorToRgb(color2);
+        if (!rgb1 || !rgb2) return null;
+        const lum1 = getRelativeLuminance(rgb1.r, rgb1.g, rgb1.b), lum2 = getRelativeLuminance(rgb2.r, rgb2.g, rgb2.b);
+        return (Math.max(lum1, lum2) + .05) / (Math.min(lum1, lum2) + .05);
+    }(foreground, background);
+    if (null === ratio) return {
+        valid: !1,
+        ratio: 0,
+        requiredRatio: isLargeText ? 3 : 4.5
+    };
+    const requiredRatio = isLargeText ? 3 : 4.5;
+    return {
+        valid: ratio >= requiredRatio,
+        ratio: ratio,
+        requiredRatio: requiredRatio
+    };
+}
+
+/**
+ * Validate all color formats in DesignTokens
+ */
+/**
+ * Comprehensive validation of DesignTokens
+ */
+function validateDesignTokens(tokens, options = {}) {
+    const results = [];
+    options.skipRequiredTokens || results.push(
+    /**
+ * Validate that all required tokens are present
+ */
+    function(tokens) {
+        const errors = [], warnings = [];
+        // Check required color tokens
+        for (const token of REQUIRED_COLOR_TOKENS) token in tokens || errors.push(`Required color token '${token}' is missing`);
+        // Check required text emphasis tokens
+                for (const token of REQUIRED_TEXT_EMPHASIS_TOKENS) token in tokens || errors.push(`Required text emphasis token '${token}' is missing`);
+        // Check for RGB versions of base colors
+                for (const token of REQUIRED_COLOR_TOKENS) {
+            const rgbToken = `${token}-rgb`;
+            rgbToken in tokens || warnings.push(`RGB version of '${token}' token '${rgbToken}' is missing`);
+        }
+        return {
+            valid: 0 === errors.length,
+            errors: errors,
+            warnings: warnings
+        };
+    }
+    /**
+ * Validate accessibility contrast ratios
+ */ (tokens)), options.skipColorValidation || results.push(function(tokens) {
+        const errors = [], colorTokenKeys = new Set([ 
+        // Base colors
+        "primary", "secondary", "success", "info", "warning", "error", "light", "dark", 
+        // Text emphasis
+        "primary-text-emphasis", "secondary-text-emphasis", "tertiary-text-emphasis", "disabled-text-emphasis", "invert-text-emphasis", "brand-text-emphasis", "error-text-emphasis", "success-text-emphasis", "warning-text-emphasis", "info-text-emphasis", "light-text-emphasis", "dark-text-emphasis", 
+        // Background subtle
+        "primary-bg-subtle", "secondary-bg-subtle", "tertiary-bg-subtle", "invert-bg-subtle", "brand-bg-subtle", "error-bg-subtle", "success-bg-subtle", "warning-bg-subtle", "info-bg-subtle", "light-bg-subtle", "dark-bg-subtle", 
+        // Border subtle
+        "primary-border-subtle", "secondary-border-subtle", "success-border-subtle", "error-border-subtle", "warning-border-subtle", "info-border-subtle", "brand-border-subtle", "light-border-subtle", "dark-border-subtle", 
+        // Hover states
+        "primary-hover", "secondary-hover", "light-hover", "dark-hover", "error-hover", "success-hover", "warning-hover", "info-hover", 
+        // Colors from scales (primary, red, green, blue, yellow)
+        ...Array.from({
+            length: 10
+        }, ((_, i) => [ `primary-${i + 1}`, `red-${i + 1}`, `green-${i + 1}`, `blue-${i + 1}`, `yellow-${i + 1}` ])).flat(), 
+        // Gray scale
+        ...Array.from({
+            length: 10
+        }, ((_, i) => `gray-${i + 1}`)), 
+        // Body colors
+        "body-color", "heading-color", 
+        // Link colors
+        "link-color", "link-hover-color", 
+        // Highlight & code
+        "highlight-bg", "code-color", 
+        // Border colors
+        "border-color", "border-color-translucent", 
+        // Focus ring
+        "focus-border-color", 
+        // Form validation
+        "form-valid-color", "form-valid-border-color", "form-invalid-color", "form-invalid-border-color" ]);
+        for (const key of colorTokenKeys) {
+            if (!(key in tokens)) continue;
+ // Skip if token not present
+                        const value = tokens[key];
+            "string" == typeof value ? (color = value, 
+            // Check hex first (regex is sufficient)
+            COLOR_PATTERNS.hex.test(color) || (
+            // Check RGB/RGBA with value validation
+            COLOR_PATTERNS.rgb.test(color) || COLOR_PATTERNS.rgba.test(color) ? null !== rgbToRgb(color) : 
+            // Check HSL/HSLA with value validation
+            (COLOR_PATTERNS.hsl.test(color) || COLOR_PATTERNS.hsla.test(color)) && null !== hslToRgb(color)) || errors.push(`Token '${key}' has invalid color format: '${value}'`)) : errors.push(`Token '${key}' must be a string, got ${typeof value}`);
+        }
+        var color;
+        return {
+            valid: 0 === errors.length,
+            errors: errors,
+            warnings: []
+        };
+    }(tokens)), options.skipAccessibility || results.push(function(tokens) {
+        const errors = [], warnings = [];
+        for (const check of ACCESSIBILITY_CHECKS) {
+            const textColor = tokens[check.text], bgColor = tokens[check.background];
+            if (!textColor || !bgColor) {
+                warnings.push(`Cannot validate contrast for ${check.name}: missing tokens`);
+                continue;
+            }
+            const contrast = validateContrastRatio(textColor, bgColor);
+            if (!contrast.valid) {
+                const level = 3 === contrast.requiredRatio ? "large text (AA)" : "normal text (AA)";
+                errors.push(`${check.name}: contrast ratio ${contrast.ratio.toFixed(2)}:1 is below required ${contrast.requiredRatio}:1 for ${level}`);
+            }
+        }
+        return {
+            valid: 0 === errors.length,
+            errors: errors,
+            warnings: warnings
+        };
+    }(tokens));
+    const allErrors = results.flatMap((r => r.errors)), allWarnings = results.flatMap((r => r.warnings)), valid = 0 === allErrors.length;
+    // Log validation results
+    return valid ? allWarnings.length > 0 ? logger$1.warn(`DesignTokens validation passed with ${allWarnings.length} warnings`, {
+        warnings: allWarnings
+    }) : logger$1.debug("DesignTokens validation passed") : logger$1.error("DesignTokens validation failed", new Error(`Validation failed with ${allErrors.length} errors and ${allWarnings.length} warnings`), {
+        errors: allErrors,
+        warnings: allWarnings,
+        tokenCount: Object.keys(tokens).length
+    }), {
+        valid: valid,
+        errors: allErrors,
+        warnings: allWarnings
+    };
+}
+
+/**
+ * Safely validate and merge partial tokens with defaults
+ */ function validateAndMergeTokens(partialTokens) {
+    const merged = {
+        ...defaultTokens,
+        ...partialTokens
+    };
+    return {
+        tokens: merged,
+        validation: validateDesignTokens(merged)
+    };
+}
+
+const logger = getLogger(), ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes: themes = {}, basePath: basePath = "/themes", cdnPath: cdnPath = null, useMinified: useMinified = !1, storageKey: storageKey = "atomix-theme", dataAttribute: dataAttribute = "data-theme", enablePersistence: enablePersistence = !0, onThemeChange: onThemeChange, onError: onError}) => {
     // Store callbacks in refs to avoid recreating when they change
     const onThemeChangeRef = useRef(onThemeChange), onErrorRef = useRef(onError);
     // Update ref when callback changes
@@ -1993,12 +2253,20 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
         // If defaultTheme is provided, use it
                 return null != defaultTheme ? defaultTheme : "default";
         // Default fallback
-        }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = useState((() => 
-    // If defaultTheme is DesignTokens, store them
-    defaultTheme && "string" != typeof defaultTheme ? createTokens(defaultTheme) : null)), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), themePromisesRef = useRef({}), abortControllerRef = useRef(null);
+        }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : "tokens-theme")), [activeTokens, setActiveTokens] = useState((() => {
+        // If defaultTheme is DesignTokens, validate and store them
+        if (defaultTheme && "string" != typeof defaultTheme) {
+            const {tokens: tokens, validation: validation} = validateAndMergeTokens(defaultTheme);
+            return validation.valid ? tokens : (logger.warn("Invalid default theme tokens, using defaults", {
+                errors: validation.errors,
+                warnings: validation.warnings
+            }), createTokens({}));
+        }
+        return null;
+    })), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), themePromisesRef = useRef({}), abortControllerRef = useRef(null);
     // Handle initial DesignTokens defaultTheme
     useEffect((() => {
-        defaultTheme && "string" != typeof defaultTheme && activeTokens && !isServer() && injectCSS$1(createTheme(defaultTheme), "theme-tokens-theme");
+        defaultTheme && "string" != typeof defaultTheme && activeTokens && !isServer() && injectCSS$1(createTheme(activeTokens), "theme-tokens-theme");
     }), [ defaultTheme, activeTokens ]), // Run when defaultTheme or activeTokens change
     // Apply initial theme attributes to document element
     useEffect((() => {
@@ -2028,19 +2296,42 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
             if ("string" != typeof theme) {
                 // Check if aborted before processing
                 if (abortController.signal.aborted) return;
-                // For DesignTokens, create CSS and inject it
-                                const {createTheme: createTheme} = await Promise.resolve().then((() => index)), css = createTheme(theme), themeId = "tokens-theme";
+                // Validate and merge DesignTokens
+                                const {tokens: validatedTokens, validation: validation} = validateAndMergeTokens(theme);
+                if (!validation.valid) {
+                    const errorMsg = `Invalid DesignTokens provided: ${validation.errors.join(", ")}`, validationError = new Error(errorMsg);
+                    // Default to true
+                    if (logger.error("Theme validation failed", validationError, {
+                        errors: validation.errors,
+                        warnings: validation.warnings
+                    }), !1 !== options?.fallbackOnError) {
+                        logger.warn("Falling back to default theme due to validation errors");
+                        // Use default tokens instead
+                        const {tokens: defaultTokens} = validateAndMergeTokens({}), css = createTheme(defaultTokens), themeId = "tokens-theme-fallback";
+                        // Check if aborted before state update
+                        if (abortController.signal.aborted) return;
+                        // Remove any previously loaded theme CSS
+                                                return removeCSS(`theme-${currentTheme}`), 
+                        // Inject new theme CSS
+                        injectCSS$1(css, `theme-${themeId}`), 
+                        // Store default tokens
+                        setActiveTokens(defaultTokens), setCurrentTheme(themeId), handleThemeChange(defaultTokens), 
+                        handleError(validationError, themeId), void setIsLoading(!1);
+                    }
+                    // No fallback, throw the error
+                    throw validationError;
+                }
+                // For valid DesignTokens, create CSS and inject it
+                                const css = createTheme(validatedTokens), themeId = "tokens-theme";
                 // Check if aborted after async operation
                 if (abortController.signal.aborted) return;
                 // Remove any previously loaded theme CSS
-                                removeCSS(`theme-${currentTheme}`), 
-                // Inject new theme CSS
-                injectCSS$1(css, `theme-${themeId}`);
-                // Store tokens for reference
-                const fullTokens = createTokens(theme);
+                                // Store validated tokens for reference
                 // Check if aborted before state update
-                                if (abortController.signal.aborted) return;
-                return setActiveTokens(fullTokens), setCurrentTheme(themeId), handleThemeChange(fullTokens), 
+                if (removeCSS(`theme-${currentTheme}`), 
+                // Inject new theme CSS
+                injectCSS$1(css, `theme-${themeId}`), abortController.signal.aborted) return;
+                return setActiveTokens(validatedTokens), setCurrentTheme(themeId), handleThemeChange(validatedTokens), 
                 void setIsLoading(!1);
             }
             // If it's a string theme name, load the associated CSS
@@ -2055,30 +2346,33 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
                     // If previous load failed, continue with new load
                 }
                 // Load CSS theme
-                                const themeLoadPromise = new Promise((async (resolve, reject) => {
-                    try {
-                        // Check if aborted
-                        if (abortController.signal.aborted) return void resolve();
-                        if (!themes[theme]) throw new Error(`Theme metadata not found for theme: ${theme}`);
-                        {
-                            // Build CSS path using utility function
-                            const cssPath = buildThemePath(theme, basePath, useMinified, cdnPath);
+                                const themeLoadPromise = new Promise(((resolve, reject) => {
+                    // Start the async operation
+                    (async () => {
+                        try {
                             // Check if aborted
-                                                        if (abortController.signal.aborted) return void resolve();
-                            // Load CSS file (using loadThemeCSS from domUtils)
-                                                        const {loadThemeCSS: loadThemeCSS} = await Promise.resolve().then((() => domUtils));
-                            // Check if aborted after async operation
-                            if (await loadThemeCSS(cssPath, `theme-${theme}`), abortController.signal.aborted) return void resolve();
-                            // Remove any previously loaded theme CSS
-                                                        removeCSS(`theme-${String(currentTheme)}`), loadedThemesRef.current.add(theme), 
-                            setCurrentTheme(theme), setActiveTokens(null), handleThemeChange(theme), resolve();
+                            if (abortController.signal.aborted) return void resolve();
+                            if (!themes[theme]) throw new Error(`Theme metadata not found for theme: ${theme}`);
+                            {
+                                // Build CSS path using utility function
+                                const cssPath = buildThemePath(theme, basePath, useMinified, cdnPath);
+                                // Check if aborted
+                                                                if (abortController.signal.aborted) return void resolve();
+                                // Load CSS file (using loadThemeCSS from domUtils)
+                                                                const {loadThemeCSS: loadThemeCSS} = await Promise.resolve().then((() => domUtils));
+                                // Check if aborted after async operation
+                                if (await loadThemeCSS(cssPath, `theme-${theme}`), abortController.signal.aborted) return void resolve();
+                                // Remove any previously loaded theme CSS
+                                                                removeCSS(`theme-${String(currentTheme)}`), loadedThemesRef.current.add(theme), 
+                                setCurrentTheme(theme), setActiveTokens(null), handleThemeChange(theme), resolve();
+                            }
+                        } catch (err) {
+                            // Don't reject if aborted
+                            if (abortController.signal.aborted) return void resolve();
+                            const error = err instanceof Error ? err : new Error(String(err));
+                            setError(error), handleError(error, String(theme)), reject(error);
                         }
-                    } catch (err) {
-                        // Don't reject if aborted
-                        if (abortController.signal.aborted) return void resolve();
-                        const error = err instanceof Error ? err : new Error(String(err));
-                        setError(error), handleError(error, String(theme)), reject(error);
-                    }
+                    })();
                 }));
                 themePromisesRef.current[theme] = themeLoadPromise;
                 try {
@@ -2143,6 +2437,17 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
     });
 };
 
+/**
+ * Theme Provider
+ *
+ * React context provider for theme management with separated concerns.
+ * Simplified version focusing on core functionality:
+ * - String-based themes (CSS files)
+ * - DesignTokens (dynamic themes)
+ * - Persistence via localStorage
+ *
+ * Falls back to 'default' theme if no configuration is found.
+ */
 /**
  * useTheme Hook
  *
@@ -2168,7 +2473,8 @@ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes:
  *   );
  * }
  * ```
- */ function useTheme() {
+ */
+function useTheme() {
     const context = useContext(ThemeContext);
     if (!context) throw new Error("useTheme must be used within a ThemeProvider");
     return {
@@ -4241,8 +4547,8 @@ function createPaletteColor(color) {
  * @returns Complete theme object
  */
 function createThemeObject(...options) {
-    // Merge all options
-    const mergedOptions = _reduceInstanceProperty(options).call(options, ((acc, option) => deepMerge(acc, option)), {}), palette = {
+    // Merge all options by spreading them into a single object
+    const mergedOptions = _reduceInstanceProperty(options).call(options, ((acc, option) => deepMerge(acc, option || {})), {}), palette = {
         primary: createPaletteColor(mergedOptions.palette?.primary || DEFAULT_PALETTE.primary),
         secondary: createPaletteColor(mergedOptions.palette?.secondary || DEFAULT_PALETTE.secondary),
         error: createPaletteColor(mergedOptions.palette?.error || DEFAULT_PALETTE.error),
@@ -4427,43 +4733,45 @@ function createThemeObject(...options) {
 
       case "hsl":
       case "hsla":
-        // Convert RGB to HSL (simplified)
-        const hsl = 
-        /**
+        {
+            // Convert RGB to HSL (simplified)
+            const hsl = 
+            /**
  * Convert RGB to HSL
  */
-        function(r, g, b) {
-            r /= 255, g /= 255, b /= 255;
-            const max = Math.max(r, g, b), min = Math.min(r, g, b);
-            let h = 0, s = 0;
-            const l = (max + min) / 2;
-            if (max !== min) {
-                const d = max - min;
-                switch (s = l > .5 ? d / (2 - max - min) : d / (max + min), max) {
-                  case r:
-                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-                    break;
+            function(r, g, b) {
+                r /= 255, g /= 255, b /= 255;
+                const max = Math.max(r, g, b), min = Math.min(r, g, b);
+                let h = 0, s = 0;
+                const l = (max + min) / 2;
+                if (max !== min) {
+                    const d = max - min;
+                    switch (s = l > .5 ? d / (2 - max - min) : d / (max + min), max) {
+                      case r:
+                        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                        break;
 
-                  case g:
-                    h = ((b - r) / d + 2) / 6;
-                    break;
+                      case g:
+                        h = ((b - r) / d + 2) / 6;
+                        break;
 
-                  case b:
-                    h = ((r - g) / d + 4) / 6;
+                      case b:
+                        h = ((r - g) / d + 4) / 6;
+                    }
                 }
+                return {
+                    h: Math.round(360 * h),
+                    s: Math.round(100 * s),
+                    l: Math.round(100 * l)
+                };
             }
-            return {
-                h: Math.round(360 * h),
-                s: Math.round(100 * s),
-                l: Math.round(100 * l)
-            };
-        }
-        /**
+            /**
  * Theme Live Editor Component
  *
  * Allows live editing of theme properties with instant preview
  */ (r, g, b);
-        return "hsl" === format ? `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)` : `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${a})`;
+            return "hsl" === format ? `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)` : `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${a})`;
+        }
 
       default:
         return color;
@@ -4789,8 +5097,312 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
             children: "\n        .atomix-theme-live-editor {\n          border: 1px solid #e0e0e0;\n          border-radius: 8px;\n          background: white;\n          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        }\n\n        .editor-header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 16px 24px;\n          border-bottom: 1px solid #e0e0e0;\n          background: #f5f5f5;\n          border-radius: 8px 8px 0 0;\n        }\n\n        .editor-header h2 {\n          margin: 0;\n          font-size: 20px;\n          color: #333;\n        }\n\n        .editor-controls {\n          display: flex;\n          gap: 12px;\n          align-items: center;\n        }\n\n        .history-controls,\n        .mode-controls,\n        .action-controls {\n          display: flex;\n          gap: 8px;\n        }\n\n        .history-button,\n        .mode-button,\n        .export-button,\n        .copy-button {\n          padding: 8px 16px;\n          border: 1px solid #e0e0e0;\n          background: white;\n          border-radius: 4px;\n          cursor: pointer;\n          font-size: 14px;\n          transition: all 0.2s;\n        }\n\n        .history-button:hover:not(:disabled),\n        .mode-button:hover,\n        .export-button:hover,\n        .copy-button:hover {\n          background: #f5f5f5;\n        }\n\n        .history-button:disabled {\n          opacity: 0.5;\n          cursor: not-allowed;\n        }\n\n        .mode-button.active {\n          background: #2196f3;\n          color: white;\n          border-color: #2196f3;\n        }\n\n        .export-button {\n          background: #4caf50;\n          color: white;\n          border-color: #4caf50;\n        }\n\n        .copy-button {\n          background: #ff9800;\n          color: white;\n          border-color: #ff9800;\n        }\n\n        .editor-content {\n          display: flex;\n          position: relative;\n          min-height: 600px;\n        }\n\n        .editor-panel,\n        .preview-panel {\n          overflow-y: auto;\n          padding: 24px;\n        }\n\n        .resizer {\n          width: 4px;\n          background: #e0e0e0;\n          cursor: col-resize;\n          position: relative;\n          flex-shrink: 0;\n          transition: background 0.2s;\n        }\n\n        .resizer:hover,\n        .resizer.resizing {\n          background: #2196f3;\n        }\n\n        .resizer::before {\n          content: '';\n          position: absolute;\n          left: -2px;\n          right: -2px;\n          top: 0;\n          bottom: 0;\n        }\n\n        .editor-panel h3,\n        .preview-panel h3 {\n          margin: 0 0 16px 0;\n          font-size: 16px;\n          color: #333;\n          border-bottom: 2px solid #2196f3;\n          padding-bottom: 8px;\n        }\n\n        .visual-editor {\n          display: flex;\n          flex-direction: column;\n          gap: 24px;\n        }\n\n        .editor-section {\n          display: flex;\n          flex-direction: column;\n          gap: 16px;\n        }\n\n        .color-format-selector {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          margin-bottom: 8px;\n        }\n\n        .color-format-selector label {\n          font-size: 14px;\n          font-weight: 500;\n          color: #666;\n        }\n\n        .color-format-selector select {\n          padding: 6px 12px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          font-size: 14px;\n          background: white;\n          cursor: pointer;\n        }\n\n        .editor-field {\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n        }\n\n        .editor-field label {\n          font-size: 14px;\n          font-weight: 500;\n          color: #666;\n        }\n\n        .color-input-group {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n        }\n\n        .color-input-group input[type=\"color\"] {\n          width: 50px;\n          height: 40px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          cursor: pointer;\n        }\n\n        .color-input-group input[type=\"text\"],\n        .editor-field input[type=\"text\"],\n        .editor-field input[type=\"number\"] {\n          flex: 1;\n          padding: 8px 12px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          font-size: 14px;\n          font-family: 'Monaco', 'Menlo', monospace;\n        }\n\n        .json-editor {\n          height: 100%;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .json-editor textarea {\n          flex: 1;\n          padding: 16px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          font-family: 'Monaco', 'Menlo', monospace;\n          font-size: 12px;\n          line-height: 1.5;\n          resize: none;\n        }\n\n        .error-message {\n          padding: 12px;\n          background: #ffebee;\n          color: #d32f2f;\n          border-radius: 4px;\n          margin-top: 8px;\n          font-size: 14px;\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n        }\n\n        .error-dismiss {\n          background: none;\n          border: none;\n          color: #d32f2f;\n          font-size: 20px;\n          cursor: pointer;\n          padding: 0;\n          width: 24px;\n          height: 24px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .error-dismiss:hover {\n          background: rgba(211, 47, 47, 0.1);\n          border-radius: 50%;\n        }\n\n        .preview-panel {\n          border-left: 1px solid #e0e0e0;\n        }\n      "
         }) ]
     });
+}, DesignTokensCustomizer = ({initialTokens: initialTokens = {}, onTokensChange: onTokensChange, className: className, style: style}) => {
+    // Current tokens state
+    const [tokens, setTokens] = useState((() => createTokens(initialTokens))), [colorFormat, setColorFormat] = useState("hex"), [activeCategory, setActiveCategory] = useState("colors"), [cssPreview, setCssPreview] = useState("");
+    // Generate CSS when tokens change
+    useEffect((() => {
+        const css = createTheme(tokens, {
+            selector: ":root",
+            prefix: "atomix-preview"
+        });
+        setCssPreview(css), onTokensChange?.(tokens);
+    }), [ tokens, onTokensChange ]);
+    // Create theme object for preview
+    const previewTheme = useMemo((() => createThemeObject({
+        palette: {
+            primary: {
+                main: tokens.primary
+            },
+            secondary: {
+                main: tokens.secondary
+            },
+            error: {
+                main: tokens.error
+            },
+            warning: {
+                main: tokens.warning
+            },
+            info: {
+                main: tokens.info
+            },
+            success: {
+                main: tokens.success
+            },
+            background: {
+                default: "#ffffff",
+                subtle: tokens["secondary-bg-subtle"] || "#f3f4f6"
+            },
+            text: {
+                primary: tokens["primary-text-emphasis"] || "#111827",
+                secondary: tokens["secondary-text-emphasis"] || "#374151",
+                disabled: tokens["disabled-text-emphasis"] || "#9ca3af"
+            }
+        },
+        typography: {
+            fontFamily: tokens["body-font-family"] || '"Roboto", sans-serif',
+            fontSize: parseInt(tokens["body-font-size"] || "16")
+        },
+        spacing: factor => .25 * factor + "rem"
+    })), [ tokens ]), updateToken = useCallback(((key, value) => {
+        setTokens((prev => ({
+            ...prev,
+            [key]: value
+        })));
+    }), []), convertColorFormat = useCallback(((color, format) => {
+        // Parse current color
+        const temp = document.createElement("div");
+        temp.style.color = color, document.body.appendChild(temp);
+        const computed = window.getComputedStyle(temp).color;
+        document.body.removeChild(temp);
+        const rgbMatch = computed.match(/\d+/g);
+        if (!rgbMatch || rgbMatch.length < 3) return color;
+        const r = parseInt(rgbMatch[0] || "0", 10), g = parseInt(rgbMatch[1] || "0", 10), b = parseInt(rgbMatch[2] || "0", 10), a = rgbMatch[3] ? parseFloat(rgbMatch[3]) : 1;
+        switch (format) {
+          case "hex":
+            return `#${[ r, g, b ].map((x => x.toString(16).padStart(2, "0"))).join("")}`;
+
+          case "rgb":
+            return `rgb(${r}, ${g}, ${b})`;
+
+          case "rgba":
+            return `rgba(${r}, ${g}, ${b}, ${a})`;
+
+          case "hsl":
+          case "hsla":
+            {
+                const hsl = 
+                // RGB to HSL conversion
+                function(r, g, b) {
+                    r /= 255, g /= 255, b /= 255;
+                    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+                    let h = 0, s = 0;
+                    const l = (max + min) / 2;
+                    if (max !== min) {
+                        const d = max - min;
+                        switch (s = l > .5 ? d / (2 - max - min) : d / (max + min), max) {
+                          case r:
+                            h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                            break;
+
+                          case g:
+                            h = ((b - r) / d + 2) / 6;
+                            break;
+
+                          case b:
+                            h = ((r - g) / d + 4) / 6;
+                        }
+                    }
+                    return {
+                        h: Math.round(360 * h),
+                        s: Math.round(100 * s),
+                        l: Math.round(100 * l)
+                    };
+                }
+                // Export functions
+                (r, g, b);
+                return "hsl" === format ? `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)` : `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${a})`;
+            }
+
+          default:
+            return color;
+        }
+    }), []), exportTokens = useCallback((() => {
+        const dataStr = JSON.stringify(tokens, null, 2), dataUri = "data:application/json;charset=utf-8," + encodeURIComponent(dataStr), linkElement = document.createElement("a");
+        linkElement.setAttribute("href", dataUri), linkElement.setAttribute("download", "design-tokens.json"), 
+        linkElement.click();
+    }), [ tokens ]), exportTheme = useCallback((() => {
+        const themeCss = createTheme(tokens), dataUri = "data:text/css;charset=utf-8," + encodeURIComponent(themeCss), linkElement = document.createElement("a");
+        linkElement.setAttribute("href", dataUri), linkElement.setAttribute("download", "theme.css"), 
+        linkElement.click();
+    }), [ tokens ]), copyToClipboard = useCallback((() => {
+        navigator.clipboard?.writeText(JSON.stringify(tokens, null, 2));
+    }), [ tokens ]), resetToDefaults = useCallback((() => {
+        setTokens(defaultTokens);
+    }), []), loadTokensFromFile = useCallback((event => {
+        const file = event.target.files?.[0];
+        if (!file) return;
+        const reader = new FileReader;
+        reader.onload = e => {
+            try {
+                const content = e.target?.result, mergedTokens = createTokens(JSON.parse(content));
+                setTokens(mergedTokens);
+            } catch (error) {
+                console.error("Failed to load tokens:", error), alert("Invalid JSON file. Please select a valid design tokens JSON file.");
+            }
+        }, reader.readAsText(file);
+    }), []), tokenCategories = {
+        colors: {
+            label: "Colors",
+            tokens: [ 
+            // Base colors
+            "primary", "secondary", "success", "info", "warning", "error", "light", "dark", 
+            // RGB versions
+            "primary-rgb", "secondary-rgb", "success-rgb", "info-rgb", "warning-rgb", "error-rgb", "light-rgb", "dark-rgb", 
+            // Gray scale
+            "gray-1", "gray-2", "gray-3", "gray-4", "gray-5", "gray-6", "gray-7", "gray-8", "gray-9", "gray-10", 
+            // Primary scale
+            "primary-1", "primary-2", "primary-3", "primary-4", "primary-5", "primary-6", "primary-7", "primary-8", "primary-9", "primary-10", 
+            // Text emphasis
+            "primary-text-emphasis", "secondary-text-emphasis", "tertiary-text-emphasis", "disabled-text-emphasis", "invert-text-emphasis", "brand-text-emphasis", "error-text-emphasis", "success-text-emphasis", "warning-text-emphasis", "info-text-emphasis", "light-text-emphasis", "dark-text-emphasis", 
+            // Background subtle
+            "primary-bg-subtle", "secondary-bg-subtle", "tertiary-bg-subtle", "invert-bg-subtle", "brand-bg-subtle", "error-bg-subtle", "success-bg-subtle", "warning-bg-subtle", "info-bg-subtle", "light-bg-subtle", "dark-bg-subtle", 
+            // Border subtle
+            "primary-border-subtle", "secondary-border-subtle", "success-border-subtle", "error-border-subtle", "warning-border-subtle", "info-border-subtle", "brand-border-subtle", "light-border-subtle", "dark-border-subtle", 
+            // Hover states
+            "primary-hover", "secondary-hover", "light-hover", "dark-hover", "error-hover", "success-hover", "warning-hover", "info-hover", 
+            // Gradients
+            "primary-gradient", "secondary-gradient", "light-gradient", "dark-gradient", "success-gradient", "info-gradient", "warning-gradient", "error-gradient", "gradient" ]
+        },
+        typography: {
+            label: "Typography",
+            tokens: [ "font-sans-serif", "font-monospace", "body-font-family", "body-font-size", "body-font-weight", "body-line-height", "body-color", "body-bg", "heading-color", "font-size-xl", "font-size-2xl", "display-1", "font-weight-light", "font-weight-normal", "font-weight-medium", "font-weight-semibold", "font-weight-bold", "font-weight-heavy", "font-weight-black", "line-height-base", "line-height-sm", "line-height-lg", "letter-spacing-h1", "letter-spacing-h2", "letter-spacing-h3", "letter-spacing-h4", "letter-spacing-h5", "letter-spacing-h6", "link-color", "link-color-rgb", "link-decoration", "link-hover-color", "link-hover-color-rgb", "highlight-bg", "code-color" ]
+        },
+        spacing: {
+            label: "Spacing",
+            tokens: [ "spacing-0", "spacing-1", "spacing-px-6", "spacing-2", "spacing-px-10", "spacing-3", "spacing-px-14", "spacing-4", "spacing-5", "spacing-px-22", "spacing-6", "spacing-7", "spacing-px-30", "spacing-8", "spacing-9", "spacing-10", "spacing-11", "spacing-12", "spacing-14", "spacing-16", "spacing-20", "spacing-24", "spacing-28", "spacing-32", "spacing-36", "spacing-40", "spacing-44", "spacing-48", "spacing-52", "spacing-56", "spacing-60", "spacing-64", "spacing-72", "spacing-80", "spacing-90", "spacing-200" ]
+        },
+        shadows: {
+            label: "Shadows",
+            tokens: [ "box-shadow", "box-shadow-xs", "box-shadow-sm", "box-shadow-lg", "box-shadow-xl", "box-shadow-inset" ]
+        },
+        borders: {
+            label: "Borders",
+            tokens: [ "border-width", "border-style", "border-color", "border-color-translucent", "border-radius", "border-radius-sm", "border-radius-lg", "border-radius-xl", "border-radius-xxl", "border-radius-2xl", "border-radius-3xl", "border-radius-4xl", "border-radius-pill", "focus-border-color", "focus-ring-width", "focus-ring-offset", "focus-ring-opacity", "form-valid-color", "form-valid-border-color", "form-invalid-color", "form-invalid-border-color" ]
+        },
+        transitions: {
+            label: "Transitions",
+            tokens: [ "transition-duration-fast", "transition-duration-base", "transition-duration-slow", "transition-duration-slower", "easing-base", "easing-ease-in-out", "easing-ease-out", "easing-ease-in", "easing-ease-linear", "transition-fast", "transition-base", "transition-slow" ]
+        },
+        zindex: {
+            label: "Z-Index",
+            tokens: [ "z-n1", "z-0", "z-1", "z-2", "z-3", "z-4", "z-5", "z-dropdown", "z-sticky", "z-fixed", "z-modal", "z-popover", "z-tooltip", "z-drawer" ]
+        },
+        breakpoints: {
+            label: "Breakpoints",
+            tokens: [ "breakpoint-xs", "breakpoint-sm", "breakpoint-md", "breakpoint-lg", "breakpoint-xl", "breakpoint-xxl" ]
+        }
+    };
+    // Update token value
+        return jsxs("div", {
+        className: `design-tokens-customizer ${className || ""}`,
+        style: style,
+        children: [ jsxs("div", {
+            className: "customizer-header",
+            children: [ jsx("h2", {
+                children: "Interactive Theme Customizer"
+            }), jsxs("div", {
+                className: "customizer-controls",
+                children: [ jsxs("select", {
+                    value: colorFormat,
+                    onChange: e => setColorFormat(e.target.value),
+                    children: [ jsx("option", {
+                        value: "hex",
+                        children: "HEX"
+                    }), jsx("option", {
+                        value: "rgb",
+                        children: "RGB"
+                    }), jsx("option", {
+                        value: "rgba",
+                        children: "RGBA"
+                    }), jsx("option", {
+                        value: "hsl",
+                        children: "HSL"
+                    }), jsx("option", {
+                        value: "hsla",
+                        children: "HSLA"
+                    }) ]
+                }), jsx("button", {
+                    onClick: resetToDefaults,
+                    children: "Reset to Defaults"
+                }), jsxs("label", {
+                    className: "file-input-button",
+                    children: [ "Load Tokens", jsx("input", {
+                        type: "file",
+                        accept: ".json",
+                        onChange: loadTokensFromFile,
+                        style: {
+                            display: "none"
+                        }
+                    }) ]
+                }), jsx("button", {
+                    onClick: copyToClipboard,
+                    children: "Copy Tokens"
+                }), jsx("button", {
+                    onClick: exportTokens,
+                    children: "Export Tokens"
+                }), jsx("button", {
+                    onClick: exportTheme,
+                    children: "Export Theme CSS"
+                }) ]
+            }) ]
+        }), jsxs("div", {
+            className: "customizer-content",
+            children: [ jsx("div", {
+                className: "customizer-sidebar",
+                children: Object.entries(tokenCategories).map((([key, category]) => jsx("button", {
+                    className: "category-button " + (activeCategory === key ? "active" : ""),
+                    onClick: () => setActiveCategory(key),
+                    children: category.label
+                }, key)))
+            }), jsxs("div", {
+                className: "customizer-editor",
+                children: [ jsx("h3", {
+                    children: tokenCategories[activeCategory].label
+                }), jsx("div", {
+                    className: "tokens-grid",
+                    children: tokenCategories[activeCategory].tokens.map((tokenKey => {
+                        var _context;
+                        const value = tokens[tokenKey] || "", isColor = _includesInstanceProperty(tokenKey).call(tokenKey, "color") || _includesInstanceProperty(tokenKey).call(tokenKey, "bg") || _includesInstanceProperty(tokenKey).call(tokenKey, "gradient") || _includesInstanceProperty(_context = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ]).call(_context, tokenKey) || tokenKey.match(/^(gray|primary|red|green|blue|yellow)-\d+$/);
+                        return jsxs("div", {
+                            className: "token-item",
+                            children: [ jsx("label", {
+                                children: tokenKey
+                            }), isColor ? jsxs("div", {
+                                className: "color-input-group",
+                                children: [ jsx("input", {
+                                    type: "color",
+                                    value: value.startsWith("#") ? value : convertColorFormat(value, "hex"),
+                                    onChange: e => updateToken(tokenKey, e.target.value)
+                                }), jsx("input", {
+                                    type: "text",
+                                    value: convertColorFormat(value, colorFormat),
+                                    onChange: e => {
+                                        const converted = convertColorFormat(e.target.value, "hex");
+                                        updateToken(tokenKey, converted);
+                                    }
+                                }) ]
+                            }) : jsx("input", {
+                                type: "text",
+                                value: value,
+                                onChange: e => updateToken(tokenKey, e.target.value)
+                            }) ]
+                        }, tokenKey);
+                    }))
+                }) ]
+            }), jsxs("div", {
+                className: "customizer-preview",
+                children: [ jsx("h3", {
+                    children: "Live Preview"
+                }), jsx("style", {
+                    children: cssPreview
+                }), jsx(ThemePreview, {
+                    theme: previewTheme,
+                    showDetails: !1,
+                    showPalette: !0,
+                    showTypography: !0,
+                    showSpacing: !0
+                }) ]
+            }) ]
+        }), jsx("style", {
+            children: "\n        .design-tokens-customizer {\n          display: flex;\n          flex-direction: column;\n          height: 100vh;\n          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        }\n\n        .customizer-header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n          padding: 16px 24px;\n          border-bottom: 1px solid #e0e0e0;\n          background: #f5f5f5;\n        }\n\n        .customizer-header h2 {\n          margin: 0;\n          font-size: 24px;\n          color: #333;\n        }\n\n        .customizer-controls {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n        }\n\n        .customizer-controls select,\n        .customizer-controls button {\n          padding: 8px 12px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          background: white;\n          cursor: pointer;\n        }\n\n        .customizer-controls button:hover,\n        .file-input-button:hover {\n          background: #f0f0f0;\n        }\n\n        .file-input-button {\n          padding: 8px 12px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          background: white;\n          cursor: pointer;\n          font-size: 14px;\n          display: inline-block;\n        }\n\n        .customizer-content {\n          display: flex;\n          flex: 1;\n          overflow: hidden;\n        }\n\n        .customizer-sidebar {\n          width: 200px;\n          border-right: 1px solid #e0e0e0;\n          padding: 16px;\n          background: #fafafa;\n          overflow-y: auto;\n        }\n\n        .category-button {\n          display: block;\n          width: 100%;\n          padding: 12px;\n          margin-bottom: 8px;\n          border: none;\n          background: white;\n          border-radius: 4px;\n          cursor: pointer;\n          text-align: left;\n          font-size: 14px;\n        }\n\n        .category-button:hover,\n        .category-button.active {\n          background: #e0e0e0;\n        }\n\n        .customizer-editor {\n          flex: 1;\n          padding: 24px;\n          overflow-y: auto;\n        }\n\n        .customizer-editor h3 {\n          margin-top: 0;\n          margin-bottom: 16px;\n          color: #333;\n        }\n\n        .tokens-grid {\n          display: grid;\n          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n          gap: 16px;\n        }\n\n        .token-item {\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n        }\n\n        .token-item label {\n          font-size: 14px;\n          font-weight: 500;\n          color: #666;\n        }\n\n        .color-input-group {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n        }\n\n        .color-input-group input[type=\"color\"] {\n          width: 50px;\n          height: 40px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          cursor: pointer;\n        }\n\n        .color-input-group input[type=\"text\"],\n        .token-item input[type=\"text\"] {\n          flex: 1;\n          padding: 8px 12px;\n          border: 1px solid #e0e0e0;\n          border-radius: 4px;\n          font-size: 14px;\n          font-family: 'Monaco', 'Menlo', monospace;\n        }\n\n        .customizer-preview {\n          width: 400px;\n          border-left: 1px solid #e0e0e0;\n          padding: 24px;\n          overflow-y: auto;\n          background: #fafafa;\n        }\n\n        .customizer-preview h3 {\n          margin-top: 0;\n          margin-bottom: 16px;\n          color: #333;\n        }\n      "
+        }) ]
+    });
 };
 
+/**
+ * Design Tokens Customizer Component
+ */
 /**
  * Theme Adapter
  *
@@ -4801,7 +5413,8 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
  *
  * @param tokens - DesignTokens object
  * @returns CSS variables object compatible with Theme.cssVars
- */ function designTokensToCSSVars(tokens) {
+ */
+function designTokensToCSSVars(tokens) {
     const cssVars = {};
     return Object.entries(tokens).forEach((([key, value]) => {
         void 0 !== value && (cssVars[`--atomix-${key}`] = String(value));
@@ -5149,5 +5762,5 @@ class RTLManager {
     removeCSS(id);
 }
 
-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$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
+export { DesignTokensCustomizer, 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$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
 //# sourceMappingURL=theme.js.map