docs(core): improve the docs of the input field components

apps/docs/content/components/input-number.mdx

@@ -59,3 +59,7 @@ import { InputNumber } from '@pillar-ui/core'
 ### Min
 
 <Playground direction="column" name="inputNumberMin" root="form/inputNumber" />
+
+### Prefix
+
+<Playground direction="column" name="inputNumberPrefix" root="form/inputNumber" />

apps/docs/content/components/input-password.mdx

@@ -47,3 +47,7 @@ import { InputPassword } from '@pillar-ui/core'
 ### Status
 
 <Playground direction="column" name="inputPasswordStatus" root="form/inputPassword" />
+
+### Prefix
+
+<Playground direction="column" name="inputPasswordPrefix" root="form/inputPassword" />

apps/docs/content/components/input-search.mdx

@@ -47,3 +47,11 @@ import { InputSearch } from '@pillar-ui/core'
 ### Status
 
 <Playground direction="column" name="inputSearchStatus" root="form/inputSearch" />
+
+### Prefix
+
+<Playground direction="column" name="inputSearchPrefix" root="form/inputSearch" />
+
+### Suffix
+
+<Playground direction="column" name="inputSearchSuffix" root="form/inputSearch" />

apps/docs/content/components/textarea.mdx

@@ -43,3 +43,11 @@ import { Textarea } from '@pillar-ui/core'
 <Prop defaultValue="4" type="'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'" />
 
 <Playground direction="column" name="textareaSize" root="form/textarea" />
+
+### Prefix
+
+<Playground direction="column" name="textareaPrefix" root="form/textarea" />
+
+### Suffix
+
+<Playground direction="column" name="textareaSuffix" root="form/textarea" />

apps/docs/src/app/_components/playground/form/inputNumber/inputNumberPrefix.tsx

@@ -0,0 +1,13 @@
+import { InputNumber } from '@pillar-ui/core'
+import { User } from '@pillar-ui/icons'
+import React from 'react'
+
+export const InputNumberPrefix = () => {
+  return (
+    <>
+      <InputNumber aria-label="hello" placeholder="Placeholder" />
+      <InputNumber aria-label="hello" prefixInput={<User width="16" />} placeholder="Placeholder" />
+      <InputNumber aria-label="hello" prefixInput={'https://'} />
+    </>
+  )
+}

apps/docs/src/app/_components/playground/form/inputPassword/inputPasswordPrefix.tsx

@@ -0,0 +1,13 @@
+import { InputPassword } from '@pillar-ui/core'
+import { User } from '@pillar-ui/icons'
+import React from 'react'
+
+export const InputPasswordPrefix = () => {
+  return (
+    <>
+      <InputPassword aria-label="hello" placeholder="Placeholder" />
+      <InputPassword aria-label="hello" prefixInput={<User width="16" />} placeholder="Placeholder" />
+      <InputPassword aria-label="hello" prefixInput={'https://'} />
+    </>
+  )
+}

apps/docs/src/app/_components/playground/form/inputSearch/inputSearchPrefix.tsx

@@ -0,0 +1,13 @@
+import { InputSearch } from '@pillar-ui/core'
+import { User } from '@pillar-ui/icons'
+import React from 'react'
+
+export const InputSearchPrefix = () => {
+  return (
+    <>
+      <InputSearch aria-label="hello" placeholder="Placeholder" />
+      <InputSearch aria-label="hello" prefixInput={<User width="16" />} placeholder="Placeholder" />
+      <InputSearch aria-label="hello" prefixInput={'https://'} />
+    </>
+  )
+}

apps/docs/src/app/_components/playground/form/inputSearch/inputSearchSuffix.tsx

@@ -0,0 +1,12 @@
+import { Button, InputSearch } from '@pillar-ui/core'
+import { User } from '@pillar-ui/icons'
+import React from 'react'
+
+export const InputSearchSuffix = () => {
+  return (
+    <>
+      <InputSearch aria-label="hello" suffixInput={<User width="16" />} placeholder="Placeholder" />
+      <InputSearch aria-label="hello" suffixInput=".com" />
+    </>
+  )
+}

apps/docs/src/app/_components/playground/form/textarea/textareaPrefix.tsx

@@ -0,0 +1,13 @@
+import { Textarea } from '@pillar-ui/core'
+import { User } from '@pillar-ui/icons'
+import React from 'react'
+
+export const TextareaPrefix = () => {
+  return (
+    <>
+      <Textarea aria-label="hello" placeholder="Placeholder" />
+      <Textarea aria-label="hello" prefixInput={<User width="16" />} placeholder="Placeholder" />
+      <Textarea aria-label="hello" prefixInput={'https://'} />
+    </>
+  )
+}

apps/docs/src/app/_components/playground/form/textarea/textareaSuffix.tsx

@@ -0,0 +1,12 @@
+import { Textarea } from '@pillar-ui/core'
+import { User } from '@pillar-ui/icons'
+import React from 'react'
+
+export const TextareaSuffix = () => {
+  return (
+    <>
+      <Textarea aria-label="hello" suffixInput={<User width="16" />} placeholder="Placeholder" />
+      <Textarea aria-label="hello" suffixInput=".com" />
+    </>
+  )
+}