@bridge-ui/vue 0.0.0

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

@@ -0,0 +1,157 @@
+import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp.js";
+import n from "../List/List.js";
+import { useListbox as r } from "./composables/useListbox.js";
+import i from "../ListItem/ListItem.js";
+import a from "../Menu/Menu.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createSlots as d, createVNode as f, defineComponent as p, mergeModels as m, mergeProps as h, normalizeClass as g, normalizeProps as _, openBlock as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useModel as w, useSlots as T, watch as E, withCtx as D } from "vue";
+import { cn as O } from "@bridge-ui/core";
+import { Check as k } from "lucide-vue-next";
+//#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
+var A = {
+	key: 1,
+	class: "px-4 py-3 text-sm text-gray-500"
+}, j = { key: 1 }, M = {
+	key: 3,
+	class: "px-4 py-3 text-sm text-gray-500"
+}, N = /* @__PURE__ */ p({
+	__name: "Listbox",
+	props: /* @__PURE__ */ m({
+		anchorEl: {},
+		classes: {},
+		color: { default: "primary" },
+		customProps: {},
+		disableAutoFocus: {
+			type: Boolean,
+			default: !1
+		},
+		disableMaxHeight: { type: Boolean },
+		emptyMessage: { default: "No options" },
+		hideEmptyMessage: {
+			type: Boolean,
+			default: !1
+		},
+		highlightedIndex: { default: -1 },
+		invalidated: { type: Boolean },
+		isSelected: {},
+		labelledBy: {},
+		listboxId: {},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		maxHeight: {},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		options: {},
+		placement: { default: "bottom-start" },
+		showCheckmark: {
+			type: Boolean,
+			default: !0
+		}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ m(["select", "show-change"], ["update:modelValue"]),
+	setup(p, { emit: m }) {
+		let N = T(), P = m, F = w(p, "modelValue");
+		E(F, (e) => {
+			P("show-change", e);
+		});
+		let I = p, { merged: L, checkClass: R, scrollBind: z, mergedClasses: B, optionSelectedClass: V, optionHighlightedClass: H } = r(I, { color: "primary" }), U = s(() => !I.loading && I.options.length === 0 && I.hideEmptyMessage !== !0), W = s(() => O(R.value, B.value.check));
+		function G(e) {
+			return I.isSelected?.(e) ?? !1;
+		}
+		function K(e) {
+			return I.highlightedIndex === e;
+		}
+		function q(e) {
+			e.preventDefault();
+		}
+		function J(e, t) {
+			let n = {
+				tabindex: -1,
+				onMousedown: q
+			};
+			return G(e.value) ? n.class = O(V.value, B.value.optionSelected) : K(t) && (n.class = O(H.value, B.value.optionHighlighted)), { interactive: n };
+		}
+		function Y(e) {
+			e.disabled || P("select", e);
+		}
+		return (r, s) => (v(), c(C(a), {
+			modelValue: F.value,
+			"onUpdate:modelValue": s[0] ||= (e) => F.value = e,
+			"anchor-el": p.anchorEl,
+			placement: p.placement,
+			"close-on-click-away": !0,
+			"disable-auto-focus": p.disableAutoFocus,
+			"custom-props": { content: C(L).customProps?.content }
+		}, {
+			default: D(() => [
+				C(e)(C(N), "beforeOptions") ? (v(), c(x(C(t)(C(N), "beforeOptions")), { key: 0 })) : l("", !0),
+				p.loading ? (v(), u("div", A, [C(e)(C(N), "loading") ? (v(), c(x(C(t)(C(N), "loading")), { key: 0 })) : (v(), u("span", j, "Loading..."))])) : (v(), u("div", _(h({ key: 2 }, C(z))), [f(C(n), {
+					dense: "",
+					role: "listbox",
+					padding: "none",
+					id: p.listboxId,
+					"aria-labelledby": p.labelledBy,
+					"aria-multiselectable": p.multiple || void 0
+				}, {
+					default: D(() => [(v(!0), u(o, null, y(p.options, (t, n) => (v(), c(C(i), {
+						interactive: "",
+						role: "option",
+						selected: !1,
+						primary: t.label,
+						key: String(t.value),
+						disabled: t.disabled,
+						secondary: t.description,
+						onClick: (e) => Y(t),
+						id: `${p.listboxId}-option-${n}`,
+						"aria-selected": G(t.value),
+						"custom-props": J(t, n)
+					}, d({ _: 2 }, [C(e)(C(N), "option") ? {
+						name: "default",
+						fn: D(() => [b(r.$slots, "option", {
+							option: t,
+							selected: G(t.value)
+						})]),
+						key: "0"
+					} : void 0, p.showCheckmark && G(t.value) ? {
+						name: "end",
+						fn: D(() => [f(C(k), { class: g(["size-4", W.value]) }, null, 8, ["class"])]),
+						key: "1"
+					} : void 0]), 1032, [
+						"primary",
+						"disabled",
+						"secondary",
+						"onClick",
+						"id",
+						"aria-selected",
+						"custom-props"
+					]))), 128))]),
+					_: 3
+				}, 8, [
+					"id",
+					"aria-labelledby",
+					"aria-multiselectable"
+				])], 16)),
+				U.value && !C(e)(C(N), "empty") ? (v(), u("div", M, S(p.emptyMessage), 1)) : U.value && C(e)(C(N), "empty") ? (v(), c(x(C(t)(C(N), "empty")), { key: 4 })) : l("", !0),
+				C(e)(C(N), "afterOptions") ? (v(), c(x(C(t)(C(N), "afterOptions")), { key: 5 })) : l("", !0)
+			]),
+			_: 3
+		}, 8, [
+			"modelValue",
+			"anchor-el",
+			"placement",
+			"disable-auto-focus",
+			"custom-props"
+		]));
+	}
+});
+//#endregion
+export { N as default };

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

@@ -0,0 +1,13 @@
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { ListboxClasses, ListboxOwnProps } from '../listbox.types';
+type ListboxLibDefaults = LibDefaultsShape<ListboxOwnProps, "color">;
+type ListboxMerged = MergeLibDefaults<ListboxOwnProps, ListboxLibDefaults>;
+export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxLibDefaults): {
+    merged: import('vue').ComputedRef<ListboxMerged>;
+    checkClass: import('vue').ComputedRef<string | undefined>;
+    scrollBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    mergedClasses: import('vue').ComputedRef<Partial<ListboxClasses>>;
+    optionSelectedClass: import('vue').ComputedRef<string | undefined>;
+    optionHighlightedClass: import('vue').ComputedRef<string | undefined>;
+};
+export {};

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

@@ -0,0 +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 { cn as o, mergeBridgeUILayeredClasses as s, splitComponentProps as c } from "@bridge-ui/core";
+import { colorProps as l, invalidatedProps as u } from "@bridge-ui/core/Components/Listbox";
+//#region src/Components/Listbox/composables/useListbox.ts
+var d = [
+	"color",
+	"classes",
+	"maxHeight",
+	"customProps",
+	"invalidated",
+	"disableMaxHeight"
+];
+function f(f, p) {
+	let m = i(), h = r(() => c({
+		props: {
+			...m,
+			...f
+		},
+		bridgeKeys: d
+	})), { merged: g, entry: _ } = t({
+		libDefaults: p,
+		componentName: "Listbox",
+		props: () => h.value.componentProps
+	}), v = n({
+		entry: _,
+		props: () => h.value.componentProps
+	}), y = r(() => a(s(l, _.value?.customProps?.color), g.value.color ?? "primary")), b = r(() => s(u, _.value?.customProps?.invalidated)), x = r(() => g.value.invalidated ? b.value : y.value), S = r(() => x.value?.selected), C = r(() => x.value?.highlighted);
+	return {
+		merged: g,
+		checkClass: r(() => x.value?.check),
+		scrollBind: r(() => {
+			let t = g.value.maxHeight ?? "max-h-60", n = g.value.disableMaxHeight === !0;
+			return e(g.value.customProps?.scroll, {}, o({
+				"overflow-y-auto overscroll-contain": !n,
+				[t]: !n,
+				[v.value.scroll ?? ""]: !0
+			}));
+		}),
+		mergedClasses: v,
+		optionSelectedClass: S,
+		optionHighlightedClass: C
+	};
+}
+//#endregion
+export { f as useListbox };

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

@@ -0,0 +1,16 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+import { ListboxOption, ListboxValue } from '../listbox.types';
+export declare function findFirstEnabledOptionIndex(options: ListboxOption[]): number;
+export declare function findLastEnabledOptionIndex(options: ListboxOption[]): number;
+export declare function moveListboxHighlight(options: ListboxOption[], currentIndex: number, delta: number): number;
+export declare function getListboxOptionId(listboxId: string, index: number): string;
+export declare function getListboxActiveDescendantId(listboxId: string, highlightedIndex: number): string | undefined;
+export declare function useListboxNavigation(options: MaybeRefOrGetter<ListboxOption[]>, highlightedIndex: Ref<number>, listboxId: MaybeRefOrGetter<string>): {
+    moveHighlight: (delta: number) => void;
+    highlightLast: () => void;
+    resetHighlight: () => void;
+    highlightFirst: () => void;
+    activeDescendantId: import('vue').ComputedRef<string | undefined>;
+    getHighlightedOption: () => ListboxOption;
+    highlightCurrentSelection: (isSelected?: (value: ListboxValue) => boolean) => void;
+};

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

@@ -0,0 +1,62 @@
+import { computed as e, toValue as t } from "vue";
+//#region src/Components/Listbox/composables/useListboxNavigation.ts
+function n(e) {
+	return e.findIndex((e) => !e.disabled);
+}
+function r(e) {
+	for (let t = e.length - 1; t >= 0; --t) if (!e[t]?.disabled) return t;
+	return -1;
+}
+function i(e, t, i) {
+	if (!e.length) return -1;
+	if (t < 0) return i > 0 ? n(e) : r(e);
+	let a = t;
+	for (let t = 0; t < e.length; t += 1) if (a = (a + i + e.length) % e.length, !e[a]?.disabled) return a;
+	return -1;
+}
+function a(e, t) {
+	return `${e}-option-${t}`;
+}
+function o(e, t) {
+	if (!(t < 0)) return a(e, t);
+}
+function s(a, s, c) {
+	let l = e(() => o(t(c), s.value));
+	function u() {
+		s.value = n(t(a));
+	}
+	function d(e) {
+		let n = t(a);
+		if (e) {
+			let t = n.findIndex((t) => !t.disabled && e(t.value));
+			if (t >= 0) {
+				s.value = t;
+				return;
+			}
+		}
+		s.value = -1;
+	}
+	function f() {
+		s.value = n(t(a));
+	}
+	function p() {
+		s.value = r(t(a));
+	}
+	function m(e) {
+		s.value = i(t(a), s.value, e);
+	}
+	function h() {
+		return t(a)[s.value];
+	}
+	return {
+		moveHighlight: m,
+		highlightLast: p,
+		resetHighlight: u,
+		highlightFirst: f,
+		activeDescendantId: l,
+		getHighlightedOption: h,
+		highlightCurrentSelection: d
+	};
+}
+//#endregion
+export { n as findFirstEnabledOptionIndex, r as findLastEnabledOptionIndex, o as getListboxActiveDescendantId, a as getListboxOptionId, i as moveListboxHighlight, s as useListboxNavigation };

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

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

package/dist/Components/Listbox/index.js

@@ -0,0 +1,4 @@
+import { useListbox as e } from "./composables/useListbox.js";
+import { findFirstEnabledOptionIndex as t, findLastEnabledOptionIndex as n, getListboxActiveDescendantId as r, getListboxOptionId as i, moveListboxHighlight as a, useListboxNavigation as o } from "./composables/useListboxNavigation.js";
+import s from "./Listbox.js";
+export { s as Listbox, t as findFirstEnabledOptionIndex, n as findLastEnabledOptionIndex, r as getListboxActiveDescendantId, i as getListboxOptionId, a as moveListboxHighlight, e as useListbox, o as useListboxNavigation };

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

@@ -0,0 +1,170 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { ListboxColor, ListboxOption, ListboxValue, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+export interface ListboxColorOverrides {}
+export interface ListboxClasses {
+    /**
+     * Classes merged onto the check icon.
+     */
+    check?: string;
+    /**
+     * Classes merged onto keyboard-highlighted options.
+     */
+    optionHighlighted?: string;
+    /**
+     * Classes merged onto selected options.
+     */
+    optionSelected?: string;
+    /**
+     * Classes merged onto the scrollable options container.
+     */
+    scroll?: string;
+}
+export interface ListboxCustomProps {
+    /**
+     * Props forwarded to the floating menu panel.
+     */
+    content?: HTMLAttributes;
+    /**
+     * Props forwarded to the scrollable options container.
+     */
+    scroll?: HTMLAttributes;
+}
+export type { ListboxOption, ListboxValue } from '@bridge-ui/core';
+export interface ListboxEmits {
+    /**
+     * Emitted when the user activates an option.
+     */
+    select: [option: ListboxOption];
+    /**
+     * Emitted when open state should change (controlled state).
+     * Listen with `@show-change` / `v-on:show-change`.
+     */
+    "show-change": [show: boolean];
+}
+export interface ListboxOwnProps {
+    /**
+     * Element that anchors the floating panel (typically the field container).
+     */
+    anchorEl?: null | HTMLElement;
+    /**
+     * Classes for listbox parts.
+     */
+    classes?: ListboxClasses;
+    /**
+     * Color palette aligned with `FormField` (`primary`, `error`, …).
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<ListboxColor, ListboxColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     */
+    customProps?: ListboxCustomProps;
+    /**
+     * When true, the menu does not auto-focus the first item on open.
+     * Use when focus stays on a combobox input (e.g. searchable Select).
+     *
+     * @default false
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * When true, the options list is not height-limited.
+     *
+     * @default false
+     */
+    disableMaxHeight?: boolean;
+    /**
+     * Message when the options list is empty.
+     *
+     * @default "No options"
+     */
+    emptyMessage?: string;
+    /**
+     * Hides the empty-state message.
+     *
+     * @default false
+     */
+    hideEmptyMessage?: boolean;
+    /**
+     * Index of the keyboard-highlighted option.
+     *
+     * @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).
+     */
+    isSelected?: (value: ListboxValue) => boolean;
+    /**
+     * `id` of the element that labels the listbox (`aria-labelledby`).
+     */
+    labelledBy?: string;
+    /**
+     * Root id of the listbox (`aria-controls` on the combobox references this).
+     */
+    listboxId: string;
+    /**
+     * External loading state.
+     */
+    loading?: boolean;
+    /**
+     * Tailwind max-height class for the options scroll area (e.g. `max-h-80`).
+     *
+     * @default "max-h-60"
+     */
+    maxHeight?: string;
+    /**
+     * Whether multiple options can be selected.
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Options to render.
+     */
+    options: ListboxOption[];
+    /**
+     * Preferred placement of the panel relative to the anchor.
+     *
+     * @default "bottom-start"
+     */
+    placement?: PositionPlacement;
+    /**
+     * Shows a check icon on selected options.
+     *
+     * @default true
+     */
+    showCheckmark?: boolean;
+}
+export interface ListboxSlots {
+    /**
+     * Content below the list.
+     */
+    afterOptions?: Slot;
+    /**
+     * Content above the list.
+     */
+    beforeOptions?: Slot;
+    /**
+     * Custom empty-state content.
+     */
+    empty?: Slot;
+    /**
+     * Custom loading content.
+     */
+    loading?: Slot;
+    /**
+     * Custom option item content.
+     */
+    option?: Slot<{
+        option: ListboxOption;
+        selected: boolean;
+    }>;
+}
+export type ListboxProps = MergeHtmlProps<ListboxOwnProps, HTMLAttributes>;

package/dist/Components/Menu/Menu.js

@@ -0,0 +1,5 @@
+import e from "./Menu.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/Menu/Menu.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,36 @@
+import { MenuOwnProps, MenuSlots } from './menu.types';
+type __VLS_Slots = MenuSlots;
+type __VLS_Props = MenuOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+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;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => 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;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,80 @@
+import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp.js";
+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({
+	inheritAttrs: !1,
+	__name: "Menu",
+	props: /* @__PURE__ */ d({
+		anchorEl: { default: null },
+		classes: {},
+		closeOnClickAway: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnEscape: {
+			type: Boolean,
+			default: !0
+		},
+		customProps: {},
+		disableAutoFocus: {
+			type: Boolean,
+			default: !1
+		},
+		disableScrollLock: {
+			type: Boolean,
+			default: !0
+		},
+		keepMounted: {
+			type: Boolean,
+			default: !1
+		},
+		offset: { default: 4 },
+		onShowChange: {},
+		persistent: {
+			type: Boolean,
+			default: !1
+		},
+		placement: { default: "bottom-start" },
+		rounded: { default: "md" },
+		shadow: { default: "md" },
+		strategy: { default: "fixed" },
+		teleportTo: {
+			type: [Boolean, String],
+			default: "body"
+		}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	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, {
+			offset: 4,
+			shadow: "md",
+			rounded: "md",
+			strategy: "fixed",
+			teleportTo: "body",
+			closeOnEscape: !0,
+			closeOnClickAway: !0,
+			disableScrollLock: !0,
+			placement: "bottom-start"
+		}, {
+			show: _(u, "modelValue"),
+			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({
+			key: 0,
+			ref: g(O)
+		}, g(E)), [(m(), o(h(g(t)(g(y), "default"))))], 16)) : s("", !0)], 8, ["to", "disabled"]))], 64));
+	}
+});
+//#endregion
+export { y as default };

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

@@ -0,0 +1,54 @@
+import { ComponentPublicInstance, Ref } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { MenuOwnProps, MenuProps } from '../menu.types';
+type MenuLibDefaults = LibDefaultsShape<MenuOwnProps, "offset" | "shadow" | "rounded" | "strategy" | "placement" | "teleportTo" | "closeOnEscape" | "closeOnClickAway" | "disableScrollLock">;
+type MenuMerged = MergeLibDefaults<MenuOwnProps, MenuLibDefaults>;
+export type MenuOptions = {
+    /**
+     * Called when the menu requests to close.
+     * Sugar for `onShowChange(false)`.
+     */
+    onClose?: () => void;
+    /**
+     * Called when `show` should change (controlled state).
+     */
+    onShowChange?: (show: boolean) => void;
+    /**
+     * Whether the menu is visible (`defineModel()` / `v-model`).
+     *
+     * @default false
+     */
+    show?: Ref<boolean>;
+};
+export declare function useMenu(props: MenuOwnProps, libDefaults: MenuLibDefaults, options?: MenuOptions): {
+    merged: import('vue').ComputedRef<MenuMerged>;
+    menuId: string;
+    mounted: Ref<boolean, boolean>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "closeOnClickAway" | "closeOnEscape" | "disableAutoFocus" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "strategy" | "teleportTo">, "anchorEl" | "onShowChange">>>;
+    isPortaled: import('vue').ComputedRef<boolean>;
+    triggerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        tabindex: number;
+        role: string;
+        "aria-expanded": boolean;
+        onKeydown: (event: KeyboardEvent) => void;
+        "aria-haspopup": "menu";
+        onClickCapture: () => void;
+        "aria-controls": string | undefined;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    contentBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        id: string;
+        role: string;
+        onKeydown: (event: KeyboardEvent) => void;
+        style: {
+            zIndex: number;
+        };
+        "aria-hidden": boolean | undefined;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    setTriggerRef: (element: null | Element | ComponentPublicInstance) => void;
+    setContentRef: (element: null | Element | ComponentPublicInstance) => void;
+};
+export {};