iryx-ui 0.23.0 → 0.24.1

package/dist/component-names.d.ts

@@ -3,7 +3,7 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "AuthProviders", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Calendar", "Card", "Carousel", "ChartLegend", "Checkbox", "Code", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DateField", "DatePicker", "DateRangePicker", "DescriptionList", "Dialog", "DonutChart", "Drawer", "DropdownMenu", "Editable", "EmptyState", "FileUpload", "Form", "FormField", "HoverCard", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "Rating", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
+export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "AuthProviders", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Calendar", "Card", "Carousel", "ChartLegend", "Checkbox", "Code", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ConfirmPopover", "ContextMenu", "DateField", "DatePicker", "DateRangePicker", "DescriptionList", "Dialog", "DonutChart", "Drawer", "DropdownMenu", "Editable", "EmptyState", "FileUpload", "Form", "FormField", "HoverCard", "Icon", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "Rating", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
 export type ComponentName = (typeof componentNames)[number];
 /**
  * Names of every block exported from `iryx-ui/marketing`.

package/dist/component-names.js

@@ -1,5 +1,5 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.AuthProviders.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Calendar.Card.Carousel.ChartLegend.Checkbox.Code.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DateField.DatePicker.DateRangePicker.DescriptionList.Dialog.DonutChart.Drawer.DropdownMenu.Editable.EmptyState.FileUpload.Form.FormField.HoverCard.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.Rating.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split("."), t = [
+var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.AuthProviders.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Calendar.Card.Carousel.ChartLegend.Checkbox.Code.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ConfirmPopover.ContextMenu.DateField.DatePicker.DateRangePicker.DescriptionList.Dialog.DonutChart.Drawer.DropdownMenu.Editable.EmptyState.FileUpload.Form.FormField.HoverCard.Icon.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.Rating.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split("."), t = [
 	"BrowserFrame",
 	"FeatureCard",
 	"Hero",

package/dist/components/ConfirmPopover.js

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

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

@@ -0,0 +1,63 @@
+import type { ClassValue } from '../class-value';
+export interface ConfirmPopoverProps {
+    /** The question. */
+    title?: string;
+    /** Secondary detail under the question. */
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Style the confirming button as destructive. */
+    danger?: boolean;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    /** Render the little pointer against the trigger. */
+    arrow?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: ClassValue;
+    /** Override classes per element, e.g. `{ confirm: 'w-full' }`. */
+    ui?: {
+        content?: string;
+        title?: string;
+        description?: string;
+        actions?: string;
+        cancel?: string;
+        confirm?: string;
+    };
+}
+type __VLS_Props = ConfirmPopoverProps;
+type __VLS_ModelProps = {
+    'open'?: boolean | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_9) => any;
+} & {
+    description?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean | undefined) => any;
+    cancel: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean | undefined) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    unstyled: boolean;
+    side: "top" | "right" | "bottom" | "left";
+    sideOffset: number;
+    confirmLabel: string;
+    cancelLabel: string;
+    arrow: 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/components/ConfirmPopover.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,102 @@
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Button.js";
+import { confirmPopoverTheme as n } from "../theme/confirm-popover.js";
+import r from "./Popover.js";
+import { 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, renderSlot as h, toDisplayString as g, useModel as _, withCtx as v } from "vue";
+//#region src/components/ConfirmPopover.vue?vue&type=script&setup=true&lang.ts
+var y = /*@__PURE__*/ d({
+	__name: "ConfirmPopover",
+	props: /*@__PURE__*/ f({
+		title: {},
+		description: {},
+		confirmLabel: { default: "Confirm" },
+		cancelLabel: { default: "Cancel" },
+		danger: { type: Boolean },
+		side: { default: "bottom" },
+		align: {},
+		sideOffset: { default: 6 },
+		arrow: {
+			type: Boolean,
+			default: !0
+		},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: { type: [
+			String,
+			Boolean,
+			null,
+			Array
+		] },
+		ui: {}
+	}, {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["confirm", "cancel"], ["update:open"]),
+	setup(d, { emit: f }) {
+		let y = d, b = f, x = _(d, "open");
+		function S() {
+			b("confirm"), x.value = !1;
+		}
+		function C() {
+			b("cancel"), x.value = !1;
+		}
+		let w = e(), T = i(() => y.unstyled ?? w.unstyled), E = i(() => n()), D = i(() => T.value ? y.ui?.description : E.value.description({ class: y.ui?.description })), O = i(() => T.value ? y.ui?.actions : E.value.actions({ class: y.ui?.actions }));
+		return (e, n) => (m(), a(r, {
+			open: x.value,
+			"onUpdate:open": n[0] ||= (e) => x.value = e,
+			side: y.side,
+			align: y.align,
+			"side-offset": y.sideOffset,
+			arrow: y.arrow,
+			padding: "sm",
+			width: "sm",
+			title: y.title,
+			unstyled: y.unstyled,
+			class: p(y.class),
+			ui: {
+				content: y.ui?.content,
+				title: y.ui?.title
+			}
+		}, {
+			trigger: v(() => [h(e.$slots, "trigger")]),
+			default: v(() => [y.description || e.$slots.description ? (m(), s("p", {
+				key: 0,
+				class: p(D.value)
+			}, [h(e.$slots, "description", {}, () => [l(g(y.description), 1)])], 2)) : o("", !0), c("div", { class: p(O.value) }, [u(t, {
+				size: "sm",
+				variant: "outline",
+				class: p(y.ui?.cancel),
+				onClick: C
+			}, {
+				default: v(() => [l(g(y.cancelLabel), 1)]),
+				_: 1
+			}, 8, ["class"]), u(t, {
+				size: "sm",
+				class: p([y.danger && "bg-danger bg-none text-danger-foreground hover:brightness-110", y.ui?.confirm]),
+				onClick: S
+			}, {
+				default: v(() => [l(g(y.confirmLabel), 1)]),
+				_: 1
+			}, 8, ["class"])], 2)]),
+			_: 3
+		}, 8, [
+			"open",
+			"side",
+			"align",
+			"side-offset",
+			"arrow",
+			"title",
+			"unstyled",
+			"class",
+			"ui"
+		]));
+	}
+});
+//#endregion
+export { y as default };

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

@@ -19,8 +19,12 @@ export interface LineChartProps {
     /**
      * `area` adds a wash beneath the line. Ignored for multiple series, where
      * overlapping washes muddy into a colour that belongs to neither.
+     *
+     * `stacked` is the multi-series answer to that: each series sits on top of
+     * the one before it, so the bands abut instead of overlapping and the top
+     * edge reads as the total. It falls back to `area` for a single series.
      */
-    variant?: 'line' | 'area';
+    variant?: 'line' | 'area' | 'stacked';
     /**
      * How much to curve the line, from `0` (straight segments between
      * readings) to `1` (fully rounded). Straight by default: a curve claims the
@@ -66,7 +70,7 @@ export interface LineChartProps {
     /** Skip built-in classes; you take over styling entirely. */
     unstyled?: boolean;
     class?: ClassValue;
-    ui?: Partial<Record<'root' | 'svg' | 'grid' | 'tick' | 'category' | 'line' | 'area' | 'crosshair' | 'marker' | 'markerRing' | 'tooltip' | 'tooltipLabel' | 'tooltipValue' | 'table', string>>;
+    ui?: Partial<Record<'root' | 'svg' | 'grid' | 'tick' | 'category' | 'line' | 'area' | 'band' | 'crosshair' | 'marker' | 'markerRing' | 'tooltip' | 'tooltipLabel' | 'tooltipValue' | 'table', string>>;
 }
 declare var __VLS_6: {
     orientation: import("..").ChartOrientation;
@@ -105,7 +109,7 @@ type __VLS_Slots = {} & {
     overlay?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LineChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LineChartProps> & Readonly<{}>, {
-    variant: "line" | "area";
+    variant: "line" | "area" | "stacked";
     unstyled: boolean;
     data: readonly LineChartDatum[];
     legend: boolean;

package/dist/components/LineChart.vue_vue_type_script_setup_true_lang.js

@@ -4,34 +4,34 @@ import { cartesianLayout as n, clampTooltip as r, seriesColor as i, slotOf as a,
 import { useChartAnimation as s, useChartReveal as c } from "../composables/chart-reveal.js";
 import l from "./ChartLegend.js";
 import { lineChartTheme as u } from "../theme/line-chart.js";
-import { Fragment as d, computed as f, createBlock as ee, createCommentVNode as p, createElementBlock as m, createElementVNode as h, defineComponent as g, guardReactiveProps as _, normalizeClass as v, normalizeProps as y, normalizeStyle as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useId as D } from "vue";
+import { Fragment as d, computed as f, createBlock as ee, createCommentVNode as p, createElementBlock as m, createElementVNode as h, defineComponent as g, guardReactiveProps as _, normalizeClass as v, normalizeProps as y, normalizeStyle as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, useId as te } from "vue";
 //#region src/components/LineChart.vue?vue&type=script&setup=true&lang.ts
-var te = ["role", "aria-label"], ne = [
+var ne = ["role", "aria-label"], re = [
 	"width",
 	"height",
 	"viewBox"
-], O = [
+], ie = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], re = ["x", "y"], ie = { key: 1 }, ae = [
+], ae = ["x", "y"], oe = [
 	"x",
 	"y",
 	"width",
 	"height"
-], oe = [
+], se = [
 	"x1",
 	"y1",
 	"x2",
 	"y2"
-], se = ["clip-path"], ce = ["d", "fill"], le = ["d"], ue = ["cx", "cy"], de = ["cx", "cy"], fe = ["x", "y"], pe = [
+], ce = ["clip-path"], le = ["d", "fill"], ue = ["d"], de = ["d"], fe = ["cx", "cy"], pe = ["cx", "cy"], me = ["x", "y"], he = [
 	"x",
 	"y",
 	"width",
 	"height",
 	"onPointerenter"
-], me = { scope: "row" }, k = /*@__PURE__*/ g({
+], ge = { scope: "row" }, D = /*@__PURE__*/ g({
 	__name: "LineChart",
 	props: {
 		data: { default: () => [] },
@@ -76,52 +76,68 @@ var te = ["role", "aria-label"], ne = [
 		ui: {}
 	},
 	setup(g) {
-		let k = g, he = e(), A = f(() => k.unstyled ?? he.unstyled), j = S(), { width: M } = t(j), ge = f(() => new Intl.NumberFormat(k.locale, k.format));
-		function N(e) {
-			return ge.value.format(e);
+		let D = g, _e = e(), O = f(() => D.unstyled ?? _e.unstyled), k = S(), { width: A } = t(k), ve = f(() => new Intl.NumberFormat(D.locale, D.format));
+		function j(e) {
+			return ve.value.format(e);
 		}
-		let P = f(() => {
-			let e = k.series?.length ? [...k.series] : [{ key: "value" }];
+		let M = f(() => {
+			let e = D.series?.length ? [...D.series] : [{ key: "value" }];
 			return o(e.length), e;
-		}), F = f(() => P.value.length > 1), _e = f(() => F.value || k.legend && P.value[0].name != null);
-		function I(e, t) {
+		}), N = f(() => M.value.length > 1), ye = f(() => N.value || D.legend && M.value[0].name != null);
+		function P(e, t) {
 			let n = e[t];
 			return typeof n == "number" && Number.isFinite(n) ? n : null;
 		}
-		let L = f(() => n({
-			values: k.data.flatMap((e) => P.value.map((t) => I(e, t.key))),
-			categories: k.data.length,
-			longestLabel: Math.max(...k.data.map((e) => e.label.length), 1),
-			width: M.value,
-			height: k.height,
-			tickCount: k.ticks,
-			showAxis: k.axis,
-			formatTick: N,
-			includeZero: k.zero
+		let F = f(() => D.variant === "stacked" && N.value), I = f(() => D.data.map((e) => M.value.reduce((t, n) => {
+			let r = t[t.length - 1] ?? 0;
+			return t.push(r + (P(e, n.key) ?? 0)), t;
+		}, []))), L = f(() => n({
+			values: F.value ? I.value.map((e) => e[e.length - 1]) : D.data.flatMap((e) => M.value.map((t) => P(e, t.key))),
+			categories: D.data.length,
+			longestLabel: Math.max(...D.data.map((e) => e.label.length), 1),
+			width: A.value,
+			height: D.height,
+			tickCount: D.ticks,
+			showAxis: D.axis,
+			formatTick: j,
+			includeZero: D.zero || F.value
 		}));
 		function R(e) {
 			return Math.round(e * 100) / 100;
 		}
-		let z = f(() => M.value ? P.value.map((e, t) => {
+		let z = f(() => A.value ? M.value.map((e, t) => {
 			let n = [], r = [];
-			return k.data.forEach((t, i) => {
-				let a = I(t, e.key);
-				if (a == null) {
+			return D.data.forEach((i, a) => {
+				let o = F.value ? I.value[a][t] : P(i, e.key);
+				if (o == null) {
 					r.length && n.push(r), r = [];
 					return;
 				}
 				r.push({
-					x: R(L.value.pointAt(i)),
-					y: R(L.value.y(a)),
-					index: i
+					x: R(L.value.pointAt(a)),
+					y: R(L.value.y(o)),
+					index: a
 				});
 			}), r.length && n.push(r), {
 				runs: n,
 				color: i(a(e, t)),
 				seriesIndex: t
 			};
-		}) : []), B = f(() => k.variant === "area" && !F.value && z.value.length > 0), V = f(() => {
-			let e = k.data?.length ?? 0;
+		}) : []), B = f(() => (D.variant === "area" || D.variant === "stacked") && !N.value && z.value.length > 0), be = f(() => !F.value || !A.value ? [] : M.value.map((e, t) => ({
+			top: D.data.map((e, n) => ({
+				x: R(L.value.pointAt(n)),
+				y: R(L.value.y(I.value[n][t])),
+				index: n
+			})),
+			base: D.data.map((e, n) => ({
+				x: R(L.value.pointAt(n)),
+				y: R(L.value.y(t === 0 ? 0 : I.value[n][t - 1])),
+				index: n
+			})),
+			color: i(a(e, t)),
+			seriesIndex: t
+		}))), V = f(() => {
+			let e = D.data?.length ?? 0;
 			return {
 				first: e ? R(L.value.pointAt(0)) : 0,
 				last: e ? R(L.value.pointAt(e - 1)) : 0,
@@ -130,11 +146,11 @@ var te = ["role", "aria-label"], ne = [
 			};
 		});
 		function H(e) {
-			return k.flush && e.x === V.value.last ? `L${V.value.right} ${e.y}` : "";
+			return D.flush && e.x === V.value.last ? `L${V.value.right} ${e.y}` : "";
 		}
-		let U = f(() => Math.min(Math.max(k.tension, 0), 1) / 6);
+		let U = f(() => Math.min(Math.max(D.tension, 0), 1) / 6);
 		function W(e) {
-			let t = e[0], n = e[e.length - 1], r = k.flush && t.x === V.value.first ? `M${V.value.left} ${t.y} L${t.x} ${t.y}` : `M${t.x} ${t.y}`;
+			let t = e[0], n = e[e.length - 1], r = D.flush && t.x === V.value.first ? `M${V.value.left} ${t.y} L${t.x} ${t.y}` : `M${t.x} ${t.y}`;
 			if (U.value === 0 || e.length < 2) return [
 				r,
 				...e.slice(1).map((e) => `L${e.x} ${e.y}`),
@@ -150,11 +166,14 @@ var te = ["role", "aria-label"], ne = [
 				H(n)
 			].filter(Boolean).join(" ");
 		}
-		function ve(e) {
-			let t = L.value.plot.top + L.value.plot.height, n = e[0], r = e[e.length - 1], i = k.flush && n.x === V.value.first ? V.value.left : n.x, a = k.flush && r.x === V.value.last ? V.value.right : r.x;
+		function xe(e) {
+			let t = L.value.plot.top + L.value.plot.height, n = e[0], r = e[e.length - 1], i = D.flush && n.x === V.value.first ? V.value.left : n.x, a = D.flush && r.x === V.value.last ? V.value.right : r.x;
 			return `${W(e)} L${a} ${t} L${i} ${t} Z`;
 		}
-		let G = `iryx-area-${D()}`, K = `iryx-plot-clip-${D()}`, q = S(), J = f(() => q.value == null ? [] : z.value.flatMap((e) => {
+		function Se(e, t) {
+			return `${W(e)} ${W([...t].reverse()).replace("M", "L")} Z`;
+		}
+		let G = `iryx-area-${te()}`, K = `iryx-plot-clip-${te()}`, q = S(), J = f(() => q.value == null ? [] : z.value.flatMap((e) => {
 			for (let t of e.runs) {
 				let n = t.find((e) => e.index === q.value);
 				if (n) return [{
@@ -165,69 +184,70 @@ var te = ["role", "aria-label"], ne = [
 			return [];
 		})), Y = f(() => q.value == null ? void 0 : R(L.value.pointAt(q.value))), X = f(() => {
 			if (q.value == null) return;
-			let e = k.data[q.value];
+			let e = D.data[q.value];
 			if (!e) return;
-			let t = P.value.map((t, n) => ({
+			let t = M.value.map((t, n) => ({
 				name: t.name ?? t.key,
 				color: i(a(t, n)),
-				value: I(e, t.key)
+				value: P(e, t.key)
 			})).filter((e) => e.value != null).map((e) => ({
 				...e,
-				value: N(e.value)
+				value: j(e.value)
 			}));
 			if (!t.length) return;
-			let n = F.value ? Math.max(e.label.length, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2;
+			let n = N.value ? Math.max(e.label.length, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2;
 			return {
 				label: e.label,
 				rows: t,
-				multi: F.value,
-				x: r(L.value.pointAt(q.value), "x".repeat(n), M.value),
+				multi: N.value,
+				x: r(L.value.pointAt(q.value), "x".repeat(n), A.value),
 				y: Math.min(...J.value.map((e) => e.y), L.value.plot.top + L.value.plot.height)
 			};
-		}), Z = s(f(() => k.animate)), { revealed: ye } = c(f(() => !!(M.value && z.value.length)), Z), be = f(() => ({
-			transform: `scaleX(${+!!ye.value})`,
+		}), Z = s(f(() => D.animate)), { revealed: Ce } = c(f(() => !!(A.value && z.value.length)), Z), we = f(() => ({
+			transform: `scaleX(${+!!Ce.value})`,
 			transformOrigin: `${L.value.plot.left}px 0px`,
 			transition: `transform ${Z.value.duration}ms ${Z.value.css}`
 		})), Q = f(() => u());
 		function $(e, t) {
-			let n = k.ui?.[e];
-			return A.value ? [n, t] : Q.value[e]({ class: [n, t] });
+			let n = D.ui?.[e];
+			return O.value ? [n, t] : Q.value[e]({ class: [n, t] });
 		}
 		return (e, t) => (x(), m("div", {
 			ref_key: "root",
-			ref: j,
-			role: k.label ? "figure" : void 0,
-			"aria-label": k.label,
-			class: v($("root", k.class))
+			ref: k,
+			role: D.label ? "figure" : void 0,
+			"aria-label": D.label,
+			class: v($("root", D.class))
 		}, [
-			_e.value ? (x(), ee(l, {
+			ye.value ? (x(), ee(l, {
 				key: 0,
-				series: P.value,
-				unstyled: k.unstyled
+				series: M.value,
+				unstyled: D.unstyled
 			}, null, 8, ["series", "unstyled"])) : p("", !0),
-			h("div", { class: v(A.value ? void 0 : Q.value.plot()) }, [(x(), m("svg", {
-				width: E(M),
-				height: k.height,
-				viewBox: `0 0 ${E(M)} ${k.height}`,
+			h("div", { class: v(O.value ? void 0 : Q.value.plot()) }, [(x(), m("svg", {
+				width: E(A),
+				height: D.height,
+				viewBox: `0 0 ${E(A)} ${D.height}`,
 				"aria-hidden": "true",
 				class: v($("svg"))
 			}, [
-				k.axis ? (x(!0), m(d, { key: 0 }, C(L.value.ticks, (e) => (x(), m("g", { key: `tick-${e}` }, [h("line", {
+				D.axis ? (x(!0), m(d, { key: 0 }, C(L.value.ticks, (e) => (x(), m("g", { key: `tick-${e}` }, [h("line", {
 					x1: L.value.plot.left,
 					y1: L.value.y(e),
 					x2: L.value.plot.left + L.value.plot.width,
 					y2: L.value.y(e),
 					"stroke-width": "1",
 					class: v($("grid"))
-				}, null, 10, O), h("text", {
+				}, null, 10, ie), h("text", {
 					x: L.value.plot.left - E(8),
 					y: L.value.y(e),
 					"text-anchor": "end",
 					"dominant-baseline": "middle",
 					class: v($("tick"))
-				}, T(N(e)), 11, re)]))), 128)) : p("", !0),
+				}, T(j(e)), 11, ae)]))), 128)) : p("", !0),
 				w(e.$slots, "underlay", y(_(L.value))),
-				B.value ? (x(), m("defs", ie, [h("linearGradient", {
+				h("defs", null, [B.value ? (x(), m("linearGradient", {
+					key: 0,
 					id: G,
 					x1: "0",
 					y1: "0",
@@ -241,65 +261,74 @@ var te = ["role", "aria-label"], ne = [
 					offset: "100%",
 					"stop-color": "currentColor",
 					"stop-opacity": "0"
-				}, null, -1)]]), h("clipPath", { id: K }, [h("rect", {
+				}, null, -1)]])) : p("", !0), h("clipPath", { id: K }, [h("rect", {
 					x: L.value.plot.left,
 					y: L.value.plot.top,
 					width: L.value.plot.width,
 					height: L.value.plot.height,
-					style: b(be.value)
-				}, null, 12, ae)])])) : p("", !0),
+					style: b(we.value)
+				}, null, 12, oe)])]),
 				Y.value == null ? p("", !0) : (x(), m("line", {
-					key: 2,
+					key: 1,
 					x1: Y.value,
 					y1: L.value.plot.top,
 					x2: Y.value,
 					y2: L.value.plot.top + L.value.plot.height,
 					"stroke-width": "1",
 					class: v($("crosshair"))
-				}, null, 10, oe)),
-				h("g", { "clip-path": `url(#${K})` }, [(x(!0), m(d, null, C(B.value ? z.value[0].runs : [], (e, t) => (x(), m("path", {
-					key: `area-${t}`,
-					d: ve(e),
-					fill: `url(#${G})`,
-					style: b({ color: z.value[0].color }),
-					class: v($("area"))
-				}, null, 14, ce))), 128)), (x(!0), m(d, null, C(z.value, (e) => (x(), m(d, { key: `series-${e.seriesIndex}` }, [(x(!0), m(d, null, C(e.runs, (t, n) => (x(), m("path", {
-					key: `line-${e.seriesIndex}-${n}`,
-					d: W(t),
-					style: b({ stroke: e.color }),
-					class: v($("line"))
-				}, null, 14, le))), 128))], 64))), 128))], 8, se),
+				}, null, 10, se)),
+				h("g", { "clip-path": `url(#${K})` }, [
+					(x(!0), m(d, null, C(B.value ? z.value[0].runs : [], (e, t) => (x(), m("path", {
+						key: `area-${t}`,
+						d: xe(e),
+						fill: `url(#${G})`,
+						style: b({ color: z.value[0].color }),
+						class: v($("area"))
+					}, null, 14, le))), 128)),
+					(x(!0), m(d, null, C(be.value, (e) => (x(), m("path", {
+						key: `band-${e.seriesIndex}`,
+						d: Se(e.top, e.base),
+						style: b({ fill: e.color }),
+						class: v($("band"))
+					}, null, 14, ue))), 128)),
+					(x(!0), m(d, null, C(z.value, (e) => (x(), m(d, { key: `series-${e.seriesIndex}` }, [(x(!0), m(d, null, C(e.runs, (t, n) => (x(), m("path", {
+						key: `line-${e.seriesIndex}-${n}`,
+						d: W(t),
+						style: b({ stroke: e.color }),
+						class: v($("line"))
+					}, null, 14, de))), 128))], 64))), 128))
+				], 8, ce),
 				(x(!0), m(d, null, C(J.value, (e, t) => (x(), m(d, { key: `marker-${t}` }, [h("circle", {
 					cx: e.x,
 					cy: e.y,
 					r: "6",
 					class: v($("markerRing"))
-				}, null, 10, ue), h("circle", {
+				}, null, 10, fe), h("circle", {
 					cx: e.x,
 					cy: e.y,
 					r: "4",
 					style: b({ fill: e.color }),
 					class: v($("marker"))
-				}, null, 14, de)], 64))), 128)),
-				(x(!0), m(d, null, C(k.data, (e, t) => (x(), m(d, { key: `label-${e.label}-${t}` }, [t % L.value.labelStep === 0 ? (x(), m("text", {
+				}, null, 14, pe)], 64))), 128)),
+				(x(!0), m(d, null, C(D.data, (e, t) => (x(), m(d, { key: `label-${e.label}-${t}` }, [t % L.value.labelStep === 0 ? (x(), m("text", {
 					key: 0,
 					x: L.value.pointAt(t),
 					y: L.value.plot.top + L.value.plot.height + 14,
 					"text-anchor": "middle",
 					class: v($("category"))
-				}, T(e.label), 11, fe)) : p("", !0)], 64))), 128)),
+				}, T(e.label), 11, me)) : p("", !0)], 64))), 128)),
 				w(e.$slots, "overlay", y(_(L.value))),
-				(x(!0), m(d, null, C(k.data, (e, n) => (x(), m("rect", {
+				(x(!0), m(d, null, C(D.data, (e, n) => (x(), m("rect", {
 					key: `hit-${e.label}-${n}`,
 					x: L.value.plot.left + L.value.bandWidth * n,
 					y: L.value.plot.top,
 					width: L.value.bandWidth,
 					height: L.value.plot.height,
-					class: v(A.value ? void 0 : Q.value.hit()),
+					class: v(O.value ? void 0 : Q.value.hit()),
 					onPointerenter: (e) => q.value = n,
 					onPointerleave: t[0] ||= (e) => q.value = void 0
-				}, null, 42, pe))), 128))
-			], 10, ne)), X.value ? (x(), m("div", {
+				}, null, 42, he))), 128))
+			], 10, re)), X.value ? (x(), m("div", {
 				key: 0,
 				class: v($("tooltip", X.value.multi ? "flex-col items-start gap-1" : void 0)),
 				style: b({
@@ -322,15 +351,15 @@ var te = ["role", "aria-label"], ne = [
 				class: v($("tooltipValue"))
 			}, T(X.value.rows[0].value), 3))], 6)) : p("", !0)], 2),
 			h("div", { class: v($("table")) }, [h("table", null, [
-				h("caption", null, T(k.label), 1),
-				h("thead", null, [h("tr", null, [t[2] ||= h("th", { scope: "col" }, " Category ", -1), (x(!0), m(d, null, C(P.value, (e) => (x(), m("th", {
+				h("caption", null, T(D.label), 1),
+				h("thead", null, [h("tr", null, [t[2] ||= h("th", { scope: "col" }, " Category ", -1), (x(!0), m(d, null, C(M.value, (e) => (x(), m("th", {
 					key: e.key,
 					scope: "col"
 				}, T(e.name ?? "Value"), 1))), 128))])]),
-				h("tbody", null, [(x(!0), m(d, null, C(k.data, (e, t) => (x(), m("tr", { key: `row-${e.label}-${t}` }, [h("th", me, T(e.label), 1), (x(!0), m(d, null, C(P.value, (t) => (x(), m("td", { key: t.key }, T(I(e, t.key) == null ? "—" : N(I(e, t.key))), 1))), 128))]))), 128))])
+				h("tbody", null, [(x(!0), m(d, null, C(D.data, (e, t) => (x(), m("tr", { key: `row-${e.label}-${t}` }, [h("th", ge, T(e.label), 1), (x(!0), m(d, null, C(M.value, (t) => (x(), m("td", { key: t.key }, T(P(e, t.key) == null ? "—" : j(P(e, t.key))), 1))), 128))]))), 128))])
 			])], 2)
-		], 10, te));
+		], 10, ne));
 	}
 });
 //#endregion
-export { k as default };
+export { D as default };

package/dist/components/index.d.ts

@@ -23,6 +23,7 @@ export { default as ColorPicker } from './ColorPicker.vue';
 export { default as Combobox } from './Combobox.vue';
 export { default as CommandPalette } from './CommandPalette.vue';
 export { default as ConfirmDialog } from './ConfirmDialog.vue';
+export { default as ConfirmPopover } from './ConfirmPopover.vue';
 export { default as Container } from './Container.vue';
 export { default as ContextMenu } from './ContextMenu.vue';
 export { default as DateField } from './DateField.vue';