@mortenbrudvik/waveui 0.8.0 → 0.10.0

package/dist/components/input/Option.mjs

@@ -1,21 +1,23 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
-import { composeEventHandlers as t } from "../../lib/composeEventHandlers.mjs";
-import { optionClassNames as n, optionGroupClassNames as r } from "../../lib/classNames.mjs";
-import { useId as i } from "../../hooks/useId.mjs";
-import { useMergedRefs as a } from "../../hooks/useMergedRefs.mjs";
-import { useDismiss as o } from "../../hooks/useDismiss.mjs";
-import { Portal as s } from "../portal/Portal.mjs";
-import { forcedColors as c } from "../../lib/styles.mjs";
-import { CheckIcon as l } from "../../lib/icons.mjs";
-import { ListboxContext as u, markListboxElement as d, useListboxOption as f } from "../../hooks/useListbox.mjs";
-import { usePopupPosition as p } from "../../hooks/usePopupPosition.mjs";
-import * as m from "react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { hasWarned as t, isDev as n, warnOnce as r } from "../../lib/dev.mjs";
+import { materialiseSlotContent as i, renderSlot as a, slotRendersContent as o } from "../../lib/slot.mjs";
+import { composeEventHandlers as s } from "../../lib/composeEventHandlers.mjs";
+import { listboxSurfaceClassNames as c, optionClassNames as l, optionGroupClassNames as u } from "../../lib/classNames.mjs";
+import { useId as d } from "../../hooks/useId.mjs";
+import { useMergedRefs as f } from "../../hooks/useMergedRefs.mjs";
+import { ListboxContext as p, markListboxElement as m, useListboxOption as h } from "../../hooks/useListbox.mjs";
+import { useDismiss as g } from "../../hooks/useDismiss.mjs";
+import { Portal as _ } from "../portal/Portal.mjs";
+import { forcedColors as v } from "../../lib/styles.mjs";
+import { CheckIcon as y } from "../../lib/icons.mjs";
+import { usePopupPosition as b } from "../../hooks/usePopupPosition.mjs";
+import * as x from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/input/Option.tsx
-var v = m.createContext(!0);
-v.displayName = "OptionCheckContext";
-var y = e("flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground", "bg-(--option-bg) [--option-bg:transparent]", "not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]", "data-[selected]:[--option-bg:var(--wave-subtle-selected)]", "data-[active]:[--option-bg:var(--wave-subtle-hover)]", "data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring", "aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground"), b = class {
+var T = x.createContext(!0);
+T.displayName = "OptionCheckContext";
+var E = e("flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground", "bg-(--option-bg) [--option-bg:transparent]", "not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]", "data-[selected]:[--option-bg:var(--wave-subtle-selected)]", "data-[active]:[--option-bg:var(--wave-subtle-hover)]", "data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring", "aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground"), D = class {
 	counts = /* @__PURE__ */ new Map();
 	listeners = /* @__PURE__ */ new Set();
 	subscribe = (e) => (this.listeners.add(e), () => {
@@ -35,13 +37,13 @@ var y = e("flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-b
 	notify() {
 		for (let e of [...this.listeners]) e();
 	}
-}, x = m.createContext([]);
-x.displayName = "OptionGroupContext";
-var S = m.createContext(!1);
-S.displayName = "OptionGroupHiddenContext";
-function C(e) {
-	let t = m.useContext(x);
-	m.useLayoutEffect(() => {
+}, O = x.createContext([]);
+O.displayName = "OptionGroupContext";
+var k = x.createContext(!1);
+k.displayName = "OptionGroupHiddenContext";
+function A(e) {
+	let t = x.useContext(O);
+	x.useLayoutEffect(() => {
 		if (t.length === 0) return;
 		let n = t.map((t) => t.add(e));
 		return () => {
@@ -49,123 +51,182 @@ function C(e) {
 		};
 	}, [t, e]);
 }
-function w(r) {
-	let { value: i, label: a, textValue: o, disabled: s = !1, hidden: u = !1, className: d, children: p, onClick: h, onPointerMove: b, ref: x, ...w } = r, T = m.useContext(v), E = m.useContext(S), { selected: D, optionProps: O } = f({
-		value: i,
-		label: a,
-		textValue: o,
-		disabled: s,
-		hidden: u || E
-	}, x);
-	C(i);
-	let { ref: k, onClick: A, onPointerMove: j, ...M } = O;
-	return /* @__PURE__ */ _("li", {
-		"data-value": i,
-		...w,
-		...M,
-		ref: k,
-		onClick: t(h, A),
-		onPointerMove: t(b, j),
-		className: e(n.root, y, D && c.selectedContainer, d),
-		children: [T && /* @__PURE__ */ g(l, { className: e(n.checkIcon, "shrink-0", !D && "invisible") }), /* @__PURE__ */ g("span", {
-			className: e(n.content, "min-w-0 flex-1"),
-			children: p ?? i
+var j = "forced-colors:border-[GrayText] forced-colors:bg-[Canvas]", M = "forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none";
+function N(t, { selected: n, multiselect: r, disabled: i }) {
+	if (!r) {
+		let r = e(l.checkIcon, "shrink-0", !n && "invisible");
+		return t === void 0 ? /* @__PURE__ */ C(y, { className: r }) : a(t, "span", e("inline-flex", r), { "aria-hidden": !0 });
+	}
+	let o;
+	o = i ? e("border-current bg-transparent", j) : n ? e("border-primary bg-primary text-primary-foreground", v.selectedLeaf) : e("border-stroke-accessible bg-transparent", v.control);
+	let s = i ? M : void 0;
+	return /* @__PURE__ */ C("span", {
+		"aria-hidden": "true",
+		"data-wave-option-box": "",
+		className: e(l.indicator, "flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border", o),
+		children: n && (t === void 0 ? /* @__PURE__ */ C(y, {
+			size: 12,
+			className: e(l.checkIcon, s)
+		}) : a(t, "span", e(l.checkIcon, "inline-flex shrink-0", s), { "aria-hidden": !0 }))
+	});
+}
+function P(t) {
+	let { value: n, label: i, textValue: a, disabled: c = !1, hidden: u = !1, checkIcon: d, className: f, children: p, onClick: m, onMouseDown: g, onPointerMove: _, ref: y, ...b } = t, S = x.useContext(T), D = x.useContext(k), { selected: O, multiselect: j, optionProps: M } = h({
+		value: n,
+		label: i,
+		textValue: a,
+		disabled: c,
+		hidden: u || D
+	}, y);
+	A(n);
+	let { ref: P, onClick: F, onMouseDown: I, onPointerMove: L, ...R } = M, z = d != null && o(d), B = d != null && !z;
+	return x.useEffect(() => {
+		B && r("Option:checkIcon-empty", "Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.");
+	}, [B]), /* @__PURE__ */ w("li", {
+		"data-value": n,
+		...b,
+		...R,
+		ref: P,
+		onClick: s(m, F),
+		onMouseDown: s(g, I),
+		onPointerMove: s(_, L),
+		className: e(l.root, E, O && !(j && S) && v.selectedContainer, f),
+		children: [S && N(z ? d : void 0, {
+			selected: O,
+			multiselect: j,
+			disabled: c
+		}), /* @__PURE__ */ C("span", {
+			className: e(l.content, "min-w-0 flex-1"),
+			children: p ?? n
 		})]
 	});
 }
-w.displayName = "Option";
-var T = /* @__PURE__ */ m.memo(w);
-T.displayName = "Option";
-var E = /* @__PURE__ */ d(T, "option");
-function D({ label: t, className: n, children: a, hidden: o, ref: s, ...c }) {
-	let l = i("option-group"), d = m.useContext(u)?.store, f = m.useContext(x), p = m.useContext(S) || !!o, [h] = m.useState(() => new b()), v = m.useMemo(() => [...f, h], [f, h]), y = m.useCallback((e) => {
-		let t = h.subscribe(e), n = d?.subscribe(e);
+P.displayName = "Option";
+var F = /* @__PURE__ */ x.memo(P);
+F.displayName = "Option";
+var I = /* @__PURE__ */ m(F, "option"), L = 1, R = 3;
+function z(e) {
+	if (e === null) return "";
+	if (e.nodeType === R) return e.textContent ?? "";
+	if (e.nodeType !== L) return "";
+	let t = e;
+	if (t.getAttribute("aria-hidden") === "true" || t.hasAttribute("hidden")) return "";
+	let n = t.getAttribute("aria-label")?.trim();
+	if (n) return n;
+	if (t.localName === "img") return t.getAttribute("alt") ?? "";
+	let r = "";
+	for (let e of Array.from(t.childNodes)) r += z(e);
+	return r;
+}
+function B(e, t, n, r, i) {
+	return n !== void 0 && n !== r && n.trim() !== "" || t !== void 0 && t.trim() !== "" ? !0 : n === r ? typeof e == "string" || typeof e == "number" ? String(e).trim() !== "" : z(i).trim() !== "" : !1;
+}
+var V = "OptionGroup:unnamed";
+function H({ label: a, className: s, children: c, hidden: l, "aria-label": f, "aria-labelledby": m, ref: h, ...g }) {
+	let _ = d("option-group"), v = x.useContext(p)?.store, y = x.useContext(O), b = x.useContext(k) || !!l, [S] = x.useState(() => new D()), T = x.useMemo(() => [...y, S], [y, S]), E = x.useCallback((e) => {
+		let t = S.subscribe(e), n = v?.subscribe(e);
 		return () => {
 			t(), n?.();
 		};
-	}, [h, d]), C = m.useSyncExternalStore(y, () => h.allHidden(d), () => !1);
-	return /* @__PURE__ */ _("li", {
-		...c,
-		ref: s,
+	}, [S, v]), A = x.useSyncExternalStore(E, () => S.allHidden(v), () => !1), j = o(a), M = m ?? (f === void 0 && j ? _ : void 0), N = x.useRef(null);
+	return x.useEffect(() => {
+		n && !t(V) && (B(a, f, M, _, N.current) || r(V, "OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`."));
+	}, [
+		a,
+		f,
+		M,
+		_
+	]), /* @__PURE__ */ w("li", {
+		...g,
+		ref: h,
 		role: "presentation",
-		hidden: o || C || void 0,
-		className: e(r.root, n),
-		children: [/* @__PURE__ */ g("div", {
-			id: l,
+		hidden: l || A || void 0,
+		className: e(u.root, s),
+		children: [j && /* @__PURE__ */ C("div", {
+			ref: N,
+			id: _,
 			role: "presentation",
-			className: e(r.label, "px-3 py-1 text-caption-1 font-semibold text-muted-foreground"),
-			children: t
-		}), /* @__PURE__ */ g("ul", {
+			className: e(u.label, "px-3 py-1 text-caption-1 font-semibold text-muted-foreground"),
+			children: i(a)
+		}), /* @__PURE__ */ C("ul", {
 			role: "group",
-			"aria-labelledby": l,
-			className: r.list,
-			children: /* @__PURE__ */ g(S.Provider, {
-				value: p,
-				children: /* @__PURE__ */ g(x.Provider, {
-					value: v,
-					children: a
+			"aria-label": f,
+			"aria-labelledby": M,
+			className: u.list,
+			children: /* @__PURE__ */ C(k.Provider, {
+				value: b,
+				children: /* @__PURE__ */ C(O.Provider, {
+					value: T,
+					children: c
 				})
 			})
 		})]
 	});
 }
-D.displayName = "OptionGroup";
-var O = /* @__PURE__ */ d(D, "group");
-function k(e) {
-	let { open: t, surfaceOpen: n, onDismiss: r, rootRef: i, anchorRef: s } = e, c = m.useRef(null), { setReference: l, setFloating: u, floatingProps: d } = p({
+H.displayName = "OptionGroup";
+var U = /* @__PURE__ */ m(H, "group");
+function W({ value: e, children: t }) {
+	return /* @__PURE__ */ C(p.Provider, {
+		value: e,
+		children: t
+	});
+}
+W.displayName = "ListboxProvider";
+function G(e) {
+	let { open: t, surfaceOpen: n, onDismiss: r, rootRef: i, anchorRef: a } = e, o = x.useRef(null), { setReference: s, setFloating: c, floatingProps: l } = b({
 		open: n,
 		side: "bottom",
 		align: "start",
 		matchReferenceWidth: !0,
 		fitViewport: !0
-	}), { layerId: f } = o({
+	}), { layerId: u } = g({
 		open: t,
 		onDismiss: (e) => r(e),
-		refs: [i, c],
-		anchorRef: s,
+		refs: [i, o],
+		anchorRef: a,
 		kind: "listbox",
 		escape: n,
 		focusOutside: !0
 	});
 	return {
-		layerId: f,
-		setReference: l,
-		surfaceRef: a(c, u),
-		floatingProps: d
+		layerId: u,
+		setReference: s,
+		surfaceRef: f(o, c),
+		floatingProps: l
 	};
 }
-function A(e) {
+function K(e) {
 	e.preventDefault();
 }
-function j(t) {
-	let { listbox: n, layerId: r, surfaceRef: i, floatingProps: a, open: o, expanded: c, emptyContent: l, "aria-label": d, "aria-labelledby": f, showCheck: p = !0, listboxClassName: m, surfaceClassName: y, children: b } = t, x = /* @__PURE__ */ g(v.Provider, {
-		value: p,
-		children: /* @__PURE__ */ g(u.Provider, {
+function q(t) {
+	let { listbox: n, layerId: r, surfaceRef: i, floatingProps: a, open: o, expanded: s, emptyContent: l, "aria-label": u, "aria-labelledby": d, showCheck: f = !0, listClassName: p, surfaceClassName: m, children: h } = t, g = /* @__PURE__ */ C(T.Provider, {
+		value: f,
+		children: /* @__PURE__ */ C(W, {
 			value: n.context,
-			children: /* @__PURE__ */ g("ul", {
+			children: /* @__PURE__ */ C("ul", {
 				...n.getListboxProps(),
-				"aria-label": d,
-				"aria-labelledby": f,
-				hidden: !c || void 0,
-				className: e(m, "min-h-0 max-h-60 overflow-auto"),
-				children: b
+				"aria-label": u,
+				"aria-labelledby": d,
+				hidden: !s || void 0,
+				className: e(c.list, "min-h-0 max-h-60 overflow-auto", p),
+				children: h
 			})
 		})
 	});
-	return !c && (!o || c || l == null) ? x : /* @__PURE__ */ _(h, { children: [!c && x, /* @__PURE__ */ g(s, {
+	return !s && (!o || s || l == null) ? g : /* @__PURE__ */ w(S, { children: [!s && g, /* @__PURE__ */ C(_, {
 		layerId: r,
-		children: /* @__PURE__ */ g("div", {
+		children: /* @__PURE__ */ C("div", {
 			ref: i,
 			...a,
 			"data-wave-listbox-surface": "",
-			onMouseDown: A,
-			className: e(y, "flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4"),
-			children: c ? x : l
+			onMouseDown: K,
+			className: e(c.root, "flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4", m),
+			children: s ? g : l
 		})
 	})] });
 }
-j.displayName = "ListboxSurface";
+q.displayName = "ListboxSurface";
 //#endregion
-export { j as ListboxSurface, E as Option, O as OptionGroup, k as useListboxPopup };
+export { W as ListboxProvider, q as ListboxSurface, I as Option, U as OptionGroup, G as useListboxPopup };
 
 //# sourceMappingURL=Option.mjs.map

package/dist/components/input/Option.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Option.mjs","names":["useId","_Fragment","useId$1","React","OptionCheckContext","OPTION_CLASSES","cn","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","OptionImpl","rest","props","showCheck","groupHidden","useListboxOption","hidden","ref","optionRef","selectOption","highlightOption","optionAttributes","optionProps","composeEventHandlers","onClick","onPointerMove","optionClassNames","selected","forcedColors","className","CheckIcon","children","MemoOption","Option","OptionGroupImpl","labelId","ListboxContext","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","optionGroupClassNames","label","OptionGroup","useListboxPopup","options","surfaceElementRef","usePopupPosition","surfaceOpen","useDismiss","onDismiss","reason","rootRef","useMergedRefs","setFloating","preventMouseDown","ListboxSurface","ariaLabel","ariaLabelledBy","list","listbox","expanded","listboxClassName","emptyContent","Fragment","Portal","surfaceRef","floatingProps","surfaceClassName"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { optionClassNames, optionGroupClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { CheckIcon } from '../../lib/icons';\nimport { forcedColors } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the Option component used within Combobox and Dropdown. */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays visible but is skipped by keyboard navigation and\n   * cannot be selected.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    className,\n    children,\n    onClick,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(\n        optionClassNames.root,\n        OPTION_CLASSES,\n        selected && forcedColors.selectedContainer,\n        className,\n      )}\n    >\n      {showCheck && (\n        <CheckIcon\n          className={cn(optionClassNames.checkIcon, 'shrink-0', !selected && 'invisible')}\n        />\n      )}\n      <span className={cn(optionClassNames.content, 'min-w-0 flex-1')}>{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a `Combobox`, `Dropdown` (and `TagPicker`'s generated list). Renders\n * `<li role=\"option\">` with a stable id (`aria-activedescendant` target), `aria-selected`, a check\n * mark while selected and `data-active`/`data-selected`/`data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a `Combobox` or `Dropdown` only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the OptionGroup component used to group options. */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /** Heading label for the option group (names the group). */\n  label: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nfunction OptionGroupImpl({ label, className, children, hidden, ref, ...rest }: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={cn(optionGroupClassNames.root, className)}\n    >\n      <div\n        id={labelId}\n        role=\"presentation\"\n        className={cn(\n          optionGroupClassNames.label,\n          'px-3 py-1 text-caption-1 font-semibold text-muted-foreground',\n        )}\n      >\n        {label}\n      </div>\n      <ul role=\"group\" aria-labelledby={labelId} className={optionGroupClassNames.list}>\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under a heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\" aria-labelledby>` of the options. Hidden while a filter (or their own `hidden`)\n * hides all its options, also options wrapped in a component or in nested groups.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup (P05-internal, shared by Combobox, Dropdown, TagPicker) */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /** The listbox is open (dismiss layer registered: outside press, focus outside). */\n  open: boolean;\n  /**\n   * The portaled surface is shown: positioning runs and the layer takes Escape. While the listbox\n   * is open with nothing shown (no options), Escape is left to an enclosing layer (overlays#1).\n   */\n  surfaceOpen: boolean;\n  /** Close the listbox. */\n  onDismiss: (reason: DismissReason) => void;\n  /** The component root: presses and focus inside it are not \"outside\". */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /** The combobox element (the layer's anchor). */\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\n/** Result of {@link useListboxPopup}. Destructure it (react-hooks/refs). */\nexport interface ListboxPopup {\n  /** The dismiss layer id (pass to {@link ListboxSurface}). */\n  layerId: string;\n  /** Ref callback for the element the surface is positioned against. */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `data-side`, `data-align` and the position style for the surface. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a listbox surface (C-POPUPS, spec §5.4): `useDismiss` (Escape,\n * outside press, focus outside; `kind: 'listbox'`) and `usePopupPosition` (bottom-start, flip,\n * shift, the anchor's width, limited to the available space).\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): ListboxPopup {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    matchReferenceWidth: true,\n    fitViewport: true,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/** Props of {@link ListboxSurface}. */\nexport interface ListboxSurfaceProps {\n  /** The listbox (from `useListbox`). */\n  listbox: UseListboxResult;\n  /** From {@link useListboxPopup}. */\n  layerId: string;\n  surfaceRef: React.RefCallback<HTMLElement>;\n  floatingProps: ListboxPopup['floatingProps'];\n  /** The listbox is open: `emptyContent` is shown only while it is (input-pickers#21). */\n  open: boolean;\n  /** The listbox is displayed: the list renders in the portaled surface. */\n  expanded: boolean;\n  /** While open but not expanded, show the surface with this content (e.g. \"No matches\"). */\n  emptyContent?: React.ReactNode;\n  /** Accessible name of the listbox. */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  /** Options draw a check mark while selected. @default true */\n  showCheck?: boolean;\n  /** The host's stable class for the listbox element (its `listbox` part). */\n  listboxClassName?: string;\n  /** The host's stable class for the portaled surface (its `surface` part). */\n  surfaceClassName?: string;\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * Renders the option list in a single container at a time (spec §2.5, §5.5): inline and `hidden`\n * inside the component root while closed (registration and ids exist from the first client\n * commit), and in a `Portal` surface while expanded — never both.\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    listboxClassName,\n    surfaceClassName,\n    children,\n  } = props;\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxContext.Provider value={listbox.context}>\n        <ul\n          {...listbox.getListboxProps()}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className={cn(listboxClassName, 'min-h-0 max-h-60 overflow-auto')}\n        >\n          {children}\n        </ul>\n      </ListboxContext.Provider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className={cn(\n            surfaceClassName,\n            'flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4',\n          )}\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"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"}
+{"version":3,"file":"Option.mjs","names":["useId","_Fragment","useId$1","React","OptionCheckContext","OPTION_CLASSES","cn","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","DISABLED_BOX_FORCED_COLORS","DISABLED_GLYPH_FORCED_COLORS","renderCheck","multiselect","classes","optionClassNames","selected","glyph","CheckIcon","renderSlot","boxClasses","disabled","forcedColors","glyphClasses","OptionImpl","rest","props","showCheck","groupHidden","useListboxOption","hidden","ref","optionRef","selectOption","pressOption","highlightOption","optionAttributes","optionProps","checkIconRenders","checkIcon","slotRendersContent","checkIconEmpty","warnOnce","composeEventHandlers","onClick","onMouseDown","onPointerMove","className","children","MemoOption","Option","ELEMENT_NODE","TEXT_NODE","nameText","node","element","ownLabel","text","child","groupHasName","labelledBy","labelId","ariaLabel","label","heading","UNNAMED_GROUP_WARNING","OptionGroupImpl","ariaLabelledBy","ListboxContext","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","hasLabel","headingRef","isDev","optionGroupClassNames","materialiseSlotContent","OptionGroup","ListboxProvider","useListboxPopup","options","surfaceElementRef","usePopupPosition","surfaceOpen","useDismiss","onDismiss","reason","rootRef","useMergedRefs","setFloating","preventMouseDown","ListboxSurface","list","listbox","expanded","listboxSurfaceClassNames","listClassName","emptyContent","Fragment","Portal","surfaceRef","floatingProps","surfaceClassName"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  listboxSurfaceClassNames,\n  optionClassNames,\n  optionGroupClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent, type Slot } from '../../lib/slot';\nimport { forcedColors } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxContextValue,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link Option}, an option of a listbox (Listbox, Combobox, Dropdown or a custom\n * picker's list).\n */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays in the list but can never be selected (a click, Enter\n   * and Space do nothing). Keyboard navigation and typeahead skip it, unless the listbox keeps\n   * disabled options focusable (`disabledOptionsFocusable`), where they reach it. It is drawn in\n   * the muted text colour, its check included: in a multi-select list the checkbox square takes\n   * that colour instead of the brand colour, checked or not.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Replaces the check glyph that marks the option while it is selected (decorative,\n   * `aria-hidden`); in a multi-select list the glyph is drawn inside the option's 16px checkbox\n   * square. The check is a required indicator, the sign of the selection that does not rely on\n   * colour: `null` and `undefined` keep the default glyph, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `Combobox.expandIcon`, a value that renders nothing does not hide the indicator (Fluent's\n   * `checkIcon={null}` removes it).\n   * @default a check mark\n   */\n  checkIcon?: Slot<'span'>;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\n/*\n * Forced colours of a disabled option's box, as Checkbox draws a disabled box: GrayText on Canvas\n * for the square and its glyph, without the Highlight background of `forcedColors.selectedLeaf`.\n */\nconst DISABLED_BOX_FORCED_COLORS = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst DISABLED_GLYPH_FORCED_COLORS =\n  'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** What the check column of an option draws (see {@link renderCheck}). */\ninterface CheckState {\n  selected: boolean;\n  multiselect: boolean;\n  disabled: boolean;\n}\n\n/**\n * The check column of an option. Single-select: the check glyph, kept in its place but not drawn\n * while the option is not selected, so the option texts line up. Multi-select: a 16px checkbox\n * square in Checkbox's colours, with the glyph inside only while selected; as a leaf indicator it\n * takes `forcedColors.selectedLeaf` while checked. A disabled option's square follows the row, as\n * the single-select glyph does: its muted text colour draws the square and the glyph, in place of\n * the brand colour. `glyph` is the consumer's `checkIcon` when it renders content, else\n * `undefined` for the default glyph.\n */\nfunction renderCheck(\n  glyph: Slot<'span'> | undefined,\n  { selected, multiselect, disabled }: CheckState,\n): React.ReactNode {\n  if (!multiselect) {\n    const classes = cn(optionClassNames.checkIcon, 'shrink-0', !selected && 'invisible');\n    return glyph === undefined ? (\n      <CheckIcon className={classes} />\n    ) : (\n      renderSlot(glyph, 'span', cn('inline-flex', classes), { 'aria-hidden': true })\n    );\n  }\n  // One class set per state, so a disabled box never carries the brand classes it replaces.\n  let boxClasses: string;\n  if (disabled) {\n    boxClasses = cn('border-current bg-transparent', DISABLED_BOX_FORCED_COLORS);\n  } else if (selected) {\n    boxClasses = cn('border-primary bg-primary text-primary-foreground', forcedColors.selectedLeaf);\n  } else {\n    boxClasses = cn('border-stroke-accessible bg-transparent', forcedColors.control);\n  }\n  const glyphClasses = disabled ? DISABLED_GLYPH_FORCED_COLORS : undefined;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-wave-option-box=\"\"\n      className={cn(\n        optionClassNames.indicator,\n        'flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border',\n        boxClasses,\n      )}\n    >\n      {selected &&\n        (glyph === undefined ? (\n          <CheckIcon size={12} className={cn(optionClassNames.checkIcon, glyphClasses)} />\n        ) : (\n          renderSlot(\n            glyph,\n            'span',\n            cn(optionClassNames.checkIcon, 'inline-flex shrink-0', glyphClasses),\n            {\n              'aria-hidden': true,\n            },\n          )\n        ))}\n    </span>\n  );\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    checkIcon,\n    className,\n    children,\n    onClick,\n    onMouseDown,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, multiselect, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    // Standalone mode only: the pointer press that focuses the list.\n    onMouseDown: pressOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  // The check is a required indicator (C-SLOTS): a `checkIcon` that renders nothing keeps the\n  // default glyph and warns once.\n  const checkIconRenders = checkIcon != null && slotRendersContent(checkIcon);\n  const checkIconEmpty = checkIcon != null && !checkIconRenders;\n  React.useEffect(() => {\n    if (checkIconEmpty) {\n      warnOnce(\n        'Option:checkIcon-empty',\n        'Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.',\n      );\n    }\n  }, [checkIconEmpty]);\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onMouseDown={composeEventHandlers(onMouseDown, pressOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(\n        optionClassNames.root,\n        OPTION_CLASSES,\n        // While a multi-select option draws its box, the box carries the state, and\n        // `forcedColors.selectedContainer` would draw every selected option like the active one.\n        selected && !(multiselect && showCheck) && forcedColors.selectedContainer,\n        className,\n      )}\n    >\n      {showCheck &&\n        renderCheck(checkIconRenders ? checkIcon : undefined, { selected, multiselect, disabled })}\n      <span className={cn(optionClassNames.content, 'min-w-0 flex-1')}>{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a listbox: a `Listbox`, `Combobox` or `Dropdown` (and `TagPicker`'s generated\n * list), or a custom picker's list, rendered through `ListboxSurface` or under a\n * `ListboxProvider`. Renders `<li role=\"option\">` with a stable id (`aria-activedescendant`\n * target), `aria-selected`, a check mark while selected (`checkIcon` replaces it; in a\n * multi-select list it sits in a checkbox square) and `data-active`/`data-selected`/\n * `data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a listbox only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link OptionGroup}. `aria-label` and `aria-labelledby` go to the group's\n * `role=\"group\"` list; the other props go to its `<li role=\"presentation\">` item.\n */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /**\n   * The group's heading, which names the group. Keep it text (an icon next to the text is fine): a\n   * label cannot be interactive, since nothing in it is reachable inside a listbox. Without a\n   * label no heading renders; name the group with `aria-label` or `aria-labelledby` then. A group\n   * without a name logs a development warning.\n   */\n  label?: React.ReactNode;\n  /**\n   * Names the group's list in place of the label (the heading still shows). A prop that holds\n   * `undefined`, as from a wrapper that forwards it, leaves the label in charge.\n   */\n  'aria-label'?: string;\n  /**\n   * Ids of the elements that name the group's list, in place of the label (the heading still\n   * shows). A prop that holds `undefined` leaves the label in charge.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nconst ELEMENT_NODE = 1;\nconst TEXT_NODE = 3;\n\n/**\n * The text a heading gives the name of its group, for the development check of `OptionGroup`: its\n * text without `aria-hidden` or `hidden` parts, where an element's `aria-label` or an image's `alt`\n * stands for its content.\n */\nfunction nameText(node: Node | null): string {\n  if (node === null) return '';\n  if (node.nodeType === TEXT_NODE) return node.textContent ?? '';\n  if (node.nodeType !== ELEMENT_NODE) return '';\n  const element = node as Element;\n  if (element.getAttribute('aria-hidden') === 'true' || element.hasAttribute('hidden')) return '';\n  const ownLabel = element.getAttribute('aria-label')?.trim();\n  if (ownLabel) return ownLabel;\n  if (element.localName === 'img') return element.getAttribute('alt') ?? '';\n  let text = '';\n  for (const child of Array.from(element.childNodes)) text += nameText(child);\n  return text;\n}\n\n/**\n * Whether a group's list has a name, for the development check of `OptionGroup`, in the order the\n * name is computed: a consumer `aria-labelledby` that is not blank (its presence counts; the\n * elements it names are not read), else a non-blank `aria-label`, else the heading that labels the\n * list. A string or number label is its own text; only an element label is read from the rendered\n * heading ({@link nameText}).\n */\nfunction groupHasName(\n  label: React.ReactNode,\n  ariaLabel: string | undefined,\n  labelledBy: string | undefined,\n  labelId: string,\n  heading: HTMLElement | null,\n): boolean {\n  if (labelledBy !== undefined && labelledBy !== labelId && labelledBy.trim() !== '') return true;\n  if (ariaLabel !== undefined && ariaLabel.trim() !== '') return true;\n  if (labelledBy !== labelId) return false;\n  if (typeof label === 'string' || typeof label === 'number') return String(label).trim() !== '';\n  return nameText(heading).trim() !== '';\n}\n\nconst UNNAMED_GROUP_WARNING = 'OptionGroup:unnamed';\n\nfunction OptionGroupImpl({\n  label,\n  className,\n  children,\n  hidden,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ref,\n  ...rest\n}: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  // The heading renders only for a label that renders content, so the list never points at an\n  // empty heading. A consumer name wins over the heading; a prop that holds `undefined` (a wrapper\n  // forwarding it) is no name of the consumer's.\n  const hasLabel = slotRendersContent(label);\n  const labelledBy = ariaLabelledBy ?? (ariaLabel === undefined && hasLabel ? labelId : undefined);\n\n  // C-DEV: warn once when nothing names the group, checked again whenever the label, the\n  // consumer `aria-label` or the resolved `aria-labelledby` changes.\n  const headingRef = React.useRef<HTMLDivElement | null>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(UNNAMED_GROUP_WARNING)) return;\n    if (groupHasName(label, ariaLabel, labelledBy, labelId, headingRef.current)) return;\n    warnOnce(\n      UNNAMED_GROUP_WARNING,\n      'OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`.',\n    );\n  }, [label, ariaLabel, labelledBy, labelId]);\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={cn(optionGroupClassNames.root, className)}\n    >\n      {hasLabel && (\n        <div\n          ref={headingRef}\n          id={labelId}\n          role=\"presentation\"\n          className={cn(\n            optionGroupClassNames.label,\n            'px-3 py-1 text-caption-1 font-semibold text-muted-foreground',\n          )}\n        >\n          {materialiseSlotContent(label)}\n        </div>\n      )}\n      <ul\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={labelledBy}\n        className={optionGroupClassNames.list}\n      >\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under an optional heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\">` of the options, named by the heading (`label`) or by your `aria-label` or\n * `aria-labelledby`, which win over it. Hidden while a filter (or their own `hidden`) hides all\n * its options, also options wrapped in a component or in nested groups. Use it inside a listbox,\n * as `Option`.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  ListboxProvider                                                    */\n/* ------------------------------------------------------------------ */\n\n/** Props of {@link ListboxProvider}. */\nexport interface ListboxProviderProps {\n  /** The context of a listbox: `useListbox(...).context`. */\n  value: ListboxContextValue;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\n/**\n * Provides a listbox's context to its options, for a custom picker that renders its list without\n * `ListboxSurface`: `<ListboxProvider value={listbox.context}><ul {...listbox.getListboxProps()}>…</ul></ListboxProvider>`.\n */\nexport function ListboxProvider({ value, children }: ListboxProviderProps) {\n  return <ListboxContext.Provider value={value}>{children}</ListboxContext.Provider>;\n}\nListboxProvider.displayName = 'ListboxProvider';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup: useListboxPopup and ListboxSurface                  */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /**\n   * The listbox is open (your open state). While it is, a press outside your picker and its\n   * surface, and focus leaving them, dismiss it.\n   */\n  open: boolean;\n  /**\n   * The surface is shown (the list, or the empty content of {@link ListboxSurface}): it is\n   * positioned, and Escape dismisses it. While the listbox is open with nothing shown (no options\n   * to show), Escape is left to an enclosing layer, such as a Dialog around the picker.\n   */\n  surfaceOpen: boolean;\n  /**\n   * Called when the popup should close: set your open state to `false`. `reason` is `'escape'`,\n   * `'outside-press'` or `'focus-outside'`.\n   */\n  onDismiss: (reason: DismissReason) => void;\n  /** Your picker's root element: presses and focus inside it are not outside the popup. */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /**\n   * The combobox element, which anchors the popup's dismiss layer. Pass the element to\n   * `setReference` too (merged into its ref), which places the surface against it.\n   */\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\n/**\n * Result of {@link useListboxPopup}. Destructure it: `eslint-plugin-react-hooks` treats an object\n * with a member passed to a `ref` prop as a ref, and rejects reading its other members during\n * render (`react-hooks/refs`).\n */\nexport interface UseListboxPopupResult {\n  /** The popup's dismiss layer: pass it to {@link ListboxSurface}. */\n  layerId: string;\n  /**\n   * Ref callback for the element the surface is placed against: merge it into your combobox's ref.\n   */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface: pass it to {@link ListboxSurface}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** The surface's `data-side`, `data-align` and position style: pass them to {@link ListboxSurface}. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a custom picker's listbox popup, for {@link ListboxSurface}. The\n * popup is dismissed by Escape, by a press outside your picker and its surface, and by focus\n * leaving them (`onDismiss` says which). The surface opens below the anchor and as wide as it,\n * flips above it when there is no room below, and is limited to the space available; its\n * `data-side` and `data-align` attributes give the final placement.\n *\n * While the listbox is open with nothing to show (`surfaceOpen` is `false`), Escape is left to an\n * enclosing layer, such as a Dialog around the picker. Let your combobox's key handler leave it\n * too: on such an Escape, set your open state to `false` without calling `listbox.onKeyDown`,\n * which handles Escape (and prevents its default) whenever the listbox is open. Do so only when\n * `!event.nativeEvent.isComposing`, as Dropdown, Combobox and TagPicker do: an Escape that only\n * cancels an IME composition must not close the listbox, and `listbox.onKeyDown` ignores such\n * keys too.\n *\n * @example\n * const expanded = open && listbox.items.length > 0;\n * const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n *   open,\n *   surfaceOpen: expanded,\n *   onDismiss: () => setOpen(false),\n *   rootRef,\n *   anchorRef: buttonRef,\n * });\n * const buttonMergedRef = useMergedRefs(buttonRef, setReference);\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): UseListboxPopupResult {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    matchReferenceWidth: true,\n    fitViewport: true,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/**\n * Props of {@link ListboxSurface}. The options of one listbox live in one list at a time, and this\n * surface renders that list: render every option of the listbox inside it, never in a second list\n * of your own, not even for an exit animation.\n */\nexport interface ListboxSurfaceProps {\n  /** The listbox: the result of `useListbox` in select-only or editable mode. */\n  listbox: UseListboxResult;\n  /** `layerId` from {@link useListboxPopup}: the surface joins the popup's dismiss layer. */\n  layerId: string;\n  /** `surfaceRef` from {@link useListboxPopup}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `floatingProps` from {@link useListboxPopup}: the surface's placement. */\n  floatingProps: UseListboxPopupResult['floatingProps'];\n  /** The listbox is open (your open state). `emptyContent` shows only while it is. */\n  open: boolean;\n  /**\n   * The list is shown: the listbox is open and has options to show (`open &&\n   * listbox.items.length > 0`). The list then renders in the surface, and otherwise `hidden`, in\n   * place inside your picker. Set your combobox's `aria-expanded` to this value after spreading\n   * `getComboboxProps()`, which reports `open`, so the combobox is not announced as expanded while\n   * nothing is shown.\n   */\n  expanded: boolean;\n  /**\n   * Shown in the surface while the listbox is open but not expanded, such as a \"No matches\"\n   * message. `undefined` and `null` show no surface; any other value shows one, so `false` and\n   * `''` show an empty surface.\n   */\n  emptyContent?: React.ReactNode;\n  /** Names the list. Name it with this or `aria-labelledby`, usually your picker's label. */\n  'aria-label'?: string;\n  /** Ids of the elements that name the list, usually your picker's label. */\n  'aria-labelledby'?: string;\n  /**\n   * Options draw a check while selected (in a multi-select list, a checkbox square). Turn it off\n   * for a list that never shows selected options, such as the suggestions of a tag picker.\n   * @default true\n   */\n  showCheck?: boolean;\n  /**\n   * Classes merged last onto the list: they replace the list's own classes they conflict with,\n   * its maximum height included.\n   */\n  listClassName?: string;\n  /**\n   * Classes merged last onto the surface, the popup around the list: they replace its own\n   * classes they conflict with.\n   */\n  surfaceClassName?: string;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * The option list of a custom picker and the popup it opens in: a `<ul role=\"listbox\">` with the\n * options (spread from `listbox.getListboxProps()`), rendered `hidden` in place inside your\n * picker while the list is not shown, so the options register and their ids exist from the first\n * render, and in a portaled surface placed by {@link useListboxPopup} while it is, never in both.\n * While the listbox is open with nothing to show, the surface shows `emptyContent` instead, if\n * any. A press on the surface keeps focus on your combobox. It provides the listbox's context to\n * the options, so it needs no {@link ListboxProvider}.\n *\n * @example\n * <ListboxSurface\n *   listbox={listbox}\n *   layerId={layerId}\n *   surfaceRef={surfaceRef}\n *   floatingProps={floatingProps}\n *   open={open}\n *   expanded={expanded}\n *   aria-labelledby={labelId}\n * >\n *   <Option value=\"georgia\">Georgia</Option>\n * </ListboxSurface>\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    listClassName,\n    surfaceClassName,\n    children,\n  } = props;\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxProvider value={listbox.context}>\n        <ul\n          {...listbox.getListboxProps()}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className={cn(\n            listboxSurfaceClassNames.list,\n            'min-h-0 max-h-60 overflow-auto',\n            listClassName,\n          )}\n        >\n          {children}\n        </ul>\n      </ListboxProvider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className={cn(\n            listboxSurfaceClassNames.root,\n            'flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4',\n            surfaceClassName,\n          )}\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"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"}

package/dist/components/input/Rating.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useControllable.cjs"),o=require("../../lib/direction.cjs"),s=require("../../hooks/useRovingTabIndex.cjs"),c=require("../../hooks/useMergedRefs.cjs"),l=require("../../hooks/useFieldControl.cjs"),u=require("../../lib/styles.cjs"),d=require("../../lib/icons.cjs"),f=require("../../hooks/useFormReset.cjs"),p=require("../internal/HiddenInput.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=e=>`${e} star${e===1?``:`s`}`,_={"extra-small":`h-3 w-3`,small:`h-4 w-4`,medium:`h-5 w-5`,large:`h-6 w-6`,"extra-large":`h-8 w-8`},v={"extra-small":`p-1.5`,small:`p-1`,medium:`p-0.5`,large:`p-0.5`,"extra-large":`p-0.5`};function y({filled:e,className:t}){return e?(0,h.jsx)(d.StarIcon,{className:t}):(0,h.jsx)(d.StarIcon,{className:t,fill:`none`,stroke:`currentColor`,strokeWidth:1.5})}var b=({value:e,defaultValue:d,onValueChange:b,onChange:x,max:S=5,size:C=`medium`,disabled:w=!1,name:T,required:E,form:D,labels:O,className:k,id:A,"aria-label":ee,"aria-labelledby":j,"aria-describedby":M,"aria-invalid":N,"aria-required":P,onKeyDown:F,onFocus:I,onMouseLeave:L,ref:R,...z})=>{x!==void 0&&n.warnDeprecated(`Rating`,`onChange`,`onValueChange`);let B=d??0,[V,H]=a.useControllable(e,B,e=>{b?.(e),x?.(e)}),[U,W]=m.useState(0),[G,K]=m.useState(w);G!==w&&(K(w),w&&W(0));let q=w?V:U||V,{containerProps:J,getTabIndex:Y,focusValue:X}=s.useRovingTabIndex({activeValue:V>0?String(V):null}),Z=e=>{if(e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey)return;let t;if(e.key===`Home`)t=1;else if(e.key===`End`)t=S;else if(e.key===`ArrowUp`)t=V+1;else if(e.key===`ArrowDown`)t=V-1;else{let n=o.getArrowIntent(e.key,{orientation:`horizontal`,dir:o.getDirection(e.currentTarget)});if(!n)return;t=n===`next`?V+1:V-1}e.preventDefault(),t=Math.min(t,S),!(w||t<1||t===V)&&(X(String(t)),H(t))},Q=m.useRef(null),te=c.useMergedRefs(R,J.ref,Q),ne=l.useFieldContext(),$=l.useFieldControl({id:A,"aria-label":ee,"aria-labelledby":j,"aria-describedby":M,"aria-invalid":N,"aria-required":P??E},{labelable:!1}),re=E??ne?.required??!1,ie=$[`aria-label`]===void 0&&$[`aria-labelledby`]===void 0?`Rating`:void 0;f.useFormReset(Q,()=>H(B),D);let ae=()=>{Q.current?.querySelector(`[data-roving-value][tabindex="0"]`)?.focus()},oe=_[C],se=O?.star??g;return(0,h.jsxs)(`div`,{role:`radiogroup`,"aria-label":ie,...$,"aria-disabled":w||void 0,className:t.cn(i.ratingClassNames.root,`relative inline-flex items-center gap-0.5`,w&&`pointer-events-none opacity-50`,k),...z,ref:te,"data-roving-container":``,onKeyDown:r.composeEventHandlers(F,Z),onFocus:r.composeEventHandlers(I,J.onFocus,{checkDefaultPrevented:!1}),onMouseLeave:r.composeEventHandlers(L,()=>W(0),{checkDefaultPrevented:!1}),children:[Array.from({length:S},(e,n)=>{let r=n+1,a=String(r),o=q>=r;return(0,h.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":V===r,"aria-label":se(r,S),"data-roving-value":a,tabIndex:w?-1:Y(a),disabled:w,className:t.cn(i.ratingClassNames.star,`inline-flex cursor-pointer rounded border-0 bg-transparent transition-colors motion-reduce:transition-none disabled:cursor-not-allowed`,v[C],u.focusRing,o?`text-rating`:`text-stroke-accessible`),onClick:()=>{w||H(r)},onMouseEnter:()=>{w||W(r)},children:(0,h.jsx)(y,{filled:o,className:t.cn(i.ratingClassNames.icon,oe)})},a)}),(0,h.jsx)(p.HiddenInput,{type:`radio`,name:T,form:D,disabled:w,value:V>0?String(V):``,required:re,onInvalid:ae})]})};b.displayName=`Rating`;var x={"extra-small":`text-caption-1`,small:`text-caption-1`,medium:`text-body-1`,large:`text-body-2`,"extra-large":`text-body-2`},S=(e,t,n)=>`Rating: ${n} out of ${t}`,C=(e,t)=>e===1?`1 rating`:`${t} ratings`;function w(e){if(e!==void 0)try{return Intl.getCanonicalLocales(e),e}catch{return}}var T=({value:e,max:r=5,size:a=`medium`,showValue:o=!1,count:s,compact:c=!1,locale:l,labels:u,className:d,ref:f,...p})=>{let g=_[a],v=w(l),b=l!==void 0&&v===void 0;m.useEffect(()=>{b&&n.warnOnce(`RatingDisplay:invalid-locale:${l}`,`RatingDisplay: \`locale\` "${l}" is not a valid BCP 47 language tag (use hyphens, as in "en-US"). The runtime default locale formats the value instead, so the server and the browser may render different text.`)},[b,l]);let T=new Intl.NumberFormat(v,{maximumFractionDigits:1}).format(e),E=s===void 0?void 0:new Intl.NumberFormat(v).format(s),D=(u?.rating??S)(e,r,T),O=s===void 0||E===void 0?D:`${D}, ${(u?.count??C)(s,E)}`,k=o||c||s!==void 0,A=x[a];return(0,h.jsxs)(`div`,{ref:f,role:`img`,"aria-label":O,"data-compact":c?``:void 0,className:t.cn(i.ratingDisplayClassNames.root,`inline-flex items-center gap-0.5`,d),...p,children:[c?(0,h.jsx)(`span`,{className:t.cn(i.ratingDisplayClassNames.star,`inline-flex text-rating`),children:(0,h.jsx)(y,{filled:!0,className:t.cn(i.ratingDisplayClassNames.icon,g)})}):Array.from({length:r},(n,r)=>{let a=Math.round(Math.min(1,Math.max(0,e-r))*100);if(a>0&&a<100)return(0,h.jsxs)(`span`,{className:t.cn(i.ratingDisplayClassNames.star,`relative inline-flex text-stroke-accessible`),children:[(0,h.jsx)(y,{filled:!1,className:t.cn(i.ratingDisplayClassNames.icon,g)}),(0,h.jsx)(`span`,{className:`absolute inset-y-0 start-0 flex overflow-hidden text-rating`,style:{width:`${a}%`},children:(0,h.jsx)(y,{filled:!0,className:t.cn(i.ratingDisplayClassNames.icon,g,`shrink-0`)})})]},r);let o=a===100;return(0,h.jsx)(`span`,{className:t.cn(i.ratingDisplayClassNames.star,`inline-flex`,o?`text-rating`:`text-stroke-accessible`),children:(0,h.jsx)(y,{filled:o,className:t.cn(i.ratingDisplayClassNames.icon,g)})},r)}),k&&(0,h.jsx)(`span`,{className:t.cn(i.ratingDisplayClassNames.value,`ms-1 font-semibold text-foreground`,A),children:T}),E!==void 0&&(0,h.jsxs)(`span`,{className:t.cn(i.ratingDisplayClassNames.count,`ms-1 text-muted-foreground`,A),children:[`(`,E,`)`]})]})};T.displayName=`RatingDisplay`,exports.Rating=b,exports.RatingDisplay=T;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useEventCallback.cjs"),s=require("../../hooks/useControllable.cjs"),c=require("../../lib/direction.cjs"),l=require("../../hooks/useRovingTabIndex.cjs"),u=require("../../hooks/useMergedRefs.cjs"),d=require("../../hooks/useFieldControl.cjs"),f=require("../../hooks/useFormReset.cjs"),p=require("../internal/HiddenInput.cjs"),m=require("../../lib/events.cjs"),h=require("./Rating.item.cjs");let g=require("react");g=e.__toESM(g,1);let _=require("react/jsx-runtime");var v=e=>`${e} star${e===1?``:`s`}`,y=({value:e,defaultValue:y,onValueChange:b,onChange:x,max:S=5,step:C,size:w=`medium`,color:T,iconFilled:E,iconOutline:D,disabled:O=!1,name:k,required:A,form:j,labels:M,className:N,children:P,id:F,"aria-label":I,"aria-labelledby":L,"aria-describedby":R,"aria-invalid":z,"aria-required":ee,onKeyDown:te,onFocus:ne,onMouseLeave:re,ref:ie,...ae})=>{x!==void 0&&n.warnDeprecated(`Rating`,`onChange`,`onValueChange`);let B=y??0,[V,H]=s.useControllable(e,B,e=>{b?.(e),x?.(e)}),U=C===.5?.5:1,[oe,W]=g.useState(0),[se,ce]=g.useState(O);se!==O&&(ce(O),O&&W(0));let G=O?V:oe||V,{containerProps:K,getTabIndex:q,focusValue:le}=l.useRovingTabIndex({activeValue:V>=U?String(Math.floor(V/U)*U):null}),J=e=>Math.floor(e/U)*U+U,Y=e=>Math.ceil(e/U)*U-U,ue=e=>{if(e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey||!m.isOwnEvent(e))return;let t;if(e.key===`Home`)t=U;else if(e.key===`End`)t=S;else if(e.key===`ArrowUp`)t=J(V);else if(e.key===`ArrowDown`)t=Y(V);else{let n=c.getArrowIntent(e.key,{orientation:`horizontal`,dir:c.getDirection(e.currentTarget)});if(!n)return;t=n===`next`?J(V):Y(V)}e.preventDefault(),t=Math.min(t,S),!(O||t<U||t===V)&&(le(String(t)),H(t))},X=g.useRef(null),de=u.useMergedRefs(ie,K.ref,X),fe=d.useFieldContext(),Z=d.useFieldControl({id:F,"aria-label":I,"aria-labelledby":L,"aria-describedby":R,"aria-invalid":z,"aria-required":ee??A},{labelable:!1}),pe=A??fe?.required??!1,me=Z[`aria-label`]===void 0&&Z[`aria-labelledby`]===void 0?`Rating`:void 0;f.useFormReset(X,()=>H(B),j);let he=()=>{X.current?.querySelector(`[data-roving-value][tabindex="0"]`)?.focus()},Q=o.useEventCallback(e=>{X.current?.querySelector(`[data-roving-value="${e}"]`)?.focus({preventScroll:!0})}),$=h.resolveRatingColor(T),ge=h.useStarGlyphs(`Rating`,E,D),_e=M?.star??v,{registerItem:ve,counts:ye}=h.useRatingItemRegistry(),be=r.slotRendersContent(P);h.useRatingItemChecks(ye,S,be);let xe=g.useMemo(()=>({kind:`input`,value:V,drawnValue:G,step:U,max:S,size:w,color:$,glyphs:ge,disabled:O,starLabel:_e,getTabIndex:q,choose:(e,t)=>{H(e),t&&Q(String(e))},preview:W,registerItem:ve}),[V,G,U,S,w,$,ge,O,_e,q,H,Q,ve]);return(0,_.jsxs)(`div`,{role:`radiogroup`,"aria-label":me,...Z,"aria-disabled":O||void 0,"data-color":$,className:t.cn(a.ratingClassNames.root,`relative inline-flex items-center gap-0.5`,O&&`pointer-events-none opacity-50`,N),...ae,ref:de,"data-roving-container":``,onKeyDown:i.composeEventHandlers(te,ue),onFocus:i.composeEventHandlers(ne,K.onFocus,{checkDefaultPrevented:!1}),onMouseLeave:i.composeEventHandlers(re,()=>W(0),{checkDefaultPrevented:!1}),children:[(0,_.jsx)(h.RatingContext.Provider,{value:xe,children:h.ratingItems(P,S)}),(0,_.jsx)(p.HiddenInput,{type:`radio`,name:k,form:j,disabled:O,value:V>0?String(V):``,required:pe,onInvalid:he})]})};y.displayName=`Rating`;var b={"extra-small":`text-caption-1`,small:`text-caption-1`,medium:`text-body-1`,large:`text-body-2`,"extra-large":`text-body-2`},x=(e,t,n)=>`Rating: ${n} out of ${t}`,S=(e,t)=>e===1?`1 rating`:`${t} ratings`;function C(e){if(e!==void 0)try{return Intl.getCanonicalLocales(e),e}catch{return}}var w=({value:e,max:i=5,size:o=`medium`,color:s,iconFilled:c,iconOutline:l,showValue:u=!1,count:d,compact:f=!1,locale:p,labels:m,className:v,children:y,ref:w,...T})=>{let E=C(p),D=p!==void 0&&E===void 0;g.useEffect(()=>{D&&n.warnOnce(`RatingDisplay:invalid-locale:${p}`,`RatingDisplay: \`locale\` "${p}" is not a valid BCP 47 language tag (use hyphens, as in "en-US"). The runtime default locale formats the value instead, so the server and the browser may render different text.`)},[D,p]);let O=new Intl.NumberFormat(E,{maximumFractionDigits:1}).format(e),k=d===void 0?void 0:new Intl.NumberFormat(E).format(d),A=(m?.rating??x)(e,i,O),j=d===void 0||k===void 0?A:`${A}, ${(m?.count??S)(d,k)}`,M=u||f||d!==void 0,N=b[o],P=h.resolveRatingColor(s),F=h.useStarGlyphs(`RatingDisplay`,c,l),{registerItem:I,counts:L}=h.useRatingItemRegistry(),R=!f&&r.slotRendersContent(y);h.useRatingItemChecks(L,i,R);let z=g.useMemo(()=>({...h.INERT_RATING_CONTEXT,kind:`display`,value:e,drawnValue:e,max:i,size:o,color:P,glyphs:F,registerItem:I}),[e,i,o,P,F,I]);return(0,_.jsxs)(`div`,{ref:w,role:`img`,"aria-label":j,"data-compact":f?``:void 0,"data-color":P,className:t.cn(a.ratingDisplayClassNames.root,`inline-flex items-center gap-0.5`,v),...T,children:[f?(0,_.jsx)(h.StarGlyph,{starClassName:a.ratingDisplayClassNames.star,iconClassName:a.ratingDisplayClassNames.icon,fraction:1,size:o,color:P,glyphs:F}):(0,_.jsx)(h.RatingContext.Provider,{value:z,children:h.ratingItems(y,i)}),M&&(0,_.jsx)(`span`,{className:t.cn(a.ratingDisplayClassNames.value,`ms-1 font-semibold text-foreground`,N),children:O}),k!==void 0&&(0,_.jsxs)(`span`,{className:t.cn(a.ratingDisplayClassNames.count,`ms-1 text-muted-foreground`,N),children:[`(`,k,`)`]})]})};w.displayName=`RatingDisplay`;var T=Object.assign(y,{Item:h.RatingItem}),E=Object.assign(w,{Item:h.RatingItem}),D=h.RatingItem;exports.Rating=T,exports.RatingDisplay=E,exports.RatingDisplayItem=D,exports.RatingItem=h.RatingItem;
 //# sourceMappingURL=Rating.cjs.map