Ant Design Mobile

import { Button, Toast, Modal, Dialog } from "antd-mobile";

const { Button, Toast, Modal, Dialog } = require("antd-mobile");

import { Button, Toast, List, Input } from "antd-mobile";

function App() {
  const handleClick = () => {
    Toast.show("Hello World!");
  };

  return (
    <div>
      <List header="Form Example">
        <List.Item>
          <Input placeholder="Enter your name" />
        </List.Item>
        <List.Item>
          <Button color="primary" block onClick={handleClick}>
            Submit
          </Button>
        </List.Item>
      </List>
    </div>
  );
}

// Core form components
function Button(props: ButtonProps): JSX.Element;
function Input(props: InputProps): JSX.Element;
function Checkbox(props: CheckboxProps): JSX.Element;
function Switch(props: SwitchProps): JSX.Element;

interface ButtonProps {
  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
  fill?: 'solid' | 'outline' | 'none';
  size?: 'mini' | 'small' | 'middle' | 'large';
  block?: boolean;
  loading?: boolean | 'auto';
  disabled?: boolean;
  onClick?: (event: React.MouseEvent) => void | Promise<void>;
  children?: React.ReactNode;
}

interface InputProps {
  type?: 'text' | 'password' | 'number' | 'search';
  placeholder?: string;
  value?: string;
  defaultValue?: string;
  maxLength?: number;
  disabled?: boolean;
  clearable?: boolean;
  onChange?: (val: string) => void;
}

// Core display components
function Card(props: CardProps): JSX.Element;
function List(props: ListProps): JSX.Element;
function Avatar(props: AvatarProps): JSX.Element;
function Badge(props: BadgeProps): JSX.Element;

interface CardProps {
  title?: React.ReactNode;
  extra?: React.ReactNode;
  headerStyle?: React.CSSProperties;
  bodyStyle?: React.CSSProperties;
  children?: React.ReactNode;
}

interface ListProps {
  header?: React.ReactNode;
  mode?: 'default' | 'card';
  children?: React.ReactNode;
}

// Core navigation components
function NavBar(props: NavBarProps): JSX.Element;
function Dropdown(props: DropdownProps): JSX.Element;
function TabBar(props: TabBarProps): JSX.Element;
function Tabs(props: TabsProps): JSX.Element;
function SideBar(props: SideBarProps): JSX.Element;

interface NavBarProps {
  back?: React.ReactNode;
  backIcon?: boolean | React.ReactNode;
  left?: React.ReactNode;
  right?: React.ReactNode;
  onBack?: () => void;
  children?: React.ReactNode;
}

interface TabBarProps {
  activeKey?: string;
  defaultActiveKey?: string;
  onChange?: (key: string) => void;
  children?: React.ReactNode;
}

// Core feedback components
function ActionSheet(props: ActionSheetProps): JSX.Element;
function Popover(props: PopoverProps): JSX.Element;
function Toast(props: ToastProps): JSX.Element;
function Modal(props: ModalProps): JSX.Element;
function Dialog(props: DialogProps): JSX.Element;
function Loading(props: LoadingProps): JSX.Element;

// Toast imperative API
namespace Toast {
  function show(content: string | ToastShowProps): ToastHandler;
  function clear(): void;
}

interface ToastShowProps {
  content: React.ReactNode;
  duration?: number;
  position?: 'top' | 'bottom' | 'center';
  mask?: boolean;
  maskClickable?: boolean;
}

interface ToastHandler {
  close(): void;
}

// Core picker components
function DatePicker(props: DatePickerProps): JSX.Element;
function Picker(props: PickerProps): JSX.Element;
function Calendar(props: CalendarProps): JSX.Element;
function CascadePicker(props: CascadePickerProps): JSX.Element;

interface DatePickerProps {
  value?: Date;
  defaultValue?: Date;
  min?: Date;
  max?: Date;
  precision?: 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
  onChange?: (val: Date | null) => void;
  children?: React.ReactNode;
}

interface PickerProps<T = any> {
  columns: PickerColumn<T>[];
  value?: T[];
  defaultValue?: T[];
  onChange?: (val: T[], extend: PickerValueExtend) => void;
  children?: React.ReactNode;
}

// Core gesture components
function SwipeAction(props: SwipeActionProps): JSX.Element;
function PullToRefresh(props: PullToRefreshProps): JSX.Element;
function Swiper(props: SwiperProps): JSX.Element;
function FloatingBubble(props: FloatingBubbleProps): JSX.Element;

interface SwipeActionProps {
  rightActions?: SwipeActionAction[];
  leftActions?: SwipeActionAction[];
  onActionsReveal?: (side: 'left' | 'right', actions: SwipeActionAction[]) => void;
  children: React.ReactElement;
}

interface PullToRefreshProps {
  onRefresh: () => Promise<any>;
  pullingText?: React.ReactNode;
  canReleaseText?: React.ReactNode;
  refreshingText?: React.ReactNode;
  completeText?: React.ReactNode;
  disabled?: boolean;
  children: React.ReactNode;
}

// Core layout components
function Grid(props: GridProps): JSX.Element;
function Space(props: SpaceProps): JSX.Element;
function SafeArea(props: SafeAreaProps): JSX.Element;
function AutoCenter(props: AutoCenterProps): JSX.Element;

interface GridProps {
  columns: number;
  gap?: number | string | [number | string, number | string];
  children?: React.ReactNode;
}

interface SpaceProps {
  direction?: 'horizontal' | 'vertical';
  align?: 'start' | 'end' | 'center' | 'baseline';
  justify?: 'start' | 'end' | 'center' | 'around' | 'between' | 'evenly';
  wrap?: boolean;
  block?: boolean;
  gap?: 'small' | 'middle' | 'large' | number | string;
  children?: React.ReactNode;
}

// Configuration components and utilities
function ConfigProvider(props: ConfigProviderProps): JSX.Element;
function useConfig(): ConfigProviderProps;
function setDefaultConfig(config: Config): void;

interface ConfigProviderProps {
  locale?: Locale;
  theme?: 'light' | 'dark';
  children?: React.ReactNode;
}

// Motion control utilities
function reduceMotion(): void;
function restoreMotion(): void;

// Common prop patterns
interface NativeProps<S extends string = never> {
  className?: string;
  style?: React.CSSProperties & Partial<Record<S, string>>;
  tabIndex?: number;
}

// Ref types for imperative control
interface ButtonRef {
  nativeElement: HTMLButtonElement | null;
}

interface InputRef {
  nativeElement: HTMLInputElement | null;
  clear(): void;
  focus(): void;
  blur(): void;
}

// Event handlers
type ClickHandler = (event: React.MouseEvent) => void | Promise<void>;
type ChangeHandler<T> = (value: T) => void;