@tydavidson/design-system 1.1.16 → 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,218 +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 ThemeContextProvider({
-  children
-}) {
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
-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",
   {
@@ -356,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,
@@ -540,9 +317,6 @@ var DropdownMenu = {
   SubContent: DropdownMenuSubContent,
   SubTrigger: DropdownMenuSubTrigger
 };
-
-// src/components/typography/heading/heading.tsx
-init_utils();
 var Heading = React2.forwardRef(
   ({
     level = 1,
@@ -611,9 +385,6 @@ var Heading = React2.forwardRef(
   }
 );
 Heading.displayName = "Heading";
-
-// src/components/typography/text/text.tsx
-init_utils();
 var Text = React2.forwardRef(
   ({
     size = "md",
@@ -666,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,
   {
@@ -681,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,
   {
@@ -706,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,
   {
@@ -725,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;
@@ -745,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(
@@ -764,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;
@@ -860,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;
@@ -1053,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;
@@ -1475,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 = {
@@ -1560,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(
@@ -1585,9 +1323,6 @@ var Input = React2.forwardRef(
 );
 Input.displayName = "Input";
 
-// src/index.ts
-init_utils();
-
 // src/tokens/colors.ts
 var colors = {
   // Base colors
@@ -1899,10 +1634,6 @@ function ThemeProviderNoSSR({
   }
   return /* @__PURE__ */ jsx(ThemeProvider, { ...props, children });
 }
-
-// src/themes/index.ts
-init_theme_context();
-init_theme_toggle2();
 function ClientThemeProvider({
   children,
   ...props
@@ -1918,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",
       {
@@ -1960,7 +1702,62 @@ 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/lib/theme-utils.ts
@@ -2020,6 +1817,6 @@ var isDarkTheme = (theme, systemTheme) => {
   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 };
+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, ThemeProvider, ThemeProviderNoSSR, Toggle, ToggleGroup, ToggleGroupItem, buttonVariants, cn, colors, filterDOMProps, generateId, getColorVariantClasses, isDarkTheme, isNotNullOrUndefined, mapColorToShadcnVariant, mapVariantToShadcnVariant, radius, shadows, spacing, tokens, typography, useThemeServer };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map