@viraui/react 0.0.25 → 0.0.27

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/tabs/tabs.module.js

@@ -1,11 +1,19 @@
+//#region src/components/tabs/tabs.module.css
+var Tabs = "viraui__tabs-module__Tabs_AwbZZ";
+var Viewport = "viraui__tabs-module__Viewport_15X1I";
+var List = "viraui__tabs-module__List_XJorr";
+var Indicator = "viraui__tabs-module__Indicator_UyNUn";
+var Item = "viraui__tabs-module__Item_XZ86Z";
+var Label = "viraui__tabs-module__Label_5-8-Y";
+var Panel = "viraui__tabs-module__Panel_vkCFI";
 var tabs_module_default = {
-	Tabs: "viraui__tabs-module__Tabs_AwbZZ",
-	Viewport: "viraui__tabs-module__Viewport_15X1I",
-	List: "viraui__tabs-module__List_XJorr",
-	Indicator: "viraui__tabs-module__Indicator_UyNUn",
-	Item: "viraui__tabs-module__Item_XZ86Z",
-	Label: "viraui__tabs-module__Label_5-8-Y",
-	Panel: "viraui__tabs-module__Panel_vkCFI"
+	Tabs,
+	Viewport,
+	List,
+	Indicator,
+	Item,
+	Label,
+	Panel
 };
 //#endregion
-export { tabs_module_default as default };
+export { Indicator, Item, Label, List, Panel, Tabs, Viewport, tabs_module_default as default };

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/text/text.module.js

@@ -1,3 +1,5 @@
-var text_module_default = { Text: "viraui__text-module__Text_bS8kv" };
+//#region src/components/text/text.module.css
+var Text = "viraui__text-module__Text_bS8kv";
+var text_module_default = { Text };
 //#endregion
-export { text_module_default as default };
+export { Text, text_module_default as default };

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

package/dist/components/textarea/textarea.guide.json

@@ -18,5 +18,18 @@
     "Prefer resize modes that do not hide required content from keyboard users"
   ],
   "antiPatterns": ["Using Textarea for single-line values", "Expecting unsupported size or variant props"],
-  "related": ["Fieldset", "Textfield", "Text"]
+  "related": ["Fieldset", "Textfield", "Text"],
+  "properties": {
+    "css": {
+      "min-block-size": {
+        "description": "Minimum block size of the textarea field root."
+      },
+      "padding-block": {
+        "description": "Block padding applied through the textarea root."
+      },
+      "input-border-radius": {
+        "description": "Corner radius for the textarea control group."
+      }
+    }
+  }
 }

package/dist/components/textarea/textarea.js

@@ -1,10 +1,10 @@
 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 { Stack } from "../stack/stack.js";
 import textarea_module_default from "./textarea.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";

package/dist/components/textarea/textarea.module.js

@@ -1,8 +1,13 @@
+//#region src/components/textarea/textarea.module.css
+var Textarea = "viraui__textarea-module__Textarea_mtOUG";
+var Label = "viraui__textarea-module__Label_5dOso";
+var CustomBasicInput = "viraui__textarea-module__CustomBasicInput_Ce7yA";
+var Description = "viraui__textarea-module__Description_er3zI";
 var textarea_module_default = {
-	Textarea: "viraui__textarea-module__Textarea_mtOUG",
-	Label: "viraui__textarea-module__Label_5dOso",
-	CustomBasicInput: "viraui__textarea-module__CustomBasicInput_Ce7yA",
-	Description: "viraui__textarea-module__Description_er3zI"
+	Textarea,
+	Label,
+	CustomBasicInput,
+	Description
 };
 //#endregion
-export { textarea_module_default as default };
+export { CustomBasicInput, Description, Label, Textarea, textarea_module_default as default };

package/dist/components/textfield/textfield.css

@@ -1 +1 @@
-.viraui__textfield-module__Textfield_o-70A{--input-height:var(--space-x-large);--control-group-background:var(--base-1);--control-group-color:var(--global-foreground);--control-group-border-color:var(--global-contrast);--control-group-border-radius:var(--radius-medium);--field-label-padding-inline:calc(var(--control-group-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--input-height);background:var(--control-group-background);border:1px solid var(--control-group-border-color);border-radius:var(--control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid]){--control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--control-group-background:var(--global-disabled-background);--control-group-border-color:#0000;box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;min-inline-size:0;block-size:100%;line-height:1.2;border:none;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}&:disabled{cursor:not-allowed}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--control-group-border-radius) / 2)}
+.viraui__textfield-module__Textfield_o-70A{--vui-textfield-input-height:var(--space-x-large);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-medium);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);inline-size:100%;&:has([required]) .viraui__textfield-module__Label_5rjr0:after{content:" ＊";color:var(--highlight-red)}}.viraui__textfield-module__ControlGroup_2W-OC{box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--vui-textfield-input-height);background:var(--vui-textfield-control-group-background);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:focus-visible),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-invalid]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__textfield-module__CustomBasicInput_oHgtd:disabled),&:has(.viraui__textfield-module__CustomBasicInput_oHgtd[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;box-shadow:none;cursor:not-allowed}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=start])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-start:var(--space-x-small)}&:has(.viraui__textfield-module__Addon_kK1ef[data-position=end])>.viraui__textfield-module__CustomBasicInput_oHgtd{padding-inline-end:var(--space-x-small)}}.viraui__textfield-module__CustomBasicInput_oHgtd{flex:1 1 auto;min-inline-size:0;block-size:100%;line-height:1.2;border:none;background:#0000;box-shadow:none;border-radius:inherit;&:focus-visible{outline:none}&:disabled{cursor:not-allowed}}.viraui__textfield-module__Addon_kK1ef{min-inline-size:var(--space-x-large)}.viraui__textfield-module__Description_8Qxot{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}

package/dist/components/textfield/textfield.guide.json

@@ -22,5 +22,24 @@
     "Passing unsupported size or variant props",
     "Expecting a focus ring when focus is only on addon controls"
   ],
-  "related": ["Fieldset", "Textarea", "Select", "Text"]
+  "related": ["Fieldset", "Textarea", "Select", "Text"],
+  "properties": {
+    "css": {
+      "input-height": {
+        "description": "Textfield control group block size."
+      },
+      "control-group-background": {
+        "description": "Textfield control group background."
+      },
+      "control-group-color": {
+        "description": "Textfield control group foreground color."
+      },
+      "control-group-border-color": {
+        "description": "Textfield control group border color."
+      },
+      "control-group-border-radius": {
+        "description": "Textfield control group corner radius."
+      }
+    }
+  }
 }

package/dist/components/textfield/textfield.js

@@ -1,11 +1,11 @@
 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";
 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 { Stack } from "../stack/stack.js";
 import textfield_module_default from "./textfield.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";

package/dist/components/textfield/textfield.module.js

@@ -1,10 +1,17 @@
+//#region src/components/textfield/textfield.module.css
+var Textfield = "viraui__textfield-module__Textfield_o-70A";
+var Label = "viraui__textfield-module__Label_5rjr0";
+var ControlGroup = "viraui__textfield-module__ControlGroup_2W-OC";
+var CustomBasicInput = "viraui__textfield-module__CustomBasicInput_oHgtd";
+var Addon = "viraui__textfield-module__Addon_kK1ef";
+var Description = "viraui__textfield-module__Description_8Qxot";
 var textfield_module_default = {
-	Textfield: "viraui__textfield-module__Textfield_o-70A",
-	Label: "viraui__textfield-module__Label_5rjr0",
-	ControlGroup: "viraui__textfield-module__ControlGroup_2W-OC",
-	CustomBasicInput: "viraui__textfield-module__CustomBasicInput_oHgtd",
-	Addon: "viraui__textfield-module__Addon_kK1ef",
-	Description: "viraui__textfield-module__Description_8Qxot"
+	Textfield,
+	Label,
+	ControlGroup,
+	CustomBasicInput,
+	Addon,
+	Description
 };
 //#endregion
-export { textfield_module_default as default };
+export { Addon, ControlGroup, CustomBasicInput, Description, Label, Textfield, textfield_module_default as default };

package/dist/components/title/title.css

@@ -1 +1 @@
-.viraui__title-module__Title_CXMUX{--title-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));--title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--title-font-family:var(--font-family-heading);--title-font-weight:500;--title-font-width:100;--title-font-opsz:16;--title-line-height:var(--font-leading-standard);--title-letter-spacing:-0.03em;--title-align:start;--title-max-width:none;--title-white-space:normal;--title-padding-inline-start:0;--title-padding-inline-end:0;--title-padding-block-start:0;--title-padding-block-end:0;margin:0;max-inline-size:var(--title-max-width);font-family:var(--title-font-family);font-size:var(--title-font-size);line-height:var(--title-line-height);letter-spacing:var(--title-letter-spacing);text-align:var(--title-align);white-space:var(--title-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--title-font-weight),"wdth" var(--title-font-width),"opsz" var(--title-font-opsz);text-box:var(--title-trim) var(--title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--title-padding-block-start) var(--title-padding-inline-end) var(--title-padding-block-end) var(--title-padding-inline-start)}&[data-title-level=display]{--title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-level=h1]{--title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1))}&[data-title-level=h2]{--title-font-size:clamp(var(--font-scale-h3),calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-level=h3]{--title-font-size:clamp(var(--font-scale-h4),calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-level=h4]{--title-font-size:clamp(var(--font-scale-h5),calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-level=h5]{--title-font-size:clamp(var(--font-scale-h6),calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--title-letter-spacing:-0.02em}&[data-title-level=h6]{--title-font-size:clamp(var(--font-scale-body-medium),var(--title-medium),var(--font-scale-h6));--title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--title-literal-color)}&[data-title-line-height=none]{--title-line-height:0}&[data-title-line-height=x-small]{--title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--title-line-height:var(--font-leading-large)}}
+.viraui__title-module__Title_CXMUX{--title-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-title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1));--vui-title-font-family:var(--font-family-heading);--vui-title-font-weight:500;--vui-title-font-width:100;--vui-title-font-opsz:16;--vui-title-line-height:var(--font-leading-standard);--vui-title-letter-spacing:-0.03em;--vui-title-align:start;--vui-title-max-width:none;--vui-title-white-space:normal;--vui-title-padding-inline-start:0;--vui-title-padding-inline-end:0;--vui-title-padding-block-start:0;--vui-title-padding-block-end:0;margin:0;max-inline-size:var(--vui-title-max-width);font-family:var(--vui-title-font-family);font-size:var(--vui-title-font-size);line-height:var(--vui-title-line-height);letter-spacing:var(--vui-title-letter-spacing);text-align:var(--vui-title-align);white-space:var(--vui-title-white-space);word-break:break-word;font-optical-sizing:auto;font-variation-settings:"wght" var(--vui-title-font-weight),"wdth" var(--vui-title-font-width),"opsz" var(--vui-title-font-opsz);text-box:var(--vui-title-trim) var(--vui-title-trim-type);display:inline-flex;&[data-title-balanced=true]{text-wrap:balance}&[data-title-selection=false]{-webkit-user-select:none;user-select:none}&[data-title-has-padding=true]{padding:var(--vui-title-padding-block-start) var(--vui-title-padding-inline-end) var(--vui-title-padding-block-end) var(--vui-title-padding-inline-start)}&[data-title-level=display]{--vui-title-font-size:clamp(var(--font-scale-h1),calc(var(--font-scale-h1) + 4.643cqi - 0.9286rem),var(--font-scale-display))}&[data-title-level=h1]{--vui-title-font-size:clamp(var(--font-scale-h2),calc(var(--title-medium) * pow(var(--font-heading-typescale), 5)),var(--font-scale-h1))}&[data-title-level=h2]{--vui-title-font-size:clamp(var(--font-scale-h3),calc(var(--title-medium) * pow(var(--font-heading-typescale), 4)),var(--font-scale-h2))}&[data-title-level=h3]{--vui-title-font-size:clamp(var(--font-scale-h4),calc(var(--title-medium) * pow(var(--font-heading-typescale), 3)),var(--font-scale-h3))}&[data-title-level=h4]{--vui-title-font-size:clamp(var(--font-scale-h5),calc(var(--title-medium) * pow(var(--font-heading-typescale), 2)),var(--font-scale-h4))}&[data-title-level=h5]{--vui-title-font-size:clamp(var(--font-scale-h6),calc(var(--title-medium) * pow(var(--font-heading-typescale), 1)),var(--font-scale-h5));--vui-title-letter-spacing:-0.02em}&[data-title-level=h6]{--vui-title-font-size:clamp(var(--font-scale-body-medium),var(--title-medium),var(--font-scale-h6));--vui-title-letter-spacing:-0.02em}&[data-title-has-literal-color=true]{color:var(--vui-title-literal-color)}&[data-title-line-height=none]{--vui-title-line-height:0}&[data-title-line-height=x-small]{--vui-title-line-height:var(--font-leading-x-small)}&[data-title-line-height=small]{--vui-title-line-height:var(--font-leading-small)}&[data-title-line-height=large]{--vui-title-line-height:var(--font-leading-large)}}

package/dist/components/title/title.guide.json

@@ -19,5 +19,127 @@
     "Letting level force the HTML tag instead of choosing render explicitly",
     "Using Title for long body paragraphs"
   ],
-  "related": ["Text", "ClampText"]
+  "related": ["Text", "ClampText"],
+  "properties": {
+    "react": {
+      "align": {
+        "description": "Aligns text using logical alignment values.",
+        "refCss": "align"
+      },
+      "maxWidth": {
+        "description": "Constrains the maximum inline size of the rendered title 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."
+      },
+      "level": {
+        "description": "Selects the visual heading preset; does not change semantic heading level.",
+        "refCss": "font-size"
+      },
+      "lineHeight": {
+        "description": "Controls line height through foundation leading tokens.",
+        "refCss": "line-height"
+      }
+    },
+    "css": {
+      "align": {
+        "description": "Title alignment on the root.",
+        "refReact": "align"
+      },
+      "max-width": {
+        "description": "Max inline size of the title 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": "Heading font size; level prop presets via data attributes.",
+        "refReact": "level"
+      },
+      "line-height": {
+        "description": "Line height; lineHeight prop presets via data attributes.",
+        "refReact": "lineHeight"
+      },
+      "letter-spacing": {
+        "description": "Heading letter spacing; level presets adjust this."
+      },
+      "font-family": {
+        "description": "Heading font family on the root."
+      }
+    }
+  }
 }

package/dist/components/title/title.js

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

package/dist/components/title/title.module.js

@@ -1,3 +1,5 @@
-var title_module_default = { Title: "viraui__title-module__Title_CXMUX" };
+//#region src/components/title/title.module.css
+var Title = "viraui__title-module__Title_CXMUX";
+var title_module_default = { Title };
 //#endregion
-export { title_module_default as default };
+export { Title, title_module_default as default };

package/dist/components/toast/toast-action.js

@@ -2,9 +2,9 @@ import { Button } from "../button/button.js";
 import { jsx } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";
 //#region src/components/toast/toast-action.tsx
-var ToastAction = ({ render, ...props }) => /* @__PURE__ */ jsx(Toast.Action, {
+var ToastAction = ({ render, ...otherProps }) => /* @__PURE__ */ jsx(Toast.Action, {
 	render: render ?? /* @__PURE__ */ jsx(Button, { variant: "secondary" }),
-	...props
+	...otherProps
 });
 //#endregion
 export { ToastAction };

package/dist/components/toast/toast-banner.js

@@ -1,7 +1,7 @@
 import { clsx } from "../../core/clsx.js";
-import { Stack } from "../stack/stack.js";
 import { Button } from "../button/button.js";
 import { Text } from "../text/text.js";
+import { Stack } from "../stack/stack.js";
 import { Surface } from "../surface/surface.js";
 import toast_module_default from "./toast.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -3,10 +3,10 @@ import toast_module_default from "./toast.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";
 //#region src/components/toast/toast-viewport.tsx
-var ToastViewport = ({ className, position = "bottom-right", ...props }) => /* @__PURE__ */ jsx(Toast.Viewport, {
+var ToastViewport = ({ className, position = "bottom-right", ...otherProps }) => /* @__PURE__ */ jsx(Toast.Viewport, {
 	className: clsx(toast_module_default.Viewport, className),
 	"data-position": position,
-	...props
+	...otherProps
 });
 //#endregion
 export { ToastViewport };