{ "schemaVersion": "1.0.0", "package": "@imj_media/ui", "version": "1.11.1", "indexedAt": "2026-06-04T22:33:42.184Z", "orbitTokensVersion": "1.3.1", "modules": [ { "id": "Accordion", "path": "src/modules/Accordion", "legacy": false, "compositionType": 2, "exports": [ { "name": "Accordion", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Accordion permite mostrar contenido colapsable con un encabezado. Útil para organizar información de forma compacta.", "jsdoc": "Accordion - Componente de acordeón expandible\nComponente que permite mostrar/ocultar contenido de forma expandible.\nSoporta múltiples items, estados controlados y no controlados.", "confidence": "high" }, "examples": [ "import { Accordion } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n \n
\n

Contenido del accordion

\n
\n \n );\n}", "import { Accordion } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n \n
\n

Contenido visible desde el inicio

\n
\n \n );\n}", "import { Accordion } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n \n
\n

Contenido no accesible

\n
\n \n );\n}", "import { Accordion } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n \n
\n

Contenido del accordion

\n
\n \n );\n}", "import { Accordion } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n
\n \n
\n

Contenido de la primera sección

\n
\n \n \n \n
\n

Contenido de la segunda sección

\n
\n \n \n \n
\n

Contenido de la tercera sección

\n
\n \n
\n );\n}" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "title": { "name": "title", "type": "string", "required": true }, "subtitle": { "name": "subtitle", "type": "string", "required": false }, "children": { "name": "children", "type": "React.ReactNode", "required": false }, "id": { "name": "id", "type": "string", "required": true }, "className": { "name": "className", "type": "string", "required": false }, "defaultOpen": { "name": "defaultOpen", "type": "boolean", "required": false }, "headerClassName": { "name": "headerClassName", "type": "string", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false } } } } ], "compositionRecipe": { "pieces": [ "Accordion", "AccordionHeader", "AccordionContent" ], "steps": [ "Pasa id y title obligatorios en Accordion (API de contenedor).", "El children del accordion es el contenido visible al expandir.", "Para múltiples secciones, repite Accordion o usa items según la story del módulo." ], "storyRefs": [ "Accordion.stories.tsx:Default" ], "snippet": "\n Contenido colapsable\n" }, "standaloneSnippet": "import React, { useState } from 'react';\n\nexport function Accordion({\n items,\n defaultOpen,\n}: {\n items: { id: string; title: string; content: React.ReactNode }[];\n defaultOpen?: string;\n}) {\n const [openId, setOpenId] = useState(defaultOpen);\n\n const toggle = (id: string) => {\n setOpenId((prev) => (prev === id ? undefined : id));\n };\n\n return (\n \n {items.map((item, index) => {\n const isOpen = openId === item.id;\n return (\n
\n {index > 0 && (\n
\n )}\n toggle(item.id)}\n style={{\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '12px 4px',\n backgroundColor: 'rgb(255, 255, 255)',\n border: 'none',\n cursor: 'pointer',\n fontSize: '16px',\n fontWeight: '500',\n color: 'rgb(48, 51, 54)',\n fontFamily: 'inherit',\n textAlign: 'left',\n }}\n >\n {item.title}\n \n ▼\n \n \n \n {item.content}\n
\n
\n );\n })}\n \n );\n}\n" }, { "id": "Alert", "path": "src/modules/Alert", "legacy": false, "compositionType": 1, "exports": [ { "name": "Alert", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Alert permite mostrar mensajes informativos, de éxito, advertencia o error con diferentes variantes visuales.", "jsdoc": "Alert - Componente de alerta\nTokens semánticos de Figma:\n- Padding: 16px (space_16) para md, reducido para sm\n- Gap: 16px (space_16) entre secciones\n- Border radius: control-sm (8px)\n- Border width: 1px", "confidence": "high" }, "examples": [ "import { Alert } from '@/modules/Alert';\n\n export default function Example() {\n return (\n \n )\n }", "\n \n \n \n \n \n \n ", "\n \n \n \n ", "import { Alert } from '@/modules/Alert';\n\n export default function Example() {\n return (\n \n )\n }", "\n \n \n \n \n \n \n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "open": { "name": "open", "type": "boolean", "required": true }, "message": { "name": "message", "type": "string", "required": false }, "description": { "name": "description", "type": "string", "required": false }, "color": { "name": "color", "type": "AlertColor", "required": false }, "isLeaving": { "name": "isLeaving", "type": "boolean", "required": false }, "title": { "name": "title", "type": "string", "required": false }, "showCloseButton": { "name": "showCloseButton", "type": "boolean", "required": false }, "variant": { "name": "variant", "type": "VariantAlert", "required": false }, "onClick": { "name": "onClick", "type": "() => void", "required": false }, "onClose": { "name": "onClose", "type": "(e: React.MouseEvent) => void", "required": false }, "onPrimaryClick": { "name": "onPrimaryClick", "type": "() => void", "required": false }, "onSecondaryClick": { "name": "onSecondaryClick", "type": "() => void", "required": false }, "primaryButtonText": { "name": "primaryButtonText", "type": "string", "required": false }, "secondaryButtonText": { "name": "secondaryButtonText", "type": "string", "required": false }, "animation": { "name": "animation", "type": "AnimationAlert", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "size": { "name": "size", "type": "SizeAlert", "required": false }, "duration": { "name": "duration", "type": "number", "required": false, "description": "Duración en milisegundos antes del auto-cierre vía barra de progreso.\n - `undefined`: sin barra ni cierre automático por tiempo.\n - `0`: sin barra ni cierre automático (equivalente práctico a omitir; útil con APIs que envían `0` explícito).\n - Valor > 0: barra de cuenta atrás y cierre al completar." }, "progressBarClassName": { "name": "progressBarClassName", "type": "string", "required": false, "description": "Clases en el contenedor de la barra de progreso (p. ej. `ui-hidden`) para ocultarla sin desmontarla.\n Útil si un temporizador externo sigue activo y no debe reiniciarse la cuenta atrás visual." }, "children": { "name": "children", "type": "React.ReactNode", "required": false, "description": "Contenido adicional que se renderiza antes de la barra de progreso.\n Útil para mostrar contadores u otros elementos personalizados." }, "avatar": { "name": "avatar", "type": "string", "required": false, "description": "URL de una imagen de avatar para mostrar en lugar del icono por defecto.\n Cuando se proporciona, muestra un avatar circular con la imagen." }, "endAdornment": { "name": "endAdornment", "type": "React.ReactNode", "required": false, "description": "Contenido al final de la fila de cabecera (p. ej. hora y estado leído).\n Solo tiene efecto si {" }, "avatarIntentBadge": { "name": "avatarIntentBadge", "type": "boolean", "required": false, "description": "Con `avatar`, muestra un badge circular con el icono de intención superpuesto\n (esquina inferior derecha), como en Notification (Figma)." }, "truncateHeaderText": { "name": "truncateHeaderText", "type": "boolean", "required": false, "description": "Si es true, el título y el mensaje (p. ej. subtítulo) muestran elipsis en una sola línea\n cuando no caben en el ancho disponible (requiere `min-w-0` en ancestros flex)." }, "headerAddon": { "name": "headerAddon", "type": "React.ReactNode", "required": false, "description": "Bloque bajo título/mensaje/descripción en la columna derecha de la cabecera\n (p. ej. CTA o panel de {" } } } } ], "standaloneSnippet": "import React, { useState } from 'react';\n\nconst variantMap = {\n info: { border: 'rgb(5, 181, 212)', bg: 'rgba(0, 0, 0, 0.08)', text: 'rgb(5, 181, 212)' },\n success: { border: 'rgb(33, 196, 94)', bg: 'rgba(0, 0, 0, 0.08)', text: 'rgb(33, 196, 94)' },\n warning: { border: 'rgb(235, 179, 8)', bg: 'rgba(0, 0, 0, 0.08)', text: 'rgb(235, 179, 8)' },\n error: { border: 'rgb(240, 69, 69)', bg: 'rgba(0, 0, 0, 0.08)', text: 'rgb(240, 69, 69)' },\n};\n\nexport function Alert({\n children,\n variant = 'info',\n title,\n closable = false,\n onClose,\n}: {\n children: React.ReactNode;\n variant?: keyof typeof variantMap;\n title?: string;\n closable?: boolean;\n onClose?: () => void;\n}) {\n const [visible, setVisible] = useState(true);\n if (!visible) return null;\n\n const v = variantMap[variant];\n\n const handleClose = () => {\n setVisible(false);\n onClose?.();\n };\n\n return (\n \n {closable && (\n \n ×\n \n )}\n {title && (\n
\n {title}\n
\n )}\n
{children}
\n \n );\n}\n" }, { "id": "AlertDialog", "path": "src/modules/AlertDialog", "legacy": false, "compositionType": 1, "exports": [ { "name": "AlertDialog", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente AlertDialog permite a los usuarios realizar acciones y tomar decisiones con un solo toque.", "jsdoc": "AlertDialog - Componente de diálogo de confirmación/alert\nComponente de diálogo modal especializado para confirmaciones y alertas.\nSoporta texto de confirmación requerido, iconos personalizados y múltiples tamaños.", "confidence": "high" }, "examples": [ "import { AlertDialog } from '@imj_media/ui';\n const [isOpen, setIsOpen] = useState(false);\n\n export default function Example() {\n return setIsOpen(false)}\n onConfirm={() => { console.log('onConfirm') }}\n placeholder='Escribe la palabra de confirmación'\n />\n }", "import { AlertDialog } from '@imj_media/ui';\nimport { useState } from 'react';\n\nexport default function SizesExample() {\n const [isOpen, setIsOpen] = useState(false);\n \n return (\n setIsOpen(false)}\n onConfirm={() => console.log('Confirmado')}\n successButtonText=\"Aceptar\"\n successButtonColor=\"primary\"\n />\n );\n}", "import { AlertDialog } from '@/modules/AlertDialog';\nimport { faTrash, faBan } from '@fortawesome/pro-duotone-svg-icons';\nimport { useState } from 'react';\n\nexport default function DuotoneExample() {\n const [isOpen, setIsOpen] = useState(false);\n \n return (\n setIsOpen(false)}\n onConfirm={() => console.log('Confirmado')}\n />\n );\n}", "import { AlertDialog } from '@imj_media/ui';\n const [isOpen, setIsOpen] = useState(false);\n\n export default function Example() {\n return setIsOpen(false)}\n onConfirm={() => { console.log('onConfirm') }}\n placeholder='Escribe la palabra de confirmación'\n />\n }", "import { AlertDialog } from '@imj_media/ui';\nimport { useState } from 'react';\n\nexport default function SizesExample() {\n const [isOpen, setIsOpen] = useState(false);\n \n return (\n setIsOpen(false)}\n onConfirm={() => console.log('Confirmado')}\n successButtonText=\"Aceptar\"\n successButtonColor=\"primary\"\n />\n );\n}" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "isOpen": { "name": "isOpen", "type": "boolean", "required": true }, "onClose": { "name": "onClose", "type": "() => void", "required": true }, "label": { "name": "label", "type": "string", "required": false }, "confirmationText": { "name": "confirmationText", "type": "string", "required": false }, "onConfirm": { "name": "onConfirm", "type": "() => void", "required": true }, "icon": { "name": "icon", "type": "IconType | AnyIconDefinition", "required": false }, "iconDuotonePrimary": { "name": "iconDuotonePrimary", "type": "IconFontColor", "required": false }, "iconDuotoneSecondary": { "name": "iconDuotoneSecondary", "type": "IconFontColor", "required": false }, "iconDuotoneOpacityPrimary": { "name": "iconDuotoneOpacityPrimary", "type": "number", "required": false }, "iconDuotoneOpacitySecondary": { "name": "iconDuotoneOpacitySecondary", "type": "number", "required": false }, "iconContent": { "name": "iconContent", "type": "IconType | AnyIconDefinition", "required": false }, "iconContentDuotonePrimary": { "name": "iconContentDuotonePrimary", "type": "IconFontColor", "required": false }, "iconContentDuotoneSecondary": { "name": "iconContentDuotoneSecondary", "type": "IconFontColor", "required": false }, "iconContentDuotoneOpacityPrimary": { "name": "iconContentDuotoneOpacityPrimary", "type": "number", "required": false }, "iconContentDuotoneOpacitySecondary": { "name": "iconContentDuotoneOpacitySecondary", "type": "number", "required": false }, "heading": { "name": "heading", "type": "string", "required": false }, "subheading": { "name": "subheading", "type": "string", "required": false }, "placeholder": { "name": "placeholder", "type": "string", "required": false }, "title": { "name": "title", "type": "string", "required": false }, "successButtonColor": { "name": "successButtonColor", "type": "ButtonColors", "required": false }, "successButtonText": { "name": "successButtonText", "type": "string", "required": false } } } } ] }, { "id": "Avatar", "path": "src/modules/Avatar", "legacy": false, "compositionType": 1, "exports": [ { "name": "Avatar", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "============================================\nAVATAR COMPONENT - ATOMIC DESIGN\n============================================\nComponente Avatar versátil que sigue principios de Atomic Design.\nActúa como un wrapper que delega la renderización a subcomponentes\nespecializados según el tipo de avatar.\n## Tipos de Avatar\n### 1. People Avatar (type: 'people')\nMuestra una imagen de persona con manejo de errores y fallback automático al icono por defecto\n### 2. Icon Avatar (type: 'icon')\nMuestra un icono del sistema de iconos con temas de color\n### 3. Letter Avatar (type: 'letter')\nMuestra texto (iniciales, números, símbolos) con truncado automático\n## Personalización\nPara modificar colores, tamaños, o agregar nuevos temas:\n@see /constants/index.ts - Tokens de diseño centralizados\n@see /types/index.t", "readme": "# Avatar Component\n\nComponente Avatar versátil construido con **Atomic Design** que soporta múltiples tipos: imágenes de personas, iconos y letras/números.\n\n## 📋 Tabla de Contenidos\n\n- [Características](#características)\n- [Tipos de Avatar](#tipos-de-avatar)\n- [Props](#props)\n- [Ejemplos de Uso](#ejemplos-de-uso)\n- [Personalización](#personalización)\n- [Estructura del Componente](#estructura-del-componente)\n\n## ✨ Características\n\n- ✅ **3 tipos de avatar**: People (imagen), Icon (icono), Letter (texto/números)\n- ✅ **Atomic Design**: Estructura modular y mantenible\n- ✅ **6 tamaños**: xxs, xs, sm, md, lg, xl\n- ✅ **11 colores**: blue, red, orange, yellow, lime, green, cyan, azure, violet, magenta, rose\n- ✅ **2 temas**: solid y soft\n- ✅ **Personalización**: Border (stroke) y forma (pill/rounded)\n- ✅ **Performance**: Lazy loading y preload de imágenes\n- ✅ **TypeScript**: Completamente tipado\n- ✅ **Documentación**: Stories completas en Storybook\n\n## 🎯 Tipos de Avatar\n\n### 1. People Avatar (type: 'people')\n\nMuestra una imagen de persona con manejo de errores y fallback automático al icono por defecto.\n\n```tsx\n\n```\n\n### 2. Icon Avatar (type: 'icon')\n\nMuestra un icono fijo (UserOutlined).\n\n```tsx\n\n```\n\n### 3. Letter Avatar (type: 'letter')\n\nMuestra texto, ideal para iniciales, contadores o indicadores.\n\n```tsx\n// Iniciales\n\n\n// Contador estilo Teams\n\n\n// Indicador\n\n```\n\n## 📝 Props\n\n### Props Comunes (todas los tipos)\n\n| Prop | Tipo | Default | Descripción |\n| ---------------", "confidence": "medium" }, "examples": [], "props": { "groups": { "status": { "props": { "type": { "name": "type", "type": "AvatarStatusType", "required": false, "description": "Tipo de status: 'color' muestra un punto de color, 'icon' muestra un icono" }, "color": { "name": "color", "type": "AvatarStatusColor", "required": false, "description": "Color del status" }, "size": { "name": "size", "type": "AvatarStatusSize", "required": false, "description": "Tamaño del status" }, "icon": { "name": "icon", "type": "IconType | AnyIconDefinition", "required": false, "description": "Icono personalizado (solo para type='icon')" } } }, "withStack": { "props": { "stack": { "name": "stack", "type": "AvatarStackItem[]", "required": true, "description": "Array de avatares para mostrar en stack. Si tiene `src`, se usa type='people' automáticamente" }, "size": { "name": "size", "type": "AvatarSize", "required": false, "description": "Tamaño del avatar (default: 'md') - se aplica a todos los avatares del stack" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales para el contenedor del stack" }, "maxVisible": { "name": "maxVisible", "type": "number", "required": false, "description": "Número máximo de avatares a mostrar. Si hay más, se muestra un contador con el número restante (ej: \"+5\")" }, "counterColor": { "name": "counterColor", "type": "AvatarColor", "required": false, "description": "Color del avatar contador cuando se excede maxVisible (default: 'blue')" }, "counterTheme": { "name": "counterTheme", "type": "AvatarTheme", "required": false, "description": "Tema del avatar contador cuando se excede maxVisible (default: 'solid')" }, "stroke": { "name": "stroke", "type": "boolean", "required": false, "description": "Agrega borde de 2px a todos los avatares del stack (default: false)" } } } }, "deprecatedRoot": [] } } ], "standaloneSnippet": "import React, { useState } from 'react';\n\nconst sizeMap = {\n sm: { dimension: '32px', fontSize: '12px' },\n md: { dimension: '40px', fontSize: '14px' },\n lg: { dimension: '56px', fontSize: '18px' },\n xl: { dimension: '80px', fontSize: '20px' },\n};\n\nexport function Avatar({\n src,\n alt = '',\n size = 'md',\n fallback,\n}: {\n src?: string;\n alt?: string;\n size?: keyof typeof sizeMap;\n fallback?: string;\n}) {\n const [imgError, setImgError] = useState(false);\n const s = sizeMap[size];\n const showImage = src && !imgError;\n\n const baseStyle: React.CSSProperties = {\n width: s.dimension,\n height: s.dimension,\n borderRadius: '9999px',\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n overflow: 'hidden',\n flexShrink: 0,\n };\n\n if (showImage) {\n return (\n setImgError(true)}\n style={{\n ...baseStyle,\n objectFit: 'cover',\n }}\n />\n );\n }\n\n return (\n \n {fallback || '?'}\n \n );\n}\n" }, { "id": "Badge", "path": "src/modules/Badge", "legacy": false, "compositionType": 1, "exports": [ { "name": "Badge", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Badge permite mostrar pequeñas notificaciones y contadores. **API preferida:** bloques", "jsdoc": "Módulo Badge — insignia contador/estado del design system.\nExporta {@link Badge} para uso desde `@imj_media/ui` o `@/modules/Badge`.\nLas props públicas (`BadgeProps` y sub-interfaces) viven en `@/shared/types/badge`.", "readme": "# Badge Component\n\nComponente de insignia/badge versátil y configurable con soporte para diferentes tamaños, colores, temas, iconos, estados de carga y personalización avanzada.\n\n## Uso Básico\n\n```tsx\nimport { Badge } from '@imj_media/ui';\n\n// Badge simple con label\n\n\n// Badge tipo dot (sin label)\n\n\n// Badge con icono\n\n```\n\n## Props Principales\n\n### Contenido\n\n- `label?: string | number` - Texto o número del badge (default: `''`)\n- `icon?: IconType | AnyIconDefinition` - Icono del badge (no se muestra en tamaño `dot`)\n\n### Tamaño y Estilo\n\n- `size?: 'dot' | 'sm' | 'md' | 'lg'` - Tamaño del badge (default: `'dot'`)\n- `color?: 'accent' | 'gray' | 'success' | 'warning' | 'danger' | 'info'` - Color del badge (default: `'accent'`)\n- `theme?: 'solid' | 'soft'` - Tema del badge (default: `'solid'`)\n- `stroke?: boolean` - Mostrar borde (default: `false`)\n\n### Estados\n\n- `disabled?: boolean` - Si el badge está deshabilitado (default: `false`)\n- `loading?: boolean` - Mostrar spinner de carga (default: `false`)\n\n### Personalización\n\n- `customColor?: string` - Color personalizado (hex, rgb, etc.)\n- `className?: string` - Clases CSS adicionales\n\n### Iconos Duotone\n\n- `iconDuotonePrimary?: IconFontColor` - Color primario del icono duotone\n- `iconDuotoneSecondary?: IconFontColor` - Color secundario del icono duotone\n- `iconDuotoneOpacityPrimary?: number` - Opacidad primaria (0-1)\n- `iconDuotoneOpacitySecondary?: number` - Opacidad secundaria (0-1)\n\n## Ejemplos\n\n### Badge tipo dot\n\n```tsx\n// Dot simple\n\n\n// Dot con color personalizado\n\n```\n\n### Badge con diferentes tamaños\n\n```tsx\n\n\n\n```\n\n### Badge con icono\n\n```tsx\n\n \n \n \n \n \n \n \n \n )\n}", "import { Badge } from '@/modules/Badge';\n\nexport default function Example() {\n return (\n <>\n \n \n \n \n \n \n \n \n )\n}", "import { Badge } from '@/modules/Badge';\n\nexport default function Example() {\n return (\n <>\n \n \n \n \n \n \n \n \n )\n}", "import { Badge } from '@/modules/Badge';\n\nexport default function Example() {\n return (\n <>\n \n \n \n \n \n \n \n \n )\n}", "import { Badge } from '@/modules/Badge';\n\nexport default function Example() {\n return (\n <>\n \n \n \n \n \n \n \n \n )\n}" ], "props": { "groups": { "shared": { "props": { "className": { "name": "className", "type": "string", "required": false } } }, "appearance": { "props": { "color": { "name": "color", "type": "BadgeColor", "required": false }, "theme": { "name": "theme", "type": "BadgeTheme", "required": false }, "size": { "name": "size", "type": "BadgeSize", "required": false }, "customColor": { "name": "customColor", "type": "string", "required": false }, "stroke": { "name": "stroke", "type": "boolean", "required": false } } }, "glyph": { "props": { "icon": { "name": "icon", "type": "IconType | AnyIconDefinition", "required": false }, "iconSlot": { "name": "iconSlot", "type": "ReactNode", "required": false, "description": "Si se define, sustituye el render del icono Font Awesome (p. ej. LegacyIcon)." }, "iconDuotonePrimary": { "name": "iconDuotonePrimary", "type": "IconFontColor", "required": false }, "iconDuotoneSecondary": { "name": "iconDuotoneSecondary", "type": "IconFontColor", "required": false }, "iconDuotoneOpacityPrimary": { "name": "iconDuotoneOpacityPrimary", "type": "number", "required": false }, "iconDuotoneOpacitySecondary": { "name": "iconDuotoneOpacitySecondary", "type": "number", "required": false } } }, "text": { "props": { "label": { "name": "label", "type": "string", "required": false }, "truncateLabel": { "name": "truncateLabel", "type": "boolean", "required": false }, "truncateTooltip": { "name": "truncateTooltip", "type": "boolean", "required": false, "description": "Si es true y truncateLabel es true, muestra tooltip con el texto completo al hacer hover cuando está truncado. Por defecto false." } } }, "state": { "props": { "hover": { "name": "hover", "type": "boolean", "required": false, "description": "Si es `false`, el badge no participa como objetivo de puntero (`pointer-events: none`): útil en chips donde el\n remarcado lo define el padre (p. ej. tarjeta con `group-hover`) y no el hover sobre el propio badge.\n Por defecto `true`." }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "loading": { "name": "loading", "type": "boolean", "required": false, "description": "Si es true, muestra un spinner de carga en lugar del contenido del badge" } } } }, "deprecatedRoot": [], "flat": { "className": { "name": "className", "type": "string", "required": false } } } } ], "standaloneSnippet": "import React from 'react';\n\nconst colorMap = {\n primary: { solid: 'rgb(54, 89, 194)', text: 'rgb(54, 89, 194)' },\n secondary: { solid: 'rgb(240, 69, 69)', text: 'rgb(240, 69, 69)' },\n tertiary: { solid: 'rgb(33, 196, 94)', text: 'rgb(33, 196, 94)' },\n destructive: { solid: 'rgb(235, 179, 8)', text: 'rgb(235, 179, 8)' },\n neutral: { solid: 'rgb(89, 89, 94)', text: 'rgb(89, 89, 94)' },\n};\n\nconst sizeMap = {\n sm: { padding: '2px 6px', fontSize: '12px' },\n md: { padding: '4px 2px', fontSize: '12px' },\n lg: { padding: '4px 12px', fontSize: '14px' },\n};\n\nfunction hexToRgba(hex: string, alpha: number): string {\n const h = hex.replace('#', '');\n const n = parseInt(h, 16);\n return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;\n}\n\nexport function Badge({\n children,\n color = 'primary',\n size = 'md',\n theme = 'soft',\n}: {\n children: React.ReactNode;\n color?: keyof typeof colorMap;\n size?: keyof typeof sizeMap;\n theme?: 'soft' | 'solid' | 'outlined';\n}) {\n const c = colorMap[color];\n const s = sizeMap[size];\n\n const styles: Record = {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: s.padding,\n fontSize: s.fontSize,\n fontWeight: '500',\n lineHeight: '1.25',\n borderRadius: '9999px',\n whiteSpace: 'nowrap',\n };\n\n if (theme === 'solid') {\n styles.backgroundColor = c.solid;\n styles.color = 'rgb(255, 255, 255)';\n styles.border = 'none';\n } else if (theme === 'outlined') {\n styles.backgroundColor = 'transparent';\n styles.color = c.text;\n styles.border = `1px solid ${c.solid}`;\n } else {\n styles.backgroundColor = hexToRgba(c.solid, 0.1);\n styles.color = c.text;\n styles.border = 'none';\n }\n\n return {children};\n}\n" }, { "id": "Badges", "path": "src/modules/Badges", "legacy": false, "compositionType": 1, "exports": [ { "name": "Badges", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Badges permite crear una lista de badges dinámicos escribiendo texto y presionando Enter. Cada badge puede ser eliminado individualmente.", "confidence": "medium" }, "examples": [ "import { Badges, BadgeItem } from '@imj_media/ui';\nimport { useState } from 'react';\n\nexport default function Example() {\n const [badges, setBadges] = useState([]);\n\n return (\n setBadges(event.items)}\n />\n );\n}", "import { Badges, BadgeItem, BadgesChangeEvent } from '@imj_media/ui';\nimport { useState } from 'react';\n\nconst initialBadges: BadgeItem[] = [\n { id: '1', label: 'React', color: 'accent' },\n { id: '2', label: 'TypeScript', color: 'info' },\n { id: '3', label: 'Tailwind', color: 'success' },\n];\n\nexport default function Example() {\n const [badges, setBadges] = useState(initialBadges);\n\n const handleChange = (event: BadgesChangeEvent) => {\n setBadges(event.items);\n };\n\n return (\n \n );\n}", "import { Badges, BadgesChangeEvent } from '@imj_media/ui';\n\n// Simplemente pasa un array de strings\nconst initialTags = ['React', 'TypeScript', 'Tailwind', 'Node.js'];\n\nexport default function Example() {\n return (\n \n );\n}", "import { Badges } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n \n );\n}", "import { Badges } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n <>\n \n \n \n \n \n );\n}" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "value": { "name": "value", "type": "BadgesInputValue", "required": false, "description": "Lista inicial de badges (puede ser array de BadgeItem o array de strings)" }, "placeholder": { "name": "placeholder", "type": "string", "required": false, "description": "Placeholder del input" }, "label": { "name": "label", "type": "string", "required": false, "description": "Label del componente" }, "helperText": { "name": "helperText", "type": "string", "required": false, "description": "Texto de ayuda" }, "error": { "name": "error", "type": "string", "required": false, "description": "Mensaje de error" }, "defaultColor": { "name": "defaultColor", "type": "TagColor", "required": false, "description": "Color por defecto para nuevos badges" }, "colorCycle": { "name": "colorCycle", "type": "TagColor[]", "required": false, "description": "Colores cíclicos para badges (si se define, se ignora defaultColor)" }, "size": { "name": "size", "type": "InputSize", "required": false, "description": "Tamaño del componente" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Si está deshabilitado" }, "fullWidth": { "name": "fullWidth", "type": "boolean", "required": false, "description": "Si ocupa todo el ancho" }, "maxBadges": { "name": "maxBadges", "type": "number", "required": false, "description": "Máximo número de badges permitidos" }, "onChange": { "name": "onChange", "type": "(event: BadgesChangeEvent) => void", "required": false, "description": "Evento cuando cambia la lista de badges (add o remove)" }, "onAdd": { "name": "onAdd", "type": "(item: BadgeItem) => void", "required": false, "description": "Evento cuando se agrega un badge" }, "onRemove": { "name": "onRemove", "type": "(item: BadgeItem) => void", "required": false, "description": "Evento cuando se elimina un badge" }, "onFocus": { "name": "onFocus", "type": "(event?: React.FocusEvent) => void", "required": false, "description": "Evento de focus" }, "onBlur": { "name": "onBlur", "type": "(event?: React.FocusEvent) => void", "required": false, "description": "Evento de blur" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases adicionales para el contenedor" } } } } ] }, { "id": "Breadcrumbs", "path": "src/modules/Breadcrumbs", "legacy": false, "compositionType": 1, "exports": [ { "name": "Breadcrumbs", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Breadcrumbs permite mostrar una lista de enlaces que representan la navegación del usuario.", "jsdoc": "Breadcrumbs - Componente de migas de pan\nComponente de navegación que muestra la ruta jerárquica actual.\nSoporta truncamiento automático cuando hay muchos items y componente de enlace personalizable.", "confidence": "high" }, "examples": [ "import { Breadcrumbs } from '@imj_media/ui/Breadcrumbs';\n\n const items = [\n { label: 'Home', to: '/' },\n { label: 'About', to: '/about' },\n { label: 'Contact', to: '/contact' },\n { label: 'Gallery', to: '/gallery' },\n { label: 'Blog', to: '/blog' },\n { label: 'History', to: '/history' },\n ];\n\n export default function Example() {\n return (\n <>\n \n \n )\n }", "import { Breadcrumbs } from '@imj_media/ui/Breadcrumbs';\n import { Link } from '@react-router';\n \n const items = [\n { label: 'Home', to: '/' },\n { label: 'About', to: '/about' },\n { label: 'Contact', to: '/contact' },\n { label: 'Gallery', to: '/gallery' },\n { label: 'Blog', to: '/blog' },\n { label: 'History', to: '/history' },\n ];\n\n export default function Example() {\n return (\n <>\n \n \n )\n }", "import { Breadcrumbs } from '@imj_media/ui/Breadcrumbs';\n\n const items = [\n { label: 'Home', to: '/' },\n { label: 'About', to: '/about' },\n { label: 'Contact', to: '/contact' },\n { label: 'Gallery', to: '/gallery' },\n { label: 'Blog', to: '/blog' },\n { label: 'History', to: '/history' },\n ];\n\n export default function Example() {\n return (\n <>\n \n \n )\n }", "import { Breadcrumbs } from '@imj_media/ui/Breadcrumbs';\n import { Link } from '@react-router';\n \n const items = [\n { label: 'Home', to: '/' },\n { label: 'About', to: '/about' },\n { label: 'Contact', to: '/contact' },\n { label: 'Gallery', to: '/gallery' },\n { label: 'Blog', to: '/blog' },\n { label: 'History', to: '/history' },\n ];\n\n export default function Example() {\n return (\n <>\n \n \n )\n }" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "items": { "name": "items", "type": "BreadcrumbItem[]", "required": true }, "LinkComponent": { "name": "LinkComponent", "type": "React.ElementType", "required": false } } } } ] }, { "id": "Button", "path": "src/modules/Button", "legacy": false, "compositionType": 1, "exports": [ { "name": "Button", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Button permite a los usuarios realizar acciones y tomar decisiones con un solo toque.", "jsdoc": "Button - Componente de botón versátil y configurable\nComponente wrapper que proporciona una API simplificada sobre InnerButton.\nSoporta múltiples temas, colores, tamaños, iconos, badges y tooltips.", "readme": "# Button Component\n\nComponente de botón versátil y configurable con múltiples variantes, tamaños, colores y funcionalidades adicionales.\n\n## Estructura\n\n```\nButton/\n├── components/\n│ └── organisms/\n│ └── Button.tsx # Componente principal\n├── stories/\n│ └── Button.stories.tsx # Storybook stories\n└── index.tsx # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Button } from '@imj_media/ui';\n\n// Botón simple\n\n\n// Botón con icono\n\n\n// Botón deshabilitado\n\n```\n\n## Props Principales\n\n### Tamaño y Estilo\n\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón (default: `'sm'`)\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón (default: `'primary'`)\n- `fullWidth?: boolean` - Si es true, ocupa todo el ancho disponible (default: `false`)\n- `rounded?: boolean` - Si es true, bordes redondeados (default: `false`)\n\n### Contenido\n\n- `children?: React.ReactNode` - Contenido del botón\n- `icon?: IconType | AnyIconDefinition` - Icono principal del botón\n- `leftSlot?: React.ReactNode` - Slot izquierdo personalizado\n- `rightSlot?: React.ReactNode` - Slot derecho personalizado\n\n### Funcionalidad\n\n- `onClick?: (e: React.MouseEvent) => void` - Callback al hacer clic\n- `disabled?: boolean` - Si es true, el botón está deshabilitado\n- `clickable?: boolean` - Si es true, el botón es clickeable (default: `true`)\n- `link?: string` - URL para convertir el botón en enlace\n- `target?: '_self' | '_blank' | '_parent' | '_top'` - Target para enlaces (default: `'_self'`)\n\n### Badge\n\n- `badgeColor?: BadgeColor` - Color del badge\n- `badgeLabel?: string` - Texto del badge\n- `badgeTheme?: BadgeTheme` - Tema del badge\n- `badgeSize?: BadgeSize` - Tamaño del badge\n- `badgeIcon?: IconType", "confidence": "high" }, "examples": [ "import { Button } from '@imj_media/ui';\n\n export default function Example() {\n return (\n <>\n \n \n \n \n \n \n )\n }", "import { Button } from '@imj_media/ui';\n\n export default function Example() {\n return (\n <>\n \n \n \n \n \n \n )\n }", "import { Button } from '@imj_media/ui';\nimport { faUser, faImage } from '@fortawesome/pro-solid-svg-icons';\n\nexport default function FullWidthSlotsExample() {\n return (\n
\n \n Continuar\n \n
\n );\n}", "import { Button } from '@imj_media/ui';\n\n export default function Example() {\n return (\n <>\n \n \n \n \n \n )\n }", "import { Button } from '@imj_media/ui';\n\n export default function Example() {\n return (\n <>\n \n \n \n \n \n )\n }" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "variant": { "name": "variant", "type": "'button' | 'text' | 'outlined'", "required": false } } } } ], "standaloneSnippet": "import React from 'react';\n\nconst colorMap = {\n primary: {\n solid: { bg: 'rgb(54, 89, 194)', text: 'rgb(255, 255, 255)', hover: 'rgb(51, 82, 176)', pressed: 'rgb(46, 74, 161)', border: 'transparent' },\n outlined: { bg: 'transparent', text: 'rgb(54, 89, 194)', hover: 'rgb(51, 82, 176)', pressed: 'rgb(46, 74, 161)', border: 'rgb(54, 89, 194)' },\n text: { bg: 'transparent', text: 'rgb(54, 89, 194)', hover: 'rgb(51, 82, 176)', pressed: 'rgb(46, 74, 161)', border: 'transparent' },\n ghost: { bg: 'transparent', text: 'rgb(54, 89, 194)', hover: 'rgba(0,0,0,0.04)', pressed: 'rgba(0,0,0,0.08)', border: 'transparent' },\n },\n secondary: {\n solid: { bg: 'rgb(240, 69, 69)', text: 'rgb(255, 255, 255)', hover: 'rgb(212, 61, 61)', pressed: 'rgb(184, 51, 51)', border: 'transparent' },\n outlined: { bg: 'transparent', text: 'rgb(240, 69, 69)', hover: 'rgb(212, 61, 61)', pressed: 'rgb(184, 51, 51)', border: 'rgb(240, 69, 69)' },\n text: { bg: 'transparent', text: 'rgb(240, 69, 69)', hover: 'rgb(212, 61, 61)', pressed: 'rgb(184, 51, 51)', border: 'transparent' },\n ghost: { bg: 'transparent', text: 'rgb(240, 69, 69)', hover: 'rgba(0,0,0,0.04)', pressed: 'rgba(0,0,0,0.08)', border: 'transparent' },\n },\n tertiary: {\n solid: { bg: 'rgb(33, 196, 94)', text: 'rgb(255, 255, 255)', hover: 'rgb(31, 181, 87)', pressed: 'rgb(28, 163, 79)', border: 'transparent' },\n outlined: { bg: 'transparent', text: 'rgb(33, 196, 94)', hover: 'rgb(31, 181, 87)', pressed: 'rgb(28, 163, 79)', border: 'rgb(33, 196, 94)' },\n text: { bg: 'transparent', text: 'rgb(33, 196, 94)', hover: 'rgb(31, 181, 87)', pressed: 'rgb(28, 163, 79)', border: 'transparent' },\n ghost: { bg: 'transparent', text: 'rgb(33, 196, 94)', hover: 'rgba(0,0,0,0.04)', pressed: 'rgba(0,0,0,0.08)', border: 'transparent' },\n },\n destructive: {\n solid: { bg: 'rgb(235, 179, 8)', text: 'rgb(255, 255, 255)', hover: 'rgb(209, 158, 8)', pressed: 'rgb(181, 140, 5)', border: 'transparent' },\n outlined: { bg: 'transparent', text: 'rgb(235, 179, 8)', hover: 'rgb(209, 158, 8)', pressed: 'rgb(181, 140, 5)', border: 'rgb(235, 179, 8)' },\n text: { bg: 'transparent', text: 'rgb(235, 179, 8)', hover: 'rgb(209, 158, 8)', pressed: 'rgb(181, 140, 5)', border: 'transparent' },\n ghost: { bg: 'transparent', text: 'rgb(235, 179, 8)', hover: 'rgba(0,0,0,0.04)', pressed: 'rgba(0,0,0,0.08)', border: 'transparent' },\n },\n};\n\nconst sizeMap = {\n xs: { padding: '4px 2px', fontSize: '12px' },\n sm: { padding: '2px 12px', fontSize: '14px' },\n md: { padding: '10px 4px', fontSize: '16px' },\n lg: { padding: '12px 6px', fontSize: '18px' },\n};\n\nexport function Button({\n children,\n color = 'primary',\n size = 'sm',\n theme = 'solid',\n disabled = false,\n fullWidth = false,\n rounded = false,\n onClick,\n}: {\n children: React.ReactNode;\n color?: keyof typeof colorMap;\n size?: keyof typeof sizeMap;\n theme?: 'solid' | 'outlined' | 'text' | 'ghost';\n disabled?: boolean;\n fullWidth?: boolean;\n rounded?: boolean;\n onClick?: () => void;\n}) {\n const c = colorMap[color][theme];\n const s = sizeMap[size];\n const [hovered, setHovered] = React.useState(false);\n const [pressed, setPressed] = React.useState(false);\n\n const bgColor = disabled ? c.bg : pressed ? (theme === 'solid' ? c.pressed : 'rgba(0,0,0,0.06)') : hovered ? (theme === 'solid' ? c.hover : 'rgba(0,0,0,0.03)') : c.bg;\n const textColor = disabled ? c.text : hovered && theme !== 'solid' ? c.hover : c.text;\n\n return (\n setHovered(true)}\n onMouseLeave={() => { setHovered(false); setPressed(false); }}\n onMouseDown={() => setPressed(true)}\n onMouseUp={() => setPressed(false)}\n style={{\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: s.padding,\n fontSize: s.fontSize,\n fontWeight: '600',\n fontFamily: 'inherit',\n lineHeight: '1.25',\n borderRadius: rounded ? '9999px' : '8px',\n border: theme === 'outlined' ? `1px solid ${c.border}` : 'none',\n backgroundColor: bgColor,\n color: textColor,\n cursor: disabled ? 'not-allowed' : 'pointer',\n opacity: disabled ? 0.5 : 1,\n width: fullWidth ? '100%' : 'auto',\n transition: 'background-color 150ms, color 150ms',\n boxSizing: 'border-box',\n }}\n >\n {children}\n \n );\n}\n" }, { "id": "ButtonGroup", "path": "src/modules/ButtonGroup", "legacy": false, "compositionType": 1, "exports": [ { "name": "ButtonGroup", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente ButtonGroup permite agrupar múltiples botones con bordes redondeados en los extremos y botones unidos en el centro.", "confidence": "medium" }, "examples": [ "import { ButtonGroup } from '@/modules/ButtonGroup';\n import { Button } from '@/modules/Button';\n\n export default function Example() {\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n }", "\n \n \n \n \n \n \n \n \n \n ", "\n \n \n \n \n \n \n \n \n \n ", "\n \n \n \n \n \n \n \n \n ", "\n \n \n \n \n \n \n \n \n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "className": { "name": "className", "type": "string", "required": false }, "theme": { "name": "theme", "type": "ButtonTheme", "required": false }, "color": { "name": "color", "type": "ButtonColors", "required": false }, "size": { "name": "size", "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'", "required": false } } } } ] }, { "id": "Cards", "path": "src/modules/Cards", "legacy": false, "compositionType": 1, "exports": [ { "name": "Cards", "kind": "component", "description": { "primary": "jsdoc", "confidence": "low" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "className": { "name": "className", "type": "string", "required": false }, "full": { "name": "full", "type": "boolean", "required": false }, "fullWidth": { "name": "fullWidth", "type": "boolean", "required": false }, "fullHeight": { "name": "fullHeight", "type": "boolean", "required": false }, "rounded": { "name": "rounded", "type": "boolean", "required": false }, "padding": { "name": "padding", "type": "boolean", "required": false }, "gap": { "name": "gap", "type": "boolean", "required": false }, "bordered": { "name": "bordered", "type": "boolean", "required": false, "description": "Si es `false`, no se aplican borde por defecto ni `hover:ui-border-brand` en tarjetas clicables.\n Útil en contenedores flush (p. ej. `Drawer` con `surface=\"brand\"`)." }, "active": { "name": "active", "type": "boolean", "required": false }, "onClick": { "name": "onClick", "type": "() => void", "required": false } } } } ] }, { "id": "CardsGenericas", "path": "src/modules/CardsGenericas", "legacy": false, "compositionType": 1, "exports": [ { "name": "CardsGenericas", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Chevron Font Awesome (pro-regular), centrado por el propio glifo y el flex del botón. */\nconst ChevronFa = styled(FontAwesomeIcon)<{ $open: boolean }>`\n width: 22px;\n height: 22px;\n flex-shrink: 0;\n display: block;\n margin: 0;\n padding: 0;\n color: #fff;\n transform-origin: 50% 50%;\n transition:\n transform 0.5s ease-in-out,\n color 0.3s ease;\n transform: rotate(${({ $open }) => ($open ? '180deg' : '0deg')});\n\n ${({ $open }) => css`\n @media (max-aspect-ratio: 7/10) {\n transform: rotate(${$open ? '270deg' : '90deg'});\n }\n `}\n`;\n\nconst ToggleButton = styled.button<{ $detail: string; $detailColor: string; $bg: string }>`\n position: absolute;\n right: -25px;\n width: 50px;\n height: 50px;\n background: ${({ $detail }) => $detail};\n top: 50%;\n transform: translateY(-", "confidence": "medium" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "initialView": { "name": "initialView", "type": "ReactNode", "required": false, "description": "Contenido de la cara visible (imagen o vista previa)." }, "menus": { "name": "menus", "type": "CardsGenericasMenuItem[]", "required": false, "description": "Pestañas opcionales en la zona expandida." }, "activeIndex": { "name": "activeIndex", "type": "number", "required": false, "description": "Índice de pestaña activa." }, "setActiveIndex": { "name": "setActiveIndex", "type": "(index: number) => void", "required": false, "description": "Callback al cambiar de pestaña." }, "children": { "name": "children", "type": "ReactNode", "required": false, "description": "Contenido del panel expandido." }, "openCard": { "name": "openCard", "type": "boolean", "required": false, "description": "Estado abierto/cerrado (controlado)." }, "setOpenCard": { "name": "setOpenCard", "type": "(open: boolean) => void", "required": false, "description": "Alterna apertura (controlado)." }, "colors": { "name": "colors", "type": "Partial", "required": false, "description": "Sustituye los colores por defecto del `colorMode` activo." }, "colorMode": { "name": "colorMode", "type": "'light' | 'dark'", "required": false, "description": "Tema de la tarjeta: paleta por defecto (`COLORS`) en claro u oscuro." } } } } ] }, { "id": "CardsWithAside", "path": "src/modules/CardsWithAside", "legacy": false, "compositionType": 1, "exports": [ { "name": "CardsWithAside", "kind": "component", "description": { "primary": "storybook", "storybook": "Componente CardsWithAside que muestra contenido inicial con un panel lateral deslizable que contiene tabs con iconos. Permite mostrar contenido adicional al hacer click en los iconos del panel lateral.", "confidence": "medium" }, "examples": [ "\n \n \n \n \n \n \n \n \n \n \n \n", "// Posición global de tooltips (afecta a todos los tabs)\n // default\n\n\n", "// La posición global es \"right\" (default), pero cada tab puede sobrescribirla\n\n \n ...\n \n \n \n ...\n \n \n \n ...\n \n", "// Mostrar tooltips (default)\n\n ...\n\n\n// Ocultar tooltips\n\n ...\n", "\n \n \n \n \n \n \n \n \n \n \n \n" ], "props": { "groups": { "tabContent": { "props": { "children": { "name": "children", "type": "ReactNode", "required": false, "description": "Contenido del tab" }, "id": { "name": "id", "type": "string", "required": true, "description": "ID único del tab" }, "icon": { "name": "icon", "type": "string | AnyIconDefinition", "required": false, "description": "Icono del tab (puede ser string o icono FontAwesome)" }, "tooltip": { "name": "tooltip", "type": "string", "required": false, "description": "Tooltip que se muestra al hacer hover sobre el botón del tab" }, "tooltipPosition": { "name": "tooltipPosition", "type": "TooltipPosition", "required": false, "description": "Posición del tooltip para este tab específico (sobrescribe la posición global)" }, "Component": { "name": "Component", "type": "ReactNode", "required": false, "description": "Componente personalizado a renderizar en lugar del contenido del children" }, "popup": { "name": "popup", "type": "ReactNode", "required": false, "description": "Contenido del popup. Si se proporciona, el botón del tab abre un popup con este contenido en lugar de mostrar el tab" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" }, "style": { "name": "style", "type": "React.CSSProperties", "required": false, "description": "Estilos inline adicionales" }, "key": { "name": "key", "type": "string]: unknown", "required": true } } } }, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "ReactElement[]", "required": true, "description": "Array de elementos TabContent que representan los tabs disponibles" }, "activeCard": { "name": "activeCard", "type": "string | null", "required": false, "description": "ID del tab activo actualmente. Si es null, no hay tab activo" }, "InitialContent": { "name": "InitialContent", "type": "ReactElement<", "required": false, "description": "Contenido inicial que se muestra cuando no hay tab activo" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales para el contenedor principal" }, "moreOptions": { "name": "moreOptions", "type": "boolean", "required": false, "description": "Si es true, muestra un botón de opciones adicionales en la parte superior" }, "onClickMoreOptions": { "name": "onClickMoreOptions", "type": "(e: React.MouseEvent) => void", "required": false, "description": "Handler que se ejecuta al hacer click en el botón de opciones adicionales" }, "popup": { "name": "popup", "type": "ReactNode", "required": false, "description": "Contenido del popup. Si se proporciona, el botón de opciones adicionales abre un popup con este contenido en lugar de ejecutar onClickMoreOptions" }, "width": { "name": "width", "type": "string | number", "required": false, "description": "Ancho del componente (por defecto: 377px)" }, "height": { "name": "height", "type": "string | number", "required": false, "description": "Alto del componente (por defecto: 218px)" }, "showTooltips": { "name": "showTooltips", "type": "boolean", "required": false, "description": "Si es true, muestra los tooltips en los botones de tabs. Por defecto: true" }, "tooltipPosition": { "name": "tooltipPosition", "type": "TooltipPosition", "required": false, "description": "Posición global de los tooltips para todos los tabs (puede ser sobrescrita por cada tab). Por defecto: 'right'" } } } }, { "name": "TabContent", "kind": "component", "description": { "primary": "storybook", "storybook": "Componente CardsWithAside que muestra contenido inicial con un panel lateral deslizable que contiene tabs con iconos. Permite mostrar contenido adicional al hacer click en los iconos del panel lateral.", "jsdoc": "Componente TabContent para usar dentro de CardsWithAside", "confidence": "high" }, "examples": [ "\n \n \n \n \n \n \n \n \n \n \n \n", "// Posición global de tooltips (afecta a todos los tabs)\n // default\n\n\n", "// La posición global es \"right\" (default), pero cada tab puede sobrescribirla\n\n \n ...\n \n \n \n ...\n \n \n \n ...\n \n", "// Mostrar tooltips (default)\n\n ...\n\n\n// Ocultar tooltips\n\n ...\n", "\n \n \n \n \n \n \n \n \n \n \n \n" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "ReactElement[]", "required": true, "description": "Array de elementos TabContent que representan los tabs disponibles" }, "activeCard": { "name": "activeCard", "type": "string | null", "required": false, "description": "ID del tab activo actualmente. Si es null, no hay tab activo" }, "InitialContent": { "name": "InitialContent", "type": "ReactElement<", "required": false, "description": "Contenido inicial que se muestra cuando no hay tab activo" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales para el contenedor principal" }, "moreOptions": { "name": "moreOptions", "type": "boolean", "required": false, "description": "Si es true, muestra un botón de opciones adicionales en la parte superior" }, "onClickMoreOptions": { "name": "onClickMoreOptions", "type": "(e: React.MouseEvent) => void", "required": false, "description": "Handler que se ejecuta al hacer click en el botón de opciones adicionales" }, "popup": { "name": "popup", "type": "ReactNode", "required": false, "description": "Contenido del popup. Si se proporciona, el botón de opciones adicionales abre un popup con este contenido en lugar de ejecutar onClickMoreOptions" }, "width": { "name": "width", "type": "string | number", "required": false, "description": "Ancho del componente (por defecto: 377px)" }, "height": { "name": "height", "type": "string | number", "required": false, "description": "Alto del componente (por defecto: 218px)" }, "showTooltips": { "name": "showTooltips", "type": "boolean", "required": false, "description": "Si es true, muestra los tooltips en los botones de tabs. Por defecto: true" }, "tooltipPosition": { "name": "tooltipPosition", "type": "TooltipPosition", "required": false, "description": "Posición global de los tooltips para todos los tabs (puede ser sobrescrita por cada tab). Por defecto: 'right'" } } } } ] }, { "id": "CatalogCard", "path": "src/modules/CatalogCard", "legacy": false, "compositionType": 1, "exports": [ { "name": "CatalogCard", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "**CatalogCard** — tarjeta de catálogo / proveedor / usuario (API **cerrada** por props) alineada al archivo Figma\n[Cards](https://www.figma.com/design/3w0SWvV7C5tDKUybsOcgA4/Cards).\nImplementación partida en {@link CatalogCatalogCard}, {@link CatalogSupplierCard} y paneles de menú\n(`catalogCardMenuPanels`) para mantener archivos acotados.\nNo expone slots `media` / `details` / `cta` con ReactNode arbitrario: el organismo compone `Picture`,\n`Icon`, `Tooltip`, `Button`, `Badge`, `Picture`, `Popup` y `List` según props. El menú **…** es lista de acciones\n({@link CatalogCardMenuItem}); los checkboxes de `tags` van en el panel del **CTA principal** (`onPrimaryTagsSelectionChange`).\nFamilia **`user`**: mismo layout que proveedor (~270px), **sin** rating; opcional **`profile.avatarImageSrc`** (o p", "confidence": "medium" }, "examples": [], "props": { "groups": { "catalogMedia": { "props": { "imageSrc": { "name": "imageSrc", "type": "string", "required": false }, "imageAlt": { "name": "imageAlt", "type": "string", "required": false }, "showExclusiveBadge": { "name": "showExclusiveBadge", "type": "boolean", "required": false }, "indicators": { "name": "indicators", "type": "CatalogCardMediaIndicator[]", "required": false }, "hideImage": { "name": "hideImage", "type": "boolean", "required": false, "description": "Si es `true`, no se renderiza el bloque de imagen (miniatura / banda media). Útil para listados solo texto en cualquier `layout`.\n Los indicadores y el badge exclusivo asociados a la zona media no se muestran (no hay contenedor).\n Sin `optionsMenu.hidden` / `hideOptionsMenu` explícitos, el botón ⋯ del pie queda oculto por defecto; pasa `hidden: false` en `optionsMenu` para mostrarlo." }, "showAvailabilityIndicators": { "name": "showAvailabilityIndicators", "type": "boolean", "required": false } } }, "catalogContent": { "props": { "categoryLabel": { "name": "categoryLabel", "type": "string", "required": false }, "ratingValue": { "name": "ratingValue", "type": "string", "required": false }, "ratingTooltip": { "name": "ratingTooltip", "type": "string", "required": false, "description": "Texto del tooltip del bloque calificación (estrella + valor).\n Omite la prop para usar el texto por defecto del diseño.\n Pasa cadena vacía para desactivar el tooltip." }, "title": { "name": "title", "type": "string", "required": true }, "locationLabel": { "name": "locationLabel", "type": "string", "required": false }, "locationHref": { "name": "locationHref", "type": "string", "required": false } } }, "catalogTagRow": { "props": { "tags": { "name": "tags", "type": "(string | CatalogCardTag)[]", "required": false }, "primarySelectedTags": { "name": "primarySelectedTags", "type": "string[]", "required": false }, "defaultPrimarySelectedTags": { "name": "defaultPrimarySelectedTags", "type": "string[]", "required": false }, "onPrimaryTagsSelectionChange": { "name": "onPrimaryTagsSelectionChange", "type": "(", "required": false }, "selectedTags": { "name": "selectedTags", "type": "string[],", "required": true }, "context": { "name": "context", "type": "CatalogCardInteractionContext", "required": false }, "primaryTagsSelectAllLabel": { "name": "primaryTagsSelectAllLabel", "type": "string", "required": false }, "primaryTagsShowSelectAll": { "name": "primaryTagsShowSelectAll", "type": "boolean", "required": false } } }, "catalogPrimaryCta": { "props": { "hidden": { "name": "hidden", "type": "boolean", "required": false, "description": "Si es `true`, no se renderiza el CTA principal del pie (ni el ícono horizontal en layouts que lo usan).\n Útil cuando la acción principal es solo el clic en la tarjeta (`onClick`) o un enlace en el cuerpo (p. ej. lista indoor padre en wizard).\n El menú ⋯ sigue las reglas de `optionsMenu.hidden` / `media.hideImage`.\n Equivalente explícito en API agrupada: {" }, "primaryLinkHref": { "name": "primaryLinkHref", "type": "string", "required": false }, "primaryLinkTo": { "name": "primaryLinkTo", "type": "string", "required": false }, "primaryLinkLabel": { "name": "primaryLinkLabel", "type": "string", "required": false }, "primaryLinkTarget": { "name": "primaryLinkTarget", "type": "'_self' | '_blank'", "required": false }, "primaryVariant": { "name": "primaryVariant", "type": "CatalogCardPrimaryVariant", "required": false }, "primaryLabel": { "name": "primaryLabel", "type": "string", "required": false }, "primaryIcon": { "name": "primaryIcon", "type": "AnyIconDefinition", "required": false, "description": "Icono en el slot izquierdo del CTA (`Button` / `Popup`).\n Si se omite: enlace «Ver más» usa el icono por defecto del diseño; el resto usa el icono asociado a {" }, "onPrimaryClick": { "name": "onPrimaryClick", "type": "(context?: CatalogCardInteractionContext) => void", "required": false } } }, "catalogOptionsMenu": { "props": { "hidden": { "name": "hidden", "type": "boolean", "required": false, "description": "Si es `true`, no se renderiza el control ⋯ del pie (solo el CTA principal a ancho completo).\n Útil en listados de solo lectura (p. ej. mapa / wizard) sin editar.\n Si se omite y la tarjeta usa `media.hideImage`, el valor efectivo por defecto es `true` (sin ⋯); con imagen, por defecto se muestra el ⋯ cuando hay ítems o `onOptionsClick`." }, "optionsPressed": { "name": "optionsPressed", "type": "boolean", "required": false }, "onOptionsClick": { "name": "onOptionsClick", "type": "(context?: CatalogCardInteractionContext) => void", "required": false }, "optionsTooltip": { "name": "optionsTooltip", "type": "string", "required": false, "description": "Texto del tooltip del control ⋯ del pie (menú o callback).\n Omite la prop para usar el texto por defecto del diseño.\n Pasa cadena vacía para desactivar el tooltip." }, "optionsMenuItems": { "name": "optionsMenuItems", "type": "CatalogCardMenuItem[]", "required": false } } }, "catalogPrimaryPanel": { "props": { "primaryMenuItems": { "name": "primaryMenuItems", "type": "CatalogCardMenuItem[]", "required": false }, "primaryMenuFooter": { "name": "primaryMenuFooter", "type": "{", "required": false }, "label": { "name": "label", "type": "string", "required": true }, "onClick": { "name": "onClick", "type": "(footer?: { label: string }) => void", "required": false }, "primaryMenuMaxHeightClass": { "name": "primaryMenuMaxHeightClass", "type": "string", "required": false } } }, "catalogFooter": { "props": { "showPrimaryCta": { "name": "showPrimaryCta", "type": "boolean", "required": false, "description": "When `false`, the primary CTA is not rendered (footer button / horizontal icon slot), same as\n {" } } }, "supplierProfile": { "props": { "ratingValue": { "name": "ratingValue", "type": "string", "required": false }, "statusLabel": { "name": "statusLabel", "type": "string", "required": false }, "avatarInitials": { "name": "avatarInitials", "type": "string", "required": true }, "name": { "name": "name", "type": "string", "required": true }, "subtitle": { "name": "subtitle", "type": "string", "required": true } } }, "supplierContact": { "props": { "phone": { "name": "phone", "type": "CatalogSupplierContactRow | string", "required": false }, "email": { "name": "email", "type": "CatalogSupplierContactRow | string", "required": false } } }, "supplierCta": { "props": { "primaryButtonLabel": { "name": "primaryButtonLabel", "type": "string", "required": false }, "onPrimaryClick": { "name": "onPrimaryClick", "type": "(context?: CatalogCardInteractionContext) => void", "required": false } } }, "supplierOptionsMenu": { "props": { "onOptionsClick": { "name": "onOptionsClick", "type": "(context?: CatalogCardInteractionContext) => void", "required": false }, "optionsMenuItems": { "name": "optionsMenuItems", "type": "CatalogCardMenuItem[]", "required": false } } } }, "deprecatedRoot": [] } } ] }, { "id": "Checkbox", "path": "src/modules/Checkbox", "legacy": false, "compositionType": 1, "exports": [ { "name": "Checkbox", "kind": "component", "description": { "primary": "storybook", "storybook": "Componente base de checkbox basado en los tokens semánticos de Figma.\n\n### Tokens de Figma usados:\n| Token | Valor | Clase Tailwind |\n|---|---|---|\n| \\", "jsdoc": "Estado del checkbox (marcado o no) */\n checked: boolean;\n /** Estado indeterminado (parcialmente seleccionado) */\n indeterminate?: boolean;\n /** Handler cuando cambia el estado */\n onChange: (checked: boolean) => void;\n /** Si el checkbox está deshabilitado */\n disabled?: boolean;\n /** Si el checkbox tiene estado de error */\n error?: boolean;\n /** Clases CSS adicionales para el input */\n className?: string;\n /** Hace el checkbox redondo en lugar de cuadrado */\n round?: boolean;\n /** Tamaño del checkbox */\n size?: 'sm' | 'md';\n /** Nombre del input para formularios */\n name?: string;\n /** ID del input */\n id?: string;\n /** Texto del label asociado al checkbox */\n label?: string;\n /** Texto de soporte debajo del label */\n supportingText?: string;\n /** Clases CSS adici", "readme": "# Checkbox Component\n\nComponente de checkbox con soporte para estados indeterminados, labels y texto de soporte.\n\n## Uso Básico\n\n```tsx\nimport { Checkbox } from '@imj_media/ui';\n\n// Checkbox simple\n setIsChecked(checked)}\n/>\n\n// Checkbox con label\n setIsChecked(checked)}\n label=\"Acepto los términos y condiciones\"\n/>\n\n// Checkbox con texto de soporte\n setIsChecked(checked)}\n label=\"Suscribirse al newsletter\"\n supportingText=\"Recibirás actualizaciones por correo\"\n/>\n```\n\n## Props\n\n### Props Requeridos\n\n- `checked: boolean` - Estado del checkbox (marcado o no)\n- `onChange: (checked: boolean) => void` - Handler cuando cambia el estado\n\n### Props Opcionales\n\n- `indeterminate?: boolean` - Estado indeterminado (parcialmente seleccionado) (default: `false`)\n- `disabled?: boolean` - Si el checkbox está deshabilitado (default: `false`)\n- `error?: boolean` - Si el checkbox tiene estado de error (default: `false`)\n- `round?: boolean` - Hace el checkbox redondo en lugar de cuadrado (default: `false`)\n- `size?: 'sm' | 'md'` - Tamaño del checkbox (default: `'md'`)\n- `name?: string` - Nombre del input para formularios\n- `id?: string` - ID del input\n- `label?: string` - Texto del label asociado al checkbox\n- `supportingText?: string` - Texto de soporte debajo del label\n- `className?: string` - Clases CSS adicionales para el input\n- `classNameLabel?: string` - Clases CSS adicionales para el contenedor del label\n\n## Ejemplos\n\n### Checkbox con estado indeterminado\n\n```tsx\n console.log(checked)}\n label=\"Seleccionar todos\"\n/>\n```\n\n### Checkbox deshabilitado\n\n```tsx\n {}} label=\"Opción deshabilitada\" />\n```\n\n### Checkbox con error\n\n```tsx\n\n\n// Checked: bg-fill-brand + border-transparent (sin borde visible)\n\n\n// Indeterminate: bg-fill-brand + minus SVG\n {}} />\n\n// Disabled: bg-fill-disabled + border-disabled / bg-fill-brand-disabled\n {}} disabled />\n {}} disabled />", "// Error unchecked: bg-fill + border-danger\n\n\n// Error checked: bg-fill-brand + border-danger\n\n\n// Error indeterminate: bg-fill-brand + border-danger\n {}} error />", "// Cuadrado: radius/surface/forms = 2px\n\n\n// Redondo: rounded-full\n", "\n", "// Con label y supporting text\n\n\n// Con error\n\n\n// Disabled\n" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "checked": { "name": "checked", "type": "boolean", "required": true, "description": "Estado del checkbox (marcado o no)" }, "indeterminate": { "name": "indeterminate", "type": "boolean", "required": false, "description": "Estado indeterminado (parcialmente seleccionado)" }, "onChange": { "name": "onChange", "type": "(checked: boolean) => void", "required": true, "description": "Handler cuando cambia el estado" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Si el checkbox está deshabilitado" }, "error": { "name": "error", "type": "boolean", "required": false, "description": "Si el checkbox tiene estado de error" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales para el input" }, "round": { "name": "round", "type": "boolean", "required": false, "description": "Hace el checkbox redondo en lugar de cuadrado" }, "size": { "name": "size", "type": "'sm' | 'md'", "required": false, "description": "Tamaño del checkbox" }, "name": { "name": "name", "type": "string", "required": false, "description": "Nombre del input para formularios" }, "id": { "name": "id", "type": "string", "required": false, "description": "ID del input" }, "label": { "name": "label", "type": "string", "required": false, "description": "Texto del label asociado al checkbox" }, "supportingText": { "name": "supportingText", "type": "string", "required": false, "description": "Texto de soporte debajo del label" }, "classNameLabel": { "name": "classNameLabel", "type": "string", "required": false, "description": "Clases CSS adicionales para el contenedor del label" } } } } ] }, { "id": "DatePicker", "path": "src/modules/DatePicker", "legacy": false, "compositionType": 1, "exports": [ { "name": "DatePicker", "kind": "component", "description": { "primary": "storybook", "storybook": "## DatePicker - Selector de Fechas\n\nUn componente completo y flexible para seleccionar fechas individuales o rangos de fechas.\n\n### Características principales:\n- **Modo único**: Selección de una fecha específica\n- **Modo rango**: Selección de un rango de fechas (inicio y fin)\n- **Vistas múltiples**: Días, meses y años\n- **Internacionalización**: Soporte para diferentes idiomas\n- **Personalización**: Estilos y comportamientos configurables\n- **Validación**: Fechas mínimas y máximas\n- **Modos de control**: Controlado y no controlado\n\n### Casos de uso comunes:\n- Formularios de reservas\n- Filtros de fechas\n- Calendarios de eventos\n- Selectores de período", "readme": "# DatePicker - Estructura Modular\n\nEste módulo contiene una implementación modular del DatePicker con componentes atómicos, moleculares y orgánicos, junto con hooks personalizados y tipos TypeScript.\n\n## Estructura de Carpetas\n\n```\nDatePicker/\n├── atoms/ # Componentes atómicos (más básicos)\n├── molecules/ # Componentes moleculares (combinan átomos)\n├── organisms/ # Componentes orgánicos (combinan moléculas)\n├── types/ # Definiciones de tipos TypeScript\n├── hooks/ # Hooks personalizados\n├── stories/ # Storybook stories\n└── index.tsx # Componente principal (legacy)\n```\n\n## Componentes Atómicos (`atoms/`)\n\nComponentes más básicos y reutilizables:\n\n- **Day**: Representa un día individual en el calendario\n- **Month**: Representa un mes en la vista de meses\n- **Year**: Representa un año en la vista de años\n- **WeekDay**: Representa los días de la semana\n- **NavigationButton**: Botón de navegación (anterior/siguiente)\n\n## Componentes Moleculares (`molecules/`)\n\nCombinan componentes atómicos para crear funcionalidades más complejas:\n\n- **CalendarHeader**: Header del calendario con navegación\n- **CalendarGrid**: Cuadrícula de días del calendario\n- **MonthGrid**: Cuadrícula de meses\n- **YearGrid**: Cuadrícula de años\n- **DateInput**: Input para la fecha\n\n## Componentes Orgánicos (`organisms/`)\n\nCombinan componentes moleculares para crear funcionalidades completas:\n\n- **Calendar**: Calendario completo con todas las vistas\n- **DatePickerPortal**: Portal del DatePicker con manejo de posicionamiento\n\n## Hooks (`hooks/`)\n\nHooks personalizados para la lógica del DatePicker:\n\n- **useDatePicker**: Hook principal que maneja el estado del DatePicker\n- **useDateRange**: Hook para manejar rangos de fechas\n- **useCalendar**: Hook para la lógica del calendario\n- **useDateInput**: Hook para el manejo del input\n- **usePortal**: Hook para el manejo del portal\n\n## Tipos (`types/`)\n\nDefiniciones de tipos TypeScript organizadas por funcion", "confidence": "high" }, "examples": [ "import { DatePicker } from '@imj_media/ui';\n\n export default function Example() {\n return \n }", "import { DatePicker } from '@imj_media/ui';\n import { useState } from 'react';\n\n export default function Example() {\n const [selectedDate, setSelectedDate] = useState(new Date('2024-07-15'));\n\n return (\n \n );\n }", "import { DatePicker } from '@imj_media/ui';\n\n export default function Example() {\n return (\n \n )\n }", "// Caso que antes fallaba (desfase 1 día en zonas UTC−N):\n// selectedRange={{ start: new Date(\"2026-02-01T00:00:00.000Z\"), end: new Date(\"2026-02-28T00:00:00.000Z\") }}\n// Sin normalización: en México (UTC-6) se veía 31/01 - 27/02.\n// Con normalización interna (toLocalDateOnly): se muestra 01/02 - 28/02.", "import { DatePicker } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n \n )\n}" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "size": { "name": "size", "type": "InputSize", "required": false }, "mode": { "name": "mode", "type": "'single' | 'range'", "required": false }, "selectedDate": { "name": "selectedDate", "type": "Date | null", "required": false }, "selectedRange": { "name": "selectedRange", "type": "DateRange", "required": false }, "onDateChange": { "name": "onDateChange", "type": "(date: Date | null) => void", "required": false }, "onRangeChange": { "name": "onRangeChange", "type": "(range: DateRange) => void", "required": false }, "minDate": { "name": "minDate", "type": "Date", "required": false }, "maxDate": { "name": "maxDate", "type": "Date", "required": false }, "locale": { "name": "locale", "type": "string", "required": false }, "weekDays": { "name": "weekDays", "type": "string[]", "required": false }, "monthNames": { "name": "monthNames", "type": "string[]", "required": false }, "startOfWeek": { "name": "startOfWeek", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "inputClassName": { "name": "inputClassName", "type": "string", "required": false }, "headerClassName": { "name": "headerClassName", "type": "string", "required": false }, "dayClassName": { "name": "dayClassName", "type": "| string", "required": false }, "day": { "name": "day", "type": "number", "required": true }, "state": { "name": "state", "type": "{", "required": true }, "isSelected": { "name": "isSelected", "type": "boolean", "required": true }, "isInRange": { "name": "isInRange", "type": "boolean", "required": true }, "isStart": { "name": "isStart", "type": "boolean", "required": true }, "isEnd": { "name": "isEnd", "type": "boolean", "required": true }, "isDisabled": { "name": "isDisabled", "type": "boolean", "required": true }, "isToday": { "name": "isToday", "type": "boolean", "required": true }, "monthClassName": { "name": "monthClassName", "type": "string | ((month: number) => string)", "required": false }, "yearClassName": { "name": "yearClassName", "type": "string | ((year: number) => string)", "required": false }, "disabledDayClassName": { "name": "disabledDayClassName", "type": "string", "required": false }, "rangeClassName": { "name": "rangeClassName", "type": "string", "required": false }, "rangeStartClassName": { "name": "rangeStartClassName", "type": "string", "required": false }, "rangeEndClassName": { "name": "rangeEndClassName", "type": "string", "required": false }, "todayClassName": { "name": "todayClassName", "type": "string", "required": false }, "showWeekNumbers": { "name": "showWeekNumbers", "type": "boolean", "required": false }, "yearRange": { "name": "yearRange", "type": "number", "required": false }, "initialViewMode": { "name": "initialViewMode", "type": "ViewMode", "required": false }, "closeOnSelect": { "name": "closeOnSelect", "type": "boolean", "required": false }, "autoCloseRange": { "name": "autoCloseRange", "type": "boolean", "required": false }, "placeholder": { "name": "placeholder", "type": "string", "required": false }, "format": { "name": "format", "type": "string", "required": false }, "calendarsCount": { "name": "calendarsCount", "type": "number", "required": false }, "label": { "name": "label", "type": "string", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Si es true, el control no es interactivo: no abre el calendario al pulsar el campo ni el icono." }, "renderHeader": { "name": "renderHeader", "type": "(props: {", "required": false }, "currentDate": { "name": "currentDate", "type": "Date", "required": true }, "viewMode": { "name": "viewMode", "type": "ViewMode", "required": true }, "toggleViewMode": { "name": "toggleViewMode", "type": "() => void", "required": true }, "navigate": { "name": "navigate", "type": "(direction: 'prev' | 'next') => void", "required": true }, "renderDay": { "name": "renderDay", "type": "(props: {", "required": false }, "date": { "name": "date", "type": "Date", "required": true } } } } ] }, { "id": "Drawer", "path": "src/modules/Drawer", "legacy": false, "compositionType": 1, "exports": [ { "name": "Drawer", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Drawer permite mostrar contenido en un panel lateral deslizable con diferentes tamaños, posiciones y configuraciones de botones.", "jsdoc": "DrawerFooter - Subcomponente de footer para Drawer\n@internal\n/\nconst DrawerFooter = ({ children, className }: DrawerFooterProps) => {\n return (\n \n {children}\n \n );\n};\n\n// Nombre para identificar el componente\nDrawerFooter.displayName = 'DrawerFooter';\n\n// Función auxiliar para extraer el footer de los children\nconst extractFooterFromChildren = (\n children: ReactNode\n): { content: ReactNode[]; footer: ReactElement | null } => {\n const content: ReactNode[] = [];\n let footer: ReactElement | null = null;\n\n Children.forEach(children, (child) => {\n if (\n isValidElement(child) &&\n (child.type as { displayName?: string })?.displayName === 'Draw", "confidence": "high" }, "examples": [ "import { Drawer } from '@/modules/Drawer';\nimport { useState } from 'react';\n\nexport default function Example() {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n setIsOpen(false)}\n title=\"Drawer Básico\"\n size=\"md\"\n position=\"right\"\n >\n

Contenido del drawer aquí

\n \n )\n}", "\n …\n", "... // 280px\n... // 400px (default)\n... // 560px", "...\n... // default", "// Max-width personalizado\n...\n...\n\n// Sin max-width (full width)\n...\n\n// Adaptar al contenido interno ✨\n\n
\n Contenido con ancho definido\n
\n\n\n// Max-width por defecto basado en size\n... // max-width: 400px" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "isOpen": { "name": "isOpen", "type": "boolean", "required": true }, "onClose": { "name": "onClose", "type": "() => void", "required": true }, "title": { "name": "title", "type": "string", "required": false }, "titleIcon": { "name": "titleIcon", "type": "IconType", "required": false }, "titleIconDuotonePrimary": { "name": "titleIconDuotonePrimary", "type": "IconFontColor", "required": false }, "titleIconDuotoneSecondary": { "name": "titleIconDuotoneSecondary", "type": "IconFontColor", "required": false }, "titleIconDuotoneOpacityPrimary": { "name": "titleIconDuotoneOpacityPrimary", "type": "number", "required": false }, "titleIconDuotoneOpacitySecondary": { "name": "titleIconDuotoneOpacitySecondary", "type": "number", "required": false }, "size": { "name": "size", "type": "'sm' | 'md' | 'lg' | 'xl'", "required": false, "description": "`xl` (800px) alineado a layouts anchos (p. ej. implementación campaña)." }, "children": { "name": "children", "type": "React.ReactNode", "required": true }, "closeButton": { "name": "closeButton", "type": "ModalCloseButtonConfig", "required": false, "description": "Botón de cerrar (X): tooltip opcional. Misma forma que `Modal` (`ModalCloseButtonConfig`).\n Si `tooltip` es `true` y no pasas `tooltipPosition`, el tooltip se muestra a la izquierda del botón." }, "showCloseButton": { "name": "showCloseButton", "type": "boolean", "required": false }, "disableEscapeClose": { "name": "disableEscapeClose", "type": "boolean", "required": false }, "disableOutsideTab": { "name": "disableOutsideTab", "type": "boolean", "required": false }, "position": { "name": "position", "type": "'left' | 'right'", "required": false }, "surface": { "name": "surface", "type": "'default' | 'brand'", "required": false, "description": "Superficie del panel: `default` (gris secundario) o `brand` (relleno brand en panel y Card).\n En `brand`: sin borde bajo el header, sin `Card.Separator` antes del footer y `Card` interna con `bordered={false}`." }, "className": { "name": "className", "type": "string", "required": false }, "scrollable": { "name": "scrollable", "type": "boolean", "required": false }, "cancelButtonText": { "name": "cancelButtonText", "type": "string", "required": false }, "successButtonText": { "name": "successButtonText", "type": "string", "required": false }, "onCancel": { "name": "onCancel", "type": "() => void", "required": false }, "onSuccess": { "name": "onSuccess", "type": "() => void", "required": false }, "showCancelButton": { "name": "showCancelButton", "type": "boolean", "required": false }, "showSuccessButton": { "name": "showSuccessButton", "type": "boolean", "required": false }, "closeAtSuccess": { "name": "closeAtSuccess", "type": "boolean", "required": false }, "closeAtCancel": { "name": "closeAtCancel", "type": "boolean", "required": false }, "disabledSuccessButton": { "name": "disabledSuccessButton", "type": "boolean", "required": false }, "disabledCancelButton": { "name": "disabledCancelButton", "type": "boolean", "required": false }, "maxWidth": { "name": "maxWidth", "type": "string", "required": false, "description": "Ancho máximo personalizado del drawer (ej: '500px', '50%', '30rem'). Por defecto usa el size." }, "fullWidth": { "name": "fullWidth", "type": "boolean", "required": false, "description": "Si es true, el drawer ocupará todo el ancho disponible sin max-width" }, "fitContent": { "name": "fitContent", "type": "boolean", "required": false, "description": "Si es true, el drawer se adaptará al ancho de su contenido interno" }, "tabs": { "name": "tabs", "type": "SwitchOption[]", "required": false, "description": "Opciones de tabs para mostrar en el header del drawer" }, "defaultValueTab": { "name": "defaultValueTab", "type": "string", "required": false, "description": "Valor por defecto del tab seleccionado" }, "onChangeTab": { "name": "onChangeTab", "type": "(value: string) => void", "required": false, "description": "Callback cuando cambia el tab seleccionado" }, "currentTab": { "name": "currentTab", "type": "string", "required": false, "description": "Tab actualmente seleccionado (controlado)" }, "tabsOverHeader": { "name": "tabsOverHeader", "type": "boolean", "required": false, "description": "Si es true, los tabs se muestran centrados entre el título y el botón de cerrar. Si es false, se muestran debajo del título en una fila completa. Default: false" } } } } ] }, { "id": "Dropdown", "path": "src/modules/Dropdown", "legacy": false, "compositionType": 1, "exports": [ { "name": "Dropdown", "kind": "component", "description": { "primary": "storybook", "storybook": "**API agrupada:**", "jsdoc": "Dropdown - Componente de dropdown/select versátil y configurable\nComponente de dropdown que soporta búsqueda, selección múltiple, diferentes variantes de lista,\nestados controlados/no controlados, y múltiples tipos de opciones (default, checkbox, radio, toggle, user).\n**Ancho del menú:** el panel de la lista usa por defecto el ancho del trigger como `width` y\n`maxWidth` (no supera el campo). `popover.fullWidth` por defecto es `true` (campo a ancho completo\ndel contenedor).\n**Orden en lista:** por defecto (`list.pinSelectedFirst`), la opción seleccionada aparece arriba\nen el panel (salvo listas con `isGroupTitle`). Desactivar con `list={{ pinSelectedFirst: false }}`.", "confidence": "high" }, "examples": [ "import { Dropdown } from '@/modules/Dropdown';\n import { useState } from 'react';\n\n export default function Example() {\n const [value, setValue] = useState('1');\n\n return (\n \n )\n }", "const [value, setValue] = useState('1');\n\n ", "const [value, setValue] = useState(-1);\n\n ", "const [value1, setValue1] = useState('');\n const [value2, setValue2] = useState('');\n const [value3, setValue3] = useState('');\n\n const handleValue1Change = createSingleValueHandler(setValue1);\n const handleValue2Change = createSingleValueHandler(setValue2);\n const handleValue3Change = createSingleValueHandler(setValue3);\n\n
\n \n \n \n
", "const [selectedUser, setSelectedUser] = useState('USR001');\n const [selectedProduct, setSelectedProduct] = useState('PROD-A-001');\n\n const handleUserChange = createSingleValueHandler(setSelectedUser);\n const handleProductChange = createSingleValueHandler(setSelectedProduct);\n\n \n\n ", "", "", "", "", "const [toggles, setToggles] = useState({\n darkMode: false,\n notifications: true,\n sounds: false,\n autoSave: true,\n});\n\nconst toggleOptions = [\n {\n label: 'Modo oscuro',\n value: 'darkMode',\n description: 'Activar el tema oscuro',\n checked: toggles.darkMode,\n },\n {\n label: 'Notificaciones',\n value: 'notifications',\n description: 'Recibir notificaciones push',\n checked: toggles.notifications,\n },\n];\n\n {\n setToggles((prev) => ({ ...prev, [option.value as string]: checked }));\n },\n }}\n/>", "import { useState } from 'react';\n\n export default function BasicMultipleSelection() {\n const [selectedValues, setSelectedValues] = useState([]);\n \n const handleValueChange = (value) => {\n if (Array.isArray(value)) {\n setSelectedValues(value);\n }\n };\n\n return (\n \n );\n }", "", "import { faShapes } from '@fortawesome/pro-regular-svg-icons';\n import { Dropdown } from '@/modules/Dropdown';\n\n { /* ... */ } }}\n />", "import { useState } from 'react';\n import { Dropdown } from '@/modules/Dropdown';\n\n const options = [\n { label: 'Bonnie Green', value: '1', avatarUrl: 'https://i.pravatar.cc/32?img=5' },\n // …\n ];\n\n export default function Example() {\n const [selectedValues, setSelectedValues] = useState(['1', '2', '3', '4', '5', '6']);\n\n return (\n Array.isArray(v) && setSelectedValues(v) }}\n multi={{\n multiple: true,\n selectionSummary: 'tags',\n tagsOverflow: 'single-line',\n tagsOverflowPopoverTitle: 'Tipos de medio',\n }}\n checkbox={{\n withCheckbox: true,\n checkboxSelectionTone: 'subtle',\n checkboxPosition: 'end',\n checkboxListDensity: 'compact',\n }}\n menuSearch={{ searchable: true, searchPlaceholder: 'Buscar...' }}\n />\n );\n }", " Array.isArray(v) && setSelectedValues(v) }}\n multi={{\n multiple: true,\n selectionSummary: 'tags',\n tagsOverflow: 'single-line',\n tagsOverflowPopoverTitle: 'Plazas seleccionadas',\n }}\n list={{\n listVariant: 'search-multi-checkbox',\n searchMultiCheckbox: {\n search: { placeholder: 'Buscar plaza…', show: true },\n header: { id: 'all-plazas', label: 'Todas las plazas' },\n showClearSelection: true,\n },\n }}\n menuSearch={{ searchable: false }}\n />\n {/* Sin buscador en lista: searchMultiCheckbox.search.show: false */}\n {/* Sin botón «Limpiar selección»: searchMultiCheckbox.showClearSelection: false */}" ], "props": { "groups": { "searchMultiCheckboxSearch": { "props": { "show": { "name": "show", "type": "boolean", "required": false, "description": "Muestra el buscador dentro de la lista." }, "placeholder": { "name": "placeholder", "type": "string", "required": false, "description": "Placeholder del campo en la lista; si no se define, se usa `menuSearch.searchPlaceholder` o la raíz." } } }, "searchMultiCheckboxHeader": { "props": { "id": { "name": "id", "type": "string", "required": true }, "label": { "name": "label", "type": "string", "required": true } } }, "field": { "props": { "label": { "name": "label", "type": "string", "required": false }, "error": { "name": "error", "type": "string", "required": false }, "helperText": { "name": "helperText", "type": "string", "required": false }, "placeholder": { "name": "placeholder", "type": "string", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "size": { "name": "size", "type": "InputSize", "required": false }, "color": { "name": "color", "type": "Colors", "required": false }, "caret": { "name": "caret", "type": "boolean", "required": false } } }, "hint": { "props": { "infoTooltip": { "name": "infoTooltip", "type": "string", "required": false }, "tooltipProps": { "name": "tooltipProps", "type": "ButtonTooltipConfig", "required": false } } }, "slots": { "props": { "leftSlot": { "name": "leftSlot", "type": "VisualSlotType", "required": false }, "rightSlot": { "name": "rightSlot", "type": "VisualSlotType", "required": false }, "pill": { "name": "pill", "type": "PillSize", "required": false } } }, "items": { "props": { "options": { "name": "options", "type": "DropdownOption[]", "required": false }, "valueName": { "name": "valueName", "type": "string", "required": false }, "idName": { "name": "idName", "type": "string", "required": false }, "defaultOptionSelected": { "name": "defaultOptionSelected", "type": "boolean", "required": false } } }, "values": { "props": { "value": { "name": "value", "type": "string | number | (string | number)[]", "required": false }, "defaultValue": { "name": "defaultValue", "type": "string | number | (string | number)[]", "required": false }, "hasCurrent": { "name": "hasCurrent", "type": "boolean", "required": false } } }, "menuSearch": { "props": { "searchable": { "name": "searchable", "type": "boolean", "required": false }, "searchPlaceholder": { "name": "searchPlaceholder", "type": "string", "required": false }, "noResultsText": { "name": "noResultsText", "type": "string", "required": false }, "noResultsDescription": { "name": "noResultsDescription", "type": "string", "required": false } } }, "multi": { "props": { "multiple": { "name": "multiple", "type": "boolean", "required": false }, "maxSelectedItems": { "name": "maxSelectedItems", "type": "number", "required": false }, "selectionSummary": { "name": "selectionSummary", "type": "DropdownSelectionSummary", "required": false, "description": "Cómo se muestra la selección múltiple en el campo (`tags` = chips en el trigger; `count` / `text` = solo resumen en el input)." }, "selectedItemsDisplay": { "name": "selectedItemsDisplay", "type": "DropdownSelectionSummary", "required": false }, "tagsOverflow": { "name": "tagsOverflow", "type": "DropdownTagsOverflow", "required": false }, "tagsOverflowPopoverPlacement": { "name": "tagsOverflowPopoverPlacement", "type": "'top' | 'bottom'", "required": false }, "tagsOverflowPopoverZIndex": { "name": "tagsOverflowPopoverZIndex", "type": "number", "required": false }, "tagsOverflowPopoverTitle": { "name": "tagsOverflowPopoverTitle", "type": "string", "required": false }, "preventDeselectFromOptionsList": { "name": "preventDeselectFromOptionsList", "type": "boolean", "required": false }, "showTriggerClearButton": { "name": "showTriggerClearButton", "type": "boolean", "required": false } } }, "popover": { "props": { "maxHeight": { "name": "maxHeight", "type": "string", "required": false }, "closeOnClickOutside": { "name": "closeOnClickOutside", "type": "boolean", "required": false }, "dropdownId": { "name": "dropdownId", "type": "string", "required": false }, "fullWidth": { "name": "fullWidth", "type": "boolean", "required": false, "description": "Ancho del campo respecto al contenedor: `true` (por defecto) = `ui-w-full` en el trigger;\n `false` = ancho según contenido (`ui-w-fit` en el `Input`), útil en layouts en línea.\n El panel de la lista sigue midiéndose sobre el trigger y no lo supera en ancho." }, "auto": { "name": "auto", "type": "boolean", "required": false }, "absolute": { "name": "absolute", "type": "boolean", "required": false }, "popoverZIndex": { "name": "popoverZIndex", "type": "number", "required": false }, "footer": { "name": "footer", "type": "boolean", "required": false } } }, "checkbox": { "props": { "withCheckbox": { "name": "withCheckbox", "type": "boolean", "required": false }, "checkboxSelectionTone": { "name": "checkboxSelectionTone", "type": "ListItemCheckboxSelectionTone", "required": false }, "checkboxPosition": { "name": "checkboxPosition", "type": "'start' | 'end'", "required": false }, "checkboxListDensity": { "name": "checkboxListDensity", "type": "'default' | 'compact'", "required": false } } }, "listBlock": { "props": { "listVariant": { "name": "listVariant", "type": "DropdownListVariant", "required": false }, "filtersTitle": { "name": "filtersTitle", "type": "string", "required": false }, "searchMultiCheckbox": { "name": "searchMultiCheckbox", "type": "DropdownSearchMultiCheckboxConfig", "required": false }, "pinSelectedFirst": { "name": "pinSelectedFirst", "type": "boolean", "required": false, "description": "En el panel del menú, muestra primero la fila (o filas) seleccionada(s). No reordena listas\n que incluyen filas `isGroupTitle`. Variantes `toggle` / `checkbox-item` ordenan por `checked`." }, "userHideAvatars": { "name": "userHideAvatars", "type": "boolean", "required": false, "description": "Solo con `listVariant: 'user'`. Si es `true`, ninguna fila muestra columna de imagen por\n defecto; usa `options[].showAvatar` para excepciones. Alternativa por fila: `options[].hideAvatar`." } } }, "events": { "props": { "onValueChange": { "name": "onValueChange", "type": "(value: string | number | (string | number)[]) => void", "required": false }, "onOptionSelect": { "name": "onOptionSelect", "type": "(option: DropdownOption) => void", "required": false }, "onCheckboxChange": { "name": "onCheckboxChange", "type": "(option: DropdownOption, checked: boolean) => void", "required": false }, "onToggleChange": { "name": "onToggleChange", "type": "(option: DropdownOption, checked: boolean) => void", "required": false }, "onHandleAccept": { "name": "onHandleAccept", "type": "(selectedOptions: DropdownOption[]) => void", "required": false } } }, "status": { "props": { "loading": { "name": "loading", "type": "boolean", "required": false } } } }, "deprecatedRoot": [ { "name": "label", "migrateTo": "`field", "type": "string" }, { "name": "error", "migrateTo": "`field", "type": "string" }, { "name": "helperText", "migrateTo": "`field", "type": "string" }, { "name": "infoTooltip", "migrateTo": "`tooltip", "type": "string" }, { "name": "size", "migrateTo": "`field", "type": "InputSize" }, { "name": "color", "migrateTo": "`field", "type": "Colors" }, { "name": "leftSlot", "migrateTo": "`slots", "type": "VisualSlotType" }, { "name": "rightSlot", "migrateTo": "`slots", "type": "VisualSlotType" }, { "name": "searchPlaceholder", "migrateTo": "`menuSearch", "type": "string" }, { "name": "noResultsText", "migrateTo": "`menuSearch", "type": "string" }, { "name": "noResultsDescription", "migrateTo": "`menuSearch", "type": "string" }, { "name": "caret", "migrateTo": "`field", "type": "boolean" }, { "name": "defaultValue", "migrateTo": "`values", "type": "string | number | (string | number)[]" }, { "name": "placeholder", "migrateTo": "`field", "type": "string" }, { "name": "options", "migrateTo": "`items", "type": "DropdownOption[]" }, { "name": "value", "migrateTo": "`values", "type": "string | number | (string | number)[]" }, { "name": "valueName", "migrateTo": "`items", "type": "string" }, { "name": "idName", "migrateTo": "`items", "type": "string" }, { "name": "onValueChange", "migrateTo": "`events", "type": "(value: string | number | (string | number)[]) => void" }, { "name": "onOptionSelect", "migrateTo": "`events", "type": "(option: DropdownOption) => void" }, { "name": "onCheckboxChange", "migrateTo": "`events", "type": "(option: DropdownOption, checked: boolean) => void" }, { "name": "searchable", "migrateTo": "`menuSearch", "type": "boolean" }, { "name": "maxHeight", "migrateTo": "`popover", "type": "string" }, { "name": "closeOnClickOutside", "migrateTo": "`popover", "type": "boolean" }, { "name": "dropdownId", "migrateTo": "`popover", "type": "string" }, { "name": "fullWidth", "migrateTo": "`popover", "type": "boolean" }, { "name": "auto", "migrateTo": "`popover", "type": "boolean" }, { "name": "multiple", "migrateTo": "`multi", "type": "boolean" }, { "name": "maxSelectedItems", "migrateTo": "`multi", "type": "number" }, { "name": "selectionSummary", "migrateTo": "`multi", "type": "DropdownSelectionSummary" }, { "name": "selectedItemsDisplay", "migrateTo": "`multi", "type": "DropdownSelectionSummary" }, { "name": "tagsOverflow", "migrateTo": "`multi", "type": "DropdownTagsOverflow" }, { "name": "tagsOverflowPopoverPlacement", "migrateTo": "`multi", "type": "'top' | 'bottom'" }, { "name": "tagsOverflowPopoverZIndex", "migrateTo": "`multi", "type": "number" }, { "name": "tagsOverflowPopoverTitle", "migrateTo": "`multi", "type": "string" }, { "name": "preventDeselectFromOptionsList", "migrateTo": "`multi", "type": "boolean" }, { "name": "showTriggerClearButton", "migrateTo": "`multi", "type": "boolean" }, { "name": "absolute", "migrateTo": "`popover", "type": "boolean" }, { "name": "popoverZIndex", "migrateTo": "`popover", "type": "number" }, { "name": "footer", "migrateTo": "`popover", "type": "boolean" }, { "name": "defaultOptionSelected", "migrateTo": "`items", "type": "boolean" }, { "name": "withCheckbox", "migrateTo": "`checkbox", "type": "boolean" }, { "name": "checkboxSelectionTone", "migrateTo": "`checkbox", "type": "ListItemCheckboxSelectionTone" }, { "name": "checkboxPosition", "migrateTo": "`checkbox", "type": "'start' | 'end'" }, { "name": "checkboxListDensity", "migrateTo": "`checkbox", "type": "'default' | 'compact'" }, { "name": "hasCurrent", "migrateTo": "`values", "type": "boolean" }, { "name": "onHandleAccept", "migrateTo": "`events", "type": "(selectedOptions: DropdownOption[]) => void" }, { "name": "pill", "migrateTo": "`slots", "type": "PillSize" }, { "name": "listVariant", "migrateTo": "`list", "type": "DropdownListVariant" }, { "name": "searchMultiCheckbox", "migrateTo": "`list", "jsdoc": "```tsx\n \n ```", "type": "DropdownSearchMultiCheckboxConfig" }, { "name": "searchMultiCheckboxHeader", "migrateTo": "`list", "type": "{ id: string" }, { "name": "searchMultiCheckboxShowSearch", "type": "boolean" }, { "name": "searchMultiCheckboxShowClearSelection", "type": "boolean" }, { "name": "onToggleChange", "migrateTo": "`events", "type": "(option: DropdownOption, checked: boolean) => void" }, { "name": "filtersTitle", "migrateTo": "`list", "type": "string" }, { "name": "tooltipProps", "migrateTo": "`tooltip", "type": "ButtonTooltipConfig" }, { "name": "loading", "migrateTo": "`status", "type": "boolean" } ], "flat": { "field": { "name": "field", "type": "Partial", "required": false }, "tooltip": { "name": "tooltip", "type": "Partial", "required": false }, "slots": { "name": "slots", "type": "Partial", "required": false }, "items": { "name": "items", "type": "Partial", "required": false }, "values": { "name": "values", "type": "Partial", "required": false }, "menuSearch": { "name": "menuSearch", "type": "Partial", "required": false }, "multi": { "name": "multi", "type": "Partial", "required": false }, "popover": { "name": "popover", "type": "Partial", "required": false }, "checkbox": { "name": "checkbox", "type": "Partial", "required": false }, "list": { "name": "list", "type": "Partial", "required": false }, "events": { "name": "events", "type": "Partial", "required": false }, "status": { "name": "status", "type": "Partial", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "label": { "name": "label", "type": "string }", "required": true } } } } ] }, { "id": "Emoji", "path": "src/modules/Emoji", "legacy": false, "compositionType": 1, "exports": [ { "name": "Emoji", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Emoji permite mostrar emojis del sistema con diferentes tamaños y nombres en español.", "confidence": "medium" }, "examples": [ "import { Emoji } from '@/modules/Emoji';\n\n export default function Example() {\n return \n }", "// Ejemplo de uso de emojis\n\n\n\n\n// Buscar emojis disponibles\nconst emojiName = \"feliz\"; // Usar el nombre exacto del emoji\n\n// Categorías disponibles\nconst categories = {\n emociones: ['feliz', 'triste', 'enojado', ...],\n animales: ['perro', 'gato', 'abeja', ...],\n comida: ['pizza', 'cafe', 'manzana', ...],\n // ... más categorías\n};", "import { Emoji } from '@/modules/Emoji';\n\n export default function Example() {\n return \n }", "// Ejemplo de uso de emojis\n\n\n\n\n// Buscar emojis disponibles\nconst emojiName = \"feliz\"; // Usar el nombre exacto del emoji\n\n// Categorías disponibles\nconst categories = {\n emociones: ['feliz', 'triste', 'enojado', ...],\n animales: ['perro', 'gato', 'abeja', ...],\n comida: ['pizza', 'cafe', 'manzana', ...],\n // ... más categorías\n};" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "name": { "name": "name", "type": "EmojiName", "required": true }, "size": { "name": "size", "type": "VisualSize", "required": false }, "className": { "name": "className", "type": "string", "required": false } } } } ] }, { "id": "EmojiPicker", "path": "src/modules/EmojiPicker", "legacy": false, "compositionType": 1, "exports": [ { "name": "EmojiPicker", "kind": "component", "description": { "primary": "readme", "readme": "# EmojiPicker\n\nComponente selector de emojis con categorías, búsqueda y gestión de emojis recientes.\n\n## Características\n\n- ✅ 8 categorías predefinidas de emojis\n- 🔍 Búsqueda de emojis en tiempo real\n- 🕐 Gestión automática de emojis recientes (localStorage)\n- 📱 Diseño responsive y adaptable\n- 🎨 Totalmente personalizable (ancho, alto, etc.)\n- ♿ Accesible (ARIA labels)\n- 🎯 TypeScript completamente tipado\n\n## Categorías\n\nEl componente incluye las siguientes categorías de emojis:\n\n1. **Recientes** - Emojis usados recientemente\n2. **Sonrisas y personas** - Emojis de emociones y expresiones\n3. **Animales** - Emojis de animales y naturaleza\n4. **Comida** - Emojis de comida y bebida\n5. **Deportes** - Emojis de actividades deportivas\n6. **Viajes** - Emojis de viajes y lugares\n7. **Objetos** - Emojis de objetos diversos\n8. **Símbolos** - Emojis de símbolos y formas\n9. **Banderas** - Emojis de banderas de países\n\n## Uso básico\n\n```tsx\nimport { EmojiPicker } from '@imjmedia/ui';\n\nfunction MyComponent() {\n const handleEmojiSelect = (emoji: string) => {\n console.log('Emoji seleccionado:', emoji);\n };\n\n return ;\n}\n```\n\n## Uso con Popup\n\nEl EmojiPicker funciona perfectamente dentro de un Popup:\n\n```tsx\nimport { EmojiPicker, Popup } from '@imjmedia/ui';\nimport { useState } from 'react';\n\nfunction MyComponent() {\n const [selectedEmoji, setSelectedEmoji] = useState('😊');\n\n return (\n \n \n \n );\n}\n```\n\n## Props\n\n### EmojiPickerProps\n\n| Prop | Tipo | Default | Descripción |\n| --------------------- | ------------------------- | ------------- | ------------------------------------------- |\n| `onEmojiSelect`", "confidence": "low" }, "examples": [ "const [selectedEmoji, setSelectedEmoji] = useState('')\n\n", "const [selectedEmoji, setSelectedEmoji] = useState('🎉')\n\n", " console.log(emoji)} \n/>", " console.log(emoji)} \n/>", " console.log(emoji)} \n/>\n\n console.log(emoji)} \n/>" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "onEmojiSelect": { "name": "onEmojiSelect", "type": "(emoji: string) => void", "required": false, "description": "Callback when an emoji is selected" }, "maxRecentEmojis": { "name": "maxRecentEmojis", "type": "number", "required": false, "description": "Maximum number of recent emojis to display" }, "className": { "name": "className", "type": "string", "required": false, "description": "Custom class name for the picker container" }, "width": { "name": "width", "type": "number", "required": false, "description": "Width of the emoji picker" }, "height": { "name": "height", "type": "number", "required": false, "description": "Height of the scrollable area" }, "initialRecentEmojis": { "name": "initialRecentEmojis", "type": "string[]", "required": false, "description": "Initial recent emojis" }, "showSearch": { "name": "showSearch", "type": "boolean", "required": false, "description": "Whether to show the search input" }, "searchPlaceholder": { "name": "searchPlaceholder", "type": "string", "required": false, "description": "Placeholder text for search input" }, "closeOnSelect": { "name": "closeOnSelect", "type": "boolean", "required": false, "description": "Close popup when emoji is selected" }, "label": { "name": "label", "type": "string", "required": false, "description": "Label for the trigger button" }, "position": { "name": "position", "type": "'top' | 'bottom' | 'left' | 'right' | 'bottom-right' | 'bottom-center' | 'bottom-left'", "required": false, "description": "Position of the popup relative to trigger" }, "variant": { "name": "variant", "type": "'button' | 'text' | 'outlined' | 'icon' | 'emoji'", "required": false, "description": "Popup button variant" }, "color": { "name": "color", "type": "ButtonColors", "required": false, "description": "Popup button color" }, "size": { "name": "size", "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'", "required": false, "description": "Popup button size" }, "icon": { "name": "icon", "type": "IconType | React.ReactElement", "required": false, "description": "Icon for the trigger button" }, "leftSlot": { "name": "leftSlot", "type": "VisualSlotType", "required": false, "description": "Left slot for the trigger button" }, "rightSlot": { "name": "rightSlot", "type": "VisualSlotType", "required": false, "description": "Right slot for the trigger button" }, "borderRadius": { "name": "borderRadius", "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'", "required": false, "description": "Border radius of the popup" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Disable the trigger button" }, "buttonClassName": { "name": "buttonClassName", "type": "string", "required": false, "description": "Custom class for the trigger button" }, "tooltip": { "name": "tooltip", "type": "string", "required": false, "description": "Tooltip for the trigger button" } } } } ] }, { "id": "FileUploader", "path": "src/modules/FileUploader", "legacy": false, "compositionType": 1, "exports": [ { "name": "FileUploader", "kind": "component", "description": { "primary": "storybook", "storybook": "Zona de carga con restricciones, lista de archivos y eventos. Props agrupadas:", "jsdoc": "50 MiB — mismo criterio que el texto por defecto de `dropZone.hint`. */\nconst DEFAULT_MAX_FILE_SIZE_BYTES = 50 * 1024 * 1024;\n\nconst DEFAULT_CONSTRAINTS = {\n multiple: true,\n /** Alineado con el hint por defecto (PNG, JPG, CSV, PDF). */\n accept: '.png,.jpg,.jpeg,.csv,.pdf',\n maxFileSizeBytes: DEFAULT_MAX_FILE_SIZE_BYTES,\n} as const;\n\nconst DEFAULT_LIST = {\n rowSize: 'lg' as FileUploadListRowSize,\n};\n\n/**\nCapas de un icono Font Awesome duotone (mapea a `Icon` / `IconFont`).\n/\nexport interface FileUploaderDropZoneIconDuotoneProps {\n primary?: IconFontColor;\n secondary?: IconFontColor;\n opacityPrimary?: number;\n opacitySecondary?: number;\n}\n\n/**\nIcono de la zona discontinua (misma superficie que `Icon`: tamaño, color y duotono).\nSe fusiona con valores por defecto (`faFile`, `xl`, `di", "confidence": "high" }, "examples": [ " { /* ... */ },\n onValidationError: (message, file) => { /* ... */ },\n }}\n />\n // Por defecto: accept '.png,.jpg,.jpeg,.csv,.pdf' y maxFileSizeBytes 50 MiB", "
\n \n
", "\n // Restricciones por defecto (tipos + 50 MiB) salvo que pases constraints", " { /* ... */ },\n }}\n />", " { /* ... */ },\n onRetryItem: (id) => { /* ... */ },\n }}\n />" ], "props": { "groups": { "dropZoneIconDuotone": { "props": { "primary": { "name": "primary", "type": "IconFontColor", "required": false }, "secondary": { "name": "secondary", "type": "IconFontColor", "required": false }, "opacityPrimary": { "name": "opacityPrimary", "type": "number", "required": false }, "opacitySecondary": { "name": "opacitySecondary", "type": "number", "required": false } } }, "dropZoneIcon": { "props": { "name": { "name": "name", "type": "AnyIconDefinition", "required": false, "description": "Definición Font Awesome del glifo." }, "size": { "name": "size", "type": "IconFontSize", "required": false }, "color": { "name": "color", "type": "IconFontColor", "required": false, "description": "Color cuando la zona no está resaltada por arrastre." }, "colorActive": { "name": "colorActive", "type": "IconFontColor", "required": false, "description": "Color cuando hay highlight de arrastre (drag over)." }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases en el contenedor del icono (`Icon`)." }, "duotone": { "name": "duotone", "type": "FileUploaderDropZoneIconDuotoneProps", "required": false, "description": "Duotono: colores y opacidades por capa." } } }, "dropZone": { "props": { "title": { "name": "title", "type": "string", "required": false, "description": "Título principal (Figma: «Arrastra y suelta tus archivos»)." }, "hint": { "name": "hint", "type": "string", "required": false, "description": "Ayuda bajo el título (tipos y peso)." }, "selectLabel": { "name": "selectLabel", "type": "string", "required": false, "description": "Etiqueta del botón que abre el selector del sistema." }, "error": { "name": "error", "type": "string | null", "required": false, "description": "Mensaje bajo el botón (borde en error).\n Sustituye el antiguo `dropZoneError` plano." }, "icon": { "name": "icon", "type": "FileUploaderDropZoneIconProps", "required": false, "description": "Icono, tamaño, colores base/highlight y duotono (agrupado)." } } }, "constraints": { "props": { "accept": { "name": "accept", "type": "string", "required": false, "description": "Valor nativo `accept` (extensiones o MIME, separados por coma).\n Por defecto: `.png,.jpg,.jpeg,.csv,.pdf` (coherente con `dropZone.hint`).\n Pasa `undefined` explícitamente en el objeto `constraints` si no quieres filtrar por tipo." }, "maxFileSizeBytes": { "name": "maxFileSizeBytes", "type": "number", "required": false, "description": "Tamaño máximo por archivo en bytes.\n Por defecto: 50 MiB (mismo mensaje que el hint)." }, "maxFiles": { "name": "maxFiles", "type": "number", "required": false, "description": "Máximo de archivos en total en la cola (`list.items` + nuevos aceptados).\n Si ya hay tantos ítems como este límite, no se añaden más y se llama `onValidationError`.\n Si un lote supera el hueco restante, solo se emiten los que caben y se notifica el resto." }, "maxFilesPerBatch": { "name": "maxFilesPerBatch", "type": "number", "required": false, "description": "Máximo de archivos por selección o soltar (un solo lote). Independiente de `maxFiles`." }, "multiple": { "name": "multiple", "type": "boolean", "required": false, "description": "Selección múltiple en el diálogo del sistema." } } }, "list": { "props": { "items": { "name": "items", "type": "FileUploadListItemData[]", "required": false }, "rowSize": { "name": "rowSize", "type": "FileUploadListRowSize", "required": false }, "onRemoveItem": { "name": "onRemoveItem", "type": "(id: string) => void", "required": false }, "onRetryItem": { "name": "onRetryItem", "type": "(id: string) => void", "required": false, "description": "Reintento cuando `status === 'error'` (red, 5xx, validación del servidor, etc.).\n Muestra el botón con icono `arrows-rotate` junto al de quitar (X)." }, "onDeleteItem": { "name": "onDeleteItem", "type": "(id: string) => void", "required": false } } }, "events": { "props": { "onFilesAccepted": { "name": "onFilesAccepted", "type": "(files: File[]) => void", "required": false }, "onValidationError": { "name": "onValidationError", "type": "(message: string, files: File[]) => void", "required": false } } } }, "deprecatedRoot": [], "flat": { "className": { "name": "className", "type": "string", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "fullHeight": { "name": "fullHeight", "type": "boolean", "required": false, "description": "Si es `true`, el organismo ocupa todo el alto del contenedor padre y la zona discontinua\n crece para llenar el espacio disponible (la lista de archivos queda debajo con su alto natural).\n El padre debe tener altura definida (p. ej. `h-full`, `flex-1` o `min-h-`)." }, "dropZone": { "name": "dropZone", "type": "FileUploaderDropZoneProps", "required": false, "description": "Zona discontinua: copy visible y `error` de la zona." }, "constraints": { "name": "constraints", "type": "FileUploaderConstraintsProps", "required": false, "description": "Input nativo y reglas (`accept`, peso, cupo por lote)." }, "list": { "name": "list", "type": "FileUploaderListProps", "required": false, "description": "Lista controlada y callbacks por fila (quitar, reintentar, borrar completado)." }, "events": { "name": "events", "type": "FileUploaderEventsProps", "required": false, "description": "Emisión tras validación local; no sustituye el estado de cada fila." } } } }, { "name": "FileUploadListItem", "kind": "component", "description": { "primary": "storybook", "storybook": "Zona de carga con restricciones, lista de archivos y eventos. Props agrupadas:", "jsdoc": "Datos de la fila (nombre, estado, progreso, etc.). */\n item: FileUploadListItemData;\n /** `lg` como fila ancha en Figma; `sm` compacta (sin barra al completar). */\n rowSize?: FileUploadListRowSize;\n /** Eliminar esta entrada (siempre; en error va antes del reintento). */\n onRemove?: (id: string) => void;\n /**\nReintentar subida tras error (red, 5xx, validación remota, etc.).\nSolo en `status === 'error'`: botón con `faArrowsRotate` junto al cierre (X).\n/\n onRetry?: (id: string) => void;\n /** Eliminar archivo completado (papelera). */\n onDelete?: (id: string) => void;\n className?: string;\n}\n\n/**\nFila de estado de carga: icono de tipo, título, detalle, barra solo mientras `uploading`,\ny acciones (cerrar, reintentar, papelera, check en completo) según Figma *Loader*.", "confidence": "high" }, "examples": [ " { /* ... */ },\n onValidationError: (message, file) => { /* ... */ },\n }}\n />\n // Por defecto: accept '.png,.jpg,.jpeg,.csv,.pdf' y maxFileSizeBytes 50 MiB", "
\n \n
", "\n // Restricciones por defecto (tipos + 50 MiB) salvo que pases constraints", " { /* ... */ },\n }}\n />", " { /* ... */ },\n onRetryItem: (id) => { /* ... */ },\n }}\n />" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "item": { "name": "item", "type": "FileUploadListItemData", "required": true, "description": "Datos de la fila (nombre, estado, progreso, etc.)." }, "rowSize": { "name": "rowSize", "type": "FileUploadListRowSize", "required": false, "description": "`lg` como fila ancha en Figma; `sm` compacta (sin barra al completar)." }, "onRemove": { "name": "onRemove", "type": "(id: string) => void", "required": false, "description": "Eliminar esta entrada (siempre; en error va antes del reintento)." }, "onRetry": { "name": "onRetry", "type": "(id: string) => void", "required": false, "description": "Reintentar subida tras error (red, 5xx, validación remota, etc.).\n Solo en `status === 'error'`: botón con `faArrowsRotate` junto al cierre (X)." }, "onDelete": { "name": "onDelete", "type": "(id: string) => void", "required": false, "description": "Eliminar archivo completado (papelera)." }, "className": { "name": "className", "type": "string", "required": false } } } }, { "name": "FileTypeIcon", "kind": "component", "description": { "primary": "storybook", "storybook": "Zona de carga con restricciones, lista de archivos y eventos. Props agrupadas:", "jsdoc": "Tipo de archivo (artwork en `assets/icons/.svg`). */\n format: FileUploaderFileFormat;\n /** Tamaño del bloque (Figma: 18 / 24 / 32). Los SVG de origen son 32×32. */\n size?: FileTypeIconSize;\n className?: string;\n}\n\n/**\nIcono de tipo de archivo según Figma `_file types`.\nUsa los vectores en `modules/FileUploader/assets/icons/*.svg` (documento + badge + etiqueta).", "confidence": "high" }, "examples": [ " { /* ... */ },\n onValidationError: (message, file) => { /* ... */ },\n }}\n />\n // Por defecto: accept '.png,.jpg,.jpeg,.csv,.pdf' y maxFileSizeBytes 50 MiB", "
\n \n
", "\n // Restricciones por defecto (tipos + 50 MiB) salvo que pases constraints", " { /* ... */ },\n }}\n />", " { /* ... */ },\n onRetryItem: (id) => { /* ... */ },\n }}\n />" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "format": { "name": "format", "type": "FileUploaderFileFormat", "required": true, "description": "Tipo de archivo (artwork en `assets/icons/.svg`)." }, "size": { "name": "size", "type": "FileTypeIconSize", "required": false, "description": "Tamaño del bloque (Figma: 18 / 24 / 32). Los SVG de origen son 32×32." }, "className": { "name": "className", "type": "string", "required": false } } } } ] }, { "id": "Filters", "path": "src/modules/Filters", "legacy": false, "compositionType": 1, "exports": [ { "name": "Filters", "kind": "component", "description": { "primary": "jsdoc", "confidence": "low" }, "examples": [ "import { useState } from 'react';\n import { Filters } from '@imj_media/ui';\n import { faFilter } from '@fortawesome/pro-regular-svg-icons';\n\n const filters = [\n {\n type: 'dropdown',\n label: 'Estado',\n keyName: 'estado',\n placeholder: 'Seleccionar',\n options: [\n { label: 'Activo', value: 'activo' },\n { label: 'Pendiente', value: 'pendiente' },\n ],\n },\n {\n type: 'input',\n label: 'Buscar',\n keyName: 'buscar',\n placeholder: 'Texto…',\n },\n ];\n\n export function Example() {\n const [applied, setApplied] = useState | null>(null);\n\n return (\n setApplied(states)}\n onClear={() => setApplied(null)}\n />\n );\n }", "import { useState } from 'react';\n import { Filters } from '@imj_media/ui';\n import { faFilter } from '@fortawesome/pro-regular-svg-icons';\n\n const filters = [\n {\n type: 'dropdown',\n label: 'Estado',\n keyName: 'estado',\n placeholder: 'Seleccionar',\n options: [\n { label: 'Activo', value: 'activo' },\n { label: 'Pendiente', value: 'pendiente' },\n ],\n },\n {\n type: 'input',\n label: 'Buscar',\n keyName: 'buscar',\n placeholder: 'Texto…',\n },\n ];\n\n export function Example() {\n const [applied, setApplied] = useState | null>(null);\n\n return (\n setApplied(states)}\n onClear={() => setApplied(null)}\n />\n );\n }" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "filters": { "name": "filters", "type": "Filter[]", "required": false }, "clearText": { "name": "clearText", "type": "string", "required": false }, "title": { "name": "title", "type": "string", "required": false }, "icon": { "name": "icon", "type": "IconType", "required": false }, "label": { "name": "label", "type": "string", "required": false }, "onClear": { "name": "onClear", "type": "() => void", "required": false }, "onApply": { "name": "onApply", "type": "(filterStates: Record) => void", "required": false }, "closeOnApply": { "name": "closeOnApply", "type": "boolean", "required": false }, "size": { "name": "size", "type": "InputSize", "required": false }, "theme": { "name": "theme", "type": "ButtonTheme", "required": false }, "color": { "name": "color", "type": "ButtonColors", "required": false } } } } ] }, { "id": "Ghantt", "path": "src/modules/Ghantt", "legacy": false, "compositionType": 1, "exports": [ { "name": "Ghantt", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "X del puntero respecto al borde izquierdo del **mismo** elemento cuyo `scrollLeft` define el desplazamiento\n(viewport de cabecera). Si se mide con el padre del track del cuerpo, thead/tbody pueden desalinearse\n(p. ej. scrollbar vertical solo en el cuerpo) y `scrollLeft + x` cae en el inicio del contenido → anclas en ~2015.\n/\nfunction ghanttWheelTimelineViewportClientX(\n scrollViewportEl: HTMLElement | null,\n clientX: number\n): number {\n const el = scrollViewportEl;\n if (!el) return 0;\n const r = el.getBoundingClientRect();\n const w = el.clientWidth > 0 ? el.clientWidth : r.width;\n return Math.max(0, Math.min(w, clientX - r.left));\n}\n\nconst DEFAULT_APPEARANCE = {\n trackMinHeightPx: 44,\n} as const;\n\nconst DEFAULT_EVENTS = {} as const;\n\n/**\nTabla estándar {@link Table} con **una colum", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "gantt": { "props": { "column": { "name": "column", "type": "GhanttColumnPresentationProps", "required": true }, "data": { "name": "data", "type": "GhanttDataProps", "required": true }, "timeline": { "name": "timeline", "type": "GhanttTimelineProps", "required": true }, "appearance": { "name": "appearance", "type": "GhanttAppearanceProps", "required": false }, "events": { "name": "events", "type": "GhanttEventsProps", "required": false } } }, "column": { "props": { "id": { "name": "id", "type": "string", "required": false }, "header": { "name": "header", "type": "ReactNode", "required": true }, "width": { "name": "width", "type": "number | string", "required": false }, "minWidth": { "name": "minWidth", "type": "number", "required": false }, "maxWidth": { "name": "maxWidth", "type": "number | 'auto'", "required": false }, "lockable": { "name": "lockable", "type": "boolean", "required": false }, "locked": { "name": "locked", "type": "boolean", "required": false }, "placement": { "name": "placement", "type": "'start' | 'end'", "required": false }, "headerClassName": { "name": "headerClassName", "type": "string", "required": false, "description": "Clases extra en `` (se combinan con el borde izquierdo que separa esta columna de la anterior)." }, "cellClassName": { "name": "cellClassName", "type": "string", "required": false, "description": "Clases extra en `` del cuerpo (se combinan con el mismo borde izquierdo que en cabecera)." } } }, "data": { "props": { "accessor": { "name": "accessor", "type": "keyof T | string | ((row: T) => GhanttRowValue | undefined)", "required": true, "description": "Campo de la fila (`keyof T`) o función. Con filas genéricas, la función es la forma más explícita." } } }, "timeline": { "props": { "viewStart": { "name": "viewStart", "type": "Date | string", "required": true }, "viewEnd": { "name": "viewEnd", "type": "Date | string", "required": true }, "scale": { "name": "scale", "type": "GhanttTimelineScale", "required": false }, "includeLeadingFullMonth": { "name": "includeLeadingFullMonth", "type": "boolean", "required": false, "description": "Solo con `scale: 'day'` (o por defecto). Si es `true` (por defecto), la rejilla abarca el mes\n calendario completo anterior al de `viewStart` y hasta el fin del mes que contiene `viewEnd`,\n de modo que p. ej. al centrar abril sigan existiendo todas las columnas de marzo a la izquierda\n y se vean con scroll horizontal solo dentro de la columna Gantt (cabecera + filas sincronizadas)." }, "columnWidthPx": { "name": "columnWidthPx", "type": "number", "required": false, "description": "Ancho mínimo en px por slot (día/semana/mes según `scale`). El contenido temporal puede ser\n más ancho que la columna: el scroll es interno a la columna. Si se omite, en vista `day`\n se usa 44; en `week`/`month`/`hour`/`year` se aplican anchos por defecto del paquete o reparto flex." }, "modifierWheelZoom": { "name": "modifierWheelZoom", "type": "boolean", "required": false, "description": "Si es `true`, Cmd (macOS) o Ctrl + rueda hace zoom dentro de la escala (ancho de columna)\n y solo al llegar al límite cambia la vista (hora → día → semana → mes; sin vista solo-año), sin recortar la\n línea de tiempo global 2015-01-01 → 1 enero del año siguiente; el puntero ancla el scroll.\n En hora la cinta sigue siendo ventana local. Opcional {" }, "columnMaxWidthPx": { "name": "columnMaxWidthPx", "type": "number", "required": false, "description": "Ancho máximo en px de la columna Gantt si no defines `gantt.column.maxWidth`." }, "modifierZoomGlobalStart": { "name": "modifierZoomGlobalStart", "type": "Date | string", "required": false, "description": "Inicio del rango global para zoom con modificador (sobrescribe 2015-01-01)." }, "modifierZoomGlobalEnd": { "name": "modifierZoomGlobalEnd", "type": "Date | string", "required": false, "description": "Fin del rango global para zoom con modificador (sobrescribe el fin del año próximo)." } } }, "appearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } }, "events": { "props": { "onBarClick": { "name": "onBarClick", "type": "(payload: { row: RowConfig", "required": false }, "bar": { "name": "bar", "type": "GhanttBarSegment }) => void", "required": true }, "onTimelineChange": { "name": "onTimelineChange", "type": "(timeline: GhanttTimelineProps) => void", "required": false, "description": "Notifica cambios de ventana/escala al usar zoom con modificador (p. ej. para persistir estado)." } } } }, "deprecatedRoot": [], "flat": { "columns": { "name": "columns", "type": "ColumnConfig[]", "required": true }, "rows": { "name": "rows", "type": "RowConfig[]", "required": true }, "loading": { "name": "loading", "type": "boolean", "required": false }, "empty": { "name": "empty", "type": "EmptyState", "required": false }, "selection": { "name": "selection", "type": "SelectionConfig", "required": false }, "excludedRows": { "name": "excludedRows", "type": "ExcludedRowsConfig", "required": false, "description": "Excluye filas de la selección por valor de un campo (ej. estado `archived`).\n Solo aplica si `selection.enabled` es true." }, "pagination": { "name": "pagination", "type": "PaginationConfig", "required": false }, "toolbar": { "name": "toolbar", "type": "TableToolbarConfig", "required": false }, "sort": { "name": "sort", "type": "SortConfig", "required": false }, "filters": { "name": "filters", "type": "FilterConfig[]", "required": false }, "expandable": { "name": "expandable", "type": "boolean", "required": false }, "resizable": { "name": "resizable", "type": "boolean", "required": false }, "columnsLockable": { "name": "columnsLockable", "type": "boolean", "required": false, "description": "Permite fijar/bloquear columnas desde la cabecera por defecto.\n Si es `false`, ninguna columna es bloqueable salvo que definas `lockable: true` en esa `ColumnConfig`.\n Si se omite, el comportamiento es el mismo que `true`." }, "striped": { "name": "striped", "type": "boolean", "required": false }, "bordered": { "name": "bordered", "type": "boolean", "required": false }, "borderable": { "name": "borderable", "type": "boolean", "required": false, "description": "Muestra el borde exterior del contenedor de la tabla (borde, sombra y border-radius)." }, "hoverable": { "name": "hoverable", "type": "boolean", "required": false }, "dense": { "name": "dense", "type": "boolean", "required": false }, "stickyHeader": { "name": "stickyHeader", "type": "boolean", "required": false }, "defecto": { "name": "defecto", "type": "true si hay columnas editables)", "required": true }, "stickyCheckbox": { "name": "stickyCheckbox", "type": "boolean", "required": false }, "stickyActions": { "name": "stickyActions", "type": "boolean", "required": false }, "showEditActions": { "name": "showEditActions", "type": "boolean", "required": false }, "configKey": { "name": "configKey", "type": "string", "required": false, "description": "Clave única para guardar la configuración de la tabla en localStorage.\n Si se proporciona, la configuración se persistirá automáticamente." }, "persistConfig": { "name": "persistConfig", "type": "boolean", "required": false, "description": "Habilitar persistencia de configuración en localStorage.\n Requiere que se proporcione `configKey`." }, "queryPersist": { "name": "queryPersist", "type": "boolean", "required": false, "description": "Persistir también filtros activos y búsqueda en la misma configKey.\n Solo aplica si `persistConfig` es true. Si es false, no se guardan ni cargan filtros ni búsqueda." }, "onConfigChange": { "name": "onConfigChange", "type": "(config: TableConfigState, changeType: TableConfigChangeType) => void", "required": false, "description": "Callback cuando cambia la configuración de la tabla.\n Se llama con la configuración completa y el tipo de cambio." }, "className": { "name": "className", "type": "string", "required": false }, "onSort": { "name": "onSort", "type": "(sort: SortConfig | undefined) => void", "required": false }, "onFilter": { "name": "onFilter", "type": "(filters: FilterConfig[]) => void", "required": false }, "onColumnResize": { "name": "onColumnResize", "type": "(columnId: string, width: number) => void", "required": false }, "onColumnReorder": { "name": "onColumnReorder", "type": "(columns: ColumnConfig[]) => void", "required": false }, "onColumnVisibilityChange": { "name": "onColumnVisibilityChange", "type": "(columnId: string, visible: boolean) => void", "required": false }, "onRowClick": { "name": "onRowClick", "type": "(row: RowConfig) => void", "required": false }, "onRowExpand": { "name": "onRowExpand", "type": "(row: RowConfig) => void", "required": false }, "onHandleChange": { "name": "onHandleChange", "type": "(rowId: string | number, columnId: string, value: unknown, row?: T) => void", "required": false }, "editingRowIds": { "name": "editingRowIds", "type": "(string | number)[]", "required": false, "description": "IDs de filas que deben estar en modo edición.\n Permite controlar desde fuera qué filas están editando.\n Útil para activar múltiples filas en modo edición simultáneamente." }, "onEditingRowIdsChange": { "name": "onEditingRowIdsChange", "type": "(editingRowIds: (string | number)[]) => void", "required": false, "description": "Callback cuando cambian los IDs de filas en modo edición.\n Se llama cuando el usuario hace clic en el botón de editar/guardar de una fila.\n Permite sincronizar el estado externo con las acciones internas de la tabla." }, "onEditModeChange": { "name": "onEditModeChange", "type": "(rowId: string | number, isEditing: boolean) => void", "required": false, "description": "Callback cuando se habilita o se cierra el modo de edición de una fila.\n Se ejecuta tanto cuando se habilita como cuando se cierra el modo de edición." }, "onSuccessComplete": { "name": "onSuccessComplete", "type": "(editedRowIds: (string | number)[]) => void", "required": false, "description": "Callback cuando se cierra una o múltiples filas que fueron editadas.\n Se ejecuta un solo evento al cerrar, mostrando un array con los IDs de todas las filas editadas que se están cerrando.\n Solo se ejecuta si las filas fueron realmente editadas (se modificó alguna celda)." } } } }, { "name": "GhanttTimelineHeader", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "Nombre accesible del bloque de cabecera (no dibuja una tercera franja: la cabecera son **dos pisos**\nalineados al ancho de la columna).\n/\n title?: string;\n className?: string;\n}\n\n/**\nCabecera de la columna Gantt en **dos pisos** a ancho completo de la columna, alineados con el cuerpo:\n- **Piso 1:** agrupación temporal (meses en vista diaria/semanal, años en vista mensual). En vista **año** no hay piso superior (solo años en el piso inferior).\n- **Piso 2:** etiquetas de cada slot (días, semanas o meses según `timeline.scale`).\nPensado para usarse como `column.header` de la columna `gantt` (el `HeaderCell` la renderiza a ancho\ncompleto sin la fila de acciones de ordenar/filtrar).", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "title": { "name": "title", "type": "string", "required": false, "description": "Nombre accesible del bloque de cabecera (no dibuja una tercera franja: la cabecera son dos pisos\n alineados al ancho de la columna)." }, "className": { "name": "className", "type": "string", "required": false } } } }, { "name": "GhanttConfigProvider", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "confidence": "medium" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "value": { "name": "value", "type": "GhanttConfigContextValue", "required": true }, "children": { "name": "children", "type": "ReactNode", "required": true } } } }, { "name": "GHANTT_MODIFIER_ZOOM_MIN_SPAN_MS", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "Inicio del rango global al hacer zoom con modificador (Cmd/Ctrl + rueda). */\nexport const GHANTT_MODIFIER_ZOOM_GLOBAL_START = '2015-01-01';\n\nconst MS_DAY = 86400000;\nconst MS_HOUR = 3600000;\n\n/**\nMitad de la ventana en escala `hour` (zoom por modificador / línea local): total ≈ 2× ms.\nAntes 24 h por lado (48 h); se sube a **100 h** por lado (**200 h** mínimo en cinta) para scroll + virtualización.\n/\nexport const GHANTT_MODIFIER_ZOOM_HOUR_HALF_MS = 100 * MS_HOUR;\n\n/** Fin exclusivo del rango global: hasta el fin de 2030. */\nexport function ghanttModifierZoomGlobalEndExclusive(): string {\n return '2031-01-01';\n}\n\n/**\nOrden de escala con zoom por modificador: de más detalle (índice 0) a más agregada (índice 3).\nNo incluye `year` (solo años en la rejilla): el tope es `month` (mes + año en cad", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "ghanttAppearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } } }, "deprecatedRoot": [] } }, { "name": "GHANTT_MODIFIER_ZOOM_GLOBAL_START", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "Inicio del rango global al hacer zoom con modificador (Cmd/Ctrl + rueda).", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "ghanttAppearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } } }, "deprecatedRoot": [] } }, { "name": "GHANTT_MODIFIER_ZOOM_HOUR_HALF_MS", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "Inicio del rango global al hacer zoom con modificador (Cmd/Ctrl + rueda). */\nexport const GHANTT_MODIFIER_ZOOM_GLOBAL_START = '2015-01-01';\n\nconst MS_DAY = 86400000;\nconst MS_HOUR = 3600000;\n\n/**\nMitad de la ventana en escala `hour` (zoom por modificador / línea local): total ≈ 2× ms.\nAntes 24 h por lado (48 h); se sube a **100 h** por lado (**200 h** mínimo en cinta) para scroll + virtualización.", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "ghanttAppearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } } }, "deprecatedRoot": [] } }, { "name": "GHANTT_MODIFIER_ZOOM_ORDER", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "Inicio del rango global al hacer zoom con modificador (Cmd/Ctrl + rueda). */\nexport const GHANTT_MODIFIER_ZOOM_GLOBAL_START = '2015-01-01';\n\nconst MS_DAY = 86400000;\nconst MS_HOUR = 3600000;\n\n/**\nMitad de la ventana en escala `hour` (zoom por modificador / línea local): total ≈ 2× ms.\nAntes 24 h por lado (48 h); se sube a **100 h** por lado (**200 h** mínimo en cinta) para scroll + virtualización.\n/\nexport const GHANTT_MODIFIER_ZOOM_HOUR_HALF_MS = 100 * MS_HOUR;\n\n/** Fin exclusivo del rango global: hasta el fin de 2030. */\nexport function ghanttModifierZoomGlobalEndExclusive(): string {\n return '2031-01-01';\n}\n\n/**\nOrden de escala con zoom por modificador: de más detalle (índice 0) a más agregada (índice 3).\nNo incluye `year` (solo años en la rejilla): el tope es `month` (mes + año en cad", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "ghanttAppearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } } }, "deprecatedRoot": [] } }, { "name": "GhanttSlotStrip", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "confidence": "medium" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "slots": { "name": "slots", "type": "readonly GhanttTimelineSlot[]", "required": true }, "upperSegments": { "name": "upperSegments", "type": "readonly GhanttUpperSegment[]", "required": false, "description": "Segmentos mayores (meses, años) para dibujar la rejilla principal. Si se pasan, se ocultan las líneas de los slots individuales." }, "variant": { "name": "variant", "type": "'header' | 'body'", "required": true, "description": "`header`: fondo de cabecera; `body`: transparente para heredar fila (selección, hijos, zebra)." }, "renderSlot": { "name": "renderSlot", "type": "(slot: GhanttTimelineSlot) => ReactNode", "required": false, "description": "Contenido por celda de slot (cabecera con etiquetas). En cuerpo suele omitirse." }, "className": { "name": "className", "type": "string", "required": false }, "slotMinWidthPx": { "name": "slotMinWidthPx", "type": "number", "required": false, "description": "Ancho fijo por slot (px). Suele ir dentro de un contenedor con `overflow-x-auto` en la columna Gantt." }, "densePatternMinSlots": { "name": "densePatternMinSlots", "type": "number", "required": false, "description": "Umbral para rejilla densa solo en cuerpo (gradiente repetido). La cabecera siempre usa una celda por slot." } } } }, { "name": "GHANTT_DENSE_HEADER_MAX_LABELS", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "A partir de este número de slots se usa una rejilla CSS (una sola capa) en lugar de un nodo por columna. */\nexport const GHANTT_DENSE_SLOT_GRID_MIN_SLOTS = 96;\n\n/**\nCon escala `hour` / `day` / `week` y al menos tantos slots, la **cabecera** (etiquetas por slot)\nvirtualiza celdas con {@link ghanttScrollVirtualIndexRange}. El **cuerpo** con ancho fijo usa una\nsola capa CSS (gradiente) para todos los días/semanas; no duplica esa lógica por fila.\n/\nexport const GHANTT_SCROLL_VIRTUAL_MIN_SLOTS = 120;\n\n/** @deprecated Usar {@link GHANTT_SCROLL_VIRTUAL_MIN_SLOTS}. */\nexport const GHANTT_HOUR_VIRTUAL_MIN_SLOTS = GHANTT_SCROLL_VIRTUAL_MIN_SLOTS;\n\nconst GHANTT_SCROLL_VIRTUAL_ACTIVE_MIN = 200;\nconst GHANTT_SCROLL_VIRTUAL_ACTIVE_MAX = 300;\n\n/**\nRango de índices de slots (misma anchura en px) a renderi", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "ghanttAppearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } } }, "deprecatedRoot": [] } }, { "name": "GHANTT_DENSE_SLOT_GRID_MIN_SLOTS", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "A partir de este número de slots se usa una rejilla CSS (una sola capa) en lugar de un nodo por columna.", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "ghanttAppearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } } }, "deprecatedRoot": [] } }, { "name": "GHANTT_HOUR_VIRTUAL_MIN_SLOTS", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "A partir de este número de slots se usa una rejilla CSS (una sola capa) en lugar de un nodo por columna. */\nexport const GHANTT_DENSE_SLOT_GRID_MIN_SLOTS = 96;\n\n/**\nCon escala `hour` / `day` / `week` y al menos tantos slots, la **cabecera** (etiquetas por slot)\nvirtualiza celdas con {@link ghanttScrollVirtualIndexRange}. El **cuerpo** con ancho fijo usa una\nsola capa CSS (gradiente) para todos los días/semanas; no duplica esa lógica por fila.\n/\nexport const GHANTT_SCROLL_VIRTUAL_MIN_SLOTS = 120;\n\n/** @deprecated Usar {@link GHANTT_SCROLL_VIRTUAL_MIN_SLOTS}.", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "ghanttAppearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } } }, "deprecatedRoot": [] } }, { "name": "GHANTT_SCROLL_VIRTUAL_MIN_SLOTS", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "A partir de este número de slots se usa una rejilla CSS (una sola capa) en lugar de un nodo por columna. */\nexport const GHANTT_DENSE_SLOT_GRID_MIN_SLOTS = 96;\n\n/**\nCon escala `hour` / `day` / `week` y al menos tantos slots, la **cabecera** (etiquetas por slot)\nvirtualiza celdas con {@link ghanttScrollVirtualIndexRange}. El **cuerpo** con ancho fijo usa una\nsola capa CSS (gradiente) para todos los días/semanas; no duplica esa lógica por fila.", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "ghanttAppearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } } }, "deprecatedRoot": [] } }, { "name": "GHANTT_TIMELINE_HEADER_STACK_HEIGHT_PX", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "Altura total (px) del bloque de **dos filas** de la cabecera temporal del Gantt (alineado con cabecera\nde tabla en Figma, ~49px). Cada fila ocupa la mitad (`1fr` / `1fr`).", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "ghanttAppearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } } }, "deprecatedRoot": [] } }, { "name": "GHANTT_DEFAULT_COLUMN_ID", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "confidence": "medium" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "ghanttAppearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } } }, "deprecatedRoot": [] } }, { "name": "DEFAULT_GHANTT_COLUMN_MAX_WIDTH_PX", "kind": "component", "description": { "primary": "storybook", "storybook": "Tabla estándar con una columna Gantt. La API voluminosa va en el objeto", "jsdoc": "Ancho máximo por defecto de la columna Gantt (px). Sustituible con `gantt.column.maxWidth` o `timeline.columnMaxWidthPx`.", "confidence": "high" }, "examples": [ "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>", "import { Ghantt, GhanttTimelineHeader } from '@/modules/Ghantt';\n\n,\n width: 480,\n },\n data: { accessor: (row) => row.plan },\n timeline: { viewStart: '2026-04-01', viewEnd: '2026-04-22', scale: 'day' },\n events: {\n onBarClick: ({ bar, row }) => console.log(bar.id, row.id),\n },\n }}\n/>" ], "props": { "groups": { "ghanttAppearance": { "props": { "trackMinHeightPx": { "name": "trackMinHeightPx", "type": "number", "required": false }, "trackClassName": { "name": "trackClassName", "type": "string", "required": false } } } }, "deprecatedRoot": [] } } ] }, { "id": "Header", "path": "src/modules/Header", "legacy": false, "compositionType": 1, "exports": [ { "name": "Header", "kind": "component", "description": { "primary": "jsdoc", "confidence": "low" }, "examples": [ "import { Header } from \"@imj_me/ui\";\n\nconst sampleFilters = [\n {\n label: 'Estado',\n value: 'estado',\n options: [\n { label: 'Activo', value: 'activo', icon: faCheck },\n { label: 'Inactivo', value: 'inactivo', icon: faMinus },\n ],\n icon: faFilter,\n placeholder: 'Estado',\n type: 'dropdown',\n },\n {\n label: 'Tipo',\n value: 'tipo',\n options: [\n { label: 'Plantilla', value: 'plantilla', icon: faList },\n { label: 'Tarea', value: 'tarea', icon: faTasks },\n ],\n icon: faFilter,\n placeholder: 'Tipo',\n type: 'dropdown',\n },\n {\n label: 'Tareas',\n value: 'tareas',\n options: [\n { label: 'Todas', value: 'todas', icon: faList },\n { label: 'Completadas', value: 'completadas', icon: faTasks },\n { label: 'Pendientes', value: 'pendientes', icon: faTasks },\n { label: 'Canceladas', value: 'canceladas', icon: faTasks },\n ],\n icon: faFilter,\n placeholder: 'Tareas',\n type: 'multiple',\n },\n {\n label: 'Fecha',\n value: 'fecha',\n type: 'date',\n },\n {\n label: 'Buscar',\n type: 'input',\n placeholder: 'Buscar',\n },\n {\n label: 'Descripción',\n type: 'textarea',\n placeholder: 'Descripción',\n },\n];\n\nfunction Example() {\n return (\n console.log('Filtros limpiados')}\n onApply={(filters) => console.log('Filtros aplicados:', filters)}\n />\n );\n}", "import { Header } from \"@imj_me/ui\";\n\n// Sin filtros - array vacío\nconst noFilters = [];\n\nfunction Example() {\n return (\n \n );\n}", "import { Header } from \"@imj_me/ui\";\n\nconst simpleFilters = [\n {\n label: 'Estado',\n type: 'dropdown',\n options: [\n { label: 'Activo', value: 'activo' },\n { label: 'Inactivo', value: 'inactivo' },\n ],\n },\n {\n label: 'Buscar',\n type: 'input',\n placeholder: 'Buscar...',\n },\n];\n\nfunction Example() {\n return (\n console.log('Filtros limpiados')}\n onApply={(filters) => console.log('Filtros aplicados:', filters)}\n />\n );\n}", "import { Header } from \"@imj_me/ui\";\n\nconst simpleFilters = [\n {\n label: 'Estado',\n type: 'dropdown',\n options: [\n { label: 'Activo', value: 'activo' },\n { label: 'Inactivo', value: 'inactivo' },\n ],\n },\n {\n label: 'Buscar',\n type: 'input',\n placeholder: 'Buscar...',\n },\n];\n\nfunction Example() {\n return (\n console.log('Filtros limpiados')}\n onApply={(filters) => console.log('Filtros aplicados:', filters)}\n />\n );\n}", "import { Header } from \"@imj_me/ui\";\n\nconst simpleFilters = [\n {\n label: 'Estado',\n type: 'dropdown',\n options: [\n { label: 'Activo', value: 'activo' },\n { label: 'Inactivo', value: 'inactivo' },\n ],\n },\n {\n label: 'Buscar',\n type: 'input',\n placeholder: 'Buscar...',\n },\n];\n\nfunction Example() {\n return (\n console.log('Filtros limpiados')}\n onApply={(filters) => console.log('Filtros aplicados:', filters)}\n />\n );\n}" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "title": { "name": "title", "type": "string", "required": true }, "icon": { "name": "icon", "type": "IconType", "required": false }, "viewMode": { "name": "viewMode", "type": "'list' | 'grid'", "required": false }, "showViewMode": { "name": "showViewMode", "type": "boolean", "required": false }, "showFilters": { "name": "showFilters", "type": "boolean", "required": false }, "onViewModeChange": { "name": "onViewModeChange", "type": "(viewMode: 'list' | 'grid') => void", "required": false }, "filters": { "name": "filters", "type": "Filter[]", "required": false }, "onApply": { "name": "onApply", "type": "(filterStates: Record) => void", "required": false }, "onClear": { "name": "onClear", "type": "() => void", "required": false }, "size": { "name": "size", "type": "InputSize", "required": false } } } } ] }, { "id": "Icon", "path": "src/modules/Icon", "legacy": false, "compositionType": 1, "exports": [ { "name": "Icon", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Icon permite mostrar iconos del sistema de diseño con diferentes tamaños y colores.", "readme": "# Icon Component\n\nEl componente `Icon` permite mostrar iconos SVG con diferentes tamaños, colores y variantes.\n\n## Características\n\n- ✅ Soporte para iconos outline y fill\n- ✅ Múltiples tamaños predefinidos\n- ✅ Sistema de colores consistente\n- ✅ Tipado completo con TypeScript\n- ✅ Compatible con Storybook\n\n## Uso Básico\n\n```tsx\nimport { Icon } from '@your-org/ui';\n\nfunction MyComponent() {\n return ;\n}\n```\n\n## Props\n\n| Prop | Tipo | Por defecto | Descripción |\n| ----------- | ----------------------------------------------- | ----------- | -------------------------------------- |\n| `name` | `IconType` | - | Nombre del icono a mostrar (requerido) |\n| `variant` | `'outline' \\| 'fill'` | `'outline'` | Variante del icono |\n| `size` | `'xs' \\| 'sm' \\| 'md' \\| 'lg' \\| 'xl' \\| '2xl'` | `'md'` | Tamaño del icono |\n| `color` | `IconColor` | `'primary'` | Color del icono |\n| `className` | `string` | - | Clases CSS adicionales |\n| `svgProps` | `React.SVGProps` | `{}` | Propiedades adicionales del SVG |\n\n## Tamaños\n\n| Tamaño | Píxeles |\n| ------ | ------- |\n| `xs` | 12px |\n| `sm` | 16px |\n| `md` | 20px |\n| `lg` | 24px |\n| `xl` | 32px |\n| `2xl` | 48px |\n\n## Colores Disponibles\n\n- `primary` - Color primario\n- `secondary` - Color secundario\n- `danger` - Color de peligro/error\n- `success` - Color de éxito\n- `warning` - Color de advertencia\n- `info` - Color informativo\n- `alert` - Color de alerta\n\n## Ejemplos\n\n### Iconos Outline\n\n```tsx\n
\n \n }", "import { Icon } from '@/modules/Icon';\nimport { faHeart, faStar } from '@fortawesome/pro-duotone-svg-icons';\n\nexport default function DuotoneExample() {\n return (\n <>\n {/* Colores semánticos */}\n \n\n {/* Combinaciones creativas */}\n \n\n {/* Diferentes opacidades */}\n \n \n );\n}", "import { faEye } from '@fortawesome/pro-regular-svg-icons';\n\n\n\n\n", "import { faEye } from '@fortawesome/pro-regular-svg-icons';\n\n\n\n\n\n\n\n", "import { faHome, faSearch, faBell, faUser, faCog, faStar } from '@fortawesome/pro-regular-svg-icons';\n\n\n\n\n\n\n" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "name": { "name": "name", "type": "AnyIconDefinition", "required": true, "description": "Nombre del icono a mostrar" }, "size": { "name": "size", "type": "IconFontSize", "required": false, "description": "Tamaño del icono" }, "color": { "name": "color", "type": "IconFontColor", "required": false, "description": "Color del icono" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" }, "onClick": { "name": "onClick", "type": "(e: React.MouseEvent) => void", "required": false }, "background": { "name": "background", "type": "boolean", "required": false, "description": "Si el icono tiene un fondo" }, "backgroundColor": { "name": "backgroundColor", "type": "IconBackgroundColor", "required": false, "description": "Color del fondo: semánticos (`success`, `danger`, `white`, `blue`, …) o clase `ui-bg-`." }, "backgroundSize": { "name": "backgroundSize", "type": "VisualSize", "required": false, "description": "Tamaño del fondo del icono" }, "padding": { "name": "padding", "type": "'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'", "required": false }, "style": { "name": "style", "type": "React.CSSProperties & Record", "required": false }, "colorDuotonePrimary": { "name": "colorDuotonePrimary", "type": "IconFontColor", "required": false }, "colorDuotoneSecondary": { "name": "colorDuotoneSecondary", "type": "IconFontColor", "required": false }, "opacityDuotonePrimary": { "name": "opacityDuotonePrimary", "type": "number", "required": false }, "opacityDuotoneSecondary": { "name": "opacityDuotoneSecondary", "type": "number", "required": false } } } } ] }, { "id": "IconFont", "path": "src/modules/IconFont", "legacy": false, "compositionType": 1, "exports": [ { "name": "IconFont", "kind": "component", "description": { "primary": "jsdoc", "confidence": "low" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "className": { "name": "className", "type": "string", "required": false }, "icon": { "name": "icon", "type": "AnyIconDefinition", "required": true }, "size": { "name": "size", "type": "IconFontSize", "required": false }, "style": { "name": "style", "type": "React.CSSProperties & Record", "required": false }, "color": { "name": "color", "type": "IconFontColor", "required": false }, "onClick": { "name": "onClick", "type": "(e: React.MouseEvent) => void", "required": false }, "colorDuotonePrimary": { "name": "colorDuotonePrimary", "type": "IconFontColor", "required": false }, "colorDuotoneSecondary": { "name": "colorDuotoneSecondary", "type": "IconFontColor", "required": false }, "opacityDuotonePrimary": { "name": "opacityDuotonePrimary", "type": "number", "required": false }, "opacityDuotoneSecondary": { "name": "opacityDuotoneSecondary", "type": "number", "required": false }, "background": { "name": "background", "type": "boolean", "required": false }, "backgroundColor": { "name": "backgroundColor", "type": "IconBackgroundColor", "required": false }, "backgroundSize": { "name": "backgroundSize", "type": "VisualSize", "required": false }, "padding": { "name": "padding", "type": "'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'", "required": false } } } } ] }, { "id": "InnerButton", "path": "src/modules/InnerButton", "legacy": false, "compositionType": 1, "exports": [ { "name": "InnerButton", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Button permite a los usuarios realizar acciones y tomar decisiones con un solo toque.", "confidence": "medium" }, "examples": [ "import { InnerButton } from '@imj_media/ui';\n\n export default function Example() {\n return (\n <>\n Blue\n Red\n Green\n Orange\n White\n \n )\n }", "import { InnerButton } from '@imj_media/ui';\n\n export default function Example() {\n return (\n <>\n Blue\n Red\n Green\n Orange\n White\n \n )\n }", "import { InnerButton } from '@imj_media/ui';\n\n export default function Example() {\n return (\n <>\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n \n )\n }", "import { InnerButton } from '@imj_media/ui';\n\n export default function Example() {\n return (\n <>\n Blue\n Red\n Green\n Orange\n White\n \n )\n }", "\n Primary\n " ], "props": { "groups": {}, "deprecatedRoot": [ { "name": "badgeColor", "migrateTo": "`badge", "type": "BadgeColor" }, { "name": "badgeLabel", "migrateTo": "`badge", "type": "string" }, { "name": "badgeIcon", "migrateTo": "`badge", "type": "IconType | AnyIconDefinition" }, { "name": "badgeLoading", "migrateTo": "`badge", "jsdoc": "Si es true, muestra un spinner de carga en el badge.", "type": "boolean" }, { "name": "colorIcon", "migrateTo": "`iconProps", "type": "IconFontColor" }, { "name": "iconDuotonePrimary", "migrateTo": "iconProps", "type": "IconFontColor" }, { "name": "iconDuotoneSecondary", "migrateTo": "iconProps", "type": "IconFontColor" }, { "name": "iconDuotoneOpacityPrimary", "migrateTo": "iconProps", "type": "number" }, { "name": "iconDuotoneOpacitySecondary", "migrateTo": "iconProps", "type": "number" }, { "name": "leftSlotDuotonePrimary", "migrateTo": "leftSlotProps", "type": "IconFontColor" }, { "name": "leftSlotDuotoneSecondary", "migrateTo": "leftSlotProps", "type": "IconFontColor" }, { "name": "leftSlotDuotoneOpacityPrimary", "migrateTo": "leftSlotProps", "type": "number" }, { "name": "leftSlotDuotoneOpacitySecondary", "migrateTo": "leftSlotProps", "type": "number" }, { "name": "rightSlotDuotonePrimary", "migrateTo": "rightSlotProps", "type": "IconFontColor" }, { "name": "rightSlotDuotoneSecondary", "migrateTo": "rightSlotProps", "type": "IconFontColor" }, { "name": "rightSlotDuotoneOpacityPrimary", "migrateTo": "rightSlotProps", "type": "number" }, { "name": "rightSlotDuotoneOpacitySecondary", "migrateTo": "rightSlotProps", "type": "number" }, { "name": "onClickIcon", "migrateTo": "`iconProps", "type": "(e: React.MouseEvent) => void" }, { "name": "onClickLeftSlot", "migrateTo": "`leftSlotProps", "type": "(e: React.MouseEvent) => void" }, { "name": "onClickRightSlot", "migrateTo": "`rightSlotProps", "type": "(e: React.MouseEvent) => void" }, { "name": "tooltipPosition", "migrateTo": "tooltip como objeto o tooltipProps", "type": "TooltipPosition" }, { "name": "tooltipAlignment", "migrateTo": "tooltip como objeto o tooltipProps", "type": "TooltipAlignment" }, { "name": "tooltipColor", "migrateTo": "tooltip como objeto o tooltipProps", "type": "TooltipColors" }, { "name": "tooltipDelay", "migrateTo": "tooltip como objeto o tooltipProps", "type": "number" }, { "name": "tooltipAbsolute", "migrateTo": "tooltip como objeto o tooltipProps", "type": "boolean" }, { "name": "defaultTooltipColor", "migrateTo": "tooltip como objeto o tooltipProps", "type": "boolean" }, { "name": "classNameTooltip", "migrateTo": "tooltip como objeto o tooltipProps", "type": "string" }, { "name": "classNameIcon", "migrateTo": "`iconProps", "type": "string" } ], "flat": { "className": { "name": "className", "type": "string", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "classNameLabel": { "name": "classNameLabel", "type": "string", "required": false }, "theme": { "name": "theme", "type": "ButtonTheme", "required": false, "description": "Tema visual del botón (`solid` o variante `icon` deprecada).\n Preferir `solid` y botón solo icono vía `icon` + sin `children`." }, "rounded": { "name": "rounded", "type": "boolean", "required": false }, "clickable": { "name": "clickable", "type": "boolean", "required": false }, "square": { "name": "square", "type": "boolean", "required": false }, "badgeTheme": { "name": "badgeTheme", "type": "BadgeTheme", "required": false }, "badgeSize": { "name": "badgeSize", "type": "BadgeSize", "required": false }, "badgeStroke": { "name": "badgeStroke", "type": "boolean", "required": false }, "badgeIconDuotonePrimary": { "name": "badgeIconDuotonePrimary", "type": "IconFontColor", "required": false }, "badgeIconDuotoneSecondary": { "name": "badgeIconDuotoneSecondary", "type": "IconFontColor", "required": false }, "badgeIconDuotoneOpacityPrimary": { "name": "badgeIconDuotoneOpacityPrimary", "type": "number", "required": false }, "badgeIconDuotoneOpacitySecondary": { "name": "badgeIconDuotoneOpacitySecondary", "type": "number", "required": false }, "color": { "name": "color", "type": "ButtonColors", "required": false }, "icon": { "name": "icon", "type": "VisualSlotType | React.ReactElement | ButtonIconConfig", "required": false, "description": "Icono principal del botón.\n Puede ser un string simple (ej: \"ImageOutlined\"), un ReactElement, o un objeto de configuración completo.\n Si se usa como string simple (sin estilos personalizados), funciona sin deprecación.\n Si se usa como objeto de configuración, tiene la misma funcionalidad que iconProps.\n Para estilos personalizados con props separadas, usar iconProps." }, "DEPRECADAS": { "name": "DEPRECADAS", "type": "usar tooltip como objeto o tooltipProps en su lugar", "required": true }, "leftSlot": { "name": "leftSlot", "type": "VisualSlotType | ButtonSlotConfig", "required": false, "description": "Slot izquierdo del botón.\n Puede ser un string simple (ej: \"EditOutlined\"), un ReactElement, o un objeto de configuración completo.\n Si se usa como string simple (sin estilos personalizados), funciona sin deprecación.\n Si se usa como objeto de configuración, tiene la misma funcionalidad que leftSlotProps.\n Para estilos personalizados con props separadas, usar leftSlotProps." }, "rightSlot": { "name": "rightSlot", "type": "VisualSlotType | ButtonSlotConfig", "required": false, "description": "Slot derecho del botón.\n Puede ser un string simple (ej: \"ArrowRightOutlined\"), un ReactElement, o un objeto de configuración completo.\n Si se usa como string simple (sin estilos personalizados), funciona sin deprecación.\n Si se usa como objeto de configuración, tiene la misma funcionalidad que rightSlotProps.\n Para estilos personalizados con props separadas, usar rightSlotProps." }, "fullWidth": { "name": "fullWidth", "type": "boolean", "required": false }, "size": { "name": "size", "type": "'xxs' | 'xs' | 'sm' | 'md' | 'lg'", "required": false }, "iconSizeExtended": { "name": "iconSizeExtended", "type": "'none' | VisualSize", "required": false }, "link": { "name": "link", "type": "string", "required": false }, "borderable": { "name": "borderable", "type": "boolean | undefined", "required": false }, "target": { "name": "target", "type": "string", "required": false }, "type": { "name": "type", "type": "React.ButtonHTMLAttributes['type']", "required": false, "description": "Atributo nativo `type` del `
\n );\n }\n\n return input;\n}\n" }, { "id": "LegacyButton", "path": "src/modules/LegacyButton", "legacy": true, "legacyReason": "Usa iconos SVG legacy; preferir Button + Icon.", "compositionType": 1, "exports": [ { "name": "LegacyButton", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Botón equivalente a `Button`, pero los slots e iconos usan nombres tipados de `LegacyIcon` (SVG legacy).", "confidence": "medium" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "variant": { "name": "variant", "type": "ButtonProps['variant']", "required": false } } } }, { "name": "InnerLegacyButton", "kind": "component", "description": { "primary": "jsdoc", "confidence": "low" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "variant": { "name": "variant", "type": "ButtonProps['variant']", "required": false } } } } ] }, { "id": "LegacyIcon", "path": "src/modules/LegacyIcon", "legacy": true, "legacyReason": "Set de iconos SVG legacy; preferir Icon / IconFont.", "compositionType": 1, "exports": [ { "name": "LegacyIcon", "kind": "component", "description": { "primary": "storybook", "storybook": "Iconos SVG legacy (", "confidence": "medium" }, "examples": [ "import { LegacyIcon } from '@/modules/LegacyIcon';\n\n\n", "import { LegacyIcon } from '@/modules/LegacyIcon';\n\n\n" ] } ] }, { "id": "Lightbox", "path": "src/modules/Lightbox", "legacy": false, "compositionType": 1, "exports": [ { "name": "Lightbox", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Lightbox permite visualizar imágenes en pantalla completa con navegación, indicadores y controles.", "confidence": "medium" }, "examples": [ "import { useState } from 'react'\nimport { Lightbox, ILightboxImage } from '@/modules/Lightbox'\n\nconst images: ILightboxImage[] = [\n {\n id: 1,\n src: 'https://example.com/image1.jpg',\n title: 'Paisaje de Montaña',\n },\n {\n id: 2,\n src: 'https://example.com/image2.jpg',\n title: 'Naturaleza Salvaje',\n },\n]\n\nexport default function Example() {\n const [isOpen, setIsOpen] = useState(false)\n\n return (\n <>\n \n\n setIsOpen(false)}\n />\n \n )\n}", " setIsOpen(false)}\n displayMode=\"square\"\n/>", "const images: ILightboxImage[] = [\n {\n id: 1,\n src: 'https://example.com/image1.jpg',\n // Sin título\n },\n {\n id: 2,\n src: 'https://example.com/image2.jpg',\n },\n]\n\n setIsOpen(false)}\n/>", " setIsOpen(false)}\n showIndicators={false}\n/>", " setIsOpen(false)}\n showNavigation={false}\n/>" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "images": { "name": "images", "type": "ILightboxImage[]", "required": true }, "initialIndex": { "name": "initialIndex", "type": "number", "required": false }, "isOpen": { "name": "isOpen", "type": "boolean", "required": true }, "onClose": { "name": "onClose", "type": "() => void", "required": true }, "displayMode": { "name": "displayMode", "type": "ImageDisplayMode", "required": false }, "showTitle": { "name": "showTitle", "type": "boolean", "required": false }, "showIndicators": { "name": "showIndicators", "type": "boolean", "required": false }, "showNavigation": { "name": "showNavigation", "type": "boolean", "required": false }, "showCounter": { "name": "showCounter", "type": "boolean", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "overlayClassName": { "name": "overlayClassName", "type": "string", "required": false }, "size": { "name": "size", "type": "'sm' | 'md' | 'lg' | 'full'", "required": false } } } } ] }, { "id": "LinearGraphic", "path": "src/modules/LinearGraphic", "legacy": false, "compositionType": 1, "exports": [ { "name": "LinearGraphic", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente LinearGraphic muestra una barra de progreso con múltiples segmentos, cada uno con su propio color y porcentaje. Soporta tooltips en hover para mostrar información detallada.", "jsdoc": "LinearGraphic - Gráfica lineal de barras de progreso múltiples\nMuestra una barra de progreso con múltiples segmentos, cada uno con su propio\ncolor y porcentaje. Soporta tooltips en hover para mostrar información detallada.", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "data": { "name": "data", "type": "LinearGraphicData[]", "required": true, "description": "Array de datos para cada segmento" }, "colors": { "name": "colors", "type": "LinearGraphicColor[]", "required": true, "description": "Array de colores semánticos para cada segmento" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clase CSS adicional" }, "height": { "name": "height", "type": "number", "required": false, "description": "Altura de la barra en píxeles (por defecto: 8px)" }, "showTooltips": { "name": "showTooltips", "type": "boolean", "required": false, "description": "Si mostrar tooltips en hover (por defecto: true)" }, "showLegend": { "name": "showLegend", "type": "boolean", "required": false, "description": "Si mostrar la leyenda debajo de la gráfica (por defecto: false)" }, "showLegendPercent": { "name": "showLegendPercent", "type": "boolean", "required": false, "description": "Si mostrar el porcentaje en la leyenda (por defecto: false)" }, "legendGap": { "name": "legendGap", "type": "number", "required": false, "description": "Espacio entre leyendas en píxeles (por defecto: 8)" }, "transitionDuration": { "name": "transitionDuration", "type": "number", "required": false, "description": "Duración de la transición en ms (por defecto: 500)" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Si deshabilitar la gráfica" }, "onSegmentHover": { "name": "onSegmentHover", "type": "(data: LinearGraphicData, index: number) => void", "required": false, "description": "Callback cuando se hace hover sobre un segmento" }, "onSegmentLeave": { "name": "onSegmentLeave", "type": "(data: LinearGraphicData, index: number) => void", "required": false, "description": "Callback cuando se sale del hover de un segmento" } } } }, { "name": "LinearGraphicSegment", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente LinearGraphic muestra una barra de progreso con múltiples segmentos, cada uno con su propio color y porcentaje. Soporta tooltips en hover para mostrar información detallada.", "jsdoc": "Datos del segmento */\n data: LinearGraphicData;\n /** Índice del segmento */\n index: number;\n /** Ancho del segmento en porcentaje */\n width: number;\n /** Color semántico del segmento */\n color: LinearGraphicColor;\n /** Si es el primer segmento */\n isFirst: boolean;\n /** Si es el último segmento */\n isLast: boolean;\n /** Altura de la barra */\n height: number;\n /** Duración de la transición */\n transitionDuration: number;\n /** Si mostrar tooltip */\n showTooltip: boolean;\n /** Callback cuando se hace hover */\n onHover?: (data: LinearGraphicData, index: number) => void;\n /** Callback cuando se sale del hover */\n onLeave?: (data: LinearGraphicData, index: number) => void;\n}\n\n/**\nSegmento individual de la gráfica lineal\nÁtomo que representa una porción de la barra de progres", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "data": { "name": "data", "type": "LinearGraphicData", "required": true, "description": "Datos del segmento" }, "index": { "name": "index", "type": "number", "required": true, "description": "Índice del segmento" }, "width": { "name": "width", "type": "number", "required": true, "description": "Ancho del segmento en porcentaje" }, "color": { "name": "color", "type": "LinearGraphicColor", "required": true, "description": "Color semántico del segmento" }, "isFirst": { "name": "isFirst", "type": "boolean", "required": true, "description": "Si es el primer segmento" }, "isLast": { "name": "isLast", "type": "boolean", "required": true, "description": "Si es el último segmento" }, "height": { "name": "height", "type": "number", "required": true, "description": "Altura de la barra" }, "transitionDuration": { "name": "transitionDuration", "type": "number", "required": true, "description": "Duración de la transición" }, "showTooltip": { "name": "showTooltip", "type": "boolean", "required": true, "description": "Si mostrar tooltip" }, "onHover": { "name": "onHover", "type": "(data: LinearGraphicData, index: number) => void", "required": false, "description": "Callback cuando se hace hover" }, "onLeave": { "name": "onLeave", "type": "(data: LinearGraphicData, index: number) => void", "required": false, "description": "Callback cuando se sale del hover" } } } } ] }, { "id": "ListWithDataInHover", "path": "src/modules/ListWithDataInHover", "legacy": false, "compositionType": 1, "exports": [ { "name": "ListWithDataInHover", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente ListWithDataInHover muestra una lista de elementos, cada uno con un indicador de color y un nombre. Al hacer hover sobre un elemento, se muestra un tooltip con el porcentaje asociado.", "jsdoc": "ListWithDataInHover - Lista de elementos con tooltips que muestran datos\nMuestra una lista de elementos, cada uno con un indicador de color y un nombre.\nAl hacer hover sobre un elemento, se muestra un tooltip con el porcentaje asociado.", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "data": { "name": "data", "type": "ListWithDataInHoverItem[]", "required": true, "description": "Array de datos para cada elemento" }, "colors": { "name": "colors", "type": "ListWithDataInHoverColor[]", "required": true, "description": "Array de colores semánticos para cada elemento" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clase CSS adicional" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Si deshabilitar la lista" }, "indicatorSize": { "name": "indicatorSize", "type": "number", "required": false, "description": "Tamaño del indicador circular en píxeles (por defecto: 8px)" }, "gap": { "name": "gap", "type": "number", "required": false, "description": "Gap entre elementos en píxeles (por defecto: 4px)" }, "showTooltips": { "name": "showTooltips", "type": "boolean", "required": false, "description": "Si mostrar tooltips (por defecto: true)" }, "showPercent": { "name": "showPercent", "type": "boolean", "required": false, "description": "Si mostrar el porcentaje junto al nombre (por defecto: true)" }, "tooltipPosition": { "name": "tooltipPosition", "type": "InlineTooltipPosition", "required": false, "description": "Posición del tooltip (por defecto: 'over')" }, "onItemHover": { "name": "onItemHover", "type": "(item: ListWithDataInHoverItem, index: number) => void", "required": false, "description": "Callback cuando se hace hover sobre un elemento" }, "onItemLeave": { "name": "onItemLeave", "type": "(item: ListWithDataInHoverItem, index: number) => void", "required": false, "description": "Callback cuando se sale del hover de un elemento" } } } } ] }, { "id": "Lists", "path": "src/modules/Lists", "legacy": false, "compositionType": 1, "exports": [ { "name": "Lists", "kind": "component", "description": { "primary": "storybook", "storybook": "Organismos de lista por variante (", "readme": "# Componentes de Listas\n\nSistema completo de componentes de listas con **13 variantes** (`variant` en `ListBase`), con **DRY**, **SOC**, **Atomic Design** y **TypeScript Discriminated Unions**.\n\n## API agrupada en `ListBase` (recomendada)\n\nLa API organiza datos y callbacks en **bloques** en la medida de lo posible. Si un valor existe en un bloque y también en la raíz del componente, **gana el bloque**.\n\n### Bloques por responsabilidad\n\n| Bloque | Uso |\n| -------------------------- | -------------------------------------------------------------------------------------------------------------- |\n| **`list`** | Datos: `items`, `groups`, `users`, etc. (depende de `variant`) |\n| **`selection`** | Estado de selección: `currentValue`, `selectedValue`, `selectedUserId`, `selectedItem`, `darkMode` (perfil), … |\n| **`events`** | Callbacks (`onItemClick`, `onSelectionChange`, …) |\n| **`labels`** | Textos: `title`, `searchPlaceholder` (users-select), `clearLabel` / `applyLabel`, … |\n| **`profile`** + **`menu`** | Solo `user-profile`: `profile.user` y `menu.items` |\n| **`options`** | Solo `toggle`: p. ej. `enableReordering` |\n| **`content`** | Solo `empty`: p. ej. `icon` |\n| **`search`** | Solo `search-multi-checkbox`: `show`, `placeholder` |\n\n### Ejemplo mínimo (`variant=\"default\"`)\n\n```tsx\nimport { ListBase } from '@/modules/Lists';\n\n void", "required": false }, "icon": { "name": "icon", "type": "VisualSlotType", "required": false }, "iconDuotonePrimary": { "name": "iconDuotonePrimary", "type": "IconFontColor", "required": false }, "iconDuotoneSecondary": { "name": "iconDuotoneSecondary", "type": "IconFontColor", "required": false }, "iconDuotoneOpacityPrimary": { "name": "iconDuotoneOpacityPrimary", "type": "number", "required": false }, "iconDuotoneOpacitySecondary": { "name": "iconDuotoneOpacitySecondary", "type": "number", "required": false }, "valueName": { "name": "valueName", "type": "string", "required": false }, "titleName": { "name": "titleName", "type": "string", "required": false }, "children": { "name": "children", "type": "React.ReactNode", "required": false }, "hasCurrent": { "name": "hasCurrent", "type": "boolean", "required": false }, "padding": { "name": "padding", "type": "'none' | 'sm' | 'md' | 'lg'", "required": false } } } }, "deprecatedRoot": [], "flat": { "className": { "name": "className", "type": "string", "required": false }, "currentValue": { "name": "currentValue", "type": "string", "required": false }, "items": { "name": "items", "type": "ListItemData[]", "required": false }, "onClick": { "name": "onClick", "type": "(item: ListItemData, e: React.MouseEvent) => void", "required": false }, "icon": { "name": "icon", "type": "VisualSlotType", "required": false }, "iconDuotonePrimary": { "name": "iconDuotonePrimary", "type": "IconFontColor", "required": false }, "iconDuotoneSecondary": { "name": "iconDuotoneSecondary", "type": "IconFontColor", "required": false }, "iconDuotoneOpacityPrimary": { "name": "iconDuotoneOpacityPrimary", "type": "number", "required": false }, "iconDuotoneOpacitySecondary": { "name": "iconDuotoneOpacitySecondary", "type": "number", "required": false }, "valueName": { "name": "valueName", "type": "string", "required": false }, "titleName": { "name": "titleName", "type": "string", "required": false }, "children": { "name": "children", "type": "React.ReactNode", "required": false }, "hasCurrent": { "name": "hasCurrent", "type": "boolean", "required": false }, "padding": { "name": "padding", "type": "'none' | 'sm' | 'md' | 'lg'", "required": false } } } } ] }, { "id": "Logo", "path": "src/modules/Logo", "legacy": false, "compositionType": 1, "exports": [ { "name": "Logo", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Logo permite mostrar el logo del sistema de diseño en diferentes tamaños.", "jsdoc": "Logo - Componente de logo de la aplicación\nRenderiza el logotipo de marca como SVG (`FillLogoIcon`).\nSoporta diferentes tamaños predefinidos.", "confidence": "high" }, "examples": [ "import { Logo } from '@/modules/Logo';\n\n export default function Example() {\n return \n }", "\n \n ", "
\n
\n \n \n
\n
\n \n
\n
", "
\n
\n \n

© 2024 Tu Empresa. Todos los derechos reservados.

\n
\n \n
", "import { Logo } from '@/modules/Logo';\n\n export default function Example() {\n return \n }" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "size": { "name": "size", "type": "LogoSize", "required": false } } } } ] }, { "id": "Message", "path": "src/modules/Message", "legacy": true, "legacyReason": "API legada de mensajes; preferir Notification.", "compositionType": 1, "exports": [ { "name": "Toaster", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Componente que renderiza todos los toasts en un portal", "readme": "# Módulo Message (`@imj_media/ui`)\n\nSuperficie del design system para **mensajes efímeros en pantalla**: toasts (mensajes cortos apilables) y **notificaciones** (tarjetas agrupables por posición y “mazos” `primary` / `secondary` / `auto`). Todo se pinta vía **portal** en `document.body` para no romper el flujo del layout de la app.\n\n## Qué resuelve y cómo se reparte la API\n\n| Concepto | Rol | API imperativa típica | Host React |\n|----------|-----|----------------------|------------|\n| **Toast** | Mensaje temporal apilable (éxito, error, info, warning, genérico). | `toast.*` delega en `messageService` (véase `Message.services.ts`). | `` solo toasts. |\n| **Notificación** | Tarjeta agrupada (`notification.message`, stacks, dismiss por grupo/mazo). | `notification.*` delega en `notificationService`. | `` solo notificaciones. |\n| **`notify`** | **Fachada unificada**: expone métodos de toast **y** de notificación (`notify.message`, `notify.dismissNotificationStack`, etc.) para un solo import en consumidores. | `notify` en `Message.services.ts`. | Cualquiera de los hosts; suele usarse con `` si la app necesita ambos. |\n| **`Messaging`** | Un único portal que monta **toasts y notificaciones** (combina `MessagePositions` + `NotificationPositions`). | Igual que arriba (`toast`, `notification`, `notify`). | `` |\n\n**`Toaster` + `Notifier` vs `Messaging`:** son equivalentes en datos (mismos hooks/servicios); la diferencia es **qué montas en el árbol**. Si solo usas toasts, basta ``. Si solo notificaciones, ``. Si la aplicación mezcla ambos, `` evita duplicar portales. Sin al menos uno de estos componentes en la app, las llamadas imperativas no tienen dónde renderizarse.\n\nPara exports desde el paquete: el barrel del módulo reexporta componentes y la API vía `Message.api.ts` (consumo desde `@imj_media/ui` según el `index` del paquete).\n\n## Estructura de carpetas\n\n```\nMessage/\n├── components/", "confidence": "medium" }, "examples": [ "import { notify, Messaging, Button } from '@imj_media';\n\n export const App = () => (\n
\n \n \n
\n )", "import { notify } from '@imj_media';\n\n // Mensajes básicos\n notify.success(\"Operación completada exitosamente\")\n notify.error(\"Ha ocurrido un error\")\n notify.info(\"Información importante\")\n notify.warning(\"Advertencia: acción requerida\")\n \n // Notificaciones agrupadas (mazos)\n notify.message({ stackGroup: 'secondary', title: 'Mensaje informativo neutro' })\n notify.message({ title: '¡Nueva funcionalidad disponible!' })", "// ✅ Código existente sigue funcionando sin cambios\n import { toast, Toaster, Button } from '@imj_media';\n\n export const App = () => (\n
\n \n \n
\n )", "import { toast } from '@imj_media';\n\n toast.success('Toast con API legacy');\n toast.error('Error con toast legacy');\n toast.info('Info con toast legacy');", "// ============================================\n // FORMA ANTIGUA (toast)\n // ============================================\n import { toast, Toaster } from '@imj_media';\n \n toast.success(\"Mensaje\")\n toast.error(\"Error\")\n toast.info(\"Info\")\n toast.warning(\"Warning\")\n\n // ============================================\n // FORMA NUEVA (notify) - Recomendada\n // ============================================\n import { notify, Messaging } from '@imj_media';\n \n notify.success(\"Mensaje\")\n notify.error(\"Error\")\n notify.info(\"Info\")\n notify.warning(\"Warning\")\n \n // ✨ Métodos adicionales\n notify.message({ stackGroup: 'secondary', title: 'Mensaje neutro' })\n notify.message({ title: 'Mensaje de marca' })", "// 1) App\n import { notify, Messaging } from '@imj_media';\n\n export const App = () => (\n <>\n \n {/* … */}\n \n );\n\n // 2) Defaults del servicio (opcional)\n notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\", "import { notify } from '@imj_media';\n\n notify.message({\n title: 'Cola única',\n message: 'Todas las intenciones comparten el mazo auto.',\n duration: 8000,\n appearance: { intent: 'informativa' },\n });", "import { notify } from '@imj_media';\n\n notify.message({\n stackGroup: 'primary',\n title: 'Brand',\n message: 'Mazo primary',\n duration: 8000,\n });\n\n notify.message({\n stackGroup: 'secondary',\n title: 'Neutral',\n message: 'Mazo secondary',\n duration: 8000,\n });", "import { notification } from '@imj_media';\n\n notification.message({ title: 'Encola en auto' });\n notification.dismissStack('auto');\n notification.dismissStack('primary');\n notification.dismissStack('secondary');", "// 1) App\n import { notify, Messaging } from '@imj_media';\n\n export const App = () => (\n <>\n \n {/* … */}\n \n );\n\n // 2) Defaults del servicio (opcional)\n notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\`notification\\`)\n notify.message({\n title: 'Título corto',\n message: 'Cuerpo por defecto',\n duration: 10000,\n stackGroup: 'secondary', // u omitir → mazo \\`auto\\`\n appearance: { intent: 'preventiva', variant: 'outlined' },\n content: { title: 'Título corto', kind: 'default', description: 'Texto largo…' },\n meta: { presentation: 'popup' },\n events: { onClose: () => {} },\n });", "import { notify, Messaging } from '@imj_media';\n\n // En la app: \n notify.message({\n title: 'Aviso',\n message: 'Texto breve con la apariencia por defecto del sistema.',\n duration: 8000,\n // Equivale a appearance: { intent: 'informativa' } (valor por defecto del componente Notification)\n });", "import { notify } from '@imj_media';\n\n // Mismo tipo: stack compartido (máx. stackMax, por defecto 3)\n notify.message({ stackGroup: 'primary', title: 'Mensaje 1' })\n notify.message({ stackGroup: 'primary', title: 'Mensaje 2' })\n notify.message({ stackGroup: 'primary', title: 'Mensaje 3' }) // Contador en la frontal\n\n // Configurar tamaño del stack (opcional)\n notify.configureNotification({ stackMax: 5 })\n\n // stackGroup 'secondary' usa otro mazo\n notify.message({ stackGroup: 'secondary', title: 'Recordatorio' })\n notify.message({ stackGroup: 'secondary', title: 'Otro recordatorio' })", "import { notify } from '@imj_media';\n\n // Mismo mazo primary: cada encolado con título y mensaje distintos\n notify.message({\n stackGroup: 'primary',\n title: 'Actualización · #1',\n subtitle: 'Hora 14:05:12',\n message: 'Revisa el panel principal. (seq 1)',\n });\n\n // En la app: setInterval o scheduler que encole copy nuevo cada N ms\n // notify.message({ stackGroup: 'primary', title: '…', message: '…' });", "import { notify } from '@imj_media';\n\n // Una notificación en el mazo (sin pie de apilado)\n notify.message({\n stackGroup: 'primary',\n title: 'Actualización · #1',\n message: 'Revisa el panel principal. (seq 1)',\n });\n\n // Dos en el mismo mazo: la frontal muestra leyenda personalizada\n notify.message({\n stackGroup: 'primary',\n title: 'Aviso · #2',\n message: 'Hay cambios pendientes. (seq 2)',\n });\n notify.message({\n stackGroup: 'primary',\n title: 'Alerta · #3',\n message: 'La cola se ha actualizado. (seq 3)',\n stackSummaryLegend: 'Tienes 8 mensajes sin leer',\n });", "// Cada nueva notificación reinicia el timer\n notify.message({ stackGroup: 'primary', title: 'Mensaje 1' }) // Timer: 5s\n // Después de 2s...\n notify.message({ stackGroup: 'primary', title: 'Mensaje 2' }) // Timer: 5s (reiniciado)" ] }, { "name": "Notifier", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Componente que renderiza todas las notificaciones en un portal", "readme": "# Módulo Message (`@imj_media/ui`)\n\nSuperficie del design system para **mensajes efímeros en pantalla**: toasts (mensajes cortos apilables) y **notificaciones** (tarjetas agrupables por posición y “mazos” `primary` / `secondary` / `auto`). Todo se pinta vía **portal** en `document.body` para no romper el flujo del layout de la app.\n\n## Qué resuelve y cómo se reparte la API\n\n| Concepto | Rol | API imperativa típica | Host React |\n|----------|-----|----------------------|------------|\n| **Toast** | Mensaje temporal apilable (éxito, error, info, warning, genérico). | `toast.*` delega en `messageService` (véase `Message.services.ts`). | `` solo toasts. |\n| **Notificación** | Tarjeta agrupada (`notification.message`, stacks, dismiss por grupo/mazo). | `notification.*` delega en `notificationService`. | `` solo notificaciones. |\n| **`notify`** | **Fachada unificada**: expone métodos de toast **y** de notificación (`notify.message`, `notify.dismissNotificationStack`, etc.) para un solo import en consumidores. | `notify` en `Message.services.ts`. | Cualquiera de los hosts; suele usarse con `` si la app necesita ambos. |\n| **`Messaging`** | Un único portal que monta **toasts y notificaciones** (combina `MessagePositions` + `NotificationPositions`). | Igual que arriba (`toast`, `notification`, `notify`). | `` |\n\n**`Toaster` + `Notifier` vs `Messaging`:** son equivalentes en datos (mismos hooks/servicios); la diferencia es **qué montas en el árbol**. Si solo usas toasts, basta ``. Si solo notificaciones, ``. Si la aplicación mezcla ambos, `` evita duplicar portales. Sin al menos uno de estos componentes en la app, las llamadas imperativas no tienen dónde renderizarse.\n\nPara exports desde el paquete: el barrel del módulo reexporta componentes y la API vía `Message.api.ts` (consumo desde `@imj_media/ui` según el `index` del paquete).\n\n## Estructura de carpetas\n\n```\nMessage/\n├── components/", "confidence": "medium" }, "examples": [ "import { notify, Messaging, Button } from '@imj_media';\n\n export const App = () => (\n
\n \n \n
\n )", "import { notify } from '@imj_media';\n\n // Mensajes básicos\n notify.success(\"Operación completada exitosamente\")\n notify.error(\"Ha ocurrido un error\")\n notify.info(\"Información importante\")\n notify.warning(\"Advertencia: acción requerida\")\n \n // Notificaciones agrupadas (mazos)\n notify.message({ stackGroup: 'secondary', title: 'Mensaje informativo neutro' })\n notify.message({ title: '¡Nueva funcionalidad disponible!' })", "// ✅ Código existente sigue funcionando sin cambios\n import { toast, Toaster, Button } from '@imj_media';\n\n export const App = () => (\n
\n \n \n
\n )", "import { toast } from '@imj_media';\n\n toast.success('Toast con API legacy');\n toast.error('Error con toast legacy');\n toast.info('Info con toast legacy');", "// ============================================\n // FORMA ANTIGUA (toast)\n // ============================================\n import { toast, Toaster } from '@imj_media';\n \n toast.success(\"Mensaje\")\n toast.error(\"Error\")\n toast.info(\"Info\")\n toast.warning(\"Warning\")\n\n // ============================================\n // FORMA NUEVA (notify) - Recomendada\n // ============================================\n import { notify, Messaging } from '@imj_media';\n \n notify.success(\"Mensaje\")\n notify.error(\"Error\")\n notify.info(\"Info\")\n notify.warning(\"Warning\")\n \n // ✨ Métodos adicionales\n notify.message({ stackGroup: 'secondary', title: 'Mensaje neutro' })\n notify.message({ title: 'Mensaje de marca' })", "// 1) App\n import { notify, Messaging } from '@imj_media';\n\n export const App = () => (\n <>\n \n {/* … */}\n \n );\n\n // 2) Defaults del servicio (opcional)\n notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\", "import { notify } from '@imj_media';\n\n notify.message({\n title: 'Cola única',\n message: 'Todas las intenciones comparten el mazo auto.',\n duration: 8000,\n appearance: { intent: 'informativa' },\n });", "import { notify } from '@imj_media';\n\n notify.message({\n stackGroup: 'primary',\n title: 'Brand',\n message: 'Mazo primary',\n duration: 8000,\n });\n\n notify.message({\n stackGroup: 'secondary',\n title: 'Neutral',\n message: 'Mazo secondary',\n duration: 8000,\n });", "import { notification } from '@imj_media';\n\n notification.message({ title: 'Encola en auto' });\n notification.dismissStack('auto');\n notification.dismissStack('primary');\n notification.dismissStack('secondary');", "// 1) App\n import { notify, Messaging } from '@imj_media';\n\n export const App = () => (\n <>\n \n {/* … */}\n \n );\n\n // 2) Defaults del servicio (opcional)\n notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\`notification\\`)\n notify.message({\n title: 'Título corto',\n message: 'Cuerpo por defecto',\n duration: 10000,\n stackGroup: 'secondary', // u omitir → mazo \\`auto\\`\n appearance: { intent: 'preventiva', variant: 'outlined' },\n content: { title: 'Título corto', kind: 'default', description: 'Texto largo…' },\n meta: { presentation: 'popup' },\n events: { onClose: () => {} },\n });", "import { notify, Messaging } from '@imj_media';\n\n // En la app: \n notify.message({\n title: 'Aviso',\n message: 'Texto breve con la apariencia por defecto del sistema.',\n duration: 8000,\n // Equivale a appearance: { intent: 'informativa' } (valor por defecto del componente Notification)\n });", "import { notify } from '@imj_media';\n\n // Mismo tipo: stack compartido (máx. stackMax, por defecto 3)\n notify.message({ stackGroup: 'primary', title: 'Mensaje 1' })\n notify.message({ stackGroup: 'primary', title: 'Mensaje 2' })\n notify.message({ stackGroup: 'primary', title: 'Mensaje 3' }) // Contador en la frontal\n\n // Configurar tamaño del stack (opcional)\n notify.configureNotification({ stackMax: 5 })\n\n // stackGroup 'secondary' usa otro mazo\n notify.message({ stackGroup: 'secondary', title: 'Recordatorio' })\n notify.message({ stackGroup: 'secondary', title: 'Otro recordatorio' })", "import { notify } from '@imj_media';\n\n // Mismo mazo primary: cada encolado con título y mensaje distintos\n notify.message({\n stackGroup: 'primary',\n title: 'Actualización · #1',\n subtitle: 'Hora 14:05:12',\n message: 'Revisa el panel principal. (seq 1)',\n });\n\n // En la app: setInterval o scheduler que encole copy nuevo cada N ms\n // notify.message({ stackGroup: 'primary', title: '…', message: '…' });", "import { notify } from '@imj_media';\n\n // Una notificación en el mazo (sin pie de apilado)\n notify.message({\n stackGroup: 'primary',\n title: 'Actualización · #1',\n message: 'Revisa el panel principal. (seq 1)',\n });\n\n // Dos en el mismo mazo: la frontal muestra leyenda personalizada\n notify.message({\n stackGroup: 'primary',\n title: 'Aviso · #2',\n message: 'Hay cambios pendientes. (seq 2)',\n });\n notify.message({\n stackGroup: 'primary',\n title: 'Alerta · #3',\n message: 'La cola se ha actualizado. (seq 3)',\n stackSummaryLegend: 'Tienes 8 mensajes sin leer',\n });", "// Cada nueva notificación reinicia el timer\n notify.message({ stackGroup: 'primary', title: 'Mensaje 1' }) // Timer: 5s\n // Después de 2s...\n notify.message({ stackGroup: 'primary', title: 'Mensaje 2' }) // Timer: 5s (reiniciado)" ] }, { "name": "Messaging", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Componente unificado que renderiza tanto toasts como notificaciones", "readme": "# Módulo Message (`@imj_media/ui`)\n\nSuperficie del design system para **mensajes efímeros en pantalla**: toasts (mensajes cortos apilables) y **notificaciones** (tarjetas agrupables por posición y “mazos” `primary` / `secondary` / `auto`). Todo se pinta vía **portal** en `document.body` para no romper el flujo del layout de la app.\n\n## Qué resuelve y cómo se reparte la API\n\n| Concepto | Rol | API imperativa típica | Host React |\n|----------|-----|----------------------|------------|\n| **Toast** | Mensaje temporal apilable (éxito, error, info, warning, genérico). | `toast.*` delega en `messageService` (véase `Message.services.ts`). | `` solo toasts. |\n| **Notificación** | Tarjeta agrupada (`notification.message`, stacks, dismiss por grupo/mazo). | `notification.*` delega en `notificationService`. | `` solo notificaciones. |\n| **`notify`** | **Fachada unificada**: expone métodos de toast **y** de notificación (`notify.message`, `notify.dismissNotificationStack`, etc.) para un solo import en consumidores. | `notify` en `Message.services.ts`. | Cualquiera de los hosts; suele usarse con `` si la app necesita ambos. |\n| **`Messaging`** | Un único portal que monta **toasts y notificaciones** (combina `MessagePositions` + `NotificationPositions`). | Igual que arriba (`toast`, `notification`, `notify`). | `` |\n\n**`Toaster` + `Notifier` vs `Messaging`:** son equivalentes en datos (mismos hooks/servicios); la diferencia es **qué montas en el árbol**. Si solo usas toasts, basta ``. Si solo notificaciones, ``. Si la aplicación mezcla ambos, `` evita duplicar portales. Sin al menos uno de estos componentes en la app, las llamadas imperativas no tienen dónde renderizarse.\n\nPara exports desde el paquete: el barrel del módulo reexporta componentes y la API vía `Message.api.ts` (consumo desde `@imj_media/ui` según el `index` del paquete).\n\n## Estructura de carpetas\n\n```\nMessage/\n├── components/", "confidence": "medium" }, "examples": [ "import { notify, Messaging, Button } from '@imj_media';\n\n export const App = () => (\n
\n \n \n
\n )", "import { notify } from '@imj_media';\n\n // Mensajes básicos\n notify.success(\"Operación completada exitosamente\")\n notify.error(\"Ha ocurrido un error\")\n notify.info(\"Información importante\")\n notify.warning(\"Advertencia: acción requerida\")\n \n // Notificaciones agrupadas (mazos)\n notify.message({ stackGroup: 'secondary', title: 'Mensaje informativo neutro' })\n notify.message({ title: '¡Nueva funcionalidad disponible!' })", "// ✅ Código existente sigue funcionando sin cambios\n import { toast, Toaster, Button } from '@imj_media';\n\n export const App = () => (\n
\n \n \n
\n )", "import { toast } from '@imj_media';\n\n toast.success('Toast con API legacy');\n toast.error('Error con toast legacy');\n toast.info('Info con toast legacy');", "// ============================================\n // FORMA ANTIGUA (toast)\n // ============================================\n import { toast, Toaster } from '@imj_media';\n \n toast.success(\"Mensaje\")\n toast.error(\"Error\")\n toast.info(\"Info\")\n toast.warning(\"Warning\")\n\n // ============================================\n // FORMA NUEVA (notify) - Recomendada\n // ============================================\n import { notify, Messaging } from '@imj_media';\n \n notify.success(\"Mensaje\")\n notify.error(\"Error\")\n notify.info(\"Info\")\n notify.warning(\"Warning\")\n \n // ✨ Métodos adicionales\n notify.message({ stackGroup: 'secondary', title: 'Mensaje neutro' })\n notify.message({ title: 'Mensaje de marca' })", "// 1) App\n import { notify, Messaging } from '@imj_media';\n\n export const App = () => (\n <>\n \n {/* … */}\n \n );\n\n // 2) Defaults del servicio (opcional)\n notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\", "import { notify } from '@imj_media';\n\n notify.message({\n title: 'Cola única',\n message: 'Todas las intenciones comparten el mazo auto.',\n duration: 8000,\n appearance: { intent: 'informativa' },\n });", "import { notify } from '@imj_media';\n\n notify.message({\n stackGroup: 'primary',\n title: 'Brand',\n message: 'Mazo primary',\n duration: 8000,\n });\n\n notify.message({\n stackGroup: 'secondary',\n title: 'Neutral',\n message: 'Mazo secondary',\n duration: 8000,\n });", "import { notification } from '@imj_media';\n\n notification.message({ title: 'Encola en auto' });\n notification.dismissStack('auto');\n notification.dismissStack('primary');\n notification.dismissStack('secondary');", "// 1) App\n import { notify, Messaging } from '@imj_media';\n\n export const App = () => (\n <>\n \n {/* … */}\n \n );\n\n // 2) Defaults del servicio (opcional)\n notify.configureNotification({ duration: 8000, stackMax: 3, showTimer: true });\n\n // 3) Encolar: campos de tarjeta en la raíz (equivalente a anidarlos en \\`notification\\`)\n notify.message({\n title: 'Título corto',\n message: 'Cuerpo por defecto',\n duration: 10000,\n stackGroup: 'secondary', // u omitir → mazo \\`auto\\`\n appearance: { intent: 'preventiva', variant: 'outlined' },\n content: { title: 'Título corto', kind: 'default', description: 'Texto largo…' },\n meta: { presentation: 'popup' },\n events: { onClose: () => {} },\n });", "import { notify, Messaging } from '@imj_media';\n\n // En la app: \n notify.message({\n title: 'Aviso',\n message: 'Texto breve con la apariencia por defecto del sistema.',\n duration: 8000,\n // Equivale a appearance: { intent: 'informativa' } (valor por defecto del componente Notification)\n });", "import { notify } from '@imj_media';\n\n // Mismo tipo: stack compartido (máx. stackMax, por defecto 3)\n notify.message({ stackGroup: 'primary', title: 'Mensaje 1' })\n notify.message({ stackGroup: 'primary', title: 'Mensaje 2' })\n notify.message({ stackGroup: 'primary', title: 'Mensaje 3' }) // Contador en la frontal\n\n // Configurar tamaño del stack (opcional)\n notify.configureNotification({ stackMax: 5 })\n\n // stackGroup 'secondary' usa otro mazo\n notify.message({ stackGroup: 'secondary', title: 'Recordatorio' })\n notify.message({ stackGroup: 'secondary', title: 'Otro recordatorio' })", "import { notify } from '@imj_media';\n\n // Mismo mazo primary: cada encolado con título y mensaje distintos\n notify.message({\n stackGroup: 'primary',\n title: 'Actualización · #1',\n subtitle: 'Hora 14:05:12',\n message: 'Revisa el panel principal. (seq 1)',\n });\n\n // En la app: setInterval o scheduler que encole copy nuevo cada N ms\n // notify.message({ stackGroup: 'primary', title: '…', message: '…' });", "import { notify } from '@imj_media';\n\n // Una notificación en el mazo (sin pie de apilado)\n notify.message({\n stackGroup: 'primary',\n title: 'Actualización · #1',\n message: 'Revisa el panel principal. (seq 1)',\n });\n\n // Dos en el mismo mazo: la frontal muestra leyenda personalizada\n notify.message({\n stackGroup: 'primary',\n title: 'Aviso · #2',\n message: 'Hay cambios pendientes. (seq 2)',\n });\n notify.message({\n stackGroup: 'primary',\n title: 'Alerta · #3',\n message: 'La cola se ha actualizado. (seq 3)',\n stackSummaryLegend: 'Tienes 8 mensajes sin leer',\n });", "// Cada nueva notificación reinicia el timer\n notify.message({ stackGroup: 'primary', title: 'Mensaje 1' }) // Timer: 5s\n // Después de 2s...\n notify.message({ stackGroup: 'primary', title: 'Mensaje 2' }) // Timer: 5s (reiniciado)" ] } ] }, { "id": "Modal", "path": "src/modules/Modal", "legacy": false, "compositionType": 2, "exports": [ { "name": "Modal", "kind": "compound-root", "description": { "primary": "storybook", "storybook": "El componente ModalImage permite mostrar una imagen dentro de un modal. Soporta modo thumbnail que se expande al hacer clic, opcionalmente otra URL (", "readme": "# Modal Component\n\nComponente de modal/diálogo versátil y configurable con soporte para múltiples tamaños, botones personalizados, tabs, iconos, badges y un sistema de compound components.\n\n## Estructura\n\n```\nModal/\n├── Modal.tsx # Componente principal\n├── components/ # Subcomponentes (Header, Body, Footer)\n├── hooks/ # Hooks personalizados\n├── context/ # Context para estado del modal\n├── stories/\n│ └── Modal.stories.tsx # Storybook stories\n└── index.ts # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Modal } from '@imj_media/ui';\n\n// Modal simple\n setIsOpen(false)}\n title=\"Título del Modal\"\n>\n Contenido del modal\n\n\n// Modal con footer\n setIsOpen(false)}\n title=\"Confirmar acción\"\n>\n ¿Estás seguro de que deseas continuar?\n \n \n \n \n\n```\n\n## Props Principales\n\n### Control del Modal\n\n- `isOpen: boolean` - Si el modal está abierto\n- `onClose: () => void` - Callback para cerrar el modal\n- `title?: string` - Título del modal\n- `size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'` - Tamaño del modal (default: `'md'`)\n- `zIndex?: number` - Z-index del modal (default: `52`, por encima de capas sticky de la tabla)\n\n### Comportamiento\n\n- `showCloseButton?: boolean` - Mostrar botón de cerrar (default: `true`)\n- `disableEscapeClose?: boolean` - Deshabilitar cierre con Escape (default: `false`)\n- `disableOutsideClick?: boolean` - Deshabilitar cierre al hacer clic fuera (default: `false`)\n- `disableOutsideTab?: boolean` - Deshabilitar navegación fuera del modal (default: `true`)\n\n### Iconos y Badges\n\n- `icon?: IconType | AnyIconDefinition` - Icono principal del modal\n- `iconConfig?: ButtonIconConfig` - Configuración com", "confidence": "high" }, "examples": [ "import { useState } from 'react';\n import { Modal } from '@/modules/Modal';\n import { Button } from '@/modules/Button';\n\n export default function Example() {\n const [isOpen, setIsOpen] = useState(false);\n\n const handleClose = () => {\n setIsOpen(false);\n };\n\n return (\n
\n \n \n \n

Este es un modal básico con configuración por defecto.

\n

Incluye título, botón de cerrar y footer automático.

\n \n \n
\n )\n }", "\n …\n\n\n", "import { useState } from 'react';\n import { Modal } from '@/modules/Modal';\n import { Button } from '@/modules/Button';\n\n export default function Example() {\n const [isOpen, setIsOpen] = useState(false);\n\n const handleClose = () => {\n setIsOpen(false);\n };\n\n return (\n
\n \n \n \n

Este es un modal con iconos en los botones.

\n \n \n
\n )\n }", "\n …\n", "import { useState } from 'react';\n import { Modal } from '@/modules/Modal';\n import { Button } from '@/modules/Button';\n\n export default function Example() {\n const [isOpen, setIsOpen] = useState(false);\n\n const handleClose = () => {\n setIsOpen(false);\n };\n\n return (\n
\n \n {\n console.log('clicked');\n }}\n >\n \n

Este es un modal básico con configuración por defecto.

\n

Incluye título, botón de cerrar y footer automático.

\n \n \n
\n )\n }", "import { useState } from 'react';\nimport { Modal } from '@/modules/Modal';\n\nexport default function DifferentThumbnailSizes() {\n const [isOpen, setIsOpen] = useState(false);\n const [thumbnailSize, setThumbnailSize] = useState<'sm' | 'md' | 'lg' | 'xl' | 'auto'>('md');\n\n return (\n setIsOpen(false)} title=\"Imagen\" size=\"lg\">\n \n
\n

Lorem ipsum dolor sit amet...

\n
\n \n
\n

Duis aute irure dolor...

\n
\n \n \n );\n}", "import { useState } from 'react';\nimport { Modal } from '@/modules/Modal';\n\nexport default function DifferentPadding() {\n const [isOpen, setIsOpen] = useState(false);\n const [padding, setPadding] = useState<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>('md');\n\n return (\n setIsOpen(false)} title=\"Imagen\" size=\"lg\">\n \n \n \n \n );\n}", "import { useState } from 'react';\nimport { Modal } from '@/modules/Modal';\n\nexport default function DifferentObjectFit() {\n const [isOpen, setIsOpen] = useState(false);\n const [objectFit, setObjectFit] = useState<'cover' | 'contain' | 'fill' | 'none' | 'scale-down'>('cover');\n\n return (\n setIsOpen(false)} title=\"Imagen\" size=\"lg\">\n \n \n \n \n );\n}", "import { useState } from 'react';\nimport { Modal } from '@/modules/Modal';\n\nexport default function CombinedProps() {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n setIsOpen(false)} title=\"Imagen Completa\" size=\"xl\">\n \n \n \n \n );\n}", "import { useState } from 'react';\nimport { Modal } from '@/modules/Modal';\n\nexport default function DifferentModalSizes() {\n const [isOpen, setIsOpen] = useState(false);\n const [modalSize, setModalSize] = useState<'sm' | 'md' | 'lg' | 'xl'>('lg');\n\n return (\n setIsOpen(false)} title=\"Modal\" size={modalSize}>\n \n \n \n \n );\n}", "import { useState, useMemo } from 'react';\nimport { Modal } from '@/modules/Modal';\nimport { Table } from '@/modules/Table';\n\n// Definir columnas y datos...\nconst columnasModal = [/* ... */];\nconst datosEjemplo = [/* ... */];\n\nexport function TablaEnModal() {\n const [isOpen, setIsOpen] = useState(false);\n const rows = useMemo(() => datosEjemplo, []);\n\n return (\n <>\n \n\n setIsOpen(false)}\n title=\"Listado de usuarios\"\n size=\"xl\"\n >\n \n
\n \n
\n \n \n \n );\n}", "import { useState, useMemo } from 'react';\nimport { Modal } from '@/modules/Modal';\nimport { Table } from '@/modules/Table';\n\n// Definir columnas y datos...\nconst columnasModal = [/* ... */];\nconst datosEjemplo = [/* ... */];\n\nexport function TablaEnModal() {\n const [isOpen, setIsOpen] = useState(false);\n const rows = useMemo(() => datosEjemplo, []);\n\n return (\n <>\n \n\n setIsOpen(false)}\n title=\"Listado de usuarios\"\n size=\"xl\"\n >\n \n
\n \n
\n \n \n \n );\n}" ], "props": { "groups": { "body": { "props": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "withPadding": { "name": "withPadding", "type": "boolean", "required": false } } } }, "deprecatedRoot": [ { "name": "icon", "migrateTo": "iconConfig en su lugar\n */", "type": "IconType | AnyIconDefinition" }, { "name": "headerButtonIcon", "migrateTo": "headerButton en su lugar\n */", "type": "IconType | AnyIconDefinition" }, { "name": "badgeIcon", "migrateTo": "badge en su lugar\n */", "type": "IconType | AnyIconDefinition" }, { "name": "footerButtonIcon", "migrateTo": "footerAuxButton en su lugar\n */", "type": "IconType | AnyIconDefinition" }, { "name": "cancelButtonText", "migrateTo": "footerPrimaryButton (success) y footerSecondaryButton (cancel) en su lugar\n */", "type": "string" }, { "name": "tabs", "migrateTo": "`tabsConfig", "type": "SwitchOption[]" }, { "name": "defaultValueTab", "migrateTo": "`tabsConfig", "type": "string" }, { "name": "onChangeTab", "migrateTo": "`tabsConfig", "type": "(value: string) => void" } ], "flat": { "isOpen": { "name": "isOpen", "type": "boolean", "required": true }, "onClose": { "name": "onClose", "type": "() => void", "required": true }, "size": { "name": "size", "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'", "required": false }, "children": { "name": "children", "type": "React.ReactNode", "required": true }, "disableEscapeClose": { "name": "disableEscapeClose", "type": "boolean", "required": false }, "disableOutsideTab": { "name": "disableOutsideTab", "type": "boolean", "required": false }, "disableOutsideClick": { "name": "disableOutsideClick", "type": "boolean", "required": false }, "closeAtCorner": { "name": "closeAtCorner", "type": "boolean", "required": false }, "showCloseButton": { "name": "showCloseButton", "type": "boolean", "required": false }, "title": { "name": "title", "type": "string", "required": false }, "zIndex": { "name": "zIndex", "type": "number", "required": false, "description": "z-index del overlay raíz. Por defecto `52` (por encima de headers/celdas sticky de `Table`, hasta 51).\n `50` y `60` (p. ej. AlertDialog anidado) usan tokens; cualquier otro número se aplica vía `style`\n (p. ej. `1200` para quedar por encima de popovers en portal ~1000)." }, "hideFooter": { "name": "hideFooter", "type": "boolean", "required": false }, "scrollMode": { "name": "scrollMode", "type": "'scroll' | 'paper'", "required": false, "description": "Modo de scroll del modal.\n - `paper` (por defecto): el panel se fija a `100svh - 32px` (16 px top + 16 px bottom), centrado verticalmente; el scroll es interno en `Modal.Body`.\n - `scroll`: scroll externo en el overlay; el panel crece sin límite y la página scrollea para mostrarlo." }, "sectionPadding": { "name": "sectionPadding", "type": "'md' | 'sm'", "required": false, "description": "Padding uniforme de cabecera, cuerpo y pie (`Modal.Header` / `Modal.Body` / `Modal.Footer`).\n - `md` (por defecto): 16px — diálogo modal.\n - `sm`: 8px — p. ej. `Popup` con `popoverStructured`." }, "iconConfig": { "name": "iconConfig", "type": "ModalIcon", "required": false, "description": "Sistema nuevo: Icono principal del Modal\n Permite configurar el icono principal de forma más flexible\n Si se proporciona, tiene prioridad sobre las props legacy (icon, iconDuotonePrimary, etc.)" }, "closeButton": { "name": "closeButton", "type": "ModalCloseButtonConfig", "required": false, "description": "Botón de cerrar (cabecera): tooltip opcional. Preferir este bloque frente a extender props sueltas en raíz." }, "headerButton": { "name": "headerButton", "type": "ModalButton", "required": false, "description": "Sistema nuevo: Botón del header (modelo cerrado)\n Solo existe un botón en el header actualmente\n Si se proporciona, tiene prioridad sobre las props legacy (headerButtonIcon, headerButtonOnClick, etc.)\n Para casos especiales con múltiples botones, usar headerButtons (array)" }, "headerButtons": { "name": "headerButtons", "type": "ModalButton[]", "required": false, "description": "Sistema nuevo: Array de botones del header (para casos especiales)\n Permite definir múltiples botones cuando se necesite más flexibilidad" }, "badge": { "name": "badge", "type": "ModalBadge", "required": false, "description": "Sistema nuevo: Badge del header (modelo cerrado)\n Solo existe un badge en el header actualmente\n Si se proporciona, tiene prioridad sobre las props legacy (badgeIcon, badgeLabel, etc.)\n Para casos especiales con múltiples badges, usar badges (array)" }, "badges": { "name": "badges", "type": "ModalBadge[]", "required": false, "description": "Sistema nuevo: Array de badges del header (para casos especiales)\n Permite definir múltiples badges cuando se necesite más flexibilidad" }, "footerAuxButton": { "name": "footerAuxButton", "type": "ModalButton", "required": false, "description": "Sistema nuevo: Botón auxiliar del footer (a la izquierda)\n Solo existe un botón auxiliar en el footer actualmente\n Si se proporciona, tiene prioridad sobre las props legacy (footerButtonIcon, footerButtonOnClick, etc.)" }, "footerPrimaryButton": { "name": "footerPrimaryButton", "type": "ModalButton", "required": false, "description": "Sistema nuevo: Botones del footer (modelo cerrado)\n Define específicamente los botones principales del footer (primary = success, secondary = cancel)\n Si se proporciona, tiene prioridad sobre las props legacy (cancelButtonText, successButtonText, etc.)\n Para casos especiales con más botones, usar footerButtons (array)" }, "footerSecondaryButton": { "name": "footerSecondaryButton", "type": "ModalButton", "required": false }, "footerButtons": { "name": "footerButtons", "type": "ModalButton[]", "required": false, "description": "Sistema nuevo: Array de botones del footer (para casos especiales)\n Permite definir múltiples botones cuando se necesite más flexibilidad" }, "iconDuotonePrimary": { "name": "iconDuotonePrimary", "type": "IconFontColor", "required": false }, "iconDuotoneSecondary": { "name": "iconDuotoneSecondary", "type": "IconFontColor", "required": false }, "iconDuotoneOpacityPrimary": { "name": "iconDuotoneOpacityPrimary", "type": "number", "required": false }, "iconDuotoneOpacitySecondary": { "name": "iconDuotoneOpacitySecondary", "type": "number", "required": false }, "headerButtonIconDuotonePrimary": { "name": "headerButtonIconDuotonePrimary", "type": "IconFontColor", "required": false }, "headerButtonIconDuotoneSecondary": { "name": "headerButtonIconDuotoneSecondary", "type": "IconFontColor", "required": false }, "headerButtonIconDuotoneOpacityPrimary": { "name": "headerButtonIconDuotoneOpacityPrimary", "type": "number", "required": false }, "headerButtonIconDuotoneOpacitySecondary": { "name": "headerButtonIconDuotoneOpacitySecondary", "type": "number", "required": false }, "headerButtonOnClick": { "name": "headerButtonOnClick", "type": "() => void", "required": false }, "badgeIconDuotonePrimary": { "name": "badgeIconDuotonePrimary", "type": "IconFontColor", "required": false }, "badgeIconDuotoneSecondary": { "name": "badgeIconDuotoneSecondary", "type": "IconFontColor", "required": false }, "badgeIconDuotoneOpacityPrimary": { "name": "badgeIconDuotoneOpacityPrimary", "type": "number", "required": false }, "badgeIconDuotoneOpacitySecondary": { "name": "badgeIconDuotoneOpacitySecondary", "type": "number", "required": false }, "badgeLabel": { "name": "badgeLabel", "type": "string", "required": false }, "footerButtonIconDuotonePrimary": { "name": "footerButtonIconDuotonePrimary", "type": "IconFontColor", "required": false }, "footerButtonIconDuotoneSecondary": { "name": "footerButtonIconDuotoneSecondary", "type": "IconFontColor", "required": false }, "footerButtonIconDuotoneOpacityPrimary": { "name": "footerButtonIconDuotoneOpacityPrimary", "type": "number", "required": false }, "footerButtonIconDuotoneOpacitySecondary": { "name": "footerButtonIconDuotoneOpacitySecondary", "type": "number", "required": false }, "footerButtonOnClick": { "name": "footerButtonOnClick", "type": "() => void", "required": false }, "successButtonText": { "name": "successButtonText", "type": "string", "required": false }, "onCancel": { "name": "onCancel", "type": "(event?: React.MouseEvent) => void", "required": false }, "onSuccess": { "name": "onSuccess", "type": "(event?: React.MouseEvent) => void", "required": false }, "showCancelButton": { "name": "showCancelButton", "type": "boolean", "required": false }, "showSuccessButton": { "name": "showSuccessButton", "type": "boolean", "required": false }, "closeAtSuccess": { "name": "closeAtSuccess", "type": "boolean", "required": false }, "closeAtCancel": { "name": "closeAtCancel", "type": "boolean", "required": false }, "cancelButtonSlotLeft": { "name": "cancelButtonSlotLeft", "type": "VisualSlotType", "required": false }, "successButtonSlotRight": { "name": "successButtonSlotRight", "type": "VisualSlotType", "required": false }, "disableCancelButton": { "name": "disableCancelButton", "type": "boolean", "required": false }, "disableSuccessButton": { "name": "disableSuccessButton", "type": "boolean", "required": false }, "successButtonColor": { "name": "successButtonColor", "type": "ButtonColors", "required": false }, "footerSlotLayout": { "name": "footerSlotLayout", "type": "'inline' | 'spread'", "required": false, "description": "Reparto de iconos en los botones legacy del footer (`cancelButtonSlotLeft` / `successButtonSlotRight`).\n `spread` aplica `slotLayout={{ var: 'spread', textAlign: 'center' }}` en ambos y reparte el ancho en la fila del footer." }, "tabsConfig": { "name": "tabsConfig", "type": "ModalTabsConfig", "required": false, "description": "Pestañas del header: opciones, callbacks y props del Switch en un solo objeto (API recomendada)." } } } } ], "compositionRecipe": { "pieces": [ "Modal", "Modal.Header", "Modal.Body", "Modal.Footer", "Modal.Image" ], "steps": [ "Controla visibilidad con isOpen y onClose en Modal (raíz).", "Compón Header opcional, Body con el contenido y Footer con acciones.", "Para tabs, usa tabsConfig en la raíz en lugar de props tabs planas deprecadas." ], "storyRefs": [ "Modal.stories.tsx:Default", "Modal.stories.tsx:WithTabs" ], "snippet": " setOpen(false)} title=\"Título\">\n Contenido\n \n \n \n" }, "standaloneSnippet": "import React from 'react';\n\nconst sizeMap = {\n sm: '400px',\n md: '560px',\n lg: '720px',\n};\n\nexport function Modal({\n isOpen,\n onClose,\n title,\n children,\n size = 'md',\n}: {\n isOpen: boolean;\n onClose: () => void;\n title?: string;\n children: React.ReactNode;\n size?: keyof typeof sizeMap;\n}) {\n if (!isOpen) return null;\n\n const handleOverlayClick = (e: React.MouseEvent) => {\n if (e.target === e.currentTarget) onClose();\n };\n\n return (\n \n \n \n {title && (\n \n {title}\n \n )}\n \n ×\n \n \n \n {children}\n \n \n \n );\n}\n" }, { "id": "Notification", "path": "src/modules/Notification", "legacy": false, "compositionType": 1, "exports": [ { "name": "Notification", "kind": "component", "description": { "primary": "storybook", "storybook": "Notificación (Figma Notification): compone", "jsdoc": "Notificación de producto según Figma ([Notification](https://www.figma.com/design/aWDHIXKjf82m6udooBUeZG/Notification)): compone {@link Alert}\ncon API agrupada (`content`, `leading`, `appearance`, `meta`, `events`).", "confidence": "high" }, "examples": [ "import { Notification } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n \n );\n}", "import { Notification } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n
\n \n
\n );\n}", "import { Notification } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n
\n \n
\n );\n}", "import { Notification } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n \n );\n}", "import { Notification } from '@imj_media/ui';\n\nexport default function Example() {\n return (\n \n );\n}" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "type": { "name": "type", "type": "'notification'", "required": false }, "color": { "name": "color", "type": "NotificationColor", "required": true }, "avatar": { "name": "avatar", "type": "string", "required": false }, "icon": { "name": "icon", "type": "IconType | AnyIconDefinition", "required": false }, "subtitle": { "name": "subtitle", "type": "string", "required": false }, "count": { "name": "count", "type": "number", "required": false, "description": "Total de notificaciones en el grupo (cola); la UI puede mostrarlo en la tarjeta frontal" }, "timerProgress": { "name": "timerProgress", "type": "number", "required": false }, "showTimer": { "name": "showTimer", "type": "boolean", "required": false }, "notificationCard": { "name": "notificationCard", "type": "Partial>", "required": false, "description": "Overrides del componente Notification (Figma); los rellena `notify.message({ notification })`\n y se fusionan al renderizar la tarjeta." } } } } ], "standaloneSnippet": "import React, { useState } from 'react';\n\nconst variantMap: Record = {\n info: { color: 'rgb(5, 181, 212)', icon: 'ℹ' },\n success: { color: 'rgb(33, 196, 94)', icon: '✓' },\n warning: { color: 'rgb(235, 179, 8)', icon: '⚠' },\n error: { color: 'rgb(240, 69, 69)', icon: '✕' },\n};\n\ninterface NotificationProps {\n title: string;\n message?: string;\n variant?: 'info' | 'success' | 'warning' | 'error';\n closable?: boolean;\n onClose?: () => void;\n}\n\nexport function Notification({\n title,\n message,\n variant = 'info',\n closable = false,\n onClose,\n}: NotificationProps) {\n const [visible, setVisible] = useState(true);\n const v = variantMap[variant];\n\n if (!visible) return null;\n\n const handleClose = () => {\n setVisible(false);\n onClose?.();\n };\n\n return (\n \n \n {v.icon}\n \n
\n \n {title}\n
\n {message && (\n \n {message}\n \n )}\n \n {closable && (\n \n \\u00d7\n \n )}\n \n );\n}\n" }, { "id": "Pagination", "path": "src/modules/Pagination", "legacy": false, "compositionType": 1, "exports": [ { "name": "Pagination", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Pagination permite navegar entre páginas de contenido.", "jsdoc": "Pagination - Componente de paginación\nComponente de paginación que permite navegar entre páginas de datos.\nSoporta selector de tamaño de página, contador de páginas visibles y navegación con botones.", "confidence": "high" }, "examples": [ "import { Pagination } from '@/modules/Pagination';\n import { useState } from 'react';\n\n export default function Example() {\n const [currentPage, setCurrentPage] = useState(1);\n\n return (\n \n )\n }", "import { Pagination } from '@/modules/Pagination';\n import { useState } from 'react';\n\n export default function Example() {\n const [currentPage, setCurrentPage] = useState(1);\n\n return (\n \n )\n }", "import { Pagination } from '@/modules/Pagination';\n import { useState } from 'react';\n\n export default function Example() {\n const [currentPage, setCurrentPage] = useState(1);\n\n return (\n \n )\n }", "import { Pagination } from '@/modules/Pagination';\n import { useState } from 'react';\n\n export default function Example() {\n const [currentPage, setCurrentPage] = useState(1);\n\n return (\n \n )\n }", "import { Pagination } from '@/modules/Pagination';\n import { useState } from 'react';\n\n export default function Example() {\n const [currentPage, setCurrentPage] = useState(1);\n\n return (\n \n )\n }" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "currentPage": { "name": "currentPage", "type": "number", "required": true }, "pageCount": { "name": "pageCount", "type": "number", "required": true }, "showingPagesText": { "name": "showingPagesText", "type": "string", "required": false }, "pageSize": { "name": "pageSize", "type": "number", "required": false }, "pageSizeText": { "name": "pageSizeText", "type": "string", "required": false }, "total": { "name": "total", "type": "number", "required": false }, "optionsSize": { "name": "optionsSize", "type": "DropdownOption[]", "required": false }, "onPageChange": { "name": "onPageChange", "type": "(page: number) => void", "required": true }, "handlePageSize": { "name": "handlePageSize", "type": "(pageSize: number) => void", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "maxVisiblePages": { "name": "maxVisiblePages", "type": "number", "required": false }, "showVisiblePages": { "name": "showVisiblePages", "type": "boolean", "required": false }, "showPagesSelector": { "name": "showPagesSelector", "type": "boolean", "required": false }, "showPagesCount": { "name": "showPagesCount", "type": "boolean", "required": false } } } } ] }, { "id": "PickerColor", "path": "src/modules/PickerColor", "legacy": false, "compositionType": 1, "exports": [ { "name": "PickerColor", "kind": "component", "description": { "primary": "storybook", "storybook": "Un componente para seleccionar colores en formato hexadecimal. Incluye un selector visual con colores recientes y recomendados, y persistencia en localStorage.", "confidence": "medium" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "value": { "name": "value", "type": "string", "required": false, "description": "Valor del color en formato hexadecimal" }, "defaultValue": { "name": "defaultValue", "type": "string", "required": false, "description": "Valor por defecto del color" }, "onColorChange": { "name": "onColorChange", "type": "(color: string) => void", "required": false, "description": "Callback cuando se selecciona un color" }, "maxRecentColors": { "name": "maxRecentColors", "type": "number", "required": false, "description": "Número máximo de colores recientes a guardar" }, "initialRecentColors": { "name": "initialRecentColors", "type": "string[]", "required": false, "description": "Colores recientes iniciales" }, "closeOnSelect": { "name": "closeOnSelect", "type": "boolean", "required": false, "description": "Si se debe cerrar el popup al seleccionar un color" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clase personalizada para el contenedor" }, "inputProps": { "name": "inputProps", "type": "Partial", "required": false, "description": "Props adicionales para el Input" }, "popupProps": { "name": "popupProps", "type": "Partial", "required": false, "description": "Props adicionales para el Popup" }, "label": { "name": "label", "type": "string", "required": false, "description": "Label para el Input" }, "error": { "name": "error", "type": "string", "required": false, "description": "Mensaje de error" }, "helperText": { "name": "helperText", "type": "string", "required": false, "description": "Texto de ayuda" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Si el componente está deshabilitado" }, "position": { "name": "position", "type": "PopupProps['position']", "required": false, "description": "Posición del popup" }, "showHexInput": { "name": "showHexInput", "type": "boolean", "required": false, "description": "Si mostrar el selector hexadecimal directamente" } } } } ] }, { "id": "Picture", "path": "src/modules/Picture", "legacy": false, "compositionType": 1, "exports": [ { "name": "Picture", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Picture permite mostrar imágenes con diferentes formatos y tamaños.", "jsdoc": "Inactivo alineado a Figma **Cards** [233:11229](https://www.figma.com/design/3w0SWvV7C5tDKUybsOcgA4/Cards?node-id=233-11229):\ncapa `bg-fill-tertiary` (#f0f1f2) como en Figma; contenedor con `mix-blend-luminosity`; imagen con brillo/contraste suaves.\nSi un consumidor fuerza `img { filter: none !important }` o anula `mix-blend-mode`, el resultado puede no coincidir.\nSin `src` válido o tras error de carga de imagen se muestra el icono Font Awesome **Image** (regular) en superficie terciaria, en lugar de un SVG raster externo.\n/\nconst PICTURE_DISABLED_IMG_STYLE: CSSProperties = {\n WebkitFilter: 'brightness(1.06) contrast(0.88)',\n filter: 'brightness(1.06) contrast(0.88)',\n};\n\n/**\nImagen con variantes de tamaño, radio y estado *disabled* alineado a Figma.\nLos `` usan **`draggable={false}", "confidence": "high" }, "examples": [ "import { Picture } from '@imj_media/ui';\n\n export default function Example() {\n const IMAGE = 'https://devobp.imjmedia.com.mx/uploads/small_IMJ-MTY-PAN-O-6458A.jpg'\n return \n }", "import { Picture } from '@/modules/Picture';\n\n export default function Example() {\n const IMAGE = 'https://devobp.imjmedia.com.mx/uploads/small_IMJ-MTY-PAN-O-6458A.jpg'\n return \n \n \n \n \n \n \n }", "import { Picture } from '@/modules/Picture';\n\n export default function Example() {\n const IMAGE = 'https://devobp.imjmedia.com.mx/uploads/small_IMJ-MTY-PAN-O-6458A.jpg'\n return \n \n \n \n \n \n }", "import { Picture } from '@/modules/Picture';\n\n export default function Example() {\n const IMAGE = 'https://devobp.imjmedia.com.mx/uploads/small_IMJ-MTY-PAN-O-6458A.jpg'\n return \n \n \n \n \n \n }", "import { Picture } from '@/modules/Picture';\n\n export default function Example() {\n const IMAGE = 'https://devobp.imjmedia.com.mx/uploads/small_IMJ-MTY-PAN-O-6458A.jpg'\n return \n \n \n }" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "src": { "name": "src", "type": "string", "required": true }, "alt": { "name": "alt", "type": "string", "required": true }, "className": { "name": "className", "type": "string", "required": false }, "loading": { "name": "loading", "type": "'lazy' | 'eager'", "required": false }, "size": { "name": "size", "type": "'auto' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'", "required": false }, "radius": { "name": "radius", "type": "PillSize", "required": false }, "square": { "name": "square", "type": "boolean", "required": false }, "shadow": { "name": "shadow", "type": "boolean", "required": false }, "border": { "name": "border", "type": "boolean", "required": false }, "fillParent": { "name": "fillParent", "type": "boolean", "required": false, "description": "Rellena un contenedor posicionado (padre con `position: relative`, p. ej. `aspect-video` + `overflow-hidden`).\n El `` usa posición absoluta; la imagen hace cover a todo el caja. Úsalo en cards / héroes de Figma.\n Con `true` se ignoran `size` y `square` para el layout del `` (solo aplican borde, sombra y radio)." }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Inactivo como Figma Cards (Picture): capa `ui-bg-fill-tertiary`, envoltorio `mix-blend-luminosity` y\n `brightness` / `contrast` suaves en el ``. Ver\n [233:11229](https://www.figma.com/design/3w0SWvV7C5tDKUybsOcgA4/Cards?node-id=233-11229)." } } } } ] }, { "id": "Popup", "path": "src/modules/Popup", "legacy": false, "compositionType": 1, "exports": [ { "name": "Popup", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Popup - Componente de popup/dropdown posicionable y configurable\nComponente de popup que se posiciona relativamente a un trigger, con soporte para múltiples\nposiciones, cierre automático, tooltips, iconos y slots personalizados.", "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│ └── organisms/\n│ └── Popup.tsx # Componente principal\n├── hooks/ # Hooks personalizados\n├── stories/\n│ └── Popup.stories.tsx # Storybook stories\n└── index.ts # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef(null);\n\n\n
Contenido del popup
\n;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I", "confidence": "medium" }, "examples": [ "\n {children}\n ", "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n \n {children}\n \n\n \n\n ", "\n {children}\n ", "\n {children}\n ", "\n {children}\n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "triggerRef": { "name": "triggerRef", "type": "RefObject", "required": false, "description": "Ref al elemento DOM que abre el panel y sirve de ancla (puede vivir fuera del `Popup`).\n Si se define, no se renderiza el `InnerButton` interno: enlazamos clic (toggle) y, si aplica,\n `openOnHover` en ese nodo. El panel sigue renderizándose en portal o `absolute` según props.\n Con `absolute={true}`, el ancla externa debería estar en el mismo subárbol posicionado que el\n portal del panel para que `offsetTop`/`offsetLeft` sean coherentes; si no, usa `absolute={false}`." }, "label": { "name": "label", "type": "ReactNode", "required": false, "description": "Texto o nodo del botón disparador (p. ej. JSX con hover personalizado)." }, "position": { "name": "position", "type": "| 'top'", "required": false }, "offset": { "name": "offset", "type": "number", "required": false, "description": "Separación en px entre el trigger y el borde del panel. Con `popoverArrow` activo, el valor\n se interpreta como separación deseada entre trigger y punta de la flecha (mínimo 6px)." }, "closeOnClickOutside": { "name": "closeOnClickOutside", "type": "boolean", "required": false }, "closeOnEscape": { "name": "closeOnEscape", "type": "boolean", "required": false }, "popupId": { "name": "popupId", "type": "string", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "showPanelBorder": { "name": "showPanelBorder", "type": "boolean", "required": false, "description": "Borde del panel flotante (`ui-border ui-border-default`). Por defecto `true`.\n Con `false`: sin contorno, sombra más marcada (`ui-shadow-xl`) y flecha sin trazo con sombra acorde." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false }, "onClose": { "name": "onClose", "type": "() => void", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "absolute": { "name": "absolute", "type": "boolean", "required": false }, "allowOverflow": { "name": "allowOverflow", "type": "boolean", "required": false, "description": "Si es `true`, el panel no fuerza `overflow: hidden`, de modo que descendientes posicionados en\n absoluto (p. ej. `Dropdown` con `popover.absolute: true`) puedan pintarse fuera del rectángulo\n del popup. Por defecto `false` (mejor recorte con bordes redondeados y scroll interno)." }, "openOnHover": { "name": "openOnHover", "type": "boolean | number", "required": false, "description": "Abrir el panel al pasar el ratón por el trigger, tras un retardo.\n - `false` / omitido: desactivado (por defecto).\n - `true`: retardo por defecto (200 ms).\n - número ≥ 0: retardo en ms (`0` = al instante).\n El clic en el trigger sigue alternando el panel. Para ir al panel sin cerrar, hay un margen al salir del trigger." }, "hoverAnchorFollowPointer": { "name": "hoverAnchorFollowPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: el panel se ancla al puntero dentro del trigger (rectángulo 1×1\n que sigue el ratón), actualizado en cada frame vía `requestAnimationFrame` para un movimiento fluido.\n Sin efecto si `openOnHover` está desactivado. Aplica al botón interno y a `triggerRef`." }, "openOnHoverAllowPanelPointer": { "name": "openOnHoverAllowPanelPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: si es `true` (por defecto), pasar el puntero del trigger al panel\n cancela el cierre programado (comportamiento “puente”). Si es `false`, el panel no cuenta como\n zona hover: al salir del trigger el popup se cierra aunque el puntero quede sobre el panel." }, "closeOnClick": { "name": "closeOnClick", "type": "boolean", "required": false }, "buttonClassName": { "name": "buttonClassName", "type": "string", "required": false }, "containerClassName": { "name": "containerClassName", "type": "string", "required": false }, "buttonTransition": { "name": "buttonTransition", "type": "boolean", "required": false }, "buttonStyle": { "name": "buttonStyle", "type": "React.CSSProperties", "required": false }, "borderRadius": { "name": "borderRadius", "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'", "required": false }, "stopPropagationList": { "name": "stopPropagationList", "type": "boolean", "required": false }, "popoverArrow": { "name": "popoverArrow", "type": "PopupArrowMode", "required": false, "description": "Flecha tipo “beak” hacia el trigger. Por defecto `'auto'` (lado según `position`, punta al centro del trigger).\n Con `absolute={true}`, `'auto'` no dibuja flecha; usa un objeto `{ edge, align }` o `false` para desactivarla." }, "popoverStructured": { "name": "popoverStructured", "type": "boolean", "required": false, "description": "Layout tipo modal (header / cuerpo / footer) reutilizando `ModalProvider` y `Modal.Header|Body|Footer` sin modificar el Modal.\n El contenido de `children` se renderiza en el cuerpo." }, "popoverTitle": { "name": "popoverTitle", "type": "string", "required": false, "description": "Título del encabezado (tipografía H6 del sistema)." }, "popoverDescription": { "name": "popoverDescription", "type": "string", "required": false, "description": "Subtítulo / descripción bajo el título." }, "popoverShowHeader": { "name": "popoverShowHeader", "type": "boolean", "required": false, "description": "Mostrar bloque de cabecera cuando `popoverStructured` es true." }, "popoverShowCloseButton": { "name": "popoverShowCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón cerrar en cabecera (contexto Modal)." }, "popoverIconConfig": { "name": "popoverIconConfig", "type": "ModalIcon", "required": false, "description": "Icono principal del header (mismo modelo que Modal)." }, "popoverBadge": { "name": "popoverBadge", "type": "ModalBadge", "required": false }, "popoverBadges": { "name": "popoverBadges", "type": "ModalBadge[]", "required": false }, "popoverHeaderButton": { "name": "popoverHeaderButton", "type": "ModalButton", "required": false }, "popoverHeaderButtons": { "name": "popoverHeaderButtons", "type": "ModalButton[]", "required": false }, "popoverShowFooter": { "name": "popoverShowFooter", "type": "boolean", "required": false, "description": "Incluir footer con botones del modelo Modal." }, "popoverFooterPrimaryButton": { "name": "popoverFooterPrimaryButton", "type": "ModalButton", "required": false }, "popoverFooterSecondaryButton": { "name": "popoverFooterSecondaryButton", "type": "ModalButton", "required": false }, "popoverFooterButtons": { "name": "popoverFooterButtons", "type": "ModalButton[]", "required": false }, "popoverFooterAuxButton": { "name": "popoverFooterAuxButton", "type": "ModalButton", "required": false }, "popoverFooterSlotLayout": { "name": "popoverFooterSlotLayout", "type": "'inline' | 'spread'", "required": false, "description": "Reparto de iconos en los botones del footer del popover estructurado (`popoverFooterPrimaryButton` /\n `popoverFooterSecondaryButton` / `popoverFooterButtons`). `spread` equivale a `slotLayout={{ var: 'spread', textAlign: 'center' }}` en cada\n botón y reparto de ancho en la fila del footer (misma idea que `footerSlotLayout` en `Modal` para botones legacy)." }, "popoverBodyWithPadding": { "name": "popoverBodyWithPadding", "type": "boolean", "required": false, "description": "Padding del cuerpo (`Modal.Body withPadding`). Por defecto true." } } } }, { "name": "Popover", "kind": "component", "description": { "primary": "readme", "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│ └── organisms/\n│ └── Popup.tsx # Componente principal\n├── hooks/ # Hooks personalizados\n├── stories/\n│ └── Popup.stories.tsx # Storybook stories\n└── index.ts # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef(null);\n\n\n
Contenido del popup
\n;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I", "confidence": "low" }, "examples": [ "\n {children}\n ", "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n \n {children}\n \n\n \n\n ", "\n {children}\n ", "\n {children}\n ", "\n {children}\n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "triggerRef": { "name": "triggerRef", "type": "RefObject", "required": false, "description": "Ref al elemento DOM que abre el panel y sirve de ancla (puede vivir fuera del `Popup`).\n Si se define, no se renderiza el `InnerButton` interno: enlazamos clic (toggle) y, si aplica,\n `openOnHover` en ese nodo. El panel sigue renderizándose en portal o `absolute` según props.\n Con `absolute={true}`, el ancla externa debería estar en el mismo subárbol posicionado que el\n portal del panel para que `offsetTop`/`offsetLeft` sean coherentes; si no, usa `absolute={false}`." }, "label": { "name": "label", "type": "ReactNode", "required": false, "description": "Texto o nodo del botón disparador (p. ej. JSX con hover personalizado)." }, "position": { "name": "position", "type": "| 'top'", "required": false }, "offset": { "name": "offset", "type": "number", "required": false, "description": "Separación en px entre el trigger y el borde del panel. Con `popoverArrow` activo, el valor\n se interpreta como separación deseada entre trigger y punta de la flecha (mínimo 6px)." }, "closeOnClickOutside": { "name": "closeOnClickOutside", "type": "boolean", "required": false }, "closeOnEscape": { "name": "closeOnEscape", "type": "boolean", "required": false }, "popupId": { "name": "popupId", "type": "string", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "showPanelBorder": { "name": "showPanelBorder", "type": "boolean", "required": false, "description": "Borde del panel flotante (`ui-border ui-border-default`). Por defecto `true`.\n Con `false`: sin contorno, sombra más marcada (`ui-shadow-xl`) y flecha sin trazo con sombra acorde." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false }, "onClose": { "name": "onClose", "type": "() => void", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "absolute": { "name": "absolute", "type": "boolean", "required": false }, "allowOverflow": { "name": "allowOverflow", "type": "boolean", "required": false, "description": "Si es `true`, el panel no fuerza `overflow: hidden`, de modo que descendientes posicionados en\n absoluto (p. ej. `Dropdown` con `popover.absolute: true`) puedan pintarse fuera del rectángulo\n del popup. Por defecto `false` (mejor recorte con bordes redondeados y scroll interno)." }, "openOnHover": { "name": "openOnHover", "type": "boolean | number", "required": false, "description": "Abrir el panel al pasar el ratón por el trigger, tras un retardo.\n - `false` / omitido: desactivado (por defecto).\n - `true`: retardo por defecto (200 ms).\n - número ≥ 0: retardo en ms (`0` = al instante).\n El clic en el trigger sigue alternando el panel. Para ir al panel sin cerrar, hay un margen al salir del trigger." }, "hoverAnchorFollowPointer": { "name": "hoverAnchorFollowPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: el panel se ancla al puntero dentro del trigger (rectángulo 1×1\n que sigue el ratón), actualizado en cada frame vía `requestAnimationFrame` para un movimiento fluido.\n Sin efecto si `openOnHover` está desactivado. Aplica al botón interno y a `triggerRef`." }, "openOnHoverAllowPanelPointer": { "name": "openOnHoverAllowPanelPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: si es `true` (por defecto), pasar el puntero del trigger al panel\n cancela el cierre programado (comportamiento “puente”). Si es `false`, el panel no cuenta como\n zona hover: al salir del trigger el popup se cierra aunque el puntero quede sobre el panel." }, "closeOnClick": { "name": "closeOnClick", "type": "boolean", "required": false }, "buttonClassName": { "name": "buttonClassName", "type": "string", "required": false }, "containerClassName": { "name": "containerClassName", "type": "string", "required": false }, "buttonTransition": { "name": "buttonTransition", "type": "boolean", "required": false }, "buttonStyle": { "name": "buttonStyle", "type": "React.CSSProperties", "required": false }, "borderRadius": { "name": "borderRadius", "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'", "required": false }, "stopPropagationList": { "name": "stopPropagationList", "type": "boolean", "required": false }, "popoverArrow": { "name": "popoverArrow", "type": "PopupArrowMode", "required": false, "description": "Flecha tipo “beak” hacia el trigger. Por defecto `'auto'` (lado según `position`, punta al centro del trigger).\n Con `absolute={true}`, `'auto'` no dibuja flecha; usa un objeto `{ edge, align }` o `false` para desactivarla." }, "popoverStructured": { "name": "popoverStructured", "type": "boolean", "required": false, "description": "Layout tipo modal (header / cuerpo / footer) reutilizando `ModalProvider` y `Modal.Header|Body|Footer` sin modificar el Modal.\n El contenido de `children` se renderiza en el cuerpo." }, "popoverTitle": { "name": "popoverTitle", "type": "string", "required": false, "description": "Título del encabezado (tipografía H6 del sistema)." }, "popoverDescription": { "name": "popoverDescription", "type": "string", "required": false, "description": "Subtítulo / descripción bajo el título." }, "popoverShowHeader": { "name": "popoverShowHeader", "type": "boolean", "required": false, "description": "Mostrar bloque de cabecera cuando `popoverStructured` es true." }, "popoverShowCloseButton": { "name": "popoverShowCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón cerrar en cabecera (contexto Modal)." }, "popoverIconConfig": { "name": "popoverIconConfig", "type": "ModalIcon", "required": false, "description": "Icono principal del header (mismo modelo que Modal)." }, "popoverBadge": { "name": "popoverBadge", "type": "ModalBadge", "required": false }, "popoverBadges": { "name": "popoverBadges", "type": "ModalBadge[]", "required": false }, "popoverHeaderButton": { "name": "popoverHeaderButton", "type": "ModalButton", "required": false }, "popoverHeaderButtons": { "name": "popoverHeaderButtons", "type": "ModalButton[]", "required": false }, "popoverShowFooter": { "name": "popoverShowFooter", "type": "boolean", "required": false, "description": "Incluir footer con botones del modelo Modal." }, "popoverFooterPrimaryButton": { "name": "popoverFooterPrimaryButton", "type": "ModalButton", "required": false }, "popoverFooterSecondaryButton": { "name": "popoverFooterSecondaryButton", "type": "ModalButton", "required": false }, "popoverFooterButtons": { "name": "popoverFooterButtons", "type": "ModalButton[]", "required": false }, "popoverFooterAuxButton": { "name": "popoverFooterAuxButton", "type": "ModalButton", "required": false }, "popoverFooterSlotLayout": { "name": "popoverFooterSlotLayout", "type": "'inline' | 'spread'", "required": false, "description": "Reparto de iconos en los botones del footer del popover estructurado (`popoverFooterPrimaryButton` /\n `popoverFooterSecondaryButton` / `popoverFooterButtons`). `spread` equivale a `slotLayout={{ var: 'spread', textAlign: 'center' }}` en cada\n botón y reparto de ancho en la fila del footer (misma idea que `footerSlotLayout` en `Modal` para botones legacy)." }, "popoverBodyWithPadding": { "name": "popoverBodyWithPadding", "type": "boolean", "required": false, "description": "Padding del cuerpo (`Modal.Body withPadding`). Por defecto true." } } } }, { "name": "POPUP_OPEN_ON_HOVER_CLOSE_DELAY_MS", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Retardo por defecto al abrir con `openOnHover={true}` (ms). */\nexport const POPUP_OPEN_ON_HOVER_DEFAULT_MS = 200;\n/** Margen al salir del trigger o del panel antes de cerrar (ms).", "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│ └── organisms/\n│ └── Popup.tsx # Componente principal\n├── hooks/ # Hooks personalizados\n├── stories/\n│ └── Popup.stories.tsx # Storybook stories\n└── index.ts # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef(null);\n\n\n
Contenido del popup
\n;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I", "confidence": "medium" }, "examples": [ "\n {children}\n ", "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n \n {children}\n \n\n \n\n ", "\n {children}\n ", "\n {children}\n ", "\n {children}\n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "triggerRef": { "name": "triggerRef", "type": "RefObject", "required": false, "description": "Ref al elemento DOM que abre el panel y sirve de ancla (puede vivir fuera del `Popup`).\n Si se define, no se renderiza el `InnerButton` interno: enlazamos clic (toggle) y, si aplica,\n `openOnHover` en ese nodo. El panel sigue renderizándose en portal o `absolute` según props.\n Con `absolute={true}`, el ancla externa debería estar en el mismo subárbol posicionado que el\n portal del panel para que `offsetTop`/`offsetLeft` sean coherentes; si no, usa `absolute={false}`." }, "label": { "name": "label", "type": "ReactNode", "required": false, "description": "Texto o nodo del botón disparador (p. ej. JSX con hover personalizado)." }, "position": { "name": "position", "type": "| 'top'", "required": false }, "offset": { "name": "offset", "type": "number", "required": false, "description": "Separación en px entre el trigger y el borde del panel. Con `popoverArrow` activo, el valor\n se interpreta como separación deseada entre trigger y punta de la flecha (mínimo 6px)." }, "closeOnClickOutside": { "name": "closeOnClickOutside", "type": "boolean", "required": false }, "closeOnEscape": { "name": "closeOnEscape", "type": "boolean", "required": false }, "popupId": { "name": "popupId", "type": "string", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "showPanelBorder": { "name": "showPanelBorder", "type": "boolean", "required": false, "description": "Borde del panel flotante (`ui-border ui-border-default`). Por defecto `true`.\n Con `false`: sin contorno, sombra más marcada (`ui-shadow-xl`) y flecha sin trazo con sombra acorde." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false }, "onClose": { "name": "onClose", "type": "() => void", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "absolute": { "name": "absolute", "type": "boolean", "required": false }, "allowOverflow": { "name": "allowOverflow", "type": "boolean", "required": false, "description": "Si es `true`, el panel no fuerza `overflow: hidden`, de modo que descendientes posicionados en\n absoluto (p. ej. `Dropdown` con `popover.absolute: true`) puedan pintarse fuera del rectángulo\n del popup. Por defecto `false` (mejor recorte con bordes redondeados y scroll interno)." }, "openOnHover": { "name": "openOnHover", "type": "boolean | number", "required": false, "description": "Abrir el panel al pasar el ratón por el trigger, tras un retardo.\n - `false` / omitido: desactivado (por defecto).\n - `true`: retardo por defecto (200 ms).\n - número ≥ 0: retardo en ms (`0` = al instante).\n El clic en el trigger sigue alternando el panel. Para ir al panel sin cerrar, hay un margen al salir del trigger." }, "hoverAnchorFollowPointer": { "name": "hoverAnchorFollowPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: el panel se ancla al puntero dentro del trigger (rectángulo 1×1\n que sigue el ratón), actualizado en cada frame vía `requestAnimationFrame` para un movimiento fluido.\n Sin efecto si `openOnHover` está desactivado. Aplica al botón interno y a `triggerRef`." }, "openOnHoverAllowPanelPointer": { "name": "openOnHoverAllowPanelPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: si es `true` (por defecto), pasar el puntero del trigger al panel\n cancela el cierre programado (comportamiento “puente”). Si es `false`, el panel no cuenta como\n zona hover: al salir del trigger el popup se cierra aunque el puntero quede sobre el panel." }, "closeOnClick": { "name": "closeOnClick", "type": "boolean", "required": false }, "buttonClassName": { "name": "buttonClassName", "type": "string", "required": false }, "containerClassName": { "name": "containerClassName", "type": "string", "required": false }, "buttonTransition": { "name": "buttonTransition", "type": "boolean", "required": false }, "buttonStyle": { "name": "buttonStyle", "type": "React.CSSProperties", "required": false }, "borderRadius": { "name": "borderRadius", "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'", "required": false }, "stopPropagationList": { "name": "stopPropagationList", "type": "boolean", "required": false }, "popoverArrow": { "name": "popoverArrow", "type": "PopupArrowMode", "required": false, "description": "Flecha tipo “beak” hacia el trigger. Por defecto `'auto'` (lado según `position`, punta al centro del trigger).\n Con `absolute={true}`, `'auto'` no dibuja flecha; usa un objeto `{ edge, align }` o `false` para desactivarla." }, "popoverStructured": { "name": "popoverStructured", "type": "boolean", "required": false, "description": "Layout tipo modal (header / cuerpo / footer) reutilizando `ModalProvider` y `Modal.Header|Body|Footer` sin modificar el Modal.\n El contenido de `children` se renderiza en el cuerpo." }, "popoverTitle": { "name": "popoverTitle", "type": "string", "required": false, "description": "Título del encabezado (tipografía H6 del sistema)." }, "popoverDescription": { "name": "popoverDescription", "type": "string", "required": false, "description": "Subtítulo / descripción bajo el título." }, "popoverShowHeader": { "name": "popoverShowHeader", "type": "boolean", "required": false, "description": "Mostrar bloque de cabecera cuando `popoverStructured` es true." }, "popoverShowCloseButton": { "name": "popoverShowCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón cerrar en cabecera (contexto Modal)." }, "popoverIconConfig": { "name": "popoverIconConfig", "type": "ModalIcon", "required": false, "description": "Icono principal del header (mismo modelo que Modal)." }, "popoverBadge": { "name": "popoverBadge", "type": "ModalBadge", "required": false }, "popoverBadges": { "name": "popoverBadges", "type": "ModalBadge[]", "required": false }, "popoverHeaderButton": { "name": "popoverHeaderButton", "type": "ModalButton", "required": false }, "popoverHeaderButtons": { "name": "popoverHeaderButtons", "type": "ModalButton[]", "required": false }, "popoverShowFooter": { "name": "popoverShowFooter", "type": "boolean", "required": false, "description": "Incluir footer con botones del modelo Modal." }, "popoverFooterPrimaryButton": { "name": "popoverFooterPrimaryButton", "type": "ModalButton", "required": false }, "popoverFooterSecondaryButton": { "name": "popoverFooterSecondaryButton", "type": "ModalButton", "required": false }, "popoverFooterButtons": { "name": "popoverFooterButtons", "type": "ModalButton[]", "required": false }, "popoverFooterAuxButton": { "name": "popoverFooterAuxButton", "type": "ModalButton", "required": false }, "popoverFooterSlotLayout": { "name": "popoverFooterSlotLayout", "type": "'inline' | 'spread'", "required": false, "description": "Reparto de iconos en los botones del footer del popover estructurado (`popoverFooterPrimaryButton` /\n `popoverFooterSecondaryButton` / `popoverFooterButtons`). `spread` equivale a `slotLayout={{ var: 'spread', textAlign: 'center' }}` en cada\n botón y reparto de ancho en la fila del footer (misma idea que `footerSlotLayout` en `Modal` para botones legacy)." }, "popoverBodyWithPadding": { "name": "popoverBodyWithPadding", "type": "boolean", "required": false, "description": "Padding del cuerpo (`Modal.Body withPadding`). Por defecto true." } } } }, { "name": "POPUP_OPEN_ON_HOVER_DEFAULT_MS", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Retardo por defecto al abrir con `openOnHover={true}` (ms).", "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│ └── organisms/\n│ └── Popup.tsx # Componente principal\n├── hooks/ # Hooks personalizados\n├── stories/\n│ └── Popup.stories.tsx # Storybook stories\n└── index.ts # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef(null);\n\n\n
Contenido del popup
\n;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I", "confidence": "medium" }, "examples": [ "\n {children}\n ", "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n \n {children}\n \n\n \n\n ", "\n {children}\n ", "\n {children}\n ", "\n {children}\n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "triggerRef": { "name": "triggerRef", "type": "RefObject", "required": false, "description": "Ref al elemento DOM que abre el panel y sirve de ancla (puede vivir fuera del `Popup`).\n Si se define, no se renderiza el `InnerButton` interno: enlazamos clic (toggle) y, si aplica,\n `openOnHover` en ese nodo. El panel sigue renderizándose en portal o `absolute` según props.\n Con `absolute={true}`, el ancla externa debería estar en el mismo subárbol posicionado que el\n portal del panel para que `offsetTop`/`offsetLeft` sean coherentes; si no, usa `absolute={false}`." }, "label": { "name": "label", "type": "ReactNode", "required": false, "description": "Texto o nodo del botón disparador (p. ej. JSX con hover personalizado)." }, "position": { "name": "position", "type": "| 'top'", "required": false }, "offset": { "name": "offset", "type": "number", "required": false, "description": "Separación en px entre el trigger y el borde del panel. Con `popoverArrow` activo, el valor\n se interpreta como separación deseada entre trigger y punta de la flecha (mínimo 6px)." }, "closeOnClickOutside": { "name": "closeOnClickOutside", "type": "boolean", "required": false }, "closeOnEscape": { "name": "closeOnEscape", "type": "boolean", "required": false }, "popupId": { "name": "popupId", "type": "string", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "showPanelBorder": { "name": "showPanelBorder", "type": "boolean", "required": false, "description": "Borde del panel flotante (`ui-border ui-border-default`). Por defecto `true`.\n Con `false`: sin contorno, sombra más marcada (`ui-shadow-xl`) y flecha sin trazo con sombra acorde." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false }, "onClose": { "name": "onClose", "type": "() => void", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "absolute": { "name": "absolute", "type": "boolean", "required": false }, "allowOverflow": { "name": "allowOverflow", "type": "boolean", "required": false, "description": "Si es `true`, el panel no fuerza `overflow: hidden`, de modo que descendientes posicionados en\n absoluto (p. ej. `Dropdown` con `popover.absolute: true`) puedan pintarse fuera del rectángulo\n del popup. Por defecto `false` (mejor recorte con bordes redondeados y scroll interno)." }, "openOnHover": { "name": "openOnHover", "type": "boolean | number", "required": false, "description": "Abrir el panel al pasar el ratón por el trigger, tras un retardo.\n - `false` / omitido: desactivado (por defecto).\n - `true`: retardo por defecto (200 ms).\n - número ≥ 0: retardo en ms (`0` = al instante).\n El clic en el trigger sigue alternando el panel. Para ir al panel sin cerrar, hay un margen al salir del trigger." }, "hoverAnchorFollowPointer": { "name": "hoverAnchorFollowPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: el panel se ancla al puntero dentro del trigger (rectángulo 1×1\n que sigue el ratón), actualizado en cada frame vía `requestAnimationFrame` para un movimiento fluido.\n Sin efecto si `openOnHover` está desactivado. Aplica al botón interno y a `triggerRef`." }, "openOnHoverAllowPanelPointer": { "name": "openOnHoverAllowPanelPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: si es `true` (por defecto), pasar el puntero del trigger al panel\n cancela el cierre programado (comportamiento “puente”). Si es `false`, el panel no cuenta como\n zona hover: al salir del trigger el popup se cierra aunque el puntero quede sobre el panel." }, "closeOnClick": { "name": "closeOnClick", "type": "boolean", "required": false }, "buttonClassName": { "name": "buttonClassName", "type": "string", "required": false }, "containerClassName": { "name": "containerClassName", "type": "string", "required": false }, "buttonTransition": { "name": "buttonTransition", "type": "boolean", "required": false }, "buttonStyle": { "name": "buttonStyle", "type": "React.CSSProperties", "required": false }, "borderRadius": { "name": "borderRadius", "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'", "required": false }, "stopPropagationList": { "name": "stopPropagationList", "type": "boolean", "required": false }, "popoverArrow": { "name": "popoverArrow", "type": "PopupArrowMode", "required": false, "description": "Flecha tipo “beak” hacia el trigger. Por defecto `'auto'` (lado según `position`, punta al centro del trigger).\n Con `absolute={true}`, `'auto'` no dibuja flecha; usa un objeto `{ edge, align }` o `false` para desactivarla." }, "popoverStructured": { "name": "popoverStructured", "type": "boolean", "required": false, "description": "Layout tipo modal (header / cuerpo / footer) reutilizando `ModalProvider` y `Modal.Header|Body|Footer` sin modificar el Modal.\n El contenido de `children` se renderiza en el cuerpo." }, "popoverTitle": { "name": "popoverTitle", "type": "string", "required": false, "description": "Título del encabezado (tipografía H6 del sistema)." }, "popoverDescription": { "name": "popoverDescription", "type": "string", "required": false, "description": "Subtítulo / descripción bajo el título." }, "popoverShowHeader": { "name": "popoverShowHeader", "type": "boolean", "required": false, "description": "Mostrar bloque de cabecera cuando `popoverStructured` es true." }, "popoverShowCloseButton": { "name": "popoverShowCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón cerrar en cabecera (contexto Modal)." }, "popoverIconConfig": { "name": "popoverIconConfig", "type": "ModalIcon", "required": false, "description": "Icono principal del header (mismo modelo que Modal)." }, "popoverBadge": { "name": "popoverBadge", "type": "ModalBadge", "required": false }, "popoverBadges": { "name": "popoverBadges", "type": "ModalBadge[]", "required": false }, "popoverHeaderButton": { "name": "popoverHeaderButton", "type": "ModalButton", "required": false }, "popoverHeaderButtons": { "name": "popoverHeaderButtons", "type": "ModalButton[]", "required": false }, "popoverShowFooter": { "name": "popoverShowFooter", "type": "boolean", "required": false, "description": "Incluir footer con botones del modelo Modal." }, "popoverFooterPrimaryButton": { "name": "popoverFooterPrimaryButton", "type": "ModalButton", "required": false }, "popoverFooterSecondaryButton": { "name": "popoverFooterSecondaryButton", "type": "ModalButton", "required": false }, "popoverFooterButtons": { "name": "popoverFooterButtons", "type": "ModalButton[]", "required": false }, "popoverFooterAuxButton": { "name": "popoverFooterAuxButton", "type": "ModalButton", "required": false }, "popoverFooterSlotLayout": { "name": "popoverFooterSlotLayout", "type": "'inline' | 'spread'", "required": false, "description": "Reparto de iconos en los botones del footer del popover estructurado (`popoverFooterPrimaryButton` /\n `popoverFooterSecondaryButton` / `popoverFooterButtons`). `spread` equivale a `slotLayout={{ var: 'spread', textAlign: 'center' }}` en cada\n botón y reparto de ancho en la fila del footer (misma idea que `footerSlotLayout` en `Modal` para botones legacy)." }, "popoverBodyWithPadding": { "name": "popoverBodyWithPadding", "type": "boolean", "required": false, "description": "Padding del cuerpo (`Modal.Body withPadding`). Por defecto true." } } } }, { "name": "POPUP_ARROW_TILT_LEFT_DEG", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Sin contorno en el trazo + sombra (mismo criterio que el panel con `showPanelBorder={false}`).\nEl relleno sigue usando el token de fondo del panel.\n/\n elevated?: boolean;\n}\n\n/**\nAncho horizontal del beak respecto al path base (`1` = ancho de diseño; menor = más estrecho).\nSe aplica con `scale` en torno a x=14 (centro del viewBox).\n/\nexport const POPUP_ARROW_WIDTH_SCALE = 0.7;\n\n/**\nInclinación fina del beak solo en bordes laterales (deg); 0 = perpendicular a `-90°` / `90°`.\nValores separados por si en diseño hace falta asimetría.", "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│ └── organisms/\n│ └── Popup.tsx # Componente principal\n├── hooks/ # Hooks personalizados\n├── stories/\n│ └── Popup.stories.tsx # Storybook stories\n└── index.ts # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef(null);\n\n\n
Contenido del popup
\n;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I", "confidence": "medium" }, "examples": [ "\n {children}\n ", "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n \n {children}\n \n\n \n\n ", "\n {children}\n ", "\n {children}\n ", "\n {children}\n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "triggerRef": { "name": "triggerRef", "type": "RefObject", "required": false, "description": "Ref al elemento DOM que abre el panel y sirve de ancla (puede vivir fuera del `Popup`).\n Si se define, no se renderiza el `InnerButton` interno: enlazamos clic (toggle) y, si aplica,\n `openOnHover` en ese nodo. El panel sigue renderizándose en portal o `absolute` según props.\n Con `absolute={true}`, el ancla externa debería estar en el mismo subárbol posicionado que el\n portal del panel para que `offsetTop`/`offsetLeft` sean coherentes; si no, usa `absolute={false}`." }, "label": { "name": "label", "type": "ReactNode", "required": false, "description": "Texto o nodo del botón disparador (p. ej. JSX con hover personalizado)." }, "position": { "name": "position", "type": "| 'top'", "required": false }, "offset": { "name": "offset", "type": "number", "required": false, "description": "Separación en px entre el trigger y el borde del panel. Con `popoverArrow` activo, el valor\n se interpreta como separación deseada entre trigger y punta de la flecha (mínimo 6px)." }, "closeOnClickOutside": { "name": "closeOnClickOutside", "type": "boolean", "required": false }, "closeOnEscape": { "name": "closeOnEscape", "type": "boolean", "required": false }, "popupId": { "name": "popupId", "type": "string", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "showPanelBorder": { "name": "showPanelBorder", "type": "boolean", "required": false, "description": "Borde del panel flotante (`ui-border ui-border-default`). Por defecto `true`.\n Con `false`: sin contorno, sombra más marcada (`ui-shadow-xl`) y flecha sin trazo con sombra acorde." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false }, "onClose": { "name": "onClose", "type": "() => void", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "absolute": { "name": "absolute", "type": "boolean", "required": false }, "allowOverflow": { "name": "allowOverflow", "type": "boolean", "required": false, "description": "Si es `true`, el panel no fuerza `overflow: hidden`, de modo que descendientes posicionados en\n absoluto (p. ej. `Dropdown` con `popover.absolute: true`) puedan pintarse fuera del rectángulo\n del popup. Por defecto `false` (mejor recorte con bordes redondeados y scroll interno)." }, "openOnHover": { "name": "openOnHover", "type": "boolean | number", "required": false, "description": "Abrir el panel al pasar el ratón por el trigger, tras un retardo.\n - `false` / omitido: desactivado (por defecto).\n - `true`: retardo por defecto (200 ms).\n - número ≥ 0: retardo en ms (`0` = al instante).\n El clic en el trigger sigue alternando el panel. Para ir al panel sin cerrar, hay un margen al salir del trigger." }, "hoverAnchorFollowPointer": { "name": "hoverAnchorFollowPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: el panel se ancla al puntero dentro del trigger (rectángulo 1×1\n que sigue el ratón), actualizado en cada frame vía `requestAnimationFrame` para un movimiento fluido.\n Sin efecto si `openOnHover` está desactivado. Aplica al botón interno y a `triggerRef`." }, "openOnHoverAllowPanelPointer": { "name": "openOnHoverAllowPanelPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: si es `true` (por defecto), pasar el puntero del trigger al panel\n cancela el cierre programado (comportamiento “puente”). Si es `false`, el panel no cuenta como\n zona hover: al salir del trigger el popup se cierra aunque el puntero quede sobre el panel." }, "closeOnClick": { "name": "closeOnClick", "type": "boolean", "required": false }, "buttonClassName": { "name": "buttonClassName", "type": "string", "required": false }, "containerClassName": { "name": "containerClassName", "type": "string", "required": false }, "buttonTransition": { "name": "buttonTransition", "type": "boolean", "required": false }, "buttonStyle": { "name": "buttonStyle", "type": "React.CSSProperties", "required": false }, "borderRadius": { "name": "borderRadius", "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'", "required": false }, "stopPropagationList": { "name": "stopPropagationList", "type": "boolean", "required": false }, "popoverArrow": { "name": "popoverArrow", "type": "PopupArrowMode", "required": false, "description": "Flecha tipo “beak” hacia el trigger. Por defecto `'auto'` (lado según `position`, punta al centro del trigger).\n Con `absolute={true}`, `'auto'` no dibuja flecha; usa un objeto `{ edge, align }` o `false` para desactivarla." }, "popoverStructured": { "name": "popoverStructured", "type": "boolean", "required": false, "description": "Layout tipo modal (header / cuerpo / footer) reutilizando `ModalProvider` y `Modal.Header|Body|Footer` sin modificar el Modal.\n El contenido de `children` se renderiza en el cuerpo." }, "popoverTitle": { "name": "popoverTitle", "type": "string", "required": false, "description": "Título del encabezado (tipografía H6 del sistema)." }, "popoverDescription": { "name": "popoverDescription", "type": "string", "required": false, "description": "Subtítulo / descripción bajo el título." }, "popoverShowHeader": { "name": "popoverShowHeader", "type": "boolean", "required": false, "description": "Mostrar bloque de cabecera cuando `popoverStructured` es true." }, "popoverShowCloseButton": { "name": "popoverShowCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón cerrar en cabecera (contexto Modal)." }, "popoverIconConfig": { "name": "popoverIconConfig", "type": "ModalIcon", "required": false, "description": "Icono principal del header (mismo modelo que Modal)." }, "popoverBadge": { "name": "popoverBadge", "type": "ModalBadge", "required": false }, "popoverBadges": { "name": "popoverBadges", "type": "ModalBadge[]", "required": false }, "popoverHeaderButton": { "name": "popoverHeaderButton", "type": "ModalButton", "required": false }, "popoverHeaderButtons": { "name": "popoverHeaderButtons", "type": "ModalButton[]", "required": false }, "popoverShowFooter": { "name": "popoverShowFooter", "type": "boolean", "required": false, "description": "Incluir footer con botones del modelo Modal." }, "popoverFooterPrimaryButton": { "name": "popoverFooterPrimaryButton", "type": "ModalButton", "required": false }, "popoverFooterSecondaryButton": { "name": "popoverFooterSecondaryButton", "type": "ModalButton", "required": false }, "popoverFooterButtons": { "name": "popoverFooterButtons", "type": "ModalButton[]", "required": false }, "popoverFooterAuxButton": { "name": "popoverFooterAuxButton", "type": "ModalButton", "required": false }, "popoverFooterSlotLayout": { "name": "popoverFooterSlotLayout", "type": "'inline' | 'spread'", "required": false, "description": "Reparto de iconos en los botones del footer del popover estructurado (`popoverFooterPrimaryButton` /\n `popoverFooterSecondaryButton` / `popoverFooterButtons`). `spread` equivale a `slotLayout={{ var: 'spread', textAlign: 'center' }}` en cada\n botón y reparto de ancho en la fila del footer (misma idea que `footerSlotLayout` en `Modal` para botones legacy)." }, "popoverBodyWithPadding": { "name": "popoverBodyWithPadding", "type": "boolean", "required": false, "description": "Padding del cuerpo (`Modal.Body withPadding`). Por defecto true." } } } }, { "name": "POPUP_ARROW_TILT_RIGHT_DEG", "kind": "component", "description": { "primary": "readme", "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│ └── organisms/\n│ └── Popup.tsx # Componente principal\n├── hooks/ # Hooks personalizados\n├── stories/\n│ └── Popup.stories.tsx # Storybook stories\n└── index.ts # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef(null);\n\n\n
Contenido del popup
\n;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I", "confidence": "low" }, "examples": [ "\n {children}\n ", "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n \n {children}\n \n\n \n\n ", "\n {children}\n ", "\n {children}\n ", "\n {children}\n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "triggerRef": { "name": "triggerRef", "type": "RefObject", "required": false, "description": "Ref al elemento DOM que abre el panel y sirve de ancla (puede vivir fuera del `Popup`).\n Si se define, no se renderiza el `InnerButton` interno: enlazamos clic (toggle) y, si aplica,\n `openOnHover` en ese nodo. El panel sigue renderizándose en portal o `absolute` según props.\n Con `absolute={true}`, el ancla externa debería estar en el mismo subárbol posicionado que el\n portal del panel para que `offsetTop`/`offsetLeft` sean coherentes; si no, usa `absolute={false}`." }, "label": { "name": "label", "type": "ReactNode", "required": false, "description": "Texto o nodo del botón disparador (p. ej. JSX con hover personalizado)." }, "position": { "name": "position", "type": "| 'top'", "required": false }, "offset": { "name": "offset", "type": "number", "required": false, "description": "Separación en px entre el trigger y el borde del panel. Con `popoverArrow` activo, el valor\n se interpreta como separación deseada entre trigger y punta de la flecha (mínimo 6px)." }, "closeOnClickOutside": { "name": "closeOnClickOutside", "type": "boolean", "required": false }, "closeOnEscape": { "name": "closeOnEscape", "type": "boolean", "required": false }, "popupId": { "name": "popupId", "type": "string", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "showPanelBorder": { "name": "showPanelBorder", "type": "boolean", "required": false, "description": "Borde del panel flotante (`ui-border ui-border-default`). Por defecto `true`.\n Con `false`: sin contorno, sombra más marcada (`ui-shadow-xl`) y flecha sin trazo con sombra acorde." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false }, "onClose": { "name": "onClose", "type": "() => void", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "absolute": { "name": "absolute", "type": "boolean", "required": false }, "allowOverflow": { "name": "allowOverflow", "type": "boolean", "required": false, "description": "Si es `true`, el panel no fuerza `overflow: hidden`, de modo que descendientes posicionados en\n absoluto (p. ej. `Dropdown` con `popover.absolute: true`) puedan pintarse fuera del rectángulo\n del popup. Por defecto `false` (mejor recorte con bordes redondeados y scroll interno)." }, "openOnHover": { "name": "openOnHover", "type": "boolean | number", "required": false, "description": "Abrir el panel al pasar el ratón por el trigger, tras un retardo.\n - `false` / omitido: desactivado (por defecto).\n - `true`: retardo por defecto (200 ms).\n - número ≥ 0: retardo en ms (`0` = al instante).\n El clic en el trigger sigue alternando el panel. Para ir al panel sin cerrar, hay un margen al salir del trigger." }, "hoverAnchorFollowPointer": { "name": "hoverAnchorFollowPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: el panel se ancla al puntero dentro del trigger (rectángulo 1×1\n que sigue el ratón), actualizado en cada frame vía `requestAnimationFrame` para un movimiento fluido.\n Sin efecto si `openOnHover` está desactivado. Aplica al botón interno y a `triggerRef`." }, "openOnHoverAllowPanelPointer": { "name": "openOnHoverAllowPanelPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: si es `true` (por defecto), pasar el puntero del trigger al panel\n cancela el cierre programado (comportamiento “puente”). Si es `false`, el panel no cuenta como\n zona hover: al salir del trigger el popup se cierra aunque el puntero quede sobre el panel." }, "closeOnClick": { "name": "closeOnClick", "type": "boolean", "required": false }, "buttonClassName": { "name": "buttonClassName", "type": "string", "required": false }, "containerClassName": { "name": "containerClassName", "type": "string", "required": false }, "buttonTransition": { "name": "buttonTransition", "type": "boolean", "required": false }, "buttonStyle": { "name": "buttonStyle", "type": "React.CSSProperties", "required": false }, "borderRadius": { "name": "borderRadius", "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'", "required": false }, "stopPropagationList": { "name": "stopPropagationList", "type": "boolean", "required": false }, "popoverArrow": { "name": "popoverArrow", "type": "PopupArrowMode", "required": false, "description": "Flecha tipo “beak” hacia el trigger. Por defecto `'auto'` (lado según `position`, punta al centro del trigger).\n Con `absolute={true}`, `'auto'` no dibuja flecha; usa un objeto `{ edge, align }` o `false` para desactivarla." }, "popoverStructured": { "name": "popoverStructured", "type": "boolean", "required": false, "description": "Layout tipo modal (header / cuerpo / footer) reutilizando `ModalProvider` y `Modal.Header|Body|Footer` sin modificar el Modal.\n El contenido de `children` se renderiza en el cuerpo." }, "popoverTitle": { "name": "popoverTitle", "type": "string", "required": false, "description": "Título del encabezado (tipografía H6 del sistema)." }, "popoverDescription": { "name": "popoverDescription", "type": "string", "required": false, "description": "Subtítulo / descripción bajo el título." }, "popoverShowHeader": { "name": "popoverShowHeader", "type": "boolean", "required": false, "description": "Mostrar bloque de cabecera cuando `popoverStructured` es true." }, "popoverShowCloseButton": { "name": "popoverShowCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón cerrar en cabecera (contexto Modal)." }, "popoverIconConfig": { "name": "popoverIconConfig", "type": "ModalIcon", "required": false, "description": "Icono principal del header (mismo modelo que Modal)." }, "popoverBadge": { "name": "popoverBadge", "type": "ModalBadge", "required": false }, "popoverBadges": { "name": "popoverBadges", "type": "ModalBadge[]", "required": false }, "popoverHeaderButton": { "name": "popoverHeaderButton", "type": "ModalButton", "required": false }, "popoverHeaderButtons": { "name": "popoverHeaderButtons", "type": "ModalButton[]", "required": false }, "popoverShowFooter": { "name": "popoverShowFooter", "type": "boolean", "required": false, "description": "Incluir footer con botones del modelo Modal." }, "popoverFooterPrimaryButton": { "name": "popoverFooterPrimaryButton", "type": "ModalButton", "required": false }, "popoverFooterSecondaryButton": { "name": "popoverFooterSecondaryButton", "type": "ModalButton", "required": false }, "popoverFooterButtons": { "name": "popoverFooterButtons", "type": "ModalButton[]", "required": false }, "popoverFooterAuxButton": { "name": "popoverFooterAuxButton", "type": "ModalButton", "required": false }, "popoverFooterSlotLayout": { "name": "popoverFooterSlotLayout", "type": "'inline' | 'spread'", "required": false, "description": "Reparto de iconos en los botones del footer del popover estructurado (`popoverFooterPrimaryButton` /\n `popoverFooterSecondaryButton` / `popoverFooterButtons`). `spread` equivale a `slotLayout={{ var: 'spread', textAlign: 'center' }}` en cada\n botón y reparto de ancho en la fila del footer (misma idea que `footerSlotLayout` en `Modal` para botones legacy)." }, "popoverBodyWithPadding": { "name": "popoverBodyWithPadding", "type": "boolean", "required": false, "description": "Padding del cuerpo (`Modal.Body withPadding`). Por defecto true." } } } }, { "name": "POPUP_ARROW_WIDTH_SCALE", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Sin contorno en el trazo + sombra (mismo criterio que el panel con `showPanelBorder={false}`).\nEl relleno sigue usando el token de fondo del panel.\n/\n elevated?: boolean;\n}\n\n/**\nAncho horizontal del beak respecto al path base (`1` = ancho de diseño; menor = más estrecho).\nSe aplica con `scale` en torno a x=14 (centro del viewBox).", "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│ └── organisms/\n│ └── Popup.tsx # Componente principal\n├── hooks/ # Hooks personalizados\n├── stories/\n│ └── Popup.stories.tsx # Storybook stories\n└── index.ts # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef(null);\n\n\n
Contenido del popup
\n;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I", "confidence": "medium" }, "examples": [ "\n {children}\n ", "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n \n {children}\n \n\n \n\n ", "\n {children}\n ", "\n {children}\n ", "\n {children}\n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "triggerRef": { "name": "triggerRef", "type": "RefObject", "required": false, "description": "Ref al elemento DOM que abre el panel y sirve de ancla (puede vivir fuera del `Popup`).\n Si se define, no se renderiza el `InnerButton` interno: enlazamos clic (toggle) y, si aplica,\n `openOnHover` en ese nodo. El panel sigue renderizándose en portal o `absolute` según props.\n Con `absolute={true}`, el ancla externa debería estar en el mismo subárbol posicionado que el\n portal del panel para que `offsetTop`/`offsetLeft` sean coherentes; si no, usa `absolute={false}`." }, "label": { "name": "label", "type": "ReactNode", "required": false, "description": "Texto o nodo del botón disparador (p. ej. JSX con hover personalizado)." }, "position": { "name": "position", "type": "| 'top'", "required": false }, "offset": { "name": "offset", "type": "number", "required": false, "description": "Separación en px entre el trigger y el borde del panel. Con `popoverArrow` activo, el valor\n se interpreta como separación deseada entre trigger y punta de la flecha (mínimo 6px)." }, "closeOnClickOutside": { "name": "closeOnClickOutside", "type": "boolean", "required": false }, "closeOnEscape": { "name": "closeOnEscape", "type": "boolean", "required": false }, "popupId": { "name": "popupId", "type": "string", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "showPanelBorder": { "name": "showPanelBorder", "type": "boolean", "required": false, "description": "Borde del panel flotante (`ui-border ui-border-default`). Por defecto `true`.\n Con `false`: sin contorno, sombra más marcada (`ui-shadow-xl`) y flecha sin trazo con sombra acorde." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false }, "onClose": { "name": "onClose", "type": "() => void", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "absolute": { "name": "absolute", "type": "boolean", "required": false }, "allowOverflow": { "name": "allowOverflow", "type": "boolean", "required": false, "description": "Si es `true`, el panel no fuerza `overflow: hidden`, de modo que descendientes posicionados en\n absoluto (p. ej. `Dropdown` con `popover.absolute: true`) puedan pintarse fuera del rectángulo\n del popup. Por defecto `false` (mejor recorte con bordes redondeados y scroll interno)." }, "openOnHover": { "name": "openOnHover", "type": "boolean | number", "required": false, "description": "Abrir el panel al pasar el ratón por el trigger, tras un retardo.\n - `false` / omitido: desactivado (por defecto).\n - `true`: retardo por defecto (200 ms).\n - número ≥ 0: retardo en ms (`0` = al instante).\n El clic en el trigger sigue alternando el panel. Para ir al panel sin cerrar, hay un margen al salir del trigger." }, "hoverAnchorFollowPointer": { "name": "hoverAnchorFollowPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: el panel se ancla al puntero dentro del trigger (rectángulo 1×1\n que sigue el ratón), actualizado en cada frame vía `requestAnimationFrame` para un movimiento fluido.\n Sin efecto si `openOnHover` está desactivado. Aplica al botón interno y a `triggerRef`." }, "openOnHoverAllowPanelPointer": { "name": "openOnHoverAllowPanelPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: si es `true` (por defecto), pasar el puntero del trigger al panel\n cancela el cierre programado (comportamiento “puente”). Si es `false`, el panel no cuenta como\n zona hover: al salir del trigger el popup se cierra aunque el puntero quede sobre el panel." }, "closeOnClick": { "name": "closeOnClick", "type": "boolean", "required": false }, "buttonClassName": { "name": "buttonClassName", "type": "string", "required": false }, "containerClassName": { "name": "containerClassName", "type": "string", "required": false }, "buttonTransition": { "name": "buttonTransition", "type": "boolean", "required": false }, "buttonStyle": { "name": "buttonStyle", "type": "React.CSSProperties", "required": false }, "borderRadius": { "name": "borderRadius", "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'", "required": false }, "stopPropagationList": { "name": "stopPropagationList", "type": "boolean", "required": false }, "popoverArrow": { "name": "popoverArrow", "type": "PopupArrowMode", "required": false, "description": "Flecha tipo “beak” hacia el trigger. Por defecto `'auto'` (lado según `position`, punta al centro del trigger).\n Con `absolute={true}`, `'auto'` no dibuja flecha; usa un objeto `{ edge, align }` o `false` para desactivarla." }, "popoverStructured": { "name": "popoverStructured", "type": "boolean", "required": false, "description": "Layout tipo modal (header / cuerpo / footer) reutilizando `ModalProvider` y `Modal.Header|Body|Footer` sin modificar el Modal.\n El contenido de `children` se renderiza en el cuerpo." }, "popoverTitle": { "name": "popoverTitle", "type": "string", "required": false, "description": "Título del encabezado (tipografía H6 del sistema)." }, "popoverDescription": { "name": "popoverDescription", "type": "string", "required": false, "description": "Subtítulo / descripción bajo el título." }, "popoverShowHeader": { "name": "popoverShowHeader", "type": "boolean", "required": false, "description": "Mostrar bloque de cabecera cuando `popoverStructured` es true." }, "popoverShowCloseButton": { "name": "popoverShowCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón cerrar en cabecera (contexto Modal)." }, "popoverIconConfig": { "name": "popoverIconConfig", "type": "ModalIcon", "required": false, "description": "Icono principal del header (mismo modelo que Modal)." }, "popoverBadge": { "name": "popoverBadge", "type": "ModalBadge", "required": false }, "popoverBadges": { "name": "popoverBadges", "type": "ModalBadge[]", "required": false }, "popoverHeaderButton": { "name": "popoverHeaderButton", "type": "ModalButton", "required": false }, "popoverHeaderButtons": { "name": "popoverHeaderButtons", "type": "ModalButton[]", "required": false }, "popoverShowFooter": { "name": "popoverShowFooter", "type": "boolean", "required": false, "description": "Incluir footer con botones del modelo Modal." }, "popoverFooterPrimaryButton": { "name": "popoverFooterPrimaryButton", "type": "ModalButton", "required": false }, "popoverFooterSecondaryButton": { "name": "popoverFooterSecondaryButton", "type": "ModalButton", "required": false }, "popoverFooterButtons": { "name": "popoverFooterButtons", "type": "ModalButton[]", "required": false }, "popoverFooterAuxButton": { "name": "popoverFooterAuxButton", "type": "ModalButton", "required": false }, "popoverFooterSlotLayout": { "name": "popoverFooterSlotLayout", "type": "'inline' | 'spread'", "required": false, "description": "Reparto de iconos en los botones del footer del popover estructurado (`popoverFooterPrimaryButton` /\n `popoverFooterSecondaryButton` / `popoverFooterButtons`). `spread` equivale a `slotLayout={{ var: 'spread', textAlign: 'center' }}` en cada\n botón y reparto de ancho en la fila del footer (misma idea que `footerSlotLayout` en `Modal` para botones legacy)." }, "popoverBodyWithPadding": { "name": "popoverBodyWithPadding", "type": "boolean", "required": false, "description": "Padding del cuerpo (`Modal.Body withPadding`). Por defecto true." } } } }, { "name": "POPUP_PANEL_Z_INDEX_BASE", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Acota el puntero al rectángulo del trigger en coordenadas de viewport.\nDevuelve la esquina superior izquierda de un ancla 1×1 lógica dentro del trigger\n(recorrido píxel a píxel cuando el trigger tiene tamaño entero en CSS px).\n/\nexport function clampClientPointForPopupAnchor(\n triggerRect: DOMRectReadOnly,\n clientX: number,\n clientY: number\n): { x: number; y: number } {\n const rw = Math.max(triggerRect.width, 0);\n const rh = Math.max(triggerRect.height, 0);\n const insetX = rw > 0 ? Math.min(1, rw) : 0;\n const insetY = rh > 0 ? Math.min(1, rh) : 0;\n const maxX = rw > 0 ? triggerRect.right - insetX : triggerRect.left;\n const maxY = rh > 0 ? triggerRect.bottom - insetY : triggerRect.top;\n const x = Math.min(Math.max(clientX, triggerRect.left), maxX);\n const y = Math.min(Math.max(cl", "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│ └── organisms/\n│ └── Popup.tsx # Componente principal\n├── hooks/ # Hooks personalizados\n├── stories/\n│ └── Popup.stories.tsx # Storybook stories\n└── index.ts # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef(null);\n\n\n
Contenido del popup
\n;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I", "confidence": "medium" }, "examples": [ "\n {children}\n ", "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n \n {children}\n \n\n \n\n ", "\n {children}\n ", "\n {children}\n ", "\n {children}\n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "triggerRef": { "name": "triggerRef", "type": "RefObject", "required": false, "description": "Ref al elemento DOM que abre el panel y sirve de ancla (puede vivir fuera del `Popup`).\n Si se define, no se renderiza el `InnerButton` interno: enlazamos clic (toggle) y, si aplica,\n `openOnHover` en ese nodo. El panel sigue renderizándose en portal o `absolute` según props.\n Con `absolute={true}`, el ancla externa debería estar en el mismo subárbol posicionado que el\n portal del panel para que `offsetTop`/`offsetLeft` sean coherentes; si no, usa `absolute={false}`." }, "label": { "name": "label", "type": "ReactNode", "required": false, "description": "Texto o nodo del botón disparador (p. ej. JSX con hover personalizado)." }, "position": { "name": "position", "type": "| 'top'", "required": false }, "offset": { "name": "offset", "type": "number", "required": false, "description": "Separación en px entre el trigger y el borde del panel. Con `popoverArrow` activo, el valor\n se interpreta como separación deseada entre trigger y punta de la flecha (mínimo 6px)." }, "closeOnClickOutside": { "name": "closeOnClickOutside", "type": "boolean", "required": false }, "closeOnEscape": { "name": "closeOnEscape", "type": "boolean", "required": false }, "popupId": { "name": "popupId", "type": "string", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "showPanelBorder": { "name": "showPanelBorder", "type": "boolean", "required": false, "description": "Borde del panel flotante (`ui-border ui-border-default`). Por defecto `true`.\n Con `false`: sin contorno, sombra más marcada (`ui-shadow-xl`) y flecha sin trazo con sombra acorde." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false }, "onClose": { "name": "onClose", "type": "() => void", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "absolute": { "name": "absolute", "type": "boolean", "required": false }, "allowOverflow": { "name": "allowOverflow", "type": "boolean", "required": false, "description": "Si es `true`, el panel no fuerza `overflow: hidden`, de modo que descendientes posicionados en\n absoluto (p. ej. `Dropdown` con `popover.absolute: true`) puedan pintarse fuera del rectángulo\n del popup. Por defecto `false` (mejor recorte con bordes redondeados y scroll interno)." }, "openOnHover": { "name": "openOnHover", "type": "boolean | number", "required": false, "description": "Abrir el panel al pasar el ratón por el trigger, tras un retardo.\n - `false` / omitido: desactivado (por defecto).\n - `true`: retardo por defecto (200 ms).\n - número ≥ 0: retardo en ms (`0` = al instante).\n El clic en el trigger sigue alternando el panel. Para ir al panel sin cerrar, hay un margen al salir del trigger." }, "hoverAnchorFollowPointer": { "name": "hoverAnchorFollowPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: el panel se ancla al puntero dentro del trigger (rectángulo 1×1\n que sigue el ratón), actualizado en cada frame vía `requestAnimationFrame` para un movimiento fluido.\n Sin efecto si `openOnHover` está desactivado. Aplica al botón interno y a `triggerRef`." }, "openOnHoverAllowPanelPointer": { "name": "openOnHoverAllowPanelPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: si es `true` (por defecto), pasar el puntero del trigger al panel\n cancela el cierre programado (comportamiento “puente”). Si es `false`, el panel no cuenta como\n zona hover: al salir del trigger el popup se cierra aunque el puntero quede sobre el panel." }, "closeOnClick": { "name": "closeOnClick", "type": "boolean", "required": false }, "buttonClassName": { "name": "buttonClassName", "type": "string", "required": false }, "containerClassName": { "name": "containerClassName", "type": "string", "required": false }, "buttonTransition": { "name": "buttonTransition", "type": "boolean", "required": false }, "buttonStyle": { "name": "buttonStyle", "type": "React.CSSProperties", "required": false }, "borderRadius": { "name": "borderRadius", "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'", "required": false }, "stopPropagationList": { "name": "stopPropagationList", "type": "boolean", "required": false }, "popoverArrow": { "name": "popoverArrow", "type": "PopupArrowMode", "required": false, "description": "Flecha tipo “beak” hacia el trigger. Por defecto `'auto'` (lado según `position`, punta al centro del trigger).\n Con `absolute={true}`, `'auto'` no dibuja flecha; usa un objeto `{ edge, align }` o `false` para desactivarla." }, "popoverStructured": { "name": "popoverStructured", "type": "boolean", "required": false, "description": "Layout tipo modal (header / cuerpo / footer) reutilizando `ModalProvider` y `Modal.Header|Body|Footer` sin modificar el Modal.\n El contenido de `children` se renderiza en el cuerpo." }, "popoverTitle": { "name": "popoverTitle", "type": "string", "required": false, "description": "Título del encabezado (tipografía H6 del sistema)." }, "popoverDescription": { "name": "popoverDescription", "type": "string", "required": false, "description": "Subtítulo / descripción bajo el título." }, "popoverShowHeader": { "name": "popoverShowHeader", "type": "boolean", "required": false, "description": "Mostrar bloque de cabecera cuando `popoverStructured` es true." }, "popoverShowCloseButton": { "name": "popoverShowCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón cerrar en cabecera (contexto Modal)." }, "popoverIconConfig": { "name": "popoverIconConfig", "type": "ModalIcon", "required": false, "description": "Icono principal del header (mismo modelo que Modal)." }, "popoverBadge": { "name": "popoverBadge", "type": "ModalBadge", "required": false }, "popoverBadges": { "name": "popoverBadges", "type": "ModalBadge[]", "required": false }, "popoverHeaderButton": { "name": "popoverHeaderButton", "type": "ModalButton", "required": false }, "popoverHeaderButtons": { "name": "popoverHeaderButtons", "type": "ModalButton[]", "required": false }, "popoverShowFooter": { "name": "popoverShowFooter", "type": "boolean", "required": false, "description": "Incluir footer con botones del modelo Modal." }, "popoverFooterPrimaryButton": { "name": "popoverFooterPrimaryButton", "type": "ModalButton", "required": false }, "popoverFooterSecondaryButton": { "name": "popoverFooterSecondaryButton", "type": "ModalButton", "required": false }, "popoverFooterButtons": { "name": "popoverFooterButtons", "type": "ModalButton[]", "required": false }, "popoverFooterAuxButton": { "name": "popoverFooterAuxButton", "type": "ModalButton", "required": false }, "popoverFooterSlotLayout": { "name": "popoverFooterSlotLayout", "type": "'inline' | 'spread'", "required": false, "description": "Reparto de iconos en los botones del footer del popover estructurado (`popoverFooterPrimaryButton` /\n `popoverFooterSecondaryButton` / `popoverFooterButtons`). `spread` equivale a `slotLayout={{ var: 'spread', textAlign: 'center' }}` en cada\n botón y reparto de ancho en la fila del footer (misma idea que `footerSlotLayout` en `Modal` para botones legacy)." }, "popoverBodyWithPadding": { "name": "popoverBodyWithPadding", "type": "boolean", "required": false, "description": "Padding del cuerpo (`Modal.Body withPadding`). Por defecto true." } } } }, { "name": "Z_INDEX_MODAL_ABOVE_POPUP", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Acota el puntero al rectángulo del trigger en coordenadas de viewport.\nDevuelve la esquina superior izquierda de un ancla 1×1 lógica dentro del trigger\n(recorrido píxel a píxel cuando el trigger tiene tamaño entero en CSS px).\n/\nexport function clampClientPointForPopupAnchor(\n triggerRect: DOMRectReadOnly,\n clientX: number,\n clientY: number\n): { x: number; y: number } {\n const rw = Math.max(triggerRect.width, 0);\n const rh = Math.max(triggerRect.height, 0);\n const insetX = rw > 0 ? Math.min(1, rw) : 0;\n const insetY = rh > 0 ? Math.min(1, rh) : 0;\n const maxX = rw > 0 ? triggerRect.right - insetX : triggerRect.left;\n const maxY = rh > 0 ? triggerRect.bottom - insetY : triggerRect.top;\n const x = Math.min(Math.max(clientX, triggerRect.left), maxX);\n const y = Math.min(Math.max(cl", "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│ └── organisms/\n│ └── Popup.tsx # Componente principal\n├── hooks/ # Hooks personalizados\n├── stories/\n│ └── Popup.stories.tsx # Storybook stories\n└── index.ts # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef(null);\n\n\n
Contenido del popup
\n;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I", "confidence": "medium" }, "examples": [ "\n {children}\n ", "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n \n {children}\n \n\n \n\n ", "\n {children}\n ", "\n {children}\n ", "\n {children}\n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "triggerRef": { "name": "triggerRef", "type": "RefObject", "required": false, "description": "Ref al elemento DOM que abre el panel y sirve de ancla (puede vivir fuera del `Popup`).\n Si se define, no se renderiza el `InnerButton` interno: enlazamos clic (toggle) y, si aplica,\n `openOnHover` en ese nodo. El panel sigue renderizándose en portal o `absolute` según props.\n Con `absolute={true}`, el ancla externa debería estar en el mismo subárbol posicionado que el\n portal del panel para que `offsetTop`/`offsetLeft` sean coherentes; si no, usa `absolute={false}`." }, "label": { "name": "label", "type": "ReactNode", "required": false, "description": "Texto o nodo del botón disparador (p. ej. JSX con hover personalizado)." }, "position": { "name": "position", "type": "| 'top'", "required": false }, "offset": { "name": "offset", "type": "number", "required": false, "description": "Separación en px entre el trigger y el borde del panel. Con `popoverArrow` activo, el valor\n se interpreta como separación deseada entre trigger y punta de la flecha (mínimo 6px)." }, "closeOnClickOutside": { "name": "closeOnClickOutside", "type": "boolean", "required": false }, "closeOnEscape": { "name": "closeOnEscape", "type": "boolean", "required": false }, "popupId": { "name": "popupId", "type": "string", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "showPanelBorder": { "name": "showPanelBorder", "type": "boolean", "required": false, "description": "Borde del panel flotante (`ui-border ui-border-default`). Por defecto `true`.\n Con `false`: sin contorno, sombra más marcada (`ui-shadow-xl`) y flecha sin trazo con sombra acorde." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false }, "onClose": { "name": "onClose", "type": "() => void", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "absolute": { "name": "absolute", "type": "boolean", "required": false }, "allowOverflow": { "name": "allowOverflow", "type": "boolean", "required": false, "description": "Si es `true`, el panel no fuerza `overflow: hidden`, de modo que descendientes posicionados en\n absoluto (p. ej. `Dropdown` con `popover.absolute: true`) puedan pintarse fuera del rectángulo\n del popup. Por defecto `false` (mejor recorte con bordes redondeados y scroll interno)." }, "openOnHover": { "name": "openOnHover", "type": "boolean | number", "required": false, "description": "Abrir el panel al pasar el ratón por el trigger, tras un retardo.\n - `false` / omitido: desactivado (por defecto).\n - `true`: retardo por defecto (200 ms).\n - número ≥ 0: retardo en ms (`0` = al instante).\n El clic en el trigger sigue alternando el panel. Para ir al panel sin cerrar, hay un margen al salir del trigger." }, "hoverAnchorFollowPointer": { "name": "hoverAnchorFollowPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: el panel se ancla al puntero dentro del trigger (rectángulo 1×1\n que sigue el ratón), actualizado en cada frame vía `requestAnimationFrame` para un movimiento fluido.\n Sin efecto si `openOnHover` está desactivado. Aplica al botón interno y a `triggerRef`." }, "openOnHoverAllowPanelPointer": { "name": "openOnHoverAllowPanelPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: si es `true` (por defecto), pasar el puntero del trigger al panel\n cancela el cierre programado (comportamiento “puente”). Si es `false`, el panel no cuenta como\n zona hover: al salir del trigger el popup se cierra aunque el puntero quede sobre el panel." }, "closeOnClick": { "name": "closeOnClick", "type": "boolean", "required": false }, "buttonClassName": { "name": "buttonClassName", "type": "string", "required": false }, "containerClassName": { "name": "containerClassName", "type": "string", "required": false }, "buttonTransition": { "name": "buttonTransition", "type": "boolean", "required": false }, "buttonStyle": { "name": "buttonStyle", "type": "React.CSSProperties", "required": false }, "borderRadius": { "name": "borderRadius", "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'", "required": false }, "stopPropagationList": { "name": "stopPropagationList", "type": "boolean", "required": false }, "popoverArrow": { "name": "popoverArrow", "type": "PopupArrowMode", "required": false, "description": "Flecha tipo “beak” hacia el trigger. Por defecto `'auto'` (lado según `position`, punta al centro del trigger).\n Con `absolute={true}`, `'auto'` no dibuja flecha; usa un objeto `{ edge, align }` o `false` para desactivarla." }, "popoverStructured": { "name": "popoverStructured", "type": "boolean", "required": false, "description": "Layout tipo modal (header / cuerpo / footer) reutilizando `ModalProvider` y `Modal.Header|Body|Footer` sin modificar el Modal.\n El contenido de `children` se renderiza en el cuerpo." }, "popoverTitle": { "name": "popoverTitle", "type": "string", "required": false, "description": "Título del encabezado (tipografía H6 del sistema)." }, "popoverDescription": { "name": "popoverDescription", "type": "string", "required": false, "description": "Subtítulo / descripción bajo el título." }, "popoverShowHeader": { "name": "popoverShowHeader", "type": "boolean", "required": false, "description": "Mostrar bloque de cabecera cuando `popoverStructured` es true." }, "popoverShowCloseButton": { "name": "popoverShowCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón cerrar en cabecera (contexto Modal)." }, "popoverIconConfig": { "name": "popoverIconConfig", "type": "ModalIcon", "required": false, "description": "Icono principal del header (mismo modelo que Modal)." }, "popoverBadge": { "name": "popoverBadge", "type": "ModalBadge", "required": false }, "popoverBadges": { "name": "popoverBadges", "type": "ModalBadge[]", "required": false }, "popoverHeaderButton": { "name": "popoverHeaderButton", "type": "ModalButton", "required": false }, "popoverHeaderButtons": { "name": "popoverHeaderButtons", "type": "ModalButton[]", "required": false }, "popoverShowFooter": { "name": "popoverShowFooter", "type": "boolean", "required": false, "description": "Incluir footer con botones del modelo Modal." }, "popoverFooterPrimaryButton": { "name": "popoverFooterPrimaryButton", "type": "ModalButton", "required": false }, "popoverFooterSecondaryButton": { "name": "popoverFooterSecondaryButton", "type": "ModalButton", "required": false }, "popoverFooterButtons": { "name": "popoverFooterButtons", "type": "ModalButton[]", "required": false }, "popoverFooterAuxButton": { "name": "popoverFooterAuxButton", "type": "ModalButton", "required": false }, "popoverFooterSlotLayout": { "name": "popoverFooterSlotLayout", "type": "'inline' | 'spread'", "required": false, "description": "Reparto de iconos en los botones del footer del popover estructurado (`popoverFooterPrimaryButton` /\n `popoverFooterSecondaryButton` / `popoverFooterButtons`). `spread` equivale a `slotLayout={{ var: 'spread', textAlign: 'center' }}` en cada\n botón y reparto de ancho en la fila del footer (misma idea que `footerSlotLayout` en `Modal` para botones legacy)." }, "popoverBodyWithPadding": { "name": "popoverBodyWithPadding", "type": "boolean", "required": false, "description": "Padding del cuerpo (`Modal.Body withPadding`). Por defecto true." } } } }, { "name": "Z_INDEX_TOOLTIP", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Acota el puntero al rectángulo del trigger en coordenadas de viewport.\nDevuelve la esquina superior izquierda de un ancla 1×1 lógica dentro del trigger\n(recorrido píxel a píxel cuando el trigger tiene tamaño entero en CSS px).\n/\nexport function clampClientPointForPopupAnchor(\n triggerRect: DOMRectReadOnly,\n clientX: number,\n clientY: number\n): { x: number; y: number } {\n const rw = Math.max(triggerRect.width, 0);\n const rh = Math.max(triggerRect.height, 0);\n const insetX = rw > 0 ? Math.min(1, rw) : 0;\n const insetY = rh > 0 ? Math.min(1, rh) : 0;\n const maxX = rw > 0 ? triggerRect.right - insetX : triggerRect.left;\n const maxY = rh > 0 ? triggerRect.bottom - insetY : triggerRect.top;\n const x = Math.min(Math.max(clientX, triggerRect.left), maxX);\n const y = Math.min(Math.max(cl", "readme": "# Popup Component\n\nComponente de popup/dropdown posicionable y configurable que se posiciona relativamente a un trigger, con soporte para múltiples posiciones, cierre automático, tooltips e iconos.\n\n## Estructura\n\n```\nPopup/\n├── components/\n│ └── organisms/\n│ └── Popup.tsx # Componente principal\n├── hooks/ # Hooks personalizados\n├── stories/\n│ └── Popup.stories.tsx # Storybook stories\n└── index.ts # Export del módulo\n```\n\n## Uso Básico\n\n```tsx\nimport { Popup } from '@imj_media/ui';\nimport { useRef } from 'react';\n\n// Popup simple\nconst popupRef = useRef(null);\n\n\n
Contenido del popup
\n;\n```\n\n## Props Principales\n\n### Control del Popup\n\n- `label?: string` - Texto del botón trigger\n- `position?: PopupPosition` - Posición del popup relativa al trigger (default: `'bottom-right'`)\n- `offset?: number` - Distancia en píxeles entre el trigger y el popup (default: `6`)\n- `popupId?: string` - ID único del popup (auto-generado si no se proporciona)\n\n### Comportamiento\n\n- `closeOnClickOutside?: boolean` - Cerrar al hacer clic fuera (default: `true`)\n- `closeOnEscape?: boolean` - Cerrar con tecla Escape (default: `true`)\n- `closeOnClick?: boolean` - Cerrar al hacer clic en el trigger (default: `true`)\n- `disabled?: boolean` - Deshabilitar el popup (default: `false`)\n\n### Estilo del Trigger\n\n- `theme?: 'solid' | 'outlined' | 'text' | 'ghost'` - Tema del botón trigger (default: `'solid'`)\n- `color?: ButtonColors` - Color del botón trigger (default: `'tertiary'`)\n- `size?: 'xs' | 'sm' | 'md' | 'lg'` - Tamaño del botón trigger (default: `'xs'`)\n- `rounded?: boolean` - Bordes redondeados (default: `false`)\n- `pill?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'` - Radio de borde (default: `'xs'`)\n- `borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'` - Radio de borde del popup (default: `'sm'`)\n\n### Slots e Iconos\n\n- `icon?: I", "confidence": "medium" }, "examples": [ "\n {children}\n ", "import { BUTTON_SLOT_SPREAD_CENTER } from '@imj_media/ui'; // o tu path de tipos/botón\n\n \n {children}\n \n\n \n\n ", "\n {children}\n ", "\n {children}\n ", "\n {children}\n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "triggerRef": { "name": "triggerRef", "type": "RefObject", "required": false, "description": "Ref al elemento DOM que abre el panel y sirve de ancla (puede vivir fuera del `Popup`).\n Si se define, no se renderiza el `InnerButton` interno: enlazamos clic (toggle) y, si aplica,\n `openOnHover` en ese nodo. El panel sigue renderizándose en portal o `absolute` según props.\n Con `absolute={true}`, el ancla externa debería estar en el mismo subárbol posicionado que el\n portal del panel para que `offsetTop`/`offsetLeft` sean coherentes; si no, usa `absolute={false}`." }, "label": { "name": "label", "type": "ReactNode", "required": false, "description": "Texto o nodo del botón disparador (p. ej. JSX con hover personalizado)." }, "position": { "name": "position", "type": "| 'top'", "required": false }, "offset": { "name": "offset", "type": "number", "required": false, "description": "Separación en px entre el trigger y el borde del panel. Con `popoverArrow` activo, el valor\n se interpreta como separación deseada entre trigger y punta de la flecha (mínimo 6px)." }, "closeOnClickOutside": { "name": "closeOnClickOutside", "type": "boolean", "required": false }, "closeOnEscape": { "name": "closeOnEscape", "type": "boolean", "required": false }, "popupId": { "name": "popupId", "type": "string", "required": false }, "className": { "name": "className", "type": "string", "required": false }, "showPanelBorder": { "name": "showPanelBorder", "type": "boolean", "required": false, "description": "Borde del panel flotante (`ui-border ui-border-default`). Por defecto `true`.\n Con `false`: sin contorno, sombra más marcada (`ui-shadow-xl`) y flecha sin trazo con sombra acorde." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false }, "onClose": { "name": "onClose", "type": "() => void", "required": false }, "disabled": { "name": "disabled", "type": "boolean", "required": false }, "absolute": { "name": "absolute", "type": "boolean", "required": false }, "allowOverflow": { "name": "allowOverflow", "type": "boolean", "required": false, "description": "Si es `true`, el panel no fuerza `overflow: hidden`, de modo que descendientes posicionados en\n absoluto (p. ej. `Dropdown` con `popover.absolute: true`) puedan pintarse fuera del rectángulo\n del popup. Por defecto `false` (mejor recorte con bordes redondeados y scroll interno)." }, "openOnHover": { "name": "openOnHover", "type": "boolean | number", "required": false, "description": "Abrir el panel al pasar el ratón por el trigger, tras un retardo.\n - `false` / omitido: desactivado (por defecto).\n - `true`: retardo por defecto (200 ms).\n - número ≥ 0: retardo en ms (`0` = al instante).\n El clic en el trigger sigue alternando el panel. Para ir al panel sin cerrar, hay un margen al salir del trigger." }, "hoverAnchorFollowPointer": { "name": "hoverAnchorFollowPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: el panel se ancla al puntero dentro del trigger (rectángulo 1×1\n que sigue el ratón), actualizado en cada frame vía `requestAnimationFrame` para un movimiento fluido.\n Sin efecto si `openOnHover` está desactivado. Aplica al botón interno y a `triggerRef`." }, "openOnHoverAllowPanelPointer": { "name": "openOnHoverAllowPanelPointer", "type": "boolean", "required": false, "description": "Con `openOnHover` activo: si es `true` (por defecto), pasar el puntero del trigger al panel\n cancela el cierre programado (comportamiento “puente”). Si es `false`, el panel no cuenta como\n zona hover: al salir del trigger el popup se cierra aunque el puntero quede sobre el panel." }, "closeOnClick": { "name": "closeOnClick", "type": "boolean", "required": false }, "buttonClassName": { "name": "buttonClassName", "type": "string", "required": false }, "containerClassName": { "name": "containerClassName", "type": "string", "required": false }, "buttonTransition": { "name": "buttonTransition", "type": "boolean", "required": false }, "buttonStyle": { "name": "buttonStyle", "type": "React.CSSProperties", "required": false }, "borderRadius": { "name": "borderRadius", "type": "'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'", "required": false }, "stopPropagationList": { "name": "stopPropagationList", "type": "boolean", "required": false }, "popoverArrow": { "name": "popoverArrow", "type": "PopupArrowMode", "required": false, "description": "Flecha tipo “beak” hacia el trigger. Por defecto `'auto'` (lado según `position`, punta al centro del trigger).\n Con `absolute={true}`, `'auto'` no dibuja flecha; usa un objeto `{ edge, align }` o `false` para desactivarla." }, "popoverStructured": { "name": "popoverStructured", "type": "boolean", "required": false, "description": "Layout tipo modal (header / cuerpo / footer) reutilizando `ModalProvider` y `Modal.Header|Body|Footer` sin modificar el Modal.\n El contenido de `children` se renderiza en el cuerpo." }, "popoverTitle": { "name": "popoverTitle", "type": "string", "required": false, "description": "Título del encabezado (tipografía H6 del sistema)." }, "popoverDescription": { "name": "popoverDescription", "type": "string", "required": false, "description": "Subtítulo / descripción bajo el título." }, "popoverShowHeader": { "name": "popoverShowHeader", "type": "boolean", "required": false, "description": "Mostrar bloque de cabecera cuando `popoverStructured` es true." }, "popoverShowCloseButton": { "name": "popoverShowCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón cerrar en cabecera (contexto Modal)." }, "popoverIconConfig": { "name": "popoverIconConfig", "type": "ModalIcon", "required": false, "description": "Icono principal del header (mismo modelo que Modal)." }, "popoverBadge": { "name": "popoverBadge", "type": "ModalBadge", "required": false }, "popoverBadges": { "name": "popoverBadges", "type": "ModalBadge[]", "required": false }, "popoverHeaderButton": { "name": "popoverHeaderButton", "type": "ModalButton", "required": false }, "popoverHeaderButtons": { "name": "popoverHeaderButtons", "type": "ModalButton[]", "required": false }, "popoverShowFooter": { "name": "popoverShowFooter", "type": "boolean", "required": false, "description": "Incluir footer con botones del modelo Modal." }, "popoverFooterPrimaryButton": { "name": "popoverFooterPrimaryButton", "type": "ModalButton", "required": false }, "popoverFooterSecondaryButton": { "name": "popoverFooterSecondaryButton", "type": "ModalButton", "required": false }, "popoverFooterButtons": { "name": "popoverFooterButtons", "type": "ModalButton[]", "required": false }, "popoverFooterAuxButton": { "name": "popoverFooterAuxButton", "type": "ModalButton", "required": false }, "popoverFooterSlotLayout": { "name": "popoverFooterSlotLayout", "type": "'inline' | 'spread'", "required": false, "description": "Reparto de iconos en los botones del footer del popover estructurado (`popoverFooterPrimaryButton` /\n `popoverFooterSecondaryButton` / `popoverFooterButtons`). `spread` equivale a `slotLayout={{ var: 'spread', textAlign: 'center' }}` en cada\n botón y reparto de ancho en la fila del footer (misma idea que `footerSlotLayout` en `Modal` para botones legacy)." }, "popoverBodyWithPadding": { "name": "popoverBodyWithPadding", "type": "boolean", "required": false, "description": "Padding del cuerpo (`Modal.Body withPadding`). Por defecto true." } } } } ] }, { "id": "ProgressBar", "path": "src/modules/ProgressBar", "legacy": false, "compositionType": 1, "exports": [ { "name": "ProgressBar", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Tamaños válidos para ProgressBar */\nconst VALID_SIZES: ProgressBarSize[] = ['xxs', 'xs', 'sm', 'md', 'lg'];\n\n/**\nHook interno para manejar la cuenta regresiva del ProgressBar.\nAnima el progreso desde un valor inicial hasta 0 en un tiempo determinado.\n/\nconst useCountdown = (\n initialProgress: number,\n countdownSeconds: number | undefined,\n onComplete?: () => void\n) => {\n const [currentProgress, setCurrentProgress] = useState(initialProgress);\n const intervalRef = useRef(null);\n const startTimeRef = useRef(0);\n const hasCompletedRef = useRef(false);\n // Guardar el callback en una ref para evitar que esté en las dependencias del useEffect\n const onCompleteRef = useRef(onComplete);\n\n const INTERVAL_MS = 16; // ~60fps\n\n // Mantener la ref actualizada", "confidence": "medium" }, "examples": [ "// Modo normal\n\n\n// Modo compacto - barra en línea con el label\n", " {}}\n withBackground\n/>", "// Uso simple - la barra anima automáticamente de 75% a 0% en 5 segundos\n console.log('¡Completado!')}\n/>\n\n// Con diferentes colores y duraciones\n alert('¡Se acabó el tiempo!')}\n/>", "// Modo normal\n\n\n// Modo compacto - barra en línea con el label\n", " {}}\n withBackground\n/>" ], "props": { "groups": { "progressHeader": { "props": { "label": { "name": "label", "type": "string", "required": false, "description": "Texto del label" }, "progress": { "name": "progress", "type": "number", "required": false, "description": "Valor de progreso" }, "progressSuffix": { "name": "progressSuffix", "type": "string", "required": false, "description": "Sufijo del progreso" }, "eta": { "name": "eta", "type": "string", "required": false, "description": "Texto adicional (ej: \"1m restante\")" }, "showCloseButton": { "name": "showCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón de cerrar" }, "onClose": { "name": "onClose", "type": "() => void", "required": false, "description": "Callback al cerrar" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases adicionales" } } } }, "deprecatedRoot": [ { "name": "description", "migrateTo": "helperText */", "type": "string" }, { "name": "progressChar", "migrateTo": "progressSuffix */", "type": "string" }, { "name": "status", "type": "'neutral' | 'blue' | 'red'" }, { "name": "borderStyle", "type": "'dashed' | 'solid' | 'small-solid'" } ], "flat": { "color": { "name": "color", "type": "ProgressBarColor", "required": false, "description": "Color de la barra" }, "progress": { "name": "progress", "type": "number", "required": false, "description": "Porcentaje de progreso (0-100)" }, "label": { "name": "label", "type": "string", "required": false, "description": "Texto del label" }, "showLabel": { "name": "showLabel", "type": "boolean", "required": false, "description": "Mostrar label" }, "showProgress": { "name": "showProgress", "type": "boolean", "required": false, "description": "Mostrar porcentaje de progreso" }, "progressSuffix": { "name": "progressSuffix", "type": "string", "required": false, "description": "Sufijo del progreso (por defecto \"%\")" }, "eta": { "name": "eta", "type": "string", "required": false, "description": "Texto ETA (ej: \"1m restante\")" }, "size": { "name": "size", "type": "ProgressBarSize", "required": false, "description": "Tamaño de la barra" }, "icon": { "name": "icon", "type": "IconType | IconProp", "required": false, "description": "Ícono a mostrar (deprecado - usar showCloseButton)" }, "iconDuotonePrimary": { "name": "iconDuotonePrimary", "type": "IconFontColor", "required": false }, "iconDuotoneSecondary": { "name": "iconDuotoneSecondary", "type": "IconFontColor", "required": false }, "iconDuotoneOpacityPrimary": { "name": "iconDuotoneOpacityPrimary", "type": "number", "required": false }, "iconDuotoneOpacitySecondary": { "name": "iconDuotoneOpacitySecondary", "type": "number", "required": false }, "showIcon": { "name": "showIcon", "type": "boolean", "required": false, "description": "Mostrar ícono (deprecado - usar showCloseButton)" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases adicionales" }, "duration": { "name": "duration", "type": "number", "required": false, "description": "Duración de la animación" }, "withBackground": { "name": "withBackground", "type": "boolean", "required": false, "description": "Mostrar fondo de la barra" }, "helperText": { "name": "helperText", "type": "string", "required": false, "description": "Texto de ayuda inferior" }, "helperTextType": { "name": "helperTextType", "type": "HelperTextType", "required": false, "description": "Tipo de texto de ayuda" }, "compact": { "name": "compact", "type": "boolean", "required": false, "description": "Modo compacto (sin texto de ayuda)" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Estado deshabilitado" }, "showCloseButton": { "name": "showCloseButton", "type": "boolean", "required": false, "description": "Mostrar botón de cerrar" }, "onClose": { "name": "onClose", "type": "() => void", "required": false, "description": "Callback al cerrar" }, "countdown": { "name": "countdown", "type": "number", "required": false, "description": "Duración de la cuenta regresiva en segundos.\n Si se proporciona, la barra animará automáticamente desde el valor de `progress` hasta 0." }, "onCountdownComplete": { "name": "onCountdownComplete", "type": "() => void", "required": false, "description": "Callback que se ejecuta cuando la cuenta regresiva llega a 0.\n Solo se ejecuta si `countdown` está definido." } } } } ] }, { "id": "RadioButton", "path": "src/modules/RadioButton", "legacy": false, "compositionType": 1, "exports": [ { "name": "RadioButton", "kind": "component", "description": { "primary": "storybook", "storybook": "Un componente RadioButton personalizado y simple para selecciones únicas. Soporta estados controlado y no controlado.", "jsdoc": "Componente RadioButton - Átomo\nUn radio button personalizable con múltiples estados y variantes de color.\nImplementa tokens semánticos de Figma para consistencia visual.", "confidence": "high" }, "examples": [ "import { RadioButton } from '@/modules/RadioButton';\n import { useState } from 'react';\n\n export default function Example() {\n const [isChecked, setIsChecked] = useState(false);\n\n return (\n setIsChecked(!isChecked)}\n color=\"blue\"\n size=\"md\"\n />\n )\n }", "const [selectedSize, setSelectedSize] = useState('md');\n\n setSelectedSize('sm')}\n size=\"sm\"\n color=\"blue\"\n />\n setSelectedSize('md')}\n size=\"md\"\n color=\"blue\"\n />\n setSelectedSize('lg')}\n size=\"lg\"\n color=\"blue\"\n />", "const [selectedColor, setSelectedColor] = useState('blue');\n\n setSelectedColor('blue')}\n color=\"blue\"\n />\n setSelectedColor('green')}\n color=\"green\"\n />\n setSelectedColor('red')}\n color=\"red\"\n />\n setSelectedColor('yellow')}\n color=\"yellow\"\n />\n setSelectedColor('neutral')}\n color=\"neutral\"\n />", "const [isChecked, setIsChecked] = useState(false);\n\n setIsChecked(!isChecked)}\n disabled={true}\n color=\"blue\"\n />\n setIsChecked(!isChecked)}\n disabled={false}\n color=\"blue\"\n />", "const [isChecked, setIsChecked] = useState(false);\n\n setIsChecked(!isChecked)}\n color=\"blue\"\n size=\"md\"\n />", "import { RadioButtonGroup } from '@/modules/RadioButton';\n import { useState } from 'react';\n\n export default function Example() {\n const [selectedValue, setSelectedValue] = useState('option1');\n\n return (\n \n )\n }", "const [selectedValue, setSelectedValue] = useState('option1');\n\n ", "const [selectedValue, setSelectedValue] = useState('option1');\n\n ", "const [selectedSize, setSelectedSize] = useState('md');\n\n \n \n ", "const [selectedColor, setSelectedColor] = useState('blue');\n\n \n \n " ], "props": { "groups": { "base": { "props": { "label": { "name": "label", "type": "string", "required": false, "description": "Texto del label del radio button" }, "size": { "name": "size", "type": "RadioButtonSize", "required": false, "description": "Tamaño del radio button" }, "color": { "name": "color", "type": "RadioButtonColor", "required": false, "description": "Color del radio button" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Si el radio button está deshabilitado" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales para el contenedor" }, "labelClassName": { "name": "labelClassName", "type": "string", "required": false, "description": "Clases CSS adicionales para el label" }, "id": { "name": "id", "type": "string", "required": false, "description": "ID único del radio button" }, "checked": { "name": "checked", "type": "boolean", "required": false, "description": "Si el radio button está seleccionado" }, "onChange": { "name": "onChange", "type": "(event: React.ChangeEvent) => void", "required": false, "description": "Callback cuando cambia el estado" }, "name": { "name": "name", "type": "string", "required": false, "description": "Nombre del grupo de radio buttons" } } }, "group": { "props": { "options": { "name": "options", "type": "RadioButtonOption[]", "required": true, "description": "Array de opciones para el grupo de radio buttons" }, "value": { "name": "value", "type": "string", "required": false, "description": "Valor seleccionado actualmente" }, "onChange": { "name": "onChange", "type": "(value: string) => void", "required": false, "description": "Callback cuando cambia la selección" }, "size": { "name": "size", "type": "RadioButtonSize", "required": false, "description": "Tamaño de todos los radio buttons" }, "color": { "name": "color", "type": "RadioButtonColor", "required": false, "description": "Color de todos los radio buttons" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Si todos los radio buttons están deshabilitados" }, "orientation": { "name": "orientation", "type": "'horizontal' | 'vertical'", "required": false, "description": "Orientación del grupo" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" }, "name": { "name": "name", "type": "string", "required": false, "description": "Nombre del grupo" } } } }, "deprecatedRoot": [], "flat": { "options": { "name": "options", "type": "RadioButtonOption[]", "required": true, "description": "Array de opciones para el grupo de radio buttons" }, "value": { "name": "value", "type": "string", "required": false, "description": "Valor seleccionado actualmente" }, "onChange": { "name": "onChange", "type": "(value: string) => void", "required": false, "description": "Callback cuando cambia la selección" }, "size": { "name": "size", "type": "RadioButtonSize", "required": false, "description": "Tamaño de todos los radio buttons" }, "color": { "name": "color", "type": "RadioButtonColor", "required": false, "description": "Color de todos los radio buttons" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Si todos los radio buttons están deshabilitados" }, "orientation": { "name": "orientation", "type": "'horizontal' | 'vertical'", "required": false, "description": "Orientación del grupo" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" }, "name": { "name": "name", "type": "string", "required": false, "description": "Nombre del grupo" } } } } ] }, { "id": "RangeBar", "path": "src/modules/RangeBar", "legacy": false, "compositionType": 1, "exports": [ { "name": "RANGE_BAR_TRACK_BLEED_X", "kind": "component", "description": { "primary": "storybook", "storybook": "Control de rango con dos extremos. API agrupada:", "jsdoc": "Padding horizontal del carril: deja sitio para el thumb (20px) centrado en 0% y 100%\nsin recortarse. Debe aplicarse igual en `RangeBar` y en filas de `RangeSelector` alineadas a la pista.", "confidence": "high" }, "examples": [ "", "" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "range": { "name": "range", "type": "RangeBarRangeProps", "required": true, "description": "Dominio y valor del intervalo." }, "events": { "name": "events", "type": "RangeBarEventsProps", "required": true, "description": "Emisión de cambios de valor." }, "appearance": { "name": "appearance", "type": "RangeBarAppearanceProps", "required": false, "description": "Variante cromática del relleno y punto interior." }, "accessibility": { "name": "accessibility", "type": "RangeBarAccessibilityProps", "required": false, "description": "Etiquetas de grupo y por thumb." }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Deshabilita interacción y atenua la pista." }, "trackBleed": { "name": "trackBleed", "type": "boolean", "required": false, "description": "Sangrado horizontal (`RANGE_BAR_TRACK_BLEED_X`, 10px) para que los thumbs de 20px no se recorten\n en 0% / 100%. En layouts muy estrechos (p. ej. `RangeSelector` compacto) se puede desactivar." }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases en el contenedor externo (ref)." } } } } ] }, { "id": "Rating", "path": "src/modules/Rating", "legacy": false, "compositionType": 1, "exports": [ { "name": "Rating", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Rating - Componente de calificación con estrellas\nComponente que muestra un sistema de calificación con estrellas.\nSoporta modo lectura y edición, hover interactivo y diferentes tamaños.", "confidence": "medium" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "value": { "name": "value", "type": "number", "required": false }, "max": { "name": "max", "type": "number", "required": false }, "size": { "name": "size", "type": "'sm' | 'md' | 'lg'", "required": false }, "readonly": { "name": "readonly", "type": "boolean", "required": false }, "onChange": { "name": "onChange", "type": "(value: number) => void", "required": false }, "className": { "name": "className", "type": "string", "required": false } } } } ] }, { "id": "Separator", "path": "src/modules/Separator", "legacy": false, "compositionType": 1, "exports": [ { "name": "Separator", "kind": "component", "description": { "primary": "storybook", "storybook": "Separador visual horizontal o vertical. Con", "jsdoc": "Separator - Componente de separador visual\nComponente que muestra una línea separadora horizontal o vertical.\nÚtil para dividir secciones de contenido visualmente.", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "className": { "name": "className", "type": "string", "required": false }, "vertical": { "name": "vertical", "type": "boolean", "required": false }, "padding": { "name": "padding", "type": "boolean", "required": false }, "label": { "name": "label", "type": "string", "required": false, "description": "Texto centrado entre dos tramos de línea. Solo tiene efecto en orientación horizontal;\n con `vertical` se ignora." } } } } ] }, { "id": "Sidebar", "path": "src/modules/Sidebar", "legacy": false, "compositionType": 1, "exports": [ { "name": "Sidebar", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.", "jsdoc": "Application sidebar aligned with the Sidebar-Menu Figma spec: 240px expanded, 56px collapsed,\n12px rail padding, header row (logo + optional trailing), collapse control with shadow-03,\nscrollable menu region, workspace card below the menu (or sheet over profile when `workspace.workspaceSheet`),\nthen profile and optional footer.", "confidence": "high" }, "examples": [], "props": { "groups": { "menuItem": { "props": { "id": { "name": "id", "type": "string", "required": true, "description": "Identificador único del item" }, "label": { "name": "label", "type": "string", "required": true, "description": "Texto a mostrar" }, "icon": { "name": "icon", "type": "SidebarIcon", "required": false, "description": "Icono del item (FontAwesome)" }, "badge": { "name": "badge", "type": "SidebarBadge", "required": false, "description": "Badge opcional" }, "active": { "name": "active", "type": "boolean", "required": false, "description": "Indica si el item está activo/seleccionado" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Indica si el item está deshabilitado" }, "hasSubmenu": { "name": "hasSubmenu", "type": "boolean", "required": false, "description": "Indica si el item tiene submenú" }, "onClick": { "name": "onClick", "type": "(id: string) => void", "required": false, "description": "Handler de click" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" }, "href": { "name": "href", "type": "string", "required": false, "description": "Ruta de navegación (opcional)" } } }, "sectionTitle": { "props": { "title": { "name": "title", "type": "string", "required": true, "description": "Texto del título" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" } } }, "divider": { "props": { "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" }, "withText": { "name": "withText", "type": "boolean", "required": false, "description": "Muestra divider con texto" }, "text": { "name": "text", "type": "string", "required": false, "description": "Texto del divider" } } }, "menuGroup": { "props": { "title": { "name": "title", "type": "string", "required": false, "description": "Título de la sección (opcional)" }, "items": { "name": "items", "type": "SidebarMenuItemProps[]", "required": true, "description": "Items del menú" }, "collapsible": { "name": "collapsible", "type": "boolean", "required": false, "description": "When true with `title`, section header toggles visibility (Figma collapsible blocks).\n When false, title uses a static divider row." }, "defaultExpanded": { "name": "defaultExpanded", "type": "boolean", "required": false, "description": "Initial open state when `collapsible` is true." }, "collapsed": { "name": "collapsed", "type": "boolean", "required": false, "description": "When true (narrow rail), section titles and collapsible headers are hidden; titled groups\n show a plain divider line only, then items." }, "skipLeadingPlainDivider": { "name": "skipLeadingPlainDivider", "type": "boolean", "required": false, "description": "When the group has a `title`, omit the leading plain `SidebarDivider` when it would\n duplicate the rail divider below the header: collapsed rail (before items), or expanded\n collapsible section (before the chevron header)." }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" } } }, "workspaceCard": { "props": { "icon": { "name": "icon", "type": "SidebarIcon", "required": false, "description": "Leading icon (Figma: pen-to-square on brand)." }, "sectionLabel": { "name": "sectionLabel", "type": "string", "required": false, "description": "Small label above the campaign row (Figma Sidebar-Menu “Mesa de trabajo”, Body XS / tertiary)." }, "title": { "name": "title", "type": "string", "required": false, "description": "Primary campaign/project line (Body LG / brand). If `projectId` is set, it wins for display." }, "badge": { "name": "badge", "type": "SidebarBadge", "required": false, "description": "Badge with counter (Figma: brand pill on the right)." }, "projectId": { "name": "projectId", "type": "string", "required": false, "description": "Preferred source for the primary line when both `title` and `projectId` are used." }, "showActions": { "name": "showActions", "type": "boolean", "required": false, "description": "When false, hides the footer text actions even if `onOpen` / `onClose` are set." }, "onClose": { "name": "onClose", "type": "() => void", "required": false, "description": "Left CTA (Figma: “Cerrar”, danger text)." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false, "description": "Right CTA (Figma: “Ver pauta”)." }, "closeLabel": { "name": "closeLabel", "type": "string", "required": false, "description": "Copy for the close action." }, "primaryActionLabel": { "name": "primaryActionLabel", "type": "string", "required": false, "description": "Copy for the primary action (e.g. open schedule)." }, "cardBorderStyle": { "name": "cardBorderStyle", "type": "'solid' | 'dashed'", "required": false, "description": "Border style for the card surface (Figma “Mesa de trabajo” uses dashed)." }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" } } }, "userProfileSummary": { "props": { "name": { "name": "name", "type": "string", "required": true, "description": "Display name (rail primary line + popover header)." }, "subtitle": { "name": "subtitle", "type": "string", "required": false, "description": "Secondary line on the rail (e.g. role)." }, "email": { "name": "email", "type": "string", "required": false, "description": "Secondary line in the popover header (e.g. email).\n Falls back to `subtitle` when omitted." }, "avatarProps": { "name": "avatarProps", "type": "Omit & { type?: AvatarProps['type']", "required": false }, "src": { "name": "src", "type": "string }", "required": false }, "presence": { "name": "presence", "type": "{", "required": false, "description": "Optional presence chip in the popover header (e.g. “En linea”)." }, "label": { "name": "label", "type": "string", "required": true } } }, "userProfileMenu": { "props": { "onSettings": { "name": "onSettings", "type": "() => void", "required": false }, "settingsLabel": { "name": "settingsLabel", "type": "string", "required": false }, "darkMode": { "name": "darkMode", "type": "{", "required": false }, "checked": { "name": "checked", "type": "boolean", "required": true }, "onChange": { "name": "onChange", "type": "(checked: boolean) => void", "required": true }, "label": { "name": "label", "type": "string", "required": false }, "onLogout": { "name": "onLogout", "type": "() => void", "required": false }, "logoutLabel": { "name": "logoutLabel", "type": "string", "required": false } } }, "userProfile": { "props": { "summary": { "name": "summary", "type": "SidebarUserProfileSummaryProps", "required": true }, "menu": { "name": "menu", "type": "SidebarUserProfileMenuProps", "required": false }, "menuPosition": { "name": "menuPosition", "type": "| 'top'", "required": false, "description": "Popover anchor position relative to the menu trigger.\n Default `top-left`: panel above the trigger, left edges aligned (extends to the right)." }, "className": { "name": "className", "type": "string", "required": false } } }, "drilldownPanel": { "props": { "expanded": { "name": "expanded", "type": "boolean", "required": true, "description": "When true, shows breadcrumb header and full-width rows.\n When false, shows icon-only actions with tooltips." }, "parentItem": { "name": "parentItem", "type": "SidebarDrilldownParentItem", "required": true }, "breadcrumbRootLabel": { "name": "breadcrumbRootLabel", "type": "string", "required": true, "description": "First breadcrumb segment (e.g. product area)." }, "isSubmenuActive": { "name": "isSubmenuActive", "type": "(item: SidebarDrilldownSubmenuItem) => boolean", "required": false, "description": "Returns whether a submenu row should render as active/selected." }, "showBreadcrumbRoot": { "name": "showBreadcrumbRoot", "type": "boolean", "required": false, "description": "When false, hides the root breadcrumb label and chevron before the parent title." }, "onActivateSubmenu": { "name": "onActivateSubmenu", "type": "(item: SidebarDrilldownSubmenuItem) => void", "required": false, "description": "Invoked after optional `onClick` on the row; host handles `href` / routing." }, "onBack": { "name": "onBack", "type": "() => void", "required": true, "description": "Navigates back to the parent menu level." }, "backButtonTooltip": { "name": "backButtonTooltip", "type": "string", "required": false, "description": "Accessible label for the collapsed back control tooltip." }, "className": { "name": "className", "type": "string", "required": false } } } }, "deprecatedRoot": [], "flat": { "logo": { "name": "logo", "type": "ReactNode | string", "required": false, "description": "Logo del sistema (URL o componente)" }, "onLogoClick": { "name": "onLogoClick", "type": "() => void", "required": false, "description": "Handler de click en logo" }, "headerTrailing": { "name": "headerTrailing", "type": "ReactNode", "required": false, "description": "Trailing header slot (e.g. notifications icon + badge). Hidden when collapsed if you omit it." }, "workspace": { "name": "workspace", "type": "SidebarWorkspaceConfig", "required": false, "description": "Workspace card (`SidebarWorkspaceCard`). Use `workspaceSheet` on the object for slide-over profile mode." }, "menuGroups": { "name": "menuGroups", "type": "SidebarMenuGroupProps[]", "required": false, "description": "Grupos de menú" }, "userProfile": { "name": "userProfile", "type": "SidebarUserProfileProps", "required": false, "description": "Perfil del usuario" }, "footer": { "name": "footer", "type": "ReactNode", "required": false, "description": "Pie del rail (e.g. legales + versión)." }, "collapsed": { "name": "collapsed", "type": "boolean", "required": false, "description": "Estado colapsado" }, "onToggleCollapse": { "name": "onToggleCollapse", "type": "() => void", "required": false, "description": "Handler para toggle de collapse" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" }, "width": { "name": "width", "type": "number", "required": false, "description": "Expanded width in px (Figma: 240)." }, "collapsedWidth": { "name": "collapsedWidth", "type": "number", "required": false, "description": "Collapsed width in px (Figma: 56)." }, "drilldown": { "name": "drilldown", "type": "SidebarDrilldownConfig", "required": false, "description": "Second-level navigation: when `active`, renders `SidebarDrilldownPanel` instead of `menuGroups`.\n Logo, workspace (if not collapsed) and user profile behavior are unchanged." } } } }, { "name": "SidebarMenuItem", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.", "jsdoc": "============================================\nSIDEBAR MENU ITEM - ATOM\n============================================\nComponente atómico para items individuales del menú lateral.\nReutiliza el componente ListItemDefault del paquete UI.\nSoporta iconos, badges, estados activo/deshabilitado y submenús.", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "id": { "name": "id", "type": "string", "required": true, "description": "Identificador único del item" }, "label": { "name": "label", "type": "string", "required": true, "description": "Texto a mostrar" }, "icon": { "name": "icon", "type": "SidebarIcon", "required": false, "description": "Icono del item (FontAwesome)" }, "badge": { "name": "badge", "type": "SidebarBadge", "required": false, "description": "Badge opcional" }, "active": { "name": "active", "type": "boolean", "required": false, "description": "Indica si el item está activo/seleccionado" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Indica si el item está deshabilitado" }, "hasSubmenu": { "name": "hasSubmenu", "type": "boolean", "required": false, "description": "Indica si el item tiene submenú" }, "onClick": { "name": "onClick", "type": "(id: string) => void", "required": false, "description": "Handler de click" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" }, "href": { "name": "href", "type": "string", "required": false, "description": "Ruta de navegación (opcional)" } } } }, { "name": "SidebarDivider", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.", "jsdoc": "============================================\nSIDEBAR DIVIDER - ATOM\n============================================\nSeparador para el sidebar. Puede ser una línea simple\no incluir un texto descriptivo.", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" }, "withText": { "name": "withText", "type": "boolean", "required": false, "description": "Muestra divider con texto" }, "text": { "name": "text", "type": "string", "required": false, "description": "Texto del divider" } } } }, { "name": "SidebarSectionTitle", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.", "jsdoc": "============================================\nSIDEBAR SECTION TITLE - ATOM\n============================================\nSection label for the sidebar; groups menu blocks.\nBody XS Regular, tertiary, sentence case (no uppercase transform).", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "title": { "name": "title", "type": "string", "required": true, "description": "Texto del título" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" } } } }, { "name": "SidebarMenuGroup", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.", "jsdoc": "Groups menu rows under an optional section title (Figma section headers).\nWith `collapsible`, the header toggles the item list (chevron up/down).\nWhen `collapsed`, titled groups render a plain divider (unless skipped) and items only.", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "title": { "name": "title", "type": "string", "required": false, "description": "Título de la sección (opcional)" }, "items": { "name": "items", "type": "SidebarMenuItemProps[]", "required": true, "description": "Items del menú" }, "collapsible": { "name": "collapsible", "type": "boolean", "required": false, "description": "When true with `title`, section header toggles visibility (Figma collapsible blocks).\n When false, title uses a static divider row." }, "defaultExpanded": { "name": "defaultExpanded", "type": "boolean", "required": false, "description": "Initial open state when `collapsible` is true." }, "collapsed": { "name": "collapsed", "type": "boolean", "required": false, "description": "When true (narrow rail), section titles and collapsible headers are hidden; titled groups\n show a plain divider line only, then items." }, "skipLeadingPlainDivider": { "name": "skipLeadingPlainDivider", "type": "boolean", "required": false, "description": "When the group has a `title`, omit the leading plain `SidebarDivider` when it would\n duplicate the rail divider below the header: collapsed rail (before items), or expanded\n collapsible section (before the chevron header)." }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" } } } }, { "name": "SidebarUserProfile", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.", "jsdoc": "Sidebar user rail (avatar, name, subtitle) with an optional account menu in a border popover\nwithout arrow (`popoverArrow={false}`), aligned with Sidebar-Menu Figma `290:52422`.", "confidence": "high" }, "examples": [], "props": { "groups": { "summary": { "props": { "name": { "name": "name", "type": "string", "required": true, "description": "Display name (rail primary line + popover header)." }, "subtitle": { "name": "subtitle", "type": "string", "required": false, "description": "Secondary line on the rail (e.g. role)." }, "email": { "name": "email", "type": "string", "required": false, "description": "Secondary line in the popover header (e.g. email).\n Falls back to `subtitle` when omitted." }, "avatarProps": { "name": "avatarProps", "type": "Omit & { type?: AvatarProps['type']", "required": false }, "src": { "name": "src", "type": "string }", "required": false }, "presence": { "name": "presence", "type": "{", "required": false, "description": "Optional presence chip in the popover header (e.g. “En linea”)." }, "label": { "name": "label", "type": "string", "required": true } } }, "menu": { "props": { "onSettings": { "name": "onSettings", "type": "() => void", "required": false }, "settingsLabel": { "name": "settingsLabel", "type": "string", "required": false }, "darkMode": { "name": "darkMode", "type": "{", "required": false }, "checked": { "name": "checked", "type": "boolean", "required": true }, "onChange": { "name": "onChange", "type": "(checked: boolean) => void", "required": true }, "label": { "name": "label", "type": "string", "required": false }, "onLogout": { "name": "onLogout", "type": "() => void", "required": false }, "logoutLabel": { "name": "logoutLabel", "type": "string", "required": false } } } }, "deprecatedRoot": [], "flat": { "summary": { "name": "summary", "type": "SidebarUserProfileSummaryProps", "required": true }, "menu": { "name": "menu", "type": "SidebarUserProfileMenuProps", "required": false }, "menuPosition": { "name": "menuPosition", "type": "| 'top'", "required": false, "description": "Popover anchor position relative to the menu trigger.\n Default `top-left`: panel above the trigger, left edges aligned (extends to the right)." }, "className": { "name": "className", "type": "string", "required": false } } } }, { "name": "SidebarWorkspaceCard", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.", "jsdoc": "“Mesa de trabajo” surface for the sidebar rail (Figma Sidebar-Menu `_Storage Usage Widget`):\ngradient fill, dashed border, section label, icon + primary line + badge, divider, text CTAs.\nIcon + headline sit on one marquee track (vertically centered vs. badge); hover scrolls icon + title together (see `ui-sidebar-workspace-marquee-*` in shared styles).", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "icon": { "name": "icon", "type": "SidebarIcon", "required": false, "description": "Leading icon (Figma: pen-to-square on brand)." }, "sectionLabel": { "name": "sectionLabel", "type": "string", "required": false, "description": "Small label above the campaign row (Figma Sidebar-Menu “Mesa de trabajo”, Body XS / tertiary)." }, "title": { "name": "title", "type": "string", "required": false, "description": "Primary campaign/project line (Body LG / brand). If `projectId` is set, it wins for display." }, "badge": { "name": "badge", "type": "SidebarBadge", "required": false, "description": "Badge with counter (Figma: brand pill on the right)." }, "projectId": { "name": "projectId", "type": "string", "required": false, "description": "Preferred source for the primary line when both `title` and `projectId` are used." }, "showActions": { "name": "showActions", "type": "boolean", "required": false, "description": "When false, hides the footer text actions even if `onOpen` / `onClose` are set." }, "onClose": { "name": "onClose", "type": "() => void", "required": false, "description": "Left CTA (Figma: “Cerrar”, danger text)." }, "onOpen": { "name": "onOpen", "type": "() => void", "required": false, "description": "Right CTA (Figma: “Ver pauta”)." }, "closeLabel": { "name": "closeLabel", "type": "string", "required": false, "description": "Copy for the close action." }, "primaryActionLabel": { "name": "primaryActionLabel", "type": "string", "required": false, "description": "Copy for the primary action (e.g. open schedule)." }, "cardBorderStyle": { "name": "cardBorderStyle", "type": "'solid' | 'dashed'", "required": false, "description": "Border style for the card surface (Figma “Mesa de trabajo” uses dashed)." }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" } } } }, { "name": "SidebarDrilldownPanel", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Sidebar sigue el marco Sidebar-Menu (Figma): 240px / 56px, padding 12px, cabecera con slot, lista scroll, tarjeta workspace (borde dashed), perfil y pie. Incluye secciones colapsables, drilldown y avatar compacto al colapsar.", "jsdoc": "Second-level sidebar region: back control, optional breadcrumb, and submenu rows.\nPresentation-only: routing and `href` handling belong to the host via `onActivateSubmenu`.", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "expanded": { "name": "expanded", "type": "boolean", "required": true, "description": "When true, shows breadcrumb header and full-width rows.\n When false, shows icon-only actions with tooltips." }, "parentItem": { "name": "parentItem", "type": "SidebarDrilldownParentItem", "required": true }, "breadcrumbRootLabel": { "name": "breadcrumbRootLabel", "type": "string", "required": true, "description": "First breadcrumb segment (e.g. product area)." }, "isSubmenuActive": { "name": "isSubmenuActive", "type": "(item: SidebarDrilldownSubmenuItem) => boolean", "required": false, "description": "Returns whether a submenu row should render as active/selected." }, "showBreadcrumbRoot": { "name": "showBreadcrumbRoot", "type": "boolean", "required": false, "description": "When false, hides the root breadcrumb label and chevron before the parent title." }, "onActivateSubmenu": { "name": "onActivateSubmenu", "type": "(item: SidebarDrilldownSubmenuItem) => void", "required": false, "description": "Invoked after optional `onClick` on the row; host handles `href` / routing." }, "onBack": { "name": "onBack", "type": "() => void", "required": true, "description": "Navigates back to the parent menu level." }, "backButtonTooltip": { "name": "backButtonTooltip", "type": "string", "required": false, "description": "Accessible label for the collapsed back control tooltip." }, "className": { "name": "className", "type": "string", "required": false } } } } ] }, { "id": "Skeleton", "path": "src/modules/Skeleton", "legacy": false, "compositionType": 1, "exports": [ { "name": "Skeleton", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Skeleton - Componente de placeholder de carga\nComponente que muestra un placeholder animado mientras se carga el contenido.\nÚtil para mejorar la experiencia de usuario durante la carga de datos.", "confidence": "medium" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "width": { "name": "width", "type": "string | number", "required": false }, "height": { "name": "height", "type": "string | number", "required": false }, "circle": { "name": "circle", "type": "boolean", "required": false }, "className": { "name": "className", "type": "string", "required": false } } } } ] }, { "id": "Spinner", "path": "src/modules/Spinner", "legacy": false, "compositionType": 1, "exports": [ { "name": "Spinner", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Spinner permite mostrar un spinner de carga.", "jsdoc": "Spinner - Componente de spinner de carga animado\nComponente que muestra una animación de carga usando Lottie.\nÚtil para indicar que una operación está en progreso.", "confidence": "high" }, "examples": [ "import { Spinner } from '@imj_media/ui';\n\n export default function Example() {\n return \n }", "import { Spinner } from '@imj_media/ui';\n\n export default function Example() {\n return \n }" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "size": { "name": "size", "type": "number", "required": false }, "loop": { "name": "loop", "type": "boolean", "required": false }, "style": { "name": "style", "type": "React.CSSProperties", "required": false }, "className": { "name": "className", "type": "string", "required": false } } } } ], "standaloneSnippet": "import React from 'react';\n\nconst sizeMap: Record = {\n sm: 16,\n md: 24,\n lg: 40,\n};\n\nconst colorMap: Record = {\n primary: 'rgb(54, 89, 194)',\n secondary: 'rgb(240, 69, 69)',\n tertiary: 'rgb(33, 196, 94)',\n destructive: 'rgb(235, 179, 8)',\n};\n\ninterface SpinnerProps {\n size?: 'sm' | 'md' | 'lg';\n color?: 'primary' | 'secondary' | 'tertiary' | 'destructive';\n}\n\nexport function Spinner({ size = 'md', color = 'primary' }: SpinnerProps) {\n const px = sizeMap[size];\n const borderWidth = Math.max(2, Math.round(px / 8));\n const c = colorMap[color];\n\n return (\n <>\n \n \n \n );\n}\n" }, { "id": "Stepper", "path": "src/modules/Stepper", "legacy": false, "compositionType": 1, "exports": [ { "name": "Stepper", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Variantes del Stepper usando tokens semánticos\n/\nconst stepperVariants = cva('', {\n variants: {\n color: {\n blue: '',\n red: '',\n green: '',\n orange: '',\n yellow: '',\n 'blue-dark': '',\n 'blue-light': '',\n neutral: '',\n white: '',\n black: '',\n transparent: '',\n },\n size: {\n xs: '',\n sm: '',\n md: '',\n lg: '',\n },\n },\n defaultVariants: {\n color: 'blue',\n size: 'md',\n },\n});\n\n/**\nStepper - Componente de pasos/progreso de pasos\nComponente que muestra un conjunto de pasos con indicadores de estado (completado, activo, pendiente).\nSoporta orientación horizontal y vertical, múltiples colores y tamaños.", "confidence": "medium" }, "examples": [ "import { Stepper } from \"@imj_me/ui\";\n import { useState } from \"react\";\n\n const [currentStep, setCurrentStep] = useState(0);\n\n function Example() {\n return (\n \n );\n }", "import { Stepper } from \"@imj_me/ui\";\n\n const steps = [{}, {}, {}, {}];\n\n ", "// El conector horizontal escala con el ancho de cada celda (flex-1 + min-width del paso).\n // Envuelve el Stepper en un contenedor con ancho conocido o responsive.\n\n
\n \n
", "", "" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "steps": { "name": "steps", "type": "StepperStep[]", "required": true }, "className": { "name": "className", "type": "string", "required": false }, "classNameStep": { "name": "classNameStep", "type": "string", "required": false }, "classNameStepLabel": { "name": "classNameStepLabel", "type": "string", "required": false }, "classNameStepIcon": { "name": "classNameStepIcon", "type": "string", "required": false }, "classNameStepNumber": { "name": "classNameStepNumber", "type": "string", "required": false }, "currentStep": { "name": "currentStep", "type": "number", "required": false }, "color": { "name": "color", "type": "Colors", "required": false }, "size": { "name": "size", "type": "SmallSize", "required": false }, "onClickStep": { "name": "onClickStep", "type": "(step: number) => void", "required": false }, "onStepChange": { "name": "onStepChange", "type": "(step: number) => void", "required": false }, "withScroll": { "name": "withScroll", "type": "boolean", "required": false }, "vertical": { "name": "vertical", "type": "boolean", "required": false }, "stepClickable": { "name": "stepClickable", "type": "boolean", "required": false }, "white": { "name": "white", "type": "boolean", "required": false, "description": "Si es true, título y descripción usan color blanco (p. ej. sobre fondo oscuro). Los números de paso pendiente conservan el color del tema." } } } } ] }, { "id": "StoryBox", "path": "src/modules/StoryBox", "legacy": false, "compositionType": 1, "exports": [ { "name": "StoryBox", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Tema Orbit efectivo para hijos (`auto` en código): forzado por `StoryBox` o el `data-theme` de `documentElement`. */\ntype StoryBoxOrbitAppearance = 'light' | 'dark';\n\nconst StoryBoxForcedAppearanceContext = createContext(null);\n\nfunction getDocumentThemeSnapshot(): StoryBoxOrbitAppearance {\n if (typeof document === 'undefined') return 'light';\n return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';\n}\n\nfunction subscribeDocumentTheme(onStoreChange: () => void): () => void {\n if (typeof document === 'undefined') return () => {};\n const el = document.documentElement;\n const mo = new MutationObserver(onStoreChange);\n mo.observe(el, { attributes: true, attributeFilter: ['data-theme'] });\n return () => mo.disconnect();\n}", "confidence": "medium" }, "examples": [ "import { StoryBox, Button } from '@imj_media/ui';\n\nexport function Ejemplo() {\n return (\n \n Título\n \n \n \n \n );\n}", "import { StoryBox } from '@/modules/StoryBox';\n import { Button } from '@/modules/Button';\n\n export default function Example() {\n return (\n \n StoryBox Básico\n StoryBox simple con configuración por defecto\n \n \n \n \n \n \n \n )\n }", "import { StoryBox, Button } from '@imj_media/ui';\n\nexport function Ejemplo() {\n return (\n \n Título\n \n \n \n \n );\n}", "import { StoryBox } from '@/modules/StoryBox';\n import { Button } from '@/modules/Button';\n\n export default function Example() {\n return (\n \n StoryBox Básico\n StoryBox simple con configuración por defecto\n \n \n \n \n \n \n \n )\n }" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "children": { "name": "children", "type": "React.ReactNode", "required": true }, "className": { "name": "className", "type": "string", "required": false }, "fullHeight": { "name": "fullHeight", "type": "boolean", "required": false }, "appearance": { "name": "appearance", "type": "'inherit' | StoryBoxOrbitAppearance", "required": false, "description": "Alinea tokens Orbit (`ui-text-`, `ui-bg-`) y el modo `auto` de `StoryBox.Code` con claro u oscuro.\n - `inherit`: no fija `data-theme` en el contenedor (sigue el ancestro, p. ej. `` en Storybook).\n - `light` | `dark`: aplica `data-theme` en la raíz del StoryBox (útil en canvas o docs sin cambiar el tema global)." } } } } ] }, { "id": "Switch", "path": "src/modules/Switch", "legacy": false, "compositionType": 1, "exports": [ { "name": "Switch", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Tipografía del label en control `md`: tamaño/interlineado/tracking Regular + peso Bold (spec Type/Body/SM). */\nconst SWITCH_MD_LABEL_TYPOGRAPHY =\n 'ui-text-body-sm-regular ui-font-body-sm-bold ui-leading-body-sm-regular ui-tracking-body-sm';\n\nfunction optionSlotToButtonSlotConfig(\n icon: SwitchOption['leftSlot'],\n colorIcon: IconFontColor | undefined,\n duotone: Pick<\n ButtonSlotConfig,\n | 'iconDuotonePrimary'\n | 'iconDuotoneSecondary'\n | 'iconDuotoneOpacityPrimary'\n | 'iconDuotoneOpacitySecondary'\n >,\n defaultIconFontSize: IconFontSize,\n optionIconFontSize?: IconFontSize\n): ButtonSlotConfig | undefined {\n if (icon === null || icon === undefined) {\n return undefined;\n }\n return {\n icon,\n ...(colorIcon !== undefined ? { colorIcon } : {}),\n ...duotone,", "confidence": "medium" }, "examples": [ "import { Switch, SwitchOption } from '@/modules/Switch';\n\n const options: SwitchOption[] = [\n { label: \"Acordeón 1\", value: \"accordion-1\", leftSlot: faSlash, rightSlot: faFolder },\n { label: \"Acordeón 2\", value: \"accordion-2\", leftSlot: faSlash, rightSlot: faCalendar },\n { label: \"Acordeón 3\", value: \"accordion-3\", leftSlot: faSlash, rightSlot: faCarrot },\n ]\n \n export default function Example() {\n return {\n console.log(value);\n }} />\n }", "import { Switch, SwitchOption } from '@/modules/Switch';\n\n const options: SwitchOption[] = [\n { label: \"Disponible A\", value: \"a\", leftSlot: faList, rightSlot: faSquare },\n { label: \"No disponible\", value: \"b\", leftSlot: faClock, rightSlot: faXmark, disabled: true },\n { label: \"Disponible C\", value: \"c\", leftSlot: faCheck, rightSlot: faEdit },\n ];\n\n export default function Example() {\n return (\n console.log(value)}\n />\n );\n }", "import { Switch, SwitchOption } from '@/modules/Switch';\n\n const options: SwitchOption[] = [\n { label: \"Acordeón 1\", value: \"accordion-1\", leftSlot: faSlash, rightSlot: faFolder },\n { label: \"Acordeón 2\", value: \"accordion-2\", leftSlot: faSlash, rightSlot: faCalendar },\n { label: \"Acordeón 3\", value: \"accordion-3\", leftSlot: faSlash, rightSlot: faCarrot }\n ]\n \n export default function Example() {\n return
\n {\n console.log(value);\n }} />\n {\n console.log(value);\n }} />\n {\n console.log(value);\n }} />\n
\n }", "import { Switch, SwitchOption } from '@/modules/Switch';\n\n const options: SwitchOption[] = [\n { label: \"Vista Lista\", value: \"list\", leftSlot: faList },\n { label: \"Vista Grid\", value: \"grid\", leftSlot: faSquare },\n { label: \"Vista Calendario\", value: \"calendar\", leftSlot: faCalendar }\n ]\n \n export default function Example() {\n return {\n console.log(value);\n }} />\n }", "import { Switch, SwitchOption } from '@/modules/Switch';\n\n const options: SwitchOption[] = [\n { label: \"Activo\", value: \"active\", rightSlot: faCheck },\n { label: \"Inactivo\", value: \"inactive\", rightSlot: faXmark },\n { label: \"Pendiente\", value: \"pending\", rightSlot: faClock }\n ]\n \n export default function Example() {\n return {\n console.log(value);\n }} />\n }" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "fullWidth": { "name": "fullWidth", "type": "boolean", "required": false }, "colorIcon": { "name": "colorIcon", "type": "IconFontColor", "required": false, "description": "Color de iconos regular/sólidos en slots; por defecto `primary` (texto primario del sistema)." }, "size": { "name": "size", "type": "'xs' | 'sm' | 'md'", "required": false, "description": "Tamaño del control. Por defecto `sm`.\n - `md`: padding del track 8px, botones internos `xs`, etiqueta con cuerpo SM (métricas Regular + peso Bold)." }, "slotIconSize": { "name": "slotIconSize", "type": "IconFontSize", "required": false, "description": "Tamaño de fuente de los iconos en slots cuando no se define por opción (`leftSlotIconSize` / `rightSlotIconSize`).\n Si se omite: con `size=\"sm\"` el default es `xs`; con `size=\"xs\"`, `xs`; con `size=\"md\"`, `sm`." }, "options": { "name": "options", "type": "SwitchOption[]", "required": true }, "defaultValue": { "name": "defaultValue", "type": "string", "required": false }, "onChange": { "name": "onChange", "type": "(value: string) => void", "required": false } } } } ] }, { "id": "Table", "path": "src/modules/Table", "legacy": false, "compositionType": 1, "exports": [ { "name": "Table", "kind": "component", "description": { "primary": "storybook", "storybook": "Prop", "readme": "# Table Component\n\nComponente de tabla completo y altamente configurable con soporte para múltiples funcionalidades empresariales.\n\n## 📚 Documentación\n\n- **[Ver Ejemplo de Uso Completo](./EJEMPLO_USO.md)** - Guía detallada con todos los casos de uso\n- **[Celda `imagePreview`](./IMAGE_PREVIEW_CELL.md)** - Columna con miniatura y popup al hover\n- **[Personalización `imagePreview`](./IMAGE_PREVIEW_CUSTOMIZATION.md)** - Qué se puede ajustar y qué es fijo (aspecto, padding, bordes)\n- **[Ver Stories en Storybook](./stories/Table.stories.tsx)** - Ejemplos interactivos\n\n## ✨ Características\n\n- ✅ **Tipos de celdas múltiples**: Default, Primary, Status, Actions, Link, Avatars, TextField, Dropdown, Button, Progress Bar, Skeleton, Tags, Checkbox, Icon, Stars\n- ✅ **Ordenamiento**: Sorting por columnas con indicadores visuales\n- ✅ **Filtrado**: Múltiples filtros por columna\n- ✅ **Búsqueda global**: Búsqueda en tiempo real en todas las columnas\n- ✅ **Selección**: Selección simple o múltiple de filas con callbacks\n- ✅ **Paginación**: Paginación completa con tamaños configurables\n- ✅ **Toolbar**: Barra de herramientas con búsqueda, filtros, exportación y configuración de columnas\n- ✅ **Estados de carga**: Skeleton loading states\n- ✅ **Estados vacíos**: Personalización de vistas vacías y sin resultados\n- ✅ **Filas expandibles**: Parent/child rows con animaciones\n- ✅ **Columnas bloqueables**: Sticky columns\n- ✅ **Columnas redimensionables**: Resize columns por arrastre o doble click para auto-ajustar\n- ✅ **Responsive**: Diseño adaptable\n- ✅ **Accesibilidad**: Soporte completo ARIA y navegación por teclado\n- ✅ **TypeScript**: Totalmente tipado\n\n## Estructura del Módulo\n\n```\nTable/\n├── components/\n│ ├── atoms/ # Componentes atómicos (celdas)\n│ ├── molecules/ # HeaderCell, TableRow, CellRenderer\n│ └── organisms/ # TableToolbar, TableHeader, TableBody, TableContent\n├── hooks/\n│ ├── useTableSort.ts\n│ ├── useTableFilter.ts\n│ ├── useTableSelection.", "confidence": "high" }, "examples": [ "", "", "import { SelectionCheckbox } from '@/modules/Table/components/molecules/SelectionCheckbox';\nimport { useState } from 'react';\n\nexport default function Example() {\n const [checked, setChecked] = useState(false);\n \n return (\n <>\n \n {}}\n />\n {}}\n />\n \n );\n}", "import { SelectionCheckbox } from '@/modules/Table/components/molecules/SelectionCheckbox';\nimport { useState } from 'react';\n\nexport default function Example() {\n const [checked, setChecked] = useState(false);\n \n return (\n <>\n \n {}}\n round={true}\n />\n {}}\n round={true}\n />\n \n );\n}", "import { SelectionCheckbox } from '@/modules/Table/components/molecules/SelectionCheckbox';\nimport { useState } from 'react';\n\nexport default function Example() {\n const [checked1, setChecked1] = useState(false);\n const [checked2, setChecked2] = useState(false);\n \n return (\n <>\n {/* Cuadrado (por defecto) */}\n \n \n {/* Redondo */}\n \n \n );\n}", "import { SelectionCheckbox } from '@/modules/Table/components/molecules/SelectionCheckbox';\n\nexport default function Example() {\n return (\n <>\n {/* Cuadrado - No marcado */}\n {}}\n round={false}\n />\n \n {/* Cuadrado - Marcado */}\n {}}\n round={false}\n />\n \n {/* Redondo - No marcado */}\n {}}\n round={true}\n />\n \n {/* Redondo - Marcado */}\n {}}\n round={true}\n />\n \n );\n}", "import { SelectionCheckbox } from '@/modules/Table/components/molecules/SelectionCheckbox';\nimport { useState } from 'react';\n\nexport default function Example() {\n const [checked, setChecked] = useState(false);\n \n return (\n <>\n \n {}}\n />\n {}}\n />\n \n );\n}", "const columnasConAcciones = [\n {\n id: 'actions',\n header: 'Acciones',\n type: 'actions',\n render: (_: unknown, row: User): TableActionConfig[] => [\n {\n icon: faPen,\n tooltip: 'Editar',\n onClick: (r: User) => console.log('Editar', r),\n },\n {\n icon: faTrash,\n tooltip: 'Eliminar',\n onClick: (r: User) => console.log('Eliminar', r),\n },\n {\n icon: faEye,\n tooltip: 'Ver',\n onClick: (r: User) => console.log('Ver', r),\n },\n ],\n },\n]\n\n", "import { Table } from '@imj_media/ui';\nimport { ColumnConfig } from '@/shared/types/table';\n\ninterface AlignmentData {\n id: number;\n name: string;\n amount: number;\n status: string;\n progress: number;\n date: Date;\n tags: string[];\n}\n\nconst columns: ColumnConfig[] = [\n {\n id: 'id',\n header: 'ID',\n accessor: 'id',\n contentAlign: 'left', // Por defecto\n },\n {\n id: 'name',\n header: 'Nombre',\n accessor: 'name',\n contentAlign: 'left', // Texto alineado a la izquierda\n },\n {\n id: 'amount',\n header: 'Monto',\n accessor: 'amount',\n contentAlign: 'right', // Números alineados a la derecha\n render: (value: number) => \\", "", "", "", "const columns: ColumnConfig[] = [\n { id: 'nombre', header: 'Nombre', accessor: 'nombre', sortable: true },\n // …sin repetir lockable en cada una\n];\n\n", "", "const columns: ColumnConfig[] = [\n { id: 'nombre', header: 'Nombre', accessor: 'nombre', sortable: true },\n // …sin repetir lockable en cada una\n];\n\n", "", "import { Table } from '@/modules/Table';\n\n// Persistir columnas, orden, filtros y búsqueda en la misma key de localStorage\n\n columns={columnas}\n rows={filas}\n configKey=\"mi-tabla\"\n persistConfig={true}\n queryPersist={true}\n toolbar={{\n showSearch: true,\n searchPlaceholder: 'Buscar...',\n internalSearch: true,\n showFilters: true,\n internalFilters: true,\n showColumnConfig: true,\n }}\n onConfigChange={(config, changeType) => console.log(changeType, config)}\n striped\n hoverable\n resizable\n/>\n\n// queryPersist={false} → no se guardan ni restauran búsqueda ni filtros (solo columnas/orden)", "import { Table } from '@/modules/Table';\n\n// Persistir columnas, orden, filtros y búsqueda en la misma key de localStorage\n\n columns={columnas}\n rows={filas}\n configKey=\"mi-tabla\"\n persistConfig={true}\n queryPersist={true}\n toolbar={{\n showSearch: true,\n searchPlaceholder: 'Buscar...',\n internalSearch: true,\n showFilters: true,\n internalFilters: true,\n showColumnConfig: true,\n }}\n onConfigChange={(config, changeType) => console.log(changeType, config)}\n striped\n hoverable\n resizable\n/>\n\n// queryPersist={false} → no se guardan ni restauran búsqueda ni filtros (solo columnas/orden)", " { ... } }],\n }}\n pagination={{\n enabled: true,\n currentPage: page,\n pageSize,\n total: totalRowCount,\n onPageChange: setPage,\n onPageSizeChange: setPageSize,\n }}\n/>", " { ... } }],\n }}\n pagination={{\n enabled: true,\n currentPage: page,\n pageSize,\n total: totalRowCount,\n onPageChange: setPage,\n onPageSizeChange: setPageSize,\n }}\n/>" ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "columns": { "name": "columns", "type": "ColumnConfig[]", "required": true }, "rows": { "name": "rows", "type": "RowConfig[]", "required": true }, "loading": { "name": "loading", "type": "boolean", "required": false }, "empty": { "name": "empty", "type": "EmptyState", "required": false }, "selection": { "name": "selection", "type": "SelectionConfig", "required": false }, "excludedRows": { "name": "excludedRows", "type": "ExcludedRowsConfig", "required": false, "description": "Excluye filas de la selección por valor de un campo (ej. estado `archived`).\n Solo aplica si `selection.enabled` es true." }, "pagination": { "name": "pagination", "type": "PaginationConfig", "required": false }, "toolbar": { "name": "toolbar", "type": "TableToolbarConfig", "required": false }, "sort": { "name": "sort", "type": "SortConfig", "required": false }, "filters": { "name": "filters", "type": "FilterConfig[]", "required": false }, "expandable": { "name": "expandable", "type": "boolean", "required": false }, "resizable": { "name": "resizable", "type": "boolean", "required": false }, "columnsLockable": { "name": "columnsLockable", "type": "boolean", "required": false, "description": "Permite fijar/bloquear columnas desde la cabecera por defecto.\n Si es `false`, ninguna columna es bloqueable salvo que definas `lockable: true` en esa `ColumnConfig`.\n Si se omite, el comportamiento es el mismo que `true`." }, "striped": { "name": "striped", "type": "boolean", "required": false }, "bordered": { "name": "bordered", "type": "boolean", "required": false }, "borderable": { "name": "borderable", "type": "boolean", "required": false, "description": "Muestra el borde exterior del contenedor de la tabla (borde, sombra y border-radius)." }, "hoverable": { "name": "hoverable", "type": "boolean", "required": false }, "dense": { "name": "dense", "type": "boolean", "required": false }, "stickyHeader": { "name": "stickyHeader", "type": "boolean", "required": false }, "defecto": { "name": "defecto", "type": "true si hay columnas editables)", "required": true }, "stickyCheckbox": { "name": "stickyCheckbox", "type": "boolean", "required": false }, "stickyActions": { "name": "stickyActions", "type": "boolean", "required": false }, "showEditActions": { "name": "showEditActions", "type": "boolean", "required": false }, "configKey": { "name": "configKey", "type": "string", "required": false, "description": "Clave única para guardar la configuración de la tabla en localStorage.\n Si se proporciona, la configuración se persistirá automáticamente." }, "persistConfig": { "name": "persistConfig", "type": "boolean", "required": false, "description": "Habilitar persistencia de configuración en localStorage.\n Requiere que se proporcione `configKey`." }, "queryPersist": { "name": "queryPersist", "type": "boolean", "required": false, "description": "Persistir también filtros activos y búsqueda en la misma configKey.\n Solo aplica si `persistConfig` es true. Si es false, no se guardan ni cargan filtros ni búsqueda." }, "onConfigChange": { "name": "onConfigChange", "type": "(config: TableConfigState, changeType: TableConfigChangeType) => void", "required": false, "description": "Callback cuando cambia la configuración de la tabla.\n Se llama con la configuración completa y el tipo de cambio." }, "className": { "name": "className", "type": "string", "required": false }, "onSort": { "name": "onSort", "type": "(sort: SortConfig | undefined) => void", "required": false }, "onFilter": { "name": "onFilter", "type": "(filters: FilterConfig[]) => void", "required": false }, "onColumnResize": { "name": "onColumnResize", "type": "(columnId: string, width: number) => void", "required": false }, "onColumnReorder": { "name": "onColumnReorder", "type": "(columns: ColumnConfig[]) => void", "required": false }, "onColumnVisibilityChange": { "name": "onColumnVisibilityChange", "type": "(columnId: string, visible: boolean) => void", "required": false }, "onRowClick": { "name": "onRowClick", "type": "(row: RowConfig) => void", "required": false }, "onRowExpand": { "name": "onRowExpand", "type": "(row: RowConfig) => void", "required": false }, "onHandleChange": { "name": "onHandleChange", "type": "(rowId: string | number, columnId: string, value: unknown, row?: T) => void", "required": false }, "editingRowIds": { "name": "editingRowIds", "type": "(string | number)[]", "required": false, "description": "IDs de filas que deben estar en modo edición.\n Permite controlar desde fuera qué filas están editando.\n Útil para activar múltiples filas en modo edición simultáneamente." }, "onEditingRowIdsChange": { "name": "onEditingRowIdsChange", "type": "(editingRowIds: (string | number)[]) => void", "required": false, "description": "Callback cuando cambian los IDs de filas en modo edición.\n Se llama cuando el usuario hace clic en el botón de editar/guardar de una fila.\n Permite sincronizar el estado externo con las acciones internas de la tabla." }, "onEditModeChange": { "name": "onEditModeChange", "type": "(rowId: string | number, isEditing: boolean) => void", "required": false, "description": "Callback cuando se habilita o se cierra el modo de edición de una fila.\n Se ejecuta tanto cuando se habilita como cuando se cierra el modo de edición." }, "onSuccessComplete": { "name": "onSuccessComplete", "type": "(editedRowIds: (string | number)[]) => void", "required": false, "description": "Callback cuando se cierra una o múltiples filas que fueron editadas.\n Se ejecuta un solo evento al cerrar, mostrando un array con los IDs de todas las filas editadas que se están cerrando.\n Solo se ejecuta si las filas fueron realmente editadas (se modificó alguna celda)." } } } } ] }, { "id": "Tabs", "path": "src/modules/Tabs", "legacy": false, "compositionType": 1, "exports": [ { "name": "Tabs", "kind": "component", "description": { "primary": "storybook", "storybook": "Componente de navegación con pestañas. Soporta modos controlado (", "jsdoc": "Tabs — navigation component with size and pill variants.\nRenders a tablist with selectable tabs, optional icons, optional add button,\nand accessible keyboard navigation (ArrowLeft/Right, Home, End).", "confidence": "high" }, "examples": [ "import { Tabs } from '@imj_media/ui';\nimport { useState } from 'react';\nimport { faShapes, faCode, faEye, faGear } from '@fortawesome/pro-regular-svg-icons';\n\nconst items = [\n { id: 'design', label: 'Design', icon: faShapes },\n { id: 'code', label: 'Code', icon: faCode },\n { id: 'preview', label: 'Preview', icon: faEye },\n { id: 'settings', label: 'Settings', icon: faGear },\n];\n\nexport default function EditorTabs() {\n const [active, setActive] = useState('design');\n\n return (\n addNewTab() }}\n />\n );\n}", "", "", "", "" ], "props": { "groups": { "appearance": { "props": { "size": { "name": "size", "type": "TabSize", "required": false, "description": "Size variant controlling height, padding, and font size." }, "pill": { "name": "pill", "type": "boolean", "required": false, "description": "When true, top corners of tabs are rounded (6px radius)." } } }, "selection": { "props": { "activeTab": { "name": "activeTab", "type": "string", "required": false, "description": "Active tab id (controlled mode)." }, "defaultActiveTab": { "name": "defaultActiveTab", "type": "string", "required": false, "description": "Default active tab id (uncontrolled mode). Uses first item if omitted." }, "onTabChange": { "name": "onTabChange", "type": "(tabId: string) => void", "required": false, "description": "Callback fired when the active tab changes." } } }, "addButton": { "props": { "show": { "name": "show", "type": "boolean", "required": false, "description": "Whether to show the \"+\" add button after the last tab." }, "onClick": { "name": "onClick", "type": "() => void", "required": false, "description": "Callback fired when the add button is clicked." } } } }, "deprecatedRoot": [], "flat": { "items": { "name": "items", "type": "TabItem[]", "required": true, "description": "Array of tab items to render." }, "className": { "name": "className", "type": "string", "required": false, "description": "Additional CSS classes for the root container." }, "appearance": { "name": "appearance", "type": "TabsAppearanceProps", "required": false, "description": "Appearance configuration (size and pill shape)." }, "selection": { "name": "selection", "type": "TabsSelectionProps", "required": false, "description": "Selection/state control." }, "addButton": { "name": "addButton", "type": "TabsAddButtonProps", "required": false, "description": "Add button configuration." } } } } ], "standaloneSnippet": "import React from 'react';\n\ninterface TabItem {\n id: string;\n label: string;\n content: React.ReactNode;\n}\n\ninterface TabsProps {\n items: TabItem[];\n activeTab: string;\n onChange: (id: string) => void;\n}\n\nexport function Tabs({ items, activeTab, onChange }: TabsProps) {\n const activeItem = items.find((item) => item.id === activeTab);\n\n return (\n
\n \n {items.map((item) => {\n const isActive = item.id === activeTab;\n return (\n onChange(item.id)}\n style={{\n padding: '2px 4px',\n border: 'none',\n borderBottom: isActive\n ? '2px solid rgb(54, 89, 194)'\n : '2px solid transparent',\n background: 'none',\n cursor: 'pointer',\n fontSize: '14px',\n fontWeight: isActive\n ? '600'\n : '400',\n color: isActive\n ? 'rgb(54, 89, 194)'\n : 'rgb(89, 89, 94)',\n transition: 'color 0.15s, border-color 0.15s',\n }}\n onMouseEnter={(e) => {\n if (!isActive) e.currentTarget.style.color = 'rgb(48, 51, 54)';\n }}\n onMouseLeave={(e) => {\n if (!isActive) e.currentTarget.style.color = 'rgb(89, 89, 94)';\n }}\n >\n {item.label}\n \n );\n })}\n
\n
\n {activeItem ? activeItem.content : null}\n
\n \n );\n}\n" }, { "id": "Tag", "path": "src/modules/Tag", "legacy": false, "compositionType": 1, "exports": [ { "name": "Tag", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Tag permite mostrar etiquetas, filtros o categorías con diferentes colores. Icono a la izquierda opcional vía", "jsdoc": "Tag - Componente de etiqueta/tag versátil y configurable\nComponente de tag que soporta múltiples colores, estados (selected, disabled),\navatares, iconos de cierre e información, y diferentes estilos visuales.", "confidence": "high" }, "examples": [ "import { Tag } from '@imj_media/ui';\n\n export default function Example() {\n return (\n <>\n \n \n \n \n )\n }", "\n \n \n \n \n \n ", "\n ", "import { faCircleInfo } from '@fortawesome/pro-regular-svg-icons';\n\n \n ", "import {\n faCircleInfo,\n faFilter,\n faSearch,\n } from '@fortawesome/pro-regular-svg-icons';\n\n {}}\n />\n " ], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "label": { "name": "label", "type": "string", "required": false, "description": "Texto del tag" }, "avatar": { "name": "avatar", "type": "string", "required": false, "description": "Avatar a la izquierda (URL de imagen)" }, "color": { "name": "color", "type": "TagColor", "required": false, "description": "Color del tag" }, "onClose": { "name": "onClose", "type": "(e: React.MouseEvent) => void", "required": false, "description": "Función a ejecutar cuando se hace clic en el X (si se proporciona, se muestra el X)" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clases CSS adicionales" }, "stroke": { "name": "stroke", "type": "boolean", "required": false, "description": "Si es true, el tag tiene borde" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Si es true, el tag está deshabilitado" }, "selected": { "name": "selected", "type": "boolean", "required": false, "description": "Si es true, el tag está seleccionado" }, "infoIcon": { "name": "infoIcon", "type": "TagInfoIconConfig", "required": false, "description": "Icono de información (configuración del componente `Icon`)." }, "truncateLabel": { "name": "truncateLabel", "type": "boolean", "required": false, "description": "Si true, el tag se adapta al ancho del contenedor y el label se trunca con \"...\" si no cabe" }, "truncateTooltip": { "name": "truncateTooltip", "type": "boolean", "required": false, "description": "Si true y truncateLabel es true, muestra tooltip con el texto completo al hacer hover cuando el texto está truncado. Por defecto false." } } } } ], "standaloneSnippet": "import React from 'react';\n\nconst colorMap: Record = {\n primary: { bg: 'rgb(54, 89, 194)1a', text: 'rgb(54, 89, 194)' },\n secondary: { bg: 'rgb(240, 69, 69)1a', text: 'rgb(240, 69, 69)' },\n tertiary: { bg: 'rgb(33, 196, 94)1a', text: 'rgb(33, 196, 94)' },\n destructive: { bg: 'rgb(235, 179, 8)1a', text: 'rgb(235, 179, 8)' },\n neutral: { bg: 'rgb(247, 247, 250)', text: 'rgb(89, 89, 94)' },\n};\n\nconst sizeMap: Record = {\n sm: { fontSize: '12px', padding: '2px 6px' },\n md: { fontSize: '14px', padding: '4px 2px' },\n};\n\ninterface TagProps {\n children: React.ReactNode;\n color?: 'primary' | 'secondary' | 'tertiary' | 'destructive' | 'neutral';\n size?: 'sm' | 'md';\n closable?: boolean;\n onClose?: () => void;\n}\n\nexport function Tag({\n children,\n color = 'primary',\n size = 'md',\n closable = false,\n onClose,\n}: TagProps) {\n const c = colorMap[color];\n const s = sizeMap[size];\n\n return (\n \n {children}\n {closable && (\n \n \\u00d7\n \n )}\n \n );\n}\n" }, { "id": "Text", "path": "src/modules/Text", "legacy": false, "compositionType": 1, "exports": [ { "name": "Text", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.", "jsdoc": "Text - Componente de texto versátil con múltiples variantes tipográficas\nComponente que renderiza texto con diferentes tipos tipográficos (body, title, caption, code)\ny tamaños. Soporta pesos de fuente personalizados y colores.", "confidence": "high" }, "examples": [ "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return Este es un texto básico\n }", "import { Text } from '@/modules/Text';\n\n const copy = 'Texto largo repetido o cargado desde CMS…';\n\n export default function Example() {\n return (\n
\n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n \n
\n );\n }", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Body XS Regular\n Body SM Medium\n Body MD Semibold\n Body LG Bold\n \n )\n }", "Heading H1\n Heading H2\n Heading H3", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Caption XS\n Caption MD\n \n )\n }" ], "props": { "groups": {}, "deprecatedRoot": [ { "name": "textColor", "type": "TextColor" } ], "flat": { "type": { "name": "type", "type": "T", "required": false, "description": "Tipo de texto: title, body, caption, code" }, "size": { "name": "size", "type": "TextSize", "required": false, "description": "Tamaño del texto según el tipo" }, "weight": { "name": "weight", "type": "TextWeight", "required": false, "description": "Peso de la fuente" }, "children": { "name": "children", "type": "ReactNode", "required": true, "description": "Contenido del texto" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clase CSS adicional" }, "as": { "name": "as", "type": "keyof JSX.IntrinsicElements", "required": false, "description": "Elemento HTML a renderizar (por defecto: span para body/caption/code, h1-h6 para title)" }, "color": { "name": "color", "type": "TextColor | (string & {})", "required": false, "description": "Color del texto: puede ser un color del sistema de diseño o un color CSS personalizado" }, "truncateLabel": { "name": "truncateLabel", "type": "boolean", "required": false, "description": "Si es true, el texto se trunca con ellipsis y, si `truncateTooltip` es true, muestra un tooltip\n con el contenido completo al pasar el cursor cuando el texto está efectivamente truncado." }, "truncateTooltip": { "name": "truncateTooltip", "type": "boolean", "required": false, "description": "Si es true (por defecto) y `truncateLabel` es true, muestra el tooltip al truncar.\n Si es false, solo se aplica truncado sin tooltip." }, "tooltipTitle": { "name": "tooltipTitle", "type": "ReactNode", "required": false, "description": "Texto mostrado en el tooltip cuando hace falta (p. ej. `children` no es un string o se quiere\n un texto distinto al visible)." } } } }, { "name": "Body", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.", "confidence": "medium" }, "examples": [ "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return Este es un texto básico\n }", "import { Text } from '@/modules/Text';\n\n const copy = 'Texto largo repetido o cargado desde CMS…';\n\n export default function Example() {\n return (\n
\n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n \n
\n );\n }", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Body XS Regular\n Body SM Medium\n Body MD Semibold\n Body LG Bold\n \n )\n }", "Heading H1\n Heading H2\n Heading H3", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Caption XS\n Caption MD\n \n )\n }" ], "props": { "groups": {}, "deprecatedRoot": [ { "name": "textColor", "type": "TextColor" } ], "flat": { "size": { "name": "size", "type": "BodySize | BaseSize", "required": false, "description": "Tamaño del body: xs, sm, md, lg o tamaños base" }, "weight": { "name": "weight", "type": "TextWeight", "required": false, "description": "Peso de la fuente" }, "children": { "name": "children", "type": "React.ReactNode", "required": true, "description": "Contenido del texto" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clase CSS adicional" }, "as": { "name": "as", "type": "keyof JSX.IntrinsicElements", "required": false, "description": "Elemento HTML a renderizar (por defecto: span)" }, "color": { "name": "color", "type": "TextColor | (string & {})", "required": false, "description": "Color del texto: puede ser un color del sistema de diseño o un color CSS personalizado" } } } }, { "name": "Caption", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.", "confidence": "medium" }, "examples": [ "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return Este es un texto básico\n }", "import { Text } from '@/modules/Text';\n\n const copy = 'Texto largo repetido o cargado desde CMS…';\n\n export default function Example() {\n return (\n
\n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n \n
\n );\n }", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Body XS Regular\n Body SM Medium\n Body MD Semibold\n Body LG Bold\n \n )\n }", "Heading H1\n Heading H2\n Heading H3", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Caption XS\n Caption MD\n \n )\n }" ], "props": { "groups": {}, "deprecatedRoot": [ { "name": "textColor", "type": "TextColor" } ], "flat": { "size": { "name": "size", "type": "CaptionSize | BaseSize", "required": false, "description": "Tamaño del caption: xs, md o tamaños base" }, "weight": { "name": "weight", "type": "TextWeight", "required": false, "description": "Peso de la fuente (solo aplica si se usa tamaño base)" }, "children": { "name": "children", "type": "React.ReactNode", "required": true, "description": "Contenido del texto" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clase CSS adicional" }, "as": { "name": "as", "type": "keyof JSX.IntrinsicElements", "required": false, "description": "Elemento HTML a renderizar (por defecto: span)" }, "color": { "name": "color", "type": "TextColor | (string & {})", "required": false, "description": "Color del texto: puede ser un color del sistema de diseño o un color CSS personalizado" } } } }, { "name": "TitleText", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.", "confidence": "medium" }, "examples": [ "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return Este es un texto básico\n }", "import { Text } from '@/modules/Text';\n\n const copy = 'Texto largo repetido o cargado desde CMS…';\n\n export default function Example() {\n return (\n
\n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n \n
\n );\n }", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Body XS Regular\n Body SM Medium\n Body MD Semibold\n Body LG Bold\n \n )\n }", "Heading H1\n Heading H2\n Heading H3", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Caption XS\n Caption MD\n \n )\n }" ], "props": { "groups": {}, "deprecatedRoot": [ { "name": "textColor", "type": "TextColor" } ], "flat": { "type": { "name": "type", "type": "T", "required": false, "description": "Tipo de texto: title, body, caption, code" }, "size": { "name": "size", "type": "TextSize", "required": false, "description": "Tamaño del texto según el tipo" }, "weight": { "name": "weight", "type": "TextWeight", "required": false, "description": "Peso de la fuente" }, "children": { "name": "children", "type": "ReactNode", "required": true, "description": "Contenido del texto" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clase CSS adicional" }, "as": { "name": "as", "type": "keyof JSX.IntrinsicElements", "required": false, "description": "Elemento HTML a renderizar (por defecto: span para body/caption/code, h1-h6 para title)" }, "color": { "name": "color", "type": "TextColor | (string & {})", "required": false, "description": "Color del texto: puede ser un color del sistema de diseño o un color CSS personalizado" }, "truncateLabel": { "name": "truncateLabel", "type": "boolean", "required": false, "description": "Si es true, el texto se trunca con ellipsis y, si `truncateTooltip` es true, muestra un tooltip\n con el contenido completo al pasar el cursor cuando el texto está efectivamente truncado." }, "truncateTooltip": { "name": "truncateTooltip", "type": "boolean", "required": false, "description": "Si es true (por defecto) y `truncateLabel` es true, muestra el tooltip al truncar.\n Si es false, solo se aplica truncado sin tooltip." }, "tooltipTitle": { "name": "tooltipTitle", "type": "ReactNode", "required": false, "description": "Texto mostrado en el tooltip cuando hace falta (p. ej. `children` no es un string o se quiere\n un texto distinto al visible)." } } } }, { "name": "Code", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.", "confidence": "medium" }, "examples": [ "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return Este es un texto básico\n }", "import { Text } from '@/modules/Text';\n\n const copy = 'Texto largo repetido o cargado desde CMS…';\n\n export default function Example() {\n return (\n
\n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n \n
\n );\n }", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Body XS Regular\n Body SM Medium\n Body MD Semibold\n Body LG Bold\n \n )\n }", "Heading H1\n Heading H2\n Heading H3", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Caption XS\n Caption MD\n \n )\n }" ], "props": { "groups": {}, "deprecatedRoot": [ { "name": "textColor", "type": "TextColor" } ], "flat": { "size": { "name": "size", "type": "CodeSize | BaseSize", "required": false, "description": "Tamaño del code: md o tamaños base" }, "weight": { "name": "weight", "type": "TextWeight", "required": false, "description": "Peso de la fuente (solo aplica si se usa tamaño base)" }, "children": { "name": "children", "type": "React.ReactNode", "required": true, "description": "Contenido del código" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clase CSS adicional" }, "as": { "name": "as", "type": "keyof JSX.IntrinsicElements", "required": false, "description": "Elemento HTML a renderizar (por defecto: code)" }, "color": { "name": "color", "type": "TextColor | (string & {})", "required": false, "description": "Color del texto: puede ser un color del sistema de diseño o un color CSS personalizado" } } } }, { "name": "CustomText", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente Text permite aplicar estilos tipográficos consistentes usando los tokens de Figma. Soporta tipos (title, body, caption, code), tamaños, pesos de fuente, y valores base.", "confidence": "medium" }, "examples": [ "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return Este es un texto básico\n }", "import { Text } from '@/modules/Text';\n\n const copy = 'Texto largo repetido o cargado desde CMS…';\n\n export default function Example() {\n return (\n
\n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n {copy}\n \n \n const linea = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';\n \n
\n );\n }", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Body XS Regular\n Body SM Medium\n Body MD Semibold\n Body LG Bold\n \n )\n }", "Heading H1\n Heading H2\n Heading H3", "import { Text } from '@/modules/Text';\n\n export default function Example() {\n return (\n <>\n Caption XS\n Caption MD\n \n )\n }" ], "props": { "groups": {}, "deprecatedRoot": [ { "name": "textColor", "type": "TextColor" } ], "flat": { "size": { "name": "size", "type": "BaseSize", "required": true, "description": "Tamaño base del texto: 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl" }, "weight": { "name": "weight", "type": "TextWeight", "required": false, "description": "Peso de la fuente" }, "children": { "name": "children", "type": "React.ReactNode", "required": true, "description": "Contenido del texto" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clase CSS adicional" }, "as": { "name": "as", "type": "keyof JSX.IntrinsicElements", "required": false, "description": "Elemento HTML a renderizar (por defecto: span)" }, "color": { "name": "color", "type": "TextColor | (string & {})", "required": false, "description": "Color del texto: puede ser un color del sistema de diseño o un color CSS personalizado" } } } } ] }, { "id": "TextListWithData", "path": "src/modules/TextListWithData", "legacy": false, "compositionType": 1, "exports": [ { "name": "TextListWithData", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente TextListWithData muestra un texto con un indicador circular de color y un valor asociado. Útil para mostrar etiquetas con datos numéricos o textuales.", "jsdoc": "TextListWithData - Texto con indicador de color y valor\nMuestra un texto con un indicador circular de color y un valor asociado.\nÚtil para mostrar etiquetas con datos numéricos o textuales.", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "title": { "name": "title", "type": "string", "required": true, "description": "Título o etiqueta del texto" }, "color": { "name": "color", "type": "TextListWithDataColor", "required": true, "description": "Color semántico del indicador circular" }, "data": { "name": "data", "type": "string | number", "required": true, "description": "Valor o dato a mostrar" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clase CSS adicional" }, "disabled": { "name": "disabled", "type": "boolean", "required": false, "description": "Si deshabilitar el componente" }, "indicatorSize": { "name": "indicatorSize", "type": "number", "required": false, "description": "Tamaño del indicador circular en píxeles (por defecto: 8px)" }, "showIndicator": { "name": "showIndicator", "type": "boolean", "required": false, "description": "Si mostrar el indicador circular (por defecto: true)" } } } }, { "name": "TextListIndicator", "kind": "component", "description": { "primary": "storybook", "storybook": "El componente TextListWithData muestra un texto con un indicador circular de color y un valor asociado. Útil para mostrar etiquetas con datos numéricos o textuales.", "jsdoc": "Color del indicador (valor CSS) */\n color: string;\n /** Tamaño del indicador en píxeles */\n size: number;\n /** Clase CSS adicional */\n className?: string;\n}\n\n/**\nIndicador circular de color\nÁtomo que representa un punto de color para identificar categorías", "confidence": "high" }, "examples": [], "props": { "groups": {}, "deprecatedRoot": [], "flat": { "color": { "name": "color", "type": "string", "required": true, "description": "Color del indicador (valor CSS)" }, "size": { "name": "size", "type": "number", "required": true, "description": "Tamaño del indicador en píxeles" }, "className": { "name": "className", "type": "string", "required": false, "description": "Clase CSS adicional" } } } } ] }, { "id": "Textarea", "path": "src/modules/Textarea", "legacy": false, "compositionType": 1, "exports": [ { "name": "Textarea", "kind": "component", "description": { "primary": "jsdoc", "jsdoc": "Textarea - Componente de área de texto versátil y configurable\nComponente de textarea que soporta labels, mensajes de error, slots personalizados,\ncontador de caracteres, límite de longitud y estados controlados/no controlados.", "confidence": "medium" }, "examples": [ "import { Textarea } from '@/modules/Textarea';\n\n export default function Example() {\n const [value, setValue] = useState('');\n return