import { JSX } from 'solid-js';
export interface SettingsGroupProps {
    /** Small section heading shown above the card. */
    heading: string;
    /** Optional muted description under the heading. */
    description?: string;
    /** The stacked `SettingItem` rows. */
    children: JSX.Element;
    class?: string;
}
/**
 * A settings section: a small heading + optional muted description over a bordered,
 * rounded card that stacks `SettingItem` rows with hairline dividers between them.
 * Host-agnostic chrome: the SAME group drops into a modal or a full settings page;
 * only the content (the rows) changes per app.
 */
export declare function SettingsGroup(props: SettingsGroupProps): JSX.Element;
export interface SettingItemProps {
    /** Row label (primary text). */
    label: string;
    /** Optional secondary description under the label. */
    description?: string;
    /** The control on the right (a `Switch`, `Segmented`, select, ...). Omit for a
     *  plain label row. */
    control?: JSX.Element;
    class?: string;
}
/**
 * One row inside a `SettingsGroup`: a left label/description block and an optional
 * right-aligned `control`, vertically centered with comfortable padding.
 */
export declare function SettingItem(props: SettingItemProps): JSX.Element;