@deepnoid/ui 0.1.113 → 0.1.115

package/dist/components/charts/barChart.js

@@ -378,8 +378,8 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
   const slots = (0, import_react.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
   const COLOR_MAP = {
     primary: "#C7E5FA",
-    secondary: "#DEC1FA",
-    warning: "#F9C967"
+    secondary: "#92DCB2",
+    warning: "#DEC1FA"
   };
   const [tickPositions, setTickPositions] = (0, import_react.useState)([]);
   const tickRef = (0, import_react.useRef)([]);
@@ -430,54 +430,64 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
   }, [data]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     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)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_recharts.BarChart, { data, margin: { left: -30 }, barSize: 20, barGap: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_recharts.CartesianGrid,
-        {
-          vertical: true,
-          horizontal: false,
-          strokeDasharray: "3 3",
-          className: "stroke-neutral-light",
-          verticalPoints: tickPositions
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_recharts.XAxis,
-        {
-          dataKey: "name",
-          axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-          tickLine: false,
-          tick: CustomTick,
-          padding: { left: 32, right: 32 }
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_recharts.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_runtime.jsx)(import_recharts.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
-    ] }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_recharts.BarChart,
+      {
+        data,
+        margin: { left: -30 },
+        barSize: 20,
+        barGap: 10,
+        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_recharts.CartesianGrid,
+            {
+              vertical: true,
+              horizontal: false,
+              strokeDasharray: "3 3",
+              className: "stroke-neutral-light",
+              verticalPoints: tickPositions
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_recharts.XAxis,
+            {
+              dataKey: "name",
+              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+              tickLine: false,
+              tick: CustomTick,
+              padding: { left: 32, right: 32 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_recharts.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_runtime.jsx)(import_recharts.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
+        ]
+      }
+    ) })
   ] });
 });
 BarChartComponent.displayName = "barChart";
 var barChart_default = BarChartComponent;
 var barChartStyle = tv({
   slots: {
-    base: ["flex", "flex-col", "gap-[10px]"],
+    base: ["flex", "flex-col", "gap-[10px]", "select-none"],
     label: ["text-md", "font-bold", "text-body-foreground"]
   },
   variants: {},

package/dist/components/charts/barChart.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   barChart_default
-} from "../../chunk-GAZ472ZU.mjs";
+} from "../../chunk-CF7LIQF6.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-AC6TWLRT.mjs";

package/dist/components/charts/circularProgress.d.mts

@@ -15,75 +15,60 @@ declare const CircularProgress: react.ForwardRefExoticComponent<Props & Circular
 
 declare const circularProgressStyle: tailwind_variants.TVReturnType<{
     color: {
-        primary: {
-            background: string[];
+        blue: {
             progress: string[];
-            text: string[];
         };
-        secondary: {
-            background: string[];
+        green: {
             progress: string[];
-            text: string[];
         };
-        warning: {
-            background: string[];
+        pink: {
             progress: string[];
-            text: string[];
         };
     };
 }, {
     base: string[];
-    background: never[];
+    background: string[];
     progress: string[];
-    text: string[];
+    percentage: string[];
+    unit: string[];
     label: string[];
 }, undefined, {
     color: {
-        primary: {
-            background: string[];
+        blue: {
             progress: string[];
-            text: string[];
         };
-        secondary: {
-            background: string[];
+        green: {
             progress: string[];
-            text: string[];
         };
-        warning: {
-            background: string[];
+        pink: {
             progress: string[];
-            text: string[];
         };
     };
 }, {
     base: string[];
-    background: never[];
+    background: string[];
     progress: string[];
-    text: string[];
+    percentage: string[];
+    unit: string[];
     label: string[];
 }, tailwind_variants.TVReturnType<{
     color: {
-        primary: {
-            background: string[];
+        blue: {
             progress: string[];
-            text: string[];
         };
-        secondary: {
-            background: string[];
+        green: {
             progress: string[];
-            text: string[];
         };
-        warning: {
-            background: string[];
+        pink: {
             progress: string[];
-            text: string[];
         };
     };
 }, {
     base: string[];
-    background: never[];
+    background: string[];
     progress: string[];
-    text: string[];
+    percentage: string[];
+    unit: string[];
     label: string[];
 }, undefined, unknown, unknown, undefined>>;
 type CircularProgressVariantProps = VariantProps<typeof circularProgressStyle>;

package/dist/components/charts/circularProgress.d.ts

@@ -15,75 +15,60 @@ declare const CircularProgress: react.ForwardRefExoticComponent<Props & Circular
 
 declare const circularProgressStyle: tailwind_variants.TVReturnType<{
     color: {
-        primary: {
-            background: string[];
+        blue: {
             progress: string[];
-            text: string[];
         };
-        secondary: {
-            background: string[];
+        green: {
             progress: string[];
-            text: string[];
         };
-        warning: {
-            background: string[];
+        pink: {
             progress: string[];
-            text: string[];
         };
     };
 }, {
     base: string[];
-    background: never[];
+    background: string[];
     progress: string[];
-    text: string[];
+    percentage: string[];
+    unit: string[];
     label: string[];
 }, undefined, {
     color: {
-        primary: {
-            background: string[];
+        blue: {
             progress: string[];
-            text: string[];
         };
-        secondary: {
-            background: string[];
+        green: {
             progress: string[];
-            text: string[];
         };
-        warning: {
-            background: string[];
+        pink: {
             progress: string[];
-            text: string[];
         };
     };
 }, {
     base: string[];
-    background: never[];
+    background: string[];
     progress: string[];
-    text: string[];
+    percentage: string[];
+    unit: string[];
     label: string[];
 }, tailwind_variants.TVReturnType<{
     color: {
-        primary: {
-            background: string[];
+        blue: {
             progress: string[];
-            text: string[];
         };
-        secondary: {
-            background: string[];
+        green: {
             progress: string[];
-            text: string[];
         };
-        warning: {
-            background: string[];
+        pink: {
             progress: string[];
-            text: string[];
         };
     };
 }, {
     base: string[];
-    background: never[];
+    background: string[];
     progress: string[];
-    text: string[];
+    percentage: string[];
+    unit: string[];
     label: string[];
 }, undefined, unknown, unknown, undefined>>;
 type CircularProgressVariantProps = VariantProps<typeof circularProgressStyle>;

package/dist/components/charts/circularProgress.js

@@ -381,8 +381,30 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
     }
   ];
   const BAR_SIZE = 24;
-  const OUTER_RADIUS = 75;
+  const STROKE_WIDTH = 1;
+  const BORDER_MARGIN = 5;
+  const CONTAINER_PADDING = BORDER_MARGIN + STROKE_WIDTH + 1;
+  const OUTER_RADIUS = (size - CONTAINER_PADDING * 2) / 2;
   const INNER_RADIUS = OUTER_RADIUS - BAR_SIZE;
+  const BACKGROUND_RADIUS = (INNER_RADIUS + OUTER_RADIUS) / 2;
+  const gradientId = `gradient-${Math.random().toString(36).slice(2)}`;
+  const gradientColors = {
+    blue: {
+      start: "#DEC1FA",
+      end: "#3F9CF2"
+    },
+    green: {
+      start: "#C2E59C",
+      end: "#64B3F4"
+    },
+    pink: {
+      start: "#DDD6F3",
+      end: "#FAACA8"
+    }
+  };
+  const colorValue = originalProps.color;
+  const colorKey = colorValue || "blue";
+  const currentGradient = gradientColors[colorKey];
   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.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -390,40 +412,48 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
         {
           width: size,
           height: size,
-          innerRadius: INNER_RADIUS,
+          innerRadius: INNER_RADIUS - 0.1,
           outerRadius: OUTER_RADIUS,
           barSize: BAR_SIZE,
           data,
           startAngle: 90,
           endAngle: -270,
           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)("stop", { offset: "0%", stopColor: currentGradient.start }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: currentGradient.end })
+            ] }) }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "circle",
               {
                 cx: size / 2,
                 cy: size / 2,
-                r: OUTER_RADIUS,
-                className: slots.background({ class: classNames == null ? void 0 : classNames.background }),
-                fill: "currentColor"
+                r: OUTER_RADIUS + BORDER_MARGIN,
+                fill: "none",
+                stroke: "#DFE2E7",
+                strokeWidth: "1"
               }
             ),
-            /* @__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,
+              "circle",
               {
-                dataKey: "value",
-                cornerRadius: 12,
-                animationDuration: 1e3,
-                className: slots.progress({ class: classNames == null ? void 0 : classNames.progress })
+                cx: size / 2,
+                cy: size / 2,
+                r: BACKGROUND_RADIUS,
+                fill: "none",
+                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)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: slots.text({ class: classNames == null ? void 0 : classNames.text }), children: [
-        percentage,
-        unit
-      ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute inset-0 flex items-center justify-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.percentage({ class: classNames == null ? void 0 : classNames.percentage }), children: percentage }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.unit({ class: classNames == null ? void 0 : classNames.unit }), children: unit })
+      ] })
     ] }),
     label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
@@ -433,31 +463,26 @@ var circularProgress_default = CircularProgress;
 var circularProgressStyle = tv({
   slots: {
     base: ["flex", "flex-col", "items-center", "gap-[20px]"],
-    background: [],
+    background: ["fill-body-background", "border-neutral-light"],
     progress: ["transition-all", "duration-1000 ease-out"],
-    text: ["text-xl", "font-bold"],
+    percentage: ["text-xl", "font-bold", "text-body-foreground"],
+    unit: ["text-md", "font-bold", "text-body-foreground"],
     label: ["text-md", "font-bold", "text-left", "text-body-foreground"]
   },
   variants: {
     color: {
-      primary: {
-        background: ["fill-primary-soft"],
-        progress: ["fill-primary-main"],
-        text: ["text-primary-dark"]
+      blue: {
+        progress: ["fill-blue-main"]
       },
-      secondary: {
-        background: ["fill-secondary-soft"],
-        progress: ["fill-secondary-main"],
-        text: ["text-secondary-dark"]
+      green: {
+        progress: ["fill-green-main"]
       },
-      warning: {
-        background: ["fill-warning-soft"],
-        progress: ["fill-warning-main"],
-        text: ["text-warning-dark"]
+      pink: {
+        progress: ["fill-pink-main"]
       }
     }
   },
   defaultVariants: {
-    color: "primary"
+    color: "blue"
   }
 });

package/dist/components/charts/circularProgress.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   circularProgress_default
-} from "../../chunk-ZWLRSZTC.mjs";
+} from "../../chunk-KIN2UK2C.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-AC6TWLRT.mjs";