@fairgarden/design 0.1.0-0.canary.0

package/forms/number-field/number-field.module.css

@@ -0,0 +1,442 @@
+/*
+ * Number Field (§10.4). CVA function `numberField`. Parts: `base` (the
+ * root), `group` (the field box), `decrement`, `input`, `increment`,
+ * `affix` (prefix or suffix unit), `scrub` (the scrub area on the label);
+ * `valueText` / `valueAmount` / `valueReadout` and `unitText` / `unitCaption`
+ * carry the type role per kind (a composed type role cannot be switched from
+ * a descendant selector); `edge` / `edgeLine` and `cellEdge` / `cellEdgeLine`
+ * draw the dotted disabled edges as true dots [D36, D68]. Colors are role
+ * variables only; local custom properties carry dimensions only.
+ *
+ * The stepper is confirmed [D174]: square −/+ cells butted to the input,
+ * divided by --border-size-1 rules, one --radius-1 outer radius [D41].
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.valueText {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.valueAmount {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.valueReadout {
+  composes: typeReadout from '../../utils/type.module.css';
+}
+
+.unitText {
+  composes: typeBodyUi typeMuted from '../../utils/type.module.css';
+}
+
+.unitCaption {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.edgeLine,
+.cellEdgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  /* The scrub area wraps the label; scrubbing is for fine pointers (§10.4). */
+  .scrub {
+    display: inline-flex;
+    align-self: start;
+  }
+
+  /*
+   * The group is the §10.1 field box: --size-px-8 tall, --radius-1 outside
+   * and 0 at the seams, --border-size-1 --role-rule; at least --size-px-12
+   * wide at every width.
+   */
+  .group {
+    /* Local dimensions. */
+    --number-field-edge: var(--border-size-1);
+    --number-field-radius: var(--radius-1);
+
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: var(--size-px-12);
+    block-size: var(--size-px-8);
+    border: var(--number-field-edge) solid var(--role-rule);
+    border-radius: var(--number-field-radius);
+    overflow: clip;
+    background: none;
+    color: var(--primary12);
+  }
+
+  /* The value: type-body-ui with data numerals, centered, so it never jitters while stepping. */
+  .input {
+    flex: 1 1 auto;
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    padding-block: 0;
+    padding-inline: var(--size-px-2-5);
+    border: 0;
+    border-radius: 0;
+    background: none;
+    color: inherit;
+    font-variant-numeric: var(--fgd-numerals-data);
+    text-align: center;
+    appearance: none;
+  }
+
+  .input::placeholder {
+    color: var(--role-muted);
+  }
+
+  /* Units in --role-muted, joined to the value by a no-break space [D32]. */
+  .affix {
+    flex: none;
+    align-self: center;
+    white-space: nowrap;
+  }
+
+  /*
+   * With a unit, the value meets the unit, so "12 kg" and "$ 50" read as
+   * one run: only the side that meets the unit loses its padding; the side
+   * facing the box edge or a step cell keeps the --size-px-2-5 inset (§10.1).
+   */
+  .affix + .input {
+    padding-inline-start: 0;
+    text-align: start;
+  }
+
+  .input:has(+ .affix) {
+    padding-inline-end: 0;
+    text-align: end;
+  }
+
+  .input + .affix {
+    padding-inline-end: var(--size-px-2-5);
+  }
+
+  .affix:has(+ .input) {
+    padding-inline-start: var(--size-px-2-5);
+  }
+
+  /* Step cells: --size-px-8 squares joined to the input; glyphs remove / add, inline tier [D166]. */
+  .decrement,
+  .increment {
+    position: relative;
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: var(--size-px-8);
+    margin: 0;
+    padding: 0;
+    border: 0 solid var(--role-rule);
+    border-radius: 0;
+    background: none;
+    color: var(--primary12);
+    appearance: none;
+  }
+
+  /* Disabled edge hosts, shown only while disabled. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--fgd-dot-fine) / 2);
+    inset-inline-start: calc(var(--fgd-dot-fine) / 2);
+    inline-size: calc(100% - var(--fgd-dot-fine));
+    block-size: calc(100% - var(--fgd-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--number-field-radius) - var(--fgd-dot-fine) / 2);
+  }
+
+  /* A step cell's dotted divider (or, on the readout, its dotted circle). */
+  .cellEdge {
+    display: none;
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--fgd-dot-fine);
+    block-size: 100%;
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  /* The divider sits where the cell's solid rule was: its last pixel column. */
+  .decrement .cellEdge {
+    inset-inline-end: 0;
+  }
+
+  .increment .cellEdge {
+    inset-inline-start: 0;
+  }
+
+  .cellEdgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine,
+    .cellEdgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .group,
+    .decrement,
+    .increment {
+      transition-property: border-color, background-color, color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+
+  /* From --lg-n-above the group hugs its content and never stretches (§10.4). */
+  @media (min-width: 1024px) {
+    .group {
+      inline-size: fit-content;
+    }
+
+    .input {
+      inline-size: auto;
+      min-inline-size: 6ch;
+      field-sizing: content;
+    }
+  }
+}
+
+@layer variants {
+  /* Stepper (default): the cells are divided from the input by --border-size-1 rules. */
+  .stepper .decrement {
+    border-inline-end-width: var(--border-size-1);
+  }
+
+  .stepper .increment {
+    border-inline-start-width: var(--border-size-1);
+  }
+
+  /*
+   * Amount: no steppers; the value in type-itemhead with lining tabular
+   * figures, from the start (after the box's --size-px-2-5 inset), or
+   * against its suffix.
+   */
+  .amount .input:not(:has(+ .affix)) {
+    text-align: start;
+  }
+
+  /*
+   * Readout: in-flow circular −/+ buttons around a large mono value with a
+   * unit caption, for dashboards. No field box.
+   */
+  .readout .group {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas:
+      'decrement value increment'
+      'decrement unit increment';
+    align-items: center;
+    column-gap: var(--size-px-3);
+    block-size: auto;
+    min-inline-size: 0;
+    border: 0;
+    border-radius: 0;
+    overflow: visible;
+  }
+
+  .readout .input {
+    grid-area: value;
+    inline-size: 100%;
+    padding: 0;
+    text-align: center;
+    field-sizing: fixed;
+  }
+
+  .readout .affix {
+    grid-area: unit;
+    justify-self: center;
+    padding: 0;
+  }
+
+  .readout .decrement,
+  .readout .increment {
+    --number-field-cell-edge: var(--border-size-2);
+
+    inline-size: var(--fgd-size-control-md);
+    block-size: var(--fgd-size-control-md);
+    border: var(--number-field-cell-edge) solid var(--primary12);
+    border-radius: var(--radius-round);
+  }
+
+  .readout .decrement {
+    grid-area: decrement;
+  }
+
+  .readout .increment {
+    grid-area: increment;
+  }
+
+  /* Every readout target reaches --fgd-size-hit [D43]. */
+  .readout .decrement::after,
+  .readout .increment::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
+    translate: -50% -50%;
+  }
+
+  .readout .cellEdge {
+    inset: calc(var(--fgd-dot-fine) / 2);
+    inline-size: calc(100% - var(--fgd-dot-fine));
+    block-size: calc(100% - var(--fgd-dot-fine));
+  }
+
+  /* Stack guard: below --xs-n-below the readout buttons stack under the value [D73]. */
+  @media (max-width: 359.98px) {
+    .readout .group {
+      grid-template-columns: 1fr 1fr;
+      grid-template-areas:
+        'value value'
+        'unit unit'
+        'decrement increment';
+      row-gap: var(--size-px-2);
+      justify-items: center;
+    }
+  }
+
+  /*
+   * Plate: the group's face is the nested white scope's --primary1 (§10.1).
+   * The group is also a Ground face, whose own classes share the base
+   * layer, so its display and edge are restated here.
+   */
+  .plate .group {
+    display: flex;
+    border: var(--number-field-edge) solid var(--role-rule);
+    background-color: var(--primary1);
+  }
+}
+
+@layer states {
+  /* Hover (not disabled): the 1 px edge steps to --primary12 at the same weight [D140]. */
+  .group:hover:not([data-disabled], [data-readonly], [data-invalid]) {
+    border-color: var(--primary12);
+  }
+
+  /*
+   * Step cells and readout buttons: the glyph swaps to the next tier's
+   * weight on hover and press (Icon weight="interactive", hosted by the
+   * cell; §10.1 icon states). The readout edge never changes [D181].
+   */
+
+  /* Focus: the ring on any focus of the input, drawn outside the group [D90]. */
+  .group[data-focused] {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  .input:focus-visible {
+    outline: none;
+  }
+
+  /* The readout has no box: the ring surrounds the value. */
+  .readout .group[data-focused] {
+    outline: none;
+  }
+
+  .readout .input:focus {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  /* Held step cell: the inverse pair [D84]. */
+  .decrement:active:not([data-disabled]),
+  .increment:active:not([data-disabled]) {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+
+  /* Error: the --border-size-2 edge in --role-status (the danger scale) [D141, D155]. */
+  .group[data-invalid] {
+    --number-field-edge: var(--border-size-2);
+
+    border-color: var(--role-status);
+  }
+
+  /* Disabled: dotted edges, --role-muted inks, no face; never dimmed [D16, D85]. */
+  .group[data-disabled] {
+    --number-field-edge: 0px;
+
+    padding: var(--border-size-1);
+    border-style: none;
+    background: none;
+    color: var(--role-muted);
+  }
+
+  .group[data-disabled] .edge {
+    display: block;
+  }
+
+  /* A step cell at its minimum or maximum (or in a disabled field): dotted edge, --role-muted glyph. */
+  .decrement[data-disabled],
+  .increment[data-disabled] {
+    border-style: none;
+    color: var(--role-muted);
+  }
+
+  .decrement[data-disabled] {
+    padding-inline-end: var(--border-size-1);
+  }
+
+  .increment[data-disabled] {
+    padding-inline-start: var(--border-size-1);
+  }
+
+  .decrement[data-disabled] .cellEdge,
+  .increment[data-disabled] .cellEdge {
+    display: block;
+  }
+
+  /* Read-only: the box is removed, a --border-size-1 bottom rule remains; steppers leave. */
+  .group[data-readonly] {
+    border-width: 0 0 var(--border-size-1);
+    border-radius: var(--radius-0);
+    background: none;
+  }
+
+  .group[data-readonly] .decrement,
+  .group[data-readonly] .increment {
+    display: none;
+  }
+}
+
+@layer print {
+  @media print {
+    /* The value and its unit print in the frame; step cells are interaction only. */
+    .decrement,
+    .increment {
+      display: none;
+    }
+
+    .input::placeholder {
+      font-size: 0;
+    }
+  }
+}

package/forms/radio/Radio.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { type VariantProps } from 'class-variance-authority';
+export declare const radio: (props?: ({
+    kind?: "standard" | "pill" | "swatch" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type RadioVariants = VariantProps<typeof radio>;
+/** The structural build of a Radio (§10.8). */
+export type RadioKind = NonNullable<RadioVariants['kind']>;
+/** The kind a RadioGroup passes to the radios inside it. A radio's own `kind` wins. */
+export declare const RadioKindContext: React.Context<RadioKind | undefined>;
+/**
+ * Props for Radio: Base UI Radio.Root props (on the circle) plus the kind,
+ * color axes and the row's content. `className` goes on the row.
+ */
+export type RadioProps<Value = unknown> = Omit<BaseRadio.Root.Props<Value>, 'className' | 'children'> & {
+    /**
+     * `standard` (default): circle plus label. `pill`: a stacked
+     * `--size-px-8` option pill. `swatch`: a color disc whose name is the
+     * accessible label (shown in print). Inside a RadioGroup the group's kind
+     * is the default.
+     */
+    kind?: RadioVariants['kind'];
+    /**
+     * Primary Radix scale: circle edge, labels, swatch rings and focus ring.
+     * Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: RadioVariants['primary'];
+    /**
+     * Secondary Radix scale: the checked fill, dot and edge through
+     * --role-select. Omitted, it inherits the scope. Never the danger scale.
+     */
+    secondary?: RadioVariants['secondary'];
+    /** Class for the row (the `base` part). */
+    className?: string;
+    /** The label, authored in title case up to about four words [D160]; a swatch's color name. */
+    children?: React.ReactNode;
+    /** Optional helper text under the label, in sentence case. */
+    description?: React.ReactNode;
+    /**
+     * `swatch` only: the disc's color or image, as a CSS `background` value.
+     * The color is content, not a role; its name is `children`.
+     */
+    swatch?: string;
+    /** Quiz feedback shown after the label: a RadioFeedback. */
+    feedback?: React.ReactNode;
+};
+/**
+ * A Base UI Radio inside its own label row, so the whole row is the hit
+ * target. Always inside a RadioGroup. Checked is a --role-select fill, an
+ * 8 px ● in --role-select-mark and a 3 px edge, never fill alone [D15].
+ */
+export declare function Radio<Value>(props: RadioProps<Value>): React.JSX.Element;
+/** Quiz feedback status (§10.8). */
+export type RadioFeedbackStatus = 'success' | 'danger';
+export declare const radioFeedback: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type RadioFeedbackVariants = VariantProps<typeof radioFeedback>;
+/** Props for RadioFeedback: `span` props, the status, the word and the color axes. */
+export type RadioFeedbackProps = Omit<React.ComponentPropsWithRef<'span'>, 'color'> & {
+    /** `success` for the correct answer, `danger` for a wrong pick. */
+    status: RadioFeedbackStatus;
+    /** Primary Radix scale: the word. Never defaulted [D133]. */
+    primary?: RadioFeedbackVariants['primary'];
+    /** Secondary Radix scale: the glyph. Omitted, the status scale (green or red). */
+    secondary?: RadioFeedbackVariants['secondary'];
+    /** The word; defaults to "Correct" or "Not quite". */
+    children?: React.ReactNode;
+};
+/**
+ * Quiz feedback for a Radio's `feedback` slot: the §1.5.4 success glyph
+ * (● with its check) or danger glyph (◆ with its ×) in --role-status,
+ * always paired with a word, so fill is never the only signal [D58].
+ */
+export declare function RadioFeedback(props: RadioFeedbackProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Radio.d.ts.map

package/forms/radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/forms/radio/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA4CjE,eAAO,MAAM,KAAK;;;;8EAchB,CAAA;AAEF,KAAK,aAAa,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAA;AAE/C,+CAA+C;AAC/C,MAAM,MAAM,SAAS,GAAG,WAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAA;AAE1D,uFAAuF;AACvF,eAAO,MAAM,gBAAgB,sCAAwD,CAAA;AAGrF;;;GAGG;AACH,MAAM,MAAM,UAAU,CAAC,KAAK,GAAG,OAAO,IAAI,IAAI,CAC5C,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAC3B,WAAW,GAAG,UAAU,CACzB,GAAG;IACF;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAA;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAA;IACtC,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAUD;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,qBAoDpD;AAED,oCAAoC;AACpC,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAMtD,eAAO,MAAM,aAAa;;;8EAKxB,CAAA;AAEF,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAO/D,sFAAsF;AACtF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG;IACpF,mEAAmE;IACnE,MAAM,EAAE,mBAAmB,CAAA;IAC3B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAA;IAC1C,kFAAkF;IAClF,SAAS,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAA;IAC9C,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAkBtD"}

package/forms/radio/Radio.js

@@ -0,0 +1,119 @@
+'use client';
+import * as React from 'react';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../../foundations/ground';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { overlayScope, useScopeAttributes } from '../../utils/scope';
+import { StatusGlyph, statusScales } from '../../utils/StatusGlyph';
+import styles from './radio.module.css';
+/*
+ * Radio (§10.8).
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: radio.module.css; CVA function `radio`.
+ * - Axes: `kind` → standard | pill | swatch (circle plus label; the option
+ *   pill; the color disc) [D155], classes `standard`, `pill`, `kindSwatch`
+ *   (prefixed: the `swatch` part owns the bare name); `primary`,
+ *   `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: kind standard (or the enclosing RadioGroup's kind); color
+ *   axes none [D133].
+ * - Color fallback: inherits the scope; its secondary drives the
+ *   --role-select aliases, never the danger scale. RadioFeedback computes
+ *   its secondary from its status (success green, danger red).
+ * - States: data-checked → --role-select fill, --role-select-mark ●,
+ *   circle edge --border-size-2-25 --role-select-edge; pill fill --role-select
+ *   with a --border-size-2 --role-select-edge edge and a leading ● (read
+ *   through :has()); swatch ring --border-size-2-25 outside a --size-px-1 gap
+ *   plus the mark; :hover (not disabled, not read-only) [D181] → an
+ *   unchecked circle's fill --role-soft-hover (--primary3 where soft fills
+ *   apply), a checked circle's or pill's fill --role-select-hover, edges
+ *   and swatch ring unchanged, an unchecked pill's edge --role-rule →
+ *   --primary12 [D140], the standard and swatch labels the bare-text
+ *   underline; :focus-visible → ring;
+ *   data-disabled → dotted edge, --role-muted; data-readonly → rest roles,
+ *   no hover; data-invalid → no change (the group message carries it).
+ * - Parts: base (the row, a <label>), circle (Radio.Root), indicator,
+ *   label, description, swatch, swatchMark, edge / edgeLine (the disabled
+ *   dotted edge), and feedback (its own function `radioFeedback`, with
+ *   feedbackGlyph and feedbackWord).
+ * - Scope: `swatchMark` is a nested overlay-face (`white`) Ground;
+ *   otherwise none.
+ * - Container: none of its own; the RadioGroup root is `radio-group`.
+ */
+export const radio = cva(styles.base, {
+    variants: {
+        kind: {
+            standard: styles.standard,
+            pill: styles.pill,
+            swatch: styles.kindSwatch,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'standard',
+    },
+});
+/** The kind a RadioGroup passes to the radios inside it. A radio's own `kind` wins. */
+export const RadioKindContext = React.createContext(undefined);
+RadioKindContext.displayName = 'RadioKindContext';
+function DisabledEdge() {
+    return (React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+        React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" })));
+}
+/**
+ * A Base UI Radio inside its own label row, so the whole row is the hit
+ * target. Always inside a RadioGroup. Checked is a --role-select fill, an
+ * 8 px ● in --role-select-mark and a 3 px edge, never fill alone [D15].
+ */
+export function Radio(props) {
+    const { kind, primary, secondary, className, children, description, swatch, feedback, ...rest } = props;
+    const scope = useScopeAttributes();
+    const groupKind = React.useContext(RadioKindContext);
+    const resolvedKind = kind ?? groupKind ?? 'standard';
+    const isSwatch = resolvedKind === 'swatch';
+    const isPill = resolvedKind === 'pill';
+    return (React.createElement("label", { ...scope, className: radio({ kind: resolvedKind, primary, secondary, className }) },
+        React.createElement(BaseRadio.Root, { ...rest, className: styles.circle },
+            isSwatch ? (React.createElement("span", { className: styles.swatch, style: swatch ? { background: swatch } : undefined, "aria-hidden": "true" })) : null,
+            React.createElement(BaseRadio.Indicator, { className: styles.indicator }, isSwatch ? (React.createElement(Ground, { kind: "face", preset: overlayScope.ground, render: React.createElement("span", null), className: styles.swatchMark })) : null),
+            isPill ? null : React.createElement(DisabledEdge, null)),
+        children == null ? null : React.createElement("span", { className: styles.label }, children),
+        description == null ? null : (React.createElement("span", { className: styles.description }, description)),
+        feedback,
+        isPill ? React.createElement(DisabledEdge, null) : null));
+}
+/*
+ * RadioFeedback: `status` selects the glyph, the default word and the
+ * computed secondary; like the Alert's status it carries no class.
+ */
+export const radioFeedback = cva(styles.feedback, {
+    variants: {
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+const feedbackWords = {
+    success: 'Correct',
+    danger: 'Not quite',
+};
+/**
+ * Quiz feedback for a Radio's `feedback` slot: the §1.5.4 success glyph
+ * (● with its check) or danger glyph (◆ with its ×) in --role-status,
+ * always paired with a word, so fill is never the only signal [D58].
+ */
+export function RadioFeedback(props) {
+    const { status, primary, secondary, className, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    return (React.createElement("span", { ...rest, ...scope, className: radioFeedback({
+            primary,
+            secondary: secondary ?? statusScales[status],
+            className,
+        }) },
+        React.createElement(StatusGlyph, { status: status, className: styles.feedbackGlyph }),
+        React.createElement("span", { className: styles.feedbackWord }, children ?? feedbackWords[status])));
+}
+//# sourceMappingURL=Radio.js.map

package/forms/radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/forms/radio/Radio.tsx"],"names":[],"mappings":"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"}

package/forms/radio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Radio';
+//# sourceMappingURL=index.d.ts.map

package/forms/radio/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}

package/forms/radio/index.js

@@ -0,0 +1,2 @@
+export * from './Radio';
+//# sourceMappingURL=index.js.map

package/forms/radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/forms/radio/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}