Form Components

/**
 * Button component with loading states and Promise support
 * @param props - Button configuration
 * @returns React button element
 */
function Button(props: ButtonProps): JSX.Element;

interface ButtonProps {
  /** Button color theme */
  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
  /** Button fill style */
  fill?: 'solid' | 'outline' | 'none';
  /** Button size */
  size?: 'mini' | 'small' | 'middle' | 'large';
  /** Whether button takes full width */
  block?: boolean;
  /** Loading state, 'auto' enables loading during async onClick */
  loading?: boolean | 'auto';
  /** Loading text to show during loading state */
  loadingText?: string;
  /** Custom loading icon */
  loadingIcon?: React.ReactNode;
  /** Whether button is disabled */
  disabled?: boolean;
  /** Click handler supporting both sync and async operations */
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
  /** HTML button type */
  type?: 'submit' | 'reset' | 'button';
  /** Button shape */
  shape?: 'default' | 'rounded' | 'rectangular';
  /** Button content */
  children?: React.ReactNode;
  /** Native HTML props */
  onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
  onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
  onTouchStart?: React.TouchEventHandler<HTMLButtonElement>;
  onTouchEnd?: React.TouchEventHandler<HTMLButtonElement>;
  id?: string;
  form?: string;
} & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;

interface ButtonRef {
  /** Access to the underlying button element */
  nativeElement: HTMLButtonElement | null;
}

import { Button } from "antd-mobile";

// Basic button
<Button color="primary">Click me</Button>

// Loading button with async handler
<Button
  color="primary"
  loading="auto"
  onClick={async () => {
    await submitForm();
  }}
>
  Submit
</Button>

// Block button with custom styling
<Button
  block
  color="danger"
  style={{'--text-color': 'white'}}
>
  Delete
</Button>

/**
 * Text input component with mobile optimizations
 * @param props - Input configuration
 * @returns React input element
 */
function Input(props: InputProps): JSX.Element;

interface InputProps {
  /** Input type */
  type?: 'text' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'email';
  /** Placeholder text */
  placeholder?: string;
  /** Controlled value */
  value?: string;
  /** Default uncontrolled value */
  defaultValue?: string;
  /** Maximum character length */
  maxLength?: number;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Whether input is read-only */
  readOnly?: boolean;
  /** Whether to show clear button */
  clearable?: boolean;
  /** Clear button icon */
  clearIcon?: React.ReactNode;
  /** Input change handler */
  onChange?: (val: string) => void;
  /** Focus event handler */
  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
  /** Blur event handler */
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
  /** Clear button click handler */
  onClear?: () => void;
  /** Enter key press handler */
  onEnterPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
} & NativeProps<'--text-align' | '--placeholder-color' | '--disabled-color' | '--text-color'>;

interface InputRef {
  /** Access to the underlying input element */
  nativeElement: HTMLInputElement | null;
  /** Clear input value */
  clear(): void;
  /** Focus the input */
  focus(): void;
  /** Blur the input */
  blur(): void;
}

import { Input } from "antd-mobile";

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

// Clearable input with change handler
<Input
  clearable
  placeholder="Search..."
  onChange={(val) => console.log(val)}
/>

// Number input with max length
<Input
  type="number"
  maxLength={6}
  placeholder="Enter PIN"
/>

/**
 * Multi-line text input component
 * @param props - TextArea configuration
 * @returns React textarea element
 */
function TextArea(props: TextAreaProps): JSX.Element;

interface TextAreaProps {
  /** Controlled value */
  value?: string;
  /** Default uncontrolled value */
  defaultValue?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Whether textarea is disabled */
  disabled?: boolean;
  /** Whether textarea is read-only */
  readOnly?: boolean;
  /** Whether to auto-resize height */
  autoSize?: boolean | { minRows?: number; maxRows?: number };
  /** Number of visible text lines */
  rows?: number;
  /** Maximum character length */
  maxLength?: number;
  /** Whether to show character count */
  showCount?: boolean | ((length: number, maxLength?: number) => React.ReactNode);
  /** Input change handler */
  onChange?: (val: string) => void;
  /** Focus event handler */
  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
  /** Blur event handler */
  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
} & NativeProps<'--text-align' | '--placeholder-color' | '--disabled-color' | '--text-color' | '--count-text-color'>;

interface TextAreaRef {
  /** Access to the underlying textarea element */
  nativeElement: HTMLTextAreaElement | null;
  /** Focus the textarea */
  focus(): void;
  /** Blur the textarea */
  blur(): void;
}

/**
 * Checkbox component with group support
 * @param props - Checkbox configuration
 * @returns React checkbox element
 */
function Checkbox(props: CheckboxProps): JSX.Element;

interface CheckboxProps {
  /** Whether checkbox is checked */
  checked?: boolean;
  /** Default checked state */
  defaultChecked?: boolean;
  /** Whether checkbox is disabled */
  disabled?: boolean;
  /** Indeterminate state */
  indeterminate?: boolean;
  /** Change handler */
  onChange?: (checked: boolean) => void;
  /** Checkbox content */
  children?: React.ReactNode;
  /** Custom checkbox icon */
  icon?: (checked: boolean, indeterminate: boolean) => React.ReactNode;
  /** Checkbox value (for group usage) */
  value?: string;
} & NativeProps<'--icon-size' | '--font-size' | '--gap'>;

interface CheckboxRef {
  /** Access to the underlying input element */
  nativeElement: HTMLInputElement | null;
}

/**
 * Checkbox group component
 * @param props - CheckboxGroup configuration
 * @returns React checkbox group element
 */
function CheckboxGroup(props: CheckboxGroupProps): JSX.Element;

interface CheckboxGroupProps {
  /** Selected values */
  value?: string[];
  /** Default selected values */
  defaultValue?: string[];
  /** Whether all checkboxes are disabled */
  disabled?: boolean;
  /** Change handler */
  onChange?: (val: string[]) => void;
  /** Group content */
  children?: React.ReactNode;
} & NativeProps;

// Usage through Checkbox namespace
declare namespace Checkbox {
  const Group: typeof CheckboxGroup;
}

/**
 * Radio button component
 * @param props - Radio configuration
 * @returns React radio element
 */
function Radio(props: RadioProps): JSX.Element;

interface RadioProps {
  /** Whether radio is checked */
  checked?: boolean;
  /** Default checked state */
  defaultChecked?: boolean;
  /** Whether radio is disabled */
  disabled?: boolean;
  /** Change handler */
  onChange?: (checked: boolean) => void;
  /** Radio content */
  children?: React.ReactNode;
  /** Custom radio icon */
  icon?: (checked: boolean) => React.ReactNode;
  /** Radio value (for group usage) */
  value?: string;
} & NativeProps<'--icon-size' | '--font-size' | '--gap'>;

/**
 * Radio group component
 * @param props - RadioGroup configuration
 * @returns React radio group element
 */
function RadioGroup(props: RadioGroupProps): JSX.Element;

interface RadioGroupProps {
  /** Selected value */
  value?: string;
  /** Default selected value */
  defaultValue?: string;
  /** Whether all radios are disabled */
  disabled?: boolean;
  /** Change handler */
  onChange?: (val: string) => void;
  /** Group content */
  children?: React.ReactNode;
} & NativeProps;

// Usage through Radio namespace
declare namespace Radio {
  const Group: typeof RadioGroup;
}

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

interface SwitchProps {
  /** Whether switch is checked */
  checked?: boolean;
  /** Default checked state */
  defaultChecked?: boolean;
  /** Whether switch is disabled */
  disabled?: boolean;
  /** Change handler */
  onChange?: (checked: boolean) => void;
  /** Loading state */
  loading?: boolean;
  /** Checked text content */
  checkedText?: React.ReactNode;
  /** Unchecked text content */
  uncheckedText?: React.ReactNode;
} & NativeProps<'--checked-color' | '--width' | '--height' | '--border-width' | '--border-color'>;

/**
 * Numeric stepper component
 * @param props - Stepper configuration
 * @returns React stepper element
 */
function Stepper(props: StepperProps): JSX.Element;

interface StepperProps {
  /** Current value */
  value?: number;
  /** Default value */
  defaultValue?: number;
  /** Minimum value */
  min?: number;
  /** Maximum value */
  max?: number;
  /** Step increment */
  step?: number;
  /** Number of decimal places */
  digits?: number;
  /** Whether stepper is disabled */
  disabled?: boolean;
  /** Change handler */
  onChange?: (value: number | undefined) => void;
  /** Custom input formatter */
  formatter?: (value?: number) => string;
  /** Custom input parser */
  parser?: (text: string) => number;
} & NativeProps<'--height' | '--input-width' | '--input-font-size' | '--input-background-color' | '--button-font-size' | '--button-background-color' | '--button-width' | '--border-radius' | '--border' | '--border-inner' | '--active-border'>;

interface StepperRef {
  /** Access to the underlying input element */
  nativeElement: HTMLInputElement | null;
  /** Focus the input */
  focus(): void;
  /** Blur the input */
  blur(): void;
}

/**
 * Star rating component
 * @param props - Rate configuration
 * @returns React rate element
 */
function Rate(props: RateProps): JSX.Element;

interface RateProps {
  /** Current rating value */
  value?: number;
  /** Default rating value */
  defaultValue?: number;
  /** Total number of stars */
  count?: number;
  /** Whether rating is read-only */
  readOnly?: boolean;
  /** Whether to allow half stars */
  allowHalf?: boolean;
  /** Whether to clear rating on second click */
  allowClear?: boolean;
  /** Change handler */
  onChange?: (value: number) => void;
  /** Custom star character */
  character?: React.ReactNode | ((index: number) => React.ReactNode);
} & NativeProps<'--star-size' | '--star-gap'>;

/**
 * Form container component
 * @param props - Form configuration
 * @returns React form element
 */
function Form(props: FormProps): JSX.Element;

interface FormProps {
  /** Form name */
  name?: string;
  /** Form layout */
  layout?: 'horizontal' | 'vertical';
  /** Form footer content */
  footer?: React.ReactNode;
  /** Form mode for styling */
  mode?: 'default' | 'card';
  /** Initial form values */
  initialValues?: Record<string, any>;
  /** Form validation handler */
  onValuesChange?: (changedValues: any, allValues: any) => void;
  /** Form submission handler */
  onFinish?: (values: any) => void;
  /** Form submission failure handler */
  onFinishFailed?: (errorInfo: any) => void;
  /** Form content */
  children?: React.ReactNode;
} & NativeProps;

/**
 * Form item component
 * @param props - FormItem configuration
 * @returns React form item element
 */
function FormItem(props: FormItemProps): JSX.Element;

interface FormItemProps {
  /** Field name for form control */
  name?: string | string[];
  /** Field label */
  label?: React.ReactNode;
  /** Field validation rules */
  rules?: any[];
  /** Whether field is required */
  required?: boolean;
  /** Field help text */
  help?: React.ReactNode;
  /** Validation status */
  validateStatus?: 'success' | 'warning' | 'error' | 'validating';
  /** Additional content below field */
  extra?: React.ReactNode;
  /** Click handler for label */
  onClick?: (e: React.MouseEvent) => void;
  /** Form control content */
  children?: React.ReactNode;
} & NativeProps<'--border-inner' | '--border-top' | '--border-bottom' | '--prefix-width'>;

// Usage through Form namespace
declare namespace Form {
  const Item: typeof FormItem;
  const useForm: () => any;
  const useWatch: (name: string, form?: any) => any;
}

/**
 * Search input component
 * @param props - SearchBar configuration
 * @returns React search bar element
 */
function SearchBar(props: SearchBarProps): JSX.Element;

interface SearchBarProps {
  /** Current search value */
  value?: string;
  /** Placeholder text */
  placeholder?: string;
  /** Maximum character length */
  maxLength?: number;
  /** Whether to show cancel button */
  showCancel?: boolean | ((focus: boolean, value: string) => boolean);
  /** Cancel button text */
  cancelText?: string;
  /** Whether search bar is disabled */
  disabled?: boolean;
  /** Whether search bar is read-only */
  readOnly?: boolean;
  /** Whether to clear on cancel */
  clearOnCancel?: boolean;
  /** Change handler */
  onChange?: (val: string) => void;
  /** Search handler */
  onSearch?: (val: string) => void;
  /** Focus event handler */
  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
  /** Blur event handler */
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
  /** Clear handler */
  onClear?: () => void;
  /** Cancel handler */
  onCancel?: () => void;
} & NativeProps<'--border-radius' | '--background' | '--border' | '--placeholder-color' | '--text-color' | '--cancel-button-color'>;

interface SearchBarRef {
  /** Access to the underlying input element */
  nativeElement: HTMLInputElement | null;
  /** Focus the search bar */
  focus(): void;
  /** Blur the search bar */
  blur(): void;
}

import { Form, Input, Button, Checkbox, Switch } from "antd-mobile";

function FormExample() {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log('Form values:', values);
  };

  return (
    <Form
      form={form}
      onFinish={onFinish}
      footer={
        <Button block type="submit" color="primary">
          Submit
        </Button>
      }
    >
      <Form.Item name="username" label="Username" rules={[{ required: true }]}>
        <Input placeholder="Enter username" />
      </Form.Item>

      <Form.Item name="password" label="Password">
        <Input type="password" placeholder="Enter password" />
      </Form.Item>

      <Form.Item name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item name="notifications" valuePropName="checked">
        <Switch>Enable notifications</Switch>
      </Form.Item>
    </Form>
  );
}