Sheet

import {
  Button,
  Field,
  Input,
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
  Textarea,
} from 'ferry-ui'

export default function SheetHero() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Edit member</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit member</SheetTitle>
          <SheetDescription>The changes apply to each project of the workspace.</SheetDescription>
        </SheetHeader>
        <SheetBody>
          <Field label="Full name">
            <Input defaultValue="Maya Chen" />
          </Field>
          <Field label="Email">
            <Input type="email" defaultValue="maya@example.com" />
          </Field>
          <Field label="Note" optional hint="Only the admins of the workspace see this note.">
            <Textarea />
          </Field>
        </SheetBody>
        <SheetFooter className="flex-row justify-end">
          <SheetClose asChild>
            <Button>Cancel</Button>
          </SheetClose>
          <SheetClose asChild>
            <Button variant="primary">Save changes</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

import { Button, Sheet, SheetBody, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from 'ferry-ui'

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

export default function SheetSides() {
  return (
    <>
      {SIDES.map((side) => (
        <Sheet key={side}>
          <SheetTrigger asChild>
            <Button>{side}</Button>
          </SheetTrigger>
          <SheetContent side={side}>
            <SheetHeader>
              <SheetTitle>Side {side}</SheetTitle>
              <SheetDescription>The panel comes from the {side} edge of the screen.</SheetDescription>
            </SheetHeader>
            <SheetBody className="text-[13px] text-foreground-light">The page stays in view behind the panel.</SheetBody>
          </SheetContent>
        </Sheet>
      ))}
    </>
  )
}

import {
  Button,
  DescriptionItem,
  DescriptionList,
  Sheet,
  SheetBody,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from 'ferry-ui'

export default function SheetWidth() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>View order</Button>
      </SheetTrigger>
      {/* `sm:max-w-lg` makes the panel wider than the default width. */}
      <SheetContent className="sm:max-w-lg">
        <SheetHeader>
          <SheetTitle>Order #10482</SheetTitle>
          <SheetDescription>Acme placed this order on March 3, 2026.</SheetDescription>
        </SheetHeader>
        <SheetBody>
          <DescriptionList variant="rows" divided={false} aria-label="Order details">
            <DescriptionItem label="Customer">Acme</DescriptionItem>
            <DescriptionItem label="Payment">Card that ends in 4242</DescriptionItem>
            <DescriptionItem label="Delivery">Express, 2 days</DescriptionItem>
            <DescriptionItem label="Total">$1,284.00</DescriptionItem>
          </DescriptionList>
        </SheetBody>
      </SheetContent>
    </Sheet>
  )
}

import {
  Button,
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from 'ferry-ui'

const FOOTERS = [
  // No class: the footer stacks its buttons.
  { label: 'Stacked buttons', className: undefined },
  // `flex-row justify-end` puts the buttons in one row, at the right.
  { label: 'Buttons in one row', className: 'flex-row justify-end' },
]

export default function SheetFooterLayouts() {
  return (
    <>
      {FOOTERS.map((footer) => (
        <Sheet key={footer.label}>
          <SheetTrigger asChild>
            <Button>{footer.label}</Button>
          </SheetTrigger>
          <SheetContent>
            <SheetHeader>
              <SheetTitle>Export invoices</SheetTitle>
              <SheetDescription>The export has the invoices of March 2026.</SheetDescription>
            </SheetHeader>
            <SheetBody className="text-[13px] text-foreground-light">You get an email with a link to the CSV file.</SheetBody>
            <SheetFooter className={footer.className}>
              <SheetClose asChild>
                <Button>Cancel</Button>
              </SheetClose>
              <SheetClose asChild>
                <Button variant="primary">Export</Button>
              </SheetClose>
            </SheetFooter>
          </SheetContent>
        </Sheet>
      ))}
    </>
  )
}

import {
  Button,
  Sheet,
  SheetBody,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from 'ferry-ui'

const MEMBERS = ['Maya Chen', 'Sam Lee', 'Ada Park']
const EVENTS = ['changed the billing address', 'invited a new member', 'renamed a project', 'exported the invoices']

const ACTIVITY = Array.from({ length: 24 }, (_, index) => ({
  id: index,
  who: MEMBERS[index % MEMBERS.length],
  what: EVENTS[index % EVENTS.length],
  when: `${index + 2} min ago`,
}))

export default function SheetScroll() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Show activity</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Activity</SheetTitle>
          <SheetDescription>The last changes in this workspace.</SheetDescription>
        </SheetHeader>
        {/* `gap-0 p-0` lets the list touch the edges of the panel. */}
        <SheetBody className="gap-0 p-0">
          <ul className="divide-y">
            {ACTIVITY.map((item) => (
              <li key={item.id} className="flex flex-col gap-0.5 px-4 py-2.5">
                <span className="text-[13px] text-foreground">
                  <span className="font-medium">{item.who}</span> {item.what}
                </span>
                <span className="text-xs text-foreground-lighter">{item.when}</span>
              </li>
            ))}
          </ul>
        </SheetBody>
        <SheetFooter>
          <Button>Load older activity</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

import * as React from 'react'
import {
  Button,
  Checkbox,
  Label,
  Sheet,
  SheetBody,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  toast,
} from 'ferry-ui'
import { ListFilter } from 'lucide-react'

const STATUSES = ['Paid', 'Open', 'Overdue']

export default function SheetControlled() {
  const [open, setOpen] = React.useState(false)

  function apply() {
    toast.success('Filters applied')
    // The work is done: close the sheet from the code.
    setOpen(false)
  }

  return (
    <>
      <Button icon={<ListFilter />} onClick={() => setOpen(true)}>
        Filters
      </Button>
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Filters</SheetTitle>
            <SheetDescription>Show only the invoices with these statuses.</SheetDescription>
          </SheetHeader>
          <SheetBody>
            {STATUSES.map((status) => (
              <Label key={status}>
                <Checkbox defaultChecked={status !== 'Paid'} />
                {status}
              </Label>
            ))}
          </SheetBody>
          <SheetFooter>
            <Button variant="primary" onClick={apply}>
              Apply filters
            </Button>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </>
  )
}

import {
  Button,
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from 'ferry-ui'

export default function SheetNoCloseButton() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Read the terms</Button>
      </SheetTrigger>
      <SheetContent showCloseButton={false}>
        <SheetHeader>
          <SheetTitle>Terms of service</SheetTitle>
          <SheetDescription>The version of March 2026.</SheetDescription>
        </SheetHeader>
        <SheetBody className="text-[13px] text-foreground-light">
          <p>Each member of the workspace must accept the terms before the first invoice.</p>
          <p>An admin can read the accepted version in the settings of the workspace.</p>
        </SheetBody>
        {/* The panel has no close button: the footer gives the way out. */}
        <SheetFooter>
          <SheetClose asChild>
            <Button variant="primary">Done</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}