Popover

Contenido flotante anclado a un elemento. Se cierra al hacer click fuera o con Escape.

---

Import

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverAnchor,
} from '@imansi/ui';

---

Uso básico

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Abrir popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <div className="space-y-2">
      <h4 className="font-medium">Configuración</h4>
      <p className="text-sm text-muted-foreground">
        Ajustá las opciones que quieras.
      </p>
    </div>
  </PopoverContent>
</Popover>

---

Con formulario

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">
      <Settings className="h-4 w-4" />
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-80">
    <div className="space-y-4">
      <div className="space-y-2">
        <Label>Ancho del layout</Label>
        <Slider defaultValue={[100]} max={200} />
      </div>
      <Button className="w-full">Guardar</Button>
    </div>
  </PopoverContent>
</Popover>

---

Controlado

const [abierto, setAbierto] = useState(false);

<Popover open={abierto} onOpenChange={setAbierto}>
  <PopoverTrigger asChild>
    <Button>Toggle</Button>
  </PopoverTrigger>
  <PopoverContent>Contenido</PopoverContent>
</Popover>

---

Props

PopoverContent

Prop	Tipo	Default	Descripción
align	'start' | 'center' | 'end'	'center'	Alineación horizontal
side	'top' | 'right' | 'bottom' | 'left'	'bottom'	Lado de apertura
sideOffset	number	4	Separación del trigger (px)
className	string	—	Clases adicionales

---

Accesibilidad

• Escape cierra
• Click afuera cierra
• Focus trap dentro
• role="dialog" aplicado al content