@nocoo/basalt 2.2.0 → 3.1.0

package/dist/charts/config.d.ts

@@ -4,28 +4,28 @@ import { type ChartTooltipItem } from "./tooltip.js";
 export type { ChartSeriesDescriptor } from "./series.js";
 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 axisFontSize: "var(--basalt-text-xs)";
+    readonly legendFontSize: "var(--basalt-text-sm)";
+    readonly tooltipTitleSize: "var(--basalt-text-sm)";
+    readonly tooltipBodySize: "var(--basalt-text-sm)";
     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 chartFontSize(face: ChartTypeFace): string;
 export declare function chartTextStyle(face: ChartTypeFace): {
-    fontSize: number;
+    fontSize: string;
 };
 export declare function chartTickStyle(face?: ChartTypeFace): {
-    fontSize: number;
+    fontSize: string;
     fill: string;
 };
 export declare function getChartColor(index: number): string;
 export declare const AXIS_CONFIG: {
     readonly tick: {
-        fontSize: number;
+        fontSize: string;
         fill: string;
     };
     axisLine: false;
@@ -33,7 +33,7 @@ export declare const AXIS_CONFIG: {
 };
 export declare function cartesianAxisProps(hidden?: boolean): {
     tick: {
-        fontSize: number;
+        fontSize: string;
         fill: string;
     };
     axisLine: false;
@@ -67,7 +67,7 @@ export declare function chartTooltipContentStyle(): {
     border: string;
     borderRadius: string;
     boxShadow: string;
-    fontSize: number;
+    fontSize: string;
     color: string;
     padding: string;
 };
@@ -107,7 +107,7 @@ export declare function chartTooltipProps(options?: {
         border: string;
         borderRadius: string;
         boxShadow: string;
-        fontSize: number;
+        fontSize: string;
         color: string;
         padding: string;
     };

package/dist/charts/config.js

@@ -4,10 +4,10 @@ import { ChartTooltipContent as r } from "./tooltip.js";
 import { createElement as i } from "react";
 //#region src/charts/config.ts
 var a = {
-	axisFontSize: 11,
-	legendFontSize: 12,
-	tooltipTitleSize: 12,
-	tooltipBodySize: 12,
+	axisFontSize: "var(--basalt-text-xs)",
+	legendFontSize: "var(--basalt-text-sm)",
+	tooltipTitleSize: "var(--basalt-text-sm)",
+	tooltipBodySize: "var(--basalt-text-sm)",
 	tooltipDot: 8,
 	strokeWidth: 2,
 	gridDash: "3 3",

package/dist/charts/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":["CHART_TYPE","chartFontSize","face","chartTextStyle","chartTickStyle","chartAxis","getChartColor","CHART_COLORS","index","AXIS_CONFIG","cartesianAxisProps","hidden","GRID_PROPS","BAR_RADIUS","ANIMATION_PROPS","CHART_TOOLTIP_CURSOR_LINE","CHART_TOOLTIP_CURSOR_BAR","withAlpha","chartTooltipContentStyle","chartTooltipProps","options","props","createElement","ChartTooltipContent","seriesColor","series","RESPONSIVE_CONTAINER_PROPS","CHART_PLOT_MARGIN","CHART_PLOT_MARGIN_BARE"],"sources":["../../src/charts/config.ts"],"sourcesContent":["import { createElement, type ReactNode } from \"react\";\nimport { CHART_COLORS, chartAxis, withAlpha } from \"./palette\";\nimport type { ChartSeriesDescriptor } from \"./series\";\nimport { ChartTooltipContent, type ChartTooltipItem } from \"./tooltip\";\n\nexport type { ChartSeriesDescriptor } from \"./series\";\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\tboxShadow: string;\n\tfontSize: number;\n\tcolor: string;\n\tpadding: string;\n} {\n\treturn {\n\t\tbackground: \"transparent\",\n\t\tborder: \"none\",\n\t\tborderRadius: \"0\",\n\t\tboxShadow: \"none\",\n\t\tfontSize: chartFontSize(\"tooltipBody\"),\n\t\tcolor: \"hsl(var(--basalt-foreground))\",\n\t\tpadding: \"0\",\n\t};\n}\n\nexport function chartTooltipProps(options?: {\n\tformatter?: (value: number) => string;\n\tcursor?: \"bar\" | \"line\" | false;\n\tcustomTooltip?: (props: {\n\t\tactive?: boolean;\n\t\tpayload?: readonly ChartTooltipItem[];\n\t\tlabel?: string | number;\n\t}) => ReactNode;\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\tallowEscapeViewBox: { x: false, y: false },\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\ttransition: \"none\",\n\t\t\tanimation: \"none\",\n\t\t},\n\t\tcontentStyle: chartTooltipContentStyle(),\n\t\tcontent: ((props: {\n\t\t\tactive?: boolean;\n\t\t\tpayload?: readonly ChartTooltipItem[];\n\t\t\tlabel?: unknown;\n\t\t}) => {\n\t\t\tif (options?.customTooltip) {\n\t\t\t\treturn options.customTooltip({\n\t\t\t\t\tactive: props.active,\n\t\t\t\t\tpayload: props.payload,\n\t\t\t\t\tlabel: props.label as string | number | undefined,\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn createElement(ChartTooltipContent, {\n\t\t\t\tactive: props.active,\n\t\t\t\tpayload: props.payload,\n\t\t\t\tlabel: props.label as string | number | undefined,\n\t\t\t\tformatter: options?.formatter,\n\t\t\t});\n\t\t}) as never,\n\t};\n}\n\nexport function seriesColor(\n\tseries: ChartSeriesDescriptor | undefined,\n\tindex: number,\n): string | undefined {\n\treturn series?.color ?? CHART_COLORS[index % CHART_COLORS.length];\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\nexport const CHART_PLOT_MARGIN = {\n\ttop: 4,\n\tright: 4,\n\tbottom: 0,\n\tleft: 0,\n} as const;\n\nexport const CHART_PLOT_MARGIN_BARE = {\n\ttop: 2,\n\tright: 2,\n\tbottom: 2,\n\tleft: 2,\n} as const;\n"],"mappings":";;;;;AASA,IAAaA,IAAa;CACzB,cAAc;CACd,gBAAgB;CAChB,kBAAkB;CAClB,iBAAiB;CACjB,YAAY;CACZ,aAAa;CACb,UAAU;CACV,aAAa;CACb,eAAe;AAChB;AAEA,SAAgBC,EAAc,GAA6B;CAU1D,OATIC,MAAS,WACLF,EAAW,iBAEfE,MAAS,iBACLF,EAAW,mBAEfE,MAAS,gBACLF,EAAW,kBAEZA,EAAW;AACnB;AAEA,SAAgBG,EAAe,GAA2C;CACzE,OAAO,EAAE,UAAUF,EAAcC,CAAI,EAAE;AACxC;AAEA,SAAgBE,EAAe,IAAsB,QAGnD;CACD,OAAO;EAAE,UAAUH,EAAcC,CAAI;EAAG,MAAMG;CAAU;AACzD;AAEA,SAAgBC,EAAc,GAAuB;CACpD,OAAOC,EAAaC,IAAQD,EAAa,WAAWA,EAAa;AAClE;AAEA,IAAaE,IAAc;CAC1B,IAAI,OAAO;EACV,OAAOL,EAAe,MAAM;CAC7B;CACA,UAAU;CACV,UAAU;AACX;AAEA,SAAgBM,EAAmB,IAAS,IAAO;CAClD,OAAO;EAAE,MAAMC;EAAQ,GAAGF;CAAY;AACvC;AAEA,IAAaG,IAAa;CACzB,UAAU;CACV,QAAQP;CACR,eAAeL,EAAW;CAC1B,iBAAiBA,EAAW;AAC7B,GAEaa,IAAa;CACzB,YAAY;EAAC;EAAG;EAAG;EAAG;CAAC;CACvB,UAAU;EAAC;EAAG;EAAG;EAAG;CAAC;AACtB,GAEaC,IAAkB,EAC9B,mBAAmB,GACpB,GAEaC,IAA4B;CACxC,QAAQV;CACR,eAAe;CACf,aAAa;AACd,GAEaW,IAA2B;CACvC,MAAMC,EAAU,cAAc,GAAI;CAClC,QAAQ;AACT;AAEA,SAAgBC,IAQd;CACD,OAAO;EACN,YAAY;EACZ,QAAQ;EACR,cAAc;EACd,WAAW;EACX,UAAUjB,EAAc,aAAa;EACrC,OAAO;EACP,SAAS;CACV;AACD;AAEA,SAAgBkB,EAAkB,GAQ/B;CAOF,OAAO;EACN,mBAAmB;EACnB,mBAAmB;EACnB,QAAQ;EACR,oBAAoB;GAAE,GAAG;GAAO,GAAG;EAAM;EACzC,QAVAC,GAAS,WAAW,KACjB,KACAA,GAAS,WAAW,SACnBL,IACAC;EAOJ,cAAc;GACb,SAAS;GACT,QAAQ;GACR,eAAe;GACf,YAAY;GACZ,WAAW;EACZ;EACA,cAAcE,EAAyB;EACvC,WAAW,MAKNE,GAAS,gBACLA,EAAQ,cAAc;GAC5B,QAAQC,EAAM;GACd,SAASA,EAAM;GACf,OAAOA,EAAM;EACd,CAAC,IAEKC,EAAcC,GAAqB;GACzC,QAAQF,EAAM;GACd,SAASA,EAAM;GACf,OAAOA,EAAM;GACb,WAAWD,GAAS;EACrB,CAAC;CAEH;AACD;AAEA,SAAgBI,EACf,GACA,GACqB;CACrB,OAAOC,GAAQ,SAASlB,EAAaC,IAAQD,EAAa;AAC3D;AAEA,IAAamB,IAA6B;CACzC,OAAO;CACP,QAAQ;CACR,UAAU;CACV,WAAW;CACX,UAAU;AACX,GAEaC,IAAoB;CAChC,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;AACP,GAEaC,IAAyB;CACrC,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;AACP"}
+{"version":3,"file":"config.js","names":["CHART_TYPE","chartFontSize","face","chartTextStyle","chartTickStyle","chartAxis","getChartColor","CHART_COLORS","index","AXIS_CONFIG","cartesianAxisProps","hidden","GRID_PROPS","BAR_RADIUS","ANIMATION_PROPS","CHART_TOOLTIP_CURSOR_LINE","CHART_TOOLTIP_CURSOR_BAR","withAlpha","chartTooltipContentStyle","chartTooltipProps","options","props","createElement","ChartTooltipContent","seriesColor","series","RESPONSIVE_CONTAINER_PROPS","CHART_PLOT_MARGIN","CHART_PLOT_MARGIN_BARE"],"sources":["../../src/charts/config.ts"],"sourcesContent":["import { createElement, type ReactNode } from \"react\";\nimport { CHART_COLORS, chartAxis, withAlpha } from \"./palette\";\nimport type { ChartSeriesDescriptor } from \"./series\";\nimport { ChartTooltipContent, type ChartTooltipItem } from \"./tooltip\";\n\nexport type { ChartSeriesDescriptor } from \"./series\";\n\nexport type ChartTypeFace = \"axis\" | \"legend\" | \"tooltipTitle\" | \"tooltipBody\";\n\nexport const CHART_TYPE = {\n\taxisFontSize: \"var(--basalt-text-xs)\",\n\tlegendFontSize: \"var(--basalt-text-sm)\",\n\ttooltipTitleSize: \"var(--basalt-text-sm)\",\n\ttooltipBodySize: \"var(--basalt-text-sm)\",\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): string {\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: string } {\n\treturn { fontSize: chartFontSize(face) };\n}\n\nexport function chartTickStyle(face: ChartTypeFace = \"axis\"): {\n\tfontSize: string;\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\tboxShadow: string;\n\tfontSize: string;\n\tcolor: string;\n\tpadding: string;\n} {\n\treturn {\n\t\tbackground: \"transparent\",\n\t\tborder: \"none\",\n\t\tborderRadius: \"0\",\n\t\tboxShadow: \"none\",\n\t\tfontSize: chartFontSize(\"tooltipBody\"),\n\t\tcolor: \"hsl(var(--basalt-foreground))\",\n\t\tpadding: \"0\",\n\t};\n}\n\nexport function chartTooltipProps(options?: {\n\tformatter?: (value: number) => string;\n\tcursor?: \"bar\" | \"line\" | false;\n\tcustomTooltip?: (props: {\n\t\tactive?: boolean;\n\t\tpayload?: readonly ChartTooltipItem[];\n\t\tlabel?: string | number;\n\t}) => ReactNode;\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\tallowEscapeViewBox: { x: false, y: false },\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\ttransition: \"none\",\n\t\t\tanimation: \"none\",\n\t\t},\n\t\tcontentStyle: chartTooltipContentStyle(),\n\t\tcontent: ((props: {\n\t\t\tactive?: boolean;\n\t\t\tpayload?: readonly ChartTooltipItem[];\n\t\t\tlabel?: unknown;\n\t\t}) => {\n\t\t\tif (options?.customTooltip) {\n\t\t\t\treturn options.customTooltip({\n\t\t\t\t\tactive: props.active,\n\t\t\t\t\tpayload: props.payload,\n\t\t\t\t\tlabel: props.label as string | number | undefined,\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn createElement(ChartTooltipContent, {\n\t\t\t\tactive: props.active,\n\t\t\t\tpayload: props.payload,\n\t\t\t\tlabel: props.label as string | number | undefined,\n\t\t\t\tformatter: options?.formatter,\n\t\t\t});\n\t\t}) as never,\n\t};\n}\n\nexport function seriesColor(\n\tseries: ChartSeriesDescriptor | undefined,\n\tindex: number,\n): string | undefined {\n\treturn series?.color ?? CHART_COLORS[index % CHART_COLORS.length];\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\nexport const CHART_PLOT_MARGIN = {\n\ttop: 4,\n\tright: 4,\n\tbottom: 0,\n\tleft: 0,\n} as const;\n\nexport const CHART_PLOT_MARGIN_BARE = {\n\ttop: 2,\n\tright: 2,\n\tbottom: 2,\n\tleft: 2,\n} as const;\n"],"mappings":";;;;;AASA,IAAaA,IAAa;CACzB,cAAc;CACd,gBAAgB;CAChB,kBAAkB;CAClB,iBAAiB;CACjB,YAAY;CACZ,aAAa;CACb,UAAU;CACV,aAAa;CACb,eAAe;AAChB;AAEA,SAAgBC,EAAc,GAA6B;CAU1D,OATIC,MAAS,WACLF,EAAW,iBAEfE,MAAS,iBACLF,EAAW,mBAEfE,MAAS,gBACLF,EAAW,kBAEZA,EAAW;AACnB;AAEA,SAAgBG,EAAe,GAA2C;CACzE,OAAO,EAAE,UAAUF,EAAcC,CAAI,EAAE;AACxC;AAEA,SAAgBE,EAAe,IAAsB,QAGnD;CACD,OAAO;EAAE,UAAUH,EAAcC,CAAI;EAAG,MAAMG;CAAU;AACzD;AAEA,SAAgBC,EAAc,GAAuB;CACpD,OAAOC,EAAaC,IAAQD,EAAa,WAAWA,EAAa;AAClE;AAEA,IAAaE,IAAc;CAC1B,IAAI,OAAO;EACV,OAAOL,EAAe,MAAM;CAC7B;CACA,UAAU;CACV,UAAU;AACX;AAEA,SAAgBM,EAAmB,IAAS,IAAO;CAClD,OAAO;EAAE,MAAMC;EAAQ,GAAGF;CAAY;AACvC;AAEA,IAAaG,IAAa;CACzB,UAAU;CACV,QAAQP;CACR,eAAeL,EAAW;CAC1B,iBAAiBA,EAAW;AAC7B,GAEaa,IAAa;CACzB,YAAY;EAAC;EAAG;EAAG;EAAG;CAAC;CACvB,UAAU;EAAC;EAAG;EAAG;EAAG;CAAC;AACtB,GAEaC,IAAkB,EAC9B,mBAAmB,GACpB,GAEaC,IAA4B;CACxC,QAAQV;CACR,eAAe;CACf,aAAa;AACd,GAEaW,IAA2B;CACvC,MAAMC,EAAU,cAAc,GAAI;CAClC,QAAQ;AACT;AAEA,SAAgBC,IAQd;CACD,OAAO;EACN,YAAY;EACZ,QAAQ;EACR,cAAc;EACd,WAAW;EACX,UAAUjB,EAAc,aAAa;EACrC,OAAO;EACP,SAAS;CACV;AACD;AAEA,SAAgBkB,EAAkB,GAQ/B;CAOF,OAAO;EACN,mBAAmB;EACnB,mBAAmB;EACnB,QAAQ;EACR,oBAAoB;GAAE,GAAG;GAAO,GAAG;EAAM;EACzC,QAVAC,GAAS,WAAW,KACjB,KACAA,GAAS,WAAW,SACnBL,IACAC;EAOJ,cAAc;GACb,SAAS;GACT,QAAQ;GACR,eAAe;GACf,YAAY;GACZ,WAAW;EACZ;EACA,cAAcE,EAAyB;EACvC,WAAW,MAKNE,GAAS,gBACLA,EAAQ,cAAc;GAC5B,QAAQC,EAAM;GACd,SAASA,EAAM;GACf,OAAOA,EAAM;EACd,CAAC,IAEKC,EAAcC,GAAqB;GACzC,QAAQF,EAAM;GACd,SAASA,EAAM;GACf,OAAOA,EAAM;GACb,WAAWD,GAAS;EACrB,CAAC;CAEH;AACD;AAEA,SAAgBI,EACf,GACA,GACqB;CACrB,OAAOC,GAAQ,SAASlB,EAAaC,IAAQD,EAAa;AAC3D;AAEA,IAAamB,IAA6B;CACzC,OAAO;CACP,QAAQ;CACR,UAAU;CACV,WAAW;CACX,UAAU;AACX,GAEaC,IAAoB;CAChC,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;AACP,GAEaC,IAAyB;CACrC,KAAK;CACL,OAAO;CACP,QAAQ;CACR,MAAM;AACP"}

package/dist/charts/date-navigation.js

@@ -35,7 +35,7 @@ function p({ value: e, defaultValue: i = "", onChange: u, disabled: d, ariaLabel
 		e === void 0 && g(t), u?.(t);
 	}
 	return /* @__PURE__ */ c("div", {
-		className: "inline-flex items-center gap-1",
+		className: "inline-flex items-center gap-basalt-space-sm",
 		children: [
 			/* @__PURE__ */ s(t, {
 				variant: "outline",
@@ -72,44 +72,44 @@ function m({ selectedDate: t, onPrevDay: n, onNextDay: r, onToday: l, onToggleCa
 		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),
+		className: e("flex items-center justify-center gap-basalt-space-lg", 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"),
+				className: e("mr-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-md text-basalt-base font-medium transition-colors basalt-motion", x ? "cursor-not-allowed text-basalt-muted-foreground opacity-50" : "bg-basalt-secondary text-basalt-foreground hover:bg-basalt-hover"),
 				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",
+				className: "flex h-basalt-8 w-basalt-8 items-center justify-center rounded-basalt-md text-basalt-muted-foreground transition-colors basalt-motion hover:bg-basalt-hover hover:text-basalt-foreground",
 				children: /* @__PURE__ */ s(a, {
-					className: "h-4 w-4",
+					className: "h-basalt-4 w-basalt-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",
+				className: "flex cursor-pointer items-center gap-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-md text-basalt-xl font-medium transition-colors basalt-motion hover:bg-basalt-hover",
 				children: [/* @__PURE__ */ s("span", { children: S }), /* @__PURE__ */ s(i, {
-					className: "h-4 w-4 text-basalt-muted-foreground",
+					className: "h-basalt-4 w-basalt-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",
+				className: "flex items-center gap-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-md text-basalt-xl 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",
+				className: "flex h-basalt-8 w-basalt-8 items-center justify-center rounded-basalt-md text-basalt-muted-foreground transition-colors basalt-motion hover:bg-basalt-hover hover:text-basalt-foreground",
 				children: /* @__PURE__ */ s(o, {
-					className: "h-4 w-4",
+					className: "h-basalt-4 w-basalt-4",
 					strokeWidth: 1.5
 				})
 			})

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

@@ -1 +1 @@
-{"version":3,"file":"date-navigation.js","names":["CalendarIcon","shiftIso","match","value","date","delta","civilInZone","parts","read","part","type","isSameCivil","left","right","DateNavigation","props","DateNavigationDisplay","DateNavigationPicker","ariaLabelAttr","uncontrolled","setUncontrolled","useState","defaultValue","selected","commit","next","onChange","Button","ChevronLeft","DatePicker","ariaLabel","ChevronRight","resolvedFormatDate","formatDate","locale","isToday","selectedDate","timeZone","formatted","cn","className","onToday","todayLabel","onPrevDay","previousDayLabel","onToggleCalendar","Calendar","onNextDay","nextDayLabel"],"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 type DateNavigationPickerProps = {\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport type DateNavigationDisplayProps = DisplayProps;\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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"}
+{"version":3,"file":"date-navigation.js","names":["CalendarIcon","shiftIso","match","value","date","delta","civilInZone","parts","read","part","type","isSameCivil","left","right","DateNavigation","props","DateNavigationDisplay","DateNavigationPicker","ariaLabelAttr","uncontrolled","setUncontrolled","useState","defaultValue","selected","commit","next","onChange","Button","ChevronLeft","DatePicker","ariaLabel","ChevronRight","resolvedFormatDate","formatDate","locale","isToday","selectedDate","timeZone","formatted","cn","className","onToday","todayLabel","onPrevDay","previousDayLabel","onToggleCalendar","Calendar","onNextDay","nextDayLabel"],"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 type DateNavigationPickerProps = {\n\tariaLabel?: string;\n\tclassName?: string;\n};\n\nexport type DateNavigationDisplayProps = DisplayProps;\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-basalt-space-sm\">\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-basalt-space-lg\", 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-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-md text-basalt-base font-medium transition-colors basalt-motion\",\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-hover\",\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-basalt-8 w-basalt-8 items-center justify-center rounded-basalt-md text-basalt-muted-foreground transition-colors basalt-motion hover:bg-basalt-hover hover:text-basalt-foreground\"\n\t\t\t>\n\t\t\t\t<ChevronLeft className=\"h-basalt-4 w-basalt-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-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-md text-basalt-xl font-medium transition-colors basalt-motion hover:bg-basalt-hover\"\n\t\t\t\t>\n\t\t\t\t\t<span>{formatted}</span>\n\t\t\t\t\t<CalendarIcon\n\t\t\t\t\t\tclassName=\"h-basalt-4 w-basalt-4 text-basalt-muted-foreground\"\n\t\t\t\t\t\tstrokeWidth={1.5}\n\t\t\t\t\t/>\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span className=\"flex items-center gap-basalt-space-lg rounded-basalt-md px-basalt-space-lg py-basalt-space-md text-basalt-xl 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-basalt-8 w-basalt-8 items-center justify-center rounded-basalt-md text-basalt-muted-foreground transition-colors basalt-motion hover:bg-basalt-hover hover:text-basalt-foreground\"\n\t\t\t>\n\t\t\t\t<ChevronRight className=\"h-basalt-4 w-basalt-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.js

@@ -17,7 +17,7 @@ function d({ data: d, series: f, ariaLabel: p = "Donut chart", className: m, sho
 	return /* @__PURE__ */ a(r, {
 		ariaLabel: p,
 		className: m,
-		size: "h-36 w-36",
+		size: "h-basalt-36 w-basalt-36",
 		legend: h ? /* @__PURE__ */ a(i, {
 			items: b,
 			shape: "bar"

package/dist/charts/donut.js.map

@@ -1 +1 @@
-{"version":3,"file":"donut.js","names":["DonutChart","legendItems","data","item","series","candidate","entry","index","seriesColor","ChartShell","showLegend","ChartLegend","PieChart","Pie","ANIMATION_PROPS","Cell","Tooltip","chartTooltipProps","valueFormatter"],"sources":["../../src/charts/donut.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Cell, Pie, PieChart, Tooltip } from \"recharts\";\nimport { ANIMATION_PROPS, chartTooltipProps, seriesColor } from \"./config\";\nimport { ChartShell } from \"./frame\";\nimport { ChartLegend } from \"./legend\";\nimport type { ChartSeriesDescriptor, NamedValue } from \"./series\";\n\nexport type DonutChartProps = {\n\tdata: NamedValue[];\n\tseries?: ChartSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowLegend?: boolean;\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport function DonutChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Donut chart\",\n\tclassName,\n\tshowLegend = false,\n\tvalueFormatter,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: DonutChartProps) {\n\tconst legendItems = data.map((entry, index) => {\n\t\tconst item = series?.find((candidate) => candidate.key === entry.name);\n\t\treturn {\n\t\t\tkey: `${entry.name}-${index}`,\n\t\t\tlabel: item?.label ?? entry.name,\n\t\t\tcolor: seriesColor(item, index),\n\t\t};\n\t});\n\treturn (\n\t\t<ChartShell\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tsize=\"h-36 w-36\"\n\t\t\tlegend={showLegend ? <ChartLegend items={legendItems} shape=\"bar\" /> : undefined}\n\t\t\tsummary={summary}\n\t\t\tdataAlternative={dataAlternative}\n\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t>\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\tconst item = series?.find((candidate) => candidate.key === entry.name);\n\t\t\t\t\t\treturn <Cell key={`${entry.name}-${index}`} fill={seriesColor(item, index)} />;\n\t\t\t\t\t})}\n\t\t\t\t</Pie>\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: false })} />\n\t\t\t</PieChart>\n\t\t</ChartShell>\n\t);\n}\n"],"mappings":";;;;;;;AAgCA,SAAgBA,EAAW,EAC1B,SACA,WACA,eAAY,eACZ,cACA,gBAAa,IACb,mBACA,YACA,oBACA,yBACmB;CACnB,IAAMC,IAAcC,EAAK,KAAK,GAAO,MAAU;EAC9C,IAAMC,IAAOC,GAAQ,MAAM,MAAcC,EAAU,QAAQC,EAAM,IAAI;EACrE,OAAO;GACN,KAAK,GAAGA,EAAM,KAAK,GAAGC;GACtB,OAAOJ,GAAM,SAASG,EAAM;GAC5B,OAAOE,EAAYL,GAAMI,CAAK;EAC/B;CACD,CAAC;CACD,OACC,kBAACE,GAAD;EACY;EACA;EACX,MAAK;EACL,QAAQC,IAAa,kBAACC,GAAD;GAAa,OAAOV;GAAa,OAAM;EAAO,CAAA,IAAI,KAAA;EAC9D;EACQ;EACG;EAEpB,UAAA,kBAACW,GAAD,EAAA,UAAA,CACC,kBAACC,GAAD;GACO;GACN,SAAQ;GACR,SAAQ;GACR,aAAa;GACb,aAAa;GACb,QAAO;GACP,GAAIC;GAEH,UAAAZ,EAAK,KAAK,GAAO,MAAU;IAC3B,IAAMC,IAAOC,GAAQ,MAAM,MAAcC,EAAU,QAAQC,EAAM,IAAI;IACrE,OAAO,kBAACS,GAAD,EAAqC,MAAMP,EAAYL,GAAMI,CAAK,EAAI,GAA3D,GAAGD,EAAM,KAAK,GAAGC,GAA0C;GAC9E,CAAC;EACG,CAAA,GACL,kBAACS,GAAD,EAAS,GAAIC,EAAkB;GAAE,WAAWC;GAAgB,QAAQ;EAAM,CAAC,EAAI,CAAA,CACtE,EAAA,CAAA;CACC,CAAA;AAEd"}
+{"version":3,"file":"donut.js","names":["DonutChart","legendItems","data","item","series","candidate","entry","index","seriesColor","ChartShell","showLegend","ChartLegend","PieChart","Pie","ANIMATION_PROPS","Cell","Tooltip","chartTooltipProps","valueFormatter"],"sources":["../../src/charts/donut.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Cell, Pie, PieChart, Tooltip } from \"recharts\";\nimport { ANIMATION_PROPS, chartTooltipProps, seriesColor } from \"./config\";\nimport { ChartShell } from \"./frame\";\nimport { ChartLegend } from \"./legend\";\nimport type { ChartSeriesDescriptor, NamedValue } from \"./series\";\n\nexport type DonutChartProps = {\n\tdata: NamedValue[];\n\tseries?: ChartSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n\tshowLegend?: boolean;\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport function DonutChart({\n\tdata,\n\tseries,\n\tariaLabel = \"Donut chart\",\n\tclassName,\n\tshowLegend = false,\n\tvalueFormatter,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: DonutChartProps) {\n\tconst legendItems = data.map((entry, index) => {\n\t\tconst item = series?.find((candidate) => candidate.key === entry.name);\n\t\treturn {\n\t\t\tkey: `${entry.name}-${index}`,\n\t\t\tlabel: item?.label ?? entry.name,\n\t\t\tcolor: seriesColor(item, index),\n\t\t};\n\t});\n\treturn (\n\t\t<ChartShell\n\t\t\tariaLabel={ariaLabel}\n\t\t\tclassName={className}\n\t\t\tsize=\"h-basalt-36 w-basalt-36\"\n\t\t\tlegend={showLegend ? <ChartLegend items={legendItems} shape=\"bar\" /> : undefined}\n\t\t\tsummary={summary}\n\t\t\tdataAlternative={dataAlternative}\n\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t>\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\tconst item = series?.find((candidate) => candidate.key === entry.name);\n\t\t\t\t\t\treturn <Cell key={`${entry.name}-${index}`} fill={seriesColor(item, index)} />;\n\t\t\t\t\t})}\n\t\t\t\t</Pie>\n\t\t\t\t<Tooltip {...chartTooltipProps({ formatter: valueFormatter, cursor: false })} />\n\t\t\t</PieChart>\n\t\t</ChartShell>\n\t);\n}\n"],"mappings":";;;;;;;AAgCA,SAAgBA,EAAW,EAC1B,SACA,WACA,eAAY,eACZ,cACA,gBAAa,IACb,mBACA,YACA,oBACA,yBACmB;CACnB,IAAMC,IAAcC,EAAK,KAAK,GAAO,MAAU;EAC9C,IAAMC,IAAOC,GAAQ,MAAM,MAAcC,EAAU,QAAQC,EAAM,IAAI;EACrE,OAAO;GACN,KAAK,GAAGA,EAAM,KAAK,GAAGC;GACtB,OAAOJ,GAAM,SAASG,EAAM;GAC5B,OAAOE,EAAYL,GAAMI,CAAK;EAC/B;CACD,CAAC;CACD,OACC,kBAACE,GAAD;EACY;EACA;EACX,MAAK;EACL,QAAQC,IAAa,kBAACC,GAAD;GAAa,OAAOV;GAAa,OAAM;EAAO,CAAA,IAAI,KAAA;EAC9D;EACQ;EACG;EAEpB,UAAA,kBAACW,GAAD,EAAA,UAAA,CACC,kBAACC,GAAD;GACO;GACN,SAAQ;GACR,SAAQ;GACR,aAAa;GACb,aAAa;GACb,QAAO;GACP,GAAIC;GAEH,UAAAZ,EAAK,KAAK,GAAO,MAAU;IAC3B,IAAMC,IAAOC,GAAQ,MAAM,MAAcC,EAAU,QAAQC,EAAM,IAAI;IACrE,OAAO,kBAACS,GAAD,EAAqC,MAAMP,EAAYL,GAAMI,CAAK,EAAI,GAA3D,GAAGD,EAAM,KAAK,GAAGC,GAA0C;GAC9E,CAAC;EACG,CAAA,GACL,kBAACS,GAAD,EAAS,GAAIC,EAAkB;GAAE,WAAWC;GAAgB,QAAQ;EAAM,CAAC,EAAI,CAAA,CACtE,EAAA,CAAA;CACC,CAAA;AAEd"}

package/dist/charts/frame.d.ts

@@ -19,7 +19,7 @@ export type ChartFrameProps = {
     }>;
     /**
      * Tailwind size classes for the chart container.
-     * @default "h-36 w-56"
+     * @default "h-basalt-36 w-basalt-56"
      */
     size?: string;
     /**

package/dist/charts/frame.js

@@ -8,7 +8,7 @@ import { ResponsiveContainer as o } from "recharts";
 function s(e) {
 	return e != null && e !== !1;
 }
-function c({ ariaLabel: c, className: l, children: u, size: d = "h-36 w-56", legend: f, summary: p, dataAlternative: m, accessibilityLayer: h = !0 }) {
+function c({ ariaLabel: c, className: l, children: u, size: d = "h-basalt-36 w-basalt-56", legend: f, summary: p, dataAlternative: m, accessibilityLayer: h = !0 }) {
 	let g = r(), _ = s(p), v = s(m), y = u?.props ?? {}, b = y.accessibilityLayer, x = n(u, {
 		accessibilityLayer: b === void 0 ? h : b,
 		"aria-label": y["aria-label"] ?? c,
@@ -45,16 +45,16 @@ function c({ ariaLabel: c, className: l, children: u, size: d = "h-36 w-56", leg
 		role: "group",
 		"aria-label": c,
 		"aria-describedby": _ ? g : void 0,
-		className: "m-0 flex flex-col gap-2 p-0 min-h-0 min-w-0",
+		className: "relative m-0 flex flex-col gap-basalt-space-lg p-0 min-h-0 min-w-0",
 		children: [
 			_ ? /* @__PURE__ */ i("div", {
 				id: g,
-				className: "text-xs text-basalt-muted-foreground",
+				className: "text-basalt-sm text-basalt-muted-foreground",
 				children: p
 			}) : null,
 			S,
 			v ? /* @__PURE__ */ i("div", {
-				className: "text-xs text-basalt-muted-foreground",
+				className: "text-basalt-sm text-basalt-muted-foreground",
 				children: m
 			}) : null
 		]

package/dist/charts/frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"frame.js","names":["hasSlotContent","slot","ChartContainer","summaryId","useId","hasSummary","summary","hasAlternative","dataAlternative","childProps","children","childLayer","clonedChild","cloneElement","accessibilityLayer","ariaLabel","plotContainer","legend","cn","size","className","ResponsiveContainer","RESPONSIVE_CONTAINER_PROPS","ChartFrame","props","ChartShell"],"sources":["../../src/charts/frame.tsx"],"sourcesContent":["import { cloneElement, type ReactElement, type ReactNode, useId } from \"react\";\nimport { ResponsiveContainer } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { RESPONSIVE_CONTAINER_PROPS } from \"./config\";\n\nexport type ChartFrameProps = {\n\t/**\n\t * Accessible label describing the purpose or dataset of the chart.\n\t */\n\tariaLabel: string;\n\t/**\n\t * Additional CSS class names for styling the chart container.\n\t */\n\tclassName?: string;\n\t/**\n\t * Single child Recharts element to render inside the responsive container.\n\t * Explicit child accessibilityLayer prop takes precedence over wrapper prop, which defaults to true.\n\t */\n\tchildren: ReactElement<{\n\t\taccessibilityLayer?: boolean;\n\t\t\"aria-label\"?: string;\n\t\t\"aria-describedby\"?: string;\n\t}>;\n\t/**\n\t * Tailwind size classes for the chart container.\n\t * @default \"h-36 w-56\"\n\t */\n\tsize?: string;\n\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport type ChartShellProps = ChartFrameProps & {\n\t/**\n\t * Optional legend node rendered alongside the chart plot.\n\t */\n\tlegend?: ReactNode;\n};\n\nexport type ChartAccessibilityProps = Pick<\n\tChartFrameProps,\n\t\"summary\" | \"dataAlternative\" | \"accessibilityLayer\"\n>;\n\nfunction hasSlotContent(slot: ReactNode | undefined): boolean {\n\treturn slot !== undefined && slot !== null && slot !== false;\n}\n\nfunction ChartContainer({\n\tariaLabel,\n\tclassName,\n\tchildren,\n\tsize = \"h-36 w-56\",\n\tlegend,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer = true,\n}: ChartShellProps) {\n\tconst summaryId = useId();\n\tconst hasSummary = hasSlotContent(summary);\n\tconst hasAlternative = hasSlotContent(dataAlternative);\n\n\tconst childProps = (children?.props ?? {}) as {\n\t\taccessibilityLayer?: boolean;\n\t\t\"aria-label\"?: string;\n\t\t\"aria-describedby\"?: string;\n\t};\n\tconst childLayer = childProps.accessibilityLayer;\n\tconst resolvedLayer = childLayer !== undefined ? childLayer : accessibilityLayer;\n\n\tconst clonedChild = cloneElement(children, {\n\t\taccessibilityLayer: resolvedLayer,\n\t\t\"aria-label\": childProps[\"aria-label\"] ?? ariaLabel,\n\t\t\"aria-describedby\": childProps[\"aria-describedby\"] ?? (hasSummary ? summaryId : undefined),\n\t});\n\n\tlet plotContainer: ReactNode;\n\tif (hasSlotContent(legend)) {\n\t\tplotContainer = (\n\t\t\t<div\n\t\t\t\tdata-testid=\"chart-shell\"\n\t\t\t\tclassName={cn(size, className)}\n\t\t\t\tstyle={{ display: \"flex\", flexDirection: \"column\", minHeight: 0, minWidth: 0 }}\n\t\t\t>\n\t\t\t\t<div className=\"min-h-0 w-full flex-1 basalt-chart [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-basalt-ring\">\n\t\t\t\t\t<ResponsiveContainer {...RESPONSIVE_CONTAINER_PROPS}>{clonedChild}</ResponsiveContainer>\n\t\t\t\t</div>\n\t\t\t\t{legend}\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tplotContainer = (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\tsize,\n\t\t\t\t\t\"min-h-0 min-w-0 basalt-chart [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-basalt-ring\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<ResponsiveContainer {...RESPONSIVE_CONTAINER_PROPS}>{clonedChild}</ResponsiveContainer>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (!hasSummary && !hasAlternative) {\n\t\treturn (\n\t\t\t<figure role=\"group\" aria-label={ariaLabel} className=\"contents m-0 p-0\">\n\t\t\t\t{plotContainer}\n\t\t\t</figure>\n\t\t);\n\t}\n\n\treturn (\n\t\t<figure\n\t\t\trole=\"group\"\n\t\t\taria-label={ariaLabel}\n\t\t\taria-describedby={hasSummary ? summaryId : undefined}\n\t\t\tclassName=\"m-0 flex flex-col gap-2 p-0 min-h-0 min-w-0\"\n\t\t>\n\t\t\t{hasSummary ? (\n\t\t\t\t<div id={summaryId} className=\"text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t{summary}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t{plotContainer}\n\t\t\t{hasAlternative ? (\n\t\t\t\t<div className=\"text-xs text-basalt-muted-foreground\">{dataAlternative}</div>\n\t\t\t) : null}\n\t\t</figure>\n\t);\n}\n\nexport function ChartFrame(props: ChartFrameProps) {\n\treturn <ChartContainer {...props} />;\n}\n\nexport function ChartShell(props: ChartShellProps) {\n\treturn <ChartContainer {...props} />;\n}\n"],"mappings":";;;;;;;AA0DA,SAASA,EAAe,GAAsC;CAC7D,OAAOC,KAA+B,QAAQA,MAAS;AACxD;AAEA,SAASC,EAAe,EACvB,cACA,cACA,aACA,UAAO,aACP,WACA,YACA,oBACA,wBAAqB,MACF;CACnB,IAAMC,IAAYC,EAAM,GAClBC,IAAaL,EAAeM,CAAO,GACnCC,IAAiBP,EAAeQ,CAAe,GAE/CC,IAAcC,GAAU,SAAS,CAAC,GAKlCC,IAAaF,EAAW,oBAGxBG,IAAcC,EAAaH,GAAU;EAC1C,oBAHqBC,MAAe,KAAA,IAAyBG,IAAbH;EAIhD,cAAcF,EAAW,iBAAiBM;EAC1C,oBAAoBN,EAAW,wBAAwBJ,IAAaF,IAAY,KAAA;CACjF,CAAC,GAEGa;CAoCJ,OAnCA,AAcCA,IAdGhB,EAAeiB,CAAM,IAEvB,kBAAC,OAAD;EACC,eAAY;EACZ,WAAWC,EAAGC,GAAMC,CAAS;EAC7B,OAAO;GAAE,SAAS;GAAQ,eAAe;GAAU,WAAW;GAAG,UAAU;EAAE;EAH9E,UAAA,CAKC,kBAAC,OAAD;GAAK,WAAU;GACd,UAAA,kBAACC,GAAD;IAAqB,GAAIC;IAA6B,UAAAV;GAAiC,CAAA;EACnF,CAAA,GACJK,CACG;MAIL,kBAAC,OAAD;EACC,WAAWC,EACVC,GACA,2LACAC,CACD;EAEA,UAAA,kBAACC,GAAD;GAAqB,GAAIC;GAA6B,UAAAV;EAAiC,CAAA;CACnF,CAAA,GAIH,CAACP,KAAc,CAACE,IAElB,kBAAC,UAAD;EAAQ,MAAK;EAAQ,cAAYQ;EAAW,WAAU;EACpD,UAAAC;CACM,CAAA,IAKT,kBAAC,UAAD;EACC,MAAK;EACL,cAAYD;EACZ,oBAAkBV,IAAaF,IAAY,KAAA;EAC3C,WAAU;EAJX,UAAA;GAMEE,IACA,kBAAC,OAAD;IAAK,IAAIF;IAAW,WAAU;IAC5B,UAAAG;GACG,CAAA,IACF;GACHU;GACAT,IACA,kBAAC,OAAD;IAAK,WAAU;IAAwC,UAAAC;GAAqB,CAAA,IACzE;EACG;;AAEV;AAEA,SAAgBe,EAAW,GAAwB;CAClD,OAAO,kBAACrB,GAAD,EAAgB,GAAIsB,EAAQ,CAAA;AACpC;AAEA,SAAgBC,EAAW,GAAwB;CAClD,OAAO,kBAACvB,GAAD,EAAgB,GAAIsB,EAAQ,CAAA;AACpC"}
+{"version":3,"file":"frame.js","names":["hasSlotContent","slot","ChartContainer","summaryId","useId","hasSummary","summary","hasAlternative","dataAlternative","childProps","children","childLayer","clonedChild","cloneElement","accessibilityLayer","ariaLabel","plotContainer","legend","cn","size","className","ResponsiveContainer","RESPONSIVE_CONTAINER_PROPS","ChartFrame","props","ChartShell"],"sources":["../../src/charts/frame.tsx"],"sourcesContent":["import { cloneElement, type ReactElement, type ReactNode, useId } from \"react\";\nimport { ResponsiveContainer } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { RESPONSIVE_CONTAINER_PROPS } from \"./config\";\n\nexport type ChartFrameProps = {\n\t/**\n\t * Accessible label describing the purpose or dataset of the chart.\n\t */\n\tariaLabel: string;\n\t/**\n\t * Additional CSS class names for styling the chart container.\n\t */\n\tclassName?: string;\n\t/**\n\t * Single child Recharts element to render inside the responsive container.\n\t * Explicit child accessibilityLayer prop takes precedence over wrapper prop, which defaults to true.\n\t */\n\tchildren: ReactElement<{\n\t\taccessibilityLayer?: boolean;\n\t\t\"aria-label\"?: string;\n\t\t\"aria-describedby\"?: string;\n\t}>;\n\t/**\n\t * Tailwind size classes for the chart container.\n\t * @default \"h-basalt-36 w-basalt-56\"\n\t */\n\tsize?: string;\n\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport type ChartShellProps = ChartFrameProps & {\n\t/**\n\t * Optional legend node rendered alongside the chart plot.\n\t */\n\tlegend?: ReactNode;\n};\n\nexport type ChartAccessibilityProps = Pick<\n\tChartFrameProps,\n\t\"summary\" | \"dataAlternative\" | \"accessibilityLayer\"\n>;\n\nfunction hasSlotContent(slot: ReactNode | undefined): boolean {\n\treturn slot !== undefined && slot !== null && slot !== false;\n}\n\nfunction ChartContainer({\n\tariaLabel,\n\tclassName,\n\tchildren,\n\tsize = \"h-basalt-36 w-basalt-56\",\n\tlegend,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer = true,\n}: ChartShellProps) {\n\tconst summaryId = useId();\n\tconst hasSummary = hasSlotContent(summary);\n\tconst hasAlternative = hasSlotContent(dataAlternative);\n\n\tconst childProps = (children?.props ?? {}) as {\n\t\taccessibilityLayer?: boolean;\n\t\t\"aria-label\"?: string;\n\t\t\"aria-describedby\"?: string;\n\t};\n\tconst childLayer = childProps.accessibilityLayer;\n\tconst resolvedLayer = childLayer !== undefined ? childLayer : accessibilityLayer;\n\n\tconst clonedChild = cloneElement(children, {\n\t\taccessibilityLayer: resolvedLayer,\n\t\t\"aria-label\": childProps[\"aria-label\"] ?? ariaLabel,\n\t\t\"aria-describedby\": childProps[\"aria-describedby\"] ?? (hasSummary ? summaryId : undefined),\n\t});\n\n\tlet plotContainer: ReactNode;\n\tif (hasSlotContent(legend)) {\n\t\tplotContainer = (\n\t\t\t<div\n\t\t\t\tdata-testid=\"chart-shell\"\n\t\t\t\tclassName={cn(size, className)}\n\t\t\t\tstyle={{ display: \"flex\", flexDirection: \"column\", minHeight: 0, minWidth: 0 }}\n\t\t\t>\n\t\t\t\t<div className=\"min-h-0 w-full flex-1 basalt-chart [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-basalt-ring\">\n\t\t\t\t\t<ResponsiveContainer {...RESPONSIVE_CONTAINER_PROPS}>{clonedChild}</ResponsiveContainer>\n\t\t\t\t</div>\n\t\t\t\t{legend}\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\tplotContainer = (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\tsize,\n\t\t\t\t\t\"min-h-0 min-w-0 basalt-chart [&_.recharts-surface:focus-visible]:outline-2 [&_.recharts-surface:focus-visible]:outline-offset-2 [&_.recharts-surface:focus-visible]:outline-basalt-ring\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<ResponsiveContainer {...RESPONSIVE_CONTAINER_PROPS}>{clonedChild}</ResponsiveContainer>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (!hasSummary && !hasAlternative) {\n\t\treturn (\n\t\t\t<figure role=\"group\" aria-label={ariaLabel} className=\"contents m-0 p-0\">\n\t\t\t\t{plotContainer}\n\t\t\t</figure>\n\t\t);\n\t}\n\n\treturn (\n\t\t<figure\n\t\t\trole=\"group\"\n\t\t\taria-label={ariaLabel}\n\t\t\taria-describedby={hasSummary ? summaryId : undefined}\n\t\t\tclassName=\"relative m-0 flex flex-col gap-basalt-space-lg p-0 min-h-0 min-w-0\"\n\t\t>\n\t\t\t{hasSummary ? (\n\t\t\t\t<div id={summaryId} className=\"text-basalt-sm text-basalt-muted-foreground\">\n\t\t\t\t\t{summary}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t{plotContainer}\n\t\t\t{hasAlternative ? (\n\t\t\t\t<div className=\"text-basalt-sm text-basalt-muted-foreground\">{dataAlternative}</div>\n\t\t\t) : null}\n\t\t</figure>\n\t);\n}\n\nexport function ChartFrame(props: ChartFrameProps) {\n\treturn <ChartContainer {...props} />;\n}\n\nexport function ChartShell(props: ChartShellProps) {\n\treturn <ChartContainer {...props} />;\n}\n"],"mappings":";;;;;;;AA0DA,SAASA,EAAe,GAAsC;CAC7D,OAAOC,KAA+B,QAAQA,MAAS;AACxD;AAEA,SAASC,EAAe,EACvB,cACA,cACA,aACA,UAAO,2BACP,WACA,YACA,oBACA,wBAAqB,MACF;CACnB,IAAMC,IAAYC,EAAM,GAClBC,IAAaL,EAAeM,CAAO,GACnCC,IAAiBP,EAAeQ,CAAe,GAE/CC,IAAcC,GAAU,SAAS,CAAC,GAKlCC,IAAaF,EAAW,oBAGxBG,IAAcC,EAAaH,GAAU;EAC1C,oBAHqBC,MAAe,KAAA,IAAyBG,IAAbH;EAIhD,cAAcF,EAAW,iBAAiBM;EAC1C,oBAAoBN,EAAW,wBAAwBJ,IAAaF,IAAY,KAAA;CACjF,CAAC,GAEGa;CAoCJ,OAnCA,AAcCA,IAdGhB,EAAeiB,CAAM,IAEvB,kBAAC,OAAD;EACC,eAAY;EACZ,WAAWC,EAAGC,GAAMC,CAAS;EAC7B,OAAO;GAAE,SAAS;GAAQ,eAAe;GAAU,WAAW;GAAG,UAAU;EAAE;EAH9E,UAAA,CAKC,kBAAC,OAAD;GAAK,WAAU;GACd,UAAA,kBAACC,GAAD;IAAqB,GAAIC;IAA6B,UAAAV;GAAiC,CAAA;EACnF,CAAA,GACJK,CACG;MAIL,kBAAC,OAAD;EACC,WAAWC,EACVC,GACA,2LACAC,CACD;EAEA,UAAA,kBAACC,GAAD;GAAqB,GAAIC;GAA6B,UAAAV;EAAiC,CAAA;CACnF,CAAA,GAIH,CAACP,KAAc,CAACE,IAElB,kBAAC,UAAD;EAAQ,MAAK;EAAQ,cAAYQ;EAAW,WAAU;EACpD,UAAAC;CACM,CAAA,IAKT,kBAAC,UAAD;EACC,MAAK;EACL,cAAYD;EACZ,oBAAkBV,IAAaF,IAAY,KAAA;EAC3C,WAAU;EAJX,UAAA;GAMEE,IACA,kBAAC,OAAD;IAAK,IAAIF;IAAW,WAAU;IAC5B,UAAAG;GACG,CAAA,IACF;GACHU;GACAT,IACA,kBAAC,OAAD;IAAK,WAAU;IAA+C,UAAAC;GAAqB,CAAA,IAChF;EACG;;AAEV;AAEA,SAAgBe,EAAW,GAAwB;CAClD,OAAO,kBAACrB,GAAD,EAAgB,GAAIsB,EAAQ,CAAA;AACpC;AAEA,SAAgBC,EAAW,GAAwB;CAClD,OAAO,kBAACvB,GAAD,EAAgB,GAAIsB,EAAQ,CAAA;AACpC"}

package/dist/charts/gauge.js

@@ -9,7 +9,7 @@ import { PolarAngleAxis as c, RadialBar as l, RadialBarChart as u } from "rechar
 //#region src/charts/gauge.tsx
 function d({ value: d, max: f = 100, series: p, ariaLabel: m = "Gauge", className: h, hideValue: g = !1, valueFormatter: _, summary: v, dataAlternative: y, accessibilityLayer: b }) {
 	let x = a(), S = f === 0 ? 0 : Math.min(100, Math.max(0, d / f * 100)), C = _ ? _(d) : String(d), w = v != null && v !== !1, T = y != null && y !== !1, E = /* @__PURE__ */ s("div", {
-		className: e("relative h-36 w-36", h),
+		className: e("relative h-basalt-36 w-basalt-36", h),
 		children: [/* @__PURE__ */ o(i, {
 			ariaLabel: m,
 			className: "h-full w-full",
@@ -39,21 +39,21 @@ function d({ value: d, max: f = 100, series: p, ariaLabel: m = "Gauge", classNam
 				})]
 			})
 		}), g ? null : /* @__PURE__ */ o("span", {
-			className: "pointer-events-none absolute inset-0 flex items-center justify-center text-sm font-semibold text-basalt-foreground",
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center text-basalt-base font-semibold text-basalt-foreground",
 			children: C
 		})]
 	});
 	return !w && !T ? E : /* @__PURE__ */ s("div", {
-		className: "flex flex-col gap-2 min-h-0 min-w-0",
+		className: "flex flex-col gap-basalt-space-lg min-h-0 min-w-0",
 		children: [
 			w ? /* @__PURE__ */ o("div", {
 				id: x,
-				className: "text-xs text-basalt-muted-foreground",
+				className: "text-basalt-sm text-basalt-muted-foreground",
 				children: v
 			}) : null,
 			E,
 			T ? /* @__PURE__ */ o("div", {
-				className: "text-xs text-basalt-muted-foreground",
+				className: "text-basalt-sm text-basalt-muted-foreground",
 				children: y
 			}) : null
 		]

package/dist/charts/gauge.js.map

@@ -1 +1 @@
-{"version":3,"file":"gauge.js","names":["Gauge","summaryId","useId","percent","max","value","display","valueFormatter","hasSummary","summary","hasAlternative","dataAlternative","plot","cn","className","ChartFrame","RadialBarChart","PolarAngleAxis","RadialBar","seriesColor","series","chartMuted","ANIMATION_PROPS","hideValue"],"sources":["../../src/charts/gauge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { ANIMATION_PROPS, seriesColor } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { chartMuted } from \"./palette\";\nimport type { ChartSeriesDescriptor } from \"./series\";\n\nexport type GaugeProps = {\n\tvalue: number;\n\tmax?: number;\n\tseries?: ChartSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n\thideValue?: boolean;\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport function Gauge({\n\tvalue,\n\tmax = 100,\n\tseries,\n\tariaLabel = \"Gauge\",\n\tclassName,\n\thideValue = false,\n\tvalueFormatter,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: GaugeProps) {\n\tconst summaryId = useId();\n\tconst percent = max === 0 ? 0 : Math.min(100, Math.max(0, (value / max) * 100));\n\tconst display = valueFormatter ? valueFormatter(value) : String(value);\n\tconst hasSummary = summary !== undefined && summary !== null && summary !== false;\n\tconst hasAlternative =\n\t\tdataAlternative !== undefined && dataAlternative !== null && dataAlternative !== false;\n\n\tconst plot = (\n\t\t<div className={cn(\"relative h-36 w-36\", className)}>\n\t\t\t<ChartFrame\n\t\t\t\tariaLabel={ariaLabel}\n\t\t\t\tclassName=\"h-full w-full\"\n\t\t\t\tsize=\"h-full w-full\"\n\t\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t\t>\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\t{...(hasSummary ? { \"aria-describedby\": summaryId } : {})}\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={seriesColor(series?.[0], 2)}\n\t\t\t\t\t\tbackground={{ fill: chartMuted }}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\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\tif (!hasSummary && !hasAlternative) {\n\t\treturn plot;\n\t}\n\n\treturn (\n\t\t<div className=\"flex flex-col gap-2 min-h-0 min-w-0\">\n\t\t\t{hasSummary ? (\n\t\t\t\t<div id={summaryId} className=\"text-xs text-basalt-muted-foreground\">\n\t\t\t\t\t{summary}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t{plot}\n\t\t\t{hasAlternative ? (\n\t\t\t\t<div className=\"text-xs text-basalt-muted-foreground\">{dataAlternative}</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;AAmCA,SAAgBA,EAAM,EACrB,UACA,SAAM,KACN,WACA,eAAY,SACZ,cACA,eAAY,IACZ,mBACA,YACA,oBACA,yBACc;CACd,IAAMC,IAAYC,EAAM,GAClBC,IAAUC,MAAQ,IAAI,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAIC,IAAQD,IAAO,GAAG,CAAC,GACxEE,IAAUC,IAAiBA,EAAeF,CAAK,IAAI,OAAOA,CAAK,GAC/DG,IAAaC,KAAqC,QAAQA,MAAY,IACtEC,IACLC,KAAqD,QAAQA,MAAoB,IAE5EC,IACL,kBAAC,OAAD;EAAK,WAAWC,EAAG,sBAAsBC,CAAS;EAAlD,UAAA,CACC,kBAACC,GAAD;GACY;GACX,WAAU;GACV,MAAK;GACe;GAEpB,UAAA,kBAACC,GAAD;IACC,IAAG;IACH,IAAG;IACH,aAAY;IACZ,aAAY;IACZ,YAAY;IACZ,UAAU;IACV,MAAM,CAAC,EAAE,OAAOb,EAAQ,CAAC;IACzB,SAAS;IACT,GAAKK,IAAa,EAAE,oBAAoBP,EAAU,IAAI,CAAC;IATxD,UAAA,CAWC,kBAACgB,GAAD;KAAgB,MAAK;KAAS,QAAQ,CAAC,GAAG,GAAG;KAAG,aAAa;KAAG,MAAM;IAAQ,CAAA,GAC9E,kBAACC,GAAD;KACC,SAAQ;KACR,cAAc;KACd,MAAMC,EAAYC,IAAS,IAAI,CAAC;KAChC,YAAY,EAAE,MAAMC,EAAW;KAC/B,GAAIC;IACJ,CAAA,CACc;;EACL,CAAA,GACXC,IAAY,OACZ,kBAAC,QAAD;GAAM,WAAU;GACd,UAAAjB;EACI,CAAA,CAEH;;CAON,OAJI,CAACE,KAAc,CAACE,IACZE,IAIP,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACEJ,IACA,kBAAC,OAAD;IAAK,IAAIP;IAAW,WAAU;IAC5B,UAAAQ;GACG,CAAA,IACF;GACHG;GACAF,IACA,kBAAC,OAAD;IAAK,WAAU;IAAwC,UAAAC;GAAqB,CAAA,IACzE;EACA;;AAEP"}
+{"version":3,"file":"gauge.js","names":["Gauge","summaryId","useId","percent","max","value","display","valueFormatter","hasSummary","summary","hasAlternative","dataAlternative","plot","cn","className","ChartFrame","RadialBarChart","PolarAngleAxis","RadialBar","seriesColor","series","chartMuted","ANIMATION_PROPS","hideValue"],"sources":["../../src/charts/gauge.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport { PolarAngleAxis, RadialBar, RadialBarChart } from \"recharts\";\nimport { cn } from \"../utils/cn\";\nimport { ANIMATION_PROPS, seriesColor } from \"./config\";\nimport { ChartFrame } from \"./frame\";\nimport { chartMuted } from \"./palette\";\nimport type { ChartSeriesDescriptor } from \"./series\";\n\nexport type GaugeProps = {\n\tvalue: number;\n\tmax?: number;\n\tseries?: ChartSeriesDescriptor[];\n\tariaLabel?: string;\n\tclassName?: string;\n\thideValue?: boolean;\n\tvalueFormatter?: (value: number) => string;\n\t/**\n\t * Textual summary describing key insights, highs, lows, and keyboard exploration instructions.\n\t * Associated with the chart via useId and aria-describedby.\n\t */\n\tsummary?: ReactNode;\n\t/**\n\t * Accessible tabular or structured data alternative rendered outside the plot area.\n\t */\n\tdataAlternative?: ReactNode;\n\t/**\n\t * Whether the interactive accessibility layer is enabled on the underlying Recharts graphic.\n\t * Enables keyboard exploration with Tab and arrow keys where supported by the underlying chart type.\n\t * Non-interactive compact or decorative charts without tooltip navigation should provide summary or dataAlternative.\n\t * @default true\n\t */\n\taccessibilityLayer?: boolean;\n};\n\nexport function Gauge({\n\tvalue,\n\tmax = 100,\n\tseries,\n\tariaLabel = \"Gauge\",\n\tclassName,\n\thideValue = false,\n\tvalueFormatter,\n\tsummary,\n\tdataAlternative,\n\taccessibilityLayer,\n}: GaugeProps) {\n\tconst summaryId = useId();\n\tconst percent = max === 0 ? 0 : Math.min(100, Math.max(0, (value / max) * 100));\n\tconst display = valueFormatter ? valueFormatter(value) : String(value);\n\tconst hasSummary = summary !== undefined && summary !== null && summary !== false;\n\tconst hasAlternative =\n\t\tdataAlternative !== undefined && dataAlternative !== null && dataAlternative !== false;\n\n\tconst plot = (\n\t\t<div className={cn(\"relative h-basalt-36 w-basalt-36\", className)}>\n\t\t\t<ChartFrame\n\t\t\t\tariaLabel={ariaLabel}\n\t\t\t\tclassName=\"h-full w-full\"\n\t\t\t\tsize=\"h-full w-full\"\n\t\t\t\taccessibilityLayer={accessibilityLayer}\n\t\t\t>\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\t{...(hasSummary ? { \"aria-describedby\": summaryId } : {})}\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={seriesColor(series?.[0], 2)}\n\t\t\t\t\t\tbackground={{ fill: chartMuted }}\n\t\t\t\t\t\t{...ANIMATION_PROPS}\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-basalt-base 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\tif (!hasSummary && !hasAlternative) {\n\t\treturn plot;\n\t}\n\n\treturn (\n\t\t<div className=\"flex flex-col gap-basalt-space-lg min-h-0 min-w-0\">\n\t\t\t{hasSummary ? (\n\t\t\t\t<div id={summaryId} className=\"text-basalt-sm text-basalt-muted-foreground\">\n\t\t\t\t\t{summary}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t{plot}\n\t\t\t{hasAlternative ? (\n\t\t\t\t<div className=\"text-basalt-sm text-basalt-muted-foreground\">{dataAlternative}</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;AAmCA,SAAgBA,EAAM,EACrB,UACA,SAAM,KACN,WACA,eAAY,SACZ,cACA,eAAY,IACZ,mBACA,YACA,oBACA,yBACc;CACd,IAAMC,IAAYC,EAAM,GAClBC,IAAUC,MAAQ,IAAI,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAIC,IAAQD,IAAO,GAAG,CAAC,GACxEE,IAAUC,IAAiBA,EAAeF,CAAK,IAAI,OAAOA,CAAK,GAC/DG,IAAaC,KAAqC,QAAQA,MAAY,IACtEC,IACLC,KAAqD,QAAQA,MAAoB,IAE5EC,IACL,kBAAC,OAAD;EAAK,WAAWC,EAAG,oCAAoCC,CAAS;EAAhE,UAAA,CACC,kBAACC,GAAD;GACY;GACX,WAAU;GACV,MAAK;GACe;GAEpB,UAAA,kBAACC,GAAD;IACC,IAAG;IACH,IAAG;IACH,aAAY;IACZ,aAAY;IACZ,YAAY;IACZ,UAAU;IACV,MAAM,CAAC,EAAE,OAAOb,EAAQ,CAAC;IACzB,SAAS;IACT,GAAKK,IAAa,EAAE,oBAAoBP,EAAU,IAAI,CAAC;IATxD,UAAA,CAWC,kBAACgB,GAAD;KAAgB,MAAK;KAAS,QAAQ,CAAC,GAAG,GAAG;KAAG,aAAa;KAAG,MAAM;IAAQ,CAAA,GAC9E,kBAACC,GAAD;KACC,SAAQ;KACR,cAAc;KACd,MAAMC,EAAYC,IAAS,IAAI,CAAC;KAChC,YAAY,EAAE,MAAMC,EAAW;KAC/B,GAAIC;IACJ,CAAA,CACc;;EACL,CAAA,GACXC,IAAY,OACZ,kBAAC,QAAD;GAAM,WAAU;GACd,UAAAjB;EACI,CAAA,CAEH;;CAON,OAJI,CAACE,KAAc,CAACE,IACZE,IAIP,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACEJ,IACA,kBAAC,OAAD;IAAK,IAAIP;IAAW,WAAU;IAC5B,UAAAQ;GACG,CAAA,IACF;GACHG;GACAF,IACA,kBAAC,OAAD;IAAK,WAAU;IAA+C,UAAAC;GAAqB,CAAA,IAChF;EACA;;AAEP"}

package/dist/charts/heatmap-calendar.js

@@ -94,7 +94,7 @@ function y({ values: o, ariaLabel: s = "Heatmap calendar", className: f }) {
 		onBlur: (e) => {
 			e.currentTarget.contains(e.relatedTarget) || (y.current = !1);
 		},
-		className: e("grid grid-cols-7 gap-1 p-0.5 outline-none", f),
+		className: e("grid grid-cols-7 gap-basalt-space-sm p-basalt-space-xs outline-none", f),
 		children: o.map((e, r) => /* @__PURE__ */ d(t, {
 			open: h === r,
 			onOpenChange: (e) => {
@@ -116,11 +116,11 @@ function y({ values: o, ariaLabel: s = "Heatmap calendar", className: f }) {
 					},
 					onKeyDown: (e) => b(e, r),
 					"aria-label": `Position ${r + 1}: ${e}`,
-					className: "box-border m-0 h-3 w-3 cursor-pointer rounded-sm border-0 p-0 transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-basalt-ring",
+					className: "box-border m-0 h-basalt-3 w-basalt-3 cursor-pointer rounded-basalt-sm border-0 p-0 transition-colors basalt-motion focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-basalt-ring",
 					style: { backgroundColor: `hsl(var(--basalt-chart-5) / ${.2 + Math.min(4, Math.max(0, e)) * .15})` }
 				})
 			}), /* @__PURE__ */ u(n, { children: /* @__PURE__ */ d("div", {
-				className: "text-xs",
+				className: "text-basalt-sm",
 				children: [
 					"Position ",
 					r + 1,
@@ -218,14 +218,14 @@ function b({ data: v, year: y, colorScale: b = f.green, valueFormatter: x = (e)
 		onBlur: (e) => {
 			e.currentTarget.contains(e.relatedTarget) || (q.current = !1);
 		},
-		className: e("overflow-x-auto rounded-md outline-none focus-visible:ring-1 focus-visible:ring-basalt-ring", j),
+		className: e("overflow-x-auto rounded-basalt-md outline-none focus-visible:ring-1 focus-visible:ring-basalt-ring", j),
 		children: /* @__PURE__ */ u(r, { children: /* @__PURE__ */ d("div", {
-			className: "inline-block p-1",
+			className: "inline-block p-basalt-space-sm",
 			role: "group",
 			"aria-label": A,
 			children: [
 				/* @__PURE__ */ u("div", {
-					className: "relative mb-1 h-4 text-xs text-basalt-muted-foreground",
+					className: "relative mb-basalt-space-sm h-basalt-4 text-basalt-sm text-basalt-muted-foreground",
 					style: { marginLeft: 30 },
 					children: z.map((e) => /* @__PURE__ */ u("div", {
 						className: "absolute",
@@ -236,7 +236,7 @@ function b({ data: v, year: y, colorScale: b = f.green, valueFormatter: x = (e)
 				/* @__PURE__ */ d("div", {
 					className: "flex",
 					children: [/* @__PURE__ */ u("div", {
-						className: "mr-1 flex flex-col text-xs text-basalt-muted-foreground select-none",
+						className: "mr-basalt-space-sm flex flex-col text-basalt-sm text-basalt-muted-foreground select-none",
 						style: { width: 30 },
 						"aria-hidden": "true",
 						children: M.map((e, t) => /* @__PURE__ */ u("div", {
@@ -285,7 +285,7 @@ function b({ data: v, year: y, colorScale: b = f.green, valueFormatter: x = (e)
 												G((e) => e === a ? null : e);
 											},
 											onKeyDown: (e) => X(e, a),
-											className: "box-border m-0 cursor-pointer rounded-sm border-0 p-0 transition-colors hover:ring-1 hover:ring-basalt-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-basalt-ring",
+											className: "box-border m-0 cursor-pointer rounded-basalt-sm border-0 p-0 transition-colors basalt-motion hover:ring-1 hover:ring-basalt-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-basalt-ring",
 											style: {
 												width: C,
 												height: C,
@@ -295,7 +295,7 @@ function b({ data: v, year: y, colorScale: b = f.green, valueFormatter: x = (e)
 									}), /* @__PURE__ */ u(n, {
 										id: `${P}-${a}`,
 										children: /* @__PURE__ */ d("div", {
-											className: "text-sm",
+											className: "text-basalt-base",
 											children: [/* @__PURE__ */ u("div", {
 												className: "font-medium",
 												children: a
@@ -315,12 +315,12 @@ function b({ data: v, year: y, colorScale: b = f.green, valueFormatter: x = (e)
 					})]
 				}),
 				/* @__PURE__ */ d("div", {
-					className: "mt-2 flex items-center justify-end gap-1 text-xs text-basalt-muted-foreground select-none",
+					className: "mt-basalt-space-lg flex items-center justify-end gap-basalt-space-sm text-basalt-sm text-basalt-muted-foreground select-none",
 					"aria-hidden": "true",
 					children: [
 						/* @__PURE__ */ u("span", { children: O }),
 						b.map((e) => /* @__PURE__ */ u("div", {
-							className: "rounded-sm",
+							className: "rounded-basalt-sm",
 							style: {
 								width: C,
 								height: C,