@tydavidson/design-system 1.1.14 → 1.1.16

package/dist/index.mjs

@@ -44,68 +44,20 @@ var init_utils = __esm({
   "src/lib/utils.ts"() {
   }
 });
-
-// src/lib/theme-utils.ts
-var mapColorToShadcnVariant, mapVariantToShadcnVariant, getColorVariantClasses, isDarkTheme;
-var init_theme_utils = __esm({
-  "src/lib/theme-utils.ts"() {
-    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";
-      }
-    };
-    mapVariantToShadcnVariant = (variant) => {
-      switch (variant) {
-        case "primary":
-          return "default";
-        case "secondary":
-          return "outline";
-        case "tertiary":
-          return "ghost";
-        default:
-          return "default";
-      }
-    };
-    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] || "";
-    };
-    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__ */ jsx(Fragment, { children });
+}
 function useTheme() {
   const [themeData, setThemeData] = React2.useState({
     theme: "system",
@@ -116,47 +68,48 @@ function useTheme() {
   });
   const [mounted, setMounted] = React2.useState(false);
   React2.useEffect(() => {
-    import('next-themes').then(({ useTheme: useNextTheme }) => {
-      const { theme, setTheme, resolvedTheme, systemTheme } = useNextTheme();
-      const isDark = 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__ */ jsx(Fragment, { children });
-}
 var init_theme_context = __esm({
   "src/themes/theme-context.tsx"() {
     "use client";
-    init_theme_utils();
   }
 });
 function ThemeToggle({
@@ -165,12 +118,43 @@ function ThemeToggle({
   size = "md",
   ...props
 }) {
+  if (typeof window === "undefined") {
+    return /* @__PURE__ */ 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__ */ jsx(IconSun, { size: size === "sm" ? 16 : size === "lg" ? 24 : 20, stroke: 1.5 })
+      }
+    );
+  }
   const { theme, setTheme, resolvedTheme } = useTheme();
   const [mounted, setMounted] = React2.useState(false);
   React2.useEffect(() => {
     setMounted(true);
   }, []);
-  if (!mounted) return null;
+  if (!mounted) {
+    return /* @__PURE__ */ 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__ */ jsx(IconSun, { size: size === "sm" ? 16 : size === "lg" ? 24 : 20, stroke: 1.5 })
+      }
+    );
+  }
   const toggleTheme = () => {
     setTheme(resolvedTheme === "dark" ? "light" : "dark");
   };
@@ -1942,13 +1926,99 @@ function ClientThemeToggle(props) {
     });
   }, []);
   if (!mounted || !ThemeToggleComponent) {
-    return null;
+    return /* @__PURE__ */ 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__ */ jsxs(
+          "svg",
+          {
+            width: "20",
+            height: "20",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+              /* @__PURE__ */ jsx("path", { d: "M12 2v2" }),
+              /* @__PURE__ */ jsx("path", { d: "M12 20v2" }),
+              /* @__PURE__ */ jsx("path", { d: "m4.93 4.93 1.41 1.41" }),
+              /* @__PURE__ */ jsx("path", { d: "m17.66 17.66 1.41 1.41" }),
+              /* @__PURE__ */ jsx("path", { d: "M2 12h2" }),
+              /* @__PURE__ */ jsx("path", { d: "M20 12h2" }),
+              /* @__PURE__ */ jsx("path", { d: "m6.34 17.66-1.41 1.41" }),
+              /* @__PURE__ */ jsx("path", { d: "m19.07 4.93-1.41 1.41" })
+            ]
+          }
+        )
+      }
+    );
   }
   return /* @__PURE__ */ 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";
+};
 
 export { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ClientThemeProvider, ClientThemeToggle, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, EmailButton, EmailCaption, EmailContainer, EmailFooter, EmailHeader, EmailHeading, EmailLayout, EmailMuted, EmailText, Heading, HoverCard, HoverCardContent, HoverCardTrigger, Input, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Slider, Text, ThemeContextProvider, ThemeProvider, ThemeProviderNoSSR, ThemeToggle, Toggle, ToggleGroup, ToggleGroupItem, buttonVariants, cn, colors, filterDOMProps, generateId, getColorVariantClasses, isDarkTheme, isNotNullOrUndefined, mapColorToShadcnVariant, mapVariantToShadcnVariant, radius, shadows, spacing, tokens, typography, useTheme, useThemeServer };
 //# sourceMappingURL=index.mjs.map