@m4l/components 8.2.4 → 9.0.0-beta-1

package/components/AppBar/tests/utils.js

@@ -1,6 +1,5 @@
-import { A as APPBAR_PREFIX } from "./constants.js";
-const getNameDataTestId = (KEY) => {
-  return `${APPBAR_PREFIX}-${KEY}`;
+const getNameDataTestId = (testId) => {
+  return `${testId}-root`;
 };
 export {
   getNameDataTestId as g

package/components/AppBar/types.d.ts

@@ -1,30 +1,59 @@
 import { ReactNode } from 'react';
+import { AppBarSlots } from './slots/AppBarEnum';
+import { OverridesStyleRules } from '@mui/material/styles/overrides';
+import { APP_BAR_KEY } from './constants';
+import { Theme } from '@mui/material/styles';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
 /**
  * Propiedades de estilo para el componente raíz de la barra de aplicaciones.
  */
 export type RootStyleProps = {
-    /** Indica si la barra de aplicaciones está colapsada. */
     isCollapse: boolean;
-    /** Indica si hay un desplazamiento (offset) aplicado a la barra de aplicaciones. */
     isOffset: boolean;
-    /** Indica si la barra lateral está visible.*/
     isSideBarVisible: boolean;
 };
 export interface AppBarProps {
+    /**
+     * Color de la barra de aplicaciones.
+     */
+    color?: Extract<ComponentPalletColor, 'default'>;
+    /**
+     * Opción de tamaño de la barra de aplicaciones.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Opción de aparición de la barra de aplicaciones.
+     */
+    variant?: 'standard';
     /**
      * Función que activa la visualización del menú de la aplicación en la vista móvil.
      */
-    onToggleVisible: VoidFunction;
+    onToggleVisible: () => void;
     /**
-     * Puede ser cualquier cosa, desde un solo elemento hasta un array de elementos. Los elementos secundarios pueden ser componentes de React, elementos HTML, o incluso otros tipos de datos, como cadenas o números.
+     * Elementos secundarios de la barra de aplicaciones.
      */
     children: ReactNode;
     /**
-     * companyLogo: Enlace de acceso para el recurso gráfico de logo.
+     * URL de la imagen del logotipo de la compañía.
      */
     companyLogo?: string;
     /**
-     * companyName: Nombre de la compañía
+     * Nombre de la compañía.
      */
     companyName?: string;
+    /**
+     * Identificador de prueba.
+     */
+    dataTestid?: string;
 }
+export type AppBarOwnerState = Pick<AppBarProps, 'size'> & {
+    isMobile: boolean;
+};
+/**
+ * Define los tipos de Slots disponibles para el `AppBar`.
+ */
+export type AppBarSlotsType = keyof typeof AppBarSlots;
+/**
+ * Estilos aplicables al `AppBar`
+ */
+export type AppBarStyles = OverridesStyleRules<AppBarSlotsType, typeof APP_BAR_KEY, Theme>;

package/components/BaseModule/BaseModule.js

@@ -10,7 +10,8 @@ function BaseModule(props) {
     moduleNameField,
     skeletonFlags,
     privileges,
-    componentsDictionary
+    componentsDictionary,
+    moduleDictionaryLoaded
   } = props;
   const localeString = useLocales().currentLocale?.localeString;
   return /* @__PURE__ */ jsx(FlagsProvider, { children: /* @__PURE__ */ jsx(
@@ -21,6 +22,7 @@ function BaseModule(props) {
       moduleNameField,
       componentsDictionary,
       currentLang: localeString,
+      moduleDictionaryLoaded,
       children: /* @__PURE__ */ jsx(ModuleSkeletonProvider, { flags: skeletonFlags, children: isAuth ? /* @__PURE__ */ jsx(ModulePrivilegesProvider, { queryPrivileges: privileges, children: /* @__PURE__ */ jsx(ModalProvider, { children }) }) : /* @__PURE__ */ jsx(ModalProvider, { children }) })
     }
   ) });

package/components/BaseModule/types.d.ts

@@ -1,3 +1,4 @@
+import { ModuleDictionary } from '@m4l/core';
 import { ReactNode } from 'react';
 export type BaseModuleProps = {
     moduleId: string;
@@ -7,4 +8,5 @@ export type BaseModuleProps = {
     componentsDictionary: string[];
     isAuth?: boolean;
     children: ReactNode;
+    moduleDictionaryLoaded?: ModuleDictionary;
 };

package/components/Chip/Chip.d.ts

@@ -0,0 +1,5 @@
+import { ChipProps } from './types';
+/**
+ * A chip is a component that displays information in a compact way.
+ */
+export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/Chip/Chip.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useModuleSkeleton, useEnvironment } from "@m4l/core";
+import clsx from "clsx";
+import { forwardRef, useMemo } from "react";
+import { C as CHIP_CLASSES } from "./constants.js";
+import { u as useComponentSize } from "../../hooks/useComponentSize/useComponentSize.js";
+import { I as IconStyled, S as SkeletonChipStyled, C as ChipRootStyled, T as TextChipStyled, a as IconButtonStyled } from "./slots/ChipSlots.js";
+const Chip = forwardRef((props, ref) => {
+  const {
+    endIcon,
+    label,
+    startIcon,
+    color = "default",
+    externalColor,
+    size = "small",
+    variant = "contained",
+    skeletonWidth = "100%",
+    opacity = false,
+    onClick,
+    onDeleted,
+    iconButtonProps,
+    className,
+    ...others
+  } = props;
+  const { currentSize } = useComponentSize(size);
+  const isSkeleton = useModuleSkeleton();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
+  const ownerState = useMemo(() => ({
+    interactive: !!onClick,
+    size: adjustedSize,
+    chipSize: adjustedSize,
+    variant,
+    color,
+    opacity,
+    externalColor
+  }), [adjustedSize, variant, color, opacity, externalColor, onClick]);
+  const renderIcon = useMemo(() => (icon, instaceDataTestId) => {
+    if (!icon) {
+      return null;
+    }
+    if (typeof icon !== "string") {
+      return icon;
+    } else {
+      return /* @__PURE__ */ jsx(
+        IconStyled,
+        {
+          ownerState: { ...ownerState },
+          src: icon,
+          size: adjustedSize,
+          instaceDataTestId
+        }
+      );
+    }
+  }, [ownerState, adjustedSize]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      SkeletonChipStyled,
+      {
+        "data-testid": "SkeletonButton",
+        width: skeletonWidth,
+        ownerState: { ...ownerState }
+      }
+    );
+  }
+  const iconClose = `${host_static_assets}/${environment_assets}/frontend/components/chip/assets/icons/closeSmall.svg`;
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    onDeleted?.(e);
+  };
+  return /* @__PURE__ */ jsxs(
+    ChipRootStyled,
+    {
+      role: "button-chip",
+      size: adjustedSize,
+      onClick,
+      ownerState: { ...ownerState },
+      className: clsx(className, CHIP_CLASSES.root),
+      ref,
+      ...onClick ? { tabIndex: 0 } : {},
+      ...others,
+      children: [
+        renderIcon(startIcon, "ChipStartIcon"),
+        /* @__PURE__ */ jsx(TextChipStyled, { size: adjustedSize, ownerState: { ...ownerState }, color, children: label }),
+        renderIcon(endIcon, "ChipEndIcon"),
+        onDeleted && /* @__PURE__ */ jsx(
+          IconButtonStyled,
+          {
+            ...iconButtonProps,
+            src: iconClose,
+            size: adjustedSize,
+            ownerState: { ...ownerState },
+            onClick: handleDelete
+          }
+        )
+      ]
+    }
+  );
+});
+Chip.displayName = "Chip";
+export {
+  Chip as C
+};

package/components/Chip/ChipStyles.d.ts

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

package/components/Chip/ChipStyles.js

@@ -0,0 +1,137 @@
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { lighten, darken } from "@mui/material/styles";
+const getExternalColor = (externalColor) => {
+  try {
+    return {
+      color: externalColor.color,
+      backgroundColor: lighten(externalColor.backgroundColor, 0.5),
+      backgroundHover: lighten(externalColor.backgroundColor, 0.3),
+      backgroundActive: lighten(externalColor.backgroundColor, 0.7),
+      colorTone: lighten(externalColor.color, 1),
+      backgroundColorTone: externalColor.backgroundColor,
+      backgroundHoverTone: lighten(externalColor.backgroundColor, 0.2),
+      backgroundActiveTone: darken(externalColor.backgroundColor, 0.2)
+    };
+  } catch (_error) {
+    return {
+      color: "",
+      backgroundColor: "",
+      backgroundHover: "",
+      backgroundActive: "",
+      colorTone: "",
+      backgroundColorTone: "",
+      backgroundHoverTone: "",
+      backgroundActiveTone: ""
+    };
+  }
+};
+const getColors = (theme, ownerState) => {
+  const finalPalette = ownerState.externalColor ? getExternalColor(ownerState.externalColor) : theme.vars.palette.chips[ownerState.color ?? "default"][ownerState.variant || "contained"];
+  const color = ownerState.opacity ? finalPalette.color : finalPalette.colorTone;
+  return { color, finalPalette };
+};
+const chipStyles = {
+  /**
+   * Styles for the root element of the chip.
+   */
+  root: ({ theme, ownerState }) => {
+    const { color, finalPalette } = getColors(theme, ownerState);
+    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: !(ownerState.variant === "outlined") ? bgColor : "transparent",
+      ...getSizeStyles(
+        theme,
+        ownerState.size || "medium",
+        "base"
+      ),
+      //TODO: OJO no OLVIDAR interactive ************ JUAN
+      ...ownerState.interactive && {
+        "&:hover": {
+          backgroundColor: bgHover
+        },
+        "&:active": {
+          backgroundColor: bgActive
+        },
+        "&:focus-visible": {
+          boxShadow: "none",
+          outline: `${theme.vars.size.borderStroke.container} ${theme.vars.palette.border.main}`,
+          backgroundColor: bgActive
+        }
+      },
+      ...ownerState.variant === "outlined" && {
+        border: `${theme.vars.size.borderStroke.container}`,
+        borderColor: bgColor
+      },
+      variants: []
+    };
+  },
+  /**
+   * Styles for the text chip element.
+   */
+  textChip: ({ theme }) => ({
+    whiteSpace: "nowrap",
+    paddingLeft: theme.vars.size.baseSpacings.sp1,
+    paddingRight: theme.vars.size.baseSpacings.sp2
+  }),
+  /**
+   * Styles for the chip icon element.
+   */
+  chipIcon: ({ theme, ownerState }) => {
+    const { color } = getColors(theme, ownerState);
+    return {
+      "& .M4LIcon-icon": {
+        backgroundColor: `${color} !important`
+      }
+    };
+  },
+  /**
+   * Styles for the icon button inside the chip element.
+   */
+  iconButton: ({ theme, ownerState }) => {
+    const { color } = getColors(theme, ownerState);
+    return {
+      "& .M4LIcon-icon": {
+        backgroundColor: `${color} !important`
+      },
+      ...getSizeStyles(
+        theme,
+        ownerState.size || "medium",
+        "base",
+        (size) => ({
+          height: size,
+          width: size,
+          minHeight: size
+        })
+      )
+    };
+  },
+  /**
+   * Styles for the skeleton chip element.
+   */
+  skeletonChip: ({ theme, ownerState }) => ({
+    width: "100%",
+    background: theme.vars.palette.skeleton.transition,
+    ...getSizeStyles(
+      theme,
+      ownerState.size || "medium",
+      "base",
+      (size) => ({
+        height: size,
+        minHeight: size
+      })
+    )
+  })
+};
+export {
+  chipStyles as c
+};

package/components/Chip/constants.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Clave de identificación del componente Chip dentro del sistema.
+ *
+ * Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
+ * relacionadas con el componente `Chip` dentro del sistema de temas y estilos.
+ * @default 'M4LChip'
+ */
+export declare const CHIP_KEY_COMPONENT = "M4LChip";
+/**
+ * Inventario de clases CSS para el componente Chip
+ */
+export declare const CHIP_CLASSES: Record<string, string>;

package/components/Chip/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { C as ChipSlots } from "./slots/ChipEnum.js";
+const CHIP_KEY_COMPONENT = "M4LChip";
+const CHIP_CLASSES = getComponentClasses(CHIP_KEY_COMPONENT, ChipSlots);
+export {
+  CHIP_CLASSES as C,
+  CHIP_KEY_COMPONENT as a
+};

package/components/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Chip';
+export * from './types';

package/components/Chip/slots/ChipEnum.d.ts

@@ -0,0 +1,7 @@
+export declare enum ChipSlots {
+    root = "root",
+    skeletonChip = "skeleton",
+    chipIcon = "icon",
+    textChip = "text",
+    iconButton = "iconButton"
+}

package/components/Chip/slots/ChipEnum.js

@@ -0,0 +1,11 @@
+var ChipSlots = /* @__PURE__ */ ((ChipSlots2) => {
+  ChipSlots2["root"] = "root";
+  ChipSlots2["skeletonChip"] = "skeleton";
+  ChipSlots2["chipIcon"] = "icon";
+  ChipSlots2["textChip"] = "text";
+  ChipSlots2["iconButton"] = "iconButton";
+  return ChipSlots2;
+})(ChipSlots || {});
+export {
+  ChipSlots as C
+};

package/components/Chip/slots/ChipSlots.d.ts

@@ -0,0 +1,16 @@
+declare const ChipRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('..').ChipOwnerState> & Record<string, unknown>;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+declare const SkeletonChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('..').ChipOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+declare const IconStyled: import('@emotion/styled').StyledComponent<Pick<import('../../Icon').IconProps, keyof import('../../Icon').IconProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('..').ChipOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+declare const TextChipStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Typography/types').TypographyProps, keyof import('../../mui_extended/Typography/types').TypographyProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('..').ChipOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "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" | "instaceDataTestId" | "rotationAngle" | "placement" | "tooltipContent" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeContent" | "dictionaryTooltipId" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState: Partial<import('..').ChipOwnerState> & Record<string, unknown>;
+}, {}, {}>;
+export { ChipRootStyled, SkeletonChipStyled, IconStyled, TextChipStyled, IconButtonStyled };

package/components/Chip/slots/ChipSlots.js

@@ -0,0 +1,35 @@
+import { styled } from "@mui/material/styles";
+import { c as chipStyles } from "../ChipStyles.js";
+import { a as CHIP_KEY_COMPONENT } from "../constants.js";
+import { C as ChipSlots } from "./ChipEnum.js";
+import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
+import { T as Typography } from "../../mui_extended/Typography/Typography.js";
+import { I as IconButton } from "../../mui_extended/IconButton/IconButton.js";
+import { I as Icon } from "../../Icon/Icon.js";
+const ChipRootStyled = styled("div", {
+  name: CHIP_KEY_COMPONENT,
+  slot: ChipSlots.root
+})(chipStyles?.root);
+const SkeletonChipStyled = styled(Skeleton, {
+  name: CHIP_KEY_COMPONENT,
+  slot: ChipSlots.skeletonChip
+})(chipStyles?.skeletonChip);
+const IconStyled = styled(Icon, {
+  name: CHIP_KEY_COMPONENT,
+  slot: ChipSlots.chipIcon
+})(chipStyles?.chipIcon);
+const TextChipStyled = styled(Typography, {
+  name: CHIP_KEY_COMPONENT,
+  slot: ChipSlots.textChip
+})(chipStyles?.textChip);
+const IconButtonStyled = styled(IconButton, {
+  name: CHIP_KEY_COMPONENT,
+  slot: ChipSlots.iconButton
+})(chipStyles?.iconButton);
+export {
+  ChipRootStyled as C,
+  IconStyled as I,
+  SkeletonChipStyled as S,
+  TextChipStyled as T,
+  IconButtonStyled as a
+};

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

@@ -0,0 +1,3 @@
+export * from './ChipSlots';
+export * from './ChipEnum';
+export { ChipSlots } from './ChipEnum';

package/components/Chip/types.d.ts

@@ -0,0 +1,86 @@
+import { ChipColorOptions, Sizes } from '@m4l/styles';
+import { Theme } from '@mui/material/styles';
+import { EventHandler, ReactNode } from 'react';
+import { CHIP_KEY_COMPONENT } from './constants';
+import { ChipSlots } from './slots';
+import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+export type ChipVariants = 'contained' | 'outlined';
+/**
+ * Propiedades del componente `Chip`.
+ */
+export interface ChipProps {
+    /**
+     * Optional prop for the icon on the left in the `Chip`. Can accept a URL as a string to render an image icon, or a React component to render it directly.
+     */
+    startIcon?: ReactNode;
+    /**
+     * Optional prop for the icon on the right in the `Chip`. Can accept a URL as a string to render an image icon, or a React component to render it directly.
+     */
+    endIcon?: ReactNode;
+    /**
+     * Size of the `Chip` (default 'medium').
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Text describing the `Chip`.
+     */
+    label?: string;
+    /**
+     * Defines the variant of the `Chip` (default 'contained').
+     */
+    variant?: ChipVariants;
+    /**
+     * Defines the color of the `Chip`.
+     */
+    color?: ChipColorOptions;
+    /**
+     * Alternative color for the `Chip`.
+     */
+    externalColor?: {
+        color: string;
+        backgroundColor: string;
+    };
+    /**
+     * Define el with of skeleton mode
+     */
+    skeletonWidth?: string | number;
+    /**
+     * Opacity of the `Chip`.
+     */
+    opacity?: boolean;
+    /**
+     * Function to be executed when the `Chip` is clicked.
+     */
+    onClick?: (() => void) | ((event: any) => void);
+    /**
+     * Props for the close icon button.
+     */
+    iconButtonProps?: Omit<MUIIconButtonProps, 'size' | 'color' | 'disabled' | 'src'>;
+    /**
+     * Function to be executed when the `Chip` is deleted.
+     */
+    onDeleted?: EventHandler<any>;
+    /**
+     * Class name for the `Chip`.
+     */
+    className?: string;
+    /**
+     * If the `Chip` is focusable.
+     */
+    focusable?: boolean;
+}
+/**
+ * Owner state of the `Chip` used to define internal style and behavior properties.
+ */
+export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'externalColor' | 'opacity' | 'size' | 'color'> {
+    interactive: boolean;
+}
+/**
+ * Defines the types of Slots available for the `Chip`.
+ */
+export type ChipSlotsType = keyof typeof ChipSlots;
+/**
+ * Styles applicable to the `Chip` using themes and custom slots.
+ */
+export type ChipStyles = M4LOverridesStyleRules<ChipSlotsType, typeof CHIP_KEY_COMPONENT, Theme>;

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;