@deepnoid/ui 0.1.126 → 0.1.127

package/dist/{chunk-WNNOVISA.mjs → chunk-FQJD2IY3.mjs}

@@ -8,24 +8,39 @@ import {
 
 // src/components/charts/barChart.tsx
 import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
-import { XAxis, YAxis, ResponsiveContainer, CartesianGrid, BarChart, Bar, Tooltip } from "recharts";
+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,
+    data = [],
     label,
     classNames,
     yAxisTicks = [0, 20, 40, 60, 80, 100],
     yAxisTickFormatter = (value) => `${value}`,
     yAxisDomain = [-6, 110],
-    customTooltip
+    tooltipFormatter
   } = { ...props, ...variantProps };
   const slots = useMemo(() => barChartStyle({ ...variantProps }), [variantProps]);
   const [tickPositions, setTickPositions] = useState([]);
   const tickRef = useRef([]);
-  const CustomBarShape = (barProps) => {
-    const { x, y, width, height, fill } = barProps;
+  const [tooltipState, setTooltipState] = 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;
@@ -40,9 +55,7 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
     ) : /* @__PURE__ */ 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__ */ jsx(
       "text",
       {
@@ -57,28 +70,20 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
       }
     );
   };
-  const CustomYAxisTick = ({ x, y, payload }) => {
-    return /* @__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)
-      }
-    );
-  };
-  const CustomTooltip = ({ active, payload, label: label2 }) => {
-    if (customTooltip && active && payload && payload.length) {
-      return customTooltip({ active, payload, label: label2 });
+  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)
     }
-    return null;
-  };
+  );
   useEffect(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -146,13 +151,52 @@ var BarChartComponent = forwardRef((originalProps, ref) => {
               domain: yAxisDomain
             }
           ),
-          customTooltip && /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(CustomTooltip, {}), cursor: { fill: "transparent" } }),
-          /* @__PURE__ */ jsx(Bar, { dataKey: "blue", fill: "url(#blueGradient)", width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ jsx(Bar, { dataKey: "green", fill: "url(#greenGradient)", width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ jsx(Bar, { dataKey: "pink", fill: "url(#pinkGradient)", width: 20, shape: CustomBarShape })
+          /* @__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 && tooltipState && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: tooltipState.x + 20,
+          top: tooltipState.y - 20,
+          transform: "translateX(-50%)",
+          pointerEvents: "none"
+        },
+        children: tooltipFormatter(tooltipState)
+      }
+    )
   ] });
 });
 BarChartComponent.displayName = "barChart";
@@ -163,9 +207,7 @@ var barChartStyle = tv({
     label: ["text-md", "font-bold", "text-body-foreground"]
   },
   variants: {},
-  defaultVariants: {
-    color: "primary"
-  }
+  defaultVariants: {}
 });
 
 export {

package/dist/{chunk-5XW5QDIW.mjs → chunk-NCK5E2NL.mjs}

@@ -69,7 +69,7 @@ var CircularProgress = forwardRef((originalProps, ref) => {
                 cx: size / 2,
                 cy: size / 2,
                 r: OUTER_RADIUS + BORDER_MARGIN,
-                fill: "none",
+                fill: "#fff",
                 stroke: "#DFE2E7",
                 strokeWidth: "1"
               }

package/dist/chunk-WC5PVVT6.mjs

@@ -0,0 +1,138 @@
+"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: { width: colWidths[i] || "auto" } }, i));
+  }
+  return /* @__PURE__ */ jsx("colgroup", { children: cols });
+};
+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__ */ jsx("tr", { className: clsx("border-neutral-light border-b", className), children: cells.map((cell, colIndex) => {
+  const isFirstCell = colIndex === 0;
+  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"
+    };
+  } 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, highlightColumnKey, classNames }, ref) => {
+    const slots = useMemo(() => DefinitionTableStyle(), []);
+    const highlightColumnIndex = useMemo(
+      () => getHighlightColumnIndex(rows, highlightColumnKey),
+      [rows, highlightColumnKey]
+    );
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx(slots.base(), classNames == null ? void 0 : classNames.base), children: /* @__PURE__ */ jsxs("table", { className: clsx(slots.table(), classNames == null ? void 0 : classNames.table), children: [
+      renderColGroup(rows),
+      /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx(
+        DefinitionTableRow,
+        {
+          ...row,
+          rowIndex: i,
+          rowCount: rows.length,
+          highlightColumnIndex,
+          className: row.className
+        },
+        i
+      )) }),
+      footer && /* @__PURE__ */ jsx("tfoot", { 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
+};

package/dist/components/charts/barChart.d.mts

@@ -10,9 +10,9 @@ type BarData = {
     green: number;
     pink: number;
 };
-type TooltipProps = {
-    active: boolean;
-    payload: any[];
+type TooltipFormatterParams = {
+    dataKey: string;
+    value: number;
     label: string;
 };
 type Props = {
@@ -22,7 +22,7 @@ type Props = {
     yAxisTicks?: number[];
     yAxisTickFormatter?: (value: number) => string;
     yAxisDomain?: [number, number];
-    customTooltip?: (props: TooltipProps) => ReactNode;
+    tooltipFormatter?: (params: TooltipFormatterParams) => ReactNode;
 };
 type barChartProps = Props & barChartVariantProps;
 declare const BarChartComponent: react.ForwardRefExoticComponent<Props & barChartVariantProps & react.RefAttributes<HTMLDivElement>>;

package/dist/components/charts/barChart.d.ts

@@ -10,9 +10,9 @@ type BarData = {
     green: number;
     pink: number;
 };
-type TooltipProps = {
-    active: boolean;
-    payload: any[];
+type TooltipFormatterParams = {
+    dataKey: string;
+    value: number;
     label: string;
 };
 type Props = {
@@ -22,7 +22,7 @@ type Props = {
     yAxisTicks?: number[];
     yAxisTickFormatter?: (value: number) => string;
     yAxisDomain?: [number, number];
-    customTooltip?: (props: TooltipProps) => ReactNode;
+    tooltipFormatter?: (params: TooltipFormatterParams) => ReactNode;
 };
 type barChartProps = Props & barChartVariantProps;
 declare const BarChartComponent: react.ForwardRefExoticComponent<Props & barChartVariantProps & react.RefAttributes<HTMLDivElement>>;

package/dist/components/charts/barChart.js

@@ -106,6 +106,7 @@ __export(barChart_exports, {
 });
 module.exports = __toCommonJS(barChart_exports);
 var import_react = require("react");
+var import_recharts = require("recharts");
 
 // src/utils/tailwind-variants.ts
 var import_tailwind_variants = require("tailwind-variants");
@@ -347,9 +348,6 @@ var tv = (0, import_tailwind_variants.createTV)({
   }
 });
 
-// src/components/charts/barChart.tsx
-var import_recharts = require("recharts");
-
 // src/utils/props.ts
 var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   if (!variantKeys) {
@@ -375,19 +373,34 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var BarChartComponent = (0, import_react.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_react.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
   const [tickPositions, setTickPositions] = (0, import_react.useState)([]);
   const tickRef = (0, import_react.useRef)([]);
-  const CustomBarShape = (barProps) => {
-    const { x, y, width, height, fill } = barProps;
+  const [tooltipState, setTooltipState] = (0, import_react.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;
@@ -402,9 +415,7 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
     ) : /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(
       "text",
       {
@@ -419,28 +430,20 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
       }
     );
   };
-  const CustomYAxisTick = ({ x, y, payload }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_react.useEffect)(() => {
     const raf = requestAnimationFrame(() => {
       const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
@@ -508,13 +511,52 @@ var BarChartComponent = (0, import_react.forwardRef)((originalProps, ref) => {
               domain: yAxisDomain
             }
           ),
-          customTooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomTooltip, {}), cursor: { fill: "transparent" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "blue", fill: "url(#blueGradient)", width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "green", fill: "url(#greenGradient)", width: 20, shape: CustomBarShape }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_recharts.Bar, { dataKey: "pink", fill: "url(#pinkGradient)", width: 20, shape: CustomBarShape })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_recharts.Bar,
+            {
+              dataKey: "blue",
+              fill: "url(#blueGradient)",
+              shape: CustomBarShape,
+              onMouseEnter: (e) => handleMouseEnter(e, "blue"),
+              onMouseLeave: handleMouseLeave
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_recharts.Bar,
+            {
+              dataKey: "green",
+              fill: "url(#greenGradient)",
+              shape: CustomBarShape,
+              onMouseEnter: (e) => handleMouseEnter(e, "green"),
+              onMouseLeave: handleMouseLeave
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_recharts.Bar,
+            {
+              dataKey: "pink",
+              fill: "url(#pinkGradient)",
+              shape: CustomBarShape,
+              onMouseEnter: (e) => handleMouseEnter(e, "pink"),
+              onMouseLeave: handleMouseLeave
+            }
+          )
         ]
       }
-    ) })
+    ) }),
+    tooltipFormatter && tooltipState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: tooltipState.x + 20,
+          top: tooltipState.y - 20,
+          transform: "translateX(-50%)",
+          pointerEvents: "none"
+        },
+        children: tooltipFormatter(tooltipState)
+      }
+    )
   ] });
 });
 BarChartComponent.displayName = "barChart";
@@ -525,7 +567,5 @@ var barChartStyle = tv({
     label: ["text-md", "font-bold", "text-body-foreground"]
   },
   variants: {},
-  defaultVariants: {
-    color: "primary"
-  }
+  defaultVariants: {}
 });

package/dist/components/charts/barChart.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   barChart_default
-} from "../../chunk-WNNOVISA.mjs";
+} from "../../chunk-FQJD2IY3.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";

package/dist/components/charts/circularProgress.js

@@ -429,7 +429,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"
               }

package/dist/components/charts/circularProgress.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   circularProgress_default
-} from "../../chunk-5XW5QDIW.mjs";
+} from "../../chunk-NCK5E2NL.mjs";
 import "../../chunk-E3G5QXSH.mjs";
 import "../../chunk-76QIZILI.mjs";
 import "../../chunk-AC6TWLRT.mjs";