@nocoo/basalt 2.0.0-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Zheng Li
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# @nocoo/basalt
+
+Basalt component library. ESM, granular exports, Tailwind v4 or standalone CSS.
+
+## Tailwind
+
+Import order is required:
+
+```css
+@source "../node_modules/@nocoo/basalt/dist/**/*.{js,jsx,ts,tsx}";
+@import "@nocoo/basalt/styles/tailwind";
+@import "tailwindcss";
+```
+
+`./styles` points at the Tailwind contract. Basalt `@theme` tokens must register before `tailwindcss`.
+
+## Standalone (no Tailwind)
+
+```ts
+import "@nocoo/basalt/styles/standalone";
+```
+
+Standalone has no Preflight and no html/body reset. It is compiled tokens + the utilities used by shipped controls + namespaced keyframes. Rebuild with `bun scripts/build-basalt-standalone.ts`.
+
+## Components
+
+```ts
+import { Button, ThemeProvider } from "@nocoo/basalt";
+import { DatePicker } from "@nocoo/basalt/components/date-picker";
+import { DonutChart } from "@nocoo/basalt/charts/donut";
+```
+
+Root barrel is small leaves + providers. Charts, DatePicker, and DataTable stay on granular paths.
+
+Optional peer ranges for those granular entrypoints:
+
+- `recharts` `^3` — used by chart modules such as `DonutChart`
+- `react-day-picker` `^10` — declared for DatePicker consumers; the current DatePicker implementation does not call it
+- `@tanstack/react-table` `^9` — declared for DataTable consumers; the current DataTable implementation does not call it
+
+Install the matching library in the consumer when you use that granular path. Tailwind `^4` remains optional for the Tailwind stylesheet contract.

package/dist/charts/area.d.ts

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

package/dist/charts/area.js

@@ -0,0 +1,55 @@
+"use client";
+import { CHART_COLORS as e } from "./palette.js";
+import { ANIMATION_PROPS as t, CHART_TYPE 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 { Area as u, AreaChart as d, CartesianGrid as f, Tooltip as p, XAxis as m, YAxis as h } from "recharts";
+//#region src/charts/area.tsx
+function g({ data: g = o, ariaLabel: _ = "Area chart", className: v, showAxes: y = !1, stacked: b = !1 }) {
+	let x = g.some((e) => e.y2 != null), S = g.some((e) => e.y3 != null), C = b ? "stack" : void 0;
+	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: "line" }) }),
+				/* @__PURE__ */ c(u, {
+					dataKey: "y",
+					stackId: C,
+					stroke: e[0],
+					fill: e[0],
+					fillOpacity: n.areaFillAlpha,
+					...t
+				}),
+				x ? /* @__PURE__ */ c(u, {
+					dataKey: "y2",
+					stackId: C,
+					stroke: e[2],
+					fill: e[2],
+					fillOpacity: n.areaFillAlpha,
+					...t
+				}) : null,
+				S ? /* @__PURE__ */ c(u, {
+					dataKey: "y3",
+					stackId: C,
+					stroke: e[4],
+					fill: e[4],
+					fillOpacity: n.areaFillAlpha,
+					...t
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { g as AreaChart };
+
+//# sourceMappingURL=area.js.map

package/dist/charts/area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"area.js","names":[],"sources":["../../src/charts/area.tsx"],"sourcesContent":["import { Area, CartesianGrid, AreaChart as RechartsArea, Tooltip, XAxis, YAxis } from \"recharts\";\nimport {\n\tANIMATION_PROPS,\n\tCHART_TYPE,\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 AreaChart({\n\tdata = SAMPLE,\n\tariaLabel = \"Area chart\",\n\tclassName,\n\tshowAxes = false,\n\tstacked = false,\n}: {\n\tdata?: XYPoint[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n\tstacked?: boolean;\n}) {\n\tconst dual = data.some((point) => point.y2 != null);\n\tconst triple = data.some((point) => point.y3 != null);\n\tconst stackId = stacked ? \"stack\" : undefined;\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<RechartsArea 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: \"line\" })} />\n\t\t\t\t<Area\n\t\t\t\t\tdataKey=\"y\"\n\t\t\t\t\tstackId={stackId}\n\t\t\t\t\tstroke={CHART_COLORS[0]}\n\t\t\t\t\tfill={CHART_COLORS[0]}\n\t\t\t\t\tfillOpacity={CHART_TYPE.areaFillAlpha}\n\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t/>\n\t\t\t\t{dual ? (\n\t\t\t\t\t<Area\n\t\t\t\t\t\tdataKey=\"y2\"\n\t\t\t\t\t\tstackId={stackId}\n\t\t\t\t\t\tstroke={CHART_COLORS[2]}\n\t\t\t\t\t\tfill={CHART_COLORS[2]}\n\t\t\t\t\t\tfillOpacity={CHART_TYPE.areaFillAlpha}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t\t{triple ? (\n\t\t\t\t\t<Area\n\t\t\t\t\t\tdataKey=\"y3\"\n\t\t\t\t\t\tstackId={stackId}\n\t\t\t\t\t\tstroke={CHART_COLORS[4]}\n\t\t\t\t\t\tfill={CHART_COLORS[4]}\n\t\t\t\t\t\tfillOpacity={CHART_TYPE.areaFillAlpha}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t</RechartsArea>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,EAAU,EACzB,UAAO,GACP,eAAY,cACZ,cACA,cAAW,IACX,aAAU,MAOR;CACF,IAAM,IAAO,EAAK,MAAM,MAAU,EAAM,MAAM,IAAI,GAC5C,IAAS,EAAK,MAAM,MAAU,EAAM,MAAM,IAAI,GAC9C,IAAU,IAAU,UAAU,KAAA;CACpC,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD;GAAoB;GAApB,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,OAAO,CAAC,EAAI,CAAA;IACrD,kBAAC,GAAD;KACC,SAAQ;KACC;KACT,QAAQ,EAAa;KACrB,MAAM,EAAa;KACnB,aAAa,EAAW;KACxB,GAAI;IACJ,CAAA;IACA,IACA,kBAAC,GAAD;KACC,SAAQ;KACC;KACT,QAAQ,EAAa;KACrB,MAAM,EAAa;KACnB,aAAa,EAAW;KACxB,GAAI;IACJ,CAAA,IACE;IACH,IACA,kBAAC,GAAD;KACC,SAAQ;KACC;KACT,QAAQ,EAAa;KACrB,MAAM,EAAa;KACnB,aAAa,EAAW;KACxB,GAAI;IACJ,CAAA,IACE;GACS;;CACH,CAAA;AAEd"}

package/dist/charts/bar.d.ts

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

package/dist/charts/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/bar.tsx
+function g({ data: g = o, ariaLabel: _ = "Bar chart", className: v, showAxes: y = !1, color: b, valueFormatter: x }) {
+	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),
+					tickFormatter: x
+				}),
+				/* @__PURE__ */ c(p, { ...a({
+					formatter: x,
+					cursor: "bar"
+				}) }),
+				/* @__PURE__ */ c(u, {
+					dataKey: "y",
+					fill: b ?? e[0],
+					radius: n.vertical,
+					...t
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { g as BarChart };
+
+//# sourceMappingURL=bar.js.map

package/dist/charts/bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bar.js","names":[],"sources":["../../src/charts/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 BarChart({\n\tdata = SAMPLE,\n\tariaLabel = \"Bar chart\",\n\tclassName,\n\tshowAxes = false,\n\tcolor,\n\tvalueFormatter,\n}: {\n\tdata?: XYPoint[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n\tcolor?: string;\n\tvalueFormatter?: (value: number) => string;\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)} tickFormatter={valueFormatter} />\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: \"bar\" })} />\n\t\t\t\t<Bar\n\t\t\t\t\tdataKey=\"y\"\n\t\t\t\t\tfill={color ?? CHART_COLORS[0]}\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,EAAS,EACxB,UAAO,GACP,eAAY,aACZ,cACA,cAAW,IACX,UACA,qBAQE;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;KAAO,GAAI,EAAmB,CAAC,CAAQ;KAAG,eAAe;IAAiB,CAAA;IAC1E,kBAAC,GAAD,EAAS,GAAI,EAAkB;KAAE,WAAW;KAAgB,QAAQ;IAAM,CAAC,EAAI,CAAA;IAC/E,kBAAC,GAAD;KACC,SAAQ;KACR,MAAM,KAAS,EAAa;KAC5B,QAAQ,EAAW;KACnB,GAAI;IACJ,CAAA;GACW;;CACF,CAAA;AAEd"}

package/dist/charts/bullet.d.ts

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

package/dist/charts/bullet.js

@@ -0,0 +1,50 @@
+"use client";
+import { CHART_COLORS as e } from "./palette.js";
+import { ANIMATION_PROPS as t, cartesianAxisProps as n, chartTooltipProps as r } from "./config.js";
+import { BULLET_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 { Bar as c, BarChart as l, Tooltip as u, XAxis as d, YAxis as f } from "recharts";
+//#region src/charts/bullet.tsx
+function p({ data: p = i, ariaLabel: m = "Bullet chart", className: h, showAxes: g = !0, valueFormatter: _ }) {
+	return /* @__PURE__ */ o(a, {
+		ariaLabel: m,
+		className: h,
+		children: /* @__PURE__ */ s(l, {
+			data: p,
+			layout: "vertical",
+			children: [
+				/* @__PURE__ */ o(d, {
+					type: "number",
+					...n(!g),
+					tickFormatter: _
+				}),
+				/* @__PURE__ */ o(f, {
+					type: "category",
+					dataKey: "name",
+					...n(!g)
+				}),
+				/* @__PURE__ */ o(u, { ...r({
+					formatter: _,
+					cursor: "bar"
+				}) }),
+				/* @__PURE__ */ o(c, {
+					dataKey: "target",
+					fill: e[6],
+					barSize: 10,
+					...t
+				}),
+				/* @__PURE__ */ o(c, {
+					dataKey: "value",
+					fill: e[1],
+					barSize: 6,
+					...t
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { p as BulletChart };
+
+//# sourceMappingURL=bullet.js.map

package/dist/charts/bullet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bullet.js","names":[],"sources":["../../src/charts/bullet.tsx"],"sourcesContent":["import { Bar, BarChart as RechartsBar, Tooltip, XAxis, YAxis } from \"recharts\";\nimport { ANIMATION_PROPS, cartesianAxisProps, chartTooltipProps } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { CHART_COLORS } from \"./palette\";\nimport { BULLET_SAMPLE, type BulletPoint } from \"./sample\";\n\nexport function BulletChart({\n\tdata = BULLET_SAMPLE,\n\tariaLabel = \"Bullet chart\",\n\tclassName,\n\tshowAxes = true,\n\tvalueFormatter,\n}: {\n\tdata?: BulletPoint[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowAxes?: boolean;\n\tvalueFormatter?: (value: number) => string;\n}) {\n\treturn (\n\t\t<ChartFrame ariaLabel={ariaLabel} className={className}>\n\t\t\t<RechartsBar data={data} layout=\"vertical\">\n\t\t\t\t<XAxis type=\"number\" {...cartesianAxisProps(!showAxes)} tickFormatter={valueFormatter} />\n\t\t\t\t<YAxis type=\"category\" dataKey=\"name\" {...cartesianAxisProps(!showAxes)} />\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: \"bar\" })} />\n\t\t\t\t<Bar dataKey=\"target\" fill={CHART_COLORS[6]} barSize={10} {...ANIMATION_PROPS} />\n\t\t\t\t<Bar dataKey=\"value\" fill={CHART_COLORS[1]} barSize={6} {...ANIMATION_PROPS} />\n\t\t\t</RechartsBar>\n\t\t</ChartFrame>\n\t);\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,EAAY,EAC3B,UAAO,GACP,eAAY,gBACZ,cACA,cAAW,IACX,qBAOE;CACF,OACC,kBAAC,GAAD;EAAuB;EAAsB;EAC5C,UAAA,kBAAC,GAAD;GAAmB;GAAM,QAAO;GAAhC,UAAA;IACC,kBAAC,GAAD;KAAO,MAAK;KAAS,GAAI,EAAmB,CAAC,CAAQ;KAAG,eAAe;IAAiB,CAAA;IACxF,kBAAC,GAAD;KAAO,MAAK;KAAW,SAAQ;KAAO,GAAI,EAAmB,CAAC,CAAQ;IAAI,CAAA;IAC1E,kBAAC,GAAD,EAAS,GAAI,EAAkB;KAAE,WAAW;KAAgB,QAAQ;IAAM,CAAC,EAAI,CAAA;IAC/E,kBAAC,GAAD;KAAK,SAAQ;KAAS,MAAM,EAAa;KAAI,SAAS;KAAI,GAAI;IAAkB,CAAA;IAChF,kBAAC,GAAD;KAAK,SAAQ;KAAQ,MAAM,EAAa;KAAI,SAAS;KAAG,GAAI;IAAkB,CAAA;GAClE;;CACF,CAAA;AAEd"}

package/dist/charts/chart-colors.d.ts

@@ -0,0 +1 @@
+export { CHART_COLORS, ChartPalette as Colors } from "./palette.js";

package/dist/charts/chart-colors.js

@@ -0,0 +1,3 @@
+"use client";
+import { CHART_COLORS as e, ChartPalette as t } from "./palette.js";
+export { e as CHART_COLORS, t as Colors };

package/dist/charts/charts.d.ts

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

package/dist/charts/charts.js

@@ -0,0 +1,15 @@
+"use client";
+import { LineChart as e } from "./line.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/charts/charts.tsx
+function n({ data: n, ariaLabel: r = "Charts", className: i }) {
+	return /* @__PURE__ */ t(e, {
+		data: n,
+		ariaLabel: r,
+		className: i
+	});
+}
+//#endregion
+export { n as Charts };
+
+//# sourceMappingURL=charts.js.map

package/dist/charts/charts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.js","names":[],"sources":["../../src/charts/charts.tsx"],"sourcesContent":["import { LineChart } from \"./line\";\nimport type { XYPoint } from \"./sample\";\n\nexport function Charts({\n\tdata,\n\tariaLabel = \"Charts\",\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,EAAO,EACtB,SACA,eAAY,UACZ,gBAKE;CACF,OAAO,kBAAC,GAAD;EAAiB;EAAiB;EAAsB;CAAY,CAAA;AAC5E"}

package/dist/charts/config.d.ts

@@ -0,0 +1,117 @@
+export type ChartTypeFace = "axis" | "legend" | "tooltipTitle" | "tooltipBody";
+export declare const CHART_TYPE: {
+    readonly axisFontSize: 11;
+    readonly legendFontSize: 12;
+    readonly tooltipTitleSize: 12;
+    readonly tooltipBodySize: 12;
+    readonly tooltipDot: 8;
+    readonly strokeWidth: 2;
+    readonly gridDash: "3 3";
+    readonly gridOpacity: 0.15;
+    readonly areaFillAlpha: 0.2;
+};
+export declare function chartFontSize(face: ChartTypeFace): number;
+export declare function chartTextStyle(face: ChartTypeFace): {
+    fontSize: number;
+};
+export declare function chartTickStyle(face?: ChartTypeFace): {
+    fontSize: number;
+    fill: string;
+};
+export declare function getChartColor(index: number): string;
+export declare const AXIS_CONFIG: {
+    readonly tick: {
+        fontSize: number;
+        fill: string;
+    };
+    axisLine: false;
+    tickLine: false;
+};
+export declare function cartesianAxisProps(hidden?: boolean): {
+    tick: {
+        fontSize: number;
+        fill: string;
+    };
+    axisLine: false;
+    tickLine: false;
+    hide: boolean;
+};
+export declare const GRID_PROPS: {
+    vertical: false;
+    stroke: string;
+    strokeOpacity: 0.15;
+    strokeDasharray: "3 3";
+};
+export declare const BAR_RADIUS: {
+    horizontal: [number, number, number, number];
+    vertical: [number, number, number, number];
+};
+export declare const ANIMATION_PROPS: {
+    isAnimationActive: boolean;
+};
+export declare const CHART_TOOLTIP_CURSOR_LINE: {
+    readonly stroke: string;
+    readonly strokeOpacity: 0.35;
+    readonly strokeWidth: 1;
+};
+export declare const CHART_TOOLTIP_CURSOR_BAR: {
+    readonly fill: string;
+    readonly stroke: "none";
+};
+export declare function chartTooltipContentStyle(): {
+    background: string;
+    border: string;
+    borderRadius: string;
+    fontSize: number;
+    color: string;
+};
+export declare function chartTooltipProps(options?: {
+    formatter?: (value: number) => string;
+    cursor?: "bar" | "line" | false;
+}): {
+    isAnimationActive: boolean;
+    animationDuration: number;
+    offset: number;
+    cursor: boolean | {
+        readonly stroke: string;
+        readonly strokeOpacity: 0.35;
+        readonly strokeWidth: 1;
+    } | {
+        readonly fill: string;
+        readonly stroke: "none";
+    };
+    wrapperStyle: {
+        outline: string;
+        zIndex: number;
+        pointerEvents: "none";
+    };
+    contentStyle: {
+        background: string;
+        border: string;
+        borderRadius: string;
+        fontSize: number;
+        color: string;
+    };
+    labelStyle: {
+        fontSize: number;
+        color: string;
+    };
+    itemStyle: {
+        fontSize: number;
+    };
+    formatter: ((value: unknown) => string | undefined) | undefined;
+};
+export declare function chartLegendProps(): {
+    wrapperStyle: {
+        fontSize: number;
+        color: string;
+    };
+    iconSize: number;
+};
+export declare const RESPONSIVE_CONTAINER_PROPS: {
+    width: "100%";
+    height: "100%";
+    minWidth: number;
+    minHeight: number;
+    debounce: number;
+};

package/dist/charts/config.js

@@ -0,0 +1,117 @@
+"use client";
+import { CHART_COLORS as e, chartAxis as t, withAlpha as n } from "./palette.js";
+//#region src/charts/config.ts
+var r = {
+	axisFontSize: 11,
+	legendFontSize: 12,
+	tooltipTitleSize: 12,
+	tooltipBodySize: 12,
+	tooltipDot: 8,
+	strokeWidth: 2,
+	gridDash: "3 3",
+	gridOpacity: .15,
+	areaFillAlpha: .2
+};
+function i(e) {
+	return e === "legend" ? r.legendFontSize : e === "tooltipTitle" ? r.tooltipTitleSize : e === "tooltipBody" ? r.tooltipBodySize : r.axisFontSize;
+}
+function a(e) {
+	return { fontSize: i(e) };
+}
+function o(e = "axis") {
+	return {
+		fontSize: i(e),
+		fill: t
+	};
+}
+function s(t) {
+	return e[t % e.length] ?? e[0];
+}
+var c = {
+	get tick() {
+		return o("axis");
+	},
+	axisLine: !1,
+	tickLine: !1
+};
+function l(e = !1) {
+	return {
+		hide: e,
+		...c
+	};
+}
+var u = {
+	vertical: !1,
+	stroke: t,
+	strokeOpacity: r.gridOpacity,
+	strokeDasharray: r.gridDash
+}, d = {
+	horizontal: [
+		0,
+		4,
+		4,
+		0
+	],
+	vertical: [
+		4,
+		4,
+		0,
+		0
+	]
+}, f = { isAnimationActive: !1 }, p = {
+	stroke: t,
+	strokeOpacity: .35,
+	strokeWidth: 1
+}, m = {
+	fill: n("foreground", .06),
+	stroke: "none"
+};
+function h() {
+	return {
+		background: "hsl(var(--basalt-popover))",
+		border: "1px solid hsl(var(--basalt-border))",
+		borderRadius: "8px",
+		fontSize: i("tooltipBody"),
+		color: "hsl(var(--basalt-foreground))"
+	};
+}
+function g(e) {
+	return {
+		isAnimationActive: !1,
+		animationDuration: 0,
+		offset: 12,
+		cursor: e?.cursor === !1 ? !1 : e?.cursor === "line" ? p : m,
+		wrapperStyle: {
+			outline: "none",
+			zIndex: 40,
+			pointerEvents: "none"
+		},
+		contentStyle: h(),
+		labelStyle: {
+			fontSize: i("tooltipTitle"),
+			color: "hsl(var(--basalt-foreground))"
+		},
+		itemStyle: a("tooltipBody"),
+		formatter: e?.formatter ? (t) => e.formatter?.(Number(t)) : void 0
+	};
+}
+function _() {
+	return {
+		wrapperStyle: {
+			fontSize: i("legend"),
+			color: t
+		},
+		iconSize: 8
+	};
+}
+var v = {
+	width: "100%",
+	height: "100%",
+	minWidth: 0,
+	minHeight: 0,
+	debounce: 150
+};
+//#endregion
+export { f as ANIMATION_PROPS, c as AXIS_CONFIG, d as BAR_RADIUS, m as CHART_TOOLTIP_CURSOR_BAR, p as CHART_TOOLTIP_CURSOR_LINE, r as CHART_TYPE, u as GRID_PROPS, v as RESPONSIVE_CONTAINER_PROPS, l as cartesianAxisProps, i as chartFontSize, _ as chartLegendProps, a as chartTextStyle, o as chartTickStyle, h as chartTooltipContentStyle, g as chartTooltipProps, s as getChartColor };
+
+//# sourceMappingURL=config.js.map

package/dist/charts/config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.js","names":[],"sources":["../../src/charts/config.ts"],"sourcesContent":["import { CHART_COLORS, chartAxis, withAlpha } from \"./palette\";\n\nexport type ChartTypeFace = \"axis\" | \"legend\" | \"tooltipTitle\" | \"tooltipBody\";\n\nexport const CHART_TYPE = {\n\taxisFontSize: 11,\n\tlegendFontSize: 12,\n\ttooltipTitleSize: 12,\n\ttooltipBodySize: 12,\n\ttooltipDot: 8,\n\tstrokeWidth: 2,\n\tgridDash: \"3 3\",\n\tgridOpacity: 0.15,\n\tareaFillAlpha: 0.2,\n} as const;\n\nexport function chartFontSize(face: ChartTypeFace): number {\n\tif (face === \"legend\") {\n\t\treturn CHART_TYPE.legendFontSize;\n\t}\n\tif (face === \"tooltipTitle\") {\n\t\treturn CHART_TYPE.tooltipTitleSize;\n\t}\n\tif (face === \"tooltipBody\") {\n\t\treturn CHART_TYPE.tooltipBodySize;\n\t}\n\treturn CHART_TYPE.axisFontSize;\n}\n\nexport function chartTextStyle(face: ChartTypeFace): { fontSize: number } {\n\treturn { fontSize: chartFontSize(face) };\n}\n\nexport function chartTickStyle(face: ChartTypeFace = \"axis\"): {\n\tfontSize: number;\n\tfill: string;\n} {\n\treturn { fontSize: chartFontSize(face), fill: chartAxis };\n}\n\nexport function getChartColor(index: number): string {\n\treturn CHART_COLORS[index % CHART_COLORS.length] ?? CHART_COLORS[0];\n}\n\nexport const AXIS_CONFIG = {\n\tget tick() {\n\t\treturn chartTickStyle(\"axis\");\n\t},\n\taxisLine: false as const,\n\ttickLine: false as const,\n};\n\nexport function cartesianAxisProps(hidden = false) {\n\treturn { hide: hidden, ...AXIS_CONFIG };\n}\n\nexport const GRID_PROPS = {\n\tvertical: false as const,\n\tstroke: chartAxis,\n\tstrokeOpacity: CHART_TYPE.gridOpacity,\n\tstrokeDasharray: CHART_TYPE.gridDash,\n};\n\nexport const BAR_RADIUS = {\n\thorizontal: [0, 4, 4, 0] as [number, number, number, number],\n\tvertical: [4, 4, 0, 0] as [number, number, number, number],\n};\n\nexport const ANIMATION_PROPS = {\n\tisAnimationActive: false,\n};\n\nexport const CHART_TOOLTIP_CURSOR_LINE = {\n\tstroke: chartAxis,\n\tstrokeOpacity: 0.35,\n\tstrokeWidth: 1,\n} as const;\n\nexport const CHART_TOOLTIP_CURSOR_BAR = {\n\tfill: withAlpha(\"foreground\", 0.06),\n\tstroke: \"none\",\n} as const;\n\nexport function chartTooltipContentStyle(): {\n\tbackground: string;\n\tborder: string;\n\tborderRadius: string;\n\tfontSize: number;\n\tcolor: string;\n} {\n\treturn {\n\t\tbackground: \"hsl(var(--basalt-popover))\",\n\t\tborder: \"1px solid hsl(var(--basalt-border))\",\n\t\tborderRadius: \"8px\",\n\t\tfontSize: chartFontSize(\"tooltipBody\"),\n\t\tcolor: \"hsl(var(--basalt-foreground))\",\n\t};\n}\n\nexport function chartTooltipProps(options?: {\n\tformatter?: (value: number) => string;\n\tcursor?: \"bar\" | \"line\" | false;\n}) {\n\tconst cursor =\n\t\toptions?.cursor === false\n\t\t\t? false\n\t\t\t: options?.cursor === \"line\"\n\t\t\t\t? CHART_TOOLTIP_CURSOR_LINE\n\t\t\t\t: CHART_TOOLTIP_CURSOR_BAR;\n\treturn {\n\t\tisAnimationActive: false,\n\t\tanimationDuration: 0,\n\t\toffset: 12,\n\t\tcursor,\n\t\twrapperStyle: {\n\t\t\toutline: \"none\",\n\t\t\tzIndex: 40,\n\t\t\tpointerEvents: \"none\" as const,\n\t\t},\n\t\tcontentStyle: chartTooltipContentStyle(),\n\t\tlabelStyle: {\n\t\t\tfontSize: chartFontSize(\"tooltipTitle\"),\n\t\t\tcolor: \"hsl(var(--basalt-foreground))\",\n\t\t},\n\t\titemStyle: chartTextStyle(\"tooltipBody\"),\n\t\tformatter: options?.formatter\n\t\t\t? (value: unknown) => options.formatter?.(Number(value))\n\t\t\t: undefined,\n\t};\n}\n\nexport function chartLegendProps() {\n\treturn {\n\t\twrapperStyle: {\n\t\t\tfontSize: chartFontSize(\"legend\"),\n\t\t\tcolor: chartAxis,\n\t\t},\n\t\ticonSize: 8,\n\t};\n}\n\nexport const RESPONSIVE_CONTAINER_PROPS = {\n\twidth: \"100%\" as const,\n\theight: \"100%\" as const,\n\tminWidth: 0,\n\tminHeight: 0,\n\tdebounce: 150,\n};\n"],"mappings":";;;AAIA,IAAa,IAAa;CACzB,cAAc;CACd,gBAAgB;CAChB,kBAAkB;CAClB,iBAAiB;CACjB,YAAY;CACZ,aAAa;CACb,UAAU;CACV,aAAa;CACb,eAAe;AAChB;AAEA,SAAgB,EAAc,GAA6B;CAU1D,OATI,MAAS,WACL,EAAW,iBAEf,MAAS,iBACL,EAAW,mBAEf,MAAS,gBACL,EAAW,kBAEZ,EAAW;AACnB;AAEA,SAAgB,EAAe,GAA2C;CACzE,OAAO,EAAE,UAAU,EAAc,CAAI,EAAE;AACxC;AAEA,SAAgB,EAAe,IAAsB,QAGnD;CACD,OAAO;EAAE,UAAU,EAAc,CAAI;EAAG,MAAM;CAAU;AACzD;AAEA,SAAgB,EAAc,GAAuB;CACpD,OAAO,EAAa,IAAQ,EAAa,WAAW,EAAa;AAClE;AAEA,IAAa,IAAc;CAC1B,IAAI,OAAO;EACV,OAAO,EAAe,MAAM;CAC7B;CACA,UAAU;CACV,UAAU;AACX;AAEA,SAAgB,EAAmB,IAAS,IAAO;CAClD,OAAO;EAAE,MAAM;EAAQ,GAAG;CAAY;AACvC;AAEA,IAAa,IAAa;CACzB,UAAU;CACV,QAAQ;CACR,eAAe,EAAW;CAC1B,iBAAiB,EAAW;AAC7B,GAEa,IAAa;CACzB,YAAY;EAAC;EAAG;EAAG;EAAG;CAAC;CACvB,UAAU;EAAC;EAAG;EAAG;EAAG;CAAC;AACtB,GAEa,IAAkB,EAC9B,mBAAmB,GACpB,GAEa,IAA4B;CACxC,QAAQ;CACR,eAAe;CACf,aAAa;AACd,GAEa,IAA2B;CACvC,MAAM,EAAU,cAAc,GAAI;CAClC,QAAQ;AACT;AAEA,SAAgB,IAMd;CACD,OAAO;EACN,YAAY;EACZ,QAAQ;EACR,cAAc;EACd,UAAU,EAAc,aAAa;EACrC,OAAO;CACR;AACD;AAEA,SAAgB,EAAkB,GAG/B;CAOF,OAAO;EACN,mBAAmB;EACnB,mBAAmB;EACnB,QAAQ;EACR,QATA,GAAS,WAAW,KACjB,KACA,GAAS,WAAW,SACnB,IACA;EAMJ,cAAc;GACb,SAAS;GACT,QAAQ;GACR,eAAe;EAChB;EACA,cAAc,EAAyB;EACvC,YAAY;GACX,UAAU,EAAc,cAAc;GACtC,OAAO;EACR;EACA,WAAW,EAAe,aAAa;EACvC,WAAW,GAAS,aAChB,MAAmB,EAAQ,YAAY,OAAO,CAAK,CAAC,IACrD,KAAA;CACJ;AACD;AAEA,SAAgB,IAAmB;CAClC,OAAO;EACN,cAAc;GACb,UAAU,EAAc,QAAQ;GAChC,OAAO;EACR;EACA,UAAU;CACX;AACD;AAEA,IAAa,IAA6B;CACzC,OAAO;CACP,QAAQ;CACR,UAAU;CACV,WAAW;CACX,UAAU;AACX"}

package/dist/charts/custom-chart.d.ts

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

package/dist/charts/custom-chart.js

@@ -0,0 +1,15 @@
+"use client";
+import { LineChart as e } from "./line.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/charts/custom-chart.tsx
+function n({ data: n, ariaLabel: r = "Custom chart", className: i }) {
+	return /* @__PURE__ */ t(e, {
+		data: n,
+		ariaLabel: r,
+		className: i
+	});
+}
+//#endregion
+export { n as CustomChart };
+
+//# sourceMappingURL=custom-chart.js.map

package/dist/charts/custom-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-chart.js","names":[],"sources":["../../src/charts/custom-chart.tsx"],"sourcesContent":["import { LineChart } from \"./line\";\nimport type { XYPoint } from \"./sample\";\n\nexport function CustomChart({\n\tdata,\n\tariaLabel = \"Custom chart\",\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,EAAY,EAC3B,SACA,eAAY,gBACZ,gBAKE;CACF,OAAO,kBAAC,GAAD;EAAiB;EAAiB;EAAsB;CAAY,CAAA;AAC5E"}

package/dist/charts/date-navigation.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentProps } from "react";
+import { DatePicker } from "../components/date-picker.js";
+type PickerProps = ComponentProps<typeof DatePicker> & {
+    ariaLabel?: string;
+    selectedDate?: undefined;
+};
+type DisplayProps = {
+    selectedDate: Date;
+    onPrevDay: () => void;
+    onNextDay: () => void;
+    onToday: () => void;
+    onToggleCalendar?: () => void;
+    todayLabel?: string;
+    previousDayLabel?: string;
+    nextDayLabel?: string;
+    formatDate?: (date: Date) => string;
+    locale?: string;
+    timeZone?: string;
+    className?: string;
+};
+export declare function DateNavigation(props: PickerProps | DisplayProps): import("react").JSX.Element;
+export {};