@viraui/react 2026.6.5 → 2026.7.0-next.1

package/dist/components/select/select-indicator-slot.d.ts

@@ -5,7 +5,7 @@ export type SelectIndicatorSlotProps = {
      * When true, renders as Base UI `ItemIndicator` with `keepMounted`.
      * When false, renders an empty spacer with the same inline footprint.
      *
-     * @default false
+     * @defaultValue false
      */
     interactive?: boolean;
 };

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

@@ -4,25 +4,25 @@ import type * as React from 'react';
 /**
  * Public Select.Option props.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type SelectOptionProps = SelectItem.Props & {
     /**
      * Decorative leading node rendered before the option label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * Vertical alignment of the addon relative to the option label row.
      *
-     * @default 'center'
+     * @defaultValue 'center'
      */
     addonAlign?: StackProps['vAlign'];
     /**
      * Custom indicator node rendered when the option is selected.
      *
-     * @default Built-in Check chrome SVG at size 16
+     * @defaultValue Built-in Check chrome SVG at size 16
      */
     indicator?: React.ReactNode;
 };

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

@@ -3,7 +3,7 @@ import type * as React from 'react';
 /**
  * Public Select.Separator props.
  *
- * @default `orientation` is `'horizontal'`.
+ * @defaultValue `orientation` is `'horizontal'`.
  */
 export type SelectSeparatorProps = React.ComponentProps<typeof PrimitiveSelect.Separator>;
 export declare function SelectSeparator({ className, orientation, ...separatorProps }: SelectSeparatorProps): React.JSX.Element;

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

@@ -11,59 +11,59 @@ import type * as React from 'react';
  * and change handlers, plus optional field copy rendered with the shared Vira
  * field label/helper pattern.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'> & {
     /**
      * 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;
     /**
      * Placeholder text shown in the trigger when no value is selected.
      *
-     * @default No placeholder is rendered.
+     * @defaultValue No placeholder is rendered.
      */
     placeholder?: React.ReactNode;
     /**
      * Trigger addon rendered inside `Select.Icon`.
      * Pass any React node; use a named icon from `@viraui/icons/react` for content icons.
      *
-     * @default Built-in ChevronExpandY chrome SVG at size 16
+     * @defaultValue Built-in ChevronExpandY chrome SVG at size 16
      */
     addon?: React.ReactNode;
     /**
      * Ref forwarded to the select trigger button.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLButtonElement>;
     /**
      * When `true`, aligns the list popup width with the trigger via Base UI `alignItemWithTrigger`.
      * Prefer `false` when options use a leading `addon`.
      *
-     * @default true
+     * @defaultValue true
      */
     alignListWithTrigger?: boolean;
     /**
      * When `true`, open select locks page scroll and blocks outside pointer interaction
      * (Base UI modal). Vira defaults to non-modal so the page stays scrollable.
      *
-     * @default false
+     * @defaultValue false
      */
     modal?: boolean;
     /**
@@ -71,7 +71,7 @@ export type SelectProps = SelectRoot.Props<string> & Omit<FieldRoot.Props, 'ref'
      * 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 PrimitiveSelect.Portal>['container'];
 };

package/dist/components/select/select.js

@@ -6,8 +6,8 @@ import { Text } from "../text/text.js";
 import { FieldHelperCopy } from "../basic-input/field-helper-copy.js";
 import { FieldLabel } from "../basic-input/field-label.js";
 import { Stack } from "../stack/stack.js";
-import { Elevator } from "../elevator/elevator.js";
 import { Surface } from "../surface/surface.js";
+import { Elevator } from "../elevator/elevator.js";
 import { IconButton } from "../icon-button/icon-button.js";
 import select_module_default from "./select.module.js";
 import { SelectGroup } from "./select-group.js";

package/dist/components/separator/separator.d.ts

@@ -1,4 +1,5 @@
 import { useRender } from '@base-ui/react/use-render';
+import { StackProps } from '../stack';
 import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 type SeparatorAxisPadding = ThemeTypes['space'] | [ThemeTypes['space'] | 0, ThemeTypes['space'] | 0];
@@ -10,49 +11,55 @@ type SeparatorSize = 's' | 'm' | 'l';
  * plus Vira-owned orientation, line thickness, Stack padding, and Base UI `render` support for replacing the line root.
  * `className`, `style`, and `ref` apply to the line root only.
  *
- * @default Native pass-through props keep React defaults on the wrapper unless noted above.
+ * @defaultValue Native pass-through props keep React defaults on the wrapper unless noted above.
  */
 export type SeparatorProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> & {
     /**
      * Replaces the default `hr` line root using Base UI render semantics.
      *
-     * @default The separator renders an `hr` line root.
+     * @defaultValue The separator renders an `hr` line root.
      */
     render?: useRender.RenderProp;
     /**
      * Ref forwarded to the rendered line root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLElement>;
     /**
      * Sets the separator line direction.
      *
-     * @default 'horizontal'
+     * @defaultValue 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
     /**
      * Sets inline padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No inline padding.
+     * @defaultValue No inline padding.
      */
     hPadding?: SeparatorAxisPadding;
     /**
      * Sets block padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No block padding.
+     * @defaultValue No block padding.
      */
     vPadding?: SeparatorAxisPadding;
+    /**
+     * Caps the Stack wrapper inline size.
+     *
+     * @defaultValue No max width constraint.
+     */
+    maxWidth?: StackProps['maxWidth'];
     /**
      * Sets the line thickness preset.
      *
-     * @default 's'
+     * @defaultValue 's'
      */
     size?: SeparatorSize;
     /**
      * Sets the separator line variant through `--vui-separator-border-style`.
      *
-     * @default 'solid'
+     * @defaultValue 'solid'
      */
     variant?: React.CSSProperties['borderStyle'];
 };

package/dist/components/separator/separator.js

@@ -10,7 +10,7 @@ var separatorSizeValues = {
 	m: 2,
 	l: 3
 };
-var Separator = ({ className, hPadding, orientation = "horizontal", ref, render, size = "s", style, variant = "solid", vPadding, ...otherProps }) => {
+var Separator = ({ className, hPadding, maxWidth, orientation = "horizontal", ref, render, size = "s", style, variant = "solid", vPadding, ...otherProps }) => {
 	const dynamicStyle = {
 		"--vui-separator-size": `${separatorSizeValues[size]}px`,
 		"--vui-separator-border-style": variant,
@@ -30,6 +30,7 @@ var Separator = ({ className, hPadding, orientation = "horizontal", ref, render,
 		...otherProps,
 		direction: orientation === "vertical" ? "row" : "column",
 		hPadding,
+		maxWidth,
 		vAlign: orientation === "vertical" ? "stretch" : "initial",
 		vPadding,
 		children: line

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

@@ -5,37 +5,37 @@ import type * as React from 'react';
  * Includes standard `span` attributes such as `children`, `id`, `title`, and event handlers,
  * plus Vira-owned shimmer tuning controls.
  *
- * @default Native span pass-through props keep React defaults.
+ * @defaultValue Native span pass-through props keep React defaults.
  */
 export type ShimmerProps = React.ComponentPropsWithoutRef<'span'> & {
     /**
      * Sets the shimmer sweep duration using any valid CSS time string.
      *
-     * @default The CSS duration is `var(--duration-slowest)`.
+     * @defaultValue The CSS duration is `var(--duration-slowest)`.
      */
     duration?: string;
     /**
      * Sets the shimmer highlight spread using any valid CSS length string.
      *
-     * @default The CSS spread is `calc(3ch + var(--space-2xl))`.
+     * @defaultValue The CSS spread is `calc(3ch + var(--space-2xl))`.
      */
     spread?: string;
     /**
      * Sets the shimmer gradient angle offset using any valid CSS angle string.
      *
-     * @default The CSS angle offset is `0deg`.
+     * @defaultValue The CSS angle offset is `0deg`.
      */
     angle?: string;
     /**
      * Overrides the shimmer highlight color when relative base lightness tuning is not used.
      *
-     * @default The highlight increases base `currentColor` lightness.
+     * @defaultValue The highlight increases base `currentColor` lightness.
      */
     highlightColor?: string;
     /**
      * Ref forwarded to the rendered shimmer root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLSpanElement>;
 };

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

@@ -6,31 +6,31 @@ import type * as React from 'react';
  * Zero-layout-shift shimmer wrapper sized by hidden children. Includes standard `div`
  * pass-through props plus Vira-owned shimmer controls.
  *
- * @default Native div pass-through props keep React defaults.
+ * @defaultValue Native div pass-through props keep React defaults.
  */
 export type SkeletonOverlayProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Supplies placeholder content whose layout and dimensions define the skeleton bounding box.
      *
-     * @default No default; consumer must provide children.
+     * @defaultValue No default; consumer must provide children.
      */
     children: React.ReactNode;
     /**
      * Enables or disables the shimmer animation.
      *
-     * @default true
+     * @defaultValue true
      */
     animate?: boolean;
     /**
      * Sets the corner radius from the Vira radius token scale.
      *
-     * @default 's'
+     * @defaultValue 's'
      */
     radius?: ThemeTypes['radius'];
     /**
      * Sets the shimmer sweep duration from the Vira duration token scale.
      *
-     * @default 'slow'
+     * @defaultValue 'slow'
      */
     duration?: ThemeTypes['duration'];
 };

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

@@ -7,55 +7,55 @@ import type * as React from 'react';
  * GPU shimmer block primitive. Includes standard `div` pass-through props such as `id`, `title`,
  * data attributes, and event handlers, plus Vira-owned sizing and shimmer controls.
  *
- * @default Native div pass-through props keep React defaults.
+ * @defaultValue Native div pass-through props keep React defaults.
  */
 export type SkeletonProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Sets the skeleton inline size using any valid CSS size string.
      *
-     * @default The skeleton sizes from context, constrained by the CSS minimum.
+     * @defaultValue The skeleton sizes from context, constrained by the CSS minimum.
      */
     width?: string;
     /**
      * Sets the skeleton block size using any valid CSS size string.
      *
-     * @default The skeleton sizes from context, constrained by the CSS minimum.
+     * @defaultValue The skeleton sizes from context, constrained by the CSS minimum.
      */
     height?: string;
     /**
      * Sets the skeleton minimum inline size using any valid CSS size string.
      *
-     * @default The CSS minimum inline size is `2rem`.
+     * @defaultValue The CSS minimum inline size is `2rem`.
      */
     minWidth?: string;
     /**
      * Sets the skeleton minimum block size using any valid CSS size string.
      *
-     * @default The CSS minimum block size is `1rem`.
+     * @defaultValue The CSS minimum block size is `1rem`.
      */
     minHeight?: string;
     /**
      * Enables or disables the shimmer animation.
      *
-     * @default true
+     * @defaultValue true
      */
     animate?: boolean;
     /**
      * Sets the corner radius from the Vira radius token scale.
      *
-     * @default 's'
+     * @defaultValue 's'
      */
     radius?: ThemeTypes['radius'];
     /**
      * Sets the shimmer sweep duration from the Vira duration token scale.
      *
-     * @default 'slow'
+     * @defaultValue 'slow'
      */
     duration?: ThemeTypes['duration'];
     /**
      * Ref forwarded to the rendered skeleton root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLDivElement>;
 };

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

@@ -7,31 +7,31 @@ import type * as React from 'react';
  * Includes Base UI slider root props such as `value`, `defaultValue`, `min`, `max`, `step`,
  * `disabled`, `orientation`, and change handlers, plus optional field copy and thumb labeling.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type SliderProps = SliderRoot.Props & FieldRoot.Props & {
     /**
      * 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`.
      *
-     * @default No static error copy is rendered.
+     * @defaultValue No static error copy is rendered.
      */
     error?: React.ReactNode;
     /**
      * Marks the slider as required and shows a required indicator on the label.
      *
-     * @default false
+     * @defaultValue false
      */
     required?: boolean;
     /**
@@ -40,7 +40,7 @@ export type SliderProps = SliderRoot.Props & FieldRoot.Props & {
      * Pass `true` for Base UI default formatting inside styled `Text`, or a
      * function matching `Slider.Value` `children` to own the value slot (no `Text`).
      *
-     * @default Value UI is hidden.
+     * @defaultValue Value UI is hidden.
      */
     renderValue?: boolean | Exclude<React.ComponentProps<typeof PrimitiveSlider.Value>['children'], null | undefined>;
     /**
@@ -50,7 +50,7 @@ export type SliderProps = SliderRoot.Props & FieldRoot.Props & {
      * Pass a two-element tuple to name each range thumb in order; on a single-thumb slider only the
      * first tuple value is applied.
      *
-     * @default No default; required when `label` is omitted and thumbs need distinct accessible names.
+     * @defaultValue No default; required when `label` is omitted and thumbs need distinct accessible names.
      */
     thumbAriaLabel?: string | readonly [string, string];
 };

package/dist/components/spinner/spinner.d.ts

@@ -4,19 +4,19 @@ export type SpinnerProps = Omit<React.ComponentProps<'svg'>, 'color'> & {
     /**
      * Sets the rendered spinner size.
      *
-     * @default 'l'
+     * @defaultValue 'l'
      */
     size?: 's' | 'm' | 'l';
     /**
      * Overrides the spinner fill color.
      *
-     * @default No default; inherits `currentColor`.
+     * @defaultValue No default; inherits `currentColor`.
      */
     color?: string;
     /**
      * Visual animation style.
      *
-     * @default 'bars'
+     * @defaultValue 'bars'
      */
     variant?: SpinnerVariant;
 };

package/dist/components/stack/stack.d.ts

@@ -10,37 +10,37 @@ type StackAxisPadding = StackSpace | [StackSpace | 0, StackSpace | 0];
  * Includes standard `div` attributes such as `id`, `role`, `title`, and event handlers,
  * plus Vira-owned flex layout controls and Base UI `render` support for replacing the root element.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *
-     * @default The stack renders a `div` root.
+     * @defaultValue The stack renders a `div` root.
      */
     render?: useRender.RenderProp;
     /**
      * Ref forwarded to the rendered stack root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLElement>;
     /**
      * Renders children across rows or columns using the chosen flex direction.
      *
-     * @default 'column'
+     * @defaultValue 'column'
      */
     direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     /**
      * Displays the stack as `inline-flex` instead of `flex`.
      *
-     * @default false
+     * @defaultValue false
      */
     inline?: boolean;
     /**
      * Allows direct children to wrap onto additional lines when space is constrained.
      *
-     * @default false
+     * @defaultValue false
      */
     wrap?: boolean;
     /**
@@ -50,7 +50,7 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
      * Does not set the stack root's own inline size — use `fullWidth` when this stack must
      * fill its parent width (e.g. centered shell with `maxWidth`, or a full-bleed Button column).
      *
-     * @default false
+     * @defaultValue false
      */
     expandChildren?: boolean;
     /**
@@ -61,55 +61,55 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
      * Use with `maxWidth` under a parent `hAlign="center"` for a fluid, capped, centered shell.
      * Orthogonal to `expandChildren` (self size vs children grow).
      *
-     * @default false
+     * @defaultValue false
      */
     fullWidth?: boolean;
     /**
      * Sets the gap between flex rows using the Vira space token scale.
      *
-     * @default No row gap.
+     * @defaultValue No row gap.
      */
     rowGap?: StackSpace;
     /**
      * Sets the gap between flex columns using the Vira space token scale.
      *
-     * @default No column gap.
+     * @defaultValue No column gap.
      */
     columnGap?: StackSpace;
     /**
      * Aligns content on the horizontal axis from the consumer point of view.
      *
-     * @default 'initial'
+     * @defaultValue 'initial'
      */
     hAlign?: StackAlignment;
     /**
      * Aligns content on the vertical axis from the consumer point of view.
      *
-     * @default 'initial'
+     * @defaultValue 'initial'
      */
     vAlign?: StackAlignment;
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No inline padding.
+     * @defaultValue No inline padding.
      */
     hPadding?: StackAxisPadding;
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No block padding.
+     * @defaultValue No block padding.
      */
     vPadding?: StackAxisPadding;
     /**
      * Applies a maximum width value to the stack root.
      *
-     * @default No max width constraint.
+     * @defaultValue No max width constraint.
      */
     maxWidth?: string;
     /**
      * Applies a minimum width value to the stack root.
      *
-     * @default No minimum width constraint.
+     * @defaultValue No minimum width constraint.
      */
     minWidth?: string;
     /**
@@ -121,7 +121,7 @@ export type StackProps = React.ComponentPropsWithoutRef<'div'> & {
      * Warning: inline-size containment can affect nested layout (e.g. cards inside Masonry).
      * Use only when you need container queries against this specific Stack.
      *
-     * @default false
+     * @defaultValue false
      */
     enableContainer?: boolean;
 };

package/dist/components/static-noise/static-noise.d.ts

@@ -5,31 +5,31 @@ import type * as React from 'react';
  * Includes standard `figure` attributes such as `id`, `className`, and event handlers,
  * plus Vira-owned turbulence tuning controls.
  *
- * @default Native figure pass-through props keep React defaults.
+ * @defaultValue Native figure pass-through props keep React defaults.
  */
 export type StaticNoiseProps = React.ComponentPropsWithRef<'figure'> & {
     /**
      * Sets the SVG turbulence `baseFrequency` for the internal noise filter.
      *
-     * @default 0.5
+     * @defaultValue 0.5
      */
     baseFrequency?: number | string;
     /**
      * Sets the rendered overlay opacity.
      *
-     * @default 0.2
+     * @defaultValue 0.2
      */
     opacity?: number;
     /**
      * Sets the rendered overlay mix blend mode.
      *
-     * @default 'difference'
+     * @defaultValue 'difference'
      */
     mixBlendMode?: React.CSSProperties['mixBlendMode'];
     /**
      * Animates the internal turbulence filter by cycling `feTurbulence` seed values.
      *
-     * @default false
+     * @defaultValue false
      */
     animate?: boolean;
 };