@viraui/react 0.0.22 → 0.0.24

package/dist/components/separator/separator.d.ts

@@ -0,0 +1,54 @@
+import { useRender } from '@base-ui/react/use-render';
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import type * as React from 'react';
+type SeparatorAxisPadding = ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
+type SeparatorSize = 'small' | 'medium' | 'large';
+/**
+ * Public Separator props.
+ *
+ * Includes standard `hr` attributes such as `id`, `title`, and event handlers,
+ * plus Vira-owned orientation, line thickness, Stack padding, and Base UI `render` support for replacing the line root.
+ *
+ * @default Native hr pass-through props keep React defaults.
+ */
+export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'hr'>, 'size'> & IntrinsicViraProps & {
+    /**
+     * Replaces the default `hr` line root using Base UI render semantics.
+     *
+     * @default The separator renders an `hr` line root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Ref forwarded to the rendered line root element.
+     *
+     * @default No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+    /**
+     * Sets the separator line direction.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Sets inline padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No inline padding.
+     */
+    hPadding?: SeparatorAxisPadding;
+    /**
+     * Sets block padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple.
+     *
+     * @default No block padding.
+     */
+    vPadding?: SeparatorAxisPadding;
+    /**
+     * Sets the line thickness preset.
+     *
+     * @default 'small'
+     */
+    size?: SeparatorSize;
+};
+export declare const Separator: React.FC<SeparatorProps>;
+export {};

package/dist/components/separator/separator.guide.json

@@ -0,0 +1,24 @@
+{
+  "name": "Separator",
+  "summary": "Thematic or content divider with horizontal or vertical orientation, token padding, and preset line thickness.",
+  "whenToUse": [
+    "Dividing sections within a page or panel",
+    "Vertical dividers in toolbars, menus, or button groups",
+    "Separating list items or stacked content blocks"
+  ],
+  "whenNotToUse": [
+    "Select dropdown option dividers — use Select.Separator",
+    "Surface borders or card outlines — use Surface border props"
+  ],
+  "accessibility": [
+    "Default hr provides a native thematic break for horizontal dividers",
+    "Vertical separators expose aria-orientation=\"vertical\" on the line root",
+    "Use render to swap the line root when a thematic break is not appropriate",
+    "Do not force aria-hidden — consumer decides decorative vs structural role"
+  ],
+  "antiPatterns": [
+    "Using Select.Separator for general layout dividers",
+    "Replacing Surface borders with Separator for container chrome"
+  ],
+  "related": ["Stack", "Surface", "Select"]
+}

package/dist/components/separator/separator.js

@@ -0,0 +1,43 @@
+import './separator.css';
+import { clsx } from "../../core/clsx.js";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import { Stack } from "../stack/stack.js";
+import separator_module_default from "./separator.module.js";
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/separator/separator.tsx
+var separatorSizeValues = {
+	small: 1,
+	medium: 2,
+	large: 3
+};
+var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "small", style, vPadding, ...otherProps }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const dynamicStyle = {
+		"--separator-size": `${separatorSizeValues[size]}px`,
+		...style
+	};
+	const line = useRender({
+		defaultTagName: "hr",
+		render,
+		ref,
+		props: {
+			...componentProps,
+			"data-separator-orientation": orientation,
+			"aria-orientation": orientation,
+			className: clsx(separator_module_default.Line, className),
+			style: dynamicStyle
+		}
+	});
+	return /* @__PURE__ */ jsx(Stack, {
+		direction: orientation === "vertical" ? "row" : "column",
+		fillChildren: false,
+		hPadding,
+		vAlign: orientation === "vertical" ? "stretch" : "initial",
+		vPadding,
+		...intrinsicAttributes,
+		children: line
+	});
+};
+//#endregion
+export { Separator };

package/dist/components/separator/separator.module.js

@@ -0,0 +1,3 @@
+var separator_module_default = { Line: "viraui__separator-module__Line_xXOe9" };
+//#endregion
+export { separator_module_default as default };

package/dist/components/skeleton/skeleton.css

@@ -1 +1 @@
-.skeleton-module_Skeleton_pn7Xk{--skeleton-background:var(--global-contrast);--skeleton-border-radius:var(--radius-small);--skeleton-inline-size:auto;--skeleton-block-size:auto;--skeleton-min-inline-size:var(--space-x-large);--skeleton-min-block-size:var(--space-medium);display:inline-block;box-sizing:border-box;inline-size:var(--skeleton-inline-size);block-size:var(--skeleton-block-size);min-inline-size:var(--skeleton-min-inline-size);min-block-size:var(--skeleton-min-block-size);max-inline-size:100%;background:var(--skeleton-background);border-radius:var(--skeleton-border-radius);vertical-align:middle;animation:skeleton-module_skeleton-fade_XHkG4 var(--duration-slow) var(--easing-standard) infinite alternate;@media (prefers-reduced-motion:reduce){animation:none}}@keyframes skeleton-module_skeleton-fade_XHkG4{0%{opacity:.52}to{opacity:1}}
+.viraui__skeleton-module__Skeleton_pn7Xk{--skeleton-background:var(--global-contrast);--skeleton-border-radius:var(--radius-small);--skeleton-inline-size:auto;--skeleton-block-size:auto;--skeleton-min-inline-size:var(--space-x-large);--skeleton-min-block-size:var(--space-medium);display:inline-block;box-sizing:border-box;inline-size:var(--skeleton-inline-size);block-size:var(--skeleton-block-size);min-inline-size:var(--skeleton-min-inline-size);min-block-size:var(--skeleton-min-block-size);max-inline-size:100%;background:var(--skeleton-background);border-radius:var(--skeleton-border-radius);vertical-align:middle;animation:viraui__skeleton-module__skeleton-fade_XHkG4 var(--duration-slow) var(--easing-standard) infinite alternate;@media (prefers-reduced-motion:reduce){animation:none}}@keyframes viraui__skeleton-module__skeleton-fade_XHkG4{0%{opacity:.52}to{opacity:1}}

package/dist/components/skeleton/skeleton.module.js

@@ -1,6 +1,6 @@
 var skeleton_module_default = {
-	Skeleton: "skeleton-module_Skeleton_pn7Xk",
-	"skeleton-fade": "skeleton-module_skeleton-fade_XHkG4"
+	Skeleton: "viraui__skeleton-module__Skeleton_pn7Xk",
+	"skeleton-fade": "viraui__skeleton-module__skeleton-fade_XHkG4"
 };
 //#endregion
 export { skeleton_module_default as default };

package/dist/components/slider/slider-control.js

@@ -1,4 +1,3 @@
-"use client";
 import { Stack } from "../stack/stack.js";
 import slider_module_default from "./slider.module.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/slider/slider.css

@@ -1 +1 @@
-.slider-module_Slider_vDNlm{--slider-track-size:var(--space-x-small);--slider-thumb-size:var(--space-medium);--slider-track-background:var(--global-contrast);--slider-progress-background:var(--global-primary);--slider-thumb-background:var(--base-1);inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--slider-progress-background:var(--highlight-red)}&:has(.slider-module_SliderRoot_4JScw[data-disabled]),&[data-disabled]{--slider-track-background:var(--global-disabled-background);--slider-progress-background:var(--global-disabled-foreground);--slider-thumb-background:var(--global-disabled-foreground);cursor:not-allowed}}.slider-module_SliderRoot_4JScw{block-size:100%;min-block-size:0}.slider-module_SliderHeader_gOy9k,.slider-module_SliderRoot_4JScw{inline-size:100%;min-inline-size:0}.slider-module_Value_FaY9i{flex-shrink:0}.slider-module_SliderControl_FQd5-{position:relative;flex:1 1 auto;user-select:none;touch-action:none;inline-size:100%;block-size:var(--slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--slider-track-size);block-size:100%;>.slider-module_Track_wvLEH{inline-size:var(--slider-track-size);block-size:100%}}}.slider-module_Track_wvLEH{position:relative;overflow:visible;inline-size:100%;block-size:var(--slider-track-size);background:var(--slider-track-background);border-radius:var(--radius-infinite)}.slider-module_Indicator_y3JyJ{background:var(--slider-progress-background);border-radius:inherit}.slider-module_Thumb_S-uLF{box-sizing:border-box;inline-size:var(--slider-thumb-size);block-size:calc(var(--slider-thumb-size) / 1.5);background:var(--slider-thumb-background);border:2px solid var(--slider-progress-background);border-radius:var(--radius-x-small);appearance:none;transition:scale var(--easing-elastic) var(--duration-slow);&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing;scale:1.2}&:has(>input:focus-visible){outline:2px solid var(--global-foreground);outline-offset:2px;z-index:1}>input:focus-visible{outline:none}}
+.viraui__slider-module__Slider_vDNlm{--slider-track-size:var(--space-x-small);--slider-thumb-size:var(--space-medium);--slider-track-background:var(--global-contrast);--slider-progress-background:var(--global-primary);--slider-thumb-background:contrast-color(var(--global-primary));inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;&:has([required]) .viraui__slider-module__Label_eQQHf:after{content:" ＊";color:var(--highlight-red)}&[data-invalid]{--slider-progress-background:var(--highlight-red)}&:has(.viraui__slider-module__SliderRoot_4JScw[data-disabled]),&[data-disabled]{--slider-track-background:var(--global-disabled-background);--slider-progress-background:var(--global-disabled-foreground);--slider-thumb-background:var(--global-disabled-foreground);cursor:not-allowed}}.viraui__slider-module__SliderRoot_4JScw{inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0}.viraui__slider-module__SliderHeader_gOy9k{inline-size:100%;min-inline-size:0}.viraui__slider-module__Value_FaY9i{flex-shrink:0}.viraui__slider-module__SliderControl_FQd5-{position:relative;flex:1 1 auto;user-select:none;touch-action:none;inline-size:100%;block-size:var(--slider-track-size);min-inline-size:0;min-block-size:0;&[data-orientation=vertical]{inline-size:var(--slider-track-size);block-size:100%;>.viraui__slider-module__Track_wvLEH{inline-size:var(--slider-track-size);block-size:100%}}}.viraui__slider-module__Track_wvLEH{position:relative;overflow:visible;inline-size:100%;block-size:var(--slider-track-size);background:var(--slider-track-background);border-radius:var(--radius-infinite)}.viraui__slider-module__Indicator_y3JyJ{background:var(--slider-progress-background);border-radius:inherit}.viraui__slider-module__Thumb_S-uLF{box-sizing:border-box;inline-size:var(--slider-thumb-size);block-size:calc(var(--slider-thumb-size) - 2px);background:var(--slider-thumb-background);border:2px solid var(--slider-progress-background);border-radius:var(--radius-x-small);appearance:none;transition:scale var(--easing-elastic) var(--duration-slow);&:not(:disabled,[data-disabled]){cursor:grab}&:not(:disabled,[data-disabled]):active,&:not(:disabled,[data-disabled]):has(>input:active),&:not(:disabled,[data-disabled])[data-dragging]:has(>input:focus){cursor:grabbing;scale:1.2}&:has(>input:focus-visible){outline:var(--outline);outline-offset:var(--outline-offset)}>input:focus-visible{outline:none}}

package/dist/components/slider/slider.js

@@ -1,4 +1,3 @@
-"use client";
 import './slider.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
@@ -53,12 +52,11 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 			children: [(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
 				className: slider_module_default.SliderHeader,
 				direction: isVertical ? "column" : "row",
-				fillChildren: false,
 				columnGap: "small",
 				vAlign: "end",
 				hAlign: isVertical ? "center" : "space-between",
 				children: [label && /* @__PURE__ */ jsx(Field.Label, {
-					"data-field-label": "",
+					className: slider_module_default.Label,
 					children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
 				}), showValue && /* @__PURE__ */ jsx(Text, {
 					className: slider_module_default.Value,

package/dist/components/slider/slider.module.js

@@ -1,12 +1,13 @@
 var slider_module_default = {
-	Slider: "slider-module_Slider_vDNlm",
-	SliderRoot: "slider-module_SliderRoot_4JScw",
-	SliderHeader: "slider-module_SliderHeader_gOy9k",
-	Value: "slider-module_Value_FaY9i",
-	SliderControl: "slider-module_SliderControl_FQd5-",
-	Track: "slider-module_Track_wvLEH",
-	Indicator: "slider-module_Indicator_y3JyJ",
-	Thumb: "slider-module_Thumb_S-uLF"
+	Slider: "viraui__slider-module__Slider_vDNlm",
+	Label: "viraui__slider-module__Label_eQQHf",
+	SliderRoot: "viraui__slider-module__SliderRoot_4JScw",
+	SliderHeader: "viraui__slider-module__SliderHeader_gOy9k",
+	Value: "viraui__slider-module__Value_FaY9i",
+	SliderControl: "viraui__slider-module__SliderControl_FQd5-",
+	Track: "viraui__slider-module__Track_wvLEH",
+	Indicator: "viraui__slider-module__Indicator_y3JyJ",
+	Thumb: "viraui__slider-module__Thumb_S-uLF"
 };
 //#endregion
 export { slider_module_default as default };

package/dist/components/spinner/spinner.css

@@ -1 +1 @@
-.spinner-module_Spinner_qCQzj{--spinner-size:var(--space-x-large);display:inline-block;inline-size:var(--spinner-size);block-size:var(--spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=small]{--spinner-size:var(--space-medium)}&[data-dimension=regular]{--spinner-size:var(--space-large)}}.spinner-module_Glyph_OV-cy>path{transform-origin:8px 8px;animation:spinner-module_spinner-bars_jDmaB var(--duration-slowest) infinite}.spinner-module_Glyph_OV-cy>path:first-child,.spinner-module_Glyph_OV-cy>path:nth-child(3){opacity:.3;transform:scaleY(.5);animation-delay:calc(var(--duration-slowest) / -2)}@keyframes spinner-module_spinner-bars_jDmaB{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.5)}}
+.viraui__spinner-module__Spinner_qCQzj{--spinner-size:var(--space-x-large);display:inline-block;inline-size:var(--spinner-size);block-size:var(--spinner-size);flex:none;vertical-align:middle;color:currentColor;&[data-dimension=small]{--spinner-size:var(--space-medium)}&[data-dimension=regular]{--spinner-size:var(--space-large)}}.viraui__spinner-module__Glyph_OV-cy>path{transform-origin:8px 8px;animation:viraui__spinner-module__spinner-bars_jDmaB var(--duration-slowest) infinite}.viraui__spinner-module__Glyph_OV-cy>path:first-child,.viraui__spinner-module__Glyph_OV-cy>path:nth-child(3){opacity:.3;transform:scaleY(.5);animation-delay:calc(var(--duration-slowest) / -2)}@keyframes viraui__spinner-module__spinner-bars_jDmaB{0%,to{opacity:1;transform:scaleY(1)}50%{opacity:.3;transform:scaleY(.5)}}

package/dist/components/spinner/spinner.js

@@ -14,8 +14,8 @@ var Spinner = ({ className, color, size = "big", ref, style, ...otherProps }) =>
 		"data-dimension": size,
 		viewBox: "0 0 16 16",
 		xmlns: "http://www.w3.org/2000/svg",
-		...color ? { color } : {},
-		...style ? { style } : {},
+		color,
+		style,
 		children: /* @__PURE__ */ jsxs("g", {
 			className: spinner_module_default.Glyph,
 			fill: "currentColor",

package/dist/components/spinner/spinner.module.js

@@ -1,7 +1,7 @@
 var spinner_module_default = {
-	Spinner: "spinner-module_Spinner_qCQzj",
-	Glyph: "spinner-module_Glyph_OV-cy",
-	"spinner-bars": "spinner-module_spinner-bars_jDmaB"
+	Spinner: "viraui__spinner-module__Spinner_qCQzj",
+	Glyph: "viraui__spinner-module__Glyph_OV-cy",
+	"spinner-bars": "viraui__spinner-module__spinner-bars_jDmaB"
 };
 //#endregion
 export { spinner_module_default as default };

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;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)}}
+.viraui__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.d.ts

@@ -53,13 +53,13 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & IntrinsicViraPr
     /**
      * Sets the gap between flex rows using the Vira space token scale.
      *
-     * @default 'medium'
+     * @default No row gap.
      */
     rowGap?: StackSpace;
     /**
      * Sets the gap between flex columns using the Vira space token scale.
      *
-     * @default 'medium'
+     * @default No column gap.
      */
     columnGap?: StackSpace;
     /**

package/dist/components/stack/stack.js

@@ -1,4 +1,3 @@
-"use client";
 import './stack.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";

package/dist/components/stack/stack.module.js

@@ -1,3 +1,3 @@
-var stack_module_default = { Stack: "stack-module_Stack_NR-Ey" };
+var stack_module_default = { Stack: "viraui__stack-module__Stack_NR-Ey" };
 //#endregion
 export { stack_module_default as default };

package/dist/components/static-noise/static-noise.css

@@ -1 +1 @@
-.static-noise-module_StaticNoise_ZhNxO{pointer-events:none;margin:0}.static-noise-module_FilterSvg_0CP2y{display:block}
+.viraui__static-noise-module__StaticNoise_ZhNxO{pointer-events:none;margin:0}.viraui__static-noise-module__FilterSvg_0CP2y{display:block}

package/dist/components/static-noise/static-noise.d.ts

@@ -18,7 +18,7 @@ export type StaticNoiseProps = React.ComponentPropsWithRef<'figure'> & Intrinsic
     /**
      * Sets the rendered overlay opacity.
      *
-     * @default 0.1
+     * @default 0.2
      */
     opacity?: number;
     /**

package/dist/components/static-noise/static-noise.js

@@ -1,3 +1,4 @@
+"use client";
 import './static-noise.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
@@ -6,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
 //#region src/components/static-noise/static-noise.tsx
 var STATIC_NOISE_SEED_FRAMES = "1;5;2;9;3;7;4;11;6;13;8;15;10;17;12;19;14;16;18;20;3;8;1;13";
-var StaticNoise = ({ animate = false, baseFrequency = .5, className, mixBlendMode = "multiply", opacity = .15, ref, style, ...otherProps }) => {
+var StaticNoise = ({ animate = false, baseFrequency = .5, className, mixBlendMode = "difference", opacity = .2, ref, style, ...otherProps }) => {
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const reactId = useId();
 	const dynamicStyle = {

package/dist/components/static-noise/static-noise.module.js

@@ -1,6 +1,6 @@
 var static_noise_module_default = {
-	StaticNoise: "static-noise-module_StaticNoise_ZhNxO",
-	FilterSvg: "static-noise-module_FilterSvg_0CP2y"
+	StaticNoise: "viraui__static-noise-module__StaticNoise_ZhNxO",
+	FilterSvg: "viraui__static-noise-module__FilterSvg_0CP2y"
 };
 //#endregion
 export { static_noise_module_default as default };

package/dist/components/surface/surface-radius-context.d.ts

@@ -1,6 +1,14 @@
 import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 export type SurfaceRadius = ThemeTypes['radius'] | 'auto';
+export type SurfaceRadiusCornerInput = ThemeTypes['radius'] | 0;
+export type SurfaceRadiusCornersInput = [
+    SurfaceRadiusCornerInput,
+    SurfaceRadiusCornerInput,
+    SurfaceRadiusCornerInput,
+    SurfaceRadiusCornerInput
+];
+export type SurfaceRadiusInput = SurfaceRadius | SurfaceRadiusCornersInput;
 export type SurfacePadding = ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
 export type SurfaceRadiusCorners = {
     topLeft: string;
@@ -20,7 +28,7 @@ export type SurfaceRadiusContextValue = {
 };
 export type SurfaceRadiusDefaults = {
     hPadding?: SurfacePadding | undefined;
-    radius?: SurfaceRadius | undefined;
+    radius?: SurfaceRadiusInput | undefined;
     style?: React.CSSProperties | undefined;
     vPadding?: SurfacePadding | undefined;
 };

package/dist/components/surface/surface-radius-context.js

@@ -23,6 +23,14 @@ var resolveTokenRadiusCorners = (radius) => ({
 	bottomRight: radius,
 	bottomLeft: radius
 });
+var isPerCornerRadius = (value) => Array.isArray(value);
+var resolveRadiusToken = (value) => toCssLength(resolveThemeValue(value, "radius", 0));
+var resolvePerCornerRadiusInput = (corners) => ({
+	topLeft: resolveRadiusToken(corners[0]),
+	topRight: resolveRadiusToken(corners[1]),
+	bottomRight: resolveRadiusToken(corners[2]),
+	bottomLeft: resolveRadiusToken(corners[3])
+});
 var getSurfaceStyleRadius = (style) => style?.["--surface-border-radius"];
 var getSurfaceRadiusStyle = (radius) => ({
 	"--surface-border-radius-top-left": radius.topLeft,
@@ -31,11 +39,11 @@ var getSurfaceRadiusStyle = (radius) => ({
 	"--surface-border-radius-bottom-left": radius.bottomLeft
 });
 var resolveDefaultContext = ({ hPadding, radius, style, vPadding }) => {
-	const resolvedRadius = toCssLength(resolveThemeValue(radius, "radius", 0));
 	const [paddingInlineStart, paddingInlineEnd] = resolveAxisPaddingValues(hPadding);
 	const [paddingBlockStart, paddingBlockEnd] = resolveAxisPaddingValues(vPadding);
+	const styleRadius = getSurfaceStyleRadius(style);
 	return {
-		radius: resolveTokenRadiusCorners(toCssLength(getSurfaceStyleRadius(style) ?? resolvedRadius)),
+		radius: isPerCornerRadius(radius) ? resolvePerCornerRadiusInput(radius) : resolveTokenRadiusCorners(toCssLength(styleRadius ?? resolveRadiusToken(radius === "auto" ? void 0 : radius))),
 		padding: {
 			inlineStart: paddingInlineStart,
 			inlineEnd: paddingInlineEnd,
@@ -47,9 +55,12 @@ var resolveDefaultContext = ({ hPadding, radius, style, vPadding }) => {
 var useSurfaceRadius = ({ defaults, hPadding, radius, style, vPadding }) => {
 	const parentContext = useSurfaceRadiusContext() ?? resolveDefaultContext(defaults);
 	const hasAutoRadius = radius === "auto";
-	const resolvedRadius = toCssLength(hasAutoRadius ? void 0 : resolveThemeValue(radius, "radius", 0));
-	const tokenRadius = toCssLength(getSurfaceStyleRadius(style) ?? resolvedRadius);
-	const ownRadius = hasAutoRadius ? resolveAutoRadiusCorners(parentContext) : resolveTokenRadiusCorners(tokenRadius);
+	const hasPerCornerRadius = isPerCornerRadius(radius);
+	const tokenRadius = toCssLength(getSurfaceStyleRadius(style) ?? (hasAutoRadius || hasPerCornerRadius ? void 0 : resolveRadiusToken(radius)));
+	let ownRadius;
+	if (hasAutoRadius) ownRadius = resolveAutoRadiusCorners(parentContext);
+	else if (hasPerCornerRadius) ownRadius = resolvePerCornerRadiusInput(radius);
+	else ownRadius = resolveTokenRadiusCorners(tokenRadius);
 	const [paddingInlineStart, paddingInlineEnd] = resolveAxisPaddingValues(hPadding);
 	const [paddingBlockStart, paddingBlockEnd] = resolveAxisPaddingValues(vPadding);
 	return {
@@ -63,7 +74,7 @@ var useSurfaceRadius = ({ defaults, hPadding, radius, style, vPadding }) => {
 			}
 		},
 		hasAutoRadius,
-		radiusStyle: hasAutoRadius ? getSurfaceRadiusStyle(ownRadius) : { "--surface-border-radius": tokenRadius }
+		radiusStyle: hasAutoRadius || hasPerCornerRadius ? getSurfaceRadiusStyle(ownRadius) : { "--surface-border-radius": tokenRadius }
 	};
 };
 //#endregion

package/dist/components/surface/surface.css

@@ -1 +1 @@
-.surface-module_Surface_slEYq{--surface-background-hover:var(--surface-background);--surface-border-radius:0;--surface-border-radius-top-left:var(--surface-border-radius);--surface-border-radius-top-right:var(--surface-border-radius);--surface-border-radius-bottom-right:var(--surface-border-radius);--surface-border-radius-bottom-left:var(--surface-border-radius);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;--surface-vibrancy-background:var(--is-vibrancy-active) oklab(from var(--surface-background) l a b/80%);position:relative;box-sizing:border-box;background:var(--surface-vibrancy-background,var(--surface-background,transparent));border-radius:var(--surface-border-radius-top-left) var(--surface-border-radius-top-right) var(--surface-border-radius-bottom-right) var(--surface-border-radius-bottom-left);border:0;&[data-surface-radius=auto]{--surface-border-radius-top-left:0;--surface-border-radius-top-right:0;--surface-border-radius-bottom-right:0;--surface-border-radius-bottom-left:0}&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{animation:surface-module_surface-background-hover_HwH9- var(--duration-fast) var(--easing-standard);animation-fill-mode:both}}}@keyframes surface-module_surface-background-hover_HwH9-{to{background:var(--surface-background-hover)}}
+.viraui__surface-module__Surface_slEYq{--surface-border-radius:0;--surface-border-radius-top-left:var(--surface-border-radius);--surface-border-radius-top-right:var(--surface-border-radius);--surface-border-radius-bottom-right:var(--surface-border-radius);--surface-border-radius-bottom-left:var(--surface-border-radius);--surface-padding-inline-start:0;--surface-padding-inline-end:0;--surface-padding-block-start:0;--surface-padding-block-end:0;--surface-background-hover:var(--surface-background);--surface-overflow:visible;--surface-vibrancy-background:var(--is-vibrancy-active) oklab(from var(--surface-background) l a b/80%);position:relative;overflow:var(--surface-overflow);box-sizing:border-box;background:var(--surface-vibrancy-background,var(--surface-background,transparent));border-radius:var(--surface-border-radius-top-left) var(--surface-border-radius-top-right) var(--surface-border-radius-bottom-right) var(--surface-border-radius-bottom-left);border:0;&[data-surface-radius=auto]{--surface-border-radius-top-left:0;--surface-border-radius-top-right:0;--surface-border-radius-bottom-right:0;--surface-border-radius-bottom-left:0}&[data-surface-has-padding=true]{padding:var(--surface-padding-block-start) var(--surface-padding-inline-end) var(--surface-padding-block-end) var(--surface-padding-inline-start)}&[data-surface-border]{border-style:var(--surface-border-style,solid);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--surface-background-hover)}}}

package/dist/components/surface/surface.d.ts

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
 import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-import { SurfacePadding, SurfaceRadius } from './surface-radius-context';
+import { SurfacePadding, SurfaceRadiusInput } from './surface-radius-context';
 import type * as React from 'react';
 /** Base ramp layer for nested surfaces; clamped to 1–3 at runtime. */
 type SurfaceBaseLevel = 1 | 2 | 3;
@@ -51,11 +51,11 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      */
     borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
     /**
-     * Sets the corner radius from the Vira radius token scale, or derives concentric radii from the nearest ancestor Surface.
+     * Sets corner radius from the Vira radius token scale, a per-corner `[top-left, top-right, bottom-right, bottom-left]` tuple (`0` for square corners), or `auto` for concentric radii from the nearest ancestor Surface.
      *
      * @default No radius.
      */
-    radius?: SurfaceRadius;
+    radius?: SurfaceRadiusInput;
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *
@@ -68,6 +68,12 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      * @default No block padding.
      */
     vPadding?: SurfacePadding;
+    /**
+     * Sets root overflow through the `--surface-overflow` custom property.
+     *
+     * @default visible
+     */
+    overflow?: React.CSSProperties['overflow'];
 };
 export declare const Surface: React.FC<SurfaceProps>;
 export {};

package/dist/components/surface/surface.guide.json

@@ -6,8 +6,10 @@
     "Popup or card chrome with optional hover background",
     "Compose with Elevator for animated elevation transitions",
     "Set radius to a token on the outermost Surface that needs rounded corners",
+    "Set radius to a four-value tuple [top-left, top-right, bottom-right, bottom-left] when corners need different token radii",
     "Set radius=\"auto\" on a nested Surface when its parent Surface has a radius so each corner subtracts the nearest ancestor padding and stays concentric",
-    "Stack nested auto-radius Surfaces recursively; context still resolves through wrapper layout such as Stack"
+    "Stack nested auto-radius Surfaces recursively; context still resolves through wrapper layout such as Stack",
+    "Set overflow=\"hidden\" (or scroll/auto) when Surface must clip or scroll inner content with radius or padding"
   ],
   "whenNotToUse": [
     "Interactive control semantics without an appropriate render root",

package/dist/components/surface/surface.js

@@ -20,8 +20,7 @@ var surfaceDefaultRadiusProps = {
 	style: void 0,
 	vPadding: void 0
 };
-var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hoverColor, radius, ref, render, style, vPadding, ...otherProps }) => {
-	const hasColor = color !== void 0;
+var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hoverColor, overflow, radius, ref, render, style, vPadding, ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
 	const hasHoverColor = hoverColor !== void 0;
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
@@ -33,9 +32,10 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 		vPadding
 	});
 	const dynamicStyle = {
-		...hasColor ? { "--surface-background": toSurfaceColor(color) } : {},
+		"--surface-background": toSurfaceColor(color ?? "none"),
 		...hasHoverColor ? { "--surface-background-hover": toSurfaceColor(hoverColor) } : {},
 		...border ? { "--surface-border-style": borderStyle } : {},
+		"--surface-overflow": overflow,
 		...radiusStyle,
 		...resolveAxisPadding(hPadding, "--surface-padding-inline-start", "--surface-padding-inline-end"),
 		...resolveAxisPadding(vPadding, "--surface-padding-block-start", "--surface-padding-block-end"),

package/dist/components/surface/surface.module.js

@@ -1,6 +1,3 @@
-var surface_module_default = {
-	Surface: "surface-module_Surface_slEYq",
-	"surface-background-hover": "surface-module_surface-background-hover_HwH9-"
-};
+var surface_module_default = { Surface: "viraui__surface-module__Surface_slEYq" };
 //#endregion
 export { surface_module_default as default };

package/dist/components/switch/switch.css

@@ -1 +1 @@
-.switch-module_Switch_L86y7{--switch-track-block-size:var(--space-large);--switch-track-radius:var(--radius-small);--switch-track-background:var(--global-contrast);--switch-thumb-background:var(--global-primary);--switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--switch-thumb-inset:var(--space-2x-small);--switch-thumb-radius:calc(var(--radius-x-small) + var(--switch-thumb-inset));&:has([required]) [data-field-label]:after{content:" ＊";color:var(--highlight-red)}}.switch-module_SwitchRoot_Zv9An{position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--switch-thumb-size) * 2) + var(--switch-thumb-inset) * 2);block-size:var(--switch-track-block-size);background:var(--switch-track-background);border-radius:var(--switch-track-radius);&[data-size=small]{--switch-track-radius:var(--radius-x-small);--switch-track-block-size:var(--space-medium);--switch-thumb-size:calc(var(--space-medium) - var(--space-x-small));--switch-thumb-radius:calc(var(--radius-x-small) - var(--switch-thumb-inset))}&[data-checked]:not([data-disabled]):not([data-invalid]){--switch-track-background:var(--global-primary);--switch-thumb-background:var(--base-1)}&[data-invalid]:not([data-disabled]),.switch-module_Switch_L86y7[data-invalid]>&:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.switch-module_Switch_L86y7[data-disabled]>&{--switch-track-background:var(--global-disabled-background);--switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.switch-module_Thumb_ldwJw{position:absolute;inset-block:var(--switch-thumb-inset);inset-inline-start:var(--switch-thumb-inset);background:var(--switch-thumb-background);inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);.switch-module_SwitchRoot_Zv9An[data-checked]>&{translate:100% 0}.switch-module_SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}
+.viraui__switch-module__Switch_L86y7{--switch-track-block-size:var(--space-large);--switch-track-radius:var(--radius-small);--switch-track-background:var(--global-contrast);--switch-thumb-background:var(--base-7);--switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--switch-thumb-inset:var(--space-2x-small);&:has([required]) .viraui__switch-module__Label_9R-rv:after{content:" ＊";color:var(--highlight-red)}}.viraui__switch-module__SwitchRoot_Zv9An{position:relative;appearance:none;border:0;box-shadow:none;inline-size:calc((var(--switch-thumb-size) * 2) + var(--switch-thumb-inset) * 2);block-size:var(--switch-track-block-size);background:var(--switch-track-background);border-radius:var(--switch-track-radius);&[data-size=small]{--switch-track-radius:var(--radius-x-small);--switch-track-block-size:var(--space-medium);--switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]):not([data-invalid]){--switch-track-background:var(--global-primary);--switch-thumb-background:contrast-color(var(--global-primary))}&[data-invalid]:not([data-disabled]),.viraui__switch-module__Switch_L86y7[data-invalid]>&:not([data-disabled]){box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],.viraui__switch-module__Switch_L86y7[data-disabled]>&{--switch-track-background:var(--global-disabled-background);--switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--switch-thumb-radius:calc(var(--switch-track-radius) - var(--switch-thumb-inset));position:absolute;inset-block:var(--switch-thumb-inset);inset-inline-start:var(--switch-thumb-inset);background:var(--switch-thumb-background);inline-size:var(--switch-thumb-size);block-size:var(--switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}

package/dist/components/switch/switch.js

@@ -1,4 +1,3 @@
-"use client";
 import './switch.css';
 import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
@@ -30,35 +29,38 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 			fillChildren: false,
 			vAlign: hasTextDescription ? "start" : "center"
 		}),
-		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(Switch.Root, {
-				...componentProps,
-				className: clsx(switch_module_default.SwitchRoot, className),
-				"data-shrink": "false",
-				"data-size": size,
-				disabled,
-				name,
-				ref,
-				children: /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.Thumb })
-			}), label || description || error ? /* @__PURE__ */ jsxs(Stack, {
-				direction: "column",
+		children: /* @__PURE__ */ jsx(Field.Label, {
+			className: switch_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,
-					error
-				})]
-			}) : null]
-		}) })
+				vAlign: hasTextDescription ? "start" : "center",
+				hPadding,
+				vPadding,
+				children: [/* @__PURE__ */ jsx(Switch.Root, {
+					...componentProps,
+					className: clsx(switch_module_default.SwitchRoot, className),
+					"data-shrink": "false",
+					"data-size": size,
+					disabled,
+					name,
+					ref,
+					children: /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.Thumb })
+				}), label || description || error ? /* @__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,
+						error
+					})]
+				}) : null]
+			})
+		})
 	});
 };
 //#endregion

package/dist/components/switch/switch.module.js

@@ -1,7 +1,8 @@
 var switch_module_default = {
-	Switch: "switch-module_Switch_L86y7",
-	SwitchRoot: "switch-module_SwitchRoot_Zv9An",
-	Thumb: "switch-module_Thumb_ldwJw"
+	Switch: "viraui__switch-module__Switch_L86y7",
+	Label: "viraui__switch-module__Label_9R-rv",
+	SwitchRoot: "viraui__switch-module__SwitchRoot_Zv9An",
+	Thumb: "viraui__switch-module__Thumb_ldwJw"
 };
 //#endregion
 export { switch_module_default as default };

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

@@ -0,0 +1,6 @@
+export { Tabs } from './tabs';
+export type { TabsProps } from './tabs';
+export type { TabsTabProps } from './tabs-tab';
+export type { TabsListProps } from './tabs-list';
+export type { TabsPanelProps } from './tabs-panel';
+export type { TabsViewportProps } from './tabs-viewport';

package/dist/components/tabs/tabs-indicator.d.ts

@@ -0,0 +1,9 @@
+import { TabsIndicator as TabsIndicatorPrimitive } from '@base-ui/react/tabs';
+import type * as React from 'react';
+/**
+ * Internal active tab indicator for `Tabs.List`.
+ *
+ * Positioned with Base UI `--active-tab-*` CSS variables.
+ */
+export type TabsIndicatorProps = TabsIndicatorPrimitive.Props;
+export declare const TabsIndicator: React.FC<TabsIndicatorProps>;

package/dist/components/tabs/tabs-indicator.js

@@ -0,0 +1,16 @@
+import { Surface } from "../surface/surface.js";
+import tabs_module_default from "./tabs.module.js";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs-indicator.tsx
+var TabsIndicator = ({ className, ref, ...props }) => /* @__PURE__ */ jsx(Tabs.Indicator, {
+	render: /* @__PURE__ */ jsx(Surface, {
+		border: "all",
+		radius: "auto",
+		color: 3
+	}),
+	className: tabs_module_default.Indicator,
+	...props
+});
+//#endregion
+export { TabsIndicator };