@forte-ui/react 1.0.0-alpha.1

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

@@ -0,0 +1,303 @@
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import * as React from "react";
+export type NumberFieldSize = "sm" | "md" | "lg";
+export type NumberFieldVariant = "outline" | "soft" | "ghost";
+export type NumberFieldScrubDirection = "horizontal" | "vertical";
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseNumberField.Root>;
+export interface NumberFieldRootProps extends Omit<BaseRootProps, "className"> {
+    /**
+     * Size of the control. Height, inline padding, stepper width and font size
+     * all move together, and the numbers come from the same `--forte-control-*`
+     * tokens `Input` and `Select.Trigger` read — so the three line up on one row
+     * at every `data-forte-density` setting.
+     * @default "md"
+     */
+    size?: NumberFieldSize;
+    /**
+     * How much visual weight the control carries. `outline` reads as a form
+     * control, `soft` as a filled field, `ghost` as an inline affordance — the
+     * same three `Input` has.
+     * @default "outline"
+     */
+    variant?: NumberFieldVariant;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Groups every part of the number field and owns its value. Renders a `<div>`
+ * laid out as a column, so a `ScrubArea` wrapping the label sits above the
+ * `Group`.
+ *
+ * The value is a `number | null`, never a string: `null` is the empty field,
+ * which is what makes "cleared" distinguishable from zero. `format` takes
+ * `Intl.NumberFormatOptions`, so currency, percent and unit displays are a prop
+ * rather than a wrapper.
+ *
+ * ```tsx
+ * <NumberField.Root defaultValue={100} min={0} max={999}>
+ *   <NumberField.ScrubArea>
+ *     <Field.Label>Width</Field.Label>
+ *   </NumberField.ScrubArea>
+ *   <NumberField.Group>
+ *     <NumberField.Decrement />
+ *     <NumberField.Input />
+ *     <NumberField.Increment />
+ *   </NumberField.Group>
+ * </NumberField.Root>
+ * ```
+ */
+export declare const NumberFieldRoot: React.ForwardRefExoticComponent<NumberFieldRootProps & React.RefAttributes<HTMLDivElement>>;
+type BaseGroupProps = React.ComponentPropsWithoutRef<typeof BaseNumberField.Group>;
+export interface NumberFieldGroupProps extends Omit<BaseGroupProps, "className"> {
+    /**
+     * Stretch the group to fill the width of its container. Only needed outside
+     * a `Field.Root` — a field is a flex column, so a group inside one already
+     * stretches.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The bordered shell holding the steppers and the input. Renders a `<div>`, and
+ * it — not the input — is the element that looks like the control: the input
+ * inside it is borderless and transparent, so the three segments read as one
+ * box.
+ *
+ * Which is why the group carries `.forte-focus-ring-within` rather than the input
+ * carrying `.forte-focus-ring`. Focusing the text field rings the whole control,
+ * the way focusing an `Input` rings the whole input — and since the steppers are
+ * not tab stops, that is the only ring anyone sees by default. An app that puts
+ * them back in the tab order gets an inset ring on the button instead; the
+ * stylesheet suppresses the group's ring in that case so the two never stack.
+ *
+ * The one thing that DOES stack is an app-level global `:focus-visible` rule.
+ * It outranks every `forte-ui` layer by design, so it re-rings the input this
+ * component deliberately left unringed, and the control wears two rings — a
+ * rounded one around the group and a square-cornered one around the middle
+ * segment. Scope such a rule away from parts a component already rings:
+ * `:focus-visible:not(:where(.forte-focus-ring-within *))`.
+ *
+ * `data-scrubbing` lands here while a `ScrubArea` drag is running, which is
+ * what ties the drag happening on the label back to the value it is changing.
+ */
+export declare const NumberFieldGroup: React.ForwardRefExoticComponent<NumberFieldGroupProps & React.RefAttributes<HTMLDivElement>>;
+type BaseInputProps = React.ComponentPropsWithoutRef<typeof BaseNumberField.Input>;
+export interface NumberFieldInputProps extends Omit<BaseInputProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The text field itself. Renders an `<input>` that is borderless and
+ * transparent — `Group` draws the box around it.
+ *
+ * The digits are set in `tabular-nums`. That is not typographic polish: during
+ * a scrub the value changes every few pixels of pointer movement, and
+ * proportional figures make the number visibly breathe as the digits change
+ * width. Tabular figures hold still.
+ *
+ * Base UI gives it `aria-roledescription="Number field"` and wires it to a
+ * `Field.Label` above; the label names it, the role description explains it.
+ */
+export declare const NumberFieldInput: React.ForwardRefExoticComponent<NumberFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+type BaseIncrementProps = React.ComponentPropsWithoutRef<typeof BaseNumberField.Increment>;
+export interface NumberFieldIncrementProps extends Omit<BaseIncrementProps, "className"> {
+    /**
+     * Glyph to render. Defaults to a plus sign.
+     * @default <PlusIcon />
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The stepper that increases the value. Renders a `<button>`.
+ *
+ * Base UI gives it `aria-label="Increase"` and `aria-controls` pointing at the
+ * input, so the default glyph needs no label of its own — and `tabIndex={-1}`,
+ * so it is a pointer affordance rather than a tab stop. That is the right shape
+ * for a spin button: the arrow keys already step the value from the field
+ * itself, and two extra stops per field would cost keyboard users presses
+ * without adding a capability.
+ *
+ * Holding it repeats, and the modifier keys apply to a press as well —
+ * <kbd>Alt</kbd> steps by `smallStep`, <kbd>Shift</kbd> by `largeStep`.
+ */
+export declare const NumberFieldIncrement: React.ForwardRefExoticComponent<NumberFieldIncrementProps & React.RefAttributes<HTMLButtonElement>>;
+type BaseDecrementProps = React.ComponentPropsWithoutRef<typeof BaseNumberField.Decrement>;
+export interface NumberFieldDecrementProps extends Omit<BaseDecrementProps, "className"> {
+    /**
+     * Glyph to render. Defaults to a minus sign.
+     * @default <MinusIcon />
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The stepper that decreases the value. Renders a `<button>`, labelled
+ * "Decrease" by Base UI and outside the tab order for the same reason
+ * `Increment` is.
+ *
+ * Put it before `Input` in the markup. The order is physical, not logical: it
+ * is what makes the minus land on the start edge, and it flips with `dir="rtl"`
+ * on its own because the group is a flex row and its corner radii are logical.
+ */
+export declare const NumberFieldDecrement: React.ForwardRefExoticComponent<NumberFieldDecrementProps & React.RefAttributes<HTMLButtonElement>>;
+type BaseScrubAreaProps = React.ComponentPropsWithoutRef<typeof BaseNumberField.ScrubArea>;
+export interface NumberFieldScrubAreaProps extends Omit<BaseScrubAreaProps, "className"> {
+    /**
+     * Axis the pointer has to travel along. Also picks the resize cursor and the
+     * rotation of both scrub glyphs.
+     * @default "horizontal"
+     */
+    direction?: NumberFieldScrubDirection;
+    /**
+     * Render the double-headed arrow after the children.
+     *
+     * This is the whole reason a scrub area is discoverable: nothing else about a
+     * label suggests it can be dragged, and a cursor change only arrives once the
+     * pointer is already on it. Turn it off when the surrounding design carries
+     * the affordance some other way — never just to tidy the layout.
+     * @default true
+     */
+    grip?: boolean;
+    /**
+     * Render a `ScrubAreaCursor` with the default glyph.
+     *
+     * Scrubbing takes a pointer lock, and a locked pointer is an INVISIBLE one —
+     * without a stand-in the user drags with no cursor at all. That is why this
+     * defaults to on. Set it to `false` when you want to supply your own, and
+     * render `<NumberField.ScrubAreaCursor>` inside the scrub area yourself.
+     * @default true
+     */
+    cursor?: boolean;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The click-and-drag surface. Renders a `<span>`, and is normally wrapped
+ * around the field's label — dragging sideways over the word "Width" changes
+ * the width, which is the interaction Figma and Blender taught everyone.
+ *
+ * Scrubbing is invisible unless the component says so, so three cues ship by
+ * default and they cover three different moments:
+ *
+ * 1. **At rest** — the `grip`, a double-headed arrow after the label. This is
+ *    the only cue present before the user has done anything, and the only one a
+ *    touch user ever sees, so it is on by default.
+ * 2. **On hover** — a resize cursor (`ew-resize` / `ns-resize`, per
+ *    `direction`) and a panel wash behind the label.
+ * 3. **During the drag** — `data-scrubbing` tints this area and the `Group`'s
+ *    border, and the `cursor` stands in for the pointer the lock has hidden.
+ *
+ * The resize cursor is a deliberate exception to the library's pointer rule.
+ * `cursor: pointer` promises "click me and something happens", and clicking a
+ * scrub area does nothing at all — the value only moves once the pointer does.
+ * The resize cursor is the one the platform already uses for exactly this
+ * gesture.
+ *
+ * ```tsx
+ * <NumberField.ScrubArea direction="vertical" pixelSensitivity={3}>
+ *   <Field.Label>Opacity</Field.Label>
+ * </NumberField.ScrubArea>
+ * ```
+ */
+export declare const NumberFieldScrubArea: React.ForwardRefExoticComponent<NumberFieldScrubAreaProps & React.RefAttributes<HTMLSpanElement>>;
+type BaseScrubAreaCursorProps = React.ComponentPropsWithoutRef<typeof BaseNumberField.ScrubAreaCursor>;
+export interface NumberFieldScrubAreaCursorProps extends Omit<BaseScrubAreaCursorProps, "className"> {
+    /**
+     * Glyph to render. Defaults to a haloed double-headed arrow, rotated to match
+     * the scrub area's `direction`.
+     * @default <ScrubCursorIcon />
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The stand-in for the mouse pointer while a scrub is running. Renders a
+ * `<span>` portalled to `<body>` and positioned by Base UI, only while the drag
+ * is live.
+ *
+ * `ScrubArea` renders one for you; reach for this directly only to supply a
+ * different glyph, and pass `cursor={false}` to the scrub area when you do.
+ *
+ * Two consequences of the portal are worth knowing. It does not inherit a
+ * `.forte-theme` scope, so it paints from whatever the document root resolves —
+ * the same trade every portalled surface in this library makes. And Base UI
+ * writes `transform` on it on every pointer move, so nothing here may animate
+ * or set that property.
+ *
+ * It does not render at all in Safari (which shifts the layout when a pointer
+ * lock is taken) or after a denied lock; the native cursor stays visible in
+ * both cases, so the drag still works — it just looks ordinary.
+ */
+export declare const NumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<NumberFieldScrubAreaCursorProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * A number field built on Base UI's `NumberField` primitive.
+ *
+ * It is a text input that knows it holds a number: it parses and formats with
+ * `Intl.NumberFormat`, steps with the arrow keys and the two stepper buttons,
+ * clamps to `min`/`max`, and hands a form a real `number | null` rather than a
+ * string that happens to look numeric.
+ *
+ * ```tsx
+ * <Field.Root name="quantity">
+ *   <NumberField.Root defaultValue={1} min={1} max={99}>
+ *     <NumberField.ScrubArea>
+ *       <Field.Label>Quantity</Field.Label>
+ *     </NumberField.ScrubArea>
+ *     <NumberField.Group>
+ *       <NumberField.Decrement />
+ *       <NumberField.Input />
+ *       <NumberField.Increment />
+ *     </NumberField.Group>
+ *   </NumberField.Root>
+ * </Field.Root>
+ * ```
+ *
+ * The `ScrubArea` is the part worth knowing about: wrap it around the label and
+ * the label becomes a drag handle. It ships its own affordances — a grip glyph
+ * at rest, a resize cursor on hover, a tint plus a stand-in pointer during the
+ * drag — because a draggable label that looks like a label is a feature nobody
+ * discovers. See `NumberField.ScrubArea` for the three cues and how to replace
+ * them.
+ *
+ * Motion — the steppers snap in on `--forte-duration-instant` and spring back
+ * out, the way `Button` does. Nothing animates the value itself: it changes
+ * every few pixels of a scrub, so a transition on the digits would spend the
+ * whole gesture interpolating toward a number that has already moved.
+ */
+export declare const NumberField: {
+    Root: React.ForwardRefExoticComponent<NumberFieldRootProps & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<NumberFieldGroupProps & React.RefAttributes<HTMLDivElement>>;
+    Input: React.ForwardRefExoticComponent<NumberFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+    Increment: React.ForwardRefExoticComponent<NumberFieldIncrementProps & React.RefAttributes<HTMLButtonElement>>;
+    Decrement: React.ForwardRefExoticComponent<NumberFieldDecrementProps & React.RefAttributes<HTMLButtonElement>>;
+    ScrubArea: React.ForwardRefExoticComponent<NumberFieldScrubAreaProps & React.RefAttributes<HTMLSpanElement>>;
+    ScrubAreaCursor: React.ForwardRefExoticComponent<NumberFieldScrubAreaCursorProps & React.RefAttributes<HTMLSpanElement>>;
+};
+export {};

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

@@ -0,0 +1,3 @@
+"use client";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../../NumberField-P55SA8T7.js";
+export { s as NumberField, r as NumberFieldDecrement, a as NumberFieldGroup, n as NumberFieldIncrement, e as NumberFieldInput, i as NumberFieldRoot, o as NumberFieldScrubArea, t as NumberFieldScrubAreaCursor };

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

@@ -0,0 +1,2 @@
+export { NumberField, NumberFieldRoot, NumberFieldGroup, NumberFieldInput, NumberFieldIncrement, NumberFieldDecrement, NumberFieldScrubArea, NumberFieldScrubAreaCursor, } from './NumberField';
+export type { NumberFieldSize, NumberFieldVariant, NumberFieldScrubDirection, NumberFieldRootProps, NumberFieldGroupProps, NumberFieldInputProps, NumberFieldIncrementProps, NumberFieldDecrementProps, NumberFieldScrubAreaProps, NumberFieldScrubAreaCursorProps, } from './NumberField';

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

@@ -0,0 +1,2 @@
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../../NumberField-P55SA8T7.js";
+export { s as NumberField, r as NumberFieldDecrement, a as NumberFieldGroup, n as NumberFieldIncrement, e as NumberFieldInput, i as NumberFieldRoot, o as NumberFieldScrubArea, t as NumberFieldScrubAreaCursor };

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

@@ -0,0 +1,206 @@
+import { OTPField as BaseOTPField } from '@base-ui/react/otp-field';
+import { SeparatorProps } from '../separator';
+import * as React from "react";
+export type OTPFieldSize = "sm" | "md" | "lg";
+export type OTPFieldVariant = "outline" | "soft" | "underline";
+type BaseRootProps = React.ComponentPropsWithoutRef<typeof BaseOTPField.Root>;
+type BaseInputProps = React.ComponentPropsWithoutRef<typeof BaseOTPField.Input>;
+/**
+ * `numeric` (the default), `alpha`, `alphanumeric`, or `none` to accept
+ * anything. Derived from Base UI rather than restated, so a value it adds
+ * arrives here without an edit.
+ */
+export type OTPFieldValidationType = NonNullable<BaseRootProps["validationType"]>;
+export interface OTPFieldRootProps extends Omit<BaseRootProps, "className" | "children" | "length" | "mask" | "validationType" | "autoSubmit"> {
+    /**
+     * How many characters the code has, and therefore how many slots the field
+     * renders. Required: the root clamps the value, decides when it is complete
+     * and writes the hidden input's `pattern` from it, all of which have to be
+     * right on the server render, before a single slot has mounted.
+     *
+     * When you pass your own children, the number of `<OTPField.Input>`s has to
+     * match — Base UI warns in development when it does not.
+     */
+    length: BaseRootProps["length"];
+    /**
+     * Replace each character with a dot, the way a password field does.
+     *
+     * Off by default, and worth leaving off. A code that is read off a phone and
+     * typed once has nothing to shoulder-surf that the SMS did not already
+     * expose, and hiding it takes away the user's only way to check what they
+     * typed.
+     * @default false
+     */
+    mask?: BaseRootProps["mask"];
+    /**
+     * Which characters the field accepts. Anything else is dropped as it is
+     * typed or pasted and reported through `onValueInvalid`, so a code copied
+     * with a stray space or a dash still lands correctly.
+     *
+     * It also picks the virtual keyboard: `numeric` asks for the digit pad,
+     * which is most of why a phone is bearable to type a code on. Override
+     * `inputMode` if you need a different one.
+     * @default "numeric"
+     */
+    validationType?: OTPFieldValidationType;
+    /**
+     * Submit the owning form as soon as the last slot is filled.
+     *
+     * The reason to want it is that the code is the whole form — there is
+     * nothing left to review, and a Verify button is a step whose only content
+     * is "yes, I meant the six digits I just typed". `onValueComplete` runs
+     * immediately before the submit, so you can still stop it.
+     * @default false
+     */
+    autoSubmit?: BaseRootProps["autoSubmit"];
+    /**
+     * Size of the slots. Sets their square side and the character's font size
+     * together, and the side comes from the same `--forte-control-*` tokens
+     * `Input` and `Select.Trigger` read — so a code field lines up with the rest
+     * of a form at every `data-forte-density` setting.
+     * @default "md"
+     */
+    size?: OTPFieldSize;
+    /**
+     * How much visual weight each slot carries. `outline` reads as a form
+     * control, `soft` as a filled field, `underline` as a row of rules.
+     *
+     * There is no `ghost`, unlike `Input`: a slot with no boundary leaves
+     * nothing to count, and how many characters the code has is the one thing
+     * the field has to say before anything is typed.
+     * @default "outline"
+     */
+    variant?: OTPFieldVariant;
+    /**
+     * The slots, and anything between them. Leave it out and the root renders
+     * `length` plain `<OTPField.Input>`s for you — the common case, and the one
+     * where Base UI otherwise warns at runtime if the count and `length`
+     * disagree.
+     *
+     * Pass children when the row is not uniform: groups split by an
+     * `<OTPField.Separator />`, or a slot with its own `aria-label`. The count
+     * still has to equal `length`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * Groups every slot of a one-time-code field and owns the value. Renders a
+ * `<div role="group">` laid out as a wrapping flex row, plus a visually hidden
+ * `<input>` beside it that carries the whole code into form submission and
+ * constraint validation.
+ *
+ * ```tsx
+ * <Field.Root name="code">
+ *   <Field.Label>Verification code</Field.Label>
+ *   <OTPField.Root length={6} />
+ * </Field.Root>
+ * ```
+ *
+ * The value is one string, not one per slot: `value`, `defaultValue`,
+ * `onValueChange` and `onValueComplete` all speak in `"123456"`. Typing
+ * advances, Backspace retreats, and a paste fills from the slot it lands on —
+ * Base UI owns all of that, including clamping to `length` and filtering by
+ * `validationType`.
+ *
+ * `autoComplete` defaults to `"one-time-code"`, which is what lets iOS and
+ * Android offer a code straight from the SMS that just arrived. Do not
+ * override it without a reason.
+ *
+ * State is exposed on `data-*` (`data-complete`, `data-filled`,
+ * `data-disabled`, `data-readonly`, plus `data-invalid`, `data-valid`,
+ * `data-dirty`, `data-touched` and `data-focused` inside a `Field.Root`) and
+ * every visual decision is a `--forte-otp-field-*` custom property, so it can be
+ * re-skinned from plain CSS or targeted with Tailwind arbitrary variants
+ * (`data-[complete]:...`) without wrapping.
+ */
+export declare const OTPFieldRoot: React.ForwardRefExoticComponent<OTPFieldRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface OTPFieldInputProps extends Omit<BaseInputProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * One character of the code. Renders an `<input>`.
+ *
+ * Slots take their index from the order they are rendered in, so there is no
+ * `index` prop to keep in step — but the number of them must equal the root's
+ * `length`, and Base UI warns in development when it does not. Render them
+ * yourself only when the row needs something a bare list cannot express;
+ * otherwise let `OTPField.Root` produce them.
+ *
+ * Exactly one slot is in the tab order at a time, which is what makes the
+ * whole field a single tab stop rather than six. Focusing one selects its
+ * character, so the next keypress replaces it instead of being rejected by a
+ * full slot.
+ *
+ * `aria-label` on the FIRST slot is ignored — Base UI warns about it — because
+ * the name belongs to the group, not to a character of it. Name the field with
+ * a `<Field.Label>` or a `<label>` instead.
+ */
+export declare const OTPFieldInput: React.ForwardRefExoticComponent<OTPFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+export interface OTPFieldSeparatorProps extends SeparatorProps {
+    /**
+     * Drops `role="separator"`, leaving the dash visible but absent from the
+     * accessibility tree.
+     *
+     * Defaults to `true` here, which is the opposite of a standalone
+     * `Separator`: the slots either side of it are one value and one control,
+     * so the grouping is a reading aid for the eye only. Announcing a boundary
+     * in the middle of a six-digit code describes the layout, not the field.
+     * @default true
+     */
+    decorative?: boolean;
+}
+/**
+ * The dash between two groups of slots — the `123 – 456` shape a six-digit
+ * code is usually printed in. Renders the library's `Separator`, so it carries
+ * `data-forte="separator"` rather than a marker of its own; scope to it with
+ * `[data-forte="otp-field"] [data-forte="separator"]`.
+ *
+ * It is a **horizontal** rule sized to `--forte-otp-field-separator-length`,
+ * not a vertical bar, and it counts against nothing: `length` is the number of
+ * `Input`s, so a separator can go anywhere between them.
+ *
+ * ```tsx
+ * <OTPField.Root length={6}>
+ *   <OTPField.Input />
+ *   <OTPField.Input />
+ *   <OTPField.Input />
+ *   <OTPField.Separator />
+ *   <OTPField.Input />
+ *   <OTPField.Input />
+ *   <OTPField.Input />
+ * </OTPField.Root>
+ * ```
+ */
+export declare const OTPFieldSeparator: React.ForwardRefExoticComponent<OTPFieldSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A one-time-code field built on Base UI's `OTPField` primitive.
+ *
+ * ```tsx
+ * <OTPField.Root
+ *   length={6}
+ *   onValueComplete={(code) => verify(code)}
+ * />
+ * ```
+ *
+ * Motion — there is none, and that is a decision rather than an omission. The
+ * only thing that changes as the user types is which slot holds a character,
+ * and a slot that grew, bounced or flashed on fill would do it up to six times
+ * in the two seconds it takes to enter a code, next to the caret the user is
+ * watching. What does transition is colour: the boundary on hover, on
+ * completion and on failure, each of which has a start and an end.
+ */
+export declare const OTPField: {
+    Root: React.ForwardRefExoticComponent<OTPFieldRootProps & React.RefAttributes<HTMLDivElement>>;
+    Input: React.ForwardRefExoticComponent<OTPFieldInputProps & React.RefAttributes<HTMLInputElement>>;
+    Separator: React.ForwardRefExoticComponent<OTPFieldSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

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

@@ -0,0 +1,3 @@
+"use client";
+import { i as e, n as t, r as n, t as r } from "../../OTPField-CjHvBNSN.js";
+export { r as OTPField, t as OTPFieldInput, n as OTPFieldRoot, e as OTPFieldSeparator };

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

@@ -0,0 +1,2 @@
+export { OTPField, OTPFieldRoot, OTPFieldInput, OTPFieldSeparator } from './OTPField';
+export type { OTPFieldSize, OTPFieldVariant, OTPFieldValidationType, OTPFieldRootProps, OTPFieldInputProps, OTPFieldSeparatorProps, } from './OTPField';

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

@@ -0,0 +1,2 @@
+import { i as e, n as t, r as n, t as r } from "../../OTPField-CjHvBNSN.js";
+export { r as OTPField, t as OTPFieldInput, n as OTPFieldRoot, e as OTPFieldSeparator };