@codebit-programando-solucoes/codebit-web-antd 1.1.26 → 1.1.30

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/index.cjs

@@ -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`);
@@ -1647,7 +1690,7 @@ var __webpack_exports__ = {};
         RECAPTCHA_VALIDATION_FAIL: 'RECAPTCHA_VALIDATION_FAIL',
         SUCCESS: 'SUCCESS'
     });
-    const ForgotPassword = ({ navigateToLogin, submitRecoveryPassword })=>{
+    const ForgotPassword = ({ navigateToLogin, submitRecoveryPassword, title })=>{
         const [form] = external_antd_namespaceObject.Form.useForm();
         const { modal } = external_antd_namespaceObject.App.useApp();
         const [loading, setLoading] = (0, external_react_.useState)(false);
@@ -1667,7 +1710,7 @@ var __webpack_exports__ = {};
                 switch(result){
                     case LocalLoginRecoveryPasswordResult.SUCCESS:
                         modal.success({
-                            title: t('ForgotPassword.title'),
+                            title: title || t('ForgotPassword.title'),
                             content: t('ForgotPassword.resetSuccessMessage'),
                             onOk: handleNavigateToLogin,
                             okText: t('Common.ok')
@@ -1685,7 +1728,7 @@ var __webpack_exports__ = {};
                         break;
                     case LocalLoginRecoveryPasswordResult.RECAPTCHA_VALIDATION_FAIL:
                         modal.error({
-                            title: t('ForgotPassword.title'),
+                            title: title || t('ForgotPassword.title'),
                             content: t('Common.recaptchaFailed'),
                             okText: t('Common.ok')
                         });
@@ -1695,7 +1738,7 @@ var __webpack_exports__ = {};
                 ForgotPassword_logger.error(error);
                 react_namespaceObject.captureException(error);
                 modal.error({
-                    title: t('ForgotPassword.title'),
+                    title: title || t('ForgotPassword.title'),
                     content: t('Common.genericError'),
                     okText: t('Common.ok')
                 });
@@ -1704,7 +1747,7 @@ var __webpack_exports__ = {};
             }
         };
         return /*#__PURE__*/ (0, jsx_runtime.jsx)(LoginContainer, {
-            title: t('ForgotPassword.title'),
+            title: title || t('ForgotPassword.title'),
             children: /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Form, {
                 form: form,
                 name: 'forgot-password-form',
@@ -1766,6 +1809,7 @@ var __webpack_exports__ = {};
         });
     };
     ForgotPassword.propTypes = {
+        title: external_prop_types_default().string,
         navigateToLogin: external_prop_types_default().func,
         submitRecoveryPassword: external_prop_types_default().func.isRequired
     };
@@ -1774,7 +1818,7 @@ var __webpack_exports__ = {};
         INVALID_TOKEN: 'INVALID_TOKEN',
         SUCCESS: 'SUCCESS'
     });
-    const ChangePassword = ({ navigateToLogin, checkToken, submitChangePassword })=>{
+    const ChangePassword = ({ navigateToLogin, checkToken, submitChangePassword, title })=>{
         const navigate = (0, external_react_router_namespaceObject.useNavigate)();
         const [form] = external_antd_namespaceObject.Form.useForm();
         const { modal } = external_antd_namespaceObject.App.useApp();
@@ -1782,10 +1826,8 @@ var __webpack_exports__ = {};
         const [checkingToken, setCheckingToken] = (0, external_react_.useState)(true);
         const { t } = useCodebitWebAntdTranslation();
         t('');
-        const params = (0, external_react_router_namespaceObject.useParams)();
         const context = {
-            navigate,
-            params
+            navigate
         };
         const handleChangePassword = async (values)=>{
             try {
@@ -1794,7 +1836,7 @@ var __webpack_exports__ = {};
                 switch(result){
                     case LocalLoginChangePasswordResult.SUCCESS:
                         modal.success({
-                            title: t('ForgotPassword.title'),
+                            title: title || t('ChangePassword.title'),
                             content: t('ChangePassword.passwordChangedSuccess'),
                             onOk: handleNavigateToLogin,
                             okText: t('Common.close')
@@ -1802,7 +1844,7 @@ var __webpack_exports__ = {};
                         break;
                     case LocalLoginChangePasswordResult.INVALID_TOKEN:
                         modal.error({
-                            title: t('ForgotPassword.title'),
+                            title: title || t('ChangePassword.title'),
                             content: t('ChangePassword.tokenInvalidRecovery'),
                             onOk: handleNavigateToLogin,
                             okText: t('Common.close')
@@ -1813,7 +1855,7 @@ var __webpack_exports__ = {};
                 ChangePassword_logger.error(error);
                 react_namespaceObject.captureException(error);
                 modal.error({
-                    title: t('ForgotPassword.title'),
+                    title: title || t('ChangePassword.title'),
                     content: t('Common.genericError'),
                     okText: t('Common.ok')
                 });
@@ -1843,7 +1885,7 @@ var __webpack_exports__ = {};
                 ChangePassword_logger.error(error);
                 react_namespaceObject.captureException(error);
                 modal.error({
-                    title: t('ChangePassword.title'),
+                    title: title || t('ChangePassword.title'),
                     content: t('Common.genericError'),
                     okText: t('Common.ok')
                 });
@@ -1856,7 +1898,7 @@ var __webpack_exports__ = {};
             handleCheckToken().then();
         }, []);
         return /*#__PURE__*/ (0, jsx_runtime.jsx)(LoginContainer, {
-            title: t('ChangePassword.title'),
+            title: title || t('ChangePassword.title'),
             children: /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Spin, {
                 spinning: checkingToken,
                 children: /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Form, {
@@ -1964,7 +2006,8 @@ var __webpack_exports__ = {};
     ChangePassword.propTypes = {
         navigateToLogin: external_prop_types_default().func.isRequired,
         checkToken: external_prop_types_default().func.isRequired,
-        submitChangePassword: external_prop_types_default().func.isRequired
+        submitChangePassword: external_prop_types_default().func.isRequired,
+        title: external_prop_types_default().string
     };
     const useErrorModal_logger = new codebit_web_namespaceObject.Logger('useErrorModal');
     function useErrorModal() {

package/dist/public-pages/ChangePassword.d.ts

@@ -1,4 +1,5 @@
 import React = require('react');
+import { LocalLoginConfContext } from './Login';
 
 /**
  * Possible results for password change operations.
@@ -7,27 +8,19 @@ import React = require('react');
  *   Represents the outcome of a password change attempt.
  */
 export enum LocalLoginChangePasswordResult {
+    /** The provided token is invalid or has expired. */
     INVALID_TOKEN = 'INVALID_TOKEN',
+    /** The password was changed successfully. */
     SUCCESS = 'SUCCESS',
 }
 
-/**
- * Context interface for login flow navigation and parameters.
- *
- * @property navigate - Function to redirect to different routes
- * @property params - URL parameters from React Router
- */
-export interface LocalLoginConfContext {
-    navigate: (to: string) => void;
-    params: Record<string, string | undefined>;
-}
-
 /**
  * Props for the ChangePassword component.
  *
- * @property navigateToLogin - Callback to redirect to login screen
- * @property checkToken - Validates the password reset token
- * @property submitChangePassword - Submits new password with token validation
+ * @property navigateToLogin - Callback that redirects the user to the login screen.
+ * @property checkToken - Function that validates the password‑reset token.
+ * @property submitChangePassword - Function that submits the new password together with token validation.
+ * @property title - Optional custom title for the page.
  */
 export interface ChangePasswordProps {
     navigateToLogin: (context: LocalLoginConfContext) => Promise<void>;
@@ -36,12 +29,13 @@ export interface ChangePasswordProps {
         password: string,
         context: LocalLoginConfContext,
     ) => Promise<LocalLoginChangePasswordResult>;
+    title?: string;
 }
 
 /**
  * Password change interface component.
  *
  * @remarks
- *   Handles user password reset with token validation and form submission. Requires implementation of all callback functions for authentication flow.
+ *   Handles user password reset with token validation and form submission. All callback functions must be provided to integrate with the authentication flow.
  */
 export declare const ChangePassword: React.FC<ChangePasswordProps>;

package/dist/public-pages/ForgotPassword.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { LocalLoginConfContext } from './Login';
 
 /** Enumeration of possible statuses for password recovery operations. */
 export declare enum LocalLoginRecoveryPasswordResult {
@@ -7,17 +8,6 @@ export declare enum LocalLoginRecoveryPasswordResult {
     SUCCESS = 'SUCCESS',
 }
 
-/** Context object used for navigation within authentication flows. Contains navigation functions to redirect between authentication screens. */
-export interface LocalLoginConfContext {
-    /**
-     * Redirects to the specified route path.
-     *
-     * @param path - Target navigation path
-     * @param ...args - Additional navigation parameters
-     */
-    navigate: (path: string, ...args: any[]) => void;
-}
-
 /** Properties for the ForgotPassword component. */
 export interface ForgotPasswordProps {
     /**

package/dist/public-pages/index.d.ts

@@ -2,3 +2,4 @@ export * from './Login';
 export * from './LoginContainer';
 export * from './HandleError';
 export * from './ForgotPassword';
+export * from './ChangePassword';

package/package.json

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