@pk-design/react-tailwind 1.1.5 → 1.1.7

package/dist/react-tailwind.es.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { twMerge } from 'tailwind-merge';
 import * as React from 'react';
-import React__default, { forwardRef, useMemo, useState, useId, useEffect, useRef, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext, memo, useLayoutEffect, createElement } from 'react';
+import React__default, { forwardRef, useMemo, useId, useRef, useState, useEffect, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext } from 'react';
 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));
 
@@ -223,7 +224,7 @@ const TypeClassMap = {
 const Alert = (props) => {
     const { type = 'info', className = '', message, children, removable = false, onRemove = () => { }, ...restProps } = props;
     const Icon = AlertTypeIconMap[type] || SvgInfo;
-    return (jsxs("div", { className: buildClassName(className, 'flex items-center justify-between rounded-md p-3 text-sm ring-1 ring-inset gap-2', TypeClassMap[type]), ...restProps, children: [jsxs("span", { className: "inline-flex items-center gap-2", children: [jsx(Icon, { className: "size-5", "data-testid": `alert-${type}-icon` }), jsx("span", { className: "pr-2 inline-flex items-center", children: message || children })] }), removable && (jsx(Button, { iconOnly: true, size: "xs", variant: "plain", theme: "secondary", className: "hover:bg-black/5 text-gray-600 dark:hover:bg-black/5 dark:text-gray-600", onClick: () => onRemove(), "data-testid": "alert-remove-btn", children: jsx(SvgX, { className: "size-4.5", "data-testid": "alert-remove-icon" }) }))] }));
+    return (jsxs("div", { className: buildClassName(className, 'flex items-center justify-between rounded-md p-3 text-sm ring-1 ring-inset gap-2', TypeClassMap[type]), ...restProps, children: [jsxs("span", { className: "inline-flex items-center gap-2", children: [jsx(Icon, { className: "size-5", "data-testid": `alert-${type}-icon` }), jsx("span", { className: "pr-2 inline-flex items-center", children: message || children })] }), removable && (jsx(Button, { iconOnly: true, "aria-label": "Dismiss alert", size: "xs", variant: "plain", theme: "secondary", className: "hover:bg-black/5 text-gray-600 dark:hover:bg-black/5 dark:text-gray-600", onClick: () => onRemove(), "data-testid": "alert-remove-btn", children: jsx(SvgX, { className: "size-4.5", "data-testid": "alert-remove-icon" }) }))] }));
 };
 Alert.displayName = 'Alert';
 
@@ -236,7 +237,12 @@ const ThemeClassMap = {
 };
 const Badge = forwardRef((props, ref) => {
     const { theme = 'info', className = '', children, removable = false, rounded = false, onRemove = () => { }, ...restProps } = props;
-    return (jsxs(TextContent, { ref: ref, className: buildClassName(className, 'inline-flex items-center pl-3 py-1 text-xs font-medium ring-1 ring-inset', ThemeClassMap[theme], rounded ? 'rounded-full' : 'rounded-md'), "data-testid": `badge-${theme}`, ...restProps, children: [jsx(TextContent, { className: "pr-3 inline-flex items-center", children: children }), removable ? (jsx(SvgX, { className: "size-5 px-0.5 mr-1 hover:bg-slate-200 dark:hover:bg-white/10 rounded-sm cursor-pointer text-gray-600 dark:text-gray-300", role: "button", onClick: () => onRemove() })) : null] }));
+    return (jsxs(TextContent, { ref: ref, className: buildClassName(className, 'inline-flex items-center pl-3 py-1 text-xs font-medium ring-1 ring-inset', ThemeClassMap[theme], rounded ? 'rounded-full' : 'rounded-md'), "data-testid": `badge-${theme}`, ...restProps, children: [jsx(TextContent, { className: "pr-3 inline-flex items-center", children: children }), removable ? (jsx(SvgX, { className: "size-5 px-0.5 mr-1 hover:bg-slate-200 dark:hover:bg-white/10 rounded-sm cursor-pointer text-gray-600 dark:text-gray-300", role: "button", tabIndex: 0, "aria-label": "Remove", onClick: () => onRemove(), onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        onRemove();
+                    }
+                } })) : null] }));
 });
 Badge.displayName = 'Badge';
 
@@ -340,7 +346,7 @@ var SvgSlash = function SvgSlash(props) {
 const Breadcrumb = ({ items, render }) => {
     const count = items.length;
     const isLast = (index) => index === count - 1;
-    return (jsx("div", { className: "flex flex-wrap items-center gap-2", "data-testid": "breadcrumb-container", children: items.map((item, index) => (jsxs("span", { className: "inline-flex gap-2 items-center dark:text-white", "data-testid": `breadcrumb-item-${item.key}`, children: [jsx("span", { className: "font-medium", children: isLast(index) ? item.text : render(item) }), !isLast(index) && (jsx(SvgSlash, { "data-testid": `breadcrumb-divider-${index}`, className: "size-4" }))] }, item.key))) }));
+    return (jsx("nav", { "aria-label": "Breadcrumb", className: "flex flex-wrap items-center gap-2", "data-testid": "breadcrumb-container", children: items.map((item, index) => (jsxs("span", { className: "inline-flex gap-2 items-center dark:text-white", "data-testid": `breadcrumb-item-${item.key}`, children: [jsx("span", { className: "font-medium", ...(isLast(index) ? { 'aria-current': 'page' } : {}), children: isLast(index) ? item.text : render(item) }), !isLast(index) && (jsx(SvgSlash, { "data-testid": `breadcrumb-divider-${index}`, className: "size-4" }))] }, item.key))) }));
 };
 Breadcrumb.displayName = 'Breadcrumb';
 
@@ -367,7 +373,8 @@ const Checkbox = forwardRef((props, ref) => {
     const { id, name, label, labelClass = '', wrapperClass = '', containerClass = '', error, disabled = false, className = '', 
     // Checkbox-only props removed from rest
     ...rest } = props;
-    const checkboxId = (_a = id !== null && id !== void 0 ? id : name) !== null && _a !== void 0 ? _a : 'checkbox-' + Math.random();
+    const generatedId = useId();
+    const checkboxId = (_a = id !== null && id !== void 0 ? id : name) !== null && _a !== void 0 ? _a : generatedId;
     return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-center', containerClass), children: [jsxs("label", { htmlFor: checkboxId, className: buildClassName('inline-flex items-center relative select-none', disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [jsx("input", { ref: ref, ...rest, id: checkboxId, name: name, type: "checkbox", disabled: disabled, "aria-checked": rest.checked, className: buildClassName('peer size-4.5 cursor-pointer transition-all appearance-none rounded', 'border focus:ring-2 focus:ring-offset-2', 'checked:bg-blue-600 checked:border-blue-600', 'focus:ring-blue-500 dark:focus:ring-offset-gray-900', disabled
                                     ? 'border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 pointer-events-none'
                                     : 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 hover:shadow-md', className) }), jsx("span", { className: "absolute text-white opacity-0 peer-checked:opacity-100 \n              top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", children: jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3.25 w-3.25", viewBox: "0 0 20 20", fill: "currentColor", stroke: "currentColor", strokeWidth: "1", children: jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) })] }), label && (jsx(Label, { htmlFor: checkboxId, className: buildClassName(disabled
@@ -378,15 +385,8 @@ Checkbox.displayName = 'Checkbox';
 
 const CheckboxGroup = (props) => {
     const { name, options, label, labelClass = '', labelWrapperClass = '', labelHint, containerClass = '', value = [], onChange, inline = false, } = props;
-    const [items, setItems] = useState([]);
-    const groupId = useId(); // unique per group
-    /**
-     * Normalize options (strings → {label, value})
-     */
-    useEffect(() => {
-        const normalized = options.map((opt) => typeof opt === 'string' ? { label: opt, value: opt } : opt);
-        setItems(normalized);
-    }, [options]);
+    const groupId = useId();
+    const items = useMemo(() => options.map((opt) => typeof opt === 'string' ? { label: opt, value: opt } : opt), [options]);
     /**
      * Group-level change handler. Converts raw checkbox change events
      * into a typed updated values array.
@@ -537,14 +537,14 @@ const Pagination = ({ page: currentPage, limit, total, onChange, className, elli
         onChange({ page: nextVal });
     };
     if (ellipsis) {
-        return (jsxs("div", { "data-testid": "pagination-container", className: buildClassName('flex items-center justify-between bg-white dark:bg-gray-800 px-4 py-3 sm:px-6', className), children: [jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "ellipsis-mobile-prev-btn", children: [jsx("span", { children: "Previous" }), jsx(SvgChevronLeft, { className: "size-4" })] }), jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "ellipsis-mobile-next-btn", children: [jsx("span", { children: "Next" }), jsx(SvgChevronRight, { className: "size-4" })] })] }), jsxs("div", { className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [jsxs("p", { "data-testid": "pagination-summary", className: "text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1", children: ["Showing", jsx("span", { className: "font-medium", children: total === 0 ? 0 : Math.max(currentPage * limit - limit + 1, 1) }), "to", jsx("span", { className: "font-medium", children: Math.min(currentPage * limit, total) }), "of", jsx("span", { className: "font-medium", children: total }), "results"] }), jsxs("ul", { className: "flex items-center space-x-2 text-sm", children: [jsx("li", { children: jsx(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "ellipsis-next-btn", children: "Prev" }) }), range.map((page, idx) => {
+        return (jsxs("div", { "data-testid": "pagination-container", className: buildClassName('flex items-center justify-between bg-white dark:bg-gray-800 px-4 py-3 sm:px-6', className), children: [jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "ellipsis-mobile-prev-btn", children: [jsx("span", { children: "Previous" }), jsx(SvgChevronLeft, { className: "size-4" })] }), jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "ellipsis-mobile-next-btn", children: [jsx("span", { children: "Next" }), jsx(SvgChevronRight, { className: "size-4" })] })] }), jsxs("div", { className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [jsxs("p", { "data-testid": "pagination-summary", className: "text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1", children: ["Showing", jsx("span", { className: "font-medium", children: total === 0 ? 0 : Math.max(currentPage * limit - limit + 1, 1) }), "to", jsx("span", { className: "font-medium", children: Math.min(currentPage * limit, total) }), "of", jsx("span", { className: "font-medium", children: total }), "results"] }), jsxs("ul", { className: "flex items-center space-x-2 text-sm", children: [jsx("li", { children: jsx(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "ellipsis-prev-btn", children: "Prev" }) }), range.map((page, idx) => {
                                     if (page === DOTS) {
                                         return (jsx("li", { "data-testid": `page-${page}`, className: "px-2 py-1 text-gray-400", children: "\u2026" }, `${page}-${idx}`));
                                     }
                                     return (jsx("li", { children: jsx(Button, { size: "xs", theme: page === currentPage ? 'primary' : 'secondary', variant: page === currentPage ? 'default' : 'plain', "aria-current": page === currentPage ? 'page' : undefined, onClick: () => handlePageChange(page), children: page }) }, `${page}-${idx}`));
-                                }), jsx("li", { children: jsx(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "ellipsis-prev-btn", children: "Next" }) })] })] })] }));
+                                }), jsx("li", { children: jsx(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "ellipsis-next-btn", children: "Next" }) })] })] })] }));
     }
-    return (jsxs("div", { "data-testid": "pagination-container", className: buildClassName('flex items-center justify-between bg-white dark:bg-gray-800 px-4 py-3 sm:px-6', className), children: [jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "mobile-prev-btn", children: [jsx("span", { children: "Previous" }), jsx(SvgChevronLeft, { className: "size-4" })] }), jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "mobile-next-btn", children: [jsx("span", { children: "Next" }), jsx(SvgChevronRight, { className: "size-4" })] })] }), jsxs("div", { className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [jsxs("p", { "data-testid": "pagination-summary", className: "text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1", children: ["Showing", jsx("span", { className: "font-medium", children: total === 0 ? 0 : Math.max(currentPage * limit - limit + 1, 1) }), "to", jsx("span", { className: "font-medium", children: Math.min(currentPage * limit, total) }), "of", jsx("span", { className: "font-medium", children: total }), "results"] }), jsxs("nav", { className: "isolate inline-flex items-center rounded-md", "aria-label": "Pagination", children: [jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "next-btn", children: [jsx("span", { className: "sr-only", children: "Previous" }), jsx(SvgChevronLeft, { className: "size-4" })] }), pages.map((page) => (jsx(Button, { size: "xs", theme: page === currentPage ? 'primary' : 'secondary', variant: page === currentPage ? 'default' : 'plain', "aria-current": page === currentPage ? 'page' : undefined, onClick: () => handlePageChange(page), children: jsx("span", { className: "size-4 block", children: page }) }, page))), jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "prev-btn", children: [jsx("span", { className: "sr-only", children: "Next" }), jsx(SvgChevronRight, { className: "size-4" })] })] })] })] }));
+    return (jsxs("div", { "data-testid": "pagination-container", className: buildClassName('flex items-center justify-between bg-white dark:bg-gray-800 px-4 py-3 sm:px-6', className), children: [jsxs("div", { className: "flex flex-1 justify-between sm:hidden", children: [jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "mobile-prev-btn", children: [jsx("span", { children: "Previous" }), jsx(SvgChevronLeft, { className: "size-4" })] }), jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "mobile-next-btn", children: [jsx("span", { children: "Next" }), jsx(SvgChevronRight, { className: "size-4" })] })] }), jsxs("div", { className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [jsxs("p", { "data-testid": "pagination-summary", className: "text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1", children: ["Showing", jsx("span", { className: "font-medium", children: total === 0 ? 0 : Math.max(currentPage * limit - limit + 1, 1) }), "to", jsx("span", { className: "font-medium", children: Math.min(currentPage * limit, total) }), "of", jsx("span", { className: "font-medium", children: total }), "results"] }), jsxs("nav", { className: "isolate inline-flex items-center rounded-md", "aria-label": "Pagination", children: [jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "data-testid": "prev-btn", children: [jsx("span", { className: "sr-only", children: "Previous" }), jsx(SvgChevronLeft, { className: "size-4" })] }), pages.map((page) => (jsx(Button, { size: "xs", theme: page === currentPage ? 'primary' : 'secondary', variant: page === currentPage ? 'default' : 'plain', "aria-current": page === currentPage ? 'page' : undefined, onClick: () => handlePageChange(page), children: jsx("span", { className: "size-4 block", children: page }) }, page))), jsxs(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "data-testid": "next-btn", children: [jsx("span", { className: "sr-only", children: "Next" }), jsx(SvgChevronRight, { className: "size-4" })] })] })] })] }));
 };
 
 function get(obj, path, defaultValue) {
@@ -733,9 +733,13 @@ const autoSortItems = (items, column, sort) => {
 };
 const DataTable = ({ items, columns, sorting = {}, onSort, loading, pagination = null, setPagination = () => { }, emptyMessage = 'No data found', containerClass = '', wrapperClass = '', layout = 'auto', }) => {
     const internalSorting = useRef({});
+    const [sortedItems, setSortedItems] = useState(items);
+    useEffect(() => {
+        setSortedItems(items);
+    }, [items]);
     const doAutoSort = (column) => {
         internalSorting.current = updateSortQuery(internalSorting.current, column.name, column.type);
-        autoSortItems(items, column, internalSorting.current[column.name]);
+        setSortedItems(autoSortItems(items, column, internalSorting.current[column.name]));
     };
     const handleSort = (column) => {
         if (!column.sortable)
@@ -744,7 +748,7 @@ const DataTable = ({ items, columns, sorting = {}, onSort, loading, pagination =
     };
     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: "relative w-full max-w-full h-fit", layout: layout, children: [jsx(TableHead, { children: columns.map((column) => (jsx(TableHeaderCell, { align: column.headerAlign, style: { width: column.width || 'auto' }, className: buildClassName('bg-gray-50 dark:bg-gray-800', 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)]'), 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 && items.length === 0 ? (jsx(EmptyTableRow, { colSpan: columns.length, children: emptyMessage })) : (items.map((item) => (jsx(TableRow, { className: "group", children: columns.map((column) => {
+                                    'sticky right-0 z-10 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]'), 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) => (jsx(TableRow, { className: "group", children: columns.map((column) => {
                                     var _a;
                                     return (jsx(TableCell, { align: column.align, className: buildClassName(column.sticky === 'left' &&
                                             'sticky left-0 z-10 shadow-[2px_0_6px_rgba(0,0,0,0.06)]', column.sticky === 'right' &&
@@ -858,7 +862,7 @@ Input.displayName = 'Input';
 const PASSWORD_TYPE = 'password';
 const PASSWORD_PLACEHOLDER = '••••••••••';
 const PasswordInput = (props) => {
-    const { type, placeholder, ...inputProps } = props;
+    const { ...inputProps } = props;
     const [showPassword, setShowPassword] = useState(false);
     return (jsx(Input, { ...inputProps, type: showPassword ? 'text' : PASSWORD_TYPE, placeholder: PASSWORD_PLACEHOLDER, rightGroup: jsx(Button, { theme: "secondary", variant: "plain", size: "xs", className: "px-1 mr-1", type: "button", onClick: () => setShowPassword(() => !showPassword), tabIndex: -1, children: showPassword ? (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-4", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" }) })) : (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-4", children: [jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" })] })) }) }));
 };
@@ -868,8 +872,9 @@ const Radio = forwardRef((props, ref) => {
     const { id, name, label, labelClass = '', wrapperClass = '', containerClass = '', error, disabled = false, className = '', 
     // RadioButton-only props removed from rest
     ...rest } = props;
-    const radioId = (_a = id !== null && id !== void 0 ? id : name) !== null && _a !== void 0 ? _a : 'checkbox-' + Math.random();
-    return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-center gap-2', containerClass), children: [jsx("div", { className: "grid place-items-center", children: jsx("input", { ref: ref, ...rest, id: radioId, name: name, type: "radio", disabled: disabled, "aria-selected": rest.checked, className: buildClassName('peer transition-all col-start-1 row-start-1 appearance-none shrink-0 size-4.5 rounded-full', 'border focus:ring-2 focus:ring-offset-2', 'checked:border-5 checked:bg-white', 'focus:ring-blue-500 checked:focus:ring-blue-600 dark:focus:ring-offset-gray-800', disabled
+    const generatedId = useId();
+    const radioId = (_a = id !== null && id !== void 0 ? id : name) !== null && _a !== void 0 ? _a : generatedId;
+    return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-center gap-2', containerClass), children: [jsx("div", { className: "grid place-items-center", children: jsx("input", { ref: ref, ...rest, id: radioId, name: name, type: "radio", disabled: disabled, "aria-checked": rest.checked, className: buildClassName('peer transition-all col-start-1 row-start-1 appearance-none shrink-0 size-4.5 rounded-full', 'border focus:ring-2 focus:ring-offset-2', 'checked:border-5 checked:bg-white', 'focus:ring-blue-500 checked:focus:ring-blue-600 dark:focus:ring-offset-gray-800', disabled
                                 ? 'border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-800 pointer-events-none'
                                 : buildClassName('bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500', 'checked:border-blue-600 checked:hover:border-blue-600 dark:checked:border-blue-600 dark:checked:hover:border-blue-600'), className) }) }), label && (jsx(Label, { htmlFor: radioId, className: buildClassName(disabled
                             ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
@@ -878,16 +883,9 @@ const Radio = forwardRef((props, ref) => {
 
 const RadioGroup = (props) => {
     const { name, label, labelClass, labelWrapperClass, labelHint, containerClass, options, value, row, error, showErrorMessage, onChange, } = props;
-    const [items, setItems] = useState([]);
-    useEffect(() => {
-        setItems(() => {
-            return options === null || options === void 0 ? void 0 : options.map((option) => {
-                if (typeof option === 'string') {
-                    return { label: option, value: option };
-                }
-                return option;
-            });
-        });
+    const items = useMemo(() => {
+        var _a;
+        return (_a = options === null || options === void 0 ? void 0 : options.map((option) => typeof option === 'string' ? { label: option, value: option } : option)) !== null && _a !== void 0 ? _a : [];
     }, [options]);
     return (jsxs("div", { className: buildClassName(containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-4', labelWrapperClass), children: [jsx(Label, { className: labelClass, children: label }), labelHint] })), jsx("div", { className: buildClassName('flex gap-4', row ? 'flex-row items-center' : 'flex-col items-start'), children: items.map((item) => (jsx(Radio, { name: name, id: `${name}-${item.value}`, label: item.label, value: item.value, checked: value === item.value, onChange: onChange }, item.value))) }), showErrorMessage && error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 };
@@ -981,35 +979,53 @@ const RangeSlider = ({ label, labelHint, labelClass = '', containerClass = '', c
     const activeThumbRef = useRef(null);
     // State for UI styling
     const [activeThumbState, setActiveThumbState] = useState(null);
+    // Keep prop values in refs so drag handlers always use latest values (no stale closure)
+    const valueMinRef = useRef(valueMin);
+    const valueMaxRef = useRef(valueMax);
+    const onChangeRef = useRef(onChange);
+    valueMinRef.current = valueMin;
+    valueMaxRef.current = valueMax;
+    onChangeRef.current = onChange;
     const hasError = !isEmpty(error);
     const percent = (v) => ((v - min) / (max - min)) * 100;
-    // ---------------------------------------------
-    // Pointer Move (drag)
-    // ---------------------------------------------
-    const pointerMoveHandler = (e) => {
+    // Stable handler references registered on window — these never change identity
+    // so removeEventListener always finds the right listener to remove.
+    const stablePointerMoveRef = useRef((e) => {
         if (!trackRef.current || !activeThumbRef.current)
             return;
         const rect = trackRef.current.getBoundingClientRect();
         const x = Math.min(Math.max(e.clientX - rect.left, 0), rect.width);
         const rawVal = min + (x / rect.width) * (max - min);
         if (activeThumbRef.current === 'min') {
-            onChange(Math.min(rawVal, valueMax - 1), valueMax);
+            onChangeRef.current(Math.min(rawVal, valueMaxRef.current - 1), valueMaxRef.current);
         }
         else {
-            onChange(valueMin, Math.max(rawVal, valueMin + 1));
+            onChangeRef.current(valueMinRef.current, Math.max(rawVal, valueMinRef.current + 1));
         }
-    };
-    const pointerUpHandler = () => {
+    });
+    const stablePointerUpRef = useRef(() => {
         activeThumbRef.current = null;
         setActiveThumbState(null);
-        window.removeEventListener('pointermove', pointerMoveHandler);
-        window.removeEventListener('pointerup', pointerUpHandler);
-    };
-    const startDrag = (thumb) => (e) => {
+        window.removeEventListener('pointermove', stablePointerMoveRef.current);
+        window.removeEventListener('pointerup', stablePointerUpRef.current);
+    });
+    // Remove listeners on unmount in case a drag is in progress
+    useEffect(() => {
+        const move = stablePointerMoveRef.current;
+        const up = stablePointerUpRef.current;
+        return () => {
+            window.removeEventListener('pointermove', move);
+            window.removeEventListener('pointerup', up);
+        };
+    }, []);
+    // ---------------------------------------------
+    // Pointer Move (drag)
+    // ---------------------------------------------
+    const startDrag = (thumb) => (_e) => {
         activeThumbRef.current = thumb;
         setActiveThumbState(thumb);
-        window.addEventListener('pointermove', pointerMoveHandler);
-        window.addEventListener('pointerup', pointerUpHandler);
+        window.addEventListener('pointermove', stablePointerMoveRef.current);
+        window.addEventListener('pointerup', stablePointerUpRef.current);
     };
     // ---------------------------------------------
     // Click Track to move closest thumb
@@ -1071,6 +1087,9 @@ const useDebounce = (value, delay) => {
 };
 const useDebounceFn = (fn, ms) => {
     const timeout = useRef(null);
+    useEffect(() => {
+        return () => clearTimeout(timeout.current);
+    }, []);
     return useCallback((...args) => {
         clearTimeout(timeout.current);
         timeout.current = setTimeout(() => fn(...args), ms);
@@ -1235,7 +1254,7 @@ const SelectBox = forwardRef((props, forwardedRef) => {
             console.error('onAdd handler error', err);
         }
     }, [onAdd, handleOnChangeInternal]);
-    const handleSearch = async (searchString) => {
+    const handleSearch = useCallback(async (searchString) => {
         var _a;
         try {
             setOptionsLoading(true);
@@ -1247,11 +1266,11 @@ const SelectBox = forwardRef((props, forwardedRef) => {
         finally {
             setOptionsLoading(false);
         }
-    };
+    }, [props.onSearch]);
     useEffect(() => {
         if (async && debouncedQuery)
             handleSearch(debouncedQuery);
-    }, [debouncedQuery, async]);
+    }, [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) &&
                                 (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) => {
@@ -1364,7 +1383,11 @@ const ToastProvider = ({ children, placement = 'top-center' }) => {
             timeoutRefs.current.delete(id);
         }
     };
-    const scheduleClose = (toast) => {
+    const closeToast = useCallback((id) => {
+        clearTimer(id);
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+    const scheduleClose = useCallback((toast) => {
         if (!toast.autoClose)
             return;
         clearTimer(toast.id);
@@ -1372,7 +1395,11 @@ const ToastProvider = ({ children, placement = 'top-center' }) => {
             closeToast(toast.id);
         }, toast.duration);
         timeoutRefs.current.set(toast.id, timeout);
-    };
+    }, [closeToast]);
+    useEffect(() => {
+        const refs = timeoutRefs.current;
+        return () => refs.forEach((id) => clearTimeout(id));
+    }, []);
     const showToast = useCallback((message, options) => {
         var _a, _b, _c, _d;
         const id = ++toastCounter;
@@ -1391,612 +1418,12 @@ const ToastProvider = ({ children, placement = 'top-center' }) => {
             return updated;
         });
         scheduleClose(newToast);
-    }, []);
-    const closeToast = useCallback((id) => {
-        clearTimer(id);
-        setToasts((prev) => prev.filter((t) => t.id !== id));
-    }, []);
+    }, [scheduleClose]);
     return (jsxs(ToastContext.Provider, { value: { showToast, closeToast }, children: [children, jsx("div", { className: buildClassName('fixed z-50 flex flex-col gap-3 pointer-events-none', placementClass[placement]), children: toasts.map((toast, index) => (jsx("div", { className: "pointer-events-auto", onMouseEnter: () => toast.pauseOnHover && clearTimer(toast.id), onMouseLeave: () => toast.pauseOnHover && scheduleClose(toast), children: jsx(Toast, { ...toast, isTop: placement.startsWith('top'), onClose: () => closeToast(toast.id) }) }, toast.id))) })] }));
 };
 
-const q = typeof window < "u" ? useLayoutEffect : useEffect;
-function oe(e) {
-  if (e !== void 0)
-    switch (typeof e) {
-      case "number":
-        return e;
-      case "string": {
-        if (e.endsWith("px"))
-          return parseFloat(e);
-        break;
-      }
-    }
-}
-function Ie({
-  box: e,
-  defaultHeight: t,
-  defaultWidth: s,
-  disabled: r,
-  element: n,
-  mode: o,
-  style: i
-}) {
-  const { styleHeight: f, styleWidth: l } = useMemo(
-    () => ({
-      styleHeight: oe(i?.height),
-      styleWidth: oe(i?.width)
-    }),
-    [i?.height, i?.width]
-  ), [c, d] = useState({
-    height: t,
-    width: s
-  }), a = r || f !== void 0 || o === "only-width" || f !== void 0 && l !== void 0;
-  return q(() => {
-    if (n === null || a)
-      return;
-    const u = new ResizeObserver((I) => {
-      for (const m of I) {
-        const { contentRect: b, target: g } = m;
-        n === g && d((w) => w.height === b.height && w.width === b.width ? w : {
-          height: b.height,
-          width: b.width
-        });
-      }
-    });
-    return u.observe(n, { box: e }), () => {
-      u?.unobserve(n);
-    };
-  }, [e, a, n, f, l]), useMemo(
-    () => ({
-      height: f ?? c.height,
-      width: l ?? c.width
-    }),
-    [c, f, l]
-  );
-}
-function ae(e) {
-  const t = useRef(() => {
-    throw new Error("Cannot call during render.");
-  });
-  return q(() => {
-    t.current = e;
-  }, [e]), useCallback((s) => t.current?.(s), [t]);
-}
-function Z({
-  containerElement: e,
-  direction: t,
-  isRtl: s,
-  scrollOffset: r
-}) {
-  return r;
-}
-function $(e, t = "Assertion error") {
-  if (!e)
-    throw console.error(t), Error(t);
-}
-function Y(e, t) {
-  if (e === t)
-    return true;
-  if (!!e != !!t || ($(e !== void 0), $(t !== void 0), Object.keys(e).length !== Object.keys(t).length))
-    return false;
-  for (const s in e)
-    if (!Object.is(t[s], e[s]))
-      return false;
-  return true;
-}
-function fe({
-  cachedBounds: e,
-  itemCount: t,
-  itemSize: s
-}) {
-  if (t === 0)
-    return 0;
-  if (typeof s == "number")
-    return t * s;
-  {
-    const r = e.get(
-      e.size === 0 ? 0 : e.size - 1
-    );
-    $(r !== void 0, "Unexpected bounds cache miss");
-    const n = (r.scrollOffset + r.size) / e.size;
-    return t * n;
-  }
-}
-function we({
-  align: e,
-  cachedBounds: t,
-  index: s,
-  itemCount: r,
-  itemSize: n,
-  containerScrollOffset: o,
-  containerSize: i
-}) {
-  if (s < 0 || s >= r)
-    throw RangeError(`Invalid index specified: ${s}`, {
-      cause: `Index ${s} is not within the range of 0 - ${r - 1}`
-    });
-  const f = fe({
-    cachedBounds: t,
-    itemCount: r,
-    itemSize: n
-  }), l = t.get(s), c = Math.max(
-    0,
-    Math.min(f - i, l.scrollOffset)
-  ), d = Math.max(
-    0,
-    l.scrollOffset - i + l.size
-  );
-  switch (e === "smart" && (o >= d && o <= c ? e = "auto" : e = "center"), e) {
-    case "start":
-      return c;
-    case "end":
-      return d;
-    case "center":
-      return l.scrollOffset <= i / 2 ? 0 : l.scrollOffset + l.size / 2 >= f - i / 2 ? f - i : l.scrollOffset + l.size / 2 - i / 2;
-    case "auto":
-    default:
-      return o >= d && o <= c ? o : o < d ? d : c;
-  }
-}
-function ie({
-  cachedBounds: e,
-  containerScrollOffset: t,
-  containerSize: s,
-  itemCount: r,
-  overscanCount: n
-}) {
-  const o = r - 1;
-  let i = 0, f = -1, l = 0, c = -1, d = 0;
-  for (; d < o; ) {
-    const a = e.get(d);
-    if (a.scrollOffset + a.size > t)
-      break;
-    d++;
-  }
-  for (i = d, l = Math.max(0, i - n); d < o; ) {
-    const a = e.get(d);
-    if (a.scrollOffset + a.size >= t + s)
-      break;
-    d++;
-  }
-  return f = Math.min(o, d), c = Math.min(r - 1, f + n), i < 0 && (i = 0, f = -1, l = 0, c = -1), {
-    startIndexVisible: i,
-    stopIndexVisible: f,
-    startIndexOverscan: l,
-    stopIndexOverscan: c
-  };
-}
-function me({
-  itemCount: e,
-  itemProps: t,
-  itemSize: s
-}) {
-  const r = /* @__PURE__ */ new Map();
-  return {
-    get(n) {
-      for ($(n < e, `Invalid index ${n}`); r.size - 1 < n; ) {
-        const i = r.size;
-        let f;
-        switch (typeof s) {
-          case "function": {
-            f = s(i, t);
-            break;
-          }
-          case "number": {
-            f = s;
-            break;
-          }
-        }
-        if (i === 0)
-          r.set(i, {
-            size: f,
-            scrollOffset: 0
-          });
-        else {
-          const l = r.get(i - 1);
-          $(
-            l !== void 0,
-            `Unexpected bounds cache miss for index ${n}`
-          ), r.set(i, {
-            scrollOffset: l.scrollOffset + l.size,
-            size: f
-          });
-        }
-      }
-      const o = r.get(n);
-      return $(
-        o !== void 0,
-        `Unexpected bounds cache miss for index ${n}`
-      ), o;
-    },
-    set(n, o) {
-      r.set(n, o);
-    },
-    get size() {
-      return r.size;
-    }
-  };
-}
-function Oe({
-  itemCount: e,
-  itemProps: t,
-  itemSize: s
-}) {
-  return useMemo(
-    () => me({
-      itemCount: e,
-      itemProps: t,
-      itemSize: s
-    }),
-    [e, t, s]
-  );
-}
-function ye({
-  containerSize: e,
-  itemSize: t
-}) {
-  let s;
-  switch (typeof t) {
-    case "string": {
-      $(
-        t.endsWith("%"),
-        `Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`
-      ), $(
-        e !== void 0,
-        "Container size must be defined if a percentage item size is specified"
-      ), s = e * parseInt(t) / 100;
-      break;
-    }
-    default: {
-      s = t;
-      break;
-    }
-  }
-  return s;
-}
-function ee({
-  containerElement: e,
-  containerStyle: t,
-  defaultContainerSize: s = 0,
-  direction: r,
-  isRtl: n = false,
-  itemCount: o,
-  itemProps: i,
-  itemSize: f,
-  onResize: l,
-  overscanCount: c
-}) {
-  const [d, a] = useState({
-    startIndexVisible: 0,
-    startIndexOverscan: 0,
-    stopIndexVisible: -1,
-    stopIndexOverscan: -1
-  }), {
-    startIndexVisible: u,
-    startIndexOverscan: I,
-    stopIndexVisible: m,
-    stopIndexOverscan: b
-  } = {
-    startIndexVisible: Math.min(o - 1, d.startIndexVisible),
-    startIndexOverscan: Math.min(o - 1, d.startIndexOverscan),
-    stopIndexVisible: Math.min(o - 1, d.stopIndexVisible),
-    stopIndexOverscan: Math.min(o - 1, d.stopIndexOverscan)
-  }, { height: g = s, width: w = s } = Ie({
-    defaultHeight: s ,
-    defaultWidth: void 0,
-    element: e,
-    mode: "only-height" ,
-    style: t
-  }), y = useRef({
-    height: 0,
-    width: 0
-  }), V = g , h = ye({ containerSize: V, itemSize: f });
-  useLayoutEffect(() => {
-    if (typeof l == "function") {
-      const p = y.current;
-      (p.height !== g || p.width !== w) && (l({ height: g, width: w }, { ...p }), p.height = g, p.width = w);
-    }
-  }, [g, l, w]);
-  const z = Oe({
-    itemCount: o,
-    itemProps: i,
-    itemSize: h
-  }), k = useCallback(
-    (p) => z.get(p),
-    [z]
-  ), S = useCallback(
-    () => fe({
-      cachedBounds: z,
-      itemCount: o,
-      itemSize: h
-    }),
-    [z, o, h]
-  ), W = useCallback(
-    (p) => {
-      const T = Z({
-        containerElement: e,
-        direction: r,
-        isRtl: n,
-        scrollOffset: p
-      });
-      return ie({
-        cachedBounds: z,
-        containerScrollOffset: T,
-        containerSize: V,
-        itemCount: o,
-        overscanCount: c
-      });
-    },
-    [
-      z,
-      e,
-      V,
-      r,
-      n,
-      o,
-      c
-    ]
-  );
-  q(() => {
-    const p = (e?.scrollTop ) ?? 0;
-    a(W(p));
-  }, [e, r, W]), q(() => {
-    if (!e)
-      return;
-    const p = () => {
-      a((T) => {
-        const { scrollLeft: R, scrollTop: v } = e, x = Z({
-          containerElement: e,
-          direction: r,
-          isRtl: n,
-          scrollOffset: v 
-        }), A = ie({
-          cachedBounds: z,
-          containerScrollOffset: x,
-          containerSize: V,
-          itemCount: o,
-          overscanCount: c
-        });
-        return Y(A, T) ? T : A;
-      });
-    };
-    return e.addEventListener("scroll", p), () => {
-      e.removeEventListener("scroll", p);
-    };
-  }, [
-    z,
-    e,
-    V,
-    r,
-    o,
-    c
-  ]);
-  const O = ae(
-    ({
-      align: p = "auto",
-      containerScrollOffset: T,
-      index: R
-    }) => {
-      let v = we({
-        align: p,
-        cachedBounds: z,
-        containerScrollOffset: T,
-        containerSize: V,
-        index: R,
-        itemCount: o,
-        itemSize: h
-      });
-      if (e) {
-        if (v = Z({
-          containerElement: e,
-          direction: r,
-          isRtl: n,
-          scrollOffset: v
-        }), typeof e.scrollTo != "function") {
-          const x = W(v);
-          Y(d, x) || a(x);
-        }
-        return v;
-      }
-    }
-  );
-  return {
-    getCellBounds: k,
-    getEstimatedSize: S,
-    scrollToIndex: O,
-    startIndexOverscan: I,
-    startIndexVisible: u,
-    stopIndexOverscan: b,
-    stopIndexVisible: m
-  };
-}
-function de(e) {
-  return useMemo(() => e, Object.values(e));
-}
-function ue(e, t) {
-  const {
-    ariaAttributes: s,
-    style: r,
-    ...n
-  } = e, {
-    ariaAttributes: o,
-    style: i,
-    ...f
-  } = t;
-  return Y(s, o) && Y(r, i) && Y(n, f);
-}
-function ze(e) {
-  return e != null && typeof e == "object" && "getAverageRowHeight" in e && typeof e.getAverageRowHeight == "function";
-}
-const te = "data-react-window-index";
-function Ae({
-  children: e,
-  className: t,
-  defaultHeight: s = 0,
-  listRef: r,
-  onResize: n,
-  onRowsRendered: o,
-  overscanCount: i = 3,
-  rowComponent: f,
-  rowCount: l,
-  rowHeight: c,
-  rowProps: d,
-  tagName: a = "div",
-  style: u,
-  ...I
-}) {
-  const m = de(d), b = useMemo(
-    () => memo(f, ue),
-    [f]
-  ), [g, w] = useState(null), y = ze(c), V = useMemo(() => y ? (v) => c.getRowHeight(v) ?? c.getAverageRowHeight() : c, [y, c]), {
-    getCellBounds: h,
-    getEstimatedSize: z,
-    scrollToIndex: k,
-    startIndexOverscan: S,
-    startIndexVisible: W,
-    stopIndexOverscan: O,
-    stopIndexVisible: p
-  } = ee({
-    containerElement: g,
-    containerStyle: u,
-    defaultContainerSize: s,
-    direction: "vertical",
-    itemCount: l,
-    itemProps: m,
-    itemSize: V,
-    onResize: n,
-    overscanCount: i
-  });
-  useImperativeHandle(
-    r,
-    () => ({
-      get element() {
-        return g;
-      },
-      scrollToRow({
-        align: v = "auto",
-        behavior: x = "auto",
-        index: A
-      }) {
-        const M = k({
-          align: v,
-          containerScrollOffset: g?.scrollTop ?? 0,
-          index: A
-        });
-        typeof g?.scrollTo == "function" && g.scrollTo({
-          behavior: x,
-          top: M
-        });
-      }
-    }),
-    [g, k]
-  ), q(() => {
-    if (!g)
-      return;
-    const v = Array.from(g.children).filter((x, A) => {
-      if (x.hasAttribute("aria-hidden"))
-        return false;
-      const M = `${S + A}`;
-      return x.setAttribute(te, M), true;
-    });
-    if (y)
-      return c.observeRowElements(v);
-  }, [
-    g,
-    y,
-    c,
-    S,
-    O
-  ]), useEffect(() => {
-    S >= 0 && O >= 0 && o && o(
-      {
-        startIndex: W,
-        stopIndex: p
-      },
-      {
-        startIndex: S,
-        stopIndex: O
-      }
-    );
-  }, [
-    o,
-    S,
-    W,
-    O,
-    p
-  ]);
-  const T = useMemo(() => {
-    const v = [];
-    if (l > 0)
-      for (let x = S; x <= O; x++) {
-        const A = h(x);
-        v.push(
-          /* @__PURE__ */ createElement(
-            b,
-            {
-              ...m,
-              ariaAttributes: {
-                "aria-posinset": x + 1,
-                "aria-setsize": l,
-                role: "listitem"
-              },
-              key: x,
-              index: x,
-              style: {
-                position: "absolute",
-                left: 0,
-                transform: `translateY(${A.scrollOffset}px)`,
-                // In case of dynamic row heights, don't specify a height style
-                // otherwise a default/estimated height would mask the actual height
-                height: y ? void 0 : A.size,
-                width: "100%"
-              }
-            }
-          )
-        );
-      }
-    return v;
-  }, [
-    b,
-    h,
-    y,
-    l,
-    m,
-    S,
-    O
-  ]), R = /* @__PURE__ */ jsx(
-    "div",
-    {
-      "aria-hidden": true,
-      style: {
-        height: z(),
-        width: "100%",
-        zIndex: -1
-      }
-    }
-  );
-  return createElement(
-    a,
-    {
-      role: "list",
-      ...I,
-      className: t,
-      ref: w,
-      style: {
-        position: "relative",
-        maxHeight: "100%",
-        flexGrow: 1,
-        overflowY: "auto",
-        ...u
-      }
-    },
-    T,
-    e,
-    R
-  );
-}
-
-const VirtualizedRow = ({ index, style, items, columns, gridTemplate, }) => {
+const VirtualizedRow = ({ index, style, data }) => {
+    const { items, columns, gridTemplate } = data;
     const item = items[index];
     return (jsx("div", { role: "row", className: "grid border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 group", style: {
             ...style,
@@ -2018,14 +1445,21 @@ const VirtualizedRow = ({ index, style, items, columns, gridTemplate, }) => {
 const useGridTemplate = (columns) => useMemo(() => columns.map((col) => (col.width ? `${col.width}px` : '1fr')).join(' '), [columns]);
 const VirtualizedDataTable = ({ items, columns, sorting = {}, onSort, loading = false, emptyMessage = 'No data available', containerClass = '', wrapperClass = '', rowHeight = 48, maxHeight = 400, }) => {
     const scrollRef = useRef(null);
+    const outerRef = useRef(null);
     const headerRef = useRef(null);
     const gridTemplate = useGridTemplate(columns);
-    /** Sync body → header scroll */
-    const handleScrollSync = (scrollOffset) => {
-        if (headerRef.current) {
-            headerRef.current.scrollLeft = scrollOffset;
-        }
-    };
+    /** Sync horizontal scroll of the virtualized body → header */
+    useEffect(() => {
+        const el = outerRef.current;
+        if (!el)
+            return;
+        const handler = () => {
+            if (headerRef.current)
+                headerRef.current.scrollLeft = el.scrollLeft;
+        };
+        el.addEventListener('scroll', handler);
+        return () => el.removeEventListener('scroll', handler);
+    }, []);
     const handleSort = useCallback((column) => {
         if (column.sortable)
             onSort === null || onSort === void 0 ? void 0 : onSort(column);
@@ -2057,11 +1491,7 @@ const VirtualizedDataTable = ({ items, columns, sorting = {}, onSort, loading =
     /* -------------------------------------------------------
      * MAIN (virtualized body)
      * ------------------------------------------------------- */
-    return (jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxs("div", { className: buildClassName('rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden', wrapperClass), children: [Header, jsx("div", { style: {
-                        height: maxHeight,
-                        overflowY: 'auto',
-                        overflowX: 'auto',
-                    }, children: jsx(Ae, { listRef: scrollRef, rowComponent: VirtualizedRow, rowCount: items.length, rowHeight: rowHeight, rowProps: { items, columns, gridTemplate }, onScroll: (e) => handleScrollSync(e.currentTarget.scrollLeft) }) })] }) }));
+    return (jsx("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: jsxs("div", { className: buildClassName('rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden', wrapperClass), children: [Header, jsx(FixedSizeList, { ref: scrollRef, outerRef: outerRef, height: maxHeight, width: "100%", itemCount: items.length, itemSize: rowHeight, itemData: { items, columns, gridTemplate }, children: VirtualizedRow })] }) }));
 };
 
 const useIsMobile = () => {