@deepnoid/ui 0.1.97 → 0.1.99

package/dist/index.js

@@ -6494,7 +6494,7 @@ var iconButtonStyle = tv({
       variant: "outline",
       color: "neutral",
       class: {
-        base: ["bg-body-background", "!border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
+        base: ["bg-body-background", "!border-neutral-light", "text-neutral-main", "hover:bg-neutral-soft"]
       }
     },
     {
@@ -7055,12 +7055,10 @@ var inputStyle = tv(
       errorMessage: ["text-danger-main"],
       readonlyWrapper: [
         "pointer-events-none",
-        "!text-body-foreground",
-        "placeholder:!text-body-foreground",
-        "group-has-[p.error]/input:!text-danger-main",
-        "group-has-[p.error]/input:placeholder:!text-danger-main",
-        "[&>input]:!text-body-foreground",
-        "[&>input]:placeholder:!text-body-foreground"
+        "text-body-foreground",
+        "placeholder:text-body-foreground",
+        "[&>input]:text-body-foreground",
+        "[&>input]:placeholder:text-body-foreground"
       ],
       readonly: []
     },
@@ -7169,6 +7167,16 @@ var inputStyle = tv(
           helperMessage: ["!text-neutral-light"],
           errorMessage: ["!text-danger-light"]
         }
+      },
+      readonly: {
+        true: {
+          readonlyWrapper: ["pointer-events-none"],
+          input: [
+            "group-has-[p.error]/input:!text-danger-main",
+            "group-has-[p.error]/input:placeholder:!text-danger-main"
+          ],
+          content: ["group-has-[p.error]/input:!text-danger-main"]
+        }
       }
     },
     compoundVariants: [
@@ -7238,6 +7246,22 @@ var inputStyle = tv(
             "group-has-[p.error]/input:placeholder:!text-danger-light"
           ]
         }
+      },
+      {
+        readonly: true,
+        color: "primary",
+        class: {
+          input: ["!text-primary-main", "placeholder:!text-primary-main"],
+          content: ["!text-primary-main"]
+        }
+      },
+      {
+        readonly: true,
+        color: "secondary",
+        class: {
+          input: ["!text-secondary-main", "placeholder:!text-secondary-main"],
+          content: ["!text-secondary-main"]
+        }
       }
     ],
     defaultVariants: {
@@ -11686,13 +11710,164 @@ var treeStyle = tv({
 });
 
 // src/components/fileUpload/fileUpload.tsx
+var import_react38 = require("react");
+var import_tailwind_variants34 = require("tailwind-variants");
+
+// src/components/progress/progress.tsx
+var import_react37 = require("react");
+
+// src/hooks/useIsMounted.ts
 var import_react36 = require("react");
-var import_tailwind_variants33 = require("tailwind-variants");
+function useIsMounted(props = {}) {
+  const { rerender = false, delay = 0 } = props;
+  const isMountedRef = (0, import_react36.useRef)(false);
+  const [isMounted, setIsMounted] = (0, import_react36.useState)(false);
+  (0, import_react36.useEffect)(() => {
+    isMountedRef.current = true;
+    let timer = null;
+    if (rerender) {
+      if (delay > 0) {
+        timer = setTimeout(() => {
+          setIsMounted(true);
+        }, delay);
+      } else {
+        setIsMounted(true);
+      }
+    }
+    return () => {
+      isMountedRef.current = false;
+      if (rerender) {
+        setIsMounted(false);
+      }
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [rerender]);
+  return [(0, import_react36.useCallback)(() => isMountedRef.current, []), isMounted];
+}
+
+// src/components/progress/progress.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
+var Progress = (originalProps) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, progressStyle.variantKeys);
+  const { children, classNames, value = 0, minValue = 0, maxValue = 100, ...progressProps } = props;
+  const isIndeterminate = originalProps.isIndeterminate;
+  const [, isMounted] = useIsMounted({
+    rerender: true,
+    delay: 100
+  });
+  const selfMounted = variantProps.disableAnimation ? true : isMounted;
+  const percentage = (0, import_react37.useMemo)(
+    () => isIndeterminate || !selfMounted ? void 0 : clampPercentage((value - minValue) / (maxValue - minValue) * 100),
+    [selfMounted, isIndeterminate, value, minValue, maxValue]
+  );
+  const slots = (0, import_react37.useMemo)(() => progressStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: slots.track({ class: classNames == null ? void 0 : classNames.track }), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "div",
+    {
+      className: slots.indicator({ class: classNames == null ? void 0 : classNames.indicator }),
+      style: {
+        transform: `translateX(-${100 - (percentage || 0)}%)`
+      }
+    }
+  ) }) });
+};
+var progress_default = Progress;
+var progressStyle = tv({
+  slots: {
+    base: ["flex flex-col gap-2 w-full"],
+    track: ["z-0", "relative", "bg-neutral-soft", "overflow-hidden", "rtl:rotate-180"],
+    indicator: ["h-full"],
+    value: ""
+  },
+  variants: {
+    color: {
+      primary: {
+        indicator: ["bg-gradient-to-r from-primary-light via-primary-light to-primary-main"]
+      },
+      secondary: {
+        indicator: ["bg-gradient-to-r from-secondary-light via-secondary-light to-secondary-main"]
+      },
+      neutral: {
+        indicator: ["bg-gradient-to-r from-neutral-light via-neutral-light to-neutral-main"]
+      },
+      info: {
+        indicator: ["bg-gradient-to-r from-info-light via-info-light to-info-main"]
+      },
+      success: {
+        indicator: ["bg-gradient-to-r from-success-light via-success-light to-success-main"]
+      },
+      warning: {
+        indicator: ["bg-gradient-to-r from-warning-light via-warning-light to-warning-main"]
+      },
+      danger: {
+        indicator: ["bg-gradient-to-r from-danger-light via-danger-light to-danger-main"]
+      }
+    },
+    size: {
+      sm: {
+        track: ["h-[4px]", "rounded-sm"],
+        indicator: "rounded-sm"
+      },
+      md: {
+        track: ["h-[6px]", "rounded-md"],
+        indicator: "rounded-md"
+      },
+      lg: {
+        track: ["h-[8px]", "rounded-lg"],
+        indicator: "rounded-lg"
+      },
+      xl: {
+        track: ["h-[10px]", "rounded-xl"],
+        indicator: "rounded-xl"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-disabled cursor-not-allowed"
+      }
+    },
+    disableAnimation: {
+      true: {},
+      false: {
+        indicator: "transition-transform !duration-500"
+      }
+    },
+    isIndeterminate: {
+      true: {
+        indicator: ["absolute", "w-full", "origin-left", "animate-indeterminate-bar"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    isDisabled: false,
+    disableAnimation: false,
+    isIndeterminate: false
+  },
+  compoundVariants: [
+    {
+      isIndeterminate: true,
+      disableAnimation: false,
+      className: {
+        indicator: "!transition-none motion-reduce:transition-none"
+      }
+    }
+  ]
+});
+var clampPercentage = (value) => {
+  return Math.min(100, Math.max(0, value));
+};
+
+// src/components/fileUpload/fileUpload.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function FileUpload({
   buttonText,
   maxSizeMB = 10,
   placeholder,
+  errorMessage,
   accept = [],
   acceptErrorMessage = "The file type is not allowed.",
   sizeErrorMessage = `File is too large.`,
@@ -11702,11 +11877,11 @@ function FileUpload({
   name,
   classNames
 }) {
-  const fileInputRef = (0, import_react36.useRef)(null);
-  const uploadIntervalRef = (0, import_react36.useRef)(null);
-  const [file, setFile] = (0, import_react36.useState)(null);
-  const [uploadProgress, setUploadProgress] = (0, import_react36.useState)(0);
-  const [errorMessage, setErrorMessage] = (0, import_react36.useState)("");
+  const fileInputRef = (0, import_react38.useRef)(null);
+  const uploadIntervalRef = (0, import_react38.useRef)(null);
+  const [file, setFile] = (0, import_react38.useState)(null);
+  const [uploadProgress, setUploadProgress] = (0, import_react38.useState)(0);
+  const [message, setMessage] = (0, import_react38.useState)(errorMessage);
   const slots = fileUploadStyle();
   const handleButtonClick = () => {
     var _a;
@@ -11740,12 +11915,12 @@ function FileUpload({
     if (!selectedFile) return;
     const error = validateFile(selectedFile);
     if (error) {
-      setErrorMessage(error);
+      setMessage(error);
       setFile(null);
       return;
     }
     setFile(selectedFile);
-    setErrorMessage("");
+    setMessage("");
     startUploadSimulation(selectedFile);
   };
   const handleCancelUpload = () => {
@@ -11754,20 +11929,34 @@ function FileUpload({
     }
     setFile(null);
     setUploadProgress(0);
-    setErrorMessage("");
+    setMessage("");
   };
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     return () => {
       if (uploadIntervalRef.current) {
         clearInterval(uploadIntervalRef.current);
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: slots.inputWrapper(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(input_default, { name, readOnly: true, variant: "outline", full: true, placeholder, defaultValue: file == null ? void 0 : file.name }),
-        file && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  (0, import_react38.useEffect)(() => {
+    setMessage(errorMessage);
+  }, [setMessage, errorMessage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: slots.container({ class: classNames == null ? void 0 : classNames.container }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: slots.inputWrapper(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          input_default,
+          {
+            name,
+            readOnly: true,
+            variant: "outline",
+            full: true,
+            placeholder,
+            defaultValue: file == null ? void 0 : file.name,
+            errorMessage: message
+          }
+        ),
+        file && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           icon_button_default,
           {
             name: "close",
@@ -11779,24 +11968,21 @@ function FileUpload({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(button_default, { type: "button", variant: "outline", onClick: handleButtonClick, children: buttonText }),
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { ref: fileInputRef, type: "file", hidden: true, accept: accept.join(","), onChange: handleFileChange })
     ] }),
-    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: slots.progressBarContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: slots.progressBar(), style: { width: `${uploadProgress}%` } }) }),
-    !errorMessage && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: slots.helperMessage(), children: helperMessage }),
-    errorMessage && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: slots.errorMessage(), children: errorMessage })
+    showProgress && file && uploadProgress < 100 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(progress_default, { value: uploadProgress }),
+    !message && helperMessage && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: slots.helperMessage(), children: helperMessage })
   ] });
 }
 FileUpload.displayName = "FileUpload";
 var fileUpload_default = FileUpload;
-var fileUploadStyle = (0, import_tailwind_variants33.tv)({
+var fileUploadStyle = (0, import_tailwind_variants34.tv)({
   slots: {
     base: ["flex", "flex-col", "gap-[5px]"],
-    container: ["flex", "items-center", "gap-[10px]"],
+    container: ["flex", "gap-[10px]"],
     inputWrapper: ["relative", "flex-1"],
     cancelButton: ["absolute", "top-1/2", "right-0", "-translate-y-1/2"],
-    progressBarContainer: ["w-full", "h-[5px]", "bg-neutral-light", "rounded-full", "overflow-hidden"],
-    progressBar: ["h-full", "bg-primary-main", "transition-all"],
     errorMessage: ["text-danger-main", "text-sm"],
     helperMessage: ["text-neutral-main", "text-sm"]
   }
@@ -11804,12 +11990,12 @@ var fileUploadStyle = (0, import_tailwind_variants33.tv)({
 
 // src/components/charts/circularProgress.tsx
 var import_recharts = require("recharts");
-var import_react37 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var CircularProgress = (0, import_react37.forwardRef)((originalProps, ref) => {
+var import_react39 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var CircularProgress = (0, import_react39.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, circularProgressStyle.variantKeys);
   const { label, size = 150, percentage, unit, classNames } = { ...props, ...variantProps };
-  const slots = (0, import_react37.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react39.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
   const data = [
     {
       name: label,
@@ -11819,9 +12005,9 @@ var CircularProgress = (0, import_react37.forwardRef)((originalProps, ref) => {
   const BAR_SIZE = 24;
   const OUTER_RADIUS = 88;
   const INNER_RADIUS = OUTER_RADIUS - BAR_SIZE;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative", style: { width: size, height: size }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
         import_recharts.RadialBarChart,
         {
           width: size,
@@ -11833,7 +12019,7 @@ var CircularProgress = (0, import_react37.forwardRef)((originalProps, ref) => {
           startAngle: 90,
           endAngle: -270,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               "circle",
               {
                 cx: size / 2,
@@ -11843,8 +12029,8 @@ var CircularProgress = (0, import_react37.forwardRef)((originalProps, ref) => {
                 fill: "currentColor"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_recharts.PolarAngleAxis, { type: "number", domain: [0, 100], angleAxisId: 0, tick: false }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_recharts.PolarAngleAxis, { type: "number", domain: [0, 100], angleAxisId: 0, tick: false }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               import_recharts.RadialBar,
               {
                 dataKey: "value",
@@ -11856,12 +12042,12 @@ var CircularProgress = (0, import_react37.forwardRef)((originalProps, ref) => {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: slots.text({ class: classNames == null ? void 0 : classNames.text }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: slots.text({ class: classNames == null ? void 0 : classNames.text }), children: [
         percentage,
         unit
       ] }) })
     ] }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label })
   ] });
 });
 CircularProgress.displayName = "CircularProgress";
@@ -11899,26 +12085,26 @@ var circularProgressStyle = tv({
 });
 
 // src/components/charts/areaChart.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_recharts2 = require("recharts");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var AreaChartComponent = (0, import_react38.forwardRef)((originalProps, ref) => {
-  const uniqueId = (0, import_react38.useId)();
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var AreaChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
+  const uniqueId = (0, import_react40.useId)();
   const [props, variantProps] = mapPropsVariants(originalProps, areaChartStyle.variantKeys);
   const { data, label, color = "primary", classNames } = { ...props, ...variantProps };
-  const slots = (0, import_react38.useMemo)(() => areaChartStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react40.useMemo)(() => areaChartStyle({ ...variantProps }), [variantProps]);
   const COLOR_MAP = {
     primary: "#3F9CF2",
     danger: "#FF4684"
   };
-  const colorHex = (0, import_react38.useMemo)(() => COLOR_MAP[color], [color]);
-  const [tickPositions, setTickPositions] = (0, import_react38.useState)([]);
-  const tickRef = (0, import_react38.useRef)([]);
+  const colorHex = (0, import_react40.useMemo)(() => COLOR_MAP[color], [color]);
+  const [tickPositions, setTickPositions] = (0, import_react40.useState)([]);
+  const tickRef = (0, import_react40.useRef)([]);
   const CustomTick = ({ x, y, payload }) => {
     if (x !== void 0) {
       tickRef.current.push(x);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "text",
       {
         x,
@@ -11932,7 +12118,7 @@ var AreaChartComponent = (0, import_react38.forwardRef)((originalProps, ref) =>
       }
     );
   };
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
       const mids = [];
@@ -11947,19 +12133,19 @@ var AreaChartComponent = (0, import_react38.forwardRef)((originalProps, ref) =>
   const CustomDotWithShadow = (props2) => {
     const { cx, cy, fill, stroke } = props2;
     if (cx === void 0 || cy === void 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx, cy, r: 8, fill, opacity: 0.2 }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx, cy, r: 3.5, fill, stroke, strokeWidth: 2 })
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx, cy, r: 8, fill, opacity: 0.2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("circle", { cx, cy, r: 3.5, fill, stroke, strokeWidth: 2 })
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_recharts2.AreaChart, { data, margin: { left: -30 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_recharts2.AreaChart, { data, margin: { left: -30 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("linearGradient", { id: `colorGradient-${uniqueId}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { offset: "5%", stopColor: colorHex, stopOpacity: 0.3 }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("stop", { offset: "95%", stopColor: colorHex, stopOpacity: 0 })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         import_recharts2.CartesianGrid,
         {
           vertical: true,
@@ -11969,7 +12155,7 @@ var AreaChartComponent = (0, import_react38.forwardRef)((originalProps, ref) =>
           verticalPoints: tickPositions
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         import_recharts2.XAxis,
         {
           dataKey: "name",
@@ -11979,7 +12165,7 @@ var AreaChartComponent = (0, import_react38.forwardRef)((originalProps, ref) =>
           padding: { left: 35.5, right: 35.5 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         import_recharts2.YAxis,
         {
           axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
@@ -11995,7 +12181,7 @@ var AreaChartComponent = (0, import_react38.forwardRef)((originalProps, ref) =>
           domain: [-6, 110]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         import_recharts2.Area,
         {
           type: "monotone",
@@ -12003,7 +12189,7 @@ var AreaChartComponent = (0, import_react38.forwardRef)((originalProps, ref) =>
           stroke: colorHex,
           strokeWidth: 2,
           fill: `url(#colorGradient-${uniqueId})`,
-          dot: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
+          dot: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CustomDotWithShadow, { stroke: colorHex, fill: colorHex }),
           activeDot: { r: 7, fill: colorHex }
         }
       )
@@ -12035,20 +12221,20 @@ var areaChartStyle = tv({
 });
 
 // src/components/charts/barChart.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 var import_recharts3 = require("recharts");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var BarChartComponent = (0, import_react39.forwardRef)((originalProps, ref) => {
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var BarChartComponent = (0, import_react41.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
   const { data, label, classNames } = { ...props, ...variantProps };
-  const slots = (0, import_react39.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
+  const slots = (0, import_react41.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
   const COLOR_MAP = {
     primary: "#C7E5FA",
     secondary: "#DEC1FA",
     warning: "#F9C967"
   };
-  const [tickPositions, setTickPositions] = (0, import_react39.useState)([]);
-  const tickRef = (0, import_react39.useRef)([]);
+  const [tickPositions, setTickPositions] = (0, import_react41.useState)([]);
+  const tickRef = (0, import_react41.useRef)([]);
   const CustomBarShape = (barProps) => {
     const { x, y, width, height, fill } = barProps;
     const radius = 5;
@@ -12056,19 +12242,19 @@ var BarChartComponent = (0, import_react39.forwardRef)((originalProps, ref) => {
     const adjustedHeight = height + extraHeight;
     const adjustedY = y;
     const bottomY = adjustedY + adjustedHeight;
-    return height ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return height ? /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime42.jsx)("rect", { x, y, width, height: 0, fill });
+    ) : /* @__PURE__ */ (0, import_jsx_runtime43.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_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "text",
       {
         x,
@@ -12082,7 +12268,7 @@ var BarChartComponent = (0, import_react39.forwardRef)((originalProps, ref) => {
       }
     );
   };
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
       const mids = [];
@@ -12094,10 +12280,10 @@ var BarChartComponent = (0, import_react39.forwardRef)((originalProps, ref) => {
     });
     return () => cancelAnimationFrame(raf);
   }, [data]);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_recharts3.BarChart, { data, margin: { left: -30 }, barSize: 20, barGap: 10, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_recharts3.BarChart, { data, margin: { left: -30 }, barSize: 20, barGap: 10, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         import_recharts3.CartesianGrid,
         {
           vertical: true,
@@ -12107,7 +12293,7 @@ var BarChartComponent = (0, import_react39.forwardRef)((originalProps, ref) => {
           verticalPoints: tickPositions
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         import_recharts3.XAxis,
         {
           dataKey: "name",
@@ -12117,7 +12303,7 @@ var BarChartComponent = (0, import_react39.forwardRef)((originalProps, ref) => {
           padding: { left: 32, right: 32 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
         import_recharts3.YAxis,
         {
           axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
@@ -12133,9 +12319,9 @@ var BarChartComponent = (0, import_react39.forwardRef)((originalProps, ref) => {
           domain: [-6, 110]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_recharts3.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_recharts3.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_recharts3.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.Bar, { dataKey: "avg", fill: COLOR_MAP.primary, width: 20, shape: CustomBarShape }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.Bar, { dataKey: "high", fill: COLOR_MAP.secondary, width: 20, shape: CustomBarShape }),
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.Bar, { dataKey: "low", fill: COLOR_MAP.warning, width: 20, shape: CustomBarShape })
     ] }) })
   ] });
 });
@@ -12151,154 +12337,6 @@ var barChartStyle = tv({
     color: "primary"
   }
 });
-
-// src/components/progress/progress.tsx
-var import_react41 = require("react");
-
-// src/hooks/useIsMounted.ts
-var import_react40 = require("react");
-function useIsMounted(props = {}) {
-  const { rerender = false, delay = 0 } = props;
-  const isMountedRef = (0, import_react40.useRef)(false);
-  const [isMounted, setIsMounted] = (0, import_react40.useState)(false);
-  (0, import_react40.useEffect)(() => {
-    isMountedRef.current = true;
-    let timer = null;
-    if (rerender) {
-      if (delay > 0) {
-        timer = setTimeout(() => {
-          setIsMounted(true);
-        }, delay);
-      } else {
-        setIsMounted(true);
-      }
-    }
-    return () => {
-      isMountedRef.current = false;
-      if (rerender) {
-        setIsMounted(false);
-      }
-      if (timer) {
-        clearTimeout(timer);
-      }
-    };
-  }, [rerender]);
-  return [(0, import_react40.useCallback)(() => isMountedRef.current, []), isMounted];
-}
-
-// src/components/progress/progress.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var Progress = (originalProps) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, progressStyle.variantKeys);
-  const { children, classNames, value = 0, minValue = 0, maxValue = 100, ...progressProps } = props;
-  const isIndeterminate = originalProps.isIndeterminate;
-  const [, isMounted] = useIsMounted({
-    rerender: true,
-    delay: 100
-  });
-  const selfMounted = variantProps.disableAnimation ? true : isMounted;
-  const percentage = (0, import_react41.useMemo)(
-    () => isIndeterminate || !selfMounted ? void 0 : clampPercentage((value - minValue) / (maxValue - minValue) * 100),
-    [selfMounted, isIndeterminate, value, minValue, maxValue]
-  );
-  const slots = (0, import_react41.useMemo)(() => progressStyle({ ...variantProps }), [variantProps]);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: slots.track({ class: classNames == null ? void 0 : classNames.track }), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    "div",
-    {
-      className: slots.indicator({ class: classNames == null ? void 0 : classNames.indicator }),
-      style: {
-        transform: `translateX(-${100 - (percentage || 0)}%)`
-      }
-    }
-  ) }) });
-};
-var progress_default = Progress;
-var progressStyle = tv({
-  slots: {
-    base: ["flex flex-col gap-2 w-full"],
-    track: ["z-0", "relative", "bg-neutral-soft", "overflow-hidden", "rtl:rotate-180"],
-    indicator: ["h-full"],
-    value: ""
-  },
-  variants: {
-    color: {
-      primary: {
-        indicator: ["bg-gradient-to-r from-primary-light via-primary-light to-primary-main"]
-      },
-      secondary: {
-        indicator: ["bg-gradient-to-r from-secondary-light via-secondary-light to-secondary-main"]
-      },
-      neutral: {
-        indicator: ["bg-gradient-to-r from-neutral-light via-neutral-light to-neutral-main"]
-      },
-      info: {
-        indicator: ["bg-gradient-to-r from-info-light via-info-light to-info-main"]
-      },
-      success: {
-        indicator: ["bg-gradient-to-r from-success-light via-success-light to-success-main"]
-      },
-      warning: {
-        indicator: ["bg-gradient-to-r from-warning-light via-warning-light to-warning-main"]
-      },
-      danger: {
-        indicator: ["bg-gradient-to-r from-danger-light via-danger-light to-danger-main"]
-      }
-    },
-    size: {
-      sm: {
-        track: ["h-[4px]", "rounded-sm"],
-        indicator: "rounded-sm"
-      },
-      md: {
-        track: ["h-[6px]", "rounded-md"],
-        indicator: "rounded-md"
-      },
-      lg: {
-        track: ["h-[8px]", "rounded-lg"],
-        indicator: "rounded-lg"
-      },
-      xl: {
-        track: ["h-[10px]", "rounded-xl"],
-        indicator: "rounded-xl"
-      }
-    },
-    isDisabled: {
-      true: {
-        base: "opacity-disabled cursor-not-allowed"
-      }
-    },
-    disableAnimation: {
-      true: {},
-      false: {
-        indicator: "transition-transform !duration-500"
-      }
-    },
-    isIndeterminate: {
-      true: {
-        indicator: ["absolute", "w-full", "origin-left", "animate-indeterminate-bar"]
-      }
-    }
-  },
-  defaultVariants: {
-    color: "primary",
-    size: "md",
-    isDisabled: false,
-    disableAnimation: false,
-    isIndeterminate: false
-  },
-  compoundVariants: [
-    {
-      isIndeterminate: true,
-      disableAnimation: false,
-      className: {
-        indicator: "!transition-none motion-reduce:transition-none"
-      }
-    }
-  ]
-});
-var clampPercentage = (value) => {
-  return Math.min(100, Math.max(0, value));
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,