hazo_ui 4.7.0 → 4.8.0

package/dist/index.cjs

@@ -11391,6 +11391,67 @@ function EntryRow({ entry, on_select, onDelete }) {
     }
   );
 }
+var ThemeContext = React26__namespace.createContext(void 0);
+function HazoThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "theme"
+}) {
+  const [theme, setTheme] = useLocalStorage(storageKey, defaultTheme);
+  const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+  const resolvedTheme = theme === "system" ? prefersDark ? "dark" : "light" : theme;
+  React26__namespace.useEffect(() => {
+    document.documentElement.classList.toggle("dark", resolvedTheme === "dark");
+  }, [resolvedTheme]);
+  const toggleTheme = React26__namespace.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  }, [resolvedTheme, setTheme]);
+  const value = React26__namespace.useMemo(
+    () => ({ theme, setTheme, resolvedTheme, toggleTheme }),
+    [theme, setTheme, resolvedTheme, toggleTheme]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = React26__namespace.useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a <HazoThemeProvider>");
+  }
+  return context;
+}
+function ThemeScript({ storageKey = "theme" }) {
+  const script = `(function(){try{var k=${JSON.stringify(
+    storageKey
+  )};var raw=localStorage.getItem(k);var t="system";if(raw){try{t=JSON.parse(raw);}catch(e){t=String(raw).replace(/^"|"$/g,"");}}var m=window.matchMedia("(prefers-color-scheme: dark)").matches;var isDark=t==="dark"||((t==="system"||!t)&&m);var c=document.documentElement.classList;if(isDark){c.add("dark");}else{c.remove("dark");}}catch(e){}})();`;
+  return /* @__PURE__ */ jsxRuntime.jsx("script", { dangerouslySetInnerHTML: { __html: script } });
+}
+var ThemeToggle = React26__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { resolvedTheme, toggleTheme } = useTheme();
+    const [mounted, setMounted] = React26__namespace.useState(false);
+    React26__namespace.useEffect(() => {
+      setMounted(true);
+    }, []);
+    const isDark = mounted && resolvedTheme === "dark";
+    const label = isDark ? "Switch to light theme" : "Switch to dark theme";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        ref,
+        onClick: toggleTheme,
+        "aria-label": label,
+        className: cn(
+          "inline-flex h-9 w-9 items-center justify-center rounded-full text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ...props,
+        children: isDark ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-4 w-4" })
+      }
+    );
+  }
+);
+ThemeToggle.displayName = "ThemeToggle";
 
 Object.defineProperty(exports, "rawToast", {
   enumerable: true,
@@ -11464,6 +11525,7 @@ exports.ErrorBanner = ErrorBanner;
 exports.ErrorPage = ErrorPage;
 exports.FunnelChart = FunnelChart;
 exports.HazoContextProvider = HazoContextProvider;
+exports.HazoThemeProvider = HazoThemeProvider;
 exports.HazoUiConfirmDialog = HazoUiConfirmDialog;
 exports.HazoUiDialog = HazoUiDialog;
 exports.HazoUiDialogClose = DialogClose;
@@ -11553,6 +11615,8 @@ exports.TabsContent = TabsContent;
 exports.TabsList = TabsList;
 exports.TabsTrigger = TabsTrigger;
 exports.Textarea = Textarea;
+exports.ThemeScript = ThemeScript;
+exports.ThemeToggle = ThemeToggle;
 exports.Toggle = Toggle;
 exports.ToggleGroup = ToggleGroup;
 exports.ToggleGroupItem = ToggleGroupItem;
@@ -11594,6 +11658,7 @@ exports.useLoadingState = useLoadingState;
 exports.useLocalStorage = useLocalStorage;
 exports.useMediaQuery = useMediaQuery;
 exports.useSessionStorage = useSessionStorage;
+exports.useTheme = useTheme;
 exports.useViewport = useViewport;
 exports.useWakeLock = useWakeLock;
 exports.use_fullscreen = use_fullscreen;