tw-react-components 0.0.135 → 0.0.138

package/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var dayjs = require('dayjs');
@@ -16,8 +16,10 @@ 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 reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var SeparatorPrimitive = require('@radix-ui/react-separator');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var SwitchPrimitives = require('@radix-ui/react-switch');
 var TabsPrimitive = require('@radix-ui/react-tabs');
@@ -39,10 +41,11 @@ function _interopNamespaceDefault(e) {
     return Object.freeze(n);
 }
 
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
-var Accordion__namespace = /*#__PURE__*/_interopNamespaceDefault(Accordion);
+var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SeparatorPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(PopoverPrimitive);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespaceDefault(SwitchPrimitives);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TabsPrimitive);
@@ -583,7 +586,7 @@ const sizeClassNames = {
         },
     },
 };
-const Button = react.forwardRef((_a, ref) => {
+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'
@@ -592,17 +595,17 @@ const Button = react.forwardRef((_a, ref) => {
                 : '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) => {
+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) => {
+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) => {
+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 })));
 });
@@ -628,14 +631,14 @@ const justifyClasses = {
     between: 'justify-between',
     end: 'justify-end',
 };
-const Flex = react.forwardRef((_a, ref) => {
+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.extend(localeData);
 function useDays(locale = 'en') {
-    return react.useMemo(() => {
+    return React.useMemo(() => {
         dayjs.extend(localeData).locale(locale);
         const names = dayjs.weekdays();
         const shortNames = dayjs.weekdaysShort();
@@ -643,9 +646,24 @@ function useDays(locale = 'en') {
     }, [locale]);
 }
 
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return !!isMobile;
+}
+
 function useLongPress(callback, ms = 100) {
-    const [startLongPress, setStartLongPress] = react.useState(false);
-    react.useEffect(() => {
+    const [startLongPress, setStartLongPress] = React.useState(false);
+    React.useEffect(() => {
         let timerId;
         if (startLongPress) {
             timerId = setTimeout(callback, ms);
@@ -668,7 +686,7 @@ function useLongPress(callback, ms = 100) {
 
 dayjs.extend(localeData);
 function useMonths(locale = 'en') {
-    return react.useMemo(() => {
+    return React.useMemo(() => {
         dayjs.extend(localeData).locale(locale);
         const names = dayjs.months();
         const shortNames = dayjs.monthsShort();
@@ -677,7 +695,7 @@ function useMonths(locale = 'en') {
 }
 
 function useOnSwipe(element, onSwipe, minSwipeDistance = 50) {
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (!element.current)
             return;
         const elem = element.current;
@@ -718,7 +736,7 @@ function useOnSwipe(element, onSwipe, minSwipeDistance = 50) {
 }
 
 function useOutsideClick(ref, callback) {
-    react.useEffect(() => {
+    React.useEffect(() => {
         const handleClickOutside = (event) => {
             if ((ref === null || ref === void 0 ? void 0 : ref.current) && !ref.current.contains(event.target)) {
                 callback();
@@ -734,7 +752,7 @@ function useOutsideClick(ref, callback) {
 }
 
 function usePagination(currentIndex, totalPages) {
-    return react.useMemo(() => {
+    return React.useMemo(() => {
         const result = [];
         result.push(currentIndex);
         if (totalPages > 7 && currentIndex > 4) {
@@ -772,7 +790,7 @@ 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" }) }))] }));
+        }, className), htmlFor: htmlFor, children: [children, description && (jsxRuntime.jsx(Tooltip, { content: jsxRuntime.jsx("div", { className: "max-w-xs", children: description }), placement: "top", asChild: true, children: jsxRuntime.jsx(lucideReact.HelpCircle, { className: "h-4 w-4" }) })), required && jsxRuntime.jsx("span", { className: "text-red-600", children: "*" })] }));
 };
 
 const inputClasses = {
@@ -823,10 +841,10 @@ const sizeClasses = {
         },
     },
 };
-const BasicInput = react.forwardRef(function BasicInput(_a, ref) {
+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 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();
@@ -860,25 +878,30 @@ const BasicInputExtension = ({ children, className, size, hasErrors, disabled, o
         '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 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 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 NumberInput = React.forwardRef((_a, ref) => {
+    var { unit } = _a, props = __rest(_a, ["unit"]);
+    return (jsxRuntime.jsx(BasicInput, Object.assign({ type: "number" }, props, { suffixIcon: unit
+            ? ({ className }) => (jsxRuntime.jsx("div", { className: cn(className, 'flex w-min items-center'), onClick: props.onSuffixIconClick, children: unit }))
+            : props.suffixIcon, ref: ref })));
+});
 
-const PasswordInput = react.forwardRef((props, ref) => {
-    const [type, setType] = react.useState('password');
+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 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 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 monthDays = React.useMemo(() => {
         const daysInMonth = new Date(year, month + 1, 0).getDate();
         const daysInMonthArr = [];
         for (let i = 1; i <= daysInMonth; i++) {
@@ -886,7 +909,7 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDa
         }
         return daysInMonthArr;
     }, [month, year]);
-    const prefixDays = react.useMemo(() => {
+    const prefixDays = React.useMemo(() => {
         const firstDay = new Date(year, month);
         const dayOfWeek = firstDay.getDay();
         firstDay.setDate(firstDay.getDate() - 1);
@@ -897,7 +920,7 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDa
         }
         return prefixDays;
     }, [month, year]);
-    const suffixDays = react.useMemo(() => {
+    const suffixDays = React.useMemo(() => {
         const lastDay = new Date(year, month + 1);
         lastDay.setDate(lastDay.getDate() - 1);
         const dayOfWeek = lastDay.getDay();
@@ -907,7 +930,7 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDa
         }
         return suffixDays;
     }, [month, year]);
-    const setDayNumber = react.useCallback((newDay, newMonth = month, newYear = 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);
@@ -936,11 +959,11 @@ const DaysView = ({ date, value, month, year, minDate, maxDate, locale, setNewDa
     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) &&
+    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]);
+    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,
@@ -955,11 +978,11 @@ const MonthsView = ({ date, value, year, minDate, maxDate, locale, selectMonth,
     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) &&
+    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]);
+    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,
@@ -972,11 +995,11 @@ const Month = ({ date, value, shortName, month, year, minDate, maxDate, selectMo
 
 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) &&
+    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]);
+    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,
@@ -989,14 +1012,14 @@ const Year = ({ date, value, year, minDate, maxDate, selectYear }) => {
 
 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(() => {
+    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 yearsRange = React.useMemo(() => {
         const yearsRangeArr = [];
         for (let i = year + yearOffset - 6; i < year + yearOffset + 6; i++) {
             yearsRangeArr.push(i);
@@ -1066,21 +1089,21 @@ const TimeSelector = ({ date, step = 1, minDate, maxDate, setNewDate, }) => {
     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) => {
+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 [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);
+    const displayDate = React.useMemo(() => value && getDisplayDate(date, displayFormat, displayLocale), [date, value, displayFormat, displayLocale]);
+    const calendarRef = React.useRef(null);
     useOutsideClick(calendarRef, () => setIsOpen(false));
-    react.useEffect(() => {
+    React.useEffect(() => {
         if (!isOpen) {
             setCalendarView('days');
         }
@@ -1119,10 +1142,10 @@ const DateTimeInput = react.forwardRef((_a, ref) => {
                 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" })] }))] }))] }));
+    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, onSuffixIconClick: handleOnClick })), 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) => {
+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)));
 });
@@ -1130,20 +1153,20 @@ const labelSizeClasses = {
     small: 'p-1 text-sm',
     medium: 'px-2 py-1.5',
 };
-const ListItem = react.forwardRef((_a, ref) => {
+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) => {
+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) => {
+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) => {
+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)));
 });
@@ -1160,42 +1183,42 @@ 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) => {
+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) => {
+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) => {
+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) => {
+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) => {
+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) => {
+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) => {
+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) => {
+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 }) })));
 });
@@ -1223,12 +1246,12 @@ const DropdownMenu = Object.assign(DropdownMenuPrimitive__namespace.Root, {
     RadioGroup: DropdownMenuRadioGroup,
 });
 
-const SelectInput = react.forwardRef((_a, ref) => {
+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
+    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))]
@@ -1239,7 +1262,7 @@ const SelectInput = react.forwardRef((_a, ref) => {
                     .filter(Boolean)
                 : []
         : [], [multiple, pureItems, selectPredicate, value]);
-    const filteredItems = react.useMemo(() => !search || !searchValue
+    const filteredItems = React.useMemo(() => !search || !searchValue
         ? items
         : items.flatMap((item) => item.group
             ? item.items.some((subItem) => subItem.label.toLowerCase().includes(searchValue.toLowerCase()))
@@ -1250,13 +1273,13 @@ const SelectInput = react.forwardRef((_a, ref) => {
             : item.label.toLowerCase().includes(searchValue.toLowerCase())
                 ? [item]
                 : []), [items, search, searchValue]);
-    const text = react.useMemo(() => selectedItems.length
+    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) => {
+    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) {
@@ -1292,7 +1315,7 @@ const SelectInput = react.forwardRef((_a, ref) => {
     };
     const GroupComponent = multiple ? DropdownMenu.Group : DropdownMenu.RadioGroup;
     const ItemComponent = multiple ? DropdownMenu.CheckboxItem : DropdownMenu.RadioItem;
-    const RenderOption = react.useCallback((option) => {
+    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) => {
@@ -1300,16 +1323,31 @@ const SelectInput = react.forwardRef((_a, ref) => {
                 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 &&
+    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, onSuffixIconClick: () => setOpen((open) => !open), 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 FileInput = React.forwardRef((_a, ref) => {
+    var { className, value, onChange, onFileChange, accept } = _a, props = __rest(_a, ["className", "value", "onChange", "onFileChange", "accept"]);
+    const fileInputRef = React.useRef(null);
+    const handleFileChange = (_a) => __awaiter(void 0, [_a], void 0, function* ({ target: { files } }) {
+        console.log(files);
+        if (files && files.length > 0) {
+            const file = files[0];
+            console.log(file, file.name, onChange, onFileChange);
+            onChange === null || onChange === void 0 ? void 0 : onChange(file.name);
+            onFileChange === null || onFileChange === void 0 ? void 0 : onFileChange(file);
+        }
+    });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextInput, Object.assign({ className: cn('[&>div>*]:cursor-pointer', className), inputClassName: "text-left" }, props, { value: value !== null && value !== void 0 ? value : '', onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, suffixIcon: lucideReact.CloudUploadIcon, onSuffixIconClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, ref: ref, readOnly: true })), jsxRuntime.jsx("input", { ref: (ref) => (fileInputRef.current = ref), type: "file", hidden: true, accept: accept, onChange: handleFileChange })] }));
+});
+
 const FormGroup = ({ className, label, children }) => (jsxRuntime.jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-700', 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((props, ref) => {
+    return React.forwardRef((props, ref) => {
         const _a = props, { name, pattern, validate } = _a, restProps = __rest(_a, ["name", "pattern", "validate"]);
-        const { control } = reactHookForm.useFormContext();
+        const { control, formState } = reactHookForm.useFormContext();
         return (jsxRuntime.jsx(reactHookForm.Controller, { name: name, control: control, rules: {
                 required: restProps.required,
                 min: restProps.min,
@@ -1320,7 +1358,8 @@ function withForm(Component) {
                 validate,
             }, render: ({ field, fieldState }) => {
                 var _a, _b;
-                return (jsxRuntime.jsx(Component, Object.assign({}, restProps, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: (_b = field.disabled) !== null && _b !== void 0 ? _b : restProps.disabled, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
+                return (jsxRuntime.jsx(Component, Object.assign({}, restProps, field, { value: (_a = field.value) !== null && _a !== void 0 ? _a : '', disabled: ((_b = field.disabled) !== null && _b !== void 0 ? _b : restProps.disabled) ||
+                        formState.isSubmitting, hasErrors: fieldState.error, ref: mergeRefs([ref, field.ref]) })));
             } }));
     });
 }
@@ -1333,9 +1372,10 @@ const FormInputs = {
     Checkbox: withForm(CheckboxInput),
     DateTime: withForm(DateTimeInput),
     Select: withForm(SelectInput),
+    File: withForm(FileInput),
 };
 
-const HintRoot = react.forwardRef(({ children }, ref) => (jsxRuntime.jsx(Block, { className: "relative", ref: ref, children: children })));
+const HintRoot = React.forwardRef(({ children }, ref) => (jsxRuntime.jsx(Block, { className: "relative", ref: ref, children: children })));
 HintRoot.displayName = 'HintRoot';
 const dotSizeClassNames = {
     small: {
@@ -1377,7 +1417,7 @@ const colorClassNames = {
     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, {
+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',
@@ -1395,7 +1435,7 @@ const badgeSizeClassNames = {
     bottom: 'bottom-0 translate-y-1/2',
     left: 'left-2 -translate-x-full',
 };
-const HintBadge = react.forwardRef((_a, ref) => {
+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',
@@ -1408,9 +1448,9 @@ 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 totalPages = React.useMemo(() => Math.ceil(totalItems / pageSize), [pageSize, totalItems]);
     const pagination = usePagination(currentPage + 1, totalPages);
-    react.useEffect(() => {
+    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)
@@ -1474,11 +1514,11 @@ function defaultRender(item, field) {
 }
 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 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;
@@ -1530,7 +1570,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                                     : 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', {
+                        }), actions.filter((action) => !action.hide).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({
@@ -1538,7 +1578,7 @@ function DataTable({ className, columns, rows, sorting, pagination, actions = []
                             }, 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
+                                }), actions.filter((action) => !action.hide).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;
@@ -1562,12 +1602,12 @@ 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) => {
+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) => {
+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" }) })] }))] }));
 });
@@ -1582,12 +1622,12 @@ const DialogFooter = (_a) => {
     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) => {
+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) => {
+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)));
 });
@@ -1607,7 +1647,7 @@ const Dialog = Object.assign($Dialog, {
 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 id = React.useId();
     const handleSubmit = (data, event) => __awaiter(void 0, void 0, void 0, function* () {
         try {
             yield onSubmit(data, event);
@@ -1620,7 +1660,7 @@ const FormDialog = ({ className, open, title, form, children, submitLabel = 'Sub
 };
 
 function ListSorter({ className, items, idResolver, renderer, onChange, }) {
-    const adaptedItems = react.useMemo(() => items.map((value, index) => ({ id: idResolver(value, index), value })), [idResolver, items]);
+    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)
@@ -1646,8 +1686,8 @@ function SortableItem({ item, index, renderer, }) {
 }
 
 function ListSorterDialog({ className, open, title, items, idResolver, renderer, cancelLabel, submitLabel, onSubmit, onClose, }) {
-    const [sortedItems, setSortedItems] = react.useState(structuredClone(items));
-    react.useEffect(() => {
+    const [sortedItems, setSortedItems] = React.useState(structuredClone(items));
+    React.useEffect(() => {
         return () => {
             setSortedItems(structuredClone(items));
         };
@@ -1661,111 +1701,361 @@ 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 }));
+const Separator = React.forwardRef((_a, ref) => {
+    var { className, orientation = 'horizontal', decorative = true } = _a, props = __rest(_a, ["className", "orientation", "decorative"]);
+    return (jsxRuntime.jsx(SeparatorPrimitive__namespace.Root, Object.assign({ ref: ref, decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className) }, props)));
+});
+Separator.displayName = SeparatorPrimitive__namespace.Root.displayName;
+
+const $Sheet = DialogPrimitive__namespace.Root;
+const SheetTrigger = DialogPrimitive__namespace.Trigger;
+const SheetClose = DialogPrimitive__namespace.Close;
+const SheetPortal = DialogPrimitive__namespace.Portal;
+const SheetOverlay = React__namespace.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, Object.assign({ 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 bg-black/80', className) }, props, { ref: ref })));
+});
+SheetOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+const sheetVariants = classVarianceAuthority.cva('fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
+    variants: {
+        side: {
+            top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+            bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+            left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+            right: 'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+        },
+    },
+    defaultVariants: {
+        side: 'right',
+    },
+});
+const SheetContent = React__namespace.forwardRef((_a, ref) => {
+    var { side = 'right', className, children } = _a, props = __rest(_a, ["side", "className", "children"]);
+    return (jsxRuntime.jsxs(SheetPortal, { children: [jsxRuntime.jsx(SheetOverlay, {}), jsxRuntime.jsxs(DialogPrimitive__namespace.Content, Object.assign({ ref: ref, className: cn(sheetVariants({ side }), className) }, props, { children: [children, jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", children: [jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+});
+SheetContent.displayName = DialogPrimitive__namespace.Content.displayName;
+const SheetHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ className: cn('flex flex-col space-y-2 text-center sm:text-left', className) }, props)));
 };
-function useLayoutContext() {
-    const context = react.useContext(LayoutContext);
+SheetHeader.displayName = 'SheetHeader';
+const SheetFooter = (_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)));
+};
+SheetFooter.displayName = 'SheetFooter';
+const SheetTitle = React__namespace.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(DialogPrimitive__namespace.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
+});
+SheetTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+const SheetDescription = React__namespace.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(DialogPrimitive__namespace.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
+});
+SheetDescription.displayName = DialogPrimitive__namespace.Description.displayName;
+const Sheet = Object.assign($Sheet, {
+    Portal: SheetPortal,
+    Overlay: SheetOverlay,
+    Trigger: SheetTrigger,
+    Close: SheetClose,
+    Content: SheetContent,
+    Header: SheetHeader,
+    Footer: SheetFooter,
+    Title: SheetTitle,
+    Description: SheetDescription,
+});
+
+const Skeleton = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ className: cn('bg-muted animate-pulse rounded-md', className) }, props)));
+};
+Skeleton.displayName = 'Skeleton';
+
+const SIDEBAR_COOKIE_NAME = 'sidebar:state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const SidebarContext = React.createContext(null);
+function useSidebar() {
+    const context = React.useContext(SidebarContext);
     if (!context) {
-        throw new Error('Please use LayoutContextProvider!');
+        throw new Error('useSidebar must be used within a SidebarProvider.');
     }
     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 SidebarContextProvider = React.forwardRef((_a, ref) => {
+    var { defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children } = _a, props = __rest(_a, ["defaultOpen", "open", "onOpenChange", "className", "style", "children"]);
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = React.useState(false);
+    const screenRef = React.useRef(document.documentElement);
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp !== null && openProp !== void 0 ? openProp : _open;
+    const setOpen = React.useCallback((value) => {
+        if (setOpenProp) {
+            return setOpenProp === null || setOpenProp === void 0 ? void 0 : setOpenProp(typeof value === 'function' ? value(open) : value);
+        }
+        _setOpen(value);
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    }, [setOpenProp, open]);
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+        return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+    // Add swipe gesture support for opening and closing the sidebar.
+    useOnSwipe(screenRef, (direction) => direction === 'right' ? setOpen(true) : direction === 'left' && setOpen(false));
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [toggleSidebar]);
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? 'expanded' : 'collapsed';
+    const contextValue = React.useMemo(() => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+    }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
+    return (jsxRuntime.jsx(SidebarContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", Object.assign({ style: Object.assign({ '--sidebar-width': SIDEBAR_WIDTH, '--sidebar-width-icon': SIDEBAR_WIDTH_ICON }, style), className: cn('group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full', className), ref: ref }, props, { children: children })) }));
+});
+SidebarContextProvider.displayName = 'SidebarContextProvider';
+const $Sidebar = React.forwardRef((_a, ref) => {
+    var { side = 'left', variant = 'sidebar', collapsible = 'offcanvas', className, children } = _a, props = __rest(_a, ["side", "variant", "collapsible", "className", "children"]);
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    if (collapsible === 'none') {
+        return (jsxRuntime.jsx("div", Object.assign({ className: cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col', className), ref: ref }, props, { children: children })));
+    }
+    if (isMobile) {
+        return (jsxRuntime.jsx(Sheet, Object.assign({ open: openMobile, onOpenChange: setOpenMobile }, props, { children: jsxRuntime.jsx(Sheet.Content, { "data-sidebar": "sidebar", "data-mobile": "true", className: "bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden", style: {
+                    '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+                }, side: side, children: jsxRuntime.jsx("div", { className: "flex h-full w-full flex-col", children: children }) }) })));
+    }
+    return (jsxRuntime.jsxs("div", { ref: ref, className: "text-sidebar-foreground group peer hidden md:block", "data-state": state, "data-collapsible": state === 'collapsed' ? collapsible : '', "data-variant": variant, "data-side": side, children: [jsxRuntime.jsx("div", { className: cn('relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear', 'group-data-[collapsible=offcanvas]:w-0', 'group-data-[side=right]:rotate-180', variant === 'floating' || variant === 'inset'
+                    ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+                    : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]') }), jsxRuntime.jsx("div", Object.assign({ className: cn('fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex', side === 'left'
+                    ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+                    : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]', 
+                // Adjust the padding for floating and inset variants.
+                variant === 'floating' || variant === 'inset'
+                    ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+                    : 'border-sidebar-border group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l', className) }, props, { children: jsxRuntime.jsx("div", { "data-sidebar": "sidebar", className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow", children: children }) }))] }));
+});
+$Sidebar.displayName = 'Sidebar';
+const SidebarTrigger = React.forwardRef((_a, ref) => {
+    var { className, onClick } = _a, props = __rest(_a, ["className", "onClick"]);
+    const { toggleSidebar } = useSidebar();
+    return (jsxRuntime.jsx(Button, Object.assign({ ref: ref, "data-sidebar": "trigger", variant: "text", suffixIcon: lucideReact.PanelLeft, className: cn('h-7 w-7', className), onClick: (event) => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+            toggleSidebar();
+        } }, props)));
+});
+SidebarTrigger.displayName = 'SidebarTrigger';
+const SidebarRail = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { toggleSidebar } = useSidebar();
+    return (jsxRuntime.jsx("button", Object.assign({ ref: ref, "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full', '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2', '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2', className) }, props)));
+});
+SidebarRail.displayName = 'SidebarRail';
+const SidebarInset = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("main", Object.assign({ ref: ref, className: cn('bg-background relative flex min-h-svh flex-1 flex-col', 'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className) }, props)));
+});
+SidebarInset.displayName = 'SidebarInset';
+const SidebarInput = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(BasicInput, Object.assign({ ref: ref, "data-sidebar": "input", className: cn('focus-visible:ring-sidebar-ring focus-visible:ring-2', className) }, props)));
+});
+SidebarInput.displayName = 'SidebarInput';
+const SidebarHeader = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ ref: ref, "data-sidebar": "header", className: cn('flex flex-col gap-2 p-2', className) }, props)));
+});
+SidebarHeader.displayName = 'SidebarHeader';
+const SidebarFooter = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ ref: ref, "data-sidebar": "footer", className: cn('flex flex-col gap-2 p-2', className) }, props)));
+});
+SidebarFooter.displayName = 'SidebarFooter';
+const SidebarSeparator = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx(Separator, Object.assign({ ref: ref, "data-sidebar": "separator", className: cn('bg-sidebar-border mx-2 w-auto', className) }, props)));
+});
+SidebarSeparator.displayName = 'SidebarSeparator';
+const SidebarContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ ref: ref, "data-sidebar": "content", className: cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className) }, props)));
+});
+SidebarContent.displayName = 'SidebarContent';
+const SidebarGroup = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ ref: ref, "data-sidebar": "group", className: cn('relative flex w-full min-w-0 flex-col p-2', className) }, props)));
+});
+SidebarGroup.displayName = 'SidebarGroup';
+const SidebarGroupLabel = React.forwardRef((_a, ref) => {
+    var { className, asChild = false } = _a, props = __rest(_a, ["className", "asChild"]);
+    const Comp = asChild ? reactSlot.Slot : 'div';
+    return (jsxRuntime.jsx(Comp, Object.assign({ ref: ref, "data-sidebar": "group-label", className: cn('text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0', className) }, props)));
+});
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
+const SidebarGroupAction = React.forwardRef((_a, ref) => {
+    var { className, asChild = false } = _a, props = __rest(_a, ["className", "asChild"]);
+    const Comp = asChild ? reactSlot.Slot : 'button';
+    return (jsxRuntime.jsx(Comp, Object.assign({ ref: ref, "data-sidebar": "group-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden', 'group-data-[collapsible=icon]:hidden', className) }, props)));
+});
+SidebarGroupAction.displayName = 'SidebarGroupAction';
+const SidebarGroupContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ ref: ref, "data-sidebar": "group-content", className: cn('w-full text-sm', className) }, props)));
+});
+SidebarGroupContent.displayName = 'SidebarGroupContent';
+const SidebarMenu = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("ul", Object.assign({ ref: ref, "data-sidebar": "menu", className: cn('flex w-full min-w-0 flex-col gap-1', className) }, props)));
+});
+SidebarMenu.displayName = 'SidebarMenu';
+const SidebarMenuItem = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("li", Object.assign({ ref: ref, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className) }, props)));
+});
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+const sidebarMenuButtonVariants = classVarianceAuthority.cva('peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+        },
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+const SidebarMenuButton = React.forwardRef((_a, ref) => {
+    var { asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, className } = _a, props = __rest(_a, ["asChild", "isActive", "variant", "size", "tooltip", "className"]);
+    const Comp = asChild ? reactSlot.Slot : 'button';
+    const { isMobile, state } = useSidebar();
+    const button = (jsxRuntime.jsx(Comp, Object.assign({ ref: ref, "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className) }, props)));
+    if (!tooltip || state !== 'collapsed' || isMobile) {
+        return button;
+    }
+    if (typeof tooltip === 'string') {
+        tooltip = {
+            content: tooltip,
+        };
+    }
+    return (jsxRuntime.jsx(Tooltip, Object.assign({ asChild: true, placement: "right" }, tooltip, { children: button })));
+});
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+const SidebarMenuAction = React.forwardRef((_a, ref) => {
+    var { className, asChild = false, showOnHover = false } = _a, props = __rest(_a, ["className", "asChild", "showOnHover"]);
+    const Comp = asChild ? reactSlot.Slot : 'button';
+    return (jsxRuntime.jsx(Comp, Object.assign({ ref: ref, "data-sidebar": "menu-action", className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0', 
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', showOnHover &&
+            'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0', className) }, props)));
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+const SidebarMenuBadge = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("div", Object.assign({ ref: ref, "data-sidebar": "menu-badge", className: cn('text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums', 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground', 'peer-data-[size=sm]/menu-button:top-1', 'peer-data-[size=default]/menu-button:top-1.5', 'peer-data-[size=lg]/menu-button:top-2.5', 'group-data-[collapsible=icon]:hidden', className) }, props)));
+});
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+const SidebarMenuSkeleton = React.forwardRef((_a, ref) => {
+    var { className, showIcon = false } = _a, props = __rest(_a, ["className", "showIcon"]);
+    // Random width between 50 to 90%.
+    const width = React.useMemo(() => {
+        return `${Math.floor(Math.random() * 40) + 50}%`;
+    }, []);
+    return (jsxRuntime.jsxs("div", Object.assign({ ref: ref, "data-sidebar": "menu-skeleton", className: cn('flex h-8 items-center gap-2 rounded-md px-2', className) }, props, { children: [showIcon && jsxRuntime.jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), jsxRuntime.jsx(Skeleton, { className: "h-4 max-w-[--skeleton-width] flex-1", "data-sidebar": "menu-skeleton-text", style: {
+                    '--skeleton-width': width,
+                } })] })));
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
+const SidebarMenuSub = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntime.jsx("ul", Object.assign({ ref: ref, "data-sidebar": "menu-sub", className: cn('border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5', 'group-data-[collapsible=icon]:hidden', className) }, props)));
+});
+SidebarMenuSub.displayName = 'SidebarMenuSub';
+const SidebarMenuSubItem = React.forwardRef((_a, ref) => {
+    var props = __rest(_a, []);
+    return (jsxRuntime.jsx("li", Object.assign({ ref: ref }, props)));
+});
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+const SidebarMenuSubButton = React.forwardRef((_a, ref) => {
+    var { asChild = false, size = 'md', isActive, className } = _a, props = __rest(_a, ["asChild", "size", "isActive", "className"]);
+    const Comp = asChild ? reactSlot.Slot : 'a';
+    return (jsxRuntime.jsx(Comp, Object.assign({ ref: ref, "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn('text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0', 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground', size === 'sm' && 'text-xs', size === 'md' && 'text-sm', 'group-data-[collapsible=icon]:hidden', className) }, props)));
+});
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
+const Sidebar = Object.assign($Sidebar, {
+    Content: SidebarContent,
+    Footer: SidebarFooter,
+    Group: SidebarGroup,
+    GroupAction: SidebarGroupAction,
+    GroupContent: SidebarGroupContent,
+    GroupLabel: SidebarGroupLabel,
+    Header: SidebarHeader,
+    Input: SidebarInput,
+    Inset: SidebarInset,
+    Menu: SidebarMenu,
+    MenuAction: SidebarMenuAction,
+    MenuBadge: SidebarMenuBadge,
+    MenuButton: SidebarMenuButton,
+    MenuItem: SidebarMenuItem,
+    MenuSkeleton: SidebarMenuSkeleton,
+    MenuSub: SidebarMenuSub,
+    MenuSubButton: SidebarMenuSubButton,
+    MenuSubItem: SidebarMenuSubItem,
+    Rail: SidebarRail,
+    Separator: SidebarSeparator,
+    Trigger: SidebarTrigger,
+});
 
-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 Navbar = ({ className, leftSlot, rightSlot }) => (jsxRuntime.jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxRuntime.jsxs(Flex, { align: "center", justify: "between", children: [jsxRuntime.jsxs(Flex, { align: "center", children: [jsxRuntime.jsx(Sidebar.Trigger, {}), 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 Layout = (_a) => {
+    var { children, className } = _a, _b = _a.sidebarProps, { basePath, smallLogo, fullLogo, items } = _b, sidebarProps = __rest(_b, ["basePath", "smallLogo", "fullLogo", "items"]), { navbarProps } = _a;
+    return (jsxRuntime.jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxRuntime.jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps, { children: [jsxRuntime.jsx(Sidebar.Header, { children: smallLogo && fullLogo && (jsxRuntime.jsx("div", { className: "cursor-pointer overflow-hidden whitespace-nowrap py-2 text-center text-lg", children: jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", children: [jsxRuntime.jsx("span", { className: "group-data-[state=collapsed]:hidden", children: fullLogo }), jsxRuntime.jsx("span", { className: "group-data-[state=expanded]:hidden", children: smallLogo })] }) })) }), jsxRuntime.jsx(Sidebar.Content, { className: "gap-0", children: items.map((item, index) => item.type === 'item' ? (jsxRuntime.jsx(Sidebar.Group, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item)) }) }, index)) : (jsxRuntime.jsxs(Sidebar.Group, { children: [item.title && jsxRuntime.jsx(Sidebar.GroupLabel, { children: item.title }), jsxRuntime.jsx(Sidebar.GroupContent, { children: jsxRuntime.jsx(Sidebar.Menu, { children: item.items.map((item, index) => (jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, item), index))) }) })] }, index))) }), jsxRuntime.jsx(Sidebar.Rail, {})] })), 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 RenderSideBarItem = ({ basePath = '/', pathname, title, Icon, items, }) => {
     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) })] })] })] }));
-});
+    const { open } = useSidebar();
+    const currentPath = React.useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);
+    return (jsxRuntime.jsxs(Sidebar.MenuItem, { children: [jsxRuntime.jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: isLinkStartsWithPathname(currentPath, pathname) &&
+                    (!items ||
+                        (!open &&
+                            items.some((item) => isLinkStartsWithPathname(currentPath, `${pathname}/${item.pathname}`)))), children: jsxRuntime.jsxs(reactRouterDom.Link, { to: pathname, className: "font-medium", children: [Icon && jsxRuntime.jsx(Icon, {}), title] }) }), items && (jsxRuntime.jsx(Sidebar.MenuSub, { children: items.map((subItem, index) => (jsxRuntime.jsx(Sidebar.MenuSubItem, { children: jsxRuntime.jsx(Sidebar.MenuSubButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`), children: jsxRuntime.jsx(reactRouterDom.Link, { to: `${pathname}/${subItem.pathname}`, children: subItem.title }) }) }, index))) }))] }));
+};
 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) => {
+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)) }));
 });
@@ -1775,23 +2065,23 @@ const Popover = Object.assign($Popover, {
     Content: PopoverContent,
 });
 
-const Switch = react.forwardRef((_a, ref) => {
+const Switch = React.forwardRef((_a, ref) => {
     var { className } = _a, _b = _a.thumbProps, _c = _b === void 0 ? {} : _b, { className: thumbClassName } = _c, thumbProps = __rest(_c, ["className"]), props = __rest(_a, ["className", "thumbProps"]);
     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, Object.assign({ 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', thumbClassName) }, thumbProps)) })));
 });
 Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
 
-const $Tabs = react.forwardRef((_a, ref) => {
+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) => {
+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) => {
+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)));
 });
@@ -1803,6 +2093,47 @@ const Tabs = Object.assign($Tabs, {
     Content: TabsContent,
 });
 
+const LayoutContext = React.createContext(undefined);
+const LayoutContextProvider = ({ children }) => {
+    const [theme, setTheme] = React.useState(getValueFromLocalStorage(THEME_KEY, 'light'));
+    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;
+        });
+    };
+    return jsxRuntime.jsx(LayoutContext.Provider, { value: { theme, toggleTheme }, 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';
+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 ThemeSwitcher = ({ className }) => {
     const { theme, toggleTheme } = useLayoutContext();
     const darkMode = theme === 'dark';
@@ -1824,6 +2155,7 @@ exports.DateTimeInput = DateTimeInput;
 exports.Dialog = Dialog;
 exports.DropdownMenu = DropdownMenu;
 exports.EmailInput = EmailInput;
+exports.FileInput = FileInput;
 exports.Flex = Flex;
 exports.FormDialog = FormDialog;
 exports.FormGroup = FormGroup;
@@ -1842,9 +2174,13 @@ exports.Pagination = Pagination;
 exports.PasswordInput = PasswordInput;
 exports.PdfViewerDialog = PdfViewerDialog;
 exports.Popover = Popover;
-exports.SIDEBAR_KEY = SIDEBAR_KEY;
 exports.SelectInput = SelectInput;
+exports.Separator = Separator;
+exports.Sheet = Sheet;
 exports.Sidebar = Sidebar;
+exports.SidebarContext = SidebarContext;
+exports.SidebarContextProvider = SidebarContextProvider;
+exports.Skeleton = Skeleton;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
 exports.THEME_KEY = THEME_KEY;
@@ -1862,9 +2198,11 @@ exports.isEmpty = isEmpty;
 exports.mergeRefs = mergeRefs;
 exports.resolveTargetObject = resolveTargetObject;
 exports.useDays = useDays;
+exports.useIsMobile = useIsMobile;
 exports.useLayoutContext = useLayoutContext;
 exports.useLongPress = useLongPress;
 exports.useMonths = useMonths;
 exports.useOnSwipe = useOnSwipe;
 exports.useOutsideClick = useOutsideClick;
 exports.usePagination = usePagination;
+exports.useSidebar = useSidebar;