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

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';
import { LucideIcon } from 'lucide-react';

type ThemeMode = 'light' | 'dark' | 'auto';
type DensityMode = 'compact' | 'comfortable' | 'default';
type DirectionMode = 'ltr' | 'rtl';
interface ThemeContextValue {
    mode: ThemeMode;
    setMode: (mode: ThemeMode) => void;
    toggleMode: () => void;
    density: DensityMode;
    setDensity: (density: DensityMode) => void;
    direction: DirectionMode;
    setDirection: (direction: DirectionMode) => void;
    isDark: boolean;
    isLight: boolean;
    isAuto: boolean;
    systemPrefersDark: boolean;
    resolvedMode: 'light' | 'dark';
}
interface ThemeProviderProps {
    children: React.ReactNode;
    defaultMode?: ThemeMode;
    defaultDensity?: DensityMode;
    defaultDirection?: DirectionMode;
    storageKey?: string;
    enableTransitions?: boolean;
    persistMode?: boolean;
    persistDensity?: boolean;
    persistDirection?: boolean;
}
interface UseThemeOptions {
    defaultMode?: ThemeMode;
    storageKey?: string;
}
interface ThemeConfig {
    defaultMode?: ThemeMode;
    defaultDensity?: DensityMode;
    defaultDirection?: DirectionMode;
    persistMode?: boolean;
    persistDensity?: boolean;
    persistDirection?: boolean;
    storageKey?: string;
    enableTransitions?: boolean;
}
interface Theme {
    name: string;
    mode: ThemeMode;
    colors: Record<string, string>;
    spacing: Record<string, string>;
    radius: Record<string, string>;
    typography: {
        fontFamily: Record<string, string>;
        fontSize: Record<string, string>;
        fontWeight: Record<string, string | number>;
        lineHeight: Record<string, string | number>;
    };
    transitions: Record<string, string>;
    zIndex: Record<string, number>;
}

declare const ThemeProvider: React$1.FC<ThemeProviderProps>;

declare function useTheme(): ThemeContextValue;

type ThemeToggleVariant = "default" | "outline" | "ghost" | "link" | "circle" | "icon";
interface ThemeToggleProps {
    className?: string;
    style?: React$1.CSSProperties;
    showLabels?: boolean;
    size?: "sm" | "md" | "lg";
    lightIcon?: ReactNode | LucideIcon | string;
    darkIcon?: ReactNode | LucideIcon | string;
    ariaLabel?: string;
    variant?: ThemeToggleVariant;
}
declare const ThemeToggle: React$1.FC<ThemeToggleProps>;

interface ThemeSelectorProps {
    className?: string;
    style?: React$1.CSSProperties;
    variant?: "buttons" | "dropdown";
}
declare const ThemeSelector: React$1.FC<ThemeSelectorProps>;

interface DensitySelectorProps {
    className?: string;
    style?: React$1.CSSProperties;
}
declare const DensitySelector: React$1.FC<DensitySelectorProps>;

export { type DensityMode, DensitySelector, type DirectionMode, type Theme, type ThemeConfig, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, ThemeSelector, ThemeToggle, type UseThemeOptions, ThemeProvider as default, useTheme };