hazo_ui 4.10.0 → 6.0.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 +79 -1
- package/README.md +8 -43
- package/dist/index.cjs +763 -467
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +46 -59
- package/dist/index.d.ts +46 -59
- package/dist/index.js +633 -356
- package/dist/index.js.map +1 -1
- package/package.json +3 -16
- package/dist/styles.css +0 -156
- package/tailwind.preset.d.ts +0 -8
- package/tailwind.preset.js +0 -91
package/CHANGE_LOG.md
CHANGED
|
@@ -5,7 +5,85 @@ 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
|
-
##
|
|
8
|
+
## v6.0.0 (2026-07-11)
|
|
9
|
+
|
|
10
|
+
Major — the P1 hazo_theme rehome. hazo_ui stops owning theme tokens, preset, and provider;
|
|
11
|
+
`hazo_theme` is now the single source and a **required** peer.
|
|
12
|
+
|
|
13
|
+
### Breaking
|
|
14
|
+
- **`useTheme()` return shape changed**: `{ theme, ... }` → `{ mode, setMode, themeSet, setThemeSet, ... }`.
|
|
15
|
+
Rename all `useTheme().theme` call sites to `.mode`.
|
|
16
|
+
- **Removed package exports** `hazo_ui/styles.css` and `hazo_ui/tailwind-preset`. Import
|
|
17
|
+
`hazo_theme/theme.css` (and use hazo_theme's tokens) instead.
|
|
18
|
+
- **`hazo_theme` peer flipped optional → required** (`^1.0.0`). Consumers must install hazo_theme.
|
|
19
|
+
- **Persisted-pref reset (one-time)**: theme `storageKey` default `"theme"` → `"hazo-theme"`, so a
|
|
20
|
+
user's saved mode resets to `system` once.
|
|
21
|
+
|
|
22
|
+
### Migration
|
|
23
|
+
- Replace `@import "hazo_ui/styles.css"` (and any `hazo_ui/tailwind-preset` usage) with
|
|
24
|
+
`@import "hazo_theme/theme.css"`; add `@source ".../hazo_theme/dist"` where you scan hazo_ui.
|
|
25
|
+
- `npm install hazo_theme@^1.0.0` alongside hazo_ui.
|
|
26
|
+
|
|
27
|
+
### New
|
|
28
|
+
- Chrome components sourced from hazo_theme's brand-identity contract: `AppFooter`, `AppHeader`,
|
|
29
|
+
`AppLogo`, and `HazoUiIconPicker`.
|
|
30
|
+
- `HazoThemeProvider` / `useTheme` / `ThemeScript` / `ThemeToggle` / `ThemeSetPicker` are now
|
|
31
|
+
re-exported from `hazo_theme/client`.
|
|
32
|
+
- `HazoUiDialog` header bar consumes hazo_theme's `--dialog-header-bar-*` tokens (no more hardcoded
|
|
33
|
+
colours).
|
|
34
|
+
|
|
35
|
+
## v5.1.0 (2026-07-10)
|
|
36
|
+
|
|
37
|
+
### New
|
|
38
|
+
- **`HazoUiKanban` card editor: `richtext` field type** — `editorFields` now
|
|
39
|
+
accepts `type: 'richtext'`, which renders the package's existing
|
|
40
|
+
`HazoUiRte` (`hazo_ui_rte`) in place of a plain text input. No new
|
|
41
|
+
dependency — TipTap was already required by this package. Binds to a
|
|
42
|
+
string HTML key on the item; `on_change` writes `RteOutput.html` back
|
|
43
|
+
into the draft. As with `select`/`checkbox`, `required` gating is not
|
|
44
|
+
honored for `richtext` (an "empty" RTE still emits `<p></p>`, not `""`).
|
|
45
|
+
Auto-detected fields are unaffected — `richtext` is opt-in via
|
|
46
|
+
`editorFields` only.
|
|
47
|
+
- **`HazoUiKanban`: double-click to open the card editor** — double-clicking
|
|
48
|
+
a card now opens the same editor as the pencil icon, gated by the same
|
|
49
|
+
`showEdit`/`onEditRequest` props (no new prop). PointerSensor's 5px drag
|
|
50
|
+
activation distance means this doesn't interfere with drag-and-drop.
|
|
51
|
+
|
|
52
|
+
## v5.0.0 (2026-07-09)
|
|
53
|
+
|
|
54
|
+
### BREAKING — theming rehomed onto hazo_theme
|
|
55
|
+
hazo_ui no longer owns theme tokens, a Tailwind preset, or its own theme
|
|
56
|
+
provider — `hazo_theme` is now the single source, and is a **required** peer
|
|
57
|
+
dependency (was optional).
|
|
58
|
+
|
|
59
|
+
- **Removed exports:** `./styles.css` and `./tailwind-preset` package exports
|
|
60
|
+
are gone (`dist/styles.css`, `tailwind.preset.js` no longer ship). Import
|
|
61
|
+
`hazo_theme/theme.css` (+ optionally a `hazo_theme/themes/<name>.css` brand
|
|
62
|
+
palette) in your app's globals instead of `hazo_ui/styles.css`.
|
|
63
|
+
- **`useTheme()` return shape changed:** `{ theme, setTheme, resolvedTheme,
|
|
64
|
+
toggleTheme }` → `{ mode, setMode, resolvedMode, toggleMode, themeSet,
|
|
65
|
+
setThemeSet }`. `HazoThemeProvider`'s `defaultTheme` prop is now
|
|
66
|
+
`defaultMode`; add `defaultThemeSet` to opt into a shipped brand palette.
|
|
67
|
+
`Theme`/`ThemeProviderProps`/`ThemeContextValue` types are removed — use
|
|
68
|
+
`ThemeMode`/`HazoThemeProviderProps`/`HazoThemeContextValue` from
|
|
69
|
+
`hazo_theme/client` (re-exported from the `hazo_ui` root).
|
|
70
|
+
- **New export:** `ThemeSetPicker`, re-exported from `hazo_theme/client`,
|
|
71
|
+
lets consumers switch between shipped theme-sets (`indigo-sunset`,
|
|
72
|
+
`ops-dark`, `soft-studio`, ...) at runtime.
|
|
73
|
+
- **Persisted-preference reset (one-time):** the localStorage key changed
|
|
74
|
+
from `"theme"` to `"hazo-theme"` (with `-mode`/`-set` suffixes), so a
|
|
75
|
+
user's saved theme choice resets to `"system"` once after upgrading.
|
|
76
|
+
- **hazo_ui's own kanban tokens deleted** (`--hazo-kanban-*` in
|
|
77
|
+
`src/styles/globals.css`) — now sourced from `hazo_theme`'s Tier-1 tokens
|
|
78
|
+
(`hazo_theme@^0.2.0`), same values, zero visual change, but consumers
|
|
79
|
+
MUST import `hazo_theme/theme.css` for kanban components to render with
|
|
80
|
+
the intended colors (previously baked into `hazo_ui`'s own CSS).
|
|
81
|
+
- **Migration:** bump to `hazo_theme@^0.2.0` (now required, not optional),
|
|
82
|
+
swap `hazo_ui/styles.css` → `hazo_theme/theme.css` in your globals, and
|
|
83
|
+
update any `useTheme()`/`HazoThemeProvider` call sites for the
|
|
84
|
+
`theme`→`mode` rename.
|
|
85
|
+
|
|
86
|
+
## Unreleased
|
|
9
87
|
|
|
10
88
|
### New
|
|
11
89
|
- **`Logo`, `AppHeader`, `AppFooter` chrome components** (framework-neutral,
|
package/README.md
CHANGED
|
@@ -216,8 +216,6 @@ The following components support both global config and prop-level color overrid
|
|
|
216
216
|
|
|
217
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
218
|
|
|
219
|
-
- **[Chrome Components](#chrome-components-v4100)** (v4.10.0) - `Logo`, `AppHeader`, and `AppFooter` — framework-neutral header/footer/logo pieces that consume hazo_theme's `BrandIdentity` contract and its `footer-public-*`/`footer-app-*` chrome tokens. Every admin-configurable `<a href>` inside them runs through the new `safeHref()` scheme allowlist.
|
|
220
|
-
|
|
221
219
|
### State Primitives (v2.10.0)
|
|
222
220
|
|
|
223
221
|
Lightweight, opinionated components for the four ubiquitous async states: **loading**, **empty**, **error**, and **success**.
|
|
@@ -252,46 +250,6 @@ SSR-safe dark/light theme using the shadcn `.dark`-class convention (toggles a `
|
|
|
252
250
|
|
|
253
251
|
**Exports:** `HazoThemeProvider`, `useTheme`, `ThemeToggle`, `ThemeScript` and types `Theme`, `ThemeProviderProps`, `ThemeContextValue`, `ThemeScriptProps`, `ThemeToggleProps`.
|
|
254
252
|
|
|
255
|
-
### Chrome Components (v4.10.0)
|
|
256
|
-
|
|
257
|
-
`Logo`, `AppHeader`, and `AppFooter` — framework-neutral chrome pieces that consume hazo_theme's
|
|
258
|
-
`BrandIdentity` (type-only import; `hazo_theme` stays an optional peer) plus its
|
|
259
|
-
`footer-public-*`/`footer-app-*` chrome tokens (import `hazo_theme/theme.css` for the tokens to
|
|
260
|
-
resolve).
|
|
261
|
-
|
|
262
|
-
```tsx
|
|
263
|
-
import { AppHeader, AppFooter } from 'hazo_ui';
|
|
264
|
-
import type { BrandIdentity } from 'hazo_theme';
|
|
265
|
-
|
|
266
|
-
const identity: BrandIdentity = {
|
|
267
|
-
logoUrl: '/brand/logo.svg',
|
|
268
|
-
appTitle: 'Acme',
|
|
269
|
-
footer: { app: { copyright: '© 2026 Acme Inc.' } },
|
|
270
|
-
};
|
|
271
|
-
|
|
272
|
-
function Shell({ children }: { children: React.ReactNode }) {
|
|
273
|
-
return (
|
|
274
|
-
<>
|
|
275
|
-
<AppHeader identity={identity} homeHref="/" actions={<UserMenu />} />
|
|
276
|
-
{children}
|
|
277
|
-
<AppFooter variant="app" identity={identity} />
|
|
278
|
-
</>
|
|
279
|
-
);
|
|
280
|
-
}
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
- `Logo({ logoUrl?, logoUrlDark?, appTitle?, href?, height?, className?, imgClassName? })` — logo
|
|
284
|
-
image (swaps light/dark variants via `dark:hidden`/`dark:block`) or text fallback.
|
|
285
|
-
- `AppHeader({ identity?, homeHref?, navItems?, actions?, className? })` — `bg-navbar` header bar.
|
|
286
|
-
- `AppFooter({ variant: 'public' | 'app', footer?, identity?, className? })` — `'app'` renders a
|
|
287
|
-
thin copyright/link strip (`bg-footer-app`); `'public'` renders a taller multi-column footer with
|
|
288
|
-
a brand row and social links (`bg-footer-public`).
|
|
289
|
-
- **`safeHref(url?: string): string | undefined`** — also exported standalone from the package
|
|
290
|
-
root. Allows `http://`, `https://`, `mailto:`, and same-origin `/path` hrefs; returns `undefined`
|
|
291
|
-
for anything else (`javascript:`, `data:`, protocol-relative `//host`, …). Used internally by
|
|
292
|
-
every chrome-component `<a href>` sink; reach for it directly when rendering admin-configurable
|
|
293
|
-
links elsewhere.
|
|
294
|
-
|
|
295
253
|
```tsx
|
|
296
254
|
// app/layout.tsx
|
|
297
255
|
import { HazoThemeProvider, ThemeScript } from 'hazo_ui';
|
|
@@ -3749,12 +3707,19 @@ on hover/focus). Clicking it opens a `HazoUiDialog` editor:
|
|
|
3749
3707
|
|
|
3750
3708
|
Field types: `text`, `textarea`, `select`, `number`, `checkbox`,
|
|
3751
3709
|
`priority` (a select pre-populated with `editorPriorities` —
|
|
3752
|
-
defaults to `["P0","P1","P2","P3"]`)
|
|
3710
|
+
defaults to `["P0","P1","P2","P3"]`), `status` (a select pre-populated
|
|
3711
|
+
from `columns`, bound to `columnKey`), and `richtext` (renders the
|
|
3712
|
+
package's `HazoUiRte` rich text editor — binds to a string HTML key;
|
|
3713
|
+
`required` gating is not honored for this type, same as `select`/
|
|
3714
|
+
`checkbox`).
|
|
3753
3715
|
|
|
3754
3716
|
If you don't pass `editorFields`, the library auto-detects all
|
|
3755
3717
|
string-valued fields on the item (except `id`, `columnKey`, `priority`)
|
|
3756
3718
|
and renders each as a text input with a humanized label.
|
|
3757
3719
|
|
|
3720
|
+
Besides the pencil icon, **double-clicking a card** also opens the
|
|
3721
|
+
editor — same `onCardSave`/`editorFields` config, no extra prop needed.
|
|
3722
|
+
|
|
3758
3723
|
#### Custom form via renderCardEditor
|
|
3759
3724
|
|
|
3760
3725
|
When the declarative config isn't enough, replace the dialog body
|