@tydavidson/design-system 1.1.14 → 1.1.16

package/dist/index.js

@@ -75,68 +75,20 @@ var init_utils = __esm({
   "src/lib/utils.ts"() {
   }
 });
-
-// src/lib/theme-utils.ts
-exports.mapColorToShadcnVariant = void 0; exports.mapVariantToShadcnVariant = void 0; exports.getColorVariantClasses = void 0; exports.isDarkTheme = void 0;
-var init_theme_utils = __esm({
-  "src/lib/theme-utils.ts"() {
-    exports.mapColorToShadcnVariant = (color) => {
-      switch (color) {
-        case "brand":
-          return "default";
-        case "error":
-          return "destructive";
-        case "warning":
-        case "success":
-          return "secondary";
-        // Will need additional classes
-        default:
-          return "default";
-      }
-    };
-    exports.mapVariantToShadcnVariant = (variant) => {
-      switch (variant) {
-        case "primary":
-          return "default";
-        case "secondary":
-          return "outline";
-        case "tertiary":
-          return "ghost";
-        default:
-          return "default";
-      }
-    };
-    exports.getColorVariantClasses = (color, variant) => {
-      const colorVariantMap = {
-        primary: {
-          brand: "bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500",
-          error: "bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500",
-          warning: "bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500",
-          success: "bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500"
-        },
-        secondary: {
-          brand: "border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
-          error: "border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
-          warning: "border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
-          success: "border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
-        },
-        tertiary: {
-          brand: "text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
-          error: "text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
-          warning: "text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
-          success: "text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
-        }
-      };
-      return colorVariantMap[variant]?.[color] || "";
-    };
-    exports.isDarkTheme = (theme, systemTheme) => {
-      if (theme === "system") {
-        return systemTheme === "dark";
-      }
-      return theme === "dark";
-    };
-  }
-});
+function useThemeServer() {
+  return {
+    theme: "system",
+    setTheme: (theme) => {
+    },
+    resolvedTheme: "light",
+    isDark: false
+  };
+}
+function ThemeContextProvider({
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
 function useTheme() {
   const [themeData, setThemeData] = React2__namespace.useState({
     theme: "system",
@@ -147,47 +99,48 @@ function useTheme() {
   });
   const [mounted, setMounted] = React2__namespace.useState(false);
   React2__namespace.useEffect(() => {
-    import('next-themes').then(({ useTheme: useNextTheme }) => {
-      const { theme, setTheme, resolvedTheme, systemTheme } = useNextTheme();
-      const isDark = exports.isDarkTheme(theme, systemTheme);
+    if (typeof window === "undefined") return;
+    import('next-themes').then((nextThemes) => {
+      const themeManager = {
+        getTheme: () => {
+          if (typeof window !== "undefined") {
+            const savedTheme = localStorage.getItem("theme");
+            if (savedTheme) return savedTheme;
+            if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+              return "dark";
+            }
+          }
+          return "light";
+        },
+        setTheme: (theme) => {
+          if (typeof window !== "undefined") {
+            localStorage.setItem("theme", theme);
+            document.documentElement.classList.toggle("dark", theme === "dark");
+            setThemeData((prev) => ({
+              ...prev,
+              theme,
+              resolvedTheme: theme,
+              isDark: theme === "dark"
+            }));
+          }
+        }
+      };
+      const currentTheme = themeManager.getTheme();
+      const isDark = currentTheme === "dark";
       setThemeData({
-        theme: theme || "system",
-        setTheme,
-        resolvedTheme: resolvedTheme || "light",
+        theme: currentTheme,
+        setTheme: themeManager.setTheme,
+        resolvedTheme: currentTheme,
         isDark
       });
       setMounted(true);
     });
   }, []);
-  if (!mounted) {
-    return {
-      theme: "system",
-      setTheme: (theme) => {
-      },
-      resolvedTheme: "light",
-      isDark: false
-    };
-  }
   return themeData;
 }
-function useThemeServer() {
-  return {
-    theme: "system",
-    setTheme: (theme) => {
-    },
-    resolvedTheme: "light",
-    isDark: false
-  };
-}
-function ThemeContextProvider({
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-}
 var init_theme_context = __esm({
   "src/themes/theme-context.tsx"() {
     "use client";
-    init_theme_utils();
   }
 });
 function ThemeToggle({
@@ -196,12 +149,43 @@ function ThemeToggle({
   size = "md",
   ...props
 }) {
+  if (typeof window === "undefined") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "inline-flex items-center justify-center rounded-md border border-input bg-background",
+          size === "sm" ? "h-8 w-8" : size === "lg" ? "h-12 w-12" : "h-10 w-10",
+          className
+        ),
+        "aria-label": "Toggle theme",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: size === "sm" ? 16 : size === "lg" ? 24 : 20, stroke: 1.5 })
+      }
+    );
+  }
   const { theme, setTheme, resolvedTheme } = useTheme();
   const [mounted, setMounted] = React2__namespace.useState(false);
   React2__namespace.useEffect(() => {
     setMounted(true);
   }, []);
-  if (!mounted) return null;
+  if (!mounted) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "inline-flex items-center justify-center rounded-md border border-input bg-background",
+          size === "sm" ? "h-8 w-8" : size === "lg" ? "h-12 w-12" : "h-10 w-10",
+          className
+        ),
+        "aria-label": "Toggle theme",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: size === "sm" ? 16 : size === "lg" ? 24 : 20, stroke: 1.5 })
+      }
+    );
+  }
   const toggleTheme = () => {
     setTheme(resolvedTheme === "dark" ? "light" : "dark");
   };
@@ -1973,13 +1957,99 @@ function ClientThemeToggle(props) {
     });
   }, []);
   if (!mounted || !ThemeToggleComponent) {
-    return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "inline-flex items-center justify-center rounded-md border border-input bg-background h-10 w-10",
+        "aria-label": "Toggle theme",
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2v2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 20v2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m4.93 4.93 1.41 1.41" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m17.66 17.66 1.41 1.41" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 12h2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 12h2" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6.34 17.66-1.41 1.41" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m19.07 4.93-1.41 1.41" })
+            ]
+          }
+        )
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeToggleComponent, { ...props });
 }
 
-// src/themes/index.ts
-init_theme_utils();
+// src/lib/theme-utils.ts
+var mapColorToShadcnVariant = (color) => {
+  switch (color) {
+    case "brand":
+      return "default";
+    case "error":
+      return "destructive";
+    case "warning":
+    case "success":
+      return "secondary";
+    // Will need additional classes
+    default:
+      return "default";
+  }
+};
+var mapVariantToShadcnVariant = (variant) => {
+  switch (variant) {
+    case "primary":
+      return "default";
+    case "secondary":
+      return "outline";
+    case "tertiary":
+      return "ghost";
+    default:
+      return "default";
+  }
+};
+var getColorVariantClasses = (color, variant) => {
+  const colorVariantMap = {
+    primary: {
+      brand: "bg-brand-600 hover:bg-brand-700 text-white focus-visible:ring-brand-500",
+      error: "bg-error-600 hover:bg-error-700 text-white focus-visible:ring-error-500",
+      warning: "bg-warning-600 hover:bg-warning-700 text-white focus-visible:ring-warning-500",
+      success: "bg-success-600 hover:bg-success-700 text-white focus-visible:ring-success-500"
+    },
+    secondary: {
+      brand: "border-brand-300 text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
+      error: "border-error-300 text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
+      warning: "border-warning-300 text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
+      success: "border-success-300 text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
+    },
+    tertiary: {
+      brand: "text-brand-700 hover:bg-brand-50 focus-visible:ring-brand-500",
+      error: "text-error-700 hover:bg-error-50 focus-visible:ring-error-500",
+      warning: "text-warning-700 hover:bg-warning-50 focus-visible:ring-warning-500",
+      success: "text-success-700 hover:bg-success-50 focus-visible:ring-success-500"
+    }
+  };
+  return colorVariantMap[variant]?.[color] || "";
+};
+var isDarkTheme = (theme, systemTheme) => {
+  if (theme === "system") {
+    return systemTheme === "dark";
+  }
+  return theme === "dark";
+};
 
 exports.Button = Button;
 exports.Card = Card;
@@ -2070,7 +2140,11 @@ exports.cn = cn;
 exports.colors = colors;
 exports.filterDOMProps = filterDOMProps;
 exports.generateId = generateId;
+exports.getColorVariantClasses = getColorVariantClasses;
+exports.isDarkTheme = isDarkTheme;
 exports.isNotNullOrUndefined = isNotNullOrUndefined;
+exports.mapColorToShadcnVariant = mapColorToShadcnVariant;
+exports.mapVariantToShadcnVariant = mapVariantToShadcnVariant;
 exports.radius = radius;
 exports.shadows = shadows;
 exports.spacing = spacing;