@xaui/native 0.9.1-alpha.23 → 0.9.1-alpha.25

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

@@ -1,148 +1,140 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
 import * as react_native from 'react-native';
-import { StyleProp, TextStyle, TextInputProps, TextProps, ViewStyle, ViewProps } from 'react-native';
-import { T as TextStyleProps, V as ViewStyleProps } from '../../style-props.type-CfnoGEP7.js';
-import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+import { View, Text, TextInput } from 'react-native';
+import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.js';
+import { R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+import { i as InputVariant, g as InputSize, e as InputLabelPlacement, b as InputContextValue, h as InputSlot } from '../../input.type-DjyZ6P2C.js';
+export { c as InputDescriptionProps, d as InputErrorProps, I as InputFieldProps, f as InputLabelProps, a as InputProps } from '../../input.type-DjyZ6P2C.js';
 import { R as Recipe, g as SlotStyles, j as StyleFn } from '../../create-recipe-C4JkINrA.js';
 
-type InputSlot = 'root' | 'label' | 'field' | 'placeholder' | 'description' | 'error';
 /**
- * The library's four emphasis levels, narrowed like the `Card`'s (§1 bis). A field
- * **reports nothing** — an error is `isInvalid`, which is a state and not a variant — so
- * `success`, `warning` and `danger` are absent here for the same reason they are there.
+ * A text field, with the label, the hint and the error that make it usable.
  *
- * This is where the theme's `field*` family is finally read, and the four names split
- * HeroUI's two-name `primary | secondary` by saying what each of their ends already is:
+ * ```tsx
+ * <Input>
+ *   <Input.Label>Courriel</Input.Label>
+ *   <Input.Field
+ *     value={email}
+ *     onChangeText={setEmail}
+ *     placeholder="nom@exemple.fr"
+ *     keyboardType="email-address"
+ *   />
+ *   <Input.Description>On ne le partage jamais.</Input.Description>
+ * </Input>
  *
- * - **`primary`** — the `fieldBackground` fill plus the theme's `field` shadow. HeroUI's
- *   `primary`, with the elevation their flat token only implies.
- * - **`secondary`** — the neutral `default` fill. HeroUI's `secondary`, and the default
- *   here: on a plain background a white field is its border and nothing else, while on a
- *   card the `fieldBackground` token *is* the card's own colour.
- * - **`tertiary`** — the border alone, no fill. The same drop the `Button`'s `tertiary`
- *   makes.
- * - **`ghost`** — neither. A bare field for a toolbar or an inline edit; it has no border
- *   to move, so its focus shows in the caret alone.
+ * <Input isInvalid={Boolean(error)}>
+ *   <Input.Label>Mot de passe</Input.Label>
+ *   <Input.Field secureTextEntry value={password} onChangeText={setPassword} />
+ *   {error ? <Input.Error>{error}</Input.Error> : null}
+ * </Input>
+ * ```
  *
- * The first three name the `fieldBorder` edge and `ghost` gives it up. Its width is the
- * theme's `borderWidth.field` — HeroUI's `--field-border-width`, which they ship at `0`
- * and we ship at `1`. That is the one shipped default where the two differ;
- * `createTheme({ borderWidth: { field: 0 } })` reproduces theirs.
- */
-type InputVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
-/**
- * Where the label sits relative to the field's box.
+ * **The root is the column, not the field.** `Input.Field` is the `TextInput`, which is
+ * what makes the label, the hint and the error slots of one component rather than three
+ * components a form has to keep in step — and it is why `TextInputProps` are on the field
+ * rather than on the root.
  *
- * `outside` is the label above the box, in the column's flow. `inside` lifts it into the
- * box, above the text — the label is taken **out of flow** and placed against the box's
- * own padding, so the JSX is identical either way and nothing is reparented (R4).
- *
- * Because the inside label positions itself against the top of the root, it assumes the
- * field is the first thing in the column's flow: write `Input.Description` and
- * `Input.Error` after the field, which is where they belong anyway.
+ * There is no auto-wrap here (R3): a string child of an input is not a label, a value or
+ * a placeholder in any way the component could guess.
  */
-type InputLabelPlacement = 'outside' | 'inside';
-type InputSize = Size;
-/**
- * What the `Input` itself understands. R14 — a name in here is the component's, so the
- * style prop that shares it is not exposed: `size` is the field's scale and never
- * `ViewStyle`'s, and `color` is R7's tint.
- */
-type InputOwnProps = {
+declare const InputRoot: react.ForwardRefExoticComponent<{
     variant?: InputVariant;
-    /** The field's height, its padding, the gaps and the type. Never width. */
     size?: InputSize;
-    /** Overrides the `field` radius the theme chose for every size. */
     radius?: RadiusKey;
-    /** Above the box, or lifted into it. @default 'outside' */
     labelPlacement?: InputLabelPlacement;
-    /**
-     * A raw tint (`'#7c3aed'`), never a token (R7). It lands where the variant put its
-     * tokens — the fill of a `default`, the border of a `tertiary` — and, because the focus
-     * colour is a role like any other, it is also what the field borders on focus.
-     */
     color?: string;
-    /**
-     * Paints the border, the label and the description in `danger`, and takes the focus
-     * treatment off: an error outranks focus, and a field that is both should read as
-     * wrong rather than as busy.
-     *
-     * It does **not** mount or unmount `Input.Error`. That stays the caller's — a slot that
-     * silently renders nothing is a slot you cannot debug.
-     */
     isInvalid?: boolean;
-    /** Dims the field and makes it uneditable. */
     isDisabled?: boolean;
-    style?: StyleProp<ViewStyle>;
-    children?: ReactNode;
-};
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    variant?: InputVariant;
+    size?: InputSize;
+    radius?: RadiusKey;
+    labelPlacement?: InputLabelPlacement;
+    color?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<ViewStyleProps, "color" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "isDisabled" | "radius" | "size" | "variant" | "labelPlacement" | "isInvalid"> & {
+    asChild?: boolean;
+} & react.RefAttributes<View>>;
+
 /**
- * R14 — the input's own props, the wrapper `View`'s, and every `ViewStyle` key neither
- * already claims. **`TextInputProps` are not here**: they belong to `Input.Field`, which
- * is the node that has them.
+ * The hint under the field — the format expected, what the value is used for.
+ *
+ * It carries the id the field points at with `aria-describedby`, so it is read after the
+ * label rather than skipped. It turns `danger` with `isInvalid`, like the label.
+ *
+ * It sits inset by half the field's padding, so the column reads as one block rather than
+ * as a label, a box and a stray line.
  */
-type InputProps = InputOwnProps & Omit<ViewProps, keyof InputOwnProps> & Omit<ViewStyleProps, keyof InputOwnProps | keyof ViewProps> & {
-    /** R12 — merge into the single child instead of rendering a `View`. */
-    asChild?: boolean;
-};
+declare const InputDescription: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<Text>>;
+
 /**
- * Everything `TextInput` accepts, plus the `TextStyle` keys as props (R14).
+ * What is wrong with the value, in `danger`.
+ *
+ * **It always renders what it is given.** `isInvalid` paints the border, the label and the
+ * description; it does not mount or unmount this slot, because a slot that silently
+ * renders nothing is a slot you cannot debug — you write the condition yourself and see
+ * it:
+ *
+ * ```tsx
+ * <Input isInvalid={Boolean(error)}>
+ *   <Input.Field value={value} onChangeText={onChange} />
+ *   {error ? <Input.Error>{error}</Input.Error> : null}
+ * </Input>
+ * ```
  *
- * `editable` is absent: it is `disabled` under another name, and R8 keeps that off the
- * public surface — `isDisabled` on the root is what stops the field.
+ * `accessibilityLiveRegion` is deliberately not set: an error that appears while you are
+ * still typing in the field is announced by the field's own `aria-invalid`, and a live
+ * region on top of that reads the message on every keystroke that changes it.
  */
-type InputFieldProps = Omit<TextInputProps, 'editable'> & Omit<TextStyleProps, keyof TextInputProps>;
-/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
-type InputTextProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
-    children?: ReactNode;
-};
-type InputLabelProps = InputTextProps;
-type InputDescriptionProps = InputTextProps;
-type InputErrorProps = InputTextProps;
+declare const InputError: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<Text>>;
+
 /**
- * Read off `TextInput`'s own props rather than spelled out: React Native has renamed the
- * payload of these two more than once, and a hand-written `NativeSyntheticEvent<…>` here
- * would be a second declaration free to drift from the node that actually fires them.
+ * The `TextInput` itself — the one node of this component that the user types into.
+ *
+ * ```tsx
+ * <Input.Field value={email} onChangeText={setEmail} placeholder="nom@exemple.fr" />
+ * ```
+ *
+ * It takes everything `TextInput` takes, which is why `value`, `defaultValue`, `onChange`,
+ * `keyboardType`, `secureTextEntry`, `autoComplete` and `multiline` are written here and
+ * not on the root. There is no `type`: that is an HTML prop, and React Native splits it
+ * into `inputMode`, `keyboardType`, `secureTextEntry` and `autoComplete`.
+ *
+ * What it does *not* take is `editable`: that is `disabled` under another name, and R8
+ * keeps it off the public surface — `isDisabled` on the root is what stops the field.
+ *
+ * It reports focus up rather than styling it (R5): the root's recipe resolves on the
+ * focus state, so the root owns it and this composes the caller's handlers into the two
+ * the context published.
  */
-type FieldFocusEvent = Parameters<NonNullable<TextInputProps['onFocus']>>[0];
-type FieldBlurEvent = Parameters<NonNullable<TextInputProps['onBlur']>>[0];
+declare const InputField: react.ForwardRefExoticComponent<Omit<react_native.TextInputProps, "editable"> & Omit<TextStyleProps, keyof react_native.TextInputProps> & react.RefAttributes<TextInput>>;
+
 /**
- * R5 — resolved styles, not props for a slot to resolve a second time. Each entry is the
- * cached `StyleSheet` reference with the uncached tint pass layered over it, so a slot
- * merges its own `style` on top and does no work of its own.
+ * What the field is for. It turns `danger` with `isInvalid`, so the field that is wrong is
+ * findable on a long form without reading every message.
+ *
+ * It carries the id the field points at, which is what makes a screen reader announce
+ * "Courriel, champ de saisie" instead of reading the placeholder and hoping.
+ *
+ * Its colour comes from the theme's `foreground` rather than the variant's: the label sits
+ * outside the box, on the screen behind it, so a tinted field does not tint it.
  */
-type InputContextValue = {
-    labelStyle: StyleProp<TextStyle>;
-    fieldStyle: StyleProp<TextStyle>;
-    descriptionStyle: StyleProp<TextStyle>;
-    errorStyle: StyleProp<TextStyle>;
-    /**
-     * A value and not a style: `placeholderTextColor` is a `TextInput` prop, so the root
-     * flattens its placeholder slot once here rather than in the field.
-     */
-    placeholderTextColor?: string;
-    /**
-     * The focus state lives on the **root**, because the root's recipe resolves on it (R5)
-     * and it needs the value before it renders — but the node that hears the event is
-     * `Input.Field`, three levels down. These are how it reports back. Their identity is
-     * stable, so publishing them costs no re-render of a memoized slot.
-     */
-    onFieldFocus: (event: FieldFocusEvent) => void;
-    onFieldBlur: (event: FieldBlurEvent) => void;
-    /**
-     * The id the label carries and the field points at, so a screen reader reads "Courriel,
-     * champ de saisie" rather than just the placeholder.
-     */
-    labelId: string;
-    descriptionId: string;
-    isDisabled: boolean;
-    isInvalid: boolean;
-};
+declare const InputLabel: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+    children?: react.ReactNode;
+} & react.RefAttributes<Text>>;
 
 declare const useInput: () => InputContextValue;
 
-declare const inputRecipe: Recipe<"label" | "field" | "description" | "root" | "placeholder" | "error", InputVariant, {
+declare const inputRecipe: Recipe<"label" | "field" | "description" | "root" | "textArea" | "placeholder" | "error", InputVariant, {
     readonly size: {
         readonly xs: (theme: XAUITheme) => SlotStyles<InputSlot>;
         readonly sm: (theme: XAUITheme) => SlotStyles<InputSlot>;
@@ -210,4 +202,4 @@ declare const Input: react.ForwardRefExoticComponent<{
     } & react.RefAttributes<react_native.Text>>;
 };
 
-export { Input, type InputContextValue, type InputDescriptionProps, type InputErrorProps, type InputFieldProps, type InputLabelPlacement, type InputLabelProps, type InputProps, type InputSize, type InputSlot, type InputVariant, inputRecipe, useInput };
+export { Input, InputContextValue, InputDescription, InputError, InputField, InputLabel, InputLabelPlacement, InputRoot, InputSize, InputSlot, InputVariant, inputRecipe, useInput };

package/dist/components/input/index.js

@@ -1,14 +1,24 @@
 import {
   Input,
+  InputDescription,
+  InputError,
+  InputField,
+  InputLabel,
+  InputRoot,
   inputRecipe,
   useInput
-} from "../../chunk-E3LXUXE7.js";
+} from "../../chunk-2OY76YNB.js";
 import "../../chunk-3JATAB7S.js";
-import "../../chunk-A3EGFI6T.js";
 import "../../chunk-PMO62QK4.js";
+import "../../chunk-A3EGFI6T.js";
 import "../../chunk-GGW42MY4.js";
 export {
   Input,
+  InputDescription,
+  InputError,
+  InputField,
+  InputLabel,
+  InputRoot,
   inputRecipe,
   useInput
 };

package/dist/components/input-otp/index.cjs

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+
+
+
+
+
+
+
+var _chunkBULNTP5Ncjs = require('../../chunk-BULNTP5N.cjs');
+require('../../chunk-EJQCQPET.cjs');
+require('../../chunk-YXVKQMCK.cjs');
+require('../../chunk-HUZ4AUM2.cjs');
+require('../../chunk-57SJ4LJF.cjs');
+require('../../chunk-MC7SY2QH.cjs');
+
+
+
+
+
+
+
+
+
+
+exports.InputOTP = _chunkBULNTP5Ncjs.InputOTP; exports.OTP_ALPHANUMERIC = _chunkBULNTP5Ncjs.OTP_ALPHANUMERIC; exports.OTP_DIGITS = _chunkBULNTP5Ncjs.OTP_DIGITS; exports.OTP_LETTERS = _chunkBULNTP5Ncjs.OTP_LETTERS; exports.buildSlots = _chunkBULNTP5Ncjs.buildSlots; exports.extractPastedCode = _chunkBULNTP5Ncjs.extractPastedCode; exports.inputOTPRecipe = _chunkBULNTP5Ncjs.inputOTPRecipe; exports.useInputOTP = _chunkBULNTP5Ncjs.useInputOTP; exports.useInputOTPBox = _chunkBULNTP5Ncjs.useInputOTPBox;

package/dist/components/input-otp/index.d.cts

@@ -0,0 +1,325 @@
+import * as react from 'react';
+import { RefObject, ReactNode } from 'react';
+import * as react_native from 'react-native';
+import { StyleProp, ViewStyle, TextStyle, TextInput, ViewProps, TextProps, TextInputProps } from 'react-native';
+import { V as ViewStyleProps, T as TextStyleProps } from '../../style-props.type-CfnoGEP7.cjs';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.cjs';
+import { R as Recipe, g as SlotStyles, j as StyleFn } from '../../create-recipe-dBN_ewZc.cjs';
+
+/**
+ * The two decisions this component makes that are worth pinning down: which box shows
+ * what, and what survives a paste. Both are pure string work, so they live here and are
+ * tested — the component around them is verified by its demo screen like every other.
+ */
+/** What one box knows about itself. The slots read it; nothing else does. */
+type OTPSlotState = {
+    index: number;
+    /** The character typed here, or `null` while the box is empty. */
+    char: string | null;
+    /** The placeholder for this box, or `null` when a char or the caret takes the room. */
+    placeholderChar: string | null;
+    /** The box the next character will land in. Only ever one, and only while focused. */
+    isActive: boolean;
+    /** Active **and** empty: a caret over a character would sit on top of it. */
+    isCaretVisible: boolean;
+};
+type BuildSlotsArgs = {
+    value: string;
+    maxLength: number;
+    isFocused: boolean;
+    /** One character per box, or a single character repeated across all of them. */
+    placeholder?: string;
+};
+/**
+ * The boxes, from the value. One pass, no state: what a box shows is a function of the
+ * value's length and where the caret is, and deriving it is what keeps a paste, a
+ * backspace and a keystroke from each needing their own update path.
+ *
+ * The active box is the one **after** the last character — `value.length` — which is
+ * also why a full value has no active box: there is nowhere left to type.
+ */
+declare function buildSlots({ value, maxLength, isFocused, placeholder, }: BuildSlotsArgs): OTPSlotState[];
+/**
+ * The code inside whatever the platform handed us on paste.
+ *
+ * A one-time code arrives surrounded by prose far more often than alone — "Your code is
+ * 482913, it expires in 10 minutes" — and the naïve `slice(0, maxLength)` takes "Your c".
+ * This looks for a run of exactly `maxLength` digits with no digit on either side, which
+ * is what rules out the "10" in that sentence and the year in a date.
+ *
+ * Returns `''` when nothing matches, so a paste of unrelated text clears nothing and
+ * fills nothing.
+ */
+declare function extractPastedCode(pasted: string, maxLength: number): string;
+/** The three patterns a one-time code is normally restricted to. */
+declare const OTP_DIGITS = "^\\d+$";
+declare const OTP_LETTERS = "^[a-zA-Z]+$";
+declare const OTP_ALPHANUMERIC = "^[a-zA-Z0-9]+$";
+
+type InputOTPSlot = 'root' | 'group' | 'box' | 'value' | 'placeholder' | 'caret' | 'separator';
+/**
+ * Three of the `Input`'s four levels — a one-time code is a field, and a box of it is a
+ * field one character wide. `primary` is the `fieldBackground` fill plus the theme's
+ * `field` shadow, `secondary` the neutral fill and the default here, `tertiary` the border
+ * alone.
+ *
+ * **No `ghost`**, where the `Input` has one, and it is the shape of the component that
+ * removes it: an input is one wide field whose position the caret and the label already
+ * give away, so it survives having neither fill nor edge. A code is *six* boxes, and their
+ * only job before anything is typed is to say **how many characters are expected and where
+ * they go**. With no fill and no border there is nothing to count. It is the reason the
+ * `Checkbox` has no `ghost` either — a box that is not a box is not a box.
+ *
+ * HeroUI splits their OTP slot the same two ways their input is split, and they reach for
+ * the `field` shadow on `primary` here explicitly — which is the same reading our `Input`
+ * takes.
+ */
+type InputOTPVariant = 'primary' | 'secondary' | 'tertiary';
+/**
+ * Three of the four, and `xs` is the one missing. The box's width is the control height
+ * less one spacing step, so `xs` is 28 by 32 — a box that small has to carry an 18pt
+ * character to stay legible, and 18 in 28 leaves no room for the two-point active ring
+ * without the digit touching it. A code is also the one field a user reads back to
+ * themselves character by character, which is the worst place to save eight points.
+ *
+ * `sm` is the compact size; below it, use fewer boxes rather than smaller ones.
+ */
+type InputOTPSize = Exclude<Size, 'xs'>;
+/** What the boxes are allowed to contain. A string is compiled once, per §. */
+type InputOTPPattern = string | RegExp;
+/** What `ref` gives you: the three things only the hidden input can do. */
+type InputOTPHandle = {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+};
+type InputOTPOwnProps = {
+    /** How many boxes, and therefore how long the code is. */
+    maxLength: number;
+    variant?: InputOTPVariant;
+    /** The box's height and width, the type inside it, and the gaps. */
+    size?: InputOTPSize;
+    /** Overrides the `lg` radius the theme chose for every size. */
+    radius?: RadiusKey;
+    /**
+     * A raw tint (`'#7c3aed'`), never a token (R7). It lands where the variant put its
+     * tokens, and it is also the ring the active box takes — the focus colour is a role
+     * like any other.
+     */
+    color?: string;
+    /** Controlled. Leave it out and the component keeps the value itself. */
+    value?: string;
+    /** The starting value when uncontrolled. */
+    defaultValue?: string;
+    onChangeText?: (value: string) => void;
+    /** Fired once the last box is filled — the only event most callers need. */
+    onComplete?: (value: string) => void;
+    /**
+     * What a box may contain. `OTP_DIGITS`, `OTP_LETTERS` and `OTP_ALPHANUMERIC` are
+     * exported for the three usual answers; anything else is your own expression.
+     *
+     * It is tested against the **whole** value rather than each character, so a pattern
+     * that allows a shape rather than a set works too.
+     */
+    pattern?: InputOTPPattern;
+    /**
+     * One character per box, or a single character repeated across all of them. Shown only
+     * where there is neither a typed character nor the caret.
+     */
+    placeholder?: string;
+    /** Paints the boxes in `danger` and takes the active ring off the accent. */
+    isInvalid?: boolean;
+    /** Dims the boxes and stops the hidden input. */
+    isDisabled?: boolean;
+    /** The keyboard the hidden input asks for. @default 'numeric' */
+    inputMode?: TextInputProps['inputMode'];
+    /**
+     * Everything else the hidden `TextInput` should carry — `autoComplete="one-time-code"`,
+     * `textContentType`, `onSubmitEditing`. It is a prop rather than a slot because the
+     * input is not composed: it is the one node this component owns and hides.
+     */
+    textInputProps?: Omit<TextInputProps, 'value' | 'defaultValue' | 'onChangeText' | 'onFocus' | 'onBlur' | 'editable' | 'maxLength' | 'style'>;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+};
+/**
+ * R14 — the component's own props, the `Pressable`'s, and every `ViewStyle` key neither
+ * already claims.
+ *
+ * **No `asChild`** (the one root in the library without it, deliberately): this root is
+ * not a pass-through container. It owns a hidden `TextInput` that has to be its own
+ * child, and `Slot` merges into a *single* element. A caller who wants their own element
+ * around the boxes wraps the `InputOTP` instead of replacing it.
+ */
+type InputOTPProps = InputOTPOwnProps & Omit<ViewProps, keyof InputOTPOwnProps> & Omit<ViewStyleProps, keyof InputOTPOwnProps | keyof ViewProps>;
+/** `View`'s own props win over the `ViewStyle` keys of the same name (R14). */
+type InputOTPViewProps = ViewProps & Omit<ViewStyleProps, keyof ViewProps> & {
+    children?: ReactNode;
+};
+/**
+ * A group takes a render function as well as elements, which is what lets a caller draw
+ * `maxLength` boxes without writing them out — the one place in the library where a slot
+ * does, because the number of children is data here rather than markup.
+ */
+type InputOTPGroupProps = Omit<InputOTPViewProps, 'children'> & {
+    children?: ReactNode | ((state: InputOTPRenderState) => ReactNode);
+};
+/** What the render function is handed. Everything the boxes are drawn from. */
+type InputOTPRenderState = {
+    slots: readonly OTPSlotState[];
+    value: string;
+    maxLength: number;
+    isFocused: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
+};
+type InputOTPBoxProps = Omit<InputOTPViewProps, 'children'> & {
+    /** Which box this is. It is what the root's state is read by. */
+    index: number;
+    /** Replaces the value, the placeholder and the caret with your own. */
+    children?: ReactNode;
+};
+type InputOTPSeparatorProps = InputOTPViewProps;
+/** `Text`'s own props win over the `TextStyle` keys of the same name (R14). */
+type InputOTPTextProps = TextProps & Omit<TextStyleProps, keyof TextProps> & {
+    children?: ReactNode;
+};
+type InputOTPValueProps = InputOTPTextProps;
+type InputOTPPlaceholderProps = InputOTPTextProps;
+type InputOTPCaretOwnProps = {
+    /** `false` stops the blink. The bar stays, so nothing moves. */
+    animation?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+type InputOTPCaretProps = InputOTPCaretOwnProps & Omit<ViewStyleProps, keyof InputOTPCaretOwnProps>;
+/**
+ * R5 — resolved styles, not props for a slot to resolve a second time.
+ *
+ * The box comes in two, because exactly one box is active at a time and a slot that
+ * resolved its own would be re-running the recipe per box. The root resolves both once —
+ * two cache reads — and each box picks the reference that applies to it.
+ */
+type InputOTPContextValue = {
+    groupStyle: StyleProp<ViewStyle>;
+    boxStyle: StyleProp<ViewStyle>;
+    boxActiveStyle: StyleProp<ViewStyle>;
+    valueStyle: StyleProp<TextStyle>;
+    placeholderStyle: StyleProp<TextStyle>;
+    caretStyle: StyleProp<ViewStyle>;
+    separatorStyle: StyleProp<ViewStyle>;
+    slots: readonly OTPSlotState[];
+    value: string;
+    maxLength: number;
+    isFocused: boolean;
+    isDisabled: boolean;
+    isInvalid: boolean;
+    /** So a custom box, or a "change number" link, can put the caret back. */
+    inputRef: RefObject<TextInput | null>;
+};
+/** What one box publishes to whatever it contains. */
+type InputOTPBoxContextValue = {
+    slot: OTPSlotState | undefined;
+};
+
+/**
+ * The bar in the box the next character lands in.
+ *
+ * It is ours rather than the platform's: the real caret belongs to the hidden input,
+ * which is stretched across the whole row, so it would sit wherever the invisible text
+ * happens to end rather than in the box the reader is looking at. `caretHidden` on that
+ * input is the other half of the same decision.
+ *
+ * It renders only while its box is active **and** empty — a bar over a character would
+ * cross it out.
+ */
+declare function InputOTPCaret({ style, animation, ...props }: InputOTPCaretProps): react.JSX.Element | null;
+declare namespace InputOTPCaret {
+    var displayName: string;
+}
+
+declare const useInputOTP: () => InputOTPContextValue;
+declare const useInputOTPBox: () => InputOTPBoxContextValue;
+
+declare const inputOTPRecipe: Recipe<"value" | "separator" | "group" | "root" | "placeholder" | "box" | "caret", InputOTPVariant, {
+    readonly size: {
+        readonly sm: (theme: XAUITheme) => SlotStyles<InputOTPSlot>;
+        readonly md: (theme: XAUITheme) => SlotStyles<InputOTPSlot>;
+        readonly lg: (theme: XAUITheme) => SlotStyles<InputOTPSlot>;
+    };
+    readonly radius: Record<RadiusKey, StyleFn<"box">>;
+    /**
+     * Declared after `size` and before the states, so a code that is wrong stays wrong
+     * under the finger: the ring below reads `borderFocus`, and the root hands it the
+     * danger colour by suppressing the active state and painting every box instead.
+     */
+    readonly isInvalid: {
+        readonly true: (theme: XAUITheme) => {
+            box: {
+                borderColor: string;
+                borderWidth: number;
+            };
+        };
+    };
+}>;
+
+declare const InputOTP: react.ForwardRefExoticComponent<{
+    maxLength: number;
+    variant?: InputOTPVariant;
+    size?: InputOTPSize;
+    radius?: RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onChangeText?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    pattern?: InputOTPPattern;
+    placeholder?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    inputMode?: react_native.TextInputProps["inputMode"];
+    textInputProps?: Omit<react_native.TextInputProps, "value" | "defaultValue" | "onChangeText" | "onFocus" | "onBlur" | "editable" | "maxLength" | "style">;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+} & Omit<react_native.ViewProps, keyof {
+    maxLength: number;
+    variant?: InputOTPVariant;
+    size?: InputOTPSize;
+    radius?: RadiusKey;
+    color?: string;
+    value?: string;
+    defaultValue?: string;
+    onChangeText?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    pattern?: InputOTPPattern;
+    placeholder?: string;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    inputMode?: react_native.TextInputProps["inputMode"];
+    textInputProps?: Omit<react_native.TextInputProps, "value" | "defaultValue" | "onChangeText" | "onFocus" | "onBlur" | "editable" | "maxLength" | "style">;
+    style?: react_native.StyleProp<react_native.ViewStyle>;
+    children?: react.ReactNode;
+}> & Omit<ViewStyleProps, "color" | "value" | "pointerEvents" | "style" | "children" | "hitSlop" | "id" | "needsOffscreenAlphaCompositing" | "onLayout" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "collapsableChildren" | "onBlur" | "onFocus" | "renderToHardwareTextureAndroid" | "focusable" | "tabIndex" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "aria-label" | "accessibilityRole" | "accessibilityState" | "aria-busy" | "aria-checked" | "aria-disabled" | "aria-expanded" | "aria-selected" | "accessibilityHint" | "accessibilityValue" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onAccessibilityAction" | "importantForAccessibility" | "aria-hidden" | "aria-modal" | "role" | "accessibilityLabelledBy" | "aria-labelledby" | "accessibilityLiveRegion" | "aria-live" | "screenReaderFocusable" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "accessibilityLanguage" | "accessibilityShowsLargeContentViewer" | "accessibilityLargeContentTitle" | "accessibilityRespondsToUserInteraction" | "pattern" | "isDisabled" | "radius" | "size" | "variant" | "placeholder" | "isInvalid" | "defaultValue" | "inputMode" | "maxLength" | "onChangeText" | "onComplete" | "textInputProps"> & react.RefAttributes<InputOTPHandle>> & {
+    Group: react.ForwardRefExoticComponent<Omit<react_native.ViewProps & Omit<ViewStyleProps, keyof react_native.ViewProps> & {
+        children?: react.ReactNode;
+    }, "children"> & {
+        children?: react.ReactNode | ((state: InputOTPRenderState) => react.ReactNode);
+    } & react.RefAttributes<react_native.View>>;
+    Box: react.ForwardRefExoticComponent<Omit<react_native.ViewProps & Omit<ViewStyleProps, keyof react_native.ViewProps> & {
+        children?: react.ReactNode;
+    }, "children"> & {
+        index: number;
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.View>>;
+    Value: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Placeholder: react.ForwardRefExoticComponent<react_native.TextProps & Omit<TextStyleProps, keyof react_native.TextProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.Text>>;
+    Caret: typeof InputOTPCaret;
+    Separator: react.ForwardRefExoticComponent<react_native.ViewProps & Omit<ViewStyleProps, keyof react_native.ViewProps> & {
+        children?: react.ReactNode;
+    } & react.RefAttributes<react_native.View>>;
+};
+
+export { InputOTP, type InputOTPBoxContextValue, type InputOTPBoxProps, type InputOTPCaretProps, type InputOTPContextValue, type InputOTPGroupProps, type InputOTPHandle, type InputOTPPattern, type InputOTPPlaceholderProps, type InputOTPProps, type InputOTPRenderState, type InputOTPSeparatorProps, type InputOTPSize, type InputOTPSlot, type InputOTPValueProps, type InputOTPVariant, type OTPSlotState, OTP_ALPHANUMERIC, OTP_DIGITS, OTP_LETTERS, buildSlots, extractPastedCode, inputOTPRecipe, useInputOTP, useInputOTPBox };