@seekalfred/primitives 0.7.3 → 0.7.4

package/dist/progress/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["AriaProgressBar","AriaLabel"],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Label as AriaLabel,\n  ProgressBar as AriaProgressBar,\n  type ProgressBarProps as AriaProgressBarProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useAfter, useCountTo } from \"../lib/count-to.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Progress, ported from the legacy shadcn/Radix component.\n *\n * Census: seven files import it and only TWO render anything --\n * `ResponseOption.tsx` and `LiveQA.tsx`. Both pass `value` and\n * `className` and nothing else.\n *\n * `label` IS REQUIRED, and that is the point. Neither live call site\n * passes `aria-label`, `aria-labelledby` or an `id` a label targets, and\n * `role=\"progressbar\"` does not take its name from content -- so both\n * rendered progress bars are announced as an unnamed progressbar. React\n * Aria supplies the plumbing for three naming routes but no name of its\n * own: `<ProgressBar value={60}/>` is just as nameless there. Making the\n * prop required is what turns it into something you cannot forget.\n *\n * The migration plan said this component \"adds the missing\n * aria-valuenow\". That is wrong -- Radix already supplies `aria-valuenow`,\n * `aria-valuemin`, `aria-valuemax` and `aria-valuetext`. The missing thing\n * was always the NAME.\n *\n * THE COLOURS ARE NOT THE LEGACY'S. Its track is `bg-primary/20`, an alpha\n * fill that composites against unknown page content and therefore has no\n * fixed contrast pair at all -- over white it is roughly 1.05:1, an\n * invisible boundary. Its indicator is `bg-primary`, 2.44:1 on the page.\n * Here the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`, which puts the fill against the track at 4.61:1 and\n * the track against the page at 5.25:1.\n *\n * Both are in the build-failing contrast contract.\n */\nexport const progressVariants = cva([\"flex w-full flex-col box-border font-sans\"], {\n  variants: {\n    /*\n     * True when nothing is printed above the track (`labelHidden` and no\n     * `showValue`). The header is then an empty row -- its sr-only label is\n     * out of flow -- and the column gap would leave 6px of nothing above the\n     * bar. The gap lives here and not in the base, so the raw\n     * `progressVariants()` output never carries both `gap-1.5` and `gap-0`.\n     */\n    headerEmpty: { true: \"gap-0\", false: \"gap-1.5\" },\n  },\n  defaultVariants: { headerEmpty: false },\n});\n\nexport const progressTrackVariants = cva([\n  \"relative h-2 w-full overflow-hidden rounded-pill box-border\",\n  // muted, NOT `border` as the Switch uses. A switch has no fill; a\n  // progress bar does, and primary-strong on a `border` track is 1.01:1 --\n  // the two halves are the same grey and the value disappears.\n  \"bg-muted border-(length:--border-width) border-border\",\n]);\n\nexport const progressFillVariants = cva(\n  [\n    \"h-full rounded-pill\",\n    // The fill follows the value on the smooth spring and turns success-coloured when it completes; indeterminate, it sweeps (see progress-fill).\n    \"progress-fill\",\n  ],\n  {\n    variants: {\n      /*\n       * What the value MEANS, which for a progress bar is usually a score\n       * rather than a completion. The product's bar carried exactly this axis\n       * (`default`/`success`/`warning`/`error`/`info`) and reached for it to\n       * colour performance metrics.\n       *\n       * `-strong` throughout: the fill sits on the `muted` track and has to\n       * clear the 3:1 non-text floor of WCAG 1.4.11 against it, which is the\n       * same reason the track is muted rather than `border` -- primary-strong\n       * on a `border` track measures 1.01:1 and the value disappears.\n       */\n      tone: {\n        neutral: \"bg-primary-strong\",\n        success: \"bg-success-strong\",\n        warning: \"bg-warning-strong\",\n        danger: \"bg-destructive-strong\",\n        info: \"bg-info-strong\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\n);\n\n/**\n * A determinate or indeterminate progress bar.\n *\n * @example\n * <Progress label=\"Upload\" value={62} />\n * <Progress label=\"Loading results\" />\n */\nexport interface ProgressProps\n  extends Omit<AriaProgressBarProps, \"className\" | \"style\" | \"children\">,\n    VariantProps<typeof progressFillVariants> {\n  /**\n   * What is progressing, and the bar's accessible name.\n   *\n   * **Required.** Both legacy call sites render an unnamed progressbar.\n   * Pass `labelHidden` when the surrounding UI already says it.\n   */\n  label: ReactNode;\n  /**\n   * Render the label for screen readers only.\n   *\n   * Both legacy call sites sit beside visible text that was never\n   * associated with the bar -- this is how that text becomes the name\n   * without printing it twice.\n   */\n  labelHidden?: boolean;\n  /**\n   * Print the value beside the label.\n   *\n   * The text itself comes from React Aria, which already formats it from\n   * `value`/`minValue`/`maxValue` and honours `formatOptions` and\n   * `valueLabel` -- so a percentage, a currency or \"3 of 7\" are all reachable\n   * without a second prop here. It was never RENDERED before: the bar\n   * announced its value to assistive tech and showed a sighted reader nothing.\n   */\n  showValue?: boolean;\n  /**\n   * Mark a full bar as done: a default-toned fill eases to the success\n   * colour at 100% and, with `showValue`, a check lands beside the count.\n   *\n   * Pass `false` for a bar that can reach 100% before the work is finished\n   * -- a timer-driven estimate -- so it does not say \"done\" early. The fill\n   * keeps its tone and no check is shown. An explicit `tone` is never\n   * overridden either way.\n   *\n   * @default true\n   */\n  showCompletion?: boolean;\n  /** Extra classes for the track. */\n  trackClassName?: string;\n  /** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */\n  fillClassName?: string;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/**\n * The printed value. A percentage counts to its new number on the same spring the\n * fill follows, and a check lands beside the final count once the bar is full.\n * Any other text (a price, a step count) is shown as it is.\n */\nfunction ProgressValue({\n  percentage,\n  valueText,\n  showCompletion,\n}: {\n  percentage: number;\n  valueText: string | undefined;\n  showCompletion: boolean;\n}) {\n  const percent = Math.round(percentage);\n  const counted = useCountTo(percent);\n  const done = useAfter(showCompletion && percent >= 100, 240);\n  const isPercent = valueText === `${percent}%`;\n  return (\n    <>\n      {isPercent ? `${counted}%` : valueText}\n      {isPercent ? (\n        <span data-slot=\"progress-done\" className=\"ms-1 inline-flex align-middle text-success-strong\">\n          <SwapText swapKey={done ? \"done\" : \"\"} motion=\"glyph\" className=\"inline-flex\">\n            <svg\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"size-3.5\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"m3.5 8.5 3 3 6-6\" />\n            </svg>\n          </SwapText>\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  {\n    label,\n    labelHidden,\n    showValue,\n    showCompletion = true,\n    tone,\n    trackClassName,\n    fillClassName,\n    className,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <AriaProgressBar\n      ref={ref}\n      {...props}\n      data-slot=\"progress\"\n      className={cn(progressVariants({ headerEmpty: Boolean(labelHidden && !showValue) }), className)}\n    >\n      {({ percentage, isIndeterminate, valueText }) => (\n        <>\n          {/*\n            The row exists only when the value is printed. Wrapping the label\n            in a flex row unconditionally would change the label's box for\n            every existing consumer to no purpose.\n          */}\n          <div\n            data-slot=\"progress-header\"\n            className={cnAll(showValue && \"flex items-baseline justify-between gap-2\")}\n          >\n            <AriaLabel\n              data-slot=\"progress-label\"\n              className={cnAll(\n                \"text-sm leading-(--leading-normal) text-foreground\",\n                labelHidden && \"sr-only\",\n              )}\n            >\n              {typeof label === \"string\" ? (\n                <SwapText swapKey={label} className=\"block\">\n                  {label}\n                </SwapText>\n              ) : (\n                label\n              )}\n            </AriaLabel>\n            {showValue ? (\n              <span\n                data-slot=\"progress-value\"\n                // aria-hidden: React Aria already announces the value on the\n                // progressbar itself. Without this a screen reader reads it\n                // twice, once as the widget's value and once as loose text.\n                aria-hidden=\"true\"\n                className=\"text-sm leading-(--leading-normal) text-muted-foreground tabular-nums\"\n              >\n                <ProgressValue\n                  percentage={percentage ?? 0}\n                  valueText={valueText}\n                  showCompletion={showCompletion}\n                />\n              </span>\n            ) : null}\n          </div>\n          <div\n            data-slot=\"progress-track\"\n            className={cn(progressTrackVariants(), trackClassName)}\n          >\n            {/*\n              width, not the legacy translateX(-(100 - value)%). That\n              overflowed for value > 100 -- a positive translate slid the\n              indicator off to the right, while the announced value stayed\n              whatever was passed. React Aria clamps the value, so the two\n              can no longer disagree.\n\n              An indeterminate bar is not the legacy's silent 0%:\n              `value={undefined}` became `(value || 0)` there, so a sighted\n              user saw \"0% done\" while a screen reader said \"indeterminate\".\n              Its fill is a segment that sweeps the track on a loop (a slow\n              pulse of the whole track under reduced motion), sized and moved\n              by progress-fill, so it carries no inline width.\n            */}\n            <div\n              data-slot=\"progress-fill\"\n              data-indeterminate={isIndeterminate || undefined}\n              // A default-toned bar turns success-coloured when it completes, unless showCompletion is off; an explicit tone is never overridden.\n              data-complete={\n                showCompletion && (!tone || tone === \"neutral\") && !isIndeterminate && (percentage ?? 0) >= 100\n                  ? \"\"\n                  : undefined\n              }\n              className={cn(progressFillVariants({ tone }), fillClassName)}\n              style={isIndeterminate ? undefined : { width: `${percentage ?? 0}%` }}\n            />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,mBAAmB,IAAI,CAAC,2CAA2C,GAAG;CACjF,UAAU,EAQR,aAAa;EAAE,MAAM;EAAS,OAAO;CAAU,EACjD;CACA,iBAAiB,EAAE,aAAa,MAAM;AACxC,CAAC;AAED,MAAa,wBAAwB,IAAI,CACvC,+DAIA,uDACF,CAAC;AAED,MAAa,uBAAuB,IAClC,CACE,uBAEA,eACF,GACA;CACE,UAAU,EAYR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,SAAS;EACT,QAAQ;EACR,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;;;;;;AA8DA,SAAS,cAAc,EACrB,YACA,WACA,kBAKC;CACD,MAAM,UAAU,KAAK,MAAM,UAAU;CACrC,MAAM,UAAU,WAAW,OAAO;CAClC,MAAM,OAAO,SAAS,kBAAkB,WAAW,KAAK,GAAG;CAC3D,MAAM,YAAY,cAAc,GAAG,QAAQ;CAC3C,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,YAAY,GAAG,QAAQ,KAAK,WAC5B,YACC,oBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EACxC,UAAA,oBAAC,UAAD;GAAU,SAAS,OAAO,SAAS;GAAI,QAAO;GAAQ,WAAU;GAC9D,UAAA,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,WAAU;IACV,eAAY;IAEZ,UAAA,oBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;GACzB,CAAA;EACG,CAAA;CACN,CAAA,IACJ,IACJ,EAAA,CAAA;AAEN;AAEA,MAAa,WAAW,WAA0C,SAAS,SACzE,EACE,OACA,aACA,WACA,iBAAiB,MACjB,MACA,gBACA,eACA,WACA,GAAG,SAEL,KACA;CACA,OACE,oBAACA,aAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,iBAAiB,EAAE,aAAa,QAAQ,eAAe,CAAC,SAAS,EAAE,CAAC,GAAG,SAAS;EAE5F,WAAA,EAAE,YAAY,iBAAiB,gBAC/B,qBAAA,YAAA,EAAA,UAAA,CAME,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,MAAM,aAAa,2CAA2C;GAF3E,UAAA,CAIE,oBAACC,OAAD;IACE,aAAU;IACV,WAAW,MACT,sDACA,eAAe,SACjB;IAEC,UAAA,OAAO,UAAU,WAChB,oBAAC,UAAD;KAAU,SAAS;KAAO,WAAU;KACjC,UAAA;IACO,CAAA,IAEV;GAEO,CAAA,GACV,YACC,oBAAC,QAAD;IACE,aAAU;IAIV,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,eAAD;KACE,YAAY,cAAc;KACf;KACK;IACjB,CAAA;GACG,CAAA,IACJ,IACD;EACL,CAAA,GAAA,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,sBAAsB,GAAG,cAAc;GAgBrD,UAAA,oBAAC,OAAD;IACE,aAAU;IACV,sBAAoB,mBAAmB,KAAA;IAEvC,iBACE,mBAAmB,CAAC,QAAQ,SAAS,cAAc,CAAC,oBAAoB,cAAc,MAAM,MACxF,KACA,KAAA;IAEN,WAAW,GAAG,qBAAqB,EAAE,KAAK,CAAC,GAAG,aAAa;IAC3D,OAAO,kBAAkB,KAAA,IAAY,EAAE,OAAO,GAAG,cAAc,EAAE,GAAG;GACrE,CAAA;EACE,CAAA,CACL,EAAA,CAAA;CAEW,CAAA;AAErB,CAAC"}
+{"version":3,"file":"progress.js","names":["AriaProgressBar","AriaLabel"],"sources":["../../src/progress/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, useId, useMemo, type ReactNode } from \"react\";\nimport {\n  Label as AriaLabel,\n  ProgressBar as AriaProgressBar,\n  useLocale,\n  type ProgressBarProps as AriaProgressBarProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useAfter, useCountTo } from \"../lib/count-to.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Progress, ported from the legacy shadcn/Radix component.\n *\n * Census: seven files import it and only TWO render anything --\n * `ResponseOption.tsx` and `LiveQA.tsx`. Both pass `value` and\n * `className` and nothing else.\n *\n * `label` IS REQUIRED, and that is the point. Neither live call site\n * passes `aria-label`, `aria-labelledby` or an `id` a label targets, and\n * `role=\"progressbar\"` does not take its name from content -- so both\n * rendered progress bars are announced as an unnamed progressbar. React\n * Aria supplies the plumbing for three naming routes but no name of its\n * own: `<ProgressBar value={60}/>` is just as nameless there. Making the\n * prop required is what turns it into something you cannot forget.\n *\n * The migration plan said this component \"adds the missing\n * aria-valuenow\". That is wrong -- Radix already supplies `aria-valuenow`,\n * `aria-valuemin`, `aria-valuemax` and `aria-valuetext`. The missing thing\n * was always the NAME.\n *\n * THE COLOURS ARE NOT THE LEGACY'S. Its track is `bg-primary/20`, an alpha\n * fill that composites against unknown page content and therefore has no\n * fixed contrast pair at all -- over white it is roughly 1.05:1, an\n * invisible boundary. Its indicator is `bg-primary`, 2.44:1 on the page.\n * Here the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`, which puts the fill against the track at 4.61:1 and\n * the track against the page at 5.25:1.\n *\n * Both are in the build-failing contrast contract.\n *\n * A TARGET MARKER is opt-in (`target`): a short upright tick that stands\n * proud of the track at the value the bar should have reached -- \"where the\n * goal should be by now\". The tick is decorative; its meaning is read to\n * assistive technology as the bar's description (`targetLabel` plus the\n * formatted value), and `showTargetLabel` also prints it under the tick.\n *\n * `surface=\"inverse\"` is for a bar on the inverted (foreground-coloured)\n * surface, such as a dark summary strip: the track is the inverse text colour\n * mixed into the surface, the default fill and the copy take the inverse text\n * colour, so the bar keeps its contrast where the default greys would vanish.\n */\nexport const progressVariants = cva([\"flex w-full flex-col box-border font-sans\"], {\n  variants: {\n    /*\n     * True when nothing is printed above the track (`labelHidden` and no\n     * `showValue`). The header is then an empty row -- its sr-only label is\n     * out of flow -- and the column gap would leave 6px of nothing above the\n     * bar. The gap lives here and not in the base, so the raw\n     * `progressVariants()` output never carries both `gap-1.5` and `gap-0`.\n     */\n    headerEmpty: { true: \"gap-0\", false: \"gap-1.5\" },\n  },\n  defaultVariants: { headerEmpty: false },\n});\n\nexport const progressTrackVariants = cva(\n  [\"relative h-2 w-full overflow-hidden rounded-pill box-border\", \"border-(length:--border-width)\"],\n  {\n    variants: {\n      /** The surface the bar sits on. */\n      surface: {\n        // muted, NOT `border` as the Switch uses. A switch has no fill; a\n        // progress bar does, and primary-strong on a `border` track is 1.01:1 --\n        // the two halves are the same grey and the value disappears.\n        default: \"bg-muted border-border\",\n        // On the inverted surface: the inverse text colour mixed into that surface, a quiet step off it.\n        inverse:\n          \"bg-[color-mix(in_oklab,var(--color-text-inverse)_28%,var(--color-foreground))] border-transparent\",\n      },\n    },\n    defaultVariants: { surface: \"default\" },\n  },\n);\n\n/**\n * The target tick: 2px wide, standing 4px proud of the track on both sides,\n * with a 1px halo of the surface colour so it reads over the fill as well as\n * over the track. Placed by an inline `inset-inline-start`, so it mirrors in\n * right-to-left text.\n */\nexport const progressTargetVariants = cva(\n  \"pointer-events-none absolute -top-1 -bottom-1 w-0.5 -ms-px rounded-pill\",\n  {\n    variants: {\n      surface: {\n        default: \"bg-foreground shadow-[0_0_0_1px_var(--color-surface)]\",\n        inverse: \"bg-text-inverse shadow-[0_0_0_1px_var(--color-foreground)]\",\n      },\n    },\n    defaultVariants: { surface: \"default\" },\n  },\n);\n\nexport const progressFillVariants = cva(\n  [\n    \"h-full rounded-pill\",\n    // The fill follows the value on the smooth spring and turns success-coloured when it completes; indeterminate, it sweeps (see progress-fill).\n    \"progress-fill\",\n  ],\n  {\n    variants: {\n      /*\n       * What the value MEANS, which for a progress bar is usually a score\n       * rather than a completion. The product's bar carried exactly this axis\n       * (`default`/`success`/`warning`/`error`/`info`) and reached for it to\n       * colour performance metrics.\n       *\n       * `-strong` throughout: the fill sits on the `muted` track and has to\n       * clear the 3:1 non-text floor of WCAG 1.4.11 against it, which is the\n       * same reason the track is muted rather than `border` -- primary-strong\n       * on a `border` track measures 1.01:1 and the value disappears.\n       */\n      tone: {\n        neutral: \"bg-primary-strong\",\n        success: \"bg-success-strong\",\n        warning: \"bg-warning-strong\",\n        danger: \"bg-destructive-strong\",\n        info: \"bg-info-strong\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\n);\n\n/**\n * A determinate or indeterminate progress bar.\n *\n * @example\n * <Progress label=\"Upload\" value={62} />\n * <Progress label=\"Loading results\" />\n */\nexport interface ProgressProps\n  extends Omit<AriaProgressBarProps, \"className\" | \"style\" | \"children\">,\n    VariantProps<typeof progressFillVariants> {\n  /**\n   * What is progressing, and the bar's accessible name.\n   *\n   * **Required.** Both legacy call sites render an unnamed progressbar.\n   * Pass `labelHidden` when the surrounding UI already says it.\n   */\n  label: ReactNode;\n  /**\n   * Render the label for screen readers only.\n   *\n   * Both legacy call sites sit beside visible text that was never\n   * associated with the bar -- this is how that text becomes the name\n   * without printing it twice.\n   */\n  labelHidden?: boolean;\n  /**\n   * Print the value beside the label.\n   *\n   * The text itself comes from React Aria, which already formats it from\n   * `value`/`minValue`/`maxValue` and honours `formatOptions` and\n   * `valueLabel` -- so a percentage, a currency or \"3 of 7\" are all reachable\n   * without a second prop here. It was never RENDERED before: the bar\n   * announced its value to assistive tech and showed a sighted reader nothing.\n   */\n  showValue?: boolean;\n  /**\n   * Mark a full bar as done: a default-toned fill eases to the success\n   * colour at 100% and, with `showValue`, a check lands beside the count.\n   *\n   * Pass `false` for a bar that can reach 100% before the work is finished\n   * -- a timer-driven estimate -- so it does not say \"done\" early. The fill\n   * keeps its tone and no check is shown. An explicit `tone` is never\n   * overridden either way.\n   *\n   * @default true\n   */\n  showCompletion?: boolean;\n  /**\n   * Where the bar should be by now, on the same scale as `value`\n   * (`minValue`..`maxValue`, clamped). Draws an upright tick across the track\n   * at that point. The tick is decorative; `targetLabel` and the formatted\n   * target are read as the bar's description. Leave it out (the default) for\n   * no marker and the bar exactly as before. Ignored while indeterminate.\n   */\n  target?: number;\n  /**\n   * What the target means, such as \"Expected by now\". Read with the formatted\n   * target (\"Expected by now: 40%\") as the bar's description, and printed\n   * under the tick with `showTargetLabel`.\n   * @default \"Target\"\n   */\n  targetLabel?: string;\n  /**\n   * Print `targetLabel` and the target under the tick. It follows the tick and\n   * stays inside the bar near either end.\n   * @default false\n   */\n  showTargetLabel?: boolean;\n  /**\n   * The surface the bar sits on. `inverse` is the inverted, foreground-coloured\n   * surface (a dark strip in the light theme, a light one in the dark theme):\n   * the track, the default-toned fill, the target tick and the copy take\n   * colours that hold their contrast there. Explicit tones keep their colours.\n   * @default \"default\"\n   */\n  surface?: \"default\" | \"inverse\";\n  /** Extra classes for the track. */\n  trackClassName?: string;\n  /** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */\n  fillClassName?: string;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\n/**\n * The printed value. A percentage counts to its new number on the same spring the\n * fill follows, and a check lands beside the final count once the bar is full.\n * Any other text (a price, a step count) is shown as it is.\n */\nfunction ProgressValue({\n  percentage,\n  valueText,\n  showCompletion,\n}: {\n  percentage: number;\n  valueText: string | undefined;\n  showCompletion: boolean;\n}) {\n  const percent = Math.round(percentage);\n  const counted = useCountTo(percent);\n  const done = useAfter(showCompletion && percent >= 100, 240);\n  const isPercent = valueText === `${percent}%`;\n  return (\n    <>\n      {isPercent ? `${counted}%` : valueText}\n      {isPercent ? (\n        <span data-slot=\"progress-done\" className=\"ms-1 inline-flex align-middle text-success-strong\">\n          <SwapText swapKey={done ? \"done\" : \"\"} motion=\"glyph\" className=\"inline-flex\">\n            <svg\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              className=\"size-3.5\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"m3.5 8.5 3 3 6-6\" />\n            </svg>\n          </SwapText>\n        </span>\n      ) : null}\n    </>\n  );\n}\n\ninterface Marker {\n  /** Where the target sits along the track, 0 to 1. */\n  share: number;\n  /** \"Target: 40%\": what is read, and printed with showTargetLabel. */\n  text: string;\n}\n\n/** The track's frame and the tick. With no marker it renders the track alone, as before. */\nfunction TargetFrame({\n  marker,\n  surface,\n  children,\n}: {\n  marker: Marker | null;\n  surface: \"default\" | \"inverse\";\n  children: ReactNode;\n}) {\n  if (!marker) return <>{children}</>;\n  return (\n    <div data-slot=\"progress-target-frame\" className=\"relative\">\n      {children}\n      <span\n        data-slot=\"progress-target\"\n        aria-hidden=\"true\"\n        className={progressTargetVariants({ surface })}\n        style={{ insetInlineStart: `${marker.share * 100}%` }}\n      />\n    </div>\n  );\n}\n\n/**\n * The target's meaning, the bar's description. Printed, it hangs from a\n * zero-width anchor at the tick: centred on it, or running inward near either\n * end, in either text direction. Otherwise it is for screen readers only.\n */\nfunction TargetText({\n  id,\n  marker,\n  shown,\n  inverse,\n}: {\n  id: string;\n  marker: Marker;\n  shown: boolean;\n  inverse: boolean;\n}) {\n  if (!shown) {\n    return (\n      <span id={id} className=\"sr-only\">\n        {marker.text}\n      </span>\n    );\n  }\n  return (\n    // aria-hidden: it is read once, as the description, not again as loose text.\n    <div data-slot=\"progress-target-label\" aria-hidden=\"true\" className=\"relative h-[1lh] text-xs leading-(--leading-normal)\">\n      <span\n        className={cnAll(\n          \"absolute top-0 flex w-0 whitespace-nowrap\",\n          marker.share < 0.2 ? \"justify-start\" : marker.share > 0.8 ? \"justify-end\" : \"justify-center\",\n          inverse ? \"text-text-inverse\" : \"text-muted-foreground\",\n        )}\n        style={{ insetInlineStart: `${marker.share * 100}%` }}\n      >\n        <span id={id}>{marker.text}</span>\n      </span>\n    </div>\n  );\n}\n\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n  {\n    label,\n    labelHidden,\n    showValue,\n    showCompletion = true,\n    tone,\n    target,\n    targetLabel = \"Target\",\n    showTargetLabel = false,\n    surface = \"default\",\n    trackClassName,\n    fillClassName,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const { locale } = useLocale();\n  const targetId = useId();\n  const { minValue = 0, maxValue = 100, formatOptions, isIndeterminate: indeterminate } = props;\n  const marker = useMemo(() => {\n    if (target === undefined || !Number.isFinite(target) || indeterminate) return null;\n    const span = maxValue - minValue;\n    const share = span > 0 ? Math.min(1, Math.max(0, (target - minValue) / span)) : 0;\n    // Formatted the way React Aria formats the bar's own value: the share under the default percent style, else the value.\n    const options = formatOptions ?? { style: \"percent\" };\n    const shown = options.style === \"percent\" ? share : Math.min(maxValue, Math.max(minValue, target));\n    return { share, text: `${targetLabel}: ${new Intl.NumberFormat(locale, options).format(shown)}` };\n  }, [target, indeterminate, minValue, maxValue, formatOptions, locale, targetLabel]);\n  const inverse = surface === \"inverse\";\n  const describedBy = marker\n    ? [props[\"aria-describedby\"], targetId].filter(Boolean).join(\" \")\n    : props[\"aria-describedby\"];\n  return (\n    <AriaProgressBar\n      ref={ref}\n      {...props}\n      aria-describedby={describedBy}\n      data-slot=\"progress\"\n      data-surface={inverse ? \"inverse\" : undefined}\n      className={cn(progressVariants({ headerEmpty: Boolean(labelHidden && !showValue) }), className)}\n    >\n      {({ percentage, isIndeterminate, valueText }) => (\n        <>\n          {/*\n            The row exists only when the value is printed. Wrapping the label\n            in a flex row unconditionally would change the label's box for\n            every existing consumer to no purpose.\n          */}\n          <div\n            data-slot=\"progress-header\"\n            className={cnAll(showValue && \"flex items-baseline justify-between gap-2\")}\n          >\n            <AriaLabel\n              data-slot=\"progress-label\"\n              className={cnAll(\n                \"text-sm leading-(--leading-normal)\",\n                inverse ? \"text-text-inverse\" : \"text-foreground\",\n                labelHidden && \"sr-only\",\n              )}\n            >\n              {typeof label === \"string\" ? (\n                <SwapText swapKey={label} className=\"block\">\n                  {label}\n                </SwapText>\n              ) : (\n                label\n              )}\n            </AriaLabel>\n            {showValue ? (\n              <span\n                data-slot=\"progress-value\"\n                // aria-hidden: React Aria already announces the value on the\n                // progressbar itself. Without this a screen reader reads it\n                // twice, once as the widget's value and once as loose text.\n                aria-hidden=\"true\"\n                className={cnAll(\n                  \"text-sm leading-(--leading-normal) tabular-nums\",\n                  inverse ? \"text-text-inverse\" : \"text-muted-foreground\",\n                )}\n              >\n                <ProgressValue\n                  percentage={percentage ?? 0}\n                  valueText={valueText}\n                  showCompletion={showCompletion}\n                />\n              </span>\n            ) : null}\n          </div>\n          {/* The track is wrapped only when there is a marker, so a bar without one keeps its DOM exactly. */}\n          <TargetFrame marker={marker} surface={surface}>\n            <div\n              data-slot=\"progress-track\"\n              className={cn(progressTrackVariants({ surface }), trackClassName)}\n            >\n              {/*\n                width, not the legacy translateX(-(100 - value)%). That\n                overflowed for value > 100 -- a positive translate slid the\n                indicator off to the right, while the announced value stayed\n                whatever was passed. React Aria clamps the value, so the two\n                can no longer disagree.\n  \n                An indeterminate bar is not the legacy's silent 0%:\n                `value={undefined}` became `(value || 0)` there, so a sighted\n                user saw \"0% done\" while a screen reader said \"indeterminate\".\n                Its fill is a segment that sweeps the track on a loop (a slow\n                pulse of the whole track under reduced motion), sized and moved\n                by progress-fill, so it carries no inline width.\n              */}\n              <div\n                data-slot=\"progress-fill\"\n                data-indeterminate={isIndeterminate || undefined}\n                // A default-toned bar turns success-coloured when it completes, unless showCompletion is off; an explicit tone is never overridden.\n                data-complete={\n                  showCompletion && (!tone || tone === \"neutral\") && !isIndeterminate && (percentage ?? 0) >= 100\n                    ? \"\"\n                    : undefined\n                }\n                className={cn(\n                  [progressFillVariants({ tone }), inverse && (!tone || tone === \"neutral\") && \"bg-text-inverse\"],\n                  fillClassName,\n                )}\n                style={isIndeterminate ? undefined : { width: `${percentage ?? 0}%` }}\n              />\n            </div>\n          </TargetFrame>\n          {marker ? <TargetText id={targetId} marker={marker} shown={showTargetLabel} inverse={inverse} /> : null}\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n"],"mappings":"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"}

package/dist/radio-group/radio-group.d.ts

@@ -20,7 +20,7 @@ import { RadioGroupProps, RadioProps } from "react-aria-components";
  * so a radio and a checkbox in the same form agree.
  */
 export declare const radioGroupVariants: (props?: ({
-  variant?: "default" | "card" | null | undefined;
+  variant?: "card" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const radioVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /**

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/select/select.d.ts

@@ -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

@@ -3,6 +3,7 @@ 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 { 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":"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"}
+{"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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"}