@pagamio/frontend-commons-lib 0.8.229 → 0.8.230

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

@@ -168,11 +168,8 @@ const NavbarV2 = ({ dashboardLink = '/dashboard', brandImage, linkComponent: Lin
             return slots.rightSection;
         return (_jsxs("div", { className: "flex items-center lg:gap-3", children: [slots.beforeActions, navBarActionComponents.map((action, index) => (_jsx(React.Fragment, { children: action }, `nav-v2-action-${index}`))), showThemeToggler && (renderThemeToggle ? renderThemeToggle() : _jsx(NavbarV2DarkThemeToggle, {})), slots.afterActions, _jsx("div", { className: "flex items-center", children: renderUserDropdown ? renderUserDropdown(userDropdownProps) : _jsx(NavbarV2UserDropdown, { ...userDropdownProps }) }), slots.afterUserDropdown] }));
     };
-    return (_jsxs(_Fragment, { children: [_jsx("nav", { className: cn(fixed ? 'fixed top-0 right-0' : '', showBorder ? `border-b ${borderColor.light} ${borderColor.dark}` : '', navbarBackground.light, navbarBackground.dark, className), style: {
+    return (_jsxs(_Fragment, { children: [_jsx("nav", { className: cn(fixed ? 'fixed top-0 left-0 right-0' : '', showBorder ? `border-b ${borderColor.light} ${borderColor.dark}` : '', navbarBackground.light, navbarBackground.dark, className), style: {
                     zIndex,
-                    // Account for sidebar width - navbar sits next to sidebar
-                    left: isMobile ? 0 : open ? config.width : config.collapsedWidth,
-                    transition: 'left 0.2s ease-in-out',
                     ...style,
                 }, children: _jsx("div", { className: "w-full px-4 py-3", children: _jsxs("div", { className: "flex items-center justify-between", children: [renderLeftSection(), renderRightSection()] }) }) }), _jsx(NavbarV2EnvironmentBanner, { ...environmentBanner })] }));
 };

package/lib/components/sidebar-v2/SidebarV2.d.ts

@@ -134,7 +134,7 @@ interface ComingSoonBadgeProps {
     className?: string;
 }
 /**
- * Clean, minimal "Coming Soon" indicator
+ * Professional "Coming Soon" indicator with subtle yellow styling
  */
 declare const ComingSoonBadge: React.FC<ComingSoonBadgeProps>;
 interface MenuItemRendererProps {

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

@@ -9,19 +9,19 @@
  * - Full mobile support with offcanvas
  */
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconChevronDown, IconChevronRight, IconClock } from '@tabler/icons-react';
 import React, { useMemo, useState } from 'react';
 import { cn } from '../../helpers/utils';
 import { useTranslation } from '../../translations';
 import { useSidebarV2 } from './SidebarV2Context';
-import { SidebarCloseButton, SidebarContainer, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarRail, SidebarSeparator, } from './SidebarV2Primitives';
+import { SidebarContainer, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarRail, SidebarSeparator, } from './SidebarV2Primitives';
 import { defaultIconResolver, resolveIcon } from './iconResolver';
 /**
- * Clean, minimal "Coming Soon" indicator
+ * Professional "Coming Soon" indicator with subtle yellow styling
  */
 const ComingSoonBadge = ({ className }) => {
-    return (_jsx("span", { className: cn('ml-auto inline-flex items-center rounded px-1.5 py-0.5', 'bg-gray-100 dark:bg-gray-800', 'text-[10px] text-gray-500 dark:text-gray-400', className), children: "Soon" }));
+    return (_jsxs("span", { className: cn('ml-auto inline-flex items-center gap-1 rounded px-2 py-0.5', 'bg-yellow-50 dark:bg-yellow-900/20', 'text-[10px] font-medium text-yellow-600 dark:text-yellow-500', 'border border-yellow-200 dark:border-yellow-800', className), children: [_jsx(IconClock, { className: "h-3 w-3 stroke-[1.5]" }), "Soon"] }));
 };
 /**
  * Recursive menu item renderer
@@ -59,7 +59,7 @@ const MenuItemRenderer = ({ item, depth = 0, iconResolver = defaultIconResolver
     }
     // Handle coming soon items
     if (item.comingSoon) {
-        return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { disabled: true, className: "cursor-not-allowed opacity-60", tooltip: item.tooltip || t(item.label), children: [IconComponent && _jsx(IconComponent, { className: "h-4 w-4 shrink-0" }), (open || isMobile) && (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate", children: t(item.label) }), _jsx(ComingSoonBadge, {})] }))] }) }, itemKey));
+        return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { disabled: true, className: "cursor-not-allowed bg-yellow-50/50 hover:bg-yellow-50/50 dark:bg-yellow-900/10 dark:hover:bg-yellow-900/10", tooltip: item.tooltip || t(item.label), children: [IconComponent && _jsx(IconComponent, { className: "h-4 w-4 shrink-0 text-yellow-600 dark:text-yellow-500" }), (open || isMobile) && (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate text-yellow-700 dark:text-yellow-400", children: t(item.label) }), _jsx(ComingSoonBadge, {})] }))] }) }, itemKey));
     }
     // Handle items with children (collapsible)
     if (item.items && item.items.length > 0) {
@@ -134,7 +134,7 @@ const MenuGroupRenderer = ({ group, iconResolver = defaultIconResolver }) => {
  */
 const SidebarV2 = ({ header, footer, groups, items, showRail = false, iconResolver = defaultIconResolver, className, contentClassName, headerClassName, footerClassName, }) => {
     const { isMobile } = useSidebarV2();
-    return (_jsxs(SidebarContainer, { className: className, children: [isMobile && _jsx(SidebarCloseButton, {}), header && _jsx(SidebarHeader, { className: headerClassName, children: header }), _jsxs(SidebarContent, { className: contentClassName, children: [groups?.map((group, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(SidebarSeparator, {}), _jsx(MenuGroupRenderer, { group: group, iconResolver: iconResolver })] }, group.key || group.label || `group-${index}`))), items && !groups && (_jsx(SidebarGroup, { children: _jsx(SidebarMenu, { children: items.map((item, index) => (_jsx(MenuItemRenderer, { item: item, iconResolver: iconResolver }, item.key || item.href || `${item.label}-${index}`))) }) }))] }), footer && _jsx(SidebarFooter, { className: footerClassName, children: footer }), showRail && _jsx(SidebarRail, {})] }));
+    return (_jsxs(SidebarContainer, { className: className, children: [header && _jsx(SidebarHeader, { className: headerClassName, children: header }), _jsxs(SidebarContent, { className: contentClassName, children: [groups?.map((group, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(SidebarSeparator, {}), _jsx(MenuGroupRenderer, { group: group, iconResolver: iconResolver })] }, group.key || group.label || `group-${index}`))), items && !groups && (_jsx(SidebarGroup, { children: _jsx(SidebarMenu, { children: items.map((item, index) => (_jsx(MenuItemRenderer, { item: item, iconResolver: iconResolver }, item.key || item.href || `${item.label}-${index}`))) }) }))] }), footer && _jsx(SidebarFooter, { className: footerClassName, children: footer }), showRail && _jsx(SidebarRail, {})] }));
 };
 export default SidebarV2;
 export { SidebarV2, ComingSoonBadge, MenuItemRenderer, MenuGroupRenderer };

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

@@ -19,11 +19,20 @@ const SidebarContainer = forwardRef(({ className, side = 'left', variant = 'defa
     const { state, open, openMobile, isMobile, config } = useSidebarV2();
     // Mobile sidebar (offcanvas)
     if (isMobile) {
-        return (_jsxs(_Fragment, { children: [openMobile && (_jsx("div", { className: "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity", "aria-hidden": "true" })), _jsx("aside", { ref: ref, "data-state": openMobile ? 'open' : 'closed', "data-side": side, className: cn('fixed inset-y-0 z-50 flex flex-col bg-sidebar text-sidebar-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 })] }));
+        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-sidebar text-sidebar-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,
+                        backgroundColor: 'var(--sidebar, hsl(0 0% 100%))',
+                        color: 'var(--sidebar-foreground, hsl(240 10% 3.9%))',
+                    }, ...props, children: children })] }));
     }
-    // Desktop sidebar - Fixed position
-    return (_jsx("aside", { ref: ref, "data-state": state, "data-side": side, "data-variant": variant, className: cn('group/sidebar fixed top-0 left-0 h-screen z-40', 'hidden md:flex flex-col', 'bg-sidebar text-sidebar-foreground border-sidebar-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: {
+    // 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-sidebar text-sidebar-foreground border-sidebar-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)
+            backgroundColor: 'var(--sidebar, hsl(0 0% 100%))',
+            color: 'var(--sidebar-foreground, hsl(240 10% 3.9%))',
+            borderColor: 'var(--sidebar-border, hsl(240 5.9% 90%))',
         }, ...props, children: children }));
 });
 SidebarContainer.displayName = 'SidebarContainer';
@@ -31,7 +40,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', 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-sidebar', className), ...props, children: children }));
 });
 SidebarHeader.displayName = 'SidebarHeader';
 /**

package/lib/components/ui/Dialog.js

@@ -9,7 +9,10 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', className), ...props })));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className), ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(Cross2Icon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
+const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg', className), style: {
+                backgroundColor: 'var(--background, hsl(0 0% 100%))',
+                borderColor: 'var(--border, hsl(240 5.9% 90%))',
+            }, ...props, children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(Cross2Icon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] })] })));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-1.5 text-center sm:text-left', className), ...props }));
 DialogHeader.displayName = 'DialogHeader';

package/lib/components/ui/Popover.js

@@ -5,7 +5,7 @@ import { cn } from '../../helpers';
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
-const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-50 w-72 rounded-md border p-4 shadow-md outline-none', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2', 'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), style: {
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('z-[70] w-72 rounded-md border p-4 shadow-md outline-none', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0', 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', 'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2', 'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', className), style: {
             backgroundColor: 'var(--popover, hsl(0 0% 100%))',
             color: 'var(--popover-foreground, hsl(240 10% 3.9%))',
             borderColor: 'var(--border, hsl(240 5.9% 90%))',

package/lib/components/ui/Select.js

@@ -42,8 +42,12 @@ const SelectContent = React.forwardRef(({ className, children, position = 'poppe
         };
         setFilteredChildren(filterChildren(children));
     }, [searchTerm, children]);
-    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('z-50 relative min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' &&
-                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx("div", { className: "p-2 border-b", children: _jsx("input", { type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full px-2 py-1 text-sm border rounded focus:outline-none focus:ring-1 focus:ring-gray-400", onKeyDown: (e) => {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn('z-[110] relative min-w-[8rem] overflow-hidden rounded-md border bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), style: {
+                backgroundColor: 'var(--popover, hsl(0 0% 100%))',
+                color: 'var(--popover-foreground, hsl(240 10% 3.9%))',
+                borderColor: 'var(--border, hsl(240 5.9% 90%))',
+            }, position: position, ...props, children: [_jsx("div", { className: "p-2 border-b", children: _jsx("input", { type: "text", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "w-full px-2 py-1 text-sm border rounded focus:outline-none focus:ring-1 focus:ring-gray-400", onKeyDown: (e) => {
                             e.stopPropagation();
                         } }) }), _jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1 max-h-[200px] overflow-y-auto', position === 'popper' && 'w-full min-w-[var(--radix-select-trigger-width)]'), children: filteredChildren.length > 0 ? (filteredChildren) : (_jsx("div", { className: "px-2 py-1.5 text-sm text-gray-500", children: "No options found" })) }), _jsx(SelectScrollDownButton, {})] }) }));
 });

package/lib/components/ui/Sheet.js

@@ -24,7 +24,10 @@ const sheetVariants = cva('fixed z-50 gap-4 bg-background p-6 shadow-lg transiti
         side: 'right',
     },
 });
-const SheetContent = React.forwardRef(({ side = 'right', className, children, ...props }, ref) => (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side }), className), ...props, children: [_jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(Cross2Icon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }), children] })] })));
+const SheetContent = React.forwardRef(({ side = 'right', className, children, ...props }, ref) => (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { ref: ref, className: cn(sheetVariants({ side }), className), style: {
+                backgroundColor: 'var(--background, hsl(0 0% 100%))',
+                borderColor: 'var(--border, hsl(240 5.9% 90%))',
+            }, ...props, children: [_jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(Cross2Icon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }), children] })] })));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 const SheetHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-2 text-center sm:text-left', className), ...props }));
 SheetHeader.displayName = 'SheetHeader';

package/lib/styles.css

@@ -984,6 +984,15 @@ input[type="range"]::-ms-fill-lower {
     --warning-foreground: 0 0% 0%;
     --info: 197 71% 52%;
     --info-foreground: 0 0% 100%;
+
+    /* Sidebar colors (for SidebarV2) */
+    --sidebar: 0 0% 100%;
+    --sidebar-foreground: 240 10% 3.9%;
+    --sidebar-border: 240 5.9% 90%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-primary: 305 38% 54%;
+    --sidebar-primary-foreground: 0 0% 100%;
   }
 
   .dark {
@@ -1020,6 +1029,15 @@ input[type="range"]::-ms-fill-lower {
     --chart-3: 197 71% 52%;
     --chart-4: 43 96% 56%;
     --chart-5: 305 38% 54%;
+
+    /* Sidebar colors (dark mode) */
+    --sidebar: 240 10% 3.9%;
+    --sidebar-foreground: 0 0% 98%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 0 0% 98%;
+    --sidebar-primary: 305 38% 54%;
+    --sidebar-primary-foreground: 0 0% 100%;
   }
   * {
   border-color: hsl(var(--border));
@@ -1209,6 +1227,9 @@ input[type="range"]::-ms-fill-lower {
 .top-12 {
   top: 3rem;
 }
+.top-16 {
+  top: 4rem;
+}
 .top-2 {
   top: 0.5rem;
 }
@@ -1257,6 +1278,12 @@ input[type="range"]::-ms-fill-lower {
 .z-\[110\] {
   z-index: 110;
 }
+.z-\[60\] {
+  z-index: 60;
+}
+.z-\[70\] {
+  z-index: 70;
+}
 .z-auto {
   z-index: auto;
 }
@@ -2537,6 +2564,10 @@ input[type="range"]::-ms-fill-lower {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
 }
+.border-yellow-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 233 106 / var(--tw-border-opacity, 1));
+}
 .border-yellow-300 {
   --tw-border-opacity: 1;
   border-color: rgb(250 202 21 / var(--tw-border-opacity, 1));
@@ -2839,6 +2870,9 @@ input[type="range"]::-ms-fill-lower {
   --tw-bg-opacity: 1;
   background-color: rgb(253 253 234 / var(--tw-bg-opacity, 1));
 }
+.bg-yellow-50\/50 {
+  background-color: rgb(253 253 234 / 0.5);
+}
 .bg-yellow-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(159 88 10 / var(--tw-bg-opacity, 1));
@@ -3048,6 +3082,9 @@ input[type="range"]::-ms-fill-lower {
 .fill-yellow-400 {
   fill: #E3A008;
 }
+.stroke-\[1\.5\] {
+  stroke-width: 1.5;
+}
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -3648,6 +3685,10 @@ input[type="range"]::-ms-fill-lower {
   --tw-text-opacity: 1;
   color: rgb(194 120 3 / var(--tw-text-opacity, 1));
 }
+.text-yellow-600 {
+  --tw-text-opacity: 1;
+  color: rgb(159 88 10 / var(--tw-text-opacity, 1));
+}
 .text-yellow-700 {
   --tw-text-opacity: 1;
   color: rgb(142 75 16 / var(--tw-text-opacity, 1));
@@ -3710,9 +3751,6 @@ input[type="range"]::-ms-fill-lower {
 .opacity-50 {
   opacity: 0.5;
 }
-.opacity-60 {
-  opacity: 0.6;
-}
 .opacity-70 {
   opacity: 0.7;
 }
@@ -4279,6 +4317,9 @@ input[type="range"]::-ms-fill-lower {
   --tw-bg-opacity: 1;
   background-color: rgb(252 233 106 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-yellow-50\/50:hover {
+  background-color: rgb(253 253 234 / 0.5);
+}
 .hover\:bg-gradient-to-br:hover {
   background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
 }
@@ -5175,6 +5216,10 @@ input[type="range"]::-ms-fill-lower {
   --tw-border-opacity: 1;
   border-color: rgb(159 88 10 / var(--tw-border-opacity, 1));
 }
+.dark\:border-yellow-800:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(114 59 19 / var(--tw-border-opacity, 1));
+}
 .dark\:bg-\[\#b45dae\]:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(180 93 174 / var(--tw-bg-opacity, 1));
@@ -5378,6 +5423,12 @@ input[type="range"]::-ms-fill-lower {
   --tw-bg-opacity: 1;
   background-color: rgb(99 49 18 / var(--tw-bg-opacity, 1));
 }
+.dark\:bg-yellow-900\/10:is(.dark *) {
+  background-color: rgb(99 49 18 / 0.1);
+}
+.dark\:bg-yellow-900\/20:is(.dark *) {
+  background-color: rgb(99 49 18 / 0.2);
+}
 .dark\:bg-opacity-80:is(.dark *) {
   --tw-bg-opacity: 0.8;
 }
@@ -5572,6 +5623,14 @@ input[type="range"]::-ms-fill-lower {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
+.dark\:text-yellow-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(227 160 8 / var(--tw-text-opacity, 1));
+}
+.dark\:text-yellow-500:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(194 120 3 / var(--tw-text-opacity, 1));
+}
 .dark\:text-yellow-600:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(159 88 10 / var(--tw-text-opacity, 1));
@@ -5754,6 +5813,9 @@ input[type="range"]::-ms-fill-lower {
   --tw-bg-opacity: 1;
   background-color: rgb(250 202 21 / var(--tw-bg-opacity, 1));
 }
+.dark\:hover\:bg-yellow-900\/10:hover:is(.dark *) {
+  background-color: rgb(99 49 18 / 0.1);
+}
 .dark\:hover\:text-gray-300:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));

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