From 93f6e0b36fc31dabd95495b852ded203fd74dc2d Mon Sep 17 00:00:00 2001
From: "Natalie B." <22222885+espeon@users.noreply.github.com>
Date: Thu, 26 Jun 2025 15:01:31 -0500
Subject: [PATCH] Add components

---
 js/components/src/components/ui/index.ts     |  1 +
 js/components/src/components/ui/loader.tsx   |  9 ++++++
 js/components/src/components/ui/textarea.tsx | 34 ++++++++++++++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 js/components/src/components/ui/loader.tsx
 create mode 100644 js/components/src/components/ui/textarea.tsx

diff --git a/js/components/src/components/ui/index.ts b/js/components/src/components/ui/index.ts
index e808a75b..7a864b51 100644
--- a/js/components/src/components/ui/index.ts
+++ b/js/components/src/components/ui/index.ts
@@ -10,6 +10,7 @@ export * from "./dialog";
 export * from "./dropdown";
 export * from "./icons";
 export * from "./input";
+export * from "./loader";
 export * from "./resizeable";
 export * from "./text";
 export * from "./toast";
diff --git a/js/components/src/components/ui/loader.tsx b/js/components/src/components/ui/loader.tsx
new file mode 100644
index 00000000..554877a2
--- /dev/null
+++ b/js/components/src/components/ui/loader.tsx
@@ -0,0 +1,9 @@
+import { ActivityIndicator as RNActivityIndicator } from "react-native";
+import { useTheme } from "../../lib/theme";
+
+export function Loader(
+  props: React.ComponentPropsWithoutRef<typeof RNActivityIndicator>,
+) {
+  const { theme } = useTheme();
+  return <RNActivityIndicator color={theme.colors.primary} {...props} />;
+}
diff --git a/js/components/src/components/ui/textarea.tsx b/js/components/src/components/ui/textarea.tsx
new file mode 100644
index 00000000..1168462c
--- /dev/null
+++ b/js/components/src/components/ui/textarea.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+import { TextInput, type TextInputProps } from "react-native";
+import { bg, borders, p, text, w } from "../../lib/theme/atoms";
+
+function Textarea({
+  style,
+  multiline = true,
+  numberOfLines = 4,
+  ...props
+}: TextInputProps & {
+  ref?: React.RefObject<TextInput>;
+}) {
+  return (
+    <TextInput
+      style={[
+        w.percent[100],
+        borders.width.thin,
+        borders.color.gray[400],
+        bg.gray[900],
+        p[3],
+        text.gray[200],
+        props.editable === false && { opacity: 0.5 },
+        { borderRadius: 10 },
+        style,
+      ]}
+      multiline={multiline}
+      numberOfLines={numberOfLines}
+      textAlignVertical="top"
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
-- 
2.51.2