Sheet

Sheet is a bottom panel overlay that slides up from the viewport bottom. Includes a drag handle for swipe-to-dismiss support.

Basic Usage

import { Sheet, SheetHandle, SheetHeader, SheetBody } from "@paramanu/overlays-react"

export default function App() {
return (
  <Sheet open onClose={() => {}}>
    <SheetHandle />
    <SheetHeader>Sheet Title</SheetHeader>
    <SheetBody>Content here.</SheetBody>
  </Sheet>
)
}

<div class="pm-sheet pm-sheet--md" role="dialog">
<div class="pm-sheet__handle"></div>
<div class="pm-sheet__header">Sheet Title</div>
<div class="pm-sheet__body">Content here.</div>
</div>

Accessibility

Uses role="dialog" for screen reader support.
Dismissible via swipe gesture, backdrop click, or Escape key.

Props

Prop	Type	Default	Description
`open`	`boolean`	`false`	Visibility
`onClose`	`() => void`	-	Close callback
`size`	`"sm" \| "md" \| "lg" \| "full"`	`"md"`	Max-height
`dismissible`	`boolean`	`true`	Swipe-to-dismiss