etudes 0.29.0 → 0.34.0

package/lib/Slider.d.ts

@@ -1,36 +1,24 @@
 import { CSSProperties } from 'react';
 import { CSSProp } from 'styled-components';
 import { Orientation } from './types';
-export declare type GutterCSSProps = Readonly<{
-    orientation: Orientation;
-}>;
-export declare type LabelCSSProps = Readonly<{
-    knobHeight: number;
-}>;
 export declare type Props = {
     id?: string;
     className?: string;
     style?: CSSProperties;
     isInverted?: boolean;
     onlyDispatchesOnDragEnd?: boolean;
-    isLabelVisible?: boolean;
-    labelProvider?: (position: number, index: number) => string;
+    labelProvider?: (position: number) => string;
     gutterPadding?: number;
     knobHeight?: number;
     knobWidth?: number;
     orientation?: Orientation;
-    defaultPosition?: number;
+    position?: number;
+    onPositionChange?: (position: number, isDragging: boolean) => void;
     onDragEnd?: () => void;
     onDragStart?: () => void;
-    onPositionChange?: (position: number) => void;
     startingGutterCSS?: CSSProp<any>;
     endingGutterCSS?: CSSProp<any>;
     knobCSS?: CSSProp<any>;
     labelCSS?: CSSProp<any>;
-    breakpoints?: readonly number[];
-    autoSnap?: boolean;
-    defaultIndex?: number;
-    onIndexChange?: (index: number) => void;
 };
-export declare function generateBreakpoints(length: number): readonly number[];
-export default function Slider({ id, className, style, isInverted, onlyDispatchesOnDragEnd, gutterPadding, knobHeight, knobWidth, orientation, defaultPosition, isLabelVisible, labelProvider, onDragEnd, onDragStart, onPositionChange, startingGutterCSS, endingGutterCSS, knobCSS, labelCSS, breakpoints, autoSnap, defaultIndex, onIndexChange, }: Props): JSX.Element;
+export default function Slider({ id, className, style, isInverted, onlyDispatchesOnDragEnd, gutterPadding, knobHeight, knobWidth, orientation, position, labelProvider, onDragEnd, onDragStart, onPositionChange, startingGutterCSS, endingGutterCSS, knobCSS, labelCSS, }: Props): JSX.Element;

package/lib/Slider.js

@@ -53,54 +53,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateBreakpoints = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var interactjs_1 = __importDefault(require("interactjs"));
 var react_1 = __importStar(require("react"));
 var spase_1 = require("spase");
 var styled_components_1 = __importStar(require("styled-components"));
-function generateBreakpoints(length) {
-    if (length <= 1)
-        throw new Error('`length` value must be greater than or equal to 2');
-    if (Math.round(length) !== length)
-        throw new Error('`length` value must be an integer');
-    var interval = 1 / (length - 1);
-    return Array(length).fill(null).map(function (v, i) {
-        var pos = interval * i;
-        return pos;
-    });
-}
-exports.generateBreakpoints = generateBreakpoints;
+var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:slider') : function () { };
 function Slider(_a) {
-    var id = _a.id, className = _a.className, style = _a.style, _b = _a.isInverted, isInverted = _b === void 0 ? false : _b, _c = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _c === void 0 ? false : _c, _d = _a.gutterPadding, gutterPadding = _d === void 0 ? 0 : _d, _e = _a.knobHeight, knobHeight = _e === void 0 ? 30 : _e, _f = _a.knobWidth, knobWidth = _f === void 0 ? 30 : _f, _g = _a.orientation, orientation = _g === void 0 ? 'vertical' : _g, _h = _a.defaultPosition, defaultPosition = _h === void 0 ? 0 : _h, _j = _a.isLabelVisible, isLabelVisible = _j === void 0 ? true : _j, labelProvider = _a.labelProvider, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, startingGutterCSS = _a.startingGutterCSS, endingGutterCSS = _a.endingGutterCSS, knobCSS = _a.knobCSS, labelCSS = _a.labelCSS, breakpoints = _a.breakpoints, _k = _a.autoSnap, autoSnap = _k === void 0 ? false : _k, defaultIndex = _a.defaultIndex, onIndexChange = _a.onIndexChange;
-    function setLivePosition(value) {
-        livePosition.current = value;
-        setPosition(value);
-    }
-    function getClosestIndex() {
-        if (!breakpoints)
-            return -1;
-        var index = 0;
-        var minDelta = NaN;
-        for (var i = 0, n = breakpoints.length; i < n; i++) {
-            var breakpoint = getPositionByIndex(i);
-            var delta = Math.abs(position - breakpoint);
-            if (isNaN(minDelta) || (delta < minDelta)) {
-                minDelta = delta;
-                index = i;
-            }
-        }
-        return index;
-    }
-    function getPositionByIndex(index) {
-        if (!breakpoints)
-            return NaN;
-        return breakpoints[index];
-    }
+    var id = _a.id, className = _a.className, style = _a.style, _b = _a.isInverted, isInverted = _b === void 0 ? false : _b, _c = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _c === void 0 ? false : _c, _d = _a.gutterPadding, gutterPadding = _d === void 0 ? 0 : _d, _e = _a.knobHeight, knobHeight = _e === void 0 ? 30 : _e, _f = _a.knobWidth, knobWidth = _f === void 0 ? 30 : _f, _g = _a.orientation, orientation = _g === void 0 ? 'vertical' : _g, _h = _a.position, position = _h === void 0 ? 0 : _h, labelProvider = _a.labelProvider, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, startingGutterCSS = _a.startingGutterCSS, endingGutterCSS = _a.endingGutterCSS, knobCSS = _a.knobCSS, labelCSS = _a.labelCSS;
     function initInteractivity() {
         var knob = knobRef.current;
         if (!knob || interactjs_1.default.isSet(knob))
             return;
+        debug('Initializing interactivity...', 'OK');
         (0, interactjs_1.default)(knob).draggable({
             inertia: true,
             onstart: function () { return onKnobDragStart(); },
@@ -113,42 +78,44 @@ function Slider(_a) {
     }
     function deinitInteractivity() {
         var knob = knobRef.current;
-        if (!knob)
+        if (!knob || !interactjs_1.default.isSet(knob))
             return;
+        debug('Deinitializing interactivity...', 'OK');
         (0, interactjs_1.default)(knob).unset();
     }
     function onKnobDragStart() {
+        debug('Handling drag start...', 'OK');
         setIsDragging(true);
         onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
     }
     function onKnobDragMove(delta) {
         var _a;
         var rect = (_a = spase_1.Rect.from(rootRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
-        var naturalPosition = isInverted ? (1 - livePosition.current) : livePosition.current;
+        var naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current;
         var naturalNewPositionX = naturalPosition * rect.width + delta;
         var naturalNewPositionY = naturalPosition * rect.height + delta;
         var naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width));
-        var newPosition = isInverted ? (1 - naturalNewPosition) : naturalNewPosition;
+        var newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition;
         setIsDragging(true);
         setLivePosition(newPosition);
     }
     function onKnobDragStop() {
+        debug('Handling drag stop...', 'OK');
         setIsDragging(false);
-        snapToClosestBreakpointIfNeeded();
         onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
     }
-    function snapToClosestBreakpointIfNeeded() {
-        if (!autoSnap || !breakpoints)
+    function setLivePosition(position) {
+        if (livePosition.current === position)
             return;
-        var position = getPositionByIndex(getClosestIndex());
-        setLivePosition(position);
+        livePosition.current = position;
+        _setPosition(position);
     }
     var rootRef = (0, react_1.useRef)(null);
     var knobRef = (0, react_1.useRef)(null);
-    var livePosition = (0, react_1.useRef)(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition);
-    var _l = __read((0, react_1.useState)(livePosition.current), 2), position = _l[0], setPosition = _l[1];
-    var _m = __read((0, react_1.useState)(undefined), 2), isDragging = _m[0], setIsDragging = _m[1];
-    var naturalPosition = isInverted ? 1 - position : position;
+    var livePosition = (0, react_1.useRef)(position);
+    var _j = __read((0, react_1.useState)(livePosition.current), 2), _position = _j[0], _setPosition = _j[1];
+    var _k = __read((0, react_1.useState)(undefined), 2), isDragging = _k[0], setIsDragging = _k[1];
+    var naturalPosition = isInverted ? 1 - _position : _position;
     (0, react_1.useEffect)(function () {
         initInteractivity();
         return function () {
@@ -156,15 +123,23 @@ function Slider(_a) {
         };
     }, []);
     (0, react_1.useEffect)(function () {
-        snapToClosestBreakpointIfNeeded();
-    }, [autoSnap]);
-    (0, react_1.useEffect)(function () {
-        if (onlyDispatchesOnDragEnd && isDragging)
+        if (isDragging === true)
             return;
-        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(position);
-        if (breakpoints)
-            onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(getClosestIndex());
+        if (position === _position)
+            return;
+        setIsDragging(undefined);
+        setLivePosition(position);
     }, [position]);
+    (0, react_1.useEffect)(function () {
+        if (isDragging === true && onlyDispatchesOnDragEnd)
+            return;
+        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(_position, isDragging === true);
+    }, [_position]);
+    (0, react_1.useEffect)(function () {
+        if (isDragging === false && onlyDispatchesOnDragEnd) {
+            onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(_position, false);
+        }
+    }, [isDragging]);
     return (react_1.default.createElement(StyledRoot, { ref: rootRef, id: id, className: className, orientation: orientation, style: style },
         react_1.default.createElement(StyledGutter, { orientation: orientation, css: startingGutterCSS, style: orientation === 'vertical' ? {
                 top: 0,
@@ -175,22 +150,21 @@ function Slider(_a) {
             } }),
         react_1.default.createElement(StyledKnobContainer, { ref: knobRef, style: __assign({ transform: 'translate3d(-50%, -50%, 0)' }, (orientation === 'vertical' ? {
                 left: '50%',
-                top: "".concat(position * 100, "%"),
+                top: "".concat(naturalPosition * 100, "%"),
                 transition: isDragging === false ? 'top 100ms ease-out' : 'none',
             } : {
-                left: "".concat(position * 100, "%"),
+                left: "".concat(naturalPosition * 100, "%"),
                 top: '50%',
                 transition: isDragging === false ? 'left 100ms ease-out' : 'none',
             })) },
             react_1.default.createElement(StyledKnob, { className: (0, classnames_1.default)({
-                    'at-end': isInverted ? (position === 0) : (position === 1),
-                    'at-start': isInverted ? (position === 1) : (position === 0),
+                    'at-end': isInverted ? (_position === 0) : (_position === 1),
+                    'at-start': isInverted ? (_position === 1) : (_position === 0),
                     'dragging': isDragging === true,
-                    'idle': isDragging === false,
                 }), css: knobCSS, style: {
                     height: "".concat(knobHeight, "px"),
                     width: "".concat(knobWidth, "px"),
-                } }, breakpoints && isLabelVisible && labelProvider && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, css: labelCSS }, labelProvider(position, getClosestIndex()))))),
+                } }, labelProvider && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, css: labelCSS }, labelProvider(_position))))),
         react_1.default.createElement(StyledGutter, { orientation: orientation, css: endingGutterCSS, style: orientation === 'vertical' ? {
                 bottom: 0,
                 height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),
@@ -200,10 +174,10 @@ function Slider(_a) {
             } })));
 }
 exports.default = Slider;
-var StyledGutter = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: #fff;\n  position: absolute;\n\n  ", "\n"], ["\n  background: #fff;\n  position: absolute;\n\n  ", "\n"])), function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  "], ["\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  "], ["\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  "]))); });
-var StyledLabel = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: #000;\n  font-size: ", "px;\n  pointer-events: none;\n  user-select: none;\n"], ["\n  color: #000;\n  font-size: ", "px;\n  pointer-events: none;\n  user-select: none;\n"])), function (props) { return props.knobHeight * .5; });
-var StyledKnobContainer = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  transition-duration: 100ms;\n  transition-property: top;\n  transition-timing-function: ease-out;\n"], ["\n  position: absolute;\n  z-index: 1;\n  transition-duration: 100ms;\n  transition-property: top;\n  transition-timing-function: ease-out;\n"])));
-var StyledKnob = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  &.idle {\n    opacity: 1;\n    transition-property: background, color, opacity, margin, transform;\n  }\n\n  &.dragging {\n    opacity: .6;\n    transition-property: background, color, transform, opacity;\n  }\n"], ["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  &.idle {\n    opacity: 1;\n    transition-property: background, color, opacity, margin, transform;\n  }\n\n  &.dragging {\n    opacity: .6;\n    transition-property: background, color, transform, opacity;\n  }\n"])));
+var StyledGutter = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: #fff;\n  position: absolute;\n\n  ", "\n\n  ", "\n"], ["\n  background: #fff;\n  position: absolute;\n\n  ", "\n\n  ", "\n"])), function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  "], ["\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  "], ["\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  "]))); }, function (props) { return props.css; });
+var StyledLabel = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: #000;\n  font-size: ", "px;\n  pointer-events: none;\n  user-select: none;\n\n  ", "\n"], ["\n  color: #000;\n  font-size: ", "px;\n  pointer-events: none;\n  user-select: none;\n\n  ", "\n"])), function (props) { return props.knobHeight * .5; }, function (props) { return props.css; });
+var StyledKnobContainer = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n"], ["\n  position: absolute;\n  z-index: 1;\n"])));
+var StyledKnob = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  ", "\n"], ["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  ", "\n"])), function (props) { return props.css; });
 var StyledRoot = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  height: ", ";\n  position: relative;\n  width: ", ";\n"], ["\n  box-sizing: border-box;\n  display: block;\n  height: ", ";\n  position: relative;\n  width: ", ";\n"])), function (props) { return props.orientation === 'vertical' ? '300px' : '4px'; }, function (props) { return props.orientation === 'vertical' ? '4px' : '300px'; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 //# sourceMappingURL=Slider.js.map

package/lib/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport { Orientation } from './types'\n\nexport type GutterCSSProps = Readonly<{\n  orientation: Orientation\n}>\n\nexport type LabelCSSProps = Readonly<{\n  knobHeight: number\n}>\n\nexport type Props = {\n  /**\n   * ID attribute of the root element.\n   */\n  id?: string\n\n  /**\n   * Class attribute of the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style?: CSSProperties\n\n  /**\n   * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n   * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n   * being the start.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if position/index change events are dispatched only when dragging ends. When\n   * disabled, aforementioned events are fired repeatedly while dragging.\n   */\n  onlyDispatchesOnDragEnd?: boolean\n\n  /**\n   * Indicates if the label is visible by the knob. Note that this is only applicable if\n   * `labelProvider` is set.\n   */\n  isLabelVisible?: boolean\n\n  /**\n   * A function that returns the label to be displayed (if `isLabelVisible` is `true`) at a given\n   * slider position and cloest breakpoint index (if breakpoints are provided).\n   *\n   * @param position - The current slider position.\n   * @praam index - The nearest breakpoint index (if breakpoints are provided), or -1 if no\n   *                breakpoints are provided.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number, index: number) => string\n\n  /**\n   * Padding between the gutter and the knob in pixels.\n   */\n  gutterPadding?: number\n\n  /**\n   * Height of the knob in pixels.\n   */\n  knobHeight?: number\n\n  /**\n   * Width of the knob in pixels.\n   */\n  knobWidth?: number\n\n  /**\n   * Orientation of the slider.\n   */\n  orientation?: Orientation\n\n  /**\n   * The default position. This is ignored if `defaultIndex` and breakpoints are provided.\n   */\n  defaultPosition?: number\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when dragging begins.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when position changes.\n   *\n   * @param position - The current slider position.\n   */\n  onPositionChange?: (position: number) => void\n\n  /**\n   * Custom CSS provided to the gutter before the knob.\n   */\n  startingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the gutter after the knob.\n   */\n  endingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the knob.\n   */\n  knobCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the label inside the knob.\n   */\n  labelCSS?: CSSProp<any>\n\n  // The following props are only used if `breakpoints` are provided.\n\n  /**\n   * An array of breakpoint descriptors. A breakpoint is a position (0 - 1 inclusive) on the gutter\n   * where the knob should snap to if dragging stops near it. If breakpoints are to be specified,\n   * ensure that there are at least two: one for the start of the gutter and one for the end.\n   */\n  breakpoints?: readonly number[]\n\n  /**\n   * Indicates whether the knob automatically snaps to the nearest breakpoint, if breakpoints are\n   * provided.\n   */\n  autoSnap?: boolean\n\n  /**\n   * The default index. This is only used if breakpoints are provided. On the other hand, if\n   * breakpoints are provided, the default position will be calculated based on this value, making\n   * `defaultPosition` irrelevant.\n   */\n  defaultIndex?: number\n\n  /**\n   * Handler invoked when index changes. This happens simultaneously with `onPositionChange`. Note\n   * that this is only invoked if breakpoints are provided, because otherwise there will be no\n   * indexes.\n   *\n   * @param index - The current breakpoint index.\n   */\n  onIndexChange?: (index: number) => void\n}\n\n/**\n * Generates a set of breakpoints compatible with this component.\n *\n * @param length - The number of breakpoints. This must be at least 2 because you must include the\n *                 starting and ending points.\n *\n * @returns An array of breakpoints.\n */\nexport function generateBreakpoints(length: number): readonly number[] {\n  if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n  if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n  const interval = 1 / (length - 1)\n\n  return Array(length).fill(null).map((v, i) => {\n    const pos = interval * i\n    return pos\n  })\n}\n\n/**\n * A slider component that divides the scroll gutter into two different elements—one that is before\n * the knob and one that is after the knob. This allows for individual styling customizations. The\n * width and height of the root element of this component is taken from the aggregated rect of both\n * gutter parts. The dimension of the knob itself does not impact that of the root element. In\n * addition to the tranditional behavior of a scrollbar, this component allows you to provide\n * breakpoints along the gutter so the knob can automatically snap to them (if feature is enabled)\n * when dragging ends near the breakpoint positions. You can also supply a label to each breakpoint\n * and have it display on the knob when the current position is close to the breakpoint. This\n * component supports both horizontal and vertical orientations.\n */\nexport default function Slider({\n  id,\n  className,\n  style,\n  isInverted = false,\n  onlyDispatchesOnDragEnd = false,\n  gutterPadding = 0,\n  knobHeight = 30,\n  knobWidth = 30,\n  orientation = 'vertical',\n  defaultPosition = 0,\n  isLabelVisible = true,\n  labelProvider,\n  onDragEnd,\n  onDragStart,\n  onPositionChange,\n  startingGutterCSS,\n  endingGutterCSS,\n  knobCSS,\n  labelCSS,\n  breakpoints,\n  autoSnap = false,\n  defaultIndex,\n  onIndexChange,\n}: Props) {\n  /**\n   * Sets the current position. The position should be normalized. That is, inversion should be\n   * taken care of prior to passing the new value to this method if `isInverted` is `true`.\n   *\n   * @param value - The value to set the position to.\n   */\n  function setLivePosition(value: number) {\n    livePosition.current = value\n    setPosition(value)\n  }\n\n  /**\n   * Gets the index of the breakpoint of which the current position is closest to. If for whatever\n   * reason the index cannot be computed (i.e. no breakpoints were provided), -1 is returned.\n   *\n   * @returns The closest index.\n   */\n  function getClosestIndex(): number {\n    if (!breakpoints) return -1\n\n    let index = 0\n    let minDelta = NaN\n\n    for (let i = 0, n = breakpoints.length; i < n; i++) {\n      const breakpoint = getPositionByIndex(i)\n      const delta = Math.abs(position - breakpoint)\n\n      if (isNaN(minDelta) || (delta < minDelta)) {\n        minDelta = delta\n        index = i\n      }\n    }\n\n    return index\n  }\n\n  /**\n   * Gets the position by breakpoint index. This value ranges between 0 - 1, inclusive.\n   *\n   * @param index - The breakpoint index.\n   *\n   * @returns The position. If for whatever reason the position cannot be determined, NaN is\n   *          returned.\n   */\n  function getPositionByIndex(index: number): number {\n    if (!breakpoints) return NaN\n    return breakpoints[index]\n  }\n\n  /**\n   * Initializes input interactivity of the knob.\n   */\n  function initInteractivity() {\n    const knob = knobRef.current\n    if (!knob || interact.isSet(knob)) return\n\n    interact(knob).draggable({\n      inertia: true,\n      onstart: () => onKnobDragStart(),\n      onmove: ({ dx, dy }) => onKnobDragMove(orientation === 'vertical' ? dy : dx),\n      onend: () => onKnobDragStop(),\n    })\n  }\n\n  /**\n   * Deinitializes input interactivity of the knob.\n   */\n  function deinitInteractivity() {\n    const knob = knobRef.current\n    if (!knob) return\n\n    interact(knob).unset()\n  }\n\n  /**\n   * Handler invoked when the knob starts dragging.\n   */\n  function onKnobDragStart() {\n    setIsDragging(true)\n\n    onDragStart?.()\n  }\n\n  /**\n   * Handler invoked when the knob moves.\n   *\n   * @param delta - The distance traveled (in pixels) since the last invocation of this handler.\n   */\n  function onKnobDragMove(delta: number) {\n    const rect = Rect.from(rootRef.current) ?? new Rect()\n    const naturalPosition = isInverted ? (1 - livePosition.current) : livePosition.current\n    const naturalNewPositionX = naturalPosition * rect.width + delta\n    const naturalNewPositionY = naturalPosition * rect.height + delta\n    const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n    const newPosition = isInverted ? (1 - naturalNewPosition) : naturalNewPosition\n\n    setIsDragging(true)\n    setLivePosition(newPosition)\n  }\n\n  /**\n   * Handler invoked when the knob stops dragging.\n   */\n  function onKnobDragStop() {\n    setIsDragging(false)\n    snapToClosestBreakpointIfNeeded()\n\n    onDragEnd?.()\n  }\n\n  /**\n   * Snaps the knob to the closest breakpoint. Note that if there are no breakpoints or\n   * auto-snapping feature is disabled, this method does nothing.\n   */\n  function snapToClosestBreakpointIfNeeded() {\n    if (!autoSnap || !breakpoints) return\n    const position = getPositionByIndex(getClosestIndex())\n    setLivePosition(position)\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n  const knobRef = useRef<HTMLButtonElement>(null)\n  const livePosition = useRef(((breakpoints !== undefined) && (defaultIndex !== undefined)) ? getPositionByIndex(defaultIndex) : defaultPosition)\n\n  const [position, setPosition] = useState(livePosition.current)\n  const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n\n  const naturalPosition = isInverted ? 1 - position : position\n\n  useEffect(() => {\n    initInteractivity()\n\n    return () => {\n      deinitInteractivity()\n    }\n  }, [])\n\n  useEffect(() => {\n    snapToClosestBreakpointIfNeeded()\n  }, [autoSnap])\n\n  useEffect(() => {\n    if (onlyDispatchesOnDragEnd && isDragging) return\n    onPositionChange?.(position)\n    if (breakpoints) onIndexChange?.(getClosestIndex())\n  }, [position])\n\n  return (\n    <StyledRoot ref={rootRef} id={id} className={className} orientation={orientation} style={style}>\n      <StyledGutter orientation={orientation} css={startingGutterCSS}\n        style={orientation === 'vertical' ? {\n          top: 0,\n          height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          left: 0,\n          width: `calc(${naturalPosition*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n      <StyledKnobContainer ref={knobRef} style={{\n        transform: 'translate3d(-50%, -50%, 0)',\n        ...(orientation === 'vertical' ? {\n          left: '50%',\n          top: `${position*100}%`,\n          transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n        } : {\n          left: `${position*100}%`,\n          top: '50%',\n          transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n        }),\n      }}>\n        <StyledKnob\n          className={classNames({\n            'at-end': isInverted ? (position === 0) : (position === 1),\n            'at-start': isInverted ? (position === 1) : (position === 0),\n            'dragging': isDragging === true,\n            'idle': isDragging === false,\n          })}\n          css={knobCSS}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {breakpoints && isLabelVisible && labelProvider && (\n            <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(position, getClosestIndex())}</StyledLabel>\n          )}\n        </StyledKnob>\n      </StyledKnobContainer>\n      <StyledGutter orientation={orientation} css={endingGutterCSS}\n        style={orientation === 'vertical' ? {\n          bottom: 0,\n          height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          right: 0,\n          width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledGutter = styled.div<GutterCSSProps>`\n  background: #fff;\n  position: absolute;\n\n  ${props => props.orientation === 'vertical' ? css`\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  ` : css`\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  `}\n`\n\nconst StyledLabel = styled.label<LabelCSSProps>`\n  color: #000;\n  font-size: ${props => props.knobHeight * .5}px;\n  pointer-events: none;\n  user-select: none;\n`\n\nconst StyledKnobContainer = styled.button`\n  position: absolute;\n  z-index: 1;\n  transition-duration: 100ms;\n  transition-property: top;\n  transition-timing-function: ease-out;\n`\n\nconst StyledKnob = styled.div`\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  &.idle {\n    opacity: 1;\n    transition-property: background, color, opacity, margin, transform;\n  }\n\n  &.dragging {\n    opacity: .6;\n    transition-property: background, color, transform, opacity;\n  }\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n  position: relative;\n  width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:slider') : () => {}\n\nexport type Props = {\n  /**\n   * ID attribute of the root element.\n   */\n  id?: string\n\n  /**\n   * Class attribute of the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style?: CSSProperties\n\n  /**\n   * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n   * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n   * being the start.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if position change events are dispatched only when dragging ends. When disabled,\n   * aforementioned events are fired repeatedly while dragging.\n   */\n  onlyDispatchesOnDragEnd?: boolean\n\n  /**\n   * A function that returns the label to be displayed at a given slider position.\n   *\n   * @param position - The current slider position.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number) => string\n\n  /**\n   * Padding between the gutter and the knob in pixels.\n   */\n  gutterPadding?: number\n\n  /**\n   * Height of the knob in pixels.\n   */\n  knobHeight?: number\n\n  /**\n   * Width of the knob in pixels.\n   */\n  knobWidth?: number\n\n  /**\n   * Orientation of the slider.\n   */\n  orientation?: Orientation\n\n  /**\n   * The current position.\n   */\n  position?: number\n\n  /**\n   * Handler invoked when position changes.\n   *\n   * @param position - The current slider position.\n   * @param isDragging - Indicates if the position change is triggered by dragging the slider.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when dragging begins.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Custom CSS provided to the gutter before the knob.\n   */\n  startingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the gutter after the knob.\n   */\n  endingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the knob.\n   */\n  knobCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the label inside the knob.\n   */\n  labelCSS?: CSSProp<any>\n}\n\n/**\n * A slider component that divides the scroll gutter into two different elements—one that is before\n * the knob and one that is after the knob. This allows for individual styling customizations. The\n * width and height of the root element of this component is inferred from CSS. The dimension of the\n * knob itself does not impact that of the root element. This component supports both horizontal and\n * vertical orientations.\n */\nexport default function Slider({\n  id,\n  className,\n  style,\n  isInverted = false,\n  onlyDispatchesOnDragEnd = false,\n  gutterPadding = 0,\n  knobHeight = 30,\n  knobWidth = 30,\n  orientation = 'vertical',\n  position = 0,\n  labelProvider,\n  onDragEnd,\n  onDragStart,\n  onPositionChange,\n  startingGutterCSS,\n  endingGutterCSS,\n  knobCSS,\n  labelCSS,\n}: Props) {\n  /**\n   * Initializes input interactivity of the knob.\n   */\n  function initInteractivity() {\n    const knob = knobRef.current\n    if (!knob || interact.isSet(knob)) return\n\n    debug('Initializing interactivity...', 'OK')\n\n    interact(knob).draggable({\n      inertia: true,\n      onstart: () => onKnobDragStart(),\n      onmove: ({ dx, dy }) => onKnobDragMove(orientation === 'vertical' ? dy : dx),\n      onend: () => onKnobDragStop(),\n    })\n  }\n\n  /**\n   * Deinitializes input interactivity of the knob.\n   */\n  function deinitInteractivity() {\n    const knob = knobRef.current\n    if (!knob || !interact.isSet(knob)) return\n\n    debug('Deinitializing interactivity...', 'OK')\n\n    interact(knob).unset()\n  }\n\n  /**\n   * Handler invoked when the knob starts dragging. Note that this is an event listener and does not\n   * have read access to component states.\n   */\n  function onKnobDragStart() {\n    debug('Handling drag start...', 'OK')\n    setIsDragging(true)\n    onDragStart?.()\n  }\n\n  /**\n   * Handler invoked when the knob moves. Note that this is an event listener and does not have read\n   * access to component states.\n   *\n   * @param delta - The distance traveled (in pixels) since the last invocation of this handler.\n   */\n  function onKnobDragMove(delta: number) {\n    const rect = Rect.from(rootRef.current) ?? new Rect()\n    const naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current\n    const naturalNewPositionX = naturalPosition * rect.width + delta\n    const naturalNewPositionY = naturalPosition * rect.height + delta\n    const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n    const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n\n    setIsDragging(true)\n    setLivePosition(newPosition)\n  }\n\n  /**\n   * Handler invoked when the knob stops dragging. Note that this is an event listener and does not\n   * have read access to component states.\n   */\n  function onKnobDragStop() {\n    debug('Handling drag stop...', 'OK')\n    setIsDragging(false)\n    onDragEnd?.()\n  }\n\n  /**\n   * Sets the current live position. The live position is different from the position state value.\n   * Because states are asynchronous by nature, this live position value is used to record position\n   * changes when drag event happens. This position should be normalized. That is, inversion should\n   * be taken care of prior to passing the new value to this method if `isInverted` is `true`.\n   *\n   * @param position - The value to set the live position to.\n   */\n  function setLivePosition(position: number) {\n    if (livePosition.current === position) return\n    livePosition.current = position\n    // debug('Updating live position...', 'OK', position)\n    _setPosition(position)\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n  const knobRef = useRef<HTMLButtonElement>(null)\n\n  const livePosition = useRef(position)\n\n  const [_position, _setPosition] = useState(livePosition.current)\n  const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n\n  const naturalPosition = isInverted ? 1 - _position : _position\n\n  useEffect(() => {\n    initInteractivity()\n\n    return () => {\n      deinitInteractivity()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isDragging === true) return\n    if (position === _position) return\n    setIsDragging(undefined)\n    setLivePosition(position)\n  }, [position])\n\n  useEffect(() => {\n    if (isDragging === true && onlyDispatchesOnDragEnd) return\n    onPositionChange?.(_position, isDragging === true)\n  }, [_position])\n\n  useEffect(() => {\n    if (isDragging === false && onlyDispatchesOnDragEnd) {\n      onPositionChange?.(_position, false)\n    }\n  }, [isDragging])\n\n  return (\n    <StyledRoot ref={rootRef} id={id} className={className} orientation={orientation} style={style}>\n      <StyledGutter orientation={orientation} css={startingGutterCSS}\n        style={orientation === 'vertical' ? {\n          top: 0,\n          height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          left: 0,\n          width: `calc(${naturalPosition*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n      <StyledKnobContainer ref={knobRef} style={{\n        transform: 'translate3d(-50%, -50%, 0)',\n        ...(orientation === 'vertical' ? {\n          left: '50%',\n          top: `${naturalPosition*100}%`,\n          transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n        } : {\n          left: `${naturalPosition*100}%`,\n          top: '50%',\n          transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n        }),\n      }}>\n        <StyledKnob\n          className={classNames({\n            'at-end': isInverted ? (_position === 0) : (_position === 1),\n            'at-start': isInverted ? (_position === 1) : (_position === 0),\n            'dragging': isDragging === true,\n          })}\n          css={knobCSS}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {labelProvider && (\n            <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(_position)}</StyledLabel>\n          )}\n        </StyledKnob>\n      </StyledKnobContainer>\n      <StyledGutter orientation={orientation} css={endingGutterCSS}\n        style={orientation === 'vertical' ? {\n          bottom: 0,\n          height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          right: 0,\n          width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledGutter = styled.div<{ orientation: NonNullable<Props['orientation']> }>`\n  background: #fff;\n  position: absolute;\n\n  ${props => props.orientation === 'vertical' ? css`\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  ` : css`\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  `}\n\n  ${props => props.css}\n`\n\nconst StyledLabel = styled.label<{ knobHeight: NonNullable<Props['knobHeight']> }>`\n  color: #000;\n  font-size: ${props => props.knobHeight * .5}px;\n  pointer-events: none;\n  user-select: none;\n\n  ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n  position: absolute;\n  z-index: 1;\n`\n\nconst StyledKnob = styled.div`\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  ${props => props.css}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n  position: relative;\n  width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}

package/lib/StepwiseSlider.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties } from 'react';
+import { CSSProp } from 'styled-components';
+import { Orientation } from './types';
+export declare type Props = {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    isInverted?: boolean;
+    onlyDispatchesOnDragEnd?: boolean;
+    labelProvider?: (position: number, index: number) => string;
+    gutterPadding?: number;
+    knobHeight?: number;
+    knobWidth?: number;
+    orientation?: Orientation;
+    steps?: readonly number[];
+    index?: number;
+    onIndexChange?: (index: number, isDragging: boolean) => void;
+    onPositionChange?: (position: number, isDragging: boolean) => void;
+    onDragEnd?: () => void;
+    onDragStart?: () => void;
+    startingGutterCSS?: CSSProp<any>;
+    endingGutterCSS?: CSSProp<any>;
+    knobCSS?: CSSProp<any>;
+    labelCSS?: CSSProp<any>;
+};
+export declare function generateSteps(length: number): readonly number[];
+export declare function getNearestIndexByPosition(position: number, steps: readonly number[]): number;
+export declare function getPositionAt(index: number, steps: readonly number[]): number;
+export default function StepwiseSlider({ id, className, style, isInverted, onlyDispatchesOnDragEnd, gutterPadding, knobHeight, knobWidth, orientation, labelProvider, onDragEnd, onDragStart, onPositionChange, startingGutterCSS, endingGutterCSS, knobCSS, labelCSS, steps, index, onIndexChange, }: Props): JSX.Element;

package/lib/StepwiseSlider.js

@@ -0,0 +1,239 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPositionAt = exports.getNearestIndexByPosition = exports.generateSteps = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var interactjs_1 = __importDefault(require("interactjs"));
+var react_1 = __importStar(require("react"));
+var spase_1 = require("spase");
+var styled_components_1 = __importStar(require("styled-components"));
+var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:stepwise-slider') : function () { };
+function generateSteps(length) {
+    if (length <= 1)
+        throw new Error('`length` value must be greater than or equal to 2');
+    if (Math.round(length) !== length)
+        throw new Error('`length` value must be an integer');
+    var interval = 1 / (length - 1);
+    return Array(length).fill(null).map(function (v, i) {
+        var position = interval * i;
+        return position;
+    });
+}
+exports.generateSteps = generateSteps;
+function getNearestIndexByPosition(position, steps) {
+    var index = -1;
+    var minDelta = NaN;
+    for (var i = 0, n = steps.length; i < n; i++) {
+        var step = getPositionAt(i, steps);
+        if (isNaN(step))
+            continue;
+        var delta = Math.abs(position - step);
+        if (isNaN(minDelta) || (delta < minDelta)) {
+            minDelta = delta;
+            index = i;
+        }
+    }
+    return index;
+}
+exports.getNearestIndexByPosition = getNearestIndexByPosition;
+function getPositionAt(index, steps) {
+    if (index >= steps.length)
+        return NaN;
+    return steps[index];
+}
+exports.getPositionAt = getPositionAt;
+function StepwiseSlider(_a) {
+    var id = _a.id, className = _a.className, style = _a.style, _b = _a.isInverted, isInverted = _b === void 0 ? false : _b, _c = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _c === void 0 ? false : _c, _d = _a.gutterPadding, gutterPadding = _d === void 0 ? 0 : _d, _e = _a.knobHeight, knobHeight = _e === void 0 ? 30 : _e, _f = _a.knobWidth, knobWidth = _f === void 0 ? 30 : _f, _g = _a.orientation, orientation = _g === void 0 ? 'vertical' : _g, labelProvider = _a.labelProvider, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onPositionChange = _a.onPositionChange, startingGutterCSS = _a.startingGutterCSS, endingGutterCSS = _a.endingGutterCSS, knobCSS = _a.knobCSS, labelCSS = _a.labelCSS, _h = _a.steps, steps = _h === void 0 ? generateSteps(10) : _h, _j = _a.index, index = _j === void 0 ? 0 : _j, onIndexChange = _a.onIndexChange;
+    function initInteractivity() {
+        var knob = knobRef.current;
+        if (!knob || interactjs_1.default.isSet(knob))
+            return;
+        debug('Initializing interactivity...', 'OK');
+        (0, interactjs_1.default)(knob).draggable({
+            inertia: true,
+            onstart: function () { return onKnobDragStart(); },
+            onmove: function (_a) {
+                var dx = _a.dx, dy = _a.dy;
+                return onKnobDragMove(orientation === 'vertical' ? dy : dx);
+            },
+            onend: function () { return onKnobDragStop(); },
+        });
+    }
+    function deinitInteractivity() {
+        var knob = knobRef.current;
+        if (!knob || !interactjs_1.default.isSet(knob))
+            return;
+        debug('Deinitializing interactivity...', 'OK');
+        (0, interactjs_1.default)(knob).unset();
+    }
+    function onKnobDragStart() {
+        debug('Handling drag start...', 'OK');
+        setIsDragging(true);
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
+    }
+    function onKnobDragMove(delta) {
+        var _a;
+        var rect = (_a = spase_1.Rect.from(rootRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
+        var naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current;
+        var naturalNewPositionX = naturalPosition * rect.width + delta;
+        var naturalNewPositionY = naturalPosition * rect.height + delta;
+        var naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width));
+        var newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition;
+        var newIndex = getNearestIndexByPosition(newPosition, steps);
+        setIsDragging(true);
+        setLivePosition(newPosition);
+        setLiveIndex(newIndex);
+    }
+    function onKnobDragStop() {
+        debug('Handling drag stop...', 'OK');
+        setIsDragging(false);
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
+    }
+    function setLivePosition(position) {
+        if (livePosition.current === position)
+            return;
+        livePosition.current = position;
+        _setPosition(position);
+    }
+    function setLiveIndex(index) {
+        if (liveIndex.current === index)
+            return;
+        liveIndex.current = index;
+        _setIndex(index);
+    }
+    var rootRef = (0, react_1.useRef)(null);
+    var knobRef = (0, react_1.useRef)(null);
+    var livePosition = (0, react_1.useRef)(getPositionAt(index, steps));
+    var liveIndex = (0, react_1.useRef)(index);
+    var _k = __read((0, react_1.useState)(livePosition.current), 2), _position = _k[0], _setPosition = _k[1];
+    var _l = __read((0, react_1.useState)(liveIndex.current), 2), _index = _l[0], _setIndex = _l[1];
+    var _m = __read((0, react_1.useState)(undefined), 2), isDragging = _m[0], setIsDragging = _m[1];
+    var naturalPosition = isInverted ? 1 - _position : _position;
+    (0, react_1.useEffect)(function () {
+        initInteractivity();
+        return function () {
+            deinitInteractivity();
+        };
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (isDragging === true)
+            return;
+        if (index === _index)
+            return;
+        setIsDragging(undefined);
+        setLivePosition(getPositionAt(index, steps));
+        setLiveIndex(index);
+    }, [index]);
+    (0, react_1.useEffect)(function () {
+        if (isDragging === true && onlyDispatchesOnDragEnd)
+            return;
+        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(_position, isDragging !== undefined);
+    }, [_position]);
+    (0, react_1.useEffect)(function () {
+        if (isDragging === true && onlyDispatchesOnDragEnd)
+            return;
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(_index, isDragging !== undefined);
+    }, [_index]);
+    (0, react_1.useEffect)(function () {
+        if (isDragging !== false)
+            return;
+        var nearestIndex = getNearestIndexByPosition(_position, steps);
+        var nearestPosition = getPositionAt(nearestIndex, steps);
+        setLivePosition(nearestPosition);
+        if (onlyDispatchesOnDragEnd) {
+            onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(_index, true);
+        }
+    }, [isDragging]);
+    return (react_1.default.createElement(StyledRoot, { ref: rootRef, id: id, className: className, orientation: orientation, style: style },
+        react_1.default.createElement(StyledGutter, { orientation: orientation, css: startingGutterCSS, style: orientation === 'vertical' ? {
+                top: 0,
+                height: "calc(".concat(naturalPosition * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),
+            } : {
+                left: 0,
+                width: "calc(".concat(naturalPosition * 100, "% - ").concat(knobWidth * .5, "px - ").concat(gutterPadding, "px)"),
+            } }),
+        react_1.default.createElement(StyledKnobContainer, { ref: knobRef, style: __assign({ transform: 'translate3d(-50%, -50%, 0)' }, (orientation === 'vertical' ? {
+                left: '50%',
+                top: "".concat(naturalPosition * 100, "%"),
+                transition: isDragging === false ? 'top 100ms ease-out' : 'none',
+            } : {
+                left: "".concat(naturalPosition * 100, "%"),
+                top: '50%',
+                transition: isDragging === false ? 'left 100ms ease-out' : 'none',
+            })) },
+            react_1.default.createElement(StyledKnob, { className: (0, classnames_1.default)({
+                    'at-end': isInverted ? (_position === 0) : (_position === 1),
+                    'at-start': isInverted ? (_position === 1) : (_position === 0),
+                    'dragging': isDragging === true,
+                }), css: knobCSS, style: {
+                    height: "".concat(knobHeight, "px"),
+                    width: "".concat(knobWidth, "px"),
+                } }, steps && labelProvider && (react_1.default.createElement(StyledLabel, { knobHeight: knobHeight, css: labelCSS }, labelProvider(_position, getNearestIndexByPosition(_position, steps)))))),
+        react_1.default.createElement(StyledGutter, { orientation: orientation, css: endingGutterCSS, style: orientation === 'vertical' ? {
+                bottom: 0,
+                height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobHeight * .5, "px - ").concat(gutterPadding, "px)"),
+            } : {
+                right: 0,
+                width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(knobWidth * .5, "px - ").concat(gutterPadding, "px)"),
+            } })));
+}
+exports.default = StepwiseSlider;
+var StyledGutter = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: #fff;\n  position: absolute;\n\n  ", "\n\n  ", "\n"], ["\n  background: #fff;\n  position: absolute;\n\n  ", "\n\n  ", "\n"])), function (props) { return props.orientation === 'vertical' ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  "], ["\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  "], ["\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  "]))); }, function (props) { return props.css; });
+var StyledLabel = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: #000;\n  font-size: ", "px;\n  pointer-events: none;\n  user-select: none;\n\n  ", "\n"], ["\n  color: #000;\n  font-size: ", "px;\n  pointer-events: none;\n  user-select: none;\n\n  ", "\n"])), function (props) { return props.knobHeight * .5; }, function (props) { return props.css; });
+var StyledKnobContainer = styled_components_1.default.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n"], ["\n  position: absolute;\n  z-index: 1;\n"])));
+var StyledKnob = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  ", "\n"], ["\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  ", "\n"])), function (props) { return props.css; });
+var StyledRoot = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  height: ", ";\n  position: relative;\n  width: ", ";\n"], ["\n  box-sizing: border-box;\n  display: block;\n  height: ", ";\n  position: relative;\n  width: ", ";\n"])), function (props) { return props.orientation === 'vertical' ? '300px' : '4px'; }, function (props) { return props.orientation === 'vertical' ? '4px' : '300px'; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=StepwiseSlider.js.map

package/lib/StepwiseSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["StepwiseSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport interact from 'interactjs'\nimport React, { CSSProperties, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport { Orientation } from './types'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:stepwise-slider') : () => {}\n\nexport type Props = {\n  /**\n   * ID attribute of the root element.\n   */\n  id?: string\n\n  /**\n   * Class attribute of the root element.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style?: CSSProperties\n\n  /**\n   * By default the position is a value from 0 - 1, 0 being the start of the slider and 1 being the\n   * end. Switching on this flag inverts this behavior, where 0 becomes the end of the slider and 1\n   * being the start.\n   */\n  isInverted?: boolean\n\n  /**\n   * Indicates if position/index change events are dispatched only when dragging ends. When\n   * disabled, aforementioned events are fired repeatedly while dragging.\n   */\n  onlyDispatchesOnDragEnd?: boolean\n\n  /**\n   * A function that returns the label to be displayed at a given slider position and closest step\n   * index (if steps are provided).\n   *\n   * @param position - The current slider position.\n   * @param index - The nearest step index (if steps are provided), or -1 if no steps are provided.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number, index: number) => string\n\n  /**\n   * Padding between the gutter and the knob in pixels.\n   */\n  gutterPadding?: number\n\n  /**\n   * Height of the knob in pixels.\n   */\n  knobHeight?: number\n\n  /**\n   * Width of the knob in pixels.\n   */\n  knobWidth?: number\n\n  /**\n   * Orientation of the slider.\n   */\n  orientation?: Orientation\n\n  /**\n   * An array of step descriptors. A step is a position (0 - 1 inclusive) on the gutter where the\n   * knob should snap to if dragging stops near it. Ensure that there are at least two steps: one\n   * for the start of the gutter and one for the end.\n   */\n  steps?: readonly number[]\n\n  /**\n   * The current index.\n   */\n  index?: number\n\n  /**\n   * Handler invoked when index changes. This happens simultaneously with `onPositionChange`.\n   *\n   * @param index - The current step index.\n   * @param isDragging - Indicates if the index change is triggered by dragging the slider..\n   */\n  onIndexChange?: (index: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when position changes.\n   *\n   * @param position - The current slider position.\n   * @param isDragging - Indicates if the position change is triggered by dragging the slider.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when dragging begins.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Custom CSS provided to the gutter before the knob.\n   */\n  startingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the gutter after the knob.\n   */\n  endingGutterCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the knob.\n   */\n  knobCSS?: CSSProp<any>\n\n  /**\n   * Custom CSS provided to the label inside the knob.\n   */\n  labelCSS?: CSSProp<any>\n}\n\n/**\n * Generates a set of steps compatible with this component.\n *\n * @param length - The number of steps. This must be at least 2 because you must include the\n *                 starting and ending points.\n *\n * @returns An array of steps.\n */\nexport function generateSteps(length: number): readonly number[] {\n  if (length <= 1) throw new Error('`length` value must be greater than or equal to 2')\n  if (Math.round(length) !== length) throw new Error('`length` value must be an integer')\n\n  const interval = 1 / (length - 1)\n\n  return Array(length).fill(null).map((v, i) => {\n    const position = interval * i\n    return position\n  })\n}\n\n/**\n * Gets the index of the step of which the specified position is closest to. If for whatever\n * reason the index cannot be computed, -1 is returned.\n *\n * @param position - The position (0 - 1, inclusive).\n * @param steps - The steps.\n *\n * @returns The nearest index.\n */\nexport function getNearestIndexByPosition(position: number, steps: readonly number[]): number {\n  let index = -1\n  let minDelta = NaN\n\n  for (let i = 0, n = steps.length; i < n; i++) {\n    const step = getPositionAt(i, steps)\n\n    if (isNaN(step)) continue\n\n    const delta = Math.abs(position - step)\n\n    if (isNaN(minDelta) || (delta < minDelta)) {\n      minDelta = delta\n      index = i\n    }\n  }\n\n  return index\n}\n\n/**\n * Gets the position by step index. This value ranges between 0 - 1, inclusive.\n *\n * @param index - The step index.\n * @param steps - The steps.\n *\n * @returns The position. If for whatever reason the position cannot be determined, `NaN` is\n *          returned.\n */\nexport function getPositionAt(index: number, steps: readonly number[]): number {\n  if (index >= steps.length) return NaN\n  return steps[index]\n}\n\n/**\n * A \"stepwise\" slider component that automatically snaps to certain points on the slider. The\n * component divides the scroll gutter into two different elements—one that is before the knob and\n * one that is after the knob. This allows for individual styling customizations. The width and\n * height of the root element of this component is inferred from its CSS rules. The dimension of the\n * knob itself does not impact that of the root element. This component supports both horizontal and\n * vertical orientations.\n */\nexport default function StepwiseSlider({\n  id,\n  className,\n  style,\n  isInverted = false,\n  onlyDispatchesOnDragEnd = false,\n  gutterPadding = 0,\n  knobHeight = 30,\n  knobWidth = 30,\n  orientation = 'vertical',\n  labelProvider,\n  onDragEnd,\n  onDragStart,\n  onPositionChange,\n  startingGutterCSS,\n  endingGutterCSS,\n  knobCSS,\n  labelCSS,\n  steps = generateSteps(10),\n  index = 0,\n  onIndexChange,\n}: Props) {\n  /**\n   * Initializes input interactivity of the knob.\n   */\n  function initInteractivity() {\n    const knob = knobRef.current\n    if (!knob || interact.isSet(knob)) return\n\n    debug('Initializing interactivity...', 'OK')\n\n    interact(knob).draggable({\n      inertia: true,\n      onstart: () => onKnobDragStart(),\n      onmove: ({ dx, dy }) => onKnobDragMove(orientation === 'vertical' ? dy : dx),\n      onend: () => onKnobDragStop(),\n    })\n  }\n\n  /**\n   * Deinitializes input interactivity of the knob.\n   */\n  function deinitInteractivity() {\n    const knob = knobRef.current\n    if (!knob || !interact.isSet(knob)) return\n\n    debug('Deinitializing interactivity...', 'OK')\n\n    interact(knob).unset()\n  }\n\n  /**\n   * Handler invoked when the knob starts dragging. Note that this is an event listener and does not\n   * have read access to component states.\n   */\n  function onKnobDragStart() {\n    debug('Handling drag start...', 'OK')\n    setIsDragging(true)\n    onDragStart?.()\n  }\n\n  /**\n   * Handler invoked when the knob moves. Note that this is an event listener and does not have read\n   * access to component states.\n   *\n   * @param delta - The distance traveled (in pixels) since the last invocation of this handler.\n   */\n  function onKnobDragMove(delta: number) {\n    const rect = Rect.from(rootRef.current) ?? new Rect()\n    const naturalPosition = isInverted ? 1 - livePosition.current : livePosition.current\n    const naturalNewPositionX = naturalPosition * rect.width + delta\n    const naturalNewPositionY = naturalPosition * rect.height + delta\n    const naturalNewPosition = (orientation === 'vertical') ? Math.max(0, Math.min(1, naturalNewPositionY / rect.height)) : Math.max(0, Math.min(1, naturalNewPositionX / rect.width))\n    const newPosition = isInverted ? 1 - naturalNewPosition : naturalNewPosition\n    const newIndex = getNearestIndexByPosition(newPosition, steps)\n\n    setIsDragging(true)\n    setLivePosition(newPosition)\n    setLiveIndex(newIndex)\n  }\n\n  /**\n   * Handler invoked when the knob stops dragging. Note that this is an event listener and does not\n   * have read access to component states.\n   */\n  function onKnobDragStop() {\n    debug('Handling drag stop...', 'OK')\n    setIsDragging(false)\n    onDragEnd?.()\n  }\n\n  /**\n   * Sets the current live position. The live position is different from the position state value.\n   * Because states are asynchronous by nature, this live position value is used to record position\n   * changes when drag event happens. This position should be normalized. That is, inversion should\n   * be taken care of prior to passing the new value to this method if `isInverted` is `true`.\n   *\n   * @param position - The value to set the live position to.\n   */\n  function setLivePosition(position: number) {\n    if (livePosition.current === position) return\n    livePosition.current = position\n    // debug('Updating live position...', 'OK', position)\n    _setPosition(position)\n  }\n\n  /**\n   * Sets the current live index. The live index is different from the index state value. Because\n   * states are asynchronous by nature, this live index value is used to record index changes when\n   * drag event happens.\n   *\n   * @param index - The value to set the live index to.\n   */\n  function setLiveIndex(index: number) {\n    if (liveIndex.current === index) return\n    liveIndex.current = index\n    // debug('Updating live index...', 'OK', index)\n    _setIndex(index)\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n  const knobRef = useRef<HTMLButtonElement>(null)\n\n  const livePosition = useRef(getPositionAt(index, steps))\n  const liveIndex = useRef(index)\n\n  const [_position, _setPosition] = useState(livePosition.current)\n  const [_index, _setIndex] = useState(liveIndex.current)\n  const [isDragging, setIsDragging] = useState<boolean | undefined>(undefined)\n\n  const naturalPosition = isInverted ? 1 - _position : _position\n\n  useEffect(() => {\n    initInteractivity()\n\n    return () => {\n      deinitInteractivity()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (isDragging === true) return\n    if (index === _index) return\n    setIsDragging(undefined)\n    setLivePosition(getPositionAt(index, steps))\n    setLiveIndex(index)\n  }, [index])\n\n  useEffect(() => {\n    if (isDragging === true && onlyDispatchesOnDragEnd) return\n    onPositionChange?.(_position, isDragging !== undefined)\n  }, [_position])\n\n  useEffect(() => {\n    if (isDragging === true && onlyDispatchesOnDragEnd) return\n    onIndexChange?.(_index, isDragging !== undefined)\n  }, [_index])\n\n  useEffect(() => {\n    if (isDragging !== false) return\n\n    const nearestIndex = getNearestIndexByPosition(_position, steps)\n    const nearestPosition = getPositionAt(nearestIndex, steps)\n    setLivePosition(nearestPosition)\n\n    if (onlyDispatchesOnDragEnd) {\n      onIndexChange?.(_index, true)\n    }\n  }, [isDragging])\n\n  return (\n    <StyledRoot ref={rootRef} id={id} className={className} orientation={orientation} style={style}>\n      <StyledGutter orientation={orientation} css={startingGutterCSS}\n        style={orientation === 'vertical' ? {\n          top: 0,\n          height: `calc(${naturalPosition*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          left: 0,\n          width: `calc(${naturalPosition*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n      <StyledKnobContainer ref={knobRef} style={{\n        transform: 'translate3d(-50%, -50%, 0)',\n        ...(orientation === 'vertical' ? {\n          left: '50%',\n          top: `${naturalPosition*100}%`,\n          transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n        } : {\n          left: `${naturalPosition*100}%`,\n          top: '50%',\n          transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n        }),\n      }}>\n        <StyledKnob\n          className={classNames({\n            'at-end': isInverted ? (_position === 0) : (_position === 1),\n            'at-start': isInverted ? (_position === 1) : (_position === 0),\n            'dragging': isDragging === true,\n          })}\n          css={knobCSS}\n          style={{\n            height: `${knobHeight}px`,\n            width: `${knobWidth}px`,\n          }}\n        >\n          {steps && labelProvider && (\n            <StyledLabel knobHeight={knobHeight} css={labelCSS}>{labelProvider(_position, getNearestIndexByPosition(_position, steps))}</StyledLabel>\n          )}\n        </StyledKnob>\n      </StyledKnobContainer>\n      <StyledGutter orientation={orientation} css={endingGutterCSS}\n        style={orientation === 'vertical' ? {\n          bottom: 0,\n          height: `calc(${(1 - naturalPosition)*100}% - ${knobHeight*.5}px - ${gutterPadding}px)`,\n        } : {\n          right: 0,\n          width: `calc(${(1 - naturalPosition)*100}% - ${knobWidth*.5}px - ${gutterPadding}px)`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledGutter = styled.div<{ orientation: NonNullable<Props['orientation']> }>`\n  background: #fff;\n  position: absolute;\n\n  ${props => props.orientation === 'vertical' ? css`\n    left: 0;\n    margin: 0 auto;\n    right: 0;\n    width: 100%;\n  ` : css`\n    bottom: 0;\n    height: 100%;\n    margin: auto 0;\n    top: 0;\n  `}\n\n  ${props => props.css}\n`\n\nconst StyledLabel = styled.label<{ knobHeight: NonNullable<Props['knobHeight']> }>`\n  color: #000;\n  font-size: ${props => props.knobHeight * .5}px;\n  pointer-events: none;\n  user-select: none;\n\n  ${props => props.css}\n`\n\nconst StyledKnobContainer = styled.button`\n  position: absolute;\n  z-index: 1;\n`\n\nconst StyledKnob = styled.div`\n  align-items: center;\n  background: #fff;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  opacity: 1;\n  touch-action: none;\n  transition-duration: 100ms;\n  transition-property: background, color, opacity, transform;\n  transition-timing-function: ease-out;\n\n  ${props => props.css}\n`\n\nconst StyledRoot = styled.div<{\n  orientation: Orientation\n}>`\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.orientation === 'vertical' ? '300px' : '4px'};\n  position: relative;\n  width: ${props => props.orientation === 'vertical' ? '4px' : '300px'};\n`\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etudes",
-  "version": "0.29.0",
+  "version": "0.34.0",
   "description": "A study of styled React components",
   "main": "lib",
   "scripts": {