import { ReactNode, ScriptHTMLAttributes, ComponentType, DependencyList, ImgHTMLAttributes } from 'react';
import { ScopedThemeProps } from './components/scoped-theme.js';
import { A as Attribute, b as StorageConfig, C as CookieOptions, e as TransitionConfig, d as ThemeState, S as SetThemeOptions } from './types-BK2-7cKa.js';
import { ThemeValueMap } from './hooks/use-theme-value.js';
import { T as ThemeContext } from './context-DTdAssyl.js';

interface ThemeProviderProps {
    children?: ReactNode;
    /** Available themes. Default: `['light', 'dark']`. */
    themes?: string[];
    /** Default theme used when nothing is stored. Default: `'system'`. */
    defaultTheme?: string;
    /** If set, theme is locked to this value and cannot be changed. */
    forcedTheme?: string;
    /** Enable automatic 'system' theme detection via `prefers-color-scheme`. Default: `true`. */
    enableSystem?: boolean;
    /** Always track the OS preference, ignoring stored values. */
    followSystem?: boolean;
    /** Attribute(s) used to apply the theme. Default: `'data-theme'`. */
    attribute?: Attribute | Attribute[];
    /** Optional map of logical theme name → attribute value (e.g. `{ dark: 'theme-dark' }`). */
    value?: Record<string, string>;
    /** Selector for the element that receives the attribute. Default: `'html'`. */
    target?: string;
    /**
     * Storage backend. Either a mode string (`'hybrid'` | `'cookie'` | `'local'`
     * | `'session'` | `'none'`, default `'hybrid'`) or an object that bundles the
     * mode with its `key` and `cookieOptions`:
     * `storage={{ mode: 'cookie', cookieOptions: { maxAge: 31536000 } }}`.
     * When the object form supplies `key`/`cookieOptions`, the top-level
     * `storageKey`/`cookieOptions` props take precedence if also provided.
     */
    storage?: StorageConfig;
    /** Key name for local/session storage and fallback cookie name. Default: `'theme'`. */
    storageKey?: string;
    /** Overrides for the cookie channel. */
    cookieOptions?: CookieOptions;
    /** Disable CSS transitions during theme change. Pass `true` or custom CSS. */
    disableTransitionOnChange?: boolean | string;
    /** If true, `disableTransitionOnChange` is a no-op when user prefers reduced motion. Default: `true`. */
    respectReducedMotion?: boolean;
    /** Sync `colorScheme` CSS on the target element. Default: `true`. */
    enableColorScheme?: boolean;
    /** Sync a `<meta name="theme-color">` tag. Can be a fixed color or a map by theme. */
    themeColor?: string | Record<string, string>;
    /** Initial theme seeded by the server (e.g. from a cookie or user profile). */
    initialTheme?: string;
    /** CSP nonce for the inline script. */
    nonce?: string;
    /**
     * Extra props forwarded to the inline anti-FOUC `<script>` element. Mirrors
     * upstream `next-themes`'s prop of the same name so existing code migrates
     * unchanged. We control `dangerouslySetInnerHTML` and the `nonce`; anything
     * else (e.g. `data-*` attributes) is forwarded as-is.
     *
     * Note: this provider already injects the script via `useServerInsertedHTML`,
     * so the React-19 "scripts inside components are never executed" warning
     * does NOT occur here — you do not need the `type: 'application/json'`
     * workaround that some upstream users adopt. The prop is accepted for
     * compatibility.
     */
    scriptProps?: Omit<ScriptHTMLAttributes<HTMLScriptElement>, 'dangerouslySetInnerHTML' | 'children' | 'nonce'> & {
        [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
    };
    /**
     * Skip injecting the inline anti-FOUC script. Use this when you have
     * already rendered the script in `<head>` via `getThemeScript()` from
     * `@teispace/next-themes/server` — that placement runs strictly before
     * the body's first paint and is the most flicker-resistant option.
     */
    noScript?: boolean;
    /**
     * Animate theme changes with the View Transitions API. Pass `true` for the
     * default fade, `'circular'` for a cursor-origin circular reveal, or a
     * config object for fine-grained control. Gracefully no-ops in browsers
     * that do not support View Transitions.
     */
    transition?: TransitionConfig;
    /** Fired when the theme changes, with both the selected value and the resolved value. */
    onChange?: (theme: string, resolvedTheme: string) => void;
    /**
     * Called when a storage read or write throws.
     *
     * Storage failures are non-fatal on purpose — Safari private mode, sandboxed
     * iframes, disabled cookies, and quota-exceeded must never break theming — but
     * they used to be entirely silent, leaving "my theme doesn't persist" with no
     * diagnostic. Wire this to your logger to see them.
     */
    onStorageError?: (error: unknown, context: {
        operation: 'get' | 'set';
        key: string;
    }) => void;
    /**
     * The React context this provider publishes its store on.
     *
     * Defaults to the package-level context that the top-level `useTheme`,
     * `<ThemedImage>` etc. read from — which is what you want for a normal app.
     * `createThemes()` passes its own private context here so two typed theme
     * APIs in one tree stay isolated. You rarely set this by hand.
     */
    themeContext?: ThemeContext;
}

interface CreateThemesConfig<T extends readonly string[]> extends Omit<ThemeProviderProps, 'children' | 'themes' | 'defaultTheme' | 'forcedTheme'> {
    /** The literal theme tuple (`as const` for inference). */
    themes: T;
    /** Default selected theme; `'system'` stays valid when `enableSystem` is true. */
    defaultTheme?: T[number] | 'system';
}
interface ThemesApi<T extends readonly string[]> {
    ThemeProvider: ComponentType<Partial<Omit<ThemeProviderProps, 'themes'>> & {
        children?: ReactNode;
    }>;
    useTheme: () => Omit<ThemeState, 'theme' | 'resolvedTheme'> & {
        theme: T[number] | 'system';
        resolvedTheme: T[number];
        setTheme: (theme: T[number] | 'system', options?: SetThemeOptions) => void;
    };
    useThemeValue: <V>(map: ThemeValueMap<T[number], V>) => V | undefined;
    useThemeEffect: (effect: (theme: T[number] | 'system', resolvedTheme: T[number]) => void | (() => void), deps?: DependencyList) => void;
    ThemedImage: ComponentType<Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> & {
        sources: Partial<Record<T[number] | 'system', string>>;
        fallbackSrc?: string;
    }>;
    ThemedIcon: ComponentType<{
        variants: Partial<Record<T[number] | 'system', ReactNode>>;
        fallback?: ReactNode;
    }>;
    ScopedTheme: ComponentType<Omit<ScopedThemeProps<T[number]>, 'theme'> & {
        theme: T[number];
    }>;
}

export type { CreateThemesConfig as C, ThemeProviderProps as T, ThemesApi as a };