feat: add Textarea

src/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }

src/index.ts

@@ -107,3 +107,4 @@ export {
   DialogTitle,
   DialogDescription
 } from '@/components/ui/dialog'
+export { Textarea } from '@/components/ui/textarea'

src/showroom/app.tsx

@@ -16,6 +16,7 @@ import { TypographyExample } from './components/typography'
 import { ScrollAreaExample } from './components/scroll-area'
 import { DrawerExample } from './components/drawer'
 import { DialogExample } from './components/dialog'
+import { TextareaExample } from './components/textarea'
 
 export function App(): JSX.Element {
   return <div className="grid grid-cols-2 gap-4 gap-y-8 max-w-[900px] m-10">
@@ -37,5 +38,6 @@ export function App(): JSX.Element {
     <TabsExample />
     <CalendarExample />
     <ScrollAreaExample />
+    <TextareaExample />
   </div >
 }

src/showroom/components/textarea.tsx

@@ -0,0 +1,15 @@
+import { Textarea } from '@/components/ui/textarea'
+import { Code } from '../code'
+import { Header } from '../header'
+
+export function TextareaExample(): JSX.Element {
+  return <>
+    <Header>Textarea</Header>
+
+    <div>
+<Textarea placeholder="Type your message here." />
+    </div>
+
+    <Code code={'<Textarea placeholder="Type your message here." />'} />
+  </>
+}