@ionic/core 8.5.7-dev.11747180955.1e468923 → 8.5.7-dev.11747676931.1d53b808

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

@@ -0,0 +1,270 @@
+import type { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { Color } from '../../interface';
+import type { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from './input-otp-interface';
+export declare class InputOTP implements ComponentInterface {
+    private inputRefs;
+    private inputId;
+    private parsedSeparators;
+    /**
+     * Stores the initial value of the input when it receives focus.
+     * Used to determine if the value changed during the focus session
+     * to avoid emitting unnecessary change events on blur.
+     */
+    private focusedValue?;
+    /**
+     * Tracks whether the user is navigating through input boxes using keyboard navigation
+     * (arrow keys, tab) versus mouse clicks. This is used to determine the appropriate
+     * focus behavior when an input box is focused.
+     */
+    private isKeyboardNavigation;
+    el: HTMLIonInputOtpElement;
+    private inputValues;
+    hasFocus: boolean;
+    /**
+     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+     * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+     */
+    autocapitalize: string;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    color?: Color;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
+    disabled: boolean;
+    /**
+     * The fill for the input boxes. If `"solid"` the input boxes will have a background. If
+     * `"outline"` the input boxes will be transparent with a border.
+     */
+    fill?: 'outline' | 'solid';
+    /**
+     * A hint to the browser for which keyboard to display.
+     * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
+     * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+     *
+     * For numbers (type="number"): "numeric"
+     * For text (type="text"): "text"
+     */
+    inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /**
+     * The number of input boxes to display.
+     */
+    length: number;
+    /**
+     * A regex pattern string for allowed characters. Defaults based on type.
+     *
+     * For numbers (type="number"): "[0-9]"
+     * For text (type="text"): "[a-zA-Z0-9]"
+     */
+    pattern?: string;
+    /**
+     * If `true`, the user cannot modify the value.
+     */
+    readonly: boolean;
+    /**
+     * The size of the input boxes.
+     */
+    size: 'small' | 'medium' | 'large';
+    /**
+     * Where separators should be shown between input boxes.
+     * Can be a comma-separated string or an array of numbers.
+     *
+     * For example:
+     * `"3"` will show a separator after the 3rd input box.
+     * `[1,4]` will show a separator after the 1st and 4th input boxes.
+     * `"all"` will show a separator between every input box.
+     */
+    separators?: 'all' | string | number[];
+    /**
+     * The shape of the input boxes.
+     * If "round" they will have an increased border radius.
+     * If "rectangular" they will have no border radius.
+     * If "soft" they will have a soft border radius.
+     */
+    shape: 'round' | 'rectangular' | 'soft';
+    /**
+     * The type of input allowed in the input boxes.
+     */
+    type: 'text' | 'number';
+    /**
+     * The value of the input group.
+     */
+    value?: string | number | null;
+    /**
+     * The `ionInput` event is fired each time the user modifies the input's value.
+     * Unlike the `ionChange` event, the `ionInput` event is fired for each alteration
+     * to the input's value. This typically happens for each keystroke as the user types.
+     *
+     * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
+     * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
+     * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
+     * the input is cleared on edit, the type is `null`.
+     */
+    ionInput: EventEmitter<InputOtpInputEventDetail>;
+    /**
+     * The `ionChange` event is fired when the user modifies the input's value.
+     * Unlike the `ionInput` event, the `ionChange` event is only fired when changes
+     * are committed, not as the user types.
+     *
+     * The `ionChange` event fires when the `<ion-input-otp>` component loses
+     * focus after its value has changed.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    ionChange: EventEmitter<InputOtpChangeEventDetail>;
+    /**
+     * Emitted when all input boxes have been filled with valid values.
+     */
+    ionComplete: EventEmitter<InputOtpCompleteEventDetail>;
+    /**
+     * Emitted when the input group loses focus.
+     */
+    ionBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the input group has focus.
+     */
+    ionFocus: EventEmitter<FocusEvent>;
+    valueChanged(): void;
+    /**
+     * Processes the separators prop into an array of numbers.
+     *
+     * If the separators prop is not provided, returns an empty array.
+     * If the separators prop is 'all', returns an array of all valid positions (1 to length-1).
+     * If the separators prop is an array, returns it as is.
+     * If the separators prop is a string, splits it by commas and parses each part as a number.
+     *
+     * If the separators are greater than the input length, it will warn and ignore the separators.
+     */
+    private processSeparators;
+    componentWillLoad(): void;
+    /**
+     * Initializes the input values array based on the current value prop.
+     * This splits the value into individual characters and validates them against
+     * the allowed pattern. The values are then used as the values in the native
+     * input boxes and the value of the input group is updated.
+     */
+    private initializeValues;
+    /**
+     * Resets the input values and focus state.
+     */
+    reset(): Promise<void>;
+    /**
+     * Sets focus to an input box.
+     * @param index - The index of the input box to focus (0-based).
+     * If provided and the input box has a value, the input box at that index will be focused.
+     * Otherwise, the first empty input box or the last input if all are filled will be focused.
+     */
+    setFocus(index?: number): Promise<void>;
+    /**
+     * Get the regex pattern for allowed characters.
+     * If a pattern is provided, use it to create a regex pattern
+     * Otherwise, use the default regex pattern based on type
+     */
+    private get validKeys();
+    /**
+     * Gets the string pattern to pass to the input element
+     * and use in the regex for allowed characters.
+     */
+    private getPattern;
+    /**
+     * Get the default value for inputmode.
+     * If inputmode is provided, use it.
+     * Otherwise, use the default inputmode based on type
+     */
+    private getInputmode;
+    /**
+     * Updates the value of the input group.
+     * This updates the value of the input group and emits an `ionChange` event.
+     * If all of the input boxes are filled, it emits an `ionComplete` event.
+     */
+    private updateValue;
+    /**
+     * Emits an `ionChange` event.
+     * This API should be called for user committed changes.
+     * This API should not be used for external value changes.
+     */
+    private emitIonChange;
+    /**
+     * Emits an `ionInput` event.
+     * This is used to emit the input value when the user types,
+     * backspaces, or pastes.
+     */
+    private emitIonInput;
+    private onInput;
+    /**
+     * Handles keyboard navigation and input for the OTP component.
+     *
+     * Navigation:
+     * - Backspace: Clears current input and moves to previous box if empty
+     * - Arrow Left/Right: Moves focus between input boxes
+     * - Tab: Allows normal tab navigation between components
+     *
+     * Input Behavior:
+     * - Validates input against the allowed pattern
+     * - When entering a key in a filled box:
+     *   - Shifts existing values right if there is room
+     *   - Updates the value of the input group
+     *   - Prevents default behavior to avoid automatic focus shift
+     */
+    private onKeyDown;
+    /**
+     * Handles pasting text into the input OTP component.
+     * This function prevents the default paste behavior and
+     * validates the pasted text against the allowed pattern.
+     * It then updates the value of the input group and focuses
+     * the next empty input after pasting.
+     */
+    private onPaste;
+    /**
+     * Focuses the next input box.
+     */
+    private focusNext;
+    /**
+     * Focuses the previous input box.
+     */
+    private focusPrevious;
+    /**
+     * Determines if a separator should be shown for a given index by
+     * checking if the index is included in the parsed separators array.
+     */
+    private showSeparator;
+    /**
+     * Handles the focus behavior for the input OTP component.
+     *
+     * Focus behavior:
+     * 1. Keyboard navigation: Allow normal focus movement
+     * 2. Mouse click:
+     *    - If clicked box has value: Focus that box
+     *    - If clicked box is empty: Focus first empty box
+     *
+     * Emits the `ionFocus` event when the input group gains focus.
+     */
+    private onFocus;
+    /**
+     * Handles the blur behavior for the input OTP component.
+     * Emits the `ionBlur` event when the input group loses focus.
+     */
+    private onBlur;
+    /**
+     * Updates the tabIndexes for the input boxes.
+     * This is used to ensure that the correct input is
+     * focused when the user navigates using the tab key.
+     */
+    private updateTabIndexes;
+    /**
+     * Loops through the input values and returns the index
+     * of the first empty input.
+     * Returns -1 if all inputs are filled.
+     */
+    private getFirstEmptyIndex;
+    /**
+     * Returns the index of the input that should be tabbed to.
+     * If all inputs are filled, returns the last input's index.
+     * Otherwise, returns the index of the first empty input.
+     */
+    private getTabbableIndex;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -18,6 +18,7 @@ import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
+import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
 import { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 import { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 import { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -55,6 +56,7 @@ export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-int
 export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
+export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
 export { MenuChangeEventDetail, MenuCloseEventDetail, MenuType, Side } from "./components/menu/menu-interface";
 export { ModalBreakpointChangeEventDetail, ModalHandleBehavior } from "./components/modal/modal-interface";
 export { NavComponent, NavComponentWithProps, NavOptions, RouterOutletOptions, SwipeGestureHandler, TransitionDoneFn, TransitionInstruction } from "./components/nav/nav-interface";
@@ -1319,6 +1321,69 @@ export namespace Components {
          */
         "value"?: string | number | null;
     }
+    interface IonInputOtp {
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize": string;
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled": boolean;
+        /**
+          * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
+         */
+        "fill"?: 'outline' | 'solid';
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
+         */
+        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * The number of input boxes to display.
+         */
+        "length": number;
+        /**
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (type="number"): "[0-9]" For text (type="text"): "[a-zA-Z0-9]"
+         */
+        "pattern"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly": boolean;
+        /**
+          * Resets the input values and focus state.
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.  For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
+         */
+        "separators"?: 'all' | string | number[];
+        /**
+          * Sets focus to an input box.
+          * @param index - The index of the input box to focus (0-based). If provided and the input box has a value, the input box at that index will be focused. Otherwise, the first empty input box or the last input if all are filled will be focused.
+         */
+        "setFocus": (index?: number) => Promise<void>;
+        /**
+          * The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
+         */
+        "shape": 'round' | 'rectangular' | 'soft';
+        /**
+          * The size of the input boxes.
+         */
+        "size": 'small' | 'medium' | 'large';
+        /**
+          * The type of input allowed in the input boxes.
+         */
+        "type": 'text' | 'number';
+        /**
+          * The value of the input group.
+         */
+        "value"?: string | number | null;
+    }
     interface IonInputPasswordToggle {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
@@ -3404,6 +3469,10 @@ export interface IonInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonInputElement;
 }
+export interface IonInputOtpCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLIonInputOtpElement;
+}
 export interface IonItemOptionsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLIonItemOptionsElement;
@@ -3933,6 +4002,27 @@ declare global {
         prototype: HTMLIonInputElement;
         new (): HTMLIonInputElement;
     };
+    interface HTMLIonInputOtpElementEventMap {
+        "ionInput": InputOtpInputEventDetail;
+        "ionChange": InputOtpChangeEventDetail;
+        "ionComplete": InputOtpCompleteEventDetail;
+        "ionBlur": FocusEvent;
+        "ionFocus": FocusEvent;
+    }
+    interface HTMLIonInputOtpElement extends Components.IonInputOtp, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLIonInputOtpElementEventMap>(type: K, listener: (this: HTMLIonInputOtpElement, ev: IonInputOtpCustomEvent<HTMLIonInputOtpElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLIonInputOtpElementEventMap>(type: K, listener: (this: HTMLIonInputOtpElement, ev: IonInputOtpCustomEvent<HTMLIonInputOtpElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLIonInputOtpElement: {
+        prototype: HTMLIonInputOtpElement;
+        new (): HTMLIonInputOtpElement;
+    };
     interface HTMLIonInputPasswordToggleElement extends Components.IonInputPasswordToggle, HTMLStencilElement {
     }
     var HTMLIonInputPasswordToggleElement: {
@@ -4792,6 +4882,7 @@ declare global {
         "ion-infinite-scroll": HTMLIonInfiniteScrollElement;
         "ion-infinite-scroll-content": HTMLIonInfiniteScrollContentElement;
         "ion-input": HTMLIonInputElement;
+        "ion-input-otp": HTMLIonInputOtpElement;
         "ion-input-password-toggle": HTMLIonInputPasswordToggleElement;
         "ion-item": HTMLIonItemElement;
         "ion-item-divider": HTMLIonItemDividerElement;
@@ -6149,6 +6240,80 @@ declare namespace LocalJSX {
          */
         "value"?: string | number | null;
     }
+    interface IonInputOtp {
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize"?: string;
+        /**
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+         */
+        "color"?: Color;
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled"?: boolean;
+        /**
+          * The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border.
+         */
+        "fill"?: 'outline' | 'solid';
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.  For numbers (type="number"): "numeric" For text (type="text"): "text"
+         */
+        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * The number of input boxes to display.
+         */
+        "length"?: number;
+        /**
+          * Emitted when the input group loses focus.
+         */
+        "onIonBlur"?: (event: IonInputOtpCustomEvent<FocusEvent>) => void;
+        /**
+          * The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types.  The `ionChange` event fires when the `<ion-input-otp>` component loses focus after its value has changed.  This event will not emit when programmatically setting the `value` property.
+         */
+        "onIonChange"?: (event: IonInputOtpCustomEvent<InputOtpChangeEventDetail>) => void;
+        /**
+          * Emitted when all input boxes have been filled with valid values.
+         */
+        "onIonComplete"?: (event: IonInputOtpCustomEvent<InputOtpCompleteEventDetail>) => void;
+        /**
+          * Emitted when the input group has focus.
+         */
+        "onIonFocus"?: (event: IonInputOtpCustomEvent<FocusEvent>) => void;
+        /**
+          * The `ionInput` event is fired each time the user modifies the input's value. Unlike the `ionChange` event, the `ionInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
+         */
+        "onIonInput"?: (event: IonInputOtpCustomEvent<InputOtpInputEventDetail>) => void;
+        /**
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (type="number"): "[0-9]" For text (type="text"): "[a-zA-Z0-9]"
+         */
+        "pattern"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly"?: boolean;
+        /**
+          * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.  For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
+         */
+        "separators"?: 'all' | string | number[];
+        /**
+          * The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius.
+         */
+        "shape"?: 'round' | 'rectangular' | 'soft';
+        /**
+          * The size of the input boxes.
+         */
+        "size"?: 'small' | 'medium' | 'large';
+        /**
+          * The type of input allowed in the input boxes.
+         */
+        "type"?: 'text' | 'number';
+        /**
+          * The value of the input group.
+         */
+        "value"?: string | number | null;
+    }
     interface IonInputPasswordToggle {
         /**
           * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
@@ -8167,6 +8332,7 @@ declare namespace LocalJSX {
         "ion-infinite-scroll": IonInfiniteScroll;
         "ion-infinite-scroll-content": IonInfiniteScrollContent;
         "ion-input": IonInput;
+        "ion-input-otp": IonInputOtp;
         "ion-input-password-toggle": IonInputPasswordToggle;
         "ion-item": IonItem;
         "ion-item-divider": IonItemDivider;
@@ -8269,6 +8435,7 @@ declare module "@stencil/core" {
             "ion-infinite-scroll": LocalJSX.IonInfiniteScroll & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollElement>;
             "ion-infinite-scroll-content": LocalJSX.IonInfiniteScrollContent & JSXBase.HTMLAttributes<HTMLIonInfiniteScrollContentElement>;
             "ion-input": LocalJSX.IonInput & JSXBase.HTMLAttributes<HTMLIonInputElement>;
+            "ion-input-otp": LocalJSX.IonInputOtp & JSXBase.HTMLAttributes<HTMLIonInputOtpElement>;
             "ion-input-password-toggle": LocalJSX.IonInputPasswordToggle & JSXBase.HTMLAttributes<HTMLIonInputPasswordToggleElement>;
             "ion-item": LocalJSX.IonItem & JSXBase.HTMLAttributes<HTMLIonItemElement>;
             "ion-item-divider": LocalJSX.IonItemDivider & JSXBase.HTMLAttributes<HTMLIonItemDividerElement>;

package/dist/types/interface.d.ts

@@ -12,6 +12,7 @@ export { CheckboxCustomEvent } from './components/checkbox/checkbox-interface';
 export { DatetimeCustomEvent, DatetimeHighlightStyle } from './components/datetime/datetime-interface';
 export { InfiniteScrollCustomEvent } from './components/infinite-scroll/infinite-scroll-interface';
 export { InputCustomEvent } from './components/input/input-interface';
+export { InputOtpCustomEvent } from './components/input-otp/input-otp-interface';
 export { CounterFormatter } from './components/item/item-interface';
 export { ItemSlidingCustomEvent } from './components/item-sliding/item-sliding-interface';
 export { LoadingOptions } from './components/loading/loading-interface';