@viraui/react 1.0.10 → 1.0.11

package/dist/catalog.json

@@ -8,6 +8,12 @@
       "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and background on open items.",
       "guidePath": "./components/accordion/accordion.guide.json"
     },
+    {
+      "id": "annotate",
+      "name": "Annotate",
+      "summary": "Decorative CSS-only arrow and handwritten label that wraps inline content with optional highlighter mark.",
+      "guidePath": "./components/annotate/annotate.guide.json"
+    },
     {
       "id": "avatar",
       "name": "Avatar",
@@ -68,6 +74,12 @@
       "summary": "Semantic field grouping with shared legend and optional group helper copy.",
       "guidePath": "./components/fieldset/fieldset.guide.json"
     },
+    {
+      "id": "fit-text",
+      "name": "FitText",
+      "summary": "CSS-only fit-to-width wrapper that scales children to fill available inline space.",
+      "guidePath": "./components/fit-text/fit-text.guide.json"
+    },
     {
       "id": "icon-button",
       "name": "IconButton",
@@ -185,7 +197,7 @@
     {
       "id": "textarea",
       "name": "Textarea",
-      "summary": "Multi-line field control with shared field copy and optional resize.",
+      "summary": "Multi-line field control with shared field copy, optional resize, and optional content sizing.",
       "guidePath": "./components/textarea/textarea.guide.json"
     },
     {

package/dist/components/annotate/annotate.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-annotate-color{syntax:"<color>";inherits:true;initial-value:#d16500}@property --vui-annotate-arrow-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-arrow-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-x{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-text-y{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-rotate{syntax:"<angle>";inherits:true;initial-value:-4deg}@property --vui-annotate-target-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-gap{syntax:"<length>";inherits:true;initial-value:0}@property --vui-annotate-label-max-width{syntax:"<length>";inherits:true;initial-value:150px}.viraui__annotate-module__Annotate_7C36U{--vui-annotate-color:var(--highlight-yellow);--vui-annotate-target-gap:var(--space-small);--vui-annotate-label-gap:var(--space-x-small);position:relative;display:inline-block;overflow:visible;border-radius:var(--radius-x-small);&:before{content:"";z-index:3;width:46px;height:38px;transform-origin:50% 50%;mask:var(--_annotate-arrow-mask) center /contain no-repeat;background:var(--vui-annotate-color)}&:after,&:before{position:absolute;pointer-events:none}&:after{content:attr(data-note);z-index:4;width:max-content;max-width:var(--vui-annotate-label-max-width);transform:rotate(var(--vui-annotate-rotate));font-family:Segoe Print,Chalkboard,cursive,system-ui;font-size:.95rem;line-height:1.05;color:var(--vui-annotate-color);white-space:normal}&:not([data-note]):after,&:not([data-note]):before,&[data-note=""]:after,&[data-note=""]:before{display:none}&[data-mark=true]{background:oklab(from var(--vui-annotate-color) l a b/30%);box-shadow:-.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%),.3em 0 0 0 oklab(from var(--vui-annotate-color) l a b/30%)}&[data-side=top]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M23 4c-1 9-1 20 0 31'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 29 6 7 6-7'/%3E%3C/svg%3E");left:calc(50% - 23px + var(--vui-annotate-arrow-x));top:calc(-1 * var(--vui-annotate-target-gap) - 35px + var(--vui-annotate-arrow-y))}&[data-side=top]:after{left:calc(50% + var(--vui-annotate-text-x));bottom:calc(100% + var(--vui-annotate-target-gap) + 31px + var(--vui-annotate-label-gap) - var(--vui-annotate-text-y));transform:translateX(-50%) rotate(var(--vui-annotate-rotate))}&[data-side=top-start]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M6 6c10 2 22 14 34 26'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m36 22 4 10-10-4'/%3E%3C/svg%3E");left:calc(50% - 40px + var(--vui-annotate-arrow-x));top:calc(-1 * var(--vui-annotate-target-gap) - 32px + var(--vui-annotate-arrow-y));transform:translateX(-10%)}&[data-side=top-start]:after{left:calc(50% - 34px + var(--vui-annotate-text-x));bottom:calc(100% + var(--vui-annotate-target-gap) + 26px + var(--vui-annotate-label-gap) - var(--vui-annotate-text-y));transform:translateX(-60%) rotate(var(--vui-annotate-rotate))}&[data-side=start]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M4 19c11-1 27-1 39 0'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m36 13 7 6-7 6'/%3E%3C/svg%3E");left:calc(-1 * var(--vui-annotate-target-gap) - 43px + var(--vui-annotate-arrow-x));top:calc(50% - 19px + var(--vui-annotate-arrow-y))}&[data-side=start]:after{right:calc(100% + var(--vui-annotate-target-gap) + 39px + var(--vui-annotate-label-gap) - var(--vui-annotate-text-x));top:calc(50% - 5px + var(--vui-annotate-text-y));transform:translateY(-50%) rotate(var(--vui-annotate-rotate))}&[data-side=bottom-start]:before{left:calc(50% - 40px + var(--vui-annotate-arrow-x));--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M6 32c10-2 22-14 34-26'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m30 10 10-4-4 10'/%3E%3C/svg%3E");top:calc(100% + var(--vui-annotate-target-gap) - 6px + var(--vui-annotate-arrow-y));transform:translateX(-10%)}&[data-side=bottom-start]:after{left:calc(50% - 34px + var(--vui-annotate-text-x));top:calc(100% + var(--vui-annotate-target-gap) + 26px + var(--vui-annotate-label-gap) + var(--vui-annotate-text-y));transform:translateX(-60%) rotate(var(--vui-annotate-rotate))}&[data-side=bottom]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M23 35c-1-9-1-20 0-31'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m17 10 6-7 6 7'/%3E%3C/svg%3E");left:calc(50% - 23px + var(--vui-annotate-arrow-x));top:calc(100% + var(--vui-annotate-target-gap) - 4px + var(--vui-annotate-arrow-y))}&[data-side=bottom]:after{left:calc(50% + var(--vui-annotate-text-x));top:calc(100% + var(--vui-annotate-target-gap) + 31px + var(--vui-annotate-label-gap) + var(--vui-annotate-text-y));transform:translateX(-50%) rotate(var(--vui-annotate-rotate))}&[data-side=bottom-end]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M40 32C30 30 18 18 6 6'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16 10 6 6l4 10'/%3E%3C/svg%3E");left:calc(50% - 6px + var(--vui-annotate-arrow-x));top:calc(100% + var(--vui-annotate-target-gap) - 6px + var(--vui-annotate-arrow-y));transform:translateX(10%)}&[data-side=bottom-end]:after{left:calc(50% + 34px + var(--vui-annotate-text-x));top:calc(100% + var(--vui-annotate-target-gap) + 26px + var(--vui-annotate-label-gap) + var(--vui-annotate-text-y));transform:translateX(-40%) rotate(var(--vui-annotate-rotate))}&[data-side=end]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M43 19c-11-1-28-1-40 0'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m10 13-7 6 7 6'/%3E%3C/svg%3E");left:calc(100% + var(--vui-annotate-target-gap) - 3px + var(--vui-annotate-arrow-x));top:calc(50% - 19px + var(--vui-annotate-arrow-y))}&[data-side=end]:after{left:calc(100% + var(--vui-annotate-target-gap) + 40px + var(--vui-annotate-label-gap) + var(--vui-annotate-text-x));top:calc(50% - 5px + var(--vui-annotate-text-y));transform:translateY(-50%) rotate(var(--vui-annotate-rotate))}&[data-side=top-end]:before{--_annotate-arrow-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='38' viewBox='0 0 46 38'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M40 6C30 8 18 20 6 32'/%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10 22 6 32l10-4'/%3E%3C/svg%3E");left:calc(50% - 6px + var(--vui-annotate-arrow-x));top:calc(-1 * var(--vui-annotate-target-gap) - 32px + var(--vui-annotate-arrow-y));transform:translateX(10%)}&[data-side=top-end]:after{left:calc(50% + 34px + var(--vui-annotate-text-x));bottom:calc(100% + var(--vui-annotate-target-gap) + 26px + var(--vui-annotate-label-gap) - var(--vui-annotate-text-y));transform:translateX(-40%) rotate(var(--vui-annotate-rotate))}}}

package/dist/components/annotate/annotate.d.ts

@@ -0,0 +1,88 @@
+import { ThemeTypes } from '@viraui/foundation/vira/types';
+import type * as React from 'react';
+export type AnnotateSide = 'top-start' | 'top' | 'top-end' | 'end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'start';
+/**
+ * Public Annotate props.
+ *
+ * Includes standard `span` attributes such as `children`, `id`, `className`, and event handlers,
+ * plus Vira-owned decorative annotation controls.
+ *
+ * @default Native span pass-through props keep React defaults.
+ */
+export type AnnotateProps = React.ComponentPropsWithRef<'span'> & {
+    /**
+     * Decorative label rendered via `::after` from `attr(data-note)`.
+     *
+     * Do not put critical information here — assistive tech does not announce the pseudo label.
+     *
+     * @default No note; arrow and label pseudos stay hidden.
+     */
+    note?: string;
+    /**
+     * Places the decorative arrow and label relative to the wrapped content.
+     *
+     * @default 'top'
+     */
+    side?: AnnotateSide;
+    /**
+     * Highlight token driving arrow, label, and optional mark color via `--vui-annotate-color`.
+     *
+     * @default 'yellow'
+     */
+    color?: ThemeTypes['highlight'];
+    /**
+     * When true, applies a highlighter mark behind the wrapped content.
+     *
+     * @default false
+     */
+    mark?: boolean;
+    /**
+     * Horizontal offset for the arrow pseudo (`--vui-annotate-arrow-x`).
+     *
+     * @default `0px`
+     */
+    arrowOffsetX?: string;
+    /**
+     * Vertical offset for the arrow pseudo (`--vui-annotate-arrow-y`).
+     *
+     * @default `0px`
+     */
+    arrowOffsetY?: string;
+    /**
+     * Horizontal offset for the label pseudo (`--vui-annotate-text-x`).
+     *
+     * @default `0px`
+     */
+    textOffsetX?: string;
+    /**
+     * Vertical offset for the label pseudo (`--vui-annotate-text-y`).
+     *
+     * @default `0px`
+     */
+    textOffsetY?: string;
+    /**
+     * Rotation for the label (and composed transforms) via `--vui-annotate-rotate`.
+     *
+     * @default `-4deg`
+     */
+    rotate?: string;
+    /**
+     * Gap between the target and the arrow via `--vui-annotate-target-gap`.
+     *
+     * @default `var(--space-small)`
+     */
+    targetGap?: string;
+    /**
+     * Gap between arrow and label on all sides via `--vui-annotate-label-gap`.
+     *
+     * @default `var(--space-x-small)`
+     */
+    labelGap?: string;
+    /**
+     * Max width for the label pseudo via `--vui-annotate-label-max-width`.
+     *
+     * @default `300px`
+     */
+    labelMaxWidth?: string;
+};
+export declare const Annotate: React.FC<AnnotateProps>;

package/dist/components/annotate/annotate.guide.json

@@ -0,0 +1,103 @@
+{
+  "name": "Annotate",
+  "summary": "Decorative CSS-only arrow and handwritten label that wraps inline content with optional highlighter mark.",
+  "whenToUse": [
+    "Call out a word or phrase in marketing, docs, or onboarding copy",
+    "Add a playful visual annotation without extra DOM nodes",
+    "Highlight a target with an optional mark while keeping children as the real content"
+  ],
+  "whenNotToUse": [
+    "Conveying critical instructions, status, or validation that assistive tech must announce",
+    "Interactive tooltips or popovers that need focus and keyboard behavior",
+    "Layouts that clip overflow and cannot leave room for the arrow and label"
+  ],
+  "accessibility": [
+    "Arrow and label are CSS pseudos — decorative only and not exposed to assistive tech",
+    "Do not put critical information in note; keep real meaning in children or aria-describedby content",
+    "Children retain native semantics; Annotate itself is a presentational span wrap"
+  ],
+  "antiPatterns": [
+    "Using note as the only source of instructions or status",
+    "Nesting Annotate inside overflow-hidden parents without padding for the arrow",
+    "Expecting the label to participate in hit-testing or selection"
+  ],
+  "related": ["Text", "Title", "Tooltip", "Chip"],
+  "properties": {
+    "react": {
+      "color": {
+        "description": "Highlight token driving arrow, label, and optional mark color via --vui-annotate-color.",
+        "refCss": "color"
+      },
+      "arrowOffsetX": {
+        "description": "Horizontal offset for the arrow pseudo.",
+        "refCss": "arrow-x"
+      },
+      "arrowOffsetY": {
+        "description": "Vertical offset for the arrow pseudo.",
+        "refCss": "arrow-y"
+      },
+      "textOffsetX": {
+        "description": "Horizontal offset for the label pseudo.",
+        "refCss": "text-x"
+      },
+      "textOffsetY": {
+        "description": "Vertical offset for the label pseudo.",
+        "refCss": "text-y"
+      },
+      "rotate": {
+        "description": "Rotation for the label via --vui-annotate-rotate.",
+        "refCss": "rotate"
+      },
+      "targetGap": {
+        "description": "Gap between the target and the arrow.",
+        "refCss": "target-gap"
+      },
+      "labelGap": {
+        "description": "Gap between arrow and label on all sides.",
+        "refCss": "label-gap"
+      },
+      "labelMaxWidth": {
+        "description": "Max width for the label pseudo.",
+        "refCss": "label-max-width"
+      }
+    },
+    "css": {
+      "color": {
+        "description": "Arrow, label, and mark accent color.",
+        "refReact": "color"
+      },
+      "arrow-x": {
+        "description": "Horizontal arrow offset.",
+        "refReact": "arrowOffsetX"
+      },
+      "arrow-y": {
+        "description": "Vertical arrow offset.",
+        "refReact": "arrowOffsetY"
+      },
+      "text-x": {
+        "description": "Horizontal label offset.",
+        "refReact": "textOffsetX"
+      },
+      "text-y": {
+        "description": "Vertical label offset.",
+        "refReact": "textOffsetY"
+      },
+      "rotate": {
+        "description": "Label rotation angle.",
+        "refReact": "rotate"
+      },
+      "target-gap": {
+        "description": "Gap between the target and the arrow.",
+        "refReact": "targetGap"
+      },
+      "label-gap": {
+        "description": "Gap between arrow and label on all sides.",
+        "refReact": "labelGap"
+      },
+      "label-max-width": {
+        "description": "Max width for the label pseudo.",
+        "refReact": "labelMaxWidth"
+      }
+    }
+  }
+}

package/dist/components/annotate/annotate.js

@@ -0,0 +1,31 @@
+import './annotate.css';
+import { clsx } from "../../core/clsx.js";
+import annotate_module_default from "./annotate.module.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/annotate/annotate.tsx
+var Annotate = ({ arrowOffsetX, arrowOffsetY, children, className, color = "yellow", labelGap, labelMaxWidth = "300px", mark = false, note, ref, rotate, side = "top", style, targetGap, textOffsetX, textOffsetY, ...otherProps }) => {
+	const dynamicStyle = {
+		...color && { "--vui-annotate-color": `var(--highlight-${color})` },
+		...arrowOffsetX && { "--vui-annotate-arrow-x": arrowOffsetX },
+		...arrowOffsetY && { "--vui-annotate-arrow-y": arrowOffsetY },
+		...textOffsetX && { "--vui-annotate-text-x": textOffsetX },
+		...textOffsetY && { "--vui-annotate-text-y": textOffsetY },
+		...rotate && { "--vui-annotate-rotate": rotate },
+		...targetGap && { "--vui-annotate-target-gap": targetGap },
+		...labelGap && { "--vui-annotate-label-gap": labelGap },
+		...labelMaxWidth && { "--vui-annotate-label-max-width": labelMaxWidth },
+		...style
+	};
+	return /* @__PURE__ */ jsx("span", {
+		...otherProps,
+		ref,
+		className: clsx(annotate_module_default.Annotate, className),
+		"data-mark": mark ? "true" : void 0,
+		"data-note": note,
+		"data-side": side,
+		style: dynamicStyle,
+		children
+	});
+};
+//#endregion
+export { Annotate };

package/dist/components/annotate/annotate.module.js

@@ -0,0 +1,5 @@
+//#region src/components/annotate/annotate.module.css
+var Annotate = "viraui__annotate-module__Annotate_7C36U";
+var annotate_module_default = { Annotate };
+//#endregion
+export { Annotate, annotate_module_default as default };

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

@@ -0,0 +1,2 @@
+export { Annotate } from './annotate';
+export type { AnnotateProps, AnnotateSide } from './annotate';

package/dist/components/avatar/avatar.d.ts

@@ -1,4 +1,3 @@
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 /**
  * Public Avatar props.
@@ -8,7 +7,7 @@ import type * as React from 'react';
  *
  * @default Native span pass-through props keep React defaults.
  */
-export type AvatarProps = React.ComponentPropsWithRef<'span'> & IntrinsicViraProps & {
+export type AvatarProps = React.ComponentPropsWithRef<'span'> & {
     /**
      * Supplies the avatar image source URL.
      *

package/dist/components/avatar/avatar.js

@@ -1,6 +1,5 @@
 import './avatar.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import avatar_module_default from "./avatar.module.js";
 import { Text } from "../text/text.js";
 import { Skeleton } from "../skeleton/skeleton.js";
@@ -14,19 +13,17 @@ var fallbackTextSizeByAvatarSize = {
 	big: "large"
 };
 var Avatar$1 = ({ alt = "", className, fallback, loading = false, ref, size = "small", src, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const hasImage = Boolean(src);
 	return /* @__PURE__ */ jsx(Avatar.Root, {
-		...componentProps,
-		...intrinsicAttributes,
+		...otherProps,
 		ref,
 		"aria-busy": loading || void 0,
 		className: clsx(avatar_module_default.Avatar, className),
 		"data-has-image": hasImage ? "true" : "false",
 		"data-loading": loading ? "true" : "false",
 		"data-size": size,
-		"data-grow": false,
-		"data-shrink": false,
+		"data-grow": "false",
+		"data-shrink": "false",
 		children: loading ? /* @__PURE__ */ jsx(Skeleton, {
 			className: avatar_module_default.AvatarSkeleton,
 			minHeight: "100%",

package/dist/components/avatar-group/avatar-group.d.ts

@@ -1,5 +1,4 @@
 import { AvatarProps } from '..';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import type * as React from 'react';
 type AvatarGroupAvatarProps = Omit<AvatarProps, 'size' | 'ref'>;
 /**
@@ -10,7 +9,7 @@ type AvatarGroupAvatarProps = Omit<AvatarProps, 'size' | 'ref'>;
  *
  * @default Native div pass-through props keep React defaults.
  */
-export type AvatarGroupProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+export type AvatarGroupProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Supplies the avatar payloads rendered by the group in DOM order.
      *

package/dist/components/avatar-group/avatar-group.js

@@ -1,6 +1,5 @@
 import './avatar-group.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { Avatar } from "../avatar/avatar.js";
 import avatar_group_module_default from "./avatar-group.module.js";
 import { Text } from "../text/text.js";
@@ -10,13 +9,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/avatar-group/avatar-group.tsx
 var getAvatarKey = (avatar, index) => `${avatar.src ?? "fallback"}-${typeof avatar.fallback === "string" ? avatar.fallback : "node"}-${index}`;
 var AvatarGroup = ({ avatars, className, direction = "horizontal", maxVisible, overflowText, ref, size = "small", style, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const isOverflowing = typeof maxVisible === "number" && maxVisible > 0 && avatars.length > maxVisible;
 	const hasOverflow = isOverflowing && overflowText !== void 0 && overflowText !== null;
 	const truncatedAvatars = isOverflowing ? avatars.slice(0, maxVisible) : avatars;
 	return /* @__PURE__ */ jsxs("div", {
-		...componentProps,
-		...intrinsicAttributes,
+		...otherProps,
 		ref,
 		className: clsx(avatar_group_module_default.AvatarGroup, className),
 		"data-direction": direction,

package/dist/components/basic-input/basic-input.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__basic-input-module__BasicInput_5uE64{--vui-basic-input-background:var(--base-1);--vui-basic-input-color:var(--global-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);--vui-basic-input-padding-inline:var(--space-small);--vui-basic-input-font-size:var(--font-scale-body-small);--vui-basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--vui-basic-input-padding-inline);font-family:inherit;font-size:var(--vui-basic-input-font-size);font-variation-settings:"wght" 400;color:var(--vui-basic-input-color);background:var(--vui-basic-input-background);border:none;border-radius:var(--vui-basic-input-border-radius);appearance:none;&::-webkit-contacts-auto-fill-button{background-color:var(--vui-basic-input-color)}&::placeholder{color:var(--vui-basic-input-placeholder-color)}&:disabled{--vui-basic-input-background:var(--global-disabled-background);--vui-basic-input-color:var(--global-disabled-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid]{outline-color:oklab(from var(--highlight-red) l a b/.3)}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-basic-input-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-border-radius{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --vui-basic-input-color{syntax:"<color>";inherits:false;initial-value:#0000}@property --vui-basic-input-font-size{syntax:"<length>";inherits:false;initial-value:1rem}@property --vui-basic-input-padding-inline{syntax:"<length>";inherits:false;initial-value:0}@property --vui-basic-input-placeholder-color{syntax:"<color>";inherits:false;initial-value:#0000}.viraui__basic-input-module__BasicInput_5uE64{--vui-basic-input-background:var(--base-1);--vui-basic-input-color:var(--global-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);--vui-basic-input-padding-inline:var(--space-small);--vui-basic-input-font-size:var(--font-scale-body-small);--vui-basic-input-border-radius:var(--radius-medium);box-sizing:border-box;margin:0;inline-size:100%;min-inline-size:0;padding-inline:var(--vui-basic-input-padding-inline);font-family:inherit;font-size:var(--vui-basic-input-font-size);font-variation-settings:"wght" 400;color:var(--vui-basic-input-color);background:var(--vui-basic-input-background);border:none;border-radius:var(--vui-basic-input-border-radius);appearance:none;&::-webkit-contacts-auto-fill-button{background-color:var(--vui-basic-input-color)}&::placeholder{color:var(--vui-basic-input-placeholder-color)}&:disabled{--vui-basic-input-background:var(--global-disabled-background);--vui-basic-input-color:var(--global-disabled-foreground);--vui-basic-input-placeholder-color:var(--global-disabled-foreground);cursor:not-allowed}&[data-invalid]{outline-color:oklab(from var(--highlight-red) l a b/.3)}&[data-sizing=content]{field-sizing:content}}}

package/dist/components/basic-input/basic-input.d.ts

@@ -9,5 +9,12 @@ import * as React from 'react';
  */
 export type BasicInputProps = Omit<Field.Control.Props, 'ref'> & {
     ref?: React.Ref<HTMLElement> | undefined;
+    /**
+     * When `true`, sets `field-sizing: content` on the control via `data-sizing="content"`.
+     * Omitted / `false` keeps the browser `field-sizing: fixed` default.
+     *
+     * @default undefined (browser fixed)
+     */
+    fitContent?: boolean;
 };
 export declare const BasicInput: React.ForwardRefExoticComponent<Omit<BasicInputProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/basic-input/basic-input.js

@@ -9,17 +9,20 @@ import { Input } from "@base-ui/react/input";
 function usesInputPrimitiveRender(render) {
 	return React.isValidElement(render) && render.type === Input;
 }
-var BasicInput = React.forwardRef(function BasicInput({ className, render, ...otherProps }, ref) {
+var BasicInput = React.forwardRef(function BasicInput({ className, render, fitContent, ...otherProps }, ref) {
 	const mergedClassName = clsx(basic_input_module_default.BasicInput, className);
+	const sizingProps = { ...fitContent && { "data-sizing": "content" } };
 	if (usesInputPrimitiveRender(render)) return /* @__PURE__ */ jsx(Input, {
 		ref,
 		className: mergedClassName,
+		...sizingProps,
 		...otherProps
 	});
 	return /* @__PURE__ */ jsx(Field.Control, {
 		ref,
 		className: mergedClassName,
 		render,
+		...sizingProps,
 		...otherProps
 	});
 });

package/dist/components/basic-input/input-control-group.js

@@ -18,7 +18,7 @@ var InputControlGroup = ({ addonClassName, children, controlGroupClassName, endA
 			hAlign: "center",
 			hPadding: ["small", "x-small"],
 			inline: true,
-			shrink: false,
+			"data-shrink": "false",
 			vAlign: "center",
 			children: startAddon
 		}),
@@ -30,7 +30,7 @@ var InputControlGroup = ({ addonClassName, children, controlGroupClassName, endA
 			hAlign: "center",
 			hPadding: "x-small",
 			inline: true,
-			shrink: false,
+			"data-shrink": "false",
 			vAlign: "center",
 			children: endAddon
 		})

package/dist/components/bleed/bleed.d.ts

@@ -1,4 +1,3 @@
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import { ThemeTypes } from '@viraui/foundation/vira/types';
 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 BleedProps = React.ComponentPropsWithRef<'div'> & IntrinsicViraProps & {
+export type BleedProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Sets the inline bleed amount using a Vira space token.
      *

package/dist/components/bleed/bleed.js

@@ -1,18 +1,15 @@
 import './bleed.css';
 import { clsx } from "../../core/clsx.js";
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import bleed_module_default from "./bleed.module.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/bleed/bleed.tsx
 var Bleed = ({ amount, children, className, full = false, ref, style, ...otherProps }) => {
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	const dynamicStyle = {
 		...amount && !full && { "--vui-bleed-amount": `var(--space-${amount})` },
 		...style
 	};
 	return /* @__PURE__ */ jsx("div", {
-		...componentProps,
-		...intrinsicAttributes,
+		...otherProps,
 		ref,
 		className: clsx(bleed_module_default.Bleed, className),
 		"data-bleed-full": full ? "true" : void 0,

package/dist/components/button/button-link.d.ts

@@ -1,6 +1,5 @@
 import { useRender } from '@base-ui/react/use-render';
 import { ButtonAddonPosition, ButtonSize, ButtonVariant } from './button-chrome';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 import { ReactNode } from 'react';
 import * as React from 'react';
 /**
@@ -11,7 +10,7 @@ import * as React from 'react';
  *
  * @default Renders an `a` root; pass `render` for framework Link composition.
  */
-export type ButtonLinkProps = Omit<React.ComponentPropsWithRef<'a'>, 'type'> & IntrinsicViraProps & {
+export type ButtonLinkProps = Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
     /**
      * Replaces the default `a` root using Base UI render semantics (e.g. Next.js `Link`).
      *

package/dist/components/button/button-link.js

@@ -1,4 +1,3 @@
-import { extractIntrinsicViraProps } from "../../core/props/intrinsic-vira-props.js";
 import { ButtonChromeChildren, getButtonChromeRootAttrs } from "./button-chrome.js";
 import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
@@ -7,14 +6,12 @@ import "react";
 var ButtonLink = ({ children, className, disabled = false, addon, addonPosition = "start", loading = false, pill = false, size = "medium", variant = "primary", render, ref, onClick, ...otherProps }) => {
 	const isDisabled = disabled || loading;
 	const isIconOnly = Boolean(addon) && (children == null || children === "");
-	const { componentProps, intrinsicAttributes } = extractIntrinsicViraProps(otherProps);
 	return useRender({
 		defaultTagName: "a",
 		render,
 		ref,
 		props: {
-			...componentProps,
-			...intrinsicAttributes,
+			...otherProps,
 			...getButtonChromeRootAttrs({
 				addon,
 				addonPosition,

package/dist/components/button/button.d.ts

@@ -1,6 +1,5 @@
 import { Button as PrimitiveButton } from '@base-ui/react/button';
 import { ButtonAddonPosition, ButtonSize, ButtonVariant } from './button-chrome';
-import { IntrinsicViraProps } from '../../core/props/intrinsic-vira-props';
 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 ButtonProps = PrimitiveButton.Props & IntrinsicViraProps & {
+export type ButtonProps = PrimitiveButton.Props & {
     /**
      * Controls the visual button size.
      *

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