@pagamio/frontend-commons-lib 0.8.220 → 0.8.221

package/lib/components/layout/Sidebar.js

@@ -23,7 +23,7 @@ const AppSidebarMenu = () => {
                 return _jsx(AppSidebarItem, { ...itemProps }, getItemKey(item, index));
             }) }) }));
 };
-const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown, collapsible = true, showSeparator = false, isSectionHeader = false, }) => {
+const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown, collapsible = true, showSeparator = false, isSectionHeader = false, comingSoon = false, }) => {
     const { pathname, linkComponent: Link, desktop } = useAppSidebarContext();
     const { t } = useTranslation();
     // Handle section headers - render as a non-interactive label (hide when collapsed)
@@ -32,7 +32,7 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
         if (desktop.isCollapsed) {
             return null;
         }
-        return (_jsxs("div", { className: "pt-4 pb-1 px-3 first:pt-0", children: [showSeparator && _jsx("hr", { className: "mb-3 border-t border-gray-200 dark:border-gray-700" }), _jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400", children: t(label) })] }));
+        return (_jsxs("div", { className: "pt-3 first:pt-0", children: [_jsx("hr", { className: "mb-2 border-t border-gray-200 dark:border-gray-700" }), _jsx("span", { className: "px-3 text-[10px] font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-400", children: t(label) })] }));
     }
     // Check if current path matches this item or any of its descendants
     const isParentActive = href ? pathname === href || pathname.startsWith(`${href}/`) : false;
@@ -97,6 +97,14 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
     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) }));
     }
+    // Handle coming soon items - disabled with badge
+    if (comingSoon) {
+        return (_jsx(Sidebar.Item, { icon: icon, label: _jsx("span", { className: "inline-flex items-center rounded-md px-1.5 py-0.5 text-[9px] font-medium", style: {
+                    backgroundColor: 'rgb(254 243 199)', // amber-100
+                    color: 'rgb(180 83 9)', // amber-700
+                    border: '1px solid rgb(252 211 77)', // amber-300
+                }, children: t('sidebar.comingSoon', 'Soon') }), className: twMerge('text-gray-400 cursor-not-allowed', 'dark:text-gray-500'), 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) }));
 };

package/lib/context/SidebarContext.d.ts

@@ -29,6 +29,10 @@ interface AppSidebarPageItem {
      * Used for visual grouping in flat sidebar structures.
      */
     isSectionHeader?: boolean;
+    /**
+     * When true, shows "Coming Soon" badge and disables navigation.
+     */
+    comingSoon?: boolean;
 }
 /**
  * Props for the AppSidebarContext

package/lib/styles.css

@@ -2853,6 +2853,10 @@ input[type="range"]::-ms-fill-lower {
   padding-left: 0px;
   padding-right: 0px;
 }
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
 .px-12 {
   padding-left: 3rem;
   padding-right: 3rem;
@@ -2928,9 +2932,6 @@ input[type="range"]::-ms-fill-lower {
 .pb-0 {
   padding-bottom: 0px;
 }
-.pb-1 {
-  padding-bottom: 0.25rem;
-}
 .pb-2\.5 {
   padding-bottom: 0.625rem;
 }
@@ -3046,12 +3047,18 @@ input[type="range"]::-ms-fill-lower {
 .text-\[1\.5rem\] {
   font-size: 1.5rem;
 }
+.text-\[10px\] {
+  font-size: 10px;
+}
 .text-\[15px\] {
   font-size: 15px;
 }
 .text-\[1em\] {
   font-size: 1em;
 }
+.text-\[9px\] {
+  font-size: 9px;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;

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