Updated: Input component updated.

app/components/Search.tsx

@@ -1,8 +1,9 @@
+'use client'
 import Link from 'next/link'
 import { CaretRight, MagnifyingGlass, XCircle } from 'phosphor-react'
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react'
 import { getData, storeData } from '../../utils/Searching'
-import { Modal, Skeleton, TextInput } from '../src'
+import { Icon, Input, Modal, Skeleton } from '../src'
 import { cn } from '../src/helpers/cn'
 
 interface Result {
@@ -101,18 +102,18 @@ const Search: FC<SearchProps> = ({ showModal, setShowMainModal }) => {
         </div>
         <form className="mt-2">
           <div>
-            <TextInput
-              id="#id-10"
-              placeholder="Search Component"
-              color="gray"
-              sizing="md"
-              type="text"
-              addon={<MagnifyingGlass size={20} color="#5E718D" />}
-              addonPosition="left"
-              value={query}
-              handleOnChange={(e: any) => setQuery(e.target.value)}
-              ref={inputFocus}
-            />
+            <fieldset className="relative">
+              <Input
+                value={query}
+                onChange={(e: any) => setQuery(e.target.value)}
+                ref={inputFocus}
+                placeholder="Search Component"
+                className="ps-11"
+              />
+              <Icon>
+                <MagnifyingGlass size={19} color="#AFBACA" />
+              </Icon>
+            </fieldset>
           </div>
         </form>
 

app/docs/components/input/Input.mdx

@@ -0,0 +1,52 @@
+import { DefaultInput, DefaultInputCode } from './variant/DefaultInput'
+import { LabelInput, LabelInputCode } from './variant/LabelInput'
+import { InputWithIcon, InputWithIconCode } from './variant/InputWithIcon'
+import { DisabledInput, DisabledInputCode } from './variant/DisabledInput'
+import { InputUseCaseCode, InputUseCases } from './variant/InputUseCases'
+
+import CodePreview from '../../../components/CodePreview'
+import ComponentApi from '../../../components/ComponentApi'
+
+## Table of Contents
+
+The Input Component is a fundamental user interface element used to collect user input or data in various forms, such as text, numbers, dates, or selections. It provides a space where users can type or select information, allowing them to interact with the application and provide necessary inputs.
+
+## Default Input
+
+Show a basic input field.
+
+<CodePreview github="Input" code={DefaultInputCode}>
+  <DefaultInput />
+</CodePreview>
+
+## Input With Label
+
+Input field with a corresponding label.
+
+<CodePreview github="Input" code={LabelInputCode}>
+  <LabelInput />
+</CodePreview>
+
+## Input With Icon
+
+Input field with an accompanying icon.
+
+<CodePreview github="Input" code={InputWithIconCode}>
+  <InputWithIcon />
+</CodePreview>
+
+## Disabled Input
+
+Disabled input field example.
+
+<CodePreview github="Input" code={DisabledInputCode}>
+  <DisabledInput />
+</CodePreview>
+
+## Use Case of Input
+
+An example demonstrating the usage of input fields.
+
+<CodePreview github="Input" code={InputUseCaseCode}>
+  <InputUseCases />
+</CodePreview>

app/docs/components/input/index.tsx

@@ -0,0 +1,7 @@
+'use client'
+import type { FC } from 'react'
+import InputDocsContent from './Input.mdx'
+
+const InputDocs: FC = () => <InputDocsContent />
+
+export default InputDocs

app/docs/components/textInput/page.tsx → app/docs/components/input/page.tsx

@@ -1,17 +1,17 @@
 import type { Metadata, NextPage } from 'next'
+import InputDocs from '.'
 import { DocsContentLayout } from '../../../components/DocsContentLayout'
-import TextInputDocs from '.'
 
 export const metadata: Metadata = {
   description:
     'Input Component is a fundamental user interface element used to collect user input or data in various forms, such as text, numbers, dates, or selections. It provides a space where users can type or select information, allowing them to interact with the application and provide necessary inputs.',
-  title: 'Text Input - Keep React',
+  title: 'Input - Keep React',
 }
 
 const page: NextPage = () => {
   return (
     <DocsContentLayout description={`${metadata.description}`} title={`${metadata.title}`}>
-      <TextInputDocs />
+      <InputDocs />
     </DocsContentLayout>
   )
 }

app/docs/components/input/variant/DefaultInput.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { Input } from '../../../../src'
+
+const DefaultInput = () => {
+  return (
+    <div className="max-w-md p-2">
+      <Input placeholder="Enter name" type="text" />
+    </div>
+  )
+}
+
+const DefaultInputCode = `
+'use client'
+import { Input } from 'keep-react'
+
+export const InputComponent = () => {
+  return <Input placeholder="Enter name" type="text" />
+}
+`
+
+export { DefaultInput, DefaultInputCode }

app/docs/components/input/variant/DisabledInput.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { Input } from '../../../../src'
+
+const DisabledInput = () => {
+  return (
+    <div className="max-w-md p-2">
+      <Input disabled={true} placeholder="Enter name" />
+    </div>
+  )
+}
+
+const DisabledInputCode = `
+'use client'
+import { Input } from 'keep-react'
+
+export const InputComponent = () => {
+  return <Input disabled={true} placeholder="Enter name" />
+}
+`
+
+export { DisabledInput, DisabledInputCode }

app/docs/components/input/variant/InputUseCases.tsx

@@ -0,0 +1,67 @@
+'use client'
+import { Envelope, Lock } from 'phosphor-react'
+import { Button, Icon, Input, Label } from '../../../../src'
+
+const InputUseCases = () => {
+  return (
+    <form className="mx-auto max-w-md space-y-2 rounded-lg border p-8 shadow-md">
+      <fieldset className="space-y-1">
+        <Label htmlFor="name">Email*</Label>
+        <div className="relative">
+          <Input placeholder="Enter email" className="ps-11" />
+          <Icon>
+            <Envelope size={19} color="#AFBACA" />
+          </Icon>
+        </div>
+      </fieldset>
+      <fieldset className="space-y-1">
+        <Label htmlFor="password">Password*</Label>
+        <div className="relative">
+          <Input id="password" placeholder="Enter password" type="password" className="ps-11" />
+          <Icon>
+            <Lock size={19} color="#AFBACA" />
+          </Icon>
+        </div>
+      </fieldset>
+      <Button size="sm" color="secondary" type="submit">
+        Sign In
+      </Button>
+    </form>
+  )
+}
+
+const InputUseCaseCode = `
+'use client'
+import { Envelope, Lock } from 'phosphor-react'
+import { Button, Icon, Input, Label } from 'keep-react'
+
+export const InputComponent = () => {
+  return (
+    <form className="mx-auto max-w-md space-y-2 rounded-lg border p-8 shadow-md">
+      <fieldset className="space-y-1">
+        <Label htmlFor="name">Email</Label>
+        <div className="relative">
+          <Input placeholder="Enter email" className="ps-11" />
+          <Icon>
+            <Envelope size={19} color="#AFBACA" />
+          </Icon>
+        </div>
+      </fieldset>
+      <fieldset className="space-y-1">
+        <Label htmlFor="password">Password</Label>
+        <div className="relative">
+          <Input id="password" placeholder="Enter password" type="password" className="ps-11" />
+          <Icon>
+            <Lock size={19} color="#AFBACA" />
+          </Icon>
+        </div>
+      </fieldset>
+      <Button size="sm" color="secondary" type="submit">
+        Sign In
+      </Button>
+    </form>
+  )
+}
+`
+
+export { InputUseCaseCode, InputUseCases }

app/docs/components/input/variant/InputWithIcon.tsx

@@ -0,0 +1,35 @@
+'use client'
+import { Envelope } from 'phosphor-react'
+import { Icon, Input } from '../../../../src'
+
+const InputWithIcon = () => {
+  return (
+    <div className="p-2">
+      <fieldset className="relative max-w-md">
+        <Input placeholder="Enter email" className="ps-11" />
+        <Icon>
+          <Envelope size={19} color="#AFBACA" />
+        </Icon>
+      </fieldset>
+    </div>
+  )
+}
+
+const InputWithIconCode = `
+'use client'
+import { Envelope } from 'phosphor-react'
+import { Icon, Input } from 'keep-react'
+
+const InputWithIcon = () => {
+  return (
+    <fieldset className="relative max-w-md">
+      <Input placeholder="Enter email" className="ps-11" />
+      <Icon>
+        <Envelope size={19} color="#AFBACA" />
+      </Icon>
+    </fieldset>
+  )
+}
+`
+
+export { InputWithIcon, InputWithIconCode }

app/docs/components/input/variant/LabelInput.tsx

@@ -0,0 +1,27 @@
+'use client'
+import { Input, Label } from '../../../../src'
+
+const LabelInput = () => {
+  return (
+    <fieldset className="max-w-md space-y-1 p-2">
+      <Label htmlFor="name">Enter Name</Label>
+      <Input id="name" placeholder="Enter name" type="text" />
+    </fieldset>
+  )
+}
+
+const LabelInputCode = `
+'use client'
+import { Input, Label } from 'keep-react'
+
+const LabelInput = () => {
+  return (
+    <fieldset className="max-w-md space-y-1">
+      <Label htmlFor="name">Enter Name</Label>
+      <Input id="name" placeholder="Enter name" type="text" />
+    </fieldset>
+  )
+}
+`
+
+export { LabelInput, LabelInputCode }

app/docs/components/modal/modal.mdx

@@ -6,7 +6,6 @@ import { ConfirmationModal, ConfirmationModalCode } from './variant/Confirmation
 import { modalApiData } from './modalApi'
 
 import CodePreview from '../../../components/CodePreview'
-
 import ComponentApi from '../../../components/ComponentApi'
 
 ## Table of Contents

app/docs/components/navbar/variant/NavbarWithSearchBar.tsx

@@ -1,7 +1,7 @@
 'use client'
-import { Navbar, TextInput } from '../../../../src'
-import { CaretDown, FacebookLogo, InstagramLogo, MagnifyingGlass, TwitterLogo } from 'phosphor-react'
 import Image from 'next/image'
+import { CaretDown, FacebookLogo, InstagramLogo, MagnifyingGlass, TwitterLogo } from 'phosphor-react'
+import { Icon, Input, Navbar } from '../../../../src'
 
 const NavbarWithSearchBar = () => {
   return (
@@ -13,15 +13,12 @@ const NavbarWithSearchBar = () => {
 
         <Navbar.Container className="flex items-center gap-6">
           <Navbar.Container tag="ul" className="hidden items-center justify-between gap-4 lg:flex">
-            <TextInput
-              id="#id-10"
-              placeholder="Search anything"
-              color="gray"
-              sizing="sm"
-              type="text"
-              addon={<MagnifyingGlass size={20} color="#5E718D" />}
-              addonPosition="left"
-            />
+            <fieldset className="relative">
+              <Input placeholder="Search" className="ps-11" />
+              <Icon>
+                <MagnifyingGlass size={19} color="#AFBACA" />
+              </Icon>
+            </fieldset>
             <Navbar.Link icon={<FacebookLogo size={20} color="#444" />} iconAnimation={false} />
             <Navbar.Link icon={<InstagramLogo size={20} color="#444" />} iconAnimation={false} />
             <Navbar.Link icon={<TwitterLogo size={20} color="#444" />} iconAnimation={false} />

app/docs/components/radio/variant/DefaultRadio.tsx

@@ -58,9 +58,7 @@ const DefaultRadio = () => {
           value="China"
           disabled={true}
         />
-        <Label htmlFor="country-4" disabled={true}>
-          China (disabled)
-        </Label>
+        <Label htmlFor="country-4">China (disabled)</Label>
       </div>
     </fieldset>
   )

app/docs/components/radio/variant/RadioVariant.tsx

@@ -59,9 +59,7 @@ const RadioVariant = () => {
           value="China"
           disabled={true}
         />
-        <Label htmlFor="country-08" disabled={true}>
-          China (disabled)
-        </Label>
+        <Label htmlFor="country-08">China (disabled)</Label>
       </div>
     </fieldset>
   )