@chayns-components/color-picker 5.0.0-beta.558 → 5.0.0-beta.560

package/lib/components/hue-slider/HueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.js","names":["hslToRgb255","React","useCallback","useEffect","useMemo","useRef","useState","convertColorToHsl","splitRgb","StyledHueSlider","StyledHueSliderInput","StyledHueSliderThumb","HueSlider","_ref","onChange","color","editedValue","setEditedValue","hslColor","setHslColor","sliderThumbRef","sliderRef","rgb","hsl","r","g","b","match","toString","parseInt","handleInputChange","event","Number","target","value","percentage","hue","saturation","lightness","h","s","l","sliderThumbPosition","current","offsetWidth","createElement","ref","$color","type","min","max","$position","displayName"],"sources":["../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (color: CSSProperties['color']) => void;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({ onChange, color = 'rgba(255, 0, 0, 1)' }) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            const rgb = splitRgb(color);\n\n            if (!rgb) {\n                return;\n            }\n\n            const hsl = convertColorToHsl(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n\n            if (typeof onChange === 'function') {\n                onChange(hsl);\n            }\n        }\n    }, [color, onChange]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${1})`);\n            }\n        },\n        [onChange],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleInputChange, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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"}
+{"version":3,"file":"HueSlider.js","names":["hslToRgb255","React","useCallback","useEffect","useMemo","useRef","useState","convertColorToHsl","splitRgb","StyledHueSlider","StyledHueSliderInput","StyledHueSliderThumb","HueSlider","_ref","onChange","color","editedValue","setEditedValue","hslColor","setHslColor","sliderThumbRef","sliderRef","rgb","hsl","r","g","b","match","toString","parseInt","handleInputChange","event","Number","target","value","percentage","hue","saturation","lightness","h","s","l","sliderThumbPosition","current","offsetWidth","createElement","ref","$color","type","min","max","$position","displayName"],"sources":["../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (color: CSSProperties['color']) => void;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({ onChange, color = 'rgba(255, 0, 0, 1)' }) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            const rgb = splitRgb(color);\n\n            if (!rgb) {\n                return;\n            }\n\n            const hsl = convertColorToHsl(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n\n            if (typeof onChange === 'function') {\n                onChange(hsl);\n            }\n        }\n    }, [color, onChange]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${1})`);\n            }\n        },\n        [onChange],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleInputChange, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/hue-slider/HueSlider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.styles.js","names":["styled","StyledHueSlider","div","StyledHueSliderInput","input","StyledHueSliderThumb","attrs","_ref","$position","$color","style","left","backgroundColor"],"sources":["../../../src/components/hue-slider/HueSlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledHueSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\ntype StyledHueSliderInputProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledHueSliderInput = styled.input<StyledHueSliderInputProps>`\n    width: 100%;\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    background: linear-gradient(\n        to right,\n        hsl(0, 100%, 50%),\n        hsl(30, 100%, 50%),\n        hsl(60, 100%, 50%),\n        hsl(90, 100%, 50%),\n        hsl(120, 100%, 50%),\n        hsl(150, 100%, 50%),\n        hsl(180, 100%, 50%),\n        hsl(210, 100%, 50%),\n        hsl(240, 100%, 50%),\n        hsl(270, 100%, 50%),\n        hsl(300, 100%, 50%),\n        hsl(330, 100%, 50%),\n        hsl(360, 100%, 50%)\n    );\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledHueSliderThumbProps = WithTheme<{ $position: number; $color: CSSProperties['color'] }>;\n\nexport const StyledHueSliderThumb = styled.div.attrs<StyledHueSliderThumbProps>(\n    ({ $position, $color }) => ({\n        style: {\n            left: `${$position}px`,\n            backgroundColor: $color,\n        },\n    }),\n)`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAI;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,oBAAoB,GAAGH,MAAM,CAACI,KAAiC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,oBAAoB,GAAGL,MAAM,CAACE,GAAG,CAACI,KAAK,CAChDC,IAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OAAM;IACxBG,KAAK,EAAE;MACHC,IAAI,EAAG,GAAEH,SAAU,IAAG;MACtBI,eAAe,EAAEH;IACrB;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"HueSlider.styles.js","names":["styled","StyledHueSlider","div","StyledHueSliderInput","input","StyledHueSliderThumb","attrs","_ref","$position","$color","style","left","backgroundColor"],"sources":["../../../src/components/hue-slider/HueSlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledHueSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\ntype StyledHueSliderInputProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledHueSliderInput = styled.input<StyledHueSliderInputProps>`\n    width: 100%;\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    background: linear-gradient(\n        to right,\n        hsl(0, 100%, 50%),\n        hsl(30, 100%, 50%),\n        hsl(60, 100%, 50%),\n        hsl(90, 100%, 50%),\n        hsl(120, 100%, 50%),\n        hsl(150, 100%, 50%),\n        hsl(180, 100%, 50%),\n        hsl(210, 100%, 50%),\n        hsl(240, 100%, 50%),\n        hsl(270, 100%, 50%),\n        hsl(300, 100%, 50%),\n        hsl(330, 100%, 50%),\n        hsl(360, 100%, 50%)\n    );\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledHueSliderThumbProps = WithTheme<{ $position: number; $color: CSSProperties['color'] }>;\n\nexport const StyledHueSliderThumb = styled.div.attrs<StyledHueSliderThumbProps>(\n    ({ $position, $color }) => ({\n        style: {\n            left: `${$position}px`,\n            backgroundColor: $color,\n        },\n    }),\n)`\n    min-width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,eAAe,GAAGD,MAAM,CAACE,GAAI;AAC1C;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,oBAAoB,GAAGH,MAAM,CAACI,KAAiC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,oBAAoB,GAAGL,MAAM,CAACE,GAAG,CAACI,KAAK,CAChDC,IAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC;EAAO,CAAC,GAAAF,IAAA;EAAA,OAAM;IACxBG,KAAK,EAAE;MACHC,IAAI,EAAG,GAAEH,SAAU,IAAG;MACtBI,eAAe,EAAEH;IACrB;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","HueSlider"],"sources":["../../src/components/index.ts"],"sourcesContent":["export { default as HueSlider } from './hue-slider/HueSlider';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAAS,QAAQ,wBAAwB"}
+{"version":3,"file":"index.js","names":["default","HueSlider"],"sources":["../../src/components/index.ts"],"sourcesContent":["export { default as HueSlider } from './hue-slider/HueSlider';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAAS,QAAQ,wBAAwB","ignoreList":[]}

package/lib/constants/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":["colorPresents","id","color"],"sources":["../../src/constants/color.ts"],"sourcesContent":["export const colorPresents = [\n    { id: 0, color: 'rgb(0, 0, 0)' },\n    { id: 1, color: 'rgb(67, 67, 67)' },\n    { id: 2, color: 'rgb(102, 102, 102)' },\n    { id: 3, color: 'rgb(153, 153, 153)' },\n    { id: 4, color: 'rgb(183, 183, 183)' },\n    { id: 5, color: 'rgb(204, 204, 204)' },\n    { id: 6, color: 'rgb(217, 217, 217)' },\n    { id: 7, color: 'rgb(239, 239, 239)' },\n    { id: 8, color: 'rgb(243, 243, 243)' },\n    { id: 9, color: 'rgb(255, 255, 255)' },\n    { id: 10, color: 'rgb(244, 67, 54)' },\n    { id: 11, color: 'rgb(255, 152, 0)' },\n    { id: 12, color: 'rgb(255, 235, 59)' },\n    { id: 13, color: 'rgb(0, 150, 136)' },\n    { id: 14, color: 'rgb(121, 85, 72)' },\n    { id: 15, color: 'rgb(139, 195, 74)' },\n    { id: 16, color: 'rgb(76, 175, 80)' },\n    { id: 17, color: 'rgb(156, 39, 176)' },\n    { id: 18, color: 'rgb(63, 81, 181)' },\n    { id: 19, color: 'rgb(3, 169, 244)' },\n];\n"],"mappings":"AAAA,OAAO,MAAMA,aAAa,GAAG,CACzB;EAAEC,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAe,CAAC,EAChC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAkB,CAAC,EACnC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,CACxC"}
+{"version":3,"file":"color.js","names":["colorPresents","id","color"],"sources":["../../src/constants/color.ts"],"sourcesContent":["export const colorPresents = [\n    { id: 0, color: 'rgb(0, 0, 0)' },\n    { id: 1, color: 'rgb(67, 67, 67)' },\n    { id: 2, color: 'rgb(102, 102, 102)' },\n    { id: 3, color: 'rgb(153, 153, 153)' },\n    { id: 4, color: 'rgb(183, 183, 183)' },\n    { id: 5, color: 'rgb(204, 204, 204)' },\n    { id: 6, color: 'rgb(217, 217, 217)' },\n    { id: 7, color: 'rgb(239, 239, 239)' },\n    { id: 8, color: 'rgb(243, 243, 243)' },\n    { id: 9, color: 'rgb(255, 255, 255)' },\n    { id: 10, color: 'rgb(244, 67, 54)' },\n    { id: 11, color: 'rgb(255, 152, 0)' },\n    { id: 12, color: 'rgb(255, 235, 59)' },\n    { id: 13, color: 'rgb(0, 150, 136)' },\n    { id: 14, color: 'rgb(121, 85, 72)' },\n    { id: 15, color: 'rgb(139, 195, 74)' },\n    { id: 16, color: 'rgb(76, 175, 80)' },\n    { id: 17, color: 'rgb(156, 39, 176)' },\n    { id: 18, color: 'rgb(63, 81, 181)' },\n    { id: 19, color: 'rgb(3, 169, 244)' },\n];\n"],"mappings":"AAAA,OAAO,MAAMA,aAAa,GAAG,CACzB;EAAEC,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAe,CAAC,EAChC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAkB,CAAC,EACnC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,CAAC;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACtC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACrC;EAAED,EAAE,EAAE,EAAE;EAAEC,KAAK,EAAE;AAAmB,CAAC,CACxC","ignoreList":[]}

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../src/types.ts"],"sourcesContent":["export interface Coordinates {\n    x: number;\n    y: number;\n}\n\nexport interface Scale {\n    scaleX: number;\n    scaleY: number;\n}\n\nexport interface RGB {\n    r: number;\n    g: number;\n    b: number;\n    a?: number;\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../src/types.ts"],"sourcesContent":["export interface Coordinates {\n    x: number;\n    y: number;\n}\n\nexport interface Scale {\n    scaleX: number;\n    scaleY: number;\n}\n\nexport interface RGB {\n    r: number;\n    g: number;\n    b: number;\n    a?: number;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/utils/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","names":["hexToHsl","rgb255ToHsl","getColorFromCoordinates","_ref","coordinates","canvas","opacity","scale","current","undefined","top","left","getBoundingClientRect","x","scaleX","y","scaleY","ctx","getContext","pixels","getImageData","data","getCoordinatesFromColor","_ref2","color","rgb","splitRgb","p","px","r","g","b","convertColorToHsl","hexRegex","rgbRegex","hslRegex","rgba","hsl","newColor","replaceAll","test","Math","floor","h","match","Number","a"],"sources":["../../src/utils/color.ts"],"sourcesContent":["import { hexToHsl, rgb255ToHsl } from '@chayns/colors';\nimport type { HSL, HSLA } from '@chayns/colors/lib/types/hsl';\nimport type { CSSProperties, RefObject } from 'react';\nimport type { Coordinates, RGB, Scale } from '../types';\n\ninterface GetColorFromCoordinatesOptions {\n    coordinates: Coordinates;\n    canvas: RefObject<HTMLCanvasElement>;\n    opacity: number;\n    scale: Scale;\n}\n\nexport const getColorFromCoordinates = ({\n    coordinates,\n    canvas,\n    opacity,\n    scale,\n}: GetColorFromCoordinatesOptions) => {\n    if (!canvas.current) {\n        return undefined;\n    }\n\n    const { top, left } = canvas.current.getBoundingClientRect();\n\n    const x = (coordinates.x - left) * scale.scaleX;\n    const y = (coordinates.y - top) * scale.scaleY;\n\n    const ctx = canvas.current?.getContext('2d');\n    const pixels = ctx?.getImageData(x, y, 1, 1).data;\n\n    if (!pixels) {\n        return undefined;\n    }\n\n    // If transparency\n    if (pixels[0] === 0 && pixels[1] === 0 && pixels[2] === 0 && pixels[3] === 0) {\n        return 'transparent';\n    }\n\n    return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;\n};\n\ninterface GetCoordinatesFromColorOptions {\n    color: CSSProperties['color'];\n    canvas: RefObject<HTMLCanvasElement>;\n}\n\nexport const getCoordinatesFromColor = ({ canvas, color }: GetCoordinatesFromColorOptions) => {\n    const ctx = canvas.current?.getContext('2d');\n\n    if (!ctx || !color) {\n        return undefined;\n    }\n\n    const { data } = ctx.getImageData(0, 0, 300, 150); /// get image data\n    let x = 0;\n    let y = 0;\n\n    const rgb = splitRgb(color);\n\n    if (!rgb) {\n        return undefined;\n    }\n\n    // iterating x/y instead of forward to get position the easy way\n    for (; y < 150; y++) {\n        // common value for all x\n        const p = y * 4 * 300;\n\n        for (x = 0; x < 300; x++) {\n            // next pixel (skipping 4 bytes as each pixel is RGBA bytes)\n            const px = p + x * 4;\n\n            // if red component match check the others\n            if (data[px] === rgb.r) {\n                if (data[px + 1] === rgb.g && data[px + 2] === rgb.b) {\n                    return { x, y };\n                }\n            }\n        }\n    }\n    return null;\n};\n\nexport const convertColorToHsl = (color: string) => {\n    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n    const rgbRegex =\n        /^rgb(a)?\\(\\s*((25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*,\\s*){2}(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n    const hslRegex =\n        /^hsla?\\(\\s*((360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*,\\s*){2}(360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n\n    let rgba: string[] | null;\n    let hsl: HSL | HSLA | null;\n\n    const newColor = color.replaceAll('%', '');\n\n    switch (true) {\n        case hexRegex.test(newColor):\n            hsl = hexToHsl(color);\n\n            if (!hsl) {\n                return undefined;\n            }\n\n            return `hsl(${Math.floor(hsl.h)},100%,50%)`;\n        case rgbRegex.test(newColor):\n            rgba = color.match(/[\\d.]+/g);\n\n            if (!rgba) {\n                return undefined;\n            }\n\n            hsl = rgb255ToHsl({\n                r: Number(rgba[0]),\n                g: Number(rgba[1]),\n                b: Number(rgba[2]),\n            });\n\n            if (!hsl) {\n                return undefined;\n            }\n\n            return `hsl(${Math.floor(hsl.h)},100%,50%)`;\n        case hslRegex.test(newColor):\n            return color;\n        default:\n            return undefined;\n    }\n};\n\nexport const splitRgb = (color: CSSProperties['color']): null | RGB => {\n    const rgba = color?.match(/[\\d.]+/g);\n\n    if (!rgba) {\n        return null;\n    }\n\n    return { r: Number(rgba[0]), g: Number(rgba[1]), b: Number(rgba[2]), a: Number(rgba[3]) };\n};\n"],"mappings":"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"}
+{"version":3,"file":"color.js","names":["hexToHsl","rgb255ToHsl","getColorFromCoordinates","_ref","coordinates","canvas","opacity","scale","current","undefined","top","left","getBoundingClientRect","x","scaleX","y","scaleY","ctx","getContext","pixels","getImageData","data","getCoordinatesFromColor","_ref2","color","rgb","splitRgb","p","px","r","g","b","convertColorToHsl","hexRegex","rgbRegex","hslRegex","rgba","hsl","newColor","replaceAll","test","Math","floor","h","match","Number","a"],"sources":["../../src/utils/color.ts"],"sourcesContent":["import { hexToHsl, rgb255ToHsl } from '@chayns/colors';\nimport type { HSL, HSLA } from '@chayns/colors/lib/types/hsl';\nimport type { CSSProperties, RefObject } from 'react';\nimport type { Coordinates, RGB, Scale } from '../types';\n\ninterface GetColorFromCoordinatesOptions {\n    coordinates: Coordinates;\n    canvas: RefObject<HTMLCanvasElement>;\n    opacity: number;\n    scale: Scale;\n}\n\nexport const getColorFromCoordinates = ({\n    coordinates,\n    canvas,\n    opacity,\n    scale,\n}: GetColorFromCoordinatesOptions) => {\n    if (!canvas.current) {\n        return undefined;\n    }\n\n    const { top, left } = canvas.current.getBoundingClientRect();\n\n    const x = (coordinates.x - left) * scale.scaleX;\n    const y = (coordinates.y - top) * scale.scaleY;\n\n    const ctx = canvas.current?.getContext('2d');\n    const pixels = ctx?.getImageData(x, y, 1, 1).data;\n\n    if (!pixels) {\n        return undefined;\n    }\n\n    // If transparency\n    if (pixels[0] === 0 && pixels[1] === 0 && pixels[2] === 0 && pixels[3] === 0) {\n        return 'transparent';\n    }\n\n    return `rgba(${pixels[0] ?? 0}, ${pixels[1] ?? 0}, ${pixels[2] ?? 0}, ${opacity})`;\n};\n\ninterface GetCoordinatesFromColorOptions {\n    color: CSSProperties['color'];\n    canvas: RefObject<HTMLCanvasElement>;\n}\n\nexport const getCoordinatesFromColor = ({ canvas, color }: GetCoordinatesFromColorOptions) => {\n    const ctx = canvas.current?.getContext('2d');\n\n    if (!ctx || !color) {\n        return undefined;\n    }\n\n    const { data } = ctx.getImageData(0, 0, 300, 150); /// get image data\n    let x = 0;\n    let y = 0;\n\n    const rgb = splitRgb(color);\n\n    if (!rgb) {\n        return undefined;\n    }\n\n    // iterating x/y instead of forward to get position the easy way\n    for (; y < 150; y++) {\n        // common value for all x\n        const p = y * 4 * 300;\n\n        for (x = 0; x < 300; x++) {\n            // next pixel (skipping 4 bytes as each pixel is RGBA bytes)\n            const px = p + x * 4;\n\n            // if red component match check the others\n            if (data[px] === rgb.r) {\n                if (data[px + 1] === rgb.g && data[px + 2] === rgb.b) {\n                    return { x, y };\n                }\n            }\n        }\n    }\n    return null;\n};\n\nexport const convertColorToHsl = (color: string) => {\n    const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n    const rgbRegex =\n        /^rgb(a)?\\(\\s*((25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*,\\s*){2}(25[0-5]|2[0-4]\\d|1\\d{2}|\\d{1,2})\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n    const hslRegex =\n        /^hsla?\\(\\s*((360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*,\\s*){2}(360|3[0-5]\\d|[12]\\d{2}|[1-9]\\d|\\d)\\s*(,\\s*\\d+(\\.\\d+)?)?\\)$/i;\n\n    let rgba: string[] | null;\n    let hsl: HSL | HSLA | null;\n\n    const newColor = color.replaceAll('%', '');\n\n    switch (true) {\n        case hexRegex.test(newColor):\n            hsl = hexToHsl(color);\n\n            if (!hsl) {\n                return undefined;\n            }\n\n            return `hsl(${Math.floor(hsl.h)},100%,50%)`;\n        case rgbRegex.test(newColor):\n            rgba = color.match(/[\\d.]+/g);\n\n            if (!rgba) {\n                return undefined;\n            }\n\n            hsl = rgb255ToHsl({\n                r: Number(rgba[0]),\n                g: Number(rgba[1]),\n                b: Number(rgba[2]),\n            });\n\n            if (!hsl) {\n                return undefined;\n            }\n\n            return `hsl(${Math.floor(hsl.h)},100%,50%)`;\n        case hslRegex.test(newColor):\n            return color;\n        default:\n            return undefined;\n    }\n};\n\nexport const splitRgb = (color: CSSProperties['color']): null | RGB => {\n    const rgba = color?.match(/[\\d.]+/g);\n\n    if (!rgba) {\n        return null;\n    }\n\n    return { r: Number(rgba[0]), g: Number(rgba[1]), b: Number(rgba[2]), a: Number(rgba[3]) };\n};\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/color-picker",
-    "version": "5.0.0-beta.558",
+    "version": "5.0.0-beta.560",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -40,13 +40,13 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.23.9",
-        "@babel/core": "^7.23.9",
-        "@babel/preset-env": "^7.23.9",
-        "@babel/preset-react": "^7.23.3",
-        "@babel/preset-typescript": "^7.23.3",
-        "@types/react": "^18.2.57",
-        "@types/react-dom": "^18.2.19",
+        "@babel/cli": "^7.24.1",
+        "@babel/core": "^7.24.4",
+        "@babel/preset-env": "^7.24.4",
+        "@babel/preset-react": "^7.24.1",
+        "@babel/preset-typescript": "^7.24.1",
+        "@types/react": "^18.2.75",
+        "@types/react-dom": "^18.2.24",
         "@types/styled-components": "^5.1.34",
         "@types/uuid": "^9.0.8",
         "babel-loader": "^9.1.3",
@@ -54,10 +54,10 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "styled-components": "^6.1.8",
-        "typescript": "^5.3.3"
+        "typescript": "^5.4.4"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.558",
+        "@chayns-components/core": "^5.0.0-beta.560",
         "@chayns/colors": "^2.0.0"
     },
     "peerDependencies": {
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "0a63c8bc92ed0fbd2e9bedcdf131f4ffda91a6c3"
+    "gitHead": "9e82156be1c91a0ec853d05789a65a4f4c37a6ad"
 }