@dreamcommerce/aurora 3.0.0-99 → 3.0.0

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,93 @@
+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,
+    setTypedInputValue = _useColorPicker.setTypedInputValue,
+    hex = _useColorPicker.hex,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
+    gradientType = _useColorPicker.gradientType,
+    isColorPickerCurrentlyUsed = _useColorPicker.isColorPickerCurrentlyUsed;
+  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 inputRef = useRef(null);
+  var _usePicker = usePicker(),
+    colors = _usePicker.colors,
+    selectedColor = _usePicker.selectedColor,
+    createGradientStr = _usePicker.createGradientStr;
+  var handleOnChange = function handleOnChange(event) {
+    var inputValue = event.target.value.replace('%', '');
+    setTypedInputValue(inputValue);
+    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 (isColorPickerCurrentlyUsed && inputRef.current) {
+      inputRef.current.blur();
+    }
+  }, [isColorPickerCurrentlyUsed]);
+  useEffect(function () {
+    if (hex === valueRef.current) return;
+    if (!isDisabled) {
+      setValue(hex);
+      valueRef.current = hex;
+    }
+  }, [hex, isDisabled]);
+  return /*#__PURE__*/React.createElement(Input, {
+    ref: inputRef,
+    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/color_picker_inputs_hex_input.js.map

@@ -0,0 +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;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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Input } from '../../../input/input.js';
 import { useColorPicker } from '../../hooks/use_color_picker.js';
-import { InputUtils } from '@dreamcommerce/utilities';
+import { ColorPickerUtils } from '../../color_picker_utils.js';
 
 var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
   var _useColorPicker = useColorPicker(),
@@ -9,39 +9,45 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
     setG = _useColorPicker.setG,
     setB = _useColorPicker.setB,
     handleOnChangeAlpha = _useColorPicker.handleOnChangeAlpha,
-    alphaValue = _useColorPicker.alphaValue,
+    alpha = _useColorPicker.alpha,
     rgbaArr = _useColorPicker.rgbaArr;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
-    className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[0],
     onChange: function onChange(e) {
       return setR(Number(e.target.value));
     },
-    onKeyPress: InputUtils.preventTypingLetters
+    onKeyDown: ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React.createElement(Input, {
-    className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[1],
     onChange: function onChange(e) {
       return setG(Number(e.target.value));
     },
-    onKeyPress: InputUtils.preventTypingLetters
+    onKeyDown: ColorPickerUtils.preventTypingLetters
   }), /*#__PURE__*/React.createElement(Input, {
-    className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
+    className: "aurora-h-full aurora-text-xs",
     type: "text",
     value: rgbaArr[2],
     onChange: function onChange(e) {
       return setB(Number(e.target.value));
     },
-    onKeyPress: InputUtils.preventTypingLetters
-  }), /*#__PURE__*/React.createElement(Input, {
-    className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
+    onKeyDown: ColorPickerUtils.preventTypingLetters
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-rounded-6 focus aurora-text aurora-w-[46px] aurora-flex-none aurora-px-1 aurora-items-center"
+  }, /*#__PURE__*/React.createElement("input", {
+    className: "aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-rounded-6 aurora-h-full aurora-text-xs",
     type: "text",
-    value: alphaValue,
-    onChange: handleOnChangeAlpha,
-    onKeyPress: InputUtils.preventTypingLetters
-  }));
+    value: Math.round(alpha),
+    onChange: function onChange(e) {
+      return handleOnChangeAlpha(Number(e.target.value));
+    },
+    onKeyDown: ColorPickerUtils.preventTypingLetters
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-text-xs aurora-pl-0.5"
+  }, "%")));
 };
 
 export { ColorPickerInputsRgba };

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.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;"}
+{"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_mode_toggler.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.js';
+import { cn } from '../../../utilities/cn.js';
 import { Stack } from '../../stack/stack.js';
 import { Typography } from '../../typography/typography.js';
 import { Tooltip } from '../../tooltip/tooltip.js';
@@ -18,48 +20,63 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
     setRadial = _useColorPicker.setRadial,
     setLinear = _useColorPicker.setLinear,
     previousSolidColor = _useColorPicker.previousSolidColor,
-    previousGradientColor = _useColorPicker.previousGradientColor;
-  var commonClassNames = 'aurora-block aurora-w-6 aurora-h-6 aurora-border aurora-border-solid aurora-rounded-4 aurora-cursor-pointer hover:aurora-border-strong';
-  var activeClassNames = 'aurora-border-2 aurora-border-solid aurora-border-active';
+    previousGradientColor = _useColorPicker.previousGradientColor,
+    color = _useColorPicker.color;
+  var commonClassNames = 'aurora-block aurora-w-6 aurora-h-6 aurora-border aurora-border-solid aurora-rounded-4 aurora-cursor-pointer hover:aurora-border-strong hover:aurora-border-2';
+  var activeClassNames = 'aurora-border-2 aurora-border-solid !aurora-border-active';
+  var changeToSolid = function changeToSolid() {
+    setSolid(previousSolidColor);
+  };
+  var changeToLinear = function changeToLinear() {
+    if (!isCurrentValueGradient) {
+      setLinear(previousGradientColor);
+      return;
+    }
+    setLinear(color);
+  };
+  var changeToRadial = function changeToRadial() {
+    if (!isCurrentValueGradient) {
+      setRadial(previousGradientColor);
+      return;
+    }
+    setRadial(color);
+  };
   return /*#__PURE__*/React.createElement(Stack, {
     spacing: "1",
     className: "aurora-flex aurora-list-none"
   }, /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    onClick: function onClick() {
-      return setSolid(previousSolidColor);
-    },
+    onClick: changeToSolid,
     "aria-label": "Color picker solid mode",
-    className: "aurora-bg-info-active ".concat(commonClassNames, " ").concat(!isCurrentValueGradient && activeClassNames)
+    className: cn('aurora-bg-neutral-700', commonClassNames, !isCurrentValueGradient && activeClassNames)
   })), /*#__PURE__*/React.createElement(TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React.createElement(Typography, {
     size: "xs",
-    weight: "medium"
+    weight: "medium",
+    color: CSS_TEXT_COLOR_TOKENS.inverse
   }, "".concat(t('Solid')))))), /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    onClick: function onClick() {
-      return setLinear(previousGradientColor);
-    },
+    onClick: changeToLinear,
     "aria-label": "Color picker linear gradient mode",
-    className: "color-picker-mode-toggler__button_gradient_linear ".concat(commonClassNames, " ").concat(gradientType === 'linear-gradient' && activeClassNames)
+    className: cn('color-picker-mode-toggler__button_gradient_linear', commonClassNames, gradientType === 'linear-gradient' && activeClassNames)
   })), /*#__PURE__*/React.createElement(TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React.createElement(Typography, {
     size: "xs",
-    weight: "medium"
+    weight: "medium",
+    color: CSS_TEXT_COLOR_TOKENS.inverse
   }, "".concat(t('Linear gradient')))))), /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    onClick: function onClick() {
-      return setRadial(previousGradientColor);
-    },
+    onClick: changeToRadial,
     "aria-label": "Color picker radial gradient mode",
-    className: "color-picker-mode-toggler__button_gradient_radial ".concat(commonClassNames, " ").concat(gradientType === 'radial-gradient' && activeClassNames)
+    className: cn('color-picker-mode-toggler__button_gradient_radial', commonClassNames, gradientType === 'radial-gradient' && activeClassNames)
   })), /*#__PURE__*/React.createElement(TooltipContent, {
     variant: "dark"
   }, /*#__PURE__*/React.createElement(Typography, {
     size: "xs",
-    weight: "medium"
+    weight: "medium",
+    color: CSS_TEXT_COLOR_TOKENS.inverse
   }, "".concat(t('Radial gradient')))))));
 };
 

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

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

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Zmieniono ikonke
+ * - Usunieto caly kod zwiazany z html2canvas
+ */
+export declare const EyeDropper: ({ onSelect }: {
+    onSelect: (arg0: string) => void;
+}) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_eye_dropper.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
+import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
+import { controlBtnStyles } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
+import { DropperFillIcon } from '../../../../assets/icons/dropper_fill_icon.js';
+
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Zmieniono ikonke
+ * - Usunieto caly kod zwiazany z html2canvas
+ */
+var EyeDropper = function EyeDropper(_ref) {
+  var onSelect = _ref.onSelect;
+  var _usePicker = usePicker(),
+    defaultStyles = _usePicker.defaultStyles;
+  var getEyeDrop = function getEyeDrop() {
+    // @ts-expect-error - ts does not evaluate for window.EyeDropper
+    if (!window.EyeDropper) {
+      return;
+    }
+    // @ts-expect-error - ts does not evaluate for window.EyeDropper
+    var eyeDropper = new window.EyeDropper();
+    var abortController = new window.AbortController();
+    eyeDropper.open({
+      signal: abortController.signal
+    }).then(function (result) {
+      var tinyHex = tinycolor(result.sRGBHex);
+      var _tinyHex$toRgb = tinyHex.toRgb(),
+        r = _tinyHex$toRgb.r,
+        g = _tinyHex$toRgb.g,
+        b = _tinyHex$toRgb.b;
+      onSelect("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 1)"));
+    }).catch(function (e) {
+      console.log(e);
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    onClick: getEyeDrop,
+    id: "rbgcp-eyedropper-btn",
+    style: _objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles.rbgcpEyedropperBtn), controlBtnStyles(false, defaultStyles)), {}, {
+      background: '#F5F6FA'
+    })
+  }, /*#__PURE__*/React.createElement(DropperFillIcon, {
+    className: "aurora-w-4 aurora-h-4 aurora-stroke-0"
+  })));
+};
+
+export { EyeDropper };
+//# sourceMappingURL=color_picker_eye_dropper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,sBAAsB,2DAA+D;AACrF,0BAA0B,oFAAwF;AAClH,iCAAiC,0FAA8F;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_overrides/color_picker_gradient_bar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Dodano e.preventDefault() do handleDown
+ * - Wysokosc i szerokosc Handle
+ */
+export declare const Handle: ({ left, i, setDragging }: {
+    left?: number | undefined;
+    i: number;
+    setDragging: (arg0: boolean) => void;
+}) => React.JSX.Element;
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Przeniesiono handleMove na window
+ * - Wysokosc i marginesy GradientBar
+ */
+export declare const GradientBar: () => React.JSX.Element;

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_gradient_bar.js

@@ -0,0 +1,149 @@
+import React, { useRef, useEffect } from 'react';
+import { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { low } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js';
+import { getHandleValue } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
+import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
+import { ColorPickerUtils } from '../../color_picker_utils.js';
+
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Dodano e.preventDefault() do handleDown
+ * - Wysokosc i szerokosc Handle
+ */
+var Handle = function Handle(_ref) {
+  var left = _ref.left,
+    i = _ref.i,
+    setDragging = _ref.setDragging;
+  var _usePicker = usePicker(),
+    colors = _usePicker.colors,
+    selectedColor = _usePicker.selectedColor,
+    squareWidth = _usePicker.squareWidth,
+    defaultStyles = _usePicker.defaultStyles,
+    createGradientStr = _usePicker.createGradientStr;
+  var isSelected = selectedColor === i;
+  var leftMultiplyer = (squareWidth - 18) / 100;
+  var handleDown = function handleDown(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var updated = ColorPickerUtils.updateGradientWithActiveColor(colors, i, colors[i].value);
+    createGradientStr(updated);
+    setDragging(true);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: "gradient-handle-".concat(i),
+    onMouseDown: function onMouseDown(e) {
+      return handleDown(e);
+    },
+    style: _objectSpread2(_objectSpread2({}, defaultStyles.rbgcpGradientHandleWrap), {}, {
+      left: (left || 0) * leftMultiplyer,
+      top: -3
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles.rbgcpGradientHandle), isSelected ? {
+      boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)',
+      border: '2px solid white'
+    } : {}), {}, {
+      width: 16,
+      height: 16
+    })
+  }, isSelected && (/*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 4,
+      height: 4,
+      borderRadius: '100%',
+      background: 'white'
+    }
+  }))));
+};
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Przeniesiono handleMove na window
+ * - Wysokosc i marginesy GradientBar
+ */
+var GradientBar = function GradientBar() {
+  var _usePicker2 = usePicker(),
+    currentColor = _usePicker2.currentColor,
+    createGradientStr = _usePicker2.createGradientStr,
+    colors = _usePicker2.colors,
+    value = _usePicker2.value,
+    handleGradient = _usePicker2.handleGradient,
+    squareWidth = _usePicker2.squareWidth;
+  var barRef = useRef(null);
+  var draggingRef = useRef(false);
+  function force90degLinear(color) {
+    return color.replace(/(radial|linear)-gradient\([^,]+,/, 'linear-gradient(90deg,');
+  }
+  var setDragging = function setDragging(val) {
+    draggingRef.current = val;
+  };
+  var addPoint = function addPoint(e) {
+    var _ref2;
+    var left = getHandleValue(e);
+    var newColors = (_ref2 = [].concat(_toConsumableArray(colors.map(function (c) {
+      return _objectSpread2(_objectSpread2({}, c), {}, {
+        value: low(c)
+      });
+    })), [{
+      value: currentColor,
+      left: left
+    }])) === null || _ref2 === void 0 ? void 0 : _ref2.sort(function (a, b) {
+      return a.left - b.left;
+    });
+    createGradientStr(newColors);
+  };
+  var handleDown = function handleDown(e) {
+    if (draggingRef.current) return;
+    e.preventDefault();
+    e.stopPropagation();
+    addPoint(e);
+    setDragging(true);
+  };
+  useEffect(function () {
+    var handleUp = function handleUp() {
+      setDragging(false);
+    };
+    var handleMove = function handleMove(e) {
+      if (!draggingRef.current || !barRef.current) return;
+      var newEvent = {
+        target: barRef.current,
+        clientX: e.clientX
+      };
+      handleGradient(currentColor, getHandleValue(newEvent));
+    };
+    window.addEventListener('mouseup', handleUp);
+    window.addEventListener('mousemove', handleMove);
+    return function () {
+      window.removeEventListener('mouseup', handleUp);
+      window.removeEventListener('mousemove', handleMove);
+    };
+  }, [currentColor, handleGradient]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "aurora-my-[1px]",
+    style: {
+      width: '100%',
+      position: 'relative'
+    },
+    id: "gradient-bar"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: barRef,
+    style: {
+      height: 10,
+      borderRadius: 10,
+      width: squareWidth,
+      backgroundImage: force90degLinear(value)
+    },
+    onMouseDown: function onMouseDown(e) {
+      return handleDown(e);
+    }
+  }), colors === null || colors === void 0 ? void 0 : colors.map(function (c, i) {
+    return /*#__PURE__*/React.createElement(Handle, {
+      i: i,
+      left: c.left,
+      key: "".concat(i, "-").concat(c),
+      setDragging: setDragging
+    });
+  }));
+};
+
+export { GradientBar, Handle };
+//# sourceMappingURL=color_picker_gradient_bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,oBAAoB,6FAAiG;AACrH,+BAA+B,wFAA4F;AAC3H,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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_overrides/color_picker_gradient_controls.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Zmieniono ikonke smietnika
+ */
+export declare const GradientControls: ({ hideGradientType, hideGradientAngle, hideGradientStop }: {
+    hideGradientType?: boolean | undefined;
+    hideGradientAngle?: boolean | undefined;
+    hideGradientStop?: boolean | undefined;
+}) => React.JSX.Element;