@seekalfred/primitives 0.7.3 → 0.8.0

package/dist/scrub-input/scrub-input.d.ts

@@ -48,6 +48,15 @@ export interface ScrubInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
   size?: "sm" | "md";
   /** Locks the mouse pointer while it scrubs, when the browser allows it, so a long drag never runs out of screen. @default true */
   pointerLock?: boolean;
+  /**
+   * Shows the value without letting it change: the field stays focusable and its text
+   * selectable, but the label does not scrub, the arrow keys do not step, typing and
+   * expressions are refused, a double click does not reset, and the unit does not cycle,
+   * so `onValueChange`, `onValueCommit` and `onUnitChange` never fire. Sets
+   * `aria-readonly` and `data-readonly`. The native attribute, as `disabled` is.
+   * @default false
+   */
+  readOnly?: boolean;
   /** Extra classes for the field. Merged last, so `w-40` sizes it. */
   className?: string;
 }
@@ -60,7 +69,8 @@ export interface ScrubInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
  * Keyboard: the arrow keys step (Shift ten times coarser, Alt ten times finer), Enter
  * commits typing, Escape restores the last value (or cancels a scrub back to where it
  * began). A double click on the label restores `resetValue`. The input is a spinbutton, and
- * its value text spells out percent and degrees.
+ * its value text spells out percent and degrees. `readOnly` keeps the value visible,
+ * focusable and selectable while refusing every change.
  *
  * At a limit the field strains: dragged past `min` or `max` it stretches against
  * rubber-band resistance and springs back on release, and a refused step or an invalid

package/dist/scrub-input/scrub-input.js

@@ -44,7 +44,8 @@ const sizeClass = {
 * Keyboard: the arrow keys step (Shift ten times coarser, Alt ten times finer), Enter
 * commits typing, Escape restores the last value (or cancels a scrub back to where it
 * began). A double click on the label restores `resetValue`. The input is a spinbutton, and
-* its value text spells out percent and degrees.
+* its value text spells out percent and degrees. `readOnly` keeps the value visible,
+* focusable and selectable while refusing every change.
 *
 * At a limit the field strains: dragged past `min` or `max` it stretches against
 * rubber-band resistance and springs back on release, and a refused step or an invalid
@@ -53,7 +54,7 @@ const sizeClass = {
 * @example
 * <ScrubInput label="W" value={width} onValueChange={setWidth} min={0} units={["px", "%"]} />
 */
-const ScrubInput = forwardRef(function ScrubInput({ label, value, defaultValue = 0, onValueChange, onValueCommit, min = -Infinity, max = Infinity, step = 1, fineStep, coarseStep, precision, pixelsPerStep = 2, wrap = false, unit: unitProp, defaultUnit, units, onUnitChange, resetValue, track, size = "md", pointerLock = true, className, disabled, id: idProp, onFocus, onBlur, onKeyDown, "aria-label": ariaLabel, ...rest }, forwarded) {
+const ScrubInput = forwardRef(function ScrubInput({ label, value, defaultValue = 0, onValueChange, onValueCommit, min = -Infinity, max = Infinity, step = 1, fineStep, coarseStep, precision, pixelsPerStep = 2, wrap = false, unit: unitProp, defaultUnit, units, onUnitChange, resetValue, track, size = "md", pointerLock = true, className, disabled, readOnly = false, id: idProp, onFocus, onBlur, onKeyDown, "aria-label": ariaLabel, ...rest }, forwarded) {
 	const uid = useId();
 	const id = idProp ?? `scrub-${uid.replace(/[^a-zA-Z0-9-]/g, "")}`;
 	const inputRef = useRef(null);
@@ -66,6 +67,8 @@ const ScrubInput = forwardRef(function ScrubInput({ label, value, defaultValue =
 	const coarse = coarseStep ?? step * 10;
 	const places = precision ?? Math.max(decimalsOf(step), decimalsOf(fine));
 	const canWrap = wrap && Number.isFinite(min) && Number.isFinite(max) && max > min;
+	/** Nothing the person does changes the value: disabled, or read-only. */
+	const frozen = Boolean(disabled) || readOnly;
 	const showTrack = (track ?? true) && Number.isFinite(min) && Number.isFinite(max) && max > min;
 	const [inner, setInner] = useState(defaultValue);
 	const current = value ?? inner;
@@ -171,7 +174,7 @@ const ScrubInput = forwardRef(function ScrubInput({ label, value, defaultValue =
 	}
 	function commitDraft(text = draft) {
 		setDraft(null);
-		if (text === null) return true;
+		if (text === null || readOnly) return true;
 		if (text.trim() === format(current, places)) return true;
 		const parsed = evaluateScrubExpression(text, unitList);
 		if (!parsed) {
@@ -242,7 +245,7 @@ const ScrubInput = forwardRef(function ScrubInput({ label, value, defaultValue =
 		if (node) node.style.transform = `translate3d(${cursor.current.x}px, ${cursor.current.y}px, 0)`;
 	}
 	function onHandleDown(event) {
-		if (disabled || drag.current || event.pointerType === "mouse" && event.button !== 0) return;
+		if (frozen || drag.current || event.pointerType === "mouse" && event.button !== 0) return;
 		event.preventDefault();
 		if (draft !== null) commitDraft();
 		try {
@@ -323,12 +326,16 @@ const ScrubInput = forwardRef(function ScrubInput({ label, value, defaultValue =
 		inputRef.current?.select();
 	}
 	function onHandleDoubleClick() {
-		if (disabled || resetValue === void 0) return;
+		if (frozen || resetValue === void 0) return;
 		emit(constrain(resetValue), "reset", true);
 	}
 	function onInputKeyDown(event) {
 		onKeyDown?.(event);
 		if (event.defaultPrevented) return;
+		if (readOnly) {
+			if (event.key === "Enter") event.preventDefault();
+			return;
+		}
 		if (event.key === "ArrowUp" || event.key === "ArrowDown") {
 			event.preventDefault();
 			if (draft !== null && !commitDraft()) return;
@@ -358,7 +365,7 @@ const ScrubInput = forwardRef(function ScrubInput({ label, value, defaultValue =
 		commitDraft();
 	}
 	function cycleUnit() {
-		if (unitList.length < 2) return;
+		if (readOnly || unitList.length < 2) return;
 		const next = unitList[(unitList.indexOf(unit) + 1) % unitList.length] ?? unit;
 		if (unitProp === void 0) setInnerUnit(next);
 		onUnitChange?.(next);
@@ -376,6 +383,7 @@ const ScrubInput = forwardRef(function ScrubInput({ label, value, defaultValue =
 		"data-slot": "scrub-input",
 		"data-size": size,
 		"data-disabled": disabled ? "" : void 0,
+		"data-readonly": readOnly ? "" : void 0,
 		"data-scrubbing": scrubbing ? "" : void 0,
 		"data-invalid": invalid ? "" : void 0,
 		"data-releasing": releasing ? "" : void 0,
@@ -403,7 +411,7 @@ const ScrubInput = forwardRef(function ScrubInput({ label, value, defaultValue =
 				onPointerCancel: onHandleUp,
 				onClick: onHandleClick,
 				onDoubleClick: onHandleDoubleClick,
-				className: "flex min-w-7.5 cursor-ew-resize touch-pan-y items-center justify-center ps-2.5 pe-1 text-text-secondary select-none motion-safe:transition-colors motion-safe:duration-(--duration-quick) data-[text]:font-medium hover:text-foreground group-data-[scrubbing]/scrub:text-foreground group-data-[disabled]/scrub:cursor-not-allowed [&_svg]:size-3.5 [&_svg]:flex-none",
+				className: "flex min-w-7.5 cursor-ew-resize touch-pan-y items-center justify-center ps-2.5 pe-1 text-text-secondary select-none motion-safe:transition-colors motion-safe:duration-(--duration-quick) data-[text]:font-medium hover:text-foreground group-data-[scrubbing]/scrub:text-foreground group-data-[readonly]/scrub:cursor-default group-data-[readonly]/scrub:hover:text-text-secondary group-data-[disabled]/scrub:cursor-not-allowed [&_svg]:size-3.5 [&_svg]:flex-none",
 				children: label
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -425,14 +433,18 @@ const ScrubInput = forwardRef(function ScrubInput({ label, value, defaultValue =
 					"aria-valuemax": Number.isFinite(max) ? max : void 0,
 					"aria-valuetext": valueText,
 					"aria-invalid": invalid || void 0,
+					"aria-readonly": readOnly || void 0,
 					disabled,
+					readOnly,
 					value: text,
-					onChange: (event) => setDraft(event.target.value),
+					onChange: (event) => {
+						if (!readOnly) setDraft(event.target.value);
+					},
 					onFocus: onInputFocus,
 					onBlur: onInputBlur,
 					onKeyDown: onInputKeyDown,
-					className: cnAll("m-0 h-full w-full min-w-0 flex-1 border-0 bg-transparent p-0 ps-1 font-sans text-foreground tabular-nums outline-none selection:bg-primary selection:text-primary-foreground disabled:cursor-not-allowed", size === "sm" ? "text-xs" : "text-sm")
-				}), unit ? unitList.length > 1 ? /* @__PURE__ */ jsx(Button, {
+					className: cnAll("m-0 h-full w-full min-w-0 flex-1 border-0 bg-transparent p-0 ps-1 font-sans text-foreground tabular-nums outline-none selection:bg-primary selection:text-primary-foreground read-only:caret-transparent disabled:cursor-not-allowed", size === "sm" ? "text-xs" : "text-sm")
+				}), unit ? unitList.length > 1 && !readOnly ? /* @__PURE__ */ jsx(Button, {
 					"data-slot": "scrub-input-unit",
 					isDisabled: disabled,
 					onPress: cycleUnit,

package/dist/scrub-input/scrub-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrub-input.js","names":["AriaButton"],"sources":["../../src/scrub-input/scrub-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { prefersReducedMotion } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { evaluateScrubExpression } from \"./evaluate.js\";\n\nexport type ScrubInputSource = \"scrub\" | \"type\" | \"key\" | \"reset\";\n\nexport interface ScrubInputChangeDetails {\n  /** What produced the value: a label drag, a typed entry, an arrow key, or a double click reset. */\n  source: ScrubInputSource;\n  /** The unit in effect after the change. */\n  unit: string;\n}\n\nexport interface ScrubInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"type\"\n  | \"size\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n  | \"prefix\"\n  | \"className\"\n> {\n  /** Text or a 16px icon. It is the scrub handle. An icon label needs `aria-label` so the field keeps an accessible name. */\n  label: ReactNode;\n  /** The value. Controlled when given. */\n  value?: number;\n  /** @default 0 */\n  defaultValue?: number;\n  /** Fires for every change, including each step of a scrub. */\n  onValueChange?: (value: number, details: ScrubInputChangeDetails) => void;\n  /** Fires once when a change settles: a scrub ends, Enter or blur commits typing, or a key step lands. Save on this. */\n  onValueCommit?: (value: number, details: ScrubInputChangeDetails) => void;\n  /** @default -Infinity */\n  min?: number;\n  /** @default Infinity */\n  max?: number;\n  /** One step for the arrow keys and for scrubbing. @default 1 */\n  step?: number;\n  /** The step with Alt held. @default step / 10 */\n  fineStep?: number;\n  /** The step with Shift held; coarse steps land on the coarse grid. @default step * 10 */\n  coarseStep?: number;\n  /** Decimal places kept. Defaults to the precision of `step` or `fineStep`. */\n  precision?: number;\n  /** Pointer travel in px for one step while scrubbing. @default 2 */\n  pixelsPerStep?: number;\n  /** Wraps from `max` back to `min`, as a rotation does. Needs both limits. @default false */\n  wrap?: boolean;\n  /** The unit shown after the number. Controlled when given. With more than one entry in `units` it is a button that cycles them. */\n  unit?: string;\n  defaultUnit?: string;\n  /** The units a typed value may carry, such as `[\"px\", \"%\"]`. Defaults to the current unit. */\n  units?: readonly string[];\n  onUnitChange?: (unit: string) => void;\n  /** Double click the label to return here. */\n  resetValue?: number;\n  /** Shows where the value sits between `min` and `max` as a quiet fill. On by default when both limits are set. */\n  track?: boolean;\n  /** `md` is the compact control height, `sm` is 30px. @default \"md\" */\n  size?: \"sm\" | \"md\";\n  /** Locks the mouse pointer while it scrubs, when the browser allows it, so a long drag never runs out of screen. @default true */\n  pointerLock?: boolean;\n  /** Extra classes for the field. Merged last, so `w-40` sizes it. */\n  className?: string;\n}\n\n/** Movement before a press on the label becomes a scrub, and the most pixels the field strains past a limit. */\nconst SLOP = 3;\nconst STRAIN = 12;\n/** The most overshoot kept, so reversing starts moving the value again after a short relax. */\nconst OVERSHOOT_CAP = 90;\n/** How far a refused step or an invalid entry kicks the number (px). */\nconst KICK = 6;\n/** The longest the spring home takes (the smooth spring, 720ms) plus a margin. */\nconst RELEASE_MS = 900;\n/** How long an invalid entry is flagged. */\nconst INVALID_MS = 900;\n\nconst decimalsOf = (value: number) => {\n  const text = String(value);\n  if (text.includes(\"e-\")) return Number(text.split(\"e-\")[1]);\n  return (text.split(\".\")[1] ?? \"\").length;\n};\nconst roundTo = (value: number, places: number) => {\n  const factor = 10 ** places;\n  return Math.round(value * factor) / factor;\n};\n/** Rubber-band resistance: each extra pixel gives less, and the strain never exceeds `limit`. */\nconst rubber = (distance: number, limit = STRAIN) =>\n  Math.sign(distance) * (1 - 1 / ((Math.abs(distance) * 0.55) / limit + 1)) * limit;\nconst format = (value: number, places: number) =>\n  String(roundTo(value, places)).replace(/^-0$/, \"0\");\n\ninterface Drag {\n  id: number;\n  lastX: number;\n  travel: number;\n  raw: number;\n  start: number;\n  moved: boolean;\n  locked: boolean;\n  mouse: boolean;\n}\n\nconst sizeClass = {\n  md: \"h-(--density-control-h-sm) rounded-md text-sm\",\n  sm: \"h-7.5 rounded-sm text-xs\",\n} as const;\n\n/**\n * A compact number field for inspectors and property panels. Drag the label sideways to\n * scrub the value (the mouse pointer is locked when the browser allows it, so a long drag\n * never runs out of screen), or click in and type an exact value. A typed entry takes\n * arithmetic such as `12*2` or `(100-24)/2`, and a unit from `units` such as `50%`.\n *\n * Keyboard: the arrow keys step (Shift ten times coarser, Alt ten times finer), Enter\n * commits typing, Escape restores the last value (or cancels a scrub back to where it\n * began). A double click on the label restores `resetValue`. The input is a spinbutton, and\n * its value text spells out percent and degrees.\n *\n * At a limit the field strains: dragged past `min` or `max` it stretches against\n * rubber-band resistance and springs back on release, and a refused step or an invalid\n * entry kicks the number. Reduced motion removes the strain, the kick and the fill's glide.\n *\n * @example\n * <ScrubInput label=\"W\" value={width} onValueChange={setWidth} min={0} units={[\"px\", \"%\"]} />\n */\nexport const ScrubInput = forwardRef<HTMLInputElement, ScrubInputProps>(function ScrubInput(\n  {\n    label,\n    value,\n    defaultValue = 0,\n    onValueChange,\n    onValueCommit,\n    min = -Infinity,\n    max = Infinity,\n    step = 1,\n    fineStep,\n    coarseStep,\n    precision,\n    pixelsPerStep = 2,\n    wrap = false,\n    unit: unitProp,\n    defaultUnit,\n    units,\n    onUnitChange,\n    resetValue,\n    track,\n    size = \"md\",\n    pointerLock = true,\n    className,\n    disabled,\n    id: idProp,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    \"aria-label\": ariaLabel,\n    ...rest\n  },\n  forwarded,\n) {\n  const uid = useId();\n  const id = idProp ?? `scrub-${uid.replace(/[^a-zA-Z0-9-]/g, \"\")}`;\n  const inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(forwarded, () => inputRef.current as HTMLInputElement);\n  const shellRef = useRef<HTMLDivElement>(null);\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const handleRef = useRef<HTMLLabelElement>(null);\n  const cursorRef = useRef<HTMLDivElement>(null);\n\n  const fine = fineStep ?? step / 10;\n  const coarse = coarseStep ?? step * 10;\n  const places = precision ?? Math.max(decimalsOf(step), decimalsOf(fine));\n  const canWrap = wrap && Number.isFinite(min) && Number.isFinite(max) && max > min;\n  const showTrack = (track ?? true) && Number.isFinite(min) && Number.isFinite(max) && max > min;\n\n  const [inner, setInner] = useState(defaultValue);\n  const current = value ?? inner;\n  const [innerUnit, setInnerUnit] = useState(defaultUnit ?? unitProp ?? units?.[0] ?? \"\");\n  const unit = unitProp ?? innerUnit;\n  const unitList = units ?? (unit ? [unit] : []);\n  const [draft, setDraft] = useState<string | null>(null);\n  const [scrubbing, setScrubbing] = useState<null | { locked: boolean }>(null);\n  const [modifier, setModifier] = useState<\"fine\" | \"coarse\" | null>(null);\n  const [invalid, setInvalid] = useState(false);\n  const [releasing, setReleasing] = useState(false);\n\n  // What the handlers read, so a scrub in flight never sees a stale render.\n  const latest = useRef({ current, unit });\n  useEffect(() => {\n    latest.current = { current, unit };\n  }, [current, unit]);\n  const drag = useRef<Drag | null>(null);\n  const suppressClick = useRef(false);\n  const timers = useRef({ invalid: 0, release: 0 });\n  const cursor = useRef({ x: 0, y: 0 });\n  useEffect(() => {\n    const pending = timers.current;\n    return () => {\n      window.clearTimeout(pending.invalid);\n      window.clearTimeout(pending.release);\n      document.documentElement.style.removeProperty(\"cursor\");\n    };\n  }, []);\n\n  const fraction = showTrack ? Math.min(1, Math.max(0, (current - min) / (max - min))) : 0;\n\n  /** The strain past a limit in px (positive past max): the shell stretches from its far edge and the number leans with it. */\n  function paintStrain(amount: number) {\n    const shell = shellRef.current;\n    const body = bodyRef.current;\n    if (shell) {\n      const width = Math.max(1, shell.offsetWidth);\n      shell.style.transform = amount === 0 ? \"\" : `scaleX(${1 + Math.abs(amount) / width})`;\n      shell.style.transformOrigin = amount >= 0 ? \"left\" : \"right\";\n    }\n    if (body) body.style.transform = amount === 0 ? \"\" : `translateX(${amount * 0.5}px)`;\n  }\n\n  /** Lets the shell and the number spring home: a transition switched on for the moment the strain is cleared. */\n  function springHome() {\n    paintStrain(0);\n    if (prefersReducedMotion()) return;\n    setReleasing(true);\n    window.clearTimeout(timers.current.release);\n    timers.current.release = window.setTimeout(() => setReleasing(false), RELEASE_MS);\n  }\n\n  /** A short kick of the number toward `direction`: a step refused at a limit, or an entry that was not understood. */\n  function kick(direction: number) {\n    const node = bodyRef.current;\n    if (!node || prefersReducedMotion()) return;\n    node.style.setProperty(\"--strain-x\", `${direction * KICK}px`);\n    // Restart the animation: the attribute has to leave and come back across a style recalculation.\n    node.removeAttribute(\"data-strain\");\n    void node.offsetWidth;\n    node.setAttribute(\"data-strain\", \"\");\n  }\n\n  const emit = useCallback(\n    (next: number, source: ScrubInputSource, commit: boolean, nextUnit = latest.current.unit) => {\n      if (next !== latest.current.current) {\n        latest.current = { current: next, unit: nextUnit };\n        if (value === undefined) setInner(next);\n        onValueChange?.(next, { source, unit: nextUnit });\n      }\n      if (commit) onValueCommit?.(next, { source, unit: nextUnit });\n    },\n    [onValueChange, onValueCommit, value],\n  );\n\n  const constrain = (next: number) => {\n    const rounded = roundTo(next, places);\n    if (canWrap) {\n      const span = max - min;\n      return roundTo(((((rounded - min) % span) + span) % span) + min, places);\n    }\n    return Math.min(max, Math.max(min, rounded));\n  };\n\n  function flagInvalid() {\n    setInvalid(true);\n    window.clearTimeout(timers.current.invalid);\n    timers.current.invalid = window.setTimeout(() => setInvalid(false), INVALID_MS);\n    kick(-1);\n  }\n\n  function commitDraft(text: string | null = draft) {\n    setDraft(null);\n    if (text === null) return true;\n    if (text.trim() === format(current, places)) return true;\n    const parsed = evaluateScrubExpression(text, unitList);\n    if (!parsed) {\n      flagInvalid();\n      return false;\n    }\n    let nextUnit = latest.current.unit;\n    if (parsed.unit && parsed.unit !== nextUnit) {\n      nextUnit = parsed.unit;\n      if (unitProp === undefined) setInnerUnit(nextUnit);\n      onUnitChange?.(nextUnit);\n    }\n    if (!canWrap && (parsed.value > max || parsed.value < min)) kick(parsed.value > max ? 1 : -1);\n    emit(constrain(parsed.value), \"type\", true, nextUnit);\n    return true;\n  }\n\n  function stepBy(direction: 1 | -1, event: { shiftKey: boolean; altKey: boolean }) {\n    const amount = event.shiftKey ? coarse : event.altKey ? fine : step;\n    const base = latest.current.current;\n    if (!canWrap && ((direction > 0 && base >= max) || (direction < 0 && base <= min))) {\n      kick(direction);\n      return;\n    }\n    // Coarse steps land on the coarse grid, so 13 with Shift goes to 20, not 23.\n    const snapped = event.shiftKey\n      ? (direction > 0\n          ? Math.floor(base / amount + 1e-9) + 1\n          : Math.ceil(base / amount - 1e-9) - 1) * amount\n      : base + direction * amount;\n    emit(constrain(snapped), \"key\", true);\n  }\n\n  // ---- Scrubbing ----\n\n  const endScrub = useCallback(\n    (cancel: boolean) => {\n      const state = drag.current;\n      drag.current = null;\n      if (!state) return;\n      document.documentElement.style.removeProperty(\"cursor\");\n      if (document.pointerLockElement === handleRef.current) document.exitPointerLock();\n      setScrubbing(null);\n      setModifier(null);\n      if (!state.moved) return;\n      suppressClick.current = true;\n      if (cancel) emit(state.start, \"scrub\", true);\n      else onValueCommit?.(latest.current.current, { source: \"scrub\", unit: latest.current.unit });\n      springHome();\n    },\n    // springHome only reads refs and sets state.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [emit, onValueCommit],\n  );\n\n  useEffect(() => {\n    if (!scrubbing) return;\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        endScrub(true);\n        return;\n      }\n      if (event.key === \"Shift\" || event.key === \"Alt\")\n        setModifier(event.shiftKey ? \"coarse\" : event.altKey ? \"fine\" : null);\n    };\n    const onLock = () => {\n      if (drag.current?.locked && document.pointerLockElement !== handleRef.current)\n        endScrub(false);\n    };\n    window.addEventListener(\"keydown\", onKey);\n    window.addEventListener(\"keyup\", onKey);\n    document.addEventListener(\"pointerlockchange\", onLock);\n    return () => {\n      window.removeEventListener(\"keydown\", onKey);\n      window.removeEventListener(\"keyup\", onKey);\n      document.removeEventListener(\"pointerlockchange\", onLock);\n    };\n  }, [endScrub, scrubbing]);\n\n  function placeCursor() {\n    const node = cursorRef.current;\n    if (node) node.style.transform = `translate3d(${cursor.current.x}px, ${cursor.current.y}px, 0)`;\n  }\n\n  function onHandleDown(event: ReactPointerEvent<HTMLLabelElement>) {\n    if (disabled || drag.current || (event.pointerType === \"mouse\" && event.button !== 0)) return;\n    event.preventDefault();\n    if (draft !== null) commitDraft();\n    try {\n      event.currentTarget.setPointerCapture(event.pointerId);\n    } catch {\n      // A pointer the browser is not tracking (a synthetic one) cannot be captured; the drag follows it all the same.\n    }\n    drag.current = {\n      id: event.pointerId,\n      lastX: event.clientX,\n      travel: 0,\n      raw: latest.current.current,\n      start: latest.current.current,\n      moved: false,\n      locked: false,\n      mouse: event.pointerType === \"mouse\",\n    };\n    cursor.current = { x: event.clientX, y: event.clientY };\n  }\n\n  function onHandleMove(event: ReactPointerEvent<HTMLLabelElement>) {\n    const state = drag.current;\n    if (!state || event.pointerId !== state.id) return;\n    const locked = document.pointerLockElement === handleRef.current;\n    const dx = locked ? event.movementX : event.clientX - state.lastX;\n    state.lastX = event.clientX;\n    state.travel += dx;\n    if (!state.moved) {\n      if (Math.abs(state.travel) < SLOP) return;\n      state.moved = true;\n      inputRef.current?.blur();\n      document.documentElement.style.cursor = \"ew-resize\";\n      if (pointerLock && state.mouse && handleRef.current?.requestPointerLock) {\n        try {\n          const request = handleRef.current.requestPointerLock() as unknown;\n          if (request instanceof Promise) request.catch(() => {});\n        } catch {\n          // Pointer lock is optional.\n        }\n      }\n      setScrubbing({ locked: false });\n    }\n    if (locked && !state.locked) {\n      state.locked = true;\n      setScrubbing({ locked: true });\n    }\n\n    // A stand-in cursor replaces the locked pointer and wraps at the window edges, the way long scrubs do in design tools.\n    if (locked) {\n      const width = window.innerWidth;\n      cursor.current.x = (((cursor.current.x + dx) % width) + width) % width;\n    } else cursor.current = { x: event.clientX, y: event.clientY };\n    placeCursor();\n\n    const amount = event.shiftKey ? coarse : event.altKey ? fine : step;\n    const mode = event.shiftKey ? \"coarse\" : event.altKey ? \"fine\" : null;\n    if (mode !== modifier) setModifier(mode);\n    state.raw += (dx / pixelsPerStep) * amount;\n\n    if (!canWrap) {\n      const perPx = amount / pixelsPerStep;\n      const over =\n        state.raw > max\n          ? (state.raw - max) / perPx\n          : state.raw < min\n            ? (state.raw - min) / perPx\n            : 0;\n      // Cap the stored overshoot so reversing starts moving the value again after a short relax, not a long walk back.\n      if (Math.abs(over) > OVERSHOOT_CAP)\n        state.raw = (over > 0 ? max : min) + Math.sign(over) * OVERSHOOT_CAP * perPx;\n      paintStrain(\n        prefersReducedMotion()\n          ? 0\n          : rubber(Math.max(-OVERSHOOT_CAP, Math.min(OVERSHOOT_CAP, over))),\n      );\n    }\n    const next = constrain(Math.round(state.raw / amount) * amount);\n    if (next !== latest.current.current) emit(next, \"scrub\", false);\n  }\n\n  function onHandleUp(event: ReactPointerEvent<HTMLLabelElement>) {\n    const state = drag.current;\n    if (!state || event.pointerId !== state.id) return;\n    endScrub(false);\n  }\n\n  function onHandleClick(event: ReactMouseEvent<HTMLLabelElement>) {\n    if (suppressClick.current) {\n      suppressClick.current = false;\n      event.preventDefault();\n      return;\n    }\n    if (disabled) return;\n    event.preventDefault();\n    inputRef.current?.focus();\n    inputRef.current?.select();\n  }\n\n  function onHandleDoubleClick() {\n    if (disabled || resetValue === undefined) return;\n    emit(constrain(resetValue), \"reset\", true);\n  }\n\n  // ---- Typing ----\n\n  function onInputKeyDown(event: ReactKeyboardEvent<HTMLInputElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") {\n      event.preventDefault();\n      if (draft !== null && !commitDraft()) return;\n      stepBy(event.key === \"ArrowUp\" ? 1 : -1, event);\n      requestAnimationFrame(() => inputRef.current?.select());\n      return;\n    }\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      commitDraft();\n      requestAnimationFrame(() => inputRef.current?.select());\n      return;\n    }\n    if (event.key === \"Escape\" && draft !== null) {\n      event.preventDefault();\n      event.stopPropagation();\n      setDraft(null);\n      requestAnimationFrame(() => inputRef.current?.select());\n    }\n  }\n\n  function onInputFocus(event: FocusEvent<HTMLInputElement>) {\n    onFocus?.(event);\n    event.currentTarget.select();\n  }\n\n  function onInputBlur(event: FocusEvent<HTMLInputElement>) {\n    onBlur?.(event);\n    commitDraft();\n  }\n\n  function cycleUnit() {\n    if (unitList.length < 2) return;\n    const next = unitList[(unitList.indexOf(unit) + 1) % unitList.length] ?? unit;\n    if (unitProp === undefined) setInnerUnit(next);\n    onUnitChange?.(next);\n    latest.current = { ...latest.current, unit: next };\n  }\n\n  const text = draft ?? format(current, places);\n  const spokenUnit = unit === \"%\" ? \"percent\" : unit === \"deg\" || unit === \"°\" ? \"degrees\" : unit;\n  const valueText = `${format(current, places)}${unit ? ` ${spokenUnit}` : \"\"}`;\n  const multiplier =\n    modifier === \"coarse\"\n      ? `×${format(coarse / step, 2)}`\n      : modifier === \"fine\"\n        ? `×${format(fine / step, 3)}`\n        : null;\n  const labelIsText = typeof label === \"string\" || typeof label === \"number\";\n\n  return (\n    <div\n      data-slot=\"scrub-input\"\n      data-size={size}\n      data-disabled={disabled ? \"\" : undefined}\n      data-scrubbing={scrubbing ? \"\" : undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-releasing={releasing ? \"\" : undefined}\n      className={cn(\n        cnAll(\n          \"group/scrub relative isolate grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)] items-stretch font-sans text-foreground\",\n          sizeClass[size],\n          \"data-[disabled]:opacity-(--opacity-disabled)\",\n        ),\n        className,\n      )}\n    >\n      <div\n        ref={shellRef}\n        aria-hidden=\"true\"\n        data-slot=\"scrub-input-shell\"\n        className={cnAll(\n          \"absolute inset-0 -z-10 overflow-hidden border-(length:--border-width) border-transparent bg-surface-muted will-change-transform\",\n          size === \"sm\" ? \"rounded-sm\" : \"rounded-md\",\n          \"motion-safe:transition-[background-color,border-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n          // The shell springs home after a strain: its transform transitions only while `releasing`.\n          \"group-data-[releasing]/scrub:motion-safe:transition-[transform,background-color,border-color] group-data-[releasing]/scrub:motion-safe:duration-(--duration-smooth) group-data-[releasing]/scrub:motion-safe:ease-smooth\",\n          \"group-hover/scrub:border-border\",\n          \"group-focus-within/scrub:border-foreground group-focus-within/scrub:bg-surface\",\n          \"forced-colors:group-focus-within/scrub:outline-solid forced-colors:group-focus-within/scrub:outline-(length:--focus-ring-width) forced-colors:group-focus-within/scrub:outline-offset-(--focus-ring-offset)\",\n          \"group-data-[scrubbing]/scrub:border-border-strong\",\n          \"group-data-[invalid]/scrub:border-destructive-strong\",\n        )}\n      >\n        {showTrack ? (\n          <span\n            data-slot=\"scrub-input-fill\"\n            style={{ transform: `scaleX(${fraction})` }}\n            className=\"pointer-events-none absolute inset-0 origin-left bg-foreground/6 group-data-[scrubbing]/scrub:bg-foreground/10 motion-safe:transition-transform motion-safe:duration-(--duration-smooth) motion-safe:ease-smooth group-data-[scrubbing]/scrub:motion-safe:transition-none\"\n          />\n        ) : null}\n      </div>\n      <label\n        ref={handleRef}\n        htmlFor={id}\n        data-slot=\"scrub-input-handle\"\n        data-text={labelIsText ? \"\" : undefined}\n        onPointerDown={onHandleDown}\n        onPointerMove={onHandleMove}\n        onPointerUp={onHandleUp}\n        onPointerCancel={onHandleUp}\n        onClick={onHandleClick}\n        onDoubleClick={onHandleDoubleClick}\n        className=\"flex min-w-7.5 cursor-ew-resize touch-pan-y items-center justify-center ps-2.5 pe-1 text-text-secondary select-none motion-safe:transition-colors motion-safe:duration-(--duration-quick) data-[text]:font-medium hover:text-foreground group-data-[scrubbing]/scrub:text-foreground group-data-[disabled]/scrub:cursor-not-allowed [&_svg]:size-3.5 [&_svg]:flex-none\"\n      >\n        {label}\n      </label>\n      <div\n        ref={bodyRef}\n        data-slot=\"scrub-input-body\"\n        className={cnAll(\n          \"flex min-w-0 items-center gap-0.5 pe-2.5 data-[strain]:motion-safe:animate-field-strain\",\n          \"group-data-[releasing]/scrub:motion-safe:transition-transform group-data-[releasing]/scrub:motion-safe:duration-(--duration-smooth) group-data-[releasing]/scrub:motion-safe:ease-smooth\",\n        )}\n      >\n        <input\n          {...rest}\n          ref={inputRef}\n          id={id}\n          type=\"text\"\n          inputMode=\"decimal\"\n          autoComplete=\"off\"\n          spellCheck={false}\n          role=\"spinbutton\"\n          aria-label={ariaLabel}\n          aria-valuenow={current}\n          aria-valuemin={Number.isFinite(min) ? min : undefined}\n          aria-valuemax={Number.isFinite(max) ? max : undefined}\n          aria-valuetext={valueText}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          value={text}\n          onChange={(event) => setDraft(event.target.value)}\n          onFocus={onInputFocus}\n          onBlur={onInputBlur}\n          onKeyDown={onInputKeyDown}\n          className={cnAll(\n            \"m-0 h-full w-full min-w-0 flex-1 border-0 bg-transparent p-0 ps-1 font-sans text-foreground tabular-nums outline-none selection:bg-primary selection:text-primary-foreground disabled:cursor-not-allowed\",\n            size === \"sm\" ? \"text-xs\" : \"text-sm\",\n          )}\n        />\n        {unit ? (\n          unitList.length > 1 ? (\n            <AriaButton\n              data-slot=\"scrub-input-unit\"\n              isDisabled={disabled}\n              onPress={cycleUnit}\n              aria-label={`Unit: ${unit}. Change unit`}\n              className=\"relative inline-flex h-6 min-w-6 flex-none cursor-pointer items-center justify-center rounded-xs border-0 bg-transparent px-1 text-xs text-text-secondary outline-none motion-safe:transition-[background-color,color,scale] motion-safe:duration-(--duration-quick) motion-safe:ease-settle data-[hovered]:bg-foreground/7 data-[hovered]:text-foreground data-[pressed]:scale-95 data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed\"\n            >\n              <SwapText swapKey={unit} motion=\"rise\">\n                {unit}\n              </SwapText>\n            </AriaButton>\n          ) : (\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"scrub-input-unit\"\n              className=\"inline-flex h-6 min-w-4.5 flex-none items-center justify-center px-1 text-xs text-text-secondary\"\n            >\n              {unit}\n            </span>\n          )\n        ) : null}\n      </div>\n      {multiplier && !scrubbing?.locked ? (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"scrub-input-multiplier\"\n          className=\"pointer-events-none absolute bottom-full mb-1.5 start-1.5 z-10 rounded-pill bg-foreground px-1.75 py-0.5 text-xs leading-4 text-background tabular-nums motion-safe:animate-field-clear-in motion-reduce:animate-fade-in\"\n        >\n          {multiplier}\n        </span>\n      ) : null}\n      {scrubbing?.locked\n        ? createPortal(\n            <div\n              ref={(node) => {\n                cursorRef.current = node;\n                placeCursor();\n              }}\n              aria-hidden=\"true\"\n              data-slot=\"scrub-input-cursor\"\n              className=\"pointer-events-none fixed top-0 left-0 z-50 -mt-2 -ms-3.25 flex items-center gap-1\"\n            >\n              <svg\n                width=\"26\"\n                height=\"16\"\n                viewBox=\"0 0 26 16\"\n                className=\"block fill-foreground stroke-background drop-shadow-sm\"\n                strokeWidth=\"1.4\"\n                strokeLinejoin=\"round\"\n              >\n                <path d=\"M1.5 8 L7.5 2.5 V6 H18.5 V2.5 L24.5 8 L18.5 13.5 V10 H7.5 V13.5 Z\" />\n              </svg>\n              {multiplier ? (\n                <span className=\"rounded-pill bg-foreground px-1.5 py-px font-sans text-xs leading-4 text-background tabular-nums motion-safe:animate-field-clear-in motion-reduce:animate-fade-in\">\n                  {multiplier}\n                </span>\n              ) : null}\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"scrub-input.js","names":["AriaButton"],"sources":["../../src/scrub-input/scrub-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { prefersReducedMotion } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { evaluateScrubExpression } from \"./evaluate.js\";\n\nexport type ScrubInputSource = \"scrub\" | \"type\" | \"key\" | \"reset\";\n\nexport interface ScrubInputChangeDetails {\n  /** What produced the value: a label drag, a typed entry, an arrow key, or a double click reset. */\n  source: ScrubInputSource;\n  /** The unit in effect after the change. */\n  unit: string;\n}\n\nexport interface ScrubInputProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"type\"\n  | \"size\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n  | \"prefix\"\n  | \"className\"\n> {\n  /** Text or a 16px icon. It is the scrub handle. An icon label needs `aria-label` so the field keeps an accessible name. */\n  label: ReactNode;\n  /** The value. Controlled when given. */\n  value?: number;\n  /** @default 0 */\n  defaultValue?: number;\n  /** Fires for every change, including each step of a scrub. */\n  onValueChange?: (value: number, details: ScrubInputChangeDetails) => void;\n  /** Fires once when a change settles: a scrub ends, Enter or blur commits typing, or a key step lands. Save on this. */\n  onValueCommit?: (value: number, details: ScrubInputChangeDetails) => void;\n  /** @default -Infinity */\n  min?: number;\n  /** @default Infinity */\n  max?: number;\n  /** One step for the arrow keys and for scrubbing. @default 1 */\n  step?: number;\n  /** The step with Alt held. @default step / 10 */\n  fineStep?: number;\n  /** The step with Shift held; coarse steps land on the coarse grid. @default step * 10 */\n  coarseStep?: number;\n  /** Decimal places kept. Defaults to the precision of `step` or `fineStep`. */\n  precision?: number;\n  /** Pointer travel in px for one step while scrubbing. @default 2 */\n  pixelsPerStep?: number;\n  /** Wraps from `max` back to `min`, as a rotation does. Needs both limits. @default false */\n  wrap?: boolean;\n  /** The unit shown after the number. Controlled when given. With more than one entry in `units` it is a button that cycles them. */\n  unit?: string;\n  defaultUnit?: string;\n  /** The units a typed value may carry, such as `[\"px\", \"%\"]`. Defaults to the current unit. */\n  units?: readonly string[];\n  onUnitChange?: (unit: string) => void;\n  /** Double click the label to return here. */\n  resetValue?: number;\n  /** Shows where the value sits between `min` and `max` as a quiet fill. On by default when both limits are set. */\n  track?: boolean;\n  /** `md` is the compact control height, `sm` is 30px. @default \"md\" */\n  size?: \"sm\" | \"md\";\n  /** Locks the mouse pointer while it scrubs, when the browser allows it, so a long drag never runs out of screen. @default true */\n  pointerLock?: boolean;\n  /**\n   * Shows the value without letting it change: the field stays focusable and its text\n   * selectable, but the label does not scrub, the arrow keys do not step, typing and\n   * expressions are refused, a double click does not reset, and the unit does not cycle,\n   * so `onValueChange`, `onValueCommit` and `onUnitChange` never fire. Sets\n   * `aria-readonly` and `data-readonly`. The native attribute, as `disabled` is.\n   * @default false\n   */\n  readOnly?: boolean;\n  /** Extra classes for the field. Merged last, so `w-40` sizes it. */\n  className?: string;\n}\n\n/** Movement before a press on the label becomes a scrub, and the most pixels the field strains past a limit. */\nconst SLOP = 3;\nconst STRAIN = 12;\n/** The most overshoot kept, so reversing starts moving the value again after a short relax. */\nconst OVERSHOOT_CAP = 90;\n/** How far a refused step or an invalid entry kicks the number (px). */\nconst KICK = 6;\n/** The longest the spring home takes (the smooth spring, 720ms) plus a margin. */\nconst RELEASE_MS = 900;\n/** How long an invalid entry is flagged. */\nconst INVALID_MS = 900;\n\nconst decimalsOf = (value: number) => {\n  const text = String(value);\n  if (text.includes(\"e-\")) return Number(text.split(\"e-\")[1]);\n  return (text.split(\".\")[1] ?? \"\").length;\n};\nconst roundTo = (value: number, places: number) => {\n  const factor = 10 ** places;\n  return Math.round(value * factor) / factor;\n};\n/** Rubber-band resistance: each extra pixel gives less, and the strain never exceeds `limit`. */\nconst rubber = (distance: number, limit = STRAIN) =>\n  Math.sign(distance) * (1 - 1 / ((Math.abs(distance) * 0.55) / limit + 1)) * limit;\nconst format = (value: number, places: number) =>\n  String(roundTo(value, places)).replace(/^-0$/, \"0\");\n\ninterface Drag {\n  id: number;\n  lastX: number;\n  travel: number;\n  raw: number;\n  start: number;\n  moved: boolean;\n  locked: boolean;\n  mouse: boolean;\n}\n\nconst sizeClass = {\n  md: \"h-(--density-control-h-sm) rounded-md text-sm\",\n  sm: \"h-7.5 rounded-sm text-xs\",\n} as const;\n\n/**\n * A compact number field for inspectors and property panels. Drag the label sideways to\n * scrub the value (the mouse pointer is locked when the browser allows it, so a long drag\n * never runs out of screen), or click in and type an exact value. A typed entry takes\n * arithmetic such as `12*2` or `(100-24)/2`, and a unit from `units` such as `50%`.\n *\n * Keyboard: the arrow keys step (Shift ten times coarser, Alt ten times finer), Enter\n * commits typing, Escape restores the last value (or cancels a scrub back to where it\n * began). A double click on the label restores `resetValue`. The input is a spinbutton, and\n * its value text spells out percent and degrees. `readOnly` keeps the value visible,\n * focusable and selectable while refusing every change.\n *\n * At a limit the field strains: dragged past `min` or `max` it stretches against\n * rubber-band resistance and springs back on release, and a refused step or an invalid\n * entry kicks the number. Reduced motion removes the strain, the kick and the fill's glide.\n *\n * @example\n * <ScrubInput label=\"W\" value={width} onValueChange={setWidth} min={0} units={[\"px\", \"%\"]} />\n */\nexport const ScrubInput = forwardRef<HTMLInputElement, ScrubInputProps>(function ScrubInput(\n  {\n    label,\n    value,\n    defaultValue = 0,\n    onValueChange,\n    onValueCommit,\n    min = -Infinity,\n    max = Infinity,\n    step = 1,\n    fineStep,\n    coarseStep,\n    precision,\n    pixelsPerStep = 2,\n    wrap = false,\n    unit: unitProp,\n    defaultUnit,\n    units,\n    onUnitChange,\n    resetValue,\n    track,\n    size = \"md\",\n    pointerLock = true,\n    className,\n    disabled,\n    readOnly = false,\n    id: idProp,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    \"aria-label\": ariaLabel,\n    ...rest\n  },\n  forwarded,\n) {\n  const uid = useId();\n  const id = idProp ?? `scrub-${uid.replace(/[^a-zA-Z0-9-]/g, \"\")}`;\n  const inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(forwarded, () => inputRef.current as HTMLInputElement);\n  const shellRef = useRef<HTMLDivElement>(null);\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const handleRef = useRef<HTMLLabelElement>(null);\n  const cursorRef = useRef<HTMLDivElement>(null);\n\n  const fine = fineStep ?? step / 10;\n  const coarse = coarseStep ?? step * 10;\n  const places = precision ?? Math.max(decimalsOf(step), decimalsOf(fine));\n  const canWrap = wrap && Number.isFinite(min) && Number.isFinite(max) && max > min;\n  /** Nothing the person does changes the value: disabled, or read-only. */\n  const frozen = Boolean(disabled) || readOnly;\n  const showTrack = (track ?? true) && Number.isFinite(min) && Number.isFinite(max) && max > min;\n\n  const [inner, setInner] = useState(defaultValue);\n  const current = value ?? inner;\n  const [innerUnit, setInnerUnit] = useState(defaultUnit ?? unitProp ?? units?.[0] ?? \"\");\n  const unit = unitProp ?? innerUnit;\n  const unitList = units ?? (unit ? [unit] : []);\n  const [draft, setDraft] = useState<string | null>(null);\n  const [scrubbing, setScrubbing] = useState<null | { locked: boolean }>(null);\n  const [modifier, setModifier] = useState<\"fine\" | \"coarse\" | null>(null);\n  const [invalid, setInvalid] = useState(false);\n  const [releasing, setReleasing] = useState(false);\n\n  // What the handlers read, so a scrub in flight never sees a stale render.\n  const latest = useRef({ current, unit });\n  useEffect(() => {\n    latest.current = { current, unit };\n  }, [current, unit]);\n  const drag = useRef<Drag | null>(null);\n  const suppressClick = useRef(false);\n  const timers = useRef({ invalid: 0, release: 0 });\n  const cursor = useRef({ x: 0, y: 0 });\n  useEffect(() => {\n    const pending = timers.current;\n    return () => {\n      window.clearTimeout(pending.invalid);\n      window.clearTimeout(pending.release);\n      document.documentElement.style.removeProperty(\"cursor\");\n    };\n  }, []);\n\n  const fraction = showTrack ? Math.min(1, Math.max(0, (current - min) / (max - min))) : 0;\n\n  /** The strain past a limit in px (positive past max): the shell stretches from its far edge and the number leans with it. */\n  function paintStrain(amount: number) {\n    const shell = shellRef.current;\n    const body = bodyRef.current;\n    if (shell) {\n      const width = Math.max(1, shell.offsetWidth);\n      shell.style.transform = amount === 0 ? \"\" : `scaleX(${1 + Math.abs(amount) / width})`;\n      shell.style.transformOrigin = amount >= 0 ? \"left\" : \"right\";\n    }\n    if (body) body.style.transform = amount === 0 ? \"\" : `translateX(${amount * 0.5}px)`;\n  }\n\n  /** Lets the shell and the number spring home: a transition switched on for the moment the strain is cleared. */\n  function springHome() {\n    paintStrain(0);\n    if (prefersReducedMotion()) return;\n    setReleasing(true);\n    window.clearTimeout(timers.current.release);\n    timers.current.release = window.setTimeout(() => setReleasing(false), RELEASE_MS);\n  }\n\n  /** A short kick of the number toward `direction`: a step refused at a limit, or an entry that was not understood. */\n  function kick(direction: number) {\n    const node = bodyRef.current;\n    if (!node || prefersReducedMotion()) return;\n    node.style.setProperty(\"--strain-x\", `${direction * KICK}px`);\n    // Restart the animation: the attribute has to leave and come back across a style recalculation.\n    node.removeAttribute(\"data-strain\");\n    void node.offsetWidth;\n    node.setAttribute(\"data-strain\", \"\");\n  }\n\n  const emit = useCallback(\n    (next: number, source: ScrubInputSource, commit: boolean, nextUnit = latest.current.unit) => {\n      if (next !== latest.current.current) {\n        latest.current = { current: next, unit: nextUnit };\n        if (value === undefined) setInner(next);\n        onValueChange?.(next, { source, unit: nextUnit });\n      }\n      if (commit) onValueCommit?.(next, { source, unit: nextUnit });\n    },\n    [onValueChange, onValueCommit, value],\n  );\n\n  const constrain = (next: number) => {\n    const rounded = roundTo(next, places);\n    if (canWrap) {\n      const span = max - min;\n      return roundTo(((((rounded - min) % span) + span) % span) + min, places);\n    }\n    return Math.min(max, Math.max(min, rounded));\n  };\n\n  function flagInvalid() {\n    setInvalid(true);\n    window.clearTimeout(timers.current.invalid);\n    timers.current.invalid = window.setTimeout(() => setInvalid(false), INVALID_MS);\n    kick(-1);\n  }\n\n  function commitDraft(text: string | null = draft) {\n    setDraft(null);\n    if (text === null || readOnly) return true;\n    if (text.trim() === format(current, places)) return true;\n    const parsed = evaluateScrubExpression(text, unitList);\n    if (!parsed) {\n      flagInvalid();\n      return false;\n    }\n    let nextUnit = latest.current.unit;\n    if (parsed.unit && parsed.unit !== nextUnit) {\n      nextUnit = parsed.unit;\n      if (unitProp === undefined) setInnerUnit(nextUnit);\n      onUnitChange?.(nextUnit);\n    }\n    if (!canWrap && (parsed.value > max || parsed.value < min)) kick(parsed.value > max ? 1 : -1);\n    emit(constrain(parsed.value), \"type\", true, nextUnit);\n    return true;\n  }\n\n  function stepBy(direction: 1 | -1, event: { shiftKey: boolean; altKey: boolean }) {\n    const amount = event.shiftKey ? coarse : event.altKey ? fine : step;\n    const base = latest.current.current;\n    if (!canWrap && ((direction > 0 && base >= max) || (direction < 0 && base <= min))) {\n      kick(direction);\n      return;\n    }\n    // Coarse steps land on the coarse grid, so 13 with Shift goes to 20, not 23.\n    const snapped = event.shiftKey\n      ? (direction > 0\n          ? Math.floor(base / amount + 1e-9) + 1\n          : Math.ceil(base / amount - 1e-9) - 1) * amount\n      : base + direction * amount;\n    emit(constrain(snapped), \"key\", true);\n  }\n\n  // ---- Scrubbing ----\n\n  const endScrub = useCallback(\n    (cancel: boolean) => {\n      const state = drag.current;\n      drag.current = null;\n      if (!state) return;\n      document.documentElement.style.removeProperty(\"cursor\");\n      if (document.pointerLockElement === handleRef.current) document.exitPointerLock();\n      setScrubbing(null);\n      setModifier(null);\n      if (!state.moved) return;\n      suppressClick.current = true;\n      if (cancel) emit(state.start, \"scrub\", true);\n      else onValueCommit?.(latest.current.current, { source: \"scrub\", unit: latest.current.unit });\n      springHome();\n    },\n    // springHome only reads refs and sets state.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [emit, onValueCommit],\n  );\n\n  useEffect(() => {\n    if (!scrubbing) return;\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        endScrub(true);\n        return;\n      }\n      if (event.key === \"Shift\" || event.key === \"Alt\")\n        setModifier(event.shiftKey ? \"coarse\" : event.altKey ? \"fine\" : null);\n    };\n    const onLock = () => {\n      if (drag.current?.locked && document.pointerLockElement !== handleRef.current)\n        endScrub(false);\n    };\n    window.addEventListener(\"keydown\", onKey);\n    window.addEventListener(\"keyup\", onKey);\n    document.addEventListener(\"pointerlockchange\", onLock);\n    return () => {\n      window.removeEventListener(\"keydown\", onKey);\n      window.removeEventListener(\"keyup\", onKey);\n      document.removeEventListener(\"pointerlockchange\", onLock);\n    };\n  }, [endScrub, scrubbing]);\n\n  function placeCursor() {\n    const node = cursorRef.current;\n    if (node) node.style.transform = `translate3d(${cursor.current.x}px, ${cursor.current.y}px, 0)`;\n  }\n\n  function onHandleDown(event: ReactPointerEvent<HTMLLabelElement>) {\n    if (frozen || drag.current || (event.pointerType === \"mouse\" && event.button !== 0)) return;\n    event.preventDefault();\n    if (draft !== null) commitDraft();\n    try {\n      event.currentTarget.setPointerCapture(event.pointerId);\n    } catch {\n      // A pointer the browser is not tracking (a synthetic one) cannot be captured; the drag follows it all the same.\n    }\n    drag.current = {\n      id: event.pointerId,\n      lastX: event.clientX,\n      travel: 0,\n      raw: latest.current.current,\n      start: latest.current.current,\n      moved: false,\n      locked: false,\n      mouse: event.pointerType === \"mouse\",\n    };\n    cursor.current = { x: event.clientX, y: event.clientY };\n  }\n\n  function onHandleMove(event: ReactPointerEvent<HTMLLabelElement>) {\n    const state = drag.current;\n    if (!state || event.pointerId !== state.id) return;\n    const locked = document.pointerLockElement === handleRef.current;\n    const dx = locked ? event.movementX : event.clientX - state.lastX;\n    state.lastX = event.clientX;\n    state.travel += dx;\n    if (!state.moved) {\n      if (Math.abs(state.travel) < SLOP) return;\n      state.moved = true;\n      inputRef.current?.blur();\n      document.documentElement.style.cursor = \"ew-resize\";\n      if (pointerLock && state.mouse && handleRef.current?.requestPointerLock) {\n        try {\n          const request = handleRef.current.requestPointerLock() as unknown;\n          if (request instanceof Promise) request.catch(() => {});\n        } catch {\n          // Pointer lock is optional.\n        }\n      }\n      setScrubbing({ locked: false });\n    }\n    if (locked && !state.locked) {\n      state.locked = true;\n      setScrubbing({ locked: true });\n    }\n\n    // A stand-in cursor replaces the locked pointer and wraps at the window edges, the way long scrubs do in design tools.\n    if (locked) {\n      const width = window.innerWidth;\n      cursor.current.x = (((cursor.current.x + dx) % width) + width) % width;\n    } else cursor.current = { x: event.clientX, y: event.clientY };\n    placeCursor();\n\n    const amount = event.shiftKey ? coarse : event.altKey ? fine : step;\n    const mode = event.shiftKey ? \"coarse\" : event.altKey ? \"fine\" : null;\n    if (mode !== modifier) setModifier(mode);\n    state.raw += (dx / pixelsPerStep) * amount;\n\n    if (!canWrap) {\n      const perPx = amount / pixelsPerStep;\n      const over =\n        state.raw > max\n          ? (state.raw - max) / perPx\n          : state.raw < min\n            ? (state.raw - min) / perPx\n            : 0;\n      // Cap the stored overshoot so reversing starts moving the value again after a short relax, not a long walk back.\n      if (Math.abs(over) > OVERSHOOT_CAP)\n        state.raw = (over > 0 ? max : min) + Math.sign(over) * OVERSHOOT_CAP * perPx;\n      paintStrain(\n        prefersReducedMotion()\n          ? 0\n          : rubber(Math.max(-OVERSHOOT_CAP, Math.min(OVERSHOOT_CAP, over))),\n      );\n    }\n    const next = constrain(Math.round(state.raw / amount) * amount);\n    if (next !== latest.current.current) emit(next, \"scrub\", false);\n  }\n\n  function onHandleUp(event: ReactPointerEvent<HTMLLabelElement>) {\n    const state = drag.current;\n    if (!state || event.pointerId !== state.id) return;\n    endScrub(false);\n  }\n\n  function onHandleClick(event: ReactMouseEvent<HTMLLabelElement>) {\n    if (suppressClick.current) {\n      suppressClick.current = false;\n      event.preventDefault();\n      return;\n    }\n    if (disabled) return;\n    event.preventDefault();\n    inputRef.current?.focus();\n    inputRef.current?.select();\n  }\n\n  function onHandleDoubleClick() {\n    if (frozen || resetValue === undefined) return;\n    emit(constrain(resetValue), \"reset\", true);\n  }\n\n  // ---- Typing ----\n\n  function onInputKeyDown(event: ReactKeyboardEvent<HTMLInputElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    if (readOnly) {\n      // Enter never submits a surrounding form, read-only or not.\n      if (event.key === \"Enter\") event.preventDefault();\n      return;\n    }\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") {\n      event.preventDefault();\n      if (draft !== null && !commitDraft()) return;\n      stepBy(event.key === \"ArrowUp\" ? 1 : -1, event);\n      requestAnimationFrame(() => inputRef.current?.select());\n      return;\n    }\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      commitDraft();\n      requestAnimationFrame(() => inputRef.current?.select());\n      return;\n    }\n    if (event.key === \"Escape\" && draft !== null) {\n      event.preventDefault();\n      event.stopPropagation();\n      setDraft(null);\n      requestAnimationFrame(() => inputRef.current?.select());\n    }\n  }\n\n  function onInputFocus(event: FocusEvent<HTMLInputElement>) {\n    onFocus?.(event);\n    event.currentTarget.select();\n  }\n\n  function onInputBlur(event: FocusEvent<HTMLInputElement>) {\n    onBlur?.(event);\n    commitDraft();\n  }\n\n  function cycleUnit() {\n    if (readOnly || unitList.length < 2) return;\n    const next = unitList[(unitList.indexOf(unit) + 1) % unitList.length] ?? unit;\n    if (unitProp === undefined) setInnerUnit(next);\n    onUnitChange?.(next);\n    latest.current = { ...latest.current, unit: next };\n  }\n\n  const text = draft ?? format(current, places);\n  const spokenUnit = unit === \"%\" ? \"percent\" : unit === \"deg\" || unit === \"°\" ? \"degrees\" : unit;\n  const valueText = `${format(current, places)}${unit ? ` ${spokenUnit}` : \"\"}`;\n  const multiplier =\n    modifier === \"coarse\"\n      ? `×${format(coarse / step, 2)}`\n      : modifier === \"fine\"\n        ? `×${format(fine / step, 3)}`\n        : null;\n  const labelIsText = typeof label === \"string\" || typeof label === \"number\";\n\n  return (\n    <div\n      data-slot=\"scrub-input\"\n      data-size={size}\n      data-disabled={disabled ? \"\" : undefined}\n      data-readonly={readOnly ? \"\" : undefined}\n      data-scrubbing={scrubbing ? \"\" : undefined}\n      data-invalid={invalid ? \"\" : undefined}\n      data-releasing={releasing ? \"\" : undefined}\n      className={cn(\n        cnAll(\n          \"group/scrub relative isolate grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)] items-stretch font-sans text-foreground\",\n          sizeClass[size],\n          \"data-[disabled]:opacity-(--opacity-disabled)\",\n        ),\n        className,\n      )}\n    >\n      <div\n        ref={shellRef}\n        aria-hidden=\"true\"\n        data-slot=\"scrub-input-shell\"\n        className={cnAll(\n          \"absolute inset-0 -z-10 overflow-hidden border-(length:--border-width) border-transparent bg-surface-muted will-change-transform\",\n          size === \"sm\" ? \"rounded-sm\" : \"rounded-md\",\n          \"motion-safe:transition-[background-color,border-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n          // The shell springs home after a strain: its transform transitions only while `releasing`.\n          \"group-data-[releasing]/scrub:motion-safe:transition-[transform,background-color,border-color] group-data-[releasing]/scrub:motion-safe:duration-(--duration-smooth) group-data-[releasing]/scrub:motion-safe:ease-smooth\",\n          \"group-hover/scrub:border-border\",\n          \"group-focus-within/scrub:border-foreground group-focus-within/scrub:bg-surface\",\n          \"forced-colors:group-focus-within/scrub:outline-solid forced-colors:group-focus-within/scrub:outline-(length:--focus-ring-width) forced-colors:group-focus-within/scrub:outline-offset-(--focus-ring-offset)\",\n          \"group-data-[scrubbing]/scrub:border-border-strong\",\n          \"group-data-[invalid]/scrub:border-destructive-strong\",\n        )}\n      >\n        {showTrack ? (\n          <span\n            data-slot=\"scrub-input-fill\"\n            style={{ transform: `scaleX(${fraction})` }}\n            className=\"pointer-events-none absolute inset-0 origin-left bg-foreground/6 group-data-[scrubbing]/scrub:bg-foreground/10 motion-safe:transition-transform motion-safe:duration-(--duration-smooth) motion-safe:ease-smooth group-data-[scrubbing]/scrub:motion-safe:transition-none\"\n          />\n        ) : null}\n      </div>\n      <label\n        ref={handleRef}\n        htmlFor={id}\n        data-slot=\"scrub-input-handle\"\n        data-text={labelIsText ? \"\" : undefined}\n        onPointerDown={onHandleDown}\n        onPointerMove={onHandleMove}\n        onPointerUp={onHandleUp}\n        onPointerCancel={onHandleUp}\n        onClick={onHandleClick}\n        onDoubleClick={onHandleDoubleClick}\n        className=\"flex min-w-7.5 cursor-ew-resize touch-pan-y items-center justify-center ps-2.5 pe-1 text-text-secondary select-none motion-safe:transition-colors motion-safe:duration-(--duration-quick) data-[text]:font-medium hover:text-foreground group-data-[scrubbing]/scrub:text-foreground group-data-[readonly]/scrub:cursor-default group-data-[readonly]/scrub:hover:text-text-secondary group-data-[disabled]/scrub:cursor-not-allowed [&_svg]:size-3.5 [&_svg]:flex-none\"\n      >\n        {label}\n      </label>\n      <div\n        ref={bodyRef}\n        data-slot=\"scrub-input-body\"\n        className={cnAll(\n          \"flex min-w-0 items-center gap-0.5 pe-2.5 data-[strain]:motion-safe:animate-field-strain\",\n          \"group-data-[releasing]/scrub:motion-safe:transition-transform group-data-[releasing]/scrub:motion-safe:duration-(--duration-smooth) group-data-[releasing]/scrub:motion-safe:ease-smooth\",\n        )}\n      >\n        <input\n          {...rest}\n          ref={inputRef}\n          id={id}\n          type=\"text\"\n          inputMode=\"decimal\"\n          autoComplete=\"off\"\n          spellCheck={false}\n          role=\"spinbutton\"\n          aria-label={ariaLabel}\n          aria-valuenow={current}\n          aria-valuemin={Number.isFinite(min) ? min : undefined}\n          aria-valuemax={Number.isFinite(max) ? max : undefined}\n          aria-valuetext={valueText}\n          aria-invalid={invalid || undefined}\n          aria-readonly={readOnly || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          value={text}\n          onChange={(event) => {\n            if (!readOnly) setDraft(event.target.value);\n          }}\n          onFocus={onInputFocus}\n          onBlur={onInputBlur}\n          onKeyDown={onInputKeyDown}\n          className={cnAll(\n            \"m-0 h-full w-full min-w-0 flex-1 border-0 bg-transparent p-0 ps-1 font-sans text-foreground tabular-nums outline-none selection:bg-primary selection:text-primary-foreground read-only:caret-transparent disabled:cursor-not-allowed\",\n            size === \"sm\" ? \"text-xs\" : \"text-sm\",\n          )}\n        />\n        {unit ? (\n          unitList.length > 1 && !readOnly ? (\n            <AriaButton\n              data-slot=\"scrub-input-unit\"\n              isDisabled={disabled}\n              onPress={cycleUnit}\n              aria-label={`Unit: ${unit}. Change unit`}\n              className=\"relative inline-flex h-6 min-w-6 flex-none cursor-pointer items-center justify-center rounded-xs border-0 bg-transparent px-1 text-xs text-text-secondary outline-none motion-safe:transition-[background-color,color,scale] motion-safe:duration-(--duration-quick) motion-safe:ease-settle data-[hovered]:bg-foreground/7 data-[hovered]:text-foreground data-[pressed]:scale-95 data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed\"\n            >\n              <SwapText swapKey={unit} motion=\"rise\">\n                {unit}\n              </SwapText>\n            </AriaButton>\n          ) : (\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"scrub-input-unit\"\n              className=\"inline-flex h-6 min-w-4.5 flex-none items-center justify-center px-1 text-xs text-text-secondary\"\n            >\n              {unit}\n            </span>\n          )\n        ) : null}\n      </div>\n      {multiplier && !scrubbing?.locked ? (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"scrub-input-multiplier\"\n          className=\"pointer-events-none absolute bottom-full mb-1.5 start-1.5 z-10 rounded-pill bg-foreground px-1.75 py-0.5 text-xs leading-4 text-background tabular-nums motion-safe:animate-field-clear-in motion-reduce:animate-fade-in\"\n        >\n          {multiplier}\n        </span>\n      ) : null}\n      {scrubbing?.locked\n        ? createPortal(\n            <div\n              ref={(node) => {\n                cursorRef.current = node;\n                placeCursor();\n              }}\n              aria-hidden=\"true\"\n              data-slot=\"scrub-input-cursor\"\n              className=\"pointer-events-none fixed top-0 left-0 z-50 -mt-2 -ms-3.25 flex items-center gap-1\"\n            >\n              <svg\n                width=\"26\"\n                height=\"16\"\n                viewBox=\"0 0 26 16\"\n                className=\"block fill-foreground stroke-background drop-shadow-sm\"\n                strokeWidth=\"1.4\"\n                strokeLinejoin=\"round\"\n              >\n                <path d=\"M1.5 8 L7.5 2.5 V6 H18.5 V2.5 L24.5 8 L18.5 13.5 V10 H7.5 V13.5 Z\" />\n              </svg>\n              {multiplier ? (\n                <span className=\"rounded-pill bg-foreground px-1.5 py-px font-sans text-xs leading-4 text-background tabular-nums motion-safe:animate-field-clear-in motion-reduce:animate-fade-in\">\n                  {multiplier}\n                </span>\n              ) : null}\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/search-field/search-field.js

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { mergeRefs } from "../lib/merge-refs.js";
 import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from "../lib/motion.js";
-import { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from "../lib/field-surface.js";
 import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from "../lib/field-surface.js";
 import { cva } from "class-variance-authority";
 import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
 import { Button, Group, Input } from "react-aria-components";

package/dist/select/select.d.ts

@@ -30,7 +30,7 @@ export declare const selectTriggerVariants: (props?: ({
   size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const selectPopoverVariants: (props?: ({
-  reveal?: "fade" | "grow" | null | undefined;
+  reveal?: "grow" | "fade" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const selectItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /**
@@ -79,6 +79,15 @@ interface SelectProps$1 extends Omit<SelectProps<object>, "className" | "style"
    * @default "md"
    */
   size?: "sm" | "md" | "lg";
+  /**
+   * The field must be chosen. React Aria's own prop, documented here because
+   * it now also draws the required marker after the label, the same one Input,
+   * Textarea and PasswordField show. The hidden native select is `required`,
+   * so native form validation sees it, and the root gets `data-required`. The
+   * marker is aria-hidden, so the trigger's name stays the label's text.
+   * @default false
+   */
+  isRequired?: boolean;
   /** Extra classes for the wrapper. Merged last. */
   className?: string;
 }

package/dist/select/select.js

@@ -1,8 +1,9 @@
 "use client";
 import { cn, cnAll } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "../lib/motion.js";
-import { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from "../lib/field-surface.js";
 import { labelVariants } from "../label/label.js";
+import { RequiredMarker } from "../lib/required-marker.js";
+import { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from "../lib/field-surface.js";
 import { RollingValue } from "../lib/rolling-value.js";
 import { cva } from "class-variance-authority";
 import { forwardRef, useContext, useState } from "react";
@@ -159,10 +160,10 @@ const Select$1 = forwardRef(function Select$2({ children, label, labelHidden, pl
 		"data-slot": "select",
 		className: cn(selectVariants(), className),
 		children: [
-			/* @__PURE__ */ jsx(Label, {
+			/* @__PURE__ */ jsxs(Label, {
 				"data-slot": "select-label",
 				className: cnAll(labelVariants(), labelHidden && "sr-only"),
-				children: label
+				children: [label, props.isRequired ? /* @__PURE__ */ jsx(RequiredMarker, {}) : null]
 			}),
 			/* @__PURE__ */ jsxs(Button, {
 				ref,

package/dist/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["AriaSelectValue","Select","AriaSelect","AriaLabel","AriaButton","AriaFieldError","AriaPopover","AriaListBox","AriaListBoxItem"],"sources":["../../src/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useContext, useState, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  FieldError as AriaFieldError,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  Popover as AriaPopover,\n  Select as AriaSelect,\n  SelectStateContext,\n  SelectValue as AriaSelectValue,\n  type ListBoxItemProps as AriaListBoxItemProps,\n  type SelectProps as AriaSelectProps,\n} from \"react-aria-components\";\n\nimport { labelVariants } from \"../label/label.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from \"../lib/field-surface.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { RollingValue } from \"../lib/rolling-value.js\";\n\n/**\n * Select, ported from the legacy shadcn/Radix component.\n *\n * FOUR PARTS COLLAPSE INTO ONE. The census reads `SelectItem` 35 and\n * `Select`, `SelectTrigger`, `SelectValue`, `SelectContent` 15 each --\n * those four always appear together in the same shape, exactly like\n * Dialog's header trio, so they are one component and a prop.\n * `SelectGroup`, `SelectLabel`, `SelectSeparator`, `SelectScrollUpButton`\n * and `SelectScrollDownButton` have ZERO call sites and are not ported.\n *\n * `label` IS REQUIRED. The legacy exports a `SelectLabel` that nobody\n * renders and passes no `aria-label` anywhere, so all 15 selects are\n * unnamed comboboxes -- the same finding as Progress, Slider and\n * ScrollArea. Pass `labelHidden` when the surrounding UI already says it.\n *\n * The trigger reuses `fieldSurfaceVariants`, shared with Input and\n * Textarea. A select and a text field sit in the same form row and must\n * be the same box; the legacy styled them separately and drifted --\n * `h-10` here against Input's `h-9`, for no stated reason.\n *\n * The popover is `card`, not a `popover` role: `--popover` is\n * byte-identical to `--card` in the legacy theme. Item hover is `muted`,\n * not `accent`, for the same reason.\n */\n/*\n * `group` is load-bearing, not decoration. React Aria puts `data-invalid` on\n * THIS element, never on the trigger -- so the trigger's own\n * `data-[invalid]:` rule, inherited from the shared field surface, can never\n * match and `isInvalid` painted nothing at all. The trigger reads the state\n * from here instead.\n */\nexport const selectVariants = cva([\"group flex w-full flex-col gap-1.5 box-border font-sans\"]);\n\n/** The error line under a Select-based control (Select, TimePicker): one class, so they cannot drift. */\nexport const selectErrorClass = \"text-sm leading-(--leading-normal) text-destructive-strong\";\n\nexport const selectTriggerVariants = cva(\n  [\n    // See selectVariants: the invalid state lives on the ROOT, so this reads it\n    // from the group rather than from itself.\n    \"group-data-[invalid]:border-destructive-strong\",\n    fieldSurfaceVariants(),\n    // While the menu is open the trigger is pressed and focus has moved into the\n    // list, so the border keeps the darkness it had instead of falling back.\n    \"[&:where([data-pressed])]:border-border-strong\",\n    // The fill follows the border: hovered, pressed and open all read as one\n    // state. Ordinary variants, not :where(): the base background is a plain\n    // class, so a zero-specificity rule would lose to it. Nothing else paints\n    // the background, and a disabled trigger is never hovered or pressed.\n    \"data-[hovered]:not-data-[disabled]:bg-muted\",\n    \"data-[pressed]:bg-muted\",\n    \"group/trigger\",\n    \"flex items-center justify-between gap-2 text-start\",\n    \"leading-(--leading-normal) cursor-pointer\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      /**\n       * The same rungs and the same tokens as Input and Button. 14 of the\n       * product's 32 `SelectTrigger` call sites override the height by hand,\n       * and a Select sits in the same form row as a field -- giving Input the\n       * axis without giving it here would be exactly the drift\n       * `fieldSurfaceVariants` exists to prevent.\n       *\n       * Type matches Input's at every rung: 14px on `sm` (16px on a touch\n       * screen), 16px on `md` and `lg`. A row whose two controls disagree\n       * about type size reads as a mistake. The trigger is a button, so iOS\n       * would not zoom on it; the coarse-pointer rule is there to keep it\n       * equal to the field beside it.\n       */\n      size: {\n        sm: [fieldBoxSize.sm, fieldTextSize.sm],\n        md: [fieldBoxSize.md, fieldTextSize.md],\n        lg: [fieldBoxSize.lg, fieldTextSize.lg],\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nexport const selectPopoverVariants = cva(\n  [\n    // --trigger-width is set inline by React Aria, so the list matches the\n    // control it came from rather than guessing a width.\n    \"w-(--trigger-width) min-w-32 overflow-y-auto\",\n    // Grows from the trigger edge: offset toward it, a little small and clipped to\n    // the trigger's height, then opening to full height; 120ms out. React Aria\n    // marks the first frame data-entering and the leaving one data-exiting and\n    // keeps the list mounted until the animation ends.\n    \"[--menu-x:0px] [--menu-y:-6px] origin-top\",\n    // The panel also GROWS from the trigger's height: --menu-from is where the clip\n    // starts, --menu-flip 1 grows it from the bottom edge when it opens upward.\n    \"[--menu-from:var(--density-control-h-md)] [--menu-flip:0]\",\n    \"data-[placement=top]:[--menu-y:6px] data-[placement=top]:origin-bottom data-[placement=top]:[--menu-flip:1]\",\n    \"data-[placement=left]:[--menu-x:6px] data-[placement=left]:[--menu-y:0px] data-[placement=left]:origin-right\",\n    \"data-[placement=right]:[--menu-x:-6px] data-[placement=right]:[--menu-y:0px] data-[placement=right]:origin-left\",\n    \"motion-reduce:data-[entering]:animate-select-fade-in\",\n    \"motion-safe:data-[exiting]:animate-select-popover-out motion-reduce:data-[exiting]:animate-select-fade-out\",\n    \"data-[exiting]:pointer-events-none\",\n    \"rounded-panel border-(length:--border-width) border-border p-1\",\n    \"bg-card text-card-foreground shadow-floating\",\n    \"box-border font-sans text-sm leading-(--leading-normal)\",\n  ],\n  {\n    variants: {\n      /**\n       * `grow` opens the panel from the trigger's height on the smooth spring (about 700ms). `fade` is the quick 240ms\n       * settle for a list whose first row is a search field: a clipped panel would hide it while it grows.\n       */\n      reveal: {\n        grow: \"motion-safe:data-[entering]:animate-select-popover-reveal\",\n        fade: \"motion-safe:data-[entering]:animate-select-popover-in\",\n      },\n    },\n    defaultVariants: { reveal: \"grow\" },\n  },\n);\n\nexport const selectItemVariants = cva([\n  \"relative flex cursor-pointer select-none items-center gap-2\",\n  // The same 18px as a Menu row: the hover fill is a soft pill inside the panel.\n  \"rounded-control py-1.5 pe-8 ps-2\",\n  \"box-border text-sm leading-(--leading-normal) text-card-foreground\",\n  // data-focused, not :hover. React Aria drives one highlight from both\n  // pointer and keyboard, so the row under the mouse and the row the\n  // arrows reached are the same row.\n  \"outline-none data-[focused]:bg-muted\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-instant) motion-safe:ease-settle\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\n/**\n * A single-choice picker.\n *\n * @example\n * <Select label=\"Country\" placeholder=\"Pick one\"\n *         selectedKey={code} onSelectionChange={setCode}>\n *   <SelectItem id=\"gb\">United Kingdom</SelectItem>\n *   <SelectItem id=\"us\">United States</SelectItem>\n * </Select>\n */\nexport interface SelectProps extends Omit<\n  AriaSelectProps<object>,\n  \"className\" | \"style\" | \"children\" | \"items\"\n> {\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /**\n   * What is being chosen, and the control's accessible name.\n   *\n   * **Required.** All 15 legacy selects are unnamed: the legacy exports a\n   * `SelectLabel` that nobody renders and passes no `aria-label`.\n   */\n  label: ReactNode;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /** Shown while nothing is selected. */\n  placeholder?: string;\n  /**\n   * Why the selection is wrong. Rendered under the control, and it is what\n   * makes `isInvalid` reach a screen reader.\n   *\n   * React Aria marks the ROOT `data-invalid` and leaves the button untouched,\n   * and an `aria-invalid` handed to that button is dropped by\n   * `filterDOMProps`, whose allowlist stops at the labelling attributes -- the\n   * same silent loss as `aria-current` on a pagination button. So without a\n   * message, an invalid select is invalid only in colour, which is WCAG 1.4.1\n   * on its own. React Aria wires this into `aria-describedby` for us.\n   */\n  errorMessage?: ReactNode;\n  /**\n   * Control scale of the trigger. Height and inline padding come from the\n   * same `--density-control-*` tokens as Input and Button, so a Select, a\n   * field and a button on one rung are the same height.\n   *\n   * Type does not scale with it, matching Input.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\n/**\n * The shown value. React Aria's own `SelectValue` stays, visually hidden, as the\n * text a screen reader reads; the copy the eye sees rolls when the selection\n * changes: a later option rises from below, an earlier one drops from above. The\n * direction is read from the option's place in the list. A pre-selected value\n * does not animate on first mount.\n */\nfunction ValueRoll({ placeholder }: { placeholder?: string }) {\n  const state = useContext(SelectStateContext);\n  const key = state?.selectedKey ?? null;\n  let index = -1;\n  if (state && key != null) {\n    let n = 0;\n    for (const item of state.collection) {\n      if (item.type !== \"item\") continue;\n      if (item.key === key) index = n;\n      n += 1;\n    }\n  }\n  const [previous, setPrevious] = useState(index);\n  const [dir, setDir] = useState(1);\n  if (previous !== index) {\n    setPrevious(index);\n    setDir(index > previous ? 1 : -1);\n  }\n  const text = state?.selectedItem?.textValue ?? \"\";\n  // React Aria resolves a default selection after the first render, so the key\n  // starts as null and then settles. Until the collection is built nothing is\n  // shown, and the swap remounts once it is, so that settling is not a change.\n  const built = (state?.collection.size ?? 0) > 0 || state?.selectedKey != null;\n  const [mounted, setMounted] = useState(false);\n  useIsomorphicLayoutEffect(() => setMounted(true), []);\n  const settled = built || mounted;\n  const swapKey = key == null ? \"placeholder\" : `value-${String(key)}`;\n  return (\n    <RollingValue\n      srValue={\n        <AriaSelectValue data-slot=\"select-value\" className=\"sr-only\">\n          {({ isPlaceholder, selectedText }) => (isPlaceholder ? placeholder : selectedText)}\n        </AriaSelectValue>\n      }\n      swapKey={swapKey}\n      dir={dir}\n      instanceKey={settled ? \"live\" : \"boot\"}\n    >\n      {key == null ? (\n        <span data-slot=\"select-placeholder\" className=\"text-muted-foreground\">\n          {placeholder}\n        </span>\n      ) : (\n        text\n      )}\n    </RollingValue>\n  );\n}\n\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  { children, label, labelHidden, placeholder, errorMessage, size = \"md\", className, ...props },\n  ref,\n) {\n  return (\n    <AriaSelect {...props} data-slot=\"select\" className={cn(selectVariants(), className)}>\n      {/*\n        The Label's own classes, so a Select's label and the Label over an\n        Input in the same form are one style (same size, weight, colour and\n        line height). The select-label slot stays for consumers that target it.\n      */}\n      <AriaLabel\n        data-slot=\"select-label\"\n        className={cnAll(labelVariants(), labelHidden && \"sr-only\")}\n      >\n        {label}\n      </AriaLabel>\n\n      {/*\n        The ref goes on the TRIGGER, not the AriaSelect root above. The root\n        is a field-level wrapper div; the trigger is the always-visible\n        interactive surface a caller actually wants to focus or click,\n        the same reasoning that puts Input's ref on the real control.\n      */}\n      <AriaButton ref={ref} data-slot=\"select-trigger\" className={selectTriggerVariants({ size })}>\n        <ValueRoll placeholder={placeholder} />\n        {/*\n          aria-hidden: the chevron is decoration. The button already\n          announces itself as a combobox, and a second name source only\n          makes it announce twice.\n        */}\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.75\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n        >\n          <path d=\"m4 6 4 4 4-4\" />\n        </svg>\n      </AriaButton>\n\n      {errorMessage == null ? null : (\n        // Not conditional on isInvalid: React Aria renders FieldError only\n        // while the field IS invalid, so gating it here as well would just be\n        // two sources of truth for one state.\n        <AriaFieldError data-slot=\"select-error\" className={selectErrorClass}>\n          {errorMessage}\n        </AriaFieldError>\n      )}\n\n      {/* No border colour on the list: it is lifted by its shadow alone. */}\n      <AriaPopover\n        data-slot=\"select-popover\"\n        className={cn(selectPopoverVariants(), \"border-0\")}\n      >\n        <AriaListBox data-slot=\"select-list\" className=\"outline-none\">\n          {children}\n        </AriaListBox>\n      </AriaPopover>\n    </AriaSelect>\n  );\n});\n\n/**\n * One option. Its `id` is the value.\n *\n * @example\n * <SelectItem id=\"gb\">United Kingdom</SelectItem>\n */\nexport interface SelectItemProps extends Omit<\n  AriaListBoxItemProps,\n  \"className\" | \"style\" | \"children\"\n> {\n  children?: ReactNode;\n  /**\n   * The option's text, for the trigger and for typeahead.\n   *\n   * Derived from `children` when they are a string. Pass it explicitly\n   * when the option renders anything richer than text.\n   */\n  textValue?: string;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(function SelectItem(\n  { className, children, textValue, ...props },\n  ref,\n) {\n  return (\n    <AriaListBoxItem\n      ref={ref}\n      {...props}\n      /*\n        textValue, derived from string children.\n        React Aria infers an item's text from its children -- but ONLY\n        when they are a string. This item uses FUNCTION children so the\n        tick can be rendered in JS, which defeats that inference: the\n        trigger showed an empty value after selecting, and typeahead had\n        nothing to match on. Neither is visible in the type system.\n      */\n      textValue={textValue ?? (typeof children === \"string\" ? children : undefined)}\n      data-slot=\"select-item\"\n      className={cn(selectItemVariants(), className)}\n    >\n      {({ isSelected }) => (\n        <>\n          {/*\n            The tick is rendered in JS rather than toggled with CSS, so\n            the precedence is explicit and a test can read it from the\n            DOM. ps-8 above reserves the gutter, so selecting an option\n            does not shift its label.\n          */}\n          {isSelected ? (\n            <svg\n              data-slot=\"select-item-check\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"absolute end-2 size-3.5 motion-safe:animate-select-check-in\"\n            >\n              <path d=\"m3.5 8.5 3 3 6-6\" />\n            </svg>\n          ) : null}\n          {children}\n        </>\n      )}\n    </AriaListBoxItem>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAa,iBAAiB,IAAI,CAAC,yDAAyD,CAAC;;AAG7F,MAAa,mBAAmB;AAEhC,MAAa,wBAAwB,IACnC;CAGE;CACA,qBAAqB;CAGrB;CAKA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;AAcR,MAAM;EACJ,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;EACtC,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;EACtC,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;CACxC,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAEA,MAAa,wBAAwB,IACnC;CAGE;CAKA;CAGA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU;;;;;AAKR,QAAQ;EACN,MAAM;EACN,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,QAAQ,OAAO;AACpC,CACF;AAEA,MAAa,qBAAqB,IAAI;CACpC;CAEA;CACA;CAIA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;;;;;;;AA8DD,SAAS,UAAU,EAAE,eAAyC;CAC5D,MAAM,QAAQ,WAAW,kBAAkB;CAC3C,MAAM,MAAM,OAAO,eAAe;CAClC,IAAI,QAAQ;CACZ,IAAI,SAAS,OAAO,MAAM;EACxB,IAAI,IAAI;EACR,KAAK,MAAM,QAAQ,MAAM,YAAY;GACnC,IAAI,KAAK,SAAS,QAAQ;GAC1B,IAAI,KAAK,QAAQ,KAAK,QAAQ;GAC9B,KAAK;EACP;CACF;CACA,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC;CAChC,IAAI,aAAa,OAAO;EACtB,YAAY,KAAK;EACjB,OAAO,QAAQ,WAAW,IAAI,EAAE;CAClC;CACA,MAAM,OAAO,OAAO,cAAc,aAAa;CAI/C,MAAM,SAAS,OAAO,WAAW,QAAQ,KAAK,KAAK,OAAO,eAAe;CACzE,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,gCAAgC,WAAW,IAAI,GAAG,CAAC,CAAC;CACpD,MAAM,UAAU,SAAS;CACzB,MAAM,UAAU,OAAO,OAAO,gBAAgB,SAAS,OAAO,GAAG;CACjE,OACE,oBAAC,cAAD;EACE,SACE,oBAACA,aAAD;GAAiB,aAAU;GAAe,WAAU;GAChD,WAAA,EAAE,eAAe,mBAAoB,gBAAgB,cAAc;EACtD,CAAA;EAEV;EACJ;EACL,aAAa,UAAU,SAAS;EAE/B,UAAA,OAAO,OACN,oBAAC,QAAD;GAAM,aAAU;GAAqB,WAAU;GAC5C,UAAA;EACG,CAAA,IAEN;CAEU,CAAA;AAElB;AAEA,MAAaC,WAAS,WAA2C,SAASA,SACxE,EAAE,UAAU,OAAO,aAAa,aAAa,cAAc,OAAO,MAAM,WAAW,GAAG,SACtF,KACA;CACA,OACE,qBAACC,QAAD;EAAY,GAAI;EAAO,aAAU;EAAS,WAAW,GAAG,eAAe,GAAG,SAAS;EAAnF,UAAA;GAME,oBAACC,OAAD;IACE,aAAU;IACV,WAAW,MAAM,cAAc,GAAG,eAAe,SAAS;IAEzD,UAAA;GACQ,CAAA;GAQX,qBAACC,QAAD;IAAiB;IAAK,aAAU;IAAiB,WAAW,sBAAsB,EAAE,KAAK,CAAC;IAA1F,UAAA,CACE,oBAAC,WAAD,EAAwB,YAAc,CAAA,GAMtC,oBAAC,OAAD;KACE,eAAY;KACZ,SAAQ;KACR,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,WAAU;KAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,eAAgB,CAAA;IACrB,CAAA,CACK;;GAEX,gBAAgB,OAAO,OAItB,oBAACC,YAAD;IAAgB,aAAU;IAAe,WAAW;IACjD,UAAA;GACa,CAAA;GAIlB,oBAACC,SAAD;IACE,aAAU;IACV,WAAW,GAAG,sBAAsB,GAAG,UAAU;IAEjD,UAAA,oBAACC,SAAD;KAAa,aAAU;KAAc,WAAU;KAC5C;IACU,CAAA;GACF,CAAA;EACH;;AAEhB,CAAC;AAwBD,MAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,UAAU,WAAW,GAAG,SACrC,KACA;CACA,OACE,oBAACC,aAAD;EACO;EACL,GAAI;EASJ,WAAW,cAAc,OAAO,aAAa,WAAW,WAAW,KAAA;EACnE,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;EAE3C,WAAA,EAAE,iBACF,qBAAA,YAAA,EAAA,UAAA,CAOG,aACC,oBAAC,OAAD;GACE,aAAU;GACV,eAAY;GACZ,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,WAAU;GAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;EACzB,CAAA,IACH,MACH,QACD,EAAA,CAAA;CAEW,CAAA;AAErB,CAAC"}
+{"version":3,"file":"select.js","names":["AriaSelectValue","Select","AriaSelect","AriaLabel","AriaButton","AriaFieldError","AriaPopover","AriaListBox","AriaListBoxItem"],"sources":["../../src/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useContext, useState, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  FieldError as AriaFieldError,\n  Label as AriaLabel,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  Popover as AriaPopover,\n  Select as AriaSelect,\n  SelectStateContext,\n  SelectValue as AriaSelectValue,\n  type ListBoxItemProps as AriaListBoxItemProps,\n  type SelectProps as AriaSelectProps,\n} from \"react-aria-components\";\n\nimport { labelVariants } from \"../label/label.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from \"../lib/field-surface.js\";\nimport { RequiredMarker } from \"../lib/required-marker.js\";\nimport { useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { RollingValue } from \"../lib/rolling-value.js\";\n\n/**\n * Select, ported from the legacy shadcn/Radix component.\n *\n * FOUR PARTS COLLAPSE INTO ONE. The census reads `SelectItem` 35 and\n * `Select`, `SelectTrigger`, `SelectValue`, `SelectContent` 15 each --\n * those four always appear together in the same shape, exactly like\n * Dialog's header trio, so they are one component and a prop.\n * `SelectGroup`, `SelectLabel`, `SelectSeparator`, `SelectScrollUpButton`\n * and `SelectScrollDownButton` have ZERO call sites and are not ported.\n *\n * `label` IS REQUIRED. The legacy exports a `SelectLabel` that nobody\n * renders and passes no `aria-label` anywhere, so all 15 selects are\n * unnamed comboboxes -- the same finding as Progress, Slider and\n * ScrollArea. Pass `labelHidden` when the surrounding UI already says it.\n *\n * The trigger reuses `fieldSurfaceVariants`, shared with Input and\n * Textarea. A select and a text field sit in the same form row and must\n * be the same box; the legacy styled them separately and drifted --\n * `h-10` here against Input's `h-9`, for no stated reason.\n *\n * The popover is `card`, not a `popover` role: `--popover` is\n * byte-identical to `--card` in the legacy theme. Item hover is `muted`,\n * not `accent`, for the same reason.\n */\n/*\n * `group` is load-bearing, not decoration. React Aria puts `data-invalid` on\n * THIS element, never on the trigger -- so the trigger's own\n * `data-[invalid]:` rule, inherited from the shared field surface, can never\n * match and `isInvalid` painted nothing at all. The trigger reads the state\n * from here instead.\n */\nexport const selectVariants = cva([\"group flex w-full flex-col gap-1.5 box-border font-sans\"]);\n\n/** The error line under a Select-based control (Select, TimePicker): one class, so they cannot drift. */\nexport const selectErrorClass = \"text-sm leading-(--leading-normal) text-destructive-strong\";\n\nexport const selectTriggerVariants = cva(\n  [\n    // See selectVariants: the invalid state lives on the ROOT, so this reads it\n    // from the group rather than from itself.\n    \"group-data-[invalid]:border-destructive-strong\",\n    fieldSurfaceVariants(),\n    // While the menu is open the trigger is pressed and focus has moved into the\n    // list, so the border keeps the darkness it had instead of falling back.\n    \"[&:where([data-pressed])]:border-border-strong\",\n    // The fill follows the border: hovered, pressed and open all read as one\n    // state. Ordinary variants, not :where(): the base background is a plain\n    // class, so a zero-specificity rule would lose to it. Nothing else paints\n    // the background, and a disabled trigger is never hovered or pressed.\n    \"data-[hovered]:not-data-[disabled]:bg-muted\",\n    \"data-[pressed]:bg-muted\",\n    \"group/trigger\",\n    \"flex items-center justify-between gap-2 text-start\",\n    \"leading-(--leading-normal) cursor-pointer\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  ],\n  {\n    variants: {\n      /**\n       * The same rungs and the same tokens as Input and Button. 14 of the\n       * product's 32 `SelectTrigger` call sites override the height by hand,\n       * and a Select sits in the same form row as a field -- giving Input the\n       * axis without giving it here would be exactly the drift\n       * `fieldSurfaceVariants` exists to prevent.\n       *\n       * Type matches Input's at every rung: 14px on `sm` (16px on a touch\n       * screen), 16px on `md` and `lg`. A row whose two controls disagree\n       * about type size reads as a mistake. The trigger is a button, so iOS\n       * would not zoom on it; the coarse-pointer rule is there to keep it\n       * equal to the field beside it.\n       */\n      size: {\n        sm: [fieldBoxSize.sm, fieldTextSize.sm],\n        md: [fieldBoxSize.md, fieldTextSize.md],\n        lg: [fieldBoxSize.lg, fieldTextSize.lg],\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nexport const selectPopoverVariants = cva(\n  [\n    // --trigger-width is set inline by React Aria, so the list matches the\n    // control it came from rather than guessing a width.\n    \"w-(--trigger-width) min-w-32 overflow-y-auto\",\n    // Grows from the trigger edge: offset toward it, a little small and clipped to\n    // the trigger's height, then opening to full height; 120ms out. React Aria\n    // marks the first frame data-entering and the leaving one data-exiting and\n    // keeps the list mounted until the animation ends.\n    \"[--menu-x:0px] [--menu-y:-6px] origin-top\",\n    // The panel also GROWS from the trigger's height: --menu-from is where the clip\n    // starts, --menu-flip 1 grows it from the bottom edge when it opens upward.\n    \"[--menu-from:var(--density-control-h-md)] [--menu-flip:0]\",\n    \"data-[placement=top]:[--menu-y:6px] data-[placement=top]:origin-bottom data-[placement=top]:[--menu-flip:1]\",\n    \"data-[placement=left]:[--menu-x:6px] data-[placement=left]:[--menu-y:0px] data-[placement=left]:origin-right\",\n    \"data-[placement=right]:[--menu-x:-6px] data-[placement=right]:[--menu-y:0px] data-[placement=right]:origin-left\",\n    \"motion-reduce:data-[entering]:animate-select-fade-in\",\n    \"motion-safe:data-[exiting]:animate-select-popover-out motion-reduce:data-[exiting]:animate-select-fade-out\",\n    \"data-[exiting]:pointer-events-none\",\n    \"rounded-panel border-(length:--border-width) border-border p-1\",\n    \"bg-card text-card-foreground shadow-floating\",\n    \"box-border font-sans text-sm leading-(--leading-normal)\",\n  ],\n  {\n    variants: {\n      /**\n       * `grow` opens the panel from the trigger's height on the smooth spring (about 700ms). `fade` is the quick 240ms\n       * settle for a list whose first row is a search field: a clipped panel would hide it while it grows.\n       */\n      reveal: {\n        grow: \"motion-safe:data-[entering]:animate-select-popover-reveal\",\n        fade: \"motion-safe:data-[entering]:animate-select-popover-in\",\n      },\n    },\n    defaultVariants: { reveal: \"grow\" },\n  },\n);\n\nexport const selectItemVariants = cva([\n  \"relative flex cursor-pointer select-none items-center gap-2\",\n  // The same 18px as a Menu row: the hover fill is a soft pill inside the panel.\n  \"rounded-control py-1.5 pe-8 ps-2\",\n  \"box-border text-sm leading-(--leading-normal) text-card-foreground\",\n  // data-focused, not :hover. React Aria drives one highlight from both\n  // pointer and keyboard, so the row under the mouse and the row the\n  // arrows reached are the same row.\n  \"outline-none data-[focused]:bg-muted\",\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-instant) motion-safe:ease-settle\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\n/**\n * A single-choice picker.\n *\n * @example\n * <Select label=\"Country\" placeholder=\"Pick one\"\n *         selectedKey={code} onSelectionChange={setCode}>\n *   <SelectItem id=\"gb\">United Kingdom</SelectItem>\n *   <SelectItem id=\"us\">United States</SelectItem>\n * </Select>\n */\nexport interface SelectProps extends Omit<\n  AriaSelectProps<object>,\n  \"className\" | \"style\" | \"children\" | \"items\"\n> {\n  /** `SelectItem` children. */\n  children?: ReactNode;\n  /**\n   * What is being chosen, and the control's accessible name.\n   *\n   * **Required.** All 15 legacy selects are unnamed: the legacy exports a\n   * `SelectLabel` that nobody renders and passes no `aria-label`.\n   */\n  label: ReactNode;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /** Shown while nothing is selected. */\n  placeholder?: string;\n  /**\n   * Why the selection is wrong. Rendered under the control, and it is what\n   * makes `isInvalid` reach a screen reader.\n   *\n   * React Aria marks the ROOT `data-invalid` and leaves the button untouched,\n   * and an `aria-invalid` handed to that button is dropped by\n   * `filterDOMProps`, whose allowlist stops at the labelling attributes -- the\n   * same silent loss as `aria-current` on a pagination button. So without a\n   * message, an invalid select is invalid only in colour, which is WCAG 1.4.1\n   * on its own. React Aria wires this into `aria-describedby` for us.\n   */\n  errorMessage?: ReactNode;\n  /**\n   * Control scale of the trigger. Height and inline padding come from the\n   * same `--density-control-*` tokens as Input and Button, so a Select, a\n   * field and a button on one rung are the same height.\n   *\n   * Type does not scale with it, matching Input.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * The field must be chosen. React Aria's own prop, documented here because\n   * it now also draws the required marker after the label, the same one Input,\n   * Textarea and PasswordField show. The hidden native select is `required`,\n   * so native form validation sees it, and the root gets `data-required`. The\n   * marker is aria-hidden, so the trigger's name stays the label's text.\n   * @default false\n   */\n  isRequired?: boolean;\n  /** Extra classes for the wrapper. Merged last. */\n  className?: string;\n}\n\n/**\n * The shown value. React Aria's own `SelectValue` stays, visually hidden, as the\n * text a screen reader reads; the copy the eye sees rolls when the selection\n * changes: a later option rises from below, an earlier one drops from above. The\n * direction is read from the option's place in the list. A pre-selected value\n * does not animate on first mount.\n */\nfunction ValueRoll({ placeholder }: { placeholder?: string }) {\n  const state = useContext(SelectStateContext);\n  const key = state?.selectedKey ?? null;\n  let index = -1;\n  if (state && key != null) {\n    let n = 0;\n    for (const item of state.collection) {\n      if (item.type !== \"item\") continue;\n      if (item.key === key) index = n;\n      n += 1;\n    }\n  }\n  const [previous, setPrevious] = useState(index);\n  const [dir, setDir] = useState(1);\n  if (previous !== index) {\n    setPrevious(index);\n    setDir(index > previous ? 1 : -1);\n  }\n  const text = state?.selectedItem?.textValue ?? \"\";\n  // React Aria resolves a default selection after the first render, so the key\n  // starts as null and then settles. Until the collection is built nothing is\n  // shown, and the swap remounts once it is, so that settling is not a change.\n  const built = (state?.collection.size ?? 0) > 0 || state?.selectedKey != null;\n  const [mounted, setMounted] = useState(false);\n  useIsomorphicLayoutEffect(() => setMounted(true), []);\n  const settled = built || mounted;\n  const swapKey = key == null ? \"placeholder\" : `value-${String(key)}`;\n  return (\n    <RollingValue\n      srValue={\n        <AriaSelectValue data-slot=\"select-value\" className=\"sr-only\">\n          {({ isPlaceholder, selectedText }) => (isPlaceholder ? placeholder : selectedText)}\n        </AriaSelectValue>\n      }\n      swapKey={swapKey}\n      dir={dir}\n      instanceKey={settled ? \"live\" : \"boot\"}\n    >\n      {key == null ? (\n        <span data-slot=\"select-placeholder\" className=\"text-muted-foreground\">\n          {placeholder}\n        </span>\n      ) : (\n        text\n      )}\n    </RollingValue>\n  );\n}\n\nexport const Select = forwardRef<HTMLButtonElement, SelectProps>(function Select(\n  { children, label, labelHidden, placeholder, errorMessage, size = \"md\", className, ...props },\n  ref,\n) {\n  return (\n    <AriaSelect {...props} data-slot=\"select\" className={cn(selectVariants(), className)}>\n      {/*\n        The Label's own classes, so a Select's label and the Label over an\n        Input in the same form are one style (same size, weight, colour and\n        line height). The select-label slot stays for consumers that target it.\n      */}\n      <AriaLabel\n        data-slot=\"select-label\"\n        className={cnAll(labelVariants(), labelHidden && \"sr-only\")}\n      >\n        {label}\n        {props.isRequired ? <RequiredMarker /> : null}\n      </AriaLabel>\n\n      {/*\n        The ref goes on the TRIGGER, not the AriaSelect root above. The root\n        is a field-level wrapper div; the trigger is the always-visible\n        interactive surface a caller actually wants to focus or click,\n        the same reasoning that puts Input's ref on the real control.\n      */}\n      <AriaButton ref={ref} data-slot=\"select-trigger\" className={selectTriggerVariants({ size })}>\n        <ValueRoll placeholder={placeholder} />\n        {/*\n          aria-hidden: the chevron is decoration. The button already\n          announces itself as a combobox, and a second name source only\n          makes it announce twice.\n        */}\n        <svg\n          aria-hidden=\"true\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.75\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className=\"text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-(--duration-gentle) motion-safe:ease-gentle group-aria-expanded/trigger:rotate-180\"\n        >\n          <path d=\"m4 6 4 4 4-4\" />\n        </svg>\n      </AriaButton>\n\n      {errorMessage == null ? null : (\n        // Not conditional on isInvalid: React Aria renders FieldError only\n        // while the field IS invalid, so gating it here as well would just be\n        // two sources of truth for one state.\n        <AriaFieldError data-slot=\"select-error\" className={selectErrorClass}>\n          {errorMessage}\n        </AriaFieldError>\n      )}\n\n      {/* No border colour on the list: it is lifted by its shadow alone. */}\n      <AriaPopover\n        data-slot=\"select-popover\"\n        className={cn(selectPopoverVariants(), \"border-0\")}\n      >\n        <AriaListBox data-slot=\"select-list\" className=\"outline-none\">\n          {children}\n        </AriaListBox>\n      </AriaPopover>\n    </AriaSelect>\n  );\n});\n\n/**\n * One option. Its `id` is the value.\n *\n * @example\n * <SelectItem id=\"gb\">United Kingdom</SelectItem>\n */\nexport interface SelectItemProps extends Omit<\n  AriaListBoxItemProps,\n  \"className\" | \"style\" | \"children\"\n> {\n  children?: ReactNode;\n  /**\n   * The option's text, for the trigger and for typeahead.\n   *\n   * Derived from `children` when they are a string. Pass it explicitly\n   * when the option renders anything richer than text.\n   */\n  textValue?: string;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(function SelectItem(\n  { className, children, textValue, ...props },\n  ref,\n) {\n  return (\n    <AriaListBoxItem\n      ref={ref}\n      {...props}\n      /*\n        textValue, derived from string children.\n        React Aria infers an item's text from its children -- but ONLY\n        when they are a string. This item uses FUNCTION children so the\n        tick can be rendered in JS, which defeats that inference: the\n        trigger showed an empty value after selecting, and typeahead had\n        nothing to match on. Neither is visible in the type system.\n      */\n      textValue={textValue ?? (typeof children === \"string\" ? children : undefined)}\n      data-slot=\"select-item\"\n      className={cn(selectItemVariants(), className)}\n    >\n      {({ isSelected }) => (\n        <>\n          {/*\n            The tick is rendered in JS rather than toggled with CSS, so\n            the precedence is explicit and a test can read it from the\n            DOM. ps-8 above reserves the gutter, so selecting an option\n            does not shift its label.\n          */}\n          {isSelected ? (\n            <svg\n              data-slot=\"select-item-check\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"absolute end-2 size-3.5 motion-safe:animate-select-check-in\"\n            >\n              <path d=\"m3.5 8.5 3 3 6-6\" />\n            </svg>\n          ) : null}\n          {children}\n        </>\n      )}\n    </AriaListBoxItem>\n  );\n});\n"],"mappings":"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"}

package/dist/separator/separator.d.ts

@@ -24,7 +24,7 @@ import { SeparatorProps } from "react-aria-components";
  * simply never be emitted.
  */
 export declare const separatorVariants: (props?: ({
-  orientation?: "vertical" | "horizontal" | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A visual divider between two groups of content.

package/dist/shortcut-recorder/shortcut-recorder.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn, cnAll } from "../lib/cn.js";
-import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
 import { formatShortcut, keyId, modifiersFromEvent, normalizeShortcut, shortcutFromEvent, shortcutTokens, splitShortcut } from "./shortcut-model.js";
 import { forwardRef, useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
 import { Button } from "react-aria-components";

package/dist/sparkline/sparkline.d.ts

@@ -7,15 +7,24 @@
  * keys scrub through the points: a cursor rides the line, the stretch after it
  * dims, and the headline and context show that point.
  *
+ * A missing point (`null`, `undefined` or not a finite number) is a gap: the
+ * line breaks around it and the scale ignores it. A point with missing
+ * neighbours on both sides is drawn as a dot.
+ *
  * Plain SVG, plain CSS transitions and one small spring tween for the two
  * things CSS cannot animate (the shape, and the cursor riding it). No chart or
  * animation library.
  */
 export declare const sparklineVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export type SparklineTone = "accent" | "success" | "warning" | "danger";
+export type SparklineSize = "sm" | "md";
 export interface SparklineProps {
-  /** The series, oldest first. One value draws a flat line. */
-  data: number[];
+  /**
+   * The series, oldest first. One value draws a flat line. A missing point
+   * (`null`, `undefined` or not a finite number) breaks the line, is left out
+   * of the scale and reads as `missingLabel` when scrubbed.
+   */
+  data: (number | null | undefined)[];
   /** What the line is. Its accessible name starts with it. */
   label: string;
   /** The headline figure, such as "1,284". Scrubbing replaces it with the scrubbed point. */
@@ -24,6 +33,22 @@ export interface SparklineProps {
   change?: string;
   /** @default "accent" */
   tone?: SparklineTone;
+  /**
+   * Any CSS colour for the line, its fill and its dot, such as a series token
+   * (`var(--color-chart-2)`). Overrides the tone's line colour; the change text
+   * keeps the tone's legible colour.
+   */
+  color?: string;
+  /**
+   * Hides the caption (label, headline and change), leaving the line alone,
+   * for a table cell or a card that shows its own figures. The label still
+   * names the figure and the slider. @default false
+   */
+  captionHidden?: boolean;
+  /** `"sm"` draws a thinner line and smaller dot, for a short line in a table cell. @default "md" */
+  size?: SparklineSize;
+  /** Read in place of a missing point's value. @default "No data" */
+  missingLabel?: string;
   /** Aspect of the drawing; the line fills the width and keeps this ratio. @default 160 */
   width?: number;
   /** @default 52 */