haze-ui 1.30.0 → 1.31.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,8 @@ 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.
 
 ### 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/ConversationList/ConversationList.js

@@ -1,16 +1,25 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useEndReached as t } from "../../utils/use-end-reached.js";
 /* empty css                           */
-import { jsx as t } from "react/jsx-runtime";
+import { Children as n, useRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/lib/components/ConversationList/ConversationList.tsx
-var n = "haze-ConversationList__list";
-function r({ children: r, className: i }) {
-	return /* @__PURE__ */ t("div", {
+var a = "haze-ConversationList__list";
+function o({ children: o, onLoadMore: s, className: c }) {
+	let l = r(null);
+	return t({
+		ref: l,
+		onEndReached: s,
+		threshold: 200,
+		contentUnits: n.count(o)
+	}), /* @__PURE__ */ i("div", {
+		ref: l,
 		"data-slot": "conversation-list",
-		className: e([n, i]),
-		children: r
+		className: e([a, c]),
+		children: o
 	});
 }
 //#endregion
-export { r as default };
+export { o as default };

package/dist/components/List/List.js

@@ -2,23 +2,27 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 /* empty css               */
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/lib/components/List/List.tsx
-var n = "haze-List__base", r = {
+var r = "haze-List__base", i = {
 	unordered: "haze-List__unordered",
 	ordered: "haze-List__ordered",
 	none: "haze-List__none"
-};
-function i({ variant: i = "unordered", className: a, children: o }) {
-	return /* @__PURE__ */ t(i === "ordered" ? "ol" : "ul", {
+}, a = "haze-List__loadMoreSlot";
+function o({ variant: o = "unordered", className: s, children: c, loadMore: l }) {
+	return /* @__PURE__ */ n(o === "ordered" ? "ol" : "ul", {
 		"data-slot": "list",
 		className: e([
-			n,
-			r[i],
-			a
+			r,
+			i[o],
+			s
 		]),
-		children: o
+		children: [c, l && /* @__PURE__ */ t("li", {
+			"data-slot": "load-more",
+			className: e([a]),
+			children: l
+		})]
 	});
 }
 //#endregion
-export { i as default };
+export { o as default };

package/dist/components/LocaleProvider/ar-sa.js

@@ -186,6 +186,13 @@ var e = {
 		collapse: "إخفاء المقتطف"
 	},
 	streamingText: { generating: "جارٍ الإنشاء" },
+	tabs: {
+		close: "إغلاق",
+		moreTabs: "المزيد من علامات التبويب",
+		statusDirty: "تغييرات غير محفوظة",
+		statusError: "خطأ",
+		statusSyncing: "جارٍ المزامنة"
+	},
 	tag: { remove: "إزالة" },
 	tagGroup: { remove: "إزالة" },
 	tagInput: {

package/dist/components/LocaleProvider/de-de.js

@@ -186,6 +186,13 @@ var e = {
 		collapse: "Auszug ausblenden"
 	},
 	streamingText: { generating: "Wird generiert" },
+	tabs: {
+		close: "Schließen",
+		moreTabs: "Weitere Tabs",
+		statusDirty: "Ungespeicherte Änderungen",
+		statusError: "Fehler",
+		statusSyncing: "Synchronisiert"
+	},
 	tag: { remove: "Entfernen" },
 	tagGroup: { remove: "Entfernen" },
 	tagInput: {

package/dist/components/LocaleProvider/es-es.js

@@ -186,6 +186,13 @@ var e = {
 		collapse: "Ocultar extracto"
 	},
 	streamingText: { generating: "Generando" },
+	tabs: {
+		close: "Cerrar",
+		moreTabs: "Más pestañas",
+		statusDirty: "Cambios sin guardar",
+		statusError: "Error",
+		statusSyncing: "Sincronizando"
+	},
 	tag: { remove: "Quitar" },
 	tagGroup: { remove: "Quitar" },
 	tagInput: {

package/dist/components/LocaleProvider/fr-fr.js

@@ -186,6 +186,13 @@ var e = {
 		collapse: "Masquer l’extrait"
 	},
 	streamingText: { generating: "Génération en cours" },
+	tabs: {
+		close: "Fermer",
+		moreTabs: "Plus d'onglets",
+		statusDirty: "Modifications non enregistrées",
+		statusError: "Erreur",
+		statusSyncing: "Synchronisation"
+	},
 	tag: { remove: "Retirer" },
 	tagGroup: { remove: "Retirer" },
 	tagInput: {

package/dist/components/LocaleProvider/it-it.js

@@ -186,6 +186,13 @@ var e = {
 		collapse: "Nascondi stralcio"
 	},
 	streamingText: { generating: "Generazione in corso" },
+	tabs: {
+		close: "Chiudi",
+		moreTabs: "Più schede",
+		statusDirty: "Modifiche non salvate",
+		statusError: "Errore",
+		statusSyncing: "Sincronizzazione"
+	},
 	tag: { remove: "Rimuovi" },
 	tagGroup: { remove: "Rimuovi" },
 	tagInput: {

package/dist/components/LocaleProvider/ja-jp.js

@@ -186,6 +186,13 @@ var e = {
 		collapse: "抜粋を非表示"
 	},
 	streamingText: { generating: "生成中" },
+	tabs: {
+		close: "閉じる",
+		moreTabs: "その他のタブ",
+		statusDirty: "未保存の変更",
+		statusError: "エラー",
+		statusSyncing: "同期中"
+	},
 	tag: { remove: "削除" },
 	tagGroup: { remove: "削除" },
 	tagInput: {

package/dist/components/LocaleProvider/ko-kr.js

@@ -186,6 +186,13 @@ var e = {
 		collapse: "발췌 접기"
 	},
 	streamingText: { generating: "생성 중" },
+	tabs: {
+		close: "닫기",
+		moreTabs: "탭 더 보기",
+		statusDirty: "저장되지 않은 변경 사항",
+		statusError: "오류",
+		statusSyncing: "동기화 중"
+	},
 	tag: { remove: "제거" },
 	tagGroup: { remove: "제거" },
 	tagInput: {

package/dist/components/LocaleProvider/locale.js

@@ -186,6 +186,13 @@ var e = {
 		collapse: "Hide excerpt"
 	},
 	streamingText: { generating: "Generating" },
+	tabs: {
+		close: "Close",
+		moreTabs: "More tabs",
+		statusDirty: "Unsaved changes",
+		statusError: "Error",
+		statusSyncing: "Syncing"
+	},
 	tag: { remove: "Remove" },
 	tagGroup: { remove: "Remove" },
 	tagInput: {

package/dist/components/LocaleProvider/pt-br.js

@@ -186,6 +186,13 @@ var e = {
 		collapse: "Ocultar trecho"
 	},
 	streamingText: { generating: "Gerando" },
+	tabs: {
+		close: "Fechar",
+		moreTabs: "Mais abas",
+		statusDirty: "Alterações não salvas",
+		statusError: "Erro",
+		statusSyncing: "Sincronizando"
+	},
 	tag: { remove: "Remover" },
 	tagGroup: { remove: "Remover" },
 	tagInput: {

package/dist/components/LocaleProvider/ru-ru.js

@@ -186,6 +186,13 @@ var e = {
 		collapse: "Скрыть отрывок"
 	},
 	streamingText: { generating: "Генерация" },
+	tabs: {
+		close: "Закрыть",
+		moreTabs: "Ещё вкладки",
+		statusDirty: "Несохранённые изменения",
+		statusError: "Ошибка",
+		statusSyncing: "Синхронизация"
+	},
 	tag: { remove: "Удалить" },
 	tagGroup: { remove: "Удалить" },
 	tagInput: {

package/dist/components/LocaleProvider/zh-cn.js

@@ -186,6 +186,13 @@ var e = {
 		collapse: "收起摘录"
 	},
 	streamingText: { generating: "生成中" },
+	tabs: {
+		close: "关闭",
+		moreTabs: "更多标签页",
+		statusDirty: "未保存",
+		statusError: "错误",
+		statusSyncing: "同步中"
+	},
 	tag: { remove: "移除" },
 	tagGroup: { remove: "移除" },
 	tagInput: {

package/dist/components/LogViewer/LogViewer.js

@@ -2,78 +2,85 @@
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
 import { useStrings as t } from "../LocaleProvider/useStrings.js";
+import { useEndReached as n } from "../../utils/use-end-reached.js";
 /* empty css                    */
-import { useMemo as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useControl as a } from "react-use-control";
+import { useMemo as r, useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useControl as s } from "react-use-control";
 //#region src/lib/components/LogViewer/LogViewer.tsx
-var o = "haze-LogViewer__wrapper", s = "haze-LogViewer__toolbar", c = "haze-LogViewer__filterBtn", l = "haze-LogViewer__filterActive", u = "haze-LogViewer__body", d = "haze-LogViewer__entry", f = "haze-LogViewer__timestamp", p = "haze-LogViewer__levelBadge", m = "haze-LogViewer__levelDebug", h = "haze-LogViewer__levelInfo", g = "haze-LogViewer__levelWarn", _ = "haze-LogViewer__levelError", v = "haze-LogViewer__messageStyle", y = {
-	debug: m,
-	info: h,
-	warn: g,
-	error: _
-}, b = [
+var c = "haze-LogViewer__wrapper", l = "haze-LogViewer__toolbar", u = "haze-LogViewer__filterBtn", d = "haze-LogViewer__filterActive", f = "haze-LogViewer__body", p = "haze-LogViewer__entry", m = "haze-LogViewer__timestamp", h = "haze-LogViewer__levelBadge", g = "haze-LogViewer__levelDebug", _ = "haze-LogViewer__levelInfo", v = "haze-LogViewer__levelWarn", y = "haze-LogViewer__levelError", b = "haze-LogViewer__messageStyle", x = {
+	debug: g,
+	info: _,
+	warn: v,
+	error: y
+}, S = [
 	"debug",
 	"info",
 	"warn",
 	"error"
 ];
-function x({ logs: m, filter: h, className: g }) {
-	let [_, x] = a(h, null), S = t("logViewer"), C = n(() => _ ? m.filter((e) => e.level === _) : m, [m, _]);
-	return /* @__PURE__ */ i("div", {
+function C({ logs: g, filter: _, onLoadMore: v, className: y }) {
+	let [C, w] = s(_, null), T = t("logViewer"), E = i(null), D = r(() => C ? g.filter((e) => e.level === C) : g, [g, C]);
+	return n({
+		ref: E,
+		onEndReached: v,
+		threshold: 200,
+		contentUnits: D.length
+	}), /* @__PURE__ */ o("div", {
 		"data-slot": "log-viewer",
-		className: e([o, g]),
-		children: [/* @__PURE__ */ i("div", {
+		className: e([c, y]),
+		children: [/* @__PURE__ */ o("div", {
 			"data-slot": "toolbar",
-			className: e([s]),
-			children: [/* @__PURE__ */ r("button", {
+			className: e([l]),
+			children: [/* @__PURE__ */ a("button", {
 				"data-slot": "filter-button",
 				type: "button",
-				onClick: () => x(null),
-				className: e([c, !_ && l]),
-				children: S.all
-			}), b.map((t) => /* @__PURE__ */ r("button", {
+				onClick: () => w(null),
+				className: e([u, !C && d]),
+				children: T.all
+			}), S.map((t) => /* @__PURE__ */ a("button", {
 				"data-slot": "filter-button",
 				type: "button",
-				onClick: () => x(t),
-				className: e([c, _ === t && l]),
+				onClick: () => w(t),
+				className: e([u, C === t && d]),
 				children: t
 			}, t))]
-		}), /* @__PURE__ */ i("div", {
+		}), /* @__PURE__ */ o("div", {
+			ref: E,
 			"data-slot": "body",
-			className: e([u]),
-			children: [C.map((t, n) => /* @__PURE__ */ i("div", {
+			className: e([f]),
+			children: [D.map((t, n) => /* @__PURE__ */ o("div", {
 				"data-slot": "entry",
-				className: e([d]),
+				className: e([p]),
 				children: [
-					t.timestamp && /* @__PURE__ */ r("span", {
+					t.timestamp && /* @__PURE__ */ a("span", {
 						"data-slot": "time",
-						className: e([f]),
+						className: e([m]),
 						children: t.timestamp
 					}),
-					/* @__PURE__ */ r("span", {
+					/* @__PURE__ */ a("span", {
 						"data-slot": "level",
-						className: e([p, y[t.level]]),
+						className: e([h, x[t.level]]),
 						children: t.level
 					}),
-					/* @__PURE__ */ r("span", {
+					/* @__PURE__ */ a("span", {
 						"data-slot": "message",
-						className: e([v]),
+						className: e([b]),
 						children: t.message
 					})
 				]
-			}, n)), C.length === 0 && /* @__PURE__ */ r("div", {
+			}, n)), D.length === 0 && /* @__PURE__ */ a("div", {
 				"data-slot": "entry",
-				className: e([d]),
-				children: /* @__PURE__ */ r("span", {
+				className: e([p]),
+				children: /* @__PURE__ */ a("span", {
 					"data-slot": "message",
 					style: { color: "var(--haze-color-text-muted)" },
-					className: e([v]),
-					children: S.noLogs
+					className: e([b]),
+					children: T.noLogs
 				})
 			})]
 		})]
 	});
 }
 //#endregion
-export { x as default };
+export { C as default };

package/dist/components/OTPInput/OTPInputCore.js

@@ -36,6 +36,7 @@ function l({ length: l = 6, value: u, onChange: d, className: f, ref: p }) {
 			},
 			type: "text",
 			inputMode: "numeric",
+			autoComplete: "one-time-code",
 			maxLength: 1,
 			"aria-label": n(h.digitLabel, {
 				index: r + 1,