@viraui/react 1.0.10 → 1.0.12

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

@@ -1,18 +1,17 @@
 import { useRender } from '@base-ui/react/use-render';
 import { StackProps } from '..';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import { MasonryItemProps } from './masonry-item';
 import type * as React from 'react';
 /**
- * Mobile-first Masonry column counts keyed by `px` lengths.
+ * Mobile-first Masonry column counts keyed by CSS px lengths (unitless numbers).
  *
  * `default` applies before a breakpoint matches. Other keys are `min-width`
- * values against the Masonry root's content-box inline size. Keys may be in any
- * order; the largest matching breakpoint wins.
+ * values in px against the Masonry root's content-box inline size. Keys may be
+ * in any order; the largest matching breakpoint wins. Non-finite keys are ignored.
  */
 export type MasonryBreakpointCols = {
     default: number;
-    [breakpoint: string]: number;
+    [minWidthPx: number]: number;
 };
 /**
  * Public Masonry props.
@@ -22,7 +21,7 @@ export type MasonryBreakpointCols = {
  *
  * @default Native div pass-through props keep React defaults.
  */
-export type MasonryProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+export type MasonryProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *
@@ -36,13 +35,13 @@ export type MasonryProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraPro
      */
     gap?: StackProps['columnGap'];
     /**
-     * Sets the mobile-first column count at each `px` container breakpoint.
+     * Sets the mobile-first column count at each CSS px container breakpoint.
      *
-     * Each non-`default` key is a `min-width` in `px` against the Masonry root's
-     * content-box inline size. Keys may be in any order; the largest matching
-     * breakpoint wins. Non-`px` keys are ignored.
+     * Each non-`default` key is a unitless `min-width` in px against the Masonry
+     * root's content-box inline size. Keys may be in any order; the largest
+     * matching breakpoint wins. Non-finite keys are ignored.
      *
-     * @default { default: 1, '480px': 2, '768px': 3, '960px': 4, '1280px': 5, '2560px': 6 }
+     * @default { default: 1, 480: 2, 768: 3, 960: 4, 1280: 5, 2560: 6 }
      */
     breakpointCols?: MasonryBreakpointCols;
 };

package/dist/components/masonry/masonry.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Masonry",
+  "structure": "<Masonry>\n  <Masonry.Item>…</Masonry.Item>\n</Masonry>",
   "summary": "Responsive React-column layout primitive for read-only mixed-height content walls.",
   "whenToUse": [
     "Card walls, gallery-like collections, and editorial layouts with uneven item heights",
@@ -28,7 +29,7 @@
         "refCss": "gap"
       },
       "breakpointCols": {
-        "description": "Mobile-first column counts keyed by px min-width breakpoints against the Masonry root content-box inline size; keys may be in any order, the largest matching breakpoint wins, and non-px keys are ignored."
+        "description": "Mobile-first column counts keyed by unitless CSS px min-width breakpoints against the Masonry root content-box inline size; keys may be in any order, the largest matching breakpoint wins, and non-finite keys are ignored."
       }
     },
     "css": {

package/dist/components/masonry/masonry.js

@@ -1,7 +1,6 @@
 "use client";
 import './masonry.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 { Stack } from "../stack/stack.js";
 import masonry_module_default from "./masonry.module.js";
@@ -12,27 +11,20 @@ import { Children, useEffect, useRef, useState } from "react";
 //#region src/components/masonry/masonry.tsx
 var DEFAULT_BREAKPOINT_COLS = {
 	default: 1,
-	"480px": 2,
-	"768px": 3,
-	"960px": 4,
-	"1280px": 5,
-	"2560px": 6
-};
-var parseBreakpointPx = (value) => {
-	const trimmed = value.trim();
-	if (!trimmed.endsWith("px")) return null;
-	const px = Number.parseFloat(trimmed);
-	return Number.isFinite(px) ? px : null;
+	480: 2,
+	768: 3,
+	960: 4,
+	1280: 5,
+	2560: 6
 };
 var resolveColumnCount = (widthPx, breakpointCols) => Object.entries(breakpointCols).filter(([breakpoint]) => breakpoint !== "default").flatMap(([breakpoint, nextColumnCount]) => {
-	const minWidthPx = parseBreakpointPx(breakpoint);
-	return minWidthPx === null ? [] : [{
+	const minWidthPx = Number(breakpoint);
+	return Number.isFinite(minWidthPx) ? [{
 		minWidthPx,
 		nextColumnCount
-	}];
+	}] : [];
 }).sort((left, right) => left.minWidthPx - right.minWidthPx).reduce((columnCount, { minWidthPx, nextColumnCount }) => widthPx >= minWidthPx ? nextColumnCount : columnCount, breakpointCols.default);
 var MasonryRoot = ({ children, className, breakpointCols = DEFAULT_BREAKPOINT_COLS, gap = "large", ref, render, style, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const rootRef = useRef(null);
 	const consumerRef = ref;
 	const [columnCount, setColumnCount] = useState(breakpointCols.default);
@@ -73,8 +65,7 @@ var MasonryRoot = ({ children, className, breakpointCols = DEFAULT_BREAKPOINT_CO
 		render,
 		ref: setRootRef,
 		props: {
-			...componentProps,
-			...intrinsicAttributes,
+			...otherProps,
 			className: clsx(masonry_module_default.Masonry, className),
 			style: dynamicStyle,
 			children: columns.map((column) => /* @__PURE__ */ jsx(Stack, {

package/dist/components/meter/meter.d.ts

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

package/dist/components/meter/meter.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Meter",
+  "structure": "<Meter value={40} />",
   "summary": "Shows a determinate metric in a compact horizontal track for static capacity, level, or score values.",
   "whenToUse": [
     "Use for storage usage, battery level, capacity, or score within a known range.",

package/dist/components/meter/meter.js

@@ -1,6 +1,5 @@
 import './meter.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,52 +7,48 @@ import meter_module_default from "./meter.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Meter } from "@base-ui/react";
 //#region src/components/meter/meter.tsx
-var Meter$1 = ({ className, description, label, showValue = false, value, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
-	return /* @__PURE__ */ jsxs(Meter.Root, {
-		...componentProps,
-		...intrinsicAttributes,
-		className: clsx(meter_module_default.Meter, className),
-		value,
-		render: /* @__PURE__ */ jsx(Stack, {
-			direction: "column",
+var Meter$1 = ({ className, description, label, showValue = false, value, ...otherProps }) => /* @__PURE__ */ jsxs(Meter.Root, {
+	...otherProps,
+	className: clsx(meter_module_default.Meter, 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(Meter.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(Meter.Value, { render: /* @__PURE__ */ jsx("output", {}) })
-				})]
-			}),
-			/* @__PURE__ */ jsx(Meter.Track, {
-				className: meter_module_default.Track,
-				children: /* @__PURE__ */ jsx(Meter.Indicator, { className: meter_module_default.Indicator })
-			}),
-			description && /* @__PURE__ */ jsx(Text, {
-				className: meter_module_default.Description,
+			columnGap: "small",
+			vAlign: "center",
+			hAlign: "space-between",
+			children: [label && /* @__PURE__ */ jsx(Meter.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(Meter.Value, { render: /* @__PURE__ */ jsx("output", {}) })
+			})]
+		}),
+		/* @__PURE__ */ jsx(Meter.Track, {
+			className: meter_module_default.Track,
+			children: /* @__PURE__ */ jsx(Meter.Indicator, { className: meter_module_default.Indicator })
+		}),
+		description && /* @__PURE__ */ jsx(Text, {
+			className: meter_module_default.Description,
+			size: "small",
+			tone: "muted",
+			children: description
+		})
+	]
+});
 //#endregion
 export { Meter$1 as Meter };

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

@@ -25,7 +25,7 @@ var PopoverSheet = ({ unstyled, title, description, children, showCloseButton =
 			color: 1,
 			border: "all",
 			radius: "large",
-			vibrant: true,
+			"data-vibrant": "",
 			render: /* @__PURE__ */ jsx(Stack, {
 				rowGap: "medium",
 				fillChildren: false
@@ -48,7 +48,7 @@ var PopoverSheet = ({ unstyled, title, description, children, showCloseButton =
 					children: [/* @__PURE__ */ jsx(Popover.Title, {
 						render: /* @__PURE__ */ jsx(Title, {
 							align: headerAlign,
-							level: "h6",
+							size: "6",
 							lineHeight: "x-small"
 						}),
 						children: title

package/dist/components/popover/popover.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Popover",
+  "structure": "<Popover>\n  <Popover.Trigger />\n  <Popover.Sheet title=\"…\">…</Popover.Sheet>\n</Popover>",
   "summary": "Compound popover built on Base UI Popover with `Popover.Trigger`, `Popover.Sheet`, `Popover.Close`, `Popover.Title`, `Popover.Description`, and `Popover.createHandle` for detached and multiple triggers; `Sheet` encapsulates Portal + Positioner + Popup + Viewport + Title + Description and animates position, size, and content between triggers; `Sheet` with `unstyled` skips the built-in Surface and header so the consumer composes the popup chrome, including `Popover.Title` and `Popover.Description`.",
   "whenToUse": [
     "Anchored quick actions or contextual hints next to a triggering control",

package/dist/components/progressive-blur/progressive-blur.d.ts

@@ -1,4 +1,3 @@
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import { ProgressiveBlurDirection, ProgressiveBlurEasing } from './progressive-blur.utils';
 import type * as React from 'react';
 /**
@@ -9,7 +8,7 @@ import type * as React from 'react';
  *
  * @default Native div pass-through props keep React defaults.
  */
-export type ProgressiveBlurProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+export type ProgressiveBlurProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Sets the maximum blur radius applied to the first layer at the selected edge.
      *

package/dist/components/progressive-blur/progressive-blur.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "ProgressiveBlur",
+  "structure": "<ProgressiveBlur />",
   "summary": "Decorative stacked backdrop-filter overlay that ramps blur from one edge toward the opposite edge.",
   "whenToUse": [
     "Edge scrims on cards, sheets, heroes, or scroll regions where content should fade into blur",

package/dist/components/progressive-blur/progressive-blur.js

@@ -1,12 +1,10 @@
 import './progressive-blur.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import progressive_blur_module_default from "./progressive-blur.module.js";
 import { formatProgressiveBlurMaskGradient, getProgressiveBlurFactor, getProgressiveBlurMaskStops, resolveProgressiveBlurSteps } from "./progressive-blur.utils.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/progressive-blur/progressive-blur.tsx
 var ProgressiveBlur = ({ blur = "16px", className, direction = "bottom", easing = "exponential", ref, steps, style, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const resolvedSteps = resolveProgressiveBlurSteps(steps, easing);
 	const dynamicStyle = {
 		"--vui-progressive-blur-amount": blur,
@@ -25,8 +23,7 @@ var ProgressiveBlur = ({ blur = "16px", className, direction = "bottom", easing
 		}, layerIndex);
 	});
 	return /* @__PURE__ */ jsx("div", {
-		...componentProps,
-		...intrinsicAttributes,
+		...otherProps,
 		ref,
 		"aria-hidden": "true",
 		className: clsx(progressive_blur_module_default.ProgressiveBlur, className),

package/dist/components/progressive-blur/progressive-blur.utils.js

@@ -12,13 +12,10 @@ var resolveProgressiveBlurSteps = (steps, easing) => {
 var getProgressiveBlurFactor = (easing, layerIndex, totalSteps) => {
 	if (easing === "exponential") return .5 ** layerIndex;
 	const progress = layerIndex / (totalSteps - 1);
-	switch (easing) {
-		case "linear": return 1 - progress;
-		case "ease-in": return 1 - progress * progress;
-		case "ease-out": return 1 - (1 - (1 - progress) ** 2);
-		case "ease-in-out": return 1 - (progress < .5 ? 2 * progress * progress : 1 - (-2 * progress + 2) ** 2 / 2);
-		default: return 1 - progress;
-	}
+	if (easing === "linear") return 1 - progress;
+	if (easing === "ease-in") return 1 - progress * progress;
+	if (easing === "ease-out") return 1 - (1 - (1 - progress) ** 2);
+	return 1 - (progress < .5 ? 2 * progress * progress : 1 - (-2 * progress + 2) ** 2 / 2);
 };
 var getProgressiveBlurMaskStops = (layerIndex, totalSteps) => {
 	const increment = 100 / totalSteps;

package/dist/components/radio/radio.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Radio",
+  "structure": "<RadioGroup>\n  <Radio value=\"…\" label=\"…\" />\n</RadioGroup>",
   "summary": "Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.",
   "whenToUse": [
     "Single selection from a small set of related options inside RadioGroup",

package/dist/components/select/select-indicator-slot.js

@@ -7,7 +7,7 @@ var indicatorStackRender = /* @__PURE__ */ jsx(Stack, {
 	fillChildren: false,
 	hAlign: "center",
 	inline: true,
-	shrink: false,
+	"data-shrink": "false",
 	vAlign: "center"
 });
 function SelectIndicatorSlot({ children, interactive = false }) {
@@ -21,11 +21,11 @@ function SelectIndicatorSlot({ children, interactive = false }) {
 	return /* @__PURE__ */ jsx(Stack, {
 		"aria-hidden": true,
 		className: select_module_default.Indicator,
-		grow: false,
+		"data-grow": "false",
 		fillChildren: false,
 		hAlign: "center",
 		inline: true,
-		shrink: false,
+		"data-shrink": "false",
 		vAlign: "center"
 	});
 }

package/dist/components/select/select-option.js

@@ -31,8 +31,8 @@ function SelectOption({ addon, addonAlign = "center", children, className, disab
 				children: [addon && /* @__PURE__ */ jsx(Stack, {
 					vPadding: "2x-small",
 					"aria-hidden": "true",
-					grow: false,
-					shrink: false,
+					"data-grow": "false",
+					"data-shrink": "false",
 					children: addon
 				}), /* @__PURE__ */ jsx(Text, {
 					lineHeight: "small",

package/dist/components/select/select.d.ts

@@ -1,6 +1,5 @@
 import { FieldRoot } from '@base-ui/react/field';
 import { SelectRoot } from '@base-ui/react/select';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import { SelectGroup } from './select-group';
 import { SelectOption } from './select-option';
 import { SelectSeparator } from './select-separator';
@@ -14,7 +13,7 @@ import type * as React from 'react';
  *
  * @default Base UI pass-through props keep upstream defaults.
  */
-export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'> & IntrinsicViraProps & {
+export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'> & {
     /**
      * Visible label rendered with shared internal `FieldLabel`.
      *

package/dist/components/select/select.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Select",
+  "structure": "<Select>\n  <Select.Option value=\"…\">…</Select.Option>\n  <Select.Group label=\"…\">\n    <Select.Option value=\"…\">…</Select.Option>\n  </Select.Group>\n  <Select.Separator />\n</Select>",
   "summary": "Field-wrapped single-select dropdown with grouped options and field copy.",
   "whenToUse": [
     "Choose one value from a predefined list with label and helper copy",

package/dist/components/select/select.js

@@ -2,7 +2,6 @@
 import './select.css';
 import { clsx } from "../../core/clsx.js";
 import { ChromeChevronDown, ChromeChevronExpandY, ChromeChevronUp } from "../../internal/chrome-icons/chrome-icons.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";
@@ -20,15 +19,13 @@ import { Field } from "@base-ui/react/field";
 import { Select } from "@base-ui/react/select";
 //#region src/components/select/select.tsx
 function SelectRootComponent({ alignListWithTrigger = true, children, className, description, dirty, disabled, error, addon = /* @__PURE__ */ jsx(ChromeChevronExpandY, { size: 16 }), invalid, label, name, placeholder, ref, touched, validate, validationDebounceTime, validationMode, ...selectRootProps }) {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(selectRootProps);
-	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...restSelectProps } = componentProps;
+	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...restSelectProps } = selectRootProps;
 	const fieldLabelId = useId();
 	const listAccessibleNameProps = {};
 	if (ariaLabel !== void 0) listAccessibleNameProps["aria-label"] = ariaLabel;
 	else if (ariaLabelledBy !== void 0) listAccessibleNameProps["aria-labelledby"] = ariaLabelledBy;
 	else if (label !== void 0) listAccessibleNameProps["aria-labelledby"] = fieldLabelId;
 	return /* @__PURE__ */ jsxs(Field.Root, {
-		...intrinsicAttributes,
 		className: clsx(select_module_default.Select, className),
 		dirty,
 		disabled,
@@ -78,7 +75,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 							hAlign: "center",
 							hPadding: "x-small",
 							inline: true,
-							shrink: false,
+							"data-shrink": "false",
 							vAlign: "center"
 						}),
 						children: addon
@@ -118,7 +115,7 @@ function SelectRootComponent({ alignListWithTrigger = true, children, className,
 										overflow: "auto",
 										radius: "medium",
 										vPadding: "x-small",
-										vibrant: true
+										"data-vibrant": ""
 									}),
 									children
 								})

package/dist/components/separator/separator.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 SeparatorAxisPadding = ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
@@ -12,7 +11,7 @@ type SeparatorSize = 'small' | 'medium' | 'large';
  *
  * @default Native hr pass-through props keep React defaults.
  */
-export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'hr'>, 'size'> & IntrinsicViraProps & {
+export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'hr'>, 'size'> & {
     /**
      * Replaces the default `hr` line root using Base UI render semantics.
      *

package/dist/components/separator/separator.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Separator",
+  "structure": "<Separator />",
   "summary": "Thematic or content divider with horizontal or vertical orientation, token padding, and preset line thickness.",
   "whenToUse": [
     "Dividing sections within a page or panel",

package/dist/components/separator/separator.js

@@ -1,6 +1,5 @@
 import './separator.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Stack } from "../stack/stack.js";
 import separator_module_default from "./separator.module.js";
 import { jsx } from "react/jsx-runtime";
@@ -12,7 +11,6 @@ var separatorSizeValues = {
 	large: 3
 };
 var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "small", style, vPadding, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
 		"--vui-separator-size": `${separatorSizeValues[size]}px`,
 		...style
@@ -22,7 +20,7 @@ var Separator = ({ className, hPadding, orientation = "horizontal", ref, render,
 		render,
 		ref,
 		props: {
-			...componentProps,
+			...otherProps,
 			"data-separator-orientation": orientation,
 			"aria-orientation": orientation,
 			className: clsx(separator_module_default.Line, className),
@@ -35,7 +33,6 @@ var Separator = ({ className, hPadding, orientation = "horizontal", ref, render,
 		hPadding,
 		vAlign: orientation === "vertical" ? "stretch" : "initial",
 		vPadding,
-		...intrinsicAttributes,
 		children: line
 	});
 };

package/dist/components/shimmer/shimmer.d.ts

@@ -1,4 +1,3 @@
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 /**
  * Public Shimmer props.
@@ -8,7 +7,7 @@ import type * as React from 'react';
  *
  * @default Native span pass-through props keep React defaults.
  */
-export type ShimmerProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraProps & {
+export type ShimmerProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Sets the shimmer sweep duration using any valid CSS time string.
      *

package/dist/components/shimmer/shimmer.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Shimmer",
+  "structure": "<Shimmer>…</Shimmer>",
   "summary": "Decorative inline text shimmer that inherits typography and color from a parent text primitive.",
   "whenToUse": [
     "Loading placeholder copy inside Text or Title",

package/dist/components/shimmer/shimmer.js

@@ -1,11 +1,9 @@
 import './shimmer.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import shimmer_module_default from "./shimmer.module.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/shimmer/shimmer.tsx
 var Shimmer = ({ angle, className, duration, highlightColor, ref, spread, style, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
 		...duration && { "--vui-shimmer-duration": duration },
 		...spread && { "--vui-shimmer-spread": spread },
@@ -14,8 +12,7 @@ var Shimmer = ({ angle, className, duration, highlightColor, ref, spread, style,
 		...style
 	};
 	return /* @__PURE__ */ jsx("span", {
-		...componentProps,
-		...intrinsicAttributes,
+		...otherProps,
 		ref,
 		className: clsx(shimmer_module_default.Shimmer, className),
 		style: dynamicStyle

package/dist/components/skeleton/skeleton.d.ts

@@ -1,5 +1,4 @@
 import { ThemeTypes } from '@viraui/foundation/vira/types';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 /**
  * Public Skeleton props.
@@ -9,7 +8,7 @@ import type * as React from 'react';
  *
  * @default Native span pass-through props keep React defaults.
  */
-export type SkeletonProps = React.ComponentPropsWithoutRef<'span'> & IntrinsicViraProps & {
+export type SkeletonProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Sets the skeleton inline size using any valid CSS size string.
      *

package/dist/components/skeleton/skeleton.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Skeleton",
+  "structure": "<Skeleton />",
   "summary": "Decorative loading placeholder sized by props, not children.",
   "whenToUse": [
     "Placeholder blocks while content loads",

package/dist/components/skeleton/skeleton.js

@@ -1,12 +1,10 @@
 import './skeleton.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 skeleton_module_default from "./skeleton.module.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/skeleton/skeleton.tsx
 var Skeleton = ({ className, height, minHeight, minWidth, radius, ref, style, width, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
 		...radius != null && { "--vui-skeleton-border-radius": resolveThemeValue(radius, "radius", "var(--radius-small)") },
 		...width && { "--vui-skeleton-inline-size": width },
@@ -16,8 +14,7 @@ var Skeleton = ({ className, height, minHeight, minWidth, radius, ref, style, wi
 		...style
 	};
 	return /* @__PURE__ */ jsx("span", {
-		...componentProps,
-		...intrinsicAttributes,
+		...otherProps,
 		ref,
 		"aria-hidden": "true",
 		className: clsx(skeleton_module_default.Skeleton, className),

package/dist/components/slider/slider.d.ts

@@ -1,6 +1,5 @@
 import { FieldRoot } from '@base-ui/react/field';
 import { SliderRoot } from '@base-ui/react/slider';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 /**
  * Public Slider props.
@@ -11,18 +10,6 @@ import type * as React from 'react';
  * @default Base UI pass-through props keep upstream defaults.
  */
 export type SliderProps = SliderRoot.Props & FieldRoot.Props & {
-    /**
-     * 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/slider/slider.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Slider",
+  "structure": "<Slider />",
   "summary": "Field-wrapped range input supporting single-thumb or two-thumb range selection.",
   "whenToUse": [
     "Numeric value selection on a horizontal or vertical axis",