@mortenbrudvik/waveui 0.7.0 → 0.8.0

package/dist/components/input/Rating.mjs

@@ -2,184 +2,185 @@
 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 { ratingClassNames as i, ratingDisplayClassNames as a } from "../../lib/classNames.mjs";
+import { useControllable as o } from "../../hooks/useControllable.mjs";
+import { getArrowIntent as s, getDirection as c } from "../../lib/direction.mjs";
+import { useRovingTabIndex as l } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as u } from "../../hooks/useMergedRefs.mjs";
+import { useFieldContext as d, useFieldControl as f } from "../../hooks/useFieldControl.mjs";
+import { focusRing as p } from "../../lib/styles.mjs";
+import { StarIcon as m } from "../../lib/icons.mjs";
+import { useFormReset as h } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as g } from "../internal/HiddenInput.mjs";
+import * as _ from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/components/input/Rating.tsx
-var v = (e) => `${e} star${e === 1 ? "" : "s"}`, y = {
+var b = (e) => `${e} star${e === 1 ? "" : "s"}`, x = {
 	"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 = {
+}, S = {
 	"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, {
+function C({ filled: e, className: t }) {
+	return e ? /* @__PURE__ */ v(m, { className: t }) : /* @__PURE__ */ v(m, {
 		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) => {
+var w = ({ value: n, defaultValue: a, onValueChange: m, onChange: w, max: T = 5, size: E = "medium", disabled: D = !1, name: O, required: k, form: A, labels: j, className: M, id: N, "aria-label": P, "aria-labelledby": F, "aria-describedby": I, "aria-invalid": ee, "aria-required": te, onKeyDown: ne, onFocus: L, onMouseLeave: R, ref: z, ...B }) => {
+	w !== void 0 && t("Rating", "onChange", "onValueChange");
+	let V = a ?? 0, [H, U] = o(n, V, (e) => {
+		m?.(e), w?.(e);
+	}), [W, G] = _.useState(0), [K, q] = _.useState(D);
+	K !== D && (q(D), D && G(0));
+	let J = D ? H : W || H, { containerProps: Y, getTabIndex: X, focusValue: re } = l({ activeValue: H > 0 ? String(H) : null }), ie = (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 = w;
-		else if (e.key === "ArrowUp") t = V + 1;
-		else if (e.key === "ArrowDown") t = V - 1;
+		else if (e.key === "End") t = T;
+		else if (e.key === "ArrowUp") t = H + 1;
+		else if (e.key === "ArrowDown") t = H - 1;
 		else {
-			let n = a(e.key, {
+			let n = s(e.key, {
 				orientation: "horizontal",
-				dir: o(e.currentTarget)
+				dir: c(e.currentTarget)
 			});
 			if (!n) return;
-			t = n === "next" ? V + 1 : V - 1;
+			t = n === "next" ? H + 1 : H - 1;
 		}
-		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,
+		e.preventDefault(), t = Math.min(t, T), !(D || t < 1 || t === H) && (re(String(t)), U(t));
+	}, Z = _.useRef(null), ae = u(z, Y.ref, Z), oe = d(), Q = f({
+		id: N,
+		"aria-label": P,
+		"aria-labelledby": F,
+		"aria-describedby": I,
 		"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 = () => {
+		"aria-required": te ?? k
+	}, { labelable: !1 }), se = k ?? oe?.required ?? !1, ce = Q["aria-label"] === void 0 && Q["aria-labelledby"] === void 0 ? "Rating" : void 0;
+	h(Z, () => U(V), A);
+	let le = () => {
 		Z.current?.querySelector("[data-roving-value][tabindex=\"0\"]")?.focus();
-	}, ce = y[T], le = A?.star ?? v;
-	return /* @__PURE__ */ _("div", {
+	}, $ = x[E], ue = j?.star ?? b;
+	return /* @__PURE__ */ y("div", {
 		role: "radiogroup",
-		"aria-label": $,
+		"aria-label": ce,
 		...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": D || void 0,
+		className: e(i.root, "relative inline-flex items-center gap-0.5", D && "pointer-events-none opacity-50", M),
+		...B,
+		ref: ae,
 		"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", {
+		onKeyDown: r(ne, ie),
+		onFocus: r(L, Y.onFocus, { checkDefaultPrevented: !1 }),
+		onMouseLeave: r(R, () => G(0), { checkDefaultPrevented: !1 }),
+		children: [Array.from({ length: T }, (t, n) => {
+			let r = n + 1, a = String(r), o = J >= r;
+			return /* @__PURE__ */ v("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"),
+				"aria-checked": H === r,
+				"aria-label": ue(r, T),
+				"data-roving-value": a,
+				tabIndex: D ? -1 : X(a),
+				disabled: D,
+				className: e(i.star, "inline-flex cursor-pointer rounded border-0 bg-transparent transition-colors motion-reduce:transition-none disabled:cursor-not-allowed", S[E], p, o ? "text-rating" : "text-stroke-accessible"),
 				onClick: () => {
-					E || H(r);
+					D || U(r);
 				},
 				onMouseEnter: () => {
-					E || W(r);
+					D || G(r);
 				},
-				children: /* @__PURE__ */ g(x, {
-					filled: a,
-					className: ce
+				children: /* @__PURE__ */ v(C, {
+					filled: o,
+					className: e(i.icon, $)
 				})
-			}, i);
-		}), /* @__PURE__ */ g(m, {
+			}, a);
+		}), /* @__PURE__ */ v(g, {
 			type: "radio",
-			name: D,
-			form: k,
-			disabled: E,
-			value: V > 0 ? String(V) : "",
-			required: oe,
-			onInvalid: se
+			name: O,
+			form: A,
+			disabled: D,
+			value: H > 0 ? String(H) : "",
+			required: se,
+			onInvalid: le
 		})]
 	});
 };
-S.displayName = "Rating";
-var C = {
+w.displayName = "Rating";
+var T = {
 	"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) {
+}, E = (e, t, n) => `Rating: ${n} out of ${t}`, D = (e, t) => e === 1 ? "1 rating" : `${t} ratings`;
+function O(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 k = ({ value: t, max: r = 5, size: i = "medium", showValue: o = !1, count: s, compact: c = !1, locale: l, labels: u, className: d, ref: f, ...p }) => {
+	let m = x[i], h = O(l), g = l !== void 0 && h === void 0;
+	_.useEffect(() => {
+		g && n(`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.`);
+	}, [g, l]);
+	let b = new Intl.NumberFormat(h, { maximumFractionDigits: 1 }).format(t), S = s === void 0 ? void 0 : new Intl.NumberFormat(h).format(s), w = (u?.rating ?? E)(t, r, b), k = s === void 0 || S === void 0 ? w : `${w}, ${(u?.count ?? D)(s, S)}`, A = o || c || s !== void 0, j = T[i];
+	return /* @__PURE__ */ y("div", {
+		ref: f,
 		role: "img",
-		"aria-label": O,
-		"data-compact": s ? "" : void 0,
-		className: e("inline-flex items-center gap-0.5", u),
-		...f,
+		"aria-label": k,
+		"data-compact": c ? "" : void 0,
+		className: e(a.root, "inline-flex items-center gap-0.5", d),
+		...p,
 		children: [
-			s ? /* @__PURE__ */ g("span", {
-				className: "inline-flex text-rating",
-				children: /* @__PURE__ */ g(x, {
+			c ? /* @__PURE__ */ v("span", {
+				className: e(a.star, "inline-flex text-rating"),
+				children: /* @__PURE__ */ v(C, {
 					filled: !0,
-					className: p
+					className: e(a.icon, m)
 				})
 			}) : 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, {
+				if (i > 0 && i < 100) return /* @__PURE__ */ y("span", {
+					className: e(a.star, "relative inline-flex text-stroke-accessible"),
+					children: [/* @__PURE__ */ v(C, {
 						filled: !1,
-						className: p
-					}), /* @__PURE__ */ g("span", {
+						className: e(a.icon, m)
+					}), /* @__PURE__ */ v("span", {
 						className: "absolute inset-y-0 start-0 flex overflow-hidden text-rating",
 						style: { width: `${i}%` },
-						children: /* @__PURE__ */ g(x, {
+						children: /* @__PURE__ */ v(C, {
 							filled: !0,
-							className: e(p, "shrink-0")
+							className: e(a.icon, m, "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
+				let o = i === 100;
+				return /* @__PURE__ */ v("span", {
+					className: e(a.star, "inline-flex", o ? "text-rating" : "text-stroke-accessible"),
+					children: /* @__PURE__ */ v(C, {
+						filled: o,
+						className: e(a.icon, m)
 					})
 				}, r);
 			}),
-			k && /* @__PURE__ */ g("span", {
-				className: e("ms-1 font-semibold text-foreground", A),
+			A && /* @__PURE__ */ v("span", {
+				className: e(a.value, "ms-1 font-semibold text-foreground", j),
 				children: b
 			}),
-			S !== void 0 && /* @__PURE__ */ _("span", {
-				className: e("ms-1 text-muted-foreground", A),
+			S !== void 0 && /* @__PURE__ */ y("span", {
+				className: e(a.count, "ms-1 text-muted-foreground", j),
 				children: [
 					"(",
 					S,
@@ -189,8 +190,8 @@ var D = ({ value: t, max: r = 5, size: i = "medium", showValue: a = !1, count: o
 		]
 	});
 };
-D.displayName = "RatingDisplay";
+k.displayName = "RatingDisplay";
 //#endregion
-export { S as Rating, D as RatingDisplay };
+export { w as Rating, k as RatingDisplay };
 
 //# 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","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","ratingClassNames","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","ratingDisplayClassNames","percent"],"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 { 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        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      {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              ratingClassNames.star,\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={cn(ratingClassNames.icon, 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(ratingDisplayClassNames.root, 'inline-flex items-center gap-0.5', className)}\n      {...rest}\n    >\n      {compact ? (\n        <span className={cn(ratingDisplayClassNames.star, 'inline-flex text-rating')}>\n          <Star filled className={cn(ratingDisplayClassNames.icon, 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\n                key={i}\n                className={cn(\n                  ratingDisplayClassNames.star,\n                  'relative inline-flex text-stroke-accessible',\n                )}\n              >\n                <Star filled={false} className={cn(ratingDisplayClassNames.icon, 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(ratingDisplayClassNames.icon, starSize, 'shrink-0')} />\n                </span>\n              </span>\n            );\n          }\n          const filled = percent === 100;\n          return (\n            <span\n              key={i}\n              className={cn(\n                ratingDisplayClassNames.star,\n                'inline-flex',\n                filled ? 'text-rating' : 'text-stroke-accessible',\n              )}\n            >\n              <Star filled={filled} className={cn(ratingDisplayClassNames.icon, starSize)} />\n            </span>\n          );\n        })\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};\nRatingDisplay.displayName = 'RatingDisplay';\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("./Input.cjs"),g=require("../../hooks/useFormReset.cjs"),_=require("../../lib/labelInName.cjs");let v=require("react");v=e.__toESM(v,1);let y=require("react/jsx-runtime");var b=new Set([`type`,`disabled`,`form`,`formAction`,`formEncType`,`formMethod`,`formNoValidate`,`formTarget`,`name`,`value`,`popoverTarget`,`popoverTargetAction`]),x=/^on[A-Z]/,S=new Set([`aria-label`,`aria-labelledby`,`title`]),C=`Clear search`,w=()=>{},T=`a[href], button, input, select, textarea, [tabindex], [contenteditable]:not([contenteditable="false"])`,E={kind:`default`,buttonProps:{},content:null,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1};function D(e){return e===`button`||e===d.Button}function O(e,n,r){let a=i.slotRendersContent(r),s=i.materialiseSlotContent(r),c=_.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 k(e){let r=e;if(n.isElementOfType(r,`button`,d.Button)){let e=r.props.children;return{kind:`element`,...O(n.getElementType(r),r.props,e)}}let a=i.resolveSlot(e,`span`);if(!a)return E;let{Component:s,props:c,children:l}=a;if(D(s))return{kind:`button-object`,...O(s,c,l)};let u={},f={},m=!1;for(let[e,t]of Object.entries(c))t!==void 0&&(b.has(e)||x.test(e)?(u[e]=t,m=!0):S.has(e)?u[e]=t:f[e]=t);let h=i.slotRendersContent(l),g=i.slotWrapsDefaultContent(s,{...f,children:l});if(g&&Object.keys(u).length===0&&Object.keys(f).length===0)return E;let _=g?(0,y.jsx)(p.DismissIcon,{}):h?l:void 0,C={"aria-hidden":!0,...f,className:t.cn(o.searchBoxClassNames.dismissIcon,f.className)},w=_===void 0?v.createElement(s,C):v.createElement(s,C,_);return{kind:m?`button-object`:`content`,buttonProps:u,content:w,contentMayName:!1,literalTextLabel:!1,disabledFocusable:!1}}var A=({value:e,defaultValue:n=``,onValueChange:d,onChange:b,onClear:x,placeholder:E=`Search`,disabled:D,contentBefore:O,contentAfter:A,dismiss:ee,className:te,ref:ne,controlRef:re,id:ie,"aria-label":ae,"aria-labelledby":oe,"aria-describedby":se,"aria-invalid":ce,"aria-required":le,"aria-errormessage":ue,"aria-details":de,required:fe,name:pe,form:j,readOnly:M,autoComplete:N,autoFocus:P,autoCapitalize:F,autoCorrect:I,inputMode:L,enterKeyHint:R,spellCheck:z,maxLength:B,minLength:me,pattern:he,tabIndex:ge,onFocus:_e,onBlur:ve,onKeyDown:ye,onKeyUp:be,onMouseDown:xe,hidden:Se,...Ce})=>{b!==void 0&&r.warnDeprecated(`SearchBox`,`onChange`,`onValueChange`);let[V,H]=s.useControllable(e,n,e=>{d?.(e),b?.(e)}),U=v.useRef(null),we=c.useMergedRefs(U,re);g.useFormReset(U,()=>H(n),j);let W=l.useFieldControl({id:ie,"aria-label":ae,"aria-labelledby":oe,"aria-describedby":se,"aria-invalid":ce,"aria-required":le,required:fe},{nativeRequired:!0}),Te=h.isInvalidLook(!1,W[`aria-invalid`]),G=k(ee),K=G.kind;v.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 Ee=()=>{H(``),x?.(),U.current?.focus()},De=e=>{e.key!==`Escape`||e.nativeEvent.isComposing||!V||M||D||(e.preventDefault(),H(``),x?.())},Oe=e=>{let t=U.current,n=e.currentTarget,r=e.target;if(!t||D||e.button!==0||r===t||!(r instanceof Element)||!n.contains(r))return;let i=r.closest(T);i&&n.contains(i)||(e.preventDefault(),t.focus())},{onClick:ke,ref:Ae,...q}=G.buttonProps,J=Object.keys(q).some(e=>S.has(e)&&q[e]!=null),Y=G.contentMayName&&!J,X=G.literalTextLabel,[Z,je]=v.useState(null),Q=v.useCallback(e=>Z?_.observeTextLabel(Z,e):w,[Z]),Me=v.useSyncExternalStore(Q,()=>Z?_.hasRenderedTextLabel(Z):X,()=>X),Ne=Y&&Me,Pe=c.useMergedRefs(Ae,Y?je:void 0),$=m.mergeProps({type:`button`,disabled:D,"aria-label":J||Ne?void 0:C,className:t.cn(o.searchBoxClassNames.dismissButton,`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`,u.focusRing,`disabled:cursor-not-allowed`,f.mergedAriaDisabledClasses)},q),Fe=$.dangerouslySetInnerHTML==null?K===`content`?G.content:G.content??(0,y.jsx)(p.DismissIcon,{className:o.searchBoxClassNames.dismissIcon}):void 0,Ie=i.slotRendersContent(O),Le=i.slotRendersContent(A);return(0,y.jsxs)(`div`,{ref:ne,className:t.cn(o.searchBoxClassNames.root,`relative inline-flex h-8 w-full items-center rounded border border-input border-b-stroke-accessible bg-background text-body-1 text-foreground`,u.inputFocusWithin,Te&&`border-destructive focus-within:border-b-destructive`,D&&`cursor-not-allowed opacity-50 has-focus-visible:opacity-100`,te),hidden:Se,...Ce,onMouseDown:e=>a.composeEventHandlers(xe,Oe)(e),children:[(0,y.jsx)(`span`,{className:t.cn(o.searchBoxClassNames.contentBefore,`flex shrink-0 items-center ps-2`),children:Ie?i.renderSlot(O,`span`,`shrink-0`):(0,y.jsx)(p.SearchIcon,{className:`text-muted-foreground`})}),(0,y.jsx)(`input`,{ref:we,type:`search`,value:V,onChange:e=>H(e.target.value),placeholder:E,disabled:D,className:t.cn(o.searchBoxClassNames.input,`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":ue,"aria-details":de,name:pe,form:j,readOnly:M,autoComplete:N,autoFocus:P,autoCapitalize:F,autoCorrect:I,inputMode:L,enterKeyHint:R,spellCheck:z,maxLength:B,minLength:me,pattern:he,tabIndex:ge,onFocus:_e,onBlur:ve,onKeyDown:a.composeEventHandlers(ye,De),onKeyUp:be,...W}),Le&&(0,y.jsx)(`span`,{className:t.cn(o.searchBoxClassNames.contentAfter,`flex shrink-0 items-center pe-2`),children:i.renderSlot(A,`span`,`shrink-0`)}),V&&!M?(0,y.jsx)(`button`,{...$,ref:Pe,type:$.type??`button`,disabled:D||$.disabled,onClick:e=>a.composeEventHandlers(ke,Ee)(e),...G.disabledFocusable?f.MERGED_DISABLED_FOCUSABLE_PROPS:void 0,children:Fe}):null]})};A.displayName=`SearchBox`,exports.SearchBox=A;
 //# sourceMappingURL=SearchBox.cjs.map