import { AvatarColor, AvatarSize, AvatarTheme } from '../types'; import { IconType } from '../../../shared/types/types'; /** * ============================================ * AVATAR CONSTANTS - DESIGN TOKENS * ============================================ * Constantes centralizadas para facilitar la personalización * del componente Avatar */ /** * ============================================ * DEFAULT VALUES * ============================================ */ export declare const DEFAULT_ICON: IconType; export declare const DEFAULT_COLOR: AvatarColor; export declare const DEFAULT_THEME: AvatarTheme; export declare const DEFAULT_SIZE: AvatarSize; /** * ============================================ * COLOR SCHEMES - TEMA SOLID * ============================================ * Colores para el tema solid (fondo sólido + texto blanco) * * Para personalizar: * 1. Modifica los valores de Tailwind * 2. O agrega nuevos colores al objeto */ export declare const SOLID_COLORS: Record; /** * ============================================ * COLOR SCHEMES - TEMA SOFT * ============================================ * Colores para el tema soft (fondo claro + texto oscuro) * * Para personalizar: * 1. Modifica los valores de Tailwind * 2. O agrega nuevos colores al objeto */ export declare const SOFT_COLORS: Record; /** * Paleta específica para avatares tipo 'letter' con tema soft. * Inicialmente hereda los mismos valores que icon para mantener consistencia, * pero queda lista para personalizar tipografía/contraste más adelante. */ export declare const SOFT_LETTER_COLORS: Record; /** * ============================================ * SIZE CONFIGURATIONS * ============================================ * Tamaños del avatar (ancho, alto y tamaño de texto) * * Para personalizar: * 1. Modifica los valores de ancho/alto (ej: ui-w-16 ui-h-16) * 2. Ajusta el tamaño del texto (ej: ui-text-[6px]) * * Nota: Los tamaños están en múltiplos de 4px (escala Tailwind) */ export declare const AVATAR_SIZES: Record; /** * ============================================ * ICON SIZE MAPPING * ============================================ * Mapeo de tamaños de avatar a tamaños de icono * * Para personalizar: * 1. Ajusta el tamaño del icono según el tamaño del avatar * 2. Los valores deben corresponder a los tamaños del componente Icon */ export declare const ICON_SIZES: Record; /** * ============================================ * BORDER & SHAPE CONFIGURATIONS * ============================================ */ /** Ancho del borde */ export declare const STROKE_WIDTH = "ui-border-1"; /** Color de borde para avatar tipo 'people' */ export declare const PEOPLE_STROKE_COLOR = "ui-border"; /** Colores de borde para el tema soft (icon y letter) */ export declare const SOFT_STROKE_COLORS: Record; /** Colores de borde para el tema solid (icon y letter) */ export declare const SOLID_STROKE_COLORS: Record; /** Clase para forma circular (pill=true) */ export declare const PILL_SHAPE_CLASS = "ui-rounded-control-pill"; /** Clase por defecto para forma redondeada (pill=false) */ export declare const ROUNDED_SHAPE_CLASS = "ui-rounded-[10px]"; /** * Ajustes de radio cuando `pill=false` en tamaños pequeños. * xxs -> 6px, xs -> 8px, resto -> 10px por defecto. */ export declare const ROUNDED_SHAPE_BY_SIZE: Partial>; /** * ============================================ * TEXT CONFIGURATION * ============================================ */ /** Longitud máxima de texto para avatares tipo 'letter' */ export declare const MAX_TEXT_LENGTH = 3; /** * ============================================ * DISABLED STATE CONFIGURATION * ============================================ * Estilos para el estado deshabilitado * * Para personalizar: * 1. Modifica las clases de opacidad o background * 2. Ajusta el filtro grayscale */ /** Clases para el estado disabled */ export declare const DISABLED_CLASS = "ui-opacity-50 ui-cursor-not-allowed"; /** Filtro grayscale para disabled */ export declare const DISABLED_GRAYSCALE_FILTER = "ui-grayscale"; /** Background para disabled (people avatar) */ export declare const DISABLED_PEOPLE_BG = "ui-bg-fill-disabled"; /** Filtro de mezcla para imágenes disabled (people avatar) */ export declare const DISABLED_PEOPLE_BLEND = "ui-mix-blend-luminosity"; /** Color de texto para disabled (letter avatar) */ export declare const DISABLED_TEXT_COLOR = "ui-text-disabled"; /** * ============================================ * STACK CONFIGURATION * ============================================ * Configuración para avatares apilados (stack) * Márgenes negativos y padding según el tamaño */ /** Márgenes negativos para cada avatar en el stack */ export declare const STACK_NEGATIVE_MARGINS: Record; /** Padding derecho del contenedor del stack */ export declare const STACK_PADDING_RIGHT: Record; //# sourceMappingURL=index.d.ts.map