feat(component): add new input component

apps/www/components/preview/index.tsx

@@ -5,6 +5,7 @@ import { Button } from "ruru-ui/components/button";
 import { Spinner } from "ruru-ui/components/spinner";
 import { Avatar } from "ruru-ui/components/avatar";
 import { Checkbox } from "ruru-ui/components/checkbox";
+import { Input } from "ruru-ui/components/input";
 import {
   Tooltip,
   TooltipContent,
@@ -13,6 +14,7 @@ import {
 } from "ruru-ui/components/tooltip";
 
 import { BadgePreview } from "../badgePreview";
+import { PersonIcon } from "@radix-ui/react-icons";
 
 export default {
   button: (
@@ -88,4 +90,15 @@ export default {
       </div>
     </Wrapper>
   ),
+  input: (
+    <Wrapper>
+      <div className="flex items-center justify-center gap-4">
+        <Input
+          prefix={"https://"}
+          suffix={".com"}
+          placeholder="Enter your domain name"
+        />
+      </div>
+    </Wrapper>
+  ),
 } as Record<string, ReactNode>;

apps/www/content/docs/components/input.mdx

@@ -0,0 +1,247 @@
+---
+title: Input
+description: The Input component is used to get user input.
+preview: input
+---
+
+import { Input, SearchInput } from "ruru-ui/components/input";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+## Usage
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab className={"flex justify-center"} value="Preview" >
+    <Input placeholder="Enter text" />
+  </Tab>
+  <Tab className={"-mt-8"} value="Code">
+    ```tsx
+    import { Input } from "ruru-ui/components/input";
+
+    export function InputDemo() {
+      return <Input placeholder="Enter text" />;
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+## Variants
+
+### Default Input
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview" >
+<Input placeholder="Enter text" />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+```tsx
+import { Input } from "ruru-ui/components/input";
+
+export function DefaultInputDemo() {
+  return <Input placeholder="Enter text" />;
+}
+```
+ </Tab>
+</Tabs>
+
+### Input with Label
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab className={"flex justify-center"} value="Preview" >
+    <Input label="Email" placeholder="Enter your email" />
+  </Tab>
+  <Tab className={"-mt-8"} value="Code">
+    ```tsx
+    import { Input } from "ruru-ui/components/input";
+
+    export function LabelInputDemo() {
+      return <Input label="Email" placeholder="Enter your email" />;
+    }
+
+    ```
+
+  </Tab>
+</Tabs>
+
+### Input with Prefix and Suffix
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab className={"flex justify-center gap-5"} value="Preview" >
+    <Input prefix="@" placeholder="Username" />
+  <Input suffix=".com" placeholder="Website" />
+  </Tab>
+  <Tab className={"-mt-8"} value="Code">
+    ```tsx
+    import { Input } from "ruru-ui/components/input";
+
+    export function PrefixSuffixInputDemo() {
+      return (
+        <div className={"flex justify-center gap-5"}>
+          <Input prefix="@" placeholder="Username" />
+          <Input suffix=".com" placeholder="Website" />
+        </div>
+      );
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+### Input with Error Message
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab className={"flex justify-center"} value="Preview" >
+    <Input error="Invalid input" placeholder="Enter text" />
+  </Tab>
+  <Tab className={"-mt-8"} value="Code">
+    ```tsx
+    import { Input } from "ruru-ui/components/input";
+
+    export function ErrorInputDemo() {
+      return <Input error="Invalid input" placeholder="Enter text" />;
+    }
+
+    ```
+
+  </Tab>
+</Tabs>
+
+### Search Input
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab className={"flex justify-center"} value="Preview" >
+    <SearchInput placeholder="Search..." />
+  </Tab>
+  <Tab className={"-mt-8"} value="Code">
+    ```tsx
+    import { SearchInput } from "ruru-ui/components/input";
+
+    export function SearchInputDemo() {
+      return <SearchInput placeholder="Search..." />;
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+## Props
+
+### Input
+
+| Name              | Type                              | Default     | Description                                                    |
+| ----------------- | --------------------------------- | ----------- | -------------------------------------------------------------- |
+| **className**     | **string**                        | `""`        | Additional class names for the container.                      |
+| **iclassName**    | **string**                        | `""`        | Additional class names for the input element.                  |
+| **prefix**        | **React.ReactNode** or **string** | `undefined` | Node or string to render as prefix inside the input container. |
+| **suffix**        | **React.ReactNode** or **string** | `undefined` | Node or string to render as suffix inside the input container. |
+| **prefixStyling** | **boolean**                       | `true`      | Flag to apply styling to the prefix.                           |
+| **suffixStyling** | **boolean**                       | `true`      | Flag to apply styling to the suffix.                           |
+| **label**         | **string**                        | `undefined` | Label for the input element.                                   |
+| **error**         | **string**                        | `""`        | Error message to display below the input.                      |
+
+### SearchInput
+
+| Name                  | Type      | Default | Description                          |
+| --------------------- | --------- | ------- | ------------------------------------ |
+| `enablePrefixStyling` | `boolean` | `false` | Flag to apply styling to the prefix. |
+
+## Examples
+
+### Default Input Example
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab className={"flex justify-center"} value="Preview" >
+    <Input placeholder="Enter text" />
+  </Tab>
+    <Tab className={"-mt-8"} value="Code">
+    ```tsx
+    import { Input } from "ruru-ui/components/input";
+
+    export function DefaultInputExample() {
+      return <Input placeholder="Enter text" />;
+    }
+
+    ```
+
+  </Tab>
+</Tabs>
+
+### Input with Label Example
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab className={"flex justify-center"} value="Preview" >
+    <Input label="Email" placeholder="Enter your email" />
+  </Tab>
+  <Tab className={"-mt-8"} value="Code">
+    ```tsx
+    import { Input } from "ruru-ui/components/input";
+
+    export function LabelInputExample() {
+      return <Input label="Email" placeholder="Enter your email" />;
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+### Input with Prefix and Suffix Example
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab className={"flex justify-center gap-5"} value="Preview" >
+    <Input prefix="@" placeholder="Username" />
+  <Input suffix=".com" placeholder="Website" />
+  </Tab>
+  <Tab className={"-mt-8"} value="Code">
+    ```tsx
+    import { Input } from "ruru-ui/components/input";
+
+    export function PrefixSuffixInputExample() {
+      return (
+        <div className={"flex justify-center gap-5"}>
+          <Input prefix="@" placeholder="Username" />
+          <Input suffix=".com" placeholder="Website" />
+        </div>
+      );
+    }
+
+    ```
+
+  </Tab>
+</Tabs>
+
+### Input with Error Message Example
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab className={"flex justify-center"} value="Preview" >
+    <Input error="Invalid input" placeholder="Enter text" />
+  </Tab>
+  <Tab className={"-mt-8"} value="Code">
+    ```tsx
+    import { Input } from "ruru-ui/components/input";
+
+    export function ErrorInputExample() {
+      return <Input error="Invalid input" placeholder="Enter text" />;
+    }
+    ```
+
+  </Tab>
+</Tabs>
+
+### Search Input Example
+
+<Tabs items={["Preview", "Code"]}>
+  <Tab className={"flex justify-center"} value="Preview" >
+    <SearchInput placeholder="Search..." />
+  </Tab>
+  <Tab className={"-mt-8"} value="Code">
+    ```tsx
+    import { SearchInput } from "ruru-ui/components/input";
+
+    export function SearchInputExample() {
+      return <SearchInput placeholder="Search..." />;
+    }
+
+    ```
+
+  </Tab>
+</Tabs>

packages/ui/package.json

@@ -42,6 +42,10 @@
     "./provider": {
       "import": "./dist/provider/index.js",
       "types": "./dist/provider/index.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/utils/cn.js",
+      "types": "./dist/utils/cn.d.ts"
     }
   },
   "typesVersions": {