Form Components

/**
 * Base input component with label, description, error support
 * @param props - Input component props
 */
function Input<C = 'input'>(props: InputProps<C>): JSX.Element;

interface InputProps<C = 'input'> extends BoxProps<C>, StylesApiProps<InputFactory> {
  /** Input placeholder */
  placeholder?: string;
  /** Determines whether input should have error styles */
  error?: boolean;
  /** Input variant */
  variant?: InputVariant;
  /** Input size */
  size?: MantineSize;
  /** Left section of input */
  leftSection?: React.ReactNode;
  /** Width of left section */
  leftSectionWidth?: string | number;
  /** Props spread to left section wrapper element */
  leftSectionProps?: Record<string, any>;
  /** Right section of input */
  rightSection?: React.ReactNode;
  /** Width of right section */
  rightSectionWidth?: string | number;
  /** Props spread to right section wrapper element */
  rightSectionProps?: Record<string, any>;
  /** Determines whether input should have pointer cursor */
  pointer?: boolean;
  /** Determines whether input should be multiline */
  multiline?: boolean;
  /** Border radius from theme or number */
  radius?: MantineRadius;
  /** Determines whether input is disabled */
  disabled?: boolean;
}

/**
 * Input wrapper component with label, description, and error
 * @param props - InputWrapper component props
 */
function InputWrapper(props: InputWrapperProps): JSX.Element;

interface InputWrapperProps extends BoxProps, StylesApiProps<InputWrapperFactory> {
  /** Content */
  children?: React.ReactNode;
  /** Input label, displayed before input */
  label?: React.ReactNode;
  /** Input description, displayed after label and before input */
  description?: React.ReactNode;
  /** Input error, displayed after input */
  error?: React.ReactNode;
  /** Determines whether required asterisk should be rendered */
  required?: boolean;
  /** Props spread to label element */
  labelProps?: React.ComponentPropsWithoutRef<'label'>;
  /** Props spread to description element */
  descriptionProps?: React.ComponentPropsWithoutRef<'div'>;
  /** Props spread to error element */
  errorProps?: React.ComponentPropsWithoutRef<'div'>;
  /** Input wrapper size */
  size?: MantineSize;
  /** Determines whether label should have `for` attribute */
  withAsterisk?: boolean;
}

/**
 * Input compound components
 */
function InputLabel(props: InputLabelProps): JSX.Element;
function InputDescription(props: InputDescriptionProps): JSX.Element;
function InputError(props: InputErrorProps): JSX.Element;
function InputPlaceholder(props: InputPlaceholderProps): JSX.Element;
function InputClearButton(props: InputClearButtonProps): JSX.Element;

// Compound components
Input.Wrapper = InputWrapper;
Input.Label = InputLabel;
Input.Description = InputDescription;
Input.Error = InputError;
Input.Placeholder = InputPlaceholder;

type InputVariant = 'default' | 'filled' | 'unstyled';
type InputStylesNames = 'wrapper' | 'input' | 'section' | 'placeholder' | 'root';

import { Input } from "@mantine/core";

// Basic input
<Input placeholder="Enter your name" />

// Input with sections
<Input
  placeholder="Search"
  leftSection={<IconSearch />}
  rightSection={<IconX />}
/>

// Input wrapper with label and description
<Input.Wrapper
  label="Email"
  description="We'll never share your email"
  error="Invalid email format"
  required
>
  <Input placeholder="your@email.com" error />
</Input.Wrapper>

/**
 * Standard text input field
 * @param props - TextInput component props
 */
function TextInput(props: TextInputProps): JSX.Element;

interface TextInputProps extends InputProps, InputWrapperProps {
  /** Input value */
  value?: string;
  /** Input default value */
  defaultValue?: string;
  /** Called when value changes */
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  /** Input type */
  type?: 'text' | 'email' | 'url' | 'tel' | 'search';
  /** Maximum number of characters */
  maxLength?: number;
  /** Minimum number of characters */
  minLength?: number;
  /** Input name */
  name?: string;
  /** Determines whether input should be automatically completed */
  autoComplete?: string;
}

import { TextInput } from "@mantine/core";

// Basic text input
<TextInput 
  label="Name"
  placeholder="Your name"
  required
/>

// Controlled text input
const [value, setValue] = useState('');
<TextInput
  label="Email"
  value={value}
  onChange={(event) => setValue(event.currentTarget.value)}
  type="email"
/>

// Text input with validation
<TextInput
  label="Username"
  description="Username must be unique"
  error={error}
  leftSection={<IconUser />}
  maxLength={20}
/>

/**
 * Password input with visibility toggle
 * @param props - PasswordInput component props
 */
function PasswordInput(props: PasswordInputProps): JSX.Element;

interface PasswordInputProps extends InputProps, InputWrapperProps {
  /** Password value */
  value?: string;
  /** Default password value */
  defaultValue?: string;
  /** Called when value changes */
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  /** Determines whether password should be visible */
  visible?: boolean;
  /** Called when visibility changes */
  onVisibilityChange?: (visible: boolean) => void;
  /** Default visible state */
  defaultVisible?: boolean;
  /** Visibility toggle button props */
  visibilityToggleButtonProps?: React.ComponentPropsWithoutRef<'button'>;
  /** Custom visibility toggle icon */
  visibilityToggleIcon?: (props: { reveal: boolean }) => React.ReactNode;
}

import { PasswordInput } from "@mantine/core";

// Basic password input
<PasswordInput
  label="Password"
  placeholder="Your password"
  required
/>

// Controlled password input
const [password, setPassword] = useState('');
const [visible, setVisible] = useState(false);

<PasswordInput
  label="Password"
  value={password}
  onChange={(event) => setPassword(event.currentTarget.value)}
  visible={visible}
  onVisibilityChange={setVisible}
/>

/**
 * Numeric input with increment/decrement controls
 * @param props - NumberInput component props
 */
function NumberInput(props: NumberInputProps): JSX.Element;

interface NumberInputProps extends InputProps, InputWrapperProps {
  /** Input value */
  value?: string | number;
  /** Default input value */
  defaultValue?: string | number;
  /** Called when value changes */
  onChange?: (value: string | number) => void;
  /** Maximum value */
  max?: number;
  /** Minimum value */
  min?: number;
  /** Number increment/decrement on arrow key press and wheel event */
  step?: number;
  /** Only works if a `step` is defined. When `true`, incrementing/decrementing will snap to multiples of step value */
  stepHoldDelay?: number;
  /** Delay before stepping the value when control is held */
  stepHoldInterval?: number;
  /** Determines whether leading zeros should be removed from the value */
  allowLeadingZeros?: boolean;
  /** Determines whether negative values are allowed */
  allowNegative?: boolean;
  /** Determines whether decimal values are allowed */
  allowDecimal?: boolean;
  /** Characters that should trigger decimal separator */
  decimalSeparator?: string;
  /** Number of decimal places */
  decimalScale?: number;
  /** If set, fixes the number of decimal places */
  fixedDecimalScale?: boolean;
  /** Prefix to add before the input value */
  prefix?: string;
  /** Suffix to add after the input value */
  suffix?: string;
  /** Thousand separator character */
  thousandSeparator?: string | boolean;
  /** Determines whether the input should have controls */
  hideControls?: boolean;
  /** Props passed to increment control */
  incrementProps?: React.ComponentPropsWithoutRef<'button'>;
  /** Props passed to decrement control */
  decrementProps?: React.ComponentPropsWithoutRef<'button'>;
  /** Get input handlers to control increment/decrement outside of the component */
  handlersRef?: React.MutableRefObject<NumberInputHandlers | undefined>;
}

interface NumberInputHandlers {
  increment(): void;
  decrement(): void;
}

import { NumberInput } from "@mantine/core";

// Basic number input
<NumberInput
  label="Age"
  placeholder="Your age"
  min={0}
  max={120}
/>

// Number input with formatting
<NumberInput
  label="Price"
  prefix="$"
  thousandSeparator=","
  decimalScale={2}
  fixedDecimalScale
/>

// Number input with custom handlers
const handlersRef = useRef<NumberInputHandlers>();

<NumberInput
  label="Quantity"
  value={quantity}
  onChange={setQuantity}
  min={1}
  step={5}
  handlersRef={handlersRef}
/>

/**
 * Multi-line text input
 * @param props - Textarea component props
 */
function Textarea(props: TextareaProps): JSX.Element;

interface TextareaProps extends InputProps, InputWrapperProps {
  /** Textarea value */
  value?: string;
  /** Default textarea value */
  defaultValue?: string;
  /** Called when value changes */
  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
  /** Number of visible rows */
  rows?: number;
  /** Maximum number of visible rows, used for auto-resize */
  maxRows?: number;
  /** Minimum number of visible rows, used for auto-resize */
  minRows?: number;
  /** Determines whether textarea should automatically resize to fit content */
  autosize?: boolean;
  /** Maximum number of characters */
  maxLength?: number;
  /** Determines whether textarea should expand to fill container */
  resize?: 'none' | 'both' | 'horizontal' | 'vertical';
}

import { Textarea } from "@mantine/core";

// Basic textarea
<Textarea
  label="Comment"
  placeholder="Your comment"
  rows={4}
/>

// Auto-resizing textarea
<Textarea
  label="Description"
  placeholder="Enter description"
  autosize
  minRows={2}
  maxRows={6}
/>

// Controlled textarea
const [value, setValue] = useState('');
<Textarea
  label="Message"
  value={value}
  onChange={(event) => setValue(event.currentTarget.value)}
  maxLength={500}
/>

/**
 * Single-select dropdown component
 * @param props - Select component props
 */
function Select(props: SelectProps): JSX.Element;

interface SelectProps extends InputProps, InputWrapperProps, ComboboxLikeProps {
  /** Select data */
  data: ComboboxData;
  /** Selected value */
  value?: string | null;
  /** Default selected value */
  defaultValue?: string | null;
  /** Called when value changes */
  onChange?: (value: string | null, option: ComboboxParsedItem) => void;
  /** Determines whether the select should be searchable */
  searchable?: boolean;
  /** Function to determine if option should be selectable */
  allowDeselect?: boolean;
  /** Determines whether the select should be clearable */
  clearable?: boolean;
  /** Maximum number of options displayed at a time */
  limit?: number;
  /** Function to filter options based on search query */
  filter?: OptionsFilter;
  /** Determines whether option should remain highlighted after selection */
  withCheckIcon?: boolean;
  /** Check icon */
  checkIconPosition?: 'left' | 'right';
  /** Dropdown position */
  dropdownPosition?: 'bottom' | 'top';
  /** Dropdown width */
  dropdownWidth?: number | 'target';
}

/**
 * Multi-select dropdown component
 * @param props - MultiSelect component props
 */
function MultiSelect(props: MultiSelectProps): JSX.Element;

interface MultiSelectProps extends InputProps, InputWrapperProps, ComboboxLikeProps {
  /** Select data */
  data: ComboboxData;
  /** Selected values */
  value?: string[];
  /** Default selected values */
  defaultValue?: string[];
  /** Called when value changes */
  onChange?: (value: string[], options: ComboboxParsedItem[]) => void;
  /** Determines whether the select should be searchable */
  searchable?: boolean;
  /** Determines whether the select should be clearable */
  clearable?: boolean;
  /** Maximum number of selected values */
  maxValues?: number;
  /** Determines whether duplicate values are allowed */
  allowDuplicates?: boolean;
  /** Hide selected options from the list */
  hidePickedOptions?: boolean;
}

/**
 * Native HTML select element
 * @param props - NativeSelect component props
 */
function NativeSelect(props: NativeSelectProps): JSX.Element;

interface NativeSelectProps extends InputProps, InputWrapperProps {
  /** Select data */
  data: (string | { value: string; label: string; disabled?: boolean })[];
  /** Selected value */
  value?: string;
  /** Default selected value */
  defaultValue?: string;
  /** Called when value changes */
  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
}

import { Select, MultiSelect, NativeSelect } from "@mantine/core";

// Basic select
<Select
  label="Country"
  placeholder="Pick a country"
  data={['United States', 'Canada', 'Mexico', 'United Kingdom']}
/>

// Select with objects
<Select
  label="Framework"
  data={[
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue.js' },
    { value: 'angular', label: 'Angular' }
  ]}
  value={framework}
  onChange={setFramework}
/>

// Searchable select
<Select
  label="Technology"
  placeholder="Search technologies"
  data={technologies}
  searchable
  clearable
/>

// Multi-select
<MultiSelect
  label="Languages"
  placeholder="Pick languages you know"
  data={['JavaScript', 'TypeScript', 'Python', 'Java', 'C++', 'Rust']}
  value={selectedLanguages}
  onChange={setSelectedLanguages}
  maxValues={3}
/>

// Native select
<NativeSelect
  label="Size"
  data={['XS', 'S', 'M', 'L', 'XL']}
  value={size}
  onChange={(event) => setSize(event.currentTarget.value)}
/>

/**
 * Checkbox input component
 * @param props - Checkbox component props
 */
function Checkbox(props: CheckboxProps): JSX.Element;

interface CheckboxProps extends InputProps, InputWrapperProps {
  /** Checkbox checked state */
  checked?: boolean;
  /** Default checked state */
  defaultChecked?: boolean;
  /** Called when checked state changes */
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  /** Checkbox value */
  value?: string;
  /** Determines whether checkbox is indeterminate */
  indeterminate?: boolean;
  /** Checkbox label */
  label?: React.ReactNode;
  /** Icon displayed when checkbox is checked */
  icon?: React.FC<CheckboxIconProps>;
  /** Icon displayed when checkbox is indeterminate */
  indeterminateIcon?: React.FC<CheckboxIconProps>;
  /** Checkbox color */
  color?: MantineColor;
  /** Checkbox radius */
  radius?: MantineRadius;
  /** Determines whether checkbox label should have pointer cursor */
  labelPosition?: 'left' | 'right';
}

/**
 * Checkbox group component
 * @param props - CheckboxGroup component props
 */
function CheckboxGroup(props: CheckboxGroupProps): JSX.Element;

interface CheckboxGroupProps extends InputWrapperProps {
  /** Selected values */
  value?: string[];
  /** Default selected values */
  defaultValue?: string[];
  /** Called when value changes */
  onChange?: (value: string[]) => void;
  /** Checkbox group name */
  name?: string;
  /** Checkboxes */
  children: React.ReactNode;
}

/**
 * Checkbox card component
 * @param props - CheckboxCard component props
 */
function CheckboxCard(props: CheckboxCardProps): JSX.Element;

interface CheckboxCardProps extends CheckboxProps {
  /** Card content */
  children?: React.ReactNode;
  /** Determines whether card should have border when checked */
  withBorder?: boolean;
}

/**
 * Checkbox indicator component
 * @param props - CheckboxIndicator component props
 */
function CheckboxIndicator(props: CheckboxIndicatorProps): JSX.Element;

// Compound components
Checkbox.Group = CheckboxGroup;
Checkbox.Indicator = CheckboxIndicator;
Checkbox.Card = CheckboxCard;

import { Checkbox } from "@mantine/core";

// Basic checkbox
<Checkbox
  label="I agree to the terms of service"
  checked={agreed}
  onChange={(event) => setAgreed(event.currentTarget.checked)}
/>

// Checkbox group
<Checkbox.Group
  label="Select your favorite frameworks"
  value={frameworks}
  onChange={setFrameworks}
>
  <Group mt="xs">
    <Checkbox value="react" label="React" />
    <Checkbox value="vue" label="Vue" />
    <Checkbox value="angular" label="Angular" />
  </Group>
</Checkbox.Group>

// Checkbox cards
<Checkbox.Group value={selectedCards} onChange={setSelectedCards}>
  <Group>
    <Checkbox.Card value="card1" withBorder>
      <Text fw={500}>Card Option 1</Text>
      <Text size="sm" c="dimmed">Description for option 1</Text>
    </Checkbox.Card>
    <Checkbox.Card value="card2" withBorder>
      <Text fw={500}>Card Option 2</Text>
      <Text size="sm" c="dimmed">Description for option 2</Text>
    </Checkbox.Card>
  </Group>
</Checkbox.Group>

/**
 * Radio button component
 * @param props - Radio component props
 */
function Radio(props: RadioProps): JSX.Element;

interface RadioProps extends InputProps, InputWrapperProps {
  /** Radio checked state */
  checked?: boolean;
  /** Default checked state */
  defaultChecked?: boolean;
  /** Called when checked state changes */
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  /** Radio value */
  value?: string;
  /** Radio label */
  label?: React.ReactNode;
  /** Icon displayed when radio is checked */
  icon?: React.FC<RadioIconProps>;
  /** Radio color */
  color?: MantineColor;
  /** Determines whether radio label should have pointer cursor */
  labelPosition?: 'left' | 'right';
}

/**
 * Radio group component
 * @param props - RadioGroup component props
 */
function RadioGroup(props: RadioGroupProps): JSX.Element;

interface RadioGroupProps extends InputWrapperProps {
  /** Selected value */
  value?: string;
  /** Default selected value */
  defaultValue?: string;
  /** Called when value changes */
  onChange?: (value: string) => void;
  /** Radio group name */
  name?: string;
  /** Radio buttons */
  children: React.ReactNode;
}

/**
 * Radio card component
 * @param props - RadioCard component props
 */
function RadioCard(props: RadioCardProps): JSX.Element;

interface RadioCardProps extends RadioProps {
  /** Card content */
  children?: React.ReactNode;
  /** Determines whether card should have border when checked */
  withBorder?: boolean;
}

// Compound components
Radio.Group = RadioGroup;
Radio.Indicator = RadioIndicator;
Radio.Card = RadioCard;

import { Radio } from "@mantine/core";

// Radio group
<Radio.Group
  label="Select your favorite framework"
  value={framework}
  onChange={setFramework}
>
  <Group mt="xs">
    <Radio value="react" label="React" />
    <Radio value="vue" label="Vue" />
    <Radio value="angular" label="Angular" />
  </Group>
</Radio.Group>

// Radio cards
<Radio.Group value={selectedPlan} onChange={setSelectedPlan}>
  <Group>
    <Radio.Card value="basic" withBorder>
      <Text fw={500}>Basic Plan</Text>
      <Text size="sm" c="dimmed">$9/month</Text>
    </Radio.Card>
    <Radio.Card value="premium" withBorder>
      <Text fw={500}>Premium Plan</Text>
      <Text size="sm" c="dimmed">$19/month</Text>
    </Radio.Card>
  </Group>
</Radio.Group>

/**
 * Toggle switch component
 * @param props - Switch component props
 */
function Switch(props: SwitchProps): JSX.Element;

interface SwitchProps extends InputProps, InputWrapperProps {
  /** Switch checked state */
  checked?: boolean;
  /** Default checked state */
  defaultChecked?: boolean;
  /** Called when checked state changes */
  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
  /** Switch label */
  label?: React.ReactNode;
  /** Label displayed on the thumb when switch is on */
  onLabel?: React.ReactNode;
  /** Label displayed on the thumb when switch is off */
  offLabel?: React.ReactNode;
  /** Switch color */
  color?: MantineColor;
  /** Determines whether switch label should have pointer cursor */
  labelPosition?: 'left' | 'right';
  /** Thumb icon when switch is on */
  thumbIcon?: React.ReactNode;
}

/**
 * Switch group component
 * @param props - SwitchGroup component props
 */
function SwitchGroup(props: SwitchGroupProps): JSX.Element;

// Compound components
Switch.Group = SwitchGroup;

import { Switch } from "@mantine/core";

// Basic switch
<Switch
  label="Enable notifications"
  checked={notifications}
  onChange={(event) => setNotifications(event.currentTarget.checked)}
/>

// Switch with labels
<Switch
  label="Dark mode"
  onLabel="ON"
  offLabel="OFF"
  checked={darkMode}
  onChange={(event) => setDarkMode(event.currentTarget.checked)}
/>

/**
 * Single value slider component
 * @param props - Slider component props
 */
function Slider(props: SliderProps): JSX.Element;

interface SliderProps extends InputWrapperProps, StylesApiProps<SliderFactory> {
  /** Slider value */
  value?: number;
  /** Default slider value */
  defaultValue?: number;
  /** Called when value changes */
  onChange?: (value: number) => void;
  /** Called when dragging ends */
  onChangeEnd?: (value: number) => void;
  /** Minimum value */
  min?: number;
  /** Maximum value */
  max?: number;
  /** Step for value increment/decrement */
  step?: number;
  /** Number of decimal places for value */
  precision?: number;
  /** Determines whether thumb label should be displayed */
  showLabelOnHover?: boolean;
  /** Content displayed in thumb label */
  label?: React.ReactNode | ((value: number) => React.ReactNode);
  /** Marks displayed on the track */
  marks?: { value: number; label?: React.ReactNode }[];
  /** Slider color */
  color?: MantineColor;
  /** Slider radius */
  radius?: MantineRadius;
  /** Slider size */
  size?: MantineSize;
  /** Determines whether slider is disabled */
  disabled?: boolean;
  /** Thumb icon */
  thumbIcon?: React.ReactNode;
  /** Determines whether slider should be inverted */
  inverted?: boolean;
}

/**
 * Range slider component for selecting a range of values
 * @param props - RangeSlider component props
 */
function RangeSlider(props: RangeSliderProps): JSX.Element;

interface RangeSliderProps extends Omit<SliderProps, 'value' | 'defaultValue' | 'onChange' | 'onChangeEnd'> {
  /** Range value */
  value?: RangeSliderValue;
  /** Default range value */
  defaultValue?: RangeSliderValue;
  /** Called when value changes */
  onChange?: (value: RangeSliderValue) => void;
  /** Called when dragging ends */
  onChangeEnd?: (value: RangeSliderValue) => void;
  /** Minimum range between values */
  minRange?: number;
  /** Maximum range between values */
  maxRange?: number;
}

type RangeSliderValue = [number, number];

import { Slider, RangeSlider } from "@mantine/core";

// Basic slider
<Slider
  label="Volume"
  value={volume}
  onChange={setVolume}
  min={0}
  max={100}
  step={5}
  marks={[
    { value: 0, label: '0%' },
    { value: 50, label: '50%' },
    { value: 100, label: '100%' }
  ]}
/>

// Range slider
<RangeSlider
  label="Price range"
  value={priceRange}
  onChange={setPriceRange}
  min={0}
  max={1000}
  step={10}
  minRange={50}
/>

/**
 * Flexible combobox component for building custom selection inputs
 * @param props - Combobox component props
 */
function Combobox(props: ComboboxProps): JSX.Element;

interface ComboboxProps extends BoxProps, StylesApiProps<ComboboxFactory> {
  /** Combobox store */
  store: ComboboxStore;
  /** Determines whether dropdown should be rendered within Portal */
  withinPortal?: boolean;
  /** Dropdown position relative to target */
  position?: FloatingPosition;
  /** Dropdown z-index */
  zIndex?: number;
  /** Props passed down to Transition component */
  transitionProps?: TransitionProps;
  /** Dropdown shadow from theme or custom value */
  shadow?: MantineShadow;
  /** Determines whether focus should be trapped within dropdown */
  trapFocus?: boolean;
  /** Called when dropdown closes */
  onClose?: () => void;
  /** Called when dropdown opens */
  onOpen?: () => void;
  /** Combobox content */
  children?: React.ReactNode;
}

/**
 * Hook to manage combobox state
 * @param options - Combobox configuration options
 * @returns Combobox store
 */
function useCombobox(options?: UseComboboxOptions): ComboboxStore;

interface UseComboboxOptions {
  /** Determines whether dropdown should be opened by default */
  defaultOpened?: boolean;
  /** Called when dropdown opens */
  onDropdownOpen?: () => void;
  /** Called when dropdown closes */
  onDropdownClose?: () => void;
}

/**
 * Combobox compound components
 */
function ComboboxTarget(props: ComboboxTargetProps): JSX.Element;
function ComboboxDropdown(props: ComboboxDropdownProps): JSX.Element;
function ComboboxOptions(props: ComboboxOptionsProps): JSX.Element;
function ComboboxOption(props: ComboboxOptionProps): JSX.Element;
function ComboboxGroup(props: ComboboxGroupProps): JSX.Element;
function ComboboxSearch(props: ComboboxSearchProps): JSX.Element;
function ComboboxEmpty(props: ComboboxEmptyProps): JSX.Element;
function ComboboxHeader(props: ComboboxHeaderProps): JSX.Element;
function ComboboxFooter(props: ComboboxFooterProps): JSX.Element;
function ComboboxClearButton(props: ComboboxClearButtonProps): JSX.Element;

// Compound components
Combobox.Target = ComboboxTarget;
Combobox.Dropdown = ComboboxDropdown;
Combobox.Options = ComboboxOptions;
Combobox.Option = ComboboxOption;
Combobox.Group = ComboboxGroup;
Combobox.Search = ComboboxSearch;
Combobox.Empty = ComboboxEmpty;
Combobox.Header = ComboboxHeader;
Combobox.Footer = ComboboxFooter;
Combobox.ClearButton = ComboboxClearButton;

import { Combobox, Input, InputBase, useCombobox } from "@mantine/core";

function CustomSelect() {
  const combobox = useCombobox({
    onDropdownClose: () => combobox.resetSelectedOption(),
  });

  const [value, setValue] = useState<string | null>(null);
  const [search, setSearch] = useState('');

  const options = groceries
    .filter(item => item.toLowerCase().includes(search.toLowerCase().trim()))
    .map(item => (
      <Combobox.Option value={item} key={item}>
        {item}
      </Combobox.Option>
    ));

  return (
    <Combobox
      store={combobox}
      onOptionSubmit={(val) => {
        setValue(val);
        setSearch(val);
        combobox.closeDropdown();
      }}
    >
      <Combobox.Target>
        <InputBase
          component="button"
          type="button"
          pointer
          rightSection={<Combobox.Chevron />}
          onClick={() => combobox.toggleDropdown()}
        >
          {value || <Input.Placeholder>Pick value</Input.Placeholder>}
        </InputBase>
      </Combobox.Target>

      <Combobox.Dropdown>
        <Combobox.Search
          value={search}
          onChange={(event) => setSearch(event.currentTarget.value)}
          placeholder="Search groceries"
        />
        <Combobox.Options>
          {options.length > 0 ? options : <Combobox.Empty>Nothing found</Combobox.Empty>}
        </Combobox.Options>
      </Combobox.Dropdown>
    </Combobox>
  );
}

/**
 * File upload input component
 * @param props - FileInput component props
 */
function FileInput(props: FileInputProps): JSX.Element;

interface FileInputProps extends InputProps, InputWrapperProps {
  /** Selected file */
  value?: File | null;
  /** Default selected file */
  defaultValue?: File | null;
  /** Called when file is selected */
  onChange?: (file: File | null) => void;
  /** File input accept attribute */
  accept?: string;
  /** Determines whether multiple files can be selected */
  multiple?: boolean;
  /** Capture attribute for mobile file inputs */
  capture?: boolean | 'user' | 'environment';
  /** Function to get display value from file */
  valueComponent?: React.FC<{ value: File }>;
}

import { FileInput } from "@mantine/core";

// Basic file input
<FileInput
  label="Upload resume"
  placeholder="Choose file"
  accept="application/pdf"
  value={file}
  onChange={setFile}
/>

// Multiple file input
<FileInput
  label="Upload images"
  placeholder="Choose files"
  accept="image/*"
  multiple
  value={files}
  onChange={setFiles}
/>