@nocoo/basalt 2.0.0-rc.1 → 2.0.0

package/dist/charts/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","names":[],"sources":["../../src/charts/timeline.tsx"],"sourcesContent":["import { cn } from \"../utils/cn\";\n\nexport type TimelineEvent = {\n\tid: string;\n\ttime: string;\n\ttitle: string;\n\tsubtitle?: string;\n\tcolor?: string;\n};\n\nconst hours = Array.from({ length: 24 }, (_, index) => index);\n\nfunction getHour(time: string) {\n\treturn Number.parseInt(time.split(\":\")[0] ?? \"0\", 10);\n}\n\nexport function Timeline({\n\titems = [\n\t\t{ title: \"Created\", at: \"Mon\" },\n\t\t{ title: \"Shipped\", at: \"Tue\" },\n\t],\n\tevents,\n\tariaLabel = \"Timeline\",\n\tclassName,\n}: {\n\titems?: { id?: string; title: string; at?: string }[];\n\tevents?: TimelineEvent[];\n\tariaLabel?: string;\n\tclassName?: string;\n}) {\n\tif (events) {\n\t\treturn <HourTimeline events={events} ariaLabel={ariaLabel} className={className} />;\n\t}\n\treturn (\n\t\t<ol className={cn(\"space-y-2 text-sm\", className)} aria-label={ariaLabel}>\n\t\t\t{items.map((item, index) => (\n\t\t\t\t<li key={item.id ?? `${item.at ?? \"\"}-${item.title}-${index}`} className=\"flex gap-2\">\n\t\t\t\t\t<span className=\"text-basalt-muted-foreground\">{item.at}</span>\n\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t</li>\n\t\t\t))}\n\t\t</ol>\n\t);\n}\n\nfunction HourTimeline({\n\tevents,\n\tariaLabel,\n\tclassName,\n}: {\n\tevents: TimelineEvent[];\n\tariaLabel: string;\n\tclassName?: string;\n}) {\n\tconst eventsByHour = new Map<number, TimelineEvent[]>();\n\tfor (const event of events) {\n\t\tconst hour = getHour(event.time);\n\t\tconst existing = eventsByHour.get(hour) ?? [];\n\t\teventsByHour.set(hour, [...existing, event]);\n\t}\n\treturn (\n\t\t<ol className={cn(\"flex flex-col pl-14\", className)} aria-label={ariaLabel}>\n\t\t\t{hours.map((hour) => {\n\t\t\t\tconst hourEvents = eventsByHour.get(hour) ?? [];\n\t\t\t\tconst hasEvents = hourEvents.length > 0;\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tkey={hour}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"relative flex items-start border-l-2 py-2 pl-4\",\n\t\t\t\t\t\t\thasEvents ? \"border-basalt-primary\" : \"border-basalt-border\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"absolute left-0 w-12 -translate-x-full pr-2 text-right text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t{hour.toString().padStart(2, \"0\")}:00\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"absolute -left-[5px] top-2 h-2 w-2 rounded-full\",\n\t\t\t\t\t\t\t\thasEvents ? \"bg-basalt-primary\" : \"bg-basalt-border\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"flex min-h-[24px] w-full flex-col gap-1\">\n\t\t\t\t\t\t\t{hourEvents.map((event) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={event.id}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-2 rounded-md px-2 py-1 text-xs\",\n\t\t\t\t\t\t\t\t\t\tevent.color\n\t\t\t\t\t\t\t\t\t\t\t? `${event.color} text-white`\n\t\t\t\t\t\t\t\t\t\t\t: \"bg-basalt-muted text-basalt-foreground\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"font-medium\">{event.time}</span>\n\t\t\t\t\t\t\t\t\t<span className=\"truncate\">{event.title}</span>\n\t\t\t\t\t\t\t\t\t{event.subtitle ? (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"truncate\",\n\t\t\t\t\t\t\t\t\t\t\t\tevent.color ? \"text-white/80\" : \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{event.subtitle}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ol>\n\t);\n}\n"],"mappings":";;;;AAUA,IAAM,IAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAU,CAAK;AAE5D,SAAS,EAAQ,GAAc;CAC9B,OAAO,OAAO,SAAS,EAAK,MAAM,GAAG,CAAC,CAAC,MAAM,KAAK,EAAE;AACrD;AAEA,SAAgB,EAAS,EACxB,WAAQ,CACP;CAAE,OAAO;CAAW,IAAI;AAAM,GAC9B;CAAE,OAAO;CAAW,IAAI;AAAM,CAC/B,GACA,WACA,eAAY,YACZ,gBAME;CAIF,OAHI,IACI,kBAAC,GAAD;EAAsB;EAAmB;EAAsB;CAAY,CAAA,IAGlF,kBAAC,MAAD;EAAI,WAAW,EAAG,qBAAqB,CAAS;EAAG,cAAY;EAC7D,UAAA,EAAM,KAAK,GAAM,MACjB,kBAAC,MAAD;GAA+D,WAAU;GAAzE,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAA,EAAK;GAAS,CAAA,GAC9D,kBAAC,QAAD,EAAA,UAAO,EAAK,MAAY,CAAA,CACrB;EAHK,GAAA,EAAK,MAAM,GAAG,EAAK,MAAM,GAAG,GAAG,EAAK,MAAM,GAAG,GAGlD,CACJ;CACE,CAAA;AAEN;AAEA,SAAS,EAAa,EACrB,WACA,cACA,gBAKE;CACF,IAAM,oBAAe,IAAI,IAA6B;CACtD,KAAK,IAAM,KAAS,GAAQ;EAC3B,IAAM,IAAO,EAAQ,EAAM,IAAI,GACzB,IAAW,EAAa,IAAI,CAAI,KAAK,CAAC;EAC5C,EAAa,IAAI,GAAM,CAAC,GAAG,GAAU,CAAK,CAAC;CAC5C;CACA,OACC,kBAAC,MAAD;EAAI,WAAW,EAAG,uBAAuB,CAAS;EAAG,cAAY;EAC/D,UAAA,EAAM,KAAK,MAAS;GACpB,IAAM,IAAa,EAAa,IAAI,CAAI,KAAK,CAAC,GACxC,IAAY,EAAW,SAAS;GACtC,OACC,kBAAC,MAAD;IAEC,WAAW,EACV,kDACA,IAAY,0BAA0B,sBACvC;IALD,UAAA;KAOC,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,EAAK,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,GAAE,KAC9B;;KACL,kBAAC,OAAD,EACC,WAAW,EACV,mDACA,IAAY,sBAAsB,kBACnC,EACA,CAAA;KACD,kBAAC,OAAD;MAAK,WAAU;MACb,UAAA,EAAW,KAAK,MAChB,kBAAC,OAAD;OAEC,WAAW,EACV,wDACA,EAAM,QACH,GAAG,EAAM,MAAM,eACf,wCACJ;OAPD,UAAA;QASC,kBAAC,QAAD;SAAM,WAAU;SAAe,UAAA,EAAM;QAAW,CAAA;QAChD,kBAAC,QAAD;SAAM,WAAU;SAAY,UAAA,EAAM;QAAY,CAAA;QAC7C,EAAM,WACN,kBAAC,QAAD;SACC,WAAW,EACV,YACA,EAAM,QAAQ,kBAAkB,8BACjC;SAEC,UAAA,EAAM;QACF,CAAA,IACH;OACA;MApBC,GAAA,EAAM,EAoBP,CACL;KACG,CAAA;IACF;GAzCE,GAAA,CAyCF;EAEN,CAAC;CACE,CAAA;AAEN"}
+{"version":3,"file":"timeline.js","names":[],"sources":["../../src/charts/timeline.tsx"],"sourcesContent":["import { cn } from \"../utils/cn\";\n\nexport type TimelineEvent = {\n\tid: string;\n\ttime: string;\n\ttitle: string;\n\tsubtitle?: string;\n\tcolor?: string;\n};\n\nconst hours = Array.from({ length: 24 }, (_, index) => index);\n\nfunction getHour(time: string) {\n\treturn Number.parseInt(time.split(\":\")[0] ?? \"0\", 10);\n}\n\nexport type TimelineItem = { id?: string; title: string; at?: string };\n\nexport type TimelineItemsProps = {\n\titems: TimelineItem[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\nexport type TimelineEventsProps = {\n\tevents: TimelineEvent[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\nexport type TimelineProps = TimelineItemsProps | TimelineEventsProps;\n\nexport function Timeline(props: TimelineProps) {\n\tconst { ariaLabel = \"Timeline\", className } = props;\n\tif (\"events\" in props) {\n\t\treturn <HourTimeline events={props.events} ariaLabel={ariaLabel} className={className} />;\n\t}\n\treturn (\n\t\t<ol className={cn(\"space-y-2 text-sm\", className)} aria-label={ariaLabel}>\n\t\t\t{props.items.map((item, index) => (\n\t\t\t\t<li key={item.id ?? `${item.at ?? \"\"}-${item.title}-${index}`} className=\"flex gap-2\">\n\t\t\t\t\t<span className=\"text-basalt-muted-foreground\">{item.at}</span>\n\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t</li>\n\t\t\t))}\n\t\t</ol>\n\t);\n}\n\nfunction HourTimeline({\n\tevents,\n\tariaLabel,\n\tclassName,\n}: {\n\tevents: TimelineEvent[];\n\tariaLabel: string;\n\tclassName?: string;\n}) {\n\tconst eventsByHour = new Map<number, TimelineEvent[]>();\n\tfor (const event of events) {\n\t\tconst hour = getHour(event.time);\n\t\tconst existing = eventsByHour.get(hour) ?? [];\n\t\teventsByHour.set(hour, [...existing, event]);\n\t}\n\treturn (\n\t\t<ol className={cn(\"flex flex-col pl-14\", className)} aria-label={ariaLabel}>\n\t\t\t{hours.map((hour) => {\n\t\t\t\tconst hourEvents = eventsByHour.get(hour) ?? [];\n\t\t\t\tconst hasEvents = hourEvents.length > 0;\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tkey={hour}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"relative flex items-start border-l-2 py-2 pl-4\",\n\t\t\t\t\t\t\thasEvents ? \"border-basalt-primary\" : \"border-basalt-border\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className=\"absolute left-0 w-12 -translate-x-full pr-2 text-right text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t{hour.toString().padStart(2, \"0\")}:00\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"absolute -left-[5px] top-2 h-2 w-2 rounded-full\",\n\t\t\t\t\t\t\t\thasEvents ? \"bg-basalt-primary\" : \"bg-basalt-border\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<div className=\"flex min-h-[24px] w-full flex-col gap-1\">\n\t\t\t\t\t\t\t{hourEvents.map((event) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={event.id}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-2 rounded-md px-2 py-1 text-xs\",\n\t\t\t\t\t\t\t\t\t\tevent.color\n\t\t\t\t\t\t\t\t\t\t\t? `${event.color} text-white`\n\t\t\t\t\t\t\t\t\t\t\t: \"bg-basalt-muted text-basalt-foreground\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"font-medium\">{event.time}</span>\n\t\t\t\t\t\t\t\t\t<span className=\"truncate\">{event.title}</span>\n\t\t\t\t\t\t\t\t\t{event.subtitle ? (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\"truncate\",\n\t\t\t\t\t\t\t\t\t\t\t\tevent.color ? \"text-white/80\" : \"text-basalt-muted-foreground\",\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{event.subtitle}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ol>\n\t);\n}\n"],"mappings":";;;;AAUA,IAAM,IAAQ,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAU,CAAK;AAE5D,SAAS,EAAQ,GAAc;CAC9B,OAAO,OAAO,SAAS,EAAK,MAAM,GAAG,CAAC,CAAC,MAAM,KAAK,EAAE;AACrD;AAgBA,SAAgB,EAAS,GAAsB;CAC9C,IAAM,EAAE,eAAY,YAAY,iBAAc;CAI9C,OAHI,YAAY,IACR,kBAAC,GAAD;EAAc,QAAQ,EAAM;EAAmB;EAAsB;CAAY,CAAA,IAGxF,kBAAC,MAAD;EAAI,WAAW,EAAG,qBAAqB,CAAS;EAAG,cAAY;EAC7D,UAAA,EAAM,MAAM,KAAK,GAAM,MACvB,kBAAC,MAAD;GAA+D,WAAU;GAAzE,UAAA,CACC,kBAAC,QAAD;IAAM,WAAU;IAAgC,UAAA,EAAK;GAAS,CAAA,GAC9D,kBAAC,QAAD,EAAA,UAAO,EAAK,MAAY,CAAA,CACrB;EAHK,GAAA,EAAK,MAAM,GAAG,EAAK,MAAM,GAAG,GAAG,EAAK,MAAM,GAAG,GAGlD,CACJ;CACE,CAAA;AAEN;AAEA,SAAS,EAAa,EACrB,WACA,cACA,gBAKE;CACF,IAAM,oBAAe,IAAI,IAA6B;CACtD,KAAK,IAAM,KAAS,GAAQ;EAC3B,IAAM,IAAO,EAAQ,EAAM,IAAI,GACzB,IAAW,EAAa,IAAI,CAAI,KAAK,CAAC;EAC5C,EAAa,IAAI,GAAM,CAAC,GAAG,GAAU,CAAK,CAAC;CAC5C;CACA,OACC,kBAAC,MAAD;EAAI,WAAW,EAAG,uBAAuB,CAAS;EAAG,cAAY;EAC/D,UAAA,EAAM,KAAK,MAAS;GACpB,IAAM,IAAa,EAAa,IAAI,CAAI,KAAK,CAAC,GACxC,IAAY,EAAW,SAAS;GACtC,OACC,kBAAC,MAAD;IAEC,WAAW,EACV,kDACA,IAAY,0BAA0B,sBACvC;IALD,UAAA;KAOC,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,EAAK,SAAS,CAAC,CAAC,SAAS,GAAG,GAAG,GAAE,KAC9B;;KACL,kBAAC,OAAD,EACC,WAAW,EACV,mDACA,IAAY,sBAAsB,kBACnC,EACA,CAAA;KACD,kBAAC,OAAD;MAAK,WAAU;MACb,UAAA,EAAW,KAAK,MAChB,kBAAC,OAAD;OAEC,WAAW,EACV,wDACA,EAAM,QACH,GAAG,EAAM,MAAM,eACf,wCACJ;OAPD,UAAA;QASC,kBAAC,QAAD;SAAM,WAAU;SAAe,UAAA,EAAM;QAAW,CAAA;QAChD,kBAAC,QAAD;SAAM,WAAU;SAAY,UAAA,EAAM;QAAY,CAAA;QAC7C,EAAM,WACN,kBAAC,QAAD;SACC,WAAW,EACV,YACA,EAAM,QAAQ,kBAAkB,8BACjC;SAEC,UAAA,EAAM;QACF,CAAA,IACH;OACA;MApBC,GAAA,EAAM,EAoBP,CACL;KACG,CAAA;IACF;GAzCE,GAAA,CAyCF;EAEN,CAAC;CACE,CAAA;AAEN"}

package/dist/charts/timeseries.d.ts

@@ -1,6 +1,8 @@
-import type { XYPoint } from "./sample.js";
-export declare function Timeseries({ data, ariaLabel, className, }: {
-    data?: XYPoint[];
+import type { XYPoint, XYSeriesDescriptor } from "./series.js";
+export type TimeseriesProps = {
+    data: XYPoint[];
+    series?: XYSeriesDescriptor[];
     ariaLabel?: string;
     className?: string;
-}): import("react").JSX.Element;
+};
+export declare function Timeseries({ data, series, ariaLabel, className }: TimeseriesProps): import("react").JSX.Element;

package/dist/charts/timeseries.js

@@ -2,11 +2,12 @@
 import { LineChart as e } from "./line.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/charts/timeseries.tsx
-function n({ data: n, ariaLabel: r = "Timeseries", className: i }) {
+function n({ data: n, series: r, ariaLabel: i = "Timeseries", className: a }) {
 	return /* @__PURE__ */ t(e, {
 		data: n,
-		ariaLabel: r,
-		className: i
+		series: r,
+		ariaLabel: i,
+		className: a
 	});
 }
 //#endregion

package/dist/charts/timeseries.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeseries.js","names":[],"sources":["../../src/charts/timeseries.tsx"],"sourcesContent":["import { LineChart } from \"./line\";\nimport type { XYPoint } from \"./sample\";\n\nexport function Timeseries({\n\tdata,\n\tariaLabel = \"Timeseries\",\n\tclassName,\n}: {\n\tdata?: XYPoint[];\n\tariaLabel?: string;\n\tclassName?: string;\n}) {\n\treturn <LineChart data={data} ariaLabel={ariaLabel} className={className} />;\n}\n"],"mappings":";;;;AAGA,SAAgB,EAAW,EAC1B,SACA,eAAY,cACZ,gBAKE;CACF,OAAO,kBAAC,GAAD;EAAiB;EAAiB;EAAsB;CAAY,CAAA;AAC5E"}
+{"version":3,"file":"timeseries.js","names":[],"sources":["../../src/charts/timeseries.tsx"],"sourcesContent":["import { LineChart } from \"./line\";\nimport type { XYPoint, XYSeriesDescriptor } from \"./series\";\n\nexport type TimeseriesProps = {\n\tdata: XYPoint[];\n\tseries?: XYSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport function Timeseries({ data, series, ariaLabel = \"Timeseries\", className }: TimeseriesProps) {\n\treturn <LineChart data={data} series={series} ariaLabel={ariaLabel} className={className} />;\n}\n"],"mappings":";;;;AAUA,SAAgB,EAAW,EAAE,SAAM,WAAQ,eAAY,cAAc,gBAA8B;CAClG,OAAO,kBAAC,GAAD;EAAiB;EAAc;EAAmB;EAAsB;CAAY,CAAA;AAC5F"}

package/dist/charts/tooltip.d.ts

@@ -0,0 +1,16 @@
+export type ChartTooltipItem = {
+    name?: string;
+    value?: number | string;
+    color?: string;
+    fill?: string;
+    stroke?: string;
+    dataKey?: string | number;
+};
+export type ChartTooltipContentProps = {
+    active?: boolean;
+    payload?: readonly ChartTooltipItem[];
+    label?: string | number;
+    formatter?: (value: number) => string;
+};
+export declare function formatChartNumber(value: number): string;
+export declare function ChartTooltipContent({ active, payload, label, formatter, }: ChartTooltipContentProps): import("react").JSX.Element | null;

package/dist/charts/tooltip.js

@@ -0,0 +1,105 @@
+"use client";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/charts/tooltip.tsx
+var n = /* @__PURE__ */ new Set([
+	"y",
+	"y2",
+	"y3",
+	"value",
+	"target"
+]), r = 12, i = 12, a = 8;
+function o(e) {
+	return Number.isFinite(e) ? new Intl.NumberFormat(void 0, { maximumFractionDigits: +!Number.isInteger(e) }).format(e) : "—";
+}
+function s(e) {
+	let t = e.name == null ? "" : String(e.name), r = e.dataKey == null ? "" : String(e.dataKey);
+	if (!(n.has(t) || n.has(r))) return t || void 0;
+}
+function c(e) {
+	return e.color ?? e.fill ?? e.stroke ?? "hsl(var(--basalt-chart-1))";
+}
+function l({ active: n, payload: l, label: u, formatter: d }) {
+	if (!n || !l?.length) return null;
+	let f = d ?? o, p = u == null || u === "" ? void 0 : String(u);
+	return /* @__PURE__ */ t("div", {
+		"data-testid": "chart-tooltip",
+		style: {
+			background: "hsl(var(--basalt-popover))",
+			border: "1px solid hsl(var(--basalt-border) / 0.55)",
+			borderRadius: 10,
+			boxShadow: "0 12px 28px -8px rgb(0 0 0 / 0.28), 0 4px 10px -4px rgb(0 0 0 / 0.16)",
+			color: "hsl(var(--basalt-popover-foreground))",
+			maxWidth: 220,
+			minWidth: 128,
+			padding: "8px 12px"
+		},
+		children: [p ? /* @__PURE__ */ e("p", {
+			style: {
+				color: "hsl(var(--basalt-popover-foreground))",
+				fontSize: r,
+				fontWeight: 600,
+				letterSpacing: "-0.01em",
+				lineHeight: 1.2,
+				margin: "0 0 8px"
+			},
+			children: p
+		}) : null, /* @__PURE__ */ e("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 4
+			},
+			children: l.map((n, r) => {
+				let o = n.value, l = typeof o == "number" ? o : typeof o == "string" ? Number(o) : NaN, u = s(n), d = `${String(n.dataKey ?? n.name ?? r)}-${String(r)}`;
+				return /* @__PURE__ */ t("div", {
+					style: {
+						alignItems: "center",
+						display: "flex",
+						fontSize: i,
+						gap: 8,
+						lineHeight: "20px",
+						minWidth: 0
+					},
+					children: [
+						/* @__PURE__ */ e("span", {
+							"aria-hidden": "true",
+							style: {
+								background: c(n),
+								borderRadius: 999,
+								boxShadow: "0 0 0 1px hsl(var(--basalt-popover-foreground) / 0.12)",
+								flexShrink: 0,
+								height: a,
+								width: a
+							}
+						}),
+						u ? /* @__PURE__ */ e("span", {
+							style: {
+								color: "hsl(var(--basalt-muted-foreground))",
+								flex: 1,
+								minWidth: 0,
+								overflow: "hidden",
+								textOverflow: "ellipsis",
+								whiteSpace: "nowrap"
+							},
+							children: u
+						}) : null,
+						/* @__PURE__ */ e("span", {
+							style: {
+								color: "hsl(var(--basalt-popover-foreground))",
+								flexShrink: 0,
+								fontVariantNumeric: "tabular-nums",
+								fontWeight: 600,
+								marginLeft: u ? 0 : "auto"
+							},
+							children: Number.isFinite(l) ? f(l) : String(o ?? "—")
+						})
+					]
+				}, d);
+			})
+		})]
+	});
+}
+//#endregion
+export { l as ChartTooltipContent, o as formatChartNumber };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/charts/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/charts/tooltip.tsx"],"sourcesContent":["const HIDDEN_SERIES_KEYS = new Set([\"y\", \"y2\", \"y3\", \"value\", \"target\"]);\nconst TITLE_SIZE = 12;\nconst BODY_SIZE = 12;\nconst DOT_SIZE = 8;\n\nexport type ChartTooltipItem = {\n\tname?: string;\n\tvalue?: number | string;\n\tcolor?: string;\n\tfill?: string;\n\tstroke?: string;\n\tdataKey?: string | number;\n};\n\nexport type ChartTooltipContentProps = {\n\tactive?: boolean;\n\tpayload?: readonly ChartTooltipItem[];\n\tlabel?: string | number;\n\tformatter?: (value: number) => string;\n};\n\nexport function formatChartNumber(value: number): string {\n\tif (!Number.isFinite(value)) {\n\t\treturn \"—\";\n\t}\n\treturn new Intl.NumberFormat(undefined, {\n\t\tmaximumFractionDigits: Number.isInteger(value) ? 0 : 1,\n\t}).format(value);\n}\n\nfunction seriesLabel(item: ChartTooltipItem): string | undefined {\n\tconst name = item.name == null ? \"\" : String(item.name);\n\tconst key = item.dataKey == null ? \"\" : String(item.dataKey);\n\tif (HIDDEN_SERIES_KEYS.has(name) || HIDDEN_SERIES_KEYS.has(key)) {\n\t\treturn undefined;\n\t}\n\treturn name || undefined;\n}\n\nfunction seriesSwatch(item: ChartTooltipItem): string {\n\treturn item.color ?? item.fill ?? item.stroke ?? \"hsl(var(--basalt-chart-1))\";\n}\n\nexport function ChartTooltipContent({\n\tactive,\n\tpayload,\n\tlabel,\n\tformatter,\n}: ChartTooltipContentProps) {\n\tif (!active || !payload?.length) {\n\t\treturn null;\n\t}\n\tconst format = formatter ?? formatChartNumber;\n\tconst title = label == null || label === \"\" ? undefined : String(label);\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"chart-tooltip\"\n\t\t\tstyle={{\n\t\t\t\tbackground: \"hsl(var(--basalt-popover))\",\n\t\t\t\tborder: \"1px solid hsl(var(--basalt-border) / 0.55)\",\n\t\t\t\tborderRadius: 10,\n\t\t\t\tboxShadow: \"0 12px 28px -8px rgb(0 0 0 / 0.28), 0 4px 10px -4px rgb(0 0 0 / 0.16)\",\n\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\tmaxWidth: 220,\n\t\t\t\tminWidth: 128,\n\t\t\t\tpadding: \"8px 12px\",\n\t\t\t}}\n\t\t>\n\t\t\t{title ? (\n\t\t\t\t<p\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\t\tfontSize: TITLE_SIZE,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\tletterSpacing: \"-0.01em\",\n\t\t\t\t\t\tlineHeight: 1.2,\n\t\t\t\t\t\tmargin: \"0 0 8px\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</p>\n\t\t\t) : null}\n\t\t\t<div style={{ display: \"flex\", flexDirection: \"column\", gap: 4 }}>\n\t\t\t\t{payload.map((item, index) => {\n\t\t\t\t\tconst raw = item.value;\n\t\t\t\t\tconst numeric =\n\t\t\t\t\t\ttypeof raw === \"number\" ? raw : typeof raw === \"string\" ? Number(raw) : Number.NaN;\n\t\t\t\t\tconst labelText = seriesLabel(item);\n\t\t\t\t\tconst key = `${String(item.dataKey ?? item.name ?? index)}-${String(index)}`;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\t\t\t\tfontSize: BODY_SIZE,\n\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t\tlineHeight: \"20px\",\n\t\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tbackground: seriesSwatch(item),\n\t\t\t\t\t\t\t\t\tborderRadius: 999,\n\t\t\t\t\t\t\t\t\tboxShadow: \"0 0 0 1px hsl(var(--basalt-popover-foreground) / 0.12)\",\n\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\theight: DOT_SIZE,\n\t\t\t\t\t\t\t\t\twidth: DOT_SIZE,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{labelText ? (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: \"hsl(var(--basalt-muted-foreground))\",\n\t\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\t\t\t\t\ttextOverflow: \"ellipsis\",\n\t\t\t\t\t\t\t\t\t\twhiteSpace: \"nowrap\",\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: \"hsl(var(--basalt-popover-foreground))\",\n\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\tfontVariantNumeric: \"tabular-nums\",\n\t\t\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\t\t\tmarginLeft: labelText ? 0 : \"auto\",\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{Number.isFinite(numeric) ? format(numeric) : String(raw ?? \"—\")}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;AAAA,IAAM,oBAAqB,IAAI,IAAI;CAAC;CAAK;CAAM;CAAM;CAAS;AAAQ,CAAC,GACjE,IAAa,IACb,IAAY,IACZ,IAAW;AAkBjB,SAAgB,EAAkB,GAAuB;CAIxD,OAHK,OAAO,SAAS,CAAK,IAGnB,IAAI,KAAK,aAAa,KAAA,GAAW,EACvC,uBAAuB,SAAO,UAAU,CAAK,EAC9C,CAAC,CAAC,CAAC,OAAO,CAAK,IAJP;AAKT;AAEA,SAAS,EAAY,GAA4C;CAChE,IAAM,IAAO,EAAK,QAAQ,OAAO,KAAK,OAAO,EAAK,IAAI,GAChD,IAAM,EAAK,WAAW,OAAO,KAAK,OAAO,EAAK,OAAO;CACvD,QAAmB,IAAI,CAAI,KAAK,EAAmB,IAAI,CAAG,IAG9D,OAAO,KAAQ,KAAA;AAChB;AAEA,SAAS,EAAa,GAAgC;CACrD,OAAO,EAAK,SAAS,EAAK,QAAQ,EAAK,UAAU;AAClD;AAEA,SAAgB,EAAoB,EACnC,WACA,YACA,UACA,gBAC4B;CAC5B,IAAI,CAAC,KAAU,CAAC,GAAS,QACxB,OAAO;CAER,IAAM,IAAS,KAAa,GACtB,IAAQ,KAAS,QAAQ,MAAU,KAAK,KAAA,IAAY,OAAO,CAAK;CACtE,OACC,kBAAC,OAAD;EACC,eAAY;EACZ,OAAO;GACN,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,WAAW;GACX,OAAO;GACP,UAAU;GACV,UAAU;GACV,SAAS;EACV;EAXD,UAAA,CAaE,IACA,kBAAC,KAAD;GACC,OAAO;IACN,OAAO;IACP,UAAU;IACV,YAAY;IACZ,eAAe;IACf,YAAY;IACZ,QAAQ;GACT;GAEC,UAAA;EACC,CAAA,IACA,MACJ,kBAAC,OAAD;GAAK,OAAO;IAAE,SAAS;IAAQ,eAAe;IAAU,KAAK;GAAE;GAC7D,UAAA,EAAQ,KAAK,GAAM,MAAU;IAC7B,IAAM,IAAM,EAAK,OACX,IACL,OAAO,KAAQ,WAAW,IAAM,OAAO,KAAQ,WAAW,OAAO,CAAG,IAAI,KACnE,IAAY,EAAY,CAAI,GAC5B,IAAM,GAAG,OAAO,EAAK,WAAW,EAAK,QAAQ,CAAK,EAAE,GAAG,OAAO,CAAK;IACzE,OACC,kBAAC,OAAD;KAEC,OAAO;MACN,YAAY;MACZ,SAAS;MACT,UAAU;MACV,KAAK;MACL,YAAY;MACZ,UAAU;KACX;KATD,UAAA;MAWC,kBAAC,QAAD;OACC,eAAY;OACZ,OAAO;QACN,YAAY,EAAa,CAAI;QAC7B,cAAc;QACd,WAAW;QACX,YAAY;QACZ,QAAQ;QACR,OAAO;OACR;MACA,CAAA;MACA,IACA,kBAAC,QAAD;OACC,OAAO;QACN,OAAO;QACP,MAAM;QACN,UAAU;QACV,UAAU;QACV,cAAc;QACd,YAAY;OACb;OAEC,UAAA;MACI,CAAA,IACH;MACJ,kBAAC,QAAD;OACC,OAAO;QACN,OAAO;QACP,YAAY;QACZ,oBAAoB;QACpB,YAAY;QACZ,YAAY,IAAY,IAAI;OAC7B;OAEC,UAAA,OAAO,SAAS,CAAO,IAAI,EAAO,CAAO,IAAI,OAAO,KAAO,GAAG;MAC1D,CAAA;KACF;IA9CC,GAAA,CA8CD;GAEP,CAAC;EACG,CAAA,CACD;;AAEP"}

package/dist/components/confirm-dialog.d.ts

@@ -31,6 +31,10 @@ export interface ConfirmDialogProps {
      * @default false
      */
     loading?: boolean;
+    /**
+     * Control that opens the dialog. When set, closing restores focus to it.
+     */
+    trigger?: React.ReactElement;
 }
 export interface UseConfirmOptions {
     /** The dialog title. */
@@ -48,5 +52,5 @@ export interface UseConfirmResult {
     confirm: (options: UseConfirmOptions) => Promise<boolean>;
     dialogProps: ConfirmDialogProps;
 }
-export declare function ConfirmDialog({ cancelLabel, confirmLabel, description, loading, onConfirm, onOpenChange, open, title, variant, }: ConfirmDialogProps): React.JSX.Element;
+export declare function ConfirmDialog({ cancelLabel, confirmLabel, description, loading, onConfirm, onOpenChange, open, title, trigger, variant, }: ConfirmDialogProps): React.JSX.Element;
 export declare function useConfirm(): UseConfirmResult;

package/dist/components/confirm-dialog.js

@@ -1,42 +1,69 @@
 "use client";
 import { Button as e } from "./button.js";
-import { AlertDialog as t, AlertDialogContent as n, AlertDialogDescription as r, AlertDialogFooter as i, AlertDialogHeader as a, AlertDialogTitle as o } from "./alert-dialog.js";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { AlertDialog as t, AlertDialogContent as n, AlertDialogDescription as r, AlertDialogFooter as i, AlertDialogHeader as a, AlertDialogTitle as o, AlertDialogTrigger as s } from "./alert-dialog.js";
+import * as c from "@radix-ui/react-alert-dialog";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/confirm-dialog.tsx
-function u({ cancelLabel: s = "Cancel", confirmLabel: u = "Confirm", description: d, loading: f = !1, onConfirm: p, onOpenChange: m, open: h, title: g, variant: _ = "default" }) {
-	return /* @__PURE__ */ c(t, {
-		open: h,
+function f({ cancelLabel: f = "Cancel", confirmLabel: p = "Confirm", description: m, loading: h = !1, onConfirm: g, onOpenChange: _, open: v, title: y, trigger: b, variant: x = "default" }) {
+	let S = l.useRef(null), C = l.useRef(null), w = l.useRef(null), T = l.useRef(v);
+	return l.useEffect(() => {
+		T.current && !v && S.current?.focus(), T.current = v;
+	}, [v]), /* @__PURE__ */ d(t, {
+		open: v,
 		onOpenChange: (e) => {
-			f && !e || m(e);
+			h && !e || _(e);
 		},
-		children: /* @__PURE__ */ l(n, { children: [/* @__PURE__ */ l(a, { children: [/* @__PURE__ */ c(o, { children: g }), /* @__PURE__ */ c(r, { children: d })] }), /* @__PURE__ */ l(i, { children: [/* @__PURE__ */ c(e, {
-			disabled: f,
-			variant: "outline",
-			onClick: () => m(!1),
-			children: s
-		}), /* @__PURE__ */ c(e, {
-			loading: f,
-			variant: _,
-			onClick: () => {
-				f || p();
+		children: [l.isValidElement(b) ? /* @__PURE__ */ u(s, {
+			ref: S,
+			asChild: !0,
+			children: b
+		}) : null, /* @__PURE__ */ d(n, {
+			ref: C,
+			onOpenAutoFocus: (e) => {
+				if (e.preventDefault(), w.current && !w.current.disabled) {
+					w.current.focus();
+					return;
+				}
+				C.current?.focus();
 			},
-			children: u
-		})] })] })
+			onCloseAutoFocus: (e) => {
+				e.preventDefault(), S.current?.focus();
+			},
+			children: [/* @__PURE__ */ d(a, { children: [/* @__PURE__ */ u(o, { children: y }), /* @__PURE__ */ u(r, { children: m })] }), /* @__PURE__ */ d(i, { children: [/* @__PURE__ */ u(c.Cancel, {
+				asChild: !0,
+				children: /* @__PURE__ */ u(e, {
+					ref: w,
+					disabled: h,
+					variant: "outline",
+					children: f
+				})
+			}), /* @__PURE__ */ u(c.Action, {
+				asChild: !0,
+				children: /* @__PURE__ */ u(e, {
+					loading: h,
+					variant: x,
+					onClick: (e) => {
+						e.preventDefault(), h || g();
+					},
+					children: p
+				})
+			})] })]
+		})]
 	});
 }
-function d() {
-	let [e, t] = s.useState(!1), [n, r] = s.useState({
+function p() {
+	let [e, t] = l.useState(!1), [n, r] = l.useState({
 		title: "",
 		description: ""
-	}), i = s.useRef(null), a = s.useCallback((e) => {
+	}), i = l.useRef(null), a = l.useCallback((e) => {
 		let t = i.current;
 		i.current = null, t?.(e);
 	}, []);
-	return s.useEffect(() => () => {
+	return l.useEffect(() => () => {
 		a(!1);
 	}, [a]), {
-		confirm: s.useCallback((e) => (a(!1), r(e), t(!0), new Promise((e) => {
+		confirm: l.useCallback((e) => (a(!1), r(e), t(!0), new Promise((e) => {
 			i.current = e;
 		})), [a]),
 		dialogProps: {
@@ -56,6 +83,6 @@ function d() {
 	};
 }
 //#endregion
-export { u as ConfirmDialog, d as useConfirm };
+export { f as ConfirmDialog, p as useConfirm };
 
 //# sourceMappingURL=confirm-dialog.js.map

package/dist/components/confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n\tAlertDialog,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogFooter,\n\tAlertDialogHeader,\n\tAlertDialogTitle,\n} from \"./alert-dialog\";\nimport { Button } from \"./button\";\n\nexport type ConfirmDialogVariant = \"default\" | \"destructive\";\n\nexport interface ConfirmDialogProps {\n\t/** Whether the confirmation dialog is shown. */\n\topen: boolean;\n\t/** Called when the dialog requests to open or close. */\n\tonOpenChange: (open: boolean) => void;\n\t/** Called once when the user confirms. The dialog does not close itself. */\n\tonConfirm: () => void | Promise<void>;\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/**\n\t * Label for the confirm button.\n\t * @default \"Confirm\"\n\t */\n\tconfirmLabel?: React.ReactNode;\n\t/**\n\t * Label for the cancel button.\n\t * @default \"Cancel\"\n\t */\n\tcancelLabel?: React.ReactNode;\n\t/**\n\t * Appearance of the confirm button.\n\t * @default \"default\"\n\t */\n\tvariant?: ConfirmDialogVariant;\n\t/**\n\t * Disable both actions and ignore close requests while work is pending.\n\t * @default false\n\t */\n\tloading?: boolean;\n}\n\nexport interface UseConfirmOptions {\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/** Label for the confirm button. */\n\tconfirmLabel?: React.ReactNode;\n\t/** Label for the cancel button. */\n\tcancelLabel?: React.ReactNode;\n\t/** Appearance of the confirm button. */\n\tvariant?: ConfirmDialogVariant;\n}\n\nexport interface UseConfirmResult {\n\tconfirm: (options: UseConfirmOptions) => Promise<boolean>;\n\tdialogProps: ConfirmDialogProps;\n}\n\nexport function ConfirmDialog({\n\tcancelLabel = \"Cancel\",\n\tconfirmLabel = \"Confirm\",\n\tdescription,\n\tloading = false,\n\tonConfirm,\n\tonOpenChange,\n\topen,\n\ttitle,\n\tvariant = \"default\",\n}: ConfirmDialogProps) {\n\treturn (\n\t\t<AlertDialog\n\t\t\topen={open}\n\t\t\tonOpenChange={(next) => {\n\t\t\t\tif (loading && !next) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonOpenChange(next);\n\t\t\t}}\n\t\t>\n\t\t\t<AlertDialogContent>\n\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t<AlertDialogTitle>{title}</AlertDialogTitle>\n\t\t\t\t\t<AlertDialogDescription>{description}</AlertDialogDescription>\n\t\t\t\t</AlertDialogHeader>\n\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t<Button disabled={loading} variant=\"outline\" onClick={() => onOpenChange(false)}>\n\t\t\t\t\t\t{cancelLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tloading={loading}\n\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!loading) {\n\t\t\t\t\t\t\t\tvoid onConfirm();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{confirmLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t</AlertDialogFooter>\n\t\t\t</AlertDialogContent>\n\t\t</AlertDialog>\n\t);\n}\n\nexport function useConfirm(): UseConfirmResult {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [options, setOptions] = React.useState<UseConfirmOptions>({\n\t\ttitle: \"\",\n\t\tdescription: \"\",\n\t});\n\tconst resolverRef = React.useRef<((value: boolean) => void) | null>(null);\n\n\tconst settle = React.useCallback((value: boolean) => {\n\t\tconst resolve = resolverRef.current;\n\t\tresolverRef.current = null;\n\t\tresolve?.(value);\n\t}, []);\n\n\tReact.useEffect(() => {\n\t\treturn () => {\n\t\t\tsettle(false);\n\t\t};\n\t}, [settle]);\n\n\tconst confirm = React.useCallback(\n\t\t(next: UseConfirmOptions) => {\n\t\t\tsettle(false);\n\t\t\tsetOptions(next);\n\t\t\tsetOpen(true);\n\t\t\treturn new Promise<boolean>((resolve) => {\n\t\t\t\tresolverRef.current = resolve;\n\t\t\t});\n\t\t},\n\t\t[settle],\n\t);\n\n\treturn {\n\t\tconfirm,\n\t\tdialogProps: {\n\t\t\topen,\n\t\t\ttitle: options.title,\n\t\t\tdescription: options.description,\n\t\t\tconfirmLabel: options.confirmLabel,\n\t\t\tcancelLabel: options.cancelLabel,\n\t\t\tvariant: options.variant,\n\t\t\tonOpenChange: (next) => {\n\t\t\t\tsetOpen(next);\n\t\t\t\tif (!next) {\n\t\t\t\t\tsettle(false);\n\t\t\t\t}\n\t\t\t},\n\t\t\tonConfirm: () => {\n\t\t\t\tsettle(true);\n\t\t\t\tsetOpen(false);\n\t\t\t},\n\t\t},\n\t};\n}\n"],"mappings":";;;;;;AAgEA,SAAgB,EAAc,EAC7B,iBAAc,UACd,kBAAe,WACf,gBACA,aAAU,IACV,cACA,iBACA,SACA,UACA,aAAU,aACY;CACtB,OACC,kBAAC,GAAD;EACO;EACN,eAAe,MAAS;GACnB,KAAW,CAAC,KAGhB,EAAa,CAAI;EAClB;EAEA,UAAA,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,EAAA,UAAmB,EAAwB,CAAA,GAC3C,kBAAC,GAAD,EAAA,UAAyB,EAAoC,CAAA,CAC3C,EAAA,CAAA,GACnB,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD;GAAQ,UAAU;GAAS,SAAQ;GAAU,eAAe,EAAa,EAAK;GAC5E,UAAA;EACM,CAAA,GACR,kBAAC,GAAD;GACU;GACA;GACT,eAAe;IACd,AAAK,KACJ,EAAe;GAEjB;GAEC,UAAA;EACM,CAAA,CACU,EAAA,CAAA,CACA,EAAA,CAAA;CACR,CAAA;AAEf;AAEA,SAAgB,IAA+B;CAC9C,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,EAAK,GACtC,CAAC,GAAS,KAAc,EAAM,SAA4B;EAC/D,OAAO;EACP,aAAa;CACd,CAAC,GACK,IAAc,EAAM,OAA0C,IAAI,GAElE,IAAS,EAAM,aAAa,MAAmB;EACpD,IAAM,IAAU,EAAY;EAE5B,AADA,EAAY,UAAU,MACtB,IAAU,CAAK;CAChB,GAAG,CAAC,CAAC;CAoBL,OAlBA,EAAM,sBACQ;EACZ,EAAO,EAAK;CACb,GACE,CAAC,CAAM,CAAC,GAcJ;EACN,SAbe,EAAM,aACpB,OACA,EAAO,EAAK,GACZ,EAAW,CAAI,GACf,EAAQ,EAAI,GACL,IAAI,SAAkB,MAAY;GACxC,EAAY,UAAU;EACvB,CAAC,IAEF,CAAC,CAAM,CAIP;EACA,aAAa;GACZ;GACA,OAAO,EAAQ;GACf,aAAa,EAAQ;GACrB,cAAc,EAAQ;GACtB,aAAa,EAAQ;GACrB,SAAS,EAAQ;GACjB,eAAe,MAAS;IAEvB,AADA,EAAQ,CAAI,GACP,KACJ,EAAO,EAAK;GAEd;GACA,iBAAiB;IAEhB,AADA,EAAO,EAAI,GACX,EAAQ,EAAK;GACd;EACD;CACD;AACD"}
+{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport {\n\tAlertDialog,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogFooter,\n\tAlertDialogHeader,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n} from \"./alert-dialog\";\nimport { Button } from \"./button\";\n\nexport type ConfirmDialogVariant = \"default\" | \"destructive\";\n\nexport interface ConfirmDialogProps {\n\t/** Whether the confirmation dialog is shown. */\n\topen: boolean;\n\t/** Called when the dialog requests to open or close. */\n\tonOpenChange: (open: boolean) => void;\n\t/** Called once when the user confirms. The dialog does not close itself. */\n\tonConfirm: () => void | Promise<void>;\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/**\n\t * Label for the confirm button.\n\t * @default \"Confirm\"\n\t */\n\tconfirmLabel?: React.ReactNode;\n\t/**\n\t * Label for the cancel button.\n\t * @default \"Cancel\"\n\t */\n\tcancelLabel?: React.ReactNode;\n\t/**\n\t * Appearance of the confirm button.\n\t * @default \"default\"\n\t */\n\tvariant?: ConfirmDialogVariant;\n\t/**\n\t * Disable both actions and ignore close requests while work is pending.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Control that opens the dialog. When set, closing restores focus to it.\n\t */\n\ttrigger?: React.ReactElement;\n}\n\nexport interface UseConfirmOptions {\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/** Label for the confirm button. */\n\tconfirmLabel?: React.ReactNode;\n\t/** Label for the cancel button. */\n\tcancelLabel?: React.ReactNode;\n\t/** Appearance of the confirm button. */\n\tvariant?: ConfirmDialogVariant;\n}\n\nexport interface UseConfirmResult {\n\tconfirm: (options: UseConfirmOptions) => Promise<boolean>;\n\tdialogProps: ConfirmDialogProps;\n}\n\nexport function ConfirmDialog({\n\tcancelLabel = \"Cancel\",\n\tconfirmLabel = \"Confirm\",\n\tdescription,\n\tloading = false,\n\tonConfirm,\n\tonOpenChange,\n\topen,\n\ttitle,\n\ttrigger,\n\tvariant = \"default\",\n}: ConfirmDialogProps) {\n\tconst triggerRef = React.useRef<HTMLButtonElement>(null);\n\tconst panelRef = React.useRef<HTMLDivElement>(null);\n\tconst cancelRef = React.useRef<HTMLButtonElement>(null);\n\tconst wasOpenRef = React.useRef(open);\n\tReact.useEffect(() => {\n\t\tif (wasOpenRef.current && !open) {\n\t\t\ttriggerRef.current?.focus();\n\t\t}\n\t\twasOpenRef.current = open;\n\t}, [open]);\n\treturn (\n\t\t<AlertDialog\n\t\t\topen={open}\n\t\t\tonOpenChange={(next) => {\n\t\t\t\tif (loading && !next) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonOpenChange(next);\n\t\t\t}}\n\t\t>\n\t\t\t{React.isValidElement(trigger) ? (\n\t\t\t\t<AlertDialogTrigger ref={triggerRef} asChild>\n\t\t\t\t\t{trigger}\n\t\t\t\t</AlertDialogTrigger>\n\t\t\t) : null}\n\t\t\t<AlertDialogContent\n\t\t\t\tref={panelRef}\n\t\t\t\tonOpenAutoFocus={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (cancelRef.current && !cancelRef.current.disabled) {\n\t\t\t\t\t\tcancelRef.current.focus();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tpanelRef.current?.focus();\n\t\t\t\t}}\n\t\t\t\tonCloseAutoFocus={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\ttriggerRef.current?.focus();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t<AlertDialogTitle>{title}</AlertDialogTitle>\n\t\t\t\t\t<AlertDialogDescription>{description}</AlertDialogDescription>\n\t\t\t\t</AlertDialogHeader>\n\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t<AlertDialogPrimitive.Cancel asChild>\n\t\t\t\t\t\t<Button ref={cancelRef} disabled={loading} variant=\"outline\">\n\t\t\t\t\t\t\t{cancelLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</AlertDialogPrimitive.Cancel>\n\t\t\t\t\t<AlertDialogPrimitive.Action asChild>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tloading={loading}\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tif (!loading) {\n\t\t\t\t\t\t\t\t\tvoid onConfirm();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{confirmLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</AlertDialogPrimitive.Action>\n\t\t\t\t</AlertDialogFooter>\n\t\t\t</AlertDialogContent>\n\t\t</AlertDialog>\n\t);\n}\n\nexport function useConfirm(): UseConfirmResult {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [options, setOptions] = React.useState<UseConfirmOptions>({\n\t\ttitle: \"\",\n\t\tdescription: \"\",\n\t});\n\tconst resolverRef = React.useRef<((value: boolean) => void) | null>(null);\n\n\tconst settle = React.useCallback((value: boolean) => {\n\t\tconst resolve = resolverRef.current;\n\t\tresolverRef.current = null;\n\t\tresolve?.(value);\n\t}, []);\n\n\tReact.useEffect(() => {\n\t\treturn () => {\n\t\t\tsettle(false);\n\t\t};\n\t}, [settle]);\n\n\tconst confirm = React.useCallback(\n\t\t(next: UseConfirmOptions) => {\n\t\t\tsettle(false);\n\t\t\tsetOptions(next);\n\t\t\tsetOpen(true);\n\t\t\treturn new Promise<boolean>((resolve) => {\n\t\t\t\tresolverRef.current = resolve;\n\t\t\t});\n\t\t},\n\t\t[settle],\n\t);\n\n\treturn {\n\t\tconfirm,\n\t\tdialogProps: {\n\t\t\topen,\n\t\t\ttitle: options.title,\n\t\t\tdescription: options.description,\n\t\t\tconfirmLabel: options.confirmLabel,\n\t\t\tcancelLabel: options.cancelLabel,\n\t\t\tvariant: options.variant,\n\t\t\tonOpenChange: (next) => {\n\t\t\t\tsetOpen(next);\n\t\t\t\tif (!next) {\n\t\t\t\t\tsettle(false);\n\t\t\t\t}\n\t\t\t},\n\t\t\tonConfirm: () => {\n\t\t\t\tsettle(true);\n\t\t\t\tsetOpen(false);\n\t\t\t},\n\t\t},\n\t};\n}\n"],"mappings":";;;;;;;AAsEA,SAAgB,EAAc,EAC7B,iBAAc,UACd,kBAAe,WACf,gBACA,aAAU,IACV,cACA,iBACA,SACA,UACA,YACA,aAAU,aACY;CACtB,IAAM,IAAa,EAAM,OAA0B,IAAI,GACjD,IAAW,EAAM,OAAuB,IAAI,GAC5C,IAAY,EAAM,OAA0B,IAAI,GAChD,IAAa,EAAM,OAAO,CAAI;CAOpC,OANA,EAAM,gBAAgB;EAIrB,AAHI,EAAW,WAAW,CAAC,KAC1B,EAAW,SAAS,MAAM,GAE3B,EAAW,UAAU;CACtB,GAAG,CAAC,CAAI,CAAC,GAER,kBAAC,GAAD;EACO;EACN,eAAe,MAAS;GACnB,KAAW,CAAC,KAGhB,EAAa,CAAI;EAClB;EAPD,UAAA,CASE,EAAM,eAAe,CAAO,IAC5B,kBAAC,GAAD;GAAoB,KAAK;GAAY,SAAA;GACnC,UAAA;EACkB,CAAA,IACjB,MACJ,kBAAC,GAAD;GACC,KAAK;GACL,kBAAkB,MAAU;IAE3B,IADA,EAAM,eAAe,GACjB,EAAU,WAAW,CAAC,EAAU,QAAQ,UAAU;KACrD,EAAU,QAAQ,MAAM;KACxB;IACD;IACA,EAAS,SAAS,MAAM;GACzB;GACA,mBAAmB,MAAU;IAE5B,AADA,EAAM,eAAe,GACrB,EAAW,SAAS,MAAM;GAC3B;GAbD,UAAA,CAeC,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,EAAA,UAAmB,EAAwB,CAAA,GAC3C,kBAAC,GAAD,EAAA,UAAyB,EAAoC,CAAA,CAC3C,EAAA,CAAA,GACnB,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,EAAqB,QAAtB;IAA6B,SAAA;IAC5B,UAAA,kBAAC,GAAD;KAAQ,KAAK;KAAW,UAAU;KAAS,SAAQ;KACjD,UAAA;IACM,CAAA;GACoB,CAAA,GAC7B,kBAAC,EAAqB,QAAtB;IAA6B,SAAA;IAC5B,UAAA,kBAAC,GAAD;KACU;KACA;KACT,UAAU,MAAU;MAEnB,AADA,EAAM,eAAe,GAChB,KACJ,EAAe;KAEjB;KAEC,UAAA;IACM,CAAA;GACoB,CAAA,CACX,EAAA,CAAA,CACA;EACR,CAAA,CAAA;;AAEf;AAEA,SAAgB,IAA+B;CAC9C,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,EAAK,GACtC,CAAC,GAAS,KAAc,EAAM,SAA4B;EAC/D,OAAO;EACP,aAAa;CACd,CAAC,GACK,IAAc,EAAM,OAA0C,IAAI,GAElE,IAAS,EAAM,aAAa,MAAmB;EACpD,IAAM,IAAU,EAAY;EAE5B,AADA,EAAY,UAAU,MACtB,IAAU,CAAK;CAChB,GAAG,CAAC,CAAC;CAoBL,OAlBA,EAAM,sBACQ;EACZ,EAAO,EAAK;CACb,GACE,CAAC,CAAM,CAAC,GAcJ;EACN,SAbe,EAAM,aACpB,OACA,EAAO,EAAK,GACZ,EAAW,CAAI,GACf,EAAQ,EAAI,GACL,IAAI,SAAkB,MAAY;GACxC,EAAY,UAAU;EACvB,CAAC,IAEF,CAAC,CAAM,CAIP;EACA,aAAa;GACZ;GACA,OAAO,EAAQ;GACf,aAAa,EAAQ;GACrB,cAAc,EAAQ;GACtB,aAAa,EAAQ;GACrB,SAAS,EAAQ;GACjB,eAAe,MAAS;IAEvB,AADA,EAAQ,CAAI,GACP,KACJ,EAAO,EAAK;GAEd;GACA,iBAAiB;IAEhB,AADA,EAAO,EAAI,GACX,EAAQ,EAAK;GACd;EACD;CACD;AACD"}

package/dist/components/delete-resource.d.ts

@@ -0,0 +1,5 @@
+export type DeleteResourceProps = {
+    name: string;
+    onDelete: () => void | Promise<void>;
+};
+export declare function DeleteResource({ name, onDelete }: DeleteResourceProps): import("react").JSX.Element;

package/dist/components/delete-resource.js

@@ -0,0 +1,38 @@
+"use client";
+import { Button as e } from "./button.js";
+import { ConfirmDialog as t } from "./confirm-dialog.js";
+import { useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/delete-resource.tsx
+function a({ name: a, onDelete: o }) {
+	let [s, c] = n(!1), [l, u] = n(!1);
+	return /* @__PURE__ */ r(t, {
+		trigger: /* @__PURE__ */ i(e, {
+			variant: "destructive",
+			children: ["Delete ", a]
+		}),
+		open: s,
+		loading: l,
+		variant: "destructive",
+		title: `Delete ${a}?`,
+		description: "This cannot be undone.",
+		confirmLabel: "Delete",
+		onOpenChange: (e) => {
+			l && !e || (c(e), e || u(!1));
+		},
+		onConfirm: async () => {
+			u(!0);
+			try {
+				await o(), c(!1);
+			} catch {
+				c(!0);
+			} finally {
+				u(!1);
+			}
+		}
+	});
+}
+//#endregion
+export { a as DeleteResource };
+
+//# sourceMappingURL=delete-resource.js.map

package/dist/components/delete-resource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete-resource.js","names":[],"sources":["../../src/components/delete-resource.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Button } from \"./button\";\nimport { ConfirmDialog } from \"./confirm-dialog\";\n\nexport type DeleteResourceProps = {\n\tname: string;\n\tonDelete: () => void | Promise<void>;\n};\n\nexport function DeleteResource({ name, onDelete }: DeleteResourceProps) {\n\tconst [open, setOpen] = useState(false);\n\tconst [loading, setLoading] = useState(false);\n\treturn (\n\t\t<ConfirmDialog\n\t\t\ttrigger={<Button variant=\"destructive\">Delete {name}</Button>}\n\t\t\topen={open}\n\t\t\tloading={loading}\n\t\t\tvariant=\"destructive\"\n\t\t\ttitle={`Delete ${name}?`}\n\t\t\tdescription=\"This cannot be undone.\"\n\t\t\tconfirmLabel=\"Delete\"\n\t\t\tonOpenChange={(next) => {\n\t\t\t\tif (loading && !next) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tsetOpen(next);\n\t\t\t\tif (!next) {\n\t\t\t\t\tsetLoading(false);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonConfirm={async () => {\n\t\t\t\tsetLoading(true);\n\t\t\t\ttry {\n\t\t\t\t\tawait onDelete();\n\t\t\t\t\tsetOpen(false);\n\t\t\t\t} catch {\n\t\t\t\t\tsetOpen(true);\n\t\t\t\t} finally {\n\t\t\t\t\tsetLoading(false);\n\t\t\t\t}\n\t\t\t}}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AASA,SAAgB,EAAe,EAAE,SAAM,eAAiC;CACvE,IAAM,CAAC,GAAM,KAAW,EAAS,EAAK,GAChC,CAAC,GAAS,KAAc,EAAS,EAAK;CAC5C,OACC,kBAAC,GAAD;EACC,SAAS,kBAAC,GAAD;GAAQ,SAAQ;GAAhB,UAAA,CAA8B,WAAQ,CAAa;;EACtD;EACG;EACT,SAAQ;EACR,OAAO,UAAU,EAAK;EACtB,aAAY;EACZ,cAAa;EACb,eAAe,MAAS;GACnB,KAAW,CAAC,MAGhB,EAAQ,CAAI,GACP,KACJ,EAAW,EAAK;EAElB;EACA,WAAW,YAAY;GACtB,EAAW,EAAI;GACf,IAAI;IAEH,AADA,MAAM,EAAS,GACf,EAAQ,EAAK;GACd,QAAQ;IACP,EAAQ,EAAI;GACb,UAAU;IACT,EAAW,EAAK;GACjB;EACD;CACA,CAAA;AAEH"}

package/dist/components/loading-screen.js

@@ -10,11 +10,15 @@ function i({ label: i = "Loading", mark: a, className: o, ...s }) {
 		className: e("fixed inset-0 z-50 flex items-center justify-center bg-basalt-background", o),
 		...s,
 		children: /* @__PURE__ */ r("div", {
-			className: "relative",
-			children: [/* @__PURE__ */ n("div", {
-				className: "flex h-72 w-72 items-center justify-center overflow-hidden rounded-full bg-basalt-secondary p-6 ring-1 ring-basalt-border",
-				children: a ?? /* @__PURE__ */ n(t, { className: "h-28 w-28 text-basalt-muted-foreground" })
-			}), /* @__PURE__ */ n("div", { className: "absolute inset-[-4px] animate-basalt-spin rounded-full border-[3px] border-transparent border-t-basalt-primary motion-reduce:animate-none" })]
+			className: "flex flex-col items-center gap-4",
+			children: [a ?? /* @__PURE__ */ n(t, { className: "h-8 w-8 text-basalt-foreground" }), /* @__PURE__ */ n("div", {
+				className: "relative h-px overflow-hidden rounded-full bg-basalt-border",
+				style: { width: "6rem" },
+				children: /* @__PURE__ */ n("span", {
+					className: "absolute inset-0 animate-basalt-shimmer motion-reduce:animate-none",
+					style: { background: "linear-gradient(to right, transparent, hsl(var(--basalt-foreground) / 0.5), transparent)" }
+				})
+			})]
 		})
 	});
 }

package/dist/components/loading-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"loading-screen.js","names":[],"sources":["../../src/components/loading-screen.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BasaltMark } from \"./basalt-mark\";\n\nexport function LoadingScreen({\n\tlabel = \"Loading\",\n\tmark,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement> & {\n\tlabel?: string;\n\tmark?: ReactNode;\n}) {\n\treturn (\n\t\t<div\n\t\t\trole=\"status\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 flex items-center justify-center bg-basalt-background\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"relative\">\n\t\t\t\t<div className=\"flex h-72 w-72 items-center justify-center overflow-hidden rounded-full bg-basalt-secondary p-6 ring-1 ring-basalt-border\">\n\t\t\t\t\t{mark ?? <BasaltMark className=\"h-28 w-28 text-basalt-muted-foreground\" />}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"absolute inset-[-4px] animate-basalt-spin rounded-full border-[3px] border-transparent border-t-basalt-primary motion-reduce:animate-none\" />\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAIA,SAAgB,EAAc,EAC7B,WAAQ,WACR,SACA,cACA,GAAG,KAID;CACF,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAY;EACZ,WAAW,EACV,4EACA,CACD;EACA,GAAI;EAEJ,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,KAAQ,kBAAC,GAAD,EAAY,WAAU,yCAA0C,CAAA;GACrE,CAAA,GACL,kBAAC,OAAD,EAAK,WAAU,4IAA6I,CAAA,CACxJ;;CACD,CAAA;AAEP"}
+{"version":3,"file":"loading-screen.js","names":[],"sources":["../../src/components/loading-screen.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BasaltMark } from \"./basalt-mark\";\n\nexport function LoadingScreen({\n\tlabel = \"Loading\",\n\tmark,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement> & {\n\tlabel?: string;\n\tmark?: ReactNode;\n}) {\n\treturn (\n\t\t<div\n\t\t\trole=\"status\"\n\t\t\taria-label={label}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 z-50 flex items-center justify-center bg-basalt-background\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex flex-col items-center gap-4\">\n\t\t\t\t{mark ?? <BasaltMark className=\"h-8 w-8 text-basalt-foreground\" />}\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"relative h-px overflow-hidden rounded-full bg-basalt-border\"\n\t\t\t\t\tstyle={{ width: \"6rem\" }}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName=\"absolute inset-0 animate-basalt-shimmer motion-reduce:animate-none\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\"linear-gradient(to right, transparent, hsl(var(--basalt-foreground) / 0.5), transparent)\",\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAIA,SAAgB,EAAc,EAC7B,WAAQ,WACR,SACA,cACA,GAAG,KAID;CACF,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAY;EACZ,WAAW,EACV,4EACA,CACD;EACA,GAAI;EAEJ,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,KAAQ,kBAAC,GAAD,EAAY,WAAU,iCAAkC,CAAA,GACjE,kBAAC,OAAD;IACC,WAAU;IACV,OAAO,EAAE,OAAO,OAAO;IAEvB,UAAA,kBAAC,QAAD;KACC,WAAU;KACV,OAAO,EACN,YACC,2FACF;IACA,CAAA;GACG,CAAA,CACD;;CACD,CAAA;AAEP"}

package/dist/components/resource-list.d.ts

@@ -0,0 +1,10 @@
+export type ResourceListRow = {
+    name: string;
+    status: string;
+};
+export type ResourceListProps = {
+    title: string;
+    description?: string;
+    data: ResourceListRow[];
+};
+export declare function ResourceList({ title, description, data }: ResourceListProps): import("react").JSX.Element;

package/dist/components/resource-list.js

@@ -0,0 +1,30 @@
+"use client";
+import { DataTable as e } from "./data-table.js";
+import { PageHeader as t } from "./page-header.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/resource-list.tsx
+var i = [{
+	id: "name",
+	header: "Name",
+	accessor: (e) => e.name
+}, {
+	id: "status",
+	header: "Status",
+	accessor: (e) => e.status
+}];
+function a({ title: a, description: o, data: s }) {
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [/* @__PURE__ */ n(t, {
+			title: a,
+			description: o
+		}), /* @__PURE__ */ n(e, {
+			data: s,
+			columns: i
+		})]
+	});
+}
+//#endregion
+export { a as ResourceList };
+
+//# sourceMappingURL=resource-list.js.map

package/dist/components/resource-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-list.js","names":[],"sources":["../../src/components/resource-list.tsx"],"sourcesContent":["import { DataTable, type DataTableColumn } from \"./data-table\";\nimport { PageHeader } from \"./page-header\";\n\nexport type ResourceListRow = {\n\tname: string;\n\tstatus: string;\n};\n\nexport type ResourceListProps = {\n\ttitle: string;\n\tdescription?: string;\n\tdata: ResourceListRow[];\n};\n\nconst COLUMNS: DataTableColumn<ResourceListRow>[] = [\n\t{ id: \"name\", header: \"Name\", accessor: (row) => row.name },\n\t{ id: \"status\", header: \"Status\", accessor: (row) => row.status },\n];\n\nexport function ResourceList({ title, description, data }: ResourceListProps) {\n\treturn (\n\t\t<div className=\"space-y-4\">\n\t\t\t<PageHeader title={title} description={description} />\n\t\t\t<DataTable data={data} columns={COLUMNS} />\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;AAcA,IAAM,IAA8C,CACnD;CAAE,IAAI;CAAQ,QAAQ;CAAQ,WAAW,MAAQ,EAAI;AAAK,GAC1D;CAAE,IAAI;CAAU,QAAQ;CAAU,WAAW,MAAQ,EAAI;AAAO,CACjE;AAEA,SAAgB,EAAa,EAAE,UAAO,gBAAa,WAA2B;CAC7E,OACC,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,kBAAC,GAAD;GAAmB;GAAoB;EAAc,CAAA,GACrD,kBAAC,GAAD;GAAiB;GAAM,SAAS;EAAU,CAAA,CACtC;;AAEP"}

package/dist/providers/accent.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+export type AccentSwatch = {
+    id: string;
+    label: string;
+    light: string;
+    dark: string;
+    foreground: string;
+};
+export declare const ACCENT_SWATCHES: readonly AccentSwatch[];
+export declare const DEFAULT_ACCENT_ID = "blue";
+type AccentContextValue = {
+    accent: string;
+    setAccent: (id: string) => void;
+    swatches: readonly AccentSwatch[];
+};
+export declare function accentSwatchById(id: string | null | undefined): AccentSwatch;
+export declare function applyAccent(id: string, dark?: boolean): void;
+export declare function AccentProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useAccent(): AccentContextValue;
+export {};

package/dist/providers/accent.js

@@ -0,0 +1,110 @@
+"use client";
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useMemo as i, useSyncExternalStore as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/providers/accent.tsx
+var s = [
+	{
+		id: "blue",
+		label: "Blue",
+		light: "217 80% 36%",
+		dark: "217 80% 38%",
+		foreground: "0 0% 100%"
+	},
+	{
+		id: "teal",
+		label: "Teal",
+		light: "186 72% 28%",
+		dark: "186 72% 32%",
+		foreground: "0 0% 100%"
+	},
+	{
+		id: "green",
+		label: "Green",
+		light: "142 64% 28%",
+		dark: "142 64% 32%",
+		foreground: "0 0% 100%"
+	},
+	{
+		id: "amber",
+		label: "Amber",
+		light: "38 88% 44%",
+		dark: "38 88% 56%",
+		foreground: "0 0% 10%"
+	},
+	{
+		id: "orange",
+		label: "Orange",
+		light: "24 86% 36%",
+		dark: "24 86% 38%",
+		foreground: "0 0% 100%"
+	},
+	{
+		id: "rose",
+		label: "Rose",
+		light: "340 72% 36%",
+		dark: "340 72% 38%",
+		foreground: "0 0% 100%"
+	},
+	{
+		id: "purple",
+		label: "Purple",
+		light: "270 52% 36%",
+		dark: "270 52% 38%",
+		foreground: "0 0% 100%"
+	},
+	{
+		id: "indigo",
+		label: "Indigo",
+		light: "250 52% 36%",
+		dark: "250 52% 38%",
+		foreground: "0 0% 100%"
+	}
+], c = "blue", l = "basalt-accent", u = e(null);
+function d(e) {
+	return s.find((t) => t.id === e) ?? s[0];
+}
+function f(e, t = !1) {
+	let n = d(e), r = t ? n.dark : n.light, i = document.documentElement;
+	i.style.setProperty("--basalt-primary", r), i.style.setProperty("--basalt-primary-foreground", n.foreground), i.style.setProperty("--basalt-ring", r), i.style.setProperty("--basalt-chart-1", r), i.dataset.accent = n.id;
+}
+function p() {
+	return d(window.localStorage.getItem(l)).id;
+}
+function m(e) {
+	return window.addEventListener("storage", e), () => window.removeEventListener("storage", e);
+}
+function h() {
+	return document.documentElement.classList.contains("dark");
+}
+function g({ children: e }) {
+	let n = a(m, p, () => c);
+	r(() => {
+		f(n, h());
+		let e = new MutationObserver(() => f(n, h()));
+		return e.observe(document.documentElement, {
+			attributes: !0,
+			attributeFilter: ["class"]
+		}), () => e.disconnect();
+	}, [n]);
+	let g = t((e) => {
+		let t = d(e).id;
+		window.localStorage.setItem(l, t), f(t, h()), window.dispatchEvent(new Event("storage"));
+	}, []), _ = i(() => ({
+		accent: n,
+		setAccent: g,
+		swatches: s
+	}), [n, g]);
+	return /* @__PURE__ */ o(u.Provider, {
+		value: _,
+		children: e
+	});
+}
+function _() {
+	let e = n(u);
+	if (!e) throw Error("useAccent must be used within AccentProvider");
+	return e;
+}
+//#endregion
+export { s as ACCENT_SWATCHES, g as AccentProvider, c as DEFAULT_ACCENT_ID, d as accentSwatchById, f as applyAccent, _ as useAccent };
+
+//# sourceMappingURL=accent.js.map