Initial commit

docs/components/modal.md

@@ -0,0 +1,88 @@
+- Home
+- Components
+- Modal
+
+# Modal
+
+A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+
+## Props
+
+### Modal
+
+
+Prop	Type	Default	Description
+...Radix props	ComponentProps<typeof DialogPrimitive.Root>	-	All Radix Dialog root props
+
+### ModalContent
+
+
+Prop	Type	Default	Description
+showCloseButton	boolean	true	Whether to render the built-in close button
+...Radix props	ComponentProps<typeof DialogPrimitive.Content>	-	All Radix content props
+
+Other parts (ModalTrigger, ModalOverlay, ModalPortal, ModalHeader, ModalTitle, ModalDescription, ModalFooter, ModalClose) are thin wrappers over corresponding Radix components with styling.
+
+### Example
+
+```
+<Modal>
+  <ModalTrigger asChild>
+    <Button>Open</Button>
+  </ModalTrigger>
+  <ModalContent showCloseButton>
+    <ModalHeader>
+      <ModalTitle>Title</ModalTitle>
+      <ModalDescription>Description</ModalDescription>
+    </ModalHeader>
+    <ModalFooter>
+      <ModalClose asChild><Button variant="secondary">Close</Button></ModalClose>
+      <Button>Confirm</Button>
+    </ModalFooter>
+  </ModalContent>
+  
+</Modal>
+```
+
+## Usage
+
+```
+<Modal>
+  <ModalTrigger asChild>
+    <Button variant="primary">Open Modal</Button>
+  </ModalTrigger>
+  <ModalContent onOpenAutoFocus={(e) => {
+    e.preventDefault();
+  }}>
+    <ModalHeader>
+      <ModalTitle>Edit Profile</ModalTitle>
+      <ModalDescription>Update your personal information. Click Save to complete the changes.</ModalDescription>
+    </ModalHeader>
+    <div className="grid gap-4 py-4">
+      <div className="grid grid-cols-6 items-center gap-2">
+        <label htmlFor="name" className="text-left text-sm font-medium">Name</label>
+        <InputRoot
+          id="name"
+          defaultValue="Jason"
+          className="col-span-5 px-3 py-2"
+        />
+      </div>
+      <div className="grid grid-cols-6 items-center gap-2">
+        <label htmlFor="name" className="text-left text-sm font-medium">Mail</label>
+        <InputRoot
+          id="email"
+          defaultValue="jason@example.com"
+          className="col-span-5 px-3 py-2"
+        />
+      </div>
+    </div>
+    <ModalFooter>
+      <ModalClose asChild>
+        <Button variant="secondary">cancel</Button>
+      </ModalClose>
+      <Button>save</Button>
+    </ModalFooter>
+  </ModalContent>
+</Modal>
+```
+