@asafarim/react-themes/dist/index.d.ts

A comprehensive theme management system for React applications with automatic dark/light mode detection, custom theme creation, and smooth transitions.

import * as React$1 from 'react';
import { ReactNode } from 'react';

type ThemeMode = 'light' | 'dark' | 'auto';
interface ThemeColors {
    background: string;
    backgroundSecondary: string;
    backgroundTertiary: string;
    text: string;
    textSecondary: string;
    textMuted: string;
    border: string;
    borderLight: string;
    borderHover: string;
    primary: string;
    primaryHover: string;
    primaryActive: string;
    success: string;
    warning: string;
    error: string;
    info: string;
    hover: string;
    active: string;
    focus: string;
    shadow: string;
    shadowMd: string;
    shadowLg: string;
}
interface ThemeSpacing {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
    '3xl': string;
    '4xl': string;
}
interface ThemeRadius {
    none: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    '2xl': string;
    full: string;
}
interface ThemeTypography {
    fontFamily: {
        sans: string;
        serif: string;
        mono: string;
    };
    fontSize: {
        xs: string;
        sm: string;
        base: string;
        lg: string;
        xl: string;
        '2xl': string;
        '3xl': string;
        '4xl': string;
        '5xl': string;
    };
    fontWeight: {
        light: string;
        normal: string;
        medium: string;
        semibold: string;
        bold: string;
    };
    lineHeight: {
        tight: string;
        normal: string;
        relaxed: string;
    };
}
interface ThemeTransitions {
    fast: string;
    normal: string;
    slow: string;
    bounce: string;
}
interface Theme {
    name: string;
    mode: ThemeMode;
    colors: ThemeColors;
    spacing: ThemeSpacing;
    radius: ThemeRadius;
    typography: ThemeTypography;
    transitions: ThemeTransitions;
    zIndex: {
        dropdown: number;
        modal: number;
        tooltip: number;
        overlay: number;
    };
}
interface ThemeContextValue {
    theme: Theme;
    mode: ThemeMode;
    setMode: (mode: ThemeMode) => void;
    toggleMode: () => void;
    isDark: boolean;
    isLight: boolean;
    isAuto: boolean;
    systemPrefersDark: boolean;
    applyTheme: (customTheme: Partial<Theme>) => void;
    resetTheme: () => void;
}
interface ThemeProviderProps$1 {
    children: React.ReactNode;
    defaultMode?: ThemeMode;
    customTheme?: Partial<Theme>;
    storageKey?: string;
    enableTransitions?: boolean;
    className?: string;
    style?: React.CSSProperties;
}
interface UseThemeOptions {
    defaultMode?: ThemeMode;
    storageKey?: string;
}
interface ThemeConfig {
    defaultMode?: ThemeMode;
    defaultTheme?: string;
    persistMode?: boolean;
    storageKey?: string;
    enableTransitions?: boolean;
    customThemes?: Record<string, Theme>;
}
interface ThemeVariables {
    colors: Record<keyof ThemeColors, string>;
    spacing: Record<keyof ThemeSpacing, string>;
    radius: Record<keyof ThemeRadius, string>;
    typography: {
        fontFamily: Record<keyof ThemeTypography['fontFamily'], string>;
        fontSize: Record<keyof ThemeTypography['fontSize'], string>;
        fontWeight: Record<keyof ThemeTypography['fontWeight'], string>;
        lineHeight: Record<keyof ThemeTypography['lineHeight'], string>;
    };
    transitions: Record<keyof ThemeTransitions, string>;
    zIndex: Record<keyof Theme['zIndex'], string>;
}

declare const lightTheme: Theme;
declare const darkTheme: Theme;
declare const defaultTheme: Theme;
declare const themes: {
    light: Theme;
    dark: Theme;
};
declare const defaultThemes: {
    default: Theme;
    light: Theme;
    dark: Theme;
};
declare function mergeTheme(baseTheme: Theme, customTheme: Partial<Theme>): Theme;

interface ThemeContextType {
    currentTheme: Theme;
    mode: ThemeMode;
    setMode: (mode: ThemeMode) => void;
    setTheme: (theme: Theme) => void;
    themes: Record<string, Theme>;
    toggleMode: () => void;
}
interface ThemeProviderProps {
    children: ReactNode;
    config?: ThemeConfig;
    defaultMode?: ThemeMode;
    defaultTheme?: string;
    persistMode?: boolean;
    storageKey?: string;
    customThemes?: Record<string, Theme>;
}
declare const ThemeProvider: React$1.FC<ThemeProviderProps>;

/**
 * Hook to access theme context
 */
declare function useTheme(): ThemeContextType;

/**
 * Hook that provides theme toggle functionality
 */
declare function useThemeToggle(): {
    mode: ThemeMode;
    setMode: (mode: ThemeMode) => void;
    toggleMode: () => void;
    isDark: boolean;
    isLight: boolean;
    isAuto: boolean;
    effectiveMode: "light" | "dark";
};

interface ThemeToggleProps {
    className?: string;
    style?: React$1.CSSProperties;
    showLabels?: boolean;
    size?: 'sm' | 'md' | 'lg';
}
declare const ThemeToggle: React$1.FC<ThemeToggleProps>;

interface ThemeSelectorProps {
    className?: string;
    style?: React$1.CSSProperties;
    showLabels?: boolean;
    options?: Array<{
        mode: ThemeMode;
        label: string;
        icon?: string;
    }>;
}
declare const ThemeSelector: React$1.FC<ThemeSelectorProps>;

/**
 * Creates a new theme by merging a base theme with custom properties
 */
declare function createTheme(baseTheme: Theme, customTheme: Partial<Theme>): Theme;

/**
 * Applies theme CSS variables to the document root
 */
declare function applyTheme(theme: Theme, mode: ThemeMode): void;

/**
 * Merges multiple themes into a single theme
 * Later themes in the array take precedence over earlier ones
 */
declare function mergeThemes(...themes: Array<Theme | Partial<Theme>>): Theme;
/**
 * Merges theme colors only
 */
declare function mergeThemeColors(baseColors: Theme['colors'], ...colorSets: Array<Partial<Theme['colors']>>): Theme['colors'];
/**
 * Deep merge utility for complex theme objects
 */
declare function deepMergeThemes(target: Theme, ...sources: Array<Partial<Theme>>): Theme;

export { type Theme, type ThemeColors, type ThemeConfig, type ThemeContextType, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps$1 as ThemeProviderProps, type ThemeRadius, ThemeSelector, type ThemeSpacing, ThemeToggle, type ThemeTransitions, type ThemeTypography, type ThemeVariables, type UseThemeOptions, applyTheme, createTheme, darkTheme, deepMergeThemes, ThemeProvider as default, defaultTheme, defaultThemes, lightTheme, mergeTheme, mergeThemeColors, mergeThemes, themes, useTheme, useThemeToggle };