@viraui/react 0.0.21 → 0.0.23

package/dist/components/icon/icon.css

@@ -1 +1 @@
-.icon-module_Icon_6DoBq{display:inline-flex;flex:none;vertical-align:middle;& [fill]{fill:currentcolor}& [stroke]{stroke:currentcolor}& [fill=none][stroke]{fill:none;stroke:currentcolor}}
+.viraui__icon-module__Icon_6DoBq{display:inline-flex;flex:none;vertical-align:middle;& [fill]{fill:currentcolor}& [stroke]{stroke:currentcolor}& [fill=none][stroke]{fill:none;stroke:currentcolor}}

package/dist/components/icon/icon.js

@@ -1,7 +1,7 @@
 import './icon.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import icon_module_default from "./icon.module.js";
-import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
 import { generatedDefaultIconVariant, generatedIconRegistry } from "#internal-icons/icon-registry";
 //#region src/components/icon/icon.tsx

package/dist/components/icon/icon.module.js

@@ -1,3 +1,3 @@
-var icon_module_default = { Icon: "icon-module_Icon_6DoBq" };
+var icon_module_default = { Icon: "viraui__icon-module__Icon_6DoBq" };
 //#endregion
 export { icon_module_default as default };

package/dist/components/icon-button/icon-button.d.ts

@@ -13,7 +13,7 @@ type AccessibleNameProps = {
  * Typed wrapper over `Button` for icon-only actions. Requires an accessible name
  * via `aria-label` or `aria-labelledby`.
  */
-export type IconButtonProps = Omit<ButtonProps, 'children' | 'iconPosition' | 'size'> & AccessibleNameProps & {
+export type IconButtonProps = Omit<ButtonProps, 'children' | 'addonPosition' | 'size'> & AccessibleNameProps & {
     /**
      * Controls the visual button size.
      *

package/dist/components/icon-button/icon-button.guide.json

@@ -13,7 +13,7 @@
     "Keep the accessible name stable when loading state changes"
   ],
   "antiPatterns": [
-    "Passing children or iconPosition — not part of the public API",
+    "Passing children or addonPosition — not part of the public API",
     "Using icon-only Button instead of IconButton"
   ],
   "related": ["Button", "Icon", "Spinner"]

package/dist/components/icon-button/icon-button.js

@@ -2,7 +2,7 @@ import { Button } from "../button/button.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon-button/icon-button.tsx
 var IconButton = ({ icon, size = "medium", ...props }) => /* @__PURE__ */ jsx(Button, {
-	icon,
+	addon: icon,
 	size,
 	...props
 });

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './avatar';
 export * from './avatar-group';
 export * from './chip';
+export * from './dialog';
 export * from './clamp-text';
 export * from './elevator';
 export * from './button';
@@ -12,12 +13,16 @@ export * from './textarea';
 export * from './slider';
 export * from './switch';
 export * from './checkbox';
+export * from './fieldset';
 export * from './radio';
 export * from './select';
 export * from './icon';
 export * from './skeleton';
 export * from './stack';
 export * from './surface';
+export * from './tabs';
 export * from './spinner';
+export * from './static-noise';
+export * from './progressive-blur';
 export * from './text';
 export * from './title';

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

@@ -1 +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%)}}
+.viraui__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);& .viraui__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)}& .viraui__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:viraui__linear-progress-module__linear-progress-indeterminate_g0cSO 1.4s var(--easing-standard) infinite;content:""}}}}@keyframes viraui__linear-progress-module__linear-progress-indeterminate_g0cSO{0%{transform:translateX(-120%)}to{transform:translateX(260%)}}

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

@@ -1,11 +1,10 @@
-"use client";
 import './linear-progress.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
 import { FieldLabel } from "../basic-input/field-label.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

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

@@ -1,8 +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"
+	LinearProgress: "viraui__linear-progress-module__LinearProgress_-KN0j",
+	"linear-progress-indeterminate": "viraui__linear-progress-module__linear-progress-indeterminate_g0cSO",
+	Track: "viraui__linear-progress-module__Track_qUz8P",
+	Indicator: "viraui__linear-progress-module__Indicator_maaZF"
 };
 //#endregion
 export { linear_progress_module_default as default };

package/dist/components/masonry/masonry-item.js

@@ -1,7 +1,6 @@
-"use client";
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import masonry_module_default from "./masonry.module.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/masonry/masonry-item.tsx
 var MasonryItem = ({ className, ref, render, spanAll = false, ...otherProps }) => {

package/dist/components/masonry/masonry.css

@@ -1 +1 @@
-.masonry-module_Masonry_l7c8U{--masonry-gap:var(--space-large);--masonry-column-fill:balance;--masonry-column-rule-color:var(--global-contrast);display:block;column-gap:var(--masonry-gap);column-fill:var(--masonry-column-fill);column-rule-color:var(--masonry-column-rule-color);columns:var(--masonry-column-width,auto) var(--masonry-column-count,auto);max-inline-size:100%}.masonry-module_Item_ywXwo{display:block;break-inside:avoid;margin:0;padding-block-end:var(--masonry-gap);&[data-masonry-item-span-all=true]{column-span:all}}
+.viraui__masonry-module__Masonry_l7c8U{--masonry-gap:var(--space-large);--masonry-column-fill:balance;--masonry-column-rule-color:var(--global-contrast);display:block;column-gap:var(--masonry-gap);column-fill:var(--masonry-column-fill);column-rule-color:var(--masonry-column-rule-color);columns:var(--masonry-column-width,auto) var(--masonry-column-count,auto)}.viraui__masonry-module__Item_ywXwo{display:block;break-inside:avoid;margin:0;padding-block-end:var(--masonry-gap);&[data-masonry-item-span-all=true]{column-span:all}}

package/dist/components/masonry/masonry.js

@@ -1,10 +1,9 @@
-"use client";
 import './masonry.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import masonry_module_default from "./masonry.module.js";
 import { MasonryItem } from "./masonry-item.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/masonry/masonry.tsx
 var MasonryRoot = ({ children, className, columnCount = 4, columnFill = "balance", columnRuleStyle, columnRuleWidth, columnWidth, gap = "large", ref, render, style, ...otherProps }) => {
@@ -14,8 +13,8 @@ var MasonryRoot = ({ children, className, columnCount = 4, columnFill = "balance
 		"--masonry-gap": resolveThemeValue(gap, "space", "var(--space-large)"),
 		"--masonry-column-fill": columnFill,
 		...usesColumnWidth ? { "--masonry-column-width": columnWidth } : { "--masonry-column-count": `${columnCount}` },
-		...columnRuleWidth ? { columnRuleWidth } : {},
-		...columnRuleStyle ? { columnRuleStyle } : {},
+		columnRuleWidth,
+		columnRuleStyle,
 		...style
 	};
 	return useRender({

package/dist/components/masonry/masonry.module.js

@@ -1,6 +1,6 @@
 var masonry_module_default = {
-	Masonry: "masonry-module_Masonry_l7c8U",
-	Item: "masonry-module_Item_ywXwo"
+	Masonry: "viraui__masonry-module__Masonry_l7c8U",
+	Item: "viraui__masonry-module__Item_ywXwo"
 };
 //#endregion
 export { masonry_module_default as default };

package/dist/components/progressive-blur/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressiveBlur } from './progressive-blur';
+export type { ProgressiveBlurProps } from './progressive-blur';

package/dist/components/progressive-blur/progressive-blur.css

@@ -0,0 +1 @@
+.viraui__progressive-blur-module__ProgressiveBlur_eIxTK{--progressive-blur:16px;pointer-events:none}.viraui__progressive-blur-module__Layer_zbzMS{position:absolute;inset:0;backdrop-filter:blur(calc(var(--progressive-blur) * var(--progressive-blur-factor)));mask-image:var(--progressive-blur-mask-image);.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=top] &{--progressive-blur-mask-image:linear-gradient(to top,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=right] &{--progressive-blur-mask-image:linear-gradient(to right,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=bottom] &{--progressive-blur-mask-image:linear-gradient(to bottom,var(--progressive-blur-mask-gradient))}.viraui__progressive-blur-module__ProgressiveBlur_eIxTK[data-direction=left] &{--progressive-blur-mask-image:linear-gradient(to left,var(--progressive-blur-mask-gradient))}}

package/dist/components/progressive-blur/progressive-blur.d.ts

@@ -0,0 +1,38 @@
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ProgressiveBlurDirection, ProgressiveBlurEasing } from './progressive-blur.utils';
+import type * as React from 'react';
+/**
+ * Public ProgressiveBlur props.
+ *
+ * Includes standard `div` attributes such as `id`, `className`, and event handlers,
+ * plus Vira-owned progressive backdrop blur controls.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type ProgressiveBlurProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+    /**
+     * Sets the maximum blur radius applied to the first layer at the selected edge.
+     *
+     * @default '16px'
+     */
+    blur?: string;
+    /**
+     * Selects the edge where maximum blur starts and fades toward the opposite edge.
+     *
+     * @default 'bottom'
+     */
+    direction?: ProgressiveBlurDirection;
+    /**
+     * Selects the easing curve used to distribute blur factors across internal layers.
+     *
+     * @default 'exponential'
+     */
+    easing?: ProgressiveBlurEasing;
+    /**
+     * Sets the number of internal blur layers. Values are clamped to `2..16`.
+     *
+     * @default Varies by easing: linear `6`, ease-in/out `8`, ease-in-out `10`, exponential `8`.
+     */
+    steps?: number;
+};
+export declare const ProgressiveBlur: React.FC<ProgressiveBlurProps>;

package/dist/components/progressive-blur/progressive-blur.guide.json

@@ -0,0 +1,25 @@
+{
+  "name": "ProgressiveBlur",
+  "summary": "Decorative stacked backdrop-filter overlay that ramps blur from one edge toward the opposite edge.",
+  "whenToUse": [
+    "Edge scrims on cards, sheets, heroes, or scroll regions where content should fade into blur",
+    "Glass or vibrant surfaces that need directional legibility without a hard blur cutoff",
+    "Decorative atmosphere where the parent owns semantics and layout positioning"
+  ],
+  "whenNotToUse": [
+    "Standalone loading or status feedback without a labeled parent region",
+    "Large full-viewport stacks with many simultaneous high-radius blur layers",
+    "Cases where a single uniform backdrop blur is sufficient"
+  ],
+  "accessibility": [
+    "ProgressiveBlur is decorative — the root renders with aria-hidden by default",
+    "Parent surface or region must expose any meaningful label or busy state",
+    "Consumer owns position, inset, z-index, and sizing for the overlay placement"
+  ],
+  "antiPatterns": [
+    "Stacking many full-viewport ProgressiveBlur instances on one screen",
+    "Driving layout size or scroll behavior from inside the overlay component",
+    "Embedding layout positioning rules inside the component stylesheet"
+  ],
+  "related": ["Surface", "StaticNoise"]
+}

package/dist/components/progressive-blur/progressive-blur.js

@@ -0,0 +1,39 @@
+import './progressive-blur.css';
+import { clsx } from "../../core/clsx.js";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import progressive_blur_module_default from "./progressive-blur.module.js";
+import { formatProgressiveBlurMaskGradient, getProgressiveBlurFactor, getProgressiveBlurMaskStops, resolveProgressiveBlurSteps } from "./progressive-blur.utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/progressive-blur/progressive-blur.tsx
+var ProgressiveBlur = ({ blur = "16px", className, direction = "bottom", easing = "exponential", ref, steps, style, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const resolvedSteps = resolveProgressiveBlurSteps(steps, easing);
+	const dynamicStyle = {
+		"--progressive-blur": blur,
+		...style
+	};
+	const layers = Array.from({ length: resolvedSteps }, (_, layerIndex) => {
+		const factor = getProgressiveBlurFactor(easing, layerIndex, resolvedSteps);
+		const maskGradient = formatProgressiveBlurMaskGradient(getProgressiveBlurMaskStops(layerIndex, resolvedSteps));
+		return /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: progressive_blur_module_default.Layer,
+			style: {
+				"--progressive-blur-factor": factor,
+				"--progressive-blur-mask-gradient": maskGradient
+			}
+		}, layerIndex);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		"aria-hidden": "true",
+		className: clsx(progressive_blur_module_default.ProgressiveBlur, className),
+		"data-direction": direction,
+		style: dynamicStyle,
+		children: layers
+	});
+};
+//#endregion
+export { ProgressiveBlur };

package/dist/components/progressive-blur/progressive-blur.module.js

@@ -0,0 +1,6 @@
+var progressive_blur_module_default = {
+	ProgressiveBlur: "viraui__progressive-blur-module__ProgressiveBlur_eIxTK",
+	Layer: "viraui__progressive-blur-module__Layer_zbzMS"
+};
+//#endregion
+export { progressive_blur_module_default as default };

package/dist/components/progressive-blur/progressive-blur.utils.d.ts

@@ -0,0 +1,14 @@
+export type ProgressiveBlurDirection = 'top' | 'right' | 'bottom' | 'left';
+export type ProgressiveBlurEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'exponential';
+export declare const PROGRESSIVE_BLUR_MIN_STEPS = 2;
+export declare const PROGRESSIVE_BLUR_MAX_STEPS = 16;
+export declare const resolveProgressiveBlurSteps: (steps: number | undefined, easing: ProgressiveBlurEasing) => number;
+export declare const getProgressiveBlurFactor: (easing: ProgressiveBlurEasing, layerIndex: number, totalSteps: number) => number;
+export type ProgressiveBlurMaskStops = {
+    p1: number;
+    p2: number;
+    p3: number;
+    p4: number;
+};
+export declare const getProgressiveBlurMaskStops: (layerIndex: number, totalSteps: number) => ProgressiveBlurMaskStops;
+export declare const formatProgressiveBlurMaskGradient: (stops: ProgressiveBlurMaskStops) => string;

package/dist/components/progressive-blur/progressive-blur.utils.js

@@ -0,0 +1,40 @@
+var DEFAULT_STEPS_BY_EASING = {
+	linear: 6,
+	"ease-in": 8,
+	"ease-out": 8,
+	"ease-in-out": 10,
+	exponential: 8
+};
+var resolveProgressiveBlurSteps = (steps, easing) => {
+	const resolved = steps ?? DEFAULT_STEPS_BY_EASING[easing];
+	return Math.min(16, Math.max(2, resolved));
+};
+var getProgressiveBlurFactor = (easing, layerIndex, totalSteps) => {
+	if (easing === "exponential") return .5 ** layerIndex;
+	const progress = layerIndex / (totalSteps - 1);
+	switch (easing) {
+		case "linear": return 1 - progress;
+		case "ease-in": return 1 - progress * progress;
+		case "ease-out": return 1 - (1 - (1 - progress) ** 2);
+		case "ease-in-out": return 1 - (progress < .5 ? 2 * progress * progress : 1 - (-2 * progress + 2) ** 2 / 2);
+		default: return 1 - progress;
+	}
+};
+var getProgressiveBlurMaskStops = (layerIndex, totalSteps) => {
+	const increment = 100 / totalSteps;
+	const maskIndex = totalSteps - layerIndex;
+	return {
+		p1: Math.round((increment * maskIndex - increment) * 10) / 10,
+		p2: Math.round(increment * maskIndex * 10) / 10,
+		p3: Math.round((increment * maskIndex + increment) * 10) / 10,
+		p4: Math.round((increment * maskIndex + increment * 2) * 10) / 10
+	};
+};
+var formatProgressiveBlurMaskGradient = (stops) => {
+	let gradient = `transparent ${stops.p1}%, black ${stops.p2}%`;
+	if (stops.p3 <= 100) gradient += `, black ${stops.p3}%`;
+	if (stops.p4 <= 100) gradient += `, transparent ${stops.p4}%`;
+	return gradient;
+};
+//#endregion
+export { formatProgressiveBlurMaskGradient, getProgressiveBlurFactor, getProgressiveBlurMaskStops, resolveProgressiveBlurSteps };

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

@@ -1,44 +1,11 @@
-import { FieldRoot, RadioGroup as RadioGroupPrimitive } from '@base-ui/react';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-import type * as React from 'react';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/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.
+ * Thin wrapper around Base UI `RadioGroup` with default option spacing.
+ * Compose with `Field.Root` and `Fieldset` for group labels, validation, and copy.
  *
  * @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>;
+export type RadioGroupProps<Value = string> = RadioGroupPrimitive.Props<Value>;
+export declare const RadioGroup: <Value>({ children, className, ...props }: RadioGroupProps<Value>) => import("react").JSX.Element;

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

@@ -1,54 +1,16 @@
-"use client";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
-import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
-import { FieldLabel } from "../basic-input/field-label.js";
-import radio_module_default from "./radio.module.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Field, Fieldset, RadioGroup } from "@base-ui/react";
+import { jsx } from "react/jsx-runtime";
+import { 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
-				})
-			]
-		})
-	});
-};
+var RadioGroup$1 = ({ children, className, ...props }) => /* @__PURE__ */ jsx(RadioGroup, {
+	...props,
+	className,
+	render: /* @__PURE__ */ jsx(Stack, {
+		"data-radiogroup": true,
+		fillChildren: false,
+		rowGap: "small"
+	}),
+	children
+});
 //#endregion
 export { RadioGroup$1 as RadioGroup };

package/dist/components/radio/radio.css

@@ -1 +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:100000px;corner-shape:unset;&[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;cursor:not-allowed}&[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:100000px;corner-shape:unset;background:currentColor}.radio-module_RadioRoot_3uvvn:not([data-checked]) .radio-module_Disk_pV-Q1{display:none}
+.viraui__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:100000px;corner-shape:unset;&[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]),[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],[data-disabled] &{--radio-background:var(--global-disabled-background);--radio-border-color:transparent;--radio-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__radio-module__Indicator_Ecavw{display:inline-flex;align-items:center;justify-content:center;color:var(--radio-indicator-color)}.viraui__radio-module__Disk_pV-Q1{inline-size:var(--radio-disk-size);aspect-ratio:1/1;border-radius:100000px;corner-shape:unset;background:currentColor}.viraui__radio-module__RadioRoot_3uvvn:not([data-checked]) .viraui__radio-module__Disk_pV-Q1{display:none}

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

@@ -5,7 +5,7 @@ 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.
+ * `invalid`, and `error` belong on an external `Field.Root` and `Fieldset`, not on individual options.
  *
  * @default Base UI pass-through props keep upstream defaults.
  */

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

@@ -2,25 +2,29 @@
   "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",
+    "Single selection from a small set of related options inside RadioGroup",
+    "RadioGroup alone inside Field.Root when each Radio has its own label and no shared group legend is needed",
+    "Field.Root > Fieldset render={<RadioGroup<Value> />} when the group needs a shared legend, description, or error",
     "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"
+    "Typed option unions with RadioGroup<'ssd' | 'hdd'> for value, defaultValue, and onValueChange safety"
   ],
   "whenNotToUse": [
     "Independent boolean toggles (use Checkbox or Switch)",
-    "Multi-select sets (use Checkbox)",
-    "Options rendered outside a RadioGroup wrapper"
+    "Multi-select sets (use CheckboxGroup)",
+    "Options rendered outside a RadioGroup wrapper",
+    "Assuming Fieldset is mandatory for every RadioGroup — add Fieldset only for shared legend or group copy",
+    "Group legend, description, or validation on RadioGroup props — use Field.Root and Fieldset instead"
   ],
   "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"
+    "Surface group invalid state and error copy through Field.Root and Fieldset, 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",
+    "Putting invalid or error on a single Radio instead of the enclosing Field.Root and Fieldset",
+    "Omitting the RadioGroup generic when option value props form a restricted union",
     "Importing @viraui/react/radio/radio.css or other component CSS subpaths in consumer bootstrap"
   ],
-  "related": ["Checkbox", "Surface", "Stack"]
+  "related": ["Fieldset", "Checkbox", "Surface", "Stack"]
 }

package/dist/components/radio/radio.js

@@ -1,45 +1,47 @@
-"use client";
 import './radio.css';
+import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.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",
+	return /* @__PURE__ */ jsx(Field.Item, { children: /* @__PURE__ */ jsx(Field.Label, {
+		className: radio_module_default.Label,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
+			columnGap: size === "small" ? "small" : "medium",
 			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]
-	}) }) });
+			vAlign: hasTextDescription ? "start" : "center",
+			hPadding,
+			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: "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

@@ -1,9 +1,7 @@
 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"
+	RadioRoot: "viraui__radio-module__RadioRoot_3uvvn",
+	Indicator: "viraui__radio-module__Indicator_Ecavw",
+	Disk: "viraui__radio-module__Disk_pV-Q1"
 };
 //#endregion
 export { radio_module_default as default };

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

@@ -1,9 +1,8 @@
-"use client";
+import { clsx } from "../../core/clsx.js";
 import { Stack } from "../stack/stack.js";
 import { Text } from "../text/text.js";
 import select_module_default from "./select.module.js";
 import { SelectIndicatorSlot } from "./select-indicator-slot.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select-group.tsx
@@ -23,6 +22,7 @@ function SelectGroup({ children, className, label, ...groupProps }) {
 				direction: "row",
 				fillChildren: false,
 				hPadding: "small",
+				vPadding: ["small", "small"],
 				vAlign: "center"
 			}),
 			children: [/* @__PURE__ */ jsx(Text, {