@viraui/react 2026.6.5 → 2026.7.0-next.1

package/dist/catalog.json

@@ -86,6 +86,12 @@
       "summary": "Compound drawer sheet with `Dialog.Trigger`, `Dialog.Sheet`, `Dialog.Close`, and Base UI pass-through `Dialog.Provider`, `Dialog.Indent`, and `Dialog.IndentBackground` for app-shell indent effects.",
       "agentDocs": "./specs/components/dialog/meta.xml"
     },
+    {
+      "id": "disclosure",
+      "name": "Disclosure",
+      "summary": "Single-section expand/collapse wrapping Base UI Collapsible. Default Trigger is Surface with render → Collapsible Trigger; Panel is a height motion shell with no default content padding. Use Accordion for multi-item lists.",
+      "agentDocs": "./specs/components/disclosure/meta.xml"
+    },
     {
       "id": "elevator",
       "name": "Elevator",
@@ -146,6 +152,18 @@
       "summary": "Shows a determinate metric in a compact horizontal track for static capacity, level, or score values.",
       "agentDocs": "./specs/components/meter/meta.xml"
     },
+    {
+      "id": "number-field",
+      "name": "NumberField",
+      "summary": "Single public NumberField with Field chrome, internal IconButton steppers, and optional label scrub. Group / Decrement / Increment / ScrubArea stay internal.",
+      "agentDocs": "./specs/components/number-field/meta.xml"
+    },
+    {
+      "id": "otp-field",
+      "name": "OTPField",
+      "summary": "Field-wrapped one-time code slots. Default slots compose Textfield controlOnly; one label/helper on OTPField.",
+      "agentDocs": "./specs/components/otp-field/meta.xml"
+    },
     {
       "id": "popover",
       "name": "Popover",
@@ -158,6 +176,12 @@
       "summary": "Decorative stacked backdrop-filter overlay that ramps blur from one edge toward the opposite edge. GPU/memory-heavy — use sparingly; prefer one focal instance per view.",
       "agentDocs": "./specs/components/progressive-blur/meta.xml"
     },
+    {
+      "id": "prose",
+      "name": "Prose",
+      "summary": "Grouping region that applies heading-aware em rhythm to direct document blocks.",
+      "agentDocs": "./specs/components/prose/meta.xml"
+    },
     {
       "id": "radio",
       "name": "Radio",

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

@@ -8,19 +8,19 @@ import type * as React from 'react';
  * Wraps Base UI accordion item parts with optional Surface layout and panel height animation.
  * Island separation between open/closed blocks is controlled by the root `Accordion` `islands` prop for surface items.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type AccordionItemProps = AccordionItem.Props & {
     /**
      * Visible trigger label rendered inside the accordion header button.
      *
-     * @default No trigger label is rendered.
+     * @defaultValue No trigger label is rendered.
      */
     trigger: React.ReactNode;
     /**
      * Panel content revealed when the item is open.
      *
-     * @default No panel content is rendered.
+     * @defaultValue No panel content is rendered.
      */
     children?: React.ReactNode;
     /**
@@ -28,45 +28,45 @@ export type AccordionItemProps = AccordionItem.Props & {
      * When `false`, renders without `Surface` so consumers can insert `Separator` between items;
      * island styling is skipped for that item.
      *
-     * @default true
+     * @defaultValue true
      */
     useSurface?: boolean;
     /**
      * Side of the trigger label where the expand/collapse icon is rendered.
      *
-     * @default end
+     * @defaultValue end
      */
     iconPosition?: 'start' | 'end';
     /**
      * Decorative icon shown when the item is closed.
      *
-     * @default Built-in Plus chrome SVG at size 16
+     * @defaultValue Built-in Plus chrome SVG at size 16
      */
     iconClosed?: React.ReactNode;
     /**
      * Decorative icon shown when the item is open.
      *
-     * @default Built-in Minus chrome SVG at size 16
+     * @defaultValue Built-in Minus chrome SVG at size 16
      */
     iconOpen?: React.ReactNode;
     /**
      * Contrast border side(s) forwarded to the wrapping `Surface` when `useSurface` is `true`.
      * Pass a single side or a list (e.g. `['bottom', 'left']`). Omit for no border.
      *
-     * @default No border.
+     * @defaultValue No border.
      */
     border?: SurfaceProps['border'];
     /**
      * Resting background for the item card, forwarded to the wrapping `Surface` when `useSurface` is `true`.
      * Omit for no background (`Surface` leaves `--vui-surface-background` as `none`).
      *
-     * @default No background.
+     * @defaultValue No background.
      */
     color?: SurfaceProps['color'];
     /**
      * Corner radius token for the wrapping `Surface` island edges when `useSurface` is `true`.
      *
-     * @default medium
+     * @defaultValue medium
      */
     radius?: ThemeTypes['radius'];
 };

package/dist/components/accordion/accordion.d.ts

@@ -7,7 +7,7 @@ import type * as React from 'react';
  * Includes Base UI accordion root props such as `value`, `defaultValue`, `multiple`,
  * and `onValueChange`.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type AccordionProps = AccordionRoot.Props & {
     /**
@@ -15,7 +15,7 @@ export type AccordionProps = AccordionRoot.Props & {
      * When `false`, blocks stay attached with corner radius only on the first and last items.
      * Applies only to items with `useSurface`.
      *
-     * @default true
+     * @defaultValue true
      */
     islands?: boolean;
 };

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

@@ -7,7 +7,7 @@ export type AnnotateSide = 'top-start' | 'top' | 'top-end' | 'end' | 'bottom-end
  * 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.
+ * @defaultValue Native span pass-through props keep React defaults.
  */
 export type AnnotateProps = React.ComponentPropsWithRef<'span'> & {
     /**
@@ -15,86 +15,86 @@ export type AnnotateProps = React.ComponentPropsWithRef<'span'> & {
      *
      * Do not put critical information here — assistive tech does not announce the note.
      *
-     * @default No note; arrow and label stay hidden.
+     * @defaultValue No note; arrow and label stay hidden.
      */
     note?: string;
     /**
      * Places the decorative arrow and label relative to the wrapped content.
      *
-     * @default 'top'
+     * @defaultValue 'top'
      */
     side?: AnnotateSide;
     /**
      * Highlight token driving arrow, label, and optional mark color via `--vui-annotate-color`.
      *
-     * @default `var(--global-foreground)` when omitted
+     * @defaultValue `var(--global-foreground)` when omitted
      */
     color?: ThemeTypes['highlight'];
     /**
      * When true, applies a highlighter mark behind the wrapped content.
      *
-     * @default false
+     * @defaultValue false
      */
     mark?: boolean;
     /**
      * Horizontal offset for the arrow pseudo (`--vui-annotate-arrow-x`).
      *
-     * @default `0px`
+     * @defaultValue `0px`
      */
     arrowOffsetX?: string;
     /**
      * Vertical offset for the arrow pseudo (`--vui-annotate-arrow-y`).
      *
-     * @default `0px`
+     * @defaultValue `0px`
      */
     arrowOffsetY?: string;
     /**
      * Horizontal nudge for the note via translateX on the inner nudge wrapper.
      *
-     * @default `0px`
+     * @defaultValue `0px`
      */
     textOffsetX?: string;
     /**
      * Vertical nudge for the note via translateY on the inner nudge wrapper.
      *
-     * @default `0px`
+     * @defaultValue `0px`
      */
     textOffsetY?: string;
     /**
      * Rotation for the label (and composed transforms) via `--vui-annotate-rotate`.
      *
-     * @default `-4deg`
+     * @defaultValue `-4deg`
      */
     rotate?: string;
     /**
      * Gap between the target and the arrow via `--vui-annotate-target-gap`.
      *
-     * @default `var(--space-s)`
+     * @defaultValue `var(--space-s)`
      */
     targetGap?: string;
     /**
      * Gap between arrow and label on all sides via `--vui-annotate-label-gap`.
      *
-     * @default `var(--space-xs)`
+     * @defaultValue `var(--space-xs)`
      */
     labelGap?: string;
     /**
      * Max width for the label pseudo via `--vui-annotate-label-max-width`.
      *
-     * @default `300px`
+     * @defaultValue `300px`
      */
     labelMaxWidth?: string;
     /**
      * Stacking order for arrow and note via `--vui-annotate-z-index`.
      * Same value on both parts.
      *
-     * @default undefined (`auto`)
+     * @defaultValue undefined (`auto`)
      */
     zIndex?: React.CSSProperties['zIndex'];
     /**
      * Text alignment for the note via `--vui-annotate-text-align`.
      *
-     * @default undefined (`start`)
+     * @defaultValue undefined (`start`)
      */
     textAlign?: React.CSSProperties['textAlign'];
 };

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

@@ -4,19 +4,19 @@ import type * as React from 'react';
 /**
  * Public Autocomplete.Item props.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type AutocompleteItemProps = AutocompleteItem.Props & {
     /**
      * Decorative leading node rendered before the item label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * Vertical alignment of the addon relative to the item label row.
      *
-     * @default 'center'
+     * @defaultValue 'center'
      */
     addonAlign?: StackProps['vAlign'];
 };

package/dist/components/autocomplete/autocomplete.d.ts

@@ -11,70 +11,70 @@ import type * as React from 'react';
  * `mode`, `filter`, `limit`, and `autoHighlight`, plus optional field copy and Textfield
  * control-group chrome (`startAddon` / `endAddon` / `fitContent`).
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type AutocompleteProps = Omit<AutocompleteRoot.Props<any>, 'children'> & Omit<FieldRoot.Props, 'ref' | 'children'> & {
     /**
      * Visible label rendered with shared internal `FieldLabel`.
      *
-     * @default No label is rendered.
+     * @defaultValue No label is rendered.
      */
     label?: React.ReactNode;
     /**
      * Helper copy rendered with `Field.Description` and `Text` while the field is valid.
      *
-     * @default No description is rendered.
+     * @defaultValue No description is rendered.
      */
     description?: React.ReactNode;
     /**
      * Error copy rendered with `Field.Error` and `Text` in the same slot as `description`.
      * Replaces description while the field is invalid and dirty.
      *
-     * @default No static error copy is rendered.
+     * @defaultValue No static error copy is rendered.
      */
     error?: React.ReactNode;
     /**
      * Leading decoration (prefix text, icon). Not a second field control.
      *
-     * @default No start addon is rendered.
+     * @defaultValue No start addon is rendered.
      */
     startAddon?: React.ReactNode;
     /**
      * Trailing decoration (icon, button). Buttons must use `type="button"`.
      *
-     * @default No end addon is rendered.
+     * @defaultValue No end addon is rendered.
      */
     endAddon?: React.ReactNode;
     /**
      * When `true`, sets `field-sizing: content` so the control grows inline with its value.
      * Block chrome stays `var(--vui-autocomplete-input-height)`. Omitted / `false` keeps the browser fixed default.
      *
-     * @default undefined (browser fixed)
+     * @defaultValue undefined (browser fixed)
      */
     fitContent?: BasicInputProps['fitContent'];
     /**
      * Placeholder text shown in the input when empty.
      *
-     * @default No placeholder is rendered.
+     * @defaultValue No placeholder is rendered.
      */
     placeholder?: string;
     /**
      * Content rendered inside baked `Autocomplete.Empty` when the filtered list has no items.
      *
-     * @default No empty copy is rendered.
+     * @defaultValue No empty copy is rendered.
      */
     empty?: React.ReactNode;
     /**
      * Content rendered inside baked `Autocomplete.Status` (async / limit messaging).
      * Keep the slot mounted; update children when status changes.
      *
-     * @default No status copy is rendered.
+     * @defaultValue No status copy is rendered.
      */
     status?: React.ReactNode;
     /**
      * Ref forwarded to the autocomplete input.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLInputElement>;
     /**
@@ -82,7 +82,7 @@ export type AutocompleteProps = Omit<AutocompleteRoot.Props<any>, 'children'> &
      * Omit for Base UI default (`document.body` from the module window —
      * iframe hosts must pass the iframe document body explicitly).
      *
-     * @default Base UI FloatingPortal resolution
+     * @defaultValue Base UI FloatingPortal resolution
      */
     container?: React.ComponentProps<typeof PrimitiveAutocomplete.Portal>['container'];
     /**

package/dist/components/autocomplete/autocomplete.js

@@ -10,8 +10,8 @@ import { Stack } from "../stack/stack.js";
 import { AutocompleteGroup } from "./autocomplete-group.js";
 import autocomplete_module_default from "./autocomplete.module.js";
 import { AutocompleteItemPart } from "./autocomplete-item.js";
-import { Elevator } from "../elevator/elevator.js";
 import { Surface } from "../surface/surface.js";
+import { Elevator } from "../elevator/elevator.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Autocomplete } from "@base-ui/react/autocomplete";
 import { Field } from "@base-ui/react/field";

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

@@ -5,37 +5,37 @@ import type * as React from 'react';
  * Includes standard `span` attributes such as `id`, `title`, ARIA props, and event handlers,
  * plus Vira-owned image, fallback, and size controls.
  *
- * @default Native span pass-through props keep React defaults.
+ * @defaultValue Native span pass-through props keep React defaults.
  */
 export type AvatarProps = React.ComponentPropsWithRef<'span'> & {
     /**
      * Supplies the avatar image source URL.
      *
-     * @default No default; when omitted the fallback renders.
+     * @defaultValue No default; when omitted the fallback renders.
      */
     src?: string;
     /**
      * Supplies alternative text for the avatar image.
      *
-     * @default ''
+     * @defaultValue ''
      */
     alt?: string;
     /**
      * Supplies the content shown when the image is absent or fails to load.
      *
-     * @default No default; consumer must provide a value.
+     * @defaultValue No default; consumer must provide a value.
      */
     fallback: React.ReactNode;
     /**
      * Selects the rendered avatar footprint.
      *
-     * @default 's'
+     * @defaultValue 's'
      */
     size?: 'xs' | 's' | 'm' | 'l';
     /**
      * Ref forwarded to the rendered avatar root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLSpanElement>;
 };

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

@@ -7,25 +7,25 @@ type AvatarGroupAvatarProps = Omit<AvatarProps, 'size' | 'ref'>;
  * Includes standard `div` attributes such as `id`, `role`, `title`, data attributes, and event handlers,
  * plus Vira-owned avatar composition controls.
  *
- * @default Native div pass-through props keep React defaults.
+ * @defaultValue Native div pass-through props keep React defaults.
  */
 export type AvatarGroupProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Supplies the avatar payloads rendered by the group in DOM order.
      *
-     * @default No default; consumers must provide an array.
+     * @defaultValue No default; consumers must provide an array.
      */
     avatars: AvatarGroupAvatarProps[];
     /**
      * Selects the shared avatar footprint for every rendered avatar.
      *
-     * @default 's'
+     * @defaultValue 's'
      */
     size?: AvatarProps['size'];
     /**
      * Chooses whether avatars overlap across the inline or block axis.
      *
-     * @default 'horizontal'
+     * @defaultValue 'horizontal'
      */
     direction?: 'horizontal' | 'vertical';
     /**
@@ -33,13 +33,13 @@ export type AvatarGroupProps = React.ComponentPropsWithRef<'div'> & {
      *
      * Omitted, zero, and negative values are ignored.
      *
-     * @default No truncation.
+     * @defaultValue No truncation.
      */
     maxVisible?: number;
     /**
      * Supplies the content rendered inside the optional overflow pill when truncation is active.
      *
-     * @default No overflow pill content.
+     * @defaultValue No overflow pill content.
      */
     overflowText?: React.ReactNode;
 };

package/dist/components/badge/badge.d.ts

@@ -7,32 +7,32 @@ export type BadgePosition = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-sta
  * Includes standard `div` attributes such as `children`, `id`, `className`, and event handlers,
  * plus Vira-owned decorative status-dot controls.
  *
- * @default Native div pass-through props keep React defaults.
+ * @defaultValue Native div pass-through props keep React defaults.
  */
 export type BadgeProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Diameter of the status dot via `--vui-badge-size`.
      *
-     * @default '0.5rem'
+     * @defaultValue '0.5rem'
      */
     size?: string;
     /**
      * Highlight token driving the status-dot color via `--vui-badge-color`.
      *
-     * @default `var(--global-primary)` when omitted
+     * @defaultValue `var(--global-primary)` when omitted
      */
     color?: ThemeTypes['highlight'];
     /**
      * When true, shows the decorative status dot and applies the radial mask cutout.
      * Enter: hole expands, then the dot scales in. Exit: reverse (dot then hole).
      *
-     * @default false
+     * @defaultValue false
      */
     show?: boolean;
     /**
      * Places the status dot on a corner of the wrapped content.
      *
-     * @default 'top-end'
+     * @defaultValue 'top-end'
      */
     position?: BadgePosition;
 };

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

@@ -5,7 +5,8 @@ import * as React from 'react';
  *
  * Merges `BasicInput` and `Control` classes onto one field control surface.
  * With `render={<Input />}` (Base UI input), renders `Input` only — it already wraps
- * `Field.Control`. With `render={<textarea />}`, renders `Field.Control` + native textarea.
+ * `Field.Control`. With a component `render` (OTP Input), clones that element (no Field.Control).
+ * With `render={<textarea />}`, renders `Field.Control` + native textarea.
  */
 export type BasicInputProps = Omit<Field.Control.Props, 'ref'> & {
     ref?: React.Ref<HTMLElement> | undefined;
@@ -13,7 +14,7 @@ export type BasicInputProps = Omit<Field.Control.Props, 'ref'> & {
      * 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)
+     * @defaultValue undefined (browser fixed)
      */
     fitContent?: boolean;
 };

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

@@ -7,6 +7,7 @@ import { Input } from "@base-ui/react/input";
 import * as React from "react";
 //#region src/components/basic-input/basic-input.tsx
 var usesInputPrimitiveRender = (render) => React.isValidElement(render) && render.type === Input;
+var usesComponentRender = (render) => React.isValidElement(render) && typeof render.type !== "string";
 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" } };
@@ -16,6 +17,12 @@ var BasicInput = React.forwardRef(function BasicInput({ className, render, fitCo
 		...sizingProps,
 		...otherProps
 	});
+	if (usesComponentRender(render)) return React.cloneElement(render, {
+		...otherProps,
+		...sizingProps,
+		className: clsx(mergedClassName, render.props.className),
+		ref
+	});
 	return /* @__PURE__ */ jsx(Field.Control, {
 		ref,
 		className: mergedClassName,

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

@@ -4,13 +4,13 @@ export type InputControlGroupProps = {
     /**
      * Optional content rendered before the control (for example a currency prefix).
      *
-     * @default No start addon is rendered.
+     * @defaultValue No start addon is rendered.
      */
     startAddon?: React.ReactNode;
     /**
      * Optional content rendered after the control (for example an action button).
      *
-     * @default No end addon is rendered.
+     * @defaultValue No end addon is rendered.
      */
     endAddon?: React.ReactNode;
     /**

package/dist/components/beam/beam-pulse-driver.d.ts

@@ -1,3 +1,4 @@
+/** ~30fps shared pulse driver. Oscillator math from BorderBeam (MIT). */
 export type BeamPulseOscillator = {
     prop: string;
     a: number;

package/dist/components/beam/beam-pulse-driver.js

@@ -206,13 +206,13 @@ var frame = (ts) => {
 	}
 };
 var startLoop = () => {
-	if (rafId == null) {
+	if (rafId === null) {
 		lastFrame = 0;
 		rafId = requestAnimationFrame(frame);
 	}
 };
 var stopLoopIfIdle = () => {
-	if (instances.size === 0 && rafId != null) {
+	if (instances.size === 0 && rafId !== null) {
 		cancelAnimationFrame(rafId);
 		rafId = null;
 	}