import { default as React } from 'react';
import { LabelPlacement } from '../inputs/Input';
export interface ConnectionConfig {
    /** Host */
    host: string;
    /** Port */
    port: number;
    /** Protocol */
    protocol: "ws" | "wss" | "mqtt" | "mqtts" | "tcp";
    /** Path (e.g. /mqtt) */
    path?: string;
    /** Username */
    username?: string;
    /** Password */
    password?: string;
    /** Client ID */
    clientId?: string;
}
export interface ConnectionFormProps {
    /** Connect handler */
    onConnect: (config: ConnectionConfig) => void;
    /** Disconnect handler */
    onDisconnect?: () => void;
    /** Current connection state */
    connected?: boolean;
    /** Connection in progress */
    connecting?: boolean;
    /** Default protocol */
    defaultProtocol?: ConnectionConfig["protocol"];
    /** Default host */
    defaultHost?: string;
    /** Default port */
    defaultPort?: number;
    /** Default path */
    defaultPath?: string;
    /** Show advanced fields (clientId, credentials) */
    showAdvanced?: boolean;
    /** Persist to localStorage (key name) */
    persistKey?: string;
    /** Parse URL params on mount */
    parseUrlParams?: boolean;
    /** Error message */
    error?: string | null;
    /** Compact layout */
    compact?: boolean;
    /** Custom style */
    style?: React.CSSProperties;
    /**
     * Label placement style for form fields.
     * - `'outlined'` — label sits on the input border (notched/Material-style). **Default.**
     * - `'above'`    — label sits above the input with a gap (classic stack).
     */
    labelPlacement?: LabelPlacement;
}
export declare const ConnectionForm: React.NamedExoticComponent<ConnectionFormProps>;
export default ConnectionForm;