its-just-ui/dist/components/ColorPicker/ColorPicker.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

export type ColorFormat = 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
export type ColorPickerVariant = 'default' | 'inline' | 'popover' | 'minimal' | 'advanced';
export type ColorPickerSize = 'sm' | 'md' | 'lg';
export interface RGBColor {
    r: number;
    g: number;
    b: number;
    a?: number;
}
export interface HSLColor {
    h: number;
    s: number;
    l: number;
    a?: number;
}
export interface ColorValue {
    hex: string;
    rgb: RGBColor;
    hsl: HSLColor;
    format: ColorFormat;
}
export interface PresetColor {
    value: string;
    label?: string;
}
export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    value: string;
    onChange: (value: string, color: ColorValue) => void;
    disabled?: boolean;
    readOnly?: boolean;
    allowAlpha?: boolean;
    defaultFormat?: ColorFormat;
    presetColors?: PresetColor[];
    showPreview?: boolean;
    showInputs?: boolean;
    showSliders?: boolean;
    showPresets?: boolean;
    variant?: ColorPickerVariant;
    size?: ColorPickerSize;
    label?: string;
    placeholder?: string;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    backgroundColor?: string;
    focusRingColor?: string;
    focusBorderColor?: string;
    focusBoxShadow?: string;
    padding?: string;
    gap?: string;
    transitionDuration?: number;
    swatchShape?: 'circle' | 'square';
    swatchSize?: string;
    swatchBorderColor?: string;
    swatchBorderWidth?: string;
    popoverBackgroundColor?: string;
    popoverBorderColor?: string;
    popoverBorderRadius?: string;
    popoverBoxShadow?: string;
    popoverPadding?: string;
    popoverPosition?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
    popoverOffset?: string;
    popoverOffsetTop?: number;
    popoverOffsetBottom?: number;
    popoverOffsetLeft?: number;
    popoverOffsetRight?: number;
    renderTrigger?: (props: {
        color: ColorValue;
        onClick: () => void;
        disabled?: boolean;
    }) => React.ReactNode;
    renderSwatch?: (props: {
        color: string;
        selected: boolean;
        onClick: () => void;
    }) => React.ReactNode;
    onFocus?: () => void;
    onBlur?: () => void;
    onOpen?: () => void;
    onClose?: () => void;
    onFormatChange?: (format: ColorFormat) => void;
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-invalid'?: boolean;
}
interface ColorPickerContextValue {
    value: ColorValue;
    onChange: (color: Partial<ColorValue>) => void;
    format: ColorFormat;
    setFormat: (format: ColorFormat) => void;
    isOpen: boolean;
    setIsOpen: (open: boolean) => void;
    disabled?: boolean;
    readOnly?: boolean;
    allowAlpha?: boolean;
    variant: ColorPickerVariant;
    size: ColorPickerSize;
    presetColors?: PresetColor[];
    showPreview: boolean;
    showInputs: boolean;
    showSliders: boolean;
    showPresets: boolean;
    swatchShape?: 'circle' | 'square';
    swatchSize?: string;
    swatchBorderColor?: string;
    swatchBorderWidth?: string;
    popoverBackgroundColor?: string;
    popoverBorderColor?: string;
    popoverBorderRadius?: string;
    popoverBoxShadow?: string;
    popoverPadding?: string;
    renderSwatch?: (props: {
        color: string;
        selected: boolean;
        onClick: () => void;
    }) => React.ReactNode;
}
export declare const useColorPicker: () => ColorPickerContextValue;
interface ColorPickerTriggerProps {
    placeholder?: string;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    backgroundColor?: string;
    focusRingColor?: string;
    focusBorderColor?: string;
    focusBoxShadow?: string;
    padding?: string;
    transitionDuration?: number;
    renderTrigger?: (props: {
        color: ColorValue;
        onClick: () => void;
        disabled?: boolean;
    }) => React.ReactNode;
    onFocus?: () => void;
    onBlur?: () => void;
    asChild?: boolean;
}
declare const ColorPickerTrigger: React.ForwardRefExoticComponent<ColorPickerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
interface ColorPickerContentProps {
    className?: string;
    gap?: string;
}
declare const ColorPickerContent: React.FC<ColorPickerContentProps>;
declare const ColorPickerSliders: React.FC;
declare const ColorPickerInputs: React.FC;
declare const ColorPickerPresets: React.FC;
interface ColorPickerComponent extends React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>> {
    Trigger: typeof ColorPickerTrigger;
    Content: typeof ColorPickerContent;
    Sliders: typeof ColorPickerSliders;
    Inputs: typeof ColorPickerInputs;
    Presets: typeof ColorPickerPresets;
}
declare const ColorPickerCompound: ColorPickerComponent;
export { ColorPickerCompound as ColorPicker };
export default ColorPickerCompound;