docs: update textarea component page

Author: snoopuppy582

apps/landing/src/app/(detail)/components/[component]/textarea/Api.mdx

@@ -1,3 +1,47 @@
-import { ComingSoon } from '@/components/ComingSoon'
+import { PropsTable } from '@/components/PropsTable'
 
-<ComingSoon />
+###### API
+
+`Textarea` props extends the textarea HTML attributes.
+
+<PropsTable
+  componentProps={[
+    {
+      property: 'typography',
+      description: 'Typography token applied to the textarea',
+      type: '`keyof DevupThemeTypography`',
+      default: '`undefined`',
+    },
+    {
+      property: 'error',
+      description: 'Whether the textarea is in an invalid state',
+      type: '`boolean`',
+      default: '`false`',
+    },
+    {
+      property: 'errorMessage',
+      description:
+        'Validation message shown below the textarea when `error` is true',
+      type: '`string`',
+      default: '`undefined`',
+    },
+    {
+      property: 'rows',
+      description: 'Visible text rows',
+      type: '`number`',
+      default: '`3`',
+    },
+    {
+      property: 'classNames',
+      description: 'Custom class names for inner elements',
+      type: '```{<br>  container?: string<br>  textarea?: string<br>  errorMessage?: string<br>}```',
+      default: '`undefined`',
+    },
+    {
+      property: 'colors',
+      description: 'Custom color variables for the textarea',
+      type: '```{<br>  primary?: string<br>  error?: string<br>  text?: string<br>  border?: string<br>  background?: string<br>  placeholder?: string<br>  focusRing?: string<br>}```',
+      default: '`undefined`',
+    },
+  ]}
+/>

apps/landing/src/app/(detail)/components/[component]/textarea/demo/1_Default.tsx

@@ -0,0 +1,9 @@
+import { Textarea } from '@devup-ui/components'
+
+/**
+ * **Default**
+ * Basic textarea for multi-line user input.
+ */
+export default function Default() {
+  return <Textarea placeholder="Enter your message..." />
+}

apps/landing/src/app/(detail)/components/[component]/textarea/demo/2_Error.tsx

@@ -0,0 +1,15 @@
+import { Textarea } from '@devup-ui/components'
+
+/**
+ * **Error**
+ * Use `error` and `errorMessage` to show validation feedback.
+ */
+export default function Error() {
+  return (
+    <Textarea
+      error
+      errorMessage="Please enter at least 10 characters."
+      placeholder="Describe your request..."
+    />
+  )
+}

apps/landing/src/app/(detail)/components/[component]/textarea/demo/3_Disabled.tsx

@@ -0,0 +1,15 @@
+import { Textarea } from '@devup-ui/components'
+
+/**
+ * **Disabled**
+ * Disabled textareas keep the value visible while preventing edits.
+ */
+export default function Disabled() {
+  return (
+    <Textarea
+      defaultValue="This message is read-only."
+      disabled
+      placeholder="Disabled textarea"
+    />
+  )
+}

apps/landing/src/app/(detail)/components/[component]/textarea/demo/4_Colors.tsx

@@ -0,0 +1,21 @@
+import { Textarea } from '@devup-ui/components'
+
+/**
+ * **Colors**
+ * Override the component color variables to match a custom theme.
+ */
+export default function Colors() {
+  return (
+    <Textarea
+      colors={{
+        primary: '#2563EB',
+        border: '#BFDBFE',
+        background: '#EFF6FF',
+        placeholder: '#60A5FA',
+        focusRing: 'rgba(37, 99, 235, 0.18)',
+      }}
+      placeholder="Custom themed textarea"
+      rows={4}
+    />
+  )
+}

apps/landing/src/app/(detail)/components/[component]/textarea/index.mdx

@@ -1 +1 @@
-`Textarea` component is used for multi-line text input.
+`Textarea` component is used for multi-line text input, such as messages, comments, and descriptions.