@deepnoid/ui 0.0.80 → 0.0.83

package/dist/{chunk-TDMXAHWR.mjs → chunk-6U736HAX.mjs}

@@ -1,10 +1,10 @@
 "use client";
 import {
   table_head_default
-} from "./chunk-G3CX6IWH.mjs";
+} from "./chunk-PUFNT5LS.mjs";
 import {
   table_body_default
-} from "./chunk-DLVQWKQG.mjs";
+} from "./chunk-BHSCW5D6.mjs";
 import {
   clsx
 } from "./chunk-27Y6K5NK.mjs";
@@ -13,12 +13,13 @@ import {
 } from "./chunk-E3G5QXSH.mjs";
 
 // src/components/table/table.tsx
-import { forwardRef, useCallback, useMemo } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from "react";
 import { tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Table = forwardRef((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
   const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
+  const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
   const slots = useMemo(() => table({ ...variantProps }), [...Object.values(variantProps)]);
   const getBaseProps = useCallback(
     (props2) => ({
@@ -34,6 +35,23 @@ var Table = forwardRef((originalProps, ref) => {
     }),
     [classNames == null ? void 0 : classNames.table, slots]
   );
+  const handleSelectAll = (isSelected) => {
+    const newSelectedRows = isSelected ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
+    setSelectedRows(newSelectedRows);
+  };
+  const handleSelectRow = (index) => {
+    const newSelectedRows = new Set(selectedRows);
+    if (newSelectedRows.has(index)) {
+      newSelectedRows.delete(index);
+    } else {
+      newSelectedRows.add(index);
+    }
+    setSelectedRows(newSelectedRows);
+  };
+  useImperativeHandle(ref, () => ({
+    selectedRows,
+    setSelectedRows
+  }));
   return /* @__PURE__ */ jsx("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ jsxs("table", { ...getTableProps(tableComponentsProps), children: [
     /* @__PURE__ */ jsx(
       table_head_default,
@@ -44,7 +62,9 @@ var Table = forwardRef((originalProps, ref) => {
         size: originalProps.size,
         color: originalProps.color === "neutral" ? "primary" : originalProps.color,
         isSelected: originalProps.isSelected,
-        isExpanded: originalProps.isExpanded
+        isExpanded: originalProps.isExpanded,
+        onSelectAll: handleSelectAll,
+        isAllSelected: selectedRows.size === rows.length
       }
     ),
     /* @__PURE__ */ jsx(
@@ -56,10 +76,13 @@ var Table = forwardRef((originalProps, ref) => {
         size: originalProps.size,
         color: originalProps.color === "neutral" ? "primary" : originalProps.color,
         isSelected: originalProps.isSelected,
+        isSelectedRow: originalProps.isSelectedRow,
         isExpanded: originalProps.isExpanded,
         isLoading,
         classNames,
         emptyContent,
+        selectedRows,
+        onSelectRow: handleSelectRow,
         onRowAction
       }
     )
@@ -161,6 +184,9 @@ var table = tv({
     isSelected: {
       true: {}
     },
+    isSelectedRow: {
+      true: {}
+    },
     hideHeader: {
       true: {
         thead: "hidden"

package/dist/{chunk-DLVQWKQG.mjs → chunk-BHSCW5D6.mjs}

@@ -20,12 +20,15 @@ var TableBody = ({
   slots,
   rows,
   columns,
-  isSelected,
   isExpanded,
+  isSelected,
+  isSelectedRow,
+  selectedRows,
   emptyContent,
+  onSelectRow,
   onRowAction
 }) => {
-  const colSpanCount = columns.length + (isExpanded ? 1 : 0) + (isSelected ? 1 : 0);
+  const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (isSelected ? 1 : 0);
   const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
   useEffect(() => {
     setExpandedRows(/* @__PURE__ */ new Set());
@@ -77,20 +80,22 @@ var TableBody = ({
     },
     [classNames == null ? void 0 : classNames.td, columns, slots]
   );
+  const onChangeExpandedRow = (index) => {
+    setExpandedRows((prevIndices) => {
+      const newIndices = new Set(prevIndices);
+      if (newIndices.has(index)) {
+        newIndices.delete(index);
+      } else {
+        newIndices.add(index);
+      }
+      return newIndices;
+    });
+  };
   const handleRowClick = (index) => (e) => {
-    if (isSelected) {
-    }
-    if (isExpanded) {
-      setExpandedRows((prevIndices) => {
-        const newIndices = new Set(prevIndices);
-        if (newIndices.has(index)) {
-          newIndices.delete(index);
-        } else {
-          newIndices.add(index);
-        }
-        return newIndices;
-      });
-    }
+    e.stopPropagation();
+    e.preventDefault();
+    if (isExpanded) onChangeExpandedRow(index);
+    if (isSelected && isSelectedRow) onSelectRow(index);
     const row = rows[index];
     if (row !== void 0) {
       onRowAction == null ? void 0 : onRowAction(e, row);
@@ -100,7 +105,7 @@ var TableBody = ({
     const keys = Object.keys(row);
     return /* @__PURE__ */ jsxs(React.Fragment, { children: [
       /* @__PURE__ */ jsxs("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
-        isSelected && /* @__PURE__ */ jsx("td", { ...getTdProps({ field: "checkbox" }, row, keys), children: /* @__PURE__ */ jsx(checkbox_default, { color, size }) }),
+        isSelected && /* @__PURE__ */ jsx("td", { ...getTdProps({ field: "checkbox" }, row, keys), onClick: () => onSelectRow(rowIndex), children: /* @__PURE__ */ jsx(checkbox_default, { color, size, checked: selectedRows.has(rowIndex) }) }),
         isExpanded && /* @__PURE__ */ jsx("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ jsx(
           Icon_default,
           {
@@ -111,9 +116,9 @@ var TableBody = ({
         ) }),
         columns.map((column, colIndex) => /* @__PURE__ */ createElement("td", { ...getTdProps(column, row, keys), key: colIndex }))
       ] }),
-      isExpanded && expandedRows.has(rowIndex) && /* @__PURE__ */ jsx("tr", { ...getExpandedContentProps(), children: /* @__PURE__ */ jsx("td", { colSpan: colSpanCount, ...getTdProps({ field: "expandedRow" }, row, keys), children: row.renderExpandedRow && row.renderExpandedRow() }) })
+      isExpanded && expandedRows.has(rowIndex) && /* @__PURE__ */ jsx("tr", { ...getExpandedContentProps(), children: /* @__PURE__ */ jsx("td", { colSpan: COL_SPAN_COUNT, ...getTdProps({ field: "expandedRow" }, row, keys), children: row.renderExpandedRow && row.renderExpandedRow() }) })
     ] }, rowIndex);
-  }) : /* @__PURE__ */ jsx("tr", { ...getTrProps(-1), children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, children: emptyContent }) }) });
+  }) : /* @__PURE__ */ jsx("tr", { ...getTrProps(-1), children: /* @__PURE__ */ jsx("td", { colSpan: COL_SPAN_COUNT, children: emptyContent }) }) });
 };
 var table_body_default = TableBody;
 

package/dist/{chunk-G3CX6IWH.mjs → chunk-PUFNT5LS.mjs}

@@ -10,7 +10,17 @@ import {
 import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
-var TableHead = ({ columns, slots, size, color, isSelected, isExpanded, classNames }) => {
+var TableHead = ({
+  columns,
+  slots,
+  size,
+  color,
+  isExpanded,
+  isSelected,
+  isAllSelected,
+  classNames,
+  onSelectAll
+}) => {
   const getTheadProps = useCallback(
     () => ({
       className: slots.thead({ class: clsx(classNames == null ? void 0 : classNames.thead) })
@@ -27,14 +37,16 @@ var TableHead = ({ columns, slots, size, color, isSelected, isExpanded, classNam
     ({ className }) => ({
       className: slots.th({ class: clsx(classNames == null ? void 0 : classNames.th, className) })
     }),
-    [classNames == null ? void 0 : classNames.th, columns, slots]
+    [classNames == null ? void 0 : classNames.th, slots]
   );
+  const handleClickSelectAll = (e) => {
+    e.preventDefault();
+    onSelectAll(!isAllSelected);
+  };
   return /* @__PURE__ */ jsx("thead", { ...getTheadProps(), children: /* @__PURE__ */ jsxs("tr", { ...getTrProps(), children: [
-    isSelected && /* @__PURE__ */ jsx("th", { className: "w-[40px]", children: /* @__PURE__ */ jsx(checkbox_default, { size, color, classNames: { wrapper: "bg-background" } }) }),
+    isSelected && /* @__PURE__ */ jsx("th", { className: "w-[40px]", onClick: handleClickSelectAll, children: /* @__PURE__ */ jsx(checkbox_default, { size, color, checked: isAllSelected, classNames: { wrapper: "bg-background" } }) }),
     isExpanded && /* @__PURE__ */ jsx("th", { className: "w-[40px]" }),
-    columns.map((column, index) => {
-      return /* @__PURE__ */ createElement("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName);
-    })
+    columns.map((column, index) => /* @__PURE__ */ createElement("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName))
   ] }) });
 };
 var table_head_default = TableHead;

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

@@ -1,4 +1,4 @@
-export { default as Table, TableColumn, TableRow } from './table.mjs';
+export { default as Table, TableColumn, TableRef, TableRow } from './table.mjs';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config';
 import 'react';

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

@@ -1,4 +1,4 @@
-export { default as Table, TableColumn, TableRow } from './table.js';
+export { default as Table, TableColumn, TableRef, TableRow } from './table.js';
 import 'tailwind-variants';
 import 'tailwind-variants/dist/config';
 import 'react';

package/dist/components/table/index.js

@@ -307,7 +307,17 @@ var checkbox = tv({
 // src/components/table/table-head.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var import_react3 = require("react");
-var TableHead = ({ columns, slots, size, color, isSelected, isExpanded, classNames }) => {
+var TableHead = ({
+  columns,
+  slots,
+  size,
+  color,
+  isExpanded,
+  isSelected,
+  isAllSelected,
+  classNames,
+  onSelectAll
+}) => {
   const getTheadProps = (0, import_react2.useCallback)(
     () => ({
       className: slots.thead({ class: clsx(classNames == null ? void 0 : classNames.thead) })
@@ -324,14 +334,16 @@ var TableHead = ({ columns, slots, size, color, isSelected, isExpanded, classNam
     ({ className }) => ({
       className: slots.th({ class: clsx(classNames == null ? void 0 : classNames.th, className) })
     }),
-    [classNames == null ? void 0 : classNames.th, columns, slots]
+    [classNames == null ? void 0 : classNames.th, slots]
   );
+  const handleClickSelectAll = (e) => {
+    e.preventDefault();
+    onSelectAll(!isAllSelected);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { ...getTheadProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { ...getTrProps(), children: [
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(checkbox_default, { size, color, classNames: { wrapper: "bg-background" } }) }),
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]", onClick: handleClickSelectAll, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(checkbox_default, { size, color, checked: isAllSelected, classNames: { wrapper: "bg-background" } }) }),
     isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]" }),
-    columns.map((column, index) => {
-      return /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName);
-    })
+    columns.map((column, index) => /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName))
   ] }) });
 };
 var table_head_default = TableHead;
@@ -2740,12 +2752,15 @@ var TableBody = ({
   slots,
   rows,
   columns,
-  isSelected,
   isExpanded,
+  isSelected,
+  isSelectedRow,
+  selectedRows,
   emptyContent,
+  onSelectRow,
   onRowAction
 }) => {
-  const colSpanCount = columns.length + (isExpanded ? 1 : 0) + (isSelected ? 1 : 0);
+  const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (isSelected ? 1 : 0);
   const [expandedRows, setExpandedRows] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
   (0, import_react4.useEffect)(() => {
     setExpandedRows(/* @__PURE__ */ new Set());
@@ -2797,20 +2812,22 @@ var TableBody = ({
     },
     [classNames == null ? void 0 : classNames.td, columns, slots]
   );
+  const onChangeExpandedRow = (index) => {
+    setExpandedRows((prevIndices) => {
+      const newIndices = new Set(prevIndices);
+      if (newIndices.has(index)) {
+        newIndices.delete(index);
+      } else {
+        newIndices.add(index);
+      }
+      return newIndices;
+    });
+  };
   const handleRowClick = (index) => (e) => {
-    if (isSelected) {
-    }
-    if (isExpanded) {
-      setExpandedRows((prevIndices) => {
-        const newIndices = new Set(prevIndices);
-        if (newIndices.has(index)) {
-          newIndices.delete(index);
-        } else {
-          newIndices.add(index);
-        }
-        return newIndices;
-      });
-    }
+    e.stopPropagation();
+    e.preventDefault();
+    if (isExpanded) onChangeExpandedRow(index);
+    if (isSelected && isSelectedRow) onSelectRow(index);
     const row = rows[index];
     if (row !== void 0) {
       onRowAction == null ? void 0 : onRowAction(e, row);
@@ -2820,7 +2837,7 @@ var TableBody = ({
     const keys = Object.keys(row);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react4.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
-        isSelected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "checkbox" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(checkbox_default, { color, size }) }),
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "checkbox" }, row, keys), onClick: () => onSelectRow(rowIndex), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(checkbox_default, { color, size, checked: selectedRows.has(rowIndex) }) }),
         isExpanded && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           Icon_default,
           {
@@ -2831,9 +2848,9 @@ var TableBody = ({
         ) }),
         columns.map((column, colIndex) => /* @__PURE__ */ (0, import_react5.createElement)("td", { ...getTdProps(column, row, keys), key: colIndex }))
       ] }),
-      isExpanded && expandedRows.has(rowIndex) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { ...getExpandedContentProps(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: colSpanCount, ...getTdProps({ field: "expandedRow" }, row, keys), children: row.renderExpandedRow && row.renderExpandedRow() }) })
+      isExpanded && expandedRows.has(rowIndex) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { ...getExpandedContentProps(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: COL_SPAN_COUNT, ...getTdProps({ field: "expandedRow" }, row, keys), children: row.renderExpandedRow && row.renderExpandedRow() }) })
     ] }, rowIndex);
-  }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { ...getTrProps(-1), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: columns.length, children: emptyContent }) }) });
+  }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { ...getTrProps(-1), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: COL_SPAN_COUNT, children: emptyContent }) }) });
 };
 var table_body_default = TableBody;
 
@@ -2843,6 +2860,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, table.variantKeys);
   const { classNames, rows, columns, isLoading, className, emptyContent, onRowAction, ...tableComponentsProps } = props;
+  const [selectedRows, setSelectedRows] = (0, import_react6.useState)(/* @__PURE__ */ new Set());
   const slots = (0, import_react6.useMemo)(() => table({ ...variantProps }), [...Object.values(variantProps)]);
   const getBaseProps = (0, import_react6.useCallback)(
     (props2) => ({
@@ -2858,6 +2876,23 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
     }),
     [classNames == null ? void 0 : classNames.table, slots]
   );
+  const handleSelectAll = (isSelected) => {
+    const newSelectedRows = isSelected ? new Set(rows.map((_, index) => index)) : /* @__PURE__ */ new Set();
+    setSelectedRows(newSelectedRows);
+  };
+  const handleSelectRow = (index) => {
+    const newSelectedRows = new Set(selectedRows);
+    if (newSelectedRows.has(index)) {
+      newSelectedRows.delete(index);
+    } else {
+      newSelectedRows.add(index);
+    }
+    setSelectedRows(newSelectedRows);
+  };
+  (0, import_react6.useImperativeHandle)(ref, () => ({
+    selectedRows,
+    setSelectedRows
+  }));
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, "data-table": "base", ...getBaseProps(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { ...getTableProps(tableComponentsProps), children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       table_head_default,
@@ -2868,7 +2903,9 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
         size: originalProps.size,
         color: originalProps.color === "neutral" ? "primary" : originalProps.color,
         isSelected: originalProps.isSelected,
-        isExpanded: originalProps.isExpanded
+        isExpanded: originalProps.isExpanded,
+        onSelectAll: handleSelectAll,
+        isAllSelected: selectedRows.size === rows.length
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -2880,10 +2917,13 @@ var Table = (0, import_react6.forwardRef)((originalProps, ref) => {
         size: originalProps.size,
         color: originalProps.color === "neutral" ? "primary" : originalProps.color,
         isSelected: originalProps.isSelected,
+        isSelectedRow: originalProps.isSelectedRow,
         isExpanded: originalProps.isExpanded,
         isLoading,
         classNames,
         emptyContent,
+        selectedRows,
+        onSelectRow: handleSelectRow,
         onRowAction
       }
     )
@@ -2985,6 +3025,9 @@ var table = (0, import_tailwind_variants3.tv)({
     isSelected: {
       true: {}
     },
+    isSelectedRow: {
+      true: {}
+    },
     hideHeader: {
       true: {
         thead: "hidden"

package/dist/components/table/index.mjs

@@ -2,9 +2,9 @@
 import "../../chunk-2UUH2MBF.mjs";
 import {
   table_default
-} from "../../chunk-TDMXAHWR.mjs";
-import "../../chunk-G3CX6IWH.mjs";
-import "../../chunk-DLVQWKQG.mjs";
+} from "../../chunk-6U736HAX.mjs";
+import "../../chunk-PUFNT5LS.mjs";
+import "../../chunk-BHSCW5D6.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
 import "../../chunk-BE2OG6M4.mjs";
 import "../../chunk-27Y6K5NK.mjs";

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

@@ -14,10 +14,13 @@ type TableBodyProps = {
     columns: TableColumn[];
     isLoading?: boolean;
     isExpanded?: boolean;
-    emptyContent?: ReactNode;
     isSelected?: boolean;
+    isSelectedRow?: boolean;
+    selectedRows: Set<number>;
+    emptyContent?: ReactNode;
+    onSelectRow: (index: number) => void;
     onRowAction?: (e: react__default.MouseEvent, params: TableRow) => void;
 };
-declare const TableBody: ({ classNames, size, color, slots, rows, columns, isSelected, isExpanded, emptyContent, onRowAction, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
+declare const TableBody: ({ classNames, size, color, slots, rows, columns, isExpanded, isSelected, isSelectedRow, selectedRows, emptyContent, onSelectRow, onRowAction, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
 
 export { TableBody as default };

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

@@ -14,10 +14,13 @@ type TableBodyProps = {
     columns: TableColumn[];
     isLoading?: boolean;
     isExpanded?: boolean;
-    emptyContent?: ReactNode;
     isSelected?: boolean;
+    isSelectedRow?: boolean;
+    selectedRows: Set<number>;
+    emptyContent?: ReactNode;
+    onSelectRow: (index: number) => void;
     onRowAction?: (e: react__default.MouseEvent, params: TableRow) => void;
 };
-declare const TableBody: ({ classNames, size, color, slots, rows, columns, isSelected, isExpanded, emptyContent, onRowAction, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
+declare const TableBody: ({ classNames, size, color, slots, rows, columns, isExpanded, isSelected, isSelectedRow, selectedRows, emptyContent, onSelectRow, onRowAction, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
 
 export { TableBody as default };

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

@@ -2700,12 +2700,15 @@ var TableBody = ({
   slots,
   rows,
   columns,
-  isSelected,
   isExpanded,
+  isSelected,
+  isSelectedRow,
+  selectedRows,
   emptyContent,
+  onSelectRow,
   onRowAction
 }) => {
-  const colSpanCount = columns.length + (isExpanded ? 1 : 0) + (isSelected ? 1 : 0);
+  const COL_SPAN_COUNT = columns.length + (isExpanded ? 1 : 0) + (isSelected ? 1 : 0);
   const [expandedRows, setExpandedRows] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
   (0, import_react2.useEffect)(() => {
     setExpandedRows(/* @__PURE__ */ new Set());
@@ -2757,20 +2760,22 @@ var TableBody = ({
     },
     [classNames == null ? void 0 : classNames.td, columns, slots]
   );
+  const onChangeExpandedRow = (index) => {
+    setExpandedRows((prevIndices) => {
+      const newIndices = new Set(prevIndices);
+      if (newIndices.has(index)) {
+        newIndices.delete(index);
+      } else {
+        newIndices.add(index);
+      }
+      return newIndices;
+    });
+  };
   const handleRowClick = (index) => (e) => {
-    if (isSelected) {
-    }
-    if (isExpanded) {
-      setExpandedRows((prevIndices) => {
-        const newIndices = new Set(prevIndices);
-        if (newIndices.has(index)) {
-          newIndices.delete(index);
-        } else {
-          newIndices.add(index);
-        }
-        return newIndices;
-      });
-    }
+    e.stopPropagation();
+    e.preventDefault();
+    if (isExpanded) onChangeExpandedRow(index);
+    if (isSelected && isSelectedRow) onSelectRow(index);
     const row = rows[index];
     if (row !== void 0) {
       onRowAction == null ? void 0 : onRowAction(e, row);
@@ -2780,7 +2785,7 @@ var TableBody = ({
     const keys = Object.keys(row);
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react2.default.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { ...getTrProps(rowIndex), onClick: handleRowClick(rowIndex), children: [
-        isSelected && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { ...getTdProps({ field: "checkbox" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { color, size }) }),
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { ...getTdProps({ field: "checkbox" }, row, keys), onClick: () => onSelectRow(rowIndex), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(checkbox_default, { color, size, checked: selectedRows.has(rowIndex) }) }),
         isExpanded && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { ...getTdProps({ field: "expandIcon" }, row, keys), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Icon_default,
           {
@@ -2791,8 +2796,8 @@ var TableBody = ({
         ) }),
         columns.map((column, colIndex) => /* @__PURE__ */ (0, import_react3.createElement)("td", { ...getTdProps(column, row, keys), key: colIndex }))
       ] }),
-      isExpanded && expandedRows.has(rowIndex) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { ...getExpandedContentProps(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: colSpanCount, ...getTdProps({ field: "expandedRow" }, row, keys), children: row.renderExpandedRow && row.renderExpandedRow() }) })
+      isExpanded && expandedRows.has(rowIndex) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { ...getExpandedContentProps(), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: COL_SPAN_COUNT, ...getTdProps({ field: "expandedRow" }, row, keys), children: row.renderExpandedRow && row.renderExpandedRow() }) })
     ] }, rowIndex);
-  }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { ...getTrProps(-1), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: columns.length, children: emptyContent }) }) });
+  }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { ...getTrProps(-1), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: COL_SPAN_COUNT, children: emptyContent }) }) });
 };
 var table_body_default = TableBody;

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

@@ -1,7 +1,7 @@
 "use client";
 import {
   table_body_default
-} from "../../chunk-DLVQWKQG.mjs";
+} from "../../chunk-BHSCW5D6.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
 import "../../chunk-BE2OG6M4.mjs";
 import "../../chunk-27Y6K5NK.mjs";

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

@@ -10,10 +10,12 @@ type TableHeadProps = {
     slots: TableReturnType;
     size?: "md" | "sm" | "lg";
     color?: "primary" | "secondary";
-    isSelected?: boolean;
     isExpanded?: boolean;
+    isSelected?: boolean;
+    isAllSelected: boolean;
     classNames?: SlotsToClasses<TableSlots>;
+    onSelectAll: (isSelected: boolean) => void;
 };
-declare const TableHead: ({ columns, slots, size, color, isSelected, isExpanded, classNames }: TableHeadProps) => react_jsx_runtime.JSX.Element;
+declare const TableHead: ({ columns, slots, size, color, isExpanded, isSelected, isAllSelected, classNames, onSelectAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
 
 export { TableHead as default };

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

@@ -10,10 +10,12 @@ type TableHeadProps = {
     slots: TableReturnType;
     size?: "md" | "sm" | "lg";
     color?: "primary" | "secondary";
-    isSelected?: boolean;
     isExpanded?: boolean;
+    isSelected?: boolean;
+    isAllSelected: boolean;
     classNames?: SlotsToClasses<TableSlots>;
+    onSelectAll: (isSelected: boolean) => void;
 };
-declare const TableHead: ({ columns, slots, size, color, isSelected, isExpanded, classNames }: TableHeadProps) => react_jsx_runtime.JSX.Element;
+declare const TableHead: ({ columns, slots, size, color, isExpanded, isSelected, isAllSelected, classNames, onSelectAll, }: TableHeadProps) => react_jsx_runtime.JSX.Element;
 
 export { TableHead as default };

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

@@ -292,7 +292,17 @@ var checkbox = tv({
 // src/components/table/table-head.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var import_react3 = require("react");
-var TableHead = ({ columns, slots, size, color, isSelected, isExpanded, classNames }) => {
+var TableHead = ({
+  columns,
+  slots,
+  size,
+  color,
+  isExpanded,
+  isSelected,
+  isAllSelected,
+  classNames,
+  onSelectAll
+}) => {
   const getTheadProps = (0, import_react2.useCallback)(
     () => ({
       className: slots.thead({ class: clsx(classNames == null ? void 0 : classNames.thead) })
@@ -309,14 +319,16 @@ var TableHead = ({ columns, slots, size, color, isSelected, isExpanded, classNam
     ({ className }) => ({
       className: slots.th({ class: clsx(classNames == null ? void 0 : classNames.th, className) })
     }),
-    [classNames == null ? void 0 : classNames.th, columns, slots]
+    [classNames == null ? void 0 : classNames.th, slots]
   );
+  const handleClickSelectAll = (e) => {
+    e.preventDefault();
+    onSelectAll(!isAllSelected);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("thead", { ...getTheadProps(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("tr", { ...getTrProps(), children: [
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(checkbox_default, { size, color, classNames: { wrapper: "bg-background" } }) }),
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]", onClick: handleClickSelectAll, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(checkbox_default, { size, color, checked: isAllSelected, classNames: { wrapper: "bg-background" } }) }),
     isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("th", { className: "w-[40px]" }),
-    columns.map((column, index) => {
-      return /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName);
-    })
+    columns.map((column, index) => /* @__PURE__ */ (0, import_react3.createElement)("th", { ...getThProps(column), key: column.field + index + "th" }, column.headerName))
   ] }) });
 };
 var table_head_default = TableHead;

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

@@ -1,7 +1,7 @@
 "use client";
 import {
   table_head_default
-} from "../../chunk-G3CX6IWH.mjs";
+} from "../../chunk-PUFNT5LS.mjs";
 import "../../chunk-QZ3LVYJW.mjs";
 import "../../chunk-BE2OG6M4.mjs";
 import "../../chunk-27Y6K5NK.mjs";