@viraui/react 2026.6.5 → 2026.7.0-next.1

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

@@ -0,0 +1,4 @@
+export { OTPField } 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

@@ -0,0 +1,12 @@
+import { OTPFieldInput as PrimitiveOTPFieldInput } from '@base-ui/react/otp-field';
+import * as React from 'react';
+/**
+ * Public OTPField input props.
+ *
+ * Base UI OTP Input. Chrome is `render={<Textfield controlOnly fitContent size={1} />}`.
+ * No per-slot label, description, error, addons, or public `render`.
+ *
+ * @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-input.js

@@ -0,0 +1,29 @@
+import { clsx } from "../../core/clsx.js";
+import { Textfield } from "../textfield/textfield.js";
+import otp_field_module_default from "./otp-field.module.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/components/otp-field/otp-field-input.tsx
+var OTPFieldInput = ({ "aria-label": ariaLabel, className, ...inputProps }) => {
+	const renderSlot = (props, state) => {
+		const generatedName = `Character ${state.index + 1} of ${state.length}`;
+		const resolvedAriaLabel = state.index > 0 && ariaLabel === void 0 ? generatedName : ariaLabel;
+		return /* @__PURE__ */ jsx(Textfield, {
+			controlOnly: true,
+			fitContent: true,
+			size: 1,
+			...props,
+			"aria-label": resolvedAriaLabel,
+			...resolvedAriaLabel != null ? { "aria-labelledby": void 0 } : {}
+		});
+	};
+	return /* @__PURE__ */ jsx(OTPField.Input, {
+		...inputProps,
+		"aria-label": ariaLabel,
+		className: clsx(otp_field_module_default.Slot, className),
+		render: renderSlot
+	});
+};
+//#endregion
+export { OTPFieldInput };

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

@@ -0,0 +1,13 @@
+import { OTPField as PrimitiveOTPField } from '@base-ui/react/otp-field';
+import * as React from 'react';
+/**
+ * Public OTPField separator props.
+ *
+ * Base UI OTP Separator with Vira `Separator` chrome. Not an input.
+ *
+ * @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

@@ -0,0 +1,20 @@
+import { Separator } from "../separator/separator.js";
+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, {
+		...otpSeparatorChrome,
+		orientation
+	}),
+	...separatorProps,
+	className,
+	orientation
+});
+//#endregion
+export { OTPFieldSeparator };

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

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{.viraui__otp-field-module__OTPField_8UOfz{--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;&[data-fullwidth=true]{inline-size:100%}&:has([required]) .viraui__otp-field-module__Label_7eZGm:after{content:" ＊";color:var(--highlight-red)}&[data-invalid][data-dirty] .viraui__otp-field-module__SlotCluster_nJxZ4:not(.viraui__otp-field-module__WiggleA_5-MVD,.viraui__otp-field-module__WiggleB_pfeA5){animation:viraui__otp-field-module__OTPFieldWiggleA_gLGT0 var(--duration-normal) var(--easing-wiggle)}}.viraui__otp-field-module__SlotCluster_nJxZ4{&.viraui__otp-field-module__WiggleA_5-MVD{animation:viraui__otp-field-module__OTPFieldWiggleA_gLGT0 var(--duration-normal) var(--easing-wiggle)}&.viraui__otp-field-module__WiggleB_pfeA5{animation:viraui__otp-field-module__OTPFieldWiggleB_0IC0k var(--duration-normal) var(--easing-wiggle)}@media (prefers-reduced-motion:reduce){animation:none}}@keyframes viraui__otp-field-module__OTPFieldWiggleA_gLGT0{0%{translate:var(--space-s)}to{translate:0}}@keyframes viraui__otp-field-module__OTPFieldWiggleB_0IC0k{0%{translate:var(--space-s)}to{translate:0}}.viraui__otp-field-module__Description_pYBbZ{padding-inline:calc(var(--vui-textfield-control-group-border-radius) / 2)}}@layer viraui.overrides{.viraui__otp-field-module__Slot_G3aie{text-align:center;padding-inline:0;aspect-ratio:1;&:focus::placeholder{color:#0000}}}

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

@@ -0,0 +1,48 @@
+import { FieldRoot } from '@base-ui/react/field';
+import { OTPFieldRoot as PrimitiveOTPFieldRoot } from '@base-ui/react/otp-field';
+import { OTPFieldInputProps } from './otp-field-input';
+import { OTPFieldSeparatorProps } from './otp-field-separator';
+import * as React from 'react';
+/**
+ * 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.
+ *
+ * @defaultValue Base UI pass-through props keep upstream defaults.
+ */
+export type OTPFieldProps = PrimitiveOTPFieldRoot.Props & Omit<FieldRoot.Props, 'ref' | 'render'> & {
+    /**
+     * Visible label rendered with shared internal `FieldLabel`. Names the first slot.
+     *
+     * @defaultValue No label is rendered.
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper copy rendered with `Field.Description` and `Text` while the field is valid.
+     *
+     * @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;
+    /**
+     * When `true`, the field is `inline-size: 100%` and the inner slot Stack uses
+     * `fullWidth` + `expandChildren` so slots grow equally.
+     *
+     * @defaultValue false
+     */
+    fullWidth?: boolean;
+};
+type OTPFieldComponent = React.FC<OTPFieldProps> & {
+    Input: React.FC<OTPFieldInputProps>;
+    Separator: React.FC<OTPFieldSeparatorProps>;
+};
+export declare const OTPField: OTPFieldComponent;
+export {};

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

@@ -0,0 +1,78 @@
+"use client";
+import './otp-field.css';
+import { clsx } from "../../core/clsx.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 otp_field_module_default from "./otp-field.module.js";
+import { OTPFieldInput } from "./otp-field-input.js";
+import { OTPFieldSeparator } from "./otp-field-separator.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+import * as React from "react";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/components/otp-field/otp-field.tsx
+var OTPFieldRoot = ({ children, className, description, dirty, disabled, error, fullWidth = false, invalid, label, name, onValueComplete, onValueInvalid, ref, render, touched, validate, validationDebounceTime, validationMode, ...otpRootProps }) => {
+	const [wigglePass, setWigglePass] = React.useState();
+	const bumpWiggle = () => {
+		setWigglePass((current) => current === "a" ? "b" : "a");
+	};
+	const handleValueInvalid = (value, eventDetails) => {
+		bumpWiggle();
+		onValueInvalid?.(value, eventDetails);
+	};
+	const handleValueComplete = (value, eventDetails) => {
+		if (invalid) bumpWiggle();
+		onValueComplete?.(value, eventDetails);
+	};
+	return /* @__PURE__ */ jsxs(Field.Root, {
+		className: clsx(otp_field_module_default.OTPField, className),
+		"data-fullwidth": fullWidth,
+		dirty,
+		disabled,
+		invalid,
+		name,
+		ref,
+		render: /* @__PURE__ */ jsx(Stack, {
+			expandChildren: true,
+			rowGap: "s"
+		}),
+		touched,
+		validate,
+		validationDebounceTime,
+		validationMode,
+		children: [
+			label && /* @__PURE__ */ jsx(Field.Label, {
+				className: otp_field_module_default.Label,
+				children: /* @__PURE__ */ jsx(FieldLabel, { children: label })
+			}),
+			/* @__PURE__ */ jsx(OTPField.Root, {
+				...otpRootProps,
+				className: clsx(otp_field_module_default.SlotCluster, wigglePass === "a" && otp_field_module_default.WiggleA, wigglePass === "b" && otp_field_module_default.WiggleB),
+				disabled,
+				name,
+				onValueComplete: handleValueComplete,
+				onValueInvalid: handleValueInvalid,
+				render: render ?? /* @__PURE__ */ jsx(Stack, {
+					columnGap: "s",
+					direction: "row",
+					expandChildren: fullWidth,
+					fullWidth,
+					vAlign: "center"
+				}),
+				children
+			}),
+			/* @__PURE__ */ jsx(FieldHelperCopy, {
+				className: otp_field_module_default.Description,
+				description,
+				error
+			})
+		]
+	});
+};
+var OTPField$1 = Object.assign(OTPFieldRoot, {
+	Input: OTPFieldInput,
+	Separator: OTPFieldSeparator
+});
+//#endregion
+export { OTPField$1 as OTPField };

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

@@ -0,0 +1,23 @@
+//#region src/components/otp-field/otp-field.module.css
+var OTPField = "viraui__otp-field-module__OTPField_8UOfz";
+var OTPFieldWiggleA = "viraui__otp-field-module__OTPFieldWiggleA_gLGT0";
+var Label = "viraui__otp-field-module__Label_7eZGm";
+var SlotCluster = "viraui__otp-field-module__SlotCluster_nJxZ4";
+var WiggleA = "viraui__otp-field-module__WiggleA_5-MVD";
+var WiggleB = "viraui__otp-field-module__WiggleB_pfeA5";
+var OTPFieldWiggleB = "viraui__otp-field-module__OTPFieldWiggleB_0IC0k";
+var Description = "viraui__otp-field-module__Description_pYBbZ";
+var Slot = "viraui__otp-field-module__Slot_G3aie";
+var otp_field_module_default = {
+	OTPField,
+	OTPFieldWiggleA,
+	Label,
+	SlotCluster,
+	WiggleA,
+	WiggleB,
+	OTPFieldWiggleB,
+	Description,
+	Slot
+};
+//#endregion
+export { Description, Label, OTPField, OTPFieldWiggleA, OTPFieldWiggleB, Slot, SlotCluster, WiggleA, WiggleB, otp_field_module_default as default };

package/dist/components/popover/popover-sheet.d.ts

@@ -8,7 +8,7 @@ type PopoverSheetContainerProps = {
      * 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 PrimitivePopover.Portal>['container'];
 };
@@ -17,7 +17,7 @@ type PopoverSheetStyledProps = PopoverSheetPositionerProps & PopoverSheetContain
      * Whether to skip the built-in Surface, header, and close chrome and render
      * only the positioning/animation shell (Portal + Positioner + Popup + Viewport).
      *
-     * @default false
+     * @defaultValue false
      */
     unstyled?: false;
     /**
@@ -27,19 +27,19 @@ type PopoverSheetStyledProps = PopoverSheetPositionerProps & PopoverSheetContain
     /**
      * Supporting copy announced with the title.
      *
-     * @default No description is rendered.
+     * @defaultValue No description is rendered.
      */
     description?: React.ReactNode;
     /**
      * Whether to show the built-in flat IconButton close control.
      *
-     * @default false
+     * @defaultValue false
      */
     showCloseButton?: boolean;
     /**
      * Aligns the header content.
      *
-     * @default `start`
+     * @defaultValue `start`
      */
     headerAlign?: Extract<StackProps['hAlign'], 'start' | 'center' | 'end'>;
 };
@@ -68,7 +68,7 @@ type PopoverSheetUnstyledProps = PopoverSheetPositionerProps & PopoverSheetConta
  * and must compose `Popover.Title` (and `Popover.Description` when needed) for
  * accessible naming.
  *
- * @default `sideOffset` is `8`; no description, no close button, styled chrome.
+ * @defaultValue `sideOffset` is `8`; no description, no close button, styled chrome.
  */
 export type PopoverSheetProps = PopoverSheetStyledProps | PopoverSheetUnstyledProps;
 export declare const PopoverSheet: React.FC<PopoverSheetProps>;

package/dist/components/popover/popover.d.ts

@@ -9,7 +9,7 @@ import type * as React from 'react';
  * and `handle` for detached/multiple 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 PopoverProps = PopoverRoot.Props;
 /**
@@ -21,7 +21,7 @@ export type PopoverProps = PopoverRoot.Props;
  * `payload` for per-trigger content, `openOnHover`/`delay`/`closeDelay` for hover
  * open behavior, and `id` for controlled activation via the Root `triggerId` prop.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type PopoverTriggerProps = PopoverTriggerNamespace.Props;
 /**
@@ -33,7 +33,7 @@ export type PopoverTriggerProps = PopoverTriggerNamespace.Props;
  *
  * Compose inside `Popover.Sheet` so the control closes the open popover.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type PopoverCloseProps = PopoverCloseNamespace.Props;
 /**
@@ -44,7 +44,7 @@ export type PopoverCloseProps = PopoverCloseNamespace.Props;
  * `Popover.Sheet` so the popup keeps an accessible name; the styled sheet
  * renders it internally from its `title` prop.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type PopoverTitleProps = PopoverTitleNamespace.Props;
 /**
@@ -55,7 +55,7 @@ export type PopoverTitleProps = PopoverTitleNamespace.Props;
  * `Popover.Sheet`; the styled sheet renders it internally from its
  * `description` prop.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type PopoverDescriptionProps = PopoverDescriptionNamespace.Props;
 export declare const PopoverTrigger: PrimitivePopover.Trigger;

package/dist/components/progressive-blur/progressive-blur.d.ts

@@ -6,31 +6,31 @@ import type * as React from 'react';
  * Includes standard `div` attributes such as `id`, `className`, and event handlers,
  * plus Vira-owned progressive backdrop blur controls.
  *
- * @default Native div pass-through props keep React defaults.
+ * @defaultValue Native div pass-through props keep React defaults.
  */
 export type ProgressiveBlurProps = React.ComponentPropsWithRef<'div'> & {
     /**
      * Sets the maximum blur radius applied to the first layer at the selected edge.
      *
-     * @default '16px'
+     * @defaultValue '16px'
      */
     blur?: string;
     /**
      * Selects the edge where maximum blur starts and fades toward the opposite edge.
      *
-     * @default 'bottom'
+     * @defaultValue 'bottom'
      */
     direction?: ProgressiveBlurDirection;
     /**
      * Selects the easing curve used to distribute blur factors across internal layers.
      *
-     * @default 'exponential'
+     * @defaultValue 'exponential'
      */
     easing?: ProgressiveBlurEasing;
     /**
      * Sets the number of internal blur layers. Values are clamped to `2..16`.
      *
-     * @default Varies by easing: linear `6`, ease-in/out `8`, ease-in-out `10`, exponential `8`.
+     * @defaultValue Varies by easing: linear `6`, ease-in/out `8`, ease-in-out `10`, exponential `8`.
      */
     steps?: number;
 };

package/dist/components/prose/index.d.ts

@@ -0,0 +1,2 @@
+export { Prose } from './prose';
+export type { ProseProps } from './prose';

package/dist/components/prose/prose.css

@@ -0,0 +1 @@
+@layer viraui.preflight, viraui.components, viraui.overrides;@layer viraui.components{@property --vui-prose-align{syntax:"*";inherits:false;initial-value:start}@property --vui-prose-gap-blocks{syntax:"<length>";inherits:true;initial-value:2em}@property --vui-prose-gap-heading-start{syntax:"<length>";inherits:true;initial-value:1.3em}@property --vui-prose-gap-heading-end{syntax:"<length>";inherits:true;initial-value:.8em}.viraui__prose-module__Prose_8yO9h{--vui-prose-gap-blocks:2em;--vui-prose-gap-heading-start:1.3em;--vui-prose-gap-heading-end:0.8em;&[data-prose-gap=s]{--vui-prose-gap-blocks:1em;--vui-prose-gap-heading-start:0.7em;--vui-prose-gap-heading-end:0.3em}&[data-prose-gap=m]{--vui-prose-gap-blocks:1.5em;--vui-prose-gap-heading-start:1em;--vui-prose-gap-heading-end:0.6em}&[data-prose-has-align=true]{text-align:var(--vui-prose-align)}&>:is(h1,h2,h3,h4,h5,h6,hgroup,ul,ol,dd,p,figure,img,pre,table,fieldset,blockquote,picture,div):where(:not(:first-child)){margin-block:var(--vui-prose-gap-blocks)}&>:is(h1,h2,h3,h4,h5,h6)+*{margin-block-start:var(--vui-prose-gap-heading-start)}&>:is(h1,h2,h3,h4,h5,h6){margin-block-end:var(--vui-prose-gap-heading-end);text-box:trim-both cap alphabetic}}}

package/dist/components/prose/prose.d.ts

@@ -0,0 +1,40 @@
+import { useRender } from '@base-ui/react/use-render';
+import type * as React from 'react';
+type ProseGap = 's' | 'm' | 'l';
+/**
+ * Public Prose props.
+ *
+ * Grouping wrapper for document blocks. Native `div` attributes pass through.
+ * Replace the root with Base UI `render` (for example `article`). No `as` prop.
+ *
+ * @defaultValue Native div pass-through props keep React defaults.
+ */
+export type ProseProps = React.ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Em density for heading-aware vertical rhythm (`s` < `m` < `l`).
+     *
+     * @defaultValue 'l'
+     */
+    gap?: ProseGap;
+    /**
+     * Aligns the region using logical alignment values.
+     * Omit so `text-align` inherits from the parent. Title/Text children that omit `align` inherit this value.
+     *
+     * @defaultValue Inherits parent `text-align`.
+     */
+    align?: React.CSSProperties['textAlign'];
+    /**
+     * Replaces the default `div` root using Base UI render semantics.
+     *
+     * @defaultValue The prose region renders a `div` root.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Ref forwarded to the rendered prose root element.
+     *
+     * @defaultValue No ref is attached.
+     */
+    ref?: React.Ref<HTMLElement>;
+};
+export declare const Prose: React.FC<ProseProps>;
+export {};

package/dist/components/prose/prose.js

@@ -0,0 +1,27 @@
+"use client";
+import './prose.css';
+import { clsx } from "../../core/clsx.js";
+import prose_module_default from "./prose.module.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/prose/prose.tsx
+var Prose = ({ align, className, gap = "l", ref, render, style, ...otherProps }) => {
+	const hasAlign = align !== void 0;
+	const dynamicStyle = {
+		...hasAlign && { "--vui-prose-align": align },
+		...style
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref,
+		props: {
+			...otherProps,
+			"data-prose-gap": gap,
+			"data-prose-has-align": hasAlign ? "true" : "false",
+			className: clsx(prose_module_default.Prose, className),
+			style: dynamicStyle
+		}
+	});
+};
+//#endregion
+export { Prose };

package/dist/components/prose/prose.module.js

@@ -0,0 +1,5 @@
+//#region src/components/prose/prose.module.css
+var Prose = "viraui__prose-module__Prose_8yO9h";
+var prose_module_default = { Prose };
+//#endregion
+export { Prose, prose_module_default as default };

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

@@ -5,7 +5,7 @@ import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react';
  * Thin wrapper around Base UI `RadioGroup` 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 RadioGroupProps<Value = string> = RadioGroupPrimitive.Props<Value>;
 export declare const RadioGroup: <Value>({ children, className, ...otherProps }: RadioGroupProps<Value>) => import('react').JSX.Element;

package/dist/components/radio/radio.d.ts

@@ -7,37 +7,37 @@ import type * as React from 'react';
  * Self-contained option row for use inside `RadioGroup`. Group-level `name`,
  * `invalid`, and `error` belong on an external `Field.Root` and `Fieldset`, not on individual options.
  *
- * @default Base UI pass-through props keep upstream defaults.
+ * @defaultValue Base UI pass-through props keep upstream defaults.
  */
 export type RadioProps = RadioRoot.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` for this option.
      *
-     * @default No description is rendered.
+     * @defaultValue No description is rendered.
      */
     description?: React.ReactNode;
     /**
      * Controls the visual radio size.
      *
-     * @default 's'
+     * @defaultValue 's'
      */
     size?: 'm' | 's';
     /**
      * Sets block padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No block padding.
+     * @defaultValue No block padding.
      */
     vPadding?: StackProps['vPadding'];
     /**
      * Sets inline padding using one token for both sides or a `[start, end]` tuple.
      *
-     * @default No inline padding.
+     * @defaultValue No inline padding.
      */
     hPadding?: StackProps['hPadding'];
 };