@bridge-ui/vue 0.0.7 → 0.0.8

package/dist/Components/FormControl/composables/useFormControl.js

@@ -21,83 +21,87 @@ var _ = [
 	"errorMessage",
 	"hideErrorMessage"
 ];
-function v(v, y) {
-	let b = c(), x = l(), S = s(), C = a(() => f({
+function v(v, y, b = {}) {
+	let x = c(), S = l(), C = s(), w = a(() => f({
 		bridgeKeys: _,
 		props: {
-			...S,
+			...C,
 			...o(v)
 		}
-	})), { merged: w, entry: T } = r({
+	})), { merged: T, entry: E } = r({
 		libDefaults: y,
-		componentName: "FormControl",
-		props: () => C.value.componentProps
-	}), E = a(() => w.value.customProps), D = i({
-		entry: T,
-		props: () => C.value.componentProps
-	}), O = a(() => w.value.error === !0), k = a(() => !!w.value.disabled), A = a(() => !!w.value.readonly), j = a(() => {
-		let e = C.value.inheritedAttrs.id;
-		return w.value.controlId ?? e ?? b;
-	}), M = a(() => !w.value.hideErrorMessage), N = a(() => O.value && e(x, "errorMessage", w.value.errorMessage)), P = a(() => {
+		componentName: b.componentName,
+		props: () => w.value.componentProps
+	}), D = a(() => T.value.customProps), O = i({
+		entry: E,
+		props: () => w.value.componentProps
+	}), k = a(() => T.value.error === !0), A = a(() => !!T.value.disabled), j = a(() => !!T.value.readonly), M = a(() => {
+		let e = w.value.inheritedAttrs.id;
+		return T.value.controlId ?? e ?? x;
+	}), N = a(() => !T.value.hideErrorMessage), P = a(() => k.value && e(S, "errorMessage", T.value.errorMessage)), F = a(() => {
 		let t = [];
-		return !O.value && e(x, "description", w.value.description) && t.push(`${j.value}-description`), O.value && M.value && e(x, "errorMessage", w.value.errorMessage) && t.push(`${j.value}-error`), t.length > 0 ? t.join(" ") : void 0;
-	}), F = a(() => p(h, w.value.size ?? "md")), I = a(() => d(g, T.value?.tokens?.invalidated, w.value.customProps?.invalidated)), L = a(() => n(E.value?.root, m(C.value.inheritedAttrs, ["class"]), u({
+		return !k.value && e(S, "description", T.value.description) && t.push(`${M.value}-description`), k.value && N.value && e(S, "errorMessage", T.value.errorMessage) && t.push(`${M.value}-error`), t.length > 0 ? t.join(" ") : void 0;
+	}), I = a(() => p(h, T.value.size ?? "md")), L = a(() => d(g, p(E.value, [
+		"tokens",
+		"formControl",
+		"invalidated"
+	]), T.value.customProps?.invalidated)), R = a(() => n(D.value?.root, m(w.value.inheritedAttrs, ["class"]), u({
 		"group/form-control relative w-full": !0,
 		"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60 aria-disabled:cursor-not-allowed": !0,
 		"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
-		[D.value.root ?? ""]: !0,
-		[S.class]: !!S.class
-	}))), R = a(() => n(E.value?.row, {}, u({
+		[O.value.root ?? ""]: !0,
+		[C.class]: !!C.class
+	}))), z = a(() => n(D.value?.row, {}, u({
 		"flex flex-row items-center gap-x-2": !0,
-		[D.value.row ?? ""]: !0
-	}))), z = a(() => {
-		let e = (e) => t(E.value?.[e], {
-			for: j.value,
-			size: w.value.size,
-			error: O.value,
-			required: w.value.required,
+		[O.value.row ?? ""]: !0
+	}))), B = a(() => {
+		let e = (e) => t(D.value?.[e], {
+			for: M.value,
+			size: T.value.size,
+			error: k.value,
+			required: T.value.required,
 			classes: { root: u({
 				"cursor-pointer": !0,
-				[D.value[e] ?? ""]: !0
+				[O.value[e] ?? ""]: !0
 			}) }
 		});
 		return {
 			endLabel: e("endLabel"),
 			startLabel: e("startLabel")
 		};
-	}), B = a(() => n(E.value?.description, { id: `${j.value}-description` }, u({
+	}), V = a(() => n(D.value?.description, { id: `${M.value}-description` }, u({
 		"mt-2 text-gray-500 dark:text-gray-400": !0,
-		[F.value ?? ""]: !0,
-		[D.value.description ?? ""]: !0
-	}))), V = a(() => n(E.value?.errorMessage, { id: `${j.value}-error` }, u({
+		[I.value ?? ""]: !0,
+		[O.value.description ?? ""]: !0
+	}))), H = a(() => n(D.value?.errorMessage, { id: `${M.value}-error` }, u({
 		"mt-2": !0,
-		"min-h-[1lh]": M.value,
-		[I.value.errorMessage ?? ""]: !0,
-		[F.value ?? ""]: !0,
-		[D.value.errorMessage ?? ""]: !0
+		"min-h-[1lh]": N.value,
+		[L.value.errorMessage ?? ""]: !0,
+		[I.value ?? ""]: !0,
+		[O.value.errorMessage ?? ""]: !0
 	})));
 	return {
-		slots: x,
-		merged: w,
-		rowBind: R,
-		rootBind: L,
-		controlId: j,
-		isDisabled: k,
-		isReadonly: A,
+		slots: S,
+		merged: T,
+		rowBind: z,
+		rootBind: R,
+		controlId: M,
+		isDisabled: A,
+		isReadonly: j,
 		controlBind: a(() => ({
-			id: j.value,
-			disabled: k.value,
-			readonly: A.value,
-			"aria-describedby": P.value,
-			required: w.value.required || void 0,
-			"aria-invalid": O.value || void 0
+			id: M.value,
+			disabled: A.value,
+			readonly: j.value,
+			"aria-describedby": F.value,
+			required: T.value.required || void 0,
+			"aria-invalid": k.value || void 0
 		})),
-		invalidated: O,
-		fieldLabelProps: z,
-		descriptionBind: B,
-		errorMessageBind: V,
-		showErrorMessageContent: N,
-		reservesErrorMessageSpace: M
+		invalidated: k,
+		fieldLabelProps: B,
+		descriptionBind: V,
+		errorMessageBind: H,
+		showErrorMessageContent: P,
+		reservesErrorMessageSpace: N
 	};
 }
 //#endregion

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

@@ -1,4 +1,4 @@
 export { formControlBridgeKeys, useFormControl, } from './composables/useFormControl';
-export type { UseFormControlReturn } from './composables/useFormControl';
+export type { FormControlOptions, UseFormControlReturn, } from './composables/useFormControl';
 export type { FormControlClasses, FormControlCustomProps, FormControlOwnProps, FormControlProps, FormControlSizeOverrides, FormControlSlots, } from './formControl.types';
 export { default as FormControl } from './FormControl.vue';

package/dist/Components/FormField/composables/useFormField.d.ts

@@ -4,6 +4,10 @@ import { FormFieldOwnProps, FormFieldSlots } from '../formField.types';
 import { LabelProps } from '../../Label/label.types';
 export type FormFieldReservedSlotName = Exclude<keyof FormFieldSlots, "default">;
 export type FormFieldOptions = {
+    /**
+     * Public registry key that owns FormField chrome defaults/tokens.
+     */
+    componentName?: "Select" | "Textarea" | "TextField" | "NumberField" | "Autocomplete" | "PasswordField";
     /**
      * Native control rendered by the field composable (`<input>` vs `<textarea>`).
      *
@@ -443,7 +447,7 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "endIcon" | "startIcon" | "start" | "required" | "description" | "errorMessage" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>>;
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
     isNotched: import('vue').ComputedRef<boolean>;
     isStacked: import('vue').ComputedRef<boolean>;
     startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;

package/dist/Components/FormField/composables/useFormField.js

@@ -34,7 +34,7 @@ function x(x, S, C = {}) {
 		bridgeKeys: b
 	})), { merged: E, entry: D } = i({
 		libDefaults: S,
-		componentName: "FormField",
+		componentName: C.componentName,
 		props: () => T.value.componentProps
 	}), O = o(() => E.value.customProps), k = o(() => C.control?.() ?? "input"), A = a({
 		entry: D,

package/dist/Components/ListItem/ListItem.vue.d.ts

@@ -2,8 +2,8 @@ import { ListItemOwnProps, ListItemSlots } from './listItem.types';
 type __VLS_Slots = ListItemSlots;
 declare const __VLS_base: import('vue').DefineComponent<ListItemOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ListItemOwnProps> & Readonly<{}>, {
     role: "button" | "option" | "menuitem";
-    as: "li" | "div";
     disabled: boolean;
+    as: "li" | "div";
     divider: boolean;
     interactive: boolean;
     selected: boolean;

package/dist/Components/ListItem/composables/useListItem.d.ts

@@ -11,7 +11,7 @@ export declare function useListItem(props: ListItemOwnProps, libDefaults: ListIt
     rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         class: string;
         id: string | undefined;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "value" | "classes" | "customProps" | "primary" | "secondary" | "as" | "disabled" | "dense" | "divider" | "interactive" | "selected" | "selectedIcon">, never>>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<ListItemProps, "role" | "value" | "classes" | "customProps" | "primary" | "secondary" | "disabled" | "as" | "dense" | "divider" | "interactive" | "selected" | "selectedIcon">, never>>>;
     rowClass: import('vue').ComputedRef<string>;
     hasStart: import('vue').ComputedRef<boolean>;
     startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;

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

@@ -9,22 +9,22 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     select: (option: ListboxOption) => any;
     "update:modelValue": (value: boolean) => any;
-    "show-change": (show: boolean) => any;
     "registered-options-change": (options: ListboxOption[]) => any;
+    "show-change": (show: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((option: ListboxOption) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    "onShow-change"?: ((show: boolean) => any) | undefined;
     "onRegistered-options-change"?: ((options: ListboxOption[]) => any) | undefined;
+    "onShow-change"?: ((show: boolean) => any) | undefined;
 }>, {
     color: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListboxColor, import('./listbox.types').ListboxColorOverrides>;
     size: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ListboxSize, import('./listbox.types').ListboxSizeOverrides>;
-    loading: boolean;
     multiple: boolean;
     disableAutoFocus: boolean;
     placement: import('@floating-ui/utils').Placement;
     hideEmptyMessage: boolean;
     highlightedIndex: number;
+    loading: boolean;
     showCheckmark: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -18,6 +18,7 @@ var P = { key: 1 }, F = /* @__PURE__ */ g({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
+		componentName: {},
 		customProps: {},
 		disableAutoFocus: {
 			type: Boolean,
@@ -73,7 +74,7 @@ var P = { key: 1 }, F = /* @__PURE__ */ g({
 		let R = g, z = e(), B = l(() => R.emptyMessage ?? z("No options")), V = l(() => R.loadingMessage ?? z("Loading...")), { merged: H, checkClass: U, scrollBind: W, messageBind: G, sizeClasses: K, mergedClasses: q, optionSelectedClass: se, optionHighlightedClass: ce } = ee(R, {
 			size: "md",
 			color: "primary"
-		}), le = l(() => R.options ?? []), J = l(() => R.entries ? R.entries : oe(le.value)), Y = l(() => j(J.value)), X = l(() => t(F, "default")), Z = l(() => !R.loading && !X.value && Y.value.length === 0 && R.hideEmptyMessage !== !0), ue = l(() => ae(U.value, q.value.check)), Q = C([]);
+		}, { componentName: R.componentName }), le = l(() => R.options ?? []), J = l(() => R.entries ? R.entries : oe(le.value)), Y = l(() => j(J.value)), X = l(() => t(F, "default")), Z = l(() => !R.loading && !X.value && Y.value.length === 0 && R.hideEmptyMessage !== !0), ue = l(() => ae(U.value, q.value.check)), Q = C([]);
 		function $(e) {
 			return R.isSelected?.(e) ?? !1;
 		}

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

@@ -3,7 +3,16 @@ import { ListboxClasses, ListboxOwnProps } from '../listbox.types';
 export declare const listboxBridgeKeys: readonly ["size", "color", "classes", "maxHeight", "customProps", "invalidated", "disableMaxHeight"];
 type ListboxLibDefaults = LibDefaultsShape<ListboxOwnProps, "size" | "color">;
 type ListboxMerged = MergeLibDefaults<ListboxOwnProps, ListboxLibDefaults>;
-export declare function useListbox(props: ListboxOwnProps, libDefaults: 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): {
     merged: import('vue').ComputedRef<ListboxMerged>;
     checkClass: import('vue').ComputedRef<string>;
     scrollBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;

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

@@ -13,40 +13,40 @@ var f = [
 	"invalidated",
 	"disableMaxHeight"
 ];
-function p(p, m) {
-	let h = i(), g = r(() => s({
+function p(p, m, h = {}) {
+	let g = i(), _ = r(() => s({
 		props: {
-			...h,
+			...g,
 			...p
 		},
 		bridgeKeys: f
-	})), { merged: _, entry: v } = t({
+	})), { merged: v, entry: y } = t({
 		libDefaults: m,
-		componentName: "Listbox",
-		props: () => g.value.componentProps
-	}), y = n({
-		entry: v,
-		props: () => g.value.componentProps
-	}), b = r(() => c(o(l, v.value?.tokens?.color), _.value.color ?? "primary")), x = r(() => o(u, v.value?.tokens?.invalidated)), S = r(() => _.value.invalidated ? x.value : b.value), C = r(() => c(o(d, v.value?.tokens?.size), _.value.size ?? "md")), w = r(() => S.value?.selected), T = r(() => S.value?.highlighted);
+		componentName: h.componentName,
+		props: () => _.value.componentProps
+	}), b = n({
+		entry: y,
+		props: () => _.value.componentProps
+	}), x = r(() => c(y.value, ["tokens", "listbox"])), S = r(() => c(o(l, x.value?.color), v.value.color ?? "primary")), C = r(() => o(u, x.value?.invalidated)), w = r(() => v.value.invalidated ? C.value : S.value), T = r(() => c(o(d, x.value?.size), v.value.size ?? "md")), E = r(() => w.value?.selected), D = r(() => w.value?.highlighted);
 	return {
-		merged: _,
-		checkClass: r(() => a(C.value?.check, S.value?.check)),
+		merged: v,
+		checkClass: r(() => a(T.value?.check, w.value?.check)),
 		scrollBind: r(() => {
-			let t = _.value.maxHeight ?? "max-h-60", n = _.value.disableMaxHeight === !0;
-			return e(_.value.customProps?.scroll, {}, a({
+			let t = v.value.maxHeight ?? "max-h-60", n = v.value.disableMaxHeight === !0;
+			return e(v.value.customProps?.scroll, {}, a({
 				"overflow-y-auto overscroll-contain": !n,
 				[t]: !n,
-				[y.value.scroll ?? ""]: !0
+				[b.value.scroll ?? ""]: !0
 			}));
 		}),
 		messageBind: r(() => e({}, {}, a({
 			"text-gray-500": !0,
-			[C.value?.message ?? ""]: !0
+			[T.value?.message ?? ""]: !0
 		}))),
-		sizeClasses: C,
-		mergedClasses: y,
-		optionSelectedClass: w,
-		optionHighlightedClass: T
+		sizeClasses: T,
+		mergedClasses: b,
+		optionSelectedClass: E,
+		optionHighlightedClass: D
 	};
 }
 //#endregion

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

@@ -1,4 +1,5 @@
 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

@@ -101,6 +101,12 @@ 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`,
      * `progress`, `scroll`).

package/dist/Components/Menu/Menu.vue.d.ts

@@ -6,11 +6,11 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
     close: () => any;
+    "update:modelValue": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     offset: number;
     rounded: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuRounded, import('./menu.types').MenuRoundedOverrides>;

package/dist/Components/Modal/Modal.vue.d.ts

@@ -8,12 +8,12 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     stackId: import('vue').ComputedRef<string>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
     close: () => any;
+    "update:modelValue": (value: boolean) => any;
     "show-change": (show: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onShow-change"?: ((show: boolean) => any) | undefined;
 }>, {
     closeOnEscape: boolean;

package/dist/Components/Modal/composables/useModal.d.ts

@@ -34,7 +34,7 @@ export declare function useModal(props: ModalOwnProps, libDefaults: ModalLibDefa
         };
         "aria-hidden": boolean | undefined;
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<ModalProps, "size" | "classes" | "customProps" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "teleportTo" | "blur" | "scroll" | "align" | "autoFocus" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "hideBackdrop" | "stackId" | "transition">>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ModalProps, "size" | "classes" | "customProps" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "teleportTo" | "scroll" | "blur" | "align" | "autoFocus" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "hideBackdrop" | "stackId" | "transition">>>;
     panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         "data-modal-part": string;
         "data-state": "open" | "closed";

package/dist/Components/NumberField/NumberField.vue.d.ts

@@ -6,11 +6,11 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (...args: unknown[]) => any;
     change: (value: number) => any;
+    "update:modelValue": (...args: unknown[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
     onChange?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
 }>, {
     step: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/Components/NumberField/composables/useNumberField.d.ts

@@ -435,7 +435,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
             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" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>>;
+        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
         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, {}>>;
@@ -684,7 +684,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         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" | "hideErrorMessage" | "readonly" | "errorIcon" | "showErrorIcon" | "corner">>>, {
+    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, {
         min: number | undefined;
         max: number | undefined;
         type: string;

package/dist/Components/NumberField/composables/useNumberField.js

@@ -25,7 +25,10 @@ function c(c, l, u = {}) {
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !1
-	}, { reservedSlots: () => ["end"] }), g = i(() => e(h.inputBind.value, {
+	}, {
+		componentName: "NumberField",
+		reservedSlots: () => ["end"]
+	}), g = i(() => e(h.inputBind.value, {
 		min: c.min,
 		max: c.max,
 		type: "number",

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

@@ -6,17 +6,17 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string | null | undefined) => any;
     change: (value: string) => any;
+    "update:modelValue": (value: string | null | undefined) => any;
     complete: (value: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
     onComplete?: ((value: string) => any) | undefined;
 }>, {
     color: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').OtpFieldColor, import('./otpField.types').OtpFieldColorOverrides>;
     type: import('@bridge-ui/core').OtpInputType;
-    size: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').OtpFieldSize, import('./otpField.types').OtpFieldSizeOverrides>;
+    size: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').BaseFieldSize, import('../BaseField').BaseFieldSizeOverrides>;
     length: number;
     rounded: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').OtpFieldRounded, import('./otpField.types').OtpFieldRoundedOverrides>;
     variant: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').OtpFieldVariant, import('./otpField.types').OtpFieldVariantOverrides>;

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

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