@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -1,7 +1,7 @@
 export interface Props {
-    /** Heading, e.g. "Delete Database". */
+    /** Heading, e.g. "Delete database". */
     title?: string;
-    /** The question. The item name is shown in bold after it. */
+    /** The question. The item name follows it in bold monospace. */
     message?: string;
     /** Name of the thing being deleted, e.g. `demo-postgres`. */
     itemName?: string;
@@ -9,7 +9,7 @@ export interface Props {
     detail?: string;
     /** Label of the destructive button. */
     confirmText?: string;
-    /** Requires typing `itemName` before the delete button enables. Use for irreversible deletes. */
+    /** Shows `itemName` in a code chip and requires typing it before the delete button enables. Use for irreversible deletes. */
     confirmByTyping?: boolean;
     /** Shows a spinner on the delete button and blocks closing while the request runs. */
     loading?: boolean;
@@ -36,9 +36,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     title: string;
     loading: boolean;
     message: string;
+    confirmText: string;
     itemName: string;
     detail: string;
-    confirmText: string;
     confirmByTyping: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,22 +1,19 @@
-import e from "./AcButton.js";
+import e from "./AcSpinner.js";
 import t from "./AcModal.js";
 import n from "./AcInput.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as _, useModel as v, watch as y, withCtx as b } from "vue";
-import { Trash2 as x } from "@lucide/vue";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, useModel as v, watch as y, withCtx as b } from "vue";
 //#region src/lib/components/AcDeleteModal.vue?vue&type=script&setup=true&lang.ts
-var S = { class: "flex gap-4" }, C = {
-	class: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-red-95 text-red-40 ring-8 ring-red-97",
-	"aria-hidden": "true"
-}, w = { class: "min-w-0 flex-1 pt-0.5" }, T = { class: "text-lg leading-6 text-heading" }, E = { class: "font-semibold break-all" }, D = {
+var x = {
+	class: "flex flex-col gap-5",
+	"data-ac-ds": "",
+	"data-testid": "ac-delete-modal"
+}, S = { class: "text-lg text-muted" }, C = { class: "font-mono font-semibold break-all text-heading" }, w = {
 	key: 0,
-	class: "mt-1 text-base text-label"
-}, O = {
-	key: 1,
-	class: "mt-4"
-}, k = { class: "mb-2 text-xs text-label" }, A = { class: "rounded-4 bg-surface-muted px-1 py-0.5 font-mono text-heading ring-1 ring-border" }, j = {
-	key: 2,
-	class: "mt-4"
-}, M = /*@__PURE__*/ d({
+	class: "mt-2 text-base text-muted"
+}, T = {
+	key: 0,
+	class: "flex flex-col gap-2"
+}, E = { class: "self-start rounded-8 bg-surface-sunken px-2.5 py-1.5 font-mono text-base break-all text-heading" }, D = { key: 1 }, O = ["disabled"], k = ["disabled", "aria-busy"], A = "inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-10 border px-4 text-lg whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", j = /*@__PURE__*/ d({
 	__name: "AcDeleteModal",
 	props: /*@__PURE__*/ f({
 		title: { default: "Delete" },
@@ -41,62 +38,62 @@ var S = { class: "flex gap-4" }, C = {
 	}),
 	emits: /*@__PURE__*/ f(["confirm", "cancel"], ["update:open"]),
 	setup(d, { emit: f }) {
-		let M = d, N = f, P = v(d, "open"), F = m("");
-		y(P, (e) => e && (F.value = ""));
-		let I = i(() => !M.confirmByTyping || F.value === M.itemName), L = () => {
-			P.value = !1, N("cancel");
-		};
-		return (i, f) => (p(), a(t, {
-			open: P.value,
-			"onUpdate:open": f[2] ||= (e) => P.value = e,
+		let j = d, M = v(d, "open"), N = f, P = h("");
+		y(M, (e) => e && (P.value = ""));
+		let F = i(() => !j.confirmByTyping || P.value === j.itemName);
+		function I() {
+			M.value = !1, N("cancel");
+		}
+		return (i, f) => (m(), a(t, {
+			open: M.value,
+			"onUpdate:open": f[2] ||= (e) => M.value = e,
 			title: d.title,
 			size: "small",
+			variant: "plain",
 			closable: !d.loading,
 			"close-on-outside-click": !d.loading,
 			onClose: f[3] ||= (e) => N("cancel")
 		}, {
-			footer: b(() => [u(e, {
-				title: "Cancel",
-				color: "white",
+			footer: b(() => [c("button", {
+				type: "button",
+				class: p([A, "border-border bg-transparent text-heading hover:bg-surface-sunken focus-visible:ring-ring"]),
 				disabled: d.loading,
 				"data-ac-ds": "",
 				"data-testid": "ac-delete-modal-cancel",
-				onClick: L
-			}, null, 8, ["disabled"]), u(e, {
-				title: d.confirmText,
-				color: "danger",
-				loading: d.loading,
-				disabled: !I.value,
+				onClick: I
+			}, " Cancel ", 8, O), c("button", {
+				type: "button",
+				class: p([[A, d.loading && "pointer-events-none"], "border-transparent bg-danger text-white hover:bg-danger-hover focus-visible:ring-danger"]),
+				disabled: !F.value || void 0,
+				"aria-busy": d.loading || void 0,
 				"data-ac-ds": "",
 				"data-testid": "ac-delete-modal-confirm",
-				onClick: f[1] ||= (e) => N("confirm", d.itemName)
-			}, null, 8, [
-				"title",
-				"loading",
-				"disabled"
-			])]),
-			default: b(() => [c("div", S, [c("span", C, [u(_(x), {
-				class: "size-5",
-				"aria-hidden": "true"
-			})]), c("div", w, [
-				c("p", T, [
-					l(g(d.message), 1),
-					d.itemName ? (p(), s(r, { key: 0 }, [f[4] ||= l(g(" "), -1), c("strong", E, g(d.itemName), 1)], 64)) : o("", !0),
+				onClick: f[1] ||= (e) => !d.loading && N("confirm", d.itemName)
+			}, [d.loading ? (m(), a(e, {
+				key: 0,
+				class: "-ml-0.5",
+				label: ""
+			})) : o("", !0), l(" " + _(d.confirmText), 1)], 10, k)]),
+			default: b(() => [c("div", x, [
+				c("div", null, [c("p", S, [
+					l(_(d.message), 1),
+					d.itemName ? (m(), s(r, { key: 0 }, [f[4] ||= l(_(" "), -1), c("strong", C, _(d.itemName), 1)], 64)) : o("", !0),
 					f[5] ||= l("? ", -1)
-				]),
-				d.detail ? (p(), s("p", D, g(d.detail), 1)) : o("", !0),
-				d.confirmByTyping && d.itemName ? (p(), s("div", O, [c("p", k, [
-					f[6] ||= l(" Type ", -1),
-					c("code", A, g(d.itemName), 1),
-					f[7] ||= l(" to confirm. ", -1)
-				]), u(n, {
-					modelValue: F.value,
-					"onUpdate:modelValue": f[0] ||= (e) => F.value = e,
-					label: "Resource name",
-					autocomplete: "off"
-				}, null, 8, ["modelValue"])])) : o("", !0),
-				i.$slots.default ? (p(), s("div", j, [h(i.$slots, "default")])) : o("", !0)
-			])])]),
+				]), d.detail ? (m(), s("p", w, _(d.detail), 1)) : o("", !0)]),
+				d.confirmByTyping && d.itemName ? (m(), s("div", T, [
+					f[6] ||= c("p", { class: "text-base text-muted" }, "To confirm, type the name below.", -1),
+					c("code", E, _(d.itemName), 1),
+					u(n, {
+						modelValue: P.value,
+						"onUpdate:modelValue": f[0] ||= (e) => P.value = e,
+						class: "mt-3",
+						label: "Resource name",
+						placeholder: "Enter the name",
+						autocomplete: "off"
+					}, null, 8, ["modelValue"])
+				])) : o("", !0),
+				i.$slots.default ? (m(), s("div", D, [g(i.$slots, "default")])) : o("", !0)
+			])]),
 			_: 3
 		}, 8, [
 			"open",
@@ -107,4 +104,4 @@ var S = { class: "flex gap-4" }, C = {
 	}
 });
 //#endregion
-export { M as default };
+export { j as default };

package/dist/lib/components/AcDonutChart.js

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

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

@@ -0,0 +1,83 @@
+import type { ChartTooltipSlotProps } from "../charts/ChartFrame.vue";
+import type { ChartRenderer } from "../charts/echarts";
+import type { ChartAccessor, ChartCategory, ChartDatum } from "../charts/shared";
+export interface Props {
+    /** One row per segment, e.g. `{ engine: "Postgres", count: 42 }`. */
+    data: ChartDatum[];
+    /** The segment's key: a field name or a function. Also its name unless `categories` gives one. */
+    index?: ChartAccessor<string>;
+    /** The segment's size: a field name or a function. */
+    value?: ChartAccessor<number>;
+    /** Names and colours per segment key: `{ postgres: { name: "Postgres", color: "chart-1" } }`. Without it, keys are the names and colours follow `chart-1`, `chart-2`… in row order. */
+    categories?: Record<string, ChartCategory>;
+    /** Plot height in px; the ring's diameter fits it. */
+    height?: number;
+    /** Ring thickness in px. `0` draws a pie. */
+    arcWidth?: number;
+    /** Draws the top half of the ring only, like a gauge, e.g. for a quota. The centre value sits under the arc. */
+    half?: boolean;
+    /** Formats values in the legend, tooltip, centre and data table. Defaults to compact numbers: `1.2K`. */
+    valueFormatter?: (value: number) => string;
+    /** Legend to the `right` (it wraps below on narrow screens), `top`, `bottom`, or `none`. Clicking an entry hides or shows that segment. */
+    legend?: "top" | "bottom" | "right" | "none";
+    /** Shows each segment's value in the legend. */
+    legendValues?: boolean;
+    /** Small text under the centre value, e.g. "Databases". */
+    centerLabel?: string;
+    /** Big text in the ring's centre, e.g. the total. Use the `center` slot for anything richer. */
+    centerValue?: string | number;
+    /** Prints each segment's share (`38%`) beside the ring. Segments under 4% are left unlabelled so labels don't collide. */
+    arcLabels?: boolean;
+    /** Shows a tooltip with the segment's value and share on hover. */
+    tooltip?: boolean;
+    /** Shows a skeleton of the same height while data loads. */
+    loading?: boolean;
+    /** Text shown in place of the ring when `data` is empty or every value is 0. */
+    emptyText?: string;
+    /** Accessible name, e.g. "Databases by engine". Show the visible title in the surrounding card. */
+    title?: string;
+    /** A sentence for screen readers on what the chart shows. Defaults to each segment's share. */
+    description?: string;
+    /** `canvas` (default) or `svg`, which is crisper when printed or zoomed. */
+    renderer?: ChartRenderer;
+    /** Sweeps the segments in and animates changes. Always off when the viewer asks for reduced motion. */
+    animation?: boolean;
+}
+type __VLS_Slots = {
+    /** Content in the ring's centre. Gets the visible total, raw and formatted. */
+    center?: (props: {
+        total: number;
+        formatted: string;
+    }) => unknown;
+    /** Replaces the tooltip body for the hovered segment. */
+    tooltip?: (props: ChartTooltipSlotProps) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    legend: "top" | "bottom" | "right" | "none";
+    title: string;
+    value: ChartAccessor<number>;
+    description: string;
+    height: number;
+    loading: boolean;
+    animation: boolean;
+    index: ChartAccessor<string>;
+    tooltip: boolean;
+    emptyText: string;
+    renderer: ChartRenderer;
+    categories: Record<string, ChartCategory>;
+    arcWidth: number;
+    half: boolean;
+    valueFormatter: (value: number) => string;
+    legendValues: boolean;
+    centerLabel: string;
+    centerValue: string | number;
+    arcLabels: boolean;
+}, {}, {}, {}, 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/AcDonutChart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,237 @@
+import e from "../charts/ChartFrame.js";
+import { bindItemHover as t, useEChart as n } from "../charts/echarts.js";
+import { chartColor as r, formatCompact as i, readValue as a } from "../charts/shared.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, defineComponent as p, guardReactiveProps as m, normalizeClass as h, normalizeProps as g, normalizeStyle as _, openBlock as v, ref as y, renderList as b, renderSlot as x, toDisplayString as S, unref as ee, withCtx as C } from "vue";
+import { ChartPie as w } from "@lucide/vue";
+import { use as T } from "echarts/core";
+import { PieChart as E } from "echarts/charts";
+//#region src/lib/components/AcDonutChart.vue?vue&type=script&setup=true&lang.ts
+var D = {
+	key: 0,
+	class: "text-2xl font-semibold tracking-tight text-heading tabular-nums"
+}, O = {
+	key: 1,
+	class: "text-xs text-muted"
+}, k = 24, A = .04, j = 4, M = /*@__PURE__*/ p({
+	__name: "AcDonutChart",
+	props: {
+		data: {},
+		index: {
+			type: [String, Function],
+			default: "name"
+		},
+		value: {
+			type: [String, Function],
+			default: "value"
+		},
+		categories: { default: void 0 },
+		height: { default: 240 },
+		arcWidth: { default: 24 },
+		half: {
+			type: Boolean,
+			default: !1
+		},
+		valueFormatter: {
+			type: Function,
+			default: void 0
+		},
+		legend: { default: "right" },
+		legendValues: {
+			type: Boolean,
+			default: !0
+		},
+		centerLabel: { default: "" },
+		centerValue: { default: "" },
+		arcLabels: {
+			type: Boolean,
+			default: !1
+		},
+		tooltip: {
+			type: Boolean,
+			default: !0
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "No data to show yet" },
+		title: { default: "" },
+		description: { default: "" },
+		renderer: { default: "canvas" },
+		animation: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(p) {
+		T([E]);
+		let M = p, N = y(), P = y([]), F = y(0), I = y(null), L = s(() => M.data.map((e, t) => String(a(e, t, M.index)))), R = s(() => M.data.map((e, t) => Math.max(0, Number(a(e, t, M.value)) || 0))), z = s(() => R.value.map((e, t) => P.value.includes(L.value[t]) ? 0 : e)), B = s(() => z.value.reduce((e, t) => e + t, 0)), V = s(() => L.value.map((e, t) => r(M.categories?.[e]?.color, t))), H = s(() => L.value.map((e) => M.categories?.[e]?.name ?? e));
+		function U(e) {
+			return M.valueFormatter ? M.valueFormatter(e) : i(e);
+		}
+		function W(e, t = B.value) {
+			return t ? `${Math.round(e / t * 100)}%` : "0%";
+		}
+		let G = s(() => L.value.map((e, t) => ({
+			key: e,
+			name: H.value[t],
+			color: V.value[t],
+			value: M.legendValues ? U(R.value[t]) : void 0
+		}))), K = s(() => R.value.reduce((e, t) => e + t, 0)), q = s(() => ({
+			columns: [
+				"Name",
+				"Value",
+				"Share"
+			],
+			rows: L.value.map((e, t) => [
+				H.value[t],
+				U(R.value[t]),
+				W(R.value[t], K.value)
+			])
+		})), J = s(() => {
+			let e = L.value.map((e, t) => `${H.value[t]} ${W(R.value[t], K.value)}`).join(", ");
+			return [M.title, M.description || `${L.value.length} segments: ${e}.`].filter(Boolean).join(". ");
+		}), Y = s(() => F.value || M.height), X = s(() => {
+			let e = M.half ? Math.min(Y.value / 2, M.height) : Math.min(Y.value, M.height) / 2;
+			return Math.max(40, e - j - (M.arcLabels ? k : 0));
+		}), Z = s(() => M.arcWidth > 0 ? Math.max(0, X.value - M.arcWidth) : 0), Q = s(() => Y.value / 2), $ = s(() => M.half ? M.height / 2 + X.value / 2 : M.height / 2), te = s(() => {
+			if (!M.arcLabels || !B.value || !F.value) return [];
+			let e = X.value + k / 2 + 2, t = M.half ? Math.PI : 2 * Math.PI, n = M.half ? -Math.PI / 2 : 0, r = 0;
+			return z.value.flatMap((i, a) => {
+				let o = n + (r + i / 2) / B.value * t;
+				return r += i, i / B.value < A ? [] : [{
+					key: L.value[a],
+					text: W(i),
+					left: Q.value + e * Math.sin(o),
+					top: $.value - e * Math.cos(o)
+				}];
+			});
+		});
+		function ne(e) {
+			return {
+				type: "pie",
+				data: L.value.flatMap((t, n) => P.value.includes(t) ? [] : [{
+					name: H.value[n],
+					value: R.value[n],
+					row: n,
+					itemStyle: { color: e.color(V.value[n]) }
+				}]),
+				center: [Q.value, $.value],
+				radius: [Z.value, X.value],
+				startAngle: M.half ? 180 : 90,
+				endAngle: M.half ? 360 : "auto",
+				avoidLabelOverlap: !1,
+				label: { show: !1 },
+				labelLine: { show: !1 },
+				itemStyle: {
+					borderColor: e.surface,
+					borderWidth: 2,
+					borderRadius: M.arcWidth > 0 ? 4 : 0
+				},
+				emphasis: {
+					scale: !0,
+					scaleSize: j
+				},
+				animationType: "expansion",
+				animationTypeUpdate: "transition",
+				animationDuration: 500,
+				animationDurationUpdate: 300
+			};
+		}
+		function re(e, t, n) {
+			if (!e || !M.tooltip) return;
+			let r = e.row, i = z.value[r];
+			I.value = {
+				clientX: t,
+				clientY: n,
+				title: "",
+				items: [{
+					key: L.value[r],
+					name: H.value[r],
+					color: V.value[r],
+					value: i,
+					formatted: `${U(i)} (${W(i)})`
+				}],
+				datum: M.data[r],
+				index: r
+			};
+		}
+		return n({
+			host: N,
+			renderer: () => M.renderer,
+			option: (e) => ({
+				animation: M.animation && !e.reducedMotion,
+				series: [ne(e)]
+			}),
+			setup: (e) => t(e, (e) => re(e.data, e.clientX, e.clientY), () => I.value = null)
+		}), (t, n) => (v(), c(e, {
+			hidden: P.value,
+			"onUpdate:hidden": n[0] ||= (e) => P.value = e,
+			width: F.value,
+			"onUpdate:width": n[1] ||= (e) => F.value = e,
+			testid: "ac-donut-chart",
+			height: p.height,
+			loading: p.loading,
+			empty: !p.data.length || !K.value,
+			"empty-text": p.emptyText,
+			"empty-icon": ee(w),
+			legend: p.legend,
+			"legend-items": G.value,
+			"legend-centered": "",
+			summary: J.value,
+			title: p.title,
+			description: p.description,
+			table: q.value,
+			tip: I.value,
+			tooltip: p.tooltip
+		}, f({
+			default: C(() => [
+				d("div", {
+					ref_key: "host",
+					ref: N,
+					class: "size-full"
+				}, null, 512),
+				t.$slots.center || p.centerValue !== "" || p.centerLabel ? (v(), u("div", {
+					key: 0,
+					class: h(["pointer-events-none absolute inset-x-0 flex flex-col items-center text-center", p.half ? "justify-end" : "inset-y-0 justify-center"]),
+					style: _(p.half ? { bottom: `${p.height - $.value + 2}px` } : void 0)
+				}, [x(t.$slots, "center", {
+					total: B.value,
+					formatted: U(B.value)
+				}, () => [p.centerValue === "" ? l("", !0) : (v(), u("span", D, S(p.centerValue), 1)), p.centerLabel ? (v(), u("span", O, S(p.centerLabel), 1)) : l("", !0)])], 6)) : l("", !0),
+				(v(!0), u(o, null, b(te.value, (e) => (v(), u("span", {
+					key: e.key,
+					class: "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 text-xs font-medium text-muted tabular-nums",
+					style: _({
+						left: `${e.left}px`,
+						top: `${e.top}px`
+					}),
+					"aria-hidden": "true"
+				}, S(e.text), 5))), 128))
+			]),
+			_: 2
+		}, [t.$slots.tooltip ? {
+			name: "tooltip",
+			fn: C((e) => [x(t.$slots, "tooltip", g(m(e)))]),
+			key: "0"
+		} : void 0]), 1032, [
+			"hidden",
+			"width",
+			"height",
+			"loading",
+			"empty",
+			"empty-text",
+			"empty-icon",
+			"legend",
+			"legend-items",
+			"summary",
+			"title",
+			"description",
+			"table",
+			"tip",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { M as default };

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

@@ -1,7 +1,7 @@
 export interface Props {
-    /** Text of the default trigger button. Without it (and without a `trigger` slot) a ⋮ icon button is shown. */
+    /** Text of the default trigger button. Without it (and without a `trigger` slot) a 28px ⋯ icon button is shown. */
     label?: string;
-    /** Accessible name of the menu and of the ⋮ trigger, e.g. "Actions for demo-postgres". */
+    /** Accessible name of the menu and of the ⋯ trigger, e.g. "Actions for demo-postgres". */
     menuLabel?: string;
     /** Which edge of the trigger the menu lines up with. Use `end` for menus at the right of a row. Old `is-right`. */
     align?: "start" | "end";
@@ -9,6 +9,8 @@ export interface Props {
     placement?: "bottom" | "top";
     /** Disables the default trigger and stops the menu opening. */
     disabled?: boolean;
+    /** `menu`: cloud-ui's row-action list, at least 240px, full-width rows. `panel`: its navbar Create menu, 320px, padded with rounded rows, 20px icons and a medium-weight label over the description. */
+    variant?: "menu" | "panel";
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
@@ -29,6 +31,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    variant: "menu" | "panel";
     label: string;
     disabled: boolean;
     align: "start" | "end";