Initial commit

docs/components/drawer.md

@@ -0,0 +1,81 @@
+- Home
+- Components
+- Drawer
+
+# Drawer
+
+A drawer component for React.
+
+## Props
+
+### Drawer
+
+
+Prop	Type	Default	Description
+...Vaul props	ComponentProps<typeof DrawerPrimitive.Root>	-	All Vaul drawer root props
+
+### Drawer Root
+
+
+Prop	Type	Default	Description
+direction	'top' | 'right' | 'bottom' | 'left'	'bottom'	Which edge to slide from
+...Vaul props	ComponentProps<typeof DrawerPrimitive.Root>	-	All Vaul root props
+
+### DrawerContent
+
+
+Prop	Type	Default	Description
+...Vaul props	ComponentProps<typeof DrawerPrimitive.Content>	-	All Vaul content props
+
+Other parts (DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose) are styled wrappers around Vaul components.
+
+## Usage
+
+```
+<Drawer>
+  <DrawerTrigger asChild>
+    <Button variant="outline">Open</Button>
+  </DrawerTrigger>
+  <DrawerContent onOpenAutoFocus={(e) => {
+    e.preventDefault();
+  }}>
+    <DrawerHeader>
+      <DrawerTitle>Edit profile</DrawerTitle>
+      <DrawerDescription>
+        Make changes to your profile here. Click save when you&apos;re done.
+      </DrawerDescription>
+    </DrawerHeader>
+    <div className="grid flex-1 auto-rows-min gap-4">
+      <div className="grid gap-3">
+        <label className="text-[12px]" htmlFor="sheet-demo-name">Name</label>
+        <InputRoot id="sheet-demo-name" defaultValue="Pedro Duarte" />
+      </div>
+      <div className="grid gap-3">
+        <label className="text-[12px]" htmlFor="sheet-demo-username">Username</label>
+        <InputRoot id="sheet-demo-username" defaultValue="@peduarte" />
+      </div>
+    </div>
+    <DrawerFooter>
+      <Button variant="primary">Save</Button>
+      <SheetClose asChild>
+        <Button variant="secondary">Close</Button>
+      </SheetClose>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>
+```
+
+### Example
+
+```
+<Drawer>
+  <DrawerTrigger asChild><Button>Open</Button></DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Title</DrawerTitle>
+      <DrawerDescription>Description</DrawerDescription>
+    </DrawerHeader>
+  </DrawerContent>
+</Drawer>
+```
+