@chayns-components/color-picker 5.0.0-beta.567 → 5.0.0-beta.569

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/color-area/ColorArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorArea.js","names":["React","useCallback","useContext","useEffect","useMemo","useRef","useState","StyledColorArea","StyledColorAreaCanvas","StyledColorAreaPseudo","StyledMotionColorAreaPointer","hsvToHex","useDragControls","useMotionValue","extractRgbValues","getColorFromCoordinates","getCoordinatesFromColor","rgbToHsv","ColorPickerContext","ColorArea","selectedColor","updateSelectedColor","updateIsPresetColor","isPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","updateShouldCallOnSelect","hueColor","opacity","setOpacity","scale","setScale","scaleX","scaleY","isPresetColorRef","shouldGetCoordinatesRef","canDrag","canvasRef","pseudoRef","dragControls","x","y","current","a","canvas","rect","getBoundingClientRect","width","height","setColor","xCord","get","yCord","color","coordinates","ctx","getContext","hsv","hex","h","s","v","colorGradiant","createLinearGradient","addColorStop","fillStyle","fillRect","transparentGradiant","handleStartDrag","cords","tolerance","set","handleDrag","handleClick","event","left","top","target","clientX","clientY","handlePointerUp","handleMouseMove","xCords","yCords","window","addEventListener","removeEventListener","createElement","ref","onPointerDown","onClick","drag","dragConstraints","style","dragElastic","dragMomentum","onDrag","displayName"],"sources":["../../../../../../src/components/color-picker/color-picker-wrapper/color-picker-popup/color-area/ColorArea.tsx"],"sourcesContent":["import React, {\n    MouseEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledColorArea,\n    StyledColorAreaCanvas,\n    StyledColorAreaPseudo,\n    StyledMotionColorAreaPointer,\n} from './ColorArea.styles';\n\nimport { hsvToHex } from '@chayns/colors';\nimport { useDragControls, useMotionValue } from 'framer-motion';\nimport type { Scale } from '../../../../../types';\nimport {\n    extractRgbValues,\n    getColorFromCoordinates,\n    getCoordinatesFromColor,\n    rgbToHsv,\n} from '../../../../../utils/color';\nimport { ColorPickerContext } from '../../../../ColorPickerProvider';\n\nconst ColorArea = () => {\n    const {\n        selectedColor,\n        updateSelectedColor,\n        updateIsPresetColor,\n        isPresetColor,\n        shouldGetCoordinates,\n        updateShouldGetCoordinates,\n        updateShouldCallOnSelect,\n        hueColor,\n    } = useContext(ColorPickerContext);\n\n    const [opacity, setOpacity] = useState<number>(1);\n    const [scale, setScale] = useState<Scale>({ scaleX: 0, scaleY: 0 });\n\n    const isPresetColorRef = useRef(false);\n    const shouldGetCoordinatesRef = useRef(false);\n    const canDrag = useRef(false);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const pseudoRef = useRef<HTMLDivElement>(null);\n\n    const dragControls = useDragControls();\n\n    const x = useMotionValue(0);\n    const y = useMotionValue(0);\n\n    useEffect(() => {\n        isPresetColorRef.current = isPresetColor ?? false;\n    }, [isPresetColor]);\n\n    useEffect(() => {\n        shouldGetCoordinatesRef.current = shouldGetCoordinates ?? true;\n    }, [shouldGetCoordinates]);\n\n    useEffect(() => {\n        if (selectedColor) {\n            const { a } = extractRgbValues(selectedColor);\n\n            setOpacity(a);\n        }\n    }, [selectedColor]);\n\n    useEffect(() => {\n        const canvas = canvasRef.current;\n\n        if (!canvas) {\n            return;\n        }\n\n        const rect = canvas.getBoundingClientRect();\n\n        const scaleX = canvas.width / rect.width;\n        const scaleY = canvas.height / rect.height;\n\n        setScale({ scaleX, scaleY });\n    }, []);\n\n    const setColor = useCallback(() => {\n        const xCord = x.get();\n        const yCord = y.get();\n\n        if (typeof updateSelectedColor === 'function') {\n            const color = getColorFromCoordinates({\n                coordinates: {\n                    x: xCord,\n                    y: yCord,\n                },\n                canvas: canvasRef,\n                opacity,\n                scale,\n            });\n\n            if (color === 'transparent') {\n                return;\n            }\n\n            updateSelectedColor(color);\n        }\n    }, [opacity, scale, updateSelectedColor, x, y]);\n\n    useEffect(() => {\n        const ctx = canvasRef.current?.getContext('2d');\n\n        if (!ctx) {\n            return;\n        }\n\n        const hsv = rgbToHsv(hueColor);\n\n        const hex = hsvToHex({ h: hsv?.h ?? 1, s: 1, v: 1 });\n\n        const colorGradiant = ctx.createLinearGradient(0, 0, 300, 0);\n        colorGradiant.addColorStop(0, '#fff');\n        colorGradiant.addColorStop(1, hex ?? 'red');\n\n        ctx.fillStyle = colorGradiant;\n        ctx.fillRect(0, 0, 300, 150);\n\n        const transparentGradiant = ctx.createLinearGradient(0, 0, 0, 150);\n\n        transparentGradiant.addColorStop(0, 'transparent');\n        transparentGradiant.addColorStop(1, '#000');\n\n        ctx.fillStyle = transparentGradiant;\n        ctx.fillRect(0, 0, 300, 150);\n\n        if (isPresetColorRef.current) {\n            if (typeof updateIsPresetColor === 'function') {\n                updateIsPresetColor(false);\n            }\n\n            return;\n        }\n\n        setColor();\n    }, [hueColor, setColor, updateIsPresetColor]);\n\n    const handleStartDrag = useCallback(() => {\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(false);\n        }\n\n        canDrag.current = true;\n    }, [updateShouldGetCoordinates]);\n\n    useEffect(() => {\n        if (selectedColor && shouldGetCoordinatesRef.current) {\n            const cords = getCoordinatesFromColor({\n                color: selectedColor,\n                canvas: canvasRef,\n                tolerance: 10,\n            });\n\n            if (cords) {\n                x.set(cords.x);\n                y.set(cords.y);\n            }\n        }\n    }, [selectedColor, x, y]);\n\n    const handleDrag = useCallback(() => {\n        setColor();\n    }, [setColor]);\n\n    const handleClick = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            if (typeof updateShouldGetCoordinates === 'function') {\n                updateShouldGetCoordinates(false);\n            }\n\n            const { left, top } = (event.target as HTMLDivElement).getBoundingClientRect();\n\n            x.set(event.clientX - left - 10);\n            y.set(event.clientY - top - 10);\n\n            setColor();\n        },\n        [setColor, updateShouldGetCoordinates, x, y],\n    );\n\n    const handlePointerUp = useCallback(() => {\n        canDrag.current = false;\n\n        if (typeof updateShouldGetCoordinates === 'function') {\n            updateShouldGetCoordinates(true);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function') {\n            updateShouldCallOnSelect(true);\n        }\n    }, [updateShouldCallOnSelect, updateShouldGetCoordinates]);\n\n    const handleMouseMove = useCallback(\n        (event: MouseEvent) => {\n            if (canDrag.current && pseudoRef.current) {\n                const { left, top } = pseudoRef.current.getBoundingClientRect();\n\n                let xCords = event.clientX - left - 10;\n                let yCords = event.clientY - top - 10;\n\n                switch (true) {\n                    case xCords > 300:\n                        xCords = 300;\n                        break;\n                    case xCords < 0:\n                        xCords = 0;\n                        break;\n                    default:\n                        break;\n                }\n\n                switch (true) {\n                    case yCords > 150:\n                        yCords = 150;\n                        break;\n                    case yCords < 0:\n                        yCords = 0;\n                        break;\n                    default:\n                        break;\n                }\n\n                x.set(xCords);\n                y.set(yCords);\n\n                setColor();\n            }\n        },\n        [setColor, x, y],\n    );\n\n    useEffect(() => {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        window.addEventListener('mousemove', handleMouseMove);\n        window.addEventListener('pointerup', handlePointerUp);\n\n        return () => {\n            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n            // @ts-ignore\n            window.removeEventListener('mousemove', handleMouseMove);\n            window.removeEventListener('pointerup', handlePointerUp);\n        };\n    }, [handleMouseMove, handlePointerUp]);\n\n    return useMemo(\n        () => (\n            <StyledColorArea>\n                <StyledColorAreaCanvas ref={canvasRef} />\n                <StyledColorAreaPseudo\n                    ref={pseudoRef}\n                    onPointerDown={handleStartDrag}\n                    onClick={handleClick}\n                >\n                    <StyledMotionColorAreaPointer\n                        drag\n                        dragConstraints={pseudoRef}\n                        style={{ x, y }}\n                        dragElastic={false}\n                        dragMomentum={false}\n                        dragControls={dragControls}\n                        onDrag={handleDrag}\n                    />\n                </StyledColorAreaPseudo>\n            </StyledColorArea>\n        ),\n        [dragControls, handleClick, handleDrag, handleStartDrag, x, y],\n    );\n};\n\nColorArea.displayName = 'ColorArea';\n\nexport default ColorArea;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/color-area/ColorArea.styles.d.ts

@@ -0,0 +1,268 @@
+/// <reference types="react" />
+/// <reference types="react" />
+export declare const StyledColorArea: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledColorAreaCanvas: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, never>>;
+export declare const StyledColorAreaPseudo: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledMotionColorAreaPointer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<{
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    slot?: string | undefined;
+    title?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResize?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onResizeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/color-area/ColorArea.styles.js

@@ -0,0 +1,38 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const StyledColorArea = styled.div`
+    height: 150px;
+    width: 300px;
+    position: relative;
+    user-select: none;
+    overflow: hidden;
+    cursor: crosshair;
+`;
+export const StyledColorAreaCanvas = styled.canvas`
+    user-select: none;
+`;
+export const StyledColorAreaPseudo = styled.div`
+    position: absolute;
+    top: -10px;
+    left: -10px;
+
+    user-select: none;
+
+    height: 170px;
+    width: 320px;
+`;
+export const StyledMotionColorAreaPointer = styled(motion.div)`
+    position: absolute;
+    border-radius: 100%;
+    border: 2px solid white;
+    width: 20px;
+    height: 20px;
+    box-shadow:
+        0 0 5px 0 rgba(0, 0, 0, 0.5),
+        0 0 3px 0 rgba(0, 0, 0, 0.5) inset;
+    pointer-events: none;
+    user-select: none;
+    top: 0;
+    left: 0;
+`;
+//# sourceMappingURL=ColorArea.styles.js.map

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/color-area/ColorArea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorArea.styles.js","names":["motion","styled","StyledColorArea","div","StyledColorAreaCanvas","canvas","StyledColorAreaPseudo","StyledMotionColorAreaPointer"],"sources":["../../../../../../src/components/color-picker/color-picker-wrapper/color-picker-popup/color-area/ColorArea.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledColorArea = styled.div`\n    height: 150px;\n    width: 300px;\n    position: relative;\n    user-select: none;\n    overflow: hidden;\n    cursor: crosshair;\n`;\n\nexport const StyledColorAreaCanvas = styled.canvas`\n    user-select: none;\n`;\n\nexport const StyledColorAreaPseudo = styled.div`\n    position: absolute;\n    top: -10px;\n    left: -10px;\n\n    user-select: none;\n\n    height: 170px;\n    width: 320px;\n`;\n\nexport const StyledMotionColorAreaPointer = styled(motion.div)`\n    position: absolute;\n    border-radius: 100%;\n    border: 2px solid white;\n    width: 20px;\n    height: 20px;\n    box-shadow:\n        0 0 5px 0 rgba(0, 0, 0, 0.5),\n        0 0 3px 0 rgba(0, 0, 0, 0.5) inset;\n    pointer-events: none;\n    user-select: none;\n    top: 0;\n    left: 0;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAI;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGH,MAAM,CAACI,MAAO;AACnD;AACA,CAAC;AAED,OAAO,MAAMC,qBAAqB,GAAGL,MAAM,CAACE,GAAI;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMI,4BAA4B,GAAGN,MAAM,CAACD,MAAM,CAACG,GAAG,CAAE;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/more-options/MoreOptions.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const MoreOptions: {
+    (): React.JSX.Element;
+    displayName: string;
+};
+export default MoreOptions;

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/more-options/MoreOptions.js

@@ -0,0 +1,67 @@
+import { Accordion, AccordionGroup } from '@chayns-components/core';
+import { isHex } from '@chayns/colors';
+import React, { useContext, useEffect, useState } from 'react';
+import { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../../../utils/color';
+import { ColorPickerContext } from '../../../../ColorPickerProvider';
+import { StyledMoreOptions, StyledMoreOptionsInput, StyledMoreOptionsInputWrapper } from './MoreOptions.styles';
+const MoreOptions = () => {
+  const {
+    selectedColor,
+    updateSelectedColor,
+    updateShouldCallOnSelect
+  } = useContext(ColorPickerContext);
+  const [tmpHexValue, setTmpHexValue] = useState('');
+  const [tmpRgbValue, setTmpRgbValue] = useState('');
+  const [isHexInvalid, setIsHexInvalid] = useState(false);
+  const [isRgbInvalid, setIsRgbInvalid] = useState(false);
+  const handleHexChange = event => {
+    setTmpHexValue(event.target.value);
+    const isValid = isHex(event.target.value);
+    setIsHexInvalid(!isValid);
+    if (typeof updateSelectedColor === 'function' && isValid) {
+      const {
+        r,
+        g,
+        b,
+        a
+      } = hexToRgb(event.target.value);
+      updateSelectedColor(`rgba(${r},${g},${b},${a})`);
+    }
+    if (typeof updateShouldCallOnSelect === 'function' && isValid) {
+      updateShouldCallOnSelect(true);
+    }
+  };
+  const handleRgbChange = event => {
+    setTmpRgbValue(event.target.value);
+    const isValid = isValidRGBA(event.target.value);
+    setIsRgbInvalid(!isValid);
+    if (typeof updateSelectedColor === 'function' && isValid) {
+      updateSelectedColor(event.target.value);
+    }
+    if (typeof updateShouldCallOnSelect === 'function' && isValid) {
+      updateShouldCallOnSelect(true);
+    }
+  };
+  useEffect(() => {
+    if (selectedColor) {
+      setTmpRgbValue(selectedColor);
+      setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));
+    }
+  }, [selectedColor]);
+  return /*#__PURE__*/React.createElement(StyledMoreOptions, null, /*#__PURE__*/React.createElement(AccordionGroup, {
+    isWrapped: true
+  }, /*#__PURE__*/React.createElement(Accordion, {
+    title: "Erweitert"
+  }, /*#__PURE__*/React.createElement(StyledMoreOptionsInputWrapper, null, /*#__PURE__*/React.createElement(StyledMoreOptionsInput, {
+    value: tmpHexValue,
+    onChange: handleHexChange,
+    $isInvalid: isHexInvalid
+  }), /*#__PURE__*/React.createElement(StyledMoreOptionsInput, {
+    value: tmpRgbValue,
+    onChange: handleRgbChange,
+    $isInvalid: isRgbInvalid
+  })))));
+};
+MoreOptions.displayName = 'MoreOptions';
+export default MoreOptions;
+//# sourceMappingURL=MoreOptions.js.map

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/more-options/MoreOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoreOptions.js","names":["Accordion","AccordionGroup","isHex","React","useContext","useEffect","useState","extractRgbValues","hexToRgb","isValidRGBA","rgbToHex","ColorPickerContext","StyledMoreOptions","StyledMoreOptionsInput","StyledMoreOptionsInputWrapper","MoreOptions","selectedColor","updateSelectedColor","updateShouldCallOnSelect","tmpHexValue","setTmpHexValue","tmpRgbValue","setTmpRgbValue","isHexInvalid","setIsHexInvalid","isRgbInvalid","setIsRgbInvalid","handleHexChange","event","target","value","isValid","r","g","b","a","handleRgbChange","createElement","isWrapped","title","onChange","$isInvalid","displayName"],"sources":["../../../../../../src/components/color-picker/color-picker-wrapper/color-picker-popup/more-options/MoreOptions.tsx"],"sourcesContent":["import { Accordion, AccordionGroup } from '@chayns-components/core';\nimport { isHex } from '@chayns/colors';\nimport React, { useContext, useEffect, useState, type ChangeEvent } from 'react';\nimport { extractRgbValues, hexToRgb, isValidRGBA, rgbToHex } from '../../../../../utils/color';\nimport { ColorPickerContext } from '../../../../ColorPickerProvider';\nimport {\n    StyledMoreOptions,\n    StyledMoreOptionsInput,\n    StyledMoreOptionsInputWrapper,\n} from './MoreOptions.styles';\n\nconst MoreOptions = () => {\n    const { selectedColor, updateSelectedColor, updateShouldCallOnSelect } =\n        useContext(ColorPickerContext);\n\n    const [tmpHexValue, setTmpHexValue] = useState('');\n    const [tmpRgbValue, setTmpRgbValue] = useState('');\n    const [isHexInvalid, setIsHexInvalid] = useState(false);\n    const [isRgbInvalid, setIsRgbInvalid] = useState(false);\n\n    const handleHexChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpHexValue(event.target.value);\n\n        const isValid = isHex(event.target.value);\n\n        setIsHexInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            const { r, g, b, a } = hexToRgb(event.target.value);\n\n            updateSelectedColor(`rgba(${r},${g},${b},${a})`);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    const handleRgbChange = (event: ChangeEvent<HTMLInputElement>) => {\n        setTmpRgbValue(event.target.value);\n\n        const isValid = isValidRGBA(event.target.value);\n\n        setIsRgbInvalid(!isValid);\n\n        if (typeof updateSelectedColor === 'function' && isValid) {\n            updateSelectedColor(event.target.value);\n        }\n\n        if (typeof updateShouldCallOnSelect === 'function' && isValid) {\n            updateShouldCallOnSelect(true);\n        }\n    };\n\n    useEffect(() => {\n        if (selectedColor) {\n            setTmpRgbValue(selectedColor);\n            setTmpHexValue(rgbToHex(extractRgbValues(selectedColor ?? '')));\n        }\n    }, [selectedColor]);\n\n    return (\n        <StyledMoreOptions>\n            <AccordionGroup isWrapped>\n                <Accordion title=\"Erweitert\">\n                    <StyledMoreOptionsInputWrapper>\n                        <StyledMoreOptionsInput\n                            value={tmpHexValue}\n                            onChange={handleHexChange}\n                            $isInvalid={isHexInvalid}\n                        />\n                        <StyledMoreOptionsInput\n                            value={tmpRgbValue}\n                            onChange={handleRgbChange}\n                            $isInvalid={isRgbInvalid}\n                        />\n                    </StyledMoreOptionsInputWrapper>\n                </Accordion>\n            </AccordionGroup>\n        </StyledMoreOptions>\n    );\n};\n\nMoreOptions.displayName = 'MoreOptions';\n\nexport default MoreOptions;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/more-options/MoreOptions.styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { WithTheme } from '@chayns-components/core';
+export declare const StyledMoreOptions: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledMoreOptionsInputWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledMoreOptionsInputProps = WithTheme<{
+    $isInvalid: boolean;
+}>;
+export declare const StyledMoreOptionsInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledMoreOptionsInputProps>>;
+export {};

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/more-options/MoreOptions.styles.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+export const StyledMoreOptions = styled.div``;
+export const StyledMoreOptionsInputWrapper = styled.div`
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    align-items: center;
+`;
+export const StyledMoreOptionsInput = styled.input`
+    width: 100%;
+    border-radius: 3px;
+    border: 1px solid
+        ${_ref => {
+  let {
+    theme,
+    $isInvalid
+  } = _ref;
+  return $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
+}};
+    background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colorMode === 'classic' ? theme['000'] : theme['100'];
+}};
+    color: ${_ref3 => {
+  let {
+    theme,
+    $isInvalid
+  } = _ref3;
+  return $isInvalid ? theme.wrong : theme.text;
+}};
+    padding: 8px 10px;
+    font-size: 11px;
+`;
+//# sourceMappingURL=MoreOptions.styles.js.map

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/more-options/MoreOptions.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MoreOptions.styles.js","names":["styled","StyledMoreOptions","div","StyledMoreOptionsInputWrapper","StyledMoreOptionsInput","input","_ref","theme","$isInvalid","wrong","_ref2","colorMode","_ref3","text"],"sources":["../../../../../../src/components/color-picker/color-picker-wrapper/color-picker-popup/more-options/MoreOptions.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledMoreOptions = styled.div``;\nexport const StyledMoreOptionsInputWrapper = styled.div`\n    display: flex;\n    justify-content: space-between;\n    gap: 8px;\n    align-items: center;\n`;\n\ntype StyledMoreOptionsInputProps = WithTheme<{ $isInvalid: boolean }>;\n\nexport const StyledMoreOptionsInput = styled.input<StyledMoreOptionsInputProps>`\n    width: 100%;\n    border-radius: 3px;\n    border: 1px solid\n        ${({ theme, $isInvalid }: StyledMoreOptionsInputProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    background-color: ${({ theme }: StyledMoreOptionsInputProps) =>\n        theme.colorMode === 'classic' ? theme['000'] : theme['100']};\n    color: ${({ theme, $isInvalid }: StyledMoreOptionsInputProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    padding: 8px 10px;\n    font-size: 11px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAI,EAAC;AAC7C,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAI;AACxD;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAME,sBAAsB,GAAGJ,MAAM,CAACK,KAAmC;AAChF;AACA;AACA;AACA,UAAUC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAwC,CAAC,GAAAF,IAAA;EAAA,OACjDE,UAAU,GAAGD,KAAK,CAACE,KAAK,GAAG,0BAA0B;AAAA,CAAC;AAClE,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAmC,CAAC,GAAAG,KAAA;EAAA,OACvDH,KAAK,CAACI,SAAS,KAAK,SAAS,GAAGJ,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACpE,aAAaK,KAAA;EAAA,IAAC;IAAEL,KAAK;IAAEC;EAAwC,CAAC,GAAAI,KAAA;EAAA,OACxDJ,UAAU,GAAGD,KAAK,CAACE,KAAK,GAAGF,KAAK,CAACM,IAAI;AAAA,CAAC;AAC9C;AACA;AACA,CAAC","ignoreList":[]}

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/preset-colors/PresetColors.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { IPresetColor } from '../../../../../types';
+interface PresetColorsProps {
+    presetColors?: IPresetColor[];
+    onPresetColorAdd?: (presetColor: IPresetColor) => void;
+    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;
+}
+declare const PresetColors: {
+    ({ presetColors, onPresetColorRemove, onPresetColorAdd, }: PresetColorsProps): React.JSX.Element;
+    displayName: string;
+};
+export default PresetColors;

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/preset-colors/PresetColors.js

@@ -0,0 +1,72 @@
+import { isHex } from '@chayns/colors';
+import React, { useContext, useMemo } from 'react';
+import { PRESETCOLORS } from '../../../../../constants/color';
+import { hexToRgb } from '../../../../../utils/color';
+import { ColorPickerContext } from '../../../../ColorPickerProvider';
+import PresetButton from './preset-button/PresetButton';
+import PresetColor from './preset-color/PresetColor';
+import { StyledPresetColors } from './PresetColors.styles';
+const PresetColors = _ref => {
+  let {
+    presetColors,
+    onPresetColorRemove,
+    onPresetColorAdd
+  } = _ref;
+  const {
+    selectedColor
+  } = useContext(ColorPickerContext);
+  const combinedColors = useMemo(() => {
+    const tmp = (presetColors ?? []).map(_ref2 => {
+      let {
+        color,
+        isCustom,
+        id
+      } = _ref2;
+      let newColor = color;
+      if (isHex(color)) {
+        const {
+          r,
+          g,
+          b,
+          a
+        } = hexToRgb(color);
+        newColor = `rgba(${r},${g},${b},${a})`;
+      }
+      return {
+        id,
+        isCustom,
+        color: newColor
+      };
+    });
+    return [...PRESETCOLORS, ...tmp];
+  }, [presetColors]);
+  const content = useMemo(() => {
+    const items = [];
+    combinedColors.forEach(_ref3 => {
+      let {
+        color,
+        id
+      } = _ref3;
+      items.push( /*#__PURE__*/React.createElement(PresetColor, {
+        key: `preset-color__${id}`,
+        color: color
+      }));
+    });
+    return items;
+  }, [combinedColors]);
+  const currentPresetColor = useMemo(() => combinedColors.find(_ref4 => {
+    let {
+      color
+    } = _ref4;
+    return color === selectedColor;
+  }), [combinedColors, selectedColor]);
+  return /*#__PURE__*/React.createElement(StyledPresetColors, null, content, /*#__PURE__*/React.createElement(PresetButton, {
+    id: currentPresetColor?.id,
+    isCustom: currentPresetColor?.isCustom,
+    onAdd: onPresetColorAdd,
+    onRemove: onPresetColorRemove
+  }));
+};
+PresetColors.displayName = 'PresetColors';
+export default PresetColors;
+//# sourceMappingURL=PresetColors.js.map

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/preset-colors/PresetColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetColors.js","names":["isHex","React","useContext","useMemo","PRESETCOLORS","hexToRgb","ColorPickerContext","PresetButton","PresetColor","StyledPresetColors","PresetColors","_ref","presetColors","onPresetColorRemove","onPresetColorAdd","selectedColor","combinedColors","tmp","map","_ref2","color","isCustom","id","newColor","r","g","b","a","content","items","forEach","_ref3","push","createElement","key","currentPresetColor","find","_ref4","onAdd","onRemove","displayName"],"sources":["../../../../../../src/components/color-picker/color-picker-wrapper/color-picker-popup/preset-colors/PresetColors.tsx"],"sourcesContent":["import { isHex } from '@chayns/colors';\nimport React, { useContext, useMemo, type ReactElement } from 'react';\nimport { PRESETCOLORS } from '../../../../../constants/color';\nimport type { IPresetColor } from '../../../../../types';\nimport { hexToRgb } from '../../../../../utils/color';\nimport { ColorPickerContext } from '../../../../ColorPickerProvider';\nimport PresetButton from './preset-button/PresetButton';\nimport PresetColor from './preset-color/PresetColor';\nimport { StyledPresetColors } from './PresetColors.styles';\n\ninterface PresetColorsProps {\n    presetColors?: IPresetColor[];\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n}\n\nconst PresetColors = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n}: PresetColorsProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const combinedColors = useMemo(() => {\n        const tmp = (presetColors ?? []).map(({ color, isCustom, id }) => {\n            let newColor = color;\n\n            if (isHex(color)) {\n                const { r, g, b, a } = hexToRgb(color);\n\n                newColor = `rgba(${r},${g},${b},${a})`;\n            }\n\n            return {\n                id,\n                isCustom,\n                color: newColor,\n            };\n        });\n\n        return [...PRESETCOLORS, ...tmp];\n    }, [presetColors]);\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        combinedColors.forEach(({ color, id }) => {\n            items.push(<PresetColor key={`preset-color__${id}`} color={color} />);\n        });\n\n        return items;\n    }, [combinedColors]);\n\n    const currentPresetColor = useMemo(\n        () => combinedColors.find(({ color }) => color === selectedColor),\n        [combinedColors, selectedColor],\n    );\n\n    return (\n        <StyledPresetColors>\n            {content}\n            <PresetButton\n                id={currentPresetColor?.id}\n                isCustom={currentPresetColor?.isCustom}\n                onAdd={onPresetColorAdd}\n                onRemove={onPresetColorRemove}\n            />\n        </StyledPresetColors>\n    );\n};\n\nPresetColors.displayName = 'PresetColors';\n\nexport default PresetColors;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,gBAAgB;AACtC,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAA2B,OAAO;AACrE,SAASC,YAAY,QAAQ,gCAAgC;AAE7D,SAASC,QAAQ,QAAQ,4BAA4B;AACrD,SAASC,kBAAkB,QAAQ,iCAAiC;AACpE,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAQ1D,MAAMC,YAAY,GAAGC,IAAA,IAII;EAAA,IAJH;IAClBC,YAAY;IACZC,mBAAmB;IACnBC;EACe,CAAC,GAAAH,IAAA;EAChB,MAAM;IAAEI;EAAc,CAAC,GAAGb,UAAU,CAACI,kBAAkB,CAAC;EAExD,MAAMU,cAAc,GAAGb,OAAO,CAAC,MAAM;IACjC,MAAMc,GAAG,GAAG,CAACL,YAAY,IAAI,EAAE,EAAEM,GAAG,CAACC,KAAA,IAA6B;MAAA,IAA5B;QAAEC,KAAK;QAAEC,QAAQ;QAAEC;MAAG,CAAC,GAAAH,KAAA;MACzD,IAAII,QAAQ,GAAGH,KAAK;MAEpB,IAAIpB,KAAK,CAACoB,KAAK,CAAC,EAAE;QACd,MAAM;UAAEI,CAAC;UAAEC,CAAC;UAAEC,CAAC;UAAEC;QAAE,CAAC,GAAGtB,QAAQ,CAACe,KAAK,CAAC;QAEtCG,QAAQ,GAAI,QAAOC,CAAE,IAAGC,CAAE,IAAGC,CAAE,IAAGC,CAAE,GAAE;MAC1C;MAEA,OAAO;QACHL,EAAE;QACFD,QAAQ;QACRD,KAAK,EAAEG;MACX,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CAAC,GAAGnB,YAAY,EAAE,GAAGa,GAAG,CAAC;EACpC,CAAC,EAAE,CAACL,YAAY,CAAC,CAAC;EAElB,MAAMgB,OAAO,GAAGzB,OAAO,CAAC,MAAM;IAC1B,MAAM0B,KAAqB,GAAG,EAAE;IAEhCb,cAAc,CAACc,OAAO,CAACC,KAAA,IAAmB;MAAA,IAAlB;QAAEX,KAAK;QAAEE;MAAG,CAAC,GAAAS,KAAA;MACjCF,KAAK,CAACG,IAAI,eAAC/B,KAAA,CAAAgC,aAAA,CAACzB,WAAW;QAAC0B,GAAG,EAAG,iBAAgBZ,EAAG,EAAE;QAACF,KAAK,EAAEA;MAAM,CAAE,CAAC,CAAC;IACzE,CAAC,CAAC;IAEF,OAAOS,KAAK;EAChB,CAAC,EAAE,CAACb,cAAc,CAAC,CAAC;EAEpB,MAAMmB,kBAAkB,GAAGhC,OAAO,CAC9B,MAAMa,cAAc,CAACoB,IAAI,CAACC,KAAA;IAAA,IAAC;MAAEjB;IAAM,CAAC,GAAAiB,KAAA;IAAA,OAAKjB,KAAK,KAAKL,aAAa;EAAA,EAAC,EACjE,CAACC,cAAc,EAAED,aAAa,CAClC,CAAC;EAED,oBACId,KAAA,CAAAgC,aAAA,CAACxB,kBAAkB,QACdmB,OAAO,eACR3B,KAAA,CAAAgC,aAAA,CAAC1B,YAAY;IACTe,EAAE,EAAEa,kBAAkB,EAAEb,EAAG;IAC3BD,QAAQ,EAAEc,kBAAkB,EAAEd,QAAS;IACvCiB,KAAK,EAAExB,gBAAiB;IACxByB,QAAQ,EAAE1B;EAAoB,CACjC,CACe,CAAC;AAE7B,CAAC;AAEDH,YAAY,CAAC8B,WAAW,GAAG,cAAc;AAEzC,eAAe9B,YAAY","ignoreList":[]}

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/preset-colors/PresetColors.styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledPresetColors: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/preset-colors/PresetColors.styles.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+export const StyledPresetColors = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+
+    gap: 6px;
+`;
+//# sourceMappingURL=PresetColors.styles.js.map

package/lib/components/color-picker/color-picker-wrapper/color-picker-popup/preset-colors/PresetColors.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PresetColors.styles.js","names":["styled","StyledPresetColors","div"],"sources":["../../../../../../src/components/color-picker/color-picker-wrapper/color-picker-popup/preset-colors/PresetColors.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledPresetColors = styled.div`\n    display: flex;\n    flex-wrap: wrap;\n\n    gap: 6px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAI;AAC7C;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}