@xaui/native 0.9.1-alpha.4 → 0.9.1-alpha.40

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, S as SlotStyles, a as StyleFn } from '../../create-recipe-dC7wMfnj.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" | "root" | "group" | "box" | "placeholder" | "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" | "size" | "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" | "variant" | "radius" | "defaultValue" | "isDisabled" | "isInvalid" | "placeholder" | "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 };

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

@@ -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.js';
+import { S as Size, R as RadiusKey, X as XAUITheme } from '../../theme.type-C2gNHpEx.js';
+import { R as Recipe, S as SlotStyles, a as StyleFn } from '../../create-recipe-BdVd2ffi.js';
+
+/**
+ * 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" | "root" | "group" | "box" | "placeholder" | "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" | "size" | "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" | "variant" | "radius" | "defaultValue" | "isDisabled" | "isInvalid" | "placeholder" | "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 };