@viraui/react 1.0.10 → 1.0.12

package/dist/components/slider/slider.js

@@ -1,6 +1,5 @@
 import './slider.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Text } from "../text/text.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
@@ -15,9 +14,7 @@ import { Slider } from "@base-ui/react/slider";
 var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error, invalid, label, name, orientation = "horizontal", showValue = false, thumbAriaLabel, touched, validate, validationDebounceTime, validationMode, value, ref, ...sliderRootProps }) => {
 	const isRange = isRangeSlider(value, defaultValue);
 	const isVertical = orientation === "vertical";
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(sliderRootProps);
 	return /* @__PURE__ */ jsxs(Field.Root, {
-		...intrinsicAttributes,
 		className: slider_module_default.Slider,
 		dirty,
 		disabled,
@@ -33,7 +30,7 @@ var Slider$1 = ({ className, defaultValue, description, dirty, disabled, error,
 			rowGap: "small"
 		}),
 		children: [/* @__PURE__ */ jsxs(Slider.Root, {
-			...componentProps,
+			...sliderRootProps,
 			ref,
 			className: clsx(slider_module_default.SliderRoot, className),
 			defaultValue,

package/dist/components/spinner/spinner.d.ts

@@ -1,5 +1,4 @@
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
-export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & IntrinsicViraProps & {
+export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & {
     /**
      * Sets the rendered spinner size.
      *

package/dist/components/spinner/spinner.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Spinner",
+  "structure": "<Spinner />",
   "summary": "Decorative SVG pulsing loading indicator used inside interactive components.",
   "whenToUse": [
     "Inline loading overlay inside Button or IconButton",

package/dist/components/spinner/spinner.js

@@ -1,31 +1,26 @@
 import './spinner.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import spinner_module_default from "./spinner.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/spinner/spinner.tsx
-var Spinner = ({ className, color, size = "big", ref, style, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-	return /* @__PURE__ */ jsx("svg", {
-		...componentProps,
-		...intrinsicAttributes,
-		ref,
-		className: clsx(spinner_module_default.Spinner, className),
-		"data-dimension": size,
-		viewBox: "0 0 16 16",
-		xmlns: "http://www.w3.org/2000/svg",
-		color,
-		style,
-		children: /* @__PURE__ */ jsxs("g", {
-			className: spinner_module_default.Glyph,
-			fill: "currentColor",
-			children: [
-				/* @__PURE__ */ jsx("path", { d: "M0 2h2v12H0z" }),
-				/* @__PURE__ */ jsx("path", { d: "M7 2h2v12H7z" }),
-				/* @__PURE__ */ jsx("path", { d: "M14 2h2v12h-2z" })
-			]
-		})
-	});
-};
+var Spinner = ({ className, color, size = "big", ref, style, ...otherProps }) => /* @__PURE__ */ jsx("svg", {
+	...otherProps,
+	ref,
+	className: clsx(spinner_module_default.Spinner, className),
+	"data-dimension": size,
+	viewBox: "0 0 16 16",
+	xmlns: "http://www.w3.org/2000/svg",
+	color,
+	style,
+	children: /* @__PURE__ */ jsxs("g", {
+		className: spinner_module_default.Glyph,
+		fill: "currentColor",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M0 2h2v12H0z" }),
+			/* @__PURE__ */ jsx("path", { d: "M7 2h2v12H7z" }),
+			/* @__PURE__ */ jsx("path", { d: "M14 2h2v12h-2z" })
+		]
+	})
+});
 //#endregion
 export { Spinner };

package/dist/components/stack/stack.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-stack-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-h-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-v-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-stack-min-width{syntax:"*";inherits:false;initial-value:none}.viraui__stack-module__Stack_NR-Ey{container:stack/inline-size block-size;display:flex;gap:var(--vui-stack-row-gap) var(--vui-stack-column-gap);flex-direction:column;align-items:var(--vui-stack-h-align);justify-content:var(--vui-stack-v-align);max-inline-size:var(--vui-stack-max-width);min-inline-size:var(--vui-stack-min-width);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--vui-stack-v-align);justify-content:var(--vui-stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--vui-stack-padding-block-start) var(--vui-stack-padding-inline-end) var(--vui-stack-padding-block-end) var(--vui-stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-stack-row-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-column-gap{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-h-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-v-align{syntax:"*";inherits:false;initial-value:initial}@property --vui-stack-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-stack-max-width{syntax:"*";inherits:false;initial-value:none}@property --vui-stack-min-width{syntax:"*";inherits:false;initial-value:none}.viraui__stack-module__Stack_NR-Ey{display:flex;gap:var(--vui-stack-row-gap) var(--vui-stack-column-gap);flex-direction:column;align-items:var(--vui-stack-h-align);justify-content:var(--vui-stack-v-align);max-inline-size:var(--vui-stack-max-width);min-inline-size:var(--vui-stack-min-width);&[data-stack-direction=column-reverse]{flex-direction:column-reverse}&[data-stack-direction=row-reverse],&[data-stack-direction=row]{align-items:var(--vui-stack-v-align);justify-content:var(--vui-stack-h-align)}&[data-stack-direction=row]{flex-direction:row}&[data-stack-direction=row-reverse]{flex-direction:row-reverse}&[data-stack-inline=true]{display:inline-flex;flex-grow:0}:where(&[data-stack-wrap=true]){flex-wrap:wrap}:where(&[data-stack-has-padding=true]){padding:var(--vui-stack-padding-block-start) var(--vui-stack-padding-inline-end) var(--vui-stack-padding-block-end) var(--vui-stack-padding-inline-start)}:where(&[data-stack-fill-children=true]>*){flex-grow:var(--vira-flex-grow,1)}}}

package/dist/components/stack/stack.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 StackAlignment = 'start' | 'center' | 'end' | 'stretch' | 'initial' | 'space-between' | 'space-around' | 'space-evenly';
@@ -13,7 +12,7 @@ type StackAxisPadding = StackSpace | [StackSpace | 0, StackSpace | 0];
  *
  * @default Base UI pass-through props keep upstream defaults.
  */
-export type StackProps = React.ComponentPropsWithoutRef<'div'> & IntrinsicViraProps & {
+export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *

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

@@ -1,5 +1,6 @@
 {
   "name": "Stack",
+  "structure": "<Stack>…</Stack>",
   "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; root is a named CSS container query context (`stack`).",
   "whenToUse": [
     "Column or row layouts with token gap and alignment",

package/dist/components/stack/stack.js

@@ -1,6 +1,5 @@
 import './stack.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { resolveThemeValue } from "../../core/theme/resolve-theme-value.js";
 import { resolveAxisPadding } from "../../core/styles/resolve-axis-padding.js";
 import stack_module_default from "./stack.module.js";
@@ -8,7 +7,6 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/stack/stack.tsx
 var Stack = ({ className, direction = "column", fillChildren = true, hAlign = "initial", hPadding, inline = false, maxWidth, minWidth, ref, render, rowGap, columnGap, style, vAlign = "initial", vPadding, wrap = false, ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
 		"--vui-stack-row-gap": resolveThemeValue(rowGap, "space", 0),
 		"--vui-stack-column-gap": resolveThemeValue(columnGap, "space", 0),
@@ -25,8 +23,7 @@ var Stack = ({ className, direction = "column", fillChildren = true, hAlign = "i
 		render,
 		ref,
 		props: {
-			...componentProps,
-			...intrinsicAttributes,
+			...otherProps,
 			"data-stack-direction": direction,
 			"data-stack-inline": inline ? "true" : "false",
 			"data-stack-wrap": wrap ? "true" : "false",

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

@@ -1,4 +1,3 @@
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 /**
  * Public StaticNoise props.
@@ -8,7 +7,7 @@ import type * as React from 'react';
  *
  * @default Native figure pass-through props keep React defaults.
  */
-export type StaticNoiseProps = React.ComponentPropsWithRef<'figure'> & IntrinsicViraProps & {
+export type StaticNoiseProps = React.ComponentPropsWithRef<'figure'> & {
     /**
      * Sets the SVG turbulence `baseFrequency` for the internal noise filter.
      *

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

@@ -1,5 +1,6 @@
 {
   "name": "StaticNoise",
+  "structure": "<StaticNoise />",
   "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections.",
   "whenToUse": [
     "Subtle grain or texture overlay on cards, panels, or hero sections",

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

@@ -1,14 +1,12 @@
 "use client";
 import './static-noise.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import static_noise_module_default from "./static-noise.module.js";
 import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
 //#region src/components/static-noise/static-noise.tsx
 var STATIC_NOISE_SEED_FRAMES = "1;5;2;9;3;7;4;11;6;13;8;15;10;17;12;19;14;16;18;20;3;8;1;13";
 var StaticNoise = ({ animate = false, baseFrequency = .5, className, mixBlendMode = "difference", opacity = .2, ref, style, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const reactId = useId();
 	const dynamicStyle = {
 		filter: `url(#${reactId}) grayscale(100%)`,
@@ -17,8 +15,7 @@ var StaticNoise = ({ animate = false, baseFrequency = .5, className, mixBlendMod
 		...style
 	};
 	return /* @__PURE__ */ jsx("figure", {
-		...componentProps,
-		...intrinsicAttributes,
+		...otherProps,
 		ref,
 		"aria-hidden": "true",
 		className: clsx(static_noise_module_default.StaticNoise, className),

package/dist/components/surface/surface.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);container:surface/inline-size block-size;position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-radius=auto]{--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0;--vui-surface-border-radius-bottom-right:0;--vui-surface-border-radius-bottom-left:0}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-surface-background{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-background-hover{syntax:"*";inherits:false;initial-value:none}@property --vui-surface-border-style{syntax:"<custom-ident>";inherits:false;initial-value:solid}@property --vui-surface-overflow{syntax:"<custom-ident>";inherits:false;initial-value:visible}@property --vui-surface-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-top-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-right{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-border-radius-bottom-left{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-inline-end{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-start{syntax:"<length>";inherits:false;initial-value:0}@property --vui-surface-padding-block-end{syntax:"<length>";inherits:false;initial-value:0}.viraui__surface-module__Surface_slEYq{--vui-surface-border-radius-top-left:var(--vui-surface-border-radius);--vui-surface-border-radius-top-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-right:var(--vui-surface-border-radius);--vui-surface-border-radius-bottom-left:var(--vui-surface-border-radius);--vui-surface-background-hover:var(--vui-surface-background);position:relative;overflow:var(--vui-surface-overflow);box-sizing:border-box;background:var(--vui-surface-background);border-radius:var(--vui-surface-border-radius-top-left) var(--vui-surface-border-radius-top-right) var(--vui-surface-border-radius-bottom-right) var(--vui-surface-border-radius-bottom-left);border:0;@container root not style(--vibrancy-enable: initial){&[data-vibrant]{background:oklab(from var(--vui-surface-background) l a b/80%)}}&[data-surface-radius=auto]{--vui-surface-border-radius-top-left:0;--vui-surface-border-radius-top-right:0;--vui-surface-border-radius-bottom-right:0;--vui-surface-border-radius-bottom-left:0}&[data-surface-has-padding=true]{padding:var(--vui-surface-padding-block-start) var(--vui-surface-padding-inline-end) var(--vui-surface-padding-block-end) var(--vui-surface-padding-inline-start)}&[data-surface-border]{border-style:var(--vui-surface-border-style);border-color:var(--global-contrast)}&[data-surface-border=all]{border-width:1px}&[data-surface-border=top]{border-width:1px 0 0}&[data-surface-border=right]{border-width:0 1px 0 0}&[data-surface-border=bottom]{border-width:0 0 1px}&[data-surface-border=left]{border-width:0 0 0 1px}&[data-surface-border=x]{border-width:0 1px}&[data-surface-border=y]{border-width:1px 0}@media (hover:hover) and (pointer:fine){&[data-surface-has-hover-color=true]:hover{background:var(--vui-surface-background-hover)}}}}

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

@@ -1,5 +1,4 @@
 import { useRender } from '@base-ui/react/use-render';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import { SurfacePadding, SurfaceRadiusInput } from './surface-radius-context';
 import type * as React from 'react';
 /** Base ramp layer for nested surfaces; clamped to 1–3 at runtime. */
@@ -13,7 +12,7 @@ type SurfaceColor = string | SurfaceBaseLevel;
  *
  * @default Base UI pass-through props keep upstream defaults.
  */
-export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> & IntrinsicViraProps & {
+export type SurfaceProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *

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

@@ -1,5 +1,6 @@
 {
   "name": "Surface",
+  "structure": "<Surface>…</Surface>",
   "summary": "Presentational container with token background, optional border, radius, and padding; nested surfaces use radius=\"auto\" for concentric corners; root is a named CSS container query context (`surface`).",
   "whenToUse": [
     "Group content with base-level background and contrast border",

package/dist/components/surface/surface.js

@@ -1,7 +1,6 @@
 "use client";
 import './surface.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 { SurfaceRadiusContext, useSurfaceRadius } from "./surface-radius-context.js";
 import surface_module_default from "./surface.module.js";
@@ -23,7 +22,6 @@ var surfaceDefaultRadiusProps = {
 var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hoverColor, overflow, radius, ref, render, style, vPadding, ...otherProps }) => {
 	const hasPadding = Boolean(hPadding || vPadding);
 	const hasHoverColor = hoverColor !== void 0;
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const { contextValue, hasAutoRadius, radiusStyle } = useSurfaceRadius({
 		defaults: surfaceDefaultRadiusProps,
 		hPadding,
@@ -46,8 +44,7 @@ var Surface = ({ border, borderStyle = "solid", className, color, hPadding, hove
 		render,
 		ref,
 		props: {
-			...componentProps,
-			...intrinsicAttributes,
+			...otherProps,
 			...border && { "data-surface-border": border },
 			...hasAutoRadius && { "data-surface-radius": "auto" },
 			"data-surface-has-hover-color": hasHoverColor ? "true" : "false",

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.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Switch",
+  "structure": "<Switch label=\"…\" />",
   "summary": "Field-wrapped toggle control with regular or small track and optional field copy.",
   "whenToUse": [
     "Boolean on/off settings with optional label and helper text",

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/tabs/tabs.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Tabs",
+  "structure": "<Tabs>\n  <Tabs.List>\n    <Tabs.Tab value=\"a\">…</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Viewport>\n    <Tabs.Panel value=\"a\">…</Tabs.Panel>\n  </Tabs.Viewport>\n</Tabs>",
   "summary": "Compound segmented tab control with Surface list chrome, moving indicator, and animated panels.",
   "whenToUse": [
     "Switching between related views in the same surface",

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.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Text",
+  "structure": "<Text>…</Text>",
   "summary": "Theme-aware body-copy primitive with tone, family, and responsive body sizing.",
   "whenToUse": [
     "Body copy with semantic tone and token-backed typography",

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,11 @@
 {
   "name": "Textarea",
-  "summary": "Multi-line field control with shared field copy and optional resize.",
+  "structure": "<Textarea />",
+  "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 +22,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

@@ -1,5 +1,6 @@
 {
   "name": "Textfield",
+  "structure": "<Textfield />",
   "summary": "Single-line field input with control-group chrome and optional addons.",
   "whenToUse": [
     "Single-line text, email, password, or similar native input types",
@@ -24,6 +25,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."