@tydavidson/design-system 1.1.8 → 1.1.10

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 { ComponentVariant, DynamicThemeProvider, DynamicThemeProviderNoSSR, DynamicThemeToggle, SafeThemeProvider, ThemeContextProvider, ThemeProvider, ThemeProviderNoSSR, ThemeToggle, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useTheme, useThemeServer } from './themes/index.mjs';
+export { ClientThemeProvider, ClientThemeToggle, ComponentVariant, ThemeContextProvider, ThemeProvider, ThemeProviderNoSSR, ThemeToggle, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useTheme, 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 { ComponentVariant, DynamicThemeProvider, DynamicThemeProviderNoSSR, DynamicThemeToggle, SafeThemeProvider, ThemeContextProvider, ThemeProvider, ThemeProviderNoSSR, ThemeToggle, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useTheme, useThemeServer } from './themes/index.js';
+export { ClientThemeProvider, ClientThemeToggle, ComponentVariant, ThemeContextProvider, ThemeProvider, ThemeProviderNoSSR, ThemeToggle, getColorVariantClasses, isDarkTheme, mapColorToShadcnVariant, mapVariantToShadcnVariant, useTheme, 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

@@ -3,7 +3,6 @@
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var React2 = require('react');
-var nextThemes = require('next-themes');
 var jsxRuntime = require('react/jsx-runtime');
 var iconsReact = require('@tabler/icons-react');
 var reactSlot = require('@radix-ui/react-slot');
@@ -18,9 +17,6 @@ var SheetPrimitive = require('@radix-ui/react-dialog');
 var cmdk = require('cmdk');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
-var dynamic = require('next/dynamic');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -50,10 +46,11 @@ var HoverCardPrimitive__namespace = /*#__PURE__*/_interopNamespace(HoverCardPrim
 var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
 var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespace(CollapsiblePrimitive);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
-var dynamic__default = /*#__PURE__*/_interopDefault(dynamic);
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
@@ -61,6 +58,15 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -81,50 +87,6 @@ var init_utils = __esm({
   }
 });
 
-// src/themes/theme-provider.tsx
-var theme_provider_exports = {};
-__export(theme_provider_exports, {
-  ThemeProvider: () => ThemeProvider,
-  ThemeProviderNoSSR: () => ThemeProviderNoSSR
-});
-function ThemeProvider({
-  children,
-  ...props
-}) {
-  if (typeof window === "undefined") {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    nextThemes.ThemeProvider,
-    {
-      attribute: "class",
-      defaultTheme: "system",
-      enableSystem: true,
-      disableTransitionOnChange: true,
-      ...props,
-      children
-    }
-  );
-}
-function ThemeProviderNoSSR({
-  children,
-  ...props
-}) {
-  const [mounted, setMounted] = React2__namespace.useState(false);
-  React2__namespace.useEffect(() => {
-    setMounted(true);
-  }, []);
-  if (!mounted) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { ...props, children });
-}
-var init_theme_provider = __esm({
-  "src/themes/theme-provider.tsx"() {
-    "use client";
-  }
-});
-
 // 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({
@@ -187,28 +149,42 @@ var init_theme_utils = __esm({
   }
 });
 function useTheme() {
-  if (typeof window === "undefined") {
+  const [themeData, setThemeData] = React2__namespace.useState({
+    theme: "system",
+    setTheme: (theme) => {
+    },
+    resolvedTheme: "light",
+    isDark: false
+  });
+  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);
+      setThemeData({
+        theme: theme || "system",
+        setTheme,
+        resolvedTheme: resolvedTheme || "light",
+        isDark
+      });
+      setMounted(true);
+    });
+  }, []);
+  if (!mounted) {
     return {
       theme: "system",
-      setTheme: () => {
+      setTheme: (theme) => {
       },
       resolvedTheme: "light",
       isDark: false
     };
   }
-  const { theme, setTheme, resolvedTheme, systemTheme } = nextThemes.useTheme();
-  const isDark = exports.isDarkTheme(theme, systemTheme);
-  return {
-    theme: theme || "system",
-    setTheme,
-    resolvedTheme: resolvedTheme || "light",
-    isDark
-  };
+  return themeData;
 }
 function useThemeServer() {
   return {
     theme: "system",
-    setTheme: () => {
+    setTheme: (theme) => {
     },
     resolvedTheme: "light",
     isDark: false
@@ -1801,47 +1777,81 @@ var tokens = {
   radius,
   shadows
 };
+function ThemeProvider({
+  children,
+  ...props
+}) {
+  const [NextThemesProvider, setNextThemesProvider] = React2__namespace.useState(null);
+  const [mounted, setMounted] = React2__namespace.useState(false);
+  React2__namespace.useEffect(() => {
+    import('next-themes').then(({ ThemeProvider: Provider }) => {
+      setNextThemesProvider(() => Provider);
+      setMounted(true);
+    });
+  }, []);
+  if (!mounted || !NextThemesProvider) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    NextThemesProvider,
+    {
+      attribute: "class",
+      defaultTheme: "system",
+      enableSystem: true,
+      disableTransitionOnChange: true,
+      ...props,
+      children
+    }
+  );
+}
+function ThemeProviderNoSSR({
+  children,
+  ...props
+}) {
+  const [mounted, setMounted] = React2__namespace.useState(false);
+  React2__namespace.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { ...props, children });
+}
 
 // src/themes/index.ts
-init_theme_provider();
 init_theme_context();
 init_theme_toggle2();
-var DynamicThemeProvider = dynamic__default.default(
-  () => Promise.resolve().then(() => (init_theme_provider(), theme_provider_exports)).then((mod) => ({ default: mod.ThemeProvider })),
-  {
-    ssr: false,
-    loading: () => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { visibility: "hidden" } })
-  }
-);
-var DynamicThemeProviderNoSSR = dynamic__default.default(
-  () => Promise.resolve().then(() => (init_theme_provider(), theme_provider_exports)).then((mod) => ({ default: mod.ThemeProviderNoSSR })),
-  {
-    ssr: false,
-    loading: () => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { visibility: "hidden" } })
-  }
-);
-var DynamicThemeToggle = dynamic__default.default(
-  () => Promise.resolve().then(() => (init_theme_toggle2(), theme_toggle_exports)).then((mod) => ({ default: mod.ThemeToggle })),
-  {
-    ssr: false,
-    loading: () => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { visibility: "hidden" } })
-  }
-);
-function SafeThemeProvider({
+function ClientThemeProvider({
   children,
-  noSSR = false,
   ...props
 }) {
-  if (noSSR) {
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicThemeProviderNoSSR, { ...props, children });
+  const [mounted, setMounted] = React2__namespace.useState(false);
+  React2__namespace.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { ...props, children });
+}
+function ClientThemeToggle(props) {
+  const [mounted, setMounted] = React2__namespace.useState(false);
+  React2__namespace.useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(DynamicThemeProvider, { ...props, children });
+  const { ThemeToggle: ThemeToggle2 } = (init_theme_toggle2(), __toCommonJS(theme_toggle_exports));
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle2, { ...props });
 }
 
 // src/themes/index.ts
 init_theme_utils();
 
 exports.Button = Button;
+exports.ClientThemeProvider = ClientThemeProvider;
+exports.ClientThemeToggle = ClientThemeToggle;
 exports.Collapsible = Collapsible;
 exports.CollapsibleContent = CollapsibleContent2;
 exports.CollapsibleTrigger = CollapsibleTrigger2;
@@ -1870,9 +1880,6 @@ exports.ContextMenuSubContent = ContextMenuSubContent;
 exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
 exports.ContextMenuTrigger = ContextMenuTrigger;
 exports.DropdownMenu = DropdownMenu;
-exports.DynamicThemeProvider = DynamicThemeProvider;
-exports.DynamicThemeProviderNoSSR = DynamicThemeProviderNoSSR;
-exports.DynamicThemeToggle = DynamicThemeToggle;
 exports.EmailButton = EmailButton;
 exports.EmailCaption = EmailCaption;
 exports.EmailContainer = EmailContainer;
@@ -1890,7 +1897,6 @@ exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
-exports.SafeThemeProvider = SafeThemeProvider;
 exports.Sheet = Sheet;
 exports.SheetClose = SheetClose;
 exports.SheetContent = SheetContent;