Form Components

/**
 * Enhanced text input with left/right elements and styling options
 * @param props - Input configuration, value, and event handlers
 */
function InputGroup(props: InputGroupProps): JSX.Element;

/**
 * Numeric input with increment/decrement buttons and validation
 * @param props - Numeric input configuration and constraints
 */
function NumericInput(props: NumericInputProps): JSX.Element;

/**
 * Multi-line text input with auto-resize capabilities
 * @param props - Text area configuration and sizing options
 */
function TextArea(props: TextAreaProps): JSX.Element;

interface InputGroupProps extends ControlProps, HTMLInputProps {
  asyncControl?: boolean;
  disabled?: boolean;
  fill?: boolean;
  inputRef?: React.Ref<HTMLInputElement>;
  large?: boolean;
  leftElement?: React.ReactNode;
  leftIcon?: IconName;
  placeholder?: string;
  rightElement?: React.ReactNode;
  round?: boolean;
  small?: boolean;
  type?: string;
}

interface NumericInputProps extends ControlProps {
  allowNumericCharactersOnly?: boolean;
  buttonPosition?: Position.LEFT | Position.RIGHT | "none";
  clampValueOnBlur?: boolean;
  disabled?: boolean;
  fill?: boolean;
  inputRef?: React.Ref<HTMLInputElement>;
  large?: boolean;
  leftIcon?: IconName;
  locale?: string;
  majorStepSize?: number;
  max?: number;
  min?: number;
  minorStepSize?: number;
  placeholder?: string;
  selectAllOnFocus?: boolean;
  selectAllOnIncrement?: boolean;
  small?: boolean;
  stepSize?: number;
  value?: number | string;
  onValueChange?: (valueAsNumber: number, valueAsString: string, inputElement: HTMLInputElement | null) => void;
}

interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, ControlProps {
  asyncControl?: boolean;
  autoResize?: boolean;
  fill?: boolean;
  growVertically?: boolean;
  inputRef?: React.Ref<HTMLTextAreaElement>;
  large?: boolean;
  small?: boolean;
}

import { InputGroup, NumericInput, TextArea } from "@blueprintjs/core";

// Basic input
<InputGroup 
  placeholder="Enter your name"
  leftIcon="person"
  value={name}
  onChange={(e) => setName(e.target.value)}
/>

// Numeric input with constraints
<NumericInput
  min={0}
  max={100}
  stepSize={5}
  value={count}
  onValueChange={(num) => setCount(num)}
/>

// Auto-resizing text area
<TextArea
  placeholder="Enter your message"
  autoResize
  value={message}
  onChange={(e) => setMessage(e.target.value)}
/>

/**
 * Checkbox input with label and styling options
 * @param props - Checkbox state and configuration
 */
function Checkbox(props: CheckboxProps): JSX.Element;

/**
 * Radio button input for exclusive selections
 * @param props - Radio button state and configuration  
 */
function Radio(props: RadioProps): JSX.Element;

/**
 * Toggle switch with smooth animations
 * @param props - Switch state and styling options
 */
function Switch(props: SwitchProps): JSX.Element;

interface CheckboxProps extends ControlProps {
  alignIndicator?: Alignment;
  defaultIndeterminate?: boolean;
  indeterminate?: boolean;
  labelElement?: React.ReactNode;
}

interface RadioProps extends ControlProps {
  alignIndicator?: Alignment; 
  labelElement?: React.ReactNode;
  value?: string | number;
}

interface SwitchProps extends ControlProps {
  alignIndicator?: Alignment;
  innerLabel?: string;
  innerLabelChecked?: string;
  labelElement?: React.ReactNode;
}

interface ControlProps extends Props {
  checked?: boolean;
  defaultChecked?: boolean;
  disabled?: boolean;
  inline?: boolean;
  inputRef?: React.Ref<HTMLInputElement>;
  label?: React.ReactNode;
  large?: boolean;
  onChange?: React.FormEventHandler<HTMLInputElement>;
}

import { Checkbox, Radio, Switch } from "@blueprintjs/core";

// Checkbox with label
<Checkbox
  label="Accept terms and conditions"
  checked={accepted}
  onChange={(e) => setAccepted(e.target.checked)}
/>

// Radio buttons
<Radio
  label="Option A"
  value="a"
  checked={selected === "a"}
  onChange={() => setSelected("a")}
/>

// Switch with inner labels
<Switch
  label="Enable notifications"
  innerLabel="off"
  innerLabelChecked="on"
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
/>

/**
 * Groups form controls with consistent spacing and alignment
 * @param props - Control group layout and styling options
 */
function ControlGroup(props: ControlGroupProps): JSX.Element;

/**
 * Form field container with label, helper text, and validation
 * @param props - Form group content and validation state
 */
function FormGroup(props: FormGroupProps): JSX.Element;

interface ControlGroupProps extends Props {
  fill?: boolean;
  vertical?: boolean;
  children?: React.ReactNode;
}

interface FormGroupProps extends IntentProps, Props {
  contentClassName?: string;
  disabled?: boolean;
  helperText?: React.ReactNode;
  inline?: boolean;
  label?: React.ReactNode;
  labelFor?: string;
  labelInfo?: React.ReactNode;
  subLabel?: React.ReactNode;
  children?: React.ReactNode;
}

/**
 * File input with drag-and-drop support and customizable appearance
 * @param props - File input configuration and event handlers
 */
function FileInput(props: FileInputProps): JSX.Element;

/**
 * Radio button group with automatic layout and selection management
 * @param props - Radio group options and selection state
 */
function RadioGroup(props: RadioGroupProps): JSX.Element;

interface FileInputProps extends Props {
  buttonText?: React.ReactNode;
  disabled?: boolean;
  fill?: boolean;
  hasSelection?: boolean;
  inputProps?: React.HTMLProps<HTMLInputElement>;
  large?: boolean;
  onInputChange?: React.FormEventHandler<HTMLInputElement>;
  text?: React.ReactNode;
}

interface RadioGroupProps extends Props {
  disabled?: boolean;
  inline?: boolean;
  label?: React.ReactNode;
  name?: string;
  onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
  options?: OptionProps[];
  selectedValue?: string | number;
}

interface OptionProps extends Props {
  disabled?: boolean;
  label?: string;
  value?: string | number;
}

/**
 * Enhanced HTML select element with consistent Blueprint styling
 * @param props - Select options and configuration
 */
function HTMLSelect(props: HTMLSelectProps): JSX.Element;

interface HTMLSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, Props {
  disabled?: boolean;
  fill?: boolean;
  iconName?: HTMLSelectIconName;
  large?: boolean;
  minimal?: boolean;
  options?: Array<string | number | OptionProps>;
}

type HTMLSelectIconName = IconName | "double-caret-vertical";

import { ControlGroup, FormGroup, FileInput, RadioGroup, HTMLSelect } from "@blueprintjs/core";
import { Intent } from "@blueprintjs/core";

// Form group with validation
<FormGroup
  label="Email Address"
  labelFor="email-input"
  helperText="We'll never share your email"
  intent={emailError ? Intent.DANGER : Intent.NONE}
>
  <InputGroup 
    id="email-input"
    type="email"
    value={email}
    onChange={(e) => setEmail(e.target.value)}
  />
</FormGroup>

// Control group
<ControlGroup fill vertical>
  <InputGroup placeholder="First name" />
  <InputGroup placeholder="Last name" />
</ControlGroup>

// Radio group
<RadioGroup
  label="Choose a size"
  name="size"
  onChange={(e) => setSize(e.currentTarget.value)}
  options={[
    { label: "Small", value: "small" },
    { label: "Medium", value: "medium" },
    { label: "Large", value: "large" }
  ]}
  selectedValue={size}
/>

// File input
<FileInput
  text="Choose file..."
  buttonText="Browse"
  onInputChange={(e) => setFile(e.target.files?.[0])}
/>

// HTML select
<HTMLSelect
  options={["Option 1", "Option 2", "Option 3"]}
  value={selected}
  onChange={(e) => setSelected(e.target.value)}
/>

// HTML element prop types
type HTMLInputProps = React.InputHTMLAttributes<HTMLInputElement>;
type HTMLDivProps = React.HTMLAttributes<HTMLDivElement>;