@viraui/react 0.0.22 → 0.0.23

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 };

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

@@ -0,0 +1,12 @@
+import { TabsList as TabsListPrimitive } from '@base-ui/react/tabs';
+import type * as React from 'react';
+/**
+ * Public Tabs.List props.
+ *
+ * Wraps Base UI `Tabs.List` in a compact `Surface`, lays out items with `Stack`,
+ * and renders the active tab indicator internally.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type TabsListProps = TabsListPrimitive.Props;
+export declare const TabsList: React.FC<TabsListProps>;

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

@@ -0,0 +1,29 @@
+import { clsx } from "../../core/clsx.js";
+import { Stack } from "../stack/stack.js";
+import { Surface } from "../surface/surface.js";
+import tabs_module_default from "./tabs.module.js";
+import { TabsIndicator } from "./tabs-indicator.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs-list.tsx
+var TabsList = ({ children, className, activateOnFocus = true, ref, ...props }) => /* @__PURE__ */ jsx(Tabs.List, {
+	className: clsx(tabs_module_default.List, className),
+	activateOnFocus,
+	render: /* @__PURE__ */ jsx(Surface, {
+		color: 1,
+		border: "all",
+		hPadding: "2x-small",
+		radius: "medium",
+		vPadding: "2x-small"
+	}),
+	...props,
+	children: /* @__PURE__ */ jsxs(Stack, {
+		direction: "row",
+		columnGap: "small",
+		hAlign: "start",
+		vAlign: "center",
+		children: [/* @__PURE__ */ jsx(TabsIndicator, {}), children]
+	})
+});
+//#endregion
+export { TabsList };

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

@@ -0,0 +1,11 @@
+import { TabsPanel as TabsPanelPrimitive } from '@base-ui/react/tabs';
+import type * as React from 'react';
+/**
+ * Public Tabs.Panel props.
+ *
+ * Base UI `Tabs.Panel` with entry slide/fade animation.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type TabsPanelProps = TabsPanelPrimitive.Props;
+export declare const TabsPanel: React.FC<TabsPanelProps>;

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

@@ -0,0 +1,13 @@
+import { clsx } from "../../core/clsx.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-panel.tsx
+var TabsPanel = ({ children, className, ref, ...props }) => /* @__PURE__ */ jsx(Tabs.Panel, {
+	ref,
+	className: clsx(tabs_module_default.Panel, className),
+	...props,
+	children
+});
+//#endregion
+export { TabsPanel };

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

@@ -0,0 +1,24 @@
+import { TabsTab as TabsTabPrimitive } from '@base-ui/react/tabs';
+import type * as React from 'react';
+/**
+ * Public Tabs.Tab props.
+ *
+ * Wraps Base UI `Tabs.Tab` with optional decorative addon layout.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type TabsTabProps = TabsTabPrimitive.Props & {
+    /**
+     * Decorative addon rendered alongside the tab label.
+     *
+     * @default No addon is rendered.
+     */
+    addon?: React.ReactNode;
+    /**
+     * Controls whether the addon appears before or after the label.
+     *
+     * @default 'start'
+     */
+    addonPosition?: 'start' | 'end';
+};
+export declare const TabsTab: React.FC<TabsTabProps>;

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

@@ -0,0 +1,24 @@
+import { clsx } from "../../core/clsx.js";
+import { Button } from "../button/button.js";
+import { Text } from "../text/text.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-tab.tsx
+var TabsTab = ({ addon, addonPosition = "start", children, className, ...props }) => /* @__PURE__ */ jsx(Tabs.Tab, {
+	render: /* @__PURE__ */ jsx(Button, {
+		variant: "flat",
+		addon,
+		addonPosition,
+		className: clsx(tabs_module_default.Item, className)
+	}),
+	...props,
+	children: /* @__PURE__ */ jsx(Text, {
+		tone: "muted",
+		whiteSpace: "nowrap",
+		className: tabs_module_default.Label,
+		children
+	})
+});
+//#endregion
+export { TabsTab };

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

@@ -0,0 +1,8 @@
+import type * as React from 'react';
+/**
+ * Public Tabs.Viewport props.
+ *
+ * Grid container for animated `Tabs.Panel` children.
+ */
+export type TabsViewportProps = React.ComponentPropsWithoutRef<'div'>;
+export declare const TabsViewport: React.FC<TabsViewportProps>;

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

@@ -0,0 +1,11 @@
+import { clsx } from "../../core/clsx.js";
+import tabs_module_default from "./tabs.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/tabs/tabs-viewport.tsx
+var TabsViewport = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: clsx(tabs_module_default.Viewport, className),
+	...props,
+	children
+});
+//#endregion
+export { TabsViewport };

package/dist/components/tabs/tabs.css

@@ -0,0 +1 @@
+.viraui__tabs-module__Tabs_AwbZZ{--tabs-translate-amount:10px;min-block-size:10rem}.viraui__tabs-module__Viewport_15X1I{display:grid;grid-template-columns:minmax(0,1fr);inline-size:100%}.viraui__tabs-module__List_XJorr{position:relative;overflow-x:auto}.viraui__tabs-module__Indicator_UyNUn{position:absolute;pointer-events:none;inset-block-start:var(--active-tab-top);inset-inline-start:var(--active-tab-left);inline-size:var(--active-tab-width);block-size:var(--active-tab-height);transition:inset-inline-start var(--duration-fast) var(--easing-standard),inset-block-start var(--duration-fast) var(--easing-standard),inline-size var(--duration-fast) var(--easing-standard),block-size var(--duration-fast) var(--easing-standard)}.viraui__tabs-module__Item_XZ86Z{position:relative;flex-shrink:0;cursor:pointer;flex-basis:0;transition:none;will-change:auto;&[data-variant]:not(:disabled):active{translate:0 0}&:hover,&[data-disabled]{background:transparent}&[data-disabled]{opacity:.5}&[data-active]{color:var(--global-foreground)}&:focus-visible{border-radius:var(--radius-small);outline-offset:0}}.viraui__tabs-module__Item_XZ86Z[data-active] .viraui__tabs-module__Label_5-8-Y{color:var(--global-foreground)}.viraui__tabs-module__Panel_vkCFI{grid-area:1/1;inline-size:100%;opacity:1;translate:0 0;transition:opacity var(--duration-fast) var(--easing-entrance),translate var(--duration-fast) var(--easing-entrance);&[data-ending-style]{pointer-events:none}&[data-ending-style],&[data-starting-style]{opacity:0}&[data-activation-direction=right][data-starting-style]{translate:var(--tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--tabs-translate-amount)}&[hidden]{display:none}@media (prefers-reduced-motion:reduce){transition:none;&[data-ending-style],&[data-starting-style]{opacity:1;translate:0 0}}}

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

@@ -0,0 +1,31 @@
+import { TabsRoot } from '@base-ui/react/tabs';
+import { StackProps } from '..';
+import { TabsListProps } from './tabs-list';
+import { TabsPanelProps } from './tabs-panel';
+import { TabsTabProps } from './tabs-tab';
+import { TabsViewportProps } from './tabs-viewport';
+import * as React from 'react';
+/**
+ * Public Tabs root props.
+ *
+ * Includes Base UI tabs root props such as `value`, `defaultValue`, `orientation`,
+ * and `onValueChange`.
+ *
+ * @default Base UI pass-through props keep upstream defaults.
+ */
+export type TabsProps = TabsRoot.Props & {
+    /**
+     * Horizontal alignment of tab list within root Stack.
+     *
+     * @default 'start'
+     */
+    listAlignment?: Extract<StackProps['hAlign'], 'start' | 'center' | 'end' | 'stretch'>;
+};
+type TabsComponent = React.FC<TabsProps> & {
+    List: React.FC<TabsListProps>;
+    Tab: React.FC<TabsTabProps>;
+    Viewport: React.FC<TabsViewportProps>;
+    Panel: React.FC<TabsPanelProps>;
+};
+export declare const Tabs: TabsComponent;
+export {};

package/dist/components/tabs/tabs.guide.json

@@ -0,0 +1,23 @@
+{
+  "name": "Tabs",
+  "summary": "Compound segmented tab control with Surface list chrome, moving indicator, and animated panels.",
+  "whenToUse": [
+    "Switching between related views in the same surface",
+    "Compact horizontal segmented navigation",
+    "Decorative start/end addons on tab labels without changing accessible names"
+  ],
+  "whenNotToUse": [
+    "Primary app navigation that should use links or routes directly",
+    "Vertical tab layouts in v1 styled targets"
+  ],
+  "accessibility": [
+    "Keep tab labels as visible text; addons are decorative and aria-hidden",
+    "Ensure each `Tabs.Panel` value matches a `Tabs.Tab` value",
+    "Disabled items cannot be activated through pointer or keyboard"
+  ],
+  "antiPatterns": [
+    "Using addons as the only visible label for a tab",
+    "Trying to compose a separate public `Tabs.Indicator`; the indicator is owned by `Tabs.List`"
+  ],
+  "related": ["Surface", "Stack", "Text"]
+}

package/dist/components/tabs/tabs.js

@@ -0,0 +1,30 @@
+import './tabs.css';
+import { clsx } from "../../core/clsx.js";
+import { Stack } from "../stack/stack.js";
+import tabs_module_default from "./tabs.module.js";
+import { TabsList } from "./tabs-list.js";
+import { TabsPanel } from "./tabs-panel.js";
+import { TabsTab } from "./tabs-tab.js";
+import { TabsViewport } from "./tabs-viewport.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs.tsx
+var TabsRootComponent = ({ children, className, listAlignment = "start", ...props }) => /* @__PURE__ */ jsx(Tabs.Root, {
+	render: /* @__PURE__ */ jsx(Stack, {
+		hAlign: listAlignment,
+		vAlign: "start",
+		fillChildren: false,
+		className: clsx(tabs_module_default.Tabs, className)
+	}),
+	...props,
+	children
+});
+var Tabs$1 = Object.assign(TabsRootComponent, {
+	List: TabsList,
+	Tab: TabsTab,
+	Viewport: TabsViewport,
+	Panel: TabsPanel
+});
+//#endregion
+export { Tabs$1 as Tabs };