@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/input/RadioGroup.mjs

@@ -3,137 +3,138 @@ import { cn as e } from "../../lib/cn.mjs";
 import { isDev as t, reportMissingContext as n, warnDeprecated as r, warnOnce as i } from "../../lib/dev.mjs";
 import { materialiseSlotContent as a, slotRendersContent as o } from "../../lib/slot.mjs";
 import { composeEventHandlers as s } from "../../lib/composeEventHandlers.mjs";
-import { useControllable as c } from "../../hooks/useControllable.mjs";
-import { useId as l } from "../../hooks/useId.mjs";
-import { useRovingTabIndex as u } from "../../hooks/useRovingTabIndex.mjs";
-import { useMergedRefs as d } from "../../hooks/useMergedRefs.mjs";
-import { joinIds as f } from "../../lib/aria.mjs";
-import { useFieldContext as p, useFieldControl as m } from "../../hooks/useFieldControl.mjs";
-import { focusRing as h, forcedColors as g } from "../../lib/styles.mjs";
-import { useFormReset as _ } from "../../hooks/useFormReset.mjs";
-import { HiddenInput as v } from "../internal/HiddenInput.mjs";
-import * as y from "react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { radioGroupClassNames as c, radioGroupItemClassNames as l } from "../../lib/classNames.mjs";
+import { useControllable as u } from "../../hooks/useControllable.mjs";
+import { useId as d } from "../../hooks/useId.mjs";
+import { useRovingTabIndex as f } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as p } from "../../hooks/useMergedRefs.mjs";
+import { joinIds as m } from "../../lib/aria.mjs";
+import { useFieldContext as h, useFieldControl as g } from "../../hooks/useFieldControl.mjs";
+import { focusRing as _, forcedColors as v } from "../../lib/styles.mjs";
+import { useFormReset as y } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as b } from "../internal/HiddenInput.mjs";
+import * as x from "react";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/components/input/RadioGroup.tsx
-var S = y.createContext(null);
-S.displayName = "RadioGroupContext";
-var C = {
+var w = x.createContext(null);
+w.displayName = "RadioGroupContext";
+var T = {
 	value: "",
 	disabled: !1,
 	select: () => {},
 	getTabIndex: () => -1
 };
-function w(e) {
-	return y.useContext(S) || (n(e, "a RadioGroup"), C);
+function E(e) {
+	return x.useContext(w) || (n(e, "a RadioGroup"), T);
 }
-function T(e) {
+function D(e) {
 	i(`RadioGroup:duplicate:${e}`, `RadioGroup: several items share the value "${e}". Item values must be unique within a RadioGroup; items that share a value are checked together.`);
 }
-var E = ({ value: n, defaultValue: i, onValueChange: a, onChange: o, orientation: l = "vertical", disabled: f = !1, name: h, required: g, form: C, children: w, className: E, id: D, "aria-label": O, "aria-labelledby": k, "aria-describedby": A, "aria-invalid": j, "aria-required": M, onKeyDown: N, onFocus: P, ref: F, ...I }) => {
+var O = ({ value: n, defaultValue: i, onValueChange: a, onChange: o, orientation: l = "vertical", disabled: d = !1, name: m, required: _, form: v, children: T, className: E, id: O, "aria-label": k, "aria-labelledby": A, "aria-describedby": j, "aria-invalid": M, "aria-required": N, onKeyDown: P, onFocus: F, ref: I, ...L }) => {
 	o !== void 0 && r("RadioGroup", "onChange", "onValueChange");
-	let L = i ?? "", [R, z] = c(n, L, (e) => {
+	let R = i ?? "", [z, B] = u(n, R, (e) => {
 		a?.(e), o?.(e);
-	}), { containerProps: B, getTabIndex: V } = u({
-		activeValue: R,
+	}), { containerProps: V, getTabIndex: H } = f({
+		activeValue: z,
 		orientation: "both",
 		loop: !0,
-		onFocusMove: (e) => z(e)
-	}), H = y.useRef(null), U = d(F, B.ref, H), W = p(), G = m({
-		id: D,
-		"aria-label": O,
-		"aria-labelledby": k,
-		"aria-describedby": A,
-		"aria-invalid": j,
-		"aria-required": M ?? g
-	}, { labelable: !1 }), K = g ?? W?.required ?? !1;
-	_(H, () => z(L), C), y.useEffect(() => {
-		let e = H.current;
+		onFocusMove: (e) => B(e)
+	}), U = x.useRef(null), W = p(I, V.ref, U), G = h(), K = g({
+		id: O,
+		"aria-label": k,
+		"aria-labelledby": A,
+		"aria-describedby": j,
+		"aria-invalid": M,
+		"aria-required": N ?? _
+	}, { labelable: !1 }), q = _ ?? G?.required ?? !1;
+	y(U, () => B(R), v), x.useEffect(() => {
+		let e = U.current;
 		if (!t || !e) return;
 		let n = /* @__PURE__ */ new Set();
 		for (let t of e.querySelectorAll("[role=\"radio\"][data-roving-value]")) {
 			if (t.closest("[data-roving-container]") !== e) continue;
 			let r = t.getAttribute("data-roving-value") ?? "";
-			n.has(r) && T(r), n.add(r);
+			n.has(r) && D(r), n.add(r);
 		}
 	});
-	let q = () => {
-		H.current?.querySelector("[data-roving-value][tabindex=\"0\"]")?.focus();
-	}, J = (e) => {
+	let J = () => {
+		U.current?.querySelector("[data-roving-value][tabindex=\"0\"]")?.focus();
+	}, Y = (e) => {
 		let t = e.target, n = t.closest("[data-roving-value]"), r = n !== null && n.closest("[data-roving-container]") === e.currentTarget;
-		(t === e.currentTarget || r) && B.onKeyDown(e);
-	}, Y = y.useMemo(() => ({
-		value: R,
-		disabled: f,
-		select: z,
-		getTabIndex: V
+		(t === e.currentTarget || r) && V.onKeyDown(e);
+	}, X = x.useMemo(() => ({
+		value: z,
+		disabled: d,
+		select: B,
+		getTabIndex: H
 	}), [
-		R,
-		f,
 		z,
-		V
+		d,
+		B,
+		H
 	]);
-	return /* @__PURE__ */ b(S.Provider, {
-		value: Y,
-		children: /* @__PURE__ */ x("div", {
+	return /* @__PURE__ */ S(w.Provider, {
+		value: X,
+		children: /* @__PURE__ */ C("div", {
 			role: "radiogroup",
-			...G,
+			...K,
 			"aria-orientation": l,
-			"aria-disabled": f || void 0,
-			className: e("relative flex", l === "vertical" ? "flex-col gap-2" : "flex-row gap-4", E),
-			...I,
-			ref: U,
+			"aria-disabled": d || void 0,
+			className: e(c.root, "relative flex", l === "vertical" ? "flex-col gap-2" : "flex-row gap-4", E),
+			...L,
+			ref: W,
 			"data-roving-container": "",
-			onKeyDown: s(N, J),
-			onFocus: s(P, B.onFocus, { checkDefaultPrevented: !1 }),
-			children: [w, /* @__PURE__ */ b(v, {
+			onKeyDown: s(P, Y),
+			onFocus: s(F, V.onFocus, { checkDefaultPrevented: !1 }),
+			children: [T, /* @__PURE__ */ S(b, {
 				type: "radio",
-				name: h,
-				form: C,
-				disabled: f,
-				value: R,
-				required: K,
-				onInvalid: q
+				name: m,
+				form: v,
+				disabled: d,
+				value: z,
+				required: q,
+				onInvalid: J
 			})]
 		})
 	});
 };
-E.displayName = "RadioGroup";
-var D = "forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none";
-function O({ value: t, label: n, disabled: r, className: c, labelClassName: u, onClick: d, "aria-labelledby": p, children: m, ref: _, ...v }) {
-	let S = w("RadioItem"), C = o(m);
-	y.useEffect(() => {
-		C && i("RadioItem:children", "RadioItem: children are not rendered. Pass the label in `label`.");
-	}, [C]);
-	let T = l("radio-item"), E = l("radio-item-label"), O = !!(r || S.disabled), k = S.value === t, A = o(n), j = A && v["aria-label"] === void 0 ? f(p, E) : p;
-	return /* @__PURE__ */ x("label", {
-		className: e("inline-flex items-start gap-2 select-none", O ? "cursor-not-allowed opacity-50 has-focus-visible:opacity-100" : "cursor-pointer", c),
-		children: [/* @__PURE__ */ b("button", {
+O.displayName = "RadioGroup";
+var k = "forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none";
+function A({ value: t, label: n, disabled: r, className: c, labelClassName: u, onClick: f, "aria-labelledby": p, children: h, ref: g, ...y }) {
+	let b = E("RadioItem"), w = o(h);
+	x.useEffect(() => {
+		w && i("RadioItem:children", "RadioItem: children are not rendered. Pass the label in `label`.");
+	}, [w]);
+	let T = d("radio-item"), D = d("radio-item-label"), O = !!(r || b.disabled), A = b.value === t, j = o(n), M = j && y["aria-label"] === void 0 ? m(p, D) : p;
+	return /* @__PURE__ */ C("label", {
+		className: e(l.root, "inline-flex items-start gap-2 select-none", O ? "cursor-not-allowed opacity-50 has-focus-visible:opacity-100" : "cursor-pointer", c),
+		children: [/* @__PURE__ */ S("button", {
 			id: T,
 			type: "button",
 			role: "radio",
-			...v,
-			ref: _,
-			"aria-labelledby": j,
-			"aria-checked": k,
+			...y,
+			ref: g,
+			"aria-labelledby": M,
+			"aria-checked": A,
 			disabled: O,
-			tabIndex: O ? -1 : S.getTabIndex(t),
+			tabIndex: O ? -1 : b.getTabIndex(t),
 			"data-roving-value": t,
-			onClick: s(d, () => S.select(t)),
-			className: e("flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border bg-transparent p-0 transition-colors motion-reduce:transition-none", A && "mt-px", h, k ? "border-2 border-primary" : "border-stroke-accessible", O ? g.disabled : k ? "forced-colors:border-[Highlight]" : g.control),
-			children: k && /* @__PURE__ */ b("span", {
+			onClick: s(f, () => b.select(t)),
+			className: e(l.indicator, "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border bg-transparent p-0 transition-colors motion-reduce:transition-none", j && "mt-px", _, A ? "border-2 border-primary" : "border-stroke-accessible", O ? v.disabled : A ? "forced-colors:border-[Highlight]" : v.control),
+			children: A && /* @__PURE__ */ S("span", {
 				"aria-hidden": "true",
-				className: e("block h-2 w-2 rounded-full bg-primary", O ? D : g.selectedLeaf)
+				className: e("block h-2 w-2 rounded-full bg-primary", O ? k : v.selectedLeaf)
 			})
-		}), A && /* @__PURE__ */ b("span", {
-			id: E,
-			className: e("text-body-1 text-foreground", u),
+		}), j && /* @__PURE__ */ S("span", {
+			id: D,
+			className: e(l.label, "text-body-1 text-foreground", u),
 			children: a(n)
 		})]
 	});
 }
-O.displayName = "RadioItem";
-var k = O, A = /* @__PURE__ */ Object.assign(E, { Item: O });
+A.displayName = "RadioItem";
+var j = A, M = /* @__PURE__ */ Object.assign(O, { Item: A });
 //#endregion
-export { A as RadioGroup, k as RadioGroupItem, O as RadioItem };
+export { M as RadioGroup, j as RadioGroupItem, A as RadioItem };
 
 //# sourceMappingURL=RadioGroup.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.mjs","names":["useId","useId$1","React","RadioGroupContext","INERT_CONTEXT","useRadioGroupContext","reportMissingContext","componentName","warnDuplicateValue","value","RadioGroupRoot","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","onChange","warnDeprecated","initialValue","defaultValue","setValue","useControllable","onValueChange","next","useRovingTabIndex","rootRef","mergedRef","useMergedRefs","ref","containerProps","field","useFieldContext","fieldProps","useFieldControl","required","isRequired","useFormReset","form","root","isDev","seen","item","itemValue","focusTabStop","handleKeyDown","target","event","fromOwnItem","contextValue","disabled","getTabIndex","orientation","cn","className","composeEventHandlers","onKeyDown","onFocus","children","HiddenInput","disabledDot","RadioItem","ctx","hasChildren","slotRendersContent","warnOnce","generatedId","labelTextId","isDisabled","selected","hasLabel","label","labelledBy","joinIds","onClick","focusRing","forcedColors","labelClassName","materialiseSlotContent","RadioGroupItem","RadioGroup"],"sources":["../../../src/components/input/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { joinIds } from '../../lib/aria';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { isDev, reportMissingContext, warnDeprecated, warnOnce } from '../../lib/dev';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { Orientation } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/* ---- Context ---- */\ninterface RadioGroupContextValue {\n  /** The selected value (`''` when nothing is selected). */\n  value: string;\n  /** Group-level disabled state. */\n  disabled: boolean;\n  /**\n   * Selects a value when an item is activated (click, Space, Enter). Arrow keys select through\n   * the roving hook's `onFocusMove` instead. Both paths use the same `setValue`, so\n   * `onValueChange` and the deprecated `onChange` alias fire only when the value changes\n   * (C-NAMING).\n   */\n  select: (value: string) => void;\n  /** Roving tab index of an item. */\n  getTabIndex: (value: string) => 0 | -1;\n}\n\nconst RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);\nRadioGroupContext.displayName = 'RadioGroupContext';\n\nconst INERT_CONTEXT: RadioGroupContextValue = {\n  value: '',\n  disabled: false,\n  select: () => {},\n  getTabIndex: () => -1,\n};\n\n/**\n * The surrounding RadioGroup's context; throws in development outside one, logs once and returns\n * an inert value in production (C-CONTEXT).\n */\nfunction useRadioGroupContext(componentName: string): RadioGroupContextValue {\n  const context = React.useContext(RadioGroupContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'a RadioGroup');\n  return INERT_CONTEXT;\n}\n\nfunction warnDuplicateValue(value: string): void {\n  warnOnce(\n    `RadioGroup:duplicate:${value}`,\n    `RadioGroup: several items share the value \"${value}\". Item values must be unique within a ` +\n      'RadioGroup; items that share a value are checked together.',\n  );\n}\n\n/* ---- RadioGroup ---- */\n/** Properties for the RadioGroup component. */\nexport interface RadioGroupProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** Controlled selected value (`''` for no selection). */\n  value?: string;\n  /** Initial selected value for uncontrolled usage (also the value a form reset restores).\n   * @default ''\n   */\n  defaultValue?: string;\n  /** Called with the newly selected value when the selection changes (not when re-selecting). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called with the newly selected value, exactly like `onValueChange`: only when the selection\n   * changes (0.4 also called it when the selected item was chosen again).\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Layout of the radio items (also `aria-orientation`). Arrow keys follow the APG radio pattern\n   * in both layouts: Down/Right select the next item, Up/Left the previous one (Left/Right\n   * mirrored under `dir=\"rtl\"`).\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n  /** Disables every item of the group. */\n  disabled?: boolean;\n  /**\n   * Form field name. With a name, the selected value is submitted with the form. No name is\n   * generated: without one the group adds nothing to `FormData`.\n   */\n  name?: string;\n  /** A value must be selected before the form can be submitted (native validation). */\n  required?: boolean;\n  /** Id of the form the group belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Ref to the `role=\"radiogroup\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// The `role=\"radiogroup\"` root, documented on the exported `RadioGroup` const.\nconst RadioGroupRoot = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onChange,\n  orientation = 'vertical',\n  disabled = false,\n  name,\n  required,\n  form,\n  children,\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  ref,\n  ...rest\n}: RadioGroupProps) => {\n  if (onChange !== undefined) warnDeprecated('RadioGroup', 'onChange', 'onValueChange');\n  const initialValue = defaultValue ?? '';\n  const [value, setValue] = useControllable(valueProp, initialValue, (next: string) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const { containerProps, getTabIndex } = useRovingTabIndex({\n    activeValue: value,\n    orientation: 'both',\n    loop: true,\n    // APG radio group: moving focus also selects the item.\n    onFocusMove: (next) => 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\n  useFormReset(rootRef, () => setValue(initialValue), form);\n\n  // Development diagnostic (C-DEV): the items may sit anywhere inside the group (Fragments, wrapper\n  // elements), so they are read from the DOM after each commit.\n  React.useEffect(() => {\n    const root = rootRef.current;\n    if (!isDev || !root) return;\n    const seen = new Set<string>();\n    for (const item of root.querySelectorAll<HTMLElement>('[role=\"radio\"][data-roving-value]')) {\n      // Its own items only: the roving marker cannot be overridden by the consumer (`role` can).\n      if (item.closest('[data-roving-container]') !== root) continue;\n      const itemValue = item.getAttribute('data-roving-value') ?? '';\n      if (seen.has(itemValue)) warnDuplicateValue(itemValue);\n      seen.add(itemValue);\n    }\n  });\n\n  const focusTabStop = () => {\n    rootRef.current?.querySelector<HTMLElement>('[data-roving-value][tabindex=\"0\"]')?.focus();\n  };\n\n  // Arrow keys, Home and End move between the radios (and select) only when they are pressed on a\n  // radio or on the group itself. A key pressed on other focusable content inside the group (a\n  // link in an item's label) keeps its own meaning, such as scrolling the page.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const target = event.target as Element;\n    const item = target.closest('[data-roving-value]');\n    const fromOwnItem =\n      item !== null && item.closest('[data-roving-container]') === event.currentTarget;\n    if (target === event.currentTarget || fromOwnItem) containerProps.onKeyDown(event);\n  };\n\n  const contextValue = React.useMemo<RadioGroupContextValue>(\n    () => ({ value, disabled, select: setValue, getTabIndex }),\n    [value, disabled, setValue, getTabIndex],\n  );\n\n  return (\n    <RadioGroupContext.Provider value={contextValue}>\n      <div\n        role=\"radiogroup\"\n        {...fieldProps}\n        aria-orientation={orientation}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'relative flex',\n          orientation === 'vertical' ? 'flex-col gap-2' : 'flex-row gap-4',\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      >\n        {children}\n        <HiddenInput\n          type=\"radio\"\n          name={name}\n          form={form}\n          disabled={disabled}\n          value={value}\n          required={isRequired}\n          onInvalid={focusTabStop}\n        />\n      </div>\n    </RadioGroupContext.Provider>\n  );\n};\n\nRadioGroupRoot.displayName = 'RadioGroup';\n\n/* ---- RadioItem ---- */\n/** Forced-colors look of the dot of a disabled selected radio: GrayText, no Highlight fill. */\nconst disabledDot = 'forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** Properties for the RadioItem component. */\nexport interface RadioItemProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value' | 'onChange'\n> {\n  /** Value associated with this radio option. */\n  value: string;\n  /**\n   * Label next to the radio indicator (any phrasing content, links included, but no other form\n   * controls). It names the radio through `aria-labelledby`, after a consumer `aria-labelledby`;\n   * a consumer `aria-label` names it instead. Clicking its text selects the radio; clicking a link\n   * inside it follows the link, and arrow keys on that link do not move between the radios. The\n   * radio lines up with the first line of the label. `children` are not rendered: pass the label\n   * here.\n   */\n  label?: React.ReactNode;\n  /** Whether the radio item is disabled and non-interactive (also when the group is disabled). */\n  disabled?: boolean;\n  /** Class name of the item's root `<label>` element. */\n  className?: string;\n  /** Class name of the element that renders the `label` text. */\n  labelClassName?: string;\n  /** Ref to the `role=\"radio\"` button. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * One option of a {@link RadioGroup}: a `role=\"radio\"` button inside a `<label>`.\n *\n * Native button props (`id`, `aria-*`, `data-*`, handlers, `style`) and `ref` go to the radio\n * button; `className` stays on the root `<label>` and `labelClassName` styles the label text. A\n * consumer `onClick` runs before the selection; `preventDefault()` in it cancels the selection.\n * Must be rendered inside a RadioGroup (also inside Fragments or wrapper elements). `label` takes\n * rich content (a second line of subtext, a link); `children` are not rendered (a development\n * warning says so).\n */\nexport function RadioItem({\n  value,\n  label,\n  disabled,\n  className,\n  labelClassName,\n  onClick,\n  'aria-labelledby': ariaLabelledBy,\n  children,\n  ref,\n  ...rest\n}: RadioItemProps) {\n  const ctx = useRadioGroupContext('RadioItem');\n  const hasChildren = slotRendersContent(children);\n  React.useEffect(() => {\n    if (hasChildren) {\n      warnOnce(\n        'RadioItem:children',\n        'RadioItem: children are not rendered. Pass the label in `label`.',\n      );\n    }\n  }, [hasChildren]);\n  const generatedId = useId('radio-item');\n  const labelTextId = useId('radio-item-label');\n\n  const isDisabled = Boolean(disabled || ctx.disabled);\n  const selected = ctx.value === value;\n  // `0` is a label; `null`, `false`, `''` and empty collections are not (C-SLOTS).\n  const hasLabel = slotRendersContent(label);\n  // The label text names the radio through aria-labelledby, disabled or not: axe exempts the dimmed\n  // text of a disabled radio only when the radio references it this way (its <label> exemption\n  // covers native inputs only). A consumer aria-label still names the radio alone; a consumer\n  // aria-labelledby comes first.\n  const labelledBy =\n    hasLabel && rest['aria-label'] === undefined\n      ? joinIds(ariaLabelledBy, labelTextId)\n      : ariaLabelledBy;\n\n  return (\n    <label\n      className={cn(\n        // items-start: the radio lines up with the first line of a label that wraps or has a\n        // second line, not with its middle.\n        'inline-flex items-start gap-2 select-none',\n        // The dimmed look lifts while a focus ring shows inside the root (a link's in the label; a\n        // disabled radio never takes focus): opacity would dim the ring below 3:1.\n        isDisabled\n          ? 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100'\n          : 'cursor-pointer',\n        className,\n      )}\n    >\n      <button\n        id={generatedId}\n        type=\"button\"\n        role=\"radio\"\n        {...rest}\n        ref={ref}\n        aria-labelledby={labelledBy}\n        aria-checked={selected}\n        disabled={isDisabled}\n        tabIndex={isDisabled ? -1 : ctx.getTabIndex(value)}\n        data-roving-value={value}\n        onClick={composeEventHandlers(onClick, () => ctx.select(value))}\n        className={cn(\n          // p-0 and bg-transparent are set here, not left to the native reset, which any app button\n          // style overrides (C-NATIVE).\n          'flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border bg-transparent p-0 transition-colors motion-reduce:transition-none',\n          // Centred on the 20px first line of the label text.\n          hasLabel && 'mt-px',\n          focusRing,\n          selected ? 'border-2 border-primary' : 'border-stroke-accessible',\n          // Forced colors: the focusable circle keeps system colors (its focus outline stays\n          // forced); only the dot opts out. A disabled radio draws GrayText, never Highlight.\n          isDisabled\n            ? forcedColors.disabled\n            : selected\n              ? 'forced-colors:border-[Highlight]'\n              : forcedColors.control,\n        )}\n      >\n        {selected && (\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              'block h-2 w-2 rounded-full bg-primary',\n              isDisabled ? disabledDot : forcedColors.selectedLeaf,\n            )}\n          />\n        )}\n      </button>\n      {hasLabel && (\n        <span id={labelTextId} className={cn('text-body-1 text-foreground', labelClassName)}>\n          {materialiseSlotContent(label)}\n        </span>\n      )}\n    </label>\n  );\n}\n\nRadioItem.displayName = 'RadioItem';\n\n/**\n * Flat name of `RadioGroup.Item` (C-COMPOUND), for React Server Components, which cannot access\n * the dotted form. Same component as {@link RadioItem}.\n */\nexport const RadioGroupItem = RadioItem;\n\n/** Props of {@link RadioGroupItem} (same as {@link RadioItemProps}). */\nexport type RadioGroupItemProps = RadioItemProps;\n\n/**\n * A single-choice group of {@link RadioItem}s (`role=\"radiogroup\"`).\n *\n * - One tab stop (the selected item, else the first enabled one); arrow keys move focus and select\n *   (APG radio group), Home/End jump to the ends, disabled items are skipped. A key pressed on a\n *   link inside an item's label stays the link's: it neither moves focus nor selects. Items may\n *   sit inside Fragments or wrapper elements. Every item needs its own `value` (a development\n *   warning names a value that several items share).\n * - Inside a `Field` it is named by the Field label (`aria-labelledby`) and described by its hint\n *   and error.\n * - With `name` (or `required`) it takes part in native forms; a form reset restores\n *   `defaultValue`.\n *\n * Use `RadioGroup.Item` (or the flat `RadioGroupItem`/`RadioItem` names) for the items. React\n * Server Components cannot access the dotted form, so they import the flat names; dotted access\n * needs a client file.\n */\nexport const RadioGroup = /* @__PURE__ */ Object.assign(RadioGroupRoot, { Item: RadioItem });\n"],"mappings":";;;;;;;;;;;;;;;;;AAiCA,IAAMG,IAAoBD,EAAM,cAA6C,IAAI;AACjF,EAAkB,cAAc;AAEhC,IAAME,IAAwC;CAC5C,OAAO;CACP,UAAU;CACV,cAAc,CAAC;CACf,mBAAmB;AACrB;AAMA,SAASC,EAAqB,GAA+C;CAI3E,OAHgBH,EAAM,WAAWC,CAC7B,MACJG,EAAqBC,GAAe,cAAc,GAC3CH;AACT;AAEA,SAASI,EAAmB,GAAqB;CAC/C,EACE,wBAAwBC,KACxB,8CAA8CA,EAAM,kGAEtD;AACF;AA6CA,IAAMC,KAAkB,EACtB,OAAOC,GACP,iBACA,kBACA,aACA,iBAAc,YACd,cAAW,IACX,SACA,aACA,SACA,aACA,cACA,OACA,cAAcC,GACd,mBAAmBC,GACnB,oBAAoBC,GACpB,gBAAgBC,GAChB,iBAAiBC,GACjB,cACA,YACA,QACA,GAAGC,QACkB;CACrB,AAAIC,MAAa,KAAA,KAAWC,EAAe,cAAc,YAAY,eAAe;CACpF,IAAMC,IAAeC,KAAgB,IAC/B,CAACZ,GAAOa,KAAYC,EAAgBZ,GAAWS,IAAe,MAAiB;EAEnF,AADAI,IAAgBC,CAAI,GACpBP,IAAWO,CAAI;CACjB,CAAC,GAEK,EAAE,mBAAgB,mBAAgBC,EAAkB;EACxD,aAAajB;EACb,aAAa;EACb,MAAM;EAEN,cAAc,MAASa,EAASG,CAAI;CACtC,CAAC,GAEKE,IAAUzB,EAAM,OAAuB,IAAI,GAC3C0B,IAAYC,EAA8BC,GAAKC,EAAe,KAAKJ,CAAO,GAE1EK,IAAQC,EAAgB,GACxBC,IAAaC,EACjB;EACE;EACA,cAAcvB;EACd,mBAAmBC;EACnB,oBAAoBC;EACpB,gBAAgBC;EAGhB,iBAAiBC,KAAgBoB;CACnC,GACA,EAAE,WAAW,GAAM,CACrB,GACMC,IAAaD,KAAYJ,GAAO,YAAY;CAMlD,AAJAM,EAAaX,SAAeL,EAASF,CAAY,GAAGmB,CAAI,GAIxDrC,EAAM,gBAAgB;EACpB,IAAMsC,IAAOb,EAAQ;EACrB,IAAI,CAACc,KAAS,CAACD,GAAM;EACrB,IAAME,oBAAO,IAAI,IAAY;EAC7B,KAAK,IAAMC,KAAQH,EAAK,iBAA8B,qCAAmC,GAAG;GAE1F,IAAIG,EAAK,QAAQ,yBAAyB,MAAMH,GAAM;GACtD,IAAMI,IAAYD,EAAK,aAAa,mBAAmB,KAAK;GAE5D,AADID,EAAK,IAAIE,CAAS,KAAGpC,EAAmBoC,CAAS,GACrDF,EAAK,IAAIE,CAAS;EACpB;CACF,CAAC;CAED,IAAMC,UAAqB;EACzB,EAAQ,SAAS,cAA2B,qCAAmC,CAAC,EAAE,MAAM;CAC1F,GAKMC,KAAiB,MAA+C;EACpE,IAAMC,IAASC,EAAM,QACfL,IAAOI,EAAO,QAAQ,qBAAqB,GAC3CE,IACJN,MAAS,QAAQA,EAAK,QAAQ,yBAAyB,MAAMK,EAAM;EACrE,CAAID,MAAWC,EAAM,iBAAiBC,MAAalB,EAAe,UAAUiB,CAAK;CACnF,GAEME,IAAehD,EAAM,eAClB;EAAE;EAAO;EAAU,QAAQoB;EAAU;CAAY,IACxD;EAACb;EAAO0C;EAAU7B;EAAU8B;CAAW,CACzC;CAEA,OACE,kBAACjD,EAAkB,UAAnB;EAA4B,OAAO+C;EACjC,UAAA,kBAAC,OAAD;GACE,MAAK;GACL,GAAIhB;GACJ,oBAAkBmB;GAClB,iBAAeF,KAAY,KAAA;GAC3B,WAAWG,EACT,iBACAD,MAAgB,aAAa,mBAAmB,kBAChDE,CACF;GACA,GAAItC;GACJ,KAAKW;GACL,yBAAsB;GACtB,WAAW4B,EAAqBC,GAAWX,CAAa;GACxD,SAASU,EAAqBE,GAAS3B,EAAe,SAAS,EAC7D,uBAAuB,GACzB,CAAC;GAhBH,UAAA,CAkBG4B,GACD,kBAACC,GAAD;IACE,MAAK;IACC;IACA;IACI;IACH;IACP,UAAUvB;IACV,WAAWQ;GACZ,CAAA,CACE;;CACqB,CAAA;AAEhC;AAEA,EAAe,cAAc;AAI7B,IAAMgB,IAAc;AAsCpB,SAAgBC,EAAU,EACxB,UACA,UACA,aACA,cACA,mBACA,YACA,mBAAmBjD,GACnB,aACA,QACA,GAAGI,KACc;CACjB,IAAM8C,IAAM1D,EAAqB,WAAW,GACtC2D,IAAcC,EAAmBN,CAAQ;CAC/C,EAAM,gBAAgB;EACpB,AAAIK,KACFE,EACE,sBACA,kEACF;CAEJ,GAAG,CAACF,CAAW,CAAC;CAChB,IAAMG,IAAcnE,EAAM,YAAY,GAChCoE,IAAcpE,EAAM,kBAAkB,GAEtCqE,IAAa,GAAQlB,KAAYY,EAAI,WACrCO,IAAWP,EAAI,UAAUtD,GAEzB8D,IAAWN,EAAmBO,CAAK,GAKnCC,IACJF,KAAYtD,EAAK,kBAAkB,KAAA,IAC/ByD,EAAQ7D,GAAgBuD,CAAW,IACnCvD;CAEN,OACE,kBAAC,SAAD;EACE,WAAWyC,EAGT,6CAGAe,IACI,gEACA,kBACJd,CACF;EAXF,UAAA,CAaE,kBAAC,UAAD;GACE,IAAIY;GACJ,MAAK;GACL,MAAK;GACL,GAAIlD;GACC;GACL,mBAAiBwD;GACjB,gBAAcH;GACd,UAAUD;GACV,UAAUA,IAAa,KAAKN,EAAI,YAAYtD,CAAK;GACjD,qBAAmBA;GACnB,SAAS+C,EAAqBmB,SAAeZ,EAAI,OAAOtD,CAAK,CAAC;GAC9D,WAAW6C,EAGT,sJAEAiB,KAAY,SACZK,GACAN,IAAW,4BAA4B,4BAGvCD,IACIQ,EAAa,WACbP,IACE,qCACAO,EAAa,OACrB;GAEC,UAAAP,KACC,kBAAC,QAAD;IACE,eAAY;IACZ,WAAWhB,EACT,yCACAe,IAAaR,IAAcgB,EAAa,YAC1C;GACD,CAAA;EAEG,CAAA,GACPN,KACC,kBAAC,QAAD;GAAM,IAAIH;GAAa,WAAWd,EAAG,+BAA+BwB,CAAc;GAC/E,UAAAC,EAAuBP,CAAK;EACzB,CAAA,CAEH;;AAEX;AAEA,EAAU,cAAc;AAMxB,IAAaQ,IAAiBlB,GAsBjBmB,IAA6B,uBAAO,OAAOvE,GAAgB,EAAE,MAAMoD,EAAU,CAAC"}
+{"version":3,"file":"RadioGroup.mjs","names":["useId","useId$1","React","RadioGroupContext","INERT_CONTEXT","useRadioGroupContext","reportMissingContext","componentName","warnDuplicateValue","value","RadioGroupRoot","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","onChange","warnDeprecated","initialValue","defaultValue","setValue","useControllable","onValueChange","next","useRovingTabIndex","rootRef","mergedRef","useMergedRefs","ref","containerProps","field","useFieldContext","fieldProps","useFieldControl","required","isRequired","useFormReset","form","root","isDev","seen","item","itemValue","focusTabStop","handleKeyDown","target","event","fromOwnItem","contextValue","disabled","getTabIndex","orientation","cn","radioGroupClassNames","className","composeEventHandlers","onKeyDown","onFocus","children","HiddenInput","disabledDot","RadioItem","ctx","hasChildren","slotRendersContent","warnOnce","generatedId","labelTextId","isDisabled","selected","hasLabel","label","labelledBy","joinIds","radioGroupItemClassNames","onClick","focusRing","forcedColors","labelClassName","materialiseSlotContent","RadioGroupItem","RadioGroup"],"sources":["../../../src/components/input/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { joinIds } from '../../lib/aria';\nimport { radioGroupClassNames, radioGroupItemClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { isDev, reportMissingContext, warnDeprecated, warnOnce } from '../../lib/dev';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport { focusRing, forcedColors } from '../../lib/styles';\nimport type { Orientation } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/* ---- Context ---- */\ninterface RadioGroupContextValue {\n  /** The selected value (`''` when nothing is selected). */\n  value: string;\n  /** Group-level disabled state. */\n  disabled: boolean;\n  /**\n   * Selects a value when an item is activated (click, Space, Enter). Arrow keys select through\n   * the roving hook's `onFocusMove` instead. Both paths use the same `setValue`, so\n   * `onValueChange` and the deprecated `onChange` alias fire only when the value changes\n   * (C-NAMING).\n   */\n  select: (value: string) => void;\n  /** Roving tab index of an item. */\n  getTabIndex: (value: string) => 0 | -1;\n}\n\nconst RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);\nRadioGroupContext.displayName = 'RadioGroupContext';\n\nconst INERT_CONTEXT: RadioGroupContextValue = {\n  value: '',\n  disabled: false,\n  select: () => {},\n  getTabIndex: () => -1,\n};\n\n/**\n * The surrounding RadioGroup's context; throws in development outside one, logs once and returns\n * an inert value in production (C-CONTEXT).\n */\nfunction useRadioGroupContext(componentName: string): RadioGroupContextValue {\n  const context = React.useContext(RadioGroupContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'a RadioGroup');\n  return INERT_CONTEXT;\n}\n\nfunction warnDuplicateValue(value: string): void {\n  warnOnce(\n    `RadioGroup:duplicate:${value}`,\n    `RadioGroup: several items share the value \"${value}\". Item values must be unique within a ` +\n      'RadioGroup; items that share a value are checked together.',\n  );\n}\n\n/* ---- RadioGroup ---- */\n/** Properties for the RadioGroup component. */\nexport interface RadioGroupProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** Controlled selected value (`''` for no selection). */\n  value?: string;\n  /** Initial selected value for uncontrolled usage (also the value a form reset restores).\n   * @default ''\n   */\n  defaultValue?: string;\n  /** Called with the newly selected value when the selection changes (not when re-selecting). */\n  onValueChange?: (value: string) => void;\n  /**\n   * Called with the newly selected value, exactly like `onValueChange`: only when the selection\n   * changes (0.4 also called it when the selected item was chosen again).\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: string) => void;\n  /**\n   * Layout of the radio items (also `aria-orientation`). Arrow keys follow the APG radio pattern\n   * in both layouts: Down/Right select the next item, Up/Left the previous one (Left/Right\n   * mirrored under `dir=\"rtl\"`).\n   * @default 'vertical'\n   */\n  orientation?: Orientation;\n  /** Disables every item of the group. */\n  disabled?: boolean;\n  /**\n   * Form field name. With a name, the selected value is submitted with the form. No name is\n   * generated: without one the group adds nothing to `FormData`.\n   */\n  name?: string;\n  /** A value must be selected before the form can be submitted (native validation). */\n  required?: boolean;\n  /** Id of the form the group belongs to, when it is rendered outside that form. */\n  form?: string;\n  /** Ref to the `role=\"radiogroup\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// The `role=\"radiogroup\"` root, documented on the exported `RadioGroup` const.\nconst RadioGroupRoot = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onChange,\n  orientation = 'vertical',\n  disabled = false,\n  name,\n  required,\n  form,\n  children,\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  ref,\n  ...rest\n}: RadioGroupProps) => {\n  if (onChange !== undefined) warnDeprecated('RadioGroup', 'onChange', 'onValueChange');\n  const initialValue = defaultValue ?? '';\n  const [value, setValue] = useControllable(valueProp, initialValue, (next: string) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const { containerProps, getTabIndex } = useRovingTabIndex({\n    activeValue: value,\n    orientation: 'both',\n    loop: true,\n    // APG radio group: moving focus also selects the item.\n    onFocusMove: (next) => 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\n  useFormReset(rootRef, () => setValue(initialValue), form);\n\n  // Development diagnostic (C-DEV): the items may sit anywhere inside the group (Fragments, wrapper\n  // elements), so they are read from the DOM after each commit.\n  React.useEffect(() => {\n    const root = rootRef.current;\n    if (!isDev || !root) return;\n    const seen = new Set<string>();\n    for (const item of root.querySelectorAll<HTMLElement>('[role=\"radio\"][data-roving-value]')) {\n      // Its own items only: the roving marker cannot be overridden by the consumer (`role` can).\n      if (item.closest('[data-roving-container]') !== root) continue;\n      const itemValue = item.getAttribute('data-roving-value') ?? '';\n      if (seen.has(itemValue)) warnDuplicateValue(itemValue);\n      seen.add(itemValue);\n    }\n  });\n\n  const focusTabStop = () => {\n    rootRef.current?.querySelector<HTMLElement>('[data-roving-value][tabindex=\"0\"]')?.focus();\n  };\n\n  // Arrow keys, Home and End move between the radios (and select) only when they are pressed on a\n  // radio or on the group itself. A key pressed on other focusable content inside the group (a\n  // link in an item's label) keeps its own meaning, such as scrolling the page.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const target = event.target as Element;\n    const item = target.closest('[data-roving-value]');\n    const fromOwnItem =\n      item !== null && item.closest('[data-roving-container]') === event.currentTarget;\n    if (target === event.currentTarget || fromOwnItem) containerProps.onKeyDown(event);\n  };\n\n  const contextValue = React.useMemo<RadioGroupContextValue>(\n    () => ({ value, disabled, select: setValue, getTabIndex }),\n    [value, disabled, setValue, getTabIndex],\n  );\n\n  return (\n    <RadioGroupContext.Provider value={contextValue}>\n      <div\n        role=\"radiogroup\"\n        {...fieldProps}\n        aria-orientation={orientation}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          radioGroupClassNames.root,\n          'relative flex',\n          orientation === 'vertical' ? 'flex-col gap-2' : 'flex-row gap-4',\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      >\n        {children}\n        <HiddenInput\n          type=\"radio\"\n          name={name}\n          form={form}\n          disabled={disabled}\n          value={value}\n          required={isRequired}\n          onInvalid={focusTabStop}\n        />\n      </div>\n    </RadioGroupContext.Provider>\n  );\n};\n\nRadioGroupRoot.displayName = 'RadioGroup';\n\n/* ---- RadioItem ---- */\n/** Forced-colors look of the dot of a disabled selected radio: GrayText, no Highlight fill. */\nconst disabledDot = 'forced-colors:bg-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** Properties for the RadioItem component. */\nexport interface RadioItemProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'value' | 'onChange'\n> {\n  /** Value associated with this radio option. */\n  value: string;\n  /**\n   * Label next to the radio indicator (any phrasing content, links included, but no other form\n   * controls). It names the radio through `aria-labelledby`, after a consumer `aria-labelledby`;\n   * a consumer `aria-label` names it instead. Clicking its text selects the radio; clicking a link\n   * inside it follows the link, and arrow keys on that link do not move between the radios. The\n   * radio lines up with the first line of the label. `children` are not rendered: pass the label\n   * here.\n   */\n  label?: React.ReactNode;\n  /** Whether the radio item is disabled and non-interactive (also when the group is disabled). */\n  disabled?: boolean;\n  /** Class name of the item's root `<label>` element. */\n  className?: string;\n  /** Class name of the element that renders the `label` text. */\n  labelClassName?: string;\n  /** Ref to the `role=\"radio\"` button. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * One option of a {@link RadioGroup}: a `role=\"radio\"` button inside a `<label>`.\n *\n * Native button props (`id`, `aria-*`, `data-*`, handlers, `style`) and `ref` go to the radio\n * button; `className` stays on the root `<label>` and `labelClassName` styles the label text. A\n * consumer `onClick` runs before the selection; `preventDefault()` in it cancels the selection.\n * Must be rendered inside a RadioGroup (also inside Fragments or wrapper elements). `label` takes\n * rich content (a second line of subtext, a link); `children` are not rendered (a development\n * warning says so).\n */\nexport function RadioItem({\n  value,\n  label,\n  disabled,\n  className,\n  labelClassName,\n  onClick,\n  'aria-labelledby': ariaLabelledBy,\n  children,\n  ref,\n  ...rest\n}: RadioItemProps) {\n  const ctx = useRadioGroupContext('RadioItem');\n  const hasChildren = slotRendersContent(children);\n  React.useEffect(() => {\n    if (hasChildren) {\n      warnOnce(\n        'RadioItem:children',\n        'RadioItem: children are not rendered. Pass the label in `label`.',\n      );\n    }\n  }, [hasChildren]);\n  const generatedId = useId('radio-item');\n  const labelTextId = useId('radio-item-label');\n\n  const isDisabled = Boolean(disabled || ctx.disabled);\n  const selected = ctx.value === value;\n  // `0` is a label; `null`, `false`, `''` and empty collections are not (C-SLOTS).\n  const hasLabel = slotRendersContent(label);\n  // The label text names the radio through aria-labelledby, disabled or not: axe exempts the dimmed\n  // text of a disabled radio only when the radio references it this way (its <label> exemption\n  // covers native inputs only). A consumer aria-label still names the radio alone; a consumer\n  // aria-labelledby comes first.\n  const labelledBy =\n    hasLabel && rest['aria-label'] === undefined\n      ? joinIds(ariaLabelledBy, labelTextId)\n      : ariaLabelledBy;\n\n  return (\n    <label\n      className={cn(\n        radioGroupItemClassNames.root,\n        // items-start: the radio lines up with the first line of a label that wraps or has a\n        // second line, not with its middle.\n        'inline-flex items-start gap-2 select-none',\n        // The dimmed look lifts while a focus ring shows inside the root (a link's in the label; a\n        // disabled radio never takes focus): opacity would dim the ring below 3:1.\n        isDisabled\n          ? 'cursor-not-allowed opacity-50 has-focus-visible:opacity-100'\n          : 'cursor-pointer',\n        className,\n      )}\n    >\n      <button\n        id={generatedId}\n        type=\"button\"\n        role=\"radio\"\n        {...rest}\n        ref={ref}\n        aria-labelledby={labelledBy}\n        aria-checked={selected}\n        disabled={isDisabled}\n        tabIndex={isDisabled ? -1 : ctx.getTabIndex(value)}\n        data-roving-value={value}\n        onClick={composeEventHandlers(onClick, () => ctx.select(value))}\n        className={cn(\n          radioGroupItemClassNames.indicator,\n          // p-0 and bg-transparent are set here, not left to the native reset, which any app button\n          // style overrides (C-NATIVE).\n          'flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full border bg-transparent p-0 transition-colors motion-reduce:transition-none',\n          // Centred on the 20px first line of the label text.\n          hasLabel && 'mt-px',\n          focusRing,\n          selected ? 'border-2 border-primary' : 'border-stroke-accessible',\n          // Forced colors: the focusable circle keeps system colors (its focus outline stays\n          // forced); only the dot opts out. A disabled radio draws GrayText, never Highlight.\n          isDisabled\n            ? forcedColors.disabled\n            : selected\n              ? 'forced-colors:border-[Highlight]'\n              : forcedColors.control,\n        )}\n      >\n        {selected && (\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              'block h-2 w-2 rounded-full bg-primary',\n              isDisabled ? disabledDot : forcedColors.selectedLeaf,\n            )}\n          />\n        )}\n      </button>\n      {hasLabel && (\n        <span\n          id={labelTextId}\n          className={cn(\n            radioGroupItemClassNames.label,\n            'text-body-1 text-foreground',\n            labelClassName,\n          )}\n        >\n          {materialiseSlotContent(label)}\n        </span>\n      )}\n    </label>\n  );\n}\n\nRadioItem.displayName = 'RadioItem';\n\n/**\n * Flat name of `RadioGroup.Item` (C-COMPOUND), for React Server Components, which cannot access\n * the dotted form. Same component as {@link RadioItem}.\n */\nexport const RadioGroupItem = RadioItem;\n\n/** Props of {@link RadioGroupItem} (same as {@link RadioItemProps}). */\nexport type RadioGroupItemProps = RadioItemProps;\n\n/**\n * A single-choice group of {@link RadioItem}s (`role=\"radiogroup\"`).\n *\n * - One tab stop (the selected item, else the first enabled one); arrow keys move focus and select\n *   (APG radio group), Home/End jump to the ends, disabled items are skipped. A key pressed on a\n *   link inside an item's label stays the link's: it neither moves focus nor selects. Items may\n *   sit inside Fragments or wrapper elements. Every item needs its own `value` (a development\n *   warning names a value that several items share).\n * - Inside a `Field` it is named by the Field label (`aria-labelledby`) and described by its hint\n *   and error.\n * - With `name` (or `required`) it takes part in native forms; a form reset restores\n *   `defaultValue`.\n *\n * Use `RadioGroup.Item` (or the flat `RadioGroupItem`/`RadioItem` names) for the items. React\n * Server Components cannot access the dotted form, so they import the flat names; dotted access\n * needs a client file.\n */\nexport const RadioGroup = /* @__PURE__ */ Object.assign(RadioGroupRoot, { Item: RadioItem });\n"],"mappings":"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"}

package/dist/components/input/Rating.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.cjs","names":["StarIcon","useControllable","React","useRovingTabIndex","getArrowIntent","getDirection","useMergedRefs","useFieldContext","useFieldControl","cn","composeEventHandlers","focusRing","HiddenInput","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_useControllable","require_direction","require_useRovingTabIndex","require_useMergedRefs","require_useFieldControl","require_styles","require_icons","require_useFormReset","require_HiddenInput","react","react_jsx_runtime","defaultStarLabel","value","sizeMap","targetPaddingMap","Star","filled","Rating","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","onChange","initialValue","defaultValue","setValue","onValueChange","next","hovered","setHovered","prevDisabled","setPrevDisabled","disabled","displayValue","handleKeyDown","max","intent","focusValue","rootRef","mergedRef","ref","containerProps","field","fieldProps","required","isRequired","defaultName","form","focusTabStop","starSize","size","starLabel","labels","className","onKeyDown","onFocus","onMouseLeave","starValue","i","key","getTabIndex","textSizeMap","defaultRatingLabel","formattedValue","defaultCountLabel","count","formattedCount","supportedLocale","locale","RatingDisplay","formatLocale","invalidLocale","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.cjs","names":["useControllable","React","useRovingTabIndex","isOwnEvent","getArrowIntent","getDirection","useMergedRefs","useFieldContext","useFieldControl","useEventCallback","resolveRatingColor","useStarGlyphs","useRatingItemRegistry","slotRendersContent","cn","ratingClassNames","composeEventHandlers","RatingContext","ratingItems","HiddenInput","INERT_RATING_CONTEXT","ratingDisplayClassNames","StarGlyph","RatingItem","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useEventCallback","require_useControllable","require_direction","require_useRovingTabIndex","require_useMergedRefs","require_useFieldControl","require_useFormReset","require_HiddenInput","require_events","require_Rating_item","react","react_jsx_runtime","defaultStarLabel","value","RatingRoot","valueProp","stepProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","onChange","initialValue","defaultValue","setValue","onValueChange","next","step","hovered","setHovered","prevDisabled","setPrevDisabled","disabled","drawnValue","up","v","down","handleKeyDown","max","intent","focusValue","rootRef","mergedRef","ref","containerProps","field","fieldProps","required","isRequired","defaultName","form","focusTabStop","focusChosen","key","resolvedColor","color","glyphs","iconFilled","iconOutline","starLabel","labels","hasItems","children","counts","context","focus","size","getTabIndex","registerItem","className","onKeyDown","onFocus","onMouseLeave","textSizeMap","defaultRatingLabel","formattedValue","defaultCountLabel","count","formattedCount","supportedLocale","locale","RatingDisplayRoot","formatLocale","invalidLocale","ratingName","name","showText","showValue","compact","textSize","Rating","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/Rating.item.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../lib/direction.cjs"),s=require("../../lib/styles.cjs"),c=require("../button/Button.slots.cjs"),l=require("../../lib/icons.cjs"),u=require("../../lib/events.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p={marigold:`text-rating`,brand:`text-primary`,neutral:`text-foreground`},m=`text-stroke-accessible`;function h(e){return e===`brand`||e===`neutral`?e:`marigold`}var g={"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`},_={"extra-small":`p-1.5`,small:`p-1`,medium:`p-0.5`,large:`p-0.5`,"extra-large":`p-0.5`},v={filled:null,outline:null};function y(e){let{glyph:t,button:n}=c.unwrapButtonGlyph(e),i=r.slotRendersContent(t);return{glyph:i?t:null,button:n,empty:e!=null&&n===null&&!i}}function b(e,t,{button:r,empty:i}){d.useEffect(()=>{i&&n.warnOnce(`${e}:${t}-empty`,`${e}: \`${t}\` renders nothing, so the default star is used.`),r&&n.warnOnce(`${e}:${t}-button`,`${e}: \`${t}\` received ${r}; its children render as the glyph of the star and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`${t}={<MyIcon />}\`.`)},[e,t,i,r])}function x(e,t,r){let i=y(t),a=y(r),o=t===void 0!=(r===void 0);d.useEffect(()=>{o&&n.warnOnce(`${e}:icon-pair`,`${e}: pass both \`iconFilled\` and \`iconOutline\`: with only one of them, the other is the default star.`)},[e,o]),b(e,`iconFilled`,i),b(e,`iconOutline`,a);let s=i.glyph,c=a.glyph;return d.useMemo(()=>({filled:s,outline:c}),[s,c])}function S(e,t,n){return e?{colorClass:p[t],glyph:n.filled}:{colorClass:m,glyph:n.outline}}function C({filled:e,glyph:n,className:i}){return n==null?e?(0,f.jsx)(l.StarIcon,{className:i}):(0,f.jsx)(l.StarIcon,{className:i,fill:`none`,stroke:`currentColor`,strokeWidth:1.5}):r.renderSlot(n,`span`,t.cn(`inline-flex shrink-0 [&>svg]:size-full`,i),{"aria-hidden":!0})}C.displayName=`GlyphLayer`;var w=({fraction:e,size:n,color:r,glyphs:i,starClassName:a,iconClassName:o,className:s,ref:c,...l})=>{let u=Math.round(Math.min(1,Math.max(0,e))*100),d=g[n];if(u>0&&u<100){let e=S(!1,r,i),n=S(!0,r,i);return(0,f.jsxs)(`span`,{...l,ref:c,className:t.cn(a,`relative inline-flex`,e.colorClass,s),children:[(0,f.jsx)(C,{filled:!1,glyph:e.glyph,className:t.cn(o,d)}),(0,f.jsx)(`span`,{className:t.cn(`absolute inset-y-0 start-0 flex overflow-hidden`,n.colorClass),style:{width:`${u}%`},children:(0,f.jsx)(C,{filled:!0,glyph:n.glyph,className:t.cn(o,d,`shrink-0`)})})]})}let p=u===100,m=S(p,r,i);return(0,f.jsx)(`span`,{...l,ref:c,className:t.cn(a,`inline-flex`,m.colorClass,s),children:(0,f.jsx)(C,{filled:p,glyph:m.glyph,className:t.cn(o,d)})})};w.displayName=`StarGlyph`;var T=()=>{},E={kind:`display`,value:0,drawnValue:0,step:1,max:5,size:`medium`,color:`marigold`,glyphs:v,disabled:!0,starLabel:()=>``,getTabIndex:()=>-1,choose:T,preview:T,registerItem:()=>T},D=d.createContext(null);D.displayName=`RatingContext`;function O(){return d.useContext(D)||(n.reportMissingContext(`Rating.Item`,`a rating (Rating or RatingDisplay)`),E)}function k(){let[e]=d.useState(()=>{let e=new Map;return{counts:e,registerItem:t=>(e.set(t,(e.get(t)??0)+1),()=>{let n=(e.get(t)??1)-1;n>0?e.set(t,n):e.delete(t)})}});return e}function A(e,t,r){d.useEffect(()=>{for(let[r,i]of e)i>1&&n.warnOnce(`Rating.Item:duplicate:${r}`,`Rating.Item: two items have the value ${r}; give each star a unique value from 1 to max.`),(!Number.isInteger(r)||r<1||r>t)&&n.warnOnce(`Rating.Item:value:${r}`,`Rating.Item: the value ${r} is not a whole number from 1 to ${t}.`);if(r){for(let r=1;r<=t;r++)if(!e.has(r)){n.warnOnce(`Rating.Item:missing`,`Rating.Item: no item has the value ${r}; pass one Rating.Item per value from 1 to max.`);return}}})}var j=({value:e,iconFilled:n,iconOutline:r,className:c,ref:l,...p})=>{let m=O(),{registerItem:h}=m;d.useLayoutEffect(()=>h(e),[h,e]);let v=x(`Rating.Item`,n,r),y=n!==void 0||r!==void 0?v:m.glyphs,b=m.kind===`display`?t.cn(a.ratingItemClassNames.root,a.ratingDisplayClassNames.star):t.cn(a.ratingItemClassNames.root,a.ratingClassNames.star),T=m.kind===`display`?t.cn(a.ratingItemClassNames.icon,a.ratingDisplayClassNames.icon):t.cn(a.ratingItemClassNames.icon,a.ratingClassNames.icon);if(m.kind===`display`)return(0,f.jsx)(w,{...p,ref:l,starClassName:b,iconClassName:T,className:c,fraction:m.drawnValue-(e-1),size:m.size,color:m.color,glyphs:y});if(m.step===.5){let{onClick:n,onPointerMove:r,...a}=p,s=e-.5,d=m.drawnValue,h=d>=e?1:d>=s?.5:0,g=t=>{let n=t.currentTarget.getBoundingClientRect();return(o.getDirection(t.currentTarget)===`rtl`?n.right-t.clientX:t.clientX-n.left)<n.width/2?s:e};return(0,f.jsxs)(`span`,{...a,ref:l,className:t.cn(b,`relative inline-flex cursor-pointer rounded`,_[m.size],`has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-ring`,m.disabled&&`cursor-not-allowed`,c),onClick:i.composeEventHandlers(n,e=>{if(m.disabled||e.detail===0||!u.isOwnEvent(e))return;let t=e.target.closest(`[role="radio"]`);t&&e.currentTarget.contains(t)||m.choose(g(e),!0)}),onPointerMove:i.composeEventHandlers(r,e=>{!m.disabled&&e.pointerType===`mouse`&&u.isOwnEvent(e)&&m.preview(g(e))}),children:[(0,f.jsx)(w,{iconClassName:T,fraction:h,size:m.size,color:m.color,glyphs:y}),[s,e].map((e,n)=>{let r=String(e);return(0,f.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":m.value===e,"aria-label":m.starLabel(e,m.max),"data-roving-value":r,tabIndex:m.disabled?-1:m.getTabIndex(r),disabled:m.disabled,className:t.cn(`pointer-events-none absolute inset-y-0 w-1/2 border-0 bg-transparent p-0 opacity-0`,n===0?`start-0`:`end-0`),onClick:()=>{m.disabled||m.choose(e,!1)}},r)})]})}let{onClick:E,onMouseEnter:D,...k}=p,A=String(e),j=m.drawnValue>=e,M=S(j,m.color,y);return(0,f.jsx)(`button`,{type:`button`,...k,ref:l,role:`radio`,"aria-checked":m.value===e,"aria-label":m.starLabel(e,m.max),"data-roving-value":A,tabIndex:m.disabled?-1:m.getTabIndex(A),disabled:m.disabled,className:t.cn(b,`inline-flex cursor-pointer rounded border-0 bg-transparent transition-colors motion-reduce:transition-none disabled:cursor-not-allowed`,_[m.size],s.focusRing,M.colorClass,c),onClick:i.composeEventHandlers(E,t=>{!m.disabled&&u.isOwnEvent(t)&&m.choose(e,!1)}),onMouseEnter:i.composeEventHandlers(D,t=>{!m.disabled&&u.isOwnEvent(t)&&m.preview(e)}),children:(0,f.jsx)(C,{filled:j,glyph:M.glyph,className:t.cn(T,g[m.size])})})};j.displayName=`RatingItem`;function M(e,t){let n=r.materialiseSlotContent(e);return r.slotRendersContent(n)?n:Array.from({length:t},(e,t)=>(0,f.jsx)(j,{value:t+1},t+1))}exports.FILLED_COLOR=p,exports.INERT_RATING_CONTEXT=E,exports.RatingContext=D,exports.RatingItem=j,exports.StarGlyph=w,exports.ratingItems=M,exports.resolveRatingColor=h,exports.useRatingContext=O,exports.useRatingItemChecks=A,exports.useRatingItemRegistry=k,exports.useStarGlyphs=x;
+//# sourceMappingURL=Rating.item.cjs.map