npm - hazo_ui - Versions diffs - 4.7.0 → 4.9.0 - Mend

hazo_ui 4.7.0 → 4.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGE_LOG.md CHANGED Viewed

@@ -5,6 +5,40 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+## v4.9.0 (2026-07-06)
+### New
+- **Theme Kit** — packaged, SSR-safe dark/light theme using the shadcn
+  `.dark`-class convention (toggles a `dark` class on `<html>`). New exports:
+  - `HazoThemeProvider` — context provider that keeps `<html class="dark">` in
+    sync with the resolved theme. Props `defaultTheme` (`"light" | "dark" |
+    "system"`, default `"system"`) and `storageKey` (default `"theme"`).
+    `window`/`document` are only touched inside `useEffect`, so no hydration
+    mismatch.
+  - `useTheme()` — `{ theme, setTheme, resolvedTheme, toggleTheme }`; throws
+    outside the provider.
+  - `ThemeToggle` — accessible Sun/Moon button; renders a stable icon until
+    mounted to avoid a first-render hydration mismatch.
+  - `ThemeScript` — inline no-flash script for the root `<head>`; sets the
+    `dark` class before first paint. Wrapped in try/catch so it can never
+    block rendering.
+  - Types: `Theme`, `ThemeProviderProps`, `ThemeContextValue`,
+    `ThemeScriptProps`, `ThemeToggleProps`.
+  ```tsx
+  // app/layout.tsx
+  import { HazoThemeProvider, ThemeScript } from 'hazo_ui';
+  <html lang="en" suppressHydrationWarning>
+    <head><ThemeScript storageKey="theme" /></head>
+    <body>
+      <HazoThemeProvider defaultTheme="system" storageKey="theme">
+        {children}
+      </HazoThemeProvider>
+    </body>
+  </html>
+  ```
 ## v4.7.0 (2026-07-01)
 ### New

package/README.md CHANGED Viewed

@@ -214,6 +214,8 @@ The following components support both global config and prop-level color overrid
 - **[Chart Primitives](#chart-primitives-v2170)** (v2.17.0) - Pure-SVG chart components for KPI cards and trend dashboards: `Sparkline`, `InverseSparkline`, `LineChart`, `MultiLineChart`, `StackedBars`, and `DateRangeSelector`. Zero third-party chart deps. Gap-aware paths, hover tooltips, and per-series endpoint markers built in.
+- **[Theme Kit](#theme-kit-v490)** (v4.9.0) - SSR-safe dark/light theme using the shadcn `.dark`-class convention: `HazoThemeProvider`, `useTheme`, `ThemeToggle`, and a no-flash `ThemeScript`. Persists the chosen mode to `localStorage` and resolves `"system"` against the OS preference.
 ### State Primitives (v2.10.0)
 Lightweight, opinionated components for the four ubiquitous async states: **loading**, **empty**, **error**, and **success**.
@@ -242,6 +244,47 @@ Lightweight, opinionated components for the four ubiquitous async states: **load
   import { Slider, InputAffix, HazoUiProgressBar, HazoUiEtaProgress, useEtaProgress } from 'hazo_ui';
   ```
+### Theme Kit (v4.9.0)
+SSR-safe dark/light theme using the shadcn `.dark`-class convention (toggles a `dark` class on `<html>`). No hydration mismatch: `window`/`document` are only touched inside `useEffect`, and an inline `ThemeScript` sets the class before first paint to avoid a flash.
+**Exports:** `HazoThemeProvider`, `useTheme`, `ThemeToggle`, `ThemeScript` and types `Theme`, `ThemeProviderProps`, `ThemeContextValue`, `ThemeScriptProps`, `ThemeToggleProps`.
+```tsx
+// app/layout.tsx
+import { HazoThemeProvider, ThemeScript } from 'hazo_ui';
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <ThemeScript storageKey="theme" />
+      </head>
+      <body>
+        <HazoThemeProvider defaultTheme="system" storageKey="theme">
+          {children}
+        </HazoThemeProvider>
+      </body>
+    </html>
+  );
+}
+```
+```tsx
+// anywhere under the provider
+import { ThemeToggle, useTheme } from 'hazo_ui';
+function Header() {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  return <ThemeToggle />; // Sun/Moon button that flips light/dark
+}
+```
+- `HazoThemeProvider` — context provider; keeps `<html class="dark">` in sync with the resolved theme. Props: `defaultTheme` (`"light" | "dark" | "system"`, default `"system"`), `storageKey` (default `"theme"`).
+- `useTheme()` — `{ theme, setTheme, resolvedTheme, toggleTheme }`. Throws if used outside the provider.
+- `ThemeToggle` — accessible Sun/Moon button; guards against a first-render hydration mismatch by rendering a stable icon until mounted.
+- `ThemeScript` — inline no-flash script; render in the root `<head>` before content, with a `storageKey` matching the provider.
 ### shadcn/ui Primitive Re-exports
 All shadcn/ui base components are re-exported from hazo_ui, so sibling hazo_* packages (and consumers) can import UI primitives from a single source without installing shadcn/ui separately:

package/dist/index.cjs CHANGED Viewed

@@ -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;