iryx-ui 0.9.0 → 0.10.2

package/README.md

@@ -291,6 +291,7 @@ app.use(createIryxUi({ unstyled: true }))
 | `INumberInput` | Decimal-safe numeric field — the model is a **string**, with `min`/`max`/`step`, `precision` and locale-aware display |
 | `ISparkline` | Tiny inline trend chart — pure SVG, no charting dependency |
 | `IBarChart` | Categorical bar chart with a round-number axis, hover tooltip and a table view |
+| `ILineChart` | Line or area chart with a crosshair, hover marker and a table view |
 | `IFileUpload` | Drag-and-drop file field with `accept` / `maxSize` / `maxFiles`, thumbnails and a remove action |
 | `IDatePicker` | Calendar in a popover; the model is an ISO `YYYY-MM-DD` **string** |
 | `IDateRangePicker` | Two-month range calendar; the model is `{ start, end }` ISO strings |
@@ -482,6 +483,172 @@ chrome; use `ui` to reach the parts (`root`, `input`, `leading`, `trailing`,
 forwarded to the `<input>` itself. `ref` exposes the element as `.input` for
 focus management.
 
+#### Multiple series
+
+Both charts take plain rows plus a `series` descriptor — the same shape
+`ITable` uses. Omit `series` for the single-measure case.
+
+```vue
+<IBarChart
+  :data="[
+    { label: 'Jan', revenue: 4200, expenses: 3100 },
+    { label: 'Feb', revenue: 5600, expenses: 3400 },
+  ]"
+  :series="[
+    { key: 'revenue', name: 'Revenue', slot: 0 },
+    { key: 'expenses', name: 'Expenses', slot: 1 },
+  ]"
+  label="Cashflow by month"
+/>
+```
+
+Bars group inside their category; lines draw one path each. One hover reports
+**every** series for that category in a single tooltip, so the reader compares
+in one place instead of chasing marks.
+
+**`slot` pins a series to a palette colour.** Without it, colour follows array
+position — so filtering a series out repaints the survivors and the reader has
+to relearn the chart. Pin the slots whenever series can be toggled.
+
+**The legend is mandatory from two series up.** `legend: false` only silences
+the single-series case, where the title already names what is plotted. Colour
+alone is never a dependable identity channel, so this is not configurable.
+
+Past eight series the colours stop identifying anything; the chart warns in
+development and you should fold the tail into "Other" or switch to small
+multiples.
+
+`variant="area"` is ignored for multiple series — overlapping washes muddy into
+a colour that belongs to neither.
+
+#### Annotations, and why there is no plugin API
+
+Chart.js has plugins because canvas is opaque — once painted you cannot select
+or style anything, so the only way in is an imperative draw hook. SVG has no
+such problem, so these charts hand you the layout and let you write ordinary
+markup into it:
+
+```vue
+<ILineChart :data="revenue" label="Revenue against target">
+  <template #overlay="{ plot, value }">
+    <line
+      :x1="plot.left" :y1="value(7000)"
+      :x2="plot.left + plot.width" :y2="value(7000)"
+      stroke="var(--iryx-warning)" stroke-width="2" stroke-dasharray="4 4"
+    />
+  </template>
+</ILineChart>
+```
+
+`#underlay` renders behind the marks — target bands, shaded regions. `#overlay`
+renders in front — reference lines, callouts. Both sit below the hit targets,
+so hovering keeps working through whatever you draw.
+
+Both receive the `CartesianLayout`:
+
+| Prop | What it gives you |
+| --- | --- |
+| `plot` | `{ left, top, width, height }` of the plot rectangle, in px |
+| `value(n)` | A data value to its pixel on the value axis |
+| `bandCentre(i)` | The centre of category `i`, in px |
+| `bandWidth` | Size of one category slot |
+| `ticks` | The axis values actually drawn |
+| `orientation` | `'vertical'` or `'horizontal'` |
+
+That's strictly more capable than a draw hook: it's declarative, reactive, and
+type-checked, with no lifecycle or registration order to learn.
+
+For a chart type that doesn't exist here, the same primitives are exported —
+`cartesianLayout`, `linearScale`, `niceTicks`, `seriesColor` — so you can build
+one on the same spine rather than starting over.
+
+#### Chart colours
+
+Eight categorical slots, `--iryx-chart-1` … `--iryx-chart-8`, usable as Tailwind
+colours (`text-chart-3`, `fill-chart-5`). They encode **identity** — which
+series a mark belongs to — never magnitude.
+
+```vue
+<!-- One series per slot, assigned in order. -->
+<ISparkline :data="revenue" class="text-chart-1" />
+
+<ISparkline :data="expenses" class="text-chart-2" />
+```
+
+Three rules, and they are not stylistic:
+
+- **Assign in order, never cycle.** A ninth series is not a generated ninth
+  hue — fold it into "Other", or switch to small multiples. A generated colour
+  hasn't been checked for separation against its neighbours.
+- **Status colours are never series colours.** A series that happens to land in
+  slot 4 must not read as a warning. `success`/`warning`/`danger`/`info` stay
+  reserved.
+- **Colour follows the entity, not its rank.** If a filter removes a series,
+  the survivors keep their slots rather than shifting up.
+
+Tailwind scans source text, so a class name assembled at runtime is never
+generated — write the slots out, or reach for the variable:
+
+```vue
+<!-- Silently unstyled: Tailwind never sees this string -->
+<ISparkline :class="`text-chart-${index + 1}`" />
+
+<!-- Either of these works -->
+<ISparkline :class="['text-chart-1', 'text-chart-2'][index]" />
+
+<ISparkline :style="{ color: `var(--iryx-chart-${index + 1})` }" />
+```
+
+The steps are not eyeballed. Each clears a lightness band, a chroma floor, and
+protanopia/deuteranopia separation against its own surface, checked with a
+validator rather than by eye. **Dark has its own steps**, validated against the
+dark background — not an automatic flip of the light ones.
+
+Two caps worth knowing before you design around them:
+
+| Chart form | Max series |
+| --- | --- |
+| Bars, lines, stacks — only neighbours touch | **8** |
+| Scatter, bubble, small multiples — any two marks can sit side by side | **3** |
+
+Past those, the answer is fewer series or facets, not more colours. If you
+re-step any slot, re-run the validator for **both** modes.
+
+#### Line charts
+
+```vue
+<ILineChart
+  :data="[
+    { label: 'Jan', value: 4200 },
+    { label: 'Feb', value: null },
+    { label: 'Mar', value: 5600 },
+  ]"
+  variant="area"
+  label="Revenue by month"
+/>
+```
+
+Same `data`, `height`, `ticks`, `axis`, `locale`, `format` and `label` props as
+`IBarChart`, plus:
+
+| Prop | Effect |
+| --- | --- |
+| `variant` | `line` (default) or `area`, which adds a wash beneath the line |
+| `zero` | Force zero onto the axis. **Off by default** |
+
+**`zero` is off here and always on for bars, deliberately.** A bar is read by
+length, so a truncated baseline lies about the comparison. A line is read by
+its *shape*, and a series hovering around 8,000 flattens into a straight edge
+once the axis starts at nothing. Turn it on when the distance from zero is the
+point.
+
+`null` breaks the line rather than bridging it, so a missing reading never
+draws a slope that didn't happen.
+
+Hovering shows a crosshair and a single ringed marker on the reading under the
+cursor — not a dot on every point, which is noise the axis and tooltip already
+cover.
+
 #### Bar charts
 
 ```vue
@@ -523,9 +690,17 @@ visually-hidden table instead, so a screen reader gets the actual numbers
 rather than a blank graphic. That table renders even before the container has
 been measured — the data is never gated behind layout.
 
-Long category labels thin out to every *n*th rather than rotating or
-colliding. For many categories or long names, that's the honest limit of this
-chart — reach for a table.
+**`orientation="horizontal"`** runs the categories down the side:
+
+```vue
+<IBarChart :data="spend" orientation="horizontal" label="Spend by category" />
+```
+
+Vertical charts thin colliding labels to every *n*th, which is fine for `Jan`
+/ `Feb` and lossy for `Travel and accommodation`. Turn the chart and the names
+get real width, so nothing is dropped — that's the case horizontal is for.
+Everything else behaves the same: grouped series, the tooltip, the round-number
+axis anchored at zero.
 
 #### Sparklines
 

package/dist/component-names.d.ts

@@ -3,5 +3,5 @@
  * 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 ["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"];
+export declare const componentNames: readonly ["Alert", "App", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "ChartLegend", "Checkbox", "Combobox", "ConfirmDialog", "DatePicker", "DateRangePicker", "Dialog", "DropdownMenu", "EmptyState", "FileUpload", "Form", "FormField", "Input", "Label", "LineChart", "NumberInput", "Pagination", "PasswordInput", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Sparkline", "Stat", "Stepper", "Switch", "Table", "Tabs", "Textarea", "Toaster", "Tooltip"];
 export type ComponentName = (typeof componentNames)[number];

package/dist/component-names.js

@@ -0,0 +1,4 @@
+//#region src/component-names.ts
+var e = /* @__PURE__ */ "Alert.App.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Card.ChartLegend.Checkbox.Combobox.ConfirmDialog.DatePicker.DateRangePicker.Dialog.DropdownMenu.EmptyState.FileUpload.Form.FormField.Input.Label.LineChart.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 → components}/Alert.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { Alert02Icon as e, AlertCircleIcon as t, Cancel01Icon as n, CheckmarkCircle02Icon as r, InformationCircleIcon as i } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { Alert02Icon as e, AlertCircleIcon as t, Cancel01Icon as n, CheckmarkCircle02Icon as r, InformationCircleIcon as i } from "../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
 import { useIryxUiConfig as a } from "../config.js";
 import { alertTheme as o } from "../theme/alert.js";
 import s from "./Icon.js";

package/dist/{packages/iryx-ui/src/components → components}/Banner.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-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 { 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 { bannerTheme as r } from "../theme/banner.js";

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

@@ -1,17 +1,34 @@
+import type { ChartSeries } from '../composables/cartesian';
 import type { SparseValue } from '../composables/scale';
+/**
+ * A row. `value` is the single-series shortcut; with `series` set, each entry
+ * reads its own key off the row instead — plain objects and a descriptor, the
+ * same shape `ITable` uses.
+ */
 export interface BarChartDatum {
     label: string;
     /** `null` is a missing reading — no bar is drawn, which is not the same as 0. */
-    value: SparseValue;
+    value?: SparseValue;
+    [key: string]: unknown;
 }
 export interface BarChartProps {
     data?: readonly BarChartDatum[];
+    /** Two or more measures per category. Omit for the single-series case. */
+    series?: readonly ChartSeries[];
+    /**
+     * `horizontal` runs the categories down the side, where a long name has room
+     * to be read. Vertical charts thin their labels to avoid collisions, so long
+     * or numerous category names are the case to turn the chart for.
+     */
+    orientation?: 'vertical' | 'horizontal';
     /** Rendered height in px. Width always fills the container. */
     height?: number;
     /** Target tick count. The axis lands on round numbers, so this is a hint. */
     ticks?: number;
     /** Drop the value axis and its gridlines. */
     axis?: boolean;
+    /** Drop the legend. Only honoured for a single series — see below. */
+    legend?: boolean;
     /** Locale and options for every number shown — ticks and tooltip alike. */
     locale?: string;
     format?: Intl.NumberFormatOptions;
@@ -25,12 +42,54 @@ export interface BarChartProps {
     class?: string;
     ui?: Partial<Record<'root' | 'svg' | 'grid' | 'tick' | 'category' | 'bar' | 'tooltip' | 'tooltipLabel' | 'tooltipValue' | 'table', string>>;
 }
-declare const __VLS_export: import("vue").DefineComponent<BarChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BarChartProps> & Readonly<{}>, {
+declare var __VLS_6: {
+    orientation: import("..").ChartOrientation;
+    ticks: number[];
+    plot: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    value: (value: number) => number;
+    y: (value: number) => number;
+    bandWidth: number;
+    labelStep: number;
+    bandCentre: (index: number) => number;
+}, __VLS_8: {
+    orientation: import("..").ChartOrientation;
+    ticks: number[];
+    plot: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    value: (value: number) => number;
+    y: (value: number) => number;
+    bandWidth: number;
+    labelStep: number;
+    bandCentre: (index: number) => number;
+};
+type __VLS_Slots = {} & {
+    underlay?: (props: typeof __VLS_6) => any;
+} & {
+    overlay?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BarChartProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BarChartProps> & Readonly<{}>, {
     unstyled: boolean;
     data: readonly BarChartDatum[];
+    legend: boolean;
+    orientation: "vertical" | "horizontal";
     height: number;
     ticks: number;
     axis: 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/BarChart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,258 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { cartesianLayout as t, clampTooltip as n, seriesColor as r, slotOf as i, tooltipHalfWidth as a, warnOnSlotOverflow as o } from "../composables/cartesian.js";
+import { useElementSize as s } from "../composables/element-size.js";
+import { barChartTheme as c } from "../theme/bar-chart.js";
+import l from "./ChartLegend.js";
+import { Fragment as u, computed as d, createBlock as f, 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 } from "vue";
+//#region src/components/BarChart.vue?vue&type=script&setup=true&lang.ts
+var D = ["role", "aria-label"], O = [
+	"width",
+	"height",
+	"viewBox"
+], k = [
+	"x1",
+	"y1",
+	"x2",
+	"y2"
+], A = [
+	"x",
+	"y",
+	"text-anchor",
+	"dominant-baseline"
+], j = ["d"], ee = [
+	"x",
+	"y",
+	"text-anchor",
+	"dominant-baseline"
+], te = [
+	"x",
+	"y",
+	"width",
+	"height",
+	"onPointerenter"
+], ne = { scope: "row" }, re = .7, M = /*@__PURE__*/ g({
+	__name: "BarChart",
+	props: {
+		data: { default: () => [] },
+		series: {},
+		orientation: { default: "vertical" },
+		height: { default: 240 },
+		ticks: { default: 5 },
+		axis: {
+			type: Boolean,
+			default: !0
+		},
+		legend: {
+			type: Boolean,
+			default: !0
+		},
+		locale: {},
+		format: {},
+		label: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(g) {
+		let M = g, N = e(), P = d(() => M.unstyled ?? N.unstyled), F = S(), { width: I } = s(F), L = d(() => new Intl.NumberFormat(M.locale, M.format));
+		function R(e) {
+			return L.value.format(e);
+		}
+		let z = d(() => {
+			let e = M.series?.length ? [...M.series] : [{ key: "value" }];
+			return o(e.length), e;
+		}), B = d(() => z.value.length > 1), V = d(() => B.value || M.legend && z.value[0].name != null);
+		function H(e, t) {
+			let n = e[t];
+			return typeof n == "number" && Number.isFinite(n) ? n : null;
+		}
+		let U = d(() => M.orientation === "horizontal"), W = d(() => t({
+			orientation: M.orientation,
+			values: M.data.flatMap((e) => z.value.map((t) => H(e, t.key))),
+			categories: M.data.length,
+			longestLabel: Math.max(...M.data.map((e) => e.label.length), 1),
+			width: I.value,
+			height: M.height,
+			tickCount: M.ticks,
+			showAxis: M.axis,
+			formatTick: R,
+			includeZero: !0
+		})), G = d(() => W.value.plot), K = d(() => W.value.y), q = d(() => W.value.bandWidth), J = d(() => q.value * re), Y = d(() => Math.max(2, Math.min(24, J.value / z.value.length))), ie = d(() => {
+			if (!I.value || !M.data.length) return [];
+			let e = W.value.value(0), t = z.value.length, n = +(t > 1);
+			return M.data.flatMap((r, i) => z.value.flatMap((a, o) => {
+				let s = H(r, a.key);
+				if (s == null) return [];
+				let c = W.value.value(s), l = W.value.bandCentre(i) - Y.value * t / 2 + Y.value * o + n, u = Math.max(Y.value - n * 2, 1), d = Math.abs(c - e);
+				return [U.value ? {
+					x: Math.min(c, e),
+					y: l,
+					width: d,
+					height: u,
+					direction: s >= 0 ? "right" : "left",
+					seriesIndex: o,
+					categoryIndex: i
+				} : {
+					x: l,
+					y: Math.min(c, e),
+					width: u,
+					height: d,
+					direction: s >= 0 ? "up" : "down",
+					seriesIndex: o,
+					categoryIndex: i
+				}];
+			}));
+		});
+		function ae(e) {
+			let { x: t, y: n, width: r, height: i } = e, a = t + r, o = n + i, s = Math.min(4, r / 2, i / 2, e.direction === "up" || e.direction === "down" ? i : r);
+			switch (e.direction) {
+				case "up": return `M${t} ${o} L${t} ${n + s} Q${t} ${n} ${t + s} ${n} L${a - s} ${n} Q${a} ${n} ${a} ${n + s} L${a} ${o} Z`;
+				case "down": return `M${t} ${n} L${t} ${o - s} Q${t} ${o} ${t + s} ${o} L${a - s} ${o} Q${a} ${o} ${a} ${o - s} L${a} ${n} Z`;
+				case "right": return `M${t} ${n} L${a - s} ${n} Q${a} ${n} ${a} ${n + s} L${a} ${o - s} Q${a} ${o} ${a - s} ${o} L${t} ${o} Z`;
+				default: return `M${a} ${n} L${t + s} ${n} Q${t} ${n} ${t} ${n + s} L${t} ${o - s} Q${t} ${o} ${t + s} ${o} L${a} ${o} Z`;
+			}
+		}
+		let oe = d(() => W.value.labelStep), X = S(), Z = d(() => {
+			if (X.value == null) return;
+			let e = M.data[X.value];
+			if (!e) return;
+			let t = z.value.map((t, n) => ({
+				name: t.name ?? t.key,
+				color: r(i(t, n)),
+				value: H(e, t.key)
+			})).filter((e) => e.value != null).map((e) => ({
+				...e,
+				value: R(e.value)
+			}));
+			if (!t.length) return;
+			let o = B.value ? Math.max(e.label.length, ...t.map((e) => e.name.length + e.value.length + 3)) : e.label.length + t[0].value.length + 2, s = W.value.bandCentre(X.value);
+			if (U.value) {
+				let r = Math.max(...z.value.map((t) => {
+					let n = H(e, t.key);
+					return n == null ? -Infinity : W.value.value(n);
+				})), i = "x".repeat(o), c = a(i), l = r + c + 8, u = l + c <= I.value;
+				return {
+					label: e.label,
+					rows: t,
+					multi: B.value,
+					x: n(u ? l : r - c - 8, i, I.value),
+					y: s
+				};
+			}
+			let c = Math.min(...z.value.map((t) => {
+				let n = H(e, t.key);
+				return n == null ? Infinity : Math.min(W.value.value(n), W.value.value(0));
+			}));
+			return {
+				label: e.label,
+				rows: t,
+				multi: B.value,
+				x: n(s, "x".repeat(o), I.value),
+				y: c
+			};
+		}), Q = d(() => c());
+		function $(e, t) {
+			let n = M.ui?.[e];
+			return P.value ? [n, t] : Q.value[e]({ class: [n, t] });
+		}
+		function se(e) {
+			let t = X.value != null && X.value !== e.categoryIndex;
+			return P.value ? [M.ui?.bar] : Q.value.bar({ class: [M.ui?.bar, t ? Q.value.faded() : void 0] });
+		}
+		return (e, t) => (x(), m("div", {
+			ref_key: "root",
+			ref: F,
+			role: M.label ? "figure" : void 0,
+			"aria-label": M.label,
+			class: v($("root", M.class))
+		}, [
+			V.value ? (x(), f(l, {
+				key: 0,
+				series: z.value,
+				unstyled: M.unstyled
+			}, null, 8, ["series", "unstyled"])) : p("", !0),
+			h("div", { class: v(P.value ? void 0 : Q.value.plot()) }, [(x(), m("svg", {
+				width: E(I),
+				height: M.height,
+				viewBox: `0 0 ${E(I)} ${M.height}`,
+				"aria-hidden": "true",
+				class: v($("svg"))
+			}, [
+				M.axis ? (x(!0), m(u, { key: 0 }, C(W.value.ticks, (e) => (x(), m("g", { key: `tick-${e}` }, [h("line", {
+					x1: U.value ? W.value.value(e) : G.value.left,
+					y1: U.value ? G.value.top : K.value(e),
+					x2: U.value ? W.value.value(e) : G.value.left + G.value.width,
+					y2: U.value ? G.value.top + G.value.height : K.value(e),
+					"stroke-width": "1",
+					class: v($("grid"))
+				}, null, 10, k), h("text", {
+					x: U.value ? W.value.value(e) : G.value.left - E(8),
+					y: U.value ? G.value.top + G.value.height + 14 : K.value(e),
+					"text-anchor": U.value ? "middle" : "end",
+					"dominant-baseline": U.value ? void 0 : "middle",
+					class: v($("tick"))
+				}, T(R(e)), 11, A)]))), 128)) : p("", !0),
+				w(e.$slots, "underlay", y(_(W.value))),
+				(x(!0), m(u, null, C(ie.value, (e, t) => (x(), m("path", {
+					key: `bar-${e.categoryIndex}-${e.seriesIndex}-${t}`,
+					d: ae(e),
+					style: b({ fill: E(r)(E(i)(z.value[e.seriesIndex], e.seriesIndex)) }),
+					class: v(se(e))
+				}, null, 14, j))), 128)),
+				(x(!0), m(u, null, C(M.data, (e, t) => (x(), m(u, { key: `label-${e.label}-${t}` }, [t % oe.value === 0 ? (x(), m("text", {
+					key: 0,
+					x: U.value ? G.value.left - E(8) : W.value.bandCentre(t),
+					y: U.value ? W.value.bandCentre(t) : G.value.top + G.value.height + 14,
+					"text-anchor": U.value ? "end" : "middle",
+					"dominant-baseline": U.value ? "middle" : void 0,
+					class: v($("category"))
+				}, T(e.label), 11, ee)) : p("", !0)], 64))), 128)),
+				w(e.$slots, "overlay", y(_(W.value))),
+				(x(!0), m(u, null, C(M.data, (e, n) => (x(), m("rect", {
+					key: `hit-${e.label}-${n}`,
+					x: U.value ? G.value.left : G.value.left + q.value * n,
+					y: U.value ? G.value.top + q.value * n : G.value.top,
+					width: U.value ? G.value.width : q.value,
+					height: U.value ? q.value : G.value.height,
+					class: v(P.value ? void 0 : Q.value.hit()),
+					onPointerenter: (e) => X.value = n,
+					onPointerleave: t[0] ||= (e) => X.value = void 0
+				}, null, 42, te))), 128))
+			], 10, O)), Z.value ? (x(), m("div", {
+				key: 0,
+				class: v($("tooltip", Z.value.multi ? "flex-col items-start gap-1" : void 0)),
+				style: b({
+					left: `${Z.value.x}px`,
+					top: `${Z.value.y}px`,
+					transform: U.value ? "translate(-50%, -50%)" : "translate(-50%, -100%) translateY(-8px)"
+				})
+			}, [h("span", { class: v($("tooltipLabel")) }, T(Z.value.label), 3), Z.value.multi ? (x(!0), m(u, { key: 0 }, C(Z.value.rows, (e) => (x(), m("span", {
+				key: e.name,
+				class: "flex items-center gap-1.5"
+			}, [
+				h("span", {
+					class: "size-2 shrink-0 rounded-full",
+					style: b({ background: e.color })
+				}, null, 4),
+				h("span", { class: v($("tooltipLabel")) }, T(e.name), 3),
+				h("span", { class: v($("tooltipValue")) }, T(e.value), 3)
+			]))), 128)) : (x(), m("span", {
+				key: 1,
+				class: v($("tooltipValue"))
+			}, T(Z.value.rows[0].value), 3))], 6)) : p("", !0)], 2),
+			h("table", { class: v($("table")) }, [
+				h("caption", null, T(M.label), 1),
+				h("thead", null, [h("tr", null, [t[1] ||= h("th", { scope: "col" }, " Category ", -1), (x(!0), m(u, null, C(z.value, (e) => (x(), m("th", {
+					key: e.key,
+					scope: "col"
+				}, T(e.name ?? "Value"), 1))), 128))])]),
+				h("tbody", null, [(x(!0), m(u, null, C(M.data, (e, t) => (x(), m("tr", { key: `row-${e.label}-${t}` }, [h("th", ne, T(e.label), 1), (x(!0), m(u, null, C(z.value, (t) => (x(), m("td", { key: t.key }, T(H(e, t.key) == null ? "—" : R(H(e, t.key))), 1))), 128))]))), 128))])
+			], 2)
+		], 10, D));
+	}
+});
+//#endregion
+export { M as default };

package/dist/{packages/iryx-ui/src/components → components}/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { ArrowRight01Icon as e } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { ArrowRight01Icon 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 { breadcrumbTheme as r } from "../theme/breadcrumb.js";

package/dist/{packages/iryx-ui/src/components → components}/Button.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { Loading03Icon as e } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { Loading03Icon 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 { useButtonGroup as r } from "../composables/button-group.js";

package/dist/components/ChartLegend.js

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

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

@@ -0,0 +1,12 @@
+import type { ChartSeries } from '../composables/cartesian';
+export interface ChartLegendProps {
+    series: readonly ChartSeries[];
+    /** Dim the entries that are not the one being hovered. */
+    active?: number;
+    unstyled?: boolean;
+    class?: string;
+    ui?: Partial<Record<'root' | 'item' | 'swatch' | 'name', string>>;
+}
+declare const __VLS_export: import("vue").DefineComponent<ChartLegendProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ChartLegendProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/ChartLegend.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,31 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { seriesColor as t, slotOf as n } from "../composables/cartesian.js";
+import { chartLegendTheme as r } from "../theme/chart-legend.js";
+import { Fragment as i, computed as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, renderList as f, toDisplayString as p, unref as m } from "vue";
+//#region src/components/ChartLegend.vue?vue&type=script&setup=true&lang.ts
+var h = /*@__PURE__*/ c({
+	__name: "ChartLegend",
+	props: {
+		series: {},
+		active: {},
+		unstyled: { type: Boolean },
+		class: {},
+		ui: {}
+	},
+	setup(c) {
+		let h = c, g = e(), _ = a(() => h.unstyled ?? g.unstyled), v = a(() => r());
+		function y(e, t) {
+			let n = h.ui?.[e];
+			return _.value ? [n, t] : v.value[e]({ class: [n, t] });
+		}
+		return (e, r) => (d(), o("ul", { class: l(y("root", h.class)) }, [(d(!0), o(i, null, f(h.series, (e, r) => (d(), o("li", {
+			key: e.key,
+			class: l(y("item", h.active != null && h.active !== r ? "opacity-40" : void 0))
+		}, [s("span", {
+			class: l(y("swatch")),
+			style: u({ background: m(t)(m(n)(e, r)) })
+		}, null, 6), s("span", { class: l(y("name")) }, p(e.name ?? e.key), 3)], 2))), 128))], 2));
+	}
+});
+//#endregion
+export { h as default };

package/dist/{packages/iryx-ui/src/components → components}/Checkbox.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { MinusSignIcon as e, Tick02Icon as t } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { MinusSignIcon as e, Tick02Icon as t } from "../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
 import { useIryxUiConfig as n } from "../config.js";
 import r from "./Icon.js";
 import { checkboxTheme as i } from "../theme/checkbox.js";

package/dist/{packages/iryx-ui/src/components → components}/Combobox.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { ArrowDown01Icon as e, Tick02Icon as t } from "../../../../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
+import { ArrowDown01Icon as e, Tick02Icon as t } from "../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
 import { useIryxUiConfig as n } from "../config.js";
 import r from "./Icon.js";
 import { useFormField as i } from "../composables/form.js";