@m4l/components 9.3.25-beta.0 → 9.3.26

package/components/DataGrid/subcomponents/editors/TextEditor/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { O as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { P as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/DataGrid/tests/helpers/types.d.ts

@@ -2,6 +2,7 @@ import { RenderHeaderCellProps } from 'react-data-grid';
 import { ChipStatusFormatterProps } from '../../../formatters/ChipStatusFormatter/types';
 import { DeepKeyOf } from '../../../../utils/types';
 import { ColumnAlign } from '../../types';
+import { TagConfig } from '../../../formatters/TagsFormatter/types';
 export interface SeedProps {
     quantity: number;
     withBoolean?: boolean;
@@ -17,6 +18,7 @@ export interface SeedProps {
     withSetCheck?: boolean;
     withCesar?: boolean;
     withChipStatus?: boolean;
+    withTags?: boolean;
     withActions?: boolean;
     withActionsUser?: boolean;
     withBooleanStatus?: boolean;
@@ -52,6 +54,7 @@ export interface RowType {
         symbol: string;
         unit: string;
     };
+    tags?: TagConfig[];
     setCheck?: boolean;
     cesar?: string;
     status?: {

package/components/DataGrid/types.d.ts

@@ -161,6 +161,11 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
      * Incluye habilitación, configuración de columnas y renderizado personalizado
      */
     cardsViewConfig?: CardsViewConfig<TRow>;
+    /**
+     * Key de la fila a la que se debe hacer scroll y highlight automáticamente.
+     * Útil cuando se agrega un nuevo elemento y se quiere enfocar en él.
+     */
+    focusOnRowKey?: TKey;
 }
 export declare const DATAGRID_TEST_ID = "m4ldatagrid";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";
@@ -185,7 +190,6 @@ export interface ActionsProps {
  * Props para el hook useModalDetail
  */
 export interface UseModalDetailProps<TRow> {
-    row: TRow;
     columns: readonly Column<TRow, any>[];
     viewMode: ViewMode;
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
@@ -249,7 +253,18 @@ export interface CardContentProps<TRow> {
     originalColumns: readonly Column<TRow, any>[];
     onRowsChange?: Maybe<(rows: TRow[], data: RowsChangeData<TRow, any>) => void>;
 }
-export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader'> & {
+/**
+ * Configuración de densidad para el DataGrid.
+ * Define las alturas de filas, headers y la variante inicial.
+ */
+export interface DataGridDensityConfig {
+    rowHeights: RowHeights;
+    rowHeaderHeights: RowHeights;
+    initialRowHeightVariant: RowHeightVariants;
+}
+export type DataGridOwnerState<TRow, TSummaryRow, TKey extends RowKey = RowKey> = Pick<DataGridProps<TRow, TSummaryRow, TKey>, 'visibleCustomHeader' | 'size'> & {
+    currentRowHeightVariant?: RowHeightVariants;
+    currentRowHeight?: number;
     viewMode?: ViewMode;
     isActive?: boolean;
     hasActions?: boolean;

package/components/ObjectLogs/slots/ObjectLogsSlots.js

@@ -41,11 +41,11 @@ styled(IconButton, {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.iconButtonStyled
 })(objectLogsStyles?.iconButtonStyled);
-const IconStyled = styled(Icon, {
+styled(Icon, {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.iconStyled
 })(objectLogsStyles?.iconStyled);
-const IconClickeableStyled = styled(Icon, {
+styled(Icon, {
   name: OBJECT_LOGS_KEY_COMPONENT,
   slot: ObjectLogsSlots.iconClickeableStyled
 })(objectLogsStyles?.iconClickeableStyled);
@@ -57,8 +57,6 @@ export {
   ContainerWrapperStyled as C,
   DetailDialogComponent as D,
   GridWrapperStyled as G,
-  IconClickeableStyled as I,
   StackStyled as S,
-  WindowBaseStyled as W,
-  IconStyled as a
+  WindowBaseStyled as W
 };

package/components/Stepper/Stepper.styles.js

@@ -153,6 +153,7 @@ const stepperStyles = {
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0,
+      zIndex: 1,
       order: ownerState?.orientation === "vertical" || theme.generalSettings.isMobile ? 0 : 1,
       background: !isValidStep && ownerState?.hasBeenValidated ? theme.vars.palette.error.enabled : isCompleted && isValidStep ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.toneOpacity : isCurrent ? ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.primary.enabled : ownerState?.indicatorType === "dot" || theme.generalSettings.isMobile ? theme.vars.palette.background.default : theme.vars.palette.default.enabled,
       borderRadius: theme.vars.size.borderRadius.r2,

package/components/Stepper/subcomponents/StepperButtons/StepperCancelButton/index.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { A as ActionFormCancel } from "../../../../CommonActions/components/ActionFormCancel/ActionFormCancel.js";
 function StepperCancelButton(props) {
   const { ...rest } = props;
-  return /* @__PURE__ */ jsx(ActionFormCancel, { ...rest });
+  return /* @__PURE__ */ jsx(ActionFormCancel, { "data-testid": "stepper-cancel-button", ...rest });
 }
 export {
   StepperCancelButton as S

package/components/formatters/IconsFormatter/IconsFormatter.d.ts

@@ -0,0 +1,6 @@
+import { IconsFormatterProps } from './types';
+/**
+ * IconsFormatter
+ * Componente formatter que renderiza uno o varios iconos
+ */
+export declare const IconsFormatter: (props: IconsFormatterProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/formatters/IconsFormatter/IconsFormatter.js

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import { r as renderIcon } from "./helpers/renderIcon.js";
+import { r as renderMultipleIcons } from "./helpers/renderMultipleIcons.js";
+const IconsFormatter = (props) => {
+  const { icons } = props;
+  const iconsArray = useMemo(() => {
+    if (!icons) {
+      return null;
+    }
+    return Array.isArray(icons) ? icons : [icons];
+  }, [icons]);
+  if (!iconsArray || iconsArray.length === 0) {
+    return null;
+  }
+  if (iconsArray.length === 1) {
+    return renderIcon(iconsArray[0]);
+  }
+  return renderMultipleIcons(iconsArray);
+};
+export {
+  IconsFormatter as I
+};

package/components/formatters/IconsFormatter/IconsFormatter.styles.d.ts

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

package/components/formatters/IconsFormatter/IconsFormatter.styles.js

@@ -0,0 +1,29 @@
+const iconsFormatterStyles = {
+  /**
+   * Estilo del contenedor de array de iconos
+   */
+  iconsContainer: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: theme.vars.size.baseSpacings.sp1,
+    maxHeight: "100%",
+    overflow: "hidden"
+  }),
+  /**
+   * Estilo del icono
+   */
+  icon: () => ({
+    flexShrink: 0
+  }),
+  /**
+   * Estilo del icono clickeable
+   */
+  iconClickeable: () => ({
+    cursor: "pointer",
+    flexShrink: 0
+  })
+};
+export {
+  iconsFormatterStyles as i
+};

package/components/formatters/IconsFormatter/constants.d.ts

@@ -0,0 +1 @@
+export declare const ICONS_FORMATTER_KEY_COMPONENT = "M4LIconsFormatter";

package/components/formatters/IconsFormatter/constants.js

@@ -0,0 +1,4 @@
+const ICONS_FORMATTER_KEY_COMPONENT = "M4LIconsFormatter";
+export {
+  ICONS_FORMATTER_KEY_COMPONENT as I
+};

package/components/{DataGrid/formatters/ColumnIconFormatter → formatters/IconsFormatter}/helpers/renderIcon.d.ts

@@ -1,8 +1,8 @@
-import { ColumnIconResponse } from '../types';
+import { IconConfig } from '../types';
 /**
  * Helper que renderiza un único icono
  * @param iconConfig - Configuración del icono
  * @param key - Clave opcional para listas
  * @returns Componente de icono renderizado
  */
-export declare function renderIcon(iconConfig: ColumnIconResponse, key?: number): import("react/jsx-runtime").JSX.Element;
+export declare function renderIcon(iconConfig: IconConfig, key?: number): import("react/jsx-runtime").JSX.Element | null;

package/components/formatters/IconsFormatter/helpers/renderIcon.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { I as IconClickeableStyled, a as IconStyled } from "../slots/IconsFormatterSlots.js";
+function renderIcon(iconConfig, key) {
+  const { iconUrl, onClick, tooltip, dataTestId, color, visible, size } = iconConfig;
+  if (visible === false) {
+    return null;
+  }
+  const IconComponent = onClick ? IconClickeableStyled : IconStyled;
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      src: iconUrl,
+      onClick,
+      tooltipContent: tooltip,
+      instaceDataTestId: dataTestId,
+      color,
+      size
+    },
+    key
+  );
+}
+export {
+  renderIcon as r
+};

package/components/formatters/IconsFormatter/helpers/renderMultipleIcons.d.ts

@@ -0,0 +1,7 @@
+import { IconConfig } from '../types';
+/**
+ * Helper que renderiza múltiples iconos
+ * @param icons - Array de configuraciones de iconos
+ * @returns Componente contenedor con múltiples iconos
+ */
+export declare function renderMultipleIcons(icons: IconConfig[]): import("react/jsx-runtime").JSX.Element | null;

package/components/formatters/IconsFormatter/helpers/renderMultipleIcons.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { b as IconsContainerStyled } from "../slots/IconsFormatterSlots.js";
+import { r as renderIcon } from "./renderIcon.js";
+function renderMultipleIcons(icons) {
+  const visibleIcons = icons.filter((icon) => icon.visible !== false);
+  if (visibleIcons.length === 0) {
+    return null;
+  }
+  if (visibleIcons.length === 1) {
+    return renderIcon(visibleIcons[0]);
+  }
+  return /* @__PURE__ */ jsx(IconsContainerStyled, { children: visibleIcons.map((icon, index) => renderIcon(icon, index)) });
+}
+export {
+  renderMultipleIcons as r
+};

package/components/formatters/IconsFormatter/index.d.ts

@@ -0,0 +1,3 @@
+export { IconsFormatter } from './IconsFormatter';
+export * from './types';
+export * from './constants';

package/components/formatters/IconsFormatter/index.js

@@ -0,0 +1 @@
+

package/components/formatters/IconsFormatter/slots/IconsFormatterEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum IconsFormatterSlots {
+    iconsContainer = "iconsContainer",
+    icon = "icon",
+    iconClickeable = "iconClickeable"
+}

package/components/formatters/IconsFormatter/slots/IconsFormatterEnum.js

@@ -0,0 +1,9 @@
+var IconsFormatterSlots = /* @__PURE__ */ ((IconsFormatterSlots2) => {
+  IconsFormatterSlots2["iconsContainer"] = "iconsContainer";
+  IconsFormatterSlots2["icon"] = "icon";
+  IconsFormatterSlots2["iconClickeable"] = "iconClickeable";
+  return IconsFormatterSlots2;
+})(IconsFormatterSlots || {});
+export {
+  IconsFormatterSlots as I
+};

package/components/formatters/IconsFormatter/slots/IconsFormatterSlots.d.ts

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

package/components/formatters/IconsFormatter/slots/IconsFormatterSlots.js

@@ -0,0 +1,22 @@
+import { styled } from "@mui/material";
+import { I as ICONS_FORMATTER_KEY_COMPONENT } from "../constants.js";
+import { I as IconsFormatterSlots } from "./IconsFormatterEnum.js";
+import { i as iconsFormatterStyles } from "../IconsFormatter.styles.js";
+import { I as Icon } from "../../../Icon/Icon.js";
+const IconsContainerStyled = styled("div", {
+  name: ICONS_FORMATTER_KEY_COMPONENT,
+  slot: IconsFormatterSlots.iconsContainer
+})(iconsFormatterStyles.iconsContainer);
+const IconStyled = styled(Icon, {
+  name: ICONS_FORMATTER_KEY_COMPONENT,
+  slot: IconsFormatterSlots.icon
+})(iconsFormatterStyles.icon);
+const IconClickeableStyled = styled(Icon, {
+  name: ICONS_FORMATTER_KEY_COMPONENT,
+  slot: IconsFormatterSlots.iconClickeable
+})(iconsFormatterStyles.iconClickeable);
+export {
+  IconClickeableStyled as I,
+  IconStyled as a,
+  IconsContainerStyled as b
+};

package/components/formatters/IconsFormatter/types.d.ts

@@ -0,0 +1,57 @@
+import { Theme } from '@mui/material';
+import { DeepKeyOf } from '../../../utils/types';
+import { Sizes } from '@m4l/styles';
+import { IconsFormatterSlots } from './slots/IconsFormatterEnum';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { ICONS_FORMATTER_KEY_COMPONENT } from './constants';
+export type IconColorDeep = DeepKeyOf<Theme['vars']['palette']> | string;
+/**
+ * Configuración para un solo icono
+ */
+export interface IconConfig {
+    /**
+     * URL o ruta de la imagen del icono
+     */
+    iconUrl: string;
+    /**
+     * Tooltip que se mostrará al pasar el cursor sobre el icono
+     */
+    tooltip?: string;
+    /**
+     * Función que se ejecuta al hacer clic en el icono
+     */
+    onClick?: () => void;
+    /**
+     * Data test id para testing
+     */
+    dataTestId?: string;
+    /**
+     * Controla la visibilidad del icono
+     */
+    visible?: boolean;
+    /**
+     * Color del icono
+     */
+    color?: IconColorDeep;
+    /**
+     * Tamaño del icono
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+}
+/**
+ * Props para el IconsFormatter
+ */
+export interface IconsFormatterProps {
+    /**
+     * Array de configuraciones de iconos (puede ser uno o varios)
+     */
+    icons: IconConfig | IconConfig[];
+}
+/**
+ * Tipos de slots disponibles para el TagFormatter
+ */
+export type IconsFormatterSlotsType = IconsFormatterSlots;
+/**
+ * Estilos aplicables al TagFormatter
+ */
+export type IconsFormatterStyles = M4LOverridesStyleRules<IconsFormatterSlotsType, typeof ICONS_FORMATTER_KEY_COMPONENT, Theme>;

package/components/formatters/IconsFormatter/types.js

@@ -0,0 +1 @@
+

package/components/formatters/TagsFormatter/TagsFormatter.d.ts

@@ -0,0 +1,5 @@
+import { TagsFormatterProps } from './types';
+/**
+ * Formatter para mostrar uno o múltiples tags
+ */
+export declare const TagsFormatter: (props: TagsFormatterProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/formatters/TagsFormatter/TagsFormatter.js

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import { r as renderTag } from "./helpers/renderTag.js";
+import { r as renderMultipleTags } from "./helpers/renderMultipleTag.js";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+const TagsFormatter = (props) => {
+  const { tags, className, size } = props;
+  const { currentSize } = useComponentSize(size);
+  const tagsArray = useMemo(() => {
+    if (!tags) {
+      return null;
+    }
+    return Array.isArray(tags) ? tags : [tags];
+  }, [tags]);
+  if (!tagsArray || tagsArray.length === 0) {
+    return null;
+  }
+  if (tagsArray.length === 1) {
+    return renderTag({
+      tag: tagsArray[0],
+      size: currentSize,
+      className
+    });
+  }
+  return renderMultipleTags(tagsArray, currentSize, className);
+};
+export {
+  TagsFormatter as T
+};

package/components/formatters/TagsFormatter/TagsFormatter.styles.d.ts

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

package/components/formatters/TagsFormatter/TagsFormatter.styles.js

@@ -0,0 +1,41 @@
+import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { getContrastTextColor } from "@m4l/graphics";
+const tagsFormatterStyles = {
+  /**
+   * Contenedor de multiple tags
+   */
+  tagsContainer: ({ theme }) => ({
+    display: "flex",
+    flexWrap: "wrap",
+    gap: theme.vars.size.baseSpacings.sp1,
+    maxHeight: "100%",
+    overflow: "hidden"
+  }),
+  /**
+   * Estilos del tag individual
+   */
+  tag: ({ theme, ownerState }) => {
+    const backgroundColor = ownerState?.backgroundColor || "#000000";
+    const textColor = getContrastTextColor(backgroundColor);
+    return {
+      display: "inline-block",
+      paddingLeft: theme.vars.size.baseSpacings.sp2,
+      paddingRight: theme.vars.size.baseSpacings.sp2,
+      borderRadius: theme.vars.size.borderRadius.r1,
+      cursor: "default",
+      maxWidth: "200px",
+      whiteSpace: "nowrap",
+      overflowY: "hidden",
+      overflowX: "auto",
+      verticalAlign: "middle",
+      ...getSizeStyles(theme, ownerState?.size || "medium", "base"),
+      ...theme.typography.body,
+      lineHeight: getSizeStyles(theme, ownerState?.size || "medium", "base").height,
+      backgroundColor,
+      color: textColor
+    };
+  }
+};
+export {
+  tagsFormatterStyles as t
+};

package/components/formatters/TagsFormatter/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Clave del componente TagsFormatter
+ */
+export declare const TAGS_FORMATTER_KEY_COMPONENT = "M4LTagsFormatter";
+export declare const TAGS_FORMATTER_CLASSES: Record<string, string>;

package/components/formatters/TagsFormatter/constants.js

@@ -0,0 +1,11 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { T as TagsFormatterSlots } from "./slots/TagsFormatterEnum.js";
+const TAGS_FORMATTER_KEY_COMPONENT = "M4LTagsFormatter";
+const TAGS_FORMATTER_CLASSES = getComponentClasses(
+  TAGS_FORMATTER_KEY_COMPONENT,
+  TagsFormatterSlots
+);
+export {
+  TAGS_FORMATTER_KEY_COMPONENT as T,
+  TAGS_FORMATTER_CLASSES as a
+};

package/components/formatters/TagsFormatter/helpers/renderMultipleTag.d.ts

@@ -0,0 +1,8 @@
+import { TagConfig } from '../types';
+/**
+ * Helper que renderiza múltiples tags
+ * @param tags - Array de tags
+ * @param size - Tamaño de los chips
+ * @returns Array de componentes de tags renderizados
+ */
+export declare const renderMultipleTags: (tags: TagConfig[], size: "small" | "medium", className?: string) => import("react/jsx-runtime").JSX.Element;

package/components/formatters/TagsFormatter/helpers/renderMultipleTag.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { T as TagsContainerStyled } from "../slots/TagsFormatterSlots.js";
+import { r as renderTag } from "./renderTag.js";
+const renderMultipleTags = (tags, size, className) => {
+  return /* @__PURE__ */ jsx(TagsContainerStyled, { children: tags.map((tag, index) => {
+    const tagWithKey = {
+      ...tag,
+      key: tag.key || `${tag.label}-${index}`
+    };
+    return renderTag({
+      tag: tagWithKey,
+      size,
+      className
+    });
+  }) });
+};
+export {
+  renderMultipleTags as r
+};

package/components/formatters/TagsFormatter/helpers/renderTag.d.ts

@@ -0,0 +1,7 @@
+import { RenderTagProps } from '../types';
+/**
+ * Helper que renderiza un tag
+ * @param props - Props del tag
+ * @returns Componente de tag renderizado
+ */
+export declare const renderTag: (props: RenderTagProps) => import("react/jsx-runtime").JSX.Element;

package/components/formatters/TagsFormatter/helpers/renderTag.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { T as Tag } from "../subcomponents/Tag/Tag.js";
+const renderTag = (props) => {
+  const { tag, size, className } = props;
+  return /* @__PURE__ */ jsx(Tag, { ...tag, size, className });
+};
+export {
+  renderTag as r
+};

package/components/formatters/TagsFormatter/helpers/validateHexColor.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Valida que un color sea hexadecimal válido
+ * - Debe existir
+ * - Debe empezar con #
+ * @param backgroundColor - Color a validar
+ * @returns true si el color es válido, false en caso contrario
+ */
+export declare const validateHexColor: (backgroundColor: string) => boolean;

package/components/formatters/TagsFormatter/helpers/validateHexColor.js

@@ -0,0 +1,9 @@
+const validateHexColor = (backgroundColor) => {
+  if (!backgroundColor) {
+    return false;
+  }
+  return backgroundColor.startsWith("#");
+};
+export {
+  validateHexColor as v
+};

package/components/formatters/TagsFormatter/index.d.ts

@@ -0,0 +1,2 @@
+export { TagsFormatter } from './TagsFormatter';
+export type { TagsFormatterProps } from './types';

package/components/formatters/TagsFormatter/index.js

@@ -0,0 +1 @@
+

package/components/formatters/TagsFormatter/slots/TagsFormatterEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum TagsFormatterSlots {
+    root = "root",
+    tagsContainer = "tagsContainer",
+    tag = "tag"
+}

package/components/formatters/TagsFormatter/slots/TagsFormatterEnum.js

@@ -0,0 +1,9 @@
+var TagsFormatterSlots = /* @__PURE__ */ ((TagsFormatterSlots2) => {
+  TagsFormatterSlots2["root"] = "root";
+  TagsFormatterSlots2["tagsContainer"] = "tagsContainer";
+  TagsFormatterSlots2["tag"] = "tag";
+  return TagsFormatterSlots2;
+})(TagsFormatterSlots || {});
+export {
+  TagsFormatterSlots as T
+};

package/components/formatters/TagsFormatter/slots/TagsFormatterSlots.d.ts

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

package/components/formatters/TagsFormatter/slots/TagsFormatterSlots.js

@@ -0,0 +1,16 @@
+import { styled } from "@mui/material";
+import { T as TAGS_FORMATTER_KEY_COMPONENT } from "../constants.js";
+import { T as TagsFormatterSlots } from "./TagsFormatterEnum.js";
+import { t as tagsFormatterStyles } from "../TagsFormatter.styles.js";
+const TagsContainerStyled = styled("div", {
+  name: TAGS_FORMATTER_KEY_COMPONENT,
+  slot: TagsFormatterSlots.tagsContainer
+})(tagsFormatterStyles.tagsContainer);
+const TagStyled = styled("div", {
+  name: TAGS_FORMATTER_KEY_COMPONENT,
+  slot: TagsFormatterSlots.tag
+})(tagsFormatterStyles.tag);
+export {
+  TagsContainerStyled as T,
+  TagStyled as a
+};

package/components/formatters/TagsFormatter/subcomponents/Tag/Tag.d.ts

@@ -0,0 +1,5 @@
+import { TagConfig } from '../../types';
+/**
+ * Componente Tag que muestra un tag con color hexadecimal
+ */
+export declare const Tag: (props: TagConfig) => import("react/jsx-runtime").JSX.Element | null;

package/components/formatters/TagsFormatter/subcomponents/Tag/Tag.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { v as validateHexColor } from "../../helpers/validateHexColor.js";
+import { a as TagStyled } from "../../slots/TagsFormatterSlots.js";
+import clsx from "clsx";
+import { a as TAGS_FORMATTER_CLASSES } from "../../constants.js";
+import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
+const Tag = (props) => {
+  const { label, backgroundColor, size, className } = props;
+  const { currentSize } = useComponentSize(size);
+  const ownerState = useMemo(
+    () => ({
+      size: currentSize,
+      backgroundColor
+    }),
+    [currentSize, backgroundColor]
+  );
+  if (!validateHexColor(backgroundColor)) {
+    console.error(
+      `backgroundColor no válido: "${backgroundColor}". backgroundColor debe ser un color hexadecimal.`
+    );
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    TagStyled,
+    {
+      ownerState,
+      className: clsx(className, TAGS_FORMATTER_CLASSES.root),
+      children: label
+    }
+  );
+};
+export {
+  Tag as T
+};

package/components/formatters/TagsFormatter/subcomponents/Tag/index.d.ts

@@ -0,0 +1 @@
+export { Tag } from './Tag';