@tydavidson/design-system 1.1.8 → 1.1.9

package/dist/index.mjs

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React2 from 'react';
-import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1 } from 'next-themes';
 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';
@@ -57,11 +56,19 @@ function ThemeProvider({
   children,
   ...props
 }) {
-  if (typeof window === "undefined") {
+  const [NextThemesProvider, setNextThemesProvider] = React2.useState(null);
+  const [mounted, setMounted] = React2.useState(false);
+  React2.useEffect(() => {
+    import('next-themes').then(({ ThemeProvider: Provider }) => {
+      setNextThemesProvider(() => Provider);
+      setMounted(true);
+    });
+  }, []);
+  if (!mounted || !NextThemesProvider) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
   return /* @__PURE__ */ jsx(
-    ThemeProvider$1,
+    NextThemesProvider,
     {
       attribute: "class",
       defaultTheme: "system",
@@ -153,28 +160,42 @@ var init_theme_utils = __esm({
   }
 });
 function useTheme() {
-  if (typeof window === "undefined") {
+  const [themeData, setThemeData] = React2.useState({
+    theme: "system",
+    setTheme: (theme) => {
+    },
+    resolvedTheme: "light",
+    isDark: false
+  });
+  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);
+      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 } = useTheme$1();
-  const isDark = 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