@central-design-system/components 4.0.0-alpha.1 → 4.0.0-alpha.3

package/dist/types/components/CdsOtpInput/api/CdsOtpInput.types.d.ts

@@ -0,0 +1,47 @@
+import type { ExtractPublicPropTypes, Ref } from 'vue';
+import type { OtpSlotData } from '../composables/useOtpInput';
+import type { defineCdsOtpFieldProps, defineCdsOtpGroupProps, defineCdsOtpInputProps, defineCdsOtpSeparatorProps } from './CdsOtpInput.props';
+export type CdsOtpInputProps = ExtractPublicPropTypes<ReturnType<typeof defineCdsOtpInputProps>>;
+export type CdsOtpFieldProps = ExtractPublicPropTypes<ReturnType<typeof defineCdsOtpFieldProps>>;
+export type CdsOtpGroupProps = ExtractPublicPropTypes<ReturnType<typeof defineCdsOtpGroupProps>>;
+export type CdsOtpSeparatorProps = ExtractPublicPropTypes<ReturnType<typeof defineCdsOtpSeparatorProps>>;
+/** Тип вводимого кода. */
+export type CdsOtpInputType = 'text' | 'password' | 'number';
+/** Контекст, который `CdsOtpInput` предоставляет вложенным ячейкам и группам. */
+export interface CdsOtpInputContext {
+    otpSlots: Readonly<Ref<OtpSlotData[]>>;
+    isFocused: Ref<boolean | undefined>;
+    focusAll: Readonly<Ref<boolean>>;
+    divider: Readonly<Ref<string | undefined>>;
+    merged: Readonly<Ref<boolean>>;
+    focusAt: (index: number) => void;
+}
+export interface CdsOtpInputSlots {
+    /** Произвольный контент поверх ячеек кода */
+    default?: () => any;
+    /** Полностью заменяет ряд ячеек собственной разметкой из `CdsOtpGroup`, `CdsOtpField` и `CdsOtpSeparator` */
+    fields?: () => any;
+    /** Разделитель между ячейками. `index` — номер ячейки слева от разделителя */
+    divider?: (props: {
+        index: number;
+    }) => any;
+    /** Пользовательский индикатор загрузки */
+    loader?: () => any;
+}
+export interface CdsOtpInputEvents {
+    /** Срабатывает, когда код набран полностью */
+    (event: 'finish', value: string): void;
+    /** Срабатывает при получении или потере фокуса */
+    (event: 'update:focused', focused: boolean): void;
+    /** Срабатывает при изменении значения компонента */
+    (event: 'update:modelValue', value: string): void;
+}
+export interface CdsOtpGroupSlots {
+    /** Ячейки кода группы */
+    default?: () => any;
+}
+export interface CdsOtpSeparatorSlots {
+    /** Содержимое разделителя */
+    default?: () => any;
+}
+export type { OtpInputContext, OtpInputOptions, OtpInputPattern, OtpSelection, OtpSlotData } from '../composables/useOtpInput';

package/dist/types/components/CdsOtpInput/composables/useOtpInput.d.ts

@@ -0,0 +1,76 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+export interface OtpSlotData {
+    char: string | null;
+    compositionChar: string | null;
+    placeholderChar: string | null;
+    isActive: boolean;
+    hasFakeCaret: boolean;
+}
+export interface OtpSelection {
+    start: number;
+    end: number;
+    direction: 'forward' | 'backward' | 'none';
+}
+export interface OtpSelectionInput {
+    value: string;
+    selectionStart: number | null;
+    selectionEnd: number | null;
+    selectionDirection: 'forward' | 'backward' | 'none' | null;
+    maxLength: number;
+}
+export declare const OtpInputPatterns: {
+    readonly numeric: RegExp;
+    readonly alpha: RegExp;
+    readonly alphanumeric: RegExp;
+    readonly 'unicode-alpha': RegExp;
+    readonly 'unicode-alphanumeric': RegExp;
+};
+export type OtpInputPattern = keyof typeof OtpInputPatterns;
+export interface OtpInputOptions {
+    value: Ref<string>;
+    length?: MaybeRefOrGetter<number>;
+    pattern?: MaybeRefOrGetter<OtpInputPattern | RegExp | null | undefined>;
+    type?: MaybeRefOrGetter<'text' | 'password' | 'number'>;
+    masked?: MaybeRefOrGetter<boolean>;
+    placeholder?: MaybeRefOrGetter<string | null | undefined>;
+    isFocused?: Ref<boolean | undefined>;
+}
+export interface OtpInputContext {
+    value: Ref<string>;
+    length: Readonly<Ref<number>>;
+    slots: Readonly<Ref<OtpSlotData[]>>;
+    selection: Readonly<Ref<OtpSelection | null>>;
+    composition: Readonly<Ref<string>>;
+    isComposing: Readonly<Ref<boolean>>;
+    isFocused: Ref<boolean | undefined>;
+    effectivePattern: Readonly<Ref<RegExp | null>>;
+    inputMode: Readonly<Ref<'numeric' | 'text'>>;
+    filter: (text: string) => string;
+    isImeText: (text: string) => boolean;
+    setValue: (text: string) => string;
+    insert: (text: string, range?: {
+        start: number;
+        end: number;
+    }) => string;
+    deleteRange: (start: number, end: number) => string;
+    bulkDelete: (isBackward: boolean) => string;
+    syncSelection: (raw: OtpSelectionInput) => OtpSelection | null;
+    setSelection: (start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') => void;
+    clearSelection: () => void;
+    selectAtEnd: () => OtpSelection;
+    selectSlot: (index: number) => OtpSelection;
+    extendSelection: (direction: -1 | 1) => OtpSelection | null;
+    startComposition: () => void;
+    updateComposition: (data: string) => void;
+    endComposition: () => void;
+    reset: () => void;
+}
+/**
+ * Headless-логика ввода одноразового кода: раскладывает строку значения по ячейкам,
+ * фильтрует символы по паттерну и держит выделение скрытого input'а так, чтобы
+ * визуально всегда была подсвечена ровно одна ячейка.
+ *
+ * Границы ячеек считаются в графемах, поэтому эмодзи, ZWJ-последовательности и
+ * модификаторы тона кожи занимают ровно одну ячейку.
+ */
+export declare function useOtpInput(options: OtpInputOptions): OtpInputContext;

package/dist/types/components/CdsOtpInput/index.d.ts

@@ -0,0 +1,529 @@
+export declare const CdsOtpInput: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        theme: {
+            type: import("vue").PropType<import("../../cds.ts").Theme | string>;
+            default: undefined;
+        };
+        size: {
+            type: import("vue").PropType<import("../../cds.ts").Size | number>;
+            default: string;
+            validator: (value: import("../../cds.ts").Size | any) => boolean;
+        };
+        loading: {
+            type: import("vue").PropType<boolean | string>;
+            default: undefined;
+        };
+        focused: BooleanConstructor;
+        'onUpdate:focused': import("vue").PropType<(args_0: boolean) => void>;
+        disabled: {
+            type: import("vue").PropType<boolean | null>;
+            default: null;
+        };
+        width: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        height: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        maxWidth: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        maxHeight: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        minWidth: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        minHeight: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        class: import("vue").PropType<import("../../core").ClassValue>;
+        style: {
+            type: import("vue").PropType<import("vue").StyleValue>;
+            default: null;
+        };
+        color: StringConstructor;
+        baseColor: StringConstructor;
+        activeColor: StringConstructor;
+        bgColor: StringConstructor;
+        textColor: StringConstructor;
+        autofocus: BooleanConstructor;
+        divider: StringConstructor;
+        focusAll: BooleanConstructor;
+        merged: BooleanConstructor;
+        label: {
+            type: StringConstructor;
+            default: string;
+        };
+        length: {
+            type: import("vue").PropType<number | string>;
+            default: number;
+        };
+        masked: BooleanConstructor;
+        modelValue: {
+            type: import("vue").PropType<number | string>;
+            default: undefined;
+        };
+        pattern: {
+            type: import("vue").PropType<import("./index.ts").OtpInputPattern | RegExp>;
+            default: undefined;
+        };
+        placeholder: StringConstructor;
+        type: {
+            type: import("vue").PropType<import("./index.ts").CdsOtpInputType>;
+            default: string;
+            validator: (value: import("./index.ts").CdsOtpInputType) => boolean;
+        };
+        error: BooleanConstructor;
+    }>> & Readonly<{
+        onFinish?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
+    }>, {
+        inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+        isFocused: import("vue").Ref<boolean | undefined, boolean | undefined> & {
+            readonly externalValue: boolean | undefined;
+        };
+        focus: () => void;
+        blur: () => void;
+        reset: () => void;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+        finish: (value: string) => any;
+        "update:modelValue": (value: string) => any;
+        "update:focused": (focused: boolean) => any;
+    }, import("vue").PublicProps, {
+        length: string | number;
+        type: import("./index.ts").CdsOtpInputType;
+        error: boolean;
+        height: string | number;
+        width: string | number;
+        maxHeight: string | number;
+        maxWidth: string | number;
+        minHeight: string | number;
+        minWidth: string | number;
+        loading: string | boolean;
+        label: string;
+        style: import("vue").StyleValue;
+        pattern: RegExp | "numeric" | "alpha" | "alphanumeric" | "unicode-alpha" | "unicode-alphanumeric";
+        autofocus: boolean;
+        disabled: boolean | null;
+        size: number | "xs" | "sm" | "md" | "lg" | "xl";
+        theme: string;
+        modelValue: string | number;
+        focused: boolean;
+        masked: boolean;
+        focusAll: boolean;
+        merged: boolean;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        theme: {
+            type: import("vue").PropType<import("../../cds.ts").Theme | string>;
+            default: undefined;
+        };
+        size: {
+            type: import("vue").PropType<import("../../cds.ts").Size | number>;
+            default: string;
+            validator: (value: import("../../cds.ts").Size | any) => boolean;
+        };
+        loading: {
+            type: import("vue").PropType<boolean | string>;
+            default: undefined;
+        };
+        focused: BooleanConstructor;
+        'onUpdate:focused': import("vue").PropType<(args_0: boolean) => void>;
+        disabled: {
+            type: import("vue").PropType<boolean | null>;
+            default: null;
+        };
+        width: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        height: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        maxWidth: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        maxHeight: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        minWidth: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        minHeight: {
+            type: import("vue").PropType<string | number>;
+            default: undefined;
+        };
+        class: import("vue").PropType<import("../../core").ClassValue>;
+        style: {
+            type: import("vue").PropType<import("vue").StyleValue>;
+            default: null;
+        };
+        color: StringConstructor;
+        baseColor: StringConstructor;
+        activeColor: StringConstructor;
+        bgColor: StringConstructor;
+        textColor: StringConstructor;
+        autofocus: BooleanConstructor;
+        divider: StringConstructor;
+        focusAll: BooleanConstructor;
+        merged: BooleanConstructor;
+        label: {
+            type: StringConstructor;
+            default: string;
+        };
+        length: {
+            type: import("vue").PropType<number | string>;
+            default: number;
+        };
+        masked: BooleanConstructor;
+        modelValue: {
+            type: import("vue").PropType<number | string>;
+            default: undefined;
+        };
+        pattern: {
+            type: import("vue").PropType<import("./index.ts").OtpInputPattern | RegExp>;
+            default: undefined;
+        };
+        placeholder: StringConstructor;
+        type: {
+            type: import("vue").PropType<import("./index.ts").CdsOtpInputType>;
+            default: string;
+            validator: (value: import("./index.ts").CdsOtpInputType) => boolean;
+        };
+        error: BooleanConstructor;
+    }>> & Readonly<{
+        onFinish?: ((value: string) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+        "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
+    }>, {
+        inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+        isFocused: import("vue").Ref<boolean | undefined, boolean | undefined> & {
+            readonly externalValue: boolean | undefined;
+        };
+        focus: () => void;
+        blur: () => void;
+        reset: () => void;
+    }, {}, {}, {}, {
+        length: string | number;
+        type: import("./index.ts").CdsOtpInputType;
+        error: boolean;
+        height: string | number;
+        width: string | number;
+        maxHeight: string | number;
+        maxWidth: string | number;
+        minHeight: string | number;
+        minWidth: string | number;
+        loading: string | boolean;
+        label: string;
+        style: import("vue").StyleValue;
+        pattern: RegExp | "numeric" | "alpha" | "alphanumeric" | "unicode-alpha" | "unicode-alphanumeric";
+        autofocus: boolean;
+        disabled: boolean | null;
+        size: number | "xs" | "sm" | "md" | "lg" | "xl";
+        theme: string;
+        modelValue: string | number;
+        focused: boolean;
+        masked: boolean;
+        focusAll: boolean;
+        merged: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    theme: {
+        type: import("vue").PropType<import("../../cds.ts").Theme | string>;
+        default: undefined;
+    };
+    size: {
+        type: import("vue").PropType<import("../../cds.ts").Size | number>;
+        default: string;
+        validator: (value: import("../../cds.ts").Size | any) => boolean;
+    };
+    loading: {
+        type: import("vue").PropType<boolean | string>;
+        default: undefined;
+    };
+    focused: BooleanConstructor;
+    'onUpdate:focused': import("vue").PropType<(args_0: boolean) => void>;
+    disabled: {
+        type: import("vue").PropType<boolean | null>;
+        default: null;
+    };
+    width: {
+        type: import("vue").PropType<string | number>;
+        default: undefined;
+    };
+    height: {
+        type: import("vue").PropType<string | number>;
+        default: undefined;
+    };
+    maxWidth: {
+        type: import("vue").PropType<string | number>;
+        default: undefined;
+    };
+    maxHeight: {
+        type: import("vue").PropType<string | number>;
+        default: undefined;
+    };
+    minWidth: {
+        type: import("vue").PropType<string | number>;
+        default: undefined;
+    };
+    minHeight: {
+        type: import("vue").PropType<string | number>;
+        default: undefined;
+    };
+    class: import("vue").PropType<import("../../core").ClassValue>;
+    style: {
+        type: import("vue").PropType<import("vue").StyleValue>;
+        default: null;
+    };
+    color: StringConstructor;
+    baseColor: StringConstructor;
+    activeColor: StringConstructor;
+    bgColor: StringConstructor;
+    textColor: StringConstructor;
+    autofocus: BooleanConstructor;
+    divider: StringConstructor;
+    focusAll: BooleanConstructor;
+    merged: BooleanConstructor;
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    length: {
+        type: import("vue").PropType<number | string>;
+        default: number;
+    };
+    masked: BooleanConstructor;
+    modelValue: {
+        type: import("vue").PropType<number | string>;
+        default: undefined;
+    };
+    pattern: {
+        type: import("vue").PropType<import("./index.ts").OtpInputPattern | RegExp>;
+        default: undefined;
+    };
+    placeholder: StringConstructor;
+    type: {
+        type: import("vue").PropType<import("./index.ts").CdsOtpInputType>;
+        default: string;
+        validator: (value: import("./index.ts").CdsOtpInputType) => boolean;
+    };
+    error: BooleanConstructor;
+}>> & Readonly<{
+    onFinish?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
+}>, {
+    inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
+    isFocused: import("vue").Ref<boolean | undefined, boolean | undefined> & {
+        readonly externalValue: boolean | undefined;
+    };
+    focus: () => void;
+    blur: () => void;
+    reset: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    finish: (value: string) => any;
+    "update:modelValue": (value: string) => any;
+    "update:focused": (focused: boolean) => any;
+}, string, {
+    length: string | number;
+    type: import("./index.ts").CdsOtpInputType;
+    error: boolean;
+    height: string | number;
+    width: string | number;
+    maxHeight: string | number;
+    maxWidth: string | number;
+    minHeight: string | number;
+    minWidth: string | number;
+    loading: string | boolean;
+    label: string;
+    style: import("vue").StyleValue;
+    pattern: RegExp | "numeric" | "alpha" | "alphanumeric" | "unicode-alpha" | "unicode-alphanumeric";
+    autofocus: boolean;
+    disabled: boolean | null;
+    size: number | "xs" | "sm" | "md" | "lg" | "xl";
+    theme: string;
+    modelValue: string | number;
+    focused: boolean;
+    masked: boolean;
+    focusAll: boolean;
+    merged: boolean;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./index.ts").CdsOtpInputSlots;
+}) & {
+    constants: import("../../core").ComponentConstants<"CdsOtpInput"> & {
+        types: readonly ["text", "password", "number"];
+    };
+};
+export declare const CdsOtpField: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        class: import("vue").PropType<import("../../core").ClassValue>;
+        style: {
+            type: import("vue").PropType<import("vue").StyleValue>;
+            default: null;
+        };
+        index: {
+            type: NumberConstructor;
+            required: true;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        style: import("vue").StyleValue;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        class: import("vue").PropType<import("../../core").ClassValue>;
+        style: {
+            type: import("vue").PropType<import("vue").StyleValue>;
+            default: null;
+        };
+        index: {
+            type: NumberConstructor;
+            required: true;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
+        style: import("vue").StyleValue;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    class: import("vue").PropType<import("../../core").ClassValue>;
+    style: {
+        type: import("vue").PropType<import("vue").StyleValue>;
+        default: null;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    style: import("vue").StyleValue;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+    constants: import("../../core").ComponentConstants<"CdsOtpField">;
+};
+export declare const CdsOtpGroup: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        class: import("vue").PropType<import("../../core").ClassValue>;
+        style: {
+            type: import("vue").PropType<import("vue").StyleValue>;
+            default: null;
+        };
+        merged: {
+            type: import("vue").PropType<boolean | null>;
+            default: null;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        style: import("vue").StyleValue;
+        merged: boolean | null;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        class: import("vue").PropType<import("../../core").ClassValue>;
+        style: {
+            type: import("vue").PropType<import("vue").StyleValue>;
+            default: null;
+        };
+        merged: {
+            type: import("vue").PropType<boolean | null>;
+            default: null;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
+        style: import("vue").StyleValue;
+        merged: boolean | null;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    class: import("vue").PropType<import("../../core").ClassValue>;
+    style: {
+        type: import("vue").PropType<import("vue").StyleValue>;
+        default: null;
+    };
+    merged: {
+        type: import("vue").PropType<boolean | null>;
+        default: null;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    style: import("vue").StyleValue;
+    merged: boolean | null;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./index.ts").CdsOtpGroupSlots;
+}) & {
+    constants: import("../../core").ComponentConstants<"CdsOtpGroup">;
+};
+export declare const CdsOtpSeparator: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        class: import("vue").PropType<import("../../core").ClassValue>;
+        style: {
+            type: import("vue").PropType<import("vue").StyleValue>;
+            default: null;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        style: import("vue").StyleValue;
+    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("vue").ExtractPropTypes<{
+        class: import("vue").PropType<import("../../core").ClassValue>;
+        style: {
+            type: import("vue").PropType<import("vue").StyleValue>;
+            default: null;
+        };
+    }>> & Readonly<{}>, {}, {}, {}, {}, {
+        style: import("vue").StyleValue;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    class: import("vue").PropType<import("../../core").ClassValue>;
+    style: {
+        type: import("vue").PropType<import("vue").StyleValue>;
+        default: null;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    style: import("vue").StyleValue;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./index.ts").CdsOtpSeparatorSlots;
+}) & {
+    constants: import("../../core").ComponentConstants<"CdsOtpSeparator">;
+};
+export { CdsOtpInputSymbol } from './api/CdsOtpInput.constants';
+export { OtpInputPatterns, useOtpInput } from './composables/useOtpInput';
+export * from './api/CdsOtpInput.types';

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

@@ -43,6 +43,7 @@ export * from './CdsMessages';
 export * from './CdsModal';
 export * from './CdsNotification';
 export * from './CdsNotificationAlert';
+export * from './CdsOtpInput';
 export * from './CdsOverlay';
 export * from './CdsPage';
 export * from './CdsPagination';

package/dist/types/entry.d.ts

@@ -90,6 +90,10 @@ declare module '@vue/runtime-core' {
         CdsModal: typeof components.CdsModal;
         CdsNotification: typeof components.CdsNotification;
         CdsNotificationAlert: typeof components.CdsNotificationAlert;
+        CdsOtpField: typeof components.CdsOtpField;
+        CdsOtpGroup: typeof components.CdsOtpGroup;
+        CdsOtpInput: typeof components.CdsOtpInput;
+        CdsOtpSeparator: typeof components.CdsOtpSeparator;
         CdsOverlay: typeof components.CdsOverlay;
         CdsPage: typeof components.CdsPage;
         CdsPagination: typeof components.CdsPagination;
@@ -141,8 +145,8 @@ declare module '@vue/runtime-core' {
     }
 }
 export { components, directives, themes, utils };
-export type { Blueprint, CdsInstance, CdsOptions } from './cds';
 export * from './assets';
+export type { Blueprint, CdsInstance, CdsOptions } from './cds';
 export * from './components';
 export * from './composables';
 export * from './directives';