@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/input/Rating.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.mjs","names":["React","defaultStarLabel","value","sizeMap","targetPaddingMap","Star","filled","StarIcon","Rating","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","onChange","warnDeprecated","initialValue","defaultValue","setValue","useControllable","onValueChange","next","hovered","setHovered","prevDisabled","setPrevDisabled","disabled","displayValue","useRovingTabIndex","handleKeyDown","max","intent","getArrowIntent","getDirection","focusValue","rootRef","mergedRef","useMergedRefs","ref","containerProps","field","useFieldContext","fieldProps","useFieldControl","required","isRequired","defaultName","form","focusTabStop","starSize","size","starLabel","labels","cn","className","composeEventHandlers","onKeyDown","onFocus","onMouseLeave","starValue","i","key","getTabIndex","focusRing","HiddenInput","textSizeMap","defaultRatingLabel","formattedValue","defaultCountLabel","count","formattedCount","supportedLocale","locale","RatingDisplay","formatLocale","invalidLocale","warnOnce","ratingName","name","showText","showValue","compact","textSize","percent"],"sources":["../../../src/components/input/Rating.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { StarIcon } from '../../lib/icons';\nimport { focusRing } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/**\n * The Rating's built-in star names, for localization. Each member is optional and falls back to\n * its English default.\n */\nexport interface RatingLabels {\n  /**\n   * Accessible name of the star that chooses `value` (1 to `max`).\n   * @default (value) => value === 1 ? '1 star' : `${value} stars`\n   */\n  star?: (value: number, max: number) => string;\n}\n\nconst defaultStarLabel = (value: number) => `${value} star${value !== 1 ? 's' : ''}`;\n\n/** Properties for the Rating component. */\nexport interface RatingProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** Controlled rating value (`0` = no rating). */\n  value?: number;\n  /** Initial rating for uncontrolled usage (also the value a form reset restores).\n   * @default 0\n   */\n  defaultValue?: number;\n  /** Called with the new rating when it changes (not when the current star is chosen again). */\n  onValueChange?: (value: number) => void;\n  /**\n   * Called with the new rating, exactly like `onValueChange`: only when the rating changes (0.4\n   * also called it when the current star was clicked again, or a key was pressed at an end).\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: number) => void;\n  /** Maximum number of stars.\n   * @default 5\n   */\n  max?: number;\n  /** Size of the star icons. Every size keeps a target of at least 24×24px.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Whether the rating is disabled and non-interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Form field name. With a name, the chosen rating is submitted with the form (nothing while no\n   * star is chosen).\n   */\n  name?: string;\n  /** A star must be chosen before the form can be submitted (native validation). */\n  required?: boolean;\n  /** Id of the form the rating belongs to, when it is rendered outside that form. */\n  form?: string;\n  /**\n   * Names of the stars (\"1 star\", \"2 stars\", …), for localization. The group's own name is\n   * `aria-label` (default \"Rating\"). Unset members keep their English defaults.\n   */\n  labels?: RatingLabels;\n  /** Ref to the `role=\"radiogroup\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Built-in texts of RatingDisplay, for localization. */\nexport interface RatingDisplayLabels {\n  /**\n   * Accessible name. `formattedValue` is `value` formatted with `locale` (as shown).\n   * @default (value, max, formattedValue) => `Rating: ${formattedValue} out of ${max}`\n   */\n  rating?: (value: number, max: number, formattedValue: string) => string;\n  /**\n   * Count part of the name.\n   * @default (count, formatted) => count === 1 ? '1 rating' : `${formatted} ratings`\n   */\n  count?: (count: number, formattedCount: string) => string;\n}\n\n/** Properties for the RatingDisplay (read-only) component. */\nexport interface RatingDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Rating value to display. A fraction is drawn as a partly filled star (`4.6` fills 60% of the\n   * fifth star), so the stars show the value the accessible name reports.\n   */\n  value: number;\n  /** Maximum number of stars.\n   * @default 5\n   */\n  max?: number;\n  /** Size of the star icons (and of the value and count text).\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Shows the value as text after the stars, formatted with `locale` (up to one decimal).\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * Number of ratings: shown as \"(1,160)\" after the value with the locale's digit grouping, and\n   * added to the accessible name (\"…, 1,160 ratings\").\n   */\n  count?: number;\n  /**\n   * One filled star followed by the value (and the count) instead of `max` stars. Implies\n   * `showValue`.\n   * @default false\n   */\n  compact?: boolean;\n  /**\n   * BCP 47 locale of the value and count formatting (runtime default when omitted; pass it when\n   * rendering on the server). A tag `Intl` rejects (the POSIX `de_DE`, a typo) falls back to the\n   * runtime default locale (development warning).\n   */\n  locale?: string;\n  /** Built-in texts, for localization. */\n  labels?: RatingDisplayLabels;\n  /** Ref to the root element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst sizeMap: Record<Size, string> = {\n  'extra-small': 'h-3 w-3',\n  small: 'h-4 w-4',\n  medium: 'h-5 w-5',\n  large: 'h-6 w-6',\n  'extra-large': 'h-8 w-8',\n};\n\n/** Padding that gives every interactive star a target of at least 24×24px (WCAG 2.5.8). */\nconst targetPaddingMap: Record<Size, string> = {\n  'extra-small': 'p-1.5', // 12px icon + 12px\n  small: 'p-1', // 16px icon + 8px\n  medium: 'p-0.5', // 20px icon + 4px\n  large: 'p-0.5',\n  'extra-large': 'p-0.5',\n};\n\n/** A filled star, or an outlined one (the outline keeps a 3:1 non-text contrast). */\nfunction Star({ filled, className }: { filled: boolean; className: string }) {\n  return filled ? (\n    <StarIcon className={className} />\n  ) : (\n    <StarIcon className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth={1.5} />\n  );\n}\n\n/**\n * A star rating input (`role=\"radiogroup\"` of `role=\"radio\"` stars).\n *\n * - One tab stop (the chosen star, else the first). Keys choose relative to the current rating and\n *   move focus to the chosen star, as in 0.4: Right/Up one star more, Left/Down one fewer\n *   (Left/Right mirrored under `dir=\"rtl\"`), Home/End the first/last star. From an empty rating,\n *   Right/Up/Home choose 1 star. Keys at the ends (and Left/Down while empty) emit nothing.\n * - The keyboard cannot clear a rating: Left/Down stop at 1 star (APG radio group; 0.4 went down\n *   to 0). Only a controlled `value={0}` (or a form reset while `defaultValue` is 0) clears it.\n * - `onValueChange` (and the deprecated `onChange` alias) fire only when the rating changes, so\n *   choosing the current star again calls neither.\n * - Hovering previews a value; the preview never outlives the hover or a disabled state.\n * - Inside a `Field` it is named by the Field label (instead of the default \"Rating\") and\n *   described by its hint and error. The stars are named \"1 star\", \"2 stars\", …; `labels`\n *   localizes these names.\n * - With `name` (or `required`) it takes part in native forms; a form reset restores\n *   `defaultValue`.\n */\nexport const Rating = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onChange,\n  max = 5,\n  size = 'medium',\n  disabled = false,\n  name,\n  required,\n  form,\n  labels,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  onKeyDown,\n  onFocus,\n  onMouseLeave,\n  ref,\n  ...rest\n}: RatingProps) => {\n  if (onChange !== undefined) warnDeprecated('Rating', 'onChange', 'onValueChange');\n  const initialValue = defaultValue ?? 0;\n  const [value, setValue] = useControllable(valueProp, initialValue, (next: number) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const [hovered, setHovered] = React.useState(0);\n  // A hover preview must not survive the rating becoming disabled (adjust state during render).\n  const [prevDisabled, setPrevDisabled] = React.useState(disabled);\n  if (prevDisabled !== disabled) {\n    setPrevDisabled(disabled);\n    if (disabled) setHovered(0);\n  }\n  const displayValue = disabled ? value : hovered || value;\n\n  // Roving tab stop (the chosen star, else the first) and focus moves; the keys are handled below.\n  const { containerProps, getTabIndex, focusValue } = useRovingTabIndex({\n    activeValue: value > 0 ? String(value) : null,\n  });\n\n  // Keys count from the current rating, not from the focused star (0.4 semantics): from an empty\n  // rating, Tab lands on the unchosen first star and Right/Up/Home choose it. Never wraps.\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;\n    let next: number;\n    if (e.key === 'Home') next = 1;\n    else if (e.key === 'End') next = max;\n    else if (e.key === 'ArrowUp') next = value + 1;\n    else if (e.key === 'ArrowDown') next = value - 1;\n    else {\n      const intent = getArrowIntent(e.key, {\n        orientation: 'horizontal',\n        dir: getDirection(e.currentTarget),\n      });\n      if (!intent) return;\n      next = intent === 'next' ? value + 1 : value - 1;\n    }\n    e.preventDefault();\n    next = Math.min(next, max);\n    // The ends are no-ops (nothing is emitted, focus stays), and Left/Down never clear to 0.\n    if (disabled || next < 1 || next === value) return;\n    focusValue(String(next));\n    setValue(next);\n  };\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref, rootRef);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      // An explicit `required={false}` wins over a required Field, so aria-required always\n      // matches the native validation below (`isRequired`).\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n  const isRequired = required ?? field?.required ?? false;\n  const defaultName =\n    fieldProps['aria-label'] === undefined && fieldProps['aria-labelledby'] === undefined\n      ? 'Rating'\n      : undefined;\n\n  useFormReset(rootRef, () => setValue(initialValue), form);\n\n  const focusTabStop = () => {\n    rootRef.current?.querySelector<HTMLElement>('[data-roving-value][tabindex=\"0\"]')?.focus();\n  };\n\n  const starSize = sizeMap[size];\n  const starLabel = labels?.star ?? defaultStarLabel;\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={defaultName}\n      {...fieldProps}\n      aria-disabled={disabled || undefined}\n      className={cn(\n        'relative inline-flex items-center gap-0.5',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...rest}\n      ref={mergedRef}\n      data-roving-container=\"\"\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n        checkDefaultPrevented: false,\n      })}\n      onMouseLeave={composeEventHandlers(onMouseLeave, () => setHovered(0), {\n        checkDefaultPrevented: false,\n      })}\n    >\n      {Array.from({ length: max }, (_, i) => {\n        const starValue = i + 1;\n        const key = String(starValue);\n        const filled = displayValue >= starValue;\n        return (\n          <button\n            key={key}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={value === starValue}\n            aria-label={starLabel(starValue, max)}\n            data-roving-value={key}\n            tabIndex={disabled ? -1 : getTabIndex(key)}\n            disabled={disabled}\n            className={cn(\n              'inline-flex cursor-pointer rounded border-0 bg-transparent transition-colors motion-reduce:transition-none disabled:cursor-not-allowed',\n              targetPaddingMap[size],\n              focusRing,\n              filled ? 'text-rating' : 'text-stroke-accessible',\n            )}\n            onClick={() => {\n              // Choosing the current star again is a no-op for both callbacks (useControllable).\n              if (!disabled) setValue(starValue);\n            }}\n            onMouseEnter={() => {\n              if (!disabled) setHovered(starValue);\n            }}\n          >\n            <Star filled={filled} className={starSize} />\n          </button>\n        );\n      })}\n      <HiddenInput\n        type=\"radio\"\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={value > 0 ? String(value) : ''}\n        required={isRequired}\n        onInvalid={focusTabStop}\n      />\n    </div>\n  );\n};\nRating.displayName = 'Rating';\n\n/** Text size of the value and the count, following the star size. */\nconst textSizeMap: Record<Size, string> = {\n  'extra-small': 'text-caption-1',\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n  'extra-large': 'text-body-2',\n};\n\nconst defaultRatingLabel = (_value: number, max: number, formattedValue: string) =>\n  `Rating: ${formattedValue} out of ${max}`;\nconst defaultCountLabel = (count: number, formattedCount: string) =>\n  count === 1 ? '1 rating' : `${formattedCount} ratings`;\n\n/** `locale` when `Intl` accepts it as a language tag, else `undefined` (the runtime default). */\nfunction supportedLocale(locale: string | undefined): string | undefined {\n  if (locale === undefined) return undefined;\n  try {\n    Intl.getCanonicalLocales(locale);\n    return locale;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * A read-only star rating (`role=\"img\"` named \"Rating: <value> out of <max>\"). A fractional value\n * is drawn with a partly filled star, so the stars and the name show the same value.\n *\n * - `showValue` adds the value as text after the stars, `count` the number of ratings (\"(1,160)\",\n *   also added to the name), and `compact` shows one filled star with the value instead of `max`\n *   stars (the root carries `data-compact`). Without them only the stars show.\n * - The value (up to one decimal) and the count are formatted with `locale`, in the text and in\n *   the name; `labels` localizes the name. Pass `locale` when rendering on the server.\n */\nexport const RatingDisplay = ({\n  value,\n  max = 5,\n  size = 'medium',\n  showValue = false,\n  count,\n  compact = false,\n  locale,\n  labels,\n  className,\n  ref,\n  ...rest\n}: RatingDisplayProps) => {\n  const starSize = sizeMap[size];\n  const formatLocale = supportedLocale(locale);\n  const invalidLocale = locale !== undefined && formatLocale === undefined;\n  React.useEffect(() => {\n    if (invalidLocale) {\n      warnOnce(\n        `RatingDisplay:invalid-locale:${locale}`,\n        `RatingDisplay: \\`locale\\` \"${locale}\" is not a valid BCP 47 language tag (use hyphens, as ` +\n          'in \"en-US\"). The runtime default locale formats the value instead, so the server and ' +\n          'the browser may render different text.',\n      );\n    }\n  }, [invalidLocale, locale]);\n\n  const formattedValue = new Intl.NumberFormat(formatLocale, { maximumFractionDigits: 1 }).format(\n    value,\n  );\n  const formattedCount =\n    count === undefined ? undefined : new Intl.NumberFormat(formatLocale).format(count);\n  const ratingName = (labels?.rating ?? defaultRatingLabel)(value, max, formattedValue);\n  const name =\n    count === undefined || formattedCount === undefined\n      ? ratingName\n      : `${ratingName}, ${(labels?.count ?? defaultCountLabel)(count, formattedCount)}`;\n  const showText = showValue || compact || count !== undefined;\n  const textSize = textSizeMap[size];\n\n  return (\n    <div\n      ref={ref}\n      role=\"img\"\n      aria-label={name}\n      data-compact={compact ? '' : undefined}\n      className={cn('inline-flex items-center gap-0.5', className)}\n      {...rest}\n    >\n      {compact ? (\n        <span className=\"inline-flex text-rating\">\n          <Star filled className={starSize} />\n        </span>\n      ) : (\n        Array.from({ length: max }, (_, i) => {\n          // The share of this star that the value covers, in whole percent.\n          const percent = Math.round(Math.min(1, Math.max(0, value - i)) * 100);\n          if (percent > 0 && percent < 100) {\n            // The outline of an empty star, with the filled star clipped to the fraction over it\n            // from the inline start (the reading direction of the stars, also under RTL).\n            return (\n              <span key={i} className=\"relative inline-flex text-stroke-accessible\">\n                <Star filled={false} className={starSize} />\n                <span\n                  className=\"absolute inset-y-0 start-0 flex overflow-hidden text-rating\"\n                  style={{ width: `${percent}%` }}\n                >\n                  <Star filled className={cn(starSize, 'shrink-0')} />\n                </span>\n              </span>\n            );\n          }\n          const filled = percent === 100;\n          return (\n            <span\n              key={i}\n              className={cn('inline-flex', filled ? 'text-rating' : 'text-stroke-accessible')}\n            >\n              <Star filled={filled} className={starSize} />\n            </span>\n          );\n        })\n      )}\n      {showText && (\n        <span className={cn('ms-1 font-semibold text-foreground', textSize)}>{formattedValue}</span>\n      )}\n      {formattedCount !== undefined && (\n        <span className={cn('ms-1 text-muted-foreground', textSize)}>({formattedCount})</span>\n      )}\n    </div>\n  );\n};\nRatingDisplay.displayName = 'RatingDisplay';\n"],"mappings":"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"}
+{"version":3,"file":"Rating.mjs","names":["React","defaultStarLabel","value","RatingRoot","valueProp","stepProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","onChange","warnDeprecated","initialValue","defaultValue","setValue","useControllable","onValueChange","next","step","hovered","setHovered","prevDisabled","setPrevDisabled","disabled","drawnValue","useRovingTabIndex","up","v","down","handleKeyDown","isOwnEvent","max","intent","getArrowIntent","getDirection","focusValue","rootRef","mergedRef","useMergedRefs","ref","containerProps","field","useFieldContext","fieldProps","useFieldControl","required","isRequired","defaultName","form","focusTabStop","focusChosen","useEventCallback","key","resolvedColor","resolveRatingColor","color","glyphs","useStarGlyphs","iconFilled","iconOutline","starLabel","labels","useRatingItemRegistry","hasItems","slotRendersContent","children","counts","context","focus","size","getTabIndex","registerItem","cn","ratingClassNames","className","composeEventHandlers","onKeyDown","onFocus","onMouseLeave","RatingContext","ratingItems","HiddenInput","textSizeMap","defaultRatingLabel","formattedValue","defaultCountLabel","count","formattedCount","supportedLocale","locale","RatingDisplayRoot","formatLocale","invalidLocale","warnOnce","ratingName","name","showText","showValue","compact","textSize","INERT_RATING_CONTEXT","ratingDisplayClassNames","StarGlyph","Rating","RatingItem","RatingDisplay","RatingDisplayItem"],"sources":["../../../src/components/input/Rating.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ratingClassNames, ratingDisplayClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { isOwnEvent } from '../../lib/events';\nimport { slotRendersContent, type Slot } from '../../lib/slot';\nimport type { Size } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useEventCallback } from '../../hooks/useEventCallback';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport {\n  INERT_RATING_CONTEXT,\n  RatingContext,\n  RatingItem,\n  ratingItems,\n  resolveRatingColor,\n  StarGlyph,\n  useRatingItemChecks,\n  useRatingItemRegistry,\n  useStarGlyphs,\n  type RatingColor,\n  type RatingContextValue,\n} from './Rating.item';\n\n/**\n * The Rating's built-in star names, for localization. Each member is optional and falls back to\n * its English default.\n */\nexport interface RatingLabels {\n  /**\n   * Accessible name of the radio that chooses `value`: a whole star (1 to `max`), and with\n   * `step={0.5}` a half value too (\"2.5 stars\").\n   * @default (value) => value === 1 ? '1 star' : `${value} stars`\n   */\n  star?: (value: number, max: number) => string;\n}\n\nconst defaultStarLabel = (value: number) => `${value} star${value !== 1 ? 's' : ''}`;\n\n/** Properties for the Rating component. */\nexport interface RatingProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | 'color'\n> {\n  /**\n   * Controlled rating value (`0` = no rating): a whole number of stars, or with `step={0.5}` a\n   * multiple of 0.5. A value between two steps (2.7) checks no radio, is drawn as the step below\n   * it (2.5) and holds the tab stop there; the keys move it to the next or previous step.\n   */\n  value?: number;\n  /** Initial rating for uncontrolled usage (also the value a form reset restores).\n   * @default 0\n   */\n  defaultValue?: number;\n  /** Called with the new rating when it changes (not when the current star is chosen again). */\n  onValueChange?: (value: number) => void;\n  /**\n   * Called with the new rating, exactly like `onValueChange`: only when the rating changes (0.4\n   * also called it when the current star was clicked again, or a key was pressed at an end).\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: number) => void;\n  /** Maximum number of stars.\n   * @default 5\n   */\n  max?: number;\n  /**\n   * The grain of the rating: `1` (whole stars) or `0.5` (half stars). With `0.5`, each star stays\n   * one pointer target of at least 24×24px (a larger `size` keeps a larger one): the half is\n   * chosen by the pointer's position over it (the half at the inline start, which mirrors under\n   * `dir=\"rtl\"`), and two transparent radios per star, the half value then the full value, serve\n   * the keyboard and screen readers. The keys then move by half a star. A value other than `0.5`\n   * (from untyped code) counts as `1`. RatingDisplay has no `step`: it draws any fraction.\n   * @default 1\n   */\n  step?: 0.5 | 1;\n  /** Size of the star icons. Every size keeps a target of at least 24×24px.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Color of the filled stars: `marigold` (default), `brand` or `neutral`; unfilled stars keep a\n   * 3:1 outline. Fluent's default is `neutral`. A value outside the three (from untyped code)\n   * renders as `marigold`; the root carries `data-color` with the resolved value.\n   * @default 'marigold'\n   */\n  color?: RatingColor;\n  /**\n   * The glyph of a filled star. `iconFilled` and `iconOutline` are the glyphs of a filled and an\n   * unfilled star, as a pair; decorative. Fluent's RatingDisplay takes one `icon`; here a filled\n   * and an unfilled star must differ by shape, not by color alone.\n   *\n   * - Each glyph is sized by `size` (an SVG child fills the star) and takes the star's color\n   *   (paint it with `currentColor`). A half-filled star (`step={0.5}`) clips the filled glyph\n   *   over the unfilled one from the inline start.\n   * - `null`, `undefined` and a value that renders nothing draw the default star. A value that\n   *   renders nothing, and a pair with only one of the two set, log a development warning.\n   * - A `<button>` or `Button` element (or a slot object whose `as` is one) is not nested in the\n   *   star: its children become the glyph (the default star when they render nothing), its props\n   *   are dropped, and a development warning says so (in place of the warning for a value that\n   *   renders nothing).\n   * - A `Rating.Item` that sets its own pair draws that one instead.\n   */\n  iconFilled?: Slot<'span'>;\n  /**\n   * The glyph of an unfilled star, as a pair with `iconFilled` (its rules apply); decorative.\n   * Fluent's RatingDisplay takes one `icon`; here a filled and an unfilled star must differ by\n   * shape, not by color alone.\n   */\n  iconOutline?: Slot<'span'>;\n  /** Whether the rating is disabled and non-interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Form field name. With a name, the chosen rating is submitted with the form (nothing while no\n   * star is chosen).\n   */\n  name?: string;\n  /** A star must be chosen before the form can be submitted (native validation). */\n  required?: boolean;\n  /** Id of the form the rating belongs to, when it is rendered outside that form. */\n  form?: string;\n  /**\n   * Names of the stars (\"1 star\", \"2 stars\", …, and \"2.5 stars\" for a half value), for\n   * localization. The group's own name is `aria-label` (default \"Rating\"). Unset members keep\n   * their English defaults.\n   */\n  labels?: RatingLabels;\n  /**\n   * Custom stars: one `Rating.Item` per value from 1 to `max`, in place of the generated stars\n   * (when the children render content). `max` still sets the key range and the star names.\n   */\n  children?: React.ReactNode;\n  /** Ref to the `role=\"radiogroup\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Built-in texts of RatingDisplay, for localization. */\nexport interface RatingDisplayLabels {\n  /**\n   * Accessible name. `formattedValue` is `value` formatted with `locale` (as shown).\n   * @default (value, max, formattedValue) => `Rating: ${formattedValue} out of ${max}`\n   */\n  rating?: (value: number, max: number, formattedValue: string) => string;\n  /**\n   * Count part of the name.\n   * @default (count, formatted) => count === 1 ? '1 rating' : `${formatted} ratings`\n   */\n  count?: (count: number, formattedCount: string) => string;\n}\n\n/** Properties for the RatingDisplay (read-only) component. */\nexport interface RatingDisplayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> {\n  /**\n   * Rating value to display. A fraction is drawn as a partly filled star (`4.6` fills 60% of the\n   * fifth star), so the stars show the value the accessible name reports.\n   */\n  value: number;\n  /** Maximum number of stars.\n   * @default 5\n   */\n  max?: number;\n  /** Size of the star icons (and of the value and count text).\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Color of the filled stars: `marigold` (default), `brand` or `neutral`; unfilled stars keep a\n   * 3:1 outline. Fluent's default is `neutral`. A value outside the three (from untyped code)\n   * renders as `marigold`; the root carries `data-color` with the resolved value.\n   * @default 'marigold'\n   */\n  color?: RatingColor;\n  /**\n   * The glyph of a filled star. `iconFilled` and `iconOutline` are the glyphs of a filled and an\n   * unfilled star, as a pair; decorative. Fluent's RatingDisplay takes one `icon`; here a filled\n   * and an unfilled star must differ by shape, not by color alone.\n   *\n   * - Each glyph is sized by `size` (an SVG child fills the star) and takes the star's color\n   *   (paint it with `currentColor`). A partly filled star clips the filled glyph over the\n   *   unfilled one from the inline start, and the `compact` star is the filled glyph.\n   * - `null`, `undefined` and a value that renders nothing draw the default star. A value that\n   *   renders nothing, and a pair with only one of the two set, log a development warning.\n   * - A `<button>` or `Button` element (or a slot object whose `as` is one) is not nested in the\n   *   star: its children become the glyph (the default star when they render nothing), its props\n   *   are dropped, and a development warning says so (in place of the warning for a value that\n   *   renders nothing).\n   * - A `RatingDisplay.Item` that sets its own pair draws that one instead.\n   */\n  iconFilled?: Slot<'span'>;\n  /**\n   * The glyph of an unfilled star, as a pair with `iconFilled` (its rules apply); decorative.\n   * Fluent's RatingDisplay takes one `icon`; here a filled and an unfilled star must differ by\n   * shape, not by color alone.\n   */\n  iconOutline?: Slot<'span'>;\n  /**\n   * Shows the value as text after the stars, formatted with `locale` (up to one decimal).\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * Number of ratings: shown as \"(1,160)\" after the value with the locale's digit grouping, and\n   * added to the accessible name (\"…, 1,160 ratings\").\n   */\n  count?: number;\n  /**\n   * One filled star followed by the value (and the count) instead of `max` stars. Implies\n   * `showValue`.\n   * @default false\n   */\n  compact?: boolean;\n  /**\n   * BCP 47 locale of the value and count formatting (runtime default when omitted; pass it when\n   * rendering on the server). A tag `Intl` rejects (the POSIX `de_DE`, a typo) falls back to the\n   * runtime default locale (development warning).\n   */\n  locale?: string;\n  /** Built-in texts, for localization. */\n  labels?: RatingDisplayLabels;\n  /**\n   * Custom stars: one `RatingDisplay.Item` per value from 1 to `max`, in place of the generated\n   * stars (when the children render content). A `compact` display ignores them.\n   */\n  children?: React.ReactNode;\n  /** Ref to the root element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst RatingRoot = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onChange,\n  max = 5,\n  step: stepProp,\n  size = 'medium',\n  color,\n  iconFilled,\n  iconOutline,\n  disabled = false,\n  name,\n  required,\n  form,\n  labels,\n  className,\n  children,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  onKeyDown,\n  onFocus,\n  onMouseLeave,\n  ref,\n  ...rest\n}: RatingProps) => {\n  if (onChange !== undefined) warnDeprecated('Rating', 'onChange', 'onValueChange');\n  const initialValue = defaultValue ?? 0;\n  const [value, setValue] = useControllable(valueProp, initialValue, (next: number) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n  // The items draw whole or half stars only, so the keys move by one of the two (untyped code\n  // may pass another number).\n  const step: 0.5 | 1 = stepProp === 0.5 ? 0.5 : 1;\n\n  const [hovered, setHovered] = React.useState(0);\n  // A hover preview must not survive the rating becoming disabled (adjust state during render).\n  const [prevDisabled, setPrevDisabled] = React.useState(disabled);\n  if (prevDisabled !== disabled) {\n    setPrevDisabled(disabled);\n    if (disabled) setHovered(0);\n  }\n  const drawnValue = disabled ? value : hovered || value;\n\n  // Roving tab stop (the radio of the chosen value, else the first) and focus moves; the keys are\n  // handled below. A value between two steps holds the tab stop on the radio below it (D23).\n  const { containerProps, getTabIndex, focusValue } = useRovingTabIndex({\n    activeValue: value >= step ? String(Math.floor(value / step) * step) : null,\n  });\n\n  // The next and previous multiples of `step`: a value between two steps (a controlled 2.7 at\n  // step 0.5) moves to the step above or below it (3 or 2.5).\n  const up = (v: number) => Math.floor(v / step) * step + step;\n  const down = (v: number) => Math.ceil(v / step) * step - step;\n\n  // Keys count from the current rating, not from the focused radio (0.4 semantics): from an empty\n  // rating, Tab lands on the unchosen first radio and Right/Up/Home choose it. Never wraps.\n  // Keys from a portal rendered among the children (a popup opened from one) are not the rating's.\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || !isOwnEvent(e)) return;\n    let next: number;\n    if (e.key === 'Home') next = step;\n    else if (e.key === 'End') next = max;\n    else if (e.key === 'ArrowUp') next = up(value);\n    else if (e.key === 'ArrowDown') next = down(value);\n    else {\n      const intent = getArrowIntent(e.key, {\n        orientation: 'horizontal',\n        dir: getDirection(e.currentTarget),\n      });\n      if (!intent) return;\n      next = intent === 'next' ? up(value) : down(value);\n    }\n    e.preventDefault();\n    next = Math.min(next, max);\n    // The ends are no-ops (nothing is emitted, focus stays), and Left/Down never clear to 0.\n    if (disabled || next < step || next === value) return;\n    focusValue(String(next));\n    setValue(next);\n  };\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref, rootRef);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      // An explicit `required={false}` wins over a required Field, so aria-required always\n      // matches the native validation below (`isRequired`).\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n  const isRequired = required ?? field?.required ?? false;\n  const defaultName =\n    fieldProps['aria-label'] === undefined && fieldProps['aria-labelledby'] === undefined\n      ? 'Rating'\n      : undefined;\n\n  useFormReset(rootRef, () => setValue(initialValue), form);\n\n  const focusTabStop = () => {\n    rootRef.current?.querySelector<HTMLElement>('[data-roving-value][tabindex=\"0\"]')?.focus();\n  };\n\n  // A pointer click on a half star focuses the radio it chose, so the keyboard continues from\n  // there, without scrolling: the star is under the pointer already (D22).\n  const focusChosen = useEventCallback((key: string) => {\n    rootRef.current\n      ?.querySelector<HTMLElement>(`[data-roving-value=\"${key}\"]`)\n      ?.focus({ preventScroll: true });\n  });\n\n  const resolvedColor = resolveRatingColor(color);\n  const glyphs = useStarGlyphs('Rating', iconFilled, iconOutline);\n  const starLabel = labels?.star ?? defaultStarLabel;\n  const { registerItem, counts } = useRatingItemRegistry();\n  // Whether the root draws its own children instead of the `max` generated stars (D26): the\n  // generated stars always cover every value on their own, so only a custom item set can leave\n  // one missing.\n  const hasItems = slotRendersContent(children);\n  useRatingItemChecks(counts, max, hasItems);\n  const context = React.useMemo<RatingContextValue>(\n    () => ({\n      kind: 'input',\n      value,\n      drawnValue,\n      step,\n      max,\n      size,\n      color: resolvedColor,\n      glyphs,\n      disabled,\n      starLabel,\n      getTabIndex,\n      choose: (next, focus) => {\n        setValue(next);\n        if (focus) focusChosen(String(next));\n      },\n      preview: setHovered,\n      registerItem,\n    }),\n    [\n      value,\n      drawnValue,\n      step,\n      max,\n      size,\n      resolvedColor,\n      glyphs,\n      disabled,\n      starLabel,\n      getTabIndex,\n      setValue,\n      focusChosen,\n      registerItem,\n    ],\n  );\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={defaultName}\n      {...fieldProps}\n      aria-disabled={disabled || undefined}\n      data-color={resolvedColor}\n      className={cn(\n        ratingClassNames.root,\n        'relative inline-flex items-center gap-0.5',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...rest}\n      ref={mergedRef}\n      data-roving-container=\"\"\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n        checkDefaultPrevented: false,\n      })}\n      onMouseLeave={composeEventHandlers(onMouseLeave, () => setHovered(0), {\n        checkDefaultPrevented: false,\n      })}\n    >\n      <RatingContext.Provider value={context}>{ratingItems(children, max)}</RatingContext.Provider>\n      <HiddenInput\n        type=\"radio\"\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={value > 0 ? String(value) : ''}\n        required={isRequired}\n        onInvalid={focusTabStop}\n      />\n    </div>\n  );\n};\nRatingRoot.displayName = 'Rating';\n\n/** Text size of the value and the count, following the star size. */\nconst textSizeMap: Record<Size, string> = {\n  'extra-small': 'text-caption-1',\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n  'extra-large': 'text-body-2',\n};\n\nconst defaultRatingLabel = (_value: number, max: number, formattedValue: string) =>\n  `Rating: ${formattedValue} out of ${max}`;\nconst defaultCountLabel = (count: number, formattedCount: string) =>\n  count === 1 ? '1 rating' : `${formattedCount} ratings`;\n\n/** `locale` when `Intl` accepts it as a language tag, else `undefined` (the runtime default). */\nfunction supportedLocale(locale: string | undefined): string | undefined {\n  if (locale === undefined) return undefined;\n  try {\n    Intl.getCanonicalLocales(locale);\n    return locale;\n  } catch {\n    return undefined;\n  }\n}\n\nconst RatingDisplayRoot = ({\n  value,\n  max = 5,\n  size = 'medium',\n  color,\n  iconFilled,\n  iconOutline,\n  showValue = false,\n  count,\n  compact = false,\n  locale,\n  labels,\n  className,\n  children,\n  ref,\n  ...rest\n}: RatingDisplayProps) => {\n  const formatLocale = supportedLocale(locale);\n  const invalidLocale = locale !== undefined && formatLocale === undefined;\n  React.useEffect(() => {\n    if (invalidLocale) {\n      warnOnce(\n        `RatingDisplay:invalid-locale:${locale}`,\n        `RatingDisplay: \\`locale\\` \"${locale}\" is not a valid BCP 47 language tag (use hyphens, as ` +\n          'in \"en-US\"). The runtime default locale formats the value instead, so the server and ' +\n          'the browser may render different text.',\n      );\n    }\n  }, [invalidLocale, locale]);\n\n  const formattedValue = new Intl.NumberFormat(formatLocale, { maximumFractionDigits: 1 }).format(\n    value,\n  );\n  const formattedCount =\n    count === undefined ? undefined : new Intl.NumberFormat(formatLocale).format(count);\n  const ratingName = (labels?.rating ?? defaultRatingLabel)(value, max, formattedValue);\n  const name =\n    count === undefined || formattedCount === undefined\n      ? ratingName\n      : `${ratingName}, ${(labels?.count ?? defaultCountLabel)(count, formattedCount)}`;\n  const showText = showValue || compact || count !== undefined;\n  const textSize = textSizeMap[size];\n\n  const resolvedColor = resolveRatingColor(color);\n  const glyphs = useStarGlyphs('RatingDisplay', iconFilled, iconOutline);\n  const { registerItem, counts } = useRatingItemRegistry();\n  // A compact display ignores `children` (D26): it never renders items of its own, so a value\n  // from 1 to `max` without an item is never \"missing\" on purpose.\n  const hasItems = !compact && slotRendersContent(children);\n  useRatingItemChecks(counts, max, hasItems);\n  // Read-only: the stars take the inert actions (they choose, preview and rove nothing).\n  const context = React.useMemo<RatingContextValue>(\n    () => ({\n      ...INERT_RATING_CONTEXT,\n      kind: 'display',\n      value,\n      drawnValue: value,\n      max,\n      size,\n      color: resolvedColor,\n      glyphs,\n      registerItem,\n    }),\n    [value, max, size, resolvedColor, glyphs, registerItem],\n  );\n\n  return (\n    <div\n      ref={ref}\n      role=\"img\"\n      aria-label={name}\n      data-compact={compact ? '' : undefined}\n      data-color={resolvedColor}\n      className={cn(ratingDisplayClassNames.root, 'inline-flex items-center gap-0.5', className)}\n      {...rest}\n    >\n      {compact ? (\n        <StarGlyph\n          starClassName={ratingDisplayClassNames.star}\n          iconClassName={ratingDisplayClassNames.icon}\n          fraction={1}\n          size={size}\n          color={resolvedColor}\n          glyphs={glyphs}\n        />\n      ) : (\n        <RatingContext.Provider value={context}>\n          {ratingItems(children, max)}\n        </RatingContext.Provider>\n      )}\n      {showText && (\n        <span\n          className={cn(\n            ratingDisplayClassNames.value,\n            'ms-1 font-semibold text-foreground',\n            textSize,\n          )}\n        >\n          {formattedValue}\n        </span>\n      )}\n      {formattedCount !== undefined && (\n        <span className={cn(ratingDisplayClassNames.count, 'ms-1 text-muted-foreground', textSize)}>\n          ({formattedCount})\n        </span>\n      )}\n    </div>\n  );\n};\nRatingDisplayRoot.displayName = 'RatingDisplay';\n\n/**\n * A star rating input (`role=\"radiogroup\"` of `role=\"radio\"` stars).\n *\n * - One tab stop (the radio of the chosen value, else the first). Keys choose relative to the\n *   current rating and move focus to the chosen radio, as in 0.4: Right/Up one `step` more (a\n *   star, or half a star), Left/Down one fewer (Left/Right mirrored under `dir=\"rtl\"`), Home the\n *   smallest value (`step`) and End `max`. From an empty rating, Right/Up/Home choose `step`.\n *   Keys at the ends (and Left/Down while empty) emit nothing.\n * - The keyboard cannot clear a rating: Left/Down stop at `step` (APG radio group; 0.4 went down\n *   to 0). Only a controlled `value={0}` (or a form reset while `defaultValue` is 0) clears it.\n * - `step={0.5}` offers half stars. Each star stays one pointer target, which chooses by the\n *   pointer's position (its half from the inline start, else its full value) and then focuses\n *   the radio it chose; it holds two transparent radios (\"2.5 stars\", \"3 stars\") for the\n *   keyboard and screen readers, and draws the focus ring of either. A controlled value between\n *   two steps checks no radio and is drawn as the step below it; the keys move it to the next or\n *   previous step.\n * - `onValueChange` (and the deprecated `onChange` alias) fire only when the rating changes, so\n *   choosing the current star again calls neither.\n * - Hovering previews a value (half stars preview by the pointer's position); the preview never\n *   outlives the hover or a disabled state.\n * - `color` colors the filled stars (`marigold`, the default, `brand` or `neutral`; the root\n *   carries `data-color`); `iconFilled` and `iconOutline` replace the star glyphs, as a pair.\n * - Inside a `Field` it is named by the Field label (instead of the default \"Rating\") and\n *   described by its hint and error. The stars are named \"1 star\", \"2 stars\", … (and a half value\n *   \"2.5 stars\"); `labels` localizes these names.\n * - With `name` (or `required`) it takes part in native forms; a form reset restores\n *   `defaultValue`.\n * - The stars are generated from `max`. Children that render content replace them: one\n *   `Rating.Item` per value from 1 to `max`, chosen, previewed, roved and named as the generated\n *   stars are (`max` still sets the key range and the star names).\n *\n * Sub-component: `Rating.Item` (the same component as `RatingDisplay.Item`). React Server\n * Components import its flat name `RatingItem` (dotted access needs a client file).\n */\nexport const Rating = /* @__PURE__ */ Object.assign(RatingRoot, { Item: RatingItem });\n\n/**\n * A read-only star rating (`role=\"img\"` named \"Rating: <value> out of <max>\"). A fractional value\n * is drawn with a partly filled star, so the stars and the name show the same value.\n *\n * - `showValue` adds the value as text after the stars, `count` the number of ratings (\"(1,160)\",\n *   also added to the name), and `compact` shows one filled star with the value instead of `max`\n *   stars (the root carries `data-compact`). Without them only the stars show.\n * - The value (up to one decimal) and the count are formatted with `locale`, in the text and in\n *   the name; `labels` localizes the name. Pass `locale` when rendering on the server.\n * - `color` colors the filled stars (`marigold`, the default, `brand` or `neutral`; the root\n *   carries `data-color`); `iconFilled` and `iconOutline` replace the star glyphs, as a pair.\n * - The stars are generated from `max`. Children that render content replace them: one\n *   `RatingDisplay.Item` per value from 1 to `max`. A `compact` display ignores them.\n *\n * Sub-component: `RatingDisplay.Item` (the same component as `Rating.Item`). React Server\n * Components import its flat name `RatingDisplayItem`, or `RatingItem` (dotted access needs a\n * client file).\n */\nexport const RatingDisplay = /* @__PURE__ */ Object.assign(RatingDisplayRoot, {\n  Item: RatingItem,\n});\n\n/**\n * Flat name of `RatingDisplay.Item` for React Server Components (the same component as\n * `RatingItem`).\n */\nexport const RatingDisplayItem = RatingItem;\n\nexport { RatingItem, type RatingItemProps, type RatingColor } from './Rating.item';\n"],"mappings":"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"}

package/dist/components/input/SearchBox.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../hooks/useControllable.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useFieldControl.cjs"),l=require("../../lib/styles.cjs"),u=require("../button/Button.cjs"),d=require("../../lib/icons.cjs"),f=require("../../lib/mergeProps.cjs"),p=require("../button/Button.slots.cjs"),m=require("./Input.cjs"),h=require("../../hooks/useFormReset.cjs"),g=require("../../lib/labelInName.cjs");let _=require("react");_=e.__toESM(_,1);let v=require("react/jsx-runtime");var y=new Set([`type`,`disabled`,`form`,`formAction`,`formEncType`,`formMethod`,`formNoValidate`,`formTarget`,`name`,`value`,`popoverTarget`,`popoverTargetAction`]),b=/^on[A-Z]/,x=new Set([`aria-label`,`aria-labelledby`,`title`]),ee=`Clear search`,te=()=>{},ne=`a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable="false"])`,S={kind:`default`,buttonProps:{},content:null,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1};function C(e){return e===`button`||e===u.Button}function w(e,t,n){let r=i.slotRendersContent(n),a=i.materialiseSlotContent(n),o=g.hasTextLabel(a);if(e===u.Button){let e={};for(let[n,r]of Object.entries(t))n!==`children`&&!p.BUTTON_OWN_PROP_KEYS.has(n)&&(e[n]=r);let n=i.renderSlot(t.icon,`span`,`inline-flex`,{"aria-hidden":!0});return{buttonProps:e,content:n||r?p.placeButtonIcon(n,a,t.iconPosition):null,contentMayName:!0,literalTextLabel:o,disabledFocusable:!!t.disabledFocusable}}let{as:s,children:c,...l}=t;return{buttonProps:l,content:r?a:null,contentMayName:!0,literalTextLabel:o,disabledFocusable:!1}}function T(e){let t=e;if(n.isElementOfType(t,`button`,u.Button)){let e=t.props.children;return{kind:`element`,...w(n.getElementType(t),t.props,e)}}let r=i.resolveSlot(e,`span`);if(!r)return S;let{Component:a,props:o,children:s}=r;if(C(a))return{kind:`button-object`,...w(a,o,s)};let c={},l={},f=!1;for(let[e,t]of Object.entries(o))t!==void 0&&(y.has(e)||b.test(e)?(c[e]=t,f=!0):x.has(e)?c[e]=t:l[e]=t);let p=i.slotRendersContent(s),m=i.slotWrapsDefaultContent(a,{...l,children:s});if(m&&Object.keys(c).length===0&&Object.keys(l).length===0)return S;let h=m?(0,v.jsx)(d.DismissIcon,{}):p?s:void 0,g=h===void 0?_.createElement(a,{"aria-hidden":!0,...l}):_.createElement(a,{"aria-hidden":!0,...l},h);return{kind:f?`button-object`:`content`,buttonProps:c,content:g,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1}}var E=({value:e,defaultValue:n=``,onValueChange:u,onChange:y,onClear:b,placeholder:S=`Search`,disabled:C,contentBefore:w,contentAfter:E,dismiss:D,className:re,ref:ie,controlRef:ae,id:oe,"aria-label":se,"aria-labelledby":ce,"aria-describedby":le,"aria-invalid":ue,"aria-required":de,"aria-errormessage":fe,"aria-details":pe,required:O,name:k,form:A,readOnly:j,autoComplete:M,autoFocus:N,autoCapitalize:P,autoCorrect:F,inputMode:I,enterKeyHint:L,spellCheck:R,maxLength:z,minLength:B,pattern:me,tabIndex:he,onFocus:ge,onBlur:_e,onKeyDown:ve,onKeyUp:ye,onMouseDown:be,hidden:xe,...Se})=>{y!==void 0&&r.warnDeprecated(`SearchBox`,`onChange`,`onValueChange`);let[V,H]=o.useControllable(e,n,e=>{u?.(e),y?.(e)}),U=_.useRef(null),Ce=s.useMergedRefs(U,ae);h.useFormReset(U,()=>H(n),A);let W=c.useFieldControl({id:oe,"aria-label":se,"aria-labelledby":ce,"aria-describedby":le,"aria-invalid":ue,"aria-required":de,required:O},{nativeRequired:!0}),we=m.isInvalidLook(!1,W[`aria-invalid`]),G=T(D),K=G.kind;_.useEffect(()=>{K===`element`?r.warnOnce(`SearchBox:dismiss-button-element`,"SearchBox: `dismiss` received a button element; its props were merged into the built-in clear button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<MyIcon />}`."):K===`button-object`&&r.warnOnce(`SearchBox:dismiss-button-object`,'SearchBox: `dismiss` with button props (`as: "button"`, `onClick`, `type`, …) is deprecated and will be removed in 1.0; the props were merged into the built-in clear button. Pass icon content instead, e.g. `dismiss={<MyIcon />}`.')},[K]);let Te=()=>{H(``),b?.(),U.current?.focus()},Ee=e=>{e.key!==`Escape`||e.nativeEvent.isComposing||!V||j||C||(e.preventDefault(),H(``),b?.())},De=e=>{let t=U.current,n=e.currentTarget,r=e.target;if(!t||C||e.button!==0||r===t||!(r instanceof Element)||!n.contains(r))return;let i=r.closest(ne);i&&n.contains(i)||(e.preventDefault(),t.focus())},{onClick:Oe,ref:ke,...q}=G.buttonProps,J=Object.keys(q).some(e=>x.has(e)&&q[e]!=null),Y=G.contentMayName&&!J,X=G.literalTextLabel,[Z,Ae]=_.useState(null),je=_.useCallback(e=>Z?g.observeTextLabel(Z,e):te,[Z]),Me=_.useSyncExternalStore(je,()=>Z?g.hasRenderedTextLabel(Z):X,()=>X),Q=Y&&Me,Ne=s.useMergedRefs(ke,Y?Ae:void 0),$=f.mergeProps({type:`button`,disabled:C,"aria-label":J||Q?void 0:ee,className:t.cn(`me-1 flex h-6 w-6 shrink-0 items-center justify-center rounded bg-transparent p-0 text-muted-foreground`,`not-disabled:not-aria-disabled:hover:text-foreground`,l.focusRing,`disabled:cursor-not-allowed`,p.mergedAriaDisabledClasses)},q),Pe=$.dangerouslySetInnerHTML==null?K===`content`?G.content:G.content??(0,v.jsx)(d.DismissIcon,{}):void 0,Fe=i.slotRendersContent(w),Ie=i.slotRendersContent(E);return(0,v.jsxs)(`div`,{ref:ie,className:t.cn(`relative inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground`,l.inputFocusWithin,we&&`border-destructive focus-within:border-b-destructive`,C&&`cursor-not-allowed opacity-50 has-focus-visible:opacity-100`,re),hidden:xe,...Se,onMouseDown:e=>a.composeEventHandlers(be,De)(e),children:[(0,v.jsx)(`span`,{className:`flex shrink-0 items-center ps-2`,children:Fe?i.renderSlot(w,`span`,`shrink-0`):(0,v.jsx)(d.SearchIcon,{className:`text-muted-foreground`})}),(0,v.jsx)(`input`,{ref:Ce,type:`search`,value:V,onChange:e=>H(e.target.value),placeholder:S,disabled:C,className:t.cn(`h-full min-w-0 flex-1 appearance-none border-none bg-transparent px-2 text-body-1 text-foreground`,`placeholder:text-muted-foreground`,`focus:outline-hidden`,`disabled:cursor-not-allowed`,`[&::-webkit-search-cancel-button]:hidden`),"aria-errormessage":fe,"aria-details":pe,name:k,form:A,readOnly:j,autoComplete:M,autoFocus:N,autoCapitalize:P,autoCorrect:F,inputMode:I,enterKeyHint:L,spellCheck:R,maxLength:z,minLength:B,pattern:me,tabIndex:he,onFocus:ge,onBlur:_e,onKeyDown:a.composeEventHandlers(ve,Ee),onKeyUp:ye,...W}),Ie&&(0,v.jsx)(`span`,{className:`flex shrink-0 items-center pe-2`,children:i.renderSlot(E,`span`,`shrink-0`)}),V&&!j?(0,v.jsx)(`button`,{...$,ref:Ne,type:$.type??`button`,disabled:C||$.disabled,onClick:e=>a.composeEventHandlers(Oe,Te)(e),...G.disabledFocusable?p.MERGED_DISABLED_FOCUSABLE_PROPS:void 0,children:Pe}):null]})};E.displayName=`SearchBox`,exports.SearchBox=E;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../lib/classNames.cjs"),s=require("../../hooks/useControllable.cjs"),c=require("../../hooks/useMergedRefs.cjs"),l=require("../../hooks/useFieldControl.cjs"),u=require("../../lib/styles.cjs"),d=require("../button/Button.cjs"),f=require("../button/Button.slots.cjs"),p=require("../../lib/icons.cjs"),m=require("../../lib/mergeProps.cjs"),h=require("./inputLook.cjs"),g=require("./Input.cjs"),_=require("../../hooks/useFormReset.cjs"),v=require("../../lib/labelInName.cjs");let y=require("react");y=e.__toESM(y,1);let b=require("react/jsx-runtime");var x={small:{before:`ps-1.5`,after:`pe-1.5`,input:`px-1.5`,clear:`size-5`,glyph:12},medium:{before:`ps-2`,after:`pe-2`,input:`px-2`,clear:`h-6 w-6`,glyph:16},large:{before:`ps-3`,after:`pe-3`,input:`px-3`,clear:`size-8`,glyph:20}},S=new Set([`type`,`disabled`,`form`,`formAction`,`formEncType`,`formMethod`,`formNoValidate`,`formTarget`,`name`,`value`,`popoverTarget`,`popoverTargetAction`]),C=/^on[A-Z]/,w=new Set([`aria-label`,`aria-labelledby`,`title`]),T=`Clear search`,E=()=>{},ee=`a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable="false"])`,D={kind:`default`,buttonProps:{},content:null,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1};function O(e){return e===`button`||e===d.Button}function k(e,n,r){let a=i.slotRendersContent(r),s=i.materialiseSlotContent(r),c=v.hasTextLabel(s);if(e===d.Button){let e={};for(let[t,r]of Object.entries(n))t!==`children`&&!f.BUTTON_OWN_PROP_KEYS.has(t)&&(e[t]=r);let r=i.renderSlot(n.icon,`span`,t.cn(o.searchBoxClassNames.dismissIcon,`inline-flex`),{"aria-hidden":!0});return{buttonProps:e,content:r||a?f.placeButtonIcon(r,s,n.iconPosition):null,contentMayName:!0,literalTextLabel:c,disabledFocusable:!!n.disabledFocusable}}let{as:l,children:u,...p}=n;return{buttonProps:p,content:a?s:null,contentMayName:!0,literalTextLabel:c,disabledFocusable:!1}}function te(e,r){let a=e;if(n.isElementOfType(a,`button`,d.Button)){let e=a.props.children;return{kind:`element`,...k(n.getElementType(a),a.props,e)}}let s=i.resolveSlot(e,`span`);if(!s)return D;let{Component:c,props:l,children:u}=s;if(O(c))return{kind:`button-object`,...k(c,l,u)};let f={},m={},h=!1;for(let[e,t]of Object.entries(l))t!==void 0&&(S.has(e)||C.test(e)?(f[e]=t,h=!0):w.has(e)?f[e]=t:m[e]=t);let g=i.slotRendersContent(u),_=i.slotWrapsDefaultContent(c,{...m,children:u});if(_&&Object.keys(f).length===0&&Object.keys(m).length===0)return D;let v=_?(0,b.jsx)(p.DismissIcon,{size:x[r].glyph}):g?u:void 0,T={"aria-hidden":!0,...m,className:t.cn(o.searchBoxClassNames.dismissIcon,m.className)},E=v===void 0?y.createElement(c,T):y.createElement(c,T,v);return{kind:h?`button-object`:`content`,buttonProps:f,content:E,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1}}var A=({value:e,defaultValue:n=``,onValueChange:d,onChange:S,onClear:C,placeholder:D=`Search`,disabled:O,size:k,appearance:A,contentBefore:j,contentAfter:M,dismiss:ne,className:re,ref:ie,controlRef:ae,id:oe,"aria-label":se,"aria-labelledby":ce,"aria-describedby":le,"aria-invalid":ue,"aria-required":de,"aria-errormessage":fe,"aria-details":pe,required:me,name:he,form:N,readOnly:P,autoComplete:F,autoFocus:I,autoCapitalize:L,autoCorrect:R,inputMode:ge,enterKeyHint:_e,spellCheck:ve,maxLength:ye,minLength:be,pattern:xe,tabIndex:Se,onFocus:Ce,onBlur:z,onKeyDown:we,onKeyUp:Te,onMouseDown:Ee,hidden:De,...Oe})=>{S!==void 0&&r.warnDeprecated(`SearchBox`,`onChange`,`onValueChange`);let[B,V]=s.useControllable(e,n,e=>{d?.(e),S?.(e)}),H=y.useRef(null),ke=c.useMergedRefs(H,ae);_.useFormReset(H,()=>V(n),N);let U=l.useFieldControl({id:oe,"aria-label":se,"aria-labelledby":ce,"aria-describedby":le,"aria-invalid":ue,"aria-required":de,required:me},{nativeRequired:!0}),Ae=g.isInvalidLook(!1,U[`aria-invalid`]),{size:W,appearance:G}=h.useInputLook(k,A),K=te(ne,W),q=K.kind;y.useEffect(()=>{q===`element`?r.warnOnce(`SearchBox:dismiss-button-element`,"SearchBox: `dismiss` received a button element; its props were merged into the built-in clear button (buttons cannot be nested). Pass icon content instead, e.g. `dismiss={<MyIcon />}`."):q===`button-object`&&r.warnOnce(`SearchBox:dismiss-button-object`,'SearchBox: `dismiss` with button props (`as: "button"`, `onClick`, `type`, …) is deprecated and will be removed in 1.0; the props were merged into the built-in clear button. Pass icon content instead, e.g. `dismiss={<MyIcon />}`.')},[q]);let je=()=>{V(``),C?.(),H.current?.focus()},Me=e=>{e.key!==`Escape`||e.nativeEvent.isComposing||!B||P||O||(e.preventDefault(),V(``),C?.())},Ne=e=>{let t=H.current,n=e.currentTarget,r=e.target;if(!t||O||e.button!==0||r===t||!(r instanceof Element)||!n.contains(r))return;let i=r.closest(ee);i&&n.contains(i)||(e.preventDefault(),t.focus())},{onClick:Pe,ref:Fe,...J}=K.buttonProps,Y=Object.keys(J).some(e=>w.has(e)&&J[e]!=null),X=K.contentMayName&&!Y,Z=K.literalTextLabel,[Q,Ie]=y.useState(null),Le=y.useCallback(e=>Q?v.observeTextLabel(Q,e):E,[Q]),Re=y.useSyncExternalStore(Le,()=>Q?v.hasRenderedTextLabel(Q):Z,()=>Z),ze=X&&Re,Be=c.useMergedRefs(Fe,X?Ie:void 0),$=m.mergeProps({type:`button`,disabled:O,"aria-label":Y||ze?void 0:T,className:t.cn(o.searchBoxClassNames.dismissButton,`me-1 flex shrink-0 items-center justify-center rounded bg-transparent p-0 text-muted-foreground`,x[W].clear,W===`small`&&t.cn(`relative`,`before:absolute before:-inset-0.5`),`not-disabled:not-aria-disabled:hover:text-foreground`,u.focusRing,`disabled:cursor-not-allowed`,f.mergedAriaDisabledClasses)},J),Ve=$.dangerouslySetInnerHTML==null?q===`content`?K.content:K.content??(0,b.jsx)(p.DismissIcon,{size:x[W].glyph,className:o.searchBoxClassNames.dismissIcon}):void 0,He=i.slotRendersContent(j),Ue=i.slotRendersContent(M);return(0,b.jsxs)(`div`,{ref:ie,"data-size":W,"data-appearance":G,className:t.cn(o.searchBoxClassNames.root,`relative inline-flex w-full items-center`,u.inputHeightClasses[W],u.inputTextClasses[W],u.inputAppearanceClasses[G],`text-foreground`,u.inputFocusWithin,Ae&&`border-destructive`,O&&`cursor-not-allowed opacity-50 has-focus-visible:opacity-100`,re),hidden:De,...Oe,onMouseDown:e=>a.composeEventHandlers(Ee,Ne)(e),children:[(0,b.jsx)(`span`,{className:t.cn(o.searchBoxClassNames.contentBefore,`flex shrink-0 items-center`,x[W].before),children:He?i.renderSlot(j,`span`,`shrink-0`):(0,b.jsx)(p.SearchIcon,{size:x[W].glyph,className:`text-muted-foreground`})}),(0,b.jsx)(`input`,{ref:ke,type:`search`,value:B,onChange:e=>V(e.target.value),placeholder:D,disabled:O,className:t.cn(o.searchBoxClassNames.input,`h-full min-w-0 flex-1 appearance-none border-none bg-transparent text-foreground`,x[W].input,u.inputTextClasses[W],`placeholder:text-muted-foreground`,`focus:outline-hidden`,`disabled:cursor-not-allowed`,`[&::-webkit-search-cancel-button]:hidden`),"aria-errormessage":fe,"aria-details":pe,name:he,form:N,readOnly:P,autoComplete:F,autoFocus:I,autoCapitalize:L,autoCorrect:R,inputMode:ge,enterKeyHint:_e,spellCheck:ve,maxLength:ye,minLength:be,pattern:xe,tabIndex:Se,onFocus:Ce,onBlur:z,onKeyDown:a.composeEventHandlers(we,Me),onKeyUp:Te,...U}),Ue&&(0,b.jsx)(`span`,{className:t.cn(o.searchBoxClassNames.contentAfter,`flex shrink-0 items-center`,x[W].after),children:i.renderSlot(M,`span`,`shrink-0`)}),B&&!P?(0,b.jsx)(`button`,{...$,ref:Be,type:$.type??`button`,disabled:O||$.disabled,onClick:e=>a.composeEventHandlers(Pe,je)(e),...K.disabledFocusable?f.MERGED_DISABLED_FOCUSABLE_PROPS:void 0,children:Ve}):null]})};A.displayName=`SearchBox`,exports.SearchBox=A;
 //# sourceMappingURL=SearchBox.cjs.map