shru-design-system 0.1.2 → 0.1.3

package/dist/index.d.mts

@@ -152,4 +152,14 @@ declare function getThemesForCategory(category: string): Promise<Record<string,
  */
 declare function getTheme(category: string, themeId: string): Promise<ThemeMetadata | null>;
 
-export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };
+/**
+ * Synchronous theme application for blocking script execution
+ * This runs before React hydrates to prevent theme flash
+ */
+/**
+ * Apply theme synchronously using blocking XMLHttpRequest
+ * This prevents flash of unstyled content
+ */
+declare function applyThemeSync(): void;
+
+export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };

package/dist/index.d.ts

@@ -152,4 +152,14 @@ declare function getThemesForCategory(category: string): Promise<Record<string,
  */
 declare function getTheme(category: string, themeId: string): Promise<ThemeMetadata | null>;
 
-export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };
+/**
+ * Synchronous theme application for blocking script execution
+ * This runs before React hydrates to prevent theme flash
+ */
+/**
+ * Apply theme synchronously using blocking XMLHttpRequest
+ * This prevents flash of unstyled content
+ */
+declare function applyThemeSync(): void;
+
+export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };

package/dist/index.js

@@ -712,6 +712,39 @@ function resolveReferences(tokens, palette) {
   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];
@@ -735,7 +768,11 @@ function flattenToCSS(tokens, prefix = "", result = {}, isColorContext = false)
       } else {
         cssKey = `--${prefix}-${key}`;
       }
-      result[cssKey] = value;
+      let finalValue = value;
+      if (isColorContext && typeof value === "string" && isHexColor(value)) {
+        finalValue = hexToHSL(value);
+      }
+      result[cssKey] = finalValue;
     }
   }
   return result;
@@ -1226,6 +1263,208 @@ function ThemeRingAsync({
   ] });
 }
 
+// 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;
+}
+
 exports.Badge = Badge;
 exports.Button = Button;
 exports.Modal = Modal;
@@ -1253,6 +1492,7 @@ exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
+exports.applyThemeSync = applyThemeSync;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.getTheme = getTheme;