@dreamcommerce/aurora 3.0.0-316 → 3.0.0-318

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/build/cjs/packages/aurora/src/components/color_picker/color_picker.js +5 -1
  2. package/build/cjs/packages/aurora/src/components/color_picker/color_picker.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/color_picker/color_picker_utils.js +3 -0
  4. package/build/cjs/packages/aurora/src/components/color_picker/color_picker_utils.js.map +1 -1
  5. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_content.js +2 -14
  6. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_content.js.map +1 -1
  7. package/build/cjs/packages/aurora/src/components/color_picker/components/{color_label_input.js → color_picker_input.js} +15 -10
  8. package/build/cjs/packages/aurora/src/components/color_picker/components/{color_label_input.js.map → color_picker_input.js.map} +1 -1
  9. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs.js +1 -1
  10. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex.js +20 -0
  11. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex.js.map +1 -0
  12. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js +33 -0
  13. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js.map +1 -0
  14. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js +93 -0
  15. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/{color_picker_inputs_hex.js.map → color_picker_inputs_hex/color_picker_inputs_hex_input.js.map} +1 -1
  16. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +3 -3
  17. package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js +17 -3
  18. package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
  19. package/build/cjs/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js +6 -0
  20. package/build/cjs/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map +1 -1
  21. package/build/cjs/packages/aurora/src/components/input/input.js +5 -2
  22. package/build/cjs/packages/aurora/src/components/input/input.js.map +1 -1
  23. package/build/cjs/packages/aurora/src/components/tooltip/components/tooltip_content.js +1 -1
  24. package/build/esm/packages/aurora/src/components/color_picker/color_picker.js +5 -1
  25. package/build/esm/packages/aurora/src/components/color_picker/color_picker.js.map +1 -1
  26. package/build/esm/packages/aurora/src/components/color_picker/color_picker_types.d.ts +2 -0
  27. package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.d.ts +1 -0
  28. package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js +3 -0
  29. package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js.map +1 -1
  30. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js +3 -15
  31. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js.map +1 -1
  32. package/build/esm/packages/aurora/src/components/color_picker/components/{color_label_input.js → color_picker_input.js} +15 -10
  33. package/build/esm/packages/aurora/src/components/color_picker/components/{color_label_input.js.map → color_picker_input.js.map} +1 -1
  34. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs.js +1 -1
  35. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex.js +12 -0
  36. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex.js.map +1 -0
  37. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.d.ts +2 -0
  38. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js +25 -0
  39. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js.map +1 -0
  40. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.d.ts +3 -0
  41. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js +85 -0
  42. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/{color_picker_inputs_hex.js.map → color_picker_inputs_hex/color_picker_inputs_hex_input.js.map} +1 -1
  43. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +3 -3
  44. package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js +16 -2
  45. package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
  46. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.d.ts +2 -0
  47. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js +6 -0
  48. package/build/esm/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js.map +1 -1
  49. package/build/esm/packages/aurora/src/components/input/input.js +5 -2
  50. package/build/esm/packages/aurora/src/components/input/input.js.map +1 -1
  51. package/build/esm/packages/aurora/src/components/input/input_types.d.ts +1 -0
  52. package/build/esm/packages/aurora/src/components/tooltip/components/tooltip_content.js +1 -1
  53. package/package.json +1 -1
  54. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js +0 -87
  55. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex.js +0 -79
  56. /package/build/esm/packages/aurora/src/components/color_picker/components/{color_label_input.d.ts → color_picker_input.d.ts} +0 -0
  57. /package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/{color_picker_inputs_hex.d.ts → color_picker_inputs_hex/color_picker_inputs_hex.d.ts} +0 -0
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,+BAA+B,qFAAyF;AACxH,iCAAiC,iFAAqF;AACtH,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
2
  import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
3
3
  import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
4
- import { Input } from '../../input/input.js';
5
4
  import { GRADIENT_TYPES } from '../color_picker_constants.js';
6
5
  import { useColorPicker } from '../hooks/use_color_picker.js';
7
6
  import { ColorPickerUtils } from '../color_picker_utils.js';
7
+ import { ColorPickerInputsHexInput } from './color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js';
8
8
 
9
9
  var ColorPickerInput = function ColorPickerInput(_ref) {
10
10
  var id = _ref.id,
@@ -13,8 +13,8 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
13
13
  disabled = _ref.disabled,
14
14
  preElement = _ref.preElement;
15
15
  var _useColorPicker = useColorPicker(),
16
- hex = _useColorPicker.hex,
17
16
  color = _useColorPicker.color,
17
+ typedInputValue = _useColorPicker.typedInputValue,
18
18
  isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
19
19
  gradientType = _useColorPicker.gradientType,
20
20
  colorVariables = _useColorPicker.colorVariables,
@@ -22,21 +22,26 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
22
22
  var _useTranslation = useTranslation(),
23
23
  _useTranslation2 = _slicedToArray(_useTranslation, 1),
24
24
  t = _useTranslation2[0];
25
+ var typedInputValueHasFullHexLength = typedInputValue.length >= 6;
25
26
  var variableName = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && ColorPickerUtils.findVariable(colorVariables.variables, color) || shadeName || '';
26
- var colorName = variableName ? "".concat(t(variableName)) : "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase());
27
- if (isCurrentValueGradient) colorName = gradientType === GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
28
- return /*#__PURE__*/React.createElement(Input, {
29
- className: "aurora-cursor-pointer",
30
- preElement: preElement,
31
- type: "text",
27
+ var colorName = undefined;
28
+ if (isCurrentValueGradient) {
29
+ colorName = gradientType === GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
30
+ } else if (variableName && typedInputValueHasFullHexLength) {
31
+ colorName = "".concat(t(variableName));
32
+ }
33
+ return /*#__PURE__*/React.createElement(ColorPickerInputsHexInput, {
32
34
  id: id,
33
35
  name: name,
34
36
  value: colorName,
35
37
  errors: errors,
36
38
  disabled: disabled,
37
- readOnly: true
39
+ className: "aurora-cursor-pointer ".concat(colorName ? 'aurora-cursor-pointer' : ''),
40
+ preElement: preElement,
41
+ readOnly: !!colorName,
42
+ hasCursorPointer: !!colorName
38
43
  });
39
44
  };
40
45
 
41
46
  export { ColorPickerInput };
42
- //# sourceMappingURL=color_label_input.js.map
47
+ //# sourceMappingURL=color_picker_input.js.map
@@ -1 +1 @@
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;"}
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;"}
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
2
2
  import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
3
  import { Stack } from '../../../stack/stack.js';
4
4
  import { COLOR_PICKER_TYPES } from '../../color_picker_constants.js';
5
- import { ColorPickerInputsHex } from './color_picker_inputs_hex.js';
5
+ import { ColorPickerInputsHex } from './color_picker_inputs_hex/color_picker_inputs_hex.js';
6
6
  import { ColorPickerInputsRgba } from './color_picker_inputs_rgba.js';
7
7
  import { CurrentColorPreview } from '../current_color_preview.js';
8
8
 
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { ColorPickerInputsHexInput } from './color_picker_inputs_hex_input.js';
3
+ import { ColorPickerInputsHexAlpha } from './color_picker_inputs_hex_alpha.js';
4
+
5
+ var ColorPickerInputsHex = function ColorPickerInputsHex() {
6
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerInputsHexInput, {
7
+ className: "aurora-h-full aurora-text-xs"
8
+ }), /*#__PURE__*/React.createElement(ColorPickerInputsHexAlpha, null));
9
+ };
10
+
11
+ export { ColorPickerInputsHex };
12
+ //# sourceMappingURL=color_picker_inputs_hex.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare const ColorPickerInputsHexAlpha: () => React.JSX.Element;
@@ -0,0 +1,25 @@
1
+ import React from 'react';
2
+ import { useColorPicker } from '../../../hooks/use_color_picker.js';
3
+ import { ColorPickerUtils } from '../../../color_picker_utils.js';
4
+
5
+ var ColorPickerInputsHexAlpha = function ColorPickerInputsHexAlpha() {
6
+ var _useColorPicker = useColorPicker(),
7
+ handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
8
+ alpha = _useColorPicker.alpha;
9
+ return /*#__PURE__*/React.createElement("div", {
10
+ className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
11
+ }, /*#__PURE__*/React.createElement("input", {
12
+ className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
13
+ type: "text",
14
+ value: Math.round(alpha),
15
+ onChange: function onChange(e) {
16
+ return handleOnChangeAlpha(Number(e.target.value));
17
+ },
18
+ onKeyDown: ColorPickerUtils.preventTypingLetters
19
+ }), /*#__PURE__*/React.createElement("div", {
20
+ className: "aurora-text-xs aurora-pl-0.5"
21
+ }, "%"));
22
+ };
23
+
24
+ export { ColorPickerInputsHexAlpha };
25
+ //# sourceMappingURL=color_picker_inputs_hex_alpha.js.map
@@ -0,0 +1 @@
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;"}
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { TInputProps } from "../../../../input/input_types";
3
+ export declare const ColorPickerInputsHexInput: ({ id, name, value: initialValue, type, errors, disabled, className, preElement, readOnly, hasCursorPointer }: TInputProps) => React.JSX.Element;
@@ -0,0 +1,85 @@
1
+ import React, { useState, useRef, useEffect } from 'react';
2
+ import { slicedToArray as _slicedToArray } from '../../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
+ import { Input } from '../../../../input/input.js';
4
+ import { useColorPicker } from '../../../hooks/use_color_picker.js';
5
+ import tinycolor from '../../../../../../../../external/tinycolor2/esm/tinycolor.js';
6
+ import { usePicker } from '../../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
7
+ import { ColorPickerUtils } from '../../../color_picker_utils.js';
8
+
9
+ var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
10
+ var id = _ref.id,
11
+ name = _ref.name,
12
+ initialValue = _ref.value,
13
+ _ref$type = _ref.type,
14
+ type = _ref$type === void 0 ? 'text' : _ref$type,
15
+ errors = _ref.errors,
16
+ disabled = _ref.disabled,
17
+ className = _ref.className,
18
+ preElement = _ref.preElement,
19
+ readOnly = _ref.readOnly,
20
+ hasCursorPointer = _ref.hasCursorPointer;
21
+ var _useColorPicker = useColorPicker(),
22
+ setColor = _useColorPicker.setColor,
23
+ setTypedInputValue = _useColorPicker.setTypedInputValue,
24
+ hex = _useColorPicker.hex,
25
+ isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
26
+ gradientType = _useColorPicker.gradientType;
27
+ var _useState = useState(hex),
28
+ _useState2 = _slicedToArray(_useState, 2),
29
+ value = _useState2[0],
30
+ setValue = _useState2[1];
31
+ var valueRef = useRef(value);
32
+ var _useState3 = useState(false),
33
+ _useState4 = _slicedToArray(_useState3, 2),
34
+ isDisabled = _useState4[0],
35
+ setIsDisabled = _useState4[1];
36
+ var _usePicker = usePicker(),
37
+ colors = _usePicker.colors,
38
+ selectedColor = _usePicker.selectedColor,
39
+ createGradientStr = _usePicker.createGradientStr;
40
+ var handleOnChange = function handleOnChange(event) {
41
+ var inputValue = event.target.value.replace('%', '');
42
+ setTypedInputValue(inputValue);
43
+ setValue(inputValue);
44
+ valueRef.current = inputValue;
45
+ if (!tinycolor(inputValue).isValid()) return;
46
+ if (isCurrentValueGradient && gradientType) {
47
+ var newColors = ColorPickerUtils.updateGradientWithActiveColor(colors, selectedColor, inputValue);
48
+ createGradientStr(newColors);
49
+ } else {
50
+ setColor(inputValue);
51
+ }
52
+ };
53
+ var hexFocus = function hexFocus() {
54
+ setIsDisabled(true);
55
+ };
56
+ var hexBlur = function hexBlur() {
57
+ setIsDisabled(false);
58
+ };
59
+ useEffect(function () {
60
+ if (hex === valueRef.current) return;
61
+ if (!isDisabled) {
62
+ setValue(hex);
63
+ valueRef.current = hex;
64
+ }
65
+ }, [hex, isDisabled]);
66
+ return /*#__PURE__*/React.createElement(Input, {
67
+ className: className,
68
+ type: type,
69
+ preElement: preElement,
70
+ id: id,
71
+ name: name,
72
+ errors: errors,
73
+ disabled: disabled,
74
+ maxLength: 8,
75
+ value: initialValue || value.toUpperCase(),
76
+ onChange: handleOnChange,
77
+ onBlur: hexBlur,
78
+ onFocus: hexFocus,
79
+ readOnly: readOnly,
80
+ hasCursorPointer: hasCursorPointer
81
+ });
82
+ };
83
+
84
+ export { ColorPickerInputsHexInput };
85
+ //# sourceMappingURL=color_picker_inputs_hex_input.js.map
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,2DAA+D;AACrF,0BAA0B,oFAAwF;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,sBAAsB,8DAAkE;AACxF,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -12,7 +12,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
12
12
  alpha = _useColorPicker.alpha,
13
13
  rgbaArr = _useColorPicker.rgbaArr;
14
14
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
15
- className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
15
+ className: "aurora-h-full aurora-text-xs",
16
16
  type: "text",
17
17
  value: rgbaArr[0],
18
18
  onChange: function onChange(e) {
@@ -20,7 +20,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
20
20
  },
21
21
  onKeyDown: ColorPickerUtils.preventTypingLetters
22
22
  }), /*#__PURE__*/React.createElement(Input, {
23
- className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
23
+ className: "aurora-h-full aurora-text-xs",
24
24
  type: "text",
25
25
  value: rgbaArr[1],
26
26
  onChange: function onChange(e) {
@@ -28,7 +28,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
28
28
  },
29
29
  onKeyDown: ColorPickerUtils.preventTypingLetters
30
30
  }), /*#__PURE__*/React.createElement(Input, {
31
- className: "aurora-h-full aurora-px-1.5 aurora-text-xs",
31
+ className: "aurora-h-full aurora-text-xs",
32
32
  type: "text",
33
33
  value: rgbaArr[2],
34
34
  onChange: function onChange(e) {
@@ -3,10 +3,14 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
3
3
  import { cn } from '../../../utilities/cn.js';
4
4
  import { Popover } from '../../popover/popover.js';
5
5
  import { PopoverTrigger } from '../../popover/components/popover_trigger.js';
6
+ import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../color_picker_constants.js';
6
7
  import { useColorPicker } from '../hooks/use_color_picker.js';
7
8
  import { ColorPickerSwatch } from './color_picker_swatch.js';
9
+ import { objectToString } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
10
+ import PickerContextWrapper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
11
+ import { getStyles } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
8
12
  import { ColorPickerContent } from './color_picker_content.js';
9
- import { ColorPickerInput } from './color_label_input.js';
13
+ import { ColorPickerInput } from './color_picker_input.js';
10
14
  import { PopoverContent } from '../../popover/components/popover_content.js';
11
15
 
12
16
  var _excluded = ["id", "name", "errors", "disabled", "className", "children", "triggerClassName"];
@@ -21,9 +25,12 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
21
25
  rest = _objectWithoutProperties(_ref, _excluded);
22
26
  var _useColorPicker = useColorPicker(),
23
27
  color = _useColorPicker.color,
28
+ setColor = _useColorPicker.setColor,
24
29
  isColorPickerOpened = _useColorPicker.isColorPickerOpened,
25
30
  setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened,
26
31
  handleSave = _useColorPicker.handleSave;
32
+ var safeValue = objectToString(color);
33
+ var defaultStyles = getStyles(true);
27
34
  var handleClosePopover = function handleClosePopover() {
28
35
  handleSave();
29
36
  setIsColorPickerOpened(false);
@@ -33,6 +40,13 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
33
40
  onOpenChange: function onOpenChange(value) {
34
41
  return !value && handleClosePopover();
35
42
  }
43
+ }, /*#__PURE__*/React.createElement(PickerContextWrapper, {
44
+ value: safeValue,
45
+ defaultStyles: defaultStyles,
46
+ onChange: setColor,
47
+ squareWidth: COLOR_PICKER_WIDTH,
48
+ squareHeight: COLOR_PICKER_HEIGHT,
49
+ hideOpacity: false
36
50
  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
37
51
  onClick: function onClick() {
38
52
  return setIsColorPickerOpened(true);
@@ -51,7 +65,7 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
51
65
  })
52
66
  })), children), /*#__PURE__*/React.createElement(PopoverContent, _objectSpread2({
53
67
  className: cn('aurora-rounded-16 aurora-overflow-hidden aurora-z-[99999] js__aurora-color-picker', className)
54
- }, rest), /*#__PURE__*/React.createElement(ColorPickerContent, null)));
68
+ }, rest), /*#__PURE__*/React.createElement(ColorPickerContent, null))));
55
69
  };
56
70
 
57
71
  export default ColorPickerPure;
@@ -1 +1 @@
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;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,qFAAyF;AACxH,iCAAiC,iFAAqF;AACtH,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -12,6 +12,8 @@ declare const useSetupColorPicker: ({ value, onChange, onCancel, onSave, colorVa
12
12
  color: string;
13
13
  previousSolidColor: string;
14
14
  previousGradientColor: string;
15
+ typedInputValue: string;
16
+ setTypedInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
15
17
  setColor: (newColor: string, shadeName?: string) => void;
16
18
  hex: string;
17
19
  hslArr: number[];
@@ -34,6 +34,10 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
34
34
  _useState8 = _slicedToArray(_useState7, 2),
35
35
  shadeName = _useState8[0],
36
36
  setShadeName = _useState8[1];
37
+ var _useState9 = useState(ColorPickerUtils.getHexValueWithoutHash(colorValue)),
38
+ _useState10 = _slicedToArray(_useState9, 2),
39
+ typedInputValue = _useState10[0],
40
+ setTypedInputValue = _useState10[1];
37
41
  var _getDetails = getDetails(colorValue),
38
42
  degrees = _getDetails.degrees;
39
43
  var savedDegRef = useRef(isNaN(degrees) ? 180 : degrees);
@@ -108,6 +112,8 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
108
112
  color: colorValue,
109
113
  previousSolidColor: previousSolidColor,
110
114
  previousGradientColor: previousGradientColor,
115
+ typedInputValue: typedInputValue,
116
+ setTypedInputValue: setTypedInputValue,
111
117
  setColor: setColor,
112
118
  hex: hex,
113
119
  hslArr: hslArr,
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -3,7 +3,7 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
3
3
  import { cn } from '../../utilities/cn.js';
4
4
  import { inputVariants } from './input_variants.js';
5
5
 
6
- var _excluded = ["preElement", "postElement", "errors", "className", "id", "name", "value", "defaultValue", "placeholder", "disabled", "readOnly", "type", "onChange", "onKeyDown", "onKeyUp"];
6
+ var _excluded = ["preElement", "postElement", "errors", "className", "id", "name", "value", "defaultValue", "placeholder", "disabled", "readOnly", "type", "hasCursorPointer", "onChange", "onKeyDown", "onKeyUp"];
7
7
  var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
8
8
  var preElement = _ref.preElement,
9
9
  postElement = _ref.postElement,
@@ -18,6 +18,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
18
18
  disabled = _ref.disabled,
19
19
  readOnly = _ref.readOnly,
20
20
  type = _ref.type,
21
+ hasCursorPointer = _ref.hasCursorPointer,
21
22
  onChange = _ref.onChange,
22
23
  onKeyDown = _ref.onKeyDown,
23
24
  onKeyUp = _ref.onKeyUp,
@@ -43,7 +44,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
43
44
  onKeyDown: onKeyDown,
44
45
  onKeyUp: onKeyUp,
45
46
  type: type,
46
- className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6')
47
+ className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6', {
48
+ 'aurora-cursor-pointer': hasCursorPointer
49
+ })
47
50
  })), postElement && /*#__PURE__*/React.createElement("div", {
48
51
  className: "aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
49
52
  }, postElement));
@@ -1 +1 @@
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;"}
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;"}
@@ -5,4 +5,5 @@ export interface TInputProps extends React.InputHTMLAttributes<HTMLInputElement>
5
5
  preElement?: React.ReactNode;
6
6
  postElement?: React.ReactNode;
7
7
  errors?: string | string[];
8
+ hasCursorPointer?: boolean;
8
9
  }
@@ -14,7 +14,7 @@ var TooltipContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
14
14
  return /*#__PURE__*/createElement(Portal, null, /*#__PURE__*/createElement(Content, _objectSpread2({
15
15
  ref: ref,
16
16
  sideOffset: sideOffset,
17
- className: cn('aurora-z-[1000] aurora-max-w-[320px] aurora-shadow aurora-overflow-hidden aurora-border aurora-rounded-8 aurora-px-3 aurora-py-2 aurora-text-xs aurora-animate-in aurora-fade-in-0 data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2', 'js__aurora-tooltip-content', tooltipContentVariants({
17
+ className: cn('aurora-z-[99999] aurora-max-w-[320px] aurora-shadow aurora-overflow-hidden aurora-border aurora-rounded-8 aurora-px-3 aurora-py-2 aurora-text-xs aurora-animate-in aurora-fade-in-0 data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2', 'js__aurora-tooltip-content', tooltipContentVariants({
18
18
  variant: variant
19
19
  }), className)
20
20
  }, props)));
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "3.0.0-316",
5
+ "version": "3.0.0-318",
6
6
  "description": "aurora",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",
@@ -1,87 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var React = require('react');
6
- var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
7
- var input = require('../../../input/input.js');
8
- var use_color_picker = require('../../hooks/use_color_picker.js');
9
- var tinycolor = require('../../../../../../../external/tinycolor2/esm/tinycolor.js');
10
- var context = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
11
- var color_picker_utils = require('../../color_picker_utils.js');
12
-
13
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
-
15
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
-
17
- var ColorPickerInputsHex = function ColorPickerInputsHex() {
18
- var _useColorPicker = use_color_picker.useColorPicker(),
19
- setColor = _useColorPicker.setColor,
20
- hex = _useColorPicker.hex,
21
- handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
22
- alpha = _useColorPicker.alpha,
23
- isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
24
- gradientType = _useColorPicker.gradientType;
25
- var _useState = React.useState(hex),
26
- _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
27
- value = _useState2[0],
28
- setValue = _useState2[1];
29
- var valueRef = React.useRef(value);
30
- var _useState3 = React.useState(false),
31
- _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
32
- disable = _useState4[0],
33
- setDisable = _useState4[1];
34
- var _usePicker = context.usePicker(),
35
- colors = _usePicker.colors,
36
- selectedColor = _usePicker.selectedColor,
37
- createGradientStr = _usePicker.createGradientStr;
38
- var handleOnChange = function handleOnChange(event) {
39
- var inputValue = event.target.value.replace('%', '');
40
- setValue(inputValue);
41
- valueRef.current = inputValue;
42
- if (!tinycolor['default'](inputValue).isValid()) return;
43
- if (isCurrentValueGradient && gradientType) {
44
- var newColors = color_picker_utils.ColorPickerUtils.updateGradientWithActiveColor(colors, selectedColor, inputValue);
45
- createGradientStr(newColors);
46
- } else {
47
- setColor(inputValue);
48
- }
49
- };
50
- var hexFocus = function hexFocus() {
51
- setDisable(true);
52
- };
53
- var hexBlur = function hexBlur() {
54
- setDisable(false);
55
- };
56
- React.useEffect(function () {
57
- if (hex === valueRef.current) return;
58
- if (!disable) {
59
- setValue(hex);
60
- valueRef.current = hex;
61
- }
62
- }, [hex, disable]);
63
- return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(input.Input, {
64
- className: "aurora-h-full aurora-px-2 aurora-text-xs",
65
- type: "text",
66
- maxLength: 8,
67
- value: value.toUpperCase(),
68
- onChange: handleOnChange,
69
- onBlur: hexBlur,
70
- onFocus: hexFocus
71
- }), /*#__PURE__*/React__default['default'].createElement("div", {
72
- className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
73
- }, /*#__PURE__*/React__default['default'].createElement("input", {
74
- className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
75
- type: "text",
76
- value: Math.round(alpha),
77
- onChange: function onChange(e) {
78
- return handleOnChangeAlpha(Number(e.target.value));
79
- },
80
- onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
81
- }), /*#__PURE__*/React__default['default'].createElement("div", {
82
- className: "aurora-text-xs aurora-pl-0.5"
83
- }, "%")));
84
- };
85
-
86
- exports.ColorPickerInputsHex = ColorPickerInputsHex;
87
- //# sourceMappingURL=color_picker_inputs_hex.js.map
@@ -1,79 +0,0 @@
1
- import React, { useState, useRef, useEffect } from 'react';
2
- import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
- import { Input } from '../../../input/input.js';
4
- import { useColorPicker } from '../../hooks/use_color_picker.js';
5
- import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
6
- import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
7
- import { ColorPickerUtils } from '../../color_picker_utils.js';
8
-
9
- var ColorPickerInputsHex = function ColorPickerInputsHex() {
10
- var _useColorPicker = useColorPicker(),
11
- setColor = _useColorPicker.setColor,
12
- hex = _useColorPicker.hex,
13
- handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
14
- alpha = _useColorPicker.alpha,
15
- isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
16
- gradientType = _useColorPicker.gradientType;
17
- var _useState = useState(hex),
18
- _useState2 = _slicedToArray(_useState, 2),
19
- value = _useState2[0],
20
- setValue = _useState2[1];
21
- var valueRef = useRef(value);
22
- var _useState3 = useState(false),
23
- _useState4 = _slicedToArray(_useState3, 2),
24
- disable = _useState4[0],
25
- setDisable = _useState4[1];
26
- var _usePicker = usePicker(),
27
- colors = _usePicker.colors,
28
- selectedColor = _usePicker.selectedColor,
29
- createGradientStr = _usePicker.createGradientStr;
30
- var handleOnChange = function handleOnChange(event) {
31
- var inputValue = event.target.value.replace('%', '');
32
- setValue(inputValue);
33
- valueRef.current = inputValue;
34
- if (!tinycolor(inputValue).isValid()) return;
35
- if (isCurrentValueGradient && gradientType) {
36
- var newColors = ColorPickerUtils.updateGradientWithActiveColor(colors, selectedColor, inputValue);
37
- createGradientStr(newColors);
38
- } else {
39
- setColor(inputValue);
40
- }
41
- };
42
- var hexFocus = function hexFocus() {
43
- setDisable(true);
44
- };
45
- var hexBlur = function hexBlur() {
46
- setDisable(false);
47
- };
48
- useEffect(function () {
49
- if (hex === valueRef.current) return;
50
- if (!disable) {
51
- setValue(hex);
52
- valueRef.current = hex;
53
- }
54
- }, [hex, disable]);
55
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
56
- className: "aurora-h-full aurora-px-2 aurora-text-xs",
57
- type: "text",
58
- maxLength: 8,
59
- value: value.toUpperCase(),
60
- onChange: handleOnChange,
61
- onBlur: hexBlur,
62
- onFocus: hexFocus
63
- }), /*#__PURE__*/React.createElement("div", {
64
- className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
65
- }, /*#__PURE__*/React.createElement("input", {
66
- className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
67
- type: "text",
68
- value: Math.round(alpha),
69
- onChange: function onChange(e) {
70
- return handleOnChangeAlpha(Number(e.target.value));
71
- },
72
- onKeyDown: ColorPickerUtils.preventTypingLetters
73
- }), /*#__PURE__*/React.createElement("div", {
74
- className: "aurora-text-xs aurora-pl-0.5"
75
- }, "%")));
76
- };
77
-
78
- export { ColorPickerInputsHex };
79
- //# sourceMappingURL=color_picker_inputs_hex.js.map