@deepnoid/ui 0.1.113 → 0.1.115

package/dist/{chunk-GAZ472ZU.mjs → chunk-CF7LIQF6.mjs}

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

@@ -0,0 +1,132 @@
+"use client";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-CDXBML6O.mjs";
+
+// src/components/charts/circularProgress.tsx
+import { RadialBarChart, RadialBar, PolarAngleAxis } from "recharts";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CircularProgress = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, circularProgressStyle.variantKeys);
+  const { label, size = 150, percentage, unit, classNames } = { ...props, ...variantProps };
+  const slots = useMemo(() => circularProgressStyle({ ...variantProps }), [variantProps]);
+  const data = [
+    {
+      name: label,
+      value: percentage
+    }
+  ];
+  const BAR_SIZE = 24;
+  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__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
+      /* @__PURE__ */ jsxs(
+        RadialBarChart,
+        {
+          width: size,
+          height: size,
+          innerRadius: INNER_RADIUS - 0.1,
+          outerRadius: OUTER_RADIUS,
+          barSize: BAR_SIZE,
+          data,
+          startAngle: 90,
+          endAngle: -270,
+          children: [
+            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: currentGradient.start }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: currentGradient.end })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: size / 2,
+                cy: size / 2,
+                r: OUTER_RADIUS + BORDER_MARGIN,
+                fill: "none",
+                stroke: "#DFE2E7",
+                strokeWidth: "1"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: size / 2,
+                cy: size / 2,
+                r: BACKGROUND_RADIUS,
+                fill: "none",
+                stroke: "rgba(0, 0, 0, 0.05)",
+                strokeWidth: BAR_SIZE
+              }
+            ),
+            /* @__PURE__ */ jsx(PolarAngleAxis, { type: "number", domain: [0, 100], angleAxisId: 0, tick: false }),
+            /* @__PURE__ */ jsx(RadialBar, { dataKey: "value", cornerRadius: 12, animationDuration: 1e3, fill: `url(#${gradientId})` })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center", children: [
+        /* @__PURE__ */ jsx("span", { className: slots.percentage({ class: classNames == null ? void 0 : classNames.percentage }), children: percentage }),
+        /* @__PURE__ */ jsx("span", { className: slots.unit({ class: classNames == null ? void 0 : classNames.unit }), children: unit })
+      ] })
+    ] }),
+    label && /* @__PURE__ */ jsx("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+  ] });
+});
+CircularProgress.displayName = "CircularProgress";
+var circularProgress_default = CircularProgress;
+var circularProgressStyle = tv({
+  slots: {
+    base: ["flex", "flex-col", "items-center", "gap-[20px]"],
+    background: ["fill-body-background", "border-neutral-light"],
+    progress: ["transition-all", "duration-1000 ease-out"],
+    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: {
+      blue: {
+        progress: ["fill-blue-main"]
+      },
+      green: {
+        progress: ["fill-green-main"]
+      },
+      pink: {
+        progress: ["fill-pink-main"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "blue"
+  }
+});
+
+export {
+  circularProgress_default
+};

package/dist/{chunk-JFWWH3LL.mjs → chunk-MTQGHQ7Z.mjs}

@@ -1,10 +1,10 @@
 "use client";
-import {
-  toast_default
-} from "./chunk-3KWZHPVV.mjs";
 import {
   getToastPosition
 } from "./chunk-ZOTHPHXA.mjs";
+import {
+  toast_default
+} from "./chunk-EDAREIAN.mjs";
 
 // src/components/toast/use-toast.tsx
 import { createContext, useContext, useState, useCallback, useEffect, useRef } from "react";

package/dist/{chunk-I7QMOYZO.mjs → chunk-NEBMBSKV.mjs}

@@ -1,16 +1,16 @@
 "use client";
 import {
   progress_default
-} from "./chunk-AZ5SQYZE.mjs";
+} from "./chunk-2CLPU5LR.mjs";
 import {
   input_default
-} from "./chunk-PYCIG6N3.mjs";
+} from "./chunk-L3WKBOWY.mjs";
 import {
   button_default
-} from "./chunk-4NVZMJGS.mjs";
+} from "./chunk-AX3FVJMY.mjs";
 import {
   icon_button_default
-} from "./chunk-2PZRTIRD.mjs";
+} from "./chunk-WKMBRUGX.mjs";
 
 // src/components/fileUpload/fileUpload.tsx
 import { useRef, useState, useEffect } from "react";

package/dist/{chunk-6PNKRBUT.mjs → chunk-SZL743JC.mjs}

@@ -6,7 +6,7 @@ function useRipple(props = {}) {
   const [ripples, setRipples] = useState([]);
   const getUniqueID = (key) => `${key}-${Math.random().toString(36).substr(2, 9)}`;
   const onPress = useCallback((event) => {
-    const trigger = event.target;
+    const trigger = event.currentTarget;
     const rect = trigger.getBoundingClientRect();
     const size = Math.max(trigger.clientWidth, trigger.clientHeight);
     setRipples((prevRipples) => [

package/dist/{chunk-77EXMT5I.mjs → chunk-TMHYS2DC.mjs}

@@ -7,16 +7,16 @@ import {
 } from "./chunk-M37VBNB3.mjs";
 import {
   pagination_default
-} from "./chunk-TLOKYBIC.mjs";
+} from "./chunk-UNYKQTEP.mjs";
 import {
   checkbox_default
-} from "./chunk-TMI3QBKD.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
+} from "./chunk-H6JGLPPF.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
 
 // src/components/table/table.tsx
 import {

package/dist/{chunk-TLOKYBIC.mjs → chunk-UNYKQTEP.mjs}

@@ -4,19 +4,19 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-PYCIG6N3.mjs";
+} from "./chunk-L3WKBOWY.mjs";
 import {
   Icon_default
 } from "./chunk-FU4CDBVG.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
 } from "./chunk-CDXBML6O.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
 
 // src/components/pagination/pagination.tsx
 import { forwardRef, useMemo, useState } from "react";

package/dist/{chunk-2PZRTIRD.mjs → chunk-WKMBRUGX.mjs}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-LXHUO6VM.mjs";
 import {
   useRipple
-} from "./chunk-6PNKRBUT.mjs";
+} from "./chunk-SZL743JC.mjs";
 import {
   Icon_default
 } from "./chunk-FU4CDBVG.mjs";

package/dist/components/backdrop/backdrop.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   backdrop_default
-} from "../../chunk-NUELPELQ.mjs";
-import "../../chunk-27Y6K5NK.mjs";
+} from "../../chunk-AF4I7ZQS.mjs";
 import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   backdrop_default as default

package/dist/components/backdrop/index.mjs

@@ -2,9 +2,9 @@
 import "../../chunk-SE5TU755.mjs";
 import {
   backdrop_default
-} from "../../chunk-NUELPELQ.mjs";
-import "../../chunk-27Y6K5NK.mjs";
+} from "../../chunk-AF4I7ZQS.mjs";
 import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   backdrop_default as Backdrop

package/dist/components/breadcrumb/breadcrumb.mjs

@@ -1,21 +1,21 @@
 "use client";
 import {
   breadcrumb_default
-} from "../../chunk-H6G6INED.mjs";
+} from "../../chunk-7YCUFFKZ.mjs";
 import "../../chunk-MY5U63QO.mjs";
-import "../../chunk-XHSTRFLS.mjs";
+import "../../chunk-Q364C3FI.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-4NVZMJGS.mjs";
-import "../../chunk-2PZRTIRD.mjs";
+import "../../chunk-AX3FVJMY.mjs";
+import "../../chunk-WKMBRUGX.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
-import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-FU4CDBVG.mjs";
-import "../../chunk-DDJ2EU3P.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-DDJ2EU3P.mjs";
 import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   breadcrumb_default as default

package/dist/components/breadcrumb/index.mjs

@@ -2,21 +2,21 @@
 import "../../chunk-KYIODWXL.mjs";
 import {
   breadcrumb_default
-} from "../../chunk-H6G6INED.mjs";
+} from "../../chunk-7YCUFFKZ.mjs";
 import "../../chunk-MY5U63QO.mjs";
-import "../../chunk-XHSTRFLS.mjs";
+import "../../chunk-Q364C3FI.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-4NVZMJGS.mjs";
-import "../../chunk-2PZRTIRD.mjs";
+import "../../chunk-AX3FVJMY.mjs";
+import "../../chunk-WKMBRUGX.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
-import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-FU4CDBVG.mjs";
-import "../../chunk-DDJ2EU3P.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-DDJ2EU3P.mjs";
 import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   breadcrumb_default as Breadcrumb

package/dist/components/button/button.js

@@ -5056,7 +5056,7 @@ function useRipple(props = {}) {
   const [ripples, setRipples] = (0, import_react.useState)([]);
   const getUniqueID = (key) => `${key}-${Math.random().toString(36).substr(2, 9)}`;
   const onPress = (0, import_react.useCallback)((event) => {
-    const trigger = event.target;
+    const trigger = event.currentTarget;
     const rect = trigger.getBoundingClientRect();
     const size = Math.max(trigger.clientWidth, trigger.clientHeight);
     setRipples((prevRipples) => [

package/dist/components/button/button.mjs

@@ -1,14 +1,14 @@
 "use client";
 import {
   button_default
-} from "../../chunk-4NVZMJGS.mjs";
+} from "../../chunk-AX3FVJMY.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
-import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-FU4CDBVG.mjs";
-import "../../chunk-DDJ2EU3P.mjs";
 import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-DDJ2EU3P.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {

package/dist/components/button/icon-button.js

@@ -5056,7 +5056,7 @@ function useRipple(props = {}) {
   const [ripples, setRipples] = (0, import_react.useState)([]);
   const getUniqueID = (key) => `${key}-${Math.random().toString(36).substr(2, 9)}`;
   const onPress = (0, import_react.useCallback)((event) => {
-    const trigger = event.target;
+    const trigger = event.currentTarget;
     const rect = trigger.getBoundingClientRect();
     const size = Math.max(trigger.clientWidth, trigger.clientHeight);
     setRipples((prevRipples) => [

package/dist/components/button/icon-button.mjs

@@ -1,14 +1,14 @@
 "use client";
 import {
   icon_button_default
-} from "../../chunk-2PZRTIRD.mjs";
+} from "../../chunk-WKMBRUGX.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
-import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-FU4CDBVG.mjs";
-import "../../chunk-DDJ2EU3P.mjs";
 import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-DDJ2EU3P.mjs";
 import "../../chunk-CDXBML6O.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {

package/dist/components/button/index.js

@@ -5061,7 +5061,7 @@ function useRipple(props = {}) {
   const [ripples, setRipples] = (0, import_react.useState)([]);
   const getUniqueID = (key) => `${key}-${Math.random().toString(36).substr(2, 9)}`;
   const onPress = (0, import_react.useCallback)((event) => {
-    const trigger = event.target;
+    const trigger = event.currentTarget;
     const rect = trigger.getBoundingClientRect();
     const size = Math.max(trigger.clientWidth, trigger.clientHeight);
     setRipples((prevRipples) => [

package/dist/components/button/index.mjs

@@ -2,25 +2,25 @@
 import "../../chunk-MY5U63QO.mjs";
 import {
   text_button_default
-} from "../../chunk-XHSTRFLS.mjs";
+} from "../../chunk-Q364C3FI.mjs";
 import {
   button_group_default
 } from "../../chunk-ITWKPTSD.mjs";
 import {
   button_default
-} from "../../chunk-4NVZMJGS.mjs";
+} from "../../chunk-AX3FVJMY.mjs";
 import {
   icon_button_default
-} from "../../chunk-2PZRTIRD.mjs";
+} from "../../chunk-WKMBRUGX.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
-import "../../chunk-6PNKRBUT.mjs";
+import "../../chunk-SZL743JC.mjs";
 import "../../chunk-ZYIIXWVY.mjs";
 import "../../chunk-FU4CDBVG.mjs";
-import "../../chunk-DDJ2EU3P.mjs";
-import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-E3G5QXSH.mjs";
+import "../../chunk-DDJ2EU3P.mjs";
 import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   button_default as Button,

package/dist/components/button/text-button.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   text_button_default
-} from "../../chunk-XHSTRFLS.mjs";
-import "../../chunk-27Y6K5NK.mjs";
+} from "../../chunk-Q364C3FI.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-CDXBML6O.mjs";
+import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   text_button_default as default