docs: add input docs

packages/react/src/App.tsx

@@ -30,6 +30,9 @@ import ComponentsDialog, {
 import ComponentsDrawer, {
   tableOfContents as componentsDrawerToc,
 } from "./docs/components/Drawer.mdx";
+import ComponentsInput, {
+  tableOfContents as componentsInputToc,
+} from "./docs/components/Input.mdx";
 import ComponentsLabel, {
   tableOfContents as componentsLabelToc,
 } from "./docs/components/Label.mdx";
@@ -186,6 +189,14 @@ const router = createBrowserRouter(
               </DynamicLayout>
             }
           />
+          <Route
+            path="input"
+            element={
+              <DynamicLayout toc={componentsInputToc}>
+                <ComponentsInput components={overrideComponents} />
+              </DynamicLayout>
+            }
+          />
           <Route
             path="label"
             element={

packages/react/src/RouteObject.ts

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

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

@@ -0,0 +1,123 @@
+import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
+import { Story } from "@/components/Story";
+import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { InputDemo } from "./InputBlocks/Preview";
+import { InputFrameDemo } from "./InputFrameBlocks/Preview";
+import InputExamples from "./InputBlocks/Examples";
+
+# Input
+Element that captures user's input.
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <InputDemo />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/Preview.tsx`} />
+    </TabContent>
+</TabProvider>
+
+## Installation
+
+1. Create a new file `Input.tsx` in your component folder.
+2. Copy and paste the following code into the file.
+
+<LoadedCode from={`${GITHUB}/packages/react/components/Input.tsx`} />
+
+## Usage
+
+```tsx
+import { Input } from "@components/Input";
+```
+
+```html
+<Input type="text" />
+```
+
+## Props
+
+### Variants
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| `unstyled` | `boolean` | `false` | Remove style of input, so it can be real transparent input. Mostly used with InputFrame. |
+| `full` | `boolean` | `false` | Make input take full width of its container. |
+
+## Examples
+
+### Invalid
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <InputExamples.Invalid />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/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">
+            <InputExamples.Disabled />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputBlocks/Examples/Disabled.tsx`} />
+    </TabContent>
+</TabProvider>
+
+# InputFrame
+Label with input's style.
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <InputFrameDemo />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/InputFrameBlocks/Preview.tsx`} />
+    </TabContent>
+</TabProvider>
+
+## Installation
+
+**Included in `Input.tsx`.**
+
+## Usage
+
+```tsx
+import {
+    Input,
+    InputFrame,
+} from "@components/Input";
+```
+
+```html
+<InputFrame>
+    <Input type="text" unstyled />
+</InputFrame>
+```

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

@@ -0,0 +1,5 @@
+import { Input } from "@components/Input";
+
+export function Disabled() {
+  return <Input type="text" disabled />;
+}

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

@@ -0,0 +1,5 @@
+import { Input } from "@components/Input";
+
+export function Invalid() {
+  return <Input type="text" invalid="Invalid Input" />;
+}

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

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

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

@@ -0,0 +1,5 @@
+import { Input } from "@components/Input";
+
+export function InputDemo() {
+  return <Input type="text" />;
+}

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

@@ -0,0 +1,23 @@
+import { Button } from "@components/Button";
+import { Input, InputFrame } from "@components/Input";
+
+export function InputFrameDemo() {
+  return (
+    <InputFrame>
+      <Input type="text" unstyled />
+      <Button preset="success" size="icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1.2em"
+          height="1.2em"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5l-1.5 1.5l-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5"
+          />
+        </svg>
+      </Button>
+    </InputFrame>
+  );
+}