@hello-pangea/color-picker/dist/color-picker.d.ts

React color pickers from Sketch, Photoshop, Chrome, Github, Twitter & more

import React, { CSSProperties } from 'react';

declare type Props$1 = {
    direction: "horizontal" | "vertical";
};
declare function AlphaPointer({ direction }: Props$1): JSX.Element;

declare type AlphaPickerProps = {
    width?: string | number;
    height?: string | number;
    direction?: "horizontal" | "vertical";
    pointer?: typeof AlphaPointer;
    renderers?: any;
    className?: string;
    style?: Record<string, React.CSSProperties>;
};
declare const _default$e: (props: AlphaPickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare type HexColor = string;
declare type HslColor = {
    h: number;
    l: number;
    s: number;
    a?: number;
};
declare type HsvColor = {
    h: number;
    s: number;
    v: number;
    a?: number;
};
declare type RgbColor = {
    r: number;
    g: number;
    b: number;
    a?: number;
};
declare type Color = HexColor | HslColor | HsvColor | RgbColor;
declare type ColorResult = {
    hex: HexColor;
    hsl: HslColor;
    hsv: HsvColor;
    rgb: RgbColor;
    oldHue: number;
};
declare type ChangeColor = HslColor | HsvColor | (RgbColor & {
    source?: string;
}) | {
    hex: HexColor;
    source: string;
} | HexColor;

declare type BlockPickerProps = {
    width?: string | number;
    colors?: string[];
    triangle?: "top" | "hide";
    className?: string;
    styles?: Record<string, React.CSSProperties>;
};
declare const _default$d: (props: BlockPickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare type ChromePickerProps = {
    width?: string | number;
    disableAlpha?: boolean;
    styles?: Record<string, React.CSSProperties>;
    renderers?: any;
    className?: string;
    defaultView?: "hex" | "rgb" | "hsl";
};
declare const _default$c: (props: ChromePickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare type CirclePickerProps = {
    width?: string | number;
    circleSize?: number;
    circleSpacing?: number;
    className?: string;
    colors?: string[];
    styles?: Record<string, React.CSSProperties>;
};
declare const _default$b: (props: CirclePickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare class Alpha extends React.PureComponent<any, any, any> {
    constructor(props: any);
    constructor(props: any, context: any);
    componentWillUnmount(): void;
    handleChange: (e: any) => void;
    handleMouseDown: (e: any) => void;
    handleMouseUp: () => void;
    unbindEventListeners: () => void;
    render(): JSX.Element;
    container: HTMLDivElement | null | undefined;
}

declare type CheckboardProps = {
    size?: number;
    white?: string;
    grey?: string;
    renderers?: any;
    borderRadius?: string | number;
    boxShadow?: string;
    children?: React.ReactNode;
};
declare function Checkboard({ white, grey, size, renderers, borderRadius, boxShadow, children, }: CheckboardProps): JSX.Element;

declare type InjectedColorProps = {
    onSwatchHover?: (color: ColorResult, event: React.MouseEvent) => void;
    onChangeComplete?: (color: ColorResult) => void;
    color?: Color;
    defaultColor?: Color;
};
declare const ColorWrap: (Picker: any) => (props: InjectedColorProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare class EditableInput extends React.PureComponent<any, any, any> {
    constructor(props: any);
    state: {
        value: string;
        blurValue: string;
    };
    inputId: string;
    componentDidUpdate(prevProps: any, prevState: any): void;
    componentWillUnmount(): void;
    getValueObjectWithLabel(value: any): {
        [x: number]: any;
    };
    handleBlur: () => void;
    handleChange: (e: any) => void;
    getArrowOffset(): any;
    handleKeyDown: (e: any) => void;
    setUpdatedValue(value: any, e: any): void;
    handleDrag: (e: any) => void;
    handleMouseDown: (e: any) => void;
    handleMouseUp: () => void;
    unbindEventListeners: () => void;
    render(): JSX.Element;
    input: HTMLInputElement | null | undefined;
}

declare class Hue extends React.PureComponent<any, any, any> {
    constructor(props: any);
    constructor(props: any, context: any);
    componentWillUnmount(): void;
    handleChange: (e: any) => void;
    handleMouseDown: (e: any) => void;
    handleMouseUp: () => void;
    unbindEventListeners(): void;
    render(): JSX.Element;
    container: HTMLDivElement | null | undefined;
}

declare type RaisedProps = {
    background?: string;
    zDepth?: 0 | 1 | 2 | 3 | 4 | 5;
    radius?: number;
    styles?: Record<string, React.CSSProperties>;
    children?: React.ReactNode;
};
declare function Raised({ zDepth, radius, background, children, styles: passedStyles, }: RaisedProps): JSX.Element;

declare type SaturationProps = {
    hsl: HslColor;
    hsv: HsvColor;
    pointer?: React.ReactNode;
    onChange?: (color: ChangeColor, event?: React.MouseEvent) => void;
    shadow?: CSSProperties["boxShadow"];
    radius?: CSSProperties["borderRadius"];
    style?: any;
};
declare function Saturation({ hsl, hsv, pointer, onChange, shadow, radius, style, }: SaturationProps): JSX.Element;

declare type SwatchProps = {
    color: string;
    style?: React.CSSProperties;
    onClick: any;
    title?: string;
    children?: React.ReactNode;
    focus?: any;
    focusStyle?: React.CSSProperties;
};
declare const _default$a: {
    new (props: any): {
        state: {
            focus: boolean;
        };
        handleFocus: () => void;
        handleBlur: () => void;
        render(): JSX.Element;
        context: unknown;
        setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
        forceUpdate(callback?: (() => void) | undefined): void;
        readonly props: Readonly<any>;
        refs: {
            [key: string]: React.ReactInstance;
        };
        componentDidMount?(): void;
        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean;
        componentWillUnmount?(): void;
        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
        componentWillMount?(): void;
        UNSAFE_componentWillMount?(): void;
        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
    };
    new (props: any, context: any): {
        state: {
            focus: boolean;
        };
        handleFocus: () => void;
        handleBlur: () => void;
        render(): JSX.Element;
        context: unknown;
        setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
        forceUpdate(callback?: (() => void) | undefined): void;
        readonly props: Readonly<any>;
        refs: {
            [key: string]: React.ReactInstance;
        };
        componentDidMount?(): void;
        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean;
        componentWillUnmount?(): void;
        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
        componentWillMount?(): void;
        UNSAFE_componentWillMount?(): void;
        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
    };
    contextType?: React.Context<any> | undefined;
};

declare type CompactPickerProps = {
    colors?: string[];
    styles?: Record<string, React.CSSProperties>;
    className?: string;
};
declare const _default$9: (props: CompactPickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare type GithubPickerProps = {
    width?: string | number;
    styles?: Record<string, React.CSSProperties>;
    className?: string;
    triangle?: "hide" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
    colors?: string[];
};
declare const _default$8: (props: GithubPickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare type GooglePickerProps = {
    width?: string | number;
    styles?: Record<string, React.CSSProperties>;
    header?: string;
    className?: string;
};
declare const _default$7: (props: GooglePickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare type Props = {
    direction?: "horizontal" | "vertical";
};
declare function SliderPointer$1({ direction }: Props): JSX.Element;

declare type HuePickerProps = {
    width?: string | number;
    height?: string | number;
    direction?: "horizontal" | "vertical";
    pointer: typeof SliderPointer$1;
    className?: string;
    styles?: Record<string, React.CSSProperties>;
};
declare const _default$6: (props: HuePickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare type MaterialPickerProps = {
    styles?: Record<string, React.CSSProperties>;
    className?: string;
};
declare const _default$5: (props: MaterialPickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare type PhotoshopPickerProps = {
    header?: string;
    styles?: Record<string, React.CSSProperties>;
    className?: string;
    onAccept?: () => void;
    onCancel?: () => void;
};
declare const _default$4: (props: PhotoshopPickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare type SketchPickerProps = {
    disableAlpha?: boolean;
    width?: string | number;
    className?: string;
    presetColors?: string[];
    styles?: Record<string, React.CSSProperties>;
    renderers?: any;
};
declare const _default$3: (props: SketchPickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare function SliderPointer(): JSX.Element;

declare type SliderPickerProps = {
    pointer?: typeof SliderPointer;
    styles?: Record<string, React.CSSProperties>;
    className?: string;
};
declare const _default$2: (props: SliderPickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare type SwatchesPickerProps = {
    width?: string | number;
    height?: string | number;
    className?: string;
    styles?: Record<string, React.CSSProperties>;
    colors?: string[][];
};
declare const _default$1: (props: SwatchesPickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

declare type TwitterPickerProps = {
    width?: string | number;
    triangle?: "hide" | "top-left" | "top-right";
    colors?: string[];
    styles?: Record<string, React.CSSProperties>;
    className?: string;
};
declare const _default: (props: TwitterPickerProps & Omit<{
    children: React.ReactNode;
    onChangeComplete?: ((color: ColorResult) => void) | undefined;
    onSwatchHover?: ((color: ColorResult, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    onChange?: ((color: ColorResult, event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
    color?: Color | undefined;
    defaultColor?: Color | undefined;
}, "children">) => JSX.Element;

export { Alpha, _default$e as AlphaPicker, AlphaPickerProps, _default$d as BlockPicker, BlockPickerProps, ChangeColor, Checkboard, CheckboardProps, _default$c as ChromePicker, ChromePickerProps, _default$b as CirclePicker, CirclePickerProps, Color, ColorResult, _default$9 as CompactPicker, CompactPickerProps, ColorWrap as CustomPicker, EditableInput, _default$8 as GithubPicker, GithubPickerProps, _default$7 as GooglePicker, GooglePickerProps, HexColor, HslColor, HsvColor, Hue, _default$6 as HuePicker, HuePickerProps, InjectedColorProps, _default$5 as MaterialPicker, MaterialPickerProps, _default$4 as PhotoshopPicker, PhotoshopPickerProps, Raised, RaisedProps, RgbColor, Saturation, SaturationProps, _default$3 as SketchPicker, SketchPickerProps, _default$2 as SliderPicker, SliderPickerProps, _default$a as Swatch, SwatchProps, _default$1 as SwatchesPicker, SwatchesPickerProps, _default as TwitterPicker, TwitterPickerProps };