iryx-ui 0.23.0 → 0.24.0

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';

package/dist/components/index.js

@@ -28,61 +28,62 @@ import E from "./Kbd.js";
 import D from "./CommandPalette.js";
 import O from "./Dialog.js";
 import k from "./ConfirmDialog.js";
-import A from "./Container.js";
-import j from "./ContextMenu.js";
-import M from "./DateField.js";
-import N from "./DatePicker.js";
-import P from "./DateRangePicker.js";
-import F from "./DescriptionList.js";
-import I from "./DonutChart.js";
-import L from "./DropdownMenu.js";
-import R from "./Editable.js";
-import z from "./EmptyState.js";
-import B from "./FileUpload.js";
-import V from "./Form.js";
-import H from "./Label.js";
-import U from "./FormField.js";
-import W from "./HoverCard.js";
-import G from "./Input.js";
-import K from "./LineChart.js";
-import q from "./Menubar.js";
-import J from "./NavigationMenu.js";
-import Y from "./NumberInput.js";
-import X from "./PageHeader.js";
-import Z from "./Pagination.js";
-import Q from "./PasswordInput.js";
-import $ from "./PinInput.js";
-import ee from "./Popover.js";
-import te from "./Progress.js";
-import ne from "./RadioGroup.js";
-import re from "./Rating.js";
-import ie from "./ScrollArea.js";
-import ae from "./ScrollFade.js";
-import oe from "./Select.js";
-import se from "./Separator.js";
-import ce from "./Sidebar.js";
-import le from "./SignaturePad.js";
-import ue from "./Skeleton.js";
-import de from "./Slider.js";
-import fe from "./Sparkline.js";
-import pe from "./Splitter.js";
-import me from "./Stat.js";
-import he from "./Stepper.js";
-import ge from "./Switch.js";
-import _e from "./Table.js";
-import ve from "./Tabs.js";
-import ye from "./TagsInput.js";
-import be from "./Textarea.js";
-import xe from "./TimeField.js";
-import Se from "./Timeline.js";
-import Ce from "./Toaster.js";
-import we from "./Toggle.js";
-import Te from "./ToggleGroup.js";
-import Ee from "./Toolbar.js";
-import De from "./Tooltip.js";
-import Oe from "./Tree.js";
+import A from "./Popover.js";
+import j from "./ConfirmPopover.js";
+import M from "./Container.js";
+import N from "./ContextMenu.js";
+import P from "./DateField.js";
+import F from "./DatePicker.js";
+import I from "./DateRangePicker.js";
+import L from "./DescriptionList.js";
+import R from "./DonutChart.js";
+import z from "./DropdownMenu.js";
+import B from "./Editable.js";
+import V from "./EmptyState.js";
+import H from "./FileUpload.js";
+import U from "./Form.js";
+import W from "./Label.js";
+import G from "./FormField.js";
+import K from "./HoverCard.js";
+import q from "./Input.js";
+import J from "./LineChart.js";
+import Y from "./Menubar.js";
+import X from "./NavigationMenu.js";
+import Z from "./NumberInput.js";
+import Q from "./PageHeader.js";
+import $ from "./Pagination.js";
+import ee from "./PasswordInput.js";
+import te from "./PinInput.js";
+import ne from "./Progress.js";
+import re from "./RadioGroup.js";
+import ie from "./Rating.js";
+import ae from "./ScrollArea.js";
+import oe from "./ScrollFade.js";
+import se from "./Select.js";
+import ce from "./Separator.js";
+import le from "./Sidebar.js";
+import ue from "./SignaturePad.js";
+import de from "./Skeleton.js";
+import fe from "./Slider.js";
+import pe from "./Sparkline.js";
+import me from "./Splitter.js";
+import he from "./Stat.js";
+import ge from "./Stepper.js";
+import _e from "./Switch.js";
+import ve from "./Table.js";
+import ye from "./Tabs.js";
+import be from "./TagsInput.js";
+import xe from "./Textarea.js";
+import Se from "./TimeField.js";
+import Ce from "./Timeline.js";
+import we from "./Toaster.js";
+import Te from "./Toggle.js";
+import Ee from "./ToggleGroup.js";
+import De from "./Toolbar.js";
+import Oe from "./Tooltip.js";
+import ke from "./Tree.js";
 //#region src/components/index.ts
-var ke = /* @__PURE__ */ e({
+var Ae = /* @__PURE__ */ e({
 	Accordion: () => n,
 	Alert: () => r,
 	App: () => i,
@@ -108,63 +109,64 @@ var ke = /* @__PURE__ */ e({
 	Combobox: () => T,
 	CommandPalette: () => D,
 	ConfirmDialog: () => k,
-	Container: () => A,
-	ContextMenu: () => j,
-	DateField: () => M,
-	DatePicker: () => N,
-	DateRangePicker: () => P,
-	DescriptionList: () => F,
+	ConfirmPopover: () => j,
+	Container: () => M,
+	ContextMenu: () => N,
+	DateField: () => P,
+	DatePicker: () => F,
+	DateRangePicker: () => I,
+	DescriptionList: () => L,
 	Dialog: () => O,
-	DonutChart: () => I,
+	DonutChart: () => R,
 	Drawer: () => a,
-	DropdownMenu: () => L,
-	Editable: () => R,
-	EmptyState: () => z,
-	FileUpload: () => B,
-	Form: () => V,
-	FormField: () => U,
-	HoverCard: () => W,
+	DropdownMenu: () => z,
+	Editable: () => B,
+	EmptyState: () => V,
+	FileUpload: () => H,
+	Form: () => U,
+	FormField: () => G,
+	HoverCard: () => K,
 	Icon: () => t,
-	Input: () => G,
+	Input: () => q,
 	Kbd: () => E,
-	Label: () => H,
-	LineChart: () => K,
-	Menubar: () => q,
-	NavigationMenu: () => J,
-	NumberInput: () => Y,
-	PageHeader: () => X,
-	Pagination: () => Z,
-	PasswordInput: () => Q,
-	PinInput: () => $,
-	Popover: () => ee,
-	Progress: () => te,
-	RadioGroup: () => ne,
-	Rating: () => re,
-	ScrollArea: () => ie,
-	ScrollFade: () => ae,
-	Select: () => oe,
-	Separator: () => se,
-	Sidebar: () => ce,
-	SignaturePad: () => le,
-	Skeleton: () => ue,
-	Slider: () => de,
-	Sparkline: () => fe,
-	Splitter: () => pe,
-	Stat: () => me,
-	Stepper: () => he,
-	Switch: () => ge,
-	Table: () => _e,
-	Tabs: () => ve,
-	TagsInput: () => ye,
-	Textarea: () => be,
-	TimeField: () => xe,
-	Timeline: () => Se,
-	Toaster: () => Ce,
-	Toggle: () => we,
-	ToggleGroup: () => Te,
-	Toolbar: () => Ee,
-	Tooltip: () => De,
-	Tree: () => Oe
+	Label: () => W,
+	LineChart: () => J,
+	Menubar: () => Y,
+	NavigationMenu: () => X,
+	NumberInput: () => Z,
+	PageHeader: () => Q,
+	Pagination: () => $,
+	PasswordInput: () => ee,
+	PinInput: () => te,
+	Popover: () => A,
+	Progress: () => ne,
+	RadioGroup: () => re,
+	Rating: () => ie,
+	ScrollArea: () => ae,
+	ScrollFade: () => oe,
+	Select: () => se,
+	Separator: () => ce,
+	Sidebar: () => le,
+	SignaturePad: () => ue,
+	Skeleton: () => de,
+	Slider: () => fe,
+	Sparkline: () => pe,
+	Splitter: () => me,
+	Stat: () => he,
+	Stepper: () => ge,
+	Switch: () => _e,
+	Table: () => ve,
+	Tabs: () => ye,
+	TagsInput: () => be,
+	Textarea: () => xe,
+	TimeField: () => Se,
+	Timeline: () => Ce,
+	Toaster: () => we,
+	Toggle: () => Te,
+	ToggleGroup: () => Ee,
+	Toolbar: () => De,
+	Tooltip: () => Oe,
+	Tree: () => ke
 });
 //#endregion
-export { ke as components_exports };
+export { Ae as components_exports };

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export type { ColorPickerProps } from './components/ColorPicker.vue';
 export type { ComboboxItemGroup, ComboboxItemOption, ComboboxItems, ComboboxProps } from './components/Combobox.vue';
 export type { CommandPaletteProps } from './components/CommandPalette.vue';
 export type { ConfirmDialogProps } from './components/ConfirmDialog.vue';
+export type { ConfirmPopoverProps } from './components/ConfirmPopover.vue';
 export type { ContainerProps } from './components/Container.vue';
 export type { ContextMenuProps } from './components/ContextMenu.vue';
 export type { DateFieldProps } from './components/DateField.vue';

package/dist/index.js

@@ -67,110 +67,112 @@ import { resolveConfirm as tt, useConfirm as nt, useConfirmState as rt } from ".
 import { dialogTheme as it } from "./theme/dialog.js";
 import at from "./components/Dialog.js";
 import ot from "./components/ConfirmDialog.js";
-import { containerTheme as st } from "./theme/container.js";
-import ct from "./components/Container.js";
-import { dropdownMenuTheme as lt } from "./theme/dropdown-menu.js";
-import { isSeparator as ut, isSubmenu as dt } from "./composables/dropdown-menu.js";
-import ft from "./components/ContextMenu.js";
-import { dateFieldTheme as pt } from "./theme/date-field.js";
-import mt from "./components/DateField.js";
-import { datePickerTheme as ht } from "./theme/date-picker.js";
-import gt from "./components/DatePicker.js";
-import _t from "./components/DateRangePicker.js";
-import { descriptionListTheme as vt } from "./theme/description-list.js";
-import yt from "./components/DescriptionList.js";
-import { donutChartTheme as bt } from "./theme/donut-chart.js";
-import xt from "./components/DonutChart.js";
-import St from "./components/DropdownMenu.js";
-import { editableTheme as Ct } from "./theme/editable.js";
-import wt from "./components/Editable.js";
-import { emptyStateTheme as Tt } from "./theme/empty-state.js";
-import Et from "./components/EmptyState.js";
-import { fileUploadTheme as Dt } from "./theme/file-upload.js";
-import Ot from "./components/FileUpload.js";
-import kt from "./components/Form.js";
-import { labelTheme as At } from "./theme/label.js";
-import jt from "./components/Label.js";
-import Mt from "./components/FormField.js";
-import { hoverCardTheme as Nt } from "./theme/hover-card.js";
-import Pt from "./components/HoverCard.js";
-import Ft from "./components/Input.js";
-import { lineChartTheme as It } from "./theme/line-chart.js";
-import Lt from "./components/LineChart.js";
-import { menubarTheme as Rt } from "./theme/menubar.js";
-import zt from "./components/Menubar.js";
-import { isNavigationGroup as Bt } from "./composables/navigation-menu.js";
-import { navigationMenuTheme as Vt } from "./theme/navigation-menu.js";
-import Ht from "./components/NavigationMenu.js";
-import { addDecimals as Ut, clampDecimal as Wt, compareDecimals as Gt, formatDecimal as Kt, formatForLocale as qt, isDecimal as Jt, localeSeparators as Yt, parseDecimal as Xt, parseFromLocale as Zt, roundDecimal as Qt, toEditable as $t } from "./composables/decimal.js";
-import { numberInputTheme as en } from "./theme/number-input.js";
-import tn from "./components/NumberInput.js";
-import { pageHeaderTheme as nn } from "./theme/page-header.js";
-import rn from "./components/PageHeader.js";
-import { paginationTheme as an } from "./theme/pagination.js";
-import on from "./components/Pagination.js";
-import { passwordInputTheme as sn } from "./theme/password-input.js";
-import cn from "./components/PasswordInput.js";
-import { pinInputTheme as ln } from "./theme/pin-input.js";
-import un from "./components/PinInput.js";
-import { popoverTheme as dn } from "./theme/popover.js";
-import fn from "./components/Popover.js";
-import { progressTheme as pn } from "./theme/progress.js";
-import mn from "./components/Progress.js";
-import { radioGroupTheme as hn } from "./theme/radio-group.js";
-import gn from "./components/RadioGroup.js";
-import _n from "./components/Rating.js";
-import { scrollAreaTheme as vn } from "./theme/scroll-area.js";
-import yn from "./components/ScrollArea.js";
-import { scrollFadeTheme as bn } from "./theme/scroll-fade.js";
-import xn from "./components/ScrollFade.js";
-import { selectTheme as Sn } from "./theme/select.js";
-import Cn from "./components/Select.js";
-import { separatorTheme as wn } from "./theme/separator.js";
-import Tn from "./components/Separator.js";
-import { isSidebarGroup as En, isSidebarSection as Dn, toSidebarSections as On } from "./composables/sidebar.js";
-import { sidebarTheme as kn } from "./theme/sidebar.js";
-import An from "./components/Sidebar.js";
-import { hasInk as jn, strokeWidth as Mn } from "./composables/signature.js";
-import { signaturePadTheme as Nn } from "./theme/signature-pad.js";
-import Pn from "./components/SignaturePad.js";
-import { skeletonTheme as Fn } from "./theme/skeleton.js";
-import In from "./components/Skeleton.js";
-import { sliderTheme as Ln } from "./theme/slider.js";
-import Rn from "./components/Slider.js";
-import { sparklineTheme as zn } from "./theme/sparkline.js";
-import Bn from "./components/Sparkline.js";
-import { splitterTheme as Vn } from "./theme/splitter.js";
-import Hn from "./components/Splitter.js";
-import { statTheme as Un } from "./theme/stat.js";
-import Wn from "./components/Stat.js";
-import { stepperTheme as Gn } from "./theme/stepper.js";
-import Kn from "./components/Stepper.js";
-import { switchTheme as qn } from "./theme/switch.js";
-import Jn from "./components/Switch.js";
-import { getRowValue as Yn, useDataTable as Xn } from "./composables/data-table.js";
-import { tableTheme as Zn } from "./theme/table.js";
-import Qn from "./components/Table.js";
-import { tabsTheme as $n } from "./theme/tabs.js";
-import er from "./components/Tabs.js";
-import { tagsInputTheme as tr } from "./theme/tags-input.js";
-import nr from "./components/TagsInput.js";
-import rr from "./components/Textarea.js";
-import { timeFieldTheme as ir } from "./theme/time-field.js";
-import ar from "./components/TimeField.js";
-import { timelineTheme as or } from "./theme/timeline.js";
-import sr from "./components/Timeline.js";
-import { useToast as cr, useToastState as lr } from "./composables/toast.js";
-import { toastTheme as ur } from "./theme/toast.js";
-import dr from "./components/Toaster.js";
-import { toggleGroupTheme as fr, toggleTheme as pr } from "./theme/toggle.js";
-import mr from "./components/Toggle.js";
-import hr from "./components/ToggleGroup.js";
-import { toolbarTheme as gr } from "./theme/toolbar.js";
-import _r from "./components/Toolbar.js";
-import { tooltipTheme as vr } from "./theme/tooltip.js";
-import yr from "./components/Tooltip.js";
-import { treeTheme as br } from "./theme/tree.js";
-import xr from "./components/Tree.js";
-import { IryxUi as Sr, createIryxUi as Cr } from "./plugin.js";
-export { B as AXIS_GAP, s as Accordion, l as Alert, h as App, b as AppShell, x as AspectRatio, D as AuthProviders, A as Avatar, j as AvatarGroup, N as Badge, F as Banner, ie as BarChart, oe as Breadcrumb, E as Button, ce as ButtonGroup, V as CATEGORY_HEIGHT, H as CHAR_WIDTH, ve as Calendar, le as CalendarDate, be as Card, Ce as Carousel, re as ChartLegend, Me as Checkbox, Pe as Code, Ie as Collapsible, Ve as ColorPicker, Ue as Combobox, et as CommandPalette, ot as ConfirmDialog, ct as Container, ft as ContextMenu, mt as DateField, gt as DatePicker, _t as DateRangePicker, yt as DescriptionList, at as Dialog, xt as DonutChart, y as Drawer, St as DropdownMenu, wt as Editable, Et as EmptyState, Ot as FileUpload, kt as Form, Mt as FormField, Pt as HoverCard, o as Icon, Ft as Input, Sr as IryxUi, $e as Kbd, jt as Label, Lt as LineChart, zt as Menubar, Ht as NavigationMenu, tn as NumberInput, rn as PageHeader, on as Pagination, cn as PasswordInput, un as PinInput, fn as Popover, mn as Progress, Z as REVEAL_DURATION, gn as RadioGroup, _n as Rating, U as SERIES_SLOTS, yn as ScrollArea, xn as ScrollFade, Cn as Select, Tn as Separator, An as Sidebar, Pn as SignaturePad, In as Skeleton, Rn as Slider, Bn as Sparkline, Hn as Splitter, Wn as Stat, Kn as Stepper, Jn as Switch, W as TOP_PAD, Qn as Table, er as Tabs, nr as TagsInput, rr as Textarea, ue as Time, ar as TimeField, sr as Timeline, dr as Toaster, mr as Toggle, hr as ToggleGroup, _r as Toolbar, yr as Tooltip, xr as Tree, i as accordionTheme, Ut as addDecimals, c as alertTheme, _ as appShellTheme, f as applyTheme, S as authProvidersTheme, O as avatarGroupTheme, k as avatarTheme, M as badgeTheme, P as bannerTheme, te as barChartTheme, ae as breadcrumbTheme, C as buttonGroupContextKey, se as buttonGroupTheme, T as buttonTheme, _e as calendarTheme, ye as cardTheme, G as cartesianLayout, ne as chartLegendTheme, je as checkboxTheme, Wt as clampDecimal, K as clampTooltip, p as clearTheme, Ne as codeTheme, Fe as collapsibleTheme, Be as colorPickerTheme, He as comboboxTheme, qe as commandHaystack, Ze as commandPaletteTheme, Gt as compareDecimals, e as componentNames, st as containerTheme, Cr as createIryxUi, pt as dateFieldTheme, ht as datePickerTheme, t as defaultConfig, vt as descriptionListTheme, it as dialogTheme, bt as donutChartTheme, v as drawerTheme, lt as dropdownMenuTheme, Ct as editableTheme, Tt as emptyStateTheme, I as extent, Le as fieldBase, Dt as fileUploadTheme, L as finiteValues, we as formContextKey, Te as formFieldContextKey, Kt as formatDecimal, qt as formatForLocale, de as formatIsoDate, Ee as getByPath, Yn as getRowValue, jn as hasInk, Nt as hoverCardTheme, u as initAppearance, Re as inputTheme, n as iryxUiConfigKey, We as isApplePlatform, Je as isCommandGroup, Jt as isDecimal, a as isIconArray, Bt as isNavigationGroup, ut as isSeparator, En as isSidebarGroup, Dn as isSidebarSection, De as isStandardSchema, dt as isSubmenu, fe as isoToday, Oe as issuePath, Qe as kbdTheme, At as labelTheme, It as lineChartTheme, R as linearScale, Yt as localeSeparators, Ye as matchesHotkey, Rt as menubarTheme, Vt as navigationMenuTheme, z as niceTicks, en as numberInputTheme, nn as pageHeaderTheme, an as paginationTheme, Xt as parseDecimal, Zt as parseFromLocale, Ge as parseHotkey, sn as passwordInputTheme, ln as pinInputTheme, dn as popoverTheme, pn as progressTheme, hn as radioGroupTheme, tt as resolveConfirm, Qt as roundDecimal, vn as scrollAreaTheme, xe as scrollFadeMask, bn as scrollFadeTheme, Sn as selectTheme, wn as separatorTheme, q as seriesColor, kn as sidebarTheme, Nn as signaturePadTheme, Fn as skeletonTheme, Ln as sliderTheme, J as slotOf, zn as sparklineTheme, Vn as splitterTheme, Un as statTheme, Gn as stepperTheme, Mn as strokeWidth, qn as switchTheme, Zn as tableTheme, $n as tabsTheme, tr as tagsInputTheme, ze as textareaTheme, m as themes, ir as timeFieldTheme, or as timelineTheme, pe as toCalendarDate, Xe as toCommandGroups, $t as toEditable, me as toIsoDate, he as toIsoTime, On as toSidebarSections, ge as toTime, ur as toastTheme, fr as toggleGroupTheme, pr as toggleTheme, gr as toolbarTheme, Y as tooltipHalfWidth, vr as tooltipTheme, br as treeTheme, d as useAppearance, Ke as useApplePlatform, w as useButtonGroup, Q as useChartAnimation, $ as useChartProgress, ee as useChartReveal, nt as useConfirm, rt as useConfirmState, Xn as useDataTable, g as useElementSize, ke as useForm, Ae as useFormField, r as useIryxUiConfig, Se as useScrollEdges, cr as useToast, lr as useToastState, X as warnOnSlotOverflow };
+import { confirmPopoverTheme as st } from "./theme/confirm-popover.js";
+import { popoverTheme as ct } from "./theme/popover.js";
+import lt from "./components/Popover.js";
+import ut from "./components/ConfirmPopover.js";
+import { containerTheme as dt } from "./theme/container.js";
+import ft from "./components/Container.js";
+import { dropdownMenuTheme as pt } from "./theme/dropdown-menu.js";
+import { isSeparator as mt, isSubmenu as ht } from "./composables/dropdown-menu.js";
+import gt from "./components/ContextMenu.js";
+import { dateFieldTheme as _t } from "./theme/date-field.js";
+import vt from "./components/DateField.js";
+import { datePickerTheme as yt } from "./theme/date-picker.js";
+import bt from "./components/DatePicker.js";
+import xt from "./components/DateRangePicker.js";
+import { descriptionListTheme as St } from "./theme/description-list.js";
+import Ct from "./components/DescriptionList.js";
+import { donutChartTheme as wt } from "./theme/donut-chart.js";
+import Tt from "./components/DonutChart.js";
+import Et from "./components/DropdownMenu.js";
+import { editableTheme as Dt } from "./theme/editable.js";
+import Ot from "./components/Editable.js";
+import { emptyStateTheme as kt } from "./theme/empty-state.js";
+import At from "./components/EmptyState.js";
+import { fileUploadTheme as jt } from "./theme/file-upload.js";
+import Mt from "./components/FileUpload.js";
+import Nt from "./components/Form.js";
+import { labelTheme as Pt } from "./theme/label.js";
+import Ft from "./components/Label.js";
+import It from "./components/FormField.js";
+import { hoverCardTheme as Lt } from "./theme/hover-card.js";
+import Rt from "./components/HoverCard.js";
+import zt from "./components/Input.js";
+import { lineChartTheme as Bt } from "./theme/line-chart.js";
+import Vt from "./components/LineChart.js";
+import { menubarTheme as Ht } from "./theme/menubar.js";
+import Ut from "./components/Menubar.js";
+import { isNavigationGroup as Wt } from "./composables/navigation-menu.js";
+import { navigationMenuTheme as Gt } from "./theme/navigation-menu.js";
+import Kt from "./components/NavigationMenu.js";
+import { addDecimals as qt, clampDecimal as Jt, compareDecimals as Yt, formatDecimal as Xt, formatForLocale as Zt, isDecimal as Qt, localeSeparators as $t, parseDecimal as en, parseFromLocale as tn, roundDecimal as nn, toEditable as rn } from "./composables/decimal.js";
+import { numberInputTheme as an } from "./theme/number-input.js";
+import on from "./components/NumberInput.js";
+import { pageHeaderTheme as sn } from "./theme/page-header.js";
+import cn from "./components/PageHeader.js";
+import { paginationTheme as ln } from "./theme/pagination.js";
+import un from "./components/Pagination.js";
+import { passwordInputTheme as dn } from "./theme/password-input.js";
+import fn from "./components/PasswordInput.js";
+import { pinInputTheme as pn } from "./theme/pin-input.js";
+import mn from "./components/PinInput.js";
+import { progressTheme as hn } from "./theme/progress.js";
+import gn from "./components/Progress.js";
+import { radioGroupTheme as _n } from "./theme/radio-group.js";
+import vn from "./components/RadioGroup.js";
+import yn from "./components/Rating.js";
+import { scrollAreaTheme as bn } from "./theme/scroll-area.js";
+import xn from "./components/ScrollArea.js";
+import { scrollFadeTheme as Sn } from "./theme/scroll-fade.js";
+import Cn from "./components/ScrollFade.js";
+import { selectTheme as wn } from "./theme/select.js";
+import Tn from "./components/Select.js";
+import { separatorTheme as En } from "./theme/separator.js";
+import Dn from "./components/Separator.js";
+import { isSidebarGroup as On, isSidebarSection as kn, toSidebarSections as An } from "./composables/sidebar.js";
+import { sidebarTheme as jn } from "./theme/sidebar.js";
+import Mn from "./components/Sidebar.js";
+import { hasInk as Nn, strokeWidth as Pn } from "./composables/signature.js";
+import { signaturePadTheme as Fn } from "./theme/signature-pad.js";
+import In from "./components/SignaturePad.js";
+import { skeletonTheme as Ln } from "./theme/skeleton.js";
+import Rn from "./components/Skeleton.js";
+import { sliderTheme as zn } from "./theme/slider.js";
+import Bn from "./components/Slider.js";
+import { sparklineTheme as Vn } from "./theme/sparkline.js";
+import Hn from "./components/Sparkline.js";
+import { splitterTheme as Un } from "./theme/splitter.js";
+import Wn from "./components/Splitter.js";
+import { statTheme as Gn } from "./theme/stat.js";
+import Kn from "./components/Stat.js";
+import { stepperTheme as qn } from "./theme/stepper.js";
+import Jn from "./components/Stepper.js";
+import { switchTheme as Yn } from "./theme/switch.js";
+import Xn from "./components/Switch.js";
+import { getRowValue as Zn, useDataTable as Qn } from "./composables/data-table.js";
+import { tableTheme as $n } from "./theme/table.js";
+import er from "./components/Table.js";
+import { tabsTheme as tr } from "./theme/tabs.js";
+import nr from "./components/Tabs.js";
+import { tagsInputTheme as rr } from "./theme/tags-input.js";
+import ir from "./components/TagsInput.js";
+import ar from "./components/Textarea.js";
+import { timeFieldTheme as or } from "./theme/time-field.js";
+import sr from "./components/TimeField.js";
+import { timelineTheme as cr } from "./theme/timeline.js";
+import lr from "./components/Timeline.js";
+import { useToast as ur, useToastState as dr } from "./composables/toast.js";
+import { toastTheme as fr } from "./theme/toast.js";
+import pr from "./components/Toaster.js";
+import { toggleGroupTheme as mr, toggleTheme as hr } from "./theme/toggle.js";
+import gr from "./components/Toggle.js";
+import _r from "./components/ToggleGroup.js";
+import { toolbarTheme as vr } from "./theme/toolbar.js";
+import yr from "./components/Toolbar.js";
+import { tooltipTheme as br } from "./theme/tooltip.js";
+import xr from "./components/Tooltip.js";
+import { treeTheme as Sr } from "./theme/tree.js";
+import Cr from "./components/Tree.js";
+import { IryxUi as wr, createIryxUi as Tr } from "./plugin.js";
+export { B as AXIS_GAP, s as Accordion, l as Alert, h as App, b as AppShell, x as AspectRatio, D as AuthProviders, A as Avatar, j as AvatarGroup, N as Badge, F as Banner, ie as BarChart, oe as Breadcrumb, E as Button, ce as ButtonGroup, V as CATEGORY_HEIGHT, H as CHAR_WIDTH, ve as Calendar, le as CalendarDate, be as Card, Ce as Carousel, re as ChartLegend, Me as Checkbox, Pe as Code, Ie as Collapsible, Ve as ColorPicker, Ue as Combobox, et as CommandPalette, ot as ConfirmDialog, ut as ConfirmPopover, ft as Container, gt as ContextMenu, vt as DateField, bt as DatePicker, xt as DateRangePicker, Ct as DescriptionList, at as Dialog, Tt as DonutChart, y as Drawer, Et as DropdownMenu, Ot as Editable, At as EmptyState, Mt as FileUpload, Nt as Form, It as FormField, Rt as HoverCard, o as Icon, zt as Input, wr as IryxUi, $e as Kbd, Ft as Label, Vt as LineChart, Ut as Menubar, Kt as NavigationMenu, on as NumberInput, cn as PageHeader, un as Pagination, fn as PasswordInput, mn as PinInput, lt as Popover, gn as Progress, Z as REVEAL_DURATION, vn as RadioGroup, yn as Rating, U as SERIES_SLOTS, xn as ScrollArea, Cn as ScrollFade, Tn as Select, Dn as Separator, Mn as Sidebar, In as SignaturePad, Rn as Skeleton, Bn as Slider, Hn as Sparkline, Wn as Splitter, Kn as Stat, Jn as Stepper, Xn as Switch, W as TOP_PAD, er as Table, nr as Tabs, ir as TagsInput, ar as Textarea, ue as Time, sr as TimeField, lr as Timeline, pr as Toaster, gr as Toggle, _r as ToggleGroup, yr as Toolbar, xr as Tooltip, Cr as Tree, i as accordionTheme, qt as addDecimals, c as alertTheme, _ as appShellTheme, f as applyTheme, S as authProvidersTheme, O as avatarGroupTheme, k as avatarTheme, M as badgeTheme, P as bannerTheme, te as barChartTheme, ae as breadcrumbTheme, C as buttonGroupContextKey, se as buttonGroupTheme, T as buttonTheme, _e as calendarTheme, ye as cardTheme, G as cartesianLayout, ne as chartLegendTheme, je as checkboxTheme, Jt as clampDecimal, K as clampTooltip, p as clearTheme, Ne as codeTheme, Fe as collapsibleTheme, Be as colorPickerTheme, He as comboboxTheme, qe as commandHaystack, Ze as commandPaletteTheme, Yt as compareDecimals, e as componentNames, st as confirmPopoverTheme, dt as containerTheme, Tr as createIryxUi, _t as dateFieldTheme, yt as datePickerTheme, t as defaultConfig, St as descriptionListTheme, it as dialogTheme, wt as donutChartTheme, v as drawerTheme, pt as dropdownMenuTheme, Dt as editableTheme, kt as emptyStateTheme, I as extent, Le as fieldBase, jt as fileUploadTheme, L as finiteValues, we as formContextKey, Te as formFieldContextKey, Xt as formatDecimal, Zt as formatForLocale, de as formatIsoDate, Ee as getByPath, Zn as getRowValue, Nn as hasInk, Lt as hoverCardTheme, u as initAppearance, Re as inputTheme, n as iryxUiConfigKey, We as isApplePlatform, Je as isCommandGroup, Qt as isDecimal, a as isIconArray, Wt as isNavigationGroup, mt as isSeparator, On as isSidebarGroup, kn as isSidebarSection, De as isStandardSchema, ht as isSubmenu, fe as isoToday, Oe as issuePath, Qe as kbdTheme, Pt as labelTheme, Bt as lineChartTheme, R as linearScale, $t as localeSeparators, Ye as matchesHotkey, Ht as menubarTheme, Gt as navigationMenuTheme, z as niceTicks, an as numberInputTheme, sn as pageHeaderTheme, ln as paginationTheme, en as parseDecimal, tn as parseFromLocale, Ge as parseHotkey, dn as passwordInputTheme, pn as pinInputTheme, ct as popoverTheme, hn as progressTheme, _n as radioGroupTheme, tt as resolveConfirm, nn as roundDecimal, bn as scrollAreaTheme, xe as scrollFadeMask, Sn as scrollFadeTheme, wn as selectTheme, En as separatorTheme, q as seriesColor, jn as sidebarTheme, Fn as signaturePadTheme, Ln as skeletonTheme, zn as sliderTheme, J as slotOf, Vn as sparklineTheme, Un as splitterTheme, Gn as statTheme, qn as stepperTheme, Pn as strokeWidth, Yn as switchTheme, $n as tableTheme, tr as tabsTheme, rr as tagsInputTheme, ze as textareaTheme, m as themes, or as timeFieldTheme, cr as timelineTheme, pe as toCalendarDate, Xe as toCommandGroups, rn as toEditable, me as toIsoDate, he as toIsoTime, An as toSidebarSections, ge as toTime, fr as toastTheme, mr as toggleGroupTheme, hr as toggleTheme, vr as toolbarTheme, Y as tooltipHalfWidth, br as tooltipTheme, Sr as treeTheme, d as useAppearance, Ke as useApplePlatform, w as useButtonGroup, Q as useChartAnimation, $ as useChartProgress, ee as useChartReveal, nt as useConfirm, rt as useConfirmState, Qn as useDataTable, g as useElementSize, ke as useForm, Ae as useFormField, r as useIryxUiConfig, Se as useScrollEdges, ur as useToast, dr as useToastState, X as warnOnSlotOverflow };

package/dist/theme/confirm-popover.d.ts

@@ -0,0 +1,32 @@
+export declare const confirmPopoverTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            description?: import("tailwind-variants").ClassValue;
+            actions?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            description?: import("tailwind-variants").ClassValue;
+            actions?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    description: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            description?: import("tailwind-variants").ClassValue;
+            actions?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    description: string;
+    actions: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    description: string;
+    actions: string;
+}>>;
+export type ConfirmPopoverSlots = keyof ReturnType<typeof confirmPopoverTheme>;

package/dist/theme/confirm-popover.js

@@ -0,0 +1,8 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/confirm-popover.ts
+var t = e({ slots: {
+	description: "text-sm text-muted-foreground",
+	actions: "mt-3 flex justify-end gap-2"
+} });
+//#endregion
+export { t as confirmPopoverTheme };

package/dist/theme/index.d.ts

@@ -18,6 +18,7 @@ export * from './collapsible';
 export * from './color-picker';
 export * from './combobox';
 export * from './command-palette';
+export * from './confirm-popover';
 export * from './container';
 export * from './date-field';
 export * from './date-picker';

package/dist/theme/kbd.js

@@ -3,7 +3,7 @@ import { tv as e } from "tailwind-variants";
 var t = e({
 	slots: {
 		root: "inline-flex shrink-0 items-center",
-		key: "inline-flex items-center justify-center rounded border border-current/25 bg-current/10 text-center font-medium text-current/75",
+		key: "inline-flex items-center justify-center rounded border border-current/25 text-center font-medium text-current",
 		separator: "text-current/60"
 	},
 	variants: { size: {

package/dist/theme/line-chart.d.ts

@@ -15,6 +15,7 @@ export declare const lineChartTheme: import("tailwind-variants").TVReturnType<{
             tooltip?: import("tailwind-variants").ClassValue;
             tooltipLabel?: import("tailwind-variants").ClassValue;
             tooltipValue?: import("tailwind-variants").ClassValue;
+            band?: import("tailwind-variants").ClassValue;
             crosshair?: import("tailwind-variants").ClassValue;
             markerRing?: import("tailwind-variants").ClassValue;
         };
@@ -36,6 +37,7 @@ export declare const lineChartTheme: import("tailwind-variants").TVReturnType<{
             tooltip?: import("tailwind-variants").ClassValue;
             tooltipLabel?: import("tailwind-variants").ClassValue;
             tooltipValue?: import("tailwind-variants").ClassValue;
+            band?: import("tailwind-variants").ClassValue;
             crosshair?: import("tailwind-variants").ClassValue;
             markerRing?: import("tailwind-variants").ClassValue;
         };
@@ -49,6 +51,7 @@ export declare const lineChartTheme: import("tailwind-variants").TVReturnType<{
     category: string;
     line: string;
     area: string;
+    band: string;
     crosshair: string;
     marker: string;
     markerRing: string;
@@ -74,6 +77,7 @@ export declare const lineChartTheme: import("tailwind-variants").TVReturnType<{
             tooltip?: import("tailwind-variants").ClassValue;
             tooltipLabel?: import("tailwind-variants").ClassValue;
             tooltipValue?: import("tailwind-variants").ClassValue;
+            band?: import("tailwind-variants").ClassValue;
             crosshair?: import("tailwind-variants").ClassValue;
             markerRing?: import("tailwind-variants").ClassValue;
         };
@@ -87,6 +91,7 @@ export declare const lineChartTheme: import("tailwind-variants").TVReturnType<{
     category: string;
     line: string;
     area: string;
+    band: string;
     crosshair: string;
     marker: string;
     markerRing: string;
@@ -104,6 +109,7 @@ export declare const lineChartTheme: import("tailwind-variants").TVReturnType<{
     category: string;
     line: string;
     area: string;
+    band: string;
     crosshair: string;
     marker: string;
     markerRing: string;

package/dist/theme/line-chart.js

@@ -9,6 +9,7 @@ var t = e({ slots: {
 	category: "fill-muted-foreground text-xs",
 	line: "fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]",
 	area: "stroke-none",
+	band: "stroke-none opacity-80",
 	crosshair: "stroke-border",
 	marker: "fill-current",
 	markerRing: "fill-background",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",