@m4l/components 9.1.14 → 9.1.16

package/@types/types.d.ts

@@ -133,6 +133,7 @@ import { WindowBaseOwnerState, WindowBaseType } from '../components/WindowBase';
 import { OwnerStateWindowConfirm, WindowConfirmType } from '../components/WindowConfirm';
 import { AppBarSlotsType, AppBarOwnerState } from '../components/AppBar/types';
 import { DialogOwnerState, DialogType } from '../components/mui_extended/Dialog/types';
+import { LoadingButtonOwnerState, LoadingButtonSlotsType } from '../components/mui_extended/LoadingButton/types';
 
 
 declare module '@mui/material/styles' {
@@ -173,6 +174,7 @@ declare module '@mui/material/styles' {
     M4LWindowConfirm: WindowConfirmType;
     M4LAppBar: AppBarSlotsType;
     M4LWiDialog: DialogType;
+    M4LLoadingButton: LoadingButtonSlotsType;
   }
 
   interface ComponentsPropsList {
@@ -212,6 +214,7 @@ declare module '@mui/material/styles' {
     M4LWindowConfirm: Partial<OwnerStateWindowConfirm>;
     M4LAppBar: Partial<AppBarOwnerState>;
     M4LWiDialog: Partial<DialogOwnerState>;
+    M4LLoadingButton: Partial<LoadingButtonOwnerState>;
   }
 
   interface Components {
@@ -485,5 +488,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LWiDialog'];
       variants?: ComponentsVariants['M4LWiDialog'];
     };
+    M4LLoadingButton?: {
+      defaultProps?: ComponentsPropsList['M4LLoadingButton'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LLoadingButton'];
+      variants?: ComponentsVariants['M4LLoadingButton'];
+    };
   }
 }

package/components/CommonActions/components/ActionFormIntro/index.d.ts

@@ -1,5 +1,5 @@
-import { MuiLabLoadingButtonProps } from '../../../mui_extended/LoadingButton/types';
+import { LoadingButtonProps } from '../../../mui_extended/LoadingButton/types';
 /**
  * TODO: Documentar
  */
-export declare function ActionFormIntro(props: MuiLabLoadingButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ActionFormIntro(props: LoadingButtonProps): import("react/jsx-runtime").JSX.Element;

package/components/CommonActions/components/ActionFormIntro/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useFormContext, useFormState } from "react-hook-form";
 import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
 import { Skeleton } from "@mui/material";
-import { L as LoadingButton } from "../../../mui_extended/LoadingButton/index.js";
+import { L as LoadingButton } from "../../../mui_extended/LoadingButton/LoadingButton.js";
 import { u as useCommonActionsUtilityClasses } from "../../classes/index.js";
 function ActionFormIntro(props) {
   const { getLabel } = useModuleDictionary();
@@ -11,6 +11,7 @@ function ActionFormIntro(props) {
   const { isSubmitting } = useFormState({
     control
   });
+  const { variant = "contained", color = "primary" } = props;
   const classes = useCommonActionsUtilityClasses();
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 57, height: 30 });
@@ -18,9 +19,9 @@ function ActionFormIntro(props) {
   return /* @__PURE__ */ jsx(
     LoadingButton,
     {
-      variant: "contained",
+      variant,
       type: "submit",
-      color: "primary",
+      color,
       loading: isSubmitting,
       className: classes.actionFormIntro,
       ...props,

package/components/Icon/Icon.d.ts

@@ -3,7 +3,7 @@ import { IconProps } from './types';
  * Provee de un medio por el cual se carga un icono svg en la plataforma web, aporta su versión provisional de carga en red.
  * @author Bruce Escobar - automatic
  * @createdAt 2024-10-22 19:08:59 - automatic
- * @updatedAt 2024-12-05 14:14:39 - automatic
- * @updatedUser SebastianM - automatic
+ * @updatedAt 2024-12-10 08:14:13 - automatic
+ * @updatedUser Bruce Escobar - automatic
  */
 export declare const Icon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;

package/components/ModalDialog/ModalDialog.d.ts

@@ -34,7 +34,7 @@
  * - Dynamically updates the fullscreen mode when the `fullScreen` prop changes.
  * @author cesar - automatic
  * @createdAt 2024-11-28 08:35:15 - automatic
- * @updatedAt 2024-12-06 11:53:51 - automatic
- * @updatedUser cesar - automatic
+ * @updatedAt 2024-12-10 08:14:13 - automatic
+ * @updatedUser Bruce Escobar - automatic
  */
 export declare const ModalDialog: () => import("react/jsx-runtime").JSX.Element;

package/components/WindowBase/WindowBase.styles.js

@@ -3,8 +3,8 @@ const windowBaseStyles = {
    * Styles for the window base wrapper component.
    * @author cesar - automatic
    * @createdAt 2024-11-15 18:08:44 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   wrapperWindowBase: ({ theme, ownerState }) => ({
     height: "100%",
@@ -27,8 +27,8 @@ const windowBaseStyles = {
    * Styles for the content of the window base component.
    * @author cesar - automatic
    * @createdAt 2024-11-15 18:08:44 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   contentWindowBase: ({ theme }) => ({
     padding: theme.vars.size.baseSpacings.sp3,
@@ -38,8 +38,8 @@ const windowBaseStyles = {
    * Styles for the header of the window base component.
    * @author cesar - automatic
    * @createdAt 2024-11-15 18:08:44 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   headerWindowComponent: ({ theme, ownerState }) => ({
     width: "100%",
@@ -74,8 +74,8 @@ const windowBaseStyles = {
    * Styles for the content of the header of the window base component.
    * @author cesar - automatic
    * @createdAt 2024-11-15 18:08:44 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   headerContentWindowBase: ({ theme }) => ({
     display: "flex",
@@ -89,8 +89,8 @@ const windowBaseStyles = {
    * Styles for the title of the header of the window base component.
    * @author cesar - automatic
    * @createdAt 2024-11-15 18:08:44 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   headerTitleWindowBase: ({ theme }) => ({
     width: "auto",
@@ -101,8 +101,8 @@ const windowBaseStyles = {
    * Styles for the subtitle container of the header of the window base component.
    * @author cesar - automatic
    * @createdAt 2024-11-15 18:08:44 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   subtitleContainer: ({ theme }) => ({
     display: "flex",
@@ -116,8 +116,8 @@ const windowBaseStyles = {
    * @returns An object containing the styles for the dot window base component.
    * @author cesar - automatic
    * @createdAt 2024-11-22 19:40:23 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   pointWindowBase: ({ theme, ownerState }) => ({
     display: "flex",
@@ -143,8 +143,8 @@ const windowBaseStyles = {
    * Styles for the subtitle of the header of the window base component.
    * @author cesar - automatic
    * @createdAt 2024-11-15 18:08:44 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   headerSubTitleWindowBase: ({ theme }) => ({
     width: "auto !important",
@@ -155,8 +155,8 @@ const windowBaseStyles = {
    * Styles for the icon of the header of the window base component.
    * @author cesar - automatic
    * @createdAt 2024-11-18 08:11:19 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   headerIconWindowBase: ({ theme }) => ({
     display: "flex",
@@ -169,8 +169,8 @@ const windowBaseStyles = {
    * Styles for the icons wrapper of the window base component.
    * @author cesar - automatic
    * @createdAt 2024-11-18 08:11:19 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   iconsWrapperWindowBase: () => ({
     display: "flex",
@@ -180,8 +180,8 @@ const windowBaseStyles = {
    * Styles for the dot icon of the window base component.
    * @author cesar - automatic
    * @createdAt 2024-11-22 19:40:23 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   pointIcon: ({ theme, ownerState }) => ({
     color: theme.vars.palette.text.primary,
@@ -205,8 +205,8 @@ const windowBaseStyles = {
    * Styles for the menu actions of the window base component.
    * @author cesar - automatic
    * @createdAt 2024-12-05 07:49:27 - automatic
-   * @updatedAt 2024-12-06 14:42:54 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   menuActionsWindowBase: () => ({
     left: "-50px"

package/components/hook-form/RHFAutocomplete/subcomponents/ComponentTypeImage/index.js

@@ -13,10 +13,10 @@ import { w as withRenderOption } from "../RenderOption/index.js";
 import { S as SkeletonRHFAutocomplete } from "../Skeleton/index.js";
 import { L as Label } from "../../../../Label/Label.js";
 import { T as Typography } from "../../../../mui_extended/Typography/Typography.js";
-import { C as CircularProgress } from "../../../../mui_extended/CircularProgress/CircularProgress.js";
 import { I as IconButton } from "../../../../mui_extended/IconButton/IconButton.js";
 import { H as HelperError } from "../../../../HelperError/HelperError.js";
 import { I as Image } from "../../../../Image/Image.js";
+import { C as CircularProgress } from "../../../../mui_extended/CircularProgress/CircularProgress.js";
 function ComponentTypeImage(props) {
   const {
     name: nameRHF,

package/components/mui_extended/Badge/Badge.d.ts

@@ -1,5 +1,12 @@
 import { BadgeProps } from './types';
 /**
- * TODO: Documentar
+ * The Badge component renders a customizable badge that can display labels, counts, or status indicators.
+ * It supports various sizes, colors, and variants (e.g., standard or dot) to suit different use cases.
+ * @param {BadgeProps} props - Props for the `Badge` component.
+ * @returns JSX.Element - The rendered Badge component.
+ * @author cesar
+ * @createdAt 2024-12-03 11:11:02
+ * @updatedAt 2024-12-09 10:38:37 - automatic
+ * @updatedUser cesar - automatic
  */
 export declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/components/mui_extended/Badge/Badge.js

@@ -1,15 +1,36 @@
 import { jsx } from "react/jsx-runtime";
-import { Badge as Badge$1 } from "@mui/material";
 import { B as BadgeRootStyled } from "./slots/BadgeSlots.js";
+import clsx from "clsx";
+import { g as getComponentSlotRoot } from "../../../utils/getComponentSlotRoot.js";
+import { B as BADGE_LABEL_KEY_COMPONENT } from "./constants.js";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
 import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { B as BadgeSlots } from "./slots/BadgeEnum.js";
 const Badge = (props) => {
-  const { children, size, dataTestId = "", ...others } = props;
+  const {
+    color = "default",
+    size = "medium",
+    variant = "standard",
+    dataTestId,
+    children,
+    ...others
+  } = props;
   const { currentSize } = useComponentSize(size);
+  const normalizedSize = currentSize === "large" ? "medium" : currentSize;
+  const ownerState = {
+    BadgeColor: color,
+    BadgeVariant: variant,
+    BadgeSize: normalizedSize
+  };
   return /* @__PURE__ */ jsx(
     BadgeRootStyled,
     {
-      ownerState: { size: currentSize },
-      children: /* @__PURE__ */ jsx(Badge$1, { ...others, children })
+      role: "badge-role",
+      className: clsx(getComponentSlotRoot(BADGE_LABEL_KEY_COMPONENT)),
+      ...getPropDataTestId(BADGE_LABEL_KEY_COMPONENT, BadgeSlots.rootBadge, dataTestId),
+      ownerState,
+      ...others,
+      children
     }
   );
 };

package/components/mui_extended/Badge/Badge.styles.js

@@ -1,6 +1,60 @@
 const badgeStyles = {
-  rootBadge: () => ({
-    // No data to appply
+  /**
+   * Badge Root Styles
+   * @author cesar - automatic
+   * @createdAt 2024-12-03 11:11:02 - automatic
+   * @updatedAt 2024-12-05 14:50:10 - automatic
+   * @updatedUser cesar - automatic
+   */
+  rootBadge: ({ theme, ownerState }) => ({
+    "& .MuiBadge-badge": {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      flexShrink: 0,
+      padding: theme.vars.size.baseSpacings.sp1,
+      height: theme.vars.size.baseSpacings["sp3-5"],
+      width: theme.vars.size.baseSpacings["sp3-5"],
+      minWidth: theme.vars.size.baseSpacings["sp3-5"],
+      minHeight: theme.vars.size.baseSpacings["sp3-5"],
+      // Colores dinámicos basados en el estado
+      color: theme.palette[ownerState.BadgeColor || "default"].contrastText,
+      backgroundColor: theme.palette[ownerState.BadgeColor || "default"].light,
+      // Tamaño dinámico basado en `BadgeSize` y si es móvil
+      ...theme.generalSettings.isMobile ? {
+        ...ownerState.BadgeSize === "small" && {
+          height: theme.vars.size.mobile.small.base,
+          minWidth: theme.vars.size.mobile.small.base,
+          fontSize: theme.vars.size.typography.mobile.small.body.fontSize
+        },
+        ...ownerState.BadgeSize === "medium" && {
+          height: theme.vars.size.mobile.medium.base,
+          minWidth: theme.vars.size.mobile.medium.base,
+          fontSize: theme.vars.size.typography.mobile.medium.body.fontSize
+        }
+      } : {
+        ...ownerState.BadgeSize === "small" && {
+          height: theme.vars.size.desktop.small.base,
+          minWidth: theme.vars.size.desktop.small.base,
+          fontSize: theme.vars.size.typography.desktop.small.body.fontSize
+        },
+        ...ownerState.BadgeSize === "medium" && {
+          height: theme.vars.size.desktop.medium.base,
+          minWidth: theme.vars.size.desktop.medium.base,
+          fontSize: theme.vars.size.typography.desktop.medium.body.fontSize
+        }
+      },
+      // Estilos para variantes
+      ...ownerState.BadgeVariant === "dot" && {
+        height: ownerState.BadgeSize === "small" && theme.vars.size.baseSpacings.sp2,
+        width: ownerState.BadgeSize === "small" && theme.vars.size.baseSpacings.sp2,
+        minWidth: ownerState.BadgeSize === "small" && theme.vars.size.baseSpacings.sp2,
+        minHeight: ownerState.BadgeSize === "small" && theme.vars.size.baseSpacings.sp2,
+        borderRadius: "50%",
+        fontSize: 0
+      },
+      borderRadius: "50%"
+    }
   })
 };
 export {

package/components/mui_extended/Badge/index.d.ts

@@ -1,2 +1,6 @@
-export { Badge } from './Badge';
-export type { BadgeProps } from './types';
+export * from './Badge.styles';
+export * from './Badge';
+export * from './constants';
+export * from './slots/BadgeEnum';
+export * from './slots/BadgeSlots';
+export * from './types';

package/components/mui_extended/Badge/slots/BadgeSlots.d.ts

@@ -1,5 +1,5 @@
 export declare const BadgeRootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').BadgeOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLSpanElement> | null | undefined;
-}, "children" | "components" | "color" | "style" | "variant" | "className" | "classes" | "sx" | "slots" | "slotProps" | "componentsProps" | "invisible" | "max" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero">, "children" | "ref" | "title" | "id" | "components" | "hidden" | "color" | "content" | "style" | "variant" | "className" | "classes" | "onChange" | "sx" | "translate" | "slots" | "slotProps" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "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" | "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" | "componentsProps" | "invisible" | "max" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').BadgeOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').BadgeOwnerState> & Record<string, unknown>;
+}, "children" | "components" | "color" | "style" | "variant" | "className" | "classes" | "sx" | "slots" | "slotProps" | "componentsProps" | "invisible" | "max" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero">, "children" | "ref" | "title" | "id" | "components" | "hidden" | "color" | "content" | "style" | "variant" | "className" | "classes" | "onChange" | "sx" | "translate" | "slots" | "slotProps" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "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" | "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" | "componentsProps" | "invisible" | "max" | "anchorOrigin" | "badgeContent" | "overlap" | "showZero"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').BadgeOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').BadgeOwnerState> & Record<string, unknown>;
 }, {}, {}>;

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

@@ -0,0 +1 @@
+

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

@@ -3,11 +3,17 @@ import { Theme } from '@mui/material/styles';
 import { BADGE_LABEL_KEY_COMPONENT } from './constants';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { BadgeSlots } from './slots';
-import { Sizes } from '@m4l/styles';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
 export interface BadgeProps extends MUIBadgeProps {
     dataTestId?: string;
-    size?: Sizes;
+    variant?: 'standard' | 'dot' | undefined;
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    color?: ComponentPalletColor;
 }
 export type BadgeSlotsType = keyof typeof BadgeSlots;
-export type BadgeOwnerState = {};
+export type BadgeOwnerState = {
+    BadgeColor?: BadgeProps['color'];
+    BadgeVariant?: BadgeProps['variant'];
+    BadgeSize?: BadgeProps['size'];
+};
 export type BadgeStyles = Partial<OverridesStyleRules<BadgeSlotsType, typeof BADGE_LABEL_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/mui_extended/Badge/types.js

@@ -0,0 +1 @@
+

package/components/mui_extended/CircularProgress/slots/CircularProgressSlots.js

@@ -1,8 +1,8 @@
 import { styled, CircularProgress } from "@mui/material";
+import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 import { c as circularProgressStyles } from "../CircularProgress.styles.js";
 import { a as CIRCULAR_PROGRESS_KEY_COMPONENT } from "../constants.js";
 import { C as CircularProgressSlots } from "./CircularProgressEnum.js";
-import { S as Skeleton } from "../../Skeleton/Skeleton.js";
 const RootStyled = styled(CircularProgress, {
   name: CIRCULAR_PROGRESS_KEY_COMPONENT,
   slot: CircularProgressSlots.root

package/components/mui_extended/Dialog/Dialog.styles.js

@@ -3,8 +3,8 @@ const dialogStyles = {
    * Dialog Root style
    * @author cesar - automatic
    * @createdAt 2024-11-24 15:58:24 - automatic
-   * @updatedAt 2024-12-05 17:01:44 - automatic
-   * @updatedUser cesar - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   dialogRoot: ({ theme }) => ({
     background: theme.vars.palette.background.backdrop,

package/components/mui_extended/LoadingButton/LoadingButton.d.ts

@@ -0,0 +1,5 @@
+import { LoadingButtonProps } from './types';
+/**
+ * Componente LoadingButton que extiende las props de Button
+ */
+export declare const LoadingButton: import('react').ForwardRefExoticComponent<Omit<LoadingButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/components/mui_extended/LoadingButton/LoadingButton.js

@@ -0,0 +1,93 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
+import { useTheme } from "@mui/material";
+import { S as SkeletonLoadingButtonStyled, L as LoadingButtonRootStyled, T as TextLoadingButtonStyled, C as CircularProgressStyled, a as LoadingButtonIconStyled } from "./slots/LoadingButtonSlots.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+const LoadingButton = forwardRef((props, ref) => {
+  const {
+    className,
+    endIcon,
+    label,
+    startIcon,
+    color = "default",
+    disabled = false,
+    size = "small",
+    variant = "contained",
+    skeletonWidth = "100%",
+    loading = false,
+    ...others
+  } = props;
+  const { currentSize } = useComponentSize(size);
+  const isSkeleton = useModuleSkeleton();
+  const theme = useTheme();
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const paletteColor = getPropertyByString(
+    theme.vars.palette,
+    disabled ? "default" : color || "default",
+    theme.vars.palette.default
+  );
+  const ownerState = {
+    size,
+    variant,
+    disabled,
+    paletteColor,
+    color,
+    loading
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SkeletonLoadingButtonStyled, { "data-testid": "SkeletonButton", width: skeletonWidth, ownerState: { ...ownerState } });
+  }
+  const getAdjustedColor = (btnColor, btnVariant) => {
+    return btnVariant === "contained" ? `${btnColor}.contrastText` : `${btnColor}.main`;
+  };
+  const adjustedColor = getAdjustedColor(color, variant);
+  const renderIcon = (icon, instaceDataTestId) => {
+    if (!icon) {
+      return null;
+    }
+    if (typeof icon !== "string") {
+      return icon;
+    } else {
+      return /* @__PURE__ */ jsx(
+        LoadingButtonIconStyled,
+        {
+          color: adjustedColor,
+          ownerState: { ...ownerState },
+          src: icon,
+          alt: "icon",
+          size: adjustedSize,
+          disabled: loading || disabled,
+          instaceDataTestId,
+          className: clsx(className)
+        }
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    LoadingButtonRootStyled,
+    {
+      "aria-disabled": disabled,
+      role: "button",
+      startIcon: renderIcon(startIcon, "LoadingButtonStartIcon"),
+      endIcon: renderIcon(endIcon, "LoadingButtonEndIcon"),
+      className: clsx(className),
+      variant,
+      size,
+      disabled: loading || disabled,
+      disableRipple: true,
+      ownerState: { ...ownerState },
+      ref,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx(TextLoadingButtonStyled, { ownerState: { ...ownerState }, color: adjustedColor, children: label }),
+        loading === true && /* @__PURE__ */ jsx(CircularProgressStyled, { ownerState: { ...ownerState }, size: adjustedSize })
+      ]
+    }
+  );
+});
+LoadingButton.displayName = "LoadingButton";
+export {
+  LoadingButton as L
+};

package/components/mui_extended/LoadingButton/LoadingButton.styles.d.ts

@@ -0,0 +1,5 @@
+import { LoadingButtonStyles } from './types';
+/**
+ * Objeto que contiene todos los estilos para el componente LoadingButton.
+ */
+export declare const loadingButtonStyles: LoadingButtonStyles;