@nayhoo/ui 0.10.0 → 0.10.2

package/dist/providers/index.d.mts

@@ -1,29 +1,38 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default from 'react';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 
 type Theme = "light" | "dark" | "system";
 
-type ResolvedTheme = Exclude<Theme, "system">;
-type ThemeContextProps = {
-    theme: Theme;
-    setTheme: react__default.Dispatch<react__default.SetStateAction<Theme>>;
-    resolvedTheme: ResolvedTheme;
+type SystemTheme = Exclude<Theme, "system">;
+
+interface ScriptProps extends react.DetailedHTMLProps<react.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> {
+}
+interface UseThemeProps {
+    /** List of all available theme names */
     themes: Theme[];
-};
-declare const ThemeContext: react__default.Context<ThemeContextProps>;
-type ThemeProviderProps = {
-    children: react__default.ReactNode;
-};
-declare const ThemeProvider: ({ children }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
+    /** Update the theme */
+    setTheme: (value: Theme) => void;
+    /** Active theme name */
+    theme?: Theme | undefined;
+    /** If the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
+    resolvedTheme?: Theme | undefined;
+    /** Returns the System theme preference ("dark" or "light"), regardless what the active theme is */
+    systemTheme?: SystemTheme | undefined;
+}
+interface ThemeProviderProps extends react.PropsWithChildren {
+    /** Props to pass the inline script */
+    scriptProps?: ScriptProps;
+}
+declare const useTheme: () => UseThemeProps;
+declare const ThemeProvider: (props: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
 type AddToastPayload = Omit<Toast, "status">;
 type ToastContextProps = ((payload: AddToastPayload) => void) & {
     error: (payload: AddToastPayload) => void;
     success: (payload: AddToastPayload) => void;
 };
-declare const ToastContext: react.Context<ToastContextProps>;
+declare const useToast: () => ToastContextProps;
 declare const ToastProvider: ({ children, ...props }: ToastPrimitives.ToastProviderProps) => react_jsx_runtime.JSX.Element;
 type Toast = {
     title?: string;
@@ -36,4 +45,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, ToastContext, ToastProvider };
+export { ThemeProvider, type ThemeProviderProps, ToastAction, ToastProvider, type UseThemeProps, useTheme, useToast };

package/dist/providers/index.d.ts

@@ -1,29 +1,38 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default from 'react';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 
 type Theme = "light" | "dark" | "system";
 
-type ResolvedTheme = Exclude<Theme, "system">;
-type ThemeContextProps = {
-    theme: Theme;
-    setTheme: react__default.Dispatch<react__default.SetStateAction<Theme>>;
-    resolvedTheme: ResolvedTheme;
+type SystemTheme = Exclude<Theme, "system">;
+
+interface ScriptProps extends react.DetailedHTMLProps<react.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> {
+}
+interface UseThemeProps {
+    /** List of all available theme names */
     themes: Theme[];
-};
-declare const ThemeContext: react__default.Context<ThemeContextProps>;
-type ThemeProviderProps = {
-    children: react__default.ReactNode;
-};
-declare const ThemeProvider: ({ children }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
+    /** Update the theme */
+    setTheme: (value: Theme) => void;
+    /** Active theme name */
+    theme?: Theme | undefined;
+    /** If the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
+    resolvedTheme?: Theme | undefined;
+    /** Returns the System theme preference ("dark" or "light"), regardless what the active theme is */
+    systemTheme?: SystemTheme | undefined;
+}
+interface ThemeProviderProps extends react.PropsWithChildren {
+    /** Props to pass the inline script */
+    scriptProps?: ScriptProps;
+}
+declare const useTheme: () => UseThemeProps;
+declare const ThemeProvider: (props: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
 type AddToastPayload = Omit<Toast, "status">;
 type ToastContextProps = ((payload: AddToastPayload) => void) & {
     error: (payload: AddToastPayload) => void;
     success: (payload: AddToastPayload) => void;
 };
-declare const ToastContext: react.Context<ToastContextProps>;
+declare const useToast: () => ToastContextProps;
 declare const ToastProvider: ({ children, ...props }: ToastPrimitives.ToastProviderProps) => react_jsx_runtime.JSX.Element;
 type Toast = {
     title?: string;
@@ -36,4 +45,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, ToastContext, ToastProvider };
+export { ThemeProvider, type ThemeProviderProps, ToastAction, ToastProvider, type UseThemeProps, useTheme, useToast };

package/dist/providers/index.js

@@ -30,11 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/providers/index.ts
 var providers_exports = {};
 __export(providers_exports, {
-  ThemeContext: () => ThemeContext,
   ThemeProvider: () => ThemeProvider,
   ToastAction: () => ToastAction,
-  ToastContext: () => ToastContext,
-  ToastProvider: () => ToastProvider
+  ToastProvider: () => ToastProvider,
+  useTheme: () => useTheme,
+  useToast: () => useToast
 });
 module.exports = __toCommonJS(providers_exports);
 
@@ -45,98 +45,151 @@ var darkTheme = "dark-theme__1mh7hnp0";
 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 React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-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: defaultTheme,
+var defaultTheme = "system";
+var storageKey = "nayhoo-theme";
+var systemThemes = ["light", "dark"];
+var themes = [...systemThemes, "system"];
+var colorSchemes = ["light", "dark"];
+var MEDIA = "(prefers-color-scheme: dark)";
+var isServer = typeof window === "undefined";
+var ThemeContext = React.createContext(void 0);
+var defaultContext = {
   setTheme: () => {
   },
-  resolvedTheme: "light",
   themes
-});
-var ThemeProvider = ({ children }) => {
-  const [theme, setTheme] = (0, import_react.useState)(() => getTheme());
-  const [resolvedTheme, setResolvedTheme] = (0, import_react.useState)(
+};
+var saveToLS = (storageKey2, value) => {
+  try {
+    localStorage.setItem(storageKey2, value);
+  } catch (e) {
+  }
+};
+var useTheme = () => {
+  var _a;
+  return (_a = React.useContext(ThemeContext)) != null ? _a : defaultContext;
+};
+var ThemeProvider = (props) => {
+  const context = React.useContext(ThemeContext);
+  if (context) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, { ...props });
+};
+var Theme = ({ children, scriptProps }) => {
+  const [theme, setThemeState] = React.useState(() => getTheme());
+  const [resolvedTheme, setResolvedTheme] = React.useState(
     () => theme === "system" ? getSystemTheme() : theme
   );
-  const applyTheme = (0, import_react.useCallback)((theme2) => {
-    const resolved = resolveTheme(theme2);
-    setResolvedTheme(resolved);
+  const applyTheme = React.useCallback((theme2) => {
+    let resolved = theme2;
+    if (!resolved) return;
+    if (theme2 === "system") {
+      resolved = getSystemTheme();
+    }
     const d = document.documentElement;
-    d.classList.remove(...Object.values(classes));
-    d.classList.add(classes[resolved]);
+    const handleAttribute = () => {
+      d.classList.remove(...Object.values(classes));
+      if (resolved) d.classList.add(classes[resolved]);
+    };
+    handleAttribute();
+    const colorScheme = colorSchemes.some(
+      (colorScheme2) => colorScheme2 === resolved
+    ) ? resolved : null;
+    if (colorScheme) d.style.colorScheme = colorScheme;
   }, []);
-  (0, import_react.useEffect)(() => {
+  const setTheme = React.useCallback((value) => {
+    setThemeState(value);
+    saveToLS(storageKey, value);
+  }, []);
+  const handleMediaQuery = React.useCallback(
+    (e) => {
+      const resolved = getSystemTheme(e);
+      setResolvedTheme(resolved);
+      if (theme === "system") {
+        applyTheme("system");
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [theme]
+  );
+  React.useEffect(() => {
+    const media = window.matchMedia(MEDIA);
+    media.addListener(handleMediaQuery);
+    handleMediaQuery(media);
+    return () => media.removeListener(handleMediaQuery);
+  }, [handleMediaQuery]);
+  React.useEffect(() => {
+    const handleStorage = (e) => {
+      if (e.key !== storageKey) {
+        return;
+      }
+      if (!e.newValue || !isTheme(e.newValue)) {
+        setTheme(defaultTheme);
+      } else {
+        setThemeState(e.newValue);
+      }
+    };
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
+  }, [setTheme]);
+  React.useEffect(() => {
     applyTheme(theme);
-    try {
-      localStorage.setItem(storageKey, theme);
-    } catch {
-    }
-  }, [applyTheme, theme]);
-  const value = (0, import_react.useMemo)(
+  }, [theme]);
+  const providerValue = React.useMemo(
     () => ({
       theme,
       setTheme,
       resolvedTheme: theme === "system" ? resolvedTheme : theme,
-      themes
+      themes,
+      systemTheme: resolvedTheme
     }),
     [theme, setTheme, resolvedTheme]
   );
-  const scriptArgs = JSON.stringify([storageKey, defaultTheme, classes]).slice(
-    1,
-    -1
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ThemeContext, { value, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ThemeContext.Provider, { value: providerValue, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "script",
+      ThemeScript,
       {
-        suppressHydrationWarning: true,
-        dangerouslySetInnerHTML: {
-          __html: `(${script.toString()})(${scriptArgs})`
+        ...{
+          scriptProps
         }
       }
     ),
     children
   ] });
 };
+var ThemeScript = React.memo(
+  ({ scriptProps }) => {
+    const scriptArgs = JSON.stringify([
+      storageKey,
+      defaultTheme,
+      systemThemes,
+      classes
+    ]).slice(1, -1);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "script",
+      {
+        ...scriptProps,
+        suppressHydrationWarning: true,
+        dangerouslySetInnerHTML: {
+          __html: `(${script.toString()})(${scriptArgs})`
+        }
+      }
+    );
+  }
+);
+ThemeScript.displayName = "ThemeScript";
 var getTheme = () => {
-  if (isServer) return defaultTheme;
-  let themeName;
+  if (isServer) return void 0;
+  let theme;
   try {
-    themeName = localStorage.getItem(storageKey) || void 0;
+    theme = localStorage.getItem(storageKey) || void 0;
   } catch (e) {
   }
-  return themes.find((theme) => theme === themeName) || defaultTheme;
+  return theme !== void 0 && isTheme(theme) ? theme : defaultTheme;
 };
 var getSystemTheme = (e) => {
   if (!e) e = window.matchMedia(MEDIA);
@@ -144,12 +197,32 @@ var getSystemTheme = (e) => {
   const systemTheme = isDark ? "dark" : "light";
   return systemTheme;
 };
-var resolveTheme = (theme) => {
-  let resolved = theme;
-  if (theme === "system") {
-    resolved = getSystemTheme();
+var isTheme = (value) => themes.some((theme) => theme === value);
+var script = (storageKey2, defaultTheme2, systemThemes2, classes2) => {
+  const el = document.documentElement;
+  function updateDOM(theme) {
+    el.classList.remove(...Object.values(classes2));
+    el.classList.add(classes2[theme]);
+    setColorScheme(theme);
+  }
+  function setColorScheme(theme) {
+    if (systemThemes2.some((systemTheme) => systemTheme === theme)) {
+      el.style.colorScheme = theme;
+    }
+  }
+  function getSystemTheme2() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  function isSystemTheme(value) {
+    return systemThemes2.some((theme) => theme === value);
+  }
+  try {
+    const themeName = localStorage.getItem(storageKey2) || defaultTheme2;
+    const isSystem = themeName === "system";
+    const theme = isSystem || !isSystemTheme(themeName) ? getSystemTheme2() : themeName;
+    updateDOM(theme);
+  } catch (e) {
   }
-  return resolved;
 };
 
 // src/theme/recipes/spinner.css.ts
@@ -293,14 +366,21 @@ var import_react_icons = require("@radix-ui/react-icons");
 var ToastPrimitives = __toESM(require("@radix-ui/react-toast"));
 var React2 = __toESM(require("react"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var defaultToast = Object.assign(() => {
-}, {
-  success: () => {
+var defaultContext2 = Object.assign(
+  () => {
   },
-  error: () => {
+  {
+    success: () => {
+    },
+    error: () => {
+    }
   }
-});
-var ToastContext = React2.createContext(defaultToast);
+);
+var ToastContext = React2.createContext(defaultContext2);
+var useToast = () => {
+  var _a;
+  return (_a = React2.useContext(ToastContext)) != null ? _a : defaultContext2;
+};
 var toastElementsMapRef = React2.createRef();
 var defaultToastImpl = {
   toastElementsMapRef,
@@ -509,10 +589,10 @@ var ToastAction = ({
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ThemeContext,
   ThemeProvider,
   ToastAction,
-  ToastContext,
-  ToastProvider
+  ToastProvider,
+  useTheme,
+  useToast
 });
 //# sourceMappingURL=index.js.map