import { ImgHTMLAttributes, ReactElement } from "react"; type ThemedImageProps = Omit, "src" | "alt"> & { /** Map of theme name to image source */ src: Record; /** * Shown before the theme resolves on the client. * Defaults to a transparent 1x1 GIF to avoid hydration mismatch. */ fallback?: string; /** Alt text (required for accessibility) */ alt: string; }; declare function ThemedImage2({ src, fallback, alt,...props }: ThemedImageProps): ReactElement; import { ReactNode } from "react"; type DefaultTheme = "light" | "dark" | "system"; type Attribute = "class" | `data-${string}`; type ValueObject = Record; type StorageType = "localStorage" | "sessionStorage" | "cookie" | "hybrid" | "none"; type CookieOptions = { /** Cookie domain, defaults to the current domain */ domain?: string; /** Max age in seconds. Defaults to 31536000 (1 year) */ maxAge?: number; /** SameSite attribute. Defaults to "Lax" */ sameSite?: "Strict" | "Lax" | "None"; /** Secure flag. Defaults to true on HTTPS */ secure?: boolean; /** Cookie path. Defaults to "/" */ path?: string; }; /** Per-theme colors for meta theme-color, or a single string for all themes */ type ThemeColor = string | Partial>; type ThemeProviderProps = { children: ReactNode; /** All available themes */ themes?: Themes[]; /** Forced theme, overrides everything */ forcedTheme?: Themes; /** Enable system preference via prefers-color-scheme */ enableSystem?: boolean; /** Default theme when no preference stored */ defaultTheme?: Themes | "system"; /** HTML attribute(s) to set on target element */ attribute?: Attribute | Attribute[]; /** Map theme name to attribute value */ value?: ValueObject; /** Target element to apply theme to, defaults to */ target?: "html" | "body" | string; /** Disable CSS transitions on theme change. Pass `true` to disable all transitions, or a CSS `transition` value (e.g. `"background-color 0s, color 0s"`) to disable only specific properties while keeping others. */ disableTransitionOnChange?: boolean | string; /** Where to persist theme */ storage?: StorageType; /** Storage key */ storageKey?: string; /** Set native color-scheme CSS property */ enableColorScheme?: boolean; /** Nonce for CSP */ nonce?: string; /** Called when theme changes. Receives the selected theme (may be "system"), not the resolved value. When the system preference changes while the theme is set to "system", fires with the resolved value ("light" | "dark"). */ onThemeChange?: (theme: Themes | "system") => void; /** Colors for meta theme-color tag, per theme or a single value */ themeColor?: ThemeColor; /** Always follow system preference changes, even after setTheme was called */ followSystem?: boolean; /** Server-provided theme that overrides storage on mount (e.g. from a database). User can still call setTheme to change it. */ initialTheme?: Themes | "system"; /** Cookie options, only used when storage="cookie" */ cookieOptions?: CookieOptions; }; type ThemeContextValue = { /** Current theme (may be "system") */ theme: Themes | "system" | undefined; /** Resolved theme - never "system" */ resolvedTheme: Exclude | undefined; /** System preference */ systemTheme: "light" | "dark" | undefined; /** Forced theme if set */ forcedTheme: Themes | undefined; /** All available themes */ themes: Themes[]; /** Set theme */ setTheme: (theme: Themes | "system" | ((current: Themes | "system" | undefined) => Themes | "system")) => void; }; declare function useTheme2(): ThemeContextValue; import { DependencyList, EffectCallback, ReactElement as ReactElement2 } from "react"; type ThemeValueMap< Themes extends string, Value > = Partial> & { default?: Value; }; type TypedThemedImageProps = Omit & { src: Record; }; type CreateThemesConfig = Omit, "children" | "themes"> & { themes: Themes; }; type FactoryResult = { ThemeProvider: (props: ThemeProviderProps) => ReactElement2; useTheme: () => ThemeContextValue; useThemeValue: (map: ThemeValueMap) => Value | undefined; useThemeEffect: (effect: (theme: Themes[number] | "system" | undefined, resolvedTheme: Exclude | undefined) => ReturnType, deps?: DependencyList) => void; ThemedImage: (props: TypedThemedImageProps) => ReactElement2; }; declare function createThemes(config: CreateThemesConfig): FactoryResult; import { DependencyList as DependencyList2, EffectCallback as EffectCallback2 } from "react"; /** * Like useEffect, but runs only after the first render * and only when theme state changes. */ declare function useThemeEffect2(effect: (theme: string | undefined, resolvedTheme: string | undefined) => ReturnType, deps?: DependencyList2): void; /** * Returns the value from the map that corresponds to the current resolved theme. * Returns `undefined` if the theme hasn't resolved yet (e.g. during SSR). * * @example * const label = useThemeValue({ light: "Switch to dark", dark: "Switch to light" }); * const color = useThemeValue({ light: "#fff", dark: "#000", purple: "#1a0a2e" }); */ declare function useThemeValue2(map: Record): T | undefined; import { ReactElement as ReactElement3 } from "react"; declare function ClientThemeProvider({ children, themes, forcedTheme, enableSystem, defaultTheme, attribute, value: valueMap, target, disableTransitionOnChange, storage, storageKey, enableColorScheme, themeColor, followSystem, onThemeChange, initialTheme, cookieOptions }: ThemeProviderProps): ReactElement3; export { useThemeValue2 as useThemeValue, useThemeEffect2 as useThemeEffect, useTheme2 as useTheme, createThemes, ValueObject, ThemedImageProps, ThemedImage2 as ThemedImage, ThemeProviderProps, ThemeContextValue, ThemeColor, StorageType, DefaultTheme, ClientThemeProvider, Attribute };