diff --git a/frontend/src/components/shared/TextInput.tsx b/frontend/src/components/shared/TextInput.tsx
index ec880e30a..e8f5221bf 100644
--- a/frontend/src/components/shared/TextInput.tsx
+++ b/frontend/src/components/shared/TextInput.tsx
@@ -2,18 +2,33 @@ import React, { forwardRef } from 'react';
import { useMantineColorScheme } from '@mantine/core';
import styles from './textInput/TextInput.module.css';
+/**
+ * Props for the TextInput component
+ */
export interface TextInputProps {
+ /** The input value (required) */
value: string;
+ /** Callback when input value changes (required) */
onChange: (value: string) => void;
+ /** Placeholder text */
placeholder?: string;
+ /** Optional left icon */
icon?: React.ReactNode;
+ /** Whether to show the clear button (default: true) */
showClearButton?: boolean;
+ /** Custom clear handler (defaults to setting value to empty string) */
onClear?: () => void;
+ /** Additional CSS classes */
className?: string;
+ /** Additional inline styles */
style?: React.CSSProperties;
+ /** HTML autocomplete attribute (default: 'off') */
autoComplete?: string;
+ /** Whether the input is disabled (default: false) */
disabled?: boolean;
+ /** Whether the input is read-only (default: false) */
readOnly?: boolean;
+ /** Accessibility label */
'aria-label'?: string;
}
diff --git a/frontend/src/components/shared/textInput/TextInput.README.md b/frontend/src/components/shared/textInput/TextInput.README.md
deleted file mode 100644
index d7311df3b..000000000
--- a/frontend/src/components/shared/textInput/TextInput.README.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# TextInput Component
-
-A reusable text input component with optional icon, clear button, and theme-aware styling. This was created because Mantine's TextInput has limited styling
-
-## Features
-
-- **Theme-aware**: Automatically adapts to light/dark color schemes
-- **Icon support**: Optional left icon with proper positioning
-- **Clear button**: Optional clear button that appears when input has content
-- **Accessible**: Proper ARIA labels and keyboard navigation
-- **Customizable**: Flexible props for styling and behavior
-
-## Usage
-
-```tsx
-import { TextInput } from '../shared/textInput';
-
-// Basic usage
-
-
-// With icon
-search}
-/>
-
-// With custom clear handler
- {
- setSearchValue('');
- // Additional cleanup logic
- }}
-/>
-
-// Disabled state
-
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `value` | `string` | - | The input value (required) |
-| `onChange` | `(value: string) => void` | - | Callback when input value changes (required) |
-| `placeholder` | `string` | - | Placeholder text |
-| `icon` | `React.ReactNode` | - | Optional left icon |
-| `showClearButton` | `boolean` | `true` | Whether to show the clear button |
-| `onClear` | `() => void` | - | Custom clear handler (defaults to setting value to empty string) |
-| `className` | `string` | `''` | Additional CSS classes |
-| `style` | `React.CSSProperties` | - | Additional inline styles |
-| `autoComplete` | `string` | `'off'` | HTML autocomplete attribute |
-| `disabled` | `boolean` | `false` | Whether the input is disabled |
-| `readOnly` | `boolean` | `false` | Whether the input is read-only |
-| `aria-label` | `string` | - | Accessibility label |
-
-## Styling
-
-The component uses CSS modules and automatically adapts to the current color scheme. The styling includes:
-
-- Proper focus states with blue outline
-- Hover effects on the clear button
-- Theme-aware colors for text, background, and icons
-- Responsive padding based on icon and clear button presence
-
-## Accessibility
-
-- Proper ARIA labels
-- Keyboard navigation support
-- Screen reader friendly clear button
-- Focus management