@deepnoid/ui 0.1.126 → 0.1.127

package/dist/components/charts/index.js

@@ -434,7 +434,7 @@ var CircularProgress = (0, import_react.forwardRef)((originalProps, ref) => {
                 cx: size / 2,
                 cy: size / 2,
                 r: OUTER_RADIUS + BORDER_MARGIN,
-                fill: "none",
+                fill: "#fff",
                 stroke: "#DFE2E7",
                 strokeWidth: "1"
               }
@@ -763,19 +763,34 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var BarChartComponent = (0, import_react3.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_react3.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
   const [tickPositions, setTickPositions] = (0, import_react3.useState)([]);
   const tickRef = (0, import_react3.useRef)([]);
-  const CustomBarShape = (barProps) => {
-    const { x, y, width, height, fill } = barProps;
+  const [tooltipState, setTooltipState] = (0, import_react3.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;
@@ -790,9 +805,7 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
     ) : /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)(
       "text",
       {
@@ -807,28 +820,20 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
       }
     );
   };
-  const CustomYAxisTick = ({ x, y, payload }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.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_react3.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -896,13 +901,52 @@ var BarChartComponent = (0, import_react3.forwardRef)((originalProps, ref) => {
               domain: yAxisDomain
             }
           ),
-          customTooltip && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CustomTooltip, {}), cursor: { fill: "transparent" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Bar, { dataKey: "blue", fill: "url(#blueGradient)", width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Bar, { dataKey: "green", fill: "url(#greenGradient)", width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_recharts3.Bar, { dataKey: "pink", fill: "url(#pinkGradient)", width: 20, shape: CustomBarShape })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_recharts3.Bar,
+            {
+              dataKey: "blue",
+              fill: "url(#blueGradient)",
+              shape: CustomBarShape,
+              onMouseEnter: (e) => handleMouseEnter(e, "blue"),
+              onMouseLeave: handleMouseLeave
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_recharts3.Bar,
+            {
+              dataKey: "green",
+              fill: "url(#greenGradient)",
+              shape: CustomBarShape,
+              onMouseEnter: (e) => handleMouseEnter(e, "green"),
+              onMouseLeave: handleMouseLeave
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_recharts3.Bar,
+            {
+              dataKey: "pink",
+              fill: "url(#pinkGradient)",
+              shape: CustomBarShape,
+              onMouseEnter: (e) => handleMouseEnter(e, "pink"),
+              onMouseLeave: handleMouseLeave
+            }
+          )
         ]
       }
-    ) })
+    ) }),
+    tooltipFormatter && tooltipState && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: tooltipState.x + 20,
+          top: tooltipState.y - 20,
+          transform: "translateX(-50%)",
+          pointerEvents: "none"
+        },
+        children: tooltipFormatter(tooltipState)
+      }
+    )
   ] });
 });
 BarChartComponent.displayName = "barChart";
@@ -913,9 +957,7 @@ var barChartStyle = tv({
     label: ["text-md", "font-bold", "text-body-foreground"]
   },
   variants: {},
-  defaultVariants: {
-    color: "primary"
-  }
+  defaultVariants: {}
 });
 
 // src/components/charts/radarChart.tsx

package/dist/components/charts/index.mjs

@@ -7,10 +7,10 @@ import "../../chunk-DQRAFUDA.mjs";
 import "../../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/dist/components/table/definition-table.d.mts

@@ -5,6 +5,7 @@ import { ReactNode } from 'react';
 import { SlotsToClasses } from '../../utils/types.mjs';
 
 type DefinitionTableRowCell = {
+    key?: string;
     content: ReactNode;
     className?: string;
     colSpan?: number;
@@ -18,6 +19,7 @@ type DefinitionTableRow = {
 interface DefinitionTableProps {
     rows: DefinitionTableRow[];
     footer?: ReactNode;
+    highlightColumnKey?: string;
     classNames?: SlotsToClasses<DefinitionTableSlots>;
 }
 declare const DefinitionTable: react.ForwardRefExoticComponent<DefinitionTableProps & react.RefAttributes<HTMLDivElement>>;

package/dist/components/table/definition-table.d.ts

@@ -5,6 +5,7 @@ import { ReactNode } from 'react';
 import { SlotsToClasses } from '../../utils/types.js';
 
 type DefinitionTableRowCell = {
+    key?: string;
     content: ReactNode;
     className?: string;
     colSpan?: number;
@@ -18,6 +19,7 @@ type DefinitionTableRow = {
 interface DefinitionTableProps {
     rows: DefinitionTableRow[];
     footer?: ReactNode;
+    highlightColumnKey?: string;
     classNames?: SlotsToClasses<DefinitionTableSlots>;
 }
 declare const DefinitionTable: react.ForwardRefExoticComponent<DefinitionTableProps & react.RefAttributes<HTMLDivElement>>;

package/dist/components/table/definition-table.js

@@ -414,18 +414,57 @@ var renderColGroup = (rows) => {
   });
   const cols = [];
   for (let i = 0; i < maxCols; i++) {
-    cols.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("col", { style: colWidths[i] ? { width: colWidths[i] } : { width: "auto" } }, `col-${i}`));
+    cols.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)("col", { style: { width: colWidths[i] || "auto" } }, i));
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("colgroup", { children: cols });
 };
-var DefinitionTableRow = ({ cells, className }) => /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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%" };
   }
@@ -441,16 +480,30 @@ var DefinitionTableRow = ({ cells, className }) => /* @__PURE__ */ (0, import_js
     colIndex
   );
 }) });
-var DefinitionTable = (0, import_react.forwardRef)(({ rows = [], footer, classNames }, ref) => {
-  const slots = (0, import_react.useMemo)(() => DefinitionTableStyle(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
+var DefinitionTable = (0, import_react.forwardRef)(
+  ({ rows = [], footer, highlightColumnKey, classNames }, ref) => {
+    const slots = (0, import_react.useMemo)(() => DefinitionTableStyle(), []);
+    const highlightColumnIndex = (0, import_react.useMemo)(
+      () => getHighlightColumnIndex(rows, highlightColumnKey),
+      [rows, highlightColumnKey]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: clsx(slots.base(), classNames == null ? void 0 : classNames.base), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { className: clsx(slots.table(), classNames == null ? void 0 : classNames.table), children: [
       renderColGroup(rows),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefinitionTableRow, { ...row, className: `${row.className || ""} ${i === 0 ? "first-row" : ""}` }, i)) })
-    ] }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: footer })
-  ] });
-});
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        DefinitionTableRow,
+        {
+          ...row,
+          rowIndex: i,
+          rowCount: rows.length,
+          highlightColumnIndex,
+          className: row.className
+        },
+        i
+      )) }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tfoot", { children: footer })
+    ] }) });
+  }
+);
 DefinitionTable.displayName = "DefinitionTable";
 var definition_table_default = DefinitionTable;
 var DefinitionTableStyle = tv({

package/dist/components/table/definition-table.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   definition_table_default
-} from "../../chunk-SJNXRXV5.mjs";
+} from "../../chunk-WC5PVVT6.mjs";
 import "../../chunk-76QIZILI.mjs";
 import "../../chunk-27Y6K5NK.mjs";
 import "../../chunk-AC6TWLRT.mjs";

package/dist/components/table/index.js

@@ -6719,18 +6719,57 @@ var renderColGroup = (rows) => {
   });
   const cols = [];
   for (let i = 0; i < maxCols; i++) {
-    cols.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("col", { style: colWidths[i] ? { width: colWidths[i] } : { width: "auto" } }, `col-${i}`));
+    cols.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("col", { style: { width: colWidths[i] || "auto" } }, i));
   }
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("colgroup", { children: cols });
 };
-var DefinitionTableRow = ({ cells, className }) => /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.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%" };
   }
@@ -6746,16 +6785,30 @@ var DefinitionTableRow = ({ cells, className }) => /* @__PURE__ */ (0, import_js
     colIndex
   );
 }) });
-var DefinitionTable = (0, import_react6.forwardRef)(({ rows = [], footer, classNames }, ref) => {
-  const slots = (0, import_react6.useMemo)(() => DefinitionTableStyle(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { className: slots.table({ class: classNames == null ? void 0 : classNames.table }), children: [
+var DefinitionTable = (0, import_react6.forwardRef)(
+  ({ rows = [], footer, highlightColumnKey, classNames }, ref) => {
+    const slots = (0, import_react6.useMemo)(() => DefinitionTableStyle(), []);
+    const highlightColumnIndex = (0, import_react6.useMemo)(
+      () => getHighlightColumnIndex(rows, highlightColumnKey),
+      [rows, highlightColumnKey]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref, className: clsx(slots.base(), classNames == null ? void 0 : classNames.base), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { className: clsx(slots.table(), classNames == null ? void 0 : classNames.table), children: [
       renderColGroup(rows),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DefinitionTableRow, { ...row, className: `${row.className || ""} ${i === 0 ? "first-row" : ""}` }, i)) })
-    ] }),
-    footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: footer })
-  ] });
-});
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        DefinitionTableRow,
+        {
+          ...row,
+          rowIndex: i,
+          rowCount: rows.length,
+          highlightColumnIndex,
+          className: row.className
+        },
+        i
+      )) }),
+      footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tfoot", { children: footer })
+    ] }) });
+  }
+);
 DefinitionTable.displayName = "DefinitionTable";
 var definition_table_default = DefinitionTable;
 var DefinitionTableStyle = tv({

package/dist/components/table/index.mjs

@@ -1,13 +1,13 @@
 "use client";
 import "../../chunk-DX3KXNP6.mjs";
-import {
-  definition_table_default
-} from "../../chunk-SJNXRXV5.mjs";
 import {
   table_default
 } from "../../chunk-ANILRUAS.mjs";
 import "../../chunk-MZ76AA76.mjs";
 import "../../chunk-6PN3DGOE.mjs";
+import {
+  definition_table_default
+} from "../../chunk-WC5PVVT6.mjs";
 import "../../chunk-7B7LRG5J.mjs";
 import "../../chunk-IBYQBC6D.mjs";
 import "../../chunk-F3HENRVM.mjs";