ui-mathilde-web 0.10.19 → 0.10.21

package/dist/ui-mathilde-web.d.ts

@@ -73,6 +73,43 @@ declare interface AlertProps extends AlertOptions {
     onClose?: () => void;
 }
 
+/**
+ * Configuración de badge dinámico para una columna de tabla.
+ *
+ * Define el comportamiento de resolución de color: normalización del valor,
+ * mapa de variantes y modo de renderizado (simple o múltiple).
+ *
+ * Para el render visual se utiliza el átomo `Tag`.
+ * Se recomienda construir esta config con el helper `createBadgeConfig`.
+ *
+ * @example
+ * import { createBadgeConfig } from "@components/organisms/table/shared/tableBadge.helpers";
+ *
+ * badgeConfig: createBadgeConfig({
+ *   "activa": { bg: "bg-green-100", text: "text-green-700" },
+ *   "error":  { bg: "bg-red-100",   text: "text-red-700"  },
+ * })
+ */
+declare interface BadgeConfig {
+    /**
+     * Transforma el valor crudo a una clave canónica para buscar en `variants`.
+     * Por defecto: lowercase + trim.
+     */
+    normalize?: (value: unknown) => string;
+    /** Mapa de clave normalizada → variante visual (TagVariant). */
+    variants: Record<string, TagVariant>;
+    /** Fallback cuando la clave no existe en `variants`. Por defecto: gris neutro. */
+    defaultVariant?: TagVariant;
+    /** Forma visual del badge. Por defecto: "pill". */
+    shape?: "pill" | "badge";
+    /**
+     * Cuando es `true`, el valor se trata como array y se renderiza un Tag por ítem.
+     * Útil para columnas de sincronización, etiquetas o canales múltiples.
+     * @example ["FB", "GL", "TK"] → tres chips con colores independientes
+     */
+    multiple?: boolean;
+}
+
 export declare const ButtonFormat: default_2.FC<ButtonFormatProps>;
 
 declare interface ButtonFormatProps {
@@ -253,6 +290,8 @@ declare interface Column {
         value: unknown;
     }>;
     cellProps?: Record<string, unknown>;
+    /** Cuando se define, renderiza el valor como badge con color dinámico. */
+    badgeConfig?: BadgeConfig;
 }
 
 declare interface Column_2 {
@@ -270,6 +309,8 @@ declare interface Column_2 {
         value: unknown;
     }>;
     cellProps?: Record<string, unknown>;
+    /** Cuando se define, renderiza el valor como badge con color dinámico. */
+    badgeConfig?: BadgeConfig;
 }
 
 export declare const CustomPagination: default_2.FC<CustomPaginationProps>;
@@ -736,6 +777,30 @@ declare interface TabsComponentProps {
     onTabChange?: (tabId: string) => void;
 }
 
+/**
+ * Átomo Tag — representación visual de una etiqueta con color dinámico.
+ *
+ * Solo se ocupa de renderizar: no conoce lógica de negocio,
+ * normalización de valores ni configuraciones de tabla.
+ *
+ * @example
+ * <Tag variant={{ bg: "bg-green-100", text: "text-green-700" }}>Activa</Tag>
+ * <Tag variant={{ bg: "bg-red-100", text: "text-red-700" }} shape="badge">Error</Tag>
+ */
+export declare const Tag: React_2.FC<TagProps>;
+
+declare interface TagProps {
+    variant: TagVariant;
+    shape?: "pill" | "badge";
+    children: React.ReactNode;
+}
+
+declare interface TagVariant {
+    bg: string;
+    text?: string;
+    border?: string;
+}
+
 export declare const TermsCheckbox: default_2.FC<TermsCheckboxProps>;
 
 declare interface TermsCheckboxProps {