Popover

import { Popover, PopoverTrigger, PopoverContent } from "@sigil-ui/components";

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open settings</Button>
  </PopoverTrigger>
  <PopoverContent>
    <Stack gap={12}>
      <Label htmlFor="width">Width</Label>
      <Input id="width" defaultValue="100%" />
    </Stack>
  </PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger asChild><Button>Top</Button></PopoverTrigger>
  <PopoverContent side="top">Above the trigger.</PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger asChild><Button>Right</Button></PopoverTrigger>
  <PopoverContent side="right">To the right.</PopoverContent>
</Popover>

import { useState } from "react";

function ControlledPopover() {
  const [open, setOpen] = useState(false);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild><Button>Toggle</Button></PopoverTrigger>
      <PopoverContent>
        <p>Controlled popover</p>
        <Button size="sm" onClick={() => setOpen(false)}>Close</Button>
      </PopoverContent>
    </Popover>
  );
}