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

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Tobit Laboratories AG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+<div align="center">
+    <h1>
+        <img src="https://raw.githubusercontent.com/TobitSoftware/chayns-components/master/assets/logo.png" width="600px" alt="chayns-components" />
+    </h1>
+    <p>A set of beautiful React components for developing your own applications with chayns.</p>
+    <div>
+        <img src="https://img.shields.io/npm/dm/@chayns-components/typewriter.svg?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/npm/v/@chayns-components/typewriter?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/license/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/contributors/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+    </div>
+</div>
+
+---
+
+## Installation
+
+First you need to install the color picker part of the chayns-components.
+
+```bash
+# NPM
+npm install @chayns-components/color-picker
+
+# Yarn
+yarn add @chayns-components/color-picker
+```
+
+> **Information:** Since the components have now been implemented with the styled-components
+> library, the styles are delivered directly with the components. There is no need to load an extra
+> stylesheet anymore.
+
+## Usage
+
+You can use the components in your project as in the following example.
+
+```typescript jsx
+import { FileInput } from '@chayns-components/file-input';
+
+<FileInput />;
+```

package/lib/components/hue-slider/HueSlider.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties, FC } from 'react';
+export type HueSliderProps = {
+    /**
+     * The color that should be selected.
+     */
+    color?: CSSProperties['color'];
+    /**
+     * Function that will be executed when the color is changed.
+     */
+    onChange?: (color: CSSProperties['color']) => void;
+};
+declare const HueSlider: FC<HueSliderProps>;
+export default HueSlider;

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

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _colors = require("@chayns/colors");
+var _react = _interopRequireWildcard(require("react"));
+var _color = require("../../utils/color");
+var _HueSlider = require("./HueSlider.styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const HueSlider = _ref => {
+  let {
+    onChange,
+    color = 'rgba(255, 0, 0, 1)'
+  } = _ref;
+  const [editedValue, setEditedValue] = (0, _react.useState)(0);
+  const [hslColor, setHslColor] = (0, _react.useState)('hsl(0, 0, 100)');
+  (0, _react.useEffect)(() => {
+    if (color) {
+      const rgb = (0, _color.splitRgb)(color);
+      if (!rgb) {
+        return;
+      }
+      const hsl = (0, _color.convertColorToHsl)(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`);
+      const match = hsl === null || hsl === void 0 ? void 0 : hsl.toString().match(/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/);
+      if (!match || !match[1]) {
+        return;
+      }
+      setHslColor(`hsl(${match[1]}, 100%, 50%)`);
+      setEditedValue(parseInt(match[1], 10));
+      if (typeof onChange === 'function') {
+        onChange(hsl);
+      }
+    }
+  }, [color, onChange]);
+  const handleInputChange = (0, _react.useCallback)(event => {
+    setEditedValue(Number(event.target.value));
+    const percentage = Number(event.target.value) / 360 * 100;
+    const hue = percentage / 100 * 360;
+    const saturation = 100;
+    const lightness = 50;
+    const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+    setHslColor(hsl);
+    if (typeof onChange === 'function') {
+      const rgb = (0, _colors.hslToRgb255)({
+        h: hue,
+        s: 1,
+        l: 0.5
+      });
+      if (!rgb) {
+        return;
+      }
+      onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${1})`);
+    }
+  }, [onChange]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_HueSlider.StyledHueSlider, null, /*#__PURE__*/_react.default.createElement(_HueSlider.StyledHueSliderInput, {
+    color: hslColor,
+    type: "range",
+    min: 0,
+    max: 360,
+    value: editedValue,
+    onChange: handleInputChange
+  })), [editedValue, handleInputChange, hslColor]);
+};
+HueSlider.displayName = 'HueSlider';
+var _default = HueSlider;
+exports.default = _default;
+//# sourceMappingURL=HueSlider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HueSlider.js","names":["_colors","require","_react","_interopRequireWildcard","_color","_HueSlider","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","HueSlider","_ref","onChange","color","editedValue","setEditedValue","useState","hslColor","setHslColor","useEffect","rgb","splitRgb","hsl","convertColorToHsl","r","g","b","match","toString","parseInt","handleInputChange","useCallback","event","Number","target","value","percentage","hue","saturation","lightness","hslToRgb255","h","s","l","useMemo","createElement","StyledHueSlider","StyledHueSliderInput","type","min","max","displayName","_default","exports"],"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    useState,\n} from 'react';\nimport { convertColorToHsl, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput } 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    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    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleInputChange, hslColor]\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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"}

package/lib/components/hue-slider/HueSlider.styles.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from 'react';
+export declare const StyledHueSlider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledHueSliderInput: import("styled-components").StyledComponent<"input", any, {
+    color: CSSProperties['color'];
+} & {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

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

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledHueSliderInput = exports.StyledHueSlider = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledHueSlider = _styledComponents.default.div`
+    width: 100%;
+    cursor: pointer;
+`;
+exports.StyledHueSlider = StyledHueSlider;
+const StyledHueSliderInput = _styledComponents.default.input`
+    width: 100%;
+    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;
+        background-color: ${_ref => {
+  let {
+    color
+  } = _ref;
+  return color;
+}};
+        cursor: pointer;
+        border-radius: 50%;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    }
+
+    // slider thumb for firefox
+    &::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        background-color: ${_ref2 => {
+  let {
+    color
+  } = _ref2;
+  return color;
+}};
+        cursor: pointer;
+        border-radius: 50%;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    }
+`;
+exports.StyledHueSliderInput = StyledHueSliderInput;
+//# sourceMappingURL=HueSlider.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HueSlider.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledHueSlider","styled","div","exports","StyledHueSliderInput","input","_ref","color","_ref2"],"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    cursor: pointer;\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        background-color: ${({ color }) => color};\n        cursor: pointer;\n        border-radius: 50%;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    }\n\n    // slider thumb for firefox\n    &::-moz-range-thumb {\n        width: 20px;\n        height: 20px;\n        background-color: ${({ color }) => color};\n        cursor: pointer;\n        border-radius: 50%;\n        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    }\n`;\n"],"mappings":";;;;;;AAEA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,eAAe,GAAGC,yBAAM,CAACC,GAAI;AAC1C;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,eAAA,GAAAA,eAAA;AAMK,MAAMI,oBAAoB,GAAGH,yBAAM,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,4BAA4BC,IAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4BC,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK;AAAA,CAAC;AACjD;AACA;AACA;AACA;AACA,CAAC;AAACJ,OAAA,CAAAC,oBAAA,GAAAA,oBAAA"}

package/lib/components/index.d.ts

@@ -0,0 +1 @@
+export { default as HueSlider } from './hue-slider/HueSlider';

package/lib/components/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HueSlider", {
+  enumerable: true,
+  get: function () {
+    return _HueSlider.default;
+  }
+});
+var _HueSlider = _interopRequireDefault(require("./hue-slider/HueSlider"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_HueSlider","_interopRequireDefault","require","obj","__esModule","default"],"sources":["../../src/components/index.ts"],"sourcesContent":["export { default as HueSlider } from './hue-slider/HueSlider';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA8D,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}

package/lib/constants/color.d.ts

@@ -0,0 +1,4 @@
+export declare const colorPresents: {
+    id: number;
+    color: string;
+}[];

package/lib/constants/color.js

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

package/lib/constants/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":["colorPresents","id","color","exports"],"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":";;;;;;AAAO,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;AAACC,OAAA,CAAAH,aAAA,GAAAA,aAAA"}

package/lib/types.d.ts

@@ -0,0 +1,14 @@
+export interface Coordinates {
+    x: number;
+    y: number;
+}
+export interface Scale {
+    scaleX: number;
+    scaleY: number;
+}
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}

package/lib/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +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":""}

package/lib/utils/color.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties, RefObject } from 'react';
+import type { Coordinates, RGB, Scale } from '../types';
+interface GetColorFromCoordinatesOptions {
+    coordinates: Coordinates;
+    canvas: RefObject<HTMLCanvasElement>;
+    opacity: number;
+    scale: Scale;
+}
+export declare const getColorFromCoordinates: ({ coordinates, canvas, opacity, scale, }: GetColorFromCoordinatesOptions) => string | undefined;
+interface GetCoordinatesFromColorOptions {
+    color: CSSProperties['color'];
+    canvas: RefObject<HTMLCanvasElement>;
+}
+export declare const getCoordinatesFromColor: ({ canvas, color }: GetCoordinatesFromColorOptions) => {
+    x: number;
+    y: number;
+} | null | undefined;
+export declare const convertColorToHsl: (color: string) => string | undefined;
+export declare const splitRgb: (color: CSSProperties['color']) => null | RGB;
+export {};

package/lib/utils/color.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.splitRgb = exports.getCoordinatesFromColor = exports.getColorFromCoordinates = exports.convertColorToHsl = void 0;
+var _colors = require("@chayns/colors");
+const getColorFromCoordinates = _ref => {
+  var _canvas$current, _pixels$, _pixels$2, _pixels$3;
+  let {
+    coordinates,
+    canvas,
+    opacity,
+    scale
+  } = _ref;
+  if (!canvas.current) {
+    return undefined;
+  }
+  const {
+    top,
+    left
+  } = canvas.current.getBoundingClientRect();
+  const x = (coordinates.x - left) * scale.scaleX;
+  const y = (coordinates.y - top) * scale.scaleY;
+  const ctx = (_canvas$current = canvas.current) === null || _canvas$current === void 0 ? void 0 : _canvas$current.getContext('2d');
+  const pixels = ctx === null || ctx === void 0 ? void 0 : ctx.getImageData(x, y, 1, 1).data;
+  if (!pixels) {
+    return undefined;
+  }
+
+  // If transparency
+  if (pixels[0] === 0 && pixels[1] === 0 && pixels[2] === 0 && pixels[3] === 0) {
+    return 'transparent';
+  }
+  return `rgba(${(_pixels$ = pixels[0]) !== null && _pixels$ !== void 0 ? _pixels$ : 0}, ${(_pixels$2 = pixels[1]) !== null && _pixels$2 !== void 0 ? _pixels$2 : 0}, ${(_pixels$3 = pixels[2]) !== null && _pixels$3 !== void 0 ? _pixels$3 : 0}, ${opacity})`;
+};
+exports.getColorFromCoordinates = getColorFromCoordinates;
+const getCoordinatesFromColor = _ref2 => {
+  var _canvas$current2;
+  let {
+    canvas,
+    color
+  } = _ref2;
+  const ctx = (_canvas$current2 = canvas.current) === null || _canvas$current2 === void 0 ? void 0 : _canvas$current2.getContext('2d');
+  if (!ctx || !color) {
+    return undefined;
+  }
+  const {
+    data
+  } = ctx.getImageData(0, 0, 300, 150); /// get image data
+  let x = 0;
+  let y = 0;
+  const rgb = splitRgb(color);
+  if (!rgb) {
+    return undefined;
+  }
+  console.log('DATA', data);
+  console.log('RGBA', rgb);
+
+  // iterating x/y instead of forward to get position the easy way
+  for (; y < 150; y++) {
+    // common value for all x
+    const p = y * 4 * 300;
+    for (x = 0; x < 300; x++) {
+      // next pixel (skipping 4 bytes as each pixel is RGBA bytes)
+      const px = p + x * 4;
+
+      // if red component match check the others
+      if (data[px] === rgb.r) {
+        if (data[px + 1] === rgb.g && data[px + 2] === rgb.b) {
+          return {
+            x,
+            y
+          };
+        }
+      }
+    }
+  }
+  return null;
+};
+exports.getCoordinatesFromColor = getCoordinatesFromColor;
+const convertColorToHsl = color => {
+  const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  const rgbRegex = /^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;
+  const hslRegex = /^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;
+  let rgba;
+  let hsl;
+  const newColor = color.replaceAll('%', '');
+  switch (true) {
+    case hexRegex.test(newColor):
+      hsl = (0, _colors.hexToHsl)(color);
+      if (!hsl) {
+        return undefined;
+      }
+      return `hsl(${Math.floor(hsl.h)},100%,50%)`;
+    case rgbRegex.test(newColor):
+      rgba = color.match(/[\d.]+/g);
+      if (!rgba) {
+        return undefined;
+      }
+      hsl = (0, _colors.rgb255ToHsl)({
+        r: Number(rgba[0]),
+        g: Number(rgba[1]),
+        b: Number(rgba[2])
+      });
+      if (!hsl) {
+        return undefined;
+      }
+      return `hsl(${Math.floor(hsl.h)},100%,50%)`;
+    case hslRegex.test(newColor):
+      return color;
+    default:
+      return undefined;
+  }
+};
+exports.convertColorToHsl = convertColorToHsl;
+const splitRgb = color => {
+  const rgba = color === null || color === void 0 ? void 0 : color.match(/[\d.]+/g);
+  if (!rgba) {
+    return null;
+  }
+  return {
+    r: Number(rgba[0]),
+    g: Number(rgba[1]),
+    b: Number(rgba[2]),
+    a: Number(rgba[3])
+  };
+};
+exports.splitRgb = splitRgb;
+//# sourceMappingURL=color.js.map

package/lib/utils/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":["_colors","require","getColorFromCoordinates","_ref","_canvas$current","_pixels$","_pixels$2","_pixels$3","coordinates","canvas","opacity","scale","current","undefined","top","left","getBoundingClientRect","x","scaleX","y","scaleY","ctx","getContext","pixels","getImageData","data","exports","getCoordinatesFromColor","_ref2","_canvas$current2","color","rgb","splitRgb","console","log","p","px","r","g","b","convertColorToHsl","hexRegex","rgbRegex","hslRegex","rgba","hsl","newColor","replaceAll","test","hexToHsl","Math","floor","h","match","rgb255ToHsl","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    console.log('DATA', data);\n\n    console.log('RGBA', rgb);\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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"}

package/package.json

@@ -0,0 +1,68 @@
+{
+    "name": "@chayns-components/color-picker",
+    "version": "5.0.0-beta.217",
+    "description": "A set of beautiful React components for developing your own applications with chayns.",
+    "keywords": [
+        "chayns",
+        "react",
+        "components"
+    ],
+    "author": "Tobit.Software",
+    "homepage": "https://github.com/TobitSoftware/chayns-components/tree/main/packages/color-picker#readme",
+    "license": "MIT",
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "directories": {
+        "lib": "lib",
+        "test": "__tests__"
+    },
+    "files": [
+        "lib"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/TobitSoftware/chayns-components.git"
+    },
+    "scripts": {
+        "build": "npm run build:js && npm run build:types",
+        "build:js": "babel src --out-dir lib --extensions=.ts,.tsx --source-maps --ignore=src/stories",
+        "build:types": "tsc",
+        "prepublishOnly": "npm run build"
+    },
+    "bugs": {
+        "url": "https://github.com/TobitSoftware/chayns-components/issues"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.21.5",
+        "@babel/core": "^7.22.1",
+        "@babel/preset-env": "^7.22.4",
+        "@babel/preset-react": "^7.22.3",
+        "@babel/preset-typescript": "^7.21.5",
+        "@types/react": "^17.0.60",
+        "@types/react-dom": "^17.0.20",
+        "@types/styled-components": "^5.1.26",
+        "@types/uuid": "^9.0.1",
+        "babel-loader": "^8.3.0",
+        "lerna": "^6.6.2",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "styled-components": "^5.3.11",
+        "typescript": "^4.9.5"
+    },
+    "dependencies": {
+        "@chayns-components/core": "^5.0.0-beta.217",
+        "@chayns/colors": "^2.0.0",
+        "clsx": "^1.2.1",
+        "framer-motion": "^6.5.1",
+        "uuid": "^9.0.0"
+    },
+    "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0",
+        "styled-components": ">=5.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "b2000efd734dadf7b5084690838b9a8eedbafb9d"
+}