@bridge-ui/vue 0.0.7 → 0.0.9

package/dist/Components/List/composables/useList.js

@@ -24,12 +24,12 @@ function f(f) {
 	}), _ = i(() => h.value.customProps), v = n({
 		entry: g,
 		props: () => m.value.componentProps
-	});
-	a(r, i(() => ({ dense: h.value.dense === !0 })));
-	let y = i(() => u(m.value.inheritedAttrs, []));
+	}), y = i(() => ({ dense: h.value.dense === !0 }));
+	a(r, y);
+	let b = i(() => u(m.value.inheritedAttrs, []));
 	return {
 		merged: h,
-		rootBind: i(() => e(_.value?.root, y.value, s({
+		rootBind: i(() => e(_.value?.root, b.value, s({
 			"m-0 list-none py-2 text-dark-900 dark:text-dark-100": !0,
 			"pl-4": h.value.nested,
 			[l(v.value, "root") ?? ""]: !0

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

@@ -3,7 +3,7 @@ import r from "../Icon/Icon.js";
 import { resolveListItemPrimary as i, useListItem as a } from "./composables/useListItem.js";
 import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, normalizeClass as m, normalizeProps as h, openBlock as g, resolveDynamicComponent as _, unref as v, useSlots as y, withCtx as b } from "vue";
 //#region src/Components/ListItem/ListItem.vue?vue&type=script&setup=true&lang.ts
-var x = /* @__PURE__ */ d({
+var x = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "ListItem",
 	props: {

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

@@ -1,7 +1,7 @@
 import { useListSection as e } from "./composables/useListSection.js";
 import { computed as t, createBlock as n, createElementBlock as r, createElementVNode as i, defineComponent as a, guardReactiveProps as o, mergeProps as s, normalizeProps as c, openBlock as l, resolveDynamicComponent as u, unref as d, useSlots as f, withCtx as p } from "vue";
 //#region src/Components/ListSection/ListSection.vue?vue&type=script&setup=true&lang.ts
-var m = /* @__PURE__ */ a({
+var m = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "ListSection",
 	props: {
@@ -19,9 +19,9 @@ var m = /* @__PURE__ */ a({
 		title: {}
 	},
 	setup(a) {
-		let { label: m, merged: h, rootBind: g, titleBind: _ } = e(a, f()), v = t(() => h.value.as ?? "li");
-		return (e, t) => v.value === "div" ? (l(), r("div", c(s({ key: 0 }, d(_))), [(l(), n(u(d(m))))], 16)) : (l(), n(u(v.value), c(s({ key: 1 }, d(g))), {
-			default: p(() => [i("div", c(o(d(_))), [(l(), n(u(d(m))))], 16)]),
+		let m = f(), { label: h, merged: g, rootBind: _, titleBind: v } = e(a, m), y = t(() => g.value.as ?? "li");
+		return (e, t) => y.value === "div" ? (l(), r("div", c(s({ key: 0 }, d(v))), [(l(), n(u(d(h))))], 16)) : (l(), n(u(y.value), c(s({ key: 1 }, d(_))), {
+			default: p(() => [i("div", c(o(d(v))), [(l(), n(u(d(h))))], 16)]),
 			_: 1
 		}, 16));
 	}

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

@@ -8,23 +8,28 @@ 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, {
     select: (option: ListboxOption) => any;
+    cancel: () => any;
     "update:modelValue": (value: boolean) => any;
     "show-change": (show: boolean) => any;
+    apply: () => any;
     "registered-options-change": (options: ListboxOption[]) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((option: ListboxOption) => any) | undefined;
+    onCancel?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onShow-change"?: ((show: boolean) => any) | undefined;
+    onApply?: (() => any) | undefined;
     "onRegistered-options-change"?: ((options: ListboxOption[]) => 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;
+    loading: boolean;
     placement: import('@floating-ui/utils').Placement;
+    disableAutoFocus: boolean;
     hideEmptyMessage: boolean;
     highlightedIndex: number;
+    overlay: import('@bridge-ui/core').FieldOverlayMode;
     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

@@ -2,22 +2,24 @@ import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { hasNamedSlot as t, resolveNamedSlot as n } from "../../Utils/slotOrProp.js";
 import { mergeNestedComponentProps as r } from "../../Utils/index.js";
 import { useListbox as ee } from "./composables/useListbox.js";
-import te from "../List/List.js";
-import { LISTBOX_INJECTION_KEY as i } from "./listboxInjectionKey.js";
-import a from "../ListItem/ListItem.js";
-import o from "../ListSection/ListSection.js";
-import s from "../Menu/Menu.js";
-import ne from "../Progress/Progress.js";
-import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as w, renderSlot as T, resolveDynamicComponent as E, toDisplayString as D, unref as O, useModel as re, useSlots as ie, watch as k, withCtx as A } from "vue";
-import { cn as ae, entriesFromListboxOptions as oe, flattenListboxOptions as j, mapListboxEntriesToRows as M } from "@bridge-ui/core";
-import { isNil as N } from "es-toolkit/compat";
+import i from "../Button/Button.js";
+import te from "../FieldOverlay/FieldOverlay.js";
+import ne from "../List/List.js";
+import { LISTBOX_INJECTION_KEY as re } from "./listboxInjectionKey.js";
+import ie from "../ListItem/ListItem.js";
+import a from "../ListSection/ListSection.js";
+import o from "../Progress/Progress.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, provide as C, ref as w, renderList as T, renderSlot as E, resolveDynamicComponent as D, toDisplayString as O, unref as k, useModel as ae, useSlots as oe, watch as A, withCtx as j } from "vue";
+import { cn as se, entriesFromListboxOptions as ce, flattenListboxOptions as M, mapListboxEntriesToRows as N } from "@bridge-ui/core";
+import { isNil as P } from "es-toolkit/compat";
 //#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var P = { key: 1 }, F = /* @__PURE__ */ g({
+var F = { key: 1 }, I = /*@__PURE__*/ g({
 	__name: "Listbox",
-	props: /* @__PURE__ */ v({
+	props: /*@__PURE__*/ v({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
+		componentName: {},
 		customProps: {},
 		disableAutoFocus: {
 			type: Boolean,
@@ -46,12 +48,14 @@ var P = { key: 1 }, F = /* @__PURE__ */ g({
 			default: !1
 		},
 		options: {},
+		overlay: { default: "auto" },
 		placement: { default: "bottom-start" },
 		rounded: {},
 		showCheckmark: {
 			type: Boolean,
 			default: !0
 		},
+		showFooter: { type: Boolean },
 		size: { default: "md" }
 	}, {
 		modelValue: {
@@ -60,97 +64,106 @@ var P = { key: 1 }, F = /* @__PURE__ */ g({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ v([
+	emits: /*@__PURE__*/ v([
+		"apply",
+		"cancel",
 		"registered-options-change",
 		"select",
 		"show-change"
 	], ["update:modelValue"]),
 	setup(g, { emit: v }) {
-		let F = ie(), I = v, L = re(g, "modelValue");
-		k(L, (e) => {
-			I("show-change", e);
+		let I = oe(), L = v, R = ae(g, "modelValue");
+		A(R, (e) => {
+			L("show-change", e);
 		});
-		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, {
+		let z = g, B = e(), V = c(() => z.emptyMessage ?? B("No options")), H = c(() => z.loadingMessage ?? B("Loading...")), { merged: U, checkClass: W, scrollBind: G, footerBind: le, showFooter: ue, applyLabel: de, cancelLabel: fe, messageBind: K, surfaceBind: pe, sizeClasses: me, mergedClasses: q, applyButtonProps: he, cancelButtonProps: ge, optionSelectedClass: _e, optionHighlightedClass: ve } = ee(z, {
 			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: z.componentName }), ye = c(() => z.options ?? []), J = c(() => z.entries ? z.entries : ce(ye.value)), Y = c(() => M(J.value)), X = c(() => t(I, "default")), Z = c(() => !z.loading && !X.value && Y.value.length === 0 && z.hideEmptyMessage !== !0), be = c(() => se(W.value, q.value.check)), Q = w([]);
 		function $(e) {
-			return R.isSelected?.(e) ?? !1;
+			return z.isSelected?.(e) ?? !1;
 		}
-		function de(e) {
-			e.disabled || I("select", e);
+		function xe(e) {
+			e.disabled || L("select", e);
 		}
-		function fe(e) {
+		function Se(e) {
 			return Q.value.some((t) => String(t.value) === String(e.value)) || (Q.value = [...Q.value, e]), () => {
 				Q.value = Q.value.filter((t) => String(t.value) !== String(e.value));
 			};
 		}
-		function pe(e) {
+		function Ce(e) {
 			return (X.value ? Q.value : Y.value).findIndex((t) => String(t.value) === String(e));
 		}
-		k(Q, (e) => {
-			X.value && I("registered-options-change", e);
-		}, { deep: !0 }), S(i, l(() => ({
-			getOptionIndex: pe,
-			registerOption: fe,
-			onSelect: de,
-			listboxId: R.listboxId,
+		A(Q, (e) => {
+			X.value && L("registered-options-change", e);
+		}, { deep: !0 });
+		let we = c(() => ({
+			getOptionIndex: Ce,
+			registerOption: Se,
+			onSelect: xe,
+			listboxId: z.listboxId,
 			isSelected: $,
-			sizeClasses: K.value,
-			showCheckmark: R.showCheckmark,
-			checkClass: ue.value,
-			highlightedIndex: R.highlightedIndex,
-			optionSelectedClass: se.value,
-			optionHighlightedClass: ce.value,
+			sizeClasses: me.value,
+			showCheckmark: z.showCheckmark,
+			checkClass: be.value,
+			highlightedIndex: z.highlightedIndex,
+			optionSelectedClass: _e.value,
+			optionHighlightedClass: ve.value,
 			mergedClasses: {
 				optionSelected: q.value.optionSelected,
 				optionHighlighted: q.value.optionHighlighted
 			}
-		})));
-		let me = l(() => M(J.value, $)), he = l(() => H.value.customProps?.menu), ge = l(() => H.value.customProps?.list), _e = l(() => H.value.customProps?.listItem), ve = l(() => H.value.customProps?.progress), ye = l(() => H.value.customProps?.listSection), be = l(() => ({
-			...N(R.rounded) ? {} : { rounded: R.rounded },
-			...he.value
-		})), xe = l(() => ({
+		}));
+		C(re, we);
+		let Te = c(() => N(J.value, $)), Ee = c(() => U.value.customProps?.menu), De = c(() => U.value.customProps?.modal), Oe = c(() => U.value.customProps?.drawer), ke = c(() => U.value.customProps?.list), Ae = c(() => U.value.customProps?.listItem), je = c(() => U.value.customProps?.progress), Me = c(() => U.value.customProps?.listSection), Ne = c(() => ({
+			modal: De.value,
+			drawer: Oe.value,
+			menu: {
+				anchorEl: z.anchorEl,
+				placement: z.placement,
+				disableAutoFocus: z.disableAutoFocus,
+				...P(z.rounded) ? {} : { rounded: z.rounded },
+				...Ee.value
+			}
+		})), Pe = c(() => ({
 			size: "xs",
 			"aria-hidden": !0,
-			color: H.value.color,
-			...r(ve.value, {
+			color: U.value.color,
+			...r(je.value, {
 				class: "shrink-0",
 				classes: { bar: q.value.loading }
 			})
-		})), Se = l(() => ({
+		})), Fe = c(() => ({
 			dense: !0,
 			role: "listbox",
-			id: R.listboxId,
-			"aria-labelledby": R.labelledBy,
-			"aria-multiselectable": R.multiple || void 0,
-			...r(ge.value, { class: "p-0" })
+			id: z.listboxId,
+			"aria-labelledby": z.labelledBy,
+			"aria-multiselectable": z.multiple || void 0,
+			...r(ke.value, { class: "p-0" })
 		}));
-		return (e, r) => (x(), u(O(s), y({
-			modelValue: L.value,
-			"onUpdate:modelValue": r[0] ||= (e) => L.value = e,
-			"anchor-el": g.anchorEl,
-			placement: g.placement,
-			"close-on-click-away": !0,
-			"disable-auto-focus": g.disableAutoFocus
-		}, be.value), {
-			default: A(() => [
-				O(t)(O(F), "beforeOptions") ? (x(), u(E(O(n)(O(F), "beforeOptions")), { key: 0 })) : d("", !0),
-				g.loading ? (x(), f(c, { key: 1 }, [h(O(ne), b(_(xe.value)), null, 16), p("div", b(_(O(G))), [O(t)(O(F), "loading") ? (x(), u(E(O(n)(O(F), "loading")), { key: 0 })) : (x(), f("span", P, D(V.value), 1))], 16)], 64)) : (x(), f("div", b(y({ key: 2 }, O(W))), [h(O(te), b(_(Se.value)), {
-					default: A(() => [X.value ? T(e.$slots, "default", { key: 0 }) : (x(!0), f(c, { key: 1 }, w(me.value, (n) => (x(), f(c, { key: n.key }, [n.kind === "section" ? (x(), u(O(o), y({
+		return (e, r) => (S(), l(k(te), {
+			modelValue: R.value,
+			"onUpdate:modelValue": r[2] ||= (e) => R.value = e,
+			overlay: g.overlay,
+			"custom-props": Ne.value
+		}, {
+			default: j(() => [f("div", { class: b(k(pe)) }, [
+				k(t)(k(I), "beforeOptions") ? (S(), l(D(k(n)(k(I), "beforeOptions")), { key: 0 })) : u("", !0),
+				g.loading ? (S(), d(s, { key: 1 }, [h(k(o), x(_(Pe.value)), null, 16), f("div", x(_(k(K))), [k(t)(k(I), "loading") ? (S(), l(D(k(n)(k(I), "loading")), { key: 0 })) : (S(), d("span", F, O(H.value), 1))], 16)], 64)) : (S(), d("div", x(y({ key: 2 }, k(G))), [h(k(ne), x(_(Fe.value)), {
+					default: j(() => [X.value ? E(e.$slots, "default", {}, void 0, void 0, 0) : (S(!0), d(s, { key: 1 }, T(Te.value, (n) => (S(), d(s, { key: n.key }, [n.kind === "section" ? (S(), l(k(a), y({
 						key: 0,
 						title: n.title,
 						sticky: n.sticky
-					}, { ref_for: !0 }, ye.value), null, 16, ["title", "sticky"])) : (x(), u(O(a), y({
+					}, { ref_for: !0 }, Me.value), null, 16, ["title", "sticky"])) : (S(), l(k(ie), y({
 						key: 1,
 						interactive: "",
 						value: n.option.value,
 						disabled: n.option.disabled,
 						secondary: n.option.description,
-						primary: O(t)(O(F), "option") ? void 0 : n.option.label
-					}, { ref_for: !0 }, _e.value), m({ _: 2 }, [O(t)(O(F), "option") ? {
+						primary: k(t)(k(I), "option") ? void 0 : n.option.label
+					}, { ref_for: !0 }, Ae.value), p({ _: 2 }, [k(t)(k(I), "option") ? {
 						name: "default",
-						fn: A(() => [T(e.$slots, "option", {
+						fn: j(() => [E(e.$slots, "option", {
 							option: n.option,
 							selected: n.selected
 						})]),
@@ -163,17 +176,26 @@ var P = { key: 1 }, F = /* @__PURE__ */ g({
 					]))], 64))), 128))]),
 					_: 3
 				}, 16)], 16)),
-				Z.value && !O(t)(O(F), "empty") ? (x(), f("div", b(y({ key: 3 }, O(G))), D(B.value), 17)) : Z.value && O(t)(O(F), "empty") ? (x(), u(E(O(n)(O(F), "empty")), { key: 4 })) : d("", !0),
-				O(t)(O(F), "afterOptions") ? (x(), u(E(O(n)(O(F), "afterOptions")), { key: 5 })) : d("", !0)
-			]),
+				Z.value && !k(t)(k(I), "empty") ? (S(), d("div", x(y({ key: 3 }, k(K))), O(V.value), 17)) : Z.value && k(t)(k(I), "empty") ? (S(), l(D(k(n)(k(I), "empty")), { key: 4 })) : u("", !0),
+				k(t)(k(I), "afterOptions") ? (S(), l(D(k(n)(k(I), "afterOptions")), { key: 5 })) : u("", !0),
+				k(ue) ? (S(), d("div", x(y({ key: 6 }, k(le))), [h(k(i), y({
+					variant: "flat",
+					color: "secondary"
+				}, k(ge), { onClick: r[0] ||= (e) => L("cancel") }), {
+					default: j(() => [m(O(k(fe)), 1)]),
+					_: 1
+				}, 16), h(k(i), y({ color: "primary" }, k(he), { onClick: r[1] ||= (e) => L("apply") }), {
+					default: j(() => [m(O(k(de)), 1)]),
+					_: 1
+				}, 16)], 16)) : u("", !0)
+			], 2)]),
 			_: 3
-		}, 16, [
+		}, 8, [
 			"modelValue",
-			"anchor-el",
-			"placement",
-			"disable-auto-focus"
+			"overlay",
+			"custom-props"
 		]));
 	}
 });
 //#endregion
-export { F as default };
+export { I as default };

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

@@ -1,15 +1,31 @@
 import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
 import { ListboxClasses, ListboxOwnProps } from '../listbox.types';
-export declare const listboxBridgeKeys: readonly ["size", "color", "classes", "maxHeight", "customProps", "invalidated", "disableMaxHeight"];
+export declare const listboxBridgeKeys: readonly ["size", "color", "classes", "maxHeight", "showFooter", "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, {}>>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    showFooter: import('vue').ComputedRef<boolean>;
+    applyLabel: import('vue').ComputedRef<string>;
+    cancelLabel: import('vue').ComputedRef<string>;
     messageBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+    surfaceBind: import('vue').ComputedRef<string>;
     sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core').ListboxSizeItem | undefined>;
     mergedClasses: import('vue').ComputedRef<Partial<ListboxClasses>>;
+    applyButtonProps: import('vue').ComputedRef<Partial<import('@bridge-ui/core').MergeHtmlProps<Omit<import('../../Button').ButtonOwnProps, "as">, import('vue').ButtonHTMLAttributes>> | undefined>;
+    cancelButtonProps: import('vue').ComputedRef<Partial<import('@bridge-ui/core').MergeHtmlProps<Omit<import('../../Button').ButtonOwnProps, "as">, import('vue').ButtonHTMLAttributes>> | undefined>;
     optionSelectedClass: import('vue').ComputedRef<string | undefined>;
     optionHighlightedClass: import('vue').ComputedRef<string | undefined>;
 };

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

@@ -1,53 +1,75 @@
-import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
-import { computed as r, useAttrs as i } from "vue";
-import { cn as a, mergeBridgeUILayeredClasses as o, splitComponentProps as s } from "@bridge-ui/core";
-import { get as c } from "es-toolkit/compat";
-import { colorProps as l, invalidatedProps as u, sizeProps as d } from "@bridge-ui/core/Tokens/Listbox";
+import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
+import { useBreakpoint as t } from "../../../Utils/useBreakpoint.js";
+import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
+import { computed as a, useAttrs as o } from "vue";
+import { cn as s, isFieldOverlayDialog as c, mergeBridgeUILayeredClasses as l, resolveFieldOverlay as u, resolveFieldShowFooter as d, splitComponentProps as f } from "@bridge-ui/core";
+import { get as p } from "es-toolkit/compat";
+import { colorProps as m, invalidatedProps as h, sizeProps as g } from "@bridge-ui/core/Tokens/Listbox";
 //#region src/Components/Listbox/composables/useListbox.ts
-var f = [
+var _ = [
 	"size",
 	"color",
 	"classes",
 	"maxHeight",
+	"showFooter",
 	"customProps",
 	"invalidated",
 	"disableMaxHeight"
 ];
-function p(p, m) {
-	let h = i(), g = r(() => s({
+function v(v, y, b = {}) {
+	let x = o(), S = t(), C = e(), w = a(() => f({
 		props: {
-			...h,
-			...p
+			...x,
+			...v
 		},
-		bridgeKeys: f
-	})), { merged: _, entry: v } = 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);
+		bridgeKeys: _
+	})), { merged: T, entry: E } = r({
+		libDefaults: y,
+		componentName: b.componentName,
+		props: () => w.value.componentProps
+	}), D = i({
+		entry: E,
+		props: () => w.value.componentProps
+	}), O = a(() => T.value.customProps), k = a(() => d(T.value.showFooter, S.mobile)), A = a(() => c(u(v.overlay, S.mobile))), j = a(() => p(E.value, ["tokens", "listbox"])), M = a(() => {
+		let e = l(m, j.value?.color);
+		return p(e, T.value.color ?? "primary");
+	}), N = a(() => l(h, j.value?.invalidated)), P = a(() => T.value.invalidated ? N.value : M.value), F = a(() => {
+		let e = l(g, j.value?.size);
+		return p(e, T.value.size ?? "md");
+	}), I = a(() => P.value?.selected), L = a(() => P.value?.highlighted), R = a(() => s(F.value?.check, P.value?.check)), z = a(() => {
+		let e = T.value.maxHeight ?? "max-h-60", t = T.value.disableMaxHeight === !0;
+		return n(T.value.customProps?.scroll, {}, s({
+			"overflow-y-auto overscroll-contain": !t,
+			[e]: !t,
+			[D.value.scroll ?? ""]: !0
+		}));
+	}), B = a(() => n({}, {}, s({
+		"text-dark-500": !0,
+		[F.value?.message ?? ""]: !0
+	}))), V = a(() => s({
+		"overflow-hidden ring-1 ring-black/5 outline-hidden dark:ring-white/10": A.value,
+		"w-full rounded-lg bg-white text-dark-900 shadow-lg dark:bg-dark-800 dark:text-dark-100": A.value
+	}));
 	return {
-		merged: _,
-		checkClass: r(() => a(C.value?.check, S.value?.check)),
-		scrollBind: r(() => {
-			let t = _.value.maxHeight ?? "max-h-60", n = _.value.disableMaxHeight === !0;
-			return e(_.value.customProps?.scroll, {}, a({
-				"overflow-y-auto overscroll-contain": !n,
-				[t]: !n,
-				[y.value.scroll ?? ""]: !0
-			}));
-		}),
-		messageBind: r(() => e({}, {}, a({
-			"text-gray-500": !0,
-			[C.value?.message ?? ""]: !0
+		merged: T,
+		checkClass: R,
+		scrollBind: z,
+		footerBind: a(() => n(O.value?.footer, {}, s({
+			"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,
+			[D.value.footer ?? ""]: !0
 		}))),
-		sizeClasses: C,
-		mergedClasses: y,
-		optionSelectedClass: w,
-		optionHighlightedClass: T
+		showFooter: k,
+		applyLabel: a(() => C("Apply")),
+		cancelLabel: a(() => C("Cancel")),
+		messageBind: B,
+		surfaceBind: V,
+		sizeClasses: F,
+		mergedClasses: D,
+		applyButtonProps: a(() => O.value?.applyButton),
+		cancelButtonProps: a(() => O.value?.cancelButton),
+		optionSelectedClass: I,
+		optionHighlightedClass: L
 	};
 }
 //#endregion
-export { p as useListbox };
+export { _ as listboxBridgeKeys, v as useListbox };

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';