@pk-design/react-tailwind 1.1.6 → 1.2.0

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, useId, useRef, useState, useEffect, 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));
 
@@ -140,19 +141,19 @@ TextContent.displayName = 'TextContent';
  */
 const THEMED_BTN_CLASS = {
     primary: {
-        default: 'text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-blue-600 disabled:bg-blue-400 dark:disabled:bg-blue-500',
-        outlined: 'text-blue-600 hover:text-white border border-blue-600 hover:bg-blue-600 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 focus:outline-blue-600 disabled:text-blue-400 disabled:border-blue-400',
-        plain: 'text-blue-600 hover:bg-black/5 dark:text-blue-400 dark:hover:bg-gray-700 focus:outline-blue-600 disabled:text-blue-400',
+        default: 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus:outline-[var(--ui-primary-ring)] disabled:bg-[var(--ui-primary-disabled)]',
+        outlined: 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus:outline-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)] disabled:border-[var(--ui-primary-disabled)]',
+        plain: 'text-[var(--ui-primary-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus:outline-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',
     },
     danger: {
-        default: 'text-white bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-red-600 disabled:bg-red-400 dark:disabled:bg-red-500',
-        outlined: 'text-red-600 hover:text-white border border-red-600 hover:bg-red-600 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-500 focus:outline-red-600 disabled:text-red-400 disabled:border-red-400',
-        plain: 'text-red-600 hover:bg-black/5 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-red-600 disabled:text-red-400',
+        default: 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus:outline-[var(--ui-danger-ring)] disabled:bg-[var(--ui-danger-disabled)]',
+        outlined: 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus:outline-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)] disabled:border-[var(--ui-danger-disabled)]',
+        plain: 'text-[var(--ui-danger-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus:outline-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',
     },
     secondary: {
-        default: 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 focus:outline-blue-600 disabled:bg-gray-200 dark:disabled:bg-gray-700',
-        outlined: 'text-gray-700 hover:text-white border border-gray-500 hover:bg-gray-700 dark:border-gray-500 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus:outline-blue-600 disabled:text-gray-400 disabled:border-gray-400',
-        plain: 'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus:outline-blue-600 disabled:text-gray-400',
+        default: 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 focus:outline-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',
+        outlined: 'text-gray-700 hover:text-white border border-gray-500 hover:bg-gray-700 dark:border-gray-500 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus:outline-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-gray-400',
+        plain: 'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus:outline-[var(--ui-focus-ring)] disabled:text-gray-400',
     },
 };
 /**
@@ -215,10 +216,10 @@ const AlertTypeIconMap = {
     info: SvgInfo,
 };
 const TypeClassMap = {
-    success: 'bg-green-50 ring-green-600/20 text-green-700',
-    danger: 'bg-red-50 ring-red-600/20 text-red-700',
-    warning: 'bg-orange-50 ring-orange-600/20 text-orange-700',
-    info: 'bg-blue-50 ring-blue-600/20 text-blue-700',
+    success: 'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',
+    danger: 'bg-[var(--ui-danger-light)]  ring-[var(--ui-danger-ring-subtle)]  text-[var(--ui-danger-text)]',
+    warning: 'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',
+    info: 'bg-[var(--ui-info-light)]    ring-[var(--ui-info-ring-subtle)]    text-[var(--ui-info-text)]',
 };
 const Alert = (props) => {
     const { type = 'info', className = '', message, children, removable = false, onRemove = () => { }, ...restProps } = props;
@@ -228,11 +229,11 @@ const Alert = (props) => {
 Alert.displayName = 'Alert';
 
 const ThemeClassMap = {
-    success: 'bg-green-50 ring-green-600/20 text-green-700 dark:bg-green-600 dark:text-green-50 dark:ring-green-400/20',
-    danger: 'bg-red-50 dark:bg-red-600 text-red-700 dark:text-red-50 ring-red-600/20 dark:ring-red-400/20',
-    warning: 'bg-yellow-50 dark:bg-yellow-600 text-yellow-700 dark:text-yellow-50 ring-yellow-600/20 dark:ring-yellow-400/20',
-    info: 'bg-blue-50 dark:bg-blue-600 text-blue-700 dark:text-blue-50 ring-blue-600/20 dark:ring-blue-400/20',
-    secondary: 'bg-gray-50 dark:bg-gray-600 text-gray-700 dark:text-gray-50 ring-gray-600/20 dark:ring-gray-400/20',
+    success: 'bg-[var(--ui-success-light)] text-[var(--ui-success-text)] ring-[var(--ui-success-ring-subtle)]',
+    danger: 'bg-[var(--ui-danger-light)] text-[var(--ui-danger-text)] ring-[var(--ui-danger-ring-subtle)]',
+    warning: 'bg-[var(--ui-warning-light)] text-[var(--ui-warning-text)] ring-[var(--ui-warning-ring-subtle)]',
+    info: 'bg-[var(--ui-info-light)] text-[var(--ui-info-text)] ring-[var(--ui-info-ring-subtle)]',
+    secondary: 'bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 ring-[var(--ui-secondary-ring-subtle)]',
 };
 const Badge = forwardRef((props, ref) => {
     const { theme = 'info', className = '', children, removable = false, rounded = false, onRemove = () => { }, ...restProps } = props;
@@ -374,7 +375,7 @@ const Checkbox = forwardRef((props, ref) => {
     ...rest } = props;
     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
+    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-[var(--ui-primary)] checked:border-[var(--ui-primary)]', 'focus:ring-[var(--ui-focus-ring)] 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
                             ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
@@ -846,8 +847,8 @@ function buildInputClass(className, { isFocusWithin = false, disabled = false }
     return 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 outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'invalid:group-[.has-error]:outline-red-500', disabled
         ? 'pointer-events-none bg-gray-100 dark:bg-gray-800 dark:text-gray-600 dark:placeholder-gray-600 placeholder-gray-400 outline-gray-200 dark:outline-gray-700'
         : 'bg-white dark:bg-gray-700 dark:text-white outline-gray-300 dark:outline-gray-600 dark:placeholder-gray-400 placeholder-gray-400', isFocusWithin
-        ? 'focus-within:outline-blue-600 dark:focus-within:outline-blue-600 focus-within:outline-2 focus-within:-outline-offset-2'
-        : 'focus:outline-blue-600 dark:focus:outline-blue-600 focus:outline-2 focus:-outline-offset-2', className);
+        ? 'focus-within:outline-[var(--ui-focus-ring)] focus-within:outline-2 focus-within:-outline-offset-2'
+        : 'focus:outline-[var(--ui-focus-ring)] focus:outline-2 focus:-outline-offset-2', className);
 }
 const Input = forwardRef((props, ref) => {
     const { name, id = name, type, label, labelHint, className, labelClass, labelWrapperClass, containerClass, error, showErrorMessage = true, rightGroup, leftGroup, ...inputProps } = props;
@@ -873,9 +874,9 @@ const Radio = forwardRef((props, ref) => {
     ...rest } = props;
     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
+    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-[var(--ui-focus-ring)] 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
+                                : 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-[var(--ui-primary)] checked:hover:border-[var(--ui-primary)]'), className) }) }), label && (jsx(Label, { htmlFor: radioId, className: buildClassName(disabled
                             ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
                             : 'cursor-pointer text-gray-600 dark:text-gray-300', labelClass), children: label }))] }), error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 });
@@ -1294,13 +1295,13 @@ function buildTabClass({ selected, variant, }) {
          */
         case 'underline':
             return buildClassName('px-3 py-1.5 text-sm font-medium transition relative', 'text-gray-600 dark:text-gray-300', 'hover:text-gray-900 dark:hover:text-white', selected &&
-                'text-gray-900 dark:text-white after:absolute after:left-0 after:right-0 after:-bottom-1 after:h-0.5 after:bg-blue-600');
+                'text-gray-900 dark:text-white after:absolute after:left-0 after:right-0 after:-bottom-1 after:h-0.5 after:bg-[var(--ui-primary)]');
         /**
          * SEGMENTED
          */
         case 'segmented':
             return buildClassName('px-3 py-1.5 text-sm font-medium rounded-lg transition', selected
-                ? 'bg-blue-600 text-white'
+                ? 'bg-[var(--ui-primary)] text-white'
                 : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700');
         /**
          * SOLID
@@ -1324,29 +1325,22 @@ const Textarea = forwardRef((props, ref) => {
  * Icons for each toast type
  */
 const iconMap = {
-    success: jsx(SvgCircleCheck, { className: "size-5 text-green-600 dark:text-green-400" }),
-    error: jsx(SvgCircleAlert, { className: "size-5 text-red-600 dark:text-red-400" }),
-    info: jsx(SvgInfo, { className: "size-5 text-blue-600 dark:text-blue-400" }),
-    warning: jsx(SvgTriangleAlert, { className: "size-5 text-yellow-600 dark:text-yellow-400" }),
+    success: jsx(SvgCircleCheck, { className: "size-5 text-[var(--ui-success)]" }),
+    error: jsx(SvgCircleAlert, { className: "size-5 text-[var(--ui-danger)]" }),
+    info: jsx(SvgInfo, { className: "size-5 text-[var(--ui-info)]" }),
+    warning: jsx(SvgTriangleAlert, { className: "size-5 text-[var(--ui-warning)]" }),
 };
-/**
- * Subtle icon + text color adjustments
- */
 const textColorMap = {
-    success: 'text-green-900 dark:text-green-200',
-    error: 'text-red-900 dark:text-red-200',
-    info: 'text-blue-900 dark:text-blue-200',
-    warning: 'text-yellow-900 dark:text-yellow-200',
+    success: 'text-[var(--ui-success-text)]',
+    error: 'text-[var(--ui-danger-text)]',
+    info: 'text-[var(--ui-info-text)]',
+    warning: 'text-[var(--ui-warning-text)]',
 };
-/**
- * Pleasant colored *top border only*
- * No background color — soft neutral surface
- */
 const borderStyle = {
-    success: 'border-t-4 border-green-600 dark:border-green-400',
-    error: 'border-t-4 border-red-600 dark:border-red-400',
-    info: 'border-t-4 border-blue-600 dark:border-blue-400',
-    warning: 'border-t-4 border-yellow-600 dark:border-yellow-400',
+    success: 'border-t-4 border-[var(--ui-success)]',
+    error: 'border-t-4 border-[var(--ui-danger)]',
+    info: 'border-t-4 border-[var(--ui-info)]',
+    warning: 'border-t-4 border-[var(--ui-warning)]',
 };
 const Toast = ({ message, type, onClose, className, id, isTop = true, }) => {
     const enterFrom = isTop ? 'opacity-0 -translate-y-3 scale-95' : 'opacity-0 translate-y-3 scale-95';
@@ -1421,604 +1415,8 @@ const ToastProvider = ({ children, placement = 'top-center' }) => {
     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,
@@ -2040,14 +1438,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);
@@ -2079,11 +1484,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 = () => {