@nuvui/charts 0.0.0-stage → 0.1.1

package/dist/components/chart/patterns.cjs

@@ -0,0 +1,81 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/chart/patterns.tsx
+function Tile({ pattern, color }) {
+	const line = {
+		stroke: color,
+		strokeWidth: 2
+	};
+	switch (pattern) {
+		case "diagonal":
+		case "reverse-diagonal":
+		case "vertical": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "4",
+			y1: "0",
+			x2: "4",
+			y2: "8",
+			...line
+		});
+		case "horizontal": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "0",
+			y1: "4",
+			x2: "8",
+			y2: "4",
+			...line
+		});
+		case "dots": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+			cx: "4",
+			cy: "4",
+			r: "1.75",
+			fill: color
+		});
+		case "cross": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M1 1l6 6M7 1l-6 6",
+			fill: "none",
+			...line,
+			strokeWidth: 1.5
+		});
+		case "grid": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M4 0v8M0 4h8",
+			fill: "none",
+			...line,
+			strokeWidth: 1.5
+		});
+		default: return null;
+	}
+}
+const turns = {
+	diagonal: "rotate(45)",
+	"reverse-diagonal": "rotate(-45)"
+};
+function Patterns({ series }) {
+	const drawn = series.filter((entry) => entry.patternId);
+	if (drawn.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		className: "nuv-chart__patterns",
+		"aria-hidden": "true",
+		focusable: "false",
+		width: "0",
+		height: "0",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: drawn.map((entry) => {
+			const color = `var(--chart-${entry.name})`;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("pattern", {
+				id: entry.patternId,
+				width: "8",
+				height: "8",
+				patternUnits: "userSpaceOnUse",
+				patternTransform: turns[entry.pattern],
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					width: "8",
+					height: "8",
+					fill: color,
+					opacity: "0.3"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tile, {
+					pattern: entry.pattern,
+					color
+				})]
+			}, entry.key);
+		}) })
+	});
+}
+//#endregion
+exports.Patterns = Patterns;

package/dist/components/chart/patterns.js

@@ -0,0 +1,81 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart/patterns.tsx
+function Tile({ pattern, color }) {
+	const line = {
+		stroke: color,
+		strokeWidth: 2
+	};
+	switch (pattern) {
+		case "diagonal":
+		case "reverse-diagonal":
+		case "vertical": return /* @__PURE__ */ jsx("line", {
+			x1: "4",
+			y1: "0",
+			x2: "4",
+			y2: "8",
+			...line
+		});
+		case "horizontal": return /* @__PURE__ */ jsx("line", {
+			x1: "0",
+			y1: "4",
+			x2: "8",
+			y2: "4",
+			...line
+		});
+		case "dots": return /* @__PURE__ */ jsx("circle", {
+			cx: "4",
+			cy: "4",
+			r: "1.75",
+			fill: color
+		});
+		case "cross": return /* @__PURE__ */ jsx("path", {
+			d: "M1 1l6 6M7 1l-6 6",
+			fill: "none",
+			...line,
+			strokeWidth: 1.5
+		});
+		case "grid": return /* @__PURE__ */ jsx("path", {
+			d: "M4 0v8M0 4h8",
+			fill: "none",
+			...line,
+			strokeWidth: 1.5
+		});
+		default: return null;
+	}
+}
+const turns = {
+	diagonal: "rotate(45)",
+	"reverse-diagonal": "rotate(-45)"
+};
+function Patterns({ series }) {
+	const drawn = series.filter((entry) => entry.patternId);
+	if (drawn.length === 0) return null;
+	return /* @__PURE__ */ jsx("svg", {
+		className: "nuv-chart__patterns",
+		"aria-hidden": "true",
+		focusable: "false",
+		width: "0",
+		height: "0",
+		children: /* @__PURE__ */ jsx("defs", { children: drawn.map((entry) => {
+			const color = `var(--chart-${entry.name})`;
+			return /* @__PURE__ */ jsxs("pattern", {
+				id: entry.patternId,
+				width: "8",
+				height: "8",
+				patternUnits: "userSpaceOnUse",
+				patternTransform: turns[entry.pattern],
+				children: [/* @__PURE__ */ jsx("rect", {
+					width: "8",
+					height: "8",
+					fill: color,
+					opacity: "0.3"
+				}), /* @__PURE__ */ jsx(Tile, {
+					pattern: entry.pattern,
+					color
+				})]
+			}, entry.key);
+		}) })
+	});
+}
+//#endregion
+export { Patterns };

package/dist/components/chart/swatch.cjs

@@ -0,0 +1,34 @@
+const require_config = require("./config.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/chart/swatch.tsx
+function Swatch({ series, color, indicator }) {
+	if (indicator === "line") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		className: "nuv-chart__swatch nuv-chart__swatch--line",
+		"aria-hidden": "true",
+		focusable: "false",
+		viewBox: "0 0 24 12",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "0",
+			y1: "6",
+			x2: "24",
+			y2: "6",
+			strokeWidth: "2",
+			stroke: series ? require_config.chartColor(series) : color,
+			strokeDasharray: series ? require_config.chartDash(series) : void 0
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		className: "nuv-chart__swatch",
+		"aria-hidden": "true",
+		focusable: "false",
+		viewBox: "0 0 12 12",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			width: "12",
+			height: "12",
+			rx: "2",
+			fill: series ? require_config.chartFill(series) : color
+		})
+	});
+}
+//#endregion
+exports.Swatch = Swatch;

package/dist/components/chart/swatch.d.cts

@@ -0,0 +1,7 @@
+//#region src/components/chart/swatch.d.ts
+/**
+ * `"square"` shows a series' fill, pattern included. `"line"` shows its
+ * line, dashes included, and suits a line chart.
+ */
+export type ChartIndicator = "square" | "line";
+//#endregion

package/dist/components/chart/swatch.d.ts

@@ -0,0 +1,7 @@
+//#region src/components/chart/swatch.d.ts
+/**
+ * `"square"` shows a series' fill, pattern included. `"line"` shows its
+ * line, dashes included, and suits a line chart.
+ */
+export type ChartIndicator = "square" | "line";
+//#endregion

package/dist/components/chart/swatch.js

@@ -0,0 +1,34 @@
+import { chartColor, chartDash, chartFill } from "./config.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/chart/swatch.tsx
+function Swatch({ series, color, indicator }) {
+	if (indicator === "line") return /* @__PURE__ */ jsx("svg", {
+		className: "nuv-chart__swatch nuv-chart__swatch--line",
+		"aria-hidden": "true",
+		focusable: "false",
+		viewBox: "0 0 24 12",
+		children: /* @__PURE__ */ jsx("line", {
+			x1: "0",
+			y1: "6",
+			x2: "24",
+			y2: "6",
+			strokeWidth: "2",
+			stroke: series ? chartColor(series) : color,
+			strokeDasharray: series ? chartDash(series) : void 0
+		})
+	});
+	return /* @__PURE__ */ jsx("svg", {
+		className: "nuv-chart__swatch",
+		"aria-hidden": "true",
+		focusable: "false",
+		viewBox: "0 0 12 12",
+		children: /* @__PURE__ */ jsx("rect", {
+			width: "12",
+			height: "12",
+			rx: "2",
+			fill: series ? chartFill(series) : color
+		})
+	});
+}
+//#endregion
+export { Swatch };

package/dist/css/chart.css

@@ -0,0 +1,199 @@
+@layer tokens, base, components;
+@layer components {
+  .nuv-chart {
+    --nuv-chart-patterns: ;
+    --nuv-chart-solid: initial;
+    position: relative;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--nuv-chart-fg, var(--color-muted-foreground));
+    font-size: var(--nuv-chart-font-size, var(--text-xs));
+    line-height: var(--text-xs--line-height);
+  }
+  .nuv-chart[data-patterns] {
+    --nuv-chart-patterns: initial;
+    --nuv-chart-solid: ;
+  }
+  @media (forced-colors: active) {
+    .nuv-chart {
+      --nuv-chart-patterns: initial;
+      --nuv-chart-solid: ;
+      --nuv-chart-forced-color: CanvasText;
+      --nuv-chart-grid: GrayText;
+      --nuv-chart-axis: CanvasText;
+      --nuv-chart-fg: CanvasText;
+      --nuv-chart-label-fg: CanvasText;
+      --nuv-chart-backdrop: Canvas;
+      --nuv-chart-cursor: GrayText;
+    }
+  }
+  .nuv-chart__plot {
+    inline-size: 100%;
+    block-size: var(--nuv-chart-height, auto);
+    aspect-ratio: var(--nuv-chart-aspect-ratio, 16/9);
+  }
+  .nuv-chart__patterns {
+    position: absolute;
+    pointer-events: none;
+  }
+  .nuv-chart__tooltip {
+    display: grid;
+    gap: calc(var(--spacing) * 1.5);
+    min-inline-size: 8rem;
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2.5);
+    border: var(--nuv-border-width) solid var(--nuv-chart-tooltip-border, var(--color-border));
+    border-radius: var(--nuv-chart-tooltip-radius, var(--radius-lg));
+    background-color: var(--nuv-chart-tooltip-bg, var(--color-surface));
+    box-shadow: var(--nuv-chart-tooltip-shadow, var(--shadow-lg));
+    color: var(--nuv-chart-tooltip-fg, var(--color-surface-foreground));
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+  }
+  .nuv-chart__tooltip[hidden] {
+    display: none;
+  }
+  .nuv-chart__tooltip-label {
+    font-weight: var(--font-weight-medium);
+  }
+  .nuv-chart__tooltip-items {
+    display: grid;
+    gap: var(--spacing);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .nuv-chart__tooltip-item {
+    display: flex;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+  }
+  .nuv-chart__tooltip-name {
+    flex: 1;
+    color: var(--color-muted-foreground);
+  }
+  .nuv-chart__tooltip-value {
+    margin-inline-start: calc(var(--spacing) * 2);
+    font-weight: var(--font-weight-medium);
+    font-variant-numeric: tabular-nums;
+  }
+  .nuv-chart__swatch {
+    flex: none;
+    inline-size: calc(var(--spacing) * 3);
+    block-size: calc(var(--spacing) * 3);
+  }
+  .nuv-chart__swatch--line {
+    inline-size: calc(var(--spacing) * 6);
+  }
+  .nuv-chart__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    color: var(--nuv-chart-legend-fg, var(--color-foreground));
+    list-style: none;
+  }
+  .nuv-chart__legend-item {
+    display: inline-flex;
+    gap: calc(var(--spacing) * 1.5);
+    align-items: center;
+  }
+  .nuv-chart__legend-item--inactive {
+    opacity: var(--nuv-disabled-opacity);
+  }
+  .nuv-chart__data {
+    margin-block-start: calc(var(--spacing) * 4);
+  }
+  .nuv-chart__table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    color: var(--nuv-chart-table-fg, var(--color-foreground));
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+  .nuv-chart__table caption {
+    padding-block-end: calc(var(--spacing) * 2);
+    color: var(--color-muted-foreground);
+    text-align: start;
+  }
+  .nuv-chart__table th,
+  .nuv-chart__table td {
+    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
+    border-block-end: var(--nuv-border-width) solid var(--nuv-chart-table-border, var(--color-border));
+  }
+  .nuv-chart__table th {
+    font-weight: var(--font-weight-medium);
+  }
+  .nuv-chart__table th:first-child {
+    text-align: start;
+  }
+  .nuv-chart__data--hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  /* stylelint-disable selector-class-pattern, selector-max-compound-selectors */
+  .nuv-chart .recharts-surface {
+    overflow: visible;
+    border-radius: var(--radius-sm);
+    outline: none;
+  }
+  .nuv-chart .recharts-surface:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, 2px);
+  }
+  .nuv-chart .recharts-layer,
+  .nuv-chart .recharts-sector {
+    outline: none;
+  }
+  .nuv-chart .recharts-text {
+    fill: currentcolor;
+  }
+  .nuv-chart .recharts-label {
+    fill: var(--nuv-chart-label-fg, var(--color-foreground));
+  }
+  .nuv-chart .recharts-cartesian-grid line,
+  .nuv-chart .recharts-polar-grid line,
+  .nuv-chart .recharts-polar-grid-concentric-polygon,
+  .nuv-chart .recharts-polar-grid-concentric-circle {
+    stroke: var(--nuv-chart-grid, var(--color-border));
+  }
+  .nuv-chart .recharts-cartesian-axis-line,
+  .nuv-chart .recharts-cartesian-axis-tick-line,
+  .nuv-chart .recharts-polar-angle-axis-tick-line,
+  .nuv-chart .recharts-polar-radius-axis-line,
+  .nuv-chart .recharts-polar-radius-axis-tick-line,
+  .nuv-chart .recharts-reference-line-line {
+    stroke: var(--nuv-chart-axis, var(--color-border-strong));
+  }
+  .nuv-chart .recharts-curve.recharts-tooltip-cursor {
+    stroke: var(--nuv-chart-cursor, var(--color-border-strong));
+  }
+  .nuv-chart .recharts-rectangle.recharts-tooltip-cursor,
+  .nuv-chart .recharts-sector.recharts-tooltip-cursor,
+  .nuv-chart .recharts-radial-bar-background-sector {
+    fill: var(--nuv-chart-cursor, var(--color-muted));
+  }
+  .nuv-chart .recharts-sector[stroke="#fff"],
+  .nuv-chart .recharts-dot[stroke="#fff"],
+  .nuv-chart .recharts-active-dot [stroke="#fff"] {
+    stroke: var(--nuv-chart-backdrop, var(--color-background));
+  }
+  .nuv-chart .recharts-dot[fill="#fff"] {
+    fill: var(--nuv-chart-backdrop, var(--color-background));
+  }
+  .nuv-chart .recharts-tooltip-wrapper {
+    z-index: var(--nuv-z-popover);
+  }
+  /* stylelint-enable selector-class-pattern, selector-max-compound-selectors */
+}

package/dist/index.cjs

@@ -0,0 +1,15 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_config = require("./components/chart/config.cjs");
+const require_chart_container = require("./components/chart/chart-container.cjs");
+const require_chart_tooltip = require("./components/chart/chart-tooltip.cjs");
+const require_chart_legend = require("./components/chart/chart-legend.cjs");
+const require_chart_table = require("./components/chart/chart-table.cjs");
+exports.ChartContainer = require_chart_container.ChartContainer;
+exports.ChartLegend = require_chart_legend.ChartLegend;
+exports.ChartLegendContent = require_chart_legend.ChartLegendContent;
+exports.ChartTable = require_chart_table.ChartTable;
+exports.ChartTooltip = require_chart_tooltip.ChartTooltip;
+exports.ChartTooltipContent = require_chart_tooltip.ChartTooltipContent;
+exports.chartColor = require_config.chartColor;
+exports.chartDash = require_config.chartDash;
+exports.chartFill = require_config.chartFill;

package/dist/index.d.cts

@@ -0,0 +1,9 @@
+import { ChartConfig, ChartDash, ChartPattern, ChartSeries, chartColor, chartDash, chartFill } from "./components/chart/config.cjs";
+import { ChartValueFormatter } from "./components/chart/context.cjs";
+import { ChartContainer, ChartContainerOwnProps, ChartContainerProps, ChartName } from "./components/chart/chart-container.cjs";
+import { ChartIndicator } from "./components/chart/swatch.cjs";
+import { ChartLegend, ChartLegendContent, ChartLegendContentOwnProps, ChartLegendContentProps, ChartLegendProps } from "./components/chart/chart-legend.cjs";
+import { ChartTable, ChartTableOwnProps, ChartTableProps } from "./components/chart/chart-table.cjs";
+import { ChartTooltip, ChartTooltipContent, ChartTooltipContentOwnProps, ChartTooltipContentProps, ChartTooltipProps } from "./components/chart/chart-tooltip.cjs";
+import "./components/chart/index.cjs";
+export { type ChartConfig, ChartContainer, type ChartContainerOwnProps, type ChartContainerProps, type ChartDash, type ChartIndicator, ChartLegend, ChartLegendContent, type ChartLegendContentOwnProps, type ChartLegendContentProps, type ChartLegendProps, type ChartName, type ChartPattern, type ChartSeries, ChartTable, type ChartTableOwnProps, type ChartTableProps, ChartTooltip, ChartTooltipContent, type ChartTooltipContentOwnProps, type ChartTooltipContentProps, type ChartTooltipProps, type ChartValueFormatter, chartColor, chartDash, chartFill };

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { ChartConfig, ChartDash, ChartPattern, ChartSeries, chartColor, chartDash, chartFill } from "./components/chart/config.js";
+import { ChartValueFormatter } from "./components/chart/context.js";
+import { ChartContainer, ChartContainerOwnProps, ChartContainerProps, ChartName } from "./components/chart/chart-container.js";
+import { ChartIndicator } from "./components/chart/swatch.js";
+import { ChartLegend, ChartLegendContent, ChartLegendContentOwnProps, ChartLegendContentProps, ChartLegendProps } from "./components/chart/chart-legend.js";
+import { ChartTable, ChartTableOwnProps, ChartTableProps } from "./components/chart/chart-table.js";
+import { ChartTooltip, ChartTooltipContent, ChartTooltipContentOwnProps, ChartTooltipContentProps, ChartTooltipProps } from "./components/chart/chart-tooltip.js";
+import "./components/chart/index.js";
+export { type ChartConfig, ChartContainer, type ChartContainerOwnProps, type ChartContainerProps, type ChartDash, type ChartIndicator, ChartLegend, ChartLegendContent, type ChartLegendContentOwnProps, type ChartLegendContentProps, type ChartLegendProps, type ChartName, type ChartPattern, type ChartSeries, ChartTable, type ChartTableOwnProps, type ChartTableProps, ChartTooltip, ChartTooltipContent, type ChartTooltipContentOwnProps, type ChartTooltipContentProps, type ChartTooltipProps, type ChartValueFormatter, chartColor, chartDash, chartFill };

package/dist/index.js

@@ -0,0 +1,6 @@
+import { chartColor, chartDash, chartFill } from "./components/chart/config.js";
+import { ChartContainer } from "./components/chart/chart-container.js";
+import { ChartTooltip, ChartTooltipContent } from "./components/chart/chart-tooltip.js";
+import { ChartLegend, ChartLegendContent } from "./components/chart/chart-legend.js";
+import { ChartTable } from "./components/chart/chart-table.js";
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartTable, ChartTooltip, ChartTooltipContent, chartColor, chartDash, chartFill };

package/dist/styles.css

@@ -0,0 +1,199 @@
+@layer tokens, base, components;
+@layer components {
+  .nuv-chart {
+    --nuv-chart-patterns: ;
+    --nuv-chart-solid: initial;
+    position: relative;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--nuv-chart-fg, var(--color-muted-foreground));
+    font-size: var(--nuv-chart-font-size, var(--text-xs));
+    line-height: var(--text-xs--line-height);
+  }
+  .nuv-chart[data-patterns] {
+    --nuv-chart-patterns: initial;
+    --nuv-chart-solid: ;
+  }
+  @media (forced-colors: active) {
+    .nuv-chart {
+      --nuv-chart-patterns: initial;
+      --nuv-chart-solid: ;
+      --nuv-chart-forced-color: CanvasText;
+      --nuv-chart-grid: GrayText;
+      --nuv-chart-axis: CanvasText;
+      --nuv-chart-fg: CanvasText;
+      --nuv-chart-label-fg: CanvasText;
+      --nuv-chart-backdrop: Canvas;
+      --nuv-chart-cursor: GrayText;
+    }
+  }
+  .nuv-chart__plot {
+    inline-size: 100%;
+    block-size: var(--nuv-chart-height, auto);
+    aspect-ratio: var(--nuv-chart-aspect-ratio, 16/9);
+  }
+  .nuv-chart__patterns {
+    position: absolute;
+    pointer-events: none;
+  }
+  .nuv-chart__tooltip {
+    display: grid;
+    gap: calc(var(--spacing) * 1.5);
+    min-inline-size: 8rem;
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2.5);
+    border: var(--nuv-border-width) solid var(--nuv-chart-tooltip-border, var(--color-border));
+    border-radius: var(--nuv-chart-tooltip-radius, var(--radius-lg));
+    background-color: var(--nuv-chart-tooltip-bg, var(--color-surface));
+    box-shadow: var(--nuv-chart-tooltip-shadow, var(--shadow-lg));
+    color: var(--nuv-chart-tooltip-fg, var(--color-surface-foreground));
+    font-size: var(--text-xs);
+    line-height: var(--text-xs--line-height);
+  }
+  .nuv-chart__tooltip[hidden] {
+    display: none;
+  }
+  .nuv-chart__tooltip-label {
+    font-weight: var(--font-weight-medium);
+  }
+  .nuv-chart__tooltip-items {
+    display: grid;
+    gap: var(--spacing);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .nuv-chart__tooltip-item {
+    display: flex;
+    gap: calc(var(--spacing) * 2);
+    align-items: center;
+  }
+  .nuv-chart__tooltip-name {
+    flex: 1;
+    color: var(--color-muted-foreground);
+  }
+  .nuv-chart__tooltip-value {
+    margin-inline-start: calc(var(--spacing) * 2);
+    font-weight: var(--font-weight-medium);
+    font-variant-numeric: tabular-nums;
+  }
+  .nuv-chart__swatch {
+    flex: none;
+    inline-size: calc(var(--spacing) * 3);
+    block-size: calc(var(--spacing) * 3);
+  }
+  .nuv-chart__swatch--line {
+    inline-size: calc(var(--spacing) * 6);
+  }
+  .nuv-chart__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    color: var(--nuv-chart-legend-fg, var(--color-foreground));
+    list-style: none;
+  }
+  .nuv-chart__legend-item {
+    display: inline-flex;
+    gap: calc(var(--spacing) * 1.5);
+    align-items: center;
+  }
+  .nuv-chart__legend-item--inactive {
+    opacity: var(--nuv-disabled-opacity);
+  }
+  .nuv-chart__data {
+    margin-block-start: calc(var(--spacing) * 4);
+  }
+  .nuv-chart__table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    color: var(--nuv-chart-table-fg, var(--color-foreground));
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+  .nuv-chart__table caption {
+    padding-block-end: calc(var(--spacing) * 2);
+    color: var(--color-muted-foreground);
+    text-align: start;
+  }
+  .nuv-chart__table th,
+  .nuv-chart__table td {
+    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
+    border-block-end: var(--nuv-border-width) solid var(--nuv-chart-table-border, var(--color-border));
+  }
+  .nuv-chart__table th {
+    font-weight: var(--font-weight-medium);
+  }
+  .nuv-chart__table th:first-child {
+    text-align: start;
+  }
+  .nuv-chart__data--hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    border: 0;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  /* stylelint-disable selector-class-pattern, selector-max-compound-selectors */
+  .nuv-chart .recharts-surface {
+    overflow: visible;
+    border-radius: var(--radius-sm);
+    outline: none;
+  }
+  .nuv-chart .recharts-surface:focus-visible {
+    outline: var(--nuv-focus-ring-width, 2px) solid var(--nuv-focus-ring-color, var(--color-ring));
+    outline-offset: var(--nuv-focus-ring-offset, 2px);
+  }
+  .nuv-chart .recharts-layer,
+  .nuv-chart .recharts-sector {
+    outline: none;
+  }
+  .nuv-chart .recharts-text {
+    fill: currentcolor;
+  }
+  .nuv-chart .recharts-label {
+    fill: var(--nuv-chart-label-fg, var(--color-foreground));
+  }
+  .nuv-chart .recharts-cartesian-grid line,
+  .nuv-chart .recharts-polar-grid line,
+  .nuv-chart .recharts-polar-grid-concentric-polygon,
+  .nuv-chart .recharts-polar-grid-concentric-circle {
+    stroke: var(--nuv-chart-grid, var(--color-border));
+  }
+  .nuv-chart .recharts-cartesian-axis-line,
+  .nuv-chart .recharts-cartesian-axis-tick-line,
+  .nuv-chart .recharts-polar-angle-axis-tick-line,
+  .nuv-chart .recharts-polar-radius-axis-line,
+  .nuv-chart .recharts-polar-radius-axis-tick-line,
+  .nuv-chart .recharts-reference-line-line {
+    stroke: var(--nuv-chart-axis, var(--color-border-strong));
+  }
+  .nuv-chart .recharts-curve.recharts-tooltip-cursor {
+    stroke: var(--nuv-chart-cursor, var(--color-border-strong));
+  }
+  .nuv-chart .recharts-rectangle.recharts-tooltip-cursor,
+  .nuv-chart .recharts-sector.recharts-tooltip-cursor,
+  .nuv-chart .recharts-radial-bar-background-sector {
+    fill: var(--nuv-chart-cursor, var(--color-muted));
+  }
+  .nuv-chart .recharts-sector[stroke="#fff"],
+  .nuv-chart .recharts-dot[stroke="#fff"],
+  .nuv-chart .recharts-active-dot [stroke="#fff"] {
+    stroke: var(--nuv-chart-backdrop, var(--color-background));
+  }
+  .nuv-chart .recharts-dot[fill="#fff"] {
+    fill: var(--nuv-chart-backdrop, var(--color-background));
+  }
+  .nuv-chart .recharts-tooltip-wrapper {
+    z-index: var(--nuv-z-popover);
+  }
+  /* stylelint-enable selector-class-pattern, selector-max-compound-selectors */
+}