@bridge-ui/vue 0.0.6 → 0.0.8

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

@@ -0,0 +1,287 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults, OtpInputType } from '@bridge-ui/core';
+import { OtpFieldOwnProps } from '../otpField.types';
+export type UseOtpFieldOptions = {
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+};
+export declare const otpFieldBridgeKeys: readonly ["mask", "type", "color", "length", "rounded", "variant", "autoFocus", "placeholder", "defaultValue", "size", "error", "label", "corner", "classes", "disabled", "readonly", "required", "controlId", "customProps", "description", "errorMessage", "hideErrorMessage"];
+type OtpFieldLibDefaults = LibDefaultsShape<OtpFieldOwnProps, "size" | "type" | "color" | "length" | "rounded" | "variant">;
+type OtpFieldMerged = MergeLibDefaults<OtpFieldOwnProps, OtpFieldLibDefaults>;
+/**
+ * Composes OTP pin state, field chrome via {@link useBaseField}, and per-pin input handlers.
+ */
+export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, model: Ref<null | string | undefined>, options?: UseOtpFieldOptions, libDefaults?: OtpFieldLibDefaults): {
+    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, {}>;
+    pinsBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+    baseField: {
+        slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        merged: import('vue').ComputedRef<Omit<Omit<import('../../BaseField').BaseFieldOwnProps, "field">, "error" | "size" | "hideErrorMessage"> & {
+            error: NonNullable<boolean | undefined>;
+            size: NonNullable<keyof import('@bridge-ui/core').BaseFieldSize | undefined>;
+            hideErrorMessage: NonNullable<boolean | undefined>;
+        }>;
+        rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            slots?: import('../../BaseField').BaseFieldSlots | 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;
+        }>>;
+        controlId: import('vue').ComputedRef<string>;
+        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>;
+        sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core').BaseFieldSizeItem | undefined>;
+        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<import('../../BaseField').BaseFieldClasses>>;
+        ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
+        fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
+        descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        showErrorMessageContent: import('vue').ComputedRef<boolean>;
+    };
+    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;
+    inputType: import('vue').ComputedRef<OtpInputType>;
+    handlePinInput: (index: number, event: Event) => void;
+    handlePinFocus: (index: number) => void;
+    handlePinPaste: (index: number, event: ClipboardEvent) => void;
+    handlePinKeyDown: (index: number, event: KeyboardEvent) => void;
+};
+export type UseOtpFieldReturn = ReturnType<typeof useOtpField>;
+export {};

package/dist/Components/OtpField/composables/useOtpField.js

@@ -0,0 +1,154 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { baseFieldBridgeKeys as r, useBaseField as i } from "../../BaseField/composables/useBaseField.js";
+import { computed as a, nextTick as o, onMounted as s, ref as c, toValue as l, useAttrs as ee } from "vue";
+import { applyOtpInput as u, applyOtpKeyNavigation as d, applyOtpPaste as f, cn as p, isOtpComplete as m, joinOtpDigits as h, mergeBridgeUILayeredClasses as g, normalizeOtpValue as _, resolveOtpLength as te, splitComponentProps as ne, splitOtpValue as re } from "@bridge-ui/core";
+import { get as v, isUndefined as y, omit as ie, pick as ae } from "es-toolkit/compat";
+import { colorProps as b, invalidatedProps as x, roundedProps as S, sizeProps as C, variantProps as w } from "@bridge-ui/core/Tokens/OtpField";
+//#region src/Components/OtpField/composables/useOtpField.ts
+var oe = [
+	"mask",
+	"type",
+	"color",
+	"length",
+	"rounded",
+	"variant",
+	"autoFocus",
+	"placeholder",
+	"defaultValue",
+	...r
+];
+function se(e) {
+	if (!e) return;
+	let { pin: t, invalidated: n, input: r, ...i } = e;
+	return {
+		...i,
+		...n?.errorMessage ? { invalidated: { errorMessage: n.errorMessage } } : {}
+	};
+}
+function T(T, E, D = {}, ce = {
+	length: 6,
+	size: "md",
+	rounded: "md",
+	type: "numeric",
+	color: "primary",
+	variant: "outline"
+}) {
+	let O = ee(), k = c([]), A = a(() => ne({
+		bridgeKeys: oe,
+		props: {
+			...O,
+			...l(T)
+		}
+	})), { merged: j, entry: M } = t({
+		libDefaults: ce,
+		componentName: "OtpField",
+		props: () => A.value.componentProps
+	}), N = n({
+		entry: M,
+		props: () => A.value.componentProps
+	}), P = a(() => j.value.customProps), F = a(() => se(j.value.customProps)), I = a(() => ({
+		...ae(A.value.componentProps, r),
+		customProps: F.value,
+		id: A.value.inheritedAttrs.id,
+		class: A.value.inheritedAttrs.class,
+		...ie(A.value.inheritedAttrs, ["class", "id"])
+	})), L = i(() => I.value, {
+		size: "md",
+		hideErrorMessage: !1
+	}, {
+		componentName: "OtpField",
+		labelHtmlFor: (e) => `${e}-0`
+	}), { controlId: R, isDisabled: z, isReadonly: B, invalidated: V, ariaDescribedBy: H } = L, U = a(() => te(j.value.length)), W = a(() => j.value.type ?? "numeric"), G = a(() => j.value.variant ?? "outline"), K = a(() => G.value === "underlined"), q = a(() => !y(E.value)), J = c(_(l(T).defaultValue, U.value, W.value)), le = a(() => q.value ? _(E.value, U.value, W.value) : J.value), Y = a(() => re(le.value, U.value));
+	s(() => {
+		if (!j.value.autoFocus || z.value || B.value) return;
+		let e = Y.value.findIndex((e) => e === ""), t = e === -1 ? 0 : e;
+		k.value[t]?.focus();
+	});
+	let X = (e, t) => {
+		let n = h(e);
+		q.value || (J.value = n), E.value = n, D.onChange?.(n), m(n, U.value) && D.onComplete?.(n), t != null && o(() => {
+			k.value[t]?.focus(), k.value[t]?.select();
+		});
+	}, Z = a(() => v(g(C, M.value?.tokens?.size), j.value.size ?? "md")), Q = a(() => v(g(b, M.value?.tokens?.color), j.value.color ?? "primary")), ue = a(() => g(x, M.value?.tokens?.invalidated, j.value.customProps?.invalidated)), $ = a(() => V.value ? ue.value : void 0), de = a(() => v(g(S, M.value?.tokens?.rounded), j.value.rounded ?? "md")), fe = a(() => v(g(w, M.value?.tokens?.variant), G.value));
+	return {
+		merged: j,
+		digits: Y,
+		length: U,
+		pinBind: (t) => e(P.value?.pin, {}, p({
+			"relative flex shrink-0 items-center justify-center overflow-hidden": !0,
+			[Z.value?.pin ?? ""]: !0,
+			[fe.value?.pin ?? ""]: !0,
+			[de.value?.pin ?? ""]: !K.value,
+			[Q.value?.pin ?? ""]: !V.value && !K.value,
+			[Q.value?.underlined ?? ""]: !V.value && K.value,
+			[$.value?.pin ?? ""]: V.value && !K.value,
+			[$.value?.pinUnderlined ?? ""]: V.value && K.value,
+			[N.value.pin ?? ""]: !0
+		})),
+		pinsBind: a(() => e({}, {}, p({
+			"flex flex-wrap items-center": !0,
+			[L.sizeClasses.value?.group ?? ""]: !0
+		}))),
+		baseField: L,
+		inputBind: (t) => {
+			let n = W.value === "numeric" ? "numeric" : "text";
+			return e({
+				...P.value?.input,
+				inputmode: n,
+				maxlength: U.value,
+				disabled: z.value,
+				readOnly: B.value,
+				value: Y.value[t] ?? "",
+				id: `${R.value}-${t}`,
+				placeholder: j.value.placeholder,
+				"aria-describedby": H.value,
+				type: j.value.mask ? "password" : "text",
+				"aria-invalid": V.value || void 0,
+				autocomplete: t === 0 ? "one-time-code" : "off",
+				"aria-label": `Digit ${t + 1} of ${U.value}`
+			}, {}, p({
+				"h-full w-full min-w-0 bg-transparent border-0 shadow-none text-center": !0,
+				"text-gray-900 dark:text-gray-100 placeholder:text-gray-400": !0,
+				"outline-none ring-0 focus:outline-none focus:ring-0": !0,
+				"disabled:cursor-not-allowed": !0,
+				[Z.value?.input ?? ""]: !0,
+				[N.value.input ?? ""]: !0
+			}));
+		},
+		setPinRef: (e, t) => {
+			k.value[e] = t;
+		},
+		inputType: W,
+		handlePinInput: (e, t) => {
+			let n = t.target.value, r = u({
+				index: e,
+				input: n,
+				digits: Y.value,
+				type: W.value
+			});
+			X(r.digits, r.focusIndex);
+		},
+		handlePinFocus: (e) => {
+			k.value[e]?.select();
+		},
+		handlePinPaste: (e, t) => {
+			let n = f({
+				index: e,
+				pasted: t.clipboardData?.getData("text") ?? "",
+				digits: Y.value,
+				type: W.value
+			});
+			n.focusIndex == null && n.digits.every((e, t) => e === Y.value[t]) || (t.preventDefault(), X(n.digits, n.focusIndex));
+		},
+		handlePinKeyDown: (e, t) => {
+			let n = d({
+				index: e,
+				key: t.key,
+				digits: Y.value
+			});
+			n && (t.preventDefault(), X(n.digits, n.focusIndex));
+		}
+	};
+}
+//#endregion
+export { T as useOtpField };

package/dist/Components/OtpField/index.d.ts

@@ -0,0 +1,4 @@
+export { useOtpField } from './composables/useOtpField';
+export type { UseOtpFieldOptions } from './composables/useOtpField';
+export type { OtpFieldClasses, OtpFieldColorOverrides, OtpFieldCustomProps, OtpFieldEmits, OtpFieldOwnProps, OtpFieldProps, OtpFieldRoundedOverrides, OtpFieldSizeOverrides, OtpFieldSlots, OtpFieldVariantOverrides, } from './otpField.types';
+export { default as OtpField } from './OtpField.vue';

package/dist/Components/OtpField/index.js

@@ -0,0 +1,3 @@
+import { useOtpField as e } from "./composables/useOtpField.js";
+import t from "./OtpField.js";
+export { t as OtpField, e as useOtpField };

package/dist/Components/OtpField/otpField.types.d.ts

@@ -0,0 +1,120 @@
+import { HTMLAttributes, InputHTMLAttributes } from 'vue';
+import { BaseFieldInvalidated, MergeHtmlProps, MergeProps, OtpFieldColor, OtpFieldInvalidated, OtpFieldRounded, OtpFieldVariant, OtpInputType } from '@bridge-ui/core';
+import { BaseFieldClasses, BaseFieldCustomProps, BaseFieldOwnProps, BaseFieldSlots } from '../BaseField/baseField.types';
+export interface OtpFieldColorOverrides {}
+export interface OtpFieldRoundedOverrides {}
+export interface OtpFieldSizeOverrides {}
+export interface OtpFieldVariantOverrides {}
+export interface OtpFieldClasses extends BaseFieldClasses {
+    /**
+     * Classes merged onto each pin `<input>`.
+     */
+    input?: string;
+    /**
+     * Classes merged onto each pin cell wrapper.
+     */
+    pin?: string;
+}
+export interface OtpFieldCustomProps extends Omit<BaseFieldCustomProps, "invalidated"> {
+    /**
+     * Props forwarded to each pin `<input>`.
+     */
+    input?: Partial<InputHTMLAttributes>;
+    /**
+     * Pin error chrome (`pin` / `pinUnderlined`). Error message color comes from
+     * {@link BaseField} (`Tokens/BaseField`); pass `errorMessage` here to override.
+     *
+     * @default undefined
+     */
+    invalidated?: Partial<OtpFieldInvalidated & BaseFieldInvalidated>;
+    /**
+     * Props forwarded to each pin cell wrapper.
+     */
+    pin?: HTMLAttributes;
+}
+export interface OtpFieldEmits {
+    /**
+     * Emitted when the OTP string changes.
+     */
+    change: [value: string];
+    /**
+     * Emitted when every pin slot is filled.
+     */
+    complete: [value: string];
+}
+export interface OtpFieldOwnProps extends Omit<BaseFieldOwnProps, "field" | "slots" | "classes" | "children" | "customProps"> {
+    /**
+     * Autofocus the first empty pin (or the first pin) on mount.
+     *
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Classes for the field chrome and pin cells.
+     *
+     * @default undefined
+     */
+    classes?: OtpFieldClasses;
+    /**
+     * Focus ring / underline color on each pin.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<OtpFieldColor, OtpFieldColorOverrides>;
+    /**
+     * Extra props for internal parts (`root`, `pin`, `input`, …).
+     *
+     * @default undefined
+     */
+    customProps?: OtpFieldCustomProps;
+    /**
+     * Initial value for uncontrolled usage (when `v-model` / `modelValue` is
+     * not bound).
+     *
+     * @default undefined
+     */
+    defaultValue?: string;
+    /**
+     * Number of pin slots.
+     *
+     * @default 6
+     */
+    length?: number;
+    /**
+     * Mask pin values (password-style dots).
+     *
+     * @default false
+     */
+    mask?: boolean;
+    /**
+     * Placeholder character shown in empty pins.
+     *
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * Border radius of each pin cell.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<OtpFieldRounded, OtpFieldRoundedOverrides>;
+    /**
+     * Character set accepted by each pin.
+     *
+     * @default "numeric"
+     */
+    type?: OtpInputType;
+    /**
+     * Visual variant applied to each pin cell.
+     *
+     * @default "outline"
+     */
+    variant?: MergeProps<OtpFieldVariant, OtpFieldVariantOverrides>;
+}
+export interface OtpFieldSlots extends BaseFieldSlots {}
+export type OtpFieldProps = MergeHtmlProps<OtpFieldOwnProps, Omit<HTMLAttributes, "color" | "onChange">> & {
+    /**
+     * Bound with `v-model` on the component (`defineModel` internally).
+     */
+    modelValue?: null | string;
+};

package/dist/Components/PasswordField/PasswordField.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,13 @@
-import { useI18nAdapter as e } from "../../Adapters/I18n/useI18nAdapter.js";
+import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { mergePartBind as t, resolveFieldAdornmentIconSize as n } from "../../Utils/index.js";
 import r from "../Icon/Icon.js";
 import i from "../FormField/FormField.js";
 import { usePasswordField as a } from "./composables/usePasswordField.js";
 import { computed as o, createBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, mergeModels as f, mergeProps as p, normalizeProps as m, openBlock as h, ref as g, unref as _, useModel as v, vModelDynamic as y, withCtx as b, withDirectives as x } from "vue";
-import { isUndefined as S } from "es-toolkit/compat";
-import { cn as C, resolveMessage as w } from "@bridge-ui/core";
+import { cn as S } from "@bridge-ui/core";
+import { isUndefined as C } from "es-toolkit/compat";
 //#region src/Components/PasswordField/PasswordField.vue?vue&type=script&setup=true&lang.ts
-var T = /* @__PURE__ */ u({
+var w = /* @__PURE__ */ u({
 	inheritAttrs: !1,
 	__name: "PasswordField",
 	props: /* @__PURE__ */ f({
@@ -28,46 +28,46 @@ var T = /* @__PURE__ */ u({
 		error: { type: Boolean },
 		errorIcon: {},
 		errorMessage: {},
+		hideErrorMessage: { type: Boolean },
 		label: {},
 		readonly: { type: Boolean },
 		required: { type: Boolean },
 		rounded: {},
+		showErrorIcon: { type: Boolean },
 		size: {},
 		slots: {},
 		start: {},
 		startIcon: {},
-		variant: {},
-		withErrorIcon: { type: Boolean },
-		withoutErrorMessage: { type: Boolean }
+		variant: {}
 	}, {
 		modelValue: {},
 		modelModifiers: {}
 	}),
 	emits: /* @__PURE__ */ f(["visibility-change"], ["update:modelValue"]),
 	setup(u, { emit: f }) {
-		let T = f, E = v(u, "modelValue"), D = u, O = g(D.defaultValue), k = o({
+		let w = f, T = v(u, "modelValue"), E = u, D = g(E.defaultValue), O = o({
 			set: (e) => {
-				E.value = e, O.value = e;
+				T.value = e, D.value = e;
 			},
-			get: () => S(E.value) ? O.value : E.value
-		}), A = e(), { formField: j, inputBind: M, isVisible: N, mergedClasses: P, toggleVisibility: F } = a(D, { onVisibilityChange: (e) => T("visibility-change", e) }), I = o(() => t(D.customProps?.toggle, {
+			get: () => C(T.value) ? D.value : T.value
+		}), k = e(), { formField: A, inputBind: j, isVisible: M, mergedClasses: N, toggleVisibility: P } = a(E, { onVisibilityChange: (e) => w("visibility-change", e) }), F = o(() => t(E.customProps?.toggle, {
 			type: "button",
-			disabled: D.disabled,
-			onClick: F,
-			"aria-label": N.value ? w("Hide password", A.value) : w("Show password", A.value)
-		}, C({
+			disabled: E.disabled,
+			onClick: P,
+			"aria-label": M.value ? k("Hide password") : k("Show password")
+		}, S({
 			"bridge-end-adornment bridge-field-adornment-button inline-flex h-full items-center justify-center px-2.5": !0,
-			[P.value.toggle ?? ""]: !0
+			[N.value.toggle ?? ""]: !0
 		})));
-		return (e, t) => (h(), s(_(i), { field: _(j) }, {
-			end: b(() => [c("button", m(d(I.value)), [l(_(r), p({
-				icon: _(N) ? "eyeOff" : "eye",
-				size: _(n)(D.size)
-			}, D.customProps?.toggleIcon), null, 16, ["icon", "size"])], 16)]),
-			default: b(() => [x(c("input", p({ "onUpdate:modelValue": t[0] ||= (e) => k.value = e }, _(M)), null, 16), [[y, k.value]])]),
+		return (e, t) => (h(), s(_(i), { field: _(A) }, {
+			end: b(() => [c("button", m(d(F.value)), [l(_(r), p({
+				icon: _(M) ? "eyeOff" : "eye",
+				size: _(n)(E.size)
+			}, E.customProps?.toggleIcon), null, 16, ["icon", "size"])], 16)]),
+			default: b(() => [x(c("input", p({ "onUpdate:modelValue": t[0] ||= (e) => O.value = e }, _(j)), null, 16), [[y, O.value]])]),
 			_: 1
 		}, 8, ["field"]));
 	}
 });
 //#endregion
-export { T as default };
+export { w as default };