@seekalfred/primitives 0.7.3 → 0.8.0

package/dist/progress/progress.js

@@ -3,8 +3,8 @@ import { cn, cnAll } from "../lib/cn.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";
+import { forwardRef, useId, useMemo } from "react";
+import { Label, ProgressBar, useLocale } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/progress/progress.tsx
 /**
@@ -36,6 +36,17 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * the track against the page at 5.25:1.
 *
 * Both are in the build-failing contrast contract.
+*
+* A TARGET MARKER is opt-in (`target`): a short upright tick that stands
+* proud of the track at the value the bar should have reached -- "where the
+* goal should be by now". The tick is decorative; its meaning is read to
+* assistive technology as the bar's description (`targetLabel` plus the
+* formatted value), and `showTargetLabel` also prints it under the tick.
+*
+* `surface="inverse"` is for a bar on the inverted (foreground-coloured)
+* surface, such as a dark summary strip: the track is the inverse text colour
+* mixed into the surface, the default fill and the copy take the inverse text
+* colour, so the bar keeps its contrast where the default greys would vanish.
 */
 const progressVariants = cva(["flex w-full flex-col box-border font-sans"], {
 	variants: { headerEmpty: {
@@ -44,7 +55,28 @@ const progressVariants = cva(["flex w-full flex-col box-border font-sans"], {
 	} },
 	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 progressTrackVariants = cva(["relative h-2 w-full overflow-hidden rounded-pill box-border", "border-(length:--border-width)"], {
+	variants: { 
+	/** The surface the bar sits on. */
+surface: {
+		default: "bg-muted border-border",
+		inverse: "bg-[color-mix(in_oklab,var(--color-text-inverse)_28%,var(--color-foreground))] border-transparent"
+	} },
+	defaultVariants: { surface: "default" }
+});
+/**
+* The target tick: 2px wide, standing 4px proud of the track on both sides,
+* with a 1px halo of the surface colour so it reads over the fill as well as
+* over the track. Placed by an inline `inset-inline-start`, so it mirrors in
+* right-to-left text.
+*/
+const progressTargetVariants = cva("pointer-events-none absolute -top-1 -bottom-1 w-0.5 -ms-px rounded-pill", {
+	variants: { surface: {
+		default: "bg-foreground shadow-[0_0_0_1px_var(--color-surface)]",
+		inverse: "bg-text-inverse shadow-[0_0_0_1px_var(--color-foreground)]"
+	} },
+	defaultVariants: { surface: "default" }
+});
 const progressFillVariants = cva(["h-full rounded-pill", "progress-fill"], {
 	variants: { tone: {
 		neutral: "bg-primary-strong",
@@ -86,47 +118,125 @@ function ProgressValue({ percentage, valueText, showCompletion }) {
 		})
 	}) : null] });
 }
-const Progress = forwardRef(function Progress({ label, labelHidden, showValue, showCompletion = true, tone, trackClassName, fillClassName, className, ...props }, ref) {
+/** The track's frame and the tick. With no marker it renders the track alone, as before. */
+function TargetFrame({ marker, surface, children }) {
+	if (!marker) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "progress-target-frame",
+		className: "relative",
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"data-slot": "progress-target",
+			"aria-hidden": "true",
+			className: progressTargetVariants({ surface }),
+			style: { insetInlineStart: `${marker.share * 100}%` }
+		})]
+	});
+}
+/**
+* The target's meaning, the bar's description. Printed, it hangs from a
+* zero-width anchor at the tick: centred on it, or running inward near either
+* end, in either text direction. Otherwise it is for screen readers only.
+*/
+function TargetText({ id, marker, shown, inverse }) {
+	if (!shown) return /* @__PURE__ */ jsx("span", {
+		id,
+		className: "sr-only",
+		children: marker.text
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "progress-target-label",
+		"aria-hidden": "true",
+		className: "relative h-[1lh] text-xs leading-(--leading-normal)",
+		children: /* @__PURE__ */ jsx("span", {
+			className: cnAll("absolute top-0 flex w-0 whitespace-nowrap", marker.share < .2 ? "justify-start" : marker.share > .8 ? "justify-end" : "justify-center", inverse ? "text-text-inverse" : "text-muted-foreground"),
+			style: { insetInlineStart: `${marker.share * 100}%` },
+			children: /* @__PURE__ */ jsx("span", {
+				id,
+				children: marker.text
+			})
+		})
+	});
+}
+const Progress = forwardRef(function Progress({ label, labelHidden, showValue, showCompletion = true, tone, target, targetLabel = "Target", showTargetLabel = false, surface = "default", trackClassName, fillClassName, className, ...props }, ref) {
+	const { locale } = useLocale();
+	const targetId = useId();
+	const { minValue = 0, maxValue = 100, formatOptions, isIndeterminate: indeterminate } = props;
+	const marker = useMemo(() => {
+		if (target === void 0 || !Number.isFinite(target) || indeterminate) return null;
+		const span = maxValue - minValue;
+		const share = span > 0 ? Math.min(1, Math.max(0, (target - minValue) / span)) : 0;
+		const options = formatOptions ?? { style: "percent" };
+		const shown = options.style === "percent" ? share : Math.min(maxValue, Math.max(minValue, target));
+		return {
+			share,
+			text: `${targetLabel}: ${new Intl.NumberFormat(locale, options).format(shown)}`
+		};
+	}, [
+		target,
+		indeterminate,
+		minValue,
+		maxValue,
+		formatOptions,
+		locale,
+		targetLabel
+	]);
+	const inverse = surface === "inverse";
+	const describedBy = marker ? [props["aria-describedby"], targetId].filter(Boolean).join(" ") : props["aria-describedby"];
 	return /* @__PURE__ */ jsx(ProgressBar, {
 		ref,
 		...props,
+		"aria-describedby": describedBy,
 		"data-slot": "progress",
+		"data-surface": inverse ? "inverse" : void 0,
 		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"),
-			children: [/* @__PURE__ */ jsx(Label, {
-				"data-slot": "progress-label",
-				className: cnAll("text-sm leading-(--leading-normal) text-foreground", labelHidden && "sr-only"),
-				children: typeof label === "string" ? /* @__PURE__ */ jsx(SwapText, {
-					swapKey: label,
-					className: "block",
-					children: label
-				}) : label
-			}), showValue ? /* @__PURE__ */ jsx("span", {
-				"data-slot": "progress-value",
-				"aria-hidden": "true",
-				className: "text-sm leading-(--leading-normal) text-muted-foreground tabular-nums",
-				children: /* @__PURE__ */ jsx(ProgressValue, {
-					percentage: percentage ?? 0,
-					valueText,
-					showCompletion
+		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"),
+				children: [/* @__PURE__ */ jsx(Label, {
+					"data-slot": "progress-label",
+					className: cnAll("text-sm leading-(--leading-normal)", inverse ? "text-text-inverse" : "text-foreground", labelHidden && "sr-only"),
+					children: typeof label === "string" ? /* @__PURE__ */ jsx(SwapText, {
+						swapKey: label,
+						className: "block",
+						children: label
+					}) : label
+				}), showValue ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "progress-value",
+					"aria-hidden": "true",
+					className: cnAll("text-sm leading-(--leading-normal) tabular-nums", inverse ? "text-text-inverse" : "text-muted-foreground"),
+					children: /* @__PURE__ */ jsx(ProgressValue, {
+						percentage: percentage ?? 0,
+						valueText,
+						showCompletion
+					})
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx(TargetFrame, {
+				marker,
+				surface,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-slot": "progress-track",
+					className: cn(progressTrackVariants({ surface }), trackClassName),
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": "progress-fill",
+						"data-indeterminate": isIndeterminate || void 0,
+						"data-complete": showCompletion && (!tone || tone === "neutral") && !isIndeterminate && (percentage ?? 0) >= 100 ? "" : void 0,
+						className: cn([progressFillVariants({ tone }), inverse && (!tone || tone === "neutral") && "bg-text-inverse"], fillClassName),
+						style: isIndeterminate ? void 0 : { width: `${percentage ?? 0}%` }
+					})
 				})
-			}) : null]
-		}), /* @__PURE__ */ jsx("div", {
-			"data-slot": "progress-track",
-			className: cn(progressTrackVariants(), trackClassName),
-			children: /* @__PURE__ */ jsx("div", {
-				"data-slot": "progress-fill",
-				"data-indeterminate": isIndeterminate || void 0,
-				"data-complete": showCompletion && (!tone || tone === "neutral") && !isIndeterminate && (percentage ?? 0) >= 100 ? "" : void 0,
-				className: cn(progressFillVariants({ tone }), fillClassName),
-				style: isIndeterminate ? void 0 : { width: `${percentage ?? 0}%` }
-			})
-		})] })
+			}),
+			marker ? /* @__PURE__ */ jsx(TargetText, {
+				id: targetId,
+				marker,
+				shown: showTargetLabel,
+				inverse
+			}) : null
+		] })
 	});
 });
 //#endregion
-export { Progress, progressFillVariants, progressTrackVariants, progressVariants };
+export { Progress, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants };
 
 //# sourceMappingURL=progress.js.map

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?: "default" | "card" | "framed" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const radioVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /**
@@ -34,7 +34,7 @@ export declare const radioVariants: (props?: import("class-variance-authority/ty
  */
 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";
+export type RadioGroupVariant = "default" | "card" | "framed";
 /**
  * A set of mutually exclusive choices.
  *
@@ -48,7 +48,9 @@ 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.
+   * one tab stop, arrow keys move and select. `framed` draws a single bordered
+   * frame around ordinary radios (laid out by `orientation`); its focus is the
+   * frame's border turning dark.
    *
    * @default "default"
    */
@@ -74,6 +76,13 @@ interface RadioProps$1 extends Omit<RadioProps, "className" | "style" | "childre
   description?: ReactNode;
   /** A decorative icon before the title. Card variant only; hidden from assistive tech. */
   icon?: ReactNode;
+  /**
+   * Content above the title, edge to edge in the card: a thumbnail, a preview.
+   * Card variant only. With it the card stacks (media, then the icon, title and
+   * dot row). Give an `<img>` its own `alt`, or `alt=""` when the title says it
+   * all; the slot adds no name of its own.
+   */
+  media?: ReactNode;
   /** Extra classes for the label (the whole card in the card variant). Merged last, so they win conflicts. */
   className?: string;
 }

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

@@ -1,6 +1,6 @@
 "use client";
 import { cn, cnAll } from "../lib/cn.js";
-import { selectionLabelVariants, selectionRingVariants } from "../lib/selection-control.js";
+import { selectionCardVariants, selectionLabelVariants, selectionRingVariants } from "../lib/selection-control.js";
 import { cva } from "class-variance-authority";
 import { createContext, forwardRef, useContext, useId } from "react";
 import { Radio, RadioGroup } from "react-aria-components";
@@ -26,10 +26,24 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 */
 const radioGroupVariants = cva(["box-border font-sans"], {
 	variants: { 
-	/** `card` lays the choices out as a grid; add `sm:grid-cols-2` and the like. */
+	/**
+	* `card` lays the choices out as a grid; add `sm:grid-cols-2` and the like.
+	* `framed` keeps ordinary radios and draws one bordered frame around the row.
+	*/
 variant: {
 		default: "flex flex-col gap-2",
-		card: "grid gap-3"
+		card: "grid gap-3",
+		framed: [
+			"inline-flex flex-col gap-2 px-2 py-0.5",
+			"rounded-control border-(length:--border-width) border-border bg-surface",
+			"data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:items-center data-[orientation=horizontal]:gap-3",
+			"has-[[data-focus-visible]]:border-foreground",
+			"[&_[data-slot=radio-dot]]:outline-hidden!",
+			"forced-colors:has-[[data-focus-visible]]:outline-solid",
+			"forced-colors:has-[[data-focus-visible]]:outline-(length:--focus-ring-width)",
+			"forced-colors:has-[[data-focus-visible]]:outline-offset-(--focus-ring-offset)",
+			"motion-safe:transition-[border-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle"
+		]
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -56,21 +70,7 @@ const radioVariants = cva([...radioMark, selectionRingVariants()]);
 * 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 radioCardVariants = selectionCardVariants;
 const radioCardDotVariants = cva([...radioMark, "mt-0.5"]);
 /** The group hands its variant down, so every Radio inside matches it. */
 const RadioVariantContext = createContext("default");
@@ -96,7 +96,7 @@ const Radio$1 = forwardRef(function Radio(props, ref) {
 		ref
 	});
 });
-const RadioDefault = forwardRef(function RadioDefault({ className, children, description: _description, icon: _icon, ...props }, ref) {
+const RadioDefault = forwardRef(function RadioDefault({ className, children, description: _description, icon: _icon, media: _media, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Radio, {
 		...props,
 		inputRef: ref,
@@ -117,7 +117,7 @@ const RadioDefault = forwardRef(function RadioDefault({ className, children, des
 		})] })
 	});
 });
-const RadioCard = forwardRef(function RadioCard({ className, children, description, icon, ...props }, ref) {
+const RadioCard = forwardRef(function RadioCard({ className, children, description, icon, media, ...props }, ref) {
 	const id = useId();
 	const titleId = `${id}-title`;
 	const descriptionId = `${id}-description`;
@@ -128,39 +128,49 @@ const RadioCard = forwardRef(function RadioCard({ className, children, descripti
 		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"
+		className: cn(cnAll(radioCardVariants(), media != null && "flex-col items-stretch"), className),
+		children: ({ isSelected }) => {
+			const row = /* @__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"
+					})
 				})
-			})
-		] })
+			] });
+			return media == null ? row : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "radio-media",
+				className: "block w-full min-w-0",
+				children: media
+			}), /* @__PURE__ */ jsx("span", {
+				className: "flex w-full items-start gap-3",
+				children: row
+			})] });
+		}
 	});
 });
 //#endregion

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 { 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":"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"}
+{"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 {\n  selectionCardVariants,\n  selectionLabelVariants,\n  selectionRingVariants,\n} 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    /**\n     * `card` lays the choices out as a grid; add `sm:grid-cols-2` and the like.\n     * `framed` keeps ordinary radios and draws one bordered frame around the row.\n     */\n    variant: {\n      default: \"flex flex-col gap-2\",\n      card: \"grid gap-3\",\n      framed: [\n        \"inline-flex flex-col gap-2 px-2 py-0.5\",\n        \"rounded-control border-(length:--border-width) border-border bg-surface\",\n        \"data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:items-center data-[orientation=horizontal]:gap-3\",\n        // Focus is the FRAME's own border going dark, not a ring on the dot: the\n        // approved style. :has() reads React Aria's data-focus-visible off the\n        // radio's label. The dot's own ring is switched off in this variant, and\n        // forced colours (which override a border colour) get an outline on the frame.\n        \"has-[[data-focus-visible]]:border-foreground\",\n        \"[&_[data-slot=radio-dot]]:outline-hidden!\",\n        \"forced-colors:has-[[data-focus-visible]]:outline-solid\",\n        \"forced-colors:has-[[data-focus-visible]]:outline-(length:--focus-ring-width)\",\n        \"forced-colors:has-[[data-focus-visible]]:outline-offset-(--focus-ring-offset)\",\n        \"motion-safe:transition-[border-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n      ],\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 = selectionCardVariants;\n\nconst radioCardDotVariants = cva([...radioMark, \"mt-0.5\"]);\n\n/** Which look the group's radios take. */\nexport type RadioGroupVariant = \"default\" | \"card\" | \"framed\";\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. `framed` draws a single bordered\n   * frame around ordinary radios (laid out by `orientation`); its focus is the\n   * frame's border turning dark.\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  /**\n   * Content above the title, edge to edge in the card: a thumbnail, a preview.\n   * Card variant only. With it the card stacks (media, then the icon, title and\n   * dot row). Give an `<img>` its own `alt`, or `alt=\"\"` when the title says it\n   * all; the slot adds no name of its own.\n   */\n  media?: 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, media: _media, ...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, media, ...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(cnAll(radioCardVariants(), media != null && \"flex-col items-stretch\"), className)}\n    >\n      {({ isSelected }) => {\n        const row = (\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\n                  id={descriptionId}\n                  data-slot=\"radio-description\"\n                  className=\"text-text-secondary\"\n                >\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        return media == null ? (\n          row\n        ) : (\n          <>\n            <span data-slot=\"radio-media\" className=\"block w-full min-w-0\">\n              {media}\n            </span>\n            <span className=\"flex w-full items-start gap-3\">{row}</span>\n          </>\n        );\n      }}\n    </AriaRadio>\n  );\n});\n"],"mappings":"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"}

package/dist/rich-text-editor/rich-text-editor.js

@@ -2,9 +2,9 @@
 import { cn } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "../lib/motion.js";
 import { Button } from "../button/button.js";
-import { Tooltip, TooltipTrigger } from "../tooltip/tooltip.js";
 import { Label } from "../label/label.js";
 import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { Tooltip, TooltipTrigger } from "../tooltip/tooltip.js";
 import { isSafeUrl, normalizeUrl } from "./rich-text-html.js";
 import { $isDocumentEmpty, $readFormats, NO_FORMATS, applyLink, beginLink, createRichTextEditor, loadHtml, loadMarkdown, readValue, setBlock, syncDividers, toggleMark } from "./rich-text-engine.js";
 import { BackIcon, BoldIcon, CheckIcon, CodeBlockIcon, CodeIcon, DividerIcon, Heading1Icon, Heading2Icon, Heading3Icon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, ParagraphIcon, QuoteIcon, StrikeIcon, UnderlineIcon, UnlinkIcon } from "./rich-text-icons.js";

package/dist/scroll-area/scroll-area.d.ts

@@ -32,7 +32,7 @@ export declare const scrollAreaRootVariants: (props?: ({
   framed?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const scrollAreaVariants: (props?: ({
-  orientation?: "vertical" | "horizontal" | "both" | null | undefined;
+  orientation?: "both" | "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A scrolling region.