@reddb-io/ui-kit 0.3.4 → 0.3.6

package/vendor/ds/kits/base/src/progress.behavior.ts

@@ -0,0 +1,37 @@
+/** A finite, ordered range shared by every value-based feedback capability. */
+export interface NormalizedRange {
+  min: number;
+  max: number;
+  value: number;
+  /** Current position in the range, from zero through one hundred. */
+  percent: number;
+}
+
+/** True only when a progress value can be announced as determinate. */
+export function isDeterminate(value: number | null | undefined): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+/**
+ * Make native range input safe for rendering and accessibility attributes.
+ * A reversed or collapsed range becomes one unit wide; a value is clamped.
+ */
+export function normalizeRange(value: number, min = 0, max = 100): NormalizedRange {
+  const safeMin = Number.isFinite(min) ? min : 0;
+  const candidateMax = Number.isFinite(max) ? max : safeMin + 100;
+  const safeMax = candidateMax > safeMin ? candidateMax : safeMin + 1;
+  const candidateValue = Number.isFinite(value) ? value : safeMin;
+  const safeValue = Math.min(safeMax, Math.max(safeMin, candidateValue));
+
+  return {
+    min: safeMin,
+    max: safeMax,
+    value: safeValue,
+    percent: ((safeValue - safeMin) / (safeMax - safeMin)) * 100,
+  };
+}
+
+/** The default audible and visible rendering of a normalized progress value. */
+export function formatPercent(range: NormalizedRange): string {
+  return `${Math.round(range.percent)}%`;
+}

package/vendor/ds/kits/base/src/progress.variants.ts

@@ -0,0 +1,31 @@
+import { tv, type VariantProps } from "tailwind-variants";
+import { MEASURE_TONE_FILL } from "./meter.variants";
+
+export const progress = tv({
+  slots: {
+    root: "w-full",
+    summary: "mb-[var(--reddb-spatial-gap-sm)] flex items-center justify-between gap-[var(--reddb-spatial-gap-md)]",
+    label: "text-sm text-foreground",
+    value: "text-sm font-medium text-foreground",
+    track:
+      "h-[var(--reddb-spatial-gap-md)] w-full overflow-hidden rounded-full bg-muted",
+    indicator: "h-full rounded-full transition-[width] motion-reduce:transition-none",
+  },
+  variants: {
+    // What the work's progress means (ADR 0026): ink unless a tone is given.
+    tone: {
+      neutral: { indicator: MEASURE_TONE_FILL.neutral },
+      info: { indicator: MEASURE_TONE_FILL.info },
+      success: { indicator: MEASURE_TONE_FILL.success },
+      warning: { indicator: MEASURE_TONE_FILL.warning },
+      danger: { indicator: MEASURE_TONE_FILL.danger },
+    },
+    indeterminate: {
+      true: { indicator: "w-1/3 motion-safe:animate-pulse" },
+      false: { indicator: "" },
+    },
+  },
+  defaultVariants: { tone: "neutral", indeterminate: false },
+});
+
+export type ProgressVariants = VariantProps<typeof progress>;

package/vendor/ds/kits/base/src/prose.variants.ts

@@ -0,0 +1,231 @@
+// Prose: rendered long-form HTML on the Theme's type roles (ADR 0025, 0027).
+//
+// Prose styles the elements a Markdown renderer emits — the full CommonMark
+// and GFM set — from the outside, through descendant variants. Every selector
+// is wrapped as `:where(&) <element>`, so a rule costs only its element's own
+// specificity: a Kit component placed inside a document (a CodeBlock, an
+// Alert, a Link) keeps every property its own classes set, while bare
+// rendered markup gets the document look.
+//
+// What each element reads as:
+//
+//   - h1 is the title role, h2 and h3 the heading role, h4 and h5 the body
+//     role at the Brand's bold and medium weights, h6 the eyebrow role. The
+//     Theme decides the sizes, so a Marketing island reads larger with no prop.
+//   - Running copy is the body role in ink; captions, footnotes and table
+//     captions the caption role in secondary ink (`ink-muted`, never `muted`).
+//   - Links are ink with a persistent underline (WCAG 1.4.1, ADR 0023) that
+//     thickens on hover, and draw the ink focus outline.
+//   - Lists keep visible markers at every depth (disc, circle, square;
+//     decimal, lower-alpha, lower-roman), and a GFM task item trades its
+//     marker for its checkbox.
+//
+// Vertical rhythm is Density's layout tier (ADR 0024): blocks sit
+// `layout-gap-sm` apart, a heading opens `layout-gap-lg` (h1, h2) or
+// `layout-gap-md` (h3–h6) above itself, and the component tier spaces list
+// items and the parts inside a block. Horizontal indents are typographic
+// (`em`), because a marker's room is a glyph width, not a Density step.
+//
+// The measure is the reading width, on DS-named container widths (ADR 0021):
+// `prose` (65ch of the current body size, the default), `content` or `full`.
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+
+const FLOW = [
+  // Blocks: one layout step apart, nothing above the first.
+  "[:where(&)>*+*]:mt-[var(--reddb-spatial-layout-gap-sm)]",
+  "[:where(&)>:first-child]:mt-0",
+  // Blocks nested in a container element keep the same rhythm inside it.
+  "[:where(&)_:is(blockquote,details,figure,[data-footnotes])>*+*]:mt-[var(--reddb-spatial-layout-gap-sm)]",
+  // List items and the paragraphs or lists inside one: the component tier.
+  "[:where(&)_li+li]:mt-[var(--reddb-spatial-gap-md)]",
+  "[:where(&)_li>*+*]:mt-[var(--reddb-spatial-gap-md)]",
+  "[:where(&)_dd>*+*]:mt-[var(--reddb-spatial-gap-md)]",
+];
+
+const HEADINGS = [
+  "[:where(&)_:is(h1,h2,h3,h4,h5)]:text-foreground",
+  "[:where(&)_:is(h1,h2,h3,h4,h5,h6)]:text-balance",
+  "[:where(&)_h1]:text-title",
+  "[:where(&)_h2]:text-heading",
+  "[:where(&)_h3]:text-heading",
+  "[:where(&)_h4]:text-body",
+  "[:where(&)_h4]:font-bold",
+  "[:where(&)_h5]:text-body",
+  "[:where(&)_h5]:font-medium",
+  "[:where(&)_h6]:text-eyebrow",
+  "[:where(&)_h6]:uppercase",
+  "[:where(&)_h6]:text-ink-muted",
+  // A heading opens a section, so the space above it is the larger step;
+  // what it introduces follows close, at the component tier.
+  "[:where(&)_:is(h1,h2)]:mt-[var(--reddb-spatial-layout-gap-lg)]",
+  "[:where(&)_:is(h3,h4,h5,h6)]:mt-[var(--reddb-spatial-layout-gap-md)]",
+  "[:where(&)_:is(h1,h2,h3,h4,h5,h6)+*]:mt-[var(--reddb-spatial-gap-md)]",
+];
+
+const INLINE = [
+  // Links: ink, a persistent underline, a thicker one on hover, the ink focus.
+  "[:where(&)_a]:text-foreground",
+  "[:where(&)_a]:underline",
+  "[:where(&)_a]:decoration-current",
+  "[:where(&)_a]:underline-offset-[var(--reddb-spatial-gap-sm)]",
+  "[:where(&)_a:hover]:decoration-2",
+  "[:where(&)_a:focus-visible]:rounded-sm",
+  "[:where(&)_a:focus-visible]:outline-2",
+  "[:where(&)_a:focus-visible]:outline-offset-2",
+  "[:where(&)_a:focus-visible]:outline-focus",
+  "[:where(&)_:is(strong,b)]:font-bold",
+  "[:where(&)_:is(del,s)]:text-ink-muted",
+  "[:where(&)_abbr[title]]:underline",
+  "[:where(&)_abbr[title]]:decoration-dotted",
+  // Inline code and key caps: the mono family on a quiet surface, at the
+  // size of the copy around them.
+  "[:where(&)_code]:font-mono",
+  "[:where(&)_code]:rounded-sm",
+  "[:where(&)_code]:bg-muted",
+  "[:where(&)_code]:px-[0.3em]",
+  "[:where(&)_code]:py-[0.1em]",
+  "[:where(&)_kbd]:font-mono",
+  "[:where(&)_kbd]:rounded-sm",
+  "[:where(&)_kbd]:border",
+  "[:where(&)_kbd]:border-b-2",
+  "[:where(&)_kbd]:border-muted",
+  "[:where(&)_kbd]:px-[0.35em]",
+  "[:where(&)_kbd]:whitespace-nowrap",
+  // Highlight: the warning tint under ink, never the accent.
+  "[:where(&)_mark]:rounded-sm",
+  "[:where(&)_mark]:bg-feedback-warning-surface",
+  "[:where(&)_mark]:text-foreground",
+  "[:where(&)_mark]:px-[0.15em]",
+];
+
+const LISTS = [
+  "[:where(&)_ul]:ps-[1.5em]",
+  "[:where(&)_ol]:ps-[2em]",
+  "[:where(&)_ul]:list-disc",
+  "[:where(&)_ul_ul]:list-[circle]",
+  "[:where(&)_ul_ul_ul]:list-[square]",
+  "[:where(&)_ol]:list-decimal",
+  "[:where(&)_ol_ol]:list-[lower-alpha]",
+  "[:where(&)_ol_ol_ol]:list-[lower-roman]",
+  "[:where(&)_li::marker]:text-ink-muted",
+  // GFM task items: the checkbox is the marker. Checked is the Brand accent,
+  // as on every checked control (DESIGN.md).
+  "[:where(&)_li:has(>input[type=checkbox])]:list-none",
+  "[:where(&)_li>input[type=checkbox]]:me-[0.5em]",
+  "[:where(&)_li>input[type=checkbox]]:align-middle",
+  "[:where(&)_li>input[type=checkbox]]:accent-primary",
+  // Definition lists.
+  "[:where(&)_dt]:font-medium",
+  "[:where(&)_dd]:ps-[1.5em]",
+  "[:where(&)_dt+dd]:mt-[var(--reddb-spatial-gap-sm)]",
+  "[:where(&)_dd+dt]:mt-[var(--reddb-spatial-layout-gap-sm)]",
+];
+
+const BLOCKS = [
+  "[:where(&)_blockquote]:border-s-2",
+  "[:where(&)_blockquote]:border-ink-muted",
+  "[:where(&)_blockquote]:ps-[var(--reddb-spatial-inset-md)]",
+  "[:where(&)_blockquote]:text-ink-muted",
+  // Code blocks: a sunken, bordered panel that scrolls rather than widening
+  // the measure; the code inside it drops the inline treatment.
+  "[:where(&)_pre]:overflow-x-auto",
+  "[:where(&)_pre]:rounded-md",
+  "[:where(&)_pre]:border",
+  "[:where(&)_pre]:border-muted",
+  "[:where(&)_pre]:bg-elevation-sunken-surface",
+  "[:where(&)_pre]:p-[var(--reddb-spatial-inset-md)]",
+  "[:where(&)_pre]:font-mono",
+  "[:where(&)_pre]:text-caption",
+  "[:where(&)_pre]:text-elevation-sunken-foreground",
+  "[:where(&)_pre_code]:rounded-none",
+  "[:where(&)_pre_code]:bg-transparent",
+  "[:where(&)_pre_code]:p-0",
+  "[:where(&)_hr]:border-muted",
+  "[:where(&)_hr]:my-[var(--reddb-spatial-layout-gap-lg)]",
+  "[:where(&)_img]:max-w-full",
+  "[:where(&)_img]:h-auto",
+  "[:where(&)_img]:rounded-md",
+  "[:where(&)_figcaption]:mt-[var(--reddb-spatial-gap-md)]",
+  "[:where(&)_figcaption]:text-caption",
+  "[:where(&)_figcaption]:text-ink-muted",
+  // Disclosure: a quiet bordered box whose summary is the control.
+  "[:where(&)_details]:rounded-md",
+  "[:where(&)_details]:border",
+  "[:where(&)_details]:border-muted",
+  "[:where(&)_details]:px-[var(--reddb-spatial-inset-md)]",
+  "[:where(&)_details]:py-[var(--reddb-spatial-inset-sm)]",
+  "[:where(&)_summary]:cursor-pointer",
+  "[:where(&)_summary]:font-medium",
+  "[:where(&)_summary:focus-visible]:rounded-sm",
+  "[:where(&)_summary:focus-visible]:outline-2",
+  "[:where(&)_summary:focus-visible]:outline-offset-2",
+  "[:where(&)_summary:focus-visible]:outline-focus",
+  // GFM footnotes: the section a renderer appends, in the caption role.
+  "[:where(&)_[data-footnotes]]:mt-[var(--reddb-spatial-layout-gap-lg)]",
+  "[:where(&)_[data-footnotes]]:border-t",
+  "[:where(&)_[data-footnotes]]:border-muted",
+  "[:where(&)_[data-footnotes]]:pt-[var(--reddb-spatial-layout-gap-sm)]",
+  "[:where(&)_[data-footnotes]]:text-caption",
+  "[:where(&)_[data-footnotes]]:text-ink-muted",
+];
+
+const TABLES = [
+  "[:where(&)_table]:w-full",
+  "[:where(&)_table]:border-collapse",
+  "[:where(&)_caption]:pb-[var(--reddb-spatial-gap-md)]",
+  "[:where(&)_caption]:text-start",
+  "[:where(&)_caption]:text-caption",
+  "[:where(&)_caption]:text-ink-muted",
+  "[:where(&)_:is(th,td)]:px-[var(--reddb-spatial-inset-sm)]",
+  "[:where(&)_:is(th,td)]:py-[var(--reddb-spatial-gap-md)]",
+  "[:where(&)_:is(th,td)]:align-top",
+  "[:where(&)_th]:font-medium",
+  "[:where(&)_th]:border-b-2",
+  "[:where(&)_th]:border-muted",
+  "[:where(&)_td]:border-b",
+  "[:where(&)_td]:border-muted",
+  "[:where(&)_td]:tabular-nums",
+  // GFM column alignment arrives as `align`; a cell without one reads from
+  // the start edge, so a right-to-left document stays right.
+  "[:where(&)_:is(th,td):not([align])]:text-start",
+  "[:where(&)_[align=left]]:text-start",
+  "[:where(&)_[align=center]]:text-center",
+  "[:where(&)_[align=right]]:text-end",
+];
+
+const MEASURE = {
+  prose: "max-w-prose",
+  content: "max-w-content",
+  full: "max-w-none",
+} as const;
+
+export const prose = tv(
+  {
+    base: [
+      "block min-w-0 text-body text-foreground wrap-break-word",
+      ...FLOW,
+      ...HEADINGS,
+      ...INLINE,
+      ...LISTS,
+      ...BLOCKS,
+      ...TABLES,
+    ].join(" "),
+    variants: {
+      measure: MEASURE,
+      striped: {
+        true: "[:where(&)_tbody_tr:nth-child(even)]:bg-muted",
+        false: "",
+      },
+    },
+    defaultVariants: { measure: "prose", striped: false },
+  },
+  typeRoleMerge,
+);
+
+export type ProseVariants = VariantProps<typeof prose>;
+export type ProseMeasure = NonNullable<ProseVariants["measure"]>;
+export const PROSE_MEASURES = Object.keys(MEASURE) as readonly ProseMeasure[];
+/** The elements Prose may render as: a neutral block, or a document landmark. */
+export const PROSE_ELEMENTS = ["div", "article", "section"] as const;
+export type ProseElement = (typeof PROSE_ELEMENTS)[number];

package/vendor/ds/kits/base/src/quiet-control.variants.ts

@@ -0,0 +1,90 @@
+// The interaction-state contract every quiet control draws (wave 6A).
+//
+// A quiet control is anything a person can press that carries no fill and no
+// boundary of its own at rest: a ghost Button, an icon-only button, a close or
+// dismiss "×", a tab, an accordion trigger, a navigation item, a pager, a
+// carousel or deck dot, a sort header, a tree toggle. Before this recipe each
+// drew its own states, and about half of them changed nothing but the text
+// colour on hover. Now every one of them answers the pointer the same way:
+//
+// - rest: transparent, so it sits on whatever ground it lands on;
+// - hover: the quiet fill, `bg-foreground/8`. Tailwind 4 compiles `hover:`
+//   inside `@media (hover: hover)`, so a touch screen never keeps a sticky
+//   fill after a tap;
+// - pressed: the stronger quiet fill, `bg-foreground/12` — the touch screen's
+//   only feedback, so it must be stronger than hover, not equal to it. A
+//   trigger holding its popup open (`aria-haspopup` + `aria-expanded`) wears
+//   the open fill, `bg-foreground/10`;
+// - focus: the ink outline every control draws (ADR 0023), outside the control
+//   by default and inside it (`focus: "inset"`) where a scroll region would
+//   clip one drawn outside;
+// - disabled: half opacity and no pointer, Button's treatment;
+// - selected: the selection language (DESIGN.md, "Interactive states"): the
+//   selected surface `bg-foreground/10`, full-weight ink, and — where the
+//   component draws one — the 2px ink edge. A selected item does not lighten
+//   under the pointer.
+//
+// Button's ghost variant is this recipe. A component whose element is not a
+// Button wraps its own slot classes in it, `quietControl({ class: … })`, so the
+// slot only adds geometry and the states stay here. kit-lint's rule 8 checks
+// that every raw interactive element in a Kit does one or the other.
+
+import { tv, type VariantProps } from "tailwind-variants";
+import { typeRoleMerge } from "./type-roles";
+
+/** The quiet fill under the pointer. */
+export const QUIET_HOVER = "hover:bg-foreground/8";
+/** The stronger quiet fill while pressed: also the only feedback on touch. */
+export const QUIET_PRESSED = "active:bg-foreground/12";
+/** A trigger holding its popup open. */
+export const QUIET_OPEN = "[&[aria-haspopup][aria-expanded=true]]:bg-foreground/10";
+/** The ink focus outline (ADR 0023), drawn outside the control. */
+export const QUIET_FOCUS = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
+/** Button's disabled treatment, for a native `disabled` or `aria-disabled`. */
+export const QUIET_DISABLED =
+  "disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50";
+
+const INK = {
+  /** Secondary ink at rest, full ink under the pointer: a ghost Button, a close "×". */
+  muted: "text-ink-muted hover:text-foreground",
+  /** Full ink throughout: a menu trigger or a row whose label is the content. */
+  foreground: "text-foreground",
+  /** The caller's colour (a tone, the surrounding text). */
+  inherit: "",
+} as const;
+
+const FOCUS = {
+  /** The default: 2px outside the control, on the ground. */
+  offset: QUIET_FOCUS,
+  /** Inside the control, where a scroll region or a tight rail would clip it. */
+  inset: "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus",
+} as const;
+
+const SELECTED = {
+  /** Current, selected or pressed: the selected surface, which the pointer does not lighten. */
+  true: "bg-foreground/10 hover:bg-foreground/10 font-medium text-foreground hover:text-foreground",
+  false: "",
+} as const;
+
+export const quietControl = tv({
+  base: [
+    // No colour transition: a state lands at full contrast the moment it
+    // starts. Easing colours faded the focus ring in from the text colour, and
+    // made a Color Scheme switch repaint every control through intermediate
+    // colours that fail AA for 150ms.
+    "bg-transparent",
+    QUIET_HOVER,
+    QUIET_PRESSED,
+    QUIET_OPEN,
+    QUIET_DISABLED,
+  ].join(" "),
+  variants: { ink: INK, focus: FOCUS, selected: SELECTED },
+  defaultVariants: { ink: "muted", focus: "offset", selected: false },
+}, typeRoleMerge);
+
+export type QuietControlVariants = VariantProps<typeof quietControl>;
+export type QuietControlInk = NonNullable<QuietControlVariants["ink"]>;
+export type QuietControlFocus = NonNullable<QuietControlVariants["focus"]>;
+
+export const QUIET_CONTROL_INKS = Object.keys(INK) as readonly QuietControlInk[];
+export const QUIET_CONTROL_FOCUS = Object.keys(FOCUS) as readonly QuietControlFocus[];

package/vendor/ds/kits/base/src/radial-progress.variants.ts

@@ -0,0 +1,47 @@
+import { tv, type VariantProps } from "tailwind-variants";
+
+const SIZE = {
+  sm: {
+    root: "size-[calc(var(--reddb-spatial-control-height-sm)*2)]",
+    value: "text-xs",
+  },
+  md: {
+    root: "size-[calc(var(--reddb-spatial-control-height-md)*2)]",
+    value: "text-sm",
+  },
+  lg: {
+    root: "size-[calc(var(--reddb-spatial-control-height-lg)*2.4)]",
+    value: "text-base",
+  },
+} as const;
+
+export const radialProgress = tv({
+  slots: {
+    root: "relative inline-grid shrink-0 place-items-center text-foreground",
+    svg: "size-full -rotate-90",
+    track: "fill-none stroke-muted",
+    indicator:
+      "fill-none transition-[stroke-dashoffset] motion-reduce:transition-none",
+    value: "absolute inset-0 flex items-center justify-center font-medium tabular-nums",
+  },
+  variants: {
+    size: SIZE,
+    // What the progress means (ADR 0026): ink unless a tone is given, as Meter.
+    tone: {
+      neutral: { indicator: "stroke-foreground" },
+      info: { indicator: "stroke-feedback-info-foreground" },
+      success: { indicator: "stroke-feedback-success-foreground" },
+      warning: { indicator: "stroke-feedback-warning-foreground" },
+      danger: { indicator: "stroke-feedback-danger-foreground" },
+    },
+    indeterminate: {
+      true: { svg: "motion-safe:animate-spin", value: "sr-only" },
+      false: { svg: "", value: "" },
+    },
+  },
+  defaultVariants: { size: "md", tone: "neutral", indeterminate: false },
+});
+
+export type RadialProgressVariants = VariantProps<typeof radialProgress>;
+export type RadialProgressSize = NonNullable<RadialProgressVariants["size"]>;
+export const RADIAL_PROGRESS_SIZES = Object.keys(SIZE) as readonly RadialProgressSize[];

package/vendor/ds/kits/base/src/radio-group.variants.ts

@@ -0,0 +1,59 @@
+// RadioGroup's public option shape and token-only appearance seam.
+//
+// Each radio is drawn exactly as a Checkbox is (see checkbox.variants): the
+// native input is a control-height pointer target that draws nothing, and a
+// glyph-sized round box and dot after it follow its state through `peer-*`.
+// A disabled option dims its control and steps its label to secondary ink.
+
+import { tv, type VariantProps } from "tailwind-variants";
+import { checkbox, choiceBox } from "./checkbox.variants";
+import { fieldset } from "./fieldset.variants";
+
+export interface RadioGroupOption {
+  /** Native submitted value for this choice. */
+  value: string;
+  /** Caller-owned visible label. */
+  label: string;
+  /** Supporting text, including the reason an unavailable choice cannot be selected. */
+  description?: string;
+  /** Removes only this option from interaction and submission. */
+  disabled?: boolean;
+}
+
+const choice = checkbox();
+
+export const radioGroup = tv({
+  slots: {
+    root: fieldset().root(),
+    list: "grid gap-[var(--reddb-spatial-gap-sm)]",
+    option: [
+      "flex cursor-pointer items-center gap-[var(--reddb-spatial-gap-sm)] text-sm text-foreground",
+      "has-disabled:cursor-not-allowed has-disabled:text-ink-muted",
+    ].join(" "),
+    choice: choice.root(),
+    control: choice.control(),
+    box: [choiceBox, "rounded-full"].join(" "),
+    dot: [
+      "pointer-events-none invisible col-start-1 row-start-1 peer-checked:visible",
+      "size-[calc(var(--reddb-spatial-icon-size-md)*0.4)] rounded-full bg-on-primary",
+      "forced-colors:hidden",
+    ].join(" "),
+    content: "grid min-w-0 gap-[var(--reddb-spatial-gap-sm)]",
+    label: "",
+    description: "text-caption text-ink-muted",
+  },
+  variants: {
+    variant: {
+      list: {},
+      cards: {
+        root: "@container/radio-cards",
+        list: "grid-cols-1 @lg/radio-cards:grid-cols-2",
+        option: "items-start rounded-md border border-control-edge p-[var(--reddb-spatial-inset-md)] has-checked:bg-foreground/10 has-checked:border-foreground has-disabled:cursor-not-allowed has-disabled:opacity-50 hover:bg-foreground/8 has-checked:hover:bg-foreground/10 active:bg-foreground/12",
+        label: "text-body font-medium",
+      },
+    },
+  },
+  defaultVariants: { variant: "list" },
+});
+
+export type RadioGroupVariants = VariantProps<typeof radioGroup>;

package/vendor/ds/kits/base/src/rating.variants.ts

@@ -0,0 +1,22 @@
+// Rating's option shape and token-only appearance seam. The radios are visually
+// hidden, so the marks carry their state: focus, disabled, and the danger
+// foreground while the group has an error.
+import { tv, type VariantProps } from "tailwind-variants";
+
+export const rating = tv({
+  slots: {
+    root: "min-w-0",
+    list: "flex flex-wrap items-center gap-[var(--reddb-spatial-gap-sm)]",
+    option: "relative cursor-pointer text-foreground has-disabled:cursor-not-allowed",
+    control: "peer sr-only",
+    mark: [
+      "inline-flex h-[var(--reddb-spatial-control-height-sm)] min-w-[var(--reddb-spatial-control-height-sm)]",
+      "items-center justify-center text-foreground peer-aria-invalid:text-feedback-danger-foreground",
+      "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-focus",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+    ].join(" "),
+    output: "text-sm tabular-nums text-ink-muted",
+  },
+});
+
+export type RatingVariants = VariantProps<typeof rating>;

package/vendor/ds/kits/base/src/recipes.ts

@@ -0,0 +1,100 @@
+// Framework-independent visual recipes and their portable contracts.
+export * from "./accordion.variants";
+export * from "./alert-dialog.variants";
+export * from "./alert.variants";
+export * from "./aspect-ratio.variants";
+export * from "./avatar.variants";
+export * from "./badge.variants";
+export * from "./breadcrumbs.variants";
+export * from "./browser-mockup.variants";
+export * from "./button.variants";
+export * from "./calendar.variants";
+export * from "./card.variants";
+export * from "./carousel.variants";
+export * from "./checkbox.variants";
+export * from "./code-block.variants";
+export * from "./combobox.variants";
+export * from "./container.variants";
+export * from "./content-mask.variants";
+export * from "./control-group.variants";
+export * from "./countdown.variants";
+export * from "./date-field.variants";
+export * from "./date-picker.variants";
+export * from "./date-range-field.variants";
+export * from "./date-range-picker.variants";
+export * from "./deck.variants";
+export * from "./description-list.appearance";
+export * from "./dialog.variants";
+export * from "./disclosure.variants";
+export * from "./divider.variants";
+export * from "./drawer.variants";
+export * from "./dropdown-menu.variants";
+export * from "./empty-state.variants";
+export * from "./eyebrow.variants";
+export * from "./field.variants";
+export * from "./fieldset.variants";
+export * from "./file-input.variants";
+export * from "./form.variants";
+export * from "./grid-list.variants";
+export * from "./heading.variants";
+export * from "./image.variants";
+export * from "./indicator.variants";
+export * from "./inline-edit.variants";
+export * from "./input.variants";
+export * from "./kbd.variants";
+export * from "./label.variants";
+export * from "./link-preview.variants";
+export * from "./link.variants";
+export * from "./list.variants";
+export * from "./loading-indicator.variants";
+export * from "./logo.variants";
+export * from "./media-object.variants";
+export * from "./meter.variants";
+export * from "./navbar.variants";
+export * from "./navigation-menu.variants";
+export * from "./notification.variants";
+export * from "./number-field.variants";
+export * from "./one-time-code-input.variants";
+export * from "./pagination.variants";
+export * from "./phone-mockup.variants";
+export * from "./popover.variants";
+export * from "./progress.variants";
+export * from "./prose.variants";
+export * from "./quiet-control.variants";
+export * from "./radial-progress.variants";
+export * from "./radio-group.variants";
+export * from "./rating.variants";
+export * from "./reveal.variants";
+export * from "./scroll-area.variants";
+export * from "./search-select.variants";
+export * from "./section-heading.variants";
+export * from "./segments.variants";
+export * from "./select.variants";
+export * from "./skeleton.variants";
+export * from "./skip-link.variants";
+export * from "./slide-frame.variants";
+export * from "./slide-layout.variants";
+export * from "./slider.variants";
+export * from "./stack.variants";
+export * from "./statistic.variants";
+export * from "./status-indicator.variants";
+export * from "./steps.variants";
+export * from "./swap.variants";
+export * from "./switch.variants";
+export * from "./table.variants";
+export * from "./tabs.variants";
+export * from "./text.variants";
+export * from "./textarea.variants";
+export * from "./time-field.variants";
+export * from "./time-range-field.variants";
+export * from "./timeline.variants";
+export * from "./toggle-button.variants";
+export * from "./toggle-group.variants";
+export * from "./tooltip.variants";
+export * from "./transfer.variants";
+export * from "./window-mockup.variants";
+export * from "./tone";
+export { fieldAssociation } from "./core/field";
+export { typeRoleMerge, TYPE_ROLE_UTILITIES } from "./type-roles";
+
+export * from "./phone-input.variants";

package/vendor/ds/kits/base/src/reduced-motion.svelte.ts

@@ -0,0 +1,40 @@
+/** The platform query shared by every Motion Primitive. */
+export const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+
+export interface ReducedMotionPreference {
+  readonly current: boolean;
+}
+
+/**
+ * A component-scoped reactive view of the reader's motion preference.
+ *
+ * The browser media query remains the source of truth. The rune mirrors it so
+ * a mounted component follows preference changes without owning listeners.
+ */
+export function useReducedMotion(): ReducedMotionPreference {
+  let current = $state(false);
+
+  $effect(() => {
+    if (typeof globalThis.matchMedia !== "function") return;
+
+    const query = globalThis.matchMedia(REDUCED_MOTION_QUERY);
+    const sync = () => {
+      current = query.matches;
+    };
+    sync();
+
+    if (typeof query.addEventListener === "function") {
+      query.addEventListener("change", sync);
+      return () => query.removeEventListener("change", sync);
+    }
+
+    query.addListener(sync);
+    return () => query.removeListener(sync);
+  });
+
+  return {
+    get current() {
+      return current;
+    },
+  };
+}