@m4l/components 9.1.34 → 9.1.35

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/index.js

@@ -60,9 +60,7 @@ function TabsGpsTools() {
           {
             value: tab.id,
             icon: /* @__PURE__ */ jsx(Icon, { src: tab.iconUrl }),
-            className: clsx(gpsToolsClasses.gpsToolsTab, tab.className),
-            SKTWidth: "100px",
-            SKTHeight: "14px"
+            className: clsx(gpsToolsClasses.gpsToolsTab, tab.className)
           },
           tab.id
         ))

package/components/maps/components/MapGpsTools/subcomponents/TabsGpsTools/subcomponents/GeofenceAddEdit/subcomponents/MyTabs/index.js

@@ -52,9 +52,7 @@ function MyTabs() {
           {
             value: tab.id,
             icon: /* @__PURE__ */ jsx(Icon, { src: tab.iconUrl }),
-            label: "",
-            SKTWidth: "100px",
-            SKTHeight: "14px"
+            label: ""
           },
           tab.id
         ))

package/components/mui_extended/Tab/Slots/TabEnum.d.ts

@@ -4,6 +4,5 @@
  */
 export declare enum TabSlots {
     root = "root",
-    icon = "icon",
     tipography = "tipography"
 }

package/components/mui_extended/Tab/Slots/TabEnum.js

@@ -1,6 +1,5 @@
 var TabSlots = /* @__PURE__ */ ((TabSlots2) => {
   TabSlots2["root"] = "root";
-  TabSlots2["icon"] = "icon";
   TabSlots2["tipography"] = "tipography";
   return TabSlots2;
 })(TabSlots || {});

package/components/mui_extended/Tab/Slots/TabSlots.d.ts

@@ -16,11 +16,3 @@ export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<
 export declare const TypographyStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Typography/types').TypographyProps, keyof import('../../Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TabOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').TabOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-/**
- * `IconStyled`:
- * Componente de ícono estilizado basado en `Icon`, utilizado para mostrar un ícono en cada pestaña.
- * Usa el slot `icon` para modificar o añadir estilos específicos a los íconos en las pestañas.
- */
-export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Icon').IconProps, keyof import('../../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TabOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').TabOwnerState> & Record<string, unknown>;
-}, {}, {}>;

package/components/mui_extended/Tab/Slots/TabSlots.js

@@ -4,7 +4,6 @@ import { t as tabStyles } from "../Tab.styles.js";
 import { T as TAB_KEY_COMPONENT } from "../constants.js";
 import { T as TabSlots } from "./TabEnum.js";
 import { T as Typography } from "../../Typography/Typography.js";
-import { I as Icon } from "../../../Icon/Icon.js";
 const RootStyled = styled(Tab, {
   name: TAB_KEY_COMPONENT,
   slot: TabSlots.root
@@ -13,12 +12,7 @@ const TypographyStyled = styled(Typography, {
   name: TAB_KEY_COMPONENT,
   slot: TabSlots.tipography
 })(tabStyles?.tipography);
-const IconStyled = styled(Icon, {
-  name: TAB_KEY_COMPONENT,
-  slot: TabSlots.icon
-})(tabStyles?.icon);
 export {
-  IconStyled as I,
   RootStyled as R,
   TypographyStyled as T
 };

package/components/mui_extended/Tab/Tab.js

@@ -1,15 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
-import { useTheme } from "@mui/material";
-import { a as TYPOGRAPHY_KEY, b as TAB_SPECIFY, I as ICON_KEY } from "./constants.js";
-import { useRef, useMemo } from "react";
+import { useModuleSkeleton } from "@m4l/core";
+import { T as TabSlots } from "./Slots/TabEnum.js";
+import { a as TYPOGRAPHY_KEY, b as TAB_SPECIFY, I as ICON_KEY, T as TAB_KEY_COMPONENT } from "./constants.js";
+import { a as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
-import { R as RootStyled, T as TypographyStyled, I as IconStyled } from "./Slots/TabSlots.js";
+import { R as RootStyled, T as TypographyStyled } from "./Slots/TabSlots.js";
+import { I as Icon } from "../../Icon/Icon.js";
 function Tab(props) {
   const {
-    SKTWidth,
-    SKTHeight,
     size = "medium",
     // Tamaño del tab, por defecto 'medium'.
     disabled,
@@ -19,45 +18,40 @@ function Tab(props) {
     urlIcon,
     // URL del icono a mostrar en el tab.
     value,
+    // Valor del tab en posición.
+    color = "default",
+    // Color del tab.
+    className,
     ...other
     // Otras propiedades que se pasan al componente.
   } = props;
-  const refMuiTab = useRef(null);
-  const isSelected = useMemo(() => {
-    if (refMuiTab.current) {
-      return refMuiTab.current?.classList?.contains("Mui-selected");
-    }
-    return false;
-  }, [refMuiTab.current]);
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const isSkeleton = useModuleSkeleton();
-  const theme = useTheme();
-  const paletteColor = getPropertyByString(theme.vars.palette, disabled || !isSelected || isSkeleton ? "default" : "primary", theme.vars.palette.default);
   const OwnerState = {
-    paletteColor,
-    size: adjustedSize,
-    disabled,
-    skeleton: isSkeleton
+    tabColor: color,
+    tabSize: adjustedSize,
+    tabDisabled: disabled,
+    tabSkeleton: isSkeleton
   };
+  const classes = getComponentClasses(TAB_KEY_COMPONENT, TabSlots);
   return /* @__PURE__ */ jsx(
     RootStyled,
     {
-      ref: refMuiTab,
-      label: label ? /* @__PURE__ */ jsx(TypographyStyled, { className: clsx(TYPOGRAPHY_KEY, TAB_SPECIFY), skeletonWidth: 40, ownerState: { OwnerState }, variant: "body", children: label }) : void 0,
-      disabled,
+      label: label ? /* @__PURE__ */ jsx(TypographyStyled, { className: clsx(TYPOGRAPHY_KEY, TAB_SPECIFY), ownerState: { ...OwnerState }, variant: "body", children: label }) : void 0,
+      disabled: isSkeleton || disabled,
       ownerState: { ...OwnerState },
       icon: urlIcon ? /* @__PURE__ */ jsx(
-        IconStyled,
+        Icon,
         {
           className: clsx(ICON_KEY, TAB_SPECIFY),
-          ownerState: { OwnerState },
           src: urlIcon,
           size
         }
       ) : void 0,
       value,
       tabIndex: 0,
+      className: clsx(classes.root, className),
       ...other
     }
   );

package/components/mui_extended/Tab/Tab.styles.js

@@ -28,17 +28,17 @@ const tabStyles = {
     position: "relative",
     // Altura para vista móvil y de escritorio basada en el tamaño
     ...theme.generalSettings.isMobile ? {
-      ...ownerState.size === "medium" && {
+      ...ownerState.tabSize === "medium" && {
         height: theme.vars.size.mobile.medium.container
       },
-      ...ownerState.size === "small" && {
+      ...ownerState.tabSize === "small" && {
         height: theme.vars.size.mobile.small.container
       }
     } : {
-      ...ownerState.size === "medium" && {
+      ...ownerState.tabSize === "medium" && {
         height: theme.vars.size.desktop.medium.container
       },
-      ...ownerState.size === "small" && {
+      ...ownerState.tabSize === "small" && {
         height: theme.vars.size.desktop.small.container
       }
     },
@@ -46,33 +46,22 @@ const tabStyles = {
     "& .MuiTab-iconWrapper": {
       marginBottom: 1
     },
+    // Default o disabled
+    ".icon.M4lclassCssSpecificity div": {
+      backgroundColor: ownerState.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.text.secondary
+    },
+    "span.M4lclassCssSpecificity": {
+      color: ownerState.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.text.secondary
+    },
     /**
      * **Pseudoclases**:
      * - Estilos para los estados hover, focus-visible y active.
      */
     "&:hover": {
-      background: theme.vars.palette.background.hover
-    },
-    "&:focus-visible": {
-      background: ownerState.paletteColor?.hoverOpacity,
-      "&::before": {
-        content: '""',
-        position: "absolute",
-        top: `-${theme.size.baseSpacings.sp1}`,
-        left: `-${theme.size.baseSpacings.sp1}`,
-        right: `-${theme.size.baseSpacings.sp1}`,
-        bottom: 0,
-        boxSizing: "border-box",
-        border: theme.vars.size.borderStroke.container,
-        borderBottom: 0,
-        borderColor: theme.vars.palette.border.main,
-        borderRadius: theme.vars.size.borderRadius.r1,
-        borderBottomRightRadius: 0,
-        borderBottomLeftRadius: 0
-      }
+      background: theme.vars.palette[ownerState.tabColor || "default"].hover
     },
     "&:active": {
-      background: ownerState.paletteColor?.activeOpacity
+      background: theme.vars.palette[ownerState.tabColor || "default"].activeOpacity
     },
     /**
      * **Estado Seleccionado**:
@@ -80,15 +69,15 @@ const tabStyles = {
      * - Incluye estilos específicos para el icono y la tipografía.
      */
     "&.Mui-selected": {
+      background: theme.vars.palette.background.default,
       border: theme.vars.size.borderStroke.container,
       borderColor: theme.vars.palette.border.secondary,
       borderBottom: 0,
       ".icon.M4lclassCssSpecificity div": {
-        backgroundColor: !ownerState.disabled ? ownerState.paletteColor?.main : theme.vars.palette.text.secondary
+        backgroundColor: ownerState.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.primary.enabled
       },
       "span": {
-        color: !ownerState.disabled ? theme.vars.palette.primary.main : theme.vars.palette.text.secondary
-        //ownerState.paletteColor?.main
+        color: ownerState.tabDisabled ? theme.vars.palette.text.disabled : theme.vars.palette.primary.enabled
       },
       // Efecto ripple en estado seleccionado
       "& .MuiTouchRipple-root": {
@@ -102,44 +91,81 @@ const tabStyles = {
         height: theme.vars.size.borderRadius["r0-5"],
         left: 0,
         top: -1,
-        backgroundColor: ownerState.skeleton ? theme.vars.palette.background.surface : ownerState.disabled ? theme.vars.palette.background.surface : ownerState.paletteColor?.main,
-        borderEndStartRadius: theme.vars.size.borderRadius["r0-5"],
-        borderEndEndRadius: theme.vars.size.borderRadius["r0-5"],
+        backgroundColor: ownerState.tabSkeleton ? theme.vars.palette.background.surface : ownerState.tabDisabled ? theme.vars.palette.background.surface : theme.vars.palette.primary.main,
+        borderEndStartRadius: theme.vars.size.borderRadius["r1"],
+        borderEndEndRadius: theme.vars.size.borderRadius["r1"],
         position: "absolute"
+      },
+      "&:hover": {
+        backgroundColor: theme.vars.palette.primary.hoverOpacity
+      },
+      "&:active": {
+        background: theme.vars.palette.primary.activeOpacity,
+        ".icon.M4lclassCssSpecificity div": {
+          backgroundColor: theme.vars.palette.primary.active
+        },
+        "span": {
+          color: theme.vars.palette.primary.active
+        },
+        "&::after": {
+          background: theme.vars.palette.primary.active
+        }
       }
     },
-    "&.Mui-selected:hover": {
-      backgroundColor: ownerState.paletteColor?.hoverOpacity
-    },
-    "&.Mui-selected:active": {
-      background: ownerState.paletteColor?.activeOpacity,
-      ".icon.M4lclassCssSpecificity div": {
-        backgroundColor: ownerState.paletteColor?.active
+    "&.Mui-selected:focus-visible": {
+      background: theme.vars.palette.primary.activeOpacity,
+      "&::before": {
+        zIndex: 1,
+        content: '""',
+        position: "absolute",
+        top: `-${theme.size.baseSpacings.sp1}`,
+        left: `-${theme.size.baseSpacings.sp1}`,
+        right: `-${theme.size.baseSpacings.sp1}`,
+        bottom: 0,
+        boxSizing: "border-box",
+        border: theme.vars.size.borderStroke.container,
+        borderBottom: 0,
+        borderColor: theme.vars.palette.primary.focusVisible,
+        borderRadius: theme.vars.size.borderRadius["r1-5"],
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0
       },
-      "span": {
-        color: ownerState.paletteColor?.active
+      "&:hover": {
+        backgroundColor: theme.vars.palette.primary.activeOpacity
+      }
+    },
+    "&:focus-visible": {
+      background: theme.vars.palette[ownerState.tabColor || "default"].activeOpacity,
+      "&::before": {
+        zIndex: 1,
+        content: '""',
+        position: "absolute",
+        top: `-${theme.size.baseSpacings.sp1}`,
+        left: `-${theme.size.baseSpacings.sp1}`,
+        right: `-${theme.size.baseSpacings.sp1}`,
+        bottom: 0,
+        boxSizing: "border-box",
+        border: theme.vars.size.borderStroke.container,
+        borderBottom: 0,
+        borderColor: theme.vars.palette[ownerState.tabColor || "default"].focusVisible,
+        borderRadius: theme.vars.size.borderRadius["r1-5"],
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0
       },
-      "&::after": {
-        background: ownerState.paletteColor?.active
+      "&:hover": {
+        backgroundColor: theme.vars.palette[ownerState.tabColor || "default"].activeOpacity
       }
     }
   }),
-  /**
-   * Slot de Icono:
-   * - **Estilos Generales**: Configura el color base del ícono, con especificidad adicional para clases específicas.
-   */
-  icon: ({ theme }) => ({
-    "&.M4lclassCssSpecificity div": {
-      backgroundColor: theme.vars.palette.text.secondary
-    }
-  }),
   /**
    * Slot de Tipografía:
    * - **Estilos Generales**: Configura el color base del texto, aplicando especificidad para clases específicas.
    */
-  tipography: ({ theme }) => ({
+  tipography: ({ ownerState }) => ({
     "&.M4lclassCssSpecificity": {
-      color: theme.vars.palette.text.secondary
+      ...ownerState.tabSkeleton && {
+        width: "32px !important"
+      }
     }
   })
 };

package/components/mui_extended/Tab/Tab.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/mui_extended/Tab/types.d.ts

@@ -1,22 +1,12 @@
-import { TabProps as MUITabProps, PaletteColor, Theme } from '@mui/material';
+import { TabProps as MUITabProps, Theme } from '@mui/material';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
-import { Sizes } from '@m4l/styles';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { TabSlots } from './Slots/TabEnum';
 import { TAB_KEY_COMPONENT } from './constants';
 /**
  * Propiedades personalizadas para el componente `Tab`, extendiendo algunas propiedades de MUI.
  */
 export interface TabProps extends Omit<MUITabProps, 'size' | 'label' | 'color'> {
-    /**
-     * Anchura del componente en estado Skeleton.
-     * Puede ser un valor numérico o un string con unidades CSS (por ejemplo, `px`, `%`, etc.).
-     */
-    SKTWidth: string | number;
-    /**
-     * Altura del componente en estado Skeleton.
-     * Puede ser un valor numérico o un string con unidades CSS (por ejemplo, `px`, `%`, etc.).
-     */
-    SKTHeight: string | number;
     /**
      * Identificador único para pruebas unitarias.
      */
@@ -33,6 +23,10 @@ export interface TabProps extends Omit<MUITabProps, 'size' | 'label' | 'color'>
      * Texto a mostrar en el `Tab`.
      */
     label?: string;
+    /**
+     * Paleta de color
+     */
+    color?: Extract<ComponentPalletColor, 'default'>;
 }
 /**
  * Tipo de slot del `Tab`, basado en las opciones definidas en `TabSlots`.
@@ -45,13 +39,21 @@ export interface TabOwnerState extends Pick<TabProps, 'size' | 'disabled'> {
     /**
      * Indica si el `Tab` está en estado Skeleton.
      */
-    skeleton: boolean;
+    tabSkeleton: boolean;
     /**
      * Color de la paleta asociado al `Tab`.
      */
-    paletteColor: PaletteColor;
+    tabColor: TabProps['color'];
+    /**
+     * Tab disabled
+     */
+    tabDisabled: TabProps['disabled'];
+    /**
+     * Tab disabled
+     */
+    tabSize: TabProps['size'];
 }
 /**
  * Estilos personalizados para el `Tab`, sobreescribiendo las reglas de estilo.
  */
-export type TabStyles = Partial<OverridesStyleRules<TabSlots, typeof TAB_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type TabStyles = OverridesStyleRules<TabSlots, typeof TAB_KEY_COMPONENT, Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.1.34",
+  "version": "9.1.35",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"
@@ -54,7 +54,7 @@
   "peerDependencies": {
     "@m4l/core": "^2.0.12",
     "@m4l/graphics": "^7.0.2",
-    "@m4l/styles": "^7.0.1",
+    "@m4l/styles": "^7.1.18",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "5.16.7",
     "@mui/x-date-pickers": "6.20.2"

package/components/mui_extended/Tab/tests/constants.d.ts

@@ -1 +0,0 @@
-export declare const ICON_PREFIX = "M4LTab";