@marcoschwartz/lite-ui 0.11.0 → 0.15.0

package/dist/index.mjs

@@ -3182,6 +3182,7 @@ var RichTextEditor = ({
   const [showImageModal, setShowImageModal] = useState12(false);
   const [imageUrl, setImageUrl] = useState12("");
   const [imageAlt, setImageAlt] = useState12("");
+  const savedSelection = useRef7(null);
   useLayoutEffect(() => {
     const styleId = "rich-text-editor-styles";
     if (!document.getElementById(styleId)) {
@@ -3208,6 +3209,15 @@ var RichTextEditor = ({
           font-weight: bold;
           margin: 0.83em 0;
         }
+        [contenteditable] p {
+          margin: 0.5em 0;
+        }
+        [contenteditable] p:first-child {
+          margin-top: 0;
+        }
+        [contenteditable] p:last-child {
+          margin-bottom: 0;
+        }
         [contenteditable] ul, [contenteditable] ol {
           margin: 1em 0;
           padding-left: 2em;
@@ -3236,11 +3246,60 @@ var RichTextEditor = ({
     }
   }, []);
   const isInitialRender = useRef7(true);
+  const isInternalUpdate = useRef7(false);
   useEffect8(() => {
-    if (!isInitialRender.current && editorRef.current && editorRef.current.innerHTML !== value) {
+    if (isInitialRender.current && editorRef.current) {
       editorRef.current.innerHTML = value;
+      isInitialRender.current = false;
+      try {
+        document.execCommand("defaultParagraphSeparator", false, "p");
+      } catch (e) {
+        console.warn("Could not set defaultParagraphSeparator", e);
+      }
     }
-    isInitialRender.current = false;
+  }, []);
+  useEffect8(() => {
+    if (!isInitialRender.current && !isInternalUpdate.current && editorRef.current) {
+      const currentHtml = editorRef.current.innerHTML;
+      if (currentHtml !== value) {
+        const selection = window.getSelection();
+        const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+        const preSelectionRange = range ? range.cloneRange() : null;
+        if (preSelectionRange && editorRef.current.contains(preSelectionRange.startContainer)) {
+          preSelectionRange.selectNodeContents(editorRef.current);
+          preSelectionRange.setEnd(range.startContainer, range.startOffset);
+          const start = preSelectionRange.toString().length;
+          editorRef.current.innerHTML = value;
+          const textNodes = [];
+          const getTextNodes = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+              textNodes.push(node);
+            } else {
+              node.childNodes.forEach(getTextNodes);
+            }
+          };
+          getTextNodes(editorRef.current);
+          let charCount = 0;
+          let foundStart = false;
+          for (const textNode of textNodes) {
+            const textLength = textNode.textContent?.length || 0;
+            if (!foundStart && charCount + textLength >= start) {
+              const newRange = document.createRange();
+              newRange.setStart(textNode, start - charCount);
+              newRange.collapse(true);
+              selection?.removeAllRanges();
+              selection?.addRange(newRange);
+              foundStart = true;
+              break;
+            }
+            charCount += textLength;
+          }
+        } else {
+          editorRef.current.innerHTML = value;
+        }
+      }
+    }
+    isInternalUpdate.current = false;
   }, [value]);
   const updateActiveFormats = useCallback(() => {
     const formats = /* @__PURE__ */ new Set();
@@ -3261,10 +3320,25 @@ var RichTextEditor = ({
   }, []);
   const handleInput = useCallback(() => {
     if (editorRef.current && onChange) {
+      isInternalUpdate.current = true;
       onChange(editorRef.current.innerHTML);
     }
     updateActiveFormats();
   }, [onChange, updateActiveFormats]);
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    if (editorRef.current && (!editorRef.current.innerHTML || editorRef.current.innerHTML === "")) {
+      editorRef.current.innerHTML = "<p><br></p>";
+      const selection = window.getSelection();
+      const range = document.createRange();
+      if (editorRef.current.firstChild) {
+        range.setStart(editorRef.current.firstChild, 0);
+        range.collapse(true);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    }
+  }, []);
   const handleFormat = useCallback((command) => {
     if (disabled) return;
     document.execCommand(command, false);
@@ -3288,16 +3362,29 @@ var RichTextEditor = ({
   }, [disabled, updateActiveFormats, handleInput]);
   const handleLink = useCallback(() => {
     if (disabled) return;
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      savedSelection.current = selection.getRangeAt(0).cloneRange();
+    }
     setShowLinkModal(true);
   }, [disabled]);
   const insertLink = useCallback(() => {
-    if (linkUrl) {
-      document.execCommand("createLink", false, linkUrl);
-      setShowLinkModal(false);
-      setLinkUrl("");
-      editorRef.current?.focus();
-      handleInput();
+    if (!linkUrl || !editorRef.current) return;
+    const selection = window.getSelection();
+    if (savedSelection.current && selection) {
+      try {
+        selection.removeAllRanges();
+        selection.addRange(savedSelection.current);
+        document.execCommand("createLink", false, linkUrl);
+        savedSelection.current = null;
+      } catch (e) {
+        console.warn("Could not insert link at saved position", e);
+      }
     }
+    setShowLinkModal(false);
+    setLinkUrl("");
+    editorRef.current?.focus();
+    handleInput();
   }, [linkUrl, handleInput]);
   const handleCode = useCallback(() => {
     if (disabled) return;
@@ -3317,33 +3404,82 @@ var RichTextEditor = ({
   }, [disabled, handleInput]);
   const handleImage = useCallback(() => {
     if (disabled) return;
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      savedSelection.current = selection.getRangeAt(0).cloneRange();
+    }
     setShowImageModal(true);
   }, [disabled]);
   const insertImage = useCallback(() => {
-    if (!imageUrl) return;
+    if (!imageUrl || !editorRef.current) return;
+    editorRef.current.focus();
     const img = document.createElement("img");
     img.src = imageUrl;
     img.alt = imageAlt || "";
     img.style.maxWidth = "100%";
     img.style.height = "auto";
     const selection = window.getSelection();
-    if (selection && selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0);
-      range.deleteContents();
-      range.insertNode(img);
-      range.setStartAfter(img);
-      range.setEndAfter(img);
-      selection.removeAllRanges();
-      selection.addRange(range);
-    } else if (editorRef.current) {
-      editorRef.current.appendChild(img);
+    if (savedSelection.current && selection && editorRef.current.contains(savedSelection.current.commonAncestorContainer)) {
+      try {
+        selection.removeAllRanges();
+        selection.addRange(savedSelection.current);
+        savedSelection.current.deleteContents();
+        savedSelection.current.insertNode(img);
+        const br = document.createElement("br");
+        savedSelection.current.setStartAfter(img);
+        savedSelection.current.insertNode(br);
+        savedSelection.current.setStartAfter(br);
+        savedSelection.current.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(savedSelection.current);
+        savedSelection.current = null;
+      } catch (e) {
+        console.warn("Could not insert at saved position", e);
+        if (selection.rangeCount > 0) {
+          const range = selection.getRangeAt(0);
+          if (editorRef.current.contains(range.commonAncestorContainer)) {
+            range.insertNode(img);
+            const br = document.createElement("br");
+            range.setStartAfter(img);
+            range.insertNode(br);
+            range.setStartAfter(br);
+            range.collapse(true);
+          } else {
+            editorRef.current.appendChild(img);
+            editorRef.current.appendChild(document.createElement("br"));
+          }
+        } else {
+          editorRef.current.appendChild(img);
+          editorRef.current.appendChild(document.createElement("br"));
+        }
+      }
+    } else {
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        if (editorRef.current.contains(range.commonAncestorContainer)) {
+          range.deleteContents();
+          range.insertNode(img);
+          const br = document.createElement("br");
+          range.setStartAfter(img);
+          range.insertNode(br);
+          range.setStartAfter(br);
+          range.collapse(true);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        } else {
+          editorRef.current.appendChild(img);
+          editorRef.current.appendChild(document.createElement("br"));
+        }
+      } else {
+        editorRef.current.appendChild(img);
+        editorRef.current.appendChild(document.createElement("br"));
+      }
     }
     setShowImageModal(false);
     setImageUrl("");
     setImageAlt("");
-    editorRef.current?.focus();
     handleInput();
-  }, [imageUrl, imageAlt, handleInput, disabled]);
+  }, [imageUrl, imageAlt, handleInput]);
   const getButtonClass = (isActive) => {
     const baseClass = themeName === "minimalistic" ? "border border-white text-white transition-colors" : "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 transition-colors";
     const activeClass = themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-100 dark:bg-blue-900 border-blue-500 dark:border-blue-400";
@@ -3507,11 +3643,10 @@ var RichTextEditor = ({
         ref: editorRef,
         contentEditable: !disabled,
         onInput: handleInput,
-        onFocus: () => setIsFocused(true),
+        onFocus: handleFocus,
         onBlur: () => setIsFocused(false),
         onMouseUp: updateActiveFormats,
         onKeyUp: updateActiveFormats,
-        dangerouslySetInnerHTML: { __html: value },
         className: `
           w-full px-4 py-3 rounded-b-lg outline-none overflow-y-auto
           ${editorBaseClass} ${focusClass} ${errorClass}
@@ -5000,8 +5135,10 @@ var defaultColors = [
 ];
 var LineChart = ({
   data,
-  width = 600,
-  height = 400,
+  width: providedWidth,
+  height: providedHeight,
+  aspectRatio = 16 / 9,
+  responsive = true,
   showGrid = true,
   showXAxis = true,
   showYAxis = true,
@@ -5014,6 +5151,8 @@ var LineChart = ({
   xAxisLabel,
   yAxisLabel
 }) => {
+  const height = providedHeight ?? 400;
+  const width = providedWidth ?? (responsive ? 600 : 600);
   const [hoveredPoint, setHoveredPoint] = React26.useState(null);
   const padding = { top: 20, right: 20, bottom: showXAxis ? 60 : 20, left: showYAxis ? 60 : 20 };
   const chartWidth = width - padding.left - padding.right;
@@ -5088,7 +5227,8 @@ var LineChart = ({
               x: -10,
               y: y + 4,
               textAnchor: "end",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              fontSize: "16",
+              className: "fill-gray-600 dark:fill-gray-400",
               children: yValue.toFixed(1)
             }
           )
@@ -5120,7 +5260,8 @@ var LineChart = ({
               x,
               y: chartHeight + 20,
               textAnchor: "middle",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              fontSize: "14",
+              className: "fill-gray-600 dark:fill-gray-400",
               children: xValue
             }
           )
@@ -5128,108 +5269,121 @@ var LineChart = ({
       );
     }
   }
-  return /* @__PURE__ */ jsxs35("div", { className: `relative inline-block ${className}`, children: [
-    /* @__PURE__ */ jsx108(
-      "svg",
-      {
-        width,
-        height,
-        className: "bg-white dark:bg-gray-800",
-        style: { overflow: "visible" },
-        children: /* @__PURE__ */ jsxs35("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-          gridLines,
-          data.map((series, seriesIndex) => /* @__PURE__ */ jsx108(
-            "path",
-            {
-              d: generatePath(series),
-              fill: "none",
-              stroke: series.color || defaultColors[seriesIndex % defaultColors.length],
-              strokeWidth,
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            },
-            `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__ */ jsx108(
-                "circle",
+  return /* @__PURE__ */ jsxs35(
+    "div",
+    {
+      className: `relative ${responsive ? "w-full" : "inline-block"} ${className}`,
+      style: responsive ? { aspectRatio: `${width} / ${height}` } : void 0,
+      children: [
+        /* @__PURE__ */ jsx108(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: "xMidYMid meet",
+            className: "bg-white dark:bg-gray-800 block",
+            style: { overflow: "visible" },
+            children: /* @__PURE__ */ jsxs35("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+              gridLines,
+              data.map((series, seriesIndex) => /* @__PURE__ */ jsx108(
+                "path",
                 {
-                  cx: x,
-                  cy: y,
-                  r: isHovered ? 6 : 4,
-                  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)
+                  d: generatePath(series),
+                  fill: "none",
+                  stroke: series.color || defaultColors[seriesIndex % defaultColors.length],
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
                 },
-                `point-${seriesIndex}-${pointIndex}`
-              );
-            })
-          ),
-          xAxisLabel && showXAxis && /* @__PURE__ */ jsx108(
-            "text",
+                `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__ */ jsx108(
+                    "circle",
+                    {
+                      cx: x,
+                      cy: y,
+                      r: isHovered ? 6 : 4,
+                      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)
+                    },
+                    `point-${seriesIndex}-${pointIndex}`
+                  );
+                })
+              ),
+              xAxisLabel && showXAxis && /* @__PURE__ */ jsx108(
+                "text",
+                {
+                  x: chartWidth / 2,
+                  y: chartHeight + 50,
+                  textAnchor: "middle",
+                  fontSize: "16",
+                  fontWeight: "500",
+                  className: "fill-gray-700 dark:fill-gray-300",
+                  children: xAxisLabel
+                }
+              ),
+              yAxisLabel && showYAxis && /* @__PURE__ */ jsx108(
+                "text",
+                {
+                  x: -chartHeight / 2,
+                  y: -45,
+                  textAnchor: "middle",
+                  fontSize: "16",
+                  fontWeight: "500",
+                  transform: `rotate(-90, 0, 0)`,
+                  className: "fill-gray-700 dark:fill-gray-300",
+                  children: yAxisLabel
+                }
+              )
+            ] })
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx108("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx108(
+            "div",
             {
-              x: chartWidth / 2,
-              y: chartHeight + 50,
-              textAnchor: "middle",
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: xAxisLabel
+              className: "w-4 h-4 rounded-sm",
+              style: {
+                backgroundColor: series.color || defaultColors[index % defaultColors.length]
+              }
             }
           ),
-          yAxisLabel && showYAxis && /* @__PURE__ */ jsx108(
-            "text",
-            {
-              x: -chartHeight / 2,
-              y: -45,
-              textAnchor: "middle",
-              transform: `rotate(-90, 0, 0)`,
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: yAxisLabel
-            }
-          )
-        ] })
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsx108("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx108(
-        "div",
-        {
-          className: "w-4 h-4 rounded-sm",
-          style: {
-            backgroundColor: series.color || defaultColors[index % defaultColors.length]
+          /* @__PURE__ */ jsx108("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: series.name })
+        ] }, `legend-${index}`)) }),
+        showTooltip && hoveredPoint && /* @__PURE__ */ jsxs35(
+          "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",
+            style: {
+              left: `${padding.left + hoveredPoint.x + 10}px`,
+              top: `${padding.top + hoveredPoint.y - 30}px`
+            },
+            children: [
+              /* @__PURE__ */ jsx108("div", { className: "font-semibold", children: data[hoveredPoint.seriesIndex].name }),
+              /* @__PURE__ */ jsxs35("div", { children: [
+                "x: ",
+                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].x
+              ] }),
+              /* @__PURE__ */ jsxs35("div", { children: [
+                "y: ",
+                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
+              ] })
+            ]
           }
-        }
-      ),
-      /* @__PURE__ */ jsx108("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: series.name })
-    ] }, `legend-${index}`)) }),
-    showTooltip && hoveredPoint && /* @__PURE__ */ jsxs35(
-      "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",
-        style: {
-          left: `${padding.left + hoveredPoint.x + 10}px`,
-          top: `${padding.top + hoveredPoint.y - 30}px`
-        },
-        children: [
-          /* @__PURE__ */ jsx108("div", { className: "font-semibold", children: data[hoveredPoint.seriesIndex].name }),
-          /* @__PURE__ */ jsxs35("div", { children: [
-            "x: ",
-            data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].x
-          ] }),
-          /* @__PURE__ */ jsxs35("div", { children: [
-            "y: ",
-            data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
-          ] })
-        ]
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 };
 
 // src/components/BarChart.tsx
@@ -5251,8 +5405,10 @@ var defaultColors2 = [
 ];
 var BarChart = ({
   data,
-  width = 600,
-  height = 400,
+  width: providedWidth,
+  height: providedHeight,
+  aspectRatio = 16 / 9,
+  responsive = true,
   showGrid = true,
   showXAxis = true,
   showYAxis = true,
@@ -5266,6 +5422,8 @@ var BarChart = ({
   xAxisLabel,
   yAxisLabel
 }) => {
+  const height = providedHeight ?? 400;
+  const width = providedWidth ?? (responsive ? 800 : 600);
   const [hoveredBar, setHoveredBar] = React27.useState(null);
   const padding = {
     top: 20,
@@ -5319,7 +5477,8 @@ var BarChart = ({
               x: -10,
               y: y + 4,
               textAnchor: "end",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              fontSize: "14",
+              className: "fill-gray-600 dark:fill-gray-400",
               children: yValue.toFixed(0)
             }
           )
@@ -5415,7 +5574,9 @@ var BarChart = ({
                   x: xPos + actualBarWidth / 2,
                   y: yPos - 5,
                   textAnchor: "middle",
-                  className: "text-xs fill-gray-700 dark:fill-gray-300 font-medium",
+                  fontSize: "14",
+                  fontWeight: "500",
+                  className: "fill-gray-700 dark:fill-gray-300",
                   children: point.y
                 },
                 `value-${seriesIndex}-${barIndex}`
@@ -5435,79 +5596,93 @@ var BarChart = ({
         x: xPos,
         y: chartHeight + 20,
         textAnchor: "middle",
-        className: "text-xs fill-gray-600 dark:fill-gray-400",
+        fontSize: "14",
+        className: "fill-gray-600 dark:fill-gray-400",
         children: point.x
       },
       `x-label-${i}`
     );
   });
-  return /* @__PURE__ */ jsxs36("div", { className: `relative inline-block ${className}`, children: [
-    /* @__PURE__ */ jsx109(
-      "svg",
-      {
-        width,
-        height,
-        className: "bg-white dark:bg-gray-800",
-        style: { overflow: "visible" },
-        children: /* @__PURE__ */ jsxs36("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-          gridLines,
-          renderBars(),
-          showXAxis && xAxisLabels,
-          xAxisLabel && showXAxis && /* @__PURE__ */ jsx109(
-            "text",
+  return /* @__PURE__ */ jsxs36(
+    "div",
+    {
+      className: `relative ${responsive ? "w-full" : "inline-block"} ${className}`,
+      style: responsive ? { aspectRatio: `${width} / ${height}` } : void 0,
+      children: [
+        /* @__PURE__ */ jsx109(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: "xMidYMid meet",
+            className: "bg-white dark:bg-gray-800 block",
+            style: { overflow: "visible" },
+            children: /* @__PURE__ */ jsxs36("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+              gridLines,
+              renderBars(),
+              showXAxis && xAxisLabels,
+              xAxisLabel && showXAxis && /* @__PURE__ */ jsx109(
+                "text",
+                {
+                  x: chartWidth / 2,
+                  y: chartHeight + 50,
+                  textAnchor: "middle",
+                  fontSize: "16",
+                  fontWeight: "500",
+                  className: "fill-gray-700 dark:fill-gray-300",
+                  children: xAxisLabel
+                }
+              ),
+              yAxisLabel && showYAxis && /* @__PURE__ */ jsx109(
+                "text",
+                {
+                  x: -chartHeight / 2,
+                  y: -45,
+                  textAnchor: "middle",
+                  fontSize: "16",
+                  fontWeight: "500",
+                  transform: `rotate(-90, 0, 0)`,
+                  className: "fill-gray-700 dark:fill-gray-300",
+                  children: yAxisLabel
+                }
+              )
+            ] })
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx109("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx109(
+            "div",
             {
-              x: chartWidth / 2,
-              y: chartHeight + 50,
-              textAnchor: "middle",
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: xAxisLabel
+              className: "w-4 h-4 rounded-sm",
+              style: {
+                backgroundColor: series.color || defaultColors2[index % defaultColors2.length]
+              }
             }
           ),
-          yAxisLabel && showYAxis && /* @__PURE__ */ jsx109(
-            "text",
-            {
-              x: -chartHeight / 2,
-              y: -45,
-              textAnchor: "middle",
-              transform: `rotate(-90, 0, 0)`,
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: yAxisLabel
-            }
-          )
-        ] })
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsx109("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx109(
-        "div",
-        {
-          className: "w-4 h-4 rounded-sm",
-          style: {
-            backgroundColor: series.color || defaultColors2[index % defaultColors2.length]
+          /* @__PURE__ */ jsx109("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: series.name })
+        ] }, `legend-${index}`)) }),
+        showTooltip && hoveredBar && /* @__PURE__ */ jsxs36(
+          "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",
+            style: {
+              left: `${padding.left + hoveredBar.x + 10}px`,
+              top: `${padding.top + hoveredBar.y - 30}px`
+            },
+            children: [
+              /* @__PURE__ */ jsx109("div", { className: "font-semibold", children: data[hoveredBar.seriesIndex].name }),
+              /* @__PURE__ */ jsxs36("div", { children: [
+                data[hoveredBar.seriesIndex].data[hoveredBar.barIndex].x,
+                ": ",
+                data[hoveredBar.seriesIndex].data[hoveredBar.barIndex].y
+              ] })
+            ]
           }
-        }
-      ),
-      /* @__PURE__ */ jsx109("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: series.name })
-    ] }, `legend-${index}`)) }),
-    showTooltip && hoveredBar && /* @__PURE__ */ jsxs36(
-      "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",
-        style: {
-          left: `${padding.left + hoveredBar.x + 10}px`,
-          top: `${padding.top + hoveredBar.y - 30}px`
-        },
-        children: [
-          /* @__PURE__ */ jsx109("div", { className: "font-semibold", children: data[hoveredBar.seriesIndex].name }),
-          /* @__PURE__ */ jsxs36("div", { children: [
-            data[hoveredBar.seriesIndex].data[hoveredBar.barIndex].x,
-            ": ",
-            data[hoveredBar.seriesIndex].data[hoveredBar.barIndex].y
-          ] })
-        ]
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 };
 
 // src/components/AreaChart.tsx
@@ -5529,8 +5704,10 @@ var defaultColors3 = [
 ];
 var AreaChart = ({
   data,
-  width = 600,
-  height = 400,
+  width: providedWidth,
+  height: providedHeight,
+  aspectRatio = 16 / 9,
+  responsive = true,
   showGrid = true,
   showXAxis = true,
   showYAxis = true,
@@ -5545,6 +5722,8 @@ var AreaChart = ({
   xAxisLabel,
   yAxisLabel
 }) => {
+  const height = providedHeight ?? 400;
+  const width = providedWidth ?? 800;
   const [hoveredPoint, setHoveredPoint] = React28.useState(null);
   const padding = { top: 20, right: 20, bottom: showXAxis ? 60 : 20, left: showYAxis ? 60 : 20 };
   const chartWidth = width - padding.left - padding.right;
@@ -5654,7 +5833,8 @@ var AreaChart = ({
               x: -10,
               y: y + 4,
               textAnchor: "end",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              fontSize: "12",
+              className: "fill-gray-600 dark:fill-gray-400",
               children: yValue.toFixed(0)
             }
           )
@@ -5686,7 +5866,8 @@ var AreaChart = ({
               x,
               y: chartHeight + 20,
               textAnchor: "middle",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              fontSize: "12",
+              className: "fill-gray-600 dark:fill-gray-400",
               children: xValue
             }
           )
@@ -5698,130 +5879,142 @@ var AreaChart = ({
   if (stacked) {
     cumulativeValues = Array(data[0]?.data.length || 0).fill(0);
   }
-  return /* @__PURE__ */ jsxs37("div", { className: `relative inline-block ${className}`, children: [
-    /* @__PURE__ */ jsx110(
-      "svg",
-      {
-        width,
-        height,
-        className: "bg-white dark:bg-gray-800",
-        style: { overflow: "visible" },
-        children: /* @__PURE__ */ jsxs37("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;
-              });
-            }
-            return /* @__PURE__ */ jsxs37("g", { children: [
-              /* @__PURE__ */ jsx110(
-                "path",
+  return /* @__PURE__ */ jsxs37(
+    "div",
+    {
+      className: `relative ${responsive ? "w-full" : "inline-block"} ${className}`,
+      style: responsive ? { width: "100%", aspectRatio: `${width} / ${height}` } : void 0,
+      children: [
+        /* @__PURE__ */ jsx110(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: "xMidYMid meet",
+            className: "bg-white dark:bg-gray-800 block",
+            children: /* @__PURE__ */ jsxs37("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;
+                  });
+                }
+                return /* @__PURE__ */ jsxs37("g", { children: [
+                  /* @__PURE__ */ jsx110(
+                    "path",
+                    {
+                      d: areaPath,
+                      fill: series.color || defaultColors3[seriesIndex % defaultColors3.length],
+                      opacity: fillOpacity
+                    }
+                  ),
+                  /* @__PURE__ */ jsx110(
+                    "path",
+                    {
+                      d: linePath,
+                      fill: "none",
+                      stroke: series.color || defaultColors3[seriesIndex % defaultColors3.length],
+                      strokeWidth,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                ] }, `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__ */ jsx110(
+                    "circle",
+                    {
+                      cx: x,
+                      cy: y,
+                      r: isHovered ? 6 : 4,
+                      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)
+                    },
+                    `point-${seriesIndex}-${pointIndex}`
+                  );
+                });
+              }),
+              xAxisLabel && showXAxis && /* @__PURE__ */ jsx110(
+                "text",
                 {
-                  d: areaPath,
-                  fill: series.color || defaultColors3[seriesIndex % defaultColors3.length],
-                  opacity: fillOpacity
+                  x: chartWidth / 2,
+                  y: chartHeight + 50,
+                  textAnchor: "middle",
+                  fontSize: "14",
+                  fontWeight: "500",
+                  className: "fill-gray-700 dark:fill-gray-300",
+                  children: xAxisLabel
                 }
               ),
-              /* @__PURE__ */ jsx110(
-                "path",
+              yAxisLabel && showYAxis && /* @__PURE__ */ jsx110(
+                "text",
                 {
-                  d: linePath,
-                  fill: "none",
-                  stroke: series.color || defaultColors3[seriesIndex % defaultColors3.length],
-                  strokeWidth,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
+                  x: -chartHeight / 2,
+                  y: -45,
+                  textAnchor: "middle",
+                  fontSize: "14",
+                  fontWeight: "500",
+                  transform: "rotate(-90, 0, 0)",
+                  className: "fill-gray-700 dark:fill-gray-300",
+                  children: yAxisLabel
                 }
               )
-            ] }, `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__ */ jsx110(
-                "circle",
-                {
-                  cx: x,
-                  cy: y,
-                  r: isHovered ? 6 : 4,
-                  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)
-                },
-                `point-${seriesIndex}-${pointIndex}`
-              );
-            });
-          }),
-          xAxisLabel && showXAxis && /* @__PURE__ */ jsx110(
-            "text",
+            ] })
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx110("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx110(
+            "div",
             {
-              x: chartWidth / 2,
-              y: chartHeight + 50,
-              textAnchor: "middle",
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: xAxisLabel
+              className: "w-4 h-4 rounded-sm",
+              style: {
+                backgroundColor: series.color || defaultColors3[index % defaultColors3.length]
+              }
             }
           ),
-          yAxisLabel && showYAxis && /* @__PURE__ */ jsx110(
-            "text",
-            {
-              x: -chartHeight / 2,
-              y: -45,
-              textAnchor: "middle",
-              transform: `rotate(-90, 0, 0)`,
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: yAxisLabel
-            }
-          )
-        ] })
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsx110("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx110(
-        "div",
-        {
-          className: "w-4 h-4 rounded-sm",
-          style: {
-            backgroundColor: series.color || defaultColors3[index % defaultColors3.length]
+          /* @__PURE__ */ jsx110("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: series.name })
+        ] }, `legend-${index}`)) }),
+        showTooltip && hoveredPoint && /* @__PURE__ */ jsxs37(
+          "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",
+            style: {
+              left: `${padding.left + hoveredPoint.x + 10}px`,
+              top: `${padding.top + hoveredPoint.y - 30}px`
+            },
+            children: [
+              /* @__PURE__ */ jsx110("div", { className: "font-semibold", children: data[hoveredPoint.seriesIndex].name }),
+              /* @__PURE__ */ jsxs37("div", { children: [
+                "x: ",
+                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].x
+              ] }),
+              /* @__PURE__ */ jsxs37("div", { children: [
+                "y: ",
+                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
+              ] })
+            ]
           }
-        }
-      ),
-      /* @__PURE__ */ jsx110("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: series.name })
-    ] }, `legend-${index}`)) }),
-    showTooltip && hoveredPoint && /* @__PURE__ */ jsxs37(
-      "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",
-        style: {
-          left: `${padding.left + hoveredPoint.x + 10}px`,
-          top: `${padding.top + hoveredPoint.y - 30}px`
-        },
-        children: [
-          /* @__PURE__ */ jsx110("div", { className: "font-semibold", children: data[hoveredPoint.seriesIndex].name }),
-          /* @__PURE__ */ jsxs37("div", { children: [
-            "x: ",
-            data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].x
-          ] }),
-          /* @__PURE__ */ jsxs37("div", { children: [
-            "y: ",
-            data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
-          ] })
-        ]
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 };
 
 // src/components/PieChart.tsx
@@ -5847,8 +6040,10 @@ var defaultColors4 = [
 ];
 var PieChart = ({
   data,
-  width = 400,
-  height = 400,
+  width: providedWidth,
+  height: providedHeight,
+  aspectRatio = 1,
+  responsive = true,
   showLegend = true,
   showLabels = true,
   showValues = false,
@@ -5857,6 +6052,8 @@ var PieChart = ({
   donutWidth = 60,
   className = ""
 }) => {
+  const height = providedHeight ?? 400;
+  const width = providedWidth ?? 400;
   const [hoveredSlice, setHoveredSlice] = React29.useState(null);
   const total = data.reduce((sum, item) => sum + item.value, 0);
   const centerX = width / 2;
@@ -5914,112 +6111,126 @@ var PieChart = ({
       index
     };
   });
-  return /* @__PURE__ */ jsxs38("div", { className: `relative inline-block ${className}`, children: [
-    /* @__PURE__ */ jsxs38(
-      "svg",
-      {
-        width,
-        height,
-        className: "bg-white dark:bg-gray-800",
-        children: [
-          slices.map((slice) => {
-            const isHovered = hoveredSlice === slice.index;
-            return /* @__PURE__ */ jsxs38("g", { children: [
+  return /* @__PURE__ */ jsxs38(
+    "div",
+    {
+      className: `relative ${responsive ? "w-full flex justify-center" : "inline-block"} ${className}`,
+      style: responsive ? { aspectRatio: `${width} / ${height}` } : void 0,
+      children: [
+        /* @__PURE__ */ jsxs38(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            viewBox: `0 0 ${width} ${height}`,
+            preserveAspectRatio: "xMidYMid meet",
+            className: "bg-white dark:bg-gray-800 block",
+            children: [
+              slices.map((slice) => {
+                const isHovered = hoveredSlice === slice.index;
+                return /* @__PURE__ */ jsxs38("g", { children: [
+                  /* @__PURE__ */ jsx111(
+                    "path",
+                    {
+                      d: slice.path,
+                      fill: slice.color,
+                      stroke: "white",
+                      strokeWidth: "2",
+                      className: "cursor-pointer transition-opacity",
+                      opacity: isHovered ? 0.8 : 1,
+                      onMouseEnter: () => setHoveredSlice(slice.index),
+                      onMouseLeave: () => setHoveredSlice(null)
+                    }
+                  ),
+                  showLabels && slice.percentage > 5 && /* @__PURE__ */ jsxs38(
+                    "text",
+                    {
+                      x: slice.labelX,
+                      y: slice.labelY,
+                      textAnchor: "middle",
+                      dominantBaseline: "middle",
+                      fontSize: "14",
+                      fontWeight: "600",
+                      className: "fill-gray-700 dark:fill-gray-200 pointer-events-none",
+                      children: [
+                        showPercentages && `${slice.percentage.toFixed(1)}%`,
+                        showPercentages && showValues && " ",
+                        showValues && `(${slice.value})`,
+                        !showPercentages && !showValues && slice.label
+                      ]
+                    }
+                  )
+                ] }, slice.index);
+              }),
+              donut && /* @__PURE__ */ jsxs38("g", { children: [
+                /* @__PURE__ */ jsx111(
+                  "text",
+                  {
+                    x: centerX,
+                    y: centerY - 10,
+                    textAnchor: "middle",
+                    fontSize: "32",
+                    fontWeight: "700",
+                    className: "fill-gray-900 dark:fill-gray-100",
+                    children: total
+                  }
+                ),
+                /* @__PURE__ */ jsx111(
+                  "text",
+                  {
+                    x: centerX,
+                    y: centerY + 15,
+                    textAnchor: "middle",
+                    fontSize: "16",
+                    className: "fill-gray-600 dark:fill-gray-400",
+                    children: "Total"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx111("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((item, index) => /* @__PURE__ */ jsxs38(
+          "div",
+          {
+            className: "flex items-center gap-2 cursor-pointer",
+            onMouseEnter: () => setHoveredSlice(index),
+            onMouseLeave: () => setHoveredSlice(null),
+            children: [
               /* @__PURE__ */ jsx111(
-                "path",
+                "div",
                 {
-                  d: slice.path,
-                  fill: slice.color,
-                  stroke: "white",
-                  strokeWidth: "2",
-                  className: "cursor-pointer transition-opacity",
-                  opacity: isHovered ? 0.8 : 1,
-                  onMouseEnter: () => setHoveredSlice(slice.index),
-                  onMouseLeave: () => setHoveredSlice(null)
+                  className: "w-4 h-4 rounded-sm",
+                  style: {
+                    backgroundColor: item.color || defaultColors4[index % defaultColors4.length]
+                  }
                 }
               ),
-              showLabels && slice.percentage > 5 && /* @__PURE__ */ jsxs38(
-                "text",
-                {
-                  x: slice.labelX,
-                  y: slice.labelY,
-                  textAnchor: "middle",
-                  dominantBaseline: "middle",
-                  className: "text-xs font-semibold fill-gray-700 dark:fill-gray-200 pointer-events-none",
-                  children: [
-                    showPercentages && `${slice.percentage.toFixed(1)}%`,
-                    showPercentages && showValues && " ",
-                    showValues && `(${slice.value})`,
-                    !showPercentages && !showValues && slice.label
-                  ]
-                }
-              )
-            ] }, slice.index);
-          }),
-          donut && /* @__PURE__ */ jsxs38("g", { children: [
-            /* @__PURE__ */ jsx111(
-              "text",
-              {
-                x: centerX,
-                y: centerY - 10,
-                textAnchor: "middle",
-                className: "text-2xl font-bold fill-gray-900 dark:fill-gray-100",
-                children: total
-              }
-            ),
-            /* @__PURE__ */ jsx111(
-              "text",
-              {
-                x: centerX,
-                y: centerY + 15,
-                textAnchor: "middle",
-                className: "text-sm fill-gray-600 dark:fill-gray-400",
-                children: "Total"
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsx111("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((item, index) => /* @__PURE__ */ jsxs38(
-      "div",
-      {
-        className: "flex items-center gap-2 cursor-pointer",
-        onMouseEnter: () => setHoveredSlice(index),
-        onMouseLeave: () => setHoveredSlice(null),
-        children: [
-          /* @__PURE__ */ jsx111(
-            "div",
-            {
-              className: "w-4 h-4 rounded-sm",
-              style: {
-                backgroundColor: item.color || defaultColors4[index % defaultColors4.length]
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs38("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: [
-            item.label,
-            ": ",
-            item.value,
-            showPercentages && ` (${(item.value / total * 100).toFixed(1)}%)`
+              /* @__PURE__ */ jsxs38("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: [
+                item.label,
+                ": ",
+                item.value,
+                showPercentages && ` (${(item.value / total * 100).toFixed(1)}%)`
+              ] })
+            ]
+          },
+          `legend-${index}`
+        )) }),
+        hoveredSlice !== null && /* @__PURE__ */ jsxs38("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__ */ jsx111("div", { className: "font-semibold", children: data[hoveredSlice].label }),
+          /* @__PURE__ */ jsxs38("div", { children: [
+            "Value: ",
+            data[hoveredSlice].value
+          ] }),
+          /* @__PURE__ */ jsxs38("div", { children: [
+            "Percentage: ",
+            (data[hoveredSlice].value / total * 100).toFixed(1),
+            "%"
           ] })
-        ]
-      },
-      `legend-${index}`
-    )) }),
-    hoveredSlice !== null && /* @__PURE__ */ jsxs38("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__ */ jsx111("div", { className: "font-semibold", children: data[hoveredSlice].label }),
-      /* @__PURE__ */ jsxs38("div", { children: [
-        "Value: ",
-        data[hoveredSlice].value
-      ] }),
-      /* @__PURE__ */ jsxs38("div", { children: [
-        "Percentage: ",
-        (data[hoveredSlice].value / total * 100).toFixed(1),
-        "%"
-      ] })
-    ] })
-  ] });
+        ] })
+      ]
+    }
+  );
 };
 
 // src/utils/theme-script.ts