@m4l/components 9.20.0 → 9.21.0

package/components/AppBar/styles.js

@@ -1,65 +1,108 @@
 const a = {
   /**
-   * ****************************************************
-   * Estilos para el contenedor raíz del componente.
-   * ****************************************************
+   * Styles for the AppBar root container.
    */
-  appBarRoot: ({ theme: s }) => ({
+  appBarRoot: ({ theme: i, ownerState: s }) => ({
+    // Use the elevated `base` surface while the embedded Areas surface has an
+    // expanded module or the sidebar is expanded (anchored); fall back to the
+    // default surface otherwise.
+    backgroundColor: s?.hasExpandedModule || s?.sidebarAnchored ? i.vars.palette.background.base : i.vars.palette.background.default,
+    borderColor: i.vars.palette.border.disabled,
+    borderStyle: "solid",
+    borderWidth: 0,
     display: "flex",
-    flexDirection: "row",
-    flexWrap: "nowrap",
-    alignItems: "center",
-    height: s.vars.size.baseSpacings.sp12,
-    minHeight: s.vars.size.baseSpacings.sp12,
-    padding: `0 ${s.generalSettings.isMobile ? s.vars.size.baseSpacings.sp2 : s.vars.size.baseSpacings.sp4}`,
-    borderBottom: `1px solid ${s.vars.palette.border.default}`,
-    gap: s.vars.size.baseSpacings.sp3,
-    width: "100%",
-    overflow: "hidden"
+    flexShrink: 0,
+    overflow: s?.orientation === "vertical" ? "visible" : "hidden",
+    ...s?.orientation === "vertical" ? {
+      alignItems: "center",
+      borderRightWidth: "1px",
+      flexDirection: "column",
+      gap: i.vars.size.baseSpacings.sp4,
+      height: "100%",
+      maxWidth: `calc(${i.vars.size.baseSpacings.sp10} + ${i.vars.size.baseSpacings.sp4})`,
+      padding: `${i.vars.size.baseSpacings.sp4} ${i.vars.size.baseSpacings.sp2}`,
+      width: `calc(${i.vars.size.baseSpacings.sp10} + ${i.vars.size.baseSpacings.sp3})`
+    } : {
+      alignItems: "center",
+      borderBottomWidth: "1px",
+      flexDirection: "row",
+      gap: i.vars.size.baseSpacings.sp3,
+      minHeight: i.vars.size.baseSpacings.sp12,
+      padding: `0 ${i.vars.size.baseSpacings.sp4}`,
+      width: "100%"
+    }
   }),
   /**
-   ****************************************************
-   * Estilos para el contenedor del logotipo y nombre.
-   * ****************************************************
+   * Styles for the primary AppBar section.
    */
-  containerIsotypeName: ({ theme: s }) => ({
-    display: "flex",
-    flexDirection: "row",
+  primarySection: ({ theme: i, ownerState: s }) => ({
     alignItems: "center",
-    justifyContent: "space-between",
-    gap: s.vars.size.baseSpacings.sp3,
-    padding: `${s.vars.size.baseSpacings.sp3} 0`,
-    /**
-     * Se pone los px directamente porque no existe un token con este valor
-     */
-    width: "204px",
-    minWidth: "204px"
+    display: "flex",
+    ...s?.orientation === "vertical" ? {
+      flex: 1,
+      flexDirection: "column",
+      gap: i.vars.size.baseSpacings.sp2,
+      minHeight: 0,
+      width: "100%"
+    } : {
+      flex: 1,
+      flexDirection: "row",
+      gap: i.vars.size.baseSpacings.sp2,
+      minWidth: 0
+    }
   }),
   /**
-   * ****************************************************
-   * Estilos para el botón de menú de la barra de app
-   * en mobile.
-   * ****************************************************
+   * Styles for the menu toggle button.
    */
-  menuIconButton: ({ theme: s }) => ({
-    border: `1px solid ${s.vars.palette.border.default}`,
-    margin: `${s.vars.size.baseSpacings.sp3} 0`
-  }),
+  menuIconButton: {},
   /**
-   * **************************************************************
-   * Estilos para el contenedor de los elementos hijos del appbar
-   * **************************************************************
+   * Styles for the central AppBar content.
    */
-  content: ({ theme: s }) => ({
-    padding: `0 ${s.vars.size.baseSpacings.sp2}`,
+  content: ({ theme: i, ownerState: s }) => ({
+    alignItems: "center",
     display: "flex",
-    flexDirection: "row",
-    justifyContent: "flex-start",
+    minHeight: 0,
+    ...s?.orientation === "vertical" ? {
+      flex: 1,
+      flexDirection: "column",
+      gap: i.vars.size.baseSpacings.sp4,
+      justifyContent: "flex-start",
+      overflow: "visible",
+      width: "100%"
+    } : {
+      flex: 1,
+      flexDirection: "row",
+      gap: i.vars.size.baseSpacings.sp3,
+      justifyContent: "flex-start",
+      overflow: "auto hidden",
+      width: "100%"
+    }
+  }),
+  /**
+   * Styles for the trailing AppBar content.
+   */
+  endContent: ({ theme: i, ownerState: s }) => ({
     alignItems: "center",
-    flex: "1",
-    height: s.vars.size.baseSpacings.sp12,
-    overflow: "auto"
-  })
+    display: "flex",
+    flexShrink: 0,
+    ...s?.orientation === "vertical" ? {
+      flexDirection: "column",
+      gap: i.vars.size.baseSpacings.sp2,
+      paddingTop: s?.hasEndContent ? i.vars.size.baseSpacings.sp4 : 0,
+      width: "100%",
+      "& > *": {
+        width: "100%"
+      }
+    } : {
+      flexDirection: "row",
+      gap: i.vars.size.baseSpacings.sp2,
+      marginLeft: "auto"
+    }
+  }),
+  /**
+   * Compatibility slot kept for existing theme override consumers.
+   */
+  containerIsotypeName: () => ({})
 };
 export {
   a as appBarStyles

package/components/AppBar/types.d.ts

@@ -1,68 +1,102 @@
 import { ReactNode } from 'react';
-import { AppBarSlots } from './slots/AppBarEnum';
-import { APP_BAR_KEY } from './constants';
 import { Theme } from '@mui/material/styles';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { M4LOverridesStyleRules } from '../../@types/augmentations';
-/**
- * Propiedades de estilo para el componente raíz de la barra de aplicaciones.
- */
-export type RootStyleProps = {
-    isCollapse: boolean;
-    isOffset: boolean;
-    isSideBarVisible: boolean;
-};
+import { APP_BAR_KEY } from './constants';
+import { AppBarSlots } from './slots/AppBarEnum';
+export type AppBarOrientation = 'vertical' | 'horizontal';
 export interface AppBarProps {
     /**
-     * Color de la barra de aplicaciones.
+     * Optional color contract kept for compatibility with the shared package API.
      */
     color?: Extract<ComponentPalletColor, 'default'>;
     /**
-     * Opción de tamaño de la barra de aplicaciones.
+     * Supported AppBar sizes.
      */
     size?: Extract<Sizes, 'small' | 'medium'>;
     /**
-     * Opción de aparición de la barra de aplicaciones.
+     * AppBar visual variant.
      */
     variant?: 'standard';
     /**
-     * Indica si la barra lateral está anclada.
+     * AppBar orientation. The new platform contract is vertical-first.
+     */
+    orientation?: AppBarOrientation;
+    /**
+     * Whether the host sidebar is currently in its anchored desktop state.
      */
     sidebarAnchored: boolean;
     /**
-     * Función que activa la visualización del menú de la aplicación en la vista móvil.
+     * Toggle handler for the temporary mobile sidebar drawer.
      */
     onToggleVisible: () => void;
     /**
-     * Función que activa la visualización del menú de la aplicación en la vista móvil.
+     * Toggle handler for the anchored desktop sidebar state.
      */
     onToggleAnchored: () => void;
     /**
-     * Elementos secundarios de la barra de aplicaciones.
+     * Primary content rendered after the internal toggle control.
+     */
+    content?: ReactNode;
+    /**
+     * Secondary content rendered at the bottom of the vertical layout or at the
+     * end of the horizontal layout.
+     */
+    endContent?: ReactNode;
+    /**
+     * Backwards-compatible content slot. When `content` is provided, it wins.
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
-     * URL de la imagen del logotipo de la compañía.
+     * Deprecated company logo prop preserved for compatibility with existing
+     * host consumers.
      */
     companyLogo?: string;
     /**
-     * Nombre de la compañía.
+     * Deprecated company name prop preserved for compatibility with existing
+     * host consumers.
      */
     companyName?: string;
     /**
-     * Identificador de prueba.
+     * Whether the embedded Areas surface currently has an expanded module.
+     * When true, the root uses the elevated `base` background instead of `default`.
+     */
+    hasExpandedModule?: boolean;
+    /**
+     * Optional `data-testid` suffix for the root slot.
      */
     dataTestid?: string;
 }
-export type AppBarOwnerState = Pick<AppBarProps, 'size'> & {
+export interface AppBarOwnerState {
+    /**
+     * Whether the current device is mobile.
+     */
     isMobile: boolean;
-};
-/**
- * Define los tipos de Slots disponibles para el `AppBar`.
- */
+    /**
+     * Effective AppBar size.
+     */
+    size?: AppBarProps['size'];
+    /**
+     * Effective AppBar orientation.
+     */
+    orientation: AppBarOrientation;
+    /**
+     * Whether the AppBar currently renders end content.
+     */
+    hasEndContent: boolean;
+    /**
+     * Whether the embedded Areas surface currently has an expanded module.
+     */
+    hasExpandedModule: boolean;
+    /**
+     * Whether the host sidebar is currently expanded (anchored desktop state).
+     */
+    sidebarAnchored: boolean;
+    /**
+     * Extra owner-state fields consumed by styled slots.
+     */
+    [key: string]: unknown;
+}
 export type AppBarSlotsType = keyof typeof AppBarSlots;
-/**
- * Estilos aplicables al `AppBar`
- */
 export type AppBarStyles = M4LOverridesStyleRules<AppBarSlotsType, typeof APP_BAR_KEY, Theme>;
 //# sourceMappingURL=types.d.ts.map

package/components/AppBar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/AppBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAG3B,UAAU,EAAE,OAAO,CAAC;IAGpB,QAAQ,EAAE,OAAO,CAAC;IAGlB,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AACF,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;IACjD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,GAAG;IACzD,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAA;AACD;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,WAAW,CAAC;AACvD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,sBAAsB,CAAC,eAAe,EAAE,OAAO,WAAW,EAAE,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/AppBar/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE1D,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;IACjD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B;;OAEG;IACH,WAAW,EAAE,iBAAiB,CAAC;IAC/B;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,iBAAiB,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,WAAW,CAAC;AAEvD,MAAM,MAAM,YAAY,GAAG,sBAAsB,CAC/C,eAAe,EACf,OAAO,WAAW,EAClB,KAAK,CACN,CAAC"}

package/components/Card/constants.d.ts

@@ -1,5 +1,5 @@
 export declare const CARD_KEY = "M4LCard";
-export declare const CARD_CLASSES: Record<"text" | "root" | "selected" | "outlined", string>;
+export declare const CARD_CLASSES: Record<"root" | "text" | "selected" | "outlined", string>;
 export declare const CARD_SIZES: {
     compact: number;
     standard: number;