docs: add Label docs

packages/react/src/App.tsx

@@ -30,6 +30,9 @@ import ComponentsDialog, {
 import ComponentsDrawer, {
   tableOfContents as componentsDrawerToc,
 } from "./docs/components/Drawer.mdx";
+import ComponentsLabel, {
+  tableOfContents as componentsLabelToc,
+} from "./docs/components/Label.mdx";
 import ComponentsTabs, {
   tableOfContents as componentsTabsToc,
 } from "./docs/components/Tabs.mdx";
@@ -177,6 +180,14 @@ const router = createBrowserRouter(
               </DynamicLayout>
             }
           />
+          <Route
+            path="label"
+            element={
+              <DynamicLayout toc={componentsLabelToc}>
+                <ComponentsLabel components={overrideComponents} />
+              </DynamicLayout>
+            }
+          />
           <Route
             path="tabs"
             element={

packages/react/src/RouteObject.ts

@@ -50,6 +50,11 @@ export default {
         name: "Drawer",
         eq: (pathname: string) => pathname === "/docs/components/drawer"
       },
+      {
+        path: "/docs/components/label",
+        name: "Label",
+        eq: (pathname: string) => pathname === "/docs/components/label"
+      },
       {
         path: "/docs/components/tabs",
         name: "Tabs",

packages/react/src/docs/components/Label.mdx

@@ -0,0 +1,125 @@
+import {
+    TabProvider, TabTrigger, TabContent, TabList
+} from "@components/Tabs";
+import { Story } from "@/components/Story";
+import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { LabelDemo } from "./LabelBlocks/Preview";
+import Examples from "./LabelBlocks/Examples"
+
+# Label
+A wrapper that used to tag and describe form elements clearly and accessibly.
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <LabelDemo />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Preview.tsx`} />
+    </TabContent>
+</TabProvider>
+
+## Installation
+
+1. Create a new file `Label.tsx` in your component folder.
+2. Copy and paste the following code into the file.
+
+<LoadedCode from={`${GITHUB}/packages/react/components/Label.tsx`} />
+
+## Usage
+
+```tsx
+import { Label } from "@components/Label"
+```
+
+```html
+<Label>
+    <input />
+</Label>
+
+<Label htmlFor="input">Label</Label>
+<input id="input" />
+```
+
+## Props
+
+### Variants
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `direction` | `"vertical" \| "horizontal"` | `"vertical"` | The direction of the label. |
+
+## Examples
+
+### Vertical
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <Examples.Vertical />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Vertical.tsx`} />
+    </TabContent>
+</TabProvider>
+
+### Horizontal
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <Examples.Horizontal />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Horizontal.tsx`} />
+    </TabContent>
+</TabProvider>
+
+### Invalid
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <Examples.Invalid />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Invalid.tsx`} />
+    </TabContent>
+</TabProvider>
+
+### Disabled
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <Examples.Disabled />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/LabelBlocks/Examples/Disabled.tsx`} />
+    </TabContent>
+</TabProvider>

packages/react/src/docs/components/LabelBlocks/Examples/Disabled.tsx

@@ -0,0 +1,11 @@
+import { Label } from "@components/Label";
+import { Input } from "@components/Input";
+
+export function Disabled() {
+  return (
+    <Label direction="vertical">
+      <span>Email</span>
+      <Input type="email" disabled />
+    </Label>
+  );
+}

packages/react/src/docs/components/LabelBlocks/Examples/Horizontal.tsx

@@ -0,0 +1,11 @@
+import { Label } from "@components/Label";
+import { Checkbox } from "@components/Checkbox";
+
+export function Horizontal() {
+  return (
+    <Label direction="horizontal">
+      <Checkbox />
+      <span>Checkbox</span>
+    </Label>
+  );
+}

packages/react/src/docs/components/LabelBlocks/Examples/Invalid.tsx

@@ -0,0 +1,11 @@
+import { Label } from "@components/Label";
+import { Input } from "@components/Input";
+
+export function Invalid() {
+  return (
+    <Label direction="vertical">
+      <span>Email</span>
+      <Input type="email" invalid="Invalid Email" />
+    </Label>
+  );
+}

packages/react/src/docs/components/LabelBlocks/Examples/Vertical.tsx

@@ -0,0 +1,11 @@
+import { Label } from "@components/Label";
+import { Input } from "@components/Input";
+
+export function Vertical() {
+  return (
+    <Label direction="vertical">
+      <span>Email</span>
+      <Input type="email" />
+    </Label>
+  );
+}

packages/react/src/docs/components/LabelBlocks/Examples/index.ts

@@ -0,0 +1,12 @@
+import { Vertical } from "./Vertical";
+import { Horizontal } from "./Horizontal";
+import { Invalid } from "./Invalid";
+import { Disabled } from "./Disabled";
+
+export default {
+  Vertical,
+  Horizontal,
+  Invalid,
+  Disabled,
+};
+

packages/react/src/docs/components/LabelBlocks/Preview.tsx

@@ -0,0 +1,11 @@
+import { Label } from "@components/Label";
+import { Input } from "@components/Input";
+
+export function LabelDemo() {
+  return (
+    <Label direction="vertical">
+      <span>Email</span>
+      <Input type="email" />
+    </Label>
+  );
+}