@nayhoo/ui 0.9.4 → 0.9.5

package/dist/providers/index.d.ts

@@ -3,26 +3,27 @@ import * as react from 'react';
 import react__default from 'react';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 
-type theme = "light" | "dark" | "system";
+type Theme = "light" | "dark" | "system";
 
+type ResolvedTheme = Exclude<Theme, "system">;
 type ThemeContextProps = {
-    theme: theme;
-    setTheme: react__default.Dispatch<react__default.SetStateAction<theme>>;
-    themes: theme[];
+    theme: Theme;
+    setTheme: react__default.Dispatch<react__default.SetStateAction<Theme>>;
+    resolvedTheme: ResolvedTheme;
+    themes: Theme[];
 };
 declare const ThemeContext: react__default.Context<ThemeContextProps>;
 type ThemeProviderProps = {
     children: react__default.ReactNode;
-    defaultTheme?: theme;
 };
 declare const ThemeProvider: ({ children }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
 type AddToastPayload = Omit<Toast, "status">;
-type ToastProviderContextProps = ((payload: AddToastPayload) => void) & {
+type ToastContextProps = ((payload: AddToastPayload) => void) & {
     error: (payload: AddToastPayload) => void;
     success: (payload: AddToastPayload) => void;
 };
-declare const ToastProviderContext: react.Context<ToastProviderContextProps>;
+declare const ToastContext: react.Context<ToastContextProps>;
 declare const ToastProvider: ({ children, ...props }: ToastPrimitives.ToastProviderProps) => react_jsx_runtime.JSX.Element;
 type Toast = {
     title?: string;
@@ -35,4 +36,4 @@ declare const Toast: (props: ToastPrimitives.ToastProps & {
 }) => react_jsx_runtime.JSX.Element;
 declare const ToastAction: ({ ...props }: Omit<ToastPrimitives.ToastActionProps, "asChild">) => react_jsx_runtime.JSX.Element;
 
-export { ThemeContext, ThemeProvider, ToastAction, ToastProvider, ToastProviderContext };
+export { ThemeContext, ThemeProvider, ToastAction, ToastContext, ToastProvider };

package/dist/providers/index.js

@@ -33,8 +33,8 @@ __export(providers_exports, {
   ThemeContext: () => ThemeContext,
   ThemeProvider: () => ThemeProvider,
   ToastAction: () => ToastAction,
-  ToastProvider: () => ToastProvider,
-  ToastProviderContext: () => ToastProviderContext
+  ToastContext: () => ToastContext,
+  ToastProvider: () => ToastProvider
 });
 module.exports = __toCommonJS(providers_exports);
 
@@ -46,68 +46,110 @@ var lightTheme = "light-theme__6in2mz0";
 
 // src/providers/theme-provider.tsx
 var import_react = require("react");
+
+// src/providers/script.ts
+var script = (storageKey2, defaultTheme2, classes2) => {
+  const el = document.documentElement;
+  function updateDOM(theme) {
+    el.classList.remove(...Object.values(classes2));
+    el.classList.add(classes2[theme]);
+  }
+  function getSystemTheme2() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  try {
+    const themeName = localStorage.getItem(storageKey2) || defaultTheme2;
+    const isSystem = themeName === "system";
+    const theme = isSystem ? getSystemTheme2() : themeName;
+    updateDOM(theme);
+  } catch (e) {
+  }
+};
+
+// src/providers/theme-provider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var themes = ["light", "dark", "system"];
+var MEDIA = "(prefers-color-scheme: dark)";
+var isServer = typeof window === "undefined";
 var storageKey = "nayhoo-theme";
+var themes = ["light", "dark", "system"];
+var defaultTheme = "system";
+var classes = {
+  light: lightTheme,
+  dark: darkTheme
+};
 var ThemeContext = (0, import_react.createContext)({
-  theme: "system",
+  theme: defaultTheme,
   setTheme: () => {
   },
+  resolvedTheme: "light",
   themes
 });
-var defaultTheme = "system";
 var ThemeProvider = ({ children }) => {
   const [theme, setTheme] = (0, import_react.useState)(() => getTheme());
-  const applyTheme = (theme2) => {
-    var _a, _b, _c, _d;
-    const isDark = theme2 === "dark";
-    const isSystem = theme2 === "system";
-    if (isDark || (isSystem || !(storageKey in localStorage)) && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      (_a = document.querySelector("html")) == null ? void 0 : _a.classList.add(darkTheme);
-      (_b = document.querySelector("html")) == null ? void 0 : _b.classList.remove(lightTheme);
-    } else {
-      (_c = document.querySelector("html")) == null ? void 0 : _c.classList.add(lightTheme);
-      (_d = document.querySelector("html")) == null ? void 0 : _d.classList.remove(darkTheme);
-    }
-  };
+  const [resolvedTheme, setResolvedTheme] = (0, import_react.useState)(
+    () => theme === "system" ? getSystemTheme() : theme
+  );
+  const applyTheme = (0, import_react.useCallback)((theme2) => {
+    const resolved = resolveTheme(theme2);
+    setResolvedTheme(resolved);
+    const d = document.documentElement;
+    d.classList.remove(...Object.values(classes));
+    d.classList.add(classes[resolved]);
+  }, []);
   (0, import_react.useEffect)(() => {
     applyTheme(theme);
     try {
       localStorage.setItem(storageKey, theme);
     } catch {
     }
-  }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ThemeContext, { value: { theme, setTheme, themes }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { children: `    
-          const isDark = localStorage.getItem("${storageKey}") === "dark";
-          const isSystem = localStorage.getItem("${storageKey}") === "system";
-
-          if (
-            isDark ||
-            ((isSystem || !("${storageKey}" in localStorage)) &&
-              window.matchMedia("(prefers-color-scheme: dark)").matches)
-          ) {
-            document.querySelector("html")?.classList.add("${darkTheme}");
-            document.querySelector("html")?.classList.remove("${lightTheme}");
-          } else {
-            document.querySelector("html")?.classList.add("${lightTheme}");
-            document.querySelector("html")?.classList.remove("${darkTheme}");
-          }
-        ` }),
+  }, [applyTheme, theme]);
+  const value = (0, import_react.useMemo)(
+    () => ({
+      theme,
+      setTheme,
+      resolvedTheme: theme === "system" ? resolvedTheme : theme,
+      themes
+    }),
+    [theme, setTheme, resolvedTheme]
+  );
+  const scriptArgs = JSON.stringify([storageKey, defaultTheme, classes]).slice(
+    1,
+    -1
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ThemeContext, { value, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "script",
+      {
+        suppressHydrationWarning: true,
+        dangerouslySetInnerHTML: {
+          __html: `(${script.toString()})(${scriptArgs})`
+        }
+      }
+    ),
     children
   ] });
 };
 var getTheme = () => {
-  var _a;
-  if (typeof window === "undefined") {
-    return defaultTheme;
-  }
-  let theme;
+  if (isServer) return defaultTheme;
+  let themeName;
   try {
-    theme = localStorage.getItem(storageKey) || void 0;
-  } catch {
+    themeName = localStorage.getItem(storageKey) || void 0;
+  } catch (e) {
+  }
+  return themes.find((theme) => theme === themeName) || defaultTheme;
+};
+var getSystemTheme = (e) => {
+  if (!e) e = window.matchMedia(MEDIA);
+  const isDark = e.matches;
+  const systemTheme = isDark ? "dark" : "light";
+  return systemTheme;
+};
+var resolveTheme = (theme) => {
+  let resolved = theme;
+  if (theme === "system") {
+    resolved = getSystemTheme();
   }
-  return (_a = themes.find((t) => t === theme)) != null ? _a : defaultTheme;
+  return resolved;
 };
 
 // src/theme/recipes/spinner.css.ts
@@ -115,8 +157,8 @@ var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn")
 var spinnerRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "spinner_spinnerRecipe__15xzcy90", variantClassNames: { size: { "1": "spinner_spinnerRecipe_size_1__15xzcy91", "2": "spinner_spinnerRecipe_size_2__15xzcy92", "3": "spinner_spinnerRecipe_size_3__15xzcy93", "4": "spinner_spinnerRecipe_size_4__15xzcy94", "5": "spinner_spinnerRecipe_size_5__15xzcy95", "6": "spinner_spinnerRecipe_size_6__15xzcy96", "7": "spinner_spinnerRecipe_size_7__15xzcy97", "8": "spinner_spinnerRecipe_size_8__15xzcy98", "9": "spinner_spinnerRecipe_size_9__15xzcy99" } }, defaultVariants: { size: "3" }, compoundVariants: [] });
 
 // src/utils/merge-classes.ts
-function mergeClasses(...classes) {
-  return classes.filter((cls) => Boolean(cls)).join(" ");
+function mergeClasses(...classes2) {
+  return classes2.filter((cls) => Boolean(cls)).join(" ");
 }
 
 // src/utils/pick.ts
@@ -258,7 +300,7 @@ var defaultToast = Object.assign(() => {
   error: () => {
   }
 });
-var ToastProviderContext = React2.createContext(defaultToast);
+var ToastContext = React2.createContext(defaultToast);
 var toastElementsMapRef = React2.createRef();
 var defaultToastImpl = {
   toastElementsMapRef,
@@ -356,7 +398,7 @@ var ToastProvider = ({
     }),
     [handleDispatchDefault, handleDispatchSuccess, handleDispatchError]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastProviderContext.Provider, { value: toastApi, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastContext.Provider, { value: toastApi, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     ToastContextImpl.Provider,
     {
       value: React2.useMemo(
@@ -470,7 +512,7 @@ var ToastAction = ({
   ThemeContext,
   ThemeProvider,
   ToastAction,
-  ToastProvider,
-  ToastProviderContext
+  ToastContext,
+  ToastProvider
 });
 //# sourceMappingURL=index.js.map