sebs7n-ui

Contenido y datosServer Component

import { Disclosure, DisclosureContent, DisclosureGroup, DisclosureTrigger } from "sebs7n-ui/disclosure"

Ejemplos

Preguntas frecuentes

Sin JavaScript: `<details>` y `<summary>` con las filas del `Accordion`. Con el mismo `name`, abrir una cierra la otra.

import { Disclosure, DisclosureContent, DisclosureGroup, DisclosureTrigger } from "sebs7n-ui/disclosure"

function Faq() {
  return (
    <DisclosureGroup className="max-w-lg">
      {FAQ.map((item) => (
        <Disclosure key={item.q} name="billing-faq">
          <DisclosureTrigger>{item.q}</DisclosureTrigger>
          <DisclosureContent>{item.a}</DisclosureContent>
        </Disclosure>
      ))}
    </DisclosureGroup>
  )
}

Filtro plegado

`variant="inline"`: el disparador en línea, 14 y gris, arriba de una lista. Las etiquetas están en el HTML aunque esté cerrado.

import { Disclosure, DisclosureContent, DisclosureTrigger } from "sebs7n-ui/disclosure"
import { Tag } from "sebs7n-ui"

function InlineFilter() {
  return (
    <Disclosure variant="inline">
      <DisclosureTrigger>
        Etiquetas <span className="tabular-nums">({TAGS.length})</span>
      </DisclosureTrigger>
      <DisclosureContent className="flex flex-wrap gap-1.5">
        {TAGS.map((tag) => (
          <Tag key={tag}>{tag}</Tag>
        ))}
      </DisclosureContent>
    </Disclosure>
  )
}

Props

Generadas del TypeScript del paquete. Las propias del componente, más las heredadas del primitivo que tienen algo que explicar —marcadas «heredada de Base UI»—. El resto está en la línea «hereda de».

Disclosure

Hereda las props de <details>.

Prop	Tipo	Por defecto	Descripción
`defaultOpen`	`boolean`	—	Abierto al cargar. El navegador lo abre y lo cierra después.
`onOpenChange`	`(open: boolean) => void`	—	Avisa el estado nuevo (el evento `toggle` del `<details>`). Con `open`, si la app no lo cambia, la sección vuelve a como dice `open`. Solo desde un Client Component.
`onToggle`	`ToggleEventHandler<T>`	—	El evento `toggle` nativo del `<details>`: corre antes que `onOpenChange`.
`open`	`boolean`	—	Abierto, controlado: va con `onOpenChange` (en un Client Component). Sin `onOpenChange` es solo el estado inicial, como `defaultOpen`.
`variant`	`"inline" \| "row"`	`"row"`	`row` (el default): una fila de 44 con separador, como el `Accordion`. `inline`: el disparador en línea, 14 y gris, sin separadores, para un filtro plegado arriba de una lista.
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.
`name`	`string`	—	Heredada de Base UI. Mismo `name` en varios: abrir uno cierra los otros (lo hace el navegador).

DisclosureContent

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

DisclosureGroup

Hereda las props de <div>.

Prop	Tipo	Por defecto	Descripción
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

DisclosureTrigger

Hereda las props de <summary>.

Prop	Tipo	Por defecto	Descripción
`chevron`	`boolean`	`true`	Saca el chevron, para poner otro indicador.
`className`	`string`	—	Se fusiona con las clases del componente vía `cn()` (tailwind-merge): lo que pongas gana.

Teclado

Tab: Pasa de un título a otro.
Enter · Espacio: Abren y cierran la sección (lo hace el navegador).

Accesibilidad

Es el <details> nativo: el navegador lo hace enfocable, lo abre con Enter y Espacio y anuncia si está expandido o colapsado. El chevron es decorativo.
El contenido está en el HTML aunque esté cerrado: lo encuentra Cmd+F (Chrome abre la sección) y lo lee un buscador.
Con movimiento reducido el chevron no gira con recorrido.

Reglas de uso

Para una página que tiene que andar sin JS (preguntas frecuentes, un filtro plegado en un blog). En una app, Accordion: anima el alto y recorre las secciones con flechas.
Varios con el mismo name se excluyen (abrir uno cierra el otro), como el Accordion por defecto; sin name, cada uno por su cuenta.
variant="inline" para un disparador en línea (14, gris) arriba de una lista, sin separadores. defaultOpen lo abre al cargar (un filtro que ya viene en la URL).
No lleva "use client": las partes leen la variante del <details> con group-data-*, sin contexto. Solo por subpath (sebs7n-ui/disclosure).

Relacionados

Accordion Collapsible