tw-react-components 0.0.135 → 0.0.137

package/index.esm.js

@@ -1,10 +1,11 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
 import { forwardRef, useMemo, useState, useEffect, useId, useCallback, useRef, createContext, useContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
-import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, MenuIcon, MoonIcon, SunIcon } from 'lucide-react';
+import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, CloudUploadIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, X, PanelLeft, MoonIcon, SunIcon } from 'lucide-react';
 import localeData from 'dayjs/plugin/localeData';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -14,8 +15,10 @@ import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, close
 import { restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import * as Accordion from '@radix-ui/react-accordion';
 import { Link, useLocation } from 'react-router-dom';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
@@ -616,6 +619,21 @@ function useDays(locale = 'en') {
     }, [locale]);
 }
 
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+    const [isMobile, setIsMobile] = useState(undefined);
+    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] = useState(false);
     useEffect(() => {
@@ -745,7 +763,7 @@ const Label = ({ children, className, description, required, hasErrors, htmlFor,
     return !children ? null : (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: [jsxs("span", { children: [children, " ", required && jsx("span", { className: "text-red-600", children: "*" })] }), description && (jsx(Tooltip, { content: jsx("div", { className: "max-w-xs", children: description }), placement: "right", children: jsx(HelpCircle, { className: "h-5 w-5" }) }))] }));
+        }, className), htmlFor: htmlFor, children: [children, description && (jsx(Tooltip, { content: jsx("div", { className: "max-w-xs", children: description }), placement: "top", asChild: true, children: jsx(HelpCircle, { className: "h-4 w-4" }) })), required && jsx("span", { className: "text-red-600", children: "*" })] }));
 };
 
 const inputClasses = {
@@ -837,7 +855,12 @@ const CheckboxInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign(
 
 const EmailInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign({ type: "email" }, props, { suffixIcon: AtSignIcon, ref: ref }))));
 
-const NumberInput = forwardRef((props, ref) => (jsx(BasicInput, Object.assign({ type: "number" }, props, { ref: ref }))));
+const NumberInput = forwardRef((_a, ref) => {
+    var { unit } = _a, props = __rest(_a, ["unit"]);
+    return (jsx(BasicInput, Object.assign({ type: "number" }, props, { suffixIcon: unit
+            ? ({ className }) => (jsx("div", { className: cn(className, 'flex w-min items-center'), onClick: props.onSuffixIconClick, children: unit }))
+            : props.suffixIcon, ref: ref })));
+});
 
 const PasswordInput = forwardRef((props, ref) => {
     const [type, setType] = useState('password');
@@ -1092,7 +1115,7 @@ const DateTimeInput = forwardRef((_a, ref) => {
                 setIsOpen(false);
         }
     };
-    return (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [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')) ? CalendarIcon : ClockIcon })), isOpen && (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')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate })), calendarView === 'days' && (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')) && (jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate })), 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 (jsxs("div", { className: cn('relative w-full', className), ref: ref, children: [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')) ? CalendarIcon : ClockIcon, onSuffixIconClick: handleOnClick })), isOpen && (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')) && (jsx(DateSelector, { date: date, value: value, minDate: minDate, maxDate: maxDate, locale: displayLocale, calendarView: calendarView, setCalendarView: setCalendarView, setNewDate: setNewDate })), calendarView === 'days' && (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')) && (jsx(TimeSelector, { date: date, step: step, minDate: minDate, maxDate: maxDate, setNewDate: setNewDate })), 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 = forwardRef((_a, ref) => {
@@ -1273,16 +1296,31 @@ const SelectInput = forwardRef((_a, ref) => {
                 handleOnSelect(option.id);
             }, children: jsx("span", { children: renderItem(option, !!selectedMap[option.id]) }) }));
     }, [ItemComponent, handleOnSelect, multiple, renderItem, selectedMap]);
-    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: 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: ChevronDownIcon, ref: ref, readOnly: true })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
+    return (jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [jsx(DropdownMenu.Trigger, { className: cn('w-full', className), children: 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: ChevronDownIcon, onSuffixIconClick: () => setOpen((open) => !open), ref: ref, readOnly: true })) }), jsxs(DropdownMenu.Content, { className: "flex max-h-80 w-[calc(var(--radix-popper-anchor-width))] flex-col overflow-hidden", children: [search && (jsxs(Fragment, { children: [jsx(TextInput, { value: searchValue, placeholder: "Search...", size: props.size, onChange: handleOnSearchValueChange, clearable: !!searchValue.length, onClear: clearSearchValue }), jsx(DropdownMenu.Separator, { className: "w-full" })] })), filteredItems.length === 0 &&
                         (allowAddition && searchValue ? (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, "'"] })) : (jsx("div", { className: "text-center text-slate-500", children: "No items." }))), 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 ? (jsxs(Flex, { className: "gap-1", direction: "column", fullWidth: true, children: [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) => (jsx(RenderOption, Object.assign({}, subItem), subItem.id))), index < filteredItems.length - 1 && (jsx("div", { className: "mb-1 h-px w-full bg-slate-200 dark:bg-slate-700" }))] }, item.id)) : (jsx(RenderOption, Object.assign({}, item), item.id))) })] })] }));
 });
 
+const FileInput = forwardRef((_a, ref) => {
+    var { className, value, onChange, onFileChange, accept } = _a, props = __rest(_a, ["className", "value", "onChange", "onFileChange", "accept"]);
+    const fileInputRef = 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 (jsxs(Fragment, { children: [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: CloudUploadIcon, onSuffixIconClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, ref: ref, readOnly: true })), jsx("input", { ref: (ref) => (fileInputRef.current = ref), type: "file", hidden: true, accept: accept, onChange: handleFileChange })] }));
+});
+
 const FormGroup = ({ className, label, children }) => (jsxs(Flex, { className: cn('relative !gap-4 rounded-lg border p-4 dark:border-slate-700', className), direction: "column", fullWidth: true, children: [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 forwardRef((props, ref) => {
         const _a = props, { name, pattern, validate } = _a, restProps = __rest(_a, ["name", "pattern", "validate"]);
-        const { control } = useFormContext();
+        const { control, formState } = useFormContext();
         return (jsx(Controller, { name: name, control: control, rules: {
                 required: restProps.required,
                 min: restProps.min,
@@ -1293,7 +1331,8 @@ function withForm(Component) {
                 validate,
             }, render: ({ field, fieldState }) => {
                 var _a, _b;
-                return (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 (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]) })));
             } }));
     });
 }
@@ -1306,6 +1345,7 @@ const FormInputs = {
     Checkbox: withForm(CheckboxInput),
     DateTime: withForm(DateTimeInput),
     Select: withForm(SelectInput),
+    File: withForm(FileInput),
 };
 
 const HintRoot = forwardRef(({ children }, ref) => (jsx(Block, { className: "relative", ref: ref, children: children })));
@@ -1503,7 +1543,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 ? (jsx(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' ? (jsx(SortAscIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })) : (jsx(SortDescIcon, { className: "absolute top-1/2 float-right ml-1 inline-block h-4 w-4 -translate-y-1/2" })))] }, columnIndex));
-                        }), actions.length > 0 && jsx(Table.HeadCell, { align: "center", children: "Actions" })] }) }), jsxs(Table.Body, { className: "relative", children: [isLoading && (jsx(Table.Row, { children: jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
+                        }), actions.filter((action) => !action.hide).length > 0 && (jsx(Table.HeadCell, { align: "center", children: "Actions" }))] }) }), jsxs(Table.Body, { className: "relative", children: [isLoading && (jsx(Table.Row, { children: jsx(Table.Cell, { className: cn('z-10 h-full w-full p-0', {
                                 absolute: rows.length,
                             }), colSpan: columnsLength, children: jsx(Spinner, { className: "bg-white/50 py-4 dark:bg-slate-700/50" }) }) })), !isLoading && !rows.length && (jsx(Table.Row, { children: jsx(Table.Cell, { colSpan: columnsLength, children: jsx(Flex, { className: "text-slate-500", justify: "center", children: noDataMessage !== null && noDataMessage !== void 0 ? noDataMessage : 'No data' }) }) })), rows.map((item, rowIndex) => [
                         jsxs(Table.Row, { className: cn({
@@ -1511,7 +1551,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 && (jsx(Table.Cell, { className: "w-min", align: "center", children: jsx(ExpandButton, { folded: !expandedRows[rowExtraContent.idGetter(item)], foldComponent: MinusIcon, unfoldComponent: PlusIcon, onClick: handleExpandRow(rowExtraContent.idGetter(item)) }) })), _columns.map((column, columnIndex) => {
                                     var _a, _b, _c;
                                     return (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 && (jsx(Table.Cell, { className: "py-3", children: jsx(Flex, { align: "center", justify: "center", children: actions
+                                }), actions.filter((action) => !action.hide).length > 0 && (jsx(Table.Cell, { className: "py-3", children: 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;
@@ -1634,107 +1674,356 @@ const PdfViewerDialog = ({ open, title, url, data, onClose }) => {
     return !(url || data) ? null : (jsx(Dialog, { open: open, onOpenChange: (value) => !value && onClose(), children: jsxs(Dialog.Content, { className: "h-[90dvh] max-w-[90dvw]", children: [jsx(Dialog.Header, { children: title }), (url || data) && (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 = createContext(undefined);
-const LayoutContextProvider = ({ children }) => {
-    const [theme, setTheme] = useState(getValueFromLocalStorage(THEME_KEY, 'light'));
-    const [sidebarOpen, _setSidebarOpen] = useState(getValueFromLocalStorage(SIDEBAR_KEY, true));
-    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 (jsx(LayoutContext.Provider, { value: { theme, toggleTheme, sidebarOpen, setSidebarOpen }, children: children }));
+const Separator = forwardRef((_a, ref) => {
+    var { className, orientation = 'horizontal', decorative = true } = _a, props = __rest(_a, ["className", "orientation", "decorative"]);
+    return (jsx(SeparatorPrimitive.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.Root.displayName;
+
+const $Sheet = DialogPrimitive.Root;
+const SheetTrigger = DialogPrimitive.Trigger;
+const SheetClose = DialogPrimitive.Close;
+const SheetPortal = DialogPrimitive.Portal;
+const SheetOverlay = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(DialogPrimitive.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.Overlay.displayName;
+const sheetVariants = 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.forwardRef((_a, ref) => {
+    var { side = 'right', className, children } = _a, props = __rest(_a, ["side", "className", "children"]);
+    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, {}), jsxs(DialogPrimitive.Content, Object.assign({ ref: ref, className: cn(sheetVariants({ side }), className) }, props, { children: [children, jsxs(DialogPrimitive.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: [jsx(X, { className: "h-4 w-4" }), jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+});
+SheetContent.displayName = DialogPrimitive.Content.displayName;
+const SheetHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("div", Object.assign({ className: cn('flex flex-col space-y-2 text-center sm:text-left', className) }, props)));
 };
-function useLayoutContext() {
-    const context = useContext(LayoutContext);
+SheetHeader.displayName = 'SheetHeader';
+const SheetFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (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.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn('text-foreground text-lg font-semibold', className) }, props)));
+});
+SheetTitle.displayName = DialogPrimitive.Title.displayName;
+const SheetDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn('text-muted-foreground text-sm', className) }, props)));
+});
+SheetDescription.displayName = DialogPrimitive.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 (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 = createContext(null);
+function useSidebar() {
+    const context = 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 = 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] = useState(false);
+    const screenRef = 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] = useState(defaultOpen);
+    const open = openProp !== null && openProp !== void 0 ? openProp : _open;
+    const setOpen = 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 = 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.
+    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 = useMemo(() => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+    }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
+    return (jsx(SidebarContext.Provider, { value: contextValue, children: 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 = 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 (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 (jsx(Sheet, Object.assign({ open: openMobile, onOpenChange: setOpenMobile }, props, { children: 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: jsx("div", { className: "flex h-full w-full flex-col", children: children }) }) })));
+    }
+    return (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: [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]') }), 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: 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 = forwardRef((_a, ref) => {
+    var { className, onClick } = _a, props = __rest(_a, ["className", "onClick"]);
+    const { toggleSidebar } = useSidebar();
+    return (jsx(Button, Object.assign({ ref: ref, "data-sidebar": "trigger", variant: "text", suffixIcon: 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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { toggleSidebar } = useSidebar();
+    return (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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (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 = forwardRef((_a, ref) => {
+    var { className, asChild = false } = _a, props = __rest(_a, ["className", "asChild"]);
+    const Comp = asChild ? Slot : 'div';
+    return (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 = forwardRef((_a, ref) => {
+    var { className, asChild = false } = _a, props = __rest(_a, ["className", "asChild"]);
+    const Comp = asChild ? Slot : 'button';
+    return (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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("div", Object.assign({ ref: ref, "data-sidebar": "group-content", className: cn('w-full text-sm', className) }, props)));
+});
+SidebarGroupContent.displayName = 'SidebarGroupContent';
+const SidebarMenu = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("li", Object.assign({ ref: ref, "data-sidebar": "menu-item", className: cn('group/menu-item relative', className) }, props)));
+});
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+const sidebarMenuButtonVariants = 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 = 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 ? Slot : 'button';
+    const { isMobile, state } = useSidebar();
+    const button = (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 (jsx(Tooltip, Object.assign({ asChild: true, placement: "right" }, tooltip, { children: button })));
+});
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+const SidebarMenuAction = forwardRef((_a, ref) => {
+    var { className, asChild = false, showOnHover = false } = _a, props = __rest(_a, ["className", "asChild", "showOnHover"]);
+    const Comp = asChild ? Slot : 'button';
+    return (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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (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 = forwardRef((_a, ref) => {
+    var { className, showIcon = false } = _a, props = __rest(_a, ["className", "showIcon"]);
+    // Random width between 50 to 90%.
+    const width = useMemo(() => {
+        return `${Math.floor(Math.random() * 40) + 50}%`;
+    }, []);
+    return (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 && jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }), 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 = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (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 = forwardRef((_a, ref) => {
+    var props = __rest(_a, []);
+    return (jsx("li", Object.assign({ ref: ref }, props)));
+});
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+const SidebarMenuSubButton = forwardRef((_a, ref) => {
+    var { asChild = false, size = 'md', isActive, className } = _a, props = __rest(_a, ["asChild", "size", "isActive", "className"]);
+    const Comp = asChild ? Slot : 'a';
+    return (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 (jsx(Block, { className: "border-b p-3 dark:border-slate-700", fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Button, { className: "xl:hidden", prefixIcon: MenuIcon, variant: "text", onClick: () => setSidebarOpen(true) }), leftSlot] }), rightSlot] }) }));
-};
+const Navbar = ({ leftSlot, rightSlot }) => (jsx(Block, { className: "border-b p-3 dark:border-slate-700", fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, {}), leftSlot] }), rightSlot] }) }));
 
-const SidebarItemComp = ({ pathname, title, label, Icon, active, isChild, basePath, sidebarOpen, items, onClick, }) => (jsxs(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: [jsx(Icon, { className: "h-5 w-5 min-w-min", size: 16 }), jsxs("div", { className: "min-w-max", children: [title, jsx("div", { className: "ml-auto flex items-center space-x-2", children: label })] })] }));
-
-const Sidebar = forwardRef(({ className, items, basePath = '/', smallLogo, fullLogo, footer }, ref) => {
+const Layout = ({ children, className, sidebarProps, navbarProps, }) => {
+    return (jsxs(Flex, { className: "h-screen w-screen gap-0 text-black dark:bg-slate-900 dark:text-white", children: [jsxs(Sidebar, Object.assign({ collapsible: "icon" }, sidebarProps.root, { children: [jsx(Sidebar.Header, { children: sidebarProps.smallLogo && sidebarProps.fullLogo && (jsx("div", { className: "cursor-pointer overflow-hidden whitespace-nowrap py-2 text-center text-lg", children: jsxs(Link, { to: "/", children: [jsx("span", { className: "group-data-[state=collapsed]:hidden", children: sidebarProps.fullLogo }), jsx("span", { className: "group-data-[state=expanded]:hidden", children: sidebarProps.smallLogo })] }) })) }), jsx(Sidebar.Content, { className: "gap-0", children: sidebarProps.items.map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: sidebarProps.basePath }, item)) }) }, index)) : (jsxs(Sidebar.Group, { children: [item.title && jsx(Sidebar.GroupLabel, { children: item.title }), jsx(Sidebar.GroupContent, { children: jsx(Sidebar.Menu, { children: item.items.map((item, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: sidebarProps.basePath }, item), index))) }) })] }, index))) }), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [jsx(Navbar, Object.assign({}, navbarProps)), 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 = useLocation();
-    const { sidebarOpen, setSidebarOpen } = useLayoutContext();
+    const { open } = useSidebar();
     const currentPath = useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);
-    const parentTab = 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 ? ChevronsLeftIcon : ChevronsRightIcon;
-    return (jsxs(Fragment, { children: [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 }), 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 && (jsx("div", { className: "mb-2 cursor-pointer overflow-hidden whitespace-nowrap p-2 py-3 text-center text-2xl", children: jsxs(Link, { to: "/", children: [jsx("span", { className: cn('group-hover/navbar:block', !sidebarOpen && 'hidden'), children: fullLogo }), jsx("span", { className: cn('group-hover/navbar:hidden', sidebarOpen && 'hidden'), children: smallLogo })] }) })), jsx(Accordion.Root, { className: "overflow-hidden", type: "single", value: parentTab, children: items.map((item, index) => {
-                            var _a;
-                            return !item.hidden &&
-                                (item.type === 'separator' ? (!item.title ? (jsx(Block, { className: "my-2 h-px bg-slate-300 dark:bg-slate-700" }, index)) : (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))) : (jsxs(Accordion.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: [jsx(Accordion.Header, { children: jsxs(Accordion.Trigger, { className: "relative w-full p-0.5 data-[state=open]:[--rotate-chevron:90deg]", children: [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 && (jsx(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 && (jsx(Accordion.Content, { className: "overflow-hidden data-[state=closed]:animate-[slideUp_200ms_ease-out] data-[state=open]:animate-[slideDown_200ms_ease-out]", children: 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 && (jsx(SidebarItemComp, Object.assign({}, subItem, { pathname: subPathname, isChild: true, active: isLinkStartsWithPathname(currentPath, subPathname), basePath: basePath, sidebarOpen: sidebarOpen, onClick: () => setSidebarOpen(false) }), subPathname)));
-                                                }) }) }))] }, item.pathname)));
-                        }) }), jsxs(Flex, { className: "mt-auto", direction: "column", fullWidth: true, children: [footer, jsx(Button, { className: "invisible w-full justify-center xl:visible", variant: "text", prefixIcon: OpenCloseIcon, onClick: () => setSidebarOpen(!sidebarOpen) })] })] })] }));
-});
+    return (jsxs(Sidebar.MenuItem, { children: [jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: isLinkStartsWithPathname(currentPath, pathname) &&
+                    (!items ||
+                        (!open &&
+                            items.some((item) => isLinkStartsWithPathname(currentPath, `${pathname}/${item.pathname}`)))), children: jsxs(Link, { to: pathname, className: "font-medium", children: [Icon && jsx(Icon, {}), title] }) }), items && (jsx(Sidebar.MenuSub, { children: items.map((subItem, index) => (jsx(Sidebar.MenuSubItem, { children: jsx(Sidebar.MenuSubButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`), children: jsx(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 = useRef(null);
-    const sidebarRef = useRef(null);
-    useOnSwipe(screenRef, (direction) => direction === 'right' ? setSidebarOpen(true) : direction === 'left' && setSidebarOpen(false));
-    useOutsideClick(sidebarRef, () => sidebarOpen && window.document.documentElement.offsetWidth <= 1024 && setSidebarOpen(false));
-    return (jsxs(Flex, { className: "h-screen gap-0 text-black dark:bg-slate-900 dark:text-white", ref: screenRef, children: [jsx(Sidebar, Object.assign({}, sidebarProps, { open: sidebarOpen, ref: sidebarRef })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
-};
 
 const $Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
@@ -1776,6 +2065,47 @@ const Tabs = Object.assign($Tabs, {
     Content: TabsContent,
 });
 
+const LayoutContext = createContext(undefined);
+const LayoutContextProvider = ({ children }) => {
+    const [theme, setTheme] = useState(getValueFromLocalStorage(THEME_KEY, 'light'));
+    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 jsx(LayoutContext.Provider, { value: { theme, toggleTheme }, children: children });
+};
+function useLayoutContext() {
+    const context = 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';
@@ -1784,4 +2114,4 @@ const ThemeSwitcher = ({ className }) => {
         } }));
 };
 
-export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, ConfirmDialog, DataTable, DateTimeInput, Dialog, DropdownMenu, EmailInput, Flex, FormDialog, FormGroup, FormInputs, Hint, Label, Layout, LayoutContext, LayoutContextProvider, List, ListSorter, ListSorterDialog, Navbar, NumberInput, Pagination, PasswordInput, PdfViewerDialog, Popover, SIDEBAR_KEY, SelectInput, Sidebar, Spinner, Switch, THEME_KEY, Table, Tabs, TextInput, TextareaInput, ThemeSwitcher, Tooltip, cn, compareDates, generalComparator, getDisplayDate, isEmpty, mergeRefs, resolveTargetObject, useDays, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination };
+export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, ConfirmDialog, DataTable, DateTimeInput, Dialog, DropdownMenu, EmailInput, FileInput, Flex, FormDialog, FormGroup, FormInputs, Hint, Label, Layout, LayoutContext, LayoutContextProvider, List, ListSorter, ListSorterDialog, Navbar, NumberInput, Pagination, PasswordInput, PdfViewerDialog, Popover, SelectInput, Separator, Sheet, Sidebar, SidebarContext, SidebarContextProvider, Skeleton, Spinner, Switch, THEME_KEY, Table, Tabs, TextInput, TextareaInput, ThemeSwitcher, Tooltip, cn, compareDates, generalComparator, getDisplayDate, isEmpty, mergeRefs, resolveTargetObject, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar };