Updates

components/form/Form.tsx

@@ -1,6 +1,10 @@
 import { DetailedHTMLProps, FormHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # Form Element
+ * @className twui-form
+ */
 export default function Form({
     ...props
 }: DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>) {
@@ -8,10 +12,12 @@ export default function Form({
         <form
             {...props}
             className={twMerge(
-                "flex flex-col items-start gap-4 w-full",
+                "flex flex-col items-stretch gap-2 w-full bg-transparent",
                 "twui-form",
                 props.className
             )}
-        ></form>
+        >
+            {props.children}
+        </form>
     );
 }

components/form/Input.tsx

@@ -1,6 +1,10 @@
 import { DetailedHTMLProps, InputHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+/**
+ * # Input Element
+ * @className twui-input
+ */
 export default function Input({
     ...props
 }: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) {
@@ -8,7 +12,12 @@ export default function Input({
         <input
             {...props}
             className={twMerge(
-                "w-full px-4 py-2 border border-slate-300 rounded",
+                "w-full px-4 py-2 border rounded-md",
+                "border-slate-300 dark:border-white/20",
+                "focus:border-slate-700 dark:focus:border-white/50",
+                "outline-slate-300 dark:outline-white/20",
+                "focus:outline-slate-700 dark:focus:outline-white/50",
+                "bg-white dark:bg-black",
                 "twui-input",
                 props.className
             )}

components/form/Textarea.tsx

@@ -0,0 +1,24 @@
+import { DetailedHTMLProps, TextareaHTMLAttributes } from "react";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * # Textarea Component
+ * @className twui-textarea
+ */
+export default function Textarea({
+    ...props
+}: DetailedHTMLProps<
+    TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HTMLTextAreaElement
+>) {
+    return (
+        <textarea
+            {...props}
+            className={twMerge(
+                "w-full px-4 py-2 border border-slate-300 rounded",
+                "twui-textarea",
+                props.className
+            )}
+        />
+    );
+}