@stridge/noctis 1.0.0-beta.0

package/dist/components/progress/progress.js

@@ -0,0 +1,92 @@
+"use client";
+import { Progress as Progress$1 } from "../../primitives/progress/progress.js";
+import { ProgressProvider, useProgressContext } from "./progress.context.js";
+import { indicatorProps, labelProps, rootProps, trackProps, valueProps } from "./progress.props.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/progress/progress.tsx
+/**
+* Owns the value and shares the resolved `tone`/`size`/`labels` with its parts. Determinate when `value`
+* is a number (`0`–`max`, `max` defaulting to `100`); indeterminate when `value` is `null`. Pass `tone`
+* to tint the fill to a task outcome — `danger` for a failed upload, `warning` for at-risk, `success`
+* for done; `neutral` (the default) keeps the active accent. The noctis primitive injects the active
+* locale so the formatted value reads in the reader's language.
+*/
+function ProgressRoot({ tone = "neutral", size = "md", labels = "top", thickness, className, style, children, ...props }) {
+	const rootStyle = {
+		...thickness !== void 0 && { "--noctis-progress-track-block-size": typeof thickness === "number" ? `${thickness}px` : thickness },
+		...style
+	};
+	return /* @__PURE__ */ jsx(Progress$1.Root, {
+		"data-tone": tone,
+		"data-size": size,
+		"data-labels": labels,
+		className,
+		style: rootStyle,
+		...props,
+		children: /* @__PURE__ */ jsx(ProgressProvider, {
+			value: {
+				tone,
+				size,
+				labels
+			},
+			children
+		})
+	});
+}
+/** The recessed rail the indicator fills. Holds a single `Progress.Indicator`. */
+function ProgressTrack({ className, ...props }) {
+	useProgressContext("Track");
+	return /* @__PURE__ */ jsx(Progress$1.Track, {
+		className,
+		...props
+	});
+}
+/** The accent fill. Base UI sizes its inline width to the value; an empty value sweeps it indeterminately. */
+function ProgressIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Indicator, {
+		className,
+		...props
+	});
+}
+/** The progress bar's accessible label. Place it in a header row beside `Progress.Value`. */
+function ProgressLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Label, {
+		className,
+		...props
+	});
+}
+/** The formatted completion text, localized via the injected locale. Pass a child function to format it. */
+function ProgressValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Progress$1.Value, {
+		className,
+		...props
+	});
+}
+/**
+* A progress bar for a task's completion: an accent fill over a recessed track, in two thicknesses. It is
+* determinate when given a `value` (`0`–`max`) and indeterminate when `value` is `null`, in which case a
+* sliver sweeps the track. Built on Base UI's Progress, so the root carries the correct `progressbar`
+* role and ARIA value semantics, the value formats for the reader's locale, and the indeterminate sweep
+* respects `prefers-reduced-motion`.
+*
+* Compose from parts: `Progress.Root` owns the value and the shared `tone`/`size`/`labels`,
+* `Progress.Track` holds one `Progress.Indicator`, and an optional `Progress.Label` + `Progress.Value`
+* caption the bar — the root lays them out above (`labels="top"`) or beside (`labels="side"`) the track.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are exposed
+* through the matching `Progress` namespace — e.g. `Progress.Value.Props`.
+*/
+const Progress = {
+	/** Owns the value and the shared tone/size/labels. `Progress.Root.props({ tone, size, labels })` → its spreadable prop bag. */
+	Root: Object.assign(ProgressRoot, { props: rootProps }),
+	/** The recessed rail. `Progress.Track.props()` → its spreadable prop bag. */
+	Track: Object.assign(ProgressTrack, { props: trackProps }),
+	/** The accent fill. `Progress.Indicator.props({ indeterminate })` → its spreadable prop bag for a foreign element. */
+	Indicator: Object.assign(ProgressIndicator, { props: indicatorProps }),
+	/** The accessible label. `Progress.Label.props()` → its spreadable prop bag. */
+	Label: Object.assign(ProgressLabel, { props: labelProps }),
+	/** The formatted value text. `Progress.Value.props()` → its spreadable prop bag. */
+	Value: Object.assign(ProgressValue, { props: valueProps })
+};
+//#endregion
+export { Progress };

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

@@ -0,0 +1,56 @@
+import { ProgressLabels, ProgressSize, ProgressTone } from "./progress.context.js";
+
+//#region src/components/progress/progress.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Progress.*.props()` returns. */
+type ProgressPartProps = {
+  /** The slot value the matching `progress.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `Progress.Root.props(...)` — the tone, track size, and caption placement stamped on the root. */
+interface ProgressRootPropsArgs extends BasePropsArgs {
+  /** Status tint of the task outcome. @default "neutral" */
+  tone?: ProgressTone;
+  /** Track thickness — `sm` or `md`. @default "md" */
+  size?: ProgressSize;
+  /** Caption placement — `top` or `side`. @default "top" */
+  labels?: ProgressLabels;
+}
+/** Argument to `Progress.Indicator.props(...)` — the status the CSS keys the indeterminate sweep off. */
+interface ProgressIndicatorPropsArgs extends BasePropsArgs {
+  /** Whether the value is unknown (drives the sweeping animation via `data-indeterminate`). */
+  indeterminate?: boolean;
+}
+/** Argument to a stateless part's `.props(...)` — no variants/status of its own; look flows from the root. */
+type ProgressStatelessPropsArgs = BasePropsArgs;
+/** Root prop bag: `data-slot` plus the `data-tone`/`data-size`/`data-labels` the descendant rules read. */
+declare function rootProps({
+  tone,
+  size,
+  labels,
+  className
+}?: ProgressRootPropsArgs): ProgressPartProps;
+/** Track prop bag: just the slot anchor. */
+declare function trackProps({
+  className
+}?: ProgressStatelessPropsArgs): ProgressPartProps;
+/** Indicator prop bag: slot anchor plus the `data-indeterminate` status. */
+declare function indicatorProps({
+  indeterminate,
+  className
+}?: ProgressIndicatorPropsArgs): ProgressPartProps;
+/** Label prop bag: just the slot anchor. */
+declare function labelProps({
+  className
+}?: ProgressStatelessPropsArgs): ProgressPartProps;
+/** Value prop bag: just the slot anchor. */
+declare function valueProps({
+  className
+}?: ProgressStatelessPropsArgs): ProgressPartProps;
+//#endregion
+export { ProgressIndicatorPropsArgs, ProgressPartProps, ProgressRootPropsArgs, indicatorProps, labelProps, rootProps, trackProps, valueProps };

package/dist/components/progress/progress.props.js

@@ -0,0 +1,38 @@
+import { PROGRESS_SLOTS } from "./progress.slots.js";
+//#region src/components/progress/progress.props.ts
+/** Stamp a boolean status as a bare data-attribute: present (`""`) when on, absent (`undefined`) when off. */
+const flag = (on) => on ? "" : void 0;
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: `data-slot` plus the `data-tone`/`data-size`/`data-labels` the descendant rules read. */
+function rootProps({ tone = "neutral", size = "md", labels = "top", className } = {}) {
+	return withClassName({
+		"data-slot": PROGRESS_SLOTS.root,
+		"data-tone": tone,
+		"data-size": size,
+		"data-labels": labels
+	}, className);
+}
+/** Track prop bag: just the slot anchor. */
+function trackProps({ className } = {}) {
+	return withClassName({ "data-slot": PROGRESS_SLOTS.track }, className);
+}
+/** Indicator prop bag: slot anchor plus the `data-indeterminate` status. */
+function indicatorProps({ indeterminate, className } = {}) {
+	return withClassName({
+		"data-slot": PROGRESS_SLOTS.indicator,
+		"data-indeterminate": flag(indeterminate)
+	}, className);
+}
+/** Label prop bag: just the slot anchor. */
+function labelProps({ className } = {}) {
+	return withClassName({ "data-slot": PROGRESS_SLOTS.label }, className);
+}
+/** Value prop bag: just the slot anchor. */
+function valueProps({ className } = {}) {
+	return withClassName({ "data-slot": PROGRESS_SLOTS.value }, className);
+}
+//#endregion
+export { indicatorProps, labelProps, rootProps, trackProps, valueProps };

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

@@ -0,0 +1,24 @@
+//#region src/components/progress/progress.slots.d.ts
+/**
+ * The `data-*` hooks `Progress` stamps on its parts, for host-side styling and tests. Slot values mark
+ * each rendered element; the status attributes are emitted by Base UI's Progress on every part — pair a
+ * slot with a status to target, say, only the indeterminate indicator.
+ */
+declare enum ProgressDataAttributes {
+  /** The root progress element. */
+  slot = "data-slot",
+  /** `neutral` | `success` | `warning` | `danger` — the task-outcome tint, stamped on the root. */
+  tone = "data-tone",
+  /** `sm` | `md` — the track thickness, stamped on the root. */
+  size = "data-size",
+  /** `top` | `side` — the caption placement relative to the track, stamped on the root. */
+  labels = "data-labels",
+  /** Present on every part while the value is `null` (no measurable progress). */
+  indeterminate = "data-indeterminate",
+  /** Present on every part while the value is between its min and max. */
+  progressing = "data-progressing",
+  /** Present on every part once the value reaches its max. */
+  complete = "data-complete"
+}
+//#endregion
+export { ProgressDataAttributes };

package/dist/components/progress/progress.slots.js

@@ -0,0 +1,37 @@
+//#region src/components/progress/progress.slots.ts
+/**
+* The slot vocabulary every `Progress` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}-{part}`; SLOTS.md still generates from the
+* token-graph declarations.
+*/
+const PROGRESS_SLOTS = {
+	root: "noctis-progress",
+	track: "noctis-progress-track",
+	indicator: "noctis-progress-indicator",
+	label: "noctis-progress-label",
+	value: "noctis-progress-value"
+};
+/**
+* The `data-*` hooks `Progress` stamps on its parts, for host-side styling and tests. Slot values mark
+* each rendered element; the status attributes are emitted by Base UI's Progress on every part — pair a
+* slot with a status to target, say, only the indeterminate indicator.
+*/
+let ProgressDataAttributes = /* @__PURE__ */ function(ProgressDataAttributes) {
+	/** The root progress element. */
+	ProgressDataAttributes["slot"] = "data-slot";
+	/** `neutral` | `success` | `warning` | `danger` — the task-outcome tint, stamped on the root. */
+	ProgressDataAttributes["tone"] = "data-tone";
+	/** `sm` | `md` — the track thickness, stamped on the root. */
+	ProgressDataAttributes["size"] = "data-size";
+	/** `top` | `side` — the caption placement relative to the track, stamped on the root. */
+	ProgressDataAttributes["labels"] = "data-labels";
+	/** Present on every part while the value is `null` (no measurable progress). */
+	ProgressDataAttributes["indeterminate"] = "data-indeterminate";
+	/** Present on every part while the value is between its min and max. */
+	ProgressDataAttributes["progressing"] = "data-progressing";
+	/** Present on every part once the value reaches its max. */
+	ProgressDataAttributes["complete"] = "data-complete";
+	return ProgressDataAttributes;
+}({});
+//#endregion
+export { PROGRESS_SLOTS, ProgressDataAttributes };

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

@@ -0,0 +1,2 @@
+import { Radio } from "./radio.js";
+import { RadioDataAttributes } from "./radio.slots.js";

package/dist/components/radio/radio.context.js

@@ -0,0 +1,5 @@
+"use client";
+import { createContext } from "react";
+const RadioShapeContext = createContext({ size: "md" });
+//#endregion
+export { RadioShapeContext };

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

@@ -0,0 +1,205 @@
+import { field_d_exports } from "../../primitives/field.js";
+import { radio_d_exports } from "../../primitives/radio.js";
+import { radio_group_d_exports } from "../../primitives/radio-group.js";
+import { cardProps, descriptionProps, fieldProps, groupProps, indicatorProps, labelProps, radioProps } from "./radio.props.js";
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+
+//#region src/components/radio/radio.d.ts
+/** The box size a radio (and its group) accepts, stamped as `data-size`. */
+declare const SIZES: readonly ["sm", "md", "lg"];
+/**
+ * Owns the single selection for a set of radios. Built on Base UI's `RadioGroup`, so the contained
+ * radios share roving focus and arrow-key navigation, and exactly one is selected at a time. Spreads the
+ * Base UI surface through — `name` / `form` / `readOnly` / `required` / `onValueChange` all forward — so
+ * a group is a real form control. `orientation` lays the children out (vertical by default; `horizontal`
+ * is a row that mirrors under RTL); `invalid` flags the group's value as in error, cascading the danger
+ * border to every radio and announcing it via `aria-invalid`. Sets the shared box `size` once.
+ */
+declare function RadioGroupRoot({
+  size,
+  orientation,
+  invalid,
+  className,
+  children,
+  ...props
+}: Radio.Group.Props): ReactElement;
+/**
+ * One selectable radio — a circular box that takes the accent border and fills with the accent dot when
+ * checked. Built on Base UI's `Radio.Root`, so it is keyboard-reachable, single-select, and announces
+ * its state. Base UI stamps the live `data-checked`/`data-unchecked`/`data-disabled`/`data-readonly` the
+ * CSS keys off; the render contributes the slot anchor and the `data-size` axis (inherited from the
+ * enclosing field/group), and nests the indicator dot. `readOnly` / `required` forward to Base UI. For
+ * a labelled control, compose `Radio.Field` + `Radio.Label` (the row wires the label to the box and
+ * holds the box↔label gap), mirroring `Checkbox.Field`.
+ */
+declare function RadioRoot({
+  className,
+  children,
+  ...props
+}: Radio.Root.Props): ReactElement;
+/**
+ * The accent dot shown inside a checked radio. Built on Base UI's `Radio.Indicator` with `keepMounted`,
+ * so it stays in the DOM and the CSS can scale / fade it in on select (and out on de-select) off the
+ * `data-starting-style`/`data-ending-style` hooks. `Radio.Root` renders it automatically.
+ */
+declare function RadioIndicator({
+  className
+}?: Radio.Indicator.Props): ReactElement;
+/**
+ * The labelled row — pairs a `Radio.Label` with a `Radio.Root` so the pairing reads as one control,
+ * mirroring `Checkbox.Field`. Renders Base UI's `Field.Root`, which links the label to the box (clicking
+ * the label selects it, the label becomes the accessible name). Lay the label and box in either DOM
+ * order; the row mirrors under RTL by construction and holds the box↔label gap seam. Size flows from an
+ * enclosing `Radio.Group` unless this field sets its own, and cascades to the box through context.
+ *
+ *     <Radio.Field>
+ *         <Radio.Root value="comfortable" />
+ *         <Radio.Label>Comfortable</Radio.Label>
+ *     </Radio.Field>
+ */
+declare function RadioField({
+  size,
+  className,
+  children,
+  ...props
+}: Radio.Field.Props): ReactElement;
+/**
+ * The visible label that names a radio inside a `Radio.Field`. Renders Base UI's `Field.Label`, so
+ * clicking it selects the box and its text supplies the accessible name (no `aria-label` needed). It
+ * mirrors the field's disabled and invalid state through `data-disabled`/`data-invalid`.
+ */
+declare function RadioLabel({
+  className,
+  children,
+  ...props
+}: Radio.Label.Props): ReactElement;
+/**
+ * Helper text for a radio, wired to it via `aria-describedby` (the consumer sets a matching `id`). Muted,
+ * small text offset below the label by the description gap — turns a bare dot + label into a real field
+ * row without forcing a card.
+ */
+declare function RadioDescription({
+  className,
+  children,
+  ...props
+}: Radio.Description.Props): ReactElement;
+/**
+ * A selectable card: a sharp bordered target wrapping a `Radio.Root` (in a `<label>`, so the whole card
+ * toggles) plus its label and optional `Radio.Description`. Selecting it tints the card edge to the
+ * accent (signal); hover is a neutral surface shift and the focus ring moves to the card. The control
+ * sits at the leading edge by default, or the trailing edge via `controlPosition`. The dot stays a true
+ * circle. Set `hideControl` to drop the visible dot entirely — the card's accent edge becomes the sole
+ * selection signal (the radio input stays for keyboard + forms), for a clean Radix-style card picker. A
+ * composition, not a new engine primitive — it reuses the surface roles.
+ */
+declare function RadioCard({
+  value,
+  disabled,
+  readOnly,
+  required,
+  controlPosition,
+  hideControl,
+  className,
+  children,
+  ...props
+}: Radio.Card.Props): ReactElement;
+/**
+ * A single-select set of radios. Compose `Radio.Group` (owns the value) with `Radio.Root`s. Built on
+ * Base UI's `RadioGroup`/`Radio` for selection, roving focus, and a11y. Pair each radio with a label
+ * (a `<label>` wrapper or an `id`/`aria-labelledby` link), add a `Radio.Description` for helper text, or
+ * reach for `Radio.Card` for a selectable card target.
+ *
+ * Per-part `props(...)` builders expose the same slot/data-attribute mapping as spreadable statics for
+ * the escape-hatch path (D12).
+ */
+declare const Radio: {
+  /** The group that owns the selection. `Radio.Group.props({ orientation, invalid, disabled })` → its spreadable prop bag. */Group: typeof RadioGroupRoot & {
+    props: typeof groupProps;
+  }; /** One selectable radio box. `Radio.Root.props({ size, checked, disabled, readonly, invalid })` → its spreadable prop bag. */
+  Root: typeof RadioRoot & {
+    props: typeof radioProps;
+  }; /** The accent dot. `Radio.Indicator.props({ checked })` → its spreadable prop bag. */
+  Indicator: typeof RadioIndicator & {
+    props: typeof indicatorProps;
+  }; /** The labelled row pairing a radio with its label. `Radio.Field.props({ size })` → its spreadable prop bag. */
+  Field: typeof RadioField & {
+    props: typeof fieldProps;
+  }; /** The radio's visible accessible name. `Radio.Label.props({ disabled, invalid })` → its spreadable prop bag. */
+  Label: typeof RadioLabel & {
+    props: typeof labelProps;
+  }; /** Helper text wired to a radio via `aria-describedby`. `Radio.Description.props()` → its spreadable prop bag. */
+  Description: typeof RadioDescription & {
+    props: typeof descriptionProps;
+  }; /** A selectable card target. `Radio.Card.props({ controlPosition })` → its spreadable prop bag. */
+  Card: typeof RadioCard & {
+    props: typeof cardProps;
+  };
+};
+declare namespace Radio {
+  /** Box size — re-points the box and dot edges. */
+  type Size = (typeof SIZES)[number];
+  /** Layout axis of a group — `vertical` stacks the radios, `horizontal` lays them in a row. */
+  type Orientation = "vertical" | "horizontal";
+  /** Where the radio sits in a `Radio.Card` relative to its content. */
+  type ControlPosition = "leading" | "trailing";
+  namespace Group {
+    /** Props for {@link Radio.Group} — Base UI's `RadioGroup` (string-valued) plus the Noctis axes. */
+    type Props = Omit<radio_group_d_exports.RadioGroup.Props<string>, "className"> & {
+      /** Box size of every radio. Defaults to `md`. */size?: Size; /** Layout axis — `horizontal` lays the radios in a row. Stamped as `data-orientation`. @default "vertical" */
+      orientation?: Orientation; /** Flag the group's value as invalid — cascades the danger border and sets `aria-invalid`. */
+      invalid?: boolean; /** Classes merged onto the group. */
+      className?: string;
+    };
+  }
+  namespace Root {
+    /** Props for {@link Radio.Root} (the radio box) — Base UI's `Radio.Root` (string-valued). */
+    type Props = Omit<radio_d_exports.Radio.Root.Props<string>, "className"> & {
+      /** Classes merged onto the box. */className?: string;
+    };
+  }
+  namespace Indicator {
+    /** Props for {@link Radio.Indicator}. */
+    interface Props {
+      className?: string;
+    }
+  }
+  namespace Field {
+    /** Props for {@link Radio.Field} — Base UI's `Field.Root` plus the Noctis `size` axis. */
+    interface Props extends field_d_exports.Field.Root.Props {
+      /** Row size — scales the label text and cascades to the box inside. Inherits the group's size when unset. */
+      size?: Size;
+    }
+  }
+  namespace Label {
+    /** Props for {@link Radio.Label} — Base UI's `Field.Label`, the radio's visible accessible name. */
+    type Props = field_d_exports.Field.Label.Props;
+  }
+  namespace Description {
+    /** Props for {@link Radio.Description} — passthrough `span` props (set `id` to wire `aria-describedby`). */
+    type Props = ComponentPropsWithoutRef<"span">;
+  }
+  namespace Card {
+    /** Props for {@link Radio.Card} — a selectable card wrapping a `Radio.Root`. */
+    interface Props extends Omit<ComponentPropsWithoutRef<"label">, "children"> {
+      /** The value selected when this card is chosen. */
+      value: string;
+      /** Disable this card and its radio. */
+      disabled?: boolean;
+      /** Make this card's radio read-only. */
+      readOnly?: boolean;
+      /** Mark this card's radio as required. */
+      required?: boolean;
+      /** Where the radio sits relative to the content. @default "leading" */
+      controlPosition?: ControlPosition;
+      /**
+       * Hide the visible radio dot — the card's accent edge becomes the only selection signal (the
+       * input stays for keyboard/forms), for a Radix-style border-only card picker. @default false
+       */
+      hideControl?: boolean;
+      /** The card's label and optional `Radio.Description`. */
+      children?: ReactNode;
+    }
+  }
+}
+//#endregion
+export { Radio };

package/dist/components/radio/radio.js

@@ -0,0 +1,168 @@
+"use client";
+import { radio_exports } from "../../primitives/radio.js";
+import { radio_group_exports } from "../../primitives/radio-group.js";
+import { field_exports } from "../../primitives/field.js";
+import { RadioShapeContext } from "./radio.context.js";
+import { RADIO_SLOTS } from "./radio.slots.js";
+import { cardProps, descriptionProps, fieldProps, groupProps, indicatorProps, labelProps, radioProps } from "./radio.props.js";
+import { use } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/radio/radio.tsx
+/**
+* Owns the single selection for a set of radios. Built on Base UI's `RadioGroup`, so the contained
+* radios share roving focus and arrow-key navigation, and exactly one is selected at a time. Spreads the
+* Base UI surface through — `name` / `form` / `readOnly` / `required` / `onValueChange` all forward — so
+* a group is a real form control. `orientation` lays the children out (vertical by default; `horizontal`
+* is a row that mirrors under RTL); `invalid` flags the group's value as in error, cascading the danger
+* border to every radio and announcing it via `aria-invalid`. Sets the shared box `size` once.
+*/
+function RadioGroupRoot({ size = "md", orientation = "vertical", invalid, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(radio_group_exports.RadioGroup, {
+		"data-slot": RADIO_SLOTS.group,
+		"data-orientation": orientation,
+		"data-invalid": invalid ? "" : void 0,
+		"aria-orientation": orientation,
+		"aria-invalid": invalid || void 0,
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(RadioShapeContext, {
+			value: { size },
+			children
+		})
+	});
+}
+/**
+* One selectable radio — a circular box that takes the accent border and fills with the accent dot when
+* checked. Built on Base UI's `Radio.Root`, so it is keyboard-reachable, single-select, and announces
+* its state. Base UI stamps the live `data-checked`/`data-unchecked`/`data-disabled`/`data-readonly` the
+* CSS keys off; the render contributes the slot anchor and the `data-size` axis (inherited from the
+* enclosing field/group), and nests the indicator dot. `readOnly` / `required` forward to Base UI. For
+* a labelled control, compose `Radio.Field` + `Radio.Label` (the row wires the label to the box and
+* holds the box↔label gap), mirroring `Checkbox.Field`.
+*/
+function RadioRoot({ className, children, ...props }) {
+	const { size } = use(RadioShapeContext);
+	return /* @__PURE__ */ jsxs(radio_exports.Radio.Root, {
+		"data-slot": RADIO_SLOTS.radio,
+		"data-size": size,
+		className,
+		...props,
+		children: [/* @__PURE__ */ jsx(RadioIndicator, {}), children]
+	});
+}
+/**
+* The accent dot shown inside a checked radio. Built on Base UI's `Radio.Indicator` with `keepMounted`,
+* so it stays in the DOM and the CSS can scale / fade it in on select (and out on de-select) off the
+* `data-starting-style`/`data-ending-style` hooks. `Radio.Root` renders it automatically.
+*/
+function RadioIndicator({ className } = {}) {
+	return /* @__PURE__ */ jsx(radio_exports.Radio.Indicator, {
+		"data-slot": RADIO_SLOTS.indicator,
+		keepMounted: true,
+		className
+	});
+}
+/**
+* The labelled row — pairs a `Radio.Label` with a `Radio.Root` so the pairing reads as one control,
+* mirroring `Checkbox.Field`. Renders Base UI's `Field.Root`, which links the label to the box (clicking
+* the label selects it, the label becomes the accessible name). Lay the label and box in either DOM
+* order; the row mirrors under RTL by construction and holds the box↔label gap seam. Size flows from an
+* enclosing `Radio.Group` unless this field sets its own, and cascades to the box through context.
+*
+*     <Radio.Field>
+*         <Radio.Root value="comfortable" />
+*         <Radio.Label>Comfortable</Radio.Label>
+*     </Radio.Field>
+*/
+function RadioField({ size, className, children, ...props }) {
+	const inherited = use(RadioShapeContext);
+	const resolvedSize = size ?? inherited.size;
+	return /* @__PURE__ */ jsx(RadioShapeContext, {
+		value: { size: resolvedSize },
+		children: /* @__PURE__ */ jsx(field_exports.Field.Root, {
+			"data-slot": RADIO_SLOTS.field,
+			"data-size": resolvedSize,
+			className,
+			...props,
+			children
+		})
+	});
+}
+/**
+* The visible label that names a radio inside a `Radio.Field`. Renders Base UI's `Field.Label`, so
+* clicking it selects the box and its text supplies the accessible name (no `aria-label` needed). It
+* mirrors the field's disabled and invalid state through `data-disabled`/`data-invalid`.
+*/
+function RadioLabel({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(field_exports.Field.Label, {
+		"data-slot": RADIO_SLOTS.label,
+		className,
+		...props,
+		children
+	});
+}
+/**
+* Helper text for a radio, wired to it via `aria-describedby` (the consumer sets a matching `id`). Muted,
+* small text offset below the label by the description gap — turns a bare dot + label into a real field
+* row without forcing a card.
+*/
+function RadioDescription({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": RADIO_SLOTS.description,
+		className,
+		...props,
+		children
+	});
+}
+/**
+* A selectable card: a sharp bordered target wrapping a `Radio.Root` (in a `<label>`, so the whole card
+* toggles) plus its label and optional `Radio.Description`. Selecting it tints the card edge to the
+* accent (signal); hover is a neutral surface shift and the focus ring moves to the card. The control
+* sits at the leading edge by default, or the trailing edge via `controlPosition`. The dot stays a true
+* circle. Set `hideControl` to drop the visible dot entirely — the card's accent edge becomes the sole
+* selection signal (the radio input stays for keyboard + forms), for a clean Radix-style card picker. A
+* composition, not a new engine primitive — it reuses the surface roles.
+*/
+function RadioCard({ value, disabled, readOnly, required, controlPosition = "leading", hideControl = false, className, children, ...props }) {
+	const radio = /* @__PURE__ */ jsx(RadioRoot, {
+		value,
+		disabled,
+		readOnly,
+		required
+	});
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": RADIO_SLOTS.card,
+		"data-control": controlPosition,
+		"data-control-hidden": hideControl ? "" : void 0,
+		className,
+		...props,
+		children: controlPosition === "leading" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [radio, children] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [children, radio] })
+	});
+}
+/**
+* A single-select set of radios. Compose `Radio.Group` (owns the value) with `Radio.Root`s. Built on
+* Base UI's `RadioGroup`/`Radio` for selection, roving focus, and a11y. Pair each radio with a label
+* (a `<label>` wrapper or an `id`/`aria-labelledby` link), add a `Radio.Description` for helper text, or
+* reach for `Radio.Card` for a selectable card target.
+*
+* Per-part `props(...)` builders expose the same slot/data-attribute mapping as spreadable statics for
+* the escape-hatch path (D12).
+*/
+const Radio = {
+	/** The group that owns the selection. `Radio.Group.props({ orientation, invalid, disabled })` → its spreadable prop bag. */
+	Group: Object.assign(RadioGroupRoot, { props: groupProps }),
+	/** One selectable radio box. `Radio.Root.props({ size, checked, disabled, readonly, invalid })` → its spreadable prop bag. */
+	Root: Object.assign(RadioRoot, { props: radioProps }),
+	/** The accent dot. `Radio.Indicator.props({ checked })` → its spreadable prop bag. */
+	Indicator: Object.assign(RadioIndicator, { props: indicatorProps }),
+	/** The labelled row pairing a radio with its label. `Radio.Field.props({ size })` → its spreadable prop bag. */
+	Field: Object.assign(RadioField, { props: fieldProps }),
+	/** The radio's visible accessible name. `Radio.Label.props({ disabled, invalid })` → its spreadable prop bag. */
+	Label: Object.assign(RadioLabel, { props: labelProps }),
+	/** Helper text wired to a radio via `aria-describedby`. `Radio.Description.props()` → its spreadable prop bag. */
+	Description: Object.assign(RadioDescription, { props: descriptionProps }),
+	/** A selectable card target. `Radio.Card.props({ controlPosition })` → its spreadable prop bag. */
+	Card: Object.assign(RadioCard, { props: cardProps })
+};
+//#endregion
+export { Radio };