@viraui/react 2026.6.5 → 2026.7.0-next.1

package/dist/components/grid/grid.d.ts

@@ -10,19 +10,19 @@ type GridAxisPadding = GridSpace | [GridSpace | 0, GridSpace | 0];
  * Includes standard `div` attributes such as `id`, `role`, `title`, and event handlers,
  * plus Vira-owned CSS Grid 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 GridProps = React.ComponentPropsWithoutRef<'div'> & {
     /**
      * Replaces the default `div` root using Base UI render semantics.
      *
-     * @default The grid renders a `div` root.
+     * @defaultValue The grid renders a `div` root.
      */
     render?: useRender.RenderProp;
     /**
      * Ref forwarded to the rendered grid root element.
      *
-     * @default No ref is attached.
+     * @defaultValue No ref is attached.
      */
     ref?: React.Ref<HTMLElement>;
     /**
@@ -33,32 +33,32 @@ export type GridProps = React.ComponentPropsWithoutRef<'div'> & {
      * explicit `colMinWidth` as well for fixed-breadth tracks and
      * `data-grid-fixed-breadth="true"` (`inline-size: max-content`).
      *
-     * @default No fixed column count (uses `filling` auto tracks).
+     * @defaultValue No fixed column count (uses `filling` auto tracks).
      */
     columns?: number;
     /**
      * Fixes the number of row tracks via `--vui-grid-rows`.
      *
-     * @default No fixed row count.
+     * @defaultValue No fixed row count.
      */
     rows?: number;
     /**
      * Sets the gap between grid rows using the Vira space token scale.
      *
-     * @default No row gap (`0`).
+     * @defaultValue No row gap (`0`).
      */
     rowGap?: GridSpace;
     /**
      * Sets the gap between grid columns using the Vira space token scale.
      *
-     * @default No column gap (`0`).
+     * @defaultValue No column gap (`0`).
      */
     columnGap?: GridSpace;
     /**
      * Controls `repeat(auto-fill|auto-fit, …)` when `columns` is unset.
      * Pass `false` to skip the filling data attribute.
      *
-     * @default 'fill'
+     * @defaultValue 'fill'
      */
     filling?: 'fit' | 'fill' | false;
     /**
@@ -67,25 +67,25 @@ export type GridProps = React.ComponentPropsWithoutRef<'div'> & {
      * tracks (`repeat(N, var(--vui-grid-column-min-w))`) and sets
      * `data-grid-fixed-breadth`; omit this prop to keep fluid `1fr` tracks.
      *
-     * @default '10rem'
+     * @defaultValue '10rem'
      */
     colMinWidth?: string;
     /**
      * Minimum row track size used when `rows` is set.
      *
-     * @default '1fr'
+     * @defaultValue '1fr'
      */
     rowMinHeight?: string;
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No inline padding.
+     * @defaultValue No inline padding.
      */
     hPadding?: GridAxisPadding;
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No block padding.
+     * @defaultValue No block padding.
      */
     vPadding?: GridAxisPadding;
 };

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

@@ -18,13 +18,13 @@ export type IconButtonLinkProps = Omit<ButtonLinkProps, 'children' | 'addon' | '
     /**
      * Controls the visual button size.
      *
-     * @default 'm'
+     * @defaultValue 'm'
      */
     size?: ButtonLinkProps['size'];
     /**
      * Icon rendered as the sole visible control content.
      *
-     * @default No default; required for every IconButtonLink.
+     * @defaultValue No default; required for every IconButtonLink.
      */
     icon: ReactNode;
 };

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

@@ -17,13 +17,13 @@ export type IconButtonProps = Omit<ButtonProps, 'children' | 'addon' | 'addonPos
     /**
      * Controls the visual button size.
      *
-     * @default 'm'
+     * @defaultValue 'm'
      */
     size?: ButtonProps['size'];
     /**
      * Icon rendered as the sole visible control content.
      *
-     * @default No default; required for every IconButton.
+     * @defaultValue No default; required for every IconButton.
      */
     icon: ReactNode;
 };

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './checkbox';
 export * from './chip';
 export * from './clamp-text';
 export * from './dialog';
+export * from './disclosure';
 export * from './elevator';
 export * from './fieldset';
 export * from './fit-text';
@@ -22,8 +23,11 @@ export * from './linear-progress';
 export * from './masonry';
 export * from './menu';
 export * from './meter';
+export * from './number-field';
+export * from './otp-field';
 export * from './popover';
 export * from './progressive-blur';
+export * from './prose';
 export * from './radio';
 export * from './select';
 export * from './separator';

package/dist/components/linear-progress/linear-progress.d.ts

@@ -6,19 +6,19 @@ import type * as React from 'react';
  * Includes Base UI progress root props such as `value`, `min`, `max`, `format`,
  * and `getAriaValueText`, plus optional label, description, and value display.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type LinearProgressProps = ProgressRoot.Props & {
     /**
      * Visible label rendered through `Progress.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 progress track.
      *
-     * @default No description is rendered.
+     * @defaultValue No description is rendered.
      */
     description?: React.ReactNode;
     /**
@@ -27,7 +27,7 @@ export type LinearProgressProps = ProgressRoot.Props & {
      * Pass `true` for Base UI default formatting, or a function matching
      * `Progress.Value` `children` to customize the printed label.
      *
-     * @default Value UI is hidden.
+     * @defaultValue Value UI is hidden.
      */
     renderValue?: boolean | Exclude<React.ComponentProps<typeof PrimitiveProgress.Value>['children'], null | undefined>;
 };

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-popup.js

@@ -1,5 +1,5 @@
-import { Elevator } from "../elevator/elevator.js";
 import { Surface } from "../surface/surface.js";
+import { Elevator } from "../elevator/elevator.js";
 import menu_module_default from "./menu.module.js";
 import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";

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.css

@@ -1 +1 @@
-@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-meter-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-meter-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-meter-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}.viraui__meter-module__Meter_YRI7d{--vui-meter-track-size:var(--space-xs);--vui-meter-track-background:var(--global-contrast);--vui-meter-indicator-color:var(--global-primary);& .viraui__meter-module__Track_uF9wy{--__corner-shape:round;position:relative;overflow:hidden;block-size:round(to-zero,var(--vui-meter-track-size),2px);background:var(--vui-meter-track-background);border-radius:var(--radius-full)}& .viraui__meter-module__Indicator_dNjqU{block-size:100%;background:var(--vui-meter-indicator-color);border-radius:inherit}}}
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-meter-track-size{syntax:"<length>";inherits:true;initial-value:0}@property --vui-meter-track-background{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-meter-indicator-color{syntax:"<color>";inherits:true;initial-value:#0000}@property --vui-meter-track-opacity{syntax:"<number> | <percentage>";inherits:false;initial-value:15%}.viraui__meter-module__Meter_YRI7d{--vui-meter-track-size:var(--space-xs);--vui-meter-indicator-color:var(--global-primary);--vui-meter-track-background:oklab(from var(--vui-meter-indicator-color) l a b / var(--vui-meter-track-opacity));&[data-variant=primary]{--vui-meter-track-background:var(--global-contrast)}&[data-variant=gray]{--vui-meter-indicator-color:var(--highlight-gray)}&[data-variant=slate]{--vui-meter-indicator-color:var(--highlight-slate)}&[data-variant=yellow]{--vui-meter-indicator-color:var(--highlight-yellow)}&[data-variant=green]{--vui-meter-indicator-color:var(--highlight-green)}&[data-variant=blue]{--vui-meter-indicator-color:var(--highlight-blue)}&[data-variant=red]{--vui-meter-indicator-color:var(--highlight-red)}&[data-variant=cyan]{--vui-meter-indicator-color:var(--highlight-cyan)}&[data-variant=purple]{--vui-meter-indicator-color:var(--highlight-purple)}&[data-variant=indigo]{--vui-meter-indicator-color:var(--highlight-indigo)}&[data-variant=acid]{--vui-meter-indicator-color:var(--highlight-acid)}&[data-variant=salmon]{--vui-meter-indicator-color:var(--highlight-salmon)}&[data-variant=magenta]{--vui-meter-indicator-color:var(--highlight-magenta)}& .viraui__meter-module__Track_uF9wy{--__corner-shape:round;position:relative;overflow:hidden;block-size:round(to-zero,var(--vui-meter-track-size),2px);background:var(--vui-meter-track-background);border-radius:var(--radius-full)}& .viraui__meter-module__Indicator_dNjqU{block-size:100%;background:var(--vui-meter-indicator-color);border-radius:inherit}}}

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

@@ -1,24 +1,26 @@
 import { Meter as PrimitiveMeter, MeterRoot } from '@base-ui/react';
+import { ThemeTypes } from '@viraui/foundation/vira/types';
 import type * as React from 'react';
 /**
  * Public Meter props.
  *
  * Includes Base UI meter root props such as `value`, `min`, `max`, `format`,
- * and `getAriaValueText`, plus optional label, description, and value display.
+ * 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;
     /**
@@ -27,8 +29,16 @@ 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>;
+    /**
+     * Selects track and indicator colors. `primary` uses brand primary on the
+     * indicator; highlight token names tint both track (wash) and indicator
+     * via `--highlight-*`, matching Chip highlight variants.
+     *
+     * @defaultValue 'primary'
+     */
+    variant?: 'primary' | ThemeTypes['highlight'];
 };
 export declare const Meter: React.FC<MeterProps>;

package/dist/components/meter/meter.js

@@ -7,11 +7,12 @@ import meter_module_default from "./meter.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Meter } from "@base-ui/react";
 //#region src/components/meter/meter.tsx
-var Meter$1 = ({ className, description, label, renderValue, value, ...otherProps }) => {
+var Meter$1 = ({ className, description, label, renderValue, value, variant = "primary", ...otherProps }) => {
 	const showRenderedValue = renderValue === true || typeof renderValue === "function";
 	return /* @__PURE__ */ jsxs(Meter.Root, {
 		...otherProps,
 		className: clsx(meter_module_default.Meter, className),
+		"data-variant": variant,
 		value,
 		render: /* @__PURE__ */ jsx(Stack, {
 			rowGap: "m",

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