AiButton

import { AiButton, AiIcon } from "sebs7n-ui/ai-button"

function Basico() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <AiButton variant="solid">
        <AiIcon />
        Generar resumen
      </AiButton>
      <AiButton>
        <AiIcon />
        Completar con IA
      </AiButton>
      <AiButton size="sm">
        <AiIcon />
        Mejorar
      </AiButton>
      <AiButton aria-label="Preguntarle a la IA" size="icon-md">
        <AiIcon />
      </AiButton>
      <AiButton loading variant="solid">
        Generando…
      </AiButton>
      <AiButton disabled>
        <AiIcon />
        Sin conexión
      </AiButton>
    </div>
  )
}

import { AiLauncher } from "sebs7n-ui/ai-button"

function Lanzador() {
  return (
    <div className="relative flex h-40 w-full max-w-md items-end justify-end gap-6 p-4">
      <AiLauncher labelVisible />
      {/* Con una respuesta en camino, el canto gira. */}
      <AiLauncher active label="Respondiendo" labelSide="right" />
    </div>
  )
}

import { AiButton, AiGlow, AiIcon, AiShimmer } from "sebs7n-ui/ai-button"
import { Card, CardContent } from "sebs7n-ui/card"
import { useState } from "react"

function Trabajando() {
  const [leyendo, setLeyendo] = useState(false)
  return (
    // `relative` es lo que ancla el borde a la tarjeta; `aria-busy` es lo que anuncia la espera.
    <Card aria-busy={leyendo} className="relative w-full max-w-sm" size="sm">
      <AiGlow active={leyendo} />
      <CardContent className="flex flex-col gap-4">
        {leyendo ? (
          <div className="flex flex-col gap-2">
            <AiShimmer className="w-2/3" />
            <AiShimmer />
            <AiShimmer className="w-1/2" />
          </div>
        ) : (
          <p className="text-callout text-label-secondary">Subí el comprobante y la IA completa los datos de la factura.</p>
        )}
        <AiButton
          disabled={leyendo}
          onClick={() => {
            setLeyendo(true)
            setTimeout(() => setLeyendo(false), 3000)
          }}
          variant="solid"
        >
          <AiIcon />
          {leyendo ? "Leyendo el comprobante…" : "Leer el comprobante"}
        </AiButton>
      </CardContent>
    </Card>
  )
}