haze-ui 1.24.1 → 1.26.0

package/README.md

@@ -10,10 +10,19 @@ English | [简体中文](./README-zh_CN.md)
 ## Features
 
 - Integrated [react use control](https://github.com/wmzy/react-use-control) provides component internal states
+- Built for React 19+ (`ref` as a prop, `ControlOrValue<T>` state protocol) — no React 18 compatibility layer
 - Keep strict, provide lightweight, composable, and easily extendable components
 - Support themes customization
 - Support Tree-shaking
 
+## Why npm-distributed (not copy-paste)
+
+**Interaction states are formulas, not values.** Every hover/active/subtle/focus-ring color is a CSS relative-color expression — `oklch(from var(--haze-color-primary) calc(l - 0.045) c h)` — baked into `tokens.css`. Override `--haze-color-primary` on a theme class and the entire interaction-state family re-derives at runtime in the browser, no rebuild, no codegen. In a copy-paste setup every pasted file owns its own copy of that formula, and each theme tweak means re-applying it by hand, file by file.
+
+**`haze-ui/css-manifest.json` is machine-readable data.** The authoritative export → CSS-file mapping (family absorption included) is regenerated on every build, so bundler plugins and codemods read one source of truth instead of re-deriving kebab-case file names. A directory of pasted components has no equivalent — the mapping exists only in your head or your fork, and it drifts.
+
+**The `ControlOrValue<T>` protocol needs a real runtime.** One prop — `checked?: Control<T> | T` — covers controlled *and* uncontrolled usage because `react-use-control` carries the wiring; a published package is the contract that keeps that behavior identical across every component and version. None of this is hostile to the shadcn / Base UI ecosystem: haze-ui tokens are plain CSS custom properties, so they interoperate with a Tailwind v4 `@theme` block, and haze components compose alongside copy-pasted primitives wherever each fits.
+
 ## Getting Started
 
 ### Installation
@@ -24,6 +33,46 @@ npm i haze-ui
 pnpm add haze-ui
 ```
 
+### React 19+ by design
+
+The peer range is `react: ^19.0.0` on purpose — haze-ui is built on
+modern React rather than carrying a compatibility layer for 18:
+
+- **`ref` as a prop.** React 19 passes `ref` to function components
+  directly, so components that expose refs accept one prop instead of a
+  `forwardRef` wrapper layer.
+- **A modern-platform baseline.** Floating panels (Popover, DropdownMenu,
+  Tooltip, ContextMenu, Combobox, Datepicker) choose between three tiers
+  by feature detection — native `popover` + CSS anchor positioning,
+  `popover` alone, or a JS fallback — with the newest platform features
+  as the primary path, not an enhancement layered on top.
+- **`ControlOrValue<T>`** — the `Control<T> | T` state protocol — is
+  designed for modern React semantics throughout.
+
+On React 18? Upgrade first. haze-ui ships no React 18 compatibility
+layer, and none is planned.
+
+### Optional peer dependencies
+
+haze-ui's only required runtime dependency is `react-use-control` — the
+engine behind `ControlOrValue<T>`. Two integrations are optional peers,
+installed only when you use the components that need them:
+
+```sh
+npm i react-f0rm              # FormItem (peer range ^1.1.1)
+npm i @tanstack/react-table   # DataTable (peer range ^9.2.4)
+```
+
+Everything else — `Button`, `Input`, `Dialog`, `Select`, … — runs with
+nothing beyond `react` and `react-use-control`. The dist is ESM with
+`preserveModules` and side-effect-free JS, so bundlers (Next.js, Vite,
+webpack, Turbopack, Rollup) tree-shake the unused re-export chains and
+never resolve peers you haven't installed: `import { Button } from
+'haze-ui'` works without `react-f0rm`. Only bundler-less consumers
+(bare Node ESM importing the barrel, which links the module graph
+eagerly) must install both peers; the `haze-ui/form` and
+`haze-ui/components/DataTable` subpaths bypass the barrel entirely.
+
 ### Browser support
 
 Since v1.13, haze-ui colors are generated in **OKLCH**, with interaction
@@ -75,6 +124,27 @@ included); `noCss` lists pure-logic exports with no css of their own.
 Bundler plugins and codemods should read this manifest instead of
 re-deriving file names — the mapping changes in lockstep with the build.
 
+### Server Components (Next.js App Router)
+
+Every JS module in `dist/` starts with the `'use client'` directive,
+injected at build time — the same convention Radix, Base UI and React
+Aria ship. In an App Router project you import haze-ui straight from
+your client components; there is no need for a wrapper module that
+re-exports the library under its own `'use client'` banner:
+
+```jsx
+// any client component — import straight from the package
+import { Button } from 'haze-ui';
+
+export function Actions() {
+  return <Button>Start</Button>;
+}
+```
+
+CSS loading is unchanged from the two modes above — `haze-ui/styles.css`
+in the root layout, or the `haze-ui/css/*` subpaths. A runnable Next.js
+15 project lives in [`examples/nextjs`](./examples/nextjs).
+
 ## ButtonLink: a real anchor with the Button skin
 
 Navigation that must look like a button should still *be* a link —
@@ -152,6 +222,53 @@ function SettingsView() {
 }
 ```
 
+## Design tokens export (Figma)
+
+`toDesignTokens()` converts the token registry into a [W3C Design Tokens](https://tr.designtokens.org/) JSON file — grouped by category (`color` / `font` / `spacing` / `dimension` / `shadow`), each token carrying a W3C `$type` and the source CSS variable in `$extensions['haze-ui.css-var']`, with `$value` being the resolved value of the chosen theme (`light` by default). The Theme Editor ships a one-click entry: the **Export W3C tokens (.json)** button in the toolbar downloads the file for the mode currently being edited, live edits included. The exported file can be imported directly into Figma Tokens / Tokens Studio.
+
+```json
+{
+  "color": {
+    "color-primary": {
+      "$value": "oklch(0.563 0.241 260.8)",
+      "$type": "color",
+      "$extensions": { "haze-ui.css-var": "--haze-color-primary" }
+    }
+  },
+  "spacing": {
+    "space-2": {
+      "$value": "8px",
+      "$type": "dimension",
+      "$extensions": { "haze-ui.css-var": "--haze-space-2" }
+    }
+  }
+}
+```
+
+## AI-friendly distribution
+
+**llms.txt** — a markdown overview of the whole library (the `ControlOrValue<T>`
+state protocol, both CSS loading modes, all 101 components grouped with one-line
+purposes, the token system, the floating-overlay tiers, form integration) written
+for AI coding tools and crawlers. It lives at the repo root
+([llms.txt](./llms.txt)) and, on the docs site, at
+<https://wmzy.github.io/haze-ui/llms.txt> (`build:demo` copies it into `dist/`).
+
+**registry.json** — a shadcn/ui-compatible registry shipped as the
+`haze-ui/registry.json` npm artifact (regenerated by `scripts/generate-registry.mjs`
+on every build), also reachable at <https://unpkg.com/haze-ui/registry.json>.
+Consume it with the shadcn CLI:
+
+```sh
+pnpm dlx shadcn@latest add https://unpkg.com/haze-ui/registry.json
+```
+
+To be precise about coverage: it contains only the **agent components** (the
+AI & Chat group plus AsyncSection). Each item is a wrapper file, not vendored
+source — it re-exports the published component and imports its stylesheet, so
+haze-ui stays an npm dependency that keeps updating underneath; treat the
+generated file as your customization layer.
+
 ## react-f0rm Integration
 
 react-f0rm owns form field state, and its headless `useField` hook is
@@ -424,6 +541,95 @@ All three are optional; omit them and the field behaves exactly as
 before (immediate validation per the form's `mode`, immediate error
 display, `validate`-only).
 
+## Accessibility & RTL
+
+Accessibility is a baseline, not an opt-in: every component's test suite
+includes axe checks, and the token sheet ships a global
+`@media (prefers-reduced-motion: reduce)` block that collapses every
+animation duration token to `0ms` — motion-sensitive users get instant
+state changes with no per-component wiring.
+
+haze-ui supports RTL via CSS logical properties wherever a side is
+semantic (the *start/end* of reading flow), not just decorative. Set
+`dir="rtl"` (or `direction: rtl`) on an ancestor and those sides mirror
+automatically — no component props change. A regression smoke test
+(`src/lib/rtl.test.tsx`) renders Progress, Alert, Badge, Tag and Dialog
+in a `dir="rtl"` subtree asserting rendering, axe cleanliness and
+unchanged aria contracts.
+
+### Direction-responsive by construction (no physical CSS)
+
+- **Progress (bar)** — the fill is a normal-flow block with a percentage
+  `width`, so it grows from the inline-start edge (right in RTL) with no
+  `left`/`right` in its CSS.
+- **Slider** — a native `<input type="range">`; the browser mirrors fill
+  and thumb under `dir="rtl"`.
+- **Flex gap / `flex-direction: row`** — gap and row order follow the
+  writing mode, so icon-to-label spacing in Tag, ChatMessage, Alert, etc.
+  mirrors for free.
+- **Carousel track scrolling** — uses `scrollIntoView({ inline: 'start' })`,
+  a logical scroll position.
+
+### Fixed: physical → logical conversions
+
+| File | Change |
+| --- | --- |
+| `Carousel.tsx` | prev/next buttons `left`/`right` → `inset-inline-start`/`inset-inline-end`, plus a `[dir='rtl']` `scale: -1 1` mirror so the `‹`/`›` glyphs point along the reading direction |
+| `ChatMessage.tsx` | bubble tail corners `border-bottom-right-radius` / `border-bottom-left-radius` → `border-end-end-radius` / `border-end-start-radius` (tail follows the bubble's anchored side) |
+| `Chip.tsx` | close-button `margin-left` → `margin-inline-start` |
+| `Container.tsx` | `margin-left/right: auto` → `margin-inline: auto`; `padding-left/right` → `padding-inline` |
+| `ContextMenuItem.tsx`, `DropdownMenuItem.tsx`, `MenuItem.tsx`, `ConversationItem.tsx` | `text-align: left` → `text-align: start` |
+| `DiffViewer.tsx` | line-number gutter `text-align: right` → `end`, `border-right` → `border-inline-end` (gutter stays on the leading side) |
+| `List.tsx` | `padding-left` → `padding-inline-start` (list indent), both variants |
+| `NavigationBar.tsx` | end-slot `margin-left: auto` → `margin-inline-start: auto` |
+| `StepTimeline.tsx` | connector line `left` → `inset-inline-start` (stays under the inline-start marker column) |
+| `Stepper/Step.tsx` | connector `left: 50%` → `inset-inline-start: 50%` (extends toward the next step) |
+| `TableHead.tsx` | `th { text-align: left }` → `start` |
+| `TreeItem.tsx` | checkbox/icon `margin-right` → `margin-inline-end`; indent guide `border-left` → `border-inline-start` |
+
+Kept physical on purpose — glyph geometry or symmetric layout, not
+reading-flow sides: the rotated border chevrons in Accordion/Disclosure,
+Checkbox's rotated checkmark, Radio's centered dot, Affix's symmetric
+`left: 0; right: 0` stretch.
+
+### Partial support: known gaps
+
+- **Floating panels (Popover, DropdownMenu, Tooltip, ContextMenu,
+  Combobox, Datepicker)** — placements are physical sides
+  (`'left'`/`'right'`/`'bottom-end'`, …). The CSS anchor-positioning
+  `position-area` grid keywords and the JS collision math
+  (`utils/collision.ts`, viewport coordinates) are physical; migrating to
+  logical `position-area` keywords is a tracked future change. In RTL the
+  panels position identically to LTR.
+- **Input adornments** — `SelectCore` / `ModelPicker` chevrons
+  (`background-position: right …` + `padding-right`) and
+  `PasswordInputCore`'s absolute reveal button sit on the physical right
+  with matching padding. Consistent under RTL, but not mirrored.
+- **Progress (circle)** — SVG `stroke-dashoffset` fill runs clockwise
+  regardless of direction (SVG has no inline axis).
+- **Physical-by-design placement APIs** — `Drawer` `placement`
+  (`'left'`/`'right'`), `Toast` placement (`'top-left'`, …),
+  `SwipeAction` left/right action edges, `BackToTop`'s bottom-right
+  corner, `CodeBlock`'s top-right language badge: the side is the API,
+  so it stays physical.
+
+### Workaround for remaining gaps
+
+Wrap with `dir="rtl"` for everything above; for the physical-by-design
+cases, override with logical insets through the `className` every
+component accepts:
+
+```jsx
+<Drawer placement="right" className="rtl-drawer" />
+```
+
+```css
+[dir='rtl'] .rtl-drawer {
+  /* nudge a physical placement back to the reading-flow side */
+  inset-inline-end: 0;
+}
+```
+
 ## Related Projects
 
 - [react-use-control](https://github.com/wmzy/react-use-control)
@@ -458,3 +664,34 @@ import 'haze-ui/css/button.css';
 
 No — haze-ui is ESM-only (`"type": "module"`). Use a bundler or runtime
 with ESM support (Vite, webpack 5, Next.js, Node ≥ 18, …).
+
+### Does haze-ui support React 18?
+
+No — the peer range is `react@^19.0.0` by design (see
+[React 19+ by design](#react-19-by-design)). Upgrade to React 19 first;
+haze-ui ships no React 18 compatibility layer.
+
+### How do I detect (or degrade) the relative-color syntax?
+
+Since v1.13, theme interaction states are derived with CSS relative
+colors, so the browser baseline from [Browser support](#browser-support)
+applies — Chrome/Edge 119+, Safari 16.4+, Firefox 128+, with no HSL/hex
+fallbacks shipped. To gate your own fallback styling on support, probe
+the syntax in CSS:
+
+```css
+@supports (color: oklch(from red calc(l + 0.05) 0 h)) {
+  /* relative colors available: derive custom states from tokens */
+}
+```
+
+or from JS before deciding which stylesheet to load:
+
+```js
+if (CSS.supports('color: oklch(from red calc(l + 0.05) 0 h)')) {
+  // relative colors available — load the v1.13+ token sheet
+} else {
+  // below baseline: pin a pre-OKLCH version or ship your own fallbacks
+}
+```
+

package/dist/components/Accordion/Accordion.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                    */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Accordion/AccordionItem.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                        */
 import { jsx as t, jsxs as n } from "react/jsx-runtime";

package/dist/components/Accordion/index.js

@@ -1,3 +1,4 @@
+"use client";
 import e from "./Accordion.js";
 import t from "./AccordionItem.js";
 export { e as Accordion, t as AccordionItem };

package/dist/components/Affix/Affix.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Affix/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./Affix.js";
 export { e as Affix };

package/dist/components/Alert/Alert.js

@@ -1,37 +1,39 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useControl as i } from "react-use-control";
 //#region src/lib/components/Alert/Alert.tsx
-var i = "haze-Alert__base", a = {
+var a = "haze-Alert__base", o = {
 	info: "haze-Alert__info",
 	success: "haze-Alert__success",
 	warning: "haze-Alert__warning",
 	danger: "haze-Alert__danger"
-}, o = "haze-Alert__contentStyle", s = "haze-Alert__closeBtn";
-function c({ visible: c, onClose: l, variant: u = "info", closable: d = !1, className: f, children: p }) {
-	let [m, h] = r(c, !0);
-	return m ? /* @__PURE__ */ n("div", {
+}, s = "haze-Alert__contentStyle", c = "haze-Alert__closeBtn";
+function l({ visible: l, onClose: u, variant: d = "info", closable: f = !1, className: p, children: m }) {
+	let [h, g] = i(l, !0), _ = t("alert");
+	return h ? /* @__PURE__ */ r("div", {
 		role: "alert",
 		className: e([
-			i,
-			a[u],
-			f
+			a,
+			o[d],
+			p
 		]),
-		children: [/* @__PURE__ */ t("div", {
-			className: o,
-			children: p
-		}), d && /* @__PURE__ */ t("button", {
-			type: "button",
+		children: [/* @__PURE__ */ n("div", {
 			className: s,
-			"aria-label": "Close",
+			children: m
+		}), f && /* @__PURE__ */ n("button", {
+			type: "button",
+			className: c,
+			"aria-label": _.close,
 			onClick: () => {
-				h(!1), l?.();
+				g(!1), u?.();
 			},
 			children: "×"
 		})]
 	}) : null;
 }
 //#endregion
-export { c as default };
+export { l as default };

package/dist/components/Alert/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./Alert.js";
 export { e as Alert };

package/dist/components/ApprovalCard/ApprovalCard.js

@@ -1,43 +1,46 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                       */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/ApprovalCard/ApprovalCard.tsx
-var r = "haze-ApprovalCard__card", i = "haze-ApprovalCard__header", a = "haze-ApprovalCard__body", o = "haze-ApprovalCard__desc", s = "haze-ApprovalCard__content", c = "haze-ApprovalCard__actions", l = "haze-ApprovalCard__btn", u = "haze-ApprovalCard__denyBtn", d = "haze-ApprovalCard__approveBtn";
-function f({ title: f = "Approval Required", description: p, onApprove: m, onDeny: h, approveText: g = "Approve", denyText: _ = "Deny", children: v, className: y }) {
-	return /* @__PURE__ */ n("div", {
-		className: e([r, y]),
+var i = "haze-ApprovalCard__card", a = "haze-ApprovalCard__header", o = "haze-ApprovalCard__body", s = "haze-ApprovalCard__desc", c = "haze-ApprovalCard__content", l = "haze-ApprovalCard__actions", u = "haze-ApprovalCard__btn", d = "haze-ApprovalCard__denyBtn", f = "haze-ApprovalCard__approveBtn";
+function p({ title: p, description: m, onApprove: h, onDeny: g, approveText: _, denyText: v, children: y, className: b }) {
+	let x = t("approvalCard"), S = p ?? x.title, C = _ ?? x.approve, w = v ?? x.deny;
+	return /* @__PURE__ */ r("div", {
+		className: e([i, b]),
 		children: [
-			/* @__PURE__ */ t("div", {
-				className: e([i]),
-				children: f
-			}),
 			/* @__PURE__ */ n("div", {
 				className: e([a]),
-				children: [p && /* @__PURE__ */ t("div", {
-					className: e([o]),
-					children: p
-				}), v && /* @__PURE__ */ t("div", {
+				children: S
+			}),
+			/* @__PURE__ */ r("div", {
+				className: e([o]),
+				children: [m && /* @__PURE__ */ n("div", {
 					className: e([s]),
-					children: v
+					children: m
+				}), y && /* @__PURE__ */ n("div", {
+					className: e([c]),
+					children: y
 				})]
 			}),
-			/* @__PURE__ */ n("div", {
-				className: e([c]),
-				children: [/* @__PURE__ */ t("button", {
+			/* @__PURE__ */ r("div", {
+				className: e([l]),
+				children: [/* @__PURE__ */ n("button", {
 					type: "button",
-					onClick: h,
-					className: e([l, u]),
-					children: _
-				}), /* @__PURE__ */ t("button", {
+					onClick: g,
+					className: e([u, d]),
+					children: w
+				}), /* @__PURE__ */ n("button", {
 					type: "button",
-					onClick: m,
-					className: e([l, d]),
-					children: g
+					onClick: h,
+					className: e([u, f]),
+					children: C
 				})]
 			})
 		]
 	});
 }
 //#endregion
-export { f as default };
+export { p as default };

package/dist/components/ApprovalCard/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./ApprovalCard.js";
 export { e as ApprovalCard };

package/dist/components/AspectRatio/AspectRatio.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                      */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/AspectRatio/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./AspectRatio.js";
 export { e as AspectRatio };

package/dist/components/AsyncSection/AsyncSection.js

@@ -1,62 +1,65 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
 /* empty css                       */
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/lib/components/AsyncSection/AsyncSection.tsx
-var r = "haze-AsyncSection__base", i = "haze-AsyncSection__placeholder", a = "haze-AsyncSection__spin", o = "haze-AsyncSection__errorBox", s = "haze-AsyncSection__errorMessage", c = "haze-AsyncSection__retryButton";
-function l({ loading: l = !1, error: u, onRetry: d, loadingText: f = "Loading…", errorText: p, retryText: m = "Retry", className: h, children: g }) {
-	if (l) return /* @__PURE__ */ t("section", {
+var i = "haze-AsyncSection__base", a = "haze-AsyncSection__placeholder", o = "haze-AsyncSection__spin", s = "haze-AsyncSection__errorBox", c = "haze-AsyncSection__errorMessage", l = "haze-AsyncSection__retryButton";
+function u({ loading: u = !1, error: d, onRetry: f, loadingText: p, errorText: m, retryText: h, className: g, children: _ }) {
+	let v = t("asyncSection"), y = p ?? v.loading, b = h ?? v.retry;
+	if (u) return /* @__PURE__ */ n("section", {
 		"aria-busy": "true",
-		className: e([r, h]),
-		children: n("div", {
+		className: e([i, g]),
+		children: r("div", {
 			role: "status",
-			className: e([i]),
-			children: [/* @__PURE__ */ t("span", {
+			className: e([a]),
+			children: [/* @__PURE__ */ n("span", {
 				"aria-hidden": "true",
-				className: e([a]),
-				children: /* @__PURE__ */ n("svg", {
+				className: e([o]),
+				children: /* @__PURE__ */ r("svg", {
 					viewBox: "0 0 24 24",
 					fill: "none",
 					xmlns: "http://www.w3.org/2000/svg",
-					children: [/* @__PURE__ */ t("circle", {
+					children: [/* @__PURE__ */ n("circle", {
 						cx: "12",
 						cy: "12",
 						r: "10",
 						stroke: "var(--haze-color-border)",
 						strokeWidth: "3"
-					}), /* @__PURE__ */ t("path", {
+					}), /* @__PURE__ */ n("path", {
 						d: "M12 2a10 10 0 0 1 10 10",
 						stroke: "var(--haze-color-primary)",
 						strokeWidth: "3",
 						strokeLinecap: "round"
 					})]
 				})
-			}), f]
+			}), y]
 		})
 	});
-	if (u != null) {
-		let i = p ?? (u instanceof Error && u.message ? u.message : void 0) ?? "Something went wrong";
-		return /* @__PURE__ */ t("section", {
-			className: e([r, h]),
-			children: n("div", {
+	if (d != null) {
+		let t = m ?? (d instanceof Error && d.message ? d.message : void 0) ?? v.error;
+		return /* @__PURE__ */ n("section", {
+			className: e([i, g]),
+			children: r("div", {
 				role: "alert",
-				className: e([o]),
-				children: [/* @__PURE__ */ t("p", {
-					className: e([s]),
-					children: i
-				}), d && /* @__PURE__ */ t("button", {
-					type: "button",
-					onClick: d,
+				className: e([s]),
+				children: [/* @__PURE__ */ n("p", {
 					className: e([c]),
-					children: m
+					children: t
+				}), f && /* @__PURE__ */ n("button", {
+					type: "button",
+					onClick: f,
+					className: e([l]),
+					children: b
 				})]
 			})
 		});
 	}
-	return /* @__PURE__ */ t("section", {
-		className: e([r, h]),
-		children: g
+	return /* @__PURE__ */ n("section", {
+		className: e([i, g]),
+		children: _
 	});
 }
 //#endregion
-export { l as default };
+export { u as default };

package/dist/components/AsyncSection/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./AsyncSection.js";
 export { e as AsyncSection };

package/dist/components/Avatar/Avatar.js

@@ -1,4 +1,5 @@
 
+"use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css                 */
 import { jsx as t } from "react/jsx-runtime";

package/dist/components/Avatar/index.js

@@ -1,2 +1,3 @@
+"use client";
 import e from "./Avatar.js";
 export { e as Avatar };

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,30 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import { formatString as t } from "../LocaleProvider/locale.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+/* empty css                      */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Children as a } from "react";
+//#region src/lib/components/AvatarGroup/AvatarGroup.tsx
+var o = "haze-AvatarGroup__base", s = "haze-AvatarGroup__item", c = "haze-AvatarGroup__itemStacked", l = "haze-AvatarGroup__overflowChip";
+function u({ max: u, total: d, className: f, children: p, ...m }) {
+	let h = n("avatarGroup"), g = a.toArray(p), _ = u === void 0 ? g.length : Math.max(u, 0), v = g.length > _, y = v ? g.slice(0, _) : g, b = d ?? g.length - _;
+	return /* @__PURE__ */ i("div", {
+		...m,
+		className: e([o, f]),
+		children: [y.map((t, n) => /* @__PURE__ */ r("span", {
+			className: e([s, n > 0 && c]),
+			children: t
+		}, n)), v && /* @__PURE__ */ r("span", {
+			className: e([
+				s,
+				l,
+				y.length > 0 && c
+			]),
+			children: t(h.more, { count: b })
+		})]
+	});
+}
+//#endregion
+export { u as default };

package/dist/components/AvatarGroup/index.js

@@ -0,0 +1,3 @@
+"use client";
+import e from "./AvatarGroup.js";
+export { e as AvatarGroup };