Sheet

import { Button, Icon, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@bindshq/stance-react';

export function Basic() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Share signature</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Share signature</SheetTitle>
          <SheetDescription>
            Anyone with the link can copy this signature into their mail client.
          </SheetDescription>
        </SheetHeader>
        <SheetBody>
          <code style={{ wordBreak: 'break-all' }}>https://esignify.app/s/7f3k2-sales-emea</code>
        </SheetBody>
        <SheetFooter>
          <SheetClose asChild>
            <Button variant="outline">Close</Button>
          </SheetClose>
          <Button leadingIcon={<Icon name="copy" />}>Copy link</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

import { Button, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@bindshq/stance-react';

export function Heights() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
      {(['auto', 'half', 'full'] as const).map((height) => (
        <Sheet key={height}>
          <SheetTrigger asChild>
            <Button variant="outline">{height}</Button>
          </SheetTrigger>
          <SheetContent height={height}>
            <SheetHeader>
              <SheetTitle>Height “{height}”</SheetTitle>
            </SheetHeader>
            <SheetBody>Drag the handle down, press Escape, or tap outside to close.</SheetBody>
          </SheetContent>
        </Sheet>
      ))}
    </div>
  );
}

import { Button, Icon, Sheet, SheetBody, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@bindshq/stance-react';

export function ActionList() {
  const actions = [
    { icon: 'pencil', label: 'Edit template' },
    { icon: 'copy', label: 'Duplicate' },
    { icon: 'download', label: 'Download HTML' },
    { icon: 'trash', label: 'Delete' },
  ] as const;
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="secondary" leadingIcon={<Icon name="more-horizontal" />}>
          More actions
        </Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Sales, EMEA</SheetTitle>
        </SheetHeader>
        <SheetBody>
          <div style={{ display: 'grid', gap: 4 }}>
            {actions.map((a) => (
              <SheetClose key={a.label} asChild>
                <Button
                  variant="ghost"
                  leadingIcon={<Icon name={a.icon} />}
                  style={{ justifyContent: 'flex-start' }}
                >
                  {a.label}
                </Button>
              </SheetClose>
            ))}
          </div>
        </SheetBody>
      </SheetContent>
    </Sheet>
  );
}