@kadconsulting/dry/dist/src/components/ThemeProvider/types.d.ts

KAD Reusable Component Library

import type { ReactNode } from 'react';
import type { Theme } from 'types/Theme';
/**
 * The theme type is a string enum, because the theme is toggled by adding a class
 * to the DOM. This class is used to modify the underlying SCSS variable definitions
 * defined in those CSS classes.
 *
 * To support more themes than this (i.e., color blindness or accessibility themes),
 * library consumers will need to use module augmentation. */
export declare enum ThemeTypes {
    DARK = "dark",
    LIGHT = "light"
}
export type ThemeContextValue = {
    /** The current theme; can be undefined if passed themes cannot index by the current themeType */
    theme?: Theme;
    /** Name / kind of the current theme */
    themeType: ThemeTypes;
    /** Set the theme to the current system preference and delete the localStorage entry, so that system preference is the initial state on subsequent page loads */
    useSystemPreference: () => void;
    /** Setter for the theme type, so that UIs can toggle / set themes */
    setTheme: (themeType: ThemeTypes) => void;
};
type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
    [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
}[Keys];
export type ThemeProviderProps = {
    /** A DOM selector denoting where the theme class should be toggled; default :root */
    selector?: string;
    /** Context provider children; all children in an application that need access to a theme */
    children: ReactNode | ReactNode[];
    /**
     * A lookup of themes to toggle between, whose keys are the classNames to be toggled
     * within the DOM in order to change SCSS variable definitions
     */
    themes: RequireAtLeastOne<{
        [className in ThemeTypes]: Theme;
    }, ThemeTypes>;
    /** Dictate the provider's state with dependency injection for tests */
    overrides?: {
        /** The (initial) theme type */
        themeType?: ThemeTypes;
    };
};
export {};