@viraui/react 0.0.17 → 0.0.18

package/dist/catalog.json

@@ -32,6 +32,12 @@
       "summary": "Icon-only button that requires an accessible name through aria-label or aria-labelledby.",
       "guidePath": "./components/icon-button/icon-button.guide.json"
     },
+    {
+      "id": "linear-progress",
+      "name": "LinearProgress",
+      "summary": "Shows determinate or indeterminate progress for a task in a compact horizontal track.",
+      "guidePath": "./components/linear-progress/linear-progress.guide.json"
+    },
     {
       "id": "textfield",
       "name": "Textfield",
@@ -62,6 +68,12 @@
       "summary": "Field-wrapped checkbox control with optional field copy.",
       "guidePath": "./components/checkbox/checkbox.guide.json"
     },
+    {
+      "id": "radio",
+      "name": "Radio",
+      "summary": "Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.",
+      "guidePath": "./components/radio/radio.guide.json"
+    },
     {
       "id": "select",
       "name": "Select",

package/dist/components/basic-input/basic-input.js

@@ -1,5 +1,5 @@
-import './basic-input.css';
 "use client";
+import './basic-input.css';
 import basic_input_module_default from "./basic-input.module.js";
 import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";

package/dist/components/basic-input/field-helper-copy.js

@@ -16,7 +16,7 @@ var FieldHelperCopy = ({ className, description, error }) => /* @__PURE__ */ jsx
 		match: true,
 		render: /* @__PURE__ */ jsx(Text, {
 			selection: false,
-			size: "x-small",
+			size: "small",
 			tone: "danger"
 		}),
 		children: error
@@ -25,7 +25,7 @@ var FieldHelperCopy = ({ className, description, error }) => /* @__PURE__ */ jsx
 		className,
 		render: /* @__PURE__ */ jsx(Text, {
 			selection: false,
-			size: "x-small",
+			size: "small",
 			tone: "muted"
 		}),
 		children: description
@@ -34,7 +34,7 @@ var FieldHelperCopy = ({ className, description, error }) => /* @__PURE__ */ jsx
 		className,
 		render: /* @__PURE__ */ jsx(Text, {
 			selection: false,
-			size: "x-small",
+			size: "small",
 			tone: "danger"
 		})
 	});

package/dist/components/basic-input/field-label.d.ts

@@ -1,5 +1,6 @@
+import { TextProps } from '../text';
 import type * as React from 'react';
-export type FieldLabelProps = React.ComponentProps<'span'>;
+export type FieldLabelProps = TextProps;
 /**
  * Shared visible field label typography for Vira field components.
  *

package/dist/components/basic-input/field-label.js

@@ -1,5 +1,5 @@
-import './field-label.css';
 "use client";
+import './field-label.css';
 import { Text } from "../text/text.js";
 import field_label_module_default from "./field-label.module.js";
 import { clsx } from "clsx";
@@ -12,12 +12,13 @@ import { jsx } from "react/jsx-runtime";
 * label must associate with a control; choice inputs wrap `Field.Label` around the
 * control and render this component for the visible label copy.
 */
-var FieldLabel = ({ children, className }) => /* @__PURE__ */ jsx(Text, {
+var FieldLabel = ({ children, className, size = "small", ...textProps }) => /* @__PURE__ */ jsx(Text, {
 	className: clsx(field_label_module_default.FieldLabel, className),
 	lineHeight: "small",
 	selection: false,
-	size: "small",
+	size,
 	weight: "semibold",
+	...textProps,
 	children
 });
 //#endregion

package/dist/components/button/button.css

@@ -1 +1 @@
-.button-module_Button_oPhrP{--button-background:var(--global-primary);--button-color:var(--base-1);--button-height:var(--space-2x-large);--button-padding-inline:var(--space-medium);--button-padding-block:var(--space-small);--button-spinner-color:currentColor;--button-icon-size:1.125em;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:min-content;max-block-size:var(--button-height);block-size:var(--button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--button-padding-block) var(--button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid transparent;background:var(--button-background);color:var(--button-color);font-size:var(--font-scale-body-medium);border-radius:var(--radius-small);transition:translate var(--easing-elastic) var(--duration-instant);background-clip:padding-box;will-change:translate;&:not(:disabled):active{translate:0 1px}&[data-size=medium]{--button-height:var(--space-x-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-small);--button-icon-size:1.125em;gap:var(--space-x-small)}&[data-size=small]{--button-height:var(--space-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-x-small);--button-icon-size:0.9em;gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--button-background:var(--global-primary);--button-color:contrast-color(var(--global-primary))}&[data-variant=secondary]{--button-background:var(--global-contrast);--button-color:var(--base-6);background-clip:unset;&:hover{--button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.05))}}&[data-variant=flat]{--button-background:transparent;--button-color:var(--base-5);&:hover{--button-background:var(--base-1);--button-color:var(--base-7)}}&[data-variant=destructive]{--button-background:oklab(from var(--highlight-red) l a b/20%);--button-color:var(--highlight-red);&:hover{--button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-icon-position=start]{flex-direction:row}&[data-icon-position=end]{flex-direction:row-reverse}&[data-icon-only=true]{gap:0;padding-block:var(--button-padding-block);padding-inline:var(--button-padding-block);inline-size:var(--button-height);min-inline-size:var(--button-height);max-inline-size:var(--button-height);aspect-ratio:1/1}&:disabled,&:disabled:hover,&[aria-disabled=true]{--button-background:var(--global-disabled-background);--button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--button-color:var(--base-7)}}.button-module_Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--button-icon-size);inline-size:var(--button-icon-size);flex-shrink:0}}.button-module_SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none}
+.button-module_Button_oPhrP{--button-background:var(--global-primary);--button-color:var(--base-1);--button-height:var(--space-2x-large);--button-padding-inline:var(--space-medium);--button-padding-block:var(--space-small);--button-spinner-color:currentColor;--button-icon-size:1.125em;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;margin:0;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-inline-size:min-content;max-block-size:var(--button-height);block-size:var(--button-height);justify-content:center;text-decoration:none;white-space:nowrap;appearance:button;overflow:hidden;position:relative;padding:var(--button-padding-block) var(--button-padding-inline);font-weight:400;font-variation-settings:"wght" 400;gap:var(--space-small);border:1px solid transparent;background:var(--button-background);color:var(--button-color);font-size:var(--font-scale-body-medium);border-radius:var(--radius-small);transition:translate var(--easing-elastic) var(--duration-instant);background-clip:padding-box;will-change:translate;&:not(:disabled):active{translate:0 1px}&[data-size=medium]{--button-height:var(--space-x-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-small);--button-icon-size:1.125em}&[data-size=small]{--button-height:var(--space-large);--button-padding-inline:var(--space-small);--button-padding-block:var(--space-x-small);--button-icon-size:0.9em;gap:var(--space-x-small);font-size:var(--font-scale-body-small)}&[data-variant=primary]{--button-background:var(--global-primary);--button-color:contrast-color(var(--global-primary))}&[data-variant=secondary]{--button-background:var(--global-contrast);--button-color:var(--base-6);background-clip:unset;&:hover{--button-background:oklab(from var(--global-contrast) l a b/calc(alpha + 0.05))}}&[data-variant=flat]{--button-background:transparent;--button-color:var(--base-5);&:hover{--button-background:var(--global-contrast);--button-color:var(--base-7)}}&[data-variant=destructive]{--button-background:oklab(from var(--highlight-red) l a b/15%);--button-color:var(--highlight-red);&:hover{--button-background:oklab(from var(--highlight-red) l a b/30%)}}&[data-icon-position=start]{flex-direction:row}&[data-icon-position=end]{flex-direction:row-reverse}&[data-icon-only=true]{gap:0;padding-block:var(--button-padding-block);padding-inline:var(--button-padding-block);inline-size:var(--button-height);min-inline-size:var(--button-height);max-inline-size:var(--button-height);aspect-ratio:1/1}&:disabled,&:disabled:hover,&[aria-disabled=true]{--button-background:var(--global-disabled-background);--button-color:var(--global-disabled-foreground);cursor:not-allowed;box-shadow:none}&[data-loading=true][data-disabled]{pointer-events:none;border:0;box-shadow:none;--button-color:var(--base-7)}}.button-module_Content_w-pX-{display:inline-grid;place-items:center;&[data-loading=true]{opacity:0}&:first-child>svg{block-size:var(--button-icon-size);inline-size:var(--button-icon-size);flex-shrink:0}}.button-module_SpinnerOverlay_vKqw1{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none}

package/dist/components/button/button.js

@@ -1,5 +1,5 @@
-import './button.css';
 "use client";
+import './button.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Spinner } from "../spinner/spinner.js";
 import button_module_default from "./button.module.js";

package/dist/components/checkbox/checkbox.css

@@ -1 +1 @@
-.checkbox-module_Checkbox_3oGip{--checkbox-size:var(--space-medium);--checkbox-radius:var(--radius-x-small);--checkbox-background:var(--global-contrast);--checkbox-border-color:transparent;--checkbox-indicator-color:contrast-color(var(--global-primary));&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.checkbox-module_CheckboxRoot_PeyF5{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--checkbox-border-color);inline-size:var(--checkbox-size);block-size:var(--checkbox-size);background:var(--checkbox-background);border-radius:var(--checkbox-radius);&[data-size=regular]{--checkbox-size:var(--space-large);--checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]),&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--checkbox-background:var(--global-primary);--checkbox-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),.checkbox-module_Checkbox_3oGip[data-invalid]>&:not([data-disabled]){--checkbox-border-color:var(--highlight-red);--checkbox-indicator-color:var(--highlight-red);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.checkbox-module_Checkbox_3oGip[data-disabled]>&{--checkbox-background:var(--global-disabled-background);--checkbox-border-color:transparent;--checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none}}.checkbox-module_Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--checkbox-indicator-color)}.checkbox-module_Icon_926Sa{stroke:currentColor}.checkbox-module_CheckboxRoot_PeyF5:not([data-indeterminate]) .checkbox-module_MinusIcon_Q57pY,.checkbox-module_CheckboxRoot_PeyF5[data-indeterminate] .checkbox-module_CheckIcon_XqUcs{display:none}.checkbox-module_CheckboxRoot_PeyF5[data-indeterminate] .checkbox-module_MinusIcon_Q57pY{display:inline-flex}
+.checkbox-module_Checkbox_3oGip{--checkbox-size:var(--space-medium);--checkbox-radius:var(--radius-x-small);--checkbox-background:var(--global-contrast);--checkbox-border-color:transparent;--checkbox-indicator-color:contrast-color(var(--global-primary));&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.checkbox-module_CheckboxRoot_PeyF5{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--checkbox-border-color);inline-size:var(--checkbox-size);block-size:var(--checkbox-size);background:var(--checkbox-background);border-radius:var(--checkbox-radius);&[data-size=regular]{--checkbox-size:var(--space-large);--checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]),&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--checkbox-background:var(--global-primary);--checkbox-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),.checkbox-module_Checkbox_3oGip[data-invalid]>&:not([data-disabled]){--checkbox-border-color:var(--highlight-red);--checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.checkbox-module_Checkbox_3oGip[data-disabled]>&{--checkbox-background:var(--global-disabled-background);--checkbox-border-color:transparent;--checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none}}.checkbox-module_Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--checkbox-indicator-color)}.checkbox-module_Icon_926Sa{stroke:currentColor}.checkbox-module_CheckboxRoot_PeyF5:not([data-indeterminate]) .checkbox-module_MinusIcon_Q57pY,.checkbox-module_CheckboxRoot_PeyF5[data-indeterminate] .checkbox-module_CheckIcon_XqUcs{display:none}.checkbox-module_CheckboxRoot_PeyF5[data-indeterminate] .checkbox-module_MinusIcon_Q57pY{display:inline-flex}

package/dist/components/checkbox/checkbox.js

@@ -1,5 +1,5 @@
-import './checkbox.css';
 "use client";
+import './checkbox.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
@@ -61,7 +61,10 @@ var Checkbox$1 = ({ className, description, dirty, disabled, error, invalid, lab
 				direction: "column",
 				fillChildren: false,
 				rowGap: size === "small" ? "2x-small" : "x-small",
-				children: [label && /* @__PURE__ */ jsx(FieldLabel, { children: label }), /* @__PURE__ */ jsx(FieldHelperCopy, {
+				children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+					size: size === "small" ? "small" : "medium",
+					children: label
+				}), /* @__PURE__ */ jsx(FieldHelperCopy, {
 					description,
 					error
 				})]

package/dist/components/clamp-text/clamp-text.js

@@ -1,5 +1,5 @@
-import './clamp-text.css';
 "use client";
+import './clamp-text.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import clamp_text_module_default from "./clamp-text.module.js";
 import { clsx } from "clsx";

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

@@ -1,2 +1,2 @@
 export { Icon } from './icon';
-export type { IconProps } from './icon';
+export type { IconName, IconProps, IconVariant } from './icon';

package/dist/components/index.d.ts

@@ -3,11 +3,13 @@ export * from './clamp-text';
 export * from './elevator';
 export * from './button';
 export * from './icon-button';
+export * from './linear-progress';
 export * from './textfield';
 export * from './textarea';
 export * from './slider';
 export * from './switch';
 export * from './checkbox';
+export * from './radio';
 export * from './select';
 export * from './icon';
 export * from './skeleton';

package/dist/components/linear-progress/index.d.ts

@@ -0,0 +1,2 @@
+export { LinearProgress } from './linear-progress';
+export type { LinearProgressProps } from './linear-progress';

package/dist/components/linear-progress/linear-progress.css

@@ -0,0 +1 @@
+.linear-progress-module_LinearProgress_-KN0j{--linear-progress-track-size:var(--space-x-small);--linear-progress-track-background:var(--global-contrast);--linear-progress-indicator-color:var(--global-primary);& .linear-progress-module_Track_qUz8P{position:relative;overflow:hidden;block-size:var(--linear-progress-track-size);background:var(--linear-progress-track-background);border-radius:var(--radius-infinite)}& .linear-progress-module_Indicator_maaZF{block-size:100%;background:var(--linear-progress-indicator-color);border-radius:inherit;&[data-indeterminate]{position:absolute;inset:0;inline-size:100%;background:transparent;&:before{position:absolute;inset-block:0;inline-size:40%;background:var(--linear-progress-indicator-color);border-radius:inherit;animation:linear-progress-module_linear-progress-indeterminate_g0cSO 1.4s var(--easing-standard) infinite;content:""}}}}@keyframes linear-progress-module_linear-progress-indeterminate_g0cSO{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}

package/dist/components/linear-progress/linear-progress.d.ts

@@ -0,0 +1,44 @@
+import { ProgressRoot } from '@base-ui/react/progress';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public LinearProgress props.
+ *
+ * Includes Base UI progress root props such as `value`, `min`, `max`, `format`,
+ * and `getAriaValueText`, plus optional label, description, and value display.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type LinearProgressProps = ProgressRoot.Props & {
+    /**
+     * Adds `data-grow="false"` to the progress root when false.
+     *
+     * @default The progress root does not render a grow attribute.
+     */
+    grow?: IntrinsicViraProps['grow'];
+    /**
+     * Adds `data-shrink="false"` to the progress root when false.
+     *
+     * @default The progress root does not render a shrink attribute.
+     */
+    shrink?: IntrinsicViraProps['shrink'];
+    /**
+     * Visible label rendered through `Progress.Label` with shared internal `FieldLabel`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Static helper copy rendered with `Text` below the progress track.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Renders the formatted current value via `Progress.Value` and `Text`.
+     *
+     * @default false
+     */
+    showValue?: boolean;
+};
+export declare const LinearProgress: React.FC<LinearProgressProps>;

package/dist/components/linear-progress/linear-progress.guide.json

@@ -0,0 +1,27 @@
+{
+  "name": "LinearProgress",
+  "summary": "Shows determinate or indeterminate progress for a task in a compact horizontal track.",
+  "whenToUse": [
+    "Use for task completion with a known percentage or bounded numeric value.",
+    "Use with `value={null}` when progress is active but the amount complete is unknown.",
+    "Use with a label when the progress bar needs a visible task name."
+  ],
+  "whenNotToUse": [
+    "Use Spinner for a small standalone loading affordance without task context.",
+    "Use Skeleton when representing loading content layout.",
+    "Use Slider when the user needs to choose or adjust a value."
+  ],
+  "accessibility": [
+    "Provide a visible `label` or an accessible name through Base UI progress props when the task is not otherwise clear.",
+    "Use determinate numeric `value` when actual progress is known.",
+    "Use `value={null}` only for truly indeterminate work."
+  ],
+  "antiPatterns": [
+    "Do not use LinearProgress as an interactive value control.",
+    "Do not add fake percentages for work where progress is unknown.",
+    "Do not model invalid progress; Base UI Progress does not expose an invalid state.",
+    "Do not model disabled progress; Base UI Progress does not expose a disabled state.",
+    "Do not hide the task label when multiple progress indicators are visible."
+  ],
+  "related": ["Slider", "Spinner", "Skeleton", "Text"]
+}

package/dist/components/linear-progress/linear-progress.js

@@ -0,0 +1,61 @@
+"use client";
+import './linear-progress.css';
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Text } from "../text/text.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
+import linear_progress_module_default from "./linear-progress.module.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@base-ui/react/progress";
+//#region src/components/linear-progress/linear-progress.tsx
+var LinearProgress = ({ className, description, label, showValue = false, value, ref, ...progressRootProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(progressRootProps);
+	return /* @__PURE__ */ jsxs(Progress.Root, {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		className: clsx(linear_progress_module_default.LinearProgress, className),
+		value,
+		render: /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: "small",
+			columnGap: "x-small"
+		}),
+		children: [
+			(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				fillChildren: false,
+				columnGap: "small",
+				vAlign: "center",
+				hAlign: "space-between",
+				children: [label && /* @__PURE__ */ jsx(Progress.Label, {
+					render: /* @__PURE__ */ jsx(FieldLabel, {}),
+					children: label
+				}), showValue && /* @__PURE__ */ jsx(Text, {
+					size: "small",
+					tone: "muted",
+					family: "mono",
+					whiteSpace: "nowrap",
+					selection: false,
+					align: "end",
+					shrink: false,
+					render: /* @__PURE__ */ jsx(Progress.Value, { render: /* @__PURE__ */ jsx("output", {}) })
+				})]
+			}),
+			/* @__PURE__ */ jsx(Progress.Track, {
+				className: linear_progress_module_default.Track,
+				children: /* @__PURE__ */ jsx(Progress.Indicator, { className: linear_progress_module_default.Indicator })
+			}),
+			description && /* @__PURE__ */ jsx(Text, {
+				className: linear_progress_module_default.Description,
+				size: "small",
+				tone: "muted",
+				children: description
+			})
+		]
+	});
+};
+//#endregion
+export { LinearProgress };

package/dist/components/linear-progress/linear-progress.module.js

@@ -0,0 +1,8 @@
+var linear_progress_module_default = {
+	LinearProgress: "linear-progress-module_LinearProgress_-KN0j",
+	"linear-progress-indeterminate": "linear-progress-module_linear-progress-indeterminate_g0cSO",
+	Track: "linear-progress-module_Track_qUz8P",
+	Indicator: "linear-progress-module_Indicator_maaZF"
+};
+//#endregion
+export { linear_progress_module_default as default };

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

@@ -0,0 +1,4 @@
+export { Radio } from './radio';
+export { RadioGroup } from './radio-group';
+export type { RadioProps } from './radio';
+export type { RadioGroupProps } from './radio-group';

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

@@ -0,0 +1,44 @@
+import { FieldRoot, RadioGroup as RadioGroupPrimitive } from '@base-ui/react';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public RadioGroup props.
+ *
+ * Thin wrapper around Base UI `RadioGroup` with group-level Field validation.
+ * Layout and spacing between options are owned by the consumer.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type RadioGroupProps = RadioGroupPrimitive.Props & Omit<FieldRoot.Props, 'ref'> & {
+    /**
+     * Adds `data-grow="false"` to the field root when false.
+     *
+     * @default The field root does not render a grow attribute.
+     */
+    grow?: IntrinsicViraProps['grow'];
+    /**
+     * Adds `data-shrink="false"` to the field root when false.
+     *
+     * @default The field root does not render a shrink attribute.
+     */
+    shrink?: IntrinsicViraProps['shrink'];
+    /**
+     * Visible group label rendered with shared internal `FieldLabel`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Group helper copy rendered below the options while valid.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Group error copy rendered below the options when invalid.
+     *
+     * @default No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+};
+export declare const RadioGroup: React.FC<RadioGroupProps>;

package/dist/components/radio/radio-group.js

@@ -0,0 +1,54 @@
+"use client";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
+import radio_module_default from "./radio.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field, Fieldset, RadioGroup } from "@base-ui/react";
+//#region src/components/radio/radio-group.tsx
+var RadioGroup$1 = ({ children, className, description, error, invalid, label, name, disabled, dirty, touched, validate, validationDebounceTime, validationMode, ...radioGroupProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(radioGroupProps);
+	return /* @__PURE__ */ jsx(Field.Root, {
+		...intrinsicAttributes,
+		className: radio_module_default.RadioGroup,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			className: radio_module_default.RadioFieldset,
+			fillChildren: false,
+			render: /* @__PURE__ */ jsx(Fieldset.Root, { disabled }),
+			rowGap: "small",
+			children: [
+				label && /* @__PURE__ */ jsx(Fieldset.Legend, {
+					render: /* @__PURE__ */ jsx(FieldLabel, {}),
+					children: label
+				}),
+				(description || error) && /* @__PURE__ */ jsx(FieldHelperCopy, {
+					description,
+					error
+				}),
+				/* @__PURE__ */ jsx(RadioGroup, {
+					...componentProps,
+					className,
+					disabled,
+					render: /* @__PURE__ */ jsx(Stack, {
+						fillChildren: false,
+						vPadding: ["small", 0],
+						rowGap: "small"
+					}),
+					name,
+					children
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { RadioGroup$1 as RadioGroup };

package/dist/components/radio/radio.css

@@ -0,0 +1 @@
+.radio-module_RadioGroup_vnd3F{&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.radio-module_RadioFieldset_g50K8{min-inline-size:0;margin:0;padding:0}.radio-module_RadioRoot_3uvvn{--radio-size:var(--space-medium);--radio-background:var(--global-contrast);--radio-border-color:transparent;--radio-indicator-color:contrast-color(var(--global-primary));--radio-disk-size:calc(var(--radio-size) / 2);position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--radio-border-color);inline-size:var(--radio-size);block-size:var(--radio-size);background:var(--radio-background);border-radius:50%;&[data-size=regular]{--radio-size:var(--space-large)}&[data-checked]:not([data-disabled]):not([data-invalid]){--radio-background:var(--global-primary);--radio-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),.radio-module_RadioGroup_vnd3F[data-invalid] &:not([data-disabled]){--radio-border-color:var(--highlight-red);--radio-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.radio-module_RadioGroup_vnd3F[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:transparent;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none}}.radio-module_Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.radio-module_Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:50%;background:currentColor}.radio-module_RadioRoot_3uvvn:not([data-checked]) .radio-module_Disk_pV-Q1{display:none}

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

@@ -0,0 +1,44 @@
+import { RadioRoot } from '@base-ui/react/radio';
+import { StackProps } from '..';
+import type * as React from 'react';
+/**
+ * Public Radio props.
+ *
+ * Self-contained option row for use inside `RadioGroup`. Group-level `name`,
+ * `invalid`, and `error` belong on `RadioGroup`, not on individual options.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type RadioProps = RadioRoot.Props & {
+    /**
+     * Visible label rendered with shared internal `FieldLabel`.
+     *
+     * @default No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper copy rendered with `Field.Description` and `Text` for this option.
+     *
+     * @default No description is rendered.
+     */
+    description?: React.ReactNode;
+    /**
+     * Controls the visual radio size.
+     *
+     * @default 'small'
+     */
+    size?: 'regular' | 'small';
+    /**
+     * Sets block padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No block padding.
+     */
+    vPadding?: StackProps['vPadding'];
+    /**
+     * Sets inline padding using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No inline padding.
+     */
+    hPadding?: StackProps['hPadding'];
+};
+export declare const Radio: React.FC<RadioProps>;

package/dist/components/radio/radio.guide.json

@@ -0,0 +1,26 @@
+{
+  "name": "Radio",
+  "summary": "Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.",
+  "whenToUse": [
+    "Single selection from a small set of related options",
+    "Card-style or custom layouts where each option is wrapped in Surface or consumer markup",
+    "Form fields that require one answer from a named group"
+  ],
+  "whenNotToUse": [
+    "Independent boolean toggles (use Checkbox or Switch)",
+    "Multi-select sets (use Checkbox)",
+    "Options rendered outside a RadioGroup wrapper"
+  ],
+  "accessibility": [
+    "Wrap options in RadioGroup so the group exposes a shared name",
+    "Provide visible label or aria-label on each option so radios have accessible names",
+    "Surface group invalid state and error copy through RadioGroup, not individual Radio options"
+  ],
+  "antiPatterns": [
+    "Rendering Radio outside RadioGroup",
+    "Putting invalid or error on a single Radio instead of RadioGroup",
+    "Expecting RadioGroup to add spacing or grid layout between options",
+    "Importing @viraui/react/radio/radio.css or other component CSS subpaths in consumer bootstrap"
+  ],
+  "related": ["Checkbox", "Surface", "Stack"]
+}

package/dist/components/radio/radio.js

@@ -0,0 +1,45 @@
+"use client";
+import './radio.css';
+import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
+import { FieldLabel } from "../basic-input/field-label.js";
+import { Stack } from "../stack/stack.js";
+import radio_module_default from "./radio.module.js";
+import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { Radio } from "@base-ui/react/radio";
+//#region src/components/radio/radio.tsx
+var Radio$1 = ({ className, description, disabled, id, label, ref, size = "small", vPadding, hPadding, value, ...radioRootProps }) => {
+	const hasTextDescription = Boolean(description);
+	return /* @__PURE__ */ jsx(Field.Item, { children: /* @__PURE__ */ jsx(Field.Label, { children: /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		columnGap: size === "small" ? "small" : "medium",
+		fillChildren: false,
+		vAlign: hasTextDescription ? "start" : "center",
+		...hPadding !== void 0 ? { hPadding } : {},
+		...vPadding !== void 0 ? { vPadding } : {},
+		children: [/* @__PURE__ */ jsx(Radio.Root, {
+			...radioRootProps,
+			className: clsx(radio_module_default.RadioRoot, className),
+			"data-size": size,
+			disabled,
+			id,
+			ref,
+			value,
+			children: /* @__PURE__ */ jsx(Radio.Indicator, {
+				className: radio_module_default.Indicator,
+				children: /* @__PURE__ */ jsx("span", { className: radio_module_default.Disk })
+			})
+		}), label || description ? /* @__PURE__ */ jsxs(Stack, {
+			direction: "column",
+			fillChildren: false,
+			rowGap: size === "small" ? "2x-small" : "x-small",
+			children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+				size: size === "small" ? "small" : "medium",
+				children: label
+			}), /* @__PURE__ */ jsx(FieldHelperCopy, { description })]
+		}) : null]
+	}) }) });
+};
+//#endregion
+export { Radio$1 as Radio };

package/dist/components/radio/radio.module.js

@@ -0,0 +1,9 @@
+var radio_module_default = {
+	RadioGroup: "radio-module_RadioGroup_vnd3F",
+	RadioFieldset: "radio-module_RadioFieldset_g50K8",
+	RadioRoot: "radio-module_RadioRoot_3uvvn",
+	Indicator: "radio-module_Indicator_Ecavw",
+	Disk: "radio-module_Disk_pV-Q1"
+};
+//#endregion
+export { radio_module_default as default };

package/dist/components/select/select.js

@@ -1,5 +1,5 @@
-import './select.css';
 "use client";
+import './select.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Elevator } from "../elevator/elevator.js";
 import { IconButton } from "../icon-button/icon-button.js";

package/dist/components/slider/slider.js

@@ -1,5 +1,5 @@
-import './slider.css';
 "use client";
+import './slider.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Text } from "../text/text.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";

package/dist/components/stack/stack.css

@@ -1 +1 @@
-.stack-module_Stack_NR-Ey{--stack-row-gap:0;--stack-column-gap:0;--stack-h-align:initial;--stack-v-align:initial;--stack-padding-inline-start:0;--stack-padding-inline-end:0;--stack-padding-block-start:0;--stack-padding-block-end:0;display:flex;flex-direction:column;align-items:var(--stack-h-align);justify-content:var(--stack-v-align);gap:var(--stack-row-gap) var(--stack-column-gap);max-inline-size:var(--stack-max-width,none);min-inline-size:var(--stack-min-width,none);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--stack-v-align);justify-content:var(--stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}&[data-stack-wrap=true]{flex-wrap:wrap}&[data-stack-has-padding=true]{padding:var(--stack-padding-block-start) var(--stack-padding-inline-end) var(--stack-padding-block-end) var(--stack-padding-inline-start)}&[data-stack-fill-children=true]>*{flex-grow:var(--vira-flex-grow,1)}}
+.stack-module_Stack_NR-Ey{--stack-row-gap:0;--stack-column-gap:0;--stack-h-align:initial;--stack-v-align:initial;--stack-padding-inline-start:0;--stack-padding-inline-end:0;--stack-padding-block-start:0;--stack-padding-block-end:0;display:flex;gap:var(--stack-row-gap) var(--stack-column-gap);flex-direction:column;align-items:var(--stack-h-align);justify-content:var(--stack-v-align);max-inline-size:var(--stack-max-width,none);min-inline-size:var(--stack-min-width,none);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--stack-v-align);justify-content:var(--stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--stack-padding-block-start) var(--stack-padding-inline-end) var(--stack-padding-block-end) var(--stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}

package/dist/components/stack/stack.js

@@ -1,5 +1,5 @@
-import './stack.css';
 "use client";
+import './stack.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";

package/dist/components/surface/surface.js

@@ -1,5 +1,5 @@
-import './surface.css';
 "use client";
+import './surface.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";

package/dist/components/switch/switch.js

@@ -1,5 +1,5 @@
-import './switch.css';
 "use client";
+import './switch.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
@@ -49,7 +49,10 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 				direction: "column",
 				fillChildren: false,
 				rowGap: size === "small" ? "2x-small" : "x-small",
-				children: [label && /* @__PURE__ */ jsx(FieldLabel, { children: label }), /* @__PURE__ */ jsx(FieldHelperCopy, {
+				children: [label && /* @__PURE__ */ jsx(FieldLabel, {
+					size: size === "small" ? "small" : "medium",
+					children: label
+				}), /* @__PURE__ */ jsx(FieldHelperCopy, {
 					description,
 					error
 				})]

package/dist/components/text/text.js

@@ -1,5 +1,5 @@
-import './text.css';
 "use client";
+import './text.css';
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import text_module_default from "./text.module.js";