@deepnoid/ui 0.1.92 → 0.1.94

package/dist/{chunk-ZFKQOPMK.mjs → chunk-UFAY3EIU.mjs}

@@ -39,6 +39,7 @@ var TableBody = ({
   rowCheckbox = false,
   checkedRows,
   onCheckRow,
+  onRowClick,
   isLoading = false,
   emptyContent,
   skeletonRow,
@@ -47,67 +48,54 @@ var TableBody = ({
 }) => {
   const renderTdSkeleton = (key, column) => {
     const isCheckbox = key.includes("checkbox");
-    return /* @__PURE__ */ jsx(
-      "td",
-      {
-        className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
-        style: isCheckbox ? {
-          width: "40px",
-          minWidth: "40px",
-          maxWidth: "40px",
-          flexShrink: 0,
-          flexGrow: 0,
-          boxSizing: "border-box"
-        } : column ? getCellStyle(column) : void 0,
-        children: /* @__PURE__ */ jsx(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
-      },
-      key
-    );
+    return /* @__PURE__ */ jsx("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ jsx(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
   };
   const renderCheckboxCell = (rowId) => /* @__PURE__ */ jsx(
     "td",
     {
       className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
-      style: {
-        width: "40px",
-        minWidth: "40px",
-        maxWidth: "40px",
-        flexShrink: 0,
-        flexGrow: 0,
-        boxSizing: "border-box"
-      },
-      children: /* @__PURE__ */ jsx(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
-    }
+      style: { width: "40px", minWidth: "40px", textAlign: "center" },
+      children: /* @__PURE__ */ jsx("div", { "data-checkbox": true, children: /* @__PURE__ */ jsx(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
+    },
+    `checkbox-${rowId}`
   );
   const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ jsxs("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
     rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
   ] }, `skeleton-${rowIndex}`);
   const renderEmptyRow = () => /* @__PURE__ */ jsx("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ jsx("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
-  const renderDataRow = (row, rowIndex) => /* @__PURE__ */ jsxs("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, colIdx) => {
-      var _a;
-      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;
-      return /* @__PURE__ */ jsx(
-        "td",
-        {
-          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
-          style: getCellStyle(column),
-          children: content
-        },
-        `${rowIndex}-${colIdx}`
-      );
-    }),
-    rowCheckbox && renderCheckboxCell(row.id)
-  ] }, rowIndex);
+  const renderDataRow = (row, rowIndex) => /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
+      onClick: typeof onRowClick === "function" ? (event) => onRowClick(row, rowIndex, event) : void 0,
+      children: [
+        columns.map((column, colIdx) => {
+          var _a;
+          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;
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className),
+              style: getCellStyle(column),
+              children: content
+            },
+            `${row.id}-${column.field}-${colIdx}`
+          );
+        }),
+        rowCheckbox && renderCheckboxCell(row.id)
+      ]
+    },
+    row.id
+  );
   const renderRows = () => {
     if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ jsx(Fragment, {});
     if (!rows.length && emptyContent) return renderEmptyRow();
     return rows.map((row, index) => renderDataRow(row, index));
   };
-  return /* @__PURE__ */ jsx("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
+  return /* @__PURE__ */ jsx("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
 };
 var table_body_default = TableBody;
 
@@ -129,7 +117,8 @@ var Table = forwardRef((originalProps, ref) => {
     color,
     size,
     skeletonRow,
-    onCheckedRowsChange
+    onCheckedRowsChange,
+    onRowClick
   } = { ...props, ...variantProps };
   const { page = 1, perPage = 15 } = pagination || {};
   const showPagination = pagination && totalData > 0 && !isLoading;
@@ -173,8 +162,18 @@ var Table = forwardRef((originalProps, ref) => {
       return updated;
     });
   };
+  const handleRowClick = (row, index, event) => {
+    const target = event.target;
+    if (target.closest('input[type="checkbox"]') || target.closest("[data-checkbox]")) {
+      return;
+    }
+    onRowClick == null ? void 0 : onRowClick(row, index, event);
+  };
   const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
-  const slots = useMemo(() => tableStyle(variantProps), [variantProps]);
+  const slots = useMemo(
+    () => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
+    [variantProps, onRowClick]
+  );
   return /* @__PURE__ */ jsxs2("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ jsx2(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ jsxs2(
       "table",
@@ -193,7 +192,7 @@ var Table = forwardRef((originalProps, ref) => {
               size,
               color,
               rowCheckbox,
-              isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
+              hasCheckedRows: checkedRows.size > 0,
               onCheckAll: handleAllRowCheck,
               isLoading,
               classNames,
@@ -211,8 +210,9 @@ var Table = forwardRef((originalProps, ref) => {
               rowCheckbox,
               checkedRows,
               onCheckRow: handleRowCheck,
-              emptyContent,
+              onRowClick: handleRowClick,
               isLoading,
+              emptyContent,
               skeletonRow,
               className: clsx(
                 "transition-all duration-150 ease-out",
@@ -322,6 +322,11 @@ var tableStyle = tv({
     height: {
       narrow: {},
       wide: {}
+    },
+    rowClickable: {
+      true: {
+        tr: ["cursor-pointer"]
+      }
     }
   },
   compoundVariants: [
@@ -479,15 +484,11 @@ var TableHead = ({
   color,
   size,
   rowCheckbox = false,
-  isCheckedAll,
+  hasCheckedRows,
   isLoading = false,
   classNames,
   onCheckAll
 }) => {
-  const handleClickCheckAll = (e) => {
-    e.preventDefault();
-    onCheckAll(!isCheckedAll);
-  };
   const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ jsx3(
     "th",
     {
@@ -513,11 +514,11 @@ var TableHead = ({
   const renderContentRow = () => /* @__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", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx3("div", { "data-checkbox": true, children: /* @__PURE__ */ jsx3(
         checkbox_default,
         {
           size,
-          checked: isCheckedAll,
+          checked: hasCheckedRows,
           onChange: (e) => onCheckAll(e.target.checked)
         }
       ) }),

package/dist/{chunk-V5OCV42N.mjs → chunk-Z4YJ274G.mjs}

@@ -103,7 +103,13 @@ var Button = forwardRef((originalProps, ref) => {
         var _a, _b, _c;
         (_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
         (_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
-      }
+      },
+      children: /* @__PURE__ */ jsx(Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ jsx(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        startContent && renderContent(startContent),
+        childElement.props.children,
+        endContent && renderContent(endContent),
+        !disableRipple && /* @__PURE__ */ jsx(ripple_default, { ...getRippleProps() })
+      ] }) })
     };
     return cloneElement(childElement, mergedProps);
   }

package/dist/components/breadcrumb/breadcrumb.mjs

@@ -5,7 +5,7 @@ import {
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-JBSV7GCL.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-V5OCV42N.mjs";
+import "../../chunk-Z4YJ274G.mjs";
 import "../../chunk-P6CRHHI3.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";

package/dist/components/breadcrumb/index.mjs

@@ -6,7 +6,7 @@ import {
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-JBSV7GCL.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-V5OCV42N.mjs";
+import "../../chunk-Z4YJ274G.mjs";
 import "../../chunk-P6CRHHI3.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";

package/dist/components/button/button.js

@@ -5150,7 +5150,13 @@ var Button = (0, import_react2.forwardRef)((originalProps, ref) => {
         var _a, _b, _c;
         (_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
         (_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
-      }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        startContent && renderContent(startContent),
+        childElement.props.children,
+        endContent && renderContent(endContent),
+        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ripple_default, { ...getRippleProps() })
+      ] }) })
     };
     return (0, import_react2.cloneElement)(childElement, mergedProps);
   }

package/dist/components/button/button.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   button_default
-} from "../../chunk-V5OCV42N.mjs";
+} from "../../chunk-Z4YJ274G.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";
 import "../../chunk-6PNKRBUT.mjs";

package/dist/components/button/index.js

@@ -5155,7 +5155,13 @@ var Button = (0, import_react2.forwardRef)((originalProps, ref) => {
         var _a, _b, _c;
         (_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
         (_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
-      }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        startContent && renderContent(startContent),
+        childElement.props.children,
+        endContent && renderContent(endContent),
+        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ripple_default, { ...getRippleProps() })
+      ] }) })
     };
     return (0, import_react2.cloneElement)(childElement, mergedProps);
   }

package/dist/components/button/index.mjs

@@ -8,7 +8,7 @@ import {
 } from "../../chunk-ITWKPTSD.mjs";
 import {
   button_default
-} from "../../chunk-V5OCV42N.mjs";
+} from "../../chunk-Z4YJ274G.mjs";
 import {
   icon_button_default
 } from "../../chunk-P6CRHHI3.mjs";

package/dist/components/fileUpload/fileUpload.js

@@ -5563,7 +5563,13 @@ var Button = (0, import_react3.forwardRef)((originalProps, ref) => {
         var _a, _b, _c;
         (_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
         (_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
-      }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        startContent && renderContent(startContent),
+        childElement.props.children,
+        endContent && renderContent(endContent),
+        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ripple_default, { ...getRippleProps() })
+      ] }) })
     };
     return (0, import_react3.cloneElement)(childElement, mergedProps);
   }

package/dist/components/fileUpload/fileUpload.mjs

@@ -3,13 +3,13 @@ import {
   FileUpload,
   fileUploadStyle,
   fileUpload_default
-} from "../../chunk-Q3JMHIW5.mjs";
+} from "../../chunk-IY4AY6JJ.mjs";
 import "../../chunk-2GCSFWHD.mjs";
 import "../../chunk-MVL7HJSH.mjs";
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-JBSV7GCL.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-V5OCV42N.mjs";
+import "../../chunk-Z4YJ274G.mjs";
 import "../../chunk-P6CRHHI3.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";

package/dist/components/fileUpload/index.js

@@ -5563,7 +5563,13 @@ var Button = (0, import_react3.forwardRef)((originalProps, ref) => {
         var _a, _b, _c;
         (_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
         (_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
-      }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        startContent && renderContent(startContent),
+        childElement.props.children,
+        endContent && renderContent(endContent),
+        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ripple_default, { ...getRippleProps() })
+      ] }) })
     };
     return (0, import_react3.cloneElement)(childElement, mergedProps);
   }

package/dist/components/fileUpload/index.mjs

@@ -2,13 +2,13 @@
 import "../../chunk-RLXOHILK.mjs";
 import {
   fileUpload_default
-} from "../../chunk-Q3JMHIW5.mjs";
+} from "../../chunk-IY4AY6JJ.mjs";
 import "../../chunk-2GCSFWHD.mjs";
 import "../../chunk-MVL7HJSH.mjs";
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-JBSV7GCL.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-V5OCV42N.mjs";
+import "../../chunk-Z4YJ274G.mjs";
 import "../../chunk-P6CRHHI3.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";

package/dist/components/modal/index.js

@@ -5156,7 +5156,13 @@ var Button = (0, import_react2.forwardRef)((originalProps, ref) => {
         var _a, _b, _c;
         (_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
         (_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
-      }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        startContent && renderContent(startContent),
+        childElement.props.children,
+        endContent && renderContent(endContent),
+        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ripple_default, { ...getRippleProps() })
+      ] }) })
     };
     return (0, import_react2.cloneElement)(childElement, mergedProps);
   }

package/dist/components/modal/index.mjs

@@ -2,13 +2,13 @@
 import "../../chunk-DJOG6Z35.mjs";
 import {
   modal_default
-} from "../../chunk-D6OJWEZM.mjs";
+} from "../../chunk-SGOE2HGI.mjs";
 import "../../chunk-SE5TU755.mjs";
 import "../../chunk-AF4I7ZQS.mjs";
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-JBSV7GCL.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-V5OCV42N.mjs";
+import "../../chunk-Z4YJ274G.mjs";
 import "../../chunk-P6CRHHI3.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";

package/dist/components/modal/modal.js

@@ -5154,7 +5154,13 @@ var Button = (0, import_react2.forwardRef)((originalProps, ref) => {
         var _a, _b, _c;
         (_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
         (_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
-      }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        startContent && renderContent(startContent),
+        childElement.props.children,
+        endContent && renderContent(endContent),
+        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ripple_default, { ...getRippleProps() })
+      ] }) })
     };
     return (0, import_react2.cloneElement)(childElement, mergedProps);
   }

package/dist/components/modal/modal.mjs

@@ -1,13 +1,13 @@
 "use client";
 import {
   modal_default
-} from "../../chunk-D6OJWEZM.mjs";
+} from "../../chunk-SGOE2HGI.mjs";
 import "../../chunk-SE5TU755.mjs";
 import "../../chunk-AF4I7ZQS.mjs";
 import "../../chunk-MY5U63QO.mjs";
 import "../../chunk-JBSV7GCL.mjs";
 import "../../chunk-ITWKPTSD.mjs";
-import "../../chunk-V5OCV42N.mjs";
+import "../../chunk-Z4YJ274G.mjs";
 import "../../chunk-P6CRHHI3.mjs";
 import "../../chunk-6WSACUIB.mjs";
 import "../../chunk-LXHUO6VM.mjs";

package/dist/components/table/index.js

@@ -697,15 +697,11 @@ var TableHead = ({
   color,
   size,
   rowCheckbox = false,
-  isCheckedAll,
+  hasCheckedRows,
   isLoading = false,
   classNames,
   onCheckAll
 }) => {
-  const handleClickCheckAll = (e) => {
-    e.preventDefault();
-    onCheckAll(!isCheckedAll);
-  };
   const renderTh = (content, key, column, isCheckbox) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "th",
     {
@@ -731,11 +727,11 @@ var TableHead = ({
   const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("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__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         checkbox_default,
         {
           size,
-          checked: isCheckedAll,
+          checked: hasCheckedRows,
           onChange: (e) => onCheckAll(e.target.checked)
         }
       ) }),
@@ -759,6 +755,7 @@ var TableBody = ({
   rowCheckbox = false,
   checkedRows,
   onCheckRow,
+  onRowClick,
   isLoading = false,
   emptyContent,
   skeletonRow,
@@ -767,67 +764,54 @@ var TableBody = ({
 }) => {
   const renderTdSkeleton = (key, column) => {
     const isCheckbox = key.includes("checkbox");
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "td",
-      {
-        className: slots.td({ class: classNames == null ? void 0 : classNames.td }),
-        style: isCheckbox ? {
-          width: "40px",
-          minWidth: "40px",
-          maxWidth: "40px",
-          flexShrink: 0,
-          flexGrow: 0,
-          boxSizing: "border-box"
-        } : column ? getCellStyle(column) : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
-      },
-      key
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
   };
   const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "td",
     {
       className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
-      style: {
-        width: "40px",
-        minWidth: "40px",
-        maxWidth: "40px",
-        flexShrink: 0,
-        flexGrow: 0,
-        boxSizing: "border-box"
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) })
-    }
+      style: { width: "40px", minWidth: "40px", textAlign: "center" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
+    },
+    `checkbox-${rowId}`
   );
   const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
     columns.map((column, colIdx) => renderTdSkeleton(`skeleton-${rowIndex}-${colIdx}`, column)),
     rowCheckbox && renderTdSkeleton(`skeleton-checkbox-${rowIndex}`)
   ] }, `skeleton-${rowIndex}`);
   const renderEmptyRow = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: columns.length + (rowCheckbox ? 1 : 0), className: slots.empty({ class: classNames == null ? void 0 : classNames.empty }), children: emptyContent }) });
-  const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: [
-    columns.map((column, colIdx) => {
-      var _a;
-      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;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "td",
-        {
-          className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), column.className),
-          style: getCellStyle(column),
-          children: content
-        },
-        `${rowIndex}-${colIdx}`
-      );
-    }),
-    rowCheckbox && renderCheckboxCell(row.id)
-  ] }, rowIndex);
+  const renderDataRow = (row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "tr",
+    {
+      className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
+      onClick: typeof onRowClick === "function" ? (event) => onRowClick(row, rowIndex, event) : void 0,
+      children: [
+        columns.map((column, colIdx) => {
+          var _a;
+          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;
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "td",
+            {
+              className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className),
+              style: getCellStyle(column),
+              children: content
+            },
+            `${row.id}-${column.field}-${colIdx}`
+          );
+        }),
+        rowCheckbox && renderCheckboxCell(row.id)
+      ]
+    },
+    row.id
+  );
   const renderRows = () => {
     if (isLoading) return skeletonRow ? Array.from({ length: skeletonRow }, (_, idx) => renderSkeletonRow(idx)) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, {});
     if (!rows.length && emptyContent) return renderEmptyRow();
     return rows.map((row, index) => renderDataRow(row, index));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
 };
 var table_body_default = TableBody;
 
@@ -6174,7 +6158,8 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
     color,
     size,
     skeletonRow,
-    onCheckedRowsChange
+    onCheckedRowsChange,
+    onRowClick
   } = { ...props, ...variantProps };
   const { page = 1, perPage = 15 } = pagination || {};
   const showPagination = pagination && totalData > 0 && !isLoading;
@@ -6218,8 +6203,18 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
       return updated;
     });
   };
+  const handleRowClick = (row, index, event) => {
+    const target = event.target;
+    if (target.closest('input[type="checkbox"]') || target.closest("[data-checkbox]")) {
+      return;
+    }
+    onRowClick == null ? void 0 : onRowClick(row, index, event);
+  };
   const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
-  const slots = (0, import_react5.useMemo)(() => tableStyle(variantProps), [variantProps]);
+  const slots = (0, import_react5.useMemo)(
+    () => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
+    [variantProps, onRowClick]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "table",
@@ -6238,7 +6233,7 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
               size,
               color,
               rowCheckbox,
-              isCheckedAll: checkedRows.size === rows.length && rows.length > 0,
+              hasCheckedRows: checkedRows.size > 0,
               onCheckAll: handleAllRowCheck,
               isLoading,
               classNames,
@@ -6256,8 +6251,9 @@ var Table = (0, import_react5.forwardRef)((originalProps, ref) => {
               rowCheckbox,
               checkedRows,
               onCheckRow: handleRowCheck,
-              emptyContent,
+              onRowClick: handleRowClick,
               isLoading,
+              emptyContent,
               skeletonRow,
               className: clsx(
                 "transition-all duration-150 ease-out",
@@ -6367,6 +6363,11 @@ var tableStyle = (0, import_tailwind_variants7.tv)({
     height: {
       narrow: {},
       wide: {}
+    },
+    rowClickable: {
+      true: {
+        tr: ["cursor-pointer"]
+      }
     }
   },
   compoundVariants: [

package/dist/components/table/index.mjs

@@ -2,7 +2,7 @@
 import "../../chunk-DX3KXNP6.mjs";
 import {
   table_default
-} from "../../chunk-ZFKQOPMK.mjs";
+} from "../../chunk-UFAY3EIU.mjs";
 import "../../chunk-MZ76AA76.mjs";
 import "../../chunk-6PN3DGOE.mjs";
 import {