@dreamcommerce/aurora 3.0.0-316 → 3.0.0-317

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_hex/color_picker_inputs_hex_input.js

@@ -0,0 +1,83 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { Input } from '../../../../input/input.js';
+import { useColorPicker } from '../../../hooks/use_color_picker.js';
+import tinycolor from '../../../../../../../../external/tinycolor2/esm/tinycolor.js';
+import { usePicker } from '../../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
+import { ColorPickerUtils } from '../../../color_picker_utils.js';
+
+var ColorPickerInputsHexInput = function ColorPickerInputsHexInput(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    initialValue = _ref.value,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
+    errors = _ref.errors,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    preElement = _ref.preElement,
+    readOnly = _ref.readOnly,
+    hasCursorPointer = _ref.hasCursorPointer;
+  var _useColorPicker = useColorPicker(),
+    setColor = _useColorPicker.setColor,
+    hex = _useColorPicker.hex,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
+    gradientType = _useColorPicker.gradientType;
+  var _useState = useState(hex),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var valueRef = useRef(value);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDisabled = _useState4[0],
+    setIsDisabled = _useState4[1];
+  var _usePicker = usePicker(),
+    colors = _usePicker.colors,
+    selectedColor = _usePicker.selectedColor,
+    createGradientStr = _usePicker.createGradientStr;
+  var handleOnChange = function handleOnChange(event) {
+    var inputValue = event.target.value.replace('%', '');
+    setValue(inputValue);
+    valueRef.current = inputValue;
+    if (!tinycolor(inputValue).isValid()) return;
+    if (isCurrentValueGradient && gradientType) {
+      var newColors = ColorPickerUtils.updateGradientWithActiveColor(colors, selectedColor, inputValue);
+      createGradientStr(newColors);
+    } else {
+      setColor(inputValue);
+    }
+  };
+  var hexFocus = function hexFocus() {
+    setIsDisabled(true);
+  };
+  var hexBlur = function hexBlur() {
+    setIsDisabled(false);
+  };
+  useEffect(function () {
+    if (hex === valueRef.current) return;
+    if (!isDisabled) {
+      setValue(hex);
+      valueRef.current = hex;
+    }
+  }, [hex, isDisabled]);
+  return /*#__PURE__*/React.createElement(Input, {
+    className: className,
+    type: type,
+    preElement: preElement,
+    id: id,
+    name: name,
+    errors: errors,
+    disabled: disabled,
+    maxLength: 8,
+    value: initialValue || value.toUpperCase(),
+    onChange: handleOnChange,
+    onBlur: hexBlur,
+    onFocus: hexFocus,
+    readOnly: readOnly,
+    hasCursorPointer: hasCursorPointer
+  });
+};
+
+export { ColorPickerInputsHexInput };
+//# sourceMappingURL=color_picker_inputs_hex_input.js.map

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 @@
-{"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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js

@@ -3,10 +3,14 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { cn } from '../../../utilities/cn.js';
 import { Popover } from '../../popover/popover.js';
 import { PopoverTrigger } from '../../popover/components/popover_trigger.js';
+import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../color_picker_constants.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerSwatch } from './color_picker_swatch.js';
+import { objectToString } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
+import PickerContextWrapper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
+import { getStyles } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
 import { ColorPickerContent } from './color_picker_content.js';
-import { ColorPickerInput } from './color_label_input.js';
+import { ColorPickerInput } from './color_picker_input.js';
 import { PopoverContent } from '../../popover/components/popover_content.js';
 
 var _excluded = ["id", "name", "errors", "disabled", "className", "children", "triggerClassName"];
@@ -21,9 +25,12 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useColorPicker = useColorPicker(),
     color = _useColorPicker.color,
+    setColor = _useColorPicker.setColor,
     isColorPickerOpened = _useColorPicker.isColorPickerOpened,
     setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened,
     handleSave = _useColorPicker.handleSave;
+  var safeValue = objectToString(color);
+  var defaultStyles = getStyles(true);
   var handleClosePopover = function handleClosePopover() {
     handleSave();
     setIsColorPickerOpened(false);
@@ -33,9 +40,17 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
     onOpenChange: function onOpenChange(value) {
       return !value && handleClosePopover();
     }
+  }, /*#__PURE__*/React.createElement(PickerContextWrapper, {
+    value: safeValue,
+    defaultStyles: defaultStyles,
+    onChange: setColor,
+    squareWidth: COLOR_PICKER_WIDTH,
+    squareHeight: COLOR_PICKER_HEIGHT,
+    hideOpacity: false
   }, /*#__PURE__*/React.createElement(PopoverTrigger, {
-    onClick: function onClick() {
-      return setIsColorPickerOpened(true);
+    onClick: function onClick(e) {
+      e.preventDefault();
+      setIsColorPickerOpened(true);
     },
     disabled: disabled,
     className: cn('aurora-w-full', triggerClassName)
@@ -51,7 +66,7 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
     })
   })), children), /*#__PURE__*/React.createElement(PopoverContent, _objectSpread2({
     className: cn('aurora-rounded-16 aurora-overflow-hidden aurora-z-[99999] js__aurora-color-picker', className)
-  }, rest), /*#__PURE__*/React.createElement(ColorPickerContent, null)));
+  }, rest), /*#__PURE__*/React.createElement(ColorPickerContent, null))));
 };
 
 export default ColorPickerPure;

package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map

@@ -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;"}
+{"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;AACA;"}

package/build/esm/packages/aurora/src/components/input/input.js

@@ -3,7 +3,7 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { cn } from '../../utilities/cn.js';
 import { inputVariants } from './input_variants.js';
 
-var _excluded = ["preElement", "postElement", "errors", "className", "id", "name", "value", "defaultValue", "placeholder", "disabled", "readOnly", "type", "onChange", "onKeyDown", "onKeyUp"];
+var _excluded = ["preElement", "postElement", "errors", "className", "id", "name", "value", "defaultValue", "placeholder", "disabled", "readOnly", "type", "hasCursorPointer", "onChange", "onKeyDown", "onKeyUp"];
 var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var preElement = _ref.preElement,
     postElement = _ref.postElement,
@@ -18,6 +18,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled = _ref.disabled,
     readOnly = _ref.readOnly,
     type = _ref.type,
+    hasCursorPointer = _ref.hasCursorPointer,
     onChange = _ref.onChange,
     onKeyDown = _ref.onKeyDown,
     onKeyUp = _ref.onKeyUp,
@@ -43,7 +44,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
     type: type,
-    className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6')
+    className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6', {
+      '!aurora-cursor-pointer': hasCursorPointer
+    })
   })), postElement && /*#__PURE__*/React.createElement("div", {
     className: "aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
   }, postElement));

package/build/esm/packages/aurora/src/components/input/input.js.map

@@ -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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/input/input_types.d.ts

@@ -5,4 +5,5 @@ export interface TInputProps extends React.InputHTMLAttributes<HTMLInputElement>
     preElement?: React.ReactNode;
     postElement?: React.ReactNode;
     errors?: string | string[];
+    hasCursorPointer?: boolean;
 }