@deepnoid/ui 0.1.126 → 0.1.127

package/dist/index.js

@@ -9065,18 +9065,57 @@ var renderColGroup = (rows) => {
   });
   const cols = [];
   for (let i = 0; i < maxCols; i++) {
-    cols.push(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("col", { style: colWidths[i] ? { width: colWidths[i] } : { width: "auto" } }, `col-${i}`));
+    cols.push(/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("col", { style: { width: colWidths[i] || "auto" } }, i));
   }
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("colgroup", { children: cols });
 };
-var DefinitionTableRow = ({ cells, className }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: `border-neutral-light border-b ${className || ""}`, children: cells.map((cell, colIndex) => {
+var getHighlightColumnIndex = (rows, key) => {
+  if (!key) return null;
+  for (const row of rows) {
+    let colIndex = 0;
+    for (const cell of row.cells) {
+      const span = cell.colSpan || 1;
+      if (cell.key === key) return colIndex;
+      colIndex += span;
+    }
+  }
+  return null;
+};
+var DefinitionTableRow = ({
+  cells,
+  className,
+  rowIndex = 0,
+  rowCount = 0,
+  highlightColumnIndex
+}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tr", { className: clsx("border-neutral-light border-b", className), children: cells.map((cell, colIndex) => {
   const isFirstCell = colIndex === 0;
-  const combinedClassName = [isFirstCell ? FIRST_CELL_WIDTH_CLASS : "", clsx(DEFAULT_CELL_CLASSES, cell.className)].filter(Boolean).join(" ");
+  const isHighlighted = colIndex === highlightColumnIndex;
+  const isFirstRow = rowIndex === 0;
+  const isLastRow = rowIndex === rowCount - 1;
+  const borderHighlightClass = isHighlighted ? clsx(
+    "border-l-[2px] border-r-[2px] border-primary-main bg-neutral-soft",
+    isFirstRow && "border-t-[2px]",
+    isLastRow && "border-b-[2px]"
+  ) : "";
+  const combinedClassName = clsx(
+    DEFAULT_CELL_CLASSES,
+    isFirstCell && FIRST_CELL_WIDTH_CLASS,
+    cell.className,
+    borderHighlightClass
+  );
   let cellStyle;
   if (isFirstCell) {
-    cellStyle = { width: "120px", minWidth: "120px", maxWidth: "120px" };
+    cellStyle = {
+      width: "120px",
+      minWidth: "120px",
+      maxWidth: "120px"
+    };
   } else if (cell.width && cell.width !== "auto") {
-    cellStyle = { width: cell.width, minWidth: cell.width, maxWidth: cell.width };
+    cellStyle = {
+      width: cell.width,
+      minWidth: cell.width,
+      maxWidth: cell.width
+    };
   } else {
     cellStyle = { width: "100%" };
   }
@@ -9092,16 +9131,30 @@ var DefinitionTableRow = ({ cells, className }) => /* @__PURE__ */ (0, import_js
     colIndex
   );
 }) });
-var DefinitionTable = (0, import_react18.forwardRef)(({ rows = [], footer, classNames }, ref) => {
-  const slots = (0, import_react18.useMemo)(() => DefinitionTableStyle(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
+var DefinitionTable = (0, import_react18.forwardRef)(
+  ({ rows = [], footer, highlightColumnKey, classNames }, ref) => {
+    const slots = (0, import_react18.useMemo)(() => DefinitionTableStyle(), []);
+    const highlightColumnIndex = (0, import_react18.useMemo)(
+      () => getHighlightColumnIndex(rows, highlightColumnKey),
+      [rows, highlightColumnKey]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: clsx(slots.base(), classNames == null ? void 0 : classNames.base), children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("table", { className: clsx(slots.table(), classNames == null ? void 0 : classNames.table), children: [
       renderColGroup(rows),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DefinitionTableRow, { ...row, className: `${row.className || ""} ${i === 0 ? "first-row" : ""}` }, i)) })
-    ] }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { children: footer })
-  ] });
-});
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        DefinitionTableRow,
+        {
+          ...row,
+          rowIndex: i,
+          rowCount: rows.length,
+          highlightColumnIndex,
+          className: row.className
+        },
+        i
+      )) }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("tfoot", { children: footer })
+    ] }) });
+  }
+);
 DefinitionTable.displayName = "DefinitionTable";
 var definition_table_default = DefinitionTable;
 var DefinitionTableStyle = tv({
@@ -12262,7 +12315,7 @@ var CircularProgress = (0, import_react38.forwardRef)((originalProps, ref) => {
                 cx: size / 2,
                 cy: size / 2,
                 r: OUTER_RADIUS + BORDER_MARGIN,
-                fill: "none",
+                fill: "#fff",
                 stroke: "#DFE2E7",
                 strokeWidth: "1"
               }
@@ -12511,19 +12564,34 @@ var import_jsx_runtime43 = require("react/jsx-runtime");
 var BarChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
   const {
-    data,
+    data = [],
     label,
     classNames,
     yAxisTicks = [0, 20, 40, 60, 80, 100],
     yAxisTickFormatter = (value) => `${value}`,
     yAxisDomain = [-6, 110],
-    customTooltip
+    tooltipFormatter
   } = { ...props, ...variantProps };
   const slots = (0, import_react40.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
   const [tickPositions, setTickPositions] = (0, import_react40.useState)([]);
   const tickRef = (0, import_react40.useRef)([]);
-  const CustomBarShape = (barProps) => {
-    const { x, y, width, height, fill } = barProps;
+  const [tooltipState, setTooltipState] = (0, import_react40.useState)(null);
+  const handleMouseEnter = (e, dataKey) => {
+    if (!tooltipFormatter) return;
+    const { payload, x, y } = e;
+    if (!payload || !payload[dataKey]) return;
+    setTooltipState({
+      x,
+      y,
+      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;
@@ -12538,9 +12606,7 @@ var BarChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
     ) : /* @__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);
-    }
+    if (x !== void 0) tickRef.current.push(x);
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "text",
       {
@@ -12555,28 +12621,20 @@ var BarChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
       }
     );
   };
-  const CustomYAxisTick = ({ x, y, payload }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      "text",
-      {
-        x: x - 10,
-        y,
-        textAnchor: "middle",
-        fontSize: 12,
-        fontWeight: 700,
-        fill: "currentColor",
-        className: "text-body-foreground",
-        dy: 4,
-        children: yAxisTickFormatter(payload.value)
-      }
-    );
-  };
-  const CustomTooltip = ({ active, payload, label: label2 }) => {
-    if (customTooltip && active && payload && payload.length) {
-      return customTooltip({ active, payload, label: label2 });
+  const CustomYAxisTick = ({ x, y, payload }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "text",
+    {
+      x: x - 10,
+      y,
+      textAnchor: "middle",
+      fontSize: 12,
+      fontWeight: 700,
+      fill: "currentColor",
+      className: "text-body-foreground",
+      dy: 4,
+      children: yAxisTickFormatter(payload.value)
     }
-    return null;
-  };
+  );
   (0, import_react40.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -12644,13 +12702,52 @@ var BarChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
               domain: yAxisDomain
             }
           ),
-          customTooltip && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(CustomTooltip, {}), cursor: { fill: "transparent" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.Bar, { dataKey: "blue", fill: "url(#blueGradient)", width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.Bar, { dataKey: "green", fill: "url(#greenGradient)", width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_recharts3.Bar, { dataKey: "pink", fill: "url(#pinkGradient)", width: 20, shape: CustomBarShape })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_recharts3.Bar,
+            {
+              dataKey: "blue",
+              fill: "url(#blueGradient)",
+              shape: CustomBarShape,
+              onMouseEnter: (e) => handleMouseEnter(e, "blue"),
+              onMouseLeave: handleMouseLeave
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_recharts3.Bar,
+            {
+              dataKey: "green",
+              fill: "url(#greenGradient)",
+              shape: CustomBarShape,
+              onMouseEnter: (e) => handleMouseEnter(e, "green"),
+              onMouseLeave: handleMouseLeave
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_recharts3.Bar,
+            {
+              dataKey: "pink",
+              fill: "url(#pinkGradient)",
+              shape: CustomBarShape,
+              onMouseEnter: (e) => handleMouseEnter(e, "pink"),
+              onMouseLeave: handleMouseLeave
+            }
+          )
         ]
       }
-    ) })
+    ) }),
+    tooltipFormatter && tooltipState && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: tooltipState.x + 20,
+          top: tooltipState.y - 20,
+          transform: "translateX(-50%)",
+          pointerEvents: "none"
+        },
+        children: tooltipFormatter(tooltipState)
+      }
+    )
   ] });
 });
 BarChartComponent.displayName = "barChart";
@@ -12661,9 +12758,7 @@ var barChartStyle = tv({
     label: ["text-md", "font-bold", "text-body-foreground"]
   },
   variants: {},
-  defaultVariants: {
-    color: "primary"
-  }
+  defaultVariants: {}
 });
 
 // src/components/charts/radarChart.tsx

package/dist/index.mjs

@@ -1,10 +1,8 @@
 "use client";
-import "./chunk-HIE2YRGA.mjs";
+import "./chunk-MBLZYQCN.mjs";
 import {
-  tooltip_default
-} from "./chunk-YGOX6FBU.mjs";
-import "./chunk-ZMOAFSYE.mjs";
-import "./chunk-WSIADHVC.mjs";
+  tree_default
+} from "./chunk-JC6635TJ.mjs";
 import "./chunk-LUWGOKLG.mjs";
 import {
   ToastProvider,
@@ -14,17 +12,20 @@ import "./chunk-ZOTHPHXA.mjs";
 import {
   toast_default
 } from "./chunk-5R3ARH2N.mjs";
-import "./chunk-MBLZYQCN.mjs";
+import "./chunk-HIE2YRGA.mjs";
 import {
-  tree_default
-} from "./chunk-JC6635TJ.mjs";
+  tooltip_default
+} from "./chunk-YGOX6FBU.mjs";
+import "./chunk-ZMOAFSYE.mjs";
+import "./chunk-WSIADHVC.mjs";
 import "./chunk-DX3KXNP6.mjs";
-import {
-  definition_table_default
-} from "./chunk-SJNXRXV5.mjs";
 import {
   table_default
 } from "./chunk-ANILRUAS.mjs";
+import "./chunk-3MY6LO7N.mjs";
+import {
+  tabs_default
+} from "./chunk-BBRPAQON.mjs";
 import "./chunk-RRAZM5D3.mjs";
 import {
   textarea_default
@@ -37,10 +38,9 @@ import "./chunk-LVFI2NOH.mjs";
 import {
   switch_default
 } from "./chunk-AGE57VDD.mjs";
-import "./chunk-3MY6LO7N.mjs";
 import {
-  tabs_default
-} from "./chunk-BBRPAQON.mjs";
+  definition_table_default
+} from "./chunk-WC5PVVT6.mjs";
 import "./chunk-TPFN22HR.mjs";
 import {
   radio_default
@@ -106,10 +106,10 @@ import {
 } from "./chunk-M37VBNB3.mjs";
 import {
   barChart_default
-} from "./chunk-WNNOVISA.mjs";
+} from "./chunk-FQJD2IY3.mjs";
 import {
   circularProgress_default
-} from "./chunk-5XW5QDIW.mjs";
+} from "./chunk-NCK5E2NL.mjs";
 import {
   radarChart_default
 } from "./chunk-OEFILEL3.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/ui",
-  "version": "0.1.126",
+  "version": "0.1.127",
   "license": "MIT",
   "sideEffects": false,
   "exports": {

package/dist/chunk-SJNXRXV5.mjs

@@ -1,85 +0,0 @@
-"use client";
-import {
-  tv
-} from "./chunk-76QIZILI.mjs";
-import {
-  clsx
-} from "./chunk-27Y6K5NK.mjs";
-
-// src/components/table/definition-table.tsx
-import { forwardRef, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_CELL_CLASSES = "px-[10px] py-[8px] text-md border-r border-neutral-light h-[50px]";
-var FIRST_CELL_WIDTH_CLASS = "w-[120px] font-bold text-md text-body-foreground";
-var renderColGroup = (rows) => {
-  let maxCols = 0;
-  const colWidths = [];
-  rows.forEach((row) => {
-    let currentColCount = 0;
-    row.cells.forEach((cell) => {
-      currentColCount += cell.colSpan || 1;
-    });
-    maxCols = Math.max(maxCols, currentColCount);
-  });
-  colWidths[0] = "120px";
-  rows.forEach((row) => {
-    let colIndex = 0;
-    row.cells.forEach((cell) => {
-      const span = cell.colSpan || 1;
-      if (colIndex > 0 && cell.width && cell.width !== "auto" && colIndex < maxCols) {
-        colWidths[colIndex] = cell.width;
-      }
-      colIndex += span;
-    });
-  });
-  const cols = [];
-  for (let i = 0; i < maxCols; i++) {
-    cols.push(/* @__PURE__ */ jsx("col", { style: colWidths[i] ? { width: colWidths[i] } : { width: "auto" } }, `col-${i}`));
-  }
-  return /* @__PURE__ */ jsx("colgroup", { children: cols });
-};
-var DefinitionTableRow = ({ cells, className }) => /* @__PURE__ */ jsx("tr", { className: `border-neutral-light border-b ${className || ""}`, children: cells.map((cell, colIndex) => {
-  const isFirstCell = colIndex === 0;
-  const combinedClassName = [isFirstCell ? FIRST_CELL_WIDTH_CLASS : "", clsx(DEFAULT_CELL_CLASSES, cell.className)].filter(Boolean).join(" ");
-  let cellStyle;
-  if (isFirstCell) {
-    cellStyle = { width: "120px", minWidth: "120px", maxWidth: "120px" };
-  } else if (cell.width && cell.width !== "auto") {
-    cellStyle = { width: cell.width, minWidth: cell.width, maxWidth: cell.width };
-  } else {
-    cellStyle = { width: "100%" };
-  }
-  return /* @__PURE__ */ jsx(
-    "td",
-    {
-      className: combinedClassName,
-      colSpan: cell.colSpan,
-      rowSpan: cell.rowSpan,
-      style: { ...cellStyle, height: "50px" },
-      children: cell.content
-    },
-    colIndex
-  );
-}) });
-var DefinitionTable = forwardRef(({ rows = [], footer, classNames }, ref) => {
-  const slots = useMemo(() => DefinitionTableStyle(), []);
-  return /* @__PURE__ */ jsxs("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ jsxs("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
-      renderColGroup(rows),
-      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx(DefinitionTableRow, { ...row, className: `${row.className || ""} ${i === 0 ? "first-row" : ""}` }, i)) })
-    ] }),
-    footer && /* @__PURE__ */ jsx("div", { children: footer })
-  ] });
-});
-DefinitionTable.displayName = "DefinitionTable";
-var definition_table_default = DefinitionTable;
-var DefinitionTableStyle = tv({
-  slots: {
-    base: ["flex", "flex-col", "gap-[30px]"],
-    table: ["w-full", "table-auto", "border", "border-neutral-light"]
-  }
-});
-
-export {
-  definition_table_default
-};