@pk-design/react-tailwind 1.4.4 → 1.5.1

package/dist/react-tailwind.es.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, useMemo, useId, useRef, useState, useEffect, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext } from 'react';
+import React__default, { useId, useMemo, useState, forwardRef, Children, isValidElement, cloneElement, useCallback, useRef, useEffect, Fragment as Fragment$1, useImperativeHandle, createContext, useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, Menu, MenuButton, MenuItems, MenuItem, RadioGroup as RadioGroup$1, Radio as Radio$1, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption, TabGroup, TabList, Tab, TabPanels, TabPanel, Transition } from '@headlessui/react';
 import { FixedSizeList } from 'react-window';
 
 const buildClassName = (...classes) => twMerge(classes.filter(Boolean));
 
-var _path$i, _path2;
+var _path$i;
 function _extends$i() { return _extends$i = 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$i.apply(null, arguments); }
-var SvgBadgeCheck = function SvgBadgeCheck(props) {
+var SvgChevronDown = function SvgChevronDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -19,19 +19,90 @@ var SvgBadgeCheck = function SvgBadgeCheck(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    className: "lucide lucide-badge-check-icon lucide-badge-check",
+    className: "lucide lucide-chevron-down-icon lucide-chevron-down",
     viewBox: "0 0 24 24"
   }, props), _path$i || (_path$i = /*#__PURE__*/React.createElement("path", {
+    d: "m6 9 6 6 6-6"
+  })));
+};
+
+const CONTAINER_CLASS = {
+    bordered: 'rounded-lg border border-gray-200 dark:border-white/10 divide-y divide-gray-200 dark:divide-white/10 bg-white dark:bg-gray-800 overflow-hidden',
+    separated: 'space-y-2',
+    plain: 'divide-y divide-gray-200 dark:divide-white/10',
+};
+const ITEM_CLASS = {
+    bordered: '',
+    separated: 'rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-800 overflow-hidden',
+    plain: '',
+};
+const HEADER_CLASS = 'flex w-full items-center justify-between gap-2 py-3 px-4 text-left text-sm font-medium ' +
+    'text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700/50 ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ui-focus-ring)] ' +
+    'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none ' +
+    'transition-colors duration-150 cursor-pointer';
+const Accordion = ({ items, type = 'single', variant = 'bordered', collapsible = true, defaultOpenIds, openIds: controlledOpenIds, onChange, expandIcon, className = '', titleClass = '', panelClass = '', }) => {
+    const baseId = useId();
+    const resolvedItems = useMemo(() => items.map((item, index) => { var _a; return ({ ...item, id: (_a = item.id) !== null && _a !== void 0 ? _a : index }); }), [items]);
+    const [uncontrolledOpenIds, setUncontrolledOpenIds] = useState(defaultOpenIds !== null && defaultOpenIds !== void 0 ? defaultOpenIds : []);
+    const isControlled = controlledOpenIds !== undefined;
+    const openIds = isControlled ? controlledOpenIds : uncontrolledOpenIds;
+    const toggle = (id) => {
+        const isOpen = openIds.includes(id);
+        const next = type === 'single'
+            ? isOpen
+                ? collapsible
+                    ? []
+                    : openIds
+                : [id]
+            : isOpen
+                ? openIds.filter((openId) => openId !== id)
+                : [...openIds, id];
+        if (next === openIds)
+            return;
+        if (!isControlled)
+            setUncontrolledOpenIds(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
+    const renderIndicator = (isOpen) => {
+        if (typeof expandIcon === 'function')
+            return expandIcon(isOpen);
+        return (jsx("span", { className: buildClassName('inline-flex shrink-0 transition-transform duration-200', isOpen && 'rotate-180'), children: expandIcon !== null && expandIcon !== void 0 ? expandIcon : jsx(SvgChevronDown, { className: "size-4 stroke-gray-500 dark:stroke-gray-400" }) }));
+    };
+    return (jsx("div", { className: buildClassName(CONTAINER_CLASS[variant], className), children: resolvedItems.map((item) => {
+            const isOpen = openIds.includes(item.id);
+            const headerId = `${baseId}-${item.id}-header`;
+            const panelId = `${baseId}-${item.id}-panel`;
+            return (jsxs("div", { className: ITEM_CLASS[variant], children: [jsx("h3", { className: "m-0", children: jsxs("button", { type: "button", id: headerId, "aria-expanded": isOpen, "aria-controls": panelId, disabled: item.disabled, onClick: () => toggle(item.id), className: buildClassName(HEADER_CLASS, titleClass, item.titleClass), children: [jsxs("span", { className: "flex items-center gap-2", children: [item.icon && jsx("span", { className: "inline-flex shrink-0", children: item.icon }), item.title] }), renderIndicator(isOpen)] }) }), jsx("div", { id: panelId, role: "region", "aria-labelledby": headerId, className: buildClassName('grid transition-[grid-template-rows] duration-200 ease-in-out', isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'), children: jsx("div", { className: "overflow-hidden", children: jsx("div", { className: buildClassName('px-4 pt-2 pb-4 text-sm text-gray-600 dark:text-gray-300', panelClass, item.panelClass), children: item.content }) }) })] }, item.id));
+        }) }));
+};
+Accordion.displayName = 'Accordion';
+
+var _path$h, _path2;
+function _extends$h() { return _extends$h = 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$h.apply(null, arguments); }
+var SvgBadgeCheck = function SvgBadgeCheck(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-badge-check-icon lucide-badge-check",
+    viewBox: "0 0 24 24"
+  }, props), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
     d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76"
   })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
     d: "m9 12 2 2 4-4"
   })));
 };
 
-var _circle$4, _path$h;
-function _extends$h() { return _extends$h = 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$h.apply(null, arguments); }
+var _circle$4, _path$g;
+function _extends$g() { return _extends$g = 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$g.apply(null, arguments); }
 var SvgCircleX = function SvgCircleX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$h({
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -46,15 +117,15 @@ var SvgCircleX = function SvgCircleX(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
+  })), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
     d: "m15 9-6 6M9 9l6 6"
   })));
 };
 
-var _circle$3, _path$g;
-function _extends$g() { return _extends$g = 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$g.apply(null, arguments); }
+var _circle$3, _path$f;
+function _extends$f() { return _extends$f = 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$f.apply(null, arguments); }
 var SvgCircleAlert = function SvgCircleAlert(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$g({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -69,15 +140,15 @@ var SvgCircleAlert = function SvgCircleAlert(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
+  })), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
     d: "M12 8v4M12 16h.01"
   })));
 };
 
-var _circle$2, _path$f;
-function _extends$f() { return _extends$f = 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$f.apply(null, arguments); }
+var _circle$2, _path$e;
+function _extends$e() { return _extends$e = 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$e.apply(null, arguments); }
 var SvgInfo = function SvgInfo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$f({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -92,15 +163,15 @@ var SvgInfo = function SvgInfo(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
+  })), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
     d: "M12 16v-4M12 8h.01"
   })));
 };
 
-var _path$e;
-function _extends$e() { return _extends$e = 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$e.apply(null, arguments); }
+var _path$d;
+function _extends$d() { return _extends$d = 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$d.apply(null, arguments); }
 var SvgX = function SvgX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$e({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -111,7 +182,7 @@ var SvgX = function SvgX(props) {
     strokeWidth: 2,
     className: "lucide lucide-x-icon lucide-x",
     viewBox: "0 0 24 24"
-  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
     d: "M18 6 6 18M6 6l12 12"
   })));
 };
@@ -131,7 +202,7 @@ const TextContent = forwardRef((props, ref) => {
     return React__default.createElement('span', {
         ...rest,
         ref,
-        className: buildClassName('text-gray-900 dark:text-gray-100', xsmall && 'text-xs/5', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-gray-500 dark:text-gray-400', error && 'text-red-500 dark:text-red-400', className),
+        className: buildClassName('text-[var(--ui-text)]', xsmall && 'text-xs/5', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-[var(--ui-text-muted)]', error && 'text-[var(--ui-text-danger)]', className),
     });
 });
 TextContent.displayName = 'TextContent';
@@ -268,10 +339,10 @@ const Badge = forwardRef((props, ref) => {
 });
 Badge.displayName = 'Badge';
 
-var _path$d;
-function _extends$d() { return _extends$d = 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$d.apply(null, arguments); }
+var _path$c;
+function _extends$c() { return _extends$c = 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$c.apply(null, arguments); }
 var SvgTriangleAlert = function SvgTriangleAlert(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -282,15 +353,15 @@ var SvgTriangleAlert = function SvgTriangleAlert(props) {
     strokeWidth: 2,
     className: "lucide lucide-triangle-alert-icon lucide-triangle-alert",
     viewBox: "0 0 24 24"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
     d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01"
   })));
 };
 
-var _circle$1, _path$c;
-function _extends$c() { return _extends$c = 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$c.apply(null, arguments); }
+var _circle$1, _path$b;
+function _extends$b() { return _extends$b = 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$b.apply(null, arguments); }
 var SvgCircleCheck = function SvgCircleCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -305,7 +376,7 @@ var SvgCircleCheck = function SvgCircleCheck(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  })), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     d: "m9 12 2 2 4-4"
   })));
 };
@@ -338,19 +409,28 @@ const Banner = forwardRef((props, ref) => {
 Banner.displayName = 'Banner';
 
 const BodyText = forwardRef((props, ref) => {
-    const { as = 'p', small = false, strong = false, muted = false, error = false, inline = false, className, ...rest } = props;
+    const { as = 'p', small = false, strong = false, muted = false, error = false, inline = false, className, invert, ...rest } = props;
+    const textColorClass = error
+        ? 'text-[var(--ui-text-danger)]'
+        : muted
+            ? invert
+                ? 'text-gray-300 dark:text-gray-600'
+                : 'text-[var(--ui-text-muted)]'
+            : invert
+                ? 'text-white dark:text-black'
+                : 'text-[var(--ui-text)]';
     return React__default.createElement(as, {
         ref: ref,
-        className: buildClassName('text-gray-900 dark:text-gray-100', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-gray-500 dark:text-gray-400', error && 'text-red-500 dark:text-red-400', inline && 'inline-flex items-center gap-2', className),
+        className: buildClassName(textColorClass, small && 'text-sm/6', strong && 'font-semibold', inline && 'inline-flex items-center gap-2', className),
         ...rest,
     });
 });
 BodyText.displayName = 'BodyText';
 
-var _path$b;
-function _extends$b() { return _extends$b = 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$b.apply(null, arguments); }
+var _path$a;
+function _extends$a() { return _extends$a = 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$a.apply(null, arguments); }
 var SvgSlash = function SvgSlash(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -361,7 +441,7 @@ var SvgSlash = function SvgSlash(props) {
     strokeWidth: 2,
     className: "lucide lucide-slash-icon lucide-slash",
     viewBox: "0 0 24 24"
-  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
     d: "M22 2 2 22"
   })));
 };
@@ -373,6 +453,76 @@ const Breadcrumb = ({ items, render }) => {
 };
 Breadcrumb.displayName = 'Breadcrumb';
 
+/**
+ * Corner-rounding classes for the group's first/last button, keyed by
+ * orientation + size, matching Button's own size -> radius mapping
+ * (xs: rounded-sm, sm: rounded, md: rounded-md, lg: rounded-lg).
+ *
+ * These must stay fully static string literals (no template-literal
+ * interpolation) — Tailwind's JIT scanner only picks up class names that
+ * appear verbatim in source, and the docs site scans the library's
+ * *compiled* output, where interpolated fragments never appear as a
+ * complete class name.
+ */
+const EDGE_ROUNDING = {
+    horizontal: {
+        xs: { first: 'rounded-l-sm rounded-r-none', last: 'rounded-r-sm rounded-l-none' },
+        sm: { first: 'rounded-l rounded-r-none', last: 'rounded-r rounded-l-none' },
+        md: { first: 'rounded-l-md rounded-r-none', last: 'rounded-r-md rounded-l-none' },
+        lg: { first: 'rounded-l-lg rounded-r-none', last: 'rounded-r-lg rounded-l-none' },
+    },
+    vertical: {
+        xs: { first: 'rounded-t-sm rounded-b-none', last: 'rounded-b-sm rounded-t-none' },
+        sm: { first: 'rounded-t rounded-b-none', last: 'rounded-b rounded-t-none' },
+        md: { first: 'rounded-t-md rounded-b-none', last: 'rounded-b-md rounded-t-none' },
+        lg: { first: 'rounded-t-lg rounded-b-none', last: 'rounded-b-lg rounded-t-none' },
+    },
+};
+const PILL_EDGE_ROUNDING = {
+    horizontal: { first: 'rounded-l-full rounded-r-none', last: 'rounded-r-full rounded-l-none' },
+    vertical: { first: 'rounded-t-full rounded-b-none', last: 'rounded-b-full rounded-t-none' },
+};
+/**
+ * Resolves the corner-rounding classes for a single button at `index`
+ * out of `count` inside the group, so only the group's outer edges stay
+ * rounded and interior seams go square.
+ */
+const getEdgeRoundingClass = ({ index, count, size, orientation, pill, }) => {
+    if (count <= 1)
+        return '';
+    if (index !== 0 && index !== count - 1)
+        return 'rounded-none';
+    const position = index === 0 ? 'first' : 'last';
+    return pill
+        ? PILL_EDGE_ROUNDING[orientation][position]
+        : EDGE_ROUNDING[orientation][size][position];
+};
+const ButtonGroup = ({ children, orientation = 'horizontal', theme = 'secondary', variant = 'default', size = 'md', rounded = false, fullWidth = false, label, className = '', }) => {
+    const isVertical = orientation === 'vertical';
+    const items = useMemo(() => Children.toArray(children).filter(isValidElement), [children]);
+    const count = items.length;
+    return (jsx("div", { role: "group", "aria-label": label, className: buildClassName('inline-flex', isVertical ? 'flex-col' : 'flex-row', fullWidth && 'flex w-full', className), children: items.map((child, index) => {
+            var _a, _b, _c;
+            const childSize = (_a = child.props.size) !== null && _a !== void 0 ? _a : size;
+            return cloneElement(child, {
+                theme: (_b = child.props.theme) !== null && _b !== void 0 ? _b : theme,
+                variant: (_c = child.props.variant) !== null && _c !== void 0 ? _c : variant,
+                size: childSize,
+                className: buildClassName(child.props.className, getEdgeRoundingClass({
+                    index,
+                    count,
+                    size: childSize,
+                    orientation,
+                    pill: rounded,
+                }), count > 1 && [
+                    'relative shadow-none hover:z-10 focus:z-10 focus-visible:z-10',
+                    index > 0 && (isVertical ? '-mt-px' : '-ml-px'),
+                ], fullWidth && 'flex-1'),
+            });
+        }) }));
+};
+ButtonGroup.displayName = 'ButtonGroup';
+
 const BASE_CARD_CLASS = 'bg-white rounded-md dark:bg-gray-900 block';
 const Card = forwardRef(({ as, ...props }, ref) => {
     // Remove Card-only props from rest (avoid leaking to DOM)
@@ -508,10 +658,10 @@ const usePagination = ({ totalPages, currentPage, siblingCount = 1, // number of
     return [];
 };
 
-var _path$a;
-function _extends$a() { return _extends$a = 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$a.apply(null, arguments); }
+var _path$9;
+function _extends$9() { return _extends$9 = 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$9.apply(null, arguments); }
 var SvgChevronLeft = function SvgChevronLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -522,15 +672,15 @@ var SvgChevronLeft = function SvgChevronLeft(props) {
     strokeWidth: 2,
     className: "lucide lucide-chevron-left-icon lucide-chevron-left",
     viewBox: "0 0 24 24"
-  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
     d: "m15 18-6-6 6-6"
   })));
 };
 
-var _path$9;
-function _extends$9() { return _extends$9 = 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$9.apply(null, arguments); }
+var _path$8;
+function _extends$8() { return _extends$8 = 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$8.apply(null, arguments); }
 var SvgChevronRight = function SvgChevronRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -541,7 +691,7 @@ var SvgChevronRight = function SvgChevronRight(props) {
     strokeWidth: 2,
     className: "lucide lucide-chevron-right-icon lucide-chevron-right",
     viewBox: "0 0 24 24"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
     d: "m9 18 6-6-6-6"
   })));
 };
@@ -620,11 +770,53 @@ 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] = useState(defaultSelectedRowKeys);
+    const isControlled = selectedRowKeys !== undefined;
+    const keys = isControlled ? selectedRowKeys : internalKeys;
+    const keySet = useMemo(() => new Set(keys), [keys]);
+    const selectableEntries = useMemo(() => items
+        .map((item, idx) => ({ item, key: getKey(item, idx) }))
+        .filter(({ item }) => !isRowSelectable || isRowSelectable(item)), [items, getKey, isRowSelectable]);
+    const emit = 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 = 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 = 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$8;
-function _extends$8() { return _extends$8 = 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$8.apply(null, arguments); }
+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); }
 var SvgArrowDownWideNarrow = function SvgArrowDownWideNarrow(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -635,15 +827,15 @@ var SvgArrowDownWideNarrow = function SvgArrowDownWideNarrow(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-wide-narrow-icon lucide-arrow-down-wide-narrow",
     viewBox: "0 0 24 24"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 20V4M11 4h10M11 8h7M11 12h4"
   })));
 };
 
-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); }
+var _path$6;
+function _extends$6() { return _extends$6 = 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$6.apply(null, arguments); }
 var SvgArrowDownNarrowWide = function SvgArrowDownNarrowWide(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -654,15 +846,15 @@ var SvgArrowDownNarrowWide = function SvgArrowDownNarrowWide(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-narrow-wide-icon lucide-arrow-down-narrow-wide",
     viewBox: "0 0 24 24"
-  }, props), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 20V4M11 4h4M11 8h7M11 12h10"
   })));
 };
 
-var _path$6;
-function _extends$6() { return _extends$6 = 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$6.apply(null, arguments); }
+var _path$5;
+function _extends$5() { return _extends$5 = 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$5.apply(null, arguments); }
 var SvgArrowDownAz = function SvgArrowDownAz(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -673,15 +865,15 @@ var SvgArrowDownAz = function SvgArrowDownAz(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-az-icon lucide-arrow-down-a-z",
     viewBox: "0 0 24 24"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 20V4M20 8h-5M15 10V6.5a2.5 2.5 0 0 1 5 0V10M15 14h5l-5 6h5"
   })));
 };
 
-var _path$5;
-function _extends$5() { return _extends$5 = 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$5.apply(null, arguments); }
+var _path$4;
+function _extends$4() { return _extends$4 = 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$4.apply(null, arguments); }
 var SvgArrowDownZa = function SvgArrowDownZa(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -692,15 +884,15 @@ var SvgArrowDownZa = function SvgArrowDownZa(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-down-za-icon lucide-arrow-down-z-a",
     viewBox: "0 0 24 24"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
     d: "m3 16 4 4 4-4M7 4v16M15 4h5l-5 6h5M15 20v-3.5a2.5 2.5 0 0 1 5 0V20M20 18h-5"
   })));
 };
 
-var _path$4;
-function _extends$4() { return _extends$4 = 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$4.apply(null, arguments); }
+var _path$3;
+function _extends$3() { return _extends$3 = 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$3.apply(null, arguments); }
 var SvgArrowUpDown = function SvgArrowUpDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$4({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -711,7 +903,7 @@ var SvgArrowUpDown = function SvgArrowUpDown(props) {
     strokeWidth: 2,
     className: "lucide lucide-arrow-up-down-icon lucide-arrow-up-down",
     viewBox: "0 0 24 24"
-  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
     d: "m21 16-4 4-4-4M17 20V4M3 8l4-4 4 4M7 4v16"
   })));
 };
@@ -753,7 +945,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 = useRef({});
     const [sortedItems, setSortedItems] = useState(items);
     useEffect(() => {
@@ -788,25 +980,41 @@ 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 (jsxs("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: [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: jsxs(Table, { className: buildClassName('relative w-full max-w-full h-fit', tableClass), layout: layout, children: [jsx(TableHead, { className: headClass, children: columns.map((column) => (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: 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: [jsx(TextContent, { className: "shrink-0", children: column.label }), column.sortable ? getSortIcon(sorting[column.name]) : null] }) }, column.name))) }), jsx(TableBody, { loading: loading, colSize: columns.length, rowSize: (pagination === null || pagination === void 0 ? void 0 : pagination.limit) || 5, children: !loading && sortedItems.length === 0 ? (jsx(EmptyTableRow, { colSpan: columns.length, children: emptyMessage })) : (sortedItems.map((item, idx) => (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 (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 && jsx(TableFoot, { children: footerRow })] }) }), pagination && (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 (jsxs("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: [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: jsxs(Table, { className: buildClassName('relative w-full max-w-full h-fit', tableClass), layout: layout, children: [jsxs(TableHead, { className: headClass, children: [selectable && (jsx(TableHeaderCell, { className: buildClassName('bg-gray-50 dark:bg-gray-800 w-px', densityCellClass), children: jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
+                                            if (el)
+                                                el.indeterminate = someSelected;
+                                        }, onChange: toggleAll }) })), columns.map((column) => (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: 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: [jsx(TextContent, { className: "shrink-0", children: column.label }), column.sortable ? getSortIcon(sorting[column.name]) : null] }) }, column.name)))] }), jsx(TableBody, { loading: loading, colSize: colSize, rowSize: (pagination === null || pagination === void 0 ? void 0 : pagination.limit) || 5, children: !loading && sortedItems.length === 0 ? (jsx(EmptyTableRow, { colSpan: colSize, children: emptyMessage })) : (sortedItems.map((item, idx) => {
+                                const key = getKey(item, idx);
+                                const rowSelectable = !isRowSelectable || isRowSelectable(item);
+                                return (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 && (jsx(TableCell, { className: buildClassName(densityCellClass, striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40'), children: jsx("span", { onClick: (e) => e.stopPropagation(), children: jsx(Checkbox, { "aria-label": "Select row", checked: isSelected(key), disabled: !rowSelectable, onChange: () => toggleRow(key) }) }) })), columns.map((column) => {
+                                            var _a;
+                                            return (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 && jsx(TableFoot, { children: footerRow })] }) }), pagination && (jsx(Pagination, { ...pagination, className: "rounded-b-lg border border-t-0 border-gray-200 dark:border-gray-800", onChange: setPagination }))] }));
 }
 DataTable.displayName = 'DataTable';
 
-const Title = ({ children, className }) => (jsx("h1", { className: buildClassName('text-3xl font-bold text-gray-900 dark:text-white', className), children: children }));
-const SubTitle = ({ children, className }) => (jsx("h2", { className: buildClassName('text-2xl font-semibold text-gray-900 dark:text-white', className), children: children }));
-const SubTitle2 = ({ children, className }) => (jsx("h3", { className: buildClassName('text-xl font-semibold text-gray-900 dark:text-white', className), children: children }));
-const SubTitle3 = ({ children, className }) => (jsx("h4", { className: buildClassName('text-lg font-medium text-gray-900 dark:text-white', className), children: children }));
-const SubTitle4 = ({ children, className }) => (jsx("h5", { className: buildClassName('text-base font-medium text-gray-900 dark:text-white', className), children: children }));
+const Title = ({ children, className }) => (jsx("h1", { className: buildClassName('text-3xl font-bold text-[var(--ui-text)]', className), children: children }));
+const SubTitle = ({ children, className }) => (jsx("h2", { className: buildClassName('text-2xl font-semibold text-[var(--ui-text)]', className), children: children }));
+const SubTitle2 = ({ children, className }) => (jsx("h3", { className: buildClassName('text-xl font-semibold text-[var(--ui-text)]', className), children: children }));
+const SubTitle3 = ({ children, className }) => (jsx("h4", { className: buildClassName('text-lg font-medium text-[var(--ui-text)]', className), children: children }));
+const SubTitle4 = ({ children, className }) => (jsx("h5", { className: buildClassName('text-base font-medium text-[var(--ui-text)]', className), children: children }));
 const HeadingText = {
     Title,
     SubTitle,
@@ -863,10 +1071,10 @@ const Dropdown = ({ triggerButton, renderTriggerButton, items, renderItem, items
 };
 Dropdown.displayName = 'Dropdown';
 
-var _path$3;
-function _extends$3() { return _extends$3 = 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$3.apply(null, arguments); }
+var _path$2;
+function _extends$2() { return _extends$2 = 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$2.apply(null, arguments); }
 var SvgFolderPlus = function SvgFolderPlus(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -877,7 +1085,7 @@ var SvgFolderPlus = function SvgFolderPlus(props) {
     strokeWidth: 2,
     className: "lucide lucide-folder-plus-icon lucide-folder-plus",
     viewBox: "0 0 24 24"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
     d: "M12 10v6M9 13h6M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"
   })));
 };
@@ -898,7 +1106,7 @@ const Input = forwardRef((props, ref) => {
     const hasError = Boolean(error);
     const hasRightGroup = rightGroup !== null && rightGroup !== undefined;
     const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
-    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("input", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, type: type, className: buildClassName(buildInputClass(className, { disabled: inputProps.disabled }), hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '') }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center w-10", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("input", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, type: type, className: buildClassName(buildInputClass(className, { disabled: inputProps.disabled }), hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '') }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center w-10", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 });
 Input.displayName = 'Input';
 
@@ -968,7 +1176,7 @@ const RadioSwitch = ({ label, items, selected, onChange, wrapperClass, switchCla
                     transform: `translate(${style.left}px, ${style.top}px)`,
                     width: style.width,
                     height: style.height,
-                } }), items.map((item) => (jsx(Radio$1, { value: getValue(item), "data-radio-item": true, "data-value": getValue(item), className: buildClassName('relative z-10 cursor-pointer select-none group', 'px-4 py-2 rounded-md transition-colors', 'text-gray-700 dark:text-gray-300 data-checked:text-white'), children: jsxs("div", { className: buildClassName('flex flex-col items-center justify-center gap-1', contentClass), children: [jsx(BodyText, { className: "font-semibold", children: getLabel(item) }), getDescription(item) && (jsx(BodyText, { className: buildClassName('text-xs opacity-80', descriptionClass), children: getDescription(item) }))] }) }, getValue(item))))] }));
+                } }), items.map((item) => (jsx(Radio$1, { value: getValue(item), "data-radio-item": true, "data-value": getValue(item), className: buildClassName('relative z-10 cursor-pointer select-none group', 'px-4 py-2 rounded-md transition-colors', 'text-gray-700 dark:text-gray-300 data-checked:text-white'), children: jsxs("div", { className: buildClassName('flex flex-col items-center justify-center gap-1', contentClass), children: [jsx(BodyText, { className: buildClassName('font-semibold', selected === getValue(item) && 'text-white'), children: getLabel(item) }), getDescription(item) && (jsx(BodyText, { className: buildClassName('text-xs opacity-80', descriptionClass, selected === getValue(item) && 'text-white'), children: getDescription(item) }))] }) }, getValue(item))))] }));
 };
 
 /**
@@ -1139,28 +1347,9 @@ const useDebounceFn = (fn, ms) => {
     }, [fn, ms]);
 };
 
-var _path$2;
-function _extends$2() { return _extends$2 = 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$2.apply(null, arguments); }
-var SvgCheck = function SvgCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    className: "lucide lucide-check-icon lucide-check",
-    viewBox: "0 0 24 24"
-  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
-    d: "M20 6 9 17l-5-5"
-  })));
-};
-
 var _path$1;
 function _extends$1() { return _extends$1 = 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$1.apply(null, arguments); }
-var SvgChevronDown = function SvgChevronDown(props) {
+var SvgCheck = function SvgCheck(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -1170,10 +1359,10 @@ var SvgChevronDown = function SvgChevronDown(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    className: "lucide lucide-chevron-down-icon lucide-chevron-down",
+    className: "lucide lucide-check-icon lucide-check",
     viewBox: "0 0 24 24"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    d: "m6 9 6 6 6-6"
+    d: "M20 6 9 17l-5-5"
   })));
 };
 
@@ -1202,7 +1391,7 @@ var SvgCirclePlus = function SvgCirclePlus(props) {
 
 const constructInputClass = (disabled) => buildInputClass('', { disabled });
 const SelectBox = forwardRef((props, forwardedRef) => {
-    const { labelKey = 'label', valueKey = 'value', name, id = name, options, selected, label = null, labelWrapperClass = '', labelClass = '', labelHint = null, disabled = false, containerClass = '', onChange = () => { }, placeholder, dropdownContainerClass = 'z-20', multiple = false, maxSelection, immediate = true, showErrorMessage = true, error = null, async = false, searchable = true, required = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, allowClear = false, modalDropdown = false, } = props;
+    const { labelKey = 'label', valueKey = 'value', name, id = name, options, selected, label = null, labelWrapperClass = '', labelClass = '', labelHint = null, disabled = false, containerClass = '', onChange = () => { }, placeholder, dropdownContainerClass = 'z-20', multiple = false, maxSelection, immediate = true, showErrorMessage = true, error = null, async = false, searchable = true, required = false, allowAdd = false, addNewText = 'Create', onAdd = () => { }, allowClear = false, modalDropdown = false, noOptionsText = 'No options available', } = props;
     const hasError = Boolean(error);
     const [query, setQuery] = useState('');
     const debouncedQuery = useDebounce(query, 500);
@@ -1321,7 +1510,7 @@ const SelectBox = forwardRef((props, forwardedRef) => {
         if (async && debouncedQuery)
             handleSearch(debouncedQuery);
     }, [debouncedQuery, async, handleSearch]);
-    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), labelHint] })), jsxs(Combobox, { multiple: multiple, immediate: immediate, name: name, value: selected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, children: [multiple ? (jsxs("div", { className: buildClassName(inputClass, 'flex flex-wrap gap-2 peer relative'), ref: forwardedRef, children: [isArray(selected) &&
+    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), ref: containerRef, children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, "aria-required": required, children: label }), jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs(Combobox, { multiple: multiple, immediate: immediate, name: name, value: selected, onChange: comboboxOnChangeWrapper, onClose: () => setQuery(''), disabled: disabled, children: [multiple ? (jsxs("div", { className: buildClassName(inputClass, 'flex flex-wrap gap-2 peer relative'), ref: forwardedRef, children: [isArray(selected) &&
                                 (selected === null || selected === void 0 ? void 0 : selected.length) > 0 &&
                                 selected.map((option, idx) => (jsx(Badge, { theme: "secondary", removable: !disabled, onRemove: () => removeSelection(idx), children: getDisplayValue(option) }, `${getValue(option)}-${idx}`))), jsx(ComboboxInput, { className: "outline-none flex-1 dark:placeholder-gray-400 placeholder-gray-400", "aria-label": name, value: query, autoComplete: "off", placeholder: (selected === null || selected === void 0 ? void 0 : selected.length) ? '' : placeholder, onChange: (e) => setQuery(e.target.value), id: id, ref: inputRef, onKeyDown: (e) => {
                                     if (multiple && e.key === 'Backspace' && !query) {
@@ -1329,7 +1518,7 @@ const SelectBox = forwardRef((props, forwardedRef) => {
                                             removeSelection(selected.length - 1);
                                         }
                                     }
-                                }, "data-testid": "combobox-input" }), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxs("div", { className: "relative", ref: forwardedRef, children: [jsx(ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), className: inputClass, disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(selected) && (jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4 stroke-gray-500 dark:stroke-gray-300" }) })), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsx(ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", modal: modalDropdown, className: buildClassName('w-[var(--input-width)] rounded-lg border border-gray-200 dark:border-white/5 bg-white dark:bg-gray-800 p-1 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: optionsLoading ? (jsx(BodyText, { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx(BodyText, { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxs("div", { children: [filteredOptions.map((option) => (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] }) }, getValue(option)))), filteredOptions.length === 0 && query && !optionsLoading && (jsxs("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none text-gray-500 dark:text-gray-400", children: ["No results found for ", jsx("span", { className: "font-semibold", children: query })] })), allowAdd && (jsx(ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(SvgCirclePlus, { className: "size-4.5" }), jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }))] })) })] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+                                }, "data-testid": "combobox-input" }), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })) : (jsxs("div", { className: "relative", ref: forwardedRef, children: [jsx(ComboboxInput, { "aria-label": name, displayValue: (option) => (option ? getDisplayValue(option) : null), autoComplete: "off", placeholder: placeholder, onChange: (event) => setQuery(event.target.value), className: inputClass, disabled: disabled, id: id, readOnly: !searchable, ref: inputRef, "data-testid": "combobox-input" }), allowClear && !isEmpty(selected) && (jsx(Button, { size: "xs", iconOnly: true, "aria-label": "Clear selection", theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChangeInternal(multiple ? [] : null), disabled: disabled, "data-testid": "combobox-clear-button", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4 stroke-gray-500 dark:stroke-gray-300" }) })), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", "data-testid": "combobox-button", children: jsx(SvgChevronDown, { className: chevronIconClass }) })] })), jsx(ComboboxOptions, { anchor: { to: 'bottom', gap: 5 }, as: "div", modal: modalDropdown, className: buildClassName('w-[var(--input-width)] rounded-lg border border-gray-200 dark:border-white/5 bg-white dark:bg-gray-800 p-1 [--anchor-gap:var(--spacing-1)]', '[--anchor-max-height:20rem]', 'origin-top border transition duration-200 ease-[cubic-bezier(0.4, 0.0, 0.2, 1)] data-[closed]:translate-y-[-15%] data-[closed]:opacity-0', dropdownContainerClass), transition: true, "data-testid": "combobox-options", children: optionsLoading ? (jsx(BodyText, { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx(BodyText, { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxs("div", { children: [filteredOptions.map((option) => (jsx(ComboboxOption, { disabled: option.disabled, value: option, className: "group rounded-lg py-1.5 px-3 select-none data-[focus]:bg-black/3 dark:data-[focus]:bg-white/10 data-disabled:opacity-50 cursor-pointer data-disabled:pointer-events-none", children: jsxs("div", { className: "flex items-center justify-between gap-2 dark:text-white group-data-[selected]:text-blue-600", children: [jsx("span", { className: "text-sm/6", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:stroke-gray-300 group-data-[selected]:visible" })] }) }, getValue(option)))), filteredOptions.length === 0 && (jsx("div", { "data-testid": "no-result-found", className: "flex items-center gap-2 py-1.5 px-3 select-none text-gray-500 dark:text-gray-400", children: query ? (jsxs(Fragment, { children: ["No results found for ", jsx("span", { className: "font-semibold", children: query })] })) : (noOptionsText) })), allowAdd && (jsx(ComboboxOption, { value: query, className: "group rounded-lg py-1.5 px-3 cursor-pointer text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700", onClick: () => void handleAddAndSelect(query), children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(SvgCirclePlus, { className: "size-4.5" }), jsxs(TextContent, { children: [addNewText, " \"", query, "\""] })] }) }))] })) })] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 });
 
 const Tabs = ({ tabs, defaultIndex = 0, selectedIndex, onChange, variant = 'underline', orientation = 'horizontal', stretch = false, className = '', listClass = '', panelsClass = '', }) => {
@@ -1381,7 +1570,7 @@ const Textarea = forwardRef((props, ref) => {
     const hasError = !isEmpty(error);
     const hasRightGroup = rightGroup != null && rightGroup !== undefined;
     const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
-    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("textarea", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, className: buildClassName('transition-all', 'block w-full rounded-lg bg-white px-3.5 py-2 text-base sm:text-sm/6', 'text-gray-900 outline dark:outline outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'focus:outline-blue-600 dark:focus:outline-blue-600 focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 placeholder:text-gray-400 dark:text-white', 'invalid:group-[.has-error]:outline-red-500', 'disabled:pointer-events-none disabled:bg-gray-100', 'dark:disabled:bg-gray-500', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+    return (jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxs("div", { className: "relative", children: [hasLeftGroup && (jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsx("textarea", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, className: buildClassName('transition-all', 'block w-full rounded-lg bg-white px-3.5 py-2 text-base sm:text-sm/6', 'text-gray-900 outline dark:outline outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'focus:outline-blue-600 dark:focus:outline-blue-600 focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 placeholder:text-gray-400 dark:text-white', 'invalid:group-[.has-error]:outline-red-500', 'disabled:pointer-events-none disabled:bg-gray-100', 'dark:disabled:bg-gray-500', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center", children: rightGroup }))] }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 });
 
 /**
@@ -1484,9 +1673,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'
@@ -1500,20 +1692,21 @@ const VirtualizedRow = ({ index, style, data, }) => {
         return col.cellClass;
     };
     const densityCellClass = DENSITY_CELL_CLASS$1[density];
-    return (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 (jsxs("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: {
             ...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 (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 && (jsx("div", { role: "cell", className: buildClassName('flex items-center whitespace-nowrap border-r last:border-r-0 border-gray-200 dark:border-gray-700', densityCellClass, isStriped && 'bg-gray-50 dark:bg-gray-800/40'), onClick: (e) => e.stopPropagation(), children: 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 (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));
+            })] }));
 };
 
+const SELECTION_COLUMN_WIDTH = '44px';
 const DENSITY_CELL_CLASS = {
     compact: 'px-2 py-1.5',
     default: 'px-3 py-3',
@@ -1526,11 +1719,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 = useRef(null);
     const outerRef = useRef(null);
     const headerRef = useRef(null);
-    const gridTemplate = useMemo(() => columns.map((col) => columnWidth(col)).join(' '), [columns]);
+    const getKey = 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 = 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));
     useEffect(() => {
@@ -1548,19 +1758,48 @@ function VirtualizedDataTable({ items, columns, sorting = {}, onSort, loading =
         if (column.sortable)
             onSort === null || onSort === void 0 ? void 0 : onSort(column);
     }, [onSort]);
-    const itemData = useMemo(() => ({ items, columns, gridTemplate, onRowClick, rowClass, density, striped }), [items, columns, gridTemplate, onRowClick, rowClass, density, striped]);
+    const itemData = 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 = (jsx("div", { ref: headerRef, className: "overflow-hidden w-full", children: 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) => (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: 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 Header = (jsx("div", { ref: headerRef, className: "overflow-hidden w-full", children: jsxs("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: [selectable && (jsx("div", { role: "columnheader", className: buildClassName('flex items-center border-r last:border-r-0 border-gray-200 dark:border-gray-700', densityCellClass), children: jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
+                            if (el)
+                                el.indeterminate = someSelected;
+                        }, onChange: toggleAll }) })), columns.map((col) => (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: 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);
     /* -------------------------------------------------------
      * Loading state
      * ------------------------------------------------------- */
     if (loading) {
-        return (jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxs("div", { className: wrapperCls, children: [Header, jsx("div", { style: { height: maxHeight }, className: "flex flex-col", children: Array.from({ length: skeletonRows }).map((_, idx) => (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) => (jsx("div", { className: densityCellClass, children: jsx("div", { className: "h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded" }) }, col.name))) }, idx))) })] }) }));
+        return (jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxs("div", { className: wrapperCls, children: [Header, jsx("div", { style: { height: maxHeight }, className: "flex flex-col", children: Array.from({ length: skeletonRows }).map((_, idx) => (jsxs("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: [selectable && jsx("div", { className: densityCellClass }), columns.map((col) => (jsx("div", { className: densityCellClass, children: jsx("div", { className: "h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded" }) }, col.name)))] }, idx))) })] }) }));
     }
     /* -------------------------------------------------------
      * Empty state
@@ -1610,5 +1849,5 @@ const useIsTabletOrMobile = () => {
     return isMobile || isTablet;
 };
 
-export { Alert, Badge, Banner, BodyText, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, DOTS, DataTable, DetailedInformation, Dot, Drawer, Dropdown, EmptyState, EmptyTableRow, HeadingText, Input, Label, Loader, PASSWORD_PLACEHOLDER, PASSWORD_TYPE, Pagination, PasswordInput, Radio, RadioGroup, RadioSwitch, RangeInput, RangeSlider, SelectBox, SortIconMap, Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TextContent, Textarea, Toast, ToastProvider, VirtualizedDataTable, buildClassName, buildInputClass, get, getSortIcon, isArray, isEmpty, nextSortDirection, updateSortQuery, useDebounce, useDebounceFn, useIsMobile, useIsTablet, useIsTabletOrMobile, usePagination, useToast };
+export { Accordion, Alert, Badge, Banner, BodyText, Breadcrumb, Button, ButtonGroup, Card, Checkbox, CheckboxGroup, DOTS, DataTable, DetailedInformation, Dot, Drawer, Dropdown, EmptyState, EmptyTableRow, HeadingText, Input, Label, Loader, PASSWORD_PLACEHOLDER, PASSWORD_TYPE, Pagination, PasswordInput, Radio, RadioGroup, RadioSwitch, RangeInput, RangeSlider, SelectBox, SortIconMap, Table, TableBody, TableCell, TableFoot, TableHead, TableHeaderCell, TableRow, Tabs, TextContent, Textarea, Toast, ToastProvider, VirtualizedDataTable, buildClassName, buildInputClass, get, getSortIcon, isArray, isEmpty, nextSortDirection, updateSortQuery, useDebounce, useDebounceFn, useIsMobile, useIsTablet, useIsTabletOrMobile, usePagination, useRowSelection, useToast };
 //# sourceMappingURL=react-tailwind.es.js.map