import { AppearancePreference } from '../../theme';
import { Value } from '@tempots/dom';
/**
 * Options for the {@link AppearanceSelector} component.
 */
export type AppearanceSelectorOptions = {
    /** The current appearance preference value. */
    value: Value<AppearancePreference>;
    /** Callback invoked when the user selects a different appearance. */
    onChange?: (value: AppearancePreference) => void;
    /**
     * Whether the selector is disabled.
     * @default false
     */
    disabled?: Value<boolean>;
};
/**
 * A segmented input for selecting the application appearance (light, dark, or system).
 *
 * Renders three icon segments for system (laptop), light (sun), and dark (moon) modes
 * using the {@link SegmentedInput} component.
 *
 * @param options - Configuration options for the appearance selector.
 * @returns A renderable segmented appearance selector component.
 *
 * @example
 * ```ts
 * AppearanceSelector({
 *   value: prop<AppearancePreference>('system'),
 *   onChange: pref => console.log('Appearance:', pref),
 * })
 * ```
 */
export declare function AppearanceSelector({ value, onChange, disabled, }: AppearanceSelectorOptions): import("@tempots/dom").Renderable;
/**
 * A standalone appearance selector that automatically connects to the application's
 * {@link Theme} provider. Reads and writes the appearance preference from the
 * current theme context without requiring manual wiring.
 *
 * @returns A renderable standalone appearance selector component.
 *
 * @example
 * ```ts
 * // Just drop it in -- no props needed
 * StandaloneAppearanceSelector()
 * ```
 */
export declare function StandaloneAppearanceSelector(): import("@tempots/dom").Renderable;
