@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/popover/popover.js

@@ -1,9 +1,10 @@
 "use client";
 import { cnAll } from "../lib/cn.js";
+import { Button as Button$1 } from "../button/button.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
-import { DialogTrigger as PopoverTrigger, Popover } from "react-aria-components";
-import { jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import { DialogTrigger as PopoverTrigger, OverlayTriggerStateContext, Popover, PreviewTrigger } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/popover/popover.tsx
 /**
 * Popover, ported from the legacy shadcn/Radix component.
@@ -26,23 +27,73 @@ import { jsx } from "react/jsx-runtime";
 * already exists under another name.
 */
 const popoverVariants = cva([
-	"w-72 rounded-md border-(length:--border-width) border-border p-4",
+	"w-72 rounded-panel border-(length:--border-width) border-border p-4",
 	"bg-card text-card-foreground shadow-floating",
 	"box-border font-sans text-sm leading-(--leading-normal)",
 	"outline-none"
 ]);
-const Popover$1 = forwardRef(function Popover$2({ children, className, placement = "bottom", offset = 4, entrance = "rise", ...props }, ref) {
-	return /* @__PURE__ */ jsx(Popover, {
+const Popover$1 = forwardRef(function Popover$2({ children, className, placement = "bottom", offset = 4, entrance = "rise", title, description, actionLabel, onAction, ...props }, ref) {
+	const state = useContext(OverlayTriggerStateContext);
+	return /* @__PURE__ */ jsxs(Popover, {
 		ref,
 		...props,
 		placement,
 		offset,
 		"data-slot": "popover",
 		className: cnAll(popoverVariants(), entrance === "rise" && "popover-motion", className),
-		children
+		children: [
+			title == null ? null : /* @__PURE__ */ jsx("h3", {
+				"data-slot": "popover-title",
+				className: "m-0 text-sm leading-(--leading-tight) font-semibold text-foreground",
+				children: title
+			}),
+			description == null ? null : /* @__PURE__ */ jsx("p", {
+				"data-slot": "popover-description",
+				className: "m-0 mt-1 text-sm leading-(--leading-normal) text-text-secondary",
+				children: description
+			}),
+			actionLabel == null ? null : /* @__PURE__ */ jsx(Button$1, {
+				variant: "secondary",
+				size: "sm",
+				className: "mt-4 w-full",
+				onPress: () => {
+					onAction?.();
+					state?.close();
+				},
+				children: actionLabel
+			}),
+			children
+		]
 	});
 });
+/**
+* Opens a popover on hover instead of press: a hover card.
+*
+* React Aria's `PreviewTrigger`. The card opens after `delay` when the pointer
+* rests on the trigger or keyboard focus reaches it, and on a long press on
+* touch. It stays open while the pointer travels onto it (a safe area covers
+* the gap) and closes `closeDelay` after the pointer or focus leaves both.
+* Escape closes it; Tab from the trigger moves into it. It is non-modal: no
+* focus trap and no underlay, and the page behind stays usable.
+*
+* The trigger keeps its own press action, so a Link still navigates and a
+* Button still runs `onPress`. Content anyone needs must not live only in the
+* card: touch without a long press never sees it.
+*
+* @example
+* <PopoverHoverTrigger delay={300}>
+*   <Button variant="ghost" aria-label="3 more sources">+3</Button>
+*   <Popover placement="bottom start">...</Popover>
+* </PopoverHoverTrigger>
+*/
+function PopoverHoverTrigger({ delay = 600, closeDelay = 200, ...props }) {
+	return /* @__PURE__ */ jsx(PreviewTrigger, {
+		...props,
+		delay,
+		closeDelay
+	});
+}
 //#endregion
-export { Popover$1 as Popover, PopoverTrigger, popoverVariants };
+export { Popover$1 as Popover, PopoverHoverTrigger, PopoverTrigger, popoverVariants };
 
 //# sourceMappingURL=popover.js.map

package/dist/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["Popover","AriaPopover"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Popover as AriaPopover,\n  type PopoverProps as AriaPopoverProps,\n} from \"react-aria-components\";\n\nimport { cnAll } from \"../lib/cn.js\";\n\n/**\n * Popover, ported from the legacy shadcn/Radix component.\n *\n * Census: 2 files, 2 uses. `asChild` on the trigger twice, `className`\n * twice, `align=\"start\"` once. `PopoverAnchor` is exported by the legacy\n * and imported by nobody, so it is not ported; neither are `side`,\n * `sideOffset`, `alignOffset`, `open` / `onOpenChange`, `modal`,\n * `collisionPadding` or `avoidCollisions` -- zero call sites each. Both\n * existing uses are uncontrolled.\n *\n * IT GAINS AN ACCESSIBLE NAME. The legacy renders `role=\"dialog\"` with no\n * `aria-label` and no `aria-labelledby`, so both call sites announce an\n * unnamed dialog. React Aria labels the popover from its trigger\n * automatically once the two are paired, which is the only way to build\n * one here.\n *\n * The surface is `card`: in the legacy theme `--popover` is byte-identical\n * to `--card` in both themes, so the role the migration plan proposed\n * already exists under another name.\n */\nexport const popoverVariants = cva([\n  // w-72 (288px) is the legacy default width, as a spacing-scale step.\n  \"w-72 rounded-md border-(length:--border-width) border-border p-4\",\n  \"bg-card text-card-foreground shadow-floating\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load\n  // none: an unstyled document renders text in a serif, and content-box\n  // would add the 16px padding on top of the width.\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n  // React Aria gives the popover tabindex=-1 and focuses it on open, so it\n  // can take a focus ring it does not want.\n  \"outline-none\",\n]);\n\n/**\n * Content anchored to a trigger.\n *\n * @example\n * <PopoverTrigger>\n *   <Button>Pick a date</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverTrigger>\n */\nexport interface PopoverProps\n  extends Omit<AriaPopoverProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Where it opens, as React Aria's single `placement` string. The legacy\n   * split this across `side` and `align`; its one non-default call site is\n   * `align=\"start\"`, which is `\"bottom start\"` here.\n   *\n   * @default \"bottom\"\n   */\n  placement?: AriaPopoverProps[\"placement\"];\n  /**\n   * How it comes in: `rise` grows out of the trigger (offset toward it, a little\n   * small, then settles on a spring) and leaves quicker; `none` leaves the entrance\n   * to the caller, as a picker that animates its own popover does.\n   *\n   * @default \"rise\"\n   */\n  entrance?: \"rise\" | \"none\";\n}\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(function Popover(\n  { children, className, placement = \"bottom\", offset = 4, entrance = \"rise\", ...props },\n  ref,\n) {\n  return (\n    <AriaPopover\n      ref={ref}\n      {...props}\n      placement={placement}\n      offset={offset}\n      data-slot=\"popover\"\n      className={cnAll(popoverVariants(), entrance === \"rise\" && \"popover-motion\", className)}\n    >\n      {/*\n        No inner Dialog. Wrapping the content in one is the common React\n        Aria idiom and it was in the first draft here -- but deleting it\n        broke no assertion, so it was doing nothing: a Popover under a\n        DialogTrigger already gets role=\"dialog\", a focus scope, and\n        aria-labelledby pointing at the trigger. The wrapper was one more\n        element and one more className to explain.\n      */}\n      {children}\n    </AriaPopover>\n  );\n});\n\n/**\n * Pairs a trigger with a popover and owns the open state.\n *\n * React Aria's `DialogTrigger`, renamed for the migration: it takes the\n * trigger element directly as its first child, which is what `asChild` was\n * doing on both legacy call sites.\n */\nexport { DialogTrigger as PopoverTrigger } from \"react-aria-components\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,kBAAkB,IAAI;CAEjC;CACA;CAIA;CAGA;AACF,CAAC;AAkCD,MAAaA,YAAU,WAAsC,SAASA,UACpE,EAAE,UAAU,WAAW,YAAY,UAAU,SAAS,GAAG,WAAW,QAAQ,GAAG,SAC/E,KACA;CACA,OACE,oBAACC,SAAD;EACO;EACL,GAAI;EACO;EACH;EACR,aAAU;EACV,WAAW,MAAM,gBAAgB,GAAG,aAAa,UAAU,kBAAkB,SAAS;EAUrF;CACU,CAAA;AAEjB,CAAC"}
+{"version":3,"file":"popover.js","names":["Popover","AriaPopover","Button"],"sources":["../../src/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useContext, type JSX, type ReactNode } from \"react\";\nimport {\n  OverlayTriggerStateContext,\n  Popover as AriaPopover,\n  PreviewTrigger,\n  type PopoverProps as AriaPopoverProps,\n  type PreviewTriggerProps,\n} from \"react-aria-components\";\n\nimport { Button } from \"../button/button.js\";\nimport { cnAll } from \"../lib/cn.js\";\n\n/**\n * Popover, ported from the legacy shadcn/Radix component.\n *\n * Census: 2 files, 2 uses. `asChild` on the trigger twice, `className`\n * twice, `align=\"start\"` once. `PopoverAnchor` is exported by the legacy\n * and imported by nobody, so it is not ported; neither are `side`,\n * `sideOffset`, `alignOffset`, `open` / `onOpenChange`, `modal`,\n * `collisionPadding` or `avoidCollisions` -- zero call sites each. Both\n * existing uses are uncontrolled.\n *\n * IT GAINS AN ACCESSIBLE NAME. The legacy renders `role=\"dialog\"` with no\n * `aria-label` and no `aria-labelledby`, so both call sites announce an\n * unnamed dialog. React Aria labels the popover from its trigger\n * automatically once the two are paired, which is the only way to build\n * one here.\n *\n * The surface is `card`: in the legacy theme `--popover` is byte-identical\n * to `--card` in both themes, so the role the migration plan proposed\n * already exists under another name.\n */\nexport const popoverVariants = cva([\n  // w-72 (288px) is the legacy default width, as a spacing-scale step.\n  \"w-72 rounded-panel border-(length:--border-width) border-border p-4\",\n  \"bg-card text-card-foreground shadow-floating\",\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load\n  // none: an unstyled document renders text in a serif, and content-box\n  // would add the 16px padding on top of the width.\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n  // React Aria gives the popover tabindex=-1 and focuses it on open, so it\n  // can take a focus ring it does not want.\n  \"outline-none\",\n]);\n\n/**\n * Content anchored to a trigger.\n *\n * @example\n * <PopoverTrigger>\n *   <Button>Pick a date</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverTrigger>\n */\nexport interface PopoverProps\n  extends Omit<AriaPopoverProps, \"className\" | \"style\" | \"children\"> {\n  children?: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n  /**\n   * Where it opens, as React Aria's single `placement` string. The legacy\n   * split this across `side` and `align`; its one non-default call site is\n   * `align=\"start\"`, which is `\"bottom start\"` here.\n   *\n   * @default \"bottom\"\n   */\n  placement?: AriaPopoverProps[\"placement\"];\n  /**\n   * How it comes in: `rise` grows out of the trigger (offset toward it, a little\n   * small, then settles on a spring) and leaves quicker; `none` leaves the entrance\n   * to the caller, as a picker that animates its own popover does.\n   *\n   * @default \"rise\"\n   */\n  entrance?: \"rise\" | \"none\";\n  /**\n   * A heading at the top of the panel. Together with `description` and\n   * `actionLabel` it makes the message popover: a dark title, grey body text\n   * and a full-width button, with `children` rendered below them.\n   */\n  title?: ReactNode;\n  /** Grey body text under the title. */\n  description?: ReactNode;\n  /** The label of the full-width button at the bottom. Pressing it runs `onAction` and closes the popover. */\n  actionLabel?: ReactNode;\n  /** Runs when the action button is pressed, before the popover closes. */\n  onAction?: () => void;\n}\n\nexport const Popover = forwardRef<HTMLElement, PopoverProps>(function Popover(\n  {\n    children,\n    className,\n    placement = \"bottom\",\n    offset = 4,\n    entrance = \"rise\",\n    title,\n    description,\n    actionLabel,\n    onAction,\n    ...props\n  },\n  ref,\n) {\n  // The open state the enclosing PopoverTrigger owns, so the action button can close it.\n  const state = useContext(OverlayTriggerStateContext);\n  return (\n    <AriaPopover\n      ref={ref}\n      {...props}\n      placement={placement}\n      offset={offset}\n      data-slot=\"popover\"\n      className={cnAll(popoverVariants(), entrance === \"rise\" && \"popover-motion\", className)}\n    >\n      {/*\n        No inner Dialog. Wrapping the content in one is the common React\n        Aria idiom and it was in the first draft here -- but deleting it\n        broke no assertion, so it was doing nothing: a Popover under a\n        DialogTrigger already gets role=\"dialog\", a focus scope, and\n        aria-labelledby pointing at the trigger. The wrapper was one more\n        element and one more className to explain.\n      */}\n      {title == null ? null : (\n        <h3\n          data-slot=\"popover-title\"\n          className=\"m-0 text-sm leading-(--leading-tight) font-semibold text-foreground\"\n        >\n          {title}\n        </h3>\n      )}\n      {description == null ? null : (\n        <p\n          data-slot=\"popover-description\"\n          className=\"m-0 mt-1 text-sm leading-(--leading-normal) text-text-secondary\"\n        >\n          {description}\n        </p>\n      )}\n      {actionLabel == null ? null : (\n        <Button\n          variant=\"secondary\"\n          size=\"sm\"\n          className=\"mt-4 w-full\"\n          onPress={() => {\n            onAction?.();\n            state?.close();\n          }}\n        >\n          {actionLabel}\n        </Button>\n      )}\n      {children}\n    </AriaPopover>\n  );\n});\n\n/**\n * Pairs a trigger with a popover and owns the open state.\n *\n * React Aria's `DialogTrigger`, renamed for the migration: it takes the\n * trigger element directly as its first child, which is what `asChild` was\n * doing on both legacy call sites.\n */\nexport { DialogTrigger as PopoverTrigger } from \"react-aria-components\";\n\nexport interface PopoverHoverTriggerProps extends Omit<PreviewTriggerProps, \"delay\" | \"closeDelay\"> {\n  /** The trigger, then the `Popover`. The trigger must be focusable (a `Button` or `Link`). */\n  children: ReactNode;\n  /**\n   * Milliseconds the pointer rests on the trigger, or keyboard focus sits on\n   * it, before the card opens.\n   * @default 600\n   */\n  delay?: number;\n  /**\n   * Milliseconds after the pointer leaves the trigger and the card, or focus\n   * leaves both, before it closes. Moving onto the card keeps it open.\n   * @default 200\n   */\n  closeDelay?: number;\n}\n\n/**\n * Opens a popover on hover instead of press: a hover card.\n *\n * React Aria's `PreviewTrigger`. The card opens after `delay` when the pointer\n * rests on the trigger or keyboard focus reaches it, and on a long press on\n * touch. It stays open while the pointer travels onto it (a safe area covers\n * the gap) and closes `closeDelay` after the pointer or focus leaves both.\n * Escape closes it; Tab from the trigger moves into it. It is non-modal: no\n * focus trap and no underlay, and the page behind stays usable.\n *\n * The trigger keeps its own press action, so a Link still navigates and a\n * Button still runs `onPress`. Content anyone needs must not live only in the\n * card: touch without a long press never sees it.\n *\n * @example\n * <PopoverHoverTrigger delay={300}>\n *   <Button variant=\"ghost\" aria-label=\"3 more sources\">+3</Button>\n *   <Popover placement=\"bottom start\">...</Popover>\n * </PopoverHoverTrigger>\n */\nexport function PopoverHoverTrigger({\n  delay = 600,\n  closeDelay = 200,\n  ...props\n}: PopoverHoverTriggerProps): JSX.Element {\n  return <PreviewTrigger {...props} delay={delay} closeDelay={closeDelay} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,kBAAkB,IAAI;CAEjC;CACA;CAIA;CAGA;AACF,CAAC;AA8CD,MAAaA,YAAU,WAAsC,SAASA,UACpE,EACE,UACA,WACA,YAAY,UACZ,SAAS,GACT,WAAW,QACX,OACA,aACA,aACA,UACA,GAAG,SAEL,KACA;CAEA,MAAM,QAAQ,WAAW,0BAA0B;CACnD,OACE,qBAACC,SAAD;EACO;EACL,GAAI;EACO;EACH;EACR,aAAU;EACV,WAAW,MAAM,gBAAgB,GAAG,aAAa,UAAU,kBAAkB,SAAS;EANxF,UAAA;GAgBG,SAAS,OAAO,OACf,oBAAC,MAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACC,CAAA;GAEL,eAAe,OAAO,OACrB,oBAAC,KAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACA,CAAA;GAEJ,eAAe,OAAO,OACrB,oBAACC,UAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,eAAe;KACb,WAAW;KACX,OAAO,MAAM;IACf;IAEC,UAAA;GACK,CAAA;GAET;EACU;;AAEjB,CAAC;;;;;;;;;;;;;;;;;;;;;AAgDD,SAAgB,oBAAoB,EAClC,QAAQ,KACR,aAAa,KACb,GAAG,SACqC;CACxC,OAAO,oBAAC,gBAAD;EAAgB,GAAI;EAAc;EAAmB;CAAa,CAAA;AAC3E"}

package/dist/progress/progress.d.ts

@@ -32,10 +32,12 @@ import { ProgressBarProps } from "react-aria-components";
  *
  * Both are in the build-failing contrast contract.
  */
-export declare const progressVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const progressVariants: (props?: ({
+  headerEmpty?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const progressTrackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const progressFillVariants: (props?: ({
-  tone?: "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
+  tone?: "success" | "warning" | "danger" | "neutral" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A determinate or indeterminate progress bar.
@@ -70,6 +72,18 @@ export interface ProgressProps extends Omit<ProgressBarProps, "className" | "sty
    * announced its value to assistive tech and showed a sighted reader nothing.
    */
   showValue?: boolean;
+  /**
+   * Mark a full bar as done: a default-toned fill eases to the success
+   * colour at 100% and, with `showValue`, a check lands beside the count.
+   *
+   * Pass `false` for a bar that can reach 100% before the work is finished
+   * -- a timer-driven estimate -- so it does not say "done" early. The fill
+   * keeps its tone and no check is shown. An explicit `tone` is never
+   * overridden either way.
+   *
+   * @default true
+   */
+  showCompletion?: boolean;
   /** Extra classes for the track. */
   trackClassName?: string;
   /** Extra classes for the fill -- a per-call-site colour the tone axis cannot express. */

package/dist/progress/progress.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn, cnAll } from "../lib/cn.js";
-import { SwapText } from "../lib/swap-text.js";
 import { useAfter, useCountTo } from "../lib/count-to.js";
+import { SwapText } from "../lib/swap-text.js";
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
 import { Label, ProgressBar } from "react-aria-components";
@@ -37,7 +37,13 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 *
 * Both are in the build-failing contrast contract.
 */
-const progressVariants = cva(["flex w-full flex-col gap-1.5 box-border font-sans"]);
+const progressVariants = cva(["flex w-full flex-col box-border font-sans"], {
+	variants: { headerEmpty: {
+		true: "gap-0",
+		false: "gap-1.5"
+	} },
+	defaultVariants: { headerEmpty: false }
+});
 const progressTrackVariants = cva(["relative h-2 w-full overflow-hidden rounded-pill box-border", "bg-muted border-(length:--border-width) border-border"]);
 const progressFillVariants = cva(["h-full rounded-pill", "progress-fill"], {
 	variants: { tone: {
@@ -54,10 +60,10 @@ const progressFillVariants = cva(["h-full rounded-pill", "progress-fill"], {
 * fill follows, and a check lands beside the final count once the bar is full.
 * Any other text (a price, a step count) is shown as it is.
 */
-function ProgressValue({ percentage, valueText }) {
+function ProgressValue({ percentage, valueText, showCompletion }) {
 	const percent = Math.round(percentage);
 	const counted = useCountTo(percent);
-	const done = useAfter(percent >= 100, 240);
+	const done = useAfter(showCompletion && percent >= 100, 240);
 	const isPercent = valueText === `${percent}%`;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isPercent ? `${counted}%` : valueText, isPercent ? /* @__PURE__ */ jsx("span", {
 		"data-slot": "progress-done",
@@ -80,12 +86,12 @@ function ProgressValue({ percentage, valueText }) {
 		})
 	}) : null] });
 }
-const Progress = forwardRef(function Progress({ label, labelHidden, showValue, tone, trackClassName, fillClassName, className, ...props }, ref) {
+const Progress = forwardRef(function Progress({ label, labelHidden, showValue, showCompletion = true, tone, trackClassName, fillClassName, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(ProgressBar, {
 		ref,
 		...props,
 		"data-slot": "progress",
-		className: cn(progressVariants(), className),
+		className: cn(progressVariants({ headerEmpty: Boolean(labelHidden && !showValue) }), className),
 		children: ({ percentage, isIndeterminate, valueText }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			"data-slot": "progress-header",
 			className: cnAll(showValue && "flex items-baseline justify-between gap-2"),
@@ -103,7 +109,8 @@ const Progress = forwardRef(function Progress({ label, labelHidden, showValue, t
 				className: "text-sm leading-(--leading-normal) text-muted-foreground tabular-nums",
 				children: /* @__PURE__ */ jsx(ProgressValue, {
 					percentage: percentage ?? 0,
-					valueText
+					valueText,
+					showCompletion
 				})
 			}) : null]
 		}), /* @__PURE__ */ jsx("div", {
@@ -112,9 +119,9 @@ const Progress = forwardRef(function Progress({ label, labelHidden, showValue, t
 			children: /* @__PURE__ */ jsx("div", {
 				"data-slot": "progress-fill",
 				"data-indeterminate": isIndeterminate || void 0,
-				"data-complete": (!tone || tone === "neutral") && !isIndeterminate && (percentage ?? 0) >= 100 ? "" : void 0,
+				"data-complete": showCompletion && (!tone || tone === "neutral") && !isIndeterminate && (percentage ?? 0) >= 100 ? "" : void 0,
 				className: cn(progressFillVariants({ tone }), fillClassName),
-				style: { width: isIndeterminate ? "0%" : `${percentage ?? 0}%` }
+				style: isIndeterminate ? void 0 : { width: `${percentage ?? 0}%` }
 			})
 		})] })
 	});

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 gap-1.5 box-border font-sans\"]);\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 (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  /** 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({ percentage, valueText }: { percentage: number; valueText: string | undefined }) {\n  const percent = Math.round(percentage);\n  const counted = useCountTo(percent);\n  const done = useAfter(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  { label, labelHidden, showValue, tone, trackClassName, fillClassName, className, ...props },\n  ref,\n) {\n  return (\n    <AriaProgressBar\n      ref={ref}\n      {...props}\n      data-slot=\"progress\"\n      className={cn(progressVariants(), 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 percentage={percentage ?? 0} valueText={valueText} />\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 renders no fill rather than the\n              legacy's silent 0%: `value={undefined}` became `(value || 0)`\n              there, so a sighted user saw \"0% done\" while a screen reader\n              said \"indeterminate\".\n            */}\n            <div\n              data-slot=\"progress-fill\"\n              data-indeterminate={isIndeterminate || undefined}\n              // A default-toned bar turns success-coloured when it completes; an explicit tone is never overridden.\n              data-complete={(!tone || tone === \"neutral\") && !isIndeterminate && (percentage ?? 0) >= 100 ? \"\" : undefined}\n              className={cn(progressFillVariants({ tone }), fillClassName)}\n              style={{ width: isIndeterminate ? \"0%\" : `${percentage ?? 0}%` }}\n            />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,mBAAmB,IAAI,CAAC,mDAAmD,CAAC;AAEzF,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;;;;;;AAkDA,SAAS,cAAc,EAAE,YAAY,aAAoE;CACvG,MAAM,UAAU,KAAK,MAAM,UAAU;CACrC,MAAM,UAAU,WAAW,OAAO;CAClC,MAAM,OAAO,SAAS,WAAW,KAAK,GAAG;CACzC,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,EAAE,OAAO,aAAa,WAAW,MAAM,gBAAgB,eAAe,WAAW,GAAG,SACpF,KACA;CACA,OACE,oBAACA,aAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;EAEzC,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;KAAe,YAAY,cAAc;KAAc;IAAY,CAAA;GAC/D,CAAA,IACJ,IACD;EACL,CAAA,GAAA,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,sBAAsB,GAAG,cAAc;GAcrD,UAAA,oBAAC,OAAD;IACE,aAAU;IACV,sBAAoB,mBAAmB,KAAA;IAEvC,kBAAgB,CAAC,QAAQ,SAAS,cAAc,CAAC,oBAAoB,cAAc,MAAM,MAAM,KAAK,KAAA;IACpG,WAAW,GAAG,qBAAqB,EAAE,KAAK,CAAC,GAAG,aAAa;IAC3D,OAAO,EAAE,OAAO,kBAAkB,OAAO,GAAG,cAAc,EAAE,GAAG;GAChE,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, 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"}

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

@@ -1,2 +1,2 @@
-import { Radio, RadioGroup, RadioGroupProps, RadioProps, radioGroupVariants, radioVariants } from "./radio-group.js";
-export { Radio, RadioGroup, type RadioGroupProps, type RadioProps, radioGroupVariants, radioVariants };
+import { Radio, RadioGroup, RadioGroupProps, RadioGroupVariant, RadioProps, radioCardVariants, radioGroupVariants, radioVariants } from "./radio-group.js";
+export { Radio, RadioGroup, type RadioGroupProps, type RadioGroupVariant, type RadioProps, radioCardVariants, radioGroupVariants, radioVariants };

package/dist/radio-group/index.js

@@ -1,2 +1,2 @@
-import { Radio, RadioGroup, radioGroupVariants, radioVariants } from "./radio-group.js";
-export { Radio, RadioGroup, radioGroupVariants, radioVariants };
+import { Radio, RadioGroup, radioCardVariants, radioGroupVariants, radioVariants } from "./radio-group.js";
+export { Radio, RadioGroup, radioCardVariants, radioGroupVariants, radioVariants };

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

@@ -19,8 +19,22 @@ import { RadioGroupProps, RadioProps } from "react-aria-components";
  * Checkbox's exact pair -- `bg-primary` with a `primary-strong` boundary --
  * so a radio and a checkbox in the same form agree.
  */
-export declare const radioGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const radioGroupVariants: (props?: ({
+  variant?: "default" | "card" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const radioVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * One choice drawn as a selectable card: a bordered surface the whole of
+ * which is the hit target, with the title, an optional description and icon.
+ *
+ * Selection is shown twice, by the border AND by the dot, so it never rests
+ * on colour alone (WCAG 1.4.1). The border reuses StatCard's selected filter
+ * pair (`border-primary-strong`, hover darkens an unselected edge), so a
+ * selected card and a selected stat card read the same.
+ */
+export declare const radioCardVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** Which look the group's radios take. */
+export type RadioGroupVariant = "default" | "card";
 /**
  * A set of mutually exclusive choices.
  *
@@ -31,6 +45,14 @@ export declare const radioVariants: (props?: import("class-variance-authority/ty
  * </RadioGroup>
  */
 interface RadioGroupProps$1 extends Omit<RadioGroupProps, "className" | "style"> {
+  /**
+   * `card` draws each choice as a selectable card, with a title, an optional
+   * `description` and `icon` on each `Radio`. The keyboard model is the same:
+   * one tab stop, arrow keys move and select.
+   *
+   * @default "default"
+   */
+  variant?: RadioGroupVariant;
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
 }
@@ -42,9 +64,17 @@ declare const RadioGroup$1: import("react").ForwardRefExoticComponent<RadioGroup
  * <Radio value="pro">Pro</Radio>
  */
 interface RadioProps$1 extends Omit<RadioProps, "className" | "style" | "children"> {
-  /** The label, and this option's accessible name. */
+  /** The label, and this option's accessible name. In a card, the title. */
   children?: ReactNode;
-  /** Extra classes for the label. Merged last, so they win conflicts. */
+  /**
+   * A line under the title, read as the option's description
+   * (`aria-describedby`), not as part of its name. Card variant only; the
+   * default variant ignores it.
+   */
+  description?: ReactNode;
+  /** A decorative icon before the title. Card variant only; hidden from assistive tech. */
+  icon?: ReactNode;
+  /** Extra classes for the label (the whole card in the card variant). Merged last, so they win conflicts. */
   className?: string;
 }
 declare const Radio$1: import("react").ForwardRefExoticComponent<RadioProps$1 & import("react").RefAttributes<HTMLInputElement>>;

package/dist/radio-group/radio-group.js

@@ -2,7 +2,7 @@
 import { cn, cnAll } from "../lib/cn.js";
 import { selectionLabelVariants, selectionRingVariants } from "../lib/selection-control.js";
 import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
+import { createContext, forwardRef, useContext, useId } from "react";
 import { Radio, RadioGroup } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/radio-group/radio-group.tsx
@@ -24,25 +24,79 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * Checkbox's exact pair -- `bg-primary` with a `primary-strong` boundary --
 * so a radio and a checkbox in the same form agree.
 */
-const radioGroupVariants = cva(["flex flex-col gap-2", "box-border font-sans"]);
-const radioVariants = cva([
+const radioGroupVariants = cva(["box-border font-sans"], {
+	variants: { 
+	/** `card` lays the choices out as a grid; add `sm:grid-cols-2` and the like. */
+variant: {
+		default: "flex flex-col gap-2",
+		card: "grid gap-3"
+	} },
+	defaultVariants: { variant: "default" }
+});
+/**
+* The box and dot, shared by both variants. Only the default variant rings
+* the dot itself: a card rings the whole card, and a second ring on the dot
+* inside it would just be noise.
+*/
+const radioMark = [
 	"inline-flex size-4 shrink-0 items-center justify-center",
 	"rounded-full border-(length:--border-width) box-border",
-	"bg-background border-border",
+	"bg-surface border-control-edge",
 	"radio-mark",
 	"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong",
-	"group-data-[selected]:text-primary-foreground",
-	selectionRingVariants()
+	"group-data-[selected]:text-primary-foreground"
+];
+const radioVariants = cva([...radioMark, selectionRingVariants()]);
+/**
+* One choice drawn as a selectable card: a bordered surface the whole of
+* which is the hit target, with the title, an optional description and icon.
+*
+* Selection is shown twice, by the border AND by the dot, so it never rests
+* on colour alone (WCAG 1.4.1). The border reuses StatCard's selected filter
+* pair (`border-primary-strong`, hover darkens an unselected edge), so a
+* selected card and a selected stat card read the same.
+*/
+const radioCardVariants = cva([
+	"group flex items-start gap-3 p-4",
+	"rounded-panel border-(length:--border-width) border-border bg-surface",
+	"box-border font-sans text-sm leading-(--leading-normal) text-foreground text-start",
+	"cursor-pointer select-none",
+	"motion-safe:transition-[border-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle",
+	"data-[hovered]:not-data-[selected]:border-muted-foreground",
+	"data-[selected]:border-primary-strong",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)",
+	"outline-none",
+	"data-[focus-visible]:outline-solid",
+	"data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
+	"data-[focus-visible]:outline-(--color-ring)"
 ]);
-const RadioGroup$1 = forwardRef(function RadioGroup$2({ className, ...props }, ref) {
+const radioCardDotVariants = cva([...radioMark, "mt-0.5"]);
+/** The group hands its variant down, so every Radio inside matches it. */
+const RadioVariantContext = createContext("default");
+const RadioGroup$1 = forwardRef(function RadioGroup$2({ className, variant = "default", children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
 		ref,
 		...props,
 		"data-slot": "radio-group",
-		className: cn(radioGroupVariants(), className)
+		"data-variant": variant === "default" ? void 0 : variant,
+		className: cn(radioGroupVariants({ variant }), className),
+		children: (renderProps) => /* @__PURE__ */ jsx(RadioVariantContext.Provider, {
+			value: variant,
+			children: typeof children === "function" ? children(renderProps) : children
+		})
 	});
 });
-const Radio$1 = forwardRef(function Radio$2({ className, children, ...props }, ref) {
+const Radio$1 = forwardRef(function Radio(props, ref) {
+	return useContext(RadioVariantContext) === "card" ? /* @__PURE__ */ jsx(RadioCard, {
+		...props,
+		ref
+	}) : /* @__PURE__ */ jsx(RadioDefault, {
+		...props,
+		ref
+	});
+});
+const RadioDefault = forwardRef(function RadioDefault({ className, children, description: _description, icon: _icon, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Radio, {
 		...props,
 		inputRef: ref,
@@ -63,7 +117,53 @@ const Radio$1 = forwardRef(function Radio$2({ className, children, ...props }, r
 		})] })
 	});
 });
+const RadioCard = forwardRef(function RadioCard({ className, children, description, icon, ...props }, ref) {
+	const id = useId();
+	const titleId = `${id}-title`;
+	const descriptionId = `${id}-description`;
+	return /* @__PURE__ */ jsx(Radio, {
+		"aria-labelledby": children == null || props["aria-label"] != null ? void 0 : titleId,
+		"aria-describedby": description == null ? void 0 : descriptionId,
+		...props,
+		inputRef: ref,
+		"data-slot": "radio",
+		"data-variant": "card",
+		className: cn(radioCardVariants(), className),
+		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			icon == null ? null : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "radio-icon",
+				className: "mt-0.5 inline-flex shrink-0 text-text-secondary [&_svg]:size-4",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [children == null ? null : /* @__PURE__ */ jsx("span", {
+					id: titleId,
+					"data-slot": "radio-label",
+					className: "font-medium",
+					children
+				}), description == null ? null : /* @__PURE__ */ jsx("span", {
+					id: descriptionId,
+					"data-slot": "radio-description",
+					className: "text-text-secondary",
+					children: description
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "radio-dot",
+				className: radioCardDotVariants(),
+				children: /* @__PURE__ */ jsx("span", {
+					"data-slot": "radio-indicator",
+					"data-selected": isSelected || void 0,
+					className: "radio-dot size-1.5 rounded-full bg-current"
+				})
+			})
+		] })
+	});
+});
 //#endregion
-export { Radio$1 as Radio, RadioGroup$1 as RadioGroup, radioGroupVariants, radioVariants };
+export { Radio$1 as Radio, RadioGroup$1 as RadioGroup, radioCardVariants, radioGroupVariants, radioVariants };
 
 //# sourceMappingURL=radio-group.js.map

package/dist/radio-group/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":["RadioGroup","AriaRadioGroup","Radio","AriaRadio"],"sources":["../../src/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Radio as AriaRadio,\n  RadioGroup as AriaRadioGroup,\n  type RadioGroupProps as AriaRadioGroupProps,\n  type RadioProps as AriaRadioProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * RadioGroup, ported from the legacy shadcn/Radix component onto React Aria.\n *\n * Census: 1 file, 3 uses -- `RadioGroup` 1, `RadioGroupItem` 2. The\n * smallest real surface in the migration, so the port is deliberately plain.\n *\n * THE LABEL MOVES INSIDE THE ITEM. Radix's `RadioGroupItem` is a bare\n * button and the caller pairs it with a separate `<Label htmlFor>`; React\n * Aria's `Radio` takes its label as `children` and wires the association\n * itself. That is the one rename a call site has to make, and it removes\n * the id bookkeeping.\n *\n * `border-primary` becomes `border-border` for the same reason it did on\n * Checkbox: brand orange is 2.44:1 on white and cannot legally be the only\n * thing describing a control's edge (WCAG 1.4.11). Selected reuses\n * Checkbox's exact pair -- `bg-primary` with a `primary-strong` boundary --\n * so a radio and a checkbox in the same form agree.\n */\nexport const radioGroupVariants = cva([\n  \"flex flex-col gap-2\",\n  \"box-border font-sans\",\n]);\n\nexport const radioVariants = cva([\n  \"inline-flex size-4 shrink-0 items-center justify-center\",\n  \"rounded-full border-(length:--border-width) box-border\",\n  \"bg-background border-border\",\n  // Colours ease, the mark dips under a press and springs back (see radio-mark).\n  \"radio-mark\",\n  \"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong\",\n  \"group-data-[selected]:text-primary-foreground\",\n  selectionRingVariants(),\n]);\n\n/**\n * A set of mutually exclusive choices.\n *\n * @example\n * <RadioGroup value={plan} onChange={setPlan} aria-label=\"Plan\">\n *   <Radio value=\"free\">Free</Radio>\n *   <Radio value=\"pro\">Pro</Radio>\n * </RadioGroup>\n */\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaRadioGroup\n      ref={ref}\n      {...props}\n      data-slot=\"radio-group\"\n      className={cn(radioGroupVariants(), className)}\n    />\n  );\n});\n\n/**\n * One choice.\n *\n * @example\n * <Radio value=\"pro\">Pro</Radio>\n */\nexport interface RadioProps extends Omit<AriaRadioProps, \"className\" | \"style\" | \"children\"> {\n  /** The label, and this option's accessible name. */\n  children?: ReactNode;\n  /** Extra classes for the label. Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  { className, children, ...props },\n  ref,\n) {\n  return (\n    <AriaRadio\n      {...props}\n      // inputRef, not ref: AriaRadio's own ref targets the label it renders\n      // around a visually-hidden native input, and a label cannot be\n      // focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"radio\"\n      // justify-start, overriding the shared label's centring: a radio sits\n      // in a vertical list where every label must start on the same line,\n      // not centre itself in a 24px box.\n      className={cn(cnAll(selectionLabelVariants(), \"justify-start\"), className)}\n    >\n      {({ isSelected }) => (\n        <>\n          <span aria-hidden=\"true\" data-slot=\"radio-dot\" className={radioVariants()}>\n            {/*\n              Always there: the state decides whether it shows, so the dot can\n              spring in and shrink away. data-selected carries the state to a\n              test, which can no longer read it from the dot's presence.\n            */}\n            <span\n              data-slot=\"radio-indicator\"\n              data-selected={isSelected || undefined}\n              className=\"radio-dot size-1.5 rounded-full bg-current\"\n            />\n          </span>\n          {children == null ? null : <span data-slot=\"radio-label\">{children}</span>}\n        </>\n      )}\n    </AriaRadio>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,qBAAqB,IAAI,CACpC,uBACA,sBACF,CAAC;AAED,MAAa,gBAAgB,IAAI;CAC/B;CACA;CACA;CAEA;CACA;CACA;CACA,sBAAsB;AACxB,CAAC;AAgBD,MAAaA,eAAa,WAA4C,SAASA,aAC7E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,YAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;CAC9C,CAAA;AAEL,CAAC;AAeD,MAAaC,UAAQ,WAAyC,SAASA,QACrE,EAAE,WAAW,UAAU,GAAG,SAC1B,KACA;CACA,OACE,oBAACC,OAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,MAAM,uBAAuB,GAAG,eAAe,GAAG,SAAS;EAEvE,WAAA,EAAE,iBACF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAY,WAAW,cAAc;GAMtE,UAAA,oBAAC,QAAD;IACE,aAAU;IACV,iBAAe,cAAc,KAAA;IAC7B,WAAU;GACX,CAAA;EACG,CAAA,GACL,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAe;EAAe,CAAA,CACzE,EAAA,CAAA;CAEK,CAAA;AAEf,CAAC"}
+{"version":3,"file":"radio-group.js","names":["RadioGroup","AriaRadioGroup","Radio","AriaRadio"],"sources":["../../src/radio-group/radio-group.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { createContext, forwardRef, useContext, useId, type ReactNode } from \"react\";\nimport {\n  Radio as AriaRadio,\n  RadioGroup as AriaRadioGroup,\n  type RadioGroupProps as AriaRadioGroupProps,\n  type RadioProps as AriaRadioProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { selectionLabelVariants, selectionRingVariants } from \"../lib/selection-control.js\";\n\n/**\n * RadioGroup, ported from the legacy shadcn/Radix component onto React Aria.\n *\n * Census: 1 file, 3 uses -- `RadioGroup` 1, `RadioGroupItem` 2. The\n * smallest real surface in the migration, so the port is deliberately plain.\n *\n * THE LABEL MOVES INSIDE THE ITEM. Radix's `RadioGroupItem` is a bare\n * button and the caller pairs it with a separate `<Label htmlFor>`; React\n * Aria's `Radio` takes its label as `children` and wires the association\n * itself. That is the one rename a call site has to make, and it removes\n * the id bookkeeping.\n *\n * `border-primary` becomes `border-border` for the same reason it did on\n * Checkbox: brand orange is 2.44:1 on white and cannot legally be the only\n * thing describing a control's edge (WCAG 1.4.11). Selected reuses\n * Checkbox's exact pair -- `bg-primary` with a `primary-strong` boundary --\n * so a radio and a checkbox in the same form agree.\n */\nexport const radioGroupVariants = cva([\"box-border font-sans\"], {\n  variants: {\n    /** `card` lays the choices out as a grid; add `sm:grid-cols-2` and the like. */\n    variant: {\n      default: \"flex flex-col gap-2\",\n      card: \"grid gap-3\",\n    },\n  },\n  defaultVariants: { variant: \"default\" },\n});\n\n/**\n * The box and dot, shared by both variants. Only the default variant rings\n * the dot itself: a card rings the whole card, and a second ring on the dot\n * inside it would just be noise.\n */\nconst radioMark = [\n  \"inline-flex size-4 shrink-0 items-center justify-center\",\n  \"rounded-full border-(length:--border-width) box-border\",\n  \"bg-surface border-control-edge\",\n  // Colours ease, the mark dips under a press and springs back (see radio-mark).\n  \"radio-mark\",\n  \"group-data-[selected]:bg-primary group-data-[selected]:border-primary-strong\",\n  \"group-data-[selected]:text-primary-foreground\",\n];\n\nexport const radioVariants = cva([...radioMark, selectionRingVariants()]);\n\n/**\n * One choice drawn as a selectable card: a bordered surface the whole of\n * which is the hit target, with the title, an optional description and icon.\n *\n * Selection is shown twice, by the border AND by the dot, so it never rests\n * on colour alone (WCAG 1.4.1). The border reuses StatCard's selected filter\n * pair (`border-primary-strong`, hover darkens an unselected edge), so a\n * selected card and a selected stat card read the same.\n */\nexport const radioCardVariants = cva([\n  \"group flex items-start gap-3 p-4\",\n  \"rounded-panel border-(length:--border-width) border-border bg-surface\",\n  \"box-border font-sans text-sm leading-(--leading-normal) text-foreground text-start\",\n  \"cursor-pointer select-none\",\n  \"motion-safe:transition-[border-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n  \"data-[hovered]:not-data-[selected]:border-muted-foreground\",\n  \"data-[selected]:border-primary-strong\",\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n  // The same ring as selectionRingVariants, on purpose not reused: that helper\n  // reads the state from a `group-data-[focus-visible]:` parent, and here the\n  // card IS the group, so its own `data-[focus-visible]:` is the state. Keep\n  // the two in step. outline-solid is load-bearing: outline-none sets the\n  // style the width utility resolves from (see selectionRingVariants).\n  \"outline-none\",\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]);\n\nconst radioCardDotVariants = cva([...radioMark, \"mt-0.5\"]);\n\n/** Which look the group's radios take. */\nexport type RadioGroupVariant = \"default\" | \"card\";\n\n/** The group hands its variant down, so every Radio inside matches it. */\nconst RadioVariantContext = createContext<RadioGroupVariant>(\"default\");\n\n/**\n * A set of mutually exclusive choices.\n *\n * @example\n * <RadioGroup value={plan} onChange={setPlan} aria-label=\"Plan\">\n *   <Radio value=\"free\">Free</Radio>\n *   <Radio value=\"pro\">Pro</Radio>\n * </RadioGroup>\n */\nexport interface RadioGroupProps extends Omit<AriaRadioGroupProps, \"className\" | \"style\"> {\n  /**\n   * `card` draws each choice as a selectable card, with a title, an optional\n   * `description` and `icon` on each `Radio`. The keyboard model is the same:\n   * one tab stop, arrow keys move and select.\n   *\n   * @default \"default\"\n   */\n  variant?: RadioGroupVariant;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(function RadioGroup(\n  { className, variant = \"default\", children, ...props },\n  ref,\n) {\n  return (\n    <AriaRadioGroup\n      ref={ref}\n      {...props}\n      data-slot=\"radio-group\"\n      data-variant={variant === \"default\" ? undefined : variant}\n      className={cn(radioGroupVariants({ variant }), className)}\n    >\n      {(renderProps) => (\n        <RadioVariantContext.Provider value={variant}>\n          {typeof children === \"function\" ? children(renderProps) : children}\n        </RadioVariantContext.Provider>\n      )}\n    </AriaRadioGroup>\n  );\n});\n\n/**\n * One choice.\n *\n * @example\n * <Radio value=\"pro\">Pro</Radio>\n */\nexport interface RadioProps extends Omit<AriaRadioProps, \"className\" | \"style\" | \"children\"> {\n  /** The label, and this option's accessible name. In a card, the title. */\n  children?: ReactNode;\n  /**\n   * A line under the title, read as the option's description\n   * (`aria-describedby`), not as part of its name. Card variant only; the\n   * default variant ignores it.\n   */\n  description?: ReactNode;\n  /** A decorative icon before the title. Card variant only; hidden from assistive tech. */\n  icon?: ReactNode;\n  /** Extra classes for the label (the whole card in the card variant). Merged last, so they win conflicts. */\n  className?: string;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(props, ref) {\n  const variant = useContext(RadioVariantContext);\n  return variant === \"card\" ? <RadioCard {...props} ref={ref} /> : <RadioDefault {...props} ref={ref} />;\n});\n\nconst RadioDefault = forwardRef<HTMLInputElement, RadioProps>(function RadioDefault(\n  // description and icon belong to the card; pulled out so they never reach the DOM.\n  { className, children, description: _description, icon: _icon, ...props },\n  ref,\n) {\n  return (\n    <AriaRadio\n      {...props}\n      // inputRef, not ref: AriaRadio's own ref targets the label it renders\n      // around a visually-hidden native input, and a label cannot be\n      // focused -- ref.current.focus() would silently no-op. inputRef is\n      // React Aria's own escape hatch to the real control.\n      inputRef={ref}\n      data-slot=\"radio\"\n      // justify-start, overriding the shared label's centring: a radio sits\n      // in a vertical list where every label must start on the same line,\n      // not centre itself in a 24px box.\n      className={cn(cnAll(selectionLabelVariants(), \"justify-start\"), className)}\n    >\n      {({ isSelected }) => (\n        <>\n          <span aria-hidden=\"true\" data-slot=\"radio-dot\" className={radioVariants()}>\n            {/*\n              Always there: the state decides whether it shows, so the dot can\n              spring in and shrink away. data-selected carries the state to a\n              test, which can no longer read it from the dot's presence.\n            */}\n            <span\n              data-slot=\"radio-indicator\"\n              data-selected={isSelected || undefined}\n              className=\"radio-dot size-1.5 rounded-full bg-current\"\n            />\n          </span>\n          {children == null ? null : <span data-slot=\"radio-label\">{children}</span>}\n        </>\n      )}\n    </AriaRadio>\n  );\n});\n\nconst RadioCard = forwardRef<HTMLInputElement, RadioProps>(function RadioCard(\n  { className, children, description, icon, ...props },\n  ref,\n) {\n  const id = useId();\n  const titleId = `${id}-title`;\n  const descriptionId = `${id}-description`;\n  return (\n    <AriaRadio\n      // The title alone names the option; the description describes it. Left\n      // to the wrapping <label>, the name would be title and description run\n      // together. A caller's own labelling wins: their aria-labelledby or\n      // aria-describedby by the spread below, and their aria-label because the\n      // title's aria-labelledby is then left off (it would outrank aria-label\n      // in the name computation).\n      aria-labelledby={children == null || props[\"aria-label\"] != null ? undefined : titleId}\n      aria-describedby={description == null ? undefined : descriptionId}\n      {...props}\n      inputRef={ref}\n      data-slot=\"radio\"\n      data-variant=\"card\"\n      className={cn(radioCardVariants(), className)}\n    >\n      {({ isSelected }) => (\n        <>\n          {icon == null ? null : (\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"radio-icon\"\n              className=\"mt-0.5 inline-flex shrink-0 text-text-secondary [&_svg]:size-4\"\n            >\n              {icon}\n            </span>\n          )}\n          <span className=\"flex min-w-0 flex-1 flex-col gap-1\">\n            {children == null ? null : (\n              <span id={titleId} data-slot=\"radio-label\" className=\"font-medium\">\n                {children}\n              </span>\n            )}\n            {description == null ? null : (\n              <span id={descriptionId} data-slot=\"radio-description\" className=\"text-text-secondary\">\n                {description}\n              </span>\n            )}\n          </span>\n          <span aria-hidden=\"true\" data-slot=\"radio-dot\" className={radioCardDotVariants()}>\n            <span\n              data-slot=\"radio-indicator\"\n              data-selected={isSelected || undefined}\n              className=\"radio-dot size-1.5 rounded-full bg-current\"\n            />\n          </span>\n        </>\n      )}\n    </AriaRadio>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,qBAAqB,IAAI,CAAC,sBAAsB,GAAG;CAC9D,UAAU;;AAER,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CAAC;;;;;;AAOD,MAAM,YAAY;CAChB;CACA;CACA;CAEA;CACA;CACA;AACF;AAEA,MAAa,gBAAgB,IAAI,CAAC,GAAG,WAAW,sBAAsB,CAAC,CAAC;;;;;;;;;;AAWxE,MAAa,oBAAoB,IAAI;CACnC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAMA;CACA;CACA;CACA;CACA;AACF,CAAC;AAED,MAAM,uBAAuB,IAAI,CAAC,GAAG,WAAW,QAAQ,CAAC;;AAMzD,MAAM,sBAAsB,cAAiC,SAAS;AAwBtE,MAAaA,eAAa,WAA4C,SAASA,aAC7E,EAAE,WAAW,UAAU,WAAW,UAAU,GAAG,SAC/C,KACA;CACA,OACE,oBAACC,YAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,gBAAc,YAAY,YAAY,KAAA,IAAY;EAClD,WAAW,GAAG,mBAAmB,EAAE,QAAQ,CAAC,GAAG,SAAS;EAEtD,WAAA,gBACA,oBAAC,oBAAoB,UAArB;GAA8B,OAAO;GAClC,UAAA,OAAO,aAAa,aAAa,SAAS,WAAW,IAAI;EAC9B,CAAA;CAElB,CAAA;AAEpB,CAAC;AAuBD,MAAaC,UAAQ,WAAyC,SAAS,MAAM,OAAO,KAAK;CAEvF,OADgB,WAAW,mBACd,MAAM,SAAS,oBAAC,WAAD;EAAW,GAAI;EAAY;CAAM,CAAA,IAAI,oBAAC,cAAD;EAAc,GAAI;EAAY;CAAM,CAAA;AACvG,CAAC;AAED,MAAM,eAAe,WAAyC,SAAS,aAErE,EAAE,WAAW,UAAU,aAAa,cAAc,MAAM,OAAO,GAAG,SAClE,KACA;CACA,OACE,oBAACC,OAAD;EACE,GAAI;EAKJ,UAAU;EACV,aAAU;EAIV,WAAW,GAAG,MAAM,uBAAuB,GAAG,eAAe,GAAG,SAAS;EAEvE,WAAA,EAAE,iBACF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,aAAU;GAAY,WAAW,cAAc;GAMtE,UAAA,oBAAC,QAAD;IACE,aAAU;IACV,iBAAe,cAAc,KAAA;IAC7B,WAAU;GACX,CAAA;EACG,CAAA,GACL,YAAY,OAAO,OAAO,oBAAC,QAAD;GAAM,aAAU;GAAe;EAAe,CAAA,CACzE,EAAA,CAAA;CAEK,CAAA;AAEf,CAAC;AAED,MAAM,YAAY,WAAyC,SAAS,UAClE,EAAE,WAAW,UAAU,aAAa,MAAM,GAAG,SAC7C,KACA;CACA,MAAM,KAAK,MAAM;CACjB,MAAM,UAAU,GAAG,GAAG;CACtB,MAAM,gBAAgB,GAAG,GAAG;CAC5B,OACE,oBAACA,OAAD;EAOE,mBAAiB,YAAY,QAAQ,MAAM,iBAAiB,OAAO,KAAA,IAAY;EAC/E,oBAAkB,eAAe,OAAO,KAAA,IAAY;EACpD,GAAI;EACJ,UAAU;EACV,aAAU;EACV,gBAAa;EACb,WAAW,GAAG,kBAAkB,GAAG,SAAS;EAE1C,WAAA,EAAE,iBACF,qBAAA,YAAA,EAAA,UAAA;GACG,QAAQ,OAAO,OACd,oBAAC,QAAD;IACE,eAAY;IACZ,aAAU;IACV,WAAU;IAET,UAAA;GACG,CAAA;GAER,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACG,YAAY,OAAO,OAClB,oBAAC,QAAD;KAAM,IAAI;KAAS,aAAU;KAAc,WAAU;KAClD;IACG,CAAA,GAEP,eAAe,OAAO,OACrB,oBAAC,QAAD;KAAM,IAAI;KAAe,aAAU;KAAoB,WAAU;KAC9D,UAAA;IACG,CAAA,CAEJ;;GACN,oBAAC,QAAD;IAAM,eAAY;IAAO,aAAU;IAAY,WAAW,qBAAqB;IAC7E,UAAA,oBAAC,QAAD;KACE,aAAU;KACV,iBAAe,cAAc,KAAA;KAC7B,WAAU;IACX,CAAA;GACG,CAAA;EACN,EAAA,CAAA;CAEK,CAAA;AAEf,CAAC"}

package/dist/reactions/index.d.ts

@@ -0,0 +1,2 @@
+import { Reaction, ReactionOption, Reactions, ReactionsProps } from "./reactions.js";
+export { type Reaction, type ReactionOption, Reactions, type ReactionsProps };

package/dist/reactions/index.js

@@ -0,0 +1,2 @@
+import { Reactions } from "./reactions.js";
+export { Reactions };

package/dist/reactions/reactions.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+//#region src/reactions/reactions.d.ts
+/**
+ * Reactions: a reaction bar for comments, posts and release notes. Each pill shows
+ * one reaction and how many people chose it; the viewer's own carry the primary
+ * tint and a filled glyph (never colour alone). Pressing a pill adds or removes
+ * the viewer's reaction, and the add button opens a compact picker that grows out
+ * of it. Use it for quick acknowledgement; when people need to say something
+ * specific, give them a reply field instead.
+ *
+ * Adding gives the icon a kick (it overshoots and settles), the count swaps to its
+ * new number, a pill that arrives or leaves opens or closes its slot so the others
+ * glide, and the bar follows its own height when it wraps. In the picker a shared
+ * highlight glides to the hovered or focused option and a caption names it.
+ * Arrow keys, Home and End move through the options. A change is announced
+ * politely ("Added Like. 3 reactions."). Reduced motion fades.
+ */
+export interface ReactionOption {
+  id: string;
+  /** The reaction's name, used on the pill, in the picker and in announcements. */
+  label: string;
+  /** The glyph: an svg that takes `currentColor`, 16px on a pill and 20px in the picker. */
+  icon: ReactNode;
+}
+export interface Reaction {
+  id: string;
+  count: number;
+  /** Whether the viewer chose it. */
+  reacted: boolean;
+}
+export interface ReactionsProps {
+  /** Every reaction the picker offers, in picker order. */
+  options: ReactionOption[];
+  /** Controlled reactions. Pills keep this order, and a reaction whose count reaches zero leaves the bar. */
+  value?: Reaction[];
+  /** The reactions when uncontrolled. */
+  defaultValue?: Reaction[];
+  /** Called with the next reactions and the change that produced them. */
+  onValueChange?: (next: Reaction[], change: {
+    id: string;
+    reacted: boolean;
+  }) => void;
+  /** Accessible name for the bar. @default "Reactions" */
+  label?: string;
+  /** Extra classes for the bar. Merged last. */
+  className?: string;
+}
+export declare function Reactions({ options, value, defaultValue, onValueChange, label, className }: ReactionsProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=reactions.d.ts.map