@viraui/react 0.0.21 → 0.0.23

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

@@ -0,0 +1,45 @@
+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;
+    topRight: string;
+    bottomRight: string;
+    bottomLeft: string;
+};
+export type SurfacePaddingEdges = {
+    inlineStart: string;
+    inlineEnd: string;
+    blockStart: string;
+    blockEnd: string;
+};
+export type SurfaceRadiusContextValue = {
+    radius: SurfaceRadiusCorners;
+    padding: SurfacePaddingEdges;
+};
+export type SurfaceRadiusDefaults = {
+    hPadding?: SurfacePadding | undefined;
+    radius?: SurfaceRadiusInput | undefined;
+    style?: React.CSSProperties | undefined;
+    vPadding?: SurfacePadding | undefined;
+};
+type SurfaceRadiusConfig = SurfaceRadiusDefaults & {
+    defaults: SurfaceRadiusDefaults;
+};
+export declare const SurfaceRadiusContext: React.Context<SurfaceRadiusContextValue | null>;
+export declare const useSurfaceRadiusContext: () => SurfaceRadiusContextValue | null;
+export declare const useSurfaceRadius: ({ defaults, hPadding, radius, style, vPadding }: SurfaceRadiusConfig) => {
+    contextValue: SurfaceRadiusContextValue;
+    hasAutoRadius: boolean;
+    radiusStyle: React.CSSProperties;
+};
+export {};

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

@@ -0,0 +1,81 @@
+"use client";
+import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
+import { createContext, useContext } from "react";
+//#region src/components/surface/surface-radius-context.ts
+var SurfaceRadiusContext = createContext(null);
+var useSurfaceRadiusContext = () => useContext(SurfaceRadiusContext);
+var toCssLength = (value) => value === void 0 || value === 0 ? "0px" : String(value);
+var resolveAxisPaddingValues = (value) => {
+	if (!value) return ["0px", "0px"];
+	if (Array.isArray(value)) return [toCssLength(resolveThemeValue(value[0], "space", 0)), toCssLength(resolveThemeValue(value[1], "space", 0))];
+	const resolvedValue = toCssLength(resolveThemeValue(value, "space", 0));
+	return [resolvedValue, resolvedValue];
+};
+var resolveAutoRadiusCorners = ({ padding, radius }) => ({
+	topLeft: `max(0px, calc(${radius.topLeft} - max(${padding.blockStart}, ${padding.inlineStart})))`,
+	topRight: `max(0px, calc(${radius.topRight} - max(${padding.blockStart}, ${padding.inlineEnd})))`,
+	bottomRight: `max(0px, calc(${radius.bottomRight} - max(${padding.blockEnd}, ${padding.inlineEnd})))`,
+	bottomLeft: `max(0px, calc(${radius.bottomLeft} - max(${padding.blockEnd}, ${padding.inlineStart})))`
+});
+var resolveTokenRadiusCorners = (radius) => ({
+	topLeft: radius,
+	topRight: 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,
+	"--surface-border-radius-top-right": radius.topRight,
+	"--surface-border-radius-bottom-right": radius.bottomRight,
+	"--surface-border-radius-bottom-left": radius.bottomLeft
+});
+var resolveDefaultContext = ({ hPadding, radius, style, vPadding }) => {
+	const [paddingInlineStart, paddingInlineEnd] = resolveAxisPaddingValues(hPadding);
+	const [paddingBlockStart, paddingBlockEnd] = resolveAxisPaddingValues(vPadding);
+	const styleRadius = getSurfaceStyleRadius(style);
+	return {
+		radius: isPerCornerRadius(radius) ? resolvePerCornerRadiusInput(radius) : resolveTokenRadiusCorners(toCssLength(styleRadius ?? resolveRadiusToken(radius === "auto" ? void 0 : radius))),
+		padding: {
+			inlineStart: paddingInlineStart,
+			inlineEnd: paddingInlineEnd,
+			blockStart: paddingBlockStart,
+			blockEnd: paddingBlockEnd
+		}
+	};
+};
+var useSurfaceRadius = ({ defaults, hPadding, radius, style, vPadding }) => {
+	const parentContext = useSurfaceRadiusContext() ?? resolveDefaultContext(defaults);
+	const hasAutoRadius = radius === "auto";
+	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 {
+		contextValue: {
+			radius: ownRadius,
+			padding: {
+				inlineStart: paddingInlineStart,
+				inlineEnd: paddingInlineEnd,
+				blockStart: paddingBlockStart,
+				blockEnd: paddingBlockEnd
+			}
+		},
+		hasAutoRadius,
+		radiusStyle: hasAutoRadius || hasPerCornerRadius ? getSurfaceRadiusStyle(ownRadius) : { "--surface-border-radius": tokenRadius }
+	};
+};
+//#endregion
+export { SurfaceRadiusContext, useSurfaceRadius };

package/dist/components/surface/surface.css

@@ -1 +1 @@
-.surface-module_Surface_slEYq{--surface-background-hover:var(--surface-background);--surface-border-radius:var(--radius-medium);--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);border: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 { ThemeTypes } from '@viraui/foundation/vira/types';
+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,23 +51,29 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      */
     borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
     /**
-     * Sets the corner radius from the Vira radius token scale.
+     * 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?: ThemeTypes['radius'];
+    radius?: SurfaceRadiusInput;
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *
      * @default No inline padding.
      */
-    hPadding?: ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
+    hPadding?: SurfacePadding;
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *
      * @default No block padding.
      */
-    vPadding?: ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
+    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

@@ -1,14 +1,20 @@
 {
   "name": "Surface",
-  "summary": "Presentational container with token background, optional border, radius, and padding.",
+  "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners.",
   "whenToUse": [
     "Group content with base-level background and contrast border",
     "Popup or card chrome with optional hover background",
-    "Compose with Elevator for animated elevation transitions"
+    "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",
+    "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",
-    "Expecting hover background on touch-primary devices"
+    "Expecting hover background on touch-primary devices",
+    "Using radius=\"auto\" on the outermost Surface when no ancestor Surface provides a radius context"
   ],
   "accessibility": [
     "Surface is presentational — pair with headings or labels so grouped content is discoverable",
@@ -17,7 +23,9 @@
   ],
   "antiPatterns": [
     "Overwriting transition shorthand without composing box-shadow when data-elevation is present",
-    "Assuming hoverColor applies on touch devices"
+    "Assuming hoverColor applies on touch devices",
+    "Reusing the parent token radius on nested Surfaces instead of radius=\"auto\" when concentric corners are required",
+    "Expecting radius=\"auto\" to inherit a token when the nearest ancestor Surface has no radius set"
   ],
   "related": ["Elevator", "Stack"]
 }

package/dist/components/surface/surface.js

@@ -1,10 +1,11 @@
 "use client";
 import './surface.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 { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
+import { SurfaceRadiusContext, useSurfaceRadius } from "./surface-radius-context.js";
 import surface_module_default from "./surface.module.js";
-import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/surface/surface.tsx
 var clampSurfaceBaseLevel = (value) => {
@@ -13,21 +14,34 @@ var clampSurfaceBaseLevel = (value) => {
 	return value;
 };
 var toSurfaceColor = (value) => typeof value === "string" ? value : `var(--base-${clampSurfaceBaseLevel(value)})`;
-var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hoverColor, radius, ref, render, style, vPadding, ...otherProps }) => {
-	const hasColor = color !== void 0;
+var surfaceDefaultRadiusProps = {
+	hPadding: void 0,
+	radius: void 0,
+	style: void 0,
+	vPadding: 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);
+	const { contextValue, hasAutoRadius, radiusStyle } = useSurfaceRadius({
+		defaults: surfaceDefaultRadiusProps,
+		hPadding,
+		radius,
+		style,
+		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-border-radius": resolveThemeValue(radius, "radius", 0),
+		"--surface-overflow": overflow,
+		...radiusStyle,
 		...resolveAxisPadding(hPadding, "--surface-padding-inline-start", "--surface-padding-inline-end"),
 		...resolveAxisPadding(vPadding, "--surface-padding-block-start", "--surface-padding-block-end"),
 		...style
 	};
-	return useRender({
+	const surface = useRender({
 		defaultTagName: "div",
 		render,
 		ref,
@@ -35,12 +49,17 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 			...componentProps,
 			...intrinsicAttributes,
 			...border ? { "data-surface-border": border } : {},
+			...hasAutoRadius ? { "data-surface-radius": "auto" } : {},
 			"data-surface-has-hover-color": hasHoverColor ? "true" : "false",
 			"data-surface-has-padding": hasPadding ? "true" : "false",
 			className: clsx(surface_module_default.Surface, className),
 			style: dynamicStyle
 		}
 	});
+	return /* @__PURE__ */ jsx(SurfaceRadiusContext.Provider, {
+		value: contextValue,
+		children: surface
+	});
 };
 //#endregion
 export { Surface };

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,11 +1,10 @@
-"use client";
 import './switch.css';
+import { clsx } from "../../core/clsx.js";
 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 switch_module_default from "./switch.module.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Switch } from "@base-ui/react/switch";
@@ -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"]
+}