@pk-design/react-tailwind 1.0.2

package/dist/react-tailwind.es.js

@@ -0,0 +1,872 @@
+import { jsx, jsxs, Fragment as Fragment$1 } 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';
+
+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 SvgBadgeCheck = function SvgBadgeCheck(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$d({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-badge-check-icon lucide-badge-check",
+    viewBox: "0 0 24 24"
+  }, props), _path$d || (_path$d = /*#__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 SvgCircleX = function SvgCircleX(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$c({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-circle-x-icon lucide-circle-x",
+    viewBox: "0 0 24 24"
+  }, props), _circle$4 || (_circle$4 = /*#__PURE__*/React.createElement("circle", {
+    cx: 12,
+    cy: 12,
+    r: 10
+  })), _path$c || (_path$c = /*#__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 SvgCircleAlert = function SvgCircleAlert(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$b({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-circle-alert-icon lucide-circle-alert",
+    viewBox: "0 0 24 24"
+  }, props), _circle$3 || (_circle$3 = /*#__PURE__*/React.createElement("circle", {
+    cx: 12,
+    cy: 12,
+    r: 10
+  })), _path$b || (_path$b = /*#__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 SvgInfo = function SvgInfo(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$a({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-info-icon lucide-info",
+    viewBox: "0 0 24 24"
+  }, props), _circle$2 || (_circle$2 = /*#__PURE__*/React.createElement("circle", {
+    cx: 12,
+    cy: 12,
+    r: 10
+  })), _path$a || (_path$a = /*#__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 SvgX = function SvgX(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-x-icon lucide-x",
+    viewBox: "0 0 24 24"
+  }, props), _path$9 || (_path$9 = /*#__PURE__*/React.createElement("path", {
+    d: "M18 6 6 18M6 6l12 12"
+  })));
+};
+
+const loaderSizeMap = {
+    xs: 'size-4',
+    sm: 'size-6',
+    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 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),
+        ...rest,
+    });
+});
+
+const THEMED_BTN_CLASS = {
+    primary: {
+        default: 'text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-blue-600 disabled:bg-blue-400 dark:disabled:bg-blue-500',
+        outlined: 'text-blue-600 hover:text-white border border-blue-600 hover:bg-blue-600 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500 focus:outline-blue-600 disabled:text-blue-400 disabled:border-blue-400',
+        plain: 'text-blue-600 hover:bg-black/5 dark:text-blue-400 dark:hover:bg-gray-700 focus:outline-blue-600 disabled:text-blue-400',
+    },
+    danger: {
+        default: 'text-white bg-red-600 hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-red-600 disabled:bg-red-400 dark:disabled:bg-red-500',
+        outlined: 'text-red-600 hover:text-white border border-red-600 hover:bg-red-600 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-500 focus:outline-red-600 disabled:text-red-400 disabled:border-red-400',
+        plain: 'text-red-600 hover:bg-black/5 dark:text-red-400 dark:hover:bg-gray-700 focus:outline-red-600 disabled:text-red-400',
+    },
+    secondary: {
+        default: 'text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 focus:outline-blue-600 disabled:bg-gray-200 dark:disabled:bg-gray-700',
+        outlined: 'text-gray-700 hover:text-white border border-gray-500 hover:bg-gray-700 dark:border-gray-500 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus:outline-blue-600 disabled:text-gray-400 disabled:border-gray-400',
+        plain: 'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus:outline-blue-600 disabled:text-gray-400',
+    },
+};
+const getBtnSizeClasses = (size, iconOnly = false) => {
+    switch (size) {
+        case 'xs':
+            return `text-xs h-6 ${iconOnly ? 'p-1 rounded-sm' : 'px-2 py-1 rounded-sm gap-1'}`;
+        case 'sm':
+            return `text-sm h-8 ${iconOnly ? 'p-1.5 rounded' : ' px-3 py-1.5 rounded gap-1.5'}`;
+        case 'md':
+            return `text-sm h-10 ${iconOnly ? 'p-2 rounded-md' : 'px-4 py-2 rounded-md gap-2'}`;
+        case 'lg':
+            return `text-base h-12 ${iconOnly ? 'p-2.5 rounded-lg' : 'px-5 py-2.5 rounded-lg gap-2'}`;
+    }
+};
+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) }));
+});
+
+const AlertTypeIconMap = {
+    success: SvgBadgeCheck,
+    danger: SvgCircleX,
+    warning: SvgCircleAlert,
+    info: SvgInfo,
+};
+const TypeClassMap = {
+    success: 'bg-green-50 ring-green-600/20 text-green-700',
+    danger: 'bg-red-50 ring-red-600/20 text-red-700',
+    warning: 'bg-orange-50 ring-orange-600/20 text-orange-700',
+    info: 'bg-blue-50 ring-blue-600/20 text-blue-700',
+};
+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" }) }))] }));
+};
+
+const ThemeClassMap = {
+    success: 'bg-green-50 ring-green-600/20 text-green-700 dark:bg-green-600 dark:text-green-50 dark:ring-green-400/20',
+    danger: 'bg-red-50 dark:bg-red-600 text-red-700 dark:text-red-50 ring-red-600/20 dark:ring-red-400/20',
+    warning: 'bg-yellow-50 dark:bg-yellow-600 text-yellow-700 dark:text-yellow-50 ring-yellow-600/20 dark:ring-yellow-400/20',
+    info: 'bg-blue-50 dark:bg-blue-600 text-blue-700 dark:text-blue-50 ring-blue-600/20 dark:ring-blue-400/20',
+    secondary: 'bg-gray-50 dark:bg-gray-600 text-gray-700 dark:text-gray-50 ring-gray-600/20 dark:ring-gray-400/20',
+};
+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] }));
+});
+
+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 SvgTriangleAlert = function SvgTriangleAlert(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-triangle-alert-icon lucide-triangle-alert",
+    viewBox: "0 0 24 24"
+  }, props), _path$8 || (_path$8 = /*#__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 SvgCircleCheck = function SvgCircleCheck(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-circle-check-icon lucide-circle-check",
+    viewBox: "0 0 24 24"
+  }, props), _circle$1 || (_circle$1 = /*#__PURE__*/React.createElement("circle", {
+    cx: 12,
+    cy: 12,
+    r: 10
+  })), _path$7 || (_path$7 = /*#__PURE__*/React.createElement("path", {
+    d: "m9 12 2 2 4-4"
+  })));
+};
+
+const sizeMap = {
+    5: `size-5`,
+    6: `size-6`,
+    7: `size-7`,
+    8: `size-8`,
+    9: `size-9`,
+    10: `size-10`,
+};
+const IconMap = {
+    info: SvgInfo,
+    error: SvgCircleX,
+    success: SvgCircleCheck,
+    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 renderIcon = () => {
+        const Icon = IconMap[type];
+        return jsx(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 })] }));
+});
+
+const BodyText = forwardRef((props, ref) => {
+    const { as = 'p', small = false, strong = false, muted = false, error = false, inline = false, className, ...rest } = props;
+    return React__default.createElement(as, {
+        ref: ref,
+        className: buildClassName(small && 'text-sm/6', strong && 'font-semibold', muted && 'text-gray-500', error && 'text-red-500', inline && 'inline-flex items-center gap-2', className),
+        ...rest,
+    });
+});
+
+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 SvgSlash = function SvgSlash(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-slash-icon lucide-slash",
+    viewBox: "0 0 24 24"
+  }, props), _path$6 || (_path$6 = /*#__PURE__*/React.createElement("path", {
+    d: "M22 2 2 22"
+  })));
+};
+
+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))) }));
+};
+
+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 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 }));
+});
+
+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 })] }));
+});
+
+const CheckboxGroup = (props) => {
+    const { name, options, label = null, labelClass = '', labelWrapperClass = '', labelHint = null, containerClass = '', value = [], onChange, inline, } = props;
+    const [items, setItems] = useState([]);
+    useEffect(() => {
+        setItems(() => options.map((option) => {
+            if (typeof option === 'string') {
+                return { label: option, value: option };
+            }
+            return option;
+        }));
+    }, [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))) })] }));
+};
+
+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 = ({ 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 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,
+});
+
+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 SvgChevronLeft = function SvgChevronLeft(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-chevron-left-icon lucide-chevron-left",
+    viewBox: "0 0 24 24"
+  }, props), _path$5 || (_path$5 = /*#__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',
+};
+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 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 = 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 })] }) }) })] }));
+};
+
+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$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) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-folder-plus-icon lucide-folder-plus",
+    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"
+  })));
+};
+
+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 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 }))] }));
+});
+
+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$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) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
+    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$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
+    d: "m9 18 6-6-6-6"
+  })));
+};
+
+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 PASSWORD_TYPE = 'password';
+const PASSWORD_PLACEHOLDER = '••••••••••';
+const PasswordInput = (props) => {
+    const { type, placeholder, ...inputProps } = props;
+    const [showPassword, setShowPassword] = useState(false);
+    return (jsx(Input, { ...inputProps, type: showPassword ? 'text' : PASSWORD_TYPE, placeholder: PASSWORD_PLACEHOLDER, rightGroup: jsx(Button, { theme: "secondary", variant: "plain", size: "xs", className: "px-1 mr-1", type: "button", onClick: () => setShowPassword(() => !showPassword), tabIndex: -1, children: showPassword ? (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-4", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" }) })) : (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-4", children: [jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" }), jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" })] })) }) }));
+};
+
+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 RadioButtonGroup = (props) => {
+    const { name, label = null, labelClass = '', labelWrapperClass = '', labelHint = null, containerClass = '', options, value, row, onChange, } = props;
+    const [items, setItems] = useState([]);
+    useEffect(() => {
+        setItems(() => {
+            return options === null || options === void 0 ? void 0 : options.map((option) => {
+                if (typeof option === 'string') {
+                    return { label: option, value: option };
+                }
+                return option;
+            });
+        });
+    }, [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)))) }));
+};
+
+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) })] })] }));
+};
+
+/**
+ * Checks if a value is an array.
+ * Equivalent to lodash's _.isArray.
+ */
+function isArray(value) {
+    return Array.isArray(value);
+}
+
+/**
+ * Checks if a value is empty.
+ * Works for arrays, objects, strings, Maps, and Sets.
+ * Equivalent to lodash's _.isEmpty.
+ */
+function isEmpty(value) {
+    if (value == null)
+        return true; // null or undefined
+    if (typeof value === 'string' || isArray(value)) {
+        return value.length === 0;
+    }
+    if (value instanceof Map || value instanceof Set) {
+        return value.size === 0;
+    }
+    if (typeof value === 'object') {
+        return Object.keys(value).length === 0;
+    }
+    return false; // for numbers, booleans, functions, etc.
+}
+
+const useDebounce = (value, delay) => {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        // Cancel the timeout if value or delay changes
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+};
+
+var _path$2;
+function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
+var SvgCheck = function SvgCheck(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-check-icon lucide-check",
+    viewBox: "0 0 24 24"
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
+    d: "M20 6 9 17l-5-5"
+  })));
+};
+
+var _path$1;
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+var SvgChevronDown = function SvgChevronDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    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-down-icon lucide-chevron-down",
+    viewBox: "0 0 24 24"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    d: "m6 9 6 6 6-6"
+  })));
+};
+
+var _circle, _path;
+function _extends() { return _extends = 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.apply(null, arguments); }
+var SvgCirclePlus = function SvgCirclePlus(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    className: "lucide lucide-circle-plus-icon lucide-circle-plus",
+    viewBox: "0 0 24 24"
+  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 12,
+    cy: 12,
+    r: 10
+  })), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M8 12h8M12 8v8"
+  })));
+};
+
+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 { 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 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 getDisplayValue = (option) => {
+        return typeof option === 'string' ? option : option[labelKey];
+    };
+    const getValue = (option) => {
+        return typeof option === 'string' ? option : option[valueKey];
+    };
+    const removeSelection = (idx) => {
+        if (!isArray(selected)) {
+            return;
+        }
+        const nextSelectedValue = [...selected];
+        nextSelectedValue.splice(idx, 1);
+        onChange(nextSelectedValue);
+    };
+    const handleOnChange = (value) => {
+        let nextValue = !value ? (multiple ? [] : {}) : value;
+        if (multiple && isArray(selected)) {
+            if (maxSelection && selected.length >= maxSelection) {
+                return;
+            }
+        }
+        onChange(nextValue);
+        setQuery('');
+    };
+    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);
+        }
+        finally {
+            setOptionsLoading(false);
+        }
+    };
+    useEffect(() => {
+        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))) })] }) }) }));
+};
+
+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 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 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',
+};
+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" }) })] }) }));
+};
+
+const ToastContext = createContext(undefined);
+const useToast = () => {
+    const context = useContext(ToastContext);
+    if (!context)
+        throw new Error('useToast must be used within ToastProvider');
+    return context;
+};
+const ToastProvider = ({ children }) => {
+    const [toasts, setToasts] = useState([]);
+    const showToast = (message, options) => {
+        var _a, _b, _c;
+        const id = Date.now();
+        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,
+        };
+        setToasts((prev) => [...prev, newToast]);
+        if (newToast.autoClose) {
+            setTimeout(() => closeToast(id), newToast.duration);
+        }
+    };
+    const closeToast = (id) => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+    };
+    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))) })] }));
+};
+
+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 };
+//# sourceMappingURL=react-tailwind.es.js.map