@m4l/components 9.1.52 → 9.1.53

package/components/Label/Label.js

@@ -1,36 +1,51 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useEnvironment, useModuleSkeleton } from "@m4l/core";
+import clsx from "clsx";
+import { L as LABEL_KEY_COMPONENT } from "./constants.js";
+import { a as getComponentSlotRoot } from "../../utils/getComponentSlotRoot.js";
 import { L as LabelRootStyled, T as TypographyStyled, a as TypographyMandatoryMessageStyled, I as IconHelperMessageStyled, S as SkeletonStyled } from "./slots/LabelSlots.js";
 const Label = (props) => {
-  const { helperMessage, label, mandatory, mandatoryMessage, htmlFor, id, error, size = "medium", disabled } = props;
+  const { helperMessage, label, mandatory, mandatoryMessage, htmlFor, id, error, size = "medium", disabled, className } = props;
   const { host_static_assets, environment_assets } = useEnvironment();
   const isSkeleton = useModuleSkeleton();
-  return /* @__PURE__ */ jsx(LabelRootStyled, { ownerState: { disabled }, htmlFor, id, label: "", variantLabel: "standard", children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(TypographyStyled, { ownerState: { size, disabled }, variant: "body", className: "", children: label }),
-    mandatory && /* @__PURE__ */ jsx(
-      TypographyMandatoryMessageStyled,
-      {
-        ownerState: { size, disabled },
-        variant: "body",
-        className: mandatoryMessage ? "mandatoryMessage" : "mandatoryAsterisk",
-        children: mandatoryMessage ? mandatoryMessage : "*"
-      }
-    ),
-    helperMessage && /* @__PURE__ */ jsx(
-      IconHelperMessageStyled,
-      {
-        tooltipContent: helperMessage,
-        ownerState: { disabled },
-        placement: "right",
-        className: error ? "helper-icon-error" : "helper-icon",
-        src: `${host_static_assets}/${environment_assets}/frontend/components/LabelMessage/assets/icons/infoSmall.svg`
-      }
-    )
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: {}, variant: "text", width: "30%", height: "14px" }),
-    mandatory && /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: {}, variant: "text", width: "10px", height: "14px" }),
-    helperMessage && /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { type: "helperMessage" }, variant: "rounded", width: "14px", height: "14px" })
-  ] }) });
+  const classRoot = getComponentSlotRoot(LABEL_KEY_COMPONENT);
+  return /* @__PURE__ */ jsx(
+    LabelRootStyled,
+    {
+      className: clsx(classRoot, className),
+      "aria-label": LABEL_KEY_COMPONENT,
+      ownerState: { disabled },
+      htmlFor,
+      id,
+      label: "",
+      children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TypographyStyled, { ownerState: { size, disabled }, variant: "body", className: "", children: label }),
+        mandatory && /* @__PURE__ */ jsx(
+          TypographyMandatoryMessageStyled,
+          {
+            ownerState: { size, disabled },
+            variant: "body",
+            className: mandatoryMessage ? "mandatoryMessage" : "mandatoryAsterisk",
+            children: mandatoryMessage ? mandatoryMessage : "*"
+          }
+        ),
+        helperMessage && /* @__PURE__ */ jsx(
+          IconHelperMessageStyled,
+          {
+            tooltipContent: helperMessage,
+            ownerState: { disabled },
+            placement: "right",
+            className: error ? "helper-icon-error" : "helper-icon",
+            src: `${host_static_assets}/${environment_assets}/frontend/components/LabelMessage/assets/icons/infoSmall.svg`
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: {}, variant: "text", width: "30%", height: "14px" }),
+        mandatory && /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: {}, variant: "text", width: "10px", height: "14px" }),
+        helperMessage && /* @__PURE__ */ jsx(SkeletonStyled, { ownerState: { type: "helperMessage" }, variant: "rounded", width: "14px", height: "14px" })
+      ] })
+    }
+  );
 };
 export {
   Label as L

package/components/Label/types.d.ts

@@ -8,7 +8,6 @@ export interface LabelProps {
     helperMessage?: string | undefined;
     /** Es la etiqueta de texto principal del componente.*/
     label: string;
-    variantLabel?: LabelVariants;
     /** Es una propiedad que permite visualizar el texto que acompaña a la etiqueta `label` Por defecto es `false`.*/
     mandatory?: boolean;
     /** Es una etiqueta de texto que define si el campo es obligatorio, por defecto se visualiza un `*` de lo contrario se va a mostrar el valor que se proporciona .*/
@@ -32,7 +31,7 @@ export interface LabelProps {
     /** Indica si el componente está deshabilitado. */
     disabled?: boolean;
 }
-export type OwnerState = Pick<LabelProps, 'size' | 'variantLabel'>;
+export type OwnerState = Pick<LabelProps, 'size'>;
 export interface LabelOwnerState extends LabelProps, OwnerState {
 }
 export type LabelSlotsType = keyof typeof LabelSlots;

package/components/areas/components/AreasAdmin/subcomponents/AreaChip/index.js

@@ -177,8 +177,6 @@ const AreaChip = (props) => {
                     RHFTextField,
                     {
                       name: "inputEditArea",
-                      skeletonWidth: "70%",
-                      skeletonHeight: "18px",
                       sx: { mt: "20px" }
                     }
                   ),

package/components/areas/components/AreasAdmin/subcomponents/AreaChipMobile/subcomponents/ChipMobile/ChipMobile.js

@@ -177,8 +177,6 @@ const ChipMobile = (props) => {
                     RHFTextField,
                     {
                       name: "inputEditArea",
-                      skeletonWidth: "70%",
-                      skeletonHeight: "18px",
                       sx: { mt: "20px" }
                     }
                   ),

package/components/hook-form/RHFColorPicker/RFHColorPicker.js

@@ -1,58 +1,63 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { useFormContext, useWatch, Controller } from "react-hook-form";
-import { useModuleSkeleton, useEnvironment, useModuleDictionary } from "@m4l/core";
-import { SketchPicker } from "react-color";
-import { u as useUtilityClasses } from "./classes/index.js";
-import { R as RHFColorPickerRoot } from "./styles.js";
-import { useTheme } from "@mui/material/styles";
-import { R as RHFColorPickerSkeleton } from "./subcomponents/Skeleton/indext.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { u as useFormFocus } from "../../../hooks/useFormFocus/index.js";
+import { clsx } from "clsx";
+import { useModuleSkeleton } from "@m4l/core";
+import { useTheme } from "@mui/material";
+import { a as getPropDataTestId } from "../../../test/getNameDataTestId.js";
+import { R as RHFCOLORPICKER_PREFIX, a as RHFCOLOR_PICKER_KEY_COMPONENT } from "./constants.js";
+import { R as RHFColorPickerSlots } from "./slots/RHFColorPickerEnum.js";
+import { R as RootStyled, P as PopoverStyled, S as SketchPickerStyled } from "./slots/RHFColorPickerSlots.js";
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
 import { L as Label } from "../../Label/Label.js";
+import { C as Color } from "../../Color/Color.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
-import { P as Popover } from "../../mui_extended/Popover/Popover.js";
-import { B as Button } from "../../mui_extended/Button/Button.js";
-import { I as Icon } from "../../Icon/Icon.js";
+import { A as ActionsContainer } from "../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { A as ActionCancel } from "../../CommonActions/components/ActionCancel/ActionCancel.js";
+import { A as ActionIntro } from "../../CommonActions/components/ActionIntro/ActionIntro.js";
 const RHFColorPicker = (props) => {
-  const { name, size = "small", label, mandatory, mandatoryMessage, helperMessage } = props;
-  const { control, setValue, trigger } = useFormContext();
-  const isSkeleton = useModuleSkeleton();
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { isFocus, isTabSelected, handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
+  const {
+    name,
+    size = "small",
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    instaceDataTestId,
+    disabled,
+    className
+  } = props;
+  const { control, setValue, formState: { isSubmitted } } = useFormContext();
   const theme = useTheme();
+  const isSkeleton = useModuleSkeleton();
+  const { currentSize } = useComponentSize(size);
+  const ownerState = {
+    size: currentSize
+  };
   const currentColor = useWatch({
     name,
     control
   });
-  const isDesktop = useResponsiveDesktop();
   const [tempColor, setTempColor] = useState(() => currentColor || "#ffffff");
   const [anchorEl, setAnchorEl] = useState(null);
-  const { getLabel } = useModuleDictionary();
   const handleColorChange = (color) => {
     setTempColor(color.hex);
   };
   const handleApprove = () => {
     setAnchorEl(null);
     if (tempColor !== currentColor) {
-      setValue(name, tempColor);
-      trigger(name);
+      setValue(name, tempColor, { shouldValidate: isSubmitted });
     }
   };
-  const ownerState = {
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    size: isDesktop ? size : "medium"
-  };
-  const classes = useUtilityClasses(ownerState);
+  const classes = getComponentClasses(RHFCOLOR_PICKER_KEY_COMPONENT, RHFColorPickerSlots);
   return /* @__PURE__ */ jsx(
-    RHFColorPickerRoot,
+    RootStyled,
     {
-      className: classes.root,
-      onFocus: handlerFocus,
-      onBlur: handlerOnBlur,
-      onKeyUp: handlerOnKeyUp,
-      children: !isSkeleton ? /* @__PURE__ */ jsx(
+      role: isSkeleton ? "presentation" : void 0,
+      ...getPropDataTestId(RHFCOLORPICKER_PREFIX, RHFColorPickerSlots.root, instaceDataTestId),
+      ownerState: { ownerState },
+      children: /* @__PURE__ */ jsx(
         Controller,
         {
           name,
@@ -62,74 +67,91 @@ const RHFColorPicker = (props) => {
             label && /* @__PURE__ */ jsx(
               Label,
               {
+                size,
                 label,
                 mandatory,
                 mandatoryMessage,
                 helperMessage
               }
             ),
-            /* @__PURE__ */ jsxs(
-              "div",
+            /* @__PURE__ */ jsx(
+              Color,
               {
+                "aria-errormessage": error?.message || void 0,
+                size,
+                onClick: (event) => setAnchorEl(event.currentTarget),
+                value,
                 role: "button",
                 tabIndex: 0,
-                className: classes.containerFieldColor,
-                onClick: (event) => setAnchorEl(event.currentTarget),
                 onKeyDown: (event) => {
                   if (event.key === "Enter" || event.key === " ") {
                     setAnchorEl(event.currentTarget);
                   }
                 },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: classes.fieldColor,
-                      style: {
-                        backgroundColor: value
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Icon,
-                    {
-                      src: `${host_static_assets}/${environment_assets}/frontend/components/rhfcolorpicker/assets/icons/chevron_right.svg`
-                    }
-                  )
-                ]
+                color: error?.message ? "error" : "default",
+                disabled: isSkeleton ? true : disabled
               }
             ),
-            error?.message && /* @__PURE__ */ jsx(HelperError, { message: error?.message + "" }),
-            /* @__PURE__ */ jsx(
-              Popover,
+            error?.message && /* @__PURE__ */ jsx(
+              HelperError,
+              {
+                size,
+                message: error?.message + ""
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              PopoverStyled,
               {
+                className: clsx(classes.popover, className),
+                size,
+                ownerState: { error: !!error, size: currentSize },
                 open: Boolean(anchorEl),
-                arrowType: "top-center",
-                className: classes.popoverRoot,
+                arrowType: "no-arrow",
                 anchorEl,
                 onClose: () => setAnchorEl(null),
                 anchorOrigin: {
                   vertical: "bottom",
-                  horizontal: "center"
+                  horizontal: "left"
                 },
                 transformOrigin: {
                   vertical: "top",
-                  horizontal: "center"
+                  horizontal: "left"
                 },
                 sx: {
-                  mt: "12px",
-                  ml: -1.25,
-                  ...theme.components?.M4LRHFColorPickerPopoverRoot?.styleOverrides || {}
+                  mt: error?.message ? theme.vars.size.baseSpacings.sp7 : 0
                 },
-                children: /* @__PURE__ */ jsxs("div", { className: classes.containerPicker, children: [
-                  /* @__PURE__ */ jsx(SketchPicker, { color: tempColor, onChange: handleColorChange, disableAlpha: true }),
-                  /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleApprove, label: getLabel("rhfcolorpicker.accept") })
-                ] })
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SketchPickerStyled,
+                    {
+                      ownerState: { ownerState },
+                      color: tempColor,
+                      onChange: handleColorChange,
+                      disableAlpha: true
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(ActionsContainer, { children: [
+                    /* @__PURE__ */ jsx(
+                      ActionCancel,
+                      {
+                        onClick: () => setAnchorEl(null),
+                        size
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ActionIntro,
+                      {
+                        onClick: handleApprove,
+                        size
+                      }
+                    )
+                  ] })
+                ]
               }
             )
           ] })
         }
-      ) : /* @__PURE__ */ jsx(RHFColorPickerSkeleton, { label })
+      )
     }
   );
 };

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

@@ -0,0 +1,5 @@
+import { RHFColorPickerStyles } from './types';
+/**
+ * Estilos para el componente `RHFColorPicker`. Define los estilos de cada parte del componente, como el root, label, color, popover, sketch picker, y las acciones.
+ */
+export declare const rhfcolorPickerStyles: RHFColorPickerStyles;

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

@@ -0,0 +1,105 @@
+const rhfcolorPickerStyles = {
+  /**
+   * Estilos para el elemento raíz del `RHFColorPicker`.
+   * Aplica un layout de columna con un espacio entre los elementos basado en el tamaño de espaciado definido en el tema.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * Estilos para el `Popover` dentro del `RHFColorPicker`.
+   * Define la apariencia del `Popover`, como el borde, el padding y el estilo de los botones dentro del `Popover`.
+   */
+  popover: ({ theme, ownerState }) => {
+    return {
+      "& .MuiPaper-root": {
+        padding: 0,
+        border: theme.vars.size.borderStroke.container,
+        borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default,
+        borderRadius: theme.vars.size.borderRadius.r1,
+        "& .MuiButtonBase-root": {
+          // Ajuste específico de estilo para el contenido de los botones
+          justifyContent: "center"
+        }
+      }
+    };
+  },
+  /**
+   * Estilos para el `SketchPicker`, que es el selector de colores dentro del `RHFColorPicker`.
+   * Define el layout y la apariencia de las cajas de color, ajustando el diseño y el estilo de los elementos dentro del selector.
+   */
+  sketchPicker: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp3,
+    boxShadow: "none !important",
+    "& > div": {
+      // Caja de selección de color
+      "&:nth-of-type(1)": {
+        borderRadius: theme.vars.size.borderRadius.r1
+      },
+      // Caja de selección horizontal de color
+      "&:nth-of-type(2)": {
+        display: "flex !important",
+        justifyContent: "center !important",
+        alignItems: "center !important",
+        gap: theme.vars.size.baseSpacings.sp3,
+        "& > div:nth-of-type(1)": {
+          padding: "0px !important",
+          "& > div:nth-of-type(1)": {
+            height: `${theme.vars.size.baseSpacings.sp3}!important`,
+            borderRadius: `${theme.vars.size.borderRadius["r0-5"]} !important`,
+            "& > div > div > div > div": {
+              height: "10px !important"
+            }
+          }
+        },
+        "& > div:nth-of-type(2)": {
+          margin: "0px !important",
+          borderRadius: `${theme.vars.size.borderRadius.r1} !important`,
+          height: `${theme.vars.size.desktop.medium.base} !important`,
+          width: `${theme.vars.size.desktop.medium.base} !important`,
+          "& div": {
+            borderRadius: `${theme.vars.size.borderRadius.r1} !important`,
+            boxShadow: "none !important"
+          }
+        }
+      },
+      // Inputs para el cambio de color mediante a texto( hexadecimal o rgb )
+      "&:nth-of-type(3)": {
+        padding: "0px !important",
+        "& > div": {
+          // Estilos compartidos para las cajas de color
+          "&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4), &:nth-of-type(5)": {
+            padding: "0px !important",
+            "& div": {
+              display: "flex !important",
+              flexDirection: "column-reverse !important",
+              "& label": {
+                textAlign: "left !important",
+                color: `${theme.vars.palette.text.secondary} !important`,
+                textTransform: "uppercase !important",
+                padding: "0px !important"
+              },
+              "& input": {
+                borderRadius: theme.vars.size.borderRadius.r1
+              }
+            }
+          }
+        }
+      },
+      //Colores en grid varios del componente de react-color
+      "&:nth-of-type(4)": {
+        paddingTop: "0px !important"
+      }
+    },
+    "& .flexbox-fix": {
+      border: "0px !important"
+    }
+  })
+};
+export {
+  rhfcolorPickerStyles as r
+};

package/components/hook-form/RHFColorPicker/RHFColorPicker.test.d.ts

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

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

@@ -0,0 +1,5 @@
+/**
+ * Nombre de clase que se usa para dar identidad a los slots del componente.
+ */
+export declare const RHFCOLOR_PICKER_KEY_COMPONENT = "M4LRHFColorPicker";
+export declare const RHFCOLORPICKER_PREFIX = "RHFColorPicker";

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

@@ -0,0 +1,6 @@
+const RHFCOLOR_PICKER_KEY_COMPONENT = "M4LRHFColorPicker";
+const RHFCOLORPICKER_PREFIX = "RHFColorPicker";
+export {
+  RHFCOLORPICKER_PREFIX as R,
+  RHFCOLOR_PICKER_KEY_COMPONENT as a
+};

package/components/hook-form/RHFColorPicker/index.d.ts

@@ -1,2 +1 @@
 export { RHFColorPicker } from './RFHColorPicker';
-export { getRHFColorPickerComponentsDictionary } from './dictionary';

package/components/hook-form/RHFColorPicker/slots/RHFColorPickerEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum RHFColorPickerSlots {
+    root = "root",
+    popover = "popover",
+    sketchPicker = "sketchPicker"
+}

package/components/hook-form/RHFColorPicker/slots/RHFColorPickerEnum.js

@@ -0,0 +1,9 @@
+var RHFColorPickerSlots = /* @__PURE__ */ ((RHFColorPickerSlots2) => {
+  RHFColorPickerSlots2["root"] = "root";
+  RHFColorPickerSlots2["popover"] = "popover";
+  RHFColorPickerSlots2["sketchPicker"] = "sketchPicker";
+  return RHFColorPickerSlots2;
+})(RHFColorPickerSlots || {});
+export {
+  RHFColorPickerSlots as R
+};

package/components/hook-form/RHFColorPicker/slots/RHFColorPickerSlots.d.ts

@@ -0,0 +1,24 @@
+import { SketchPicker } from 'react-color';
+/**
+ * Styled component que representa el contenedor raíz del `RHFColorPicker`.
+ * Aplica los estilos definidos en `rhfcolorPickerStyles.root` al envoltorio `div`.
+ */
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+/**
+ * Styled component para el `Popover` dentro del `RHFColorPicker`.
+ * Aplica los estilos definidos en `rhfcolorPickerStyles.popover` al componente `Popover`.
+ */
+export declare const PopoverStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../mui_extended/Popover/types').PopoverProps, keyof import('../../../mui_extended/Popover/types').PopoverProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+/**
+ * Styled component para el componente `SketchPicker` de `react-color` dentro del `RHFColorPicker`.
+ * Aplica los estilos definidos en `rhfcolorPickerStyles.sketchPicker` al componente `SketchPicker`.
+ */
+export declare const SketchPickerStyled: import('@emotion/styled').StyledComponent<Pick<import('react-color').SketchPickerProps, keyof import('react-color').SketchPickerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').RHFColorPickerOwnerState> & Record<string, unknown>;
+}, {}, {
+    ref?: import('react').Ref<SketchPicker> | undefined;
+}>;

package/components/hook-form/RHFColorPicker/slots/RHFColorPickerSlots.js

@@ -0,0 +1,23 @@
+import { SketchPicker } from "react-color";
+import { styled } from "@mui/material";
+import { R as RHFColorPickerSlots } from "./RHFColorPickerEnum.js";
+import { a as RHFCOLOR_PICKER_KEY_COMPONENT } from "../constants.js";
+import { r as rhfcolorPickerStyles } from "../RHFColorPicker.styles.js";
+import { P as Popover } from "../../../mui_extended/Popover/Popover.js";
+const RootStyled = styled("div", {
+  name: RHFCOLOR_PICKER_KEY_COMPONENT,
+  slot: RHFColorPickerSlots.root
+})(rhfcolorPickerStyles?.root);
+const PopoverStyled = styled(Popover, {
+  name: RHFCOLOR_PICKER_KEY_COMPONENT,
+  slot: RHFColorPickerSlots.popover
+})(rhfcolorPickerStyles?.popover);
+const SketchPickerStyled = styled(SketchPicker, {
+  name: RHFCOLOR_PICKER_KEY_COMPONENT,
+  slot: RHFColorPickerSlots.sketchPicker
+})(rhfcolorPickerStyles?.sketchPicker);
+export {
+  PopoverStyled as P,
+  RootStyled as R,
+  SketchPickerStyled as S
+};

package/components/hook-form/RHFColorPicker/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RHFColorPickerEnum';
+export * from './RHFColorPickerSlots';

package/components/hook-form/RHFColorPicker/types.d.ts

@@ -1,19 +1,63 @@
+import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { LabelProps } from '../../Label/types';
-export interface RHFColorPickerProps extends Omit<LabelProps, 'label'> {
+import { RHFColorPickerSlots } from './slots/RHFColorPickerEnum';
+import { RHFCOLOR_PICKER_KEY_COMPONENT } from './constants';
+/**
+ * Interfaz de las propiedades que acepta el componente `RHFColorPicker`.
+ * Esta interfaz extiende `LabelProps`, excluyendo la propiedad `label`.
+ */
+export interface RHFColorPickerProps extends Omit<LabelProps, 'label' | 'error'> {
     /**
-     * Nombre de etiqueta del campo
+     * Nombre de etiqueta del campo.
+     * Esta propiedad se utiliza para etiquetar el campo del color picker.
+     * Puede ser útil para accesibilidad o como descripción del campo.
      */
     label?: string;
     /**
-     * Identificador del campo dentro del formulario de react hook form
+     * Identificador único del campo dentro del formulario de React Hook Form.
+     * Este identificador es necesario para vincular el campo con el formulario y manejar su estado.
      */
     name: string;
     /**
-     * Variaciones de tamaño para el componente
+     * Variación de tamaño para el componente. Permite seleccionar entre dos tamaños:
+     * - `small`: Tamaño pequeño.
+     * - `medium`: Tamaño mediano.
      */
     size?: 'small' | 'medium';
+    /**
+     * Propiedad complementaria para el nombre del `data-testid`.
+     * Se utiliza para proporcionar un identificador único para el elemento HTML,
+     * lo cual es útil en pruebas unitarias o integradas para localizar el componente.
+     */
+    instaceDataTestId?: string;
+    /**
+     * Propiedad que indica si el componente está deshabilitado.
+     * Si se establece en `true`, el componente se mostrará en un estado deshabilitado y no será interactivo.
+     */
+    disabled?: boolean;
 }
-export interface OwnerState extends Pick<RHFColorPickerProps, 'size'> {
-    isFocus: boolean;
-    isTabSelected: boolean;
+/**
+ * Tipo que define los posibles valores de los slots disponibles en el componente `RHFColorPicker`.
+ * Este tipo se utiliza para determinar qué partes del componente pueden ser estilizadas o modificadas.
+ */
+export type RHFColorPickerSlotsType = keyof typeof RHFColorPickerSlots;
+/**
+ * Estado propietario del componente `RHFColorPicker`.
+ * Define propiedades específicas del estado que son necesarias para la gestión del componente.
+ */
+export interface RHFColorPickerOwnerState {
+    /**
+     * Valor para definir el tamaño del icono dentro del componente.
+     * Este tamaño puede variar en función de las configuraciones del componente.
+     */
+    size?: Sizes;
+    error?: boolean;
 }
+/**
+ * Tipo de estilos para el componente `RHFColorPicker`.
+ * Permite personalizar los estilos de los slots del componente.
+ * `OverridesStyleRules` se usa para sobrescribir los estilos predeterminados de Material-UI.
+ */
+export type RHFColorPickerStyles = Partial<OverridesStyleRules<RHFColorPickerSlots, typeof RHFCOLOR_PICKER_KEY_COMPONENT, Theme>> | undefined;