@viraui/react 1.0.9 → 1.0.11

package/dist/components/switch/switch.d.ts

@@ -1,7 +1,6 @@
 import { FieldRoot } from '@base-ui/react/field';
 import { SwitchRoot } from '@base-ui/react/switch';
 import { StackProps } from '..';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 /**
  * Public Switch props.
@@ -13,18 +12,6 @@ import type * as React from 'react';
  * @default Base UI pass-through props keep upstream defaults.
  */
 export type SwitchProps = SwitchRoot.Props & Omit<FieldRoot.Props, 'ref'> & {
-    /**
-     * Adds `data-grow="false"` to the field root when false.
-     *
-     * @default The field root does not render a grow attribute.
-     */
-    grow?: IntrinsicViraProps['grow'];
-    /**
-     * Adds `data-shrink="false"` to the field root when false.
-     *
-     * @default The field root does not render a shrink attribute.
-     */
-    shrink?: IntrinsicViraProps['shrink'];
     /**
      * Visible label rendered with shared internal `FieldLabel`.
      *

package/dist/components/switch/switch.js

@@ -1,6 +1,5 @@
 import './switch.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import { Stack } from "../stack/stack.js";
@@ -11,9 +10,7 @@ import { Switch } from "@base-ui/react/switch";
 //#region src/components/switch/switch.tsx
 var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label, name, ref, size = "small", vPadding, hPadding, touched, validate, validationDebounceTime, validationMode, ...switchRootProps }) => {
 	const hasTextDescription = Boolean(description || error);
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(switchRootProps);
 	return /* @__PURE__ */ jsx(Field.Root, {
-		...intrinsicAttributes,
 		className: switch_module_default.Switch,
 		dirty,
 		disabled,
@@ -39,7 +36,7 @@ var Switch$1 = ({ className, description, dirty, disabled, error, invalid, label
 				hPadding,
 				vPadding,
 				children: [/* @__PURE__ */ jsx(Switch.Root, {
-					...componentProps,
+					...switchRootProps,
 					className: clsx(switch_module_default.SwitchRoot, className),
 					"data-shrink": "false",
 					"data-size": size,

package/dist/components/text/text.d.ts

@@ -1,5 +1,4 @@
 import { useRender } from '@base-ui/react/use-render';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 type TextSpace = ThemeTypes['space'];
@@ -12,7 +11,7 @@ type TextAxisPadding = TextSpace | [TextSpace | 0, TextSpace | 0];
  *
  * @default Base HTML pass-through props keep upstream defaults.
  */
-export type TextProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraProps & {
+export type TextProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Replaces the default `span` root using Base UI render semantics.
      *

package/dist/components/text/text.js

@@ -1,13 +1,11 @@
 import './text.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import text_module_default from "./text.module.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/text/text.tsx
 var Text = ({ align = "start", balanced = false, selection = true, className, color, family = "body", fontWidth, hPadding, lineHeight = "standard", maxWidth, opticalSize, ref, render, size = "medium", style, tone, trim = "both", trimType = "cap alphabetic", vPadding, weight = "regular", whiteSpace = "normal", ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
 		"--vui-text-align": align,
 		"--vui-text-max-width": maxWidth ?? "none",
@@ -27,8 +25,7 @@ var Text = ({ align = "start", balanced = false, selection = true, className, co
 		render,
 		ref,
 		props: {
-			...componentProps,
-			...intrinsicAttributes,
+			...otherProps,
 			"data-text-size": size,
 			"data-text-family": family,
 			"data-text-weight": typeof weight === "string" ? weight : "custom",

package/dist/components/textarea/textarea.d.ts

@@ -1,5 +1,5 @@
 import { FieldRoot } from '@base-ui/react/field';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { BasicInputProps } from '../basic-input';
 import type * as React from 'react';
 /**
  * Public Textarea props.
@@ -10,20 +10,7 @@ import type * as React from 'react';
  *
  * @default Base UI `Field.Root` pass-through props keep upstream defaults.
  */
-export type TextareaProps = React.ComponentPropsWithoutRef<'textarea'> & Omit<FieldRoot.Props, 'ref'> & {
-    /**
-     * Adds `data-grow="false"` to the field root when false.
-     *
-     * @default The field root does not render a grow attribute.
-     */
-    grow?: IntrinsicViraProps['grow'];
-    /**
-     * Adds `data-shrink="false"` to the field root when false.
-     *
-     * @default The field root does not render a shrink attribute.
-     */
-    shrink?: IntrinsicViraProps['shrink'];
-    ref?: React.Ref<HTMLTextAreaElement>;
+export type TextareaProps = React.ComponentPropsWithRef<'textarea'> & Omit<FieldRoot.Props, 'ref'> & {
     /**
      * Visible label rendered with shared internal `FieldLabel`.
      *
@@ -51,5 +38,12 @@ export type TextareaProps = React.ComponentPropsWithoutRef<'textarea'> & Omit<Fi
      * @default undefined (no resize)
      */
     resize?: 'vertical' | 'both';
+    /**
+     * When `true`, sets `field-sizing: content` so the control grows with its value.
+     * Still respects `min-block-size` and `resize`. Omitted / `false` keeps the browser fixed default.
+     *
+     * @default undefined (browser fixed)
+     */
+    fitContent?: BasicInputProps['fitContent'];
 };
 export declare const Textarea: React.FC<TextareaProps>;

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

@@ -1,9 +1,10 @@
 {
   "name": "Textarea",
-  "summary": "Multi-line field control with shared field copy and optional resize.",
+  "summary": "Multi-line field control with shared field copy, optional resize, and optional content sizing.",
   "whenToUse": [
     "Multi-line text entry with label, description, and error",
     "Controlled vertical or bidirectional resize",
+    "Content-sized growth via fitContent",
     "Native textarea attributes through the field control",
     "One or more Textareas inside Fieldset when they belong to a labeled form section with other fields"
   ],
@@ -20,6 +21,11 @@
   "antiPatterns": ["Using Textarea for single-line values", "Expecting unsupported size or variant props"],
   "related": ["Fieldset", "Textfield", "Text"],
   "properties": {
+    "react": {
+      "fitContent": {
+        "description": "When true, sets field-sizing: content so the control grows with its value while still respecting min-block-size and resize. Omitted or false keeps the browser fixed default."
+      }
+    },
     "css": {
       "min-block-size": {
         "description": "Minimum block size of the textarea field root."

package/dist/components/textarea/textarea.js

@@ -1,6 +1,5 @@
 import './textarea.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";
@@ -9,43 +8,40 @@ import textarea_module_default from "./textarea.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 //#region src/components/textarea/textarea.tsx
-var Textarea = ({ className, description, dirty, disabled, error, invalid, label, name, ref, resize, touched, validate, validationDebounceTime, validationMode, ...textareaProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(textareaProps);
-	return /* @__PURE__ */ jsxs(Field.Root, {
-		...intrinsicAttributes,
-		className: textarea_module_default.Textarea,
-		dirty,
-		disabled,
-		invalid,
-		name,
-		touched,
-		validate,
-		validationDebounceTime,
-		validationMode,
-		render: /* @__PURE__ */ jsx(Stack, {
-			direction: "column",
-			rowGap: "small"
+var Textarea = ({ className, description, dirty, disabled, error, fitContent, invalid, label, name, ref, resize, touched, validate, validationDebounceTime, validationMode, ...textareaProps }) => /* @__PURE__ */ jsxs(Field.Root, {
+	className: textarea_module_default.Textarea,
+	dirty,
+	disabled,
+	invalid,
+	name,
+	touched,
+	validate,
+	validationDebounceTime,
+	validationMode,
+	render: /* @__PURE__ */ jsx(Stack, {
+		direction: "column",
+		rowGap: "small"
+	}),
+	children: [
+		label && /* @__PURE__ */ jsx(Field.Label, {
+			className: textarea_module_default.Label,
+			children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
 		}),
-		children: [
-			label && /* @__PURE__ */ jsx(Field.Label, {
-				className: textarea_module_default.Label,
-				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
-			}),
-			/* @__PURE__ */ jsx(BasicInput, {
-				...componentProps,
-				ref,
-				className: clsx(textarea_module_default.CustomBasicInput, className),
-				"data-resize": resize,
-				disabled,
-				render: /* @__PURE__ */ jsx("textarea", {})
-			}),
-			/* @__PURE__ */ jsx(FieldHelperCopy, {
-				className: textarea_module_default.Description,
-				description,
-				error
-			})
-		]
-	});
-};
+		/* @__PURE__ */ jsx(BasicInput, {
+			...textareaProps,
+			ref,
+			className: clsx(textarea_module_default.CustomBasicInput, className),
+			"data-resize": resize,
+			disabled,
+			fitContent,
+			render: /* @__PURE__ */ jsx("textarea", {})
+		}),
+		/* @__PURE__ */ jsx(FieldHelperCopy, {
+			className: textarea_module_default.Description,
+			description,
+			error
+		})
+	]
+});
 //#endregion
 export { Textarea };

package/dist/components/textfield/textfield.d.ts

@@ -1,6 +1,6 @@
 import { FieldRoot } from '@base-ui/react/field';
 import { Input as PrimitiveInput } from '@base-ui/react/input';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
+import { BasicInputProps } from '../basic-input';
 import type * as React from 'react';
 /**
  * Public Textfield props.
@@ -11,7 +11,7 @@ import type * as React from 'react';
  *
  * @default Base UI pass-through props keep upstream defaults.
  */
-export type TextfieldProps = PrimitiveInput.Props & FieldRoot.Props & IntrinsicViraProps & {
+export type TextfieldProps = PrimitiveInput.Props & FieldRoot.Props & {
     /**
      * Visible label rendered with shared internal `FieldLabel`.
      *
@@ -44,5 +44,12 @@ export type TextfieldProps = PrimitiveInput.Props & FieldRoot.Props & IntrinsicV
      * @default No end addon is rendered.
      */
     endAddon?: React.ReactNode;
+    /**
+     * When `true`, sets `field-sizing: content` so the control grows inline with its value.
+     * Block chrome stays `var(--vui-textfield-input-height)`. Omitted / `false` keeps the browser fixed default.
+     *
+     * @default undefined (browser fixed)
+     */
+    fitContent?: BasicInputProps['fitContent'];
 };
 export declare const Textfield: React.FC<TextfieldProps>;

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

@@ -24,6 +24,11 @@
   ],
   "related": ["Fieldset", "Textarea", "Select", "Text"],
   "properties": {
+    "react": {
+      "fitContent": {
+        "description": "When true, sets field-sizing: content so the control grows inline with its value; block chrome stays the fixed textfield input height. Omitted or false keeps the browser fixed default."
+      }
+    },
     "css": {
       "input-height": {
         "description": "Textfield control group block size."

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.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,7 +11,7 @@ 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.
      *

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 }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
 		"--vui-title-align": align,
 		"--vui-title-max-width": maxWidth ?? "none",
@@ -27,8 +25,7 @@ var Title = ({ align = "start", balanced = false, selection = true, className, c
 		render,
 		ref,
 		props: {
-			...componentProps,
-			...intrinsicAttributes,
+			...otherProps,
 			"data-title-level": level,
 			"data-title-weight": weight !== void 0 ? "custom" : "preset",
 			"data-title-line-height": lineHeight,

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/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/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.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"