@m4l/components 9.1.43 → 9.1.44

package/components/AppBar/AppBar.d.ts

@@ -4,6 +4,10 @@ import { AppBarProps } from './types';
  * Por lo general, contiene elementos de navegación, como botones para ir hacia atrás o hacia adelante, un botón de menú para
  * acceder a opciones adicionales y un campo de búsqueda.
  * También puede mostrar información relevante, como el título de la página actual o el nombre del usuario conectado.
+ * ### Dependencias:
+ * - **`useEnviroment:`** Hook que permite acceder a los recursos de archivos del cliente.
+ * - **`useModuleDictionary:`** Hook que permite acceder a las etiquetas de los módulos para el i18n
+ * - **`useIsMobile:`** Hook que permite saber si el dispositivo es móvil.
  * @param {AppBarProps} props - Propiedades del componente.
  * @returns {JSX.Element} Elemento que se retorna.
  * @example
@@ -16,7 +20,7 @@ import { AppBarProps } from './types';
  * >
  * @author Andrés Quintero - automatic
  * @createdAt 2024-11-29 14:26:18 - automatic
- * @updatedAt 2024-11-30 11:32:23 - automatic
+ * @updatedAt 2024-12-27 23:20:48 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
 export declare const AppBar: (props: AppBarProps) => import("react/jsx-runtime").JSX.Element;

package/components/AppBar/styles.js

@@ -5,15 +5,16 @@ const appBarStyles = {
    * ****************************************************
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-30 00:04:06 - automatic
-   * @updatedAt 2024-11-30 11:32:23 - automatic
+   * @updatedAt 2024-12-30 16:27:27 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   appBarRoot: ({ theme }) => ({
     display: "flex",
     flexDirection: "row",
     flexWrap: "nowrap",
+    alignItems: theme.generalSettings.isMobile ? "center" : "initial",
     height: theme.vars.size.baseSpacings.sp12,
-    padding: `0 ${theme.vars.size.baseSpacings.sp4}`,
+    padding: `0 ${theme.generalSettings.isMobile ? theme.vars.size.baseSpacings.sp2 : theme.vars.size.baseSpacings.sp4}`,
     borderBottom: `1px solid ${theme.vars.palette.border.default}`,
     gap: theme.vars.size.baseSpacings.sp3
   }),
@@ -23,7 +24,7 @@ const appBarStyles = {
    * ****************************************************
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-30 00:04:06 - automatic
-   * @updatedAt 2024-11-30 11:32:23 - automatic
+   * @updatedAt 2024-12-30 16:27:27 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   containerIsotypeName: ({ theme }) => ({
@@ -35,6 +36,7 @@ const appBarStyles = {
     padding: `${theme.vars.size.baseSpacings.sp3} 0`,
     /**
      * Se pone los px directamente porque no existe un token con este valor
+     * @createdAt 2024-12-30 16:27:25 - automatic
      */
     width: "204px",
     minWidth: "204px"
@@ -45,7 +47,7 @@ const appBarStyles = {
    * ****************************************************
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-30 00:04:06 - automatic
-   * @updatedAt 2024-11-30 11:32:23 - automatic
+   * @updatedAt 2024-12-30 16:27:27 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   imageIsotype: ({ theme }) => ({
@@ -59,7 +61,7 @@ const appBarStyles = {
    * ****************************************************
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-30 00:04:06 - automatic
-   * @updatedAt 2024-11-30 11:32:23 - automatic
+   * @updatedAt 2024-12-30 16:27:27 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   companyName: ({ theme }) => ({
@@ -74,7 +76,7 @@ const appBarStyles = {
    * ****************************************************
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-30 00:04:06 - automatic
-   * @updatedAt 2024-11-30 11:32:23 - automatic
+   * @updatedAt 2024-12-30 16:27:27 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   menuIconButton: ({ theme }) => ({
@@ -87,7 +89,7 @@ const appBarStyles = {
    * **************************************************************
    * @author Andrés Quintero - automatic
    * @createdAt 2024-11-30 00:04:06 - automatic
-   * @updatedAt 2024-11-30 11:32:23 - automatic
+   * @updatedAt 2024-12-30 16:27:27 - automatic
    * @updatedUser Andrés Quintero - automatic
    */
   content: ({ theme }) => ({
@@ -103,6 +105,10 @@ const appBarStyles = {
    * **************************************************************
    * Estilos para el contenedor del contenido del logotipo y nombre
    * **************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-30 16:27:25 - automatic
+   * @updatedAt 2024-12-30 16:27:27 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   contentIsoType: ({ theme }) => ({
     display: "flex",
@@ -115,6 +121,10 @@ const appBarStyles = {
    * **************************************************************
    * Estilos para el divisor entre el logotipo y el contenido
    * **************************************************************
+   * @author Andrés Quintero - automatic
+   * @createdAt 2024-12-30 16:27:25 - automatic
+   * @updatedAt 2024-12-30 16:27:27 - automatic
+   * @updatedUser Andrés Quintero - automatic
    */
   divider: ({ theme, ownerState }) => ({
     height: "100%",

package/components/AppBar/types.d.ts

@@ -6,23 +6,52 @@ import { Theme } from '@mui/material/styles';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 /**
  * Propiedades de estilo para el componente raíz de la barra de aplicaciones.
+ * @createdAt 2024-12-27 23:20:47 - automatic
  */
 export type RootStyleProps = {
-    /** Indica si la barra de aplicaciones está colapsada. */
     isCollapse: boolean;
-    /** Indica si hay un desplazamiento (offset) aplicado a la barra de aplicaciones. */
     isOffset: boolean;
-    /** Indica si la barra lateral está visible.*/
     isSideBarVisible: boolean;
 };
 export interface AppBarProps {
+    /**
+     * Color de la barra de aplicaciones.
+     * @createdAt 2024-12-27 23:20:47 - automatic
+     */
     color?: Extract<ComponentPalletColor, 'default'>;
+    /**
+     * Opción de tamaño de la barra de aplicaciones.
+     * @createdAt 2024-12-27 23:20:47 - automatic
+     */
     size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Opción de aparición de la barra de aplicaciones.
+     * @createdAt 2024-12-27 23:20:47 - automatic
+     */
     variant?: 'standard';
-    onToggleVisible: VoidFunction;
+    /**
+     * Función que activa la visualización del menú de la aplicación en la vista móvil.
+     * @author Andrés Quintero - automatic
+     * @createdAt 2024-12-31 08:24:48 - automatic
+     * @updatedAt 2024-12-31 08:24:49 - automatic
+     * @updatedUser Andrés Quintero - automatic
+     */
+    onToggleVisible: () => void;
+    /**
+     * Elementos secundarios de la barra de aplicaciones.
+     */
     children: ReactNode;
+    /**
+     * URL de la imagen del logotipo de la compañía.
+     */
     companyLogo?: string;
+    /**
+     * Nombre de la compañía.
+     */
     companyName?: string;
+    /**
+     * Identificador de prueba.
+     */
     dataTestid?: string;
 }
 export type AppBarOwnerState = Pick<AppBarProps, 'size'> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.43",
+  "version": "9.1.44",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"