Popover

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-64">
        <p className="text-sm text-muted-foreground">
          Popover content goes here.
        </p>
      </PopoverContent>
    </Popover>
  )
}

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-60">
    <div className="space-y-1">
      <h4 className="font-medium text-sm">Quick info</h4>
      <p className="text-sm text-muted-foreground">
        This component anchors floating content to any trigger element.
      </p>
    </div>
  </PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Edit dimensions</Button>
  </PopoverTrigger>
  <PopoverContent className="w-56">
    <div className="grid gap-3">
      <h4 className="font-medium text-sm">Dimensions</h4>
      <FormItem>
        <FormLabel>Width</FormLabel>
        <Input defaultValue="100%" />
      </FormItem>
      <FormItem>
        <FormLabel>Height</FormLabel>
        <Input defaultValue="100%" />
      </FormItem>
      <Button size="sm">Apply</Button>
    </div>
  </PopoverContent>
</Popover>

// Control placement with the `side` prop
<PopoverContent side="top">...</PopoverContent>
<PopoverContent side="right">...</PopoverContent>
<PopoverContent side="bottom">...</PopoverContent>  {/* default */}
<PopoverContent side="left">...</PopoverContent>