{"name":"sheet","title":"Sheet","description":"Extends the Dialog component to display content that complements the main content of the screen.","installCommand":"bunx marko-ui add sheet -y","usageTags":"<Sheet>","importSnippet":"import Sheet from \"@/components/ui/sheet/sheet.marko\";","usageSnippet":"<Sheet>\n  <@trigger|props|>\n    <button ...props>Open</button>\n  </@trigger>\n  <@title>Edit profile</@title>\n  <@description>\n    Make changes to your profile here. Click save when you're done.\n  </@description>\n  ...\n</Sheet>","tags":["Sheet"],"parts":[{"name":"description"},{"name":"footer"},{"name":"title"},{"name":"trigger","param":"Record<string, unknown>"}],"props":[{"name":"aria-label","type":"string | undefined","required":false,"description":"Human readable label for the dialog, in event the dialog title is not rendered"},{"name":"closeOnEscape","type":"boolean | undefined","required":false,"default":"true","description":"Whether to close the dialog when the escape key is pressed"},{"name":"closeOnInteractOutside","type":"boolean | undefined","required":false,"default":"true","description":"Whether to close the dialog when the outside is clicked"},{"name":"defaultOpen","type":"boolean | undefined","required":false,"default":"false","description":"The initial open state of the dialog when rendered.\nUse when you don't need to control the open state of the dialog."},{"name":"defaultTriggerValue","type":"string | null | undefined","required":false,"description":"The initial active trigger value when rendered.\nUse when you don't need to control the active trigger value."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"finalFocusEl","type":"(() => MaybeElement) | undefined","required":false,"description":"Element to receive focus when the dialog is closed"},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the dialog. Useful for composition."},{"name":"initialFocusEl","type":"(() => MaybeElement) | undefined","required":false,"description":"Element to receive focus when the dialog is opened"},{"name":"modal","type":"boolean | undefined","required":false,"default":"true","description":"Whether to prevent pointer interaction outside the element and hide all content below it"},{"name":"open","type":"boolean | undefined","required":false,"description":"The controlled open state of the dialog"},{"name":"persistentElements","type":"(() => Element | null)[] | undefined","required":false,"description":"Returns the persistent elements that:\n- should not have pointer-events disabled\n- should not trigger the dismiss event"},{"name":"preventScroll","type":"boolean | undefined","required":false,"default":"true","description":"Whether to prevent scrolling behind the dialog when it's opened"},{"name":"restoreFocus","type":"boolean | undefined","required":false,"description":"Whether to restore focus to the element that had focus before the dialog was opened"},{"name":"role","type":"'dialog' | 'alertdialog' | undefined","required":false,"fixed":"dialog","description":"The dialog's role"},{"name":"showCloseButton","type":"boolean","required":false,"description":"Show the top-right close button. Defaults to true."},{"name":"side","type":"'bottom' | 'top' | 'right' | 'left'","required":false,"description":"`\"top\" | \"right\" | \"bottom\" | \"left\"` — which edge the sheet slides in from."},{"name":"trapFocus","type":"boolean | undefined","required":false,"default":"true","description":"Whether to trap focus inside the dialog when it's opened"},{"name":"triggerValue","type":"string | null | undefined","required":false,"description":"The controlled active trigger value"}],"events":[{"name":"onEscapeKeyDown","arg":"KeyboardEvent","description":"Function called when the escape key is pressed"},{"name":"onFocusOutside","arg":"FocusOutsideEvent","description":"Function called when the focus is moved outside the component"},{"name":"onInteractOutside","arg":"InteractOutsideEvent","description":"Function called when an interaction happens outside the component"},{"name":"onOpenChange","arg":"OpenChangeDetails","description":"Function to call when the dialog's open state changes"},{"name":"onPointerDownOutside","arg":"PointerDownOutsideEvent","description":"Function called when the pointer is pressed down outside the component"},{"name":"onRequestDismiss","arg":"LayerDismissEvent","description":"Function called when this layer is closed due to a parent layer being closed"},{"name":"onTriggerValueChange","arg":"TriggerValueChangeDetails","description":"Function to call when the active trigger changes"},{"name":"openChange","arg":"boolean"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"sheet-demo","title":"Default","source":"import Sheet from \"@marko-ui/shadcn/ui/sheet/sheet.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Label from \"@marko-ui/shadcn/ui/label/label.marko\";\n\n<Sheet>\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"outline\">Open</Button>\n  </@trigger>\n  <@title>Edit profile</@title>\n  <@description>Make changes to your profile here. Click save when you're done.</@description>\n  <div class=\"grid gap-4\">\n    <div class=\"grid gap-2\">\n      <Label for=\"sheet-name\">Name</Label>\n      <TextInput id=\"sheet-name\" name=\"name\" value=\"Pedro Duarte\"/>\n    </div>\n    <div class=\"grid gap-2\">\n      <Label for=\"sheet-username\">Username</Label>\n      <TextInput id=\"sheet-username\" name=\"username\" value=\"@peduarte\"/>\n    </div>\n  </div>\n  <@footer>\n    <Button type=\"submit\">Save changes</Button>\n    <Button type=\"button\" variant=\"outline\">Close</Button>\n  </@footer>\n</Sheet>","description":"A sheet for editing profile details, sliding in from the right."},{"id":"sheet-side","title":"Side","source":"import Sheet from \"@marko-ui/shadcn/ui/sheet/sheet.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<div class=\"flex flex-wrap items-center gap-2\">\n  <Sheet side=\"top\">\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">Top</Button>\n    </@trigger>\n    <@title>Top sheet</@title>\n    <@description>Slides in from the top edge of the screen.</@description>\n  </Sheet>\n  <Sheet side=\"right\">\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">Right</Button>\n    </@trigger>\n    <@title>Right sheet</@title>\n    <@description>Slides in from the right edge of the screen.</@description>\n  </Sheet>\n  <Sheet side=\"bottom\">\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">Bottom</Button>\n    </@trigger>\n    <@title>Bottom sheet</@title>\n    <@description>Slides in from the bottom edge of the screen.</@description>\n  </Sheet>\n  <Sheet side=\"left\">\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">Left</Button>\n    </@trigger>\n    <@title>Left sheet</@title>\n    <@description>Slides in from the left edge of the screen.</@description>\n  </Sheet>\n</div>","description":"Pass `side` to set which edge of the screen the sheet slides in from: `top`, `right`, `bottom`, or `left`."},{"id":"sheet-no-close-button","title":"No Close Button","source":"import Sheet from \"@marko-ui/shadcn/ui/sheet/sheet.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Sheet showCloseButton=false>\n  <@trigger|props|>\n    <Button type=\"button\" ...props variant=\"outline\">Open Sheet</Button>\n  </@trigger>\n  <@title>No Close Button</@title>\n  <@description>This sheet doesn't have a close button in the top-right corner. Click outside to close.</@description>\n</Sheet>","description":"Pass `showCloseButton={false}` to hide the close button in the top-right corner. Click outside, or provide your own `@footer` action, to close."},{"id":"sheet-rtl","title":"RTL","source":"import Sheet from \"@marko-ui/shadcn/ui/sheet/sheet.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Label from \"@marko-ui/shadcn/ui/label/label.marko\";\n\n<div dir=\"rtl\">\n  <Sheet dir=\"rtl\" side=\"left\">\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">فتح</Button>\n    </@trigger>\n    <@title>تعديل الملف الشخصي</@title>\n    <@description>قم بإجراء تغييرات على ملفك الشخصي هنا. انقر حفظ عند الانتهاء.</@description>\n    <div class=\"grid gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"sheet-rtl-name\">الاسم</Label>\n        <TextInput id=\"sheet-rtl-name\" name=\"name\" value=\"Pedro Duarte\"/>\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"sheet-rtl-username\">اسم المستخدم</Label>\n        <TextInput id=\"sheet-rtl-username\" name=\"username\" value=\"peduarte\"/>\n      </div>\n    </div>\n    <@footer>\n      <Button type=\"submit\">حفظ التغييرات</Button>\n      <Button type=\"button\" variant=\"outline\">إغلاق</Button>\n    </@footer>\n  </Sheet>\n</div>","description":"The `dir` prop is a native attribute pass-through — set it on `<Sheet>` to flip logical-property layout and typography for right-to-left languages. Every RTL example on this site does it the same way: a `dir=\"rtl\"` wrapper plus Arabic labels."},{"id":"sheet-controlled","title":"Controlled","source":"import Sheet from \"@marko-ui/shadcn/ui/sheet/sheet.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<let/open=false/>\n\n<div class=\"flex items-center gap-4\">\n  <Sheet\n    open=open\n    openChange=(next) => { open = next; }\n  >\n    <@trigger|props|>\n      <Button type=\"button\" ...props variant=\"outline\">Open controlled sheet</Button>\n    </@trigger>\n    <@title>Controlled sheet</@title>\n    <@description>This sheet's open state is held in the parent and can be toggled from outside too.</@description>\n  </Sheet>\n  <span class=\"text-sm text-muted-foreground\">open: ${String(open)}</span>\n</div>","description":"Zag machines are controlled: an `open` prop without a change handler never moves. Pair it with `openChange`."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{},"nativeAttributes":"div","composition":"`Sheet` composes its anatomy from attr-tags (plus its own default body) instead of separate components:\n\n```text\nSheet\n├── @trigger   — render prop; spread the given props onto your own trigger element\n├── @title     — heading text, wired to the dialog's aria-labelledby\n├── @description — supporting text, wired to the dialog's aria-describedby\n├── (body)     — the scrollable content\n└── @footer    — optional actions row, e.g. Save / Close buttons\n```\n\nThere is no separate close-button slot: the close button is rendered automatically (see `showCloseButton`)."}