From 61be8e2cabbaeecb667e14a07c26edf37e7a72f1 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Thu, 5 Jun 2025 17:41:03 +0800
Subject: [PATCH] Added versitality

---
 src/components/Input/Input.sass |  2 +-
 src/components/Input/Input.tsx  | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Input/Input.sass b/src/components/Input/Input.sass
index 2360b54..3f0c613 100644
--- a/src/components/Input/Input.sass
+++ b/src/components/Input/Input.sass
@@ -27,7 +27,7 @@ $border: 1px solid color.adjust(vars.$background, $lightness: 20%)
     padding: 0.5rem
     color: color.adjust(vars.$background, $lightness: 60%)
     outline: none
-    transition: all 0.4s ease-out
+    transition: all 0.2s ease-out
 
     &:hover
       border-color: color.adjust(vars.$background, $lightness: 30%)
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 0748023..9e9a887 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -2,12 +2,14 @@ import './Input.sass'
 import { Show } from 'solid-js'
 import { TextField } from '@kobalte/core/text-field'
 
-export default (props: { value: string; onChange: (text:string) => void; label: string; isTextField?: boolean }) => (
+export default (props: { value: string; onChange: (text: string) => void; label?: string; isTextField?: boolean; width?: number; height?: number }) => (
   <>
-    <TextField class="input" value={props.value} onChange={props.onChange}>
-      <TextField.Label class="input__label">{props.label}:</TextField.Label>
+    <TextField class="input" value={props.value} onChange={props.onChange} >
+      <Show when={props.label}>
+        <TextField.Label class="input__label">{props.label}:</TextField.Label>
+      </Show>
       <Show when={props.isTextField}>
-        <TextField.TextArea class="input__textarea" />
+        <TextField.TextArea class="input__textarea" style={{ width: props.width ? `${props.width}rem` : '100%', height: props.height ? `${props.height}rem` : 'auto' }} />
       </Show>
       <Show when={!props.isTextField}>
         <TextField.Input class="input__text" />