@viraui/react 2026.7.0-next.0 → 2026.7.0

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

@@ -6,19 +6,19 @@ import type * as React from 'react';
  * Includes standard `div` attributes such as `id`, `role`, `title`, data attributes, and event handlers,
  * plus Base UI `render` support for replacing the default item root.
  *
- * @default Native div pass-through props keep React defaults.
+ * @defaultValue Native div pass-through props keep React defaults.
  */
 export type MasonryItemProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *
-     * @default The item renders a `div` root.
+     * @defaultValue The item renders a `div` root.
      */
     render?: useRender.RenderProp;
     /**
      * Ref forwarded to the rendered item root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLElement>;
 };

package/dist/components/masonry/masonry.d.ts

@@ -19,19 +19,19 @@ export type MasonryBreakpointCols = {
  * Includes standard `div` attributes such as `id`, `role`, `title`, data attributes, and event handlers,
  * plus mobile-first React column distribution controls.
  *
- * @default Native div pass-through props keep React defaults.
+ * @defaultValue Native div pass-through props keep React defaults.
  */
 export type MasonryProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *
-     * @default The masonry renders a `div` root.
+     * @defaultValue The masonry renders a `div` root.
      */
     render?: useRender.RenderProp;
     /**
      * Sets the gap between columns (`--vui-masonry-gap`) and the `rowGap` on each column `Stack`.
      *
-     * @default 'l'
+     * @defaultValue 'l'
      */
     gap?: StackProps['columnGap'];
     /**
@@ -41,7 +41,7 @@ export type MasonryProps = React.ComponentPropsWithRef<'div'> & {
      * root's content-box inline size. Keys may be in any order; the largest
      * matching breakpoint wins. Non-finite keys are ignored.
      *
-     * @default { default: 1, 480: 2, 768: 3, 960: 4, 1280: 5, 2560: 6 }
+     * @defaultValue { default: 1, 480: 2, 768: 3, 960: 4, 1280: 5, 2560: 6 }
      */
     breakpointCols?: MasonryBreakpointCols;
 };

package/dist/components/menu/menu-checkbox-item.d.ts

@@ -3,26 +3,26 @@ import type * as React from 'react';
 /**
  * Public Menu.CheckboxItem props.
  *
- * @default `closeOnClick` is `false`.
+ * @defaultValue `closeOnClick` is `false`.
  */
 export type MenuCheckboxItemProps = MenuCheckboxItemPrimitive.Props & {
     /**
      * Decorative leading node rendered before the item label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut) before the check indicator.
      * Rendered muted `xs`.
      *
-     * @default No note is rendered.
+     * @defaultValue No note is rendered.
      */
     note?: React.ReactNode;
     /**
      * Visual sentiment. `destructive` uses highlight-red wash + text.
      *
-     * @default Neutral item styling.
+     * @defaultValue Neutral item styling.
      */
     sentiment?: 'destructive';
 };

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

@@ -3,25 +3,25 @@ import type * as React from 'react';
 /**
  * Public Menu.Item props.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MenuItemProps = MenuItemPrimitive.Props & {
     /**
      * Decorative leading node rendered before the item label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `xs`.
      *
-     * @default No note is rendered.
+     * @defaultValue No note is rendered.
      */
     note?: React.ReactNode;
     /**
      * Visual sentiment. `destructive` uses highlight-red wash + text.
      *
-     * @default Neutral item styling.
+     * @defaultValue Neutral item styling.
      */
     sentiment?: 'destructive';
 };

package/dist/components/menu/menu-link-item.d.ts

@@ -3,25 +3,25 @@ import type * as React from 'react';
 /**
  * Public Menu.LinkItem props.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MenuLinkItemProps = MenuLinkItemPrimitive.Props & {
     /**
      * Decorative leading node rendered before the item label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `xs`.
      *
-     * @default No note is rendered.
+     * @defaultValue No note is rendered.
      */
     note?: React.ReactNode;
     /**
      * Visual sentiment. `destructive` uses highlight-red wash + text.
      *
-     * @default Neutral item styling.
+     * @defaultValue Neutral item styling.
      */
     sentiment?: 'destructive';
 };

package/dist/components/menu/menu-popup.d.ts

@@ -9,7 +9,7 @@ type MenuPopupPositionerProps = Omit<MenuPositioner.Props, 'className' | 'style'
  * defaults to `2`. RTL placement comes from Base UI `DirectionProvider`;
  * app must also set HTML/`dir` (or `direction`) so portaled CSS inherits RTL.
  *
- * @default `sideOffset` is `2`.
+ * @defaultValue `sideOffset` is `2`.
  */
 export type MenuPopupProps = MenuPopupPositionerProps & {
     children?: React.ReactNode;
@@ -18,7 +18,7 @@ export type MenuPopupProps = MenuPopupPositionerProps & {
      * 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 PrimitiveMenu.Portal>['container'];
 };

package/dist/components/menu/menu-radio-group.d.ts

@@ -3,13 +3,13 @@ import type * as React from 'react';
 /**
  * Public Menu.RadioGroup props.
  *
- * @default No label is rendered.
+ * @defaultValue No label is rendered.
  */
 export type MenuRadioGroupProps = MenuRadioGroupPrimitive.Props & {
     /**
      * Optional accessible group label rendered with `Menu.GroupLabel`.
      *
-     * @default No label is rendered.
+     * @defaultValue No label is rendered.
      */
     label?: React.ReactNode;
 };

package/dist/components/menu/menu-radio-item.d.ts

@@ -3,26 +3,26 @@ import type * as React from 'react';
 /**
  * Public Menu.RadioItem props.
  *
- * @default `closeOnClick` is `false`.
+ * @defaultValue `closeOnClick` is `false`.
  */
 export type MenuRadioItemProps = MenuRadioItemPrimitive.Props & {
     /**
      * Decorative leading node rendered before the item label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * End-aligned secondary text (e.g. keyboard shortcut) before the check indicator.
      * Rendered muted `xs`.
      *
-     * @default No note is rendered.
+     * @defaultValue No note is rendered.
      */
     note?: React.ReactNode;
     /**
      * Visual sentiment. `destructive` uses highlight-red wash + text.
      *
-     * @default Neutral item styling.
+     * @defaultValue Neutral item styling.
      */
     sentiment?: 'destructive';
 };

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

@@ -3,7 +3,7 @@ import type * as React from 'react';
 /**
  * Public Menu.Separator props.
  *
- * @default `orientation` is `'horizontal'`.
+ * @defaultValue `orientation` is `'horizontal'`.
  */
 export type MenuSeparatorProps = React.ComponentProps<typeof PrimitiveMenu.Separator>;
 export declare const MenuSeparator: React.FC<MenuSeparatorProps>;

package/dist/components/menu/menu-submenu-trigger.d.ts

@@ -3,19 +3,19 @@ import type * as React from 'react';
 /**
  * Public Menu.SubmenuTrigger props.
  *
- * @default Trailing end chevron; RTL mirror via CSS `:dir(rtl)`.
+ * @defaultValue Trailing end chevron; RTL mirror via CSS `:dir(rtl)`.
  */
 export type MenuSubmenuTriggerProps = MenuSubmenuTriggerPrimitive.Props & {
     /**
      * Decorative leading node rendered before the item label.
      *
-     * @default No addon is rendered.
+     * @defaultValue No addon is rendered.
      */
     addon?: React.ReactNode;
     /**
      * Visual sentiment. `destructive` uses highlight-red wash + text.
      *
-     * @default Neutral item styling.
+     * @defaultValue Neutral item styling.
      */
     sentiment?: 'destructive';
 };

package/dist/components/menu/menu.d.ts

@@ -17,7 +17,7 @@ import type * as React from 'react';
  * triggers. `children` may be a node or a `({ payload }) => ReactNode` render function
  * for per-trigger content.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MenuProps = MenuRoot.Props;
 /**
@@ -26,7 +26,7 @@ export type MenuProps = MenuRoot.Props;
  * Pass-through to Base UI `Menu.Trigger`. Use `render` for the visible control
  * (`Button`, `IconButton`, or another element).
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MenuTriggerProps = MenuTriggerNamespace.Props;
 /**
@@ -35,7 +35,7 @@ export type MenuTriggerProps = MenuTriggerNamespace.Props;
  * Pass-through to Base UI `Menu.SubmenuRoot`. Compose `Menu.SubmenuTrigger` and
  * nested `Menu.Popup` as children.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MenuSubmenuProps = React.ComponentProps<typeof PrimitiveMenu.SubmenuRoot>;
 export declare const MenuTrigger: PrimitiveMenu.Trigger;

package/dist/components/meter/meter.d.ts

@@ -8,19 +8,19 @@ import type * as React from 'react';
  * and `getAriaValueText`, plus optional label, description, value display, and
  * highlight `variant` for track/indicator color.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type MeterProps = MeterRoot.Props & {
     /**
      * Visible label rendered through `Meter.Label` with shared internal `FieldLabel`.
      *
-     * @default No label is rendered.
+     * @defaultValue No label is rendered.
      */
     label?: React.ReactNode;
     /**
      * Static helper copy rendered with `Text` below the meter track.
      *
-     * @default No description is rendered.
+     * @defaultValue No description is rendered.
      */
     description?: React.ReactNode;
     /**
@@ -29,7 +29,7 @@ export type MeterProps = MeterRoot.Props & {
      * Pass `true` for Base UI default formatting, or a function matching
      * `Meter.Value` `children` to customize the printed label.
      *
-     * @default Value UI is hidden.
+     * @defaultValue Value UI is hidden.
      */
     renderValue?: boolean | Exclude<React.ComponentProps<typeof PrimitiveMeter.Value>['children'], null | undefined>;
     /**
@@ -37,7 +37,7 @@ export type MeterProps = MeterRoot.Props & {
      * indicator; highlight token names tint both track (wash) and indicator
      * via `--highlight-*`, matching Chip highlight variants.
      *
-     * @default 'primary'
+     * @defaultValue 'primary'
      */
     variant?: 'primary' | ThemeTypes['highlight'];
 };

package/dist/components/number-field/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberField } from './number-field';
+export type { NumberFieldProps } from './number-field';

package/dist/components/number-field/number-field.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{.viraui__number-field-module__NumberField_l7i9a{display:contents}.viraui__number-field-module__Field_Ud43i{--vui-textfield-input-height:var(--space-2xl);--vui-textfield-control-group-background:var(--base-1);--vui-textfield-control-group-color:var(--global-foreground);--vui-textfield-control-group-border-color:var(--global-contrast);--vui-textfield-control-group-border-radius:var(--radius-m);--vui-field-label-padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2);max-block-size:min-content;&:has([required]) .viraui__number-field-module__Label_-Sji0:after{content:" ＊";color:var(--highlight-red)}}.viraui__number-field-module__ControlGroup_CX5th{box-sizing:border-box;block-size:round(to-zero,var(--vui-textfield-input-height),2px);background:var(--vui-textfield-control-group-background);color:var(--vui-textfield-control-group-color);border:1px solid var(--vui-textfield-control-group-border-color);border-radius:var(--vui-textfield-control-group-border-radius);&:has(.viraui__number-field-module__CustomBasicInput_6fmMO:focus),&:has(.viraui__number-field-module__CustomBasicInput_6fmMO:focus-visible),&:has(.viraui__number-field-module__CustomBasicInput_6fmMO[data-focused]){outline:var(--outline);outline-offset:var(--outline-offset)}&:has(.viraui__number-field-module__CustomBasicInput_6fmMO[data-invalid][data-dirty]){--vui-textfield-control-group-border-color:var(--highlight-red);box-shadow:none;outline-color:oklab(from var(--highlight-red) l a b/.5)}&:has(.viraui__number-field-module__CustomBasicInput_6fmMO:disabled),&:has(.viraui__number-field-module__CustomBasicInput_6fmMO[data-disabled]){--vui-textfield-control-group-background:var(--global-disabled-background);--vui-textfield-control-group-border-color:#0000;--vui-textfield-control-group-color:var(--global-disabled-foreground);box-shadow:none;cursor:not-allowed}}.viraui__number-field-module__Addon_QwT1q{min-inline-size:var(--space-xl)}.viraui__number-field-module__ScrubArea_3Wzje{-webkit-user-select:none;user-select:none;:where(& *){cursor:ew-resize;-webkit-user-select:none;user-select:none}}.viraui__number-field-module__Description_GWcij{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__number-field-module__CustomBasicInput_6fmMO{text-align:center;&:focus,&:focus-visible{outline:none}}}

package/dist/components/number-field/number-field.d.ts

@@ -0,0 +1,78 @@
+import { FieldRoot } from '@base-ui/react/field';
+import { NumberFieldRoot as PrimitiveNumberFieldRoot } from '@base-ui/react/number-field';
+import { BasicInputProps } from '../basic-input';
+import type * as React from 'react';
+/**
+ * Public NumberField props.
+ *
+ * Base UI Number Field Root pass-through (`value`, `min`/`max`/`step`, `format`, `name`,
+ * `disabled`, `readOnly`, …) plus Field chrome, IconButton steppers, scrub, and width knobs.
+ * String `description` also sets numeric-input `aria-roledescription`. Group / Decrement /
+ * Increment / ScrubArea stay internal.
+ *
+ * @defaultValue Base UI pass-through props keep upstream defaults.
+ */
+export type NumberFieldProps = Omit<PrimitiveNumberFieldRoot.Props, 'render' | 'children' | 'ref' | 'style'> & Omit<FieldRoot.Props, 'ref' | 'render' | 'name' | 'style' | keyof PrimitiveNumberFieldRoot.Props> & {
+    /**
+     * Ref to the visible numeric input.
+     *
+     * @defaultValue No ref is attached.
+     */
+    ref?: React.Ref<HTMLInputElement>;
+    /**
+     * Presentation styles on the Field chrome host (not the `display: contents` Root).
+     *
+     * @defaultValue No inline style is applied.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Visible label rendered with shared internal `FieldLabel`. When present and
+     * `labelScrub` is true, the label hosts Base UI scrub.
+     *
+     * @defaultValue No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper copy rendered with `Field.Description` and `Text` while the field is valid.
+     * When a string, also sets `aria-roledescription` on the numeric input.
+     *
+     * @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.
+     *
+     * @defaultValue No static error copy is rendered.
+     */
+    error?: React.ReactNode;
+    /**
+     * Where decrement/increment sit relative to the numeric input.
+     * `split` = button | input | button; `grouped` = both steppers at inline-end
+     * (physical right in LTR, left in RTL — follows document/`dir` / Base UI direction).
+     *
+     * @defaultValue 'split'
+     */
+    stepperPlacement?: 'split' | 'grouped';
+    /**
+     * When `true` and `label` is set, wrap the label in Base UI `ScrubArea`.
+     * When `false` or no label, render a plain field label.
+     *
+     * @defaultValue true
+     */
+    labelScrub?: boolean;
+    /**
+     * When `true`, field and control row fill the column; only the numeric input flex-grows.
+     * Steppers stay intrinsic size (`data-grow="false"`).
+     *
+     * @defaultValue false
+     */
+    fullWidth?: boolean;
+    /**
+     * When `true`, sets `field-sizing: content` on the numeric input only.
+     *
+     * @defaultValue undefined (browser fixed)
+     */
+    fitContent?: BasicInputProps['fitContent'];
+};
+export declare const NumberField: React.FC<NumberFieldProps>;

package/dist/components/number-field/number-field.js

@@ -0,0 +1,120 @@
+"use client";
+import './number-field.css';
+import { clsx } from "../../core/clsx.js";
+import { ChromeMinus, ChromePlus } from "../../internal/chrome-icons/chrome-icons.js";
+import { BasicInput } from "../basic-input/basic-input.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 { IconButton } from "../icon-button/icon-button.js";
+import number_field_module_default from "./number-field.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import { NumberField } from "@base-ui/react/number-field";
+//#region src/components/number-field/number-field.tsx
+var renderStepperAddon = (position, children) => /* @__PURE__ */ jsx(Stack, {
+	className: number_field_module_default.Addon,
+	"data-grow": "false",
+	"data-position": position,
+	"data-shrink": "false",
+	hAlign: "center",
+	hPadding: "xs",
+	inline: true,
+	vAlign: "center",
+	vPadding: "xs",
+	children
+});
+var NumberField$1 = ({ className, description, dirty, disabled, error, fitContent, fullWidth = false, invalid, label, labelScrub = true, ref, stepperPlacement = "split", style, touched, validate, validationDebounceTime, validationMode, ...rootProps }) => {
+	const decrement = /* @__PURE__ */ jsx(NumberField.Decrement, { render: /* @__PURE__ */ jsx(IconButton, {
+		"aria-label": "Decrement",
+		icon: /* @__PURE__ */ jsx(ChromeMinus, {}),
+		size: "s",
+		type: "button",
+		variant: "secondary"
+	}) });
+	const increment = /* @__PURE__ */ jsx(NumberField.Increment, { render: /* @__PURE__ */ jsx(IconButton, {
+		"aria-label": "Increment",
+		icon: /* @__PURE__ */ jsx(ChromePlus, {}),
+		size: "s",
+		type: "button",
+		variant: "secondary"
+	}) });
+	const stepperPair = /* @__PURE__ */ jsxs(Stack, {
+		columnGap: "xs",
+		direction: "row",
+		vAlign: "center",
+		children: [decrement, increment]
+	});
+	let startAddon;
+	let endAddon;
+	if (stepperPlacement === "grouped") endAddon = renderStepperAddon("end", stepperPair);
+	else {
+		startAddon = renderStepperAddon("start", decrement);
+		endAddon = renderStepperAddon("end", increment);
+	}
+	const labelContent = label ? /* @__PURE__ */ jsx(FieldLabel, { children: label }) : null;
+	return /* @__PURE__ */ jsx(NumberField.Root, {
+		className: number_field_module_default.NumberField,
+		disabled,
+		...rootProps,
+		children: /* @__PURE__ */ jsxs(Field.Root, {
+			className: clsx(number_field_module_default.Field, className),
+			dirty,
+			disabled,
+			invalid,
+			render: /* @__PURE__ */ jsx(Stack, {
+				expandChildren: true,
+				fullWidth,
+				rowGap: "s",
+				style
+			}),
+			touched,
+			validate,
+			validationDebounceTime,
+			validationMode,
+			children: [
+				label && labelScrub && /* @__PURE__ */ jsx(NumberField.ScrubArea, {
+					className: number_field_module_default.ScrubArea,
+					children: /* @__PURE__ */ jsx(Field.Label, {
+						className: number_field_module_default.Label,
+						children: labelContent
+					})
+				}),
+				label && !labelScrub && /* @__PURE__ */ jsx(Field.Label, {
+					className: number_field_module_default.Label,
+					children: labelContent
+				}),
+				/* @__PURE__ */ jsxs(NumberField.Group, {
+					render: /* @__PURE__ */ jsx(Stack, {
+						className: number_field_module_default.ControlGroup,
+						direction: "row",
+						expandChildren: true,
+						vPadding: "xs",
+						fullWidth: true,
+						vAlign: "stretch"
+					}),
+					children: [
+						startAddon,
+						/* @__PURE__ */ jsx(BasicInput, {
+							className: number_field_module_default.CustomBasicInput,
+							disabled,
+							fitContent,
+							render: /* @__PURE__ */ jsx(NumberField.Input, {
+								"aria-roledescription": typeof description === "string" ? description : void 0,
+								ref
+							})
+						}),
+						endAddon
+					]
+				}),
+				/* @__PURE__ */ jsx(FieldHelperCopy, {
+					className: number_field_module_default.Description,
+					description,
+					error
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { NumberField$1 as NumberField };

package/dist/components/number-field/number-field.module.js

@@ -0,0 +1,21 @@
+//#region src/components/number-field/number-field.module.css
+var NumberField = "viraui__number-field-module__NumberField_l7i9a";
+var Field = "viraui__number-field-module__Field_Ud43i";
+var Label = "viraui__number-field-module__Label_-Sji0";
+var ControlGroup = "viraui__number-field-module__ControlGroup_CX5th";
+var CustomBasicInput = "viraui__number-field-module__CustomBasicInput_6fmMO";
+var Addon = "viraui__number-field-module__Addon_QwT1q";
+var ScrubArea = "viraui__number-field-module__ScrubArea_3Wzje";
+var Description = "viraui__number-field-module__Description_GWcij";
+var number_field_module_default = {
+	NumberField,
+	Field,
+	Label,
+	ControlGroup,
+	CustomBasicInput,
+	Addon,
+	ScrubArea,
+	Description
+};
+//#endregion
+export { Addon, ControlGroup, CustomBasicInput, Description, Field, Label, NumberField, ScrubArea, number_field_module_default as default };

package/dist/components/otp-field/index.d.ts

@@ -1,4 +1,4 @@
 export { OTPField } from './otp-field';
-export type { OTPFieldRootProps } from './otp-field';
+export type { OTPFieldProps } from './otp-field';
 export type { OTPFieldInputProps } from './otp-field-input';
 export type { OTPFieldSeparatorProps } from './otp-field-separator';

package/dist/components/otp-field/otp-field-input.d.ts

@@ -6,7 +6,7 @@ import * as React from 'react';
  * Base UI OTP Input. Chrome is `render={<Textfield controlOnly fitContent size={1} />}`.
  * No per-slot label, description, error, addons, or public `render`.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type OTPFieldInputProps = Omit<PrimitiveOTPFieldInput.Props, 'render'>;
 export declare const OTPFieldInput: React.FC<OTPFieldInputProps>;

package/dist/components/otp-field/otp-field-separator.d.ts

@@ -5,7 +5,9 @@ import * as React from 'react';
  *
  * Base UI OTP Separator with Vira `Separator` chrome. Not an input.
  *
- * @default `orientation` is `'horizontal'`. Default `render` is a short Vira `Separator`.
+ * @defaultValue `orientation` is `'horizontal'`. Default `render` is a short Vira `Separator`
+ * with `minWidth` + `maxWidth` `var(--space-m)` so the dash stays visible in the slot row
+ * (`data-shrink="false"` alone is not enough — content size stays 0 under flex).
  */
 export type OTPFieldSeparatorProps = React.ComponentPropsWithRef<typeof PrimitiveOTPField.Separator>;
 export declare const OTPFieldSeparator: React.FC<OTPFieldSeparatorProps>;

package/dist/components/otp-field/otp-field-separator.js

@@ -3,9 +3,13 @@ import { jsx } from "react/jsx-runtime";
 import "react";
 import { OTPField } from "@base-ui/react/otp-field";
 //#region src/components/otp-field/otp-field-separator.tsx
+var otpSeparatorChrome = {
+	maxWidth: "var(--space-m)",
+	minWidth: "var(--space-m)"
+};
 var OTPFieldSeparator = ({ className, orientation = "horizontal", render, ...separatorProps }) => /* @__PURE__ */ jsx(OTPField.Separator, {
 	render: render ?? /* @__PURE__ */ jsx(Separator, {
-		maxWidth: "var(--space-m)",
+		...otpSeparatorChrome,
 		orientation
 	}),
 	...separatorProps,

package/dist/components/otp-field/otp-field.d.ts

@@ -4,15 +4,15 @@ import { OTPFieldInputProps } from './otp-field-input';
 import { OTPFieldSeparatorProps } from './otp-field-separator';
 import * as React from 'react';
 /**
- * Public OTPField root props.
+ * Public OTPField props.
  *
  * Field chrome plus Base UI OTP Root. `length` is required and does not spawn Inputs —
  * list exactly that many `OTPField.Input` children. `render` replaces the OTP primitive
  * root (slot cluster), not the Field wrapper.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
-export type OTPFieldRootProps = PrimitiveOTPFieldRoot.Props & Omit<FieldRoot.Props, 'ref' | 'render'> & {
+export type OTPFieldProps = PrimitiveOTPFieldRoot.Props & Omit<FieldRoot.Props, 'ref' | 'render'> & {
     /**
      * Visible label rendered with shared internal `FieldLabel`. Names the first slot.
      *
@@ -40,8 +40,7 @@ export type OTPFieldRootProps = PrimitiveOTPFieldRoot.Props & Omit<FieldRoot.Pro
      */
     fullWidth?: boolean;
 };
-type OTPFieldComponent = React.FC<OTPFieldRootProps> & {
-    Root: React.FC<OTPFieldRootProps>;
+type OTPFieldComponent = React.FC<OTPFieldProps> & {
     Input: React.FC<OTPFieldInputProps>;
     Separator: React.FC<OTPFieldSeparatorProps>;
 };

package/dist/components/otp-field/otp-field.js

@@ -71,7 +71,6 @@ var OTPFieldRoot = ({ children, className, description, dirty, disabled, error,
 	});
 };
 var OTPField$1 = Object.assign(OTPFieldRoot, {
-	Root: OTPFieldRoot,
 	Input: OTPFieldInput,
 	Separator: OTPFieldSeparator
 });