cortena-ui 0.1.0 → 1.0.0

package/src/components/chart/chart.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/cn";
+import { ChartContainer, ChartEmpty, ChartError, ChartLoading, type ChartContainerProps } from "./container";
+import { configFor, isEmptyData, isSeriesArray, toRows, toSlices } from "./data";
+import { NivoChart, type NivoType } from "./nivo-charts";
+import { RechartsChart, type RechartsType } from "./recharts-charts";
+import {
+  chartEngine,
+  type ChartConfig,
+  type ChartDataFor,
+  type ChartRenderer,
+  type ChartRow,
+  type ChartScale,
+  type ChartSeries,
+  type ChartSlice,
+  type ChartTree,
+  type ChartType,
+} from "./types";
+
+export interface ChartProps<T extends ChartType = ChartType>
+  extends Omit<ChartContainerProps, "children" | "config" | "responsive"> {
+  /** Which chart to draw; the package picks the engine. See {@link ChartType} for the data shape per type. */
+  type: T;
+  /** The data, in the shape documented on {@link ChartType}. */
+  data: ChartDataFor<T>;
+  /** Series presentation keyed by series id; colours default to `--ds-viz-1..n` in order. */
+  config?: ChartConfig;
+  /** Nivo renderer; `canvas` for large series. Ignored by the Recharts types and by sunburst. */
+  renderer?: ChartRenderer;
+  /** Category key for row data (bar, line, area, radar); inferred as the first string field. */
+  indexBy?: string;
+  /** Series keys for row data; inferred as every numeric field. */
+  keys?: string[];
+  /** Stack bars and areas instead of grouping them. */
+  stacked?: boolean;
+  /** Continuous scale for heatmap and calendar. Default sequential. */
+  scale?: ChartScale;
+  /** Show a legend. Default: when there is more than one series. */
+  legend?: boolean;
+  /** Draw grid lines (cartesian and radar types). Default true. */
+  grid?: boolean;
+  /** Show a tooltip on hover. Default true. */
+  tooltip?: boolean;
+  /** Format values in axes, tooltips and labels. */
+  valueFormatter?: (value: number) => string;
+  /** Calendar range (ISO dates); defaults to the data's extent. */
+  from?: string;
+  to?: string;
+  /** Render the loading skeleton instead of the data. */
+  loading?: boolean;
+  /** Render the error state with this message instead of the data. */
+  error?: React.ReactNode | Error | null;
+  /** Content of the empty state. Default "No data". */
+  emptyMessage?: React.ReactNode;
+}
+
+function seriesKeys(type: ChartType, data: unknown, indexBy?: string, keys?: string[]): string[] {
+  switch (type) {
+    case "bar":
+    case "line":
+    case "area":
+    case "radar":
+      return toRows(data as ChartRow[] | ChartSeries[], indexBy, keys).keys;
+    case "pie":
+    case "donut":
+    case "funnel":
+      return toSlices(data as ChartSlice[]).map((s) => s.id);
+    case "scatter":
+    case "scatterplot":
+    case "heatmap":
+      return isSeriesArray(data) ? data.map((s) => String(s.id)) : [];
+    case "treemap":
+    case "sunburst":
+      return ((data as ChartTree).children ?? []).map((c) => String(c.id ?? c.name ?? ""));
+    case "calendar":
+      return [];
+  }
+}
+
+class ChunkBoundary extends React.Component<
+  { children: React.ReactNode; fallback: React.ReactNode },
+  { failed: boolean }
+> {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+}
+
+/**
+ * Chart — one component for every chart type the fleet draws.
+ *
+ * `type` picks the engine: Recharts (bundled) for bar, line, area, pie, donut,
+ * scatter, radar and funnel; Nivo, lazy-loaded per package, for heatmap,
+ * calendar, treemap and sunburst, with `renderer="canvas"` for large series.
+ * Colours, fonts, axes, grid, tooltip, legend and the empty, loading and
+ * error states all come from cortena-design tokens; a consumer passes data
+ * and, optionally, a `config` of labels.
+ */
+function Chart<T extends ChartType>({
+  type,
+  data,
+  config,
+  renderer = "svg",
+  indexBy,
+  keys,
+  stacked,
+  scale = "sequential",
+  legend,
+  grid = true,
+  tooltip = true,
+  valueFormatter,
+  from,
+  to,
+  loading,
+  error,
+  emptyMessage,
+  className,
+  height,
+  ...props
+}: ChartProps<T>) {
+  const engine = chartEngine(type);
+  const empty = isEmptyData(data);
+  const fullConfig = React.useMemo(
+    () => configFor(empty ? [] : seriesKeys(type, data, indexBy, keys), config),
+    [type, data, indexBy, keys, config, empty],
+  );
+  const showLegend = legend ?? Object.keys(fullConfig).length > 1;
+  const errorText = error instanceof Error ? error.message : error;
+
+  let body: React.ReactNode;
+  let responsive = false;
+  if (loading) body = <ChartLoading />;
+  else if (errorText) body = <ChartError>{errorText}</ChartError>;
+  else if (empty) body = <ChartEmpty>{emptyMessage}</ChartEmpty>;
+  else if (engine === "nivo") {
+    body = (
+      <ChunkBoundary fallback={<ChartError>Chart could not be loaded</ChartError>}>
+        <React.Suspense fallback={<ChartLoading />}>
+          <NivoChart
+            type={type as NivoType}
+            data={data}
+            config={fullConfig}
+            renderer={renderer}
+            scale={scale}
+            legend={showLegend}
+            valueFormatter={valueFormatter}
+            from={from}
+            to={to}
+          />
+        </React.Suspense>
+      </ChunkBoundary>
+    );
+  } else {
+    responsive = true;
+    body = (
+      <RechartsChart
+        type={type as RechartsType}
+        data={data}
+        config={fullConfig}
+        indexBy={indexBy}
+        keys={keys}
+        stacked={stacked}
+        legend={showLegend}
+        grid={grid}
+        tooltip={tooltip}
+        valueFormatter={valueFormatter}
+      />
+    );
+  }
+
+  return (
+    <ChartContainer
+      data-type={type}
+      data-engine={engine}
+      data-renderer={engine === "nivo" ? renderer : "svg"}
+      config={fullConfig}
+      height={height}
+      responsive={responsive}
+      className={cn(className)}
+      {...props}
+    >
+      {body}
+    </ChartContainer>
+  );
+}
+
+export { Chart };

package/src/components/chart/container.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import * as React from "react";
+import {
+  Legend as RechartsLegend,
+  ResponsiveContainer,
+  Tooltip as RechartsTooltip,
+  type LegendPayload,
+  type LegendProps,
+  type TooltipContentProps,
+  type TooltipProps,
+} from "recharts";
+import { cn } from "@/lib/cn";
+import { Skeleton } from "@/components/skeleton";
+import { vizVar } from "./tokens";
+import type { ChartConfig } from "./types";
+
+/* ── context ─────────────────────────────────────────────────────────────── */
+
+interface ChartContextValue {
+  config: ChartConfig;
+  /** The container element, so token resolution can honour a nested theme scope. */
+  element: HTMLDivElement | null;
+}
+
+const ChartContext = React.createContext<ChartContextValue | null>(null);
+
+/** The nearest ChartContainer's config and element; null outside one. */
+export function useChart(): ChartContextValue | null {
+  return React.useContext(ChartContext);
+}
+
+/**
+ * Resolve the colour a series key paints with: `config[key].color` when set,
+ * otherwise `var(--ds-viz-N)` by the key's position in the config (or the
+ * `index` given). Recharts consumers reference it as `var(--color-<key>)`,
+ * which ChartContainer defines on its element.
+ */
+export function seriesColor(config: ChartConfig | undefined, key: string, index?: number): string {
+  const entry = config?.[key];
+  if (entry?.color) return entry.color;
+  const keys = config ? Object.keys(config) : [];
+  const position = keys.indexOf(key);
+  return vizVar(position >= 0 ? position : (index ?? 0));
+}
+
+/* ── container ───────────────────────────────────────────────────────────── */
+
+export interface ChartContainerProps extends Omit<React.ComponentProps<"div">, "children"> {
+  /** Series presentation; colours default to `--ds-viz-1..n` in key order. */
+  config?: ChartConfig;
+  /** Height of the drawing area; width is always 100% of the parent. Default 300. */
+  height?: number | string;
+  /**
+   * Wrap children in Recharts' ResponsiveContainer (default). Nivo's
+   * `Responsive*` components size themselves, so the Nivo renderers pass
+   * `responsive={false}`.
+   */
+  responsive?: boolean;
+  children: React.ReactNode;
+}
+
+/**
+ * ChartContainer — the sized, token-styled surface every chart draws in.
+ *
+ * It defines `--color-<key>` for each config key (so Recharts parts can say
+ * `fill="var(--color-revenue)"`) and styles Recharts' axis, grid, tick and
+ * cursor classes from tokens with a caption-sm floor for text, so a custom
+ * chart composed inside it needs no local colours or fonts.
+ */
+function ChartContainer({
+  config = {},
+  height = 300,
+  responsive = true,
+  className,
+  style,
+  children,
+  ...props
+}: ChartContainerProps) {
+  const [element, setElement] = React.useState<HTMLDivElement | null>(null);
+  const vars = React.useMemo(() => {
+    const out: Record<string, string> = {};
+    for (const key of Object.keys(config)) out[`--color-${key}`] = seriesColor(config, key);
+    return out;
+  }, [config]);
+  const ctx = React.useMemo(() => ({ config, element }), [config, element]);
+
+  return (
+    <ChartContext.Provider value={ctx}>
+      <div
+        ref={setElement}
+        data-slot="chart"
+        className={cn(
+          "relative w-full min-w-0 overflow-hidden text-[length:var(--ds-text-caption-sm)] text-[color:var(--ds-foreground)]",
+          responsive ? "flex justify-center" : "block [&>div]:h-full [&>div]:w-full",
+          "[&_.recharts-cartesian-axis-tick-value]:fill-[var(--ds-muted-foreground)]",
+          "[&_.recharts-polar-angle-axis-tick-value]:fill-[var(--ds-muted-foreground)]",
+          "[&_.recharts-polar-radius-axis-tick-value]:fill-[var(--ds-muted-foreground)]",
+          "[&_.recharts-cartesian-grid-horizontal_line]:stroke-[var(--ds-border-subtle)]",
+          "[&_.recharts-cartesian-grid-vertical_line]:stroke-[var(--ds-border-subtle)]",
+          "[&_.recharts-polar-grid-angle_line]:stroke-[var(--ds-border-subtle)]",
+          "[&_.recharts-polar-grid-concentric-polygon]:stroke-[var(--ds-border-subtle)]",
+          "[&_.recharts-polar-grid-concentric-circle]:stroke-[var(--ds-border-subtle)]",
+          "[&_.recharts-cartesian-axis-line]:stroke-[var(--ds-border)]",
+          "[&_.recharts-cartesian-axis-tick-line]:stroke-[var(--ds-border)]",
+          "[&_.recharts-radial-bar-background-sector]:fill-[var(--ds-muted)]",
+          "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-[var(--ds-hover)]",
+          "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-[var(--ds-border-strong)]",
+          "[&_.recharts-reference-line_line]:stroke-[var(--ds-border-strong)]",
+          "[&_.recharts-pie-sector_.recharts-sector]:stroke-[var(--ds-card)]",
+          "[&_.recharts-funnel-trapezoid_.recharts-trapezoid]:stroke-[var(--ds-card)]",
+          "[&_.recharts-layer]:outline-hidden [&_.recharts-surface]:outline-hidden [&_.recharts-sector]:outline-hidden",
+          "[&_text]:font-[family-name:var(--ds-font-body)]",
+          className,
+        )}
+        style={{ height, ...vars, ...style } as React.CSSProperties}
+        {...props}
+      >
+        {responsive ? (
+          <ResponsiveContainer width="100%" height="100%">
+            {children as React.ReactElement}
+          </ResponsiveContainer>
+        ) : (
+          children
+        )}
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+/* ── states ──────────────────────────────────────────────────────────────── */
+
+function ChartState({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex h-full w-full items-center justify-center rounded-[var(--ds-radius-md)] border border-dashed border-[var(--ds-border-subtle)]",
+        "text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** "No data" placeholder; rendered by Chart when the data is empty. */
+function ChartEmpty({ children = "No data", ...props }: React.ComponentProps<"div">) {
+  return (
+    <ChartState data-slot="chart-empty" role="status" {...props}>
+      {children}
+    </ChartState>
+  );
+}
+
+/** Error placeholder; rendered by Chart for an `error` prop or a failed Nivo chunk. */
+function ChartError({ className, children = "Chart could not be rendered", ...props }: React.ComponentProps<"div">) {
+  return (
+    <ChartState
+      data-slot="chart-error"
+      role="alert"
+      className={cn("border-[var(--ds-destructive)] text-[color:var(--ds-destructive)]", className)}
+      {...props}
+    >
+      {children}
+    </ChartState>
+  );
+}
+
+/** Loading placeholder: a skeleton the size of the drawing area, shown while a Nivo chunk loads. */
+function ChartLoading({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="chart-loading" className={cn("h-full w-full", className)} {...props}>
+      <Skeleton className="h-full w-full rounded-[var(--ds-radius-md)]" />
+    </div>
+  );
+}
+
+/* ── tooltip ─────────────────────────────────────────────────────────────── */
+
+export interface ChartTooltipContentProps
+  extends Partial<Pick<TooltipContentProps, "active" | "payload" | "label">> {
+  className?: string;
+  /** Hide the series label column. */
+  hideLabel?: boolean;
+  /** Hide the colour swatch. */
+  hideIndicator?: boolean;
+  /** Format a value; defaults to `toLocaleString`. */
+  formatter?: (value: number | string, name: string) => React.ReactNode;
+  /** Format the header (the category). */
+  labelFormatter?: (label: React.ReactNode) => React.ReactNode;
+}
+
+function formatValue(value: unknown, formatter?: ChartTooltipContentProps["formatter"], name = ""): React.ReactNode {
+  if (formatter && (typeof value === "number" || typeof value === "string")) return formatter(value, name);
+  if (typeof value === "number") return value.toLocaleString();
+  if (value == null) return "";
+  return String(value);
+}
+
+/**
+ * ChartTooltipContent — the popover body for Recharts' Tooltip, styled like
+ * the package Tooltip on the popover tokens. Pass as `content` to
+ * ChartTooltip; reads series labels and colours from the ChartContainer config.
+ */
+function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  className,
+  hideLabel,
+  hideIndicator,
+  formatter,
+  labelFormatter,
+}: ChartTooltipContentProps) {
+  const chart = useChart();
+  if (!active || !payload?.length) return null;
+  const heading = labelFormatter ? labelFormatter(label) : label;
+  return (
+    <div
+      data-slot="chart-tooltip"
+      className={cn(
+        "grid min-w-32 gap-1.5 rounded-[var(--ds-radius-md)] border border-[var(--ds-border-subtle)] bg-[var(--ds-popover)] px-2.5 py-1.5",
+        "text-[length:var(--ds-text-caption)] text-[color:var(--ds-popover-foreground)] shadow-[var(--ds-shadow-md)]",
+        className,
+      )}
+    >
+      {!hideLabel && heading != null && heading !== "" ? (
+        <div className="font-medium">{heading}</div>
+      ) : null}
+      <div className="grid gap-1">
+        {payload.map((item, i) => {
+          const key = String(item.dataKey ?? item.name ?? i);
+          const entry = chart?.config[key];
+          const colour = item.color ?? item.fill ?? item.stroke ?? `var(--color-${key})`;
+          const name = entry?.label ?? item.name ?? key;
+          return (
+            <div key={key} className="flex items-center gap-2">
+              {hideIndicator ? null : (
+                <span
+                  aria-hidden
+                  data-slot="chart-tooltip-indicator"
+                  className="size-2 shrink-0 rounded-[var(--ds-radius-sm)]"
+                  style={{ background: colour }}
+                />
+              )}
+              <span className="flex-1 text-[color:var(--ds-muted-foreground)]">{name}</span>
+              <span className="font-[family-name:var(--ds-font-mono)] font-medium tabular-nums">
+                {formatValue(item.value, formatter, String(name))}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/** Recharts' Tooltip with the token-styled content and a subtle cursor. */
+function ChartTooltip(props: TooltipProps) {
+  return <RechartsTooltip content={<ChartTooltipContent />} {...props} />;
+}
+
+/* ── legend ──────────────────────────────────────────────────────────────── */
+
+export interface ChartLegendContentProps {
+  payload?: readonly LegendPayload[];
+  verticalAlign?: "top" | "bottom" | "middle";
+  className?: string;
+  hideIcon?: boolean;
+}
+
+/** ChartLegendContent — Recharts' legend on tokens; reads labels from the config. */
+function ChartLegendContent({ payload, verticalAlign = "bottom", className, hideIcon }: ChartLegendContentProps) {
+  const chart = useChart();
+  if (!payload?.length) return null;
+  return (
+    <div
+      data-slot="chart-legend"
+      className={cn(
+        "flex flex-wrap items-center justify-center gap-x-4 gap-y-1",
+        "text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className,
+      )}
+    >
+      {payload.map((item, i) => {
+        const key = String(item.dataKey ?? item.value ?? i);
+        const entry = chart?.config[key];
+        const Icon = entry?.icon;
+        return (
+          <div key={key} className="flex items-center gap-1.5">
+            {hideIcon ? null : Icon ? (
+              <Icon />
+            ) : (
+              <span
+                aria-hidden
+                className="size-2 shrink-0 rounded-[var(--ds-radius-sm)]"
+                style={{ background: item.color ?? `var(--color-${key})` }}
+              />
+            )}
+            {entry?.label ?? item.value}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Recharts' Legend with the token-styled content. */
+function ChartLegend(props: LegendProps) {
+  return <RechartsLegend content={<ChartLegendContent />} {...props} />;
+}
+
+export {
+  ChartContainer,
+  ChartContext,
+  ChartEmpty,
+  ChartError,
+  ChartLoading,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+};

package/src/components/chart/data.ts

@@ -0,0 +1,101 @@
+import type { ChartConfig, ChartRow, ChartSeries, ChartSlice, ChartTree } from "./types";
+
+/** True for the `{ id, data: [{ x, y }] }[]` series shape. */
+export function isSeriesArray(data: unknown): data is ChartSeries[] {
+  return (
+    Array.isArray(data) &&
+    data.length > 0 &&
+    data.every((d) => d && typeof d === "object" && Array.isArray((d as ChartSeries).data))
+  );
+}
+
+/**
+ * Infer the category key and the series keys of a row array the way the
+ * webchat renderer did: the first string field is the index, every numeric
+ * field is a series. Falls back to the first key when nothing is a string.
+ */
+export function inferRowKeys(rows: ChartRow[]): { indexBy: string | undefined; keys: string[] } {
+  const sample = rows[0];
+  if (!sample) return { indexBy: undefined, keys: [] };
+  let indexBy: string | undefined;
+  const keys: string[] = [];
+  for (const [key, value] of Object.entries(sample)) {
+    if (typeof value === "number") keys.push(key);
+    else if (!indexBy && typeof value === "string") indexBy = key;
+  }
+  if (!indexBy) indexBy = Object.keys(sample)[0];
+  return { indexBy, keys };
+}
+
+export interface RowData {
+  rows: ChartRow[];
+  indexBy: string;
+  keys: string[];
+}
+
+/**
+ * Normalise bar/line/area/radar data to rows. Series input is pivoted so each
+ * distinct x becomes a row and each series id a column; row input is used as
+ * given with inferred keys unless `indexBy`/`keys` are passed.
+ */
+export function toRows(data: ChartRow[] | ChartSeries[], indexBy?: string, keys?: string[]): RowData {
+  if (isSeriesArray(data)) {
+    const index = indexBy ?? "x";
+    const byX = new Map<string | number, ChartRow>();
+    const ids: string[] = [];
+    for (const series of data) {
+      const id = String(series.id);
+      ids.push(id);
+      for (const point of series.data) {
+        let row = byX.get(point.x);
+        if (!row) {
+          row = { [index]: point.x };
+          byX.set(point.x, row);
+        }
+        row[id] = point.y;
+      }
+    }
+    return { rows: [...byX.values()], indexBy: index, keys: keys ?? ids };
+  }
+  const rows = data as ChartRow[];
+  const inferred = inferRowKeys(rows);
+  return {
+    rows,
+    indexBy: indexBy ?? inferred.indexBy ?? "x",
+    keys: keys ?? inferred.keys,
+  };
+}
+
+/** Pie/donut/funnel slices as `{ name, value }` rows with the id preserved. */
+export function toSlices(data: ChartSlice[]): Array<{ id: string; name: string; value: number }> {
+  return data.map((d) => ({ id: String(d.id), name: d.label ?? String(d.id), value: d.value }));
+}
+
+/** Build a ChartConfig for the given keys, keeping any entries the caller set. */
+export function configFor(keys: string[], config?: ChartConfig): ChartConfig {
+  const out: ChartConfig = {};
+  for (const key of keys) out[key] = { label: key, ...config?.[key] };
+  // Keys the caller configured but the data lacks still get their colour slot.
+  for (const key of Object.keys(config ?? {})) if (!(key in out)) out[key] = config![key]!;
+  return out;
+}
+
+/** Whether a Nivo tree uses `name` rather than `id` as its identity. */
+export function treeIdentity(tree: ChartTree): "id" | "name" {
+  return tree.id === undefined && tree.name !== undefined ? "name" : "id";
+}
+
+/** True when there is nothing to draw. */
+export function isEmptyData(data: unknown): boolean {
+  if (data == null) return true;
+  if (Array.isArray(data)) {
+    if (data.length === 0) return true;
+    if (isSeriesArray(data)) return data.every((s) => s.data.length === 0);
+    return false;
+  }
+  if (typeof data === "object") {
+    const tree = data as ChartTree;
+    return !tree.children?.length && tree.value === undefined;
+  }
+  return true;
+}

package/src/components/chart/index.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+/**
+ * cortena-ui Chart composite (DESIGN-8).
+ *
+ * One `Chart` with a `type` prop; Recharts for the everyday types, Nivo
+ * lazy-loaded for the rest. Consumers import everything chart-related from
+ * here, including the themed Recharts primitives for custom charts, and never
+ * from `recharts` or `@nivo/*` directly.
+ */
+export { Chart } from "./chart";
+export type { ChartProps } from "./chart";
+export {
+  ChartContainer,
+  ChartEmpty,
+  ChartError,
+  ChartLegend,
+  ChartLegendContent,
+  ChartLoading,
+  ChartTooltip,
+  ChartTooltipContent,
+  seriesColor,
+  useChart,
+} from "./container";
+export type { ChartContainerProps, ChartLegendContentProps, ChartTooltipContentProps } from "./container";
+export { nivoTheme, useNivoTheme } from "./nivo-theme";
+export type { NivoTheme } from "./nivo-theme";
+export {
+  chartScales,
+  resolveColor,
+  resolveVizSeries,
+  toHex,
+  vizSeriesVars,
+  vizVar,
+  VIZ_SERIES_COUNT,
+} from "./tokens";
+export type { ChartScales } from "./tokens";
+export { chartEngine, NIVO_TYPES, RECHARTS_TYPES } from "./types";
+export type {
+  ChartConfig,
+  ChartDataFor,
+  ChartDay,
+  ChartEngine,
+  ChartPoint,
+  ChartRenderer,
+  ChartRow,
+  ChartScale,
+  ChartSeries,
+  ChartSlice,
+  ChartTree,
+  ChartType,
+} from "./types";
+
+// Themed Recharts primitives, for composing a one-off chart inside
+// ChartContainer. Re-exported so no app imports recharts directly.
+export {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ComposedChart,
+  Funnel,
+  FunnelChart,
+  LabelList,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+  ReferenceLine,
+  ResponsiveContainer,
+  Scatter,
+  ScatterChart,
+  XAxis,
+  YAxis,
+  Legend as RechartsLegend,
+  Tooltip as RechartsTooltip,
+} from "recharts";