@12-apps/ui 5.0.0 → 5.1.0

package/dist/chunk-MXVO2KXV.js

@@ -0,0 +1,899 @@
+import {
+  accentFor,
+  muiColor
+} from "./chunk-OZCEKQIX.js";
+
+// src/components/data-display/Chart/Chart.tsx
+import { Box as Box2, CircularProgress, Paper as Paper2, Typography as Typography2, useTheme as useTheme2 } from "@mui/material";
+
+// src/components/data-display/Chart/ChartComposables.tsx
+import { Box, Paper, Typography, useTheme } from "@mui/material";
+import { Legend, ResponsiveContainer, Tooltip } from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ChartTooltip = Tooltip;
+var ChartLegend = Legend;
+var ChartContainer = ({
+  height,
+  width = "100%",
+  responsive = true,
+  children,
+  "data-testid": dataTestId
+}) => {
+  if (!responsive) {
+    return /* @__PURE__ */ jsx(Box, { sx: { width, height }, "data-testid": dataTestId, children });
+  }
+  return /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, "data-testid": dataTestId, children });
+};
+var ChartTooltipContent = ({
+  active,
+  label,
+  payload,
+  valueFormatter
+}) => {
+  const theme = useTheme();
+  if (!active || !payload || payload.length === 0) return null;
+  const formatValue = (value) => {
+    if (typeof value === "number" && valueFormatter) return valueFormatter(value);
+    return value ?? "";
+  };
+  return /* @__PURE__ */ jsxs(Paper, { elevation: 4, sx: { px: 1.5, py: 1, border: `1px solid ${theme.palette.divider}` }, children: [
+    label !== void 0 && label !== "" && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 0.5 }, children: label }),
+    payload.map((entry, index) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "span",
+          sx: { width: 10, height: 10, borderRadius: "2px", backgroundColor: entry.color, flexShrink: 0 }
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children: entry.name }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { ml: "auto", fontWeight: 600 }, children: formatValue(entry.value) })
+    ] }, index))
+  ] });
+};
+var ChartLegendContent = ({ payload }) => {
+  if (!payload || payload.length === 0) return null;
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 2, pt: 1 }, children: payload.map((entry, index) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.75 }, children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "span",
+        sx: { width: 10, height: 10, borderRadius: "2px", backgroundColor: entry.color, flexShrink: 0 }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary" }, children: entry.value })
+  ] }, index)) });
+};
+
+// src/components/data-display/Chart/chart-internals.ts
+import { alpha } from "@mui/material";
+var SIZE_PRESETS = {
+  xs: { height: 200, fontSize: "0.75rem", tickMargin: 10 },
+  sm: { height: 300, fontSize: "0.875rem", tickMargin: 12 },
+  md: { height: 400, fontSize: "1rem", tickMargin: 14 },
+  lg: { height: 500, fontSize: "1.125rem", tickMargin: 16 },
+  xl: { height: 600, fontSize: "1.25rem", tickMargin: 18 }
+};
+function getSizeStyles(size, height) {
+  const preset = SIZE_PRESETS[size ?? "md"] ?? SIZE_PRESETS.md;
+  return { ...preset, height: height ?? preset.height };
+}
+var NEON_PALETTE = ["#00ffff", "#ff00ff", "#ffff00", "#00ff00", "#ff0080", "#8000ff"];
+function getDefaultColors(theme, variant, colors) {
+  if (colors) return colors;
+  if (variant === "neon") return NEON_PALETTE;
+  return [
+    theme.palette.primary.main,
+    theme.palette.secondary.main,
+    theme.palette.success.main,
+    theme.palette.warning.main,
+    theme.palette.error.main,
+    theme.palette.info.main
+  ];
+}
+function effectStyles(theme, options) {
+  const accent = accentFor(theme, options.color).main;
+  const glow = options.glow ? { boxShadow: `0 0 30px ${alpha(accent, 0.4)}` } : {};
+  const pulse = options.pulse ? {
+    animation: "pulse 2s infinite",
+    "@keyframes pulse": {
+      "0%": { boxShadow: `0 0 0 0 ${alpha(accent, 0.4)}` },
+      "70%": { boxShadow: `0 0 0 20px ${alpha(accent, 0)}` },
+      "100%": { boxShadow: `0 0 0 0 ${alpha(accent, 0)}` }
+    }
+  } : {};
+  return { ...glow, ...pulse };
+}
+function variantSurface(theme, options) {
+  switch (options.variant) {
+    case "glass":
+      return {
+        backgroundColor: alpha(theme.palette.background.paper, options.glass ? 0.1 : 0.9),
+        backdropFilter: "blur(20px)",
+        border: `1px solid ${alpha(theme.palette.divider, 0.1)}`
+      };
+    case "gradient":
+      return {
+        background: options.gradient ? `linear-gradient(135deg, ${alpha(accentFor(theme, options.color).light, 0.05)}, ${alpha(accentFor(theme, options.color).dark, 0.05)})` : theme.palette.background.paper
+      };
+    case "elevated":
+      return { boxShadow: theme.shadows[4] };
+    case "minimal":
+      return { border: "none", backgroundColor: "transparent" };
+    case "neon":
+      return {
+        backgroundColor: "#000",
+        border: `1px solid ${alpha("#00ffff", 0.3)}`,
+        "& .recharts-cartesian-grid-horizontal line, & .recharts-cartesian-grid-vertical line": {
+          stroke: alpha("#00ffff", 0.1)
+        }
+      };
+    default:
+      return { backgroundColor: theme.palette.background.paper };
+  }
+}
+function getVariantStyles(theme, options) {
+  return {
+    borderRadius: theme.spacing(1),
+    transition: theme.transitions.create(["all"], {
+      duration: theme.transitions.duration.standard
+    }),
+    opacity: options.disabled ? 0.5 : 1,
+    pointerEvents: options.disabled ? "none" : "auto",
+    ...effectStyles(theme, options),
+    ...variantSurface(theme, options)
+  };
+}
+function resolveSeries(data, series, xAxisKey, palette) {
+  if (series) return series;
+  if (data.length === 0) return [];
+  return Object.keys(data[0] ?? {}).filter((key) => key !== xAxisKey).map((key, index) => ({
+    dataKey: key,
+    name: key,
+    color: palette[index % palette.length]
+  }));
+}
+function getAxisStyles(theme, variant, fontSize) {
+  const neon = variant === "neon";
+  return {
+    axisStyle: {
+      fontSize,
+      fill: neon ? "#00ffff" : theme.palette.text.secondary,
+      // Ticks are columns of digits: they have to line up between rows.
+      fontVariantNumeric: "tabular-nums"
+    },
+    gridStroke: neon ? alpha("#00ffff", 0.1) : theme.palette.divider,
+    // The neon grid is already a 10%-alpha cyan; halving it again would erase it.
+    gridOpacity: neon ? 1 : 0.5
+  };
+}
+
+// src/components/data-display/Chart/chart-renderers.tsx
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ComposedChart,
+  Legend as Legend2,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart,
+  Scatter,
+  ScatterChart,
+  Tooltip as Tooltip2,
+  XAxis,
+  YAxis
+} from "recharts";
+
+// src/components/data-display/Chart/chart-axis.ts
+var DEFAULT_MAX_CATEGORY_TICKS = 8;
+var DEFAULT_TICK_LABEL_MAX_CHARS = 12;
+var DEFAULT_BAR_RADIUS = 3;
+var DEFAULT_MAX_BAR_WIDTH = 38;
+function selectCategoryTicks(values, maxTicks) {
+  if (maxTicks < 1 || values.length <= maxTicks) return void 0;
+  if (new Set(values).size !== values.length) return void 0;
+  const step = Math.ceil(values.length / maxTicks);
+  const kept = [];
+  for (let index = values.length - 1; index >= 0; index -= step) {
+    const value = values[index];
+    if (value !== void 0) kept.push(value);
+  }
+  return kept.reverse();
+}
+function categoryValues(data, xAxisKey) {
+  const values = [];
+  for (const row of data) {
+    const value = row[xAxisKey];
+    if (value !== null && value !== void 0) values.push(value);
+  }
+  return values;
+}
+function truncateTickLabel(value, maxChars) {
+  const text = value === null || value === void 0 ? "" : String(value);
+  if (maxChars < 1 || text.length <= maxChars) return text;
+  return `${text.slice(0, maxChars - 1)}\u2026`;
+}
+function resolveAxisConfig(props, tickMargin) {
+  const maxChars = props.tickLabelMaxChars ?? DEFAULT_TICK_LABEL_MAX_CHARS;
+  return {
+    tickMargin,
+    categoryTicks: selectCategoryTicks(
+      categoryValues(props.data, props.xAxisKey ?? "name"),
+      props.maxCategoryTicks ?? DEFAULT_MAX_CATEGORY_TICKS
+    ),
+    tickFormatter: (value) => truncateTickLabel(value, maxChars)
+  };
+}
+function resolveBarGeometry(props) {
+  const radius = props.barRadius ?? DEFAULT_BAR_RADIUS;
+  return {
+    // A stacked segment rounded on its top corners tears a notch out of the
+    // segment above it, so stacks stay square.
+    radius: props.stacked ? 0 : [radius, radius, 0, 0],
+    maxBarSize: props.maxBarWidth ?? DEFAULT_MAX_BAR_WIDTH
+  };
+}
+
+// src/components/data-display/Chart/chart-context.ts
+function buildChartContext(props, theme) {
+  const sizeStyles = getSizeStyles(props.size, props.height);
+  const chartColors = getDefaultColors(theme, props.variant ?? "default", props.colors);
+  const { axisStyle, gridStroke, gridOpacity } = getAxisStyles(
+    theme,
+    props.variant ?? "default",
+    sizeStyles.fontSize
+  );
+  const handleChartClick = (payload) => {
+    const chartData = payload;
+    if (props.onClick && chartData?.activePayload?.[0]) {
+      props.onClick(chartData.activePayload[0].payload);
+    }
+  };
+  return {
+    props,
+    theme,
+    sizeStyles,
+    chartColors,
+    chartSeries: resolveSeries(props.data, props.series, props.xAxisKey ?? "name", chartColors),
+    strokeType: props.curved ?? true ? "monotone" : "linear",
+    axisStyle: { ...axisStyle, fontSize: sizeStyles.fontSize },
+    gridStroke,
+    gridOpacity,
+    axisConfig: resolveAxisConfig(props, sizeStyles.tickMargin),
+    barGeometry: resolveBarGeometry(props),
+    animationDuration: props.animate ?? true ? props.animationDuration ?? 1500 : 0,
+    commonProps: {
+      data: props.data,
+      margin: { top: 20, right: 30, left: 20, bottom: 20, ...props.margin },
+      onClick: handleChartClick
+    }
+  };
+}
+
+// src/components/data-display/Chart/chart-renderers.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function chartExtras(ctx) {
+  const { props } = ctx;
+  const nodes = [];
+  if (props.showTooltip !== false) {
+    nodes.push(
+      /* @__PURE__ */ jsx2(Tooltip2, { content: /* @__PURE__ */ jsx2(ChartTooltipContent, { valueFormatter: props.valueFormatter }) }, "tooltip")
+    );
+  }
+  if (props.showLegend !== false) {
+    nodes.push(/* @__PURE__ */ jsx2(Legend2, { content: /* @__PURE__ */ jsx2(ChartLegendContent, {}) }, "legend"));
+  }
+  return nodes;
+}
+function chartGrid(ctx) {
+  return /* @__PURE__ */ jsx2(CartesianGrid, { stroke: ctx.gridStroke, strokeOpacity: ctx.gridOpacity }, "grid");
+}
+function cartesianAxes(ctx) {
+  const { props, axisConfig } = ctx;
+  const nodes = [];
+  if (props.showCartesianGrid !== false) nodes.push(chartGrid(ctx));
+  nodes.push(
+    /* @__PURE__ */ jsx2(
+      XAxis,
+      {
+        dataKey: props.xAxisKey ?? "name",
+        style: ctx.axisStyle,
+        label: props.xAxisLabel,
+        tickMargin: axisConfig.tickMargin,
+        ticks: axisConfig.categoryTicks,
+        tickFormatter: axisConfig.tickFormatter
+      },
+      "x"
+    ),
+    /* @__PURE__ */ jsx2(
+      YAxis,
+      {
+        style: ctx.axisStyle,
+        label: props.yAxisLabel,
+        width: "auto",
+        tickMargin: axisConfig.tickMargin,
+        tickFormatter: props.valueFormatter,
+        allowDecimals: props.allowDecimalTicks !== false
+      },
+      "y"
+    )
+  );
+  return nodes;
+}
+function renderLine(ctx) {
+  return /* @__PURE__ */ jsxs2(LineChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx2(
+      Line,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        strokeWidth: s.strokeWidth ?? 2,
+        dot: s.dot !== false,
+        activeDot: s.activeDot !== false ? { r: 8 } : false,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderBar(ctx) {
+  return /* @__PURE__ */ jsxs2(BarChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx2(
+      Bar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        stackId: ctx.props.stacked ? "stack" : void 0,
+        radius: ctx.barGeometry.radius,
+        maxBarSize: ctx.barGeometry.maxBarSize,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderArea(ctx) {
+  return /* @__PURE__ */ jsxs2(AreaChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx2(
+      Area,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fillOpacity: s.fillOpacity ?? 0.6,
+        stackId: ctx.props.stacked ? "stack" : void 0,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function pieCenterLabel(ctx) {
+  const { centerLabel } = ctx.props;
+  const innerRadius = ctx.props.innerRadius ?? 0;
+  if (!centerLabel || innerRadius <= 0) return null;
+  const fill = ctx.props.variant === "neon" ? "#00ffff" : ctx.theme.palette.text.primary;
+  return /* @__PURE__ */ jsx2(
+    "text",
+    {
+      x: "50%",
+      y: "50%",
+      textAnchor: "middle",
+      dominantBaseline: "middle",
+      style: { fontSize: ctx.sizeStyles.fontSize, fill, fontWeight: 600 },
+      children: typeof centerLabel === "string" ? centerLabel : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(
+          "tspan",
+          {
+            x: "50%",
+            dy: "-0.6em",
+            style: { fontSize: "0.875em", fontWeight: 500, fill: ctx.theme.palette.text.secondary },
+            children: centerLabel.label
+          }
+        ),
+        /* @__PURE__ */ jsx2("tspan", { x: "50%", dy: "1.4em", style: { fontSize: "1.5em", fontWeight: 700 }, children: centerLabel.value })
+      ] })
+    }
+  );
+}
+function renderPie(ctx) {
+  const { props } = ctx;
+  return /* @__PURE__ */ jsxs2(PieChart, { children: [
+    chartExtras(ctx),
+    /* @__PURE__ */ jsx2(
+      Pie,
+      {
+        data: props.data,
+        dataKey: ctx.chartSeries[0]?.dataKey ?? "value",
+        nameKey: props.xAxisKey ?? "name",
+        cx: "50%",
+        cy: "50%",
+        outerRadius: ctx.sizeStyles.height / 3,
+        innerRadius: props.innerRadius ?? 0,
+        fill: ctx.chartColors[0],
+        label: props.showValues ?? false,
+        animationDuration: ctx.animationDuration,
+        children: props.data.map((entry, index) => /* @__PURE__ */ jsx2(Cell, { fill: ctx.chartColors[index % ctx.chartColors.length] }, `cell-${index}`))
+      }
+    ),
+    pieCenterLabel(ctx)
+  ] });
+}
+function renderRadar(ctx) {
+  return /* @__PURE__ */ jsxs2(RadarChart, { ...ctx.commonProps, children: [
+    /* @__PURE__ */ jsx2(PolarGrid, { stroke: ctx.gridStroke }),
+    /* @__PURE__ */ jsx2(PolarAngleAxis, { dataKey: ctx.props.xAxisKey ?? "name", style: ctx.axisStyle }),
+    /* @__PURE__ */ jsx2(PolarRadiusAxis, { style: ctx.axisStyle }),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => /* @__PURE__ */ jsx2(
+      Radar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fill: s.fill ?? s.color ?? ctx.chartColors[index % ctx.chartColors.length],
+        fillOpacity: s.fillOpacity ?? 0.6,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    ))
+  ] });
+}
+function renderScatter(ctx) {
+  const { props } = ctx;
+  return /* @__PURE__ */ jsxs2(ScatterChart, { ...ctx.commonProps, children: [
+    props.showCartesianGrid !== false && chartGrid(ctx),
+    /* @__PURE__ */ jsx2(
+      XAxis,
+      {
+        dataKey: props.xAxisKey ?? "name",
+        style: ctx.axisStyle,
+        label: props.xAxisLabel,
+        tickMargin: ctx.axisConfig.tickMargin
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      YAxis,
+      {
+        dataKey: ctx.chartSeries[0]?.dataKey,
+        style: ctx.axisStyle,
+        label: props.yAxisLabel,
+        tickMargin: ctx.axisConfig.tickMargin
+      }
+    ),
+    chartExtras(ctx),
+    /* @__PURE__ */ jsx2(
+      Scatter,
+      {
+        name: ctx.chartSeries[0]?.name ?? "Data",
+        data: props.data,
+        fill: ctx.chartColors[0],
+        animationDuration: ctx.animationDuration
+      }
+    )
+  ] });
+}
+function composedSeries(ctx, s, index) {
+  const color = s.color ?? ctx.chartColors[index % ctx.chartColors.length];
+  if (s.type === "bar") {
+    return /* @__PURE__ */ jsx2(
+      Bar,
+      {
+        dataKey: s.dataKey,
+        name: s.name,
+        fill: color,
+        radius: ctx.barGeometry.radius,
+        maxBarSize: ctx.barGeometry.maxBarSize,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    );
+  }
+  if (s.type === "area") {
+    return /* @__PURE__ */ jsx2(
+      Area,
+      {
+        type: ctx.strokeType,
+        dataKey: s.dataKey,
+        name: s.name,
+        stroke: color,
+        fill: color,
+        fillOpacity: 0.6,
+        animationDuration: ctx.animationDuration
+      },
+      s.dataKey
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    Line,
+    {
+      type: ctx.strokeType,
+      dataKey: s.dataKey,
+      name: s.name,
+      stroke: color,
+      animationDuration: ctx.animationDuration
+    },
+    s.dataKey
+  );
+}
+function renderComposed(ctx) {
+  return /* @__PURE__ */ jsxs2(ComposedChart, { ...ctx.commonProps, children: [
+    cartesianAxes(ctx),
+    chartExtras(ctx),
+    ctx.chartSeries.map((s, index) => composedSeries(ctx, s, index))
+  ] });
+}
+var RENDERERS = {
+  line: renderLine,
+  bar: renderBar,
+  area: renderArea,
+  pie: renderPie,
+  radar: renderRadar,
+  scatter: renderScatter,
+  composed: renderComposed
+};
+function renderChartByType(props, theme) {
+  const renderer = RENDERERS[props.type ?? "line"];
+  const ctx = buildChartContext(props, theme);
+  return renderer ? renderer(ctx) : /* @__PURE__ */ jsx2(Fragment, {});
+}
+
+// src/components/data-display/Chart/Chart.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function variantSx(theme, props) {
+  return getVariantStyles(theme, {
+    variant: props.variant ?? "default",
+    color: props.color ?? "primary",
+    glow: props.glow ?? false,
+    pulse: props.pulse ?? false,
+    glass: props.glass ?? false,
+    gradient: props.gradient ?? false,
+    disabled: props.disabled ?? false
+  });
+}
+function ChartHeader({ title, subtitle, neon, dataTestId }) {
+  if (!title && !subtitle) return null;
+  return /* @__PURE__ */ jsxs3(Box2, { sx: { mb: 2 }, "data-testid": `${dataTestId}-header`, children: [
+    title && /* @__PURE__ */ jsx3(
+      Typography2,
+      {
+        variant: "h6",
+        "data-testid": `${dataTestId}-title`,
+        sx: { color: neon ? "#00ffff" : "text.primary", fontWeight: 600 },
+        children: title
+      }
+    ),
+    subtitle && /* @__PURE__ */ jsx3(
+      Typography2,
+      {
+        variant: "body2",
+        "data-testid": `${dataTestId}-subtitle`,
+        sx: { color: neon ? "rgba(0, 255, 255, 0.7)" : "text.secondary" },
+        children: subtitle
+      }
+    )
+  ] });
+}
+var Chart = (props) => {
+  const theme = useTheme2();
+  const sizeStyles = getSizeStyles(props.size, props.height);
+  const styles = variantSx(theme, props);
+  const dataTestId = props["data-testid"] ?? "chart";
+  if (props.loading) {
+    return /* @__PURE__ */ jsx3(
+      Paper2,
+      {
+        "data-testid": `${dataTestId}-loading`,
+        sx: { ...styles, ...sizeStyles, display: "flex", justifyContent: "center", alignItems: "center" },
+        children: /* @__PURE__ */ jsx3(CircularProgress, { color: muiColor(props.color ?? "primary", "inherit"), "data-testid": `${dataTestId}-loading-spinner` })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    Paper2,
+    {
+      "data-testid": dataTestId,
+      className: props.className,
+      sx: { p: 2, ...styles, ...props.style },
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      children: [
+        /* @__PURE__ */ jsx3(
+          ChartHeader,
+          {
+            title: props.title,
+            subtitle: props.subtitle,
+            neon: props.variant === "neon",
+            dataTestId
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          ChartContainer,
+          {
+            responsive: props.responsive ?? true,
+            width: props.width ?? "100%",
+            height: props.fillHeight === true ? "100%" : sizeStyles.height,
+            "data-testid": `${dataTestId}-container`,
+            children: renderChartByType(props, theme)
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/data-display/Chart/SpecChart.tsx
+import { useTheme as useTheme3 } from "@mui/material";
+import React from "react";
+
+// src/components/data-display/Chart/chart-format.ts
+var formatters = {
+  brl: new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" }),
+  percent: new Intl.NumberFormat("pt-BR", { style: "percent", maximumFractionDigits: 1 }),
+  compact: new Intl.NumberFormat("pt-BR", { notation: "compact", maximumFractionDigits: 1 }),
+  integer: new Intl.NumberFormat("pt-BR", { maximumFractionDigits: 0 }),
+  decimal: new Intl.NumberFormat("pt-BR", { maximumFractionDigits: 2 })
+};
+function formatChartValue(value, format = "decimal") {
+  if (!Number.isFinite(value)) return "";
+  if (format === "brl") return formatters.brl.format(value / 100);
+  return formatters[format].format(value);
+}
+function chartValueFormatter(format) {
+  return (value) => formatChartValue(value, format);
+}
+
+// src/components/data-display/Chart/chart-spec-registry.ts
+var registry = /* @__PURE__ */ new Map();
+function registerChartSpecRenderer(type, renderer) {
+  registry.set(type, renderer);
+}
+function getChartSpecRenderer(type) {
+  return registry.get(type);
+}
+function getRegisteredChartSpecTypes() {
+  return [...registry.keys()];
+}
+function toChartSeries(spec, ctx) {
+  return spec.series.map((series, index) => ({
+    dataKey: series.key,
+    name: series.label ?? series.key,
+    color: ctx.resolveColor(series.color, index)
+  }));
+}
+function cartesianRenderer(chartType) {
+  return (spec, ctx) => ({
+    type: chartType,
+    series: toChartSeries(spec, ctx),
+    stacked: spec.stacked ?? false,
+    curved: spec.curved ?? true
+  });
+}
+var pieRenderer = (spec, ctx) => ({
+  type: "pie",
+  series: toChartSeries(spec, ctx),
+  // Slice colors cycle the resolved scheme; the pie renderer reads them from
+  // the `colors` prop rather than per-series colors.
+  colors: spec.series.length ? Array.from({ length: 12 }, (_, index) => ctx.resolveColor(void 0, index)) : void 0
+});
+var donutRenderer = (spec, ctx) => ({
+  ...pieRenderer(spec, ctx),
+  // Proportional to the pie's outer radius (height / 3 in the Chart renderer).
+  innerRadius: Math.round((spec.height ?? 400) / 6),
+  centerLabel: spec.centerLabel
+});
+registerChartSpecRenderer("line", cartesianRenderer("line"));
+registerChartSpecRenderer("bar", cartesianRenderer("bar"));
+registerChartSpecRenderer("area", cartesianRenderer("area"));
+registerChartSpecRenderer("pie", pieRenderer);
+registerChartSpecRenderer("donut", donutRenderer);
+
+// src/components/data-display/Chart/chart-spec.ts
+var CHART_SEMANTIC_COLORS = [
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info"
+];
+var NUMBER_FORMATS = ["brl", "percent", "compact", "integer", "decimal"];
+var ChartSpecError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "ChartSpecError";
+  }
+};
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function assertColor(value, where) {
+  if (value === void 0) return;
+  if (!CHART_SEMANTIC_COLORS.includes(value)) {
+    throw new ChartSpecError(
+      `${where} must be a semantic color token (${CHART_SEMANTIC_COLORS.join(", ")}), got ${JSON.stringify(value)}. Raw color values are not allowed.`
+    );
+  }
+}
+function parseAxis(value) {
+  if (!isRecord(value) || typeof value.key !== "string" || value.key.length === 0) {
+    throw new ChartSpecError('"xAxis" must be an object with a non-empty string "key" naming the row property for the category axis.');
+  }
+  if (value.label !== void 0 && typeof value.label !== "string") {
+    throw new ChartSpecError('"xAxis.label" must be a string when provided.');
+  }
+  return { key: value.key, label: value.label };
+}
+function parseSeries(value) {
+  if (!Array.isArray(value) || value.length === 0) {
+    throw new ChartSpecError('"series" must be a non-empty array of { key, label?, color? } objects.');
+  }
+  return value.map((entry, index) => {
+    if (!isRecord(entry) || typeof entry.key !== "string" || entry.key.length === 0) {
+      throw new ChartSpecError(`"series[${index}]" must be an object with a non-empty string "key" naming the row property holding its values.`);
+    }
+    assertColor(entry.color, `"series[${index}].color"`);
+    if (entry.label !== void 0 && typeof entry.label !== "string") {
+      throw new ChartSpecError(`"series[${index}].label" must be a string when provided.`);
+    }
+    return { key: entry.key, label: entry.label, color: entry.color };
+  });
+}
+function assertFieldType(spec, field, expected) {
+  const value = spec[field];
+  if (value !== void 0 && typeof value !== expected) {
+    throw new ChartSpecError(`"${field}" must be a ${expected} when provided.`);
+  }
+}
+function parseColorScheme(value) {
+  if (value === void 0) return void 0;
+  if (!Array.isArray(value) || value.length === 0) {
+    throw new ChartSpecError('"colorScheme" must be a non-empty array of semantic color tokens when provided.');
+  }
+  value.forEach((token, index) => assertColor(token, `"colorScheme[${index}]"`));
+  return value;
+}
+function parseOptionalFields(spec) {
+  for (const field of ["title", "subtitle"]) assertFieldType(spec, field, "string");
+  for (const field of ["stacked", "legend", "tooltip", "curved"]) {
+    assertFieldType(spec, field, "boolean");
+  }
+  assertFieldType(spec, "height", "number");
+  if (spec.numberFormat !== void 0 && !NUMBER_FORMATS.includes(spec.numberFormat)) {
+    throw new ChartSpecError(
+      `"numberFormat" must be one of ${NUMBER_FORMATS.join(", ")}, got ${JSON.stringify(spec.numberFormat)}.`
+    );
+  }
+  return {
+    title: spec.title,
+    subtitle: spec.subtitle,
+    stacked: spec.stacked,
+    legend: spec.legend,
+    tooltip: spec.tooltip,
+    curved: spec.curved,
+    height: spec.height,
+    numberFormat: spec.numberFormat,
+    colorScheme: parseColorScheme(spec.colorScheme)
+  };
+}
+function parseChartSpec(input) {
+  if (!isRecord(input)) {
+    throw new ChartSpecError("A chart spec must be a JSON object.");
+  }
+  const type = input.type;
+  if (typeof type !== "string" || !getChartSpecRenderer(type)) {
+    throw new ChartSpecError(
+      `"type" must be one of the registered chart types (${getRegisteredChartSpecTypes().join(", ")}), got ${JSON.stringify(type)}.`
+    );
+  }
+  const yAxis = input.yAxis;
+  if (yAxis !== void 0 && (!isRecord(yAxis) || yAxis.label !== void 0 && typeof yAxis.label !== "string")) {
+    throw new ChartSpecError('"yAxis" must be an object with an optional string "label" when provided.');
+  }
+  const centerLabel = input.centerLabel;
+  return {
+    ...parseOptionalFields(input),
+    type,
+    xAxis: parseAxis(input.xAxis),
+    yAxis,
+    series: parseSeries(input.series),
+    centerLabel
+  };
+}
+function specToChartProps(spec, data, ctx) {
+  const renderer = getChartSpecRenderer(spec.type);
+  if (!renderer) {
+    throw new ChartSpecError(
+      `Unknown chart type "${spec.type}". Registered types: ${getRegisteredChartSpecTypes().join(", ")}.`
+    );
+  }
+  return {
+    data,
+    title: spec.title,
+    subtitle: spec.subtitle,
+    xAxisKey: spec.xAxis.key,
+    xAxisLabel: spec.xAxis.label,
+    yAxisLabel: spec.yAxis?.label,
+    showLegend: spec.legend ?? true,
+    showTooltip: spec.tooltip ?? true,
+    height: spec.height,
+    valueFormatter: chartValueFormatter(spec.numberFormat),
+    // An integer metric is a COUNT: half a row does not exist, so the axis must
+    // not offer half-steps it would then round into duplicates (FUT-755).
+    allowDecimalTicks: spec.numberFormat !== "integer",
+    ...renderer(spec, ctx)
+  };
+}
+
+// src/components/data-display/Chart/SpecChart.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var SpecChart = ({
+  spec,
+  data,
+  size,
+  fillHeight,
+  loading,
+  className,
+  onClick,
+  "data-testid": dataTestId = "spec-chart"
+}) => {
+  const theme = useTheme3();
+  const chartProps = React.useMemo(() => {
+    const scheme = spec.colorScheme && spec.colorScheme.length > 0 ? spec.colorScheme : CHART_SEMANTIC_COLORS;
+    const resolveColor = (token, index) => accentFor(theme, token ?? scheme[index % scheme.length] ?? "primary").main;
+    return specToChartProps(spec, data, { resolveColor });
+  }, [spec, data, theme]);
+  return /* @__PURE__ */ jsx4(
+    Chart,
+    {
+      ...chartProps,
+      size,
+      fillHeight,
+      loading,
+      className,
+      onClick,
+      "data-testid": dataTestId
+    }
+  );
+};
+
+export {
+  ChartTooltip,
+  ChartLegend,
+  ChartContainer,
+  ChartTooltipContent,
+  ChartLegendContent,
+  Chart,
+  formatChartValue,
+  chartValueFormatter,
+  registerChartSpecRenderer,
+  getChartSpecRenderer,
+  getRegisteredChartSpecTypes,
+  CHART_SEMANTIC_COLORS,
+  ChartSpecError,
+  parseChartSpec,
+  specToChartProps,
+  SpecChart
+};
+//# sourceMappingURL=chunk-MXVO2KXV.js.map