componente · @solu30/ui-kit/input

Collapsible

Primitivo de contenido plegable —raíz, disparador y contenido— sin encabezado ni estilo propios.

32 sitios de import en 4 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
cmp-packages
gestorsalon
luigi

El componente, montado

Cargando el espécimen…

Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.

Cómo se usa

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@solu30/ui-kit/input'

<Collapsible defaultOpen>
  <CollapsibleTrigger>Política de señas</CollapsibleTrigger>
  <CollapsibleContent>
    La seña es el 30% y se acredita a las 48 horas hábiles.
  </CollapsibleContent>
</Collapsible>

Anatomía

Las partes que componen Collapsible se importan del mismo subpath. Sueltas no significan nada: se montan siempre dentro de su padre.

Collapsible
├── CollapsibleContent
└── CollapsibleTrigger

Props

6 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
open	opcional	`boolean`	—
defaultOpen	opcional	`boolean`	—
onOpenChange	opcional	`(open: boolean) => void`	—
disabled	opcional	`boolean`	—
className	opcional	`string`	—
children	sí	`React$1.ReactNode`	—

Controlado

Cuando el estado abierto/cerrado tiene que vivir afuera, sincronizado con otra parte de la pantalla — un bloque que se cierra al guardar, por ejemplo.

Cargando el espécimen…

export function CollapsibleControlado() {
  // Arranca ABIERTO a propósito: cerrado, la ficha de `CollapsibleContent`
  // mostraría un botón y nada más — el componente del que es la ficha
  // estaría oculto.
  const [abierto, setAbierto] = useState(true)

  return (
    <div className="flex flex-col gap-1.5">
      <span className="text-xs text-content/50">
        controlado — open + onOpenChange, el estado vive en el consumidor
      </span>
      <Collapsible open={abierto} onOpenChange={setAbierto}>
        <DisparadorPlegable>Política de señas</DisparadorPlegable>
        <CollapsibleContent>
          <div className="mt-1.5 rounded-lg border border-content/10 bg-inner p-3 text-sm text-content/70">
            La seña es el 30% y se acredita a las 48 horas hábiles. Cancelando con más de 15 días
            de anticipación se devuelve completa.
          </div>
        </CollapsibleContent>
      </Collapsible>
      <span className="font-mono text-[11px] text-content/40">
        open = {abierto ? 'true' : 'false'}
      </span>
    </div>
  )
}

De specimens/input.tsx · CollapsibleControlado: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

No controlado

Cuando el estado es puramente de interacción y no le importa a nadie más de la pantalla — «defaultOpen» alcanza y el estado lo lleva el propio componente.

Cargando el espécimen…

export function CollapsibleNoControlado() {
  return (
    <div className="flex flex-col gap-1.5">
      <span className="text-xs text-content/50">no controlado — defaultOpen, el estado lo lleva Radix</span>
      <Collapsible defaultOpen>
        <DisparadorPlegable>Qué incluye el salón</DisparadorPlegable>
        <CollapsibleContent>
          <ul className="mt-1.5 flex flex-col gap-1 rounded-lg border border-content/10 bg-inner p-3 text-sm text-content/70">
            <li>Mobiliario para 120 personas</li>
            <li>Cocina equipada y office</li>
            <li>Estacionamiento propio</li>
          </ul>
        </CollapsibleContent>
      </Collapsible>
    </div>
  )
}

De specimens/input.tsx · CollapsibleNoControlado: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Deshabilitado

Cuando el contenido existe pero no se puede abrir todavía — un bloque que depende de una condición previa, como un contrato ya firmado.

Cargando el espécimen…

export function CollapsibleDeshabilitado() {
  return (
    <div className="flex flex-col gap-1.5">
      <span className="text-xs text-content/50">disabled — el disparador no responde y el contenido no abre</span>
      <Collapsible disabled>
        <DisparadorPlegable>Contrato firmado</DisparadorPlegable>
        <CollapsibleContent>
          <div className="mt-1.5 rounded-lg border border-content/10 bg-inner p-3 text-sm text-content/70">
            Este bloque no se puede abrir mientras el contrato esté firmado.
          </div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  )
}

De specimens/input.tsx · CollapsibleDeshabilitado: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Ejemplo del paquete

<Collapsible open={abierto} onOpenChange={setAbierto}>
  <CollapsibleTrigger asChild><Button variant="ghost">Ver detalle</Button></CollapsibleTrigger>
  <CollapsibleContent>
    <Detalle />
  </CollapsibleContent>
</Collapsible>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.