iryx-ui 0.9.0 → 0.10.2

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

@@ -0,0 +1,55 @@
+/**
+ * Shared by every multi-series chart. A legend is mandatory from two series
+ * up: colour alone is not a dependable identity channel, and the swatch beside
+ * the name is what makes it one.
+ */
+export declare const chartLegendTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            name?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            name?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    /** The mark carries the series colour. */
+    swatch: string;
+    /** The text never does — a light hue is illegible as type on the surface. */
+    name: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            item?: import("tailwind-variants").ClassValue;
+            swatch?: import("tailwind-variants").ClassValue;
+            name?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    item: string;
+    /** The mark carries the series colour. */
+    swatch: string;
+    /** The text never does — a light hue is illegible as type on the surface. */
+    name: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    item: string;
+    /** The mark carries the series colour. */
+    swatch: string;
+    /** The text never does — a light hue is illegible as type on the surface. */
+    name: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ChartLegendSlots = keyof ReturnType<typeof chartLegendTheme>;

package/dist/theme/chart-legend.js

@@ -0,0 +1,10 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/chart-legend.ts
+var t = e({ slots: {
+	root: "flex flex-wrap items-center gap-x-4 gap-y-1.5 pb-4",
+	item: "flex items-center gap-1.5 text-xs",
+	swatch: "size-2.5 shrink-0 rounded-full",
+	name: "text-muted-foreground"
+} });
+//#endregion
+export { t as chartLegendTheme };

package/dist/theme/index.d.ts

@@ -6,6 +6,7 @@ export * from './breadcrumb';
 export * from './button';
 export * from './button-group';
 export * from './card';
+export * from './chart-legend';
 export * from './checkbox';
 export * from './combobox';
 export * from './date-picker';
@@ -15,6 +16,7 @@ export * from './empty-state';
 export * from './file-upload';
 export * from './input';
 export * from './label';
+export * from './line-chart';
 export * from './number-input';
 export * from './pagination';
 export * from './password-input';

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

@@ -0,0 +1,143 @@
+export declare const lineChartTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
+            area?: import("tailwind-variants").ClassValue;
+            table?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
+            marker?: import("tailwind-variants").ClassValue;
+            plot?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            tick?: import("tailwind-variants").ClassValue;
+            category?: import("tailwind-variants").ClassValue;
+            hit?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            tooltipLabel?: import("tailwind-variants").ClassValue;
+            tooltipValue?: import("tailwind-variants").ClassValue;
+            crosshair?: import("tailwind-variants").ClassValue;
+            markerRing?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
+            area?: import("tailwind-variants").ClassValue;
+            table?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
+            marker?: import("tailwind-variants").ClassValue;
+            plot?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            tick?: import("tailwind-variants").ClassValue;
+            category?: import("tailwind-variants").ClassValue;
+            hit?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            tooltipLabel?: import("tailwind-variants").ClassValue;
+            tooltipValue?: import("tailwind-variants").ClassValue;
+            crosshair?: import("tailwind-variants").ClassValue;
+            markerRing?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    /**
+     * The tooltip's coordinates come from the SVG, so the SVG has to be its
+     * positioning context. Anchoring to the root instead shifts it up by the
+     * height of anything above the plot — the legend, most obviously.
+     */
+    plot: string;
+    svg: string;
+    grid: string;
+    tick: string;
+    category: string;
+    /** 2px, round join and cap, per the shared line-mark spec. */
+    line: string;
+    /** A wash at ~10%, never a saturated block competing with the line. */
+    area: string;
+    /** Recessive: it locates the reading, it is not a reading itself. */
+    crosshair: string;
+    marker: string;
+    /** Keeps the marker legible where it sits on top of the line. */
+    markerRing: string;
+    hit: string;
+    tooltip: string;
+    tooltipLabel: string;
+    tooltipValue: string;
+    table: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            svg?: import("tailwind-variants").ClassValue;
+            area?: import("tailwind-variants").ClassValue;
+            table?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
+            marker?: import("tailwind-variants").ClassValue;
+            plot?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            tick?: import("tailwind-variants").ClassValue;
+            category?: import("tailwind-variants").ClassValue;
+            hit?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            tooltipLabel?: import("tailwind-variants").ClassValue;
+            tooltipValue?: import("tailwind-variants").ClassValue;
+            crosshair?: import("tailwind-variants").ClassValue;
+            markerRing?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    /**
+     * The tooltip's coordinates come from the SVG, so the SVG has to be its
+     * positioning context. Anchoring to the root instead shifts it up by the
+     * height of anything above the plot — the legend, most obviously.
+     */
+    plot: string;
+    svg: string;
+    grid: string;
+    tick: string;
+    category: string;
+    /** 2px, round join and cap, per the shared line-mark spec. */
+    line: string;
+    /** A wash at ~10%, never a saturated block competing with the line. */
+    area: string;
+    /** Recessive: it locates the reading, it is not a reading itself. */
+    crosshair: string;
+    marker: string;
+    /** Keeps the marker legible where it sits on top of the line. */
+    markerRing: string;
+    hit: string;
+    tooltip: string;
+    tooltipLabel: string;
+    tooltipValue: string;
+    table: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    /**
+     * The tooltip's coordinates come from the SVG, so the SVG has to be its
+     * positioning context. Anchoring to the root instead shifts it up by the
+     * height of anything above the plot — the legend, most obviously.
+     */
+    plot: string;
+    svg: string;
+    grid: string;
+    tick: string;
+    category: string;
+    /** 2px, round join and cap, per the shared line-mark spec. */
+    line: string;
+    /** A wash at ~10%, never a saturated block competing with the line. */
+    area: string;
+    /** Recessive: it locates the reading, it is not a reading itself. */
+    crosshair: string;
+    marker: string;
+    /** Keeps the marker legible where it sits on top of the line. */
+    markerRing: string;
+    hit: string;
+    tooltip: string;
+    tooltipLabel: string;
+    tooltipValue: string;
+    table: string;
+}, undefined, unknown, unknown, undefined>>;
+export type LineChartSlots = keyof ReturnType<typeof lineChartTheme>;

package/dist/theme/line-chart.js

@@ -0,0 +1,22 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/line-chart.ts
+var t = e({ slots: {
+	root: "w-full text-primary",
+	plot: "relative",
+	svg: "block w-full overflow-visible",
+	grid: "stroke-border",
+	tick: "fill-muted-foreground text-xs [font-variant-numeric:tabular-nums]",
+	category: "fill-muted-foreground text-xs",
+	line: "fill-none stroke-current stroke-2 [stroke-linecap:round] [stroke-linejoin:round]",
+	area: "fill-current stroke-none opacity-10",
+	crosshair: "stroke-border",
+	marker: "fill-current",
+	markerRing: "fill-background",
+	hit: "fill-transparent",
+	tooltip: "pointer-events-none absolute z-10 flex items-baseline gap-1.5 rounded-lg border border-border bg-background px-2 py-1 text-xs whitespace-nowrap text-foreground shadow-md",
+	tooltipLabel: "text-muted-foreground",
+	tooltipValue: "font-medium [font-variant-numeric:tabular-nums]",
+	table: "sr-only"
+} });
+//#endregion
+export { t as lineChartTheme };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "iryx-ui",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.10.2",
   "description": "A Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "author": "therok1",
   "license": "MIT",
@@ -41,6 +41,12 @@
   "engines": {
     "node": ">=20"
   },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit"
+  },
   "peerDependencies": {
     "vue": "^3.5.0"
   },
@@ -62,11 +68,5 @@
     "vitest": "^4.1.8",
     "vue": "^3.5.35",
     "vue-tsc": "^3.3.4"
-  },
-  "scripts": {
-    "build": "vite build && vue-tsc -p tsconfig.build.json",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "typecheck": "vue-tsc --noEmit"
   }
-}
+}

package/theme.css

@@ -77,6 +77,30 @@
   --iryx-info-muted: oklch(0.97 0.014 254.604);
   --iryx-info-muted-foreground: oklch(0.488 0.243 264.376);
   --iryx-info-border: oklch(0.882 0.059 254.128);
+
+  /*
+   * Categorical chart series. Identity only — which series a mark belongs to,
+   * never how large it is. Assign in order and never cycle: a ninth series
+   * folds into "Other" or becomes small multiples, because a generated ninth
+   * hue cannot be checked for the separation the first eight were chosen for.
+   *
+   * Status colours are deliberately NOT reused here. A series that happens to
+   * be slot 4 must never be mistaken for a warning.
+   *
+   * These steps are not eyeballed. They clear the lightness band, a chroma
+   * floor of 0.10, protanopia/deuteranopia separation and contrast against the
+   * surface, verified with the dataviz validator. Dark has its own steps,
+   * validated against the dark surface — not an automatic flip. Re-run the
+   * validator before changing any of them.
+   */
+  --iryx-chart-1: oklch(0.59 0.2 277);
+  --iryx-chart-2: oklch(0.68 0.17 50);
+  --iryx-chart-3: oklch(0.62 0.13 175);
+  --iryx-chart-4: oklch(0.75 0.16 90);
+  --iryx-chart-5: oklch(0.68 0.15 350);
+  --iryx-chart-6: oklch(0.52 0.14 145);
+  --iryx-chart-7: oklch(0.55 0.17 240);
+  --iryx-chart-8: oklch(0.58 0.21 25);
 }
 
 .dark {
@@ -116,6 +140,16 @@
   --iryx-info-muted: oklch(0.282 0.091 267.935);
   --iryx-info-muted-foreground: oklch(0.809 0.105 251.813);
   --iryx-info-border: oklch(0.379 0.146 265.522);
+
+  /* Chart series — their own steps, validated against the dark surface. */
+  --iryx-chart-1: oklch(0.62 0.19 277);
+  --iryx-chart-2: oklch(0.66 0.16 50);
+  --iryx-chart-3: oklch(0.62 0.13 175);
+  --iryx-chart-4: oklch(0.65 0.15 90);
+  --iryx-chart-5: oklch(0.65 0.15 350);
+  --iryx-chart-6: oklch(0.58 0.14 145);
+  --iryx-chart-7: oklch(0.6 0.16 240);
+  --iryx-chart-8: oklch(0.6 0.19 25);
 }
 
 @theme inline {
@@ -152,6 +186,14 @@
   --color-info-muted: var(--iryx-info-muted);
   --color-info-muted-foreground: var(--iryx-info-muted-foreground);
   --color-info-border: var(--iryx-info-border);
+  --color-chart-1: var(--iryx-chart-1);
+  --color-chart-2: var(--iryx-chart-2);
+  --color-chart-3: var(--iryx-chart-3);
+  --color-chart-4: var(--iryx-chart-4);
+  --color-chart-5: var(--iryx-chart-5);
+  --color-chart-6: var(--iryx-chart-6);
+  --color-chart-7: var(--iryx-chart-7);
+  --color-chart-8: var(--iryx-chart-8);
   --animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out infinite;
   --animate-fade-in: fade-in 150ms ease-out;
   --animate-fade-out: fade-out 150ms ease-in;

package/dist/packages/iryx-ui/src/component-names.js

@@ -1,4 +0,0 @@
-//#region src/component-names.ts
-var e = /* @__PURE__ */ "Alert.App.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Card.Checkbox.Combobox.ConfirmDialog.DatePicker.DateRangePicker.Dialog.DropdownMenu.EmptyState.FileUpload.Form.FormField.Input.Label.NumberInput.Pagination.PasswordInput.Progress.RadioGroup.Select.Separator.Skeleton.Sparkline.Stat.Stepper.Switch.Table.Tabs.Textarea.Toaster.Tooltip".split(".");
-//#endregion
-export { e as componentNames };

package/dist/packages/iryx-ui/src/components/BarChart.vue_vue_type_script_setup_true_lang.js

@@ -1,178 +0,0 @@
-import { useIryxUiConfig as e } from "../config.js";
-import { useElementSize as t } from "../composables/element-size.js";
-import { extent as n, linearScale as r, niceTicks as i } from "../composables/scale.js";
-import { barChartTheme as a } from "../theme/bar-chart.js";
-import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, normalizeClass as f, normalizeStyle as p, openBlock as m, ref as h, renderList as g, toDisplayString as _, unref as v } from "vue";
-//#region src/components/BarChart.vue?vue&type=script&setup=true&lang.ts
-var y = ["role", "aria-label"], b = [
-	"width",
-	"height",
-	"viewBox"
-], x = [
-	"x1",
-	"y1",
-	"x2",
-	"y2"
-], S = ["x", "y"], C = ["d"], w = ["x", "y"], T = [
-	"x",
-	"y",
-	"width",
-	"height",
-	"onPointerenter"
-], E = { scope: "row" }, D = 6.5, O = 8, k = 20, A = 8, j = .7, M = /*@__PURE__*/ d({
-	__name: "BarChart",
-	props: {
-		data: { default: () => [] },
-		height: { default: 240 },
-		ticks: { default: 5 },
-		axis: {
-			type: Boolean,
-			default: !0
-		},
-		locale: {},
-		format: {},
-		label: {},
-		unstyled: {
-			type: Boolean,
-			default: void 0
-		},
-		class: {},
-		ui: {}
-	},
-	setup(d) {
-		let M = d, N = e(), P = s(() => M.unstyled ?? N.unstyled), F = h(), { width: I } = t(F), L = s(() => new Intl.NumberFormat(M.locale, M.format));
-		function R(e) {
-			return L.value.format(e);
-		}
-		let z = s(() => {
-			let e = n(M.data.map((e) => e.value));
-			return e ? i(Math.min(0, e[0]), Math.max(0, e[1]), M.ticks) : i(0, 1, M.ticks);
-		}), B = s(() => {
-			if (!M.axis) return 0;
-			let e = Math.max(...z.value.ticks.map((e) => R(e).length), 1);
-			return Math.ceil(e * D) + O;
-		}), V = s(() => ({
-			left: B.value,
-			top: A,
-			width: Math.max(I.value - B.value, 0),
-			height: Math.max(M.height - A - k, 0)
-		})), H = s(() => r([z.value.min, z.value.max], [V.value.top + V.value.height, V.value.top])), U = s(() => M.data.length ? V.value.width / M.data.length : 0), W = s(() => Math.max(2, Math.min(24, U.value * j))), G = s(() => {
-			if (!I.value || !M.data.length) return [];
-			let e = H.value(0);
-			return M.data.flatMap((t, n) => {
-				let r = t.value;
-				if (typeof r != "number" || !Number.isFinite(r)) return [];
-				let i = H.value(r);
-				return [{
-					x: V.value.left + U.value * (n + .5) - W.value / 2,
-					y: Math.min(i, e),
-					width: W.value,
-					height: Math.abs(e - i),
-					up: r >= 0,
-					datum: t
-				}];
-			});
-		});
-		function K(e) {
-			let t = Math.min(4, e.width / 2, e.height), { x: n, width: r } = e, i = n + r;
-			if (e.up) {
-				let r = e.y, a = e.y + e.height;
-				return `M${n} ${a} L${n} ${r + t} Q${n} ${r} ${n + t} ${r} L${i - t} ${r} Q${i} ${r} ${i} ${r + t} L${i} ${a} Z`;
-			}
-			let a = e.y, o = e.y + e.height;
-			return `M${n} ${a} L${n} ${o - t} Q${n} ${o} ${n + t} ${o} L${i - t} ${o} Q${i} ${o} ${i} ${o - t} L${i} ${a} Z`;
-		}
-		let q = s(() => {
-			if (!U.value || !M.data.length) return 1;
-			let e = Math.max(...M.data.map((e) => e.label.length), 1);
-			return Math.max(1, Math.ceil((e * D + 8) / U.value));
-		}), J = h(), Y = s(() => {
-			if (J.value == null) return;
-			let e = M.data[J.value];
-			if (!e || typeof e.value != "number") return;
-			let t = e.label, n = R(e.value), r = ((t.length + n.length) * D + 28) / 2, i = V.value.left + U.value * (J.value + .5);
-			return {
-				label: t,
-				value: n,
-				x: Math.min(Math.max(i, r), Math.max(I.value - r, r)),
-				y: Math.min(H.value(e.value), H.value(0))
-			};
-		}), X = s(() => a());
-		function Z(e, t) {
-			let n = M.ui?.[e];
-			return P.value ? [n, t] : X.value[e]({ class: [n, t] });
-		}
-		function Q(e) {
-			let t = J.value != null && J.value !== e;
-			return P.value ? [M.ui?.bar] : X.value.bar({ class: [M.ui?.bar, t ? X.value.faded() : void 0] });
-		}
-		return (e, t) => (m(), l("div", {
-			ref_key: "root",
-			ref: F,
-			role: M.label ? "figure" : void 0,
-			"aria-label": M.label,
-			class: f(Z("root", M.class))
-		}, [
-			(m(), l("svg", {
-				width: v(I),
-				height: M.height,
-				viewBox: `0 0 ${v(I)} ${M.height}`,
-				"aria-hidden": "true",
-				class: f(Z("svg"))
-			}, [
-				M.axis ? (m(!0), l(o, { key: 0 }, g(z.value.ticks, (e) => (m(), l("g", { key: `tick-${e}` }, [u("line", {
-					x1: V.value.left,
-					y1: H.value(e),
-					x2: V.value.left + V.value.width,
-					y2: H.value(e),
-					"stroke-width": "1",
-					class: f(Z("grid"))
-				}, null, 10, x), u("text", {
-					x: V.value.left - O,
-					y: H.value(e),
-					"text-anchor": "end",
-					"dominant-baseline": "middle",
-					class: f(Z("tick"))
-				}, _(R(e)), 11, S)]))), 128)) : c("", !0),
-				(m(!0), l(o, null, g(G.value, (e, t) => (m(), l("path", {
-					key: `bar-${e.datum.label}-${t}`,
-					d: K(e),
-					class: f(Q(t))
-				}, null, 10, C))), 128)),
-				(m(!0), l(o, null, g(M.data, (e, t) => (m(), l(o, { key: `label-${e.label}-${t}` }, [t % q.value === 0 ? (m(), l("text", {
-					key: 0,
-					x: V.value.left + U.value * (t + .5),
-					y: V.value.top + V.value.height + 14,
-					"text-anchor": "middle",
-					class: f(Z("category"))
-				}, _(e.label), 11, w)) : c("", !0)], 64))), 128)),
-				(m(!0), l(o, null, g(M.data, (e, n) => (m(), l("rect", {
-					key: `hit-${e.label}-${n}`,
-					x: V.value.left + U.value * n,
-					y: V.value.top,
-					width: U.value,
-					height: V.value.height,
-					class: f(P.value ? void 0 : X.value.hit()),
-					onPointerenter: (e) => J.value = n,
-					onPointerleave: t[0] ||= (e) => J.value = void 0
-				}, null, 42, T))), 128))
-			], 10, b)),
-			Y.value ? (m(), l("div", {
-				key: 0,
-				class: f(Z("tooltip")),
-				style: p({
-					left: `${Y.value.x}px`,
-					top: `${Y.value.y}px`,
-					transform: "translate(-50%, -100%) translateY(-8px)"
-				})
-			}, [u("span", { class: f(Z("tooltipLabel")) }, _(Y.value.label), 3), u("span", { class: f(Z("tooltipValue")) }, _(Y.value.value), 3)], 6)) : c("", !0),
-			u("table", { class: f(Z("table")) }, [
-				u("caption", null, _(M.label), 1),
-				t[1] ||= u("thead", null, [u("tr", null, [u("th", { scope: "col" }, " Category "), u("th", { scope: "col" }, " Value ")])], -1),
-				u("tbody", null, [(m(!0), l(o, null, g(M.data, (e, t) => (m(), l("tr", { key: `row-${e.label}-${t}` }, [u("th", E, _(e.label), 1), u("td", null, _(typeof e.value == "number" ? R(e.value) : "—"), 1)]))), 128))])
-			], 2)
-		], 10, y));
-	}
-});
-//#endregion
-export { M as default };

package/dist/packages/iryx-ui/src/components/Dialog.vue_vue_type_script_setup_true_lang.js

@@ -1,99 +0,0 @@
-import { Cancel01Icon as e } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
-import { useIryxUiConfig as t } from "../config.js";
-import n from "./Icon.js";
-import { dialogTheme as r } from "../theme/dialog.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, unref as _, useModel as v, withCtx as y } from "vue";
-import { DialogContent as b, DialogDescription as x, DialogOverlay as S, DialogPortal as C, DialogRoot as w, DialogTitle as T, DialogTrigger as E, VisuallyHidden as D } from "reka-ui";
-//#region src/components/Dialog.vue?vue&type=script&setup=true&lang.ts
-var O = ["aria-label"], k = /*@__PURE__*/ d({
-	__name: "Dialog",
-	props: /*@__PURE__*/ f({
-		title: {},
-		description: {},
-		size: {},
-		dismissible: {
-			type: Boolean,
-			default: !0
-		},
-		showClose: {
-			type: Boolean,
-			default: !0
-		},
-		closeLabel: { default: "Close" },
-		unstyled: {
-			type: Boolean,
-			default: void 0
-		},
-		class: {},
-		ui: {}
-	}, {
-		open: {
-			type: Boolean,
-			default: !1
-		},
-		openModifiers: {}
-	}),
-	emits: ["update:open"],
-	setup(d) {
-		let f = d, k = v(d, "open"), A = t(), j = i(() => f.unstyled ?? A.unstyled), M = i(() => r({ size: f.size })), N = i(() => j.value ? f.ui?.overlay : M.value.overlay({ class: f.ui?.overlay })), P = i(() => j.value ? [f.ui?.content, f.class] : M.value.content({ class: [f.ui?.content, f.class] })), F = i(() => j.value ? f.ui?.header : M.value.header({ class: f.ui?.header })), I = i(() => j.value ? f.ui?.title : M.value.title({ class: f.ui?.title })), L = i(() => j.value ? f.ui?.description : M.value.description({ class: f.ui?.description })), R = i(() => j.value ? f.ui?.body : M.value.body({ class: f.ui?.body })), z = i(() => j.value ? f.ui?.footer : M.value.footer({ class: f.ui?.footer })), B = i(() => j.value ? f.ui?.close : M.value.close({ class: f.ui?.close }));
-		function V(e) {
-			!e && !f.dismissible || (k.value = e);
-		}
-		function H() {
-			k.value = !1;
-		}
-		return (t, r) => (m(), a(_(w), {
-			open: k.value,
-			"onUpdate:open": V
-		}, {
-			default: y(() => [t.$slots.trigger ? (m(), a(_(E), {
-				key: 0,
-				"as-child": ""
-			}, {
-				default: y(() => [h(t.$slots, "trigger")]),
-				_: 3
-			})) : o("", !0), u(_(C), null, {
-				default: y(() => [u(_(S), { class: p(N.value) }, null, 8, ["class"]), u(_(b), { class: p(P.value) }, {
-					default: y(() => [
-						f.title || f.description || t.$slots.header ? (m(), s("div", {
-							key: 0,
-							class: p(F.value)
-						}, [h(t.$slots, "header", {}, () => [u(_(T), { class: p(I.value) }, {
-							default: y(() => [h(t.$slots, "title", {}, () => [l(g(f.title), 1)])]),
-							_: 3
-						}, 8, ["class"]), f.description || t.$slots.description ? (m(), a(_(x), {
-							key: 0,
-							class: p(L.value)
-						}, {
-							default: y(() => [h(t.$slots, "description", {}, () => [l(g(f.description), 1)])]),
-							_: 3
-						}, 8, ["class"])) : o("", !0)])], 2)) : (m(), a(_(D), { key: 1 }, {
-							default: y(() => [u(_(T), null, {
-								default: y(() => [l(g(f.closeLabel), 1)]),
-								_: 1
-							})]),
-							_: 1
-						})),
-						c("div", { class: p(R.value) }, [h(t.$slots, "default")], 2),
-						t.$slots.footer ? (m(), s("div", {
-							key: 2,
-							class: p(z.value)
-						}, [h(t.$slots, "footer", { close: H })], 2)) : o("", !0),
-						f.showClose ? (m(), s("button", {
-							key: 3,
-							type: "button",
-							"aria-label": f.closeLabel,
-							class: p(B.value),
-							onClick: H
-						}, [u(n, { icon: _(e) }, null, 8, ["icon"])], 10, O)) : o("", !0)
-					]),
-					_: 3
-				}, 8, ["class"])]),
-				_: 3
-			})]),
-			_: 3
-		}, 8, ["open"]));
-	}
-});
-//#endregion
-export { k as default };