haze-ui 1.34.1 → 1.35.0

package/README.md

@@ -7,6 +7,7 @@ English | [简体中文](./README-zh_CN.md)
 [![npm](https://img.shields.io/npm/v/haze-ui)](https://www.npmjs.com/package/haze-ui)
 [![downloads](https://img.shields.io/npm/dm/haze-ui.svg)](https://www.npmjs.com/package/haze-ui)
 [![CI](https://github.com/wmzy/haze-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/wmzy/haze-ui/actions/workflows/ci.yml)
+[![Scorecard](https://api.scorecard.dev/projects/github.com/wmzy/haze-ui/badge)](https://scorecard.dev/viewer/?uri=github.com/wmzy/haze-ui)
 
 haze-ui is a React 19 component library styled with Linaria (zero-runtime
 CSS-in-JS) against `--haze-*` design tokens: 148 components in 9 groups,
@@ -97,6 +98,11 @@ with no polyfills or fallbacks — the same four engines are the hard CSS floor.
   powered by [react-use-control](https://github.com/wmzy/react-use-control);
   no `defaultXxx`/`xxx` dual API to keep in sync.
   → [Getting started](https://wmzy.github.io/haze-ui/getting-started)
+- **Curated icons, zero cost** — `haze-ui/icons` re-exports the ~100 most
+  common [lucide-react](https://lucide.dev) glyphs to pair with the `Icon`
+  component, plus the matching `hazeIconSize` scale; `lucide-react` is a
+  regular dependency with `sideEffects: false`, so unused icons — or the
+  whole set — tree-shake away.
 - **AI / chat component family** — `ChatContainer`, `ChatMessage`,
   `StreamingText`, `ToolCallCard`, `ThinkingIndicator` and `ChatInput` cover
   the agent chat surface; `Plan`, `Queue`, `InlineCitation` and the
@@ -107,6 +113,14 @@ with no polyfills or fallbacks — the same four engines are the hard CSS floor.
 - **React Compiler verified** — the whole suite runs green with
   babel-plugin-react-compiler enabled (`pnpm test:compiler`): auto-memoization
   is part of the release gate, not a hope.
+- **Runtime benchmarks** — `pnpm bench` (vitest bench, jsdom) measures pure
+  JS-side costs of the heaviest components — 1000-row DataTable render and
+  sort flips, a 5000-item VirtualList scroll window, and Select panel
+  open/close cycles. Informational numbers for trend spotting; CI runs the
+  job non-blocking.
+- **Codemod upgrade toolchain** — `pnpm codemod <transform> <path>` runs the
+  jscodeshift-powered migrations in [scripts/codemods](./scripts/codemods);
+  every future major ships a codemod for its breaking changes.
 - **Native-form ready** — value-holding components (Select, Switch, Rating,
   Slider, TagInput, OTPInput, Segmented, ColorPicker, RichTextEditor) accept
   a `name` and submit into `FormData`, so `<form action={serverAction}>`
@@ -138,12 +152,24 @@ with no polyfills or fallbacks — the same four engines are the hard CSS floor.
 Every styled export is also installable through the shadcn CLI as a thin
 wrapper over the npm package — see [registry/README.md](./registry/README.md).
 
+## Release channels
+
+| Channel | Install | Version shape | Who it's for |
+| --- | --- | --- | --- |
+| stable (`latest`) | `npm i haze-ui` | `1.34.1` | Production. Cut from `main` by semantic-release whenever a relevant commit (feat/fix/perf…) lands. |
+| beta | `npm i haze-ui@beta` | `1.35.0-beta.1` | Trying upcoming changes early. Cut from the `beta` branch through semantic-release's prerelease flow — same commit analysis, changelog and GitHub Release as stable, published to the `beta` dist-tag so `latest` never moves. |
+| canary | `npm i haze-ui@canary` | `0.0.0-canary.a1b2c3d4.123` | Verifying a fix against one exact commit. Manually dispatched from any ref, stamped with the commit SHA + run number, and fully bypasses semantic-release — no commit analysis, no changelog, no git tag. |
+
+Beta vs canary in one line: **beta** is an ordered prerelease line (`x.y.z-beta.n`) that graduates to stable when its commits merge into `main`; **canary** is a disposable per-commit snapshot (`0.0.0-canary.<sha>.<run>`) that the next dispatch supersedes and nothing ever promotes.
+
 ## Community
 
 - 🐛 [Report a bug](https://github.com/wmzy/haze-ui/issues/new?template=bug_report.yml)
 - ✨ [Request a feature](https://github.com/wmzy/haze-ui/issues/new?template=feature_request.yml)
 - 📖 [Contribute to the project](./CONTRIBUTING.md)
 - 🔒 [Security policy](./SECURITY.md)
+- 🤝 [Code of Conduct](./CODE_OF_CONDUCT.md)
+- 💬 [Discussions & Q&A](https://github.com/wmzy/haze-ui/discussions)
 
 **Building with haze-ui?** We would love to feature you. Open an issue
 titled `used by: <your project>` with the project name, a link and (optionally)

package/dist/THIRD-PARTY-NOTICES.md

@@ -15,7 +15,7 @@ must be verified manually before redistribution.
 ## License summary
 
 - MIT: 103 packages
-- ISC: 19 packages
+- ISC: 20 packages
 - 0BSD: 1 package
 - BSD-3-Clause: 1 package
 - MIT AND ISC: 1 package
@@ -106,6 +106,7 @@ must be verified manually before redistribution.
 | `libphonenumber-js` | 1.13.15 | MIT | [gitlab.com/catamphetamine/libphonenumber-js](https://gitlab.com/catamphetamine/libphonenumber-js) |
 | `linkifyjs` | 4.3.3 | MIT | [github.com/nfrasser/linkifyjs](https://github.com/nfrasser/linkifyjs) |
 | `locate-path` | 5.0.0 | MIT | [github.com/sindresorhus/locate-path](https://github.com/sindresorhus/locate-path) |
+| `lucide-react` | 1.44.0 | ISC | [github.com/lucide-icons/lucide](https://github.com/lucide-icons/lucide) |
 | `orderedmap` | 2.1.1 | MIT | [github.com/marijnh/orderedmap](https://github.com/marijnh/orderedmap) |
 | `p-limit` | 2.3.0 | MIT | [github.com/sindresorhus/p-limit](https://github.com/sindresorhus/p-limit) |
 | `p-locate` | 4.1.0 | MIT | [github.com/sindresorhus/p-locate](https://github.com/sindresorhus/p-locate) |

package/dist/components/Anchor/Anchor.js

@@ -1,84 +1,103 @@
 
 "use client";
 import { classnames as e } from "../../utils/classnames.js";
+import { useAnchorSpy as t } from "../../hooks/useAnchorSpy.js";
+import { useElementSize as n } from "../../hooks/useElementSize.js";
 /* empty css                 */
-import { useEffect as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { useControl as r } from "react-use-control";
+import { useCallback as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/lib/components/Anchor/Anchor.tsx
-var i = "haze-Anchor__nav", a = "haze-Anchor__list", o = "haze-Anchor__link", s = "haze-Anchor__linkActive";
-function c({ items: c, activeId: l, onClick: u, offsetTop: d = 0, bounds: f = 5, getContainer: p, className: m, ...h }) {
-	let [g, _] = r(l, () => c[0]?.id ?? ""), v = (e) => {
+var u = "haze-Anchor__nav", d = "haze-Anchor__list", f = "haze-Anchor__sublist", p = "haze-Anchor__link", m = "haze-Anchor__linkActive", h = "haze-Anchor__linkActiveBar", g = "haze-Anchor__indicatorBar", _ = "haze-Anchor__indicatorHidden";
+function v(e) {
+	return e.flatMap((e) => {
+		let t = e.children?.length ? v(e.children) : [];
+		return [e.id, ...t];
+	});
+}
+function y({ items: y, activeId: b, onClick: x, indicator: S = !1, offsetTop: C = 0, bounds: w = 5, getContainer: T, className: E, ...D }) {
+	let O = a(() => v(y), [y]), { activeId: k, setActiveId: A } = t({
+		ids: O,
+		getContainer: T,
+		offsetTop: C,
+		bounds: w,
+		activeId: b
+	}), j = o(null), [M, N] = s(null), [P, F] = n({ enabled: S }), I = r((e) => {
+		j.current = e, P(e);
+	}, [P]), L = r(() => {
+		let e = j.current?.querySelector("a[aria-current=\"true\"]");
+		if (!e) {
+			N(null);
+			return;
+		}
+		N({
+			top: e.offsetTop,
+			height: e.offsetHeight
+		});
+	}, []);
+	i(() => {
+		S && L();
+	}, [
+		S,
+		k,
+		y,
+		F,
+		L
+	]);
+	let R = (e) => {
 		let t = document.getElementById(e);
 		if (!t) return;
-		let n = p?.() ?? window;
+		let n = T?.() ?? window;
 		if (n instanceof HTMLElement) {
-			n.scrollTop = t.getBoundingClientRect().top - n.getBoundingClientRect().top + n.scrollTop - d;
+			n.scrollTop = t.getBoundingClientRect().top - n.getBoundingClientRect().top + n.scrollTop - C;
 			return;
 		}
 		n.scrollTo({
-			top: t.getBoundingClientRect().top + window.scrollY - d,
+			top: t.getBoundingClientRect().top + window.scrollY - C,
 			behavior: "smooth"
 		});
+	}, z = (t) => {
+		let n = k === t.id;
+		return /* @__PURE__ */ l("li", {
+			"data-slot": "item",
+			children: [/* @__PURE__ */ c("a", {
+				"data-slot": "link",
+				href: `#${t.id}`,
+				"aria-current": n ? "true" : void 0,
+				onClick: (e) => {
+					e.preventDefault(), A(t.id), x?.(t.id), R(t.id);
+				},
+				className: e([
+					p,
+					n && m,
+					n && !S && h
+				]),
+				children: t.label
+			}), t.children?.length ? /* @__PURE__ */ c("ul", {
+				"data-slot": "sublist",
+				className: e([f]),
+				children: t.children.map(z)
+			}) : null]
+		}, t.id);
 	};
-	return t(() => {
-		if (typeof IntersectionObserver > "u") return;
-		let e = /* @__PURE__ */ new Set(), t = p?.() ?? window, n = new IntersectionObserver((t) => {
-			for (let n of t) n.isIntersecting ? e.add(n.target.id) : e.delete(n.target.id);
-			let n = c.find((t) => e.has(t.id));
-			n && _(n.id);
-		}, {
-			root: t instanceof HTMLElement ? t : null,
-			rootMargin: `${-d}px 0px 0px 0px`
-		});
-		for (let e of c) {
-			let t = document.getElementById(e.id);
-			t && n.observe(t);
-		}
-		return () => n.disconnect();
-	}, [
-		c,
-		d,
-		p,
-		_
-	]), t(() => {
-		if (typeof IntersectionObserver < "u") return;
-		let e = p?.() ?? window, t = e instanceof HTMLElement ? e : window, n = e instanceof HTMLElement ? e.getBoundingClientRect().top : 0, r = () => {
-			let e;
-			for (let t of c) {
-				let r = document.getElementById(t.id);
-				r && r.getBoundingClientRect().top - n <= f && (e = t.id);
-			}
-			e && _(e);
-		};
-		return t.addEventListener("scroll", r, { passive: !0 }), () => t.removeEventListener("scroll", r);
-	}, [
-		c,
-		f,
-		p,
-		_
-	]), /* @__PURE__ */ n("nav", {
+	return /* @__PURE__ */ l("nav", {
 		"data-slot": "anchor",
-		...h,
-		className: e([i, m]),
-		children: n("ul", {
+		ref: I,
+		...D,
+		className: e([u, E]),
+		children: [S ? /* @__PURE__ */ c("span", {
+			"aria-hidden": "true",
+			"data-slot": "indicator",
+			style: M === null ? void 0 : {
+				transform: `translateY(${M.top}px)`,
+				height: `${M.height}px`
+			},
+			className: e([g, M === null && _])
+		}) : null, /* @__PURE__ */ c("ul", {
 			"data-slot": "list",
-			className: e([a]),
-			children: c.map((t) => /* @__PURE__ */ n("li", {
-				"data-slot": "item",
-				children: /* @__PURE__ */ n("a", {
-					"data-slot": "link",
-					href: `#${t.id}`,
-					"aria-current": g === t.id ? "true" : void 0,
-					onClick: (e) => {
-						e.preventDefault(), _(t.id), u?.(t.id), v(t.id);
-					},
-					className: e([o, g === t.id && s]),
-					children: t.label
-				})
-			}, t.id))
-		})
+			className: e([d]),
+			children: y.map(z)
+		})]
 	});
 }
 //#endregion
-export { c as default };
+export { y as default };

package/dist/components/BackToTop/BackToTop.js

@@ -7,25 +7,31 @@ import { useCallback as n, useEffect as r, useState as i } from "react";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/lib/components/BackToTop/BackToTop.tsx
 var o = "haze-BackToTop__button", s = "haze-BackToTop__hidden";
-function c({ threshold: c = 300, children: l = "↑", className: u }) {
-	let [d, f] = i(!1), p = t("backToTop"), m = n(() => {
-		f(window.scrollY > c);
+function c({ threshold: c = 300, as: l, className: u, children: d = "↑", onClick: f, ...p }) {
+	let [m, h] = i(!1), g = t("backToTop"), _ = n(() => {
+		h(window.scrollY > c);
 	}, [c]);
-	return r(() => (window.addEventListener("scroll", m, { passive: !0 }), () => window.removeEventListener("scroll", m)), [m]), /* @__PURE__ */ a("button", {
+	r(() => (window.addEventListener("scroll", _, { passive: !0 }), () => window.removeEventListener("scroll", _)), [_]);
+	let v = () => {
+		window.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		});
+	};
+	return /* @__PURE__ */ a(l ?? "button", {
+		...l === void 0 || l === "button" ? { type: "button" } : {},
 		"data-slot": "back-to-top",
-		onClick: () => {
-			window.scrollTo({
-				top: 0,
-				behavior: "smooth"
-			});
+		"aria-label": g.label,
+		...p,
+		onClick: (e) => {
+			f?.(e), v();
 		},
-		"aria-label": p.label,
 		className: e([
 			o,
-			!d && s,
+			!m && s,
 			u
 		]),
-		children: l
+		children: d
 	});
 }
 //#endregion

package/dist/components/Combobox/Combobox.js

@@ -17,8 +17,8 @@ import { useCallback as le, useEffect as i, useId as ue, useMemo as a, useRef as
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 import { useControl as d } from "react-use-control";
 //#region src/lib/components/Combobox/Combobox.tsx
-var de = "haze-Combobox__wrapper", fe = "haze-Combobox__input", pe = "haze-Combobox__multiBox", me = "haze-Combobox__multiInput", f = "haze-Combobox__matchMark", p = "haze-Combobox__stateRow", he = "haze-Combobox__groupHeadingText", ge = "haze-Combobox__listbox", _e = "haze-Combobox__listboxVirtual", ve = 200, ye = 37, be = "haze-Combobox__virtualRow";
-function xe(t, n) {
+var de = "haze-Combobox__wrapper", fe = "haze-Combobox__input", pe = "haze-Combobox__multiBox", me = "haze-Combobox__multiInput", he = "haze-Combobox__overflowBadge", f = "haze-Combobox__matchMark", p = "haze-Combobox__stateRow", ge = "haze-Combobox__groupHeadingText", _e = "haze-Combobox__listbox", ve = "haze-Combobox__listboxVirtual", ye = 200, be = 37, xe = "haze-Combobox__virtualRow";
+function Se(t, n) {
 	if (n === "") return t;
 	let r = t.toLowerCase().indexOf(n.toLowerCase());
 	return r < 0 ? t : /* @__PURE__ */ u(c, { children: [
@@ -31,27 +31,27 @@ function xe(t, n) {
 		t.slice(r + n.length)
 	] });
 }
-function m({ value: c, open: f, options: m, children: Se, multiple: h = !1, onValuesChange: g, creatable: Ce = !1, onCreate: we, onSearch: _, loading: v = !1, empty: Te, highlightMatches: Ee = !1, maxHeight: y, placeholder: De, virtualThreshold: b = 100, virtualized: x, className: Oe, classNames: S, ref: C }) {
-	let w = ee("Combobox"), T = w.classNames ? {
-		...w.classNames,
-		...S
-	} : S, E = n("combobox"), [D, O] = d(c, h ? [] : ""), [k, ke] = s([]), [A, j] = s(""), [M, N] = d(f, !1), [P, F] = s(-1), [Ae, je] = s(A), I = ue(), L = o(null), Me = le((e) => te(L, C)(e), [L, C]), R = o(null), z = o(null), B = o(null), V = o(null), H = re({
-		open: M,
-		setOpen: N,
-		triggerRef: h ? R : L,
-		panelRef: z,
+function m({ value: c, open: f, options: m, children: Ce, multiple: h = !1, maxCount: we, maxTagCount: g, onValuesChange: _, creatable: Te = !1, onCreate: Ee, onSearch: v, loading: y = !1, empty: De, highlightMatches: Oe = !1, maxHeight: b, placeholder: ke, virtualThreshold: x = 100, virtualized: S, className: Ae, classNames: C, ref: w }) {
+	let T = ee("Combobox"), E = T.classNames ? {
+		...T.classNames,
+		...C
+	} : C, D = n("combobox"), je = n("select"), [O, k] = d(c, h ? [] : ""), [A, Me] = s([]), [j, M] = s(""), [N, P] = d(f, !1), [F, I] = s(-1), [Ne, Pe] = s(j), L = ue(), R = o(null), Fe = le((e) => te(R, w)(e), [R, w]), z = o(null), B = o(null), Ie = o(null), Le = o(null), V = re({
+		open: N,
+		setOpen: P,
+		triggerRef: h ? z : R,
+		panelRef: B,
 		animated: !0
-	}), U = Array.isArray(D) ? D : [], W = a(() => [...m ?? [], ...ce(Se)], [m, Se]), G = a(() => {
-		if (k.length === 0) return W;
-		let e = new Set(W.map((e) => e.value)), t = k.filter((t) => !e.has(t)).map((e) => ({
+	}), H = Array.isArray(O) ? O : [], U = h && we !== void 0 && H.length >= we, W = a(() => [...m ?? [], ...ce(Ce)], [m, Ce]), G = a(() => {
+		if (A.length === 0) return W;
+		let e = new Set(W.map((e) => e.value)), t = A.filter((t) => !e.has(t)).map((e) => ({
 			value: e,
 			label: e
 		}));
 		return t.length > 0 ? [...W, ...t] : W;
-	}, [W, k]), K = _ ? G : G.filter((e) => e.label.toLowerCase().includes(A.toLowerCase())), q = Ce && !v && A.trim() !== "" && K.length === 0, J = A.trim(), Ne = t(E.create, { query: J }), Y = q ? [{
+	}, [W, A]), K = v ? G : G.filter((e) => e.label.toLowerCase().includes(j.toLowerCase())), q = Te && !y && !U && j.trim() !== "" && K.length === 0, J = j.trim(), Re = t(D.create, { query: J }), Y = q ? [{
 		value: J,
 		label: J
-	}, ...K] : K, Pe = typeof x == "object" ? x : void 0, X = (x === void 0 ? void 0 : !!x) ?? (b > 0 && Y.length > b), Fe = Pe?.itemHeight ?? ye, Ie = Pe?.overscan, Le = (e) => `${I}-option-${e}`, Re = M && Y[P] ? Le(P) : void 0, Z = [];
+	}, ...K] : K, ze = typeof S == "object" ? S : void 0, X = (S === void 0 ? void 0 : !!S) ?? (x > 0 && Y.length > x), Be = ze?.itemHeight ?? be, Ve = ze?.overscan, He = (e) => `${L}-option-${e}`, Ue = N && Y[F] ? He(F) : void 0, Z = [];
 	for (let e = 0; e < Y.length; e++) {
 		let t = Y[e];
 		if (t === void 0) continue;
@@ -79,123 +79,133 @@ function m({ value: c, open: f, options: m, children: Se, multiple: h = !1, onVa
 			}]
 		});
 	}
-	let ze = Z.some((e) => e.label !== void 0);
+	let We = Z.some((e) => e.label !== void 0);
 	i(() => {
-		if (!H.shown || P < 0) return;
+		if (!V.shown || F < 0) return;
 		if (X) {
-			B.current?.scrollToIndex(P, "auto");
+			Ie.current?.scrollToIndex(F, "auto");
 			return;
 		}
-		let e = V.current;
+		let e = Le.current;
 		e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest" });
 	}, [
 		X,
-		H.shown,
-		P
+		V.shown,
+		F
 	]);
-	let Be = o(_);
+	let Ge = o(v);
 	i(() => {
-		Be.current = _;
-	}, [_]);
-	let Ve = o(A);
+		Ge.current = v;
+	}, [v]);
+	let Ke = o(j);
 	i(() => {
-		Ve.current !== A && (Ve.current = A, Be.current?.(A));
-	}, [A]), A !== Ae && (je(A), F(-1));
-	let He = (e) => h ? U.includes(e) : D === e, Ue = (e) => G.find((t) => t.value === e)?.label ?? e, We = (e, t) => {
+		Ke.current !== j && (Ke.current = j, Ge.current?.(j));
+	}, [j]), j !== Ne && (Pe(j), I(-1));
+	let qe = (e) => h ? H.includes(e) : O === e, Je = (e) => G.find((t) => t.value === e)?.label ?? String(e), Ye = (e, t) => {
 		let n = t ?? G.find((t) => t.value === e)?.label ?? String(e);
 		if (h) {
-			let t = U.includes(e) ? U.filter((t) => t !== e) : [...U, e];
-			O(t), g?.(t), j("");
-		} else O(e), g?.(e), j(n), N(!1);
-		L.current?.focus();
-	}, Ge = () => {
-		we?.(J), ke((e) => e.includes(J) ? e : [...e, J]), We(J, J);
-	}, Ke = (e) => {
+			if (U && !H.includes(e)) return;
+			let t = H.includes(e) ? H.filter((t) => t !== e) : [...H, e];
+			k(t), _?.(t), M("");
+		} else k(e), _?.(e), M(n), P(!1);
+		R.current?.focus();
+	}, Xe = () => {
+		Ee?.(J), Me((e) => e.includes(J) ? e : [...e, J]), Ye(J, J);
+	}, Ze = (e) => {
 		if (q && e === J) {
-			Ge();
+			Xe();
 			return;
 		}
-		G.find((t) => t.value === e)?.disabled || We(e);
-	}, qe = (e) => {
-		if (e.key === "ArrowDown") e.preventDefault(), N(!0), F((e) => Math.min(e + 1, Y.length - 1));
-		else if (e.key === "ArrowUp") e.preventDefault(), N(!0), F((e) => Math.max(e - 1, 0));
-		else if (e.key === "Enter" && P >= 0 && Y[P]) e.preventDefault(), Ke(Y[P].value);
-		else if (e.key === "Escape") N(!1);
-		else if (e.key === "Backspace" && h && A === "" && U.length > 0) {
+		G.find((t) => t.value === e)?.disabled || Ye(e);
+	}, Qe = (e) => {
+		if (e.key === "ArrowDown") e.preventDefault(), P(!0), I((e) => Math.min(e + 1, Y.length - 1));
+		else if (e.key === "ArrowUp") e.preventDefault(), P(!0), I((e) => Math.max(e - 1, 0));
+		else if (e.key === "Enter" && F >= 0 && Y[F]) e.preventDefault(), Ze(Y[F].value);
+		else if (e.key === "Escape") P(!1);
+		else if (e.key === "Backspace" && h && j === "" && H.length > 0) {
 			e.preventDefault();
-			let t = U.slice(0, -1);
-			O(t), g?.(t);
+			let t = H.slice(0, -1);
+			k(t), _?.(t);
 		}
 	}, Q = (t, n, r) => /* @__PURE__ */ l(se, {
-		ref: !r && n === P ? V : void 0,
+		ref: !r && n === F ? Le : void 0,
 		value: t.value,
-		disabled: t.disabled === !0,
-		id: Le(n),
+		disabled: t.disabled === !0 || h && U && !qe(t.value),
+		id: He(n),
 		setSize: Y.length,
 		posInSet: n + 1,
-		highlighted: n === P,
-		selected: He(t.value),
-		onSelect: Ke,
-		className: e([r && be, T?.item]),
-		children: q && n === 0 ? Ne : Ee ? xe(t.label, A) : t.label
+		highlighted: n === F,
+		selected: qe(t.value),
+		onSelect: Ze,
+		className: e([r && xe, E?.item]),
+		children: q && n === 0 ? Re : Oe ? Se(t.label, j) : t.label
 	}, t.value), $ = /* @__PURE__ */ l("input", {
-		ref: Me,
+		ref: Fe,
 		"data-slot": "input",
 		role: "combobox",
-		style: h ? void 0 : H.triggerStyle,
-		"aria-expanded": M,
-		"aria-controls": I,
+		style: h ? void 0 : V.triggerStyle,
+		"aria-expanded": N,
+		"aria-controls": L,
 		"aria-autocomplete": "list",
-		"aria-activedescendant": Re,
-		"aria-busy": v || void 0,
-		value: A,
-		placeholder: De,
+		"aria-activedescendant": Ue,
+		"aria-busy": y || void 0,
+		value: j,
+		placeholder: ke,
 		onChange: (e) => {
-			j(e.target.value), N(!0);
+			M(e.target.value), P(!0);
 		},
-		onPointerDown: h ? void 0 : H.onTriggerPointerDown,
-		onClick: h ? void 0 : H.onTriggerClick,
-		onKeyDown: qe,
-		className: e([h ? me : fe, T?.input])
+		onPointerDown: h ? void 0 : V.onTriggerPointerDown,
+		onClick: h ? void 0 : V.onTriggerClick,
+		onKeyDown: Qe,
+		className: e([h ? me : fe, E?.input])
 	});
 	return /* @__PURE__ */ u("div", {
 		"data-slot": "combobox",
 		className: e([
 			de,
-			Oe,
-			T?.root
+			Ae,
+			E?.root
 		]),
 		children: [h ? /* @__PURE__ */ u("div", {
-			ref: R,
+			ref: z,
 			"data-slot": "trigger",
-			style: H.triggerStyle,
-			onPointerDown: H.onTriggerPointerDown,
+			style: V.triggerStyle,
+			onPointerDown: V.onTriggerPointerDown,
 			onClick: () => {
-				H.onTriggerClick(), L.current?.focus();
+				V.onTriggerClick(), R.current?.focus();
 			},
 			className: e(pe),
-			children: [U.map((e) => /* @__PURE__ */ l("span", {
-				"data-slot": "item",
-				onClick: (e) => e.stopPropagation(),
-				children: /* @__PURE__ */ l(ie, {
-					color: "primary",
-					onClose: () => {
-						let t = U.filter((t) => t !== e);
-						O(t), g?.(t);
-					},
-					children: Ue(e)
-				})
-			}, e)), $]
+			children: [
+				(g === void 0 ? H : H.slice(0, Math.max(g, 0))).map((e) => /* @__PURE__ */ l("span", {
+					"data-slot": "item",
+					onClick: (e) => e.stopPropagation(),
+					children: /* @__PURE__ */ l(ie, {
+						color: "primary",
+						onClose: () => {
+							let t = H.filter((t) => t !== e);
+							k(t), _?.(t);
+						},
+						children: Je(e)
+					})
+				}, e)),
+				g !== void 0 && H.length > Math.max(g, 0) && /* @__PURE__ */ l("span", {
+					"data-slot": "overflow-badge",
+					title: H.slice(Math.max(g, 0)).map((e) => Je(e)).join(", "),
+					className: e(he),
+					children: t(je.moreTags, { count: H.length - Math.max(g, 0) })
+				}),
+				$
+			]
 		}) : $, /* @__PURE__ */ l(ne, {
-			ref: z,
-			behavior: H,
+			ref: B,
+			behavior: V,
 			placement: "bottom-span",
-			id: I,
+			id: L,
 			role: "listbox",
 			"aria-multiselectable": h ? "true" : void 0,
-			visualClass: X ? _e : ge,
-			style: y !== void 0 && !X ? { maxHeight: `${y}px` } : void 0,
-			children: v ? /* @__PURE__ */ l("div", {
+			visualClass: X ? ve : _e,
+			style: b !== void 0 && !X ? { maxHeight: `${b}px` } : void 0,
+			children: y ? /* @__PURE__ */ l("div", {
 				role: "option",
 				"data-slot": "loading",
 				"aria-selected": !1,
@@ -207,21 +217,21 @@ function m({ value: c, open: f, options: m, children: Se, multiple: h = !1, onVa
 				"data-slot": "empty",
 				"aria-selected": !1,
 				"aria-disabled": "true",
-				className: e([p, T?.empty]),
-				children: Te ?? E.noResults
+				className: e([p, E?.empty]),
+				children: De ?? D.noResults
 			}) : X ? /* @__PURE__ */ l(ae, {
-				ref: B,
+				ref: Ie,
 				"data-virtualized": !0,
 				items: Y,
-				height: Math.min(y ?? ve, Y.length * Fe),
-				itemHeight: Fe,
-				overscan: Ie,
-				groups: ze ? Z.filter((e) => e.label !== void 0).map((t) => ({
+				height: Math.min(b ?? ye, Y.length * Be),
+				itemHeight: Be,
+				overscan: Ve,
+				groups: We ? Z.filter((e) => e.label !== void 0).map((t) => ({
 					startIndex: t.rows[0]?.index ?? 0,
 					key: t.key,
 					render: () => /* @__PURE__ */ l("div", {
 						"data-slot": "group-label",
-						className: e([he]),
+						className: e([ge]),
 						children: t.label
 					})
 				})) : void 0,

package/dist/components/CopyButton/CopyButton.js

@@ -53,29 +53,30 @@ function u(e) {
 		children: n
 	}), t[1] = e, t[2] = r), r;
 }
-function d({ value: o, getValue: d, copiedTimeout: f = 2e3, copyLabel: p = "Copy", copiedLabel: m = "Copied", variant: h = "outline", square: g = !0, size: _, classNames: v, className: y, children: b, onClick: x, ...S }) {
-	let { copied: C, copy: w } = i(f), T = t("Button"), E = _ ?? T.size ?? "md", D = a[E];
-	function O(e) {
+function d({ value: o, getValue: d, copiedTimeout: f = 2e3, copyLabel: p = "Copy", copiedLabel: m = "Copied", variant: h = "outline", square: g = !0, size: _, classNames: v, className: y, as: b, children: x, onClick: S, ...C }) {
+	let { copied: w, copy: T } = i(f), E = t("Button"), D = _ ?? E.size ?? "md", O = a[D];
+	function k(e) {
 		let t = d?.() ?? o;
-		t !== void 0 && w(t), x?.(e);
+		t !== void 0 && T(t), S?.(e);
 	}
-	let k = C ? u : l;
+	let A = w ? u : l;
 	return /* @__PURE__ */ c(n, {
 		variant: h,
 		size: _,
 		square: g,
-		"data-copied": C || void 0,
-		"aria-label": C ? m : p,
+		as: b,
+		"data-copied": w || void 0,
+		"aria-label": w ? m : p,
 		className: [
 			y,
 			v?.root,
-			C && h !== "solid" && "haze-copy-button-styles__copiedSkin"
+			w && h !== "solid" && "haze-copy-button-styles__copiedSkin"
 		].filter(Boolean).join(" ") || void 0,
-		onClick: O,
-		...S,
-		children: [typeof b == "function" ? b(C) : b ?? /* @__PURE__ */ s(k, { className: e([D, v?.icon]) }), /* @__PURE__ */ s(r, {
+		onClick: k,
+		...C,
+		children: [typeof x == "function" ? x(w) : x ?? /* @__PURE__ */ s(A, { className: e([O, v?.icon]) }), /* @__PURE__ */ s(r, {
 			role: "status",
-			children: C ? m : ""
+			children: w ? m : ""
 		})]
 	});
 }