Sheet

import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetFooter, SheetClose } from '@caroainc/ui-components/client'

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">開く</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>シートタイトル</SheetTitle>
      <SheetDescription>
        シートの説明文がここに入ります。
      </SheetDescription>
    </SheetHeader>
    <div className="py-4">
      メインコンテンツ
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button>閉じる</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

<SheetContent side="left">左から</SheetContent>
<SheetContent side="right">右から（デフォルト）</SheetContent>
<SheetContent side="top">上から</SheetContent>
<SheetContent side="bottom">下から</SheetContent>

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">
      <Icon name="Menu" />
      メニュー
    </Button>
  </SheetTrigger>
  <SheetContent side="left" className="w-[300px]">
    <SheetHeader>
      <SheetTitle>ナビゲーション</SheetTitle>
    </SheetHeader>
    <nav className="flex flex-col gap-2 py-4">
      <Button variant="ghost" className="justify-start">
        <Icon name="Home" />
        ホーム
      </Button>
      <Button variant="ghost" className="justify-start">
        <Icon name="User" />
        プロフィール
      </Button>
    </nav>
  </SheetContent>
</Sheet>