import { Refable } from "@trackunit/react-components";
import { ReactElement } from "react";
import { ToggleSwitchProps } from "../ToggleSwitch/ToggleSwitch";
export interface ToggleSwitchOptionProps extends Omit<ToggleSwitchProps, "ref">, Refable<HTMLLabelElement> {
    /**
     * The label of the toggle.
     */
    label: ReactElement | string;
    /**
     * The description of the toggle.
     */
    description?: ReactElement | string;
    /**
     * An element to display after the label
     */
    suffix?: ReactElement;
}
/**
 * The `<ToggleSwitchOption>` component is used for binary on/off settings in forms.
 * It combines a toggle switch with a label and optional description for complete form integration.
 *
 * ### When to use
 * - Enable/disable feature toggles in settings
 * - Binary choices where the action takes effect immediately
 * - Preferences that represent on/off states
 *
 * ### When not to use
 * - Multiple selections from a list - use `Checkbox` components instead
 * - Mutually exclusive options - use `RadioGroup` instead
 * - Actions requiring confirmation - use buttons with confirmation dialog
 *
 * @example Basic usage
 * ```tsx
 * import { ToggleSwitchOption } from "@trackunit/react-form-components";
 *
 * const [notifications, setNotifications] = useState(true);
 *
 * <ToggleSwitchOption
 *   id="notifications"
 *   label="Enable Notifications"
 *   toggled={notifications}
 *   onChange={(toggled) => setNotifications(toggled)}
 * />
 * ```
 * @example With description
 * ```tsx
 * import { ToggleSwitchOption } from "@trackunit/react-form-components";
 *
 * <ToggleSwitchOption
 *   id="email-alerts"
 *   label="Email Alerts"
 *   description="Receive email notifications for important updates"
 *   toggled={emailAlerts}
 *   onChange={(toggled) => setEmailAlerts(toggled)}
 * />
 * ```
 * @example In a settings list
 * ```tsx
 * import { ToggleSwitchOption } from "@trackunit/react-form-components";
 *
 * <div className="space-y-4">
 *   <ToggleSwitchOption
 *     id="dark-mode"
 *     label="Dark Mode"
 *     description="Use dark theme throughout the application"
 *     toggled={darkMode}
 *     onChange={(toggled) => setDarkMode(toggled)}
 *   />
 *   <ToggleSwitchOption
 *     id="auto-save"
 *     label="Auto-save"
 *     description="Automatically save changes as you type"
 *     toggled={autoSave}
 *     onChange={(toggled) => setAutoSave(toggled)}
 *   />
 * </div>
 * ```
 * @param {ToggleSwitchOptionProps} props - The props for the ToggleSwitchOption component
 * @returns {ReactElement} ToggleSwitchOption component
 */
export declare const ToggleSwitchOption: {
    ({ label, className, description, suffix, id, "data-testid": dataTestId, ref, disabled, readOnly, ...rest }: ToggleSwitchOptionProps): ReactElement;
    displayName: string;
};