tw-react-components 0.0.132

package/index.cjs.js

@@ -0,0 +1,1881 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var dayjs = require('dayjs');
+var advancedFormat = require('dayjs/plugin/advancedFormat');
+var lucideReact = require('lucide-react');
+var localeData = require('dayjs/plugin/localeData');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
+var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
+var reactHookForm = require('react-hook-form');
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var core = require('@dnd-kit/core');
+var modifiers = require('@dnd-kit/modifiers');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var Accordion = require('@radix-ui/react-accordion');
+var reactRouterDom = require('react-router-dom');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var SwitchPrimitives = require('@radix-ui/react-switch');
+var TabsPrimitive = require('@radix-ui/react-tabs');
+var react$1 = require('@headlessui/react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var advancedFormat__default = /*#__PURE__*/_interopDefaultLegacy(advancedFormat);
+var localeData__default = /*#__PURE__*/_interopDefaultLegacy(localeData);
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
+var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var Accordion__namespace = /*#__PURE__*/_interopNamespace(Accordion);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+function cn(...inputs) {
+    return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+function compareDates(date1, date2, startOf) {
+    if (startOf) {
+        date1 = dayjs__default["default"](date1).startOf(startOf).toDate();
+        date2 = dayjs__default["default"](date2).startOf(startOf).toDate();
+    }
+    return date1.getTime() - date2.getTime();
+}
+
+function generalComparator(a, b) {
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length - b.length;
+    }
+    if (typeof a === 'number' && typeof b === 'number') {
+        return a - b;
+    }
+    if (typeof a === 'string' && typeof b === 'string') {
+        return a.localeCompare(b);
+    }
+    return 0;
+}
+
+dayjs__default["default"].extend(advancedFormat__default["default"]);
+function getDisplayDate(date, format, locale) {
+    return (locale ? dayjs__default["default"](date).locale(locale) : dayjs__default["default"](date)).format(format);
+}
+
+function isEmpty(s) {
+    if (Array.isArray(s))
+        return s.length === 0;
+    return [null, undefined, ''].includes(s);
+}
+
+function mergeRefs(refs) {
+    return (value) => {
+        refs.forEach((ref) => {
+            if (typeof ref === 'function') {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+}
+
+function resolveTargetObject(payload, fieldChain) {
+    if (!fieldChain.length) {
+        return payload;
+    }
+    if (typeof payload !== 'object' || !payload) {
+        throw new Error(`Could not resolve field ${fieldChain[0]} because payload is not an object!`);
+    }
+    const [key, ...rest] = fieldChain;
+    if (Array.isArray(payload)) {
+        if (Number.isNaN(+key)) {
+            throw new Error('The payload is an array, thus the key should be a number!');
+        }
+        const index = +key;
+        if (index < 0 || index >= payload.length) {
+            throw new Error('Index out of payload boundaries!');
+        }
+        return resolveTargetObject(payload[index], rest);
+    }
+    return resolveTargetObject(payload[key], rest);
+}
+
+const variantClassNames = {
+    filled: {
+        slate: {
+            base: 'bg-slate-100 dark:bg-slate-800',
+            hover: 'hover:bg-slate-200 dark:hover:bg-slate-700',
+            focus: 'focus:bg-slate-200 dark:focus:bg-slate-700',
+            active: 'active:bg-slate-300 dark:active:bg-slate-800/50',
+        },
+        gray: {
+            base: 'text-white bg-gray-500 dark:bg-gray-600',
+            hover: 'hover:bg-gray-400 dark:hover:bg-gray-500',
+            focus: 'focus:bg-gray-400 dark:focus:bg-gray-500',
+            active: 'active:bg-gray-600 dark:active:bg-gray-700',
+        },
+        zinc: {
+            base: 'text-white bg-zinc-500 dark:bg-zinc-600',
+            hover: 'hover:bg-zinc-400 dark:hover:bg-zinc-500',
+            focus: 'focus:bg-zinc-400 dark:focus:bg-zinc-500',
+            active: 'active:bg-zinc-600 dark:active:bg-zinc-700',
+        },
+        neutral: {
+            base: 'text-white bg-neutral-500 dark:bg-neutral-600',
+            hover: 'hover:bg-neutral-400 dark:hover:bg-neutral-500',
+            focus: 'focus:bg-neutral-400 dark:focus:bg-neutral-500',
+            active: 'active:bg-neutral-600 dark:active:bg-neutral-700',
+        },
+        stone: {
+            base: 'text-white bg-stone-500 dark:bg-stone-600',
+            hover: 'hover:bg-stone-400 dark:hover:bg-stone-500',
+            focus: 'focus:bg-stone-400 dark:focus:bg-stone-500',
+            active: 'active:bg-stone-600 dark:active:bg-stone-700',
+        },
+        red: {
+            base: 'text-white bg-red-500 dark:bg-red-600',
+            hover: 'hover:bg-red-400 dark:hover:bg-red-500',
+            focus: 'focus:bg-red-400 dark:focus:bg-red-500',
+            active: 'active:bg-red-600 dark:active:bg-red-700',
+        },
+        orange: {
+            base: 'text-white bg-orange-500 dark:bg-orange-600',
+            hover: 'hover:bg-orange-400 dark:hover:bg-orange-500',
+            focus: 'focus:bg-orange-400 dark:focus:bg-orange-500',
+            active: 'active:bg-orange-600 dark:active:bg-orange-700',
+        },
+        amber: {
+            base: 'text-white bg-amber-500 dark:bg-amber-600',
+            hover: 'hover:bg-amber-400 dark:hover:bg-amber-500',
+            focus: 'focus:bg-amber-400 dark:focus:bg-amber-500',
+            active: 'active:bg-amber-600 dark:active:bg-amber-700',
+        },
+        yellow: {
+            base: 'text-white bg-yellow-500 dark:bg-yellow-600',
+            hover: 'hover:bg-yellow-400 dark:hover:bg-yellow-500',
+            focus: 'focus:bg-yellow-400 dark:focus:bg-yellow-500',
+            active: 'active:bg-yellow-600 dark:active:bg-yellow-700',
+        },
+        lime: {
+            base: 'text-white bg-lime-500 dark:bg-lime-600',
+            hover: 'hover:bg-lime-400 dark:hover:bg-lime-500',
+            focus: 'focus:bg-lime-400 dark:focus:bg-lime-500',
+            active: 'active:bg-lime-600 dark:active:bg-lime-700',
+        },
+        green: {
+            base: 'text-white bg-green-500 dark:bg-green-600',
+            hover: 'hover:bg-green-400 dark:hover:bg-green-500',
+            focus: 'focus:bg-green-400 dark:focus:bg-green-500',
+            active: 'active:bg-green-600 dark:active:bg-green-700',
+        },
+        emerald: {
+            base: 'text-white bg-emerald-500 dark:bg-emerald-600',
+            hover: 'hover:bg-emerald-400 dark:hover:bg-emerald-500',
+            focus: 'focus:bg-emerald-400 dark:focus:bg-emerald-500',
+            active: 'active:bg-emerald-600 dark:active:bg-emerald-700',
+        },
+        teal: {
+            base: 'text-white bg-teal-500 dark:bg-teal-600',
+            hover: 'hover:bg-teal-400 dark:hover:bg-teal-500',
+            focus: 'focus:bg-teal-400 dark:focus:bg-teal-500',
+            active: 'active:bg-teal-600 dark:active:bg-teal-700',
+        },
+        cyan: {
+            base: 'text-white bg-cyan-500 dark:bg-cyan-600',
+            hover: 'hover:bg-cyan-400 dark:hover:bg-cyan-500',
+            focus: 'focus:bg-cyan-400 dark:focus:bg-cyan-500',
+            active: 'active:bg-cyan-600 dark:active:bg-cyan-700',
+        },
+        sky: {
+            base: 'text-white bg-sky-500 dark:bg-sky-600',
+            hover: 'hover:bg-sky-400 dark:hover:bg-sky-500',
+            focus: 'focus:bg-sky-400 dark:focus:bg-sky-500',
+            active: 'active:bg-sky-600 dark:active:bg-sky-700',
+        },
+        blue: {
+            base: 'text-white bg-blue-500 dark:bg-blue-600',
+            hover: 'hover:bg-blue-400 dark:hover:bg-blue-500',
+            focus: 'focus:bg-blue-400 dark:focus:bg-blue-500',
+            active: 'active:bg-blue-600 dark:active:bg-blue-700',
+        },
+        indigo: {
+            base: 'text-white bg-indigo-500 dark:bg-indigo-600',
+            hover: 'hover:bg-indigo-400 dark:hover:bg-indigo-500',
+            focus: 'focus:bg-indigo-400 dark:focus:bg-indigo-500',
+            active: 'active:bg-indigo-600 dark:active:bg-indigo-700',
+        },
+        violet: {
+            base: 'text-white bg-violet-500 dark:bg-violet-600',
+            hover: 'hover:bg-violet-400 dark:hover:bg-violet-500',
+            focus: 'focus:bg-violet-400 dark:focus:bg-violet-500',
+            active: 'active:bg-violet-600 dark:active:bg-violet-700',
+        },
+        fuchsia: {
+            base: 'text-white bg-fuchsia-500 dark:bg-fuchsia-600',
+            hover: 'hover:bg-fuchsia-400 dark:hover:bg-fuchsia-500',
+            focus: 'focus:bg-fuchsia-400 dark:focus:bg-fuchsia-500',
+            active: 'active:bg-fuchsia-600 dark:active:bg-fuchsia-700',
+        },
+        purple: {
+            base: 'text-white bg-purple-500 dark:bg-purple-600',
+            hover: 'hover:bg-purple-400 dark:hover:bg-purple-500',
+            focus: 'focus:bg-purple-400 dark:focus:bg-purple-500',
+            active: 'active:bg-purple-600 dark:active:bg-purple-700',
+        },
+        pink: {
+            base: 'text-white bg-pink-500 dark:bg-pink-600',
+            hover: 'hover:bg-pink-400 dark:hover:bg-pink-500',
+            focus: 'focus:bg-pink-400 dark:focus:bg-pink-500',
+            active: 'active:bg-pink-600 dark:active:bg-pink-700',
+        },
+        rose: {
+            base: 'text-white bg-rose-500 dark:bg-rose-600',
+            hover: 'hover:bg-rose-400 dark:hover:bg-rose-500',
+            focus: 'focus:bg-rose-400 dark:focus:bg-rose-500',
+            active: 'active:bg-rose-600 dark:active:bg-rose-700',
+        },
+    },
+    outlined: {
+        slate: {
+            base: 'border-2 dark:border-slate-600',
+            hover: 'hover:bg-slate-200 dark:hover:bg-slate-600',
+            focus: 'focus:bg-slate-200 dark:focus:bg-slate-600',
+            active: 'active:bg-slate-300 active:border-slate-300 dark:active:bg-slate-700 dark:active:border-slate-700',
+        },
+        gray: {
+            base: 'border-2 border-gray-500 text-gray-600 dark:border-gray-600 dark:text-gray-500',
+            hover: 'hover:text-white hover:bg-gray-500 dark:hover:text-white dark:hover:bg-gray-600',
+            focus: 'focus:text-white focus:bg-gray-500 dark:focus:text-white dark:focus:bg-gray-600',
+            active: 'active:bg-gray-600 active:border-gray-600 dark:active:bg-gray-700 dark:active:border-gray-700',
+        },
+        zinc: {
+            base: 'border-2 border-zinc-500 text-zinc-600 dark:border-zinc-600 dark:text-zinc-500',
+            hover: 'hover:text-white hover:bg-zinc-500 dark:hover:text-white dark:hover:bg-zinc-600',
+            focus: 'focus:text-white focus:bg-zinc-500 dark:focus:text-white dark:focus:bg-zinc-600',
+            active: 'active:bg-zinc-600 active:border-zinc-600 dark:active:bg-zinc-700 dark:active:border-zinc-700',
+        },
+        neutral: {
+            base: 'border-2 border-neutral-500 text-neutral-600 dark:border-neutral-600 dark:text-neutral-500',
+            hover: 'hover:text-white hover:bg-neutral-500 dark:hover:text-white dark:hover:bg-neutral-600',
+            focus: 'focus:text-white focus:bg-neutral-500 dark:focus:text-white dark:focus:bg-neutral-600',
+            active: 'active:bg-neutral-600 active:border-neutral-600 dark:active:bg-neutral-700 dark:active:border-neutral-700',
+        },
+        stone: {
+            base: 'border-2 border-stone-500 text-stone-600 dark:border-stone-600 dark:text-stone-500',
+            hover: 'hover:text-white hover:bg-stone-500 dark:hover:text-white dark:hover:bg-stone-600',
+            focus: 'focus:text-white focus:bg-stone-500 dark:focus:text-white dark:focus:bg-stone-600',
+            active: 'active:bg-stone-600 active:border-stone-600 dark:active:bg-stone-700 dark:active:border-stone-700',
+        },
+        red: {
+            base: 'border-2 border-red-500 text-red-600 dark:border-red-600 dark:text-red-500',
+            hover: 'hover:text-white hover:bg-red-500 dark:hover:text-white dark:hover:bg-red-600',
+            focus: 'focus:text-white focus:bg-red-500 dark:focus:text-white dark:focus:bg-red-600',
+            active: 'active:bg-red-600 active:border-red-600 dark:active:bg-red-700 dark:active:border-red-700',
+        },
+        orange: {
+            base: 'border-2 border-orange-500 text-orange-600 dark:border-orange-600 dark:text-orange-500',
+            hover: 'hover:text-white hover:bg-orange-500 dark:hover:text-white dark:hover:bg-orange-600',
+            focus: 'focus:text-white focus:bg-orange-500 dark:focus:text-white dark:focus:bg-orange-600',
+            active: 'active:bg-orange-600 active:border-orange-600 dark:active:bg-orange-700 dark:active:border-orange-700',
+        },
+        amber: {
+            base: 'border-2 border-amber-500 text-amber-600 dark:border-amber-600 dark:text-amber-500',
+            hover: 'hover:text-white hover:bg-amber-500 dark:hover:text-white dark:hover:bg-amber-600',
+            focus: 'focus:text-white focus:bg-amber-500 dark:focus:text-white dark:focus:bg-amber-600',
+            active: 'active:bg-amber-600 active:border-amber-600 dark:active:bg-amber-700 dark:active:border-amber-700',
+        },
+        yellow: {
+            base: 'border-2 border-yellow-500 text-yellow-600 dark:border-yellow-600 dark:text-yellow-500',
+            hover: 'hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-600',
+            focus: 'focus:text-white focus:bg-yellow-500 dark:focus:text-white dark:focus:bg-yellow-600',
+            active: 'active:bg-yellow-600 active:border-yellow-600 dark:active:bg-yellow-700 dark:active:border-yellow-700',
+        },
+        lime: {
+            base: 'border-2 border-lime-500 text-lime-600 dark:border-lime-600 dark:text-lime-500',
+            hover: 'hover:text-white hover:bg-lime-500 dark:hover:text-white dark:hover:bg-lime-600',
+            focus: 'focus:text-white focus:bg-lime-500 dark:focus:text-white dark:focus:bg-lime-600',
+            active: 'active:bg-lime-600 active:border-lime-600 dark:active:bg-lime-700 dark:active:border-lime-700',
+        },
+        green: {
+            base: 'border-2 border-green-500 text-green-600 dark:border-green-600 dark:text-green-500',
+            hover: 'hover:text-white hover:bg-green-500 dark:hover:text-white dark:hover:bg-green-600',
+            focus: 'focus:text-white focus:bg-green-500 dark:focus:text-white dark:focus:bg-green-600',
+            active: 'active:bg-green-600 active:border-green-600 dark:active:bg-green-700 dark:active:border-green-700',
+        },
+        emerald: {
+            base: 'border-2 border-emerald-500 text-emerald-600 dark:border-emerald-600 dark:text-emerald-500',
+            hover: 'hover:text-white hover:bg-emerald-500 dark:hover:text-white dark:hover:bg-emerald-600',
+            focus: 'focus:text-white focus:bg-emerald-500 dark:focus:text-white dark:focus:bg-emerald-600',
+            active: 'active:bg-emerald-600 active:border-emerald-600 dark:active:bg-emerald-700 dark:active:border-emerald-700',
+        },
+        teal: {
+            base: 'border-2 border-teal-500 text-teal-600 dark:border-teal-600 dark:text-teal-500',
+            hover: 'hover:text-white hover:bg-teal-500 dark:hover:text-white dark:hover:bg-teal-600',
+            focus: 'focus:text-white focus:bg-teal-500 dark:focus:text-white dark:focus:bg-teal-600',
+            active: 'active:bg-teal-600 active:border-teal-600 dark:active:bg-teal-700 dark:active:border-teal-700',
+        },
+        cyan: {
+            base: 'border-2 border-cyan-500 text-cyan-600 dark:border-cyan-600 dark:text-cyan-500',
+            hover: 'hover:text-white hover:bg-cyan-500 dark:hover:text-white dark:hover:bg-cyan-600',
+            focus: 'focus:text-white focus:bg-cyan-500 dark:focus:text-white dark:focus:bg-cyan-600',
+            active: 'active:bg-cyan-600 active:border-cyan-600 dark:active:bg-cyan-700 dark:active:border-cyan-700',
+        },
+        sky: {
+            base: 'border-2 border-sky-500 text-sky-600 dark:border-sky-600 dark:text-sky-500',
+            hover: 'hover:text-white hover:bg-sky-500 dark:hover:text-white dark:hover:bg-sky-600',
+            focus: 'focus:text-white focus:bg-sky-500 dark:focus:text-white dark:focus:bg-sky-600',
+            active: 'active:bg-sky-600 active:border-sky-600 dark:active:bg-sky-700 dark:active:border-sky-700',
+        },
+        blue: {
+            base: 'border-2 border-blue-500 text-blue-600 dark:border-blue-600 dark:text-blue-500',
+            hover: 'hover:text-white hover:bg-blue-500 dark:hover:text-white dark:hover:bg-blue-600',
+            focus: 'focus:text-white focus:bg-blue-500 dark:focus:text-white dark:focus:bg-blue-600',
+            active: 'active:bg-blue-600 active:border-blue-600 dark:active:bg-blue-700 dark:active:border-blue-700',
+        },
+        indigo: {
+            base: 'border-2 border-indigo-500 text-indigo-600 dark:border-indigo-600 dark:text-indigo-500',
+            hover: 'hover:text-white hover:bg-indigo-500 dark:hover:text-white dark:hover:bg-indigo-600',
+            focus: 'focus:text-white focus:bg-indigo-500 dark:focus:text-white dark:focus:bg-indigo-600',
+            active: 'active:bg-indigo-600 active:border-indigo-600 dark:active:bg-indigo-700 dark:active:border-indigo-700',
+        },
+        violet: {
+            base: 'border-2 border-violet-500 text-violet-600 dark:border-violet-600 dark:text-violet-500',
+            hover: 'hover:text-white hover:bg-violet-500 dark:hover:text-white dark:hover:bg-violet-600',
+            focus: 'focus:text-white focus:bg-violet-500 dark:focus:text-white dark:focus:bg-violet-600',
+            active: 'active:bg-violet-600 active:border-violet-600 dark:active:bg-violet-700 dark:active:border-violet-700',
+        },
+        fuchsia: {
+            base: 'border-2 border-fuchsia-500 text-fuchsia-600 dark:border-fuchsia-600 dark:text-fuchsia-500',
+            hover: 'hover:text-white hover:bg-fuchsia-500 dark:hover:text-white dark:hover:bg-fuchsia-600',
+            focus: 'focus:text-white focus:bg-fuchsia-500 dark:focus:text-white dark:focus:bg-fuchsia-600',
+            active: 'active:bg-fuchsia-600 active:border-fuchsia-600 dark:active:bg-fuchsia-700 dark:active:border-fuchsia-700',
+        },
+        purple: {
+            base: 'border-2 border-purple-500 text-purple-600 dark:border-purple-600 dark:text-purple-500',
+            hover: 'hover:text-white hover:bg-purple-500 dark:hover:text-white dark:hover:bg-purple-600',
+            focus: 'focus:text-white focus:bg-purple-500 dark:focus:text-white dark:focus:bg-purple-600',
+            active: 'active:bg-purple-600 active:border-purple-600 dark:active:bg-purple-700 dark:active:border-purple-700',
+        },
+        pink: {
+            base: 'border-2 border-pink-500 text-pink-600 dark:border-pink-600 dark:text-pink-500',
+            hover: 'hover:text-white hover:bg-pink-500 dark:hover:text-white dark:hover:bg-pink-600',
+            focus: 'focus:text-white focus:bg-pink-500 dark:focus:text-white dark:focus:bg-pink-600',
+            active: 'active:bg-pink-600 active:border-pink-600 dark:active:bg-pink-700 dark:active:border-pink-700',
+        },
+        rose: {
+            base: 'border-2 border-rose-500 text-rose-600 dark:border-rose-600 dark:text-rose-500',
+            hover: 'hover:text-white hover:bg-rose-500 dark:hover:text-white dark:hover:bg-rose-600',
+            focus: 'focus:text-white focus:bg-rose-500 dark:focus:text-white dark:focus:bg-rose-600',
+            active: 'active:bg-rose-600 active:border-rose-600 dark:active:bg-rose-700 dark:active:border-rose-700',
+        },
+    },
+    text: {
+        slate: {
+            base: 'bg-transparent',
+            hover: 'hover:bg-slate-200 dark:hover:bg-slate-700',
+            focus: 'focus:bg-slate-200 dark:focus:bg-slate-700',
+            active: 'active:bg-slate-300 dark:active:bg-slate-800',
+        },
+        gray: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-gray-500 dark:hover:bg-gray-600',
+            focus: 'focus:text-white focus:bg-gray-500 dark:focus:bg-gray-600',
+            active: 'active:bg-gray-600 dark:active:bg-gray-700',
+        },
+        zinc: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-zinc-500 dark:hover:bg-zinc-600',
+            focus: 'focus:text-white focus:bg-zinc-500 dark:focus:bg-zinc-600',
+            active: 'active:bg-zinc-600 dark:active:bg-zinc-700',
+        },
+        neutral: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-neutral-500 dark:hover:bg-neutral-600',
+            focus: 'focus:text-white focus:bg-neutral-500 dark:focus:bg-neutral-600',
+            active: 'active:bg-neutral-600 dark:active:bg-neutral-700',
+        },
+        stone: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-stone-500 dark:hover:bg-stone-600',
+            focus: 'focus:text-white focus:bg-stone-500 dark:focus:bg-stone-600',
+            active: 'active:bg-stone-600 dark:active:bg-stone-700',
+        },
+        red: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-red-500 dark:hover:bg-red-600',
+            focus: 'focus:text-white focus:bg-red-500 dark:focus:bg-red-600',
+            active: 'active:bg-red-600 dark:active:bg-red-700',
+        },
+        orange: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-orange-500 dark:hover:bg-orange-600',
+            focus: 'focus:text-white focus:bg-orange-500 dark:focus:bg-orange-600',
+            active: 'active:bg-orange-600 dark:active:bg-orange-700',
+        },
+        amber: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-amber-500 dark:hover:bg-amber-600',
+            focus: 'focus:text-white focus:bg-amber-500 dark:focus:bg-amber-600',
+            active: 'active:bg-amber-600 dark:active:bg-amber-700',
+        },
+        yellow: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-yellow-500 dark:hover:bg-yellow-600',
+            focus: 'focus:text-white focus:bg-yellow-500 dark:focus:bg-yellow-600',
+            active: 'active:bg-yellow-600 dark:active:bg-yellow-700',
+        },
+        lime: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-lime-500 dark:hover:bg-lime-600',
+            focus: 'focus:text-white focus:bg-lime-500 dark:focus:bg-lime-600',
+            active: 'active:bg-lime-600 dark:active:bg-lime-700',
+        },
+        green: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-green-500 dark:hover:bg-green-600',
+            focus: 'focus:text-white focus:bg-green-500 dark:focus:bg-green-600',
+            active: 'active:bg-green-600 dark:active:bg-green-700',
+        },
+        emerald: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-emerald-500 dark:hover:bg-emerald-600',
+            focus: 'focus:text-white focus:bg-emerald-500 dark:focus:bg-emerald-600',
+            active: 'active:bg-emerald-600 dark:active:bg-emerald-700',
+        },
+        teal: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-teal-500 dark:hover:bg-teal-600',
+            focus: 'focus:text-white focus:bg-teal-500 dark:focus:bg-teal-600',
+            active: 'active:bg-teal-600 dark:active:bg-teal-700',
+        },
+        cyan: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-cyan-500 dark:hover:bg-cyan-600',
+            focus: 'focus:text-white focus:bg-cyan-500 dark:focus:bg-cyan-600',
+            active: 'active:bg-cyan-600 dark:active:bg-cyan-700',
+        },
+        sky: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-sky-500 dark:hover:bg-sky-600',
+            focus: 'focus:text-white focus:bg-sky-500 dark:focus:bg-sky-600',
+            active: 'active:bg-sky-600 dark:active:bg-sky-700',
+        },
+        blue: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-blue-500 dark:hover:bg-blue-600',
+            focus: 'focus:text-white focus:bg-blue-500 dark:focus:bg-blue-600',
+            active: 'active:bg-blue-600 dark:active:bg-blue-700',
+        },
+        indigo: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-indigo-500 dark:hover:bg-indigo-600',
+            focus: 'focus:text-white focus:bg-indigo-500 dark:focus:bg-indigo-600',
+            active: 'active:bg-indigo-600 dark:active:bg-indigo-700',
+        },
+        violet: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-violet-500 dark:hover:bg-violet-600',
+            focus: 'focus:text-white focus:bg-violet-500 dark:focus:bg-violet-600',
+            active: 'active:bg-violet-600 dark:active:bg-violet-700',
+        },
+        fuchsia: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-fuchsia-500 dark:hover:bg-fuchsia-600',
+            focus: 'focus:text-white focus:bg-fuchsia-500 dark:focus:bg-fuchsia-600',
+            active: 'active:bg-fuchsia-600 dark:active:bg-fuchsia-700',
+        },
+        purple: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-purple-500 dark:hover:bg-purple-600',
+            focus: 'focus:text-white focus:bg-purple-500 dark:focus:bg-purple-600',
+            active: 'active:bg-purple-600 dark:active:bg-purple-700',
+        },
+        pink: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-pink-500 dark:hover:bg-pink-600',
+            focus: 'focus:text-white focus:bg-pink-500 dark:focus:bg-pink-600',
+            active: 'active:bg-pink-600 dark:active:bg-pink-700',
+        },
+        rose: {
+            base: 'bg-transparent',
+            hover: 'hover:text-white hover:bg-rose-500 dark:hover:bg-rose-600',
+            focus: 'focus:text-white focus:bg-rose-500 dark:focus:bg-rose-600',
+            active: 'active:bg-rose-600 dark:active:bg-rose-700',
+        },
+    },
+};
+const sizeClassNames = {
+    small: {
+        base: 'gap-1.5 text-sm h-7',
+        withChildren: 'px-2',
+        icon: {
+            base: 'h-4 w-4',
+            withChildren: 'h-3 w-3',
+        },
+    },
+    medium: {
+        base: 'gap-2 text-base h-10',
+        withChildren: 'px-2.5',
+        icon: {
+            base: 'h-5 w-5',
+            withChildren: 'h-4 w-4',
+        },
+    },
+};
+const Button = react.forwardRef((_a, ref) => {
+    var { children, className, size = 'medium', color = 'slate', variant = 'filled', rounded, prefixIcon: PrefixIcon, suffixIcon: SuffixIcon } = _a, props = __rest(_a, ["children", "className", "size", "color", "variant", "rounded", "prefixIcon", "suffixIcon"]);
+    return (jsxRuntime.jsxs("button", Object.assign({ className: cn('relative flex aspect-square items-center font-medium duration-200', sizeClassNames[size].base, variantClassNames[variant][color].base, rounded ? 'rounded-full' : 'rounded-md', props.disabled
+            ? 'cursor-not-allowed opacity-50'
+            : props.onClick
+                ? `${variantClassNames[variant][color].hover} ${variantClassNames[variant][color].focus} ${variantClassNames[variant][color].active}`
+                : 'cursor-default', children ? `${sizeClassNames[size].withChildren} aspect-[initial]` : 'justify-center', className), type: "button" }, props, { ref: ref, children: [PrefixIcon && (jsxRuntime.jsx(PrefixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base })), children, SuffixIcon && (jsxRuntime.jsx(SuffixIcon, { className: children ? sizeClassNames[size].icon.withChildren : sizeClassNames[size].icon.base }))] })));
+});
+
+const Badge = react.forwardRef((_a, ref) => {
+    var { size = 'small' } = _a, props = __rest(_a, ["size"]);
+    return jsxRuntime.jsx(Button, Object.assign({ size: size }, props, { ref: ref }));
+});
+
+const Block = react.forwardRef((_a, ref) => {
+    var { children, className, centered, container, fullWidth, fullHeight } = _a, props = __rest(_a, ["children", "className", "centered", "container", "fullWidth", "fullHeight"]);
+    return (jsxRuntime.jsx("div", Object.assign({ className: cn(centered && 'mx-auto', container && 'container', fullWidth && 'w-full', fullHeight && 'h-full', className) }, props, { ref: ref, children: children })));
+});
+
+const Card = react.forwardRef((_a, ref) => {
+    var { children, className } = _a, blockProps = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx(Block, Object.assign({ className: cn('rounded-lg border p-3 dark:border-slate-700 dark:bg-slate-900', className) }, blockProps, { ref: ref, children: children })));
+});
+
+const directionClasses = {
+    row: {
+        normal: 'flex-row',
+        reverse: 'flex-row-reverse',
+    },
+    column: {
+        normal: 'flex-col',
+        reverse: 'flex-col-reverse',
+    },
+};
+const alignClasses = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+};
+const justifyClasses = {
+    start: 'justify-start',
+    center: 'justify-center',
+    between: 'justify-between',
+    end: 'justify-end',
+};
+const Flex = react.forwardRef((_a, ref) => {
+    var { children, className, reverse, wrap, direction = 'row', align = 'start', justify = 'start' } = _a, blockProps = __rest(_a, ["children", "className", "reverse", "wrap", "direction", "align", "justify"]);
+    return (jsxRuntime.jsx(Block, Object.assign({ className: cn('flex gap-3', wrap && 'flex-wrap', directionClasses[direction][reverse ? 'reverse' : 'normal'], alignClasses[align], justifyClasses[justify], className) }, blockProps, { ref: ref, children: children })));
+});
+
+dayjs__default["default"].extend(localeData__default["default"]);
+function useDays(locale = 'en') {
+    return react.useMemo(() => {
+        dayjs__default["default"].extend(localeData__default["default"]).locale(locale);
+        const names = dayjs__default["default"].weekdays();
+        const shortNames = dayjs__default["default"].weekdaysShort();
+        return names.map((name, index) => ({ name, shortName: shortNames[index], index }));
+    }, [locale]);
+}
+
+function useLongPress(callback, ms = 100) {
+    const [startLongPress, setStartLongPress] = react.useState(false);
+    react.useEffect(() => {
+        let timerId;
+        if (startLongPress) {
+            timerId = setTimeout(callback, ms);
+        }
+        else if (timerId) {
+            clearTimeout(timerId);
+        }
+        return () => {
+            timerId && clearTimeout(timerId);
+        };
+    }, [callback, ms, startLongPress]);
+    return {
+        onMouseDown: () => setStartLongPress(true),
+        onMouseUp: () => setStartLongPress(false),
+        onMouseLeave: () => setStartLongPress(false),
+        onTouchStart: () => setStartLongPress(true),
+        onTouchEnd: () => setStartLongPress(false),
+    };
+}
+
+dayjs__default["default"].extend(localeData__default["default"]);
+function useMonths(locale = 'en') {
+    return react.useMemo(() => {
+        dayjs__default["default"].extend(localeData__default["default"]).locale(locale);
+        const names = dayjs__default["default"].months();
+        const shortNames = dayjs__default["default"].monthsShort();
+        return names.map((name, index) => ({ name, shortName: shortNames[index], index }));
+    }, [locale]);
+}
+
+function useOnSwipe(element, onSwipe, minSwipeDistance = 50) {
+    react.useEffect(() => {
+        if (!element.current)
+            return;
+        const elem = element.current;
+        let touchStartX = 0, touchEndX = 0, touchStartY = 0, touchEndY = 0;
+        const onTouchStart = (event) => {
+            touchStartX = event.targetTouches[0].clientX;
+            touchStartY = event.targetTouches[0].clientY;
+        };
+        const onTouchMove = (event) => {
+            touchEndX = event.targetTouches[0].clientX;
+            touchEndY = event.targetTouches[0].clientY;
+        };
+        const onTouchEnd = (event) => {
+            const distanceX = touchEndX - touchStartX;
+            const distanceY = touchEndY - touchStartY;
+            if (Math.abs(distanceX) > minSwipeDistance && Math.abs(distanceY) > minSwipeDistance)
+                return;
+            if (Math.abs(distanceX) > minSwipeDistance) {
+                if (onSwipe(distanceX > 0 ? 'right' : 'left') !== false) {
+                    event.stopPropagation();
+                }
+            }
+            if (Math.abs(distanceY) > minSwipeDistance) {
+                if (onSwipe(distanceY > 0 ? 'bottom' : 'up') !== false) {
+                    event.stopPropagation();
+                }
+            }
+        };
+        elem.addEventListener('touchstart', onTouchStart);
+        elem.addEventListener('touchmove', onTouchMove);
+        elem.addEventListener('touchend', onTouchEnd);
+        return () => {
+            elem.removeEventListener('touchstart', onTouchStart);
+            elem.removeEventListener('touchmove', onTouchMove);
+            elem.removeEventListener('touchend', onTouchEnd);
+        };
+    }, [element, minSwipeDistance, onSwipe]);
+}
+
+function useOutsideClick(ref, callback) {
+    react.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if ((ref === null || ref === void 0 ? void 0 : ref.current) && !ref.current.contains(event.target)) {
+                callback();
+            }
+        };
+        // Bind the event listener
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            // Unbind the event listener on clean up
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [ref, callback]);
+}
+
+function usePagination(currentIndex, totalPages) {
+    return react.useMemo(() => {
+        const result = [];
+        result.push(currentIndex);
+        if (totalPages > 7 && currentIndex > 4) {
+            for (let index = currentIndex - 1; index >= Math.min(totalPages - 4, currentIndex - 1); index--) {
+                result.push(index);
+            }
+            result.push('...');
+            result.push(1);
+        }
+        else {
+            for (let index = currentIndex - 1; index > 0; index--) {
+                result.push(index);
+            }
+        }
+        result.reverse();
+        if (totalPages > 7 && totalPages - currentIndex >= 4) {
+            for (let index = currentIndex + 1; index <= Math.max(5, currentIndex + 1); index++) {
+                result.push(index);
+            }
+            result.push('...');
+            result.push(totalPages);
+        }
+        else {
+            for (let index = currentIndex + 1; index <= totalPages; index++) {
+                result.push(index);
+            }
+        }
+        return result;
+    }, [currentIndex, totalPages]);
+}
+
+const Tooltip = ({ children, className, content, asChild, placement }) => (jsxRuntime.jsx(TooltipPrimitive__namespace.Provider, { delayDuration: 200, children: jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { children: [jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: asChild, children: children }), jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: jsxRuntime.jsx(TooltipPrimitive__namespace.Content, { className: cn('animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', 'z-[101] overflow-hidden rounded-md border bg-white px-3 py-1.5 text-sm shadow-md dark:border-slate-700 dark:bg-slate-800 dark:text-white', className), side: placement, sideOffset: 5, children: content }) })] }) }));
+
+const Label = ({ children, className, description, required, hasErrors, htmlFor, }) => {
+    return !children ? null : (jsxRuntime.jsxs("label", { className: cn('flex items-center gap-1 font-medium', {
+            'text-slate-700 dark:text-slate-100': !hasErrors,
+            'text-red-600 dark:text-red-500': hasErrors,
+        }, className), htmlFor: htmlFor, children: [jsxRuntime.jsxs("span", { children: [children, " ", required && jsxRuntime.jsx("span", { className: "text-red-600", children: "*" })] }), description && (jsxRuntime.jsx(Tooltip, { content: jsxRuntime.jsx("div", { className: "max-w-xs", children: description }), placement: "right", children: jsxRuntime.jsx(lucideReact.HelpCircle, { className: "h-5 w-5" }) }))] }));
+};
+
+const inputClasses = {
+    base: {
+        input: 'dark:bg-transparent peer w-full border focus:ring-0 rounded-md overflow-hidden text-ellipsis',
+        disabled: 'opacity-60',
+    },
+    withoutErrors: {
+        input: 'border-slate-300 dark:border-slate-700 focus:border-blue-500 dark:focus:border-blue-600 dark:placeholder-slate-400',
+        extension: 'bg-white dark:bg-transparent border-slate-300 text-slate-600 peer-focus:border-blue-500 dark:peer-focus:border-blue-600 dark:border-slate-700 dark:text-white',
+    },
+    withErrors: {
+        input: 'text-red-600 border-red-500 placeholder-red-500 focus:border-red-500 dark:border-red-600 dark:peer-focus:border-red-600 dark:placeholder-red-600',
+        extension: 'text-red-600 border-red-500 peer-focus:border-red-500 dark:border-red-600 dark:peer-focus:border-red-600 dark:text-red-500',
+    },
+};
+const sizeClasses = {
+    small: {
+        label: 'text-sm',
+        input: 'text-sm py-1 px-2 h-7',
+        checkbox: {
+            input: 'w-4 h-4',
+            wrapper: 'h-6 gap-1',
+        },
+        suffix: {
+            wrapper: 'h-7',
+            icon: 'h-4 w-4 mx-1.5',
+        },
+        clearButton: {
+            base: 'h-5 w-5',
+            withSuffixIcon: 'right-8',
+        },
+    },
+    medium: {
+        label: 'text-base',
+        input: 'text-base py-2 px-3 h-10',
+        checkbox: {
+            input: 'w-5 h-5',
+            wrapper: 'h-8 gap-2',
+        },
+        suffix: {
+            wrapper: 'h-10',
+            icon: 'w-5 h-5 mx-2',
+        },
+        clearButton: {
+            base: 'h-6 w-6',
+            withSuffixIcon: 'right-12',
+        },
+    },
+};
+const BasicInput = react.forwardRef(function BasicInput(_a, ref) {
+    var { className, inputClassName, extensionClassName, type = 'text', label, description, size = 'medium', hasErrors, clearable, suffixIcon: SuffixIcon, onClear, onSuffixIconClick } = _a, props = __rest(_a, ["className", "inputClassName", "extensionClassName", "type", "label", "description", "size", "hasErrors", "clearable", "suffixIcon", "onClear", "onSuffixIconClick"]);
+    const id = react.useId();
+    const memoLabel = react.useMemo(() => label && (jsxRuntime.jsx(Label, { className: sizeClasses[size].label, htmlFor: id, description: description, required: props.required, hasErrors: hasErrors, children: label })), [description, hasErrors, id, label, props.required, size]);
+    const handleClear = (event) => {
+        var _a;
+        event.stopPropagation();
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, { target: { value: '', checked: false } });
+    };
+    return (jsxRuntime.jsxs("div", { className: cn('w-full dark:text-white', className), children: [type !== 'checkbox' && memoLabel, jsxRuntime.jsxs("div", { className: cn('group relative flex', {
+                    'mt-1': label && type !== 'checkbox',
+                    [`items-center ${sizeClasses[size].checkbox.wrapper}`]: type === 'checkbox',
+                }), title: type !== 'textarea' && typeof props.value === 'string' ? props.value : undefined, children: [type === 'textarea' ? (jsxRuntime.jsx("textarea", Object.assign({ id: id, className: cn(inputClasses.base.input, sizeClasses[size].input.replace(/ h-\d/g, ''), {
+                            [inputClasses.base.disabled]: props.disabled,
+                            [inputClasses.withoutErrors.input]: !hasErrors,
+                            [inputClasses.withErrors.input]: hasErrors,
+                            'rounded-r-none border-r-0': SuffixIcon,
+                        }, inputClassName) }, props, { value: props.value, ref: ref }))) : type === 'checkbox' ? (jsxRuntime.jsx("input", Object.assign({ id: id, className: cn('rounded border-slate-300 text-blue-600', sizeClasses[size].checkbox.input, {
+                            [inputClasses.base.disabled]: props.disabled,
+                            'bg-red-100': hasErrors,
+                        }, inputClassName), type: type, checked: Boolean(props.value) }, props, { ref: ref }))) : (jsxRuntime.jsx("input", Object.assign({ id: id, className: cn(inputClasses.base.input, sizeClasses[size].input, {
+                            [inputClasses.base.disabled]: props.disabled,
+                            [inputClasses.withoutErrors.input]: !hasErrors,
+                            [inputClasses.withErrors.input]: hasErrors,
+                            'rounded-r-none border-r-0': SuffixIcon,
+                        }, inputClassName), type: type !== null && type !== void 0 ? type : 'text' }, props, { value: props.value, ref: ref }))), type === 'checkbox' && memoLabel, clearable && (onClear || !!props.value) && !props.disabled && (jsxRuntime.jsx(lucideReact.XIcon, { className: cn('absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-full bg-white p-0.5 opacity-0 duration-200 hover:bg-slate-200 group-hover:opacity-100 dark:bg-slate-700 dark:hover:bg-slate-800', sizeClasses[size].clearButton.base, {
+                            [sizeClasses[size].clearButton.withSuffixIcon]: SuffixIcon,
+                        }), onClick: handleClear, onPointerDown: (event) => event.stopPropagation() })), type !== 'checkbox' && SuffixIcon && (jsxRuntime.jsx(BasicInputExtension, { className: extensionClassName, hasErrors: hasErrors, size: size, disabled: props.disabled, onClick: onSuffixIconClick, children: jsxRuntime.jsx(SuffixIcon, { className: sizeClasses[size].suffix.icon }) }))] })] }));
+});
+const BasicInputExtension = ({ children, className, size, hasErrors, disabled, onClick }) => (jsxRuntime.jsx("div", { className: cn('flex aspect-square items-center justify-center rounded-r-md border border-l-0', sizeClasses[size].suffix.wrapper, {
+        [inputClasses.base.disabled]: disabled,
+        [inputClasses.withoutErrors.extension]: !hasErrors,
+        [inputClasses.withErrors.extension]: hasErrors,
+        'cursor-pointer': onClick,
+    }, className), onClick: !disabled ? onClick : undefined, onPointerDown: (event) => event.stopPropagation(), children: children }));
+
+const CheckboxInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "checkbox" }, props, { ref: ref }))));
+
+const EmailInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "email" }, props, { suffixIcon: lucideReact.AtSignIcon, ref: ref }))));
+
+const NumberInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "number" }, props, { ref: ref }))));
+
+const PasswordInput = react.forwardRef((props, ref) => {
+    const [type, setType] = react.useState('password');
+    const toggleType = () => setType((type) => (type === 'text' ? 'password' : 'text'));
+    return (jsxRuntime.jsx(BasicInput, Object.assign({ type: type }, props, { suffixIcon: type === 'password' ? lucideReact.EyeIcon : lucideReact.EyeOffIcon, onSuffixIconClick: toggleType, ref: ref })));
+});
+
+const TextareaInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "textarea" }, props, { ref: ref }))));
+
+const TextInput = react.forwardRef((props, ref) => (jsxRuntime.jsx(BasicInput, Object.assign({ type: "text" }, props, { ref: ref }))));
+
+const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDate, }) => {
+    const days = useDays(locale);
+    const monthDays = react.useMemo(() => {
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysInMonthArr = [];
+        for (let i = 1; i <= daysInMonth; i++) {
+            daysInMonthArr.push(i);
+        }
+        return daysInMonthArr;
+    }, [month, year]);
+    const prefixDays = react.useMemo(() => {
+        const firstDay = new Date(year, month);
+        const dayOfWeek = firstDay.getDay();
+        firstDay.setDate(firstDay.getDate() - 1);
+        const lastDay = firstDay.getDate();
+        const prefixDays = [];
+        for (let i = 1; i <= dayOfWeek; i++) {
+            prefixDays.push(lastDay - dayOfWeek + i);
+        }
+        return prefixDays;
+    }, [month, year]);
+    const suffixDays = react.useMemo(() => {
+        const lastDay = new Date(year, month + 1);
+        lastDay.setDate(lastDay.getDate() - 1);
+        const dayOfWeek = lastDay.getDay();
+        const suffixDays = [];
+        for (let i = dayOfWeek; i < 6; i++) {
+            suffixDays.push(i - dayOfWeek + 1);
+        }
+        return suffixDays;
+    }, [month, year]);
+    const setDayNumber = react.useCallback((newDay, newMonth = month, newYear = year) => () => {
+        const newDate = new Date(newYear, newMonth, newDay, date.getHours(), date.getMinutes());
+        if (minDate) {
+            const _minDate = new Date(minDate);
+            if (_minDate.getFullYear() === newYear &&
+                _minDate.getMonth() === newMonth &&
+                _minDate.getDate() === newDay) {
+                newDate.setHours(Math.max(newDate.getHours(), _minDate.getHours()));
+                if (newDate.getHours() === _minDate.getHours()) {
+                    newDate.setMinutes(Math.max(newDate.getMinutes(), _minDate.getMinutes()));
+                }
+            }
+        }
+        if (maxDate) {
+            const _maxDate = new Date(maxDate);
+            if (_maxDate.getFullYear() === newYear &&
+                _maxDate.getMonth() === newMonth &&
+                _maxDate.getDate() === newDay) {
+                newDate.setHours(Math.min(newDate.getHours(), _maxDate.getHours()));
+                if (newDate.getHours() === _maxDate.getHours()) {
+                    newDate.setMinutes(Math.min(newDate.getMinutes(), _maxDate.getMinutes()));
+                }
+            }
+        }
+        setNewDate(newDate);
+    }, [date, maxDate, minDate, month, setNewDate, year]);
+    return (jsxRuntime.jsxs("div", { className: "gap-1 px-3 py-2", children: [jsxRuntime.jsx("div", { className: "grid grid-cols-7", children: days.map((day, index) => (jsxRuntime.jsx("span", { className: "flex h-8 w-8 items-center justify-center text-xs uppercase text-slate-500 dark:text-slate-400", children: day.shortName }, index))) }), jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-1", children: [prefixDays.map((dayNumber, index) => (jsxRuntime.jsx(Day, { value: value, day: dayNumber, month: (month - 1 + 12) % 12, year: month % 12 ? year : year - 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber }, `${dayNumber}-${index}`))), monthDays.map((dayNumber, index) => (jsxRuntime.jsx(Day, { value: value, day: dayNumber, month: month, year: year, minDate: minDate, maxDate: maxDate, primary: true, setDayNumber: setDayNumber }, `${dayNumber}-${index}`))), suffixDays.map((dayNumber, index) => (jsxRuntime.jsx(Day, { value: value, day: dayNumber, month: (month + 1) % 12, year: (month + 1) % 12 ? year : year + 1, minDate: minDate, maxDate: maxDate, setDayNumber: setDayNumber }, `${dayNumber}-${index}`)))] })] }));
+};
+const Day = ({ value, day, month, year, minDate, maxDate, primary, setDayNumber, }) => {
+    const dayDate = react.useMemo(() => new Date(year, month, day), [day, month, year]);
+    const isSelectable = react.useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'day') >= 0) &&
+        (!maxDate || compareDates(dayDate, new Date(maxDate), 'day') <= 0), [minDate, dayDate, maxDate]);
+    const isSelected = react.useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'day'), [dayDate, value]);
+    const isEqualToday = react.useMemo(() => !compareDates(dayDate, new Date(), 'day'), [dayDate]);
+    return (jsxRuntime.jsx("div", { className: cn('mx-auto flex h-8 w-8 items-center justify-center rounded-lg text-sm', {
+            'border-2 border-blue-500': isEqualToday,
+            'bg-blue-500 text-white': isSelected,
+            'cursor-pointer': isSelectable,
+            'hover:bg-blue-100 dark:hover:bg-blue-800': isSelectable && !isSelected,
+            'text-slate-400 dark:text-slate-500': !isSelectable || !primary,
+        }), onClick: isSelectable ? setDayNumber(day, month, year) : undefined, children: day }));
+};
+
+const MonthsView = ({ date, value, year, minDate, maxDate, locale, selectMonth, }) => {
+    const months = useMonths(locale);
+    return (jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1 px-3 py-2", children: months.map((month, index) => (jsxRuntime.jsx(Month, { date: date, value: value, shortName: month.shortName, month: index, year: year, minDate: minDate, maxDate: maxDate, selectMonth: selectMonth }, index))) }));
+};
+const Month = ({ date, value, shortName, month, year, minDate, maxDate, selectMonth, }) => {
+    const dayDate = react.useMemo(() => new Date(year, month, date.getDate(), date.getHours(), date.getMinutes()), [date, month, year]);
+    const isSelectable = react.useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'month') >= 0) &&
+        (!maxDate || compareDates(dayDate, new Date(maxDate), 'month') <= 0), [dayDate, minDate, maxDate]);
+    const isSelected = react.useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'month'), [dayDate, value]);
+    const isEqualThisMonth = react.useMemo(() => !compareDates(dayDate, new Date(), 'month'), [dayDate]);
+    return (jsxRuntime.jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded border py-3 text-sm', {
+            'border-blue-500': isEqualThisMonth,
+            'border-transparent': !isEqualThisMonth,
+            'bg-blue-500 text-white': isSelected,
+            'cursor-pointer': isSelectable,
+            'hover:bg-blue-100 dark:hover:bg-blue-900': isSelectable && !isSelected,
+            'text-slate-400 dark:text-slate-500': !isSelectable,
+        }), onClick: isSelectable ? selectMonth(month) : undefined, children: shortName }));
+};
+
+const YearsView = ({ date, value, years, minDate, maxDate, selectYear, }) => (jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-1 px-3 py-2", children: years.map((year, index) => (jsxRuntime.jsx(Year, { date: date, value: value, year: year, minDate: minDate, maxDate: maxDate, selectYear: selectYear }, index))) }));
+const Year = ({ date, value, year, minDate, maxDate, selectYear }) => {
+    const dayDate = react.useMemo(() => new Date(year, date.getMonth(), date.getDate(), date.getHours(), date.getMinutes()), [date, year]);
+    const isSelectable = react.useMemo(() => (!minDate || compareDates(dayDate, new Date(minDate), 'year') >= 0) &&
+        (!maxDate || compareDates(dayDate, new Date(maxDate), 'year') <= 0), [dayDate, minDate, maxDate]);
+    const isSelected = react.useMemo(() => !!value && !compareDates(dayDate, new Date(value), 'year'), [dayDate, value]);
+    const isEqualThisYear = react.useMemo(() => !compareDates(dayDate, new Date(), 'year'), [dayDate]);
+    return (jsxRuntime.jsx("div", { className: cn('mx-auto flex w-14 items-center justify-center rounded border py-3 text-sm', {
+            'border-blue-500': isEqualThisYear,
+            'border-transparent': !isEqualThisYear,
+            'bg-blue-500 text-white': isSelected,
+            'cursor-pointer': isSelectable,
+            'hover:bg-blue-100 dark:hover:bg-blue-900': isSelectable && !isSelected,
+            'text-slate-400 dark:text-slate-500': !isSelectable,
+        }), onClick: isSelectable ? selectYear(year) : undefined, children: year }));
+};
+
+const DateSelector = ({ date, value, minDate, maxDate, locale, calendarView, setCalendarView, setNewDate, }) => {
+    const months = useMonths(locale);
+    const [month, setMonth] = react.useState(date.getMonth());
+    const [year, setYear] = react.useState(date.getFullYear());
+    const [yearOffset, setYearOffset] = react.useState(0);
+    react.useEffect(() => {
+        setMonth(date.getMonth());
+        setYear(date.getFullYear());
+    }, [date]);
+    const yearsRange = react.useMemo(() => {
+        const yearsRangeArr = [];
+        for (let i = year + yearOffset - 6; i < year + yearOffset + 6; i++) {
+            yearsRangeArr.push(i);
+        }
+        return yearsRangeArr;
+    }, [year, yearOffset]);
+    const editCalendarViewPage = (type) => () => {
+        let newYear = year;
+        let newMonth = month;
+        if (calendarView === 'days') {
+            if (type === 'add') {
+                newMonth = (month + 1) % 12;
+                newYear = newMonth ? year : year + 1;
+            }
+            else {
+                newMonth = (month - 1 + 12) % 12;
+                newYear = month % 12 ? year : year - 1;
+            }
+        }
+        else if (calendarView === 'months') {
+            newYear = year + (type === 'add' ? 1 : -1);
+        }
+        else {
+            setYearOffset((yearOffset) => yearOffset + (type === 'add' ? 12 : -12));
+        }
+        setYear(newYear);
+        setMonth(newMonth);
+    };
+    const nextCalendarView = () => {
+        setMonth(date.getMonth());
+        setYear(date.getFullYear());
+        if (calendarView === 'days') {
+            setCalendarView('months');
+        }
+        else if (calendarView === 'months') {
+            setCalendarView('years');
+        }
+        else {
+            setCalendarView('days');
+        }
+    };
+    const selectMonth = (month) => () => {
+        setMonth(month);
+        setCalendarView('days');
+    };
+    const selectYear = (year) => () => {
+        setYear(year);
+        setCalendarView('months');
+    };
+    return (jsxRuntime.jsxs("div", { className: "select-none", children: [jsxRuntime.jsxs("div", { className: "flex justify-between px-3 pt-2", children: [jsxRuntime.jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('subtract'), children: jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "h-5 w-5 text-slate-400" }) }), jsxRuntime.jsxs("div", { className: "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition duration-100 ease-in-out hover:bg-slate-100 dark:hover:bg-slate-700", onClick: nextCalendarView, children: [calendarView === 'days' && jsxRuntime.jsx("span", { className: "capitalize", children: months[month].name }), calendarView !== 'years' ? (jsxRuntime.jsx("span", { className: "text-slate-500 dark:text-slate-300", children: year })) : (jsxRuntime.jsxs("span", { className: "text-slate-500 dark:text-slate-300", children: [yearsRange[0], " - ", yearsRange[11]] }))] }), jsxRuntime.jsx("div", { className: "flex cursor-pointer items-center justify-center rounded-lg px-1 transition duration-100 ease-in-out hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-slate-700", onClick: editCalendarViewPage('add'), children: jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-5 w-5 text-slate-400" }) })] }), calendarView === 'days' ? (jsxRuntime.jsx(DaysView, { date: date, value: value, month: month, year: year, minDate: minDate, maxDate: maxDate, locale: locale, setNewDate: setNewDate })) : calendarView === 'months' ? (jsxRuntime.jsx(MonthsView, { date: date, value: value, year: year, minDate: minDate, maxDate: maxDate, locale: locale, selectMonth: selectMonth })) : (jsxRuntime.jsx(YearsView, { date: date, value: value, years: yearsRange, minDate: minDate, maxDate: maxDate, selectYear: selectYear }))] }));
+};
+
+const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, }) => {
+    const editDateField = (field, diff) => () => {
+        const newDate = dayjs__default["default"](date).add(diff, field).toDate();
+        if (minDate && compareDates(newDate, new Date(minDate), 'minute') < 0)
+            return;
+        if (maxDate && compareDates(newDate, new Date(maxDate), 'minute') > 0)
+            return;
+        setNewDate(newDate);
+    };
+    const increaseHours = useLongPress(editDateField('hours', 1));
+    const decreaseHours = useLongPress(editDateField('hours', -1));
+    const increaseMinutes = useLongPress(editDateField('minutes', step));
+    const decreaseMinutes = useLongPress(editDateField('minutes', -step));
+    const onWheel = (field) => (event) => editDateField(field, (event.deltaY < 0 ? 1 : -1) * (field === 'hours' ? 1 : step))();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("label", { className: "text-sm text-slate-700 dark:text-slate-300", children: "Time" }), jsxRuntime.jsxs("div", { className: "flex flex-grow justify-center gap-2", children: [jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsxRuntime.jsx(lucideReact.ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', 1) }, increaseHours)), jsxRuntime.jsx(lucideReact.ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('hours', -1) }, decreaseHours))] }), jsxRuntime.jsxs("div", { className: "flex items-center rounded-lg border border-slate-100 bg-slate-100 text-right dark:border-slate-700 dark:bg-slate-800", children: [jsxRuntime.jsx("span", { className: "flex px-2", onWheel: onWheel('hours'), children: date.getHours().toString().padStart(2, '0') }), jsxRuntime.jsx("span", { children: ":" }), jsxRuntime.jsx("span", { className: "flex px-2", onWheel: onWheel('minutes'), children: date.getMinutes().toString().padStart(2, '0') })] }), jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center", children: [jsxRuntime.jsx(lucideReact.ChevronUpIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', step) }, increaseMinutes)), jsxRuntime.jsx(lucideReact.ChevronDownIcon, Object.assign({ className: "h-4 w-4 rounded hover:bg-slate-100 dark:hover:bg-slate-700", onClick: editDateField('minutes', -step) }, decreaseMinutes))] })] })] }));
+};
+
+const DateTimeInput = react.forwardRef((_a, ref) => {
+    var { className, value, clearable, type = 'datetime-local', step = 1, minDate, maxDate, hasErrors, onChange, onBlur, displayFormat = 'dddd, MMMM Do YYYY, HH:mm:ss', displayLocale = 'en' } = _a, props = __rest(_a, ["className", "value", "clearable", "type", "step", "minDate", "maxDate", "hasErrors", "onChange", "onBlur", "displayFormat", "displayLocale"]);
+    const [isOpen, setIsOpen] = react.useState();
+    const [calendarView, setCalendarView] = react.useState('days');
+    const date = react.useMemo(() => {
+        const result = value
+            ? new Date(value)
+            : new Date(Math.min(Math.max(new Date(minDate !== null && minDate !== void 0 ? minDate : Date.now()).getTime(), Date.now()), new Date(maxDate !== null && maxDate !== void 0 ? maxDate : Date.now()).getTime()));
+        result.setMinutes(result.getMinutes() - ((result.getMinutes() + step) % step));
+        return result;
+    }, [step, maxDate, minDate, value]);
+    const displayDate = react.useMemo(() => value && getDisplayDate(date, displayFormat, displayLocale), [date, value, displayFormat, displayLocale]);
+    const calendarRef = react.useRef(null);
+    useOutsideClick(calendarRef, () => setIsOpen(false));
+    react.useEffect(() => {
+        if (!isOpen) {
+            setCalendarView('days');
+        }
+    }, [isOpen]);
+    const setNewDate = (newDate) => {
+        if (type === 'date') {
+            newDate = dayjs__default["default"](newDate).startOf('day').toDate();
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
+        if (type === 'date') {
+            setIsOpen(false);
+        }
+    };
+    const clearDate = () => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+    };
+    const handleOnClick = () => {
+        var _a;
+        if (props.readOnly)
+            return;
+        setIsOpen((open) => !open);
+        (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleOnBlur = (event) => {
+        if (props.readOnly)
+            return;
+        setIsOpen(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
+    const handleOnKeyUp = (event) => {
+        switch (event.key) {
+            case ' ':
+                setIsOpen(!isOpen);
+                break;
+            case 'Escape':
+                setIsOpen(false);
+        }
+    };
+    return (jsxRuntime.jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [jsxRuntime.jsx(BasicInput, Object.assign({}, props, { type: "text", readOnly: true, value: displayDate !== null && displayDate !== void 0 ? displayDate : '', hasErrors: hasErrors, onClick: handleOnClick, onKeyUp: handleOnKeyUp, clearable: clearable && !!displayDate, onClear: clearDate, suffixIcon: (type === null || type === void 0 ? void 0 : type.includes('date')) ? lucideReact.CalendarIcon : lucideReact.ClockIcon })), isOpen && (jsxRuntime.jsxs("div", { className: "absolute z-20 mt-2 flex origin-top-left flex-col rounded-md border bg-white shadow duration-200 dark:border-slate-700 dark:bg-slate-900 dark:text-white", tabIndex: 0, onBlur: handleOnBlur, ref: calendarRef, children: [(type === null || type === void 0 ? void 0 : type.includes('date')) && (jsxRuntime.jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate })), calendarView === 'days' && (jsxRuntime.jsxs("div", { className: "flex select-none items-center justify-end gap-2 px-3 py-2", children: [(type === null || type === void 0 ? void 0 : type.includes('time')) && (jsxRuntime.jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate })), jsxRuntime.jsx("div", { className: "cursor-pointer rounded-lg border border-transparent p-1 text-sm font-bold uppercase text-blue-600 transition duration-100 ease-in-out hover:bg-slate-100 dark:text-blue-500 dark:hover:bg-slate-700", onClick: () => setIsOpen(false), children: "OK" })] }))] }))] }));
+});
+
+const ListContent = react.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(Block, Object.assign({ className: cn('z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md dark:border-slate-700 dark:bg-slate-900 dark:text-white', className), ref: ref }, props)));
+});
+const labelSizeClasses = {
+    small: 'p-1 text-sm',
+    medium: 'px-2 py-1.5',
+};
+const ListItem = react.forwardRef((_a, ref) => {
+    var { className, size = 'medium', inset } = _a, props = __rest(_a, ["className", "size", "inset"]);
+    return (jsxRuntime.jsx(Flex, Object.assign({ className: cn(labelSizeClasses[size], 'relative cursor-default select-none gap-2 rounded-md outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-700', inset && 'pl-8', className), align: "center", ref: ref }, props)));
+});
+const ListLabel = react.forwardRef((_a, ref) => {
+    var { className, size = 'medium', inset } = _a, props = __rest(_a, ["className", "size", "inset"]);
+    return (jsxRuntime.jsx(Block, Object.assign({ className: cn(labelSizeClasses[size], 'font-semibold text-slate-900 dark:text-slate-300', inset && 'pl-8', className), ref: ref }, props)));
+});
+const ListIndicator = react.forwardRef((_a, ref) => {
+    var { className, icon: Icon, iconClassName } = _a, props = __rest(_a, ["className", "icon", "iconClassName"]);
+    return (jsxRuntime.jsx(Flex, Object.assign({ className: cn('absolute left-2 h-3.5 w-3.5', className), align: "center", justify: "center", ref: ref }, props, { children: jsxRuntime.jsx(Icon, { className: iconClassName }) })));
+});
+const ListIcon = react.forwardRef(({ className, icon: Icon }, ref) => jsxRuntime.jsx(Icon, { className: cn('h-4 w-4', className), ref: ref }));
+const ListSeparator = react.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(Block, Object.assign({ className: cn('-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-700', className), ref: ref }, props)));
+});
+const List = Object.assign(ListContent, {
+    Item: ListItem,
+    Label: ListLabel,
+    Indicator: ListIndicator,
+    Icon: ListIcon,
+    Separator: ListSeparator,
+});
+
+const DropdownMenuTrigger = DropdownMenuPrimitive__namespace.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive__namespace.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive__namespace.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive__namespace.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive__namespace.RadioGroup;
+const DropdownMenuSubTrigger = react.forwardRef((_a, ref) => {
+    var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
+    return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.SubTrigger, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsxs(List.Item, { className: className, inset: inset, children: [children, jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "ml-auto h-4 w-4" })] }) })));
+});
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive__namespace.SubTrigger.displayName;
+const DropdownMenuSubContent = react.forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: jsxRuntime.jsx(DropdownMenuPrimitive__namespace.SubContent, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsx(List, { className: className, children: children }) })) }));
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive__namespace.SubContent.displayName;
+const DropdownMenuContent = react.forwardRef((_a, ref) => {
+    var { className, children, sideOffset = 4 } = _a, props = __rest(_a, ["className", "children", "sideOffset"]);
+    return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Portal, { children: jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Content, Object.assign({ ref: ref, sideOffset: sideOffset }, props, { asChild: true, children: jsxRuntime.jsx(List, { className: className, children: children }) })) }));
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive__namespace.Content.displayName;
+const DropdownMenuItem = react.forwardRef((_a, ref) => {
+    var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
+    return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Item, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsx(List.Item, { inset: inset, className: className, children: children }) })));
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
+const DropdownMenuCheckboxItem = react.forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.CheckboxItem, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsxs(List.Item, { inset: true, className: className, children: [jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { asChild: true, children: jsxRuntime.jsx(List.Indicator, { icon: lucideReact.CheckIcon, iconClassName: "h-4 w-4" }) }), children] }) })));
+});
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
+const DropdownMenuRadioItem = react.forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.RadioItem, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsxs(List.Item, { inset: true, className: className, children: [jsxRuntime.jsx(DropdownMenuPrimitive__namespace.ItemIndicator, { asChild: true, children: jsxRuntime.jsx(List.Indicator, { icon: lucideReact.CircleIcon, iconClassName: "h-2 w-2 fill-current" }) }), children] }) })));
+});
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive__namespace.RadioItem.displayName;
+const DropdownMenuLabel = react.forwardRef((_a, ref) => {
+    var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
+    return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Label, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsx(List.Label, { className: className, inset: inset, children: children }) })));
+});
+DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
+const DropdownMenuSeparator = react.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Separator, Object.assign({ ref: ref }, props, { asChild: true, children: jsxRuntime.jsx(List.Separator, { className: className }) })));
+});
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
+const DropdownMenuShortcut = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("span", Object.assign({ className: cn('ml-auto text-xs tracking-widest text-slate-500', className) }, props)));
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+const DropdownMenu = Object.assign(DropdownMenuPrimitive__namespace.Root, {
+    Trigger: DropdownMenuTrigger,
+    Content: DropdownMenuContent,
+    Item: DropdownMenuItem,
+    CheckboxItem: DropdownMenuCheckboxItem,
+    RadioItem: DropdownMenuRadioItem,
+    Label: DropdownMenuLabel,
+    Separator: DropdownMenuSeparator,
+    Icon: List.Icon,
+    Shortcut: DropdownMenuShortcut,
+    Group: DropdownMenuGroup,
+    Portal: DropdownMenuPortal,
+    Sub: DropdownMenuSub,
+    SubContent: DropdownMenuSubContent,
+    SubTrigger: DropdownMenuSubTrigger,
+    RadioGroup: DropdownMenuRadioGroup,
+});
+
+const SelectInput = react.forwardRef((_a, ref) => {
+    var { className, items, renderItem = (item) => item.label, value, multiple, clearable, allowAddition, onNewItemAdded, search, searchPredicate = (item, searchValue) => item.label.toLowerCase().includes(searchValue.toLowerCase()), selectPredicate = (a, b) => a === b, onChange, readOnly, parentRef } = _a, props = __rest(_a, ["className", "items", "renderItem", "value", "multiple", "clearable", "allowAddition", "onNewItemAdded", "search", "searchPredicate", "selectPredicate", "onChange", "readOnly", "parentRef"]);
+    const [open, setOpen] = react.useState(false);
+    const [searchValue, setSearchValue] = react.useState('');
+    const pureItems = react.useMemo(() => items.flatMap((item) => (item.group ? item.items : [item])), [items]);
+    const selectedItems = react.useMemo(() => value
+        ? !multiple
+            ? pureItems.find((item) => selectPredicate(item.value, value))
+                ? [pureItems.find((item) => selectPredicate(item.value, value))]
+                : []
+            : Array.isArray(value)
+                ? value
+                    .map((v) => pureItems.find((item) => selectPredicate(item.value, v)))
+                    .filter(Boolean)
+                : []
+        : [], [multiple, pureItems, selectPredicate, value]);
+    const filteredItems = react.useMemo(() => !search || !searchValue
+        ? items
+        : items.flatMap((item) => item.group
+            ? item.items.some((subItem) => subItem.label.toLowerCase().includes(searchValue.toLowerCase()))
+                ? [
+                    Object.assign(Object.assign({}, item), { items: item.items.filter((subItem) => subItem.label.toLowerCase().includes(searchValue.toLowerCase())) }),
+                ]
+                : []
+            : item.label.toLowerCase().includes(searchValue.toLowerCase())
+                ? [item]
+                : []), [items, search, searchValue]);
+    const text = react.useMemo(() => selectedItems.length
+        ? !multiple
+            ? selectedItems[0].label
+            : selectedItems.map((item) => item.label).join(', ')
+        : undefined, [multiple, selectedItems]);
+    const selectedMap = react.useMemo(() => selectedItems.reduce((prev, curr) => (Object.assign(Object.assign({}, prev), { [curr.id]: curr.value })), {}), [selectedItems]);
+    const handleOnSelect = react.useCallback((id) => {
+        var _a, _b, _c;
+        !multiple && setOpen(false);
+        if (!multiple) {
+            if (clearable && ((_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.id) === id) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+            }
+            else {
+                onChange === null || onChange === void 0 ? void 0 : onChange((_b = pureItems.find((item) => item.id === id)) === null || _b === void 0 ? void 0 : _b.value);
+            }
+        }
+        else if (multiple) {
+            if (selectedMap[id]) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(selectedItems.filter((item) => item.id !== id).map((item) => item.value));
+            }
+            else {
+                onChange === null || onChange === void 0 ? void 0 : onChange([
+                    ...selectedItems.map((item) => item.value),
+                    (_c = pureItems.find((item) => item.id === id)) === null || _c === void 0 ? void 0 : _c.value,
+                ].filter(Boolean));
+            }
+        }
+    }, [clearable, multiple, onChange, pureItems, selectedItems, selectedMap]);
+    const handleOnSearchValueChange = (event) => setSearchValue(event.target.value);
+    const clearSearchValue = () => setSearchValue('');
+    const handleOnClear = () => {
+        if (readOnly)
+            return;
+        onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+    };
+    const handleOnAddItemClicked = () => {
+        onNewItemAdded === null || onNewItemAdded === void 0 ? void 0 : onNewItemAdded(searchValue);
+        setSearchValue('');
+    };
+    const GroupComponent = multiple ? DropdownMenu.Group : DropdownMenu.RadioGroup;
+    const ItemComponent = multiple ? DropdownMenu.CheckboxItem : DropdownMenu.RadioItem;
+    const RenderOption = react.useCallback((option) => {
+        return (jsxRuntime.jsx(ItemComponent, { className: cn('w-full cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-700', {
+                'bg-slate-200 dark:bg-slate-700': selectedMap[option.id],
+            }), value: String(option.id), checked: !!selectedMap[option.id], onSelect: (event) => {
+                multiple && event.preventDefault();
+                handleOnSelect(option.id);
+            }, children: jsxRuntime.jsx("span", { children: renderItem(option, !!selectedMap[option.id]) }) }));
+    }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
+    return (jsxRuntime.jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsxRuntime.jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: jsxRuntime.jsx(TextInput, Object.assign({ className: "[&>div>*]:cursor-pointer", inputClassName: "text-left" }, props, { value: text !== null && text !== void 0 ? text : '', clearable: clearable && !!selectedItems.length, onClear: handleOnClear, suffixIcon: lucideReact.ChevronDownIcon, ref: ref, readOnly: true })) }), jsxRuntime.jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsxRuntime.jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
+                        (allowAddition && searchValue ? (jsxRuntime.jsxs("button", { className: "rounded bg-slate-100 text-center hover:bg-slate-200 dark:bg-slate-900/30 dark:hover:bg-slate-700/30", onClick: handleOnAddItemClicked, children: ["Add '", searchValue, "'"] })) : (jsxRuntime.jsx("div", { className: "text-center text-slate-500", children: "No items." }))), jsxRuntime.jsx(GroupComponent, { className: "flex flex-col gap-1 overflow-auto", value: !multiple && selectedItems.length ? String(selectedItems[0].id) : undefined, children: filteredItems.map((item, index) => item.group ? (jsxRuntime.jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [jsxRuntime.jsx(DropdownMenu.Label, { className: "sticky top-0 z-[51] w-full rounded-md border bg-white py-1 dark:bg-slate-900", children: item.label }), item.items.map((subItem) => (jsxRuntime.jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsxRuntime.jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsxRuntime.jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
+});
+
+const FormGroup = ({ className, label, children }) => (jsxRuntime.jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-300', className), direction: "column", fullWidth: true, children: [jsxRuntime.jsx("div", { className: "absolute right-0 top-0 rounded-bl-lg rounded-tr-lg bg-slate-500 px-2 py-1 font-medium text-white dark:bg-slate-900 dark:text-white", children: label }), children] }));
+
+function withForm(Component) {
+    return react.forwardRef((_a, ref) => {
+        var { name, pattern, validate } = _a, props = __rest(_a, ["name", "pattern", "validate"]);
+        const { control } = reactHookForm.useFormContext();
+        return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
+                required: props.required,
+                min: props.min,
+                max: props.max,
+                minLength: props.minLength,
+                maxLength: props.maxLength,
+                pattern,
+                validate,
+            }, render: ({ field, fieldState }) => {
+                var _a, _b;
+                return (jsxRuntime.jsx(Component, Object.assign({}, props, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: (_b = field.disabled) !== null && _b !== void 0 ? _b : props.disabled, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
+            } }));
+    });
+}
+const FormInputs = {
+    Text: withForm(TextInput),
+    Email: withForm(EmailInput),
+    Password: withForm(PasswordInput),
+    Textarea: withForm(TextareaInput),
+    Number: withForm(NumberInput),
+    Checkbox: withForm(CheckboxInput),
+    DateTime: withForm(DateTimeInput),
+    Select: withForm(SelectInput),
+};
+
+const HintRoot = react.forwardRef(({ children }, ref) => (jsxRuntime.jsx(Block, { className: "relative", ref: ref, children: children })));
+HintRoot.displayName = 'HintRoot';
+const dotSizeClassNames = {
+    small: {
+        base: 'h-2 w-2',
+        top: '-top-0.5',
+        right: '-right-0.5',
+        bottom: '-bottom-0.5',
+        left: '-left-0.5',
+    },
+    medium: {
+        base: 'h-3 w-3',
+        top: '-top-1',
+        right: '-right-1',
+        bottom: '-bottom-1',
+        left: '-left-1',
+    },
+};
+const colorClassNames = {
+    slate: 'bg-slate-500 dark:bg-slate-600',
+    gray: 'bg-gray-500 dark:bg-gray-600',
+    zinc: 'bg-zinc-500 dark:bg-zinc-600',
+    neutral: 'bg-neutral-500 dark:bg-neutral-600',
+    stone: 'bg-stone-500 dark:bg-stone-600',
+    red: 'bg-red-500 dark:bg-red-600',
+    orange: 'bg-orange-500 dark:bg-orange-600',
+    amber: 'bg-amber-500 dark:bg-amber-600',
+    yellow: 'bg-yellow-500 dark:bg-yellow-600',
+    lime: 'bg-lime-500 dark:bg-lime-600',
+    green: 'bg-green-500 dark:bg-green-600',
+    emerald: 'bg-emerald-500 dark:bg-emerald-600',
+    teal: 'bg-teal-500 dark:bg-teal-600',
+    cyan: 'bg-cyan-500 dark:bg-cyan-600',
+    sky: 'bg-sky-500 dark:bg-sky-600',
+    blue: 'bg-blue-500 dark:bg-blue-600',
+    indigo: 'bg-indigo-500 dark:bg-indigo-600',
+    violet: 'bg-violet-500 dark:bg-violet-600',
+    fuchsia: 'bg-fuchsia-500 dark:bg-fuchsia-600',
+    purple: 'bg-purple-500 dark:bg-purple-600',
+    pink: 'bg-pink-500 dark:bg-pink-600',
+    rose: 'bg-rose-500 dark:bg-rose-600',
+};
+const HintDot = react.forwardRef(({ size = 'medium', placement = 'top-right', color = 'green', ping }, ref) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Block, { className: cn('absolute rounded-full ', colorClassNames[color], dotSizeClassNames[size].base, {
+                [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].left}`]: placement === 'top-left',
+                [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].right}`]: placement === 'top-right',
+                [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].right}`]: placement === 'bottom-right',
+                [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].left}`]: placement === 'bottom-left',
+            }), ref: ref }), ping && (jsxRuntime.jsx(Block, { className: cn('absolute animate-ping rounded-full ', colorClassNames[color], dotSizeClassNames[size].base, {
+                [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].left}`]: placement === 'top-left',
+                [`${dotSizeClassNames[size].top} ${dotSizeClassNames[size].right}`]: placement === 'top-right',
+                [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].right}`]: placement === 'bottom-right',
+                [`${dotSizeClassNames[size].bottom} ${dotSizeClassNames[size].left}`]: placement === 'bottom-left',
+            }) }))] })));
+HintDot.displayName = 'HintDot';
+const badgeSizeClassNames = {
+    top: 'top-0 -translate-y-1/2',
+    right: 'right-2 translate-x-full',
+    bottom: 'bottom-0 translate-y-1/2',
+    left: 'left-2 -translate-x-full',
+};
+const HintBadge = react.forwardRef((_a, ref) => {
+    var { className, size = 'small', placement = 'top-right' } = _a, props = __rest(_a, ["className", "size", "placement"]);
+    return (jsxRuntime.jsx(Badge, Object.assign({ className: cn('absolute px-1', size === 'small' ? 'h-5' : 'h-6', {
+            [`${badgeSizeClassNames.top} ${badgeSizeClassNames.left}`]: placement === 'top-left',
+            [`${badgeSizeClassNames.top} ${badgeSizeClassNames.right}`]: placement === 'top-right',
+            [`${badgeSizeClassNames.bottom} ${badgeSizeClassNames.right}`]: placement === 'bottom-right',
+            [`${badgeSizeClassNames.bottom} ${badgeSizeClassNames.left}`]: placement === 'bottom-left',
+        }, className), size: size }, props, { ref: ref })));
+});
+HintBadge.displayName = 'HintBadge';
+const Hint = Object.assign(HintRoot, { Dot: HintDot, Badge: HintBadge });
+
+const Pagination = ({ disabled, pageSize = 10, currentPage, totalItems, setCurrentPage, }) => {
+    const totalPages = react.useMemo(() => Math.ceil(totalItems / pageSize), [pageSize, totalItems]);
+    const pagination = usePagination(currentPage + 1, totalPages);
+    react.useEffect(() => {
+        setCurrentPage((page) => Math.min(page, Math.max(0, totalPages - 1)));
+    }, [setCurrentPage, totalPages]);
+    return (jsxRuntime.jsx(Flex, { justify: "end", children: jsxRuntime.jsxs(Flex, { className: "h-10 gap-0 divide-x rounded-md border border-slate-300 bg-white dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800", children: [jsxRuntime.jsx(PaginationItem, { title: "First page", onClick: () => setCurrentPage(0), disabled: !currentPage || disabled, children: jsxRuntime.jsx(lucideReact.ChevronsLeftIcon, { className: "h-5 w-5" }) }), jsxRuntime.jsx(PaginationItem, { title: "Previous page", onClick: () => currentPage && setCurrentPage(currentPage - 1), disabled: !currentPage || disabled, children: jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: "h-5 w-5" }) }), pagination.map((page, index) => (jsxRuntime.jsx(PaginationItem, { active: page !== '...' && page - 1 === currentPage, title: page !== '...' ? `Page ${page}` : undefined, onClick: page !== '...' ? () => setCurrentPage(page - 1) : undefined, disabled: page === '...' || disabled, children: page }, index))), jsxRuntime.jsx(PaginationItem, { title: "Next page", onClick: () => currentPage + 1 < totalPages && setCurrentPage(currentPage + 1), disabled: currentPage + 1 === totalPages || disabled, children: jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-5 w-5" }) }), jsxRuntime.jsx(PaginationItem, { title: "Last page", onClick: () => setCurrentPage(Math.floor(totalItems && !(totalItems % pageSize)
+                        ? (totalItems - 1) / pageSize
+                        : totalItems / pageSize)), disabled: currentPage + 1 === totalPages || disabled, children: jsxRuntime.jsx(lucideReact.ChevronsRightIcon, { className: "h-5 w-5" }) })] }) }));
+};
+const PaginationItem = (_a) => {
+    var { children, active, disabled } = _a, props = __rest(_a, ["children", "active", "disabled"]);
+    return (jsxRuntime.jsx(Flex, Object.assign({ className: cn('w-10 first:rounded-l-md last:rounded-r-md', {
+            'text-slate-400 dark:text-slate-500': disabled,
+            'bg-slate-100 dark:bg-slate-900': active,
+            'cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-900': !disabled && props.onClick,
+        }), align: "center", justify: "center", fullHeight: true }, props, { children: children })));
+};
+
+const Spinner = ({ className, fullScreen }) => (jsxRuntime.jsx("div", { className: cn('flex w-full items-center justify-center bg-white dark:bg-slate-900', {
+        'h-screen': fullScreen,
+        'h-full': !fullScreen,
+    }, className), children: jsxRuntime.jsxs("svg", { className: "h-8 w-8 animate-spin text-black dark:text-white", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }) }));
+
+const $Table = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx(Flex, { className: cn('overflow-auto rounded-lg', className), fullWidth: true, children: jsxRuntime.jsx("table", Object.assign({ className: "min-w-full divide-y divide-slate-200 dark:divide-slate-800 dark:text-white" }, props, { children: children })) }));
+};
+const TableHead = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("thead", Object.assign({ className: cn('border-b bg-slate-100 text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300', className) }, props, { children: children })));
+};
+const TableHeadCell = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("th", Object.assign({ className: cn('px-4 py-2 font-medium', className) }, props, { children: children })));
+};
+const TableBody = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("tbody", Object.assign({ className: cn('divide-y divide-slate-200 bg-slate-50/80 dark:divide-slate-700 dark:bg-slate-900', className) }, props, { children: children })));
+};
+const TableRow = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (jsxRuntime.jsx("tr", Object.assign({}, props, { children: children })));
+};
+const TableCell = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("td", Object.assign({ className: cn('px-4 py-2', className) }, props, { children: children })));
+};
+const TableFooter = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (jsxRuntime.jsx("tfoot", Object.assign({ className: cn('bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-300', className) }, props, { children: children })));
+};
+const Table = Object.assign($Table, {
+    Head: TableHead,
+    HeadCell: TableHeadCell,
+    Body: TableBody,
+    Row: TableRow,
+    Cell: TableCell,
+    Footer: TableFooter,
+});
+
+const possiblePageSize = [5, 10, 25, 50, 100, 500, 1000];
+function defaultRender(item, field) {
+    return resolveTargetObject(item, field.split('.'));
+}
+function DataTable({ className, columns, rows, sorting, pagination, actions = [], isLoading, rowExtraContent, noDataMessage, onRowClick, rowClassName, }) {
+    var _a;
+    const footerRef = react.useRef(null);
+    const [expandedRows, setExpandedRows] = react.useState({});
+    const allRowsExpanded = react.useMemo(() => rowExtraContent ? rows.every((row) => expandedRows[rowExtraContent.idGetter(row)]) : false, [expandedRows, rowExtraContent, rows]);
+    const _columns = react.useMemo(() => (Array.isArray(columns) ? columns : Object.values(columns)).filter((column) => !column.hide), [columns]);
+    const columnsLength = react.useMemo(() => (rowExtraContent ? 1 : 0) + _columns.length + Math.min(1, actions.length), [_columns.length, actions.length, rowExtraContent]);
+    const handleSorting = (field, comparator) => () => {
+        if (!sorting)
+            return;
+        if (!sorting.sorting) {
+            sorting.onSortingChange({
+                field,
+                direction: 'asc',
+                comparator: comparator !== null && comparator !== void 0 ? comparator : generalComparator,
+            });
+        }
+        else {
+            const newDirection = sorting.sorting.field === field && sorting.sorting.direction === 'asc' ? 'desc' : 'asc';
+            sorting.onSortingChange({
+                field,
+                direction: newDirection,
+                comparator: comparator !== null && comparator !== void 0 ? comparator : generalComparator,
+            });
+        }
+    };
+    const handleActionClicked = (action, item, rowIndex) => (event) => {
+        event.stopPropagation();
+        action.onClick(item, rowIndex);
+    };
+    const handleRowClicked = (item, rowIndex) => (event) => {
+        event.stopPropagation();
+        if (onRowClick) {
+            return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item, rowIndex);
+        }
+        if (rowExtraContent) {
+            handleExpandRow(rowExtraContent.idGetter(item))(event);
+        }
+    };
+    const handleExpandAll = (event) => {
+        event.stopPropagation();
+        if (!rowExtraContent)
+            return;
+        setExpandedRows((prev) => (Object.assign(Object.assign({}, prev), rows.reduce((acc, row) => (Object.assign(Object.assign({}, acc), { [rowExtraContent.idGetter(row)]: !allRowsExpanded })), {}))));
+    };
+    const handleExpandRow = (id) => (event) => {
+        event.stopPropagation();
+        setExpandedRows((prev) => (rowExtraContent === null || rowExtraContent === void 0 ? void 0 : rowExtraContent.singleExpansion) ? { [id]: !prev[id] } : Object.assign(Object.assign({}, prev), { [id]: !prev[id] }));
+    };
+    return (jsxRuntime.jsxs(Table, { className: cn('border dark:border-slate-700', className), children: [jsxRuntime.jsx(Table.Head, { className: "sticky top-0 z-10", children: jsxRuntime.jsxs(Table.Row, { children: [rowExtraContent && (jsxRuntime.jsx(Table.HeadCell, { align: "center", children: !rowExtraContent.singleExpansion && (jsxRuntime.jsx(ExpandButton, { folded: !allRowsExpanded, foldComponent: lucideReact.ChevronsDownUpIcon, unfoldComponent: lucideReact.ChevronsUpDownIcon, onClick: handleExpandAll })) })), _columns.map((column, columnIndex) => {
+                            var _a, _b, _c;
+                            return (jsxRuntime.jsxs(Table.HeadCell, { className: cn('group relative', {
+                                    'cursor-pointer': !isLoading && sorting && !column.noSorting,
+                                }), align: (_a = column.align) !== null && _a !== void 0 ? _a : 'left', onClick: !isLoading && sorting && !column.noSorting
+                                    ? handleSorting(column.field, column.comparator)
+                                    : undefined, children: [column.header, sorting &&
+                                        !column.noSorting &&
+                                        (((_b = sorting.sorting) === null || _b === void 0 ? void 0 : _b.field) !== column.field ? (jsxRuntime.jsx(lucideReact.ArrowUpDownIcon, { className: "absolute top-1/2 float-right ml-1 hidden h-4 w-4 -translate-y-1/2 group-hover:inline-block" })) : ((_c = sorting.sorting) === null || _c === void 0 ? void 0 : _c.direction) === 'asc' ? (jsxRuntime.jsx(lucideReact.SortAscIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })) : (jsxRuntime.jsx(lucideReact.SortDescIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })))] }, columnIndex));
+                        }), actions.length > 0 && jsxRuntime.jsx(Table.HeadCell, { align: "center", children: "Actions" })] }) }), jsxRuntime.jsxs(Table.Body, { className: "relative", children: [isLoading && (jsxRuntime.jsx(Table.Row, { children: jsxRuntime.jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
+                                absolute: rows.length,
+                            }), colSpan: columnsLength, children: jsxRuntime.jsx(Spinner, { className: "bg-white/50 py-4 dark:bg-slate-700/50" }) }) })), !isLoading && !rows.length && (jsxRuntime.jsx(Table.Row, { children: jsxRuntime.jsx(Table.Cell, { colSpan: columnsLength, children: jsxRuntime.jsx(Flex, { className: "text-slate-500", justify: "center", children: noDataMessage !== null && noDataMessage !== void 0 ? noDataMessage : 'No data' }) }) })), rows.map((item, rowIndex) => [
+                        jsxRuntime.jsxs(Table.Row, { className: cn({
+                                'cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800': onRowClick || rowExtraContent,
+                            }, rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(item, rowIndex)), onClick: handleRowClicked(item, rowIndex), children: [rowExtraContent && (jsxRuntime.jsx(Table.Cell, { className: "w-min", align: "center", children: jsxRuntime.jsx(ExpandButton, { folded: !expandedRows[rowExtraContent.idGetter(item)], foldComponent: lucideReact.MinusIcon, unfoldComponent: lucideReact.PlusIcon, onClick: handleExpandRow(rowExtraContent.idGetter(item)) }) })), _columns.map((column, columnIndex) => {
+                                    var _a, _b, _c;
+                                    return (jsxRuntime.jsx(Table.Cell, { className: column.className, align: (_a = column.align) !== null && _a !== void 0 ? _a : 'left', children: (_c = (_b = column.render) === null || _b === void 0 ? void 0 : _b.call(column, item, rowIndex)) !== null && _c !== void 0 ? _c : defaultRender(item, column.field) }, columnIndex));
+                                }), actions.length > 0 && (jsxRuntime.jsx(Table.Cell, { className: "py-3", children: jsxRuntime.jsx(Flex, { align: "center", justify: "center", children: actions
+                                            .filter((action) => { var _a; return typeof action.hide === 'boolean' ? !action.hide : !((_a = action.hide) === null || _a === void 0 ? void 0 : _a.call(action, item)); })
+                                            .map((action, actionIndex) => {
+                                            var _a;
+                                            const notification = (_a = action.hasNotification) === null || _a === void 0 ? void 0 : _a.call(action, item, rowIndex);
+                                            return (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(Button, { size: "small", prefixIcon: action.icon, color: action.color, onClick: handleActionClicked(action, item, rowIndex), children: action.label }), notification &&
+                                                        (notification === true ? (jsxRuntime.jsx(Hint.Dot, {})) : notification.type === 'dot' ? (jsxRuntime.jsx(Hint.Dot, Object.assign({}, notification.props))) : (jsxRuntime.jsx(Hint.Badge, Object.assign({}, notification.props))))] }, actionIndex));
+                                        }) }) }))] }, rowIndex),
+                        rowExtraContent && expandedRows[rowExtraContent.idGetter(item)] && (jsxRuntime.jsx(Table.Row, { children: jsxRuntime.jsx(Table.Cell, { className: "p-0", colSpan: columnsLength, children: jsxRuntime.jsx(rowExtraContent.component, { item: item, rowIndex: rowIndex }) }) }, `${rowIndex}-expanded`)),
+                    ])] }), pagination && (jsxRuntime.jsx(Table.Footer, { className: "sticky -bottom-px", children: jsxRuntime.jsx(Table.Row, { className: "border-t dark:border-slate-700", children: jsxRuntime.jsx(Table.Cell, { colSpan: columnsLength, children: jsxRuntime.jsxs(Flex, { justify: "end", ref: footerRef, children: [jsxRuntime.jsx(Pagination, Object.assign({ disabled: isLoading }, pagination)), pagination.onPageSizeChange && (jsxRuntime.jsx(SelectInput, { className: "w-32", value: (_a = pagination.pageSize) !== null && _a !== void 0 ? _a : 10, items: possiblePageSize.map((pageSize) => ({
+                                        id: pageSize,
+                                        label: String(pageSize),
+                                        value: pageSize,
+                                    })), onChange: (newPageSize) => { var _a; return newPageSize && ((_a = pagination.onPageSizeChange) === null || _a === void 0 ? void 0 : _a.call(pagination, newPageSize)); }, disabled: isLoading, parentRef: footerRef }))] }) }) }) }))] }));
+}
+const ExpandButton = ({ folded, foldComponent, unfoldComponent, onClick, }) => {
+    const Icon = folded ? unfoldComponent : foldComponent;
+    return (jsxRuntime.jsx(Icon, { className: "h-6 w-6 cursor-pointer rounded p-1 hover:bg-slate-300 hover:dark:bg-slate-600", onClick: onClick }));
+};
+
+const $Dialog = DialogPrimitive__namespace.Root;
+const DialogTrigger = DialogPrimitive__namespace.Trigger;
+const DialogPortal = DialogPrimitive__namespace.Portal;
+const DialogClose = DialogPrimitive__namespace.Close;
+const DialogOverlay = react.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, Object.assign({ ref: ref, className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm', className) }, props)));
+});
+DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+const DialogContent = react.forwardRef((_a, ref) => {
+    var { className, fullScreen, children } = _a, props = __rest(_a, ["className", "fullScreen", "children"]);
+    return (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx(DialogOverlay, {}), jsxRuntime.jsxs(DialogPrimitive__namespace.Content, Object.assign({ ref: ref, className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]', 'fixed left-[50%] top-[50%] z-50 flex w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-3 rounded-lg border bg-white p-3 shadow-md duration-200 xl:gap-4 xl:p-4 dark:border-slate-700 dark:bg-slate-900 dark:text-white', className, fullScreen && 'h-full max-h-none w-full max-w-none rounded-none') }, props, { children: [children, jsxRuntime.jsx(DialogPrimitive__namespace.Close, { className: "!absolute right-1 top-1 opacity-70 ring-offset-white transition-opacity hover:opacity-100 disabled:pointer-events-none xl:right-2 xl:top-2", asChild: true, children: jsxRuntime.jsx(Button, { prefixIcon: lucideReact.XIcon, size: "small", variant: "text" }) })] }))] }));
+});
+DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
+const DialogHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ className: cn('flex flex-col space-y-1.5 text-left', className) }, props)));
+};
+DialogHeader.displayName = 'DialogHeader';
+const DialogFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ className: cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className) }, props)));
+};
+DialogFooter.displayName = 'DialogFooter';
+const DialogTitle = react.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(DialogPrimitive__namespace.Title, Object.assign({ ref: ref, className: cn('text-lg font-semibold leading-none tracking-tight', className) }, props)));
+});
+DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+const DialogDescription = react.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(DialogPrimitive__namespace.Description, Object.assign({ ref: ref, className: cn('text-sm text-slate-600 dark:text-slate-400', className) }, props)));
+});
+DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
+const Dialog = Object.assign($Dialog, {
+    Portal: DialogPortal,
+    Overlay: DialogOverlay,
+    Close: DialogClose,
+    Trigger: DialogTrigger,
+    Content: DialogContent,
+    Header: DialogHeader,
+    Footer: DialogFooter,
+    Title: DialogTitle,
+    Description: DialogDescription,
+});
+
+const ConfirmDialog = ({ open, title, children, yesLabel, noLabel, onConfirm, onClose, }) => (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(Dialog.Content, { onPointerDownOutside: (event) => event.preventDefault(), children: [jsxRuntime.jsx(Dialog.Header, { children: jsxRuntime.jsx(Dialog.Title, { children: title }) }), children, jsxRuntime.jsxs(Dialog.Footer, { children: [jsxRuntime.jsx(Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "red", children: noLabel !== null && noLabel !== void 0 ? noLabel : 'No' }) }), jsxRuntime.jsx(Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "green", onClick: onConfirm, children: yesLabel !== null && yesLabel !== void 0 ? yesLabel : 'Yes' }) })] })] }) }));
+
+const FormDialog = ({ className, open, title, form, children, submitLabel = 'Submit', cancelLabel = 'Cancel', extraAction, onSubmit, onInvalid, onClose, }) => {
+    const id = react.useId();
+    const handleSubmit = (data, event) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            yield onSubmit(data, event);
+        }
+        catch (_a) {
+            // do nothering
+        }
+    });
+    return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(Dialog.Content, { className: className, onPointerDownOutside: (event) => event.preventDefault(), children: [jsxRuntime.jsx(Dialog.Header, { children: jsxRuntime.jsx(Dialog.Title, { children: title }) }), jsxRuntime.jsx(reactHookForm.FormProvider, Object.assign({}, form, { children: jsxRuntime.jsx("form", { id: `form-${id}`, onSubmit: form.handleSubmit(handleSubmit, onInvalid), children: children }) })), jsxRuntime.jsxs(Dialog.Footer, { className: "w-full sm:justify-between", children: [extraAction, jsxRuntime.jsxs(Dialog.Footer, { className: "ml-auto", children: [jsxRuntime.jsx(Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "red", children: cancelLabel }) }), jsxRuntime.jsx(Button, { color: "green", type: "submit", form: `form-${id}`, disabled: form.formState.isSubmitting, children: submitLabel })] })] })] }) }));
+};
+
+function ListSorter({ className, items, idResolver, renderer, onChange, }) {
+    const adaptedItems = react.useMemo(() => items.map((value, index) => ({ id: idResolver(value, index), value })), [idResolver, items]);
+    const sensors = core.useSensors(core.useSensor(core.PointerSensor), core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates }));
+    const onDragEnd = ({ active, over }) => {
+        if (!over || active.id === over.id)
+            return;
+        const sortedItems = structuredClone(adaptedItems);
+        const oldIndex = sortedItems.findIndex((item) => item.id === active.id);
+        const newIndex = sortedItems.findIndex((item) => item.id === over.id);
+        const [removed] = sortedItems.splice(oldIndex, 1);
+        sortedItems.splice(newIndex, 0, removed);
+        for (const [index, { value }] of Object.entries(sortedItems)) {
+            if (typeof value === 'object') {
+                value.rank = +index;
+            }
+        }
+        onChange(sortedItems.map(({ value }) => value));
+    };
+    return (jsxRuntime.jsx(core.DndContext, { sensors: sensors, modifiers: [modifiers.restrictToFirstScrollableAncestor], collisionDetection: core.closestCenter, onDragEnd: onDragEnd, children: jsxRuntime.jsx(sortable.SortableContext, { items: adaptedItems, strategy: sortable.verticalListSortingStrategy, children: jsxRuntime.jsx("div", { className: className, children: adaptedItems.map((item, index) => (jsxRuntime.jsx(SortableItem, { item: item, index: index, renderer: renderer }, item.id))) }) }) }));
+}
+function SortableItem({ item, index, renderer, }) {
+    const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({ id: item.id });
+    const style = { transform: utilities.CSS.Transform.toString(transform), transition };
+    return (jsxRuntime.jsx("div", Object.assign({ ref: setNodeRef, style: style }, attributes, { children: renderer(item.value, index, listeners) })));
+}
+
+function ListSorterDialog({ className, open, title, items, idResolver, renderer, cancelLabel, submitLabel, onSubmit, onClose, }) {
+    const [sortedItems, setSortedItems] = react.useState(structuredClone(items));
+    react.useEffect(() => {
+        return () => {
+            setSortedItems(structuredClone(items));
+        };
+    }, [items]);
+    const preFinish = () => onSubmit(sortedItems);
+    const customRenderer = (item, index, listeners) => (jsxRuntime.jsxs(Flex, { align: "center", className: "gap-4 p-4 focus:outline-none dark:bg-slate-900 hover:dark:bg-slate-800", children: [jsxRuntime.jsx(Flex, Object.assign({ align: "center", justify: "center", className: "cursor-move rounded-lg p-2 hover:bg-slate-200 dark:hover:bg-slate-700" }, listeners, { children: jsxRuntime.jsx(lucideReact.ArrowUpDownIcon, { className: "h-5 w-5" }) })), renderer(item, index, listeners)] }));
+    return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(Dialog.Content, { className: cn('max-h-[90dvh]', className), onPointerDownOutside: (event) => event.preventDefault(), children: [jsxRuntime.jsx(Dialog.Header, { children: title }), jsxRuntime.jsx(ListSorter, { className: "divide-y overflow-auto rounded-lg border dark:divide-slate-700 dark:border-slate-700 dark:text-white", items: sortedItems, idResolver: idResolver, renderer: customRenderer, onChange: setSortedItems }), jsxRuntime.jsxs(Dialog.Footer, { children: [jsxRuntime.jsx(Dialog.Close, { asChild: true, children: jsxRuntime.jsx(Button, { color: "red", children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : 'Cancel' }) }), jsxRuntime.jsx(Button, { color: "green", onClick: preFinish, children: submitLabel !== null && submitLabel !== void 0 ? submitLabel : 'Submit' })] })] }) }));
+}
+
+const PdfViewerDialog = ({ open, title, url, data, onClose }) => {
+    return !(url || data) ? null : (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxRuntime.jsxs(Dialog.Content, { className: "h-[90dvh] max-w-[90dvw]", children: [jsxRuntime.jsx(Dialog.Header, { children: title }), (url || data) && (jsxRuntime.jsx("embed", { className: "rounded-lg", src: url !== null && url !== void 0 ? url : `data:application/pdf;base64,${data}`, type: "application/pdf", width: "100%", height: "100%" }))] }) }));
+};
+
+const LayoutContext = react.createContext(undefined);
+const LayoutContextProvider = ({ children }) => {
+    const [theme, setTheme] = react.useState(getValueFromLocalStorage(THEME_KEY, 'light'));
+    const [sidebarOpen, _setSidebarOpen] = react.useState(getValueFromLocalStorage(SIDEBAR_KEY, true));
+    react.useEffect(() => {
+        if (theme) {
+            if (theme === 'dark') {
+                document.documentElement.classList.add('dark');
+            }
+            else {
+                document.documentElement.classList.remove('dark');
+            }
+        }
+    }, [theme]);
+    const toggleTheme = () => {
+        setTheme((theme) => {
+            const newValue = theme === 'dark' ? 'light' : 'dark';
+            window.localStorage.setItem(THEME_KEY, newValue);
+            return newValue;
+        });
+    };
+    const setSidebarOpen = (open) => _setSidebarOpen(() => {
+        window.localStorage.setItem(SIDEBAR_KEY, String(open));
+        return open;
+    });
+    return (jsxRuntime.jsx(LayoutContext.Provider, { value: { theme, toggleTheme, sidebarOpen, setSidebarOpen }, children: children }));
+};
+function useLayoutContext() {
+    const context = react.useContext(LayoutContext);
+    if (!context) {
+        throw new Error('Please use LayoutContextProvider!');
+    }
+    return context;
+}
+const THEME_KEY = 'tw-react-components__theme';
+const SIDEBAR_KEY = 'tw-react-components__sidebar';
+function getValueFromLocalStorage(key, _default) {
+    var _a;
+    const transformers = {
+        string: String,
+        boolean: (value) => value === 'true',
+    };
+    return typeof window !== 'undefined'
+        ? transformers[typeof _default]((_a = window.localStorage.getItem(key)) !== null && _a !== void 0 ? _a : _default)
+        : _default;
+}
+
+const Navbar = ({ leftSlot, rightSlot }) => {
+    const { setSidebarOpen } = useLayoutContext();
+    return (jsxRuntime.jsx(Block, { className: "border-b p-3 dark:border-slate-700", fullWidth: true, children: jsxRuntime.jsxs(Flex, { align: "center", justify: "between", children: [jsxRuntime.jsxs(Flex, { align: "center", children: [jsxRuntime.jsx(Button, { className: "xl:hidden", prefixIcon: lucideReact.MenuIcon, variant: "text", onClick: () => setSidebarOpen(true) }), leftSlot] }), rightSlot] }) }));
+};
+
+const SidebarItemComp = ({ pathname, title, label, Icon, active, isChild, basePath, sidebarOpen, items, onClick, }) => (jsxRuntime.jsxs(reactRouterDom.Link, { className: cn('flex h-10 w-full cursor-pointer items-center overflow-hidden rounded-md p-2 font-medium', {
+        'gap-2': sidebarOpen,
+        'gap-3': !sidebarOpen,
+        'pl-2.5': !sidebarOpen,
+        'dark:text-white': active,
+        'bg-slate-100 dark:bg-slate-800': active && !isChild && !items,
+        'bg-slate-200 dark:bg-slate-900': active && (isChild || items),
+        'text-slate-500 dark:text-slate-400': !active,
+        'hover:bg-slate-100 dark:hover:bg-slate-800': !active && !isChild,
+        'hover:bg-slate-200 dark:hover:bg-slate-900': !active && isChild,
+    }), to: [basePath, pathname].join('/').replace(/\/{2,}/g, '/'), onClick: onClick, children: [jsxRuntime.jsx(Icon, { className: "h-5 w-5 min-w-min", size: 16 }), jsxRuntime.jsxs("div", { className: "min-w-max", children: [title, jsxRuntime.jsx("div", { className: "ml-auto flex items-center space-x-2", children: label })] })] }));
+
+const Sidebar = react.forwardRef(({ className, items, basePath = '/', smallLogo, fullLogo, footer }, ref) => {
+    const location = reactRouterDom.useLocation();
+    const { sidebarOpen, setSidebarOpen } = useLayoutContext();
+    const currentPath = react.useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);
+    const parentTab = react.useMemo(() => {
+        var _a;
+        return (_a = items.filter(isItem).find((item) => isLinkStartsWithPathname(currentPath, item.pathname))) === null || _a === void 0 ? void 0 : _a.pathname;
+    }, [currentPath, items]);
+    const OpenCloseIcon = sidebarOpen ? lucideReact.ChevronsLeftIcon : lucideReact.ChevronsRightIcon;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "absolute left-0 top-0 h-full w-full backdrop-blur-sm transition-opacity data-[open=true]:z-50 data-[open=false]:hidden data-[open=false]:opacity-0 data-[open=true]:opacity-100 xl:hidden", "data-open": sidebarOpen }), jsxRuntime.jsxs("nav", { className: cn('group/navbar fixed left-0 top-0 z-50 flex h-full w-56 shrink-0 flex-col bg-white p-2 transition-all duration-200 ease-in-out xl:relative dark:bg-slate-900', 'border-r data-[open=false]:-translate-x-full xl:data-[open=false]:w-16 xl:data-[open=true]:w-72 xl:data-[open=false]:translate-x-0 xl:data-[open=false]:hover:w-72 dark:border-slate-700', className), "data-open": sidebarOpen, ref: ref, children: [smallLogo && fullLogo && (jsxRuntime.jsx("div", { className: "mb-2 cursor-pointer overflow-hidden whitespace-nowrap p-2 py-3 text-center text-2xl", children: jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", children: [jsxRuntime.jsx("span", { className: cn('group-hover/navbar:block', !sidebarOpen && 'hidden'), children: fullLogo }), jsxRuntime.jsx("span", { className: cn('group-hover/navbar:hidden', sidebarOpen && 'hidden'), children: smallLogo })] }) })), jsxRuntime.jsx(Accordion__namespace.Root, { className: "overflow-hidden", type: "single", value: parentTab, children: items.map((item, index) => {
+                            var _a;
+                            return !item.hidden &&
+                                (item.type === 'separator' ? (!item.title ? (jsxRuntime.jsx(Block, { className: "my-2 h-px bg-slate-300 dark:bg-slate-700" }, index)) : (jsxRuntime.jsx(Block, { className: "mb-2 mt-6 pl-2 text-sm font-bold text-slate-600 group-hover/navbar:block data-[open=false]:hidden dark:text-slate-500", "data-open": sidebarOpen, children: item.title }, index))) : (jsxRuntime.jsxs(Accordion__namespace.Item, { className: cn('flex flex-col rounded-md', {
+                                        'bg-slate-100 dark:bg-slate-800': item.items && isLinkStartsWithPathname(currentPath, item.pathname),
+                                    }), value: item.pathname, children: [jsxRuntime.jsx(Accordion__namespace.Header, { children: jsxRuntime.jsxs(Accordion__namespace.Trigger, { className: "relative w-full p-0.5 data-[state=open]:[--rotate-chevron:90deg]", children: [jsxRuntime.jsx(SidebarItemComp, Object.assign({}, item, { active: isLinkStartsWithPathname(currentPath, item.pathname) &&
+                                                            (!item.items ||
+                                                                item.items.every((subItem) => !isLinkStartsWithPathname(currentPath, `${item.pathname}/${subItem.pathname}`))), basePath: basePath, sidebarOpen: sidebarOpen, onClick: ((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) ? undefined : () => setSidebarOpen(false) })), item.items && (jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: cn('absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 rotate-[var(--rotate-chevron,0deg)] transition-transform duration-200', !sidebarOpen && 'invisible', 'group-hover/navbar:visible') }))] }) }), item.items && (jsxRuntime.jsx(Accordion__namespace.Content, { className: "overflow-hidden data-[state=closed]:animate-[slideUp_200ms_ease-out] data-[state=open]:animate-[slideDown_200ms_ease-out]", children: jsxRuntime.jsx("div", { className: "flex flex-col gap-1 p-1 pt-0", children: item.items.map((subItem) => {
+                                                    const subPathname = `${item.pathname}/${subItem.pathname}`;
+                                                    return (!subItem.hidden && (jsxRuntime.jsx(SidebarItemComp, Object.assign({}, subItem, { pathname: subPathname, isChild: true, active: isLinkStartsWithPathname(currentPath, subPathname), basePath: basePath, sidebarOpen: sidebarOpen, onClick: () => setSidebarOpen(false) }), subPathname)));
+                                                }) }) }))] }, item.pathname)));
+                        }) }), jsxRuntime.jsxs(Flex, { className: "mt-auto", direction: "column", fullWidth: true, children: [footer, jsxRuntime.jsx(Button, { className: "invisible w-full justify-center xl:visible", variant: "text", prefixIcon: OpenCloseIcon, onClick: () => setSidebarOpen(!sidebarOpen) })] })] })] }));
+});
+function isLinkStartsWithPathname(link, pathname) {
+    return pathname === '' ? link === pathname : link.startsWith(pathname);
+}
+function isItem(item) {
+    return item.type !== 'separator';
+}
+
+const Layout = ({ children, className, sidebarProps, navbarProps, }) => {
+    const { sidebarOpen, setSidebarOpen } = useLayoutContext();
+    const screenRef = react.useRef(null);
+    const sidebarRef = react.useRef(null);
+    useOnSwipe(screenRef, (direction) => direction === 'right' ? setSidebarOpen(true) : direction === 'left' && setSidebarOpen(false));
+    useOutsideClick(sidebarRef, () => sidebarOpen && window.document.documentElement.offsetWidth <= 1024 && setSidebarOpen(false));
+    return (jsxRuntime.jsxs(Flex, { className: "h-screen gap-0 text-black dark:bg-slate-900 dark:text-white", ref: screenRef, children: [jsxRuntime.jsx(Sidebar, Object.assign({}, sidebarProps, { open: sidebarOpen, ref: sidebarRef })), jsxRuntime.jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [jsxRuntime.jsx(Navbar, Object.assign({}, navbarProps)), jsxRuntime.jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+};
+
+const $Popover = PopoverPrimitive__namespace.Root;
+const PopoverTrigger = PopoverPrimitive__namespace.Trigger;
+const PopoverContent = react.forwardRef((_a, ref) => {
+    var { className, align = 'center', sideOffset = 4, container } = _a, props = __rest(_a, ["className", "align", "sideOffset", "container"]);
+    return (jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { container: container, children: jsxRuntime.jsx(PopoverPrimitive__namespace.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn(' z-50 rounded-md border bg-white p-1 shadow-md outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-white', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className) }, props)) }));
+});
+PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
+const Popover = Object.assign($Popover, {
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+});
+
+const Switch = react.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(SwitchPrimitives__namespace.Root, Object.assign({ className: cn('peer inline-flex h-[calc(1.5rem+6px)] w-[calc(3rem+6px)] shrink-0 cursor-pointer items-center rounded-full border-[3px] border-transparent', 'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-600 focus-visible:ring-offset-2', 'focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-slate-300', 'dark:focus-visible:ring-slate-200 dark:focus-visible:ring-offset-slate-800 dark:data-[state=checked]:bg-blue-700 dark:data-[state=unchecked]:bg-slate-700', className) }, props, { ref: ref, children: jsxRuntime.jsx(SwitchPrimitives__namespace.Thumb, { className: cn('pointer-events-none block h-6 w-6 rounded-full bg-white shadow-lg ring-0 transition-transform', 'data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0 dark:bg-slate-900') }) })));
+});
+Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
+
+const $Tabs = react.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(TabsPrimitive__namespace.Root, Object.assign({ ref: ref, className: cn('flex flex-col gap-2', className) }, props)));
+});
+$Tabs.displayName = TabsPrimitive__namespace.Root.displayName;
+const TabsList = react.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(TabsPrimitive__namespace.List, Object.assign({ ref: ref, className: cn('inline-flex w-full items-center justify-center gap-1 rounded-lg border bg-slate-100 p-1 text-slate-400 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-500', className) }, props)));
+});
+TabsList.displayName = TabsPrimitive__namespace.List.displayName;
+const TabsTrigger = react.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(TabsPrimitive__namespace.Trigger, Object.assign({ ref: ref, className: cn('inline-flex w-full items-center justify-center whitespace-nowrap rounded-md px-2 py-1.5 font-medium transition-all hover:bg-slate-200 disabled:pointer-events-none disabled:opacity-50 dark:hover:bg-slate-800', 'data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow dark:data-[state=active]:bg-slate-700 dark:data-[state=active]:text-white', className) }, props)));
+});
+TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
+const TabsContent = TabsPrimitive__namespace.Content;
+const Tabs = Object.assign($Tabs, {
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Content: TabsContent,
+});
+
+const ThemeSwitcher = ({ className }) => {
+    const { theme, toggleTheme } = useLayoutContext();
+    const darkMode = theme === 'dark';
+    return (jsxRuntime.jsx(react$1.Switch, { checked: darkMode, onChange: toggleTheme, className: cn('flex h-8 w-14 items-center rounded-full border p-1 dark:border-blue-700', {
+            'bg-blue-700': darkMode,
+            'bg-slate-100': !darkMode,
+        }, className), children: jsxRuntime.jsx("div", { className: cn('flex transform transition duration-200 ease-in-out', {
+                'translate-x-6': darkMode,
+                'translate-x-0': !darkMode,
+            }), children: darkMode ? (jsxRuntime.jsx(lucideReact.MoonIcon, { className: "h-6 w-6 rounded-full bg-slate-800 p-1 text-white" })) : (jsxRuntime.jsx(lucideReact.SunIcon, { className: "h-6 w-6 rounded-full bg-slate-200 p-1 text-black" })) }) }));
+};
+
+exports.Badge = Badge;
+exports.BasicInput = BasicInput;
+exports.BasicInputExtension = BasicInputExtension;
+exports.Block = Block;
+exports.Button = Button;
+exports.Card = Card;
+exports.CheckboxInput = CheckboxInput;
+exports.ConfirmDialog = ConfirmDialog;
+exports.DataTable = DataTable;
+exports.DateTimeInput = DateTimeInput;
+exports.Dialog = Dialog;
+exports.DropdownMenu = DropdownMenu;
+exports.EmailInput = EmailInput;
+exports.Flex = Flex;
+exports.FormDialog = FormDialog;
+exports.FormGroup = FormGroup;
+exports.FormInputs = FormInputs;
+exports.Hint = Hint;
+exports.Label = Label;
+exports.Layout = Layout;
+exports.LayoutContext = LayoutContext;
+exports.LayoutContextProvider = LayoutContextProvider;
+exports.List = List;
+exports.ListSorter = ListSorter;
+exports.ListSorterDialog = ListSorterDialog;
+exports.Navbar = Navbar;
+exports.NumberInput = NumberInput;
+exports.Pagination = Pagination;
+exports.PasswordInput = PasswordInput;
+exports.PdfViewerDialog = PdfViewerDialog;
+exports.Popover = Popover;
+exports.SIDEBAR_KEY = SIDEBAR_KEY;
+exports.SelectInput = SelectInput;
+exports.Sidebar = Sidebar;
+exports.Spinner = Spinner;
+exports.Switch = Switch;
+exports.THEME_KEY = THEME_KEY;
+exports.Table = Table;
+exports.Tabs = Tabs;
+exports.TextInput = TextInput;
+exports.TextareaInput = TextareaInput;
+exports.ThemeSwitcher = ThemeSwitcher;
+exports.Tooltip = Tooltip;
+exports.cn = cn;
+exports.compareDates = compareDates;
+exports.generalComparator = generalComparator;
+exports.getDisplayDate = getDisplayDate;
+exports.isEmpty = isEmpty;
+exports.mergeRefs = mergeRefs;
+exports.resolveTargetObject = resolveTargetObject;
+exports.useDays = useDays;
+exports.useLayoutContext = useLayoutContext;
+exports.useLongPress = useLongPress;
+exports.useMonths = useMonths;
+exports.useOnSwipe = useOnSwipe;
+exports.useOutsideClick = useOutsideClick;
+exports.usePagination = usePagination;