Shared/Nidus Tabs

Nidus Tabs

Tabs pill-shaped que extienden el primitivo base de @radix-ui/react-tabs. El ítem activo recibe borde y fondo en verde bosque; los inactivos son texto plano. Fiel al diseño Figma (nodo 469:16633).

Default

Navegación entre paneles con la primera pestaña seleccionada por defecto.

Contenido — Todas

Pestaña activa central

El estado seleccionado puede estar en cualquier posición.

Contenido — Entrevistadas

Ítem deshabilitado

Pasá la prop disabled al NidusTabsTrigger para deshabilitar un ítem.

Contenido — Todas

Componentes

Cuatro exports que reemplazan a sus equivalentes base con el estilo visual Nidus.

Componente	Base	Cambios visuales
`NidusTabs`	`Tabs`	Re-export directo, sin cambios.
`NidusTabsList`	`TabsList`	Elimina altura fija y fondo muted. Contenedor transparente con `gap-1 p-1 rounded-full`.
`NidusTabsTrigger`	`TabsTrigger`	Pill shape (`rounded-full px-4 py-2`). Activo: fondo `primary/5`, borde y texto en `primary`.
`NidusTabsContent`	`TabsContent`	Re-export directo, sin cambios.

Uso

Reemplazá los componentes base de shadcn por sus variantes Nidus. La API es idéntica.

import {
  NidusTabs,
  NidusTabsList,
  NidusTabsTrigger,
  NidusTabsContent,
} from '@repo/ui';

<NidusTabs defaultValue="todas">
  <NidusTabsList>
    <NidusTabsTrigger value="todas">Todas</NidusTabsTrigger>
    <NidusTabsTrigger value="entrevistadas">Entrevistadas</NidusTabsTrigger>
    <NidusTabsTrigger value="papelera">Papelera</NidusTabsTrigger>
  </NidusTabsList>

  <NidusTabsContent value="todas">
    {/* contenido */}
  </NidusTabsContent>
  <NidusTabsContent value="entrevistadas">
    {/* contenido */}
  </NidusTabsContent>
  <NidusTabsContent value="papelera">
    {/* contenido */}
  </NidusTabsContent>
</NidusTabs>