@pagamio/frontend-commons-lib 0.8.198 → 0.8.200

package/lib/components/layout/Sidebar.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Sidebar, TextInput } from 'flowbite-react';
-import { HiSearch } from 'react-icons/hi';
+import { Sidebar } from 'flowbite-react';
 import { twMerge } from 'tailwind-merge';
 import React, { useEffect, useState } from 'react';
 import { useAppSidebarContext } from '../../context';
 import { useLibTranslations, useTranslation } from '../../translations';
 const AppSidebarMenu = () => {
     const { pages } = useAppSidebarContext();
-    return (_jsx(Sidebar.Items, { children: _jsx(Sidebar.ItemGroup, { className: "mt-0 border-t-0 pb-1 pt-0", children: pages.map((item) => (_jsx(AppSidebarItem, { ...item }, item.label))) }) }));
+    return (_jsx(Sidebar.Items, { children: pages.map((section, index) => (_jsx(Sidebar.ItemGroup, { className: twMerge('mt-0 pb-2 pt-0', index > 0 && 'border-t border-gray-200 dark:border-gray-700 pt-4 mt-4'), children: section.items?.map((item) => _jsx(AppSidebarItem, { ...item }, item.label)) }, section.label || index))) }));
 };
 const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown }) => {
     const { pathname, linkComponent: Link } = useAppSidebarContext();
@@ -27,6 +26,10 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
     // If there's exactly one item, render it as a direct link instead of a dropdown
     if (items?.length === 1 && !forceDropdown) {
         const singleItem = items[0];
+        if (!singleItem.href) {
+            // If single item has no href, render without link
+            return (_jsx(Sidebar.Item, { icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 cursor-default', 'dark:text-gray-400'), children: t(label) }));
+        }
         return (_jsx(Sidebar.Item, { as: Link, href: singleItem.href, target: target, icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === singleItem.href &&
                 'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
     }
@@ -40,25 +43,30 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
                 !hasActiveChild(items) &&
                 'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), theme: { list: 'space-y-2 py-2 [&>li>div]:w-full' }, children: items.map((child) => (_jsx(React.Fragment, { children: child.items?.length ? (
                 // Recursively render nested items
-                _jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...child }) })) : (
-                // Render leaf item
+                _jsx("div", { className: "pl-3", children: _jsx(AppSidebarItem, { ...child }) })) : child.href ? (
+                // Render leaf item with link
                 _jsx(Sidebar.Item, { as: Link, href: child.href, target: child.target, icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', pathname === child.href &&
-                        'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(child.label) })) }, child.label))) }));
+                        'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(child.label) })) : (
+                // Render leaf item without link
+                _jsx(Sidebar.Item, { icon: child.icon, className: twMerge('justify-center [&>*]:font-normal', 'text-gray-600 cursor-default', 'dark:text-gray-400'), children: t(child.label) })) }, child.label))) }));
     }
     // Render leaf item
+    // If no href, render as a non-link item
+    if (!href) {
+        return (_jsx(Sidebar.Item, { icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', 'cursor-default'), children: t(label) }));
+    }
     return (_jsx(Sidebar.Item, { as: Link, href: href, target: target, icon: icon, label: badge && t(badge), className: twMerge('text-gray-600 hover:text-primary-700 hover:bg-primary-50/70', 'dark:text-gray-400 dark:hover:text-primary-300 dark:hover:bg-primary-900/30', isParentActive &&
             'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
 };
 const AppMobileSidebar = () => {
-    const { mobile: { isOpen, close }, sidebarHeader, } = useAppSidebarContext();
+    const { mobile: { isOpen, close }, sidebarHeader, sidebarFooter, } = useAppSidebarContext();
     const { t } = useTranslation();
-    const { tLib } = useLibTranslations();
     if (!isOpen)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": t('sidebar.mobileAriaLabel', 'Sidebar with multi-level dropdown example'), className: twMerge('fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-gray-200 pt-16 dark:border-gray-700 md:flex', isOpen && 'flex'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsxs("div", { className: "py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("form", { className: "pb-3", children: _jsx(TextInput, { icon: HiSearch, type: "search", placeholder: tLib('sidebar.searchPlaceholder', 'Search'), required: true, size: 32 }) }), _jsx(AppSidebarMenu, {})] }) }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-gray-900/50 pt-16 dark:bg-gray-900/90" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": t('sidebar.mobileAriaLabel', 'Sidebar with multi-level dropdown example'), className: twMerge('fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-gray-200 pt-16 dark:border-gray-700 md:flex', isOpen && 'flex'), id: "sidebar", children: _jsxs("div", { className: "flex h-full flex-col justify-between", children: [_jsxs("div", { className: "flex-1 overflow-y-auto py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("div", { className: "px-3", children: _jsx(AppSidebarMenu, {}) })] }), sidebarFooter && _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-3", children: sidebarFooter })] }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-gray-900/50 pt-16 dark:bg-gray-900/90" })] }));
 };
 const AppDesktopSidebar = () => {
-    const { desktop: { isCollapsed, setCollapsed }, sidebarHeader, } = useAppSidebarContext();
+    const { desktop: { isCollapsed, setCollapsed }, sidebarHeader, sidebarFooter, } = useAppSidebarContext();
     const [isPreview, setIsPreview] = useState(isCollapsed);
     const { tLib } = useLibTranslations();
     useEffect(() => {
@@ -78,7 +86,7 @@ const AppDesktopSidebar = () => {
             setCollapsed(true);
         },
     };
-    return (_jsx(Sidebar, { onMouseEnter: preview.enable, onMouseLeave: preview.disable, "aria-label": tLib('sidebar.desktopAriaLabel', 'Sidebar with multi-level dropdown example'), collapsed: isCollapsed, className: twMerge('fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-gray-200 pt-16 duration-75 dark:border-gray-700', isCollapsed && 'hidden w-16'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsxs("div", { className: "py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx(AppSidebarMenu, {})] }) }) }));
+    return (_jsx(Sidebar, { onMouseEnter: preview.enable, onMouseLeave: preview.disable, "aria-label": tLib('sidebar.desktopAriaLabel', 'Sidebar with multi-level dropdown example'), collapsed: isCollapsed, className: twMerge('fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-gray-200 pt-16 duration-75 dark:border-gray-700 bg-white dark:bg-gray-900', isCollapsed && 'hidden w-16'), id: "sidebar", children: _jsxs("div", { className: "flex h-full flex-col justify-between", children: [_jsxs("div", { className: "flex-1 overflow-y-auto py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("div", { className: "px-2", children: _jsx(AppSidebarMenu, {}) })] }), sidebarFooter && _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-3", children: sidebarFooter })] }) }));
 };
 const AppDashboardSidebar = () => {
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "md:hidden", children: _jsx(AppMobileSidebar, {}) }), _jsx("div", { className: "hidden md:block", children: _jsx(AppDesktopSidebar, {}) })] }));

package/lib/context/SidebarContext.d.ts

@@ -15,10 +15,11 @@ interface AppSidebarPageItem {
  * @interface AppSidebarContextProps
  * @property {Object} desktop - Desktop sidebar state and controls
  * @property {Object} mobile - Mobile sidebar state and controls
- * @property {AppSidebarPageItem[]} pages - Array of sidebar page items
+ * @property {AppSidebarPageItem[]} pages - Array of sidebar section items (each section has items property)
  * @property {string} pathname - Current route pathname
  * @property {React.ElementType} linkComponent - Component used for navigation links
  * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
+ * @property {React.ReactNode} sidebarFooter - Optional custom footer to render at bottom of sidebar
  */
 interface AppSidebarContextProps {
     desktop: {
@@ -35,16 +36,18 @@ interface AppSidebarContextProps {
     pathname: string;
     linkComponent: React.ElementType;
     sidebarHeader?: React.ReactNode;
+    sidebarFooter?: React.ReactNode;
 }
 /**
  * Props for the AppSidebarProvider component
  * @interface AppSidebarProviderProps
  * @property {boolean} initialCollapsed - Initial collapsed state of desktop sidebar
- * @property {AppSidebarPageItem[]} pages - Array of sidebar page items
+ * @property {AppSidebarPageItem[]} pages - Array of sidebar section items (each section has items property)
  * @property {string} pathname - Current route pathname
  * @property {React.ElementType} linkComponent - Component used for navigation links
  * @property {ReactNode} children - Child components
  * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
+ * @property {React.ReactNode} sidebarFooter - Optional custom footer to render at bottom of sidebar
  */
 interface AppSidebarProviderProps extends PropsWithChildren {
     initialCollapsed: boolean;
@@ -52,12 +55,13 @@ interface AppSidebarProviderProps extends PropsWithChildren {
     pathname: string;
     linkComponent: React.ElementType;
     sidebarHeader?: React.ReactNode;
+    sidebarFooter?: React.ReactNode;
 }
 /**
  * Provider component for sidebar state management
  * @param {AppSidebarProviderProps} props - Component props
  */
-declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, }: AppSidebarProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, }: AppSidebarProviderProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Hook for accessing sidebar context
  * @throws {Error} When used outside AppSidebarProvider

package/lib/context/SidebarContext.js

@@ -8,7 +8,7 @@ const AppSidebarContext = createContext(null);
  * Provider component for sidebar state management
  * @param {AppSidebarProviderProps} props - Component props
  */
-const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, }) => {
+const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, }) => {
     const [isOpenMobile, setIsOpenMobile] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
     function handleSetCollapsed(value) {
@@ -29,7 +29,8 @@ const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkC
         pathname,
         linkComponent,
         sidebarHeader,
-    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent, sidebarHeader]);
+        sidebarFooter,
+    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent, sidebarHeader, sidebarFooter]);
     return _jsx(AppSidebarContext.Provider, { value: value, children: children });
 };
 /**

package/lib/styles.css

@@ -2208,9 +2208,6 @@ input[type="range"]::-ms-fill-lower {
 .border-t {
   border-top-width: 1px;
 }
-.border-t-0 {
-  border-top-width: 0px;
-}
 .border-t-4 {
   border-top-width: 4px;
 }
@@ -2923,8 +2920,8 @@ input[type="range"]::-ms-fill-lower {
 .pb-0 {
   padding-bottom: 0px;
 }
-.pb-1 {
-  padding-bottom: 0.25rem;
+.pb-2 {
+  padding-bottom: 0.5rem;
 }
 .pb-2\.5 {
   padding-bottom: 0.625rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.198",
+  "version": "0.8.200",
   "publishConfig": {
     "access": "public",
     "provenance": false