@pagamio/frontend-commons-lib 0.8.249 → 0.8.251

package/lib/components/sidebar-v2/SidebarV2.js

@@ -31,13 +31,16 @@ const MenuItemRenderer = ({ item, depth = 0, iconResolver = defaultIconResolver,
     const [isExpanded, setIsExpanded] = useState(false);
     // Resolve icon
     const IconComponent = resolveIcon(item.icon, iconResolver);
-    // Check active state
-    const isActive = item.href ? pathname === item.href || pathname.startsWith(`${item.href}/`) : false;
+    // Check active state — exact match only for leaf items, prefix match for parents with children
+    const hasChildren = item.items && item.items.length > 0;
+    const isActive = item.href
+        ? pathname === item.href || (hasChildren && pathname.startsWith(`${item.href}/`))
+        : false;
     // Check if any child is active
     const hasActiveChild = useMemo(() => {
         const checkActive = (items = []) => {
             return items.some((child) => {
-                if (child.href && pathname.startsWith(child.href))
+                if (child.href && (pathname === child.href || pathname.startsWith(`${child.href}/`)))
                     return true;
                 if (child.items)
                     return checkActive(child.items);

package/lib/components/sidebar-v2/SidebarV2Primitives.js

@@ -20,12 +20,12 @@ const SidebarContainer = forwardRef(({ className, side = 'left', variant = 'defa
     // Mobile sidebar (offcanvas)
     if (isMobile) {
         const { setOpenMobile } = useSidebarV2();
-        return (_jsxs(_Fragment, { children: [openMobile && (_jsx("div", { className: "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity cursor-pointer", onClick: () => setOpenMobile(false), "aria-hidden": "true" })), _jsx("aside", { ref: ref, "data-state": openMobile ? 'open' : 'closed', "data-side": side, className: cn('fixed top-16 bottom-0 z-[60] flex flex-col', 'bg-background', 'text-foreground', 'transition-transform duration-300 ease-in-out', side === 'left' ? 'left-0' : 'right-0', openMobile ? 'translate-x-0' : side === 'left' ? '-translate-x-full' : 'translate-x-full', className), style: {
+        return (_jsxs(_Fragment, { children: [openMobile && (_jsx("div", { className: "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity cursor-pointer", onClick: () => setOpenMobile(false), "aria-hidden": "true" })), _jsx("aside", { ref: ref, "data-state": openMobile ? 'open' : 'closed', "data-side": side, className: cn('fixed top-16 bottom-0 z-[60] flex flex-col', 'bg-card', 'text-foreground', 'transition-transform duration-300 ease-in-out', side === 'left' ? 'left-0' : 'right-0', openMobile ? 'translate-x-0' : side === 'left' ? '-translate-x-full' : 'translate-x-full', className), style: {
                         width: config.mobileWidth,
                     }, ...props, children: children })] }));
     }
     // Desktop sidebar - Fixed position, starts below navbar
-    return (_jsx("aside", { ref: ref, "data-state": state, "data-side": side, "data-variant": variant, className: cn('group/sidebar fixed top-16 left-0 z-50', 'hidden md:flex flex-col', 'bg-background', 'text-foreground', 'border-border', 'transition-all duration-200 ease-in-out', side === 'left' ? 'border-r' : 'border-l', variant === 'floating' && 'rounded-lg border m-2 shadow-lg', variant === 'inset' && 'rounded-lg', className), style: {
+    return (_jsx("aside", { ref: ref, "data-state": state, "data-side": side, "data-variant": variant, className: cn('group/sidebar fixed top-16 left-0 z-50', 'hidden md:flex flex-col', 'bg-card', 'text-foreground', 'border-border', 'transition-all duration-200 ease-in-out', side === 'left' ? 'border-r' : 'border-l', variant === 'floating' && 'rounded-lg border m-2 shadow-lg', variant === 'inset' && 'rounded-lg', className), style: {
             width: open ? config.width : config.collapsedWidth,
             height: 'calc(100vh - 4rem)', // Full height minus navbar (64px)
         }, ...props, children: children }));
@@ -35,7 +35,7 @@ SidebarContainer.displayName = 'SidebarContainer';
  * Sticky header at the top of sidebar
  */
 const SidebarHeader = forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn('flex flex-col gap-2 p-4 border-b border-sidebar-border z-[60] relative bg-sidebar', className), ...props, children: children }));
+    return (_jsx("div", { ref: ref, className: cn('flex flex-col gap-2 p-4 border-b border-sidebar-border z-[60] relative bg-card', className), ...props, children: children }));
 });
 SidebarHeader.displayName = 'SidebarHeader';
 /**

package/lib/components/ui/FilterComponent.js

@@ -64,7 +64,7 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
             resetFilters();
         }
     };
-    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showSearch && (_jsx("div", { className: "w-full sm:w-[300px]", children: _jsx(Input, { leftSection: _jsx(IconSearch, { size: 16 }), placeholder: searctInputPlaceHolder, value: searchQuery, onChange: (event) => onSearch(event), onKeyDown: handleSearchKeyDown, className: "w-full", styles: { input: { height: 39 } }, "aria-label": "Search" }) })), filters.map((filter) => {
+    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showSearch && (_jsx("div", { className: "w-full sm:w-[300px]", children: _jsx(Input, { leftSection: _jsx(IconSearch, { size: 16 }), placeholder: searctInputPlaceHolder, value: searchQuery, onChange: (event) => onSearch(event), onKeyDown: handleSearchKeyDown, className: "w-full", styles: { input: { height: 39, backgroundColor: 'hsl(var(--muted))' } }, "aria-label": "Search" }) })), filters.map((filter) => {
                         const { name, type, options } = filter;
                         const value = selectedFilters[name];
                         const renderFilterInput = () => {

package/lib/components/ui/FilterWrapper.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const FilterWrapper = ({ isNarrow, children }) => {
-    return (_jsx("div", { className: "bg-muted shadow-xl rounded-lg p-4 mb-2", children: _jsx("div", { className: isNarrow
+    return (_jsx("div", { className: "bg-card shadow-xl rounded-lg p-4 mb-2", children: _jsx("div", { className: isNarrow
                 ? 'flex flex-col w-full space-y-4'
                 : 'flex flex-row justify-between items-start w-full space-y-0 space-x-0 sm:space-x-4', children: children }) }));
 };

package/lib/components/ui/PagamioTabs.d.ts

@@ -6,7 +6,7 @@
  * ISP: Only the props you use matter — everything is optional.
  *
  * Supports ALL Flowbite tab variants (default, underline, pills, fullWidth)
- * plus vertical orientation with matching styling.
+ * plus vertical orientation using the same Flowbite Tabs with a vertical theme.
  */
 import { type TabsTheme } from 'flowbite-react';
 import type { ComponentProps, FC, ReactNode } from 'react';
@@ -21,7 +21,7 @@ export interface PagamioTabsProps {
     tabs: PagamioTabItem[];
     /** Flowbite tab variant */
     variant?: 'default' | 'underline' | 'pills' | 'fullWidth';
-    /** Tab orientation — horizontal uses Flowbite, vertical uses custom layout */
+    /** Tab orientation — horizontal or vertical, both use Flowbite Tabs */
     orientation?: 'horizontal' | 'vertical';
     /** Controlled active tab index (0-based) */
     activeTab?: number;
@@ -39,7 +39,7 @@ export interface PagamioTabsProps {
     description?: string;
     /** Container className */
     className?: string;
-    /** Tab list className (horizontal only) */
+    /** Tab list className */
     tabListClassName?: string;
     /** Tab panel className */
     tabPanelClassName?: string;

package/lib/components/ui/PagamioTabs.js

@@ -7,12 +7,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * ISP: Only the props you use matter — everything is optional.
  *
  * Supports ALL Flowbite tab variants (default, underline, pills, fullWidth)
- * plus vertical orientation with matching styling.
+ * plus vertical orientation using the same Flowbite Tabs with a vertical theme.
  */
 import { TabItem as FlowbiteTabItem, Tabs } from 'flowbite-react';
 import { useRef, useState } from 'react';
-import Button from './Button';
-// ─── Contained Tab Theme (matches old ContainedTab look) ─────────────
+// ─── Horizontal Tab Theme (matches old ContainedTab look) ────────────
 const containedTheme = {
     base: 'flex flex-col gap-2',
     tablist: {
@@ -69,26 +68,63 @@ const containedTheme = {
     },
     tabpanel: 'p-0',
 };
-function VerticalTabs({ tabs, activeIndex, onSelect, variant, className, tabPanelClassName, }) {
-    const getItemClasses = (isActive) => {
-        const base = 'inline-flex items-center px-4 py-3 rounded-lg w-full text-left transition-colors duration-200 focus:outline-none whitespace-nowrap';
-        if (variant === 'pills') {
-            return isActive
-                ? `${base} text-white bg-primary hover:bg-primary/90`
-                : `${base} text-foreground/70 bg-muted hover:text-foreground hover:bg-accent`;
-        }
-        if (variant === 'underline') {
-            return isActive
-                ? `${base} text-primary border-l-2 border-primary bg-primary/10`
-                : `${base} text-foreground/70 border-l-2 border-transparent hover:text-foreground hover:bg-accent`;
-        }
-        // default / fullWidth
-        return isActive
-            ? `${base} text-foreground bg-card shadow-sm border border-border`
-            : `${base} text-foreground/70 bg-muted hover:text-foreground hover:bg-accent`;
-    };
-    return (_jsxs("div", { className: `flex flex-col md:flex-row gap-4 ${className ?? ''}`, children: [_jsx("div", { className: "md:w-64 flex-shrink-0", children: _jsx("ul", { className: "flex flex-row md:flex-col space-x-2 md:space-x-0 md:space-y-2 text-sm font-medium text-muted-foreground overflow-x-auto md:overflow-x-visible", children: tabs.map((tab, index) => (_jsx("li", { className: "flex-shrink-0", children: _jsxs(Button, { type: "button", variant: "ghost", onClick: () => !tab.disabled && onSelect(index), disabled: tab.disabled, className: getItemClasses(activeIndex === index), children: [tab.icon && (_jsx("span", { className: `w-4 h-4 me-2 ${activeIndex === index ? 'text-current' : 'text-muted-foreground'}`, children: _jsx(tab.icon, {}) })), tab.title] }) }, tab.id))) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("div", { className: `bg-card border border-border rounded-lg p-6 ${tabPanelClassName ?? ''}`, children: tabs[activeIndex]?.content }) })] }));
-}
+// ─── Vertical Tab Theme ──────────────────────────────────────────────
+const verticalTheme = {
+    base: 'flex flex-col md:flex-row gap-2',
+    tablist: {
+        base: 'flex flex-row md:flex-col md:w-44 flex-shrink-0 space-x-2 md:space-x-0 md:space-y-1 text-sm font-medium overflow-x-auto md:overflow-x-visible p-[5px] rounded-lg bg-card',
+        variant: {
+            default: '',
+            fullWidth: '',
+            pills: '',
+            underline: '',
+        },
+        tabitem: {
+            base: 'flex items-center justify-center px-4 py-2 rounded-lg w-full text-center text-sm font-medium whitespace-nowrap first:ml-0 disabled:cursor-not-allowed disabled:text-muted-foreground focus:outline-none transition-colors duration-200',
+            variant: {
+                default: {
+                    base: '',
+                    active: {
+                        on: 'text-foreground bg-card shadow-sm border border-border',
+                        off: 'text-foreground/70 bg-muted hover:text-foreground hover:bg-accent',
+                    },
+                },
+                fullWidth: {
+                    base: '',
+                    active: {
+                        on: 'text-foreground bg-card shadow-sm border border-border',
+                        off: 'text-foreground/70 bg-muted hover:text-foreground hover:bg-accent',
+                    },
+                },
+                pills: {
+                    base: '',
+                    active: {
+                        on: 'text-white bg-primary',
+                        off: 'text-foreground/70 hover:text-foreground hover:bg-accent',
+                    },
+                },
+                underline: {
+                    base: '',
+                    active: {
+                        on: 'text-primary border-l-2 border-primary bg-primary/10',
+                        off: 'text-foreground/70 border-l-2 border-transparent hover:text-foreground hover:bg-accent',
+                    },
+                },
+            },
+            icon: 'mr-2 h-5 w-5',
+        },
+    },
+    tabitemcontainer: {
+        base: 'flex-1 min-w-0',
+        variant: {
+            default: '',
+            fullWidth: '',
+            pills: '',
+            underline: '',
+        },
+    },
+    tabpanel: 'p-0',
+};
 // ─── PagamioTabs Component ───────────────────────────────────────────
 const PagamioTabs = ({ tabs, variant = 'default', orientation = 'horizontal', activeTab: controlledTab, defaultTab = 0, onTabChange, isSticky = false, isFullWidth = true, title, description, className = '', tabListClassName = '', tabPanelClassName = '', theme: customTheme, }) => {
     const [internalTab, setInternalTab] = useState(defaultTab);
@@ -103,24 +139,21 @@ const PagamioTabs = ({ tabs, variant = 'default', orientation = 'horizontal', ac
     };
     // ── Header ───────────────────────────────────────────────────────
     const header = title || description ? (_jsxs("div", { className: "mb-2", children: [title && _jsx("h2", { className: "text-lg font-semibold", children: title }), description && _jsx("p", { className: "text-sm text-muted-foreground", children: description })] })) : null;
-    // ── Vertical orientation ─────────────────────────────────────────
-    if (orientation === 'vertical') {
-        return (_jsxs("div", { className: `w-full ${className}`, children: [header, _jsx(VerticalTabs, { tabs: tabs, activeIndex: currentTab, onSelect: handleTabChange, variant: variant, tabPanelClassName: tabPanelClassName })] }));
-    }
-    // ── Horizontal orientation (Flowbite Tabs) ───────────────────────
-    const stickyClass = isSticky ? 'sticky top-0 z-10 bg-background' : '';
-    const widthClass = isFullWidth ? 'w-full' : 'w-fit';
-    // Merge themes: containedTheme base + customTheme overrides
+    const isVertical = orientation === 'vertical';
+    const baseTheme = isVertical ? verticalTheme : containedTheme;
+    // ── Build merged theme ─────────────────────────────────────────
+    const stickyClass = !isVertical && isSticky ? 'sticky top-0 z-10 bg-background' : '';
+    const widthClass = !isVertical && isFullWidth ? 'w-full' : '';
     const mergedTheme = {
-        ...containedTheme,
+        ...baseTheme,
         ...customTheme,
         tablist: {
-            ...containedTheme.tablist,
+            ...baseTheme.tablist,
             ...customTheme?.tablist,
-            base: `${stickyClass} ${containedTheme.tablist?.base ?? ''} ${widthClass} ${tabListClassName}`.trim(),
+            base: `${stickyClass} ${baseTheme.tablist?.base ?? ''} ${widthClass} ${tabListClassName}`.trim(),
         },
-        tabpanel: tabPanelClassName || containedTheme.tabpanel || 'p-0',
+        tabpanel: tabPanelClassName || baseTheme.tabpanel || 'p-0',
     };
-    return (_jsxs("div", { className: `w-full ${className}`, children: [header, _jsx(Tabs, { ref: tabsRef, "aria-label": "Tabs", variant: variant, onActiveTabChange: handleTabChange, theme: mergedTheme, className: "flex-nowrap", style: { display: 'flex', flexDirection: 'row' }, children: tabs.map((tab) => (_jsx(FlowbiteTabItem, { title: tab.title, icon: tab.icon, disabled: tab.disabled, active: currentTab === tabs.indexOf(tab), children: tab.content }, tab.id))) })] }));
+    return (_jsxs("div", { className: `w-full ${className}`, children: [header, _jsx(Tabs, { ref: tabsRef, "aria-label": "Tabs", variant: variant, onActiveTabChange: handleTabChange, theme: mergedTheme, children: tabs.map((tab) => (_jsx(FlowbiteTabItem, { title: tab.title, icon: tab.icon, disabled: tab.disabled, active: currentTab === tabs.indexOf(tab), children: tab.content }, tab.id))) })] }));
 };
 export default PagamioTabs;

package/lib/styles.css

@@ -6143,12 +6143,12 @@ video {
     max-height: 100%;
   }
 
-  .md\:w-48 {
-    width: 12rem;
+  .md\:w-44 {
+    width: 11rem;
   }
 
-  .md\:w-64 {
-    width: 16rem;
+  .md\:w-48 {
+    width: 12rem;
   }
 
   .md\:w-96 {
@@ -6211,10 +6211,10 @@ video {
     margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .md\:space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  .md\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-y-reverse: 0;
-    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
   }
 
   .md\:overflow-x-visible {

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.249",
+  "version": "0.8.251",
   "publishConfig": {
     "access": "public",
     "provenance": false