@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/chunk-QKGCW37O.mjs

@@ -0,0 +1,1175 @@
+import {
+  default as default4
+} from "./chunk-4RPFRNXG.mjs";
+import {
+  default as default2,
+  default2 as default3,
+  mergeSx
+} from "./chunk-S6EZVRZC.mjs";
+
+// src/components/compound/Chart/src/Chart.tsx
+import { useCallback, useMemo, useState } from "react";
+
+// src/components/compound/Chart/src/render/ChartHover.tsx
+import { memo } from "react";
+
+// src/components/compound/Chart/src/utils/chartLayout.ts
+var CHART_WIDTH = 920;
+var CHART_HEIGHT = 280;
+var CHART_PAD = { top: 12, right: 8, bottom: 8, left: 8 };
+var CHART_PIE_SIZE = 280;
+var cartesianPlotSize = () => ({
+  plotWidth: CHART_WIDTH - CHART_PAD.left - CHART_PAD.right,
+  plotHeight: CHART_HEIGHT - CHART_PAD.top - CHART_PAD.bottom
+});
+var xTickLabels = (labels) => {
+  const step = Math.max(1, Math.ceil(labels.length / 7));
+  return labels.flatMap(
+    (label, index) => index % step === 0 || index === labels.length - 1 ? [{ label, index }] : []
+  );
+};
+var seriesColorToken = (index) => `var(--chart-series-${index})`;
+var emptyGeometry = (kind) => {
+  const { plotWidth, plotHeight } = cartesianPlotSize();
+  const base = {
+    peak: 1,
+    hoverPoints: [],
+    yTicks: [1, 0.5, 0],
+    xLabels: [],
+    plotWidth,
+    plotHeight,
+    legend: []
+  };
+  if (kind === "pie") {
+    return {
+      ...base,
+      kind: "pie",
+      viewWidth: CHART_PIE_SIZE,
+      viewHeight: CHART_PIE_SIZE,
+      slices: [],
+      cx: CHART_PIE_SIZE / 2,
+      cy: CHART_PIE_SIZE / 2,
+      rOuter: 1,
+      rInner: 0
+    };
+  }
+  if (kind === "bar") {
+    return {
+      ...base,
+      kind: "bar",
+      viewWidth: CHART_WIDTH,
+      viewHeight: CHART_HEIGHT,
+      bars: []
+    };
+  }
+  if (kind === "line") {
+    return {
+      ...base,
+      kind: "line",
+      viewWidth: CHART_WIDTH,
+      viewHeight: CHART_HEIGHT,
+      lines: []
+    };
+  }
+  return {
+    ...base,
+    kind: "area",
+    viewWidth: CHART_WIDTH,
+    viewHeight: CHART_HEIGHT,
+    stacked: [],
+    lineD: ""
+  };
+};
+var indexFromClientX = (clientX, rect, labelCount, viewWidth = CHART_WIDTH) => {
+  if (labelCount <= 1) {
+    return 0;
+  }
+  const viewX = (clientX - rect.left) / Math.max(rect.width, 1) * viewWidth;
+  const t = (viewX - CHART_PAD.left) / (viewWidth - CHART_PAD.left - CHART_PAD.right);
+  return Math.round(Math.min(1, Math.max(0, t)) * (labelCount - 1));
+};
+var indexFromBandX = (clientX, rect, labelCount, viewWidth = CHART_WIDTH) => {
+  if (labelCount <= 1) {
+    return 0;
+  }
+  const viewX = (clientX - rect.left) / Math.max(rect.width, 1) * viewWidth;
+  const t = (viewX - CHART_PAD.left) / (viewWidth - CHART_PAD.left - CHART_PAD.right);
+  return Math.min(
+    labelCount - 1,
+    Math.max(0, Math.floor(t * labelCount))
+  );
+};
+var indexFromPiePointer = (clientX, clientY, rect, geometry) => {
+  if (geometry.slices.length === 0) {
+    return null;
+  }
+  const viewX = (clientX - rect.left) / Math.max(rect.width, 1) * geometry.viewWidth;
+  const viewY = (clientY - rect.top) / Math.max(rect.height, 1) * geometry.viewHeight;
+  const dx = viewX - geometry.cx;
+  const dy = viewY - geometry.cy;
+  const dist = Math.hypot(dx, dy);
+  if (dist > geometry.rOuter + 1 || dist < Math.max(geometry.rInner - 1, 0)) {
+    return null;
+  }
+  let turn = Math.atan2(dx, -dy);
+  if (turn < 0) {
+    turn += Math.PI * 2;
+  }
+  const hit = geometry.slices.findIndex(
+    (slice) => turn >= slice.start && turn < slice.end
+  );
+  return hit >= 0 ? hit : geometry.slices.length - 1;
+};
+var hitIndex = (clientX, clientY, rect, geometry) => {
+  if (geometry.kind === "pie") {
+    return indexFromPiePointer(clientX, clientY, rect, geometry);
+  }
+  if (geometry.hoverPoints.length === 0) {
+    return null;
+  }
+  if (geometry.kind === "bar") {
+    return indexFromBandX(
+      clientX,
+      rect,
+      geometry.hoverPoints.length,
+      geometry.viewWidth
+    );
+  }
+  return indexFromClientX(
+    clientX,
+    rect,
+    geometry.hoverPoints.length,
+    geometry.viewWidth
+  );
+};
+
+// src/components/compound/Chart/src/utils/paths.ts
+var areaPath = (xs, yTop, yBottom) => {
+  if (xs.length === 0) {
+    return "";
+  }
+  const top = xs.map(
+    (x, index) => `${index === 0 ? "M" : "L"} ${x} ${yTop[index]}`
+  );
+  const bottom = [...xs].reverse().map((x, index) => `L ${x} ${yBottom[xs.length - 1 - index]}`);
+  return `${top.join(" ")} ${bottom.join(" ")} Z`;
+};
+var linePath = (xs, ys) => xs.map((x, index) => `${index === 0 ? "M" : "L"} ${x} ${ys[index]}`).join(" ");
+var TAU = Math.PI * 2;
+var polar = (cx, cy, radius, angleFromTop) => [
+  cx + radius * Math.sin(angleFromTop),
+  cy - radius * Math.cos(angleFromTop)
+];
+var donutSlicePath = (cx, cy, rOuter, rInner, start, end) => {
+  const sweep = end - start;
+  if (sweep <= 0 || rOuter <= 0) {
+    return "";
+  }
+  if (sweep >= TAU - 1e-8) {
+    if (rInner <= 0) {
+      return `M ${cx + rOuter} ${cy} A ${rOuter} ${rOuter} 0 1 1 ${cx - rOuter} ${cy} A ${rOuter} ${rOuter} 0 1 1 ${cx + rOuter} ${cy} Z`;
+    }
+    return `M ${cx + rOuter} ${cy} A ${rOuter} ${rOuter} 0 1 1 ${cx - rOuter} ${cy} A ${rOuter} ${rOuter} 0 1 1 ${cx + rOuter} ${cy} M ${cx + rInner} ${cy} A ${rInner} ${rInner} 0 1 0 ${cx - rInner} ${cy} A ${rInner} ${rInner} 0 1 0 ${cx + rInner} ${cy} Z`;
+  }
+  const large = sweep > Math.PI ? 1 : 0;
+  const [x0, y0] = polar(cx, cy, rOuter, start);
+  const [x1, y1] = polar(cx, cy, rOuter, end);
+  if (rInner <= 0) {
+    return `M ${cx} ${cy} L ${x0} ${y0} A ${rOuter} ${rOuter} 0 ${large} 1 ${x1} ${y1} Z`;
+  }
+  const [ix0, iy0] = polar(cx, cy, rInner, start);
+  const [ix1, iy1] = polar(cx, cy, rInner, end);
+  return `M ${x0} ${y0} A ${rOuter} ${rOuter} 0 ${large} 1 ${x1} ${y1} L ${ix1} ${iy1} A ${rInner} ${rInner} 0 ${large} 0 ${ix0} ${iy0} Z`;
+};
+
+// src/components/compound/Chart/src/utils/areaGeometry.ts
+var stretch = (values) => values.length === 1 ? [values[0], values[0]] : values;
+var sumThrough = (seriesValues, dayIndex, endExclusive) => seriesValues.slice(0, endExclusive).reduce((sum, values) => sum + (values[dayIndex] ?? 0), 0);
+var buildAreaGeometry = (series, labels) => {
+  const { plotWidth, plotHeight } = cartesianPlotSize();
+  const seriesValues = series.map(
+    (item) => labels.map((_, dayIndex) => item.values[dayIndex] ?? 0)
+  );
+  const totals = labels.map(
+    (_, dayIndex) => seriesValues.reduce((sum, values) => sum + (values[dayIndex] ?? 0), 0)
+  );
+  const peak = Math.max(1, ...totals);
+  const sampleCount = Math.max(labels.length, 2);
+  const xValues = Array.from(
+    { length: sampleCount },
+    (_, index) => CHART_PAD.left + index / (sampleCount - 1) * plotWidth
+  );
+  const stacked = series.map((item, seriesIndex) => {
+    const yTop = stretch(
+      labels.map((_, dayIndex) => {
+        const upper = sumThrough(seriesValues, dayIndex, seriesIndex + 1);
+        return CHART_PAD.top + plotHeight - upper / peak * plotHeight;
+      })
+    );
+    const yBottom = stretch(
+      labels.map((_, dayIndex) => {
+        const lower = sumThrough(seriesValues, dayIndex, seriesIndex);
+        return CHART_PAD.top + plotHeight - lower / peak * plotHeight;
+      })
+    );
+    return {
+      id: item.id,
+      label: item.label,
+      color: seriesColorToken(seriesIndex),
+      values: seriesValues[seriesIndex] ?? [],
+      yTop,
+      areaD: areaPath(xValues, yTop, yBottom)
+    };
+  });
+  const topSeries = stacked[stacked.length - 1];
+  const pointX = (index) => xValues[labels.length === 1 ? xValues.length - 1 : index] ?? CHART_PAD.left;
+  const pointYIndex = (index) => labels.length === 1 ? Math.max(xValues.length - 1, 0) : index;
+  const hoverPoints = labels.map((label, index) => {
+    const rows = stacked.map((item) => ({
+      id: item.id,
+      label: item.label,
+      color: item.color,
+      value: item.values[index] ?? 0
+    }));
+    const total = rows.reduce((sum, row) => sum + row.value, 0);
+    const visibleRows = rows.filter((row) => row.value > 0);
+    const y = topSeries?.yTop[pointYIndex(index)] ?? CHART_PAD.top + plotHeight;
+    const x = pointX(index);
+    return {
+      index,
+      label,
+      x,
+      y,
+      rows: visibleRows.length > 0 ? visibleRows : rows.slice(-1),
+      total,
+      showTotal: visibleRows.length > 1,
+      showGuide: true,
+      markers: [{ x, y, color: "var(--chart-line)" }]
+    };
+  });
+  return {
+    kind: "area",
+    stacked,
+    peak,
+    hoverPoints,
+    lineD: topSeries ? linePath(xValues, topSeries.yTop) : "",
+    yTicks: [peak, peak / 2, 0],
+    xLabels: xTickLabels(labels),
+    plotWidth,
+    plotHeight,
+    viewWidth: CHART_WIDTH,
+    viewHeight: CHART_HEIGHT,
+    legend: series.map((item) => ({ id: item.id, label: item.label }))
+  };
+};
+
+// src/components/compound/Chart/src/utils/barGeometry.ts
+var GROUP_GAP = 0.22;
+var buildBarGeometry = (series, labels, stacked) => {
+  const { plotWidth, plotHeight } = cartesianPlotSize();
+  const seriesValues = series.map(
+    (item) => labels.map((_, dayIndex) => Math.max(0, item.values[dayIndex] ?? 0))
+  );
+  const totals = labels.map(
+    (_, dayIndex) => seriesValues.reduce((sum, values) => sum + (values[dayIndex] ?? 0), 0)
+  );
+  const peak = stacked ? Math.max(1, ...totals) : Math.max(1, ...seriesValues.flatMap((values) => values));
+  const groupWidth = plotWidth / Math.max(labels.length, 1);
+  const gap = groupWidth * GROUP_GAP;
+  const inner = Math.max(groupWidth - gap, 1);
+  const barWidth = stacked ? inner : inner / Math.max(series.length, 1);
+  const bars = [];
+  labels.forEach((_, dayIndex) => {
+    const groupX = CHART_PAD.left + dayIndex * groupWidth + gap / 2;
+    if (stacked) {
+      let acc = 0;
+      series.forEach((item, seriesIndex) => {
+        const value = seriesValues[seriesIndex]?.[dayIndex] ?? 0;
+        const height = value / peak * plotHeight;
+        const y = CHART_PAD.top + plotHeight - (acc + value) / peak * plotHeight;
+        bars.push({
+          id: `${item.id}-${dayIndex}`,
+          color: seriesColorToken(seriesIndex),
+          x: groupX,
+          y,
+          width: barWidth,
+          height
+        });
+        acc += value;
+      });
+      return;
+    }
+    series.forEach((item, seriesIndex) => {
+      const value = seriesValues[seriesIndex]?.[dayIndex] ?? 0;
+      const height = value / peak * plotHeight;
+      bars.push({
+        id: `${item.id}-${dayIndex}`,
+        color: seriesColorToken(seriesIndex),
+        x: groupX + seriesIndex * barWidth,
+        y: CHART_PAD.top + plotHeight - height,
+        width: barWidth,
+        height
+      });
+    });
+  });
+  const hoverPoints = labels.map((label, index) => {
+    const rows = series.map((item, seriesIndex) => ({
+      id: item.id,
+      label: item.label,
+      color: seriesColorToken(seriesIndex),
+      value: seriesValues[seriesIndex]?.[index] ?? 0
+    }));
+    const total = rows.reduce((sum, row) => sum + row.value, 0);
+    const visibleRows = rows.filter((row) => row.value > 0);
+    const x = CHART_PAD.left + index * groupWidth + groupWidth / 2;
+    const y = CHART_PAD.top + plotHeight - (stacked ? total : Math.max(0, ...rows.map((row) => row.value))) / peak * plotHeight;
+    return {
+      index,
+      label,
+      x,
+      y,
+      rows: visibleRows.length > 0 ? visibleRows : rows.slice(-1),
+      total,
+      showTotal: stacked && visibleRows.length > 1,
+      showGuide: true,
+      markers: [{ x, y, color: "var(--chart-line)" }]
+    };
+  });
+  return {
+    kind: "bar",
+    bars,
+    peak,
+    hoverPoints,
+    yTicks: [peak, peak / 2, 0],
+    xLabels: xTickLabels(labels),
+    plotWidth,
+    plotHeight,
+    viewWidth: CHART_WIDTH,
+    viewHeight: CHART_HEIGHT,
+    legend: series.map((item) => ({ id: item.id, label: item.label }))
+  };
+};
+
+// src/components/compound/Chart/src/utils/lineGeometry.ts
+var buildLineGeometry = (series, labels) => {
+  const { plotWidth, plotHeight } = cartesianPlotSize();
+  const seriesValues = series.map(
+    (item) => labels.map((_, dayIndex) => item.values[dayIndex] ?? 0)
+  );
+  const peak = Math.max(
+    1,
+    ...seriesValues.flatMap((values) => values)
+  );
+  const sampleCount = Math.max(labels.length, 2);
+  const xValues = Array.from(
+    { length: sampleCount },
+    (_, index) => CHART_PAD.left + index / (sampleCount - 1) * plotWidth
+  );
+  const yAt = (value) => CHART_PAD.top + plotHeight - value / peak * plotHeight;
+  const stretchY = (values) => values.length === 1 ? [yAt(values[0] ?? 0), yAt(values[0] ?? 0)] : values.map(yAt);
+  const lines = series.map((item, seriesIndex) => ({
+    id: item.id,
+    color: seriesColorToken(seriesIndex),
+    d: linePath(xValues, stretchY(seriesValues[seriesIndex] ?? []))
+  }));
+  const hoverPoints = labels.map((label, index) => {
+    const x = xValues[labels.length === 1 ? xValues.length - 1 : index] ?? CHART_PAD.left;
+    const sampleIndex = labels.length === 1 ? Math.max(xValues.length - 1, 0) : index;
+    const rows = series.map((item, seriesIndex) => ({
+      id: item.id,
+      label: item.label,
+      color: seriesColorToken(seriesIndex),
+      value: seriesValues[seriesIndex]?.[index] ?? 0
+    }));
+    const markers = rows.map((row, seriesIndex) => ({
+      x,
+      y: stretchY(seriesValues[seriesIndex] ?? [])[sampleIndex] ?? yAt(0),
+      color: row.color
+    }));
+    const top = markers.reduce(
+      (min, marker) => marker.y < min.y ? marker : min,
+      markers[0] ?? { x, y: yAt(0), color: "var(--chart-line)" }
+    );
+    return {
+      index,
+      label,
+      x,
+      y: top.y,
+      rows,
+      total: rows.reduce((sum, row) => sum + row.value, 0),
+      showTotal: false,
+      showGuide: true,
+      markers
+    };
+  });
+  return {
+    kind: "line",
+    lines,
+    peak,
+    hoverPoints,
+    yTicks: [peak, peak / 2, 0],
+    xLabels: xTickLabels(labels),
+    plotWidth,
+    plotHeight,
+    viewWidth: CHART_WIDTH,
+    viewHeight: CHART_HEIGHT,
+    legend: series.map((item) => ({ id: item.id, label: item.label }))
+  };
+};
+
+// src/components/compound/Chart/src/utils/pieGeometry.ts
+var sliceValue = (item) => item.values.reduce((sum, value) => sum + Math.max(0, value), 0);
+var pieSlicesFrom = (series, labels) => {
+  if (series.length === 1 && labels.length > 1 && (series[0]?.values.length ?? 0) === labels.length) {
+    const only = series[0];
+    return labels.map((label, index) => ({
+      id: `${only.id}-${index}`,
+      label,
+      color: seriesColorToken(index),
+      value: Math.max(0, only.values[index] ?? 0)
+    }));
+  }
+  return series.map((item, index) => ({
+    id: item.id,
+    label: item.label,
+    color: seriesColorToken(index),
+    value: sliceValue(item)
+  }));
+};
+var buildPieGeometry = (series, labels, hole) => {
+  const cx = CHART_PIE_SIZE / 2;
+  const cy = CHART_PIE_SIZE / 2;
+  const rOuter = CHART_PIE_SIZE * 0.38;
+  const rInner = rOuter * Math.min(0.85, Math.max(0, hole));
+  const source = pieSlicesFrom(series, labels).filter((item) => item.value > 0);
+  const total = source.reduce((sum, item) => sum + item.value, 0);
+  if (total <= 0) {
+    return {
+      kind: "pie",
+      slices: [],
+      peak: 1,
+      hoverPoints: [],
+      yTicks: [],
+      xLabels: [],
+      plotWidth: CHART_PIE_SIZE,
+      plotHeight: CHART_PIE_SIZE,
+      viewWidth: CHART_PIE_SIZE,
+      viewHeight: CHART_PIE_SIZE,
+      legend: [],
+      cx,
+      cy,
+      rOuter,
+      rInner
+    };
+  }
+  let cursor = 0;
+  const slices = source.map((item) => {
+    const start = cursor;
+    const sweep = item.value / total * TAU;
+    const end = start + sweep;
+    cursor = end;
+    const mid = start + sweep / 2;
+    const markerR = (rOuter + rInner) / 2 || rOuter * 0.62;
+    const [mx, my] = polar(cx, cy, markerR, mid);
+    return {
+      ...item,
+      start,
+      end,
+      d: donutSlicePath(cx, cy, rOuter, rInner, start, end),
+      cx: mx,
+      cy: my
+    };
+  });
+  const hoverPoints = slices.map((slice, index) => ({
+    index,
+    label: slice.label,
+    x: slice.cx,
+    y: slice.cy,
+    rows: [
+      {
+        id: slice.id,
+        label: slice.label,
+        color: slice.color,
+        value: slice.value
+      }
+    ],
+    total,
+    showTotal: slices.length > 1,
+    showGuide: false,
+    markers: [{ x: slice.cx, y: slice.cy, color: slice.color }]
+  }));
+  return {
+    kind: "pie",
+    slices,
+    peak: total,
+    hoverPoints,
+    yTicks: [],
+    xLabels: [],
+    plotWidth: CHART_PIE_SIZE,
+    plotHeight: CHART_PIE_SIZE,
+    viewWidth: CHART_PIE_SIZE,
+    viewHeight: CHART_PIE_SIZE,
+    legend: source.map((item) => ({ id: item.id, label: item.label })),
+    cx,
+    cy,
+    rOuter,
+    rInner
+  };
+};
+
+// src/components/compound/Chart/src/utils/geometry.ts
+var buildChartGeometry = (series, labels = [], options = {}) => {
+  const type = options.type ?? "area";
+  if (type === "pie") {
+    if (series.length === 0) {
+      return emptyGeometry("pie");
+    }
+    return buildPieGeometry(series, labels, options.hole ?? 0);
+  }
+  if (labels.length === 0 || series.length === 0) {
+    return emptyGeometry(type);
+  }
+  if (type === "bar") {
+    return buildBarGeometry(series, labels, options.stacked === true);
+  }
+  if (type === "line") {
+    return buildLineGeometry(series, labels);
+  }
+  return buildAreaGeometry(series, labels);
+};
+
+// src/components/compound/Chart/src/theme.ts
+import { styled } from "@mui/material";
+var chartTokenVars = {
+  "--chart-grid": "var(--mui-palette-divider)",
+  "--chart-grid-dasharray": "3 4",
+  "--chart-guide": "var(--mui-palette-text-primary)",
+  "--chart-guide-dasharray": "4 4",
+  "--chart-guide-opacity": "0.45",
+  "--chart-label": "var(--mui-palette-text-secondary)",
+  "--chart-ink": "var(--mui-palette-text-primary)",
+  "--chart-paper": "var(--mui-palette-background-paper)",
+  "--chart-tooltip-border": "var(--mui-palette-divider)",
+  "--chart-line": "var(--chart-series-1)",
+  "--chart-line-width": "2px",
+  "--chart-line-dasharray": "0 7",
+  "--chart-line-cap": "round",
+  "--chart-series-line-dasharray": "none",
+  "--chart-area-opacity": "0.72",
+  "--chart-bar-opacity": "1",
+  "--chart-bar-radius": "3px",
+  "--chart-pie-stroke": "var(--chart-paper)",
+  "--chart-pie-stroke-width": "2px",
+  "--chart-empty": "var(--mui-palette-text-secondary)",
+  // Hue tokens mixed with scheme chrome so series follow the theme (not raw primary/secondary).
+  "--chart-series-0": "color-mix(in lab, var(--mui-palette-info-main) 64%, var(--mui-palette-primary-main))",
+  "--chart-series-1": "color-mix(in lab, var(--mui-palette-system-main) 64%, var(--mui-palette-secondary-main))",
+  "--chart-series-2": "color-mix(in lab, var(--mui-palette-insight-main) 64%, var(--mui-palette-primary-dark))",
+  "--chart-series-3": "color-mix(in lab, var(--mui-palette-success-main) 64%, var(--mui-palette-secondary-dark))",
+  "--chart-series-4": "color-mix(in lab, var(--mui-palette-error-main) 64%, var(--mui-palette-primary-main))",
+  "--chart-series-5": "color-mix(in lab, var(--mui-palette-system-light) 58%, var(--mui-palette-primary-main))",
+  "--chart-series-6": "color-mix(in lab, var(--mui-palette-insight-light) 58%, var(--mui-palette-secondary-main))",
+  "--chart-series-7": "color-mix(in lab, var(--mui-palette-insight-dark) 58%, var(--mui-palette-text-primary))"
+};
+var ChartRoot = styled(default2)({
+  display: "flex",
+  flexDirection: "column",
+  gap: 12,
+  width: "100%",
+  minWidth: 0
+});
+var chartSeriesColorVar = (index) => `var(--chart-series-${index})`;
+var chartSeriesTokenStyle = (series) => {
+  const vars = {};
+  series.forEach((item, index) => {
+    if (item.color) {
+      vars[`--chart-series-${index}`] = item.color;
+    }
+  });
+  if (series.length > 0) {
+    vars["--chart-line"] = chartSeriesColorVar(series.length - 1);
+  }
+  return vars;
+};
+var isCssVarKey = (key) => key.startsWith("--");
+var hoistChartCssVars = (sx) => {
+  if (sx == null || typeof sx === "function") {
+    return { style: {}, sx };
+  }
+  if (Array.isArray(sx)) {
+    const style2 = {};
+    const rest2 = [];
+    for (const part of sx) {
+      const next = hoistChartCssVars(part);
+      Object.assign(style2, next.style);
+      if (next.sx != null) {
+        rest2.push(next.sx);
+      }
+    }
+    if (rest2.length === 0) {
+      return { style: style2 };
+    }
+    return {
+      style: style2,
+      sx: rest2.length === 1 ? rest2[0] : rest2
+    };
+  }
+  const style = {};
+  const rest = {};
+  for (const [key, value] of Object.entries(sx)) {
+    if (isCssVarKey(key) && value != null) {
+      style[key] = String(value);
+    } else {
+      rest[key] = value;
+    }
+  }
+  return {
+    style,
+    sx: Object.keys(rest).length > 0 ? rest : void 0
+  };
+};
+var toChartStyle = (...parts) => {
+  const merged = {};
+  for (const part of parts) {
+    if (part) {
+      Object.assign(merged, part);
+    }
+  }
+  return Object.keys(merged).length > 0 ? merged : void 0;
+};
+var chartLabelSx = {
+  fontSize: 12,
+  lineHeight: 1.2,
+  color: "var(--chart-label)",
+  fontVariantNumeric: "tabular-nums",
+  whiteSpace: "nowrap"
+};
+var chartInkSx = {
+  ...chartLabelSx,
+  color: "var(--chart-ink)"
+};
+var chartPlotBoxSx = {
+  position: "relative",
+  minWidth: 0,
+  minHeight: 220,
+  height: "100%",
+  overflow: "visible",
+  cursor: "crosshair"
+};
+var chartSvgSx = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  display: "block",
+  overflow: "visible",
+  pointerEvents: "none",
+  "& [data-chart-grid]": {
+    stroke: "var(--chart-grid)",
+    strokeDasharray: "var(--chart-grid-dasharray)"
+  },
+  "& [data-chart-area]": {
+    fillOpacity: "var(--chart-area-opacity)"
+  },
+  "& [data-chart-bar]": {
+    fillOpacity: "var(--chart-bar-opacity)",
+    rx: "var(--chart-bar-radius)",
+    ry: "var(--chart-bar-radius)"
+  },
+  "& [data-chart-slice]": {
+    stroke: "var(--chart-pie-stroke)",
+    strokeWidth: "var(--chart-pie-stroke-width)"
+  },
+  "& [data-chart-series-line]": {
+    fill: "none",
+    strokeWidth: "var(--chart-line-width)",
+    strokeDasharray: "var(--chart-series-line-dasharray)",
+    strokeLinecap: "var(--chart-line-cap)"
+  },
+  "& [data-chart-line]": {
+    fill: "none",
+    stroke: "var(--chart-line)",
+    strokeWidth: "var(--chart-line-width)",
+    strokeDasharray: "var(--chart-line-dasharray)",
+    strokeLinecap: "var(--chart-line-cap)"
+  },
+  "& [data-chart-guide]": {
+    stroke: "var(--chart-guide)",
+    strokeOpacity: "var(--chart-guide-opacity)",
+    strokeDasharray: "var(--chart-guide-dasharray)"
+  },
+  "& [data-chart-marker]": {
+    fill: "var(--chart-paper)",
+    strokeWidth: "var(--chart-line-width)"
+  }
+};
+var chartTooltipSx = {
+  position: "absolute",
+  zIndex: 2,
+  pointerEvents: "none",
+  px: 1.25,
+  py: 0.75,
+  minWidth: 148,
+  borderRadius: 1.5,
+  border: "1px solid",
+  borderColor: "var(--chart-tooltip-border)",
+  bgcolor: "var(--chart-paper)",
+  boxShadow: 2,
+  color: "var(--chart-ink)"
+};
+var chartLiveRegionSx = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)"
+};
+
+// src/components/compound/Chart/src/render/ChartHover.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var tooltipTransform = (point, labelCount, viewWidth, viewHeight) => {
+  const flipX = point.showGuide === false ? point.x >= viewWidth * 0.5 : point.index >= labelCount * 0.65;
+  const flipY = point.showGuide === false ? point.y < viewHeight * 0.45 : point.y < CHART_PAD.top + 64;
+  return `translate(${flipX ? "-108%" : "10px"}, ${flipY ? "12px" : "calc(-100% - 10px)"})`;
+};
+var ChartHover = memo(function ChartHover2({
+  point,
+  labelCount,
+  plotHeight,
+  viewWidth,
+  viewHeight,
+  formatX,
+  formatY
+}) {
+  const markers = point.markers ?? [
+    { x: point.x, y: point.y, color: "var(--chart-line)" }
+  ];
+  const liveValue = point.rows.length === 1 ? point.rows[0].value : point.total;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      default2,
+      {
+        component: "svg",
+        viewBox: `0 0 ${viewWidth} ${viewHeight}`,
+        preserveAspectRatio: point.showGuide === false ? "xMidYMid meet" : "none",
+        sx: chartSvgSx,
+        "aria-hidden": true,
+        children: [
+          point.showGuide === false ? null : /* @__PURE__ */ jsx(
+            "line",
+            {
+              "data-chart-guide": "",
+              x1: point.x,
+              x2: point.x,
+              y1: CHART_PAD.top,
+              y2: CHART_PAD.top + plotHeight,
+              vectorEffect: "non-scaling-stroke"
+            }
+          ),
+          markers.map((marker, index) => /* @__PURE__ */ jsx(
+            "circle",
+            {
+              "data-chart-marker": "",
+              cx: marker.x,
+              cy: marker.y,
+              r: 4,
+              stroke: marker.color,
+              vectorEffect: "non-scaling-stroke"
+            },
+            `${marker.x}-${marker.y}-${index}`
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      default2,
+      {
+        sx: chartTooltipSx,
+        style: {
+          left: `${point.x / viewWidth * 100}%`,
+          top: `${point.y / viewHeight * 100}%`,
+          transform: tooltipTransform(point, labelCount, viewWidth, viewHeight)
+        },
+        children: [
+          /* @__PURE__ */ jsx(default4, { sx: mergeSx(chartInkSx, { fontWeight: 700 }), children: formatX(point.label) }),
+          /* @__PURE__ */ jsxs(default3, { spacing: 0.35, sx: { mt: 0.5 }, children: [
+            point.rows.map((row) => /* @__PURE__ */ jsxs(
+              default3,
+              {
+                direction: "row",
+                spacing: 1,
+                sx: { alignItems: "center", justifyContent: "space-between" },
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    default3,
+                    {
+                      direction: "row",
+                      spacing: 0.75,
+                      sx: { alignItems: "center", minWidth: 0 },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          default2,
+                          {
+                            sx: {
+                              width: 8,
+                              height: 8,
+                              borderRadius: 0.5,
+                              backgroundColor: row.color,
+                              flexShrink: 0
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(default4, { sx: chartInkSx, children: row.label })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(default4, { sx: mergeSx(chartInkSx, { fontWeight: 600 }), children: formatY(row.value) })
+                ]
+              },
+              row.id
+            )),
+            point.showTotal ? /* @__PURE__ */ jsxs(
+              default3,
+              {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  pt: 0.35,
+                  borderTop: "1px solid",
+                  borderColor: "var(--chart-tooltip-border)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(default4, { sx: mergeSx(chartInkSx, { fontWeight: 700 }), children: "Total" }),
+                  /* @__PURE__ */ jsx(default4, { sx: mergeSx(chartInkSx, { fontWeight: 700 }), children: formatY(point.total) })
+                ]
+              }
+            ) : null
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(default2, { component: "span", "aria-live": "polite", sx: chartLiveRegionSx, children: `${formatX(point.label)} ${formatY(liveValue)}` })
+  ] });
+});
+
+// src/components/compound/Chart/src/render/ChartLegend.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChartLegend({
+  series
+}) {
+  if (series.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(default3, { direction: "row", spacing: 2, sx: { flexWrap: "wrap", rowGap: 1 }, children: series.map((item, index) => /* @__PURE__ */ jsxs2(
+    default3,
+    {
+      direction: "row",
+      spacing: 0.75,
+      sx: { alignItems: "center" },
+      children: [
+        /* @__PURE__ */ jsx2(
+          default2,
+          {
+            sx: {
+              width: 10,
+              height: 10,
+              borderRadius: 0.5,
+              backgroundColor: chartSeriesColorVar(index),
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(default4, { sx: chartLabelSx, children: item.label })
+      ]
+    },
+    item.id
+  )) });
+}
+
+// src/components/compound/Chart/src/render/ChartPlot.tsx
+import { memo as memo2 } from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Grid = ({
+  yTicks,
+  peak,
+  plotHeight,
+  viewWidth
+}) => /* @__PURE__ */ jsx3(Fragment2, { children: yTicks.map((tick) => {
+  const y = CHART_PAD.top + plotHeight - tick / peak * plotHeight;
+  return /* @__PURE__ */ jsx3(
+    "line",
+    {
+      "data-chart-grid": "",
+      x1: CHART_PAD.left,
+      x2: viewWidth - CHART_PAD.right,
+      y1: y,
+      y2: y
+    },
+    tick
+  );
+}) });
+var ChartPlot = memo2(function ChartPlot2({
+  geometry,
+  showLine,
+  ariaLabel
+}) {
+  const meet = geometry.kind === "pie";
+  return /* @__PURE__ */ jsxs3(
+    default2,
+    {
+      component: "svg",
+      viewBox: `0 0 ${geometry.viewWidth} ${geometry.viewHeight}`,
+      preserveAspectRatio: meet ? "xMidYMid meet" : "none",
+      sx: chartSvgSx,
+      role: "img",
+      "aria-label": ariaLabel,
+      children: [
+        geometry.kind === "area" ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(
+            Grid,
+            {
+              yTicks: geometry.yTicks,
+              peak: geometry.peak,
+              plotHeight: geometry.plotHeight,
+              viewWidth: geometry.viewWidth
+            }
+          ),
+          geometry.stacked.map((item) => /* @__PURE__ */ jsx3(
+            "path",
+            {
+              "data-chart-area": "",
+              d: item.areaD,
+              fill: item.color
+            },
+            item.id
+          )),
+          showLine && geometry.lineD ? /* @__PURE__ */ jsx3(
+            "path",
+            {
+              "data-chart-line": "",
+              d: geometry.lineD,
+              vectorEffect: "non-scaling-stroke"
+            }
+          ) : null
+        ] }) : null,
+        geometry.kind === "line" ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(
+            Grid,
+            {
+              yTicks: geometry.yTicks,
+              peak: geometry.peak,
+              plotHeight: geometry.plotHeight,
+              viewWidth: geometry.viewWidth
+            }
+          ),
+          geometry.lines.map((item) => /* @__PURE__ */ jsx3(
+            "path",
+            {
+              "data-chart-series-line": "",
+              d: item.d,
+              stroke: item.color,
+              vectorEffect: "non-scaling-stroke"
+            },
+            item.id
+          ))
+        ] }) : null,
+        geometry.kind === "bar" ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(
+            Grid,
+            {
+              yTicks: geometry.yTicks,
+              peak: geometry.peak,
+              plotHeight: geometry.plotHeight,
+              viewWidth: geometry.viewWidth
+            }
+          ),
+          geometry.bars.map((item) => /* @__PURE__ */ jsx3(
+            "rect",
+            {
+              "data-chart-bar": "",
+              x: item.x,
+              y: item.y,
+              width: item.width,
+              height: item.height,
+              fill: item.color
+            },
+            item.id
+          ))
+        ] }) : null,
+        geometry.kind === "pie" ? geometry.slices.map((slice) => /* @__PURE__ */ jsx3(
+          "path",
+          {
+            "data-chart-slice": "",
+            d: slice.d,
+            fill: slice.color
+          },
+          slice.id
+        )) : null
+      ]
+    }
+  );
+});
+
+// src/components/compound/Chart/src/Chart.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var identity = (value) => value;
+var formatNumber = (value) => String(value);
+function Chart({
+  type = "area",
+  series,
+  labels = [],
+  stacked = false,
+  hole = 0,
+  showLine = true,
+  formatX = identity,
+  formatY = formatNumber,
+  ariaLabel = "Chart",
+  emptyMessage = "No data",
+  sx
+}) {
+  const geometry = useMemo(
+    () => buildChartGeometry(series, labels, { type, stacked, hole }),
+    [hole, labels, series, stacked, type]
+  );
+  const [hoverIndex, setHoverIndex] = useState(null);
+  const isEmpty = geometry.hoverPoints.length === 0;
+  const isPie = geometry.kind === "pie";
+  const hoverPoint = hoverIndex == null ? null : geometry.hoverPoints[hoverIndex] ?? null;
+  const onPointerMove = useCallback(
+    (event) => {
+      const next = hitIndex(
+        event.clientX,
+        event.clientY,
+        event.currentTarget.getBoundingClientRect(),
+        geometry
+      );
+      setHoverIndex((current) => current === next ? current : next);
+    },
+    [geometry]
+  );
+  const onPointerLeave = useCallback(() => {
+    setHoverIndex(null);
+  }, []);
+  const hoisted = hoistChartCssVars(sx);
+  const plot = /* @__PURE__ */ jsxs4(
+    default2,
+    {
+      sx: mergeSx(
+        chartPlotBoxSx,
+        isPie ? {
+          aspectRatio: "1 / 1",
+          maxWidth: 320,
+          mx: "auto",
+          height: "auto",
+          minHeight: 240,
+          cursor: "pointer"
+        } : void 0
+      ),
+      onPointerMove: isEmpty ? void 0 : onPointerMove,
+      onPointerLeave: isEmpty ? void 0 : onPointerLeave,
+      children: [
+        isEmpty ? /* @__PURE__ */ jsx4(
+          default2,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx4(default4, { sx: { color: "var(--chart-empty)" }, children: emptyMessage })
+          }
+        ) : /* @__PURE__ */ jsx4(
+          ChartPlot,
+          {
+            geometry,
+            showLine,
+            ariaLabel
+          }
+        ),
+        hoverPoint ? /* @__PURE__ */ jsx4(
+          ChartHover,
+          {
+            point: hoverPoint,
+            labelCount: geometry.hoverPoints.length,
+            plotHeight: geometry.plotHeight,
+            viewWidth: geometry.viewWidth,
+            viewHeight: geometry.viewHeight,
+            formatX,
+            formatY
+          }
+        ) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs4(
+    ChartRoot,
+    {
+      style: toChartStyle(
+        chartTokenVars,
+        chartSeriesTokenStyle(series),
+        hoisted.style
+      ),
+      sx: hoisted.sx,
+      children: [
+        isPie ? plot : /* @__PURE__ */ jsxs4(
+          default2,
+          {
+            sx: {
+              display: "grid",
+              gridTemplateColumns: "auto minmax(0, 1fr)",
+              gridTemplateRows: "minmax(220px, 240px) auto",
+              columnGap: 1,
+              rowGap: 0.75,
+              width: "100%"
+            },
+            children: [
+              /* @__PURE__ */ jsx4(
+                default3,
+                {
+                  sx: {
+                    justifyContent: "space-between",
+                    alignItems: "flex-end",
+                    py: 0.25,
+                    minWidth: 56
+                  },
+                  children: geometry.yTicks.map((tick) => /* @__PURE__ */ jsx4(default4, { component: "span", sx: chartLabelSx, children: formatY(tick) }, tick))
+                }
+              ),
+              plot,
+              /* @__PURE__ */ jsx4(default2, {}),
+              /* @__PURE__ */ jsx4(default2, { sx: { position: "relative", height: 16, minWidth: 0, overflow: "hidden" }, children: geometry.xLabels.map(({ label, index }) => {
+                const x = labels.length === 1 ? 0.5 : index / Math.max(labels.length - 1, 1);
+                const isFirst = labels.length > 1 && index === 0;
+                const isLast = labels.length > 1 && index === labels.length - 1;
+                return /* @__PURE__ */ jsx4(
+                  default4,
+                  {
+                    component: "span",
+                    sx: mergeSx(chartLabelSx, {
+                      position: "absolute",
+                      left: `${x * 100}%`,
+                      top: 0,
+                      transform: isFirst ? "none" : isLast ? "translateX(-100%)" : "translateX(-50%)"
+                    }),
+                    children: formatX(label)
+                  },
+                  `${label}-${index}`
+                );
+              }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4(ChartLegend, { series: geometry.legend })
+      ]
+    }
+  );
+}
+
+export {
+  Chart
+};
+//# sourceMappingURL=chunk-QKGCW37O.mjs.map