@bridge-ui/vue 0.0.7 → 0.0.9

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

@@ -1,219 +1,58 @@
 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';
+import { 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"];
+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 binds, and per-pin input handlers.
+ * 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): {
-    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;
-    }>>;
+    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;
@@ -438,23 +277,11 @@ export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, m
         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 {};

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

@@ -1,34 +1,30 @@
-import { hasSlotOrProp as e } from "../../../Utils/slotOrProp.js";
-import { mergeNestedComponentProps as t, mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
-import { computed as a, nextTick as o, onMounted as s, ref as c, toValue as l, useAttrs as u, useId as ee, useSlots as te } from "vue";
-import { applyOtpInput as ne, applyOtpKeyNavigation as d, applyOtpPaste as f, cn as p, isOtpComplete as m, joinOtpDigits as h, mergeBridgeUILayeredClasses as g, normalizeOtpValue as _, resolveOtpLength as v, splitComponentProps as y, splitOtpValue as b } from "@bridge-ui/core";
-import { get as x, isUndefined as S, omit as C } from "es-toolkit/compat";
-import { colorProps as w, invalidatedProps as T, roundedProps as re, sizeProps as ie, variantProps as ae } from "@bridge-ui/core/Tokens/OtpField";
+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 b, pick as ie } from "es-toolkit/compat";
+import { colorProps as ae, 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 = [
+var T = [
 	"mask",
-	"size",
 	"type",
 	"color",
-	"error",
-	"label",
-	"corner",
 	"length",
-	"classes",
 	"rounded",
 	"variant",
-	"disabled",
-	"readonly",
-	"required",
 	"autoFocus",
-	"controlId",
-	"customProps",
-	"description",
 	"placeholder",
 	"defaultValue",
-	"errorMessage",
-	"hideErrorMessage"
+	...r
 ];
+function oe(e) {
+	if (!e) return;
+	let { pin: t, invalidated: n, input: r, ...i } = e;
+	return {
+		...i,
+		...n?.errorMessage ? { invalidated: { errorMessage: n.errorMessage } } : {}
+	};
+}
 function E(E, D, O = {}, se = {
 	length: 6,
 	size: "md",
@@ -37,176 +33,134 @@ function E(E, D, O = {}, se = {
 	color: "primary",
 	variant: "outline"
 }) {
-	let ce = u(), k = te(), A = ee(), j = c([]), M = a(() => y({
-		bridgeKeys: oe,
+	let ce = ee(), k = c([]), A = a(() => ne({
+		bridgeKeys: T,
 		props: {
 			...ce,
 			...l(E)
 		}
-	})), { merged: N, entry: P } = r({
+	})), { merged: j, entry: M } = t({
 		libDefaults: se,
 		componentName: "OtpField",
-		props: () => M.value.componentProps
-	}), F = i({
-		entry: P,
-		props: () => M.value.componentProps
-	}), I = a(() => N.value.customProps), L = a(() => v(N.value.length)), R = a(() => N.value.type ?? "numeric"), z = a(() => N.value.error === !0), B = a(() => !!N.value.disabled), V = a(() => !!N.value.readonly), H = a(() => N.value.variant ?? "outline"), U = a(() => H.value === "underlined"), W = a(() => N.value.controlId ?? M.value.inheritedAttrs.id ?? A), G = a(() => !S(D.value)), K = c(_(l(E).defaultValue, L.value, R.value)), le = a(() => G.value ? _(D.value, L.value, R.value) : K.value), q = a(() => b(le.value, L.value));
+		props: () => A.value.componentProps
+	}), N = n({
+		entry: M,
+		props: () => A.value.componentProps
+	}), P = a(() => j.value.customProps), F = a(() => oe(j.value.customProps)), I = a(() => ({
+		...ie(A.value.componentProps, r),
+		customProps: F.value,
+		id: A.value.inheritedAttrs.id,
+		class: A.value.inheritedAttrs.class,
+		...b(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(D.value)), J = c(_(l(E).defaultValue, U.value, W.value)), le = a(() => q.value ? _(D.value, U.value, W.value) : J.value), Y = a(() => re(le.value, U.value));
 	s(() => {
-		if (!N.value.autoFocus || B.value || V.value) return;
-		let e = q.value.findIndex((e) => e === ""), t = e === -1 ? 0 : e;
-		j.value[t]?.focus();
+		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 J = (e, t) => {
+	let X = (e, t) => {
 		let n = h(e);
-		G.value || (K.value = n), D.value = n, O.onChange?.(n), m(n, L.value) && O.onComplete?.(n), t != null && o(() => {
-			j.value[t]?.focus(), j.value[t]?.select();
+		q.value || (J.value = n), D.value = n, O.onChange?.(n), m(n, U.value) && O.onComplete?.(n), t != null && o(() => {
+			k.value[t]?.focus(), k.value[t]?.select();
 		});
-	}, Y = a(() => x(g(ie, P.value?.tokens?.size), N.value.size ?? "md")), X = a(() => x(g(w, P.value?.tokens?.color), N.value.color ?? "primary")), ue = a(() => g(T, P.value?.tokens?.invalidated, N.value.customProps?.invalidated)), Z = a(() => z.value ? ue.value : void 0), de = a(() => x(g(re, P.value?.tokens?.rounded), N.value.rounded ?? "md")), fe = a(() => x(g(ae, P.value?.tokens?.variant), H.value)), pe = a(() => !N.value.hideErrorMessage), me = a(() => z.value && e(k, "errorMessage", N.value.errorMessage)), Q = a(() => {
-		let t = [];
-		return !z.value && e(k, "description", N.value.description) && t.push(`${W.value}-description`), z.value && !N.value.hideErrorMessage && e(k, "errorMessage", N.value.errorMessage) && t.push(`${W.value}-error`), t.length > 0 ? t.join(" ") : void 0;
-	}), he = a(() => n(I.value?.root, {
-		class: p(M.value.inheritedAttrs.class),
-		...C(M.value.inheritedAttrs, ["class", "id"])
-	}, p({
-		"group w-full relative": !0,
-		"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60": !0,
-		"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
-		[F.value.root ?? ""]: !0
-	}))), ge = a(() => n(I.value?.header, {}, p({
-		"flex w-full gap-x-2 mb-1.5": !0,
-		"justify-between items-end": e(k, "label", N.value.label),
-		"justify-end": !e(k, "label", N.value.label),
-		[F.value.header ?? ""]: !0
-	}))), $ = a(() => n(I.value?.corner, {}, p({
-		"text-gray-500 dark:text-gray-400": !0,
-		[Y.value?.text ?? ""]: !0,
-		[F.value.corner ?? ""]: !0
-	}))), _e = a(() => n(I.value?.group, {
-		role: "group",
-		id: W.value,
-		"aria-describedby": Q.value,
-		"aria-disabled": B.value || void 0,
-		"aria-invalid": z.value || void 0
-	}, p({
-		"flex flex-wrap items-center": !0,
-		[Y.value?.group ?? ""]: !0,
-		[F.value.group ?? ""]: !0
-	}))), ve = a(() => n(I.value?.start, {}, p({
-		"group/start wrapper-start-slot shrink-0 flex items-center [&>*]:min-h-0": !0,
-		[F.value.start ?? ""]: !0
-	}))), ye = a(() => n(I.value?.end, {}, p({
-		"group/end wrapper-end-slot shrink-0 flex items-center [&>*]:min-h-0": !0,
-		[F.value.end ?? ""]: !0
-	}))), be = a(() => n(I.value?.description, {}, p({
-		"mt-2 text-gray-500 dark:text-gray-400": !0,
-		[Y.value?.text ?? ""]: !0,
-		[F.value.description ?? ""]: !0
-	})));
+	}, Z = a(() => {
+		let e = g(C, M.value?.tokens?.size);
+		return v(e, j.value.size ?? "md");
+	}), Q = a(() => {
+		let e = g(ae, M.value?.tokens?.color);
+		return v(e, 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(() => {
+		let e = g(S, M.value?.tokens?.rounded);
+		return v(e, j.value.rounded ?? "md");
+	}), fe = a(() => {
+		let e = g(w, M.value?.tokens?.variant);
+		return v(e, G.value);
+	});
 	return {
-		slots: k,
-		merged: N,
-		digits: q,
-		length: L,
-		pinBind: (e) => n(I.value?.pin, {}, p({
+		merged: j,
+		digits: Y,
+		length: U,
+		pinBind: (t) => e(P.value?.pin, {}, p({
 			"relative flex shrink-0 items-center justify-center overflow-hidden": !0,
-			[Y.value?.pin ?? ""]: !0,
+			[Z.value?.pin ?? ""]: !0,
 			[fe.value?.pin ?? ""]: !0,
-			[de.value?.pin ?? ""]: !U.value,
-			[X.value?.pin ?? ""]: !z.value && !U.value,
-			[X.value?.underlined ?? ""]: !z.value && U.value,
-			[Z.value?.pin ?? ""]: z.value && !U.value,
-			[Z.value?.pinUnderlined ?? ""]: z.value && U.value,
-			[F.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
 		})),
-		rootBind: he,
-		errorBind: a(() => n(I.value?.errorMessage, {}, p({
-			"mt-2": !0,
-			"min-h-[1lh]": pe.value,
-			[Z.value?.errorMessage ?? ""]: !0,
-			[Y.value?.text ?? ""]: !0,
-			[F.value.errorMessage ?? ""]: !0
+		pinsBind: a(() => e({}, {}, p({
+			"flex flex-wrap items-center": !0,
+			[L.sizeClasses.value?.group ?? ""]: !0
 		}))),
-		groupBind: _e,
-		inputBind: (e) => {
-			let t = R.value === "numeric" ? "numeric" : "text";
-			return n({
-				...I.value?.input,
-				inputmode: t,
-				maxlength: L.value,
-				disabled: B.value,
-				readOnly: V.value,
-				value: q.value[e] ?? "",
-				id: `${W.value}-${e}`,
-				placeholder: N.value.placeholder,
-				"aria-describedby": Q.value,
-				type: N.value.mask ? "password" : "text",
-				"aria-invalid": z.value || void 0,
-				autocomplete: e === 0 ? "one-time-code" : "off",
-				"aria-label": `Digit ${e + 1} of ${L.value}`
+		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,
+				"text-dark-900 dark:text-dark-100 placeholder:text-dark-400": !0,
 				"outline-none ring-0 focus:outline-none focus:ring-0": !0,
 				"disabled:cursor-not-allowed": !0,
-				[Y.value?.input ?? ""]: !0,
-				[F.value.input ?? ""]: !0
+				[Z.value?.input ?? ""]: !0,
+				[N.value.input ?? ""]: !0
 			}));
 		},
 		setPinRef: (e, t) => {
-			j.value[e] = t;
+			k.value[e] = t;
 		},
-		controlId: W,
-		inputType: R,
-		headerBind: ge,
-		cornerBind: $,
-		isDisabled: B,
-		isReadonly: V,
-		endSlotBind: ye,
-		invalidated: z,
-		startSlotBind: ve,
-		mergedClasses: F,
+		inputType: W,
 		handlePinInput: (e, t) => {
-			let n = t.target.value, r = ne({
+			let n = t.target.value, r = u({
 				index: e,
 				input: n,
-				digits: q.value,
-				type: R.value
+				digits: Y.value,
+				type: W.value
 			});
-			J(r.digits, r.focusIndex);
+			X(r.digits, r.focusIndex);
 		},
 		handlePinFocus: (e) => {
-			j.value[e]?.select();
+			k.value[e]?.select();
 		},
 		handlePinPaste: (e, t) => {
-			let n = f({
+			let n = t.clipboardData?.getData("text") ?? "", r = f({
 				index: e,
-				pasted: t.clipboardData?.getData("text") ?? "",
-				digits: q.value,
-				type: R.value
+				pasted: n,
+				digits: Y.value,
+				type: W.value
 			});
-			n.focusIndex == null && n.digits.every((e, t) => e === q.value[t]) || (t.preventDefault(), J(n.digits, n.focusIndex));
+			r.focusIndex == null && r.digits.every((e, t) => e === Y.value[t]) || (t.preventDefault(), X(r.digits, r.focusIndex));
 		},
-		fieldLabelProps: a(() => t(I.value?.label, {
-			size: N.value.size,
-			error: z.value,
-			for: `${W.value}-0`,
-			required: N.value.required,
-			classes: {
-				required: F.value.required,
-				root: p({ [F.value.label ?? ""]: !0 })
-			}
-		})),
-		descriptionBind: be,
 		handlePinKeyDown: (e, t) => {
 			let n = d({
 				index: e,
 				key: t.key,
-				digits: q.value
+				digits: Y.value
 			});
-			n && (t.preventDefault(), J(n.digits, n.focusIndex));
-		},
-		showErrorMessageContent: me
+			n && (t.preventDefault(), X(n.digits, n.focusIndex));
+		}
 	};
 }
 //#endregion
-export { E as useOtpField };
+export { T as otpFieldBridgeKeys, E as useOtpField };