@bridge-ui/vue 0.0.6 → 0.0.7

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

@@ -0,0 +1,212 @@
+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";
+//#region src/Components/OtpField/composables/useOtpField.ts
+var oe = [
+	"mask",
+	"size",
+	"type",
+	"color",
+	"error",
+	"label",
+	"corner",
+	"length",
+	"classes",
+	"rounded",
+	"variant",
+	"disabled",
+	"readonly",
+	"required",
+	"autoFocus",
+	"controlId",
+	"customProps",
+	"description",
+	"placeholder",
+	"defaultValue",
+	"errorMessage",
+	"hideErrorMessage"
+];
+function E(E, D, O = {}, se = {
+	length: 6,
+	size: "md",
+	rounded: "md",
+	type: "numeric",
+	color: "primary",
+	variant: "outline"
+}) {
+	let ce = u(), k = te(), A = ee(), j = c([]), M = a(() => y({
+		bridgeKeys: oe,
+		props: {
+			...ce,
+			...l(E)
+		}
+	})), { merged: N, entry: P } = r({
+		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));
+	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();
+	});
+	let J = (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();
+		});
+	}, 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
+	})));
+	return {
+		slots: k,
+		merged: N,
+		digits: q,
+		length: L,
+		pinBind: (e) => n(I.value?.pin, {}, p({
+			"relative flex shrink-0 items-center justify-center overflow-hidden": !0,
+			[Y.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
+		})),
+		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
+		}))),
+		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}`
+			}, {}, 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,
+				[Y.value?.input ?? ""]: !0,
+				[F.value.input ?? ""]: !0
+			}));
+		},
+		setPinRef: (e, t) => {
+			j.value[e] = t;
+		},
+		controlId: W,
+		inputType: R,
+		headerBind: ge,
+		cornerBind: $,
+		isDisabled: B,
+		isReadonly: V,
+		endSlotBind: ye,
+		invalidated: z,
+		startSlotBind: ve,
+		mergedClasses: F,
+		handlePinInput: (e, t) => {
+			let n = t.target.value, r = ne({
+				index: e,
+				input: n,
+				digits: q.value,
+				type: R.value
+			});
+			J(r.digits, r.focusIndex);
+		},
+		handlePinFocus: (e) => {
+			j.value[e]?.select();
+		},
+		handlePinPaste: (e, t) => {
+			let n = f({
+				index: e,
+				pasted: t.clipboardData?.getData("text") ?? "",
+				digits: q.value,
+				type: R.value
+			});
+			n.focusIndex == null && n.digits.every((e, t) => e === q.value[t]) || (t.preventDefault(), J(n.digits, n.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
+			});
+			n && (t.preventDefault(), J(n.digits, n.focusIndex));
+		},
+		showErrorMessageContent: me
+	};
+}
+//#endregion
+export { E 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,290 @@
+import { HTMLAttributes, InputHTMLAttributes, Slot } from 'vue';
+import { MergeHtmlProps, MergeProps, OtpFieldColor, OtpFieldInvalidated, OtpFieldRounded, OtpFieldSize, OtpFieldVariant, OtpInputType } from '@bridge-ui/core';
+import { LabelProps } from '../Label/label.types';
+export interface OtpFieldColorOverrides {}
+export interface OtpFieldRoundedOverrides {}
+export interface OtpFieldSizeOverrides {}
+export interface OtpFieldVariantOverrides {}
+export interface OtpFieldClasses {
+    /**
+     * Classes merged onto the corner label in the header row.
+     */
+    corner?: string;
+    /**
+     * Classes merged onto the helper text below the pins.
+     */
+    description?: string;
+    /**
+     * Classes merged onto the inline-end adornment slot wrapper.
+     */
+    end?: string;
+    /**
+     * Classes merged onto the error message below the pins.
+     */
+    errorMessage?: string;
+    /**
+     * Classes merged onto the pin group wrapper.
+     */
+    group?: string;
+    /**
+     * Classes merged onto the label + corner header row.
+     */
+    header?: string;
+    /**
+     * Classes merged onto each pin `<input>`.
+     */
+    input?: string;
+    /**
+     * Classes merged onto the primary label.
+     */
+    label?: string;
+    /**
+     * Classes merged onto each pin cell wrapper.
+     */
+    pin?: string;
+    /**
+     * Classes merged onto the required asterisk.
+     */
+    required?: string;
+    /**
+     * Classes merged onto the root wrapper.
+     */
+    root?: string;
+    /**
+     * Classes merged onto the inline-start adornment slot wrapper.
+     */
+    start?: string;
+}
+export interface OtpFieldCustomProps {
+    /**
+     * Props forwarded to the corner label element.
+     */
+    corner?: HTMLAttributes;
+    /**
+     * Props forwarded to the helper text below the pins.
+     */
+    description?: HTMLAttributes;
+    /**
+     * Props forwarded to the inline-end adornment slot wrapper.
+     */
+    end?: HTMLAttributes;
+    /**
+     * Props forwarded to the error message element.
+     */
+    errorMessage?: HTMLAttributes;
+    /**
+     * Props forwarded to the pin group wrapper.
+     */
+    group?: HTMLAttributes;
+    /**
+     * Props forwarded to the label + corner header row.
+     */
+    header?: HTMLAttributes;
+    /**
+     * Props forwarded to each pin `<input>`.
+     */
+    input?: Partial<InputHTMLAttributes>;
+    /**
+     * Error-state pin chrome colors. Label colors come from `Label` when `error`
+     * is set.
+     *
+     * @default undefined
+     */
+    invalidated?: Partial<OtpFieldInvalidated>;
+    /**
+     * Props forwarded to the primary `Label` (content stays owned by `OtpField`).
+     *
+     * @default undefined
+     */
+    label?: Partial<Omit<LabelProps, "children">>;
+    /**
+     * Props forwarded to each pin cell wrapper.
+     */
+    pin?: HTMLAttributes;
+    /**
+     * Props forwarded to the root wrapper.
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the inline-start adornment slot wrapper.
+     */
+    start?: 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 {
+    /**
+     * 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>;
+    /**
+     * Associates labels and helper text with the pin group. When omitted, an id
+     * is generated automatically.
+     *
+     * @default undefined
+     */
+    controlId?: string;
+    /**
+     * Secondary label text at the inline end of the header row.
+     *
+     * @default undefined
+     */
+    corner?: string;
+    /**
+     * 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;
+    /**
+     * Helper text below the pins (hidden when the field is invalid).
+     *
+     * @default undefined
+     */
+    description?: string;
+    /**
+     * Whether all pins are disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * When `true`, applies invalid styling on the label and pins.
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Error message below the pins. Shown only when set (or via `errorMessage` slot).
+     *
+     * @default undefined
+     */
+    errorMessage?: string;
+    /**
+     * When `true`, does not reserve space below the pins for error messages.
+     *
+     * @default false
+     */
+    hideErrorMessage?: boolean;
+    /**
+     * The primary label text above the pins.
+     *
+     * @default undefined
+     */
+    label?: 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;
+    /**
+     * Whether all pins are read-only.
+     *
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * Shows a red asterisk on the label.
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Border radius of each pin cell.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<OtpFieldRounded, OtpFieldRoundedOverrides>;
+    /**
+     * Pin size and label typography scale.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<OtpFieldSize, OtpFieldSizeOverrides>;
+    /**
+     * 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 {
+    /**
+     * Secondary header text at the inline end.
+     */
+    corner?: Slot;
+    /**
+     * Helper text below the pins.
+     */
+    description?: Slot;
+    /**
+     * Inline-end slot beside the pin group (e.g. a button or timer).
+     */
+    end?: Slot;
+    /**
+     * Error message below the pins.
+     */
+    errorMessage?: Slot;
+    /**
+     * Primary label content.
+     */
+    label?: Slot;
+    /**
+     * Inline-start slot beside the pin group (e.g. an icon or button).
+     */
+    start?: Slot;
+}
+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 };

package/dist/Components/PasswordField/composables/usePasswordField.d.ts

@@ -10,13 +10,13 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
         slots: Readonly<{
             [name: string]: import('vue').Slot<any> | undefined;
         }>;
-        merged: import('vue').ComputedRef<Omit<import('../../FormField').FormFieldOwnProps, "color" | "size" | "rounded" | "variant" | "errorIcon" | "withErrorIcon"> & {
+        merged: import('vue').ComputedRef<Omit<import('../../FormField').FormFieldOwnProps, "color" | "size" | "rounded" | "variant" | "errorIcon" | "showErrorIcon"> & {
             color: NonNullable<keyof import('@bridge-ui/core').FormFieldColor | undefined>;
             size: NonNullable<keyof import('@bridge-ui/core').FormFieldSize | undefined>;
             rounded: NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
             variant: NonNullable<keyof import('@bridge-ui/core').FormFieldVariant | undefined>;
             errorIcon: NonNullable<import('../../..').IconSource | undefined>;
-            withErrorIcon: NonNullable<boolean | undefined>;
+            showErrorIcon: NonNullable<boolean | undefined>;
         }>;
         control: import('vue').ComputedRef<string>;
         endBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -433,7 +433,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>>;
+        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -681,7 +681,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "readonly" | "withoutErrorMessage" | "errorIcon" | "withErrorIcon" | "corner">>>, {
+    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>, {
         type: string;
     }>>;
     isVisible: import('vue').ComputedRef<boolean>;

package/dist/Components/PasswordField/composables/usePasswordField.js

@@ -15,7 +15,7 @@ function l(l, u = {}) {
 		return {
 			...d,
 			...r,
-			withErrorIcon: !1,
+			showErrorIcon: !1,
 			classes: v.value
 		};
 	}, {
@@ -23,7 +23,7 @@ function l(l, u = {}) {
 		rounded: "md",
 		color: "primary",
 		variant: "outline",
-		withErrorIcon: !1
+		showErrorIcon: !1
 	}, { reservedSlots: () => ["end"] });
 	return {
 		formField: y,