@viraui/react 1.0.10 → 1.0.12

package/dist/components/button/button.js

@@ -1,5 +1,4 @@
 import './button.css';
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
 import { jsx } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
@@ -29,7 +28,7 @@ var ButtonRenderRoot = ({ isDisabled, ref, render, rootProps }) => {
 		}
 	});
 };
-var ButtonRoot = ({ children, className, intrinsicAttributes, isDisabled, isIconOnly, addon, addonPosition, loading, passThroughProps, pill, ref, render, size, variant }) => {
+var ButtonRoot = ({ children, className, isDisabled, isIconOnly, addon, addonPosition, loading, passThroughProps, pill, ref, render, size, variant }) => {
 	const chromeAttrs = getButtonChromeRootAttrs({
 		addon,
 		addonPosition,
@@ -42,7 +41,6 @@ var ButtonRoot = ({ children, className, intrinsicAttributes, isDisabled, isIcon
 	});
 	const rootProps = {
 		...passThroughProps,
-		...intrinsicAttributes,
 		...chromeAttrs,
 		className: typeof className === "function" ? className : chromeAttrs.className,
 		children
@@ -64,11 +62,9 @@ var ButtonRoot = ({ children, className, intrinsicAttributes, isDisabled, isIcon
 var Button$1 = ({ children, className, disabled, addon, addonPosition = "start", loading = false, pill = false, size = "medium", variant = "primary", ...otherProps }) => {
 	const isDisabled = disabled || loading;
 	const isIconOnly = Boolean(addon) && (children == null || children === "");
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-	const { render, ref, ...passThroughProps } = componentProps;
+	const { render, ref, ...passThroughProps } = otherProps;
 	return /* @__PURE__ */ jsx(ButtonRoot, {
 		className,
-		intrinsicAttributes,
 		isDisabled,
 		isIconOnly,
 		addon,

package/dist/components/checkbox/checkbox.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-checkbox-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-checkbox-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-checkbox-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--vui-checkbox-size:var(--space-medium);--vui-checkbox-radius:var(--radius-x-small);--vui-checkbox-background:var(--global-contrast);--vui-checkbox-indicator-color:contrast-color(var(--global-primary));position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);inline-size:var(--vui-checkbox-size);block-size:var(--vui-checkbox-size);background:var(--vui-checkbox-background);border-radius:var(--vui-checkbox-radius);&[data-size=regular]{--vui-checkbox-size:var(--space-large);--vui-checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]),&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--vui-checkbox-background:var(--global-primary);--vui-checkbox-border-color:var(--global-primary);box-shadow:none}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-checkbox-border-color:var(--highlight-red);--vui-checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-checkbox-background:var(--global-disabled-background);--vui-checkbox-border-color:#0000;--vui-checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__checkbox-module__Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-checkbox-indicator-color)}.viraui__checkbox-module__Icon_926Sa{stroke:currentColor}.viraui__checkbox-module__CheckboxRoot_PeyF5:not([data-indeterminate]) .viraui__checkbox-module__MinusIcon_Q57pY,.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__CheckIcon_XqUcs{display:none}.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__MinusIcon_Q57pY{display:inline-flex}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-checkbox-size{syntax:"<length>";inherits:false;initial-value:0}@property --vui-checkbox-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-checkbox-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-border-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-checkbox-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__checkbox-module__Checkbox_3oGip{&:has([required]) .viraui__checkbox-module__Label_n9HL7:after{content:" ＊";color:var(--highlight-red)}}.viraui__checkbox-module__CheckboxRoot_PeyF5{--vui-checkbox-size:var(--space-medium);--vui-checkbox-radius:var(--radius-x-small);--vui-checkbox-background:var(--global-contrast);--vui-checkbox-indicator-color:contrast-color(var(--global-primary));position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;appearance:none;border:0;box-shadow:inset 0 0 0 1px var(--vui-checkbox-border-color);inline-size:var(--vui-checkbox-size);block-size:var(--vui-checkbox-size);background:var(--vui-checkbox-background);border-radius:var(--vui-checkbox-radius);&[data-size=regular]{--vui-checkbox-size:var(--space-large);--vui-checkbox-radius:var(--radius-small)}&[data-checked]:not([data-disabled]):not([data-invalid]){--vui-checkbox-background:var(--global-primary);--vui-checkbox-border-color:var(--global-primary);box-shadow:none}&[data-indeterminate]:not([data-disabled]):not([data-invalid]){--vui-checkbox-indicator-color:var(--global-primary)}&[data-invalid]:not([data-disabled]),[data-invalid] &:not([data-disabled]){--vui-checkbox-border-color:var(--highlight-red);--vui-checkbox-indicator-color:var(--global-primary);box-shadow:inset 0 0 0 1px var(--highlight-red);outline-color:oklab(from var(--highlight-red) l a b/.5)}&[data-disabled],[data-disabled] &{--vui-checkbox-background:var(--global-disabled-background);--vui-checkbox-border-color:#0000;--vui-checkbox-indicator-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__checkbox-module__Indicator_C-k-l{display:inline-flex;align-items:center;justify-content:center;color:var(--vui-checkbox-indicator-color)}.viraui__checkbox-module__Icon_926Sa{stroke:currentColor}.viraui__checkbox-module__CheckboxRoot_PeyF5:not([data-indeterminate]) .viraui__checkbox-module__MinusIcon_Q57pY,.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__CheckIcon_XqUcs{display:none}.viraui__checkbox-module__CheckboxRoot_PeyF5[data-indeterminate] .viraui__checkbox-module__MinusIcon_Q57pY{display:inline-flex}}

package/dist/components/checkbox/checkbox.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Checkbox",
+  "structure": "<Checkbox label=\"…\" />",
   "summary": "Field.Item checkbox option for standalone fields or CheckboxGroup children.",
   "whenToUse": [
     "Single boolean fields wrapped in Field.Root with optional label and helper text — no Fieldset required",

package/dist/components/chip/chip.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 { ReactNode } from 'react';
 import * as React from 'react';
@@ -11,7 +10,7 @@ import * as React from 'react';
  *
  * @default Base UI pass-through props keep upstream defaults.
  */
-export type ChipProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+export type ChipProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *

package/dist/components/chip/chip.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Chip",
+  "structure": "<Chip>Label</Chip>",
   "summary": "Compact visual label primitive for short status, category, or metadata treatments.",
   "whenToUse": [
     "Short, non-interactive labels that need a compact pill treatment",

package/dist/components/chip/chip.js

@@ -1,6 +1,5 @@
 import './chip.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import chip_module_default from "./chip.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -8,7 +7,6 @@ import { useRender } from "@base-ui/react/use-render";
 import "react";
 //#region src/components/chip/chip.tsx
 var Chip = ({ addon, addonPosition = "start", children, className, ref, render, variant = "primary", ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const content = /* @__PURE__ */ jsxs(Stack, {
 		inline: true,
 		direction: addonPosition === "start" ? "row" : "row-reverse",
@@ -31,10 +29,9 @@ var Chip = ({ addon, addonPosition = "start", children, className, ref, render,
 		render,
 		ref,
 		props: {
-			...componentProps,
-			...intrinsicAttributes,
-			"data-grow": false,
-			"data-shrink": false,
+			...otherProps,
+			"data-grow": "false",
+			"data-shrink": "false",
 			children: content,
 			className: clsx(chip_module_default.Chip, className),
 			"data-has-icon": addon ? "true" : void 0,

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

@@ -1,5 +1,4 @@
 import { useRender } from '@base-ui/react/use-render';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 /**
  * Public ClampText props.
@@ -9,7 +8,7 @@ import type * as React from 'react';
  *
  * @default Native span pass-through props keep React defaults.
  */
-export type ClampTextProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraProps & {
+export type ClampTextProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Replaces the default `span` root using Base UI render semantics.
      *

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

@@ -1,5 +1,6 @@
 {
   "name": "ClampText",
+  "structure": "<ClampText>…</ClampText>",
   "summary": "Presentational utility that truncates overflowing copy to a fixed line count.",
   "whenToUse": [
     "Single- or multi-line ellipsis in constrained layouts",

package/dist/components/clamp-text/clamp-text.js

@@ -1,21 +1,18 @@
 "use client";
 import './clamp-text.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import clamp_text_module_default from "./clamp-text.module.js";
 import { useRender } from "@base-ui/react/use-render";
 import { useMemo } from "react";
 //#region src/components/clamp-text/clamp-text.tsx
 var ClampText = ({ className, inline = false, ref, render, rows = 1, style, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = useMemo(() => ({ "--vui-clamp-text-rows": rows }), [rows]);
 	return useRender({
 		defaultTagName: "span",
 		render,
 		ref,
 		props: {
-			...componentProps,
-			...intrinsicAttributes,
+			...otherProps,
 			"data-clamp-text-inline": inline ? "true" : "false",
 			className: clsx(clamp_text_module_default.ClampText, className),
 			style: {

package/dist/components/dialog/dialog-sheet.js

@@ -24,7 +24,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 			border: "top",
 			render: /* @__PURE__ */ jsx(Stack, { hAlign: "center" }),
 			color: 1,
-			vibrant: true,
+			"data-vibrant": "",
 			radius: "large",
 			vPadding: ["medium", 0]
 		}),
@@ -49,7 +49,7 @@ var DialogSheet = ({ children, description, title, showCloseButton = false, fitC
 				hPadding: "medium",
 				fillChildren: false,
 				children: [/* @__PURE__ */ jsx(Drawer.Title, {
-					render: /* @__PURE__ */ jsx(Title, { level: "h4" }),
+					render: /* @__PURE__ */ jsx(Title, { size: "4" }),
 					children: title
 				}), description && /* @__PURE__ */ jsx(Drawer.Description, {
 					render: /* @__PURE__ */ jsx(Text, {

package/dist/components/dialog/dialog.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Dialog",
+  "structure": "<Dialog>\n  <Dialog.Trigger />\n  <Dialog.Sheet title=\"…\">…</Dialog.Sheet>\n</Dialog>",
   "summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
   "whenToUse": [
     "Focused tasks or confirmations that interrupt the current page without navigation",

package/dist/components/elevator/elevator.d.ts

@@ -1,5 +1,4 @@
 import { ElevationDirection, ElevationLevel, ElevationShadowColor } from '../../core/elevation/elevation-types';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 export type { ElevationDirection, ElevationLevel, ElevationShadowColor, } from '../../core/elevation/elevation-types';
 export { ELEVATION_DEFAULTS } from '../../core/elevation/elevation-types';
@@ -11,7 +10,7 @@ export { getElevationProps } from '../../core/elevation/get-elevation-props';
  *
  * @default Native child pass-through props are preserved and merged with elevation hooks.
  */
-export type ElevatorProps = IntrinsicViraProps & {
+export type ElevatorProps = {
     /**
      * Element or elements that receive elevation hooks on their rendered root.
      *

package/dist/components/elevator/elevator.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Elevator",
+  "structure": "<Elevator resting={1}>…</Elevator>",
   "summary": "No-DOM elevation utility that merges shadow hooks onto valid element children.",
   "whenToUse": [
     "Apply resting and optional hover elevation to existing elements",

package/dist/components/elevator/elevator.js

@@ -1,4 +1,3 @@
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { ELEVATION_DEFAULTS } from "../../core/elevation/elevation-types.js";
 import { getElevationProps } from "../../core/elevation/get-elevation-props.js";
 import { Children, cloneElement, isValidElement } from "react";
@@ -7,8 +6,7 @@ var mergeChildStyle = (childStyle, elevationStyle) => ({
 	...childStyle ?? {},
 	...elevationStyle
 });
-var Elevator = ({ children, resting, hover, direction, shadowColor, extraShadow, ...otherProps }) => {
-	const { intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
+var Elevator = ({ children, resting, hover, direction, shadowColor, extraShadow }) => {
 	const elevation = getElevationProps({
 		resting,
 		hover,
@@ -19,7 +17,6 @@ var Elevator = ({ children, resting, hover, direction, shadowColor, extraShadow,
 	return Children.map(children, (child) => {
 		if (!isValidElement(child)) return child;
 		return cloneElement(child, {
-			...intrinsicAttributes,
 			...elevation.attributes,
 			style: mergeChildStyle(child.props.style, elevation.style)
 		});

package/dist/components/fieldset/fieldset.d.ts

@@ -1,5 +1,4 @@
 import { FieldsetRoot } from '@base-ui/react';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 /**
  * Public Fieldset props.
@@ -10,7 +9,7 @@ import type * as React from 'react';
  *
  * @default Base UI pass-through props keep upstream defaults.
  */
-export type FieldsetProps = FieldsetRoot.Props & IntrinsicViraProps & {
+export type FieldsetProps = FieldsetRoot.Props & {
     /**
      * Visible legend copy rendered with shared internal `FieldLabel`.
      *

package/dist/components/fieldset/fieldset.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Fieldset",
+  "structure": "<Fieldset label=\"…\">…</Fieldset>",
   "summary": "Semantic field grouping with shared legend and optional group helper copy.",
   "whenToUse": [
     "Section legends for multiple related fields — billing details with Textfield, Textarea, or Select children",

package/dist/components/fieldset/fieldset.js

@@ -1,29 +1,24 @@
-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";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Fieldset } from "@base-ui/react";
 //#region src/components/fieldset/fieldset.tsx
-var Fieldset$1 = ({ children, className, description, disabled, error, label, ...fieldsetRootProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(fieldsetRootProps);
-	return /* @__PURE__ */ jsxs(Fieldset.Root, {
-		...intrinsicAttributes,
-		...componentProps,
-		className,
-		disabled,
-		children: [/* @__PURE__ */ jsxs(Stack, {
-			vPadding: [0, "small"],
-			rowGap: "small",
-			children: [label ? /* @__PURE__ */ jsx(Fieldset.Legend, {
-				render: /* @__PURE__ */ jsx(FieldLabel, {}),
-				children: label
-			}) : null, description || error ? /* @__PURE__ */ jsx(FieldHelperCopy, {
-				description,
-				error
-			}) : null]
-		}), children]
-	});
-};
+var Fieldset$1 = ({ children, className, description, disabled, error, label, ...fieldsetRootProps }) => /* @__PURE__ */ jsxs(Fieldset.Root, {
+	...fieldsetRootProps,
+	className,
+	disabled,
+	children: [/* @__PURE__ */ jsxs(Stack, {
+		vPadding: [0, "small"],
+		rowGap: "small",
+		children: [label ? /* @__PURE__ */ jsx(Fieldset.Legend, {
+			render: /* @__PURE__ */ jsx(FieldLabel, {}),
+			children: label
+		}) : null, description || error ? /* @__PURE__ */ jsx(FieldHelperCopy, {
+			description,
+			error
+		}) : null]
+	}), children]
+});
 //#endregion
 export { Fieldset$1 as Fieldset };

package/dist/components/fit-text/fit-text.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-fit-text-captured-length{syntax:"<length>";inherits:true;initial-value:0}@property --vui-fit-text-max-font-size{syntax:"<length>";inherits:true;initial-value:calc(infinity * 1px)}.viraui__fit-text-module__FitText_CdAvq{--vui-fit-text-captured-length:initial;display:flex;container-type:inline-size;.viraui__fit-text-module__Container_bawpR{--vui-fit-text-captured-length:100cqi;--vui-fit-text-available-space:var(--vui-fit-text-captured-length);flex-grow:1;container-type:inline-size}.viraui__fit-text-module__Display_Hraif{--vui-fit-text-captured-length:100cqi;--vui-fit-text-ratio:tan(atan2(var(--vui-fit-text-available-space),var(--vui-fit-text-available-space) - var(--vui-fit-text-captured-length)));display:block;inline-size:var(--vui-fit-text-available-space);font-size:clamp(0px,1em * var(--vui-fit-text-ratio),var(--vui-fit-text-max-font-size));>*{font-size:1em;max-inline-size:none}}.viraui__fit-text-module__Reference_6wCx7{visibility:hidden;>*{font-size:inherit;max-inline-size:none}}}}

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

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+/**
+ * Public FitText props.
+ *
+ * Includes standard `div` attributes such as `children`, `id`, `className`, and event handlers,
+ * plus an optional fitted font-size cap.
+ *
+ * @default Native div pass-through props keep React defaults.
+ */
+export type FitTextProps = React.ComponentPropsWithRef<'div'> & {
+    /**
+     * Caps the fitted font size using any valid CSS length string.
+     *
+     * @default No maximum — fitted size may grow without an upper bound.
+     */
+    maxFontSize?: string;
+};
+export declare const FitText: React.FC<FitTextProps>;

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

@@ -0,0 +1,40 @@
+{
+  "name": "FitText",
+  "structure": "<FitText>…</FitText>",
+  "summary": "CSS-only fit-to-width wrapper that scales children to fill available inline space.",
+  "whenToUse": [
+    "Headlines or short copy that should fill a constrained inline width",
+    "Multi-line display type broken with br (or equivalent) inside Title, Text, or native markup",
+    "Resize-friendly marketing/hero type without JS measurement"
+  ],
+  "whenNotToUse": [
+    "Long body copy that should wrap and reflow at a fixed type size",
+    "Truncation — use ClampText instead",
+    "Cases that need a JS-measured or observer-driven fit"
+  ],
+  "accessibility": [
+    "Children render twice; the reference copy is aria-hidden and inert so assistive tech sees one tree",
+    "Keep semantic roots on the visible children (Title render, heading elements, paragraphs)",
+    "Fitted size still respects user zoom because the ratio multiplies 1em"
+  ],
+  "antiPatterns": [
+    "Expecting automatic line breaks without br or block structure in children",
+    "Putting interactive controls inside FitText (duplicate trees and inert reference)",
+    "Using FitText for truncation or ellipsis"
+  ],
+  "related": ["Title", "Text", "ClampText"],
+  "properties": {
+    "react": {
+      "maxFontSize": {
+        "description": "Caps the fitted font size using any valid CSS length string.",
+        "refCss": "max-font-size"
+      }
+    },
+    "css": {
+      "max-font-size": {
+        "description": "Upper bound for the fitted font size on the display slot.",
+        "refReact": "maxFontSize"
+      }
+    }
+  }
+}

package/dist/components/fit-text/fit-text.js

@@ -0,0 +1,31 @@
+import './fit-text.css';
+import { clsx } from "../../core/clsx.js";
+import fit_text_module_default from "./fit-text.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fit-text/fit-text.tsx
+var FitText = ({ children, className, maxFontSize, ref, style, ...otherProps }) => {
+	const dynamicStyle = {
+		...maxFontSize && { "--vui-fit-text-max-font-size": maxFontSize },
+		...style
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...otherProps,
+		ref,
+		className: clsx(fit_text_module_default.FitText, className),
+		style: dynamicStyle,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: fit_text_module_default.Container,
+			children: /* @__PURE__ */ jsx("div", {
+				className: fit_text_module_default.Display,
+				children
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: fit_text_module_default.Reference,
+			inert: true,
+			children
+		})]
+	});
+};
+//#endregion
+export { FitText };

package/dist/components/fit-text/fit-text.module.js

@@ -0,0 +1,13 @@
+//#region src/components/fit-text/fit-text.module.css
+var FitText = "viraui__fit-text-module__FitText_CdAvq";
+var Container = "viraui__fit-text-module__Container_bawpR";
+var Display = "viraui__fit-text-module__Display_Hraif";
+var Reference = "viraui__fit-text-module__Reference_6wCx7";
+var fit_text_module_default = {
+	FitText,
+	Container,
+	Display,
+	Reference
+};
+//#endregion
+export { Container, Display, FitText, Reference, fit_text_module_default as default };

package/dist/components/fit-text/index.d.ts

@@ -0,0 +1,2 @@
+export { FitText } from './fit-text';
+export type { FitTextProps } from './fit-text';

package/dist/components/icon-button/icon-button-link.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "IconButtonLink",
+  "structure": "<IconButtonLink href=\"#\" icon={<Plus />} aria-label=\"Add\" />",
   "summary": "Icon-only navigation link that requires an accessible name; wraps ButtonLink.",
   "whenToUse": [
     "Compact toolbar or chrome navigation identified only by icon",

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

@@ -1,5 +1,6 @@
 {
   "name": "IconButton",
+  "structure": "<IconButton icon={<Plus />} aria-label=\"Add\" />",
   "summary": "Icon-only button that requires an accessible name through aria-label or aria-labelledby.",
   "whenToUse": [
     "Compact toolbar or chrome actions identified only by icon",

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './accordion';
+export * from './annotate';
 export * from './avatar';
 export * from './avatar-group';
 export * from './bleed';
@@ -9,6 +10,7 @@ export * from './clamp-text';
 export * from './dialog';
 export * from './elevator';
 export * from './fieldset';
+export * from './fit-text';
 export * from './icon-button';
 export * from './linear-progress';
 export * from './masonry';

package/dist/components/linear-progress/linear-progress.d.ts

@@ -1,5 +1,4 @@
 import { ProgressRoot } from '@base-ui/react/progress';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 /**
  * Public LinearProgress props.
@@ -10,18 +9,6 @@ import type * as React from 'react';
  * @default Base UI pass-through props keep upstream defaults.
  */
 export type LinearProgressProps = ProgressRoot.Props & {
-    /**
-     * Adds `data-grow="false"` to the progress root when false.
-     *
-     * @default The progress root does not render a grow attribute.
-     */
-    grow?: IntrinsicViraProps['grow'];
-    /**
-     * Adds `data-shrink="false"` to the progress root when false.
-     *
-     * @default The progress root does not render a shrink attribute.
-     */
-    shrink?: IntrinsicViraProps['shrink'];
     /**
      * Visible label rendered through `Progress.Label` with shared internal `FieldLabel`.
      *

package/dist/components/linear-progress/linear-progress.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "LinearProgress",
+  "structure": "<LinearProgress value={40} />",
   "summary": "Shows determinate or indeterminate progress for a task in a compact horizontal track.",
   "whenToUse": [
     "Use for task completion with a known percentage or bounded numeric value.",

package/dist/components/linear-progress/linear-progress.js

@@ -1,6 +1,5 @@
 import './linear-progress.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Text } from "../text/text.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import { Stack } from "../stack/stack.js";
@@ -8,53 +7,49 @@ import linear_progress_module_default from "./linear-progress.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Progress } from "@base-ui/react/progress";
 //#region src/components/linear-progress/linear-progress.tsx
-var LinearProgress = ({ className, description, label, showValue = false, value, ref, ...progressRootProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(progressRootProps);
-	return /* @__PURE__ */ jsxs(Progress.Root, {
-		...componentProps,
-		...intrinsicAttributes,
-		ref,
-		className: clsx(linear_progress_module_default.LinearProgress, className),
-		value,
-		render: /* @__PURE__ */ jsx(Stack, {
-			direction: "column",
+var LinearProgress = ({ className, description, label, showValue = false, value, ref, ...progressRootProps }) => /* @__PURE__ */ jsxs(Progress.Root, {
+	...progressRootProps,
+	ref,
+	className: clsx(linear_progress_module_default.LinearProgress, className),
+	value,
+	render: /* @__PURE__ */ jsx(Stack, {
+		direction: "column",
+		fillChildren: false,
+		rowGap: "small",
+		columnGap: "x-small"
+	}),
+	children: [
+		(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
+			direction: "row",
 			fillChildren: false,
-			rowGap: "small",
-			columnGap: "x-small"
-		}),
-		children: [
-			(label || showValue) && /* @__PURE__ */ jsxs(Stack, {
-				direction: "row",
-				fillChildren: false,
-				columnGap: "small",
-				vAlign: "center",
-				hAlign: "space-between",
-				children: [label && /* @__PURE__ */ jsx(Progress.Label, {
-					render: /* @__PURE__ */ jsx(FieldLabel, {}),
-					children: label
-				}), showValue && /* @__PURE__ */ jsx(Text, {
-					size: "small",
-					tone: "muted",
-					family: "mono",
-					whiteSpace: "nowrap",
-					selection: false,
-					align: "end",
-					shrink: false,
-					render: /* @__PURE__ */ jsx(Progress.Value, { render: /* @__PURE__ */ jsx("output", {}) })
-				})]
-			}),
-			/* @__PURE__ */ jsx(Progress.Track, {
-				className: linear_progress_module_default.Track,
-				children: /* @__PURE__ */ jsx(Progress.Indicator, { className: linear_progress_module_default.Indicator })
-			}),
-			description && /* @__PURE__ */ jsx(Text, {
-				className: linear_progress_module_default.Description,
+			columnGap: "small",
+			vAlign: "center",
+			hAlign: "space-between",
+			children: [label && /* @__PURE__ */ jsx(Progress.Label, {
+				render: /* @__PURE__ */ jsx(FieldLabel, {}),
+				children: label
+			}), showValue && /* @__PURE__ */ jsx(Text, {
 				size: "small",
 				tone: "muted",
-				children: description
-			})
-		]
-	});
-};
+				family: "mono",
+				whiteSpace: "nowrap",
+				selection: false,
+				align: "end",
+				"data-shrink": "false",
+				render: /* @__PURE__ */ jsx(Progress.Value, { render: /* @__PURE__ */ jsx("output", {}) })
+			})]
+		}),
+		/* @__PURE__ */ jsx(Progress.Track, {
+			className: linear_progress_module_default.Track,
+			children: /* @__PURE__ */ jsx(Progress.Indicator, { className: linear_progress_module_default.Indicator })
+		}),
+		description && /* @__PURE__ */ jsx(Text, {
+			className: linear_progress_module_default.Description,
+			size: "small",
+			tone: "muted",
+			children: description
+		})
+	]
+});
 //#endregion
 export { LinearProgress };

package/dist/components/masonry/index.d.ts

@@ -1,2 +1,2 @@
 export { Masonry } from './masonry';
-export type { MasonryItemProps, MasonryProps } from './masonry';
+export type { MasonryBreakpointCols, MasonryItemProps, MasonryProps } from './masonry';

package/dist/components/masonry/masonry-item.d.ts

@@ -1,5 +1,4 @@
 import { useRender } from '@base-ui/react/use-render';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 /**
  * Public Masonry.Item props.
@@ -9,7 +8,7 @@ import type * as React from 'react';
  *
  * @default Native div pass-through props keep React defaults.
  */
-export type MasonryItemProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+export type MasonryItemProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *

package/dist/components/masonry/masonry-item.js

@@ -1,21 +1,16 @@
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import masonry_module_default from "./masonry.module.js";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/masonry/masonry-item.tsx
-var MasonryItem = ({ className, ref, render, style, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-	return useRender({
-		defaultTagName: "div",
-		render,
-		ref,
-		props: {
-			...componentProps,
-			...intrinsicAttributes,
-			className: clsx(masonry_module_default.Item, className),
-			style: { ...style }
-		}
-	});
-};
+var MasonryItem = ({ className, ref, render, style, ...otherProps }) => useRender({
+	defaultTagName: "div",
+	render,
+	ref,
+	props: {
+		...otherProps,
+		className: clsx(masonry_module_default.Item, className),
+		style: { ...style }
+	}
+});
 //#endregion
 export { MasonryItem };