@verdify/ui 0.1.0

package/dist/components/progress/progress.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import {
+  progressFillVariants,
+  progressRootClass,
+  progressHeaderClass,
+  progressTrackClass,
+  progressLabelClass,
+  progressValueTextClass,
+  progressDescriptionClass,
+  progressErrorClass,
+  PROGRESS_INDETERMINATE_KEYFRAME
+} from "./progress.variants";
+const PROGRESS_INDETERMINATE_CSS = `@keyframes ${PROGRESS_INDETERMINATE_KEYFRAME}{from{inset-inline-start:-40%}to{inset-inline-start:100%}}`;
+const Progress = React.forwardRef(
+  function Progress2({
+    className,
+    label,
+    "aria-label": ariaLabel,
+    value,
+    min = 0,
+    max = 100,
+    indeterminate = false,
+    valueText,
+    description,
+    error,
+    ...props
+  }, ref) {
+    const labelId = React.useId();
+    const valueTextId = React.useId();
+    const descriptionId = React.useId();
+    const errorId = React.useId();
+    const hasVisibleLabel = label != null && label !== false;
+    const invalid = error != null && error !== false;
+    const hasValueText = !indeterminate && valueText != null && valueText !== false;
+    const hasDescription = description != null && description !== false;
+    const clampedPct = !indeterminate && value != null && max > min ? Math.min(100, Math.max(0, (value - min) / (max - min) * 100)) : 0;
+    const describedBy = [hasDescription ? descriptionId : null, invalid ? errorId : null].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(progressRootClass, className),
+        ...props,
+        children: [
+          (hasVisibleLabel || hasValueText) && /* @__PURE__ */ jsxs("div", { className: progressHeaderClass, children: [
+            hasVisibleLabel ? /* @__PURE__ */ jsx("span", { id: labelId, className: progressLabelClass, children: label }) : null,
+            hasValueText ? /* @__PURE__ */ jsx("span", { id: valueTextId, className: progressValueTextClass, children: valueText }) : null
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-testid": "progress-track",
+              role: "progressbar",
+              "aria-live": invalid ? "assertive" : "polite",
+              "aria-labelledby": hasVisibleLabel ? labelId : void 0,
+              "aria-label": hasVisibleLabel ? void 0 : ariaLabel,
+              "aria-describedby": describedBy,
+              "aria-invalid": invalid || void 0,
+              "aria-valuenow": indeterminate ? void 0 : value,
+              "aria-valuemin": indeterminate ? void 0 : min,
+              "aria-valuemax": indeterminate ? void 0 : max,
+              "aria-valuetext": hasValueText && typeof valueText === "string" ? valueText : void 0,
+              className: progressTrackClass,
+              children: [
+                indeterminate ? /* @__PURE__ */ jsx("style", { children: PROGRESS_INDETERMINATE_CSS }) : null,
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-testid": "progress-fill",
+                    "aria-hidden": "true",
+                    className: progressFillVariants({ indeterminate }),
+                    style: indeterminate ? void 0 : { inlineSize: `${clampedPct}%` }
+                  }
+                )
+              ]
+            }
+          ),
+          hasDescription ? /* @__PURE__ */ jsx("span", { id: descriptionId, className: progressDescriptionClass, children: description }) : null,
+          invalid ? /* @__PURE__ */ jsx("span", { id: errorId, className: progressErrorClass, children: error }) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  Progress
+};
+//# sourceMappingURL=progress.js.map

package/dist/components/progress/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/progress/progress.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  progressFillVariants,\n  progressRootClass,\n  progressHeaderClass,\n  progressTrackClass,\n  progressLabelClass,\n  progressValueTextClass,\n  progressDescriptionClass,\n  progressErrorClass,\n  PROGRESS_INDETERMINATE_KEYFRAME,\n} from \"./progress.variants\";\n\n// The indeterminate indicator's TRAVEL keyframe (spec §3/§4): a narrow indicator slides\n// along the track's INLINE axis from before the inline-start edge (-40%, its own width) to\n// past the inline-end edge (100%), then loops — a moving indicator that travels the track,\n// not an in-place fade. Travel is on the LOGICAL `inset-inline-start`, so it mirrors under\n// dir=\"rtl\" with no extra rule (G-U6). This is pure geometry and binds NO design token (the\n// ambient duration + verdify easing are bound on the fill className, the §5 binding site),\n// so it lives here as a component-scoped <style> rather than in the auto-generated tokens\n// preset or in the .variants.ts binding file. The track's `overflow-hidden` clips the\n// indicator while it sits past either edge.\nconst PROGRESS_INDETERMINATE_CSS = `@keyframes ${PROGRESS_INDETERMINATE_KEYFRAME}{from{inset-inline-start:-40%}to{inset-inline-start:100%}}`;\n\nexport interface ProgressProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"aria-label\"> {\n  /**\n   * The text naming the task, bound to the bar (spec §2/§7). When present it is rendered\n   * as visible text AND becomes the accessible name via `aria-labelledby`. Progress is\n   * never unlabeled: provide EITHER a visible `label` or an `aria-label`.\n   */\n  label?: React.ReactNode;\n  /**\n   * The accessible name when no visible {@link label} fits (spec §7). State the task\n   * (\"Uploading your file.\"). Used only when there is no visible label — the bar is never\n   * nameless to assistive technology.\n   */\n  \"aria-label\"?: string;\n  /**\n   * The current progress value (spec §4/§7). Sets `aria-valuenow` (the raw value) and the\n   * determinate fill length (clamped to {@link min}..{@link max}). Omit it — or set\n   * {@link indeterminate} — when the size of the work is genuinely unknown; do not fake a\n   * number.\n   */\n  value?: number;\n  /** Lower bound of the range (spec §7). Default `0`. */\n  min?: number;\n  /** Upper bound of the range (spec §7). Default `100`. */\n  max?: number;\n  /**\n   * Whether the work is running but its size is unknown (spec §3/§4). A moving indicator\n   * travels the track and NO value is claimed: `aria-valuenow` and the visible\n   * `valueText` are both suppressed. Switch back to a determinate `value` the moment a\n   * real measure is known.\n   */\n  indeterminate?: boolean;\n  /**\n   * An optional plain progress readout next to the bar (spec §2/§7) — \"40%\" or\n   * \"Step 2 of 4\". Determinate only: it is rendered AND exposed as `aria-valuetext` so a\n   * bare number is never misleading. Ignored when {@link indeterminate}, where no honest\n   * number exists.\n   */\n  valueText?: React.ReactNode;\n  /**\n   * One line clarifying what is running (spec §2), written as a statement ending with a\n   * period. Wired to the bar via `aria-describedby`.\n   */\n  description?: React.ReactNode;\n  /**\n   * The task failed before completing (spec §4/§7). Renders the message beside the bar in\n   * the critical status color, sets `aria-invalid=\"true\"` and the critical track edge,\n   * escalates the live region to assertive, and points `aria-describedby` at the error.\n   * State what failed and the next step, without blaming the reader.\n   */\n  error?: React.ReactNode;\n}\n\n/**\n * Progress reports how far a task has advanced so the reader knows the system is working\n * and roughly how long is left (spec §1). Use the `value` (determinate) form when the work\n * is measurable — a known percentage or a step count — and the `indeterminate` form only\n * when the size of the work is genuinely unknown; an honest number beats a guessed one.\n *\n * It is a status OUTPUT, not a control: it takes no focus, binds no keys, and is never a\n * tab stop (spec §4/§6). The bar carries `role=\"progressbar\"` with `aria-valuenow`/`min`/\n * `max` (and `aria-valuetext` for a plain readout); value changes are announced through a\n * polite live region so a screen-reader user hears progress without focus moving (spec\n * §7). A blocking error escalates the live region to assertive and sets `aria-invalid`.\n *\n * The fill is a plain control affordance: neutrals carry the track and the fill takes the\n * primary ACTION accent, never the verified status color, and never animates on the\n * verified check's only theatre duration — a finished bar means the task ran, not that\n * anything is verified (brand != state, spec §3/§5/§8).\n */\nexport const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  function Progress(\n    {\n      className,\n      label,\n      \"aria-label\": ariaLabel,\n      value,\n      min = 0,\n      max = 100,\n      indeterminate = false,\n      valueText,\n      description,\n      error,\n      ...props\n    },\n    ref,\n  ) {\n    const labelId = React.useId();\n    const valueTextId = React.useId();\n    const descriptionId = React.useId();\n    const errorId = React.useId();\n\n    const hasVisibleLabel = label != null && label !== false;\n    const invalid = error != null && error !== false;\n    // value-text is a determinate readout only — an indeterminate bar claims no number\n    const hasValueText = !indeterminate && valueText != null && valueText !== false;\n    const hasDescription = description != null && description !== false;\n\n    // the determinate fill length is the value as a percentage of the range, clamped to\n    // 0..100% so an out-of-range value never overflows the track (spec §4). aria-valuenow\n    // still reports the raw value the caller passed.\n    const clampedPct =\n      !indeterminate && value != null && max > min\n        ? Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))\n        : 0;\n\n    // description + error are both read with the bar; space-join their ids, error last so\n    // the failure is heard with the field (spec §2/§7). Collapse to undefined when neither.\n    const describedBy =\n      [hasDescription ? descriptionId : null, invalid ? errorId : null]\n        .filter(Boolean)\n        .join(\" \") || undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(progressRootClass, className)}\n        {...props}\n      >\n        {(hasVisibleLabel || hasValueText) && (\n          <div className={progressHeaderClass}>\n            {hasVisibleLabel ? (\n              <span id={labelId} className={progressLabelClass}>\n                {label}\n              </span>\n            ) : null}\n            {hasValueText ? (\n              <span id={valueTextId} className={progressValueTextClass}>\n                {valueText}\n              </span>\n            ) : null}\n          </div>\n        )}\n\n        {/* role=\"progressbar\" lives on the track (spec §7). It is a polite live region so\n            value changes are announced without focus moving; a blocking error escalates to\n            assertive. Non-interactive: no tabIndex, no focus ring, no target-size floor\n            (spec §4/§6). Named by the visible label (aria-labelledby) or, when none, an\n            aria-label — never both, never nameless. */}\n        <div\n          data-testid=\"progress-track\"\n          role=\"progressbar\"\n          aria-live={invalid ? \"assertive\" : \"polite\"}\n          aria-labelledby={hasVisibleLabel ? labelId : undefined}\n          aria-label={hasVisibleLabel ? undefined : ariaLabel}\n          aria-describedby={describedBy}\n          aria-invalid={invalid || undefined}\n          // indeterminate omits aria-valuenow so assistive tech announces an unknown\n          // amount rather than a false number (spec §4/§7)\n          aria-valuenow={indeterminate ? undefined : value}\n          aria-valuemin={indeterminate ? undefined : min}\n          aria-valuemax={indeterminate ? undefined : max}\n          // a plain readout when a bare number would mislead (\"Step 2 of 4\")\n          aria-valuetext={hasValueText && typeof valueText === \"string\" ? valueText : undefined}\n          className={progressTrackClass}\n        >\n          {/* the fill / moving indicator. Determinate: the inline length is the value (a\n              data percentage, not a design token), set as an inline width. Indeterminate: a\n              narrow indicator (w-2/5) whose inset-inline-start is driven by the travel\n              keyframe below, so it MOVES across the track; no length is set inline. */}\n          {indeterminate ? (\n            <style>{PROGRESS_INDETERMINATE_CSS}</style>\n          ) : null}\n          <span\n            data-testid=\"progress-fill\"\n            aria-hidden=\"true\"\n            className={progressFillVariants({ indeterminate })}\n            style={indeterminate ? undefined : { inlineSize: `${clampedPct}%` }}\n          />\n        </div>\n\n        {hasDescription ? (\n          <span id={descriptionId} className={progressDescriptionClass}>\n            {description}\n          </span>\n        ) : null}\n\n        {invalid ? (\n          <span id={errorId} className={progressErrorClass}>\n            {error}\n          </span>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";AAkJU,SAEI,KAFJ;AAjJV,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAWP,MAAM,6BAA6B,cAAc,+BAA+B;AAwEzE,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASA,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,UAAU,MAAM,MAAM;AAC5B,UAAM,cAAc,MAAM,MAAM;AAChC,UAAM,gBAAgB,MAAM,MAAM;AAClC,UAAM,UAAU,MAAM,MAAM;AAE5B,UAAM,kBAAkB,SAAS,QAAQ,UAAU;AACnD,UAAM,UAAU,SAAS,QAAQ,UAAU;AAE3C,UAAM,eAAe,CAAC,iBAAiB,aAAa,QAAQ,cAAc;AAC1E,UAAM,iBAAiB,eAAe,QAAQ,gBAAgB;AAK9D,UAAM,aACJ,CAAC,iBAAiB,SAAS,QAAQ,MAAM,MACrC,KAAK,IAAI,KAAK,KAAK,IAAI,IAAK,QAAQ,QAAQ,MAAM,OAAQ,GAAG,CAAC,IAC9D;AAIN,UAAM,cACJ,CAAC,iBAAiB,gBAAgB,MAAM,UAAU,UAAU,IAAI,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAElB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QACzC,GAAG;AAAA,QAEF;AAAA,8BAAmB,iBACnB,qBAAC,SAAI,WAAW,qBACb;AAAA,8BACC,oBAAC,UAAK,IAAI,SAAS,WAAW,oBAC3B,iBACH,IACE;AAAA,YACH,eACC,oBAAC,UAAK,IAAI,aAAa,WAAW,wBAC/B,qBACH,IACE;AAAA,aACN;AAAA,UAQF;AAAA,YAAC;AAAA;AAAA,cACC,eAAY;AAAA,cACZ,MAAK;AAAA,cACL,aAAW,UAAU,cAAc;AAAA,cACnC,mBAAiB,kBAAkB,UAAU;AAAA,cAC7C,cAAY,kBAAkB,SAAY;AAAA,cAC1C,oBAAkB;AAAA,cAClB,gBAAc,WAAW;AAAA,cAGzB,iBAAe,gBAAgB,SAAY;AAAA,cAC3C,iBAAe,gBAAgB,SAAY;AAAA,cAC3C,iBAAe,gBAAgB,SAAY;AAAA,cAE3C,kBAAgB,gBAAgB,OAAO,cAAc,WAAW,YAAY;AAAA,cAC5E,WAAW;AAAA,cAMV;AAAA,gCACC,oBAAC,WAAO,sCAA2B,IACjC;AAAA,gBACJ;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAY;AAAA,oBACZ,eAAY;AAAA,oBACZ,WAAW,qBAAqB,EAAE,cAAc,CAAC;AAAA,oBACjD,OAAO,gBAAgB,SAAY,EAAE,YAAY,GAAG,UAAU,IAAI;AAAA;AAAA,gBACpE;AAAA;AAAA;AAAA,UACF;AAAA,UAEC,iBACC,oBAAC,UAAK,IAAI,eAAe,WAAW,0BACjC,uBACH,IACE;AAAA,UAEH,UACC,oBAAC,UAAK,IAAI,SAAS,WAAW,oBAC3B,iBACH,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;","names":["Progress"]}

package/dist/components/progress/progress.variants.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const progressTrackClass: string;
+export declare const PROGRESS_INDETERMINATE_KEYFRAME = "progress-indeterminate-travel";
+export declare const progressFillVariants: (props?: ({
+    indeterminate?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const progressRootClass = "flex w-full flex-col gap-(--space-2)";
+export declare const progressHeaderClass = "flex items-baseline justify-between gap-(--space-2)";
+export declare const progressLabelClass = "text-caption text-text-primary";
+export declare const progressValueTextClass = "text-caption text-text-secondary";
+export declare const progressDescriptionClass = "text-caption text-text-secondary";
+export declare const progressErrorClass = "text-caption text-status-critical-fg";
+export type ProgressFillVariantProps = VariantProps<typeof progressFillVariants>;
+//# sourceMappingURL=progress.variants.d.ts.map

package/dist/components/progress/progress.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.variants.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAmBlE,eAAO,MAAM,kBAAkB,QAGe,CAAC;AAU/C,eAAO,MAAM,+BAA+B,kCAAkC,CAAC;AAmB/E,eAAO,MAAM,oBAAoB;;8EAqB/B,CAAC;AAKH,eAAO,MAAM,iBAAiB,yCAAyC,CAAC;AAIxE,eAAO,MAAM,mBAAmB,wDAAwD,CAAC;AAIzF,eAAO,MAAM,kBAAkB,mCAAmC,CAAC;AAInE,eAAO,MAAM,sBAAsB,qCAAqC,CAAC;AAIzE,eAAO,MAAM,wBAAwB,qCAAqC,CAAC;AAM3E,eAAO,MAAM,kBAAkB,yCAAyC,CAAC;AAEzE,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/components/progress/progress.variants.js

@@ -0,0 +1,37 @@
+import { cva } from "class-variance-authority";
+const progressTrackClass = "relative block h-(--space-2) w-full overflow-hidden rounded-(--radius-full) bg-control-bg border border-control-border aria-invalid:border-status-critical-border";
+const PROGRESS_INDETERMINATE_KEYFRAME = "progress-indeterminate-travel";
+const progressFillVariants = cva("block h-full rounded-(--radius-full) bg-action-primary-bg", {
+  variants: {
+    // STRUCTURAL axis = spec §3: the determinate fill is a measured length; the
+    // indeterminate indicator is a looping travel. Neither recolors the fill (brand !=
+    // state) — they differ only by motion and how the length is set.
+    indeterminate: {
+      // a measured length set inline; the length transition runs on the fast duration
+      false: "transition-[inline-size] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant)",
+      // a narrow indicator that TRAVELS the inline axis on a continuous ambient loop;
+      // static under reduced motion. Absolutely positioned so it slides past both edges
+      // of the clipped track (overflow-hidden on the track hides the off-track portion).
+      true: "absolute w-2/5 [animation-name:progress-indeterminate-travel] [animation-iteration-count:infinite] [animation-duration:var(--motion-duration-ambient)] ease-(--motion-easing-verdify) motion-reduce:animate-none"
+    }
+  },
+  defaultVariants: { indeterminate: false }
+});
+const progressRootClass = "flex w-full flex-col gap-(--space-2)";
+const progressHeaderClass = "flex items-baseline justify-between gap-(--space-2)";
+const progressLabelClass = "text-caption text-text-primary";
+const progressValueTextClass = "text-caption text-text-secondary";
+const progressDescriptionClass = "text-caption text-text-secondary";
+const progressErrorClass = "text-caption text-status-critical-fg";
+export {
+  PROGRESS_INDETERMINATE_KEYFRAME,
+  progressDescriptionClass,
+  progressErrorClass,
+  progressFillVariants,
+  progressHeaderClass,
+  progressLabelClass,
+  progressRootClass,
+  progressTrackClass,
+  progressValueTextClass
+};
+//# sourceMappingURL=progress.variants.js.map

package/dist/components/progress/progress.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/progress/progress.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Progress reports how far a task has advanced — a status OUTPUT, not a control\n// (spec §1/§4/§6). It takes no focus, binds no keys, and renders no focus ring or\n// target-size floor: the value reaches assistive technology through role=\"progressbar\"\n// + aria-value* and a polite live region, never motion (spec §7).\n//\n// Brand != state (spec §3/§5/§8): the fill is a plain control affordance, NOT a\n// verification result. Neutrals carry the track and the fill takes the primary ACTION\n// accent (the visible action color on the surface) — NEVER --color-status-verified-*,\n// because verified green is the in-product verified status and is never a generic\n// progress affordance. There is no \"verified\" Progress; surfacing a verified outcome is\n// the job of VerifiedBadge, whose deliberate check animation is never borrowed here.\n\n// The track (spec §2/§5): the full-length rail that holds the fill, in the neutral\n// control surface with the control border, clipped so the fill's rounded end and the\n// traveling indeterminate indicator never bleed past the rail. Rounded on the full radius.\n// In the error state the rail edge takes the critical status border, driven by\n// aria-invalid on the bar so the failure is identified BY THE FIELD, in text (spec §4/§7).\nexport const progressTrackClass =\n  \"relative block h-(--space-2) w-full overflow-hidden \" +\n  \"rounded-(--radius-full) bg-control-bg border border-control-border \" +\n  \"aria-invalid:border-status-critical-border\";\n\n// The fill / indeterminate indicator keyframe (spec §3/§4): a TRAVELLING indicator. A\n// narrow indicator (`w-2/5`, set in the variant below) slides along the track's INLINE\n// axis from before the inline-start edge to past the inline-end edge, then loops. Travel\n// is driven on the LOGICAL `inset-inline-start` property (not a physical `translateX`), so\n// the indicator mirrors automatically under `dir=\"rtl\"` (G-U6 global-first). This keyframe\n// is pure geometry — it binds NO design token (the duration and easing tokens are bound on\n// the variant className, the single §5 binding site), so it is emitted from `progress.tsx`\n// as a component-scoped <style>, not from this binding file.\nexport const PROGRESS_INDETERMINATE_KEYFRAME = \"progress-indeterminate-travel\";\n\n// The fill (spec §2/§4/§5): the portion of the track that is done, in the primary action\n// accent, rounded on the full radius.\n//\n// DETERMINATE: its inline length is the value (set as an inline width in tsx — a data\n// percentage, not a design token). The length CHANGES on the FAST duration with verdify\n// easing, collapsing to the instant endpoint under reduced motion (spec §4/§5).\n//\n// INDETERMINATE: no measured length exists, so a moving indicator TRAVELS the track on a\n// continuous AMBIENT loop with verdify easing — restrained activity, never the 350ms\n// verified-check theatre duration (spec §3/§4/§8). The indicator is positioned `absolute`\n// on the track and its `inset-inline-start` is animated by the `progress-indeterminate-travel`\n// keyframe (defined in progress.tsx). The loop length is driven onto the ambient token via\n// the arbitrary `animation-duration` PROPERTY, the easing onto the verdify token, and the\n// loop is set to repeat — all keyword arbitrary properties or paren-shorthand tokens, not\n// raw values, so the token-binding gate does not flag them. Under prefers-reduced-motion the\n// travel is suppressed (`motion-reduce:animate-none`) and the busy state is carried by the\n// live region + name, not motion alone (spec §4/§7).\nexport const progressFillVariants = cva(\"block h-full rounded-(--radius-full) bg-action-primary-bg\", {\n  variants: {\n    // STRUCTURAL axis = spec §3: the determinate fill is a measured length; the\n    // indeterminate indicator is a looping travel. Neither recolors the fill (brand !=\n    // state) — they differ only by motion and how the length is set.\n    indeterminate: {\n      // a measured length set inline; the length transition runs on the fast duration\n      false:\n        \"transition-[inline-size] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n        \"motion-reduce:duration-(--motion-duration-instant)\",\n      // a narrow indicator that TRAVELS the inline axis on a continuous ambient loop;\n      // static under reduced motion. Absolutely positioned so it slides past both edges\n      // of the clipped track (overflow-hidden on the track hides the off-track portion).\n      true:\n        \"absolute w-2/5 [animation-name:progress-indeterminate-travel] \" +\n        \"[animation-iteration-count:infinite] \" +\n        \"[animation-duration:var(--motion-duration-ambient)] \" +\n        \"ease-(--motion-easing-verdify) motion-reduce:animate-none\",\n    },\n  },\n  defaultVariants: { indeterminate: false },\n});\n\n// The bar root (spec §2): a layout column stacking the label/value-text row, the track,\n// and the optional description/error message at the --space-2 gap. Non-interactive: no\n// focus ring, no tab stop, no target-size floor (spec §4/§6/§7).\nexport const progressRootClass = \"flex w-full flex-col gap-(--space-2)\";\n\n// The label + value-text header row (spec §2): the label sits inline-start, the optional\n// value-text inline-end, spread across the bar's width.\nexport const progressHeaderClass = \"flex items-baseline justify-between gap-(--space-2)\";\n\n// The label (spec §2/§5): the text naming the task, in the primary text color at the\n// caption type role.\nexport const progressLabelClass = \"text-caption text-text-primary\";\n\n// The optional value-text readout (spec §2/§5): a plain progress readout (\"40%\",\n// \"Step 2 of 4\") in the secondary text color at the caption role. Determinate only.\nexport const progressValueTextClass = \"text-caption text-text-secondary\";\n\n// The optional one-line description (spec §2/§5): a statement clarifying what is running,\n// in the secondary text color at the caption role.\nexport const progressDescriptionClass = \"text-caption text-text-secondary\";\n\n// The error message (spec §4/§5/§8): states what failed and the next step, naming the\n// failure without blaming the reader. The critical status FOREGROUND marks the text at the\n// caption role; the field edge (track) takes the critical border via aria-invalid. Error\n// is shown in TEXT, never by color alone.\nexport const progressErrorClass = \"text-caption text-status-critical-fg\";\n\nexport type ProgressFillVariantProps = VariantProps<typeof progressFillVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAmBhC,MAAM,qBACX;AAYK,MAAM,kCAAkC;AAmBxC,MAAM,uBAAuB,IAAI,6DAA6D;AAAA,EACnG,UAAU;AAAA;AAAA;AAAA;AAAA,IAIR,eAAe;AAAA;AAAA,MAEb,OACE;AAAA;AAAA;AAAA;AAAA,MAKF,MACE;AAAA,IAIJ;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,eAAe,MAAM;AAC1C,CAAC;AAKM,MAAM,oBAAoB;AAI1B,MAAM,sBAAsB;AAI5B,MAAM,qBAAqB;AAI3B,MAAM,yBAAyB;AAI/B,MAAM,2BAA2B;AAMjC,MAAM,qBAAqB;","names":[]}

package/dist/components/radio/index.d.ts

@@ -0,0 +1,3 @@
+export { RadioGroup, Radio, type RadioGroupProps, type RadioProps } from "./radio";
+export { radioControlVariants, radioDotVariants, radioTargetVariants, radioLabelVariants, radioDescriptionVariants, radioCardVariants, radioGroupVariants, type RadioGroupVariantProps, } from "./radio.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,eAAe,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACnF,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,kBAAkB,EAClB,wBAAwB,EACxB,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,sBAAsB,GAC5B,MAAM,kBAAkB,CAAC"}

package/dist/components/radio/index.js

@@ -0,0 +1,22 @@
+import { RadioGroup, Radio } from "./radio";
+import {
+  radioControlVariants,
+  radioDotVariants,
+  radioTargetVariants,
+  radioLabelVariants,
+  radioDescriptionVariants,
+  radioCardVariants,
+  radioGroupVariants
+} from "./radio.variants";
+export {
+  Radio,
+  RadioGroup,
+  radioCardVariants,
+  radioControlVariants,
+  radioDescriptionVariants,
+  radioDotVariants,
+  radioGroupVariants,
+  radioLabelVariants,
+  radioTargetVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/radio/index.ts"],"sourcesContent":["export { RadioGroup, Radio, type RadioGroupProps, type RadioProps } from \"./radio\";\nexport {\n  radioControlVariants,\n  radioDotVariants,\n  radioTargetVariants,\n  radioLabelVariants,\n  radioDescriptionVariants,\n  radioCardVariants,\n  radioGroupVariants,\n  type RadioGroupVariantProps,\n} from \"./radio.variants\";\n"],"mappings":"AAAA,SAAS,YAAY,aAAoD;AACzE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type RadioGroupVariantProps } from "./radio.variants";
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, RadioGroupVariantProps {
+    /** Shared `name` for the native radios in this group. */
+    name: string;
+    /** The group label — the question the options answer. */
+    label: React.ReactNode;
+    /** Uncontrolled initial selection. */
+    defaultValue?: string;
+    /** Controlled selection. */
+    value?: string;
+    /** Fires with the newly selected value. */
+    onValueChange?: (value: string) => void;
+}
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "name" | "value"> {
+    /** This option's value within the group. */
+    value: string;
+    /** Secondary text under the option label (With-description variant). */
+    description?: React.ReactNode;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=radio.d.ts.map

package/dist/components/radio/radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAQL,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAoB1B,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAC5D,sBAAsB;IACxB,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sCAAsC;IACtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,UAAU,wFAuFtB,CAAC;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACpF,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,KAAK,qFAuGjB,CAAC"}

package/dist/components/radio/radio.js

@@ -0,0 +1,183 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import {
+  radioControlVariants,
+  radioDotVariants,
+  radioTargetVariants,
+  radioLabelVariants,
+  radioDescriptionVariants,
+  radioCardVariants,
+  radioGroupVariants
+} from "./radio.variants";
+const RadioGroupContext = React.createContext(null);
+function useRadioGroup() {
+  const ctx = React.useContext(RadioGroupContext);
+  if (!ctx) throw new Error("<Radio> must be used inside <RadioGroup>");
+  return ctx;
+}
+const RadioGroup = React.forwardRef(
+  function RadioGroup2({
+    className,
+    name,
+    label,
+    defaultValue,
+    value: controlled,
+    onValueChange,
+    variant = "default",
+    children,
+    ...props
+  }, ref) {
+    const labelId = React.useId();
+    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+    const value = controlled ?? uncontrolled;
+    const items = React.useRef(
+      /* @__PURE__ */ new Map()
+    );
+    const select = React.useCallback(
+      (next) => {
+        if (controlled === void 0) setUncontrolled(next);
+        onValueChange?.(next);
+      },
+      [controlled, onValueChange]
+    );
+    const register = React.useCallback(
+      (v, el, disabled) => {
+        if (el) items.current.set(v, { el, disabled });
+        else items.current.delete(v);
+      },
+      []
+    );
+    const onArrow = React.useCallback(
+      (current, dir) => {
+        const entries = [...items.current.entries()];
+        const enabled = entries.filter(([, m]) => !m.disabled);
+        if (enabled.length === 0) return;
+        const idx = enabled.findIndex(([v]) => v === current);
+        const nextIdx = (idx + dir + enabled.length) % enabled.length;
+        const [nextValue, nextMeta] = enabled[nextIdx];
+        select(nextValue);
+        nextMeta.el?.focus();
+      },
+      [select]
+    );
+    const firstEnabledValue = React.useMemo(() => {
+      let first;
+      React.Children.forEach(children, (child) => {
+        if (first !== void 0) return;
+        if (!React.isValidElement(child)) return;
+        if (child.props.disabled) return;
+        first = child.props.value;
+      });
+      return first;
+    }, [children]);
+    const rovingValue = value ?? firstEnabledValue;
+    const ctx = React.useMemo(
+      () => ({ name, value, variant: variant ?? "default", select, register, onArrow, rovingValue }),
+      [name, value, variant, select, register, onArrow, rovingValue]
+    );
+    return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-labelledby": labelId,
+        className: cn(radioGroupVariants({ variant }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { id: labelId, className: "text-label text-text-primary", children: label }),
+          children
+        ]
+      }
+    ) });
+  }
+);
+const Radio = React.forwardRef(
+  function Radio2({ className, value, description, disabled = false, children, ...props }, ref) {
+    const ctx = useRadioGroup();
+    const inputRef = React.useRef(null);
+    const descId = React.useId();
+    const checked = ctx.value === value;
+    const tabbable = ctx.rovingValue === value;
+    React.useEffect(() => {
+      ctx.register(value, inputRef.current, disabled);
+      return () => ctx.register(value, null, disabled);
+    }, [ctx, value, disabled]);
+    const setRefs = (el) => {
+      inputRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    };
+    const onKeyDown = (e) => {
+      if (disabled) return;
+      if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+        e.preventDefault();
+        ctx.onArrow(value, 1);
+      } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+        e.preventDefault();
+        ctx.onArrow(value, -1);
+      } else if (e.key === " ") {
+        e.preventDefault();
+        if (!checked) ctx.select(value);
+      }
+    };
+    const row = /* @__PURE__ */ jsxs("label", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: setRefs,
+          type: "radio",
+          name: ctx.name,
+          value,
+          checked,
+          disabled,
+          "aria-checked": checked,
+          "aria-disabled": disabled || void 0,
+          "aria-describedby": description ? descId : void 0,
+          tabIndex: tabbable ? 0 : -1,
+          onChange: () => ctx.select(value),
+          onKeyDown,
+          className: cn(
+            "peer sr-only",
+            "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2"
+          ),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          "data-testid": `radio-control-${value}`,
+          className: cn(radioControlVariants()),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-testid": `radio-dot-${value}`,
+              className: cn(radioDotVariants({ selected: checked, disabled }))
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: cn(radioLabelVariants({ disabled })), children })
+    ] });
+    const option = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": `radio-target-${value}`,
+        className: cn(radioTargetVariants(), "flex-col", className),
+        children: [
+          row,
+          description ? /* @__PURE__ */ jsx("span", { id: descId, className: cn(radioDescriptionVariants()), children: description }) : null
+        ]
+      }
+    );
+    return ctx.variant === "card" ? /* @__PURE__ */ jsx("span", { "data-testid": `radio-card-${value}`, className: cn(radioCardVariants()), children: option }) : option;
+  }
+);
+export {
+  Radio,
+  RadioGroup
+};
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  radioControlVariants,\n  radioDotVariants,\n  radioTargetVariants,\n  radioLabelVariants,\n  radioDescriptionVariants,\n  radioCardVariants,\n  radioGroupVariants,\n  type RadioGroupVariantProps,\n} from \"./radio.variants\";\n\ninterface RadioGroupContextValue {\n  name: string;\n  value: string | undefined;\n  variant: NonNullable<RadioGroupVariantProps[\"variant\"]>;\n  select: (value: string) => void;\n  register: (value: string, el: HTMLInputElement | null, disabled: boolean) => void;\n  onArrow: (current: string, dir: 1 | -1) => void;\n  rovingValue: string | undefined; // which option owns tabindex=0\n}\n\nconst RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);\n\nfunction useRadioGroup(): RadioGroupContextValue {\n  const ctx = React.useContext(RadioGroupContext);\n  if (!ctx) throw new Error(\"<Radio> must be used inside <RadioGroup>\");\n  return ctx;\n}\n\nexport interface RadioGroupProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\">,\n    RadioGroupVariantProps {\n  /** Shared `name` for the native radios in this group. */\n  name: string;\n  /** The group label — the question the options answer. */\n  label: React.ReactNode;\n  /** Uncontrolled initial selection. */\n  defaultValue?: string;\n  /** Controlled selection. */\n  value?: string;\n  /** Fires with the newly selected value. */\n  onValueChange?: (value: string) => void;\n}\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(\n  function RadioGroup(\n    { className, name, label, defaultValue, value: controlled, onValueChange,\n      variant = \"default\", children, ...props },\n    ref,\n  ) {\n    const labelId = React.useId();\n    const [uncontrolled, setUncontrolled] = React.useState(defaultValue);\n    const value = controlled ?? uncontrolled;\n    // insertion-ordered registry of options: value → { el, disabled }\n    const items = React.useRef<Map<string, { el: HTMLInputElement | null; disabled: boolean }>>(\n      new Map(),\n    );\n\n    const select = React.useCallback(\n      (next: string) => {\n        if (controlled === undefined) setUncontrolled(next);\n        onValueChange?.(next);\n      },\n      [controlled, onValueChange],\n    );\n\n    const register = React.useCallback(\n      (v: string, el: HTMLInputElement | null, disabled: boolean) => {\n        if (el) items.current.set(v, { el, disabled });\n        else items.current.delete(v);\n      },\n      [],\n    );\n\n    // Arrow navigation: move to next/prev ENABLED option, wrapping, then select + focus.\n    // Focus is a post-commit concern, so it legitimately reads the ref Map for the\n    // live DOM node; only the render-time roving fallback (below) avoids that Map.\n    const onArrow = React.useCallback(\n      (current: string, dir: 1 | -1) => {\n        const entries = [...items.current.entries()];\n        const enabled = entries.filter(([, m]) => !m.disabled);\n        if (enabled.length === 0) return;\n        const idx = enabled.findIndex(([v]) => v === current);\n        const nextIdx = (idx + dir + enabled.length) % enabled.length;\n        const [nextValue, nextMeta] = enabled[nextIdx];\n        select(nextValue);\n        nextMeta.el?.focus();\n      },\n      [select],\n    );\n\n    // Roving tabindex owner: the selected option, else the first ENABLED option.\n    // Computed from React.Children DURING RENDER, not from the post-commit `items`\n    // ref Map — children register via useEffect AFTER the group commits, which would\n    // not trigger a recompute, leaving no tab stop when nothing is selected. Reading\n    // children at render time recomputes on every render and keeps the defaultValue\n    // path working (a real `value` always wins).\n    const firstEnabledValue = React.useMemo(() => {\n      let first: string | undefined;\n      React.Children.forEach(children, (child) => {\n        if (first !== undefined) return;\n        if (!React.isValidElement<RadioProps>(child)) return;\n        if (child.props.disabled) return;\n        first = child.props.value;\n      });\n      return first;\n    }, [children]);\n    const rovingValue = value ?? firstEnabledValue;\n\n    const ctx = React.useMemo<RadioGroupContextValue>(\n      () => ({ name, value, variant: variant ?? \"default\", select, register, onArrow, rovingValue }),\n      [name, value, variant, select, register, onArrow, rovingValue],\n    );\n\n    return (\n      <RadioGroupContext.Provider value={ctx}>\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          aria-labelledby={labelId}\n          className={cn(radioGroupVariants({ variant }), className)}\n          {...props}\n        >\n          <span id={labelId} className=\"text-label text-text-primary\">\n            {label}\n          </span>\n          {children}\n        </div>\n      </RadioGroupContext.Provider>\n    );\n  },\n);\n\nexport interface RadioProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"name\" | \"value\"> {\n  /** This option's value within the group. */\n  value: string;\n  /** Secondary text under the option label (With-description variant). */\n  description?: React.ReactNode;\n}\n\nexport const Radio = React.forwardRef<HTMLInputElement, RadioProps>(\n  function Radio({ className, value, description, disabled = false, children, ...props }, ref) {\n    const ctx = useRadioGroup();\n    const inputRef = React.useRef<HTMLInputElement | null>(null);\n    const descId = React.useId();\n    const checked = ctx.value === value;\n    const tabbable = ctx.rovingValue === value;\n\n    // Register this option with the group so roving + arrow nav can see it.\n    React.useEffect(() => {\n      ctx.register(value, inputRef.current, disabled);\n      return () => ctx.register(value, null, disabled);\n    }, [ctx, value, disabled]);\n\n    const setRefs = (el: HTMLInputElement | null) => {\n      inputRef.current = el;\n      if (typeof ref === \"function\") ref(el);\n      else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = el;\n    };\n\n    const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      if (e.key === \"ArrowDown\" || e.key === \"ArrowRight\") {\n        e.preventDefault();\n        ctx.onArrow(value, 1);\n      } else if (e.key === \"ArrowUp\" || e.key === \"ArrowLeft\") {\n        e.preventDefault();\n        ctx.onArrow(value, -1);\n      } else if (e.key === \" \") {\n        e.preventDefault();\n        if (!checked) ctx.select(value);\n      }\n    };\n\n    // The naming <label> wraps ONLY the input, the control, and the option-label\n    // text — never the description. A native <label> contributes its text content to\n    // the input's accessible name, so a nested description would pollute the name\n    // (spec §7: the name comes from the associated label). The description sits\n    // OUTSIDE the label and is linked via aria-describedby (mirrors Checkbox/Select).\n    const row = (\n      <label className=\"flex items-start gap-2\">\n        {/* native radio is the peer; visually hidden but in the a11y tree */}\n        <input\n          ref={setRefs}\n          type=\"radio\"\n          name={ctx.name}\n          value={value}\n          checked={checked}\n          disabled={disabled}\n          aria-checked={checked}\n          aria-disabled={disabled || undefined}\n          aria-describedby={description ? descId : undefined}\n          tabIndex={tabbable ? 0 : -1}\n          onChange={() => ctx.select(value)}\n          onKeyDown={onKeyDown}\n          className={cn(\n            \"peer sr-only\",\n            \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n          )}\n          {...props}\n        />\n        <span\n          aria-hidden=\"true\"\n          data-testid={`radio-control-${value}`}\n          className={cn(radioControlVariants())}\n        >\n          {/* the dot is a child of the control, not a sibling of the peer input,\n              so its visibility is driven by the explicit `selected` variant. */}\n          <span\n            data-testid={`radio-dot-${value}`}\n            className={cn(radioDotVariants({ selected: checked, disabled }))}\n          />\n        </span>\n        {/* disabled colour comes from the explicit cva variant (the label-text span\n            is not a sibling of the peer input, so peer-disabled cannot reach it). */}\n        <span className={cn(radioLabelVariants({ disabled }))}>{children}</span>\n      </label>\n    );\n\n    // The option container the test queries: it carries the target-size floor once\n    // and stacks the naming row above an optional description.\n    const option = (\n      <div\n        data-testid={`radio-target-${value}`}\n        className={cn(radioTargetVariants(), \"flex-col\", className)}\n      >\n        {row}\n        {description ? (\n          <span id={descId} className={cn(radioDescriptionVariants())}>\n            {description}\n          </span>\n        ) : null}\n      </div>\n    );\n\n    return ctx.variant === \"card\" ? (\n      <span data-testid={`radio-card-${value}`} className={cn(radioCardVariants())}>\n        {option}\n      </span>\n    ) : (\n      option\n    );\n  },\n);\n"],"mappings":"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","names":["RadioGroup","Radio"]}

package/dist/components/radio/radio.variants.d.ts

@@ -0,0 +1,17 @@
+import { type VariantProps } from "class-variance-authority";
+export declare const radioControlVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const radioDotVariants: (props?: ({
+    selected?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const radioTargetVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const radioLabelVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const radioDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const radioCardVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const radioGroupVariants: (props?: ({
+    variant?: "default" | "with-description" | "card" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type RadioGroupVariantProps = VariantProps<typeof radioGroupVariants>;
+//# sourceMappingURL=radio.variants.d.ts.map

package/dist/components/radio/radio.variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.variants.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAOlE,eAAO,MAAM,oBAAoB,oFAS/B,CAAC;AAWH,eAAO,MAAM,gBAAgB;;;8EAa5B,CAAC;AAGF,eAAO,MAAM,mBAAmB,oFAG9B,CAAC;AAMH,eAAO,MAAM,kBAAkB;;8EAK7B,CAAC;AACH,eAAO,MAAM,wBAAwB,oFAA4C,CAAC;AAGlF,eAAO,MAAM,iBAAiB,oFAG5B,CAAC;AAGH,eAAO,MAAM,kBAAkB;;8EAS7B,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/radio/radio.variants.js

@@ -0,0 +1,60 @@
+import { cva } from "class-variance-authority";
+const radioControlVariants = cva([
+  "relative inline-flex shrink-0 items-center justify-center",
+  "h-(--size-icon-sm) w-(--size-icon-sm) rounded-(--radius-full)",
+  "bg-control-bg border border-control-border",
+  "transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)",
+  // selected: outer ring switches to the foreground colour
+  "peer-checked:border-control-fg",
+  // disabled: control border dims with the label
+  "peer-disabled:border-text-disabled"
+]);
+const radioDotVariants = cva(
+  [
+    "h-1.5 w-1.5 rounded-(--radius-full)",
+    "transition-transform duration-(--motion-duration-fast) ease-(--motion-easing-verdify)",
+    "motion-reduce:transition-none"
+  ],
+  {
+    variants: {
+      selected: { true: "scale-100", false: "scale-0" },
+      disabled: { true: "bg-text-disabled", false: "bg-control-fg" }
+    },
+    defaultVariants: { selected: false, disabled: false }
+  }
+);
+const radioTargetVariants = cva([
+  "flex items-start gap-2",
+  "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)"
+]);
+const radioLabelVariants = cva(["text-label text-text-primary select-none"], {
+  variants: {
+    disabled: { true: "text-text-disabled", false: "" }
+  },
+  defaultVariants: { disabled: false }
+});
+const radioDescriptionVariants = cva(["text-caption text-text-secondary"]);
+const radioCardVariants = cva([
+  "rounded-md border border-border-default p-3",
+  "hover:border-border-strong"
+]);
+const radioGroupVariants = cva(["flex flex-col gap-3"], {
+  variants: {
+    variant: {
+      default: "",
+      "with-description": "",
+      card: ""
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+export {
+  radioCardVariants,
+  radioControlVariants,
+  radioDescriptionVariants,
+  radioDotVariants,
+  radioGroupVariants,
+  radioLabelVariants,
+  radioTargetVariants
+};
+//# sourceMappingURL=radio.variants.js.map

package/dist/components/radio/radio.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/radio/radio.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// The native <input> is visually hidden but kept in the a11y tree; the styled\n// sibling `control` paints the ring and reacts via Tailwind peer-* state. The\n// control IS a direct sibling of the peer input, so peer-checked/peer-disabled\n// resolve here. (The dot is a CHILD of the control, so it cannot use peer-* —\n// it is driven by the `selected` cva variant instead; see radioDotVariants.)\nexport const radioControlVariants = cva([\n  \"relative inline-flex shrink-0 items-center justify-center\",\n  \"h-(--size-icon-sm) w-(--size-icon-sm) rounded-(--radius-full)\",\n  \"bg-control-bg border border-control-border\",\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n  // selected: outer ring switches to the foreground colour\n  \"peer-checked:border-control-fg\",\n  // disabled: control border dims with the label\n  \"peer-disabled:border-text-disabled\",\n]);\n\n// The filled inner dot — scales from 0 → 1 on select (functional motion, not\n// theatre). The dot is nested inside the control span, NOT a sibling of the peer\n// input, so peer-checked would never match; visibility is driven by the explicit\n// `selected` variant, which the option passes from the group's checked state.\n//\n// DEC-C / spec §5: a disabled control (the dot is the control's filled indicator)\n// renders in --color-text-disabled — the SAME token the label dims to. The dot is\n// not a sibling of the peer input, so the colour is driven by an explicit\n// `disabled` cva variant (mirroring radioLabelVariants); enabled keeps control-fg.\nexport const radioDotVariants = cva(\n  [\n    \"h-1.5 w-1.5 rounded-(--radius-full)\",\n    \"transition-transform duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:transition-none\",\n  ],\n  {\n    variants: {\n      selected: { true: \"scale-100\", false: \"scale-0\" },\n      disabled: { true: \"bg-text-disabled\", false: \"bg-control-fg\" },\n    },\n    defaultVariants: { selected: false, disabled: false },\n  },\n);\n\n// The hit-target wrapper around control + label — meets the target-size floor.\nexport const radioTargetVariants = cva([\n  \"flex items-start gap-2\",\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n]);\n\n// The option-label / description type roles. The label-text span is nested in a\n// wrapper (not a sibling of the peer input), so peer-disabled cannot reach it;\n// the disabled colour is driven by the explicit `disabled` variant the option\n// passes from its own prop (mirrors checkboxLabelVariants).\nexport const radioLabelVariants = cva([\"text-label text-text-primary select-none\"], {\n  variants: {\n    disabled: { true: \"text-text-disabled\", false: \"\" },\n  },\n  defaultVariants: { disabled: false },\n});\nexport const radioDescriptionVariants = cva([\"text-caption text-text-secondary\"]);\n\n// Card variant — bordered selectable surface; strengthens border on hover.\nexport const radioCardVariants = cva([\n  \"rounded-md border border-border-default p-3\",\n  \"hover:border-border-strong\",\n]);\n\n// The stacked-options group spacing.\nexport const radioGroupVariants = cva([\"flex flex-col gap-3\"], {\n  variants: {\n    variant: {\n      default: \"\",\n      \"with-description\": \"\",\n      card: \"\",\n    },\n  },\n  defaultVariants: { variant: \"default\" },\n});\n\nexport type RadioGroupVariantProps = VariantProps<typeof radioGroupVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAOhC,MAAM,uBAAuB,IAAI;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AACF,CAAC;AAWM,MAAM,mBAAmB;AAAA,EAC9B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,UAAU,EAAE,MAAM,aAAa,OAAO,UAAU;AAAA,MAChD,UAAU,EAAE,MAAM,oBAAoB,OAAO,gBAAgB;AAAA,IAC/D;AAAA,IACA,iBAAiB,EAAE,UAAU,OAAO,UAAU,MAAM;AAAA,EACtD;AACF;AAGO,MAAM,sBAAsB,IAAI;AAAA,EACrC;AAAA,EACA;AACF,CAAC;AAMM,MAAM,qBAAqB,IAAI,CAAC,0CAA0C,GAAG;AAAA,EAClF,UAAU;AAAA,IACR,UAAU,EAAE,MAAM,sBAAsB,OAAO,GAAG;AAAA,EACpD;AAAA,EACA,iBAAiB,EAAE,UAAU,MAAM;AACrC,CAAC;AACM,MAAM,2BAA2B,IAAI,CAAC,kCAAkC,CAAC;AAGzE,MAAM,oBAAoB,IAAI;AAAA,EACnC;AAAA,EACA;AACF,CAAC;AAGM,MAAM,qBAAqB,IAAI,CAAC,qBAAqB,GAAG;AAAA,EAC7D,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,oBAAoB;AAAA,MACpB,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CAAC;","names":[]}

package/dist/components/select/index.d.ts

@@ -0,0 +1,3 @@
+export { Select, type SelectProps, type SelectOption } from "./select";
+export { triggerVariants, type TriggerVariantProps, } from "./select.variants";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EACL,eAAe,EACf,KAAK,mBAAmB,GACzB,MAAM,mBAAmB,CAAC"}

package/dist/components/select/index.js

@@ -0,0 +1,9 @@
+import { Select } from "./select";
+import {
+  triggerVariants
+} from "./select.variants";
+export {
+  Select,
+  triggerVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/select/index.ts"],"sourcesContent":["export { Select, type SelectProps, type SelectOption } from \"./select\";\nexport {\n  triggerVariants,\n  type TriggerVariantProps,\n} from \"./select.variants\";\n"],"mappings":"AAAA,SAAS,cAAmD;AAC5D;AAAA,EACE;AAAA,OAEK;","names":[]}

package/dist/components/select/select.d.ts

@@ -0,0 +1,27 @@
+import { type TriggerVariantProps } from "./select.variants";
+export interface SelectOption {
+    value: string;
+    label: string;
+    /** Optional group heading; consecutive options sharing a group are grouped. */
+    group?: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends TriggerVariantProps {
+    /** Visible, associated label — required; never replaced by the placeholder. */
+    label: string;
+    options: SelectOption[];
+    placeholder?: string;
+    /** Non-error helper text, wired via aria-describedby. */
+    description?: string;
+    /** Error text; sets aria-invalid + the strong border and wires aria-describedby. */
+    error?: string;
+    disabled?: boolean;
+    /** Options are resolving: sets aria-busy without blocking focus. */
+    loading?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+}
+export declare function Select({ label, options, placeholder, description, error, disabled, loading, value, defaultValue, onValueChange, size, width, className, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=select.d.ts.map

package/dist/components/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAWL,KAAK,mBAAmB,EACzB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAY,SAAQ,mBAAmB;IACtD,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6CD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,WAAW,EACX,WAAW,EACX,KAAK,EACL,QAAgB,EAChB,OAAe,EACf,KAAK,EACL,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,KAAK,EACL,SAAS,GACV,EAAE,WAAW,2CAuGb"}