@nayhoo/ui 0.9.2 → 0.9.4

package/dist/providers/index.d.mts

@@ -3,25 +3,27 @@ import * as react from 'react';
 import react__default from 'react';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 
-type ThemeMode = "light" | "dark";
+type theme = "light" | "dark" | "system";
 
-declare const ThemeContext: react__default.Context<ThemeMode>;
+type ThemeContextProps = {
+    theme: theme;
+    setTheme: react__default.Dispatch<react__default.SetStateAction<theme>>;
+    themes: theme[];
+};
+declare const ThemeContext: react__default.Context<ThemeContextProps>;
 type ThemeProviderProps = {
     children: react__default.ReactNode;
-    themeMode?: ThemeMode;
+    defaultTheme?: theme;
 };
-/**
- * This component applies the theme css. It should preferably be used at the root of your component tree.
- */
-declare const ThemeProvider: ({ children, themeMode, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ThemeProvider: ({ children }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
 type AddToastPayload = Omit<Toast, "status">;
-type ToasterContextProps = ((payload: AddToastPayload) => void) & {
+type ToastProviderContextProps = ((payload: AddToastPayload) => void) & {
     error: (payload: AddToastPayload) => void;
     success: (payload: AddToastPayload) => void;
 };
-declare const ToasterContext: react.Context<ToasterContextProps>;
-declare const Toaster: ({ children, ...props }: ToastPrimitives.ToastProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ToastProviderContext: react.Context<ToastProviderContextProps>;
+declare const ToastProvider: ({ children, ...props }: ToastPrimitives.ToastProviderProps) => react_jsx_runtime.JSX.Element;
 type Toast = {
     title?: string;
     description?: string;
@@ -33,4 +35,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, Toaster, ToasterContext };
+export { ThemeContext, ThemeProvider, ToastAction, ToastProvider, ToastProviderContext };

package/dist/providers/index.d.ts

@@ -3,25 +3,27 @@ import * as react from 'react';
 import react__default from 'react';
 import * as ToastPrimitives from '@radix-ui/react-toast';
 
-type ThemeMode = "light" | "dark";
+type theme = "light" | "dark" | "system";
 
-declare const ThemeContext: react__default.Context<ThemeMode>;
+type ThemeContextProps = {
+    theme: theme;
+    setTheme: react__default.Dispatch<react__default.SetStateAction<theme>>;
+    themes: theme[];
+};
+declare const ThemeContext: react__default.Context<ThemeContextProps>;
 type ThemeProviderProps = {
     children: react__default.ReactNode;
-    themeMode?: ThemeMode;
+    defaultTheme?: theme;
 };
-/**
- * This component applies the theme css. It should preferably be used at the root of your component tree.
- */
-declare const ThemeProvider: ({ children, themeMode, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ThemeProvider: ({ children }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
 type AddToastPayload = Omit<Toast, "status">;
-type ToasterContextProps = ((payload: AddToastPayload) => void) & {
+type ToastProviderContextProps = ((payload: AddToastPayload) => void) & {
     error: (payload: AddToastPayload) => void;
     success: (payload: AddToastPayload) => void;
 };
-declare const ToasterContext: react.Context<ToasterContextProps>;
-declare const Toaster: ({ children, ...props }: ToastPrimitives.ToastProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ToastProviderContext: react.Context<ToastProviderContextProps>;
+declare const ToastProvider: ({ children, ...props }: ToastPrimitives.ToastProviderProps) => react_jsx_runtime.JSX.Element;
 type Toast = {
     title?: string;
     description?: string;
@@ -33,4 +35,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, Toaster, ToasterContext };
+export { ThemeContext, ThemeProvider, ToastAction, ToastProvider, ToastProviderContext };

package/dist/providers/index.js

@@ -33,27 +33,11 @@ __export(providers_exports, {
   ThemeContext: () => ThemeContext,
   ThemeProvider: () => ThemeProvider,
   ToastAction: () => ToastAction,
-  Toaster: () => Toaster,
-  ToasterContext: () => ToasterContext
+  ToastProvider: () => ToastProvider,
+  ToastProviderContext: () => ToastProviderContext
 });
 module.exports = __toCommonJS(providers_exports);
 
-// src/hooks/use-body-class-toggle.ts
-var import_react = require("react");
-var useBodyClassToggle = (className, condition) => {
-  (0, import_react.useEffect)(() => {
-    const { body } = document;
-    if (condition) {
-      body.classList.add(className);
-    } else {
-      body.classList.remove(className);
-    }
-    return () => {
-      body.classList.remove(className);
-    };
-  }, [className, condition]);
-};
-
 // src/theme/themes/dark-theme.css.ts
 var darkTheme = "dark-theme__1mh7hnp0";
 
@@ -61,17 +45,69 @@ var darkTheme = "dark-theme__1mh7hnp0";
 var lightTheme = "light-theme__6in2mz0";
 
 // src/providers/theme-provider.tsx
-var import_react2 = require("react");
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var defaultThemeMode = "light";
-var ThemeContext = (0, import_react2.createContext)(defaultThemeMode);
-var ThemeProvider = ({
-  children,
-  themeMode = defaultThemeMode
-}) => {
-  useBodyClassToggle(lightTheme, themeMode === "light");
-  useBodyClassToggle(darkTheme, themeMode === "dark");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext, { value: themeMode, children });
+var themes = ["light", "dark", "system"];
+var storageKey = "nayhoo-theme";
+var ThemeContext = (0, import_react.createContext)({
+  theme: "system",
+  setTheme: () => {
+  },
+  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);
+    }
+  };
+  (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}");
+          }
+        ` }),
+    children
+  ] });
+};
+var getTheme = () => {
+  var _a;
+  if (typeof window === "undefined") {
+    return defaultTheme;
+  }
+  let theme;
+  try {
+    theme = localStorage.getItem(storageKey) || void 0;
+  } catch {
+  }
+  return (_a = themes.find((t) => t === theme)) != null ? _a : defaultTheme;
 };
 
 // src/theme/recipes/spinner.css.ts
@@ -105,7 +141,7 @@ var Spinner = ({ asChild, ...props }) => {
 
 // src/theme/recipes/button.css.ts
 var import_createRuntimeFn2 = require("@vanilla-extract/recipes/createRuntimeFn");
-var buttonRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "button_buttonRecipe__hi3ya00", variantClassNames: { fullWidth: { true: "button_buttonRecipe_fullWidth_true__hi3ya01" }, loading: { true: "button_buttonRecipe_loading_true__hi3ya02" }, size: { "1": "button_buttonRecipe_size_1__hi3ya03", "2": "button_buttonRecipe_size_2__hi3ya04", "3": "button_buttonRecipe_size_3__hi3ya05" }, shape: { square: "button_buttonRecipe_shape_square__hi3ya06", pill: "button_buttonRecipe_shape_pill__hi3ya07" }, variant: { primary: "button_buttonRecipe_variant_primary__hi3ya08", secondary: "button_buttonRecipe_variant_secondary__hi3ya09", outline: "button_buttonRecipe_variant_outline__hi3ya0a", ghost: "button_buttonRecipe_variant_ghost__hi3ya0b", error: "button_buttonRecipe_variant_error__hi3ya0c", success: "button_buttonRecipe_variant_success__hi3ya0d" } }, defaultVariants: { size: "2", variant: "primary" }, compoundVariants: [] });
+var buttonRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "button_buttonRecipe__hi3ya00", variantClassNames: { fullWidth: { true: "button_buttonRecipe_fullWidth_true__hi3ya01" }, loading: { true: "button_buttonRecipe_loading_true__hi3ya02" }, size: { "1": "button_buttonRecipe_size_1__hi3ya03", "2": "button_buttonRecipe_size_2__hi3ya04", "3": "button_buttonRecipe_size_3__hi3ya05" }, variant: { primary: "button_buttonRecipe_variant_primary__hi3ya06", secondary: "button_buttonRecipe_variant_secondary__hi3ya07", outline: "button_buttonRecipe_variant_outline__hi3ya08", ghost: "button_buttonRecipe_variant_ghost__hi3ya09", error: "button_buttonRecipe_variant_error__hi3ya0a", success: "button_buttonRecipe_variant_success__hi3ya0b" }, round: { true: "button_buttonRecipe_round_true__hi3ya0c" } }, defaultVariants: { size: "2", variant: "primary" }, compoundVariants: [] });
 
 // src/components/button.tsx
 var import_react_slot2 = require("@radix-ui/react-slot");
@@ -167,7 +203,7 @@ var Heading = ({
 
 // src/theme/recipes/icon-button.css.ts
 var import_createRuntimeFn4 = require("@vanilla-extract/recipes/createRuntimeFn");
-var iconButtonRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "icon-button_iconButtonRecipe__v93z8s0", variantClassNames: { loading: { true: "icon-button_iconButtonRecipe_loading_true__v93z8s1" }, size: { "1": "icon-button_iconButtonRecipe_size_1__v93z8s2", "2": "icon-button_iconButtonRecipe_size_2__v93z8s3", "3": "icon-button_iconButtonRecipe_size_3__v93z8s4", "4": "icon-button_iconButtonRecipe_size_4__v93z8s5" }, variant: { ghost: "icon-button_iconButtonRecipe_variant_ghost__v93z8s6", outline: "icon-button_iconButtonRecipe_variant_outline__v93z8s7" } }, defaultVariants: { size: "1", variant: "ghost" }, compoundVariants: [] });
+var iconButtonRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "icon-button_iconButtonRecipe__v93z8s0", variantClassNames: { loading: { true: "icon-button_iconButtonRecipe_loading_true__v93z8s1" }, size: { "1": "icon-button_iconButtonRecipe_size_1__v93z8s2", "2": "icon-button_iconButtonRecipe_size_2__v93z8s3", "3": "icon-button_iconButtonRecipe_size_3__v93z8s4", "4": "icon-button_iconButtonRecipe_size_4__v93z8s5" }, variant: { ghost: "icon-button_iconButtonRecipe_variant_ghost__v93z8s6", outline: "icon-button_iconButtonRecipe_variant_outline__v93z8s7" }, round: { true: "icon-button_iconButtonRecipe_round_true__v93z8s8" } }, defaultVariants: { size: "1", variant: "ghost" }, compoundVariants: [] });
 
 // src/components/icon-button.tsx
 var import_react_slot4 = require("@radix-ui/react-slot");
@@ -210,19 +246,19 @@ var toastInner = "toaster_toastInner__3jyebm5";
 var toastRoot = "toaster_toastRoot__3jyebm4";
 var toastViewport = "toaster_toastViewport__3jyebm3";
 
-// src/providers/toaster.tsx
+// src/providers/toast-provider.tsx
 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 defaultToaster = Object.assign(() => {
+var defaultToast = Object.assign(() => {
 }, {
   success: () => {
   },
   error: () => {
   }
 });
-var ToasterContext = React2.createContext(defaultToaster);
+var ToastProviderContext = React2.createContext(defaultToast);
 var toastElementsMapRef = React2.createRef();
 var defaultToastImpl = {
   toastElementsMapRef,
@@ -231,7 +267,7 @@ var defaultToastImpl = {
 };
 var ToastContextImpl = React2.createContext(defaultToastImpl);
 var ANIMATION_OUT_DURATION = 350;
-var Toaster = ({
+var ToastProvider = ({
   children,
   ...props
 }) => {
@@ -320,7 +356,7 @@ var Toaster = ({
     }),
     [handleDispatchDefault, handleDispatchSuccess, handleDispatchError]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToasterContext.Provider, { value: toastApi, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ToastProviderContext.Provider, { value: toastApi, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     ToastContextImpl.Provider,
     {
       value: React2.useMemo(
@@ -434,7 +470,7 @@ var ToastAction = ({
   ThemeContext,
   ThemeProvider,
   ToastAction,
-  Toaster,
-  ToasterContext
+  ToastProvider,
+  ToastProviderContext
 });
 //# sourceMappingURL=index.js.map