@dreamcommerce/aurora 3.0.0-32 → 3.0.0-321

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

@@ -0,0 +1,144 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
+import { config } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/constants.js';
+import { computeSquareXY, computePickerPosition } 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 usePaintSquare from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/usePaintSquare.js';
+
+var crossSize = config.crossSize;
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Przeniesiono handleMove na window
+ * - Usunieto throttle ktore i tak nie dzialalo -.-
+ */
+var Square = function Square() {
+  var _usePicker = usePicker(),
+    hc = _usePicker.hc,
+    defaultStyles = _usePicker.defaultStyles,
+    squareWidth = _usePicker.squareWidth,
+    squareHeight = _usePicker.squareHeight,
+    handleChange = _usePicker.handleChange;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dragging = _useState2[0],
+    setDragging = _useState2[1];
+  var canvas = useRef(null);
+  var _computeSquareXY = computeSquareXY(hc === null || hc === void 0 ? void 0 : hc.s, (hc === null || hc === void 0 ? void 0 : hc.v) * 100, squareWidth, squareHeight),
+    _computeSquareXY2 = _slicedToArray(_computeSquareXY, 2),
+    x = _computeSquareXY2[0],
+    y = _computeSquareXY2[1];
+  var _useState3 = useState({
+      x: x,
+      y: y
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragPos = _useState4[0],
+    setDragPos = _useState4[1];
+  var squareRef = useRef(null);
+  usePaintSquare(canvas, hc === null || hc === void 0 ? void 0 : hc.h, squareWidth, squareHeight);
+  useEffect(function () {
+    if (dragging) return;
+    setDragPos({
+      x: (hc === null || hc === void 0 ? void 0 : hc.v) === 0 ? dragPos.x : x,
+      y: y
+    });
+  }, [x, y]);
+  var onMouseMove = useCallback(function (e) {
+    var _computePickerPositio = computePickerPosition(e),
+      _computePickerPositio2 = _slicedToArray(_computePickerPositio, 2),
+      x = _computePickerPositio2[0],
+      y = _computePickerPositio2[1];
+    if (x && y) {
+      var x1 = Math.min(x + crossSize / 2, squareWidth - 1);
+      var y1 = Math.min(y + crossSize / 2, squareHeight - 1);
+      var newS = x1 / squareWidth * 100;
+      var newY = 100 - y1 / squareHeight * 100;
+      setDragPos({
+        x: newY === 0 ? dragPos === null || dragPos === void 0 ? void 0 : dragPos.x : x,
+        y: y
+      });
+      var updated = tinycolor("hsva(".concat(hc === null || hc === void 0 ? void 0 : hc.h, ", ").concat(newS, "%, ").concat(newY, "%, ").concat(hc === null || hc === void 0 ? void 0 : hc.a, ")"));
+      handleChange(updated.toRgbString());
+    }
+  }, [dragPos.x, handleChange, hc.a, hc.h, squareHeight, squareWidth]);
+  var handleColor = function handleColor(e) {
+    onMouseMove(e);
+  };
+  var stopDragging = function stopDragging() {
+    setDragging(false);
+  };
+  var handleMove = useCallback(function (e) {
+    if (!dragging) return;
+    var newEvent = {
+      target: squareRef.current,
+      clientX: e.clientX,
+      clientY: e.clientY,
+      touches: e.touches
+    };
+    onMouseMove(newEvent);
+  }, [dragging, onMouseMove]);
+  var handleClick = function handleClick(e) {
+    if (dragging) return;
+    handleColor(e);
+  };
+  var handleMouseDown = function handleMouseDown() {
+    setDragging(true);
+  };
+  var handleCanvasDown = function handleCanvasDown(e) {
+    setDragging(true);
+    handleColor(e);
+  };
+  useEffect(function () {
+    var handleUp = function handleUp() {
+      stopDragging();
+    };
+    window.addEventListener('mouseup', handleUp);
+    window.addEventListener('mousemove', handleMove);
+    return function () {
+      window.removeEventListener('mouseup', handleUp);
+      window.removeEventListener('mousemove', handleMove);
+    };
+  }, [handleMove]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'relative'
+    },
+    className: "aurora-cursor-pointer"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: squareRef,
+    onMouseUp: stopDragging,
+    onTouchEnd: stopDragging,
+    onMouseDown: handleCanvasDown,
+    onTouchStart: handleCanvasDown,
+    style: {
+      position: 'relative',
+      cursor: 'ew-cross'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles.rbgcpHandle), {}, {
+      transform: "translate(".concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.x) || 0, "px, ").concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.y) || 0, "px)")
+    }, dragging ? {
+      transition: ''
+    } : {}), {}, {
+      width: 16,
+      height: 16
+    }),
+    onMouseDown: handleMouseDown
+  }), /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread2(_objectSpread2({}, defaultStyles.rbgcpCanvasWrapper), {}, {
+      height: squareHeight
+    }),
+    onClick: function onClick(e) {
+      return handleClick(e);
+    }
+  }, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvas,
+    id: "paintSquare",
+    width: "".concat(squareWidth, "px"),
+    height: "".concat(squareHeight, "px")
+  }))));
+};
+
+export { Square };
+//# sourceMappingURL=color_picker_square.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,sBAAsB,2DAA+D;AACrF,uBAAuB,sFAA0F;AACjH,uDAAuD,wFAA4F;AACnJ,0BAA0B,oFAAwF;AAClH,2BAA2B,iGAAqG;AAChI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ColorPickerShades: () => React.JSX.Element;

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import { ColorPickerSwatch } from './color_picker_swatch.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
+
+var ColorPickerShades = function ColorPickerShades() {
+  var _useColorPicker = useColorPicker(),
+    hslArr = _useColorPicker.hslArr,
+    setColor = _useColorPicker.setColor,
+    onPickShade = _useColorPicker.onPickShade;
+  var _useTranslation = useTranslation(),
+    _useTranslation2 = _slicedToArray(_useTranslation, 1),
+    t = _useTranslation2[0];
+  var _hslArr = _slicedToArray(hslArr, 2),
+    h = _hslArr[0],
+    s = _hslArr[1];
+  var shades = [{
+    h: h,
+    s: s,
+    l: 95
+  }, {
+    h: h,
+    s: s,
+    l: 90
+  }, {
+    h: h,
+    s: s,
+    l: 80
+  }, {
+    h: h,
+    s: s,
+    l: 70
+  }, {
+    h: h,
+    s: s,
+    l: 60
+  }, {
+    h: h,
+    s: s,
+    l: 50
+  }, {
+    h: h,
+    s: s,
+    l: 40
+  }, {
+    h: h,
+    s: s,
+    l: 30
+  }, {
+    h: h,
+    s: s,
+    l: 20
+  }, {
+    h: h,
+    s: s,
+    l: 10
+  }, {
+    h: h,
+    s: s,
+    l: 5
+  }];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "aurora-pt-0.5"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-items-center aurora-justify-between aurora-mb-1 aurora-text"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "aurora-text-xs aurora-font-medium"
+  }, "".concat(t('Shades of color')))), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-grid aurora-grid-cols-12 aurora-gap-1"
+  }, shades.map(function (shade, index) {
+    var colorTiny = ColorPickerUtils.getTinyColorInstance(shade);
+    var colorHex = ColorPickerUtils.getHexValue(colorTiny);
+    var handleOnClick = function handleOnClick() {
+      setColor(colorHex);
+      onPickShade === null || onPickShade === void 0 ? void 0 : onPickShade(colorHex);
+    };
+    return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+      className: "aurora-cursor-pointer",
+      size: "small",
+      onClick: handleOnClick,
+      key: "".concat(shade, "-").concat(index),
+      color: colorHex,
+      cssColor: ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
+    });
+  })));
+};
+
+export { ColorPickerShades };
+//# sourceMappingURL=color_picker_shades.js.map

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

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

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

@@ -0,0 +1,13 @@
+import { COLOR_PICKER_SWATCH_SIZES } from '../color_picker_constants';
+import { ColorPickerColorTypes } from '../color_picker_types';
+import React from 'react';
+interface IColorPickerSwatchProps {
+    color: string;
+    cssColor: string;
+    size?: typeof COLOR_PICKER_SWATCH_SIZES[keyof typeof COLOR_PICKER_SWATCH_SIZES];
+    hasActiveBorder?: boolean;
+    onClick?: (color: ColorPickerColorTypes['hex']) => void;
+    className?: string;
+}
+export declare const ColorPickerSwatch: React.FC<IColorPickerSwatchProps>;
+export {};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { cn } from '../../../utilities/cn.js';
+import { COLOR_PICKER_SWATCH_SIZES } from '../color_picker_constants.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import tinycolor from '../../../../../../external/tinycolor2/esm/tinycolor.js';
+
+var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
+  var color = _ref.color,
+    cssColor = _ref.cssColor,
+    size = _ref.size,
+    hasActiveBorder = _ref.hasActiveBorder,
+    onClick = _ref.onClick,
+    className = _ref.className;
+  var _useColorPicker = useColorPicker(),
+    activeColor = _useColorPicker.color;
+  var handleOnClick = function handleOnClick() {
+    onClick === null || onClick === void 0 ? void 0 : onClick(color);
+  };
+  var shouldApplyActiveBorder = hasActiveBorder && tinycolor(activeColor).toHex() === color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn("color-picker__swatch aurora-relative aurora-border aurora-rounded-4 aurora-overflow-hidden hover:aurora-border-2 hover:aurora-border-strong", {
+      'aurora-w-4 aurora-h-4': size === COLOR_PICKER_SWATCH_SIZES.small,
+      'aurora-w-7 aurora-h-7': size === COLOR_PICKER_SWATCH_SIZES.big,
+      '!aurora-border-active aurora-border-2': shouldApplyActiveBorder
+    }, className),
+    onClick: handleOnClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-absolute aurora-inset-y-0 aurora-inset-x-0 aurora-shadow-s",
+    style: {
+      background: "".concat(cssColor)
+    }
+  }));
+};
+
+export { ColorPickerSwatch };
+//# sourceMappingURL=color_picker_swatch.js.map

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IColorPickerColorVariablesType } from '../color_picker_types';
+interface IColorPickerVariablesProps {
+    variables: IColorPickerColorVariablesType;
+}
+export declare const ColorPickerVariables: React.FC<IColorPickerVariablesProps>;
+export {};

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

@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.js';
+import { cn } from '../../../utilities/cn.js';
+import { Typography } from '../../typography/typography.js';
+import { Tooltip } from '../../tooltip/tooltip.js';
+import { TooltipTrigger } from '../../tooltip/components/tooltip_trigger.js';
+import { TooltipContent } from '../../tooltip/components/tooltip_content.js';
+import { TooltipProvider } from '../../tooltip/context/tooltip_provider.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import { ColorPickerSwatch } from './color_picker_swatch.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
+import { ArrowDownSFillIcon } from '../../../assets/icons/arrow_down_s_fill.js';
+
+var ColorPickerVariables = function ColorPickerVariables(_ref) {
+  var variables = _ref.variables;
+  var _useColorPicker = useColorPicker(),
+    setColor = _useColorPicker.setColor;
+  var _useTranslation = useTranslation(),
+    _useTranslation2 = _slicedToArray(_useTranslation, 1),
+    t = _useTranslation2[0];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var primary = variables.primary,
+    secondary = variables.secondary,
+    neutral = variables.neutral;
+  var primaryShades = ColorPickerUtils.getVariableShades({
+    color: primary.value,
+    name: primary.name
+  });
+  var secondaryShades = ColorPickerUtils.getVariableShades({
+    color: secondary.value,
+    name: secondary.name
+  });
+  var neutralShades = ColorPickerUtils.getVariableShades({
+    color: neutral.value,
+    name: neutral.name
+  });
+  var allShades = [].concat(_toConsumableArray(primaryShades), _toConsumableArray(secondaryShades), _toConsumableArray(neutralShades));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "aurora-mt-3.5"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-items-center aurora-justify-between aurora-mb-1 aurora-text aurora-cursor-pointer",
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "aurora-text-xs aurora-font-medium"
+  }, "".concat(t('Theme colors'))), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-items-start aurora-justify-center aurora-h-4 aurora-w-4"
+  }, /*#__PURE__*/React.createElement(ArrowDownSFillIcon, {
+    className: cn('aurora-h-full aurora-w-full', isOpen && 'aurora-rotate-180')
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-grid aurora-grid-cols-12 aurora-gap-1"
+  }, Object.values(variables).map(function (variable, index) {
+    var colorTiny = ColorPickerUtils.getTinyColorInstance(variable.value);
+    var colorHex = ColorPickerUtils.getHexValue(colorTiny);
+    var handleOnClick = function handleOnClick() {
+      return setColor(colorHex);
+    };
+    return /*#__PURE__*/React.createElement(TooltipProvider, {
+      key: "".concat(variable, "-").concat(index)
+    }, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+      className: "aurora-cursor-pointer",
+      size: "small",
+      onClick: handleOnClick,
+      color: colorHex,
+      cssColor: ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
+    })), /*#__PURE__*/React.createElement(TooltipContent, {
+      variant: "dark"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      size: "xs",
+      weight: "medium",
+      color: CSS_TEXT_COLOR_TOKENS.inverse
+    }, "".concat(t(variable.name))))));
+  })), isOpen && (/*#__PURE__*/React.createElement("div", {
+    className: "aurora-grid aurora-grid-cols-12 aurora-gap-1 aurora-mt-3"
+  }, allShades.map(function (variable, index) {
+    var colorTiny = ColorPickerUtils.getTinyColorInstance(variable.value);
+    var colorHex = ColorPickerUtils.getHexValue(colorTiny);
+    var handleOnClick = function handleOnClick() {
+      return setColor(colorHex, variable.name);
+    };
+    return /*#__PURE__*/React.createElement(TooltipProvider, {
+      key: "".concat(variable, "-").concat(index)
+    }, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+      className: "aurora-cursor-pointer",
+      size: "small",
+      onClick: handleOnClick,
+      color: colorHex,
+      cssColor: ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
+    })), /*#__PURE__*/React.createElement(TooltipContent, {
+      variant: "dark"
+    }, /*#__PURE__*/React.createElement(Typography, {
+      size: "xs",
+      weight: "medium",
+      color: CSS_TEXT_COLOR_TOKENS.inverse
+    }, "".concat(t(variable.name))))));
+  }))));
+};
+
+export { ColorPickerVariables };
+//# sourceMappingURL=color_picker_variables.js.map

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

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CurrentColorPreview: () => React.JSX.Element;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+
+var CurrentColorPreview = function CurrentColorPreview() {
+  var _useColorPicker = useColorPicker(),
+    color = _useColorPicker.color;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "aurora-w-6 aurora-h-6 aurora-border aurora-rounded-4",
+    "aria-label": "color picker current color value",
+    style: {
+      background: color
+    }
+  });
+};
+
+export { CurrentColorPreview };
+//# sourceMappingURL=current_color_preview.js.map

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

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

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

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

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+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_picker_input.js';
+import { PopoverContent } from '../../popover/components/popover_content.js';
+
+var _excluded = ["id", "name", "errors", "disabled", "className", "children", "triggerClassName"];
+var ColorPickerPure = function ColorPickerPure(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    errors = _ref.errors,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    children = _ref.children,
+    triggerClassName = _ref.triggerClassName,
+    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);
+  };
+  return /*#__PURE__*/React.createElement(Popover, {
+    open: isColorPickerOpened,
+    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(ev) {
+      ev.preventDefault();
+      setIsColorPickerOpened(true);
+    },
+    disabled: disabled,
+    className: cn('aurora-w-full', triggerClassName)
+  }, !children && (/*#__PURE__*/React.createElement(ColorPickerInput, {
+    id: id,
+    name: name,
+    errors: errors,
+    disabled: disabled,
+    preElement: /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+      color: color,
+      cssColor: color,
+      size: "big"
+    })
+  })), 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))));
+};
+
+export default ColorPickerPure;
+//# sourceMappingURL=pure_color_picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;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/color_picker/hooks/setup_color_picker.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { IColorPickerColor, IColorPickerColorVariables, TGradientType } from '../color_picker_types';
+export declare type ColorPickerHookProps = {
+    value?: string;
+    onChange?: (color: IColorPickerColor) => void;
+    onCancel?: () => void;
+    onSave?: (color: IColorPickerColor) => void;
+    colorVariables?: IColorPickerColorVariables;
+    withGradient?: boolean;
+};
+declare const useSetupColorPicker: ({ value, onChange, onCancel, onSave, colorVariables, withGradient: isWithGradient }: ColorPickerHookProps) => {
+    color: string;
+    previousSolidColor: string;
+    previousGradientColor: string;
+    setColor: (newColor: string, shadeName?: string) => void;
+    hex: string;
+    hslArr: number[];
+    handleOnChangeAlpha: (value: number) => void;
+    alpha: number;
+    rgbaArr: number[];
+    setR: (newR: number) => void;
+    setG: (newG: number) => void;
+    setB: (newB: number) => void;
+    handleCancel: () => void;
+    handleSave: () => void;
+    colorVariables: IColorPickerColorVariables | undefined;
+    isCurrentValueGradient: boolean;
+    setSolid: (value?: string) => void;
+    setRadial: (value?: string) => void;
+    setLinear: (value?: string) => void;
+    gradientType: TGradientType;
+    withGradient: boolean;
+    isColorPickerOpened: boolean;
+    setIsColorPickerOpened: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    typedInputValue: string;
+    setTypedInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    isColorPickerCurrentlyUsed: boolean;
+    setIsColorPickerCurrentlyUsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    degrees: number;
+    shadeName: string;
+};
+export default useSetupColorPicker;