feat: add TextField component with styles and integration into index page

src/components/index.ts

@@ -15,4 +15,5 @@ export { default as LoadingBar }    from './LoadingBar/loadingBar.astro';
 export { default as NumericStepper } from './numericStepper/numericStepper.astro';
 export { default as Avatar } from './Avatar/avatar.astro';
 export { default as Select } from './Select/select.astro';
-export { default as SelectOption } from './Select/selectOption.astro';
+export { default as SelectOption } from './Select/selectOption.astro';
+export { default as TextField } from './textField/textField.astro';

src/components/textField/_textField.scss

@@ -0,0 +1,30 @@
+@use '../../styles/tokens/typography' as *;
+
+.textField {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nds-spacing-xs);
+  &__textarea {
+    background-color: var(--nds-color-background);
+    border: var(--nds-border-width-thin) solid var(--nds-text);
+    border-radius: var(--nds-radius-sm);
+    padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ;
+    @include text-base;
+    color: var(--nds-text);
+    min-height: 50px;
+    max-width: 100%;
+  }
+  &__charCount {
+    @include text-sm;
+    color: var(--nds-text-muted);
+    text-align: left;
+  }
+  &__input {
+    background-color: var(--nds-color-background);
+    border: var(--nds-border-width-thin) solid var(--nds-text);
+    border-radius: var(--nds-radius-sm);
+    padding: var(--nds-spacing-sm) var(--nds-spacing-xs) ;
+    @include text-base;
+    color: var(--nds-text);
+  }
+}

src/components/textField/textField.astro

@@ -0,0 +1,65 @@
+---
+export interface Props {
+  id?: string;
+  label?: string;
+  type?: 'text' | 'email' | 'password' | 'textarea';
+  placeholder?: string;
+  min?: number;
+  max?: number;
+  value?: number;
+  step?: number;
+}
+
+const { id, label, type = 'text', placeholder, min, max, value, step } = Astro.props;
+const charCounter = 0;
+---
+
+<div
+  class="textField"
+  id={id}
+>
+  {label && <label for={id}>{label}</label>}
+  {type === 'textarea' ? (
+    <div>
+      <textarea
+        id={id}
+        placeholder={placeholder}
+        maxlength={max}
+        class="textField__textarea"
+      ></textarea>
+      {max && (
+        <div class="textField__charCount">
+          <span id={`${id}-charCount`}>{charCounter}</span> / {max}
+        </div>
+      )}
+    </div>
+  ) : (
+    <input
+      id={id}
+      type={type}
+      placeholder={placeholder}
+      min={min}
+      max={max}
+      value={value}
+      step={step}
+      class="textField__input"
+    />
+  )}
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('.textField').forEach((field) => {
+    const textarea = field.querySelector<HTMLTextAreaElement>('.textField__textarea');
+    const counter = field.querySelector<HTMLElement>('[id$="-charCount"]');
+
+    if (!textarea || !counter) return;
+
+    textarea.addEventListener('input', () => {
+      counter.textContent = String(textarea.value.length);
+    });
+  });
+</script>
+
+<style lang="scss">
+@use './textField';
+</style>

src/pages/index.astro

@@ -15,6 +15,7 @@ import NumericStepper from '../components/numericStepper/numericStepper.astro';
 import Avatar from '../components/Avatar/avatar.astro';
 import Select from '../components/Select/select.astro';
 import SelectOption from '../components/Select/selectOption.astro';
+import TextField from '../components/textField/textField.astro';
 import {
   Arrow2Icon, BinIcon, BurgerIcon, CalendarIcon, CheckIcon, CloseIcon,
   CodeIcon, CubeIcon, DownloadIcon, FilterIcon, HelpIcon, HomeIcon,
@@ -29,6 +30,14 @@ const initialChecked = true;
 <Layout>
   <main>
     <h1>Nova Design System</h1>
+    <section>
+      <h2>TextField</h2>
+      <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">
+        <TextField label="Email" type="email" placeholder="Enter your email" />
+        <TextField label="Password" type="password" placeholder="Enter your password" />
+        <TextField label="Textarea" type="textarea" placeholder="Enter your message" max={100} />
+      </div>
+    </section>
     <section>
       <h2>Select</h2>
       <div style="display: flex; flex-direction: column; gap: var(--nds-spacing-md);">