@bridge-ui/vue 0.0.11 → 0.1.1

package/dist/Components/Label/composables/useLabel.js

@@ -1,47 +1,47 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { computed as r, useAttrs as i } from "vue";
 import { get as a } from "es-toolkit/compat";
-import { labelInvalidatedProps as o, labelSizeProps as s } from "@bridge-ui/core/Tokens";
-import { cn as c, mergeBridgeUILayeredClasses as l, splitComponentProps as u } from "@bridge-ui/core/Utils";
+import { labelSizeProps as o } from "@bridge-ui/core/Tokens";
+import { cn as s, mergeBridgeUILayeredClasses as c, splitComponentProps as l } from "@bridge-ui/core/Utils";
 //#region src/Components/Label/composables/useLabel.ts
-var d = [
+var u = [
 	"size",
 	"error",
 	"classes",
 	"required"
 ];
-function f(f, p) {
-	let m = i(), h = r(() => u({
-		bridgeKeys: d,
+function d(d, f) {
+	let p = i(), m = r(() => l({
+		bridgeKeys: u,
 		props: {
-			...m,
-			...f
+			...p,
+			...d
 		}
-	})), { merged: g, entry: _ } = t({
-		libDefaults: p,
+	})), { merged: h, entry: g } = t({
+		libDefaults: f,
 		componentName: "Label",
-		props: () => h.value.componentProps
-	}), v = n({
-		entry: _,
-		props: () => h.value.componentProps
-	}), y = r(() => {
-		let e = l(s, _.value?.tokens?.size);
-		return a(e, g.value.size);
-	}), b = r(() => l(o, _.value?.tokens?.invalidated)), x = r(() => e({}, {}, c({
-		[b.value.required ?? ""]: !0,
-		[v.value.required ?? ""]: !0
+		props: () => m.value.componentProps
+	}), _ = n({
+		entry: g,
+		props: () => m.value.componentProps
+	}), v = r(() => {
+		let e = c(o, g.value?.tokens?.size);
+		return a(e, h.value.size);
+	}), y = r(() => e({}, {}, s({
+		"text-error-500 dark:text-error-500 select-none": !0,
+		[_.value.required ?? ""]: !0
 	})));
 	return {
-		merged: g,
-		rootBind: r(() => e({}, h.value.inheritedAttrs, c({
+		merged: h,
+		rootBind: r(() => e({}, m.value.inheritedAttrs, s({
 			"inline-flex items-center gap-x-0.5 font-medium leading-none": !0,
-			"text-dark-700 dark:text-dark-300": !g.value.error,
-			[b.value.label ?? ""]: g.value.error,
-			[y.value ?? ""]: !0,
-			[v.value.root ?? ""]: !0
+			"text-dark-700 dark:text-dark-300": !h.value.error,
+			"text-error-600 dark:text-error-400": h.value.error,
+			[v.value ?? ""]: !0,
+			[_.value.root ?? ""]: !0
 		}))),
-		requiredBind: x
+		requiredBind: y
 	};
 }
 //#endregion
-export { f as useLabel };
+export { d as useLabel };

package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -20,7 +20,6 @@ var A = { key: 1 }, j = /*@__PURE__*/ h({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
-		componentName: {},
 		customProps: {},
 		disableAutoFocus: {
 			type: Boolean,
@@ -29,12 +28,12 @@ var A = { key: 1 }, j = /*@__PURE__*/ h({
 		disableMaxHeight: { type: Boolean },
 		emptyMessage: {},
 		entries: {},
+		error: { type: Boolean },
 		hideEmptyMessage: {
 			type: Boolean,
 			default: !1
 		},
 		highlightedIndex: { default: -1 },
-		invalidated: { type: Boolean },
 		isSelected: {},
 		labelledBy: {},
 		listboxId: {},
@@ -83,7 +82,7 @@ var A = { key: 1 }, j = /*@__PURE__*/ h({
 		let P = h, F = e(), I = s(() => P.emptyMessage ?? F("No options")), L = s(() => P.loadingMessage ?? F("Loading...")), { merged: R, checkClass: z, scrollBind: B, footerBind: V, showFooter: H, applyLabel: fe, cancelLabel: pe, messageBind: U, surfaceBind: me, sizeClasses: he, mergedClasses: W, applyButtonProps: ge, optionHoverClass: _e, cancelButtonProps: ve, optionSelectedClass: ye, optionHighlightedClass: be } = ee(P, {
 			size: "md",
 			color: "primary"
-		}, { componentName: P.componentName }), xe = s(() => P.options ?? []), G = s(() => P.entries ? P.entries : le(xe.value)), K = s(() => ue(G.value)), q = s(() => t(j, "default")), J = s(() => !P.loading && !q.value && K.value.length === 0 && P.hideEmptyMessage !== !0), Se = s(() => k(z.value, W.value.check)), Y = C([]);
+		}), xe = s(() => P.options ?? []), G = s(() => P.entries ? P.entries : le(xe.value)), K = s(() => ue(G.value)), q = s(() => t(j, "default")), J = s(() => !P.loading && !q.value && K.value.length === 0 && P.hideEmptyMessage !== !0), Se = s(() => k(z.value, W.value.check)), Y = C([]);
 		function X(e) {
 			return P.isSelected?.(e) ?? !1;
 		}

package/dist/Components/Listbox/composables/useListbox.d.ts

@@ -1,18 +1,9 @@
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { ListboxClasses, ListboxOwnProps } from '../listbox.types';
-export declare const listboxBridgeKeys: readonly ["size", "color", "classes", "maxHeight", "showFooter", "customProps", "invalidated", "disableMaxHeight"];
+export declare const listboxBridgeKeys: readonly ["size", "color", "error", "classes", "maxHeight", "showFooter", "customProps", "disableMaxHeight"];
 type ListboxLibDefaults = LibDefaultsShape<ListboxOwnProps, "size" | "color">;
 type ListboxMerged = MergeLibDefaults<ListboxOwnProps, ListboxLibDefaults>;
-/**
- * Options for {@link useListbox}.
- */
-export type ListboxOptions = {
-    /**
-     * Public registry key that owns nested `tokens.listbox` defaults.
-     */
-    componentName?: "Select" | "Autocomplete";
-};
-export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxLibDefaults, options?: ListboxOptions): {
+export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxLibDefaults): {
     merged: import('vue').ComputedRef<ListboxMerged>;
     checkClass: import('vue').ComputedRef<string>;
     scrollBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -25,9 +16,9 @@ export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxL
     sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core/Tokens').ListboxSizeOverlayItem | undefined>;
     mergedClasses: import('vue').ComputedRef<Partial<ListboxClasses>>;
     applyButtonProps: import('vue').ComputedRef<Partial<import('@bridge-ui/core/Utils').MergeHtmlProps<Omit<import('../../Button').ButtonOwnProps, "as">, import('vue').ButtonHTMLAttributes>> | undefined>;
-    optionHoverClass: import('vue').ComputedRef<string | undefined>;
+    optionHoverClass: import('vue').ComputedRef<any>;
     cancelButtonProps: import('vue').ComputedRef<Partial<import('@bridge-ui/core/Utils').MergeHtmlProps<Omit<import('../../Button').ButtonOwnProps, "as">, import('vue').ButtonHTMLAttributes>> | undefined>;
-    optionSelectedClass: import('vue').ComputedRef<string | undefined>;
-    optionHighlightedClass: import('vue').ComputedRef<string | undefined>;
+    optionSelectedClass: import('vue').ComputedRef<any>;
+    optionHighlightedClass: import('vue').ComputedRef<any>;
 };
 export {};

package/dist/Components/Listbox/composables/useListbox.js

@@ -4,87 +4,90 @@ import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistr
 import { computed as o, useAttrs as s } from "vue";
 import { get as c } from "es-toolkit/compat";
 import { isFieldOverlayDialog as l, resolveFieldOverlay as u } from "@bridge-ui/core/Domain";
-import { listboxColorProps as d, listboxInvalidatedProps as f, listboxRoundedProps as p, listboxSizeProps as m } from "@bridge-ui/core/Tokens";
-import { cn as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
+import { listboxColorProps as d, listboxRoundedProps as f, listboxSizeProps as p } from "@bridge-ui/core/Tokens";
+import { cn as m, getColorToken as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
 //#region src/Components/Listbox/composables/useListbox.ts
 var v = [
 	"size",
 	"color",
+	"error",
 	"classes",
 	"maxHeight",
 	"showFooter",
 	"customProps",
-	"invalidated",
 	"disableMaxHeight"
 ];
-function y(y, b, x = {}) {
-	let S = s(), C = t(), w = e(), T = o(() => _({
+function y(y, b) {
+	let x = s(), S = t(), C = e(), w = o(() => _({
 		props: {
-			...S,
+			...x,
 			...y
 		},
 		bridgeKeys: v
-	})), { merged: E, entry: D } = r({
+	})), { merged: T, entry: E } = r({
 		libDefaults: b,
-		componentName: x.componentName,
-		props: () => T.value.componentProps
-	}), O = i({
-		entry: D,
-		props: () => T.value.componentProps
-	}), k = o(() => E.value.customProps), A = o(() => u(y.overlay, C.mobile)), j = o(() => l(A.value)), M = o(() => A.value === "drawer"), N = a({
-		overlay: A,
-		componentName: x.componentName,
-		showFooter: () => E.value.showFooter
-	}), P = o(() => c(D.value, ["tokens", "listbox"])), F = o(() => {
-		let e = g(d, P.value?.color);
-		return c(e, E.value.color ?? "primary");
-	}), I = o(() => {
-		let e = g(p, P.value?.rounded);
+		componentName: "Listbox",
+		props: () => w.value.componentProps
+	}), D = i({
+		entry: E,
+		props: () => w.value.componentProps
+	}), O = o(() => T.value.customProps), k = o(() => u(y.overlay, S.mobile)), A = o(() => l(k.value)), j = o(() => k.value === "drawer"), M = a({
+		overlay: k,
+		componentName: "Listbox",
+		showFooter: () => T.value.showFooter
+	}), N = o(() => {
+		let e = g(d, E.value?.tokens?.color);
+		return h({
+			tokens: e,
+			color: T.value.color,
+			invalid: T.value.error
+		});
+	}), P = o(() => {
+		let e = g(f, E.value?.tokens?.rounded);
 		return c(e, y.rounded ?? "md");
-	}), L = o(() => g(f, P.value?.invalidated)), R = o(() => E.value.invalidated ? L.value : F.value), z = o(() => {
-		let e = g(m, P.value?.size), t = c(e, E.value.size ?? "md"), n = j.value ? "panel" : "menu";
+	}), F = o(() => {
+		let e = g(p, E.value?.tokens?.size), t = c(e, T.value.size ?? "md"), n = A.value ? "panel" : "menu";
 		return c(t, n);
-	}), B = o(() => R.value?.selected), V = o(() => R.value?.highlighted), H = o(() => R.value?.hover), U = o(() => h(z.value?.check, R.value?.check)), W = o(() => {
-		let e = E.value.maxHeight ?? (j.value ? "max-h-[min(60dvh,28rem)]" : "max-h-60"), t = E.value.disableMaxHeight === !0;
-		return n(E.value.customProps?.scroll, {}, h({
+	}), I = o(() => N.value?.selected), L = o(() => N.value?.highlighted), R = o(() => N.value?.hover), z = o(() => m(F.value?.check, N.value?.check)), B = o(() => {
+		let e = T.value.maxHeight ?? (A.value ? "max-h-[min(60dvh,28rem)]" : "max-h-60"), t = T.value.disableMaxHeight === !0;
+		return n(T.value.customProps?.scroll, {}, m({
 			"min-h-0 overflow-y-auto overscroll-contain": !t,
 			[e]: !t,
-			[O.value.scroll ?? ""]: !0
+			[D.value.scroll ?? ""]: !0
 		}));
-	}), G = o(() => n({}, {}, h({
+	}), V = o(() => n({}, {}, m({
 		"text-dark-500": !0,
-		[z.value?.message ?? ""]: !0
-	}))), K = o(() => {
-		if (!j.value) return;
-		let e = I.value;
-		if (e) return h({
+		[F.value?.message ?? ""]: !0
+	}))), H = o(() => {
+		let e = P.value;
+		if (e) return m({
 			[e]: !0,
-			"rounded-b-none": M.value
+			"rounded-b-none": j.value
 		});
-	}), q = o(() => h({
-		"flex w-full flex-col overflow-hidden bg-white text-dark-900 shadow-lg outline-hidden ring-1 ring-black/5 dark:bg-dark-800 dark:text-dark-100 dark:ring-white/10": j.value,
-		[String(K.value ?? "")]: !!K.value
+	}), U = o(() => m({
+		"flex w-full flex-col overflow-hidden bg-white text-dark-900 shadow-lg outline-hidden ring-1 ring-black/5 dark:bg-dark-800 dark:text-dark-100 dark:ring-white/10": !0,
+		[String(H.value ?? "")]: !!H.value
 	}));
 	return {
-		merged: E,
-		checkClass: U,
-		scrollBind: W,
-		footerBind: o(() => n(k.value?.footer, {}, h({
+		merged: T,
+		checkClass: z,
+		scrollBind: B,
+		footerBind: o(() => n(O.value?.footer, {}, m({
 			"flex items-center justify-end gap-2 border-t border-dark-100 bg-dark-50 px-3 py-2 dark:border-dark-800 dark:bg-dark-950/40": !0,
-			[O.value.footer ?? ""]: !0
+			[D.value.footer ?? ""]: !0
 		}))),
-		showFooter: N,
-		applyLabel: o(() => w("Apply")),
-		cancelLabel: o(() => w("Cancel")),
-		messageBind: G,
-		surfaceBind: q,
-		sizeClasses: z,
-		mergedClasses: O,
-		applyButtonProps: o(() => k.value?.applyButton),
-		optionHoverClass: H,
-		cancelButtonProps: o(() => k.value?.cancelButton),
-		optionSelectedClass: B,
-		optionHighlightedClass: V
+		showFooter: M,
+		applyLabel: o(() => C("Apply")),
+		cancelLabel: o(() => C("Cancel")),
+		messageBind: V,
+		surfaceBind: U,
+		sizeClasses: F,
+		mergedClasses: D,
+		applyButtonProps: o(() => O.value?.applyButton),
+		optionHoverClass: R,
+		cancelButtonProps: o(() => O.value?.cancelButton),
+		optionSelectedClass: I,
+		optionHighlightedClass: L
 	};
 }
 //#endregion

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

@@ -1,5 +1,4 @@
 export { useListbox } from './composables/useListbox';
-export type { ListboxOptions } from './composables/useListbox';
 export { findFirstEnabledOptionIndex, findLastEnabledOptionIndex, getListboxActiveDescendantId, getListboxOptionId, moveListboxHighlight, useListboxNavigation, } from './composables/useListboxNavigation';
 export type { ListboxClasses, ListboxColorOverrides, ListboxCustomProps, ListboxEmits, ListboxEntry, ListboxOption, ListboxOwnProps, ListboxProps, ListboxSlots, ListboxValue, } from './listbox.types';
 export { default as Listbox } from './Listbox.vue';

package/dist/Components/Listbox/listbox.types.d.ts

@@ -157,12 +157,6 @@ export interface ListboxOwnProps {
      * @default "primary"
      */
     color?: MergeProps<ListboxColor, ListboxColorOverrides>;
-    /**
-     * Public parent registry key for nested `tokens.listbox`.
-     *
-     * @internal
-     */
-    componentName?: "Select" | "Autocomplete";
     /**
      * Extra props for internal parts (`list`, `listItem`, `listSection`, `menu`,
      * `modal`, `drawer`, `progress`, `scroll`, `footer`, `applyButton`,
@@ -195,6 +189,12 @@ export interface ListboxOwnProps {
      * `options` map for rendering section headers.
      */
     entries?: ListboxEntry[];
+    /**
+     * When `true`, applies the error color palette to options.
+     *
+     * @default false
+     */
+    error?: boolean;
     /**
      * Hides the empty-state message.
      *
@@ -207,12 +207,6 @@ export interface ListboxOwnProps {
      * @default -1
      */
     highlightedIndex?: number;
-    /**
-     * When `true`, applies invalidated option colors.
-     *
-     * @default false
-     */
-    invalidated?: boolean;
     /**
      * Whether a value is selected (shows checkmark when `showCheckmark` is true).
      */

package/dist/Components/Menu/Menu.vue_vue_type_script_setup_true_lang.js

@@ -67,13 +67,11 @@ var v = /*@__PURE__*/ l({
 			onClose: () => y("close"),
 			onShowChange: (e) => b.onShowChange?.(e)
 		}), k = i(() => S.value.teleportTo === !1), A = i(() => S.value.teleportTo === !1 ? "body" : S.value.teleportTo);
-		return (t, i) => (p(), s(n, null, [h(e)(h(v), "trigger") ? (p(), s("div", f(d({ key: 0 }, h(w))), [c("div", d({ ref: h(D) }, h(T)), [m(t.$slots, "trigger")], 16)], 16)) : o("", !0), (p(), a(r, {
+		return (t, i) => (p(), s(n, null, [h(e)(h(v), "trigger") ? (p(), s("div", f(d({ key: 0 }, h(w))), [c("div", d({ ref: h(D) }, h(T)), [m(t.$slots, "trigger")], 16)], 16)) : o("", !0), h(C) ? (p(), a(r, {
+			key: 1,
 			to: A.value,
 			disabled: k.value
-		}, [h(C) ? (p(), s("div", d({
-			key: 0,
-			ref: h(O)
-		}, h(E)), [m(t.$slots, "default")], 16)) : o("", !0)], 8, ["to", "disabled"]))], 64));
+		}, [c("div", d({ ref: h(O) }, h(E)), [m(t.$slots, "default")], 16)], 8, ["to", "disabled"])) : o("", !0)], 64));
 	}
 });
 //#endregion

package/dist/Components/Modal/Modal.vue_vue_type_script_setup_true_lang.js

@@ -80,13 +80,14 @@ var g = /*@__PURE__*/ s({
 		});
 		l({ stackId: n(() => v.stackId ?? D.value) });
 		let O = n(() => b.value.teleportTo === !1), k = n(() => b.value.teleportTo === !1 ? "body" : b.value.teleportTo), A = n(() => v.hideBackdrop !== !0 && b.value.hideBackdrop !== !0);
-		return (e, n) => (f(), r(t, {
+		return (e, n) => m(x) ? (f(), r(t, {
+			key: 0,
 			to: k.value,
 			disabled: O.value
-		}, [m(x) ? (f(), a("div", d(u({ key: 0 }, m(S))), [A.value ? (f(), a("div", u({
+		}, [o("div", d(c(m(S))), [A.value ? (f(), a("div", u({
 			key: 0,
 			"aria-hidden": "true"
-		}, m(w)), null, 16)) : i("", !0), o("div", d(c(m(T))), [o("div", u({ ref: m(E) }, m(C)), [p(e.$slots, "default")], 16)], 16)], 16)) : i("", !0)], 8, ["to", "disabled"]));
+		}, m(w)), null, 16)) : i("", !0), o("div", d(c(m(T))), [o("div", u({ ref: m(E) }, m(C)), [p(e.$slots, "default")], 16)], 16)], 16)], 8, ["to", "disabled"])) : i("", !0);
 	}
 });
 //#endregion

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

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