Ant Design

import { Button, Input, Form, Table, message } from "antd";

import "antd/dist/reset.css"; // or antd/dist/antd.css

const { Button, Input, Form, Table, message } = require("antd");

import Button from "antd/es/button";
import "antd/es/button/style";

import React from "react";
import { Button, Form, Input, message, ConfigProvider } from "antd";

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

  const onFinish = (values: any) => {
    message.success("Form submitted successfully!");
    console.log("Received values:", values);
  };

  return (
    <ConfigProvider>
      <Form form={form} onFinish={onFinish} layout="vertical">
        <Form.Item 
          label="Username" 
          name="username"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input placeholder="Enter username" />
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </ConfigProvider>
  );
}

// Primary input components
declare const Input: InputComponent & {
  Group: typeof Group;
  Search: typeof Search;
  TextArea: typeof TextArea;
  Password: typeof Password;
  OTP: typeof OTP;
};

declare const Select: SelectComponent;
declare const Form: FormComponent & {
  useForm: () => [FormInstance];
  Item: typeof FormItem;
  List: typeof FormList;
};

// Primary display components
declare const Table: TableComponent;
declare const List: ListComponent & {
  Item: typeof ListItem;
};
declare const Typography: TypographyComponent & {
  Text: typeof Text;
  Title: typeof Title;
  Paragraph: typeof Paragraph;
};

// Primary navigation components
declare const Menu: MenuComponent & {
  Item: typeof MenuItem;
  SubMenu: typeof SubMenu;
};
declare const Breadcrumb: BreadcrumbComponent & {
  Item: typeof BreadcrumbItem;
};

// Primary feedback components
declare const Modal: ModalComponent & {
  info: (config: ModalFuncProps) => void;
  success: (config: ModalFuncProps) => void;
  error: (config: ModalFuncProps) => void;
  warning: (config: ModalFuncProps) => void;
  confirm: (config: ModalFuncProps) => void;
};

declare const message: MessageInstance & {
  success: (content: React.ReactNode, duration?: number) => MessageType;
  error: (content: React.ReactNode, duration?: number) => MessageType;
  info: (content: React.ReactNode, duration?: number) => MessageType;
  warning: (content: React.ReactNode, duration?: number) => MessageType;
  loading: (content: React.ReactNode, duration?: number) => MessageType;
};

// Primary layout components
declare const Layout: LayoutComponent & {
  Header: typeof Header;
  Footer: typeof Footer;
  Content: typeof Content;
  Sider: typeof Sider;
};

declare const Grid: {
  useBreakpoint: () => Partial<Record<Breakpoint, boolean>>;
};
declare const Row: RowComponent;
declare const Col: ColComponent;

// Configuration components
declare const ConfigProvider: React.FC<ConfigProviderProps>;

declare const theme: {
  useToken: () => { theme: any; token: GlobalToken; hashId: string };
  defaultAlgorithm: MappingAlgorithm;
  darkAlgorithm: MappingAlgorithm;
  compactAlgorithm: MappingAlgorithm;
  getDesignToken: (config?: any) => GlobalToken;
};

// Specialized components
declare const FloatButton: FloatButtonComponent & {
  Group: typeof FloatButtonGroup;
  BackTop: typeof BackTop;
};
declare const Tour: TourComponent;
declare const Transfer: TransferComponent;
declare const Watermark: WatermarkComponent;
declare const Segmented: SegmentedComponent;
declare const QRCode: QRCodeComponent;

// Utility types for component prop extraction
type GetProps<T extends React.ComponentType<any> | object> = 
  T extends React.ComponentType<infer P> ? P : T extends object ? T : never;

type GetRef<T extends React.ComponentType<any> | React.Component<any>> = 
  T extends React.Component<any> ? T : 
  T extends React.ComponentType<infer P> ? ExtractRefAttributesRef<P> : never;

type GetProp<T extends React.ComponentType<any> | object, PropName extends keyof GetProps<T>> = 
  NonNullable<GetProps<T>[PropName]>;

// Size types
type SizeType = "small" | "middle" | "large" | undefined;

// Button types
type ButtonType = "default" | "primary" | "dashed" | "link" | "text";
type ButtonShape = "default" | "circle" | "round";
type ButtonHTMLType = "submit" | "button" | "reset";

// Breakpoint types  
type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";

// Focus options for input components
interface InputFocusOptions {
  cursor?: "start" | "end" | "all";
  preventScroll?: boolean;
}

// Common component props pattern
interface BaseComponentProps {
  className?: string;
  style?: React.CSSProperties;
  prefixCls?: string;
  rootClassName?: string;
  size?: SizeType;
  disabled?: boolean;
  [key: `data-${string}`]: string;
}

// Button component props
interface ButtonProps extends BaseComponentProps {
  type?: ButtonType;
  shape?: ButtonShape;
  htmlType?: ButtonHTMLType;
  danger?: boolean;
  loading?: boolean | { delay?: number };
  ghost?: boolean;
  block?: boolean;
  children?: React.ReactNode;
  icon?: React.ReactNode;
  href?: string;
  target?: string;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

// Common field name mapping interface
interface FieldNames {
  label?: string;
  value?: string;
  children?: string;
  title?: string;
  key?: string;
}

// Labeled value interface for select-like components
interface LabeledValue {
  key?: string;
  value: string | number;
  label: React.ReactNode;
}

// Tree node props interface
interface AntTreeNodeProps {
  className?: string;
  checkable?: boolean;
  disabled?: boolean;
  disableCheckbox?: boolean;
  expanded?: boolean;
  isLeaf?: boolean;
  selected?: boolean;
  icon?: React.ReactNode;
  title?: React.ReactNode;
  selectable?: boolean;
  switcherIcon?: React.ReactNode;
}

// Event data node interface
interface EventDataNode<T = any> {
  key: React.Key;
  title?: React.ReactNode;
  children?: EventDataNode<T>[];
  isLeaf?: boolean;
  [key: string]: any;
}

// Panel props for collapse
interface PanelProps {
  key: string | number;
  header?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
  disabled?: boolean;
  accordion?: boolean;
  forceRender?: boolean;
  showArrow?: boolean;
  extra?: React.ReactNode;
  collapsible?: "header" | "icon" | "disabled";
}

interface CollapsePanelProps extends PanelProps {
  children?: React.ReactNode;
}

// Check info for tree components
interface CheckInfo {
  event: "check";
  node: EventDataNode;
  checked: boolean;
  nativeEvent: MouseEvent;
  checkedNodes: any[];
  checkedNodesPositions?: { node: any; pos: string }[];
  halfCheckedKeys?: React.Key[];
}

// Locale configuration
interface Locale {
  locale: string;
  Pagination?: PaginationLocale;
  DatePicker?: DatePickerLocale;
  TimePicker?: Record<string, any>;
  Calendar?: Record<string, any>;
  Table?: TableLocale;
  Modal?: ModalLocale;
  Tour?: TourLocale;
  Popconfirm?: PopconfirmLocale;
  Transfer?: TransferLocale;
  Select?: Record<string, any>;
  Upload?: UploadLocale;
  Empty?: TransferLocaleForEmpty;
  global?: {
    placeholder?: string;
    close?: string;
  };
}

// Available locale imports
import enUS from "antd/locale/en_US";
import zhCN from "antd/locale/zh_CN";
import jaJP from "antd/locale/ja_JP";
// ... and 67 more locales