@seekalfred/primitives 0.7.4 → 0.8.0

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":";;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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.

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

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

package/dist/select/select.d.ts

@@ -30,7 +30,7 @@ export declare const selectTriggerVariants: (props?: ({
   size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const selectPopoverVariants: (props?: ({
-  reveal?: "fade" | "grow" | null | undefined;
+  reveal?: "grow" | "fade" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const selectItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 /**

package/dist/select/select.js

@@ -1,9 +1,9 @@
 "use client";
 import { cn, cnAll } from "../lib/cn.js";
 import { useIsomorphicLayoutEffect } from "../lib/motion.js";
-import { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from "../lib/field-surface.js";
 import { labelVariants } from "../label/label.js";
 import { RequiredMarker } from "../lib/required-marker.js";
+import { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from "../lib/field-surface.js";
 import { RollingValue } from "../lib/rolling-value.js";
 import { cva } from "class-variance-authority";
 import { forwardRef, useContext, useState } from "react";

package/dist/separator/separator.d.ts

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

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

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

package/dist/stat-card/stat-card.d.ts

@@ -51,7 +51,7 @@ export declare const statCardVariants: (props?: ({
 export declare const statCardHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const statCardLabelVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const statCardValueVariants: (props?: ({
-  tone?: "neutral" | "positive" | "negative" | "warning" | "attention" | null | undefined;
+  tone?: "neutral" | "warning" | "positive" | "negative" | "attention" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** An optional icon before the label. Decorative: the label names the figure. */
 export declare const statCardIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
@@ -62,7 +62,7 @@ export declare const statCardSubVariants: (props?: import("class-variance-author
  * box, and with it the card, keeps the height of the loaded copy.
  */
 export declare const statCardSkeletonVariants: (props?: ({
-  part?: "label" | "value" | "sub" | null | undefined;
+  part?: "label" | "sub" | "value" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type StatCardTone = "neutral" | "positive" | "negative" | "warning" | "attention";
 /** Which way is good for this figure: up (`normal`), down (`inverse`), or neither (`neutral`). */