@bridge-ui/vue 0.0.5 → 0.0.7

package/dist/Components/OtpField/OtpField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,80 @@
+import { hasNamedSlot as e, hasSlotOrProp as t, resolveNamedSlot as n, resolveSlotOrProp as r } from "../../Utils/slotOrProp.js";
+import { useOtpField as i } from "./composables/useOtpField.js";
+import a from "./OtpFieldLabel.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeModels as h, mergeProps as g, normalizeProps as _, openBlock as v, renderList as y, resolveDynamicComponent as b, unref as x, useModel as S } from "vue";
+//#region src/Components/OtpField/OtpField.vue?vue&type=script&setup=true&lang.ts
+var C = [
+	"data-invalid",
+	"aria-disabled",
+	"aria-readonly"
+], w = [
+	"value",
+	"onFocus",
+	"onPaste",
+	"onInput",
+	"onKeydown"
+], T = ["id"], E = ["id", "aria-hidden"], D = /* @__PURE__ */ p({
+	inheritAttrs: !1,
+	__name: "OtpField",
+	props: /* @__PURE__ */ h({
+		autoFocus: { type: Boolean },
+		classes: {},
+		color: { default: "primary" },
+		controlId: {},
+		corner: {},
+		customProps: {},
+		defaultValue: {},
+		description: {},
+		disabled: { type: Boolean },
+		error: { type: Boolean },
+		errorMessage: {},
+		hideErrorMessage: { type: Boolean },
+		label: {},
+		length: { default: 6 },
+		mask: { type: Boolean },
+		placeholder: {},
+		readonly: { type: Boolean },
+		required: { type: Boolean },
+		rounded: { default: "md" },
+		size: { default: "md" },
+		type: { default: "numeric" },
+		variant: { default: "outline" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ h(["change", "complete"], ["update:modelValue"]),
+	setup(p, { emit: h }) {
+		let D = h, O = i(p, S(p, "modelValue"), {
+			onChange: (e) => D("change", e),
+			onComplete: (e) => D("complete", e)
+		}), { slots: k, merged: A, digits: j, pinBind: M, rootBind: N, errorBind: P, groupBind: F, inputBind: I, setPinRef: L, controlId: R, headerBind: z, cornerBind: B, endSlotBind: V, invalidated: H, startSlotBind: U, handlePinInput: W, handlePinFocus: G, handlePinPaste: K, descriptionBind: q, handlePinKeyDown: J, showErrorMessageContent: Y } = O, X = s(() => t(k, "label", A.value.label) || t(k, "corner", A.value.corner));
+		return (i, s) => (v(), u("div", g(x(N), {
+			"data-invalid": x(H) || void 0,
+			"aria-disabled": x(A).disabled || void 0,
+			"aria-readonly": x(A).readonly || void 0
+		}), [
+			X.value ? (v(), u("div", _(g({ key: 0 }, x(z))), [f(a, { api: x(O) }, null, 8, ["api"]), x(t)(x(k), "corner", x(A).corner) ? (v(), u("span", _(g({ key: 0 }, x(B))), [(v(), c(b(x(r)(x(k), "corner", x(A).corner))))], 16)) : l("", !0)], 16)) : l("", !0),
+			d("div", _(m(x(F))), [
+				x(e)(x(k), "start") ? (v(), u("div", _(g({ key: 0 }, x(U))), [(v(), c(b(x(n)(x(k), "start"))))], 16)) : l("", !0),
+				(v(!0), u(o, null, y(x(j), (e, t) => (v(), u("div", g({ key: t }, { ref_for: !0 }, x(M)(t)), [d("input", g({ ref_for: !0 }, x(I)(t), {
+					value: e,
+					onFocus: (e) => x(G)(t),
+					onPaste: (e) => x(K)(t, e),
+					onInput: (e) => x(W)(t, e),
+					onKeydown: (e) => x(J)(t, e),
+					ref_for: !0,
+					ref: (e) => x(L)(t, e)
+				}), null, 16, w)], 16))), 128)),
+				x(e)(x(k), "end") ? (v(), u("div", _(g({ key: 1 }, x(V))), [(v(), c(b(x(n)(x(k), "end"))))], 16)) : l("", !0)
+			], 16),
+			!x(H) && x(t)(x(k), "description", x(A).description) ? (v(), u("p", g({ key: 1 }, x(q), { id: `${x(R)}-description` }), [(v(), c(b(x(r)(x(k), "description", x(A).description))))], 16, T)) : l("", !0),
+			x(A).hideErrorMessage ? l("", !0) : (v(), u("p", g({ key: 2 }, x(P), {
+				id: `${x(R)}-error`,
+				"aria-hidden": x(Y) ? void 0 : !0
+			}), [x(Y) ? (v(), c(b(x(r)(x(k), "errorMessage", x(A).errorMessage)), { key: 0 })) : l("", !0)], 16, E))
+		], 16, C));
+	}
+});
+//#endregion
+export { D as default };

package/dist/Components/OtpField/OtpFieldLabel.js

@@ -0,0 +1,5 @@
+import e from "./OtpFieldLabel.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/OtpField/OtpFieldLabel.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/OtpField/OtpFieldLabel.vue.d.ts

@@ -0,0 +1,7 @@
+import { UseOtpFieldReturn } from './composables/useOtpField';
+type __VLS_Props = {
+    api: UseOtpFieldReturn;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/Components/OtpField/OtpFieldLabel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,16 @@
+import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n, resolveNamedSlot as r } from "../../Utils/slotOrProp.js";
+import i from "../Label/Label.js";
+import { Fragment as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createTextVNode as l, defineComponent as u, mergeProps as d, normalizeProps as f, openBlock as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
+//#region src/Components/OtpField/OtpFieldLabel.vue?vue&type=script&setup=true&lang.ts
+var v = /* @__PURE__ */ u({
+	__name: "OtpFieldLabel",
+	props: { api: {} },
+	setup(u) {
+		return (v, y) => g(t)(u.api.slots, "label", u.api.merged.value.label) ? (p(), o(g(i), f(d({ key: 0 }, u.api.fieldLabelProps.value)), {
+			default: _(() => [g(e)(u.api.slots, "label") ? (p(), o(m(g(r)(u.api.slots, "label")), { key: 0 })) : g(n)(u.api.merged.value.label) ? (p(), c(a, { key: 1 }, [l(h(u.api.merged.value.label), 1)], 64)) : s("", !0)]),
+			_: 1
+		}, 16)) : s("", !0);
+	}
+});
+//#endregion
+export { v as default };

package/dist/Components/OtpField/composables/useOtpField.d.ts

@@ -0,0 +1,460 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults, OtpInputType } from '@bridge-ui/core';
+import { LabelProps } from '../../Label/label.types';
+import { OtpFieldClasses, OtpFieldOwnProps } from '../otpField.types';
+export type UseOtpFieldOptions = {
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+};
+export declare const otpFieldBridgeKeys: readonly ["mask", "size", "type", "color", "error", "label", "corner", "length", "classes", "rounded", "variant", "disabled", "readonly", "required", "autoFocus", "controlId", "customProps", "description", "placeholder", "defaultValue", "errorMessage", "hideErrorMessage"];
+type OtpFieldLibDefaults = LibDefaultsShape<OtpFieldOwnProps, "size" | "type" | "color" | "length" | "rounded" | "variant">;
+type OtpFieldMerged = MergeLibDefaults<OtpFieldOwnProps, OtpFieldLibDefaults>;
+/**
+ * Composes OTP pin state, field chrome binds, and per-pin input handlers.
+ */
+export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, model: Ref<null | string | undefined>, options?: UseOtpFieldOptions, libDefaults?: OtpFieldLibDefaults): {
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    merged: import('vue').ComputedRef<OtpFieldMerged>;
+    digits: import('vue').ComputedRef<string[]>;
+    length: import('vue').ComputedRef<number>;
+    pinBind: (_index: number) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+        onCut?: ((payload: ClipboardEvent) => void) | undefined;
+        onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+        onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+        onDrag?: ((payload: DragEvent) => void) | undefined;
+        onDragend?: ((payload: DragEvent) => void) | undefined;
+        onDragenter?: ((payload: DragEvent) => void) | undefined;
+        onDragexit?: ((payload: DragEvent) => void) | undefined;
+        onDragleave?: ((payload: DragEvent) => void) | undefined;
+        onDragover?: ((payload: DragEvent) => void) | undefined;
+        onDragstart?: ((payload: DragEvent) => void) | undefined;
+        onDrop?: ((payload: DragEvent) => void) | undefined;
+        onFocus?: ((payload: FocusEvent) => void) | undefined;
+        onFocusin?: ((payload: FocusEvent) => void) | undefined;
+        onFocusout?: ((payload: FocusEvent) => void) | undefined;
+        onBlur?: ((payload: FocusEvent) => void) | undefined;
+        onBeforeinput?: ((payload: InputEvent) => void) | undefined;
+        onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+        onInput?: ((payload: InputEvent) => void) | undefined;
+        onReset?: ((payload: Event) => void) | undefined;
+        onSubmit?: ((payload: SubmitEvent) => void) | undefined;
+        onInvalid?: ((payload: Event) => void) | undefined;
+        onFullscreenchange?: ((payload: Event) => void) | undefined;
+        onFullscreenerror?: ((payload: Event) => void) | undefined;
+        onLoad?: ((payload: Event) => void) | undefined;
+        onError?: ((payload: Event) => void) | undefined;
+        onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+        onDblclick?: ((payload: MouseEvent) => void) | undefined;
+        onMousedown?: ((payload: MouseEvent) => void) | undefined;
+        onMouseenter?: ((payload: MouseEvent) => void) | undefined;
+        onMouseleave?: ((payload: MouseEvent) => void) | undefined;
+        onMousemove?: ((payload: MouseEvent) => void) | undefined;
+        onMouseout?: ((payload: MouseEvent) => void) | undefined;
+        onMouseover?: ((payload: MouseEvent) => void) | undefined;
+        onMouseup?: ((payload: MouseEvent) => void) | undefined;
+        onAbort?: ((payload: UIEvent) => void) | undefined;
+        onCanplay?: ((payload: Event) => void) | undefined;
+        onCanplaythrough?: ((payload: Event) => void) | undefined;
+        onDurationchange?: ((payload: Event) => void) | undefined;
+        onEmptied?: ((payload: Event) => void) | undefined;
+        onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
+        onEnded?: ((payload: Event) => void) | undefined;
+        onLoadeddata?: ((payload: Event) => void) | undefined;
+        onLoadedmetadata?: ((payload: Event) => void) | undefined;
+        onLoadstart?: ((payload: Event) => void) | undefined;
+        onPause?: ((payload: Event) => void) | undefined;
+        onPlay?: ((payload: Event) => void) | undefined;
+        onPlaying?: ((payload: Event) => void) | undefined;
+        onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
+        onRatechange?: ((payload: Event) => void) | undefined;
+        onSeeked?: ((payload: Event) => void) | undefined;
+        onSeeking?: ((payload: Event) => void) | undefined;
+        onStalled?: ((payload: Event) => void) | undefined;
+        onSuspend?: ((payload: Event) => void) | undefined;
+        onTimeupdate?: ((payload: Event) => void) | undefined;
+        onVolumechange?: ((payload: Event) => void) | undefined;
+        onWaiting?: ((payload: Event) => void) | undefined;
+        onSelect?: ((payload: Event) => void) | undefined;
+        onScroll?: ((payload: Event) => void) | undefined;
+        onScrollend?: ((payload: Event) => void) | undefined;
+        onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+        onTouchend?: ((payload: TouchEvent) => void) | undefined;
+        onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+        onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+        onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+        onClick?: ((payload: PointerEvent) => void) | undefined;
+        onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+        onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+        onPointermove?: ((payload: PointerEvent) => void) | undefined;
+        onPointerup?: ((payload: PointerEvent) => void) | undefined;
+        onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+        onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+        onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+        onPointerover?: ((payload: PointerEvent) => void) | undefined;
+        onPointerout?: ((payload: PointerEvent) => void) | undefined;
+        onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+        onToggle?: ((payload: ToggleEvent) => void) | undefined;
+        onWheel?: ((payload: WheelEvent) => void) | undefined;
+        onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+        onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+        onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
+        innerHTML?: string | undefined | undefined;
+        style?: import('vue').StyleValue;
+        lang?: string | undefined | undefined;
+        role?: string | undefined | undefined;
+        tabindex?: (string | number) | undefined;
+        'aria-activedescendant'?: string | undefined | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-colcount'?: (string | number) | undefined;
+        'aria-colindex'?: (string | number) | undefined;
+        'aria-colspan'?: (string | number) | undefined;
+        'aria-controls'?: string | undefined | undefined;
+        'aria-current'?: (boolean | "true" | "false") | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-describedby'?: string | undefined | undefined;
+        'aria-details'?: string | undefined | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        'aria-errormessage'?: string | undefined | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined | undefined;
+        'aria-label'?: string | undefined | undefined;
+        'aria-labelledby'?: string | undefined | undefined;
+        'aria-level'?: (string | number) | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined | undefined;
+        'aria-owns'?: string | undefined | undefined;
+        'aria-placeholder'?: string | undefined | undefined;
+        'aria-posinset'?: (string | number) | undefined;
+        'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined | undefined;
+        'aria-rowcount'?: (string | number) | undefined;
+        'aria-rowindex'?: (string | number) | undefined;
+        'aria-rowspan'?: (string | number) | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: (string | number) | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        'aria-valuemax'?: (string | number) | undefined;
+        'aria-valuemin'?: (string | number) | undefined;
+        'aria-valuenow'?: (string | number) | undefined;
+        'aria-valuetext'?: string | undefined | undefined;
+        accesskey?: string | undefined | undefined;
+        contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextmenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        enterKeyHint?: "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
+        inert?: (boolean | "true" | "false") | undefined;
+        spellcheck?: (boolean | "true" | "false") | undefined;
+        title?: string | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radiogroup?: string | undefined | undefined;
+        about?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autocapitalize?: string | undefined | undefined;
+        autocorrect?: string | undefined | undefined;
+        autosave?: string | undefined | undefined;
+        itemprop?: string | undefined | undefined;
+        itemscope?: (boolean | "true" | "false") | undefined;
+        itemtype?: string | undefined | undefined;
+        itemid?: string | undefined | undefined;
+        itemref?: string | undefined | undefined;
+        results?: (string | number) | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
+        modelValue?: null | string | undefined;
+        class: string;
+    }>>;
+    errorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    groupBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        role: string;
+        id: string;
+        "aria-describedby": string | undefined;
+        "aria-disabled": true | undefined;
+        "aria-invalid": true | undefined;
+    }>>;
+    inputBind: (index: number) => import('@bridge-ui/core').MergePartBind<object, "class", {
+        inputmode: "text" | "numeric";
+        maxlength: number;
+        disabled: boolean;
+        readOnly: boolean;
+        value: string;
+        id: string;
+        placeholder: string | undefined;
+        "aria-describedby": string | undefined;
+        type: string;
+        "aria-invalid": true | undefined;
+        autocomplete: string;
+        "aria-label": string;
+        accept?: string | undefined;
+        alt?: string | undefined;
+        autofocus?: (boolean | "true" | "false") | undefined;
+        capture?: boolean | "user" | "environment" | undefined;
+        checked?: (boolean | "true" | "false") | any[] | Set<any> | undefined;
+        crossorigin?: string | undefined;
+        form?: string | undefined;
+        formaction?: string | undefined;
+        formenctype?: string | undefined;
+        formmethod?: string | undefined;
+        formnovalidate?: (boolean | "true" | "false") | undefined;
+        formtarget?: string | undefined;
+        height?: (string | number) | undefined;
+        indeterminate?: boolean | undefined;
+        list?: string | undefined;
+        max?: (string | number) | undefined;
+        min?: (string | number) | undefined;
+        minlength?: (string | number) | undefined;
+        multiple?: (boolean | "true" | "false") | undefined;
+        name?: string | undefined;
+        pattern?: string | undefined;
+        readonly?: (boolean | "true" | "false") | undefined;
+        required?: (boolean | "true" | "false") | undefined;
+        size?: (string | number) | undefined;
+        src?: string | undefined;
+        step?: (string | number) | undefined;
+        width?: (string | number) | undefined;
+        onCancel?: ((payload: Event) => void) | undefined;
+        innerHTML?: string | undefined;
+        class?: import('vue').ClassValue | undefined;
+        style?: import('vue').StyleValue | undefined;
+        accesskey?: string | undefined;
+        contenteditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+        contextmenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        enterKeyHint?: import('vue').HTMLAttributes["enterkeyhint"];
+        hidden?: (boolean | "true" | "false") | "" | "hidden" | "until-found" | undefined;
+        inert?: (boolean | "true" | "false") | undefined;
+        lang?: string | undefined;
+        spellcheck?: (boolean | "true" | "false") | undefined;
+        tabindex?: (string | number) | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radiogroup?: string | undefined;
+        role?: string | undefined;
+        about?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        resource?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autocapitalize?: string | undefined;
+        autocorrect?: string | undefined;
+        autosave?: string | undefined;
+        color?: string | undefined;
+        itemprop?: string | undefined;
+        itemscope?: (boolean | "true" | "false") | undefined;
+        itemtype?: string | undefined;
+        itemid?: string | undefined;
+        itemref?: string | undefined;
+        results?: (string | number) | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        is?: string | undefined;
+        exportparts?: string;
+        part?: string;
+        'aria-activedescendant'?: string | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-colcount'?: (string | number) | undefined;
+        'aria-colindex'?: (string | number) | undefined;
+        'aria-colspan'?: (string | number) | undefined;
+        'aria-controls'?: string | undefined;
+        'aria-current'?: (boolean | "true" | "false") | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-details'?: string | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        'aria-errormessage'?: string | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-keyshortcuts'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+        'aria-level'?: (string | number) | undefined;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-owns'?: string | undefined;
+        'aria-placeholder'?: string | undefined;
+        'aria-posinset'?: (string | number) | undefined;
+        'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined;
+        'aria-rowcount'?: (string | number) | undefined;
+        'aria-rowindex'?: (string | number) | undefined;
+        'aria-rowspan'?: (string | number) | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: (string | number) | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
+        'aria-valuemax'?: (string | number) | undefined;
+        'aria-valuemin'?: (string | number) | undefined;
+        'aria-valuenow'?: (string | number) | undefined;
+        'aria-valuetext'?: string | undefined;
+        onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+        onCut?: ((payload: ClipboardEvent) => void) | undefined;
+        onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+        onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+        onDrag?: ((payload: DragEvent) => void) | undefined;
+        onDragend?: ((payload: DragEvent) => void) | undefined;
+        onDragenter?: ((payload: DragEvent) => void) | undefined;
+        onDragexit?: ((payload: DragEvent) => void) | undefined;
+        onDragleave?: ((payload: DragEvent) => void) | undefined;
+        onDragover?: ((payload: DragEvent) => void) | undefined;
+        onDragstart?: ((payload: DragEvent) => void) | undefined;
+        onDrop?: ((payload: DragEvent) => void) | undefined;
+        onFocus?: ((payload: FocusEvent) => void) | undefined;
+        onFocusin?: ((payload: FocusEvent) => void) | undefined;
+        onFocusout?: ((payload: FocusEvent) => void) | undefined;
+        onBlur?: ((payload: FocusEvent) => void) | undefined;
+        onChange?: ((payload: Event) => void) | undefined;
+        onBeforeinput?: ((payload: InputEvent) => void) | undefined;
+        onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+        onInput?: ((payload: InputEvent) => void) | undefined;
+        onReset?: ((payload: Event) => void) | undefined;
+        onSubmit?: ((payload: SubmitEvent) => void) | undefined;
+        onInvalid?: ((payload: Event) => void) | undefined;
+        onFullscreenchange?: ((payload: Event) => void) | undefined;
+        onFullscreenerror?: ((payload: Event) => void) | undefined;
+        onLoad?: ((payload: Event) => void) | undefined;
+        onError?: ((payload: Event) => void) | undefined;
+        onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+        onDblclick?: ((payload: MouseEvent) => void) | undefined;
+        onMousedown?: ((payload: MouseEvent) => void) | undefined;
+        onMouseenter?: ((payload: MouseEvent) => void) | undefined;
+        onMouseleave?: ((payload: MouseEvent) => void) | undefined;
+        onMousemove?: ((payload: MouseEvent) => void) | undefined;
+        onMouseout?: ((payload: MouseEvent) => void) | undefined;
+        onMouseover?: ((payload: MouseEvent) => void) | undefined;
+        onMouseup?: ((payload: MouseEvent) => void) | undefined;
+        onAbort?: ((payload: UIEvent) => void) | undefined;
+        onCanplay?: ((payload: Event) => void) | undefined;
+        onCanplaythrough?: ((payload: Event) => void) | undefined;
+        onDurationchange?: ((payload: Event) => void) | undefined;
+        onEmptied?: ((payload: Event) => void) | undefined;
+        onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
+        onEnded?: ((payload: Event) => void) | undefined;
+        onLoadeddata?: ((payload: Event) => void) | undefined;
+        onLoadedmetadata?: ((payload: Event) => void) | undefined;
+        onLoadstart?: ((payload: Event) => void) | undefined;
+        onPause?: ((payload: Event) => void) | undefined;
+        onPlay?: ((payload: Event) => void) | undefined;
+        onPlaying?: ((payload: Event) => void) | undefined;
+        onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
+        onRatechange?: ((payload: Event) => void) | undefined;
+        onSeeked?: ((payload: Event) => void) | undefined;
+        onSeeking?: ((payload: Event) => void) | undefined;
+        onStalled?: ((payload: Event) => void) | undefined;
+        onSuspend?: ((payload: Event) => void) | undefined;
+        onTimeupdate?: ((payload: Event) => void) | undefined;
+        onVolumechange?: ((payload: Event) => void) | undefined;
+        onWaiting?: ((payload: Event) => void) | undefined;
+        onSelect?: ((payload: Event) => void) | undefined;
+        onScroll?: ((payload: Event) => void) | undefined;
+        onScrollend?: ((payload: Event) => void) | undefined;
+        onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+        onTouchend?: ((payload: TouchEvent) => void) | undefined;
+        onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+        onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+        onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+        onClick?: ((payload: PointerEvent) => void) | undefined;
+        onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+        onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+        onPointermove?: ((payload: PointerEvent) => void) | undefined;
+        onPointerup?: ((payload: PointerEvent) => void) | undefined;
+        onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+        onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+        onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+        onPointerover?: ((payload: PointerEvent) => void) | undefined;
+        onPointerout?: ((payload: PointerEvent) => void) | undefined;
+        onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+        onToggle?: ((payload: ToggleEvent) => void) | undefined;
+        onWheel?: ((payload: WheelEvent) => void) | undefined;
+        onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+        onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+        onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
+    }, {}>;
+    setPinRef: (index: number, element: null | HTMLInputElement) => void;
+    controlId: import('vue').ComputedRef<string>;
+    inputType: import('vue').ComputedRef<OtpInputType>;
+    headerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    cornerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    isDisabled: import('vue').ComputedRef<boolean>;
+    isReadonly: import('vue').ComputedRef<boolean>;
+    endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    invalidated: import('vue').ComputedRef<boolean>;
+    startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    mergedClasses: import('vue').ComputedRef<Partial<OtpFieldClasses>>;
+    handlePinInput: (index: number, event: Event) => void;
+    handlePinFocus: (index: number) => void;
+    handlePinPaste: (index: number, event: ClipboardEvent) => void;
+    fieldLabelProps: import('vue').ComputedRef<LabelProps>;
+    descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    handlePinKeyDown: (index: number, event: KeyboardEvent) => void;
+    showErrorMessageContent: import('vue').ComputedRef<boolean>;
+};
+export type UseOtpFieldReturn = ReturnType<typeof useOtpField>;
+export {};