@tydavidson/design-system 1.1.8 → 1.1.9

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');
@@ -91,11 +90,19 @@ function ThemeProvider({
   children,
   ...props
 }) {
-  if (typeof window === "undefined") {
+  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(
-    nextThemes.ThemeProvider,
+    NextThemesProvider,
     {
       attribute: "class",
       defaultTheme: "system",
@@ -187,28 +194,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