@helpdice/ui 1.0.1 → 1.0.2

package/esm/shared/dropdown.js

@@ -0,0 +1,99 @@
+"use client";
+
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import usePortal from '../utils/use-portal';
+import useResize from '../utils/use-resize';
+import CssTransition from './css-transition';
+import useClickAnyWhere from '../utils/use-click-anywhere';
+import useDOMObserver from '../utils/use-dom-observer';
+import useWarning from '../utils/use-warning';
+import { getRefRect } from '../utils/layouts';
+import useClasses from '../use-classes';
+var defaultRect = {
+  top: -1000,
+  left: -1000,
+  right: -1000,
+  width: 0
+};
+var Dropdown = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children,
+    parent = _ref.parent,
+    visible = _ref.visible,
+    disableMatchWidth = _ref.disableMatchWidth,
+    getPopupContainer = _ref.getPopupContainer;
+  var el = usePortal('dropdown', getPopupContainer);
+  var _useState = useState(defaultRect),
+    _useState2 = _slicedToArray(_useState, 2),
+    rect = _useState2[0],
+    setRect = _useState2[1];
+  var classes = useClasses('dropdown', disableMatchWidth ? 'disable-match' : 'width-match');
+  if (!parent) return null;
+
+  /* istanbul ignore next */
+  if (process.env.NODE_ENV !== 'production') {
+    if (getPopupContainer && getPopupContainer()) {
+      var _el = getPopupContainer();
+      var style = window.getComputedStyle(_el);
+      if (style.position === 'static') {
+        useWarning('The element specified by "getPopupContainer" must have "position" set.');
+      }
+    }
+  }
+  var updateRect = function updateRect() {
+    var _getRefRect = getRefRect(parent, getPopupContainer),
+      top = _getRefRect.top,
+      left = _getRefRect.left,
+      right = _getRefRect.right,
+      nativeWidth = _getRefRect.width;
+    setRect({
+      top: top,
+      left: left,
+      right: right,
+      width: nativeWidth
+    });
+  };
+  useResize(updateRect);
+  useClickAnyWhere(function () {
+    var _getRefRect2 = getRefRect(parent, getPopupContainer),
+      top = _getRefRect2.top,
+      left = _getRefRect2.left;
+    var shouldUpdatePosition = top !== rect.top || left !== rect.left;
+    if (!shouldUpdatePosition) return;
+    updateRect();
+  });
+  useDOMObserver(parent, function () {
+    updateRect();
+  });
+  useEffect(function () {
+    if (!parent || !parent.current) return;
+    parent.current.addEventListener('mouseenter', updateRect);
+    /* istanbul ignore next */
+    return function () {
+      if (!parent || !parent.current) return;
+      parent.current.removeEventListener('mouseenter', updateRect);
+    };
+  }, [parent]);
+  var clickHandler = function clickHandler(event) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+  };
+  var mouseDownHandler = function mouseDownHandler(event) {
+    event.preventDefault();
+  };
+  if (!el) return null;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(CssTransition, {
+    visible: visible
+  }, /*#__PURE__*/React.createElement("div", {
+    onClick: clickHandler,
+    onMouseDown: mouseDownHandler,
+    className: _JSXStyle.dynamic([["1644673105", [rect.top + 2, rect.left, rect.width, rect.width]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1644673105",
+    dynamic: [rect.top + 2, rect.left, rect.width, rect.width]
+  }, ".dropdown.__jsx-style-dynamic-selector{position:absolute;top:".concat(rect.top + 2, "px;left:").concat(rect.left, "px;z-index:1100;}.width-match.__jsx-style-dynamic-selector{width:").concat(rect.width, "px;}.disable-match.__jsx-style-dynamic-selector{min-width:").concat(rect.width, "px;}")))), el);
+});
+export default Dropdown;

package/esm/shared/ellipsis.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type EllipsisProps = {
+    height: string;
+};
+declare const _default: React.NamedExoticComponent<React.PropsWithChildren<EllipsisProps>>;
+export default _default;

package/esm/shared/ellipsis.js

@@ -0,0 +1,13 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+var Ellipsis = function Ellipsis(_ref) {
+  var children = _ref.children,
+    height = _ref.height;
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["822089635", [height]]])
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "822089635",
+    dynamic: [height]
+  }, "span.__jsx-style-dynamic-selector{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:".concat(height, ";min-width:0;}")));
+};
+export default /*#__PURE__*/React.memo(Ellipsis);

package/esm/shared/expand.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ExpandProps = {
+    isExpanded?: boolean;
+    delay?: number;
+};
+declare const Expand: React.FC<React.PropsWithChildren<ExpandProps>>;
+export default Expand;

package/esm/shared/expand.js

@@ -0,0 +1,86 @@
+"use client";
+
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useRef, useState } from 'react';
+import useRealShape from '../utils/use-real-shape';
+import useClasses from '../use-classes';
+var Expand = function Expand(_ref) {
+  var _ref$isExpanded = _ref.isExpanded,
+    isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 200 : _ref$delay,
+    children = _ref.children;
+  var _useState = useState(isExpanded ? 'auto' : '0'),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  var _useState3 = useState(isExpanded),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selfExpanded = _useState4[0],
+    setSelfExpanded = _useState4[1];
+  var _useState5 = useState(isExpanded),
+    _useState6 = _slicedToArray(_useState5, 2),
+    visible = _useState6[0],
+    setVisible = _useState6[1];
+  var contentRef = useRef(null);
+  var entryTimer = useRef();
+  var leaveTimer = useRef();
+  var resetTimer = useRef();
+  var _useRealShape = useRealShape(contentRef),
+    _useRealShape2 = _slicedToArray(_useRealShape, 2),
+    state = _useRealShape2[0],
+    updateShape = _useRealShape2[1];
+  var classes = useClasses('container', {
+    expanded: selfExpanded
+  });
+  useEffect(function () {
+    return setHeight("".concat(state.height, "px"));
+  }, [state.height]);
+  useEffect(function () {
+    // show element or reset height.
+    // force an update once manually, even if the element does not change.
+    // (the height of the element might be "auto")
+    if (isExpanded) {
+      setVisible(isExpanded);
+    } else {
+      updateShape();
+      setHeight("".concat(state.height, "px"));
+    }
+
+    // show expand animation
+    entryTimer.current = window.setTimeout(function () {
+      setSelfExpanded(isExpanded);
+      clearTimeout(entryTimer.current);
+    }, 30);
+
+    // Reset height after animation
+    if (isExpanded) {
+      resetTimer.current = window.setTimeout(function () {
+        setHeight('auto');
+        clearTimeout(resetTimer.current);
+      }, delay);
+    } else {
+      leaveTimer.current = window.setTimeout(function () {
+        setVisible(isExpanded);
+        clearTimeout(leaveTimer.current);
+      }, delay / 2);
+    }
+    return function () {
+      clearTimeout(entryTimer.current);
+      clearTimeout(leaveTimer.current);
+      clearTimeout(resetTimer.current);
+    };
+  }, [isExpanded]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: _JSXStyle.dynamic([["1918690829", [visible ? 'visible' : 'hidden', delay, height]]]) + " " + "content"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1918690829",
+    dynamic: [visible ? 'visible' : 'hidden', delay, height]
+  }, ".container.__jsx-style-dynamic-selector{padding:0;margin:0;height:0;overflow:hidden;visibility:".concat(visible ? 'visible' : 'hidden', ";-webkit-transition:height ").concat(delay, "ms ease;transition:height ").concat(delay, "ms ease;}.expanded.__jsx-style-dynamic-selector{height:").concat(height, ";visibility:visible;}")));
+};
+Expand.displayName = 'Expand';
+export default Expand;

package/esm/shared/highlight.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactiveDomReact } from "../utils/layouts";
+type Props = {
+    rect: ReactiveDomReact;
+    visible?: boolean;
+    hoverHeightRatio?: number;
+    hoverWidthRatio?: number;
+    activeOpacity?: number;
+};
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type HighlightProps = Props & NativeAttrs;
+declare const Highlight: React.FC<HighlightProps>;
+export default Highlight;

package/esm/shared/highlight.js

@@ -0,0 +1,46 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["rect", "visible", "hoverHeightRatio", "hoverWidthRatio", "activeOpacity", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo, useRef } from 'react';
+import { isUnplacedRect } from '../utils/layouts';
+import usePrevious from '../utils/use-previous';
+import useTheme from '../use-theme';
+import useClasses from '../use-classes';
+var Highlight = function Highlight(_ref) {
+  var rect = _ref.rect,
+    visible = _ref.visible,
+    _ref$hoverHeightRatio = _ref.hoverHeightRatio,
+    hoverHeightRatio = _ref$hoverHeightRatio === void 0 ? 1 : _ref$hoverHeightRatio,
+    _ref$hoverWidthRatio = _ref.hoverWidthRatio,
+    hoverWidthRatio = _ref$hoverWidthRatio === void 0 ? 1 : _ref$hoverWidthRatio,
+    _ref$activeOpacity = _ref.activeOpacity,
+    activeOpacity = _ref$activeOpacity === void 0 ? 0.8 : _ref$activeOpacity,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var ref = useRef(null);
+  var isFirstVisible = usePrevious(isUnplacedRect(rect));
+  var position = useMemo(function () {
+    var width = rect.width * hoverWidthRatio;
+    var height = rect.height * hoverHeightRatio;
+    return {
+      width: "".concat(width, "px"),
+      left: "".concat(rect.left + (rect.width - width) / 2, "px"),
+      height: "".concat(height, "px"),
+      top: "".concat(rect.elementTop + (rect.height - height) / 2, "px"),
+      transition: isFirstVisible ? 'opacity' : 'opacity, width, left, top'
+    };
+  }, [rect, hoverWidthRatio, hoverHeightRatio]);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["603024321", [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition]]]) + " " + (props && props.className != null && props.className || useClasses('highlight', className) || "")
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "603024321",
+    dynamic: [theme.palette.accents_2, position.width, position.left, position.height, position.top, visible ? activeOpacity : 0, position.transition]
+  }, ".highlight.__jsx-style-dynamic-selector{background:".concat(theme.palette.accents_2, ";position:absolute;border-radius:5px;width:").concat(position.width, ";left:").concat(position.left, ";height:").concat(position.height, ";top:").concat(position.top, ";opacity:").concat(visible ? activeOpacity : 0, ";-webkit-transition:0.15s ease;transition:0.15s ease;-webkit-transition-property:").concat(position.transition, ";transition-property:").concat(position.transition, ";}")));
+};
+export default Highlight;

package/esm/skeleton/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type Props = {
+    borderRadius?: string;
+    width?: number | string;
+    height?: number | string;
+    shape?: string;
+    style?: {};
+    backgroundColor?: string;
+    duration?: number;
+    children?: any;
+    loaded?: boolean;
+};
+declare const Skeleton: React.FC<Props>;
+export default Skeleton;

package/esm/skeleton/index.js

@@ -0,0 +1,48 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useState } from 'react';
+var Skeleton = function Skeleton(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    shape = _ref.shape,
+    style = _ref.style,
+    backgroundColor = _ref.backgroundColor,
+    duration = _ref.duration,
+    children = _ref.children,
+    loaded = _ref.loaded;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHidden = _useState2[0],
+    setHidden = _useState2[1];
+  var hideSkeleton = function hideSkeleton() {
+    setHidden(true);
+  };
+  var skeletonStyle = {};
+  width !== null ? skeletonStyle.width = width : skeletonStyle.width = "";
+  height !== null ? skeletonStyle.height = height : skeletonStyle.height = "";
+  shape === "circle" ? skeletonStyle.borderRadius = "50%" : skeletonStyle.borderRadius = "";
+  style !== null ? skeletonStyle = _extends({}, skeletonStyle, style) : void 0;
+  backgroundColor !== null ? skeletonStyle.backgroundColor = backgroundColor : skeletonStyle.backgroundColor = "white";
+  if (duration) setTimeout(hideSkeleton, duration);
+
+  // let skeletonChildren = []
+  // if(children !== undefined || children !== null){
+  //     for(let i = 0; i < children.length; i++){
+  //         if(children[i].type.name === "Skeleton")
+  //             skeletonChildren.push(children[i])
+  //     }
+  // }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "jsx-638717868"
+  }, loaded || isHidden ? children : /*#__PURE__*/React.createElement("div", {
+    style: skeletonStyle,
+    className: "jsx-638717868" + " " + "skeleton-box"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "638717868"
+  }, ".skeleton-box.jsx-638717868{display:inline-block;position:relative;overflow:hidden;background-color:#fff;text-align:center;}.skeleton-box.jsx-638717868::after{position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);background-image:linear-gradient(90deg,rgba(211,211,211,0) 0,rgba(211,211,211,0.6) 70%,rgba(211,211,211,0));-webkit-animation:shimmer-jsx-638717868 1.5s infinite;animation:shimmer-jsx-638717868 1.5s infinite;content:'';}@-webkit-keyframes shimmer-jsx-638717868{100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}@keyframes shimmer-jsx-638717868{100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}"));
+};
+export default Skeleton;

package/esm/slider/index.d.ts

@@ -0,0 +1,3 @@
+import Slider from "./slider";
+export type { SliderProps, SliderTypes } from "./slider";
+export default Slider;

package/esm/slider/index.js

@@ -0,0 +1,2 @@
+import Slider from './slider';
+export default Slider;

package/esm/slider/slider-dot.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Props {
+    left: number;
+    disabled?: boolean;
+    isClick?: boolean;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SliderDotProps = Props & NativeAttrs;
+declare const SliderDot: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default SliderDot;

package/esm/slider/slider-dot.js

@@ -0,0 +1,27 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useClasses from '../use-classes';
+var SliderDot = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$left = _ref.left,
+    left = _ref$left === void 0 ? 0 : _ref$left,
+    _ref$isClick = _ref.isClick,
+    isClick = _ref$isClick === void 0 ? false : _ref$isClick;
+  var theme = useTheme();
+  var classes = useClasses('dot', {
+    disabled: disabled,
+    click: isClick
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: _JSXStyle.dynamic([["3479628597", [left, theme.palette.success, theme.palette.background, theme.palette.accents_2, theme.palette.accents_4]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3479628597",
+    dynamic: [left, theme.palette.success, theme.palette.background, theme.palette.accents_2, theme.palette.accents_4]
+  }, ".dot.__jsx-style-dynamic-selector{position:absolute;left:".concat(left, "%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);height:calc(var(--slider-font-size) * 1.25);min-width:calc(var(--slider-font-size) * 1.25);line-height:calc(var(--slider-font-size) * 1.25);border-radius:calc(var(--slider-font-size) * 0.625);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700;font-size:calc(var(--slider-font-size) * 0.75);z-index:100;background-color:").concat(theme.palette.success, ";color:").concat(theme.palette.background, ";text-align:center;padding:0 calc(0.57 * var(--slider-font-size));}.dot.disabled.__jsx-style-dynamic-selector{cursor:not-allowed !important;background-color:").concat(theme.palette.accents_2, ";color:").concat(theme.palette.accents_4, ";}.dot.click.__jsx-style-dynamic-selector{-webkit-transition:all 200ms ease;transition:all 200ms ease;}.dot.__jsx-style-dynamic-selector:hover{cursor:-webkit-grab;cursor:-moz-grab;cursor:grab;}.dot.__jsx-style-dynamic-selector:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing;}")));
+});
+SliderDot.displayName = 'SliderDot';
+export default SliderDot;

package/esm/slider/slider-mark.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface Props {
+    max: number;
+    min: number;
+    step: number;
+}
+export type MarkLeftValue = number;
+export type Marks = Array<MarkLeftValue>;
+declare const SliderMark: React.FC<React.PropsWithChildren<Props>>;
+export default SliderMark;

package/esm/slider/slider-mark.js

@@ -0,0 +1,35 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+var getMarks = function getMarks(min, max, step) {
+  var value = max - min;
+  var roundFunc = !(value % step) ? Math.floor : Math.ceil;
+  var count = roundFunc(value / step) - 1;
+  if (count >= 99) return [];
+  return _toConsumableArray(new Array(count)).map(function (_, index) {
+    return step * (index + 1) * 100 / value;
+  });
+};
+var SliderMark = function SliderMark(_ref) {
+  var step = _ref.step,
+    max = _ref.max,
+    min = _ref.min;
+  var theme = useTheme();
+  var marks = useMemo(function () {
+    return getMarks(min, max, step);
+  }, [min, max, step]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, marks.map(function (val, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: "".concat(val, "-").concat(index),
+      style: {
+        left: "".concat(val, "%")
+      },
+      className: _JSXStyle.dynamic([["324900419", [theme.palette.background]]])
+    });
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "324900419",
+    dynamic: [theme.palette.background]
+  }, "span.__jsx-style-dynamic-selector{position:absolute;width:2px;height:100%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:".concat(theme.palette.background, ";}")));
+};
+export default SliderMark;

package/esm/slider/slider.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type SliderTypes = NormalTypes;
+interface Props {
+    hideValue?: boolean;
+    value?: number;
+    type?: SliderTypes;
+    initialValue?: number;
+    step?: number;
+    max?: number;
+    min?: number;
+    disabled?: boolean;
+    showMarkers?: boolean;
+    onChange?: (val: number) => void;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SliderProps = Props & NativeAttrs;
+declare const Slider: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Slider;

package/esm/slider/slider.js

@@ -0,0 +1,146 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["hideValue", "disabled", "type", "step", "max", "min", "initialValue", "value", "onChange", "className", "showMarkers"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import useDrag from '../utils/use-drag';
+import useCurrentState from '../utils/use-current-state';
+import SliderDot from './slider-dot';
+import SliderMark from './slider-mark';
+import { getColors } from './styles';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var getRefWidth = function getRefWidth(elementRef) {
+  if (!elementRef || !elementRef.current) return 0;
+  var rect = elementRef.current.getBoundingClientRect();
+  return rect.width || rect.right - rect.left;
+};
+var getValue = function getValue(max, min, step, offsetX, railWidth) {
+  if (offsetX < 0) return min;
+  if (offsetX > railWidth) return max;
+  var widthForEachStep = railWidth / (max - min) * step;
+  if (widthForEachStep <= 0) return min;
+  var slideDistance = Math.round(offsetX / widthForEachStep) * step + min;
+  return Number.isInteger(slideDistance) ? slideDistance : Number.parseFloat(slideDistance.toFixed(1));
+};
+var SliderComponent = function SliderComponent(_ref) {
+  var _ref$hideValue = _ref.hideValue,
+    hideValue = _ref$hideValue === void 0 ? false : _ref$hideValue,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? 0 : _ref$initialValue,
+    customValue = _ref.value,
+    onChange = _ref.onChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$showMarkers = _ref.showMarkers,
+    showMarkers = _ref$showMarkers === void 0 ? false : _ref$showMarkers,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useState = useState(initialValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useCurrentState = useCurrentState(0),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    setSliderWidth = _useCurrentState2[1],
+    sideWidthRef = _useCurrentState2[2];
+  var _useCurrentState3 = useCurrentState(0),
+    _useCurrentState4 = _slicedToArray(_useCurrentState3, 3),
+    setLastDargOffset = _useCurrentState4[1],
+    lastDargOffsetRef = _useCurrentState4[2];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isClick = _useState4[0],
+    setIsClick = _useState4[1];
+  var sliderRef = useRef(null);
+  var dotRef = useRef(null);
+  var currentRatio = useMemo(function () {
+    return (value - min) / (max - min) * 100;
+  }, [value, max, min]);
+  var setLastOffsetManually = function setLastOffsetManually(val) {
+    var width = getRefWidth(sliderRef);
+    var shouldOffset = (val - min) / (max - min) * width;
+    setLastDargOffset(shouldOffset);
+  };
+  var updateValue = useCallback(function (offset) {
+    var currentValue = getValue(max, min, step, offset, sideWidthRef.current);
+    setValue(currentValue);
+    onChange && onChange(currentValue);
+  }, [max, min, step, sideWidthRef]);
+  var _useMemo = useMemo(function () {
+      return getColors(theme.palette, type);
+    }, [theme.palette, type]),
+    bg = _useMemo.bg;
+  var dragHandler = function dragHandler(event) {
+    if (disabled) return;
+    var currentOffset = event.currentX - event.startX;
+    var offset = currentOffset + lastDargOffsetRef.current;
+    updateValue(offset);
+  };
+  var dragStartHandler = function dragStartHandler() {
+    setIsClick(false);
+    setSliderWidth(getRefWidth(sliderRef));
+  };
+  var dragEndHandler = function dragEndHandler(event) {
+    if (disabled) return;
+    var offset = event.currentX - event.startX;
+    var currentOffset = offset + lastDargOffsetRef.current;
+    var boundOffset = currentOffset < 0 ? 0 : Math.min(currentOffset, sideWidthRef.current);
+    setLastDargOffset(boundOffset);
+  };
+  var clickHandler = function clickHandler(event) {
+    if (disabled) return;
+    if (!sliderRef || !sliderRef.current) return;
+    setIsClick(true);
+    setSliderWidth(getRefWidth(sliderRef));
+    var clickOffset = event.clientX - sliderRef.current.getBoundingClientRect().x;
+    setLastDargOffset(clickOffset);
+    updateValue(clickOffset);
+  };
+  useDrag(dotRef, dragHandler, dragStartHandler, dragEndHandler);
+  useEffect(function () {
+    if (customValue === undefined) return;
+    if (customValue === value) return;
+    setValue(customValue);
+  }, [customValue, value]);
+  useEffect(function () {
+    initialValue && setLastOffsetManually(initialValue);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    onClick: clickHandler,
+    ref: sliderRef
+  }, props, {
+    className: _JSXStyle.dynamic([["219401708", [disabled ? theme.palette.accents_2 : bg, disabled ? 'not-allow' : 'pointer', SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(0.5), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || useClasses('slider', className) || "")
+  }), /*#__PURE__*/React.createElement(SliderDot, {
+    disabled: disabled,
+    ref: dotRef,
+    isClick: isClick,
+    left: currentRatio
+  }, hideValue || value), showMarkers && /*#__PURE__*/React.createElement(SliderMark, {
+    max: max,
+    min: min,
+    step: step
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "219401708",
+    dynamic: [disabled ? theme.palette.accents_2 : bg, disabled ? 'not-allow' : 'pointer', SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(0.5), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, ".slider.__jsx-style-dynamic-selector{border-radius:50px;background-color:".concat(disabled ? theme.palette.accents_2 : bg, ";position:relative;cursor:").concat(disabled ? 'not-allow' : 'pointer', ";--slider-font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(0.5), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
+};
+SliderComponent.displayName = 'Slider';
+var Slider = withScale(SliderComponent);
+export default Slider;

package/esm/slider/styles.d.ts

@@ -0,0 +1,6 @@
+import { HUIThemesPalette } from "../themes/presets";
+import { NormalTypes } from "../utils/prop-types";
+export type SelectColor = {
+    bg: string;
+};
+export declare const getColors: (palette: HUIThemesPalette, status?: NormalTypes) => SelectColor;