@chayns-components/color-picker 5.0.0-beta.577 → 5.0.0-beta.578

package/lib/cjs/components/ColorPickerProvider.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ColorPickerContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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 ColorPickerContext = exports.ColorPickerContext = /*#__PURE__*/_react.default.createContext({
+  selectedColor: undefined,
+  updateSelectedColor: undefined,
+  hueColor: undefined,
+  updateHueColor: undefined,
+  isPresetColor: undefined,
+  updateIsPresetColor: undefined,
+  shouldGetCoordinates: undefined,
+  updateShouldGetCoordinates: undefined,
+  shouldCallOnSelect: undefined,
+  updateShouldCallOnSelect: undefined
+});
+ColorPickerContext.displayName = 'ColorPickerContext';
+const ColorPickerProvider = ({
+  children,
+  selectedColor,
+  onSelect
+}) => {
+  const [internalSelectedColor, setInternalSelectedColor] = (0, _react.useState)();
+  const [internalHueColor, setInternalHueColor] = (0, _react.useState)();
+  const [internalIsPresetColor, setInternalIsPresetColor] = (0, _react.useState)(false);
+  const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = (0, _react.useState)(true);
+  const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = (0, _react.useState)(false);
+  const updateSelectedColor = (0, _react.useCallback)(color => {
+    setInternalSelectedColor(color);
+  }, []);
+  const updateHueColor = (0, _react.useCallback)(color => {
+    setInternalHueColor(color);
+  }, []);
+  const updateIsPresetColor = (0, _react.useCallback)(isPresetColor => {
+    setInternalIsPresetColor(isPresetColor);
+  }, []);
+  const updateShouldGetCoordinates = (0, _react.useCallback)(shouldGetCoordinates => {
+    setInternalShouldGetCoordinates(shouldGetCoordinates);
+  }, []);
+  const updateShouldCallOnSelect = (0, _react.useCallback)(shouldCallOnSelect => {
+    setInternalShouldCallOnSelect(shouldCallOnSelect);
+  }, []);
+  (0, _react.useEffect)(() => {
+    setInternalSelectedColor(selectedColor);
+    setInternalHueColor(selectedColor);
+    setInternalIsPresetColor(true);
+  }, [selectedColor]);
+  (0, _react.useEffect)(() => {
+    if (typeof onSelect === 'function' && internalShouldCallOnSelect && internalSelectedColor) {
+      onSelect(internalSelectedColor);
+      setInternalShouldCallOnSelect(false);
+    }
+  }, [internalSelectedColor, internalShouldCallOnSelect, onSelect]);
+  const providerValue = (0, _react.useMemo)(() => ({
+    selectedColor: internalSelectedColor,
+    updateSelectedColor,
+    hueColor: internalHueColor,
+    updateHueColor,
+    isPresetColor: internalIsPresetColor,
+    updateIsPresetColor,
+    shouldGetCoordinates: internalShouldGetCoordinates,
+    updateShouldGetCoordinates,
+    shouldCallOnSelect: internalShouldCallOnSelect,
+    updateShouldCallOnSelect
+  }), [internalHueColor, internalIsPresetColor, internalSelectedColor, internalShouldCallOnSelect, internalShouldGetCoordinates, updateHueColor, updateIsPresetColor, updateSelectedColor, updateShouldCallOnSelect, updateShouldGetCoordinates]);
+  return /*#__PURE__*/_react.default.createElement(ColorPickerContext.Provider, {
+    value: providerValue
+  }, children);
+};
+ColorPickerProvider.displayName = 'ColorPickerProvider';
+var _default = exports.default = ColorPickerProvider;
+//# sourceMappingURL=ColorPickerProvider.js.map

package/lib/cjs/components/ColorPickerProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerProvider.js","names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerContext","exports","React","createContext","selectedColor","undefined","updateSelectedColor","hueColor","updateHueColor","isPresetColor","updateIsPresetColor","shouldGetCoordinates","updateShouldGetCoordinates","shouldCallOnSelect","updateShouldCallOnSelect","displayName","ColorPickerProvider","children","onSelect","internalSelectedColor","setInternalSelectedColor","useState","internalHueColor","setInternalHueColor","internalIsPresetColor","setInternalIsPresetColor","internalShouldGetCoordinates","setInternalShouldGetCoordinates","internalShouldCallOnSelect","setInternalShouldCallOnSelect","useCallback","color","useEffect","providerValue","useMemo","createElement","Provider","value","_default"],"sources":["../../../src/components/ColorPickerProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';\n\ninterface IColorPickerContext {\n    selectedColor?: string;\n    updateSelectedColor?: (color: string | undefined) => void;\n    hueColor?: string;\n    updateHueColor?: (color: string | undefined) => void;\n    isPresetColor?: boolean;\n    updateIsPresetColor?: (isPresetColor: boolean) => void;\n    shouldGetCoordinates?: boolean;\n    updateShouldGetCoordinates?: (shouldGetCoordinates: boolean) => void;\n    shouldCallOnSelect?: boolean;\n    updateShouldCallOnSelect?: (shouldCallOnSelect: boolean) => void;\n}\n\nexport const ColorPickerContext = React.createContext<IColorPickerContext>({\n    selectedColor: undefined,\n    updateSelectedColor: undefined,\n    hueColor: undefined,\n    updateHueColor: undefined,\n    isPresetColor: undefined,\n    updateIsPresetColor: undefined,\n    shouldGetCoordinates: undefined,\n    updateShouldGetCoordinates: undefined,\n    shouldCallOnSelect: undefined,\n    updateShouldCallOnSelect: undefined,\n});\n\nColorPickerContext.displayName = 'ColorPickerContext';\n\ninterface ColorPickerProviderProps {\n    /**\n     * The children of the provider.\n     */\n    children: ReactNode;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n}\n\nconst ColorPickerProvider = ({ children, selectedColor, onSelect }: ColorPickerProviderProps) => {\n    const [internalSelectedColor, setInternalSelectedColor] = useState<string>();\n    const [internalHueColor, setInternalHueColor] = useState<string>();\n    const [internalIsPresetColor, setInternalIsPresetColor] = useState<boolean>(false);\n    const [internalShouldGetCoordinates, setInternalShouldGetCoordinates] = useState<boolean>(true);\n    const [internalShouldCallOnSelect, setInternalShouldCallOnSelect] = useState<boolean>(false);\n\n    const updateSelectedColor = useCallback((color: string | undefined) => {\n        setInternalSelectedColor(color);\n    }, []);\n\n    const updateHueColor = useCallback((color: string | undefined) => {\n        setInternalHueColor(color);\n    }, []);\n\n    const updateIsPresetColor = useCallback((isPresetColor: boolean) => {\n        setInternalIsPresetColor(isPresetColor);\n    }, []);\n\n    const updateShouldGetCoordinates = useCallback((shouldGetCoordinates: boolean) => {\n        setInternalShouldGetCoordinates(shouldGetCoordinates);\n    }, []);\n\n    const updateShouldCallOnSelect = useCallback((shouldCallOnSelect: boolean) => {\n        setInternalShouldCallOnSelect(shouldCallOnSelect);\n    }, []);\n\n    useEffect(() => {\n        setInternalSelectedColor(selectedColor);\n        setInternalHueColor(selectedColor);\n        setInternalIsPresetColor(true);\n    }, [selectedColor]);\n\n    useEffect(() => {\n        if (typeof onSelect === 'function' && internalShouldCallOnSelect && internalSelectedColor) {\n            onSelect(internalSelectedColor);\n\n            setInternalShouldCallOnSelect(false);\n        }\n    }, [internalSelectedColor, internalShouldCallOnSelect, onSelect]);\n\n    const providerValue = useMemo<IColorPickerContext>(\n        () => ({\n            selectedColor: internalSelectedColor,\n            updateSelectedColor,\n            hueColor: internalHueColor,\n            updateHueColor,\n            isPresetColor: internalIsPresetColor,\n            updateIsPresetColor,\n            shouldGetCoordinates: internalShouldGetCoordinates,\n            updateShouldGetCoordinates,\n            shouldCallOnSelect: internalShouldCallOnSelect,\n            updateShouldCallOnSelect,\n        }),\n        [\n            internalHueColor,\n            internalIsPresetColor,\n            internalSelectedColor,\n            internalShouldCallOnSelect,\n            internalShouldGetCoordinates,\n            updateHueColor,\n            updateIsPresetColor,\n            updateSelectedColor,\n            updateShouldCallOnSelect,\n            updateShouldGetCoordinates,\n        ],\n    );\n\n    return (\n        <ColorPickerContext.Provider value={providerValue}>{children}</ColorPickerContext.Provider>\n    );\n};\n\nColorPickerProvider.displayName = 'ColorPickerProvider';\n\nexport default ColorPickerProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/color-picker/ColorPicker.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ColorPickerProvider = _interopRequireDefault(require("../ColorPickerProvider"));
+var _ColorPickerWrapper = _interopRequireDefault(require("./color-picker-wrapper/ColorPickerWrapper"));
+var _ColorPicker = require("./ColorPicker.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ColorPicker = ({
+  selectedColor = 'rgba(255, 0, 0, 1)',
+  presetColors,
+  onPresetColorRemove,
+  onPresetColorAdd,
+  shouldShowPresetColors = false,
+  shouldShowAsPopup = true,
+  shouldShowTransparencySlider = false,
+  shouldShowMoreOptions = false,
+  shouldShowRoundPreviewColor = true,
+  shouldShowPreviewColorString = true,
+  onSelect
+}) => /*#__PURE__*/_react.default.createElement(_ColorPickerProvider.default, {
+  selectedColor: selectedColor,
+  onSelect: onSelect
+}, /*#__PURE__*/_react.default.createElement(_ColorPicker.StyledColorPicker, null, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.default, {
+  shouldShowPreviewColorString: shouldShowPreviewColorString,
+  shouldShowRoundPreviewColor: shouldShowRoundPreviewColor,
+  shouldShowTransparencySlider: shouldShowTransparencySlider,
+  presetColors: presetColors,
+  onPresetColorAdd: onPresetColorAdd,
+  onPresetColorRemove: onPresetColorRemove,
+  shouldShowAsPopup: shouldShowAsPopup,
+  shouldShowMoreOptions: shouldShowMoreOptions,
+  shouldShowPresetColors: shouldShowPresetColors
+})));
+ColorPicker.displayName = 'ColorPicker';
+var _default = exports.default = ColorPicker;
+//# sourceMappingURL=ColorPicker.js.map

package/lib/cjs/components/color-picker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","names":["_react","_interopRequireDefault","require","_ColorPickerProvider","_ColorPickerWrapper","_ColorPicker","obj","__esModule","default","ColorPicker","selectedColor","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","onSelect","createElement","StyledColorPicker","displayName","_default","exports"],"sources":["../../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../types';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorPickerWrapper from './color-picker-wrapper/ColorPickerWrapper';\nimport { StyledColorPicker } from './ColorPicker.styles';\n\ninterface ColorPickerProps {\n    /**\n     * Colors the user can select from.\n     */\n    presetColors?: IPresetColor[];\n    /**\n     * Function to be executed when a preset color is added.\n     */\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    /**\n     * Function to be executed when a preset color is removed.\n     */\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    /**\n     * Function to be executed when a color is selected.\n     */\n    onSelect?: (color: string) => void;\n    /**\n     * The color that should be preselected.\n     */\n    selectedColor?: string;\n    /**\n     * Whether the ColorPicker should be displayed inside a popup.\n     */\n    shouldShowAsPopup?: boolean;\n    /**\n     * Whether the more options accordion should be displayed.\n     */\n    shouldShowMoreOptions?: boolean;\n    /**\n     * Whether the preset colors should be displayed.\n     */\n    shouldShowPresetColors?: boolean;\n    /**\n     * Whether the preview color should be displayed as text.\n     */\n    shouldShowPreviewColorString?: boolean;\n    /**\n     * Whether the preview color should be displayed round.\n     */\n    shouldShowRoundPreviewColor?: boolean;\n    /**\n     * Whether the transparency slider should be displayed.\n     */\n    shouldShowTransparencySlider?: boolean;\n}\n\nconst ColorPicker = ({\n    selectedColor = 'rgba(255, 0, 0, 1)',\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors = false,\n    shouldShowAsPopup = true,\n    shouldShowTransparencySlider = false,\n    shouldShowMoreOptions = false,\n    shouldShowRoundPreviewColor = true,\n    shouldShowPreviewColorString = true,\n    onSelect,\n}: ColorPickerProps) => (\n    <ColorPickerProvider selectedColor={selectedColor} onSelect={onSelect}>\n        <StyledColorPicker>\n            <ColorPickerWrapper\n                shouldShowPreviewColorString={shouldShowPreviewColorString}\n                shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n                presetColors={presetColors}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n                shouldShowAsPopup={shouldShowAsPopup}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowPresetColors={shouldShowPresetColors}\n            />\n        </StyledColorPicker>\n    </ColorPickerProvider>\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,oBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,mBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAAyD,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAiDzD,MAAMG,WAAW,GAAGA,CAAC;EACjBC,aAAa,GAAG,oBAAoB;EACpCC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,sBAAsB,GAAG,KAAK;EAC9BC,iBAAiB,GAAG,IAAI;EACxBC,4BAA4B,GAAG,KAAK;EACpCC,qBAAqB,GAAG,KAAK;EAC7BC,2BAA2B,GAAG,IAAI;EAClCC,4BAA4B,GAAG,IAAI;EACnCC;AACc,CAAC,kBACfpB,MAAA,CAAAQ,OAAA,CAAAa,aAAA,CAAClB,oBAAA,CAAAK,OAAmB;EAACE,aAAa,EAAEA,aAAc;EAACU,QAAQ,EAAEA;AAAS,gBAClEpB,MAAA,CAAAQ,OAAA,CAAAa,aAAA,CAAChB,YAAA,CAAAiB,iBAAiB,qBACdtB,MAAA,CAAAQ,OAAA,CAAAa,aAAA,CAACjB,mBAAA,CAAAI,OAAkB;EACfW,4BAA4B,EAAEA,4BAA6B;EAC3DD,2BAA2B,EAAEA,2BAA4B;EACzDF,4BAA4B,EAAEA,4BAA6B;EAC3DL,YAAY,EAAEA,YAAa;EAC3BE,gBAAgB,EAAEA,gBAAiB;EACnCD,mBAAmB,EAAEA,mBAAoB;EACzCG,iBAAiB,EAAEA,iBAAkB;EACrCE,qBAAqB,EAAEA,qBAAsB;EAC7CH,sBAAsB,EAAEA;AAAuB,CAClD,CACc,CACF,CACxB;AAEDL,WAAW,CAACc,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjB,OAAA,GAEzBC,WAAW","ignoreList":[]}

package/lib/cjs/components/color-picker/ColorPicker.styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledColorPicker = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledColorPicker = exports.StyledColorPicker = _styledComponents.default.div`
+    width: 100%;
+`;
+//# sourceMappingURL=ColorPicker.styles.js.map

package/lib/cjs/components/color-picker/ColorPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledColorPicker","exports","styled","div"],"sources":["../../../../src/components/color-picker/ColorPicker.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledColorPicker = styled.div`\n    width: 100%;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAI;AAC5C;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@chayns-components/core");
+var _react = _interopRequireWildcard(require("react"));
+var _ColorPickerProvider = require("../../ColorPickerProvider");
+var _ColorPickerPopup = _interopRequireDefault(require("./color-picker-popup/ColorPickerPopup"));
+var _ColorPickerWrapper = require("./ColorPickerWrapper.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 ColorPickerWrapper = ({
+  presetColors,
+  onPresetColorRemove,
+  onPresetColorAdd,
+  shouldShowPresetColors,
+  shouldShowAsPopup,
+  shouldShowTransparencySlider,
+  shouldShowMoreOptions,
+  shouldShowRoundPreviewColor,
+  shouldShowPreviewColorString
+}) => {
+  const {
+    selectedColor
+  } = (0, _react.useContext)(_ColorPickerProvider.ColorPickerContext);
+  const content = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ColorPickerPopup.default, {
+    shouldShowPresetColors: shouldShowPresetColors,
+    onPresetColorRemove: onPresetColorRemove,
+    onPresetColorAdd: onPresetColorAdd,
+    presetColors: presetColors,
+    shouldShowMoreOptions: shouldShowMoreOptions,
+    shouldShowTransparencySlider: shouldShowTransparencySlider
+  }), [onPresetColorAdd, onPresetColorRemove, presetColors, shouldShowMoreOptions, shouldShowPresetColors, shouldShowTransparencySlider]);
+  return /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapper, null, shouldShowAsPopup ? /*#__PURE__*/_react.default.createElement(_core.Popup, {
+    content: content
+  }, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfo, null, /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoColor, {
+    $color: selectedColor,
+    $shouldShowRoundPreviewColor: shouldShowRoundPreviewColor
+  }), shouldShowPreviewColorString && /*#__PURE__*/_react.default.createElement(_ColorPickerWrapper.StyledColorPickerWrapperInfoText, null, selectedColor))) : content);
+};
+ColorPickerWrapper.displayName = 'ColorPickerWrapper';
+var _default = exports.default = ColorPickerWrapper;
+//# sourceMappingURL=ColorPickerWrapper.js.map

package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerWrapper.js","names":["_core","require","_react","_interopRequireWildcard","_ColorPickerProvider","_ColorPickerPopup","_interopRequireDefault","_ColorPickerWrapper","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ColorPickerWrapper","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","selectedColor","useContext","ColorPickerContext","content","useMemo","createElement","StyledColorPickerWrapper","Popup","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","$color","$shouldShowRoundPreviewColor","StyledColorPickerWrapperInfoText","displayName","_default","exports"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup } from '@chayns-components/core';\nimport React, { useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport ColorPickerPopup from './color-picker-popup/ColorPickerPopup';\nimport {\n    StyledColorPickerWrapper,\n    StyledColorPickerWrapperInfo,\n    StyledColorPickerWrapperInfoColor,\n    StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n    shouldShowAsPopup: boolean;\n    shouldShowPreviewColorString: boolean;\n    shouldShowRoundPreviewColor: boolean;\n}\n\nconst ColorPickerWrapper = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowAsPopup,\n    shouldShowTransparencySlider,\n    shouldShowMoreOptions,\n    shouldShowRoundPreviewColor,\n    shouldShowPreviewColorString,\n}: ColorPickerWrapperProps) => {\n    const { selectedColor } = useContext(ColorPickerContext);\n\n    const content = useMemo(\n        () => (\n            <ColorPickerPopup\n                shouldShowPresetColors={shouldShowPresetColors}\n                onPresetColorRemove={onPresetColorRemove}\n                onPresetColorAdd={onPresetColorAdd}\n                presetColors={presetColors}\n                shouldShowMoreOptions={shouldShowMoreOptions}\n                shouldShowTransparencySlider={shouldShowTransparencySlider}\n            />\n        ),\n        [\n            onPresetColorAdd,\n            onPresetColorRemove,\n            presetColors,\n            shouldShowMoreOptions,\n            shouldShowPresetColors,\n            shouldShowTransparencySlider,\n        ],\n    );\n\n    return (\n        <StyledColorPickerWrapper>\n            {shouldShowAsPopup ? (\n                <Popup content={content}>\n                    <StyledColorPickerWrapperInfo>\n                        <StyledColorPickerWrapperInfoColor\n                            $color={selectedColor}\n                            $shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n                        />\n                        {shouldShowPreviewColorString && (\n                            <StyledColorPickerWrapperInfoText>\n                                {selectedColor}\n                            </StyledColorPickerWrapperInfoText>\n                        )}\n                    </StyledColorPickerWrapperInfo>\n                </Popup>\n            ) : (\n                content\n            )}\n        </StyledColorPickerWrapper>\n    );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledColorPickerWrapperInfoText = exports.StyledColorPickerWrapperInfoColor = exports.StyledColorPickerWrapperInfo = exports.StyledColorPickerWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledColorPickerWrapper = exports.StyledColorPickerWrapper = _styledComponents.default.div``;
+const StyledColorPickerWrapperInfo = exports.StyledColorPickerWrapperInfo = _styledComponents.default.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+`;
+const StyledColorPickerWrapperInfoColor = exports.StyledColorPickerWrapperInfoColor = _styledComponents.default.div.attrs(({
+  $color
+}) => ({
+  style: {
+    backgroundColor: $color
+  }
+}))`
+    width: 15px;
+    aspect-ratio: 1;
+    border-radius: ${({
+  $shouldShowRoundPreviewColor
+}) => $shouldShowRoundPreviewColor ? '50px' : '0px'};
+`;
+const StyledColorPickerWrapperInfoText = exports.StyledColorPickerWrapperInfoText = _styledComponents.default.div`
+    border-bottom-style: dashed;
+    border-bottom-width: 1px;
+
+    color: ${({
+  theme
+}) => theme.text};
+`;
+//# sourceMappingURL=ColorPickerWrapper.styles.js.map

package/lib/cjs/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerWrapper.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledColorPickerWrapper","exports","styled","div","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","attrs","$color","style","backgroundColor","$shouldShowRoundPreviewColor","StyledColorPickerWrapperInfoText","theme","text"],"sources":["../../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledColorPickerWrapper = styled.div``;\n\nexport const StyledColorPickerWrapperInfo = styled.div`\n    display: flex;\n    align-items: center;\n    gap: 8px;\n`;\n\ntype StyledColorPickerWrapperInfoColorProps = WithTheme<{\n    $color?: string;\n    $shouldShowRoundPreviewColor: boolean;\n}>;\n\nexport const StyledColorPickerWrapperInfoColor = styled.div.attrs<StyledColorPickerWrapperInfoColorProps>(\n    ({ $color }) => ({\n        style: {\n            backgroundColor: $color,\n        },\n    }),\n)`\n    width: 15px;\n    aspect-ratio: 1;\n    border-radius: ${({ $shouldShowRoundPreviewColor }) =>\n        $shouldShowRoundPreviewColor ? '50px' : '0px'};\n`;\n\ntype StyledColorPickerWrapperInfoTextProps = WithTheme<unknown>;\n\nexport const StyledColorPickerWrapperInfoText = styled.div<StyledColorPickerWrapperInfoTextProps>`\n    border-bottom-style: dashed;\n    border-bottom-width: 1px;\n\n    color: ${({ theme }: StyledColorPickerWrapperInfoTextProps) => theme.text};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAGE,yBAAM,CAACC,GAAI,EAAC;AAE7C,MAAMC,4BAA4B,GAAAH,OAAA,CAAAG,4BAAA,GAAGF,yBAAM,CAACC,GAAI;AACvD;AACA;AACA;AACA,CAAC;AAOM,MAAME,iCAAiC,GAAAJ,OAAA,CAAAI,iCAAA,GAAGH,yBAAM,CAACC,GAAG,CAACG,KAAK,CAC7D,CAAC;EAAEC;AAAO,CAAC,MAAM;EACbC,KAAK,EAAE;IACHC,eAAe,EAAEF;EACrB;AACJ,CAAC,CACL,CAAE;AACF;AACA;AACA,qBAAqB,CAAC;EAAEG;AAA6B,CAAC,KAC9CA,4BAA4B,GAAG,MAAM,GAAG,KAAM;AACtD,CAAC;AAIM,MAAMC,gCAAgC,GAAAV,OAAA,CAAAU,gCAAA,GAAGT,yBAAM,CAACC,GAA2C;AAClG;AACA;AACA;AACA,aAAa,CAAC;EAAES;AAA6C,CAAC,KAAKA,KAAK,CAACC,IAAK;AAC9E,CAAC","ignoreList":[]}

package/lib/cjs/components/color-picker/color-picker-wrapper/color-picker-popup/ColorPickerPopup.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ColorArea = _interopRequireDefault(require("./color-area/ColorArea"));
+var _ColorPickerPopup = require("./ColorPickerPopup.styles");
+var _MoreOptions = _interopRequireDefault(require("./more-options/MoreOptions"));
+var _PresetColors = _interopRequireDefault(require("./preset-colors/PresetColors"));
+var _Sliders = _interopRequireDefault(require("./sliders/Sliders"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const ColorPickerPopup = ({
+  presetColors,
+  onPresetColorRemove,
+  onPresetColorAdd,
+  shouldShowPresetColors,
+  shouldShowTransparencySlider,
+  shouldShowMoreOptions
+}) => /*#__PURE__*/_react.default.createElement(_ColorPickerPopup.StyledColorPickerPopup, null, /*#__PURE__*/_react.default.createElement(_ColorArea.default, null), /*#__PURE__*/_react.default.createElement(_Sliders.default, {
+  shouldShowTransparencySlider: shouldShowTransparencySlider
+}), shouldShowPresetColors && /*#__PURE__*/_react.default.createElement(_PresetColors.default, {
+  presetColors: presetColors,
+  onPresetColorAdd: onPresetColorAdd,
+  onPresetColorRemove: onPresetColorRemove
+}), shouldShowMoreOptions && /*#__PURE__*/_react.default.createElement(_MoreOptions.default, null));
+ColorPickerPopup.displayName = 'ColorPickerPopup';
+var _default = exports.default = ColorPickerPopup;
+//# sourceMappingURL=ColorPickerPopup.js.map

package/lib/cjs/components/color-picker/color-picker-wrapper/color-picker-popup/ColorPickerPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPopup.js","names":["_react","_interopRequireDefault","require","_ColorArea","_ColorPickerPopup","_MoreOptions","_PresetColors","_Sliders","obj","__esModule","default","ColorPickerPopup","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowTransparencySlider","shouldShowMoreOptions","createElement","StyledColorPickerPopup","displayName","_default","exports"],"sources":["../../../../../../src/components/color-picker/color-picker-wrapper/color-picker-popup/ColorPickerPopup.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../../../types';\nimport ColorArea from './color-area/ColorArea';\nimport { StyledColorPickerPopup } from './ColorPickerPopup.styles';\nimport MoreOptions from './more-options/MoreOptions';\nimport PresetColors from './preset-colors/PresetColors';\nimport Sliders from './sliders/Sliders';\n\ninterface ColorPickerPopupProps {\n    presetColors?: IPresetColor[];\n    shouldShowPresetColors: boolean;\n    onPresetColorAdd?: (presetColor: IPresetColor) => void;\n    onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n    shouldShowTransparencySlider: boolean;\n    shouldShowMoreOptions: boolean;\n}\n\nconst ColorPickerPopup = ({\n    presetColors,\n    onPresetColorRemove,\n    onPresetColorAdd,\n    shouldShowPresetColors,\n    shouldShowTransparencySlider,\n    shouldShowMoreOptions,\n}: ColorPickerPopupProps) => (\n    <StyledColorPickerPopup>\n        <ColorArea />\n        <Sliders shouldShowTransparencySlider={shouldShowTransparencySlider} />\n        {shouldShowPresetColors && (\n            <PresetColors\n                presetColors={presetColors}\n                onPresetColorAdd={onPresetColorAdd}\n                onPresetColorRemove={onPresetColorRemove}\n            />\n        )}\n        {shouldShowMoreOptions && <MoreOptions />}\n    </StyledColorPickerPopup>\n);\n\nColorPickerPopup.displayName = 'ColorPickerPopup';\n\nexport default ColorPickerPopup;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,aAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,QAAA,GAAAN,sBAAA,CAAAC,OAAA;AAAwC,SAAAD,uBAAAO,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAWxC,MAAMG,gBAAgB,GAAGA,CAAC;EACtBC,YAAY;EACZC,mBAAmB;EACnBC,gBAAgB;EAChBC,sBAAsB;EACtBC,4BAA4B;EAC5BC;AACmB,CAAC,kBACpBjB,MAAA,CAAAU,OAAA,CAAAQ,aAAA,CAACd,iBAAA,CAAAe,sBAAsB,qBACnBnB,MAAA,CAAAU,OAAA,CAAAQ,aAAA,CAACf,UAAA,CAAAO,OAAS,MAAE,CAAC,eACbV,MAAA,CAAAU,OAAA,CAAAQ,aAAA,CAACX,QAAA,CAAAG,OAAO;EAACM,4BAA4B,EAAEA;AAA6B,CAAE,CAAC,EACtED,sBAAsB,iBACnBf,MAAA,CAAAU,OAAA,CAAAQ,aAAA,CAACZ,aAAA,CAAAI,OAAY;EACTE,YAAY,EAAEA,YAAa;EAC3BE,gBAAgB,EAAEA,gBAAiB;EACnCD,mBAAmB,EAAEA;AAAoB,CAC5C,CACJ,EACAI,qBAAqB,iBAAIjB,MAAA,CAAAU,OAAA,CAAAQ,aAAA,CAACb,YAAA,CAAAK,OAAW,MAAE,CACpB,CAC3B;AAEDC,gBAAgB,CAACS,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAZ,OAAA,GAEnCC,gBAAgB","ignoreList":[]}

package/lib/cjs/components/color-picker/color-picker-wrapper/color-picker-popup/ColorPickerPopup.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledColorPickerPopup = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledColorPickerPopup = exports.StyledColorPickerPopup = _styledComponents.default.div`
+    width: 320px;
+    padding: 11px;
+`;
+//# sourceMappingURL=ColorPickerPopup.styles.js.map

package/lib/cjs/components/color-picker/color-picker-wrapper/color-picker-popup/ColorPickerPopup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPopup.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledColorPickerPopup","exports","styled","div"],"sources":["../../../../../../src/components/color-picker/color-picker-wrapper/color-picker-popup/ColorPickerPopup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledColorPickerPopup = styled.div`\n    width: 320px;\n    padding: 11px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAGE,yBAAM,CAACC,GAAI;AACjD;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,224 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ColorArea = require("./ColorArea.styles");
+var _colors = require("@chayns/colors");
+var _framerMotion = require("framer-motion");
+var _color = require("../../../../../utils/color");
+var _ColorPickerProvider = require("../../../../ColorPickerProvider");
+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 ColorArea = () => {
+  const {
+    selectedColor,
+    updateSelectedColor,
+    updateIsPresetColor,
+    isPresetColor,
+    shouldGetCoordinates,
+    updateShouldGetCoordinates,
+    updateShouldCallOnSelect,
+    hueColor
+  } = (0, _react.useContext)(_ColorPickerProvider.ColorPickerContext);
+  const [opacity, setOpacity] = (0, _react.useState)(1);
+  const [scale, setScale] = (0, _react.useState)({
+    scaleX: 0,
+    scaleY: 0
+  });
+  const isPresetColorRef = (0, _react.useRef)(false);
+  const shouldGetCoordinatesRef = (0, _react.useRef)(false);
+  const canDrag = (0, _react.useRef)(false);
+  const canvasRef = (0, _react.useRef)(null);
+  const pseudoRef = (0, _react.useRef)(null);
+  const dragControls = (0, _framerMotion.useDragControls)();
+  const x = (0, _framerMotion.useMotionValue)(0);
+  const y = (0, _framerMotion.useMotionValue)(0);
+  (0, _react.useEffect)(() => {
+    isPresetColorRef.current = isPresetColor ?? false;
+  }, [isPresetColor]);
+  (0, _react.useEffect)(() => {
+    shouldGetCoordinatesRef.current = shouldGetCoordinates ?? true;
+  }, [shouldGetCoordinates]);
+  (0, _react.useEffect)(() => {
+    if (selectedColor) {
+      const {
+        a
+      } = (0, _color.extractRgbValues)(selectedColor);
+      setOpacity(a);
+    }
+  }, [selectedColor]);
+  (0, _react.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    setScale({
+      scaleX,
+      scaleY
+    });
+  }, []);
+  const setColor = (0, _react.useCallback)(() => {
+    const xCord = x.get();
+    const yCord = y.get();
+    if (typeof updateSelectedColor === 'function') {
+      const color = (0, _color.getColorFromCoordinates)({
+        coordinates: {
+          x: xCord,
+          y: yCord
+        },
+        canvas: canvasRef,
+        opacity,
+        scale
+      });
+      if (color === 'transparent') {
+        return;
+      }
+      updateSelectedColor(color);
+    }
+  }, [opacity, scale, updateSelectedColor, x, y]);
+  (0, _react.useEffect)(() => {
+    var _canvasRef$current;
+    const ctx = (_canvasRef$current = canvasRef.current) === null || _canvasRef$current === void 0 ? void 0 : _canvasRef$current.getContext('2d');
+    if (!ctx) {
+      return;
+    }
+    const hsv = (0, _color.rgbToHsv)(hueColor);
+    const hex = (0, _colors.hsvToHex)({
+      h: (hsv === null || hsv === void 0 ? void 0 : hsv.h) ?? 1,
+      s: 1,
+      v: 1
+    });
+    const colorGradiant = ctx.createLinearGradient(0, 0, 300, 0);
+    colorGradiant.addColorStop(0, '#fff');
+    colorGradiant.addColorStop(1, hex ?? 'red');
+    ctx.fillStyle = colorGradiant;
+    ctx.fillRect(0, 0, 300, 150);
+    const transparentGradiant = ctx.createLinearGradient(0, 0, 0, 150);
+    transparentGradiant.addColorStop(0, 'transparent');
+    transparentGradiant.addColorStop(1, '#000');
+    ctx.fillStyle = transparentGradiant;
+    ctx.fillRect(0, 0, 300, 150);
+    if (isPresetColorRef.current) {
+      if (typeof updateIsPresetColor === 'function') {
+        updateIsPresetColor(false);
+      }
+      return;
+    }
+    setColor();
+  }, [hueColor, setColor, updateIsPresetColor]);
+  const handleStartDrag = (0, _react.useCallback)(() => {
+    if (typeof updateShouldGetCoordinates === 'function') {
+      updateShouldGetCoordinates(false);
+    }
+    canDrag.current = true;
+  }, [updateShouldGetCoordinates]);
+  (0, _react.useEffect)(() => {
+    if (selectedColor && shouldGetCoordinatesRef.current) {
+      const cords = (0, _color.getCoordinatesFromColor)({
+        color: selectedColor,
+        canvas: canvasRef,
+        tolerance: 10
+      });
+      if (cords) {
+        x.set(cords.x);
+        y.set(cords.y);
+      }
+    }
+  }, [selectedColor, x, y]);
+  const handleDrag = (0, _react.useCallback)(() => {
+    setColor();
+  }, [setColor]);
+  const handleClick = (0, _react.useCallback)(event => {
+    if (typeof updateShouldGetCoordinates === 'function') {
+      updateShouldGetCoordinates(false);
+    }
+    const {
+      left,
+      top
+    } = event.target.getBoundingClientRect();
+    x.set(event.clientX - left - 10);
+    y.set(event.clientY - top - 10);
+    setColor();
+  }, [setColor, updateShouldGetCoordinates, x, y]);
+  const handlePointerUp = (0, _react.useCallback)(() => {
+    canDrag.current = false;
+    if (typeof updateShouldGetCoordinates === 'function') {
+      updateShouldGetCoordinates(true);
+    }
+    if (typeof updateShouldCallOnSelect === 'function') {
+      updateShouldCallOnSelect(true);
+    }
+  }, [updateShouldCallOnSelect, updateShouldGetCoordinates]);
+  const handleMouseMove = (0, _react.useCallback)(event => {
+    if (canDrag.current && pseudoRef.current) {
+      const {
+        left,
+        top
+      } = pseudoRef.current.getBoundingClientRect();
+      let xCords = event.clientX - left - 10;
+      let yCords = event.clientY - top - 10;
+      switch (true) {
+        case xCords > 300:
+          xCords = 300;
+          break;
+        case xCords < 0:
+          xCords = 0;
+          break;
+        default:
+          break;
+      }
+      switch (true) {
+        case yCords > 150:
+          yCords = 150;
+          break;
+        case yCords < 0:
+          yCords = 0;
+          break;
+        default:
+          break;
+      }
+      x.set(xCords);
+      y.set(yCords);
+      setColor();
+    }
+  }, [setColor, x, y]);
+  (0, _react.useEffect)(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('pointerup', handlePointerUp);
+    return () => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, [handleMouseMove, handlePointerUp]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ColorArea.StyledColorArea, null, /*#__PURE__*/_react.default.createElement(_ColorArea.StyledColorAreaCanvas, {
+    ref: canvasRef
+  }), /*#__PURE__*/_react.default.createElement(_ColorArea.StyledColorAreaPseudo, {
+    ref: pseudoRef,
+    onPointerDown: handleStartDrag,
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_ColorArea.StyledMotionColorAreaPointer, {
+    drag: true,
+    dragConstraints: pseudoRef,
+    style: {
+      x,
+      y
+    },
+    dragElastic: false,
+    dragMomentum: false,
+    dragControls: dragControls,
+    onDrag: handleDrag
+  }))), [dragControls, handleClick, handleDrag, handleStartDrag, x, y]);
+};
+ColorArea.displayName = 'ColorArea';
+var _default = exports.default = ColorArea;
+//# sourceMappingURL=ColorArea.js.map

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

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