@almanaclabs/blaze-ui 0.10.0 → 0.12.0

package/dist/components/signal-strip/signal-strip.js

@@ -0,0 +1,84 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/signal-strip/signal-strip.tsx
+function r({ value: n, max: r = 5, className: i, "aria-label": a, ...o }) {
+	let s = Math.max(0, Math.min(r, Math.round(n)));
+	return /* @__PURE__ */ t("span", {
+		"data-slot": "signal-dots",
+		role: "img",
+		"aria-label": a ?? `${s} of ${r}`,
+		className: e("flex items-center gap-[3px]", i),
+		...o,
+		children: Array.from({ length: r }, (n, r) => /* @__PURE__ */ t("span", {
+			"data-slot": "signal-dot",
+			"data-filled": r < s ? "" : void 0,
+			className: e("size-1.5 rounded-full", r < s ? "bg-primary" : "bg-surface-muted")
+		}, r))
+	});
+}
+function i({ items: i, layout: a = "inline", className: o, ...s }) {
+	let c = (e) => e.value == null ? null : /* @__PURE__ */ t(r, {
+		value: e.value,
+		max: e.max,
+		"aria-label": e.dotsLabel
+	});
+	return a === "detail" ? /* @__PURE__ */ t("dl", {
+		"data-slot": "signal-strip",
+		"data-layout": a,
+		className: e("flex flex-col gap-3", o),
+		...s,
+		children: i.map((e, r) => /* @__PURE__ */ n("div", {
+			"data-slot": "signal-strip-item",
+			className: "grid grid-cols-[96px_minmax(0,1fr)] gap-x-3",
+			children: [/* @__PURE__ */ t("dt", {
+				className: "type-meta pt-0.5 text-muted-foreground",
+				children: e.label
+			}), /* @__PURE__ */ n("dd", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ n("p", {
+					className: "type-body flex items-center gap-2",
+					children: [c(e), e.note]
+				}), e.description ? /* @__PURE__ */ t("p", {
+					className: "type-meta mt-0.5 text-muted-foreground",
+					children: e.description
+				}) : null]
+			})]
+		}, r))
+	}) : a === "stacked" ? /* @__PURE__ */ t("dl", {
+		"data-slot": "signal-strip",
+		"data-layout": a,
+		className: e("type-meta grid grid-cols-[max-content_max-content_minmax(0,1fr)] items-center gap-x-2 gap-y-1 text-muted-foreground", o),
+		...s,
+		children: i.map((e, r) => /* @__PURE__ */ n("div", {
+			"data-slot": "signal-strip-item",
+			className: "contents",
+			children: [
+				/* @__PURE__ */ t("dt", { children: e.label }),
+				/* @__PURE__ */ t("dd", { children: c(e) }),
+				/* @__PURE__ */ t("dd", {
+					className: "truncate text-foreground",
+					children: e.note
+				})
+			]
+		}, r))
+	}) : /* @__PURE__ */ t("dl", {
+		"data-slot": "signal-strip",
+		"data-layout": a,
+		className: e("type-meta flex flex-wrap gap-x-5 gap-y-1.5 text-muted-foreground", o),
+		...s,
+		children: i.map((e, r) => /* @__PURE__ */ n("div", {
+			"data-slot": "signal-strip-item",
+			className: "flex items-center gap-1.5",
+			children: [/* @__PURE__ */ t("dt", { children: e.label }), /* @__PURE__ */ n("dd", {
+				className: "flex items-center gap-1.5 text-foreground",
+				children: [c(e), e.note ? /* @__PURE__ */ t("span", {
+					className: "font-normal",
+					children: e.note
+				}) : null]
+			})]
+		}, r))
+	});
+}
+//#endregion
+export { r as SignalDots, i as SignalStrip };

package/dist/components/source-avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './source-avatar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/source-avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/source-avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}

package/dist/components/source-avatar/source-avatar.d.ts

@@ -0,0 +1,16 @@
+import { PlatformAvatarProps } from '../platform-avatar/platform-avatar';
+type SourceAvatarProps = Omit<PlatformAvatarProps, 'fit'> & {
+    /**
+     * `photo` for a person or account (a round photo, or their initial); `logo` for a
+     * company or site mark, inset on the card surface with a hairline ring.
+     */
+    variant?: 'photo' | 'logo';
+};
+/**
+ * Who an item came from, as a small face beside its meta line: an account's photo,
+ * a company's logo, or an initial when there is neither. Built on PlatformAvatar,
+ * so it can also carry the platform it came from.
+ */
+declare function SourceAvatar({ variant, size, className, ...props }: SourceAvatarProps): import("react").JSX.Element;
+export { SourceAvatar, type SourceAvatarProps };
+//# sourceMappingURL=source-avatar.d.ts.map

package/dist/components/source-avatar/source-avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-avatar.d.ts","sourceRoot":"","sources":["../../../src/components/source-avatar/source-avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,oCAAoC,CAAA;AAE3C,KAAK,iBAAiB,GAAG,IAAI,CAAC,mBAAmB,EAAE,KAAK,CAAC,GAAG;IAC1D;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED;;;;GAIG;AACH,iBAAS,YAAY,CAAC,EACpB,OAAiB,EACjB,IAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAUnB;AAED,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,CAAA"}

package/dist/components/source-avatar/source-avatar.js

@@ -0,0 +1,15 @@
+import { cn as e } from "../../lib/utils.js";
+import { PlatformAvatar as t } from "../platform-avatar/platform-avatar.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/source-avatar/source-avatar.tsx
+function r({ variant: r = "photo", size: i = 20, className: a, ...o }) {
+	return /* @__PURE__ */ n(t, {
+		"data-source-variant": r,
+		size: i,
+		fit: r === "logo" ? "contain" : "cover",
+		className: e(a),
+		...o
+	});
+}
+//#endregion
+export { r as SourceAvatar };

package/dist/components/stacked-bar-chart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './stacked-bar-chart';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/stacked-bar-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stacked-bar-chart/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA"}

package/dist/components/stacked-bar-chart/stacked-bar-chart.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+export interface StackedBarChartSeries {
+    /** The key of this series in each datum's `values`. */
+    key: string;
+    /** The series' name, on its toggle and in the tooltip. */
+    label: string;
+    /** Any CSS color, such as `var(--area-social)`. Its 12% tint fills the pressed toggle. */
+    color: string;
+    /**
+     * The pressed toggle's text color, for a `color` under 4.5:1 on its own
+     * tint, such as `var(--area-social-foreground)`. Defaults to `color`.
+     */
+    foreground?: string;
+    /**
+     * The pressed toggle's background, such as `var(--area-social-soft)`.
+     * Defaults to a 12% tint of `color`.
+     */
+    tint?: string;
+    /** A small mark on the series' toggle. */
+    icon?: React.ReactNode;
+}
+export interface StackedBarChartDatum {
+    /** The axis label, such as "Nov 3". */
+    label: string;
+    /** The tooltip's heading. Defaults to `label`. */
+    tooltipLabel?: React.ReactNode;
+    /** Draws the day's bars faded, for a count still coming in. */
+    partial?: boolean;
+    /** One number per series key. Null, or a missing key, means no count that day. */
+    values: Readonly<Partial<Record<string, number | null>>>;
+}
+export interface StackedBarChartMetric {
+    /** The metric's id, used by `metric` and `onMetricChange`. */
+    value: string;
+    /** The metric's name on the switch, such as "Followers". */
+    label: React.ReactNode;
+    /** The chart's title while this metric shows. Falls back to the chart's `title`. */
+    title?: React.ReactNode;
+    /** The chart's accessible name while this metric shows. */
+    ariaLabel?: string;
+    data: readonly StackedBarChartDatum[];
+    /** Formats a value in the tooltip. */
+    formatValue?: (value: number) => string;
+    /** Formats a y-axis tick. */
+    formatTick?: (value: number) => string;
+}
+export interface StackedBarChartProps extends Omit<React.ComponentProps<'div'>, 'children' | 'title'> {
+    series: readonly StackedBarChartSeries[];
+    /** One or more metrics on the same days. Two or more show a switch. */
+    metrics: readonly StackedBarChartMetric[];
+    title?: React.ReactNode;
+    metric?: string;
+    defaultMetric?: string;
+    onMetricChange?: (metric: string) => void;
+    /** Keys of the series switched off. */
+    hiddenSeries?: readonly string[];
+    defaultHiddenSeries?: readonly string[];
+    onHiddenSeriesChange?: (keys: string[]) => void;
+    /**
+     * `section` is a page section: a section title, the switches, then a tall
+     * chart. `card` is a bordered card with a small title, a shorter chart with
+     * thin bars, and the switches under it.
+     */
+    variant?: 'section' | 'card';
+    /** The plot's height in pixels. Defaults to 300 for a section, 220 for a card. */
+    height?: number;
+    /**
+     * Label every nth day, counted back from the last. Defaults to every day for
+     * ten days or fewer, otherwise every seventh.
+     */
+    labelEvery?: number;
+}
+/**
+ * Bars per day, stacked by series, on Blaze UI's Chart. Gains stack up from
+ * zero and losses down from it. Series switch on and off from their toggles,
+ * and a metric switch changes what the bars count.
+ */
+declare function StackedBarChart({ series, metrics, title, metric: metricProp, defaultMetric, onMetricChange, hiddenSeries: hiddenProp, defaultHiddenSeries, onHiddenSeriesChange, variant, height, labelEvery, className, ...props }: StackedBarChartProps): React.JSX.Element;
+export { StackedBarChart };
+//# sourceMappingURL=stacked-bar-chart.d.ts.map

package/dist/components/stacked-bar-chart/stacked-bar-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stacked-bar-chart.d.ts","sourceRoot":"","sources":["../../../src/components/stacked-bar-chart/stacked-bar-chart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B,MAAM,WAAW,qBAAqB;IACpC,uDAAuD;IACvD,GAAG,EAAE,MAAM,CAAA;IACX,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;IACb,0FAA0F;IAC1F,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAED,MAAM,WAAW,oBAAoB;IACnC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kFAAkF;IAClF,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;CACzD;AAED,MAAM,WAAW,qBAAqB;IACpC,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,oFAAoF;IACpF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,SAAS,oBAAoB,EAAE,CAAA;IACrC,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,6BAA6B;IAC7B,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACvC;AAED,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAC3B,UAAU,GAAG,OAAO,CACrB;IACC,MAAM,EAAE,SAAS,qBAAqB,EAAE,CAAA;IACxC,uEAAuE;IACvE,OAAO,EAAE,SAAS,qBAAqB,EAAE,CAAA;IACzC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,uCAAuC;IACvC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAChC,mBAAmB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACvC,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC/C;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IAC5B,kFAAkF;IAClF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AA4CD;;;;GAIG;AACH,iBAAS,eAAe,CAAC,EACvB,MAAM,EACN,OAAO,EACP,KAAK,EACL,MAAM,EAAE,UAAU,EAClB,aAAa,EACb,cAAc,EACd,YAAY,EAAE,UAAU,EACxB,mBAAwB,EACxB,oBAAoB,EACpB,OAAmB,EACnB,MAAM,EACN,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAqRtB;AAED,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/stacked-bar-chart/stacked-bar-chart.js

@@ -0,0 +1,240 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { ChartContainer as t, ChartTooltip as n } from "../chart/chart.js";
+import { Tabs as r, TabsList as i, TabsTrigger as a } from "../tabs/tabs.js";
+import { Toggle as o } from "../toggle/toggle.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Bar as u, BarChart as d, CartesianGrid as f, Cell as p, ReferenceLine as ee, XAxis as m, YAxis as h } from "recharts";
+//#region src/components/stacked-bar-chart/stacked-bar-chart.tsx
+var g = new Intl.NumberFormat("en-US", {
+	notation: "compact",
+	maximumFractionDigits: 1
+}), _ = (e) => g.format(e), v = (e) => e.toLocaleString("en-US");
+function y(e, t, n = 4) {
+	let r = (t - e) / n || 1, i = 10 ** Math.floor(Math.log10(r)), a = ([
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].find((e) => e * i >= r) ?? 10) * i, o = [];
+	for (let n = Math.floor(e / a) * a; n <= Math.ceil(t / a) * a + a / 2; n += a) o.push(+n.toFixed(6));
+	return o;
+}
+var b = "__index", x = {
+	section: 52,
+	card: 44
+};
+function S(e, t, n) {
+	let [r, i] = s.useState(t);
+	return [e === void 0 ? r : e, (t) => {
+		e === void 0 && i(t), n?.(t);
+	}];
+}
+function C({ series: s, metrics: g, title: C, metric: w, defaultMetric: T, onMetricChange: E, hiddenSeries: te, defaultHiddenSeries: ne = [], onHiddenSeriesChange: re, variant: D = "section", height: ie, labelEvery: O, className: k, ...A }) {
+	let [j, M] = S(w, T ?? g[0]?.value ?? "", E), [N, P] = S(te, ne, re), F = g.find((e) => e.value === j) ?? g[0], I = F?.data ?? [], L = F?.formatValue ?? v, R = F?.formatTick ?? _, z = F?.title ?? C, B = F?.ariaLabel ?? (typeof z == "string" ? z : "Stacked bar chart"), V = s.filter((e) => I.some((t) => t.values[e.key] != null)), H = V.filter((e) => !N.includes(e.key)), U = (e) => P(N.includes(e) ? N.filter((t) => t !== e) : [...N, e]), W = I.map((e, t) => {
+		let n = { [b]: t };
+		for (let t of H) n[t.key] = e.values[t.key] ?? null;
+		return n;
+	}), G = 0, K = 0;
+	for (let e of I) {
+		let t = 0, n = 0;
+		for (let r of H) {
+			let i = e.values[r.key] ?? 0;
+			i > 0 ? t += i : n += i;
+		}
+		G = Math.max(G, t), K = Math.min(K, n);
+	}
+	let q = y(K, Math.max(G, 1)), J = [q[0] ?? 0, q[q.length - 1] ?? 1], ae = O ?? (I.length <= 10 ? 1 : 7), Y = ie ?? (D === "card" ? 220 : 300), X = D === "card", Z = g.length > 1 ? /* @__PURE__ */ c(r, {
+		value: F?.value,
+		onValueChange: (e) => M(e),
+		children: /* @__PURE__ */ c(i, {
+			"aria-label": "Metric",
+			children: g.map((e) => /* @__PURE__ */ c(a, {
+				value: e.value,
+				children: e.label
+			}, e.value))
+		})
+	}) : null, Q = V.map((e) => {
+		let t = !N.includes(e.key);
+		return /* @__PURE__ */ l(o, {
+			"data-slot": "stacked-bar-chart-series-toggle",
+			variant: "outline",
+			size: X ? "sm" : "default",
+			pressed: t,
+			onPressedChange: () => U(e.key),
+			className: "type-meta rounded-full px-3 font-medium aria-pressed:bg-transparent",
+			style: !X && t ? {
+				background: e.tint ?? `color-mix(in srgb, ${e.color} 12%, transparent)`,
+				borderColor: e.color,
+				color: e.foreground ?? e.color
+			} : void 0,
+			children: [
+				X ? /* @__PURE__ */ c("span", {
+					"aria-hidden": "true",
+					className: "size-2.5 rounded-full",
+					style: { background: t ? e.color : "var(--border)" }
+				}) : null,
+				e.icon,
+				e.label
+			]
+		}, e.key);
+	}), oe = Object.fromEntries(s.map((e) => [e.key, {
+		label: e.label,
+		color: e.color
+	}])), $ = /* @__PURE__ */ c("div", {
+		"data-slot": "stacked-bar-chart-plot",
+		role: "img",
+		"aria-label": B,
+		className: X ? "mt-3" : "mt-4",
+		children: /* @__PURE__ */ c(t, {
+			config: oe,
+			className: "type-meta aspect-auto w-full [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-surface-subtle",
+			style: { height: Y },
+			initialDimension: {
+				width: 640,
+				height: Y
+			},
+			children: /* @__PURE__ */ l(d, {
+				data: W,
+				stackOffset: "sign",
+				barCategoryGap: X ? 1.5 : "18%",
+				margin: {
+					top: X ? 10 : 8,
+					right: X ? 8 : 0,
+					bottom: 0,
+					left: 0
+				},
+				accessibilityLayer: !1,
+				children: [
+					/* @__PURE__ */ c(f, {
+						vertical: !1,
+						stroke: "var(--border-subtle)"
+					}),
+					/* @__PURE__ */ c(m, {
+						dataKey: b,
+						interval: 0,
+						tickLine: !1,
+						axisLine: !1,
+						tickMargin: X ? 4 : 8,
+						height: X ? 22 : 28,
+						tickFormatter: (e) => (I.length - 1 - e) % ae == 0 ? I[e]?.label ?? "" : ""
+					}),
+					/* @__PURE__ */ c(h, {
+						domain: J,
+						ticks: q,
+						interval: 0,
+						tickLine: !1,
+						axisLine: !1,
+						width: x[D],
+						tickMargin: X ? 6 : 8,
+						tickFormatter: R
+					}),
+					/* @__PURE__ */ c(ee, {
+						y: 0,
+						stroke: "var(--border)"
+					}),
+					/* @__PURE__ */ c(n, {
+						cursor: { fill: "var(--surface-subtle)" },
+						isAnimationActive: !1,
+						position: { y: 0 },
+						content: ({ active: e, label: t }) => {
+							let n = typeof t == "number" ? t : Number(t), r = I[n];
+							if (!e || !r || H.length === 0) return null;
+							let i = H.reduce((e, t) => e + (r.values[t.key] ?? 0), 0);
+							return /* @__PURE__ */ l("div", {
+								"data-slot": "stacked-bar-chart-tooltip",
+								className: "min-w-[180px] rounded-lg border border-border bg-card p-3 shadow-sm",
+								children: [/* @__PURE__ */ c("p", {
+									className: "type-meta text-muted-foreground",
+									children: r.tooltipLabel ?? r.label
+								}), /* @__PURE__ */ l("ul", {
+									className: "mt-1.5 flex flex-col gap-1",
+									children: [H.map((e) => {
+										let t = r.values[e.key];
+										return /* @__PURE__ */ l("li", {
+											className: "type-body flex items-center gap-2 text-foreground",
+											children: [
+												/* @__PURE__ */ c("span", {
+													className: "size-2.5 rounded-full",
+													style: { background: e.color }
+												}),
+												/* @__PURE__ */ c("span", {
+													className: "flex-1",
+													children: e.label
+												}),
+												/* @__PURE__ */ c("span", {
+													className: "font-medium tabular-nums",
+													children: t == null ? "–" : L(t)
+												})
+											]
+										}, e.key);
+									}), H.length > 1 ? /* @__PURE__ */ l("li", {
+										className: "type-body mt-1 flex items-center gap-2 border-t border-border-subtle pt-1.5 font-medium text-foreground",
+										children: [/* @__PURE__ */ c("span", {
+											className: "flex-1",
+											children: "Total"
+										}), /* @__PURE__ */ c("span", {
+											className: "tabular-nums",
+											children: L(i)
+										})]
+									}) : null]
+								})]
+							});
+						}
+					}),
+					H.map((e) => /* @__PURE__ */ c(u, {
+						dataKey: e.key,
+						stackId: "stack",
+						fill: e.color,
+						maxBarSize: 56,
+						isAnimationActive: !1,
+						children: I.map((e, t) => /* @__PURE__ */ c(p, { fillOpacity: e.partial ? .45 : 1 }, t))
+					}, e.key))
+				]
+			})
+		})
+	});
+	return X ? /* @__PURE__ */ l("div", {
+		"data-slot": "stacked-bar-chart",
+		"data-variant": D,
+		className: e("rounded-xl border border-border bg-card p-5", k),
+		...A,
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "flex flex-wrap items-center justify-between gap-3",
+				children: [z ? /* @__PURE__ */ c("p", {
+					className: "type-meta font-medium text-muted-foreground",
+					children: z
+				}) : null, Z]
+			}),
+			$,
+			Q.length ? /* @__PURE__ */ c("div", {
+				className: "mt-3 flex flex-wrap gap-2",
+				children: Q
+			}) : null
+		]
+	}) : /* @__PURE__ */ l("div", {
+		"data-slot": "stacked-bar-chart",
+		"data-variant": D,
+		className: k,
+		...A,
+		children: [
+			z ? /* @__PURE__ */ c("h2", {
+				className: "type-section-title font-medium",
+				children: z
+			}) : null,
+			/* @__PURE__ */ l("div", {
+				className: "mt-4 flex flex-wrap items-center gap-3",
+				children: [Z, Q.length ? /* @__PURE__ */ c("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: Q
+				}) : null]
+			}),
+			$
+		]
+	});
+}
+//#endregion
+export { C as StackedBarChart };

package/dist/components/state-banner/index.d.ts

@@ -0,0 +1,2 @@
+export * from './state-banner';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/state-banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/state-banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/dist/components/state-banner/state-banner.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+/**
+ * - `stale`: the page's data changed while it was open.
+ * - `connect`: a source to connect.
+ * - `waiting`: something is on its way.
+ * - `warning`: something failed or needs the owner.
+ */
+type StateBannerTone = 'stale' | 'connect' | 'waiting' | 'warning';
+declare const stateBannerVariants: (props?: ({
+    tone?: "waiting" | "warning" | "stale" | "connect" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type StateBannerProps = React.ComponentProps<'div'> & {
+    tone: StateBannerTone;
+    /** The action's label. The action shows only when this is set. */
+    action?: React.ReactNode;
+    onAction?: () => void;
+};
+/** A page-state banner: a notice, an icon for its tone, and at most one action. */
+declare function StateBanner({ tone, action, onAction, className, children, ...props }: StateBannerProps): React.JSX.Element;
+type StaleBannerProps = Omit<StateBannerProps, 'tone' | 'action' | 'onAction' | 'children'> & {
+    /** Whether the page's data changed while it was open. */
+    stale: boolean;
+    /** What changed, e.g. "Your plan". The banner reads "<what> changed while you were here." */
+    what: React.ReactNode;
+    /** Reloads the page's data. The banner hides itself after it runs. */
+    onRefresh?: () => void;
+    refreshLabel?: React.ReactNode;
+};
+/** The realtime notice: the page's data changed while it was open. Refresh reloads it. */
+declare function StaleBanner({ stale, what, onRefresh, refreshLabel, ...props }: StaleBannerProps): React.JSX.Element | null;
+export { StaleBanner, StateBanner, stateBannerVariants, type StaleBannerProps, type StateBannerProps, type StateBannerTone, };
+//# sourceMappingURL=state-banner.d.ts.map

package/dist/components/state-banner/state-banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state-banner.d.ts","sourceRoot":"","sources":["../../../src/components/state-banner/state-banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B;;;;;GAKG;AACH,KAAK,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAElE,QAAA,MAAM,mBAAmB;;8EAaxB,CAAA;AA+BD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACpD,IAAI,EAAE,eAAe,CAAA;IACrB,kEAAkE;IAClE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,mFAAmF;AACnF,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAwBlB;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,gBAAgB,EAChB,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAC5C,GAAG;IACF,yDAAyD;IACzD,KAAK,EAAE,OAAO,CAAA;IACd,6FAA6F;IAC7F,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC/B,CAAA;AAED,0FAA0F;AAC1F,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,IAAI,EACJ,SAAS,EACT,YAAwB,EACxB,GAAG,KAAK,EACT,EAAE,gBAAgB,4BAyBlB;AAED,OAAO,EACL,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,CAAA"}

package/dist/components/state-banner/state-banner.js

@@ -0,0 +1,70 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import * as n from "react";
+import { cva as r } from "class-variance-authority";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { IconAlertTriangle as o, IconClock as s, IconPlus as c, IconRefresh as l } from "@tabler/icons-react";
+//#region src/components/state-banner/state-banner.tsx
+var u = r("flex items-center gap-3 rounded-lg px-4 py-3", {
+	variants: { tone: {
+		stale: "bg-surface-subtle",
+		connect: "bg-surface-subtle",
+		waiting: "bg-surface-subtle",
+		warning: "bg-warning-soft"
+	} },
+	defaultVariants: { tone: "stale" }
+}), d = "icon-optical-16 flex-none", f = {
+	stale: /* @__PURE__ */ i(l, {
+		"aria-hidden": "true",
+		className: e(d, "text-info")
+	}),
+	connect: /* @__PURE__ */ i(c, {
+		"aria-hidden": "true",
+		className: e(d, "text-muted-foreground")
+	}),
+	waiting: /* @__PURE__ */ i(s, {
+		"aria-hidden": "true",
+		className: e(d, "text-muted-foreground")
+	}),
+	warning: /* @__PURE__ */ i(o, {
+		"aria-hidden": "true",
+		className: e(d, "text-warning")
+	})
+};
+function p({ tone: n, action: r, onAction: o, className: s, children: c, ...l }) {
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "state-banner",
+		"data-tone": n,
+		role: n === "warning" ? "alert" : "status",
+		className: e(u({ tone: n }), s),
+		...l,
+		children: [
+			f[n],
+			/* @__PURE__ */ i("p", {
+				"data-slot": "state-banner-message",
+				className: "type-body flex-1",
+				children: c
+			}),
+			r ? /* @__PURE__ */ i(t, {
+				size: "sm",
+				variant: n === "stale" ? "secondary" : "primary",
+				onClick: o,
+				children: r
+			}) : null
+		]
+	});
+}
+function m({ stale: e, what: t, onRefresh: r, refreshLabel: i = "Refresh", ...o }) {
+	let [s, c] = n.useState(!1), [l, u] = n.useState(e);
+	return e !== l && (u(e), e && c(!1)), !e || s ? null : /* @__PURE__ */ a(p, {
+		tone: "stale",
+		action: i,
+		onAction: () => {
+			c(!0), r?.();
+		},
+		...o,
+		children: [t, " changed while you were here."]
+	});
+}
+//#endregion
+export { m as StaleBanner, p as StateBanner, u as stateBannerVariants };

package/dist/components/status-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export * from './status-indicator';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/status-indicator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/status-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/dist/components/status-indicator/status-indicator.d.ts

@@ -0,0 +1,21 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+/**
+ * - `success`: working, such as a connected account.
+ * - `warning`: working but needs the owner.
+ * - `danger`: broken or failed.
+ * - `neutral`: off or not started.
+ * - `none`: no dot, for a plain state such as "Not set up".
+ */
+type StatusTone = 'success' | 'warning' | 'danger' | 'neutral' | 'none';
+declare const statusDotVariants: (props?: ({
+    tone?: "none" | "success" | "warning" | "neutral" | "danger" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type StatusIndicatorProps = React.ComponentProps<'span'> & VariantProps<typeof statusDotVariants>;
+/**
+ * A state in words with a small colored dot before it, such as "Connected" or
+ * "Needs attention". The label carries the meaning; the dot is decorative.
+ */
+declare function StatusIndicator({ tone, className, children, ...props }: StatusIndicatorProps): React.JSX.Element;
+export { StatusIndicator, statusDotVariants, type StatusIndicatorProps, type StatusTone, };
+//# sourceMappingURL=status-indicator.d.ts.map

package/dist/components/status-indicator/status-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/status-indicator/status-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE;;;;;;GAMG;AACH,KAAK,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;AAEvE,QAAA,MAAM,iBAAiB;;8EAWrB,CAAA;AAEF,KAAK,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACtD,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAA;AAExC;;;GAGG;AACH,iBAAS,eAAe,CAAC,EACvB,IAAgB,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAmBtB;AAED,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,KAAK,oBAAoB,EACzB,KAAK,UAAU,GAChB,CAAA"}

package/dist/components/status-indicator/status-indicator.js

@@ -0,0 +1,30 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { cva as t } from "class-variance-authority";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/status-indicator/status-indicator.tsx
+var i = t("size-1.5 flex-none rounded-full", {
+	variants: { tone: {
+		success: "bg-success",
+		warning: "bg-warning",
+		danger: "bg-destructive",
+		neutral: "bg-muted-foreground/50",
+		none: "hidden"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+function a({ tone: t = "neutral", className: a, children: o, ...s }) {
+	return /* @__PURE__ */ r("span", {
+		"data-slot": "status-indicator",
+		"data-tone": t,
+		className: e("type-body inline-flex flex-none items-center gap-1.5 whitespace-nowrap text-muted-foreground", a),
+		...s,
+		children: [/* @__PURE__ */ n("span", {
+			"aria-hidden": "true",
+			"data-slot": "status-indicator-dot",
+			className: i({ tone: t })
+		}), o]
+	});
+}
+//#endregion
+export { a as StatusIndicator, i as statusDotVariants };

package/dist/components/suggest-chips/index.d.ts

@@ -0,0 +1,2 @@
+export * from './suggest-chips';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/suggest-chips/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/suggest-chips/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA"}