@m4l/components 9.1.53 → 9.1.55

package/components/mui_extended/Autocomplete/AutocompleteStyles.js

@@ -0,0 +1,136 @@
+const autocompleteSyles = {
+  /**
+   * Styles for the icon button component.
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-05 14:14:39 - automatic
+   * @updatedAt 2024-12-10 15:24:11 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  iconButton: () => ({
+    position: "absolute",
+    top: "50%",
+    right: 0,
+    transform: "translateY(-50%)"
+  }),
+  /**
+   * Styles for the autocomplete component.
+   * @param {object} theme - The theme object.
+   * @returns {object} The styles for the autocomplete component.
+   * @author SebastianM - automatic
+   * @createdAt 2024-11-26 12:36:08 - automatic
+   * @updatedAt 2024-12-10 15:24:11 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  autocomplete: {},
+  /**
+   * Styles for the typography component.
+   */
+  typography: {},
+  menuList: {},
+  /**
+   * Styles for the menu item component.
+   */
+  menuItem: ({ theme }) => ({
+    padding: `${theme.vars.size.baseSpacings.sp1}!important`,
+    borderRadius: `${theme.vars.size.borderRadius.r0}!important`
+  }),
+  /**
+   * Styles for the image component.
+   * @author SebastianM - automatic
+   * @createdAt 2024-12-02 07:14:21 - automatic
+   * @updatedAt 2024-12-10 15:24:11 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  image: ({ theme }) => ({
+    width: `${theme.vars.size.baseSpacings.sp4} !important`,
+    height: `${theme.vars.size.baseSpacings.sp4} !important`
+  }),
+  /**
+   * Styles for the chip component.
+   * @author SebastianM - automatic
+   * @createdAt 2024-11-26 12:36:08 - automatic
+   * @updatedAt 2024-12-10 15:24:11 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  chip: ({ theme }) => ({
+    "& .M4LIconClass-root": {
+      backgroundColor: theme.vars.palette.chips.default.semanticText
+    }
+  }),
+  /**
+   * Styles for the text field component.
+   * @author SebastianM - automatic
+   * @createdAt 2024-11-26 12:36:08 - automatic
+   * @updatedAt 2024-12-10 15:24:11 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  textField: ({ theme }) => ({
+    position: "relative",
+    height: "auto",
+    "& .MuiInputBase-root": {
+      padding: theme.vars.size.baseSpacings.sp1,
+      gap: theme.vars.size.baseSpacings.sp1
+    }
+  }),
+  /**
+   * Styles for the popper component.
+   * @author SebastianM - automatic
+   * @createdAt 2024-11-26 12:36:08 - automatic
+   * @updatedAt 2024-12-10 15:24:11 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  popper: ({ theme }) => ({
+    ...theme.typography.body1,
+    "& .MuiPaper-root": {
+      width: "100%"
+    }
+  }),
+  /**
+   * Styles for the popover component.
+   * @author SebastianM - automatic
+   * @createdAt 2024-11-26 12:36:08 - automatic
+   * @updatedAt 2024-12-10 15:24:11 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  circularProgress: ({ theme, ownerState }) => ({
+    color: ownerState.paletteColor?.main,
+    position: "absolute",
+    top: "18%",
+    right: theme.vars.size.baseSpacings.sp2,
+    transform: "translateY(-50%)"
+  }),
+  /**
+   * Styles for the skeleton autocomplete component.
+   * @author SebastianM - automatic
+   * @createdAt 2024-11-21 15:23:15 - automatic
+   * @updatedAt 2024-12-10 15:24:11 - automatic
+   * @updatedUser SebastianM - automatic
+   */
+  skeletonAutocomplete: ({ theme, ownerState }) => ({
+    width: "100%",
+    background: theme.vars.palette.skeleton.transition,
+    // Estilos específicos para el tamaño small
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.small.base,
+        minHeight: theme.vars.size.mobile.small.base
+      } : {
+        height: theme.vars.size.desktop.small.base,
+        minHeight: theme.vars.size.desktop.small.base
+      }
+    },
+    // Estilos específicos para el tamaño medium
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        height: theme.vars.size.mobile.medium.base,
+        minHeight: theme.vars.size.mobile.medium.base
+      } : {
+        height: theme.vars.size.desktop.medium.base,
+        minHeight: theme.vars.size.desktop.medium.base
+      }
+    }
+  })
+};
+export {
+  autocompleteSyles as a
+};

package/components/mui_extended/Autocomplete/constants.js

@@ -0,0 +1,4 @@
+const AUTOCOMPLETE_KEY_COMPONENT = "M4LAutocomplete";
+export {
+  AUTOCOMPLETE_KEY_COMPONENT as A
+};

package/components/mui_extended/Autocomplete/dictionary.d.ts

@@ -1,3 +1 @@
-import { Dictionary } from '@m4l/core';
 export declare function getAutocompleteComponentsDictionary(): string[];
-export declare const defaultAutocompleteDictionary: Dictionary;

package/components/mui_extended/Autocomplete/index.js

@@ -0,0 +1 @@
+

package/components/mui_extended/Autocomplete/renderOptions/index.d.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { Sizes } from '@m4l/styles';
 /**
  * Higher-order function to generate a render option function for Autocomplete.
  * It supports rendering options with `startAd` and `endIcon`.
@@ -11,6 +12,8 @@ import { HTMLAttributes, ReactNode } from 'react';
 export declare function withRenderOption<T>(color?: 'primary' | 'default' | 'error'): (optionProps: HTMLAttributes<HTMLLIElement>, option: T & {
     label: string;
     selected?: boolean;
+    disabled?: boolean;
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
+    size: Extract<Sizes, "small" | "medium">;
 }) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Autocomplete/renderOptions/index.js

@@ -0,0 +1,24 @@
+import { createElement } from "react";
+import { M as MenuItemStyled } from "../slots /AutocompleteSlots.js";
+function withRenderOption(color) {
+  return function RenderOption(optionProps, option) {
+    return /* @__PURE__ */ createElement(
+      MenuItemStyled,
+      {
+        ownerState: {},
+        ...optionProps,
+        selected: option.selected,
+        color,
+        key: option.id || option.label,
+        label: option.label,
+        disabled: option.disabled,
+        startIcon: option.startAdornment,
+        endIcon: option.endAdornment,
+        size: option.size
+      }
+    );
+  };
+}
+export {
+  withRenderOption as w
+};

package/components/mui_extended/Autocomplete/slots /AutocompleteEnum.d.ts

@@ -10,5 +10,6 @@ export declare enum AutocompleteSlots {
     skeletonAutocomplete = "skeletonAutocomplete",
     circularProgress = "circularProgress",
     textField = "textField",
-    image = "image"
+    image = "image",
+    renderInputText = "renderInputText"
 }

package/components/mui_extended/Autocomplete/slots /AutocompleteEnum.js

@@ -0,0 +1,19 @@
+var AutocompleteSlots = /* @__PURE__ */ ((AutocompleteSlots2) => {
+  AutocompleteSlots2["autocomplete"] = "autocomplete";
+  AutocompleteSlots2["autocompleteRoot"] = "autocompleteRoot";
+  AutocompleteSlots2["chip"] = "chip";
+  AutocompleteSlots2["popper"] = "popper";
+  AutocompleteSlots2["typography"] = "typography";
+  AutocompleteSlots2["iconButton"] = "iconButton";
+  AutocompleteSlots2["menuItem"] = "menuItem";
+  AutocompleteSlots2["menuList"] = "menuList";
+  AutocompleteSlots2["skeletonAutocomplete"] = "skeletonAutocomplete";
+  AutocompleteSlots2["circularProgress"] = "circularProgress";
+  AutocompleteSlots2["textField"] = "textField";
+  AutocompleteSlots2["image"] = "image";
+  AutocompleteSlots2["renderInputText"] = "renderInputText";
+  return AutocompleteSlots2;
+})(AutocompleteSlots || {});
+export {
+  AutocompleteSlots as A
+};

package/components/mui_extended/Autocomplete/slots /AutocompleteSlots.d.ts

@@ -33,3 +33,6 @@ export declare const SkeletonAutocompleteStyled: import('@emotion/styled').Style
 export declare const PopperComponentStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../Popper').PopperProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "children" | "title" | "component" | "id" | "container" | "components" | "hidden" | "color" | "content" | "style" | "open" | "variant" | "transition" | "translate" | "sx" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "arrow" | "componentsProps" | "placement" | "slotProps" | "slots" | "anchorEl" | "disablePortal" | "keepMounted" | "modifiers" | "popperOptions" | "popperRef" | keyof import('react').RefAttributes<HTMLDivElement> | "dataTestid" | "initialPlacement"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>;
 }, {}, {}>;
+export declare const RenderInputTextStyled: 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').AutocompleteOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').AutocompleteOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/mui_extended/Autocomplete/slots /AutocompleteSlots.js

@@ -0,0 +1,72 @@
+import { Autocomplete, MenuList } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { C as Chip } from "../../../Chip/Chip.js";
+import { I as Image } from "../../../Image/Image.js";
+import { a as autocompleteSyles } from "../AutocompleteStyles.js";
+import { A as AUTOCOMPLETE_KEY_COMPONENT } from "../constants.js";
+import { A as AutocompleteSlots } from "./AutocompleteEnum.js";
+import { I as IconButton } from "../../IconButton/IconButton.js";
+import { M as MenuItem } from "../../MenuItem/MenuItem.js";
+import { C as CircularProgress } from "../../CircularProgress/CircularProgress.js";
+import { T as TextField } from "../../TextField/TextField.js";
+import { T as Typography } from "../../Typography/Typography.js";
+import { S as Skeleton } from "../../Skeleton/Skeleton.js";
+import { P as Popper } from "../../Popper/Popper.js";
+const IconButtonStyled = styled(IconButton, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.iconButton
+})(autocompleteSyles?.iconButton);
+const AutocompleteStyled = styled(Autocomplete, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.autocomplete
+})(autocompleteSyles?.autocomplete);
+const ChipStyled = styled(Chip, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.chip
+})(autocompleteSyles?.chip);
+const MenuItemStyled = styled(MenuItem, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.menuItem
+})(autocompleteSyles?.menuItem);
+styled(MenuList, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.menuList
+})(autocompleteSyles?.menuList);
+const CircularProgressStyled = styled(CircularProgress, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.circularProgress
+})(autocompleteSyles?.circularProgress);
+const RenderInputStyled = styled(TextField, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.textField
+})(autocompleteSyles?.textField);
+styled(Typography, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.typography
+})(autocompleteSyles?.typography);
+const ImageStyled = styled(Image, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.image
+})(autocompleteSyles?.image);
+styled(Skeleton, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.skeletonAutocomplete
+})(autocompleteSyles?.skeletonAutocomplete);
+const PopperComponentStyled = styled(Popper, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.popper
+})(autocompleteSyles?.popper);
+styled(Typography, {
+  name: AUTOCOMPLETE_KEY_COMPONENT,
+  slot: AutocompleteSlots.renderInputText
+})(autocompleteSyles?.renderInputText);
+export {
+  AutocompleteStyled as A,
+  ChipStyled as C,
+  ImageStyled as I,
+  MenuItemStyled as M,
+  PopperComponentStyled as P,
+  RenderInputStyled as R,
+  CircularProgressStyled as a,
+  IconButtonStyled as b
+};

package/components/mui_extended/Autocomplete/slots /index.js

@@ -0,0 +1 @@
+

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

@@ -13,7 +13,7 @@ export type AutocompleteType = 'text' | 'image';
  * Supports both single and multiple selection, and two types: `text` and `image`.
  * @createdAt 2024-11-28 17:06:36 - automatic
  */
-export interface AutocompleteProps<T, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = true, FreeSolo extends boolean | undefined = false> extends Omit<MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'variant' | 'color' | 'size' | 'onChange' | 'value' | 'classes' | 'defaultValue' | 'onBlur' | 'onFocus' | 'autoComplete'>, Omit<TextFieldProps, 'label' | 'variant' | 'defaultValue' | 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'ref' | 'onChange'> {
+export interface AutocompleteProps<T, Multiple extends boolean | undefined = true, DisableClearable extends boolean | undefined = true, FreeSolo extends boolean | undefined = false> extends Omit<MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'variant' | 'color' | 'size' | 'onChange' | 'value' | 'classes' | 'defaultValue' | 'onBlur' | 'onFocus' | 'autoComplete' | 'renderInput'>, Omit<TextFieldProps, 'label' | 'variant' | 'defaultValue' | 'classes' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'ref' | 'onChange'> {
     popperProps?: Omit<PopperProps, 'color'>;
     onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     autoComplete?: string;
@@ -31,7 +31,6 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = fal
     getOptionLabel: (option: T | AutocompleteFreeSoloValueMapping<FreeSolo>) => string;
     isOptionEqualToValue: (option: T, value: T) => boolean;
     skeletonWidth?: string | number;
-    skeletonHeight?: string | number;
     loading?: boolean;
     refresh?: () => void;
     helperMessage?: string;
@@ -47,6 +46,7 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = fal
         message: string;
     };
     onChange: (event: ChangeEvent<{}> | undefined, value: T | T[] | null, reason: AutocompleteChangeReason) => void;
+    renderInput?: MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['renderInput'];
 }
 /**
  * Represents the owner state of the Autocomplete component for styling purposes.

package/components/mui_extended/CircularProgress/CircularProgress.js

@@ -23,7 +23,7 @@ const CircularProgress = (props) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx(RootStyled, { ownerState: { ...OwnerState }, ...others });
+  return /* @__PURE__ */ jsx(RootStyled, { size: adjustedSize, ownerState: { ...OwnerState }, ...others });
 };
 export {
   CircularProgress as C

package/components/mui_extended/MenuItem/MenuItem.js

@@ -2,10 +2,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
 import { useTheme } from "@mui/material";
 import clsx from "clsx";
-import { g as getComponentClasses, a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
-import { M as MENUITEM_KEY_COMPONENT } from "./constants.js";
+import { a as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { M as MENUITEM_CLASSES } from "./constants.js";
 import { M as MenuItemSkeletonStyled, a as MenuItemRootStyled, b as MenuItemIconCheckedStyled, c as MenuItemContainerStyled, d as MenuItemTypographyStyled, e as MenuItemIconStyled } from "./slots/MenuItemSlots.js";
-import { M as MenuItemSlots } from "./slots/MenuItemEnum.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 const MenuItem = (props) => {
   const {
@@ -38,18 +37,18 @@ const MenuItem = (props) => {
     paletteColor,
     color
   };
-  const classes = getComponentClasses(MENUITEM_KEY_COMPONENT, MenuItemSlots);
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(
       MenuItemSkeletonStyled,
       {
         "data-testid": "SkeletonMenuItem",
         width: skeletonWidth,
-        ownerState: { ...ownerState }
+        ownerState: { ...ownerState },
+        className: MENUITEM_CLASSES.skeleton
       }
     );
   }
-  const renderIcon = (icon, instaceDataTestId, iconClassName) => {
+  const renderIcon = (icon, instaceDataTestId, classNameIcon) => {
     if (!icon) {
       return null;
     }
@@ -65,7 +64,7 @@ const MenuItem = (props) => {
           size: adjustedSize,
           disabled,
           instaceDataTestId,
-          className: iconClassName
+          className: classNameIcon
         }
       );
     }
@@ -80,18 +79,19 @@ const MenuItem = (props) => {
       ownerState: { ...ownerState },
       disabled,
       disableRipple: true,
-      className: clsx("M4LMenuItemRoot", classes.root, className),
+      size: adjustedSize,
+      className: clsx(className, MENUITEM_CLASSES.root),
       "data-testid": "MenuItemRoot",
       children: [
         hasCheckedIcon && /* @__PURE__ */ jsx(
           MenuItemIconCheckedStyled,
           {
             src: checkedIcon,
-            ownerState: { ...ownerState },
-            className: classes.menuItemIconChecked
+            size: adjustedSize,
+            ownerState: { ...ownerState }
           }
         ),
-        /* @__PURE__ */ jsxs(MenuItemContainerStyled, { ownerState: { ...ownerState }, className: classes.menuItemContainer, children: [
+        /* @__PURE__ */ jsxs(MenuItemContainerStyled, { ownerState: { ...ownerState }, children: [
           renderIcon(startIcon, "MenuItemStartIcon", getComponentSlotRoot("MenuItemStartIcon")),
           /* @__PURE__ */ jsx(
             MenuItemTypographyStyled,
@@ -100,7 +100,6 @@ const MenuItem = (props) => {
               variant: "body",
               size: adjustedSize,
               "data-testid": "MenuItemLabel",
-              className: classes.menuItemTypography,
               children: label
             }
           ),

package/components/mui_extended/MenuItem/MenuItem.styles.js

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../../utils/getHeightSizeStyles.js";
 const menuItemStyles = {
   /**
    * Estilos para el contenedor de los items del menú
@@ -14,81 +15,85 @@ const menuItemStyles = {
    * @createdAt 2024-12-27 08:28:33 - automatic
    * @author Andrés Quintero - automatic
    */
-  menuItemRoot: ({ theme, ownerState }) => ({
+  root: ({ theme, ownerState }) => ({
     width: "100%",
-    height: "auto",
     gap: theme.vars.size.baseSpacings.sp3,
     padding: theme.vars.size.baseSpacings.sp1,
     borderRadius: theme.vars.size.borderRadius.r0,
     ...ownerState.selected && {
-      ...ownerState.color === "primary" && {
-        borderLeft: theme.vars.size.borderStroke.container,
-        borderColor: ownerState.paletteColor?.main
-      },
-      "& .M4lclassCssSpecificity.M4lclassCssSpecificity": {
+      borderLeft: theme.vars.size.borderStroke.container,
+      borderColor: ownerState.paletteColor?.main,
+      "& .M4LTypography-root": {
         color: ownerState.paletteColor?.enabled
       },
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: ownerState.paletteColor?.enabled
       },
       "&:hover": {
         backgroundColor: ownerState.paletteColor?.hoverOpacity,
-        "&:active": {
-          backgroundColor: ownerState.paletteColor?.activeOpacity,
-          "& .M4lclassCssSpecificity": {
-            color: ownerState.paletteColor?.active
-          },
-          "& .M4LIconClass-root": {
-            color: ownerState.paletteColor?.active
-          }
+        "& .M4LIcon-icon": {
+          backgroundColor: ownerState.paletteColor?.hover
+        },
+        "& .M4LTypography-root": {
+          color: ownerState.paletteColor?.hover
+        }
+      },
+      "&:active": {
+        backgroundColor: ownerState.paletteColor?.activeOpacity,
+        "& .M4LIcon-icon": {
+          backgroundColor: ownerState.paletteColor?.active
+        },
+        "& .M4LTypography-root": {
+          color: ownerState.paletteColor?.active
+        }
+      },
+      "&:focus-visible": {
+        backgroundColor: ownerState.paletteColor?.activeOpacity,
+        outline: theme.vars.size.borderStroke.container,
+        outlineColor: theme.vars.palette.border.main,
+        outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+        "& .M4LIcon-icon": {
+          color: ownerState.paletteColor?.active
         }
       }
     },
     ...ownerState.color === "default" && {
-      "& .M4lclassCssSpecificity": {
+      "& .M4LTypography-root": {
         color: theme.vars.palette.text.primary
       },
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: theme.vars.palette.text.primary
       },
       "&:hover": {
-        backgroundColor: ownerState.paletteColor?.hoverOpacity,
-        "&:active": {
-          backgroundColor: ownerState.paletteColor?.activeOpacity,
-          "&.M4lclassCssSpecificity": {
-            color: theme.vars.palette.text.primary
-          },
-          "& .M4LIconClass-root": {
-            backgroundColor: theme.vars.palette.text.primary
-          }
+        backgroundColor: ownerState.paletteColor?.hoverOpacity
+      },
+      "&:active": {
+        backgroundColor: ownerState.paletteColor?.activeOpacity,
+        "& .M4LIcon-icon": {
+          backgroundColor: theme.vars.palette.text.primary
         }
       }
     },
     ...ownerState.disabled && {
       pointerEvents: "none",
-      "& .M4lclassCssSpecificity.M4lclassCssSpecificity": {
+      "& .M4LTypography-root": {
         color: theme.vars.palette.text.disabled
       },
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: theme.vars.palette.text.disabled
       }
     },
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        minHeight: theme.vars.size.mobile.small.action
-      } : {
-        minHeight: theme.vars.size.desktop.small.action
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "action",
+      (height) => {
+        return {
+          height: "auto!important",
+          minHeight: `${height}!important`
+        };
       }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        minHeight: theme.vars.size.mobile.medium.action
-      } : {
-        minHeight: theme.vars.size.desktop.medium.action
-      }
-    }
+    )
   }),
   /**
    * Estilos para el icono de los items del menú
@@ -111,7 +116,7 @@ const menuItemStyles = {
    */
   menuItemIconChecked: ({ ownerState }) => ({
     ...ownerState.selected && {
-      "& .M4LIconClass-root": {
+      "& .M4LIcon-icon": {
         backgroundColor: ownerState.paletteColor?.main
       }
     }
@@ -131,7 +136,7 @@ const menuItemStyles = {
     display: "flex",
     alignItems: "center",
     width: "100%",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings["sp0-5"]
   }),
   /**
    * Estilos para el contenedor de los items del menú en skeleton
@@ -147,26 +152,11 @@ const menuItemStyles = {
     display: "flex",
     alignItems: "center",
     background: theme.vars.palette.skeleton.transition,
-    // Estilos específicos para el tamaño small
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? {
-        height: `${theme.vars.size.mobile.small.action}!important`,
-        minHeight: `${theme.vars.size.mobile.small.action}!important`
-      } : {
-        height: `${theme.vars.size.desktop.small.action}!important`,
-        minHeight: `${theme.vars.size.desktop.small.action}!important`
-      }
-    },
-    // Estilos específicos para el tamaño medium
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? {
-        height: `${theme.vars.size.mobile.medium.action}!important`,
-        minHeight: `${theme.vars.size.mobile.medium.action}!important`
-      } : {
-        height: `${theme.vars.size.desktop.medium.action}!important`,
-        minHeight: `${theme.vars.size.desktop.medium.action}!important`
-      }
-    }
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "action"
+    )
   })
 };
 export {

package/components/mui_extended/MenuItem/constants.d.ts

@@ -6,3 +6,7 @@
  * @default 'M4LMenuItem'
  */
 export declare const MENUITEM_KEY_COMPONENT = "M4LMenuItem";
+/**
+ * Inventario de clases CSS para el componente MenuItem
+ */
+export declare const MENUITEM_CLASSES: Record<string, string>;

package/components/mui_extended/MenuItem/constants.js

@@ -1,4 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { M as MenuItemSlots } from "./slots/MenuItemEnum.js";
 const MENUITEM_KEY_COMPONENT = "M4LMenuItem";
+const MENUITEM_CLASSES = getComponentClasses(MENUITEM_KEY_COMPONENT, MenuItemSlots);
 export {
-  MENUITEM_KEY_COMPONENT as M
+  MENUITEM_CLASSES as M,
+  MENUITEM_KEY_COMPONENT as a
 };

package/components/mui_extended/MenuItem/slots/MenuItemEnum.d.ts

@@ -1,5 +1,5 @@
 export declare enum MenuItemSlots {
-    menuItemRoot = "menuItemRoot",
+    root = "menuItemRoot",
     menuItemIcon = "menuItemIcon",
     menuItemIconChecked = "menuItemIconChecked",
     menuItemContainer = "menuItemContainer",

package/components/mui_extended/MenuItem/slots/MenuItemEnum.js

@@ -1,5 +1,5 @@
 var MenuItemSlots = /* @__PURE__ */ ((MenuItemSlots2) => {
-  MenuItemSlots2["menuItemRoot"] = "menuItemRoot";
+  MenuItemSlots2["root"] = "menuItemRoot";
   MenuItemSlots2["menuItemIcon"] = "menuItemIcon";
   MenuItemSlots2["menuItemIconChecked"] = "menuItemIconChecked";
   MenuItemSlots2["menuItemContainer"] = "menuItemContainer";