import * as _solidjs_use_shared_solid_to_vue from '@solidjs-use/shared/solid-to-vue';
import * as solid_js from 'solid-js';
import { Signal } from 'solid-js';
import { MaybeElementAccessor, MaybeAccessor } from '@solidjs-use/shared';
import { UseStorageOptions } from '../useStorage/index.js';
import { StorageLike } from '../ssr-handlers.js';
import '../_configurable.js';

type BasicColorMode = 'light' | 'dark';
type BasicColorSchema = BasicColorMode | 'auto';
interface UseColorModeOptions<T extends string = BasicColorMode> extends UseStorageOptions<T | BasicColorMode> {
    /**
     * CSS Selector for the target element applying to
     *
     * @default 'html'
     */
    selector?: string | MaybeElementAccessor;
    /**
     * HTML attribute applying the target element
     *
     * @default 'class'
     */
    attribute?: string;
    /**
     * The initial color mode
     *
     * @default 'auto'
     */
    initialValue?: MaybeAccessor<T | BasicColorSchema>;
    /**
     * Prefix when adding value to the attribute
     */
    modes?: Partial<Record<T | BasicColorSchema, string>>;
    /**
     * A custom handler for handle the updates.
     * When specified, the default behavior will be overridden.
     *
     * @default undefined
     */
    onChanged?: (mode: T | BasicColorMode, defaultHandler: (mode: T | BasicColorMode) => void) => void;
    /**
     * Custom storage Signal
     *
     * When provided, `useStorage` will be skipped
     */
    storageSignal?: Signal<T | BasicColorSchema>;
    /**
     * Key to persist the data into localStorage/sessionStorage.
     *
     * Pass `null` to disable persistence
     *
     * @default 'solidjs-use-color-scheme'
     */
    storageKey?: string | null;
    /**
     * Storage object, can be localStorage or sessionStorage
     *
     * @default localStorage
     */
    storage?: StorageLike;
    /**
     * Emit `auto` mode from state
     *
     * When set to `true`, preferred mode won't be translated into `light` or `dark`.
     * This is useful when the fact that `auto` mode was selected needs to be known.
     *
     * @default undefined
     * @deprecated use `store()` when `auto` mode needs to be known
     */
    emitAuto?: boolean;
    /**
     * Disable transition on switch
     *
     * @see https://paco.me/writing/disable-theme-transitions
     * @default true
     */
    disableTransition?: boolean;
}
/**
 * Reactive color mode with auto data persistence.
 *
 * @see https://solidjs-use.github.io/solidjs-use/core/useColorMode
 */
declare function useColorMode<T extends string = BasicColorMode>(options?: UseColorModeOptions<T>): {
    mode: solid_js.Accessor<BasicColorSchema | T>;
    setMode: _solidjs_use_shared_solid_to_vue.ComputedSetter<BasicColorSchema | T>;
    store: solid_js.Accessor<BasicColorSchema | T>;
    setStore: solid_js.Setter<BasicColorSchema | T>;
    system: solid_js.Accessor<"dark" | "light">;
    state: solid_js.Accessor<"dark" | "light" | T>;
};

export { BasicColorMode, BasicColorSchema, UseColorModeOptions, useColorMode };