@marcoschwartz/lite-ui 0.15.0 → 0.17.0

package/dist/index.js

@@ -610,11 +610,23 @@ var Navbar = ({
   logo,
   children,
   className = "",
-  sticky = false
+  sticky = false,
+  variant = "solid"
 }) => {
   const { theme } = useTheme();
   const baseClasses = sticky ? "sticky top-0 z-40" : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: `bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 ${baseClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
+  const getVariantClasses = () => {
+    switch (variant) {
+      case "glass":
+        return "bg-transparent backdrop-blur-xl";
+      case "transparent":
+        return "bg-transparent";
+      case "solid":
+      default:
+        return "bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700";
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: `${getVariantClasses()} ${baseClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
     logo && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center", children: logo }),
     children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center gap-6", children })
   ] }) }) });
@@ -5300,14 +5312,32 @@ var LineChart = ({
   strokeWidth = 2,
   className = "",
   xAxisLabel,
-  yAxisLabel
+  yAxisLabel,
+  baseFontSize = 14
 }) => {
-  const height = providedHeight ?? 400;
-  const width = providedWidth ?? (responsive ? 600 : 600);
+  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 padding = { top: 20, right: 20, bottom: showXAxis ? 60 : 20, left: showYAxis ? 60 : 20 };
-  const chartWidth = width - padding.left - padding.right;
-  const chartHeight = height - padding.top - padding.bottom;
+  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;
@@ -5320,7 +5350,7 @@ var LineChart = ({
   const minY = Math.min(0, ...allYValues);
   const maxY = Math.max(...allYValues);
   const yRange = maxY - minY;
-  const yMin = minY - yRange * 0.1;
+  const yMin = Math.max(0, minY - yRange * 0.1);
   const yMax = maxY + yRange * 0.1;
   const scaleX = (x, index) => {
     const numX = isStringX ? index : x;
@@ -5367,29 +5397,32 @@ var LineChart = ({
               x2: chartWidth,
               y2: y,
               stroke: "currentColor",
-              strokeWidth: "1",
+              strokeWidth: "0.5",
               className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "2,2"
+              strokeDasharray: "4,4"
             }
           ),
           showYAxis && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
             "text",
             {
-              x: -10,
-              y: y + 4,
+              x: -25,
+              y,
               textAnchor: "end",
-              fontSize: "16",
-              className: "fill-gray-600 dark:fill-gray-400",
+              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);
+    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 / (numXGridLines - 1) * i;
-      const xValue = data[0]?.data[Math.floor((data[0].data.length - 1) * (i / (numXGridLines - 1)))]?.x || "";
+      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)(
@@ -5400,19 +5433,20 @@ var LineChart = ({
               x2: x,
               y2: chartHeight,
               stroke: "currentColor",
-              strokeWidth: "1",
+              strokeWidth: "0.5",
               className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "2,2"
+              strokeDasharray: "4,4"
             }
           ),
           showXAxis && /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
             "text",
             {
               x,
-              y: chartHeight + 20,
+              y: chartHeight + 35,
               textAnchor: "middle",
-              fontSize: "14",
-              className: "fill-gray-600 dark:fill-gray-400",
+              dominantBaseline: "hanging",
+              fontSize: gridLabelFontSize,
+              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
               children: xValue
             }
           )
@@ -5420,21 +5454,74 @@ var LineChart = ({
       );
     }
   }
+  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)(
     "div",
     {
-      className: `relative ${responsive ? "w-full" : "inline-block"} ${className}`,
-      style: responsive ? { aspectRatio: `${width} / ${height}` } : void 0,
+      ref: containerRef,
+      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${className}`,
+      style: {
+        ...containerStyle
+      },
       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;
+          }
+          .${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_runtime108.jsx)(
           "svg",
           {
+            ref: svgRef,
             width: "100%",
-            height: "100%",
-            viewBox: `0 0 ${width} ${height}`,
+            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
             preserveAspectRatio: "xMidYMid meet",
-            className: "bg-white dark:bg-gray-800 block",
-            style: { overflow: "visible" },
+            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)(
@@ -5445,7 +5532,8 @@ var LineChart = ({
                   stroke: series.color || defaultColors[seriesIndex % defaultColors.length],
                   strokeWidth,
                   strokeLinecap: "round",
-                  strokeLinejoin: "round"
+                  strokeLinejoin: "round",
+                  className: lineClass
                 },
                 `line-${seriesIndex}`
               )),
@@ -5459,13 +5547,32 @@ var LineChart = ({
                     {
                       cx: x,
                       cy: y,
-                      r: isHovered ? 6 : 4,
+                      r: isHovered ? 5 : 3,
                       fill: series.color || defaultColors[seriesIndex % defaultColors.length],
                       stroke: "white",
-                      strokeWidth: "2",
-                      className: "cursor-pointer transition-all",
-                      onMouseEnter: () => showTooltip && setHoveredPoint({ seriesIndex, pointIndex, x, y }),
-                      onMouseLeave: () => setHoveredPoint(null)
+                      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));
+                        }
+                      },
+                      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);
+                      }
                     },
                     `point-${seriesIndex}-${pointIndex}`
                   );
@@ -5475,11 +5582,12 @@ var LineChart = ({
                 "text",
                 {
                   x: chartWidth / 2,
-                  y: chartHeight + 50,
+                  y: chartHeight + 80,
                   textAnchor: "middle",
-                  fontSize: "16",
-                  fontWeight: "500",
-                  className: "fill-gray-700 dark:fill-gray-300",
+                  dominantBaseline: "hanging",
+                  fontSize: axisLabelFontSize,
+                  fontWeight: "600",
+                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
                   children: xAxisLabel
                 }
               ),
@@ -5487,45 +5595,47 @@ var LineChart = ({
                 "text",
                 {
                   x: -chartHeight / 2,
-                  y: -45,
+                  y: -100,
                   textAnchor: "middle",
-                  fontSize: "16",
-                  fontWeight: "500",
-                  transform: `rotate(-90, 0, 0)`,
-                  className: "fill-gray-700 dark:fill-gray-300",
+                  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_runtime108.jsx)("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex items-center gap-2", children: [
+        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-4 h-4 rounded-sm",
+              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-sm text-gray-700 dark:text-gray-300", children: series.name })
+          /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-gray-700 dark:text-gray-300", children: series.name })
         ] }, `legend-${index}`)) }),
-        showTooltip && hoveredPoint && /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
+        showTooltip && hoveredPoint && tooltipPosition && /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
           "div",
           {
-            className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg text-sm pointer-events-none z-50",
+            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: `${padding.left + hoveredPoint.x + 10}px`,
-              top: `${padding.top + hoveredPoint.y - 30}px`
+              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", { children: [
+              /* @__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", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "text-xs opacity-90", children: [
                 "y: ",
                 data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
               ] })
@@ -5571,26 +5681,38 @@ var BarChart = ({
   barWidth = 0.8,
   className = "",
   xAxisLabel,
-  yAxisLabel
+  yAxisLabel,
+  baseFontSize = 14,
+  colors = defaultColors2
 }) => {
-  const height = providedHeight ?? 400;
-  const width = providedWidth ?? (responsive ? 800 : 600);
+  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: 20,
-    right: 20,
-    bottom: showXAxis ? horizontal ? 60 : 80 : 20,
-    left: showYAxis ? horizontal ? 80 : 60 : 20
+    top: 50,
+    right: 50,
+    bottom: showXAxis ? horizontal ? 120 : 140 : 50,
+    left: showYAxis ? horizontal ? 140 : 130 : 50
   };
-  const chartWidth = width - padding.left - padding.right;
-  const chartHeight = height - padding.top - padding.bottom;
+  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 = minY - yRange * 0.1;
+  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;
@@ -5617,19 +5739,20 @@ var BarChart = ({
               x2: chartWidth,
               y2: y,
               stroke: "currentColor",
-              strokeWidth: "1",
+              strokeWidth: "0.5",
               className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "2,2"
+              strokeDasharray: "4,4"
             }
           ),
           showYAxis && !horizontal && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
             "text",
             {
-              x: -10,
-              y: y + 4,
+              x: -25,
+              y,
               textAnchor: "end",
-              fontSize: "14",
-              className: "fill-gray-600 dark:fill-gray-400",
+              dominantBaseline: "middle",
+              fontSize: gridLabelFontSize,
+              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
               children: yValue.toFixed(0)
             }
           )
@@ -5678,12 +5801,20 @@ var BarChart = ({
                 x: xPos,
                 y: yPos,
                 width: barW,
-                height: barHeight,
-                fill: data[seriesIndex].color || defaultColors2[seriesIndex % defaultColors2.length],
-                className: "cursor-pointer transition-opacity",
+                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: () => showTooltip && setHoveredBar({ seriesIndex, barIndex, x: xPos + barW / 2, y: yPos }),
-                onMouseLeave: () => setHoveredBar(null)
+                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}`
             )
@@ -5708,8 +5839,8 @@ var BarChart = ({
                 y: yPos,
                 width: actualBarWidth,
                 height: barHeight,
-                fill: data[seriesIndex].color || defaultColors2[seriesIndex % defaultColors2.length],
-                className: "cursor-pointer transition-opacity",
+                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)
@@ -5723,10 +5854,11 @@ var BarChart = ({
                 "text",
                 {
                   x: xPos + actualBarWidth / 2,
-                  y: yPos - 5,
+                  y: yPos - 10,
                   textAnchor: "middle",
-                  fontSize: "14",
-                  fontWeight: "500",
+                  dominantBaseline: "middle",
+                  fontSize: "11",
+                  fontWeight: "600",
                   className: "fill-gray-700 dark:fill-gray-300",
                   children: point.y
                 },
@@ -5745,30 +5877,77 @@ var BarChart = ({
       "text",
       {
         x: xPos,
-        y: chartHeight + 20,
+        y: chartHeight + 35,
         textAnchor: "middle",
-        fontSize: "14",
-        className: "fill-gray-600 dark:fill-gray-400",
+        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)(
     "div",
     {
-      className: `relative ${responsive ? "w-full" : "inline-block"} ${className}`,
-      style: responsive ? { aspectRatio: `${width} / ${height}` } : void 0,
+      ref: containerRef,
+      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${className}`,
+      style: {
+        ...containerStyle
+      },
       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)(
           "svg",
           {
             width: "100%",
-            height: "100%",
-            viewBox: `0 0 ${width} ${height}`,
+            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
             preserveAspectRatio: "xMidYMid meet",
-            className: "bg-white dark:bg-gray-800 block",
-            style: { overflow: "visible" },
+            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(),
@@ -5777,11 +5956,12 @@ var BarChart = ({
                 "text",
                 {
                   x: chartWidth / 2,
-                  y: chartHeight + 50,
+                  y: chartHeight + 80,
                   textAnchor: "middle",
-                  fontSize: "16",
-                  fontWeight: "500",
-                  className: "fill-gray-700 dark:fill-gray-300",
+                  dominantBaseline: "hanging",
+                  fontSize: axisLabelFontSize,
+                  fontWeight: "600",
+                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
                   children: xAxisLabel
                 }
               ),
@@ -5789,41 +5969,43 @@ var BarChart = ({
                 "text",
                 {
                   x: -chartHeight / 2,
-                  y: -45,
+                  y: -100,
                   textAnchor: "middle",
-                  fontSize: "16",
-                  fontWeight: "500",
-                  transform: `rotate(-90, 0, 0)`,
-                  className: "fill-gray-700 dark:fill-gray-300",
+                  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-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: "flex items-center gap-2", children: [
+        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-4 h-4 rounded-sm",
+              className: "w-3 h-3 rounded-sm flex-shrink-0",
               style: {
-                backgroundColor: series.color || defaultColors2[index % defaultColors2.length]
+                backgroundColor: series.color || colors[index % colors.length]
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: series.name })
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("span", { className: "text-gray-700 dark:text-gray-300", children: series.name })
         ] }, `legend-${index}`)) }),
-        showTooltip && hoveredBar && /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+        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 text-sm pointer-events-none z-50",
+            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: `${padding.left + hoveredBar.x + 10}px`,
-              top: `${padding.top + hoveredBar.y - 30}px`
+              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", { children: [
+              /* @__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
@@ -5871,14 +6053,32 @@ var AreaChart = ({
   strokeWidth = 2,
   className = "",
   xAxisLabel,
-  yAxisLabel
+  yAxisLabel,
+  baseFontSize = 14
 }) => {
-  const height = providedHeight ?? 400;
-  const width = providedWidth ?? 800;
+  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 padding = { top: 20, right: 20, bottom: showXAxis ? 60 : 20, left: showYAxis ? 60 : 20 };
-  const chartWidth = width - padding.left - padding.right;
-  const chartHeight = height - padding.top - padding.bottom;
+  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)
@@ -5892,7 +6092,7 @@ var AreaChart = ({
   const minY = Math.min(0, ...allYValues);
   const maxY = Math.max(...allYValues);
   const yRange = maxY - minY;
-  const yMin = minY - yRange * 0.1;
+  const yMin = Math.max(0, minY - yRange * 0.1);
   const yMax = maxY + yRange * 0.1;
   const scaleX = (x, index) => {
     const numX = isStringX ? index : x;
@@ -5973,20 +6173,21 @@ var AreaChart = ({
               x2: chartWidth,
               y2: y,
               stroke: "currentColor",
-              strokeWidth: "1",
+              strokeWidth: "0.5",
               className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "2,2"
+              strokeDasharray: "4,4"
             }
           ),
           showYAxis && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
             "text",
             {
-              x: -10,
-              y: y + 4,
+              x: -25,
+              y,
               textAnchor: "end",
-              fontSize: "12",
-              className: "fill-gray-600 dark:fill-gray-400",
-              children: yValue.toFixed(0)
+              dominantBaseline: "middle",
+              fontSize: gridLabelFontSize,
+              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
+              children: yValue.toFixed(1)
             }
           )
         ] }, `grid-h-${i}`)
@@ -6006,19 +6207,20 @@ var AreaChart = ({
               x2: x,
               y2: chartHeight,
               stroke: "currentColor",
-              strokeWidth: "1",
+              strokeWidth: "0.5",
               className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "2,2"
+              strokeDasharray: "4,4"
             }
           ),
           showXAxis && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
             "text",
             {
               x,
-              y: chartHeight + 20,
+              y: chartHeight + 35,
               textAnchor: "middle",
-              fontSize: "12",
-              className: "fill-gray-600 dark:fill-gray-400",
+              dominantBaseline: "hanging",
+              fontSize: gridLabelFontSize,
+              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
               children: xValue
             }
           )
@@ -6030,20 +6232,72 @@ var AreaChart = ({
   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)(
     "div",
     {
-      className: `relative ${responsive ? "w-full" : "inline-block"} ${className}`,
-      style: responsive ? { width: "100%", aspectRatio: `${width} / ${height}` } : void 0,
+      ref: containerRef,
+      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${className}`,
+      style: containerStyle,
       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)(
           "svg",
           {
+            ref: svgRef,
             width: "100%",
-            height: "100%",
-            viewBox: `0 0 ${width} ${height}`,
+            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
             preserveAspectRatio: "xMidYMid meet",
-            className: "bg-white dark:bg-gray-800 block",
+            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) => {
@@ -6072,7 +6326,8 @@ var AreaChart = ({
                       stroke: series.color || defaultColors3[seriesIndex % defaultColors3.length],
                       strokeWidth,
                       strokeLinecap: "round",
-                      strokeLinejoin: "round"
+                      strokeLinejoin: "round",
+                      className: lineClass
                     }
                   )
                 ] }, `area-${seriesIndex}`);
@@ -6094,9 +6349,28 @@ var AreaChart = ({
                       fill: series.color || defaultColors3[seriesIndex % defaultColors3.length],
                       stroke: "white",
                       strokeWidth: "2",
-                      className: "cursor-pointer transition-all",
-                      onMouseEnter: () => showTooltip && setHoveredPoint({ seriesIndex, pointIndex, x, y }),
-                      onMouseLeave: () => setHoveredPoint(null)
+                      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);
+                      }
                     },
                     `point-${seriesIndex}-${pointIndex}`
                   );
@@ -6106,11 +6380,12 @@ var AreaChart = ({
                 "text",
                 {
                   x: chartWidth / 2,
-                  y: chartHeight + 50,
+                  y: chartHeight + 80,
                   textAnchor: "middle",
-                  fontSize: "14",
-                  fontWeight: "500",
-                  className: "fill-gray-700 dark:fill-gray-300",
+                  dominantBaseline: "hanging",
+                  fontSize: axisLabelFontSize,
+                  fontWeight: "600",
+                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
                   children: xAxisLabel
                 }
               ),
@@ -6118,45 +6393,47 @@ var AreaChart = ({
                 "text",
                 {
                   x: -chartHeight / 2,
-                  y: -45,
+                  y: -100,
                   textAnchor: "middle",
-                  fontSize: "14",
-                  fontWeight: "500",
-                  transform: "rotate(-90, 0, 0)",
-                  className: "fill-gray-700 dark:fill-gray-300",
+                  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_runtime110.jsx)("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex items-center gap-2", children: [
+        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-4 h-4 rounded-sm",
+              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-sm text-gray-700 dark:text-gray-300", children: series.name })
+          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "text-gray-700 dark:text-gray-300", children: series.name })
         ] }, `legend-${index}`)) }),
-        showTooltip && hoveredPoint && /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+        showTooltip && hoveredPoint && tooltipPosition && /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
           "div",
           {
-            className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg text-sm pointer-events-none z-50",
+            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: `${padding.left + hoveredPoint.x + 10}px`,
-              top: `${padding.top + hoveredPoint.y - 30}px`
+              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", { children: [
+              /* @__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", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "text-xs opacity-90", children: [
                 "y: ",
                 data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
               ] })
@@ -6201,16 +6478,27 @@ var PieChart = ({
   showPercentages = false,
   donut = false,
   donutWidth = 60,
-  className = ""
+  className = "",
+  baseFontSize = 14
 }) => {
-  const height = providedHeight ?? 400;
-  const width = providedWidth ?? 400;
+  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 = width / 2;
-  const centerY = height / 2;
-  const radius = Math.min(width, height) / 2 - 40;
+  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;
@@ -6262,20 +6550,64 @@ var PieChart = ({
       index
     };
   });
+  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 };
+  }, []);
+  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)`
+  };
+  if (responsive) {
+    containerStyle["--font-size-base"] = `clamp(${baseFontSize * 0.8}px, 4vw, ${baseFontSize}px)`;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
     "div",
     {
-      className: `relative ${responsive ? "w-full flex justify-center" : "inline-block"} ${className}`,
-      style: responsive ? { aspectRatio: `${width} / ${height}` } : void 0,
+      ref: containerRef,
+      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${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; }
+        }
+
+        /* 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%",
-            height: "100%",
-            viewBox: `0 0 ${width} ${height}`,
+            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
             preserveAspectRatio: "xMidYMid meet",
-            className: "bg-white dark:bg-gray-800 block",
+            className: "bg-white dark:bg-gray-800 block w-full",
+            style: { height: "auto", overflow: "visible" },
             children: [
               slices.map((slice) => {
                 const isHovered = hoveredSlice === slice.index;
@@ -6289,8 +6621,19 @@ var PieChart = ({
                       strokeWidth: "2",
                       className: "cursor-pointer transition-opacity",
                       opacity: isHovered ? 0.8 : 1,
-                      onMouseEnter: () => setHoveredSlice(slice.index),
-                      onMouseLeave: () => setHoveredSlice(null)
+                      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)(
@@ -6300,9 +6643,9 @@ var PieChart = ({
                       y: slice.labelY,
                       textAnchor: "middle",
                       dominantBaseline: "middle",
-                      fontSize: "14",
+                      fontSize: gridLabelFontSize,
                       fontWeight: "600",
-                      className: "fill-gray-700 dark:fill-gray-200 pointer-events-none",
+                      className: `fill-gray-700 dark:fill-gray-200 pointer-events-none ${gridLabelClass}`,
                       children: [
                         showPercentages && `${slice.percentage.toFixed(1)}%`,
                         showPercentages && showValues && " ",
@@ -6320,9 +6663,10 @@ var PieChart = ({
                     x: centerX,
                     y: centerY - 10,
                     textAnchor: "middle",
-                    fontSize: "32",
+                    dominantBaseline: "middle",
+                    fontSize: titleFontSize,
                     fontWeight: "700",
-                    className: "fill-gray-900 dark:fill-gray-100",
+                    className: `fill-gray-900 dark:fill-gray-100 ${axisLabelClass}`,
                     children: total
                   }
                 ),
@@ -6332,8 +6676,9 @@ var PieChart = ({
                     x: centerX,
                     y: centerY + 15,
                     textAnchor: "middle",
-                    fontSize: "16",
-                    className: "fill-gray-600 dark:fill-gray-400",
+                    dominantBaseline: "middle",
+                    fontSize: axisLabelFontSize,
+                    className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
                     children: "Total"
                   }
                 )
@@ -6341,23 +6686,23 @@ var PieChart = ({
             ]
           }
         ),
-        showLegend && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
+        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 cursor-pointer",
+            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-4 h-4 rounded-sm",
+                  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-sm text-gray-700 dark:text-gray-300", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("span", { className: "text-gray-700 dark:text-gray-300", children: [
                 item.label,
                 ": ",
                 item.value,
@@ -6367,18 +6712,29 @@ var PieChart = ({
           },
           `legend-${index}`
         )) }),
-        hoveredSlice !== null && /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { className: "absolute top-2 right-2 bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg text-sm pointer-events-none z-50", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("div", { className: "font-semibold", children: data[hoveredSlice].label }),
-          /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { children: [
-            "Value: ",
-            data[hoveredSlice].value
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { children: [
-            "Percentage: ",
-            (data[hoveredSlice].value / total * 100).toFixed(1),
-            "%"
-          ] })
-        ] })
+        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),
+                "%"
+              ] })
+            ]
+          }
+        )
       ]
     }
   );