@codebit-programando-solucoes/codebit-web-antd 1.1.29 → 1.1.32

package/dist/components/CssTokenBridge.d.ts

@@ -8,14 +8,57 @@ import { FC } from 'react';
  *
  * **Color tokens:**
  *
- * - --antd-color-bg-container (Background for containers)
- * - --antd-color-bg-elevated (Background for elevated surfaces)
- * - --antd-color-bg-layout (Background for layout)
- * - --antd-color-border (Border color)
+ * - --antd-color-bg-base (Base background color - page background)
+ * - --antd-color-bg-container (Background for containers like cards and panels)
+ * - --antd-color-bg-elevated (Background for elevated surfaces like modals)
+ * - --antd-color-bg-layout (Background for layout components)
+ * - --antd-color-bg-mask (Overlay mask background)
+ * - --antd-color-bg-spotlight (Spotlight background for focus rings)
+ * - --antd-color-border (Base border color)
+ * - --antd-color-border-secondary (Secondary border color)
+ * - --antd-color-border-hover (Border color on hover state)
+ * - --antd-color-border-disabled (Disabled border color)
  * - --antd-color-primary (Primary brand color)
+ * - --antd-color-success (Success state color)
+ * - --antd-color-success-bg (Success background color)
+ * - --antd-color-success-border (Success border color)
+ * - --antd-color-success-text (Success text color)
+ * - --antd-color-error (Error state color)
+ * - --antd-color-error-bg (Error background color)
+ * - --antd-color-error-border (Error border color)
+ * - --antd-color-error-text (Error text color)
+ * - --antd-color-warning (Warning state color)
+ * - --antd-color-warning-bg (Warning background color)
+ * - --antd-color-warning-border (Warning border color)
+ * - --antd-color-warning-text (Warning text color)
+ * - --antd-color-info (Informational state color)
+ * - --antd-color-info-bg (Info background color)
+ * - --antd-color-info-border (Info border color)
+ * - --antd-color-info-text (Info text color)
  * - --antd-color-text (Main text color)
  * - --antd-color-text-secondary (Secondary text color)
+ * - --antd-color-text-tertiary (Tertiary text color)
+ * - --antd-color-text-quaternary (Quaternary text color)
+ * - --antd-color-text-disabled (Disabled text color)
  * - --antd-color-split (Split/divider color)
+ * - --antd-color-link (Link color)
+ * - --antd-color-link-hover (Link hover color)
+ * - --antd-color-link-active (Link active color)
+ * - --antd-color-fill (General fill color for interactions)
+ * - --antd-color-fill-secondary (Secondary fill color for subtle backgrounds)
+ * - --antd-color-fill-tertiary (Tertiary fill color for very subtle backgrounds)
+ * - --antd-color-fill-quaternary (Quaternary fill color for minimal backgrounds)
+ * - --antd-color-fill-content (Content fill color)
+ * - --antd-color-fill-content-hover (Content fill hover state)
+ * - --antd-color-fill-content-selected (Content fill selected state)
+ * - --antd-color-fill-alter (Alternate fill color for alternating rows)
+ * - --antd-color-fill-alter-hover (Alternate fill hover state)
+ * - --antd-color-fill-alter-active (Alternate fill active state)
+ * - --antd-color-fill-alter-selected (Alternate fill selected state)
+ * - --antd-color-fill-alter-disabled (Alternate fill disabled state)
+ * - --antd-color-fill-disabled (General fill disabled state)
+ * - --antd-color-white (Pure white)
+ * - --antd-color-black (Pure black)
  *
  * **Margin tokens:**
  *
@@ -40,18 +83,18 @@ import { FC } from 'react';
  *
  * **Font size tokens:**
  *
- * - --antd-font-size-xxs: 8px (Micro text, accessibility disclaimers, disabled elements)
- * - --antd-font-size-xs: 10px (Extra small text, fine print, legal disclaimers)
+ * - --antd-font-size-xxs: 8px (Micro text, accessibility disclaimers)
+ * - --antd-font-size-xs: 10px (Extra small text, fine print)
  * - --antd-font-size-sm: 12px (Small text, captions, labels)
  * - --antd-font-size: 14px (Base font size, body text)
  * - --antd-font-size-lg: 16px (Large text, emphasis)
  * - --antd-font-size-xl: 20px (Extra large text, subheadings)
- * - --antd-font-size-xxl: 24px (Largest base text size for prominent content)
- * - --antd-font-size-heading1: 38px (Primary heading - main page titles)
- * - --antd-font-size-heading2: 30px (Secondary heading - section titles)
- * - --antd-font-size-heading3: 24px (Tertiary heading - subsections)
- * - --antd-font-size-heading4: 20px (Quaternary heading - component titles)
- * - --antd-font-size-heading5: 16px (Quinary heading - labels and captions)
+ * - --antd-font-size-xxl: 24px (Largest base text size)
+ * - --antd-font-size-heading1: 38px (Primary heading)
+ * - --antd-font-size-heading2: 30px (Secondary heading)
+ * - --antd-font-size-heading3: 24px (Tertiary heading)
+ * - --antd-font-size-heading4: 20px (Quaternary heading)
+ * - --antd-font-size-heading5: 16px (Quinary heading)
  *
  * **Line height tokens:**
  *
@@ -72,7 +115,6 @@ import { FC } from 'react';
  *
  * @example
  *     ```tsx
- *
  *     // Place this component at the root level of your app
  *     function App() {
  *       return (
@@ -86,13 +128,14 @@ import { FC } from 'react';
  *
  * @example
  *     ```css
+ *     // Use the exposed CSS variables
+ *     .table-row:nth-child(odd) {
+ *       background-color: var(--antd-color-fill-alter);
+ *     }
  *
- *     // Use the exposed CSS variables in your stylesheets
- *     .my-component {
+ *     .card {
+ *       border: 1px solid var(--antd-color-border);
  *       background-color: var(--antd-color-bg-container);
- *       padding: var(--antd-padding-md);
- *       color: var(--antd-color-text);
- *       font-size: var(--antd-font-size);
  *     }
  *     ```;
  */

package/dist/contexts/CodebitConfigContext.d.ts

@@ -1,7 +1,18 @@
 import * as React from 'react';
-import type { MenuProps } from 'antd';
 import type { ItemType } from 'antd/es/menu/interface';
 
+/** The configuration context for Codebit application, providing access to session and UI settings. */
+export const CodebitConfigContext: React.Context<CodebitConfigContextType | null>;
+
+/**
+ * Provider component for Codebit configuration and session management.
+ *
+ * @param props - Configuration provider properties.
+ */
+export function CodebitConfigProvider(
+    props: CodebitConfigProviderProps,
+): React.ReactElement;
+
 /** Menu item configuration */
 export type MenuItem = ItemType & {
     /** Array of roles that can access this item */
@@ -20,9 +31,6 @@ export interface LoggedUser {
     roles?: string[];
 }
 
-/** The configuration context for Codebit application, providing access to session and UI settings. */
-export const CodebitConfigContext: React.Context<CodebitConfigContextType | null>;
-
 /** Context type definition for Codebit configuration. */
 export interface CodebitConfigContextType {
     /**
@@ -49,8 +57,8 @@ export interface CodebitConfigContextType {
     secondarySidebar?: (user?: LoggedUser) => React.ReactNode | null;
     /** Width of the secondary sidebar in pixels (default: 280). */
     secondarySidebarWidth?: number;
-    /** Array of menu items displayed above the logout button in the bottom menu. */
-    bottomMenuItems?: MenuProps['items'];
+    /** Function that returns menu items configuration for items displayed above the logout button in the bottom menu. */
+    bottomMenuItems?: (user?: LoggedUser) => MenuItem[];
     /**
      * Function invoked when a menu item is clicked. Receives the item's key and **must return a boolean**.
      *
@@ -60,15 +68,6 @@ export interface CodebitConfigContextType {
     onMenuClick?: (key: string) => boolean;
 }
 
-/**
- * Provider component for Codebit configuration and session management.
- *
- * @param props - Configuration provider properties.
- */
-export function CodebitConfigProvider(
-    props: CodebitConfigProviderProps,
-): React.ReactElement;
-
 /** Properties for the CodebitConfigProvider component. */
 export interface CodebitConfigProviderProps {
     /** Child components that will have access to the configuration context. */
@@ -83,8 +82,8 @@ export interface CodebitConfigProviderProps {
     secondarySidebar?: (user: LoggedUser) => React.ReactNode | null;
     /** Width of the secondary sidebar in pixels (default: 280). */
     secondarySidebarWidth?: number;
-    /** **New**: Array of bottom‑menu items (Ant Design `MenuItemType`). */
-    bottomMenuItems?: ItemType[];
+    /** Function that returns bottom‑menu items. */
+    bottomMenuItems?: (user?: LoggedUser) => MenuItem[];
     /** Function to handle user logout. */
     doLogout: () => Promise<void>;
     /** Function to check login status and return user data. */

package/dist/index.cjs

@@ -329,7 +329,7 @@ var __webpack_exports__ = {};
     const codebit_web_namespaceObject = require("@codebit-programando-solucoes/codebit-web");
     const logger = new codebit_web_namespaceObject.Logger('CodebitConfigContext');
     const CodebitConfigContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
-    function CodebitConfigProvider({ children, menuItems, version = '1.0', showVersion = ()=>true, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems = [], doLogout, checkLogin, onMenuClick }) {
+    function CodebitConfigProvider({ children, menuItems, version = '1.0', showVersion = ()=>true, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, doLogout, checkLogin, onMenuClick }) {
         const [isLogged, setIsLogged] = (0, external_react_.useState)(null);
         const [user, setUser] = (0, external_react_.useState)(null);
         const logout = async ()=>{
@@ -398,7 +398,7 @@ var __webpack_exports__ = {};
         showVersion: external_prop_types_default().func,
         secondarySidebar: external_prop_types_default().func,
         secondarySidebarWidth: external_prop_types_default().number,
-        bottomMenuItems: external_prop_types_default().array,
+        bottomMenuItems: external_prop_types_default().func,
         doLogout: external_prop_types_default().func.isRequired,
         checkLogin: external_prop_types_default().func.isRequired,
         onMenuClick: external_prop_types_default().func
@@ -801,14 +801,57 @@ var __webpack_exports__ = {};
         const { token } = external_antd_namespaceObject.theme.useToken();
         (0, external_react_.useLayoutEffect)(()=>{
             const root = document.documentElement;
+            root.style.setProperty('--antd-color-bg-base', token['colorBgBase']);
             root.style.setProperty('--antd-color-bg-container', token['colorBgContainer']);
             root.style.setProperty('--antd-color-bg-elevated', token['colorBgElevated']);
             root.style.setProperty('--antd-color-bg-layout', token['colorBgLayout']);
-            root.style.setProperty('--antd-color-border', token['colorBorder']);
+            root.style.setProperty('--antd-color-bg-mask', token['colorBgMask']);
+            root.style.setProperty('--antd-color-bg-spotlight', token['colorBgSpotlight']);
             root.style.setProperty('--antd-color-primary', token['colorPrimary']);
+            root.style.setProperty('--antd-color-success', token['colorSuccess']);
+            root.style.setProperty('--antd-color-success-bg', token['colorSuccessBg']);
+            root.style.setProperty('--antd-color-success-border', token['colorSuccessBorder']);
+            root.style.setProperty('--antd-color-success-text', token['colorSuccessText']);
+            root.style.setProperty('--antd-color-warning', token['colorWarning']);
+            root.style.setProperty('--antd-color-warning-bg', token['colorWarningBg']);
+            root.style.setProperty('--antd-color-warning-border', token['colorWarningBorder']);
+            root.style.setProperty('--antd-color-warning-text', token['colorWarningText']);
+            root.style.setProperty('--antd-color-error', token['colorError']);
+            root.style.setProperty('--antd-color-error-bg', token['colorErrorBg']);
+            root.style.setProperty('--antd-color-error-border', token['colorErrorBorder']);
+            root.style.setProperty('--antd-color-error-text', token['colorErrorText']);
+            root.style.setProperty('--antd-color-info', token['colorInfo']);
+            root.style.setProperty('--antd-color-info-bg', token['colorInfoBg']);
+            root.style.setProperty('--antd-color-info-border', token['colorInfoBorder']);
+            root.style.setProperty('--antd-color-info-text', token['colorInfoText']);
             root.style.setProperty('--antd-color-text', token['colorText']);
             root.style.setProperty('--antd-color-text-secondary', token['colorTextSecondary']);
+            root.style.setProperty('--antd-color-text-tertiary', token['colorTextTertiary']);
+            root.style.setProperty('--antd-color-text-quaternary', token['colorTextQuaternary']);
+            root.style.setProperty('--antd-color-text-disabled', token['colorTextDisabled']);
+            root.style.setProperty('--antd-color-border', token['colorBorder']);
+            root.style.setProperty('--antd-color-border-secondary', token['colorBorderSecondary']);
+            root.style.setProperty('--antd-color-border-hover', token['colorBorderHover']);
+            root.style.setProperty('--antd-color-border-secondary-hover', token['colorBorderSecondaryHover']);
+            root.style.setProperty('--antd-color-border-disabled', token['colorBorderDisabled']);
             root.style.setProperty('--antd-color-split', token['colorSplit']);
+            root.style.setProperty('--antd-color-link', token['colorLink']);
+            root.style.setProperty('--antd-color-link-hover', token['colorLinkHover']);
+            root.style.setProperty('--antd-color-link-active', token['colorLinkActive']);
+            root.style.setProperty('--antd-color-fill', token['colorFill']);
+            root.style.setProperty('--antd-color-fill-secondary', token['colorFillSecondary']);
+            root.style.setProperty('--antd-color-fill-tertiary', token['colorFillTertiary']);
+            root.style.setProperty('--antd-color-fill-quaternary', token['colorFillQuaternary']);
+            root.style.setProperty('--antd-color-fill-content', token['colorFillContent']);
+            root.style.setProperty('--antd-color-fill-content-hover', token['colorFillContentHover']);
+            root.style.setProperty('--antd-color-fill-content-selected', token['colorFillContentSelected']);
+            root.style.setProperty('--antd-color-fill-alter', token['colorFillAlter']);
+            root.style.setProperty('--antd-color-fill-alter-hover', token['colorFillAlterHover']);
+            root.style.setProperty('--antd-color-fill-alter-active', token['colorFillAlterActive']);
+            root.style.setProperty('--antd-color-fill-alter-selected', token['colorFillAlterSelected']);
+            root.style.setProperty('--antd-color-fill-alter-disabled', token['colorFillAlterDisabled']);
+            root.style.setProperty('--antd-color-white', token['colorWhite']);
+            root.style.setProperty('--antd-color-black', token['colorBlack']);
             root.style.setProperty('--antd-margin-xxs', `${token['marginXXS']}px`);
             root.style.setProperty('--antd-margin-xs', `${token['marginXS']}px`);
             root.style.setProperty('--antd-margin-sm', `${token['marginSM']}px`);
@@ -1057,12 +1100,12 @@ var __webpack_exports__ = {};
         const navigate = (0, external_react_router_namespaceObject.useNavigate)();
         const location = (0, external_react_router_namespaceObject.useLocation)();
         if (!configCodebit || !configTheme) throw new Error('LoggedContainer must be used within CodebitConfigProvider and CodebitThemeContext');
-        const { logout, user, menuItems, version, showVersion, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems = [], onMenuClick } = configCodebit;
+        const { logout, user, menuItems, version, showVersion, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, onMenuClick } = configCodebit;
         const { isDarkMode } = configTheme;
         const theme = isDarkMode ? 'dark' : 'light';
         const allMenuItems = (0, external_react_.useMemo)(()=>[
                 ...menuItems(user),
-                ...bottomMenuItems
+                ...bottomMenuItems?.(user) ?? []
             ], [
             menuItems,
             user,
@@ -1076,8 +1119,19 @@ var __webpack_exports__ = {};
             menuItems,
             user
         ]);
+        const filteredBottomMenuItems = (0, external_react_.useMemo)(()=>{
+            if (!bottomMenuItems) return [];
+            return bottomMenuItems(user).filter((item)=>{
+                if (!item.roles) return true;
+                if (!user?.roles) return false;
+                return item.roles.some((role)=>user.roles.includes(role));
+            });
+        }, [
+            bottomMenuItems,
+            user
+        ]);
         const memoizedBottomMenuItems = (0, external_react_.useMemo)(()=>[
-                ...bottomMenuItems,
+                ...filteredBottomMenuItems,
                 {
                     key: MENU_KEY_APP_LOGOUT,
                     icon: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.LogoutOutlined, {}),
@@ -1085,7 +1139,7 @@ var __webpack_exports__ = {};
                     danger: true
                 }
             ], [
-            bottomMenuItems,
+            filteredBottomMenuItems,
             t
         ]);
         const [selectedKeys, setSelectedKeys] = (0, external_react_.useState)('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codebit-programando-solucoes/codebit-web-antd",
-  "version": "1.1.29",
+  "version": "1.1.32",
   "main": "./dist/index.cjs",
   "type": "module",
   "types": "./src/index.d.ts",