@deepnoid/ui 0.1.180 → 0.1.182

package/dist/{chunk-GWHUQUKA.mjs → chunk-6WD32ERF.mjs}

@@ -63,8 +63,8 @@ var SimpleBarChartComponent = forwardRef((originalProps, ref) => {
     const { payload, x, y } = e;
     if (!payload) return;
     setTooltipState({
-      x,
-      y,
+      barX: x,
+      barY: y - 20,
       value: payload.value,
       label: payload.title
     });
@@ -107,7 +107,7 @@ var SimpleBarChartComponent = forwardRef((originalProps, ref) => {
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
     const chartWidth = chartRect.width;
     const tooltipWidth = tooltipRect.width;
-    let left = tooltipState.x - tooltipWidth / 2;
+    let left = tooltipState.barX - tooltipWidth / 2;
     const padding = 8;
     if (left < padding) {
       left = padding;
@@ -116,82 +116,96 @@ var SimpleBarChartComponent = forwardRef((originalProps, ref) => {
     }
     setTooltipLeft(left);
   }, [tooltipState]);
-  return /* @__PURE__ */ jsxs("div", { ref: chartRef, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), onMouseLeave: handleMouseLeave, children: [
-    label && /* @__PURE__ */ jsx("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
-    /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ jsxs(
-      BarChart,
-      {
-        data,
-        margin: { left: 0, right: 0, top: 0, bottom: 0 },
-        barSize: 10,
-        barGap,
-        className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
-        children: [
-          /* @__PURE__ */ jsx(
-            CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "4 4",
-              className: "stroke-neutral-light",
-              verticalPoints: tickPositions
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            CartesianGrid,
-            {
-              vertical: true,
-              horizontal: false,
-              strokeDasharray: "0",
-              strokeWidth: 2,
-              className: "stroke-neutral-light",
-              verticalPoints: [0]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            XAxis,
-            {
-              dataKey: "title",
-              axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
-              tickLine: false,
-              tick: CustomTick,
-              padding: { left: 0, right: 0 }
-            }
-          ),
-          /* @__PURE__ */ jsx(YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
-          /* @__PURE__ */ jsx(
-            Bar,
-            {
-              dataKey: "value",
-              fill: "#C7E5FA",
-              shape: CustomBarShape,
-              onMouseEnter: handleMouseEnter,
-              onMouseLeave: handleMouseLeave
-            }
-          )
-        ]
-      }
-    ) }),
-    tooltipFormatter && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: tooltipRef,
-        style: {
-          position: "absolute",
-          left: tooltipLeft + 5,
-          top: (tooltipState == null ? void 0 : tooltipState.y) ? tooltipState.y - 20 : 0,
-          pointerEvents: "none",
-          zIndex: 10,
-          opacity: tooltipState ? 1 : 0,
-          transition: "opacity 0.1s ease-out",
-          visibility: tooltipState ? "visible" : "hidden",
-          width: "fit-content",
-          whiteSpace: "nowrap"
-        },
-        children: tooltipState && tooltipFormatter(tooltipState)
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: chartRef,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: (e) => {
+        const target = e.target;
+        if (!target.closest('[data-testid="recharts-bar-rectangle"]') && !target.closest(".recharts-bar-rectangle") && target.tagName !== "path") {
+          setTooltipState(null);
+        }
+      },
+      children: [
+        label && /* @__PURE__ */ jsx("p", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: 140, children: /* @__PURE__ */ jsxs(
+          BarChart,
+          {
+            data,
+            margin: { left: 0, right: 0, top: 0, bottom: 0 },
+            barSize: 10,
+            barGap,
+            className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+            children: [
+              /* @__PURE__ */ jsx(
+                CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "4 4",
+                  className: "stroke-neutral-light",
+                  verticalPoints: tickPositions
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "0",
+                  strokeWidth: 2,
+                  className: "stroke-neutral-light",
+                  verticalPoints: [0]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                XAxis,
+                {
+                  dataKey: "title",
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomTick,
+                  padding: { left: 0, right: 0 }
+                }
+              ),
+              /* @__PURE__ */ jsx(YAxis, { hide: true, ticks: yAxisTicks, domain: yAxisDomain }),
+              /* @__PURE__ */ jsx(
+                Bar,
+                {
+                  dataKey: "value",
+                  fill: "#C7E5FA",
+                  shape: CustomBarShape,
+                  onMouseEnter: handleMouseEnter,
+                  onMouseLeave: handleMouseLeave
+                }
+              )
+            ]
+          }
+        ) }),
+        tooltipFormatter && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: tooltipRef,
+            style: {
+              position: "absolute",
+              left: tooltipLeft + 5,
+              top: (tooltipState == null ? void 0 : tooltipState.barY) || 0,
+              pointerEvents: "none",
+              zIndex: 10,
+              opacity: tooltipState ? 1 : 0,
+              transition: "opacity 0.1s ease-out",
+              visibility: tooltipState ? "visible" : "hidden",
+              width: "fit-content",
+              whiteSpace: "nowrap"
+            },
+            children: tooltipState && tooltipFormatter(tooltipState)
+          }
+        )
+      ]
+    }
+  );
 });
 SimpleBarChartComponent.displayName = "simpleBarChart";
 var simpleBarChart_default = SimpleBarChartComponent;

package/dist/{chunk-ADU7DFVK.mjs → chunk-GPJVGQ5W.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   progress_default
-} from "./chunk-KH63CD55.mjs";
+} from "./chunk-ACZ3DQVT.mjs";
 import {
   input_default
-} from "./chunk-RXDRG6MC.mjs";
+} from "./chunk-7H6U5XJA.mjs";
 import {
   button_default
 } from "./chunk-SRCCJ4CV.mjs";
@@ -39,6 +39,7 @@ function FileUpload({
   const [message, setMessage] = useState(errorMessage);
   const [displayFileName, setDisplayFileName] = useState(() => (defaultFile == null ? void 0 : defaultFile.name) || "");
   const [hasUploadedFile, setHasUploadedFile] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
   const slots = fileUploadStyle();
   const handleButtonClick = () => {
     var _a;
@@ -57,11 +58,13 @@ function FileUpload({
   const startUploadSimulation = (file) => {
     let progress = 0;
     setUploadProgress(0);
+    setIsUploading(true);
     uploadIntervalRef.current = window.setInterval(() => {
       progress += 10;
       setUploadProgress(progress);
       if (progress >= 100) {
         clearInterval(uploadIntervalRef.current);
+        setIsUploading(false);
         onFileUpload == null ? void 0 : onFileUpload(file);
       }
     }, 100);
@@ -76,6 +79,7 @@ function FileUpload({
       setCurrentFile(null);
       setDisplayFileName((defaultFile == null ? void 0 : defaultFile.name) || "");
       setHasUploadedFile(false);
+      setIsUploading(false);
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
@@ -96,6 +100,7 @@ function FileUpload({
     setMessage("");
     setDisplayFileName((defaultFile == null ? void 0 : defaultFile.name) || "");
     setHasUploadedFile(false);
+    setIsUploading(false);
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
@@ -149,6 +154,7 @@ function FileUpload({
           variant: "outline",
           onClick: handleButtonClick,
           disabled: !!(currentFile && hasUploadedFile),
+          isLoading: isUploading,
           children: buttonText
         }
       ),

package/dist/{chunk-RMZ3ZIP7.mjs → chunk-KDBM7UVG.mjs}

@@ -1,10 +1,10 @@
 "use client";
+import {
+  text_button_default
+} from "./chunk-NDNIAALB.mjs";
 import {
   Icon_default
 } from "./chunk-B4YBLIBE.mjs";
-import {
-  text_button_default
-} from "./chunk-4LUASWAN.mjs";
 import {
   tv
 } from "./chunk-U4DJHAM5.mjs";

package/dist/{chunk-SAWYH3JL.mjs → chunk-M5ZLURXE.mjs}

@@ -8,7 +8,10 @@ import {
 } from "./chunk-XZYQFBCT.mjs";
 import {
   input_default
-} from "./chunk-RXDRG6MC.mjs";
+} from "./chunk-7H6U5XJA.mjs";
+import {
+  text_button_default
+} from "./chunk-NDNIAALB.mjs";
 import {
   button_default
 } from "./chunk-SRCCJ4CV.mjs";
@@ -18,9 +21,6 @@ import {
 import {
   Icon_default
 } from "./chunk-B4YBLIBE.mjs";
-import {
-  text_button_default
-} from "./chunk-4LUASWAN.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";

package/dist/{chunk-2H5EBNCD.mjs → chunk-SX2FQY4L.mjs}

@@ -1,19 +1,19 @@
 "use client";
 import {
   select_default
-} from "./chunk-4EELFA6L.mjs";
+} from "./chunk-LE7PGMCV.mjs";
 import {
   Icon_default
 } from "./chunk-B4YBLIBE.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
 } from "./chunk-U4DJHAM5.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
 
 // src/components/picker/timePicker.tsx
 import { forwardRef, useCallback, useMemo, useState, useRef } from "react";

package/dist/{chunk-MU6QDNYC.mjs → chunk-W67QZ4OB.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   backdrop_default
-} from "./chunk-IH3BJRTV.mjs";
+} from "./chunk-4X35QQTI.mjs";
 import {
   button_default
 } from "./chunk-SRCCJ4CV.mjs";

package/dist/chunk-WKTRWHDA.mjs

@@ -0,0 +1,264 @@
+"use client";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
+import {
+  tv
+} from "./chunk-U4DJHAM5.mjs";
+
+// src/components/charts/barChart.tsx
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { XAxis, YAxis, ResponsiveContainer, CartesianGrid, BarChart, Bar } from "recharts";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BarChartComponent = forwardRef((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
+  const {
+    data = [],
+    label,
+    classNames,
+    yAxisTicks = [0, 20, 40, 60, 80, 100],
+    yAxisTickFormatter = (value) => `${value}`,
+    yAxisDomain = [-6, 110],
+    barGap = 20,
+    tooltipFormatter
+  } = { ...props, ...variantProps };
+  const slots = useMemo(() => barChartStyle({ ...variantProps }), [variantProps]);
+  const chartRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const [tooltipLeft, setTooltipLeft] = useState(0);
+  const [tickPositions, setTickPositions] = useState([]);
+  const tickRef = useRef([]);
+  const [tooltipState, setTooltipState] = useState(null);
+  const handleMouseEnter = (e, dataKey) => {
+    if (!tooltipFormatter || !chartRef.current) return;
+    const { payload, x, y } = e;
+    if (!payload || !payload[dataKey]) return;
+    setTooltipState({
+      barX: x,
+      barY: y - 10,
+      value: payload[dataKey],
+      dataKey,
+      label: payload.title
+    });
+  };
+  const handleMouseLeave = () => {
+    setTooltipState(null);
+  };
+  const CustomBarShape = ({ x, y, width, height, fill }) => {
+    const radius = 5;
+    const extraHeight = 10;
+    const adjustedHeight = height + extraHeight;
+    const adjustedY = y;
+    const bottomY = adjustedY + adjustedHeight;
+    return height ? /* @__PURE__ */ 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__ */ jsx("rect", { x, y, width, height: 0, fill });
+  };
+  const CustomTick = ({ x, y, payload }) => {
+    if (x !== void 0) tickRef.current.push(x);
+    return /* @__PURE__ */ jsx(
+      "text",
+      {
+        x,
+        y: y + 14,
+        textAnchor: "middle",
+        fontSize: 12,
+        fontWeight: 700,
+        fill: "currentColor",
+        className: "text-body-foreground",
+        children: payload.value
+      }
+    );
+  };
+  const CustomYAxisTick = ({ x, y, payload }) => /* @__PURE__ */ jsx(
+    "text",
+    {
+      x: x - 10,
+      y,
+      textAnchor: "middle",
+      fontSize: 12,
+      fontWeight: 700,
+      fill: "currentColor",
+      className: "text-body-foreground",
+      dy: 4,
+      children: yAxisTickFormatter(payload.value)
+    }
+  );
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
+      const mids = [];
+      for (let i = 0; i < unique.length - 1; i++) {
+        mids.push((unique[i] + unique[i + 1]) / 2);
+      }
+      setTickPositions(mids);
+      tickRef.current = [];
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [data]);
+  useLayoutEffect(() => {
+    if (!tooltipState || !chartRef.current || !tooltipRef.current) return;
+    const chartRect = chartRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const chartWidth = chartRect.width;
+    const tooltipWidth = tooltipRect.width;
+    let left = tooltipState.barX - tooltipWidth / 2;
+    const padding = 8;
+    if (left < padding) {
+      left = padding;
+    } else if (left + tooltipWidth > chartWidth - padding) {
+      left = chartWidth - tooltipWidth - padding;
+    }
+    setTooltipLeft(left);
+  }, [tooltipState]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: chartRef,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      onMouseLeave: handleMouseLeave,
+      onMouseMove: (e) => {
+        const target = e.target;
+        if (!target.closest('[data-testid="recharts-bar-rectangle"]') && !target.closest(".recharts-bar-rectangle") && target.tagName !== "path") {
+          setTooltipState(null);
+        }
+      },
+      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: -20 },
+            barSize: 20,
+            barGap,
+            className: "[&_.recharts-surface]:outline-none [&_.recharts-surface]:focus:outline-none",
+            children: [
+              /* @__PURE__ */ jsxs("defs", { children: [
+                /* @__PURE__ */ jsxs("linearGradient", { id: "blueGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#DEC1FA" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#3F9CF2" })
+                ] }),
+                /* @__PURE__ */ jsxs("linearGradient", { id: "greenGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#C2E59C" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#64B3F4" })
+                ] }),
+                /* @__PURE__ */ jsxs("linearGradient", { id: "pinkGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#DDD6F3" }),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#FAACA8" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                CartesianGrid,
+                {
+                  vertical: true,
+                  horizontal: false,
+                  strokeDasharray: "4 4",
+                  className: "stroke-neutral-light",
+                  verticalPoints: tickPositions
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                XAxis,
+                {
+                  dataKey: "title",
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomTick,
+                  padding: { left: 0, right: 0 }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                YAxis,
+                {
+                  axisLine: { stroke: "#DFE2E7", strokeWidth: 1 },
+                  tickLine: false,
+                  tick: CustomYAxisTick,
+                  ticks: yAxisTicks,
+                  domain: yAxisDomain
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Bar,
+                {
+                  dataKey: "blue",
+                  fill: "url(#blueGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "blue"),
+                  onMouseLeave: handleMouseLeave
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Bar,
+                {
+                  dataKey: "green",
+                  fill: "url(#greenGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "green"),
+                  onMouseLeave: handleMouseLeave
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Bar,
+                {
+                  dataKey: "pink",
+                  fill: "url(#pinkGradient)",
+                  shape: CustomBarShape,
+                  onMouseEnter: (e) => handleMouseEnter(e, "pink"),
+                  onMouseLeave: handleMouseLeave
+                }
+              )
+            ]
+          }
+        ) }),
+        tooltipFormatter && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: tooltipRef,
+            style: {
+              position: "absolute",
+              left: tooltipLeft + 10,
+              top: (tooltipState == null ? void 0 : tooltipState.barY) || 0,
+              pointerEvents: "none",
+              zIndex: 10,
+              opacity: tooltipState ? 1 : 0,
+              transition: "opacity 0.1s ease-out",
+              visibility: tooltipState ? "visible" : "hidden",
+              width: "fit-content",
+              whiteSpace: "nowrap"
+            },
+            children: tooltipState && tooltipFormatter(tooltipState)
+          }
+        )
+      ]
+    }
+  );
+});
+BarChartComponent.displayName = "barChart";
+var barChart_default = BarChartComponent;
+var barChartStyle = tv({
+  slots: {
+    base: ["flex", "flex-col", "gap-[10px]", "select-none", "relative"],
+    label: ["text-md", "font-bold", "text-body-foreground"]
+  },
+  variants: {},
+  defaultVariants: {}
+});
+function BarChartTooltip({ className = "", children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `text-md text-common-white bg-common-black flex max-w-[160px] whitespace-nowrap rounded-[5px] px-[10px] py-[6px] text-center font-bold ${className}`,
+      children
+    }
+  );
+}
+
+export {
+  barChart_default,
+  BarChartTooltip
+};

package/dist/{chunk-7C7RHDHV.mjs → chunk-XZTVXEOD.mjs}

@@ -4,19 +4,19 @@ import {
 } from "./chunk-F3HENRVM.mjs";
 import {
   input_default
-} from "./chunk-RXDRG6MC.mjs";
+} from "./chunk-7H6U5XJA.mjs";
 import {
   Icon_default
 } from "./chunk-B4YBLIBE.mjs";
+import {
+  clsx
+} from "./chunk-27Y6K5NK.mjs";
 import {
   mapPropsVariants
 } from "./chunk-E3G5QXSH.mjs";
 import {
   tv
 } from "./chunk-U4DJHAM5.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
 
 // src/components/pagination/pagination.tsx
 import { forwardRef, useMemo, useState } from "react";

package/dist/{chunk-5S4NCYZF.mjs → chunk-YTW5HJJH.mjs}

@@ -1,19 +1,19 @@
 "use client";
 import {
   pagination_default
-} from "./chunk-7C7RHDHV.mjs";
-import {
-  checkbox_default
-} from "./chunk-OEIEALIP.mjs";
+} from "./chunk-XZTVXEOD.mjs";
 import {
   scrollArea_default
 } from "./chunk-EWS3FESG.mjs";
 import {
-  mapPropsVariants
-} from "./chunk-E3G5QXSH.mjs";
+  checkbox_default
+} from "./chunk-3DCUMRYP.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
+import {
+  mapPropsVariants
+} from "./chunk-E3G5QXSH.mjs";
 
 // src/components/table/table.tsx
 import {

package/dist/components/backdrop/backdrop.mjs

@@ -1,9 +1,9 @@
 "use client";
 import {
   backdrop_default
-} from "../../chunk-IH3BJRTV.mjs";
-import "../../chunk-U4DJHAM5.mjs";
+} from "../../chunk-4X35QQTI.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-U4DJHAM5.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-IH3BJRTV.mjs";
-import "../../chunk-U4DJHAM5.mjs";
+} from "../../chunk-4X35QQTI.mjs";
 import "../../chunk-27Y6K5NK.mjs";
+import "../../chunk-U4DJHAM5.mjs";
 import "../../chunk-AC6TWLRT.mjs";
 export {
   backdrop_default as Backdrop