@deepnoid/ui 0.1.92 → 0.1.94

package/dist/components/table/table-body.d.mts

@@ -13,12 +13,13 @@ interface TableBodyProps {
     rowCheckbox?: boolean;
     checkedRows: Set<number>;
     onCheckRow: (index: number, isChecked: boolean) => void;
+    onRowClick?: (row: TableRow, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
     isLoading?: boolean;
     emptyContent?: ReactNode;
     skeletonRow?: number;
     classNames?: SlotsToClasses<TableSlots>;
     className?: string;
 }
-declare const TableBody: ({ slots, rows, columns, size, color, rowCheckbox, checkedRows, onCheckRow, isLoading, emptyContent, skeletonRow, classNames, className, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
+declare const TableBody: ({ slots, rows, columns, size, color, rowCheckbox, checkedRows, onCheckRow, onRowClick, isLoading, emptyContent, skeletonRow, classNames, className, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
 
 export { TableBody as default };

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

@@ -13,12 +13,13 @@ interface TableBodyProps {
     rowCheckbox?: boolean;
     checkedRows: Set<number>;
     onCheckRow: (index: number, isChecked: boolean) => void;
+    onRowClick?: (row: TableRow, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
     isLoading?: boolean;
     emptyContent?: ReactNode;
     skeletonRow?: number;
     classNames?: SlotsToClasses<TableSlots>;
     className?: string;
 }
-declare const TableBody: ({ slots, rows, columns, size, color, rowCheckbox, checkedRows, onCheckRow, isLoading, emptyContent, skeletonRow, classNames, className, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
+declare const TableBody: ({ slots, rows, columns, size, color, rowCheckbox, checkedRows, onCheckRow, onRowClick, isLoading, emptyContent, skeletonRow, classNames, className, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
 
 export { TableBody as default };

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

@@ -696,15 +696,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",
     {
@@ -730,11 +726,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)
         }
       ) }),
@@ -6090,7 +6086,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;
@@ -6134,8 +6131,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_runtime9.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "table",
@@ -6154,7 +6161,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,
@@ -6172,8 +6179,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",
@@ -6282,6 +6290,11 @@ var tableStyle = (0, import_tailwind_variants7.tv)({
     height: {
       narrow: {},
       wide: {}
+    },
+    rowClickable: {
+      true: {
+        tr: ["cursor-pointer"]
+      }
     }
   },
   compoundVariants: [
@@ -6442,6 +6455,7 @@ var TableBody = ({
   rowCheckbox = false,
   checkedRows,
   onCheckRow,
+  onRowClick,
   isLoading = false,
   emptyContent,
   skeletonRow,
@@ -6450,66 +6464,53 @@ var TableBody = ({
 }) => {
   const renderTdSkeleton = (key, column) => {
     const isCheckbox = key.includes("checkbox");
-    return /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
-      },
-      key
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
   };
   const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
+    },
+    `checkbox-${rowId}`
   );
   const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.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_runtime10.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_runtime10.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_runtime10.jsx)(import_jsx_runtime10.Fragment, {});
     if (!rows.length && emptyContent) return renderEmptyRow();
     return rows.map((row, index) => renderDataRow(row, index));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
 };
 var table_body_default = TableBody;

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

@@ -1,7 +1,7 @@
 "use client";
 import {
   table_body_default
-} from "../../chunk-ZFKQOPMK.mjs";
+} from "../../chunk-UFAY3EIU.mjs";
 import "../../chunk-MZ76AA76.mjs";
 import "../../chunk-6PN3DGOE.mjs";
 import "../../chunk-DQRAFUDA.mjs";

package/dist/components/table/table-head.d.mts

@@ -10,11 +10,11 @@ type TableHeadProps = {
     color?: "primary" | "secondary" | "neutral";
     size?: Size;
     rowCheckbox?: boolean;
-    isCheckedAll: boolean;
+    hasCheckedRows: boolean;
     isLoading?: boolean;
     classNames?: SlotsToClasses<TableSlots>;
     onCheckAll: (isChecked: boolean) => void;
 };
-declare const TableHead: ({ slots, columns, color, size, rowCheckbox, isCheckedAll, isLoading, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
+declare const TableHead: ({ slots, columns, color, size, rowCheckbox, hasCheckedRows, isLoading, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
 
 export { TableHead as default };

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

@@ -10,11 +10,11 @@ type TableHeadProps = {
     color?: "primary" | "secondary" | "neutral";
     size?: Size;
     rowCheckbox?: boolean;
-    isCheckedAll: boolean;
+    hasCheckedRows: boolean;
     isLoading?: boolean;
     classNames?: SlotsToClasses<TableSlots>;
     onCheckAll: (isChecked: boolean) => void;
 };
-declare const TableHead: ({ slots, columns, color, size, rowCheckbox, isCheckedAll, isLoading, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
+declare const TableHead: ({ slots, columns, color, size, rowCheckbox, hasCheckedRows, isLoading, classNames, onCheckAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
 
 export { TableHead as default };

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

@@ -699,6 +699,7 @@ var TableBody = ({
   rowCheckbox = false,
   checkedRows,
   onCheckRow,
+  onRowClick,
   isLoading = false,
   emptyContent,
   skeletonRow,
@@ -707,67 +708,54 @@ var TableBody = ({
 }) => {
   const renderTdSkeleton = (key, column) => {
     const isCheckbox = key.includes("checkbox");
-    return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" })
-      },
-      key
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: slots.td({ class: classNames == null ? void 0 : classNames.td }), style: column ? getCellStyle(column) : {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(skeleton_default, { color, className: "h-full w-full", rounded: "lg", speed: "fast" }) }, key);
   };
   const renderCheckboxCell = (rowId) => /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
+    },
+    `checkbox-${rowId}`
   );
   const renderSkeletonRow = (rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("tr", { className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }), children: /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.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_runtime3.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_runtime3.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_runtime3.jsx)(import_jsx_runtime3.Fragment, {});
     if (!rows.length && emptyContent) return renderEmptyRow();
     return rows.map((row, index) => renderDataRow(row, index));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { className: `${slots.tbody({ class: classNames == null ? void 0 : classNames.tbody })} ${className || ""}`, children: renderRows() });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { className: clsx(slots.tbody({ class: classNames == null ? void 0 : classNames.tbody }), className), children: renderRows() });
 };
 var table_body_default = TableBody;
 
@@ -6114,7 +6102,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;
@@ -6158,8 +6147,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_runtime9.jsxs)("div", { "data-table": "base", className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(scrollArea_default, { direction: "x", size: size === "xl" ? "lg" : size, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "table",
@@ -6178,7 +6177,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,
@@ -6196,8 +6195,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",
@@ -6306,6 +6306,11 @@ var tableStyle = (0, import_tailwind_variants7.tv)({
     height: {
       narrow: {},
       wide: {}
+    },
+    rowClickable: {
+      true: {
+        tr: ["cursor-pointer"]
+      }
     }
   },
   compoundVariants: [
@@ -6463,15 +6468,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_runtime10.jsx)(
     "th",
     {
@@ -6497,11 +6498,11 @@ var TableHead = ({
   const renderContentRow = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { className: slots.thead({ class: classNames == null ? void 0 : classNames.thead }), children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("div", { className: "flex items-center justify-center", onClick: handleClickCheckAll, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         checkbox_default,
         {
           size,
-          checked: isCheckedAll,
+          checked: hasCheckedRows,
           onChange: (e) => onCheckAll(e.target.checked)
         }
       ) }),

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

@@ -1,7 +1,7 @@
 "use client";
 import {
   table_head_default
-} from "../../chunk-ZFKQOPMK.mjs";
+} from "../../chunk-UFAY3EIU.mjs";
 import "../../chunk-MZ76AA76.mjs";
 import "../../chunk-6PN3DGOE.mjs";
 import "../../chunk-DQRAFUDA.mjs";

package/dist/components/table/table.d.mts

@@ -21,6 +21,7 @@ interface TableBaseProps extends Omit<ComponentPropsWithRef<"table">, "ref" | "c
     isLoading?: boolean;
     skeletonRow?: number;
     onCheckedRowsChange?: (rows: TableRow[]) => void;
+    onRowClick?: (row: TableRow, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
     classNames?: SlotsToClasses<TableSlots>;
 }
 interface TableRef {
@@ -73,6 +74,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
         narrow: {};
         wide: {};
     };
+    rowClickable: {
+        true: {
+            tr: string[];
+        };
+    };
 }, {
     base: string[];
     table: string[];
@@ -126,6 +132,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
         narrow: {};
         wide: {};
     };
+    rowClickable: {
+        true: {
+            tr: string[];
+        };
+    };
 }, {
     base: string[];
     table: string[];
@@ -179,6 +190,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
         narrow: {};
         wide: {};
     };
+    rowClickable: {
+        true: {
+            tr: string[];
+        };
+    };
 }, {
     base: string[];
     table: string[];

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

@@ -21,6 +21,7 @@ interface TableBaseProps extends Omit<ComponentPropsWithRef<"table">, "ref" | "c
     isLoading?: boolean;
     skeletonRow?: number;
     onCheckedRowsChange?: (rows: TableRow[]) => void;
+    onRowClick?: (row: TableRow, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
     classNames?: SlotsToClasses<TableSlots>;
 }
 interface TableRef {
@@ -73,6 +74,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
         narrow: {};
         wide: {};
     };
+    rowClickable: {
+        true: {
+            tr: string[];
+        };
+    };
 }, {
     base: string[];
     table: string[];
@@ -126,6 +132,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
         narrow: {};
         wide: {};
     };
+    rowClickable: {
+        true: {
+            tr: string[];
+        };
+    };
 }, {
     base: string[];
     table: string[];
@@ -179,6 +190,11 @@ declare const tableStyle: tailwind_variants.TVReturnType<{
         narrow: {};
         wide: {};
     };
+    rowClickable: {
+        true: {
+            tr: string[];
+        };
+    };
 }, {
     base: string[];
     table: string[];