@tydavidson/design-system 1.1.17 → 1.1.18

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import * as React2 from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { IconCheck, IconPointFilled, IconChevronRight, IconX, IconSearch, IconSun, IconMoon } from '@tabler/icons-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { IconCheck, IconPointFilled, IconChevronRight, IconX, IconSearch } from '@tabler/icons-react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -16,15 +16,7 @@ import { Command as Command$1 } from 'cmdk';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
+// src/components/ui/button.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -40,213 +32,6 @@ function filterDOMProps(props, propNames) {
   propNames.forEach((name) => delete result[name]);
   return result;
 }
-var init_utils = __esm({
-  "src/lib/utils.ts"() {
-  }
-});
-function useThemeServer() {
-  return {
-    theme: "system",
-    setTheme: (theme) => {
-    },
-    resolvedTheme: "light",
-    isDark: false
-  };
-}
-function useTheme() {
-  const [themeData, setThemeData] = React2.useState({
-    theme: "system",
-    setTheme: (theme) => {
-    },
-    resolvedTheme: "light",
-    isDark: false
-  });
-  const [mounted, setMounted] = React2.useState(false);
-  React2.useEffect(() => {
-    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: currentTheme,
-        setTheme: themeManager.setTheme,
-        resolvedTheme: currentTheme,
-        isDark
-      });
-      setMounted(true);
-    });
-  }, []);
-  return themeData;
-}
-var init_theme_context = __esm({
-  "src/themes/theme-context.tsx"() {
-    "use client";
-  }
-});
-function ThemeToggle({
-  className,
-  variant = "icon",
-  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 /* @__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");
-  };
-  const iconSize = {
-    sm: 16,
-    md: 20,
-    lg: 24
-  };
-  const sizeClasses = {
-    sm: "h-8 w-8",
-    md: "h-10 w-10",
-    lg: "h-12 w-12"
-  };
-  const textSizeClasses = {
-    sm: "text-xs",
-    md: "text-sm",
-    lg: "text-base"
-  };
-  if (variant === "icon") {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: toggleTheme,
-        className: cn(
-          "inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-          sizeClasses[size],
-          className
-        ),
-        "aria-label": "Toggle theme",
-        ...props,
-        children: resolvedTheme === "dark" ? /* @__PURE__ */ jsx(IconSun, { size: iconSize[size], stroke: 1.5 }) : /* @__PURE__ */ jsx(IconMoon, { size: iconSize[size], stroke: 1.5 })
-      }
-    );
-  }
-  if (variant === "button") {
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: toggleTheme,
-        className: cn(
-          "inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2",
-          textSizeClasses[size],
-          "hover:bg-accent hover:text-accent-foreground",
-          className
-        ),
-        "aria-label": "Toggle theme",
-        ...props,
-        children: resolvedTheme === "dark" ? "Light Mode" : "Dark Mode"
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      onClick: toggleTheme,
-      className: cn(
-        "inline-flex items-center justify-center rounded-md px-3 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        textSizeClasses[size],
-        resolvedTheme === "dark" ? "bg-accent text-accent-foreground hover:bg-accent/80" : "bg-muted text-muted-foreground hover:bg-muted/80",
-        className
-      ),
-      "aria-label": "Toggle theme",
-      ...props,
-      children: resolvedTheme === "dark" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsx(IconSun, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
-        "Light"
-      ] }) : /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsx(IconMoon, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
-        "Dark"
-      ] })
-    }
-  );
-}
-var init_theme_toggle = __esm({
-  "src/components/ui/theme-toggle/theme-toggle.tsx"() {
-    "use client";
-    init_theme_context();
-    init_utils();
-  }
-});
-
-// src/components/ui/theme-toggle/index.ts
-var theme_toggle_exports = {};
-__export(theme_toggle_exports, {
-  ThemeToggle: () => ThemeToggle
-});
-var init_theme_toggle2 = __esm({
-  "src/components/ui/theme-toggle/index.ts"() {
-    init_theme_toggle();
-  }
-});
-
-// src/components/ui/button.tsx
-init_utils();
 var buttonVariants = cva(
   "float-button inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[4px] text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
@@ -351,9 +136,6 @@ var Button = React2.forwardRef(
   }
 );
 Button.displayName = "Button";
-
-// src/components/ui/dropdown-menu/dropdown-menu.tsx
-init_utils();
 var DropdownMenuRoot = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Trigger,
@@ -535,9 +317,6 @@ var DropdownMenu = {
   SubContent: DropdownMenuSubContent,
   SubTrigger: DropdownMenuSubTrigger
 };
-
-// src/components/typography/heading/heading.tsx
-init_utils();
 var Heading = React2.forwardRef(
   ({
     level = 1,
@@ -606,9 +385,6 @@ var Heading = React2.forwardRef(
   }
 );
 Heading.displayName = "Heading";
-
-// src/components/typography/text/text.tsx
-init_utils();
 var Text = React2.forwardRef(
   ({
     size = "md",
@@ -661,9 +437,6 @@ var Text = React2.forwardRef(
   }
 );
 Text.displayName = "Text";
-
-// src/components/ui/toggle.tsx
-init_utils();
 var Toggle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TogglePrimitive.Root,
   {
@@ -676,9 +449,6 @@ var Toggle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Toggle.displayName = TogglePrimitive.Root.displayName;
-
-// src/components/ui/toggle-group.tsx
-init_utils();
 var ToggleGroup = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   ToggleGroupPrimitive.Root,
   {
@@ -701,9 +471,6 @@ var ToggleGroupItem = React2.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-// src/components/ui/slider.tsx
-init_utils();
 var Slider = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
   SliderPrimitive.Root,
   {
@@ -720,9 +487,6 @@ var Slider = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
-
-// src/components/ui/popover.tsx
-init_utils();
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
@@ -740,9 +504,6 @@ var PopoverContent = React2.forwardRef(({ className, align = "center", sideOffse
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-// src/components/ui/hover-card.tsx
-init_utils();
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
 var HoverCardContent = React2.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
@@ -759,9 +520,6 @@ var HoverCardContent = React2.forwardRef(({ className, align = "center", sideOff
   }
 ));
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-
-// src/components/ui/sheet.tsx
-init_utils();
 var Sheet = SheetPrimitive.Root;
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
@@ -855,12 +613,6 @@ var SheetDescription = React2.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
-
-// src/components/ui/command.tsx
-init_utils();
-
-// src/components/ui/dialog.tsx
-init_utils();
 var Dialog = SheetPrimitive.Root;
 var DialogTrigger = SheetPrimitive.Trigger;
 var DialogPortal = SheetPrimitive.Portal;
@@ -1048,9 +800,6 @@ CommandShortcut.displayName = "CommandShortcut";
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
-
-// src/components/ui/context-menu.tsx
-init_utils();
 var ContextMenu = ContextMenuPrimitive.Root;
 var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 var ContextMenuGroup = ContextMenuPrimitive.Group;
@@ -1470,9 +1219,6 @@ var EmailFooter = ({ children }) => /* @__PURE__ */ jsx("div", { style: {
     /* @__PURE__ */ jsx("div", { children: "SoHo, New York" })
   ] })
 ] }) });
-
-// src/components/ui/card.tsx
-init_utils();
 var Card = React2.forwardRef(
   ({ className, variant = "default", ...props }, ref) => {
     const variantClasses = {
@@ -1555,9 +1301,6 @@ var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardFooter.displayName = "CardFooter";
-
-// src/components/ui/input.tsx
-init_utils();
 var Input = React2.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -1580,9 +1323,6 @@ var Input = React2.forwardRef(
 );
 Input.displayName = "Input";
 
-// src/index.ts
-init_utils();
-
 // src/tokens/colors.ts
 var colors = {
   // Base colors
@@ -1909,14 +1649,25 @@ function ClientThemeProvider({
 }
 function ClientThemeToggle(props) {
   const [mounted, setMounted] = React2.useState(false);
-  const [ThemeToggleComponent, setThemeToggleComponent] = React2.useState(void 0);
+  const [isDark, setIsDark] = React2.useState(false);
   React2.useEffect(() => {
     setMounted(true);
-    Promise.resolve().then(() => (init_theme_toggle2(), theme_toggle_exports)).then(({ ThemeToggle: ThemeToggle2 }) => {
-      setThemeToggleComponent(() => ThemeToggle2);
-    });
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme");
+      const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      const currentTheme = savedTheme || (systemPrefersDark ? "dark" : "light");
+      setIsDark(currentTheme === "dark");
+    }
   }, []);
-  if (!mounted || !ThemeToggleComponent) {
+  const toggleTheme = () => {
+    if (typeof window !== "undefined") {
+      const newTheme = isDark ? "light" : "dark";
+      localStorage.setItem("theme", newTheme);
+      document.documentElement.classList.toggle("dark", newTheme === "dark");
+      setIsDark(newTheme === "dark");
+    }
+  };
+  if (!mounted) {
     return /* @__PURE__ */ jsx(
       "button",
       {
@@ -1951,11 +1702,63 @@ function ClientThemeToggle(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(ThemeToggleComponent, { ...props });
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggleTheme,
+      className: "inline-flex items-center justify-center rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10",
+      "aria-label": "Toggle theme",
+      ...props,
+      children: isDark ? /* @__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" })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+        }
+      )
+    }
+  );
+}
+function useThemeServer() {
+  return {
+    theme: "system",
+    setTheme: (theme) => {
+    },
+    resolvedTheme: "light",
+    isDark: false
+  };
 }
-
-// src/themes/index.ts
-init_theme_context();
 
 // src/lib/theme-utils.ts
 var mapColorToShadcnVariant = (color) => {