shru-design-system 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -7,6 +8,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { XIcon, ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 // src/atoms/Button.tsx
 function cn(...inputs) {
@@ -358,7 +360,1087 @@ function SelectScrollDownButton({
     }
   );
 }
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  side,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      side,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/themes/themeConfig.ts
+var baseThemeCategories = {
+  color: {
+    name: "Color",
+    order: 1,
+    themes: {
+      white: {
+        name: "White",
+        file: "color/white.json",
+        icon: "\u{1F3A8}",
+        description: "Light theme with white background"
+      },
+      dark: {
+        name: "Dark",
+        file: "color/dark.json",
+        icon: "\u{1F319}",
+        description: "Dark theme with dark background"
+      }
+    }
+  },
+  typography: {
+    name: "Typography",
+    order: 2,
+    themes: {
+      sans: {
+        name: "Sans",
+        file: "typography/sans.json",
+        icon: "\u{1F4DD}",
+        description: "Sans-serif font family"
+      },
+      serif: {
+        name: "Serif",
+        file: "typography/serif.json",
+        icon: "\u{1F4D6}",
+        description: "Serif font family"
+      }
+    }
+  },
+  shape: {
+    name: "Shape",
+    order: 3,
+    themes: {
+      smooth: {
+        name: "Smooth",
+        file: "shape/smooth.json",
+        icon: "\u{1F532}",
+        description: "Smooth rounded corners"
+      },
+      sharp: {
+        name: "Sharp",
+        file: "shape/sharp.json",
+        icon: "\u2B1C",
+        description: "Sharp square corners"
+      }
+    }
+  },
+  density: {
+    name: "Density",
+    order: 4,
+    themes: {
+      comfortable: {
+        name: "Comfortable",
+        file: "density/comfortable.json",
+        icon: "\u{1F4CF}",
+        description: "Comfortable spacing"
+      },
+      compact: {
+        name: "Compact",
+        file: "density/compact.json",
+        icon: "\u{1F4D0}",
+        description: "Compact spacing"
+      }
+    }
+  },
+  animation: {
+    name: "Animation",
+    order: 5,
+    themes: {
+      gentle: {
+        name: "Gentle",
+        file: "animation/gentle.json",
+        icon: "\u2728",
+        description: "Gentle animations"
+      },
+      brisk: {
+        name: "Brisk",
+        file: "animation/brisk.json",
+        icon: "\u26A1",
+        description: "Fast, brisk animations"
+      }
+    }
+  },
+  custom: {
+    name: "Custom",
+    order: 10,
+    // Highest priority
+    themes: {
+      brand: {
+        name: "Brand",
+        file: "custom/brand.json",
+        icon: "\u{1F3AF}",
+        description: "Brand-specific theme"
+      },
+      minimal: {
+        name: "Minimal",
+        file: "custom/minimal.json",
+        icon: "\u{1F3AA}",
+        description: "Minimal theme"
+      }
+    }
+  }
+};
+var discoveredThemesCache = null;
+async function discoverThemes() {
+  if (discoveredThemesCache) {
+    return discoveredThemesCache;
+  }
+  const discovered = JSON.parse(JSON.stringify(baseThemeCategories));
+  try {
+    const tokensBase = typeof window !== "undefined" && window.__THEME_TOKENS_BASE__ ? window.__THEME_TOKENS_BASE__ : "/tokens";
+    const knownCategories = Object.keys(baseThemeCategories);
+    for (const category of knownCategories) {
+      const categoryPath = `${tokensBase}/themes/${category}`;
+    }
+    discoveredThemesCache = discovered;
+    return discovered;
+  } catch (error) {
+    console.warn("Error discovering themes:", error);
+    return baseThemeCategories;
+  }
+}
+function registerTheme(category, themeId, metadata) {
+  if (!discoveredThemesCache) {
+    discoveredThemesCache = JSON.parse(JSON.stringify(baseThemeCategories));
+  }
+  const cache = discoveredThemesCache;
+  if (!cache[category]) {
+    cache[category] = {
+      name: category.charAt(0).toUpperCase() + category.slice(1),
+      order: 99,
+      // Custom categories get high order
+      themes: {}
+    };
+  }
+  cache[category].themes[themeId] = {
+    name: metadata.name,
+    file: metadata.file,
+    icon: metadata.icon || "\u{1F3A8}",
+    description: metadata.description || ""
+  };
+  return cache;
+}
+async function getThemeCategories() {
+  return await discoverThemes();
+}
+function getThemeFilePath(category, themeId) {
+  const categories = discoveredThemesCache || baseThemeCategories;
+  const theme = categories[category]?.themes[themeId];
+  if (!theme) return null;
+  return `/tokens/themes/${theme.file}`;
+}
+async function getThemesForCategory(category) {
+  const categories = await getThemeCategories();
+  return categories[category]?.themes || {};
+}
+async function getTheme(category, themeId) {
+  const categories = await getThemeCategories();
+  return categories[category]?.themes[themeId] || null;
+}
+
+// src/themes/themeUtils.ts
+function getThemeName(selectedThemes) {
+  const parts = [];
+  if (selectedThemes.color) parts.push(selectedThemes.color);
+  if (selectedThemes.typography) parts.push(selectedThemes.typography);
+  if (selectedThemes.shape) parts.push(selectedThemes.shape);
+  if (selectedThemes.density) parts.push(selectedThemes.density);
+  if (selectedThemes.animation) parts.push(selectedThemes.animation);
+  return parts.length > 0 ? parts.join("-") : "default";
+}
+function validateThemeSelection(selectedThemes, themeCategories) {
+  const errors = [];
+  for (const [category, themeId] of Object.entries(selectedThemes)) {
+    if (!themeId) continue;
+    const categoryConfig = themeCategories[category];
+    if (!categoryConfig) {
+      errors.push(`Unknown category: ${category}`);
+      continue;
+    }
+    const theme = categoryConfig.themes[themeId];
+    if (!theme) {
+      errors.push(`Theme ${themeId} not found in category ${category}`);
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors
+  };
+}
+function getDefaultThemes() {
+  return {
+    color: "white",
+    typography: "sans",
+    shape: "smooth",
+    density: "comfortable",
+    animation: "gentle"
+  };
+}
+function deepClone(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+function isObject(item) {
+  return item && typeof item === "object" && !Array.isArray(item);
+}
+function deepMerge(target, source) {
+  const output = { ...target };
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key) => {
+      if (isObject(source[key])) {
+        if (!(key in target)) {
+          Object.assign(output, { [key]: source[key] });
+        } else {
+          output[key] = deepMerge(target[key], source[key]);
+        }
+      } else {
+        Object.assign(output, { [key]: source[key] });
+      }
+    });
+  }
+  return output;
+}
+var tokenCache = /* @__PURE__ */ new Map();
+async function loadTokenFile(path) {
+  if (tokenCache.has(path)) {
+    return deepClone(tokenCache.get(path));
+  }
+  try {
+    const response = await fetch(path);
+    if (!response.ok) {
+      throw new Error(`Failed to load ${path}: ${response.statusText}`);
+    }
+    const data = await response.json();
+    tokenCache.set(path, data);
+    return deepClone(data);
+  } catch (error) {
+    console.error(`Error loading token file ${path}:`, error);
+    throw error;
+  }
+}
+function resolveReferences(tokens, palette) {
+  const resolved = JSON.parse(JSON.stringify(tokens));
+  function resolveValue(value) {
+    if (typeof value !== "string") return value;
+    const match = value.match(/^\{([^}]+)\}$/);
+    if (!match) return value;
+    const path = match[1].split(".");
+    let current = { palette, ...resolved };
+    for (const key of path) {
+      if (current && typeof current === "object" && key in current) {
+        current = current[key];
+      } else {
+        console.warn(`Token reference not found: {${match[1]}}`);
+        return value;
+      }
+    }
+    return typeof current === "string" ? current : value;
+  }
+  function traverse(obj) {
+    for (const key in obj) {
+      if (typeof obj[key] === "object" && obj[key] !== null) {
+        traverse(obj[key]);
+      } else {
+        obj[key] = resolveValue(obj[key]);
+      }
+    }
+  }
+  traverse(resolved);
+  return resolved;
+}
+function hexToHSL(hex) {
+  hex = hex.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b = parseInt(hex.substring(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (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;
+        break;
+    }
+  }
+  h = Math.round(h * 360);
+  s = Math.round(s * 100);
+  const lPercent = Math.round(l * 100);
+  return `${h} ${s}% ${lPercent}%`;
+}
+function isHexColor(value) {
+  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value);
+}
+function flattenToCSS(tokens, prefix = "", result = {}, isColorContext = false) {
+  for (const key in tokens) {
+    const value = tokens[key];
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      const enteringColor = key === "color" && prefix === "";
+      const inColorContext = isColorContext || enteringColor;
+      if (enteringColor) {
+        flattenToCSS(value, "", result, true);
+      } else if (inColorContext) {
+        flattenToCSS(value, "", result, true);
+      } else {
+        const newPrefix = prefix ? `${prefix}-${key}` : key;
+        flattenToCSS(value, newPrefix, result, false);
+      }
+    } else {
+      let cssKey;
+      if (isColorContext || prefix === "" && key === "color") {
+        cssKey = `--${key}`;
+      } else if (prefix === "") {
+        cssKey = `--${key}`;
+      } else {
+        cssKey = `--${prefix}-${key}`;
+      }
+      let finalValue = value;
+      if (isColorContext && typeof value === "string" && isHexColor(value)) {
+        finalValue = hexToHSL(value);
+      }
+      result[cssKey] = finalValue;
+    }
+  }
+  return result;
+}
+function mapToTailwindVars(cssVars) {
+  const mapped = { ...cssVars };
+  if (cssVars["--radius-button"]) {
+    mapped["--radius"] = cssVars["--radius-button"];
+  }
+  if (cssVars["--radius-card"]) {
+    mapped["--radius-lg"] = cssVars["--radius-card"];
+  }
+  if (cssVars["--font-body"]) {
+    mapped["--font-sans"] = cssVars["--font-body"];
+  }
+  if (cssVars["--spacing-base"]) {
+    mapped["--spacing"] = cssVars["--spacing-base"];
+  } else if (cssVars["--spacing-component-md"]) {
+    mapped["--spacing"] = cssVars["--spacing-component-md"];
+  }
+  return mapped;
+}
+function generateCSSString(cssVars) {
+  const mappedVars = mapToTailwindVars(cssVars);
+  const vars = Object.entries(mappedVars).map(([key, value]) => `  ${key}: ${value};`).join("\n");
+  return `:root {
+${vars}
+}`;
+}
+function applyThemeCSS(css) {
+  let styleTag = document.getElementById("dynamic-theme");
+  if (!styleTag) {
+    styleTag = document.createElement("style");
+    styleTag.id = "dynamic-theme";
+    document.head.appendChild(styleTag);
+  }
+  styleTag.textContent = css;
+}
+async function generateAndApplyTheme(selectedThemes = {}) {
+  try {
+    const themeCategories = await getThemeCategories();
+    const validation = validateThemeSelection(selectedThemes, themeCategories);
+    if (!validation.valid) {
+      console.error("Invalid theme selection:", validation.errors);
+      throw new Error(`Invalid theme selection: ${validation.errors.join(", ")}`);
+    }
+    const base = await loadTokenFile("/tokens/base.json");
+    const palettes = await loadTokenFile("/tokens/palettes.json");
+    const palette = palettes.palette;
+    let merged = deepMerge(base, { palette });
+    const categoryOrder = Object.values(themeCategories).sort((a, b) => a.order - b.order).map((cat) => cat.name.toLowerCase());
+    for (const category of categoryOrder) {
+      if (category === "custom") continue;
+      const themeId = selectedThemes[category];
+      if (!themeId) continue;
+      const themePath = `/tokens/themes/${category}/${themeId}.json`;
+      const themeData = await loadTokenFile(themePath);
+      merged = deepMerge(merged, themeData);
+    }
+    if (selectedThemes.custom) {
+      const customPath = `/tokens/themes/custom/${selectedThemes.custom}.json`;
+      const customData = await loadTokenFile(customPath);
+      merged = deepMerge(merged, customData);
+    }
+    const resolved = resolveReferences(merged, palette);
+    const cssVars = flattenToCSS(resolved);
+    const css = generateCSSString(cssVars);
+    if (typeof document !== "undefined") {
+      applyThemeCSS(css);
+    }
+    return {
+      success: true,
+      themeName: getThemeName(selectedThemes),
+      cssVars
+    };
+  } catch (error) {
+    console.error("Error generating theme:", error);
+    throw error;
+  }
+}
+
+// src/themes/useTheme.tsx
+var STORAGE_KEY = "design-system-theme";
+function useTheme() {
+  const [selectedThemes, setSelectedThemes] = useState(getDefaultThemes());
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const applyTheme = useCallback(async (themes) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      await generateAndApplyTheme(themes);
+      if (typeof window !== "undefined") {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(themes));
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to apply theme";
+      setError(errorMessage);
+      console.error("Theme application error:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) {
+        try {
+          const parsed = JSON.parse(stored);
+          setSelectedThemes(parsed);
+          applyTheme(parsed);
+        } catch {
+          const defaults = getDefaultThemes();
+          setSelectedThemes(defaults);
+          applyTheme(defaults);
+        }
+      } else {
+        const defaults = getDefaultThemes();
+        applyTheme(defaults);
+      }
+    }
+  }, [applyTheme]);
+  const updateTheme = useCallback(async (category, themeId) => {
+    const newThemes = {
+      ...selectedThemes,
+      [category]: themeId || void 0
+    };
+    setSelectedThemes(newThemes);
+    await applyTheme(newThemes);
+  }, [selectedThemes, applyTheme]);
+  const resetToDefaults = useCallback(async () => {
+    const defaults = getDefaultThemes();
+    setSelectedThemes(defaults);
+    await applyTheme(defaults);
+  }, [applyTheme]);
+  const getAvailableThemes = useCallback(async (category) => {
+    const categories = await getThemeCategories();
+    return categories[category]?.themes || {};
+  }, []);
+  return {
+    selectedThemes,
+    updateTheme,
+    resetToDefaults,
+    isLoading,
+    error,
+    getAvailableThemes
+  };
+}
+
+// src/themes/ui/ThemeToggle/useThemeToggle.ts
+function useThemeToggle() {
+  const { selectedThemes, updateTheme, isLoading, getAvailableThemes } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState(null);
+  const [themeCategories, setThemeCategories] = useState(null);
+  const menuRef = useRef(null);
+  useEffect(() => {
+    getThemeCategories().then(setThemeCategories);
+  }, []);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSelectedCategory(null);
+      }
+    }
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  const handleCategoryClick = useCallback((categoryKey) => {
+    setSelectedCategory(categoryKey);
+  }, []);
+  const handleThemeSelect = useCallback(async (category, themeId) => {
+    const currentTheme = selectedThemes[category];
+    const newTheme = currentTheme === themeId ? void 0 : themeId;
+    await updateTheme(category, newTheme);
+  }, [selectedThemes, updateTheme]);
+  const handleBack = useCallback(() => {
+    setSelectedCategory(null);
+  }, []);
+  const toggleMenu = useCallback(() => {
+    setIsOpen((prev) => {
+      if (!prev) {
+        setSelectedCategory(null);
+      }
+      return !prev;
+    });
+  }, []);
+  const categories = themeCategories ? Object.entries(themeCategories).sort(([, a], [, b]) => (a.order || 0) - (b.order || 0)) : [];
+  return {
+    selectedThemes,
+    isLoading,
+    getAvailableThemes,
+    isOpen,
+    selectedCategory,
+    themeCategories,
+    categories,
+    menuRef,
+    handleCategoryClick,
+    handleThemeSelect,
+    handleBack,
+    toggleMenu
+  };
+}
+
+// src/themes/ui/ThemeToggle/themeToggleConfig.ts
+var categoryIcons = {
+  color: "\u{1F3A8}",
+  typography: "\u{1F4DD}",
+  shape: "\u{1F532}",
+  density: "\u{1F4CF}",
+  animation: "\u2728"
+};
+var positionClasses = {
+  "bottom-right": "bottom-6 right-6",
+  "bottom-left": "bottom-6 left-6",
+  "top-right": "top-6 right-6",
+  "top-left": "top-6 left-6"
+};
+function getArcConfig(position) {
+  switch (position) {
+    case "bottom-right":
+      return { startAngle: -60, endAngle: -180, sweep: -150 };
+    case "bottom-left":
+      return { startAngle: -120, endAngle: 0, sweep: 150 };
+    case "top-right":
+      return { startAngle: 60, endAngle: 0, sweep: 150 };
+    case "top-left":
+      return { startAngle: 120, endAngle: 0, sweep: -150 };
+  }
+}
+
+// src/themes/ui/ThemeToggle/themeToggleUtils.ts
+function getPositionOnArc(angleDeg, radius) {
+  const rad = angleDeg * Math.PI / 180;
+  return {
+    x: Math.cos(rad) * radius,
+    y: Math.sin(rad) * radius
+  };
+}
+function ThemeToggle({
+  className,
+  position = "bottom-right"
+}) {
+  const {
+    selectedThemes,
+    isLoading,
+    getAvailableThemes,
+    isOpen,
+    selectedCategory,
+    categories,
+    menuRef,
+    handleCategoryClick,
+    handleThemeSelect,
+    handleBack,
+    toggleMenu
+  } = useThemeToggle();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      id: "theme-toggle",
+      className: cn("fixed z-50", positionClasses[position], className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: toggleMenu,
+            className: cn(
+              "w-14 h-14 rounded-full bg-primary text-primary-foreground",
+              "shadow-lg hover:shadow-xl",
+              "flex items-center justify-center",
+              "relative z-10",
+              "transition-all duration-200",
+              "hover:scale-110 active:scale-95",
+              isOpen && "rotate-90"
+            ),
+            "aria-label": "Theme settings",
+            title: "Theme settings",
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73 2.15l.22.38a2 2 0 0 1 0 2.73l-.22.38a2 2 0 0 0 2.15 2.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-2.15l-.22-.38a2 2 0 0 1 0-2.73l.22-.38a2 2 0 0 0-2.15-2.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" }),
+                  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+                ]
+              }
+            )
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none", children: !selectedCategory ? /* @__PURE__ */ jsx(
+          CategoryRing,
+          {
+            categories,
+            onCategoryClick: handleCategoryClick,
+            selectedThemes,
+            position
+          }
+        ) : /* @__PURE__ */ jsx(
+          ThemeRingAsync,
+          {
+            category: selectedCategory,
+            getAvailableThemes,
+            selectedTheme: selectedThemes[selectedCategory],
+            onThemeSelect: (themeId) => handleThemeSelect(selectedCategory, themeId),
+            onBack: handleBack,
+            isLoading,
+            position
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+function RadialWheel({
+  items,
+  position,
+  radius,
+  buttonSize,
+  startOffset = 0.75
+}) {
+  const arcConfig = getArcConfig(position);
+  const totalItems = items.length;
+  const angleStep = Math.abs(arcConfig.sweep) / totalItems;
+  return /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: items.map((item, index) => {
+    const angle = arcConfig.startAngle + angleStep * (index + startOffset) * Math.sign(arcConfig.sweep);
+    const pos = getPositionOnArc(angle, radius);
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: item.onClick,
+          disabled: item.disabled,
+          className: cn(
+            "absolute rounded-full",
+            "bg-background border-2 shadow-lg",
+            "flex items-center justify-center text-lg",
+            "pointer-events-auto",
+            "transition-all duration-200",
+            "hover:scale-110 active:scale-95",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            item.isSelected ? "border-primary bg-primary text-primary-foreground" : "border-border hover:border-primary/50",
+            item.className
+          ),
+          style: {
+            width: `${buttonSize}px`,
+            height: `${buttonSize}px`,
+            left: `${pos.x}px`,
+            top: `${pos.y}px`
+          },
+          "aria-label": item.label,
+          children: item.content
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "right", sideOffset: 8, children: item.label })
+    ] }, item.id);
+  }) });
+}
+function CategoryRing({
+  categories,
+  onCategoryClick,
+  selectedThemes,
+  position
+}) {
+  const radius = 60;
+  const buttonSize = 40;
+  const items = categories.map(([categoryKey, category]) => {
+    const hasSelection = !!selectedThemes[categoryKey];
+    return {
+      id: categoryKey,
+      content: categoryIcons[categoryKey] || "\u2699\uFE0F",
+      label: category.name,
+      onClick: () => onCategoryClick(categoryKey),
+      isSelected: hasSelection,
+      className: hasSelection ? "bg-primary/10" : void 0
+    };
+  });
+  return /* @__PURE__ */ jsx(
+    RadialWheel,
+    {
+      items,
+      position,
+      radius,
+      buttonSize,
+      startOffset: 0.5
+    }
+  );
+}
+function ThemeRingAsync({
+  category,
+  getAvailableThemes,
+  selectedTheme,
+  onThemeSelect,
+  onBack,
+  isLoading,
+  position
+}) {
+  const [themes, setThemes] = useState({});
+  useEffect(() => {
+    getAvailableThemes(category).then(setThemes);
+  }, [category, getAvailableThemes]);
+  const themeEntries = Object.entries(themes);
+  const radius = 65;
+  const buttonSize = 40;
+  const backButtonSize = 36;
+  const arcConfig = getArcConfig(position);
+  const backButtonPos = getPositionOnArc(arcConfig.startAngle, radius);
+  const items = themeEntries.map(([themeId, theme]) => ({
+    id: themeId,
+    content: theme.icon,
+    label: theme.name,
+    onClick: () => !isLoading && onThemeSelect(themeId),
+    isSelected: selectedTheme === themeId,
+    disabled: isLoading,
+    className: "text-base"
+    // Smaller text for theme icons
+  }));
+  return /* @__PURE__ */ jsxs("div", { className: "absolute inset-0", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onBack,
+        className: cn(
+          "absolute rounded-full",
+          "bg-muted border border-border shadow-md",
+          "flex items-center justify-center",
+          "pointer-events-auto",
+          "transition-all duration-200",
+          "hover:scale-110 active:scale-95"
+        ),
+        style: {
+          width: `${backButtonSize}px`,
+          height: `${backButtonSize}px`,
+          left: `${backButtonPos.x}px`,
+          top: `${backButtonPos.y}px`
+        },
+        "aria-label": "Back",
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "m12 19-7-7 7-7" }),
+              /* @__PURE__ */ jsx("path", { d: "M19 12H5" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      RadialWheel,
+      {
+        items,
+        position,
+        radius,
+        buttonSize,
+        startOffset: 1
+      }
+    ),
+    isLoading && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute w-12 h-12 rounded-full bg-primary/20 border-2 border-primary animate-pulse pointer-events-none",
+        style: {
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%, -50%)"
+        }
+      }
+    )
+  ] });
+}
+
+// src/themes/applyThemeSync.ts
+var STORAGE_KEY2 = "design-system-theme";
+function applyThemeSync() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+  let selectedThemes = getDefaultThemes();
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY2);
+    if (stored) {
+      selectedThemes = JSON.parse(stored);
+    }
+  } catch {
+  }
+  try {
+    const base = loadJSONSync("/tokens/base.json");
+    const palettes = loadJSONSync("/tokens/palettes.json");
+    const palette = palettes?.palette || {};
+    let merged = deepMergeSync(base || {}, { palette });
+    const categoryOrder = ["color", "typography", "shape", "density", "animation"];
+    for (const category of categoryOrder) {
+      const themeId = selectedThemes[category];
+      if (!themeId) continue;
+      try {
+        const themeData = loadJSONSync(`/tokens/themes/${category}/${themeId}.json`);
+        if (themeData) {
+          merged = deepMergeSync(merged, themeData);
+        }
+      } catch {
+      }
+    }
+    if (selectedThemes.custom) {
+      try {
+        const customData = loadJSONSync(`/tokens/themes/custom/${selectedThemes.custom}.json`);
+        if (customData) {
+          merged = deepMergeSync(merged, customData);
+        }
+      } catch {
+      }
+    }
+    const resolved = resolveReferencesSync(merged, palette);
+    const cssVars = flattenToCSSSync(resolved);
+    const mappedVars = mapToTailwindVarsSync(cssVars);
+    const css = `:root {
+${Object.entries(mappedVars).map(([key, value]) => `  ${key}: ${value};`).join("\n")}
+}`;
+    let styleTag = document.getElementById("dynamic-theme");
+    if (!styleTag) {
+      styleTag = document.createElement("style");
+      styleTag.id = "dynamic-theme";
+      document.head.insertBefore(styleTag, document.head.firstChild);
+    }
+    styleTag.textContent = css;
+  } catch (error) {
+    console.warn("Sync theme application failed, will apply via React:", error);
+  }
+}
+function loadJSONSync(path) {
+  try {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", path, false);
+    xhr.send(null);
+    if (xhr.status === 200 || xhr.status === 0) {
+      return JSON.parse(xhr.responseText);
+    }
+  } catch {
+  }
+  return null;
+}
+function deepMergeSync(target, source) {
+  const output = { ...target };
+  if (isObjectSync(target) && isObjectSync(source)) {
+    Object.keys(source).forEach((key) => {
+      if (isObjectSync(source[key])) {
+        if (!(key in target)) {
+          Object.assign(output, { [key]: source[key] });
+        } else {
+          output[key] = deepMergeSync(target[key], source[key]);
+        }
+      } else {
+        Object.assign(output, { [key]: source[key] });
+      }
+    });
+  }
+  return output;
+}
+function isObjectSync(item) {
+  return item && typeof item === "object" && !Array.isArray(item);
+}
+function resolveReferencesSync(tokens, palette) {
+  const resolved = JSON.parse(JSON.stringify(tokens));
+  function resolveValue(value) {
+    if (typeof value !== "string") return value;
+    const match = value.match(/^\{([^}]+)\}$/);
+    if (!match) return value;
+    const path = match[1].split(".");
+    let current = { palette, ...resolved };
+    for (const key of path) {
+      if (current && typeof current === "object" && key in current) {
+        current = current[key];
+      } else {
+        return value;
+      }
+    }
+    return typeof current === "string" ? current : value;
+  }
+  function traverse(obj) {
+    for (const key in obj) {
+      if (typeof obj[key] === "object" && obj[key] !== null) {
+        traverse(obj[key]);
+      } else {
+        obj[key] = resolveValue(obj[key]);
+      }
+    }
+  }
+  traverse(resolved);
+  return resolved;
+}
+function hexToHSL2(hex) {
+  hex = hex.replace("#", "");
+  const r = parseInt(hex.substring(0, 2), 16) / 255;
+  const g = parseInt(hex.substring(2, 4), 16) / 255;
+  const b = parseInt(hex.substring(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (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;
+        break;
+    }
+  }
+  h = Math.round(h * 360);
+  s = Math.round(s * 100);
+  const lPercent = Math.round(l * 100);
+  return `${h} ${s}% ${lPercent}%`;
+}
+function isHexColor2(value) {
+  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(value);
+}
+function flattenToCSSSync(tokens, prefix = "", result = {}, isColorContext = false) {
+  for (const key in tokens) {
+    const value = tokens[key];
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      const enteringColor = key === "color" && prefix === "";
+      const inColorContext = isColorContext || enteringColor;
+      if (enteringColor) {
+        flattenToCSSSync(value, "", result, true);
+      } else if (inColorContext) {
+        flattenToCSSSync(value, "", result, true);
+      } else {
+        const newPrefix = prefix ? `${prefix}-${key}` : key;
+        flattenToCSSSync(value, newPrefix, result, false);
+      }
+    } else {
+      let cssKey;
+      if (isColorContext || prefix === "" && key === "color") {
+        cssKey = `--${key}`;
+      } else if (prefix === "") {
+        cssKey = `--${key}`;
+      } else {
+        cssKey = `--${prefix}-${key}`;
+      }
+      let finalValue = value;
+      if (isColorContext && typeof value === "string" && isHexColor2(value)) {
+        finalValue = hexToHSL2(value);
+      }
+      result[cssKey] = finalValue;
+    }
+  }
+  return result;
+}
+function mapToTailwindVarsSync(cssVars) {
+  const mapped = { ...cssVars };
+  if (cssVars["--radius-button"]) {
+    mapped["--radius"] = cssVars["--radius-button"];
+  }
+  if (cssVars["--radius-card"]) {
+    mapped["--radius-lg"] = cssVars["--radius-card"];
+  }
+  if (cssVars["--font-body"]) {
+    mapped["--font-sans"] = cssVars["--font-body"];
+  }
+  if (cssVars["--spacing-base"]) {
+    mapped["--spacing"] = cssVars["--spacing-base"];
+  } else if (cssVars["--spacing-component-md"]) {
+    mapped["--spacing"] = cssVars["--spacing-component-md"];
+  }
+  return mapped;
+}
 
-export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, badgeVariants, buttonVariants };
+export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map