Spinner

export function LoadingSpecimen() {
  return (
    <Stage label="Spinner y Skeleton · cuál va en cada caso, y los esqueletos ya compuestos" tall wide>
      <div className="flex w-full max-w-[560px] flex-col gap-5">
        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            Spinner · para la acción que el usuario pidió. Cuatro tamaños, y adentro del botón que
            está esperando
          </span>
          <div className="flex flex-wrap items-center gap-4 rounded-lg border border-content/10 bg-container p-3">
            <div className="flex items-center gap-3">
              {(['xs', 'sm', 'md', 'lg'] as const).map((t) => (
                <span key={t} className="flex flex-col items-center gap-1">
                  <Spinner size={t} />
                  <span className="font-mono text-[10px] text-content/50">{t}</span>
                </span>
              ))}
            </div>
            <Button variant="primary" size="sm" loading loadingText="Cobrando la seña…">
              Cobrar seña
            </Button>
          </div>
          <span className="text-[11px] text-content/60">
            Trae `role=&quot;status&quot;` propio: es audible para un lector de pantalla sin que el
            consumidor agregue nada.
          </span>
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            Skeleton · para el contenido que todavía no llegó. Las cuatro variantes, con la forma que
            van a tener los datos de verdad
          </span>
          <div className="flex flex-col gap-3 rounded-lg border border-content/10 bg-container p-3">
            <div className="flex items-center gap-3">
              <Skeleton variant="circular" width={36} height={36} />
              <div className="flex flex-1 flex-col gap-1.5">
                <Skeleton variant="text" width="45%" />
                <Skeleton variant="text" width="70%" />
              </div>
              <Skeleton variant="rounded" width={72} height={26} />
            </div>
            <Skeleton variant="rectangular" height={54} />
            <Skeleton variant="text" lines={3} />
          </div>
        </div>

        <div className="flex flex-col gap-2">
          <span className="text-xs text-content/50">
            …y los que el kit ya trae compuestos: no hace falta rearmar la forma de una lista ni la
            de un formulario
          </span>
          <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
            <div className="flex flex-col gap-1.5 rounded-lg border border-content/10 bg-container p-3">
              <span className="font-mono text-[10px] uppercase tracking-wide text-content/50">
                SkeletonListItem ×3
              </span>
              {[0, 1, 2].map((i) => (
                <SkeletonListItem key={i} />
              ))}
            </div>
            <div className="flex flex-col gap-1.5 rounded-lg border border-content/10 bg-container p-3">
              <span className="font-mono text-[10px] uppercase tracking-wide text-content/50">
                SkeletonForm · fields=3
              </span>
              <SkeletonForm fields={3} />
            </div>
          </div>
        </div>
      </div>
    </Stage>
  )
}

De specimens/display.tsx · LoadingSpecimen: 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.