feat: add textarea component

docs/src/components/Announcement.astro

@@ -2,8 +2,8 @@
 
 ---
 
-<a href="/docs/components/toggle" class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium">
-  <span class="underline-offset-4 group-hover:underline"> New toggle component </span>
+<a href="/docs/components/textarea" class="group mb-2 inline-flex items-center px-0.5 text-sm font-medium">
+  <span class="underline-offset-4 group-hover:underline"> New textarea component </span>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"

docs/src/config/docs.ts

@@ -190,6 +190,12 @@ export const docsConfig: TDocsConfig = {
           href: '/docs/components/tabs',
           items: [],
         },
+        {
+          title: 'Textarea',
+          href: '/docs/components/textarea',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Toggle',
           href: '/docs/components/toggle',

docs/src/content/docs/components/textarea.mdx

@@ -0,0 +1,81 @@
+---
+title: Textarea
+description: Displays a form textarea or a component that looks like a textarea.
+component: true
+---
+
+<ComponentPreview name="textarea-demo" description="A textarea" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx shadcn-ng@latest add textarea
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="textarea" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Usage
+
+```tsx
+import { UbTextareaDirective } from "@/components/ui/textarea"
+```
+
+```html
+<textarea ubTextarea></textarea>
+```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="textarea-demo" description="A textarea" />
+
+### Disabled
+
+<ComponentPreview name="textarea-disabled" description="A disabled textarea" />
+
+### With Label
+
+<ComponentPreview
+  name="textarea-with-label"
+  className="[&_div.grid]:w-full"
+  description="A textarea with a label"
+/>
+
+### With Text
+
+<ComponentPreview
+  name="textarea-with-text"
+  description="A textarea with text"
+/>
+
+### With Button
+
+<ComponentPreview
+  name="textarea-with-button"
+  description="A textarea with a button"
+/>

docs/src/registry/default/example/textarea-demo.ts

@@ -0,0 +1,10 @@
+import { UbTextAreaDirective } from '@/registry/default/ui/textarea'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[textarea-demo-default]',
+  imports: [UbTextAreaDirective],
+  template: `<textarea ubTextarea placeholder="Type your message here."></textarea>`,
+})
+export default class TextAreaDemoDefault { }

docs/src/registry/default/example/textarea-disabled.ts

@@ -0,0 +1,10 @@
+import { UbTextAreaDirective } from '@/registry/default/ui/textarea'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[textarea-disabled-default]',
+  imports: [UbTextAreaDirective],
+  template: `<textarea ubTextarea placeholder="Type your message here." disabled></textarea>`,
+})
+export default class TextAreaDisabledDefault { }

docs/src/registry/default/example/textarea-with-button.ts

@@ -0,0 +1,15 @@
+import { UbButtonDirective } from '@/registry/default/ui/button'
+import { UbTextAreaDirective } from '@/registry/default/ui/textarea'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[textarea-with-label-default]',
+  imports: [UbTextAreaDirective, UbButtonDirective],
+  template: `
+  <div class="grid w-full gap-2">
+    <textarea ubTextarea placeholder="Type your message here."></textarea>
+    <button ubButton>Send message</button>
+  </div>`,
+})
+export default class TextAreaWithButtonDefault { }

docs/src/registry/default/example/textarea-with-label.ts

@@ -0,0 +1,15 @@
+import { UbLabelDirective } from '@/registry/default/ui/label'
+import { UbTextAreaDirective } from '@/registry/default/ui/textarea'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[textarea-with-label-default]',
+  imports: [UbTextAreaDirective, UbLabelDirective],
+  template: `
+  <div class="grid w-full gap-1.5">
+    <label ubLabel for="message">Your message</label>
+    <textarea ubTextarea placeholder="Type your message here." id="message"></textarea>
+  </div>`,
+})
+export default class TextAreaWithLabelDefault { }

docs/src/registry/default/example/textarea-with-text.ts

@@ -0,0 +1,18 @@
+import { UbLabelDirective } from '@/registry/default/ui/label'
+import { UbTextAreaDirective } from '@/registry/default/ui/textarea'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[textarea-with-text-default]',
+  imports: [UbTextAreaDirective, UbLabelDirective],
+  template: `
+  <div class="grid w-full gap-1.5">
+    <label ubLabel for="message">Your message</label>
+    <textarea ubTextarea placeholder="Type your message here." id="message"></textarea>
+    <p class="text-sm text-muted-foreground">
+      Your message will be copied to the support team.
+    </p>
+  </div>`,
+})
+export default class TextAreaWithTextDefault { }

docs/src/registry/default/ui/textarea.ts

@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils'
+
+import { computed, Directive, input } from '@angular/core'
+
+@Directive({
+  standalone: true,
+  selector: '[ubTextarea]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbTextAreaDirective {
+  class = input<string>()
+  computedClass = computed(() =>
+    cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base 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 md:text-sm', this.class()),
+  )
+}

docs/src/registry/new-york/example/textarea-demo.ts

@@ -0,0 +1,10 @@
+import { UbTextAreaDirective } from '@/registry/new-york/ui/textarea'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[textarea-demo-new-york]',
+  imports: [UbTextAreaDirective],
+  template: `<textarea ubTextarea placeholder="Type your message here."></textarea>`,
+})
+export default class TextAreaDemoNewYork { }

docs/src/registry/new-york/example/textarea-disabled.ts

@@ -0,0 +1,10 @@
+import { UbTextAreaDirective } from '@/registry/new-york/ui/textarea'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[textarea-disabled-new-york]',
+  imports: [UbTextAreaDirective],
+  template: `<textarea ubTextarea placeholder="Type your message here." disabled></textarea>`,
+})
+export default class TextAreaDisabledNewYork { }

docs/src/registry/new-york/example/textarea-with-button.ts

@@ -0,0 +1,15 @@
+import { UbButtonDirective } from '@/registry/new-york/ui/button'
+import { UbTextAreaDirective } from '@/registry/new-york/ui/textarea'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[textarea-with-label-new-york]',
+  imports: [UbTextAreaDirective, UbButtonDirective],
+  template: `
+  <div class="grid w-full gap-2">
+    <textarea ubTextarea placeholder="Type your message here."></textarea>
+    <button ubButton>Send message</button>
+  </div>`,
+})
+export default class TextAreaWithButtonNewYork { }

docs/src/registry/new-york/example/textarea-with-label.ts

@@ -0,0 +1,15 @@
+import { UbLabelDirective } from '@/registry/new-york/ui/label'
+import { UbTextAreaDirective } from '@/registry/new-york/ui/textarea'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[textarea-with-label-new-york]',
+  imports: [UbTextAreaDirective, UbLabelDirective],
+  template: `
+  <div class="grid w-full gap-1.5">
+    <label ubLabel for="message">Your message</label>
+    <textarea ubTextarea placeholder="Type your message here." id="message"></textarea>
+  </div>`,
+})
+export default class TextAreaWithLabelNewYork { }

docs/src/registry/new-york/example/textarea-with-text.ts

@@ -0,0 +1,18 @@
+import { UbLabelDirective } from '@/registry/new-york/ui/label'
+import { UbTextAreaDirective } from '@/registry/new-york/ui/textarea'
+import { Component } from '@angular/core'
+
+@Component({
+  standalone: true,
+  selector: '[textarea-with-text-new-york]',
+  imports: [UbTextAreaDirective, UbLabelDirective],
+  template: `
+  <div class="grid w-full gap-1.5">
+    <label ubLabel for="message">Your message</label>
+    <textarea ubTextarea placeholder="Type your message here." id="message"></textarea>
+    <p class="text-sm text-muted-foreground">
+      Your message will be copied to the support team.
+    </p>
+  </div>`,
+})
+export default class TextAreaWithTextNewYork { }

docs/src/registry/new-york/ui/textarea.ts

@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils'
+
+import { computed, Directive, input } from '@angular/core'
+
+@Directive({
+  standalone: true,
+  selector: '[ubTextarea]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class UbTextAreaDirective {
+  class = input<string>()
+  computedClass = computed(() =>
+    cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', this.class()),
+  )
+}

docs/src/registry/registry-examples.ts

@@ -205,6 +205,32 @@ export const examples: Registry = [
     registryDependencies: ['toggle'],
     files: ['example/toggle-demo.ts'],
   },
+  {
+    name: 'textarea-demo',
+    type: 'registry:example',
+    registryDependencies: ['textarea'],
+    files: ['example/textarea-demo.ts'],
+  },
+  {
+    name: 'textarea-disabled',
+    type: 'registry:example',
+    files: ['example/textarea-disabled.ts'],
+  },
+  {
+    name: 'textarea-with-button',
+    type: 'registry:example',
+    files: ['example/textarea-with-button.ts'],
+  },
+  {
+    name: 'textarea-with-label',
+    type: 'registry:example',
+    files: ['example/textarea-with-label.ts'],
+  },
+  {
+    name: 'textarea-with-text',
+    type: 'registry:example',
+    files: ['example/textarea-with-text.ts'],
+  },
   {
     name: 'typography-blockquote',
     type: 'registry:example',

docs/src/registry/registry-ui.ts

@@ -128,6 +128,11 @@ export const ui: Registry = [
     dependencies: ['@radix-ng/primitives'],
     files: [{ path: 'ui/tabs.ts', type: 'registry:ui' }],
   },
+  {
+    name: 'textarea',
+    type: 'registry:ui',
+    files: [{ path: 'ui/textarea.ts', type: 'registry:ui' }],
+  },
   {
     name: 'toggle',
     type: 'registry:ui',