@viraui/react 0.0.20 → 0.0.22

package/dist/components/stack/stack.js

@@ -1,10 +1,10 @@
 "use client";
 import './stack.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 stack_module_default from "./stack.module.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/stack/stack.tsx
 var Stack = ({ className, direction = "column", fillChildren = true, hAlign = "initial", hPadding, inline = false, maxWidth, minWidth, ref, render, rowGap, columnGap, style, vAlign = "initial", vPadding, wrap = false, ...otherProps }) => {

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

@@ -0,0 +1,2 @@
+export { StaticNoise } from './static-noise';
+export type { StaticNoiseProps } from './static-noise';

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

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

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

@@ -0,0 +1,37 @@
+import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import type * as React from 'react';
+/**
+ * Public StaticNoise props.
+ *
+ * Includes standard `figure` attributes such as `id`, `className`, and event handlers,
+ * plus Vira-owned turbulence tuning controls.
+ *
+ * @default Native figure pass-through props keep React defaults.
+ */
+export type StaticNoiseProps = React.ComponentPropsWithRef<'figure'> & IntrinsicViraProps & {
+    /**
+     * Sets the SVG turbulence `baseFrequency` for the internal noise filter.
+     *
+     * @default 0.5
+     */
+    baseFrequency?: number | string;
+    /**
+     * Sets the rendered overlay opacity.
+     *
+     * @default 0.1
+     */
+    opacity?: number;
+    /**
+     * Sets the rendered overlay mix blend mode.
+     *
+     * @default 'difference'
+     */
+    mixBlendMode?: React.CSSProperties['mixBlendMode'];
+    /**
+     * Animates the internal turbulence filter by cycling `feTurbulence` seed values.
+     *
+     * @default false
+     */
+    animate?: boolean;
+};
+export declare const StaticNoise: React.FC<StaticNoiseProps>;

package/dist/components/static-noise/static-noise.guide.json

@@ -0,0 +1,25 @@
+{
+  "name": "StaticNoise",
+  "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections.",
+  "whenToUse": [
+    "Subtle grain or texture overlay on cards, panels, or hero sections",
+    "Glass or vibrant surfaces that need visual depth without extra content",
+    "Decorative atmosphere where the parent owns semantics and layout positioning"
+  ],
+  "whenNotToUse": [
+    "Standalone loading or status feedback without a labeled parent region",
+    "Critical readable content where contrast has not been verified",
+    "Large numbers of simultaneous full-viewport overlays on the same page"
+  ],
+  "accessibility": [
+    "StaticNoise is decorative — the root renders with aria-hidden by default",
+    "Parent surface or region must expose any meaningful label or busy state",
+    "Consumer owns position, inset, z-index, and sizing for the overlay placement"
+  ],
+  "antiPatterns": [
+    "Stacking many full-viewport StaticNoise instances on one screen",
+    "Using StaticNoise as the only loading announcement for a page",
+    "Embedding layout positioning rules inside the component stylesheet"
+  ],
+  "related": ["Surface", "Skeleton"]
+}

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

@@ -0,0 +1,45 @@
+import './static-noise.css';
+import { clsx } from "../../core/clsx.js";
+import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
+import static_noise_module_default from "./static-noise.module.js";
+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 }) => {
+	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+	const reactId = useId();
+	const dynamicStyle = {
+		filter: `url(#${reactId}) grayscale(100%)`,
+		opacity,
+		mixBlendMode,
+		...style
+	};
+	return /* @__PURE__ */ jsx("figure", {
+		...componentProps,
+		...intrinsicAttributes,
+		ref,
+		"aria-hidden": "true",
+		className: clsx(static_noise_module_default.StaticNoise, className),
+		style: dynamicStyle,
+		children: /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			className: static_noise_module_default.FilterSvg,
+			children: /* @__PURE__ */ jsx("filter", {
+				id: reactId,
+				children: /* @__PURE__ */ jsx("feTurbulence", {
+					baseFrequency: String(baseFrequency),
+					children: animate ? /* @__PURE__ */ jsx("animate", {
+						attributeName: "seed",
+						calcMode: "discrete",
+						dur: "1s",
+						repeatCount: "indefinite",
+						values: STATIC_NOISE_SEED_FRAMES
+					}) : null
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { StaticNoise };

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

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

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

@@ -0,0 +1,37 @@
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import type * as React from 'react';
+export type SurfaceRadius = ThemeTypes['radius'] | 'auto';
+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?: SurfaceRadius | 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,70 @@
+"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 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 resolvedRadius = toCssLength(resolveThemeValue(radius, "radius", 0));
+	const [paddingInlineStart, paddingInlineEnd] = resolveAxisPaddingValues(hPadding);
+	const [paddingBlockStart, paddingBlockEnd] = resolveAxisPaddingValues(vPadding);
+	return {
+		radius: resolveTokenRadiusCorners(toCssLength(getSurfaceStyleRadius(style) ?? resolvedRadius)),
+		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 resolvedRadius = toCssLength(hasAutoRadius ? void 0 : resolveThemeValue(radius, "radius", 0));
+	const tokenRadius = toCssLength(getSurfaceStyleRadius(style) ?? resolvedRadius);
+	const ownRadius = hasAutoRadius ? resolveAutoRadiusCorners(parentContext) : 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 ? 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)}}
+.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)}}

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, SurfaceRadius } 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,23 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      */
     borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
     /**
-     * Sets the corner radius from the Vira radius token scale.
+     * Sets the corner radius from the Vira radius token scale, or derives concentric radii from the nearest ancestor Surface.
      *
      * @default No radius.
      */
-    radius?: ThemeTypes['radius'];
+    radius?: SurfaceRadius;
     /**
      * 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;
 };
 export declare const Surface: React.FC<SurfaceProps>;
 export {};

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

@@ -1,14 +1,18 @@
 {
   "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=\"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"
   ],
   "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 +21,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 surfaceDefaultRadiusProps = {
+	hPadding: void 0,
+	radius: void 0,
+	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;
 	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) } : {},
 		...hasHoverColor ? { "--surface-background-hover": toSurfaceColor(hoverColor) } : {},
 		...border ? { "--surface-border-style": borderStyle } : {},
-		"--surface-border-radius": resolveThemeValue(radius, "radius", 0),
+		...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/switch/switch.js

@@ -1,11 +1,11 @@
 "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";

package/dist/components/text/text.js

@@ -1,9 +1,9 @@
 "use client";
 import './text.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import text_module_default from "./text.module.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/text/text.tsx
 var Text = ({ align = "start", balanced = false, selection = true, className, color, family = "body", fontWidth, hPadding, lineHeight = "standard", maxWidth, opticalSize, ref, render, size = "medium", style, tone, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {

package/dist/components/textarea/textarea.js

@@ -1,12 +1,12 @@
 "use client";
 import './textarea.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import { BasicInput } from "../basic-input/basic-input.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import textarea_module_default from "./textarea.module.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 //#region src/components/textarea/textarea.tsx

package/dist/components/textfield/textfield.js

@@ -1,5 +1,6 @@
 "use client";
 import './textfield.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import { BasicInput } from "../basic-input/basic-input.js";
@@ -7,7 +8,6 @@ import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import { InputControlGroup } from "../basic-input/input-control-group.js";
 import textfield_module_default from "./textfield.module.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Input } from "@base-ui/react/input";

package/dist/components/title/title.js

@@ -1,9 +1,9 @@
 "use client";
 import './title.css';
+import { clsx } from "../../core/clsx.js";
 import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import title_module_default from "./title.module.js";
-import { clsx } from "clsx";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/title/title.tsx
 var Title = ({ align = "start", balanced = false, selection = true, className, color, fontWidth, hPadding, level = "h1", lineHeight = "standard", maxWidth, opticalSize, ref, render, style, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {

package/dist/core/clsx.d.ts

@@ -0,0 +1 @@
+export declare const clsx: (...inputs: any[]) => string;

package/dist/core/clsx.js

@@ -0,0 +1,36 @@
+//#region src/core/clsx.ts
+var toVal = (mix) => {
+	let str = "";
+	if (typeof mix === "string" || typeof mix === "number") str += mix;
+	else if (typeof mix === "object" && mix !== null) {
+		if (Array.isArray(mix)) {
+			for (let index = 0; index < mix.length; index += 1) if (mix[index]) {
+				const value = toVal(mix[index]);
+				if (value) {
+					if (str) str += " ";
+					str += value;
+				}
+			}
+		} else for (const key in mix) if (mix[key]) {
+			if (str) str += " ";
+			str += key;
+		}
+	}
+	return str;
+};
+var clsx = (...inputs) => {
+	let str = "";
+	for (let index = 0; index < inputs.length; index += 1) {
+		const input = inputs[index];
+		if (input) {
+			const value = toVal(input);
+			if (value) {
+				if (str) str += " ";
+				str += value;
+			}
+		}
+	}
+	return str;
+};
+//#endregion
+export { clsx };

package/dist/index.js

@@ -23,5 +23,7 @@ import { Select } from "./components/select/select.js";
 import { Icon } from "./components/icon/icon.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { Surface } from "./components/surface/surface.js";
+import { StaticNoise } from "./components/static-noise/static-noise.js";
+import { ProgressiveBlur } from "./components/progressive-blur/progressive-blur.js";
 import { Title } from "./components/title/title.js";
-export { Avatar, AvatarGroup, Button, Checkbox, Chip, ClampText, ELEVATION_DEFAULTS, Elevator, Icon, IconButton, LinearProgress, Masonry, Radio, RadioGroup, Select, Skeleton, Slider, Spinner, Stack, Surface, Switch, Text, Textarea, Textfield, Title, getElevationProps };
+export { Avatar, AvatarGroup, Button, Checkbox, Chip, ClampText, ELEVATION_DEFAULTS, Elevator, Icon, IconButton, LinearProgress, Masonry, ProgressiveBlur, Radio, RadioGroup, Select, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Text, Textarea, Textfield, Title, getElevationProps };

package/dist/preflight.css

@@ -1 +1 @@
-@layer viraui.preflight;@layer viraui.preflight{html{--scrollbar-thumb:light-dark(var(--base-4),var(--base-3));--scrollbar-track:transparent;font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground)}*{corner-shape:var(--corner-shape,unset)}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),sans-serif;font-variation-settings:"wght" 400}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg:not([fill]){fill:currentcolor}fieldset{border:0}ol ul,ul ol{font-size:medium}table{border-spacing:0;width:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table td,table th{border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px transparent;--shadow-color:oklch(0% 0 0deg)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),transparent calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 1px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 2px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 2px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 6px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 7px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 3px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 6px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 4px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 7px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 10px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 12px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 5px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 10px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 13px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 14px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 15px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 8px oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) 14px oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) 20px oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) 23px oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}}@layer viraui.preflight{[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/15%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono);vertical-align:top}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}[data-vibrant]{--is-vibrancy-active:var(--vibrancy-enable);--vibrancy-filter:var(--vibrancy-enable) brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px));backdrop-filter:var(--vibrancy-filter,none)}}@layer viraui.preflight{}@layer viraui.preflight{}[data-elevation]{transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}
+@layer viraui.preflight;@layer viraui.preflight{html{--scrollbar-thumb:light-dark(var(--base-4),var(--base-3));--scrollbar-track:transparent;font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground)}*{corner-shape:var(--corner-shape,unset)}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:2px solid var(--global-foreground);outline-offset:2px}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),sans-serif;font-variation-settings:"wght" 400}::selection{background-color:var(--global-primary);color:contrast-color(var(--global-primary));text-shadow:none}img{display:block;inline-size:100%;max-inline-size:100%}svg:not([fill]){fill:currentcolor}fieldset{border:0}ol ul,ul ol{font-size:medium}table{border-spacing:0;width:100%;border-collapse:collapse}table[data-layout-fixed]{table-layout:fixed}table thead{box-shadow:inset 0 -3px 0 var(--base-2)}table[data-table-separators] tr+tr{border-top:1px solid var(--base-2)}table th{white-space:nowrap;font-variation-settings:"wght" 800}table td,table th{border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px transparent;--shadow-color:oklch(0% 0 0deg)}}@layer viraui.preflight{[data-elevation]:where([data-elevation-direction=bottom],[data-elevation-direction=right]){--shadow-direction:1}[data-elevation]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-direction:-1}[data-elevation-hover="0"]:hover,[data-elevation="0"]{--y1:0px;--x1:0px;box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),0 0 0 color-mix(in oklch,var(--shadow-color),transparent calc(94% - var(--shadow-opacity-factor))),0 0 0 oklch(from var(--shadow-color) l c h/var(--shadow-opacity-factor)),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation-hover="2"]:hover,[data-elevation-hover="3"]:hover,[data-elevation-hover="4"]:hover,[data-elevation="1"],[data-elevation="2"],[data-elevation="3"],[data-elevation="4"]{box-shadow:calc(var(--x1) * var(--shadow-direction)) calc(var(--y1) * var(--shadow-direction)) var(--shadow-blur-1) oklab(from var(--shadow-color) l a b/.1),calc(var(--x2) * var(--shadow-direction)) calc(var(--y2) * var(--shadow-direction)) var(--shadow-blur-2) oklab(from var(--shadow-color) l a b/.09),calc(var(--x3) * var(--shadow-direction)) calc(var(--y3) * var(--shadow-direction)) var(--shadow-blur-3) oklab(from var(--shadow-color) l a b/.05),calc(var(--x4) * var(--shadow-direction)) calc(var(--y4) * var(--shadow-direction)) var(--shadow-blur-4) oklab(from var(--shadow-color) l a b/.01),var(--extra-shadow)}[data-elevation-hover="1"]:hover,[data-elevation="1"]{--y1:0px;--y2:2px;--y3:4px;--y4:7px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:1px;--shadow-blur-2:2px;--shadow-blur-3:2px;--shadow-blur-4:3px}[data-elevation-hover="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="1"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:0px;--x2:2px;--x3:4px;--x4:7px}[data-elevation-hover="2"]:hover,[data-elevation="2"]{--y1:1px;--y2:5px;--y3:11px;--y4:19px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:3px;--shadow-blur-2:5px;--shadow-blur-3:6px;--shadow-blur-4:8px}[data-elevation-hover="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]):hover,[data-elevation="2"]:where([data-elevation-direction=top],[data-elevation-direction=left]){--shadow-blur-3:7px}[data-elevation-hover="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:1px;--x2:5px;--x3:11px;--x4:19px}[data-elevation-hover="2"]:where([data-elevation-direction=right]):hover,[data-elevation="2"]:where([data-elevation-direction=right]){--shadow-blur-3:6px}[data-elevation-hover="3"]:hover,[data-elevation="3"]{--y1:2px;--y2:7px;--y3:16px;--y4:29px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:4px;--shadow-blur-2:7px;--shadow-blur-3:10px;--shadow-blur-4:12px}[data-elevation-hover="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=left],[data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:2px;--x2:7px;--x3:16px;--x4:29px}[data-elevation-hover="3"]:where([data-elevation-direction=right]):hover,[data-elevation="3"]:where([data-elevation-direction=right]){--x2:10px;--x3:22px;--x4:39px;--shadow-blur-1:5px;--shadow-blur-2:10px;--shadow-blur-3:13px;--shadow-blur-4:15px}[data-elevation-hover="4"]:hover,[data-elevation="4"]{--y1:4px;--y2:14px;--y3:33px;--y4:58px;--x1:0px;--x2:0px;--x3:0px;--x4:0px;--shadow-blur-1:8px;--shadow-blur-2:14px;--shadow-blur-3:20px;--shadow-blur-4:23px}[data-elevation-hover="4"]:where([data-elevation-direction=top]):hover,[data-elevation="4"]:where([data-elevation-direction=top]){--y2:15px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=left]):hover,[data-elevation="4"]:where([data-elevation-direction=left]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:15px;--x3:33px;--x4:58px;--shadow-blur-2:15px}[data-elevation-hover="4"]:where([data-elevation-direction=right]):hover,[data-elevation="4"]:where([data-elevation-direction=right]){--y1:0px;--y2:0px;--y3:0px;--y4:0px;--x1:4px;--x2:14px;--x3:33px;--x4:58px}}@layer viraui.preflight{[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=false]{--vira-flex-shrink:0;flex-shrink:0}}@layer viraui.preflight{:where(p){line-height:1.5;min-block-size:.01vh;font-size:var(--font-scale-body-medium)}small{font-size:.7em}b,strong{font-variation-settings:"wght" 700}:where(a:any-link):not([data-no-link-style]){text-decoration:none;color:var(--global-interactive-text);word-break:break-word;&:not([class]){background:linear-gradient(currentcolor,currentcolor) no-repeat 0 100%;background-size:0 1px;transition:background-size var(--duration-fast) var(--easing-entrance);&:focus,&:hover{background-size:100% 1px}}}del{padding:0 .4em;margin:0 .2em;background-color:oklab(from var(--highlight-red) l a b/15%);color:var(--highlight-red);box-shadow:0 0 0 1px oklab(from var(--highlight-red) l a b/50%);border-radius:var(--radius-small)}ins{background-color:oklab(from var(--highlight-green) l a b/15%);color:var(--highlight-green);box-shadow:0 0 0 1px oklab(from var(--highlight-green) l a b/50%)}ins,mark{padding:0 .4em;margin:0 .2em;text-decoration:none;border-radius:var(--radius-small)}mark{background-color:oklab(from var(--highlight-yellow) l a b/15%);color:var(--highlight-yellow);box-shadow:0 0 0 1px oklab(from var(--highlight-yellow) l a b/50%)}address{font-style:normal;line-height:inherit}dt{font-variation-settings:"wght" 600}dd{margin:0;padding:0}ul{font-size:medium;padding-left:1rem;& li::marker{font-size:inherit;text-align:right;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);color:oklab(from currentColor l a b/80%)}}ol{font-size:medium;& li::marker{font-size:inherit;font-variation-settings:"wght" 400;min-inline-size:var(--space-x-large);font-variant-numeric:tabular-nums;white-space:nowrap;color:oklab(from currentColor l a b/80%)}}kbd{padding:.2em .4em;border-radius:var(--radius-small);font-variation-settings:"wght" 600;box-shadow:var(--global-contrast);background:var(--global-contrast)}abbr{text-decoration:underline dashed var(--global-primary)}label,legend{font-size:inherit}code{background-color:var(--global-contrast);border-radius:var(--radius-small);box-shadow:var(--global-contrast);padding:.2em .4em;font-size:1em;font-family:var(--font-family-mono);vertical-align:top}pre code{box-shadow:none}s{text-decoration:line-through;color:var(--global-disabled-foreground);text-decoration-color:oklab(from var(--global-foreground) l a b/50%)}:root{color-scheme:light dark}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}[data-vibrant]{--is-vibrancy-active:var(--vibrancy-enable);--vibrancy-filter:var(--vibrancy-enable) brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px));backdrop-filter:var(--vibrancy-filter,none)}}@layer viraui.preflight{}@layer viraui.preflight{}[data-elevation]{transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "private": false,
   "files": [
     "dist"
@@ -32,9 +32,6 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {
-    "clsx": "2.1.1"
-  },
   "devDependencies": {
     "@base-ui/react": "1.5.0",
     "postcss": "8.5.6",
@@ -45,10 +42,10 @@
     "vite": "8.0.16",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-static-copy": "2.3.0",
-    "@viraui/foundation": "0.0.20",
+    "@viraui/foundation": "0.0.22",
     "@viraui/icons": "0.0.15",
-    "@viraui/postcss-config": "0.0.15",
-    "@viraui/tsconfig": "0.0.15"
+    "@viraui/postcss-config": "0.0.16",
+    "@viraui/tsconfig": "0.0.16"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.5.0",