@deepnoid/ui 0.1.118 → 0.1.119

package/dist/components/charts/index.js

@@ -467,7 +467,7 @@ CircularProgress.displayName = "CircularProgress";
 var circularProgress_default = CircularProgress;
 var circularProgressStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "items-center", "gap-[20px]"],
+    base: ["flex", "flex-col", "items-center", "gap-[20px]", "select-none"],
     background: ["fill-body-background", "border-neutral-light"],
     progress: ["transition-all", "duration-1000 ease-out"],
     percentage: ["text-xl", "font-bold", "text-body-foreground"],
@@ -548,67 +548,75 @@ var AreaChartComponent = (0, import_react2.forwardRef)((originalProps, ref) => {
   };
   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 }, 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 }
-        }
-      )
-    ] }) })
+    /* @__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 }
+            }
+          )
+        ]
+      }
+    ) })
   ] });
 });
 AreaChartComponent.displayName = "AreaChart";
 var areaChart_default = AreaChartComponent;
 var areaChartStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "gap-[10px]"],
+    base: ["flex", "flex-col", "gap-[10px]", "select-none"],
     color: [],
     axis: ["text-sm", "font-bold", "text-center", "text-body-foreground"],
     label: ["text-md", "font-bold", "text-body-foreground"]
@@ -634,13 +642,16 @@ var import_recharts3 = require("recharts");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
-  const { data, label, classNames } = { ...props, ...variantProps };
+  const {
+    data,
+    label,
+    classNames,
+    yAxisTicks = [0, 20, 40, 60, 80, 100],
+    yAxisTickFormatter = (value) => `${value}%`,
+    yAxisDomain = [-6, 110],
+    customTooltip
+  } = { ...props, ...variantProps };
   const slots = (0, import_react3.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
-  const COLOR_MAP = {
-    primary: "#C7E5FA",
-    secondary: "#92DCB2",
-    warning: "#DEC1FA"
-  };
   const [tickPositions, setTickPositions] = (0, import_react3.useState)([]);
   const tickRef = (0, import_react3.useRef)([]);
   const CustomBarShape = (barProps) => {
@@ -676,6 +687,28 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
       }
     );
   };
+  const CustomYAxisTick = ({ x, y, payload }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "text",
+      {
+        x: x - 10,
+        y,
+        textAnchor: "middle",
+        fontSize: 12,
+        fontWeight: 700,
+        fill: "currentColor",
+        className: "text-body-foreground",
+        dy: 4,
+        children: yAxisTickFormatter(payload.value)
+      }
+    );
+  };
+  const CustomTooltip = ({ active, payload, label: label2 }) => {
+    if (customTooltip && active && payload && payload.length) {
+      return customTooltip({ active, payload, label: label2 });
+    }
+    return null;
+  };
   (0, import_react3.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -694,11 +727,25 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
       import_recharts3.BarChart,
       {
         data,
-        margin: { left: -30 },
+        margin: { left: -20 },
         barSize: 20,
-        barGap: 10,
+        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_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_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_runtime3.jsx)(
             import_recharts3.CartesianGrid,
             {
@@ -712,7 +759,7 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             import_recharts3.XAxis,
             {
-              dataKey: "name",
+              dataKey: "title",
               axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
               tickLine: false,
               tick: CustomTick,
@@ -724,20 +771,15 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
             {
               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]
+              tick: CustomYAxisTick,
+              ticks: yAxisTicks,
+              domain: yAxisDomain
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_recharts3.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
+          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 })
         ]
       }
     ) })
@@ -769,31 +811,39 @@ var RadarChart = (0, import_react4.forwardRef)((originalProps, ref) => {
     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)(import_recharts4.RadarChart, { data, outerRadius: "80%", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts4.PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_recharts4.PolarAngleAxis,
-        {
-          dataKey: "name",
-          tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
-          tickFormatter: (value) => value,
-          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)(
-        import_recharts4.Radar,
-        {
-          name: label,
-          dataKey: "value",
-          stroke: "#3F9CF2",
-          fill: "#C7E5FA",
-          strokeWidth: 1.75,
-          dot: false,
-          activeDot: false
-        }
-      )
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts4.ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_recharts4.RadarChart,
+      {
+        data,
+        outerRadius: "80%",
+        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)(
+            import_recharts4.PolarAngleAxis,
+            {
+              dataKey: "name",
+              tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
+              tickFormatter: (value) => value,
+              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)(
+            import_recharts4.Radar,
+            {
+              name: label,
+              dataKey: "value",
+              stroke: "#3F9CF2",
+              fill: "#EFF8FF",
+              strokeWidth: 1.75,
+              dot: false,
+              activeDot: false
+            }
+          )
+        ]
+      }
+    ) }),
     label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
 });
@@ -801,7 +851,7 @@ RadarChart.displayName = "RadarChart";
 var radarChart_default = RadarChart;
 var radarChartStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "items-center", "gap-[10px]"],
+    base: ["flex", "flex-col", "items-center", "gap-[10px]", "select-none"],
     label: ["text-sm", "font-bold", "text-left", "text-body-foreground"]
   },
   variants: {},

package/dist/components/charts/index.mjs

@@ -2,16 +2,16 @@
 import "../../chunk-VYNBJBXD.mjs";
 import {
   areaChart_default
-} from "../../chunk-WIZDHK4O.mjs";
+} from "../../chunk-QKRCC26D.mjs";
 import {
   barChart_default
-} from "../../chunk-CF7LIQF6.mjs";
+} from "../../chunk-U33MTXQX.mjs";
 import {
   circularProgress_default
-} from "../../chunk-KIN2UK2C.mjs";
+} from "../../chunk-VB5NKWJG.mjs";
 import {
   radarChart_default
-} from "../../chunk-63KZGR73.mjs";
+} from "../../chunk-UA24L44Z.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-AC6TWLRT.mjs";

package/dist/components/charts/radarChart.js

@@ -379,31 +379,39 @@ var RadarChart = (0, import_react.forwardRef)((originalProps, ref) => {
     return Math.max(...data.map((item) => item.fullMark || 100));
   }, [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)(import_recharts.RadarChart, { data, outerRadius: "80%", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.PolarGrid, { stroke: "#DFE2E7", strokeWidth: 1.75 }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_recharts.PolarAngleAxis,
-        {
-          dataKey: "name",
-          tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
-          tickFormatter: (value) => value,
-          tickSize: 15
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_recharts.Radar,
-        {
-          name: label,
-          dataKey: "value",
-          stroke: "#3F9CF2",
-          fill: "#C7E5FA",
-          strokeWidth: 1.75,
-          dot: false,
-          activeDot: false
-        }
-      )
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: 580, height: 330, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_recharts.RadarChart,
+      {
+        data,
+        outerRadius: "80%",
+        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 }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_recharts.PolarAngleAxis,
+            {
+              dataKey: "name",
+              tick: { fill: "#333", fontSize: 12, fontWeight: "bold" },
+              tickFormatter: (value) => value,
+              tickSize: 15
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.PolarRadiusAxis, { domain: [0, maxFullMark], tick: false, tickCount: 6, axisLine: false }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_recharts.Radar,
+            {
+              name: label,
+              dataKey: "value",
+              stroke: "#3F9CF2",
+              fill: "#EFF8FF",
+              strokeWidth: 1.75,
+              dot: false,
+              activeDot: false
+            }
+          )
+        ]
+      }
+    ) }),
     label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
 });
@@ -411,7 +419,7 @@ RadarChart.displayName = "RadarChart";
 var radarChart_default = RadarChart;
 var radarChartStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "items-center", "gap-[10px]"],
+    base: ["flex", "flex-col", "items-center", "gap-[10px]", "select-none"],
     label: ["text-sm", "font-bold", "text-left", "text-body-foreground"]
   },
   variants: {},

package/dist/components/charts/radarChart.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   radarChart_default
-} from "../../chunk-63KZGR73.mjs";
+} from "../../chunk-UA24L44Z.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-AC6TWLRT.mjs";