@dreamcommerce/aurora 0.3.18 → 0.3.19

package/build/esm/packages/aurora/src/components/modal/hoc/relative_modal/index.js

@@ -0,0 +1,68 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { __rest, __assign } from '../../../../../../../_virtual/_tslib.js';
+import { createUseStyles } from '../../../../../../../external/react-jss/dist/react-jss.esm.js';
+import { useResize } from '../../../../hooks/use_resize.js';
+import { createPortal } from 'react-dom';
+import cssClasses from '../../../../css/modal/main.module.less.js';
+import Modal from '../../components/modal.js';
+import { calculateRelativePosition, getTransformFromAnimationDirection } from '../../utilities.js';
+import { DEFAULT_TRANSLATE_MOVE } from '../../constants.js';
+
+var useStyles = createUseStyles({
+    modal: {
+        position: 'absolute',
+        visibility: function (_a) {
+            var isVisible = _a.isVisible;
+            return (isVisible ? 'visible' : 'hidden');
+        },
+        opacity: function (_a) {
+            var isVisible = _a.isVisible;
+            return +isVisible;
+        },
+        top: function (_a) {
+            var top = _a.top;
+            return top;
+        },
+        left: function (_a) {
+            var left = _a.left;
+            return left;
+        },
+        transform: getTransformFromAnimationDirection
+    }
+});
+var RelativeModal = function (_a) {
+    var position = _a.position, _b = _a.offset, offset = _b === void 0 ? 0 : _b, _c = _a.transformLength, transformLength = _c === void 0 ? DEFAULT_TRANSLATE_MOVE : _c, children = _a.children, animationDirection = _a.animationDirection, isVisible = _a.isVisible, relativeTo = _a.relativeTo, withBackground = _a.withBackground, rest = __rest(_a, ["position", "offset", "transformLength", "children", "animationDirection", "isVisible", "relativeTo", "withBackground"]);
+    var modalRef = useRef(null);
+    var _d = useState({}), positioning = _d[0], setPosition = _d[1];
+    var classes = useStyles(__assign(__assign({}, positioning), { isVisible: isVisible, transformLength: transformLength, animationDirection: animationDirection }));
+    useEffect(function () {
+        var _a, _b;
+        setPosition(calculateRelativePosition({
+            position: position,
+            relativeRect: (_a = relativeTo === null || relativeTo === void 0 ? void 0 : relativeTo.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
+            modalRect: (_b = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect(),
+            offset: offset,
+            transformLength: transformLength,
+            animationDirection: animationDirection,
+            relativeTo: relativeTo
+        }));
+    }, [relativeTo, animationDirection, position, offset, transformLength, isVisible]);
+    useResize(function () {
+        var _a, _b;
+        setPosition(calculateRelativePosition({
+            position: position,
+            offset: offset,
+            transformLength: transformLength,
+            animationDirection: animationDirection,
+            relativeTo: relativeTo,
+            relativeRect: (_a = relativeTo === null || relativeTo === void 0 ? void 0 : relativeTo.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(),
+            modalRect: (_b = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()
+        }));
+    }, 50);
+    return (React.createElement(React.Fragment, null,
+        createPortal(React.createElement(Modal, __assign({ className: "".concat(classes.modal, " ").concat(isVisible ? cssClasses['modal-window_visible'] : ''), modalRef: modalRef }, rest), children), document.body),
+        isVisible && withBackground && createPortal(React.createElement("div", { className: cssClasses['modal-window-mask'] }), document.body)));
+};
+
+export default RelativeModal;
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/modal/hoc/relative_modal/index.js.map

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IModalProps, IModalComposition } from "./types";
+declare const Modal: FC<IModalProps> & IModalComposition;
+export default Modal;

package/build/esm/packages/aurora/src/components/modal/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import cssClasses from '../../css/modal/main.module.less.js';
+import Content from './components/content.js';
+import Header from './components/header.js';
+import Footer from './components/footer.js';
+
+var Modal = function (_a) {
+    var children = _a.children, className = _a.className, modalRef = _a.modalRef;
+    return (React.createElement("div", { ref: modalRef, className: "".concat(cssClasses['modal-window'], " ").concat(className) },
+        React.createElement("div", { className: cssClasses['modal-window__body'] }, children)));
+};
+Modal.Header = Header;
+Modal.Content = Content;
+Modal.Footer = Footer;
+
+export default Modal;
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/modal/index.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/modal/types.d.ts

@@ -0,0 +1,55 @@
+import { FC, ReactElement, ReactNode, ReactNodeArray, RefObject } from 'react';
+export interface IHeaderProps {
+    title?: string;
+    actions?: ReactElement | ReactNodeArray | ReactNode;
+    closeAction?: () => void;
+}
+export interface IContentProps {
+}
+export interface IFooterProps {
+}
+export interface IModalProps {
+    className?: string;
+    withBackground?: boolean;
+    modalRef?: RefObject<HTMLDivElement>;
+}
+export interface IModalComposition {
+    Header: FC<IHeaderProps>;
+    Footer: FC<IFooterProps>;
+    Content: FC<IContentProps>;
+}
+export interface IAbsoluteModalProps {
+    vPosition?: 'top' | 'middle' | 'bottom';
+    hPosition?: 'left' | 'center' | 'right';
+    animationDirection?: 'bottomTop' | 'topBottom' | 'leftRight' | 'rightLeft';
+    isVisible?: boolean;
+    offset?: number;
+    transformLength?: number;
+    transform?({ isVisible }: {
+        isVisible?: boolean;
+    }): string;
+}
+export interface IRelativeModalProps {
+    position?: 'top' | 'left' | 'bottom' | 'right';
+    animationDirection?: 'bottomTop' | 'topBottom' | 'leftRight' | 'rightLeft';
+    isVisible?: boolean;
+    offset?: number;
+    relativeTo: RefObject<HTMLDivElement>;
+    transformLength?: number;
+    transform?({ isVisible }: {
+        isVisible?: boolean;
+    }): string;
+}
+export interface IPositionState {
+    top?: number;
+    left?: number;
+    bottom?: number;
+    right?: number;
+}
+export interface IAbsoluteCalculation extends IAbsoluteModalProps {
+    modalRect?: DOMRect;
+}
+export interface IRelativeCalculation extends IRelativeModalProps {
+    modalRect?: DOMRect;
+    relativeRect?: DOMRect;
+}

package/build/esm/packages/aurora/src/components/modal/types.js

@@ -0,0 +1,2 @@
+import 'react';
+//# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/components/modal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/modal/types.ts"],"names":[],"mappings":"AAAA,OAAuE,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/modal/utilities.d.ts

@@ -0,0 +1,56 @@
+import { IAbsoluteModalProps, IAbsoluteCalculation, IRelativeCalculation } from "./types";
+/**
+ * Function to get proper css style from props and state
+ * @param animationDirection, taken from props
+ * @param transformLength, taken from state
+ * @param isVisible, taken from state
+ * @param transform, taken from props if it is set then custom transform function is ran
+ * @return css string which is used in styling
+ */
+export declare const getTransformFromAnimationDirection: ({ animationDirection, transformLength, isVisible, transform }: IAbsoluteModalProps) => string;
+/**
+ * Function for relative to check if modal is still in viewport
+ * @param relativeRect, relative rectangle
+ * @param modalRect, modal rectangle
+ * @param offset
+ * @return object of available directions in booleans
+ */
+export declare const availablePositions: ({ relativeRect, modalRect, offset }: {
+    relativeRect?: DOMRect | undefined;
+    modalRect?: DOMRect | undefined;
+    offset?: number | undefined;
+}) => {
+    isLeftPositionPossible: boolean;
+    isRightPositionPossible: boolean;
+    isBottomPositionPossible: boolean;
+    isTopPositionPossible: boolean;
+};
+/**
+ * Function to return left, top, bottom, right css values, which will be used to placed modal
+ * @param position, chosen position of modal
+ * @param transformLength, taken from previously calculated values
+ * @param modalRect, used to calculate available positions and position of modal
+ * @param offset,
+ * @param animationDirection, chosen animation by default "topBottom"
+ * @param relativeRect, used to calculate  available positions and position of modal
+ * @return based on animationPosition and availablePositions css values
+ */
+export declare const calculateRelativePosition: ({ position, modalRect, relativeRect, offset, transformLength, animationDirection }: IRelativeCalculation) => {
+    top: number;
+    left: number;
+};
+/**
+ * @param vPosition, verticalPosition
+ * @param hPosition, horizontalPosition
+ * @param modalRect, used to calculate position
+ * @param offset = 0,
+ * @param transformLength, taken from previously calculated values
+ * @param animationDirection, chosen animation, by default "topBottom"
+ * direction is chosen based on vPosition and hPosition
+ */
+export declare const calculateAbsolutePosition: ({ vPosition, hPosition, modalRect, offset, transformLength, animationDirection }: IAbsoluteCalculation) => {
+    top: number;
+    bottom: undefined;
+    left: number | undefined;
+    right: number | undefined;
+};

package/build/esm/packages/aurora/src/components/modal/utilities.js

@@ -0,0 +1,169 @@
+import 'react';
+
+/**
+ * Function to get proper css style from props and state
+ * @param animationDirection, taken from props
+ * @param transformLength, taken from state
+ * @param isVisible, taken from state
+ * @param transform, taken from props if it is set then custom transform function is ran
+ * @return css string which is used in styling
+ */
+var getTransformFromAnimationDirection = function (_a) {
+    var animationDirection = _a.animationDirection, transformLength = _a.transformLength, isVisible = _a.isVisible, transform = _a.transform;
+    if (transform) {
+        return transform({ isVisible: isVisible });
+    }
+    if (animationDirection === 'bottomTop') {
+        return "translate(0px, ".concat(isVisible ? "-".concat(transformLength, "px") : '0px', ")");
+    }
+    if (animationDirection === 'leftRight') {
+        return "translate(".concat(isVisible ? "".concat(transformLength, "px") : '0px', ", 0px)");
+    }
+    if (animationDirection === 'rightLeft') {
+        return "translate(".concat(isVisible ? "-".concat(transformLength, "px") : '0px', ", 0px)");
+    }
+    return "translate(0px, ".concat(isVisible ? "".concat(transformLength, "px") : '0px', ")");
+};
+/**
+ * Function for relative to check if modal is still in viewport
+ * @param relativeRect, relative rectangle
+ * @param modalRect, modal rectangle
+ * @param offset
+ * @return object of available directions in booleans
+ */
+var availablePositions = function (_a) {
+    var relativeRect = _a.relativeRect, modalRect = _a.modalRect, _b = _a.offset, offset = _b === void 0 ? 0 : _b;
+    var _c = relativeRect || {}, _d = _c.x, x = _d === void 0 ? 0 : _d, _e = _c.y, y = _e === void 0 ? 0 : _e, _f = _c.width, width = _f === void 0 ? 0 : _f, _g = _c.height, height = _g === void 0 ? 0 : _g;
+    var _h = modalRect || {}, _j = _h.width, modalWidth = _j === void 0 ? 0 : _j, _k = _h.height, modalHeight = _k === void 0 ? 0 : _k;
+    return {
+        isLeftPositionPossible: x - modalWidth - offset > 0,
+        isRightPositionPossible: x + width + modalWidth + offset < window.innerWidth,
+        isBottomPositionPossible: y + height + modalHeight + offset < window.innerHeight,
+        isTopPositionPossible: y - modalHeight - offset > 0
+    };
+};
+/**
+ *
+ * @param transformLength
+ * @return values which will used in transform
+ */
+var animationOffsets = function (transformLength) { return ({
+    verticalAnimationOffset: {
+        bottomTop: -transformLength,
+        topBottom: transformLength,
+        leftRight: 0,
+        rightLeft: 0
+    },
+    horizontalAnimationOffset: {
+        bottomTop: 0,
+        topBottom: 0,
+        leftRight: -transformLength,
+        rightLeft: transformLength
+    }
+}); };
+/**
+ * Function to return left, top, bottom, right css values, which will be used to placed modal
+ * @param position, chosen position of modal
+ * @param transformLength, taken from previously calculated values
+ * @param modalRect, used to calculate available positions and position of modal
+ * @param offset,
+ * @param animationDirection, chosen animation by default "topBottom"
+ * @param relativeRect, used to calculate  available positions and position of modal
+ * @return based on animationPosition and availablePositions css values
+ */
+var calculateRelativePosition = function (_a) {
+    var position = _a.position, modalRect = _a.modalRect, relativeRect = _a.relativeRect, _b = _a.offset, offset = _b === void 0 ? 0 : _b, _c = _a.transformLength, transformLength = _c === void 0 ? 0 : _c, _d = _a.animationDirection, animationDirection = _d === void 0 ? 'topBottom' : _d;
+    var _e = animationOffsets(transformLength), verticalAnimationOffset = _e.verticalAnimationOffset, horizontalAnimationOffset = _e.horizontalAnimationOffset;
+    var _f = availablePositions({
+        relativeRect: relativeRect,
+        modalRect: modalRect,
+        offset: offset
+    }), isLeftPositionPossible = _f.isLeftPositionPossible, isRightPositionPossible = _f.isRightPositionPossible, isBottomPositionPossible = _f.isBottomPositionPossible, isTopPositionPossible = _f.isTopPositionPossible;
+    var _g = relativeRect || {}, _h = _g.x, x = _h === void 0 ? 0 : _h, _j = _g.y, y = _j === void 0 ? 0 : _j, _k = _g.width, width = _k === void 0 ? 0 : _k, _l = _g.height, height = _l === void 0 ? 0 : _l;
+    var _m = modalRect || {}, _o = _m.width, modalWidth = _o === void 0 ? 0 : _o, _p = _m.height, modalHeight = _p === void 0 ? 0 : _p;
+    var rightPosition = (position === 'right' && (isRightPositionPossible || !isLeftPositionPossible)) || (position === 'left' && !isLeftPositionPossible);
+    var leftPosition = (position === 'left' && (isLeftPositionPossible || !isRightPositionPossible)) || (position === 'right' && !isRightPositionPossible);
+    var topPosition = (position === 'top' && (isTopPositionPossible || !isBottomPositionPossible)) || (position === 'bottom' && !isBottomPositionPossible);
+    if (rightPosition) {
+        return {
+            top: y - verticalAnimationOffset[animationDirection] - modalHeight / 2 + height / 2,
+            left: x + offset + width + horizontalAnimationOffset[animationDirection]
+        };
+    }
+    if (leftPosition) {
+        return {
+            top: y - verticalAnimationOffset[animationDirection] - modalHeight / 2 + height / 2,
+            left: x - offset - modalWidth + horizontalAnimationOffset[animationDirection]
+        };
+    }
+    if (topPosition) {
+        return {
+            top: y - offset - modalHeight - verticalAnimationOffset[animationDirection],
+            left: x + horizontalAnimationOffset[animationDirection] - modalWidth / 2 + width / 2
+        };
+    }
+    return {
+        top: y + height + offset - verticalAnimationOffset[animationDirection],
+        left: x + horizontalAnimationOffset[animationDirection] - modalWidth / 2 + width / 2
+    };
+};
+/**
+ * @param vPosition, verticalPosition
+ * @param hPosition, horizontalPosition
+ * @param modalRect, used to calculate position
+ * @param offset = 0,
+ * @param transformLength, taken from previously calculated values
+ * @param animationDirection, chosen animation, by default "topBottom"
+ * direction is chosen based on vPosition and hPosition
+ */
+var calculateAbsolutePosition = function (_a) {
+    var _b = _a.vPosition, vPosition = _b === void 0 ? 'middle' : _b, _c = _a.hPosition, hPosition = _c === void 0 ? 'center' : _c, modalRect = _a.modalRect, _d = _a.offset, offset = _d === void 0 ? 0 : _d, _e = _a.transformLength, transformLength = _e === void 0 ? 0 : _e, _f = _a.animationDirection, animationDirection = _f === void 0 ? 'topBottom' : _f;
+    var innerWidth = window.innerWidth, innerHeight = window.innerHeight;
+    var _g = modalRect || {}, _h = _g.width, width = _h === void 0 ? 0 : _h, _j = _g.height, height = _j === void 0 ? 0 : _j;
+    var verticalOffset = {
+        bottomTop: -transformLength,
+        topBottom: transformLength,
+        leftRight: 0,
+        rightLeft: 0
+    };
+    var horizontalOffset = {
+        bottomTop: 0,
+        topBottom: 0,
+        leftRight: -transformLength,
+        rightLeft: transformLength
+    };
+    var verticalPositions = {
+        top: {
+            top: offset - verticalOffset[animationDirection],
+            bottom: undefined
+        },
+        middle: {
+            top: (innerHeight - height) / 2 - verticalOffset[animationDirection],
+            bottom: undefined
+        },
+        bottom: {
+            top: innerHeight - height - verticalOffset[animationDirection],
+            bottom: undefined
+        }
+    };
+    var horizontalPositions = {
+        left: {
+            left: offset + horizontalOffset[animationDirection],
+            right: undefined
+        },
+        center: {
+            left: innerWidth / 2 - width / 2 + horizontalOffset[animationDirection],
+            right: undefined
+        },
+        right: {
+            left: undefined,
+            right: offset + horizontalOffset[animationDirection]
+        }
+    };
+    var _k = verticalPositions[vPosition], top = _k.top, bottom = _k.bottom;
+    var _l = horizontalPositions[hPosition], left = _l.left, right = _l.right;
+    return { top: top, bottom: bottom, left: left, right: right };
+};
+
+export { availablePositions, calculateAbsolutePosition, calculateRelativePosition, getTransformFromAnimationDirection };
+//# sourceMappingURL=utilities.js.map

package/build/esm/packages/aurora/src/components/modal/utilities.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/range/css_classes.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    range: string;
+    rangePointer: string;
+    rangePointerDisabled: string;
+    rangePointerInside: string;
+    rangePointerInsideDisabled: string;
+};
+export default _default;

package/build/esm/packages/aurora/src/components/range/css_classes.js

@@ -0,0 +1,15 @@
+var CSS_RANGE = 'range';
+var CSS_RANGE_POINTER = "".concat(CSS_RANGE, "__pointer");
+var CSS_RANGE_POINTER_DISABLED = CSS_RANGE_POINTER + '_disabled';
+var CSS_RANGE_POINTER_INSIDE = CSS_RANGE_POINTER + '-inside';
+var CSS_RANGE_POINTER_INSIDE_DISABLED = CSS_RANGE_POINTER_INSIDE + '_disabled';
+var CSS_CLASSES = {
+    range: CSS_RANGE,
+    rangePointer: CSS_RANGE_POINTER,
+    rangePointerDisabled: CSS_RANGE_POINTER_DISABLED,
+    rangePointerInside: CSS_RANGE_POINTER_INSIDE,
+    rangePointerInsideDisabled: CSS_RANGE_POINTER_INSIDE_DISABLED
+};
+
+export default CSS_CLASSES;
+//# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/range/css_classes.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;"}

package/build/esm/packages/aurora/src/components/range/index.d.ts

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

package/build/esm/packages/aurora/src/components/range/index.js

@@ -0,0 +1,96 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
+import { getIndicatorPositionFromPosition } from '../../utilities/range/range_mappings.js';
+import { mapMouseEventToPosition, registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents } from '../../utilities/events/event_registration.js';
+import styles from '../../css/range/main.module.less.js';
+import CSS_CLASSES from './css_classes.js';
+import { getPositionFromValue, getValueFromPosition } from './utilities.js';
+
+var useStyles = createUseStyles({
+    pointer: {
+        transform: function (_a) {
+            var left = _a.left;
+            return "translate3d(".concat(left - 10, "px,0px,0px)");
+        },
+        background: function (_a) {
+            var isDragged = _a.isDragged, isDisabled = _a.isDisabled;
+            if (isDisabled) {
+                return '#ececec';
+            }
+            return isDragged ? "rgb(19, 92, 200)" : 'none';
+        },
+        '&:hover': {
+            background: function (_a) {
+                var isDragged = _a.isDragged, isDisabled = _a.isDisabled;
+                if (isDisabled) {
+                    return '#ececec';
+                }
+                return isDragged ? "rgb(19, 92, 200)" : 'rgba(19, 92, 200, 0.2)';
+            }
+        }
+    }
+});
+var Range = function (_a) {
+    var initialValue = _a.initialValue, _b = _a.max, max = _b === void 0 ? 100 : _b, _c = _a.min, min = _c === void 0 ? 0 : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, onChange = _a.onChange, isDisabled = _a.isDisabled, name = _a.name, _e = _a.orientation, orientation = _e === void 0 ? 'horizontal' : _e;
+    var rangeRef = useRef(null);
+    var _f = useState(initialValue || min), value = _f[0], setValue = _f[1];
+    var _g = useState(false), isDragged = _g[0], setDragged = _g[1];
+    var _h = useState({ top: 0, left: 0 }), rangePosition = _h[0], setRangePosition = _h[1];
+    var classes = useStyles({ top: rangePosition.top, left: rangePosition.left, isDragged: isDragged, isDisabled: isDisabled });
+    useEffect(function () {
+        if (rangeRef) {
+            var _a = getPositionFromValue({ value: initialValue || min, max: max, min: min, rangeRef: rangeRef }), top_1 = _a.top, left = _a.left;
+            if (orientation === 'horizontal') {
+                setRangePosition({ left: left, top: 0 });
+            }
+            else {
+                setRangePosition({ left: 0, top: top_1 });
+            }
+        }
+    }, [initialValue, max, min, orientation, rangeRef]);
+    var onRangeChangeEvent = function (position) {
+        if (!(rangeRef === null || rangeRef === void 0 ? void 0 : rangeRef.current) || isDisabled) {
+            return;
+        }
+        var _a = getIndicatorPositionFromPosition({
+            elementRect: rangeRef.current.getBoundingClientRect(),
+            position: position
+        }), positionY = _a.positionY, positionX = _a.positionX;
+        setRangePosition({ top: positionY, left: positionX });
+        var newValue = getValueFromPosition({
+            position: position,
+            rangeRectangle: rangeRef.current.getBoundingClientRect(),
+            max: max,
+            min: min,
+            step: step
+        });
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            value: newValue,
+            prevValue: value
+        });
+        setValue(newValue);
+    };
+    var onSliderDown = function (event) {
+        if (!(rangeRef === null || rangeRef === void 0 ? void 0 : rangeRef.current)) {
+            return;
+        }
+        setDragged(true);
+        onRangeChangeEvent(mapMouseEventToPosition(event));
+        var onEndListener = function () { return setDragged(false); };
+        registerOnMouseEvents(onRangeChangeEvent, onEndListener);
+    };
+    var onTouchStart = function (event) {
+        if (!(rangeRef === null || rangeRef === void 0 ? void 0 : rangeRef.current)) {
+            return;
+        }
+        onRangeChangeEvent(mapTouchEventToPosition(event));
+        registerOnTouchEvents(onRangeChangeEvent);
+    };
+    return (React.createElement("div", { className: "".concat(styles[CSS_CLASSES.range], " ").concat(isDisabled ? styles[CSS_CLASSES.rangePointerDisabled] : ''), ref: rangeRef, onMouseDown: onSliderDown, onTouchStart: onTouchStart },
+        React.createElement("div", { className: "".concat(styles[CSS_CLASSES.rangePointer], " ").concat(classes.pointer), onDrag: onRangeChangeEvent, onTouchStart: onTouchStart },
+            React.createElement("div", { className: "".concat(styles[CSS_CLASSES.rangePointerInside], " ").concat(isDisabled ? styles[CSS_CLASSES.rangePointerInsideDisabled] : '') })),
+        name && React.createElement("input", { type: "hidden", name: name, value: value })));
+};
+
+export default Range;
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/range/index.js.map

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

@@ -0,0 +1,14 @@
+export interface IRange {
+    id?: string;
+    name?: string;
+    orientation?: string;
+    initialValue?: number;
+    max?: number;
+    min?: number;
+    step?: number;
+    isDisabled?: boolean;
+    onChange?: ({ prevValue, value }: {
+        prevValue: number;
+        value: number;
+    }) => void;
+}

package/build/esm/packages/aurora/src/components/range/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/components/range/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/range/types.ts"],"names":[],"mappings":""}

package/build/esm/packages/aurora/src/components/range/utilities.d.ts

@@ -0,0 +1,19 @@
+import { IPosition } from "../color_picker/types";
+import { RefObject } from 'react';
+export declare const getPositionFromValue: ({ value, rangeRef, max, min }: {
+    rangeRef?: RefObject<HTMLDivElement> | undefined;
+    value: number;
+    max: number;
+    min: number;
+}) => {
+    left: number;
+    top: number;
+};
+export declare const getValueFromPosition: ({ rangeRectangle, position, rotation, step, max, min }: {
+    rangeRectangle: DOMRect;
+    position: IPosition;
+    rotation?: string | undefined;
+    step?: number | undefined;
+    max?: number | undefined;
+    min?: number | undefined;
+}) => number;

package/build/esm/packages/aurora/src/components/range/utilities.js

@@ -0,0 +1,31 @@
+import 'react';
+import { constrainToRange } from '../../utilities/range/range_mappings.js';
+
+var getPositionFromValue = function (_a) {
+    var _b;
+    var value = _a.value, rangeRef = _a.rangeRef, max = _a.max, min = _a.min;
+    var _c = ((_b = rangeRef === null || rangeRef === void 0 ? void 0 : rangeRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || {}, _d = _c.width, width = _d === void 0 ? 0 : _d, _e = _c.height, height = _e === void 0 ? 0 : _e;
+    var difference = max - min;
+    return {
+        left: constrainToRange(((value - min) / difference) * width, 0, width),
+        top: constrainToRange(((value - min) / difference) * height, 0, height)
+    };
+};
+var getValueFromPosition = function (_a) {
+    var _b, _c;
+    var rangeRectangle = _a.rangeRectangle, position = _a.position, _d = _a.rotation, rotation = _d === void 0 ? 'horizontal' : _d, _e = _a.step, step = _e === void 0 ? 1 : _e, _f = _a.max, max = _f === void 0 ? 100 : _f, _g = _a.min, min = _g === void 0 ? 0 : _g;
+    var clientY = position.clientY, clientX = position.clientX;
+    var top = rangeRectangle.top, height = rangeRectangle.height, width = rangeRectangle.width, left = rangeRectangle.left;
+    var difference = max - min;
+    var distance = rotation === 'horizontal' ? constrainToRange(clientX - left, 0, width) : constrainToRange(clientY - top, 0, height);
+    var rawValue = rotation === 'horizontal' ? (distance * difference) / width : (distance * difference) / height;
+    var flooredValue = Math.floor(rawValue / step) * step;
+    var ceiledValue = Math.ceil(rawValue / step) * step + step;
+    var value = ceiledValue - rawValue < step / 2 ? flooredValue : ceiledValue;
+    var fractionDigits = ((_c = (_b = "".concat(step).split('.')) === null || _b === void 0 ? void 0 : _b[1]) === null || _c === void 0 ? void 0 : _c.length) || 0;
+    var fixedValue = (value + min - step).toFixed(fractionDigits);
+    return Number(fixedValue);
+};
+
+export { getPositionFromValue, getValueFromPosition };
+//# sourceMappingURL=utilities.js.map

package/build/esm/packages/aurora/src/components/range/utilities.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/spacing/index.d.ts

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

package/build/esm/packages/aurora/src/components/spacing/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import cssClasses from '../../css/spacing/main.module.less.js';
+
+var getClassNames = function (props) {
+    var classes = [];
+    for (var _i = 0, _a = Object.entries(props); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], value = _b[1];
+        if (typeof value === 'number') {
+            var cssClassName = "".concat(key, "_").concat(value);
+            var className = cssClasses[cssClassName];
+            if (className) {
+                classes.push(className);
+            }
+        }
+    }
+    return classes.join(' ');
+};
+var Spacing = function (props) {
+    return React.createElement("".concat(props.as), {
+        className: getClassNames(props)
+    }, props.children);
+};
+
+export default Spacing;
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/spacing/index.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}