@deepnoid/ui 1.0.21 → 1.0.23

package/dist/components/charts/index.js

@@ -42,16 +42,14 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   const picked = variantKeys.reduce((acc, key) => {
     if (key in props) {
       return { ...acc, [key]: props[key] };
-    } else {
-      return acc;
     }
+    return acc;
   }, {});
   if (removeVariantProps) {
     const omitted = Object.keys(props).filter((key) => !variantKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
     return [omitted, picked];
-  } else {
-    return [props, picked];
   }
+  return [props, picked];
 };
 
 // src/utils/tailwind-variants.ts
@@ -135,21 +133,21 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
   const wrappedInnerContent = (0, import_react.useMemo)(() => {
     return wrapSpanWithClass(innerContent);
   }, [innerContent]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_recharts.RadialBarChart,
         {
-          width: size,
+          barSize: BAR_SIZE,
+          data,
+          endAngle: -270,
           height: size,
           innerRadius: INNER_RADIUS - 0.1,
           outerRadius: OUTER_RADIUS,
-          barSize: BAR_SIZE,
-          data,
           startAngle: 90,
-          endAngle: -270,
+          width: size,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: gradientId, x1: "0%", x2: "100%", y1: "0%", y2: "100%", children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: currentGradient.start }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: currentGradient.end })
             ] }) }),
@@ -158,8 +156,8 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
               {
                 cx: size / 2,
                 cy: size / 2,
-                r: OUTER_RADIUS + BORDER_MARGIN,
                 fill: "#fff",
+                r: OUTER_RADIUS + BORDER_MARGIN,
                 stroke: "#DFE2E7",
                 strokeWidth: "1"
               }
@@ -169,20 +167,20 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
               {
                 cx: size / 2,
                 cy: size / 2,
-                r: BACKGROUND_RADIUS,
                 fill: "none",
+                r: BACKGROUND_RADIUS,
                 stroke: "rgba(0, 0, 0, 0.05)",
                 strokeWidth: BAR_SIZE
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.PolarAngleAxis, { type: "number", domain: [0, 100], angleAxisId: 0, tick: false }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.RadialBar, { dataKey: "value", cornerRadius: 12, animationDuration: 1e3, fill: `url(#${gradientId})` })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.PolarAngleAxis, { angleAxisId: 0, domain: [0, 100], tick: false, type: "number" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.RadialBar, { animationDuration: 1e3, cornerRadius: 12, dataKey: "value", fill: `url(#${gradientId})` })
           ]
         }
       ),
-      innerContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.inner({ class: classNames == null ? void 0 : classNames.inner }), children: wrappedInnerContent })
+      innerContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.inner({ class: classNames == null ? void 0 : classNames.inner }), children: wrappedInnerContent }) : null
     ] }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }) : null
   ] });
 });
 CircularProgress.displayName = "CircularProgress";
@@ -253,7 +251,7 @@ var import_tailwind_variants3 = require("tailwind-variants");
 
 // src/utils/clsx.ts
 function clsx(...args) {
-  var i = 0, tmp, x, str = "";
+  let i = 0, tmp, x, str = "";
   while (i < args.length) {
     if (tmp = args[i++]) {
       if (x = toVal(tmp)) {
@@ -265,12 +263,12 @@ function clsx(...args) {
   return str;
 }
 function toVal(mix) {
-  var k, y, str = "";
+  let k, y, str = "";
   if (typeof mix === "string" || typeof mix === "number") {
     str += mix;
   } else if (typeof mix === "object") {
     if (Array.isArray(mix)) {
-      var len = mix.length;
+      const len = mix.length;
       for (k = 0; k < len; k++) {
         if (mix[k]) {
           if (y = toVal(mix[k])) {
@@ -293,9 +291,9 @@ function toVal(mix) {
 
 // src/components/scroll/scrollArea.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ScrollArea = ({ children, className, direction, size, variant }) => {
+function ScrollArea({ children, className, direction, size, variant }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: clsx(scrollAreaStyle({ direction, size, variant }), className), children });
-};
+}
 ScrollArea.displayName = "ScrollArea";
 var scrollArea_default = ScrollArea;
 var scrollAreaStyle = (0, import_tailwind_variants3.tv)({
@@ -358,7 +356,7 @@ var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
   }, [data, startFromZero]);
   const [tickPositions, setTickPositions] = (0, import_react2.useState)([]);
   const tickRef = (0, import_react2.useRef)([]);
-  const CustomTick = ({ x, y, payload }) => {
+  function CustomTick({ x, y, payload }) {
     if (x !== void 0) {
       tickRef.current.push(x);
     }
@@ -368,17 +366,17 @@ var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "text",
       {
-        x,
-        y: y + 11,
-        textAnchor: "middle",
+        className: "text-body-foreground",
+        fill: "currentColor",
         fontSize: 12,
         fontWeight: 700,
-        fill: "currentColor",
-        className: "text-body-foreground",
+        textAnchor: "middle",
+        x,
+        y: y + 11,
         children: payload.value
       }
     );
-  };
+  }
   (0, import_react2.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -389,19 +387,21 @@ var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
       setTickPositions(mids);
       tickRef.current = [];
     });
-    return () => cancelAnimationFrame(raf);
+    return () => {
+      cancelAnimationFrame(raf);
+    };
   }, [processedData]);
-  const CustomDotWithShadow = (props2) => {
+  function CustomDotWithShadow(props2) {
     const { cx, cy, fill, stroke, payload } = props2;
     if (cx === void 0 || cy === void 0) return null;
     if (startFromZero && (payload == null ? void 0 : payload.name) === "") {
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx, cy, r: 8, fill, opacity: 0.2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx, cy, r: 3.5, fill, stroke, strokeWidth: 2 })
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx, cy, fill, opacity: 0.2, r: 8 }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx, cy, fill, r: 3.5, stroke, strokeWidth: 2 })
     ] });
-  };
+  }
   const chartContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
@@ -412,33 +412,33 @@ var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         import_recharts2.AreaChart,
         {
-          width: totalChartWidth || 400,
-          height: chartHeight + 30,
+          className: "bg-body-background [&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
           data: processedData,
+          height: chartHeight + 30,
           margin: { left: -30 },
-          className: "bg-body-background [&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+          width: totalChartWidth || 400,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
             ] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               import_recharts2.CartesianGrid,
               {
-                vertical: true,
+                className: "stroke-neutral-light",
                 horizontal: false,
                 strokeDasharray: "4 4",
-                className: "stroke-neutral-light",
+                vertical: true,
                 verticalPoints: tickPositions
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               import_recharts2.XAxis,
               {
-                dataKey: "name",
                 axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-                tickLine: false,
+                dataKey: "name",
                 tick: CustomTick,
+                tickLine: false,
                 padding: { left: 35.5, right: 35.5 }
               }
             ),
@@ -446,7 +446,7 @@ var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
               import_recharts2.YAxis,
               {
                 axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-                tickLine: false,
+                domain: [-6, 110],
                 tick: {
                   fontSize: 12,
                   fontWeight: 700,
@@ -454,20 +454,20 @@ var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
                   textAnchor: "middle",
                   dx: -10
                 },
-                ticks: [0, 20, 40, 60, 80, 100],
-                domain: [-6, 110]
+                tickLine: false,
+                ticks: [0, 20, 40, 60, 80, 100]
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               import_recharts2.Area,
               {
-                type: "monotone",
+                activeDot: false,
                 dataKey: "value",
+                dot: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CustomDotWithShadow, { fill: colorHex, stroke: colorHex }),
+                fill: `url(#colorGradient-${uniqueId})`,
                 stroke: colorHex,
                 strokeWidth: 2,
-                fill: `url(#colorGradient-${uniqueId})`,
-                dot: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
-                activeDot: false
+                type: "monotone"
               }
             )
           ]
@@ -475,8 +475,8 @@ var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
       )
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }) : null,
     headerContent,
     needsScroll ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(scrollArea_default, { direction: "x", size: "sm", children: chartContent }) : chartContent
   ] });
@@ -531,7 +531,7 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
   const handleMouseEnter = (e, dataKey) => {
     if (!tooltipFormatter || !chartRef.current) return;
     const { payload, x, y } = e;
-    if (!payload || !payload[dataKey]) return;
+    if (!(payload == null ? void 0 : payload[dataKey])) return;
     setTooltipState({
       barX: x,
       barY: y - 10,
@@ -543,7 +543,7 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
   const handleMouseLeave = () => {
     setTooltipState(null);
   };
-  const CustomBarShape = ({ x, y, width, height, fill }) => {
+  function CustomBarShape({ x, y, width, height, fill }) {
     var _a;
     const radius = 5;
     const [minDomain, maxDomain] = yAxisDomain;
@@ -562,38 +562,40 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
         d: `M${x},${bottomY} L${x},${adjustedY + radius} Q${x},${adjustedY} ${x + radius},${adjustedY} L${x + width - radius},${adjustedY} Q${x + width},${adjustedY} ${x + width},${adjustedY + radius} L${x + width},${bottomY} Z`,
         fill
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x, y, width, height: 0, fill });
-  };
-  const CustomTick = ({ x, y, payload }) => {
+    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { fill, height: 0, width, x, y });
+  }
+  function CustomTick({ x, y, payload }) {
     if (x !== void 0) tickRef.current.push(x);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "text",
       {
+        className: "text-body-foreground",
+        fill: "currentColor",
+        fontSize: 12,
+        fontWeight: 700,
+        textAnchor: "middle",
         x,
         y: y + 14,
-        textAnchor: "middle",
+        children: payload.value
+      }
+    );
+  }
+  function CustomYAxisTick({ x, y, payload }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "text",
+      {
+        className: "text-body-foreground",
+        dy: 4,
+        fill: "currentColor",
         fontSize: 12,
         fontWeight: 700,
-        fill: "currentColor",
-        className: "text-body-foreground",
-        children: payload.value
+        textAnchor: "middle",
+        x: x - 10,
+        y,
+        children: yAxisTickFormatter(payload.value)
       }
     );
-  };
-  const CustomYAxisTick = ({ x, y, payload }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "text",
-    {
-      x: x - 10,
-      y,
-      textAnchor: "middle",
-      fontSize: 12,
-      fontWeight: 700,
-      fill: "currentColor",
-      className: "text-body-foreground",
-      dy: 4,
-      children: yAxisTickFormatter(payload.value)
-    }
-  );
+  }
   (0, import_react3.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -604,7 +606,9 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
       setTickPositions(mids);
       tickRef.current = [];
     });
-    return () => cancelAnimationFrame(raf);
+    return () => {
+      cancelAnimationFrame(raf);
+    };
   }, [data]);
   (0, import_react3.useLayoutEffect)(() => {
     if (!tooltipState || !chartRef.current || !tooltipRef.current) return;
@@ -624,7 +628,6 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
-      ref: chartRef,
       className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
       onMouseLeave: handleMouseLeave,
       onMouseMove: (e) => {
@@ -633,27 +636,28 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
           setTooltipState(null);
         }
       },
+      ref: chartRef,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        label ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.ResponsiveContainer, { height: "100%", width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           import_recharts3.BarChart,
           {
-            data,
-            margin: { left: -20 },
-            barSize: 20,
             barGap,
+            barSize: 20,
             className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+            data,
+            margin: { left: -20 },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("defs", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "blueGradient", x1: "0", x2: "0", y1: "0", y2: "1", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "greenGradient", x1: "0", x2: "0", y1: "0", y2: "1", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "#C2E59C" }),
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "#64B3F4" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", x2: "0", y1: "0", y2: "1", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "0%", stopColor: "#DDD6F3" }),
                   /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "#FAACA8" })
                 ] })
@@ -661,31 +665,31 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 import_recharts3.CartesianGrid,
                 {
-                  vertical: true,
+                  className: "stroke-neutral-light",
                   horizontal: false,
                   strokeDasharray: "4 4",
-                  className: "stroke-neutral-light",
+                  vertical: true,
                   verticalPoints: tickPositions
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 import_recharts3.XAxis,
                 {
-                  dataKey: "title",
                   axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-                  tickLine: false,
+                  dataKey: "title",
+                  padding: { left: 0, right: 0 },
                   tick: CustomTick,
-                  padding: { left: 0, right: 0 }
+                  tickLine: false
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 import_recharts3.YAxis,
                 {
                   axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-                  tickLine: false,
+                  domain: yAxisDomain,
                   tick: CustomYAxisTick,
-                  ticks: yAxisTicks,
-                  domain: yAxisDomain
+                  tickLine: false,
+                  ticks: yAxisTicks
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -693,9 +697,11 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
                 {
                   dataKey: "blue",
                   fill: "url(#blueGradient)",
-                  shape: CustomBarShape,
-                  onMouseEnter: (e) => handleMouseEnter(e, "blue"),
-                  onMouseLeave: handleMouseLeave
+                  onMouseEnter: (e) => {
+                    handleMouseEnter(e, "blue");
+                  },
+                  onMouseLeave: handleMouseLeave,
+                  shape: CustomBarShape
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -703,9 +709,11 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
                 {
                   dataKey: "green",
                   fill: "url(#greenGradient)",
-                  shape: CustomBarShape,
-                  onMouseEnter: (e) => handleMouseEnter(e, "green"),
-                  onMouseLeave: handleMouseLeave
+                  onMouseEnter: (e) => {
+                    handleMouseEnter(e, "green");
+                  },
+                  onMouseLeave: handleMouseLeave,
+                  shape: CustomBarShape
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -713,15 +721,17 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
                 {
                   dataKey: "pink",
                   fill: "url(#pinkGradient)",
-                  shape: CustomBarShape,
-                  onMouseEnter: (e) => handleMouseEnter(e, "pink"),
-                  onMouseLeave: handleMouseLeave
+                  onMouseEnter: (e) => {
+                    handleMouseEnter(e, "pink");
+                  },
+                  onMouseLeave: handleMouseLeave,
+                  shape: CustomBarShape
                 }
               )
             ]
           }
         ) }),
-        tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        tooltipFormatter ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             ref: tooltipRef,
@@ -737,9 +747,9 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
               width: "fit-content",
               whiteSpace: "nowrap"
             },
-            children: tooltipState && tooltipFormatter(tooltipState)
+            children: tooltipState ? tooltipFormatter(tooltipState) : null
           }
-        )
+        ) : null
       ]
     }
   );
@@ -797,14 +807,14 @@ var RadarChart = (0, import_react4.forwardRef)((originalProps, ref) => {
     if (data.length === 3) return { cx: "50%", cy: "65%" };
     return {};
   }, [data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.ResponsiveContainer, { width: "100%", height: containerHeight, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.ResponsiveContainer, { height: containerHeight, width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_recharts4.RadarChart,
       {
         data: normalizedData,
-        outerRadius,
         margin: chartMargin,
+        outerRadius,
         ...chartCenter,
         className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
         children: [
@@ -818,22 +828,23 @@ var RadarChart = (0, import_react4.forwardRef)((originalProps, ref) => {
               tickSize: 15
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.PolarRadiusAxis, { domain: [0, 100], tick: false, tickCount: 6, axisLine: false }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.PolarRadiusAxis, { axisLine: false, domain: [0, 100], tick: false, tickCount: 6 }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             import_recharts4.Radar,
             {
-              name: label,
+              activeDot: false,
               dataKey: "value",
-              stroke: "#3F9CF2",
-              fill: "#EFF8FF",
-              strokeWidth: 1.75,
               dot: false,
-              activeDot: false
+              fill: "#EFF8FF",
+              name: label,
+              stroke: "#3F9CF2",
+              strokeWidth: 1.75
             }
           ),
-          tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          tooltipFormatter ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             import_recharts4.Tooltip,
             {
+              allowEscapeViewBox: { x: true, y: true },
               content: ({ active, payload, label: tooltipLabel }) => {
                 var _a, _b;
                 const currentData = data == null ? void 0 : data.find((item) => item.name === tooltipLabel);
@@ -844,12 +855,11 @@ var RadarChart = (0, import_react4.forwardRef)((originalProps, ref) => {
                   data: currentData
                 }) });
               },
-              wrapperStyle: { zIndex: 9999 },
-              allowEscapeViewBox: { x: true, y: true },
+              cursor: false,
               isAnimationActive: false,
-              cursor: false
+              wrapperStyle: { zIndex: 9999 }
             }
-          )
+          ) : null
         ]
       }
     ) }) })
@@ -934,7 +944,7 @@ var SimpleBarChartComponent = (0, import_react5.forwardRef)((originalProps, ref)
   const handleMouseLeave = () => {
     setTooltipState(null);
   };
-  const CustomBarShape = ({ x, y, width, height, fill }) => {
+  function CustomBarShape({ x, y, width, height, fill }) {
     const radius = 4;
     const extraHeight = 10;
     const adjustedHeight = height + extraHeight;
@@ -946,23 +956,23 @@ var SimpleBarChartComponent = (0, import_react5.forwardRef)((originalProps, ref)
         d: `M${x},${bottomY} L${x},${adjustedY + radius} Q${x},${adjustedY} ${x + radius},${adjustedY} L${x + width - radius},${adjustedY} Q${x + width},${adjustedY} ${x + width},${adjustedY + radius} L${x + width},${bottomY} Z`,
         fill
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x, y, width, height: 0, fill });
-  };
-  const CustomTick = ({ x, y, payload }) => {
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { fill, height: 0, width, x, y });
+  }
+  function CustomTick({ x, y, payload }) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "text",
       {
-        x,
-        y: y + 14,
-        textAnchor: "middle",
+        className: "text-body-foreground",
+        fill: "currentColor",
         fontSize: 12,
         fontWeight: 700,
-        fill: "currentColor",
-        className: "text-body-foreground",
+        textAnchor: "middle",
+        x,
+        y: y + 14,
         children: payload.value
       }
     );
-  };
+  }
   (0, import_react5.useLayoutEffect)(() => {
     if (!tooltipState || !chartRef.current || !tooltipRef.current) return;
     const chartRect = chartRef.current.getBoundingClientRect();
@@ -981,7 +991,6 @@ var SimpleBarChartComponent = (0, import_react5.forwardRef)((originalProps, ref)
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
-      ref: chartRef,
       className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
       onMouseLeave: handleMouseLeave,
       onMouseMove: (e) => {
@@ -990,63 +999,64 @@ var SimpleBarChartComponent = (0, import_react5.forwardRef)((originalProps, ref)
           setTooltipState(null);
         }
       },
+      ref: chartRef,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts5.ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts5.ResponsiveContainer, { height: 140, width: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           import_recharts5.BarChart,
           {
-            data,
-            margin: { left: 0, right: 0, top: 0, bottom: 0 },
-            barSize: 10,
             barGap,
+            barSize: 10,
             className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+            data,
+            margin: { left: 0, right: 0, top: 0, bottom: 0 },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 import_recharts5.CartesianGrid,
                 {
-                  vertical: true,
+                  className: "stroke-neutral-light",
                   horizontal: false,
                   strokeDasharray: "4 4",
-                  className: "stroke-neutral-light",
+                  vertical: true,
                   verticalPoints: tickPositions
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 import_recharts5.CartesianGrid,
                 {
-                  vertical: true,
+                  className: "stroke-neutral-light",
                   horizontal: false,
                   strokeDasharray: "0",
                   strokeWidth: 2,
-                  className: "stroke-neutral-light",
+                  vertical: true,
                   verticalPoints: [0]
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 import_recharts5.XAxis,
                 {
-                  dataKey: "title",
                   axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-                  tickLine: false,
+                  dataKey: "title",
+                  padding: { left: 0, right: 0 },
                   tick: CustomTick,
-                  padding: { left: 0, right: 0 }
+                  tickLine: false
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts5.YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts5.YAxis, { domain: yAxisDomain, hide: true, ticks: yAxisTicks }),
               /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 import_recharts5.Bar,
                 {
                   dataKey: "value",
                   fill: "#C7E5FA",
-                  shape: CustomBarShape,
                   onMouseEnter: handleMouseEnter,
-                  onMouseLeave: handleMouseLeave
+                  onMouseLeave: handleMouseLeave,
+                  shape: CustomBarShape
                 }
               )
             ]
           }
         ) }),
-        tooltipFormatter && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        tooltipFormatter ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
             ref: tooltipRef,
@@ -1062,9 +1072,9 @@ var SimpleBarChartComponent = (0, import_react5.forwardRef)((originalProps, ref)
               width: "fit-content",
               whiteSpace: "nowrap"
             },
-            children: tooltipState && tooltipFormatter(tooltipState)
+            children: tooltipState ? tooltipFormatter(tooltipState) : null
           }
-        )
+        ) : null
       ]
     }
   );