Initial commit

docs/components/sheet.md

@@ -0,0 +1,77 @@
+- Home
+- Components
+- Sheet
+
+# Sheet
+
+Extends the Dialog component to display content that complements the main content of the screen.
+
+## Props
+
+### Sheet
+
+
+Prop	Type	Default	Description
+...Radix props	ComponentProps<typeof SheetPrimitive.Root>	-	All Radix Dialog root props
+
+### SheetContent
+
+
+Prop	Type	Default	Description
+side	'top' | 'right' | 'bottom' | 'left'	'right'	Which edge to slide from
+...Radix props	ComponentProps<typeof SheetPrimitive.Content>	-	All Radix content props
+
+Other parts (SheetTrigger, SheetClose, SheetHeader, SheetFooter, SheetTitle, SheetDescription) are styled wrappers around Radix components.
+
+### Example
+
+```
+<Sheet>
+  <SheetTrigger asChild>
+    <Button>Open</Button>
+  </SheetTrigger>
+  <SheetContent side="left">
+    <SheetHeader>
+      <SheetTitle>Title</SheetTitle>
+      <SheetDescription>Optional description</SheetDescription>
+    </SheetHeader>
+  </SheetContent>
+</Sheet>
+```
+
+## Usage
+
+```
+<Sheet>
+  <SheetTrigger asChild>
+    <Button variant="outline">Open</Button>
+  </SheetTrigger>
+  <SheetContent onOpenAutoFocus={(e) => {
+    e.preventDefault();
+  }}>
+    <SheetHeader>
+      <SheetTitle>Edit profile</SheetTitle>
+      <SheetDescription>
+        Make changes to your profile here. Click save when you&apos;re done.
+      </SheetDescription>
+    </SheetHeader>
+    <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>
+    <SheetFooter>
+      <Button variant="primary">Save</Button>
+      <SheetClose asChild>
+        <Button variant="secondary">Close</Button>
+      </SheetClose>
+    </SheetFooter>
+  </SheetContent>
+</Sheet>
+```
+