shru-design-system 0.1.8 → 0.1.9

package/dist/index.d.mts

@@ -170,8 +170,19 @@ declare const THEME_CATEGORY_ORDER: readonly ["color", "typography", "shape", "d
 /**
  * Register a custom theme dynamically
  * Allows users to add themes without modifying the base config
+ * Can be used for any category including custom
  */
 declare function registerTheme(category: string, themeId: string, metadata: ThemeMetadata): Record<string, ThemeCategory>;
+/**
+ * Register a theme from a token file
+ * Helper function to automatically register a theme by loading its file
+ * Users can call this after creating a theme file
+ */
+declare function registerThemeFromFile(category: string, themeId: string, filePath?: string): Promise<{
+    success: boolean;
+    themeId: string;
+    category: string;
+}>;
 /**
  * Get merged theme categories (base + discovered)
  */
@@ -215,4 +226,4 @@ declare function getCurrentCSSVariables(): Record<string, string>;
  */
 declare function applyThemeSync(): void;
 
-export { Badge, Button, Checkbox, Label, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, THEME_CATEGORY_ORDER, TextInput, Textarea, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, enableDebugMode, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };
+export { Badge, Button, Checkbox, Label, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, THEME_CATEGORY_ORDER, TextInput, Textarea, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, enableDebugMode, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, registerThemeFromFile, useTheme, useThemeToggle };

package/dist/index.d.ts

@@ -170,8 +170,19 @@ declare const THEME_CATEGORY_ORDER: readonly ["color", "typography", "shape", "d
 /**
  * Register a custom theme dynamically
  * Allows users to add themes without modifying the base config
+ * Can be used for any category including custom
  */
 declare function registerTheme(category: string, themeId: string, metadata: ThemeMetadata): Record<string, ThemeCategory>;
+/**
+ * Register a theme from a token file
+ * Helper function to automatically register a theme by loading its file
+ * Users can call this after creating a theme file
+ */
+declare function registerThemeFromFile(category: string, themeId: string, filePath?: string): Promise<{
+    success: boolean;
+    themeId: string;
+    category: string;
+}>;
 /**
  * Get merged theme categories (base + discovered)
  */
@@ -215,4 +226,4 @@ declare function getCurrentCSSVariables(): Record<string, string>;
  */
 declare function applyThemeSync(): void;
 
-export { Badge, Button, Checkbox, Label, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, THEME_CATEGORY_ORDER, TextInput, Textarea, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, enableDebugMode, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };
+export { Badge, Button, Checkbox, Label, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, THEME_CATEGORY_ORDER, TextInput, Textarea, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, enableDebugMode, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, registerThemeFromFile, useTheme, useThemeToggle };

package/dist/index.js

@@ -55,9 +55,9 @@ var buttonVariantsConfig = {
       link: "text-primary underline-offset-4 hover:underline"
     },
     size: {
-      default: "h-9 px-4 py-2 has-[>svg]:px-3",
-      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      default: "h-9 px-4 py-2 has-[>svg]:px-3 gap-component-sm",
+      sm: "h-8 rounded-md gap-component-xs px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4 gap-component-md",
       icon: "size-9",
       "icon-sm": "size-8",
       "icon-lg": "size-10"
@@ -69,7 +69,7 @@ var buttonVariantsConfig = {
   }
 };
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium font-sans transition-all duration-normal disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   buttonVariantsConfig
 );
 var Button = React__namespace.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
@@ -99,7 +99,7 @@ var badgeVariantsConfig = {
   }
 };
 var badgeVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium font-sans w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-component-xs [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] duration-normal overflow-hidden",
   badgeVariantsConfig
 );
 var Badge = React__namespace.forwardRef(({ className, variant, asChild = false, ...props }, ref) => {
@@ -124,7 +124,7 @@ var TextInput = React__namespace.forwardRef(
         type,
         "data-slot": "text-input",
         className: cn(
-          "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] duration-normal outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium font-sans disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
           "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
           className
@@ -158,7 +158,7 @@ var Textarea = React__namespace.forwardRef(
         ref,
         "data-slot": "textarea",
         className: cn(
-          "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] duration-normal outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm font-sans",
           className
         ),
         ...props
@@ -236,7 +236,7 @@ function ModalOverlay({
     {
       "data-slot": "modal-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 duration-normal",
         className
       ),
       ...props
@@ -256,7 +256,7 @@ function ModalContent({
       {
         "data-slot": "modal-content",
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-component-md rounded-lg border p-component-lg shadow-lg duration-normal font-sans sm:max-w-lg",
           className
         ),
         ...props,
@@ -283,7 +283,7 @@ function ModalHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "modal-header",
-      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      className: cn("flex flex-col gap-component-sm text-center sm:text-left font-sans", className),
       ...props
     }
   );
@@ -294,7 +294,7 @@ function ModalFooter({ className, ...props }) {
     {
       "data-slot": "modal-footer",
       className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "flex flex-col-reverse gap-component-sm sm:flex-row sm:justify-end",
         className
       ),
       ...props
@@ -653,7 +653,39 @@ async function discoverThemes() {
     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}`;
+      const existingThemes = discovered[category]?.themes || {};
+      const themeIds = Object.keys(existingThemes);
+      const commonThemeNames = ["ocean", "forest", "sunset", "midnight", "pastel", "vibrant", "muted", "high-contrast"];
+      for (const themeName of commonThemeNames) {
+        if (themeIds.includes(themeName)) continue;
+        const themePath = `${tokensBase}/themes/${category}/${themeName}.json`;
+        try {
+          const response = await fetch(themePath);
+          if (response.ok && response.headers.get("content-type")?.includes("application/json")) {
+            const themeData = await response.json();
+            registerTheme(category, themeName, {
+              name: themeData.name || themeName.charAt(0).toUpperCase() + themeName.slice(1),
+              file: `${category}/${themeName}.json`,
+              icon: themeData.icon || "\u{1F3A8}",
+              description: themeData.description || `Custom ${category} theme: ${themeName}`
+            });
+            if (!discovered[category]) {
+              discovered[category] = {
+                name: category.charAt(0).toUpperCase() + category.slice(1),
+                order: baseThemeCategories[category]?.order || 99,
+                themes: {}
+              };
+            }
+            discovered[category].themes[themeName] = {
+              name: themeData.name || themeName.charAt(0).toUpperCase() + themeName.slice(1),
+              file: `${category}/${themeName}.json`,
+              icon: themeData.icon || "\u{1F3A8}",
+              description: themeData.description || `Custom ${category} theme: ${themeName}`
+            };
+          }
+        } catch {
+        }
+      }
     }
     discoveredThemesCache = discovered;
     return discovered;
@@ -670,10 +702,14 @@ function registerTheme(category, themeId, metadata) {
   }
   const cache = discoveredThemesCache;
   if (!cache[category]) {
+    let order = 99;
+    if (THEME_CATEGORY_ORDER.includes(category)) {
+      const index = THEME_CATEGORY_ORDER.indexOf(category);
+      order = (index + 1) * 10;
+    }
     cache[category] = {
       name: category.charAt(0).toUpperCase() + category.slice(1),
-      order: 99,
-      // Custom categories get high order
+      order,
       themes: {}
     };
   }
@@ -685,6 +721,29 @@ function registerTheme(category, themeId, metadata) {
   };
   return cache;
 }
+async function registerThemeFromFile(category, themeId, filePath) {
+  const tokensBase = typeof window !== "undefined" && window.__THEME_TOKENS_BASE__ ? window.__THEME_TOKENS_BASE__ : "/tokens";
+  const path = filePath || `${tokensBase}/themes/${category}/${themeId}.json`;
+  try {
+    const response = await fetch(path);
+    if (!response.ok) {
+      throw new Error(`Failed to load theme file: ${response.statusText}`);
+    }
+    const themeData = await response.json();
+    registerTheme(category, themeId, {
+      name: themeData.name || themeId.charAt(0).toUpperCase() + themeId.slice(1),
+      file: filePath || `${category}/${themeId}.json`,
+      icon: themeData.icon || "\u{1F3A8}",
+      description: themeData.description || `Custom ${category} theme: ${themeId}`
+    });
+    return { success: true, themeId, category };
+  } catch (error) {
+    if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+      console.error(`Failed to register theme from ${path}:`, error);
+    }
+    throw error;
+  }
+}
 async function getThemeCategories() {
   return await discoverThemes();
 }
@@ -863,6 +922,8 @@ function flattenToCSS(tokens, prefix = "", result = {}, isColorContext = false)
       const enteringColor = key === "color" && prefix === "";
       const enteringTypography = key === "typography" && prefix === "";
       const enteringShape = key === "shape" && prefix === "";
+      const enteringAnimation = key === "animation" && prefix === "";
+      const enteringDensity = key === "spacing" && prefix === "";
       const inColorContext = isColorContext || enteringColor;
       if (enteringColor) {
         flattenToCSS(value, "", result, true);
@@ -870,6 +931,10 @@ function flattenToCSS(tokens, prefix = "", result = {}, isColorContext = false)
         flattenToCSS(value, "", result, false);
       } else if (enteringShape) {
         flattenToCSS(value, "", result, false);
+      } else if (enteringAnimation) {
+        flattenToCSS(value, "", result, false);
+      } else if (enteringDensity) {
+        flattenToCSS(value, "spacing", result, false);
       } else if (inColorContext) {
         flattenToCSS(value, "", result, true);
       } else {
@@ -1585,6 +1650,8 @@ function flattenToCSSSync(tokens, prefix = "", result = {}, isColorContext = fal
       const enteringColor = key === "color" && prefix === "";
       const enteringTypography = key === "typography" && prefix === "";
       const enteringShape = key === "shape" && prefix === "";
+      const enteringAnimation = key === "animation" && prefix === "";
+      const enteringDensity = key === "spacing" && prefix === "";
       const inColorContext = isColorContext || enteringColor;
       if (enteringColor) {
         flattenToCSSSync(value, "", result, true);
@@ -1592,6 +1659,10 @@ function flattenToCSSSync(tokens, prefix = "", result = {}, isColorContext = fal
         flattenToCSSSync(value, "", result, false);
       } else if (enteringShape) {
         flattenToCSSSync(value, "", result, false);
+      } else if (enteringAnimation) {
+        flattenToCSSSync(value, "", result, false);
+      } else if (enteringDensity) {
+        flattenToCSSSync(value, "spacing", result, false);
       } else if (inColorContext) {
         flattenToCSSSync(value, "", result, true);
       } else {
@@ -1678,5 +1749,6 @@ exports.getThemeCategories = getThemeCategories;
 exports.getThemeFilePath = getThemeFilePath;
 exports.getThemesForCategory = getThemesForCategory;
 exports.registerTheme = registerTheme;
+exports.registerThemeFromFile = registerThemeFromFile;
 exports.useTheme = useTheme;
 exports.useThemeToggle = useThemeToggle;

package/dist/index.mjs

@@ -28,9 +28,9 @@ var buttonVariantsConfig = {
       link: "text-primary underline-offset-4 hover:underline"
     },
     size: {
-      default: "h-9 px-4 py-2 has-[>svg]:px-3",
-      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      default: "h-9 px-4 py-2 has-[>svg]:px-3 gap-component-sm",
+      sm: "h-8 rounded-md gap-component-xs px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4 gap-component-md",
       icon: "size-9",
       "icon-sm": "size-8",
       "icon-lg": "size-10"
@@ -42,7 +42,7 @@ var buttonVariantsConfig = {
   }
 };
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium font-sans transition-all duration-normal disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   buttonVariantsConfig
 );
 var Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
@@ -72,7 +72,7 @@ var badgeVariantsConfig = {
   }
 };
 var badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium font-sans w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-component-xs [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] duration-normal overflow-hidden",
   badgeVariantsConfig
 );
 var Badge = React.forwardRef(({ className, variant, asChild = false, ...props }, ref) => {
@@ -97,7 +97,7 @@ var TextInput = React.forwardRef(
         type,
         "data-slot": "text-input",
         className: cn(
-          "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] duration-normal outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium font-sans disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
           "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
           className
@@ -131,7 +131,7 @@ var Textarea = React.forwardRef(
         ref,
         "data-slot": "textarea",
         className: cn(
-          "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] duration-normal outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm font-sans",
           className
         ),
         ...props
@@ -209,7 +209,7 @@ function ModalOverlay({
     {
       "data-slot": "modal-overlay",
       className: cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 duration-normal",
         className
       ),
       ...props
@@ -229,7 +229,7 @@ function ModalContent({
       {
         "data-slot": "modal-content",
         className: cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-component-md rounded-lg border p-component-lg shadow-lg duration-normal font-sans sm:max-w-lg",
           className
         ),
         ...props,
@@ -256,7 +256,7 @@ function ModalHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "modal-header",
-      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      className: cn("flex flex-col gap-component-sm text-center sm:text-left font-sans", className),
       ...props
     }
   );
@@ -267,7 +267,7 @@ function ModalFooter({ className, ...props }) {
     {
       "data-slot": "modal-footer",
       className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "flex flex-col-reverse gap-component-sm sm:flex-row sm:justify-end",
         className
       ),
       ...props
@@ -626,7 +626,39 @@ async function discoverThemes() {
     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}`;
+      const existingThemes = discovered[category]?.themes || {};
+      const themeIds = Object.keys(existingThemes);
+      const commonThemeNames = ["ocean", "forest", "sunset", "midnight", "pastel", "vibrant", "muted", "high-contrast"];
+      for (const themeName of commonThemeNames) {
+        if (themeIds.includes(themeName)) continue;
+        const themePath = `${tokensBase}/themes/${category}/${themeName}.json`;
+        try {
+          const response = await fetch(themePath);
+          if (response.ok && response.headers.get("content-type")?.includes("application/json")) {
+            const themeData = await response.json();
+            registerTheme(category, themeName, {
+              name: themeData.name || themeName.charAt(0).toUpperCase() + themeName.slice(1),
+              file: `${category}/${themeName}.json`,
+              icon: themeData.icon || "\u{1F3A8}",
+              description: themeData.description || `Custom ${category} theme: ${themeName}`
+            });
+            if (!discovered[category]) {
+              discovered[category] = {
+                name: category.charAt(0).toUpperCase() + category.slice(1),
+                order: baseThemeCategories[category]?.order || 99,
+                themes: {}
+              };
+            }
+            discovered[category].themes[themeName] = {
+              name: themeData.name || themeName.charAt(0).toUpperCase() + themeName.slice(1),
+              file: `${category}/${themeName}.json`,
+              icon: themeData.icon || "\u{1F3A8}",
+              description: themeData.description || `Custom ${category} theme: ${themeName}`
+            };
+          }
+        } catch {
+        }
+      }
     }
     discoveredThemesCache = discovered;
     return discovered;
@@ -643,10 +675,14 @@ function registerTheme(category, themeId, metadata) {
   }
   const cache = discoveredThemesCache;
   if (!cache[category]) {
+    let order = 99;
+    if (THEME_CATEGORY_ORDER.includes(category)) {
+      const index = THEME_CATEGORY_ORDER.indexOf(category);
+      order = (index + 1) * 10;
+    }
     cache[category] = {
       name: category.charAt(0).toUpperCase() + category.slice(1),
-      order: 99,
-      // Custom categories get high order
+      order,
       themes: {}
     };
   }
@@ -658,6 +694,29 @@ function registerTheme(category, themeId, metadata) {
   };
   return cache;
 }
+async function registerThemeFromFile(category, themeId, filePath) {
+  const tokensBase = typeof window !== "undefined" && window.__THEME_TOKENS_BASE__ ? window.__THEME_TOKENS_BASE__ : "/tokens";
+  const path = filePath || `${tokensBase}/themes/${category}/${themeId}.json`;
+  try {
+    const response = await fetch(path);
+    if (!response.ok) {
+      throw new Error(`Failed to load theme file: ${response.statusText}`);
+    }
+    const themeData = await response.json();
+    registerTheme(category, themeId, {
+      name: themeData.name || themeId.charAt(0).toUpperCase() + themeId.slice(1),
+      file: filePath || `${category}/${themeId}.json`,
+      icon: themeData.icon || "\u{1F3A8}",
+      description: themeData.description || `Custom ${category} theme: ${themeId}`
+    });
+    return { success: true, themeId, category };
+  } catch (error) {
+    if (typeof window !== "undefined" && window.__DESIGN_SYSTEM_DEBUG__) {
+      console.error(`Failed to register theme from ${path}:`, error);
+    }
+    throw error;
+  }
+}
 async function getThemeCategories() {
   return await discoverThemes();
 }
@@ -836,6 +895,8 @@ function flattenToCSS(tokens, prefix = "", result = {}, isColorContext = false)
       const enteringColor = key === "color" && prefix === "";
       const enteringTypography = key === "typography" && prefix === "";
       const enteringShape = key === "shape" && prefix === "";
+      const enteringAnimation = key === "animation" && prefix === "";
+      const enteringDensity = key === "spacing" && prefix === "";
       const inColorContext = isColorContext || enteringColor;
       if (enteringColor) {
         flattenToCSS(value, "", result, true);
@@ -843,6 +904,10 @@ function flattenToCSS(tokens, prefix = "", result = {}, isColorContext = false)
         flattenToCSS(value, "", result, false);
       } else if (enteringShape) {
         flattenToCSS(value, "", result, false);
+      } else if (enteringAnimation) {
+        flattenToCSS(value, "", result, false);
+      } else if (enteringDensity) {
+        flattenToCSS(value, "spacing", result, false);
       } else if (inColorContext) {
         flattenToCSS(value, "", result, true);
       } else {
@@ -1558,6 +1623,8 @@ function flattenToCSSSync(tokens, prefix = "", result = {}, isColorContext = fal
       const enteringColor = key === "color" && prefix === "";
       const enteringTypography = key === "typography" && prefix === "";
       const enteringShape = key === "shape" && prefix === "";
+      const enteringAnimation = key === "animation" && prefix === "";
+      const enteringDensity = key === "spacing" && prefix === "";
       const inColorContext = isColorContext || enteringColor;
       if (enteringColor) {
         flattenToCSSSync(value, "", result, true);
@@ -1565,6 +1632,10 @@ function flattenToCSSSync(tokens, prefix = "", result = {}, isColorContext = fal
         flattenToCSSSync(value, "", result, false);
       } else if (enteringShape) {
         flattenToCSSSync(value, "", result, false);
+      } else if (enteringAnimation) {
+        flattenToCSSSync(value, "", result, false);
+      } else if (enteringDensity) {
+        flattenToCSSSync(value, "spacing", result, false);
       } else if (inColorContext) {
         flattenToCSSSync(value, "", result, true);
       } else {
@@ -1608,4 +1679,4 @@ function mapToTailwindVarsSync(cssVars) {
   return mapped;
 }
 
-export { Badge, Button, Checkbox, Label, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, THEME_CATEGORY_ORDER, TextInput, Textarea, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, enableDebugMode, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };
+export { Badge, Button, Checkbox, Label, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, THEME_CATEGORY_ORDER, TextInput, Textarea, ThemeToggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, enableDebugMode, getCurrentCSSVariables, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, registerThemeFromFile, useTheme, useThemeToggle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shru-design-system",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A React component library with atoms and molecules built on Radix UI and Tailwind CSS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/scripts/apply-theme-sync.js

@@ -171,13 +171,31 @@
     for (var key in tokens) {
       var value = tokens[key];
       if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
-        // Token files are already in correct structure (no nested typography/shape wrappers)
+        // Special handling: color, typography, shape, animation, and density objects flatten without their category prefix
         var enteringColor = key === 'color' && prefix === '';
+        var enteringTypography = key === 'typography' && prefix === '';
+        var enteringShape = key === 'shape' && prefix === '';
+        var enteringAnimation = key === 'animation' && prefix === '';
+        var enteringDensity = key === 'spacing' && prefix === ''; // Density uses spacing key
         var inColorContext = isColorContext || enteringColor;
         
         if (enteringColor) {
           // When entering color object, flatten without "color-" prefix
           flattenToCSS(value, '', result, true);
+        } else if (enteringTypography) {
+          // When entering typography object, flatten without "typography-" prefix
+          flattenToCSS(value, '', result, false);
+        } else if (enteringShape) {
+          // When entering shape object, flatten without "shape-" prefix
+          flattenToCSS(value, '', result, false);
+        } else if (enteringAnimation) {
+          // When entering animation object, flatten without "animation-" prefix
+          // animation.duration.fast → --duration-fast
+          flattenToCSS(value, '', result, false);
+        } else if (enteringDensity) {
+          // When entering density/spacing object at root, we need to preserve "spacing-" prefix
+          // spacing.component.md → --spacing-component-md
+          flattenToCSS(value, 'spacing', result, false);
         } else if (inColorContext) {
           // Already in color context, continue with empty prefix
           flattenToCSS(value, '', result, true);

package/scripts/applyThemeSync.js

@@ -217,11 +217,33 @@ function flattenToCSSSync(tokens, prefix = '', result = {}, isColorContext = fal
         if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
             // Token files are already in correct structure (no nested typography/shape wrappers)
             const enteringColor = key === 'color' && prefix === '';
+            const enteringTypography = key === 'typography' && prefix === '';
+            const enteringShape = key === 'shape' && prefix === '';
+            const enteringAnimation = key === 'animation' && prefix === '';
+            const enteringDensity = key === 'spacing' && prefix === ''; // Density uses spacing key
             const inColorContext = isColorContext || enteringColor;
             if (enteringColor) {
                 // When entering color object, flatten without "color-" prefix
                 flattenToCSSSync(value, '', result, true);
             }
+            else if (enteringTypography) {
+                // When entering typography object, flatten without "typography-" prefix
+                flattenToCSSSync(value, '', result, false);
+            }
+            else if (enteringShape) {
+                // When entering shape object, flatten without "shape-" prefix
+                flattenToCSSSync(value, '', result, false);
+            }
+            else if (enteringAnimation) {
+                // When entering animation object, flatten without "animation-" prefix
+                // animation.duration.fast → --duration-fast
+                flattenToCSSSync(value, '', result, false);
+            }
+            else if (enteringDensity) {
+                // When entering density/spacing object at root, we need to preserve "spacing-" prefix
+                // spacing.component.md → --spacing-component-md
+                flattenToCSSSync(value, 'spacing', result, false);
+            }
             else if (inColorContext) {
                 // Already in color context, continue with empty prefix
                 flattenToCSSSync(value, '', result, true);

package/scripts/init.js

@@ -119,15 +119,21 @@ export default {
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
       },
+      // ⚠️ IF YOU UPDATE borderRadius CONFIG, ALSO UPDATE:
+      // 1. test/tailwind.config.js - borderRadius config (test app)
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      // ⚠️ IF YOU UPDATE fontFamily CONFIG, ALSO UPDATE:
+      // 1. test/tailwind.config.js - fontFamily config (test app)
       fontFamily: {
         sans: ["var(--font-sans)", "system-ui", "sans-serif"],
         body: ["var(--font-body)", "var(--font-sans)", "system-ui", "sans-serif"],
       },
+      // ⚠️ IF YOU UPDATE spacing CONFIG, ALSO UPDATE:
+      // 1. test/tailwind.config.js - spacing config (test app)
       spacing: {
         'component-xs': "var(--spacing-component-xs, 0.25rem)",
         'component-sm': "var(--spacing-component-sm, 0.5rem)",
@@ -135,6 +141,13 @@ export default {
         'component-lg': "var(--spacing-component-lg, 1.5rem)",
         'component-xl': "var(--spacing-component-xl, 2rem)",
       },
+      gap: {
+        'component-xs': "var(--spacing-component-xs, 0.25rem)",
+        'component-sm': "var(--spacing-component-sm, 0.5rem)",
+        'component-md': "var(--spacing-component-md, 1rem)",
+        'component-lg': "var(--spacing-component-lg, 1.5rem)",
+        'component-xl': "var(--spacing-component-xl, 2rem)",
+      },
       transitionDuration: {
         'fast': "var(--duration-fast, 150ms)",
         'normal': "var(--duration-normal, 300ms)",
@@ -222,6 +235,7 @@ function createCSSFile() {
   body {
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
+    font-family: var(--font-sans), system-ui, sans-serif;
   }
 }
 `;
@@ -264,6 +278,7 @@ function createCSSFile() {
   body {
     background-color: hsl(var(--background));
     color: hsl(var(--foreground));
+    font-family: var(--font-sans), system-ui, sans-serif;
   }
 }
 `;
@@ -290,8 +305,8 @@ function getLibraryTokensPath() {
 }
 
 /**
- * Recursively copy directory, preserving user files
- * Only copies/updates files that were created by the library
+ * Recursively copy directory, always overwriting library files
+ * Never preserves existing library files - always overwrites or creates new
  */
 function copyDirectory(src, dest) {
   if (!fs.existsSync(src)) {
@@ -314,13 +329,13 @@ function copyDirectory(src, dest) {
       const subCopied = copyDirectory(srcPath, destPath);
       if (subCopied) copiedCount += subCopied;
     } else if (entry.isFile() && entry.name.endsWith('.json')) {
-      // For JSON files, check if it's a library file or user file
+      // For JSON files, always overwrite if source is a library file
       try {
         const srcContent = JSON.parse(fs.readFileSync(srcPath, 'utf8'));
         const isLibraryFile = srcContent._createdBy && srcContent._createdBy.includes(LIBRARY_NAME.split(' ')[0]);
         
         if (isLibraryFile) {
-          // Always update library files
+          // Always overwrite library files (never preserve)
           fs.copyFileSync(srcPath, destPath);
           copiedCount++;
         } else if (!fs.existsSync(destPath)) {
@@ -328,10 +343,20 @@ function copyDirectory(src, dest) {
           fs.copyFileSync(srcPath, destPath);
           copiedCount++;
         }
-        // If dest exists and is not a library file, preserve it (user's custom file)
+        // If source is not a library file, don't copy (preserve user's custom files)
       } catch (e) {
-        // If JSON parsing fails, just copy it
-        if (!fs.existsSync(destPath)) {
+        // If JSON parsing fails, check if it's a known library file path
+        // Known library files: base.json, palettes.json, and all files in themes/
+        const isKnownLibraryFile = entry.name === 'base.json' || 
+                                   entry.name === 'palettes.json' || 
+                                   srcPath.includes(path.join('tokens', 'themes'));
+        
+        if (isKnownLibraryFile) {
+          // Always overwrite known library files
+          fs.copyFileSync(srcPath, destPath);
+          copiedCount++;
+        } else if (!fs.existsSync(destPath)) {
+          // New file that doesn't exist in dest
           fs.copyFileSync(srcPath, destPath);
           copiedCount++;
         }
@@ -446,39 +471,22 @@ function createTokenFiles() {
   tokenFilesToCheck.forEach(relativePath => {
     const destPath = path.join(tokensDir, relativePath);
     
-    // If file exists, check if it needs migration
-    if (fs.existsSync(destPath)) {
-      try {
-        const existing = JSON.parse(fs.readFileSync(destPath, 'utf8'));
-        const migrated = migrateTokenStructure(existing);
-        
-        // Check if migration changed the structure
-        if (JSON.stringify(existing) !== JSON.stringify(migrated)) {
-          migrated._createdBy = LIBRARY_NAME;
-          fs.writeFileSync(destPath, JSON.stringify(migrated, null, 2));
-          log(`Migrated ${relativePath} to new structure`, 'yellow');
-        }
-      } catch (e) {
-        // If file is corrupted, try to read from library
-        const libraryData = readLibraryTokenFile(relativePath);
-        if (libraryData) {
-          libraryData._createdBy = LIBRARY_NAME;
-          fs.writeFileSync(destPath, JSON.stringify(libraryData, null, 2));
-          log(`Restored ${relativePath} from library`, 'green');
-        }
+    // Always read from library and overwrite (never preserve existing files)
+    const libraryData = readLibraryTokenFile(relativePath);
+    if (libraryData) {
+      // Ensure directory exists
+      const destDir = path.dirname(destPath);
+      if (!fs.existsSync(destDir)) {
+        fs.mkdirSync(destDir, { recursive: true });
       }
-    } else {
-      // File doesn't exist, try to read from library
-      const libraryData = readLibraryTokenFile(relativePath);
-      if (libraryData) {
-        // Ensure directory exists
-        const destDir = path.dirname(destPath);
-        if (!fs.existsSync(destDir)) {
-          fs.mkdirSync(destDir, { recursive: true });
-        }
-        
-        libraryData._createdBy = LIBRARY_NAME;
-        fs.writeFileSync(destPath, JSON.stringify(libraryData, null, 2));
+      
+      // Always overwrite with library version
+      libraryData._createdBy = LIBRARY_NAME;
+      fs.writeFileSync(destPath, JSON.stringify(libraryData, null, 2));
+      
+      if (fs.existsSync(destPath)) {
+        log(`Updated ${relativePath} from library`, 'green');
+      } else {
         log(`Created ${relativePath} from library`, 'green');
       }
     }

package/scripts/themeUtils.js

@@ -231,11 +231,33 @@ function flattenToCSS(tokens, prefix = '', result = {}, isColorContext = false)
         if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
             // Token files are already in correct structure (no nested typography/shape wrappers)
             const enteringColor = key === 'color' && prefix === '';
+            const enteringTypography = key === 'typography' && prefix === '';
+            const enteringShape = key === 'shape' && prefix === '';
+            const enteringAnimation = key === 'animation' && prefix === '';
+            const enteringDensity = key === 'spacing' && prefix === ''; // Density uses spacing key
             const inColorContext = isColorContext || enteringColor;
             if (enteringColor) {
                 // When entering color object, flatten without "color-" prefix
                 flattenToCSS(value, '', result, true);
             }
+            else if (enteringTypography) {
+                // When entering typography object, flatten without "typography-" prefix
+                flattenToCSS(value, '', result, false);
+            }
+            else if (enteringShape) {
+                // When entering shape object, flatten without "shape-" prefix
+                flattenToCSS(value, '', result, false);
+            }
+            else if (enteringAnimation) {
+                // When entering animation object, flatten without "animation-" prefix
+                // animation.duration.fast → --duration-fast
+                flattenToCSS(value, '', result, false);
+            }
+            else if (enteringDensity) {
+                // When entering density/spacing object at root, we need to preserve "spacing-" prefix
+                // spacing.component.md → --spacing-component-md
+                flattenToCSS(value, 'spacing', result, false);
+            }
             else if (inColorContext) {
                 // Already in color context, continue with empty prefix
                 flattenToCSS(value, '', result, true);

package/scripts/tokens/palettes.json

@@ -42,6 +42,32 @@
       "800": "#991b1b",
       "900": "#7f1d1d",
       "950": "#450a0a"
+    },
+    "purple": {
+      "50": "#faf5ff",
+      "100": "#f3e8ff",
+      "200": "#e9d5ff",
+      "300": "#d8b4fe",
+      "400": "#c084fc",
+      "500": "#a855f7",
+      "600": "#9333ea",
+      "700": "#7e22ce",
+      "800": "#6b21a8",
+      "900": "#581c87",
+      "950": "#3b0764"
+    },
+    "pink": {
+      "50": "#fdf2f8",
+      "100": "#fce7f3",
+      "200": "#fbcfe8",
+      "300": "#f9a8d4",
+      "400": "#f472b6",
+      "500": "#ec4899",
+      "600": "#db2777",
+      "700": "#be185d",
+      "800": "#9f1239",
+      "900": "#831843",
+      "950": "#500724"
     }
   }
 }