@chayns-components/color-picker 5.0.0-beta.1000

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

@@ -0,0 +1 @@
+{"version":3,"file":"HueSlider.js","names":["_colors","require","_chaynsApi","_react","_interopRequireWildcard","_color","_HueSlider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HueSlider","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","useState","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","useRef","sliderRef","useEffect","rgb","isValidRGBA","splitRgb","hexToRgb","g","b","hsl","convertColorToHsl","match","toString","parseInt","handleInputChange","useCallback","event","Number","target","value","percentage","hue","saturation","lightness","hslToRgb255","h","s","l","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","extractHsl","handleEnd","createElement","StyledHueSlider","StyledHueSliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledHueSliderThumb","$position","displayName","_default","exports"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, 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?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is ending to change.\n     */\n    onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is starting to change.\n     */\n    onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * The opacity of the Color. Is used if the color has no opacity value.\n     */\n    opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n    onChange,\n    onStart,\n    onEnd,\n    opacity,\n    color = 'rgba(255, 0, 0, 1)',\n}) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n    const [internalOpacity, setInternalOpacity] = useState(1);\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            setInternalOpacity(a);\n\n            const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${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    }, [color]);\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}, ${opacity ?? internalOpacity})`, hsl);\n            }\n        },\n        [internalOpacity, onChange, opacity],\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    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onStart, opacity]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onEnd, opacity]);\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                    onPointerDown={handleStart}\n                    onPointerUp={handleEnd}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledHueSliderThumb = exports.StyledHueSliderInput = exports.StyledHueSlider = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledHueSlider = exports.StyledHueSlider = _styledComponents.default.div`
+    width: 100%;
+    height: 30px;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: none;
+`;
+const StyledHueSliderInput = exports.StyledHueSliderInput = _styledComponents.default.input`
+    width: calc(100% - 10px);
+    border-radius: 100px;
+    -webkit-appearance: none;
+    height: 10px;
+    background: linear-gradient(
+        to right,
+        hsl(0, 100%, 50%),
+        hsl(30, 100%, 50%),
+        hsl(60, 100%, 50%),
+        hsl(90, 100%, 50%),
+        hsl(120, 100%, 50%),
+        hsl(150, 100%, 50%),
+        hsl(180, 100%, 50%),
+        hsl(210, 100%, 50%),
+        hsl(240, 100%, 50%),
+        hsl(270, 100%, 50%),
+        hsl(300, 100%, 50%),
+        hsl(330, 100%, 50%),
+        hsl(360, 100%, 50%)
+    );
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: 0.2s;
+    transition: opacity 0.2s;
+
+    // Slider thumb for chrome
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 20px;
+        height: 20px;
+        opacity: 0;
+        cursor: pointer;
+        border-radius: 50%;
+    }
+
+    // slider thumb for firefox
+    &::-moz-range-thumb {
+        width: 20px;
+        opacity: 0;
+        height: 20px;
+        cursor: pointer;
+        border-radius: 50%;
+    }
+`;
+const StyledHueSliderThumb = exports.StyledHueSliderThumb = _styledComponents.default.div.attrs(({
+  $position,
+  $color
+}) => ({
+  style: {
+    left: `${$position}px`,
+    backgroundColor: $color
+  }
+}))`
+    min-width: 20px;
+    height: 20px;
+    cursor: pointer;
+    border-radius: 100px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+    z-index: 3;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    white-space: nowrap;
+`;
+//# sourceMappingURL=HueSlider.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HueSlider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledHueSlider","exports","styled","div","StyledHueSliderInput","input","StyledHueSliderThumb","attrs","$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    justify-content: center;\n    touch-action: none;\n`;\n\ntype StyledHueSliderInputProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledHueSliderInput = styled.input<StyledHueSliderInputProps>`\n    width: calc(100% - 10px);\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        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        opacity: 0;\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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,oBAAoB,GAAAH,OAAA,CAAAG,oBAAA,GAAGF,yBAAM,CAACG,KAAgC;AAC3E;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;AACA;AACA,CAAC;AAIM,MAAMC,oBAAoB,GAAAL,OAAA,CAAAK,oBAAA,GAAGJ,yBAAM,CAACC,GAAG,CAACI,KAAK,CAChD,CAAC;EAAEC,SAAS;EAAEC;AAAO,CAAC,MAAM;EACxBC,KAAK,EAAE;IACHC,IAAI,EAAE,GAAGH,SAAS,IAAI;IACtBI,eAAe,EAAEH;EACrB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/transparency-slider/TransparencySlider.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _react = _interopRequireWildcard(require("react"));
+var _color = require("../../utils/color");
+var _TransparencySlider = require("./TransparencySlider.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const TransparencySlider = ({
+  onChange,
+  onStart,
+  onEnd,
+  color = 'rgba(255, 0, 0, 1)'
+}) => {
+  const [editedValue, setEditedValue] = (0, _react.useState)(0);
+  const [pureColor, setPureColor] = (0, _react.useState)();
+  const [previewColor, setPreviewColor] = (0, _react.useState)();
+  const sliderThumbRef = (0, _react.useRef)(null);
+  const sliderRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (color) {
+      let rgb;
+      if ((0, _color.isValidRGBA)(color)) {
+        rgb = (0, _color.splitRgb)(color);
+      } else {
+        rgb = (0, _color.hexToRgb)(color);
+      }
+      if (!rgb) {
+        return;
+      }
+      const {
+        r,
+        g,
+        b,
+        a
+      } = rgb;
+      const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;
+      setPreviewColor(newColor);
+      setPureColor(`rgb(${r},${g},${b},1)`);
+      setEditedValue(100 - a * 100);
+    }
+  }, [color]);
+  const handleInputChange = (0, _react.useCallback)(event => {
+    const a = Number(event.target.value);
+    setEditedValue(a);
+    const rgb = (0, _color.splitRgb)(pureColor);
+    if (!rgb) {
+      return;
+    }
+    const {
+      r,
+      g,
+      b
+    } = rgb;
+    const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;
+    setPreviewColor(newColor);
+    if (typeof onChange === 'function') {
+      onChange(newColor);
+    }
+  }, [onChange, pureColor]);
+  const sliderThumbPosition = (0, _react.useMemo)(() => {
+    if (sliderRef.current && sliderThumbRef.current) {
+      return editedValue / 100 * (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2);
+    }
+    return 0;
+  }, [editedValue]);
+  const handleStart = (0, _react.useCallback)(() => {
+    void (0, _chaynsApi.setRefreshScrollEnabled)(false);
+    if (typeof onStart === 'function') {
+      const rgb = (0, _color.splitRgb)(pureColor);
+      if (!rgb) {
+        return;
+      }
+      const {
+        r,
+        g,
+        b
+      } = rgb;
+      const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;
+      onStart(newColor);
+    }
+  }, [editedValue, onStart, pureColor]);
+  const handleEnd = (0, _react.useCallback)(() => {
+    void (0, _chaynsApi.setRefreshScrollEnabled)(true);
+    if (typeof onEnd === 'function') {
+      const rgb = (0, _color.splitRgb)(pureColor);
+      if (!rgb) {
+        return;
+      }
+      const {
+        r,
+        g,
+        b
+      } = rgb;
+      const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;
+      onEnd(newColor);
+    }
+  }, [editedValue, onEnd, pureColor]);
+  return /*#__PURE__*/_react.default.createElement(_TransparencySlider.StyledTransparencySlider, null, /*#__PURE__*/_react.default.createElement(_TransparencySlider.StyledTransparencySliderInput, {
+    ref: sliderRef,
+    $color: pureColor,
+    type: "range",
+    min: 0,
+    max: 100,
+    value: editedValue,
+    onPointerDown: handleStart,
+    onPointerUp: handleEnd,
+    onChange: handleInputChange
+  }), /*#__PURE__*/_react.default.createElement(_TransparencySlider.StyledTransparencySliderBackground, null), /*#__PURE__*/_react.default.createElement(_TransparencySlider.StyledTransparencySliderThumbWrapper, {
+    ref: sliderThumbRef,
+    $position: sliderThumbPosition
+  }, /*#__PURE__*/_react.default.createElement(_TransparencySlider.StyledTransparencySliderThumbBackground, null), /*#__PURE__*/_react.default.createElement(_TransparencySlider.StyledTransparencySliderThumb, {
+    $color: previewColor
+  })));
+};
+TransparencySlider.displayName = 'TransparencySlider';
+var _default = exports.default = TransparencySlider;
+//# sourceMappingURL=TransparencySlider.js.map

package/lib/cjs/components/transparency-slider/TransparencySlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransparencySlider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_color","_TransparencySlider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TransparencySlider","onChange","onStart","onEnd","color","editedValue","setEditedValue","useState","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","useRef","sliderRef","useEffect","rgb","isValidRGBA","splitRgb","hexToRgb","g","b","newColor","handleInputChange","useCallback","event","Number","target","value","sliderThumbPosition","useMemo","current","offsetWidth","handleStart","setRefreshScrollEnabled","handleEnd","createElement","StyledTransparencySlider","StyledTransparencySliderInput","ref","$color","type","min","max","onPointerDown","onPointerUp","StyledTransparencySliderBackground","StyledTransparencySliderThumbWrapper","$position","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","displayName","_default","exports"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport {\n    StyledTransparencySlider,\n    StyledTransparencySliderBackground,\n    StyledTransparencySliderInput,\n    StyledTransparencySliderThumb,\n    StyledTransparencySliderThumbBackground,\n    StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n    /**\n     * The color that should be selected.\n     */\n    color?: string;\n    /**\n     * Function that will be executed when the opacity is changed.\n     */\n    onChange?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is ending to change.\n     */\n    onEnd?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is starting to change.\n     */\n    onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n    onChange,\n    onStart,\n    onEnd,\n    color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [pureColor, setPureColor] = useState<string>();\n    const [previewColor, setPreviewColor] = useState<string>();\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n            setPreviewColor(newColor);\n            setPureColor(`rgb(${r},${g},${b},1)`);\n            setEditedValue(100 - a * 100);\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const a = Number(event.target.value);\n\n            setEditedValue(a);\n\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n            setPreviewColor(newColor);\n\n            if (typeof onChange === 'function') {\n                onChange(newColor);\n            }\n        },\n        [onChange, pureColor],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 100) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onStart(newColor);\n        }\n    }, [editedValue, onStart, pureColor]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onEnd(newColor);\n        }\n    }, [editedValue, onEnd, pureColor]);\n\n    return (\n        <StyledTransparencySlider>\n            <StyledTransparencySliderInput\n                ref={sliderRef}\n                $color={pureColor}\n                type=\"range\"\n                min={0}\n                max={100}\n                value={editedValue}\n                onPointerDown={handleStart}\n                onPointerUp={handleEnd}\n                onChange={handleInputChange}\n            />\n            <StyledTransparencySliderBackground />\n            <StyledTransparencySliderThumbWrapper\n                ref={sliderThumbRef}\n                $position={sliderThumbPosition}\n            >\n                <StyledTransparencySliderThumbBackground />\n                <StyledTransparencySliderThumb $color={previewColor} />\n            </StyledTransparencySliderThumbWrapper>\n        </StyledTransparencySlider>\n    );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/transparency-slider/TransparencySlider.styles.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTransparencySliderThumbWrapper = exports.StyledTransparencySliderThumbBackground = exports.StyledTransparencySliderThumb = exports.StyledTransparencySliderInput = exports.StyledTransparencySliderBackground = exports.StyledTransparencySlider = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledTransparencySlider = exports.StyledTransparencySlider = _styledComponents.default.div`
+    width: 100%;
+    height: 30px;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: none;
+`;
+const StyledTransparencySliderBackground = exports.StyledTransparencySliderBackground = _styledComponents.default.div`
+    height: 10px;
+    background-color: #fff;
+    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),
+        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),
+        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);
+    background-position:
+        0 0,
+        0 4px,
+        4px -4px,
+        -4px 0;
+    background-repeat: repeat;
+    border-radius: 100px;
+    background-size: 8px 8px;
+    content: '';
+    position: absolute;
+    width: calc(100% - 10px);
+`;
+const StyledTransparencySliderInput = exports.StyledTransparencySliderInput = _styledComponents.default.input.attrs(({
+  $color
+}) => ({
+  style: {
+    background: `linear-gradient(90deg, ${$color ?? ''}, transparent)`
+  }
+}))`
+    width: calc(100% - 10px);
+    border-radius: 100px;
+    -webkit-appearance: none;
+    height: 10px;
+    outline: none;
+    opacity: 0.7;
+    -webkit-transition: 0.2s;
+    transition: opacity 0.2s;
+    z-index: 4;
+
+    // Slider thumb for chrome
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        opacity: 0;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+        border-radius: 50%;
+    }
+
+    // slider thumb for firefox
+    &::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        opacity: 0;
+        cursor: pointer;
+        border-radius: 50%;
+    }
+`;
+const StyledTransparencySliderThumbWrapper = exports.StyledTransparencySliderThumbWrapper = _styledComponents.default.div.attrs(({
+  $position
+}) => ({
+  style: {
+    left: $position
+  }
+}))`
+    position: absolute;
+    min-width: 20px;
+    height: 20px;
+    cursor: pointer;
+    border-radius: 100px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    pointer-events: none;
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    padding: 0 8px;
+    white-space: nowrap;
+`;
+const StyledTransparencySliderThumbBackground = exports.StyledTransparencySliderThumbBackground = _styledComponents.default.div`
+    position: absolute;
+    background-color: #fff;
+    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),
+        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),
+        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);
+    background-position:
+        0 0,
+        0 4px,
+        4px -4px,
+        -4px 0;
+    background-repeat: repeat;
+    background-size: 8px 8px;
+    height: 100%;
+    width: 100%;
+`;
+const StyledTransparencySliderThumb = exports.StyledTransparencySliderThumb = _styledComponents.default.div.attrs(({
+  $color
+}) => ({
+  style: {
+    backgroundColor: $color
+  }
+}))`
+    height: 100%;
+    width: 100%;
+    position: absolute;
+`;
+//# sourceMappingURL=TransparencySlider.styles.js.map

package/lib/cjs/components/transparency-slider/TransparencySlider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransparencySlider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledTransparencySlider","exports","styled","div","StyledTransparencySliderBackground","StyledTransparencySliderInput","input","attrs","$color","style","background","StyledTransparencySliderThumbWrapper","$position","left","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumb","backgroundColor"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\nexport const StyledTransparencySlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n`;\n\nexport const StyledTransparencySliderBackground = styled.div`\n    height: 10px;\n    background-color: #fff;\n    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    border-radius: 100px;\n    background-size: 8px 8px;\n    content: '';\n    position: absolute;\n    width: calc(100% - 10px);\n`;\n\ntype StyledTransparencySliderInputProps = WithTheme<{ $color?: string }>;\n\nexport const StyledTransparencySliderInput = styled.input.attrs<StyledTransparencySliderInputProps>(\n    ({ $color }) => ({\n        style: {\n            background: `linear-gradient(90deg, ${$color ?? ''}, transparent)`,\n        },\n    }),\n)`\n    width: calc(100% - 10px);\n    border-radius: 100px;\n    -webkit-appearance: none;\n    height: 10px;\n    outline: none;\n    opacity: 0.7;\n    -webkit-transition: 0.2s;\n    transition: opacity 0.2s;\n    z-index: 4;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        opacity: 0;\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        opacity: 0;\n        cursor: pointer;\n        border-radius: 50%;\n    }\n`;\n\ntype StyledTransparencySliderThumbWrapperProps = WithTheme<{\n    $position: number;\n}>;\n\nexport const StyledTransparencySliderThumbWrapper = styled.div.attrs<StyledTransparencySliderThumbWrapperProps>(\n    ({ $position }) => ({\n        style: {\n            left: $position,\n        },\n    }),\n)`\n    position: absolute;\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    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    padding: 0 8px;\n    white-space: nowrap;\n`;\n\nexport const StyledTransparencySliderThumbBackground = styled.div`\n    position: absolute;\n    background-color: #fff;\n    background-image: linear-gradient(45deg, #a0a0a0 25%, #0000 0),\n        linear-gradient(-45deg, #a0a0a0 25%, #0000 0), linear-gradient(45deg, #0000 75%, #a0a0a0 0),\n        linear-gradient(-45deg, #0000 75%, #a0a0a0 0);\n    background-position:\n        0 0,\n        0 4px,\n        4px -4px,\n        -4px 0;\n    background-repeat: repeat;\n    background-size: 8px 8px;\n    height: 100%;\n    width: 100%;\n`;\n\ntype StyledTransparencySliderThumbProps = WithTheme<{\n    $color: CSSProperties['color'];\n}>;\n\nexport const StyledTransparencySliderThumb = styled.div.attrs<StyledTransparencySliderThumbProps>(\n    ({ $color }) => ({\n        style: {\n            backgroundColor: $color,\n        },\n    }),\n)`\n    height: 100%;\n    width: 100%;\n    position: absolute;\n`;\n"],"mappings":";;;;;;AAEA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAGE,yBAAM,CAACC,GAAG;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,kCAAkC,GAAAH,OAAA,CAAAG,kCAAA,GAAGF,yBAAM,CAACC,GAAG;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAME,6BAA6B,GAAAJ,OAAA,CAAAI,6BAAA,GAAGH,yBAAM,CAACI,KAAK,CAACC,KAAK,CAC3D,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHC,UAAU,EAAE,0BAA0BF,MAAM,IAAI,EAAE;EACtD;AACJ,CAAC,CACL,CAAC;AACD;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;AAMM,MAAMG,oCAAoC,GAAAV,OAAA,CAAAU,oCAAA,GAAGT,yBAAM,CAACC,GAAG,CAACI,KAAK,CAChE,CAAC;EAAEK;AAAU,CAAC,MAAM;EAChBH,KAAK,EAAE;IACHI,IAAI,EAAED;EACV;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,uCAAuC,GAAAb,OAAA,CAAAa,uCAAA,GAAGZ,yBAAM,CAACC,GAAG;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMY,6BAA6B,GAAAd,OAAA,CAAAc,6BAAA,GAAGb,yBAAM,CAACC,GAAG,CAACI,KAAK,CACzD,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHO,eAAe,EAAER;EACrB;AACJ,CAAC,CACL,CAAC;AACD;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/constants/color.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PRESETCOLORS = exports.ITEM_STORAGE_URL = void 0;
+const PRESETCOLORS = exports.PRESETCOLORS = [{
+  id: '0',
+  color: 'rgba(0,0,0,1)'
+}, {
+  id: '1',
+  color: 'rgba(67,67,67,1)'
+}, {
+  id: '2',
+  color: 'rgba(102,102,102,1)'
+}, {
+  id: '3',
+  color: 'rgba(153,153,153,1)'
+}, {
+  id: '4',
+  color: 'rgba(183,183,183,1)'
+}, {
+  id: '5',
+  color: 'rgba(204,204,204,1)'
+}, {
+  id: '6',
+  color: 'rgba(217,217,217,1)'
+}, {
+  id: '7',
+  color: 'rgba(239,239,239,1)'
+}, {
+  id: '8',
+  color: 'rgba(243,243,243,1)'
+}, {
+  id: '9',
+  color: 'rgba(255,255,255,1)'
+}, {
+  id: '10',
+  color: 'rgba(244,67,54,1)'
+}, {
+  id: '11',
+  color: 'rgba(255,152,0,1)'
+}, {
+  id: '12',
+  color: 'rgba(255,235,59,1)'
+}, {
+  id: '13',
+  color: 'rgba(0,150,136,1)'
+}, {
+  id: '14',
+  color: 'rgba(121,85,72,1)'
+}, {
+  id: '15',
+  color: 'rgba(139,195,74,1)'
+}, {
+  id: '16',
+  color: 'rgba(76,175,80,1)'
+}, {
+  id: '17',
+  color: 'rgba(156,39,176,1)'
+}, {
+  id: '18',
+  color: 'rgba(63,81,181,1)'
+}, {
+  id: '19',
+  color: 'rgba(3,169,244,1)'
+}, {
+  id: '20',
+  color: 'rgba(0,94,184,1)'
+}];
+const ITEM_STORAGE_URL = exports.ITEM_STORAGE_URL = 'https://cube.tobit.cloud/item-storage/api/v1.0';
+//# sourceMappingURL=color.js.map

package/lib/cjs/constants/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":["PRESETCOLORS","exports","id","color","ITEM_STORAGE_URL"],"sources":["../../../src/constants/color.ts"],"sourcesContent":["import type { IPresetColor } from '../types/colorPicker';\n\nexport const PRESETCOLORS: IPresetColor[] = [\n    { id: '0', color: 'rgba(0,0,0,1)' },\n    { id: '1', color: 'rgba(67,67,67,1)' },\n    { id: '2', color: 'rgba(102,102,102,1)' },\n    { id: '3', color: 'rgba(153,153,153,1)' },\n    { id: '4', color: 'rgba(183,183,183,1)' },\n    { id: '5', color: 'rgba(204,204,204,1)' },\n    { id: '6', color: 'rgba(217,217,217,1)' },\n    { id: '7', color: 'rgba(239,239,239,1)' },\n    { id: '8', color: 'rgba(243,243,243,1)' },\n    { id: '9', color: 'rgba(255,255,255,1)' },\n    { id: '10', color: 'rgba(244,67,54,1)' },\n    { id: '11', color: 'rgba(255,152,0,1)' },\n    { id: '12', color: 'rgba(255,235,59,1)' },\n    { id: '13', color: 'rgba(0,150,136,1)' },\n    { id: '14', color: 'rgba(121,85,72,1)' },\n    { id: '15', color: 'rgba(139,195,74,1)' },\n    { id: '16', color: 'rgba(76,175,80,1)' },\n    { id: '17', color: 'rgba(156,39,176,1)' },\n    { id: '18', color: 'rgba(63,81,181,1)' },\n    { id: '19', color: 'rgba(3,169,244,1)' },\n    { id: '20', color: 'rgba(0,94,184,1)' },\n];\n\nexport const ITEM_STORAGE_URL = 'https://cube.tobit.cloud/item-storage/api/v1.0';\n"],"mappings":";;;;;;AAEO,MAAMA,YAA4B,GAAAC,OAAA,CAAAD,YAAA,GAAG,CACxC;EAAEE,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAgB,CAAC,EACnC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAmB,CAAC,EACtC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAsB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAqB,CAAC,EACzC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAoB,CAAC,EACxC;EAAED,EAAE,EAAE,IAAI;EAAEC,KAAK,EAAE;AAAmB,CAAC,CAC1C;AAEM,MAAMC,gBAAgB,GAAAH,OAAA,CAAAG,gBAAA,GAAG,gDAAgD","ignoreList":[]}

package/lib/cjs/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ColorPicker", {
+  enumerable: true,
+  get: function () {
+    return _ColorPicker.default;
+  }
+});
+Object.defineProperty(exports, "ColorPickerPopup", {
+  enumerable: true,
+  get: function () {
+    return _ColorPickerPopup.default;
+  }
+});
+Object.defineProperty(exports, "HueSlider", {
+  enumerable: true,
+  get: function () {
+    return _HueSlider.default;
+  }
+});
+Object.defineProperty(exports, "TransparencySlider", {
+  enumerable: true,
+  get: function () {
+    return _TransparencySlider.default;
+  }
+});
+Object.defineProperty(exports, "hexToRgb", {
+  enumerable: true,
+  get: function () {
+    return _color.hexToRgb;
+  }
+});
+Object.defineProperty(exports, "rgbToHex", {
+  enumerable: true,
+  get: function () {
+    return _color.rgbToHex;
+  }
+});
+var _ColorPickerPopup = _interopRequireDefault(require("./components/color-picker-popup/ColorPickerPopup"));
+var _ColorPicker = _interopRequireDefault(require("./components/color-picker/ColorPicker"));
+var _HueSlider = _interopRequireDefault(require("./components/hue-slider/HueSlider"));
+var _TransparencySlider = _interopRequireDefault(require("./components/transparency-slider/TransparencySlider"));
+var _color = require("./utils/color");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+//# sourceMappingURL=index.js.map

package/lib/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_ColorPickerPopup","_interopRequireDefault","require","_ColorPicker","_HueSlider","_TransparencySlider","_color","e","__esModule","default"],"sources":["../../src/index.ts"],"sourcesContent":["export { default as ColorPickerPopup } from './components/color-picker-popup/ColorPickerPopup';\nexport { default as ColorPicker } from './components/color-picker/ColorPicker';\nexport { default as HueSlider } from './components/hue-slider/HueSlider';\nexport { default as TransparencySlider } from './components/transparency-slider/TransparencySlider';\nexport type { IPresetColor as PresetColor, RGB, RGBA } from './types/colorPicker';\nexport { hexToRgb, rgbToHex } from './utils/color';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,mBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AAAmD,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA","ignoreList":[]}

package/lib/cjs/types/colorPicker.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=colorPicker.js.map

package/lib/cjs/types/colorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorPicker.js","names":[],"sources":["../../../src/types/colorPicker.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}\n\nexport interface RGBA extends RGB {\n    a: number;\n}\n\nexport interface IPresetColor {\n    isCustom?: boolean;\n    id: string;\n    color: string;\n}\n\nexport interface ItemStorageResult {\n    schemeId?: string;\n    siteId?: string;\n    key?: string;\n    value: string[];\n}\n"],"mappings":"","ignoreList":[]}