use-material-you/dist/index.d.ts

React hook to create dynamic schemes and variants based on M3/material-color-utilities

export declare type ContrastLevelType = "default" | "medium" | "high" | "reduced";

export declare function findDominantColorsFromPixelData(pixelData: Uint8ClampedArray | Uint8Array, amount?: number): number[];

export declare function getMaterialYouScheme({ source, ...options }: GetMaterialYouSchemeProps): Promise<SimpleDynamicScheme | null>;

declare interface GetMaterialYouSchemeProps extends Options {
    source: string | number;
}

export declare interface Options {
    variant?: VariantType;
    contrastLevel?: ContrastLevelType;
    isDark?: boolean;
    imageFetcher?: (src: string) => Promise<number[]>;
    grid?: Array<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9>;
    /**
     * Whether to use Web Workers for color extraction (default: true).
     * Set to false for environments with limited Worker support (e.g., WKWebView on iOS).
     */
    useWorker?: boolean;
}

export declare interface SimpleDynamicScheme {
    primary: string;
    onPrimary: string;
    primaryContainer: string;
    onPrimaryContainer: string;
    secondary: string;
    onSecondary: string;
    secondaryContainer: string;
    onSecondaryContainer: string;
    tertiary: string;
    onTertiary: string;
    tertiaryContainer: string;
    onTertiaryContainer: string;
    error: string;
    onError: string;
    errorContainer: string;
    onErrorContainer: string;
    background: string;
    onBackground: string;
    surface: string;
    onSurface: string;
    surfaceVariant: string;
    onSurfaceVariant: string;
    outline: string;
    outlineVariant: string;
    shadow: string;
    scrim: string;
    inverseSurface: string;
    inverseOnSurface: string;
    inversePrimary: string;
}

export declare function useMaterialYou(source: string | number, // hex, rgba or http
options: Options): readonly [SimpleDynamicScheme | null, "" | "error" | "loading" | "done"];

export declare type VariantType = "monochrome" | "neutral" | "tonal_spot" | "vibrant" | "expressive" | "fidelity" | "content" | "rainbow" | "fruit_salad" | "image_fidelity";

export { }