@dreamcommerce/aurora 2.16.2 → 2.16.4

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-hex.js

@@ -0,0 +1,59 @@
+import React, { useContext, useState, useEffect } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import '@dreamcommerce/utilities';
+import Input from '../../../controls/components/input.js';
+import { ColorPickerNewContext } from '../../context.js';
+import { isHexChar } from '../../utilities.js';
+
+var ColorPickerInputsHex = function ColorPickerInputsHex() {
+  var _useContext = useContext(ColorPickerNewContext),
+      setColor = _useContext.setColor,
+      hex = _useContext.hex,
+      handleOnChangeAlpha = _useContext.handleOnChangeAlpha,
+      alphaValue = _useContext.alphaValue;
+
+  var _useState = useState(hex),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      disable = _useState4[0],
+      setDisable = _useState4[1];
+
+  var handleOnChange = function handleOnChange(event) {
+    var inputValue = event.target.value.replace('%', '');
+
+    if (isHexChar(inputValue)) {
+      setValue(inputValue);
+      setColor(inputValue);
+    }
+  };
+
+  var hexFocus = function hexFocus() {
+    setDisable(true);
+  };
+
+  var hexBlur = function hexBlur() {
+    setDisable(false);
+  };
+
+  useEffect(function () {
+    if (!disable) {
+      setValue(hex);
+    }
+  }, [hex, disable]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
+    padding: "small",
+    type: "text",
+    maxLength: 8,
+    value: value.toUpperCase(),
+    onChange: handleOnChange,
+    onBlur: hexBlur,
+    onFocus: hexFocus
+  }));
+};
+
+export { ColorPickerInputsHex };
+//# sourceMappingURL=color-picker-inputs-hex.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-hex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-rgba.d.ts

@@ -0,0 +1 @@
+export declare const ColorPickerInputsRgba: () => JSX.Element;

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-rgba.js

@@ -0,0 +1,43 @@
+import React, { useContext } from 'react';
+import { InputUtils } from '@dreamcommerce/utilities';
+import Input from '../../../controls/components/input.js';
+import { ColorPickerNewContext } from '../../context.js';
+
+var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
+  var _useContext = useContext(ColorPickerNewContext),
+      setR = _useContext.setR,
+      setG = _useContext.setG,
+      setB = _useContext.setB,
+      handleOnChangeAlpha = _useContext.handleOnChangeAlpha,
+      alphaValue = _useContext.alphaValue,
+      rgbaArr = _useContext.rgbaArr;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
+    padding: "small",
+    type: "text",
+    value: rgbaArr[0],
+    onChange: function onChange(e) {
+      return setR(Number(e.target.value));
+    },
+    onKeyPress: InputUtils.preventTypingLetters
+  }), /*#__PURE__*/React.createElement(Input, {
+    padding: "small",
+    type: "text",
+    value: rgbaArr[1],
+    onChange: function onChange(e) {
+      return setG(Number(e.target.value));
+    },
+    onKeyPress: InputUtils.preventTypingLetters
+  }), /*#__PURE__*/React.createElement(Input, {
+    padding: "small",
+    type: "text",
+    value: rgbaArr[2],
+    onChange: function onChange(e) {
+      return setB(Number(e.target.value));
+    },
+    onKeyPress: InputUtils.preventTypingLetters
+  }));
+};
+
+export { ColorPickerInputsRgba };
+//# sourceMappingURL=color-picker-inputs-rgba.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-rgba.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs.d.ts

@@ -0,0 +1 @@
+export declare const ColorPickerInputs: () => JSX.Element;

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs.js

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { COLOR_PICKER_TYPES } from '../../constants.js';
+import { cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer } from '../../css_classes.js';
+import styles from '../../../../css/color_picker_new/main.module.less.js';
+import { ColorPickerInputsHex } from './color-picker-inputs-hex.js';
+import { ColorPickerInputsRgba } from './color-picker-inputs-rgba.js';
+
+var ColorPickerInputs = function ColorPickerInputs() {
+  var _useState = useState(COLOR_PICKER_TYPES.HEX),
+      _useState2 = _slicedToArray(_useState, 2),
+      type = _useState2[0],
+      setType = _useState2[1];
+
+  var handleSelectType = function handleSelectType(e) {
+    setType(e.target.value);
+  };
+
+  var inputs = function inputs() {
+    switch (type) {
+      case COLOR_PICKER_TYPES.HEX:
+        return /*#__PURE__*/React.createElement(ColorPickerInputsHex, null);
+
+      case COLOR_PICKER_TYPES.RGB:
+        return /*#__PURE__*/React.createElement(ColorPickerInputsRgba, null);
+
+      default:
+        return false;
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerInputs])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerInputsType])
+  }, /*#__PURE__*/React.createElement("select", {
+    value: type,
+    onChange: handleSelectType
+  }, /*#__PURE__*/React.createElement("option", {
+    value: COLOR_PICKER_TYPES.HEX
+  }, COLOR_PICKER_TYPES.HEX), /*#__PURE__*/React.createElement("option", {
+    value: COLOR_PICKER_TYPES.RGB
+  }, COLOR_PICKER_TYPES.RGB))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerInputsValue])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerInputsValueContainer])
+  }, inputs())));
+};
+
+export { ColorPickerInputs };
+//# sourceMappingURL=color-picker-inputs.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.d.ts

@@ -0,0 +1,10 @@
+import { ColorPickerColorTypes, ColorPickerColors } from '../types';
+import { COLOR_PICKER_SWATCH_SIZES } from '../constants';
+import React from 'react';
+interface IColorPickerSwatchProps {
+    color: ColorPickerColors;
+    size?: typeof COLOR_PICKER_SWATCH_SIZES[keyof typeof COLOR_PICKER_SWATCH_SIZES];
+    onClick?: (color: ColorPickerColorTypes['hex']) => void;
+}
+export declare const ColorPickerSwatch: React.FC<IColorPickerSwatchProps>;
+export {};

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import classnames from 'classnames';
+import { COLOR_PICKER_SWATCH_SIZES } from '../constants.js';
+import { cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchSmall, cssColorPickerSwatchFill } from '../css_classes.js';
+import { getTinyColorInstance, getHexValueString } from '../utilities.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+
+var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
+  var color = _ref.color,
+      size = _ref.size,
+      onClick = _ref.onClick;
+  var colorTiny = getTinyColorInstance(color);
+  var colorHex = getHexValueString(colorTiny);
+  var colorHolderClassNames = classnames(styles[cssColorPickerSwatch], _defineProperty(_defineProperty({}, styles[cssColorPickerSwatchSmall], size === COLOR_PICKER_SWATCH_SIZES.SMALL), styles[cssColorPickerSwatchBig], size === COLOR_PICKER_SWATCH_SIZES.BIG));
+
+  var handleOnClick = function handleOnClick() {
+    onClick === null || onClick === void 0 || onClick(colorHex);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: colorHolderClassNames,
+    onClick: handleOnClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerSwatchFill],
+    style: {
+      backgroundColor: "".concat(colorHex)
+    }
+  }));
+};
+
+export { ColorPickerSwatch };
+//# sourceMappingURL=color-picker-swatch.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.d.ts

@@ -0,0 +1 @@
+export declare const ColorPickerSwatches: () => JSX.Element;

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js

@@ -0,0 +1,92 @@
+import React, { useContext } from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { ColorPickerNewContext } from '../context.js';
+import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesContent } from '../css_classes.js';
+import { getTinyColorInstance, getHexValue } from '../utilities.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+import { ColorPickerSwatch } from './color-picker-swatch.js';
+
+var ColorPickerSwatches = function ColorPickerSwatches() {
+  var _useContext = useContext(ColorPickerNewContext),
+      hslArr = _useContext.hslArr,
+      handlePickSwatch = _useContext.handlePickSwatch;
+
+  var _useTranslation = useTranslation(),
+      _useTranslation2 = _slicedToArray(_useTranslation, 1),
+      t = _useTranslation2[0];
+
+  var _hslArr = _slicedToArray(hslArr, 2),
+      h = _hslArr[0],
+      s = _hslArr[1];
+
+  var shades = [{
+    h: h,
+    s: s,
+    l: 95
+  }, {
+    h: h,
+    s: s,
+    l: 90
+  }, {
+    h: h,
+    s: s,
+    l: 80
+  }, {
+    h: h,
+    s: s,
+    l: 70
+  }, {
+    h: h,
+    s: s,
+    l: 60
+  }, {
+    h: h,
+    s: s,
+    l: 50
+  }, {
+    h: h,
+    s: s,
+    l: 40
+  }, {
+    h: h,
+    s: s,
+    l: 30
+  }, {
+    h: h,
+    s: s,
+    l: 20
+  }, {
+    h: h,
+    s: s,
+    l: 10
+  }, {
+    h: h,
+    s: s,
+    l: 5
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerSwatches]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerSwatchesHeader]
+  }, /*#__PURE__*/React.createElement("p", null, t('Shades of color'))), /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerSwatchesContent]
+  }, shades.map(function (shade, index) {
+    var colorTiny = getTinyColorInstance(shade);
+    var colorHex = getHexValue(colorTiny);
+
+    var handleOnClick = function handleOnClick() {
+      handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
+    };
+
+    return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+      size: "small",
+      onClick: handleOnClick,
+      key: "".concat(shade, "-").concat(index),
+      color: colorHex
+    });
+  })));
+};
+
+export { ColorPickerSwatches };
+//# sourceMappingURL=color-picker-swatches.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;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;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;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.d.ts

@@ -0,0 +1,4 @@
+import { IColorPickerNewPureProps } from '../types';
+import React from 'react';
+declare const ColorPickerNewPure: React.FC<IColorPickerNewPureProps>;
+export default ColorPickerNewPure;

package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js

@@ -0,0 +1,56 @@
+import React, { useContext } from 'react';
+import { ColorPickerNewContext } from '../context.js';
+import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../constants.js';
+import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorSwatchContainer, cssColorPickerContainer, cssColorPickerRbgcp } from '../css_classes.js';
+import { ColorLabelInput } from './color-label-input.js';
+import { ColorPicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+import { ColorPickerFooter } from './color-picker-footer.js';
+import { ColorPickerHeader } from './color-picker-header.js';
+import { ColorPickerInputs } from './color-picker-inputs/color-picker-inputs.js';
+import { ColorPickerSwatch } from './color-picker-swatch.js';
+import { ColorPickerSwatches } from './color-picker-swatches.js';
+import Dropdown from '../../dropdown/index.js';
+
+var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
+  var id = _ref.id,
+      name = _ref.name;
+
+  var _useContext = useContext(ColorPickerNewContext),
+      color = _useContext.color,
+      setColor = _useContext.setColor,
+      handleCancel = _useContext.handleCancel;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPicker])
+  }, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.CustomLabel, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerInputContainer])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerInputColorSwatchContainer])
+  }, /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+    color: color
+  })), /*#__PURE__*/React.createElement(ColorLabelInput, {
+    id: id,
+    name: name
+  }))), /*#__PURE__*/React.createElement(Dropdown.Content, {
+    onClickOutside: handleCancel
+  }, /*#__PURE__*/React.createElement(ColorPickerHeader, null), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerContainer])
+  }, /*#__PURE__*/React.createElement(ColorPicker, {
+    value: color,
+    onChange: setColor,
+    width: COLOR_PICKER_WIDTH,
+    height: COLOR_PICKER_HEIGHT,
+    hideColorTypeBtns: true,
+    hideColorGuide: true,
+    hideAdvancedSliders: true,
+    hideInputType: true,
+    hideInputs: true,
+    hidePresets: true,
+    hideOpacity: true,
+    className: "".concat(styles[cssColorPickerRbgcp])
+  }), /*#__PURE__*/React.createElement(ColorPickerInputs, null), /*#__PURE__*/React.createElement(ColorPickerSwatches, null)), /*#__PURE__*/React.createElement(ColorPickerFooter, null))));
+};
+
+export default ColorPickerNewPure;
+//# sourceMappingURL=pure-color-picker.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,4BAA4B,0FAA8F;AAC1H;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;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/color_picker_new/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const COLOR_PICKER_INITIAL_STATE = "#000000";
+export declare const COLOR_PICKER_WIDTH = 220;
+export declare const COLOR_PICKER_HEIGHT = 200;
+export declare const COLOR_PICKER_ALPHA_MAX_VALUE = 100;
+export declare const COLOR_PICKER_TYPES: {
+    readonly HEX: "hex";
+    readonly RGB: "rgb";
+};
+export declare const COLOR_PICKER_SWATCH_SIZES: {
+    readonly SMALL: "small";
+    readonly BIG: "big";
+};

package/build/esm/packages/aurora/src/components/color_picker_new/constants.js

@@ -0,0 +1,15 @@
+var COLOR_PICKER_INITIAL_STATE = '#000000';
+var COLOR_PICKER_WIDTH = 220;
+var COLOR_PICKER_HEIGHT = 200;
+var COLOR_PICKER_ALPHA_MAX_VALUE = 100;
+var COLOR_PICKER_TYPES = {
+  HEX: 'hex',
+  RGB: 'rgb'
+};
+var COLOR_PICKER_SWATCH_SIZES = {
+  SMALL: 'small',
+  BIG: 'big'
+};
+
+export { COLOR_PICKER_ALPHA_MAX_VALUE, COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_SWATCH_SIZES, COLOR_PICKER_TYPES, COLOR_PICKER_WIDTH };
+//# sourceMappingURL=constants.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/color_picker_new/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IColorPickerNewContextProps } from './types';
+export declare const ColorPickerNewContext: import("react").Context<IColorPickerNewContextProps>;

package/build/esm/packages/aurora/src/components/color_picker_new/context.js

@@ -0,0 +1,20 @@
+import { createContext } from 'react';
+
+var ColorPickerNewContext = /*#__PURE__*/createContext({
+  color: '',
+  setColor: function setColor() {},
+  hex: '',
+  hslArr: [],
+  handleOnChangeAlpha: function handleOnChangeAlpha() {},
+  alphaValue: '',
+  rgbaArr: [],
+  setR: function setR() {},
+  setG: function setG() {},
+  setB: function setB() {},
+  handleCancel: function handleCancel() {},
+  handleSave: function handleSave() {},
+  handlePickSwatch: function handlePickSwatch() {}
+});
+
+export { ColorPickerNewContext };
+//# sourceMappingURL=context.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/color_picker_new/css_classes.d.ts

@@ -0,0 +1,19 @@
+export declare const cssColorPicker = "color-picker";
+export declare const cssColorPickerContainer = "color-picker__container";
+export declare const cssColorPickerRbgcp = "color-picker__rbgcp";
+export declare const cssColorPickerHeader = "color-picker__header";
+export declare const cssColorPickerCloseIcon = "color-picker__close-icon";
+export declare const cssColorPickerSwatches = "color-picker__swatches";
+export declare const cssColorPickerSwatchesHeader = "color-picker__swatches-header";
+export declare const cssColorPickerSwatchesContent = "color-picker__swatches-content";
+export declare const cssColorPickerSwatch = "color-picker__swatch";
+export declare const cssColorPickerSwatchSmall = "color-picker__swatch_small";
+export declare const cssColorPickerSwatchBig = "color-picker__swatch_big";
+export declare const cssColorPickerSwatchFill = "color-picker__swatch-fill";
+export declare const cssColorPickerInputColorSwatchContainer = "color-picker__input-color-swatch-container";
+export declare const cssColorPickerInputContainer = "color-picker__input-container";
+export declare const cssColorPickerInputs = "color-picker__inputs";
+export declare const cssColorPickerInputsType = "color-picker__inputs-type";
+export declare const cssColorPickerInputsValue = "color-picker__inputs-value";
+export declare const cssColorPickerInputsValueContainer = "color-picker__inputs-value-container";
+export declare const cssColorPickerFooter = "color-picker__footer";

package/build/esm/packages/aurora/src/components/color_picker_new/css_classes.js

@@ -0,0 +1,22 @@
+var cssColorPicker = 'color-picker';
+var cssColorPickerContainer = 'color-picker__container';
+var cssColorPickerRbgcp = 'color-picker__rbgcp';
+var cssColorPickerHeader = 'color-picker__header';
+var cssColorPickerCloseIcon = 'color-picker__close-icon';
+var cssColorPickerSwatches = 'color-picker__swatches';
+var cssColorPickerSwatchesHeader = 'color-picker__swatches-header';
+var cssColorPickerSwatchesContent = 'color-picker__swatches-content';
+var cssColorPickerSwatch = 'color-picker__swatch';
+var cssColorPickerSwatchSmall = 'color-picker__swatch_small';
+var cssColorPickerSwatchBig = 'color-picker__swatch_big';
+var cssColorPickerSwatchFill = 'color-picker__swatch-fill';
+var cssColorPickerInputColorSwatchContainer = 'color-picker__input-color-swatch-container';
+var cssColorPickerInputContainer = 'color-picker__input-container';
+var cssColorPickerInputs = 'color-picker__inputs';
+var cssColorPickerInputsType = 'color-picker__inputs-type';
+var cssColorPickerInputsValue = 'color-picker__inputs-value';
+var cssColorPickerInputsValueContainer = 'color-picker__inputs-value-container';
+var cssColorPickerFooter = 'color-picker__footer';
+
+export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerFooter, cssColorPickerHeader, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerRbgcp, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader };
+//# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/css_classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { ColorPickerColorTypes, IColorPickerColor } from '../types';
+export declare type ColorPickerHookProps = {
+    initialColor?: ColorPickerColorTypes['hex'];
+    onChange?: (color: IColorPickerColor) => void;
+    onCancel?: () => void;
+    onSave?: (color: IColorPickerColor) => void;
+};
+declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
+    color: string;
+    setColor: import("react").Dispatch<import("react").SetStateAction<string>>;
+    hex: string;
+    hslArr: number[];
+    handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    alphaValue: string;
+    rgbaArr: number[];
+    setR: (newR: number) => void;
+    setG: (newG: number) => void;
+    setB: (newB: number) => void;
+    handleCancel: () => void;
+    handleSave: () => void;
+    handlePickSwatch: (color: ColorPickerColorTypes['hex']) => void;
+};
+export default useColorPicker;

package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js

@@ -0,0 +1,94 @@
+import { useState, useEffect } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_ALPHA_MAX_VALUE } from '../constants.js';
+import { useColorPicker as useColorPicker$1 } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js';
+import { getTinyColorInstance, getHexValue, getAllColorTypes } from '../utilities.js';
+
+var useColorPicker = function useColorPicker(_ref) {
+  var initialColor = _ref.initialColor,
+      onChange = _ref.onChange,
+      onCancel = _ref.onCancel,
+      onSave = _ref.onSave;
+
+  var _useState = useState(initialColor ? initialColor : COLOR_PICKER_INITIAL_STATE),
+      _useState2 = _slicedToArray(_useState, 2),
+      color = _useState2[0],
+      setColor = _useState2[1];
+
+  var _useState3 = useState(color),
+      _useState4 = _slicedToArray(_useState3, 2),
+      choosenColor = _useState4[0],
+      setChoosenColor = _useState4[1];
+
+  var _useBestGradientColor = useColorPicker$1(color, setColor),
+      hslArr = _useBestGradientColor.hslArr,
+      rgbaArr = _useBestGradientColor.rgbaArr,
+      setR = _useBestGradientColor.setR,
+      setG = _useBestGradientColor.setG,
+      setB = _useBestGradientColor.setB,
+      setA = _useBestGradientColor.setA;
+
+  var tinyColor = getTinyColorInstance(color);
+  var hex = getHexValue(tinyColor);
+
+  var _useState5 = useState(rgbaArr[3] * 100),
+      _useState6 = _slicedToArray(_useState5, 2),
+      alpha = _useState6[0],
+      setAlpha = _useState6[1];
+
+  var _useState7 = useState("".concat(alpha)),
+      _useState8 = _slicedToArray(_useState7, 2),
+      alphaValue = _useState8[0],
+      setAlphaValue = _useState8[1];
+
+  var handleOnChangeAlpha = function handleOnChangeAlpha(event) {
+    changeAlphaValue(Number(event.target.value));
+  };
+
+  var changeAlphaValue = function changeAlphaValue(value) {
+    setAlpha(value > COLOR_PICKER_ALPHA_MAX_VALUE ? COLOR_PICKER_ALPHA_MAX_VALUE : value);
+  };
+
+  useEffect(function () {
+    setA(alpha);
+  }, [alpha]);
+  useEffect(function () {
+    setAlphaValue("".concat(Math.round(rgbaArr[3] * 100)));
+  }, [rgbaArr[3]]);
+  useEffect(function () {
+    onChange === null || onChange === void 0 || onChange(getAllColorTypes(color));
+  }, [color]);
+
+  var handleCancel = function handleCancel() {
+    setColor(choosenColor);
+    onCancel === null || onCancel === void 0 || onCancel();
+  };
+
+  var handleSave = function handleSave() {
+    setChoosenColor(color);
+    onSave === null || onSave === void 0 || onSave(getAllColorTypes(color));
+  };
+
+  var handlePickSwatch = function handlePickSwatch(color) {
+    setColor(color);
+  };
+
+  return {
+    color: color,
+    setColor: setColor,
+    hex: hex,
+    hslArr: hslArr,
+    handleOnChangeAlpha: handleOnChangeAlpha,
+    alphaValue: alphaValue,
+    rgbaArr: rgbaArr,
+    setR: setR,
+    setG: setG,
+    setB: setB,
+    handleCancel: handleCancel,
+    handleSave: handleSave,
+    handlePickSwatch: handlePickSwatch
+  };
+};
+
+export default useColorPicker;
+//# sourceMappingURL=use_color_picker.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,mDAAmD,8FAAkG;AACrJ;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;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;"}

package/build/esm/packages/aurora/src/components/color_picker_new/index.d.ts

@@ -0,0 +1,3 @@
+import { IColorPickerNewProps } from './types';
+declare const ColorPickerNewWithContext: ({ id, name, initialColor, onChange, onCancel, onSave }: IColorPickerNewProps) => JSX.Element;
+export default ColorPickerNewWithContext;