From efac10d91b19ac063b68b727a30893cafd6e0cfb Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Sun, 2 Jun 2024 03:24:13 +0900
Subject: [PATCH] feat: add Checkbox docs

---
 .../react/src/docs/components/Checkbox.mdx    | 131 ++++++++++++++++++
 1 file changed, 131 insertions(+)
 create mode 100644 packages/react/src/docs/components/Checkbox.mdx

diff --git a/packages/react/src/docs/components/Checkbox.mdx b/packages/react/src/docs/components/Checkbox.mdx
new file mode 100644
index 0000000..2842fa2
--- /dev/null
+++ b/packages/react/src/docs/components/Checkbox.mdx
@@ -0,0 +1,131 @@
+import { Button } from "@components/Button";
+import { Label } from "@components/Label";
+import { Checkbox } from "@components/Checkbox";
+import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
+import { Story } from "@/components/Story";
+import { LoadedCode } from "@/components/LoadedCode";
+
+# Checkbox
+A control that allows the user to toggle between checked and not checked.
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <Label direction="horizontal">
+                <Checkbox />
+                <span>Checkbox</span>
+            </Label>
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        ```tsx
+        import { Label } from "@components/Label";
+        import { Checkbox } from "@components/Checkbox";
+
+        export function CheckboxExample() {
+            return (
+                <Label direction="horizontal">
+                    <Checkbox />
+                    <span>Checkbox</span>
+                </Label>
+            );
+        }
+        ```
+    </TabContent>
+</TabProvider>
+
+## Installation
+
+1. Create a new file `Checkbox.mdx` in your component folder.
+2. Copy and paste the following code into the file.
+
+<LoadedCode from="https://raw.githubusercontent.com/p-sw/ui/main/packages/react/components/Checkbox.tsx" />
+
+## Usage
+
+```tsx
+import { Checkbox } from "@components/Checkbox";
+```
+
+```html
+<Checkbox />
+```
+
+### Props
+
+#### Variants
+
+| Prop | Type | Default | Description |
+| :---- | :---- | :------- | :----------- |
+| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox |
+
+## Examples
+
+### Text
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <Label direction="horizontal">
+                <Checkbox size="base" />
+                <p>Agree terms and conditions</p>
+            </Label>
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        ```tsx
+        import { Label } from "@components/Label";
+        import { Checkbox } from "@components/Checkbox";
+
+        export function CheckboxExample() {
+            return (
+                <Label direction="horizontal">
+                    <Checkbox size="base" />
+                    <span>Agree terms and conditions</span>
+                </Label>
+            );
+        }
+        ```
+    </TabContent>
+</TabProvider>
+
+### Disabled
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <Label direction="horizontal">
+                <Checkbox size="base" disabled />
+                <span>Agree terms and conditions</span>
+            </Label>
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        ```tsx
+        import { Label } from "@components/Label";
+        import { Checkbox } from "@components/Checkbox";
+
+        export function CheckboxExample() {
+            return (
+                <Label direction="horizontal">
+                    <Checkbox size="base" disabled />
+                    <span>Agree terms and conditions</span>
+                </Label>
+            );
+        }
+        ```
+    </TabContent>
+</TabProvider>
+