@m4l/components 9.1.15 → 9.1.16

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/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/tests/Badge.test.d.ts

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

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/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/MenuItem/MenuItem.d.ts

@@ -7,7 +7,7 @@ import { MenuItemProps } from './types';
  * @returns
  * @author Bruce Escobar - automatic
  * @createdAt 2024-10-22 19:53:39 - automatic
- * @updatedAt 2024-12-05 16:30:55 - automatic
- * @updatedUser SebastianM - automatic
+ * @updatedAt 2024-12-10 08:14:13 - automatic
+ * @updatedUser Bruce Escobar - automatic
  */
 export declare const MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,8 +3,8 @@ const menuItemStyles = {
    * Estilos para el contenedor de los items del menú
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 10:38:00 - automatic
-   * @updatedAt 2024-12-05 14:14:39 - automatic
-   * @updatedUser SebastianM - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   menuItemRoot: ({ theme, ownerState }) => ({
     width: "100%",
@@ -56,8 +56,8 @@ const menuItemStyles = {
    * Estilos para el icono de los items del menú
    * @author SebastianM - automatic
    * @createdAt 2024-12-02 19:12:14 - automatic
-   * @updatedAt 2024-12-05 14:14:39 - automatic
-   * @updatedUser SebastianM - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   menuItemIcon: ({ ownerState }) => ({
     "&.M4LMenuItemEndIcon": {
@@ -73,8 +73,8 @@ const menuItemStyles = {
    * Estilos para el contenedor de los items del menú en skeleton
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 10:38:00 - automatic
-   * @updatedAt 2024-12-05 14:14:39 - automatic
-   * @updatedUser SebastianM - automatic
+   * @updatedAt 2024-12-10 08:14:13 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
   skeletonMenuItem: ({ theme, ownerState }) => ({
     width: "100%",

package/package.json

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

package/storybook/components/ModalDialog/subcomponent/WithExtendedContainer.d.ts

@@ -31,7 +31,7 @@ import { StoryFn, StoryContext } from '@storybook/react';
  * @returns JSX.Element - The decorated story with modal integration.
  * @author cesar - automatic
  * @createdAt 2024-11-26 12:39:40 - 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 WithExtendedContainer: (_: StoryFn, context: StoryContext) => import("react/jsx-runtime").JSX.Element;

package/storybook/components/extended/mui/Badge/Badge.stories.d.ts

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Badge } from '../../../../../src/components/mui_extended/Badge/Badge';
+declare const meta: Meta<typeof Badge>;
+type Story = StoryObj<typeof Badge>;
+/**
+ * Default story for the Badge component.
+ */
+export declare const Default: Story;
+/**
+ * Badge with a primary color.
+ */
+export declare const PrimaryBadge: Story;
+/**
+ * Badge with a default color.
+ */
+export declare const DefaultBadge: Story;
+/**
+ * Badge with a error color.
+ */
+export declare const ErrorBadge: Story;
+/**
+ * Badge with a info color.
+ */
+export declare const InfoBadge: Story;
+/**
+ * Badge with a warning color.
+ */
+export declare const WarningBadge: Story;
+/**
+ * Badge with a success color.
+ */
+export declare const SuccessBadge: Story;
+export default meta;