@pagamio/frontend-commons-lib 0.8.232 → 0.8.233

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

@@ -132,6 +132,7 @@ import type { IconResolver, SidebarMenuGroup, SidebarMenuItemConfig, SidebarV2Pr
  */
 interface ComingSoonBadgeProps {
     className?: string;
+    button?: React.ReactNode;
 }
 /**
  * Professional "Coming Soon" indicator with subtle yellow styling
@@ -141,6 +142,10 @@ interface MenuItemRendererProps {
     item: SidebarMenuItemConfig;
     depth?: number;
     iconResolver?: IconResolver;
+    comingSoonBadgeClassName?: string;
+    comingSoonButtonClassName?: string;
+    comingSoonIconClassName?: string;
+    comingSoonTextClassName?: string;
 }
 /**
  * Recursive menu item renderer
@@ -149,6 +154,10 @@ declare const MenuItemRenderer: React.FC<MenuItemRendererProps>;
 interface MenuGroupRendererProps {
     group: SidebarMenuGroup;
     iconResolver?: IconResolver;
+    comingSoonBadgeClassName?: string;
+    comingSoonButtonClassName?: string;
+    comingSoonIconClassName?: string;
+    comingSoonTextClassName?: string;
 }
 /**
  * Render a menu group

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

@@ -10,7 +10,7 @@
  */
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { IconChevronDown, IconChevronRight, IconClock } from '@tabler/icons-react';
+import { IconChevronDown, IconChevronRight } from '@tabler/icons-react';
 import React, { useMemo, useState } from 'react';
 import { cn } from '../../helpers/utils';
 import { useTranslation } from '../../translations';
@@ -20,13 +20,13 @@ import { defaultIconResolver, resolveIcon } from './iconResolver';
 /**
  * Professional "Coming Soon" indicator with subtle yellow styling
  */
-const ComingSoonBadge = ({ className }) => {
-    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"] }));
+const ComingSoonBadge = ({ className, button }) => {
+    return (_jsxs("div", { className: "ml-auto inline-flex items-center gap-2", children: [_jsx("span", { className: cn('inline-flex items-center gap-1 rounded px-2 py-0.5', 'bg-yellow-200 dark:bg-yellow-900/20', 'text-[10px] font-medium text-yellow-600 dark:text-yellow-500', 'border border-yellow-200 rounded-full dark:border-yellow-800', className), children: "Soon" }), button] }));
 };
 /**
  * Recursive menu item renderer
  */
-const MenuItemRenderer = ({ item, depth = 0, iconResolver = defaultIconResolver }) => {
+const MenuItemRenderer = ({ item, depth = 0, iconResolver = defaultIconResolver, comingSoonBadgeClassName, comingSoonButtonClassName, comingSoonIconClassName, comingSoonTextClassName, }) => {
     const { open, isMobile, pathname, LinkComponent } = useSidebarV2();
     const { t } = useTranslation();
     const [isExpanded, setIsExpanded] = useState(false);
@@ -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 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));
+        return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { disabled: true, className: cn("cursor-not-allowed bg-yellow-50/50 hover:bg-yellow-50/50 dark:bg-yellow-900/10 dark:hover:bg-yellow-900/10", comingSoonButtonClassName), tooltip: item.tooltip || t(item.label), children: [IconComponent && (_jsx(IconComponent, { className: cn("h-4 w-4 shrink-0 text-yellow-600 dark:text-yellow-500", comingSoonIconClassName) })), (open || isMobile) && (_jsxs(_Fragment, { children: [_jsx("span", { className: cn("truncate text-yellow-700 dark:text-yellow-400", comingSoonTextClassName), children: t(item.label) }), _jsx(ComingSoonBadge, { className: comingSoonBadgeClassName, button: item.comingSoonButton })] }))] }) }, itemKey));
     }
     // Handle items with children (collapsible)
     if (item.items && item.items.length > 0) {
@@ -70,10 +70,10 @@ const MenuItemRenderer = ({ item, depth = 0, iconResolver = defaultIconResolver
         }
         // Non-collapsible sections (always visible children)
         if (item.collapsible === false) {
-            return (_jsxs("div", { className: item.className, children: [item.showSeparator && _jsx(SidebarSeparator, {}), _jsxs(SidebarGroupLabel, { children: [IconComponent && _jsx(IconComponent, { className: "h-4 w-4" }), (open || isMobile) && t(item.label)] }), _jsx(SidebarMenu, { children: item.items.map((child, index) => (_jsx(MenuItemRenderer, { item: child, depth: depth + 1, iconResolver: iconResolver }, child.key || child.href || `${child.label}-${index}`))) })] }, itemKey));
+            return (_jsxs("div", { className: item.className, children: [item.showSeparator && _jsx(SidebarSeparator, {}), _jsxs(SidebarGroupLabel, { children: [IconComponent && _jsx(IconComponent, { className: "h-4 w-4" }), (open || isMobile) && t(item.label)] }), _jsx(SidebarMenu, { children: item.items.map((child, index) => (_jsx(MenuItemRenderer, { item: child, depth: depth + 1, iconResolver: iconResolver, comingSoonBadgeClassName: comingSoonBadgeClassName, comingSoonButtonClassName: comingSoonButtonClassName, comingSoonIconClassName: comingSoonIconClassName, comingSoonTextClassName: comingSoonTextClassName }, child.key || child.href || `${child.label}-${index}`))) })] }, itemKey));
         }
         // Regular collapsible menu
-        return (_jsxs(SidebarMenuItem, { children: [_jsxs(SidebarMenuButton, { onClick: () => setIsExpanded(!shouldBeExpanded), isActive: isActive && !hasActiveChild, tooltip: item.tooltip || t(item.label), className: cn(hasActiveChild && 'text-sidebar-accent-foreground'), children: [IconComponent && _jsx(IconComponent, { className: "h-4 w-4 shrink-0" }), (open || isMobile) && (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate", children: t(item.label) }), shouldBeExpanded ? (_jsx(IconChevronDown, { className: "ml-auto h-4 w-4 shrink-0 transition-transform" })) : (_jsx(IconChevronRight, { className: "ml-auto h-4 w-4 shrink-0 transition-transform" }))] }))] }), shouldBeExpanded && (open || isMobile) && (_jsx(SidebarMenuSub, { children: item.items.map((child, index) => (_jsx(SidebarMenuItem, { children: child.items ? (_jsx(MenuItemRenderer, { item: child, depth: depth + 1, iconResolver: iconResolver })) : child.href ? (_jsx(SidebarMenuSubButton, { asChild: true, isActive: pathname === child.href, children: _jsxs(LinkComponent, { href: child.href, target: child.target, className: "flex items-center gap-2 w-full", children: [resolveIcon(child.icon, iconResolver) &&
+        return (_jsxs(SidebarMenuItem, { children: [_jsxs(SidebarMenuButton, { onClick: () => setIsExpanded(!shouldBeExpanded), isActive: isActive && !hasActiveChild, tooltip: item.tooltip || t(item.label), className: cn(hasActiveChild && 'text-sidebar-accent-foreground'), children: [IconComponent && _jsx(IconComponent, { className: "h-4 w-4 shrink-0" }), (open || isMobile) && (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate", children: t(item.label) }), shouldBeExpanded ? (_jsx(IconChevronDown, { className: "ml-auto h-4 w-4 shrink-0 transition-transform" })) : (_jsx(IconChevronRight, { className: "ml-auto h-4 w-4 shrink-0 transition-transform" }))] }))] }), shouldBeExpanded && (open || isMobile) && (_jsx(SidebarMenuSub, { children: item.items.map((child, index) => (_jsx(SidebarMenuItem, { children: child.items ? (_jsx(MenuItemRenderer, { item: child, depth: depth + 1, iconResolver: iconResolver, comingSoonBadgeClassName: comingSoonBadgeClassName, comingSoonButtonClassName: comingSoonButtonClassName, comingSoonIconClassName: comingSoonIconClassName, comingSoonTextClassName: comingSoonTextClassName })) : child.href ? (_jsx(SidebarMenuSubButton, { asChild: true, isActive: pathname === child.href, children: _jsxs(LinkComponent, { href: child.href, target: child.target, className: "flex items-center gap-2 w-full", children: [resolveIcon(child.icon, iconResolver) &&
                                         React.createElement(resolveIcon(child.icon, iconResolver), {
                                             className: 'h-3.5 w-3.5 shrink-0',
                                         }), _jsx("span", { className: "truncate", children: t(child.label) }), renderBadge(child.badge, t)] }) })) : (_jsx(SidebarMenuSubButton, { className: "cursor-default", children: _jsx("span", { className: "truncate", children: t(child.label) }) })) }, child.key || child.href || `${child.label}-${index}`))) }))] }, itemKey));
@@ -102,13 +102,13 @@ const renderBadge = (badge, t) => {
 /**
  * Render a menu group
  */
-const MenuGroupRenderer = ({ group, iconResolver = defaultIconResolver }) => {
+const MenuGroupRenderer = ({ group, iconResolver = defaultIconResolver, comingSoonBadgeClassName, comingSoonButtonClassName, comingSoonIconClassName, comingSoonTextClassName, }) => {
     const { t } = useTranslation();
     const { open, isMobile } = useSidebarV2();
     return (_jsxs(SidebarGroup, { className: group.className, children: [group.label && (open || isMobile) && (_jsxs(SidebarGroupLabel, { children: [resolveIcon(group.icon, iconResolver) &&
                         React.createElement(resolveIcon(group.icon, iconResolver), {
                             className: 'h-4 w-4',
-                        }), t(group.label)] })), _jsx(SidebarMenu, { children: group.items.map((item, index) => (_jsx(MenuItemRenderer, { item: item, iconResolver: iconResolver }, item.key || item.href || `${item.label}-${index}`))) })] }));
+                        }), t(group.label)] })), _jsx(SidebarMenu, { children: group.items.map((item, index) => (_jsx(MenuItemRenderer, { item: item, iconResolver: iconResolver, comingSoonBadgeClassName: comingSoonBadgeClassName, comingSoonButtonClassName: comingSoonButtonClassName, comingSoonIconClassName: comingSoonIconClassName, comingSoonTextClassName: comingSoonTextClassName }, item.key || item.href || `${item.label}-${index}`))) })] }));
 };
 /**
  * SidebarV2 - Complete sidebar component
@@ -132,9 +132,9 @@ const MenuGroupRenderer = ({ group, iconResolver = defaultIconResolver }) => {
  * </SidebarV2Provider>
  * ```
  */
-const SidebarV2 = ({ header, footer, groups, items, showRail = false, iconResolver = defaultIconResolver, className, contentClassName, headerClassName, footerClassName, }) => {
+const SidebarV2 = ({ header, footer, groups, items, showRail = false, iconResolver = defaultIconResolver, className, contentClassName, headerClassName, footerClassName, comingSoonBadgeClassName, comingSoonButtonClassName, comingSoonIconClassName, comingSoonTextClassName, }) => {
     const { isMobile } = useSidebarV2();
-    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, {})] }));
+    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, comingSoonBadgeClassName: comingSoonBadgeClassName, comingSoonButtonClassName: comingSoonButtonClassName, comingSoonIconClassName: comingSoonIconClassName, comingSoonTextClassName: comingSoonTextClassName })] }, group.key || group.label || `group-${index}`))), items && !groups && (_jsx(SidebarGroup, { children: _jsx(SidebarMenu, { children: items.map((item, index) => (_jsx(MenuItemRenderer, { item: item, iconResolver: iconResolver, comingSoonBadgeClassName: comingSoonBadgeClassName, comingSoonButtonClassName: comingSoonButtonClassName, comingSoonIconClassName: comingSoonIconClassName, comingSoonTextClassName: comingSoonTextClassName }, 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/types.d.ts

@@ -56,6 +56,8 @@ export interface SidebarMenuItemConfig {
     isSectionHeader?: boolean;
     /** Show "Coming Soon" badge and disable navigation */
     comingSoon?: boolean;
+    /** Optional button/action to display in coming soon items */
+    comingSoonButton?: ReactNode;
     /** Custom tooltip for collapsed state */
     tooltip?: string;
     /** Additional CSS classes */
@@ -177,6 +179,14 @@ export interface SidebarV2Props {
     headerClassName?: string;
     /** Footer className */
     footerClassName?: string;
+    /** Custom className for coming soon badge */
+    comingSoonBadgeClassName?: string;
+    /** Custom className for coming soon menu button */
+    comingSoonButtonClassName?: string;
+    /** Custom className for coming soon icon */
+    comingSoonIconClassName?: string;
+    /** Custom className for coming soon text span */
+    comingSoonTextClassName?: string;
 }
 /**
  * Props for internal menu item components

package/lib/styles.css

@@ -2862,6 +2862,10 @@ input[type="range"]::-ms-fill-lower {
   --tw-bg-opacity: 1;
   background-color: rgb(253 246 178 / var(--tw-bg-opacity, 1));
 }
+.bg-yellow-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 233 106 / var(--tw-bg-opacity, 1));
+}
 .bg-yellow-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(227 160 8 / var(--tw-bg-opacity, 1));
@@ -3082,9 +3086,6 @@ 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;

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