hazo_ui 4.8.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.
- package/CHANGE_LOG.md +34 -0
- package/README.md +43 -0
- package/package.json +3 -3
package/CHANGE_LOG.md
CHANGED
|
@@ -5,6 +5,40 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## v4.9.0 (2026-07-06)
|
|
9
|
+
|
|
10
|
+
### New
|
|
11
|
+
- **Theme Kit** — packaged, SSR-safe dark/light theme using the shadcn
|
|
12
|
+
`.dark`-class convention (toggles a `dark` class on `<html>`). New exports:
|
|
13
|
+
- `HazoThemeProvider` — context provider that keeps `<html class="dark">` in
|
|
14
|
+
sync with the resolved theme. Props `defaultTheme` (`"light" | "dark" |
|
|
15
|
+
"system"`, default `"system"`) and `storageKey` (default `"theme"`).
|
|
16
|
+
`window`/`document` are only touched inside `useEffect`, so no hydration
|
|
17
|
+
mismatch.
|
|
18
|
+
- `useTheme()` — `{ theme, setTheme, resolvedTheme, toggleTheme }`; throws
|
|
19
|
+
outside the provider.
|
|
20
|
+
- `ThemeToggle` — accessible Sun/Moon button; renders a stable icon until
|
|
21
|
+
mounted to avoid a first-render hydration mismatch.
|
|
22
|
+
- `ThemeScript` — inline no-flash script for the root `<head>`; sets the
|
|
23
|
+
`dark` class before first paint. Wrapped in try/catch so it can never
|
|
24
|
+
block rendering.
|
|
25
|
+
- Types: `Theme`, `ThemeProviderProps`, `ThemeContextValue`,
|
|
26
|
+
`ThemeScriptProps`, `ThemeToggleProps`.
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
// app/layout.tsx
|
|
30
|
+
import { HazoThemeProvider, ThemeScript } from 'hazo_ui';
|
|
31
|
+
|
|
32
|
+
<html lang="en" suppressHydrationWarning>
|
|
33
|
+
<head><ThemeScript storageKey="theme" /></head>
|
|
34
|
+
<body>
|
|
35
|
+
<HazoThemeProvider defaultTheme="system" storageKey="theme">
|
|
36
|
+
{children}
|
|
37
|
+
</HazoThemeProvider>
|
|
38
|
+
</body>
|
|
39
|
+
</html>
|
|
40
|
+
```
|
|
41
|
+
|
|
8
42
|
## v4.7.0 (2026-07-01)
|
|
9
43
|
|
|
10
44
|
### New
|
package/README.md
CHANGED
|
@@ -214,6 +214,8 @@ The following components support both global config and prop-level color overrid
|
|
|
214
214
|
|
|
215
215
|
- **[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.
|
|
216
216
|
|
|
217
|
+
- **[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.
|
|
218
|
+
|
|
217
219
|
### State Primitives (v2.10.0)
|
|
218
220
|
|
|
219
221
|
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
|
|
|
242
244
|
import { Slider, InputAffix, HazoUiProgressBar, HazoUiEtaProgress, useEtaProgress } from 'hazo_ui';
|
|
243
245
|
```
|
|
244
246
|
|
|
247
|
+
### Theme Kit (v4.9.0)
|
|
248
|
+
|
|
249
|
+
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.
|
|
250
|
+
|
|
251
|
+
**Exports:** `HazoThemeProvider`, `useTheme`, `ThemeToggle`, `ThemeScript` and types `Theme`, `ThemeProviderProps`, `ThemeContextValue`, `ThemeScriptProps`, `ThemeToggleProps`.
|
|
252
|
+
|
|
253
|
+
```tsx
|
|
254
|
+
// app/layout.tsx
|
|
255
|
+
import { HazoThemeProvider, ThemeScript } from 'hazo_ui';
|
|
256
|
+
|
|
257
|
+
export default function RootLayout({ children }) {
|
|
258
|
+
return (
|
|
259
|
+
<html lang="en" suppressHydrationWarning>
|
|
260
|
+
<head>
|
|
261
|
+
<ThemeScript storageKey="theme" />
|
|
262
|
+
</head>
|
|
263
|
+
<body>
|
|
264
|
+
<HazoThemeProvider defaultTheme="system" storageKey="theme">
|
|
265
|
+
{children}
|
|
266
|
+
</HazoThemeProvider>
|
|
267
|
+
</body>
|
|
268
|
+
</html>
|
|
269
|
+
);
|
|
270
|
+
}
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
```tsx
|
|
274
|
+
// anywhere under the provider
|
|
275
|
+
import { ThemeToggle, useTheme } from 'hazo_ui';
|
|
276
|
+
|
|
277
|
+
function Header() {
|
|
278
|
+
const { theme, resolvedTheme, setTheme } = useTheme();
|
|
279
|
+
return <ThemeToggle />; // Sun/Moon button that flips light/dark
|
|
280
|
+
}
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
- `HazoThemeProvider` — context provider; keeps `<html class="dark">` in sync with the resolved theme. Props: `defaultTheme` (`"light" | "dark" | "system"`, default `"system"`), `storageKey` (default `"theme"`).
|
|
284
|
+
- `useTheme()` — `{ theme, setTheme, resolvedTheme, toggleTheme }`. Throws if used outside the provider.
|
|
285
|
+
- `ThemeToggle` — accessible Sun/Moon button; guards against a first-render hydration mismatch by rendering a stable icon until mounted.
|
|
286
|
+
- `ThemeScript` — inline no-flash script; render in the root `<head>` before content, with a `storageKey` matching the provider.
|
|
287
|
+
|
|
245
288
|
### shadcn/ui Primitive Re-exports
|
|
246
289
|
|
|
247
290
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hazo_ui",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.9.0",
|
|
4
4
|
"description": "Set of UI components for common interaction elements in a SaaS app",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"react": "^18.0.0 || ^19.0.0",
|
|
53
53
|
"react-dom": "^18.0.0 || ^19.0.0",
|
|
54
|
-
"hazo_core": "^1.2.
|
|
55
|
-
"hazo_state": "^0.1.
|
|
54
|
+
"hazo_core": "^1.2.1",
|
|
55
|
+
"hazo_state": "^0.1.2"
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"@dnd-kit/core": "^6.1.0",
|