var Component=(()=>{var w=Object.create;var s=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var g=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),x=(r,e)=>{for(var t in e)s(r,t,{get:e[t],enumerable:!0})},i=(r,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of l(e))!u.call(r,o)&&o!==t&&s(r,o,{get:()=>e[o],enumerable:!(a=D(e,o))||a.enumerable});return r};var y=(r,e,t)=>(t=r!=null?w(h(r)):{},i(e||!r||!r.__esModule?s(t,"default",{value:r,enumerable:!0}):t,r)),f=r=>i(s({},"__esModule",{value:!0}),r);var p=g((j,d)=>{d.exports=_jsx_runtime});var B={};x(B,{default:()=>N,frontmatter:()=>C});var n=y(p()),C={title:"Drawer",description:"A triggerable drawer that overlaps whatever page it's on.",component:!0};function c(r){let e=Object.assign({span:"span",h2:"h2",hr:"hr",pre:"pre",code:"code"},r.components),{ComponentExample:t,ComponentReference:a}=e;return t||m("ComponentExample",!0),a||m("ComponentReference",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t,{name:"drawer-demo",children:(0,n.jsx)(e.span,{__src__:"src/examples/drawer-demo.tsx",code:`import { Button, Drawer, Text } from "@medusajs/ui" export function DrawerDemo() { return ( Edit Variant This is where you edit the variant's details ) }`})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:`import { Drawer } from "@medusajs/ui" `})}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:` Trigger Drawer Title Body Footer `})}),` `,(0,n.jsx)(e.h2,{id:"api-reference",children:"API Reference"}),` `,(0,n.jsx)(e.hr,{}),` `,(0,n.jsx)(a,{mainComponent:"Drawer",specsSrc:'[{"description":"","methods":[],"displayName":"Drawer.Body","props":{}},{"description":"","methods":[],"displayName":"Drawer.Close","props":{}},{"description":"","methods":[],"displayName":"Drawer.Content","props":{}},{"description":"","methods":[],"displayName":"Drawer.Description","props":{}},{"description":"","methods":[],"displayName":"Drawer.Footer","props":{}},{"description":"","methods":[],"displayName":"Drawer.Header","props":{}},{"description":"","methods":[],"displayName":"Drawer.Overlay","props":{}},{"description":"","methods":[],"displayName":"Drawer.Portal","props":{}},{"description":"","methods":[],"displayName":"Drawer.Title","props":{}},{"description":"","methods":[],"displayName":"Drawer.Trigger","props":{}},{"description":"This component is based on the [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog) primitives.","methods":[],"displayName":"Drawer","props":{}}]'})]})}function T(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,Object.assign({},r,{children:(0,n.jsx)(c,r)})):c(r)}var N=T;function m(r,e){throw new Error("Expected "+(e?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(B);})(); ;return Component;

Drawer

Usage#

API Reference#