@viraui/react 1.0.10 → 1.0.12

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 arrow and handwritten label that wraps inline content with optional highlighter mark, positioned via CSS anchor positioning.",
+      "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/accordion/accordion.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Accordion",
+  "structure": "<Accordion>\n  <Accordion.Item trigger=\"…\">…</Accordion.Item>\n</Accordion>",
   "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and background on open items.",
   "whenToUse": [
     "Progressive disclosure for related content sections in one surface",

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}@property --vui-annotate-z-index{syntax:"*";inherits:true;initial-value:auto}@property --vui-annotate-text-align{syntax:"*";inherits:true;initial-value:start}.viraui__annotate-module__Annotate_7C36U{--vui-annotate-color:var(--global-foreground);--vui-annotate-target-gap:var(--space-small);--vui-annotate-label-gap:var(--space-x-small);--_annotate-tail-x:23px;--_annotate-tail-y:4px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap));anchor-name:--vui-annotate-target;anchor-scope:--vui-annotate-target,--vui-annotate-arrow;display:inline-block;overflow:visible;border-radius:var(--radius-x-small)}.viraui__annotate-module__Arrow_T4B-6{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-target;anchor-name:--vui-annotate-arrow;width:46px;height:38px;transform:translate(var(--vui-annotate-arrow-x),var(--vui-annotate-arrow-y));transform-origin:50% 50%;mask:var(--_annotate-arrow-mask) center /contain no-repeat;background:var(--vui-annotate-color);pointer-events:none}.viraui__annotate-module__Note_8UW-R{position:absolute;z-index:var(--vui-annotate-z-index);position-anchor:--vui-annotate-arrow;left:calc(anchor(left) + var(--_annotate-tail-x));top:calc(anchor(top) + var(--_annotate-tail-y));width:max-content;max-width:var(--vui-annotate-label-max-width);transform:translate(calc(var(--_annotate-note-align-x) + var(--vui-annotate-text-x)),calc(var(--_annotate-note-align-y) + var(--vui-annotate-text-y))) rotate(var(--vui-annotate-rotate));font-family:Segoe Print,Chalkboard SE,Marker Felt,Dancing Script,sans-serif,system-ui;font-size:.95rem;line-height:1.05;color:var(--vui-annotate-color);text-align:var(--vui-annotate-text-align);white-space:normal;pointer-events:none}.viraui__annotate-module__Annotate_7C36U[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%)}.viraui__annotate-module__Annotate_7C36U[data-side=top]{--_annotate-tail-x:23px;--_annotate-tail-y:4px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top] .viraui__annotate-module__Arrow_T4B-6{--_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");position-area:block-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-start]{--_annotate-tail-x:6px;--_annotate-tail-y:6px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-start] .viraui__annotate-module__Arrow_T4B-6{--_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");position-area:block-start inline-start;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=top-end]{--_annotate-tail-x:40px;--_annotate-tail-y:6px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:calc(-100% - var(--vui-annotate-label-gap))}.viraui__annotate-module__Annotate_7C36U[data-side=top-end] .viraui__annotate-module__Arrow_T4B-6{--_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");position-area:block-start inline-end;margin-bottom:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom]{--_annotate-tail-x:23px;--_annotate-tail-y:35px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom] .viraui__annotate-module__Arrow_T4B-6{--_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");position-area:block-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start]{--_annotate-tail-x:6px;--_annotate-tail-y:32px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-start] .viraui__annotate-module__Arrow_T4B-6{--_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");position-area:block-end inline-start;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end]{--_annotate-tail-x:40px;--_annotate-tail-y:32px;--_annotate-note-align-x:-50%;--_annotate-note-align-y:var(--vui-annotate-label-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=bottom-end] .viraui__annotate-module__Arrow_T4B-6{--_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");position-area:block-end inline-end;margin-top:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=start]{--_annotate-tail-x:4px;--_annotate-tail-y:19px;--_annotate-note-align-x:calc(-100% - var(--vui-annotate-label-gap));--_annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=start] .viraui__annotate-module__Arrow_T4B-6{--_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");position-area:inline-start;margin-inline-end:var(--vui-annotate-target-gap)}.viraui__annotate-module__Annotate_7C36U[data-side=end]{--_annotate-tail-x:43px;--_annotate-tail-y:19px;--_annotate-note-align-x:var(--vui-annotate-label-gap);--_annotate-note-align-y:-50%}.viraui__annotate-module__Annotate_7C36U[data-side=end] .viraui__annotate-module__Arrow_T4B-6{--_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");position-area:inline-end;margin-inline-start:var(--vui-annotate-target-gap)}}

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

@@ -0,0 +1,101 @@
+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 in a presentational note span (not announced).
+     *
+     * Do not put critical information here — assistive tech does not announce the note.
+     *
+     * @default No note; arrow and label 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 `var(--global-foreground)` when omitted
+     */
+    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;
+    /**
+     * Stacking order for arrow and note via `--vui-annotate-z-index`.
+     * Same value on both parts.
+     *
+     * @default undefined (`auto`)
+     */
+    zIndex?: React.CSSProperties['zIndex'];
+    /**
+     * Text alignment for the note via `--vui-annotate-text-align`.
+     *
+     * @default undefined (`start`)
+     */
+    textAlign?: React.CSSProperties['textAlign'];
+};
+export declare const Annotate: React.FC<AnnotateProps>;

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

@@ -0,0 +1,121 @@
+{
+  "name": "Annotate",
+  "structure": "<Annotate note=\"…\">…<span aria-hidden className={Arrow} /><span aria-hidden className={Note}>{note}</span></Annotate>",
+  "summary": "Decorative arrow and handwritten label that wraps inline content with optional highlighter mark, positioned via CSS anchor positioning.",
+  "whenToUse": [
+    "Call out a word or phrase in marketing, docs, or onboarding copy",
+    "Add a playful visual annotation without interactive chrome",
+    "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 note are presentational spans with aria-hidden — 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",
+    "Adding position:relative on Annotate — it breaks CSS anchor position-area placement"
+  ],
+  "related": ["Text", "Title", "Tooltip", "Chip"],
+  "properties": {
+    "react": {
+      "color": {
+        "description": "Highlight token driving arrow, label, and optional mark color via --vui-annotate-color. When omitted, falls back to var(--global-foreground).",
+        "refCss": "color"
+      },
+      "arrowOffsetX": {
+        "description": "Horizontal offset for the arrow part.",
+        "refCss": "arrow-x"
+      },
+      "arrowOffsetY": {
+        "description": "Vertical offset for the arrow part.",
+        "refCss": "arrow-y"
+      },
+      "textOffsetX": {
+        "description": "Horizontal offset for the note part.",
+        "refCss": "text-x"
+      },
+      "textOffsetY": {
+        "description": "Vertical offset for the note part.",
+        "refCss": "text-y"
+      },
+      "rotate": {
+        "description": "Rotation for the note via --vui-annotate-rotate.",
+        "refCss": "rotate"
+      },
+      "targetGap": {
+        "description": "Gap between the target and the arrow.",
+        "refCss": "target-gap"
+      },
+      "labelGap": {
+        "description": "Gap between arrow and note on all sides.",
+        "refCss": "label-gap"
+      },
+      "labelMaxWidth": {
+        "description": "Max width for the note part.",
+        "refCss": "label-max-width"
+      },
+      "zIndex": {
+        "description": "Stacking order for arrow and note via --vui-annotate-z-index. Same value on both. When omitted, auto.",
+        "refCss": "z-index"
+      },
+      "textAlign": {
+        "description": "Text alignment for the note via --vui-annotate-text-align. When omitted, start.",
+        "refCss": "text-align"
+      }
+    },
+    "css": {
+      "color": {
+        "description": "Arrow, note, and mark accent color. Defaults to var(--global-foreground).",
+        "refReact": "color"
+      },
+      "arrow-x": {
+        "description": "Horizontal arrow offset.",
+        "refReact": "arrowOffsetX"
+      },
+      "arrow-y": {
+        "description": "Vertical arrow offset.",
+        "refReact": "arrowOffsetY"
+      },
+      "text-x": {
+        "description": "Horizontal note offset.",
+        "refReact": "textOffsetX"
+      },
+      "text-y": {
+        "description": "Vertical note offset.",
+        "refReact": "textOffsetY"
+      },
+      "rotate": {
+        "description": "Note rotation angle.",
+        "refReact": "rotate"
+      },
+      "target-gap": {
+        "description": "Gap between the target and the arrow.",
+        "refReact": "targetGap"
+      },
+      "label-gap": {
+        "description": "Gap between arrow and note on all sides.",
+        "refReact": "labelGap"
+      },
+      "label-max-width": {
+        "description": "Max width for the note part.",
+        "refReact": "labelMaxWidth"
+      },
+      "z-index": {
+        "description": "Stacking order for arrow and note. Defaults to auto.",
+        "refReact": "zIndex"
+      },
+      "text-align": {
+        "description": "Text alignment for the note. Defaults to start.",
+        "refReact": "textAlign"
+      }
+    }
+  }
+}

package/dist/components/annotate/annotate.js

@@ -0,0 +1,39 @@
+import './annotate.css';
+import { clsx } from "../../core/clsx.js";
+import annotate_module_default from "./annotate.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/annotate/annotate.tsx
+var Annotate = ({ arrowOffsetX, arrowOffsetY, children, className, color, labelGap, labelMaxWidth = "300px", mark = false, note, ref, rotate, side = "top", style, targetGap, textAlign, textOffsetX, textOffsetY, zIndex, ...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 },
+		...zIndex != null && { "--vui-annotate-z-index": zIndex },
+		...textAlign && { "--vui-annotate-text-align": textAlign },
+		...style
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		...otherProps,
+		ref,
+		className: clsx(annotate_module_default.Annotate, className),
+		"data-mark": mark ? "true" : void 0,
+		"data-side": side,
+		style: dynamicStyle,
+		children: [children, note && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: annotate_module_default.Arrow
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: annotate_module_default.Note,
+			children: note
+		})] })]
+	});
+};
+//#endregion
+export { Annotate };

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

@@ -0,0 +1,11 @@
+//#region src/components/annotate/annotate.module.css
+var Annotate = "viraui__annotate-module__Annotate_7C36U";
+var Arrow = "viraui__annotate-module__Arrow_T4B-6";
+var Note = "viraui__annotate-module__Note_8UW-R";
+var annotate_module_default = {
+	Annotate,
+	Arrow,
+	Note
+};
+//#endregion
+export { Annotate, Arrow, Note, 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.guide.json

@@ -1,5 +1,6 @@
 {
   "name": "Avatar",
+  "structure": "<Avatar fallback=\"AB\" />",
   "summary": "Circular identity image or fallback for users, entities, or profile chips.",
   "whenToUse": [
     "Show a user or entity photo with text or image fallback",

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

@@ -1,5 +1,6 @@
 {
   "name": "AvatarGroup",
+  "structure": "<AvatarGroup avatars={[{ fallback: \"AB\" }]} />",
   "summary": "Overlapping avatar stack with shared sizing, directional layout, and an optional overflow pill.",
   "whenToUse": [
     "Show a compact list of people or entities with consistent avatar sizing",

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

@@ -1,5 +1,6 @@
 {
   "name": "Bleed",
+  "structure": "<Bleed>…</Bleed>",
   "summary": "Layout utility that pulls content past inline padding using negative margins or full viewport bleed.",
   "whenToUse": [
     "Edge-to-edge media or dividers inside padded Surface or Stack containers",

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

@@ -1,5 +1,6 @@
 {
   "name": "ButtonLink",
+  "structure": "<ButtonLink href=\"#\">Save</ButtonLink>",
   "summary": "Navigation link that shares Button visual chrome (--vui-button-* CSS) and default a root with optional render for framework Link.",
   "whenToUse": [
     "Actions that navigate (href or router Link) but should look like Button",

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

@@ -1,5 +1,6 @@
 {
   "name": "Button",
+  "structure": "<Button>Save</Button>",
   "summary": "Primary action control with size, variant, optional addon, optional pill shape, and loading state.",
   "whenToUse": [
     "Labeled actions with text and optional leading or trailing addon",