WebでGoogleマップのようなハーフモーダルを実装する

Vaul とは 「ハーフモーダル」という UI パターンをご存知でしょうか？ モーダルウィンドウの一種で、画面の下半分を覆うように表示される UI パターンです。iOS 15 で導入されてから、スマートフォンではよく見かけるようになりました。 Customize and resize sheets in UIKitより ハーフドロワーや半モーダルといった呼び方もあるようです。 Vaul はこのようなハーフモーダルを React で実装するためのライブラリで、スタイルが提供されていないヘッドレスではありますが様々なカスタマイズができるようになっています。 Radix UI の Dialog コンポーネントをベースに作られているため、Radix UI で利用可能な APIをそのまま利用することができます。 基本的な実装 Vaul を使って、基本的なハーフモーダルを実装してみます。 まずは np