@viraui/react 2026.7.0-next.0 → 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,10 +152,16 @@
       "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 Root.",
+      "summary": "Field-wrapped one-time code slots. Default slots compose Textfield controlOnly; one label/helper on OTPField.",
       "agentDocs": "./specs/components/otp-field/meta.xml"
     },
     {

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

@@ -14,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/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.d.ts

@@ -12,76 +12,76 @@ export type BeamColor = 'primary' | ThemeTypes['highlight'] | 'colorful';
  *
  * Motion/geometry follow upstream BorderBeam (MIT); colors and radius stay Vira.
  *
- * @default Beam-owned props use the defaults below; `radius` keeps Surface defaults when omitted.
+ * @defaultValue Beam-owned props use the defaults below; `radius` keeps Surface defaults when omitted.
  */
 export type BeamProps = Omit<React.ComponentProps<'div'>, 'color'> & Pick<SurfaceProps, 'radius'> & {
     /**
      * Effect family: rotating border, bottom line travel, or pulse breathe.
      *
-     * @default 'border'
+     * @defaultValue 'border'
      */
     variant?: BeamVariant;
     /**
      * Size preset (`s` compact / `m` card). Applies to `border` geometry and
      * `pulse-inside` inner glow band. Ignored for `line` and `pulse-outside`.
      *
-     * @default 'm'
+     * @defaultValue 'm'
      */
     size?: BeamSize;
     /**
      * Beam color: `primary` → `--global-primary`, a highlight token name → `--highlight-*`,
      * or `colorful` upstream neon multi-stop palette.
      *
-     * @default 'primary'
+     * @defaultValue 'primary'
      */
     color?: BeamColor;
     /**
      * Whether the animation is logically on (fade in/out when toggled).
      *
-     * @default true
+     * @defaultValue true
      */
     animate?: boolean;
     /**
      * CSS time string for spin / travel / pulse period scaling.
      *
-     * @default variant-specific (`1.96s` border, `3.1s` line, `2.3s` pulse)
+     * @defaultValue variant-specific (`1.96s` border, `3.1s` line, `2.3s` pulse)
      */
     duration?: string;
     /**
      * Overall strength/opacity of beam layers (0–1). Does not affect children.
      *
-     * @default 1
+     * @defaultValue 1
      */
     strength?: number;
     /**
      * Brightness filter multiplier for glow layers.
      *
-     * @default `1.9` pulse-outside, `0.75` pulse-inside, else `1.3` (upstream dark presets)
+     * @defaultValue `1.9` pulse-outside, `0.75` pulse-inside, else `1.3` (upstream dark presets)
      */
     brightness?: number;
     /**
      * Saturation filter multiplier for glow layers.
      *
-     * @default 1.2
+     * @defaultValue 1.2
      */
     saturation?: number;
     /**
      * Hue-rotate range for the CSS hue-shift animation (degrees, unitless number).
      * Line variant caps at 13.
      *
-     * @default 30
+     * @defaultValue 30
      */
     hueRange?: number;
     /**
      * Disables hue-shift / pulse hue drift so token colors stay fixed.
      *
-     * @default `true` when `color` is not `colorful`; `false` for `colorful`
+     * @defaultValue `true` when `color` is not `colorful`; `false` for `colorful`
      */
     staticColors?: boolean;
     /**
      * Shrinks the root to fit its content (`max-width: fit-content`).
      *
-     * @default false
+     * @defaultValue false
      */
     fitContent?: boolean;
     /**

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

@@ -6,19 +6,19 @@ import type * as React from 'react';
  * Includes standard `div` attributes such as `children`, `id`, `className`, and event handlers,
  * plus Vira-owned inline bleed controls.
  *
- * @default Native div pass-through props keep React defaults.
+ * @defaultValue Native div pass-through props keep React defaults.
  */
 export type BleedProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Sets the inline bleed amount using a Vira space token.
      *
-     * @default No bleed is applied.
+     * @defaultValue No bleed is applied.
      */
     amount?: ThemeTypes['space'];
     /**
      * Bleeds content to the viewport edges and ignores `amount`.
      *
-     * @default false
+     * @defaultValue false
      */
     full?: boolean;
 };

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

@@ -8,7 +8,7 @@ import * as React from 'react';
  * Native link root with Button visual chrome. Use for navigation; do not use
  * `Button` with `render={<a />}` (Base UI enforces button semantics).
  *
- * @default Renders an `a` root; pass `render` for framework Link composition.
+ * @defaultValue Renders an `a` root; pass `render` for framework Link composition.
  */
 export type ButtonLinkProps = Omit<React.ComponentPropsWithRef<'a'>, 'type' | 'disabled'> & {
     /**

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

@@ -10,7 +10,7 @@ export type ButtonAddonPosition = 'start' | 'end';
  * Includes Base UI button props such as `children`, `disabled`, and event handlers,
  * plus Vira-owned `size` and `variant` options documented below.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type ButtonProps = PrimitiveButton.Props & {
     /**

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

@@ -6,7 +6,7 @@ import type * as React from 'react';
  * Thin wrapper around Base UI `CheckboxGroup` with default option spacing.
  * Compose with `Field.Root` and `Fieldset` for group labels, validation, and copy.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type CheckboxGroupProps = CheckboxGroupPrimitive.Props;
 export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;