@wirecore/wirelayer-react 0.5.0 → 0.6.0

package/dist/{Field-hc416yJx.js → Field-DkYxlVar.js}

@@ -1,6 +1,6 @@
 "use client";
 import { a as e, n as t } from "./RecipesProvider-0idafuGm.js";
-import { n } from "./InputStatus-DS38XEkX.js";
+import { n } from "./InputStatus-hVzkU_4q.js";
 import { field as r, toggletip as i } from "@wirecore/wirelayer-recipes";
 import { CircleCheck as a, Info as o } from "lucide-react";
 import { useEffect as s, useRef as c, useState as l } from "react";
@@ -63,7 +63,10 @@ function m({ classes: i, label: o, helperText: s, error: c, invalid: l = !1, suc
 		]
 	});
 	return /* @__PURE__ */ u(n.Provider, {
-		value: { success: O },
+		value: {
+			success: O,
+			labelled: !!o
+		},
 		children: /* @__PURE__ */ d(f.Root, {
 			...C,
 			className: E.base({ class: x }),

package/dist/{Highlight-DdTridk2.js → Highlight-CX30-nP7.js}

@@ -89,24 +89,26 @@ function D({ items: t, source: n, accessors: r, pageSize: i, minSearchLength: a
 		source: n,
 		pageSize: i,
 		minSearchLength: a
-	}), { itemValue: c, itemLabel: l, itemDisabled: u, itemGroup: d, valueKey: p } = r, m = _(() => f(s.resolved, {
+	}), { itemValue: c, itemLabel: l, itemDisabled: u, itemGroup: d, itemKeywords: p, valueKey: m } = r, h = _(() => f(s.resolved, {
 		itemValue: c,
 		itemLabel: l,
 		itemDisabled: u,
 		itemGroup: d,
-		valueKey: p
+		itemKeywords: p,
+		valueKey: m
 	}), [
 		s.resolved,
 		c,
 		l,
 		u,
 		d,
-		p
-	]), h = o.dataSource;
+		p,
+		m
+	]), g = o.dataSource;
 	return {
 		...s,
 		items: s.active ? s.state.items : t,
-		resolvedOptions: m,
+		resolvedOptions: h,
 		resolve(e, t) {
 			if (!s.active) return;
 			let n = new Set(t.map((e) => e.key));
@@ -114,7 +116,7 @@ function D({ items: t, source: n, accessors: r, pageSize: i, minSearchLength: a
 		},
 		loading: s.active && s.state.status === "loading",
 		hasMore: s.active && s.state.hasMore,
-		emptyText: s.active ? s.state.tooShort ? h.minSearch(a ?? 0) : s.state.status === "error" ? h.error : void 0 : void 0
+		emptyText: s.active ? s.state.tooShort ? g.minSearch(a ?? 0) : s.state.status === "error" ? g.error : void 0 : void 0
 	};
 }
 //#endregion
@@ -123,34 +125,36 @@ function O(e, t, n = "") {
 	let { contains: r } = b({
 		sensitivity: "base",
 		usage: "sort"
-	}), { itemValue: i, itemLabel: s, itemDisabled: c, itemGroup: l, valueKey: u } = t, d = _(() => f(e, {
+	}), { itemValue: i, itemLabel: s, itemDisabled: c, itemGroup: l, itemKeywords: u, valueKey: d } = t, p = _(() => f(e, {
 		itemValue: i,
 		itemLabel: s,
 		itemDisabled: c,
 		itemGroup: l,
-		valueKey: u
+		itemKeywords: u,
+		valueKey: d
 	}), [
 		e,
 		i,
 		s,
 		c,
 		l,
-		u
-	]), p = _(() => a(d, n, r), [
-		d,
+		u,
+		d
+	]), m = _(() => a(p, n, r), [
+		p,
 		n,
 		r
-	]), m = _(() => o(p), [p]);
+	]), h = _(() => o(m), [m]);
 	return {
-		options: d,
-		visible: p,
-		groups: m,
-		ordered: _(() => m.flatMap((e) => e.options), [m]),
-		firstFor: (e) => o(a(d, e, r)).flatMap((e) => e.options).find((e) => !e.disabled)
+		options: p,
+		visible: m,
+		groups: h,
+		ordered: _(() => h.flatMap((e) => e.options), [h]),
+		firstFor: (e) => o(a(p, e, r)).flatMap((e) => e.options).find((e) => !e.disabled)
 	};
 }
 function k({ multiple: e, value: t, defaultValue: n, accessors: r, items: i, onChange: a }) {
-	let [o, s] = y(n ?? (e ? [] : null)), [c, f] = y([]), p = t === void 0 ? o : t, m = u(e ? p ?? [] : d(p), l(i, c), r), h = m.map((e) => e.key);
+	let [o, s] = y(n ?? (e ? [] : null)), [c, f] = y([]), p = t === void 0 ? o : t, m = u(e ? p ?? [] : d(p, i), l(i, c), r), h = m.map((e) => e.key);
 	function g(t) {
 		f(t);
 		let n = t.map((e) => e.value), r = e ? n : n[0] ?? null;

package/dist/{Input-OPRvjIYt.js → Input-D8U-Auys.js}

@@ -1,34 +1,35 @@
 "use client";
 import { a as e, n as t } from "./RecipesProvider-0idafuGm.js";
-import { r as n, t as r } from "./InputStatus-DS38XEkX.js";
+import { r as n, t as r } from "./InputStatus-hVzkU_4q.js";
 import { buttonColorKey as i, formatCount as a, iconButton as o, input as s, setTextControlValue as c } from "@wirecore/wirelayer-recipes";
 import { CircleAlert as l } from "lucide-react";
 import { useId as u, useRef as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 import { Field as h, useFieldContext as g } from "@ark-ui/react/field";
 //#region src/components/IconButton/IconButton.tsx
-function _({ classes: e, icon: n, label: r, variant: s, color: c, size: l, shape: u, disabled: d = !1, type: f = "button", badge: h = !1, badgeLabel: g = (e) => e === null ? "new" : `${e} new`, className: _, ...v }) {
-	let y = t("iconButton", o, e)({
-		variant: s,
-		color: i(c),
-		size: l,
-		shape: u
-	}), b = typeof h == "number" && h > 0 ? h : 0, x = b ? `${r}, ${g(a(b))}` : h === !0 ? `${r}, ${g(null)}` : r;
+function _({ classes: e, icon: n, iconProps: r, label: s, variant: c, color: l, size: u, shape: d, disabled: f = !1, type: h = "button", badge: g = !1, badgeLabel: _ = (e) => e === null ? "new" : `${e} new`, className: v, ...y }) {
+	let b = t("iconButton", o, e)({
+		variant: c,
+		color: i(l),
+		size: u,
+		shape: d
+	}), x = typeof g == "number" && g > 0 ? g : 0, S = x ? `${s}, ${_(a(x))}` : g === !0 ? `${s}, ${_(null)}` : s;
 	return /* @__PURE__ */ m("button", {
-		...v,
-		className: y.base({ class: _ }),
-		type: f,
-		disabled: d,
-		"aria-label": x,
+		...y,
+		className: b.base({ class: v }),
+		type: h,
+		disabled: f,
+		"aria-label": S,
 		children: [/* @__PURE__ */ p(n, {
-			className: y.icon(),
+			...r,
+			className: b.icon(),
 			"aria-hidden": "true"
-		}), b ? /* @__PURE__ */ p("span", {
-			className: y.badge(),
+		}), x ? /* @__PURE__ */ p("span", {
+			className: b.badge(),
 			"aria-hidden": "true",
-			children: a(b)
-		}) : h === !0 && /* @__PURE__ */ p("span", {
-			className: y.dot(),
+			children: a(x)
+		}) : g === !0 && /* @__PURE__ */ p("span", {
+			className: b.dot(),
 			"aria-hidden": "true"
 		})]
 	});

package/dist/{InputStatus-DS38XEkX.js → InputStatus-hVzkU_4q.js}

@@ -3,7 +3,10 @@ import { CircleAlert as e, CircleCheck as t, LoaderCircle as n, X as r } from "l
 import { createContext as i, useContext as a } from "react";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/Field/context.ts
-var l = i({ success: !1 }), u = () => a(l);
+var l = i({
+	success: !1,
+	labelled: !1
+}), u = () => a(l);
 //#endregion
 //#region src/components/Input/InputStatus.tsx
 function d({ loading: i, clear: a, clearLabel: l, onClear: u, invalid: d, success: f, invalidIcon: p, classes: m }) {

package/dist/{PasswordInput-B9k0GuSx.js → PasswordInput-DivSjtN8.js}

@@ -1,6 +1,6 @@
 "use client";
 import { a as e, n as t } from "./RecipesProvider-0idafuGm.js";
-import { r as n, t as r } from "./InputStatus-DS38XEkX.js";
+import { r as n, t as r } from "./InputStatus-hVzkU_4q.js";
 import { checkPasswordRequirements as i, clampDialogOffset as a, closeTab as o, dialog as s, dialogMoveForKey as c, dialogMoveKeys as l, passwordInput as u, passwordStrength as d, scrollEdges as f, setTextControlValue as p, tabs as m } from "@wirecore/wirelayer-recipes";
 import { Check as h, ChevronLeft as g, ChevronRight as _, Circle as v, Eye as y, EyeOff as b, Maximize2 as x, Minimize2 as S, X as C } from "lucide-react";
 import { createContext as w, useContext as T, useEffect as E, useId as D, useRef as O, useState as k } from "react";

package/dist/{Select-PbxrUYi1.js → Select-Cx3KwSzU.js}

@@ -1,6 +1,6 @@
 "use client";
 import { a as e, n as t } from "./RecipesProvider-0idafuGm.js";
-import { a as n, c as r, n as i, o as a } from "./Highlight-DdTridk2.js";
+import { a as n, c as r, n as i, o as a } from "./Highlight-CX30-nP7.js";
 import { select as o, spinner as s } from "@wirecore/wirelayer-recipes";
 import { ChevronDown as c, LoaderCircle as l, X as u } from "lucide-react";
 import { useEffect as d, useId as f, useMemo as p, useState as ee } from "react";
@@ -60,84 +60,85 @@ function y({ classes: n, size: r, label: i, value: a, className: o, ...c }) {
 }
 //#endregion
 //#region src/components/Select/Select.tsx
-function b({ classes: s, items: v, value: y, defaultValue: b, onValueChange: re, placeholder: ie, disabled: ae, invalid: x, required: S, name: oe, itemValue: se, itemLabel: ce, itemDisabled: le, itemGroup: ue, valueKey: de, clearable: C, loading: w, loadingText: fe, size: pe, filter: T, manualFilter: E, onFilterChange: D, emptyText: me, hasMore: he, onLoadMore: ge, dataSource: O, minSearchLength: _e, pageSize: ve, standalone: ye, renderItem: k, renderValue: A, className: j, style: M, onKeyDown: N, ...P }) {
-	let F = t("select", o, s)({
-		size: pe,
+function b({ classes: s, items: v, value: y, defaultValue: b, onValueChange: re, placeholder: x, disabled: ie, invalid: ae, required: oe, name: se, itemValue: ce, itemLabel: le, itemDisabled: S, itemGroup: ue, itemKeywords: de, valueKey: fe, clearable: C, loading: w, loadingText: pe, size: me, filter: T, manualFilter: E, onFilterChange: D, emptyText: he, hasMore: ge, onLoadMore: _e, dataSource: O, minSearchLength: ve, pageSize: ye, standalone: k, renderItem: A, renderValue: j, className: M, style: N, onKeyDown: P, ...F }) {
+	let I = t("select", o, s)({
+		size: me,
 		clearable: C
-	}), I = e(), L = I.select, R = {
-		itemValue: se,
-		itemLabel: ce,
-		itemDisabled: le,
+	}), L = e(), R = L.select, z = {
+		itemValue: ce,
+		itemLabel: le,
+		itemDisabled: S,
 		itemGroup: ue,
-		valueKey: de
-	}, [z, B] = ee(""), V = r({
+		itemKeywords: de,
+		valueKey: fe
+	}, [B, V] = ee(""), H = r({
 		items: v,
 		source: O,
-		accessors: R,
-		pageSize: ve,
-		minSearchLength: _e
-	}), { options: H, groups: be, ordered: U, firstFor: xe } = n(V.items, R, T && !E && !O ? z : ""), W = p(() => [...H, ...V.resolvedOptions], [H, V.resolvedOptions]), { selected: G, keys: K, commit: q, commitKeys: Se } = a({
+		accessors: z,
+		pageSize: ye,
+		minSearchLength: ve
+	}), { options: U, groups: be, ordered: W, firstFor: xe } = n(H.items, z, T && !E && !O ? B : ""), G = p(() => [...U, ...H.resolvedOptions], [U, H.resolvedOptions]), { selected: K, keys: q, commit: J, commitKeys: Se } = a({
 		multiple: !1,
 		value: y,
 		defaultValue: b,
-		accessors: R,
-		items: W,
+		accessors: z,
+		items: G,
 		onChange: re
-	}), Ce = K.join("\0");
+	}), Ce = q.join("\0");
 	d(() => {
-		V.resolve(K, W);
+		H.resolve(q, G);
 	}, [Ce, O]);
-	let J = w || V.loading, Y = G[0], X = p(() => ne({
-		items: U,
+	let Y = w || H.loading, X = K[0], we = p(() => ne({
+		items: W,
 		itemToString: (e) => e.label,
 		itemToValue: (e) => e.key,
 		isItemDisabled: (e) => e.disabled
-	}), [U]), Z = f(), Q = Y?.icon, we = {
-		item: F.item(),
-		itemText: F.itemText(),
-		icon: F.icon(),
-		itemIndicator: F.itemIndicator(),
-		itemBody: F.itemBody(),
-		itemDescription: F.itemDescription(),
-		group: F.group(),
-		groupLabel: F.groupLabel(),
-		loading: F.loading(),
-		loadingIcon: F.loadingIcon(),
-		sentinel: F.sentinel(),
-		empty: F.empty()
+	}), [W]), Z = f(), Q = X?.icon, Te = {
+		item: I.item(),
+		itemText: I.itemText(),
+		icon: I.icon(),
+		itemIndicator: I.itemIndicator(),
+		itemBody: I.itemBody(),
+		itemDescription: I.itemDescription(),
+		group: I.group(),
+		groupLabel: I.groupLabel(),
+		loading: I.loading(),
+		loadingIcon: I.loadingIcon(),
+		sentinel: I.sentinel(),
+		empty: I.empty()
 	}, $ = /* @__PURE__ */ h(i, {
 		parts: _,
 		groups: be,
-		classes: we,
-		loading: J,
-		loadingText: fe ?? I.common.loading,
-		hasMore: he || V.hasMore,
-		onLoadMore: () => O ? V.loadMore() : ge?.(),
-		emptyText: me ?? V.emptyText ?? (z ? I.common.noResults : I.common.empty),
-		renderItem: k
+		classes: Te,
+		loading: Y,
+		loadingText: pe ?? L.common.loading,
+		hasMore: ge || H.hasMore,
+		onLoadMore: () => O ? H.loadMore() : _e?.(),
+		emptyText: he ?? H.emptyText ?? (B ? L.common.noResults : L.common.empty),
+		renderItem: A
 	});
-	function Te(e) {
-		N?.(e), C && G.length && (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), q([]));
+	function Ee(e) {
+		P?.(e), C && K.length && (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), J([]));
 	}
-	function Ee(e, t) {
-		B(t), D?.(t), O && V.search(t);
+	function De(e, t) {
+		V(t), D?.(t), O && H.search(t);
 		let n = E || O ? void 0 : xe(t);
 		n && requestAnimationFrame(() => e.setHighlightValue(n.key));
 	}
 	return /* @__PURE__ */ g(_.Root, {
-		className: F.base({ class: j }),
-		style: M,
-		collection: X,
-		value: K,
+		className: I.base({ class: M }),
+		style: N,
+		collection: we,
+		value: q,
 		onValueChange: (e) => Se(e.value, e.items),
 		onOpenChange: (e) => {
-			e.open && V.open(), !e.open && z && (B(""), D?.(""), O && V.search(""));
+			e.open && H.open(), !e.open && B && (V(""), D?.(""), O && H.search(""));
 		},
-		disabled: ae,
-		invalid: x,
-		required: S,
-		name: oe,
-		...ye ? { ids: {} } : {},
+		disabled: ie,
+		invalid: ae,
+		required: oe,
+		name: se,
+		...k ? { ids: {} } : {},
 		positioning: {
 			sameWidth: !0,
 			gutter: 4
@@ -147,51 +148,51 @@ function b({ classes: s, items: v, value: y, defaultValue: b, onValueChange: re,
 		unmountOnExit: !0,
 		children: [
 			/* @__PURE__ */ g(_.Control, {
-				...C ? { className: F.control() } : {},
+				...C ? { className: I.control() } : {},
 				children: [/* @__PURE__ */ g(_.Trigger, {
-					...P,
-					className: F.trigger(),
+					...F,
+					className: I.trigger(),
 					"aria-busy": w || void 0,
-					onKeyDown: Te,
+					onKeyDown: Ee,
 					children: [/* @__PURE__ */ h("span", {
-						className: F.value(),
-						children: A && Y ? A(Y.item) : /* @__PURE__ */ g(m, { children: [Q && /* @__PURE__ */ h(Q, {
-							className: F.icon(),
+						className: I.value(),
+						children: j && X ? j(X.item) : /* @__PURE__ */ g(m, { children: [Q && /* @__PURE__ */ h(Q, {
+							className: I.icon(),
 							"aria-hidden": "true"
 						}), /* @__PURE__ */ h(_.ValueText, {
-							placeholder: ie ?? I.common.placeholder,
-							children: Y?.label || void 0
+							placeholder: x ?? L.common.placeholder,
+							children: X?.label || void 0
 						})] })
 					}), /* @__PURE__ */ h(_.Indicator, {
-						className: F.indicator(),
+						className: I.indicator(),
 						children: w ? /* @__PURE__ */ h(l, {
-							className: F.spinner(),
+							className: I.spinner(),
 							"aria-hidden": "true"
 						}) : /* @__PURE__ */ h(c, {
-							className: F.indicatorIcon(),
+							className: I.indicatorIcon(),
 							"aria-hidden": "true"
 						})
 					})]
-				}), C && /* @__PURE__ */ h(_.Context, { children: (e) => Y && !e.disabled && /* @__PURE__ */ h("button", {
+				}), C && /* @__PURE__ */ h(_.Context, { children: (e) => X && !e.disabled && /* @__PURE__ */ h("button", {
 					type: "button",
 					tabIndex: -1,
-					className: F.clear(),
-					"aria-label": L.clear,
+					className: I.clear(),
+					"aria-label": R.clear,
 					onClick: () => {
-						q([]), e.focus();
+						J([]), e.focus();
 					},
 					children: /* @__PURE__ */ h(u, {
-						className: F.clearIcon(),
+						className: I.clearIcon(),
 						"aria-hidden": "true"
 					})
 				}) })]
 			}),
 			/* @__PURE__ */ h(te, { children: /* @__PURE__ */ h(_.Positioner, { children: /* @__PURE__ */ h(_.Content, {
-				className: F.content(),
-				"aria-busy": J || void 0,
-				"aria-label": T ? P["aria-label"] : void 0,
+				className: I.content(),
+				"aria-busy": Y || void 0,
+				"aria-label": T ? F["aria-label"] : void 0,
 				children: T ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", {
-					className: F.header(),
+					className: I.header(),
 					children: /* @__PURE__ */ h(_.Context, { children: (e) => /* @__PURE__ */ h("input", {
 						type: "text",
 						role: "combobox",
@@ -201,11 +202,11 @@ function b({ classes: s, items: v, value: y, defaultValue: b, onValueChange: re,
 						"data-autofocus": "",
 						"aria-controls": Z,
 						"aria-activedescendant": e.highlightedItem ? e.getItemProps({ item: e.highlightedItem }).id : void 0,
-						"aria-label": L.filter,
-						placeholder: I.combobox.search,
-						value: z,
-						className: F.search(),
-						onChange: (t) => Ee(e, t.target.value),
+						"aria-label": R.filter,
+						placeholder: L.combobox.search,
+						value: B,
+						className: I.search(),
+						onChange: (t) => De(e, t.target.value),
 						onKeyDown: (e) => {
 							[
 								" ",
@@ -216,15 +217,15 @@ function b({ classes: s, items: v, value: y, defaultValue: b, onValueChange: re,
 					}) })
 				}), /* @__PURE__ */ h(_.List, {
 					id: Z,
-					className: F.list(),
+					className: I.list(),
 					children: $
 				})] }) : $
 			}) }) }),
 			/* @__PURE__ */ h(_.HiddenSelect, {}),
 			O && /* @__PURE__ */ h("span", {
 				role: "status",
-				className: F.status(),
-				children: V.announcement
+				className: I.status(),
+				children: H.announcement
 			})
 		]
 	});

package/dist/{Tree-eqv4DIQn.js → Tree-BiPIkmwT.js}

@@ -1,7 +1,7 @@
 "use client";
 import { a as e, i as t, n } from "./RecipesProvider-0idafuGm.js";
-import { t as r } from "./Button-DFVVqBuY.js";
-import { t as i } from "./Highlight-DdTridk2.js";
+import { t as r } from "./Button-Cd7lufvJ.js";
+import { t as i } from "./Highlight-CX30-nP7.js";
 import { ChildrenLoader as a, filterTree as o, isLazyNode as s, locateTreeNode as c, moveTreeNode as l, pluralText as u, pruneTree as d, toggleTreeChecked as f, tree as p, treeBranchIds as ee, treeCheckStates as te, treeCheckedValue as m, treeDropMove as h, treeInsertPosition as g, treeKeyboardMove as _, treeMoveAnchor as v, treeRetryId as y, treeRetryParent as b, walkTree as x, withLoadedChildren as S } from "@wirecore/wirelayer-recipes";
 import { Check as C, ChevronRight as w, LoaderCircle as T, Minus as E, RotateCw as ne } from "lucide-react";
 import { createContext as D, useContext as O, useEffect as k, useImperativeHandle as A, useMemo as j, useRef as M, useState as N, useSyncExternalStore as re } from "react";

package/dist/chart/Chart.d.ts

@@ -1,11 +1,17 @@
 import { chart as chartRecipe, type RecipeClasses } from '@wirecore/wirelayer-recipes';
-import { type ChartData, type ChartOptions, type ChartType } from 'chart.js/auto';
+import { type ChartData, type ChartOptions, type ChartType, type Plugin } from 'chart.js/auto';
 import { type CSSProperties } from 'react';
 export interface ChartProps<TType extends ChartType> {
+    /** Chart.js chart type – it alone decides the types of `data`, `options` and `plugins` */
     type: TType;
-    data: ChartData<TType>;
-    /** Chart.js options – merged over the WireLayer defaults (colours, font, no fixed aspect ratio) */
-    options?: ChartOptions<TType>;
+    data: ChartData<NoInfer<TType>>;
+    /**
+     * Chart.js options – merged over the WireLayer defaults (colours, font, no fixed aspect ratio). Options kept in
+     * a variable need their type, e.g. `computed<ChartOptions<'bar'>>(…)`, or `indexAxis: 'y'` becomes a string
+     */
+    options?: ChartOptions<NoInfer<TType>>;
+    /** Inline Chart.js plugins of this chart (global ones: `Chart.register`) – changing them re-creates the chart */
+    plugins?: Plugin<NoInfer<TType>>[];
     /** Title of the chart, also its accessible name */
     title: string;
     /** Keep the title for screen readers only, e.g. inside a card that already has a heading */
@@ -21,5 +27,5 @@ export interface ChartProps<TType extends ChartType> {
     classes?: RecipeClasses<typeof chartRecipe>;
 }
 /** Canvas with role="img" named by the title; the data table is its text alternative (WCAG 1.1.1) */
-export declare function Chart<TType extends ChartType>({ classes, type, data, options, title, hideTitle, height, table, formatValue, className, style, }: ChartProps<TType>): import("react").JSX.Element;
+export declare function Chart<TType extends ChartType>({ classes, type, data, options, plugins, title, hideTitle, height, table, formatValue, className, style, }: ChartProps<TType>): import("react").JSX.Element;
 //# sourceMappingURL=Chart.d.ts.map

package/dist/chart/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/chart/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,IAAI,WAAW,EACpB,KAAK,aAAa,EAKrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AACpG,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAIrE,MAAM,WAAW,UAAU,CAAC,KAAK,SAAS,SAAS;IAC/C,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;IACvB,mGAAmG;IACnG,OAAO,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,CAAC;IAC9B,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kGAAkG;IAClG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,mFAAmF;IACnF,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,WAAW,CAAC,CAAC;CAC/C;AAED,qGAAqG;AACrG,wBAAgB,KAAK,CAAC,KAAK,SAAS,SAAS,EAAE,EAC3C,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,SAAiB,EACjB,MAAgB,EAChB,KAAY,EACZ,WAAW,EACX,SAAS,EACT,KAAK,GACR,EAAE,UAAU,CAAC,KAAK,CAAC,+BAqGnB"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/chart/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,IAAI,WAAW,EACpB,KAAK,aAAa,EAKrB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AACjH,OAAO,EAAsC,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAI/E,MAAM,WAAW,UAAU,CAAC,KAAK,SAAS,SAAS;IAC/C,0FAA0F;IAC1F,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IAChC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IACvC,iHAAiH;IACjH,OAAO,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;IACnC,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kGAAkG;IAClG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,mFAAmF;IACnF,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,WAAW,CAAC,CAAC;CAC/C;AAED,qGAAqG;AACrG,wBAAgB,KAAK,CAAC,KAAK,SAAS,SAAS,EAAE,EAC3C,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,KAAK,EACL,SAAiB,EACjB,MAAgB,EAChB,KAAY,EACZ,WAAW,EACX,SAAS,EACT,KAAK,GACR,EAAE,UAAU,CAAC,KAAK,CAAC,+BA8GnB"}

package/dist/chart/index.d.ts

@@ -6,5 +6,7 @@ export { CompositeChart, type CompositeChartProps } from './CompositeChart.js';
 export { WaterfallChart, type WaterfallChartProps } from './WaterfallChart.js';
 export { PieChart, type PieChartProps } from './PieChart.js';
 export type { SeriesChartBaseProps } from './types.js';
+/** Chart.js types for options and data kept in variables, e.g. `computed<ChartOptions<'bar'>>(…)` */
+export type { ChartData, ChartOptions, ChartType, Plugin as ChartPlugin } from 'chart.js/auto';
 export type { ChartReference, ChartRow, ChartSeries, ChartTone, PieSlice, WaterfallStep, } from '@wirecore/wirelayer-recipes';
 //# sourceMappingURL=index.d.ts.map

package/dist/chart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chart/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,YAAY,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AACvD,YAAY,EACR,cAAc,EACd,QAAQ,EACR,WAAW,EACX,SAAS,EACT,QAAQ,EACR,aAAa,GAChB,MAAM,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/chart/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,YAAY,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AACvD,qGAAqG;AACrG,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AAC/F,YAAY,EACR,cAAc,EACd,QAAQ,EACR,WAAW,EACX,SAAS,EACT,QAAQ,EACR,aAAa,GAChB,MAAM,6BAA6B,CAAC"}

package/dist/chart.js

@@ -6,81 +6,88 @@ import { useEffect as x, useId as S, useRef as C, useState as w } from "react";
 import { jsx as T, jsxs as E } from "react/jsx-runtime";
 import { Chart as D } from "chart.js/auto";
 //#region src/chart/Chart.tsx
-function O({ classes: n, type: a, data: o, options: s, title: c, hideTitle: u = !1, height: d = "18rem", table: f = !0, formatValue: p, className: m, style: h }) {
-	let g = t("chart", r, n)(), { locale: y, translations: b } = e(), w = S(), O = C(null), k = C({
+function O({ classes: n, type: a, data: o, options: s, plugins: c, title: u, hideTitle: d = !1, height: f = "18rem", table: p = !0, formatValue: m, className: h, style: g }) {
+	let y = t("chart", r, n)(), { locale: b, translations: O } = e(), k = S(), A = C(null), j = C({
 		data: o,
 		options: s
-	}), A = C(void 0), j = i(o, p ?? ((e) => e.toLocaleString(y)), b.chart);
+	}), M = C(void 0), N = i(o, m ?? ((e) => e.toLocaleString(b)), O.chart), [P, F] = w(c), I = P === c || P?.length === c?.length && !!c?.every((e, t) => e === P[t]);
+	I || F(c);
+	let L = I ? P : c;
 	return x(() => {
 		let e = matchMedia("(prefers-reduced-motion: reduce)"), t = matchMedia("(prefers-color-scheme: dark)"), n = () => {
-			let t = l(O.current);
+			let t = l(A.current);
 			return {
-				data: _(a, k.current.data, t),
-				options: v(a, t, k.current.options, e.matches, y)
+				data: _(a, j.current.data, t),
+				options: v(a, t, j.current.options, e.matches, b)
 			};
-		}, r = O.current?.getContext("2d"), i = r ? new D(r, {
+		}, r = A.current?.getContext("2d"), i = r ? new D(r, {
 			type: a,
-			...n()
+			...n(),
+			plugins: L ? [...L] : []
 		}) : void 0, o = () => {
 			i && (Object.assign(i, n()), i.update());
 		};
-		A.current = o;
+		M.current = o;
 		let s = new MutationObserver(o);
 		return s.observe(document.documentElement, { attributes: !0 }), e.addEventListener("change", o), t.addEventListener("change", o), () => {
 			s.disconnect(), e.removeEventListener("change", o), t.removeEventListener("change", o), i?.destroy();
 		};
-	}, [a, y]), x(() => {
-		k.current = {
+	}, [
+		a,
+		b,
+		L
+	]), x(() => {
+		j.current = {
 			data: o,
 			options: s
-		}, A.current?.();
+		}, M.current?.();
 	}, [o, s]), /* @__PURE__ */ E("figure", {
-		className: g.base({ class: m }),
-		style: h,
+		className: y.base({ class: h }),
+		style: g,
 		children: [
 			/* @__PURE__ */ T("figcaption", {
-				id: `${w}title`,
-				className: u ? g.caption() : g.title(),
-				children: c
+				id: `${k}title`,
+				className: d ? y.caption() : y.title(),
+				children: u
 			}),
 			/* @__PURE__ */ T("div", {
-				className: g.canvasBox(),
-				style: { height: d },
+				className: y.canvasBox(),
+				style: { height: f },
 				children: /* @__PURE__ */ T("canvas", {
-					ref: O,
+					ref: A,
 					role: "img",
-					"aria-labelledby": `${w}title`
+					"aria-labelledby": `${k}title`
 				})
 			}),
-			f && /* @__PURE__ */ E("details", {
-				className: g.details(),
+			p && /* @__PURE__ */ E("details", {
+				className: y.details(),
 				children: [/* @__PURE__ */ T("summary", {
-					className: g.summary(),
-					children: b.chart.showTable
+					className: y.summary(),
+					children: O.chart.showTable
 				}), /* @__PURE__ */ T("div", {
-					className: g.scroll(),
+					className: y.scroll(),
 					children: /* @__PURE__ */ E("table", {
-						className: g.table(),
+						className: y.table(),
 						children: [
 							/* @__PURE__ */ T("caption", {
-								className: g.caption(),
-								children: c
+								className: y.caption(),
+								children: u
 							}),
 							/* @__PURE__ */ T("thead", { children: /* @__PURE__ */ E("tr", { children: [/* @__PURE__ */ T("th", {
 								scope: "col",
-								className: g.th(),
-								children: b.chart.category
-							}), j.columns.map((e) => /* @__PURE__ */ T("th", {
+								className: y.th(),
+								children: O.chart.category
+							}), N.columns.map((e) => /* @__PURE__ */ T("th", {
 								scope: "col",
-								className: g.th(),
+								className: y.th(),
 								children: e
 							}, e))] }) }),
-							/* @__PURE__ */ T("tbody", { children: j.rows.map((e) => /* @__PURE__ */ E("tr", { children: [/* @__PURE__ */ T("th", {
+							/* @__PURE__ */ T("tbody", { children: N.rows.map((e) => /* @__PURE__ */ E("tr", { children: [/* @__PURE__ */ T("th", {
 								scope: "row",
-								className: g.rowHeader(),
+								className: y.rowHeader(),
 								children: e.label
 							}), e.values.map((e, t) => /* @__PURE__ */ T("td", {
-								className: g.td(),
+								className: y.td(),
 								children: e
 							}, t))] }, e.label)) })
 						]