Popover

import {
  Button,
  CopyField,
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from 'ferry-ui'
import { Share2 } from 'lucide-react'

export default function PopoverHero() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button icon={<Share2 />}>Share</Button>
      </PopoverTrigger>
      <PopoverContent aria-label="Share this report" className="flex flex-col gap-3">
        <PopoverHeader>
          <PopoverTitle>Share this report</PopoverTitle>
          <PopoverDescription>Each person with the link can view it.</PopoverDescription>
        </PopoverHeader>
        <CopyField value="https://example.com/s/8f2k" what="share link" size="sm" aria-label="Share link" />
      </PopoverContent>
    </Popover>
  )
}

import { Button, Popover, PopoverContent, PopoverTrigger } from 'ferry-ui'

const SIDES = ['top', 'right', 'bottom', 'left'] as const

export default function PopoverSide() {
  return (
    <>
      {SIDES.map((side) => (
        <Popover key={side}>
          <PopoverTrigger asChild>
            <Button>{side}</Button>
          </PopoverTrigger>
          <PopoverContent side={side} aria-label={`Side ${side}`} className="w-48 text-[13px] text-foreground-light">
            The panel opens on the {side} side of the trigger.
          </PopoverContent>
        </Popover>
      ))}
    </>
  )
}

import { Button, Popover, PopoverContent, PopoverTrigger } from 'ferry-ui'

const ALIGNMENTS = ['start', 'center', 'end'] as const

export default function PopoverAlign() {
  return (
    <>
      {ALIGNMENTS.map((align) => (
        <Popover key={align}>
          <PopoverTrigger asChild>
            <Button>{align}</Button>
          </PopoverTrigger>
          <PopoverContent align={align} aria-label={`Alignment ${align}`} className="w-56 text-[13px] text-foreground-light">
            The panel aligns to the {align} of the trigger.
          </PopoverContent>
        </Popover>
      ))}
    </>
  )
}

import * as React from 'react'
import { Button, Field, Input, Popover, PopoverContent, PopoverTrigger } from 'ferry-ui'

export default function PopoverControlled() {
  const [open, setOpen] = React.useState(false)
  const [name, setName] = React.useState('Billing portal')
  const [draft, setDraft] = React.useState(name)

  function save(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setName(draft.trim() || name)
    // The form is done: close the popover from the code.
    setOpen(false)
  }

  return (
    <>
      <span className="text-sm font-medium text-foreground">{name}</span>
      <Popover
        open={open}
        onOpenChange={(next) => {
          // Start each edit from the current name.
          if (next) setDraft(name)
          setOpen(next)
        }}
      >
        <PopoverTrigger asChild>
          <Button variant="ghost" size="tiny">
            Rename
          </Button>
        </PopoverTrigger>
        <PopoverContent align="start" aria-label="Rename project">
          <form className="flex flex-col gap-3" onSubmit={save}>
            <Field label="Project name" size="sm" hint="The URL of the project does not change.">
              <Input size="sm" value={draft} onChange={(event) => setDraft(event.target.value)} />
            </Field>
            <div className="flex justify-end gap-2">
              <Button onClick={() => setOpen(false)}>Cancel</Button>
              <Button type="submit" variant="primary">
                Save
              </Button>
            </div>
          </form>
        </PopoverContent>
      </Popover>
    </>
  )
}

import { Button, Popover, PopoverContent, PopoverTrigger } from 'ferry-ui'
import { Bell } from 'lucide-react'

const NOTIFICATIONS = [
  { id: 1, text: 'Acme paid the invoice INV-2041.', when: '2 min ago' },
  { id: 2, text: 'Sam Lee joined the workspace.', when: '1 hour ago' },
  { id: 3, text: 'The API key “Analytics export” expires in 3 days.', when: 'Yesterday' },
]

export default function PopoverCustomSize() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="ghost" size="icon" icon={<Bell />} aria-label="Notifications" />
      </PopoverTrigger>
      {/* `w-80 p-0`: a wider panel with no padding, for a list that touches the edges. */}
      <PopoverContent align="end" className="w-80 p-0" aria-label="Notifications">
        <ul className="divide-y">
          {NOTIFICATIONS.map((notification) => (
            <li key={notification.id} className="flex flex-col gap-0.5 px-4 py-2.5">
              <span className="text-[13px] text-foreground">{notification.text}</span>
              <span className="text-xs text-foreground-lighter">{notification.when}</span>
            </li>
          ))}
        </ul>
        <div className="border-t p-2">
          <Button variant="ghost" className="w-full">
            Mark all as read
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  )
}

import * as React from 'react'
import { Button, Input, Popover, PopoverAnchor, PopoverContent, PopoverTitle, PopoverTrigger } from 'ferry-ui'
import { CalendarDays } from 'lucide-react'

const DATES = [
  { label: 'End of the month', value: '2026-03-31' },
  { label: 'End of the quarter', value: '2026-06-30' },
  { label: 'End of the year', value: '2026-12-31' },
]

export default function PopoverWithAnchor() {
  const [open, setOpen] = React.useState(false)
  const [date, setDate] = React.useState('2026-03-31')

  return (
    <Popover open={open} onOpenChange={setOpen}>
      {/* The panel aligns to the field and the button together, not to the button only. */}
      <PopoverAnchor asChild>
        <div className="flex w-64 items-center gap-2">
          <Input aria-label="Due date" size="sm" mono value={date} onChange={(event) => setDate(event.target.value)} />
          <PopoverTrigger asChild>
            <Button size="icon" icon={<CalendarDays />} aria-label="Pick a due date" />
          </PopoverTrigger>
        </div>
      </PopoverAnchor>
      <PopoverContent align="start" aria-label="Due date" className="flex w-64 flex-col gap-2">
        <PopoverTitle>Due date</PopoverTitle>
        <div className="flex flex-col gap-1">
          {DATES.map((option) => (
            <Button
              key={option.value}
              variant="ghost"
              className="justify-between"
              onClick={() => {
                setDate(option.value)
                setOpen(false)
              }}
            >
              {option.label}
              <span className="font-mono text-xs text-foreground-lighter">{option.value}</span>
            </Button>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  )
}