@dreamcommerce/aurora 3.0.0-319 → 3.0.0-320

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 (27) hide show
  1. package/build/cjs/packages/aurora/src/components/color_picker/color_picker.js +5 -3
  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/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js +1 -8
  4. 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 -1
  5. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +1 -19
  6. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js.map +1 -1
  7. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_shades.js +3 -1
  8. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_shades.js.map +1 -1
  9. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_variables.js +26 -6
  10. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_variables.js.map +1 -1
  11. package/build/cjs/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js +3 -1
  12. package/build/cjs/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js.map +1 -1
  13. package/build/esm/packages/aurora/src/components/color_picker/color_picker.d.ts +1 -1
  14. package/build/esm/packages/aurora/src/components/color_picker/color_picker.js +5 -3
  15. package/build/esm/packages/aurora/src/components/color_picker/color_picker.js.map +1 -1
  16. package/build/esm/packages/aurora/src/components/color_picker/color_picker_types.d.ts +2 -0
  17. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js +2 -9
  18. 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 -1
  19. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +2 -20
  20. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js.map +1 -1
  21. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_shades.js +3 -1
  22. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_shades.js.map +1 -1
  23. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_variables.js +26 -6
  24. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_variables.js.map +1 -1
  25. package/build/esm/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js +3 -1
  26. package/build/esm/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js.map +1 -1
  27. package/package.json +1 -1
package/build/cjs/packages/aurora/src/components/color_picker/color_picker.js CHANGED
@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
12
12
 
13
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
 
15
- var _excluded = ["id", "name", "value", "colorVariables", "errors", "onChange", "onCancel", "onSave", "withGradient", "disabled"];
15
+ var _excluded = ["id", "name", "value", "colorVariables", "errors", "onChange", "onCancel", "onSave", "onPickShade", "withGradient", "disabled"];
16
16
  var ColorPicker = function ColorPicker(_ref) {
17
17
  var id = _ref.id,
18
18
  name = _ref.name,
@@ -22,6 +22,7 @@ var ColorPicker = function ColorPicker(_ref) {
22
22
  onChange = _ref.onChange,
23
23
  onCancel = _ref.onCancel,
24
24
  onSave = _ref.onSave,
25
+ onPickShade = _ref.onPickShade,
25
26
  isWithGradient = _ref.withGradient,
26
27
  disabled = _ref.disabled,
27
28
  rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
@@ -91,9 +92,10 @@ var ColorPicker = function ColorPicker(_ref) {
91
92
  isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
92
93
  setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
93
94
  degrees: degrees,
94
- shadeName: shadeName
95
+ shadeName: shadeName,
96
+ onPickShade: onPickShade
95
97
  };
96
- }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName]);
98
+ }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName, onPickShade]);
97
99
  return /*#__PURE__*/React__default['default'].createElement(color_picker_context.ColorPickerContext.Provider, {
98
100
  value: contextVal
99
101
  }, /*#__PURE__*/React__default['default'].createElement(pure_color_picker['default'], _rollupPluginBabelHelpers.objectSpread2({
package/build/cjs/packages/aurora/src/components/color_picker/color_picker.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js CHANGED
@@ -13,14 +13,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  var ColorPickerInputsHexAlpha = function ColorPickerInputsHexAlpha() {
14
14
  var _useColorPicker = use_color_picker.useColorPicker(),
15
15
  handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
16
- alpha = _useColorPicker.alpha,
17
- isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
18
- var alphaInputRef = React.useRef(null);
19
- React.useEffect(function () {
20
- if (isColorPickerCurrentlyUsed && alphaInputRef.current) {
21
- alphaInputRef.current.blur();
22
- }
23
- }, [isColorPickerCurrentlyUsed]);
16
+ alpha = _useColorPicker.alpha;
24
17
  return /*#__PURE__*/React__default['default'].createElement("div", {
25
18
  className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
26
19
  }, /*#__PURE__*/React__default['default'].createElement("input", {
package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js.map CHANGED
@@ -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;"}
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/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js CHANGED
@@ -18,23 +18,8 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
18
18
  setB = _useColorPicker.setB,
19
19
  handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
20
20
  alpha = _useColorPicker.alpha,
21
- rgbaArr = _useColorPicker.rgbaArr,
22
- isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
23
- var rInputRef = React.useRef(null);
24
- var gInputRef = React.useRef(null);
25
- var bInputRef = React.useRef(null);
26
- var alphaInputRef = React.useRef(null);
27
- React.useEffect(function () {
28
- if (isColorPickerCurrentlyUsed) {
29
- var _rInputRef$current, _gInputRef$current, _bInputRef$current, _alphaInputRef$curren;
30
- (_rInputRef$current = rInputRef.current) === null || _rInputRef$current === void 0 ? void 0 : _rInputRef$current.blur();
31
- (_gInputRef$current = gInputRef.current) === null || _gInputRef$current === void 0 ? void 0 : _gInputRef$current.blur();
32
- (_bInputRef$current = bInputRef.current) === null || _bInputRef$current === void 0 ? void 0 : _bInputRef$current.blur();
33
- (_alphaInputRef$curren = alphaInputRef.current) === null || _alphaInputRef$curren === void 0 ? void 0 : _alphaInputRef$curren.blur();
34
- }
35
- }, [isColorPickerCurrentlyUsed]);
21
+ rgbaArr = _useColorPicker.rgbaArr;
36
22
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(input.Input, {
37
- ref: rInputRef,
38
23
  className: "aurora-h-full aurora-text-xs",
39
24
  type: "text",
40
25
  value: rgbaArr[0],
@@ -43,7 +28,6 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
43
28
  },
44
29
  onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
45
30
  }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
46
- ref: gInputRef,
47
31
  className: "aurora-h-full aurora-text-xs",
48
32
  type: "text",
49
33
  value: rgbaArr[1],
@@ -52,7 +36,6 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
52
36
  },
53
37
  onKeyDown: color_picker_utils.ColorPickerUtils.preventTypingLetters
54
38
  }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
55
- ref: bInputRef,
56
39
  className: "aurora-h-full aurora-text-xs",
57
40
  type: "text",
58
41
  value: rgbaArr[2],
@@ -63,7 +46,6 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
63
46
  }), /*#__PURE__*/React__default['default'].createElement("div", {
64
47
  className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
65
48
  }, /*#__PURE__*/React__default['default'].createElement("input", {
66
- ref: alphaInputRef,
67
49
  className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
68
50
  type: "text",
69
51
  value: Math.round(alpha),
package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js.map CHANGED
@@ -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;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;AACA;AACA;AACA;AACA;AACA;"}
package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_shades.js CHANGED
@@ -16,7 +16,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
16
  var ColorPickerShades = function ColorPickerShades() {
17
17
  var _useColorPicker = use_color_picker.useColorPicker(),
18
18
  hslArr = _useColorPicker.hslArr,
19
- setColor = _useColorPicker.setColor;
19
+ setColor = _useColorPicker.setColor,
20
+ onPickShade = _useColorPicker.onPickShade;
20
21
  var _useTranslation = useTranslation.useTranslation(),
21
22
  _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
22
23
  t = _useTranslation2[0];
@@ -81,6 +82,7 @@ var ColorPickerShades = function ColorPickerShades() {
81
82
  var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
82
83
  var handleOnClick = function handleOnClick() {
83
84
  setColor(colorHex);
85
+ onPickShade === null || onPickShade === void 0 ? void 0 : onPickShade(colorHex);
84
86
  };
85
87
  return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
86
88
  className: "aurora-cursor-pointer",
package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_shades.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/aurora/src/components/color_picker/components/color_picker_variables.js CHANGED
@@ -5,7 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
7
7
  var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
8
+ var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
8
9
  var cn = require('../../../utilities/cn.js');
10
+ var typography = require('../../typography/typography.js');
11
+ var tooltip = require('../../tooltip/tooltip.js');
12
+ var tooltip_trigger = require('../../tooltip/components/tooltip_trigger.js');
13
+ var tooltip_content = require('../../tooltip/components/tooltip_content.js');
14
+ var tooltip_provider = require('../../tooltip/context/tooltip_provider.js');
9
15
  var use_color_picker = require('../hooks/use_color_picker.js');
10
16
  var color_picker_swatch = require('./color_picker_swatch.js');
11
17
  var color_picker_utils = require('../color_picker_utils.js');
@@ -63,15 +69,22 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
63
69
  var handleOnClick = function handleOnClick() {
64
70
  return setColor(colorHex);
65
71
  };
66
- return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
72
+ return /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, {
73
+ key: "".concat(variable, "-").concat(index)
74
+ }, /*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, null, /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
67
75
  className: "aurora-cursor-pointer",
68
76
  size: "small",
69
77
  onClick: handleOnClick,
70
- key: "".concat(variable, "-").concat(index),
71
78
  color: colorHex,
72
79
  cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
73
80
  hasActiveBorder: true
74
- });
81
+ })), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
82
+ variant: "dark"
83
+ }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {
84
+ size: "xs",
85
+ weight: "medium",
86
+ color: css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.inverse
87
+ }, variable.name))));
75
88
  })), isOpen && (/*#__PURE__*/React__default['default'].createElement("div", {
76
89
  className: "aurora-grid aurora-grid-cols-12 aurora-gap-1 aurora-mt-3"
77
90
  }, allShades.map(function (variable, index) {
@@ -80,15 +93,22 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
80
93
  var handleOnClick = function handleOnClick() {
81
94
  return setColor(colorHex, variable.name);
82
95
  };
83
- return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
96
+ return /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, {
97
+ key: "".concat(variable, "-").concat(index)
98
+ }, /*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, null, /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
84
99
  className: "aurora-cursor-pointer",
85
100
  size: "small",
86
101
  onClick: handleOnClick,
87
- key: "".concat(variable, "-").concat(index),
88
102
  color: colorHex,
89
103
  cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
90
104
  hasActiveBorder: true
91
- });
105
+ })), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
106
+ variant: "dark"
107
+ }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {
108
+ size: "xs",
109
+ weight: "medium",
110
+ color: css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.inverse
111
+ }, variable.name))));
92
112
  }))));
93
113
  };
94
114
 
package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_variables.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js CHANGED
@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
15
15
 
16
16
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
17
 
18
- var _excluded = ["label", "tooltip", "required", "id", "name", "errors", "value", "colorVariables", "onChange", "onCancel", "onSave", "withGradient", "helperText", "disabled"];
18
+ var _excluded = ["label", "tooltip", "required", "id", "name", "errors", "value", "colorVariables", "onChange", "onCancel", "onSave", "onPickShade", "withGradient", "helperText", "disabled"];
19
19
  var ColorPickerControl = function ColorPickerControl(_ref) {
20
20
  var label$1 = _ref.label,
21
21
  tooltip = _ref.tooltip,
@@ -29,6 +29,7 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
29
29
  onChange = _ref.onChange,
30
30
  onCancel = _ref.onCancel,
31
31
  onSave = _ref.onSave,
32
+ onPickShade = _ref.onPickShade,
32
33
  withGradient = _ref.withGradient,
33
34
  helperText = _ref.helperText,
34
35
  disabled = _ref.disabled,
@@ -48,6 +49,7 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
48
49
  onChange: onChange,
49
50
  onCancel: onCancel,
50
51
  onSave: onSave,
52
+ onPickShade: onPickShade,
51
53
  withGradient: withGradient,
52
54
  disabled: disabled
53
55
  }, rest)), helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
package/build/cjs/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js.map CHANGED
@@ -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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
package/build/esm/packages/aurora/src/components/color_picker/color_picker.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
2
  import { IColorPickerProps } from './color_picker_types';
3
- export declare const ColorPicker: ({ id, name, value, colorVariables, errors, onChange, onCancel, onSave, withGradient: isWithGradient, disabled, ...rest }: IColorPickerProps) => React.JSX.Element;
3
+ export declare const ColorPicker: ({ id, name, value, colorVariables, errors, onChange, onCancel, onSave, onPickShade, withGradient: isWithGradient, disabled, ...rest }: IColorPickerProps) => React.JSX.Element;
package/build/esm/packages/aurora/src/components/color_picker/color_picker.js CHANGED
@@ -4,7 +4,7 @@ import { ColorPickerContext } from './color_picker_context.js';
4
4
  import ColorPickerPure from './components/pure_color_picker.js';
5
5
  import useSetupColorPicker from './hooks/setup_color_picker.js';
6
6
 
7
- var _excluded = ["id", "name", "value", "colorVariables", "errors", "onChange", "onCancel", "onSave", "withGradient", "disabled"];
7
+ var _excluded = ["id", "name", "value", "colorVariables", "errors", "onChange", "onCancel", "onSave", "onPickShade", "withGradient", "disabled"];
8
8
  var ColorPicker = function ColorPicker(_ref) {
9
9
  var id = _ref.id,
10
10
  name = _ref.name,
@@ -14,6 +14,7 @@ var ColorPicker = function ColorPicker(_ref) {
14
14
  onChange = _ref.onChange,
15
15
  onCancel = _ref.onCancel,
16
16
  onSave = _ref.onSave,
17
+ onPickShade = _ref.onPickShade,
17
18
  isWithGradient = _ref.withGradient,
18
19
  disabled = _ref.disabled,
19
20
  rest = _objectWithoutProperties(_ref, _excluded);
@@ -83,9 +84,10 @@ var ColorPicker = function ColorPicker(_ref) {
83
84
  isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
84
85
  setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
85
86
  degrees: degrees,
86
- shadeName: shadeName
87
+ shadeName: shadeName,
88
+ onPickShade: onPickShade
87
89
  };
88
- }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName]);
90
+ }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName, onPickShade]);
89
91
  return /*#__PURE__*/React.createElement(ColorPickerContext.Provider, {
90
92
  value: contextVal
91
93
  }, /*#__PURE__*/React.createElement(ColorPickerPure, _objectSpread2({
package/build/esm/packages/aurora/src/components/color_picker/color_picker.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker_types.d.ts CHANGED
@@ -30,6 +30,7 @@ export interface IColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>,
30
30
  onChange?: (color: IColorPickerColor) => void;
31
31
  onCancel?: () => void;
32
32
  onSave?: (color: IColorPickerColor) => void;
33
+ onPickShade?: (shadeValue: string) => void;
33
34
  disabled?: boolean;
34
35
  triggerClassName?: string;
35
36
  }
@@ -63,6 +64,7 @@ export interface IColorPickerContext {
63
64
  setIsColorPickerCurrentlyUsed: (isUsed: boolean) => void;
64
65
  degrees: number;
65
66
  shadeName: string;
67
+ onPickShade?: (shadeValue: string) => void;
66
68
  }
67
69
  export declare type ColorPickerColorTypes = {
68
70
  hex: string;
package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js CHANGED
@@ -1,18 +1,11 @@
1
- import React, { useRef, useEffect } from 'react';
1
+ import React from 'react';
2
2
  import { useColorPicker } from '../../../hooks/use_color_picker.js';
3
3
  import { ColorPickerUtils } from '../../../color_picker_utils.js';
4
4
 
5
5
  var ColorPickerInputsHexAlpha = function ColorPickerInputsHexAlpha() {
6
6
  var _useColorPicker = useColorPicker(),
7
7
  handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
8
- alpha = _useColorPicker.alpha,
9
- isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
10
- var alphaInputRef = useRef(null);
11
- useEffect(function () {
12
- if (isColorPickerCurrentlyUsed && alphaInputRef.current) {
13
- alphaInputRef.current.blur();
14
- }
15
- }, [isColorPickerCurrentlyUsed]);
8
+ alpha = _useColorPicker.alpha;
16
9
  return /*#__PURE__*/React.createElement("div", {
17
10
  className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
18
11
  }, /*#__PURE__*/React.createElement("input", {
package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_alpha.js.map CHANGED
@@ -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;"}
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;"}
package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useRef, useEffect } from 'react';
1
+ import React from 'react';
2
2
  import { Input } from '../../../input/input.js';
3
3
  import { useColorPicker } from '../../hooks/use_color_picker.js';
4
4
  import { ColorPickerUtils } from '../../color_picker_utils.js';
@@ -10,23 +10,8 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
10
10
  setB = _useColorPicker.setB,
11
11
  handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
12
12
  alpha = _useColorPicker.alpha,
13
- rgbaArr = _useColorPicker.rgbaArr,
14
- isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
15
- var rInputRef = useRef(null);
16
- var gInputRef = useRef(null);
17
- var bInputRef = useRef(null);
18
- var alphaInputRef = useRef(null);
19
- useEffect(function () {
20
- if (isColorPickerCurrentlyUsed) {
21
- var _rInputRef$current, _gInputRef$current, _bInputRef$current, _alphaInputRef$curren;
22
- (_rInputRef$current = rInputRef.current) === null || _rInputRef$current === void 0 ? void 0 : _rInputRef$current.blur();
23
- (_gInputRef$current = gInputRef.current) === null || _gInputRef$current === void 0 ? void 0 : _gInputRef$current.blur();
24
- (_bInputRef$current = bInputRef.current) === null || _bInputRef$current === void 0 ? void 0 : _bInputRef$current.blur();
25
- (_alphaInputRef$curren = alphaInputRef.current) === null || _alphaInputRef$curren === void 0 ? void 0 : _alphaInputRef$curren.blur();
26
- }
27
- }, [isColorPickerCurrentlyUsed]);
13
+ rgbaArr = _useColorPicker.rgbaArr;
28
14
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
29
- ref: rInputRef,
30
15
  className: "aurora-h-full aurora-text-xs",
31
16
  type: "text",
32
17
  value: rgbaArr[0],
@@ -35,7 +20,6 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
35
20
  },
36
21
  onKeyDown: ColorPickerUtils.preventTypingLetters
37
22
  }), /*#__PURE__*/React.createElement(Input, {
38
- ref: gInputRef,
39
23
  className: "aurora-h-full aurora-text-xs",
40
24
  type: "text",
41
25
  value: rgbaArr[1],
@@ -44,7 +28,6 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
44
28
  },
45
29
  onKeyDown: ColorPickerUtils.preventTypingLetters
46
30
  }), /*#__PURE__*/React.createElement(Input, {
47
- ref: bInputRef,
48
31
  className: "aurora-h-full aurora-text-xs",
49
32
  type: "text",
50
33
  value: rgbaArr[2],
@@ -55,7 +38,6 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
55
38
  }), /*#__PURE__*/React.createElement("div", {
56
39
  className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
57
40
  }, /*#__PURE__*/React.createElement("input", {
58
- ref: alphaInputRef,
59
41
  className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
60
42
  type: "text",
61
43
  value: Math.round(alpha),
package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js.map CHANGED
@@ -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;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;"}
package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_shades.js CHANGED
@@ -8,7 +8,8 @@ import { ColorPickerUtils } from '../color_picker_utils.js';
8
8
  var ColorPickerShades = function ColorPickerShades() {
9
9
  var _useColorPicker = useColorPicker(),
10
10
  hslArr = _useColorPicker.hslArr,
11
- setColor = _useColorPicker.setColor;
11
+ setColor = _useColorPicker.setColor,
12
+ onPickShade = _useColorPicker.onPickShade;
12
13
  var _useTranslation = useTranslation(),
13
14
  _useTranslation2 = _slicedToArray(_useTranslation, 1),
14
15
  t = _useTranslation2[0];
@@ -73,6 +74,7 @@ var ColorPickerShades = function ColorPickerShades() {
73
74
  var colorHex = ColorPickerUtils.getHexValue(colorTiny);
74
75
  var handleOnClick = function handleOnClick() {
75
76
  setColor(colorHex);
77
+ onPickShade === null || onPickShade === void 0 ? void 0 : onPickShade(colorHex);
76
78
  };
77
79
  return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
78
80
  className: "aurora-cursor-pointer",
package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_shades.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color_picker_variables.js CHANGED
@@ -1,7 +1,13 @@
1
1
  import React, { useState } from 'react';
2
2
  import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
3
3
  import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
4
+ import { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.js';
4
5
  import { cn } from '../../../utilities/cn.js';
6
+ import { Typography } from '../../typography/typography.js';
7
+ import { Tooltip } from '../../tooltip/tooltip.js';
8
+ import { TooltipTrigger } from '../../tooltip/components/tooltip_trigger.js';
9
+ import { TooltipContent } from '../../tooltip/components/tooltip_content.js';
10
+ import { TooltipProvider } from '../../tooltip/context/tooltip_provider.js';
5
11
  import { useColorPicker } from '../hooks/use_color_picker.js';
6
12
  import { ColorPickerSwatch } from './color_picker_swatch.js';
7
13
  import { ColorPickerUtils } from '../color_picker_utils.js';
@@ -55,15 +61,22 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
55
61
  var handleOnClick = function handleOnClick() {
56
62
  return setColor(colorHex);
57
63
  };
58
- return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
64
+ return /*#__PURE__*/React.createElement(TooltipProvider, {
65
+ key: "".concat(variable, "-").concat(index)
66
+ }, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(ColorPickerSwatch, {
59
67
  className: "aurora-cursor-pointer",
60
68
  size: "small",
61
69
  onClick: handleOnClick,
62
- key: "".concat(variable, "-").concat(index),
63
70
  color: colorHex,
64
71
  cssColor: ColorPickerUtils.getHexValueString(colorTiny),
65
72
  hasActiveBorder: true
66
- });
73
+ })), /*#__PURE__*/React.createElement(TooltipContent, {
74
+ variant: "dark"
75
+ }, /*#__PURE__*/React.createElement(Typography, {
76
+ size: "xs",
77
+ weight: "medium",
78
+ color: CSS_TEXT_COLOR_TOKENS.inverse
79
+ }, variable.name))));
67
80
  })), isOpen && (/*#__PURE__*/React.createElement("div", {
68
81
  className: "aurora-grid aurora-grid-cols-12 aurora-gap-1 aurora-mt-3"
69
82
  }, allShades.map(function (variable, index) {
@@ -72,15 +85,22 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
72
85
  var handleOnClick = function handleOnClick() {
73
86
  return setColor(colorHex, variable.name);
74
87
  };
75
- return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
88
+ return /*#__PURE__*/React.createElement(TooltipProvider, {
89
+ key: "".concat(variable, "-").concat(index)
90
+ }, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(ColorPickerSwatch, {
76
91
  className: "aurora-cursor-pointer",
77
92
  size: "small",
78
93
  onClick: handleOnClick,
79
- key: "".concat(variable, "-").concat(index),
80
94
  color: colorHex,
81
95
  cssColor: ColorPickerUtils.getHexValueString(colorTiny),
82
96
  hasActiveBorder: true
83
- });
97
+ })), /*#__PURE__*/React.createElement(TooltipContent, {
98
+ variant: "dark"
99
+ }, /*#__PURE__*/React.createElement(Typography, {
100
+ size: "xs",
101
+ weight: "medium",
102
+ color: CSS_TEXT_COLOR_TOKENS.inverse
103
+ }, variable.name))));
84
104
  }))));
85
105
  };
86
106
 
package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_variables.js.map CHANGED
@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/controls/color_picker_control/color_picker_control.js CHANGED
@@ -7,7 +7,7 @@ import { HelperText } from '../../helper_text/helper_text.js';
7
7
  import { Label } from '../../label/label.js';
8
8
  import { ColorPicker } from '../../color_picker/color_picker.js';
9
9
 
10
- var _excluded = ["label", "tooltip", "required", "id", "name", "errors", "value", "colorVariables", "onChange", "onCancel", "onSave", "withGradient", "helperText", "disabled"];
10
+ var _excluded = ["label", "tooltip", "required", "id", "name", "errors", "value", "colorVariables", "onChange", "onCancel", "onSave", "onPickShade", "withGradient", "helperText", "disabled"];
11
11
  var ColorPickerControl = function ColorPickerControl(_ref) {
12
12
  var label = _ref.label,
13
13
  tooltip = _ref.tooltip,
@@ -21,6 +21,7 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
21
21
  onChange = _ref.onChange,
22
22
  onCancel = _ref.onCancel,
23
23
  onSave = _ref.onSave,
24
+ onPickShade = _ref.onPickShade,
24
25
  withGradient = _ref.withGradient,
25
26
  helperText = _ref.helperText,
26
27
  disabled = _ref.disabled,
@@ -40,6 +41,7 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
40
41
  onChange: onChange,
41
42
  onCancel: onCancel,
42
43
  onSave: onSave,
44
+ onPickShade: onPickShade,
43
45
  withGradient: withGradient,
44
46
  disabled: disabled
45
47
  }, rest)), helperText ? /*#__PURE__*/React.createElement(HelperText, {
package/build/esm/packages/aurora/src/components/controls/color_picker_control/color_picker_control.js.map CHANGED
@@ -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;"}
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-319",
5
+ "version": "3.0.0-320",
6
6
  "description": "aurora",
7
7
  "author": "zefirek",
8
8
  "license": "MIT",