@selectwin/kit 0.1.196 → 0.1.198

package/dist/SelectJourney.js

@@ -0,0 +1,68 @@
+/* empty css           */
+import { CheckIcon as e, CloseIcon as t } from "./icons.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectJourney.tsx
+var a = n(function({ steps: n, accent: a = "brand", align: o = "start", size: s = "md", orientation: c = "auto", marker: l, className: u, ...d }, f) {
+	let p = (e) => {
+		let t = n[e];
+		return t != null && t.state !== "upcoming";
+	};
+	return /* @__PURE__ */ r("div", {
+		ref: f,
+		...d,
+		className: `select-journey select-journey--${o} select-journey--${s} select-journey--${c} select-journey--accent-${a}${u ? " " + u : ""}`,
+		children: /* @__PURE__ */ r("ol", {
+			className: "select-journey__list",
+			children: n.map((s, c) => {
+				let u = s.state === "failed" ? "critical" : s.tone ?? a, d = c === n.length - 1, f = d ? null : p(c + 1) ? "solid" : "dashed", m = c === 0 ? null : p(c) ? "solid" : "dashed";
+				return /* @__PURE__ */ i("li", {
+					className: `select-journey__step is-${s.state} select-journey__step--${u}`,
+					"aria-current": s.state === "current" ? "step" : void 0,
+					children: [
+						/* @__PURE__ */ i("div", {
+							className: "select-journey__rail",
+							"aria-hidden": "true",
+							children: [
+								o === "center" && /* @__PURE__ */ r("span", { className: `select-journey__line select-journey__line--in${m ? ` is-${m}` : " is-none"}` }),
+								/* @__PURE__ */ r("span", {
+									className: "select-journey__dot",
+									children: s.state === "done" ? /* @__PURE__ */ r(e, {}) : s.state === "failed" ? /* @__PURE__ */ r(t, {}) : s.state === "current" ? /* @__PURE__ */ r("span", { className: "select-journey__core" }) : s.icon ? s.icon : null
+								}),
+								/* @__PURE__ */ r("span", { className: `select-journey__line select-journey__line--out${f ? ` is-${f}` : " is-none"}` })
+							]
+						}),
+						/* @__PURE__ */ i("div", {
+							className: "select-journey__text",
+							children: [
+								/* @__PURE__ */ r("span", {
+									className: "select-journey__label",
+									children: s.label
+								}),
+								s.description != null && /* @__PURE__ */ r("span", {
+									className: "select-journey__desc",
+									children: s.description
+								}),
+								s.meta != null && /* @__PURE__ */ r("span", {
+									className: "select-journey__meta",
+									children: s.meta
+								})
+							]
+						}),
+						l && l.after === c && !d && /* @__PURE__ */ r("span", {
+							className: "select-journey__marker",
+							children: /* @__PURE__ */ r("span", {
+								className: "select-journey__markerlabel",
+								children: l.label
+							})
+						})
+					]
+				}, s.key ?? c);
+			})
+		})
+	});
+});
+//#endregion
+export { a as SelectJourney };
+
+//# sourceMappingURL=SelectJourney.js.map

package/dist/SelectJsonViewer.js

@@ -0,0 +1,294 @@
+import { CheckIcon as e, ChevronRightIcon as t, ClipboardIcon as n, CopyIcon as r, SearchIcon as i, SelectorIcon as a, TerminalIcon as o } from "./icons.js";
+import { SelectText as s } from "./SelectText.js";
+import { useInsideFrame as c } from "./internal/frame.js";
+import { SelectIconButton as l } from "./SelectIconButton.js";
+import { SelectDisclosureButton as u } from "./SelectDisclosureButton.js";
+import { allContainerPaths as d, childCount as f, childPath as p, containerSummary as m, countOccurrences as h, defaultExpandedPaths as g, entriesOf as _, isContainer as ee, isCycle as te, isEmptyJson as v, jsonKind as y, normalizeJson as b, primitiveText as x, searchJson as ne, splitMatches as S, toPrettyJson as C, tokenizeJson as w, walkJson as re } from "./jsonTree.js";
+import { Fragment as T, forwardRef as E, useCallback as ie, useEffect as D, useMemo as O, useRef as k, useState as A } from "react";
+import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
+//#region src/SelectJsonViewer.tsx
+var P = 320, F = 12e4, I = {
+	string: "str",
+	number: "num",
+	boolean: "bool",
+	null: "null",
+	other: "other",
+	object: "plain",
+	array: "plain"
+};
+function L({ text: e, term: t }) {
+	return t.trim() ? /* @__PURE__ */ M(j, { children: S(e, t).map((e, t) => e.hit ? /* @__PURE__ */ M("mark", {
+		className: "select-json__hit",
+		children: e.text
+	}, t) : /* @__PURE__ */ M(T, { children: e.text }, t)) }) : /* @__PURE__ */ M(j, { children: e });
+}
+function ae(e = 1400) {
+	let [t, n] = A(null), r = k(void 0);
+	return D(() => () => window.clearTimeout(r.current), []), [t, ie((t, i) => {
+		var a;
+		(a = navigator.clipboard) == null || a.writeText(i), n(t), window.clearTimeout(r.current), r.current = window.setTimeout(() => n(null), e);
+	}, [e])];
+}
+function R({ value: e, term: t, forceFull: n }) {
+	let r = y(e), i = x(e), a = !n && i.length > P, o = a ? `${i.slice(0, P)}…` : i, s = r === "string";
+	return /* @__PURE__ */ N("span", {
+		className: `select-json__v select-json__v--${I[r]}`,
+		title: a ? i : void 0,
+		children: [
+			s && /* @__PURE__ */ M("span", {
+				className: "select-json__quote",
+				children: "\""
+			}),
+			/* @__PURE__ */ M(L, {
+				text: o,
+				term: t
+			}),
+			s && /* @__PURE__ */ M("span", {
+				className: "select-json__quote",
+				children: "\""
+			})
+		]
+	});
+}
+function z({ value: n, path: i, depth: a, ancestors: o, ctx: s }) {
+	let c = s.result.active, l = Array.isArray(n);
+	return /* @__PURE__ */ M(j, { children: _(n).map(([n, u]) => {
+		let d = p(i, n);
+		if (c && !s.result.visible.has(d)) return null;
+		let h = te(u, o), g = ee(u) && !h, _ = g && f(u) > 0, v = c ? !0 : s.expanded.has(d), y = s.result.matched.has(d), b = `row:${d}`;
+		return /* @__PURE__ */ N(T, { children: [/* @__PURE__ */ N("div", {
+			className: `select-json__row${y ? " is-match" : ""}`,
+			style: { "--json-depth": a },
+			children: [
+				_ ? /* @__PURE__ */ M("button", {
+					type: "button",
+					className: `select-json__caret${v ? " is-open" : ""}`,
+					"aria-expanded": v,
+					"aria-label": `${v ? "Recolher" : "Expandir"} ${n}`,
+					onClick: () => s.toggle(d),
+					children: /* @__PURE__ */ M(t, {})
+				}) : /* @__PURE__ */ M("span", {
+					className: "select-json__caret select-json__caret--empty",
+					"aria-hidden": "true"
+				}),
+				/* @__PURE__ */ N("span", {
+					className: "select-json__label",
+					children: [
+						/* @__PURE__ */ M("span", {
+							className: l ? "select-json__idx" : "select-json__key",
+							children: /* @__PURE__ */ M(L, {
+								text: n,
+								term: s.search
+							})
+						}),
+						/* @__PURE__ */ M("span", {
+							className: "select-json__sep",
+							children: ":"
+						}),
+						h ? /* @__PURE__ */ M("span", {
+							className: "select-json__v select-json__v--other",
+							children: "[referência circular]"
+						}) : _ ? /* @__PURE__ */ M("button", {
+							type: "button",
+							className: "select-json__summary",
+							tabIndex: -1,
+							onClick: () => s.toggle(d),
+							children: m(u)
+						}) : g ? /* @__PURE__ */ M("span", {
+							className: "select-json__summary select-json__summary--static",
+							children: m(u)
+						}) : /* @__PURE__ */ M(R, {
+							value: u,
+							term: s.search,
+							forceFull: y
+						})
+					]
+				}),
+				/* @__PURE__ */ M("button", {
+					type: "button",
+					className: "select-json__copy",
+					"aria-label": `Copiar ${n}`,
+					title: s.copied === b ? "Copiado!" : "Copiar valor",
+					onClick: () => s.copy(b, g ? C(u) : x(u)),
+					children: s.copied === b ? /* @__PURE__ */ M(e, {}) : /* @__PURE__ */ M(r, {})
+				})
+			]
+		}), _ && v && /* @__PURE__ */ M(z, {
+			value: u,
+			path: d,
+			depth: a + 1,
+			ancestors: [...o, u],
+			ctx: s
+		})] }, d);
+	}) });
+}
+function oe({ text: e, term: t }) {
+	let n = O(() => e.length > F ? null : w(e), [e]);
+	return n ? /* @__PURE__ */ M("pre", {
+		className: "select-json__pre",
+		children: n.map((e, n) => /* @__PURE__ */ M("span", {
+			className: `select-json__v--${e.cls}`,
+			children: /* @__PURE__ */ M(L, {
+				text: e.text,
+				term: t
+			})
+		}, n))
+	}) : /* @__PURE__ */ M("pre", {
+		className: "select-json__pre",
+		children: /* @__PURE__ */ M(L, {
+			text: e,
+			term: t
+		})
+	});
+}
+var B = E(function({ value: t, title: r = "Metadados", maxHeight: f = 360, defaultOpen: p = !1, defaultExpandDepth: m = 1, searchable: _ = !0, emptyLabel: te = "Sem dados", className: y, ...x }, S) {
+	let [w, T] = A(p), [E, P] = A("tree"), [F, I] = A(""), [L, B] = A(/* @__PURE__ */ new Set()), [V, H] = ae(), U = k(null), W = O(() => b(t), [t]), G = v(W), K = O(() => typeof t == "string" && W === t ? t : C(W), [t, W]), q = O(() => re(W, () => {}).truncated, [W]), J = E === "tree" && !q, Y = O(() => q ? [] : d(W), [W, q]);
+	D(() => {
+		B(q ? /* @__PURE__ */ new Set() : g(W, m)), I("");
+	}, [
+		W,
+		m,
+		q
+	]);
+	let X = O(() => ne(W, J ? F : ""), [
+		W,
+		F,
+		J
+	]), Z = F.trim().length > 0, Q = J ? X.count : h(K, F);
+	D(() => {
+		var e;
+		w && Z && ((e = U.current) == null || (e = e.querySelector(".select-json__hit")) == null || e.scrollIntoView({ block: "nearest" }));
+	}, [
+		w,
+		Z,
+		F,
+		E
+	]);
+	let se = ie((e) => {
+		B((t) => {
+			let n = new Set(t);
+			return n.delete(e) || n.add(e), n;
+		});
+	}, []), $ = Y.length > 0 && Y.every((e) => L.has(e)), ce = () => B($ ? /* @__PURE__ */ new Set() : new Set(Y)), le = {
+		expanded: L,
+		toggle: se,
+		search: F,
+		result: X,
+		copied: V,
+		copy: H
+	}, ue = w && !G, de = c();
+	return /* @__PURE__ */ N("div", {
+		ref: S,
+		...x,
+		className: `select-json${de ? " select-json--nested" : ""}${y ? " " + y : ""}`,
+		children: [/* @__PURE__ */ N("div", {
+			className: "select-json__head",
+			children: [/* @__PURE__ */ M(s, {
+				as: "h2",
+				variant: "headingSm",
+				children: r
+			}), /* @__PURE__ */ M(u, {
+				open: ue,
+				onToggle: () => T((e) => !e),
+				openLabel: "Ocultar",
+				disabled: G,
+				children: G ? te : "Mostrar"
+			})]
+		}), ue && /* @__PURE__ */ N("div", {
+			className: "select-json__body",
+			children: [/* @__PURE__ */ N("div", {
+				className: "select-json__toolbar",
+				children: [
+					_ ? /* @__PURE__ */ N(j, { children: [
+						/* @__PURE__ */ M("span", {
+							className: "select-json__searchicon",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ M(i, {})
+						}),
+						/* @__PURE__ */ M("input", {
+							className: "select-json__searchinput",
+							type: "search",
+							value: F,
+							onChange: (e) => I(e.target.value),
+							placeholder: "Buscar chave ou valor…",
+							"aria-label": "Buscar no JSON"
+						}),
+						Z && /* @__PURE__ */ M("span", {
+							className: "select-json__count",
+							children: Q === 0 ? "nenhum" : Q === 1 ? "1 resultado" : `${Q} resultados`
+						})
+					] }) : /* @__PURE__ */ M("span", { className: "select-json__spacer" }),
+					J && Y.length > 0 && !Z && /* @__PURE__ */ M(l, {
+						icon: /* @__PURE__ */ M(a, {}),
+						label: $ ? "Recolher tudo" : "Expandir tudo",
+						size: "sm",
+						active: $,
+						onClick: ce
+					}),
+					/* @__PURE__ */ M(l, {
+						icon: /* @__PURE__ */ M(o, {}),
+						label: q ? "Árvore indisponível: JSON muito grande" : E === "raw" ? "Ver árvore" : "Ver JSON bruto",
+						size: "sm",
+						active: E === "raw" || q,
+						disabled: q,
+						onClick: () => P((e) => e === "raw" ? "tree" : "raw")
+					}),
+					/* @__PURE__ */ M(l, {
+						icon: M(V === "all" ? e : n, {}),
+						label: V === "all" ? "Copiado!" : "Copiar JSON",
+						size: "sm",
+						active: V === "all",
+						onClick: () => H("all", K)
+					})
+				]
+			}), /* @__PURE__ */ M("div", {
+				ref: U,
+				className: "select-json__scroll",
+				style: { maxHeight: f },
+				children: J ? Z && X.count === 0 ? /* @__PURE__ */ M("div", {
+					className: "select-json__empty",
+					children: /* @__PURE__ */ N(s, {
+						as: "p",
+						tone: "subdued",
+						variant: "bodySm",
+						children: [
+							"Nenhuma chave ou valor corresponde a “",
+							F.trim(),
+							"”."
+						]
+					})
+				}) : /* @__PURE__ */ M("div", {
+					className: "select-json__tree",
+					children: ee(W) ? /* @__PURE__ */ M(z, {
+						value: W,
+						path: "",
+						depth: 0,
+						ancestors: [W],
+						ctx: le
+					}) : /* @__PURE__ */ N("div", {
+						className: "select-json__row",
+						style: { "--json-depth": 0 },
+						children: [/* @__PURE__ */ M("span", {
+							className: "select-json__caret select-json__caret--empty",
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ M("span", {
+							className: "select-json__label",
+							children: /* @__PURE__ */ M(R, {
+								value: W,
+								term: F,
+								forceFull: !0
+							})
+						})]
+					})
+				}) : /* @__PURE__ */ M(oe, {
+					text: K,
+					term: F
+				})
+			})]
+		})]
+	});
+});
+//#endregion
+export { B as SelectJsonViewer };
+
+//# sourceMappingURL=SelectJsonViewer.js.map

package/dist/SelectKanban.js

@@ -0,0 +1,124 @@
+import { SelectBadge as e } from "./SelectBadge.js";
+import { createContext as t, useContext as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/SelectKanban.tsx
+var o = t(null), s = t("");
+function c({ columns: t, onMove: n, className: c, "aria-label": l }) {
+	let [u, d] = r(null), [f, p] = r(null), m = (e) => !!(u && e.droppable && e.id !== u.from);
+	return /* @__PURE__ */ i(o.Provider, {
+		value: {
+			dragging: u,
+			setDragging: d,
+			movable: !!n
+		},
+		children: /* @__PURE__ */ i("div", {
+			className: `select-kanban${u ? " is-dragging" : ""}${c ? " " + c : ""}`,
+			role: "list",
+			"aria-label": l,
+			children: t.map((t) => {
+				let r = m(t), o = !!u && !r && t.id !== (u == null ? void 0 : u.from), c = Array.isArray(t.children) ? t.children.some(Boolean) : !!t.children;
+				return /* @__PURE__ */ a("section", {
+					role: "listitem",
+					"aria-label": typeof t.title == "string" ? t.title : void 0,
+					className: `select-kanban__col${r ? " select-kanban__col--target" : ""}${r && f === t.id ? " select-kanban__col--over" : ""}${o ? " select-kanban__col--blocked" : ""}`,
+					onDragOver: (e) => {
+						r && (e.preventDefault(), e.dataTransfer.dropEffect = "move", f !== t.id && p(t.id));
+					},
+					onDragLeave: (e) => {
+						e.currentTarget.contains(e.relatedTarget) || f === t.id && p(null);
+					},
+					onDrop: (e) => {
+						r && u && (e.preventDefault(), n == null || n(u.cardId, u.from, t.id), d(null), p(null));
+					},
+					children: [
+						/* @__PURE__ */ a("header", {
+							className: "select-kanban__colhead",
+							children: [/* @__PURE__ */ a("h3", {
+								className: "select-kanban__coltitle",
+								children: [
+									/* @__PURE__ */ i("span", {
+										className: `select-kanban__dot select-kanban__dot--${t.tone ?? "neutral"}`,
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ i("span", {
+										className: "select-kanban__colname",
+										children: t.title
+									}),
+									typeof t.count == "number" ? /* @__PURE__ */ i(e, {
+										size: "sm",
+										tone: "neutral",
+										children: t.count
+									}) : null
+								]
+							}), t.description ? /* @__PURE__ */ i("p", {
+								className: "select-kanban__coldesc",
+								children: t.description
+							}) : null]
+						}),
+						/* @__PURE__ */ i(s.Provider, {
+							value: t.id,
+							children: /* @__PURE__ */ i("div", {
+								className: "select-kanban__cards",
+								role: "list",
+								children: c ? t.children : t.empty ? /* @__PURE__ */ i("div", {
+									className: "select-kanban__empty",
+									children: t.empty
+								}) : null
+							})
+						}),
+						t.footer ? /* @__PURE__ */ i("div", {
+							className: "select-kanban__foot",
+							children: t.footer
+						}) : null
+					]
+				}, t.id);
+			})
+		})
+	});
+}
+function l({ id: e, title: t, subtitle: r, meta: c, actions: l, onOpen: u, locked: d = !1 }) {
+	var f;
+	let p = n(o), m = n(s), h = !!(p != null && p.movable) && !d, g = (p == null || (f = p.dragging) == null ? void 0 : f.cardId) === e;
+	return /* @__PURE__ */ a("article", {
+		role: "listitem",
+		className: `select-kanban__card${u ? " select-kanban__card--open" : ""}${h ? " select-kanban__card--draggable" : ""}${g ? " is-dragging" : ""}`,
+		draggable: h || void 0,
+		onDragStart: (t) => {
+			h && (t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", e), p == null || p.setDragging({
+				cardId: e,
+				from: m
+			}));
+		},
+		onDragEnd: () => p == null ? void 0 : p.setDragging(null),
+		onClick: u,
+		children: [
+			/* @__PURE__ */ a("div", {
+				className: "select-kanban__cardhead",
+				children: [u ? /* @__PURE__ */ i("button", {
+					type: "button",
+					className: "select-kanban__cardtitle",
+					children: t
+				}) : /* @__PURE__ */ i("span", {
+					className: "select-kanban__cardtitle",
+					children: t
+				}), l ? /* @__PURE__ */ i("div", {
+					className: "select-kanban__cardactions",
+					onClick: (e) => e.stopPropagation(),
+					children: l
+				}) : null]
+			}),
+			r ? /* @__PURE__ */ i("p", {
+				className: "select-kanban__cardsub",
+				children: r
+			}) : null,
+			c ? /* @__PURE__ */ i("div", {
+				className: "select-kanban__cardmeta",
+				children: c
+			}) : null
+		]
+	});
+}
+//#endregion
+export { c as SelectKanban, l as SelectKanbanCard };
+
+//# sourceMappingURL=SelectKanban.js.map

package/dist/SelectKbd.js

@@ -0,0 +1,15 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/SelectKbd.tsx
+var n = e(function({ children: e, className: n, ...r }, i) {
+	return /* @__PURE__ */ t("kbd", {
+		ref: i,
+		...r,
+		className: `select-kbd${n ? " " + n : ""}`,
+		children: e
+	});
+});
+//#endregion
+export { n as SelectKbd };
+
+//# sourceMappingURL=SelectKbd.js.map

package/dist/SelectKeyValueEditor.js

@@ -0,0 +1,88 @@
+/* empty css           */
+import { TrashIcon as e } from "./icons.js";
+import { SelectField as t } from "./SelectField.js";
+import { SelectSelect as n } from "./SelectSelect.js";
+import { SelectIconButton as r } from "./SelectIconButton.js";
+import { SelectLinkButton as i } from "./SelectLinkButton.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/SelectKeyValueEditor.tsx
+function c(e) {
+	return Array.isArray(e) ? e.filter((e) => typeof e == "object" && !!e).map((e) => ({
+		name: String(e.name ?? e.key ?? ""),
+		value: e.value == null ? "" : String(e.value)
+	})) : typeof e == "object" && e ? Object.entries(e).map(([e, t]) => ({
+		name: e,
+		value: t == null ? "" : String(t)
+	})) : [];
+}
+var l = a(function({ pairs: a, onChange: l, keyPlaceholder: u = "Chave", valuePlaceholder: d = "Valor", keyOptions: f, addLabel: p = "Adicionar", max: m, helpText: h = "Linhas vazias serão ignoradas.", className: g, ..._ }, v) {
+	let y = c(a), b = (e, t) => l(y.map((n, r) => r === e ? {
+		...n,
+		...t
+	} : n)), x = (e) => l(y.filter((t, n) => n !== e)), S = () => l([...y, {
+		name: "",
+		value: ""
+	}]), C = m == null || y.length < m;
+	return /* @__PURE__ */ s("div", {
+		ref: v,
+		..._,
+		className: `select-kv${g ? " " + g : ""}`,
+		children: [
+			y.map((i, a) => /* @__PURE__ */ s("div", {
+				className: "select-kv__row",
+				children: [
+					/* @__PURE__ */ o("div", {
+						className: "select-kv__field",
+						children: f ? /* @__PURE__ */ o(n, {
+							size: "sm",
+							options: [{
+								label: u,
+								value: ""
+							}, ...f],
+							value: i.name,
+							onChange: (e) => b(a, { name: e })
+						}) : /* @__PURE__ */ o(t, {
+							size: "sm",
+							value: i.name,
+							onChange: (e) => b(a, { name: e }),
+							placeholder: u,
+							autoComplete: "off"
+						})
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "select-kv__field",
+						children: /* @__PURE__ */ o(t, {
+							size: "sm",
+							value: i.value,
+							onChange: (e) => b(a, { value: e }),
+							placeholder: d,
+							autoComplete: "off"
+						})
+					}),
+					/* @__PURE__ */ o("div", {
+						className: "select-kv__remove",
+						children: /* @__PURE__ */ o(r, {
+							size: "sm",
+							icon: /* @__PURE__ */ o(e, {}),
+							label: "Remover",
+							onClick: () => x(a)
+						})
+					})
+				]
+			}, a)),
+			C && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ s(i, {
+				onClick: S,
+				children: ["+ ", p]
+			}) }),
+			h && /* @__PURE__ */ o("p", {
+				className: "select-kv__hint",
+				children: h
+			})
+		]
+	});
+});
+//#endregion
+export { l as SelectKeyValueEditor };
+
+//# sourceMappingURL=SelectKeyValueEditor.js.map

package/dist/SelectKpiBand.js

@@ -0,0 +1,17 @@
+/* empty css           */
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/SelectKpiBand.tsx
+var n = e(function({ children: e, className: n, ...r }, i) {
+	return /* @__PURE__ */ t("div", {
+		ref: i,
+		role: "group",
+		...r,
+		className: `select-kpiband${n ? " " + n : ""}`,
+		children: e
+	});
+});
+//#endregion
+export { n as SelectKpiBand };
+
+//# sourceMappingURL=SelectKpiBand.js.map

package/dist/SelectKpiCard.js

@@ -0,0 +1,54 @@
+import { SelectInfoTip as e } from "./SelectInfoTip.js";
+import { forwardRef as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectKpiCard.tsx
+var a = t(function({ label: t, value: a, caption: o, chart: s, help: c, tone: l, bare: u = !1, onClick: d, selected: f = !1, loading: p = !1, className: m, ...h }, g) {
+	let _ = d != null, v = _ ? {
+		role: "button",
+		tabIndex: 0,
+		"aria-pressed": f,
+		onClick: d,
+		onKeyDown: (e) => {
+			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), d());
+		}
+	} : {}, y = "select-kpi" + (u ? " select-kpi--bare" : "") + (_ ? " select-kpi--interactive" : "") + (_ && f ? " select-kpi--selected" : "") + (m ? " " + m : "");
+	return /* @__PURE__ */ i("div", {
+		ref: g,
+		...h,
+		...v,
+		className: y,
+		children: [/* @__PURE__ */ i("span", {
+			className: `select-kpi__label${c == null ? "" : " select-kpi__label--help"}`,
+			children: [c == null ? t : /* @__PURE__ */ r("span", {
+				className: "select-kpi__labeltext",
+				children: t
+			}), c != null && /* @__PURE__ */ r(e, {
+				content: c,
+				placement: "top-end"
+			})]
+		}), p ? /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+			className: "select-skeleton select-kpi__skelvalue",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ r("span", {
+			className: "select-skeleton select-kpi__skelcaption",
+			"aria-hidden": "true"
+		})] }) : /* @__PURE__ */ i(n, { children: [
+			/* @__PURE__ */ r("span", {
+				className: `select-kpi__value${l ? ` select-kpi__value--${l}` : ""}`,
+				children: a
+			}),
+			s != null && /* @__PURE__ */ r("div", {
+				className: "select-kpi__chart",
+				children: s
+			}),
+			o != null && /* @__PURE__ */ r("span", {
+				className: "select-kpi__caption",
+				children: o
+			})
+		] })]
+	});
+});
+//#endregion
+export { a as SelectKpiCard };
+
+//# sourceMappingURL=SelectKpiCard.js.map