@imj_media/ui 1.10.5 → 1.10.6

package/CHANGELOG.md

@@ -7,6 +7,17 @@ y este proyecto adhiere a [Semantic Versioning](https://semver.org/lang/es/).
 
 ## [Unreleased]
 
+## [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.6` — 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.6",
+  "indexedAt": "2026-05-25T23:17:58.142Z",
   "orbitTokensVersion": "1.3.1",
   "modules": [
     {
@@ -396,7 +396,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 +821,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": [
@@ -1659,7 +1659,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 +1676,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 +1693,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 +1718,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": [
@@ -2014,7 +2014,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 +2067,111 @@
         }
       ]
     },
+    {
+      "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."
+              }
+            }
+          }
+        }
+      ]
+    },
     {
       "id": "Tag",
       "path": "src/modules/Tag",