@m4l/components 9.1.87 → 9.1.89

package/@types/types.d.ts

@@ -143,6 +143,7 @@ import { LinearProgressIndeterminateOwnerState, LinearProgressIndeterminateType
 import { MenuDividerOwnerState, MenuDividerSlotsType } from '../components/mui_extended/MenuDivider/types';
 import { RHFSelectSlotsType, RHFSelectOwnerState } from '../components/hook-form/RHFSelect/types';
 import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-form/RHFCheckbox/types';
+import { DateTimePickerOwnerState, DateTimePickerSlotsType } from '../components/mui_extended/DateTimePicker/types';
 import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/Divider/types';
 
 declare module '@mui/material/styles' {
@@ -203,6 +204,7 @@ declare module '@mui/material/styles' {
     M4LLinearProgressIndeterminate: LinearProgressIndeterminateType;
     M4LMenuDivider: MenuDividerSlotsType;
     M4LRHFSelect: RHFSelectSlotsType;
+    M4LDateTimePicker: DateTimePickerSlotsType;
     M4LDivider: DividerSlotsType;
   }
 
@@ -263,8 +265,8 @@ declare module '@mui/material/styles' {
     M4LLinearProgressIndeterminate: Partial<LinearProgressIndeterminateOwnerState>;
     M4LMenuDivider: Partial<MenuDividerOwnerState>;
     M4LRHFSelect: Partial<RHFSelectOwnerState>;
+    M4LDateTimePicker: Partial<DateTimePickerOwnerState>;
     M4LDivider: Partial<DividerOwnerState>;
-
   }
 
   interface Components {
@@ -544,6 +546,12 @@ declare module '@mui/material/styles' {
         styleOverrides?: ComponentsOverrides<Theme>['M4LRHFSelect'];
         variants?: ComponentsVariants['M4LRHFSelect'];
     };
+
+    M4LDateTimePicker?: {
+      defaultProps?: ComponentsPropsList['M4LDateTimePicker'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LDateTimePicker'];
+      variants?: ComponentsVariants['M4LDateTimePicker'];
+  };
     M4LDivider?: {
         defaultProps?: ComponentsPropsList['M4LDivider'];
         styleOverrides?: ComponentsOverrides<Theme>['M4LDivider'];

package/components/Chip/Chip.js

@@ -11,6 +11,7 @@ const Chip = forwardRef((props, ref) => {
     label,
     startIcon,
     color = "default",
+    externalColor,
     size = "small",
     variant = "contained",
     skeletonWidth = "100%",
@@ -29,7 +30,8 @@ const Chip = forwardRef((props, ref) => {
     chipSize: adjustedSize,
     variant,
     color,
-    opacity
+    opacity,
+    externalColor
   };
   if (isSkeleton) {
     return /* @__PURE__ */ jsx(

package/components/Chip/ChipStyles.js

@@ -1,3 +1,4 @@
+import { g as getHeightSizeStyles } from "../../utils/getHeightSizeStyles.js";
 const chipStyles = {
   /**
    * Styles for the root element of the chip.
@@ -7,25 +8,30 @@ const chipStyles = {
    * @updatedUser Andrés Quintero - automatic
    */
   root: ({ theme, ownerState }) => {
-    const keyColor = ownerState.color || "defualt";
-    const keyColorOpacity = keyColor + "Opacity";
-    const keyColorConditionalOpacity = ownerState.opacity ? keyColorOpacity : keyColor;
-    const bgColor = ownerState.variant !== "outlined" ? theme.vars.palette.chips[keyColorConditionalOpacity].backgroundColor : "transparent";
-    const bgActive = theme.vars.palette.chips[keyColorConditionalOpacity].backgroundActive;
-    const bgHover = theme.vars.palette.chips[keyColorConditionalOpacity].backgroundHover;
-    const color = ownerState.variant === "contained" && !ownerState.opacity ? theme.vars.palette.chips[keyColorConditionalOpacity].contrastText : theme.vars.palette.chips[keyColorConditionalOpacity].semanticText;
+    const keyColor = ownerState.variant === "contained" ? ownerState.color + "Contained" : ownerState.color + "Outlined";
+    const finalPalette = ownerState.externalColor ? ownerState.externalColor : theme.vars.palette.chips[keyColor ?? "default"];
+    const color = ownerState.opacity ? finalPalette.color : finalPalette.colorTone;
+    const bgColor = ownerState.opacity ? finalPalette.backgroundColor : finalPalette.backgroundColorTone;
+    const bgHover = ownerState.opacity ? finalPalette.backgroundHover : finalPalette.backgroundHoverTone;
+    const bgActive = ownerState.opacity ? finalPalette.backgroundActive : finalPalette.backgroundActiveTone;
     return {
       display: "flex",
       alignItems: "center",
       padding: theme.vars.size.baseSpacings.sp1,
+      paddingRight: 0,
       borderRadius: theme.vars.size.borderRadius["r0-5"],
       width: "max-content",
       cursor: "pointer",
       color,
-      backgroundColor: bgColor,
+      backgroundColor: !(ownerState.variant === "outlined") ? bgColor : "transparent",
       "& .M4LIcon-icon": {
         backgroundColor: `${color} !important`
       },
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState.chipSize || "medium",
+        "base"
+      ),
       "&:hover": {
         backgroundColor: bgHover
       },
@@ -37,15 +43,14 @@ const chipStyles = {
       },
       ...ownerState.variant === "outlined" && {
         border: `${theme.vars.size.borderStroke.container}`,
-        borderColor: color
+        borderColor: bgColor
       },
       "&:focus-visible": {
         boxShadow: "none",
-        outline: theme.vars.size.borderStroke.container,
-        outlineColor: theme.vars.palette.border.main,
-        outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
+        outline: `${theme.vars.size.borderStroke.container} ${theme.vars.palette.border.main}`,
         backgroundColor: bgActive
-      }
+      },
+      variants: []
     };
   },
   /**
@@ -58,7 +63,7 @@ const chipStyles = {
   textChip: ({ theme }) => ({
     whiteSpace: "nowrap",
     paddingLeft: theme.vars.size.baseSpacings.sp1,
-    paddingRight: theme.vars.size.baseSpacings.sp1
+    paddingRight: theme.vars.size.baseSpacings.sp2
   }),
   /**
    * Styles for the chip icon element.

package/components/Chip/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { ChipColor, ComponentPalletColor, Sizes } from '@m4l/styles';
 import { Theme } from '@mui/material';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { EventHandler, ReactNode } from 'react';
@@ -39,7 +39,11 @@ export interface ChipProps {
      * Defines the color of the `Chip`.
      * @createdAt 2025-01-08 10:36:39 - automatic
      */
-    color?: Exclude<ComponentPalletColor, 'primary'>;
+    color?: Exclude<ComponentPalletColor, 'primary'> | 'florest' | 'disabled';
+    /**
+     * Alternative color for the `Chip`.
+     */
+    externalColor?: ChipColor;
     /**
      * Define el with of skeleton mode
      * @createdAt 2025-01-08 10:36:39 - automatic
@@ -75,9 +79,10 @@ export interface ChipProps {
 /**
  * Owner state of the `Chip` used to define internal style and behavior properties.
  */
-export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'color'> {
+export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'externalColor'> {
     opacity?: boolean;
     chipSize: ChipProps['size'];
+    color: Exclude<ComponentPalletColor, 'primary'> | 'florest' | 'disabled';
 }
 /**
  * Defines the types of Slots available for the `Chip`.

package/components/MenuActions/MenuActions.d.ts

@@ -7,7 +7,7 @@ import { MenuActionsProps } from './types';
  * y estilos configurables.
  * @author cesar - automatic
  * @createdAt 2024-12-17 15:41:39 - automatic
- * @updatedAt 2025-01-22 09:40:57 - automatic
+ * @updatedAt 2025-01-27 09:46:55 - automatic
  * @updatedUser cesar - automatic
  */
 export declare function MenuActions(props: MenuActionsProps): import("react/jsx-runtime").JSX.Element;

package/components/MenuActions/MenuActions.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useState, useMemo } from "react";
 import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
@@ -7,7 +7,7 @@ import { M as MenuItem } from "../mui_extended/MenuItem/MenuItem.js";
 import { I as ICON_PATH, a as ICONS, M as MENU_ACTIONS_ } from "./constants.js";
 import { g as getMenuActionsDictionary, D as DICTIONARY } from "./dictionary.js";
 import { M as MenuDivider } from "../mui_extended/MenuDivider/MenuDivider.js";
-import { R as RootStyled, I as IconButtonStyled, M as MenuListStyled, a as MenuLoaderStyled } from "./slots/MenuActionsSlots.js";
+import { R as RootStyled, I as IconButtonStyled, M as MenuListStyled, a as MenuLoaderStyled, H as HeaderMenuActionsStyled, F as FooterMenuActionsStyled } from "./slots/MenuActionsSlots.js";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/CircularProgress.js";
 function MenuActions(props) {
   const {
@@ -28,6 +28,8 @@ function MenuActions(props) {
     paperProps = {},
     color = "primary",
     actionKey,
+    header,
+    footer,
     ...other
   } = props;
   const { currentSize } = useComponentSize(size);
@@ -69,7 +71,17 @@ function MenuActions(props) {
     if (!finalActions.length) {
       return /* @__PURE__ */ jsx(MenuItem, { disabled: true, role: "menu-no-actions", label: getLabel(getMenuActionsDictionary(DICTIONARY.no_actions_label)) });
     }
+    const renderHeader = () => {
+      return /* @__PURE__ */ jsx(HeaderMenuActionsStyled, { ownerState: {}, children: header });
+    };
+    const renderFooter = () => {
+      return /* @__PURE__ */ jsx(FooterMenuActionsStyled, { ownerState: {}, children: footer });
+    };
     return /* @__PURE__ */ jsxs(MenuListStyled, { ownerState: { ownerState }, children: [
+      header && /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderHeader(),
+        /* @__PURE__ */ jsx(MenuDivider, { variant: "solid", size })
+      ] }),
       finalActions.map((menuAction, index) => {
         const key = actionKey ?? index;
         switch (menuAction.type) {
@@ -94,6 +106,10 @@ function MenuActions(props) {
             return null;
         }
       }),
+      footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MenuDivider, { variant: "solid", size }),
+        renderFooter()
+      ] }),
       endListElement && endListElement
     ] });
   };

package/components/MenuActions/MenuActions.styles.js

@@ -3,7 +3,7 @@ const menuActionsStyles = {
    * Estilos para el contenedor raíz del menú.
    * @author Andrés Quintero - automatic
    * @createdAt 2024-12-27 08:27:30 - automatic
-   * @updatedAt 2025-01-21 10:09:20 - automatic
+   * @updatedAt 2025-01-26 23:53:57 - automatic
    * @updatedUser cesar - automatic
    */
   root: () => ({
@@ -13,7 +13,7 @@ const menuActionsStyles = {
    * Estilos para el MenuList
    * @author Andrés Quintero - automatic
    * @createdAt 2024-12-27 08:27:30 - automatic
-   * @updatedAt 2025-01-21 10:09:20 - automatic
+   * @updatedAt 2025-01-26 23:53:57 - automatic
    * @updatedUser cesar - automatic
    */
   menuList: ({ theme }) => ({
@@ -31,7 +31,7 @@ const menuActionsStyles = {
    * Estilos para el MenuLoader
    * @author cesar - automatic
    * @createdAt 2025-01-20 15:47:07 - automatic
-   * @updatedAt 2025-01-21 10:09:20 - automatic
+   * @updatedAt 2025-01-26 23:53:57 - automatic
    * @updatedUser cesar - automatic
    */
   menuLoader: () => ({
@@ -42,7 +42,7 @@ const menuActionsStyles = {
    * Estilos para el IconButton
    * @author cesar - automatic
    * @createdAt 2025-01-20 16:37:00 - automatic
-   * @updatedAt 2025-01-21 10:09:20 - automatic
+   * @updatedAt 2025-01-26 23:53:57 - automatic
    * @updatedUser cesar - automatic
    */
   iconButton: ({ theme, ownerState }) => ({
@@ -57,6 +57,19 @@ const menuActionsStyles = {
     '& [class*="M4LIcon-icon"]': {
       backgroundColor: ownerState.selected ? theme.vars.palette[ownerState.paletteColor ?? "default"].selected : void 0
     }
+  }),
+  /**
+   * Estilos para el HeaderMenuActions
+   * @author cesar - automatic
+   * @createdAt 2025-01-26 23:53:56 - automatic
+   * @updatedAt 2025-01-26 23:53:57 - automatic
+   * @updatedUser cesar - automatic
+   */
+  headerMenuActions: () => ({
+    width: "100%"
+  }),
+  footerMenuActions: () => ({
+    width: "100%"
   })
 };
 export {

package/components/MenuActions/slots/MenuActionsEnum.d.ts

@@ -8,5 +8,7 @@ export declare enum MenuActionsSlots {
     root = "root",
     menuList = "menuList",
     menuLoader = "menuLoader",
-    iconButton = "iconButton"
+    iconButton = "iconButton",
+    headerMenuActions = "headerMenuActions",
+    footerMenuActions = "footerMenuActions"
 }

package/components/MenuActions/slots/MenuActionsEnum.js

@@ -3,6 +3,8 @@ var MenuActionsSlots = /* @__PURE__ */ ((MenuActionsSlots2) => {
   MenuActionsSlots2["menuList"] = "menuList";
   MenuActionsSlots2["menuLoader"] = "menuLoader";
   MenuActionsSlots2["iconButton"] = "iconButton";
+  MenuActionsSlots2["headerMenuActions"] = "headerMenuActions";
+  MenuActionsSlots2["footerMenuActions"] = "footerMenuActions";
   return MenuActionsSlots2;
 })(MenuActionsSlots || {});
 export {

package/components/MenuActions/slots/MenuActionsSlots.d.ts

@@ -24,3 +24,9 @@ export declare const MenuLoaderStyled: import('@emotion/styled').StyledComponent
 export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "children" | "value" | "title" | "component" | "size" | "name" | "id" | "type" | "selected" | "action" | "hidden" | "content" | "style" | "icon" | "tooltip" | "disabled" | "variant" | "translate" | "sx" | "classes" | "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" | "placement" | "form" | "src" | "rotationAngle" | "tooltipContent" | "instaceDataTestId" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "componentPaletteColor" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown> & {
     ownerState: Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown>;
 }, {}, {}>;
+export declare const HeaderMenuActionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+export declare const FooterMenuActionsStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').MenuActionsOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;

package/components/MenuActions/slots/MenuActionsSlots.js

@@ -20,7 +20,17 @@ const IconButtonStyled = styled(IconButton, {
   name: MENU_ACTIONS_KEY_COMPONENT,
   slot: MenuActionsSlots.iconButton
 })(menuActionsStyles?.iconButton);
+const HeaderMenuActionsStyled = styled("div", {
+  name: MENU_ACTIONS_KEY_COMPONENT,
+  slot: MenuActionsSlots.headerMenuActions
+})(menuActionsStyles?.headerMenuActions);
+const FooterMenuActionsStyled = styled("div", {
+  name: MENU_ACTIONS_KEY_COMPONENT,
+  slot: MenuActionsSlots.footerMenuActions
+})(menuActionsStyles?.footerMenuActions);
 export {
+  FooterMenuActionsStyled as F,
+  HeaderMenuActionsStyled as H,
   IconButtonStyled as I,
   MenuListStyled as M,
   RootStyled as R,

package/components/MenuActions/types.d.ts

@@ -13,7 +13,7 @@ import { MENU_ACTIONS_KEY_COMPONENT } from './constants';
  * onClick - Función a ejecutar al hacer clic en la acción.
  * @author Andrés Quintero - automatic
  * @createdAt 2024-12-27 08:27:30 - automatic
- * @updatedAt 2025-01-22 08:48:47 - automatic
+ * @updatedAt 2025-01-26 23:53:57 - automatic
  * @updatedUser cesar - automatic
  */
 export interface ComponentActionProps {
@@ -96,7 +96,7 @@ export interface MenuActionsProps extends Omit<PopoverProps, 'open' | 'anchorEl'
      * Acciones del menú, puede ser un array o una función que genere acciones.
      * @author Andrés Quintero - automatic
      * @createdAt 2024-12-27 08:27:30 - automatic
-     * @updatedAt 2025-01-22 08:48:47 - automatic
+     * @updatedAt 2025-01-26 23:53:57 - automatic
      * @updatedUser cesar - automatic
      */
     menuActions: MenuAction[] | ((row: any) => MenuAction[]);
@@ -159,7 +159,7 @@ export interface MenuActionsProps extends Omit<PopoverProps, 'open' | 'anchorEl'
      * Función externa para cerrar el menú.
      * @author Andrés Quintero - automatic
      * @createdAt 2024-12-27 08:27:30 - automatic
-     * @updatedAt 2025-01-22 08:48:47 - automatic
+     * @updatedAt 2025-01-26 23:53:57 - automatic
      * @updatedUser cesar - automatic
      */
     externalClose?: (element: null | HTMLDivElement) => void;
@@ -191,6 +191,14 @@ export interface MenuActionsProps extends Omit<PopoverProps, 'open' | 'anchorEl'
      * Define la clave de la acción.
      */
     actionKey?: string;
+    /**
+     * agrega un header al menú
+     */
+    header?: ReactNode;
+    /**
+     * agrega un footer al menú
+     */
+    footer?: ReactNode;
 }
 /**
  * Estado del propietario para `MenuActions`.

package/components/hook-form/RHFDateTime/RHFDateTime.d.ts

@@ -1,5 +1,9 @@
 import { RHFDateTimeProps } from './types';
 /**
  * TODO: Documentar
+ * @author DanielEscobar - automatic
+ * @createdAt 2025-01-27 14:53:37 - automatic
+ * @updatedAt 2025-01-28 12:16:07 - automatic
+ * @updatedUser DanielEscobar - automatic
  */
 export declare function RHFDateTime(props: RHFDateTimeProps): import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFDateTime/RHFDateTime.js

@@ -1,79 +1,44 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useFormContext, Controller } from "react-hook-form";
-import { DateTimePicker } from "@mui/x-date-pickers";
-import { useEnvironment, useModuleSkeleton } from "@m4l/core";
-import { S as SkeletonRHFDateTime } from "./subcomponents/Skeleton/index.js";
-import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
-import { useState, useEffect } from "react";
-import { u as useUtilityClasses } from "./classes/index.js";
 import clsx from "clsx";
-import { R as RHFDateTimeRoot } from "./styles.js";
-import { g as getNameRHFDateTimeDataTestId } from "./test/utils.js";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.js";
-import { u as useFormFocus } from "../../../hooks/useFormFocus/index.js";
+import { useId } from "react";
+import { useFormContext, Controller } from "react-hook-form";
+import { useFormatter } from "@m4l/graphics";
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { g as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { D as DateTimePicker } from "../../mui_extended/DateTimePicker/DateTimePicker.js";
+import { R as RHFDateTimeRootStyled } from "./slots/RHFDateTimeSlots.js";
+import { R as RHF_DATE_TIME_KEY_COMPONENT } from "./constants.js";
+import { R as RHFDateTimeSlots } from "./slots/RHFDateTimeEnum.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { L as Label } from "../../Label/Label.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
-import { I as Icon } from "../../Icon/Icon.js";
 function RHFDateTime(props) {
   const {
     name: nameRHF,
     disabled,
-    size = "small",
+    size = "medium",
     variant,
-    skeletonWidth = "50%",
-    skeletonHeight = 14,
-    className,
     label,
     helperMessage,
     mandatory,
-    mandatoryMessage
+    mandatoryMessage,
+    className,
+    dataTestId
   } = props;
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const resourceIcon = () => {
-    return /* @__PURE__ */ jsx(
-      Icon,
-      {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/rhfdate/ended_at.svg`
-      }
-    );
-  };
-  const [currentVariant, setCurrentVariant] = useState(void 0);
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
-  const {
-    control,
-    formState: { errors }
-  } = useFormContext();
-  useEffect(() => {
-    if (errors[nameRHF]) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(void 0);
-    }
-  }, [errors[nameRHF], variant, control]);
-  const isSkeleton = useModuleSkeleton();
+  const { control } = useFormContext();
+  const htmlForId = useId();
   const {
     dateFormatter: { datetimeFormat }
   } = useFormatter();
-  const isDesktop = useResponsiveDesktop();
-  const ownerState = {
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    disabled,
-    size: isDesktop ? size : "medium",
-    variant: currentVariant
-  };
-  const classes = useUtilityClasses(ownerState);
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const classes = getComponentClasses(RHF_DATE_TIME_KEY_COMPONENT, RHFDateTimeSlots);
   return /* @__PURE__ */ jsx(
-    RHFDateTimeRoot,
+    RHFDateTimeRootStyled,
     {
-      className: clsx(classes.root, className),
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: getNameRHFDateTimeDataTestId("root") } : {},
-      children: !isSkeleton ? /* @__PURE__ */ jsx(
+      className: clsx(className, classes.root),
+      ...getPropDataTestId(RHF_DATE_TIME_KEY_COMPONENT, RHFDateTimeSlots.root, dataTestId),
+      children: /* @__PURE__ */ jsx(
         Controller,
         {
           name: nameRHF,
@@ -83,7 +48,9 @@ function RHFDateTime(props) {
               label && /* @__PURE__ */ jsx(
                 Label,
                 {
-                  htmlFor: "",
+                  disabled,
+                  htmlFor: htmlForId,
+                  size: adjustedSize,
                   label,
                   mandatory,
                   mandatoryMessage,
@@ -93,41 +60,27 @@ function RHFDateTime(props) {
               /* @__PURE__ */ jsx(
                 DateTimePicker,
                 {
-                  sx: {
-                    "& .MuiTouchRipple-root": {
-                      display: "none"
-                    }
-                  },
+                  variant,
+                  size: adjustedSize,
+                  disabled,
                   inputRef: ref,
-                  ampm: true,
-                  value,
-                  onChange: (newValue) => {
-                    onChange(newValue);
-                  },
-                  slots: {
-                    openPickerIcon: resourceIcon
-                  },
                   slotProps: {
-                    textField: {
-                      onFocus: handlerFocus,
-                      onBlur: handlerOnBlur
+                    field: {
+                      format: datetimeFormat
                     },
-                    field: { format: datetimeFormat }
-                  }
+                    textField: {
+                      id: htmlForId
+                    }
+                  },
+                  value,
+                  onChange,
+                  error: !!error?.message
                 }
               ),
-              error?.message && /* @__PURE__ */ jsx(HelperError, { message: error?.message + "" })
+              error?.message && /* @__PURE__ */ jsx(HelperError, { size: adjustedSize, htmlFor: htmlForId, message: error?.message + "" })
             ] });
           }
         }
-      ) : /* @__PURE__ */ jsx(
-        SkeletonRHFDateTime,
-        {
-          skeletonWidth,
-          skeletonHeight,
-          className: classes,
-          label
-        }
       )
     }
   );

package/components/hook-form/RHFDateTime/RHFDateTime.styles.d.ts

@@ -0,0 +1,2 @@
+import { RHFDateTimeStyles } from './types';
+export declare const rhfDateTimeStyles: RHFDateTimeStyles;

package/components/hook-form/RHFDateTime/RHFDateTime.styles.js

@@ -0,0 +1,17 @@
+const rhfDateTimeStyles = {
+  /**
+   * estilos root
+   * @author DanielEscobar - automatic
+   * @createdAt 2025-01-27 11:56:49 - automatic
+   * @updatedAt 2025-01-27 11:56:50 - automatic
+   * @updatedUser DanielEscobar - automatic
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings["sp0-5"]
+  })
+};
+export {
+  rhfDateTimeStyles as r
+};

package/components/hook-form/RHFDateTime/constants.d.ts

@@ -0,0 +1 @@
+export declare const RHF_DATE_TIME_KEY_COMPONENT = "M4LRHFDateTime";

package/components/hook-form/RHFDateTime/constants.js

@@ -0,0 +1,4 @@
+const RHF_DATE_TIME_KEY_COMPONENT = "M4LRHFDateTime";
+export {
+  RHF_DATE_TIME_KEY_COMPONENT as R
+};

package/components/hook-form/RHFDateTime/slots/RHFDateTimeEnum.d.ts

@@ -0,0 +1,3 @@
+export declare enum RHFDateTimeSlots {
+    root = "root"
+}

package/components/hook-form/RHFDateTime/slots/RHFDateTimeEnum.js

@@ -0,0 +1,7 @@
+var RHFDateTimeSlots = /* @__PURE__ */ ((RHFDateTimeSlots2) => {
+  RHFDateTimeSlots2["root"] = "root";
+  return RHFDateTimeSlots2;
+})(RHFDateTimeSlots || {});
+export {
+  RHFDateTimeSlots as R
+};

package/components/hook-form/RHFDateTime/slots/RHFDateTimeSlots.d.ts

@@ -0,0 +1 @@
+export declare const RHFDateTimeRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;

package/components/hook-form/RHFDateTime/slots/RHFDateTimeSlots.js

@@ -0,0 +1,9 @@
+import { styled } from "@mui/material";
+import { R as RHF_DATE_TIME_KEY_COMPONENT } from "../constants.js";
+import { r as rhfDateTimeStyles } from "../RHFDateTime.styles.js";
+const RHFDateTimeRootStyled = styled("div", {
+  name: RHF_DATE_TIME_KEY_COMPONENT
+})(rhfDateTimeStyles.root);
+export {
+  RHFDateTimeRootStyled as R
+};

package/components/hook-form/RHFDateTime/tests/RHFDateTime.test.d.ts

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