@deepnoid/ui 0.1.122 → 0.1.124

package/dist/components/charts/circularProgress.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   circularProgress_default
-} from "../../chunk-VB5NKWJG.mjs";
+} from "../../chunk-5XW5QDIW.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   circularProgress_default as default

package/dist/components/charts/index.js

@@ -495,28 +495,132 @@ var circularProgressStyle = tv({
 // src/components/charts/areaChart.tsx
 var import_react2 = require("react");
 var import_recharts2 = require("recharts");
+
+// src/components/scroll/scrollArea.tsx
+var import_tailwind_variants3 = require("tailwind-variants");
+
+// src/utils/clsx.ts
+function clsx(...args) {
+  var i = 0, tmp, x, str = "";
+  while (i < args.length) {
+    if (tmp = args[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
+    }
+  }
+  return str;
+}
+function toVal(mix) {
+  var 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;
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
+      }
+    }
+  }
+  return str;
+}
+
+// src/components/scroll/scrollArea.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var ScrollArea = ({ children, className, direction, size }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: clsx(scrollAreaStyle({ direction, size }), className), children });
+};
+ScrollArea.displayName = "ScrollArea";
+var scrollArea_default = ScrollArea;
+var scrollAreaStyle = (0, import_tailwind_variants3.tv)({
+  base: [
+    "h-full",
+    "x-full",
+    "scrollbar-thumb-trans-soft",
+    "hover:scrollbar-thumb-neutral-light",
+    "scrollbar-track-neutral-soft",
+    "scrollbar-button-neutral-main"
+  ],
+  variants: {
+    direction: {
+      x: ["overflow-x-auto", "overflow-y-hidden"],
+      y: ["overflow-y-auto", "overflow-x-hidden"],
+      both: ["overflow-auto"]
+    },
+    size: {
+      sm: ["scrollbar-sm"],
+      // "scrollbar-thin",
+      md: ["scrollbar-md"],
+      lg: ["scrollbar-lg"]
+    }
+  },
+  defaultVariants: {
+    direction: "both",
+    size: "md"
+  }
+});
+
+// src/components/charts/areaChart.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
   const uniqueId = (0, import_react2.useId)();
   const [props, variantProps] = mapPropsVariants(originalProps, areaChartStyle.variantKeys);
-  const { data, label, color = "primary", classNames } = { ...props, ...variantProps };
+  const {
+    data,
+    label,
+    headerContent,
+    color = "primary",
+    startFromZero = false,
+    itemWidth,
+    chartHeight = 240,
+    classNames
+  } = { ...props, ...variantProps };
   const slots = (0, import_react2.useMemo)(() => areaChartStyle({ ...variantProps }), [variantProps]);
   const COLOR_MAP = {
     primary: "#3F9CF2",
     danger: "#FF4684"
   };
   const colorHex = (0, import_react2.useMemo)(() => COLOR_MAP[color], [color]);
+  const totalChartWidth = (0, import_react2.useMemo)(() => {
+    if (!data || !itemWidth) return void 0;
+    const dataLength = startFromZero ? data.length + 1 : data.length;
+    return dataLength * itemWidth;
+  }, [data, itemWidth, startFromZero]);
+  const needsScroll = (0, import_react2.useMemo)(() => {
+    return totalChartWidth;
+  }, [totalChartWidth]);
+  const processedData = (0, import_react2.useMemo)(() => {
+    if (!data) return [];
+    return data;
+  }, [data, startFromZero]);
   const [tickPositions, setTickPositions] = (0, import_react2.useState)([]);
   const tickRef = (0, import_react2.useRef)([]);
   const CustomTick = ({ x, y, payload }) => {
     if (x !== void 0) {
       tickRef.current.push(x);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    if (startFromZero && payload.value === "") {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", {});
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "text",
       {
         x,
-        y: y + 14,
+        y: y + 11,
         textAnchor: "middle",
         fontSize: 12,
         fontWeight: 700,
@@ -537,79 +641,95 @@ var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
       tickRef.current = [];
     });
     return () => cancelAnimationFrame(raf);
-  }, [data]);
+  }, [processedData]);
   const CustomDotWithShadow = (props2) => {
-    const { cx, cy, fill, stroke } = props2;
+    const { cx, cy, fill, stroke, payload } = props2;
     if (cx === void 0 || cy === void 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx, cy, r: 8, fill, opacity: 0.2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx, cy, r: 3.5, fill, stroke, strokeWidth: 2 })
+    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 })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      import_recharts2.AreaChart,
-      {
-        data,
-        margin: { left: -30 },
-        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
-          ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_recharts2.CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "3 3",
-              className: "stroke-neutral-light",
-              verticalPoints: tickPositions
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_recharts2.XAxis,
-            {
-              dataKey: "name",
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomTick,
-              padding: { left: 35.5, right: 35.5 }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_recharts2.YAxis,
-            {
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: {
-                fontSize: 12,
-                fontWeight: 700,
-                fill: "text-body-foreground",
-                textAnchor: "middle",
-                dx: -10
-              },
-              ticks: [0, 20, 40, 60, 80, 100],
-              domain: [-6, 110]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_recharts2.Area,
-            {
-              type: "monotone",
-              dataKey: "value",
-              stroke: colorHex,
-              strokeWidth: 2,
-              fill: `url(#colorGradient-${uniqueId})`,
-              dot: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
-              activeDot: { r: 7, fill: colorHex }
-            }
-          )
-        ]
-      }
-    ) })
+  const chartContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        width: totalChartWidth || "100%",
+        minWidth: totalChartWidth || "100%"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        import_recharts2.AreaChart,
+        {
+          width: totalChartWidth || 400,
+          height: chartHeight + 30,
+          data: processedData,
+          margin: { left: -30 },
+          className: "bg-body-background [&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+          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)("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,
+                horizontal: false,
+                strokeDasharray: "3 3",
+                className: "stroke-neutral-light",
+                verticalPoints: tickPositions
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_recharts2.XAxis,
+              {
+                dataKey: "name",
+                axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                tickLine: false,
+                tick: CustomTick,
+                padding: { left: 35.5, right: 35.5 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_recharts2.YAxis,
+              {
+                axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                tickLine: false,
+                tick: {
+                  fontSize: 12,
+                  fontWeight: 700,
+                  fill: "text-body-foreground",
+                  textAnchor: "middle",
+                  dx: -10
+                },
+                ticks: [0, 20, 40, 60, 80, 100],
+                domain: [-6, 110]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              import_recharts2.Area,
+              {
+                type: "monotone",
+                dataKey: "value",
+                stroke: colorHex,
+                strokeWidth: 2,
+                fill: `url(#colorGradient-${uniqueId})`,
+                dot: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
+                activeDot: false
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+  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 }),
+    headerContent,
+    needsScroll ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(scrollArea_default, { direction: "x", size: "sm", children: chartContent }) : chartContent
   ] });
 });
 AreaChartComponent.displayName = "AreaChart";
@@ -639,7 +759,7 @@ var areaChartStyle = tv({
 // src/components/charts/barChart.tsx
 var import_react3 = require("react");
 var import_recharts3 = require("recharts");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
   const {
@@ -661,19 +781,19 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
     const adjustedHeight = height + extraHeight;
     const adjustedY = y;
     const bottomY = adjustedY + adjustedHeight;
-    return height ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return height ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "path",
       {
         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_runtime3.jsx)("rect", { x, y, width, height: 0, fill });
+    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x, y, width, height: 0, fill });
   };
   const CustomTick = ({ x, y, payload }) => {
     if (x !== void 0) {
       tickRef.current.push(x);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "text",
       {
         x,
@@ -688,7 +808,7 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
     );
   };
   const CustomYAxisTick = ({ x, y, payload }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "text",
       {
         x: x - 10,
@@ -721,9 +841,9 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
     });
     return () => cancelAnimationFrame(raf);
   }, [data]);
-  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 }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), 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)(
       import_recharts3.BarChart,
       {
         data,
@@ -732,21 +852,21 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
         barGap: 20,
         className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("defs", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
+          /* @__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.jsx)("stop", { offset: "0%", stopColor: "#DEC1FA" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("stop", { offset: "100%", stopColor: "#3F9CF2" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0%", stopColor: "#C2E59C" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "100%", stopColor: "#64B3F4" })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "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_runtime3.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "0%", stopColor: "#DDD6F3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("stop", { offset: "100%", stopColor: "#FAACA8" })
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "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" })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             import_recharts3.CartesianGrid,
             {
               vertical: true,
@@ -756,7 +876,7 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
               verticalPoints: tickPositions
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             import_recharts3.XAxis,
             {
               dataKey: "title",
@@ -766,7 +886,7 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
               padding: { left: 0, right: 0 }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             import_recharts3.YAxis,
             {
               axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
@@ -776,10 +896,10 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
               domain: yAxisDomain
             }
           ),
-          customTooltip && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CustomTooltip, {}), cursor: { fill: "transparent" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "blue", fill: "url(#blueGradient)", width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "green", fill: "url(#greenGradient)", width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "pink", fill: "url(#pinkGradient)", width: 20, shape: CustomBarShape })
+          customTooltip && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CustomTooltip, {}), cursor: { fill: "transparent" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Bar, { dataKey: "blue", fill: "url(#blueGradient)", width: 20, shape: CustomBarShape }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Bar, { dataKey: "green", fill: "url(#greenGradient)", width: 20, shape: CustomBarShape }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Bar, { dataKey: "pink", fill: "url(#pinkGradient)", width: 20, shape: CustomBarShape })
         ]
       }
     ) })
@@ -801,7 +921,7 @@ var barChartStyle = tv({
 // src/components/charts/radarChart.tsx
 var import_recharts4 = require("recharts");
 var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var RadarChart = (0, import_react4.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, radarChartStyle.variantKeys);
   const { data, label, classNames } = { ...props, ...variantProps };
@@ -810,16 +930,35 @@ var RadarChart = (0, import_react4.forwardRef)((originalProps, ref) => {
     if (!data || data.length === 0) return 100;
     return Math.max(...data.map((item) => item.fullMark || 100));
   }, [data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts4.ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  const containerHeight = (0, import_react4.useMemo)(() => {
+    if (!data || data.length === 0) return 250;
+    return data.length === 3 ? 245 : 306;
+  }, [data]);
+  const chartMargin = (0, import_react4.useMemo)(() => {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+  }, [data]);
+  const outerRadius = (0, import_react4.useMemo)(() => {
+    if (!data || data.length === 0) return 125;
+    return data.length === 3 ? 135 : 125;
+  }, [data]);
+  const chartCenter = (0, import_react4.useMemo)(() => {
+    if (!data || data.length === 0) return {};
+    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)(
       import_recharts4.RadarChart,
       {
         data,
-        outerRadius: "80%",
+        outerRadius,
+        margin: chartMargin,
+        ...chartCenter,
         className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts4.PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             import_recharts4.PolarAngleAxis,
             {
               dataKey: "name",
@@ -828,8 +967,8 @@ var RadarChart = (0, import_react4.forwardRef)((originalProps, ref) => {
               tickSize: 15
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts4.PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_recharts4.PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             import_recharts4.Radar,
             {
               name: label,
@@ -843,16 +982,15 @@ var RadarChart = (0, import_react4.forwardRef)((originalProps, ref) => {
           )
         ]
       }
-    ) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    ) }) })
   ] });
 });
 RadarChart.displayName = "RadarChart";
 var radarChart_default = RadarChart;
 var radarChartStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "items-center", "gap-[10px]", "select-none"],
-    label: ["text-sm", "font-bold", "text-left", "text-body-foreground"]
+    base: ["flex", "flex-col", "select-none"],
+    label: ["text-md", "font-bold", "text-left", "text-body-foreground"]
   },
   variants: {},
   defaultVariants: {

package/dist/components/charts/index.mjs

@@ -1,19 +1,22 @@
 "use client";
 import "../../chunk-VYNBJBXD.mjs";
+import {
+  radarChart_default
+} from "../../chunk-OEFILEL3.mjs";
 import {
   areaChart_default
-} from "../../chunk-QKRCC26D.mjs";
+} from "../../chunk-IHLCZM5T.mjs";
+import "../../chunk-DQRAFUDA.mjs";
+import "../../chunk-M37VBNB3.mjs";
 import {
   barChart_default
-} from "../../chunk-OGJONB7G.mjs";
+} from "../../chunk-WNNOVISA.mjs";
 import {
   circularProgress_default
-} from "../../chunk-VB5NKWJG.mjs";
-import {
-  radarChart_default
-} from "../../chunk-UA24L44Z.mjs";
+} from "../../chunk-5XW5QDIW.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   areaChart_default as AreaChart,

package/dist/components/charts/radarChart.js

@@ -378,12 +378,31 @@ var RadarChart = (0, import_react.forwardRef)((originalProps, ref) => {
     if (!data || data.length === 0) return 100;
     return Math.max(...data.map((item) => item.fullMark || 100));
   }, [data]);
+  const containerHeight = (0, import_react.useMemo)(() => {
+    if (!data || data.length === 0) return 250;
+    return data.length === 3 ? 245 : 306;
+  }, [data]);
+  const chartMargin = (0, import_react.useMemo)(() => {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+  }, [data]);
+  const outerRadius = (0, import_react.useMemo)(() => {
+    if (!data || data.length === 0) return 125;
+    return data.length === 3 ? 135 : 125;
+  }, [data]);
+  const chartCenter = (0, import_react.useMemo)(() => {
+    if (!data || data.length === 0) return {};
+    if (data.length === 3) return { cx: "50%", cy: "65%" };
+    return {};
+  }, [data]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: containerHeight, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_recharts.RadarChart,
       {
         data,
-        outerRadius: "80%",
+        outerRadius,
+        margin: chartMargin,
+        ...chartCenter,
         className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
@@ -411,16 +430,15 @@ var RadarChart = (0, import_react.forwardRef)((originalProps, ref) => {
           )
         ]
       }
-    ) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    ) }) })
   ] });
 });
 RadarChart.displayName = "RadarChart";
 var radarChart_default = RadarChart;
 var radarChartStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "items-center", "gap-[10px]", "select-none"],
-    label: ["text-sm", "font-bold", "text-left", "text-body-foreground"]
+    base: ["flex", "flex-col", "select-none"],
+    label: ["text-md", "font-bold", "text-left", "text-body-foreground"]
   },
   variants: {},
   defaultVariants: {

package/dist/components/charts/radarChart.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   radarChart_default
-} from "../../chunk-UA24L44Z.mjs";
+} from "../../chunk-OEFILEL3.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   radarChart_default as default

package/dist/components/checkbox/checkbox.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   checkbox_default
-} from "../../chunk-H6JGLPPF.mjs";
+} from "../../chunk-3U5NJTRH.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {

package/dist/components/checkbox/index.mjs

@@ -2,9 +2,9 @@
 import "../../chunk-QZ3LVYJW.mjs";
 import {
   checkbox_default
-} from "../../chunk-H6JGLPPF.mjs";
+} from "../../chunk-3U5NJTRH.mjs";
 import "../../chunk-E3G5QXSH.mjs";
-import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-76QIZILI.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {