@m4l/components 9.1.77 → 9.1.79

package/@types/types.d.ts

@@ -142,6 +142,7 @@ import { PropagateLoaderSpinnerOwnerState, PropagateLoaderSpinnerType } from '..
 import { LinearProgressIndeterminateOwnerState, LinearProgressIndeterminateType } from '../components/LinearProgressIndeterminate/types';
 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';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -191,6 +192,7 @@ declare module '@mui/material/styles' {
     M4LToggleButton: ToggleButtonSlotsType;
     M4LBooleanFormatter: PresentationType;
     M4LToggleIconButton: ToggleIconButtonSlotsType;
+    M4LRHFCheckBox: RHFCheckBoxSlotsType;
     M4LTabs: TabsSlotsType;
     RHFM4LAutocomplete: RHFAutocompleteSlotsType;
     M4LAccountPopover: AccountPopoverSlotsType;
@@ -247,6 +249,7 @@ declare module '@mui/material/styles' {
     M4LToggleButton: Partial<ToggleButtonOwnerState>;
     M4LBooleanFormatter: Partial<BooleanFormatterOwnerState>;
     M4LToggleIconButton: Partial<ToggleIconButtonOwnerState>;
+    M4LRHFCheckBox: Partial<RHFCheckBoxOwnerState>;
     M4LTabs: Partial<TabsOwnerState>;
     RHFM4LAutocomplete: Partial<RHFAutocompleteOwnerState>;
     M4LAccountPopover: Partial<AccountPopoverOwnerState>;
@@ -481,6 +484,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LPropertyValue'];
       variants?: ComponentsVariants['M4LPropertyValue'];
     };
+    M4LRHFCheckBox?: {
+      defaultProps?: ComponentsPropsList['M4LRHFCheckBox'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LRHFCheckBox'];
+      variants?: ComponentsVariants['M4LRHFCheckBox'];
+    };
     M4LTabs?: {
       defaultProps?: ComponentsPropsList['M4LTabs'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LTabs'];
@@ -525,11 +533,12 @@ declare module '@mui/material/styles' {
         defaultProps?: ComponentsPropsList['M4LMenuDivider'];
         styleOverrides?: ComponentsOverrides<Theme>['M4LMenuDivider'];
         variants?: ComponentsVariants['M4LMenuDivider'];
-    };
+      };
+
     M4LRHFSelect?: {
         defaultProps?: ComponentsPropsList['M4LRHFSelect'];
         styleOverrides?: ComponentsOverrides<Theme>['M4LRHFSelect'];
         variants?: ComponentsVariants['M4LRHFSelect'];
     };
- }
+  }
 }

package/components/HelperError/HelperError.d.ts

@@ -10,4 +10,4 @@ import { HelperErrorProps } from './types';
  * @updatedAt 2025-01-08 10:36:40 - automatic
  * @updatedUser Andrés Quintero - automatic
  */
-export declare const HelperError: (props: HelperErrorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HelperError: import('react').ForwardRefExoticComponent<HelperErrorProps & import('react').RefAttributes<HTMLLabelElement>>;

package/components/HelperError/HelperError.js

@@ -1,39 +1,34 @@
-import { jsx } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-import { getPropertyByString } from "@m4l/core";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useModuleSkeleton } from "@m4l/core";
 import { clsx } from "clsx";
-import { H as HELPER_ERROR_KEY_COMPONENT, c as classHelperErrorRoot, a as HELPER_ERROR_CLASS_SPECIFY } from "./constant.js";
+import { H as HELPER_ERROR_KEY_COMPONENT, c as classHelperErrorRoot } from "./constant.js";
 import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
-import { T as TypographyStyled } from "./slots/HelperErrorSlots.js";
-const HelperError = (props) => {
-  const { message = "", skeletonWidth, size = "medium", className, ...other } = props;
+import { T as TypographyStyled, S as SkeletonStyled } from "./slots/HelperErrorSlots.js";
+const HelperError = forwardRef(function HelperError2(props, ref) {
+  const { message = "", size = "medium", className, ...other } = props;
+  const isSkeleton = useModuleSkeleton();
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
-  const theme = useTheme();
-  const paletteColor = getPropertyByString(
-    theme.palette,
-    "error",
-    theme.palette.default
-  );
   const ownerState = {
-    helperErrorPaletteColor: paletteColor,
-    helperErrorSizes: size
+    size,
+    color: "error"
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Fragment, { children: !isSkeleton ? /* @__PURE__ */ jsx(
     TypographyStyled,
     {
+      ref,
       "aria-errormessage": HELPER_ERROR_KEY_COMPONENT,
-      className: clsx(classHelperErrorRoot, HELPER_ERROR_CLASS_SPECIFY, className),
-      ownerState: { ...ownerState, size: currentSize },
+      className: clsx(classHelperErrorRoot, className),
+      ownerState: { ...ownerState },
       size: adjustedSize,
       variant: "body",
-      skeletonWidth,
       component: "label",
       ...other,
       children: message
     }
-  );
-};
+  ) : /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { ...ownerState }, variant: "text" }) });
+});
 export {
   HelperError as H
 };

package/components/HelperError/HelperError.styles.js

@@ -1,4 +1,4 @@
-import { a as HELPER_ERROR_CLASS_SPECIFY } from "./constant.js";
+import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
 const helperErrorStyles = {
   /**
    * Estilos para el slot del root HelperError
@@ -8,13 +8,19 @@ const helperErrorStyles = {
    * @updatedUser Andrés Quintero - automatic
    */
   root: ({ theme, ownerState }) => ({
-    [`&.${HELPER_ERROR_CLASS_SPECIFY}`]: {
-      color: ownerState.helperErrorPaletteColor?.main,
-      ...ownerState.size === "small" && {
-        ...theme.generalSettings.isMobile ? { height: theme.size.typography.mobile.small } : { height: theme.size.typography.desktop.small }
-      },
-      ...ownerState.size === "medium" && {
-        ...theme.generalSettings.isMobile ? { height: theme.size.typography.mobile.medium } : { height: theme.size.typography.desktop.medium }
+    "&.MuiTypography-root": {
+      "&.M4lclassCssSpecificity": {
+        color: theme.vars.palette.error.enabled,
+        ...getTypographyStyles(
+          theme.generalSettings.isMobile,
+          ownerState.size || "medium",
+          "body"
+        ),
+        ...getTypographyStyles(
+          theme.generalSettings.isMobile,
+          ownerState.size || "small",
+          "body"
+        )
       }
     }
   }),
@@ -26,13 +32,17 @@ const helperErrorStyles = {
    * @updatedUser Andrés Quintero - automatic
    */
   skeletonStyled: ({ theme, ownerState }) => ({
-    ...ownerState.size === "small" && {
-      ...theme.generalSettings.isMobile ? { height: theme.size.typography.desktop.small } : { height: theme.vars.size.desktop.small.container }
-    },
-    // Condiciones de tamaño Medium en el root
-    ...ownerState.size === "medium" && {
-      ...theme.generalSettings.isMobile ? { height: theme.vars.size.mobile.medium.container } : { height: theme.vars.size.desktop.medium.container }
-    },
+    width: theme.vars.size.baseSpacings.sp14,
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "body"
+    ),
+    ...getTypographyStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "small",
+      "body"
+    ),
     variants: []
   })
 };

package/components/HelperError/constant.d.ts

@@ -7,5 +7,4 @@ export declare const HELPER_ERROR_KEY_COMPONENT = "M4LHelperError";
  * Nombre de clase creado para aportar especificidad a los estilos del componente. Es usado para sobreescribir los estilos de MUI sin
  * tener la necesidad de agregar valores en !important.
  */
-export declare const HELPER_ERROR_CLASS_SPECIFY = "M4lclassCssSpecificity";
 export declare const classHelperErrorRoot: string;

package/components/HelperError/constant.js

@@ -1,9 +1,7 @@
 import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 const HELPER_ERROR_KEY_COMPONENT = "M4LHelperError";
-const HELPER_ERROR_CLASS_SPECIFY = "M4lclassCssSpecificity";
 const classHelperErrorRoot = getComponentSlotRoot(HELPER_ERROR_KEY_COMPONENT);
 export {
   HELPER_ERROR_KEY_COMPONENT as H,
-  HELPER_ERROR_CLASS_SPECIFY as a,
   classHelperErrorRoot as c
 };

package/components/HelperError/slots/HelperErrorSlots.js

@@ -8,10 +8,11 @@ const TypographyStyled = styled(Typography, {
   name: HELPER_ERROR_KEY_COMPONENT,
   slot: HelperErrorSlots.root
 })(helperErrorStyles?.root);
-styled(Skeleton, {
+const SkeletonStyled = styled(Skeleton, {
   name: HELPER_ERROR_KEY_COMPONENT,
   slot: HelperErrorSlots.skeletonStyled
 })(helperErrorStyles?.skeletonStyled);
 export {
+  SkeletonStyled as S,
   TypographyStyled as T
 };

package/components/HelperError/types.d.ts

@@ -1,4 +1,4 @@
-import { PaletteColor, Theme } from '@mui/material';
+import { Theme } from '@mui/material';
 import { TypographyProps } from '../mui_extended/Typography/types';
 import { HELPER_ERROR_KEY_COMPONENT } from './constant';
 import { HelperErrorSlots } from './slots';
@@ -28,21 +28,17 @@ export interface HelperErrorProps extends Pick<TypographyProps, 'skeletonWidth'
  */
 export interface HelperErrorOwnerState {
     /**
-     * Color de la paleta del campo de texto.
+     * Color de la paleta del texto.
      */
-    helperErrorPaletteColor: PaletteColor;
+    color?: Extract<ComponentPalletColor, 'error'>;
     /**
      * Color de la paleta del componente del campo de texto.
      */
-    helperErrorComponentPaletteColor?: ComponentPalletColor;
+    componentPaletteColor?: ComponentPalletColor;
     /**
      * Tamaño del campo de texto.
      */
-    helperErrorSizes: Extract<Sizes, 'small' | 'medium'>;
-    /**
-     * Indica si el campo de texto es error.
-     */
-    helperStateError?: boolean;
+    size: Extract<Sizes, 'small' | 'medium'>;
 }
 /**
  * Define los tipos de slots disponibles en HelperError utilizando las claves de HelperErrorSlots.
@@ -51,4 +47,4 @@ export type HelperErrorSlotsType = keyof typeof HelperErrorSlots;
 /**
  * Define los estilos personalizables para HelperError, permitiendo la sobrescritura de estilos por defecto.
  */
-export type HelperErrorStyles = Partial<OverridesStyleRules<HelperErrorSlotsType, typeof HELPER_ERROR_KEY_COMPONENT, Theme> | undefined> | undefined;
+export type HelperErrorStyles = OverridesStyleRules<HelperErrorSlotsType, typeof HELPER_ERROR_KEY_COMPONENT, Theme>;

package/components/Label/Label.js

@@ -57,7 +57,7 @@ const Label = (props) => {
           }
         )
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { ...ownerState }, variant: "text", className: "SkeletonWidthLabel" }),
+        /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { ...ownerState }, variant: "rectangular", className: "SkeletonWidthLabel" }),
         mandatory && /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { ...ownerState }, variant: "circular", className: "MandatoryLabel" }),
         helperMessage && /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { ...ownerState }, variant: "circular", className: "HelperIconLabel" })
       ] })

package/components/Label/Label.styles.js

@@ -2,30 +2,43 @@ import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
 import { g as getHeightSizeStyles } from "../../utils/getHeightSizeStyles.js";
 const labelStyles = {
   /**
-   * Estilos para el contenedor raíz del Label.
+   * Estilos para el contenedor raíz del Label 🏷️
+   * @param {object} theme - El tema de MUI.
+   * @param {object} ownerState - El estado del componente.
+   * @returns {object} - Los estilos aplicados al root del Label.
    * @author Bruce Escobar - automatic
    * @createdAt 2024-10-22 09:34:39 - automatic
-   * @updatedAt 2025-01-08 10:36:40 - automatic
-   * @updatedUser Andrés Quintero - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   root: ({ theme, ownerState }) => ({
     display: "flex",
-    flexDireccion: "row",
+    flexDirection: "row",
     alignItems: "center",
     flexWrap: "wrap",
     width: "fit-content",
     ...getHeightSizeStyles(
       theme.generalSettings.isMobile,
       ownerState.size || "small",
-      "base"
+      "base",
+      (height) => ({
+        minHeight: height,
+        height: "auto",
+        maxHeight: "none"
+      })
     ),
     gap: theme.size.baseSpacings.sp1,
+    /** Estilos para el estado disabled del Label 😶‍🌫️ */
     ...ownerState.disabled && {
       color: theme.vars.palette.text.disabled
     }
   }),
   /**
    * Estilos para el slot Typography del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   typographyStyled: ({ theme, ownerState }) => ({
     "&.MuiTypography-root": {
@@ -49,6 +62,10 @@ const labelStyles = {
   }),
   /**
    * Estilos para el slot Typography del mensaje obligatorio del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   typographyMandatoryMessageStyled: ({ theme, ownerState }) => ({
     "&.MuiTypography-root": {
@@ -72,6 +89,10 @@ const labelStyles = {
   }),
   /**
    * Estilos para el slot Icon del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   iconHelperMessageStyled: ({ theme, ownerState }) => ({
     borderRadius: theme.vars.size.borderRadius.r1,
@@ -85,10 +106,19 @@ const labelStyles = {
       theme.generalSettings.isMobile,
       ownerState.size || "small",
       "base"
+    ),
+    ...getHeightSizeStyles(
+      theme.generalSettings.isMobile,
+      ownerState.size || "medium",
+      "base"
     )
   }),
   /**
    * Estilos para el slot Skeleton del Label.
+   * @author cesar - automatic
+   * @createdAt 2025-01-20 18:52:54 - automatic
+   * @updatedAt 2025-01-20 18:52:54 - automatic
+   * @updatedUser cesar - automatic
    */
   skeletonStyled: ({ ownerState, theme }) => ({
     width: "100%",
@@ -99,27 +129,54 @@ const labelStyles = {
     ...getHeightSizeStyles(
       theme.generalSettings.isMobile,
       ownerState.size || "medium",
-      "action"
+      "base"
     ),
     ...getHeightSizeStyles(
       theme.generalSettings.isMobile,
       ownerState.size || "small",
-      "action"
+      "base"
     ),
     "&.MandatoryLabel": {
       width: theme.vars.size.baseSpacings["sp0-5"],
-      padding: theme.vars.size.baseSpacings.sp1,
-      height: theme.vars.size.baseSpacings.sp3
+      paddingLeft: theme.vars.size.baseSpacings.sp1,
+      paddingRight: theme.vars.size.baseSpacings.sp1
     },
     "&.SkeletonWidthLabel": {
       width: theme.vars.size.baseSpacings.sp14,
-      borderRadius: theme.vars.size.borderRadius.r1
+      borderRadius: theme.vars.size.borderRadius.r1,
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState.size || "medium",
+        "base"
+      ),
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState.size || "small",
+        "base"
+      )
     },
     "&.HelperIconLabel": {
-      width: theme.vars.size.baseSpacings.sp2,
       borderRadius: theme.vars.size.borderRadius.r4,
-      height: theme.vars.size.baseSpacings.sp2,
-      padding: theme.vars.size.baseSpacings.sp2
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState.size || "small",
+        "base",
+        (val) => {
+          return {
+            width: val
+          };
+        }
+      ),
+      ...getHeightSizeStyles(
+        theme.generalSettings.isMobile,
+        ownerState.size || "medium",
+        "base",
+        (val) => {
+          return {
+            width: val
+          };
+        }
+      )
     }
   })
 };

package/components/Label/types.d.ts

@@ -32,6 +32,7 @@ export interface LabelProps extends Pick<TypographyProps, 'skeletonWidth'> {
     error?: boolean;
     /** Indica si el componente está deshabilitado. */
     disabled?: boolean;
+    /** Indica si el componente está deshabilitado. */
     helperText?: string;
 }
 export type OwnerState = Pick<LabelProps, 'size'>;

package/components/NumberInput/NumberInput.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { g as getPropDataTestId } from "../../test/getNameDataTestId.js";
+import { u as useNumberInput } from "./hooks/useNumberInput/useNumberInput.js";
+import { S as SkeletonStyled, R as RootStyled, I as InputStyled, C as ContainButtonsAdornmentStyled, a as ContainerButtonsStyled, b as IncrementButtonStyled, D as DecrementButtonStyled } from "./slots/NumberInputSlots.js";
+import { N as NUMBER_INPUT_KEY_COMPONENT } from "./constants.js";
+import { N as NumberInputSlots } from "./slots/NumberInputEnum.js";
+const NumberInput = forwardRef(function NumberInput2(props, forwardedRef) {
+  const {
+    className,
+    defaultValue,
+    value,
+    disabled = false,
+    endAdornment,
+    error,
+    id,
+    max,
+    min,
+    onBlur,
+    onInputChange,
+    onFocus,
+    onChange,
+    required,
+    readOnly = false,
+    shiftMultiplier,
+    startAdornment,
+    step,
+    size = "medium",
+    variant = "outlined",
+    withDecimal = false,
+    dataTestId
+  } = props;
+  const {
+    getRootProps,
+    getInputProps,
+    getIncrementButtonProps,
+    getDecrementButtonProps,
+    focusError
+  } = useNumberInput({
+    min,
+    max,
+    step,
+    withDecimal,
+    shiftMultiplier,
+    defaultValue,
+    disabled,
+    error,
+    onFocus,
+    onInputChange,
+    onBlur,
+    onChange,
+    required,
+    readOnly,
+    value,
+    inputId: id,
+    componentName: NUMBER_INPUT_KEY_COMPONENT
+  });
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const ownerState = {
+    disabled,
+    error,
+    size,
+    variant,
+    focusError,
+    noButtons: withDecimal
+  };
+  const isSkeleton = useModuleSkeleton();
+  const classes = getComponentClasses(NUMBER_INPUT_KEY_COMPONENT, NumberInputSlots);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      SkeletonStyled,
+      {
+        ownerState,
+        className: clsx(classes.skeleton, className),
+        ...getPropDataTestId(NUMBER_INPUT_KEY_COMPONENT, NumberInputSlots.skeleton, dataTestId)
+      }
+    );
+  }
+  const ICON_INCREMENT = `${host_static_assets}/${environment_assets}/frontend/components/ControlIncrement/assets/icons/chevron_up_sm.svg`;
+  const ICON_DECREMENT = `${host_static_assets}/${environment_assets}/frontend/components/ControlIncrement/assets/icons/chevron_down_sm.svg`;
+  return /* @__PURE__ */ jsxs(
+    RootStyled,
+    {
+      ...getPropDataTestId(NUMBER_INPUT_KEY_COMPONENT, NumberInputSlots.root, dataTestId),
+      className: clsx(classes.root, className),
+      ref: forwardedRef,
+      ownerState,
+      ...getRootProps(),
+      children: [
+        startAdornment,
+        /* @__PURE__ */ jsx(InputStyled, { className: clsx(classes.input, className), ownerState, ...getInputProps() }),
+        /* @__PURE__ */ jsxs(ContainButtonsAdornmentStyled, { ownerState, children: [
+          endAdornment,
+          !withDecimal && /* @__PURE__ */ jsxs(ContainerButtonsStyled, { className: clsx(classes.containerButtons, className), ownerState, children: [
+            /* @__PURE__ */ jsx(
+              IncrementButtonStyled,
+              {
+                icon: ICON_INCREMENT,
+                className: clsx(classes.increment, className),
+                ownerState,
+                ...getIncrementButtonProps()
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DecrementButtonStyled,
+              {
+                icon: ICON_DECREMENT,
+                className: clsx(classes.decrement, className),
+                ownerState,
+                ...getDecrementButtonProps()
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+export {
+  NumberInput as N
+};