@bridge-ui/vue 0.0.7 → 0.0.9

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

@@ -1,18 +1,29 @@
-import { HTMLAttributes, Slot } from 'vue';
-import { ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MenuRounded, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
+import { FieldOverlayMode, ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MenuRounded, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+import { ButtonOwnProps } from '../Button';
+import { DrawerOwnProps } from '../Drawer/drawer.types';
 import { ListOwnProps } from '../List/list.types';
 import { ListItemOwnProps } from '../ListItem/listItem.types';
 import { ListSectionOwnProps } from '../ListSection/listSection.types';
 import { MenuOwnProps } from '../Menu/menu.types';
+import { ModalOwnProps } from '../Modal/modal.types';
 import { ProgressOwnProps } from '../Progress/progress.types';
 export interface ListboxSizeOverrides {}
 export interface ListboxColorOverrides {}
 export interface ListboxRoundedOverrides {}
+/**
+ * Props accepted by the footer buttons, pinned to the native `button` element.
+ */
+type ListboxFooterButtonProps = Partial<MergeHtmlProps<Omit<ButtonOwnProps, "as">, ButtonHTMLAttributes>>;
 export interface ListboxClasses {
     /**
      * Classes merged onto the check icon.
      */
     check?: string;
+    /**
+     * Classes merged onto the Cancel / Apply footer.
+     */
+    footer?: string;
     /**
      * Classes forwarded to the loading `Progress` bar.
      */
@@ -31,6 +42,30 @@ export interface ListboxClasses {
     scroll?: string;
 }
 export interface ListboxCustomProps {
+    /**
+     * Props forwarded to the Apply button.
+     *
+     * @default undefined
+     */
+    applyButton?: ListboxFooterButtonProps;
+    /**
+     * Props forwarded to the Cancel button.
+     *
+     * @default undefined
+     */
+    cancelButton?: ListboxFooterButtonProps;
+    /**
+     * Props forwarded to the nested `Drawer` when `overlay` resolves to `drawer`.
+     *
+     * @default undefined
+     */
+    drawer?: Partial<DrawerOwnProps>;
+    /**
+     * Props forwarded to the Cancel / Apply footer.
+     *
+     * @default undefined
+     */
+    footer?: HTMLAttributes;
     /**
      * Props forwarded to the internal `List`.
      *
@@ -51,12 +86,18 @@ export interface ListboxCustomProps {
      */
     listSection?: Partial<Omit<ListSectionOwnProps, "title">>;
     /**
-     * Props forwarded to the floating `Menu`.
+     * Props forwarded to the floating `Menu` when `overlay` resolves to `menu`.
      * Merged last so they override Listbox defaults.
      *
      * @default undefined
      */
     menu?: Partial<MenuOwnProps>;
+    /**
+     * Props forwarded to the nested `Modal` when `overlay` resolves to `modal`.
+     *
+     * @default undefined
+     */
+    modal?: Partial<ModalOwnProps>;
     /**
      * Props forwarded to the loading `Progress`.
      *
@@ -72,6 +113,14 @@ export interface ListboxCustomProps {
 }
 export type { ListboxEntry, ListboxOption, ListboxValue, } from '@bridge-ui/core';
 export interface ListboxEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
+    /**
+     * Emitted when Cancel is pressed (`showFooter`).
+     */
+    cancel: [];
     /**
      * Emitted when composed `ListItem` options register or unregister.
      */
@@ -101,9 +150,16 @@ 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`).
+     * `modal`, `drawer`, `progress`, `scroll`, `footer`, `applyButton`,
+     * `cancelButton`).
      *
      * @default undefined
      */
@@ -194,6 +250,13 @@ export interface ListboxOwnProps {
      * @default []
      */
     options?: ListboxOption[];
+    /**
+     * Which overlay shell opens the options panel. `auto` uses `menu` on desktop
+     * and `drawer` (bottom) on mobile.
+     *
+     * @default "auto"
+     */
+    overlay?: FieldOverlayMode;
     /**
      * Preferred placement of the panel relative to the anchor.
      *
@@ -214,6 +277,13 @@ export interface ListboxOwnProps {
      * @default true
      */
     showCheckmark?: boolean;
+    /**
+     * Shows Cancel / Apply footer. When unset, defaults to `true` on mobile.
+     * Parents (e.g. Select) typically keep selection as draft until Apply.
+     *
+     * @default false
+     */
+    showFooter?: boolean;
     /**
      * Typography and option padding scale, aligned with `FormField` / `Select`.
      *

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

@@ -6,25 +6,25 @@ 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>;
     shadow: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuShadow, import('./menu.types').MenuShadowOverrides>;
-    anchorEl: null | HTMLElement;
-    closeOnClickAway: boolean;
     closeOnEscape: boolean;
-    disableAutoFocus: boolean;
     disableScrollLock: boolean;
     keepMounted: boolean;
     persistent: boolean;
     placement: import('@floating-ui/utils').Placement;
-    strategy: import('@bridge-ui/core').PositionStrategy;
     teleportTo: false | string;
+    anchorEl: null | HTMLElement;
+    closeOnClickAway: boolean;
+    disableAutoFocus: boolean;
+    strategy: import('@bridge-ui/core').PositionStrategy;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -2,10 +2,10 @@ import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp
 import { useMenu as n } from "./composables/useMenu.js";
 import { Fragment as r, Teleport as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeProps as p, openBlock as m, resolveDynamicComponent as h, unref as g, useModel as _, useSlots as v } from "vue";
 //#region src/Components/Menu/Menu.vue?vue&type=script&setup=true&lang.ts
-var y = /* @__PURE__ */ u({
+var y = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "Menu",
-	props: /* @__PURE__ */ d({
+	props: /*@__PURE__*/ d({
 		anchorEl: { default: null },
 		classes: {},
 		closeOnClickAway: {
@@ -50,9 +50,9 @@ var y = /* @__PURE__ */ u({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ d(["close"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ d(["close"], ["update:modelValue"]),
 	setup(u, { emit: d }) {
-		let y = v(), b = d, x = u, { merged: S, mounted: C, rootBind: w, triggerBind: T, contentBind: E, setTriggerRef: D, setContentRef: O } = n(x, {
+		let y = v(), b = d, x = u, S = _(u, "modelValue"), { merged: C, mounted: w, rootBind: T, triggerBind: E, contentBind: D, setTriggerRef: O, setContentRef: k } = n(x, {
 			offset: 4,
 			shadow: "md",
 			rounded: "md",
@@ -63,17 +63,17 @@ var y = /* @__PURE__ */ u({
 			disableScrollLock: !0,
 			placement: "bottom-start"
 		}, {
-			show: _(u, "modelValue"),
+			show: S,
 			onClose: () => b("close"),
 			onShowChange: (e) => x.onShowChange?.(e)
-		}), k = a(() => e(y, "trigger")), A = a(() => S.value.teleportTo === !1), j = a(() => S.value.teleportTo === !1 ? "body" : S.value.teleportTo);
-		return (e, n) => (m(), c(r, null, [k.value ? (m(), c("div", p(f({ key: 0 }, g(w))), [l("div", f({ ref: g(D) }, g(T)), [(m(), o(h(g(t)(g(y), "trigger"))))], 16)], 16)) : s("", !0), (m(), o(i, {
-			to: j.value,
-			disabled: A.value
-		}, [g(C) ? (m(), c("div", f({
+		}), A = a(() => e(y, "trigger")), j = a(() => C.value.teleportTo === !1), M = a(() => C.value.teleportTo === !1 ? "body" : C.value.teleportTo);
+		return (e, n) => (m(), c(r, null, [A.value ? (m(), c("div", p(f({ key: 0 }, g(T))), [l("div", f({ ref: g(O) }, g(E)), [(m(), o(h(g(t)(g(y), "trigger"))))], 16)], 16)) : s("", !0), (m(), o(i, {
+			to: M.value,
+			disabled: j.value
+		}, [g(w) ? (m(), c("div", f({
 			key: 0,
-			ref: g(O)
-		}, g(E)), [(m(), o(h(g(t)(g(y), "default"))))], 16)) : s("", !0)], 8, ["to", "disabled"]))], 64));
+			ref: g(k)
+		}, g(D)), [(m(), o(h(g(t)(g(y), "default"))))], 16)) : s("", !0)], 8, ["to", "disabled"]))], 64));
 	}
 });
 //#endregion

package/dist/Components/Menu/composables/useMenu.d.ts

@@ -24,7 +24,7 @@ export declare function useMenu(props: MenuOwnProps, libDefaults: MenuLibDefault
     merged: import('vue').ComputedRef<MenuMerged>;
     menuId: string;
     mounted: Ref<boolean, boolean>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "closeOnClickAway" | "closeOnEscape" | "disableAutoFocus" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "strategy" | "teleportTo">, "anchorEl" | "onShowChange">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "teleportTo" | "closeOnClickAway" | "disableAutoFocus" | "strategy">, "anchorEl" | "onShowChange">>>;
     isPortaled: import('vue').ComputedRef<boolean>;
     triggerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         tabindex: number;

package/dist/Components/Menu/composables/useMenu.js

@@ -38,7 +38,13 @@ function y(y, le, b = {}) {
 	}), z = r(() => L.value.customProps), B = ee({
 		entry: R,
 		props: () => I.value.componentProps
-	}), V = r(() => L.value.keepMounted && !P.value), H = r(() => L.value.teleportTo !== !1), de = r(() => g(h(v, R.value?.tokens?.rounded), L.value.rounded)), fe = r(() => g(h(se, R.value?.tokens?.shadow), L.value.shadow)), U = r(() => !L.value.persistent), W = r(() => _(I.value.inheritedAttrs, ["anchorEl", "onShowChange"]));
+	}), V = r(() => L.value.keepMounted && !P.value), H = r(() => L.value.teleportTo !== !1), de = r(() => {
+		let e = h(v, R.value?.tokens?.rounded);
+		return g(e, L.value.rounded);
+	}), fe = r(() => {
+		let e = h(se, R.value?.tokens?.shadow);
+		return g(e, L.value.shadow);
+	}), U = r(() => !L.value.persistent), W = r(() => _(I.value.inheritedAttrs, ["anchorEl", "onShowChange"]));
 	function G() {
 		return y.anchorEl ?? w.value;
 	}
@@ -58,7 +64,7 @@ function y(y, le, b = {}) {
 		L.value.persistent && P.value || F(!P.value);
 	}
 	function he(e) {
-		e.key !== "ArrowDown" && e.key !== "Enter" && e.key !== " " || (e.preventDefault(), P.value || F(!0));
+		(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), P.value || F(!0));
 	}
 	function ge(e) {
 		let t = T.value;
@@ -77,9 +83,7 @@ function y(y, le, b = {}) {
 			case "Home":
 				e.preventDefault(), n.focusFirst();
 				break;
-			case "End":
-				e.preventDefault(), n.focusLast();
-				break;
+			case "End": e.preventDefault(), n.focusLast();
 		}
 	}
 	function Y() {

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

@@ -8,25 +8,25 @@ 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;
-    disableScrollLock: boolean;
-    keepMounted: boolean;
-    persistent: boolean;
-    teleportTo: false | string;
-    scroll: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ModalScroll, import('./modal.types').ModalScrollOverrides>;
     autoFocus: boolean;
+    closeOnEscape: boolean;
     closeOnOverlay: boolean;
     disableEnforceFocus: boolean;
     disableRestoreFocus: boolean;
+    disableScrollLock: boolean;
     hideBackdrop: boolean;
+    keepMounted: boolean;
+    persistent: boolean;
+    scroll: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').ModalScroll, import('./modal.types').ModalScrollOverrides>;
+    teleportTo: false | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -2,10 +2,10 @@ import { resolveNamedSlot as e } from "../../Utils/slotOrProp.js";
 import { useModal as t } from "./composables/useModal.js";
 import { Teleport as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, guardReactiveProps as l, mergeModels as u, mergeProps as d, normalizeProps as f, openBlock as p, resolveDynamicComponent as m, unref as h, useModel as g, useSlots as _ } from "vue";
 //#region src/Components/Modal/Modal.vue?vue&type=script&setup=true&lang.ts
-var v = /* @__PURE__ */ c({
+var v = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "Modal",
-	props: /* @__PURE__ */ u({
+	props: /*@__PURE__*/ u({
 		align: {},
 		autoFocus: {
 			type: Boolean,
@@ -61,9 +61,9 @@ var v = /* @__PURE__ */ c({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ u(["close", "show-change"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ u(["close", "show-change"], ["update:modelValue"]),
 	setup(c, { expose: u, emit: v }) {
-		let y = _(), b = v, x = c, { merged: S, mounted: C, rootBind: w, panelBind: T, overlayBind: E, wrapperBind: D, setPanelRef: O, layerStackId: k } = t(x, {
+		let y = _(), b = v, x = c, S = g(c, "modelValue"), { merged: C, mounted: w, rootBind: T, panelBind: E, overlayBind: D, wrapperBind: O, setPanelRef: k, layerStackId: A } = t(x, {
 			size: "md",
 			blur: "none",
 			scroll: "body",
@@ -74,20 +74,20 @@ var v = /* @__PURE__ */ c({
 			closeOnOverlay: !0,
 			align: "middle-center"
 		}, {
-			show: g(c, "modelValue"),
+			show: S,
 			stackId: x.stackId,
 			onClose: () => b("close"),
 			onShowChange: (e) => b("show-change", e)
 		});
-		u({ stackId: r(() => x.stackId ?? k.value) });
-		let A = r(() => S.value.teleportTo === !1), j = r(() => S.value.teleportTo === !1 ? "body" : S.value.teleportTo), M = r(() => x.hideBackdrop !== !0 && S.value.hideBackdrop !== !0);
+		u({ stackId: r(() => x.stackId ?? A.value) });
+		let j = r(() => C.value.teleportTo === !1), M = r(() => C.value.teleportTo === !1 ? "body" : C.value.teleportTo), N = r(() => x.hideBackdrop !== !0 && C.value.hideBackdrop !== !0);
 		return (t, r) => (p(), i(n, {
-			to: j.value,
-			disabled: A.value
-		}, [h(C) ? (p(), o("div", f(d({ key: 0 }, h(w))), [M.value ? (p(), o("div", d({
+			to: M.value,
+			disabled: j.value
+		}, [h(w) ? (p(), o("div", f(d({ key: 0 }, h(T))), [N.value ? (p(), o("div", d({
 			key: 0,
 			"aria-hidden": "true"
-		}, h(E)), null, 16)) : a("", !0), s("div", f(l(h(D))), [s("div", d({ ref: h(O) }, h(T)), [(p(), i(m(h(e)(h(y), "default"))))], 16)], 16)], 16)) : a("", !0)], 8, ["to", "disabled"]));
+		}, h(D)), null, 16)) : a("", !0), s("div", f(l(h(O))), [s("div", d({ ref: h(k) }, h(E)), [(p(), i(m(h(e)(h(y), "default"))))], 16)], 16)], 16)) : a("", !0)], 8, ["to", "disabled"]));
 	}
 });
 //#endregion

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" | "autoFocus" | "blur" | "closeOnEscape" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "persistent" | "scroll" | "stackId" | "teleportTo" | "transition" | "align">>>;
     panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         "data-modal-part": string;
         "data-state": "open" | "closed";

package/dist/Components/Modal/composables/useModal.js

@@ -43,7 +43,16 @@ function x(x, ue, S = {}) {
 	}), z = n(() => L.value.customProps), B = te({
 		entry: R,
 		props: () => I.value.componentProps
-	}), V = n(() => oe(L.value.transition ?? "none")), H = n(() => p(V.value)), U = n(() => L.value.scroll ?? "body"), W = n(() => L.value.keepMounted && !w.value), fe = n(() => _(m(v, R.value?.tokens?.align), L.value.align)), pe = n(() => _(m(y, R.value?.tokens?.blur), L.value.blur)), me = n(() => _(m(b, R.value?.tokens?.size), L.value.size)), he = n(() => d(V.value)), ge = n(() => f(V.value)), G = n(() => !L.value.persistent), _e = n(() => I.value.inheritedAttrs), ve = n(() => e(z.value?.root, _e.value, {
+	}), V = n(() => oe(L.value.transition ?? "none")), H = n(() => p(V.value)), U = n(() => L.value.scroll ?? "body"), W = n(() => L.value.keepMounted && !w.value), fe = n(() => {
+		let e = m(v, R.value?.tokens?.align);
+		return _(e, L.value.align);
+	}), pe = n(() => {
+		let e = m(y, R.value?.tokens?.blur);
+		return _(e, L.value.blur);
+	}), me = n(() => {
+		let e = m(b, R.value?.tokens?.size);
+		return _(e, L.value.size);
+	}), he = n(() => d(V.value)), ge = n(() => f(V.value)), G = n(() => !L.value.persistent), _e = n(() => I.value.inheritedAttrs), ve = n(() => e(z.value?.root, _e.value, {
 		onTransitionend: we,
 		style: { zIndex: M.value },
 		"aria-hidden": W.value ? !0 : void 0,
@@ -123,7 +132,7 @@ function x(x, ue, S = {}) {
 	function we(e) {
 		if (!C.value || N.value !== "closed") return;
 		let t = e.target;
-		t?.dataset.modalPart !== "overlay" && t?.dataset.modalPart !== "panel" || e.propertyName === "none" || e.elapsedTime === 0 || (--D, D <= 0 && J());
+		(t?.dataset.modalPart === "overlay" || t?.dataset.modalPart === "panel") && e.propertyName !== "none" && e.elapsedTime !== 0 && (--D, D <= 0 && J());
 	}
 	function X() {
 		if (G.value) {

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/NumberField.vue_vue_type_script_setup_true_lang.js

@@ -8,10 +8,10 @@ import { computed as s, createBlock as c, createElementVNode as l, createVNode a
 import { cn as w } from "@bridge-ui/core";
 import { isUndefined as T } from "es-toolkit/compat";
 //#region src/Components/NumberField/NumberField.vue?vue&type=script&setup=true&lang.ts
-var E = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overflow-hidden" }, D = /* @__PURE__ */ d({
+var E = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overflow-hidden" }, D = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "NumberField",
-	props: /* @__PURE__ */ m({
+	props: /*@__PURE__*/ m({
 		classes: {},
 		customProps: {},
 		defaultValue: {},
@@ -41,7 +41,7 @@ var E = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overf
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ m(["change", "update:modelValue"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ m(["change", "update:modelValue"], ["update:modelValue"]),
 	setup(d, { emit: m }) {
 		let D = m, O = b(d, "modelValue"), k = d, A = v(k.defaultValue), j = s({
 			set: (e) => {

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, v = m(o, "modelValue"), { digits: y, pinBind: b, pinsBind: x, baseField: S, inputBind: C, setPinRef: w, handlePinInput: T, handlePinFocus: E, handlePinPaste: D, handlePinKeyDown: O } = t(o, v, {
+			onChange: (e) => _("change", e),
+			onComplete: (e) => _("complete", e)
+		});
+		return (t, o) => (d(), r(e, { field: p(S) }, {
+			default: h(() => [a("div", u(s(p(x))), [(d(!0), i(n, null, f(p(y), (e, t) => (d(), i("div", l({ key: t }, { ref_for: !0 }, p(b)(t)), [a("input", l({ ref_for: !0 }, p(C)(t), {
+				value: e,
+				onFocus: (e) => p(E)(t),
+				onPaste: (e) => p(D)(t, e),
+				onInput: (e) => p(T)(t, e),
+				onKeydown: (e) => p(O)(t, e),
+				ref_for: !0,
+				ref: (e) => p(w)(t, e)
+			}), null, 16, g)], 16))), 128))], 16)]),
+			_: 1
+		}, 8, ["field"]));
 	}
 });
 //#endregion
-export { D as default };
+export { _ as default };