import { type ReactNode } from "react"; import { type BreakpointKey, type ColorScheme, type ColorTokens, type GlassTokens } from "./tokens.js"; export type Surface = "solid" | "glass"; /** * Brand token overrides for the ThemeProvider `tokens` prop. Two shapes: * * - A flat `Partial` applies the same overrides to BOTH schemes * (the common rebrand: `tokens={{ primary: "#7c3aed" }}`). * - A `{ light, dark }` object overrides each scheme separately, for brands * whose colors shift between appearances. * * The two shapes are unambiguous because `ColorTokens` has no `light`/`dark` key. */ export type ThemeTokenOverrides = Partial | { light?: Partial; dark?: Partial; }; export interface ThemeValue { scheme: ColorScheme; surface: Surface; tokens: ColorTokens; /** * The glass material's own tokens for the active scheme (the `glass-tint` fill * GlassSurface paints under the material). Always present, because it describes what * glass LOOKS like in this scheme; whether glass actually paints is `surface` plus the * two accessibility flags below, and GlassSurface owns that ladder. Nothing else may * read this: hand-painting the tint outside GlassSurface would bypass the ladder and * the material (see CLAUDE.md, "no component hand-paints glass"). */ glass: GlassTokens; dark: boolean; /** OS "Reduce Transparency" is on: GlassSurface renders opaque (Apple AX). */ reducedTransparency: boolean; /** OS "Increase Contrast" is on: GlassSurface renders opaque + a contrasting border (Apple AX). */ increasedContrast: boolean; } export interface ThemeProviderProps { /** Force the dark color scheme. */ dark?: boolean; /** Force the light color scheme. */ light?: boolean; /** * Legacy value form of the scheme axis ("light" | "dark"), kept for * back-compat and for config-driven code that already holds a `ColorScheme` * value (a stored preference, an hook). The boolean axis above wins * when both are passed. */ scheme?: ColorScheme; /** * The scheme the SERVER rendered, for SSR/SSG apps (Next.js and the like) * whose client scheme can differ from it (a stored preference, the OS). * Canvas resolves colors in JS and serializes them into the server HTML as * literal inline styles, so when the hydration render disagrees with that * HTML, React logs a mismatch and keeps the server's colors on any element * that never re-renders again: components stay stuck in the server's scheme. * With `ssrScheme` set, the provider renders it on the server AND for the * hydration render (matching the server HTML exactly), then applies the * requested scheme (the boolean axis or the legacy `scheme` prop) right * after mount; that switch re-renders every consumer, which writes the * real colors to the DOM. Pass the same value the server resolves (e.g. the * next-themes `defaultTheme`). Omit in client-only apps and on native. */ ssrScheme?: ColorScheme; /** * The breakpoint bucket the SERVER should assume, for SSR/SSG apps (the * `ssrScheme` contract applied to the viewport axis). The server cannot * measure a window, so `useBreakpoint`/`useResponsive`/`useFormFactor` * resolve to the desktop `base` there by default; an app that knows it is * serving a narrow client (UA hints) passes the bucket the server should * render instead (e.g. "sm" for phones). The server render and the * hydration render use it, then the real measured bucket re-renders every * consumer right after hydration. Omit in client-only apps and on native. */ ssrBreakpoint?: BreakpointKey | "base"; /** Force the glass material on for the functional layer (bars, sidebars, sheets, * popovers). Content surfaces stay solid, and so do the semantic tokens. */ glass?: boolean; /** Force the flat, material-free functional layer, even on iOS 26+. */ solid?: boolean; /** * Legacy value form of the surface axis ("solid" | "glass"), kept for * back-compat and for config-driven code that already holds a `Surface` * value. The boolean axis above wins when both are passed. */ surface?: Surface; /** * Brand token overrides, merged over the active scheme's base tokens so a * consumer can rebrand the kit (e.g. `tokens={{ primary: "#7c3aed" }}`) * without forking the token files. Pass a flat `Partial` to * apply the same overrides to both schemes, or `{ light, dark }` to override * each scheme separately. These are the SEMANTIC tokens only; the glass material * carries its own fill (`glassByScheme`) and is never rewritten by a rebrand, so * the two are independent. Pass a stable reference (a module constant or a memoized * object); an inline literal re-creates the theme value on every render. */ tokens?: ThemeTokenOverrides; children: ReactNode; } export declare function ThemeProvider({ dark, light, scheme, ssrScheme, ssrBreakpoint, glass, solid, surface, tokens, children }: ThemeProviderProps): import("react").JSX.Element; export declare function useTheme(): ThemeValue; //# sourceMappingURL=theme.d.ts.map