etudes 5.0.0 → 5.2.0

package/components/StepwiseSlider.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
@@ -108,50 +108,50 @@ export type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChil
  * @exports StepwiseSliderTrack The component for the slide track on either side
  *                                of the knob.
  */
-export declare const StepwiseSlider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+export declare const StepwiseSlider: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     /**
      * By default the position is a value from 0 - 1, 0 being the start of the
      * slider and 1 being the end. Switching on this flag inverts this behavior,
      * where 0 becomes the end of the slider and 1 being the start.
      */
-    isInverted?: boolean | undefined;
+    isInverted?: boolean;
     /**
      * Specifies if the track is clickable to set the position of the knob.
      */
-    isTrackInteractive?: boolean | undefined;
+    isTrackInteractive?: boolean;
     /**
      * Indicates if position/index change events are dispatched only when dragging
      * ends. When disabled, aforementioned events are fired repeatedly while
      * dragging.
      */
-    onlyDispatchesOnDragEnd?: boolean | undefined;
+    onlyDispatchesOnDragEnd?: boolean;
     /**
      * Padding between the track and the knob in pixels.
      */
-    trackPadding?: number | undefined;
+    trackPadding?: number;
     /**
      * Height of the knob in pixels.
      */
-    knobHeight?: number | undefined;
+    knobHeight?: number;
     /**
      * Width of the knob in pixels.
      */
-    knobWidth?: number | undefined;
+    knobWidth?: number;
     /**
      * Orientation of the slider.
      */
-    orientation?: Orientation | undefined;
+    orientation?: Orientation;
     /**
      * An array of step descriptors. A step is a position (0 - 1 inclusive) on the
      * track where the knob should snap to if dragging stops near it. Ensure that
      * there are at least two steps: one for the start of the track and one for
      * the end.
      */
-    steps?: readonly number[] | undefined;
+    steps?: readonly number[];
     /**
      * The current index.
      */
-    index?: number | undefined;
+    index?: number;
     /**
      * A function that returns the label to be displayed at a given slider
      * position and closest step index (if steps are provided).
@@ -162,11 +162,11 @@ export declare const StepwiseSlider: React.ForwardRefExoticComponent<React.HTMLA
      *
      * @returns The label.
      */
-    labelProvider?: ((position: number, index: number) => string) | undefined;
+    labelProvider?: (position: number, index: number) => string;
     /**
      * Specifies if the component should use default styles.
      */
-    usesDefaultStyles?: boolean | undefined;
+    usesDefaultStyles?: boolean;
     /**
      * Handler invoked when index changes. This can either be invoked from the
      * `index` prop being changed or from the slider being dragged. Note that if
@@ -177,7 +177,7 @@ export declare const StepwiseSlider: React.ForwardRefExoticComponent<React.HTMLA
      * @param index The current slider index.
      * @param isDragging Specifies if the index change is due to dragging.
      */
-    onIndexChange?: ((index: number, isDragging: boolean) => void) | undefined;
+    onIndexChange?: (index: number, isDragging: boolean) => void;
     /**
      * Handler invoked when position changes. This can either be invoked from the
      * `index` prop being changed or from the slider being dragged. Note that if
@@ -188,21 +188,21 @@ export declare const StepwiseSlider: React.ForwardRefExoticComponent<React.HTMLA
      * @param position The current slider position.
      * @param isDragging Specifies if the position change is due to dragging.
      */
-    onPositionChange?: ((position: number, isDragging: boolean) => void) | undefined;
+    onPositionChange?: (position: number, isDragging: boolean) => void;
     /**
      * Handler invoked when dragging ends.
      */
-    onDragEnd?: (() => void) | undefined;
+    onDragEnd?: () => void;
     /**
      * Handler invoked when dragging begins.
      */
-    onDragStart?: (() => void) | undefined;
+    onDragStart?: () => void;
 } & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const StepwiseSliderTrack: ({ ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-export declare const StepwiseSliderKnob: ({ ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-export declare const StepwiseSliderLabel: ({ ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const StepwiseSliderTrack: ({ ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const StepwiseSliderKnob: ({ ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const StepwiseSliderLabel: ({ ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 /**
  * Generates a set of steps compatible with this component.
  *

package/components/StepwiseSlider.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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 __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)
@@ -64,9 +41,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateSteps = exports.StepwiseSliderLabel = exports.StepwiseSliderKnob = exports.StepwiseSliderTrack = exports.StepwiseSlider = void 0;
+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 = __importStar(require("react"));
+var react_1 = require("react");
 var spase_1 = require("spase");
 var useDragValueEffect_1 = require("../hooks/useDragValueEffect");
 var utils_1 = require("../utils");
@@ -177,52 +156,48 @@ exports.StepwiseSlider = (0, react_1.forwardRef)(function (_a, ref) {
             onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(nearestPosition, true);
         }
     }, [isDragging]);
-    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, fixedClassNames.root), "data-component": 'stepwise-slider' }),
-        react_1.default.createElement("div", { ref: bodyRef, style: fixedStyles.body },
-            (0, utils_1.cloneStyledElement)((_b = components.track) !== null && _b !== void 0 ? _b : react_1.default.createElement(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)"),
-                    top: '0',
-                } : {
-                    left: '0',
-                    width: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
-                }),
-                onClick: trackClickHandler,
-            }, react_1.default.createElement("div", { style: fixedStyles.trackHitbox })),
-            (0, utils_1.cloneStyledElement)((_c = components.track) !== null && _c !== void 0 ? _c : react_1.default.createElement(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' ? {
-                    bottom: '0',
-                    height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
-                } : {
-                    right: '0',
-                    width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
-                }),
-                onClick: trackClickHandler,
-            }, react_1.default.createElement("div", { style: fixedStyles.trackHitbox })),
-            react_1.default.createElement("button", { ref: knobContainerRef, style: fixedStyles.knobContainer }, (0, utils_1.cloneStyledElement)((_d = components.knob) !== null && _d !== void 0 ? _d : react_1.default.createElement(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 : react_1.default.createElement(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))))))));
+    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)"),
+                        top: '0',
+                    } : {
+                        left: '0',
+                        width: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(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' ? {
+                        bottom: '0',
+                        height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
+                    } : {
+                        right: '0',
+                        width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(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)))) })] }) })));
 });
 Object.defineProperty(exports.StepwiseSlider, 'displayName', { value: 'StepwiseSlider', writable: false });
 var StepwiseSliderTrack = function (_a) {
     var props = __rest(_a, []);
-    return react_1.default.createElement("div", __assign({}, props, { "data-child": 'track' }));
+    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'track' }));
 };
 exports.StepwiseSliderTrack = StepwiseSliderTrack;
 var StepwiseSliderKnob = function (_a) {
     var props = __rest(_a, []);
-    return react_1.default.createElement("div", __assign({}, props, { "data-child": 'knob' }));
+    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'knob' }));
 };
 exports.StepwiseSliderKnob = StepwiseSliderKnob;
 var StepwiseSliderLabel = function (_a) {
     var props = __rest(_a, []);
-    return react_1.default.createElement("div", __assign({}, props, { "data-child": 'label' }));
+    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'label' }));
 };
 exports.StepwiseSliderLabel = StepwiseSliderLabel;
 /**
@@ -244,7 +219,6 @@ function generateSteps(length) {
         return position;
     });
 }
-exports.generateSteps = generateSteps;
 /**
  * Gets the index of the step of which the specified position is closest to. If
  * for whatever reason the index cannot be computed, -1 is returned.

package/components/StepwiseSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["components/StepwiseSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type MouseEvent, type PropsWithChildren } from 'react'\nimport { Rect } from 'spase'\nimport { useDragValueEffect } from '../hooks/useDragValueEffect'\nimport { asClassNameDict, asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * By default the position is a value from 0 - 1, 0 being the start of the\n   * slider and 1 being the end. Switching on this flag inverts this behavior,\n   * where 0 becomes the end of the slider and 1 being the start.\n   */\n  isInverted?: boolean\n\n  /**\n   * Specifies if the track is clickable to set the position of the knob.\n   */\n  isTrackInteractive?: boolean\n\n  /**\n   * Indicates if position/index change events are dispatched only when dragging\n   * ends. When disabled, aforementioned events are fired repeatedly while\n   * dragging.\n   */\n  onlyDispatchesOnDragEnd?: boolean\n\n  /**\n   * Padding between the track and the knob in pixels.\n   */\n  trackPadding?: 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\n   * track where the knob should snap to if dragging stops near it. Ensure that\n   * there are at least two steps: one for the start of the track and one for\n   * the end.\n   */\n  steps?: readonly number[]\n\n  /**\n   * The current index.\n   */\n  index?: number\n\n  /**\n   * A function that returns the label to be displayed at a given slider\n   * position and closest step 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\n   *                steps are provided.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number, index: number) => string\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\n\n  /**\n   * Handler invoked when index changes. This can either be invoked from the\n   * `index` prop being changed or from the slider being dragged. Note that if\n   * the event is emitted at the end of dragging due to\n   * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right after `onPositionChange`.\n   *\n   * @param index The current slider index.\n   * @param isDragging Specifies if the index change is due to dragging.\n   */\n  onIndexChange?: (index: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when position changes. This can either be invoked from the\n   * `index` prop being changed or from the slider being dragged. Note that if\n   * the event is emitted at the end of dragging due to\n   * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right before `onIndexChange`.\n   *\n   * @param position The current slider position.\n   * @param isDragging Specifies if the position change is due to dragging.\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/**\n * A \"stepwise\" slider component supporting both horizontal and vertical\n * orientations that automatically snaps to a set of predefined points on the\n * slider when dragged. These points are referred to as \"steps\", indexed by an\n * integer referred to as \"index\". This index can be two-way binded. The\n * component consists of four customizable elements: a draggable knob, a label\n * on the knob, a scroll track before the knob and a scroll track after the\n * knob. While the width and height of the slider is inferred from its CSS\n * rules, the width and height of the knob are set via props (`knobWidth` and\n * `knobHeight`, respectively). The size of the knob does not impact the size of\n * the slider. While dragging, the slider still emits a position change event,\n * where the position is a decimal ranging between 0.0 and 1.0, inclusive.\n *\n * @exports StepwiseSliderKnob The component for the knob.\n * @exports StepwiseSliderLabel The component for the label on the knob.\n * @exports StepwiseSliderTrack The component for the slide track on either side\n *                                of the knob.\n */\nexport const StepwiseSlider = forwardRef<HTMLDivElement, StepwiseSliderProps>(({\n  children,\n  className,\n  index: externalIndex = 0,\n  isInverted = false,\n  isTrackInteractive = true,\n  knobHeight = 30,\n  knobWidth = 30,\n  labelProvider,\n  onlyDispatchesOnDragEnd = false,\n  orientation = 'vertical',\n  steps = generateSteps(10),\n  trackPadding = 0,\n  usesDefaultStyles = false,\n  onDragEnd,\n  onDragStart,\n  onIndexChange,\n  onPositionChange,\n  ...props\n}, ref) => {\n  const mapDragValueToPosition = (value: number, dx: number, dy: number) => {\n    const rect = Rect.from(bodyRef.current) ?? new Rect()\n    const truePosition = isInverted ? 1 - value : value\n    const trueNewPositionX = truePosition * rect.width + dx\n    const trueNewPositionY = truePosition * rect.height + dy\n    const trueNewPosition = orientation === 'vertical' ? Math.max(0, Math.min(1, trueNewPositionY / rect.height)) : Math.max(0, Math.min(1, trueNewPositionX / rect.width))\n    const normalizedPosition = isInverted ? 1 - trueNewPosition : trueNewPosition\n\n    return normalizedPosition\n  }\n\n  const trackClickHandler = (event: MouseEvent) => {\n    if (!isTrackInteractive) return\n\n    const rect = Rect.from(bodyRef.current) ?? new Rect()\n\n    switch (orientation) {\n      case 'horizontal': {\n        const trackPosition = (event.clientX - rect.left) / rect.width\n        const normalizedPosition = isInverted ? 1 - trackPosition : trackPosition\n        setPosition(normalizedPosition)\n        break\n      }\n      case 'vertical': {\n        const trackPosition = (event.clientY - rect.top) / rect.height\n        const normalizedPosition = isInverted ? 1 - trackPosition : trackPosition\n        setPosition(normalizedPosition)\n        break\n      }\n      default:\n        break\n    }\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const knobContainerRef = useRef<HTMLButtonElement>(null)\n  const [index, setIndex] = useState(externalIndex)\n\n  const { isDragging: [isDragging], isReleasing: [isReleasing], value: [position, setPosition] } = useDragValueEffect(knobContainerRef, {\n    initialValue: getPositionAt(externalIndex, steps),\n    transform: mapDragValueToPosition,\n    onDragStart,\n    onDragEnd,\n  })\n\n  // Natural position is the position affecting internal components accounting\n  // for `isInverted`.\n  const naturalPosition = isInverted ? 1 - position : position\n  const isAtEnd = isInverted ? position === 0 : position === 1\n  const isAtStart = isInverted ? position === 1 : position === 0\n  const components = asComponentDict(children, {\n    knob: StepwiseSliderKnob,\n    label: StepwiseSliderLabel,\n    track: StepwiseSliderTrack,\n  })\n\n  const fixedClassNames = getFixedClassNames({ orientation, isAtEnd, isAtStart, isDragging, isReleasing })\n  const fixedStyles = getFixedStyles({ orientation, naturalPosition, isDragging, knobHeight, knobWidth, isTrackInteractive })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles({ knobHeight }) : undefined\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const newPosition = getPositionAt(externalIndex, steps)\n\n    if (position !== newPosition) {\n      setPosition(newPosition)\n    }\n\n    if (externalIndex !== index) {\n      setIndex(externalIndex)\n    }\n  }, [externalIndex])\n\n  useEffect(() => {\n    if (isDragging && onlyDispatchesOnDragEnd) return\n\n    onPositionChange?.(position, isDragging)\n\n    const newIndex = getNearestIndexByPosition(position, steps)\n    if (index !== newIndex) setIndex(newIndex)\n  }, [position])\n\n  useEffect(() => {\n    onIndexChange?.(index, isDragging)\n  }, [index])\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const nearestIndex = getNearestIndexByPosition(position, steps)\n    const nearestPosition = getPositionAt(nearestIndex, steps)\n\n    if (nearestPosition !== position || onlyDispatchesOnDragEnd) {\n      setPosition(nearestPosition)\n      onPositionChange?.(nearestPosition, true)\n    }\n  }, [isDragging])\n\n  return (\n    <div {...props} ref={ref} className={clsx(className, fixedClassNames.root)} data-component='stepwise-slider'>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {cloneStyledElement(components.track ?? <StepwiseSliderTrack style={defaultStyles?.track}/>, {\n          className: clsx('start', fixedClassNames.track),\n          style: styles(fixedStyles.track, orientation === 'vertical' ? {\n            height: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,\n            top: '0',\n          } : {\n            left: '0',\n            width: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,\n          }),\n          onClick: trackClickHandler,\n        }, <div style={fixedStyles.trackHitbox}/>)}\n        {cloneStyledElement(components.track ?? <StepwiseSliderTrack style={defaultStyles?.track}/>, {\n          className: clsx('end', fixedClassNames.track),\n          style: styles(fixedStyles.track, orientation === 'vertical' ? {\n            bottom: '0',\n            height: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,\n          } : {\n            right: '0',\n            width: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,\n          }),\n          onClick: trackClickHandler,\n        }, <div style={fixedStyles.trackHitbox}/>)}\n        <button ref={knobContainerRef} style={fixedStyles.knobContainer}>\n          {cloneStyledElement(components.knob ?? <StepwiseSliderKnob style={defaultStyles?.knob}/>, {\n            className: clsx(fixedClassNames.knob),\n            style: styles(fixedStyles.knob),\n          }, steps && labelProvider && cloneStyledElement(components.label ?? <StepwiseSliderLabel style={defaultStyles?.label}/>, {\n            className: clsx(fixedClassNames.label),\n            style: styles(fixedStyles.label),\n          }, labelProvider(position, getNearestIndexByPosition(position, steps))))}\n        </button>\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(StepwiseSlider, 'displayName', { value: 'StepwiseSlider', writable: false })\n\nexport const StepwiseSliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='track'/>\n\nexport const StepwiseSliderKnob = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='knob'/>\n\nexport const StepwiseSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='label'/>\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\n *                 include the 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\n    return position\n  })\n}\n\n/**\n * Gets the index of the step of which the specified position is closest to. If\n * for whatever 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 */\nfunction 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\n *          determined, `NaN` is returned.\n */\nfunction getPositionAt(index: number, steps: readonly number[]): number {\n  if (index >= steps.length) return NaN\n\n  return steps[index]\n}\n\nfunction getFixedClassNames({ orientation = 'vertical', isAtEnd = false, isAtStart = false, isDragging = false, isReleasing = false }) {\n  return asClassNameDict({\n    root: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    track: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    knob: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    label: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n  })\n}\n\nfunction getFixedStyles({ orientation = 'vertical', naturalPosition = 0, isDragging = false, knobHeight = 0, knobWidth = 0, isTrackInteractive = false }) {\n  return asStyleDict({\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    knobContainer: {\n      background: 'none',\n      border: 'none',\n      outline: 'none',\n      position: 'absolute',\n      transform: 'translate3d(-50%, -50%, 0)',\n      zIndex: '1',\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    knob: {\n      height: `${knobHeight}px`,\n      touchAction: 'none',\n      width: `${knobWidth}px`,\n    },\n    label: {\n      pointerEvents: 'none',\n      userSelect: 'none',\n    },\n    track: {\n      cursor: isTrackInteractive ? 'pointer' : 'auto',\n      pointerEvents: isTrackInteractive ? 'auto' : 'none',\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        left: '0',\n        margin: '0 auto',\n        right: '0',\n        width: '100%',\n      } : {\n        bottom: '0',\n        height: '100%',\n        margin: 'auto 0',\n        top: '0',\n      },\n    },\n    trackHitbox: {\n      height: '100%',\n      minHeight: '20px',\n      minWidth: '20px',\n      position: 'absolute',\n      transform: orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)',\n      width: '100%',\n    },\n  })\n}\n\nfunction getDefaultStyles({ knobHeight = 0 }) {\n  return asStyleDict({\n    knob: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      display: 'flex',\n      justifyContent: 'center',\n    },\n    label: {\n      color: '#000',\n      fontSize: '12px',\n      lineHeight: `${knobHeight}px`,\n    },\n    track: {\n      background: '#fff',\n    },\n  })\n}\n"]}
+{"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["components/StepwiseSlider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiTA,sCAWC;;AA5TD,8CAAuB;AACvB,+BAA6H;AAC7H,+BAA4B;AAC5B,kEAAgE;AAChE,kCAAoG;AA6GpG;;;;;;;;;;;;;;;;;GAiBG;AACU,QAAA,cAAc,GAAG,IAAA,kBAAU,EAAsC,UAAC,EAmB9E,EAAE,GAAG;;IAlBJ,IAAA,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,aAAwB,EAAjB,aAAa,mBAAG,CAAC,KAAA,EACxB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,0BAAyB,EAAzB,kBAAkB,mBAAG,IAAI,KAAA,EACzB,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,aAAa,mBAAA,EACb,+BAA+B,EAA/B,uBAAuB,mBAAG,KAAK,KAAA,EAC/B,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EACxB,aAAyB,EAAzB,KAAK,mBAAG,aAAa,CAAC,EAAE,CAAC,KAAA,EACzB,oBAAgB,EAAhB,YAAY,mBAAG,CAAC,KAAA,EAChB,yBAAyB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EACb,KAAK,cAlBqE,2QAmB9E,CADS;IAER,IAAM,sBAAsB,GAAG,UAAC,KAAa,EAAE,EAAU,EAAE,EAAU;;QACnE,IAAM,IAAI,GAAG,MAAA,YAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,mCAAI,IAAI,YAAI,EAAE,CAAA;QACrD,IAAM,YAAY,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAA;QACnD,IAAM,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;QACvD,IAAM,gBAAgB,GAAG,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QACxD,IAAM,eAAe,GAAG,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;QACvK,IAAM,kBAAkB,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,eAAe,CAAA;QAE7E,OAAO,kBAAkB,CAAA;IAC3B,CAAC,CAAA;IAED,IAAM,iBAAiB,GAAG,UAAC,KAAiB;;QAC1C,IAAI,CAAC,kBAAkB;YAAE,OAAM;QAE/B,IAAM,IAAI,GAAG,MAAA,YAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,mCAAI,IAAI,YAAI,EAAE,CAAA;QAErD,QAAQ,WAAW,EAAE,CAAC;YACpB,KAAK,YAAY,CAAC,CAAC,CAAC;gBAClB,IAAM,aAAa,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAA;gBAC9D,IAAM,kBAAkB,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAA;gBACzE,WAAW,CAAC,kBAAkB,CAAC,CAAA;gBAC/B,MAAK;YACP,CAAC;YACD,KAAK,UAAU,CAAC,CAAC,CAAC;gBAChB,IAAM,aAAa,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAA;gBAC9D,IAAM,kBAAkB,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAA;gBACzE,WAAW,CAAC,kBAAkB,CAAC,CAAA;gBAC/B,MAAK;YACP,CAAC;YACD;gBACE,MAAK;QACT,CAAC;IACH,CAAC,CAAA;IAED,IAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IAC5C,IAAM,gBAAgB,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAA;IAClD,IAAA,KAAA,OAAoB,IAAA,gBAAQ,EAAC,aAAa,CAAC,IAAA,EAA1C,KAAK,QAAA,EAAE,QAAQ,QAA2B,CAAA;IAE3C,IAAA,KAA2F,IAAA,uCAAkB,EAAC,gBAAgB,EAAE;QACpI,YAAY,EAAE,aAAa,CAAC,aAAa,EAAE,KAAK,CAAC;QACjD,SAAS,EAAE,sBAAsB;QACjC,WAAW,aAAA;QACX,SAAS,WAAA;KACV,CAAC,EALM,KAAA,wBAAwB,EAAX,UAAU,QAAA,EAAG,KAAA,yBAA0B,EAAZ,WAAW,QAAA,EAAG,KAAA,mBAA8B,EAAtB,QAAQ,QAAA,EAAE,WAAW,QAKzF,CAAA;IAEF,4EAA4E;IAC5E,oBAAoB;IACpB,IAAM,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAA;IAC5D,IAAM,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAA;IAC5D,IAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAA;IAC9D,IAAM,UAAU,GAAG,IAAA,uBAAe,EAAC,QAAQ,EAAE;QAC3C,IAAI,EAAE,0BAAkB;QACxB,KAAK,EAAE,2BAAmB;QAC1B,KAAK,EAAE,2BAAmB;KAC3B,CAAC,CAAA;IAEF,IAAM,eAAe,GAAG,kBAAkB,CAAC,EAAE,WAAW,aAAA,EAAE,OAAO,SAAA,EAAE,SAAS,WAAA,EAAE,UAAU,YAAA,EAAE,WAAW,aAAA,EAAE,CAAC,CAAA;IACxG,IAAM,WAAW,GAAG,cAAc,CAAC,EAAE,WAAW,aAAA,EAAE,eAAe,iBAAA,EAAE,UAAU,YAAA,EAAE,UAAU,YAAA,EAAE,SAAS,WAAA,EAAE,kBAAkB,oBAAA,EAAE,CAAC,CAAA;IAC3H,IAAM,aAAa,GAAG,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,UAAU,YAAA,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAEtF,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU;YAAE,OAAM;QAEtB,IAAM,WAAW,GAAG,aAAa,CAAC,aAAa,EAAE,KAAK,CAAC,CAAA;QAEvD,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;YAC7B,WAAW,CAAC,WAAW,CAAC,CAAA;QAC1B,CAAC;QAED,IAAI,aAAa,KAAK,KAAK,EAAE,CAAC;YAC5B,QAAQ,CAAC,aAAa,CAAC,CAAA;QACzB,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU,IAAI,uBAAuB;YAAE,OAAM;QAEjD,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,QAAQ,EAAE,UAAU,CAAC,CAAA;QAExC,IAAM,QAAQ,GAAG,yBAAyB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;QAC3D,IAAI,KAAK,KAAK,QAAQ;YAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,IAAA,iBAAS,EAAC;QACR,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,KAAK,EAAE,UAAU,CAAC,CAAA;IACpC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,IAAA,iBAAS,EAAC;QACR,IAAI,UAAU;YAAE,OAAM;QAEtB,IAAM,YAAY,GAAG,yBAAyB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;QAC/D,IAAM,eAAe,GAAG,aAAa,CAAC,YAAY,EAAE,KAAK,CAAC,CAAA;QAE1D,IAAI,eAAe,KAAK,QAAQ,IAAI,uBAAuB,EAAE,CAAC;YAC5D,WAAW,CAAC,eAAe,CAAC,CAAA;YAC5B,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,eAAe,EAAE,IAAI,CAAC,CAAA;QAC3C,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,CACL,2CAAS,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,oBAAiB,iBAAiB,YAC1G,iCAAK,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI,aACvC,IAAA,0BAAkB,EAAC,MAAA,UAAU,CAAC,KAAK,mCAAI,uBAAC,2BAAmB,IAAC,KAAK,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,GAAG,EAAE;oBAC3F,SAAS,EAAE,IAAA,cAAI,EAAC,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC;oBAC/C,KAAK,EAAE,IAAA,cAAM,EAAC,WAAW,CAAC,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;wBAC5D,MAAM,EAAE,eAAQ,eAAe,GAAG,GAAG,iBAAO,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,GAAG,kBAAQ,YAAY,QAAK;wBAC7G,GAAG,EAAE,GAAG;qBACT,CAAC,CAAC,CAAC;wBACF,IAAI,EAAE,GAAG;wBACT,KAAK,EAAE,eAAQ,eAAe,GAAG,GAAG,iBAAO,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,kBAAQ,YAAY,QAAK;qBAC5G,CAAC;oBACF,OAAO,EAAE,iBAAiB;iBAC3B,EAAE,gCAAK,KAAK,EAAE,WAAW,CAAC,WAAW,GAAG,CAAC,EACzC,IAAA,0BAAkB,EAAC,MAAA,UAAU,CAAC,KAAK,mCAAI,uBAAC,2BAAmB,IAAC,KAAK,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,GAAG,EAAE;oBAC3F,SAAS,EAAE,IAAA,cAAI,EAAC,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC;oBAC7C,KAAK,EAAE,IAAA,cAAM,EAAC,WAAW,CAAC,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;wBAC5D,MAAM,EAAE,GAAG;wBACX,MAAM,EAAE,eAAQ,CAAC,CAAC,GAAG,eAAe,CAAC,GAAG,GAAG,iBAAO,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,GAAG,kBAAQ,YAAY,QAAK;qBACpH,CAAC,CAAC,CAAC;wBACF,KAAK,EAAE,GAAG;wBACV,KAAK,EAAE,eAAQ,CAAC,CAAC,GAAG,eAAe,CAAC,GAAG,GAAG,iBAAO,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,kBAAQ,YAAY,QAAK;qBAClH,CAAC;oBACF,OAAO,EAAE,iBAAiB;iBAC3B,EAAE,gCAAK,KAAK,EAAE,WAAW,CAAC,WAAW,GAAG,CAAC,EAC1C,mCAAQ,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,CAAC,aAAa,YAC5D,IAAA,0BAAkB,EAAC,MAAA,UAAU,CAAC,IAAI,mCAAI,uBAAC,0BAAkB,IAAC,KAAK,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,GAAG,EAAE;wBACxF,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,CAAC,IAAI,CAAC;wBACrC,KAAK,EAAE,IAAA,cAAM,EAAC,WAAW,CAAC,IAAI,CAAC;qBAChC,EAAE,KAAK,IAAI,aAAa,IAAI,IAAA,0BAAkB,EAAC,MAAA,UAAU,CAAC,KAAK,mCAAI,uBAAC,2BAAmB,IAAC,KAAK,EAAE,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,KAAK,GAAG,EAAE;wBACvH,SAAS,EAAE,IAAA,cAAI,EAAC,eAAe,CAAC,KAAK,CAAC;wBACtC,KAAK,EAAE,IAAA,cAAM,EAAC,WAAW,CAAC,KAAK,CAAC;qBACjC,EAAE,aAAa,CAAC,QAAQ,EAAE,yBAAyB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,GACjE,IACL,IACF,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,cAAc,CAAC,sBAAc,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;AAE3F,IAAM,mBAAmB,GAAG,UAAC,EAA4C;QAAvC,KAAK,cAAV,EAAY,CAAF;IAAuC,OAAA,2CAAS,KAAK,kBAAa,OAAO,IAAE,CAAA;CAAA,CAAA;AAA5G,QAAA,mBAAmB,uBAAyF;AAElH,IAAM,kBAAkB,GAAG,UAAC,EAA4C;QAAvC,KAAK,cAAV,EAAY,CAAF;IAAuC,OAAA,2CAAS,KAAK,kBAAa,MAAM,IAAE,CAAA;CAAA,CAAA;AAA1G,QAAA,kBAAkB,sBAAwF;AAEhH,IAAM,mBAAmB,GAAG,UAAC,EAA4C;QAAvC,KAAK,cAAV,EAAY,CAAF;IAAuC,OAAA,2CAAS,KAAK,kBAAa,OAAO,IAAE,CAAA;CAAA,CAAA;AAA5G,QAAA,mBAAmB,uBAAyF;AAEzH;;;;;;;GAOG;AACH,SAAgB,aAAa,CAAC,MAAc;IAC1C,IAAI,MAAM,IAAI,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAA;IACrF,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,MAAM;QAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;IAEvF,IAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAEjC,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC;QACvC,IAAM,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAA;QAE7B,OAAO,QAAQ,CAAA;IACjB,CAAC,CAAC,CAAA;AACJ,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,yBAAyB,CAAC,QAAgB,EAAE,KAAwB;IAC3E,IAAI,KAAK,GAAG,CAAC,CAAC,CAAA;IACd,IAAI,QAAQ,GAAG,GAAG,CAAA;IAElB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;QAC7C,IAAM,IAAI,GAAG,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,CAAA;QAEpC,IAAI,KAAK,CAAC,IAAI,CAAC;YAAE,SAAQ;QAEzB,IAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAA;QAEvC,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,KAAK,GAAG,QAAQ,EAAE,CAAC;YACxC,QAAQ,GAAG,KAAK,CAAA;YAChB,KAAK,GAAG,CAAC,CAAA;QACX,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAA;AACd,CAAC;AAED;;;;;;;;GAQG;AACH,SAAS,aAAa,CAAC,KAAa,EAAE,KAAwB;IAC5D,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM;QAAE,OAAO,GAAG,CAAA;IAErC,OAAO,KAAK,CAAC,KAAK,CAAC,CAAA;AACrB,CAAC;AAED,SAAS,kBAAkB,CAAC,EAAyG;QAAvG,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EAAE,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EAAE,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EAAE,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAAE,mBAAmB,EAAnB,WAAW,mBAAG,KAAK,KAAA;IACjI,OAAO,IAAA,uBAAe,EAAC;QACrB,IAAI,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE;YACtB,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,UAAU;YACtB,WAAW,EAAE,WAAW;SACzB,CAAC;QACF,KAAK,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE;YACvB,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,UAAU;YACtB,WAAW,EAAE,WAAW;SACzB,CAAC;QACF,IAAI,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE;YACtB,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,UAAU;YACtB,WAAW,EAAE,WAAW;SACzB,CAAC;QACF,KAAK,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE;YACvB,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,UAAU;YACtB,WAAW,EAAE,WAAW;SACzB,CAAC;KACH,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,EAAgI;QAA9H,mBAAwB,EAAxB,WAAW,mBAAG,UAAU,KAAA,EAAE,uBAAmB,EAAnB,eAAe,mBAAG,CAAC,KAAA,EAAE,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAAE,kBAAc,EAAd,UAAU,mBAAG,CAAC,KAAA,EAAE,iBAAa,EAAb,SAAS,mBAAG,CAAC,KAAA,EAAE,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA;IACpJ,OAAO,IAAA,mBAAW,EAAC;QACjB,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;QACD,aAAa,aACX,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,4BAA4B,EACvC,MAAM,EAAE,GAAG,IACR,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,IAAI,EAAE,KAAK;YACX,GAAG,EAAE,UAAG,eAAe,GAAG,GAAG,MAAG;YAChC,UAAU,EAAE,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,MAAM;SACjE,CAAC,CAAC,CAAC;YACF,IAAI,EAAE,UAAG,eAAe,GAAG,GAAG,MAAG;YACjC,GAAG,EAAE,KAAK;YACV,UAAU,EAAE,UAAU,KAAK,KAAK,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM;SAClE,CACF;QACD,IAAI,EAAE;YACJ,MAAM,EAAE,UAAG,UAAU,OAAI;YACzB,WAAW,EAAE,MAAM;YACnB,KAAK,EAAE,UAAG,SAAS,OAAI;SACxB;QACD,KAAK,EAAE;YACL,aAAa,EAAE,MAAM;YACrB,UAAU,EAAE,MAAM;SACnB;QACD,KAAK,aACH,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAC/C,aAAa,EAAE,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EACnD,QAAQ,EAAE,UAAU,IACjB,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;YAC9B,IAAI,EAAE,GAAG;YACT,MAAM,EAAE,QAAQ;YAChB,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,MAAM;SACd,CAAC,CAAC,CAAC;YACF,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,QAAQ;YAChB,GAAG,EAAE,GAAG;SACT,CACF;QACD,WAAW,EAAE;YACX,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,MAAM;YACjB,QAAQ,EAAE,MAAM;YAChB,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,yBAAyB;YAC/F,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAA;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EAAkB;QAAhB,kBAAc,EAAd,UAAU,mBAAG,CAAC,KAAA;IACxC,OAAO,IAAA,mBAAW,EAAC;QACjB,IAAI,EAAE;YACJ,UAAU,EAAE,QAAQ;YACpB,UAAU,EAAE,MAAM;YAClB,SAAS,EAAE,YAAY;YACvB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;SACzB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,UAAG,UAAU,OAAI;SAC9B;QACD,KAAK,EAAE;YACL,UAAU,EAAE,MAAM;SACnB;KACF,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type MouseEvent, type PropsWithChildren } from 'react'\nimport { Rect } from 'spase'\nimport { useDragValueEffect } from '../hooks/useDragValueEffect'\nimport { asClassNameDict, asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * By default the position is a value from 0 - 1, 0 being the start of the\n   * slider and 1 being the end. Switching on this flag inverts this behavior,\n   * where 0 becomes the end of the slider and 1 being the start.\n   */\n  isInverted?: boolean\n\n  /**\n   * Specifies if the track is clickable to set the position of the knob.\n   */\n  isTrackInteractive?: boolean\n\n  /**\n   * Indicates if position/index change events are dispatched only when dragging\n   * ends. When disabled, aforementioned events are fired repeatedly while\n   * dragging.\n   */\n  onlyDispatchesOnDragEnd?: boolean\n\n  /**\n   * Padding between the track and the knob in pixels.\n   */\n  trackPadding?: 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\n   * track where the knob should snap to if dragging stops near it. Ensure that\n   * there are at least two steps: one for the start of the track and one for\n   * the end.\n   */\n  steps?: readonly number[]\n\n  /**\n   * The current index.\n   */\n  index?: number\n\n  /**\n   * A function that returns the label to be displayed at a given slider\n   * position and closest step 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\n   *                steps are provided.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number, index: number) => string\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\n\n  /**\n   * Handler invoked when index changes. This can either be invoked from the\n   * `index` prop being changed or from the slider being dragged. Note that if\n   * the event is emitted at the end of dragging due to\n   * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right after `onPositionChange`.\n   *\n   * @param index The current slider index.\n   * @param isDragging Specifies if the index change is due to dragging.\n   */\n  onIndexChange?: (index: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when position changes. This can either be invoked from the\n   * `index` prop being changed or from the slider being dragged. Note that if\n   * the event is emitted at the end of dragging due to\n   * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`. This event is emitted right before `onIndexChange`.\n   *\n   * @param position The current slider position.\n   * @param isDragging Specifies if the position change is due to dragging.\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/**\n * A \"stepwise\" slider component supporting both horizontal and vertical\n * orientations that automatically snaps to a set of predefined points on the\n * slider when dragged. These points are referred to as \"steps\", indexed by an\n * integer referred to as \"index\". This index can be two-way binded. The\n * component consists of four customizable elements: a draggable knob, a label\n * on the knob, a scroll track before the knob and a scroll track after the\n * knob. While the width and height of the slider is inferred from its CSS\n * rules, the width and height of the knob are set via props (`knobWidth` and\n * `knobHeight`, respectively). The size of the knob does not impact the size of\n * the slider. While dragging, the slider still emits a position change event,\n * where the position is a decimal ranging between 0.0 and 1.0, inclusive.\n *\n * @exports StepwiseSliderKnob The component for the knob.\n * @exports StepwiseSliderLabel The component for the label on the knob.\n * @exports StepwiseSliderTrack The component for the slide track on either side\n *                                of the knob.\n */\nexport const StepwiseSlider = forwardRef<HTMLDivElement, StepwiseSliderProps>(({\n  children,\n  className,\n  index: externalIndex = 0,\n  isInverted = false,\n  isTrackInteractive = true,\n  knobHeight = 30,\n  knobWidth = 30,\n  labelProvider,\n  onlyDispatchesOnDragEnd = false,\n  orientation = 'vertical',\n  steps = generateSteps(10),\n  trackPadding = 0,\n  usesDefaultStyles = false,\n  onDragEnd,\n  onDragStart,\n  onIndexChange,\n  onPositionChange,\n  ...props\n}, ref) => {\n  const mapDragValueToPosition = (value: number, dx: number, dy: number) => {\n    const rect = Rect.from(bodyRef.current) ?? new Rect()\n    const truePosition = isInverted ? 1 - value : value\n    const trueNewPositionX = truePosition * rect.width + dx\n    const trueNewPositionY = truePosition * rect.height + dy\n    const trueNewPosition = orientation === 'vertical' ? Math.max(0, Math.min(1, trueNewPositionY / rect.height)) : Math.max(0, Math.min(1, trueNewPositionX / rect.width))\n    const normalizedPosition = isInverted ? 1 - trueNewPosition : trueNewPosition\n\n    return normalizedPosition\n  }\n\n  const trackClickHandler = (event: MouseEvent) => {\n    if (!isTrackInteractive) return\n\n    const rect = Rect.from(bodyRef.current) ?? new Rect()\n\n    switch (orientation) {\n      case 'horizontal': {\n        const trackPosition = (event.clientX - rect.left) / rect.width\n        const normalizedPosition = isInverted ? 1 - trackPosition : trackPosition\n        setPosition(normalizedPosition)\n        break\n      }\n      case 'vertical': {\n        const trackPosition = (event.clientY - rect.top) / rect.height\n        const normalizedPosition = isInverted ? 1 - trackPosition : trackPosition\n        setPosition(normalizedPosition)\n        break\n      }\n      default:\n        break\n    }\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const knobContainerRef = useRef<HTMLButtonElement>(null)\n  const [index, setIndex] = useState(externalIndex)\n\n  const { isDragging: [isDragging], isReleasing: [isReleasing], value: [position, setPosition] } = useDragValueEffect(knobContainerRef, {\n    initialValue: getPositionAt(externalIndex, steps),\n    transform: mapDragValueToPosition,\n    onDragStart,\n    onDragEnd,\n  })\n\n  // Natural position is the position affecting internal components accounting\n  // for `isInverted`.\n  const naturalPosition = isInverted ? 1 - position : position\n  const isAtEnd = isInverted ? position === 0 : position === 1\n  const isAtStart = isInverted ? position === 1 : position === 0\n  const components = asComponentDict(children, {\n    knob: StepwiseSliderKnob,\n    label: StepwiseSliderLabel,\n    track: StepwiseSliderTrack,\n  })\n\n  const fixedClassNames = getFixedClassNames({ orientation, isAtEnd, isAtStart, isDragging, isReleasing })\n  const fixedStyles = getFixedStyles({ orientation, naturalPosition, isDragging, knobHeight, knobWidth, isTrackInteractive })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles({ knobHeight }) : undefined\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const newPosition = getPositionAt(externalIndex, steps)\n\n    if (position !== newPosition) {\n      setPosition(newPosition)\n    }\n\n    if (externalIndex !== index) {\n      setIndex(externalIndex)\n    }\n  }, [externalIndex])\n\n  useEffect(() => {\n    if (isDragging && onlyDispatchesOnDragEnd) return\n\n    onPositionChange?.(position, isDragging)\n\n    const newIndex = getNearestIndexByPosition(position, steps)\n    if (index !== newIndex) setIndex(newIndex)\n  }, [position])\n\n  useEffect(() => {\n    onIndexChange?.(index, isDragging)\n  }, [index])\n\n  useEffect(() => {\n    if (isDragging) return\n\n    const nearestIndex = getNearestIndexByPosition(position, steps)\n    const nearestPosition = getPositionAt(nearestIndex, steps)\n\n    if (nearestPosition !== position || onlyDispatchesOnDragEnd) {\n      setPosition(nearestPosition)\n      onPositionChange?.(nearestPosition, true)\n    }\n  }, [isDragging])\n\n  return (\n    <div {...props} ref={ref} className={clsx(className, fixedClassNames.root)} data-component='stepwise-slider'>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {cloneStyledElement(components.track ?? <StepwiseSliderTrack style={defaultStyles?.track}/>, {\n          className: clsx('start', fixedClassNames.track),\n          style: styles(fixedStyles.track, orientation === 'vertical' ? {\n            height: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,\n            top: '0',\n          } : {\n            left: '0',\n            width: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,\n          }),\n          onClick: trackClickHandler,\n        }, <div style={fixedStyles.trackHitbox}/>)}\n        {cloneStyledElement(components.track ?? <StepwiseSliderTrack style={defaultStyles?.track}/>, {\n          className: clsx('end', fixedClassNames.track),\n          style: styles(fixedStyles.track, orientation === 'vertical' ? {\n            bottom: '0',\n            height: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,\n          } : {\n            right: '0',\n            width: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,\n          }),\n          onClick: trackClickHandler,\n        }, <div style={fixedStyles.trackHitbox}/>)}\n        <button ref={knobContainerRef} style={fixedStyles.knobContainer}>\n          {cloneStyledElement(components.knob ?? <StepwiseSliderKnob style={defaultStyles?.knob}/>, {\n            className: clsx(fixedClassNames.knob),\n            style: styles(fixedStyles.knob),\n          }, steps && labelProvider && cloneStyledElement(components.label ?? <StepwiseSliderLabel style={defaultStyles?.label}/>, {\n            className: clsx(fixedClassNames.label),\n            style: styles(fixedStyles.label),\n          }, labelProvider(position, getNearestIndexByPosition(position, steps))))}\n        </button>\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(StepwiseSlider, 'displayName', { value: 'StepwiseSlider', writable: false })\n\nexport const StepwiseSliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='track'/>\n\nexport const StepwiseSliderKnob = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='knob'/>\n\nexport const StepwiseSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='label'/>\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\n *                 include the 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\n    return position\n  })\n}\n\n/**\n * Gets the index of the step of which the specified position is closest to. If\n * for whatever 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 */\nfunction 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\n *          determined, `NaN` is returned.\n */\nfunction getPositionAt(index: number, steps: readonly number[]): number {\n  if (index >= steps.length) return NaN\n\n  return steps[index]\n}\n\nfunction getFixedClassNames({ orientation = 'vertical', isAtEnd = false, isAtStart = false, isDragging = false, isReleasing = false }) {\n  return asClassNameDict({\n    root: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    track: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    knob: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    label: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n  })\n}\n\nfunction getFixedStyles({ orientation = 'vertical', naturalPosition = 0, isDragging = false, knobHeight = 0, knobWidth = 0, isTrackInteractive = false }) {\n  return asStyleDict({\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    knobContainer: {\n      background: 'none',\n      border: 'none',\n      outline: 'none',\n      position: 'absolute',\n      transform: 'translate3d(-50%, -50%, 0)',\n      zIndex: '1',\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    knob: {\n      height: `${knobHeight}px`,\n      touchAction: 'none',\n      width: `${knobWidth}px`,\n    },\n    label: {\n      pointerEvents: 'none',\n      userSelect: 'none',\n    },\n    track: {\n      cursor: isTrackInteractive ? 'pointer' : 'auto',\n      pointerEvents: isTrackInteractive ? 'auto' : 'none',\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        left: '0',\n        margin: '0 auto',\n        right: '0',\n        width: '100%',\n      } : {\n        bottom: '0',\n        height: '100%',\n        margin: 'auto 0',\n        top: '0',\n      },\n    },\n    trackHitbox: {\n      height: '100%',\n      minHeight: '20px',\n      minWidth: '20px',\n      position: 'absolute',\n      transform: orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)',\n      width: '100%',\n    },\n  })\n}\n\nfunction getDefaultStyles({ knobHeight = 0 }) {\n  return asStyleDict({\n    knob: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      display: 'flex',\n      justifyContent: 'center',\n    },\n    label: {\n      color: '#000',\n      fontSize: '12px',\n      lineHeight: `${knobHeight}px`,\n    },\n    track: {\n      background: '#fff',\n    },\n  })\n}\n"]}

package/components/SwipeContainer.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 export type SwipeContainerProps = HTMLAttributes<HTMLDivElement> & {
     isEnabled?: boolean;
     threshold?: number;
@@ -11,11 +11,11 @@ export type SwipeContainerProps = HTMLAttributes<HTMLDivElement> & {
  * An empty component with a backing `<div>` element that detects swipe
  * gestures.
  */
-export declare const SwipeContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    isEnabled?: boolean | undefined;
-    threshold?: number | undefined;
-    onSwipeDown?: (() => void) | undefined;
-    onSwipeLeft?: (() => void) | undefined;
-    onSwipeRight?: (() => void) | undefined;
-    onSwipeUp?: (() => void) | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const SwipeContainer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    isEnabled?: boolean;
+    threshold?: number;
+    onSwipeDown?: () => void;
+    onSwipeLeft?: () => void;
+    onSwipeRight?: () => void;
+    onSwipeUp?: () => void;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/components/SwipeContainer.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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 __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)
@@ -62,7 +39,8 @@ var __read = (this && this.__read) || function (o, n) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SwipeContainer = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var spase_1 = require("spase");
 /**
  * An empty component with a backing `<div>` element that detects swipe
@@ -126,7 +104,7 @@ exports.SwipeContainer = (0, react_1.forwardRef)(function (_a, ref) {
         setDragEndPosition(undefined);
         setDragStartTime(NaN);
     };
-    return (react_1.default.createElement("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));
+    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 })));
 });
 Object.defineProperty(exports.SwipeContainer, 'displayName', { value: 'SwipeContainer', writable: false });
 //# sourceMappingURL=SwipeContainer.js.map

package/components/SwipeContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeContainer.js","sourceRoot":"/","sources":["components/SwipeContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useState, type HTMLAttributes } from 'react'\nimport { Point } from 'spase'\n\nexport type SwipeContainerProps = HTMLAttributes<HTMLDivElement> & {\n  isEnabled?: boolean\n  threshold?: number\n  onSwipeDown?: () => void\n  onSwipeLeft?: () => void\n  onSwipeRight?: () => void\n  onSwipeUp?: () => void\n}\n\n/**\n * An empty component with a backing `<div>` element that detects swipe\n * gestures.\n */\nexport const SwipeContainer = forwardRef<HTMLDivElement, SwipeContainerProps>(({\n  children,\n  isEnabled = true,\n  threshold = 0.5,\n  onSwipeDown,\n  onSwipeLeft,\n  onSwipeRight,\n  onSwipeUp,\n  ...props\n}, ref) => {\n  const [dragStartPosition, setDragStartPosition] = useState<Point | undefined>(undefined)\n  const [dragEndPosition, setDragEndPosition] = useState<Point | undefined>(undefined)\n  const [dragStartTime, setDragStartTime] = useState(NaN)\n\n  const onDragStart = (x: number, y: number) => {\n    if (isNaN(x) || isNaN(y)) return onDragCancel()\n    setDragStartPosition(new Point([x, y]))\n  }\n\n  const onDragMove = (x: number, y: number) => {\n    const startPosition = dragStartPosition\n\n    if (startPosition === undefined) return\n\n    const hasMovement = startPosition.x !== x || startPosition.y !== y\n    const hasStartTime = !isNaN(dragStartTime)\n\n    if (!hasMovement) return\n\n    if (!hasStartTime) setDragStartTime(Date.now())\n\n    setDragEndPosition(new Point([x, y]))\n  }\n\n  const onDragEnd = () => {\n    const time = dragStartTime\n    const startPosition = dragStartPosition\n    const endPosition = dragEndPosition\n\n    if (isNaN(time) || startPosition === undefined || endPosition === undefined) return\n\n    const dt = Date.now() - time\n    const dx = endPosition.x - startPosition.x\n    const dy = endPosition.y - startPosition.y\n    const vx = dx / dt\n    const vy = dy / dt\n\n    if (isEnabled) {\n      if (Math.abs(vx) >= threshold && Math.abs(vx) > Math.abs(vy)) {\n        if (vx > 0) {\n          onSwipeRight?.()\n        }\n        else {\n          onSwipeLeft?.()\n        }\n      }\n      else if (Math.abs(vy) >= threshold && Math.abs(vy) > Math.abs(vx)) {\n        if (vy > 0) {\n          onSwipeDown?.()\n        }\n        else {\n          onSwipeUp?.()\n        }\n      }\n    }\n\n    onDragCancel()\n  }\n\n  const onDragCancel = () => {\n    setDragStartPosition(undefined)\n    setDragEndPosition(undefined)\n    setDragStartTime(NaN)\n  }\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-component='swipe-container'\n      onMouseDown={event => onDragStart(event.clientX, event.clientY)}\n      onMouseLeave={() => onDragCancel()}\n      onMouseMove={event => onDragMove(event.clientX, event.clientY)}\n      onMouseUp={() => onDragEnd()}\n      onTouchEnd={() => onDragEnd()}\n      onTouchMove={event => onDragMove(event.targetTouches[0].clientX, event.targetTouches[0].clientY)}\n      onTouchStart={event => onDragStart(event.targetTouches[0].clientX, event.targetTouches[0].clientY)}\n    >\n      {children}\n    </div>\n  )\n})\n\nObject.defineProperty(SwipeContainer, 'displayName', { value: 'SwipeContainer', writable: false })\n"]}
+{"version":3,"file":"SwipeContainer.js","sourceRoot":"/","sources":["components/SwipeContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState, type HTMLAttributes } from 'react'\nimport { Point } from 'spase'\n\nexport type SwipeContainerProps = HTMLAttributes<HTMLDivElement> & {\n  isEnabled?: boolean\n  threshold?: number\n  onSwipeDown?: () => void\n  onSwipeLeft?: () => void\n  onSwipeRight?: () => void\n  onSwipeUp?: () => void\n}\n\n/**\n * An empty component with a backing `<div>` element that detects swipe\n * gestures.\n */\nexport const SwipeContainer = forwardRef<HTMLDivElement, SwipeContainerProps>(({\n  children,\n  isEnabled = true,\n  threshold = 0.5,\n  onSwipeDown,\n  onSwipeLeft,\n  onSwipeRight,\n  onSwipeUp,\n  ...props\n}, ref) => {\n  const [dragStartPosition, setDragStartPosition] = useState<Point | undefined>(undefined)\n  const [dragEndPosition, setDragEndPosition] = useState<Point | undefined>(undefined)\n  const [dragStartTime, setDragStartTime] = useState(NaN)\n\n  const onDragStart = (x: number, y: number) => {\n    if (isNaN(x) || isNaN(y)) return onDragCancel()\n    setDragStartPosition(new Point([x, y]))\n  }\n\n  const onDragMove = (x: number, y: number) => {\n    const startPosition = dragStartPosition\n\n    if (startPosition === undefined) return\n\n    const hasMovement = startPosition.x !== x || startPosition.y !== y\n    const hasStartTime = !isNaN(dragStartTime)\n\n    if (!hasMovement) return\n\n    if (!hasStartTime) setDragStartTime(Date.now())\n\n    setDragEndPosition(new Point([x, y]))\n  }\n\n  const onDragEnd = () => {\n    const time = dragStartTime\n    const startPosition = dragStartPosition\n    const endPosition = dragEndPosition\n\n    if (isNaN(time) || startPosition === undefined || endPosition === undefined) return\n\n    const dt = Date.now() - time\n    const dx = endPosition.x - startPosition.x\n    const dy = endPosition.y - startPosition.y\n    const vx = dx / dt\n    const vy = dy / dt\n\n    if (isEnabled) {\n      if (Math.abs(vx) >= threshold && Math.abs(vx) > Math.abs(vy)) {\n        if (vx > 0) {\n          onSwipeRight?.()\n        }\n        else {\n          onSwipeLeft?.()\n        }\n      }\n      else if (Math.abs(vy) >= threshold && Math.abs(vy) > Math.abs(vx)) {\n        if (vy > 0) {\n          onSwipeDown?.()\n        }\n        else {\n          onSwipeUp?.()\n        }\n      }\n    }\n\n    onDragCancel()\n  }\n\n  const onDragCancel = () => {\n    setDragStartPosition(undefined)\n    setDragEndPosition(undefined)\n    setDragStartTime(NaN)\n  }\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-component='swipe-container'\n      onMouseDown={event => onDragStart(event.clientX, event.clientY)}\n      onMouseLeave={() => onDragCancel()}\n      onMouseMove={event => onDragMove(event.clientX, event.clientY)}\n      onMouseUp={() => onDragEnd()}\n      onTouchEnd={() => onDragEnd()}\n      onTouchMove={event => onDragMove(event.targetTouches[0].clientX, event.targetTouches[0].clientY)}\n      onTouchStart={event => onDragStart(event.targetTouches[0].clientX, event.targetTouches[0].clientY)}\n    >\n      {children}\n    </div>\n  )\n})\n\nObject.defineProperty(SwipeContainer, 'displayName', { value: 'SwipeContainer', writable: false })\n"]}

package/components/TextField.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 export type TextFieldProps = HTMLAttributes<HTMLInputElement> & {
     emptyValue?: string;
     isDisabled?: boolean;
@@ -9,13 +9,13 @@ export type TextFieldProps = HTMLAttributes<HTMLInputElement> & {
     onUnfocus?: (value: string) => void;
     onValueChange?: (value: string) => void;
 };
-export declare const TextField: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLInputElement> & {
-    emptyValue?: string | undefined;
-    isDisabled?: boolean | undefined;
-    placeholder?: string | undefined;
-    value?: string | undefined;
-    formatter?: ((prevValue: string, newValue: string) => string) | undefined;
-    onFocus?: ((value: string) => void) | undefined;
-    onUnfocus?: ((value: string) => void) | undefined;
-    onValueChange?: ((value: string) => void) | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
+export declare const TextField: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLInputElement> & {
+    emptyValue?: string;
+    isDisabled?: boolean;
+    placeholder?: string;
+    value?: string;
+    formatter?: (prevValue: string, newValue: string) => string;
+    onFocus?: (value: string) => void;
+    onUnfocus?: (value: string) => void;
+    onValueChange?: (value: string) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/components/TextField.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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 __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)
@@ -46,7 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextField = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var usePrevious_1 = require("../hooks/usePrevious");
 exports.TextField = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.emptyValue, emptyValue = _b === void 0 ? '' : _b, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, placeholder = _a.placeholder, externalValue = _a.value, formatter = _a.formatter, onFocus = _a.onFocus, onUnfocus = _a.onUnfocus, onValueChange = _a.onValueChange, props = __rest(_a, ["emptyValue", "isDisabled", "placeholder", "value", "formatter", "onFocus", "onUnfocus", "onValueChange"]);
@@ -64,7 +42,7 @@ exports.TextField = (0, react_1.forwardRef)(function (_a, ref) {
             return;
         handleValueChange(value);
     }, [value]);
-    return (react_1.default.createElement("input", __assign({}, props, { ref: ref, "data-component": 'text-field', placeholder: placeholder, type: 'text', value: value, disabled: isDisabled, onBlur: function (_a) {
+    return ((0, jsx_runtime_1.jsx)("input", __assign({}, props, { ref: ref, "data-component": 'text-field', disabled: isDisabled, placeholder: placeholder, type: 'text', value: value, onBlur: function (_a) {
             var target = _a.target;
             return onUnfocus === null || onUnfocus === void 0 ? void 0 : onUnfocus(target.value);
         }, onChange: function (_a) {

package/components/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"/","sources":["components/TextField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4G;AAC5G,oDAAkD;AAarC,QAAA,SAAS,GAAG,IAAA,kBAAU,EAAmC,UAAC,EAUtE,EAAE,GAAG;IATJ,IAAA,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,WAAW,iBAAA,EACJ,aAAa,WAAA,EACpB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,SAAS,eAAA,EACT,aAAa,mBAAA,EACV,KAAK,cAT6D,0GAUtE,CADS;IAER,IAAM,iBAAiB,GAAG,UAAC,QAAgB;;QACzC,IAAM,SAAS,GAAG,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,KAAK,EAAE,QAAQ,CAAC,mCAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAU,CAAA;QAErG,IAAI,SAAS,KAAK,KAAK;YAAE,OAAM;QAE/B,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,SAAS,CAAC,CAAA;IAC5B,CAAC,CAAA;IAED,IAAM,KAAK,GAAG,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,UAAU,CAAA;IACzC,IAAM,SAAS,GAAG,IAAA,yBAAW,EAAC,KAAK,CAAC,CAAA;IAEpC,IAAA,iBAAS,EAAC;QACR,IAAI,SAAS,KAAK,SAAS;YAAE,OAAM;QAEnC,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,oDACM,KAAK,IACT,GAAG,EAAE,GAAG,oBACO,YAAY,EAC3B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,UAAC,EAAwC;gBAAtC,MAAM,YAAA;YAAqC,OAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,MAAM,CAAC,KAAK,CAAC;QAAzB,CAAyB,EAC/E,QAAQ,EAAE,UAAC,EAAyC;gBAAvC,MAAM,YAAA;YAAsC,OAAA,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC;QAA/B,CAA+B,EACxF,OAAO,EAAE,UAAC,EAAwC;gBAAtC,MAAM,YAAA;YAAqC,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,MAAM,CAAC,KAAK,CAAC;QAAvB,CAAuB,IAC9E,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,cAAc,CAAC,iBAAS,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA","sourcesContent":["import React, { forwardRef, useEffect, type ChangeEvent, type FocusEvent, type HTMLAttributes } from 'react'\nimport { usePrevious } from '../hooks/usePrevious'\n\nexport type TextFieldProps = HTMLAttributes<HTMLInputElement> & {\n  emptyValue?: string\n  isDisabled?: boolean\n  placeholder?: string\n  value?: string\n  formatter?: (prevValue: string, newValue: string) => string\n  onFocus?: (value: string) => void\n  onUnfocus?: (value: string) => void\n  onValueChange?: (value: string) => void\n}\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(({\n  emptyValue = '',\n  isDisabled = false,\n  placeholder,\n  value: externalValue,\n  formatter,\n  onFocus,\n  onUnfocus,\n  onValueChange,\n  ...props\n}, ref) => {\n  const handleValueChange = (newValue: string) => {\n    const formatted = (newValue !== emptyValue) ? (formatter?.(value, newValue) ?? newValue) : emptyValue\n\n    if (formatted === value) return\n\n    onValueChange?.(formatted)\n  }\n\n  const value = externalValue ?? emptyValue\n  const prevValue = usePrevious(value)\n\n  useEffect(() => {\n    if (prevValue === undefined) return\n\n    handleValueChange(value)\n  }, [value])\n\n  return (\n    <input\n      {...props}\n      ref={ref}\n      data-component='text-field'\n      placeholder={placeholder}\n      type='text'\n      value={value}\n      disabled={isDisabled}\n      onBlur={({ target }: FocusEvent<HTMLInputElement>) => onUnfocus?.(target.value)}\n      onChange={({ target }: ChangeEvent<HTMLInputElement>) => handleValueChange(target.value)}\n      onFocus={({ target }: FocusEvent<HTMLInputElement>) => onFocus?.(target.value)}\n    />\n  )\n})\n\nObject.defineProperty(TextField, 'displayName', { value: 'TextField', writable: false })\n"]}
+{"version":3,"file":"TextField.js","sourceRoot":"/","sources":["components/TextField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAqG;AACrG,oDAAkD;AAarC,QAAA,SAAS,GAAG,IAAA,kBAAU,EAAmC,UAAC,EAUtE,EAAE,GAAG;IATJ,IAAA,kBAAe,EAAf,UAAU,mBAAG,EAAE,KAAA,EACf,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,WAAW,iBAAA,EACJ,aAAa,WAAA,EACpB,SAAS,eAAA,EACT,OAAO,aAAA,EACP,SAAS,eAAA,EACT,aAAa,mBAAA,EACV,KAAK,cAT6D,0GAUtE,CADS;IAER,IAAM,iBAAiB,GAAG,UAAC,QAAgB;;QACzC,IAAM,SAAS,GAAG,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,KAAK,EAAE,QAAQ,CAAC,mCAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,UAAU,CAAA;QAErG,IAAI,SAAS,KAAK,KAAK;YAAE,OAAM;QAE/B,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,SAAS,CAAC,CAAA;IAC5B,CAAC,CAAA;IAED,IAAM,KAAK,GAAG,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,UAAU,CAAA;IACzC,IAAM,SAAS,GAAG,IAAA,yBAAW,EAAC,KAAK,CAAC,CAAA;IAEpC,IAAA,iBAAS,EAAC;QACR,IAAI,SAAS,KAAK,SAAS;YAAE,OAAM;QAEnC,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAC1B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL,6CACM,KAAK,IACT,GAAG,EAAE,GAAG,oBACO,YAAY,EAC3B,QAAQ,EAAE,UAAU,EACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,UAAC,EAAwC;gBAAtC,MAAM,YAAA;YAAqC,OAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,MAAM,CAAC,KAAK,CAAC;QAAzB,CAAyB,EAC/E,QAAQ,EAAE,UAAC,EAAyC;gBAAvC,MAAM,YAAA;YAAsC,OAAA,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC;QAA/B,CAA+B,EACxF,OAAO,EAAE,UAAC,EAAwC;gBAAtC,MAAM,YAAA;YAAqC,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,MAAM,CAAC,KAAK,CAAC;QAAvB,CAAuB,IAC9E,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,cAAc,CAAC,iBAAS,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA","sourcesContent":["import { forwardRef, useEffect, type ChangeEvent, type FocusEvent, type HTMLAttributes } from 'react'\nimport { usePrevious } from '../hooks/usePrevious'\n\nexport type TextFieldProps = HTMLAttributes<HTMLInputElement> & {\n  emptyValue?: string\n  isDisabled?: boolean\n  placeholder?: string\n  value?: string\n  formatter?: (prevValue: string, newValue: string) => string\n  onFocus?: (value: string) => void\n  onUnfocus?: (value: string) => void\n  onValueChange?: (value: string) => void\n}\n\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(({\n  emptyValue = '',\n  isDisabled = false,\n  placeholder,\n  value: externalValue,\n  formatter,\n  onFocus,\n  onUnfocus,\n  onValueChange,\n  ...props\n}, ref) => {\n  const handleValueChange = (newValue: string) => {\n    const formatted = (newValue !== emptyValue) ? (formatter?.(value, newValue) ?? newValue) : emptyValue\n\n    if (formatted === value) return\n\n    onValueChange?.(formatted)\n  }\n\n  const value = externalValue ?? emptyValue\n  const prevValue = usePrevious(value)\n\n  useEffect(() => {\n    if (prevValue === undefined) return\n\n    handleValueChange(value)\n  }, [value])\n\n  return (\n    <input\n      {...props}\n      ref={ref}\n      data-component='text-field'\n      disabled={isDisabled}\n      placeholder={placeholder}\n      type='text'\n      value={value}\n      onBlur={({ target }: FocusEvent<HTMLInputElement>) => onUnfocus?.(target.value)}\n      onChange={({ target }: ChangeEvent<HTMLInputElement>) => handleValueChange(target.value)}\n      onFocus={({ target }: FocusEvent<HTMLInputElement>) => onFocus?.(target.value)}\n    />\n  )\n})\n\nObject.defineProperty(TextField, 'displayName', { value: 'TextField', writable: false })\n"]}