From 469119398ad5ad42dced589216720302c7b8ff41 Mon Sep 17 00:00:00 2001
From: Theo2903 <theo@ribbi.ch>
Date: Tue, 29 Apr 2025 15:26:22 +0200
Subject: [PATCH] Add Textarea component to registry

- Introduced a new Textarea component for React Native applications, including its implementation in `registry/textarea/textarea.tsx`.
- Updated `registry.json` to include the new Textarea component and its dependencies.
---
 app/(site)/docs/components/textarea/page.tsx | 71 ++++++++++++++++++++
 public/r/textarea.json                       | 18 +++++
 registry.json                                | 14 ++++
 registry/textarea/textarea.tsx               | 36 ++++++++++
 4 files changed, 139 insertions(+)
 create mode 100644 app/(site)/docs/components/textarea/page.tsx
 create mode 100644 public/r/textarea.json
 create mode 100644 registry/textarea/textarea.tsx

diff --git a/app/(site)/docs/components/textarea/page.tsx b/app/(site)/docs/components/textarea/page.tsx
new file mode 100644
index 0000000..47d072f
--- /dev/null
+++ b/app/(site)/docs/components/textarea/page.tsx
@@ -0,0 +1,71 @@
+import { ComponentPreview } from "@/components/docs/component-preview";
+
+export default function TextareaPage() {
+  return (
+    <ComponentPreview
+      name="Textarea"
+      description="A textarea component for React Native applications."
+      examples={[
+  {
+    "title": "Default",
+    "value": "default",
+    "content": "import { Textarea } from \"@nativeui/ui\";\n\nexport default function TextareaDemo() {\n  return (\n    <Textarea>\n      Click me\n    </Textarea>\n  );\n}",
+    "language": "tsx"
+  }
+]}
+      componentCode={`import * as React from "react";
+import { TextInput, Platform } from "react-native";
+import { cn } from "@/lib/utils";
+
+const TextArea = React.forwardRef<
+  TextInput,
+  React.ComponentProps<typeof TextInput>
+>(({ className, ...props }, ref) => {
+  const [isFocused, setIsFocused] = React.useState(false);
+
+  return (
+    <TextInput
+      className={cn(
+        "min-h-[120px] w-full rounded-md border border-input bg-transparent px-3 py-3 text-primary shadow-sm",
+        "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "text-base multiline",
+        isFocused ? "border-ring ring-1 ring-ring" : "",
+        Platform.OS === "ios"
+          ? "ios:shadow-sm ios:shadow-foreground/10"
+          : "android:elevation-1",
+        className
+      )}
+      ref={ref}
+      multiline={true}
+      textAlignVertical="top"
+      underlineColorAndroid="transparent"
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      {...props}
+    />
+  );
+});
+
+TextArea.displayName = "TextArea";
+
+export { TextArea };
+`}
+      previewCode={`import { Textarea } from "@nativeui/ui";
+
+export default function TextareaDemo() {
+  return (
+    <div className="flex flex-col gap-4">
+      <Textarea>Default Textarea</Textarea>
+      <Textarea variant="destructive">Delete</Textarea>
+      <Textarea variant="outline">Outline</Textarea>
+      <Textarea variant="secondary">Secondary</Textarea>
+      <Textarea variant="ghost">Ghost</Textarea>
+      <Textarea variant="link">Link</Textarea>
+    </div>
+  );
+}`}
+      registryName="textarea"
+      packageName="@nativeui/ui"
+    />
+  );
+}
diff --git a/public/r/textarea.json b/public/r/textarea.json
new file mode 100644
index 0000000..b4916f2
--- /dev/null
+++ b/public/r/textarea.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "textarea",
+  "type": "registry:component",
+  "title": "Textarea",
+  "description": "A textarea component for React Native applications.",
+  "dependencies": [
+    "react-native"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "registry/textarea/textarea.tsx",
+      "content": "import * as React from \"react\";\nimport { TextInput, Platform } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\nconst TextArea = React.forwardRef<\n  TextInput,\n  React.ComponentProps<typeof TextInput>\n>(({ className, ...props }, ref) => {\n  const [isFocused, setIsFocused] = React.useState(false);\n\n  return (\n    <TextInput\n      className={cn(\n        \"min-h-[120px] w-full rounded-md border border-input bg-transparent px-3 py-3 text-primary shadow-sm\",\n        \"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n        \"text-base multiline\",\n        isFocused ? \"border-ring ring-1 ring-ring\" : \"\",\n        Platform.OS === \"ios\"\n          ? \"ios:shadow-sm ios:shadow-foreground/10\"\n          : \"android:elevation-1\",\n        className\n      )}\n      ref={ref}\n      multiline={true}\n      textAlignVertical=\"top\"\n      underlineColorAndroid=\"transparent\"\n      onFocus={() => setIsFocused(true)}\n      onBlur={() => setIsFocused(false)}\n      {...props}\n    />\n  );\n});\n\nTextArea.displayName = \"TextArea\";\n\nexport { TextArea };\n",
+      "type": "registry:component"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/registry.json b/registry.json
index fe1e92e..eb9a7a2 100644
--- a/registry.json
+++ b/registry.json
@@ -72,6 +72,20 @@
       ],
       "dependencies": ["react-native"],
       "registryDependencies": []
+    },
+    {
+      "name": "textarea",
+      "type": "registry:component",
+      "title": "Textarea",
+      "description": "A textarea component for React Native applications.",
+      "files": [
+        {
+          "path": "registry/textarea/textarea.tsx",
+          "type": "registry:component"
+        }
+      ],
+      "dependencies": ["react-native"],
+      "registryDependencies": []
     }
   ]
 } 
diff --git a/registry/textarea/textarea.tsx b/registry/textarea/textarea.tsx
new file mode 100644
index 0000000..270c2bb
--- /dev/null
+++ b/registry/textarea/textarea.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { TextInput, Platform } from "react-native";
+import { cn } from "@/lib/utils";
+
+const TextArea = React.forwardRef<
+  TextInput,
+  React.ComponentProps<typeof TextInput>
+>(({ className, ...props }, ref) => {
+  const [isFocused, setIsFocused] = React.useState(false);
+
+  return (
+    <TextInput
+      className={cn(
+        "min-h-[120px] w-full rounded-md border border-input bg-transparent px-3 py-3 text-primary shadow-sm",
+        "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "text-base multiline",
+        isFocused ? "border-ring ring-1 ring-ring" : "",
+        Platform.OS === "ios"
+          ? "ios:shadow-sm ios:shadow-foreground/10"
+          : "android:elevation-1",
+        className
+      )}
+      ref={ref}
+      multiline={true}
+      textAlignVertical="top"
+      underlineColorAndroid="transparent"
+      onFocus={() => setIsFocused(true)}
+      onBlur={() => setIsFocused(false)}
+      {...props}
+    />
+  );
+});
+
+TextArea.displayName = "TextArea";
+
+export { TextArea };