Initial release

frontend/src/components/ui/Input.tsx

@@ -0,0 +1,59 @@
+import { type InputHTMLAttributes, forwardRef } from 'react'
+import { cn } from '@/lib/utils'
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string
+  error?: string
+  hint?: string
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, label, error, hint, ...props }, ref) => (
+    <div className="flex flex-col gap-1 min-w-0">
+      {label && (
+        <label className="text-sm font-medium text-tg-hint">{label}</label>
+      )}
+      <input
+        ref={ref}
+        className={cn(
+          'h-11 w-full rounded-xl bg-tg-secondary-bg px-3 text-tg-text placeholder:text-tg-hint',
+          'outline-none focus:ring-2 focus:ring-tg-btn/40 transition-shadow',
+          error && 'ring-2 ring-red-400',
+          className
+        )}
+        {...props}
+      />
+      {error && <p className="text-xs text-red-500">{error}</p>}
+      {hint && !error && <p className="text-xs text-tg-hint">{hint}</p>}
+    </div>
+  )
+)
+Input.displayName = 'Input'
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string
+  error?: string
+}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, label, error, ...props }, ref) => (
+    <div className="flex flex-col gap-1">
+      {label && <label className="text-sm font-medium text-tg-hint">{label}</label>}
+      <textarea
+        ref={ref}
+        rows={3}
+        className={cn(
+          'w-full rounded-xl bg-tg-secondary-bg px-3 py-2.5 text-tg-text placeholder:text-tg-hint',
+          'outline-none focus:ring-2 focus:ring-tg-btn/40 transition-shadow resize-none',
+          error && 'ring-2 ring-red-400',
+          className
+        )}
+        {...props}
+      />
+      {error && <p className="text-xs text-red-500">{error}</p>}
+    </div>
+  )
+)
+Textarea.displayName = 'Textarea'
+
+export { Input, Textarea }