From 6a5bea364c39e15c976f87b9b76ad53c0b72d522 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Fri, 26 Sep 2025 11:44:57 +0800
Subject: [PATCH] Added input component

---
 src/components/Input/Input.sass | 45 +++++++++++++++++++++++++++++++++
 src/components/Input/Input.tsx  | 22 ++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 src/components/Input/Input.sass
 create mode 100644 src/components/Input/Input.tsx

diff --git a/src/components/Input/Input.sass b/src/components/Input/Input.sass
new file mode 100644
index 0000000..ca1096d
--- /dev/null
+++ b/src/components/Input/Input.sass
@@ -0,0 +1,45 @@
+.text-field
+  display: flex
+  flex-direction: column
+  gap: 4px
+
+  &__label
+    color: hsl(240 6% 10%)
+    font-size: 14px
+    font-weight: 500
+    user-select: none
+
+  &__input
+    display: inline-flex
+    border-radius: 6px
+    padding: 6px 12px
+    font-size: 16px
+    outline: none
+    background-color: white
+    border: 1px solid hsl(240 6% 90%)
+    color: hsl(240 4% 16%)
+    transition: border-color 250ms, color 250ms
+
+  &__input:hover
+    border-color: hsl(240 5% 65%)
+
+  &__input:focus-visible
+    outline: 2px solid #39536f
+    outline-offset: 2px
+
+  &__input[data-invalid]
+    border-color: hsl(0 72% 51%)
+    color: hsl(0 72% 51%)
+
+  &__input::placeholder
+    color: hsl(240 4% 46%)
+
+  &__description
+    color: hsl(240 5% 26%)
+    font-size: 12px
+    user-select: none
+
+  &__error-message
+    color: hsl(0 72% 51%)
+    font-size: 12px
+    user-select: none
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
new file mode 100644
index 0000000..8e08856
--- /dev/null
+++ b/src/components/Input/Input.tsx
@@ -0,0 +1,22 @@
+import './Input.sass'
+import { TextField } from '@kobalte/core/text-field'
+import { Show, type Setter } from 'solid-js'
+
+interface Props {
+  label?: string
+  value: string
+  onChange: Setter<string>
+}
+
+export default (props: Props) => {
+  return (
+    <>
+      <TextField class="text-field" value={props.value} onChange={props.onChange}>
+        <Show when={props.label}>
+          <TextField.Label class="text-field__label">{props.label}</TextField.Label>
+        </Show>
+        <TextField.Input class="text-field__input" />
+      </TextField>
+    </>
+  )
+}