@marcoschwartz/lite-ui 0.20.0 → 0.22.0

package/dist/index.js

@@ -50,10 +50,14 @@ __export(index_exports, {
   BookIcon: () => BookIcon,
   BrainIcon: () => BrainIcon,
   Button: () => Button,
+  CHART_DEFAULTS: () => CHART_DEFAULTS,
   Calendar: () => Calendar,
+  CalendarHeatmap: () => CalendarHeatmap,
   CalendarIcon: () => CalendarIcon,
   CameraIcon: () => CameraIcon,
   Card: () => Card,
+  CartesianGrid: () => CartesianGrid,
+  ChartTooltip: () => ChartTooltip,
   ChatIcon: () => ChatIcon,
   CheckCircleIcon: () => CheckCircleIcon,
   CheckIcon: () => CheckIcon,
@@ -86,10 +90,12 @@ __export(index_exports, {
   GlobeIcon: () => GlobeIcon,
   GoogleIcon: () => GoogleIcon,
   HeartIcon: () => HeartIcon,
+  Heatmap: () => Heatmap,
   HomeIcon: () => HomeIcon,
   ImageIcon: () => ImageIcon,
   InfoCircleIcon: () => InfoCircleIcon,
   KeyIcon: () => KeyIcon,
+  Legend: () => Legend,
   LineChart: () => LineChart,
   LinkedInIcon: () => LinkedInIcon,
   LockIcon: () => LockIcon,
@@ -106,9 +112,13 @@ __export(index_exports, {
   PlusIcon: () => PlusIcon,
   ProgressBar: () => ProgressBar,
   Radio: () => Radio,
+  ReferenceArea: () => ReferenceArea,
+  ReferenceLine: () => ReferenceLine,
   RefreshIcon: () => RefreshIcon,
+  ResponsiveContainer: () => ResponsiveContainer,
   RichTextEditor: () => RichTextEditor,
   SaveIcon: () => SaveIcon,
+  ScatterChart: () => ScatterChart,
   SearchIcon: () => SearchIcon,
   Select: () => Select,
   SettingsIcon: () => SettingsIcon,
@@ -147,7 +157,8 @@ __export(index_exports, {
   toast: () => toast,
   useSidebar: () => useSidebar,
   useTheme: () => useTheme,
-  useToast: () => useToast
+  useToast: () => useToast,
+  useTooltip: () => useTooltip
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -2358,7 +2369,7 @@ var DatePicker = ({
     onChange?.(today);
     setIsOpen(false);
   };
-  const formatDate = (date) => {
+  const formatDate2 = (date) => {
     if (!date) return "";
     return date.toLocaleDateString("en-US", {
       month: "short",
@@ -2451,7 +2462,7 @@ var DatePicker = ({
         onClick: () => !disabled && setIsOpen(!isOpen),
         className: `${baseStyles} ${errorStyles} ${disabledStyles} flex items-center justify-between`.trim(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDate(value) : placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: !value ? "text-gray-500 dark:text-gray-400" : "", children: value ? formatDate2(value) : placeholder }),
           /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { className: "w-5 h-5 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
         ]
       }
@@ -5382,367 +5393,2254 @@ var VideoPlayer = ({
   ] });
 };
 
-// src/components/LineChart.tsx
+// src/charts/LineChart.tsx
+var import_react28 = __toESM(require("react"));
+
+// src/charts/constants.ts
+var CHART_DEFAULTS = {
+  viewBox: {
+    width: 1e3,
+    height: 600,
+    pieSize: 600
+  },
+  padding: {
+    top: 40,
+    right: 40,
+    bottom: 60,
+    left: 60
+  },
+  fontSize: {
+    gridLabel: 12,
+    axisLabel: 14,
+    title: 16,
+    tooltip: 12
+  },
+  colors: [
+    "#3b82f6",
+    // blue-500
+    "#10b981",
+    // emerald-500
+    "#f59e0b",
+    // amber-500
+    "#ef4444",
+    // red-500
+    "#8b5cf6",
+    // violet-500
+    "#ec4899",
+    // pink-500
+    "#06b6d4",
+    // cyan-500
+    "#f97316",
+    // orange-500
+    "#84cc16",
+    // lime-500
+    "#6366f1"
+    // indigo-500
+  ],
+  animation: {
+    duration: 300,
+    easing: "ease-out"
+  },
+  grid: {
+    strokeDasharray: "3 3",
+    strokeWidth: 1
+  },
+  line: {
+    strokeWidth: 2,
+    dotRadius: 4,
+    activeDotRadius: 6
+  },
+  bar: {
+    radius: 4,
+    gap: 0.1
+    // 10% gap between bars
+  },
+  tooltip: {
+    offset: 10
+  }
+};
+
+// src/charts/utils/scales.ts
+function scaleLinear({ domain, range, nice = false, clamp = false }) {
+  let [d0, d1] = domain;
+  const [r0, r1] = range;
+  if (nice) {
+    const span = d1 - d0;
+    const step = Math.pow(10, Math.floor(Math.log10(span))) / 2;
+    d0 = Math.floor(d0 / step) * step;
+    d1 = Math.ceil(d1 / step) * step;
+  }
+  const domainSpan = d1 - d0;
+  const rangeSpan = r1 - r0;
+  return (value) => {
+    if (domainSpan === 0) return (r0 + r1) / 2;
+    let normalized = (value - d0) / domainSpan;
+    if (clamp) {
+      normalized = Math.max(0, Math.min(1, normalized));
+    }
+    return r0 + normalized * rangeSpan;
+  };
+}
+function scaleBand({ domain, range, padding = 0.1, paddingInner, paddingOuter }) {
+  const [r0, r1] = range;
+  const n = domain.length;
+  if (n === 0) {
+    return {
+      scale: (_value) => r0,
+      bandwidth: () => 0,
+      step: () => 0
+    };
+  }
+  const inner = paddingInner ?? padding;
+  const outer = paddingOuter ?? padding;
+  const totalRange = r1 - r0;
+  const step = totalRange / (n + outer * 2 - inner);
+  const bandwidth = step * (1 - inner);
+  const start = r0 + step * outer;
+  const indexMap = new Map(domain.map((d, i) => [d, i]));
+  return {
+    scale: (value) => {
+      const index = indexMap.get(value);
+      if (index === void 0) return r0;
+      return start + index * step;
+    },
+    bandwidth: () => bandwidth,
+    step: () => step
+  };
+}
+function getTicks(domain, count = 5) {
+  const [min, max] = domain;
+  const span = max - min;
+  if (span === 0) return [min];
+  const step = span / (count - 1);
+  const ticks = [];
+  for (let i = 0; i < count; i++) {
+    ticks.push(min + step * i);
+  }
+  return ticks;
+}
+function calculateDomain(values, options = {}) {
+  const { includeZero = true, padding = 0.1 } = options;
+  if (values.length === 0) return [0, 1];
+  let min = Math.min(...values);
+  let max = Math.max(...values);
+  if (includeZero) {
+    min = Math.min(0, min);
+  }
+  const span = max - min;
+  const pad = span * padding;
+  return [min - (includeZero && min >= 0 ? 0 : pad), max + pad];
+}
+
+// src/charts/utils/paths.ts
+function generateLinePath(points) {
+  if (points.length === 0) return "";
+  if (points.length === 1) return `M ${points[0].x} ${points[0].y}`;
+  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+}
+function generateMonotonePath(points) {
+  if (points.length === 0) return "";
+  if (points.length === 1) return `M ${points[0].x} ${points[0].y}`;
+  if (points.length === 2) return generateLinePath(points);
+  const tangents = [];
+  for (let i = 0; i < points.length; i++) {
+    if (i === 0) {
+      tangents.push((points[1].y - points[0].y) / (points[1].x - points[0].x));
+    } else if (i === points.length - 1) {
+      tangents.push((points[i].y - points[i - 1].y) / (points[i].x - points[i - 1].x));
+    } else {
+      const d0 = (points[i].y - points[i - 1].y) / (points[i].x - points[i - 1].x);
+      const d1 = (points[i + 1].y - points[i].y) / (points[i + 1].x - points[i].x);
+      tangents.push((d0 + d1) / 2);
+    }
+  }
+  let path = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = points[i];
+    const p1 = points[i + 1];
+    const dx = (p1.x - p0.x) / 3;
+    const cp1x = p0.x + dx;
+    const cp1y = p0.y + tangents[i] * dx;
+    const cp2x = p1.x - dx;
+    const cp2y = p1.y - tangents[i + 1] * dx;
+    path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p1.x} ${p1.y}`;
+  }
+  return path;
+}
+function generateStepPath(points, position = "after") {
+  if (points.length === 0) return "";
+  if (points.length === 1) return `M ${points[0].x} ${points[0].y}`;
+  let path = `M ${points[0].x} ${points[0].y}`;
+  for (let i = 1; i < points.length; i++) {
+    const prev = points[i - 1];
+    const curr = points[i];
+    if (position === "before") {
+      path += ` V ${curr.y} H ${curr.x}`;
+    } else if (position === "after") {
+      path += ` H ${curr.x} V ${curr.y}`;
+    } else {
+      const midX = (prev.x + curr.x) / 2;
+      path += ` H ${midX} V ${curr.y} H ${curr.x}`;
+    }
+  }
+  return path;
+}
+function generateAreaPath(points, baseline, curved = false) {
+  if (points.length === 0) return "";
+  const linePath = curved ? generateMonotonePath(points) : generateLinePath(points);
+  const lastPoint = points[points.length - 1];
+  const firstPoint = points[0];
+  return `${linePath} L ${lastPoint.x} ${baseline} L ${firstPoint.x} ${baseline} Z`;
+}
+function generateStackedAreaPath(topPoints, bottomPoints, curved = false) {
+  if (topPoints.length === 0) return "";
+  const topPath = curved ? generateMonotonePath(topPoints) : generateLinePath(topPoints);
+  const reversedBottom = [...bottomPoints].reverse();
+  const bottomPath = reversedBottom.map((p, i) => `${i === 0 ? "L" : "L"} ${p.x} ${p.y}`).join(" ");
+  return `${topPath} ${bottomPath} Z`;
+}
+function generateArcPath(centerX, centerY, radius, startAngle, endAngle, innerRadius = 0) {
+  const startRad = (startAngle - 90) * Math.PI / 180;
+  const endRad = (endAngle - 90) * Math.PI / 180;
+  const x1 = centerX + radius * Math.cos(startRad);
+  const y1 = centerY + radius * Math.sin(startRad);
+  const x2 = centerX + radius * Math.cos(endRad);
+  const y2 = centerY + radius * Math.sin(endRad);
+  const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+  if (innerRadius === 0) {
+    return [
+      `M ${centerX} ${centerY}`,
+      `L ${x1} ${y1}`,
+      `A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}`,
+      "Z"
+    ].join(" ");
+  } else {
+    const ix1 = centerX + innerRadius * Math.cos(startRad);
+    const iy1 = centerY + innerRadius * Math.sin(startRad);
+    const ix2 = centerX + innerRadius * Math.cos(endRad);
+    const iy2 = centerY + innerRadius * Math.sin(endRad);
+    return [
+      `M ${x1} ${y1}`,
+      `A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}`,
+      `L ${ix2} ${iy2}`,
+      `A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${ix1} ${iy1}`,
+      "Z"
+    ].join(" ");
+  }
+}
+
+// src/charts/utils/format.ts
+function formatNumber(value, options = {}) {
+  const { precision = 2, compact = false, prefix = "", suffix = "" } = options;
+  if (compact) {
+    const absValue = Math.abs(value);
+    if (absValue >= 1e9) {
+      return `${prefix}${(value / 1e9).toFixed(1)}B${suffix}`;
+    }
+    if (absValue >= 1e6) {
+      return `${prefix}${(value / 1e6).toFixed(1)}M${suffix}`;
+    }
+    if (absValue >= 1e3) {
+      return `${prefix}${(value / 1e3).toFixed(1)}K${suffix}`;
+    }
+  }
+  const formatted = value.toFixed(precision);
+  const trimmed = parseFloat(formatted).toString();
+  return `${prefix}${trimmed}${suffix}`;
+}
+function formatPercent(value, options = {}) {
+  const { precision = 1, multiply = false } = options;
+  const percent = multiply ? value * 100 : value;
+  return `${percent.toFixed(precision)}%`;
+}
+function formatDate(date, rangeMs) {
+  const minute = 60 * 1e3;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+  const month = 30 * day;
+  const year = 365 * day;
+  if (!rangeMs) {
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  }
+  if (rangeMs < hour) {
+    return date.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    });
+  } else if (rangeMs < day) {
+    return date.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  } else if (rangeMs < month) {
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+  } else if (rangeMs < year) {
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric"
+    });
+  } else {
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      year: "numeric"
+    });
+  }
+}
+function createTickFormatter(domain) {
+  const [min, max] = domain;
+  const range = max - min;
+  let precision = 0;
+  if (range < 1) {
+    precision = 2;
+  } else if (range < 10) {
+    precision = 1;
+  }
+  const compact = Math.abs(max) >= 1e3 || Math.abs(min) >= 1e3;
+  return (value) => formatNumber(value, { precision, compact });
+}
+
+// src/charts/components/ChartTooltip.tsx
 var import_react26 = __toESM(require("react"));
 var import_jsx_runtime108 = require("react/jsx-runtime");
-var defaultColors = [
-  "#3b82f6",
-  // blue-500
-  "#10b981",
-  // green-500
-  "#f59e0b",
-  // amber-500
-  "#ef4444",
-  // red-500
-  "#8b5cf6",
-  // violet-500
-  "#ec4899"
-  // pink-500
-];
+var DefaultTooltipContent = ({
+  active,
+  label,
+  payload,
+  formatter,
+  labelFormatter
+}) => {
+  if (!active || !payload || payload.length === 0) {
+    return null;
+  }
+  const formattedLabel = labelFormatter ? labelFormatter(label ?? "") : String(label ?? "");
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "bg-gray-900 dark:bg-gray-800 text-white rounded-lg shadow-xl border border-gray-700 overflow-hidden min-w-[120px]", children: [
+    formattedLabel && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "px-3 py-2 bg-gray-800 dark:bg-gray-700 border-b border-gray-700 dark:border-gray-600", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-sm font-medium text-gray-200", children: formattedLabel }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "px-3 py-2 space-y-1", children: payload.map((item, index) => {
+      const formattedValue = formatter ? formatter(item.value, item.name, item) : String(item.value);
+      return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center gap-2", children: [
+          item.color && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+            "span",
+            {
+              className: "w-2.5 h-2.5 rounded-full flex-shrink-0",
+              style: { backgroundColor: item.color }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-xs text-gray-300", children: item.name })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-sm font-semibold text-white", children: formattedValue })
+      ] }, `${item.name}-${index}`);
+    }) })
+  ] });
+};
+var ChartTooltip = ({
+  active = false,
+  label,
+  payload,
+  content,
+  x = 0,
+  y = 0,
+  offset = 12,
+  formatter,
+  labelFormatter,
+  className = "",
+  containerBounds,
+  animationDuration = 150
+}) => {
+  const tooltipRef = (0, import_react26.useRef)(null);
+  const [position, setPosition] = (0, import_react26.useState)({ x: 0, y: 0 });
+  const [isVisible, setIsVisible] = (0, import_react26.useState)(false);
+  (0, import_react26.useEffect)(() => {
+    if (!active || !tooltipRef.current) {
+      setIsVisible(false);
+      return;
+    }
+    const tooltip = tooltipRef.current;
+    const tooltipRect = tooltip.getBoundingClientRect();
+    const tooltipWidth = tooltipRect.width || 150;
+    const tooltipHeight = tooltipRect.height || 80;
+    let newX = x + offset;
+    let newY = y - tooltipHeight / 2;
+    if (containerBounds && newX + tooltipWidth > containerBounds.width) {
+      newX = x - tooltipWidth - offset;
+    }
+    if (newX < 0) {
+      newX = offset;
+    }
+    if (newY < 0) {
+      newY = offset;
+    }
+    if (containerBounds && newY + tooltipHeight > containerBounds.height) {
+      newY = containerBounds.height - tooltipHeight - offset;
+    }
+    setPosition({ x: newX, y: newY });
+    setIsVisible(true);
+  }, [active, x, y, offset, containerBounds]);
+  if (!active) {
+    return null;
+  }
+  const tooltipContent = content ? import_react26.default.isValidElement(content) ? import_react26.default.cloneElement(content, {
+    active,
+    label,
+    payload,
+    formatter,
+    labelFormatter
+  }) : import_react26.default.createElement(content, {
+    active,
+    label,
+    payload,
+    formatter,
+    labelFormatter
+  }) : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    DefaultTooltipContent,
+    {
+      active,
+      label,
+      payload,
+      formatter,
+      labelFormatter
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    "div",
+    {
+      ref: tooltipRef,
+      className: `absolute pointer-events-none z-50 ${className}`,
+      style: {
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        opacity: isVisible ? 1 : 0,
+        transform: `translateZ(0)`,
+        transition: animationDuration > 0 ? `opacity ${animationDuration}ms ease-out` : void 0
+      },
+      children: tooltipContent
+    }
+  );
+};
+function useTooltip() {
+  const [tooltipData, setTooltipData] = (0, import_react26.useState)({
+    active: false,
+    x: 0,
+    y: 0,
+    label: void 0,
+    payload: void 0
+  });
+  const showTooltip = import_react26.default.useCallback((data) => {
+    setTooltipData({
+      active: true,
+      ...data
+    });
+  }, []);
+  const hideTooltip = import_react26.default.useCallback(() => {
+    setTooltipData((prev) => ({
+      ...prev,
+      active: false
+    }));
+  }, []);
+  const updatePosition = import_react26.default.useCallback((x, y) => {
+    setTooltipData((prev) => ({
+      ...prev,
+      x,
+      y
+    }));
+  }, []);
+  return {
+    tooltipData,
+    showTooltip,
+    hideTooltip,
+    updatePosition
+  };
+}
+
+// src/charts/components/Legend.tsx
+var import_jsx_runtime109 = require("react/jsx-runtime");
+var Legend = ({
+  items = [],
+  layout = "horizontal",
+  align = "center",
+  verticalAlign = "bottom",
+  iconSize = 12,
+  formatter,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  className = "",
+  wrapperStyle
+}) => {
+  const alignClass = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end"
+  }[align];
+  const layoutClass = layout === "horizontal" ? "flex-row flex-wrap" : "flex-col";
+  const renderIcon = (item) => {
+    const style = { backgroundColor: item.color };
+    switch (item.type) {
+      case "line":
+        return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+          "div",
+          {
+            className: "flex-shrink-0",
+            style: {
+              width: iconSize,
+              height: 2,
+              backgroundColor: item.color
+            }
+          }
+        );
+      case "circle":
+        return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+          "div",
+          {
+            className: "rounded-full flex-shrink-0",
+            style: {
+              width: iconSize,
+              height: iconSize,
+              ...style
+            }
+          }
+        );
+      case "rect":
+      case "square":
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+          "div",
+          {
+            className: "rounded-sm flex-shrink-0",
+            style: {
+              width: iconSize,
+              height: iconSize,
+              ...style
+            }
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+    "div",
+    {
+      className: `flex gap-4 px-4 py-2 ${layoutClass} ${alignClass} ${className}`,
+      style: wrapperStyle,
+      children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: `
+            flex items-center gap-2 text-sm transition-opacity
+            ${onClick ? "cursor-pointer hover:opacity-80" : "cursor-default"}
+            ${item.inactive ? "opacity-40" : "opacity-100"}
+          `,
+          onClick: () => onClick?.(item, index),
+          onMouseEnter: () => onMouseEnter?.(item, index),
+          onMouseLeave,
+          children: [
+            renderIcon(item),
+            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "text-gray-700 dark:text-gray-300", children: formatter ? formatter(item.name, item, index) : item.name })
+          ]
+        },
+        `${item.name}-${index}`
+      ))
+    }
+  );
+};
+
+// src/charts/components/ReferenceLine.tsx
+var import_jsx_runtime110 = require("react/jsx-runtime");
+var ReferenceLine = ({
+  x,
+  y,
+  stroke = "#94a3b8",
+  strokeWidth = 1,
+  strokeDasharray = "4 4",
+  label,
+  labelPosition = "end",
+  className = "",
+  ifOverflow = "hidden",
+  _chartDimensions,
+  _scales
+}) => {
+  if (!_chartDimensions || !_scales) {
+    return null;
+  }
+  const { width, height } = _chartDimensions;
+  const { xScale, yScale } = _scales;
+  const isHorizontal = y !== void 0;
+  const isVertical = x !== void 0;
+  if (!isHorizontal && !isVertical) {
+    return null;
+  }
+  let x1, y1, x2, y2;
+  let labelX, labelY;
+  let textAnchor = "middle";
+  let dominantBaseline = "middle";
+  if (isHorizontal && y !== void 0) {
+    const scaledY = yScale(y);
+    if (ifOverflow === "hidden" && (scaledY < 0 || scaledY > height)) {
+      return null;
+    }
+    x1 = 0;
+    y1 = scaledY;
+    x2 = width;
+    y2 = scaledY;
+    switch (labelPosition) {
+      case "start":
+        labelX = 0;
+        labelY = scaledY - 8;
+        textAnchor = "start";
+        break;
+      case "middle":
+        labelX = width / 2;
+        labelY = scaledY - 8;
+        break;
+      case "end":
+        labelX = width;
+        labelY = scaledY - 8;
+        textAnchor = "end";
+        break;
+      case "insideStart":
+        labelX = 8;
+        labelY = scaledY - 8;
+        textAnchor = "start";
+        break;
+      case "insideEnd":
+        labelX = width - 8;
+        labelY = scaledY - 8;
+        textAnchor = "end";
+        break;
+      default:
+        labelX = width;
+        labelY = scaledY - 8;
+        textAnchor = "end";
+    }
+  } else if (isVertical && x !== void 0) {
+    const scaledX = xScale(x);
+    if (ifOverflow === "hidden" && (scaledX < 0 || scaledX > width)) {
+      return null;
+    }
+    x1 = scaledX;
+    y1 = 0;
+    x2 = scaledX;
+    y2 = height;
+    switch (labelPosition) {
+      case "start":
+        labelX = scaledX;
+        labelY = -8;
+        dominantBaseline = "auto";
+        break;
+      case "middle":
+        labelX = scaledX + 8;
+        labelY = height / 2;
+        textAnchor = "start";
+        break;
+      case "end":
+        labelX = scaledX;
+        labelY = height + 16;
+        dominantBaseline = "hanging";
+        break;
+      case "insideStart":
+        labelX = scaledX + 8;
+        labelY = 16;
+        textAnchor = "start";
+        dominantBaseline = "hanging";
+        break;
+      case "insideEnd":
+        labelX = scaledX + 8;
+        labelY = height - 16;
+        textAnchor = "start";
+        dominantBaseline = "auto";
+        break;
+      default:
+        labelX = scaledX;
+        labelY = -8;
+        dominantBaseline = "auto";
+    }
+  } else {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("g", { className: `reference-line ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      "line",
+      {
+        x1,
+        y1,
+        x2,
+        y2,
+        stroke,
+        strokeWidth,
+        strokeDasharray
+      }
+    ),
+    label && (typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      "text",
+      {
+        x: labelX,
+        y: labelY,
+        textAnchor,
+        dominantBaseline,
+        fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+        fontWeight: "500",
+        className: "fill-gray-600 dark:fill-gray-400",
+        children: label
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+      "foreignObject",
+      {
+        x: labelX - 50,
+        y: labelY - 12,
+        width: 100,
+        height: 24,
+        children: label
+      }
+    ))
+  ] });
+};
+
+// src/charts/components/ReferenceArea.tsx
+var import_jsx_runtime111 = require("react/jsx-runtime");
+var ReferenceArea = ({
+  x1,
+  x2,
+  y1,
+  y2,
+  fill = "#3b82f6",
+  fillOpacity = 0.1,
+  stroke,
+  strokeWidth = 0,
+  label,
+  labelPosition = "center",
+  className = "",
+  ifOverflow = "hidden",
+  _chartDimensions,
+  _scales
+}) => {
+  if (!_chartDimensions || !_scales) {
+    return null;
+  }
+  const { width, height } = _chartDimensions;
+  const { xScale, yScale } = _scales;
+  let rectX, rectY, rectWidth, rectHeight;
+  if (x1 !== void 0 && x2 !== void 0) {
+    const scaledX1 = xScale(x1);
+    const scaledX2 = xScale(x2);
+    rectX = Math.min(scaledX1, scaledX2);
+    rectWidth = Math.abs(scaledX2 - scaledX1);
+    if (y1 !== void 0 && y2 !== void 0) {
+      const scaledY1 = yScale(y1);
+      const scaledY2 = yScale(y2);
+      rectY = Math.min(scaledY1, scaledY2);
+      rectHeight = Math.abs(scaledY2 - scaledY1);
+    } else {
+      rectY = 0;
+      rectHeight = height;
+    }
+  } else if (y1 !== void 0 && y2 !== void 0) {
+    const scaledY1 = yScale(y1);
+    const scaledY2 = yScale(y2);
+    rectY = Math.min(scaledY1, scaledY2);
+    rectHeight = Math.abs(scaledY2 - scaledY1);
+    rectX = 0;
+    rectWidth = width;
+  } else {
+    return null;
+  }
+  if (ifOverflow === "hidden") {
+    if (rectX < 0) {
+      rectWidth += rectX;
+      rectX = 0;
+    }
+    if (rectY < 0) {
+      rectHeight += rectY;
+      rectY = 0;
+    }
+    if (rectX + rectWidth > width) {
+      rectWidth = width - rectX;
+    }
+    if (rectY + rectHeight > height) {
+      rectHeight = height - rectY;
+    }
+    if (rectWidth <= 0 || rectHeight <= 0) {
+      return null;
+    }
+  }
+  let labelX, labelY;
+  let textAnchor = "middle";
+  let dominantBaseline = "middle";
+  switch (labelPosition) {
+    case "center":
+      labelX = rectX + rectWidth / 2;
+      labelY = rectY + rectHeight / 2;
+      break;
+    case "top":
+      labelX = rectX + rectWidth / 2;
+      labelY = rectY - 8;
+      dominantBaseline = "auto";
+      break;
+    case "bottom":
+      labelX = rectX + rectWidth / 2;
+      labelY = rectY + rectHeight + 16;
+      dominantBaseline = "hanging";
+      break;
+    case "left":
+      labelX = rectX - 8;
+      labelY = rectY + rectHeight / 2;
+      textAnchor = "end";
+      break;
+    case "right":
+      labelX = rectX + rectWidth + 8;
+      labelY = rectY + rectHeight / 2;
+      textAnchor = "start";
+      break;
+    case "insideTop":
+      labelX = rectX + rectWidth / 2;
+      labelY = rectY + 16;
+      dominantBaseline = "hanging";
+      break;
+    case "insideBottom":
+      labelX = rectX + rectWidth / 2;
+      labelY = rectY + rectHeight - 16;
+      dominantBaseline = "auto";
+      break;
+    default:
+      labelX = rectX + rectWidth / 2;
+      labelY = rectY + rectHeight / 2;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("g", { className: `reference-area ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+      "rect",
+      {
+        x: rectX,
+        y: rectY,
+        width: rectWidth,
+        height: rectHeight,
+        fill,
+        fillOpacity,
+        stroke,
+        strokeWidth
+      }
+    ),
+    label && (typeof label === "string" ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+      "text",
+      {
+        x: labelX,
+        y: labelY,
+        textAnchor,
+        dominantBaseline,
+        fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+        fontWeight: "500",
+        className: "fill-gray-600 dark:fill-gray-400",
+        children: label
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+      "foreignObject",
+      {
+        x: labelX - 50,
+        y: labelY - 12,
+        width: 100,
+        height: 24,
+        children: label
+      }
+    ))
+  ] });
+};
+
+// src/charts/components/CartesianGrid.tsx
+var import_react27 = require("react");
+var import_jsx_runtime112 = require("react/jsx-runtime");
+var CartesianGrid = ({
+  horizontal = true,
+  vertical = true,
+  stroke,
+  strokeDasharray = CHART_DEFAULTS.grid.strokeDasharray,
+  strokeWidth = CHART_DEFAULTS.grid.strokeWidth,
+  strokeOpacity = 0.5,
+  horizontalPoints,
+  verticalPoints,
+  className = "",
+  _chartDimensions
+}) => {
+  if (!_chartDimensions) {
+    return null;
+  }
+  const { width, height } = _chartDimensions;
+  const hPoints = (0, import_react27.useMemo)(() => {
+    if (horizontalPoints) return horizontalPoints;
+    const count = 5;
+    return Array.from({ length: count + 1 }, (_, i) => height / count * i);
+  }, [horizontalPoints, height]);
+  const vPoints = (0, import_react27.useMemo)(() => {
+    if (verticalPoints) return verticalPoints;
+    const count = 6;
+    return Array.from({ length: count + 1 }, (_, i) => width / count * i);
+  }, [verticalPoints, width]);
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)("g", { className: `cartesian-grid ${className}`, children: [
+    horizontal && hPoints.map((y, i) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      "line",
+      {
+        x1: 0,
+        y1: y,
+        x2: width,
+        y2: y,
+        stroke,
+        strokeDasharray,
+        strokeWidth,
+        strokeOpacity,
+        className: !stroke ? "stroke-gray-200 dark:stroke-gray-700" : void 0
+      },
+      `h-${i}`
+    )),
+    vertical && vPoints.map((x, i) => /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+      "line",
+      {
+        x1: x,
+        y1: 0,
+        x2: x,
+        y2: height,
+        stroke,
+        strokeDasharray,
+        strokeWidth,
+        strokeOpacity,
+        className: !stroke ? "stroke-gray-200 dark:stroke-gray-700" : void 0
+      },
+      `v-${i}`
+    ))
+  ] });
+};
+
+// src/charts/LineChart.tsx
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var LineChart = ({
   data,
   width: providedWidth,
   height: providedHeight,
-  aspectRatio = 16 / 9,
-  responsive = true,
+  padding: customPadding,
+  showGrid = true,
+  showXAxis = true,
+  showYAxis = true,
+  showLegend = true,
+  showTooltip = true,
+  showDots = true,
+  animate = true,
+  animationDuration = CHART_DEFAULTS.animation.duration,
+  xAxisLabel,
+  yAxisLabel,
+  yAxisTickCount = 5,
+  yDomain,
+  formatXValue,
+  formatYValue,
+  tooltipFormatter,
+  tooltipLabelFormatter,
+  tooltipContent,
+  onPointClick,
+  onPointHover,
+  showCrosshair = false,
+  showValueLabels = false,
+  className = "",
+  children,
+  colors = CHART_DEFAULTS.colors,
+  ariaLabel
+}) => {
+  const containerRef = (0, import_react28.useRef)(null);
+  const svgRef = (0, import_react28.useRef)(null);
+  const [hoveredPoint, setHoveredPoint] = (0, import_react28.useState)(null);
+  const [crosshairX, setCrosshairX] = (0, import_react28.useState)(null);
+  const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
+  const width = providedWidth || 800;
+  const height = providedHeight || 400;
+  const padding = (0, import_react28.useMemo)(() => ({
+    top: customPadding?.top ?? CHART_DEFAULTS.padding.top,
+    right: customPadding?.right ?? (showValueLabels ? 80 : CHART_DEFAULTS.padding.right),
+    bottom: customPadding?.bottom ?? (showXAxis ? 60 : CHART_DEFAULTS.padding.bottom),
+    left: customPadding?.left ?? (showYAxis ? 60 : CHART_DEFAULTS.padding.left)
+  }), [customPadding, showXAxis, showYAxis, showValueLabels]);
+  const chartWidth = width - padding.left - padding.right;
+  const chartHeight = height - padding.top - padding.bottom;
+  const allPoints = (0, import_react28.useMemo)(
+    () => data.flatMap((series) => series.data),
+    [data]
+  );
+  const xValueType = (0, import_react28.useMemo)(() => {
+    const firstX = data[0]?.data[0]?.x;
+    if (firstX instanceof Date) return "date";
+    if (typeof firstX === "number") return "number";
+    return "string";
+  }, [data]);
+  const xDomainCalc = (0, import_react28.useMemo)(() => {
+    if (xValueType === "date") {
+      const dates = allPoints.map((p) => p.x.getTime());
+      return [Math.min(...dates), Math.max(...dates)];
+    }
+    if (xValueType === "number") {
+      const nums = allPoints.map((p) => p.x);
+      return [Math.min(...nums), Math.max(...nums)];
+    }
+    const maxLen = Math.max(...data.map((s) => s.data.length));
+    return [0, maxLen - 1];
+  }, [allPoints, xValueType, data]);
+  const yDomainCalc = (0, import_react28.useMemo)(() => {
+    if (yDomain) return yDomain;
+    const yValues = allPoints.map((p) => p.y);
+    return calculateDomain(yValues, { includeZero: true, padding: 0.1 });
+  }, [allPoints, yDomain]);
+  const xScale = (0, import_react28.useMemo)(() => {
+    if (xValueType === "date") {
+      return (value) => {
+        const time = value instanceof Date ? value.getTime() : Number(value);
+        return scaleLinear({
+          domain: xDomainCalc,
+          range: [0, chartWidth]
+        })(time);
+      };
+    }
+    if (xValueType === "number") {
+      const scale = scaleLinear({
+        domain: xDomainCalc,
+        range: [0, chartWidth]
+      });
+      return (value) => scale(Number(value));
+    }
+    return (_value, index = 0) => {
+      const maxLen = Math.max(...data.map((s) => s.data.length)) - 1;
+      if (maxLen === 0) return chartWidth / 2;
+      return index / maxLen * chartWidth;
+    };
+  }, [xValueType, xDomainCalc, chartWidth, data]);
+  const yScale = (0, import_react28.useMemo)(
+    () => scaleLinear({
+      domain: yDomainCalc,
+      range: [chartHeight, 0]
+    }),
+    [yDomainCalc, chartHeight]
+  );
+  const yTicks = (0, import_react28.useMemo)(
+    () => getTicks(yDomainCalc, yAxisTickCount),
+    [yDomainCalc, yAxisTickCount]
+  );
+  const xTicks = (0, import_react28.useMemo)(() => {
+    if (xValueType === "string") {
+      return data[0]?.data.map((p, i) => ({ value: p.x, index: i })) || [];
+    }
+    const tickCount = Math.min(6, Math.max(2, data[0]?.data.length || 2));
+    const ticks = getTicks(xDomainCalc, tickCount);
+    return ticks.map((t) => ({ value: t, index: 0 }));
+  }, [xValueType, xDomainCalc, data]);
+  const xFormatter = (0, import_react28.useCallback)((value) => {
+    if (formatXValue) return formatXValue(value);
+    if (value instanceof Date) {
+      const range = xDomainCalc[1] - xDomainCalc[0];
+      return formatDate(value, range);
+    }
+    return String(value);
+  }, [formatXValue, xDomainCalc]);
+  const yFormatter = (0, import_react28.useMemo)(() => {
+    if (formatYValue) return formatYValue;
+    return createTickFormatter(yDomainCalc);
+  }, [formatYValue, yDomainCalc]);
+  const seriesPaths = (0, import_react28.useMemo)(() => {
+    return data.map((series) => {
+      const points = series.data.map((point, i) => ({
+        x: xScale(point.x, i),
+        y: yScale(point.y)
+      }));
+      const type = series.type || "linear";
+      let path;
+      switch (type) {
+        case "monotone":
+          path = generateMonotonePath(points);
+          break;
+        case "step":
+        case "stepAfter":
+          path = generateStepPath(points, "after");
+          break;
+        case "stepBefore":
+          path = generateStepPath(points, "before");
+          break;
+        default:
+          path = generateLinePath(points);
+      }
+      return { points, path };
+    });
+  }, [data, xScale, yScale]);
+  const handlePointEnter = (0, import_react28.useCallback)((e, seriesIndex, pointIndex) => {
+    const series = data[seriesIndex];
+    const point = series.data[pointIndex];
+    const scaledPoint = seriesPaths[seriesIndex].points[pointIndex];
+    setHoveredPoint({ seriesIndex, pointIndex });
+    if (showCrosshair) {
+      setCrosshairX(scaledPoint.x);
+    }
+    if (showTooltip && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      const payload = [{
+        name: series.name,
+        value: point.y,
+        color: series.color || colors[seriesIndex % colors.length],
+        payload: point
+      }];
+      showTooltipFn({
+        x: mouseX,
+        y: mouseY,
+        label: xFormatter(point.x),
+        payload
+      });
+    }
+    onPointHover?.(point, seriesIndex, pointIndex);
+  }, [data, seriesPaths, showCrosshair, showTooltip, colors, xFormatter, showTooltipFn, onPointHover]);
+  const handlePointLeave = (0, import_react28.useCallback)(() => {
+    setHoveredPoint(null);
+    setCrosshairX(null);
+    hideTooltip();
+    onPointHover?.(null, -1, -1);
+  }, [hideTooltip, onPointHover]);
+  const handlePointClick = (0, import_react28.useCallback)((seriesIndex, pointIndex) => {
+    const point = data[seriesIndex].data[pointIndex];
+    onPointClick?.(point, seriesIndex, pointIndex);
+  }, [data, onPointClick]);
+  const legendItems = (0, import_react28.useMemo)(
+    () => data.map((series, i) => ({
+      name: series.name,
+      color: series.color || colors[i % colors.length],
+      type: "line"
+    })),
+    [data, colors]
+  );
+  const referenceElements = (0, import_react28.useMemo)(() => {
+    if (!children) return null;
+    const chartDimensions = {
+      width: chartWidth,
+      height: chartHeight,
+      padding
+    };
+    const scales = {
+      xScale: (value) => {
+        if (xValueType === "string") {
+          const index = data[0]?.data.findIndex((p) => p.x === value) ?? 0;
+          return xScale(value, index);
+        }
+        return xScale(value, 0);
+      },
+      yScale
+    };
+    return import_react28.default.Children.map(children, (child) => {
+      if (!import_react28.default.isValidElement(child)) return child;
+      if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
+        return import_react28.default.cloneElement(child, {
+          _chartDimensions: chartDimensions,
+          _scales: scales
+        });
+      }
+      return child;
+    });
+  }, [children, chartWidth, chartHeight, padding, xScale, yScale, xValueType, data]);
+  const accessibleDescription = (0, import_react28.useMemo)(() => {
+    if (ariaLabel) return ariaLabel;
+    const seriesNames = data.map((s) => s.name).join(", ");
+    return `Line chart with ${data.length} series: ${seriesNames}`;
+  }, [data, ariaLabel]);
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative ${className}`,
+      style: { width, height: "auto" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
+          "svg",
+          {
+            ref: svgRef,
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            role: "img",
+            "aria-label": accessibleDescription,
+            className: "bg-white dark:bg-gray-900",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("defs", { children: animate && data.map((series, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("style", { children: `
+              @keyframes drawLine${i} {
+                from { stroke-dashoffset: 2000; }
+                to { stroke-dashoffset: 0; }
+              }
+            ` }, `anim-${i}`)) }),
+              /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+                showGrid && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                  CartesianGrid,
+                  {
+                    _chartDimensions: { width: chartWidth, height: chartHeight },
+                    horizontalPoints: yTicks.map((t) => yScale(t))
+                  }
+                ),
+                referenceElements,
+                showCrosshair && crosshairX !== null && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                  "line",
+                  {
+                    x1: crosshairX,
+                    y1: 0,
+                    x2: crosshairX,
+                    y2: chartHeight,
+                    stroke: "currentColor",
+                    strokeWidth: 1,
+                    strokeDasharray: "4 4",
+                    className: "text-gray-400 dark:text-gray-500",
+                    pointerEvents: "none"
+                  }
+                ),
+                data.map((series, seriesIndex) => {
+                  const { path } = seriesPaths[seriesIndex];
+                  const color = series.color || colors[seriesIndex % colors.length];
+                  const strokeWidth = series.strokeWidth || CHART_DEFAULTS.line.strokeWidth;
+                  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                    "path",
+                    {
+                      d: path,
+                      fill: "none",
+                      stroke: color,
+                      strokeWidth,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      style: animate ? {
+                        strokeDasharray: 2e3,
+                        animation: `drawLine${seriesIndex} ${animationDuration}ms ease-out forwards`
+                      } : void 0
+                    },
+                    `line-${seriesIndex}`
+                  );
+                }),
+                showDots && data.map((series, seriesIndex) => {
+                  const { points } = seriesPaths[seriesIndex];
+                  const color = series.color || colors[seriesIndex % colors.length];
+                  const showSeriesDots = series.dot !== false;
+                  if (!showSeriesDots) return null;
+                  return points.map((point, pointIndex) => {
+                    const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
+                    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                      "circle",
+                      {
+                        cx: point.x,
+                        cy: point.y,
+                        r: isHovered ? CHART_DEFAULTS.line.activeDotRadius : CHART_DEFAULTS.line.dotRadius,
+                        fill: color,
+                        stroke: "white",
+                        strokeWidth: 2,
+                        className: "cursor-pointer transition-all duration-150",
+                        style: {
+                          opacity: animate ? 0 : 1,
+                          animation: animate ? `fadeIn 200ms ease-out ${animationDuration + pointIndex * 20}ms forwards` : void 0
+                        },
+                        onMouseEnter: (e) => handlePointEnter(e, seriesIndex, pointIndex),
+                        onMouseLeave: handlePointLeave,
+                        onClick: () => handlePointClick(seriesIndex, pointIndex)
+                      },
+                      `dot-${seriesIndex}-${pointIndex}`
+                    );
+                  });
+                }),
+                showValueLabels && data.map((series, seriesIndex) => {
+                  const lastPoint = series.data[series.data.length - 1];
+                  const { points } = seriesPaths[seriesIndex];
+                  const lastScaled = points[points.length - 1];
+                  const color = series.color || colors[seriesIndex % colors.length];
+                  if (!lastPoint || !lastScaled) return null;
+                  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                      "circle",
+                      {
+                        cx: chartWidth + 12,
+                        cy: lastScaled.y,
+                        r: 4,
+                        fill: color
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                      "text",
+                      {
+                        x: chartWidth + 22,
+                        y: lastScaled.y,
+                        dominantBaseline: "middle",
+                        fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                        fontWeight: "600",
+                        className: "fill-gray-700 dark:fill-gray-300",
+                        children: yFormatter(lastPoint.y)
+                      }
+                    )
+                  ] }, `label-${seriesIndex}`);
+                }),
+                showXAxis && /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("g", { transform: `translate(0, ${chartHeight})`, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                    "line",
+                    {
+                      x1: 0,
+                      y1: 0,
+                      x2: chartWidth,
+                      y2: 0,
+                      className: "stroke-gray-300 dark:stroke-gray-600",
+                      strokeWidth: 1
+                    }
+                  ),
+                  xTicks.map((tick, i) => {
+                    const x = xValueType === "string" ? xScale(tick.value, tick.index) : xScale(xValueType === "date" ? new Date(tick.value) : tick.value, 0);
+                    return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("g", { transform: `translate(${x}, 0)`, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                        "text",
+                        {
+                          y: 20,
+                          textAnchor: "middle",
+                          fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                          className: "fill-gray-600 dark:fill-gray-400",
+                          children: xFormatter(xValueType === "date" ? new Date(tick.value) : tick.value)
+                        }
+                      )
+                    ] }, `x-tick-${i}`);
+                  }),
+                  xAxisLabel && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                    "text",
+                    {
+                      x: chartWidth / 2,
+                      y: 50,
+                      textAnchor: "middle",
+                      fontSize: CHART_DEFAULTS.fontSize.axisLabel,
+                      fontWeight: "500",
+                      className: "fill-gray-700 dark:fill-gray-300",
+                      children: xAxisLabel
+                    }
+                  )
+                ] }),
+                showYAxis && /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("g", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                    "line",
+                    {
+                      x1: 0,
+                      y1: 0,
+                      x2: 0,
+                      y2: chartHeight,
+                      className: "stroke-gray-300 dark:stroke-gray-600",
+                      strokeWidth: 1
+                    }
+                  ),
+                  yTicks.map((tick, i) => /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)("g", { transform: `translate(0, ${yScale(tick)})`, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("line", { x2: -6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                      "text",
+                      {
+                        x: -12,
+                        textAnchor: "end",
+                        dominantBaseline: "middle",
+                        fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                        className: "fill-gray-600 dark:fill-gray-400",
+                        children: yFormatter(tick)
+                      }
+                    )
+                  ] }, `y-tick-${i}`)),
+                  yAxisLabel && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                    "text",
+                    {
+                      x: -chartHeight / 2,
+                      y: -45,
+                      textAnchor: "middle",
+                      transform: "rotate(-90)",
+                      fontSize: CHART_DEFAULTS.fontSize.axisLabel,
+                      fontWeight: "500",
+                      className: "fill-gray-700 dark:fill-gray-300",
+                      children: yAxisLabel
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("style", { children: `
+          @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+        ` })
+            ]
+          }
+        ),
+        showLegend && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+          Legend,
+          {
+            items: legendItems,
+            layout: "horizontal",
+            align: "center"
+          }
+        ),
+        showTooltip && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+          ChartTooltip,
+          {
+            ...tooltipData,
+            content: tooltipContent,
+            formatter: tooltipFormatter,
+            labelFormatter: tooltipLabelFormatter,
+            containerBounds: { width, height }
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/charts/BarChart.tsx
+var import_react29 = __toESM(require("react"));
+var import_jsx_runtime114 = require("react/jsx-runtime");
+var BarChart = ({
+  data,
+  width: providedWidth,
+  height: providedHeight,
+  padding: customPadding,
   showGrid = true,
   showXAxis = true,
   showYAxis = true,
   showLegend = true,
   showTooltip = true,
-  showDots = true,
-  curved = false,
-  strokeWidth = 2,
-  className = "",
+  showValues = false,
+  stacked = false,
+  horizontal = false,
+  barRadius = CHART_DEFAULTS.bar.radius,
+  barGap = 0.1,
+  barCategoryGap = 0.2,
+  animate = true,
+  animationDuration = CHART_DEFAULTS.animation.duration,
   xAxisLabel,
   yAxisLabel,
-  baseFontSize = 14
+  yAxisTickCount = 5,
+  yDomain,
+  formatYValue,
+  tooltipFormatter,
+  onBarClick,
+  onBarHover,
+  className = "",
+  children,
+  colors = CHART_DEFAULTS.colors,
+  ariaLabel
 }) => {
-  const viewBoxWidth = 1e3;
-  const viewBoxHeight = 600;
-  const containerRef = import_react26.default.useRef(null);
-  const svgRef = import_react26.default.useRef(null);
-  const [tooltipPosition, setTooltipPosition] = import_react26.default.useState(null);
-  const [hoveredPoint, setHoveredPoint] = import_react26.default.useState(null);
-  const chartId = import_react26.default.useId();
-  const wrapperClass = `chart-svg-wrapper-${chartId.replace(/:/g, "-")}`;
-  const gridLabelClass = `chart-grid-label-${chartId.replace(/:/g, "-")}`;
-  const axisLabelClass = `chart-axis-label-${chartId.replace(/:/g, "-")}`;
-  const lineClass = `chart-line-${chartId.replace(/:/g, "-")}`;
-  const pointClass = `chart-point-${chartId.replace(/:/g, "-")}`;
-  const padding = {
-    top: 50,
-    right: 50,
-    bottom: showXAxis ? 120 : 50,
-    left: showYAxis ? 130 : 50
-  };
-  const chartWidth = viewBoxWidth - padding.left - padding.right;
-  const chartHeight = viewBoxHeight - padding.top - padding.bottom;
-  const gridLabelFontSize = viewBoxWidth * 0.045;
-  const axisLabelFontSize = viewBoxWidth * 0.05;
-  const titleFontSize = viewBoxWidth * 0.055;
-  const allPoints = data.flatMap((series) => series.data);
-  const allYValues = allPoints.map((p) => p.y);
-  const firstXValue = data[0]?.data[0]?.x;
-  const isStringX = typeof firstXValue === "string";
-  const uniqueXValues = isStringX ? Array.from(new Set(allPoints.map((p) => p.x))) : [];
-  const xValueToIndex = isStringX ? Object.fromEntries(uniqueXValues.map((val, idx) => [val, idx])) : {};
-  const allXNumbers = isStringX ? uniqueXValues.map((_, idx) => idx) : allPoints.map((p) => p.x);
-  const minX = Math.min(...allXNumbers);
-  const maxX = Math.max(...allXNumbers);
-  const minY = Math.min(0, ...allYValues);
-  const maxY = Math.max(...allYValues);
-  const yRange = maxY - minY;
-  const yMin = Math.max(0, minY - yRange * 0.1);
-  const yMax = maxY + yRange * 0.1;
-  const scaleX = (x, index) => {
-    const numX = isStringX ? index : x;
-    if (maxX === minX) return chartWidth / 2;
-    return (numX - minX) / (maxX - minX) * chartWidth;
-  };
-  const scaleY = (y) => {
-    if (yMax === yMin) return chartHeight / 2;
-    return chartHeight - (y - yMin) / (yMax - yMin) * chartHeight;
-  };
-  const generatePath = (series) => {
-    if (series.data.length === 0) return "";
-    const points = series.data.map((point, i) => {
-      const x = scaleX(point.x, i);
-      const y = scaleY(point.y);
-      return { x, y, originalIndex: i };
-    });
-    if (curved) {
-      let path = `M ${points[0].x} ${points[0].y}`;
-      for (let i = 0; i < points.length - 1; i++) {
-        const current = points[i];
-        const next = points[i + 1];
-        const controlPointX = (current.x + next.x) / 2;
-        path += ` C ${controlPointX} ${current.y}, ${controlPointX} ${next.y}, ${next.x} ${next.y}`;
-      }
-      return path;
-    } else {
-      return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+  const containerRef = (0, import_react29.useRef)(null);
+  const [hoveredBar, setHoveredBar] = (0, import_react29.useState)(null);
+  const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
+  const width = providedWidth || 800;
+  const height = providedHeight || 400;
+  const padding = (0, import_react29.useMemo)(() => ({
+    top: customPadding?.top ?? CHART_DEFAULTS.padding.top,
+    right: customPadding?.right ?? CHART_DEFAULTS.padding.right,
+    bottom: customPadding?.bottom ?? (showXAxis ? 70 : CHART_DEFAULTS.padding.bottom),
+    left: customPadding?.left ?? (showYAxis ? 60 : CHART_DEFAULTS.padding.left)
+  }), [customPadding, showXAxis, showYAxis]);
+  const chartWidth = width - padding.left - padding.right;
+  const chartHeight = height - padding.top - padding.bottom;
+  const categories = (0, import_react29.useMemo)(() => {
+    const cats = data[0]?.data.map((d) => String(d.x)) || [];
+    return [...new Set(cats)];
+  }, [data]);
+  const yDomainCalc = (0, import_react29.useMemo)(() => {
+    if (yDomain) return yDomain;
+    if (stacked) {
+      const maxStacked = categories.map((_, catIndex) => {
+        return data.reduce((sum, series) => {
+          return sum + (series.data[catIndex]?.y || 0);
+        }, 0);
+      });
+      return calculateDomain([0, ...maxStacked], { includeZero: true, padding: 0.1 });
     }
-  };
-  const gridLines = [];
-  const numGridLines = 5;
-  if (showGrid) {
-    for (let i = 0; i <= numGridLines; i++) {
-      const y = chartHeight / numGridLines * i;
-      const yValue = yMax - (yMax - yMin) / numGridLines * i;
-      gridLines.push(
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-            "line",
-            {
-              x1: 0,
-              y1: y,
-              x2: chartWidth,
-              y2: y,
-              stroke: "currentColor",
-              strokeWidth: "0.5",
-              className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "4,4"
-            }
-          ),
-          showYAxis && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-            "text",
-            {
-              x: -25,
-              y,
-              textAnchor: "end",
-              dominantBaseline: "middle",
-              fontSize: gridLabelFontSize,
-              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
-              children: yValue.toFixed(1)
-            }
-          )
-        ] }, `grid-h-${i}`)
-      );
+    const allY = data.flatMap((s) => s.data.map((d) => d.y));
+    return calculateDomain(allY, { includeZero: true, padding: 0.1 });
+  }, [data, categories, stacked, yDomain]);
+  const xBandScale = (0, import_react29.useMemo)(
+    () => scaleBand({
+      domain: categories,
+      range: horizontal ? [chartHeight, 0] : [0, chartWidth],
+      padding: barCategoryGap
+    }),
+    [categories, chartWidth, chartHeight, horizontal, barCategoryGap]
+  );
+  const yScale = (0, import_react29.useMemo)(
+    () => scaleLinear({
+      domain: yDomainCalc,
+      range: horizontal ? [0, chartWidth] : [chartHeight, 0]
+    }),
+    [yDomainCalc, chartWidth, chartHeight, horizontal]
+  );
+  const yTicks = (0, import_react29.useMemo)(
+    () => getTicks(yDomainCalc, yAxisTickCount),
+    [yDomainCalc, yAxisTickCount]
+  );
+  const yFormatter = (0, import_react29.useMemo)(() => {
+    if (formatYValue) return formatYValue;
+    return createTickFormatter(yDomainCalc);
+  }, [formatYValue, yDomainCalc]);
+  const numSeries = data.length;
+  const bandwidth = xBandScale.bandwidth();
+  const barWidth = stacked ? bandwidth : (bandwidth - bandwidth * barGap * (numSeries - 1)) / numSeries;
+  const handleBarEnter = (0, import_react29.useCallback)((e, seriesIndex, barIndex) => {
+    const series = data[seriesIndex];
+    const point = series.data[barIndex];
+    setHoveredBar({ seriesIndex, barIndex });
+    if (showTooltip && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      const payload = [{
+        name: series.name,
+        value: point.y,
+        color: series.color || colors[seriesIndex % colors.length],
+        payload: point
+      }];
+      showTooltipFn({
+        x: mouseX,
+        y: mouseY,
+        label: String(point.x),
+        payload
+      });
     }
-    const numXGridLines = Math.max(2, Math.min(allPoints.length, 6));
-    const xGridStep = numXGridLines > 1 ? 1 / (numXGridLines - 1) : 0;
-    for (let i = 0; i < numXGridLines; i++) {
-      const x = chartWidth * (i * xGridStep);
-      const dataIndex = Math.floor((data[0]?.data.length - 1) * (i * xGridStep));
-      const xValue = data[0]?.data[Math.max(0, Math.min(dataIndex, data[0].data.length - 1))]?.x || "";
-      gridLines.push(
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-            "line",
-            {
-              x1: x,
-              y1: 0,
-              x2: x,
-              y2: chartHeight,
-              stroke: "currentColor",
-              strokeWidth: "0.5",
-              className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "4,4"
-            }
-          ),
-          showXAxis && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-            "text",
+    onBarHover?.(point, seriesIndex, barIndex);
+  }, [data, showTooltip, colors, showTooltipFn, onBarHover]);
+  const handleBarLeave = (0, import_react29.useCallback)(() => {
+    setHoveredBar(null);
+    hideTooltip();
+    onBarHover?.(null, -1, -1);
+  }, [hideTooltip, onBarHover]);
+  const handleBarClick = (0, import_react29.useCallback)((seriesIndex, barIndex) => {
+    const point = data[seriesIndex].data[barIndex];
+    onBarClick?.(point, seriesIndex, barIndex);
+  }, [data, onBarClick]);
+  const legendItems = (0, import_react29.useMemo)(
+    () => data.map((series, i) => ({
+      name: series.name,
+      color: series.color || colors[i % colors.length],
+      type: "square"
+    })),
+    [data, colors]
+  );
+  const bars = (0, import_react29.useMemo)(() => {
+    const result = [];
+    const cumulativeValues = {};
+    data.forEach((series, seriesIndex) => {
+      const color = series.color || colors[seriesIndex % colors.length];
+      const radius = series.radius ?? barRadius;
+      series.data.forEach((point, barIndex) => {
+        const category = String(point.x);
+        const baseX = xBandScale.scale(category);
+        let barX, barY, barH, barW;
+        if (stacked) {
+          const prevValue = cumulativeValues[category] || 0;
+          cumulativeValues[category] = prevValue + point.y;
+          if (horizontal) {
+            barX = yScale(prevValue);
+            barY = baseX;
+            barW = yScale(point.y) - yScale(0);
+            barH = bandwidth;
+          } else {
+            barX = baseX;
+            barY = yScale(prevValue + point.y);
+            barW = bandwidth;
+            barH = yScale(prevValue) - yScale(prevValue + point.y);
+          }
+        } else {
+          const offset = seriesIndex * (barWidth + bandwidth * barGap / numSeries);
+          if (horizontal) {
+            barX = yScale(0);
+            barY = baseX + offset;
+            barW = yScale(point.y) - yScale(0);
+            barH = barWidth;
+          } else {
+            barX = baseX + offset;
+            barY = yScale(Math.max(0, point.y));
+            barW = barWidth;
+            barH = Math.abs(yScale(point.y) - yScale(0));
+          }
+        }
+        const isHovered = hoveredBar?.seriesIndex === seriesIndex && hoveredBar?.barIndex === barIndex;
+        result.push(
+          /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+            "rect",
             {
-              x,
-              y: chartHeight + 35,
-              textAnchor: "middle",
-              dominantBaseline: "hanging",
-              fontSize: gridLabelFontSize,
-              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
-              children: xValue
-            }
+              x: barX,
+              y: barY,
+              width: Math.max(0, barW),
+              height: Math.max(0, barH),
+              rx: radius,
+              ry: radius,
+              fill: color,
+              opacity: isHovered ? 0.8 : 1,
+              className: "cursor-pointer transition-opacity duration-150",
+              style: animate ? {
+                transform: horizontal ? "scaleX(0)" : "scaleY(0)",
+                transformOrigin: horizontal ? "left" : "bottom",
+                animation: `${horizontal ? "growX" : "growY"} ${animationDuration}ms ease-out ${barIndex * 50}ms forwards`
+              } : void 0,
+              onMouseEnter: (e) => handleBarEnter(e, seriesIndex, barIndex),
+              onMouseLeave: handleBarLeave,
+              onClick: () => handleBarClick(seriesIndex, barIndex)
+            },
+            `bar-${seriesIndex}-${barIndex}`
           )
-        ] }, `grid-v-${i}`)
-      );
-    }
-  }
-  const getTooltipPosition = import_react26.default.useCallback((x, y) => {
-    if (!containerRef.current) return { x, y };
-    const rect = containerRef.current.getBoundingClientRect();
-    const tooltipWidth = 120;
-    const tooltipHeight = 80;
-    let tooltipX = x + 10;
-    let tooltipY = y - 30;
-    if (tooltipX + tooltipWidth > rect.width) {
-      tooltipX = x - tooltipWidth - 10;
-    }
-    if (tooltipY + tooltipHeight > rect.height) {
-      tooltipY = y + 30;
-    }
-    return { x: tooltipX, y: tooltipY };
-  }, []);
-  const containerStyle = {
-    "--font-size-base": `${baseFontSize}px`,
-    "--font-size-lg": `calc(var(--font-size-base) * 1.125)`,
-    "--font-size-sm": `calc(var(--font-size-base) * 0.875)`,
-    "--font-size-xs": `calc(var(--font-size-base) * 0.75)`
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+        );
+        if (showValues) {
+          const labelX = horizontal ? barX + barW + 8 : barX + barW / 2;
+          const labelY = horizontal ? barY + barH / 2 : barY - 8;
+          result.push(
+            /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+              "text",
+              {
+                x: labelX,
+                y: labelY,
+                textAnchor: horizontal ? "start" : "middle",
+                dominantBaseline: horizontal ? "middle" : "auto",
+                fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                fontWeight: "600",
+                className: "fill-gray-700 dark:fill-gray-300",
+                style: animate ? {
+                  opacity: 0,
+                  animation: `fadeIn 200ms ease-out ${animationDuration + barIndex * 50}ms forwards`
+                } : void 0,
+                children: yFormatter(point.y)
+              },
+              `value-${seriesIndex}-${barIndex}`
+            )
+          );
+        }
+      });
+    });
+    return result;
+  }, [
+    data,
+    colors,
+    barRadius,
+    xBandScale,
+    yScale,
+    stacked,
+    horizontal,
+    bandwidth,
+    barWidth,
+    barGap,
+    numSeries,
+    hoveredBar,
+    animate,
+    animationDuration,
+    showValues,
+    yFormatter,
+    handleBarEnter,
+    handleBarLeave,
+    handleBarClick
+  ]);
+  const referenceElements = (0, import_react29.useMemo)(() => {
+    if (!children) return null;
+    const chartDimensions = { width: chartWidth, height: chartHeight, padding };
+    const scales = {
+      xScale: (value) => xBandScale.scale(String(value)) + bandwidth / 2,
+      yScale
+    };
+    return import_react29.default.Children.map(children, (child) => {
+      if (!import_react29.default.isValidElement(child)) return child;
+      if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
+        return import_react29.default.cloneElement(child, {
+          _chartDimensions: chartDimensions,
+          _scales: scales
+        });
+      }
+      return child;
+    });
+  }, [children, chartWidth, chartHeight, padding, xBandScale, bandwidth, yScale]);
+  const accessibleDescription = (0, import_react29.useMemo)(() => {
+    if (ariaLabel) return ariaLabel;
+    const seriesNames = data.map((s) => s.name).join(", ");
+    return `Bar chart with ${data.length} series: ${seriesNames}`;
+  }, [data, ariaLabel]);
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
     "div",
     {
       ref: containerRef,
-      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${className}`,
-      style: {
-        ...containerStyle
-      },
+      className: `relative ${className}`,
+      style: { width, height: "auto" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("style", { children: `
-        /* Mobile: Large fonts, hidden axis titles, thicker lines (default) */
-        .${gridLabelClass} { font-size: ${gridLabelFontSize}px !important; }
-        .${axisLabelClass} { display: none; }
-        .${lineClass} { stroke-width: ${strokeWidth * 2.5} !important; }
-        .${pointClass} { r: 6 !important; stroke-width: 3 !important; }
-
-        /* Tablet: Medium fonts, show axis titles, medium lines */
-        @media (min-width: 640px) {
-          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.7}px !important; }
-          .${axisLabelClass} {
-            font-size: ${axisLabelFontSize * 0.7}px !important;
-            display: block;
+        /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(
+          "svg",
+          {
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            role: "img",
+            "aria-label": accessibleDescription,
+            className: "bg-white dark:bg-gray-900",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("style", { children: `
+            @keyframes growY {
+              from { transform: scaleY(0); }
+              to { transform: scaleY(1); }
+            }
+            @keyframes growX {
+              from { transform: scaleX(0); }
+              to { transform: scaleX(1); }
+            }
+            @keyframes fadeIn {
+              from { opacity: 0; }
+              to { opacity: 1; }
+            }
+          ` }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+                showGrid && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+                  CartesianGrid,
+                  {
+                    _chartDimensions: { width: chartWidth, height: chartHeight },
+                    horizontal: !horizontal,
+                    vertical: horizontal,
+                    horizontalPoints: horizontal ? void 0 : yTicks.map((t) => yScale(t)),
+                    verticalPoints: horizontal ? yTicks.map((t) => yScale(t)) : void 0
+                  }
+                ),
+                referenceElements,
+                bars,
+                showXAxis && /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("g", { transform: `translate(0, ${chartHeight})`, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+                    "line",
+                    {
+                      x1: 0,
+                      y1: 0,
+                      x2: chartWidth,
+                      y2: 0,
+                      className: "stroke-gray-300 dark:stroke-gray-600"
+                    }
+                  ),
+                  categories.map((cat, i) => {
+                    const x = xBandScale.scale(cat) + bandwidth / 2;
+                    return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("g", { transform: `translate(${x}, 0)`, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+                        "text",
+                        {
+                          y: 20,
+                          textAnchor: "middle",
+                          fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                          className: "fill-gray-600 dark:fill-gray-400",
+                          children: cat
+                        }
+                      )
+                    ] }, `x-tick-${i}`);
+                  }),
+                  xAxisLabel && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+                    "text",
+                    {
+                      x: chartWidth / 2,
+                      y: 50,
+                      textAnchor: "middle",
+                      fontSize: CHART_DEFAULTS.fontSize.axisLabel,
+                      fontWeight: "500",
+                      className: "fill-gray-700 dark:fill-gray-300",
+                      children: xAxisLabel
+                    }
+                  )
+                ] }),
+                showYAxis && /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("g", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+                    "line",
+                    {
+                      x1: 0,
+                      y1: 0,
+                      x2: 0,
+                      y2: chartHeight,
+                      className: "stroke-gray-300 dark:stroke-gray-600"
+                    }
+                  ),
+                  yTicks.map((tick, i) => /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)("g", { transform: `translate(0, ${yScale(tick)})`, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("line", { x2: -6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+                      "text",
+                      {
+                        x: -12,
+                        textAnchor: "end",
+                        dominantBaseline: "middle",
+                        fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                        className: "fill-gray-600 dark:fill-gray-400",
+                        children: yFormatter(tick)
+                      }
+                    )
+                  ] }, `y-tick-${i}`)),
+                  yAxisLabel && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+                    "text",
+                    {
+                      x: -chartHeight / 2,
+                      y: -45,
+                      textAnchor: "middle",
+                      transform: "rotate(-90)",
+                      fontSize: CHART_DEFAULTS.fontSize.axisLabel,
+                      fontWeight: "500",
+                      className: "fill-gray-700 dark:fill-gray-300",
+                      children: yAxisLabel
+                    }
+                  )
+                ] })
+              ] })
+            ]
           }
-          .${lineClass} { stroke-width: ${strokeWidth * 1.5} !important; }
-          .${pointClass} { r: 4 !important; stroke-width: 2 !important; }
-        }
-
-        /* Desktop: Small fonts, show axis titles, normal lines */
-        @media (min-width: 1024px) {
-          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.4}px !important; }
-          .${axisLabelClass} {
-            font-size: ${axisLabelFontSize * 0.4}px !important;
-            display: block;
+        ),
+        showLegend && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
+        showTooltip && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+          ChartTooltip,
+          {
+            ...tooltipData,
+            formatter: tooltipFormatter,
+            containerBounds: { width, height }
           }
-          .${lineClass} { stroke-width: ${strokeWidth} !important; }
-          .${pointClass} { r: 3 !important; stroke-width: 1.5 !important; }
+        )
+      ]
+    }
+  );
+};
+
+// src/charts/AreaChart.tsx
+var import_react30 = __toESM(require("react"));
+var import_jsx_runtime115 = require("react/jsx-runtime");
+var AreaChart = ({
+  data,
+  width: providedWidth,
+  height: providedHeight,
+  padding: customPadding,
+  showGrid = true,
+  showXAxis = true,
+  showYAxis = true,
+  showLegend = true,
+  showTooltip = true,
+  showDots = false,
+  stacked = false,
+  fillOpacity = 0.3,
+  curved = true,
+  animate = true,
+  animationDuration = CHART_DEFAULTS.animation.duration,
+  xAxisLabel,
+  yAxisLabel,
+  yAxisTickCount = 5,
+  yDomain,
+  formatXValue,
+  formatYValue,
+  tooltipFormatter,
+  onPointClick,
+  onPointHover,
+  className = "",
+  children,
+  colors = CHART_DEFAULTS.colors,
+  ariaLabel
+}) => {
+  const containerRef = (0, import_react30.useRef)(null);
+  const [hoveredPoint, setHoveredPoint] = (0, import_react30.useState)(null);
+  const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
+  const width = providedWidth || 800;
+  const height = providedHeight || 400;
+  const padding = (0, import_react30.useMemo)(() => ({
+    top: customPadding?.top ?? CHART_DEFAULTS.padding.top,
+    right: customPadding?.right ?? CHART_DEFAULTS.padding.right,
+    bottom: customPadding?.bottom ?? (showXAxis ? 60 : CHART_DEFAULTS.padding.bottom),
+    left: customPadding?.left ?? (showYAxis ? 60 : CHART_DEFAULTS.padding.left)
+  }), [customPadding, showXAxis, showYAxis]);
+  const chartWidth = width - padding.left - padding.right;
+  const chartHeight = height - padding.top - padding.bottom;
+  const allPoints = (0, import_react30.useMemo)(
+    () => data.flatMap((series) => series.data),
+    [data]
+  );
+  const xValueType = (0, import_react30.useMemo)(() => {
+    const firstX = data[0]?.data[0]?.x;
+    if (firstX instanceof Date) return "date";
+    if (typeof firstX === "number") return "number";
+    return "string";
+  }, [data]);
+  const xDomainCalc = (0, import_react30.useMemo)(() => {
+    if (xValueType === "date") {
+      const dates = allPoints.map((p) => p.x.getTime());
+      return [Math.min(...dates), Math.max(...dates)];
+    }
+    if (xValueType === "number") {
+      const nums = allPoints.map((p) => p.x);
+      return [Math.min(...nums), Math.max(...nums)];
+    }
+    const maxLen = Math.max(...data.map((s) => s.data.length));
+    return [0, maxLen - 1];
+  }, [allPoints, xValueType, data]);
+  const yDomainCalc = (0, import_react30.useMemo)(() => {
+    if (yDomain) return yDomain;
+    if (stacked) {
+      const maxPoints = Math.max(...data.map((s) => s.data.length));
+      const maxStacked = Array.from({ length: maxPoints }, (_, i) => {
+        return data.reduce((sum, series) => sum + (series.data[i]?.y || 0), 0);
+      });
+      return calculateDomain([0, ...maxStacked], { includeZero: true, padding: 0.1 });
+    }
+    const yValues = allPoints.map((p) => p.y);
+    return calculateDomain(yValues, { includeZero: true, padding: 0.1 });
+  }, [allPoints, stacked, data, yDomain]);
+  const xScale = (0, import_react30.useMemo)(() => {
+    if (xValueType === "date") {
+      return (value) => {
+        const time = value instanceof Date ? value.getTime() : Number(value);
+        return scaleLinear({
+          domain: xDomainCalc,
+          range: [0, chartWidth]
+        })(time);
+      };
+    }
+    if (xValueType === "number") {
+      const scale = scaleLinear({
+        domain: xDomainCalc,
+        range: [0, chartWidth]
+      });
+      return (value) => scale(Number(value));
+    }
+    return (_value, index = 0) => {
+      const maxLen = Math.max(...data.map((s) => s.data.length)) - 1;
+      if (maxLen === 0) return chartWidth / 2;
+      return index / maxLen * chartWidth;
+    };
+  }, [xValueType, xDomainCalc, chartWidth, data]);
+  const yScale = (0, import_react30.useMemo)(
+    () => scaleLinear({
+      domain: yDomainCalc,
+      range: [chartHeight, 0]
+    }),
+    [yDomainCalc, chartHeight]
+  );
+  const yTicks = (0, import_react30.useMemo)(
+    () => getTicks(yDomainCalc, yAxisTickCount),
+    [yDomainCalc, yAxisTickCount]
+  );
+  const xTicks = (0, import_react30.useMemo)(() => {
+    if (xValueType === "string") {
+      return data[0]?.data.map((p, i) => ({ value: p.x, index: i })) || [];
+    }
+    const tickCount = Math.min(6, Math.max(2, data[0]?.data.length || 2));
+    const ticks = getTicks(xDomainCalc, tickCount);
+    return ticks.map((t) => ({ value: t, index: 0 }));
+  }, [xValueType, xDomainCalc, data]);
+  const xFormatter = (0, import_react30.useCallback)((value) => {
+    if (formatXValue) return formatXValue(value);
+    if (value instanceof Date) {
+      const range = xDomainCalc[1] - xDomainCalc[0];
+      return formatDate(value, range);
+    }
+    return String(value);
+  }, [formatXValue, xDomainCalc]);
+  const yFormatter = (0, import_react30.useMemo)(() => {
+    if (formatYValue) return formatYValue;
+    return createTickFormatter(yDomainCalc);
+  }, [formatYValue, yDomainCalc]);
+  const areaPaths = (0, import_react30.useMemo)(() => {
+    const paths = [];
+    const cumulativeY = Array(data[0]?.data.length || 0).fill(0);
+    data.forEach((series) => {
+      const seriesType = series.type;
+      const isCurved = seriesType !== void 0 ? seriesType === "monotone" : curved;
+      const points = series.data.map((point, i) => {
+        const x = xScale(point.x, i);
+        const baseY = stacked ? cumulativeY[i] : 0;
+        const y = yScale(baseY + point.y);
+        return { x, y, baseY: yScale(baseY) };
+      });
+      if (stacked) {
+        series.data.forEach((point, i) => {
+          cumulativeY[i] += point.y;
+        });
+      }
+      const linePoints = points.map((p) => ({ x: p.x, y: p.y }));
+      const linePath = isCurved ? generateMonotonePath(linePoints) : generateLinePath(linePoints);
+      let areaPath;
+      if (stacked && paths.length > 0) {
+        const prevPoints = paths[paths.length - 1].points;
+        areaPath = generateStackedAreaPath(linePoints, prevPoints, isCurved);
+      } else {
+        areaPath = generateAreaPath(linePoints, yScale(0), isCurved);
+      }
+      paths.push({
+        areaPath,
+        linePath,
+        points: linePoints
+      });
+    });
+    return paths;
+  }, [data, xScale, yScale, stacked, curved]);
+  const handlePointEnter = (0, import_react30.useCallback)((e, seriesIndex, pointIndex) => {
+    const series = data[seriesIndex];
+    const point = series.data[pointIndex];
+    setHoveredPoint({ seriesIndex, pointIndex });
+    if (showTooltip && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      const payload = [{
+        name: series.name,
+        value: point.y,
+        color: series.color || colors[seriesIndex % colors.length],
+        payload: point
+      }];
+      showTooltipFn({
+        x: mouseX,
+        y: mouseY,
+        label: xFormatter(point.x),
+        payload
+      });
+    }
+    onPointHover?.(point, seriesIndex, pointIndex);
+  }, [data, showTooltip, colors, xFormatter, showTooltipFn, onPointHover]);
+  const handlePointLeave = (0, import_react30.useCallback)(() => {
+    setHoveredPoint(null);
+    hideTooltip();
+    onPointHover?.(null, -1, -1);
+  }, [hideTooltip, onPointHover]);
+  const handlePointClick = (0, import_react30.useCallback)((seriesIndex, pointIndex) => {
+    const point = data[seriesIndex].data[pointIndex];
+    onPointClick?.(point, seriesIndex, pointIndex);
+  }, [data, onPointClick]);
+  const legendItems = (0, import_react30.useMemo)(
+    () => data.map((series, i) => ({
+      name: series.name,
+      color: series.color || colors[i % colors.length],
+      type: "square"
+    })),
+    [data, colors]
+  );
+  const referenceElements = (0, import_react30.useMemo)(() => {
+    if (!children) return null;
+    const chartDimensions = { width: chartWidth, height: chartHeight, padding };
+    const scales = {
+      xScale: (value) => {
+        if (xValueType === "string") {
+          const index = data[0]?.data.findIndex((p) => p.x === value) ?? 0;
+          return xScale(value, index);
         }
-      ` }),
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+        return xScale(value, 0);
+      },
+      yScale
+    };
+    return import_react30.default.Children.map(children, (child) => {
+      if (!import_react30.default.isValidElement(child)) return child;
+      if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
+        return import_react30.default.cloneElement(child, {
+          _chartDimensions: chartDimensions,
+          _scales: scales
+        });
+      }
+      return child;
+    });
+  }, [children, chartWidth, chartHeight, padding, xScale, yScale, xValueType, data]);
+  const accessibleDescription = (0, import_react30.useMemo)(() => {
+    if (ariaLabel) return ariaLabel;
+    const seriesNames = data.map((s) => s.name).join(", ");
+    return `Area chart with ${data.length} series: ${seriesNames}`;
+  }, [data, ariaLabel]);
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative ${className}`,
+      style: { width, height: "auto" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
           "svg",
           {
-            ref: svgRef,
-            width: "100%",
-            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
-            preserveAspectRatio: "xMidYMid meet",
-            className: "bg-white dark:bg-gray-800 block w-full",
-            style: { height: "auto", overflow: "visible" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-              gridLines,
-              data.map((series, seriesIndex) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-                "path",
-                {
-                  d: generatePath(series),
-                  fill: "none",
-                  stroke: series.color || defaultColors[seriesIndex % defaultColors.length],
-                  strokeWidth,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  className: lineClass
-                },
-                `line-${seriesIndex}`
-              )),
-              showDots && data.map(
-                (series, seriesIndex) => series.data.map((point, pointIndex) => {
-                  const x = scaleX(point.x, pointIndex);
-                  const y = scaleY(point.y);
-                  const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
-                  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-                    "circle",
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            role: "img",
+            "aria-label": accessibleDescription,
+            className: "bg-white dark:bg-gray-900",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("defs", { children: [
+                data.map((series, i) => {
+                  const color = series.color || colors[i % colors.length];
+                  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+                    "linearGradient",
                     {
-                      cx: x,
-                      cy: y,
-                      r: isHovered ? 5 : 3,
-                      fill: series.color || defaultColors[seriesIndex % defaultColors.length],
-                      stroke: "white",
-                      strokeWidth: "1.5",
-                      className: `cursor-pointer transition-all ${pointClass}`,
-                      onMouseEnter: (e) => {
-                        if (showTooltip && containerRef.current) {
-                          setHoveredPoint({ seriesIndex, pointIndex, x, y });
-                          const containerRect = containerRef.current.getBoundingClientRect();
-                          const mouseX = e.clientX - containerRect.left;
-                          const mouseY = e.clientY - containerRect.top;
-                          setTooltipPosition(getTooltipPosition(mouseX, mouseY));
-                        }
+                      id: `area-gradient-${i}`,
+                      x1: "0",
+                      y1: "0",
+                      x2: "0",
+                      y2: "1",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: series.fillOpacity ?? fillOpacity }),
+                        /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
+                      ]
+                    },
+                    `gradient-${i}`
+                  );
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("style", { children: `
+            @keyframes fadeIn {
+              from { opacity: 0; }
+              to { opacity: 1; }
+            }
+            @keyframes drawPath {
+              from { stroke-dashoffset: 2000; }
+              to { stroke-dashoffset: 0; }
+            }
+          ` })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+                showGrid && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                  CartesianGrid,
+                  {
+                    _chartDimensions: { width: chartWidth, height: chartHeight },
+                    horizontalPoints: yTicks.map((t) => yScale(t))
+                  }
+                ),
+                referenceElements,
+                [...data].reverse().map((series, reversedIndex) => {
+                  const seriesIndex = data.length - 1 - reversedIndex;
+                  const { areaPath, linePath } = areaPaths[seriesIndex];
+                  const color = series.color || colors[seriesIndex % colors.length];
+                  const strokeWidth = series.strokeWidth || CHART_DEFAULTS.line.strokeWidth;
+                  return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("g", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                      "path",
+                      {
+                        d: areaPath,
+                        fill: `url(#area-gradient-${seriesIndex})`,
+                        style: animate ? {
+                          opacity: 0,
+                          animation: `fadeIn ${animationDuration}ms ease-out forwards`
+                        } : void 0
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                      "path",
+                      {
+                        d: linePath,
+                        fill: "none",
+                        stroke: color,
+                        strokeWidth,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        style: animate ? {
+                          strokeDasharray: 2e3,
+                          animation: `drawPath ${animationDuration}ms ease-out forwards`
+                        } : void 0
+                      }
+                    )
+                  ] }, `area-${seriesIndex}`);
+                }),
+                showDots && data.map((series, seriesIndex) => {
+                  const { points } = areaPaths[seriesIndex];
+                  const color = series.color || colors[seriesIndex % colors.length];
+                  const showSeriesDots = series.dot !== false;
+                  if (!showSeriesDots) return null;
+                  return points.map((point, pointIndex) => {
+                    const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
+                    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                      "circle",
+                      {
+                        cx: point.x,
+                        cy: point.y,
+                        r: isHovered ? CHART_DEFAULTS.line.activeDotRadius : CHART_DEFAULTS.line.dotRadius,
+                        fill: color,
+                        stroke: "white",
+                        strokeWidth: 2,
+                        className: "cursor-pointer transition-all duration-150",
+                        style: animate ? {
+                          opacity: 0,
+                          animation: `fadeIn 200ms ease-out ${animationDuration + pointIndex * 20}ms forwards`
+                        } : void 0,
+                        onMouseEnter: (e) => handlePointEnter(e, seriesIndex, pointIndex),
+                        onMouseLeave: handlePointLeave,
+                        onClick: () => handlePointClick(seriesIndex, pointIndex)
                       },
-                      onMouseMove: (e) => {
-                        if (showTooltip && hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex && containerRef.current) {
-                          const containerRect = containerRef.current.getBoundingClientRect();
-                          const mouseX = e.clientX - containerRect.left;
-                          const mouseY = e.clientY - containerRect.top;
-                          setTooltipPosition(getTooltipPosition(mouseX, mouseY));
+                      `dot-${seriesIndex}-${pointIndex}`
+                    );
+                  });
+                }),
+                showXAxis && /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("g", { transform: `translate(0, ${chartHeight})`, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                    "line",
+                    {
+                      x1: 0,
+                      y1: 0,
+                      x2: chartWidth,
+                      y2: 0,
+                      className: "stroke-gray-300 dark:stroke-gray-600"
+                    }
+                  ),
+                  xTicks.map((tick, i) => {
+                    const x = xValueType === "string" ? xScale(tick.value, tick.index) : xScale(xValueType === "date" ? new Date(tick.value) : tick.value, 0);
+                    return /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("g", { transform: `translate(${x}, 0)`, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                        "text",
+                        {
+                          y: 20,
+                          textAnchor: "middle",
+                          fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                          className: "fill-gray-600 dark:fill-gray-400",
+                          children: xFormatter(xValueType === "date" ? new Date(tick.value) : tick.value)
                         }
-                      },
-                      onMouseLeave: () => {
-                        setHoveredPoint(null);
-                        setTooltipPosition(null);
+                      )
+                    ] }, `x-tick-${i}`);
+                  }),
+                  xAxisLabel && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                    "text",
+                    {
+                      x: chartWidth / 2,
+                      y: 50,
+                      textAnchor: "middle",
+                      fontSize: CHART_DEFAULTS.fontSize.axisLabel,
+                      fontWeight: "500",
+                      className: "fill-gray-700 dark:fill-gray-300",
+                      children: xAxisLabel
+                    }
+                  )
+                ] }),
+                showYAxis && /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("g", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                    "line",
+                    {
+                      x1: 0,
+                      y1: 0,
+                      x2: 0,
+                      y2: chartHeight,
+                      className: "stroke-gray-300 dark:stroke-gray-600"
+                    }
+                  ),
+                  yTicks.map((tick, i) => /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("g", { transform: `translate(0, ${yScale(tick)})`, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("line", { x2: -6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                      "text",
+                      {
+                        x: -12,
+                        textAnchor: "end",
+                        dominantBaseline: "middle",
+                        fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                        className: "fill-gray-600 dark:fill-gray-400",
+                        children: yFormatter(tick)
                       }
-                    },
-                    `point-${seriesIndex}-${pointIndex}`
-                  );
-                })
-              ),
-              xAxisLabel && showXAxis && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-                "text",
-                {
-                  x: chartWidth / 2,
-                  y: chartHeight + 80,
-                  textAnchor: "middle",
-                  dominantBaseline: "hanging",
-                  fontSize: axisLabelFontSize,
-                  fontWeight: "600",
-                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
-                  children: xAxisLabel
-                }
-              ),
-              yAxisLabel && showYAxis && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-                "text",
-                {
-                  x: -chartHeight / 2,
-                  y: -100,
-                  textAnchor: "middle",
-                  dominantBaseline: "middle",
-                  fontSize: axisLabelFontSize,
-                  fontWeight: "600",
-                  transform: "rotate(-90)",
-                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
-                  children: yAxisLabel
-                }
-              )
-            ] })
+                    )
+                  ] }, `y-tick-${i}`)),
+                  yAxisLabel && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                    "text",
+                    {
+                      x: -chartHeight / 2,
+                      y: -45,
+                      textAnchor: "middle",
+                      transform: "rotate(-90)",
+                      fontSize: CHART_DEFAULTS.fontSize.axisLabel,
+                      fontWeight: "500",
+                      className: "fill-gray-700 dark:fill-gray-300",
+                      children: yAxisLabel
+                    }
+                  )
+                ] })
+              ] })
+            ]
           }
         ),
-        showLegend && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "flex flex-wrap gap-3 justify-center px-4", children: data.map((series, index) => /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
-            "div",
-            {
-              className: "w-3 h-3 rounded-sm flex-shrink-0",
-              style: {
-                backgroundColor: series.color || defaultColors[index % defaultColors.length]
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-gray-700 dark:text-gray-300", children: series.name })
-        ] }, `legend-${index}`)) }),
-        showTooltip && hoveredPoint && tooltipPosition && /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
-          "div",
+        showLegend && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
+        showTooltip && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+          ChartTooltip,
           {
-            className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg pointer-events-none z-50 text-sm whitespace-nowrap",
-            style: {
-              left: `${tooltipPosition.x}px`,
-              top: `${tooltipPosition.y}px`,
-              transform: "translateZ(0)"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "font-semibold", children: data[hoveredPoint.seriesIndex].name }),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "text-xs opacity-90", children: [
-                "x: ",
-                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].x
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "text-xs opacity-90", children: [
-                "y: ",
-                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
-              ] })
-            ]
+            ...tooltipData,
+            formatter: tooltipFormatter,
+            containerBounds: { width, height }
           }
         )
       ]
@@ -5750,797 +7648,718 @@ var LineChart = ({
   );
 };
 
-// src/components/BarChart.tsx
-var import_react27 = __toESM(require("react"));
-var import_jsx_runtime109 = require("react/jsx-runtime");
-var defaultColors2 = [
-  "#3b82f6",
-  // blue-500
-  "#10b981",
-  // green-500
-  "#f59e0b",
-  // amber-500
-  "#ef4444",
-  // red-500
-  "#8b5cf6",
-  // violet-500
-  "#ec4899"
-  // pink-500
-];
-var BarChart = ({
+// src/charts/PieChart.tsx
+var import_react31 = require("react");
+var import_jsx_runtime116 = require("react/jsx-runtime");
+var PieChart = ({
   data,
   width: providedWidth,
   height: providedHeight,
-  aspectRatio = 16 / 9,
-  responsive = true,
-  showGrid = true,
-  showXAxis = true,
-  showYAxis = true,
+  innerRadius: providedInnerRadius,
+  outerRadius: providedOuterRadius,
+  donut = false,
+  paddingAngle = 0,
+  startAngle = 0,
+  endAngle = 360,
   showLegend = true,
   showTooltip = true,
-  showValues = false,
-  stacked = false,
-  horizontal = false,
-  barWidth = 0.8,
+  showLabels = true,
+  labelType = "percent",
+  labelFormatter,
+  showPercentages = false,
+  minLabelPercent = 5,
+  animate = true,
+  animationDuration = CHART_DEFAULTS.animation.duration,
+  centerLabel,
+  centerValue,
+  tooltipFormatter,
+  onSliceClick,
+  onSliceHover,
   className = "",
-  xAxisLabel,
-  yAxisLabel,
-  baseFontSize = 14,
-  colors = defaultColors2
+  colors = CHART_DEFAULTS.colors,
+  ariaLabel
 }) => {
-  const viewBoxWidth = 1e3;
-  const viewBoxHeight = 600;
-  const containerRef = import_react27.default.useRef(null);
-  const [tooltipPosition, setTooltipPosition] = import_react27.default.useState(null);
-  const [hoveredBar, setHoveredBar] = import_react27.default.useState(null);
-  const chartId = import_react27.default.useId();
-  const wrapperClass = `chart-svg-wrapper-${chartId.replace(/:/g, "-")}`;
-  const gridLabelClass = `chart-grid-label-${chartId.replace(/:/g, "-")}`;
-  const axisLabelClass = `chart-axis-label-${chartId.replace(/:/g, "-")}`;
-  const barClass = `chart-bar-${chartId.replace(/:/g, "-")}`;
-  const padding = {
-    top: 50,
-    right: 50,
-    bottom: showXAxis ? horizontal ? 120 : 140 : 50,
-    left: showYAxis ? horizontal ? 140 : 130 : 50
-  };
-  const chartWidth = viewBoxWidth - padding.left - padding.right;
-  const chartHeight = viewBoxHeight - padding.top - padding.bottom;
-  const gridLabelFontSize = viewBoxWidth * 0.045;
-  const axisLabelFontSize = viewBoxWidth * 0.05;
-  const titleFontSize = viewBoxWidth * 0.055;
-  const allYValues = stacked ? data[0]?.data.map(
-    (_, i) => data.reduce((sum, series) => sum + (series.data[i]?.y || 0), 0)
-  ) || [] : data.flatMap((series) => series.data.map((p) => p.y));
-  const minY = Math.min(0, ...allYValues);
-  const maxY = Math.max(...allYValues);
-  const yRange = maxY - minY;
-  const yMin = Math.max(0, minY - yRange * 0.1);
-  const yMax = maxY + yRange * 0.1;
-  const numBars = data[0]?.data.length || 0;
-  const numSeries = data.length;
-  const scaleY = (y) => {
-    if (yMax === yMin) return chartHeight / 2;
-    return chartHeight - (y - yMin) / (yMax - yMin) * chartHeight;
-  };
-  const barGroupWidth = chartWidth / numBars;
-  const barPadding = barGroupWidth * (1 - barWidth) / 2;
-  const actualBarWidth = stacked ? barGroupWidth * barWidth : barGroupWidth * barWidth / numSeries;
-  const gridLines = [];
-  const numGridLines = 5;
-  if (showGrid) {
-    for (let i = 0; i <= numGridLines; i++) {
-      const y = chartHeight / numGridLines * i;
-      const yValue = yMax - (yMax - yMin) / numGridLines * i;
-      gridLines.push(
-        /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-            "line",
-            {
-              x1: 0,
-              y1: y,
-              x2: chartWidth,
-              y2: y,
-              stroke: "currentColor",
-              strokeWidth: "0.5",
-              className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "4,4"
-            }
-          ),
-          showYAxis && !horizontal && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-            "text",
-            {
-              x: -25,
-              y,
-              textAnchor: "end",
-              dominantBaseline: "middle",
-              fontSize: gridLabelFontSize,
-              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
-              children: yValue.toFixed(0)
-            }
-          )
-        ] }, `grid-h-${i}`)
+  const containerRef = (0, import_react31.useRef)(null);
+  const [hoveredSlice, setHoveredSlice] = (0, import_react31.useState)(null);
+  const [activeSlice, setActiveSlice] = (0, import_react31.useState)(null);
+  const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
+  const width = providedWidth || 400;
+  const height = providedHeight || 400;
+  const size = Math.min(width, height);
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const maxRadius = size / 2 - 20;
+  const outerRadius = providedOuterRadius || maxRadius;
+  const innerRadius = providedInnerRadius ?? (donut ? outerRadius * 0.6 : 0);
+  const isDonut = innerRadius > 0;
+  const total = (0, import_react31.useMemo)(
+    () => data.reduce((sum, d) => sum + d.value, 0),
+    [data]
+  );
+  const slices = (0, import_react31.useMemo)(() => {
+    const angleRange = endAngle - startAngle;
+    let currentAngle = startAngle;
+    return data.map((item, index) => {
+      const percent = total > 0 ? item.value / total * 100 : 0;
+      const sliceAngle = item.value / total * angleRange;
+      const actualStartAngle = currentAngle + paddingAngle / 2;
+      const actualEndAngle = currentAngle + sliceAngle - paddingAngle / 2;
+      const path = generateArcPath(
+        centerX,
+        centerY,
+        outerRadius,
+        actualStartAngle,
+        actualEndAngle,
+        innerRadius
       );
+      const midAngle = currentAngle + sliceAngle / 2;
+      const labelRadius = isDonut ? innerRadius + (outerRadius - innerRadius) / 2 : outerRadius * 0.65;
+      const labelRad = (midAngle - 90) * Math.PI / 180;
+      const labelX = centerX + labelRadius * Math.cos(labelRad);
+      const labelY = centerY + labelRadius * Math.sin(labelRad);
+      currentAngle += sliceAngle;
+      return {
+        ...item,
+        index,
+        path,
+        percent,
+        startAngle: actualStartAngle,
+        endAngle: actualEndAngle,
+        midAngle,
+        labelX,
+        labelY,
+        color: item.color || colors[index % colors.length]
+      };
+    });
+  }, [data, total, startAngle, endAngle, paddingAngle, centerX, centerY, outerRadius, innerRadius, isDonut, colors]);
+  const handleSliceEnter = (0, import_react31.useCallback)((e, index) => {
+    const slice = slices[index];
+    setHoveredSlice(index);
+    if (showTooltip && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      const payload = [{
+        name: slice.label,
+        value: slice.value,
+        color: slice.color,
+        payload: data[index]
+      }];
+      showTooltipFn({
+        x: mouseX,
+        y: mouseY,
+        label: slice.label,
+        payload
+      });
     }
-    if (horizontal) {
-      for (let i = 0; i <= numGridLines; i++) {
-        const x = chartWidth / numGridLines * i;
-        gridLines.push(
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-            "line",
-            {
-              x1: x,
-              y1: 0,
-              x2: x,
-              y2: chartHeight,
-              stroke: "currentColor",
-              strokeWidth: "1",
-              className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "2,2"
-            },
-            `grid-v-${i}`
-          )
-        );
-      }
+    onSliceHover?.(data[index], index);
+  }, [slices, data, showTooltip, showTooltipFn, onSliceHover]);
+  const handleSliceLeave = (0, import_react31.useCallback)(() => {
+    setHoveredSlice(null);
+    hideTooltip();
+    onSliceHover?.(null, -1);
+  }, [hideTooltip, onSliceHover]);
+  const handleSliceClick = (0, import_react31.useCallback)((index) => {
+    setActiveSlice((prev) => prev === index ? null : index);
+    onSliceClick?.(data[index], index);
+  }, [data, onSliceClick]);
+  const getLabelText = (0, import_react31.useCallback)((slice) => {
+    if (labelFormatter) {
+      return labelFormatter(data[slice.index], slice.percent);
     }
-  }
-  const renderBars = () => {
-    const bars = [];
-    if (stacked) {
-      for (let barIndex = 0; barIndex < numBars; barIndex++) {
-        let cumulativeY = 0;
-        const xPos = barIndex * barGroupWidth + barPadding;
-        const barW = barGroupWidth * barWidth;
-        for (let seriesIndex = 0; seriesIndex < numSeries; seriesIndex++) {
-          const point = data[seriesIndex].data[barIndex];
-          if (!point) continue;
-          const barHeight = Math.abs(scaleY(point.y) - scaleY(0));
-          const yPos = scaleY(cumulativeY + point.y);
-          const isHovered = hoveredBar?.seriesIndex === seriesIndex && hoveredBar?.barIndex === barIndex;
-          bars.push(
-            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-              "rect",
-              {
-                x: xPos,
-                y: yPos,
-                width: barW,
-                height: Math.abs(scaleY(0) - yPos),
-                fill: data[seriesIndex].color || colors[seriesIndex % colors.length],
-                className: `cursor-pointer transition-opacity ${barClass}`,
-                opacity: isHovered ? 0.8 : 1,
-                onMouseEnter: () => {
-                  if (showTooltip) {
-                    setHoveredBar({ seriesIndex, barIndex, x: xPos + barW / 2, y: yPos });
-                    setTooltipPosition(getTooltipPosition(padding.left + xPos + barW / 2, padding.top + yPos));
-                  }
-                },
-                onMouseLeave: () => {
-                  setHoveredBar(null);
-                  setTooltipPosition(null);
-                }
-              },
-              `bar-${seriesIndex}-${barIndex}`
-            )
-          );
-          cumulativeY += point.y;
-        }
-      }
-    } else {
-      for (let barIndex = 0; barIndex < numBars; barIndex++) {
-        for (let seriesIndex = 0; seriesIndex < numSeries; seriesIndex++) {
-          const point = data[seriesIndex].data[barIndex];
-          if (!point) continue;
-          const xPos = barIndex * barGroupWidth + barPadding + seriesIndex * actualBarWidth;
-          const barHeight = Math.abs(scaleY(point.y) - scaleY(0));
-          const yPos = scaleY(Math.max(0, point.y));
-          const isHovered = hoveredBar?.seriesIndex === seriesIndex && hoveredBar?.barIndex === barIndex;
-          bars.push(
-            /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-              "rect",
-              {
-                x: xPos,
-                y: yPos,
-                width: actualBarWidth,
-                height: barHeight,
-                fill: data[seriesIndex].color || colors[seriesIndex % colors.length],
-                className: `cursor-pointer transition-opacity ${barClass}`,
-                opacity: isHovered ? 0.8 : 1,
-                onMouseEnter: () => showTooltip && setHoveredBar({ seriesIndex, barIndex, x: xPos + actualBarWidth / 2, y: yPos }),
-                onMouseLeave: () => setHoveredBar(null)
-              },
-              `bar-${seriesIndex}-${barIndex}`
-            )
-          );
-          if (showValues) {
-            bars.push(
-              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-                "text",
-                {
-                  x: xPos + actualBarWidth / 2,
-                  y: yPos - 10,
-                  textAnchor: "middle",
-                  dominantBaseline: "middle",
-                  fontSize: "11",
-                  fontWeight: "600",
-                  className: "fill-gray-700 dark:fill-gray-300",
-                  children: point.y
-                },
-                `value-${seriesIndex}-${barIndex}`
-              )
-            );
-          }
-        }
-      }
+    switch (labelType) {
+      case "percent":
+        return `${slice.percent.toFixed(1)}%`;
+      case "value":
+        return formatNumber(slice.value);
+      case "name":
+        return slice.label;
+      default:
+        return `${slice.percent.toFixed(1)}%`;
     }
-    return bars;
-  };
-  const xAxisLabels = data[0]?.data.map((point, i) => {
-    const xPos = i * barGroupWidth + barGroupWidth / 2;
-    return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-      "text",
-      {
-        x: xPos,
-        y: chartHeight + 35,
-        textAnchor: "middle",
-        dominantBaseline: "hanging",
-        fontSize: gridLabelFontSize,
-        className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
-        children: point.x
-      },
-      `x-label-${i}`
-    );
-  });
-  const getTooltipPosition = import_react27.default.useCallback((x, y) => {
-    if (!containerRef.current) return { x, y };
-    const rect = containerRef.current.getBoundingClientRect();
-    const tooltipWidth = 140;
-    const tooltipHeight = 80;
-    let tooltipX = x + 10;
-    let tooltipY = y - 30;
-    if (tooltipX + tooltipWidth > rect.width) {
-      tooltipX = x - tooltipWidth - 10;
-    }
-    if (tooltipY + tooltipHeight > rect.height) {
-      tooltipY = y + 30;
-    }
-    return { x: tooltipX, y: tooltipY };
-  }, []);
-  const containerStyle = {
-    "--font-size-base": `${baseFontSize}px`,
-    "--font-size-lg": `calc(var(--font-size-base) * 1.125)`,
-    "--font-size-sm": `calc(var(--font-size-base) * 0.875)`,
-    "--font-size-xs": `calc(var(--font-size-base) * 0.75)`
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+  }, [labelType, labelFormatter, data]);
+  const legendItems = (0, import_react31.useMemo)(
+    () => data.map((item, i) => ({
+      name: `${item.label}${showPercentages ? ` (${(item.value / total * 100).toFixed(1)}%)` : ""}`,
+      color: item.color || colors[i % colors.length],
+      type: "square"
+    })),
+    [data, colors, total, showPercentages]
+  );
+  const accessibleDescription = (0, import_react31.useMemo)(() => {
+    if (ariaLabel) return ariaLabel;
+    const sliceNames = data.map((d) => `${d.label}: ${d.value}`).join(", ");
+    return `${isDonut ? "Donut" : "Pie"} chart with ${data.length} slices: ${sliceNames}`;
+  }, [data, isDonut, ariaLabel]);
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
     "div",
     {
       ref: containerRef,
-      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${className}`,
-      style: {
-        ...containerStyle
-      },
+      className: `relative inline-flex flex-col items-center ${className}`,
+      style: { width },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("style", { children: `
-        /* Mobile: Large fonts, hidden axis titles, thicker bars (default) */
-        .${gridLabelClass} { font-size: ${gridLabelFontSize}px !important; }
-        .${axisLabelClass} { display: none; }
-
-        /* Tablet: Medium fonts, show axis titles */
-        @media (min-width: 640px) {
-          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.7}px !important; }
-          .${axisLabelClass} {
-            font-size: ${axisLabelFontSize * 0.7}px !important;
-            display: block;
-          }
-        }
-
-        /* Desktop: Small fonts, show axis titles */
-        @media (min-width: 1024px) {
-          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.4}px !important; }
-          .${axisLabelClass} {
-            font-size: ${axisLabelFontSize * 0.4}px !important;
-            display: block;
-          }
-        }
-      ` }),
-        /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
           "svg",
           {
-            width: "100%",
-            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
-            preserveAspectRatio: "xMidYMid meet",
-            className: "bg-white dark:bg-gray-800 block w-full",
-            style: { height: "auto", overflow: "visible" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-              gridLines,
-              renderBars(),
-              showXAxis && xAxisLabels,
-              xAxisLabel && showXAxis && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-                "text",
-                {
-                  x: chartWidth / 2,
-                  y: chartHeight + 80,
-                  textAnchor: "middle",
-                  dominantBaseline: "hanging",
-                  fontSize: axisLabelFontSize,
-                  fontWeight: "600",
-                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
-                  children: xAxisLabel
-                }
-              ),
-              yAxisLabel && showYAxis && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-                "text",
-                {
-                  x: -chartHeight / 2,
-                  y: -100,
-                  textAnchor: "middle",
-                  dominantBaseline: "middle",
-                  fontSize: axisLabelFontSize,
-                  fontWeight: "600",
-                  transform: "rotate(-90)",
-                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
-                  children: yAxisLabel
-                }
-              )
-            ] })
-          }
-        ),
-        showLegend && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "flex flex-wrap gap-3 justify-center px-4", children: data.map((series, index) => /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-            "div",
-            {
-              className: "w-3 h-3 rounded-sm flex-shrink-0",
-              style: {
-                backgroundColor: series.color || colors[index % colors.length]
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            role: "img",
+            "aria-label": accessibleDescription,
+            className: "bg-white dark:bg-gray-900",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("style", { children: `
+            @keyframes rotateIn {
+              from {
+                transform: rotate(-90deg);
+                opacity: 0;
+              }
+              to {
+                transform: rotate(0deg);
+                opacity: 1;
               }
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "text-gray-700 dark:text-gray-300", children: series.name })
-        ] }, `legend-${index}`)) }),
-        showTooltip && hoveredBar && tooltipPosition && /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
-          "div",
-          {
-            className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg pointer-events-none z-50 text-sm whitespace-nowrap",
-            style: {
-              left: `${tooltipPosition.x}px`,
-              top: `${tooltipPosition.y}px`,
-              transform: "translateZ(0)"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "font-semibold", children: data[hoveredBar.seriesIndex].name }),
-              /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "text-xs opacity-90", children: [
-                data[hoveredBar.seriesIndex].data[hoveredBar.barIndex].x,
-                ": ",
-                data[hoveredBar.seriesIndex].data[hoveredBar.barIndex].y
+            @keyframes fadeIn {
+              from { opacity: 0; }
+              to { opacity: 1; }
+            }
+          ` }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("g", { style: animate ? {
+                transformOrigin: `${centerX}px ${centerY}px`,
+                animation: `rotateIn ${animationDuration}ms ease-out forwards`
+              } : void 0, children: slices.map((slice) => {
+                const isHovered = hoveredSlice === slice.index;
+                const isActive = activeSlice === slice.index;
+                const scale = isHovered || isActive ? 1.03 : 1;
+                const transform = `translate(${centerX}px, ${centerY}px) scale(${scale}) translate(${-centerX}px, ${-centerY}px)`;
+                return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("g", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+                    "path",
+                    {
+                      d: slice.path,
+                      fill: slice.color,
+                      stroke: "white",
+                      strokeWidth: 2,
+                      className: "cursor-pointer transition-transform duration-150",
+                      style: { transform },
+                      onMouseEnter: (e) => handleSliceEnter(e, slice.index),
+                      onMouseLeave: handleSliceLeave,
+                      onClick: () => handleSliceClick(slice.index)
+                    }
+                  ),
+                  showLabels && slice.percent >= minLabelPercent && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+                    "text",
+                    {
+                      x: slice.labelX,
+                      y: slice.labelY,
+                      textAnchor: "middle",
+                      dominantBaseline: "middle",
+                      fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                      fontWeight: "600",
+                      className: "fill-white dark:fill-white pointer-events-none",
+                      style: animate ? {
+                        opacity: 0,
+                        animation: `fadeIn 200ms ease-out ${animationDuration}ms forwards`
+                      } : void 0,
+                      children: getLabelText(slice)
+                    }
+                  )
+                ] }, slice.index);
+              }) }),
+              isDonut && (centerLabel || centerValue !== void 0) && /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)("g", { children: [
+                centerValue !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+                  "text",
+                  {
+                    x: centerX,
+                    y: centerY - (centerLabel ? 8 : 0),
+                    textAnchor: "middle",
+                    dominantBaseline: "middle",
+                    fontSize: CHART_DEFAULTS.fontSize.title,
+                    fontWeight: "700",
+                    className: "fill-gray-900 dark:fill-gray-100",
+                    children: typeof centerValue === "number" ? formatNumber(centerValue) : centerValue
+                  }
+                ),
+                centerLabel && (typeof centerLabel === "string" ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+                  "text",
+                  {
+                    x: centerX,
+                    y: centerY + (centerValue !== void 0 ? 16 : 0),
+                    textAnchor: "middle",
+                    dominantBaseline: "middle",
+                    fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                    className: "fill-gray-500 dark:fill-gray-400",
+                    children: centerLabel
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+                  "foreignObject",
+                  {
+                    x: centerX - innerRadius * 0.7,
+                    y: centerY - innerRadius * 0.3,
+                    width: innerRadius * 1.4,
+                    height: innerRadius * 0.6,
+                    children: centerLabel
+                  }
+                ))
               ] })
             ]
           }
+        ),
+        showLegend && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+          Legend,
+          {
+            items: legendItems,
+            layout: "horizontal",
+            align: "center",
+            onClick: (item, index) => handleSliceClick(index),
+            onMouseEnter: (item, index) => setHoveredSlice(index),
+            onMouseLeave: () => setHoveredSlice(null)
+          }
+        ),
+        showTooltip && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+          ChartTooltip,
+          {
+            ...tooltipData,
+            formatter: tooltipFormatter || ((value) => `${formatNumber(value)} (${formatPercent(value / total * 100)})`),
+            containerBounds: { width, height }
+          }
         )
       ]
     }
   );
 };
 
-// src/components/AreaChart.tsx
-var import_react28 = __toESM(require("react"));
-var import_jsx_runtime110 = require("react/jsx-runtime");
-var defaultColors3 = [
-  "#3b82f6",
-  // blue-500
-  "#10b981",
-  // green-500
-  "#f59e0b",
-  // amber-500
-  "#ef4444",
-  // red-500
-  "#8b5cf6",
-  // violet-500
-  "#ec4899"
-  // pink-500
-];
-var AreaChart = ({
+// src/charts/ScatterChart.tsx
+var import_react32 = __toESM(require("react"));
+var import_jsx_runtime117 = require("react/jsx-runtime");
+function linearRegression(points) {
+  const n = points.length;
+  if (n === 0) return { slope: 0, intercept: 0 };
+  let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;
+  for (const p of points) {
+    sumX += p.x;
+    sumY += p.y;
+    sumXY += p.x * p.y;
+    sumXX += p.x * p.x;
+  }
+  const denominator = n * sumXX - sumX * sumX;
+  if (denominator === 0) return { slope: 0, intercept: sumY / n };
+  const slope = (n * sumXY - sumX * sumY) / denominator;
+  const intercept = (sumY - slope * sumX) / n;
+  return { slope, intercept };
+}
+var renderShape = (shape, x, y, size, color, commonProps) => {
+  const { className, stroke, strokeWidth, onMouseEnter, onMouseLeave, onClick } = commonProps;
+  switch (shape) {
+    case "square":
+      return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+        "rect",
+        {
+          x: x - size / 2,
+          y: y - size / 2,
+          width: size,
+          height: size,
+          fill: color,
+          className,
+          stroke,
+          strokeWidth,
+          onMouseEnter,
+          onMouseLeave,
+          onClick
+        }
+      );
+    case "triangle": {
+      const h = size * 0.866;
+      const points = `${x},${y - h / 2} ${x - size / 2},${y + h / 2} ${x + size / 2},${y + h / 2}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+        "polygon",
+        {
+          points,
+          fill: color,
+          className,
+          stroke,
+          strokeWidth,
+          onMouseEnter,
+          onMouseLeave,
+          onClick
+        }
+      );
+    }
+    case "diamond": {
+      const d = size / 1.414;
+      const diamondPoints = `${x},${y - d} ${x + d},${y} ${x},${y + d} ${x - d},${y}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+        "polygon",
+        {
+          points: diamondPoints,
+          fill: color,
+          className,
+          stroke,
+          strokeWidth,
+          onMouseEnter,
+          onMouseLeave,
+          onClick
+        }
+      );
+    }
+    case "circle":
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+        "circle",
+        {
+          cx: x,
+          cy: y,
+          r: size / 2,
+          fill: color,
+          className,
+          stroke,
+          strokeWidth,
+          onMouseEnter,
+          onMouseLeave,
+          onClick
+        }
+      );
+  }
+};
+var ScatterChart = ({
   data,
   width: providedWidth,
   height: providedHeight,
-  aspectRatio = 16 / 9,
-  responsive = true,
+  padding: customPadding,
   showGrid = true,
   showXAxis = true,
   showYAxis = true,
   showLegend = true,
   showTooltip = true,
-  showDots = false,
-  curved = true,
-  stacked = false,
-  fillOpacity = 0.3,
-  strokeWidth = 2,
-  className = "",
+  bubble = false,
+  minBubbleSize = 8,
+  maxBubbleSize = 40,
+  pointSize = 8,
+  animate = true,
+  animationDuration = CHART_DEFAULTS.animation.duration,
   xAxisLabel,
   yAxisLabel,
-  baseFontSize = 14
+  xAxisTickCount = 5,
+  yAxisTickCount = 5,
+  xDomain,
+  yDomain,
+  formatXValue,
+  formatYValue,
+  tooltipFormatter,
+  onPointClick,
+  onPointHover,
+  showTrendLine = false,
+  className = "",
+  children,
+  colors = CHART_DEFAULTS.colors,
+  ariaLabel
 }) => {
-  const viewBoxWidth = 1e3;
-  const viewBoxHeight = 600;
-  const containerRef = import_react28.default.useRef(null);
-  const svgRef = import_react28.default.useRef(null);
-  const [tooltipPosition, setTooltipPosition] = import_react28.default.useState(null);
-  const [hoveredPoint, setHoveredPoint] = import_react28.default.useState(null);
-  const chartId = import_react28.default.useId();
-  const wrapperClass = `chart-svg-wrapper-${chartId.replace(/:/g, "-")}`;
-  const gridLabelClass = `chart-grid-label-${chartId.replace(/:/g, "-")}`;
-  const axisLabelClass = `chart-axis-label-${chartId.replace(/:/g, "-")}`;
-  const lineClass = `chart-line-${chartId.replace(/:/g, "-")}`;
-  const pointClass = `chart-point-${chartId.replace(/:/g, "-")}`;
-  const padding = {
-    top: 50,
-    right: 50,
-    bottom: showXAxis ? 120 : 50,
-    left: showYAxis ? 130 : 50
-  };
-  const chartWidth = viewBoxWidth - padding.left - padding.right;
-  const chartHeight = viewBoxHeight - padding.top - padding.bottom;
-  const gridLabelFontSize = viewBoxWidth * 0.045;
-  const axisLabelFontSize = viewBoxWidth * 0.05;
-  const titleFontSize = viewBoxWidth * 0.055;
-  const allPoints = data.flatMap((series) => series.data);
-  const allYValues = stacked ? data[0]?.data.map(
-    (_, i) => data.reduce((sum, series) => sum + (series.data[i]?.y || 0), 0)
-  ) || [] : allPoints.map((p) => p.y);
-  const firstXValue = data[0]?.data[0]?.x;
-  const isStringX = typeof firstXValue === "string";
-  const uniqueXValues = isStringX ? Array.from(new Set(allPoints.map((p) => p.x))) : [];
-  const allXNumbers = isStringX ? uniqueXValues.map((_, idx) => idx) : allPoints.map((p) => p.x);
-  const minX = Math.min(...allXNumbers);
-  const maxX = Math.max(...allXNumbers);
-  const minY = Math.min(0, ...allYValues);
-  const maxY = Math.max(...allYValues);
-  const yRange = maxY - minY;
-  const yMin = Math.max(0, minY - yRange * 0.1);
-  const yMax = maxY + yRange * 0.1;
-  const scaleX = (x, index) => {
-    const numX = isStringX ? index : x;
-    if (maxX === minX) return chartWidth / 2;
-    return (numX - minX) / (maxX - minX) * chartWidth;
-  };
-  const scaleY = (y) => {
-    if (yMax === yMin) return chartHeight / 2;
-    return chartHeight - (y - yMin) / (yMax - yMin) * chartHeight;
-  };
-  const generateAreaPath = (series, baselineYValues) => {
-    if (series.data.length === 0) return "";
-    const points = series.data.map((point, i) => {
-      const x = scaleX(point.x, i);
-      const baseY = baselineYValues ? scaleY(baselineYValues[i]) : scaleY(0);
-      const y = baselineYValues ? scaleY(baselineYValues[i] + point.y) : scaleY(point.y);
-      return { x, y, baseY, originalIndex: i };
+  const containerRef = (0, import_react32.useRef)(null);
+  const [hoveredPoint, setHoveredPoint] = (0, import_react32.useState)(null);
+  const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
+  const width = providedWidth || 800;
+  const height = providedHeight || 400;
+  const padding = (0, import_react32.useMemo)(() => ({
+    top: customPadding?.top ?? CHART_DEFAULTS.padding.top,
+    right: customPadding?.right ?? CHART_DEFAULTS.padding.right,
+    bottom: customPadding?.bottom ?? (showXAxis ? 60 : CHART_DEFAULTS.padding.bottom),
+    left: customPadding?.left ?? (showYAxis ? 60 : CHART_DEFAULTS.padding.left)
+  }), [customPadding, showXAxis, showYAxis]);
+  const chartWidth = width - padding.left - padding.right;
+  const chartHeight = height - padding.top - padding.bottom;
+  const allPoints = (0, import_react32.useMemo)(
+    () => data.flatMap((series) => series.data),
+    [data]
+  );
+  const xDomainCalc = (0, import_react32.useMemo)(() => {
+    if (xDomain) return xDomain;
+    const xValues = allPoints.map((p) => p.x);
+    return calculateDomain(xValues, { includeZero: false, padding: 0.1 });
+  }, [allPoints, xDomain]);
+  const yDomainCalc = (0, import_react32.useMemo)(() => {
+    if (yDomain) return yDomain;
+    const yValues = allPoints.map((p) => p.y);
+    return calculateDomain(yValues, { includeZero: false, padding: 0.1 });
+  }, [allPoints, yDomain]);
+  const zDomain = (0, import_react32.useMemo)(() => {
+    if (!bubble) return [0, 1];
+    const zValues = allPoints.map((p) => p.z || 0).filter((z) => z > 0);
+    if (zValues.length === 0) return [0, 1];
+    return [Math.min(...zValues), Math.max(...zValues)];
+  }, [allPoints, bubble]);
+  const xScale = (0, import_react32.useMemo)(
+    () => scaleLinear({
+      domain: xDomainCalc,
+      range: [0, chartWidth]
+    }),
+    [xDomainCalc, chartWidth]
+  );
+  const yScale = (0, import_react32.useMemo)(
+    () => scaleLinear({
+      domain: yDomainCalc,
+      range: [chartHeight, 0]
+    }),
+    [yDomainCalc, chartHeight]
+  );
+  const sizeScale = (0, import_react32.useMemo)(() => {
+    if (!bubble) return () => pointSize;
+    return scaleLinear({
+      domain: zDomain,
+      range: [minBubbleSize, maxBubbleSize]
     });
-    if (curved) {
-      let topPath = `M ${points[0].x} ${points[0].y}`;
-      for (let i = 0; i < points.length - 1; i++) {
-        const current = points[i];
-        const next = points[i + 1];
-        const controlPointX = (current.x + next.x) / 2;
-        topPath += ` C ${controlPointX} ${current.y}, ${controlPointX} ${next.y}, ${next.x} ${next.y}`;
-      }
-      let bottomPath = "";
-      for (let i = points.length - 1; i >= 0; i--) {
-        const point = points[i];
-        if (i === points.length - 1) {
-          bottomPath += ` L ${point.x} ${point.baseY}`;
-        } else {
-          const next = points[i + 1];
-          const controlPointX = (point.x + next.x) / 2;
-          bottomPath += ` C ${controlPointX} ${next.baseY}, ${controlPointX} ${point.baseY}, ${point.x} ${point.baseY}`;
-        }
-      }
-      return topPath + bottomPath + " Z";
-    } else {
-      const topPath = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-      const bottomPath = points.slice().reverse().map((p) => `L ${p.x} ${p.baseY}`).join(" ");
-      return topPath + " " + bottomPath + " Z";
-    }
-  };
-  const generateLinePath = (series, baselineYValues) => {
-    if (series.data.length === 0) return "";
-    const points = series.data.map((point, i) => {
-      const x = scaleX(point.x, i);
-      const y = baselineYValues ? scaleY(baselineYValues[i] + point.y) : scaleY(point.y);
-      return { x, y };
+  }, [bubble, zDomain, minBubbleSize, maxBubbleSize, pointSize]);
+  const xTicks = (0, import_react32.useMemo)(() => getTicks(xDomainCalc, xAxisTickCount), [xDomainCalc, xAxisTickCount]);
+  const yTicks = (0, import_react32.useMemo)(() => getTicks(yDomainCalc, yAxisTickCount), [yDomainCalc, yAxisTickCount]);
+  const xFormatter = (0, import_react32.useMemo)(() => formatXValue || createTickFormatter(xDomainCalc), [formatXValue, xDomainCalc]);
+  const yFormatter = (0, import_react32.useMemo)(() => formatYValue || createTickFormatter(yDomainCalc), [formatYValue, yDomainCalc]);
+  const trendLines = (0, import_react32.useMemo)(() => {
+    if (!showTrendLine) return [];
+    return data.map((series) => {
+      const regression = linearRegression(series.data);
+      const x1 = xDomainCalc[0];
+      const x2 = xDomainCalc[1];
+      const y1 = regression.slope * x1 + regression.intercept;
+      const y2 = regression.slope * x2 + regression.intercept;
+      return {
+        x1: xScale(x1),
+        y1: yScale(y1),
+        x2: xScale(x2),
+        y2: yScale(y2)
+      };
     });
-    if (curved) {
-      let path = `M ${points[0].x} ${points[0].y}`;
-      for (let i = 0; i < points.length - 1; i++) {
-        const current = points[i];
-        const next = points[i + 1];
-        const controlPointX = (current.x + next.x) / 2;
-        path += ` C ${controlPointX} ${current.y}, ${controlPointX} ${next.y}, ${next.x} ${next.y}`;
+  }, [data, showTrendLine, xDomainCalc, xScale, yScale]);
+  const handlePointEnter = (0, import_react32.useCallback)((e, seriesIndex, pointIndex) => {
+    const series = data[seriesIndex];
+    const point = series.data[pointIndex];
+    setHoveredPoint({ seriesIndex, pointIndex });
+    if (showTooltip && containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      const payload = [
+        { name: "X", value: point.x, color: series.color || colors[seriesIndex % colors.length] },
+        { name: "Y", value: point.y, color: series.color || colors[seriesIndex % colors.length] }
+      ];
+      if (bubble && point.z !== void 0) {
+        payload.push({ name: "Size", value: point.z, color: series.color || colors[seriesIndex % colors.length] });
       }
-      return path;
-    } else {
-      return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-    }
-  };
-  const gridLines = [];
-  const numGridLines = 5;
-  if (showGrid) {
-    for (let i = 0; i <= numGridLines; i++) {
-      const y = chartHeight / numGridLines * i;
-      const yValue = yMax - (yMax - yMin) / numGridLines * i;
-      gridLines.push(
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-            "line",
-            {
-              x1: 0,
-              y1: y,
-              x2: chartWidth,
-              y2: y,
-              stroke: "currentColor",
-              strokeWidth: "0.5",
-              className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "4,4"
-            }
-          ),
-          showYAxis && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-            "text",
-            {
-              x: -25,
-              y,
-              textAnchor: "end",
-              dominantBaseline: "middle",
-              fontSize: gridLabelFontSize,
-              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
-              children: yValue.toFixed(1)
-            }
-          )
-        ] }, `grid-h-${i}`)
-      );
-    }
-    const numXGridLines = Math.min(allPoints.length, 6);
-    for (let i = 0; i < numXGridLines; i++) {
-      const x = chartWidth / (numXGridLines - 1) * i;
-      const xValue = data[0]?.data[Math.floor((data[0].data.length - 1) * (i / (numXGridLines - 1)))]?.x || "";
-      gridLines.push(
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("g", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-            "line",
-            {
-              x1: x,
-              y1: 0,
-              x2: x,
-              y2: chartHeight,
-              stroke: "currentColor",
-              strokeWidth: "0.5",
-              className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "4,4"
-            }
-          ),
-          showXAxis && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-            "text",
-            {
-              x,
-              y: chartHeight + 35,
-              textAnchor: "middle",
-              dominantBaseline: "hanging",
-              fontSize: gridLabelFontSize,
-              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
-              children: xValue
-            }
-          )
-        ] }, `grid-v-${i}`)
-      );
+      showTooltipFn({
+        x: mouseX,
+        y: mouseY,
+        label: point.label || series.name,
+        payload
+      });
     }
-  }
-  let cumulativeValues = [];
-  if (stacked) {
-    cumulativeValues = Array(data[0]?.data.length || 0).fill(0);
-  }
-  const getTooltipPosition = import_react28.default.useCallback((x, y) => {
-    if (!containerRef.current) return { x, y };
-    const rect = containerRef.current.getBoundingClientRect();
-    const tooltipWidth = 120;
-    const tooltipHeight = 80;
-    let tooltipX = x + 10;
-    let tooltipY = y - 30;
-    if (tooltipX + tooltipWidth > rect.width) {
-      tooltipX = x - tooltipWidth - 10;
-    }
-    if (tooltipY + tooltipHeight > rect.height) {
-      tooltipY = y + 30;
-    }
-    return { x: tooltipX, y: tooltipY };
-  }, []);
-  const containerStyle = {
-    "--font-size-base": `${baseFontSize}px`,
-    "--font-size-lg": `calc(var(--font-size-base) * 1.125)`,
-    "--font-size-sm": `calc(var(--font-size-base) * 0.875)`,
-    "--font-size-xs": `calc(var(--font-size-base) * 0.75)`
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+    onPointHover?.(point, seriesIndex, pointIndex);
+  }, [data, showTooltip, colors, bubble, showTooltipFn, onPointHover]);
+  const handlePointLeave = (0, import_react32.useCallback)(() => {
+    setHoveredPoint(null);
+    hideTooltip();
+    onPointHover?.(null, -1, -1);
+  }, [hideTooltip, onPointHover]);
+  const handlePointClick = (0, import_react32.useCallback)((seriesIndex, pointIndex) => {
+    const point = data[seriesIndex].data[pointIndex];
+    onPointClick?.(point, seriesIndex, pointIndex);
+  }, [data, onPointClick]);
+  const legendItems = (0, import_react32.useMemo)(
+    () => data.map((series, i) => ({
+      name: series.name,
+      color: series.color || colors[i % colors.length],
+      type: series.shape || "circle"
+    })),
+    [data, colors]
+  );
+  const referenceElements = (0, import_react32.useMemo)(() => {
+    if (!children) return null;
+    const chartDimensions = { width: chartWidth, height: chartHeight, padding };
+    const scales = { xScale, yScale };
+    return import_react32.default.Children.map(children, (child) => {
+      if (!import_react32.default.isValidElement(child)) return child;
+      if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
+        return import_react32.default.cloneElement(child, {
+          _chartDimensions: chartDimensions,
+          _scales: scales
+        });
+      }
+      return child;
+    });
+  }, [children, chartWidth, chartHeight, padding, xScale, yScale]);
+  const accessibleDescription = (0, import_react32.useMemo)(() => {
+    if (ariaLabel) return ariaLabel;
+    const totalPoints = data.reduce((sum, s) => sum + s.data.length, 0);
+    return `Scatter chart with ${data.length} series and ${totalPoints} data points`;
+  }, [data, ariaLabel]);
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
     "div",
     {
       ref: containerRef,
-      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${className}`,
-      style: containerStyle,
+      className: `relative ${className}`,
+      style: { width, height: "auto" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("style", { children: `
-        /* Mobile: Large fonts, hidden axis titles, thicker lines (default) */
-        .${gridLabelClass} { font-size: ${gridLabelFontSize}px !important; }
-        .${axisLabelClass} { display: none; }
-        .${lineClass} { stroke-width: ${strokeWidth * 2.5} !important; }
-        .${pointClass} { r: 6 !important; stroke-width: 3 !important; }
-
-        /* Tablet: Medium fonts, show axis titles, medium lines */
-        @media (min-width: 640px) {
-          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.7}px !important; }
-          .${axisLabelClass} {
-            font-size: ${axisLabelFontSize * 0.7}px !important;
-            display: block;
-          }
-          .${lineClass} { stroke-width: ${strokeWidth * 1.5} !important; }
-          .${pointClass} { r: 4 !important; stroke-width: 2 !important; }
-        }
-
-        /* Desktop: Small fonts, show axis titles, normal lines */
-        @media (min-width: 1024px) {
-          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.4}px !important; }
-          .${axisLabelClass} {
-            font-size: ${axisLabelFontSize * 0.4}px !important;
-            display: block;
-          }
-          .${lineClass} { stroke-width: ${strokeWidth} !important; }
-          .${pointClass} { r: 3 !important; stroke-width: 1.5 !important; }
-        }
-      ` }),
-        /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
           "svg",
           {
-            ref: svgRef,
-            width: "100%",
-            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
-            preserveAspectRatio: "xMidYMid meet",
-            className: "bg-white dark:bg-gray-800 block w-full",
-            style: { height: "auto", overflow: "visible" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-              gridLines,
-              data.map((series, seriesIndex) => {
-                const baselineYValues = stacked ? [...cumulativeValues] : void 0;
-                const areaPath = generateAreaPath(series, baselineYValues);
-                const linePath = generateLinePath(series, baselineYValues);
-                if (stacked) {
-                  series.data.forEach((point, i) => {
-                    cumulativeValues[i] += point.y;
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            role: "img",
+            "aria-label": accessibleDescription,
+            className: "bg-white dark:bg-gray-900",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("style", { children: `
+            @keyframes popIn {
+              from {
+                transform: scale(0);
+                opacity: 0;
+              }
+              to {
+                transform: scale(1);
+                opacity: 1;
+              }
+            }
+          ` }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+                showGrid && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                  CartesianGrid,
+                  {
+                    _chartDimensions: { width: chartWidth, height: chartHeight },
+                    horizontalPoints: yTicks.map((t) => yScale(t)),
+                    verticalPoints: xTicks.map((t) => xScale(t))
+                  }
+                ),
+                referenceElements,
+                showTrendLine && trendLines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                  "line",
+                  {
+                    x1: line.x1,
+                    y1: line.y1,
+                    x2: line.x2,
+                    y2: line.y2,
+                    stroke: data[i].color || colors[i % colors.length],
+                    strokeWidth: 2,
+                    strokeDasharray: "5 5",
+                    opacity: 0.5
+                  },
+                  `trend-${i}`
+                )),
+                data.map((series, seriesIndex) => {
+                  const color = series.color || colors[seriesIndex % colors.length];
+                  const shape = series.shape || "circle";
+                  const baseSize = series.size || pointSize;
+                  return series.data.map((point, pointIndex) => {
+                    const x = xScale(point.x);
+                    const y = yScale(point.y);
+                    const size = bubble && point.z !== void 0 ? sizeScale(point.z) : baseSize;
+                    const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
+                    const displaySize = isHovered ? size * 1.3 : size;
+                    return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                      "g",
+                      {
+                        style: animate ? {
+                          transformOrigin: `${x}px ${y}px`,
+                          animation: `popIn 200ms ease-out ${pointIndex * 30}ms forwards`,
+                          opacity: 0
+                        } : void 0,
+                        children: renderShape(shape, x, y, displaySize, color, {
+                          className: "cursor-pointer transition-all duration-150",
+                          stroke: "white",
+                          strokeWidth: 2,
+                          onMouseEnter: (e) => handlePointEnter(e, seriesIndex, pointIndex),
+                          onMouseLeave: handlePointLeave,
+                          onClick: () => handlePointClick(seriesIndex, pointIndex)
+                        })
+                      },
+                      `point-${seriesIndex}-${pointIndex}`
+                    );
                   });
-                }
-                return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("g", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-                    "path",
+                }),
+                showXAxis && /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { transform: `translate(0, ${chartHeight})`, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                    "line",
                     {
-                      d: areaPath,
-                      fill: series.color || defaultColors3[seriesIndex % defaultColors3.length],
-                      opacity: fillOpacity
+                      x1: 0,
+                      y1: 0,
+                      x2: chartWidth,
+                      y2: 0,
+                      className: "stroke-gray-300 dark:stroke-gray-600"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-                    "path",
+                  xTicks.map((tick, i) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { transform: `translate(${xScale(tick)}, 0)`, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("line", { y2: 6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                      "text",
+                      {
+                        y: 20,
+                        textAnchor: "middle",
+                        fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                        className: "fill-gray-600 dark:fill-gray-400",
+                        children: xFormatter(tick)
+                      }
+                    )
+                  ] }, `x-tick-${i}`)),
+                  xAxisLabel && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                    "text",
                     {
-                      d: linePath,
-                      fill: "none",
-                      stroke: series.color || defaultColors3[seriesIndex % defaultColors3.length],
-                      strokeWidth,
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      className: lineClass
+                      x: chartWidth / 2,
+                      y: 50,
+                      textAnchor: "middle",
+                      fontSize: CHART_DEFAULTS.fontSize.axisLabel,
+                      fontWeight: "500",
+                      className: "fill-gray-700 dark:fill-gray-300",
+                      children: xAxisLabel
                     }
                   )
-                ] }, `area-${seriesIndex}`);
-              }),
-              showDots && data.map((series, seriesIndex) => {
-                const baselineYValues = stacked ? data.slice(0, seriesIndex).reduce((acc, s) => {
-                  return acc.map((val, i) => val + (s.data[i]?.y || 0));
-                }, Array(series.data.length).fill(0)) : void 0;
-                return series.data.map((point, pointIndex) => {
-                  const x = scaleX(point.x, pointIndex);
-                  const y = baselineYValues ? scaleY(baselineYValues[pointIndex] + point.y) : scaleY(point.y);
-                  const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
-                  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-                    "circle",
+                ] }),
+                showYAxis && /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                    "line",
                     {
-                      cx: x,
-                      cy: y,
-                      r: isHovered ? 6 : 4,
-                      fill: series.color || defaultColors3[seriesIndex % defaultColors3.length],
-                      stroke: "white",
-                      strokeWidth: "2",
-                      className: `cursor-pointer transition-all ${pointClass}`,
-                      onMouseEnter: (e) => {
-                        if (showTooltip && containerRef.current) {
-                          setHoveredPoint({ seriesIndex, pointIndex, x, y });
-                          const containerRect = containerRef.current.getBoundingClientRect();
-                          const mouseX = e.clientX - containerRect.left;
-                          const mouseY = e.clientY - containerRect.top;
-                          setTooltipPosition(getTooltipPosition(mouseX, mouseY));
-                        }
-                      },
-                      onMouseMove: (e) => {
-                        if (showTooltip && hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex && containerRef.current) {
-                          const containerRect = containerRef.current.getBoundingClientRect();
-                          const mouseX = e.clientX - containerRect.left;
-                          const mouseY = e.clientY - containerRect.top;
-                          setTooltipPosition(getTooltipPosition(mouseX, mouseY));
-                        }
-                      },
-                      onMouseLeave: () => {
-                        setHoveredPoint(null);
-                        setTooltipPosition(null);
+                      x1: 0,
+                      y1: 0,
+                      x2: 0,
+                      y2: chartHeight,
+                      className: "stroke-gray-300 dark:stroke-gray-600"
+                    }
+                  ),
+                  yTicks.map((tick, i) => /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)("g", { transform: `translate(0, ${yScale(tick)})`, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("line", { x2: -6, className: "stroke-gray-300 dark:stroke-gray-600" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                      "text",
+                      {
+                        x: -12,
+                        textAnchor: "end",
+                        dominantBaseline: "middle",
+                        fontSize: CHART_DEFAULTS.fontSize.gridLabel,
+                        className: "fill-gray-600 dark:fill-gray-400",
+                        children: yFormatter(tick)
                       }
-                    },
-                    `point-${seriesIndex}-${pointIndex}`
-                  );
-                });
-              }),
-              xAxisLabel && showXAxis && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-                "text",
-                {
-                  x: chartWidth / 2,
-                  y: chartHeight + 80,
-                  textAnchor: "middle",
-                  dominantBaseline: "hanging",
-                  fontSize: axisLabelFontSize,
-                  fontWeight: "600",
-                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
-                  children: xAxisLabel
-                }
-              ),
-              yAxisLabel && showYAxis && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-                "text",
-                {
-                  x: -chartHeight / 2,
-                  y: -100,
-                  textAnchor: "middle",
-                  dominantBaseline: "middle",
-                  fontSize: axisLabelFontSize,
-                  fontWeight: "600",
-                  transform: "rotate(-90)",
-                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
-                  children: yAxisLabel
-                }
-              )
-            ] })
+                    )
+                  ] }, `y-tick-${i}`)),
+                  yAxisLabel && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                    "text",
+                    {
+                      x: -chartHeight / 2,
+                      y: -45,
+                      textAnchor: "middle",
+                      transform: "rotate(-90)",
+                      fontSize: CHART_DEFAULTS.fontSize.axisLabel,
+                      fontWeight: "500",
+                      className: "fill-gray-700 dark:fill-gray-300",
+                      children: yAxisLabel
+                    }
+                  )
+                ] })
+              ] })
+            ]
           }
         ),
-        showLegend && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "flex flex-wrap gap-3 justify-center px-4", children: data.map((series, index) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-            "div",
-            {
-              className: "w-3 h-3 rounded-sm flex-shrink-0",
-              style: {
-                backgroundColor: series.color || defaultColors3[index % defaultColors3.length]
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "text-gray-700 dark:text-gray-300", children: series.name })
-        ] }, `legend-${index}`)) }),
-        showTooltip && hoveredPoint && tooltipPosition && /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
-          "div",
+        showLegend && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
+        showTooltip && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+          ChartTooltip,
           {
-            className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg pointer-events-none z-50 text-sm whitespace-nowrap",
-            style: {
-              left: `${tooltipPosition.x}px`,
-              top: `${tooltipPosition.y}px`,
-              transform: "translateZ(0)"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "font-semibold", children: data[hoveredPoint.seriesIndex].name }),
-              /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "text-xs opacity-90", children: [
-                "x: ",
-                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].x
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "text-xs opacity-90", children: [
-                "y: ",
-                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
-              ] })
-            ]
+            ...tooltipData,
+            formatter: tooltipFormatter,
+            containerBounds: { width, height }
           }
         )
       ]
@@ -6548,299 +8367,494 @@ var AreaChart = ({
   );
 };
 
-// src/components/PieChart.tsx
-var import_react29 = __toESM(require("react"));
-var import_jsx_runtime111 = require("react/jsx-runtime");
-var defaultColors4 = [
-  "#3b82f6",
-  // blue-500
-  "#10b981",
-  // green-500
-  "#f59e0b",
-  // amber-500
-  "#ef4444",
-  // red-500
-  "#8b5cf6",
-  // violet-500
-  "#ec4899",
-  // pink-500
-  "#06b6d4",
-  // cyan-500
-  "#f97316"
-  // orange-500
-];
-var PieChart = ({
-  data,
-  width: providedWidth,
-  height: providedHeight,
-  aspectRatio = 1,
-  responsive = true,
-  showLegend = true,
-  showLabels = true,
-  showValues = false,
-  showPercentages = false,
-  donut = false,
-  donutWidth = 60,
+// src/charts/components/ResponsiveContainer.tsx
+var import_react33 = __toESM(require("react"));
+var import_jsx_runtime118 = require("react/jsx-runtime");
+var ResponsiveContainer = ({
+  width = "100%",
+  height,
+  aspect,
+  minWidth = 0,
+  minHeight = 0,
+  maxWidth,
+  maxHeight,
+  debounce = 0,
   className = "",
-  baseFontSize = 14
+  children,
+  onResize
 }) => {
-  const viewBoxWidth = 600;
-  const viewBoxHeight = 600;
-  const containerRef = import_react29.default.useRef(null);
-  const [tooltipPosition, setTooltipPosition] = import_react29.default.useState(null);
-  const [hoveredSlice, setHoveredSlice] = import_react29.default.useState(null);
-  const chartId = import_react29.default.useId();
-  const wrapperClass = `chart-svg-wrapper-${chartId.replace(/:/g, "-")}`;
-  const gridLabelClass = `chart-grid-label-${chartId.replace(/:/g, "-")}`;
-  const axisLabelClass = `chart-axis-label-${chartId.replace(/:/g, "-")}`;
-  const sliceClass = `chart-slice-${chartId.replace(/:/g, "-")}`;
-  const total = data.reduce((sum, item) => sum + item.value, 0);
-  const centerX = viewBoxWidth / 2;
-  const centerY = viewBoxHeight / 2;
-  const radius = Math.min(viewBoxWidth, viewBoxHeight) / 2 - 40;
-  const innerRadius = donut ? radius - donutWidth : 0;
-  const gridLabelFontSize = viewBoxWidth * 0.045;
-  const axisLabelFontSize = viewBoxWidth * 0.05;
-  const titleFontSize = viewBoxWidth * 0.055;
-  let currentAngle = -90;
-  const slices = data.map((item, index) => {
-    const percentage = item.value / total * 100;
-    const angle = item.value / total * 360;
-    const startAngle = currentAngle;
-    const endAngle = currentAngle + angle;
-    const startRad = startAngle * Math.PI / 180;
-    const endRad = endAngle * Math.PI / 180;
-    const x1 = Math.round((centerX + radius * Math.cos(startRad)) * 100) / 100;
-    const y1 = Math.round((centerY + radius * Math.sin(startRad)) * 100) / 100;
-    const x2 = Math.round((centerX + radius * Math.cos(endRad)) * 100) / 100;
-    const y2 = Math.round((centerY + radius * Math.sin(endRad)) * 100) / 100;
-    const largeArc = angle > 180 ? 1 : 0;
-    let path;
-    if (donut) {
-      const ix1 = Math.round((centerX + innerRadius * Math.cos(startRad)) * 100) / 100;
-      const iy1 = Math.round((centerY + innerRadius * Math.sin(startRad)) * 100) / 100;
-      const ix2 = Math.round((centerX + innerRadius * Math.cos(endRad)) * 100) / 100;
-      const iy2 = Math.round((centerY + innerRadius * Math.sin(endRad)) * 100) / 100;
-      path = [
-        `M ${x1} ${y1}`,
-        `A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}`,
-        `L ${ix2} ${iy2}`,
-        `A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${ix1} ${iy1}`,
-        "Z"
-      ].join(" ");
+  const containerRef = (0, import_react33.useRef)(null);
+  const [dimensions, setDimensions] = (0, import_react33.useState)({
+    width: 0,
+    height: 0
+  });
+  const debounceTimerRef = (0, import_react33.useRef)(null);
+  const calculateDimensions = (0, import_react33.useCallback)((containerWidth, containerHeight) => {
+    let finalWidth = containerWidth;
+    let finalHeight = containerHeight;
+    if (aspect && !height) {
+      finalHeight = containerWidth / aspect;
+    }
+    finalWidth = Math.max(minWidth, finalWidth);
+    finalHeight = Math.max(minHeight, finalHeight);
+    if (maxWidth) {
+      finalWidth = Math.min(maxWidth, finalWidth);
+    }
+    if (maxHeight) {
+      finalHeight = Math.min(maxHeight, finalHeight);
+    }
+    return { width: finalWidth, height: finalHeight };
+  }, [aspect, height, minWidth, minHeight, maxWidth, maxHeight]);
+  const handleResize = (0, import_react33.useCallback)((entries) => {
+    const entry = entries[0];
+    if (!entry) return;
+    const { width: containerWidth, height: containerHeight } = entry.contentRect;
+    const newDimensions = calculateDimensions(containerWidth, containerHeight);
+    const updateDimensions = () => {
+      setDimensions(newDimensions);
+      onResize?.(newDimensions.width, newDimensions.height);
+    };
+    if (debounce > 0) {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
+      debounceTimerRef.current = setTimeout(updateDimensions, debounce);
     } else {
-      path = [
-        `M ${centerX} ${centerY}`,
-        `L ${x1} ${y1}`,
-        `A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}`,
-        "Z"
-      ].join(" ");
-    }
-    const labelAngle = startAngle + angle / 2;
-    const labelRad = labelAngle * Math.PI / 180;
-    const labelRadius = donut ? innerRadius + (radius - innerRadius) / 2 : radius * 0.7;
-    const labelX = Math.round((centerX + labelRadius * Math.cos(labelRad)) * 100) / 100;
-    const labelY = Math.round((centerY + labelRadius * Math.sin(labelRad)) * 100) / 100;
-    currentAngle = endAngle;
-    return {
-      path,
-      color: item.color || defaultColors4[index % defaultColors4.length],
-      label: item.label,
-      value: item.value,
-      percentage,
-      labelX,
-      labelY,
-      index
+      updateDimensions();
+    }
+  }, [calculateDimensions, debounce, onResize]);
+  (0, import_react33.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(handleResize);
+    observer.observe(container);
+    const rect = container.getBoundingClientRect();
+    const initialDimensions = calculateDimensions(rect.width, rect.height);
+    setDimensions(initialDimensions);
+    return () => {
+      observer.disconnect();
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+      }
     };
-  });
-  const getTooltipPosition = import_react29.default.useCallback((x, y) => {
-    if (!containerRef.current) return { x, y };
-    const rect = containerRef.current.getBoundingClientRect();
-    const tooltipWidth = 120;
-    const tooltipHeight = 80;
-    let tooltipX = x + 10;
-    let tooltipY = y - 30;
-    if (tooltipX + tooltipWidth > rect.width) {
-      tooltipX = x - tooltipWidth - 10;
-    }
-    if (tooltipY + tooltipHeight > rect.height) {
-      tooltipY = y + 30;
-    }
-    return { x: tooltipX, y: tooltipY };
-  }, []);
+  }, [handleResize, calculateDimensions]);
   const containerStyle = {
-    "--font-size-base": `${baseFontSize}px`,
-    "--font-size-lg": `calc(var(--font-size-base) * 1.125)`,
-    "--font-size-sm": `calc(var(--font-size-base) * 0.875)`,
-    "--font-size-xs": `calc(var(--font-size-base) * 0.75)`,
-    "--font-size-xl": `calc(var(--font-size-base) * 1.5)`,
-    "--font-size-2xl": `calc(var(--font-size-base) * 2)`
+    width: typeof width === "number" ? `${width}px` : width,
+    height: height ? typeof height === "number" ? `${height}px` : height : "auto",
+    minWidth: minWidth ? `${minWidth}px` : void 0,
+    minHeight: minHeight ? `${minHeight}px` : void 0,
+    maxWidth: maxWidth ? `${maxWidth}px` : void 0,
+    maxHeight: maxHeight ? `${maxHeight}px` : void 0
   };
-  if (responsive) {
-    containerStyle["--font-size-base"] = `clamp(${baseFontSize * 0.8}px, 4vw, ${baseFontSize}px)`;
+  if (dimensions.width === 0 || dimensions.height === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className: `relative ${className}`,
+        style: containerStyle
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
+  const chartElement = import_react33.default.cloneElement(
+    children,
+    {
+      width: dimensions.width,
+      height: dimensions.height
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
     "div",
     {
       ref: containerRef,
-      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${className}`,
+      className: `relative ${className}`,
       style: containerStyle,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("style", { children: `
-        /* Mobile: Large fonts (default) */
-        .${gridLabelClass} { font-size: ${gridLabelFontSize}px !important; }
-        .${axisLabelClass} { font-size: ${titleFontSize}px !important; }
-
-        /* Tablet: Medium fonts */
-        @media (min-width: 640px) {
-          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.7}px !important; }
-          .${axisLabelClass} { font-size: ${titleFontSize * 0.7}px !important; }
-        }
+      children: chartElement
+    }
+  );
+};
 
-        /* Desktop: Small fonts */
-        @media (min-width: 1024px) {
-          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.4}px !important; }
-          .${axisLabelClass} { font-size: ${titleFontSize * 0.4}px !important; }
-        }
-      ` }),
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
-          "svg",
-          {
-            width: "100%",
-            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
-            preserveAspectRatio: "xMidYMid meet",
-            className: "bg-white dark:bg-gray-800 block w-full",
-            style: { height: "auto", overflow: "visible" },
-            children: [
-              slices.map((slice) => {
-                const isHovered = hoveredSlice === slice.index;
-                return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("g", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-                    "path",
-                    {
-                      d: slice.path,
-                      fill: slice.color,
-                      stroke: "white",
-                      strokeWidth: "2",
-                      className: "cursor-pointer transition-opacity",
-                      opacity: isHovered ? 0.8 : 1,
-                      onMouseEnter: (e) => {
-                        setHoveredSlice(slice.index);
-                        if (containerRef.current) {
-                          const rect = containerRef.current.getBoundingClientRect();
-                          const svgX = e.clientX - rect.left;
-                          const svgY = e.clientY - rect.top;
-                          setTooltipPosition(getTooltipPosition(svgX, svgY));
-                        }
-                      },
-                      onMouseLeave: () => {
-                        setHoveredSlice(null);
-                        setTooltipPosition(null);
-                      }
-                    }
-                  ),
-                  showLabels && slice.percentage > 5 && /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
-                    "text",
-                    {
-                      x: slice.labelX,
-                      y: slice.labelY,
-                      textAnchor: "middle",
-                      dominantBaseline: "middle",
-                      fontSize: gridLabelFontSize,
-                      fontWeight: "600",
-                      className: `fill-gray-700 dark:fill-gray-200 pointer-events-none ${gridLabelClass}`,
-                      children: [
-                        showPercentages && `${slice.percentage.toFixed(1)}%`,
-                        showPercentages && showValues && " ",
-                        showValues && `(${slice.value})`,
-                        !showPercentages && !showValues && slice.label
-                      ]
-                    }
-                  )
-                ] }, slice.index);
-              }),
-              donut && /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("g", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-                  "text",
+// src/components/Heatmap.tsx
+var import_react34 = __toESM(require("react"));
+var import_jsx_runtime119 = require("react/jsx-runtime");
+var COLOR_SCALES = {
+  blue: {
+    light: ["#eff6ff", "#dbeafe", "#bfdbfe", "#93c5fd", "#60a5fa", "#3b82f6", "#2563eb", "#1d4ed8", "#1e40af"],
+    dark: ["#1e3a5f", "#1e4976", "#1e5a8d", "#2563eb", "#3b82f6", "#60a5fa", "#93c5fd", "#bfdbfe", "#dbeafe"]
+  },
+  green: {
+    light: ["#f0fdf4", "#dcfce7", "#bbf7d0", "#86efac", "#4ade80", "#22c55e", "#16a34a", "#15803d", "#166534"],
+    dark: ["#14532d", "#166534", "#15803d", "#16a34a", "#22c55e", "#4ade80", "#86efac", "#bbf7d0", "#dcfce7"]
+  },
+  red: {
+    light: ["#fef2f2", "#fee2e2", "#fecaca", "#fca5a5", "#f87171", "#ef4444", "#dc2626", "#b91c1c", "#991b1b"],
+    dark: ["#450a0a", "#7f1d1d", "#991b1b", "#b91c1c", "#dc2626", "#ef4444", "#f87171", "#fca5a5", "#fecaca"]
+  },
+  purple: {
+    light: ["#faf5ff", "#f3e8ff", "#e9d5ff", "#d8b4fe", "#c084fc", "#a855f7", "#9333ea", "#7e22ce", "#6b21a8"],
+    dark: ["#3b0764", "#4c1d95", "#5b21b6", "#6d28d9", "#7c3aed", "#8b5cf6", "#a78bfa", "#c4b5fd", "#ddd6fe"]
+  },
+  orange: {
+    light: ["#fff7ed", "#ffedd5", "#fed7aa", "#fdba74", "#fb923c", "#f97316", "#ea580c", "#c2410c", "#9a3412"],
+    dark: ["#431407", "#7c2d12", "#9a3412", "#c2410c", "#ea580c", "#f97316", "#fb923c", "#fdba74", "#fed7aa"]
+  },
+  gray: {
+    light: ["#f9fafb", "#f3f4f6", "#e5e7eb", "#d1d5db", "#9ca3af", "#6b7280", "#4b5563", "#374151", "#1f2937"],
+    dark: ["#111827", "#1f2937", "#374151", "#4b5563", "#6b7280", "#9ca3af", "#d1d5db", "#e5e7eb", "#f3f4f6"]
+  }
+};
+var Heatmap = ({
+  data,
+  xLabels,
+  yLabels,
+  colorScale = "blue",
+  minValue: propMinValue,
+  maxValue: propMaxValue,
+  showValues = false,
+  showTooltip = true,
+  cellSize = 40,
+  cellGap = 2,
+  className = "",
+  onCellClick,
+  formatValue = (v) => v.toFixed(0),
+  formatTooltip
+}) => {
+  const [hoveredCell, setHoveredCell] = (0, import_react34.useState)(null);
+  const [isDarkMode, setIsDarkMode] = (0, import_react34.useState)(false);
+  import_react34.default.useEffect(() => {
+    const checkDarkMode = () => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  const { uniqueX, uniqueY, dataMap, minValue, maxValue } = (0, import_react34.useMemo)(() => {
+    const xSet = /* @__PURE__ */ new Set();
+    const ySet = /* @__PURE__ */ new Set();
+    const map = /* @__PURE__ */ new Map();
+    let min = propMinValue ?? Infinity;
+    let max = propMaxValue ?? -Infinity;
+    data.forEach((point) => {
+      const xKey = String(point.x);
+      const yKey = String(point.y);
+      xSet.add(xKey);
+      ySet.add(yKey);
+      map.set(`${xKey}:${yKey}`, point.value);
+      if (propMinValue === void 0) min = Math.min(min, point.value);
+      if (propMaxValue === void 0) max = Math.max(max, point.value);
+    });
+    return {
+      uniqueX: xLabels || Array.from(xSet),
+      uniqueY: yLabels || Array.from(ySet),
+      dataMap: map,
+      minValue: propMinValue ?? min,
+      maxValue: propMaxValue ?? max
+    };
+  }, [data, xLabels, yLabels, propMinValue, propMaxValue]);
+  const getColor = (value) => {
+    if (value === void 0) {
+      return isDarkMode ? "#374151" : "#f3f4f6";
+    }
+    const colors = isDarkMode ? COLOR_SCALES[colorScale].dark : COLOR_SCALES[colorScale].light;
+    const range = maxValue - minValue;
+    if (range === 0) return colors[4];
+    const normalized = Math.max(0, Math.min(1, (value - minValue) / range));
+    const index = Math.floor(normalized * (colors.length - 1));
+    return colors[index];
+  };
+  const getTextColor = (value) => {
+    if (value === void 0) return isDarkMode ? "#6b7280" : "#9ca3af";
+    const range = maxValue - minValue;
+    const normalized = range === 0 ? 0.5 : (value - minValue) / range;
+    if (isDarkMode) {
+      return normalized > 0.5 ? "#111827" : "#f9fafb";
+    }
+    return normalized > 0.5 ? "#ffffff" : "#111827";
+  };
+  const getTooltipContent = (point) => {
+    if (formatTooltip) return formatTooltip(point);
+    return `${point.x}, ${point.y}: ${formatValue(point.value)}`;
+  };
+  const labelWidth = 80;
+  const labelHeight = 30;
+  const width = labelWidth + uniqueX.length * (cellSize + cellGap);
+  const height = labelHeight + uniqueY.length * (cellSize + cellGap);
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: `relative inline-block ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+      "svg",
+      {
+        width,
+        height,
+        className: "select-none",
+        children: [
+          uniqueX.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+            "text",
+            {
+              x: labelWidth + i * (cellSize + cellGap) + cellSize / 2,
+              y: labelHeight - 8,
+              textAnchor: "middle",
+              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              style: { fontSize: "11px" },
+              children: label
+            },
+            `x-${label}`
+          )),
+          uniqueY.map((label, j) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+            "text",
+            {
+              x: labelWidth - 8,
+              y: labelHeight + j * (cellSize + cellGap) + cellSize / 2 + 4,
+              textAnchor: "end",
+              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              style: { fontSize: "11px" },
+              children: label
+            },
+            `y-${label}`
+          )),
+          uniqueY.map(
+            (yLabel, j) => uniqueX.map((xLabel, i) => {
+              const value = dataMap.get(`${xLabel}:${yLabel}`);
+              const point = data.find((d) => String(d.x) === xLabel && String(d.y) === yLabel);
+              const x = labelWidth + i * (cellSize + cellGap);
+              const y = labelHeight + j * (cellSize + cellGap);
+              return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("g", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                  "rect",
                   {
-                    x: centerX,
-                    y: centerY - 10,
-                    textAnchor: "middle",
-                    dominantBaseline: "middle",
-                    fontSize: titleFontSize,
-                    fontWeight: "700",
-                    className: `fill-gray-900 dark:fill-gray-100 ${axisLabelClass}`,
-                    children: total
+                    x,
+                    y,
+                    width: cellSize,
+                    height: cellSize,
+                    rx: 4,
+                    fill: getColor(value),
+                    className: `transition-all duration-150 ${onCellClick && point ? "cursor-pointer" : ""}`,
+                    style: {
+                      stroke: hoveredCell?.x === i && hoveredCell?.y === j ? isDarkMode ? "#60a5fa" : "#3b82f6" : "transparent",
+                      strokeWidth: 2
+                    },
+                    onMouseEnter: () => {
+                      if (point) setHoveredCell({ x: i, y: j, point });
+                    },
+                    onMouseLeave: () => setHoveredCell(null),
+                    onClick: () => {
+                      if (point && onCellClick) onCellClick(point);
+                    }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+                showValues && value !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                   "text",
                   {
-                    x: centerX,
-                    y: centerY + 15,
+                    x: x + cellSize / 2,
+                    y: y + cellSize / 2 + 4,
                     textAnchor: "middle",
-                    dominantBaseline: "middle",
-                    fontSize: axisLabelFontSize,
-                    className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
-                    children: "Total"
+                    fill: getTextColor(value),
+                    style: { fontSize: "11px", fontWeight: 500 },
+                    children: formatValue(value)
                   }
                 )
-              ] })
-            ]
-          }
-        ),
-        showLegend && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "flex flex-wrap gap-3 justify-center px-4", children: data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
-          "div",
-          {
-            className: "flex items-center gap-2 text-sm cursor-pointer",
-            onMouseEnter: () => setHoveredSlice(index),
-            onMouseLeave: () => setHoveredSlice(null),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
-                "div",
-                {
-                  className: "w-3 h-3 rounded-sm flex-shrink-0",
-                  style: {
-                    backgroundColor: item.color || defaultColors4[index % defaultColors4.length]
-                  }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("span", { className: "text-gray-700 dark:text-gray-300", children: [
-                item.label,
-                ": ",
-                item.value,
-                showPercentages && ` (${(item.value / total * 100).toFixed(1)}%)`
-              ] })
-            ]
-          },
-          `legend-${index}`
-        )) }),
-        hoveredSlice !== null && tooltipPosition && /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
-          "div",
-          {
-            className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg pointer-events-none z-50 text-sm whitespace-nowrap",
-            style: {
-              left: `${tooltipPosition.x}px`,
-              top: `${tooltipPosition.y}px`,
-              transform: "translateZ(0)"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "font-semibold", children: data[hoveredSlice].label }),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: "text-xs opacity-90", children: [
-                "Value: ",
-                data[hoveredSlice].value
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: "text-xs opacity-90", children: [
-                "Percentage: ",
-                (data[hoveredSlice].value / total * 100).toFixed(1),
-                "%"
-              ] })
-            ]
-          }
-        )
-      ]
+              ] }, `${xLabel}-${yLabel}`);
+            })
+          )
+        ]
+      }
+    ),
+    showTooltip && hoveredCell && /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+      "div",
+      {
+        className: "absolute z-50 px-3 py-2 text-sm bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg shadow-lg pointer-events-none whitespace-nowrap",
+        style: {
+          left: labelWidth + hoveredCell.x * (cellSize + cellGap) + cellSize / 2,
+          top: labelHeight + hoveredCell.y * (cellSize + cellGap) - 8,
+          transform: "translate(-50%, -100%)"
+        },
+        children: [
+          getTooltipContent(hoveredCell.point),
+          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+            "div",
+            {
+              className: "absolute w-2 h-2 bg-gray-900 dark:bg-gray-100 rotate-45",
+              style: {
+                left: "50%",
+                bottom: "-4px",
+                transform: "translateX(-50%)"
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var DAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var MONTH_LABELS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var CalendarHeatmap = ({
+  data,
+  startDate: propStartDate,
+  endDate: propEndDate,
+  colorScale = "green",
+  showMonthLabels = true,
+  showDayLabels = true,
+  cellSize = 12,
+  cellGap = 2,
+  className = "",
+  onCellClick,
+  formatTooltip
+}) => {
+  const [hoveredCell, setHoveredCell] = (0, import_react34.useState)(null);
+  const [isDarkMode, setIsDarkMode] = (0, import_react34.useState)(false);
+  import_react34.default.useEffect(() => {
+    const checkDarkMode = () => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    };
+    checkDarkMode();
+    const observer = new MutationObserver(checkDarkMode);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  const { weeks, minValue, maxValue, dataMap, monthLabels } = (0, import_react34.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    let min = Infinity;
+    let max = -Infinity;
+    data.forEach((item) => {
+      const date = typeof item.date === "string" ? new Date(item.date) : item.date;
+      const key = date.toISOString().split("T")[0];
+      map.set(key, item.value);
+      min = Math.min(min, item.value);
+      max = Math.max(max, item.value);
+    });
+    if (min === Infinity) min = 0;
+    if (max === -Infinity) max = 0;
+    const endDate = propEndDate || /* @__PURE__ */ new Date();
+    const startDate = propStartDate || new Date(endDate.getTime() - 364 * 24 * 60 * 60 * 1e3);
+    const adjustedStart = new Date(startDate);
+    adjustedStart.setDate(adjustedStart.getDate() - adjustedStart.getDay());
+    const weeksArr = [];
+    const currentDate = new Date(adjustedStart);
+    const months = [];
+    let lastMonth = -1;
+    while (currentDate <= endDate || weeksArr.length === 0 || weeksArr[weeksArr.length - 1].length < 7) {
+      if (weeksArr.length === 0 || weeksArr[weeksArr.length - 1].length === 7) {
+        weeksArr.push([]);
+      }
+      if (currentDate.getMonth() !== lastMonth && currentDate <= endDate) {
+        months.push({ label: MONTH_LABELS[currentDate.getMonth()], weekIndex: weeksArr.length - 1 });
+        lastMonth = currentDate.getMonth();
+      }
+      weeksArr[weeksArr.length - 1].push(new Date(currentDate));
+      currentDate.setDate(currentDate.getDate() + 1);
     }
-  );
+    return {
+      weeks: weeksArr,
+      minValue: min,
+      maxValue: max,
+      dataMap: map,
+      monthLabels: months
+    };
+  }, [data, propStartDate, propEndDate]);
+  const getColor = (value) => {
+    if (value === void 0 || value === 0) {
+      return isDarkMode ? "#1f2937" : "#ebedf0";
+    }
+    const colors = isDarkMode ? COLOR_SCALES[colorScale].dark : COLOR_SCALES[colorScale].light;
+    const range = maxValue - minValue;
+    if (range === 0) return colors[4];
+    const normalized = Math.max(0, Math.min(1, (value - minValue) / range));
+    const index = Math.max(1, Math.floor(normalized * (colors.length - 1)));
+    return colors[index];
+  };
+  const getTooltipContent = (date, value) => {
+    if (formatTooltip) return formatTooltip(date, value);
+    const dateStr = date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric", year: "numeric" });
+    return `${dateStr}: ${value} contribution${value !== 1 ? "s" : ""}`;
+  };
+  const dayLabelWidth = showDayLabels ? 30 : 0;
+  const monthLabelHeight = showMonthLabels ? 20 : 0;
+  const width = dayLabelWidth + weeks.length * (cellSize + cellGap);
+  const height = monthLabelHeight + 7 * (cellSize + cellGap);
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: `relative inline-block ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("svg", { width, height, className: "select-none", children: [
+      showMonthLabels && monthLabels.map(({ label, weekIndex }, i) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+        "text",
+        {
+          x: dayLabelWidth + weekIndex * (cellSize + cellGap),
+          y: 12,
+          className: "text-xs fill-gray-600 dark:fill-gray-400",
+          style: { fontSize: "10px" },
+          children: label
+        },
+        `month-${i}`
+      )),
+      showDayLabels && [1, 3, 5].map((dayIndex) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+        "text",
+        {
+          x: dayLabelWidth - 6,
+          y: monthLabelHeight + dayIndex * (cellSize + cellGap) + cellSize / 2 + 3,
+          textAnchor: "end",
+          className: "text-xs fill-gray-600 dark:fill-gray-400",
+          style: { fontSize: "9px" },
+          children: DAY_LABELS[dayIndex]
+        },
+        `day-${dayIndex}`
+      )),
+      weeks.map(
+        (week, weekIndex) => week.map((date, dayIndex) => {
+          const key = date.toISOString().split("T")[0];
+          const value = dataMap.get(key);
+          const x = dayLabelWidth + weekIndex * (cellSize + cellGap);
+          const y = monthLabelHeight + dayIndex * (cellSize + cellGap);
+          return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+            "rect",
+            {
+              x,
+              y,
+              width: cellSize,
+              height: cellSize,
+              rx: 2,
+              fill: getColor(value),
+              className: `transition-all duration-150 ${onCellClick ? "cursor-pointer" : ""}`,
+              style: {
+                stroke: hoveredCell?.weekIndex === weekIndex && hoveredCell?.dayIndex === dayIndex ? isDarkMode ? "#60a5fa" : "#3b82f6" : "transparent",
+                strokeWidth: 1
+              },
+              onMouseEnter: () => setHoveredCell({ weekIndex, dayIndex, date, value: value || 0 }),
+              onMouseLeave: () => setHoveredCell(null),
+              onClick: () => {
+                if (onCellClick) onCellClick(date, value || 0);
+              }
+            },
+            key
+          );
+        })
+      )
+    ] }),
+    hoveredCell && /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+      "div",
+      {
+        className: "absolute z-50 px-3 py-2 text-sm bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-lg shadow-lg pointer-events-none whitespace-nowrap",
+        style: {
+          left: dayLabelWidth + hoveredCell.weekIndex * (cellSize + cellGap) + cellSize / 2,
+          top: monthLabelHeight + hoveredCell.dayIndex * (cellSize + cellGap) - 8,
+          transform: "translate(-50%, -100%)"
+        },
+        children: [
+          getTooltipContent(hoveredCell.date, hoveredCell.value),
+          /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+            "div",
+            {
+              className: "absolute w-2 h-2 bg-gray-900 dark:bg-gray-100 rotate-45",
+              style: {
+                left: "50%",
+                bottom: "-4px",
+                transform: "translateX(-50%)"
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
 
 // src/utils/theme-script.ts
@@ -6896,10 +8910,14 @@ function getThemeScript() {
   BookIcon,
   BrainIcon,
   Button,
+  CHART_DEFAULTS,
   Calendar,
+  CalendarHeatmap,
   CalendarIcon,
   CameraIcon,
   Card,
+  CartesianGrid,
+  ChartTooltip,
   ChatIcon,
   CheckCircleIcon,
   CheckIcon,
@@ -6932,10 +8950,12 @@ function getThemeScript() {
   GlobeIcon,
   GoogleIcon,
   HeartIcon,
+  Heatmap,
   HomeIcon,
   ImageIcon,
   InfoCircleIcon,
   KeyIcon,
+  Legend,
   LineChart,
   LinkedInIcon,
   LockIcon,
@@ -6952,9 +8972,13 @@ function getThemeScript() {
   PlusIcon,
   ProgressBar,
   Radio,
+  ReferenceArea,
+  ReferenceLine,
   RefreshIcon,
+  ResponsiveContainer,
   RichTextEditor,
   SaveIcon,
+  ScatterChart,
   SearchIcon,
   Select,
   SettingsIcon,
@@ -6993,6 +9017,7 @@ function getThemeScript() {
   toast,
   useSidebar,
   useTheme,
-  useToast
+  useToast,
+  useTooltip
 });
 //# sourceMappingURL=index.js.map