@mortenbrudvik/waveui 0.4.0 → 0.7.0

package/dist/components/input/RadioGroup.mjs

@@ -0,0 +1,139 @@
+"use client";
+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";
+//#region src/components/input/RadioGroup.tsx
+var S = y.createContext(null);
+S.displayName = "RadioGroupContext";
+var C = {
+	value: "",
+	disabled: !1,
+	select: () => {},
+	getTabIndex: () => -1
+};
+function w(e) {
+	return y.useContext(S) || (n(e, "a RadioGroup"), C);
+}
+function T(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 }) => {
+	o !== void 0 && r("RadioGroup", "onChange", "onValueChange");
+	let L = i ?? "", [R, z] = c(n, L, (e) => {
+		a?.(e), o?.(e);
+	}), { containerProps: B, getTabIndex: V } = u({
+		activeValue: R,
+		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;
+		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);
+		}
+	});
+	let q = () => {
+		H.current?.querySelector("[data-roving-value][tabindex=\"0\"]")?.focus();
+	}, J = (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
+	}), [
+		R,
+		f,
+		z,
+		V
+	]);
+	return /* @__PURE__ */ b(S.Provider, {
+		value: Y,
+		children: /* @__PURE__ */ x("div", {
+			role: "radiogroup",
+			...G,
+			"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,
+			"data-roving-container": "",
+			onKeyDown: s(N, J),
+			onFocus: s(P, B.onFocus, { checkDefaultPrevented: !1 }),
+			children: [w, /* @__PURE__ */ b(v, {
+				type: "radio",
+				name: h,
+				form: C,
+				disabled: f,
+				value: R,
+				required: K,
+				onInvalid: q
+			})]
+		})
+	});
+};
+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", {
+			id: T,
+			type: "button",
+			role: "radio",
+			...v,
+			ref: _,
+			"aria-labelledby": j,
+			"aria-checked": k,
+			disabled: O,
+			tabIndex: O ? -1 : S.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", {
+				"aria-hidden": "true",
+				className: e("block h-2 w-2 rounded-full bg-primary", O ? D : g.selectedLeaf)
+			})
+		}), A && /* @__PURE__ */ b("span", {
+			id: E,
+			className: e("text-body-1 text-foreground", u),
+			children: a(n)
+		})]
+	});
+}
+O.displayName = "RadioItem";
+var k = O, A = /* @__PURE__ */ Object.assign(E, { Item: O });
+//#endregion
+export { A as RadioGroup, k as RadioGroupItem, O as RadioItem };
+
+//# sourceMappingURL=RadioGroup.mjs.map

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

@@ -0,0 +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":"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"}

package/dist/components/input/Rating.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/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;
+//# sourceMappingURL=Rating.cjs.map

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

@@ -0,0 +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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"}

package/dist/components/input/Rating.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.mjs","names":["React","defaultStarLabel","value","sizeMap","targetPaddingMap","Star","filled","StarIcon","Rating","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","onChange","warnDeprecated","initialValue","defaultValue","setValue","useControllable","onValueChange","next","hovered","setHovered","prevDisabled","setPrevDisabled","disabled","displayValue","useRovingTabIndex","handleKeyDown","max","intent","getArrowIntent","getDirection","focusValue","rootRef","mergedRef","useMergedRefs","ref","containerProps","field","useFieldContext","fieldProps","useFieldControl","required","isRequired","defaultName","form","focusTabStop","starSize","size","starLabel","labels","cn","className","composeEventHandlers","onKeyDown","onFocus","onMouseLeave","starValue","i","key","getTabIndex","focusRing","HiddenInput","textSizeMap","defaultRatingLabel","formattedValue","defaultCountLabel","count","formattedCount","supportedLocale","locale","RatingDisplay","formatLocale","invalidLocale","warnOnce","ratingName","name","showText","showValue","compact","textSize","percent"],"sources":["../../../src/components/input/Rating.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnDeprecated, warnOnce } from '../../lib/dev';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport { StarIcon } from '../../lib/icons';\nimport { focusRing } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { HiddenInput } from '../internal/HiddenInput';\n\n/**\n * The Rating's built-in star names, for localization. Each member is optional and falls back to\n * its English default.\n */\nexport interface RatingLabels {\n  /**\n   * Accessible name of the star that chooses `value` (1 to `max`).\n   * @default (value) => value === 1 ? '1 star' : `${value} stars`\n   */\n  star?: (value: number, max: number) => string;\n}\n\nconst defaultStarLabel = (value: number) => `${value} star${value !== 1 ? 's' : ''}`;\n\n/** Properties for the Rating component. */\nexport interface RatingProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> {\n  /** Controlled rating value (`0` = no rating). */\n  value?: number;\n  /** Initial rating for uncontrolled usage (also the value a form reset restores).\n   * @default 0\n   */\n  defaultValue?: number;\n  /** Called with the new rating when it changes (not when the current star is chosen again). */\n  onValueChange?: (value: number) => void;\n  /**\n   * Called with the new rating, exactly like `onValueChange`: only when the rating changes (0.4\n   * also called it when the current star was clicked again, or a key was pressed at an end).\n   * @deprecated Use `onValueChange`.\n   */\n  onChange?: (value: number) => void;\n  /** Maximum number of stars.\n   * @default 5\n   */\n  max?: number;\n  /** Size of the star icons. Every size keeps a target of at least 24×24px.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Whether the rating is disabled and non-interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Form field name. With a name, the chosen rating is submitted with the form (nothing while no\n   * star is chosen).\n   */\n  name?: string;\n  /** A star must be chosen before the form can be submitted (native validation). */\n  required?: boolean;\n  /** Id of the form the rating belongs to, when it is rendered outside that form. */\n  form?: string;\n  /**\n   * Names of the stars (\"1 star\", \"2 stars\", …), for localization. The group's own name is\n   * `aria-label` (default \"Rating\"). Unset members keep their English defaults.\n   */\n  labels?: RatingLabels;\n  /** Ref to the `role=\"radiogroup\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Built-in texts of RatingDisplay, for localization. */\nexport interface RatingDisplayLabels {\n  /**\n   * Accessible name. `formattedValue` is `value` formatted with `locale` (as shown).\n   * @default (value, max, formattedValue) => `Rating: ${formattedValue} out of ${max}`\n   */\n  rating?: (value: number, max: number, formattedValue: string) => string;\n  /**\n   * Count part of the name.\n   * @default (count, formatted) => count === 1 ? '1 rating' : `${formatted} ratings`\n   */\n  count?: (count: number, formattedCount: string) => string;\n}\n\n/** Properties for the RatingDisplay (read-only) component. */\nexport interface RatingDisplayProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Rating value to display. A fraction is drawn as a partly filled star (`4.6` fills 60% of the\n   * fifth star), so the stars show the value the accessible name reports.\n   */\n  value: number;\n  /** Maximum number of stars.\n   * @default 5\n   */\n  max?: number;\n  /** Size of the star icons (and of the value and count text).\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Shows the value as text after the stars, formatted with `locale` (up to one decimal).\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * Number of ratings: shown as \"(1,160)\" after the value with the locale's digit grouping, and\n   * added to the accessible name (\"…, 1,160 ratings\").\n   */\n  count?: number;\n  /**\n   * One filled star followed by the value (and the count) instead of `max` stars. Implies\n   * `showValue`.\n   * @default false\n   */\n  compact?: boolean;\n  /**\n   * BCP 47 locale of the value and count formatting (runtime default when omitted; pass it when\n   * rendering on the server). A tag `Intl` rejects (the POSIX `de_DE`, a typo) falls back to the\n   * runtime default locale (development warning).\n   */\n  locale?: string;\n  /** Built-in texts, for localization. */\n  labels?: RatingDisplayLabels;\n  /** Ref to the root element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nconst sizeMap: Record<Size, string> = {\n  'extra-small': 'h-3 w-3',\n  small: 'h-4 w-4',\n  medium: 'h-5 w-5',\n  large: 'h-6 w-6',\n  'extra-large': 'h-8 w-8',\n};\n\n/** Padding that gives every interactive star a target of at least 24×24px (WCAG 2.5.8). */\nconst targetPaddingMap: Record<Size, string> = {\n  'extra-small': 'p-1.5', // 12px icon + 12px\n  small: 'p-1', // 16px icon + 8px\n  medium: 'p-0.5', // 20px icon + 4px\n  large: 'p-0.5',\n  'extra-large': 'p-0.5',\n};\n\n/** A filled star, or an outlined one (the outline keeps a 3:1 non-text contrast). */\nfunction Star({ filled, className }: { filled: boolean; className: string }) {\n  return filled ? (\n    <StarIcon className={className} />\n  ) : (\n    <StarIcon className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth={1.5} />\n  );\n}\n\n/**\n * A star rating input (`role=\"radiogroup\"` of `role=\"radio\"` stars).\n *\n * - One tab stop (the chosen star, else the first). Keys choose relative to the current rating and\n *   move focus to the chosen star, as in 0.4: Right/Up one star more, Left/Down one fewer\n *   (Left/Right mirrored under `dir=\"rtl\"`), Home/End the first/last star. From an empty rating,\n *   Right/Up/Home choose 1 star. Keys at the ends (and Left/Down while empty) emit nothing.\n * - The keyboard cannot clear a rating: Left/Down stop at 1 star (APG radio group; 0.4 went down\n *   to 0). Only a controlled `value={0}` (or a form reset while `defaultValue` is 0) clears it.\n * - `onValueChange` (and the deprecated `onChange` alias) fire only when the rating changes, so\n *   choosing the current star again calls neither.\n * - Hovering previews a value; the preview never outlives the hover or a disabled state.\n * - Inside a `Field` it is named by the Field label (instead of the default \"Rating\") and\n *   described by its hint and error. The stars are named \"1 star\", \"2 stars\", …; `labels`\n *   localizes these names.\n * - With `name` (or `required`) it takes part in native forms; a form reset restores\n *   `defaultValue`.\n */\nexport const Rating = ({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onChange,\n  max = 5,\n  size = 'medium',\n  disabled = false,\n  name,\n  required,\n  form,\n  labels,\n  className,\n  id,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-invalid': ariaInvalid,\n  'aria-required': ariaRequired,\n  onKeyDown,\n  onFocus,\n  onMouseLeave,\n  ref,\n  ...rest\n}: RatingProps) => {\n  if (onChange !== undefined) warnDeprecated('Rating', 'onChange', 'onValueChange');\n  const initialValue = defaultValue ?? 0;\n  const [value, setValue] = useControllable(valueProp, initialValue, (next: number) => {\n    onValueChange?.(next);\n    onChange?.(next);\n  });\n\n  const [hovered, setHovered] = React.useState(0);\n  // A hover preview must not survive the rating becoming disabled (adjust state during render).\n  const [prevDisabled, setPrevDisabled] = React.useState(disabled);\n  if (prevDisabled !== disabled) {\n    setPrevDisabled(disabled);\n    if (disabled) setHovered(0);\n  }\n  const displayValue = disabled ? value : hovered || value;\n\n  // Roving tab stop (the chosen star, else the first) and focus moves; the keys are handled below.\n  const { containerProps, getTabIndex, focusValue } = useRovingTabIndex({\n    activeValue: value > 0 ? String(value) : null,\n  });\n\n  // Keys count from the current rating, not from the focused star (0.4 semantics): from an empty\n  // rating, Tab lands on the unchosen first star and Right/Up/Home choose it. Never wraps.\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;\n    let next: number;\n    if (e.key === 'Home') next = 1;\n    else if (e.key === 'End') next = max;\n    else if (e.key === 'ArrowUp') next = value + 1;\n    else if (e.key === 'ArrowDown') next = value - 1;\n    else {\n      const intent = getArrowIntent(e.key, {\n        orientation: 'horizontal',\n        dir: getDirection(e.currentTarget),\n      });\n      if (!intent) return;\n      next = intent === 'next' ? value + 1 : value - 1;\n    }\n    e.preventDefault();\n    next = Math.min(next, max);\n    // The ends are no-ops (nothing is emitted, focus stays), and Left/Down never clear to 0.\n    if (disabled || next < 1 || next === value) return;\n    focusValue(String(next));\n    setValue(next);\n  };\n\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const mergedRef = useMergedRefs<HTMLDivElement>(ref, containerProps.ref, rootRef);\n\n  const field = useFieldContext();\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      // An explicit `required={false}` wins over a required Field, so aria-required always\n      // matches the native validation below (`isRequired`).\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n  const isRequired = required ?? field?.required ?? false;\n  const defaultName =\n    fieldProps['aria-label'] === undefined && fieldProps['aria-labelledby'] === undefined\n      ? 'Rating'\n      : undefined;\n\n  useFormReset(rootRef, () => setValue(initialValue), form);\n\n  const focusTabStop = () => {\n    rootRef.current?.querySelector<HTMLElement>('[data-roving-value][tabindex=\"0\"]')?.focus();\n  };\n\n  const starSize = sizeMap[size];\n  const starLabel = labels?.star ?? defaultStarLabel;\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={defaultName}\n      {...fieldProps}\n      aria-disabled={disabled || undefined}\n      className={cn(\n        'relative inline-flex items-center gap-0.5',\n        disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n      {...rest}\n      ref={mergedRef}\n      data-roving-container=\"\"\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n        checkDefaultPrevented: false,\n      })}\n      onMouseLeave={composeEventHandlers(onMouseLeave, () => setHovered(0), {\n        checkDefaultPrevented: false,\n      })}\n    >\n      {Array.from({ length: max }, (_, i) => {\n        const starValue = i + 1;\n        const key = String(starValue);\n        const filled = displayValue >= starValue;\n        return (\n          <button\n            key={key}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={value === starValue}\n            aria-label={starLabel(starValue, max)}\n            data-roving-value={key}\n            tabIndex={disabled ? -1 : getTabIndex(key)}\n            disabled={disabled}\n            className={cn(\n              'inline-flex cursor-pointer rounded border-0 bg-transparent transition-colors motion-reduce:transition-none disabled:cursor-not-allowed',\n              targetPaddingMap[size],\n              focusRing,\n              filled ? 'text-rating' : 'text-stroke-accessible',\n            )}\n            onClick={() => {\n              // Choosing the current star again is a no-op for both callbacks (useControllable).\n              if (!disabled) setValue(starValue);\n            }}\n            onMouseEnter={() => {\n              if (!disabled) setHovered(starValue);\n            }}\n          >\n            <Star filled={filled} className={starSize} />\n          </button>\n        );\n      })}\n      <HiddenInput\n        type=\"radio\"\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={value > 0 ? String(value) : ''}\n        required={isRequired}\n        onInvalid={focusTabStop}\n      />\n    </div>\n  );\n};\nRating.displayName = 'Rating';\n\n/** Text size of the value and the count, following the star size. */\nconst textSizeMap: Record<Size, string> = {\n  'extra-small': 'text-caption-1',\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n  'extra-large': 'text-body-2',\n};\n\nconst defaultRatingLabel = (_value: number, max: number, formattedValue: string) =>\n  `Rating: ${formattedValue} out of ${max}`;\nconst defaultCountLabel = (count: number, formattedCount: string) =>\n  count === 1 ? '1 rating' : `${formattedCount} ratings`;\n\n/** `locale` when `Intl` accepts it as a language tag, else `undefined` (the runtime default). */\nfunction supportedLocale(locale: string | undefined): string | undefined {\n  if (locale === undefined) return undefined;\n  try {\n    Intl.getCanonicalLocales(locale);\n    return locale;\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * A read-only star rating (`role=\"img\"` named \"Rating: <value> out of <max>\"). A fractional value\n * is drawn with a partly filled star, so the stars and the name show the same value.\n *\n * - `showValue` adds the value as text after the stars, `count` the number of ratings (\"(1,160)\",\n *   also added to the name), and `compact` shows one filled star with the value instead of `max`\n *   stars (the root carries `data-compact`). Without them only the stars show.\n * - The value (up to one decimal) and the count are formatted with `locale`, in the text and in\n *   the name; `labels` localizes the name. Pass `locale` when rendering on the server.\n */\nexport const RatingDisplay = ({\n  value,\n  max = 5,\n  size = 'medium',\n  showValue = false,\n  count,\n  compact = false,\n  locale,\n  labels,\n  className,\n  ref,\n  ...rest\n}: RatingDisplayProps) => {\n  const starSize = sizeMap[size];\n  const formatLocale = supportedLocale(locale);\n  const invalidLocale = locale !== undefined && formatLocale === undefined;\n  React.useEffect(() => {\n    if (invalidLocale) {\n      warnOnce(\n        `RatingDisplay:invalid-locale:${locale}`,\n        `RatingDisplay: \\`locale\\` \"${locale}\" is not a valid BCP 47 language tag (use hyphens, as ` +\n          'in \"en-US\"). The runtime default locale formats the value instead, so the server and ' +\n          'the browser may render different text.',\n      );\n    }\n  }, [invalidLocale, locale]);\n\n  const formattedValue = new Intl.NumberFormat(formatLocale, { maximumFractionDigits: 1 }).format(\n    value,\n  );\n  const formattedCount =\n    count === undefined ? undefined : new Intl.NumberFormat(formatLocale).format(count);\n  const ratingName = (labels?.rating ?? defaultRatingLabel)(value, max, formattedValue);\n  const name =\n    count === undefined || formattedCount === undefined\n      ? ratingName\n      : `${ratingName}, ${(labels?.count ?? defaultCountLabel)(count, formattedCount)}`;\n  const showText = showValue || compact || count !== undefined;\n  const textSize = textSizeMap[size];\n\n  return (\n    <div\n      ref={ref}\n      role=\"img\"\n      aria-label={name}\n      data-compact={compact ? '' : undefined}\n      className={cn('inline-flex items-center gap-0.5', className)}\n      {...rest}\n    >\n      {compact ? (\n        <span className=\"inline-flex text-rating\">\n          <Star filled className={starSize} />\n        </span>\n      ) : (\n        Array.from({ length: max }, (_, i) => {\n          // The share of this star that the value covers, in whole percent.\n          const percent = Math.round(Math.min(1, Math.max(0, value - i)) * 100);\n          if (percent > 0 && percent < 100) {\n            // The outline of an empty star, with the filled star clipped to the fraction over it\n            // from the inline start (the reading direction of the stars, also under RTL).\n            return (\n              <span key={i} className=\"relative inline-flex text-stroke-accessible\">\n                <Star filled={false} className={starSize} />\n                <span\n                  className=\"absolute inset-y-0 start-0 flex overflow-hidden text-rating\"\n                  style={{ width: `${percent}%` }}\n                >\n                  <Star filled className={cn(starSize, 'shrink-0')} />\n                </span>\n              </span>\n            );\n          }\n          const filled = percent === 100;\n          return (\n            <span\n              key={i}\n              className={cn('inline-flex', filled ? 'text-rating' : 'text-stroke-accessible')}\n            >\n              <Star filled={filled} className={starSize} />\n            </span>\n          );\n        })\n      )}\n      {showText && (\n        <span className={cn('ms-1 font-semibold text-foreground', textSize)}>{formattedValue}</span>\n      )}\n      {formattedCount !== undefined && (\n        <span className={cn('ms-1 text-muted-foreground', textSize)}>({formattedCount})</span>\n      )}\n    </div>\n  );\n};\nRatingDisplay.displayName = 'RatingDisplay';\n"],"mappings":"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"}

package/dist/components/input/SearchBox.cjs

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