tw-react-components 0.0.146 → 0.0.148

package/index.cjs.js

@@ -6,6 +6,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var dayjs = require('dayjs');
 var advancedFormat = require('dayjs/plugin/advancedFormat');
+var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var lucideReact = require('lucide-react');
 var localeData = require('dayjs/plugin/localeData');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
@@ -41,6 +42,7 @@ function _interopNamespaceDefault(e) {
     return Object.freeze(n);
 }
 
+var CollapsiblePrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CollapsiblePrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(TooltipPrimitive);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DropdownMenuPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
@@ -624,6 +626,14 @@ const Card = react.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(Block, Object.assign({ className: cn('rounded-lg border p-3 dark:border-slate-700 dark:bg-slate-900', className) }, blockProps, { ref: ref, children: children })));
 });
 
+const $Collapsible = CollapsiblePrimitive__namespace.Root;
+const CollapsibleTrigger = CollapsiblePrimitive__namespace.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive__namespace.CollapsibleContent;
+const Collapsible = Object.assign($Collapsible, {
+    Trigger: CollapsibleTrigger,
+    Content: CollapsibleContent,
+});
+
 const directionClasses = {
     row: {
         normal: 'flex-row',
@@ -1265,7 +1275,7 @@ const SelectInput = react.forwardRef((_a, ref) => {
     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 selectedItems = react.useMemo(() => isNotNullOrUndefined(value)
         ? !multiple
             ? pureItems.find((item) => selectPredicate(item.value, value))
                 ? [pureItems.find((item) => selectPredicate(item.value, value))]
@@ -1305,7 +1315,7 @@ const SelectInput = react.forwardRef((_a, ref) => {
             }
         }
         else if (multiple) {
-            if (selectedMap[id]) {
+            if (isNotNullOrUndefined(selectedMap[id])) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(selectedItems.filter((item) => item.id !== id).map((item) => item.value));
             }
             else {
@@ -1331,15 +1341,18 @@ const SelectInput = react.forwardRef((_a, ref) => {
     const ItemComponent = multiple ? DropdownMenu.CheckboxItem : DropdownMenu.RadioItem;
     const RenderOption = react.useCallback((option) => {
         return (jsxRuntime.jsx(ItemComponent, { className: cn('w-full cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-700', {
-                'bg-slate-200 dark:bg-slate-700': selectedMap[option.id],
-            }), value: String(option.id), checked: !!selectedMap[option.id], onSelect: (event) => {
+                'bg-slate-200 dark:bg-slate-700': isNotNullOrUndefined(selectedMap[option.id]),
+            }), value: String(option.id), checked: isNotNullOrUndefined(selectedMap[option.id]), onSelect: (event) => {
                 multiple && event.preventDefault();
                 handleOnSelect(option.id);
-            }, children: jsxRuntime.jsx("span", { children: renderItem(option, !!selectedMap[option.id]) }) }));
+            }, children: jsxRuntime.jsx("span", { children: renderItem(option, isNotNullOrUndefined(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, 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 py-1.5 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: "py-1.5 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))) })] })] }));
 });
+function isNotNullOrUndefined(value) {
+    return value !== null && value !== undefined;
+}
 
 const FileInput = react.forwardRef((_a, ref) => {
     var { className, value, onChange, onFileChange, accept } = _a, props = __rest(_a, ["className", "value", "onChange", "onFileChange", "accept"]);
@@ -2054,23 +2067,29 @@ const Sidebar = Object.assign($Sidebar, {
 const Navbar = ({ className, sidebarTriggerClassName, 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, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
 
 const Layout = (_a) => {
-    var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "footer"]), { 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: [header && (jsxRuntime.jsx(Sidebar.Header, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: header }) }) })), jsxRuntime.jsx(Sidebar.Content, { className: "gap-0", children: items
-                            .filter((item) => !item.hidden)
-                            .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
-                                            .filter((subItem) => !subItem.hidden)
-                                            .map((subItem, index) => (jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))) }), footer && (jsxRuntime.jsx(Sidebar.Footer, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: footer }) }) })), jsxRuntime.jsx(Sidebar.Rail, {})] })), jsxRuntime.jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsxRuntime.jsx(Navbar, Object.assign({}, navbarProps)), jsxRuntime.jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+    var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { 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: [header && (jsxRuntime.jsx(Sidebar.Header, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: header }) }) })), jsxRuntime.jsxs(Sidebar.Content, { className: "gap-0", children: [items
+                                .filter((item) => !item.hidden)
+                                .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
+                                                .filter((subItem) => !subItem.hidden)
+                                                .map((subItem, index) => (jsxRuntime.jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))), extraContent] }), footer && (jsxRuntime.jsx(Sidebar.Footer, { children: jsxRuntime.jsx(Sidebar.Menu, { children: jsxRuntime.jsx(Sidebar.MenuItem, { children: footer }) }) })), jsxRuntime.jsx(Sidebar.Rail, {})] })), jsxRuntime.jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && 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 { 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
-                    .filter((subItem) => !subItem.hidden)
-                    .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))) }))] }));
+    if (!(items === null || items === void 0 ? void 0 : items.filter((subItem) => !subItem.hidden).length)) {
+        return (jsxRuntime.jsx(Sidebar.MenuItem, { children: jsxRuntime.jsx(Sidebar.MenuButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, pathname), children: jsxRuntime.jsxs(reactRouterDom.Link, { to: pathname, className: "font-medium", children: [Icon && jsxRuntime.jsx(Icon, {}), title] }) }) }));
+    }
+    const isOpen = open &&
+        (isLinkStartsWithPathname(currentPath, pathname) ||
+            items.some((subItem) => isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`)));
+    return (jsxRuntime.jsx(Collapsible, { asChild: true, open: isOpen, className: "group/collapsible", children: jsxRuntime.jsxs(Sidebar.MenuItem, { children: [jsxRuntime.jsx(Collapsible.Trigger, { asChild: true, children: jsxRuntime.jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: open
+                            ? currentPath === pathname &&
+                                !items.some((subItem) => isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`))
+                            : isLinkStartsWithPathname(currentPath, pathname), children: jsxRuntime.jsxs(reactRouterDom.Link, { to: pathname, className: "font-medium", children: [Icon && jsxRuntime.jsx(Icon, {}), title, jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }) }), items && (jsxRuntime.jsx(Collapsible.Content, { children: jsxRuntime.jsx(Sidebar.MenuSub, { children: items
+                            .filter((subItem) => !subItem.hidden)
+                            .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);
@@ -2183,6 +2202,7 @@ exports.Block = Block;
 exports.Button = Button;
 exports.Card = Card;
 exports.CheckboxInput = CheckboxInput;
+exports.Collapsible = Collapsible;
 exports.ConfirmDialog = ConfirmDialog;
 exports.DataTable = DataTable;
 exports.DateTimeInput = DateTimeInput;

package/index.esm.js

@@ -4,6 +4,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import dayjs from 'dayjs';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { HelpCircle, XIcon, AtSignIcon, EyeIcon, EyeOffIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronDownIcon, CalendarIcon, ClockIcon, CheckIcon, CircleIcon, CloudUploadIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsDownUpIcon, ChevronsUpDownIcon, ArrowUpDownIcon, SortAscIcon, SortDescIcon, MinusIcon, PlusIcon, PanelLeft, MoonIcon, SunIcon, MonitorIcon } from 'lucide-react';
 import localeData from 'dayjs/plugin/localeData';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -597,6 +598,14 @@ const Card = forwardRef((_a, ref) => {
     return (jsx(Block, Object.assign({ className: cn('rounded-lg border p-3 dark:border-slate-700 dark:bg-slate-900', className) }, blockProps, { ref: ref, children: children })));
 });
 
+const $Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+const Collapsible = Object.assign($Collapsible, {
+    Trigger: CollapsibleTrigger,
+    Content: CollapsibleContent,
+});
+
 const directionClasses = {
     row: {
         normal: 'flex-row',
@@ -1238,7 +1247,7 @@ const SelectInput = forwardRef((_a, ref) => {
     const [open, setOpen] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const pureItems = useMemo(() => items.flatMap((item) => (item.group ? item.items : [item])), [items]);
-    const selectedItems = useMemo(() => value
+    const selectedItems = useMemo(() => isNotNullOrUndefined(value)
         ? !multiple
             ? pureItems.find((item) => selectPredicate(item.value, value))
                 ? [pureItems.find((item) => selectPredicate(item.value, value))]
@@ -1278,7 +1287,7 @@ const SelectInput = forwardRef((_a, ref) => {
             }
         }
         else if (multiple) {
-            if (selectedMap[id]) {
+            if (isNotNullOrUndefined(selectedMap[id])) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(selectedItems.filter((item) => item.id !== id).map((item) => item.value));
             }
             else {
@@ -1304,15 +1313,18 @@ const SelectInput = forwardRef((_a, ref) => {
     const ItemComponent = multiple ? DropdownMenu.CheckboxItem : DropdownMenu.RadioItem;
     const RenderOption = useCallback((option) => {
         return (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) => {
+                'bg-slate-200 dark:bg-slate-700': isNotNullOrUndefined(selectedMap[option.id]),
+            }), value: String(option.id), checked: isNotNullOrUndefined(selectedMap[option.id]), onSelect: (event) => {
                 multiple && event.preventDefault();
                 handleOnSelect(option.id);
-            }, children: jsx("span", { children: renderItem(option, !!selectedMap[option.id]) }) }));
+            }, children: jsx("span", { children: renderItem(option, isNotNullOrUndefined(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, 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 py-1.5 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: "py-1.5 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))) })] })] }));
 });
+function isNotNullOrUndefined(value) {
+    return value !== null && value !== undefined;
+}
 
 const FileInput = forwardRef((_a, ref) => {
     var { className, value, onChange, onFileChange, accept } = _a, props = __rest(_a, ["className", "value", "onChange", "onFileChange", "accept"]);
@@ -2027,23 +2039,29 @@ const Sidebar = Object.assign($Sidebar, {
 const Navbar = ({ className, sidebarTriggerClassName, leftSlot, rightSlot, }) => (jsx(Block, { className: cn('border-b p-3 dark:border-slate-700', className), fullWidth: true, children: jsxs(Flex, { align: "center", justify: "between", children: [jsxs(Flex, { align: "center", children: [jsx(Sidebar.Trigger, { className: sidebarTriggerClassName }), leftSlot] }), rightSlot] }) }));
 
 const Layout = (_a) => {
-    var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "footer"]), { navbarProps } = _a;
-    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, { children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsx(Sidebar.Content, { className: "gap-0", children: items
-                            .filter((item) => !item.hidden)
-                            .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: 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
-                                            .filter((subItem) => !subItem.hidden)
-                                            .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))) }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && jsx(Navbar, Object.assign({}, navbarProps)), jsx(Flex, { className: cn('overflow-hidden p-3', className), direction: "column", fullWidth: true, fullHeight: true, children: children })] })] }));
+    var { children, className } = _a, _b = _a.sidebarProps, { basePath, header, items, extraContent, footer } = _b, sidebarProps = __rest(_b, ["basePath", "header", "items", "extraContent", "footer"]), { navbarProps } = _a;
+    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, { children: [header && (jsx(Sidebar.Header, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: header }) }) })), jsxs(Sidebar.Content, { className: "gap-0", children: [items
+                                .filter((item) => !item.hidden)
+                                .map((item, index) => item.type === 'item' ? (jsx(Sidebar.Group, { children: jsx(Sidebar.Menu, { children: jsx(RenderSideBarItem, Object.assign({ basePath: 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
+                                                .filter((subItem) => !subItem.hidden)
+                                                .map((subItem, index) => (jsx(RenderSideBarItem, Object.assign({ basePath: basePath }, subItem), index))) }) })] }, index))), extraContent] }), footer && (jsx(Sidebar.Footer, { children: jsx(Sidebar.Menu, { children: jsx(Sidebar.MenuItem, { children: footer }) }) })), jsx(Sidebar.Rail, {})] })), jsxs(Flex, { className: "gap-0 overflow-hidden", direction: "column", fullHeight: true, fullWidth: true, children: [navbarProps && 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 { open } = useSidebar();
     const currentPath = useMemo(() => location.pathname.replace(basePath, '').replace(/^\/*/, ''), [basePath, location.pathname]);
-    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
-                    .filter((subItem) => !subItem.hidden)
-                    .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))) }))] }));
+    if (!(items === null || items === void 0 ? void 0 : items.filter((subItem) => !subItem.hidden).length)) {
+        return (jsx(Sidebar.MenuItem, { children: jsx(Sidebar.MenuButton, { asChild: true, isActive: isLinkStartsWithPathname(currentPath, pathname), children: jsxs(Link, { to: pathname, className: "font-medium", children: [Icon && jsx(Icon, {}), title] }) }) }));
+    }
+    const isOpen = open &&
+        (isLinkStartsWithPathname(currentPath, pathname) ||
+            items.some((subItem) => isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`)));
+    return (jsx(Collapsible, { asChild: true, open: isOpen, className: "group/collapsible", children: jsxs(Sidebar.MenuItem, { children: [jsx(Collapsible.Trigger, { asChild: true, children: jsx(Sidebar.MenuButton, { asChild: true, tooltip: title, isActive: open
+                            ? currentPath === pathname &&
+                                !items.some((subItem) => isLinkStartsWithPathname(currentPath, `${pathname}/${subItem.pathname}`))
+                            : isLinkStartsWithPathname(currentPath, pathname), children: jsxs(Link, { to: pathname, className: "font-medium", children: [Icon && jsx(Icon, {}), title, jsx(ChevronRightIcon, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }) }), items && (jsx(Collapsible.Content, { children: jsx(Sidebar.MenuSub, { children: items
+                            .filter((subItem) => !subItem.hidden)
+                            .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);
@@ -2149,4 +2167,4 @@ const ThemeSelector = ({ className }) => {
     return (jsxs(DropdownMenu, { children: [jsx(DropdownMenu.Trigger, { asChild: true, children: jsx(Button, { prefixIcon: resolvedTheme === 'dark' ? MoonIcon : SunIcon, className: className, variant: "text" }) }), jsxs(DropdownMenu.Content, { children: [jsxs(DropdownMenu.Item, { onClick: () => setTheme('light'), children: [jsx(DropdownMenu.Icon, { icon: SunIcon }), "Light"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('dark'), children: [jsx(DropdownMenu.Icon, { icon: MoonIcon }), "Dark"] }), jsxs(DropdownMenu.Item, { onClick: () => setTheme('system'), children: [jsx(DropdownMenu.Icon, { icon: MonitorIcon }), "System"] })] })] }));
 };
 
-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, SHOW_IDS_COOKIE_MAX_AGE, SHOW_IDS_COOKIE_NAME, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, SelectInput, Separator, Sheet, Sidebar, SidebarContext, SidebarContextProvider, Skeleton, Spinner, Switch, THEME_COOKIE_MAX_AGE, THEME_COOKIE_NAME, THEME_MEDIA_QUERY, Table, Tabs, TextInput, TextareaInput, ThemeSelector, Tooltip, cn, compareDates, generalComparator, getDisplayDate, getValueFromCookie, isEmpty, mergeRefs, resolveTargetObject, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar };
+export { Badge, BasicInput, BasicInputExtension, Block, Button, Card, CheckboxInput, Collapsible, 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, SHOW_IDS_COOKIE_MAX_AGE, SHOW_IDS_COOKIE_NAME, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, SelectInput, Separator, Sheet, Sidebar, SidebarContext, SidebarContextProvider, Skeleton, Spinner, Switch, THEME_COOKIE_MAX_AGE, THEME_COOKIE_NAME, THEME_MEDIA_QUERY, Table, Tabs, TextInput, TextareaInput, ThemeSelector, Tooltip, cn, compareDates, generalComparator, getDisplayDate, getValueFromCookie, isEmpty, mergeRefs, resolveTargetObject, useDays, useIsMobile, useLayoutContext, useLongPress, useMonths, useOnSwipe, useOutsideClick, usePagination, useSidebar };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tw-react-components",
   "description": "A set of React components build with TailwindCSS to make a nice dashboard.",
-  "version": "0.0.146",
+  "version": "0.0.148",
   "license": "MIT",
   "homepage": "https://bacali95.github.io/tw-react-components",
   "author": {

package/src/components/Collapsible/index.d.ts

@@ -0,0 +1,5 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Trigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/src/components/Layout/index.d.ts

@@ -20,6 +20,7 @@ export type SidebarProps = ComponentProps<typeof Sidebar> & {
         hidden?: boolean;
         items: SidebarItem[];
     })[];
+    extraContent?: ReactNode;
     footer?: ReactNode;
 };
 type Props = {

package/src/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './Badge';
 export * from './Block';
 export * from './Button';
 export * from './Card';
+export * from './Collapsible';
 export * from './DataTable';
 export * from './Dialog';
 export * from './DropdownMenu';