feat: create Input component with label, error, and helper text support

apps/react/src/app/components/input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './input'
+export type { InputProps } from './input'

apps/react/src/app/components/input/input.scss

@@ -0,0 +1,53 @@
+@use "src/styles/framework" as *;
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $space-s2;
+}
+
+.input-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: $text-color;
+}
+
+.input {
+  padding: $space-s2 $space-m2;
+  border: 1px solid $border-input;
+  border-radius: 4px;
+  font-size: 14px;
+  color: $text-color;
+  transition: border-color 0.2s ease;
+
+  &:focus {
+    outline: none;
+    border-color: $blue;
+    box-shadow: 0 0 0 3px rgba(27, 98, 180, 0.1);
+  }
+
+  &--error {
+    border-color: $red;
+
+    &:focus {
+      box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
+    }
+  }
+
+  &:disabled {
+    background-color: $day-color-inactive;
+    cursor: not-allowed;
+    color: $light-gray;
+  }
+}
+
+.input-error {
+  font-size: 12px;
+  color: $red;
+  font-weight: 500;
+}
+
+.input-helper {
+  font-size: 12px;
+  color: $light-gray;
+}

apps/react/src/app/components/input/input.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import './input.scss'
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'data-testid'> {
+  label?: string
+  error?: string
+  helperText?: string
+  'data-testid'?: string
+}
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  error,
+  helperText,
+  className = '',
+  ...props
+}) => {
+  const { 'data-testid': dataTestId = 'input', ...inputProps } = props as any
+
+  return (
+    <div className="input-wrapper">
+      {label && <label className="input-label">{label}</label>}
+      <input
+        className={`input ${error ? 'input--error' : ''} ${className}`.trim()}
+        data-testid={dataTestId}
+        {...inputProps}
+      />
+      {error && <span className="input-error">{error}</span>}
+      {helperText && <span className="input-helper">{helperText}</span>}
+    </div>
+  )
+}