Input Components

/**
 * Standard text input component with validation and Material UI styling
 * @param props - TextInput configuration props
 * @returns Text input field with validation support
 */
function TextInput(props: TextInputProps): ReactElement;

/**
 * Password input component with visibility toggle
 * @param props - PasswordInput configuration props
 * @returns Password input with show/hide functionality
 */
function PasswordInput(props: PasswordInputProps): ReactElement;

interface TextInputProps {
  /** Field source property name */
  source: string;
  /** Input label text */
  label?: string;
  /** Helper text below input */
  helperText?: string;
  /** Validation rules */
  validate?: Function | Function[];
  /** Whether input is required */
  required?: boolean;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Whether input is read-only */
  readOnly?: boolean;
  /** Placeholder text */
  placeholder?: string;
  /** Whether input supports multiple lines */
  multiline?: boolean;
  /** Number of rows for multiline */
  rows?: number;
  /** Maximum number of rows for multiline */
  maxRows?: number;
  /** Input variant */
  variant?: 'standard' | 'outlined' | 'filled';
  /** Full width styling */
  fullWidth?: boolean;
  /** Input margin */
  margin?: 'none' | 'dense' | 'normal';
}

interface PasswordInputProps extends Omit<TextInputProps, 'multiline' | 'rows'> {
  /** Initial visibility state */
  initiallyVisible?: boolean;
}

import { TextInput, PasswordInput } from "ra-ui-materialui";
import { required, minLength, email } from "ra-core";

// Basic text input
<TextInput source="name" />

// Validated text input
<TextInput 
  source="email" 
  label="Email Address"
  validate={[required(), email()]}
  fullWidth
/>

// Multiline text input
<TextInput 
  source="description" 
  multiline 
  rows={4}
  helperText="Enter a detailed description"
/>

// Password input
<PasswordInput 
  source="password" 
  validate={[required(), minLength(8)]}
/>

/**
 * Number input component with formatting and validation
 * @param props - NumberInput configuration props
 * @returns Number input with proper formatting
 */
function NumberInput(props: NumberInputProps): ReactElement;

interface NumberInputProps {
  /** Field source property name */
  source: string;
  /** Input label text */
  label?: string;
  /** Helper text below input */
  helperText?: string;
  /** Validation rules */
  validate?: Function | Function[];
  /** Minimum allowed value */
  min?: number;
  /** Maximum allowed value */
  max?: number;
  /** Step increment value */
  step?: number;
  /** Whether input is required */
  required?: boolean;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Input variant */
  variant?: 'standard' | 'outlined' | 'filled';
  /** Full width styling */
  fullWidth?: boolean;
  /** Format function for display */
  format?: (value: number) => string;
  /** Parse function for input */
  parse?: (value: string) => number;
}

/**
 * Date input component with Material UI date picker
 * @param props - DateInput configuration props
 * @returns Date picker input component
 */
function DateInput(props: DateInputProps): ReactElement;

/**
 * DateTime input component with date and time selection
 * @param props - DateTimeInput configuration props
 * @returns DateTime picker input component
 */
function DateTimeInput(props: DateTimeInputProps): ReactElement;

interface DateInputProps {
  /** Field source property name */
  source: string;
  /** Input label text */
  label?: string;
  /** Helper text below input */
  helperText?: string;
  /** Validation rules */
  validate?: Function | Function[];
  /** Whether input is required */
  required?: boolean;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Input variant */
  variant?: 'standard' | 'outlined' | 'filled';
  /** Full width styling */
  fullWidth?: boolean;
  /** Minimum selectable date */
  minDate?: Date;
  /** Maximum selectable date */
  maxDate?: Date;
  /** Date format string */
  format?: string;
}

interface DateTimeInputProps extends DateInputProps {
  /** Time format string */
  timeFormat?: string;
  /** Whether to show seconds */
  showSeconds?: boolean;
}

/**
 * Select dropdown input component
 * @param props - SelectInput configuration props
 * @returns Select dropdown with options
 */
function SelectInput(props: SelectInputProps): ReactElement;

/**
 * Multiple select input component
 * @param props - SelectArrayInput configuration props
 * @returns Multi-select dropdown component
 */
function SelectArrayInput(props: SelectArrayInputProps): ReactElement;

/**
 * Radio button group input component
 * @param props - RadioButtonGroupInput configuration props
 * @returns Radio button group for single selection
 */
function RadioButtonGroupInput(props: RadioButtonGroupInputProps): ReactElement;

/**
 * Checkbox group input component
 * @param props - CheckboxGroupInput configuration props
 * @returns Checkbox group for multiple selection
 */
function CheckboxGroupInput(props: CheckboxGroupInputProps): ReactElement;

interface SelectInputProps {
  /** Field source property name */
  source: string;
  /** Input label text */
  label?: string;
  /** Helper text below input */
  helperText?: string;
  /** Validation rules */
  validate?: Function | Function[];
  /** Available options */
  choices: Choice[];
  /** Property name for option value */
  optionValue?: string;
  /** Property name for option text */
  optionText?: string;
  /** Whether input is required */
  required?: boolean;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Whether to disable option matching */
  disableValue?: boolean;
  /** Input variant */
  variant?: 'standard' | 'outlined' | 'filled';
  /** Full width styling */
  fullWidth?: boolean;
}

interface Choice {
  id: any;
  name: string;
  [key: string]: any;
}

/**
 * Boolean input component with checkbox or switch styling
 * @param props - BooleanInput configuration props
 * @returns Checkbox or switch for boolean values
 */
function BooleanInput(props: BooleanInputProps): ReactElement;

interface BooleanInputProps {
  /** Field source property name */
  source: string;
  /** Input label text */
  label?: string;
  /** Helper text below input */
  helperText?: string;
  /** Validation rules */
  validate?: Function | Function[];
  /** Whether input is required */
  required?: boolean;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Row layout instead of column */
  row?: boolean;
  /** Use switch instead of checkbox */
  useSwitch?: boolean;
  /** Default checked state */
  defaultValue?: boolean;
}

/**
 * Autocomplete input component with search functionality
 * @param props - AutocompleteInput configuration props
 * @returns Autocomplete input with search and selection
 */
function AutocompleteInput(props: AutocompleteInputProps): ReactElement;

/**
 * Autocomplete array input for multiple selections
 * @param props - AutocompleteArrayInput configuration props
 * @returns Multi-select autocomplete component
 */
function AutocompleteArrayInput(props: AutocompleteArrayInputProps): ReactElement;

/**
 * File upload input component
 * @param props - FileInput configuration props
 * @returns File upload input with preview
 */
function FileInput(props: FileInputProps): ReactElement;

/**
 * Image upload input component with preview
 * @param props - ImageInput configuration props
 * @returns Image upload input with thumbnail preview
 */
function ImageInput(props: ImageInputProps): ReactElement;

interface AutocompleteInputProps {
  /** Field source property name */
  source: string;
  /** Input label text */
  label?: string;
  /** Available choices */
  choices: Choice[];
  /** Property name for option value */
  optionValue?: string;
  /** Property name for option text */
  optionText?: string;
  /** Whether input is required */
  required?: boolean;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Whether to create new options */
  create?: boolean;
  /** Filter to match function */
  filterToQuery?: (searchText: string) => any;
  /** Input debounce delay */
  debounce?: number;
}

interface FileInputProps {
  /** Field source property name */
  source: string;
  /** Input label text */
  label?: string;
  /** Accepted file types */
  accept?: string;
  /** Whether multiple files allowed */
  multiple?: boolean;
  /** Maximum file size in bytes */
  maxSize?: number;
  /** Minimum file size in bytes */
  minSize?: number;
  /** Custom placeholder text */
  placeholder?: string;
  /** Custom file removal label */
  removeLabel?: string;
}

/**
 * Input helper text component for displaying validation messages
 * @param props - InputHelperText configuration props
 * @returns Helper text component with error styling
 */
function InputHelperText(props: InputHelperTextProps): ReactElement;

/**
 * Hook for input field functionality with validation
 * @param props - Input configuration
 * @returns Input field properties and methods
 */
function useInput(props: UseInputProps): UseInputResult;

interface InputHelperTextProps {
  /** Helper text content */
  children?: ReactNode;
  /** Whether text indicates an error */
  error?: boolean;
  /** Helper text variant */
  variant?: 'standard' | 'outlined' | 'filled';
}

interface UseInputProps {
  /** Field source property name */
  source: string;
  /** Default value */
  defaultValue?: any;
  /** Validation rules */
  validate?: Function | Function[];
  /** Format function for display */
  format?: (value: any) => any;
  /** Parse function for input */
  parse?: (value: any) => any;
}

interface UseInputResult {
  field: {
    name: string;
    value: any;
    onChange: (event: any) => void;
    onBlur: (event: any) => void;
  };
  fieldState: {
    error?: any;
    invalid: boolean;
    isDirty: boolean;
    isTouched: boolean;
  };
  formState: {
    isSubmitting: boolean;
    isValid: boolean;
  };
}

import { 
  NumberInput, 
  DateInput, 
  SelectInput, 
  BooleanInput,
  AutocompleteInput,
  FileInput
} from "ra-ui-materialui";

// Number input with validation
<NumberInput 
  source="price" 
  label="Price ($)"
  min={0}
  step={0.01}
  validate={[required(), minValue(0)]}
/>

// Date input
<DateInput 
  source="birthDate" 
  label="Birth Date"
  minDate={new Date('1900-01-01')}
  maxDate={new Date()}
/>

// Select input with choices
<SelectInput 
  source="category" 
  choices={[
    { id: 'tech', name: 'Technology' },
    { id: 'health', name: 'Healthcare' },
    { id: 'finance', name: 'Finance' }
  ]}
/>

// Boolean input as switch
<BooleanInput 
  source="isActive" 
  label="Active Status"
  useSwitch={true}
/>

// File upload
<FileInput 
  source="documents" 
  accept=".pdf,.doc,.docx"
  multiple={true}
  maxSize={5000000}
/>

interface ValidationError {
  message: string;
  type: string;
  ref?: any;
}

interface InputChangeEvent {
  target: {
    name: string;
    value: any;
  };
}

interface FileObject {
  src: string;
  title?: string;
  rawFile?: File;
}