@m4l/components 9.1.52 → 9.1.53

package/@types/export.d.ts

@@ -59,12 +59,6 @@ declare module '@mui/material/styles' {
     M4LRHFCheckbox?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LRHFCheckbox'];
     };
-    M4LRHFColorPicker?: {
-      styleOverrides?: ComponentsOverrides<Theme>['M4LRHFColorPicker'];
-    };
-    M4LRHFColorPickerPopoverRoot?: {
-      styleOverrides?: ComponentsOverrides<Theme>['M4LRHFColorPickerPopoverRoot'];
-    };
     M4LCheckBox?: {
       styleOverrides?: ComponentsOverrides<Theme>['M4LCheckBox'];
     };

package/@types/types.d.ts

@@ -52,27 +52,13 @@ import type {
   IconButtonSlotsType,
 } from '../components/mui_extended/IconButton/types';
 
-import type {
-  BadgeSlotsType,
-  BadgeOwnerState,
-} from '../components/mui_extended/Badge/types';
-import {
-  ControlIncrementOwnerState,
-  ControlIncrementSlotsType,
-} from '../components/ControlIncrement/types';
-import {
-  SkeletonOwnerState,
-  SkeletonSlotsType,
-} from '../components/mui_extended/Skeleton/types';
-import {
-  InputNumberSpinnerOwnerState,
-  InputNumberSpinnerSlotsType,
-} from '../components/InputNumberSpinner/types';
-import {
-  TypographyOwnerState,
-  TypographySlotsType,
-} from '../components/mui_extended/Typography/types';
-
+import type { BadgeSlotsType, BadgeOwnerState } from '../components/mui_extended/Badge/types';
+import { ControlIncrementOwnerState, ControlIncrementSlotsType } from '../components/ControlIncrement/types';
+import { SkeletonOwnerState, SkeletonSlotsType } from '../components/mui_extended/Skeleton/types';
+import { InputNumberSpinnerOwnerState, InputNumberSpinnerSlotsType } from '../components/InputNumberSpinner/types';
+import { TypographyOwnerState, TypographySlotsType } from '../components/mui_extended/Typography/types';
+import { ColorOwnerState, ColorSlotsType } from '../components/Color/types';
+import { RHFColorPickerOwnerState, RHFColorPickerSlotsType } from '../components/hook-form/RHFColorPicker/types';
 import type {
   MenuItemSlotsType,
   MenuItemOwnerState,
@@ -180,6 +166,8 @@ declare module '@mui/material/styles' {
     M4LButton: ButtonSlotsType;
     M4LActionIntro: ActionIntroSlotsType;
     M4LActionCancel: ActionCancelSlotsType;
+    M4LColor: ColorSlotsType;
+    M4LRHFColorPicker: RHFColorPickerSlotsType;
     M4LPopover: PopoverSlotsType;
     M4LImage: ImageSlotsType;
     M4LSideBar: SideBarSlotsType;
@@ -250,6 +238,8 @@ declare module '@mui/material/styles' {
     M4LToggleIconButton: Partial<ToggleIconButtonOwnerState>;
     M4LAccountPopover: Partial<AccountPopoverOwnerState>;
     M4LPropertyValue: Partial<PropertyVaLueOwnerState>;
+    M4LColor: Partial<ColorOwnerState>;
+    M4LRHFColorPicker: Partial<RHFColorPickerOwnerState>;
   }
 
   interface Components {
@@ -542,7 +532,7 @@ declare module '@mui/material/styles' {
       defaultProps?: ComponentsPropsList['M4LAvatar'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LAvatar'];
       variants?: ComponentsVariants['M4LAvatar'];
-    };
+    }
     M4LAccordion?: {
       defaultProps?: ComponentsPropsList['M4LAccordion'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LAccordion'];
@@ -567,11 +557,26 @@ declare module '@mui/material/styles' {
       defaultProps?: ComponentsPropsList['M4LToggleIconButton'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LToggleIconButton'];
       variants?: ComponentsVariants['M4LToggleIconButton'];
+    }
+    M4LPropertyValue?: {
+      defaultProps?: ComponentsPropsList['M4LPropertyValue'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LPropertyValue'];
+      variants?: ComponentsVariants['M4LPropertyValue'];
+    };
+    M4LColor?: {
+      defaultProps?: ComponentsPropsList['M4LColor'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LColor'];
+      variants?: ComponentsVariants['M4LColor'];
+    };
+    M4LRHFColorPicker?: {
+      defaultProps?: ComponentsPropsList['M4LRHFColorPicker'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LRHFColorPicker'];
+      variants?: ComponentsVariants['M4LRHFColorPicker'];
     };
     M4LAccountPopover?: {
-      defaultProps?: ComponentsPropsList['M4LAccountPopover'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LAccountPopover'];
-      variants?: ComponentsVariants['M4LAccountPopover'];
-    };
+        defaultProps?: ComponentsPropsList['M4LAccountPopover'];
+        styleOverrides?: ComponentsOverrides<Theme>['M4LAccountPopover'];
+        variants?: ComponentsVariants['M4LAccountPopover'];
+      };
  }
 }

package/components/Color/Color.d.ts

@@ -0,0 +1,7 @@
+import { ColorProps } from './types';
+/**
+ * Componente `Color`
+ *
+ * Este componente muestra un color específico (si se pasa un valor en la propiedad `value`) o un ícono predeterminado
+ */
+export declare const Color: (props: ColorProps) => import("react/jsx-runtime").JSX.Element;

package/components/Color/Color.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { useModuleSkeleton } from "@m4l/core";
+import { N as NOTCOLOR } from "./constants.js";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+import { R as RootStyled, C as ColorPickerStyled, I as IconStyled } from "./slots/ColorSlots.js";
+const Color = (props) => {
+  const {
+    onClick,
+    size,
+    disabled,
+    value,
+    role,
+    color = "default",
+    ["aria-errormessage"]: ariaErrorMessage
+  } = props;
+  const { currentSize } = useComponentSize(size);
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const isSkeleton = useModuleSkeleton();
+  const ownerState = {
+    size: adjustedSize,
+    disabled,
+    color,
+    value
+  };
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      role,
+      "aria-busy": isSkeleton,
+      "aria-errormessage": ariaErrorMessage,
+      disabled: isSkeleton || disabled,
+      onClick,
+      ownerState: { ...ownerState },
+      disableRipple: true,
+      children: value ? /* @__PURE__ */ jsx(
+        ColorPickerStyled,
+        {
+          role: "status",
+          "aria-live": "polite",
+          ownerState: { ...ownerState },
+          disabled,
+          size: adjustedSize
+        }
+      ) : /* @__PURE__ */ jsx(
+        IconStyled,
+        {
+          ownerState: { ownerState },
+          src: NOTCOLOR,
+          disabled,
+          size: adjustedSize
+        }
+      )
+    }
+  );
+};
+export {
+  Color as C
+};

package/components/Color/Color.styles.d.ts

@@ -0,0 +1,8 @@
+import { ColorStyles } from './types';
+/**
+ * Definición de los estilos para los diferentes componentes relacionados con el selector de color.
+ *
+ * El objeto `colorStyles` contiene tres funciones principales para estilizar diferentes partes del componente:
+ * `root`, `icon`, y `colorPicker`. Cada función utiliza un estilo dinámico basado en el estado y el tema del componente.
+ */
+export declare const colorStyles: ColorStyles;

package/components/Color/Color.styles.js

@@ -0,0 +1,130 @@
+const colorStyles = {
+  /**
+   * Estilos para el contenedor raíz del componente de color.
+   * Establece los estilos para el contenedor raíz del selector de color.
+   */
+  root: ({ theme, ownerState }) => ({
+    // Estructura y layout básico
+    display: "flex",
+    justifyContent: "center",
+    width: "fit-content",
+    height: "fit-content",
+    cursor: ownerState.disabled ? "not-allowed" : "pointer",
+    color: theme.vars.palette.text.primary,
+    pointerEvents: ownerState.disabled ? "none" : "auto",
+    //Espaciado
+    padding: 0,
+    // Radio de borde
+    borderRadius: theme.size.borderRadius.r1,
+    /**
+     * **Pseudoclases**:
+     * - Estilos para los estados hover, focus-visible y active.
+     */
+    "&:hover": {
+      display: "flex",
+      background: theme.vars.palette[ownerState.color || "default"].hoverOpacity
+    },
+    "&:active": {
+      background: theme.vars.palette[ownerState.color || "default"].active
+    },
+    "&:focus-visible": {
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        inset: "-2px",
+        boxSizing: "border-box",
+        border: theme.vars.size.borderStroke.container,
+        borderColor: theme.vars.palette.border.main,
+        borderRadius: theme.vars.size.borderRadius["r1-5"]
+      }
+    },
+    // //Estilos para Error
+    ...ownerState.color !== "default" && {
+      // Borde
+      border: `1px solid ${theme.vars.palette[ownerState.color || "primary"].main}`,
+      /**
+       * **Pseudoclases**:
+       * - Estilos para los estados hover, focus-visible y active.
+       */
+      "&:active": {
+        border: `1px solid ${theme.vars.palette[ownerState.color || "primary"].active}`,
+        background: theme.vars.palette[ownerState.color || "primary"].hoverOpacity
+      },
+      "&:focus-visible": {
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          inset: "-4px",
+          boxSizing: "border-box",
+          border: theme.vars.size.borderStroke.container,
+          borderColor: theme.vars.palette.border.main,
+          borderRadius: theme.vars.size.borderRadius["r1-5"]
+        }
+      }
+    },
+    // Sizes medium
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.medium.action,
+        height: theme.vars.size.mobile.medium.action
+      } : {
+        width: theme.vars.size.desktop.medium.action,
+        height: theme.vars.size.desktop.medium.action
+      }
+    },
+    // Sizes small
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.action,
+        height: theme.vars.size.mobile.small.action
+      } : {
+        width: theme.vars.size.desktop.small.action,
+        height: theme.vars.size.desktop.small.action
+      }
+    }
+  }),
+  /**
+   * Estilos para el icono dentro del componente de color.
+   * Actualmente no se aplican estilos al icono. Este espacio está reservado para futuros estilos si es necesario.
+   */
+  icon: {},
+  /**
+   * Estilos para el selector de color.
+   * Establece los estilos para el selector de color, incluyendo su tamaño, posición y color de fondo.
+   * El tamaño del selector puede cambiar dependiendo de la propiedad `size` en el estado del componente.
+   * Además, el color de fondo se ajusta con base en el valor seleccionado.
+   */
+  colorPicker: ({ theme, ownerState }) => ({
+    //Estilos generales
+    right: 0,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    backgroundColor: ownerState.value,
+    borderRadius: theme.size.borderRadius["r0-5"],
+    // Sizes medium
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.medium.base,
+        height: theme.vars.size.mobile.medium.base
+      } : {
+        width: theme.vars.size.desktop.medium.base,
+        height: theme.vars.size.desktop.medium.base
+      }
+    },
+    // Sizes small
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? {
+        width: theme.vars.size.mobile.small.base,
+        height: theme.vars.size.mobile.small.base
+      } : {
+        width: theme.vars.size.desktop.small.base,
+        height: theme.vars.size.desktop.small.base
+      }
+    },
+    variants: []
+  })
+};
+export {
+  colorStyles as c
+};

package/components/Color/Color.test.d.ts

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

package/components/Color/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const COLOR_KEY_COMPONENT = "M4LColor";
+export declare const NOTCOLOR = "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/commons/assets/icons/out_of.svg";
+export declare const COLOR_PREFIX = "Color";

package/components/Color/constants.js

@@ -0,0 +1,6 @@
+const COLOR_KEY_COMPONENT = "M4LColor";
+const NOTCOLOR = "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/commons/assets/icons/out_of.svg";
+export {
+  COLOR_KEY_COMPONENT as C,
+  NOTCOLOR as N
+};

package/components/Color/index.d.ts

@@ -0,0 +1 @@
+export * from './Color';

package/components/Color/index.js

@@ -0,0 +1 @@
+

package/components/Color/slots/ColorEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum ColorSlots {
+    root = "root",
+    icon = "icon",
+    colorPicker = "colorPicker"
+}

package/components/Color/slots/ColorEnum.js

@@ -0,0 +1,9 @@
+var ColorSlots = /* @__PURE__ */ ((ColorSlots2) => {
+  ColorSlots2["root"] = "root";
+  ColorSlots2["icon"] = "icon";
+  ColorSlots2["colorPicker"] = "colorPicker";
+  return ColorSlots2;
+})(ColorSlots || {});
+export {
+  ColorSlots as C
+};

package/components/Color/slots/ColorSlots.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Componente estilizado de IconButton como el contenedor raíz del componente de color.
+ * Este componente es utilizado como el contenedor principal del IconButton de materialUI.
+ */
+export declare const RootStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').IconButtonOwnProps & Omit<import('@mui/material').ButtonBaseOwnProps, "classes"> & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+}, "children" | "size" | "action" | "color" | "style" | "disabled" | "sx" | "classes" | "className" | "tabIndex" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge">, "children" | "value" | "ref" | "title" | "size" | "name" | "id" | "type" | "action" | "hidden" | "color" | "content" | "style" | "disabled" | "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" | "form" | "key" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').ColorOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ColorOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+/**
+ * Componente estilizado para representar el selector de color.
+ * Este componente se utiliza para mostrar el área del picker de color.
+ */
+export declare const ColorPickerStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').ColorOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ColorOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
+/**
+ * Componente estilizado para representar el icono dentro del componente de color.
+ * Este es el área del componente donde se coloca el icono de selección de color.
+ */
+export declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').ColorOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').ColorOwnerState> & Record<string, unknown>;
+}, {}, {}>;

package/components/Color/slots/ColorSlots.js

@@ -0,0 +1,23 @@
+import { styled } from "@mui/material/styles";
+import { C as ColorSlots } from "./ColorEnum.js";
+import { IconButton } from "@mui/material";
+import { c as colorStyles } from "../Color.styles.js";
+import { C as COLOR_KEY_COMPONENT } from "../constants.js";
+import { I as Icon } from "../../Icon/Icon.js";
+const RootStyled = styled(IconButton, {
+  name: COLOR_KEY_COMPONENT,
+  slot: ColorSlots.root
+})(colorStyles?.root);
+const ColorPickerStyled = styled("div", {
+  name: COLOR_KEY_COMPONENT,
+  slot: ColorSlots.colorPicker
+})(colorStyles?.colorPicker);
+const IconStyled = styled(Icon, {
+  name: COLOR_KEY_COMPONENT,
+  slot: ColorSlots.icon
+})(colorStyles?.icon);
+export {
+  ColorPickerStyled as C,
+  IconStyled as I,
+  RootStyled as R
+};

package/components/Color/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ColorEnum';
+export * from './ColorSlots';

package/components/Color/slots/index.js

@@ -0,0 +1 @@
+

package/components/Color/types.d.ts

@@ -0,0 +1,64 @@
+import { Theme } from '@mui/material/styles';
+import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
+import { IconProps } from '../Icon/types';
+import { COLOR_KEY_COMPONENT } from './constants';
+import { ColorSlots } from './slots';
+/**
+ * Propiedades del componente `Color`
+ *
+ * Esta interfaz define las propiedades que el componente `Color` acepta. Se basa en las propiedades de `IconProps`
+ * y `MUIIconButtonProps`, pero omite algunas propiedades para ajustarse a los requisitos específicos del componente `Color`.
+ */
+export interface ColorProps extends Omit<IconProps, 'size' | 'color' | 'src'>, // Se omiten las propiedades 'size', 'color' y 'src' de IconProps
+Omit<MUIIconButtonProps, 'size' | 'color' | 'disabled' | 'value'> {
+    /**
+     * Define el color que tendrá el componente.
+     * Puede ser un color en formato de string o `null`/`undefined` para mostrar un ícono predeterminado.
+     */
+    value?: string | null | undefined;
+    /**
+     * Define el tamaño del componente.
+     * Puede ser 'small', 'medium', o 'large'.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Representa si el componente está deshabilitado.
+     * Si es `true`, el componente no será interactivo.
+     */
+    disabled?: boolean;
+    /**
+     * Opciones de color personalizadas del componente.
+     * Define el color de la paleta a utilizar para el componente.
+     */
+    color?: ComponentPalletColor;
+}
+/**
+ * Tipo para las ranuras del componente `Color`.
+ * Este tipo se refiere a las claves dentro de `ColorSlots`, que determinan los diferentes elementos
+ * estilizados dentro del componente, como el `colorPicker`, `icon`, etc.
+ */
+export type ColorSlotsType = keyof typeof ColorSlots;
+/**
+ * Combinación de las propiedades del componente `Color` y su estado propietario.
+ * Este tipo se utiliza para describir el estado completo del componente `Color`, incluyendo
+ * las propiedades pasadas al componente y el estado calculado como el color de la paleta y el estado de esqueleto.
+ */
+export interface ColorOwnerState extends Pick<ColorProps, 'size' | 'color' | 'value'> {
+    /**
+     * Define si el componente está deshabilitado.
+     */
+    disabled?: boolean;
+    /**
+     * El color de la paleta basado en el tema de MUI.
+     * Se usa para aplicar el color al componente.
+     */
+    color?: ComponentPalletColor;
+}
+/**
+ * Tipos de estilos para el componente `Color`.
+ * Esta interfaz extiende las reglas de estilo personalizadas para las ranuras del componente (`ColorSlots`)
+ * y permite su sobrescritura.
+ */
+export type ColorStyles = Partial<OverridesStyleRules<ColorSlots, typeof COLOR_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/HelperError/HelperError.js

@@ -2,11 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { useTheme } from "@mui/material";
 import { getPropertyByString } from "@m4l/core";
 import { clsx } from "clsx";
-import { H as HELPER_ERROR_SPINNER_SPECIFY } from "./constant.js";
+import { H as HELPER_ERROR_KEY_COMPONENT, c as classHelperErrorRoot, a as HELPER_ERROR_CLASS_SPECIFY } 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 } = props;
+  const { message = "", skeletonWidth, size = "medium", className, ...other } = props;
   const { currentSize } = useComponentSize(size);
   const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
   const theme = useTheme();
@@ -22,11 +22,14 @@ const HelperError = (props) => {
   return /* @__PURE__ */ jsx(
     TypographyStyled,
     {
-      className: clsx(HELPER_ERROR_SPINNER_SPECIFY, className),
+      "aria-errormessage": HELPER_ERROR_KEY_COMPONENT,
+      className: clsx(classHelperErrorRoot, HELPER_ERROR_CLASS_SPECIFY, className),
       ownerState: { ...ownerState, size: currentSize },
       size: adjustedSize,
       variant: "body",
       skeletonWidth,
+      component: "label",
+      ...other,
       children: message
     }
   );

package/components/HelperError/HelperError.styles.js

@@ -1,4 +1,4 @@
-import { H as HELPER_ERROR_SPINNER_SPECIFY } from "./constant.js";
+import { a as HELPER_ERROR_CLASS_SPECIFY } from "./constant.js";
 const helperErrorStyles = {
   /**
    * Estilos para el slot del root HelperError
@@ -8,7 +8,7 @@ const helperErrorStyles = {
    * @updatedUser Bruce Escobar - automatic
    */
   root: ({ theme, ownerState }) => ({
-    [`&.${HELPER_ERROR_SPINNER_SPECIFY}`]: {
+    [`&.${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 }

package/components/HelperError/constant.d.ts

@@ -7,4 +7,5 @@ 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_SPINNER_SPECIFY = "M4lclassCssSpecificity";
+export declare const HELPER_ERROR_CLASS_SPECIFY = "M4lclassCssSpecificity";
+export declare const classHelperErrorRoot: string;

package/components/HelperError/constant.js

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

package/components/HelperError/slots/HelperErrorSlots.js

@@ -1,6 +1,6 @@
 import { styled } from "@mui/material/styles";
 import { H as HelperErrorSlots } from "./HelperErrorEnum.js";
-import { a as HELPER_ERROR_KEY_COMPONENT } from "../constant.js";
+import { H as HELPER_ERROR_KEY_COMPONENT } from "../constant.js";
 import { T as Typography } from "../../mui_extended/Typography/Typography.js";
 import { h as helperErrorStyles } from "../HelperError.styles.js";
 import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";

package/components/HelperError/types.d.ts

@@ -8,7 +8,7 @@ import { ComponentPalletColor, Sizes } from '@m4l/styles';
  * Extiende de TypographyProps para incluir propiedades de esqueleto y añade la propiedad `message`.
  * `message` es el mensaje de error a mostrar.
  */
-export interface HelperErrorProps extends Pick<TypographyProps, 'skeletonWidth'> {
+export interface HelperErrorProps extends Pick<TypographyProps, 'skeletonWidth' | 'htmlFor'> {
     /**
      * Mensaje que se visualiza en el componente HelperError.
      */