@viraui/react 1.0.10 → 1.0.12

package/dist/components/textfield/textfield.js

@@ -1,6 +1,5 @@
 import './textfield.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.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";
@@ -11,48 +10,45 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 import { Input } from "@base-ui/react/input";
 //#region src/components/textfield/textfield.tsx
-var Textfield = ({ className, description, dirty, disabled, endAddon, error, invalid, label, name, ref, startAddon, touched, validate, validationDebounceTime, validationMode, ...inputProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(inputProps);
-	return /* @__PURE__ */ jsxs(Field.Root, {
-		...intrinsicAttributes,
-		className: textfield_module_default.Textfield,
-		dirty,
-		disabled,
-		invalid,
-		name,
-		touched,
-		validate,
-		validationDebounceTime,
-		validationMode,
-		render: /* @__PURE__ */ jsx(Stack, {
-			direction: "column",
-			rowGap: "small"
+var Textfield = ({ className, description, dirty, disabled, endAddon, error, fitContent, invalid, label, name, ref, startAddon, touched, validate, validationDebounceTime, validationMode, ...inputProps }) => /* @__PURE__ */ jsxs(Field.Root, {
+	className: textfield_module_default.Textfield,
+	dirty,
+	disabled,
+	invalid,
+	name,
+	touched,
+	validate,
+	validationDebounceTime,
+	validationMode,
+	render: /* @__PURE__ */ jsx(Stack, {
+		direction: "column",
+		rowGap: "small"
+	}),
+	children: [
+		label && /* @__PURE__ */ jsx(Field.Label, {
+			className: textfield_module_default.Label,
+			children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
 		}),
-		children: [
-			label && /* @__PURE__ */ jsx(Field.Label, {
-				className: textfield_module_default.Label,
-				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
-			}),
-			/* @__PURE__ */ jsx(InputControlGroup, {
-				addonClassName: textfield_module_default.Addon,
-				controlGroupClassName: textfield_module_default.ControlGroup,
-				endAddon,
-				startAddon,
-				children: /* @__PURE__ */ jsx(BasicInput, {
-					...componentProps,
-					ref,
-					className: clsx(textfield_module_default.CustomBasicInput, className),
-					disabled,
-					render: /* @__PURE__ */ jsx(Input, {})
-				})
-			}),
-			/* @__PURE__ */ jsx(FieldHelperCopy, {
-				className: textfield_module_default.Description,
-				description,
-				error
+		/* @__PURE__ */ jsx(InputControlGroup, {
+			addonClassName: textfield_module_default.Addon,
+			controlGroupClassName: textfield_module_default.ControlGroup,
+			endAddon,
+			startAddon,
+			children: /* @__PURE__ */ jsx(BasicInput, {
+				...inputProps,
+				ref,
+				className: clsx(textfield_module_default.CustomBasicInput, className),
+				disabled,
+				fitContent,
+				render: /* @__PURE__ */ jsx(Input, {})
 			})
-		]
-	});
-};
+		}),
+		/* @__PURE__ */ jsx(FieldHelperCopy, {
+			className: textfield_module_default.Description,
+			description,
+			error
+		})
+	]
+});
 //#endregion
 export { Textfield };

package/dist/components/title/title.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:none}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:none}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:-.03em}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}.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-line-height:var(--font-leading-standard);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-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);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)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-title-align{syntax:"*";inherits:false;initial-value:start}@property --vui-title-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-title-literal-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-title-white-space{syntax:"*";inherits:false;initial-value:normal}@property --vui-title-font-weight{syntax:"<number>";inherits:false;initial-value:500}@property --vui-title-font-width{syntax:"<number>";inherits:false;initial-value:100}@property --vui-title-font-opsz{syntax:"<number>";inherits:false;initial-value:16}@property --vui-title-trim{syntax:"*";inherits:false;initial-value:none}@property --vui-title-trim-type{syntax:"*";inherits:false;initial-value:none}@property --vui-title-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-title-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-title-line-height{syntax:"normal | <number> | <length-percentage>";inherits:false;initial-value:normal}@property --vui-title-letter-spacing{syntax:"normal | <length>";inherits:false;initial-value:-.03em}@property --vui-title-font-family{syntax:"*";inherits:false;initial-value:sans-serif}.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-line-height:var(--font-leading-standard);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-weight:var(--vui-title-font-weight);font-stretch:calc(var(--vui-title-font-width) * 1%);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-size=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-size="1"]{--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-size="2"]{--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-size="3"]{--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-size="4"]{--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-size="5"]{--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-size="6"]{--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.d.ts

@@ -1,6 +1,5 @@
 import { useRender } from '@base-ui/react/use-render';
 import { ThemeTypes } from '@viraui/foundation/vira/types';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 type TitleSpace = ThemeTypes['space'];
 type TitleAxisPadding = TitleSpace | [TitleSpace | 0, TitleSpace | 0];
@@ -12,11 +11,11 @@ type TitleAxisPadding = TitleSpace | [TitleSpace | 0, TitleSpace | 0];
  *
  * @default Base HTML pass-through props keep upstream defaults.
  */
-export type TitleProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraProps & {
+export type TitleProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Replaces the default `span` root using Base UI render semantics.
      *
-     * Pair this with `level` for most headings so DOM semantics and visual preset stay intentionally aligned.
+     * Pair this with `size` for most headings so DOM semantics and visual preset stay intentionally aligned.
      *
      * @default The title renders a `span` root.
      */
@@ -33,11 +32,11 @@ export type TitleProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraP
      * This controls only the visual preset. Semantic heading choice remains owned by `render`,
      * because `Title` keeps a `span` root unless `render` replaces it.
      *
-     * @default 'h1'
+     * @default '1'
      */
-    level?: 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    size?: 'display' | '1' | '2' | '3' | '4' | '5' | '6';
     /**
-     * Overrides the level preset weight (`font-weight` + `wght` axis).
+     * Overrides the size preset weight (`font-weight` + `wght` axis).
      *
      * @default No weight override.
      */

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

@@ -1,22 +1,23 @@
 {
   "name": "Title",
+  "structure": "<Title>…</Title>",
   "summary": "Theme-aware heading and display typography primitive.",
   "whenToUse": [
     "Headings and display text with title presets",
     "Semantic heading tags chosen explicitly through render",
-    "Level and render paired together for most heading use cases",
-    "Fluid clamp sizing across title levels"
+    "Size and render paired together for most heading use cases",
+    "Fluid clamp sizing across title appearance presets"
   ],
   "whenNotToUse": ["Body copy — use Text", "Body or mono family typography"],
   "accessibility": [
     "Title renders a span by default, so choose render to match the correct heading level for the page outline",
-    "Visual level presets do not replace picking the right h1–h6 element",
-    "Use level for appearance and render for semantics; pair them unless you intentionally need a visual mismatch",
-    "Keep heading hierarchy sequential; do not skip levels for styling alone"
+    "Visual size presets do not replace picking the right h1–h6 element",
+    "Use size for appearance and render for semantics; pair them unless you intentionally need a visual mismatch",
+    "Keep heading hierarchy sequential; do not skip outline levels for styling alone"
   ],
   "antiPatterns": [
-    "Assuming level changes the HTML tag automatically",
-    "Letting level force the HTML tag instead of choosing render explicitly",
+    "Assuming size changes the HTML tag automatically",
+    "Letting size force the HTML tag instead of choosing render explicitly",
     "Using Title for long body paragraphs"
   ],
   "related": ["Text", "ClampText"],
@@ -64,8 +65,8 @@
       "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.",
+      "size": {
+        "description": "Selects the visual heading appearance preset; does not change semantic heading level.",
         "refCss": "font-size"
       },
       "lineHeight": {
@@ -127,15 +128,15 @@
         "refReact": "vPadding"
       },
       "font-size": {
-        "description": "Heading font size; level prop presets via data attributes.",
-        "refReact": "level"
+        "description": "Heading font size; size prop presets via data attributes.",
+        "refReact": "size"
       },
       "line-height": {
         "description": "Line height; lineHeight prop presets via data attributes.",
         "refReact": "lineHeight"
       },
       "letter-spacing": {
-        "description": "Heading letter spacing; level presets adjust this."
+        "description": "Heading letter spacing; size presets adjust this."
       },
       "font-family": {
         "description": "Heading font family on the root."

package/dist/components/title/title.js

@@ -1,13 +1,11 @@
 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 { 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 }) => {
+var Title = ({ align = "start", balanced = false, selection = true, className, color, fontWidth, hPadding, size = "1", lineHeight = "standard", maxWidth, opticalSize, ref, render, style, trim = "both", trimType = "cap alphabetic", vPadding, weight, whiteSpace = "normal", ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
 		"--vui-title-align": align,
 		"--vui-title-max-width": maxWidth ?? "none",
@@ -27,9 +25,8 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
 		render,
 		ref,
 		props: {
-			...componentProps,
-			...intrinsicAttributes,
-			"data-title-level": level,
+			...otherProps,
+			"data-title-size": size,
 			"data-title-weight": weight !== void 0 ? "custom" : "preset",
 			"data-title-line-height": lineHeight,
 			"data-title-balanced": balanced ? "true" : "false",

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

@@ -19,7 +19,7 @@ var ToastBanner = ({ children, className, description, dismissable = true, dismi
 			color: 1,
 			border: "all",
 			radius: "large",
-			vibrant: true
+			"data-vibrant": ""
 		}),
 		...!resolvedTitle && resolvedDescription && { "aria-label": typeof resolvedDescription === "string" ? resolvedDescription : void 0 },
 		children: /* @__PURE__ */ jsxs(Toast.Content, {

package/dist/components/toast/toast.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Toast",
+  "structure": "<Toast.Provider>\n  <Toast.Portal>\n    <Toast.Viewport>\n      <Toast.Banner toast={…}>\n        <Toast.Action>…</Toast.Action>\n      </Toast.Banner>\n    </Toast.Viewport>\n  </Toast.Portal>\n</Toast.Provider>",
   "summary": "Transient notification surface with stacked or anchored placement, Banner high-level API, and optional action buttons.",
   "whenToUse": [
     "Confirming a completed action such as save or delete",

package/dist/components/toggle-button/toggle-button.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "ToggleButton",
+  "structure": "<ToggleButton restingIcon={<Plus />} aria-label=\"Pin\" />",
   "summary": "Icon-only two-state toggle that swaps resting and optional pressed icons on Base UI Toggle state.",
   "whenToUse": [
     "Toolbar pin, favorite, or mute toggles identified only by icon",

package/dist/components/toggle-group/toggle-group.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "ToggleGroup",
+  "structure": "<ToggleGroup>\n  <ToggleButton restingIcon={<Plus />} aria-label=\"List\" value=\"list\" />\n</ToggleGroup>",
   "summary": "Toolbar toggle set with shared selection state and default Stack spacing on Base UI ToggleGroup.",
   "whenToUse": [
     "Segmented icon toolbars such as text alignment or formatting controls",

package/dist/components/tooltip/tooltip-content.js

@@ -15,7 +15,7 @@ var TooltipContent = ({ children, sideOffset = 8, ...positionerProps }) => /* @_
 			color: 1,
 			border: "all",
 			radius: "medium",
-			vibrant: true
+			"data-vibrant": ""
 		}),
 		children: /* @__PURE__ */ jsx(Tooltip.Viewport, {
 			className: tooltip_module_default.Viewport,

package/dist/components/tooltip/tooltip.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Tooltip",
+  "structure": "<Tooltip>\n  <Tooltip.Trigger />\n  <Tooltip.Content />\n</Tooltip>",
   "summary": "Compound tooltip built on Base UI Tooltip with `Tooltip.Provider`, `Tooltip.Trigger`, `Tooltip.Content`, and `Tooltip.createHandle` for detached and multiple triggers; `Content` encapsulates Portal + Positioner + Popup + Viewport and animates position, size, and content between triggers.",
   "whenToUse": [
     "Short hints on hover or focus for toolbar controls and icon buttons",

package/dist/components/typewriter/typewriter.d.ts

@@ -1,4 +1,3 @@
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import { TypewriterCaret } from './typewriter.utils';
 import type * as React from 'react';
 /**
@@ -9,7 +8,7 @@ import type * as React from 'react';
  *
  * @default Native span pass-through props keep React defaults.
  */
-export type TypewriterProps = React.ComponentPropsWithRef<'span'> & IntrinsicViraProps & {
+export type TypewriterProps = React.ComponentPropsWithRef<'span'> & {
     /**
      * Cycles through multiple phrases instead of a single `children` string.
      *

package/dist/components/typewriter/typewriter.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Typewriter",
+  "structure": "<Typewriter>…</Typewriter>",
   "summary": "Decorative inline typewriter animation that inherits typography and color from a parent text primitive.",
   "whenToUse": [
     "Hero or marketing copy that cycles through short phrases",

package/dist/components/typewriter/typewriter.js

@@ -1,7 +1,6 @@
 "use client";
 import './typewriter.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import typewriter_module_default from "./typewriter.module.js";
 import { resolveTextsKey, runTypewriterAnimation, splitTextsKey } from "./typewriter.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +14,6 @@ var createCaretElement = (caret) => {
 	return element;
 };
 var Typewriter = ({ caret = "pipe", caretColor, children, className, delay = 0, deleteSpeed = 25, loop = true, pause = 2e3, preserveSpace = false, ref, speed = 40, style, texts, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const displayRef = useRef(null);
 	const liveRef = useRef(null);
 	const textsKey = resolveTextsKey(texts, children);
@@ -78,8 +76,7 @@ var Typewriter = ({ caret = "pipe", caretColor, children, className, delay = 0,
 		...style
 	};
 	return /* @__PURE__ */ jsxs("span", {
-		...componentProps,
-		...intrinsicAttributes,
+		...otherProps,
 		ref,
 		className: clsx(typewriter_module_default.Typewriter, className),
 		style: dynamicStyle,

package/dist/index.d.ts

@@ -1,2 +1 @@
 export * from './components';
-export type { IntrinsicViraProps } from './core/props/intrinsic-vira-props';

package/dist/index.js

@@ -1,4 +1,5 @@
 import { Accordion } from "./components/accordion/accordion.js";
+import { Annotate } from "./components/annotate/annotate.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { AvatarGroup } from "./components/avatar-group/avatar-group.js";
 import { Bleed } from "./components/bleed/bleed.js";
@@ -21,6 +22,7 @@ import { ELEVATION_DEFAULTS } from "./core/elevation/elevation-types.js";
 import { getElevationProps } from "./core/elevation/get-elevation-props.js";
 import { Elevator } from "./components/elevator/elevator.js";
 import { Fieldset } from "./components/fieldset/fieldset.js";
+import { FitText } from "./components/fit-text/fit-text.js";
 import { IconButton } from "./components/icon-button/icon-button.js";
 import { IconButtonLink } from "./components/icon-button/icon-button-link.js";
 import { LinearProgress } from "./components/linear-progress/linear-progress.js";
@@ -49,4 +51,4 @@ import { ToggleGroup } from "./components/toggle-group/toggle-group.js";
 import { Typewriter } from "./components/typewriter/typewriter.js";
 import { TooltipContent } from "./components/tooltip/tooltip-content.js";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
-export { Accordion, Avatar, AvatarGroup, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, IconButton, IconButtonLink, LinearProgress, Masonry, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };
+export { Accordion, Annotate, Avatar, AvatarGroup, Bleed, Button, ButtonLink, Checkbox, CheckboxGroup, Chip, ClampText, Dialog, DialogClose, DialogIndent, DialogIndentBackground, DialogSheet, DialogTrigger, ELEVATION_DEFAULTS, Elevator, Fieldset, FitText, IconButton, IconButtonLink, LinearProgress, Masonry, Meter, Popover, PopoverClose, PopoverDescription, PopoverSheet, PopoverTitle, PopoverTrigger, ProgressiveBlur, Radio, RadioGroup, Select, Separator, Shimmer, Skeleton, Slider, Spinner, Stack, StaticNoise, Surface, Switch, Tabs, Text, Textarea, Textfield, Title, Toast, ToggleButton, ToggleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typewriter, getElevationProps };

package/dist/preflight-surface.json

@@ -25,7 +25,7 @@
     {
       "id": "layout",
       "file": "layout.css",
-      "purpose": "Flex growth and shrink opt-out utilities for Stack and component children."
+      "purpose": "Flex growth and shrink utilities via data-grow / data-shrink for Stack and component children."
     }
   ],
   "attributes": [
@@ -98,28 +98,28 @@
     {
       "name": "data-grow",
       "module": "layout",
-      "values": ["false"],
-      "presence": "only false is meaningful; true or omitted does not render the attribute",
-      "effect": "Sets --vira-flex-grow: 0 and flex-grow: 0 so the element opts out of flex growth.",
+      "values": ["true", "false"],
+      "presence": "optional; omit for default flex growth",
+      "effect": "true sets --vira-flex-grow: 1 and flex-grow: 1; false sets --vira-flex-grow: 0 and flex-grow: 0.",
       "whenToUse": [
-        "Fixed-width icons, indicators, or trailing slots inside Stack fillChildren layouts",
-        "Public component grow={false} on the outermost root"
+        "Force grow or opt out inside Stack fillChildren layouts",
+        "Fixed-width icons, indicators, or trailing slots (false)"
       ],
-      "whenNotToUse": ["When the element should grow to fill available flex space"],
-      "related": ["Stack", "grow prop on public components"]
+      "whenNotToUse": ["When default flex growth is already correct"],
+      "related": ["Stack"]
     },
     {
       "name": "data-shrink",
       "module": "layout",
-      "values": ["false"],
-      "presence": "only false is meaningful; true or omitted does not render the attribute",
-      "effect": "Sets --vira-flex-shrink: 0 and flex-shrink: 0 so the element resists flex shrink.",
+      "values": ["true", "false"],
+      "presence": "optional; omit for default flex shrink",
+      "effect": "true sets --vira-flex-shrink: 1 and flex-shrink: 1; false sets --vira-flex-shrink: 0 and flex-shrink: 0.",
       "whenToUse": [
-        "Labels, icons, or controls that must keep their intrinsic width in shrinking flex rows",
-        "Public component shrink={false} on the outermost root"
+        "Force shrink or resist shrink in flex rows",
+        "Labels, icons, or controls that must keep intrinsic width (false)"
       ],
-      "whenNotToUse": ["When the element should shrink with the flex container"],
-      "related": ["Stack", "shrink prop on public components"]
+      "whenNotToUse": ["When default flex shrink is already correct"],
+      "related": ["Stack"]
     }
   ],
   "customProperties": [
@@ -161,20 +161,19 @@
     {
       "name": "--vira-flex-grow",
       "module": "layout",
-      "setBy": "data-grow=\"false\"",
+      "setBy": "data-grow=\"true\" or data-grow=\"false\"",
       "default": "unset; Stack child rules use var(--vira-flex-grow, 1)",
-      "purpose": "Lets component child flex defaults honor grow opt-out without !important."
+      "purpose": "Lets component child flex defaults honor grow data attrs without !important."
     },
     {
       "name": "--vira-flex-shrink",
       "module": "layout",
-      "setBy": "data-shrink=\"false\"",
+      "setBy": "data-shrink=\"true\" or data-shrink=\"false\"",
       "default": "unset",
-      "purpose": "Lets component child flex defaults honor shrink opt-out without !important."
+      "purpose": "Lets component child flex defaults honor shrink data attrs without !important."
     }
   ],
   "antiPatterns": [
-    "Setting data-grow or data-shrink to true; only false is serialized by Vira components",
     "Using data-elevation without importing @viraui/react/preflight.css",
     "Fighting data-mode color-scheme rules without documenting a deliberate override",
     "Applying data-no-link-style to prose links that should use the default interactive underline treatment"

package/dist/preflight.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*{@container root not style(--corner-shape-enable: initial){corner-shape:var(--corner-shape-squircle)}}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums}::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{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size: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 :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklab(0 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@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),#0000 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/12%);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)}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-mode=dark]{color-scheme:dark}[data-mode=light]{color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.preflight{@property --scrollbar-thumb{syntax:"<color>";initial-value:#0000;inherits:true}@property --scrollbar-track{syntax:"<color>";initial-value:#0000;inherits:true}@property --outline-offset{syntax:"<length>";initial-value:2px;inherits:true}@property --outline-color{syntax:"<color>";initial-value:currentcolor;inherits:true}@property --outline{syntax:"*";initial-value:2px solid currentcolor;inherits:true}@property --is-light-mode{syntax:"<color>";initial-value:#000;inherits:true}}@layer viraui.preflight{html{--scrollbar-thumb:oklab(from var(--global-contrast) l a b/0.3);--scrollbar-track:#0000;--outline-offset:2px;--outline-color:var(--global-outline);--outline:2px solid var(--outline-color);--is-light-mode:contrast-color(var(--global-background));font-size:100%;box-sizing:border-box;line-height:1.5;background-color:var(--global-background);color:var(--global-foreground);container:root/normal}*{@container root not style(--corner-shape-enable: initial){corner-shape:var(--corner-shape-squircle)}}*,:after,:before{margin:0;box-sizing:inherit;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}body{color:var(--global-foreground);margin:0;font-size:var(--font-scale-body-medium);font-optical-sizing:auto;font-family:var(--font-family-body),system-ui,sans-serif;font-variation-settings:"wght" 400;font-variant-numeric:tabular-nums}::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{display:inline-flex;vertical-align:middle;&:not([fill]){fill:currentcolor}}ol ul,ul ol{font-size:medium}table{border-spacing:0;inline-size: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 :is(td,th){border:none;text-align:left;font-size:medium;padding:calc(var(--space-x-small) + var(--space-2x-small)) var(--space-small)}button,fieldset{padding:0;margin:0;border:0}button{appearance:none;background:none;font-size:inherit;font-family:inherit;display:inline-flex;cursor:pointer;color:inherit}[data-elevation]{--shadow-direction:1;--shadow-opacity-factor:0.16;--extra-shadow:0 0 0 1px #0000;--shadow-color:oklab(0 0 0);transition-property:box-shadow;transition-duration:var(--elevation-transition-duration,.16s);transition-timing-function:var(--elevation-transition-easing,ease)}}@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),#0000 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=true]{--vira-flex-grow:1;flex-grow:1}[data-grow=false]{--vira-flex-grow:0;flex-grow:0}[data-shrink=true]{--vira-flex-shrink:1;flex-shrink:1}[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/12%);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)}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-mode=dark]{color-scheme:dark}[data-mode=light]{color-scheme:light}}@layer viraui.preflight{[data-mode=inverted]{@container root style(--is-light-mode: black){color-scheme:dark}@container root style(--is-light-mode: white){color-scheme:light}}}@layer viraui.preflight{@container root not style(--vibrancy-enable: initial){[data-vibrant]{backdrop-filter:brightness(var(--vibrancy-brightness)) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%);@container root style(--is-light-mode: black){backdrop-filter:brightness(100%) blur(calc(var(--vibrancy-blur) * 1px)) saturate(150%)}}}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viraui/react",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "private": false,
   "files": [
     "dist"
@@ -35,10 +35,10 @@
     "unplugin-dts": "1.0.3",
     "vite": "8.1.4",
     "vite-plugin-static-copy": "4.1.1",
-    "@viraui/foundation": "1.0.10",
+    "@viraui/foundation": "1.0.12",
     "@viraui/icons": "0.1.7",
-    "@viraui/tsconfig": "0.0.17",
-    "@viraui/postcss-config": "0.0.18"
+    "@viraui/postcss-config": "0.0.18",
+    "@viraui/tsconfig": "0.0.17"
   },
   "peerDependencies": {
     "@base-ui/react": ">=1.6.0",

package/dist/core/props/intrinsic-vira-props.d.ts

@@ -1,30 +0,0 @@
-export type IntrinsicViraProps = {
-    /**
-     * Adds `data-grow="false"` to the component root when false.
-     *
-     * @default The component root does not render a grow attribute.
-     */
-    grow?: boolean;
-    /**
-     * Adds `data-shrink="false"` to the component root when false.
-     *
-     * @default The component root does not render a shrink attribute.
-     */
-    shrink?: boolean;
-    /**
-     * Adds `data-vibrant` to the component root when true so preflight vibrancy styles can opt the surface into backdrop filtering.
-     *
-     * @default The component root does not render a vibrant attribute.
-     */
-    vibrant?: boolean;
-};
-type IntrinsicViraAttributes = {
-    'data-grow'?: 'false';
-    'data-shrink'?: 'false';
-    'data-vibrant'?: '';
-};
-export declare const extractIntrinsicViraProps: <Props extends IntrinsicViraProps>(props: Props) => {
-    componentProps: Omit<Props, keyof IntrinsicViraProps>;
-    intrinsicAttributes: IntrinsicViraAttributes;
-};
-export {};

package/dist/core/props/intrinsic-vira-props.js

@@ -1,14 +0,0 @@
-//#region src/core/props/intrinsic-vira-props.ts
-var extractIntrinsicViraProps = (props) => {
-	const { grow, shrink, vibrant, ...componentProps } = props;
-	return {
-		componentProps,
-		intrinsicAttributes: {
-			...grow === false && { "data-grow": "false" },
-			...shrink === false && { "data-shrink": "false" },
-			...vibrant && { "data-vibrant": "" }
-		}
-	};
-};
-//#endregion
-export { extractIntrinsicViraProps };