@tydavidson/design-system 1.1.16 → 1.1.18

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { ThemeColor } from './themes/index.mjs';
-export { ClientThemeProvider, ClientThemeToggle, ComponentVariant, ThemeContextProvider, ThemeProvider, ThemeProviderNoSSR, ThemeToggle, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useTheme, useThemeServer } from './themes/index.mjs';
+export { ClientThemeProvider, ClientThemeToggle, ComponentVariant, ThemeProvider, ThemeProviderNoSSR, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useThemeServer } from './themes/index.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as TogglePrimitive from '@radix-ui/react-toggle';

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { ThemeColor } from './themes/index.js';
-export { ClientThemeProvider, ClientThemeToggle, ComponentVariant, ThemeContextProvider, ThemeProvider, ThemeProviderNoSSR, ThemeToggle, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useTheme, useThemeServer } from './themes/index.js';
+export { ClientThemeProvider, ClientThemeToggle, ComponentVariant, ThemeProvider, ThemeProviderNoSSR, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useThemeServer } from './themes/index.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as TogglePrimitive from '@radix-ui/react-toggle';

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var React2 = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-var iconsReact = require('@tabler/icons-react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var iconsReact = require('@tabler/icons-react');
 var TogglePrimitive = require('@radix-ui/react-toggle');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var SliderPrimitive = require('@radix-ui/react-slider');
@@ -47,15 +47,7 @@ var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 
-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 tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -71,218 +63,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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-}
-function useTheme() {
-  const [themeData, setThemeData] = React2__namespace.useState({
-    theme: "system",
-    setTheme: (theme) => {
-    },
-    resolvedTheme: "light",
-    isDark: false
-  });
-  const [mounted, setMounted] = React2__namespace.useState(false);
-  React2__namespace.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__ */ 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 /* @__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");
-  };
-  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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: iconSize[size], stroke: 1.5 }) : /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconMoon, { size: iconSize[size], stroke: 1.5 })
-      }
-    );
-  }
-  if (variant === "button") {
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconSun, { size: iconSize[size], stroke: 1.5, className: "mr-2" }),
-        "Light"
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(iconsReact.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 = classVarianceAuthority.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",
   {
@@ -387,9 +167,6 @@ var Button = React2__namespace.forwardRef(
   }
 );
 Button.displayName = "Button";
-
-// src/components/ui/dropdown-menu/dropdown-menu.tsx
-init_utils();
 var DropdownMenuRoot = DropdownMenuPrimitive__namespace.Root;
 var DropdownMenuTrigger = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive__namespace.Trigger,
@@ -571,9 +348,6 @@ var DropdownMenu = {
   SubContent: DropdownMenuSubContent,
   SubTrigger: DropdownMenuSubTrigger
 };
-
-// src/components/typography/heading/heading.tsx
-init_utils();
 var Heading = React2__namespace.forwardRef(
   ({
     level = 1,
@@ -642,9 +416,6 @@ var Heading = React2__namespace.forwardRef(
   }
 );
 Heading.displayName = "Heading";
-
-// src/components/typography/text/text.tsx
-init_utils();
 var Text = React2__namespace.forwardRef(
   ({
     size = "md",
@@ -697,9 +468,6 @@ var Text = React2__namespace.forwardRef(
   }
 );
 Text.displayName = "Text";
-
-// src/components/ui/toggle.tsx
-init_utils();
 var Toggle = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TogglePrimitive__namespace.Root,
   {
@@ -712,9 +480,6 @@ var Toggle = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 Toggle.displayName = TogglePrimitive__namespace.Root.displayName;
-
-// src/components/ui/toggle-group.tsx
-init_utils();
 var ToggleGroup = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ToggleGroupPrimitive__namespace.Root,
   {
@@ -737,9 +502,6 @@ var ToggleGroupItem = React2__namespace.forwardRef(({ className, ...props }, ref
   }
 ));
 ToggleGroupItem.displayName = ToggleGroupPrimitive__namespace.Item.displayName;
-
-// src/components/ui/slider.tsx
-init_utils();
 var Slider = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SliderPrimitive__namespace.Root,
   {
@@ -756,9 +518,6 @@ var Slider = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 Slider.displayName = SliderPrimitive__namespace.Root.displayName;
-
-// src/components/ui/popover.tsx
-init_utils();
 var Popover = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
 var PopoverAnchor = PopoverPrimitive__namespace.Anchor;
@@ -776,9 +535,6 @@ var PopoverContent = React2__namespace.forwardRef(({ className, align = "center"
   }
 ) }));
 PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
-
-// src/components/ui/hover-card.tsx
-init_utils();
 var HoverCard = HoverCardPrimitive__namespace.Root;
 var HoverCardTrigger = HoverCardPrimitive__namespace.Trigger;
 var HoverCardContent = React2__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -795,9 +551,6 @@ var HoverCardContent = React2__namespace.forwardRef(({ className, align = "cente
   }
 ));
 HoverCardContent.displayName = HoverCardPrimitive__namespace.Content.displayName;
-
-// src/components/ui/sheet.tsx
-init_utils();
 var Sheet = SheetPrimitive__namespace.Root;
 var SheetTrigger = SheetPrimitive__namespace.Trigger;
 var SheetClose = SheetPrimitive__namespace.Close;
@@ -891,12 +644,6 @@ var SheetDescription = React2__namespace.forwardRef(({ className, ...props }, re
   }
 ));
 SheetDescription.displayName = SheetPrimitive__namespace.Description.displayName;
-
-// src/components/ui/command.tsx
-init_utils();
-
-// src/components/ui/dialog.tsx
-init_utils();
 var Dialog = SheetPrimitive__namespace.Root;
 var DialogTrigger = SheetPrimitive__namespace.Trigger;
 var DialogPortal = SheetPrimitive__namespace.Portal;
@@ -1084,9 +831,6 @@ CommandShortcut.displayName = "CommandShortcut";
 var Collapsible = CollapsiblePrimitive__namespace.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive__namespace.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive__namespace.CollapsibleContent;
-
-// src/components/ui/context-menu.tsx
-init_utils();
 var ContextMenu = ContextMenuPrimitive__namespace.Root;
 var ContextMenuTrigger = ContextMenuPrimitive__namespace.Trigger;
 var ContextMenuGroup = ContextMenuPrimitive__namespace.Group;
@@ -1506,9 +1250,6 @@ var EmailFooter = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { styl
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: "SoHo, New York" })
   ] })
 ] }) });
-
-// src/components/ui/card.tsx
-init_utils();
 var Card = React2__namespace.forwardRef(
   ({ className, variant = "default", ...props }, ref) => {
     const variantClasses = {
@@ -1591,9 +1332,6 @@ var CardFooter = React2__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 CardFooter.displayName = "CardFooter";
-
-// src/components/ui/input.tsx
-init_utils();
 var Input = React2__namespace.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1616,9 +1354,6 @@ var Input = React2__namespace.forwardRef(
 );
 Input.displayName = "Input";
 
-// src/index.ts
-init_utils();
-
 // src/tokens/colors.ts
 var colors = {
   // Base colors
@@ -1930,10 +1665,6 @@ function ThemeProviderNoSSR({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { ...props, children });
 }
-
-// src/themes/index.ts
-init_theme_context();
-init_theme_toggle2();
 function ClientThemeProvider({
   children,
   ...props
@@ -1949,14 +1680,25 @@ function ClientThemeProvider({
 }
 function ClientThemeToggle(props) {
   const [mounted, setMounted] = React2__namespace.useState(false);
-  const [ThemeToggleComponent, setThemeToggleComponent] = React2__namespace.useState(void 0);
+  const [isDark, setIsDark] = React2__namespace.useState(false);
   React2__namespace.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__ */ jsxRuntime.jsx(
       "button",
       {
@@ -1991,7 +1733,62 @@ function ClientThemeToggle(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeToggleComponent, { ...props });
+  return /* @__PURE__ */ jsxRuntime.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__ */ 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" })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsxRuntime.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
@@ -2128,10 +1925,8 @@ exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
 exports.Slider = Slider;
 exports.Text = Text;
-exports.ThemeContextProvider = ThemeContextProvider;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeProviderNoSSR = ThemeProviderNoSSR;
-exports.ThemeToggle = ThemeToggle;
 exports.Toggle = Toggle;
 exports.ToggleGroup = ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem;
@@ -2150,7 +1945,6 @@ exports.shadows = shadows;
 exports.spacing = spacing;
 exports.tokens = tokens;
 exports.typography = typography;
-exports.useTheme = useTheme;
 exports.useThemeServer = useThemeServer;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map