@nocoo/basalt 2.0.0-rc.1

package/dist/charts/date-navigation.js

@@ -0,0 +1,122 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Button as t } from "../components/button.js";
+import { DatePicker as n } from "../components/date-picker.js";
+import { useState as r } from "react";
+import { Calendar as i, ChevronLeft as a, ChevronRight as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/charts/date-navigation.tsx
+function l(e, t) {
+	let n = /^(\d{4,})-(\d{2})-(\d{2})$/.exec(e), r = n ? new Date(Number(n[1]), Number(n[2]) - 1, Number(n[3])) : /* @__PURE__ */ new Date();
+	return r.setDate(r.getDate() + t), `${r.getFullYear()}-${String(r.getMonth() + 1).padStart(2, "0")}-${String(r.getDate()).padStart(2, "0")}`;
+}
+function u(e, t) {
+	let n = new Intl.DateTimeFormat("en-CA", {
+		timeZone: t,
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit"
+	}).formatToParts(e), r = (e) => Number(n.find((t) => t.type === e)?.value);
+	return {
+		y: r("year"),
+		m: r("month"),
+		d: r("day")
+	};
+}
+function d(e, t) {
+	return e.y === t.y && e.m === t.m && e.d === t.d;
+}
+function f(e) {
+	return "onPrevDay" in e ? /* @__PURE__ */ s(m, { ...e }) : /* @__PURE__ */ s(p, { ...e });
+}
+function p({ value: e, defaultValue: i = "", onChange: u, disabled: d, ariaLabel: f, "aria-label": p, ...m }) {
+	let [h, g] = r(e ?? i), _ = e ?? h;
+	function v(t) {
+		e === void 0 && g(t), u?.(t);
+	}
+	return /* @__PURE__ */ c("div", {
+		className: "inline-flex items-center gap-1",
+		children: [
+			/* @__PURE__ */ s(t, {
+				variant: "outline",
+				size: "icon",
+				disabled: d,
+				"aria-label": "Previous day",
+				onClick: () => v(l(_, -1)),
+				children: /* @__PURE__ */ s(a, {})
+			}),
+			/* @__PURE__ */ s(n, {
+				...m,
+				value: _,
+				disabled: d,
+				onChange: v,
+				"aria-label": f ?? p ?? "Date navigation"
+			}),
+			/* @__PURE__ */ s(t, {
+				variant: "outline",
+				size: "icon",
+				disabled: d,
+				"aria-label": "Next day",
+				onClick: () => v(l(_, 1)),
+				children: /* @__PURE__ */ s(o, {})
+			})
+		]
+	});
+}
+function m({ selectedDate: t, onPrevDay: n, onNextDay: r, onToday: l, onToggleCalendar: f, todayLabel: p = "Today", previousDayLabel: m = "Previous day", nextDayLabel: h = "Next day", formatDate: g, locale: _ = "en-US", timeZone: v, className: y }) {
+	let b = g ?? ((e) => e.toLocaleDateString(_, {
+		weekday: "short",
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+		timeZone: v
+	})), x = d(u(t, v), u(/* @__PURE__ */ new Date(), v)), S = b(t);
+	return /* @__PURE__ */ c("div", {
+		className: e("flex items-center justify-center gap-2", y),
+		children: [
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: l,
+				disabled: x,
+				className: e("mr-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors", x ? "cursor-not-allowed text-basalt-muted-foreground opacity-50" : "bg-basalt-secondary text-basalt-foreground hover:bg-basalt-accent"),
+				children: p
+			}),
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: n,
+				"aria-label": m,
+				className: "flex h-8 w-8 items-center justify-center rounded-lg text-basalt-muted-foreground transition-colors hover:bg-basalt-accent hover:text-basalt-foreground",
+				children: /* @__PURE__ */ s(a, {
+					className: "h-4 w-4",
+					strokeWidth: 1.5
+				})
+			}),
+			f ? /* @__PURE__ */ c("button", {
+				type: "button",
+				onClick: f,
+				className: "flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-lg font-medium transition-colors hover:bg-basalt-accent",
+				children: [/* @__PURE__ */ s("span", { children: S }), /* @__PURE__ */ s(i, {
+					className: "h-4 w-4 text-basalt-muted-foreground",
+					strokeWidth: 1.5
+				})]
+			}) : /* @__PURE__ */ s("span", {
+				className: "flex items-center gap-2 rounded-lg px-3 py-1.5 text-lg font-medium",
+				children: S
+			}),
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				onClick: r,
+				"aria-label": h,
+				className: "flex h-8 w-8 items-center justify-center rounded-lg text-basalt-muted-foreground transition-colors hover:bg-basalt-accent hover:text-basalt-foreground",
+				children: /* @__PURE__ */ s(o, {
+					className: "h-4 w-4",
+					strokeWidth: 1.5
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { f as DateNavigation };
+
+//# sourceMappingURL=date-navigation.js.map

package/dist/charts/date-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-navigation.js","names":[],"sources":["../../src/charts/date-navigation.tsx"],"sourcesContent":["import { Calendar as CalendarIcon, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { type ComponentProps, useState } from \"react\";\nimport { Button } from \"../components/button\";\nimport { DatePicker } from \"../components/date-picker\";\nimport { cn } from \"../utils/cn\";\n\nfunction shiftIso(value: string, delta: number) {\n\tconst match = /^(\\d{4,})-(\\d{2})-(\\d{2})$/.exec(value);\n\tconst date = match\n\t\t? new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]))\n\t\t: new Date();\n\tdate.setDate(date.getDate() + delta);\n\tconst year = date.getFullYear();\n\tconst month = String(date.getMonth() + 1).padStart(2, \"0\");\n\tconst day = String(date.getDate()).padStart(2, \"0\");\n\treturn `${year}-${month}-${day}`;\n}\n\nfunction civilInZone(date: Date, timeZone?: string) {\n\tconst parts = new Intl.DateTimeFormat(\"en-CA\", {\n\t\ttimeZone,\n\t\tyear: \"numeric\",\n\t\tmonth: \"2-digit\",\n\t\tday: \"2-digit\",\n\t}).formatToParts(date);\n\tconst read = (type: Intl.DateTimeFormatPartTypes) =>\n\t\tNumber(parts.find((part) => part.type === type)?.value);\n\treturn { y: read(\"year\"), m: read(\"month\"), d: read(\"day\") };\n}\n\nfunction isSameCivil(\n\tleft: { y: number; m: number; d: number },\n\tright: { y: number; m: number; d: number },\n) {\n\treturn left.y === right.y && left.m === right.m && left.d === right.d;\n}\n\ntype PickerProps = ComponentProps<typeof DatePicker> & {\n\tariaLabel?: string;\n\tselectedDate?: undefined;\n};\n\ntype DisplayProps = {\n\tselectedDate: Date;\n\tonPrevDay: () => void;\n\tonNextDay: () => void;\n\tonToday: () => void;\n\tonToggleCalendar?: () => void;\n\ttodayLabel?: string;\n\tpreviousDayLabel?: string;\n\tnextDayLabel?: string;\n\tformatDate?: (date: Date) => string;\n\tlocale?: string;\n\ttimeZone?: string;\n\tclassName?: string;\n};\n\nexport function DateNavigation(props: PickerProps | DisplayProps) {\n\tif (\"onPrevDay\" in props) {\n\t\treturn <DateNavigationDisplay {...props} />;\n\t}\n\treturn <DateNavigationPicker {...props} />;\n}\n\nfunction DateNavigationPicker({\n\tvalue,\n\tdefaultValue = \"\",\n\tonChange,\n\tdisabled,\n\tariaLabel,\n\t\"aria-label\": ariaLabelAttr,\n\t...props\n}: PickerProps) {\n\tconst [uncontrolled, setUncontrolled] = useState(value ?? defaultValue);\n\tconst selected = value ?? uncontrolled;\n\tfunction commit(next: string) {\n\t\tif (value === undefined) {\n\t\t\tsetUncontrolled(next);\n\t\t}\n\t\tonChange?.(next);\n\t}\n\treturn (\n\t\t<div className=\"inline-flex items-center gap-1\">\n\t\t\t<Button\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize=\"icon\"\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label=\"Previous day\"\n\t\t\t\tonClick={() => commit(shiftIso(selected, -1))}\n\t\t\t>\n\t\t\t\t<ChevronLeft />\n\t\t\t</Button>\n\t\t\t<DatePicker\n\t\t\t\t{...props}\n\t\t\t\tvalue={selected}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tonChange={commit}\n\t\t\t\taria-label={ariaLabel ?? ariaLabelAttr ?? \"Date navigation\"}\n\t\t\t/>\n\t\t\t<Button\n\t\t\t\tvariant=\"outline\"\n\t\t\t\tsize=\"icon\"\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label=\"Next day\"\n\t\t\t\tonClick={() => commit(shiftIso(selected, 1))}\n\t\t\t>\n\t\t\t\t<ChevronRight />\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n\nfunction DateNavigationDisplay({\n\tselectedDate,\n\tonPrevDay,\n\tonNextDay,\n\tonToday,\n\tonToggleCalendar,\n\ttodayLabel = \"Today\",\n\tpreviousDayLabel = \"Previous day\",\n\tnextDayLabel = \"Next day\",\n\tformatDate,\n\tlocale = \"en-US\",\n\ttimeZone,\n\tclassName,\n}: DisplayProps) {\n\tconst resolvedFormatDate =\n\t\tformatDate ??\n\t\t((date: Date) =>\n\t\t\tdate.toLocaleDateString(locale, {\n\t\t\t\tweekday: \"short\",\n\t\t\t\tyear: \"numeric\",\n\t\t\t\tmonth: \"short\",\n\t\t\t\tday: \"numeric\",\n\t\t\t\ttimeZone,\n\t\t\t}));\n\tconst isToday = isSameCivil(\n\t\tcivilInZone(selectedDate, timeZone),\n\t\tcivilInZone(new Date(), timeZone),\n\t);\n\tconst formatted = resolvedFormatDate(selectedDate);\n\treturn (\n\t\t<div className={cn(\"flex items-center justify-center gap-2\", className)}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onToday}\n\t\t\t\tdisabled={isToday}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"mr-2 rounded-lg px-3 py-1.5 text-sm font-medium transition-colors\",\n\t\t\t\t\tisToday\n\t\t\t\t\t\t? \"cursor-not-allowed text-basalt-muted-foreground opacity-50\"\n\t\t\t\t\t\t: \"bg-basalt-secondary text-basalt-foreground hover:bg-basalt-accent\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{todayLabel}\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onPrevDay}\n\t\t\t\taria-label={previousDayLabel}\n\t\t\t\tclassName=\"flex h-8 w-8 items-center justify-center rounded-lg text-basalt-muted-foreground transition-colors hover:bg-basalt-accent hover:text-basalt-foreground\"\n\t\t\t>\n\t\t\t\t<ChevronLeft className=\"h-4 w-4\" strokeWidth={1.5} />\n\t\t\t</button>\n\t\t\t{onToggleCalendar ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={onToggleCalendar}\n\t\t\t\t\tclassName=\"flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-lg font-medium transition-colors hover:bg-basalt-accent\"\n\t\t\t\t>\n\t\t\t\t\t<span>{formatted}</span>\n\t\t\t\t\t<CalendarIcon className=\"h-4 w-4 text-basalt-muted-foreground\" strokeWidth={1.5} />\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span className=\"flex items-center gap-2 rounded-lg px-3 py-1.5 text-lg font-medium\">\n\t\t\t\t\t{formatted}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={onNextDay}\n\t\t\t\taria-label={nextDayLabel}\n\t\t\t\tclassName=\"flex h-8 w-8 items-center justify-center rounded-lg text-basalt-muted-foreground transition-colors hover:bg-basalt-accent hover:text-basalt-foreground\"\n\t\t\t>\n\t\t\t\t<ChevronRight className=\"h-4 w-4\" strokeWidth={1.5} />\n\t\t\t</button>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/charts/donut.d.ts

@@ -0,0 +1,8 @@
+import { type NamedValue } from "./sample.js";
+export declare function DonutChart({ data, ariaLabel, className, showLegend, valueFormatter, }: {
+    data?: NamedValue[];
+    ariaLabel?: string;
+    className?: string;
+    showLegend?: boolean;
+    valueFormatter?: (value: number) => string;
+}): import("react").JSX.Element;

package/dist/charts/donut.js

@@ -0,0 +1,36 @@
+"use client";
+import { CHART_COLORS as e } from "./palette.js";
+import { ANIMATION_PROPS as t, chartLegendProps as n, chartTooltipProps as r } from "./config.js";
+import { DONUT_SAMPLE as i } from "./sample.js";
+import { ChartFrame as a } from "./frame.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Cell as c, Legend as l, Pie as u, PieChart as d, Tooltip as f } from "recharts";
+//#region src/charts/donut.tsx
+function p({ data: p = i, ariaLabel: m = "Donut chart", className: h, showLegend: g = !1, valueFormatter: _ }) {
+	return /* @__PURE__ */ o(a, {
+		ariaLabel: m,
+		className: h,
+		size: "h-36 w-36",
+		children: /* @__PURE__ */ s(d, { children: [
+			/* @__PURE__ */ o(u, {
+				data: p,
+				dataKey: "value",
+				nameKey: "name",
+				innerRadius: 24,
+				outerRadius: 48,
+				stroke: "none",
+				...t,
+				children: p.map((t, n) => /* @__PURE__ */ o(c, { fill: e[n % e.length] }, `${t.name}-${n}`))
+			}),
+			g ? /* @__PURE__ */ o(l, { ...n() }) : null,
+			/* @__PURE__ */ o(f, { ...r({
+				formatter: _,
+				cursor: !1
+			}) })
+		] })
+	});
+}
+//#endregion
+export { p as DonutChart };
+
+//# sourceMappingURL=donut.js.map

package/dist/charts/donut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"donut.js","names":[],"sources":["../../src/charts/donut.tsx"],"sourcesContent":["import { Cell, Legend, Pie, PieChart, Tooltip } from \"recharts\";\nimport { ANIMATION_PROPS, chartLegendProps, chartTooltipProps } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\nimport { DONUT_SAMPLE, type NamedValue } from \"./sample\";\n\nexport function DonutChart({\n\tdata = DONUT_SAMPLE,\n\tariaLabel = \"Donut chart\",\n\tclassName,\n\tshowLegend = false,\n\tvalueFormatter,\n}: {\n\tdata?: NamedValue[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowLegend?: boolean;\n\tvalueFormatter?: (value: number) => string;\n}) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className} size=\"h-36 w-36\">\n\t\t\t<PieChart>\n\t\t\t\t<Pie\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\tnameKey=\"name\"\n\t\t\t\t\tinnerRadius={24}\n\t\t\t\t\touterRadius={48}\n\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t>\n\t\t\t\t\t{data.map((entry, index) => (\n\t\t\t\t\t\t<Cell key={`${entry.name}-${index}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />\n\t\t\t\t\t))}\n\t\t\t\t</Pie>\n\t\t\t\t{showLegend ? <Legend {...chartLegendProps()} /> : null}\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: false })} />\n\t\t\t</PieChart>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,EAAW,EAC1B,UAAO,GACP,eAAY,eACZ,cACA,gBAAa,IACb,qBAOE;CACF,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAAW,MAAK;EAC5D,UAAA,kBAAC,GAAD,EAAA,UAAA;GACC,kBAAC,GAAD;IACO;IACN,SAAQ;IACR,SAAQ;IACR,aAAa;IACb,aAAa;IACb,QAAO;IACP,GAAI;IAEH,UAAA,EAAK,KAAK,GAAO,MACjB,kBAAC,GAAD,EAAqC,MAAM,EAAa,IAAQ,EAAa,QAAU,GAA5E,GAAG,EAAM,KAAK,GAAG,GAA2D,CACvF;GACG,CAAA;GACJ,IAAa,kBAAC,GAAD,EAAQ,GAAI,EAAiB,EAAI,CAAA,IAAI;GACnD,kBAAC,GAAD,EAAS,GAAI,EAAkB;IAAE,WAAW;IAAgB,QAAQ;GAAM,CAAC,EAAI,CAAA;EACtE,EAAA,CAAA;CACC,CAAA;AAEd"}

package/dist/charts/frame.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement } from "react";
+export declare function ChartFrame({ ariaLabel, className, children, size, }: {
+    ariaLabel?: string;
+    className?: string;
+    children: ReactElement<{
+        accessibilityLayer?: boolean;
+    }>;
+    size?: string;
+}): import("react").JSX.Element;

package/dist/charts/frame.js

@@ -0,0 +1,22 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { RESPONSIVE_CONTAINER_PROPS as t } from "./config.js";
+import { cloneElement as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { ResponsiveContainer as i } from "recharts";
+//#region src/charts/frame.tsx
+function a({ ariaLabel: a, className: o, children: s, size: c = "h-36 w-56" }) {
+	return /* @__PURE__ */ r("div", {
+		role: "img",
+		"aria-label": a,
+		className: e(c, "basalt-chart outline-none [&_.recharts-layer]:outline-none [&_.recharts-rectangle]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none", o),
+		children: /* @__PURE__ */ r(i, {
+			...t,
+			children: n(s, { accessibilityLayer: !1 })
+		})
+	});
+}
+//#endregion
+export { a as ChartFrame };
+
+//# sourceMappingURL=frame.js.map

package/dist/charts/frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame.js","names":[],"sources":["../../src/charts/frame.tsx"],"sourcesContent":["import { cloneElement, type ReactElement } from \"react\";\nimport { ResponsiveContainer } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { RESPONSIVE_CONTAINER_PROPS } from \"./config\";\n\nexport function ChartFrame({\n\tariaLabel,\n\tclassName,\n\tchildren,\n\tsize = \"h-36 w-56\",\n}: {\n\tariaLabel?: string;\n\tclassName?: string;\n\tchildren: ReactElement<{ accessibilityLayer?: boolean }>;\n\tsize?: string;\n}) {\n\treturn (\n\t\t<div\n\t\t\trole=\"img\"\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={cn(\n\t\t\t\tsize,\n\t\t\t\t\"basalt-chart outline-none [&_.recharts-layer]:outline-none [&_.recharts-rectangle]:outline-none [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<ResponsiveContainer {...RESPONSIVE_CONTAINER_PROPS}>\n\t\t\t\t{cloneElement(children, { accessibilityLayer: false })}\n\t\t\t</ResponsiveContainer>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,EAAW,EAC1B,cACA,cACA,aACA,UAAO,eAML;CACF,OACC,kBAAC,OAAD;EACC,MAAK;EACL,cAAY;EACZ,WAAW,EACV,GACA,2MACA,CACD;EAEA,UAAA,kBAAC,GAAD;GAAqB,GAAI;GACvB,UAAA,EAAa,GAAU,EAAE,oBAAoB,GAAM,CAAC;EACjC,CAAA;CACjB,CAAA;AAEP"}

package/dist/charts/funnel.d.ts

@@ -0,0 +1,7 @@
+import { type NamedValue } from "./sample.js";
+export declare function FunnelChart({ data, ariaLabel, className, valueFormatter, }: {
+    data?: NamedValue[];
+    ariaLabel?: string;
+    className?: string;
+    valueFormatter?: (value: number) => string;
+}): import("react").JSX.Element;

package/dist/charts/funnel.js

@@ -0,0 +1,35 @@
+"use client";
+import { CHART_COLORS as e, chartAxis as t } from "./palette.js";
+import { ANIMATION_PROPS as n, chartFontSize as r, chartTooltipProps as i } from "./config.js";
+import { FUNNEL_SAMPLE as a } from "./sample.js";
+import { ChartFrame as o } from "./frame.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Funnel as l, FunnelChart as u, LabelList as d, Tooltip as f } from "recharts";
+//#region src/charts/funnel.tsx
+function p({ data: p = a, ariaLabel: m = "Funnel chart", className: h, valueFormatter: g }) {
+	return /* @__PURE__ */ s(o, {
+		ariaLabel: m,
+		className: h,
+		children: /* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(f, { ...i({
+			formatter: g,
+			cursor: !1
+		}) }), /* @__PURE__ */ s(l, {
+			data: p,
+			dataKey: "value",
+			nameKey: "name",
+			fill: e[1],
+			...n,
+			children: /* @__PURE__ */ s(d, {
+				dataKey: "name",
+				position: "right",
+				fill: t,
+				stroke: "none",
+				fontSize: r("axis")
+			})
+		})] })
+	});
+}
+//#endregion
+export { p as FunnelChart };
+
+//# sourceMappingURL=funnel.js.map

package/dist/charts/funnel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"funnel.js","names":[],"sources":["../../src/charts/funnel.tsx"],"sourcesContent":["import { Funnel, LabelList, FunnelChart as RechartsFunnel, Tooltip } from \"recharts\";\nimport { ANIMATION_PROPS, chartFontSize, chartTooltipProps } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS, chartAxis } from \"./palette\";\nimport { FUNNEL_SAMPLE, type NamedValue } from \"./sample\";\n\nexport function FunnelChart({\n\tdata = FUNNEL_SAMPLE,\n\tariaLabel = \"Funnel chart\",\n\tclassName,\n\tvalueFormatter,\n}: {\n\tdata?: NamedValue[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tvalueFormatter?: (value: number) => string;\n}) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<RechartsFunnel>\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: false })} />\n\t\t\t\t<Funnel\n\t\t\t\t\tdata={data}\n\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\tnameKey=\"name\"\n\t\t\t\t\tfill={CHART_COLORS[1]}\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t>\n\t\t\t\t\t<LabelList\n\t\t\t\t\t\tdataKey=\"name\"\n\t\t\t\t\t\tposition=\"right\"\n\t\t\t\t\t\tfill={chartAxis}\n\t\t\t\t\t\tstroke=\"none\"\n\t\t\t\t\t\tfontSize={chartFontSize(\"axis\")}\n\t\t\t\t\t/>\n\t\t\t\t</Funnel>\n\t\t\t</RechartsFunnel>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,EAAY,EAC3B,UAAO,GACP,eAAY,gBACZ,cACA,qBAME;CACF,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,EAAS,GAAI,EAAkB;GAAE,WAAW;GAAgB,QAAQ;EAAM,CAAC,EAAI,CAAA,GAC/E,kBAAC,GAAD;GACO;GACN,SAAQ;GACR,SAAQ;GACR,MAAM,EAAa;GACnB,GAAI;GAEJ,UAAA,kBAAC,GAAD;IACC,SAAQ;IACR,UAAS;IACT,MAAM;IACN,QAAO;IACP,UAAU,EAAc,MAAM;GAC9B,CAAA;EACM,CAAA,CACO,EAAA,CAAA;CACL,CAAA;AAEd"}

package/dist/charts/gauge.d.ts

@@ -0,0 +1,8 @@
+export declare function Gauge({ value, max, ariaLabel, className, hideValue, valueFormatter, }: {
+    value?: number;
+    max?: number;
+    ariaLabel?: string;
+    className?: string;
+    hideValue?: boolean;
+    valueFormatter?: (value: number) => string;
+}): import("react").JSX.Element;

package/dist/charts/gauge.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { CHART_COLORS as t } from "./palette.js";
+import { ChartFrame as n } from "./frame.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { PolarAngleAxis as a, RadialBar as o, RadialBarChart as s } from "recharts";
+//#region src/charts/gauge.tsx
+function c({ value: c = 72, max: l = 100, ariaLabel: u = "Gauge", className: d, hideValue: f = !1, valueFormatter: p }) {
+	let m = l === 0 ? 0 : Math.min(100, Math.max(0, c / l * 100)), h = p ? p(c) : String(c);
+	return /* @__PURE__ */ i("div", {
+		className: e("relative h-36 w-36", d),
+		children: [/* @__PURE__ */ r(n, {
+			ariaLabel: u,
+			className: "h-full w-full",
+			size: "h-full w-full",
+			children: /* @__PURE__ */ i(s, {
+				cx: "50%",
+				cy: "50%",
+				innerRadius: "75%",
+				outerRadius: "95%",
+				startAngle: 90,
+				endAngle: -270,
+				data: [{ value: m }],
+				barSize: 12,
+				children: [/* @__PURE__ */ r(a, {
+					type: "number",
+					domain: [0, 100],
+					angleAxisId: 0,
+					tick: !1
+				}), /* @__PURE__ */ r(o, {
+					dataKey: "value",
+					cornerRadius: 6,
+					fill: t[4],
+					background: { fill: t[23] }
+				})]
+			})
+		}), f ? null : /* @__PURE__ */ r("span", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-semibold text-basalt-foreground",
+			children: h
+		})]
+	});
+}
+//#endregion
+export { c as Gauge };
+
+//# sourceMappingURL=gauge.js.map

package/dist/charts/gauge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gauge.js","names":[],"sources":["../../src/charts/gauge.tsx"],"sourcesContent":["import { PolarAngleAxis, RadialBar, RadialBarChart } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\n\nexport function Gauge({\n\tvalue = 72,\n\tmax = 100,\n\tariaLabel = \"Gauge\",\n\tclassName,\n\thideValue = false,\n\tvalueFormatter,\n}: {\n\tvalue?: number;\n\tmax?: number;\n\tariaLabel?: string;\n\tclassName?: string;\n\thideValue?: boolean;\n\tvalueFormatter?: (value: number) => string;\n}) {\n\tconst percent = max === 0 ? 0 : Math.min(100, Math.max(0, (value / max) * 100));\n\tconst display = valueFormatter ? valueFormatter(value) : String(value);\n\treturn (\n\t\t<div className={cn(\"relative h-36 w-36\", className)}>\n\t\t\t<ChartFrame ariaLabel={ariaLabel} className=\"h-full w-full\" size=\"h-full w-full\">\n\t\t\t\t<RadialBarChart\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tinnerRadius=\"75%\"\n\t\t\t\t\touterRadius=\"95%\"\n\t\t\t\t\tstartAngle={90}\n\t\t\t\t\tendAngle={-270}\n\t\t\t\t\tdata={[{ value: percent }]}\n\t\t\t\t\tbarSize={12}\n\t\t\t\t>\n\t\t\t\t\t<PolarAngleAxis type=\"number\" domain={[0, 100]} angleAxisId={0} tick={false} />\n\t\t\t\t\t<RadialBar\n\t\t\t\t\t\tdataKey=\"value\"\n\t\t\t\t\t\tcornerRadius={6}\n\t\t\t\t\t\tfill={CHART_COLORS[4]}\n\t\t\t\t\t\tbackground={{ fill: CHART_COLORS[23] }}\n\t\t\t\t\t/>\n\t\t\t\t</RadialBarChart>\n\t\t\t</ChartFrame>\n\t\t\t{hideValue ? null : (\n\t\t\t\t<span className=\"pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-semibold text-basalt-foreground\">\n\t\t\t\t\t{display}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,EAAM,EACrB,WAAQ,IACR,SAAM,KACN,eAAY,SACZ,cACA,eAAY,IACZ,qBAQE;CACF,IAAM,IAAU,MAAQ,IAAI,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,IAAQ,IAAO,GAAG,CAAC,GACxE,IAAU,IAAiB,EAAe,CAAK,IAAI,OAAO,CAAK;CACrE,OACC,kBAAC,OAAD;EAAK,WAAW,EAAG,sBAAsB,CAAS;EAAlD,UAAA,CACC,kBAAC,GAAD;GAAuB;GAAW,WAAU;GAAgB,MAAK;GAChE,UAAA,kBAAC,GAAD;IACC,IAAG;IACH,IAAG;IACH,aAAY;IACZ,aAAY;IACZ,YAAY;IACZ,UAAU;IACV,MAAM,CAAC,EAAE,OAAO,EAAQ,CAAC;IACzB,SAAS;IARV,UAAA,CAUC,kBAAC,GAAD;KAAgB,MAAK;KAAS,QAAQ,CAAC,GAAG,GAAG;KAAG,aAAa;KAAG,MAAM;IAAQ,CAAA,GAC9E,kBAAC,GAAD;KACC,SAAQ;KACR,cAAc;KACd,MAAM,EAAa;KACnB,YAAY,EAAE,MAAM,EAAa,IAAI;IACrC,CAAA,CACc;;EACL,CAAA,GACX,IAAY,OACZ,kBAAC,QAAD;GAAM,WAAU;GACd,UAAA;EACI,CAAA,CAEH;;AAEP"}

package/dist/charts/grouped-bar.d.ts

@@ -0,0 +1,7 @@
+import { type XYPoint } from "./sample.js";
+export declare function GroupedBarChart({ data, ariaLabel, className, showAxes, }: {
+    data?: XYPoint[];
+    ariaLabel?: string;
+    className?: string;
+    showAxes?: boolean;
+}): import("react").JSX.Element;

package/dist/charts/grouped-bar.js

@@ -0,0 +1,42 @@
+"use client";
+import { CHART_COLORS as e } from "./palette.js";
+import { ANIMATION_PROPS as t, BAR_RADIUS as n, GRID_PROPS as r, cartesianAxisProps as i, chartTooltipProps as a } from "./config.js";
+import { SAMPLE as o } from "./sample.js";
+import { ChartFrame as s } from "./frame.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Bar as u, BarChart as d, CartesianGrid as f, Tooltip as p, XAxis as m, YAxis as h } from "recharts";
+//#region src/charts/grouped-bar.tsx
+function g({ data: g = o, ariaLabel: _ = "Grouped bar chart", className: v, showAxes: y = !1 }) {
+	return /* @__PURE__ */ c(s, {
+		ariaLabel: _,
+		className: v,
+		children: /* @__PURE__ */ l(d, {
+			data: g,
+			children: [
+				y ? /* @__PURE__ */ c(f, { ...r }) : null,
+				/* @__PURE__ */ c(m, {
+					dataKey: "x",
+					...i(!y)
+				}),
+				/* @__PURE__ */ c(h, { ...i(!y) }),
+				/* @__PURE__ */ c(p, { ...a({ cursor: "bar" }) }),
+				/* @__PURE__ */ c(u, {
+					dataKey: "y",
+					fill: e[0],
+					radius: n.vertical,
+					...t
+				}),
+				/* @__PURE__ */ c(u, {
+					dataKey: "y2",
+					fill: e[2],
+					radius: n.vertical,
+					...t
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { g as GroupedBarChart };
+
+//# sourceMappingURL=grouped-bar.js.map

package/dist/charts/grouped-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouped-bar.js","names":[],"sources":["../../src/charts/grouped-bar.tsx"],"sourcesContent":["import { Bar, CartesianGrid, BarChart as RechartsBar, Tooltip, XAxis, YAxis } from \"recharts\";\nimport {\n\tANIMATION_PROPS,\n\tBAR_RADIUS,\n\tcartesianAxisProps,\n\tchartTooltipProps,\n\tGRID_PROPS,\n} from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\nimport { SAMPLE, type XYPoint } from \"./sample\";\n\nexport function GroupedBarChart({\n\tdata = SAMPLE,\n\tariaLabel = \"Grouped bar chart\",\n\tclassName,\n\tshowAxes = false,\n}: {\n\tdata?: XYPoint[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n}) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<RechartsBar data={data}>\n\t\t\t\t{showAxes ? <CartesianGrid {...GRID_PROPS} /> : null}\n\t\t\t\t<XAxis dataKey=\"x\" {...cartesianAxisProps(!showAxes)} />\n\t\t\t\t<YAxis {...cartesianAxisProps(!showAxes)} />\n\t\t\t\t<Tooltip {...chartTooltipProps({ cursor: \"bar\" })} />\n\t\t\t\t<Bar dataKey=\"y\" fill={CHART_COLORS[0]} radius={BAR_RADIUS.vertical} {...ANIMATION_PROPS} />\n\t\t\t\t<Bar\n\t\t\t\t\tdataKey=\"y2\"\n\t\t\t\t\tfill={CHART_COLORS[2]}\n\t\t\t\t\tradius={BAR_RADIUS.vertical}\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t/>\n\t\t\t</RechartsBar>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,EAAgB,EAC/B,UAAO,GACP,eAAY,qBACZ,cACA,cAAW,MAMT;CACF,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD;GAAmB;GAAnB,UAAA;IACE,IAAW,kBAAC,GAAD,EAAe,GAAI,EAAa,CAAA,IAAI;IAChD,kBAAC,GAAD;KAAO,SAAQ;KAAI,GAAI,EAAmB,CAAC,CAAQ;IAAI,CAAA;IACvD,kBAAC,GAAD,EAAO,GAAI,EAAmB,CAAC,CAAQ,EAAI,CAAA;IAC3C,kBAAC,GAAD,EAAS,GAAI,EAAkB,EAAE,QAAQ,MAAM,CAAC,EAAI,CAAA;IACpD,kBAAC,GAAD;KAAK,SAAQ;KAAI,MAAM,EAAa;KAAI,QAAQ,EAAW;KAAU,GAAI;IAAkB,CAAA;IAC3F,kBAAC,GAAD;KACC,SAAQ;KACR,MAAM,EAAa;KACnB,QAAQ,EAAW;KACnB,GAAI;IACJ,CAAA;GACW;;CACF,CAAA;AAEd"}

package/dist/charts/heatmap-calendar.d.ts

@@ -0,0 +1,27 @@
+export type HeatmapDataPoint = {
+    date: string;
+    value: number;
+};
+export declare const heatmapColorScales: {
+    readonly green: readonly ["hsl(var(--basalt-muted))", "hsl(var(--basalt-heatmap-green-1))", "hsl(var(--basalt-heatmap-green-2))", "hsl(var(--basalt-heatmap-green-3))", "hsl(var(--basalt-heatmap-green-4))"];
+    readonly red: readonly ["hsl(var(--basalt-muted))", "hsl(var(--basalt-heatmap-red-1))", "hsl(var(--basalt-heatmap-red-2))", "hsl(var(--basalt-heatmap-red-3))", "hsl(var(--basalt-heatmap-red-4))"];
+    readonly blue: readonly ["hsl(var(--basalt-muted))", "hsl(var(--basalt-heatmap-blue-1))", "hsl(var(--basalt-heatmap-blue-2))", "hsl(var(--basalt-heatmap-blue-3))", "hsl(var(--basalt-heatmap-blue-4))"];
+    readonly orange: readonly ["hsl(var(--basalt-muted))", "hsl(var(--basalt-heatmap-orange-1))", "hsl(var(--basalt-heatmap-orange-2))", "hsl(var(--basalt-heatmap-orange-3))", "hsl(var(--basalt-heatmap-orange-4))"];
+};
+export declare function HeatmapCalendar({ values, data, year, colorScale, valueFormatter, metricLabel, cellSize, cellGap, locale, weekdayLabels, monthLabels, lessLabel, moreLabel, ariaLabel, className, }: {
+    values?: number[];
+    data?: HeatmapDataPoint[];
+    year?: number;
+    colorScale?: readonly string[];
+    valueFormatter?: (value: number, date: string) => string;
+    metricLabel?: string;
+    cellSize?: number;
+    cellGap?: number;
+    locale?: string;
+    weekdayLabels?: string[];
+    monthLabels?: string[];
+    lessLabel?: string;
+    moreLabel?: string;
+    ariaLabel?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/charts/heatmap-calendar.js

@@ -0,0 +1,200 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Tooltip as t, TooltipContent as n, TooltipProvider as r, TooltipTrigger as i } from "../components/tooltip.js";
+import { useMemo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/charts/heatmap-calendar.tsx
+var c = {
+	green: [
+		"hsl(var(--basalt-muted))",
+		"hsl(var(--basalt-heatmap-green-1))",
+		"hsl(var(--basalt-heatmap-green-2))",
+		"hsl(var(--basalt-heatmap-green-3))",
+		"hsl(var(--basalt-heatmap-green-4))"
+	],
+	red: [
+		"hsl(var(--basalt-muted))",
+		"hsl(var(--basalt-heatmap-red-1))",
+		"hsl(var(--basalt-heatmap-red-2))",
+		"hsl(var(--basalt-heatmap-red-3))",
+		"hsl(var(--basalt-heatmap-red-4))"
+	],
+	blue: [
+		"hsl(var(--basalt-muted))",
+		"hsl(var(--basalt-heatmap-blue-1))",
+		"hsl(var(--basalt-heatmap-blue-2))",
+		"hsl(var(--basalt-heatmap-blue-3))",
+		"hsl(var(--basalt-heatmap-blue-4))"
+	],
+	orange: [
+		"hsl(var(--basalt-muted))",
+		"hsl(var(--basalt-heatmap-orange-1))",
+		"hsl(var(--basalt-heatmap-orange-2))",
+		"hsl(var(--basalt-heatmap-orange-3))",
+		"hsl(var(--basalt-heatmap-orange-4))"
+	]
+};
+function l(e) {
+	return Array.from({ length: 7 }, (t, n) => new Intl.DateTimeFormat(e, { weekday: "short" }).format(new Date(2023, 0, 1 + n)));
+}
+function u(e) {
+	return Array.from({ length: 12 }, (t, n) => new Intl.DateTimeFormat(e, { month: "short" }).format(new Date(2023, n, 1)));
+}
+function d(e) {
+	let t = [], n = new Date(e, 0, 1), r = new Date(e, 11, 31), i = new Date(n);
+	i.setDate(i.getDate() - i.getDay());
+	let a = new Date(i), o = [];
+	for (; (a <= r || o.length > 0) && (o.length === 7 && (t.push(o), o = []), !(a > r));) o.push(new Date(a)), a = new Date(a), a.setDate(a.getDate() + 1);
+	return o.length > 0 && t.push(o), t;
+}
+function f(e) {
+	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+}
+function p(e, t, n) {
+	if (e === 0) return 0;
+	let r = n.length - 1, i = Math.min(e / t, 1);
+	return Math.ceil(i * r);
+}
+function m({ values: t = Array.from({ length: 28 }, (e, t) => t % 5), data: n, year: r, colorScale: i = c.green, valueFormatter: a = (e) => e.toLocaleString(), metricLabel: s = "Value", cellSize: l = 12, cellGap: u = 2, locale: d = "en-US", weekdayLabels: f, monthLabels: p, lessLabel: m = "Less", moreLabel: g = "More", ariaLabel: _ = "Heatmap calendar", className: v }) {
+	return n && r != null ? /* @__PURE__ */ o(h, {
+		data: n,
+		year: r,
+		colorScale: i,
+		valueFormatter: a,
+		metricLabel: s,
+		cellSize: l,
+		cellGap: u,
+		locale: d,
+		weekdayLabels: f,
+		monthLabels: p,
+		lessLabel: m,
+		moreLabel: g,
+		ariaLabel: _,
+		className: v
+	}) : /* @__PURE__ */ o("div", {
+		className: e("grid grid-cols-7 gap-1", v),
+		role: "img",
+		"aria-label": _,
+		children: t.map((e, t) => /* @__PURE__ */ o("span", {
+			className: "h-3 w-3 rounded-sm bg-basalt-primary",
+			style: { opacity: .2 + Math.min(4, Math.max(0, e)) * .15 }
+		}, t))
+	});
+}
+function h({ data: c, year: m, colorScale: h, valueFormatter: g, metricLabel: _, cellSize: v, cellGap: y, locale: b, weekdayLabels: x, monthLabels: S, lessLabel: C, moreLabel: w, ariaLabel: T, className: E }) {
+	let D = x ?? l(b), O = S ?? u(b), { weeks: k, dataMap: A, maxValue: j, labels: M } = a(() => {
+		let e = d(m), t = /* @__PURE__ */ new Map(), n = 0;
+		for (let e of c) t.set(e.date, e.value), e.value > n && (n = e.value);
+		let r = [], i = -1;
+		return e.forEach((e, t) => {
+			let n = e.find((e) => e.getFullYear() === m);
+			if (n) {
+				let e = n.getMonth();
+				e !== i && (r.push({
+					month: O[e],
+					weekIndex: t
+				}), i = e);
+			}
+		}), {
+			weeks: e,
+			dataMap: t,
+			maxValue: n,
+			labels: r
+		};
+	}, [
+		c,
+		O,
+		m
+	]);
+	return /* @__PURE__ */ o("div", {
+		className: e("overflow-x-auto", E),
+		role: "img",
+		"aria-label": T,
+		children: /* @__PURE__ */ o(r, { children: /* @__PURE__ */ s("div", {
+			className: "inline-block",
+			children: [
+				/* @__PURE__ */ o("div", {
+					className: "relative mb-1 h-4 text-xs text-basalt-muted-foreground",
+					style: { marginLeft: 30 },
+					children: M.map((e) => /* @__PURE__ */ o("div", {
+						className: "absolute",
+						style: { left: e.weekIndex * (v + y) },
+						children: e.month
+					}, `${e.month}-${e.weekIndex}`))
+				}),
+				/* @__PURE__ */ s("div", {
+					className: "flex",
+					children: [/* @__PURE__ */ o("div", {
+						className: "mr-1 flex flex-col text-xs text-basalt-muted-foreground",
+						style: { width: 30 },
+						children: D.map((e, t) => /* @__PURE__ */ o("div", {
+							style: {
+								height: v + y,
+								lineHeight: `${v + y}px`,
+								visibility: t % 2 == 1 ? "visible" : "hidden"
+							},
+							children: e
+						}, `${e}-${t}`))
+					}), /* @__PURE__ */ o("div", {
+						className: "flex",
+						style: { gap: y },
+						children: k.map((e, r) => /* @__PURE__ */ o("div", {
+							className: "flex flex-col",
+							style: { gap: y },
+							children: e.map((e, r) => {
+								let a = f(e), c = A.get(a) ?? 0, l = e.getFullYear() === m, u = p(c, j, h);
+								return l ? /* @__PURE__ */ s(t, { children: [/* @__PURE__ */ o(i, {
+									asChild: !0,
+									children: /* @__PURE__ */ o("div", {
+										className: "cursor-pointer rounded-sm transition-colors hover:ring-1 hover:ring-basalt-foreground",
+										style: {
+											width: v,
+											height: v,
+											backgroundColor: h[u]
+										}
+									})
+								}), /* @__PURE__ */ o(n, { children: /* @__PURE__ */ s("div", {
+									className: "text-sm",
+									children: [/* @__PURE__ */ o("div", {
+										className: "font-medium",
+										children: a
+									}), /* @__PURE__ */ s("div", {
+										className: "text-basalt-muted-foreground",
+										children: [
+											_,
+											": ",
+											g(c, a)
+										]
+									})]
+								}) })] }, r) : /* @__PURE__ */ o("div", { style: {
+									width: v,
+									height: v,
+									visibility: "hidden"
+								} }, r);
+							})
+						}, r))
+					})]
+				}),
+				/* @__PURE__ */ s("div", {
+					className: "mt-2 flex items-center justify-end gap-1 text-xs text-basalt-muted-foreground",
+					children: [
+						/* @__PURE__ */ o("span", { children: C }),
+						h.map((e) => /* @__PURE__ */ o("div", {
+							className: "rounded-sm",
+							style: {
+								width: v,
+								height: v,
+								backgroundColor: e
+							}
+						}, e)),
+						/* @__PURE__ */ o("span", { children: w })
+					]
+				})
+			]
+		}) })
+	});
+}
+//#endregion
+export { m as HeatmapCalendar, c as heatmapColorScales };
+
+//# sourceMappingURL=heatmap-calendar.js.map