@deepnoid/ui 0.1.181 → 0.1.183

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-HOQAQVDA.mjs → chunk-VRHMQMRO.mjs}

@@ -15,6 +15,9 @@ import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
 
+// src/components/table/table-head.tsx
+import { isValidElement, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
+
 // src/components/table/table.tsx
 import {
   forwardRef,
@@ -36,25 +39,46 @@ function TableCell({
   slots,
   classNames
 }) {
-  var _a;
+  var _a, _b;
   const value = row[column.field];
   const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
   const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
   const tdRef = useRef(null);
   const [showTitle, setShowTitle] = useState(false);
-  const checkOverflow = (el) => el.scrollWidth > el.clientWidth;
+  const checkOverflow = (el) => {
+    if (el.scrollWidth > el.clientWidth) {
+      return true;
+    }
+    const children = Array.from(el.children);
+    for (const child of children) {
+      if (child.scrollWidth > child.clientWidth) {
+        return true;
+      }
+    }
+    return false;
+  };
   useEffect(() => {
     if (tdRef.current) {
-      setShowTitle(checkOverflow(tdRef.current));
+      setTimeout(() => {
+        if (tdRef.current) {
+          setShowTitle(checkOverflow(tdRef.current));
+        }
+      }, 0);
     }
   }, [content]);
   return /* @__PURE__ */ jsx(
     "td",
     {
       ref: tdRef,
-      className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, "truncate"),
+      className: clsx(
+        slots.td(),
+        classNames == null ? void 0 : classNames.td,
+        column.className,
+        "truncate",
+        "[&>*]:block [&>*]:w-full [&>*]:truncate"
+      ),
       style: { ...getCellStyle(column), maxWidth: column.width || "150px" },
-      title: showTitle ? String(content) : void 0,
+      title: showTitle ? String(((_b = value == null ? void 0 : value.props) == null ? void 0 : _b.children) || content || "") : void 0,
       children: content
     },
     `${row.id}-${column.field}-${colIdx}-${rowIndex}`
@@ -518,20 +542,51 @@ var getCellStyle = (column) => {
 
 // src/components/table/table-head.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var TableHead = ({
+function TableHeaderCell({
+  content,
+  column,
+  isCheckbox = false,
   slots,
-  columns,
-  color,
-  size,
-  rowCheckbox = false,
-  hasCheckedRows,
-  classNames,
-  onCheckAll
-}) => {
-  const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ jsx3(
+  classNames
+}) {
+  const thRef = useRef2(null);
+  const [showTitle, setShowTitle] = useState3(false);
+  const checkOverflow = (el) => {
+    if (el.scrollWidth > el.clientWidth) {
+      return true;
+    }
+    const children = Array.from(el.children);
+    for (const child of children) {
+      if (child.scrollWidth > child.clientWidth) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const extractTextFromContent = (node) => {
+    if (typeof node === "string" || typeof node === "number") {
+      return String(node);
+    }
+    if (isValidElement(node)) {
+      return String(node.props.children || "");
+    }
+    return "";
+  };
+  useEffect3(() => {
+    if (thRef.current && !isCheckbox) {
+      setTimeout(() => {
+        if (thRef.current) {
+          setShowTitle(checkOverflow(thRef.current));
+        }
+      }, 0);
+    }
+  }, [content, isCheckbox]);
+  const titleText = !isCheckbox && showTitle ? extractTextFromContent(content) : void 0;
+  return /* @__PURE__ */ jsx3(
     "th",
     {
-      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className),
+      ref: thRef,
+      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className, !isCheckbox && "truncate"),
       style: isCheckbox ? {
         width: "40px",
         minWidth: "40px",
@@ -540,24 +595,48 @@ var TableHead = ({
         flexGrow: 0,
         boxSizing: "border-box"
       } : column ? { ...getCellStyle(column), textAlign: "center" } : void 0,
+      title: titleText,
       children: content
-    },
-    key
+    }
   );
+}
+var TableHead = ({
+  slots,
+  columns,
+  color,
+  size,
+  rowCheckbox = false,
+  hasCheckedRows,
+  classNames,
+  onCheckAll
+}) => {
   return /* @__PURE__ */ jsx3("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ jsxs3("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, idx) => renderTh(column.headerName, `${column.field}-${idx}`, column)),
-    rowCheckbox && renderTh(
-      /* @__PURE__ */ jsx3("div", { "data-checkbox": true, children: /* @__PURE__ */ jsx3(
-        checkbox_default,
-        {
-          size,
-          checked: hasCheckedRows,
-          onChange: (e) => onCheckAll(e.target.checked)
-        }
-      ) }),
-      "checkbox",
-      void 0,
-      true
+    columns.map((column, idx) => /* @__PURE__ */ jsx3(
+      TableHeaderCell,
+      {
+        content: column.headerName,
+        column,
+        slots,
+        classNames
+      },
+      `${column.field}-${idx}`
+    )),
+    rowCheckbox && /* @__PURE__ */ jsx3(
+      TableHeaderCell,
+      {
+        content: /* @__PURE__ */ jsx3("div", { "data-checkbox": true, children: /* @__PURE__ */ jsx3(
+          checkbox_default,
+          {
+            size,
+            checked: hasCheckedRows,
+            onChange: (e) => onCheckAll(e.target.checked)
+          }
+        ) }),
+        isCheckbox: true,
+        slots,
+        classNames
+      },
+      "checkbox"
     )
   ] }) });
 };

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
+};