etudes 5.2.0 → 5.3.0

package/components/RangeSlider.js

@@ -1,79 +1,24 @@
-"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RangeSliderKnob = exports.RangeSliderHighlight = exports.RangeSliderLabel = exports.RangeSliderGutter = exports.RangeSlider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var clsx_1 = __importDefault(require("clsx"));
-var react_1 = __importDefault(require("fast-deep-equal/react"));
-var react_2 = require("react");
-var useDragValueEffect_1 = require("../hooks/useDragValueEffect");
-var useRect_1 = require("../hooks/useRect");
-var utils_1 = require("../utils");
-exports.RangeSlider = (0, react_2.forwardRef)(function (_a, ref) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var children = _a.children, className = _a.className, _k = _a.areLabelsVisible, areLabelsVisible = _k === void 0 ? true : _k, _l = _a.decimalPlaces, decimalPlaces = _l === void 0 ? 2 : _l, _m = _a.knobPadding, knobPadding = _m === void 0 ? 20 : _m, maxValue = _a.max, minValue = _a.min, _o = _a.orientation, orientation = _o === void 0 ? 'vertical' : _o, externalRange = _a.range, _p = _a.steps, steps = _p === void 0 ? -1 : _p, _q = _a.usesDefaultStyles, usesDefaultStyles = _q === void 0 ? false : _q, onRangeChange = _a.onRangeChange, props = __rest(_a, ["children", "className", "areLabelsVisible", "decimalPlaces", "knobPadding", "max", "min", "orientation", "range", "steps", "usesDefaultStyles", "onRangeChange"]);
-    var getPositionByValue = function (value) { return (value - minValue) / (maxValue - minValue); };
-    var getPositionByDisplacement = function (displacement) { return displacement / (orientation === 'horizontal' ? bodyRect.width : bodyRect.height); };
-    var getValueByPosition = function (position) { return position * (maxValue - minValue) + minValue; };
-    var getValueByDisplacement = function (displacement) { return getValueByPosition(getPositionByDisplacement(displacement)); };
-    var getDisplacementByPosition = function (position) { return position * (orientation === 'horizontal' ? bodyRect.width : bodyRect.height); };
-    var getDisplacementByValue = function (value) { return getDisplacementByPosition(getPositionByValue(value)); };
-    var getClosestSteppedValue = function (value) {
-        var n = breakpoints.length;
-        var idx = 0;
-        var diff = Infinity;
-        for (var i = 0; i < n; i++) {
-            var t = breakpoints[i];
-            var d = Math.abs(value - t);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import isDeepEqual from 'fast-deep-equal/react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useDragValueEffect } from '../hooks/useDragValueEffect.js';
+import { useRect } from '../hooks/useRect.js';
+import { asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
+export const RangeSlider = forwardRef(({ children, className, areLabelsVisible = true, decimalPlaces = 2, knobPadding = 20, max: maxValue, min: minValue, orientation = 'vertical', range: externalRange, steps = -1, usesDefaultStyles = false, onRangeChange, ...props }, ref) => {
+    const getPositionByValue = (value) => (value - minValue) / (maxValue - minValue);
+    const getPositionByDisplacement = (displacement) => displacement / (orientation === 'horizontal' ? bodyRect.width : bodyRect.height);
+    const getValueByPosition = (position) => position * (maxValue - minValue) + minValue;
+    const getValueByDisplacement = (displacement) => getValueByPosition(getPositionByDisplacement(displacement));
+    const getDisplacementByPosition = (position) => position * (orientation === 'horizontal' ? bodyRect.width : bodyRect.height);
+    const getDisplacementByValue = (value) => getDisplacementByPosition(getPositionByValue(value));
+    const getClosestSteppedValue = (value) => {
+        const n = breakpoints.length;
+        let idx = 0;
+        let diff = Infinity;
+        for (let i = 0; i < n; i++) {
+            const t = breakpoints[i];
+            const d = Math.abs(value - t);
             if (d < diff) {
                 diff = d;
                 idx = i;
@@ -81,143 +26,130 @@ exports.RangeSlider = (0, react_2.forwardRef)(function (_a, ref) {
         }
         return breakpoints[idx];
     };
-    var bodyRef = (0, react_2.useRef)(null);
-    var bodyRect = (0, useRect_1.useRect)(bodyRef);
-    var startKnobRef = (0, react_2.useRef)(null);
-    var endKnobRef = (0, react_2.useRef)(null);
-    var _r = __read((0, react_2.useState)(externalRange !== null && externalRange !== void 0 ? externalRange : [minValue, maxValue]), 2), range = _r[0], setRange = _r[1];
-    var _s = (0, useDragValueEffect_1.useDragValueEffect)(startKnobRef, {
-        initialValue: (_b = externalRange === null || externalRange === void 0 ? void 0 : externalRange[0]) !== null && _b !== void 0 ? _b : minValue,
-        transform: function (value, dx, dy) {
-            var delta = orientation === 'horizontal' ? dx : dy;
-            var dMin = getDisplacementByValue(minValue);
-            var dMax = getDisplacementByValue(range[1]);
-            var dCurr = getDisplacementByValue(value) + delta;
+    const bodyRef = useRef(null);
+    const bodyRect = useRect(bodyRef);
+    const startKnobRef = useRef(null);
+    const endKnobRef = useRef(null);
+    const [range, setRange] = useState(externalRange ?? [minValue, maxValue]);
+    const { isDragging: [isDraggingStartKnob], isReleasing: [isReleasingStartKnob], value: [startValue, setStartValue] } = useDragValueEffect(startKnobRef, {
+        initialValue: externalRange?.[0] ?? minValue,
+        transform: (value, dx, dy) => {
+            const delta = orientation === 'horizontal' ? dx : dy;
+            const dMin = getDisplacementByValue(minValue);
+            const dMax = getDisplacementByValue(range[1]);
+            const dCurr = getDisplacementByValue(value) + delta;
             return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)));
         },
-    }, [minValue, orientation, bodyRect.size.width, bodyRect.size.height, range[1]]), _t = __read(_s.isDragging, 1), isDraggingStartKnob = _t[0], _u = __read(_s.isReleasing, 1), isReleasingStartKnob = _u[0], _v = __read(_s.value, 2), startValue = _v[0], setStartValue = _v[1];
-    var _w = (0, useDragValueEffect_1.useDragValueEffect)(endKnobRef, {
-        initialValue: (_c = externalRange === null || externalRange === void 0 ? void 0 : externalRange[1]) !== null && _c !== void 0 ? _c : maxValue,
-        transform: function (value, dx, dy) {
-            var delta = orientation === 'horizontal' ? dx : dy;
-            var dMin = getDisplacementByValue(range[0]);
-            var dMax = getDisplacementByValue(maxValue);
-            var dCurr = getDisplacementByValue(value) + delta;
+    }, [minValue, orientation, bodyRect.size.width, bodyRect.size.height, range[1]]);
+    const { isDragging: [isDraggingEndKnob], isReleasing: [isReleasingEndKnob], value: [endValue, setEndValue] } = useDragValueEffect(endKnobRef, {
+        initialValue: externalRange?.[1] ?? maxValue,
+        transform: (value, dx, dy) => {
+            const delta = orientation === 'horizontal' ? dx : dy;
+            const dMin = getDisplacementByValue(range[0]);
+            const dMax = getDisplacementByValue(maxValue);
+            const dCurr = getDisplacementByValue(value) + delta;
             return getValueByDisplacement(Math.max(dMin, Math.min(dMax, dCurr)));
         },
-    }, [maxValue, orientation, bodyRect.size.width, bodyRect.size.height, range[0]]), _x = __read(_w.isDragging, 1), isDraggingEndKnob = _x[0], _y = __read(_w.isReleasing, 1), isReleasingEndKnob = _y[0], _z = __read(_w.value, 2), endValue = _z[0], setEndValue = _z[1];
-    var breakpoints = __spreadArray(__spreadArray([minValue], __read(__spreadArray([], __read(Array(steps)), false).map(function (v, i) { return minValue + (i + 1) * (maxValue - minValue) / (1 + steps); })), false), [maxValue], false);
-    var _0 = __read(range.map(getDisplacementByValue), 2), start = _0[0], end = _0[1];
-    var highlightLength = end - start;
-    (0, react_2.useEffect)(function () {
+    }, [maxValue, orientation, bodyRect.size.width, bodyRect.size.height, range[0]]);
+    const breakpoints = [minValue, ...[...Array(steps)].map((v, i) => minValue + (i + 1) * (maxValue - minValue) / (1 + steps)), maxValue];
+    const [start, end] = range.map(getDisplacementByValue);
+    const highlightLength = end - start;
+    useEffect(() => {
         if (range[0] === startValue)
             return;
         setRange([startValue, range[1]]);
-        onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
+        onRangeChange?.(range);
     }, [startValue]);
-    (0, react_2.useEffect)(function () {
+    useEffect(() => {
         if (range[1] === endValue)
             return;
         setRange([range[0], endValue]);
-        onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
+        onRangeChange?.(range);
     }, [endValue]);
-    (0, react_2.useEffect)(function () {
-        if (isDraggingStartKnob || isDraggingEndKnob || (0, react_1.default)(externalRange, range))
+    useEffect(() => {
+        if (isDraggingStartKnob || isDraggingEndKnob || isDeepEqual(externalRange, range))
             return;
-        setRange(externalRange !== null && externalRange !== void 0 ? externalRange : [minValue, maxValue]);
+        setRange(externalRange ?? [minValue, maxValue]);
     }, [externalRange]);
-    (0, react_2.useEffect)(function () {
+    useEffect(() => {
         if (steps < 0)
             return;
         setStartValue(getClosestSteppedValue(startValue));
     }, [isReleasingStartKnob]);
-    (0, react_2.useEffect)(function () {
+    useEffect(() => {
         if (steps < 0 || !isReleasingEndKnob)
             return;
         setEndValue(getClosestSteppedValue(endValue));
     }, [isReleasingEndKnob]);
-    var components = (0, utils_1.asComponentDict)(children, {
-        gutter: exports.RangeSliderGutter,
-        highlight: exports.RangeSliderHighlight,
-        knob: exports.RangeSliderKnob,
-        label: exports.RangeSliderLabel,
+    const components = asComponentDict(children, {
+        gutter: RangeSliderGutter,
+        highlight: RangeSliderHighlight,
+        knob: RangeSliderKnob,
+        label: RangeSliderLabel,
     });
-    var fixedStyles = getFixedStyles({ orientation: orientation, highlightLength: highlightLength, start: start, knobPadding: knobPadding });
-    var defaultStyles = usesDefaultStyles ? getDefaultStyles({ isReleasingStartKnob: isReleasingStartKnob, isReleasingEndKnob: isReleasingEndKnob, orientation: orientation }) : undefined;
-    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, orientation), "data-component": 'range-slider', children: (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, style: fixedStyles.body, children: [(0, utils_1.cloneStyledElement)((_d = components.gutter) !== null && _d !== void 0 ? _d : (0, jsx_runtime_1.jsx)(exports.RangeSliderGutter, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.gutter }), {
-                    style: (0, utils_1.styles)(fixedStyles.gutter),
-                }), (0, utils_1.cloneStyledElement)((_e = components.highlight) !== null && _e !== void 0 ? _e : (0, jsx_runtime_1.jsx)(exports.RangeSliderHighlight, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.highlight }), {
-                    style: (0, utils_1.styles)(fixedStyles.highlight),
-                }), (0, utils_1.cloneStyledElement)((_f = components.knob) !== null && _f !== void 0 ? _f : (0, jsx_runtime_1.jsx)(exports.RangeSliderKnob, { style: (0, utils_1.styles)(defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.knob, {
+    const fixedStyles = getFixedStyles({ orientation, highlightLength, start, knobPadding });
+    const defaultStyles = usesDefaultStyles ? getDefaultStyles({ isReleasingStartKnob, isReleasingEndKnob, orientation }) : undefined;
+    return (_jsx("div", { ...props, ref: ref, className: clsx(className, orientation), "data-component": 'range-slider', children: _jsxs("div", { ref: bodyRef, style: fixedStyles.body, children: [cloneStyledElement(components.gutter ?? _jsx(RangeSliderGutter, { style: defaultStyles?.gutter }), {
+                    style: styles(fixedStyles.gutter),
+                }), cloneStyledElement(components.highlight ?? _jsx(RangeSliderHighlight, { style: defaultStyles?.highlight }), {
+                    style: styles(fixedStyles.highlight),
+                }), cloneStyledElement(components.knob ?? _jsx(RangeSliderKnob, { style: styles(defaultStyles?.knob, {
                         transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',
                     }) }), {
                     ref: startKnobRef,
-                    disabled: (0, react_1.default)([startValue, endValue], [maxValue, maxValue]),
-                    className: (0, clsx_1.default)({
+                    disabled: isDeepEqual([startValue, endValue], [maxValue, maxValue]),
+                    className: clsx({
                         dragging: isDraggingStartKnob,
                         releasing: isReleasingStartKnob,
                     }),
-                    style: (0, utils_1.styles)(fixedStyles.knob, {
-                        pointerEvents: (0, react_1.default)([startValue, endValue], [minValue, minValue]) ? 'none' : 'auto',
+                    style: styles(fixedStyles.knob, {
+                        pointerEvents: isDeepEqual([startValue, endValue], [minValue, minValue]) ? 'none' : 'auto',
                     }, orientation === 'horizontal' ? {
-                        marginLeft: "".concat(start, "px"),
+                        marginLeft: `${start}px`,
                     } : {
-                        marginTop: "".concat(start, "px"),
+                        marginTop: `${start}px`,
                     }),
-                }, (0, jsx_runtime_1.jsx)("div", { style: fixedStyles.knobHitbox }), areLabelsVisible && (0, utils_1.cloneStyledElement)((_g = components.label) !== null && _g !== void 0 ? _g : (0, jsx_runtime_1.jsx)(exports.RangeSliderLabel, { style: (0, utils_1.styles)(defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.label, {
+                }, _jsx("div", { style: fixedStyles.knobHitbox }), areLabelsVisible && cloneStyledElement(components.label ?? _jsx(RangeSliderLabel, { style: styles(defaultStyles?.label, {
                         transitionProperty: isReleasingStartKnob ? 'opacity, transform' : 'opacity',
                     }) }), {
-                    className: (0, clsx_1.default)({
+                    className: clsx({
                         dragging: isDraggingStartKnob || isDraggingEndKnob,
                         releasing: isReleasingStartKnob || isReleasingEndKnob,
                     }),
-                    style: (0, utils_1.styles)(fixedStyles.label),
-                }, Number(startValue.toFixed(decimalPlaces)).toLocaleString())), (0, utils_1.cloneStyledElement)((_h = components.knob) !== null && _h !== void 0 ? _h : (0, jsx_runtime_1.jsx)(exports.RangeSliderKnob, { style: (0, utils_1.styles)(defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.knob, {
+                    style: styles(fixedStyles.label),
+                }, Number(startValue.toFixed(decimalPlaces)).toLocaleString())), cloneStyledElement(components.knob ?? _jsx(RangeSliderKnob, { style: styles(defaultStyles?.knob, {
                         transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',
                     }) }), {
                     ref: endKnobRef,
-                    disabled: (0, react_1.default)([startValue, endValue], [maxValue, maxValue]),
-                    className: (0, clsx_1.default)({
+                    disabled: isDeepEqual([startValue, endValue], [maxValue, maxValue]),
+                    className: clsx({
                         dragging: isDraggingEndKnob,
                         releasing: isDraggingEndKnob,
                     }),
-                    style: (0, utils_1.styles)(fixedStyles.knob, {
-                        pointerEvents: (0, react_1.default)([startValue, endValue], [maxValue, maxValue]) ? 'none' : 'auto',
+                    style: styles(fixedStyles.knob, {
+                        pointerEvents: isDeepEqual([startValue, endValue], [maxValue, maxValue]) ? 'none' : 'auto',
                     }, orientation === 'horizontal' ? {
-                        marginLeft: "".concat(end, "px"),
+                        marginLeft: `${end}px`,
                     } : {
-                        marginTop: "".concat(end, "px"),
+                        marginTop: `${end}px`,
                     }),
-                }, (0, jsx_runtime_1.jsx)("div", { style: fixedStyles.knobHitbox }), areLabelsVisible && (0, utils_1.cloneStyledElement)((_j = components.label) !== null && _j !== void 0 ? _j : (0, jsx_runtime_1.jsx)(exports.RangeSliderLabel, { style: (0, utils_1.styles)(defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.label, {
+                }, _jsx("div", { style: fixedStyles.knobHitbox }), areLabelsVisible && cloneStyledElement(components.label ?? _jsx(RangeSliderLabel, { style: styles(defaultStyles?.label, {
                         transitionProperty: isReleasingEndKnob ? 'opacity, transform' : 'opacity',
                     }) }), {
-                    className: (0, clsx_1.default)({
+                    className: clsx({
                         dragging: isDraggingEndKnob,
                         releasing: isReleasingEndKnob,
                     }),
-                    style: (0, utils_1.styles)(fixedStyles.label),
-                }, Number(endValue.toFixed(decimalPlaces)).toLocaleString()))] }) })));
+                    style: styles(fixedStyles.label),
+                }, Number(endValue.toFixed(decimalPlaces)).toLocaleString()))] }) }));
 });
-Object.defineProperty(exports.RangeSlider, 'displayName', { value: 'RangeSlider', writable: false });
-exports.RangeSliderGutter = (0, react_2.forwardRef)(function (_a, ref) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-child": 'gutter' }));
-});
-exports.RangeSliderLabel = (0, react_2.forwardRef)(function (_a, ref) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-child": 'label' }));
-});
-exports.RangeSliderHighlight = (0, react_2.forwardRef)(function (_a, ref) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-child": 'highlight' }));
-});
-exports.RangeSliderKnob = (0, react_2.forwardRef)(function (_a, ref) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-child": 'knob' }));
-});
-function getFixedStyles(_a) {
-    var _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, _c = _a.highlightLength, highlightLength = _c === void 0 ? 0 : _c, _d = _a.start, start = _d === void 0 ? 0 : _d, _e = _a.knobPadding, knobPadding = _e === void 0 ? 0 : _e;
-    return (0, utils_1.asStyleDict)({
+Object.defineProperty(RangeSlider, 'displayName', { value: 'RangeSlider', writable: false });
+export const RangeSliderGutter = forwardRef(({ ...props }, ref) => _jsx("div", { ...props, ref: ref, "data-child": 'gutter' }));
+export const RangeSliderLabel = forwardRef(({ ...props }, ref) => _jsx("div", { ...props, ref: ref, "data-child": 'label' }));
+export const RangeSliderHighlight = forwardRef(({ ...props }, ref) => _jsx("div", { ...props, ref: ref, "data-child": 'highlight' }));
+export const RangeSliderKnob = forwardRef(({ ...props }, ref) => _jsx("div", { ...props, ref: ref, "data-child": 'knob' }));
+function getFixedStyles({ orientation = 'horizontal', highlightLength = 0, start = 0, knobPadding = 0 }) {
+    return asStyleDict({
         body: {
             height: '100%',
             width: '100%',
@@ -230,13 +162,19 @@ function getFixedStyles(_a) {
             width: '100%',
             height: '100%',
         },
-        highlight: __assign({ height: '100%', left: '0', position: 'absolute', top: '0' }, orientation === 'horizontal' ? {
-            width: "".concat(highlightLength, "px"),
-            transform: "translate3d(".concat(start, "px, 0, 0)"),
-        } : {
-            height: "".concat(highlightLength, "px"),
-            transform: "translate3d(0, ".concat(start, "px, 0)"),
-        }),
+        highlight: {
+            height: '100%',
+            left: '0',
+            position: 'absolute',
+            top: '0',
+            ...orientation === 'horizontal' ? {
+                width: `${highlightLength}px`,
+                transform: `translate3d(${start}px, 0, 0)`,
+            } : {
+                height: `${highlightLength}px`,
+                transform: `translate3d(0, ${start}px, 0)`,
+            },
+        },
         knob: {
             bottom: '0',
             left: '0',
@@ -249,12 +187,12 @@ function getFixedStyles(_a) {
         },
         knobHitbox: {
             background: 'transparent',
-            height: "calc(100% + ".concat(knobPadding * 2, "px)"),
-            left: "-".concat(knobPadding, "px"),
-            padding: "".concat(knobPadding, "px"),
+            height: `calc(100% + ${knobPadding * 2}px)`,
+            left: `-${knobPadding}px`,
+            padding: `${knobPadding}px`,
             position: 'absolute',
-            top: "-".concat(knobPadding, "px"),
-            width: "calc(100% + ".concat(knobPadding * 2, "px)"),
+            top: `-${knobPadding}px`,
+            width: `calc(100% + ${knobPadding * 2}px)`,
         },
         label: {
             pointerEvents: 'none',
@@ -263,9 +201,8 @@ function getFixedStyles(_a) {
         },
     });
 }
-function getDefaultStyles(_a) {
-    var _b = _a.isReleasingStartKnob, isReleasingStartKnob = _b === void 0 ? false : _b, _c = _a.isReleasingEndKnob, isReleasingEndKnob = _c === void 0 ? false : _c, _d = _a.orientation, orientation = _d === void 0 ? 'horizontal' : _d;
-    return (0, utils_1.asStyleDict)({
+function getDefaultStyles({ isReleasingStartKnob = false, isReleasingEndKnob = false, orientation = 'horizontal' }) {
+    return asStyleDict({
         gutter: {
             background: 'rgba(255, 255, 255, .2)',
         },
@@ -287,11 +224,17 @@ function getDefaultStyles(_a) {
             transitionTimingFunction: 'ease-out',
             width: '20px',
         },
-        label: __assign({ background: 'transparent', color: '#fff', textAlign: 'center', transitionDuration: '100ms', transitionTimingFunction: 'ease-out' }, orientation === 'horizontal' ? {
-            top: 'calc(100% + 10px)',
-        } : {
-            left: 'calc(100% + 10px)',
-        }),
+        label: {
+            background: 'transparent',
+            color: '#fff',
+            textAlign: 'center',
+            transitionDuration: '100ms',
+            transitionTimingFunction: 'ease-out',
+            ...orientation === 'horizontal' ? {
+                top: 'calc(100% + 10px)',
+            } : {
+                left: 'calc(100% + 10px)',
+            },
+        },
     });
 }
-//# sourceMappingURL=RangeSlider.js.map

package/components/RotatingGallery.js

@@ -1,89 +1,58 @@
-"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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RotatingGallery = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var clsx_1 = __importDefault(require("clsx"));
-var react_1 = require("react");
-var useInterval_1 = require("../hooks/useInterval");
-var Each_1 = require("../operators/Each");
-var utils_1 = require("../utils");
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import { useInterval } from '../hooks/useInterval.js';
+import { Each } from '../operators/Each.js';
+import { asClassNameDict, asStyleDict, styles } from '../utils/index.js';
 /**
  * A component displaying rotating images.
  */
-exports.RotatingGallery = (0, react_1.forwardRef)(function (_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.index, index = _b === void 0 ? 0 : _b, _c = _a.lazy, lazy = _c === void 0 ? true : _c, _d = _a.rotationDuration, rotationDuration = _d === void 0 ? 5000 : _d, _e = _a.srcs, srcs = _e === void 0 ? [] : _e, _f = _a.transitionDuration, transitionDuration = _f === void 0 ? 500 : _f, _g = _a.usesDefaultStyles, usesDefaultStyles = _g === void 0 ? true : _g, onIndexChange = _a.onIndexChange, ImageComponent = _a.ImageComponent, props = __rest(_a, ["children", "className", "index", "lazy", "rotationDuration", "srcs", "transitionDuration", "usesDefaultStyles", "onIndexChange", "ImageComponent"]);
-    var handleIndexChange = function (newValue) {
-        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(newValue);
+export const RotatingGallery = forwardRef(({ children, className, index = 0, lazy = true, rotationDuration = 5000, srcs = [], transitionDuration = 500, usesDefaultStyles = true, onIndexChange, ImageComponent, ...props }, ref) => {
+    const handleIndexChange = (newValue) => {
+        onIndexChange?.(newValue);
     };
-    var fixedClassNames = getFixedClassNames();
-    var fixedStyles = getFixedStyles({ transitionDuration: transitionDuration });
-    var defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined;
-    (0, useInterval_1.useInterval)(function () {
+    const fixedClassNames = getFixedClassNames();
+    const fixedStyles = getFixedStyles({ transitionDuration });
+    const defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined;
+    useInterval(() => {
         handleIndexChange((index + 1) % srcs.length);
     }, rotationDuration, undefined, [JSON.stringify(srcs), index]);
-    (0, react_1.useEffect)(function () {
-        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(index);
+    useEffect(() => {
+        onIndexChange?.(index);
     }, [index]);
-    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, fixedClassNames.root), "data-component": 'rotating-gallery', children: (0, jsx_runtime_1.jsx)(Each_1.Each, { in: srcs, children: function (src, idx) {
-                var isVisible = idx === index;
-                return ImageComponent ? ((0, jsx_runtime_1.jsx)(ImageComponent, { className: (0, clsx_1.default)(fixedClassNames.image), "data-child": 'item', index: idx, isVisible: isVisible, src: src, style: (0, utils_1.styles)(fixedStyles.image, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.image, usesDefaultStyles ? {
+    return (_jsx("div", { ...props, ref: ref, className: clsx(className, fixedClassNames.root), "data-component": 'rotating-gallery', children: _jsx(Each, { in: srcs, children: (src, idx) => {
+                const isVisible = idx === index;
+                return ImageComponent ? (_jsx(ImageComponent, { className: clsx(fixedClassNames.image), "data-child": 'item', index: idx, isVisible: isVisible, src: src, style: styles(fixedStyles.image, defaultStyles?.image, usesDefaultStyles ? {
                         opacity: isVisible ? '1' : '0',
-                    } : {}) })) : ((0, jsx_runtime_1.jsx)("img", { className: (0, clsx_1.default)(fixedClassNames.image), "data-child": 'item', loading: lazy ? 'lazy' : 'eager', src: src, style: (0, utils_1.styles)(fixedStyles.image, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.image, usesDefaultStyles ? {
+                    } : {}) })) : (_jsx("img", { className: clsx(fixedClassNames.image), "data-child": 'item', loading: lazy ? 'lazy' : 'eager', src: src, style: styles(fixedStyles.image, defaultStyles?.image, usesDefaultStyles ? {
                         opacity: isVisible ? '1' : '0',
                     } : {}) }));
-            } }) })));
+            } }) }));
 });
-Object.defineProperty(exports.RotatingGallery, 'displayName', { value: 'RotatingGallery', writable: false });
+Object.defineProperty(RotatingGallery, 'displayName', { value: 'RotatingGallery', writable: false });
 function getFixedClassNames() {
-    return (0, utils_1.asClassNameDict)({
-        root: (0, clsx_1.default)('rotating-gallery'),
-        image: (0, clsx_1.default)('image'),
+    return asClassNameDict({
+        root: clsx('rotating-gallery'),
+        image: clsx('image'),
     });
 }
-function getFixedStyles(_a) {
-    var _b = _a.transitionDuration, transitionDuration = _b === void 0 ? 0 : _b;
-    return (0, utils_1.asStyleDict)({
+function getFixedStyles({ transitionDuration = 0 }) {
+    return asStyleDict({
         image: {
             height: '100%',
             left: '0',
             position: 'absolute',
             top: '0',
             width: '100%',
-            transitionDuration: "".concat(transitionDuration, "ms"),
+            transitionDuration: `${transitionDuration}ms`,
         },
     });
 }
 function getDefaultStyles() {
-    return (0, utils_1.asStyleDict)({
+    return asStyleDict({
         image: {
             transitionProperty: 'opacity',
             transitionTimingFunction: 'linear',
         },
     });
 }
-//# sourceMappingURL=RotatingGallery.js.map

package/components/SelectableButton.js

@@ -1,68 +1,24 @@
-"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.SelectableButton = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-exports.SelectableButton = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b;
-    var children = _a.children, _c = _a.isDeselectable, isDeselectable = _c === void 0 ? false : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isSelected, externalIsSelected = _e === void 0 ? false : _e, label = _a.label, onDeselect = _a.onDeselect, onSelect = _a.onSelect, props = __rest(_a, ["children", "isDeselectable", "isDisabled", "isSelected", "label", "onDeselect", "onSelect"]);
-    var _f = __read((0, react_1.useState)(externalIsSelected), 2), isSelected = _f[0], setIsSelected = _f[1];
-    var toggleSelection = function () {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from 'react';
+export const SelectableButton = forwardRef(({ children, isDeselectable = false, isDisabled = false, isSelected: externalIsSelected = false, label, onDeselect, onSelect, ...props }, ref) => {
+    const [isSelected, setIsSelected] = useState(externalIsSelected);
+    const toggleSelection = () => {
         if (isDisabled)
             return;
         if (isSelected) {
             if (!isDeselectable)
                 return;
             setIsSelected(false);
-            onDeselect === null || onDeselect === void 0 ? void 0 : onDeselect();
+            onDeselect?.();
         }
         else {
             setIsSelected(true);
-            onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+            onSelect?.();
         }
     };
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         setIsSelected(externalIsSelected);
     }, [externalIsSelected]);
-    return ((0, jsx_runtime_1.jsx)("button", __assign({}, props, { ref: ref, "data-component": 'selectable-button', disabled: isDisabled || isSelected && !isDeselectable, onClick: function () { return toggleSelection(); }, children: (_b = children === null || children === void 0 ? void 0 : children({ isDeselectable: isDeselectable, isDisabled: isDisabled, isSelected: isSelected, label: label })) !== null && _b !== void 0 ? _b : label })));
+    return (_jsx("button", { ...props, ref: ref, "data-component": 'selectable-button', disabled: isDisabled || isSelected && !isDeselectable, onClick: () => toggleSelection(), children: children?.({ isDeselectable, isDisabled, isSelected, label }) ?? label }));
 });
-Object.defineProperty(exports.SelectableButton, 'displayName', { value: 'SelectableButton', writable: false });
-//# sourceMappingURL=SelectableButton.js.map
+Object.defineProperty(SelectableButton, 'displayName', { value: 'SelectableButton', writable: false });