From 9556b20adeed2f5ba809258567123d03bb91a278 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sat, 16 May 2026 13:59:03 +0200
Subject: [PATCH] feat(13-03): port input.templ/input.css and
 textarea.templ/textarea.css (GREEN)

- input.css: .ui-input with min-height 44px, border-radius 0.75rem, focus ring
- input.templ: InputProps with ID/Name/Type/Placeholder/Value/Disabled/Required/Attrs
- textarea.css: .ui-textarea with min-height 7rem, resize vertical, focus ring
- textarea.templ: TextareaProps with ID/Name/Value/Placeholder/Rows/Disabled/Required/Attrs
- tailwind.input.css: add @import for input.css and textarea.css
- All 7 TestInput/TestTextarea tests passing
---
 backend/internal/web/ui/input.css      | 22 +++++++++++++++++++
 backend/internal/web/ui/input.templ    | 30 ++++++++++++++++++++++++++
 backend/internal/web/ui/textarea.css   | 23 ++++++++++++++++++++
 backend/internal/web/ui/textarea.templ | 29 +++++++++++++++++++++++++
 backend/tailwind.input.css             |  4 +++-
 5 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 backend/internal/web/ui/input.css
 create mode 100644 backend/internal/web/ui/input.templ
 create mode 100644 backend/internal/web/ui/textarea.css
 create mode 100644 backend/internal/web/ui/textarea.templ

diff --git a/backend/internal/web/ui/input.css b/backend/internal/web/ui/input.css
new file mode 100644
index 0000000..222d7fa
--- /dev/null
+++ b/backend/internal/web/ui/input.css
@@ -0,0 +1,22 @@
+.ui-input {
+  appearance: none;
+  background: var(--color-surface-default);
+  border: 1px solid var(--color-border-default);
+  border-radius: 0.75rem;
+  color: var(--color-text-primary);
+  font: inherit;
+  line-height: 1.4;
+  min-height: 44px;
+  padding: 0.75rem 0.95rem;
+  width: 100%;
+}
+
+.ui-input::placeholder {
+  color: var(--color-text-faint);
+}
+
+.ui-input:focus {
+  border-color: var(--color-brand-focus);
+  box-shadow: 0 0 0 3px var(--color-focus-ring-strong);
+  outline: none;
+}
diff --git a/backend/internal/web/ui/input.templ b/backend/internal/web/ui/input.templ
new file mode 100644
index 0000000..0245aaf
--- /dev/null
+++ b/backend/internal/web/ui/input.templ
@@ -0,0 +1,30 @@
+package ui
+
+type InputProps struct {
+	ID          string
+	Name        string
+	Value       string
+	Placeholder string
+	Type        string
+	Disabled    bool
+	Required    bool
+	Attrs       templ.Attributes
+}
+
+templ Input(props InputProps) {
+	<input
+		id={ inputID(props.ID, props.Name) }
+		type={ inputType(props.Type) }
+		name={ props.Name }
+		value={ props.Value }
+		placeholder={ props.Placeholder }
+		class="ui-input"
+		if props.Disabled {
+			disabled
+		}
+		if props.Required {
+			required
+		}
+		{ props.Attrs... }
+	/>
+}
diff --git a/backend/internal/web/ui/textarea.css b/backend/internal/web/ui/textarea.css
new file mode 100644
index 0000000..7142068
--- /dev/null
+++ b/backend/internal/web/ui/textarea.css
@@ -0,0 +1,23 @@
+.ui-textarea {
+  appearance: none;
+  background: var(--color-surface-default);
+  border: 1px solid var(--color-border-default);
+  border-radius: 0.75rem;
+  color: var(--color-text-primary);
+  font: inherit;
+  line-height: 1.4;
+  min-height: 7rem;
+  padding: 0.85rem 0.95rem;
+  resize: vertical;
+  width: 100%;
+}
+
+.ui-textarea::placeholder {
+  color: var(--color-text-faint);
+}
+
+.ui-textarea:focus {
+  border-color: var(--color-brand-focus);
+  box-shadow: 0 0 0 3px var(--color-focus-ring-strong);
+  outline: none;
+}
diff --git a/backend/internal/web/ui/textarea.templ b/backend/internal/web/ui/textarea.templ
new file mode 100644
index 0000000..74c6216
--- /dev/null
+++ b/backend/internal/web/ui/textarea.templ
@@ -0,0 +1,29 @@
+package ui
+
+type TextareaProps struct {
+	ID          string
+	Name        string
+	Value       string
+	Placeholder string
+	Rows        int
+	Disabled    bool
+	Required    bool
+	Attrs       templ.Attributes
+}
+
+templ Textarea(props TextareaProps) {
+	<textarea
+		id={ inputID(props.ID, props.Name) }
+		name={ props.Name }
+		placeholder={ props.Placeholder }
+		rows={ textareaRows(props.Rows) }
+		class="ui-textarea"
+		if props.Disabled {
+			disabled
+		}
+		if props.Required {
+			required
+		}
+		{ props.Attrs... }
+	>{ props.Value }</textarea>
+}
diff --git a/backend/tailwind.input.css b/backend/tailwind.input.css
index c4d4ac6..7e17912 100644
--- a/backend/tailwind.input.css
+++ b/backend/tailwind.input.css
@@ -7,5 +7,7 @@
 @import "./internal/web/ui/base.css";
 @import "./internal/web/ui/auth.css";
 @import "./internal/web/ui/button.css";
-@import "./internal/web/ui/card.css";
 @import "./internal/web/ui/badge.css";
+@import "./internal/web/ui/card.css";
+@import "./internal/web/ui/input.css";
+@import "./internal/web/ui/textarea.css";