@pk-design/react-tailwind 1.5.0 → 1.5.2

package/dist/react-tailwind.cjs.js

@@ -550,7 +550,7 @@ const Card = React.forwardRef(({ as, ...props }, ref) => {
     const Component = as || 'div';
     // Extract className safely from rest
     const { className, ...cleanRest } = rest;
-    const classes = buildClassName(BASE_CARD_CLASS, zeroPadding ? '' : compact ? 'p-2' : 'p-6', hoverable && 'transition-background duration-200 hover:bg-gray-100 dark:hover:bg-gray-800', bordered && 'border border-gray-200 dark:border-gray-800', className);
+    const classes = buildClassName(BASE_CARD_CLASS, zeroPadding ? '' : compact ? 'p-2' : 'p-6', hoverable && 'transition-background duration-200 hover:bg-gray-100 dark:hover:bg-gray-800', bordered && 'border border-[var(--ui-border)]', className);
     return jsxRuntime.jsx(Component, { ref: ref, className: classes, ...cleanRest });
 });
 Card.displayName = 'Card';
@@ -623,7 +623,7 @@ const TableRowLoader = ({ colSize, rowSize }) => (jsxRuntime.jsx(jsxRuntime.Frag
 /* ----------------------------------------------
  * Table
  * ---------------------------------------------- */
-const Table = ({ children, layout = 'auto', className = '', caption, }) => (jsxRuntime.jsxs("table", { className: buildClassName('border-collapse w-full divide-y divide-gray-200 dark:divide-gray-700', TABLE_LAYOUT[layout], className), children: [caption && (jsxRuntime.jsx("caption", { className: "mb-2 text-sm text-left text-gray-500 dark:text-gray-400", children: caption })), children] }));
+const Table = ({ children, layout = 'auto', className = '', caption, }) => (jsxRuntime.jsxs("table", { className: buildClassName('border-collapse w-full divide-y divide-[var(--ui-border)]', TABLE_LAYOUT[layout], className), children: [caption && (jsxRuntime.jsx("caption", { className: "mb-2 text-sm text-left text-gray-500 dark:text-gray-400", children: caption })), children] }));
 /* ----------------------------------------------
  * Head
  * ---------------------------------------------- */
@@ -631,7 +631,7 @@ const TableHead = ({ children, className = '' }) => (jsxRuntime.jsx("thead", { c
 /* ----------------------------------------------
  * Body
  * ---------------------------------------------- */
-const TableBody = ({ children, loading, colSize = 1, rowSize = 5, className, }) => (jsxRuntime.jsx("tbody", { className: buildClassName('text-sm text-gray-700 dark:text-white divide-y divide-gray-200 dark:divide-gray-700', className), children: loading ? jsxRuntime.jsx(TableRowLoader, { colSize: colSize, rowSize: rowSize }) : children }));
+const TableBody = ({ children, loading, colSize = 1, rowSize = 5, className, }) => (jsxRuntime.jsx("tbody", { className: buildClassName('text-sm text-gray-700 dark:text-white divide-y divide-[var(--ui-border)]', className), children: loading ? jsxRuntime.jsx(TableRowLoader, { colSize: colSize, rowSize: rowSize }) : children }));
 /* ----------------------------------------------
  * Foot
  * ---------------------------------------------- */
@@ -639,7 +639,7 @@ const TableFoot = ({ children }) => (jsxRuntime.jsx("tfoot", { children: jsxRunt
 /* ----------------------------------------------
  * Rows
  * ---------------------------------------------- */
-const TableRow = ({ children, hoverable = false, className, ...props }) => (jsxRuntime.jsx("tr", { ...props, className: buildClassName('last:border-b border-gray-200 dark:border-gray-700', hoverable && 'group', className), children: children }));
+const TableRow = ({ children, hoverable = false, className, ...props }) => (jsxRuntime.jsx("tr", { ...props, className: buildClassName('last:border-b border-[var(--ui-border)]', hoverable && 'group', className), children: children }));
 /* ----------------------------------------------
  * Cells
  * ---------------------------------------------- */
@@ -790,6 +790,48 @@ const updateSortQuery = (sortQuery, name, type = 'string') => {
     }
     return updated;
 };
+/**
+ * Shared row-selection state/behaviour used by DataTable and VirtualizedDataTable.
+ * Supports controlled (`selectedRowKeys`) and uncontrolled (`defaultSelectedRowKeys`) usage.
+ */
+const useRowSelection = ({ items, getKey, selectedRowKeys, defaultSelectedRowKeys = [], onSelectionChange, isRowSelectable, }) => {
+    const [internalKeys, setInternalKeys] = React.useState(defaultSelectedRowKeys);
+    const isControlled = selectedRowKeys !== undefined;
+    const keys = isControlled ? selectedRowKeys : internalKeys;
+    const keySet = React.useMemo(() => new Set(keys), [keys]);
+    const selectableEntries = React.useMemo(() => items
+        .map((item, idx) => ({ item, key: getKey(item, idx) }))
+        .filter(({ item }) => !isRowSelectable || isRowSelectable(item)), [items, getKey, isRowSelectable]);
+    const emit = React.useCallback((nextKeys) => {
+        if (!isControlled)
+            setInternalKeys(nextKeys);
+        const nextKeySet = new Set(nextKeys);
+        const nextItems = items.filter((item, idx) => nextKeySet.has(getKey(item, idx)));
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(nextKeys, nextItems);
+    }, [isControlled, items, getKey, onSelectionChange]);
+    const toggleRow = React.useCallback((key) => {
+        emit(keySet.has(key) ? keys.filter((k) => k !== key) : [...keys, key]);
+    }, [keys, keySet, emit]);
+    const allSelected = selectableEntries.length > 0 && selectableEntries.every(({ key }) => keySet.has(key));
+    const someSelected = !allSelected && selectableEntries.some(({ key }) => keySet.has(key));
+    const toggleAll = React.useCallback(() => {
+        const selectableKeySet = new Set(selectableEntries.map(({ key }) => key));
+        if (allSelected) {
+            emit(keys.filter((k) => !selectableKeySet.has(k)));
+        }
+        else {
+            emit(Array.from(new Set([...keys, ...selectableKeySet])));
+        }
+    }, [allSelected, selectableEntries, keys, emit]);
+    return {
+        selectedKeys: keys,
+        isSelected: (key) => keySet.has(key),
+        toggleRow,
+        toggleAll,
+        allSelected,
+        someSelected,
+    };
+};
 
 var _path$7;
 function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
@@ -923,7 +965,7 @@ const autoSortItems = (items, column, sort) => {
         return 0;
     });
 };
-function DataTable({ items, columns, sorting = {}, onSort, loading, pagination, setPagination = () => { }, emptyMessage = 'No data found', containerClass = '', wrapperClass = '', tableClass = '', headClass = '', footerRow, rowKey = 'id', onRowClick, rowClass, density = 'default', striped = false, layout = 'auto', }) {
+function DataTable({ items, columns, sorting = {}, onSort, loading, pagination, setPagination = () => { }, emptyMessage = 'No data found', containerClass = '', wrapperClass = '', tableClass = '', headClass = '', footerRow, rowKey = 'id', onRowClick, rowClass, density = 'default', striped = false, layout = 'auto', selectable = false, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, }) {
     const internalSorting = React.useRef({});
     const [sortedItems, setSortedItems] = React.useState(items);
     React.useEffect(() => {
@@ -958,17 +1000,33 @@ function DataTable({ items, columns, sorting = {}, onSort, loading, pagination,
             return column.cellClass(item);
         return column.cellClass;
     };
+    const { isSelected, toggleRow, toggleAll, allSelected, someSelected } = useRowSelection({
+        items: sortedItems,
+        getKey,
+        selectedRowKeys,
+        defaultSelectedRowKeys,
+        onSelectionChange,
+        isRowSelectable,
+    });
     const densityCellClass = DENSITY_CELL_CLASS$2[density];
-    return (jsxRuntime.jsxs("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: [jsxRuntime.jsx("div", { className: buildClassName('overflow-x-auto overflow-y-hidden rounded-lg border border-gray-200 dark:border-gray-800', wrapperClass, pagination && 'rounded-b-none border-b-0'), children: jsxRuntime.jsxs(Table, { className: buildClassName('relative w-full max-w-full h-fit', tableClass), layout: layout, children: [jsxRuntime.jsx(TableHead, { className: headClass, children: columns.map((column) => (jsxRuntime.jsx(TableHeaderCell, { align: column.headerAlign, style: { width: column.width || 'auto' }, className: buildClassName('bg-gray-50 dark:bg-gray-800', densityCellClass, column.sticky === 'left' &&
-                                    'sticky left-0 z-10 shadow-[2px_0_6px_rgba(0,0,0,0.06)]', column.sticky === 'right' &&
-                                    'sticky right-0 z-10 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]', column.headerClass), children: jsxRuntime.jsxs(TextContent, { role: column.sortable ? 'button' : undefined, className: buildClassName('group', column.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none'), onClick: () => handleSort(column), children: [jsxRuntime.jsx(TextContent, { className: "shrink-0", children: column.label }), column.sortable ? getSortIcon(sorting[column.name]) : null] }) }, column.name))) }), jsxRuntime.jsx(TableBody, { loading: loading, colSize: columns.length, rowSize: (pagination === null || pagination === void 0 ? void 0 : pagination.limit) || 5, children: !loading && sortedItems.length === 0 ? (jsxRuntime.jsx(EmptyTableRow, { colSpan: columns.length, children: emptyMessage })) : (sortedItems.map((item, idx) => (jsxRuntime.jsx(TableRow, { className: buildClassName('group', onRowClick && 'cursor-pointer', striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40', getRowClass(item, idx)), onClick: onRowClick ? () => onRowClick(item, idx) : undefined, children: columns.map((column) => {
-                                    var _a;
-                                    return (jsxRuntime.jsx(TableCell, { align: column.align, className: buildClassName(densityCellClass, striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40', column.sticky === 'left' &&
-                                            'sticky left-0 z-10 shadow-[2px_0_6px_rgba(0,0,0,0.06)]', column.sticky === 'right' &&
-                                            'sticky right-0 z-10 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]', getCellClass(column, item)), children: column.render
-                                            ? column.render(item)
-                                            : ((_a = get(item, column.name)) !== null && _a !== void 0 ? _a : 'Not set') }, column.name));
-                                }) }, getKey(item, idx))))) }), footerRow && jsxRuntime.jsx(TableFoot, { children: footerRow })] }) }), pagination && (jsxRuntime.jsx(Pagination, { ...pagination, className: "rounded-b-lg border border-t-0 border-gray-200 dark:border-gray-800", onChange: setPagination }))] }));
+    const colSize = columns.length + (selectable ? 1 : 0);
+    return (jsxRuntime.jsxs("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: [jsxRuntime.jsx("div", { className: buildClassName('overflow-x-auto overflow-y-hidden rounded-lg border border-[var(--ui-border)]', wrapperClass, pagination && 'rounded-b-none border-b-0'), children: jsxRuntime.jsxs(Table, { className: buildClassName('relative w-full max-w-full h-fit', tableClass), layout: layout, children: [jsxRuntime.jsxs(TableHead, { className: headClass, children: [selectable && (jsxRuntime.jsx(TableHeaderCell, { className: buildClassName('bg-gray-50 dark:bg-gray-800 w-px', densityCellClass), children: jsxRuntime.jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
+                                            if (el)
+                                                el.indeterminate = someSelected;
+                                        }, onChange: toggleAll }) })), columns.map((column) => (jsxRuntime.jsx(TableHeaderCell, { align: column.headerAlign, style: { width: column.width || 'auto' }, className: buildClassName('bg-gray-50 dark:bg-gray-800', densityCellClass, column.sticky === 'left' &&
+                                        'sticky left-0 z-10 shadow-[2px_0_6px_rgba(0,0,0,0.06)]', column.sticky === 'right' &&
+                                        'sticky right-0 z-10 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]', column.headerClass), children: jsxRuntime.jsxs(TextContent, { role: column.sortable ? 'button' : undefined, className: buildClassName('group', column.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none'), onClick: () => handleSort(column), children: [jsxRuntime.jsx(TextContent, { className: "shrink-0", children: column.label }), column.sortable ? getSortIcon(sorting[column.name]) : null] }) }, column.name)))] }), jsxRuntime.jsx(TableBody, { loading: loading, colSize: colSize, rowSize: (pagination === null || pagination === void 0 ? void 0 : pagination.limit) || 5, children: !loading && sortedItems.length === 0 ? (jsxRuntime.jsx(EmptyTableRow, { colSpan: colSize, children: emptyMessage })) : (sortedItems.map((item, idx) => {
+                                const key = getKey(item, idx);
+                                const rowSelectable = !isRowSelectable || isRowSelectable(item);
+                                return (jsxRuntime.jsxs(TableRow, { className: buildClassName('group', onRowClick && 'cursor-pointer', striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40', getRowClass(item, idx)), onClick: onRowClick ? () => onRowClick(item, idx) : undefined, children: [selectable && (jsxRuntime.jsx(TableCell, { className: buildClassName(densityCellClass, striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40'), children: jsxRuntime.jsx("span", { onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx(Checkbox, { "aria-label": "Select row", checked: isSelected(key), disabled: !rowSelectable, onChange: () => toggleRow(key) }) }) })), columns.map((column) => {
+                                            var _a;
+                                            return (jsxRuntime.jsx(TableCell, { align: column.align, className: buildClassName(densityCellClass, striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40', column.sticky === 'left' &&
+                                                    'sticky left-0 z-10 shadow-[2px_0_6px_rgba(0,0,0,0.06)]', column.sticky === 'right' &&
+                                                    'sticky right-0 z-10 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]', getCellClass(column, item)), children: column.render
+                                                    ? column.render(item)
+                                                    : ((_a = get(item, column.name)) !== null && _a !== void 0 ? _a : 'Not set') }, column.name));
+                                        })] }, key));
+                            })) }), footerRow && jsxRuntime.jsx(TableFoot, { children: footerRow })] }) }), pagination && (jsxRuntime.jsx(Pagination, { ...pagination, className: "rounded-b-lg border border-t-0 border-[var(--ui-border)]", onChange: setPagination }))] }));
 }
 DataTable.displayName = 'DataTable';
 
@@ -986,10 +1044,10 @@ const HeadingText = {
 };
 
 const DetailedInformation = React.forwardRef((props, ref) => {
-    const { className, title, subTitle, details, compact = false, divider = true, titleClass, detailsClass, ...divProps } = props;
+    const { className, title, subTitle, details, compact = false, divider = true, titleClass, detailsClass, bordered = false, ...divProps } = props;
     const hasTitles = title || subTitle;
     const filteredDetails = details.filter((detail) => !detail.hidden);
-    return (jsxRuntime.jsxs("div", { className: buildClassName('p-2 md:p-4', compact ? 'md:p-2' : '', className), ref: ref, ...divProps, children: [hasTitles && (jsxRuntime.jsxs("div", { className: "px-4 sm:px-0 pt-2 sm:pt-0 mb-2", children: [title && (jsxRuntime.jsx(HeadingText.SubTitle2, { className: buildClassName(titleClass), children: title })), subTitle && (jsxRuntime.jsx("p", { className: "mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-300", children: subTitle }))] })), filteredDetails.length ? (jsxRuntime.jsx("div", { className: buildClassName('border-gray-100 dark:border-gray-700', hasTitles && 'border-t', detailsClass), children: jsxRuntime.jsx("dl", { className: buildClassName(divider && 'divide-y divide-gray-100 dark:divide-gray-700'), children: filteredDetails.map((detail) => (jsxRuntime.jsxs("div", { className: buildClassName('px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center', compact ? 'py-1.5' : 'py-2.5'), children: [jsxRuntime.jsx("dt", { className: "text-sm/6 font-medium text-gray-900 dark:text-gray-100", children: detail.label }), jsxRuntime.jsx("dd", { className: buildClassName('mt-1 text-sm/6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0', detail.contentClass), children: detail.value || '- -' })] }, detail.label))) }) })) : null] }));
+    return (jsxRuntime.jsxs("div", { className: buildClassName('p-2 md:p-4', compact ? 'md:p-2' : '', bordered ? 'border border-[var(--ui-border)]' : '', className), ref: ref, ...divProps, children: [hasTitles && (jsxRuntime.jsxs("div", { className: "px-4 sm:px-0 pt-2 sm:pt-0 mb-2", children: [title && (jsxRuntime.jsx(HeadingText.SubTitle2, { className: buildClassName(titleClass), children: title })), subTitle && (jsxRuntime.jsx("p", { className: "mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-300", children: subTitle }))] })), filteredDetails.length ? (jsxRuntime.jsx("div", { className: buildClassName('border-[var(--ui-border-muted)]', hasTitles && 'border-t', detailsClass), children: jsxRuntime.jsx("dl", { className: buildClassName(divider && 'divide-y divide-[var(--ui-border-muted)]'), children: filteredDetails.map((detail) => (jsxRuntime.jsxs("div", { className: buildClassName('px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center', compact ? 'py-1.5' : 'py-2.5'), children: [jsxRuntime.jsx("dt", { className: "text-sm/6 font-medium text-gray-900 dark:text-gray-100", children: detail.label }), jsxRuntime.jsx("dd", { className: buildClassName('mt-1 text-sm/6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0', detail.contentClass), children: detail.value || '- -' })] }, detail.label))) }) })) : null] }));
 });
 DetailedInformation.displayName = 'DetailedInformation';
 
@@ -1029,7 +1087,7 @@ Drawer.displayName = 'Drawer';
 
 const BASE_ITEM_CLASS = 'flex w-full px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg';
 const Dropdown = ({ triggerButton, renderTriggerButton, items, renderItem, itemsContainerClass, transition = true, anchor = 'bottom start', menuItemClass, onMenuClick, }) => {
-    return (jsxRuntime.jsxs(react.Menu, { as: "div", className: "relative inline-block", children: [renderTriggerButton ? (jsxRuntime.jsx(react.MenuButton, { as: React.Fragment, children: (state) => renderTriggerButton(state) })) : (jsxRuntime.jsx(react.MenuButton, { as: React.Fragment, children: triggerButton })), jsxRuntime.jsx(react.MenuItems, { transition: transition, anchor: anchor, className: buildClassName('w-52 origin-top-right rounded-xl shadow-sm p-1 text-sm transition duration-100 ease-out', 'border border-gray-100 bg-white text-gray-800', 'dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled }) => (jsxRuntime.jsx("div", { onClick: () => !disabled && (onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(item, idx)), className: buildClassName(BASE_ITEM_CLASS, menuItemClass, disabled && 'cursor-not-allowed opacity-70'), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? renderItem(item) : item.label })) }), item.divider && (jsxRuntime.jsx("li", { className: "my-1 h-px bg-gray-200 dark:bg-white/5", "data-testid": "dropdown-divider" }, item.id))] }, item.id))) })] }));
+    return (jsxRuntime.jsxs(react.Menu, { as: "div", className: "relative inline-block", children: [renderTriggerButton ? (jsxRuntime.jsx(react.MenuButton, { as: React.Fragment, children: (state) => renderTriggerButton(state) })) : (jsxRuntime.jsx(react.MenuButton, { as: React.Fragment, children: triggerButton })), jsxRuntime.jsx(react.MenuItems, { transition: transition, anchor: anchor, className: buildClassName('w-52 origin-top-right rounded-xl shadow-sm p-1 text-sm transition duration-100 ease-out', 'border border-[var(--ui-border-muted)] bg-white text-gray-800', 'dark:bg-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled }) => (jsxRuntime.jsx("div", { onClick: () => !disabled && (onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(item, idx)), className: buildClassName(BASE_ITEM_CLASS, menuItemClass, disabled && 'cursor-not-allowed opacity-70'), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? renderItem(item) : item.label })) }), item.divider && (jsxRuntime.jsx("li", { className: "my-1 h-px bg-gray-200 dark:bg-white/5", "data-testid": "dropdown-divider" }, item.id))] }, item.id))) })] }));
 };
 Dropdown.displayName = 'Dropdown';
 
@@ -1635,9 +1693,12 @@ const DENSITY_CELL_CLASS$1 = {
     spacious: 'px-4 py-4',
 };
 const VirtualizedRow = ({ index, style, data, }) => {
-    const { items, columns, gridTemplate, onRowClick, rowClass, density = 'default', striped } = data;
+    var _a, _b;
+    const { items, columns, gridTemplate, onRowClick, rowClass, density = 'default', striped, selectable, getKey, isSelected, toggleRow, isRowSelectable, } = data;
     const item = items[index];
     const isStriped = striped && index % 2 === 1;
+    const key = (_a = getKey === null || getKey === void 0 ? void 0 : getKey(item, index)) !== null && _a !== void 0 ? _a : index;
+    const rowSelectable = !isRowSelectable || isRowSelectable(item);
     const resolvedRowClass = !rowClass
         ? ''
         : typeof rowClass === 'function'
@@ -1651,20 +1712,21 @@ const VirtualizedRow = ({ index, style, data, }) => {
         return col.cellClass;
     };
     const densityCellClass = DENSITY_CELL_CLASS$1[density];
-    return (jsxRuntime.jsx("div", { role: "row", className: buildClassName('grid border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 group', onRowClick && 'cursor-pointer', isStriped && 'bg-gray-50 dark:bg-gray-800/40', resolvedRowClass), style: {
+    return (jsxRuntime.jsxs("div", { role: "row", className: buildClassName('grid border-b border-[var(--ui-border)] bg-white dark:bg-gray-900 group', onRowClick && 'cursor-pointer', isStriped && 'bg-gray-50 dark:bg-gray-800/40', resolvedRowClass), style: {
             ...style,
             display: 'grid',
             gridTemplateColumns: gridTemplate,
             minWidth: 'fit-content',
-        }, onClick: onRowClick ? () => onRowClick(item, index) : undefined, children: columns.map((col) => {
-            var _a;
-            const content = col.render ? col.render(item) : ((_a = get(item, col.name)) !== null && _a !== void 0 ? _a : 'Not set');
-            return (jsxRuntime.jsx("div", { role: "cell", className: buildClassName('whitespace-nowrap border-r last:border-r-0 border-gray-200 dark:border-gray-700', densityCellClass, col.align === 'center' && 'text-center', col.align === 'right' && 'text-right', col.sticky === 'left' &&
-                    'sticky left-0 z-10 bg-white dark:bg-gray-900 shadow-[2px_0_4px_rgba(0,0,0,0.05)]', col.sticky === 'right' &&
-                    'sticky right-0 z-10 bg-white dark:bg-gray-900 shadow-[-2px_0_4px_rgba(0,0,0,0.05)]', isStriped && 'bg-gray-50 dark:bg-gray-800/40', getCellClass(col)), children: content }, col.name));
-        }) }));
+        }, onClick: onRowClick ? () => onRowClick(item, index) : undefined, children: [selectable && (jsxRuntime.jsx("div", { role: "cell", className: buildClassName('flex items-center whitespace-nowrap border-r last:border-r-0 border-[var(--ui-border)]', densityCellClass, isStriped && 'bg-gray-50 dark:bg-gray-800/40'), onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx(Checkbox, { "aria-label": "Select row", checked: (_b = isSelected === null || isSelected === void 0 ? void 0 : isSelected(key)) !== null && _b !== void 0 ? _b : false, disabled: !rowSelectable, onChange: () => toggleRow === null || toggleRow === void 0 ? void 0 : toggleRow(key) }) })), columns.map((col) => {
+                var _a;
+                const content = col.render ? col.render(item) : ((_a = get(item, col.name)) !== null && _a !== void 0 ? _a : 'Not set');
+                return (jsxRuntime.jsx("div", { role: "cell", className: buildClassName('whitespace-nowrap border-r last:border-r-0 border-[var(--ui-border)]', densityCellClass, col.align === 'center' && 'text-center', col.align === 'right' && 'text-right', col.sticky === 'left' &&
+                        'sticky left-0 z-10 bg-white dark:bg-gray-900 shadow-[2px_0_4px_rgba(0,0,0,0.05)]', col.sticky === 'right' &&
+                        'sticky right-0 z-10 bg-white dark:bg-gray-900 shadow-[-2px_0_4px_rgba(0,0,0,0.05)]', isStriped && 'bg-gray-50 dark:bg-gray-800/40', getCellClass(col)), children: content }, col.name));
+            })] }));
 };
 
+const SELECTION_COLUMN_WIDTH = '44px';
 const DENSITY_CELL_CLASS = {
     compact: 'px-2 py-1.5',
     default: 'px-3 py-3',
@@ -1677,11 +1739,28 @@ const columnWidth = (col) => {
         return `${col.width}px`;
     return col.width;
 };
-function VirtualizedDataTable({ items, columns, sorting = {}, onSort, loading = false, emptyMessage = 'No data available', containerClass = '', wrapperClass = '', onRowClick, rowClass, density = 'default', striped = false, rowHeight = 48, maxHeight = 400, overscanCount = 3, }) {
+function VirtualizedDataTable({ items, columns, sorting = {}, onSort, loading = false, emptyMessage = 'No data available', containerClass = '', wrapperClass = '', onRowClick, rowClass, density = 'default', striped = false, rowHeight = 48, maxHeight = 400, overscanCount = 3, rowKey = 'id', selectable = false, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, }) {
     const scrollRef = React.useRef(null);
     const outerRef = React.useRef(null);
     const headerRef = React.useRef(null);
-    const gridTemplate = React.useMemo(() => columns.map((col) => columnWidth(col)).join(' '), [columns]);
+    const getKey = React.useCallback((item, idx) => {
+        var _a;
+        if (typeof rowKey === 'function')
+            return rowKey(item);
+        return (_a = item[rowKey]) !== null && _a !== void 0 ? _a : idx;
+    }, [rowKey]);
+    const { isSelected, toggleRow, toggleAll, allSelected, someSelected } = useRowSelection({
+        items,
+        getKey,
+        selectedRowKeys,
+        defaultSelectedRowKeys,
+        onSelectionChange,
+        isRowSelectable,
+    });
+    const gridTemplate = React.useMemo(() => {
+        const widths = columns.map((col) => columnWidth(col));
+        return selectable ? [SELECTION_COLUMN_WIDTH, ...widths].join(' ') : widths.join(' ');
+    }, [columns, selectable]);
     const densityCellClass = DENSITY_CELL_CLASS[density];
     const skeletonRows = Math.max(1, Math.floor(maxHeight / rowHeight));
     React.useEffect(() => {
@@ -1699,19 +1778,48 @@ function VirtualizedDataTable({ items, columns, sorting = {}, onSort, loading =
         if (column.sortable)
             onSort === null || onSort === void 0 ? void 0 : onSort(column);
     }, [onSort]);
-    const itemData = React.useMemo(() => ({ items, columns, gridTemplate, onRowClick, rowClass, density, striped }), [items, columns, gridTemplate, onRowClick, rowClass, density, striped]);
+    const itemData = React.useMemo(() => ({
+        items,
+        columns,
+        gridTemplate,
+        onRowClick,
+        rowClass,
+        density,
+        striped,
+        selectable,
+        getKey,
+        isSelected,
+        toggleRow,
+        isRowSelectable,
+    }), [
+        items,
+        columns,
+        gridTemplate,
+        onRowClick,
+        rowClass,
+        density,
+        striped,
+        selectable,
+        getKey,
+        isSelected,
+        toggleRow,
+        isRowSelectable,
+    ]);
     /* -------------------------------------------------------
      * Header
      * ------------------------------------------------------- */
-    const Header = (jsxRuntime.jsx("div", { ref: headerRef, className: "overflow-hidden w-full", children: jsxRuntime.jsx("div", { className: "grid bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", style: { gridTemplateColumns: gridTemplate, minWidth: 'fit-content' }, children: columns.map((col) => (jsxRuntime.jsx("div", { role: "columnheader", className: buildClassName('font-semibold text-sm whitespace-nowrap flex items-center', densityCellClass, 'border-r last:border-r-0 border-gray-200 dark:border-gray-700', col.sticky === 'left' &&
-                    'sticky left-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[2px_0_4px_rgba(0,0,0,0.05)]', col.sticky === 'right' &&
-                    'sticky right-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[-2px_0_4px_rgba(0,0,0,0.05)]', col.headerClass), children: jsxRuntime.jsxs(TextContent, { role: col.sortable ? 'button' : undefined, className: buildClassName(col.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none'), onClick: () => handleSort(col), children: [col.label, col.sortable ? getSortIcon(sorting[col.name]) : null] }) }, col.name))) }) }));
-    const wrapperCls = buildClassName('rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden', wrapperClass);
+    const Header = (jsxRuntime.jsx("div", { ref: headerRef, className: "overflow-hidden w-full", children: jsxRuntime.jsxs("div", { className: "grid bg-gray-50 dark:bg-gray-800 border-b border-[var(--ui-border)]", style: { gridTemplateColumns: gridTemplate, minWidth: 'fit-content' }, children: [selectable && (jsxRuntime.jsx("div", { role: "columnheader", className: buildClassName('flex items-center border-r last:border-r-0 border-[var(--ui-border)]', densityCellClass), children: jsxRuntime.jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
+                            if (el)
+                                el.indeterminate = someSelected;
+                        }, onChange: toggleAll }) })), columns.map((col) => (jsxRuntime.jsx("div", { role: "columnheader", className: buildClassName('font-semibold text-sm whitespace-nowrap flex items-center', densityCellClass, 'border-r last:border-r-0 border-[var(--ui-border)]', col.sticky === 'left' &&
+                        'sticky left-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[2px_0_4px_rgba(0,0,0,0.05)]', col.sticky === 'right' &&
+                        'sticky right-0 z-20 bg-gray-50 dark:bg-gray-800 shadow-[-2px_0_4px_rgba(0,0,0,0.05)]', col.headerClass), children: jsxRuntime.jsxs(TextContent, { role: col.sortable ? 'button' : undefined, className: buildClassName(col.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none'), onClick: () => handleSort(col), children: [col.label, col.sortable ? getSortIcon(sorting[col.name]) : null] }) }, col.name)))] }) }));
+    const wrapperCls = buildClassName('rounded-lg border border-[var(--ui-border)] overflow-hidden', wrapperClass);
     /* -------------------------------------------------------
      * Loading state
      * ------------------------------------------------------- */
     if (loading) {
-        return (jsxRuntime.jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxRuntime.jsxs("div", { className: wrapperCls, children: [Header, jsxRuntime.jsx("div", { style: { height: maxHeight }, className: "flex flex-col", children: Array.from({ length: skeletonRows }).map((_, idx) => (jsxRuntime.jsx("div", { "data-testid": "skeleton-row", className: "grid animate-pulse bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800", style: { gridTemplateColumns: gridTemplate, height: rowHeight }, children: columns.map((col) => (jsxRuntime.jsx("div", { className: densityCellClass, children: jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded" }) }, col.name))) }, idx))) })] }) }));
+        return (jsxRuntime.jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxRuntime.jsxs("div", { className: wrapperCls, children: [Header, jsxRuntime.jsx("div", { style: { height: maxHeight }, className: "flex flex-col", children: Array.from({ length: skeletonRows }).map((_, idx) => (jsxRuntime.jsxs("div", { "data-testid": "skeleton-row", className: "grid animate-pulse bg-white dark:bg-gray-900 border-b border-[var(--ui-border-muted)]", style: { gridTemplateColumns: gridTemplate, height: rowHeight }, children: [selectable && jsxRuntime.jsx("div", { className: densityCellClass }), columns.map((col) => (jsxRuntime.jsx("div", { className: densityCellClass, children: jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded" }) }, col.name)))] }, idx))) })] }) }));
     }
     /* -------------------------------------------------------
      * Empty state
@@ -1822,5 +1930,6 @@ exports.useIsMobile = useIsMobile;
 exports.useIsTablet = useIsTablet;
 exports.useIsTabletOrMobile = useIsTabletOrMobile;
 exports.usePagination = usePagination;
+exports.useRowSelection = useRowSelection;
 exports.useToast = useToast;
 //# sourceMappingURL=react-tailwind.cjs.js.map