haze-ui 1.30.0 → 1.32.0

package/README.md

@@ -31,7 +31,7 @@ English | [简体中文](./README-zh_CN.md)
 
 **`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.
+**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, and haze components compose alongside copy-pasted primitives wherever each fits.
 
 ## Getting Started
 
@@ -194,11 +194,43 @@ import 'haze-ui/css/tokens.css';
 import 'haze-ui/css/button.css';
 import { Button } from 'haze-ui';
 
+// …or zero CSS imports at all — the official Vite plugin injects the
+// right per-component CSS for you (see "Automatic CSS with haze-ui-vite"):
+// vite.config.ts → hazeCss() from 'haze-ui-vite'
+import { Button } from 'haze-ui';
+
 export default function MyComponent() {
   return <Button>Start</Button>;
 }
 ```
 
+#### Automatic CSS with haze-ui-vite
+
+[`haze-ui-vite`](https://www.npmjs.com/package/haze-ui-vite) is the
+official companion Vite plugin: it scans each module's named imports from
+`haze-ui` (`import { Button, Select } from 'haze-ui'`), maps them through
+`haze-ui/css-manifest.json`, and prepends the matching
+`haze-ui/css/*.css` side-effect imports — `tokens.css` always first. CSS
+enters the module graph exactly where it's consumed, so code-split views
+carry only their own component CSS and HMR works through Vite's native
+pipeline.
+
+```ts
+// vite.config.ts
+import hazeCss from 'haze-ui-vite';
+
+export default {
+  plugins: [react(), hazeCss()],
+};
+```
+
+It reads the manifest shipped by your installed haze-ui version (no
+hardcoded name mapping), validates every injected file exists in the
+actual package, and warns on namespace imports it cannot collect. Works
+with Vite 5–8, zero runtime dependencies. Not on Vite? Keep the explicit
+imports above, or read `haze-ui/css-manifest.json` from your own bundler
+tooling — it's the same data the plugin uses.
+
 Component CSS files are kebab-case versions of the component name
 (`OTPInput` → `haze-ui/css/otp-input.css`). Per-component files only
 cover that component's rules — tokens (themes, spacing, typography)
@@ -222,6 +254,40 @@ authoritative export → css-file mapping ships as data:
 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.
+The official [`haze-ui-vite`](https://www.npmjs.com/package/haze-ui-vite)
+plugin (above) is the reference consumer of this data.
+
+#### Styling & overriding (the `@layer haze` contract)
+
+All shipped CSS lives inside **`@layer haze`**, so your own *unlayered*
+styles beat every library rule regardless of source order or
+specificity — no `!important`, no selector wrestling:
+
+```css
+/* your stylesheet, plain CSS — always wins over the library */
+[data-slot='button'] {
+  letter-spacing: 0.02em;
+}
+```
+
+Every element a component renders carries a stable **`data-slot`**
+attribute (`data-slot='button'`, `'label'`, `'panel'`, `'menu-item'`,
+…). It is the official override surface: the attribute set is enforced
+by a coverage test, so it cannot silently drift between releases. The
+cascade is intentional — prefer, in order:
+
+1. **tokens** — `var(--haze-color-primary)` and friends re-derive whole
+   interaction-state families at runtime; per-component
+   `--haze-button-*` variables retheme one family;
+2. **`ConfigProvider` defaults** — app-wide per-component prop defaults
+   (and `classNames` where the component exposes slots);
+3. **`data-slot` CSS targeting** — structural overrides (the escape
+   hatch above);
+4. **`className` / `classNames`** — per-instance overrides, reserved
+   for one-offs.
+
+If your own framework ships layered styles too, declare order explicitly
+(e.g. `@layer haze, app;`) to keep the last word.
 
 ### Server Components (Next.js App Router)
 

package/dist/components/ActivityRail/ActivityRail.js

@@ -0,0 +1,76 @@
+
+"use client";
+import { classnames as e } from "../../utils/classnames.js";
+import t from "../Badge/Badge.js";
+import n from "../Tooltip/Tooltip.js";
+/* empty css                       */
+import { Children as r, isValidElement as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/lib/components/ActivityRail/ActivityRail.tsx
+var s = "haze-ActivityRail__rail", c = "haze-ActivityRail__railHorizontal", l = "haze-ActivityRail__endGroup", u = "haze-ActivityRail__endGroupHorizontal";
+function d({ orientation: t, children: n, className: d, ...f }) {
+	let p = [], m = [];
+	return r.forEach(n, (e) => {
+		i(e) && e.props.slot === "end" ? m.push(e) : p.push(e);
+	}), /* @__PURE__ */ o("nav", {
+		"data-slot": "activity-rail",
+		"data-orientation": t,
+		...f,
+		className: e([
+			s,
+			c,
+			d
+		]),
+		children: [p, m.length > 0 && /* @__PURE__ */ a("div", {
+			"data-slot": "activity-rail-end",
+			className: e([l, u]),
+			children: m
+		})]
+	});
+}
+var f = "haze-ActivityRail__item", p = "haze-ActivityRail__itemActive", m = "haze-ActivityRail__indicator", h = "haze-ActivityRail__itemIcon", g = "haze-ActivityRail__itemBadge";
+function _({ icon: r, label: i, badge: s, active: c = !1, onSelect: l, slot: u = "start", className: d, onClick: _, ...v }) {
+	let y = /* @__PURE__ */ o("button", {
+		type: "button",
+		"data-slot": "activity-rail-item",
+		"aria-label": i,
+		"aria-current": c ? "true" : void 0,
+		onClick: (e) => {
+			_?.(e), l?.();
+		},
+		...v,
+		className: e([
+			f,
+			c && p,
+			d
+		]),
+		children: [
+			/* @__PURE__ */ a("span", {
+				"data-slot": "activity-rail-item-icon",
+				"aria-hidden": "true",
+				className: e(h),
+				children: r
+			}),
+			s != null && /* @__PURE__ */ a("span", {
+				"data-slot": "activity-rail-item-badge",
+				className: e(g),
+				children: /* @__PURE__ */ a(t, {
+					size: "sm",
+					children: s
+				})
+			}),
+			c && /* @__PURE__ */ a("span", {
+				"data-slot": "activity-rail-item-indicator",
+				"aria-hidden": "true",
+				className: e(m)
+			})
+		]
+	});
+	return /* @__PURE__ */ a(n, {
+		content: i,
+		position: "right",
+		children: y
+	});
+}
+//#endregion
+export { _ as ActivityRailItem, d as default };

package/dist/components/ActivityRail/index.js

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

package/dist/components/BottomSheet/BottomSheet.js

@@ -4,8 +4,9 @@ import { classnames as e } from "../../utils/classnames.js";
 import { Presence as t } from "../../utils/presence.js";
 import { useFocusScope as n } from "../../utils/focus-scope.js";
 import { useViewTransitionFlip as r } from "../../utils/view-transition.js";
+import { useVisualViewportInset as i } from "../../utils/viewport.js";
 /* empty css                      */
-import { useCallback as i, useEffect as a, useImperativeHandle as o, useRef as s, useState as c } from "react";
+import { useCallback as a, useEffect as o, useImperativeHandle as s, useRef as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { useControl as d } from "react-use-control";
 //#region src/lib/components/BottomSheet/BottomSheet.tsx
@@ -19,24 +20,9 @@ function v(e, t) {
 	}
 	return !0;
 }
-function y(e, t) {
-	let [n, r] = c(0);
-	return a(() => {
-		if (!e || !t) return;
-		let n = window.visualViewport;
-		if (!n) return;
-		let i = () => {
-			let e = Math.max(0, Math.round(window.innerHeight - n.height - n.offsetTop));
-			r((t) => t === e ? t : e);
-		};
-		return i(), n.addEventListener("resize", i), n.addEventListener("scroll", i), () => {
-			n.removeEventListener("resize", i), n.removeEventListener("scroll", i);
-		};
-	}, [e, t]), n;
-}
-function b({ open: c, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1, virtualKeyboard: C = !1, children: w, className: T, style: E, ref: D, ...O }) {
-	let [k, A] = d(c, !1), j = r(x, A), M = s(null);
-	a(() => {
+function y({ open: y, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1, virtualKeyboard: C = !1, children: w, className: T, style: E, ref: D, ...O }) {
+	let [k, A] = d(y, !1), j = r(x, A), M = c(null);
+	o(() => {
 		if (!k) return;
 		let e = document.activeElement;
 		M.current = e instanceof HTMLElement ? e : null;
@@ -44,10 +30,10 @@ function b({ open: c, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1
 	let N = n({
 		enabled: k,
 		trapped: !0
-	}), P = i(() => {
+	}), P = a(() => {
 		j(!1), b?.();
 	}, [j, b]);
-	o(D, () => ({
+	s(D, () => ({
 		open: () => {
 			j(!0);
 		},
@@ -57,13 +43,13 @@ function b({ open: c, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1
 			e?.isConnected && e.focus();
 		}
 	}), [j, P]);
-	let F = y(C, k), I = C ? {
+	let F = i(C && k), I = C ? {
 		"--haze-sheet-kb-inset": `${F}px`,
 		maxHeight: `min(80dvh, calc(100dvh - ${F}px))`,
 		...F > 0 ? { transform: `translateY(${-F}px)` } : null
-	} : void 0, L = s(null), R = i((e) => {
+	} : void 0, L = c(null), R = a((e) => {
 		N(e), L.current = e;
-	}, [N]), z = s(null), B = i((e) => {
+	}, [N]), z = c(null), B = a((e) => {
 		let t = z.current, n = L.current;
 		if (!t || !n || e.touches.length !== 1 || e.defaultPrevented) return;
 		let [r] = e.touches;
@@ -111,7 +97,7 @@ function b({ open: c, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1
 		let t = z.current, n = L.current;
 		t && n && t.pointerId === e.pointerId && (z.current = null, H(n), t.dragging && U(n));
 	};
-	return a(() => {
+	return o(() => {
 		if (k) return;
 		z.current = null;
 		let e = L.current;
@@ -154,4 +140,4 @@ function b({ open: c, onClose: b, viewTransition: x = !1, swipeToDismiss: S = !1
 	});
 }
 //#endregion
-export { b as default };
+export { y as default };

package/dist/components/Button/Button.js

@@ -1,22 +1,40 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { useConfigDefaults as t } from "../ConfigProvider/useConfigDefaults.js";
-import { base as n, sizes as r, squareSizes as i, variants as a } from "./styles.js";
-import { jsx as o } from "react/jsx-runtime";
+import { useBusyPressable as t } from "../../hooks/useBusyPressable.js";
+import n from "../Spinner/Spinner.js";
+import { useConfigDefaults as r } from "../ConfigProvider/useConfigDefaults.js";
+import { base as i, label as a, sizes as o, squareSizes as s, variants as c } from "./styles.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/lib/components/Button/Button.tsx
-function s({ variant: s = "solid", size: c, square: l = !1, className: u, ...d }) {
-	let f = t("Button"), p = c ?? f.size ?? "md", m = l ? i[p] : r[p];
-	return /* @__PURE__ */ o("button", {
-		type: "button",
-		"data-slot": "button",
-		...d,
+function f({ variant: f = "solid", size: p, square: m = !1, loading: h = !1, as: g, className: _, children: v, disabled: y, ...b }) {
+	let x = r("Button"), S = p ?? x.size ?? "md", C = m ? s[S] : o[S], w = !!h, T = t(w, y), E = typeof h == "object" ? h.icon : void 0, D = typeof h == "object" ? h.text : void 0, O = g ?? "button", k = g === void 0 || g === "button";
+	return /* @__PURE__ */ u(O, {
+		...k ? {
+			type: "button",
+			disabled: T.disabled
+		} : { "aria-disabled": T.disabled || void 0 },
+		"data-slot": k ? "button" : "button-link",
+		"data-loading": w || void 0,
+		"aria-busy": T["aria-busy"],
+		...b,
 		className: e([
-			n,
-			a[s],
-			m,
-			u
-		])
+			i,
+			c[f],
+			C,
+			!k && "haze-styles__link",
+			w && "haze-styles__loading",
+			_
+		]),
+		children: w ? /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("span", {
+			"data-slot": "label",
+			className: e([a]),
+			children: D === void 0 ? v : D
+		}), /* @__PURE__ */ u("span", {
+			"data-slot": "indicator",
+			"aria-hidden": !0,
+			children: E ?? /* @__PURE__ */ u(n, { size: "sm" })
+		})] }) : v
 	});
 }
 //#endregion
-export { s as default };
+export { f as default };

package/dist/components/Button/ButtonLink.js

@@ -1,26 +1,17 @@
-
 "use client";
-import { classnames as e } from "../../utils/classnames.js";
-import { useConfigDefaults as t } from "../ConfigProvider/useConfigDefaults.js";
-import { base as n, sizes as r, squareSizes as i, variants as a } from "./styles.js";
-/* empty css                     */
-import { forwardRef as o } from "react";
-import { jsx as s } from "react/jsx-runtime";
+import { useConfigDefaults as e } from "../ConfigProvider/useConfigDefaults.js";
+import t from "./Button.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/lib/components/Button/ButtonLink.tsx
-var c = "haze-ButtonLink__link", l = o(function({ variant: o = "solid", size: l, square: u = !1, className: d, ...f }, p) {
-	let m = t("ButtonLink"), h = l ?? m.size ?? "md", g = u ? i[h] : r[h];
-	return /* @__PURE__ */ s("a", {
-		ref: p,
-		"data-slot": "button-link",
-		...f,
-		className: e([
-			n,
-			a[o],
-			g,
-			c,
-			d
-		])
+var i = n(function({ size: n, ...i }, a) {
+	let o = e("ButtonLink"), s = n ?? o.size;
+	return /* @__PURE__ */ r(t, {
+		as: "a",
+		ref: a,
+		size: s,
+		...i
 	});
 });
 //#endregion
-export { l as default };
+export { i as default };

package/dist/components/Button/styles.js

@@ -14,6 +14,6 @@ var e = "haze-styles__base", t = {
 	sm: a,
 	md: o,
 	lg: s
-};
+}, u = "haze-styles__label", d = "haze-styles__link", f = "haze-styles__loading";
 //#endregion
-export { e as base, i as sizeLg, r as sizeMd, n as sizeSm, c as sizes, s as squareLg, o as squareMd, l as squareSizes, a as squareSm, t as variants };
+export { e as base, u as label, d as link, f as loading, i as sizeLg, r as sizeMd, n as sizeSm, c as sizes, s as squareLg, o as squareMd, l as squareSizes, a as squareSm, t as variants };

package/dist/components/Cascader/Cascader.js

@@ -1,11 +1,11 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { mergeRefs as t } from "../../utils/refs.js";
-import { getDirection as n } from "../../utils/direction.js";
-import { useStrings as r } from "../LocaleProvider/useStrings.js";
-import { FloatingPanel as i, useFloating as a } from "../../utils/floating.js";
-import o from "../Spinner/Spinner.js";
+import { getDirection as t } from "../../utils/direction.js";
+import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import r from "../Spinner/Spinner.js";
+import { mergeRefs as i } from "../../utils/refs.js";
+import { FloatingPanel as a, useFloating as o } from "../../utils/floating.js";
 import ee from "../VirtualList/VirtualList.js";
 import { useFocusScope as te } from "../../utils/focus-scope.js";
 /* empty css                   */
@@ -41,7 +41,7 @@ function g(e) {
 	return e ? Array.from(e.querySelectorAll(m)) : [];
 }
 function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect: Ne = !1, expandTrigger: Pe = "click", onSearch: y, loading: b = !1, virtualized: x, className: Fe, ref: S, ...Ie }) {
-	let Le = r("cascader"), C = r("select"), [w, T] = p(!1, !1), E = ae(v), [D, O] = p(oe(E ? v : void 0, se((e) => je?.(e))), E ? [] : v ?? []), [k, A] = u([]), [j, M] = u(null), N = y !== void 0, [P, Re] = u(""), F = x !== void 0 && x !== !1, I = typeof x == "object" ? x : void 0, L = I?.itemHeight ?? Ce, ze = I?.overscan, R = re(), z = l(null), Be = s((e) => t(z, S)(e), [z, S]), B = l(null), V = l(null), H = l(/* @__PURE__ */ new Map()), U = l(!1), W = a({
+	let Le = n("cascader"), C = n("select"), [w, T] = p(!1, !1), E = ae(v), [D, O] = p(oe(E ? v : void 0, se((e) => je?.(e))), E ? [] : v ?? []), [k, A] = u([]), [j, M] = u(null), N = y !== void 0, [P, Re] = u(""), F = x !== void 0 && x !== !1, I = typeof x == "object" ? x : void 0, L = I?.itemHeight ?? Ce, ze = I?.overscan, R = re(), z = l(null), Be = s((e) => i(z, S)(e), [z, S]), B = l(null), V = l(null), H = l(/* @__PURE__ */ new Map()), U = l(!1), W = o({
 		open: w,
 		setOpen: T,
 		triggerRef: z,
@@ -148,9 +148,9 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 	}, Ge = (e) => {
 		!w && (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), T(!0));
 	}, Ke = (e) => {
-		let t = B.current;
-		if (!t) return;
-		let r = (document.activeElement instanceof HTMLElement ? document.activeElement : null)?.closest(m) ?? void 0, i = r ? Number(r.dataset.level) : 0, a = n(t) === "rtl" ? "ArrowLeft" : "ArrowRight", o = a === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+		let n = B.current;
+		if (!n) return;
+		let r = (document.activeElement instanceof HTMLElement ? document.activeElement : null)?.closest(m) ?? void 0, i = r ? Number(r.dataset.level) : 0, a = t(n) === "rtl" ? "ArrowLeft" : "ArrowRight", o = a === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
 		switch (e.key) {
 			case "ArrowDown":
 			case "ArrowUp": {
@@ -252,7 +252,7 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 	}, n)), $ = b ? /* @__PURE__ */ f("div", {
 		"data-slot": "loading",
 		className: e(ve),
-		children: [/* @__PURE__ */ d(o, { size: "sm" }), /* @__PURE__ */ d("span", { children: C.loading })]
+		children: [/* @__PURE__ */ d(r, { size: "sm" }), /* @__PURE__ */ d("span", { children: C.loading })]
 	}) : N && _.length === 0 ? /* @__PURE__ */ d("div", {
 		"data-slot": "empty",
 		className: e(ye),
@@ -291,7 +291,7 @@ function _({ options: _, value: v, onChange: je, placeholder: Me, changeOnSelect
 				className: e(fe),
 				children: /* @__PURE__ */ d(Ae, {})
 			})]
-		}), /* @__PURE__ */ d(i, {
+		}), /* @__PURE__ */ d(a, {
 			ref: Ve,
 			behavior: W,
 			placement: "bottom",

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,8 +1,8 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
-import { mergeRefs as t } from "../../utils/refs.js";
-import { useStrings as n } from "../LocaleProvider/useStrings.js";
+import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { mergeRefs as n } from "../../utils/refs.js";
 import { FloatingPanel as r, useFloating as i } from "../../utils/floating.js";
 import { cssColor as a, parseColor as o, rgbHexKey as s } from "./color-math.js";
 import { checkerboard as c, panelVisuals as l, swatchFill as u, trigger as d } from "./color-picker-styles.js";
@@ -14,7 +14,7 @@ import { useControl as b } from "react-use-control";
 //#region src/lib/components/ColorPicker/ColorPicker.tsx
 var x = 10, S = "haze-ColorPicker__container";
 function C({ value: C, onChange: w, open: T, inline: E = !1, format: D = "hex", allowAlpha: O = !1, presets: k, recent: A = !1, className: j, "aria-label": M, ref: N }) {
-	let P = n("colorPicker"), [F, I] = b(C, "#000000"), [L, R] = b(T, !1), z = M ?? P.pickColor, B = o(F)?.rgb ?? {
+	let P = t("colorPicker"), [F, I] = b(C, "#000000"), [L, R] = b(T, !1), z = M ?? P.pickColor, B = o(F)?.rgb ?? {
 		r: 0,
 		g: 0,
 		b: 0
@@ -39,7 +39,7 @@ function C({ value: C, onChange: w, open: T, inline: E = !1, format: D = "hex",
 		allowAlpha: O,
 		presets: k,
 		recentColors: A ? H : void 0
-	}), K = g(null), q = g(null), J = p((e) => t(K, N)(e), [N]), Y = h(), X = i({
+	}), K = g(null), q = g(null), J = p((e) => n(K, N)(e), [N]), Y = h(), X = i({
 		open: L,
 		setOpen: R,
 		triggerRef: K,