@keboola/design 4.4.0 → 5.0.0

package/dist/charts.d.cts

@@ -0,0 +1,181 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactElement } from 'react';
+import { Tooltip } from 'recharts';
+
+/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `"NN%"`. */
+type ChartDimension = number | `${number}%`;
+type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {
+    /**
+     * Height as a px number or percentage string. Charts have no intrinsic
+     * height, so a container needs one either here or from a sized ancestor.
+     * Defaults to 300.
+     */
+    height?: ChartDimension;
+    /** Width as a px number or percentage. Defaults to `"100%"` (fills parent). */
+    width?: ChartDimension;
+    /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */
+    children: ReactElement;
+};
+/**
+ * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'
+ * `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,
+ * grid, cursor) through CSS so every chart inside inherits it. Sizing is
+ * intrinsic: give it a `height` (default 300) and it fills the parent width.
+ */
+declare const ChartContainer: ({ height, width, className, children, ...props }: ChartContainerProps) => react_jsx_runtime.JSX.Element;
+
+type TooltipPayloadEntry = {
+    name?: string | number;
+    value?: string | number;
+    color?: string;
+    dataKey?: string | number;
+};
+type ChartTooltipContentProps = {
+    active?: boolean;
+    label?: string | number;
+    payload?: TooltipPayloadEntry[];
+    /** Format a value for display (e.g. currency, percentage). */
+    valueFormatter?: (value: string | number, name: string) => string;
+    className?: string;
+};
+/**
+ * Brand-themed tooltip body. Surfaces (background, border, text) resolve from
+ * semantic tokens, and each series swatch reuses the recharts-provided series
+ * `color` (already a `--color-chart-*` token from this package's charts).
+ */
+declare const ChartTooltipContent: ({ active, label, payload, valueFormatter, className, }: ChartTooltipContentProps) => react_jsx_runtime.JSX.Element | null;
+type ChartTooltipProps = ComponentProps<typeof Tooltip> & {
+    valueFormatter?: (value: string | number, name: string) => string;
+};
+/**
+ * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.
+ * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.
+ */
+declare const ChartTooltip: ({ valueFormatter, ...props }: ChartTooltipProps) => react_jsx_runtime.JSX.Element;
+
+/** Number of the semantic chart token (`1`–`5`) a series maps to. */
+type ChartColorToken = 1 | 2 | 3 | 4 | 5;
+/**
+ * The CSS color for a chart token. `index` is 0-based (series position); it
+ * wraps around the five-slot palette so any number of series stays on-brand.
+ */
+declare const chartTokenColor: (index: number) => string;
+
+/** A single row of chart data — an object keyed by the axis + series keys. */
+type ChartDatum = Record<string, string | number | null | undefined>;
+/**
+ * One plotted series (a line, bar, or area). Its color comes from the semantic
+ * chart palette: by series order, or pinned to a specific token via `color`.
+ */
+type ChartSeries = {
+    /** Key into each datum for this series' value. */
+    dataKey: string;
+    /** Human label for legend/tooltip. Defaults to `dataKey`. */
+    name?: string;
+    /** Pin to a specific palette token (1–5). Defaults to the series position. */
+    color?: ChartColorToken;
+};
+/** Props shared by the cartesian charts (line / bar / area). */
+type CartesianChartProps = {
+    /** The rows to plot. */
+    data: ChartDatum[];
+    /** Key into each datum for the category (x) axis. */
+    xKey: string;
+    /** Series to plot. */
+    series: ChartSeries[];
+    /** Height as a px number or percentage. Defaults to 300. */
+    height?: ChartDimension;
+    /** Width as a px number or percentage. Defaults to `"100%"`. */
+    width?: ChartDimension;
+    /** Show the cartesian background grid. Defaults to `true`. */
+    showGrid?: boolean;
+    /** Show the value (y) axis. Defaults to `true`. */
+    showYAxis?: boolean;
+    /** Show a legend below the chart. Defaults to `false`. */
+    showLegend?: boolean;
+    /** Show the hover tooltip. Defaults to `true`. */
+    showTooltip?: boolean;
+    /** Format a series value for the axis and tooltip. */
+    valueFormatter?: (value: number) => string;
+    className?: string;
+};
+
+/**
+ * A themed multi-series line chart. Each series' color comes from the semantic
+ * `--color-chart-*` palette (by order, or pinned via `series[].color`), which
+ * follows the active color scheme and the active brand's `colors.chart` when it
+ * defines one. Wrap-free — mounts its own {@link ChartContainer}.
+ *
+ * @example
+ * <LineChart
+ *   data={data}
+ *   xKey="month"
+ *   series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}
+ * />
+ */
+declare const LineChart: ({ data, xKey, series, height, width, className, ...chrome }: CartesianChartProps) => react_jsx_runtime.JSX.Element;
+
+type BarChartProps = CartesianChartProps & {
+    /** Stack the series into a single bar per category. Defaults to grouped. */
+    stacked?: boolean;
+};
+/**
+ * A themed multi-series bar chart. Series colors come from the semantic
+ * `--color-chart-*` palette (by order, or pinned via `series[].color`), which
+ * follows the active color scheme and the active brand's `colors.chart` when it
+ * defines one. Pass `stacked` to stack the series instead of grouping them.
+ *
+ * @example
+ * <BarChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
+ */
+declare const BarChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: BarChartProps) => react_jsx_runtime.JSX.Element;
+
+type AreaChartProps = CartesianChartProps & {
+    /** Stack the series into a cumulative area. Defaults to overlaid. */
+    stacked?: boolean;
+};
+/**
+ * A themed multi-series area chart. Each series is stroked and softly filled
+ * from the semantic `--color-chart-*` palette (by order, or pinned via
+ * `series[].color`), which follows the active color scheme and the active
+ * brand's `colors.chart` when it defines one. Pass `stacked` to stack the
+ * series cumulatively.
+ *
+ * @example
+ * <AreaChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
+ */
+declare const AreaChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: AreaChartProps) => react_jsx_runtime.JSX.Element;
+
+type PieChartProps = {
+    /** The rows to plot — one sector per row. */
+    data: ChartDatum[];
+    /** Key into each datum for the sector label. */
+    nameKey: string;
+    /** Key into each datum for the sector value. */
+    dataKey: string;
+    /** Render as a donut with a hole of this inner radius (px or %). */
+    innerRadius?: ChartDimension;
+    /** Height as a px number or percentage. Defaults to 300. */
+    height?: ChartDimension;
+    /** Width as a px number or percentage. Defaults to `"100%"`. */
+    width?: ChartDimension;
+    /** Show a legend below the chart. Defaults to `true`. */
+    showLegend?: boolean;
+    /** Show the hover tooltip. Defaults to `true`. */
+    showTooltip?: boolean;
+    /** Format a sector value for the tooltip. */
+    valueFormatter?: (value: number) => string;
+    className?: string;
+};
+/**
+ * A themed pie / donut chart. Each sector cycles through the semantic
+ * `--color-chart-*` palette, which follows the active color scheme and the
+ * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make
+ * a donut.
+ *
+ * @example
+ * <PieChart data={data} nameKey="engine" dataKey="rows" innerRadius="60%" />
+ */
+declare const PieChart: ({ data, nameKey, dataKey, innerRadius, height, width, className, showLegend, showTooltip, valueFormatter, }: PieChartProps) => react_jsx_runtime.JSX.Element;
+
+export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, type CartesianChartProps, type ChartColorToken, ChartContainer, type ChartContainerProps, type ChartDatum, type ChartDimension, type ChartSeries, ChartTooltip, ChartTooltipContent, type ChartTooltipProps, LineChart, PieChart, type PieChartProps, chartTokenColor };

package/dist/charts.d.ts

@@ -0,0 +1,181 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactElement } from 'react';
+import { Tooltip } from 'recharts';
+
+/** A length that recharts' `<ResponsiveContainer>` accepts: px number or `"NN%"`. */
+type ChartDimension = number | `${number}%`;
+type ChartContainerProps = Omit<ComponentProps<'div'>, 'children'> & {
+    /**
+     * Height as a px number or percentage string. Charts have no intrinsic
+     * height, so a container needs one either here or from a sized ancestor.
+     * Defaults to 300.
+     */
+    height?: ChartDimension;
+    /** Width as a px number or percentage. Defaults to `"100%"` (fills parent). */
+    width?: ChartDimension;
+    /** A single recharts chart element (`<LineChart>`, `<BarChart>`, …). */
+    children: ReactElement;
+};
+/**
+ * Responsive, brand-themed frame for a chart. Wraps the chart in recharts'
+ * `<ResponsiveContainer>` and applies the semantic-token chrome (axis text,
+ * grid, cursor) through CSS so every chart inside inherits it. Sizing is
+ * intrinsic: give it a `height` (default 300) and it fills the parent width.
+ */
+declare const ChartContainer: ({ height, width, className, children, ...props }: ChartContainerProps) => react_jsx_runtime.JSX.Element;
+
+type TooltipPayloadEntry = {
+    name?: string | number;
+    value?: string | number;
+    color?: string;
+    dataKey?: string | number;
+};
+type ChartTooltipContentProps = {
+    active?: boolean;
+    label?: string | number;
+    payload?: TooltipPayloadEntry[];
+    /** Format a value for display (e.g. currency, percentage). */
+    valueFormatter?: (value: string | number, name: string) => string;
+    className?: string;
+};
+/**
+ * Brand-themed tooltip body. Surfaces (background, border, text) resolve from
+ * semantic tokens, and each series swatch reuses the recharts-provided series
+ * `color` (already a `--color-chart-*` token from this package's charts).
+ */
+declare const ChartTooltipContent: ({ active, label, payload, valueFormatter, className, }: ChartTooltipContentProps) => react_jsx_runtime.JSX.Element | null;
+type ChartTooltipProps = ComponentProps<typeof Tooltip> & {
+    valueFormatter?: (value: string | number, name: string) => string;
+};
+/**
+ * Drop-in recharts `<Tooltip>` pre-wired to render {@link ChartTooltipContent}.
+ * Each chart mounts one by default; pass `showTooltip={false}` on the chart to omit.
+ */
+declare const ChartTooltip: ({ valueFormatter, ...props }: ChartTooltipProps) => react_jsx_runtime.JSX.Element;
+
+/** Number of the semantic chart token (`1`–`5`) a series maps to. */
+type ChartColorToken = 1 | 2 | 3 | 4 | 5;
+/**
+ * The CSS color for a chart token. `index` is 0-based (series position); it
+ * wraps around the five-slot palette so any number of series stays on-brand.
+ */
+declare const chartTokenColor: (index: number) => string;
+
+/** A single row of chart data — an object keyed by the axis + series keys. */
+type ChartDatum = Record<string, string | number | null | undefined>;
+/**
+ * One plotted series (a line, bar, or area). Its color comes from the semantic
+ * chart palette: by series order, or pinned to a specific token via `color`.
+ */
+type ChartSeries = {
+    /** Key into each datum for this series' value. */
+    dataKey: string;
+    /** Human label for legend/tooltip. Defaults to `dataKey`. */
+    name?: string;
+    /** Pin to a specific palette token (1–5). Defaults to the series position. */
+    color?: ChartColorToken;
+};
+/** Props shared by the cartesian charts (line / bar / area). */
+type CartesianChartProps = {
+    /** The rows to plot. */
+    data: ChartDatum[];
+    /** Key into each datum for the category (x) axis. */
+    xKey: string;
+    /** Series to plot. */
+    series: ChartSeries[];
+    /** Height as a px number or percentage. Defaults to 300. */
+    height?: ChartDimension;
+    /** Width as a px number or percentage. Defaults to `"100%"`. */
+    width?: ChartDimension;
+    /** Show the cartesian background grid. Defaults to `true`. */
+    showGrid?: boolean;
+    /** Show the value (y) axis. Defaults to `true`. */
+    showYAxis?: boolean;
+    /** Show a legend below the chart. Defaults to `false`. */
+    showLegend?: boolean;
+    /** Show the hover tooltip. Defaults to `true`. */
+    showTooltip?: boolean;
+    /** Format a series value for the axis and tooltip. */
+    valueFormatter?: (value: number) => string;
+    className?: string;
+};
+
+/**
+ * A themed multi-series line chart. Each series' color comes from the semantic
+ * `--color-chart-*` palette (by order, or pinned via `series[].color`), which
+ * follows the active color scheme and the active brand's `colors.chart` when it
+ * defines one. Wrap-free — mounts its own {@link ChartContainer}.
+ *
+ * @example
+ * <LineChart
+ *   data={data}
+ *   xKey="month"
+ *   series={[{ dataKey: 'revenue', name: 'Revenue' }, { dataKey: 'cost' }]}
+ * />
+ */
+declare const LineChart: ({ data, xKey, series, height, width, className, ...chrome }: CartesianChartProps) => react_jsx_runtime.JSX.Element;
+
+type BarChartProps = CartesianChartProps & {
+    /** Stack the series into a single bar per category. Defaults to grouped. */
+    stacked?: boolean;
+};
+/**
+ * A themed multi-series bar chart. Series colors come from the semantic
+ * `--color-chart-*` palette (by order, or pinned via `series[].color`), which
+ * follows the active color scheme and the active brand's `colors.chart` when it
+ * defines one. Pass `stacked` to stack the series instead of grouping them.
+ *
+ * @example
+ * <BarChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
+ */
+declare const BarChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: BarChartProps) => react_jsx_runtime.JSX.Element;
+
+type AreaChartProps = CartesianChartProps & {
+    /** Stack the series into a cumulative area. Defaults to overlaid. */
+    stacked?: boolean;
+};
+/**
+ * A themed multi-series area chart. Each series is stroked and softly filled
+ * from the semantic `--color-chart-*` palette (by order, or pinned via
+ * `series[].color`), which follows the active color scheme and the active
+ * brand's `colors.chart` when it defines one. Pass `stacked` to stack the
+ * series cumulatively.
+ *
+ * @example
+ * <AreaChart data={data} xKey="month" series={[{ dataKey: 'revenue' }]} />
+ */
+declare const AreaChart: ({ data, xKey, series, height, width, className, stacked, ...chrome }: AreaChartProps) => react_jsx_runtime.JSX.Element;
+
+type PieChartProps = {
+    /** The rows to plot — one sector per row. */
+    data: ChartDatum[];
+    /** Key into each datum for the sector label. */
+    nameKey: string;
+    /** Key into each datum for the sector value. */
+    dataKey: string;
+    /** Render as a donut with a hole of this inner radius (px or %). */
+    innerRadius?: ChartDimension;
+    /** Height as a px number or percentage. Defaults to 300. */
+    height?: ChartDimension;
+    /** Width as a px number or percentage. Defaults to `"100%"`. */
+    width?: ChartDimension;
+    /** Show a legend below the chart. Defaults to `true`. */
+    showLegend?: boolean;
+    /** Show the hover tooltip. Defaults to `true`. */
+    showTooltip?: boolean;
+    /** Format a sector value for the tooltip. */
+    valueFormatter?: (value: number) => string;
+    className?: string;
+};
+/**
+ * A themed pie / donut chart. Each sector cycles through the semantic
+ * `--color-chart-*` palette, which follows the active color scheme and the
+ * active brand's `colors.chart` when it defines one. Pass `innerRadius` to make
+ * a donut.
+ *
+ * @example
+ * <PieChart data={data} nameKey="engine" dataKey="rows" innerRadius="60%" />
+ */
+declare const PieChart: ({ data, nameKey, dataKey, innerRadius, height, width, className, showLegend, showTooltip, valueFormatter, }: PieChartProps) => react_jsx_runtime.JSX.Element;
+
+export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, type CartesianChartProps, type ChartColorToken, ChartContainer, type ChartContainerProps, type ChartDatum, type ChartDimension, type ChartSeries, ChartTooltip, ChartTooltipContent, type ChartTooltipProps, LineChart, PieChart, type PieChartProps, chartTokenColor };

package/dist/charts.js

@@ -0,0 +1,259 @@
+import { ResponsiveContainer, Tooltip, LineChart as LineChart$1, Line, BarChart as BarChart$1, Bar, AreaChart as AreaChart$1, Area, PieChart as PieChart$1, Legend, Pie, Cell, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/blocks/Charts/ChartContainer.tsx
+var twMerge = extendTailwindMerge({
+  prefix: "tw-"
+});
+var cn = (...classes) => twMerge(clsx(...classes));
+var ChartContainer = ({
+  height = 300,
+  width = "100%",
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "tw-text-xs",
+      // Axis ticks and labels follow the muted foreground token.
+      "[&_.recharts-cartesian-axis-tick_text]:tw-fill-muted-foreground",
+      "[&_.recharts-polar-angle-axis-tick_text]:tw-fill-muted-foreground",
+      "[&_.recharts-label]:tw-fill-muted-foreground",
+      "[&_.recharts-legend-item-text]:!tw-text-muted-foreground",
+      // Grid lines, axis lines and the hover cursor follow the border token.
+      "[&_.recharts-cartesian-grid_line]:tw-stroke-border/60",
+      "[&_.recharts-cartesian-axis-line]:tw-stroke-border",
+      "[&_.recharts-cartesian-axis-tick-line]:tw-stroke-border",
+      "[&_.recharts-curve.recharts-tooltip-cursor]:tw-stroke-border",
+      "[&_.recharts-rectangle.recharts-tooltip-cursor]:tw-fill-muted/60",
+      "[&_.recharts-surface]:tw-outline-none",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children })
+  }
+);
+var ChartTooltipContent = ({
+  active,
+  label,
+  payload,
+  valueFormatter,
+  className
+}) => {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "tw-min-w-32 tw-rounded-md tw-border tw-border-border tw-bg-popover tw-px-2.5 tw-py-1.5 tw-text-xs tw-text-popover-foreground tw-shadow-md",
+        className
+      ),
+      children: [
+        label != null && /* @__PURE__ */ jsx("div", { className: "tw-mb-1 tw-font-medium", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "tw-flex tw-flex-col tw-gap-1", children: payload.map((entry) => {
+          const name = String(entry.name ?? entry.dataKey ?? "");
+          const value = entry.value;
+          const hasNumber = value != null && value !== "" && Number.isFinite(Number(value));
+          const display = hasNumber ? valueFormatter ? valueFormatter(Number(value), name) : String(Number(value)) : value ?? "";
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "tw-flex tw-items-center tw-justify-between tw-gap-3",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "tw-flex tw-items-center tw-gap-1.5", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "tw-size-2 tw-shrink-0 tw-rounded-[2px]",
+                      style: { backgroundColor: entry.color }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "tw-text-muted-foreground", children: name })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "tw-font-medium tw-tabular-nums", children: display })
+              ]
+            },
+            String(entry.dataKey ?? name)
+          );
+        }) })
+      ]
+    }
+  );
+};
+var ChartTooltip = ({ valueFormatter, ...props }) => /* @__PURE__ */ jsx(
+  Tooltip,
+  {
+    cursor: { strokeWidth: 1 },
+    content: /* @__PURE__ */ jsx(ChartTooltipContent, { valueFormatter }),
+    ...props
+  }
+);
+
+// src/blocks/Charts/format.ts
+var formatValue = (value, valueFormatter) => {
+  if (value == null || value === "") return "";
+  const num = Number(value);
+  if (!Number.isFinite(num)) return "";
+  return valueFormatter ? valueFormatter(num) : String(num);
+};
+var AXIS_PROPS = {
+  tickLine: false,
+  axisLine: false,
+  tick: { fontSize: 11 }
+};
+var cartesianChrome = ({
+  xKey,
+  showGrid = true,
+  showYAxis = true,
+  showLegend = false,
+  showTooltip = true,
+  valueFormatter
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  showGrid && /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false }),
+  /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS_PROPS }),
+  showYAxis && /* @__PURE__ */ jsx(
+    YAxis,
+    {
+      width: 48,
+      ...AXIS_PROPS,
+      tickFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
+    }
+  ),
+  showTooltip && /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      valueFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
+    }
+  ),
+  showLegend && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 11 } })
+] });
+
+// src/blocks/Charts/theme.ts
+var CHART_TOKEN_COUNT = 5;
+var chartTokenColor = (index) => {
+  const slot = (index % CHART_TOKEN_COUNT + CHART_TOKEN_COUNT) % CHART_TOKEN_COUNT + 1;
+  return `rgb(var(--color-chart-${slot}))`;
+};
+var resolveSeriesColor = (index, token) => chartTokenColor(token ? token - 1 : index);
+var LineChart = ({
+  data,
+  xKey,
+  series,
+  height,
+  width,
+  className,
+  ...chrome
+}) => /* @__PURE__ */ jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
+  cartesianChrome({ xKey, ...chrome }),
+  series.map((s, index) => {
+    const color = resolveSeriesColor(index, s.color);
+    return /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: "monotone",
+        dataKey: s.dataKey,
+        name: s.name ?? s.dataKey,
+        stroke: color,
+        strokeWidth: 2,
+        dot: { r: 3, fill: color, stroke: color },
+        activeDot: { r: 4 },
+        isAnimationActive: false
+      },
+      s.dataKey
+    );
+  })
+] }) });
+var BarChart = ({
+  data,
+  xKey,
+  series,
+  height,
+  width,
+  className,
+  stacked = false,
+  ...chrome
+}) => /* @__PURE__ */ jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxs(BarChart$1, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
+  cartesianChrome({ xKey, ...chrome }),
+  series.map((s, index) => /* @__PURE__ */ jsx(
+    Bar,
+    {
+      dataKey: s.dataKey,
+      name: s.name ?? s.dataKey,
+      fill: resolveSeriesColor(index, s.color),
+      radius: stacked ? 0 : [4, 4, 0, 0],
+      stackId: stacked ? "stack" : void 0,
+      isAnimationActive: false
+    },
+    s.dataKey
+  ))
+] }) });
+var AreaChart = ({
+  data,
+  xKey,
+  series,
+  height,
+  width,
+  className,
+  stacked = false,
+  ...chrome
+}) => /* @__PURE__ */ jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin: { top: 8, right: 8, left: 0, bottom: 0 }, children: [
+  cartesianChrome({ xKey, ...chrome }),
+  series.map((s, index) => {
+    const color = resolveSeriesColor(index, s.color);
+    return /* @__PURE__ */ jsx(
+      Area,
+      {
+        type: "monotone",
+        dataKey: s.dataKey,
+        name: s.name ?? s.dataKey,
+        stroke: color,
+        fill: color,
+        fillOpacity: 0.15,
+        strokeWidth: 2,
+        stackId: stacked ? "stack" : void 0,
+        isAnimationActive: false
+      },
+      s.dataKey
+    );
+  })
+] }) });
+var PieChart = ({
+  data,
+  nameKey,
+  dataKey,
+  innerRadius = 0,
+  height,
+  width,
+  className,
+  showLegend = true,
+  showTooltip = true,
+  valueFormatter
+}) => /* @__PURE__ */ jsx(ChartContainer, { height, width, className, children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
+  showTooltip && /* @__PURE__ */ jsx(
+    ChartTooltip,
+    {
+      valueFormatter: valueFormatter ? (value) => formatValue(value, valueFormatter) : void 0
+    }
+  ),
+  showLegend && /* @__PURE__ */ jsx(Legend, { wrapperStyle: { fontSize: 11 } }),
+  /* @__PURE__ */ jsx(
+    Pie,
+    {
+      data,
+      nameKey,
+      dataKey,
+      innerRadius,
+      stroke: "rgb(var(--color-background))",
+      isAnimationActive: false,
+      children: data.map((datum, index) => /* @__PURE__ */ jsx(Cell, { fill: chartTokenColor(index) }, String(datum[nameKey] ?? index)))
+    }
+  )
+] }) });
+
+export { AreaChart, BarChart, ChartContainer, ChartTooltip, ChartTooltipContent, LineChart, PieChart, chartTokenColor };
+//# sourceMappingURL=charts.js.map
+//# sourceMappingURL=charts.js.map