etudes 5.2.0 → 5.3.0

package/components/StepwiseSlider.js

@@ -1,54 +1,9 @@
-"use strict";
-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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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.StepwiseSliderLabel = exports.StepwiseSliderKnob = exports.StepwiseSliderTrack = exports.StepwiseSlider = void 0;
-exports.generateSteps = generateSteps;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var clsx_1 = __importDefault(require("clsx"));
-var react_1 = require("react");
-var spase_1 = require("spase");
-var useDragValueEffect_1 = require("../hooks/useDragValueEffect");
-var utils_1 = require("../utils");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Rect } from 'spase';
+import { useDragValueEffect } from '../hooks/useDragValueEffect.js';
+import { asClassNameDict, asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
 /**
  * A "stepwise" slider component supporting both horizontal and vertical
  * orientations that automatically snaps to a set of predefined points on the
@@ -67,34 +22,30 @@ var utils_1 = require("../utils");
  * @exports StepwiseSliderTrack The component for the slide track on either side
  *                                of the knob.
  */
-exports.StepwiseSlider = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c, _d, _e;
-    var children = _a.children, className = _a.className, _f = _a.index, externalIndex = _f === void 0 ? 0 : _f, _g = _a.isInverted, isInverted = _g === void 0 ? false : _g, _h = _a.isTrackInteractive, isTrackInteractive = _h === void 0 ? true : _h, _j = _a.knobHeight, knobHeight = _j === void 0 ? 30 : _j, _k = _a.knobWidth, knobWidth = _k === void 0 ? 30 : _k, labelProvider = _a.labelProvider, _l = _a.onlyDispatchesOnDragEnd, onlyDispatchesOnDragEnd = _l === void 0 ? false : _l, _m = _a.orientation, orientation = _m === void 0 ? 'vertical' : _m, _o = _a.steps, steps = _o === void 0 ? generateSteps(10) : _o, _p = _a.trackPadding, trackPadding = _p === void 0 ? 0 : _p, _q = _a.usesDefaultStyles, usesDefaultStyles = _q === void 0 ? false : _q, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onIndexChange = _a.onIndexChange, onPositionChange = _a.onPositionChange, props = __rest(_a, ["children", "className", "index", "isInverted", "isTrackInteractive", "knobHeight", "knobWidth", "labelProvider", "onlyDispatchesOnDragEnd", "orientation", "steps", "trackPadding", "usesDefaultStyles", "onDragEnd", "onDragStart", "onIndexChange", "onPositionChange"]);
-    var mapDragValueToPosition = function (value, dx, dy) {
-        var _a;
-        var rect = (_a = spase_1.Rect.from(bodyRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
-        var truePosition = isInverted ? 1 - value : value;
-        var trueNewPositionX = truePosition * rect.width + dx;
-        var trueNewPositionY = truePosition * rect.height + dy;
-        var trueNewPosition = orientation === 'vertical' ? Math.max(0, Math.min(1, trueNewPositionY / rect.height)) : Math.max(0, Math.min(1, trueNewPositionX / rect.width));
-        var normalizedPosition = isInverted ? 1 - trueNewPosition : trueNewPosition;
+export const StepwiseSlider = forwardRef(({ children, className, index: externalIndex = 0, isInverted = false, isTrackInteractive = true, knobHeight = 30, knobWidth = 30, labelProvider, onlyDispatchesOnDragEnd = false, orientation = 'vertical', steps = generateSteps(10), trackPadding = 0, usesDefaultStyles = false, onDragEnd, onDragStart, onIndexChange, onPositionChange, ...props }, ref) => {
+    const mapDragValueToPosition = (value, dx, dy) => {
+        const rect = Rect.from(bodyRef.current) ?? new Rect();
+        const truePosition = isInverted ? 1 - value : value;
+        const trueNewPositionX = truePosition * rect.width + dx;
+        const trueNewPositionY = truePosition * rect.height + dy;
+        const trueNewPosition = orientation === 'vertical' ? Math.max(0, Math.min(1, trueNewPositionY / rect.height)) : Math.max(0, Math.min(1, trueNewPositionX / rect.width));
+        const normalizedPosition = isInverted ? 1 - trueNewPosition : trueNewPosition;
         return normalizedPosition;
     };
-    var trackClickHandler = function (event) {
-        var _a;
+    const trackClickHandler = (event) => {
         if (!isTrackInteractive)
             return;
-        var rect = (_a = spase_1.Rect.from(bodyRef.current)) !== null && _a !== void 0 ? _a : new spase_1.Rect();
+        const rect = Rect.from(bodyRef.current) ?? new Rect();
         switch (orientation) {
             case 'horizontal': {
-                var trackPosition = (event.clientX - rect.left) / rect.width;
-                var normalizedPosition = isInverted ? 1 - trackPosition : trackPosition;
+                const trackPosition = (event.clientX - rect.left) / rect.width;
+                const normalizedPosition = isInverted ? 1 - trackPosition : trackPosition;
                 setPosition(normalizedPosition);
                 break;
             }
             case 'vertical': {
-                var trackPosition = (event.clientY - rect.top) / rect.height;
-                var normalizedPosition = isInverted ? 1 - trackPosition : trackPosition;
+                const trackPosition = (event.clientY - rect.top) / rect.height;
+                const normalizedPosition = isInverted ? 1 - trackPosition : trackPosition;
                 setPosition(normalizedPosition);
                 break;
             }
@@ -102,32 +53,32 @@ exports.StepwiseSlider = (0, react_1.forwardRef)(function (_a, ref) {
                 break;
         }
     };
-    var bodyRef = (0, react_1.useRef)(null);
-    var knobContainerRef = (0, react_1.useRef)(null);
-    var _r = __read((0, react_1.useState)(externalIndex), 2), index = _r[0], setIndex = _r[1];
-    var _s = (0, useDragValueEffect_1.useDragValueEffect)(knobContainerRef, {
+    const bodyRef = useRef(null);
+    const knobContainerRef = useRef(null);
+    const [index, setIndex] = useState(externalIndex);
+    const { isDragging: [isDragging], isReleasing: [isReleasing], value: [position, setPosition] } = useDragValueEffect(knobContainerRef, {
         initialValue: getPositionAt(externalIndex, steps),
         transform: mapDragValueToPosition,
-        onDragStart: onDragStart,
-        onDragEnd: onDragEnd,
-    }), _t = __read(_s.isDragging, 1), isDragging = _t[0], _u = __read(_s.isReleasing, 1), isReleasing = _u[0], _v = __read(_s.value, 2), position = _v[0], setPosition = _v[1];
+        onDragStart,
+        onDragEnd,
+    });
     // Natural position is the position affecting internal components accounting
     // for `isInverted`.
-    var naturalPosition = isInverted ? 1 - position : position;
-    var isAtEnd = isInverted ? position === 0 : position === 1;
-    var isAtStart = isInverted ? position === 1 : position === 0;
-    var components = (0, utils_1.asComponentDict)(children, {
-        knob: exports.StepwiseSliderKnob,
-        label: exports.StepwiseSliderLabel,
-        track: exports.StepwiseSliderTrack,
+    const naturalPosition = isInverted ? 1 - position : position;
+    const isAtEnd = isInverted ? position === 0 : position === 1;
+    const isAtStart = isInverted ? position === 1 : position === 0;
+    const components = asComponentDict(children, {
+        knob: StepwiseSliderKnob,
+        label: StepwiseSliderLabel,
+        track: StepwiseSliderTrack,
     });
-    var fixedClassNames = getFixedClassNames({ orientation: orientation, isAtEnd: isAtEnd, isAtStart: isAtStart, isDragging: isDragging, isReleasing: isReleasing });
-    var fixedStyles = getFixedStyles({ orientation: orientation, naturalPosition: naturalPosition, isDragging: isDragging, knobHeight: knobHeight, knobWidth: knobWidth, isTrackInteractive: isTrackInteractive });
-    var defaultStyles = usesDefaultStyles ? getDefaultStyles({ knobHeight: knobHeight }) : undefined;
-    (0, react_1.useEffect)(function () {
+    const fixedClassNames = getFixedClassNames({ orientation, isAtEnd, isAtStart, isDragging, isReleasing });
+    const fixedStyles = getFixedStyles({ orientation, naturalPosition, isDragging, knobHeight, knobWidth, isTrackInteractive });
+    const defaultStyles = usesDefaultStyles ? getDefaultStyles({ knobHeight }) : undefined;
+    useEffect(() => {
         if (isDragging)
             return;
-        var newPosition = getPositionAt(externalIndex, steps);
+        const newPosition = getPositionAt(externalIndex, steps);
         if (position !== newPosition) {
             setPosition(newPosition);
         }
@@ -135,71 +86,59 @@ exports.StepwiseSlider = (0, react_1.forwardRef)(function (_a, ref) {
             setIndex(externalIndex);
         }
     }, [externalIndex]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (isDragging && onlyDispatchesOnDragEnd)
             return;
-        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(position, isDragging);
-        var newIndex = getNearestIndexByPosition(position, steps);
+        onPositionChange?.(position, isDragging);
+        const newIndex = getNearestIndexByPosition(position, steps);
         if (index !== newIndex)
             setIndex(newIndex);
     }, [position]);
-    (0, react_1.useEffect)(function () {
-        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(index, isDragging);
+    useEffect(() => {
+        onIndexChange?.(index, isDragging);
     }, [index]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (isDragging)
             return;
-        var nearestIndex = getNearestIndexByPosition(position, steps);
-        var nearestPosition = getPositionAt(nearestIndex, steps);
+        const nearestIndex = getNearestIndexByPosition(position, steps);
+        const nearestPosition = getPositionAt(nearestIndex, steps);
         if (nearestPosition !== position || onlyDispatchesOnDragEnd) {
             setPosition(nearestPosition);
-            onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(nearestPosition, true);
+            onPositionChange?.(nearestPosition, true);
         }
     }, [isDragging]);
-    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, fixedClassNames.root), "data-component": 'stepwise-slider', children: (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, style: fixedStyles.body, children: [(0, utils_1.cloneStyledElement)((_b = components.track) !== null && _b !== void 0 ? _b : (0, jsx_runtime_1.jsx)(exports.StepwiseSliderTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
-                    className: (0, clsx_1.default)('start', fixedClassNames.track),
-                    style: (0, utils_1.styles)(fixedStyles.track, orientation === 'vertical' ? {
-                        height: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
+    return (_jsx("div", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), "data-component": 'stepwise-slider', children: _jsxs("div", { ref: bodyRef, style: fixedStyles.body, children: [cloneStyledElement(components.track ?? _jsx(StepwiseSliderTrack, { style: defaultStyles?.track }), {
+                    className: clsx('start', fixedClassNames.track),
+                    style: styles(fixedStyles.track, orientation === 'vertical' ? {
+                        height: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,
                         top: '0',
                     } : {
                         left: '0',
-                        width: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
+                        width: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,
                     }),
                     onClick: trackClickHandler,
-                }, (0, jsx_runtime_1.jsx)("div", { style: fixedStyles.trackHitbox })), (0, utils_1.cloneStyledElement)((_c = components.track) !== null && _c !== void 0 ? _c : (0, jsx_runtime_1.jsx)(exports.StepwiseSliderTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
-                    className: (0, clsx_1.default)('end', fixedClassNames.track),
-                    style: (0, utils_1.styles)(fixedStyles.track, orientation === 'vertical' ? {
+                }, _jsx("div", { style: fixedStyles.trackHitbox })), cloneStyledElement(components.track ?? _jsx(StepwiseSliderTrack, { style: defaultStyles?.track }), {
+                    className: clsx('end', fixedClassNames.track),
+                    style: styles(fixedStyles.track, orientation === 'vertical' ? {
                         bottom: '0',
-                        height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
+                        height: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,
                     } : {
                         right: '0',
-                        width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
+                        width: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,
                     }),
                     onClick: trackClickHandler,
-                }, (0, jsx_runtime_1.jsx)("div", { style: fixedStyles.trackHitbox })), (0, jsx_runtime_1.jsx)("button", { ref: knobContainerRef, style: fixedStyles.knobContainer, children: (0, utils_1.cloneStyledElement)((_d = components.knob) !== null && _d !== void 0 ? _d : (0, jsx_runtime_1.jsx)(exports.StepwiseSliderKnob, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.knob }), {
-                        className: (0, clsx_1.default)(fixedClassNames.knob),
-                        style: (0, utils_1.styles)(fixedStyles.knob),
-                    }, steps && labelProvider && (0, utils_1.cloneStyledElement)((_e = components.label) !== null && _e !== void 0 ? _e : (0, jsx_runtime_1.jsx)(exports.StepwiseSliderLabel, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.label }), {
-                        className: (0, clsx_1.default)(fixedClassNames.label),
-                        style: (0, utils_1.styles)(fixedStyles.label),
-                    }, labelProvider(position, getNearestIndexByPosition(position, steps)))) })] }) })));
+                }, _jsx("div", { style: fixedStyles.trackHitbox })), _jsx("button", { ref: knobContainerRef, style: fixedStyles.knobContainer, children: cloneStyledElement(components.knob ?? _jsx(StepwiseSliderKnob, { style: defaultStyles?.knob }), {
+                        className: clsx(fixedClassNames.knob),
+                        style: styles(fixedStyles.knob),
+                    }, steps && labelProvider && cloneStyledElement(components.label ?? _jsx(StepwiseSliderLabel, { style: defaultStyles?.label }), {
+                        className: clsx(fixedClassNames.label),
+                        style: styles(fixedStyles.label),
+                    }, labelProvider(position, getNearestIndexByPosition(position, steps)))) })] }) }));
 });
-Object.defineProperty(exports.StepwiseSlider, 'displayName', { value: 'StepwiseSlider', writable: false });
-var StepwiseSliderTrack = function (_a) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'track' }));
-};
-exports.StepwiseSliderTrack = StepwiseSliderTrack;
-var StepwiseSliderKnob = function (_a) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'knob' }));
-};
-exports.StepwiseSliderKnob = StepwiseSliderKnob;
-var StepwiseSliderLabel = function (_a) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'label' }));
-};
-exports.StepwiseSliderLabel = StepwiseSliderLabel;
+Object.defineProperty(StepwiseSlider, 'displayName', { value: 'StepwiseSlider', writable: false });
+export const StepwiseSliderTrack = ({ ...props }) => _jsx("div", { ...props, "data-child": 'track' });
+export const StepwiseSliderKnob = ({ ...props }) => _jsx("div", { ...props, "data-child": 'knob' });
+export const StepwiseSliderLabel = ({ ...props }) => _jsx("div", { ...props, "data-child": 'label' });
 /**
  * Generates a set of steps compatible with this component.
  *
@@ -208,14 +147,14 @@ exports.StepwiseSliderLabel = StepwiseSliderLabel;
  *
  * @returns An array of steps.
  */
-function generateSteps(length) {
+export 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;
+    const interval = 1 / (length - 1);
+    return Array(length).fill(null).map((v, i) => {
+        const position = interval * i;
         return position;
     });
 }
@@ -229,13 +168,13 @@ function generateSteps(length) {
  * @returns The nearest index.
  */
 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);
+    let index = -1;
+    let minDelta = NaN;
+    for (let i = 0, n = steps.length; i < n; i++) {
+        const step = getPositionAt(i, steps);
         if (isNaN(step))
             continue;
-        var delta = Math.abs(position - step);
+        const delta = Math.abs(position - step);
         if (isNaN(minDelta) || delta < minDelta) {
             minDelta = delta;
             index = i;
@@ -257,28 +196,27 @@ function getPositionAt(index, steps) {
         return NaN;
     return steps[index];
 }
-function getFixedClassNames(_a) {
-    var _b = _a.orientation, orientation = _b === void 0 ? 'vertical' : _b, _c = _a.isAtEnd, isAtEnd = _c === void 0 ? false : _c, _d = _a.isAtStart, isAtStart = _d === void 0 ? false : _d, _e = _a.isDragging, isDragging = _e === void 0 ? false : _e, _f = _a.isReleasing, isReleasing = _f === void 0 ? false : _f;
-    return (0, utils_1.asClassNameDict)({
-        root: (0, clsx_1.default)(orientation, {
+function getFixedClassNames({ orientation = 'vertical', isAtEnd = false, isAtStart = false, isDragging = false, isReleasing = false }) {
+    return asClassNameDict({
+        root: clsx(orientation, {
             'at-end': isAtEnd,
             'at-start': isAtStart,
             'dragging': isDragging,
             'releasing': isReleasing,
         }),
-        track: (0, clsx_1.default)(orientation, {
+        track: clsx(orientation, {
             'at-end': isAtEnd,
             'at-start': isAtStart,
             'dragging': isDragging,
             'releasing': isReleasing,
         }),
-        knob: (0, clsx_1.default)(orientation, {
+        knob: clsx(orientation, {
             'at-end': isAtEnd,
             'at-start': isAtStart,
             'dragging': isDragging,
             'releasing': isReleasing,
         }),
-        label: (0, clsx_1.default)(orientation, {
+        label: clsx(orientation, {
             'at-end': isAtEnd,
             'at-start': isAtStart,
             'dragging': isDragging,
@@ -286,42 +224,54 @@ function getFixedClassNames(_a) {
         }),
     });
 }
-function getFixedStyles(_a) {
-    var _b = _a.orientation, orientation = _b === void 0 ? 'vertical' : _b, _c = _a.naturalPosition, naturalPosition = _c === void 0 ? 0 : _c, _d = _a.isDragging, isDragging = _d === void 0 ? false : _d, _e = _a.knobHeight, knobHeight = _e === void 0 ? 0 : _e, _f = _a.knobWidth, knobWidth = _f === void 0 ? 0 : _f, _g = _a.isTrackInteractive, isTrackInteractive = _g === void 0 ? false : _g;
-    return (0, utils_1.asStyleDict)({
+function getFixedStyles({ orientation = 'vertical', naturalPosition = 0, isDragging = false, knobHeight = 0, knobWidth = 0, isTrackInteractive = false }) {
+    return asStyleDict({
         body: {
             height: '100%',
             width: '100%',
         },
-        knobContainer: __assign({ background: 'none', border: 'none', outline: 'none', position: 'absolute', transform: 'translate3d(-50%, -50%, 0)', zIndex: '1' }, 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',
-        }),
+        knobContainer: {
+            background: 'none',
+            border: 'none',
+            outline: 'none',
+            position: 'absolute',
+            transform: 'translate3d(-50%, -50%, 0)',
+            zIndex: '1',
+            ...orientation === 'vertical' ? {
+                left: '50%',
+                top: `${naturalPosition * 100}%`,
+                transition: isDragging === false ? 'top 100ms ease-out' : 'none',
+            } : {
+                left: `${naturalPosition * 100}%`,
+                top: '50%',
+                transition: isDragging === false ? 'left 100ms ease-out' : 'none',
+            },
+        },
         knob: {
-            height: "".concat(knobHeight, "px"),
+            height: `${knobHeight}px`,
             touchAction: 'none',
-            width: "".concat(knobWidth, "px"),
+            width: `${knobWidth}px`,
         },
         label: {
             pointerEvents: 'none',
             userSelect: 'none',
         },
-        track: __assign({ cursor: isTrackInteractive ? 'pointer' : 'auto', pointerEvents: isTrackInteractive ? 'auto' : 'none', position: 'absolute' }, orientation === 'vertical' ? {
-            left: '0',
-            margin: '0 auto',
-            right: '0',
-            width: '100%',
-        } : {
-            bottom: '0',
-            height: '100%',
-            margin: 'auto 0',
-            top: '0',
-        }),
+        track: {
+            cursor: isTrackInteractive ? 'pointer' : 'auto',
+            pointerEvents: isTrackInteractive ? 'auto' : 'none',
+            position: 'absolute',
+            ...orientation === 'vertical' ? {
+                left: '0',
+                margin: '0 auto',
+                right: '0',
+                width: '100%',
+            } : {
+                bottom: '0',
+                height: '100%',
+                margin: 'auto 0',
+                top: '0',
+            },
+        },
         trackHitbox: {
             height: '100%',
             minHeight: '20px',
@@ -332,9 +282,8 @@ function getFixedStyles(_a) {
         },
     });
 }
-function getDefaultStyles(_a) {
-    var _b = _a.knobHeight, knobHeight = _b === void 0 ? 0 : _b;
-    return (0, utils_1.asStyleDict)({
+function getDefaultStyles({ knobHeight = 0 }) {
+    return asStyleDict({
         knob: {
             alignItems: 'center',
             background: '#fff',
@@ -345,11 +294,10 @@ function getDefaultStyles(_a) {
         label: {
             color: '#000',
             fontSize: '12px',
-            lineHeight: "".concat(knobHeight, "px"),
+            lineHeight: `${knobHeight}px`,
         },
         track: {
             background: '#fff',
         },
     });
 }
-//# sourceMappingURL=StepwiseSlider.js.map

package/components/SwipeContainer.js

@@ -1,110 +1,67 @@
-"use strict";
-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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwipeContainer = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var spase_1 = require("spase");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { Point } from 'spase';
 /**
  * An empty component with a backing `<div>` element that detects swipe
  * gestures.
  */
-exports.SwipeContainer = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, _b = _a.isEnabled, isEnabled = _b === void 0 ? true : _b, _c = _a.threshold, threshold = _c === void 0 ? 0.5 : _c, onSwipeDown = _a.onSwipeDown, onSwipeLeft = _a.onSwipeLeft, onSwipeRight = _a.onSwipeRight, onSwipeUp = _a.onSwipeUp, props = __rest(_a, ["children", "isEnabled", "threshold", "onSwipeDown", "onSwipeLeft", "onSwipeRight", "onSwipeUp"]);
-    var _d = __read((0, react_1.useState)(undefined), 2), dragStartPosition = _d[0], setDragStartPosition = _d[1];
-    var _e = __read((0, react_1.useState)(undefined), 2), dragEndPosition = _e[0], setDragEndPosition = _e[1];
-    var _f = __read((0, react_1.useState)(NaN), 2), dragStartTime = _f[0], setDragStartTime = _f[1];
-    var onDragStart = function (x, y) {
+export const SwipeContainer = forwardRef(({ children, isEnabled = true, threshold = 0.5, onSwipeDown, onSwipeLeft, onSwipeRight, onSwipeUp, ...props }, ref) => {
+    const [dragStartPosition, setDragStartPosition] = useState(undefined);
+    const [dragEndPosition, setDragEndPosition] = useState(undefined);
+    const [dragStartTime, setDragStartTime] = useState(NaN);
+    const onDragStart = (x, y) => {
         if (isNaN(x) || isNaN(y))
             return onDragCancel();
-        setDragStartPosition(new spase_1.Point([x, y]));
+        setDragStartPosition(new Point([x, y]));
     };
-    var onDragMove = function (x, y) {
-        var startPosition = dragStartPosition;
+    const onDragMove = (x, y) => {
+        const startPosition = dragStartPosition;
         if (startPosition === undefined)
             return;
-        var hasMovement = startPosition.x !== x || startPosition.y !== y;
-        var hasStartTime = !isNaN(dragStartTime);
+        const hasMovement = startPosition.x !== x || startPosition.y !== y;
+        const hasStartTime = !isNaN(dragStartTime);
         if (!hasMovement)
             return;
         if (!hasStartTime)
             setDragStartTime(Date.now());
-        setDragEndPosition(new spase_1.Point([x, y]));
+        setDragEndPosition(new Point([x, y]));
     };
-    var onDragEnd = function () {
-        var time = dragStartTime;
-        var startPosition = dragStartPosition;
-        var endPosition = dragEndPosition;
+    const onDragEnd = () => {
+        const time = dragStartTime;
+        const startPosition = dragStartPosition;
+        const endPosition = dragEndPosition;
         if (isNaN(time) || startPosition === undefined || endPosition === undefined)
             return;
-        var dt = Date.now() - time;
-        var dx = endPosition.x - startPosition.x;
-        var dy = endPosition.y - startPosition.y;
-        var vx = dx / dt;
-        var vy = dy / dt;
+        const dt = Date.now() - time;
+        const dx = endPosition.x - startPosition.x;
+        const dy = endPosition.y - startPosition.y;
+        const vx = dx / dt;
+        const vy = dy / dt;
         if (isEnabled) {
             if (Math.abs(vx) >= threshold && Math.abs(vx) > Math.abs(vy)) {
                 if (vx > 0) {
-                    onSwipeRight === null || onSwipeRight === void 0 ? void 0 : onSwipeRight();
+                    onSwipeRight?.();
                 }
                 else {
-                    onSwipeLeft === null || onSwipeLeft === void 0 ? void 0 : onSwipeLeft();
+                    onSwipeLeft?.();
                 }
             }
             else if (Math.abs(vy) >= threshold && Math.abs(vy) > Math.abs(vx)) {
                 if (vy > 0) {
-                    onSwipeDown === null || onSwipeDown === void 0 ? void 0 : onSwipeDown();
+                    onSwipeDown?.();
                 }
                 else {
-                    onSwipeUp === null || onSwipeUp === void 0 ? void 0 : onSwipeUp();
+                    onSwipeUp?.();
                 }
             }
         }
         onDragCancel();
     };
-    var onDragCancel = function () {
+    const onDragCancel = () => {
         setDragStartPosition(undefined);
         setDragEndPosition(undefined);
         setDragStartTime(NaN);
     };
-    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-component": 'swipe-container', onMouseDown: function (event) { return onDragStart(event.clientX, event.clientY); }, onMouseLeave: function () { return onDragCancel(); }, onMouseMove: function (event) { return onDragMove(event.clientX, event.clientY); }, onMouseUp: function () { return onDragEnd(); }, onTouchEnd: function () { return onDragEnd(); }, onTouchMove: function (event) { return onDragMove(event.targetTouches[0].clientX, event.targetTouches[0].clientY); }, onTouchStart: function (event) { return onDragStart(event.targetTouches[0].clientX, event.targetTouches[0].clientY); }, children: children })));
+    return (_jsx("div", { ...props, ref: ref, "data-component": 'swipe-container', onMouseDown: event => onDragStart(event.clientX, event.clientY), onMouseLeave: () => onDragCancel(), onMouseMove: event => onDragMove(event.clientX, event.clientY), onMouseUp: () => onDragEnd(), onTouchEnd: () => onDragEnd(), onTouchMove: event => onDragMove(event.targetTouches[0].clientX, event.targetTouches[0].clientY), onTouchStart: event => onDragStart(event.targetTouches[0].clientX, event.targetTouches[0].clientY), children: children }));
 });
-Object.defineProperty(exports.SwipeContainer, 'displayName', { value: 'SwipeContainer', writable: false });
-//# sourceMappingURL=SwipeContainer.js.map
+Object.defineProperty(SwipeContainer, 'displayName', { value: 'SwipeContainer', writable: false });