iryx-ui 0.15.0 → 0.17.0

package/dist/components/DateRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,20 +1,21 @@
 import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
-import { useFormField as n } from "../composables/form.js";
-import { formatIsoDate as r, toCalendarDate as i, toIsoDate as a } from "../composables/date.js";
-import { datePickerTheme as ee } from "../theme/date-picker.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, shallowRef as b, toDisplayString as x, unref as S, useModel as C, watch as w, withCtx as T } from "vue";
-import { ArrowLeft01Icon as E, ArrowRight01Icon as D, Calendar03Icon as te } from "@hugeicons/core-free-icons";
-import { PopoverContent as ne, PopoverPortal as re, PopoverRoot as O, PopoverTrigger as k, RangeCalendarCell as A, RangeCalendarCellTrigger as j, RangeCalendarGrid as M, RangeCalendarGridBody as N, RangeCalendarGridHead as P, RangeCalendarGridRow as F, RangeCalendarHeadCell as I, RangeCalendarHeader as L, RangeCalendarHeading as R, RangeCalendarNext as z, RangeCalendarPrev as B, RangeCalendarRoot as V } from "reka-ui";
+import { formatIsoDate as n, toCalendarDate as r, toIsoDate as i } from "../composables/date.js";
+import { calendarTheme as ee } from "../theme/calendar.js";
+import { useFormField as a } from "../composables/form.js";
+import { datePickerTheme as o } from "../theme/date-picker.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, openBlock as v, ref as y, renderList as b, shallowRef as x, toDisplayString as S, unref as C, useModel as w, watch as T, withCtx as E } from "vue";
+import { ArrowLeft01Icon as te, ArrowRight01Icon as ne, Calendar03Icon as re } from "@hugeicons/core-free-icons";
+import { PopoverContent as D, PopoverPortal as O, PopoverRoot as k, PopoverTrigger as A, RangeCalendarCell as j, RangeCalendarCellTrigger as M, RangeCalendarGrid as N, RangeCalendarGridBody as P, RangeCalendarGridHead as F, RangeCalendarGridRow as I, RangeCalendarHeadCell as L, RangeCalendarHeader as R, RangeCalendarHeading as z, RangeCalendarNext as B, RangeCalendarPrev as V, RangeCalendarRoot as ie } from "reka-ui";
 //#region src/components/DateRangePicker.vue?vue&type=script&setup=true&lang.ts
 var H = [
 	"id",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], U = { key: 0 }, W = /*@__PURE__*/ m({
+], U = { key: 0 }, W = /*@__PURE__*/ h({
 	__name: "DateRangePicker",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ g({
 		size: {},
 		placeholder: { default: "Pick a date range" },
 		disabled: { type: Boolean },
@@ -48,127 +49,129 @@ var H = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(m) {
-		let h = m, W = C(m, "modelValue"), G = v(!1), K = n(), q = s(() => h.id ?? K?.id.value), J = s(() => h.invalid ?? K?.invalid.value ?? !1), Y = e(), ie = s(() => h.unstyled ?? Y.unstyled), X = b({
-			start: i(W.value?.start),
-			end: i(W.value?.end)
+	setup(h) {
+		let g = h, W = w(h, "modelValue"), G = y(!1), K = a(), q = c(() => g.id ?? K?.id.value), J = c(() => g.invalid ?? K?.invalid.value ?? !1), Y = e(), ae = c(() => g.unstyled ?? Y.unstyled), X = x({
+			start: r(W.value?.start),
+			end: r(W.value?.end)
 		});
 		function Z(e) {
-			return a(e.start) === (W.value?.start ?? null) && a(e.end) === (W.value?.end ?? null);
+			return i(e.start) === (W.value?.start ?? null) && i(e.end) === (W.value?.end ?? null);
 		}
-		w(W, () => {
+		T(W, () => {
 			Z(X.value) || (X.value = {
-				start: i(W.value?.start),
-				end: i(W.value?.end)
+				start: r(W.value?.start),
+				end: r(W.value?.end)
 			});
-		}, { deep: !0 }), w(X, (e) => {
+		}, { deep: !0 }), T(X, (e) => {
 			Z(e) || (W.value = {
-				start: a(e.start),
-				end: a(e.end)
+				start: i(e.start),
+				end: i(e.end)
 			});
 		});
-		let ae = s(() => i(h.min)), oe = s(() => i(h.max)), Q = s(() => {
-			let e = r(W.value?.start, h.locale, h.format), t = r(W.value?.end, h.locale, h.format);
-			return !e && !t ? "" : t ? `${e}${h.separator}${t}` : e;
+		let oe = c(() => r(g.min)), se = c(() => r(g.max)), Q = c(() => {
+			let e = n(W.value?.start, g.locale, g.format), t = n(W.value?.end, g.locale, g.format);
+			return !e && !t ? "" : t ? `${e}${g.separator}${t}` : e;
 		});
-		w(W, (e) => {
+		T(W, (e) => {
 			G.value && e?.start && e?.end && (G.value = !1);
 		}, { deep: !0 });
-		function se() {
+		function ce() {
 			W.value = {
 				start: null,
 				end: null
 			}, G.value = !1;
 		}
-		let ce = s(() => ee({
-			size: h.size,
-			invalid: J.value,
-			range: !0
+		let le = c(() => ({
+			...o({
+				size: g.size,
+				invalid: J.value
+			}),
+			...ee({ range: !0 })
 		}));
 		function $(e, t) {
-			let n = h.ui?.[e];
-			return ie.value ? [n, t] : ce.value[e]({ class: [n, t] });
+			let n = g.ui?.[e];
+			return ae.value ? [n, t] : le.value[e]({ class: [n, t] });
 		}
-		return (e, n) => (_(), c(S(O), {
+		return (e, n) => (v(), l(C(k), {
 			open: G.value,
 			"onUpdate:open": n[1] ||= (e) => G.value = e
 		}, {
-			default: T(() => [p(S(k), { "as-child": "" }, {
-				default: T(() => [d("button", {
+			default: E(() => [m(C(A), { "as-child": "" }, {
+				default: E(() => [f("button", {
 					id: q.value,
 					type: "button",
-					disabled: h.disabled,
+					disabled: g.disabled,
 					"aria-invalid": J.value || void 0,
-					"aria-describedby": S(K)?.describedBy.value,
-					class: g($("trigger", h.class))
-				}, [Q.value ? (_(), u("span", U, x(Q.value), 1)) : (_(), u("span", {
+					"aria-describedby": C(K)?.describedBy.value,
+					class: _($("trigger", g.class))
+				}, [Q.value ? (v(), d("span", U, S(Q.value), 1)) : (v(), d("span", {
 					key: 1,
-					class: g($("placeholder"))
-				}, x(h.placeholder), 3)), p(t, { icon: S(te) }, null, 8, ["icon"])], 10, H)]),
+					class: _($("placeholder"))
+				}, S(g.placeholder), 3)), m(t, { icon: C(re) }, null, 8, ["icon"])], 10, H)]),
 				_: 1
-			}), p(S(re), null, {
-				default: T(() => [p(S(ne), {
-					class: g($("content")),
+			}), m(C(O), null, {
+				default: E(() => [m(C(D), {
+					class: _($("content")),
 					"side-offset": 4,
 					align: "start"
 				}, {
-					default: T(() => [p(S(V), {
+					default: E(() => [m(C(ie), {
 						modelValue: X.value,
 						"onUpdate:modelValue": n[0] ||= (e) => X.value = e,
-						"min-value": ae.value,
-						"max-value": oe.value,
-						locale: h.locale,
-						"week-starts-on": h.weekStartsOn,
-						"number-of-months": h.months,
+						"min-value": oe.value,
+						"max-value": se.value,
+						locale: g.locale,
+						"week-starts-on": g.weekStartsOn,
+						"number-of-months": g.months,
 						"fixed-weeks": "",
 						"initial-focus": ""
 					}, {
-						default: T(({ grid: e, weekDays: n }) => [p(S(L), { class: g($("header")) }, {
-							default: T(() => [
-								p(S(B), {
-									"aria-label": h.previousLabel,
-									class: g($("nav"))
+						default: E(({ grid: e, weekDays: n }) => [m(C(R), { class: _($("header")) }, {
+							default: E(() => [
+								m(C(V), {
+									"aria-label": g.previousLabel,
+									class: _($("nav"))
 								}, {
-									default: T(() => [p(t, { icon: S(E) }, null, 8, ["icon"])]),
+									default: E(() => [m(t, { icon: C(te) }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, ["aria-label", "class"]),
-								p(S(R), { class: g($("heading")) }, null, 8, ["class"]),
-								p(S(z), {
-									"aria-label": h.nextLabel,
-									class: g($("nav"))
+								m(C(z), { class: _($("heading")) }, null, 8, ["class"]),
+								m(C(B), {
+									"aria-label": g.nextLabel,
+									class: _($("nav"))
 								}, {
-									default: T(() => [p(t, { icon: S(D) }, null, 8, ["icon"])]),
+									default: E(() => [m(t, { icon: C(ne) }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, ["aria-label", "class"])
 							]),
 							_: 1
-						}, 8, ["class"]), d("div", { class: g($("months")) }, [(_(!0), u(o, null, y(e, (e) => (_(), c(S(M), {
+						}, 8, ["class"]), f("div", { class: _($("months")) }, [(v(!0), d(s, null, b(e, (e) => (v(), l(C(N), {
 							key: e.value.toString(),
-							class: g($("grid"))
+							class: _($("grid"))
 						}, {
-							default: T(() => [p(S(P), null, {
-								default: T(() => [p(S(F), null, {
-									default: T(() => [(_(!0), u(o, null, y(n, (e) => (_(), c(S(I), {
+							default: E(() => [m(C(F), null, {
+								default: E(() => [m(C(I), null, {
+									default: E(() => [(v(!0), d(s, null, b(n, (e) => (v(), l(C(L), {
 										key: e,
-										class: g($("headCell"))
+										class: _($("headCell"))
 									}, {
-										default: T(() => [f(x(e), 1)]),
+										default: E(() => [p(S(e), 1)]),
 										_: 2
 									}, 1032, ["class"]))), 128))]),
 									_: 2
 								}, 1024)]),
 								_: 2
-							}, 1024), p(S(N), null, {
-								default: T(() => [(_(!0), u(o, null, y(e.rows, (t, n) => (_(), c(S(F), { key: `week-${n}` }, {
-									default: T(() => [(_(!0), u(o, null, y(t, (t) => (_(), c(S(A), {
+							}, 1024), m(C(P), null, {
+								default: E(() => [(v(!0), d(s, null, b(e.rows, (t, n) => (v(), l(C(I), { key: `week-${n}` }, {
+									default: E(() => [(v(!0), d(s, null, b(t, (t) => (v(), l(C(j), {
 										key: t.toString(),
 										date: t,
-										class: g($("cell"))
+										class: _($("cell"))
 									}, {
-										default: T(() => [p(S(j), {
+										default: E(() => [m(C(M), {
 											day: t,
 											month: e.value,
-											class: g($("cellTrigger"))
+											class: _($("cellTrigger"))
 										}, null, 8, [
 											"day",
 											"month",
@@ -190,14 +193,14 @@ var H = [
 						"locale",
 						"week-starts-on",
 						"number-of-months"
-					]), h.clearable ? (_(), u("div", {
+					]), g.clearable ? (v(), d("div", {
 						key: 0,
-						class: g($("footer"))
-					}, [d("button", {
+						class: _($("footer"))
+					}, [f("button", {
 						type: "button",
-						class: g($("action")),
-						onClick: se
-					}, x(h.clearLabel), 3)], 2)) : l("", !0)]),
+						class: _($("action")),
+						onClick: ce
+					}, S(g.clearLabel), 3)], 2)) : u("", !0)]),
 					_: 1
 				}, 8, ["class"])]),
 				_: 1

package/dist/components/DonutChart.js

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

package/dist/components/DonutChart.vue.d.ts

@@ -0,0 +1,96 @@
+import type { ChartAnimate } from '../composables/chart-reveal';
+import type { SparseValue } from '../composables/scale';
+/**
+ * One slice. Unlike the cartesian charts there is no second axis to hold a
+ * series, so the row *is* the identity: its `label` names it and its `slot`
+ * pins its colour.
+ */
+export interface DonutChartDatum {
+    label: string;
+    /** `null` is a missing reading — the slice is dropped, which is not a zero. */
+    value?: SparseValue;
+    /**
+     * Pin this slice to a palette slot (0-based) instead of taking its position
+     * in the array. Pin every slice that can be filtered out, so the survivors
+     * keep the colours the reader already learned.
+     */
+    slot?: number;
+}
+export interface DonutChartProps {
+    data?: readonly DonutChartDatum[];
+    /**
+     * Rendered height in px. The ring is a circle centred in whatever width the
+     * container gives, so this is also its diameter once the box is wide enough.
+     */
+    size?: number;
+    /**
+     * Ring thickness in px. Defaults to two fifths of the radius, which keeps
+     * the hole large enough to hold a total at every size. Ignored when `pie`.
+     */
+    thickness?: number;
+    /**
+     * Fill the middle in and draw a pie instead.
+     *
+     * The ring is the better default: a pie asks the reader to compare angles
+     * and areas, a donut only arc lengths, and the hole is somewhere to put the
+     * total the slices add up to.
+     */
+    pie?: boolean;
+    /**
+     * The gap between neighbouring slices, in px. `0` closes it and lets them
+     * touch.
+     *
+     * A width rather than an angle, and held the same all the way across: each
+     * edge is pushed half a gap off its own radius, so the divider reads as a
+     * line instead of a wedge that widens towards the rim. In a pie that is
+     * also why a slice stops a hair short of the centre — two parallel edges
+     * meet before they reach it.
+     */
+    gap?: number;
+    /**
+     * Sweep the ring open on the first paint. Skipped for a reader who has
+     * asked for reduced motion, and played once — not again when the data
+     * changes underneath it.
+     */
+    animate?: ChartAnimate;
+    /** Drop the legend. */
+    legend?: boolean;
+    /** Locale and options for every number shown — the total and the tooltip. */
+    locale?: string;
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Accessible name for the figure. The slices are hidden from assistive tech
+     * and the data is exposed as a table instead, so this names what that is.
+     */
+    label?: string;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    ui?: Partial<Record<'root' | 'svg' | 'slice' | 'center' | 'tooltip' | 'tooltipLabel' | 'tooltipValue' | 'tooltipShare' | 'table', string>>;
+}
+type __VLS_Slots = {
+    /**
+     * The hole. Given the total and its formatted form, so the usual figure
+     * plus caption is one line of markup.
+     */
+    center?: (props: {
+        total: number;
+        formatted: string;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<DonutChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DonutChartProps> & Readonly<{}>, {
+    size: number;
+    unstyled: boolean;
+    data: readonly DonutChartDatum[];
+    legend: boolean;
+    animate: ChartAnimate;
+    gap: number;
+}, {}, {}, {}, 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/DonutChart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,234 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { useElementSize as t } from "../composables/element-size.js";
+import { clampTooltip as n, seriesColor as r, slotOf as i, warnOnSlotOverflow as a } from "../composables/cartesian.js";
+import { useChartAnimation as o, useChartProgress as s } from "../composables/chart-reveal.js";
+import c from "./ChartLegend.js";
+import { donutChartTheme as l } from "../theme/donut-chart.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, defineComponent as g, normalizeClass as _, normalizeStyle as v, openBlock as y, ref as b, renderList as x, renderSlot as ee, toDisplayString as S, unref as C } from "vue";
+//#region src/components/DonutChart.vue?vue&type=script&setup=true&lang.ts
+var te = ["role", "aria-label"], w = [
+	"width",
+	"height",
+	"viewBox"
+], ne = [
+	"cx",
+	"cy",
+	"r",
+	"fill",
+	"stroke",
+	"stroke-width"
+], re = ["d", "onPointerenter"], ie = { scope: "row" }, T = /*@__PURE__*/ g({
+	__name: "DonutChart",
+	props: {
+		data: { default: () => [] },
+		size: { default: 240 },
+		thickness: {},
+		pie: { type: Boolean },
+		gap: { default: 2 },
+		animate: {
+			type: [Boolean, Object],
+			default: !0
+		},
+		legend: {
+			type: Boolean,
+			default: !0
+		},
+		locale: {},
+		format: {},
+		label: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(g) {
+		let T = g, ae = e(), E = d(() => T.unstyled ?? ae.unstyled), D = b(), { width: O } = t(D), oe = d(() => new Intl.NumberFormat(T.locale, T.format));
+		function k(e) {
+			return oe.value.format(e);
+		}
+		let A = d(() => new Intl.NumberFormat(T.locale, {
+			style: "percent",
+			maximumFractionDigits: 1
+		})), j = !1;
+		function M() {
+			j || process.env.NODE_ENV === "production" || (j = !0, console.warn("[iryx-ui] IDonutChart dropped a negative value. A share of a whole cannot be negative — plot the magnitudes, or use IBarChart, which has a baseline."));
+		}
+		let N = d(() => {
+			let e = T.data.map((e, t) => ({
+				datum: e,
+				index: t
+			})).filter(({ datum: e }) => {
+				let t = e.value;
+				return typeof t != "number" || !Number.isFinite(t) || t === 0 ? !1 : t < 0 ? (M(), !1) : !0;
+			});
+			a(e.length);
+			let t = e.reduce((e, { datum: t }) => e + t.value, 0);
+			return e.map(({ datum: e, index: n }) => ({
+				label: e.label,
+				value: e.value,
+				share: t ? e.value / t : 0,
+				color: r(i(e, n)),
+				index: n
+			}));
+		}), P = d(() => N.value.reduce((e, t) => e + t.value, 0)), F = d(() => N.value.map((e) => ({
+			key: `${e.index}-${e.label}`,
+			name: e.label,
+			slot: T.data[e.index]?.slot ?? e.index
+		}))), I = d(() => T.legend && N.value.length > 0), L = d(() => ({
+			x: O.value / 2,
+			y: T.size / 2
+		})), R = d(() => Math.max(Math.min(O.value, T.size) / 2, 0)), z = d(() => {
+			if (T.pie) return 0;
+			let e = Math.min(T.thickness ?? R.value * .4, R.value);
+			return Math.max(R.value - e, 0);
+		}), B = -Math.PI / 2, V = d(() => Math.max(T.gap, 0) / 2);
+		function H(e) {
+			return Math.round(e * 100) / 100;
+		}
+		function U(e, t) {
+			return [H(L.value.x + e * Math.cos(t)), H(L.value.y + e * Math.sin(t))];
+		}
+		let W = d(() => !!(O.value && R.value && N.value.length)), { progress: G } = s(W, o(d(() => T.animate))), K = d(() => {
+			if (!W.value) return [];
+			let e = G.value, t = B;
+			return N.value.flatMap((n) => {
+				let r = n.share * Math.PI * 2, i = t;
+				t += r;
+				let a = B + (i - B) * e, o = r * e;
+				return o <= 0 ? [] : [{
+					...n,
+					mid: i + r / 2,
+					path: se(a, a + o)
+				}];
+			});
+		});
+		function q(e, t) {
+			let n = V.value;
+			return !n || e <= n ? 0 : Math.min(Math.asin(n / e), t / 3);
+		}
+		function se(e, t) {
+			let n = t - e, r = !z.value, i = N.value.length < 2 ? 0 : q(R.value, n), a = e + i, o = t - i, s = +(o - a > Math.PI), [c, l] = U(R.value, a), [u, d] = U(R.value, o);
+			if (r) {
+				let [t, r] = U(i ? Math.min(V.value / Math.sin(n / 2), R.value / 2) : 0, e + n / 2);
+				return `M${c} ${l} A${H(R.value)} ${H(R.value)} 0 ${s} 1 ${u} ${d} L${t} ${r} Z`;
+			}
+			let f = i ? q(z.value, n) : 0, p = +(n - f * 2 > Math.PI), [m, h] = U(z.value, t - f), [g, _] = U(z.value, e + f);
+			return `M${c} ${l} A${H(R.value)} ${H(R.value)} 0 ${s} 1 ${u} ${d} L${m} ${h} A${H(z.value)} ${H(z.value)} 0 ${p} 0 ${g} ${_} Z`;
+		}
+		let J = d(() => {
+			if (!(K.value.length !== 1 || !R.value || G.value < 1)) return {
+				...K.value[0],
+				radius: z.value ? (R.value + z.value) / 2 : R.value,
+				strokeWidth: R.value - z.value
+			};
+		}), ce = d(() => J.value ? [] : K.value), Y = b(), X = d(() => {
+			if (Y.value == null) return;
+			let e = K.value.find((e) => e.index === Y.value);
+			if (!e) return;
+			let t = k(e.value), r = A.value.format(e.share), [i, a] = U(z.value ? (R.value + z.value) / 2 : R.value / 2, e.mid);
+			return {
+				label: e.label,
+				value: t,
+				share: r,
+				x: n(i, `${e.label}${t}${r}`, O.value),
+				y: a
+			};
+		}), Z = d(() => l());
+		function Q(e, t) {
+			let n = T.ui?.[e];
+			return E.value ? [n, t] : Z.value[e]({ class: [n, t] });
+		}
+		function $(e) {
+			let t = Y.value != null && Y.value !== e;
+			return E.value ? [T.ui?.slice] : Z.value.slice({ class: [T.ui?.slice, t ? Z.value.faded() : void 0] });
+		}
+		return (e, t) => (y(), m("div", {
+			ref_key: "root",
+			ref: D,
+			role: T.label ? "figure" : void 0,
+			"aria-label": T.label,
+			class: _(Q("root", T.class))
+		}, [
+			I.value ? (y(), f(c, {
+				key: 0,
+				series: F.value,
+				active: Y.value == null ? void 0 : N.value.findIndex((e) => e.index === Y.value),
+				unstyled: T.unstyled
+			}, null, 8, [
+				"series",
+				"active",
+				"unstyled"
+			])) : p("", !0),
+			h("div", { class: _(E.value ? void 0 : Z.value.plot()) }, [
+				(y(), m("svg", {
+					width: C(O),
+					height: T.size,
+					viewBox: `0 0 ${C(O)} ${T.size}`,
+					"aria-hidden": "true",
+					class: _(Q("svg"))
+				}, [J.value ? (y(), m("circle", {
+					key: 0,
+					cx: L.value.x,
+					cy: L.value.y,
+					r: J.value.radius,
+					fill: z.value ? "none" : J.value.color,
+					stroke: z.value ? J.value.color : "none",
+					"stroke-width": z.value ? J.value.strokeWidth : 0,
+					class: _($(J.value.index)),
+					onPointerenter: t[0] ||= (e) => Y.value = J.value.index,
+					onPointerleave: t[1] ||= (e) => Y.value = void 0
+				}, null, 42, ne)) : p("", !0), (y(!0), m(u, null, x(ce.value, (e) => (y(), m("path", {
+					key: `slice-${e.index}`,
+					d: e.path,
+					style: v({ fill: e.color }),
+					class: _($(e.index)),
+					onPointerenter: (t) => Y.value = e.index,
+					onPointerleave: t[2] ||= (e) => Y.value = void 0
+				}, null, 46, re))), 128))], 10, w)),
+				e.$slots.center && z.value ? (y(), m("div", {
+					key: 0,
+					class: _(Q("center")),
+					style: v({
+						left: `${L.value.x}px`,
+						top: `${L.value.y}px`,
+						width: `${z.value * 2 * .82}px`,
+						transform: "translate(-50%, -50%)"
+					})
+				}, [ee(e.$slots, "center", {
+					total: P.value,
+					formatted: k(P.value)
+				})], 6)) : p("", !0),
+				X.value ? (y(), m("div", {
+					key: 1,
+					class: _(Q("tooltip")),
+					style: v({
+						left: `${X.value.x}px`,
+						top: `${X.value.y}px`,
+						transform: "translate(-50%, -50%)"
+					})
+				}, [
+					h("span", { class: _(Q("tooltipLabel")) }, S(X.value.label), 3),
+					h("span", { class: _(Q("tooltipValue")) }, S(X.value.value), 3),
+					h("span", { class: _(Q("tooltipShare")) }, S(X.value.share), 3)
+				], 6)) : p("", !0)
+			], 2),
+			h("div", { class: _(Q("table")) }, [h("table", null, [
+				h("caption", null, S(T.label), 1),
+				t[3] ||= h("thead", null, [h("tr", null, [
+					h("th", { scope: "col" }, " Category "),
+					h("th", { scope: "col" }, " Value "),
+					h("th", { scope: "col" }, " Share ")
+				])], -1),
+				h("tbody", null, [(y(!0), m(u, null, x(N.value, (e) => (y(), m("tr", { key: `row-${e.index}` }, [
+					h("th", ie, S(e.label), 1),
+					h("td", null, S(k(e.value)), 1),
+					h("td", null, S(A.value.format(e.share)), 1)
+				]))), 128))])
+			])], 2)
+		], 10, te));
+	}
+});
+//#endregion
+export { T as default };

package/dist/components/DropdownMenu.vue.d.ts

@@ -4,6 +4,7 @@ export interface DropdownMenuProps {
     items?: DropdownMenuEntry[];
     /** Which edge of the trigger to align to. */
     align?: 'start' | 'center' | 'end';
+    alignOffset?: number;
     side?: 'top' | 'right' | 'bottom' | 'left';
     sideOffset?: number;
     /** Skip built-in classes; you take over styling entirely. */
@@ -12,6 +13,7 @@ export interface DropdownMenuProps {
     /** Override classes per slot, e.g. `{ item: 'py-2' }`. */
     ui?: {
         content?: string;
+        header?: string;
         item?: string;
         label?: string;
         separator?: string;
@@ -20,16 +22,21 @@ export interface DropdownMenuProps {
     };
 }
 type __VLS_Props = DropdownMenuProps;
+type __VLS_Slots = {
+    /** What opens the menu. */
+    trigger?: () => unknown;
+    /**
+     * A block above the items — an account's name and address, a workspace, a
+     * plan. Not a menu row: it is not focusable and nothing selects it.
+     */
+    header?: () => unknown;
+    /** Replaces the items entirely. */
+    default?: () => unknown;
+};
 type __VLS_ModelProps = {
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_14: {}, __VLS_28: {};
-type __VLS_Slots = {} & {
-    trigger?: (props: typeof __VLS_14) => any;
-} & {
-    default?: (props: typeof __VLS_28) => any;
-};
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{