@pk-design/react-tailwind 1.0.5 → 1.1.0

package/dist/react-tailwind.es.js

@@ -1,15 +1,15 @@
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { twMerge } from 'tailwind-merge';
 import * as React from 'react';
-import React__default, { forwardRef, useState, useEffect, Fragment, isValidElement, useRef, createContext, useContext } from 'react';
-import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, Menu, MenuButton, MenuItems, MenuItem, RadioGroup, Radio, Combobox, ComboboxInput, ComboboxButton, ComboboxOptions, ComboboxOption, TabGroup, TabList, Tab, TabPanels, TabPanel, Transition } from '@headlessui/react';
+import React__default, { forwardRef, useMemo, useState, useId, useEffect, useRef, Fragment as Fragment$1, useCallback, useImperativeHandle, createContext, useContext, memo, useLayoutEffect, createElement } 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';
 
 const buildClassName = (...classes) => twMerge(classes.filter(Boolean));
 
-var _path$d, _path2;
-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$i, _path2;
+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) {
-  return /*#__PURE__*/React.createElement("svg", _extends$d({
+  return /*#__PURE__*/React.createElement("svg", _extends$i({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -20,17 +20,17 @@ var SvgBadgeCheck = function SvgBadgeCheck(props) {
     strokeWidth: 2,
     className: "lucide lucide-badge-check-icon lucide-badge-check",
     viewBox: "0 0 24 24"
-  }, props), _path$d || (_path$d = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$i || (_path$i = /*#__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$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$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 SvgCircleX = function SvgCircleX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$c({
+  return /*#__PURE__*/React.createElement("svg", _extends$h({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -45,15 +45,15 @@ var SvgCircleX = function SvgCircleX(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
+  })), _path$h || (_path$h = /*#__PURE__*/React.createElement("path", {
     d: "m15 9-6 6M9 9l6 6"
   })));
 };
 
-var _circle$3, _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 _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 SvgCircleAlert = function SvgCircleAlert(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$b({
+  return /*#__PURE__*/React.createElement("svg", _extends$g({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -68,15 +68,15 @@ var SvgCircleAlert = function SvgCircleAlert(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
+  })), _path$g || (_path$g = /*#__PURE__*/React.createElement("path", {
     d: "M12 8v4M12 16h.01"
   })));
 };
 
-var _circle$2, _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 _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 SvgInfo = function SvgInfo(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$a({
+  return /*#__PURE__*/React.createElement("svg", _extends$f({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -91,15 +91,15 @@ var SvgInfo = function SvgInfo(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
+  })), _path$f || (_path$f = /*#__PURE__*/React.createElement("path", {
     d: "M12 16v-4M12 8h.01"
   })));
 };
 
-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$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 SvgX = function SvgX(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$9({
+  return /*#__PURE__*/React.createElement("svg", _extends$e({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -110,7 +110,7 @@ var SvgX = function SvgX(props) {
     strokeWidth: 2,
     className: "lucide lucide-x-icon lucide-x",
     viewBox: "0 0 24 24"
-  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$e || (_path$e = /*#__PURE__*/React.createElement("path", {
     d: "M18 6 6 18M6 6l12 12"
   })));
 };
@@ -121,19 +121,23 @@ const loaderSizeMap = {
     md: 'size-8',
     lg: 'size-10',
 };
-const Loader = ({ className = 'text-blue-600', size = 'md' }) => {
-    return (jsx("svg", { className: buildClassName(loaderSizeMap[size], className, 'spinner'), viewBox: "0 0 50 50", children: jsx("circle", { className: "path", cx: "25", cy: "25", r: "20", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "5" }) }));
+const Loader = ({ className = 'text-blue-600 dark:text-white', size = 'md', ...props }) => {
+    return (jsx("svg", { className: buildClassName(loaderSizeMap[size], className, 'spinner'), viewBox: "0 0 50 50", ...props, children: jsx("circle", { className: "path", cx: "25", cy: "25", r: "20", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "5" }) }));
 };
 
 const TextContent = forwardRef((props, ref) => {
-    const { as = 'span', xsmall = false, small = false, strong = false, muted = false, error = false, className, ...rest } = props;
-    return React__default.createElement(as, {
-        ref,
-        className: buildClassName(xsmall && 'text-xs/5', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-gray-500', error && 'text-red-500', className),
+    const { xsmall = false, small = false, strong = false, muted = false, error = false, className, ...rest } = props;
+    return React__default.createElement('span', {
         ...rest,
+        ref,
+        className: buildClassName(xsmall && 'text-xs/5', small && 'text-sm/6', strong && 'font-semibold', muted && 'text-gray-500', error && 'text-red-500 dark:text-red-500', className),
     });
 });
+TextContent.displayName = 'TextContent';
 
+/**
+ * Tailwind CSS classes for theme + variant combinations.
+ */
 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',
@@ -151,22 +155,58 @@ const THEMED_BTN_CLASS = {
         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',
     },
 };
+/**
+ * Generate size classes.
+ */
 const getBtnSizeClasses = (size, iconOnly = false) => {
     switch (size) {
         case 'xs':
-            return `text-xs ${iconOnly ? 'p-1 rounded-sm' : 'px-2 py-1 rounded-sm gap-1'}`;
+            return iconOnly ? 'p-1 rounded-sm text-xs' : 'px-2 py-1 rounded-sm gap-1 text-xs';
         case 'sm':
-            return `text-sm ${iconOnly ? 'p-1.5 rounded' : ' px-3 py-1.5 rounded gap-1.5'}`;
+            return iconOnly ? 'p-1.5 rounded text-sm' : 'px-3 py-1.5 rounded gap-1.5 text-sm';
         case 'md':
-            return `text-sm ${iconOnly ? 'p-2 rounded-md' : 'px-4 py-2 rounded-md gap-2'}`;
+            return iconOnly ? 'p-2 rounded-md text-sm' : 'px-4 py-2 rounded-md gap-2 text-sm';
         case 'lg':
-            return `text-base ${iconOnly ? 'p-2.5 rounded-lg' : 'px-5 py-2.5 rounded-lg gap-2'}`;
+            return iconOnly ? 'p-2.5 rounded-lg text-base' : 'px-5 py-2.5 rounded-lg gap-2 text-base';
     }
 };
-const Button = forwardRef((props, ref) => {
-    const { className = '', children, theme = 'primary', variant = 'default', size = 'md', as: Element = 'button', loading = false, loadingText = '', type = 'button', rounded = false, disabled, iconOnly = false, ...buttonProps } = props;
-    return (jsx(Element, { ref: ref, className: buildClassName(THEMED_BTN_CLASS[theme][variant], getBtnSizeClasses(size, iconOnly), 'focus:outline focus:outline-2 focus:outline-offset-2', 'font-medium flex items-center justify-center shrink-0', 'cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-75', 'transition duration-200 ease-in-out', rounded && 'rounded-full', variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none', className), type: type, disabled: disabled || loading, ...buttonProps, children: loading ? (jsxs("span", { className: "flex items-center gap-2", children: [jsx(Loader, { className: "text-white", size: "xs" }), loadingText && jsx(TextContent, { children: loadingText })] })) : (children) }));
+/**
+ * Base shared tailwind classes.
+ */
+const BASE_BTN_CLASS = 'font-medium flex items-center justify-center shrink-0 cursor-pointer ' +
+    'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-75 ' +
+    'transition duration-200 ease-in-out';
+const Button = forwardRef(({ as, type, ...props }, ref) => {
+    const { className = '', children, theme = 'primary', variant = 'default', size = 'md', loading = false, loadingText = '', rounded = false, disabled, iconOnly = false, noOutlineOnFocus = false, ...restProps } = props;
+    const Component = as || 'button';
+    // Accessibility guard for icon-only buttons
+    if (iconOnly && !restProps['aria-label']) {
+        console.warn('[ui] <Button iconOnly> requires aria-label for accessibility.');
+    }
+    // Disable interaction when loading
+    const resolvedDisabled = disabled || loading;
+    // Clean invalid props when not rendering a real button
+    const { type: _ignoreType, disabled: _ignoreDisabled, ...cleanRest } = restProps;
+    const buttonSpecificProps = Component === 'button'
+        ? {
+            type: type !== null && type !== void 0 ? type : 'button',
+            disabled: resolvedDisabled,
+        }
+        : {};
+    /**
+     * Memoized className for perf & stability.
+     */
+    const classes = useMemo(() => buildClassName(BASE_BTN_CLASS, THEMED_BTN_CLASS[theme][variant], getBtnSizeClasses(size, iconOnly), !noOutlineOnFocus && 'focus:outline focus:outline-2 focus:outline-offset-2', rounded && 'rounded-full', variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none', className), [theme, variant, size, iconOnly, rounded, noOutlineOnFocus, className]);
+    /**
+     * SPECIAL CASE:
+     * iconOnly + loading → show spinner only
+     */
+    if (loading && iconOnly) {
+        return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs" }) }));
+    }
+    return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: loading ? (jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs" }), loadingText && jsx(TextContent, { children: loadingText })] })) : (children) }));
 });
+Button.displayName = 'Button';
 
 const AlertTypeIconMap = {
     success: SvgBadgeCheck,
@@ -183,8 +223,9 @@ 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" }), 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(), children: jsx(SvgX, { className: "size-4.5" }) }))] }));
+    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" }) }))] }));
 };
+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',
@@ -195,13 +236,14 @@ const ThemeClassMap = {
 };
 const Badge = forwardRef((props, ref) => {
     const { theme = 'info', className = '', children, removable = false, rounded = false, onRemove = () => { }, ...restProps } = props;
-    return (jsxs("span", { 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'), ...restProps, children: [jsx("span", { 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", 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", onClick: () => onRemove() })) : null] }));
 });
+Badge.displayName = 'Badge';
 
-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$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 SvgTriangleAlert = function SvgTriangleAlert(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$8({
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -212,15 +254,15 @@ var SvgTriangleAlert = function SvgTriangleAlert(props) {
     strokeWidth: 2,
     className: "lucide lucide-triangle-alert-icon lucide-triangle-alert",
     viewBox: "0 0 24 24"
-  }, props), _path$8 || (_path$8 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$d || (_path$d = /*#__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$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 _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 SvgCircleCheck = function SvgCircleCheck(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$7({
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -235,12 +277,13 @@ var SvgCircleCheck = function SvgCircleCheck(props) {
     cx: 12,
     cy: 12,
     r: 10
-  })), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+  })), _path$c || (_path$c = /*#__PURE__*/React.createElement("path", {
     d: "m9 12 2 2 4-4"
   })));
 };
 
 const sizeMap = {
+    4: `size-4`,
     5: `size-5`,
     6: `size-6`,
     7: `size-7`,
@@ -255,14 +298,15 @@ const IconMap = {
     warning: SvgTriangleAlert,
 };
 const Banner = forwardRef((props, ref) => {
-    const { type = 'info', iconSize = 5, children } = props;
-    const className = buildClassName('text-sm banner rounded-md flex w-full p-3 mb-4 items-center', type === 'info' ? 'bg-blue-50 text-blue-700' : '', type === 'error' ? 'bg-red-50 text-red-700' : '', type === 'success' ? 'bg-green-50 text-green-700' : '', type === 'warning' ? 'bg-orange-50 border border-orange-200 text-orange-700' : '');
+    const { type = 'info', iconSize = 5, children, ...restProps } = props;
+    const className = buildClassName('text-sm banner rounded-md flex w-full p-3 items-center', type === 'info' ? 'bg-blue-50 text-blue-700' : '', type === 'error' ? 'bg-red-50 text-red-700' : '', type === 'success' ? 'bg-green-50 text-green-700' : '', type === 'warning' ? 'bg-orange-50 text-orange-700' : '');
     const renderIcon = () => {
         const Icon = IconMap[type];
-        return jsx(Icon, { className: buildClassName('ml-1 mr-3', sizeMap[iconSize]) });
+        return (jsx(Icon, { "data-testid": `banner-${type}-icon`, className: buildClassName('ml-1 mr-3', sizeMap[iconSize]) }));
     };
-    return (jsxs("div", { ref: ref, className: className, children: [renderIcon(), jsx("div", { className: "flex items-center w-full justify-between", children: children })] }));
+    return (jsxs("div", { ref: ref, className: className, "data-testid": `banner-${type}`, ...restProps, children: [renderIcon(), jsx("div", { className: "flex items-center w-full justify-between", children: children })] }));
 });
+Banner.displayName = 'Banner';
 
 const BodyText = forwardRef((props, ref) => {
     const { as = 'p', small = false, strong = false, muted = false, error = false, inline = false, className, ...rest } = props;
@@ -272,11 +316,12 @@ const BodyText = forwardRef((props, ref) => {
         ...rest,
     });
 });
+BodyText.displayName = 'BodyText';
 
-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$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 SvgSlash = function SvgSlash(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$6({
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -287,7 +332,7 @@ var SvgSlash = function SvgSlash(props) {
     strokeWidth: 2,
     className: "lucide lucide-slash-icon lucide-slash",
     viewBox: "0 0 24 24"
-  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$b || (_path$b = /*#__PURE__*/React.createElement("path", {
     d: "M22 2 2 22"
   })));
 };
@@ -295,67 +340,156 @@ 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", children: items.map((item, index) => (jsxs("span", { className: "inline-flex gap-2 items-center dark:text-white", children: [isLast(index) ? jsx("span", { className: "font-medium", children: item.text }) : render(item), !isLast(index) && jsx(SvgSlash, { className: "size-4" })] }, item.key))) }));
+    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))) }));
 };
+Breadcrumb.displayName = 'Breadcrumb';
 
-const Card = forwardRef(({ className, as = 'div', hoverable = false, bordered = false, noPadding = false, ...rest }, ref) => React__default.createElement(as, {
-    ref: ref,
-    className: buildClassName('bg-white rounded-md dark:bg-gray-800', noPadding ? '' : 'p-2 md:p-4', hoverable && 'shadow hover:shadow-md transition-shadow duration-200', bordered && 'border border-gray-200 dark:border-gray-700', className),
-    ...rest,
-}));
+const BASE_CARD_CLASS = 'bg-white rounded-md dark:bg-gray-800';
+const Card = forwardRef((props, ref) => {
+    // Remove Card-only props from rest (avoid leaking to DOM)
+    const { as: Element = 'div', hoverable = false, bordered = false, noPadding = false, ...rest } = props;
+    // Extract className safely from rest
+    const { className, ...cleanRest } = rest;
+    const classes = buildClassName(BASE_CARD_CLASS, !noPadding && 'p-2 md:p-4', hoverable && 'shadow hover:shadow-md transition-shadow duration-200', bordered && 'border border-gray-200 dark:border-gray-700', className);
+    return jsx(Element, { ref: ref, className: classes, ...cleanRest });
+});
+Card.displayName = 'Card';
 
 const Label = forwardRef((props, ref) => {
     const { className, children, ...labelProps } = props;
-    return (jsx("label", { ref: ref, ...labelProps, className: buildClassName('block text-sm font-medium text-gray-500 dark:text-gray-400', className), children: children }));
+    return (jsx("label", { ref: ref, ...labelProps, className: buildClassName('block text-sm font-medium text-gray-600 dark:text-gray-300', className), children: children }));
 });
+Label.displayName = 'Label';
 
 const Checkbox = forwardRef((props, ref) => {
-    const { type, name, id = name, wrapperClass = '', containerClass = '', label = null, labelClass = '', error = null, disabled = false, className = '', ...checkboxProps } = props;
-    return (jsxs("div", { className: buildClassName(wrapperClass), children: [jsxs("div", { className: buildClassName('flex items-center', containerClass), children: [jsxs("label", { className: buildClassName('inline-flex items-center relative', disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'), children: [jsx("input", { ref: ref, ...checkboxProps, id: id, name: name, type: "checkbox", disabled: disabled, className: buildClassName('peer size-4.5 cursor-pointer transition-all appearance-none rounded hover:shadow-md border border-gray-300 checked:bg-blue-600 checked:border-blue-600', 'bg-gray-50 dark:bg-gray-700', 'focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900') }), jsx("span", { className: "absolute text-white opacity-0 peer-checked:opacity-100 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: id, className: `${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ml-2 font-normal text-gray-600 ${labelClass}`, children: label }))] }), error && jsx("div", { className: "mt-1 text-red-600 text-sm", children: error })] }));
+    var _a;
+    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();
+    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
+                            ? 'cursor-not-allowed text-gray-400 dark:text-gray-500'
+                            : 'cursor-pointer text-gray-600 dark:text-gray-300', 'ml-2 font-normal', labelClass), children: label }))] }), error && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
 });
+Checkbox.displayName = 'Checkbox';
 
 const CheckboxGroup = (props) => {
-    const { name, options, label = null, labelClass = '', labelWrapperClass = '', labelHint = null, containerClass = '', value = [], onChange, inline, } = 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(() => {
-        setItems(() => options.map((option) => {
-            if (typeof option === 'string') {
-                return { label: option, value: option };
-            }
-            return option;
-        }));
+        const normalized = options.map((opt) => typeof opt === 'string' ? { label: opt, value: opt } : opt);
+        setItems(normalized);
     }, [options]);
-    return (jsxs("div", { className: buildClassName('mb-3 space-y-3', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, children: label }), jsx(BodyText, { muted: true, small: true, children: labelHint })] })), jsx("div", { className: buildClassName('flex gap-3', inline ? 'flex-wrap' : 'flex-col'), children: items.map((item) => (jsx(Checkbox, { label: item.label, value: item.value, checked: value.includes(item.value), name: name, id: item.value, onChange: onChange }, item.value))) })] }));
+    /**
+     * Group-level change handler. Converts raw checkbox change events
+     * into a typed updated values array.
+     */
+    const handleGroupChange = (e) => {
+        const raw = e.target.value;
+        const checked = e.target.checked;
+        // Convert HTML string value → typed T value
+        // Locate in normalized items
+        const matched = items.find((i) => String(i.value) === raw);
+        const itemValue = matched === null || matched === void 0 ? void 0 : matched.value;
+        let updated;
+        if (checked) {
+            updated = [...value, itemValue];
+        }
+        else {
+            updated = value.filter((v) => v !== itemValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(updated, e);
+    };
+    return (jsxs("div", { className: buildClassName('mb-3 space-y-3', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between', labelWrapperClass), children: [jsx(Label, { className: labelClass, children: label }), jsx(BodyText, { muted: true, small: true, children: labelHint })] })), jsx("div", { className: buildClassName('flex gap-3', inline ? 'flex-wrap' : 'flex-col'), children: items.map((item, index) => {
+                    const key = typeof item.value === 'string' || typeof item.value === 'number' ? item.value : index;
+                    return (jsx(Checkbox, { name: name, id: `${groupId}-${String(item.value)}`, label: item.label, value: String(item.value), checked: value.includes(item.value), onChange: handleGroupChange }, key));
+                }) })] }));
 };
+CheckboxGroup.displayName = 'CheckboxGroup';
 
-const Title = ({ children, className }) => (jsx("h1", { className: buildClassName('text-3xl font-bold', className), children: children }));
-const SubTitle = ({ children, className }) => (jsx("h2", { className: buildClassName('text-2xl font-semibold', className), children: children }));
-const SubTitle2 = ({ children, className }) => (jsx("h3", { className: buildClassName('text-xl font-semibold', className), children: children }));
-const SubTitle3 = ({ children, className }) => (jsx("h4", { className: buildClassName('text-lg font-medium', className), children: children }));
-const SubTitle4 = ({ children, className }) => (jsx("h5", { className: buildClassName('text-base font-medium', className), children: children }));
-const HeadingText = {
-    Title,
-    SubTitle,
-    SubTitle2,
-    SubTitle3,
-    SubTitle4,
+const TEXT_ALIGN = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
 };
-
-const DetailedInformation = ({ className, title, subTitle, details, compact = false, divider = true, titleClass, detailsClass, }) => {
-    const hasTitles = title || subTitle;
-    const filteredDetails = details.filter((detail) => !detail.hidden);
-    return (jsxs("div", { className: buildClassName('p-2 md:p-4', compact ? 'md:p-2' : '', className), children: [hasTitles && (jsxs("div", { className: "px-4 sm:px-0 pt-2 sm:pt-0 mb-2", children: [title && (jsx(HeadingText.SubTitle2, { className: buildClassName(titleClass), children: title })), subTitle && (jsx("p", { className: "mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-300", children: subTitle }))] })), filteredDetails.length ? (jsx("div", { className: buildClassName('border-gray-100 dark:border-gray-700', hasTitles && 'border-t', detailsClass), children: jsx("dl", { className: buildClassName(divider && 'divide-y divide-gray-100 dark:divide-gray-700'), children: filteredDetails.map((detail) => (jsxs("div", { className: buildClassName('px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center', compact ? 'py-1.5' : 'py-2.5'), children: [jsx("dt", { className: "text-sm/6 font-medium text-gray-900 dark:text-gray-100", children: detail.label }), jsx("dd", { className: buildClassName('mt-1 text-sm/6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0', detail.contentClass), children: detail.value || '- -' })] }, detail.label))) }) })) : null] }));
+const TABLE_LAYOUT = {
+    fixed: 'table-fixed',
+    auto: 'table-auto',
+};
+/* ----------------------------------------------
+ * Loader Rows
+ * ---------------------------------------------- */
+const TableRowLoader = ({ colSize, rowSize }) => (jsx(Fragment, { children: Array.from({ length: rowSize }).map((_, rowIdx) => (jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: colSize }).map((_, colIdx) => (jsx(TableCell, { children: jsx("div", { className: "flex items-center h-6", children: jsx("div", { className: "h-4 bg-gray-300 dark:bg-gray-700 shimmer rounded w-full" }) }) }, colIdx))) }, rowIdx))) }));
+/* ----------------------------------------------
+ * Table
+ * ---------------------------------------------- */
+const Table = ({ children, layout = 'auto', className = '' }) => {
+    return (jsx("table", { className: buildClassName('border-collapse w-full divide-y divide-gray-200 dark:divide-gray-700', TABLE_LAYOUT[layout], className), children: children }));
 };
+/* ----------------------------------------------
+ * Head
+ * ---------------------------------------------- */
+const TableHead = ({ children, className = '' }) => (jsx("thead", { className: buildClassName('text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-800 dark:text-gray-300', className), children: jsx("tr", { children: children }) }));
+/* ----------------------------------------------
+ * Body
+ * ---------------------------------------------- */
+const TableBody = ({ children, loading, colSize, rowSize = 5, className, }) => (jsx("tbody", { className: buildClassName('text-sm text-gray-700 dark:text-white divide-y divide-gray-200 dark:divide-gray-700', className), children: loading ? jsx(TableRowLoader, { colSize: colSize, rowSize: rowSize }) : children }));
+/* ----------------------------------------------
+ * Foot
+ * ---------------------------------------------- */
+const TableFoot = ({ children }) => (jsx("tfoot", { children: jsx("tr", { children: children }) }));
+/* ----------------------------------------------
+ * Rows
+ * ---------------------------------------------- */
+const TableRow = ({ children, hoverable = false, className, ...props }) => (jsx("tr", { ...props, className: buildClassName('last:border-b border-gray-200 dark:border-gray-700', hoverable && 'group', className), children: children }));
+/* ----------------------------------------------
+ * Cells
+ * ---------------------------------------------- */
+const TableCell = ({ children, align = 'left', className, ...props }) => (jsx("td", { ...props, className: buildClassName('px-3 py-3 first:pl-4 last:pr-4 bg-white dark:bg-gray-900 group-hover:bg-gray-50 group-hover:dark:bg-gray-800', TEXT_ALIGN[align], className), children: jsx("div", { className: "leading-normal", children: children }) }));
+const TableHeaderCell = ({ children, align = 'left', className, ...props }) => (jsx("th", { ...props, className: buildClassName('px-3 py-3 first:pl-4 last:pr-4 tracking-wider whitespace-nowrap text-gray-800 dark:text-gray-300', TEXT_ALIGN[align], className), children: jsx(BodyText, { as: "span", className: "leading-none", children: children }) }));
+/* ----------------------------------------------
+ * Empty Row
+ * ---------------------------------------------- */
+const EmptyTableRow = ({ children, colSpan = 1, contentClass, }) => (jsx("tr", { children: jsx("td", { colSpan: colSpan, className: "px-4 py-8", children: jsx("div", { className: buildClassName('p-6 text-center space-y-3 flex flex-col items-center justify-center', contentClass), children: children }) }) }));
 
-const Dot = ({ as = 'span', className, ...props }) => React__default.createElement(as, {
-    className: buildClassName('inline-block rounded-full bg-gray-500 dark:bg-gray-300', 'w-1 h-1', className),
-    ...props,
-});
+const DOTS = '...';
+const usePagination = ({ totalPages, currentPage, siblingCount = 1, // number of pages to show around currentPage
+ }) => {
+    const totalPageNumbers = siblingCount * 2 + 5;
+    if (totalPageNumbers >= totalPages) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPages;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+        const leftRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => i + 1);
+        return [...leftRange, DOTS, totalPages];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+        const rightRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => totalPages - (3 + 2 * siblingCount) + 1 + i);
+        return [firstPageIndex, DOTS, ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+        const middleRange = Array.from({ length: 2 * siblingCount + 1 }, (_, i) => leftSiblingIndex + i);
+        return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+    }
+    return [];
+};
 
-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$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 SvgChevronLeft = function SvgChevronLeft(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$5({
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -366,48 +500,184 @@ var SvgChevronLeft = function SvgChevronLeft(props) {
     strokeWidth: 2,
     className: "lucide lucide-chevron-left-icon lucide-chevron-left",
     viewBox: "0 0 24 24"
-  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$a || (_path$a = /*#__PURE__*/React.createElement("path", {
     d: "m15 18-6-6 6-6"
   })));
 };
 
-const alignmentMap = {
-    center: 'items-center justify-center h-full',
-    start: 'justify-start h-full',
-    end: 'justify-end h-full',
-    top: 'items-start',
-    bottom: 'items-end h-full',
-    'top-center': 'items-center justify-center',
+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 SvgChevronRight = function SvgChevronRight(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$9({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    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", {
+    d: "m9 18 6-6-6-6"
+  })));
 };
-const panelAlignmentMap = {
-    'top-center': 'data-[closed]:transform-[translateY(-50%)] rounded-b-lg',
-    center: 'data-[closed]:transform-[scale(95%)] rounded-lg',
-    start: 'data-[closed]:transform-[translateX(-50%)] rounded-r-lg',
-    end: 'data-[closed]:transform-[translateX(50%)] rounded-l-lg',
-    top: 'data-[closed]:transform-[translateY(-50%)] rounded-b-lg',
-    bottom: 'data-[closed]:transform-[translateY(50%)] rounded-t-lg',
+
+const Pagination = ({ page: currentPage, limit, total, onChange, className, ellipsis = true, // Default to showing ellipsis
+ }) => {
+    const pages = new Array(Math.ceil(total / limit)).fill(null).map((_, i) => i + 1);
+    const isFirstPage = currentPage === 1;
+    const isLastPage = total === 0 || pages.length === currentPage;
+    const range = usePagination({ totalPages: pages.length, currentPage });
+    const handlePageChange = (nextVal) => {
+        if (nextVal === currentPage)
+            return;
+        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) => {
+                                    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" }) })] })] })] }));
+    }
+    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" })] })] })] })] }));
 };
-const panelSizeMap = {
-    xs: 'max-w-xs',
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    '2xl': 'max-w-2xl',
-    full: 'w-full',
+
+function get(obj, path, defaultValue) {
+    var _a;
+    if (!path)
+        return defaultValue;
+    const keys = path
+        .replace(/\[(\d+)]/g, '.$1') // convert [0] to .0
+        .split('.')
+        .filter(Boolean); // remove empty parts
+    return ((_a = keys.reduce((acc, key) => {
+        if (acc !== null && acc !== undefined && Object.prototype.hasOwnProperty.call(acc, key)) {
+            return acc[key];
+        }
+        return undefined;
+    }, obj)) !== null && _a !== void 0 ? _a : defaultValue);
+}
+
+/**
+ * Compute the next sorting direction for a column.
+ * - string: undefined → asc → desc → undefined
+ * - number/date: undefined → 1 → -1 → undefined
+ */
+const nextSortDirection = (prev, type = 'string') => {
+    if (type === 'string') {
+        if (!prev)
+            return 'asc';
+        if (prev === 'asc')
+            return 'desc';
+        return undefined;
+    }
+    // number / date
+    if (!prev)
+        return '1';
+    if (prev === '1')
+        return '-1';
+    return undefined;
 };
-const Drawer = ({ isOpen, onClose = () => { }, align = 'end', size = 'md', backdrop = true, title, description = null, children = null, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, }) => {
-    return (jsxs(Dialog, { open: isOpen, as: "div", className: "relative z-15 focus:outline-none", onClose: onClose, children: [backdrop && jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/20" }), jsx("div", { className: buildClassName('fixed inset-0 z-15 w-screen h-screen h-dvh'), children: jsx("div", { className: buildClassName('flex', alignmentMap[align]), children: jsxs(DialogPanel, { transition: true, className: buildClassName('w-full bg-white dark:bg-gray-800 backdrop-blur-2xl duration-200 ease-out data-[closed]:opacity-0 shadow-sm overflow-y-auto space-y-4', panelAlignmentMap[align], panelSizeMap[size], panelClass), children: [jsxs("div", { className: buildClassName('space-y-2 pt-2 md:pt-4 px-4 md:px-6', titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10'), children: [jsxs(DialogTitle, { as: "h3", className: buildClassName('text-lg/7 font-medium dark:text-white flex items-center gap-2', titleClass), children: [showBackButton && (jsx(Button, { iconOnly: true, variant: "plain", theme: "secondary", size: "sm", onClick: onClose, children: jsx(SvgChevronLeft, { className: "size-5" }) })), title] }), description && (jsx("p", { className: buildClassName('text-sm/6 dark:text-white/50', descriptionClass), children: description }))] }), jsx("div", { className: buildClassName(contentClass), children: children })] }) }) })] }));
+/**
+ * Update the sort query object for a table column.
+ * Toggles sort direction, removing key when reset.
+ */
+const updateSortQuery = (sortQuery, name, type = 'string') => {
+    const next = nextSortDirection(sortQuery[name], type);
+    // Shallow clone once
+    const updated = { ...sortQuery };
+    if (next == null) {
+        delete updated[name];
+    }
+    else {
+        updated[name] = next;
+    }
+    return updated;
 };
 
-const DROPDOWN_ITEM_CLASS = 'flex w-full px-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg';
-const Dropdown = ({ triggerButton, items, renderItem, itemsContainerClass, transition = true, anchor = 'bottom start', }) => {
-    return (jsxs(Menu, { children: [jsx(MenuButton, { as: Fragment, children: triggerButton }), jsx(MenuItems, { transition: transition, anchor: anchor, className: buildClassName('w-52 origin-top-right rounded-xl border border-gray-100 bg-white shadow-sm p-1 text-sm/6 text-gray-800 transition duration-100 ease-out [--anchor-gap:--spacing(1)] focus:outline-none data-closed:scale-95 data-closed:opacity-0', itemsContainerClass), children: items.map((item) => (jsx(MenuItem, { children: item.divider ? (jsx("div", { className: "my-1 h-px bg-gray-200 dark:bg-white/5" })) : (renderItem(item, { className: DROPDOWN_ITEM_CLASS })) }, item.id))) })] }));
+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 SvgArrowDownWideNarrow = function SvgArrowDownWideNarrow(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$8({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    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", {
+    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 SvgArrowDownNarrowWide = function SvgArrowDownNarrowWide(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$7({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    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", {
+    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 SvgArrowDownAz = function SvgArrowDownAz(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    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", {
+    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 SvgArrowDownZa = function SvgArrowDownZa(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    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", {
+    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 SvgFolderPlus = function SvgFolderPlus(props) {
+var SvgArrowUpDown = function SvgArrowUpDown(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -417,56 +687,137 @@ var SvgFolderPlus = function SvgFolderPlus(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    className: "lucide lucide-folder-plus-icon lucide-folder-plus",
+    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", {
-    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"
+    d: "m21 16-4 4-4-4M17 20V4M3 8l4-4 4 4M7 4v16"
   })));
 };
 
-const EmptyState = ({ title, description, className, action = null, }) => {
-    return (jsx("div", { className: buildClassName('w-full flex justify-center px-4 pt-16', className), children: jsxs("div", { className: "max-w-md flex flex-col items-center gap-4", children: [jsx(SvgFolderPlus, { className: "size-8" }), jsx(HeadingText.SubTitle, { children: title }), description && (jsx(BodyText, { as: "p", className: "text-center", muted: true, small: true, children: description })), action] }) }));
+const SortIconMap = {
+    '1': (jsx(SvgArrowDownNarrowWide, { className: "size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white" })),
+    asc: (jsx(SvgArrowDownAz, { className: "size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white" })),
+    '-1': (jsx(SvgArrowDownWideNarrow, { className: "size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white" })),
+    desc: (jsx(SvgArrowDownZa, { className: "size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white" })),
 };
+const getSortIcon = (sort) => sort ? (SortIconMap[sort]) : (jsx(SvgArrowUpDown, { className: "size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white" }));
 
-const Input = forwardRef((props, ref) => {
-    const { name, id = name, type, label = null, labelHint = null, className = '', labelClass = '', labelWrapperClass = '', containerClass = '', error, showErrorMessage = true, rightGroup = null, leftGroup = null, autoComplete = 'off', ...inputProps } = props;
-    const hasError = Boolean(error);
-    const hasRightGroup = rightGroup != null && isValidElement(rightGroup);
-    const hasLeftGroup = leftGroup != null && isValidElement(leftGroup);
-    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, ...inputProps, name: name, id: id, type: type, autoComplete: autoComplete, 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', 'dark:disabled:bg-gray-500 disabled:bg-gray-100', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center w-10", children: rightGroup }))] }), showErrorMessage && error && (jsx("p", { className: "mt-1 text-red-500 dark:text-red-500 text-sm", children: error }))] }));
+/**
+ * Smart auto-sort helper (optional usage)
+ */
+const autoSortItems = (items, column, sort) => {
+    const path = column.name;
+    return [...items].sort((a, b) => {
+        const valueA = get(a, path);
+        const valueB = get(b, path);
+        if (column.type === 'number') {
+            const nA = Number(valueA);
+            const nB = Number(valueB);
+            return sort === 'asc' || sort === '1' ? nA - nB : nB - nA;
+        }
+        if (column.type === 'date') {
+            const dA = new Date(valueA).getTime();
+            const dB = new Date(valueB).getTime();
+            return sort === 'asc' || sort === '1' ? dA - dB : dB - dA;
+        }
+        // String fallback
+        const sA = String(valueA).toLowerCase();
+        const sB = String(valueB).toLowerCase();
+        if (sA < sB)
+            return sort === 'asc' || sort === '1' ? -1 : 1;
+        if (sA > sB)
+            return sort === 'asc' || sort === '1' ? 1 : -1;
+        return 0;
+    });
+};
+const DataTable = ({ items, columns, sorting = {}, onSort, loading, pagination = null, setPagination = () => { }, emptyMessage = 'No data found', containerClass = '', wrapperClass = '', layout = 'auto', }) => {
+    const internalSorting = useRef({});
+    const doAutoSort = (column) => {
+        internalSorting.current = updateSortQuery(internalSorting.current, column.name, column.type);
+        autoSortItems(items, column, internalSorting.current[column.name]);
+    };
+    const handleSort = (column) => {
+        if (!column.sortable)
+            return;
+        onSort ? onSort(column) : doAutoSort(column);
+    };
+    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) => {
+                                    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' &&
+                                            'sticky right-0 z-10 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]'), children: column.render
+                                            ? column.render(item)
+                                            : ((_a = get(item, column.name)) !== null && _a !== void 0 ? _a : 'Not set') }, column.name));
+                                }) }, item.id)))) })] }) }), 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', className), children: children }));
+const SubTitle = ({ children, className }) => (jsx("h2", { className: buildClassName('text-2xl font-semibold', className), children: children }));
+const SubTitle2 = ({ children, className }) => (jsx("h3", { className: buildClassName('text-xl font-semibold', className), children: children }));
+const SubTitle3 = ({ children, className }) => (jsx("h4", { className: buildClassName('text-lg font-medium', className), children: children }));
+const SubTitle4 = ({ children, className }) => (jsx("h5", { className: buildClassName('text-base font-medium', className), children: children }));
+const HeadingText = {
+    Title,
+    SubTitle,
+    SubTitle2,
+    SubTitle3,
+    SubTitle4,
+};
+
+const DetailedInformation = forwardRef((props, ref) => {
+    const { className, title, subTitle, details, compact = false, divider = true, titleClass, detailsClass, ...divProps } = props;
+    const hasTitles = title || subTitle;
+    const filteredDetails = details.filter((detail) => !detail.hidden);
+    return (jsxs("div", { className: buildClassName('p-2 md:p-4', compact ? 'md:p-2' : '', className), ref: ref, ...divProps, children: [hasTitles && (jsxs("div", { className: "px-4 sm:px-0 pt-2 sm:pt-0 mb-2", children: [title && (jsx(HeadingText.SubTitle2, { className: buildClassName(titleClass), children: title })), subTitle && (jsx("p", { className: "mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-300", children: subTitle }))] })), filteredDetails.length ? (jsx("div", { className: buildClassName('border-gray-100 dark:border-gray-700', hasTitles && 'border-t', detailsClass), children: jsx("dl", { className: buildClassName(divider && 'divide-y divide-gray-100 dark:divide-gray-700'), children: filteredDetails.map((detail) => (jsxs("div", { className: buildClassName('px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0 items-center', compact ? 'py-1.5' : 'py-2.5'), children: [jsx("dt", { className: "text-sm/6 font-medium text-gray-900 dark:text-gray-100", children: detail.label }), jsx("dd", { className: buildClassName('mt-1 text-sm/6 text-gray-700 dark:text-gray-300 sm:col-span-2 sm:mt-0', detail.contentClass), children: detail.value || '- -' })] }, detail.label))) }) })) : null] }));
 });
+DetailedInformation.displayName = 'DetailedInformation';
 
-const DOTS = '...';
-const usePagination = ({ totalPages, currentPage, siblingCount = 1, // number of pages to show around currentPage
- }) => {
-    const totalPageNumbers = siblingCount * 2 + 5;
-    if (totalPageNumbers >= totalPages) {
-        return Array.from({ length: totalPages }, (_, i) => i + 1);
-    }
-    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-    const shouldShowLeftDots = leftSiblingIndex > 2;
-    const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
-    const firstPageIndex = 1;
-    const lastPageIndex = totalPages;
-    if (!shouldShowLeftDots && shouldShowRightDots) {
-        const leftRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => i + 1);
-        return [...leftRange, DOTS, totalPages];
-    }
-    if (shouldShowLeftDots && !shouldShowRightDots) {
-        const rightRange = Array.from({ length: 3 + 2 * siblingCount }, (_, i) => totalPages - (3 + 2 * siblingCount) + 1 + i);
-        return [firstPageIndex, DOTS, ...rightRange];
-    }
-    if (shouldShowLeftDots && shouldShowRightDots) {
-        const middleRange = Array.from({ length: 2 * siblingCount + 1 }, (_, i) => leftSiblingIndex + i);
-        return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
-    }
-    return [];
+const Dot = ({ as = 'span', className, ...props }) => React__default.createElement(as, {
+    className: buildClassName('inline-block rounded-full bg-gray-500 dark:bg-gray-300', 'w-1 h-1', className),
+    ...props,
+});
+
+const alignmentMap = {
+    center: 'items-center justify-center h-full',
+    start: 'justify-start h-full',
+    end: 'justify-end h-full',
+    top: 'items-center justify-center',
+    bottom: 'items-end justify-center h-full',
 };
+const panelAlignmentMap = {
+    center: 'data-[closed]:scale-95 rounded-lg',
+    start: 'data-[closed]:-translate-x-1/2 rounded-r-lg',
+    end: 'data-[closed]:translate-x-1/2 rounded-l-lg',
+    top: 'data-[closed]:-translate-y-1/2 rounded-b-lg',
+    bottom: 'data-[closed]:translate-y-1/2 rounded-t-lg',
+};
+const panelSizeMap = {
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    full: 'w-full',
+};
+const Drawer = ({ isOpen, onClose = () => { }, align = 'end', size = 'md', backdrop = true, title, description, children, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, }) => {
+    const showTitleSection = Boolean(title || description);
+    return (jsxs(Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: onClose, transition: true, children: [backdrop && jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/20 transition-opacity" }), jsx("div", { className: "fixed inset-0 w-screen h-screen", children: jsx("div", { className: buildClassName('flex', alignmentMap[align]), children: jsxs(DialogPanel, { transition: true, className: buildClassName('w-full bg-white dark:bg-gray-800 backdrop-blur-2xl shadow-sm', 'overflow-y-auto space-y-4 duration-200 ease-out data-[closed]:opacity-0', panelAlignmentMap[align], panelSizeMap[size], panelClass), children: [showTitleSection && (jsxs("div", { className: buildClassName('space-y-2 pt-2 md:pt-4 px-4 md:px-6', titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10'), children: [jsxs(DialogTitle, { as: "h3", className: buildClassName('text-lg font-medium dark:text-white flex items-center gap-2', titleClass), children: [showBackButton && (jsx(Button, { iconOnly: true, variant: "plain", theme: "secondary", size: "sm", onClick: onClose, children: jsx(SvgChevronLeft, { className: "size-5" }) })), title] }), description && (jsx("p", { className: buildClassName('text-sm dark:text-white/60', descriptionClass), children: description }))] })), jsx("div", { className: contentClass, children: children })] }) }) })] }));
+};
+Drawer.displayName = 'Drawer';
+
+const BASE_ITEM_CLASS = 'flex w-full px-3 py-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg';
+const Dropdown = ({ triggerButton, renderTriggerButton, items, renderItem, itemsContainerClass, transition = true, anchor = 'bottom start', menuItemClass, onMenuClick, }) => {
+    return (jsxs(Menu, { as: "div", className: "relative inline-block", children: [renderTriggerButton ? (jsx(MenuButton, { as: Fragment$1, children: (state) => renderTriggerButton(state) })) : (jsx(MenuButton, { as: Fragment$1, children: triggerButton })), jsx(MenuItems, { transition: transition, anchor: anchor, className: buildClassName('w-52 origin-top-right rounded-xl shadow-sm p-1 text-sm transition duration-100 ease-out', 'border border-gray-100 bg-white text-gray-800', 'dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxs(Fragment$1, { children: [jsx(MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled }) => (jsx("div", { onClick: () => !disabled && (onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(item, idx)), className: buildClassName(BASE_ITEM_CLASS, menuItemClass, disabled && 'cursor-not-allowed opacity-70'), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? renderItem(item) : item.label })) }), item.divider && (jsx("li", { className: "my-1 h-px bg-gray-200 dark:bg-white/5", "data-testid": "dropdown-divider" }, item.id))] }, item.id))) })] }));
+};
+Dropdown.displayName = 'Dropdown';
 
 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 SvgChevronRight = function SvgChevronRight(props) {
+var SvgFolderPlus = function SvgFolderPlus(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
@@ -476,35 +827,33 @@ var SvgChevronRight = function SvgChevronRight(props) {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     strokeWidth: 2,
-    className: "lucide lucide-chevron-right-icon lucide-chevron-right",
+    className: "lucide lucide-folder-plus-icon lucide-folder-plus",
     viewBox: "0 0 24 24"
   }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
-    d: "m9 18 6-6-6-6"
+    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"
   })));
 };
 
-const Pagination = ({ page: currentPage, limit, total, onChange, className, ellipsis = true, // Default to showing ellipsis
- }) => {
-    const pages = new Array(Math.ceil(total / limit)).fill(null).map((_, i) => i + 1);
-    const isFirstPage = currentPage === 1;
-    const isLastPage = total === 0 || pages.length === currentPage;
-    const range = usePagination({ totalPages: pages.length, currentPage });
-    const handlePageChange = (nextVal) => {
-        if (nextVal === currentPage)
-            return;
-        onChange({ page: nextVal });
-    };
-    if (ellipsis) {
-        return (jsx("div", { 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: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [jsxs("p", { 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), children: "Prev" }) }), range.map((page, idx) => {
-                                if (page === DOTS) {
-                                    return (jsx("li", { 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) }, page));
-                            }), jsx("li", { children: jsx(Button, { size: "xs", theme: "secondary", variant: "plain", disabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), children: "Next" }) })] })] }) }));
-    }
-    return (jsxs("div", { 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: [jsx("a", { href: "#", className: "relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50", children: "Previous" }), jsx("a", { href: "#", className: "relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50", children: "Next" })] }), jsxs("div", { className: "hidden sm:flex sm:flex-1 sm:items-center sm:justify-between", children: [jsxs("p", { 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), 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), children: [jsx("span", { className: "sr-only", children: "Next" }), jsx(SvgChevronRight, { className: "size-4" })] })] })] })] }));
+const EmptyState = ({ title, description, className, action = null, }) => {
+    return (jsx("div", { className: buildClassName('w-full flex justify-center px-4 pt-16', className), children: jsxs("div", { className: "max-w-md flex flex-col items-center gap-4", children: [jsx(SvgFolderPlus, { className: "size-8" }), jsx(HeadingText.SubTitle, { children: title }), description && (jsx(BodyText, { as: "p", className: "text-center", muted: true, small: true, children: description })), action] }) }));
 };
 
+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);
+}
+const Input = forwardRef((props, ref) => {
+    const { name, id = name, type, label, labelHint, className, labelClass, labelWrapperClass, containerClass, error, showErrorMessage = true, rightGroup, leftGroup, ...inputProps } = props;
+    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), 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';
+
 const PASSWORD_TYPE = 'password';
 const PASSWORD_PLACEHOLDER = '••••••••••';
 const PasswordInput = (props) => {
@@ -513,13 +862,21 @@ const PasswordInput = (props) => {
     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" })] })) }) }));
 };
 
-const RadioButton = forwardRef((props, ref) => {
-    const { type = 'radio', name, id = name, wrapperClass = '', containerClass = '', label = null, labelClass = '', labelHint = null, error = null, ...radioProps } = props;
-    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, ...radioProps, type: "radio", id: id, name: name, className: "peer transition-all col-start-1 row-start-1 appearance-none shrink-0 size-4.5 border-1 border-gray-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 checked:border-5 checked:border-blue-600 rounded-full bg-white" }) }), label && (jsx(Label, { htmlFor: id, className: buildClassName('cursor-pointer font-normal text-gray-600', labelClass), children: label }))] }), error && jsx("div", { className: "mt-1 text-red-600 text-sm", children: error })] }));
+const Radio = forwardRef((props, ref) => {
+    var _a;
+    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
+                                ? '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'
+                            : '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 }) }))] }));
 });
 
-const RadioButtonGroup = (props) => {
-    const { name, label = null, labelClass = '', labelWrapperClass = '', labelHint = null, containerClass = '', options, value, row, onChange, } = props;
+const RadioGroup = (props) => {
+    const { name, label, labelClass, labelWrapperClass, labelHint, containerClass, options, value, row, error, showErrorMessage, onChange, } = props;
     const [items, setItems] = useState([]);
     useEffect(() => {
         setItems(() => {
@@ -531,46 +888,45 @@ const RadioButtonGroup = (props) => {
             });
         });
     }, [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-2', row ? 'flex-row items-center' : 'flex-col items-start'), children: items.map((item) => (jsx(RadioButton, { name: name, id: item.value, label: item.label, value: item.value, checked: value === item.value, onChange: onChange }, item.value))) })] }));
-};
-
-const RadioSwitch = ({ label, items, selected, onChange }) => {
-    const getLabel = (item) => {
-        return typeof item === 'string' ? item : item.label;
-    };
-    const getValue = (item) => {
-        return typeof item === 'string' ? item : item.value;
-    };
-    const getDescription = (item) => {
-        return typeof item === 'string' ? '' : item.description || '';
-    };
-    return (jsx(RadioGroup, { value: selected, onChange: onChange, "aria-label": label, className: "flex items-center bg-white rounded-full shadow-xs p-1 dark:bg-gray-800 gap-1 border border-gray-200 dark:border-gray-700", children: items.map((item) => (jsx(Radio, { value: getValue(item), className: buildClassName('group relative flex cursor-pointer transition', 'text-gray-500 dark:text-gray-300', 'focus:not-data-focus:outline-none data-focus:outline data-focus:outline-white'), children: jsx("div", { className: buildClassName('dark:text-white justify-between px-3 py-1 transition', 'group-data-checked:bg-blue-600 group-data-checked:text-white rounded-full'), children: jsxs("div", { className: "text-sm/6", children: [jsx("p", { className: "font-semibold dark:text-white", children: getLabel(item) }), item.description && (jsx("div", { className: "flex gap-2 text-white/50", children: getDescription(item) }))] }) }) }, getValue(item)))) }));
+    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 }) }))] }));
 };
 
-const RangeInput = (props) => {
-    const { name, id = name, label = null, labelClass = '', labelWrapperClass = '', labelHint = null, containerClass = '', min = 0, max = 0, value, onChange, ...rangeProps } = props;
-    const handleRangeChange = (e) => {
-        const { value: _value = '0', name: _name } = e.target;
-        let changedValue = parseInt(_value);
-        let nextValue = {
-            ...props.value,
-            [_name]: changedValue,
-        };
-        if (e.target.name === 'max' && (value === null || value === void 0 ? void 0 : value.min) && changedValue < parseInt(value.min || '0')) {
-            nextValue[_name] = parseInt(value.min);
-        }
-        if (e.target.name === 'min' && (value === null || value === void 0 ? void 0 : value.max) && changedValue > parseInt(value.max || '0')) {
-            nextValue[_name] = parseInt(value.max);
-        }
-        onChange &&
-            onChange({
-                target: {
-                    name,
-                    value: nextValue,
-                },
-            });
-    };
-    return (jsxs("div", { className: buildClassName('mb-3 relative', containerClass), children: [label && (jsxs("div", { className: buildClassName('flex items-center justify-between mb-4', labelWrapperClass), children: [jsx(Label, { className: labelClass, htmlFor: id, children: label }), labelHint] })), jsxs("div", { className: "flex w-full gap-4 items-center", children: [jsx(Input, { ...rangeProps, id: id, name: "min", type: "number", min: min, max: value === null || value === void 0 ? void 0 : value.max, value: (value === null || value === void 0 ? void 0 : value.min) || '', className: "appearance-none", containerClass: "flex-1 shrink-0 mb-0", placeholder: "Min", onChange: handleRangeChange }), jsx("span", { children: "to" }), jsx(Input, { ...rangeProps, id: id, name: "max", type: "number", min: value === null || value === void 0 ? void 0 : value.min, max: max, value: (value === null || value === void 0 ? void 0 : value.max) || '', className: "appearance-none", containerClass: "flex-1 shrink-0 mb-0", placeholder: "Max", onChange: handleRangeChange, disabled: !(value === null || value === void 0 ? void 0 : value.min) })] })] }));
+/**
+ * GPU-accelerated Radio Switch with perfect highlight alignment.
+ * Supports wrapping, icons, descriptions, and dark mode.
+ */
+const RadioSwitch = ({ label, items, selected, onChange, wrapperClass, switchClass, contentClass, descriptionClass, }) => {
+    const containerRef = useRef(null);
+    const [style, setStyle] = useState({ left: 0, top: 0, width: 0, height: 0 });
+    const getLabel = (i) => (typeof i === 'string' ? i : i.label);
+    const getValue = (i) => (typeof i === 'string' ? i : i.value);
+    const getDescription = (i) => { var _a; return typeof i === 'string' ? '' : ((_a = i.description) !== null && _a !== void 0 ? _a : ''); };
+    /** ---------------------------------------------
+     * Update highlight when selected changes
+     * ----------------------------------------------*/
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const buttons = Array.from(containerRef.current.querySelectorAll('[data-radio-item]'));
+        const el = buttons.find((b) => b.dataset.value === selected);
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        const parentRect = containerRef.current.getBoundingClientRect();
+        const left = rect.left - parentRect.left;
+        const top = rect.top - parentRect.top;
+        setStyle({
+            left,
+            top,
+            width: rect.width,
+            height: rect.height,
+        });
+    }, [selected, items]);
+    return (jsxs(RadioGroup$1, { value: selected, onChange: onChange, "aria-label": label, ref: containerRef, className: buildClassName('relative flex flex-wrap gap-1', 'transition-colors duration-200 overflow-hidden', wrapperClass), children: [jsx("div", { className: buildClassName('absolute rounded-md bg-blue-600 dark:bg-blue-500', 'transition-transform transition-size duration-300 ease-[cubic-bezier(.25,.8,.25,1)]', switchClass), style: {
+                    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))))] }));
 };
 
 /**
@@ -601,6 +957,104 @@ function isEmpty(value) {
     return false; // for numbers, booleans, functions, etc.
 }
 
+// export interface RangeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+//   label?: string
+//   labelClass?: string
+//   labelHint?: React.ReactNode
+//   containerClass?: string
+//   showValue?: boolean
+//   valueSuffix?: string
+//   error?: string | null
+//   showErrorMessage?: boolean
+// }
+const RangeInput = forwardRef((props, ref) => {
+    const { label, labelClass = '', labelHint = null, containerClass = '', className = '', showValue = true, valueSuffix = '', error = null, showErrorMessage = true, id, min = 0, max = 100, value, ...inputProps } = props;
+    const hasError = !isEmpty(error);
+    return (jsxs("div", { className: buildClassName('group space-y-2', containerClass), children: [label && (jsxs("div", { className: "flex items-center justify-between", children: [jsx(Label, { htmlFor: id, className: labelClass, children: label }), labelHint] })), jsxs("div", { className: "flex items-center gap-3", children: [jsx("input", { ref: ref, type: "range", id: id, min: min, max: max, value: value, ...inputProps, className: buildClassName('w-full h-2 rounded-lg appearance-none cursor-pointer', 'bg-gray-200 dark:bg-gray-700', 'accent-blue-600', // for WebKit
+                        '[&::-webkit-slider-thumb]:appearance-none', '[&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4', '[&::-webkit-slider-thumb]:rounded-full', '[&::-webkit-slider-thumb]:bg-blue-600', '[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4', '[&::-moz-range-thumb]:rounded-full', '[&::-moz-range-thumb]:bg-blue-600', hasError && 'accent-red-600', className) }), showValue && (jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-300 min-w-[3rem] text-right", children: [value, valueSuffix] }))] }), showErrorMessage && hasError && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+});
+
+const RangeSlider = ({ label, labelHint, labelClass = '', containerClass = '', className = '', min, max, valueMin, valueMax, onChange, valueSuffix = '', error = null, showErrorMessage = true, }) => {
+    const trackRef = useRef(null);
+    // Refs for drag logic
+    const activeThumbRef = useRef(null);
+    // State for UI styling
+    const [activeThumbState, setActiveThumbState] = useState(null);
+    const hasError = !isEmpty(error);
+    const percent = (v) => ((v - min) / (max - min)) * 100;
+    // ---------------------------------------------
+    // Pointer Move (drag)
+    // ---------------------------------------------
+    const pointerMoveHandler = (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);
+        }
+        else {
+            onChange(valueMin, Math.max(rawVal, valueMin + 1));
+        }
+    };
+    const pointerUpHandler = () => {
+        activeThumbRef.current = null;
+        setActiveThumbState(null);
+        window.removeEventListener('pointermove', pointerMoveHandler);
+        window.removeEventListener('pointerup', pointerUpHandler);
+    };
+    const startDrag = (thumb) => (e) => {
+        activeThumbRef.current = thumb;
+        setActiveThumbState(thumb);
+        window.addEventListener('pointermove', pointerMoveHandler);
+        window.addEventListener('pointerup', pointerUpHandler);
+    };
+    // ---------------------------------------------
+    // Click Track to move closest thumb
+    // ---------------------------------------------
+    const handleTrackClick = (e) => {
+        if (!trackRef.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);
+        const pxMin = (percent(valueMin) / 100) * rect.width;
+        const pxMax = (percent(valueMax) / 100) * rect.width;
+        // If click is left of min thumb → move min thumb
+        if (x <= pxMin) {
+            onChange(rawVal, valueMax);
+            return;
+        }
+        // If click is right of max thumb → move max thumb
+        if (x >= pxMax) {
+            onChange(valueMin, rawVal);
+            return;
+        }
+        // Else click is between → move closest thumb
+        const distMin = Math.abs(rawVal - valueMin);
+        const distMax = Math.abs(rawVal - valueMax);
+        if (distMin < distMax) {
+            onChange(rawVal, valueMax);
+        }
+        else {
+            onChange(valueMin, rawVal);
+        }
+    };
+    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), children: [label && (jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsx(Label, { className: labelClass, children: label }), labelHint] })), jsxs("div", { ref: trackRef, onMouseDown: handleTrackClick, className: "relative h-8 select-none w-full", "data-testid": "range-track", children: [jsx("div", { className: "absolute top-1/2 left-0 right-0 h-2 rounded-full bg-gray-200 dark:bg-gray-700 -translate-y-1/2" }), jsx("div", { className: "absolute top-1/2 h-2 bg-blue-600 dark:bg-blue-500 -translate-y-1/2 rounded-full \n          transition-all duration-150 ease-out", style: {
+                            left: `${percent(valueMin)}%`,
+                            width: `${percent(valueMax) - percent(valueMin)}%`,
+                        } }), jsx("div", { onPointerDown: startDrag('min'), className: buildClassName('absolute top-1/2 -translate-y-1/2 h-5 w-5 rounded-full', 'bg-white border-2 border-blue-600 shadow-md cursor-pointer touch-none', 'transition-all duration-150 ease-out', // animation
+                        activeThumbState === 'min' && 'ring-4 ring-blue-200', className), style: {
+                            left: `calc(${percent(valueMin)}% - 10px)`,
+                            zIndex: activeThumbState === 'min' ? 50 : 30,
+                        }, "data-testid": "thumb-min" }), jsx("div", { onPointerDown: startDrag('max'), className: buildClassName('absolute top-1/2 -translate-y-1/2 h-5 w-5 rounded-full', 'bg-white border-2 border-blue-600 shadow-md cursor-pointer touch-none', 'transition-all duration-150 ease-out', // animation
+                        activeThumbState === 'max' && 'ring-4 ring-blue-200', className), style: {
+                            left: `calc(${percent(valueMax)}% - 10px)`,
+                            zIndex: activeThumbState === 'max' ? 50 : 40,
+                        }, "data-testid": "thumb-max" })] }), jsxs("div", { className: "flex justify-between text-sm text-gray-700 dark:text-gray-300", children: [jsxs("span", { children: [Math.round(valueMin), valueSuffix] }), jsxs("span", { children: [Math.round(valueMax), valueSuffix] })] }), showErrorMessage && hasError && (jsx("div", { className: "mt-1", children: jsx(TextContent, { error: true, small: true, children: error }) }))] }));
+};
+
 const useDebounce = (value, delay) => {
     const [debouncedValue, setDebouncedValue] = useState(value);
     useEffect(() => {
@@ -614,6 +1068,13 @@ const useDebounce = (value, delay) => {
     }, [value, delay]);
     return debouncedValue;
 };
+const useDebounceFn = (fn, ms) => {
+    const timeout = useRef(null);
+    return useCallback((...args) => {
+        clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => fn(...args), 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); }
@@ -676,197 +1137,955 @@ var SvgCirclePlus = function SvgCirclePlus(props) {
   })));
 };
 
-const constructInputClass = (disabled) => buildClassName('transition-all', 'block w-full rounded-lg 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:border-gray-600 dark:placeholder-gray-500 placeholder:text-gray-400 dark:text-white', 'group-[.has-error]:outline-red-600 group-[.has-error]:focus:outline-red-600', '[&:has(:focus-visible)]:outline-2 [&:has(:focus-visible)]:outline-blue-600', 'group-[.has-error]:[&:has(:focus-visible)]:outline-red-600', disabled ? 'pointer-events-none bg-gray-100 dark:bg-gray-500' : 'bg-white dark:bg-gray-700');
-const SelectBox = (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, } = props;
     const hasError = Boolean(error);
     const [query, setQuery] = useState('');
     const debouncedQuery = useDebounce(query, 500);
     const [optionsLoading, setOptionsLoading] = useState(false);
-    const shouldShowTypeToSearch = async && !debouncedQuery && !options.length;
-    const inputClass = constructInputClass(disabled);
+    const shouldShowTypeToSearch = async && !query && !optionsLoading && options.length === 0;
+    const inputClass = useMemo(() => constructInputClass(disabled), [disabled]);
+    const chevronIconClass = buildClassName('size-4', 'stroke-gray-500 group-data-[hover]:stroke-gray-800', 'dark:stroke-gray-300 dark:group-data-[hover]:stroke-gray-100', disabled && 'dark:stroke-gray-600 stroke-gray-400');
     const inputRef = useRef(null);
-    const filteredOptions = query === '' || async
-        ? options
-        : options.filter((option) => {
-            if (typeof option === 'string')
-                return option.toLowerCase().includes(query.toLowerCase());
-            return option[labelKey].toLowerCase().includes(query.toLowerCase());
+    const containerRef = useRef(null);
+    // Expose the input element to parent
+    useImperativeHandle(forwardedRef, () => inputRef.current, [inputRef]);
+    const filteredOptions = useMemo(() => {
+        if (query === '' || async)
+            return options;
+        return options.filter((opt) => {
+            const label = typeof opt === 'string' ? opt : opt[labelKey];
+            return label === null || label === void 0 ? void 0 : label.toLowerCase().includes(query.toLowerCase());
         });
-    const getDisplayValue = (option) => {
-        return typeof option === 'string' ? option : option[labelKey];
-    };
-    const getValue = (option) => {
-        return typeof option === 'string' ? option : option[valueKey];
-    };
+    }, [options, query, async, labelKey]);
+    const getDisplayValue = useCallback((opt) => {
+        return typeof opt === 'string' ? opt : opt[labelKey];
+    }, [labelKey]);
+    const getValue = useCallback((opt) => {
+        return typeof opt === 'string' ? opt : opt[valueKey];
+    }, [valueKey]);
     const removeSelection = (idx) => {
-        if (!isArray(selected)) {
+        var _a;
+        if (!isArray(selected))
             return;
-        }
-        const nextSelectedValue = [...selected];
-        nextSelectedValue.splice(idx, 1);
-        onChange(nextSelectedValue);
+        const next = [...selected];
+        next.splice(idx, 1);
+        onChange(next);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    const handleOnChange = (value) => {
-        let nextValue = !value ? (multiple ? [] : {}) : value;
-        if (multiple && isArray(selected)) {
-            if (maxSelection && selected.length >= maxSelection) {
+    // A strongly-typed internal handler (what you expect callers to receive)
+    const handleOnChangeInternal = useCallback((value) => {
+        // normal empty value
+        if (value === null) {
+            onChange(multiple ? [] : null);
+            setQuery('');
+            return;
+        }
+        // enforce maxSelection
+        if (multiple && Array.isArray(value) && maxSelection && value.length > maxSelection) {
+            // ignore the change
+            return;
+        }
+        onChange(value);
+        setQuery('');
+    }, [onChange, multiple, maxSelection]);
+    /**
+     * Headless UI typings are overly broad (they include null[] and EnsureArray<T> etc).
+     * We therefore pass a wrapper to the Combobox with a cast (only at the call site),
+     * while keeping our internal logic strongly typed.
+     */
+    const comboboxOnChangeWrapper = useCallback((raw) => {
+        // normalize actual runtime shapes Headless UI uses: T | T[] | null
+        if (raw === null || raw === undefined) {
+            handleOnChangeInternal(null);
+            return;
+        }
+        if (Array.isArray(raw)) {
+            // sometimes union typing suggests arrays of nulls — guard it
+            const allNulls = raw.length > 0 && raw.every((v) => v === null);
+            if (allNulls) {
+                handleOnChangeInternal([]);
                 return;
             }
+            // cast array to T[]
+            handleOnChangeInternal(raw);
+            return;
         }
-        onChange(nextValue);
-        setQuery('');
-    };
+        // single value
+        handleOnChangeInternal(raw);
+    }, [handleOnChangeInternal]);
+    // support create (allowAdd) as a real ComboboxOption
+    const handleAddAndSelect = useCallback(async (valueToAdd) => {
+        try {
+            const result = await onAdd(valueToAdd);
+            // if the parent returned a new option (string or object), select it
+            if (result) {
+                // If parent returned raw string or object, call onChange with that
+                handleOnChangeInternal(result);
+            }
+            else {
+                // if parent didn't return anything, select the raw string value
+                handleOnChangeInternal(valueToAdd);
+            }
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.error('onAdd handler error', err);
+        }
+    }, [onAdd, handleOnChangeInternal]);
     const handleSearch = async (searchString) => {
         var _a;
         try {
             setOptionsLoading(true);
             await ((_a = props.onSearch) === null || _a === void 0 ? void 0 : _a.call(props, searchString));
         }
-        catch (error) {
-            console.error('Error loading options:', error);
+        catch (err) {
+            console.error('Error loading options:', err);
         }
         finally {
             setOptionsLoading(false);
         }
     };
     useEffect(() => {
-        if (async && debouncedQuery) {
+        if (async && debouncedQuery)
             handleSearch(debouncedQuery);
-        }
     }, [debouncedQuery, async]);
-    return (jsxs("div", { className: buildClassName('group space-y-2', hasError && 'has-error', containerClass), 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: handleOnChange, onClose: () => setQuery(''), disabled: disabled, children: [multiple ? (jsxs("div", { className: buildClassName(inputClass, 'flex flex-wrap gap-2 peer'), children: [isArray(selected) && (selected === null || selected === void 0 ? void 0 : selected.length) > 0 && (jsx(Fragment$1, { children: selected.map((option, idx) => (jsx(Badge, { theme: "secondary", removable: !disabled, onRemove: () => removeSelection(idx), children: getDisplayValue(option) }, getValue(option)))) })), jsx(ComboboxInput, { className: "outline-none flex-1", "aria-label": name, value: query, autoComplete: "off", placeholder: (selected === null || selected === void 0 ? void 0 : selected.length) ? '' : placeholder, onChange: (event) => setQuery(event.target.value), id: id })] })) : (jsxs("div", { className: "relative", 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, "data-disabled": disabled, id: id, readOnly: !searchable, ref: inputRef }), allowClear && !isEmpty(selected) && (jsx(Button, { size: "xs", iconOnly: true, theme: "secondary", variant: "plain", className: "group absolute inset-y-0 right-8 h-6 top-2", onClick: () => handleOnChange(multiple ? [] : null), disabled: disabled, children: jsx(SvgX, { className: "size-4 fill-white/60 group-data-[hover]:fill-white" }) })), jsx(ComboboxButton, { className: "group absolute inset-y-0 right-0 px-2.5", children: jsx(SvgChevronDown, { className: "size-4 fill-white/60 group-data-[hover]:fill-white" }) })] })), jsx(ComboboxOptions, { anchor: {
-                            to: 'bottom',
-                            gap: 5,
-                        }, 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-out data-[closed]:translate-y-[-25%] data-[closed]:opacity-0 data-[closed]:overflow-hidden', dropdownContainerClass), children: optionsLoading ? (jsx("div", { className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx("div", { className: "flex items-center justify-between py-2 px-3 select-none", children: "Type to search..." })) : (jsxs(Fragment$1, { children: [filteredOptions.map((option) => (jsxs(ComboboxOption, { disabled: option.disabled, value: option, className: "group flex items-center justify-between gap-2 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: [jsx("span", { className: "text-sm/6 dark:text-white", children: getDisplayValue(option) }), jsx(SvgCheck, { className: "invisible size-5 dark:fill-white group-data-[selected]:visible" })] }, getValue(option)))), filteredOptions.length === 0 && query && !optionsLoading && (jsxs("div", { 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 ? (jsxs("div", { role: "button", onClick: () => onAdd(query), className: "group flex items-center gap-2 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", children: [jsx(SvgCirclePlus, { className: "size-4.5 text-blue-600" }), jsx(TextContent, { children: addNewText }), jsx(TextContent, { strong: true, children: query })] })) : null] })) })] }), showErrorMessage && error && (jsx("p", { className: "text-red-500 dark:text-red-500 text-sm", children: error }))] }));
-};
-
-const TEXT_ALIGN_CLASSES = {
-    left: 'text-left',
-    center: 'text-center',
-    right: 'text-right',
-};
-const TABLE_LAYOUT_CLASSES = {
-    fixed: 'table-fixed',
-    auto: 'table-auto',
-};
-const TableRowLoader = ({ colSize, rowSize }) => (jsx(Fragment$1, { children: [...Array(rowSize)].map((_, rowIndex) => (jsx(TableRow, { className: "animate-pulse", children: [...Array(colSize)].map((_, colIndex) => (jsx(TableCell, { children: jsx("div", { className: "flex items-center h-6", children: jsx("div", { className: "h-4 bg-gray-300 shimmer dark:bg-gray-700 rounded w-full" }) }) }, colIndex))) }, rowIndex))) }));
-const Table = ({ children, layout = 'auto', className = '' }) => (jsx("table", { className: buildClassName('border-collapse table-fixed w-full divide-y divide-gray-200', TABLE_LAYOUT_CLASSES[layout], className), children: children }));
-const TabelHead = ({ children, className = '', onSort }) => (jsx("thead", { className: buildClassName('text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400', className), children: jsx(TableRow, { className: "dark:hover:bg-gray-700", hoverable: false, children: React__default.Children.map(children, (child) => {
-            // Check if child is a valid React element
-            if (React__default.isValidElement(child)) {
-                // Type the child explicitly to ReactElement so TypeScript knows it supports onClick
-                return React__default.cloneElement(child, { onClick: onSort });
-            }
-            // Return child as-is if it's not a React element
-            return child;
-        }) }) }));
-const TabelBody = ({ children, loading, colSize, rowSize = 5, className = '', }) => (jsx("tbody", { className: buildClassName('text-sm text-gray-700 dark:text-white divide-y divide-gray-200 dark:divide-gray-700', className), children: loading ? (jsx(TableRowLoader, { colSize: colSize, rowSize: rowSize })) : (jsx(Fragment$1, { children: React__default.Children.map(children, (child) => {
-            // Check if child is a valid React element
-            if (React__default.isValidElement(child)) {
-                // Type the child explicitly to ReactElement so TypeScript knows it supports onClick
-                return React__default.cloneElement(child);
-            }
-            // Return child as-is if it's not a React element
-            return child;
-        }) })) }));
-const TabelFoot = ({ children }) => (jsx("tfoot", { children: React__default.Children.map(children, (child) => {
-        // Check if child is a valid React element
-        if (React__default.isValidElement(child)) {
-            // Type the child explicitly to ReactElement so TypeScript knows it supports onClick
-            return React__default.cloneElement(child);
-        }
-        // Return child as-is if it's not a React element
-        return child;
-    }) }));
-const TableRow = ({ children, hoverable = true, className, ...props }) => (jsx("tr", { className: buildClassName('last:border-b border-gray-200 dark:border-gray-700 group h-full', className), ...props, children: children }));
-const TableCell = ({ children, align = 'left', className = '', ...props }) => (jsx("td", { className: buildClassName('first:pl-4 last:pr-4 px-3 py-3 bg-white dark:bg-gray-800 group-hover:bg-gray-50 group-hover:dark:bg-gray-600 whitespace-normal', className, TEXT_ALIGN_CLASSES[align]), ...props, children: jsx("div", { className: "antialiased leading-normal", children: children }) }));
-const TableHeaderCell = ({ children, align = 'left', className = '', ...props }) => (jsx("th", { className: buildClassName('first:pl-4 last:pr-4 px-3 py-3 tracking-wider whitespace-nowrap', 'text-gray-800 dark:text-gray-400', TEXT_ALIGN_CLASSES[align], className), ...props, children: jsx(BodyText, { as: "div", className: "block antialiased leading-none", children: children }) }));
-const EmptyTableRow = ({ children, colSpan = 1 }) => (jsx("tr", { children: jsx(TableCell, { colSpan: colSpan, align: "center", children: jsx("div", { className: "p-8 space-y-3", children: children }) }) }));
-
-const Recent = () => jsx("div", { children: "Recent" });
-const Popular = () => jsx("div", { children: "Popular" });
-const Trending = () => jsx("div", { children: "Trending" });
-const categories = [
-    {
-        name: 'Recent',
-        component: Recent,
-        props: {},
-    },
-    {
-        name: 'Popular',
-        component: Popular,
-        props: {},
-    },
-    {
-        name: 'Trending',
-        component: Trending,
-        props: {},
-    },
-];
-const Tabs = () => {
-    return (jsx("div", { className: "flex w-full pt-4", children: jsx("div", { className: "w-full max-w-md", children: jsxs(TabGroup, { children: [jsx(TabList, { className: "flex gap-4", children: categories.map(({ name }) => (jsx(Tab, { className: buildClassName('rounded-full py-1 px-3 text-sm/6 font-semibold dark:text-white border border-transparent', 'data-[selected]:bg-blue-100 dark:data-[selected]:bg-white/10 data-[selected]:text-blue-500', 'data-[hover]:bg-blue-50 dark:data-[hover]:bg-white/5', 'data-[selected]:data-[hover]:bg-blue-100 dark:data-[selected]:data-[hover]:bg-white/10', 'focus:outline-none data-[focus]:outline-1 data-[focus]:outline-blue-800 dark:data-[focus]:outline-white', 'data-[selected]:border-blue-500'), children: name }, name))) }), jsx(TabPanels, { className: "mt-3", children: categories.map(({ name, component: Component, props }) => (jsx(TabPanel, { className: "rounded-xl bg-white/5 p-3", children: jsx(Component, { ...props }) }, name))) })] }) }) }));
-};
+    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) => {
+                                    if (multiple && e.key === 'Backspace' && !query) {
+                                        if (Array.isArray(selected) && selected.length > 0) {
+                                            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, 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" }) })), 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", 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("div", { "data-testid": "options-loading", className: "flex items-center justify-center py-2 px-3 select-none", children: jsx(Loader, { size: "sm" }) })) : shouldShowTypeToSearch ? (jsx("div", { 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 }) }))] }));
+});
 
-const variantMap = {
-    primary: 'bg-blue-100 text-blue-600 border border-blue-200',
-    secondary: 'bg-gray-100 text-gray-600 border border-gray-200',
-    success: 'bg-green-100 text-green-600 border border-green-200',
-    warning: 'bg-orange-100 text-orange-600 border border-orange-200',
-    error: 'bg-red-100 text-red-600 border border-red-200',
-};
-const Tag = (props) => {
-    const { as: Element = 'span', text, className = '', onClose, variant = 'secondary', ...elemProps } = props;
-    return (jsxs(Element, { ...elemProps, className: buildClassName(className, 'px-1.5 py-0.5 text-sm/6 font-normal', variantMap[variant], 'rounded'), children: [jsx("span", { children: text }), onClose && jsx(SvgCircleX, { className: "size-3", onClick: () => onClose(), role: "button" })] }));
+const Tabs = ({ tabs, defaultIndex = 0, variant = 'underline', className = '', listClass = '', panelClass = '', }) => {
+    return (jsxs(TabGroup, { defaultIndex: defaultIndex, className: className, children: [jsx(TabList, { className: buildClassName('flex gap-2', listClass), children: tabs.map((tab, idx) => (jsx(Tab, { as: Fragment$1, children: ({ selected }) => (jsx("button", { className: buildTabClass({ selected, variant }), children: tab.label })) }, idx))) }), jsx(TabPanels, { className: buildClassName('mt-3', panelClass), children: tabs.map((tab, idx) => (jsx(TabPanel, { className: "rounded-lg bg-white dark:bg-gray-800 p-4 shadow-sm", children: tab.content }, idx))) })] }));
 };
+/**
+ * Build tab styles based on variant + active state
+ */
+function buildTabClass({ selected, variant, }) {
+    switch (variant) {
+        /**
+         * UNDERLINE (Default)
+         */
+        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');
+        /**
+         * SEGMENTED
+         */
+        case 'segmented':
+            return buildClassName('px-3 py-1.5 text-sm font-medium rounded-lg transition', selected
+                ? 'bg-blue-600 text-white'
+                : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700');
+        /**
+         * SOLID
+         */
+        case 'solid':
+            return buildClassName('px-3 py-1.5 text-sm font-medium rounded-md transition', selected
+                ? 'bg-gray-900 dark:bg-gray-700 text-white'
+                : 'bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700');
+    }
+}
 
 const Textarea = forwardRef((props, ref) => {
     const { name, id = name, label = null, labelHint = null, className = '', labelClass = '', labelWrapperClass = '', containerClass = '', error, showErrorMessage = true, rightGroup = null, leftGroup = null, ...inputProps } = props;
     const hasError = !isEmpty(error);
-    const hasRightGroup = rightGroup != null && isValidElement(rightGroup);
-    const hasLeftGroup = leftGroup != null && isValidElement(leftGroup);
-    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, ...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("p", { className: "mt-1 text-red-500 dark:text-red-500 text-sm", children: 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 }) }))] }));
 });
 
-const typeStyles = {
-    success: 'bg-green-500 text-white',
-    error: 'bg-red-500 text-white',
-    info: 'bg-blue-500 text-white',
-    warning: 'bg-yellow-400 text-black',
+/**
+ * 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" }),
+};
+/**
+ * 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',
 };
-const Toast = ({ message, type, onClose }) => {
-    return (jsx(Transition, { appear: true, show: true, enter: "transform transition duration-300", enterFrom: "opacity-0 translate-x-4", enterTo: "opacity-100 translate-x-0", leave: "transition duration-200 ease-in", leaveFrom: "opacity-100", leaveTo: "opacity-0", children: jsxs("div", { className: `flex items-center justify-between rounded-lg px-4 py-3 shadow-lg min-w-[240px] ${typeStyles[type]}`, children: [jsx("span", { children: message }), jsx("button", { onClick: onClose, className: "ml-3 text-xl leading-none hover:opacity-75", "aria-label": "Close toast", children: jsx(SvgX, { className: "size-5" }) })] }) }));
+/**
+ * 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',
+};
+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';
+    const leaveTo = isTop ? 'opacity-0 -translate-y-2 scale-95' : 'opacity-0 translate-y-2 scale-95';
+    return (jsx(Transition, { appear: true, show: true, enter: "transform transition duration-300", enterFrom: enterFrom, enterTo: "opacity-100 translate-y-0 scale-100", leave: "transition duration-200", leaveFrom: "opacity-100 translate-y-0 scale-100", leaveTo: leaveTo, children: jsxs("div", { role: "status", className: buildClassName('flex items-center gap-3 rounded-lg px-4 py-3 shadow-lg min-w-[260px] max-w-sm', 'bg-white dark:bg-gray-900 dark:border-gray-700', borderStyle[type], className), id: id.toString(), children: [jsx(TextContent, { className: buildClassName(textColorMap[type]), children: iconMap[type] }), jsx(TextContent, { className: "flex-1 text-sm font-medium", children: message }), jsx(Button, { onClick: onClose, "aria-label": "Close toast", className: "opacity-60 hover:opacity-100 transition", iconOnly: true, size: "xs", variant: "plain", theme: "secondary", noOutlineOnFocus: true, children: jsx(SvgX, { className: "size-4" }) })] }) }));
 };
 
 const ToastContext = createContext(undefined);
+let toastCounter = 0;
 const useToast = () => {
     const context = useContext(ToastContext);
     if (!context)
         throw new Error('useToast must be used within ToastProvider');
     return context;
 };
-const ToastProvider = ({ children }) => {
+// Maximum visible toasts at once
+const MAX_TOASTS = 5;
+const placementClass = {
+    'top-right': 'top-10 right-4 items-end',
+    'top-left': 'top-10 left-4 items-start',
+    'top-center': 'top-10 left-1/2 -translate-x-1/2 items-center',
+    'bottom-right': 'bottom-10 right-4 items-end',
+    'bottom-left': 'bottom-10 left-4 items-start',
+    'bottom-center': 'bottom-10 left-1/2 -translate-x-1/2 items-center',
+};
+const ToastProvider = ({ children, placement = 'top-center' }) => {
     const [toasts, setToasts] = useState([]);
-    const showToast = (message, options) => {
-        var _a, _b, _c;
-        const id = Date.now();
+    const timeoutRefs = useRef(new Map());
+    const clearTimer = (id) => {
+        const timeout = timeoutRefs.current.get(id);
+        if (timeout) {
+            clearTimeout(timeout);
+            timeoutRefs.current.delete(id);
+        }
+    };
+    const scheduleClose = (toast) => {
+        if (!toast.autoClose)
+            return;
+        clearTimer(toast.id);
+        const timeout = setTimeout(() => {
+            closeToast(toast.id);
+        }, toast.duration);
+        timeoutRefs.current.set(toast.id, timeout);
+    };
+    const showToast = useCallback((message, options) => {
+        var _a, _b, _c, _d;
+        const id = ++toastCounter;
         const newToast = {
             id,
             message,
             type: (_a = options === null || options === void 0 ? void 0 : options.type) !== null && _a !== void 0 ? _a : 'info',
             duration: (_b = options === null || options === void 0 ? void 0 : options.duration) !== null && _b !== void 0 ? _b : 3000,
             autoClose: (_c = options === null || options === void 0 ? void 0 : options.autoClose) !== null && _c !== void 0 ? _c : true,
+            pauseOnHover: (_d = options === null || options === void 0 ? void 0 : options.pauseOnHover) !== null && _d !== void 0 ? _d : true,
         };
-        setToasts((prev) => [...prev, newToast]);
-        if (newToast.autoClose) {
-            setTimeout(() => closeToast(id), newToast.duration);
+        setToasts((prev) => {
+            const updated = [...prev, newToast];
+            if (updated.length > MAX_TOASTS)
+                updated.shift();
+            return updated;
+        });
+        scheduleClose(newToast);
+    }, []);
+    const closeToast = useCallback((id) => {
+        clearTimer(id);
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+    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;
+      });
     };
-    const closeToast = (id) => {
-        setToasts((prev) => prev.filter((t) => t.id !== id));
+    return e.addEventListener("scroll", p), () => {
+      e.removeEventListener("scroll", p);
     };
-    return (jsxs(ToastContext.Provider, { value: { showToast, closeToast }, children: [children, jsx("div", { className: "fixed top-4 right-4 z-50 space-y-3", children: toasts.map((toast) => (jsx(Toast, { ...toast, onClose: () => closeToast(toast.id) }, toast.id))) })] }));
+  }, [
+    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 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,
+            display: 'grid',
+            gridTemplateColumns: gridTemplate,
+            minWidth: 'fit-content',
+        }, 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('px-3 py-3 whitespace-nowrap border-r last:border-r-0 border-gray-200 dark:border-gray-700', 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)]'), children: content }, col.name));
+        }) }));
+};
+
+/* -------------------------------------------------------
+ * Convert column definitions into CSS grid template
+ * ------------------------------------------------------- */
+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 headerRef = useRef(null);
+    const gridTemplate = useGridTemplate(columns);
+    /** Sync body → header scroll */
+    const handleScrollSync = (scrollOffset) => {
+        if (headerRef.current) {
+            headerRef.current.scrollLeft = scrollOffset;
+        }
+    };
+    const handleSort = useCallback((column) => {
+        if (column.sortable)
+            onSort === null || onSort === void 0 ? void 0 : onSort(column);
+    }, [onSort]);
+    /* -------------------------------------------------------
+     * RENDER: Header row (real DOM for accessibility)
+     * ------------------------------------------------------- */
+    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('px-3 py-3 font-semibold text-sm whitespace-nowrap flex items-center', '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)]'), 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))) }) }));
+    /* -------------------------------------------------------
+     * LOADING STATE (non-virtualized placeholder)
+     * ------------------------------------------------------- */
+    if (loading) {
+        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 }, className: "flex flex-col", children: [...Array(6)].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: "px-3 py-3", children: jsx("div", { className: "h-4 w-3/4 bg-gray-300 dark:bg-gray-700 rounded" }) }, col.name))) }, idx))) })] }) }));
+    }
+    /* -------------------------------------------------------
+     * EMPTY STATE (non-virtualized → single row)
+     * ------------------------------------------------------- */
+    if (!loading && items.length === 0) {
+        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", { className: "flex items-center justify-center text-gray-500 dark:text-gray-300", style: { height: maxHeight }, children: emptyMessage })] }) }));
+    }
+    /* -------------------------------------------------------
+     * 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) }) })] }) }));
+};
+
+const useIsMobile = () => {
+    const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+    useEffect(() => {
+        function handleResize() {
+            setIsMobile(window.innerWidth < 768);
+        }
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return isMobile;
+};
+
+const useIsTablet = () => {
+    const [isTablet, setIsTablet] = useState(window.innerWidth < 768 && window.innerHeight > 960);
+    useEffect(() => {
+        function handleResize() {
+            setIsTablet(window.innerWidth > 768 && window.innerHeight < 960);
+        }
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+    return isTablet;
 };
 
-export { Alert, Badge, Banner, BodyText, Breadcrumb, Button, Card, Checkbox, CheckboxGroup, DOTS, DetailedInformation, Dot, Drawer, Dropdown, EmptyState, EmptyTableRow, HeadingText, Input, Label, Loader, PASSWORD_PLACEHOLDER, PASSWORD_TYPE, Pagination, PasswordInput, RadioButton, RadioButtonGroup, RadioSwitch, RangeInput, SelectBox, TabelBody, TabelFoot, TabelHead, Table, TableCell, TableHeaderCell, TableRow, Tabs, Tag, TextContent, Textarea, ToastProvider, buildClassName, isArray, isEmpty, useDebounce, usePagination, useToast };
+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, usePagination, useToast };
 //# sourceMappingURL=react-tailwind.es.js.map