@imj_media/ui 1.10.5 → 1.10.7

package/CHANGELOG.md

@@ -7,6 +7,24 @@ y este proyecto adhiere a [Semantic Versioning](https://semver.org/lang/es/).
 
 ## [Unreleased]
 
+## [1.10.7] - 2026-05-26
+
+### Added
+
+- **`Modal`:** nueva prop `scrollMode` (`'paper'` | `'scroll'`). El modo `paper` (por defecto) fija el panel a la altura del viewport y delega el scroll al `Modal.Body`; el modo `scroll` mantiene el comportamiento clásico de scroll externo en el overlay.
+- **Catálogo:** templates de uso y recetas de composición por componente en `design-index.json`.
+
+## [1.10.6] - 2026-05-25
+
+### Added
+
+- **`Tabs`:** nuevo módulo composable con componente `Tabs`, hook `useTabs`, tipos y stories.
+
+### Changed
+
+- **ESLint / Prettier:** reglas de formato (comillas, semicolons, trailing commas, indentación, espaciado) delegadas a Prettier vía `eslint-config-prettier`; ESLint ya no reporta conflictos de formato.
+- **Formato global:** Prettier aplicado en todos los módulos (trailing commas en args, indentación, orden de clases Tailwind vía `prettier-plugin-tailwindcss`).
+
 ## [1.10.5] - 2026-05-25
 
 ### Fixed

package/README.md

@@ -4,7 +4,7 @@
 
 Biblioteca de componentes UI moderna y accesible para React, construida con TypeScript y Tailwind CSS.
 
-> **Versión publicada:** `1.10.5` — actualizar este número y `CHANGELOG.md` antes de cada release (orden y scripts: regla **`imj-ui-obligations-release`**; atajo `npm run publish:patch|minor|major` o pasos `bump:*` → `release:git` → `release:publish`).
+> **Versión publicada:** `1.10.7` — actualizar este número y `CHANGELOG.md` antes de cada release (orden y scripts: regla **`imj-ui-obligations-release`**; atajo `npm run publish:patch|minor|major` o pasos `bump:*` → `release:git` → `release:publish`).
 
 ## 📦 Instalación
 

package/catalog/design-index.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@imj_media/ui",
-  "version": "1.10.5",
-  "indexedAt": "2026-05-25T20:20:35.330Z",
+  "version": "1.10.7",
+  "indexedAt": "2026-05-26T18:28:52.846Z",
   "orbitTokensVersion": "1.3.1",
   "modules": [
     {
@@ -44,7 +44,8 @@
           "Accordion.stories.tsx:Default"
         ],
         "snippet": "<Accordion\n  id=\"section-1\"\n  title=\"Sección\"\n  subtitle=\"Opcional\"\n  defaultOpen={false}\n>\n  Contenido colapsable\n</Accordion>"
-      }
+      },
+      "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<string | undefined>(defaultOpen);\n\n  const toggle = (id: string) => {\n    setOpenId((prev) => (prev === id ? undefined : id));\n  };\n\n  return (\n    <div\n      style={{\n        border: '1px solid rgb(199, 199, 204)',\n        borderRadius: '8px',\n        overflow: 'hidden',\n      }}\n    >\n      {items.map((item, index) => {\n        const isOpen = openId === item.id;\n        return (\n          <div key={item.id}>\n            {index > 0 && (\n              <div style={{ height: '1px', backgroundColor: 'rgb(199, 199, 204)' }} />\n            )}\n            <button\n              onClick={() => 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              <span>{item.title}</span>\n              <span\n                style={{\n                  transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n                  transition: 'transform 200ms',\n                  fontSize: '12px',\n                  color: 'rgb(89, 89, 94)',\n                }}\n              >\n                ▼\n              </span>\n            </button>\n            <div\n              style={{\n                display: isOpen ? 'block' : 'none',\n                padding: '12px 4px',\n                backgroundColor: 'rgb(247, 247, 250)',\n                color: 'rgb(48, 51, 54)',\n                fontSize: '14px',\n                lineHeight: '1.5',\n              }}\n            >\n              {item.content}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"
     },
     {
       "id": "Alert",
@@ -69,7 +70,8 @@
             "<Alert color=\"success\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"info\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"warning\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"danger\" variant=\"contained\" message=\"Variante contained (por defecto)\" title=\"Contained\" open={true} />\n    <Alert color=\"success\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />\n    <Alert color=\"info\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />\n    <Alert color=\"warning\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />\n    <Alert color=\"danger\" variant=\"outlined\" message=\"Variante outlined con borde\" title=\"Outlined\" open={true} />"
           ]
         }
-      ]
+      ],
+      "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    <div\n      role=\"alert\"\n      style={{\n        position: 'relative',\n        padding: '12px 4px',\n        borderLeft: `4px solid ${v.border}`,\n        backgroundColor: v.bg,\n        borderRadius: '8px',\n        color: 'rgb(48, 51, 54)',\n        fontSize: '14px',\n        lineHeight: '1.5',\n      }}\n    >\n      {closable && (\n        <button\n          onClick={handleClose}\n          aria-label=\"Close\"\n          style={{\n            position: 'absolute',\n            top: '2px',\n            right: '2px',\n            background: 'none',\n            border: 'none',\n            cursor: 'pointer',\n            fontSize: '16px',\n            color: 'rgb(89, 89, 94)',\n            padding: '4px',\n            lineHeight: '1',\n          }}\n        >\n          ×\n        </button>\n      )}\n      {title && (\n        <div style={{ fontWeight: '700', marginBottom: '4px', color: v.text }}>\n          {title}\n        </div>\n      )}\n      <div>{children}</div>\n    </div>\n  );\n}\n"
     },
     {
       "id": "AlertDialog",
@@ -113,7 +115,8 @@
           },
           "examples": []
         }
-      ]
+      ],
+      "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      <img\n        src={src}\n        alt={alt}\n        onError={() => setImgError(true)}\n        style={{\n          ...baseStyle,\n          objectFit: 'cover',\n        }}\n      />\n    );\n  }\n\n  return (\n    <div\n      style={{\n        ...baseStyle,\n        backgroundColor: 'rgb(247, 247, 250)',\n        color: 'rgb(48, 51, 54)',\n        fontSize: s.fontSize,\n        fontWeight: '500',\n        userSelect: 'none',\n      }}\n    >\n      {fallback || '?'}\n    </div>\n  );\n}\n"
     },
     {
       "id": "Badge",
@@ -139,7 +142,8 @@
             "import { Badge } from '@/modules/Badge';\n\nexport default function Example() {\n  return (\n    <>\n      <Badge appearance={{ size: 'sm', color: 'accent' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm', color: 'gray' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm', color: 'success' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm', color: 'warning' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm', color: 'danger' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm', color: 'info' }} text={{ label: '5' }} />\n      <Badge appearance={{ size: 'sm' }} text={{ label: '5' }} state={{ disabled: true }} />\n    </>\n  )\n}"
           ]
         }
-      ]
+      ],
+      "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<string, string | number> = {\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 <span style={styles}>{children}</span>;\n}\n"
     },
     {
       "id": "Badges",
@@ -213,7 +217,8 @@
             "import { Button } from '@imj_media/ui';\n\n  export default function Example() {\n    return (\n      <>\n        <Button color=\"primary\" tooltip=\"Tooltip\">Blue</Button>\n        <Button color=\"secondary\" tooltip=\"Tooltip\">Red</Button>\n        <Button color=\"tertiary\" tooltip=\"Tooltip\">Green</Button>\n        <Button color=\"destructive\" tooltip=\"Tooltip\">Orange</Button>\n      </>\n    )\n  }"
           ]
         }
-      ]
+      ],
+      "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    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled}\n      onMouseEnter={() => 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    </button>\n  );\n}\n"
     },
     {
       "id": "ButtonGroup",
@@ -396,7 +401,7 @@
           "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    <Card.Footer\n      className={cn('ui-flex ui-items-center ui-justify-end ui-gap-x-16 ui-p-16', className)}\n    >\n      {children}\n    </Card.Footer>\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 === 'Dra",
+            "jsdoc": "DrawerFooter - Subcomponente de footer para Drawer\n@internal\n/\nconst DrawerFooter = ({ children, className }: DrawerFooterProps) => {\n  return (\n    <Card.Footer\n      className={cn('ui-flex ui-items-center ui-justify-end ui-gap-x-16 ui-p-16', className)}\n    >\n      {children}\n    </Card.Footer>\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": [
@@ -821,7 +826,7 @@
           "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 colu",
+            "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": [
@@ -1128,7 +1133,8 @@
             "<Input \n    label=\"Input Deshabilitado\"\n    disabled={true}\n    value=\"Valor no editable\"\n  />"
           ]
         }
-      ]
+      ],
+      "standaloneSnippet": "import React from 'react';\n\nconst sizeMap = {\n  sm: { padding: '6px 2px', fontSize: '14px' },\n  md: { padding: '2px 12px', fontSize: '16px' },\n  lg: { padding: '12px 4px', fontSize: '18px' },\n};\n\nexport function Input({\n  value,\n  onChange,\n  placeholder,\n  disabled = false,\n  size = 'md',\n  error,\n  type = 'text',\n}: {\n  value?: string;\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  size?: keyof typeof sizeMap;\n  error?: string;\n  type?: 'text' | 'password' | 'email' | 'number';\n}) {\n  const s = sizeMap[size];\n  const [focused, setFocused] = React.useState(false);\n\n  const borderColor = error\n    ? 'rgb(240, 69, 69)'\n    : focused\n      ? 'rgb(54, 89, 194)'\n      : 'rgb(199, 199, 204)';\n\n  const input = (\n    <input\n      type={type}\n      value={value}\n      onChange={onChange}\n      placeholder={placeholder}\n      disabled={disabled}\n      onFocus={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n      style={{\n        width: '100%',\n        padding: s.padding,\n        fontSize: s.fontSize,\n        fontFamily: 'inherit',\n        lineHeight: '1.5',\n        color: 'rgb(48, 51, 54)',\n        backgroundColor: 'rgb(255, 255, 255)',\n        border: `1px solid ${borderColor}`,\n        borderRadius: '8px',\n        outline: 'none',\n        opacity: disabled ? 0.5 : 1,\n        cursor: disabled ? 'not-allowed' : 'text',\n        transition: 'border-color 150ms',\n        boxSizing: 'border-box',\n      }}\n    />\n  );\n\n  if (error) {\n    return (\n      <div>\n        {input}\n        <div\n          style={{\n            marginTop: '4px',\n            fontSize: '12px',\n            color: 'rgb(240, 69, 69)',\n          }}\n        >\n          {error}\n        </div>\n      </div>\n    );\n  }\n\n  return input;\n}\n"
     },
     {
       "id": "LegacyButton",
@@ -1436,7 +1442,8 @@
           "Modal.stories.tsx:WithTabs"
         ],
         "snippet": "<Modal isOpen={open} onClose={() => setOpen(false)} title=\"Título\">\n  <Modal.Body>Contenido</Modal.Body>\n  <Modal.Footer>\n    <Button onClick={() => setOpen(false)}>Cerrar</Button>\n  </Modal.Footer>\n</Modal>"
-      }
+      },
+      "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<HTMLDivElement>) => {\n    if (e.target === e.currentTarget) onClose();\n  };\n\n  return (\n    <div\n      onClick={handleOverlayClick}\n      style={{\n        position: 'fixed',\n        inset: 0,\n        backgroundColor: 'rgba(0, 0, 0, 0.5)',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        zIndex: 1000,\n      }}\n    >\n      <div\n        style={{\n          backgroundColor: 'rgb(255, 255, 255)',\n          borderRadius: '10px',\n          boxShadow: '0 16px 24px -8px rgba(0, 0, 0, 0.3)',\n          width: '100%',\n          maxWidth: sizeMap[size],\n          maxHeight: '85vh',\n          display: 'flex',\n          flexDirection: 'column',\n          overflow: 'hidden',\n        }}\n      >\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n            padding: '4px 6px',\n            borderBottom: `1px solid ${'rgb(199, 199, 204)'}`,\n          }}\n        >\n          {title && (\n            <h2\n              style={{\n                margin: 0,\n                fontSize: '18px',\n                fontWeight: '600',\n                color: 'rgb(48, 51, 54)',\n              }}\n            >\n              {title}\n            </h2>\n          )}\n          <button\n            onClick={onClose}\n            aria-label=\"Close\"\n            style={{\n              background: 'none',\n              border: 'none',\n              cursor: 'pointer',\n              fontSize: '20px',\n              color: 'rgb(89, 89, 94)',\n              padding: '4px',\n              lineHeight: '1',\n              marginLeft: 'auto',\n            }}\n          >\n            ×\n          </button>\n        </div>\n        <div\n          style={{\n            padding: '6px',\n            overflowY: 'auto',\n            color: 'rgb(48, 51, 54)',\n            fontSize: '16px',\n            lineHeight: '1.5',\n          }}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n"
     },
     {
       "id": "Notification",
@@ -1461,7 +1468,8 @@
             "import { Notification } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <Notification\n      open\n      content={{\n        title: 'Notification Title',\n        subtitle: 'Subtitle',\n        description:\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.',\n      }}\n      leading={{ source: 'general' }}\n      appearance={{ intent: 'preventiva', showCloseButton: true }}\n      meta={{ presentation: 'popup', stackSummary: '5 notificaciones más' }}\n      events={{}}\n    />\n  );\n}"
           ]
         }
-      ]
+      ],
+      "standaloneSnippet": "import React, { useState } from 'react';\n\nconst variantMap: Record<string, { color: string; icon: string }> = {\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    <div\n      role=\"alert\"\n      style={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: '12px',\n        padding: '4px',\n        backgroundColor: 'rgb(255, 255, 255)',\n        borderRadius: '8px',\n        borderLeft: `4px solid ${v.color}`,\n        boxShadow: '0 4px 8px -2px rgba(0, 0, 0, 0.2)',\n      }}\n    >\n      <span\n        style={{\n          flexShrink: 0,\n          width: 24,\n          height: 24,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          fontSize: '16px',\n          color: v.color,\n        }}\n      >\n        {v.icon}\n      </span>\n      <div style={{ flex: 1, minWidth: 0 }}>\n        <div\n          style={{\n            fontWeight: '600',\n            fontSize: '14px',\n            color: 'rgb(48, 51, 54)',\n            marginBottom: message ? '4px' : 0,\n          }}\n        >\n          {title}\n        </div>\n        {message && (\n          <div\n            style={{\n              fontSize: '14px',\n              color: 'rgb(89, 89, 94)',\n            }}\n          >\n            {message}\n          </div>\n        )}\n      </div>\n      {closable && (\n        <button\n          type=\"button\"\n          onClick={handleClose}\n          aria-label=\"Close notification\"\n          style={{\n            flexShrink: 0,\n            border: 'none',\n            background: 'none',\n            cursor: 'pointer',\n            color: 'rgb(89, 89, 94)',\n            fontSize: '16px',\n            padding: '4px',\n            lineHeight: 1,\n          }}\n        >\n          \\u00d7\n        </button>\n      )}\n    </div>\n  );\n}\n"
     },
     {
       "id": "Pagination",
@@ -1659,7 +1667,7 @@
           "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(c",
+            "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<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\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"
           },
@@ -1676,7 +1684,7 @@
           "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(c",
+            "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<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\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"
           },
@@ -1693,7 +1701,7 @@
           "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(c",
+            "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<PopupRef>(null);\n\n<Popup ref={popupRef} label=\"Abrir popup\" position=\"bottom-right\">\n  <div>Contenido del popup</div>\n</Popup>;\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"
           },
@@ -1718,7 +1726,7 @@
           "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<NodeJS.Timeout | null>(null);\n  const startTimeRef = useRef<number>(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",
+            "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<NodeJS.Timeout | null>(null);\n  const startTimeRef = useRef<number>(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": [
@@ -1954,7 +1962,8 @@
             "import { Spinner } from '@imj_media/ui';\n\n  export default function Example() {\n    return <Spinner />\n  }"
           ]
         }
-      ]
+      ],
+      "standaloneSnippet": "import React from 'react';\n\nconst sizeMap: Record<string, number> = {\n  sm: 16,\n  md: 24,\n  lg: 40,\n};\n\nconst colorMap: Record<string, string> = {\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      <style>{`@keyframes ui-spin { to { transform: rotate(360deg) } }`}</style>\n      <div\n        role=\"status\"\n        aria-label=\"Loading\"\n        style={{\n          width: px,\n          height: px,\n          border: `${borderWidth}px solid ${c}33`,\n          borderTopColor: c,\n          borderRadius: '50%',\n          animation: 'ui-spin 0.6s linear infinite',\n          display: 'inline-block',\n        }}\n      />\n    </>\n  );\n}\n"
     },
     {
       "id": "Stepper",
@@ -2014,7 +2023,7 @@
           "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,",
+            "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": [
@@ -2067,6 +2076,112 @@
         }
       ]
     },
+    {
+      "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    <Tabs\n      items={items}\n      appearance={{ size: 'md', pill: true }}\n      selection={{ activeTab: active, onTabChange: setActive }}\n      addButton={{ show: true, onClick: () => addNewTab() }}\n    />\n  );\n}",
+            "<Tabs\n  items={items}\n  appearance={{ size: 'lg', pill: true }}\n  selection={{ defaultActiveTab: 'code' }}\n  addButton={{ show: true }}\n/>",
+            "<Tabs\n  items={items}\n  appearance={{ size: 'md', pill: true }}\n  selection={{ defaultActiveTab: 'design' }}\n  addButton={{ show: true }}\n/>",
+            "<Tabs\n  items={items}\n  appearance={{ size: 'sm', pill: true }}\n  selection={{ defaultActiveTab: 'design' }}\n  addButton={{ show: true }}\n/>",
+            "<Tabs\n  items={items}\n  appearance={{ size: 'xs', pill: true }}\n  selection={{ defaultActiveTab: 'design' }}\n  addButton={{ show: true }}\n/>"
+          ],
+          "props": {
+            "groups": {
+              "tabsAddButton": {
+                "props": {
+                  "show": {
+                    "name": "show",
+                    "type": "boolean",
+                    "required": false
+                  },
+                  "onClick": {
+                    "name": "onClick",
+                    "type": "() => void",
+                    "required": false
+                  }
+                }
+              },
+              "tabs": {
+                "props": {
+                  "items": {
+                    "name": "items",
+                    "type": "TabItem[]",
+                    "required": true
+                  },
+                  "className": {
+                    "name": "className",
+                    "type": "string",
+                    "required": false
+                  },
+                  "appearance": {
+                    "name": "appearance",
+                    "type": "TabsAppearanceProps",
+                    "required": false
+                  },
+                  "selection": {
+                    "name": "selection",
+                    "type": "TabsSelectionProps",
+                    "required": false
+                  },
+                  "addButton": {
+                    "name": "addButton",
+                    "type": "TabsAddButtonProps",
+                    "required": false
+                  }
+                }
+              }
+            },
+            "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    <div>\n      <div\n        style={{\n          display: 'flex',\n          borderBottom: '1px solid rgb(199, 199, 204)',\n          gap: '4px',\n        }}\n      >\n        {items.map((item) => {\n          const isActive = item.id === activeTab;\n          return (\n            <button\n              key={item.id}\n              type=\"button\"\n              onClick={() => 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            </button>\n          );\n        })}\n      </div>\n      <div style={{ padding: '4px 0' }}>\n        {activeItem ? activeItem.content : null}\n      </div>\n    </div>\n  );\n}\n"
+    },
     {
       "id": "Tag",
       "path": "src/modules/Tag",
@@ -2090,7 +2205,8 @@
             "import {\n    faCircleInfo,\n    faFilter,\n    faSearch,\n  } from '@fortawesome/pro-regular-svg-icons';\n\n  <Tag\n    label='\"query\"'\n    color=\"success\"\n    infoIcon={{ name: faSearch }}\n    onClose={() => {}}\n  />\n  <Tag\n    label=\"Custom\"\n    color=\"info\"\n    infoIcon={{ name: faCircleInfo, size: 'sm', color: 'warning' }}\n  />"
           ]
         }
-      ]
+      ],
+      "standaloneSnippet": "import React from 'react';\n\nconst colorMap: Record<string, { bg: string; text: string }> = {\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<string, { fontSize: string; padding: string }> = {\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    <span\n      style={{\n        display: 'inline-flex',\n        alignItems: 'center',\n        gap: '4px',\n        backgroundColor: c.bg,\n        color: c.text,\n        borderRadius: '8px',\n        padding: s.padding,\n        fontSize: s.fontSize,\n        fontWeight: '500',\n        lineHeight: 1.4,\n      }}\n    >\n      {children}\n      {closable && (\n        <button\n          type=\"button\"\n          onClick={onClose}\n          aria-label=\"Remove\"\n          style={{\n            display: 'inline-flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            border: 'none',\n            background: 'none',\n            cursor: 'pointer',\n            color: 'inherit',\n            padding: 0,\n            fontSize: 'inherit',\n            lineHeight: 1,\n            opacity: 0.7,\n          }}\n        >\n          \\u00d7\n        </button>\n      )}\n    </span>\n  );\n}\n"
     },
     {
       "id": "Text",
@@ -2521,7 +2637,8 @@
           },
           "examples": []
         }
-      ]
+      ],
+      "standaloneSnippet": "import React from 'react';\n\nconst sizeDims: Record<string, { track: [number, number]; knob: number; offset: number }> = {\n  sm: { track: [28, 16], knob: 12, offset: 2 },\n  md: { track: [36, 20], knob: 16, offset: 2 },\n  lg: { track: [44, 24], knob: 20, offset: 2 },\n};\n\ninterface ToggleProps {\n  checked: boolean;\n  onChange: (checked: boolean) => void;\n  disabled?: boolean;\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport function Toggle({\n  checked,\n  onChange,\n  disabled = false,\n  size = 'md',\n}: ToggleProps) {\n  const d = sizeDims[size];\n  const [w, h] = d.track;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      disabled={disabled}\n      onClick={() => onChange(!checked)}\n      style={{\n        position: 'relative',\n        display: 'inline-flex',\n        alignItems: 'center',\n        width: w,\n        height: h,\n        borderRadius: h,\n        border: 'none',\n        padding: 0,\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        backgroundColor: checked ? 'rgb(54, 89, 194)' : 'rgb(247, 247, 250)',\n        opacity: disabled ? 0.5 : 1,\n        transition: 'background-color 0.2s',\n      }}\n    >\n      <span\n        style={{\n          position: 'absolute',\n          top: d.offset,\n          left: checked ? w - d.knob - d.offset : d.offset,\n          width: d.knob,\n          height: d.knob,\n          borderRadius: '50%',\n          backgroundColor: 'rgb(255, 255, 255)',\n          transition: 'left 0.2s',\n          boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.1)',\n        }}\n      />\n    </button>\n  );\n}\n"
     },
     {
       "id": "Toolbar",
@@ -2599,7 +2716,8 @@
             "<Tooltip label=\"Tooltip arriba\" position=\"top\">\n    <InnerButton color=\"primary\">Top</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip abajo\" position=\"bottom\">\n    <InnerButton color=\"secondary\">Bottom</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip izquierda\" position=\"left\">\n    <InnerButton color=\"destructive\">Left</InnerButton>\n  </Tooltip>\n  <Tooltip label=\"Tooltip derecha\" position=\"right\">\n    <InnerButton color=\"tertiary\">Right</InnerButton>\n  </Tooltip>"
           ]
         }
-      ]
+      ],
+      "standaloneSnippet": "import React, { useState } from 'react';\n\nconst positionStyles: Record<string, React.CSSProperties> = {\n  top: {\n    bottom: '100%',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    marginBottom: '4px',\n  },\n  bottom: {\n    top: '100%',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    marginTop: '4px',\n  },\n  left: {\n    right: '100%',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    marginRight: '4px',\n  },\n  right: {\n    left: '100%',\n    top: '50%',\n    transform: 'translateY(-50%)',\n    marginLeft: '4px',\n  },\n};\n\ninterface TooltipProps {\n  children: React.ReactNode;\n  content: React.ReactNode;\n  position?: 'top' | 'bottom' | 'left' | 'right';\n}\n\nexport function Tooltip({ children, content, position = 'top' }: TooltipProps) {\n  const [show, setShow] = useState(false);\n\n  return (\n    <div\n      style={{ position: 'relative', display: 'inline-block' }}\n      onMouseEnter={() => setShow(true)}\n      onMouseLeave={() => setShow(false)}\n    >\n      {children}\n      {show && (\n        <span\n          style={{\n            position: 'absolute',\n            whiteSpace: 'nowrap',\n            backgroundColor: 'rgb(48, 51, 54)',\n            color: 'rgb(255, 255, 255)',\n            borderRadius: '8px',\n            padding: '4px 2px',\n            fontSize: '12px',\n            pointerEvents: 'none',\n            zIndex: 9999,\n            ...positionStyles[position],\n          }}\n        >\n          {content}\n        </span>\n      )}\n    </div>\n  );\n}\n"
     },
     {
       "id": "Visual",
@@ -2853,5 +2971,90 @@
       "title": "Imports del paquete",
       "body": "Importa desde @imj_media/ui; usa import type para tipos. Revisa deprecations en get_deprecations."
     }
-  ]
+  ],
+  "tokenPalette": {
+    "colors": {
+      "brand": {
+        "default": "rgb(54, 89, 194)",
+        "hover": "rgb(51, 82, 176)",
+        "pressed": "rgb(46, 74, 161)"
+      },
+      "secondary": {
+        "default": "rgb(240, 69, 69)",
+        "hover": "rgb(212, 61, 61)",
+        "pressed": "rgb(184, 51, 51)"
+      },
+      "tertiary": {
+        "default": "rgb(33, 196, 94)",
+        "hover": "rgb(31, 181, 87)",
+        "pressed": "rgb(28, 163, 79)"
+      },
+      "destructive": {
+        "default": "rgb(235, 179, 8)",
+        "hover": "rgb(209, 158, 8)",
+        "pressed": "rgb(181, 140, 5)"
+      },
+      "text": {
+        "primary": "rgb(48, 51, 54)",
+        "secondary": "rgb(89, 89, 94)",
+        "disabled": "rgb(186, 189, 191)",
+        "onFill": "rgb(255, 255, 255)"
+      },
+      "bg": {
+        "canvas": "rgb(247, 247, 250)",
+        "surface": "rgb(255, 255, 255)",
+        "muted": "rgb(247, 247, 250)"
+      },
+      "border": {
+        "default": "rgb(199, 199, 204)",
+        "strong": "rgb(77, 79, 84)"
+      },
+      "status": {
+        "success": "rgb(33, 196, 94)",
+        "warning": "rgb(235, 179, 8)",
+        "error": "rgb(240, 69, 69)",
+        "info": "rgb(5, 181, 212)"
+      }
+    },
+    "spacing": {
+      "0": "0",
+      "2": "2px",
+      "4": "4px",
+      "6": "6px",
+      "8": "8px",
+      "12": "12px",
+      "16": "16px",
+      "20": "20px",
+      "24": "24px",
+      "32": "32px",
+      "40": "40px",
+      "48": "48px",
+      "64": "64px",
+      "96": "96px"
+    },
+    "radius": {
+      "sm": "8px",
+      "md": "8px",
+      "lg": "10px",
+      "full": "9999px"
+    },
+    "fontSize": {
+      "xs": "12px",
+      "sm": "14px",
+      "md": "16px",
+      "lg": "18px",
+      "xl": "20px"
+    },
+    "fontWeight": {
+      "normal": "400",
+      "medium": "500",
+      "semibold": "600",
+      "bold": "700"
+    },
+    "shadow": {
+      "sm": "0 1px 2px 0 rgba(0, 0, 0, 0.1)",
+      "md": "0 4px 8px -2px rgba(0, 0, 0, 0.2)",
+      "lg": "0 16px 24px -8px rgba(0, 0, 0, 0.3)"
+    }
+  }
 }

package/catalog/design-index.schema.json

@@ -30,7 +30,8 @@
     "consumerChecklist": {
       "type": "array",
       "items": { "$ref": "#/$defs/consumerChecklistItem" }
-    }
+    },
+    "tokenPalette": { "$ref": "#/$defs/tokenPalette" }
   },
   "$defs": {
     "mergedDescription": {
@@ -97,7 +98,19 @@
         "legacyReason": { "type": "string" },
         "compositionType": { "enum": [1, 2] },
         "exports": { "type": "array", "items": { "$ref": "#/$defs/moduleExport" } },
-        "compositionRecipe": { "$ref": "#/$defs/compositionRecipe" }
+        "compositionRecipe": { "$ref": "#/$defs/compositionRecipe" },
+        "standaloneSnippet": { "type": "string" }
+      }
+    },
+    "tokenPalette": {
+      "type": "object",
+      "properties": {
+        "colors": { "type": "object" },
+        "spacing": { "type": "object" },
+        "radius": { "type": "object" },
+        "fontSize": { "type": "object" },
+        "fontWeight": { "type": "object" },
+        "shadow": { "type": "object" }
       }
     },
     "styleIndex": {