@viraui/react 0.0.25 → 0.0.26

package/dist/components/stack/stack.guide.json

@@ -20,5 +20,81 @@
     "Re-declaring primitive flex container rules in app CSS when Stack can own the layout",
     "Using viewport media queries when @container stack queries against the rendered Stack size would match the design intent"
   ],
-  "related": ["Surface", "Text", "Button"]
+  "related": ["Surface", "Text", "Button"],
+  "properties": {
+    "react": {
+      "rowGap": {
+        "description": "Sets row gap using a Vira space token.",
+        "refCss": "row-gap"
+      },
+      "columnGap": {
+        "description": "Sets column gap using a Vira space token.",
+        "refCss": "column-gap"
+      },
+      "hAlign": {
+        "description": "Sets main-axis alignment for column layouts and cross-axis for row layouts.",
+        "refCss": "h-align"
+      },
+      "vAlign": {
+        "description": "Sets cross-axis alignment for column layouts and main-axis for row layouts.",
+        "refCss": "v-align"
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token or a [start, end] tuple."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token or a [start, end] tuple."
+      },
+      "maxWidth": {
+        "description": "Constrains max inline size of the stack root.",
+        "refCss": "max-width"
+      },
+      "minWidth": {
+        "description": "Constrains min inline size of the stack root.",
+        "refCss": "min-width"
+      }
+    },
+    "css": {
+      "row-gap": {
+        "description": "Flex row gap on the root.",
+        "refReact": "rowGap"
+      },
+      "column-gap": {
+        "description": "Flex column gap on the root.",
+        "refReact": "columnGap"
+      },
+      "h-align": {
+        "description": "Logical horizontal flex alignment hook.",
+        "refReact": "hAlign"
+      },
+      "v-align": {
+        "description": "Logical vertical flex alignment hook.",
+        "refReact": "vAlign"
+      },
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-block-start": {
+        "description": "Block-start padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "max-width": {
+        "description": "Max inline size of the stack root.",
+        "refReact": "maxWidth"
+      },
+      "min-width": {
+        "description": "Min inline size of the stack root.",
+        "refReact": "minWidth"
+      }
+    }
+  }
 }

package/dist/components/stack/stack.js

@@ -10,14 +10,14 @@ var Stack = ({ className, direction = "column", fillChildren = true, hAlign = "i
 	const hasPadding = Boolean(hPadding || vPadding);
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
-		"--stack-row-gap": resolveThemeValue(rowGap, "space", 0),
-		"--stack-column-gap": resolveThemeValue(columnGap, "space", 0),
-		"--stack-h-align": hAlign,
-		"--stack-v-align": vAlign,
-		...maxWidth && { "--stack-max-width": maxWidth },
-		...minWidth && { "--stack-min-width": minWidth },
-		...resolveAxisPadding(hPadding, "--stack-padding-inline-start", "--stack-padding-inline-end"),
-		...resolveAxisPadding(vPadding, "--stack-padding-block-start", "--stack-padding-block-end"),
+		"--vui-stack-row-gap": resolveThemeValue(rowGap, "space", 0),
+		"--vui-stack-column-gap": resolveThemeValue(columnGap, "space", 0),
+		"--vui-stack-h-align": hAlign,
+		"--vui-stack-v-align": vAlign,
+		...maxWidth && { "--vui-stack-max-width": maxWidth },
+		...minWidth && { "--vui-stack-min-width": minWidth },
+		...resolveAxisPadding(hPadding, "--vui-stack-padding-inline-start", "--vui-stack-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--vui-stack-padding-block-start", "--vui-stack-padding-block-end"),
 		...style
 	};
 	return useRender({

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

@@ -31,12 +31,12 @@ var resolvePerCornerRadiusInput = (corners) => ({
 	bottomRight: resolveRadiusToken(corners[2]),
 	bottomLeft: resolveRadiusToken(corners[3])
 });
-var getSurfaceStyleRadius = (style) => style?.["--surface-border-radius"];
+var getSurfaceStyleRadius = (style) => style?.["--vui-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
+	"--vui-surface-border-radius-top-left": radius.topLeft,
+	"--vui-surface-border-radius-top-right": radius.topRight,
+	"--vui-surface-border-radius-bottom-right": radius.bottomRight,
+	"--vui-surface-border-radius-bottom-left": radius.bottomLeft
 });
 var resolveDefaultContext = ({ hPadding, radius, style, vPadding }) => {
 	const [paddingInlineStart, paddingInlineEnd] = resolveAxisPaddingValues(hPadding);
@@ -74,7 +74,7 @@ var useSurfaceRadius = ({ defaults, hPadding, radius, style, vPadding }) => {
 			}
 		},
 		hasAutoRadius,
-		radiusStyle: hasAutoRadius || hasPerCornerRadius ? getSurfaceRadiusStyle(ownRadius) : { "--surface-border-radius": tokenRadius }
+		radiusStyle: hasAutoRadius || hasPerCornerRadius ? getSurfaceRadiusStyle(ownRadius) : { "--vui-surface-border-radius": tokenRadius }
 	};
 };
 //#endregion

package/dist/components/surface/surface.css

@@ -1 +1 @@
-.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;container:surface/inline-size block-size;position:relative;overflow:var(--surface-overflow);box-sizing:border-box;background:var(--surface-background,#0000);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;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:oklab(from var(--surface-background) l a b/80%)}}&[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)}}}
+.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius:0;--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-padding-inline-start:0;--vui-surface-padding-inline-end:0;--vui-surface-padding-block-start:0;--vui-surface-padding-block-end:0;--vui-surface-background-hover:var(--vui-surface-background);container:surface/inline-size block-size;position:relative;overflow:var(--vui-surface-overflow,visible);box-sizing:border-box;background:var(--vui-surface-background,#0000);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-radius=auto]{--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0;--vui-surface-border-radius-bottom-right:0;--vui-surface-border-radius-bottom-left:0}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-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(--vui-surface-background-hover)}}}

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

@@ -69,7 +69,7 @@ export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>
      */
     vPadding?: SurfacePadding;
     /**
-     * Sets root overflow through the `--surface-overflow` custom property.
+     * Sets root overflow through the `--vui-surface-overflow` custom property.
      *
      * @default visible
      */

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

@@ -29,5 +29,89 @@
     "Expecting radius=\"auto\" to inherit a token when the nearest ancestor Surface has no radius set",
     "Using viewport media queries when @container surface queries against the rendered Surface size would match the design intent"
   ],
-  "related": ["Elevator", "Stack"]
+  "related": ["Elevator", "Stack"],
+  "properties": {
+    "react": {
+      "color": {
+        "description": "Sets the resting background using a base ramp layer or literal CSS color.",
+        "refCss": "background"
+      },
+      "hoverColor": {
+        "description": "Sets the hover background on hover-capable pointers.",
+        "refCss": "background-hover"
+      },
+      "borderStyle": {
+        "description": "Sets the CSS border style when border is set.",
+        "refCss": "border-style"
+      },
+      "overflow": {
+        "description": "Sets root overflow through the surface overflow custom property.",
+        "refCss": "overflow"
+      },
+      "radius": {
+        "description": "Sets corner radius from tokens, a per-corner tuple, or auto for concentric radii.",
+        "refCss": "border-radius"
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token or a [start, end] tuple."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token or a [start, end] tuple."
+      }
+    },
+    "css": {
+      "background": {
+        "description": "Resting surface background on the root.",
+        "refReact": "color"
+      },
+      "background-hover": {
+        "description": "Hover surface background on the root.",
+        "refReact": "hoverColor"
+      },
+      "border-style": {
+        "description": "Border style when border is enabled.",
+        "refReact": "borderStyle"
+      },
+      "overflow": {
+        "description": "Root overflow behavior.",
+        "refReact": "overflow"
+      },
+      "border-radius": {
+        "description": "Uniform corner radius when radius is a single token.",
+        "refReact": "radius"
+      },
+      "border-radius-top-left": {
+        "description": "Top-left corner radius; radius tuple or auto resolves per corner.",
+        "refReact": "radius"
+      },
+      "border-radius-top-right": {
+        "description": "Top-right corner radius; radius tuple or auto resolves per corner.",
+        "refReact": "radius"
+      },
+      "border-radius-bottom-right": {
+        "description": "Bottom-right corner radius; radius tuple or auto resolves per corner.",
+        "refReact": "radius"
+      },
+      "border-radius-bottom-left": {
+        "description": "Bottom-left corner radius; radius tuple or auto resolves per corner.",
+        "refReact": "radius"
+      },
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-block-start": {
+        "description": "Block-start padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled.",
+        "refReact": "vPadding"
+      }
+    }
+  }
 }

package/dist/components/surface/surface.js

@@ -32,13 +32,13 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 		vPadding
 	});
 	const dynamicStyle = {
-		"--surface-background": toSurfaceColor(color ?? "none"),
-		...hasHoverColor && { "--surface-background-hover": toSurfaceColor(hoverColor) },
-		...border && { "--surface-border-style": borderStyle },
-		"--surface-overflow": overflow,
+		"--vui-surface-background": toSurfaceColor(color ?? "none"),
+		...hasHoverColor && { "--vui-surface-background-hover": toSurfaceColor(hoverColor) },
+		...border && { "--vui-surface-border-style": borderStyle },
+		...overflow && { "--vui-surface-overflow": overflow },
 		...radiusStyle,
-		...resolveAxisPadding(hPadding, "--surface-padding-inline-start", "--surface-padding-inline-end"),
-		...resolveAxisPadding(vPadding, "--surface-padding-block-start", "--surface-padding-block-end"),
+		...resolveAxisPadding(hPadding, "--vui-surface-padding-inline-start", "--vui-surface-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--vui-surface-padding-block-start", "--vui-surface-padding-block-end"),
 		...style
 	};
 	const surface = useRender({

package/dist/components/switch/switch.css

@@ -1 +1 @@
-.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}}
+.viraui__switch-module__Switch_L86y7{--vui-switch-track-block-size:var(--space-large);--vui-switch-track-radius:var(--radius-small);--vui-switch-track-background:var(--global-contrast);--vui-switch-thumb-background:var(--base-1);--vui-switch-thumb-size:calc(var(--space-large) - var(--space-x-small));--vui-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(--vui-switch-thumb-size) * 2) + var(--vui-switch-thumb-inset) * 2);block-size:var(--vui-switch-track-block-size);background:var(--vui-switch-track-background);border-radius:var(--vui-switch-track-radius);&[data-size=small]{--vui-switch-track-radius:var(--radius-x-small);--vui-switch-track-block-size:var(--space-medium);--vui-switch-thumb-size:calc(var(--space-medium) - var(--space-x-small))}&[data-checked]:not([data-disabled]){--vui-switch-track-background:var(--global-primary);--vui-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]>&{--vui-switch-track-background:var(--global-disabled-background);--vui-switch-thumb-background:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__switch-module__Thumb_ldwJw{--switch-thumb-radius:calc(var(--vui-switch-track-radius) - var(--vui-switch-thumb-inset));position:absolute;inset-block:var(--vui-switch-thumb-inset);inset-inline-start:var(--vui-switch-thumb-inset);background:var(--vui-switch-thumb-background);inline-size:var(--vui-switch-thumb-size);block-size:var(--vui-switch-thumb-size);border-radius:var(--switch-thumb-radius);transition:translate var(--easing-entrance) var(--duration-fast);box-shadow:0 0 1px 1px var(--global-contrast);.viraui__switch-module__SwitchRoot_Zv9An[data-checked]>&{translate:100% 0;box-shadow:none}.viraui__switch-module__SwitchRoot_Zv9An[data-checked]:dir(rtl)>&{translate:-100% 0}}

package/dist/components/switch/switch.guide.json

@@ -19,5 +19,36 @@
     "Rendering a switch without label and without aria-label",
     "Expecting description to stay visible when invalid without an error message"
   ],
-  "related": ["Textfield", "Stack", "Text"]
+  "related": ["Textfield", "Stack", "Text"],
+  "properties": {
+    "react": {
+      "size": {
+        "description": "Controls the visual switch size.",
+        "refCss": "track-block-size"
+      }
+    },
+    "css": {
+      "track-block-size": {
+        "description": "Switch track block size; size presets adjust track and thumb.",
+        "refReact": "size"
+      },
+      "track-radius": {
+        "description": "Switch track corner radius.",
+        "refReact": "size"
+      },
+      "thumb-size": {
+        "description": "Switch thumb size derived from track block size.",
+        "refReact": "size"
+      },
+      "track-background": {
+        "description": "Switch track background color."
+      },
+      "thumb-background": {
+        "description": "Switch thumb background color."
+      },
+      "thumb-inset": {
+        "description": "Inset between thumb and track edges."
+      }
+    }
+  }
 }

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

@@ -3,14 +3,14 @@ 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, {
+var TabsIndicator = ({ className, ref, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Indicator, {
 	render: /* @__PURE__ */ jsx(Surface, {
 		border: "all",
 		radius: "auto",
 		color: 3
 	}),
 	className: tabs_module_default.Indicator,
-	...props
+	...otherProps
 });
 //#endregion
 export { TabsIndicator };

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

@@ -6,7 +6,7 @@ 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, {
+var TabsList = ({ children, className, activateOnFocus = true, ref, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.List, {
 	className: clsx(tabs_module_default.List, className),
 	activateOnFocus,
 	render: /* @__PURE__ */ jsx(Surface, {
@@ -16,7 +16,7 @@ var TabsList = ({ children, className, activateOnFocus = true, ref, ...props })
 		radius: "medium",
 		vPadding: "2x-small"
 	}),
-	...props,
+	...otherProps,
 	children: /* @__PURE__ */ jsxs(Stack, {
 		direction: "row",
 		columnGap: "small",

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

@@ -3,10 +3,10 @@ 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, {
+var TabsPanel = ({ children, className, ref, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Panel, {
 	ref,
 	className: clsx(tabs_module_default.Panel, className),
-	...props,
+	...otherProps,
 	children
 });
 //#endregion

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

@@ -5,14 +5,14 @@ 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, {
+var TabsTab = ({ addon, addonPosition = "start", children, className, ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Tab, {
 	render: /* @__PURE__ */ jsx(Button, {
 		variant: "flat",
 		addon,
 		addonPosition,
 		className: clsx(tabs_module_default.Item, className)
 	}),
-	...props,
+	...otherProps,
 	children: /* @__PURE__ */ jsx(Text, {
 		tone: "muted",
 		whiteSpace: "nowrap",

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

@@ -2,9 +2,9 @@ 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", {
+var TabsViewport = ({ children, className, ...otherProps }) => /* @__PURE__ */ jsx("div", {
 	className: clsx(tabs_module_default.Viewport, className),
-	...props,
+	...otherProps,
 	children
 });
 //#endregion

package/dist/components/tabs/tabs.css

@@ -1 +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{background:#0000}&[data-disabled]{opacity:.5;background:#0000}&[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}}}
+.viraui__tabs-module__Tabs_AwbZZ{--vui-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{background:#0000}&[data-disabled]{opacity:.5;background:#0000}&[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(--vui-tabs-translate-amount) 0}&[data-activation-direction=left][data-starting-style],&[data-activation-direction=right][data-ending-style]{translate:calc(var(--vui-tabs-translate-amount) * -1) 0}&[data-activation-direction=left][data-ending-style]{translate:var(--vui-tabs-translate-amount) 0}&[data-activation-direction=none][data-ending-style],&[data-activation-direction=none][data-starting-style]{translate:0 var(--vui-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.guide.json

@@ -19,5 +19,12 @@
     "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"]
+  "related": ["Surface", "Stack", "Text"],
+  "properties": {
+    "css": {
+      "translate-amount": {
+        "description": "Panel entry translate distance for tab transitions."
+      }
+    }
+  }
 }

package/dist/components/tabs/tabs.js

@@ -10,14 +10,14 @@ 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, {
+var TabsRootComponent = ({ children, className, listAlignment = "start", ...otherProps }) => /* @__PURE__ */ jsx(Tabs.Root, {
 	render: /* @__PURE__ */ jsx(Stack, {
 		hAlign: listAlignment,
 		vAlign: "start",
 		fillChildren: false,
 		className: clsx(tabs_module_default.Tabs, className)
 	}),
-	...props,
+	...otherProps,
 	children
 });
 var Tabs$1 = Object.assign(TabsRootComponent, {

package/dist/components/text/text.css

@@ -1 +1 @@
-.viraui__text-module__Text_bS8kv{--text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--text-align:start;--text-max-width:none;--text-white-space:normal;--text-padding-inline-start:0;--text-padding-inline-end:0;--text-padding-block-start:0;--text-padding-block-end:0;--text-font-family:var(--font-family-body);--text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium));--text-font-weight:400;--text-font-width:100;--text-font-opsz:16;--text-line-height:var(--font-leading-standard);margin:0;min-inline-size:0;max-inline-size:var(--text-max-width);font-family:var(--text-font-family);font-size:var(--text-font-size);line-height:var(--text-line-height);text-align:var(--text-align);white-space:var(--text-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--text-font-weight),"wdth" var(--text-font-width),"opsz" var(--text-font-opsz);text-box:var(--text-trim) var(--text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--text-padding-block-start) var(--text-padding-inline-end) var(--text-padding-block-end) var(--text-padding-inline-start)}&[data-text-family=mono]{--text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--text-font-size:clamp(var(--font-scale-body-large),calc(var(--text-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-body-x-large))}&[data-text-size=large]{--text-font-size:clamp(var(--font-scale-body-medium),calc(var(--text-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-body-large))}&[data-text-size=medium]{--text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium))}&[data-text-size=small]{--text-font-size:clamp(var(--font-scale-body-x-small),calc(var(--text-medium) * pow(var(--font-heading-typescale), -0.1)),var(--font-scale-body-small))}&[data-text-size=x-small]{--text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--text-font-weight:200}&[data-text-weight=semibold]{--text-font-weight:600}&[data-text-weight=bold]{--text-font-weight:800}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--text-literal-color)}&[data-text-line-height=none]{--text-line-height:0}&[data-text-line-height=x-small]{--text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--text-line-height:var(--font-leading-large)}}
+.viraui__text-module__Text_bS8kv{--text-medium:clamp(var(--font-scale-body-medium),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 12 + 0.24cqi),calc(var(--font-scale-body-medium) + var(--font-scale-body-x-small) / 3));--vui-text-align:start;--vui-text-max-width:none;--vui-text-white-space:normal;--vui-text-padding-inline-start:0;--vui-text-padding-inline-end:0;--vui-text-padding-block-start:0;--vui-text-padding-block-end:0;--vui-text-font-family:var(--font-family-body);--vui-text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium));--vui-text-font-weight:400;--vui-text-font-width:100;--vui-text-font-opsz:16;--vui-text-line-height:var(--font-leading-standard);margin:0;min-inline-size:0;max-inline-size:var(--vui-text-max-width);font-family:var(--vui-text-font-family);font-size:var(--vui-text-font-size);line-height:var(--vui-text-line-height);text-align:var(--vui-text-align);white-space:var(--vui-text-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-text-font-weight),"wdth" var(--vui-text-font-width),"opsz" var(--vui-text-font-opsz);text-box:var(--vui-text-trim) var(--vui-text-trim-type);&[data-text-balanced=true]{text-wrap:balance}&[data-text-selection=false]{-webkit-user-select:none;user-select:none}&[data-text-has-padding=true]{padding:var(--vui-text-padding-block-start) var(--vui-text-padding-inline-end) var(--vui-text-padding-block-end) var(--vui-text-padding-inline-start)}&[data-text-family=mono]{--vui-text-font-family:var(--font-family-mono)}&[data-text-size=x-large]{--vui-text-font-size:clamp(var(--font-scale-body-large),calc(var(--text-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-body-x-large))}&[data-text-size=large]{--vui-text-font-size:clamp(var(--font-scale-body-medium),calc(var(--text-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-body-large))}&[data-text-size=medium]{--vui-text-font-size:clamp(var(--font-scale-body-small),var(--text-medium),var(--font-scale-body-medium))}&[data-text-size=small]{--vui-text-font-size:clamp(var(--font-scale-body-x-small),calc(var(--text-medium) * pow(var(--font-heading-typescale), -0.1)),var(--font-scale-body-small))}&[data-text-size=x-small]{--vui-text-font-size:var(--font-scale-body-x-small)}&[data-text-weight=light]{--vui-text-font-weight:200}&[data-text-weight=semibold]{--vui-text-font-weight:600}&[data-text-weight=bold]{--vui-text-font-weight:800}&[data-text-tone=muted]{color:var(--global-muted)}&[data-text-tone=interactive]{color:var(--global-interactive-text)}&[data-text-tone=positive]{color:var(--highlight-green)}&[data-text-tone=informative]{color:var(--highlight-blue)}&[data-text-tone=danger]{color:var(--highlight-red)}&[data-text-tone=warning]{color:var(--highlight-yellow)}&[data-text-has-literal-color=true]{color:var(--vui-text-literal-color)}&[data-text-line-height=none]{--vui-text-line-height:0}&[data-text-line-height=x-small]{--vui-text-line-height:var(--font-leading-x-small)}&[data-text-line-height=small]{--vui-text-line-height:var(--font-leading-small)}&[data-text-line-height=large]{--vui-text-line-height:var(--font-leading-large)}}

package/dist/components/text/text.guide.json

@@ -16,5 +16,129 @@
     "Choose render when the copy must live on a specific inline or block element"
   ],
   "antiPatterns": ["Using Text for headings instead of Title"],
-  "related": ["Title", "ClampText"]
+  "related": ["Title", "ClampText"],
+  "properties": {
+    "react": {
+      "align": {
+        "description": "Aligns text using logical alignment values.",
+        "refCss": "align"
+      },
+      "maxWidth": {
+        "description": "Constrains the maximum inline size of the rendered text block.",
+        "refCss": "max-width"
+      },
+      "color": {
+        "description": "Applies a literal color escape hatch when semantic tone is not used.",
+        "refCss": "literal-color"
+      },
+      "whiteSpace": {
+        "description": "Controls white-space preservation and wrapping behavior.",
+        "refCss": "white-space"
+      },
+      "weight": {
+        "description": "Numeric variable-font weight override.",
+        "refCss": "font-weight"
+      },
+      "fontWidth": {
+        "description": "Variable-font width axis override.",
+        "refCss": "font-width"
+      },
+      "opticalSize": {
+        "description": "Variable-font optical size axis override.",
+        "refCss": "font-opsz"
+      },
+      "trim": {
+        "description": "Trims text box whitespace at the chosen edge.",
+        "refCss": "trim"
+      },
+      "trimType": {
+        "description": "Selects the text-box trim basis when trim is active.",
+        "refCss": "trim-type"
+      },
+      "hPadding": {
+        "description": "Sets inline padding using one token or a [start, end] tuple."
+      },
+      "vPadding": {
+        "description": "Sets block padding using one token or a [start, end] tuple."
+      },
+      "size": {
+        "description": "Selects a semantic body typography size from the active theme scale.",
+        "refCss": "font-size"
+      },
+      "family": {
+        "description": "Selects the semantic font family for body copy.",
+        "refCss": "font-family"
+      },
+      "lineHeight": {
+        "description": "Controls line height through foundation leading tokens.",
+        "refCss": "line-height"
+      }
+    },
+    "css": {
+      "align": {
+        "description": "Text alignment on the root.",
+        "refReact": "align"
+      },
+      "max-width": {
+        "description": "Max inline size of the text root.",
+        "refReact": "maxWidth"
+      },
+      "literal-color": {
+        "description": "Literal color override on the root.",
+        "refReact": "color"
+      },
+      "white-space": {
+        "description": "White-space behavior on the root.",
+        "refReact": "whiteSpace"
+      },
+      "font-weight": {
+        "description": "Font weight on the root.",
+        "refReact": "weight"
+      },
+      "font-width": {
+        "description": "Font width axis on the root.",
+        "refReact": "fontWidth"
+      },
+      "font-opsz": {
+        "description": "Font optical size axis on the root.",
+        "refReact": "opticalSize"
+      },
+      "trim": {
+        "description": "Text-box trim mode on the root.",
+        "refReact": "trim"
+      },
+      "trim-type": {
+        "description": "Text-box trim basis on the root.",
+        "refReact": "trimType"
+      },
+      "padding-inline-start": {
+        "description": "Inline-start padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-inline-end": {
+        "description": "Inline-end padding when padding is enabled.",
+        "refReact": "hPadding"
+      },
+      "padding-block-start": {
+        "description": "Block-start padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "padding-block-end": {
+        "description": "Block-end padding when padding is enabled.",
+        "refReact": "vPadding"
+      },
+      "font-size": {
+        "description": "Body font size; size prop presets via data attributes.",
+        "refReact": "size"
+      },
+      "font-family": {
+        "description": "Font family; family prop presets via data attributes.",
+        "refReact": "family"
+      },
+      "line-height": {
+        "description": "Line height; lineHeight prop presets via data attributes.",
+        "refReact": "lineHeight"
+      }
+    }
+  }
 }

package/dist/components/text/text.js

@@ -9,17 +9,17 @@ var Text = ({ align = "start", balanced = false, selection = true, className, co
 	const hasPadding = Boolean(hPadding || vPadding);
 	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
-		"--text-align": align,
-		"--text-max-width": maxWidth ?? "none",
-		"--text-literal-color": color,
-		"--text-white-space": whiteSpace,
-		"--text-trim": trim ? `trim-${trim}` : "initial",
-		"--text-trim-type": trim ? trimType : "initial",
-		...typeof weight === "number" && { "--text-font-weight": weight },
-		"--text-font-width": fontWidth,
-		"--text-font-opsz": opticalSize,
-		...resolveAxisPadding(hPadding, "--text-padding-inline-start", "--text-padding-inline-end"),
-		...resolveAxisPadding(vPadding, "--text-padding-block-start", "--text-padding-block-end"),
+		"--vui-text-align": align,
+		"--vui-text-max-width": maxWidth ?? "none",
+		"--vui-text-literal-color": color,
+		"--vui-text-white-space": whiteSpace,
+		"--vui-text-trim": trim ? `trim-${trim}` : "initial",
+		"--vui-text-trim-type": trim ? trimType : "initial",
+		...typeof weight === "number" && { "--vui-text-font-weight": weight },
+		"--vui-text-font-width": fontWidth,
+		"--vui-text-font-opsz": opticalSize,
+		...resolveAxisPadding(hPadding, "--vui-text-padding-inline-start", "--vui-text-padding-inline-end"),
+		...resolveAxisPadding(vPadding, "--vui-text-padding-block-start", "--vui-text-padding-block-end"),
 		...style
 	};
 	return useRender({

package/dist/components/textarea/textarea.css

@@ -1 +1 @@
-.viraui__textarea-module__Textarea_mtOUG{--textarea-min-block-size:calc(var(--space-x-large) * 2);--textarea-padding-block:var(--space-small);--textarea-input-border-radius:var(--radius-small);--field-label-padding-inline:calc(var(--textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__CustomBasicInput_Ce7yA{--basic-input-border-radius:var(--textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--textarea-min-block-size);padding-block:var(--textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=both]{resize:both}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}.viraui__textarea-module__Description_er3zI{padding-inline:calc(var(--textarea-input-border-radius) / 2)}
+.viraui__textarea-module__Textarea_mtOUG{--vui-textarea-min-block-size:calc(var(--space-x-large) * 2);--vui-textarea-padding-block:var(--space-small);--vui-textarea-input-border-radius:var(--radius-small);--vui-field-label-padding-inline:calc(var(--vui-textarea-input-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textarea-module__Label_5dOso:after{content:" ＊";color:var(--highlight-red)}}.viraui__textarea-module__CustomBasicInput_Ce7yA{--vui-basic-input-border-radius:var(--vui-textarea-input-border-radius);border:1px solid var(--global-contrast);min-block-size:var(--vui-textarea-min-block-size);padding-block:var(--vui-textarea-padding-block);line-height:1.4;resize:none;&[data-resize=vertical]{resize:vertical}&[data-resize=both]{resize:both}&[data-invalid]{border-color:var(--highlight-red)}&:disabled,&[data-disabled]{border-color:#0000}}.viraui__textarea-module__Description_er3zI{padding-inline:calc(var(--vui-textarea-input-border-radius) / 2)}