/**
 * @fileoverview Saasflare SettingsSection — label + description + control layout.
 * @module packages/ui/components/ui/settings-section
 * @layer core
 *
 * A horizontal layout for settings rows: label/description on the left,
 * control (toggle, select, input) on the right. Stacks vertically on mobile.
 *
 * @example
 * import { SettingsSection } from "@saasflare/ui";
 *
 * <SettingsSection
 *   label="Email Notifications"
 *   description="Receive email updates about your account activity."
 * >
 *   <Switch checked={enabled} onCheckedChange={setEnabled} />
 * </SettingsSection>
 */
import * as React from "react";
import { type SaasflareComponentProps } from "../../providers";
/** Props for the SettingsSection component */
interface SettingsSectionProps extends Omit<React.ComponentProps<"div">, keyof SaasflareComponentProps>, SaasflareComponentProps {
    /** Setting label */
    label: string;
    /** Optional description of the setting */
    description?: string;
}
/**
 * Settings row with label, description, and control slot.
 *
 * @component
 * @layer core
 *
 * @param {string} label - Setting label
 * @param {string} description - Description of what the setting controls
 *
 * @example
 * <SettingsSection
 *   label="Two-Factor Authentication"
 *   description="Add an extra layer of security to your account."
 * >
 *   <Button variant="outline" size="sm">Enable</Button>
 * </SettingsSection>
 */
declare function SettingsSection({ label, description, className, children, surface, radius, animated, iconWeight, ...props }: SettingsSectionProps): import("react/jsx-runtime").JSX.Element;
export { SettingsSection, type SettingsSectionProps };