@ac-design/design-system 0.0.0-stage → 1.0.1

package/dist/lib/components/AcTooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,117 @@
+import { Teleport as e, Transition as t, computed as n, createBlock as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, nextTick as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, onUpdated as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, useId as v, useSlots as y, vShow as b, watch as x, withCtx as S, withDirectives as C } from "vue";
+//#region src/lib/components/AcTooltip.vue?vue&type=script&setup=true&lang.ts
+var w = ["data-side"], T = 6, E = 8, D = /*@__PURE__*/ c({
+	__name: "AcTooltip",
+	props: {
+		content: { default: "" },
+		placement: { default: "top" },
+		delay: { default: 300 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(c) {
+		let D = c, O = y(), k = {
+			top: "bottom",
+			bottom: "top",
+			left: "right",
+			right: "left"
+		}, A = `${v()}-tip`, j = h(null), M = h(null), N = h(!1), P = h(D.placement), F = h({
+			top: 0,
+			left: 0
+		}), I, L, R = null, z = n(() => !D.disabled && !!(D.content || O.content));
+		function B() {
+			let e = j.value;
+			return e?.querySelector("button, a[href], input, select, textarea, [tabindex]") ?? e?.firstElementChild ?? null;
+		}
+		function V() {
+			let e = B();
+			if (R && R !== e && H(R), R = e, !e) return;
+			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== A);
+			z.value && t.push(A), t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
+		}
+		function H(e) {
+			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== A);
+			t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
+		}
+		function U(e) {
+			clearTimeout(L), z.value && !N.value && (clearTimeout(I), I = setTimeout(async () => {
+				N.value = !0, await l(), K();
+			}, e));
+		}
+		function W(e = 0) {
+			clearTimeout(I), clearTimeout(L), e ? L = setTimeout(() => N.value = !1, e) : N.value = !1;
+		}
+		function G(e, t, n, r) {
+			return e === "top" ? t.top - T - r >= E : e === "bottom" ? t.bottom + T + r <= window.innerHeight - E : e === "left" ? t.left - T - n >= E : t.right + T + n <= window.innerWidth - E;
+		}
+		function K() {
+			let e = B() ?? j.value;
+			if (!e || !M.value) return;
+			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = M.value, i = D.placement, a = G(i, t, n, r) || !G(k[i], t, n, r) ? i : k[i], o = (e, t) => Math.max(E, Math.min(e, t - E));
+			P.value = a, F.value = a === "top" || a === "bottom" ? {
+				top: a === "top" ? t.top - T - r : t.bottom + T,
+				left: o(t.left + t.width / 2 - n / 2, window.innerWidth - n)
+			} : {
+				top: o(t.top + t.height / 2 - r / 2, window.innerHeight - r),
+				left: a === "left" ? t.left - T - n : t.right + T
+			};
+		}
+		function q(e) {
+			e.pointerType !== "touch" && U(D.delay);
+		}
+		function J(e) {
+			e.target.matches(":focus-visible") && U(0);
+		}
+		function Y() {
+			W();
+		}
+		function X(e) {
+			e.key === "Escape" && N.value && W();
+		}
+		return x(N, (e) => {
+			e ? (document.addEventListener("keydown", X), window.addEventListener("scroll", Y, !0)) : (document.removeEventListener("keydown", X), window.removeEventListener("scroll", Y, !0));
+		}), x(z, (e) => {
+			V(), e || W();
+		}), f(V), p(V), d(() => {
+			W(), document.removeEventListener("keydown", X), window.removeEventListener("scroll", Y, !0), R && H(R);
+		}), (n, l) => (m(), i("span", {
+			ref_key: "root",
+			ref: j,
+			class: "inline-flex max-w-full",
+			"data-ac-ds": "",
+			"data-testid": "ac-tooltip",
+			onPointerenter: q,
+			onPointerleave: l[2] ||= (e) => W(100),
+			onPointerdown: l[3] ||= (e) => W(),
+			onFocusin: J,
+			onFocusout: l[4] ||= (e) => W()
+		}, [g(n.$slots, "default"), (m(), r(e, { to: "body" }, [s(t, {
+			"enter-active-class": "transition-opacity duration-100 ease-out",
+			"enter-from-class": "opacity-0",
+			"leave-active-class": "transition-opacity duration-75 ease-in",
+			"leave-to-class": "opacity-0"
+		}, {
+			default: S(() => [C(a("div", {
+				id: A,
+				ref_key: "tip",
+				ref: M,
+				role: "tooltip",
+				class: "fixed z-[100] w-max max-w-64 rounded-6 bg-slate-10 px-2 py-1 text-xs font-medium text-slate-95 shadow-md dark:bg-slate-80 dark:text-slate-10 dark:ring-1 dark:ring-slate-70",
+				"data-side": P.value,
+				style: u({
+					top: `${F.value.top}px`,
+					left: `${F.value.left}px`
+				}),
+				"data-ac-ds": "",
+				"data-testid": "ac-tooltip-panel",
+				onPointerenter: l[0] ||= (e) => U(0),
+				onPointerleave: l[1] ||= (e) => W(100)
+			}, [g(n.$slots, "content", {}, () => [o(_(c.content), 1)])], 44, w), [[b, N.value]])]),
+			_: 3
+		})]))], 544));
+	}
+});
+//#endregion
+export { D as default };

package/dist/lib/components/AcUsageCard.js

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

package/dist/lib/components/AcUsageCard.vue.d.ts

@@ -0,0 +1,85 @@
+import type { Component } from "vue";
+export interface UsageBreakdownRow {
+    /** Row name, e.g. a namespace, database or "CPU (core-month)". */
+    label: string;
+    /** A Lucide icon before the label. */
+    icon?: Component;
+    /** One value per column after the label. Numbers are formatted with `format`. */
+    values: (string | number)[];
+}
+export interface Props {
+    /** What is measured, e.g. "Storage", "CPU" or "Billable usage". Also the meter's accessible name. */
+    title: string;
+    /** A muted line under the title, e.g. "Across 6 databases in demo". */
+    description?: string;
+    /** The period the numbers cover, shown at the top right, e.g. "Sep 2026" or "This billing cycle". */
+    period?: string;
+    /** A Lucide icon shown in a tinted tile before the title. Or use the `icon` slot. */
+    icon?: Component;
+    /** Amount used, in `unit`. Leave unset for a card that only shows a breakdown. */
+    used?: number;
+    /** The quota or limit, in `unit`. Without it there's no meter and the card reads "No limit". */
+    limit?: number;
+    /** Unit after the numbers, e.g. "GiB", "cores" or "databases". */
+    unit?: string;
+    /** Formats every number on the card. Defaults to the browser locale with up to 2 decimals. */
+    format?: (value: number) => string;
+    /** Percentage of the limit where the meter turns warning and a "Near limit" badge appears. */
+    warningAt?: number;
+    /** Percentage of the limit where the meter turns danger and an "At limit" badge appears. */
+    dangerAt?: number;
+    /** Marks `warningAt` and `dangerAt` on the meter. */
+    showThresholds?: boolean;
+    /** Rows of a breakdown table under the meter: `{ label, icon?, values }`. Old UsageTableCard `tbody`. */
+    breakdown?: UsageBreakdownRow[];
+    /** Column headings of the breakdown, starting with the label column. Old UsageTableCard `thead`. */
+    breakdownHeaders?: string[];
+    /** Shows placeholder bars instead of the numbers while they load. Old `isLoaderActive`. */
+    loading?: boolean;
+    /** Makes the card a `RouterLink` to this route. Needs vue-router in the app; without it a string is used as `href`. */
+    to?: string | Record<string, unknown>;
+    /** Makes the card a plain link. */
+    href?: string;
+    /** Link target for `href`, e.g. `_blank`. */
+    target?: string;
+}
+type __VLS_Slots = {
+    /** Replaces the `icon` tile. */
+    icon?: () => unknown;
+    /** Buttons at the top right, e.g. "Upgrade plan". */
+    actions?: () => unknown;
+    /** Extra content between the meter and the breakdown. */
+    default?: () => unknown;
+    /** A row at the bottom, e.g. "Resets on Oct 1". */
+    footer?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (e: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClick?: ((e: MouseEvent) => any) | undefined;
+}>, {
+    description: string;
+    icon: Component;
+    target: string;
+    format: (value: number) => string;
+    href: string;
+    to: string | Record<string, unknown>;
+    loading: boolean;
+    unit: string;
+    period: string;
+    used: number;
+    limit: number;
+    warningAt: number;
+    dangerAt: number;
+    showThresholds: boolean;
+    breakdown: UsageBreakdownRow[];
+    breakdownHeaders: 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/lib/components/AcUsageCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,230 @@
+import e from "./AcBadge.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, getCurrentInstance as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useId as ee, useSlots as te, withCtx as ne } from "vue";
+//#region src/lib/components/AcUsageCard.vue?vue&type=script&setup=true&lang.ts
+var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col gap-4 p-4" }, ae = { class: "flex min-w-0 items-start gap-3" }, oe = {
+	key: 0,
+	class: "inline-flex size-8 shrink-0 items-center justify-center rounded-8 bg-primary-95 text-primary-30 [&_svg]:size-4",
+	"aria-hidden": "true"
+}, se = { class: "min-w-0 flex-1" }, ce = ["id"], y = ["title"], b = {
+	key: 1,
+	class: "relative z-10 flex shrink-0 flex-wrap items-center justify-end gap-2"
+}, x = {
+	key: 0,
+	class: "text-xs text-muted"
+}, S = {
+	key: 0,
+	class: "flex min-w-0 flex-col gap-2"
+}, C = { class: "flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1" }, w = { class: "flex min-w-0 flex-wrap items-baseline gap-x-1.5" }, le = { class: "text-3xl font-semibold text-heading" }, ue = {
+	key: 0,
+	class: "text-base text-muted"
+}, T = {
+	key: 1,
+	class: "text-base text-muted"
+}, E = [
+	"aria-labelledby",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext"
+], D = {
+	key: 1,
+	class: "text-base text-body"
+}, O = {
+	key: 0,
+	class: "ac-scrollbar border-t border-border-light"
+}, k = { class: "w-full text-left text-base" }, A = {
+	key: 0,
+	class: "text-xs text-muted"
+}, j = {
+	scope: "row",
+	class: "px-4 py-2.5 font-normal text-body"
+}, M = { class: "flex min-w-0 items-center gap-2" }, N = { class: "truncate" }, P = {
+	key: 0,
+	class: "ac-skeleton-bone ml-auto block h-3 w-14 rounded-4"
+}, F = {
+	key: 1,
+	class: "relative z-10 mt-auto flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1.5 border-t border-border-light px-4 py-3 text-xs text-muted"
+}, I = /*@__PURE__*/ c({
+	__name: "AcUsageCard",
+	props: {
+		title: {},
+		description: { default: "" },
+		period: { default: "" },
+		icon: { default: void 0 },
+		used: { default: void 0 },
+		limit: { default: void 0 },
+		unit: { default: "" },
+		format: {
+			type: Function,
+			default: void 0
+		},
+		warningAt: { default: 80 },
+		dangerAt: { default: 95 },
+		showThresholds: {
+			type: Boolean,
+			default: !0
+		},
+		breakdown: { default: () => [] },
+		breakdownHeaders: { default: () => [] },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		to: { default: void 0 },
+		href: { default: void 0 },
+		target: { default: void 0 }
+	},
+	emits: ["click"],
+	setup(c, { emit: I }) {
+		let L = c, R = I, z = te(), de = {
+			ok: {
+				fill: "bg-primary",
+				track: "bg-primary-93",
+				text: "text-muted",
+				badge: ""
+			},
+			warning: {
+				fill: "bg-warning",
+				track: "bg-yellow-93",
+				text: "text-yellow-20",
+				badge: "Near limit"
+			},
+			danger: {
+				fill: "bg-danger",
+				track: "bg-red-93",
+				text: "text-red-30",
+				badge: "At limit"
+			},
+			over: {
+				fill: "bg-danger",
+				track: "bg-red-93",
+				text: "text-red-30",
+				badge: "Over limit"
+			}
+		}, B = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }), V = l(), H = V?.appContext.components.RouterLink, U = ee(), W = n(() => typeof L.used == "number" && Number.isFinite(L.used)), G = n(() => W.value && typeof L.limit == "number" && L.limit > 0), K = n(() => G.value ? L.used / L.limit * 100 : 0), q = n(() => G.value ? L.used > L.limit ? "over" : K.value >= L.dangerAt ? "danger" : K.value >= L.warningAt ? "warning" : "ok" : "ok"), J = n(() => de[q.value]), fe = n(() => L.showThresholds ? [L.warningAt, L.dangerAt].filter((e) => e > 0 && e < 100) : []), Y = n(() => {
+			if (!G.value) return "";
+			let e = L.limit - L.used;
+			return e >= 0 ? `${Q(e)} left` : `${Q(-e)} over the limit`;
+		}), pe = n(() => {
+			let e = `${Q(L.used ?? 0)} of ${Q(L.limit ?? 0)}, ${Math.round(K.value)}%`;
+			return J.value.badge ? `${e}, ${J.value.badge.toLowerCase()}` : e;
+		}), X = n(() => {
+			if (L.to !== void 0 && H) return {
+				is: H,
+				to: L.to
+			};
+			let e = L.href ?? (typeof L.to == "string" ? L.to : void 0);
+			return e ? {
+				is: "a",
+				href: e,
+				target: L.target,
+				rel: L.target === "_blank" ? "noopener noreferrer" : void 0
+			} : null;
+		});
+		function Z(e) {
+			return typeof e == "number" ? L.format ? L.format(e) : B.format(e) : e;
+		}
+		function Q(e) {
+			return L.unit ? `${Z(e)} ${L.unit}` : String(Z(e));
+		}
+		function $() {
+			return !X.value && !!V?.vnode.props?.onClick;
+		}
+		function me(e) {
+			R("click", e);
+		}
+		return (n, l) => (p(), a("section", {
+			class: d(["relative flex min-w-0 flex-col rounded-10 border border-border bg-surface shadow-xs transition-[border-color,box-shadow] duration-150 has-[[data-ac-card-link]:focus-visible]:ring-[3px] has-[[data-ac-card-link]:focus-visible]:ring-ring", (X.value || $()) && "hover:border-border-dark hover:shadow-sm"]),
+			"aria-labelledby": `${v(U)}-title`,
+			"aria-busy": c.loading || void 0,
+			"data-ac-ds": "",
+			"data-testid": "ac-usage-card"
+		}, [
+			o("div", ie, [
+				o("header", ae, [
+					z.icon || c.icon ? (p(), a("span", oe, [h(n.$slots, "icon", {}, () => [(p(), r(g(c.icon)))])])) : i("", !0),
+					o("div", se, [o("h3", {
+						id: `${v(U)}-title`,
+						class: "truncate text-lg leading-6 font-semibold tracking-[-0.01em] text-heading"
+					}, [X.value || $() ? (p(), r(g(X.value ? X.value.is : "button"), u({ key: 0 }, X.value ? {
+						...X.value,
+						is: void 0
+					} : { type: "button" }, {
+						"data-ac-card-link": "",
+						class: "cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-10",
+						onClick: me
+					}), {
+						default: ne(() => [s(_(c.title), 1)]),
+						_: 1
+					}, 16)) : (p(), a(t, { key: 1 }, [s(_(c.title), 1)], 64))], 8, ce), c.description ? (p(), a("p", {
+						key: 0,
+						class: "truncate text-xs text-muted",
+						title: c.description
+					}, _(c.description), 9, y)) : i("", !0)]),
+					c.period || J.value.badge || z.actions ? (p(), a("div", b, [
+						c.period ? (p(), a("span", x, _(c.period), 1)) : i("", !0),
+						J.value.badge && !c.loading ? (p(), r(e, {
+							key: 1,
+							label: J.value.badge,
+							color: q.value === "warning" ? "warning" : "danger",
+							variant: "light",
+							rounded: "",
+							dot: ""
+						}, null, 8, ["label", "color"])) : i("", !0),
+						h(n.$slots, "actions")
+					])) : i("", !0)
+				]),
+				W.value || c.loading && c.breakdown.length === 0 ? (p(), a("div", S, [c.loading ? (p(), a(t, { key: 0 }, [l[0] ||= o("span", { class: "ac-skeleton-bone block h-6 w-2/5 rounded-4" }, null, -1), l[1] ||= o("span", { class: "ac-skeleton-bone block h-2 w-full rounded-full" }, null, -1)], 64)) : (p(), a(t, { key: 1 }, [
+					o("div", C, [o("p", w, [o("span", le, _(Z(c.used)), 1), G.value ? (p(), a("span", ue, "of " + _(Q(c.limit)), 1)) : (p(), a("span", T, [
+						s(_(c.unit), 1),
+						c.unit ? (p(), a(t, { key: 0 }, [s(" · ")], 64)) : i("", !0),
+						l[2] ||= s("No limit", -1)
+					]))]), G.value ? (p(), a("span", {
+						key: 0,
+						class: d(["text-base font-medium tabular-nums", q.value === "ok" ? "text-heading" : J.value.text])
+					}, _(Math.round(K.value)) + "% ", 3)) : i("", !0)]),
+					G.value ? (p(), a("div", {
+						key: 0,
+						role: "meter",
+						"aria-labelledby": `${v(U)}-title`,
+						"aria-valuemin": "0",
+						"aria-valuemax": c.limit,
+						"aria-valuenow": Math.min(c.used, c.limit),
+						"aria-valuetext": pe.value,
+						class: d(["relative h-2 w-full overflow-hidden rounded-full", J.value.track])
+					}, [o("div", {
+						class: d(["h-full rounded-full transition-[width,background-color] duration-300 ease-out motion-reduce:transition-none", J.value.fill]),
+						style: f({ width: `${Math.min(100, K.value)}%` })
+					}, null, 6), (p(!0), a(t, null, m(fe.value, (e) => (p(), a("span", {
+						key: e,
+						class: "absolute inset-y-0 w-0.5 -translate-x-1/2 bg-surface",
+						style: f({ left: `${e}%` }),
+						"aria-hidden": "true"
+					}, null, 4))), 128))], 10, E)) : i("", !0),
+					Y.value ? (p(), a("p", {
+						key: 1,
+						class: d(["text-xs", J.value.text])
+					}, _(Y.value), 3)) : i("", !0)
+				], 64))])) : i("", !0),
+				z.default ? (p(), a("div", D, [h(n.$slots, "default")])) : i("", !0)
+			]),
+			c.breakdown.length ? (p(), a("div", O, [o("table", k, [c.breakdownHeaders.length ? (p(), a("thead", A, [o("tr", null, [(p(!0), a(t, null, m(c.breakdownHeaders, (e, t) => (p(), a("th", {
+				key: t,
+				scope: "col",
+				class: d(["h-9 px-4 font-medium whitespace-nowrap", t > 0 ? "text-right" : "text-left"])
+			}, _(e), 3))), 128))])])) : i("", !0), o("tbody", null, [(p(!0), a(t, null, m(c.breakdown, (e, n) => (p(), a("tr", {
+				key: `${e.label}${n}`,
+				class: d(["border-t border-border-light", !c.breakdownHeaders.length && n === 0 && "border-t-0"])
+			}, [o("th", j, [o("span", M, [e.icon ? (p(), r(g(e.icon), {
+				key: 0,
+				class: "size-4 shrink-0 text-muted",
+				"aria-hidden": "true"
+			})) : i("", !0), o("span", N, _(e.label), 1)])]), (p(!0), a(t, null, m(e.values, (e, n) => (p(), a("td", {
+				key: n,
+				class: "px-4 py-2.5 text-right font-medium whitespace-nowrap text-heading tabular-nums"
+			}, [c.loading ? (p(), a("span", P)) : (p(), a(t, { key: 1 }, [s(_(Z(e)), 1)], 64))]))), 128))], 2))), 128))])])])) : i("", !0),
+			z.footer ? (p(), a("div", F, [h(n.$slots, "footer")])) : i("", !0)
+		], 10, re));
+	}
+});
+//#endregion
+export { I as default };

package/dist/lib/components/AcUserMenu.js

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

package/dist/lib/components/AcUserMenu.vue.d.ts

@@ -0,0 +1,77 @@
+import type { Component } from "vue";
+export interface UserMenuItem {
+    /** Text of the row. */
+    label: string;
+    /** A Lucide icon component. */
+    icon?: Component;
+    /** Route; rendered as `RouterLink` when vue-router is installed. */
+    to?: string | object;
+    /** Plain URL. */
+    href?: string;
+    /** Greys the row out. */
+    disabled?: boolean;
+}
+export interface Props {
+    /** The person's name or username. The avatar shows its initials. */
+    name: string;
+    /** Second line in the menu header, usually the email address. */
+    email?: string;
+    /** Profile photo. Falls back to initials when it's missing or fails to load. */
+    avatarUrl?: string;
+    /** Makes the menu header a link to the profile page. */
+    profileUrl?: string;
+    /** Rows between the header and Sign out: `{ label, icon?, to?, href?, disabled? }`. Emits `select`. Use the default slot for anything custom. */
+    items?: UserMenuItem[];
+    /** Adds the Light / Dark / System switch (`AcThemeMode`). */
+    showThemeMode?: boolean;
+    /** Adds a text-size switch (`AcFontScale`) that scales the whole interface. */
+    showFontScale?: boolean;
+    /** Shows the name next to the avatar in the trigger (from 640px up). */
+    showName?: boolean;
+    /** Makes Sign out a link to this URL, e.g. `${accountsDomain}/user/logout`. `logout` is emitted either way. */
+    logoutUrl?: string;
+    /** Text of the sign-out row. */
+    logoutLabel?: string;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Custom rows after `items`. Give each focusable row `role="menuitem"`, `tabindex="-1"` and the `itemClass` classes; call `close()` after an action. */
+    default?: (props: {
+        close: () => void;
+        itemClass: string;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the menu is open. Bind with `v-model:open`. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: UserMenuItem) => any;
+    "update:open": (value: boolean) => any;
+    "set:theme": (theme: "light" | "dark") => any;
+    logout: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((item: UserMenuItem) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    "onSet:theme"?: ((theme: "light" | "dark") => any) | undefined;
+    onLogout?: (() => any) | undefined;
+}>, {
+    items: UserMenuItem[];
+    email: string;
+    avatarUrl: string;
+    profileUrl: string;
+    showThemeMode: boolean;
+    showFontScale: boolean;
+    showName: boolean;
+    logoutUrl: string;
+    logoutLabel: 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;
+    };
+};