etudes 2.5.0 → 2.6.0

package/lib/RotatingGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"RotatingGallery.js","sourceRoot":"/","sources":["RotatingGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren, useEffect, useState } from 'react'\nimport { Transition } from 'react-transition-group'\nimport Each from './Each'\nimport useInterval from './hooks/useInterval'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Current image index. An error is thrown if the index is invalid (must be\n   * between 0 and length of `srcs` - 1, inclusive). This prop supports two-way\n   * binding.\n   */\n  index?: number\n\n  /**\n   * An array of image paths.\n   */\n  srcs?: string[]\n\n  /**\n   * The duration of one rotation in milliseconds (how long one image stays\n   * before transitioning to the next). Specifying `NaN` or a negative number\n   * will prevent the component from automatically rotating.\n   */\n  rotationDuration?: number\n\n  /**\n   * The duration of an image transition in milliseconds.\n   */\n  transitionDuration?: number\n\n  /**\n   * Handler invoked when the image index changes.\n   *\n   * @param index - The current image index.\n   */\n  onIndexChange?: (index: number) => void\n}>\n\n/**\n * A component displaying rotating images.\n *\n * @exports RotatingGalleryImage - Component for each rotating image, classes:\n *                                 `entering`, `entered`, `exiting`, `exited`.\n */\nexport default forwardRef<HTMLDivElement, RotatingGalleryProps>(({\n  children,\n  index: externalIndex = 0,\n  rotationDuration,\n  srcs = [],\n  transitionDuration = 500,\n  onIndexChange,\n  ...props\n}, ref) => {\n  const [index, setIndex] = useState(externalIndex)\n\n  useInterval(() => {\n    setIndex((index + 1) % srcs.length)\n  }, rotationDuration, undefined, [index])\n\n  useEffect(() => {\n    if (externalIndex === index) return\n    setIndex(externalIndex)\n  }, [externalIndex])\n\n  useEffect(() => {\n    onIndexChange?.(index)\n  }, [index])\n\n  const components = asComponentDict(children, {\n    image: RotatingGalleryImage,\n  })\n\n  const fixedStyles = asStyleDict({\n    image: {\n      backgroundRepeat: 'no-repeat',\n      backgroundSize: 'cover',\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      transitionDuration: `${transitionDuration}ms`,\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    image: {\n      transitionProperty: 'opacity',\n      transitionTimingFunction: 'ease-out',\n    },\n  })\n\n  return (\n    <div {...props} ref={ref}>\n      <Each in={srcs}>\n        {(src, idx) => (\n          <Transition in={idx === index} timeout={transitionDuration}>\n            {state => cloneStyledElement(components.image ?? <RotatingGalleryImage style={styles(\n              defaultStyles.image,\n              state === 'entering' && { opacity: '1' },\n              state === 'exiting' && { opacity: '0' },\n            )}/>, {\n              className: classNames(state),\n              style: styles(fixedStyles.image, {\n                backgroundImage: `url(${src})`,\n              }),\n            })}\n          </Transition>\n        )}\n      </Each>\n    </div>\n  )\n})\n\nexport const RotatingGalleryImage = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
+{"version":3,"file":"RotatingGallery.js","sourceRoot":"/","sources":["RotatingGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useState, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport { Transition } from 'react-transition-group'\nimport Each from './Each'\nimport useInterval from './hooks/useInterval'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Current image index. An error is thrown if the index is invalid (must be\n   * between 0 and length of `srcs` - 1, inclusive). This prop supports two-way\n   * binding.\n   */\n  index?: number\n\n  /**\n   * An array of image paths.\n   */\n  srcs?: string[]\n\n  /**\n   * The duration of one rotation in milliseconds (how long one image stays\n   * before transitioning to the next). Specifying `NaN` or a negative number\n   * will prevent the component from automatically rotating.\n   */\n  rotationDuration?: number\n\n  /**\n   * The duration of an image transition in milliseconds.\n   */\n  transitionDuration?: number\n\n  /**\n   * Handler invoked when the image index changes.\n   *\n   * @param index The current image index.\n   */\n  onIndexChange?: (index: number) => void\n}>\n\n/**\n * A component displaying rotating images.\n *\n * @exports RotatingGalleryImage Component for each rotating image, classes:\n *                               `entering`, `entered`, `exiting`, `exited`.\n */\nexport default forwardRef<HTMLDivElement, RotatingGalleryProps>(({\n  children,\n  index: externalIndex = 0,\n  rotationDuration,\n  srcs = [],\n  transitionDuration = 500,\n  onIndexChange,\n  ...props\n}, ref) => {\n  const [index, setIndex] = useState(externalIndex)\n\n  useInterval(() => {\n    setIndex((index + 1) % srcs.length)\n  }, rotationDuration, undefined, [index])\n\n  useEffect(() => {\n    if (externalIndex === index) return\n    setIndex(externalIndex)\n  }, [externalIndex])\n\n  useEffect(() => {\n    onIndexChange?.(index)\n  }, [index])\n\n  const components = asComponentDict(children, {\n    image: RotatingGalleryImage,\n  })\n\n  const fixedStyles = asStyleDict({\n    image: {\n      backgroundRepeat: 'no-repeat',\n      backgroundSize: 'cover',\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      transitionDuration: `${transitionDuration}ms`,\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    image: {\n      transitionProperty: 'opacity',\n      transitionTimingFunction: 'ease-out',\n    },\n  })\n\n  return (\n    <div {...props} ref={ref}>\n      <Each in={srcs}>\n        {(src, idx) => (\n          <Transition in={idx === index} timeout={transitionDuration}>\n            {state => cloneStyledElement(components.image ?? <RotatingGalleryImage style={styles(\n              defaultStyles.image,\n              state === 'entering' && { opacity: '1' },\n              state === 'exiting' && { opacity: '0' },\n            )}/>, {\n              className: classNames(state),\n              style: styles(fixedStyles.image, {\n                backgroundImage: `url(${src})`,\n              }),\n            })}\n          </Transition>\n        )}\n      </Each>\n    </div>\n  )\n})\n\nexport const RotatingGalleryImage = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}

package/lib/SelectableButton.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, ReactNode } from 'react';
+import React, { type HTMLAttributes, type ReactNode } from 'react';
 export type SelectableButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
     children?: (props: Pick<SelectableButtonProps, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode;
     isDeselectable?: boolean;

package/lib/SelectableButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableButton.js","sourceRoot":"/","sources":["SelectableButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyF;AAYzF,kBAAe,IAAA,kBAAU,EAA2C,UAAC,EASpE,EAAE,GAAG;;IARJ,IAAA,QAAQ,cAAA,EACR,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,kBAAsC,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EACtC,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,QAAQ,cAAA,EACL,KAAK,cAR2D,6FASpE,CADS;IAEF,IAAA,KAAA,OAA8B,IAAA,gBAAQ,EAAC,kBAAkB,CAAC,IAAA,EAAzD,UAAU,QAAA,EAAE,aAAa,QAAgC,CAAA;IAEhE,IAAM,eAAe,GAAG;QACtB,IAAI,UAAU;YAAE,OAAM;QAEtB,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,cAAc;gBAAE,OAAM;YAC3B,aAAa,CAAC,KAAK,CAAC,CAAA;YACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;SACf;aACI;YACH,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;SACb;IACH,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,aAAa,CAAC,kBAAkB,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAExB,OAAO,CACL,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,cAAM,OAAA,eAAe,EAAE,EAAjB,CAAiB,EAAE,QAAQ,EAAE,UAAU,IAAI,UAAU,IAAI,CAAC,cAAc,KAEtF,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,cAAc,gBAAA,EAAE,UAAU,YAAA,EAAE,UAAU,YAAA,EAAE,KAAK,OAAA,EAAE,CAAC,mCAAI,KAAK,CAChE,CACV,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactNode, useEffect, useState } from 'react'\n\nexport type SelectableButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {\n  children?: (props: Pick<SelectableButtonProps, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode\n  isDeselectable?: boolean\n  isDisabled?: boolean\n  isSelected?: boolean\n  label?: string\n  onDeselect?: () => void\n  onSelect?: () => void\n}\n\nexport default forwardRef<HTMLButtonElement, SelectableButtonProps>(({\n  children,\n  isDeselectable = false,\n  isDisabled = false,\n  isSelected: externalIsSelected = false,\n  label,\n  onDeselect,\n  onSelect,\n  ...props\n}, ref) => {\n  const [isSelected, setIsSelected] = useState(externalIsSelected)\n\n  const toggleSelection = () => {\n    if (isDisabled) return\n\n    if (isSelected) {\n      if (!isDeselectable) return\n      setIsSelected(false)\n      onDeselect?.()\n    }\n    else {\n      setIsSelected(true)\n      onSelect?.()\n    }\n  }\n\n  useEffect(() => {\n    setIsSelected(externalIsSelected)\n  }, [externalIsSelected])\n\n  return (\n    <button\n      {...props}\n      ref={ref}\n      onClick={() => toggleSelection()} disabled={isDisabled || isSelected && !isDeselectable}\n    >\n      {children?.({ isDeselectable, isDisabled, isSelected, label }) ?? label}\n    </button>\n  )\n})\n"]}
+{"version":3,"file":"SelectableButton.js","sourceRoot":"/","sources":["SelectableButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmG;AAYnG,kBAAe,IAAA,kBAAU,EAA2C,UAAC,EASpE,EAAE,GAAG;;IARJ,IAAA,QAAQ,cAAA,EACR,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,kBAAsC,EAA1B,kBAAkB,mBAAG,KAAK,KAAA,EACtC,KAAK,WAAA,EACL,UAAU,gBAAA,EACV,QAAQ,cAAA,EACL,KAAK,cAR2D,6FASpE,CADS;IAEF,IAAA,KAAA,OAA8B,IAAA,gBAAQ,EAAC,kBAAkB,CAAC,IAAA,EAAzD,UAAU,QAAA,EAAE,aAAa,QAAgC,CAAA;IAEhE,IAAM,eAAe,GAAG;QACtB,IAAI,UAAU;YAAE,OAAM;QAEtB,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,cAAc;gBAAE,OAAM;YAC3B,aAAa,CAAC,KAAK,CAAC,CAAA;YACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;SACf;aACI;YACH,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;SACb;IACH,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,aAAa,CAAC,kBAAkB,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAExB,OAAO,CACL,qDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,cAAM,OAAA,eAAe,EAAE,EAAjB,CAAiB,EAAE,QAAQ,EAAE,UAAU,IAAI,UAAU,IAAI,CAAC,cAAc,KAEtF,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,cAAc,gBAAA,EAAE,UAAU,YAAA,EAAE,UAAU,YAAA,EAAE,KAAK,OAAA,EAAE,CAAC,mCAAI,KAAK,CAChE,CACV,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { forwardRef, useEffect, useState, type HTMLAttributes, type ReactNode } from 'react'\n\nexport type SelectableButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {\n  children?: (props: Pick<SelectableButtonProps, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode\n  isDeselectable?: boolean\n  isDisabled?: boolean\n  isSelected?: boolean\n  label?: string\n  onDeselect?: () => void\n  onSelect?: () => void\n}\n\nexport default forwardRef<HTMLButtonElement, SelectableButtonProps>(({\n  children,\n  isDeselectable = false,\n  isDisabled = false,\n  isSelected: externalIsSelected = false,\n  label,\n  onDeselect,\n  onSelect,\n  ...props\n}, ref) => {\n  const [isSelected, setIsSelected] = useState(externalIsSelected)\n\n  const toggleSelection = () => {\n    if (isDisabled) return\n\n    if (isSelected) {\n      if (!isDeselectable) return\n      setIsSelected(false)\n      onDeselect?.()\n    }\n    else {\n      setIsSelected(true)\n      onSelect?.()\n    }\n  }\n\n  useEffect(() => {\n    setIsSelected(externalIsSelected)\n  }, [externalIsSelected])\n\n  return (\n    <button\n      {...props}\n      ref={ref}\n      onClick={() => toggleSelection()} disabled={isDisabled || isSelected && !isDeselectable}\n    >\n      {children?.({ isDeselectable, isDisabled, isSelected, label }) ?? label}\n    </button>\n  )\n})\n"]}

package/lib/Slider.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
@@ -40,7 +40,7 @@ export type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
      * A function that returns the label to be displayed at a given slider
      * position.
      *
-     * @param position - The current slider position.
+     * @param position The current slider position.
      *
      * @returns The label.
      */
@@ -52,8 +52,8 @@ export type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
      * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
      * still `true`.
      *
-     * @param position - The current slider position.
-     * @param isDragging - Specifies if the position change is due to dragging.
+     * @param position The current slider position.
+     * @param isDragging Specifies if the position change is due to dragging.
      */
     onPositionChange?: (position: number, isDragging: boolean) => void;
     /**
@@ -74,10 +74,10 @@ export type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
  * width and height of the knob are set via props (`knobWidth` and `knobHeight`,
  * respectively). The size of the knob does not impact the size of the slider.
  *
- * @exports SliderKnob - The component for the knob.
- * @exports SliderLabel - The component for the label on the knob.
- * @exports SliderTrack - The component for the slide track on either side of
- *                        the knob.
+ * @exports SliderKnob The component for the knob.
+ * @exports SliderLabel The component for the label on the knob.
+ * @exports SliderTrack The component for the slide track on either side of the
+ *                        knob.
  */
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -119,7 +119,7 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * A function that returns the label to be displayed at a given slider
      * position.
      *
-     * @param position - The current slider position.
+     * @param position The current slider position.
      *
      * @returns The label.
      */
@@ -131,8 +131,8 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
      * still `true`.
      *
-     * @param position - The current slider position.
-     * @param isDragging - Specifies if the position change is due to dragging.
+     * @param position The current slider position.
+     * @param isDragging Specifies if the position change is due to dragging.
      */
     onPositionChange?: ((position: number, isDragging: boolean) => void) | undefined;
     /**

package/lib/Slider.js

@@ -83,10 +83,10 @@ var styles_1 = __importDefault(require("./utils/styles"));
  * width and height of the knob are set via props (`knobWidth` and `knobHeight`,
  * respectively). The size of the knob does not impact the size of the slider.
  *
- * @exports SliderKnob - The component for the knob.
- * @exports SliderLabel - The component for the label on the knob.
- * @exports SliderTrack - The component for the slide track on either side of
- *                        the knob.
+ * @exports SliderKnob The component for the knob.
+ * @exports SliderLabel The component for the label on the knob.
+ * @exports SliderTrack The component for the slide track on either side of the
+ *                        knob.
  */
 exports.default = (0, react_1.forwardRef)(function (_a, ref) {
     var _b, _c, _d, _e;

package/lib/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, MouseEvent, PropsWithChildren, useEffect, useRef } from 'react'\nimport { Rect } from 'spase'\nimport useDragEffect from './hooks/useDragEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type SliderProps = 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 change events are dispatched only when dragging ends.\n   * When disabled, aforementioned events are fired repeatedly while 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   * The current position.\n   */\n  position?: number\n\n  /**\n   * A function that returns the label to be displayed at a given slider\n   * position.\n   *\n   * @param position - The current slider position.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number) => string\n\n  /**\n   * Handler invoked when position changes. This can either be invoked from the\n   * `position` prop being changed or from the slider being dragged. Note that\n   * if the event is emitted at the end of dragging due to\n   * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`.\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 slider component supporting both horizontal and vertical orientations whose\n * sliding position (a decimal between 0.0 and 1.0, inclusive) can be two-way\n * binded. The component consists of three customizable elements: a draggable\n * knob, a label on the knob, and a scroll track on either side of the knob.\n * While the width and height of the slider is inferred from its CSS rules, the\n * width and height of the knob are set via props (`knobWidth` and `knobHeight`,\n * respectively). The size of the knob does not impact the size of the slider.\n *\n * @exports SliderKnob - The component for the knob.\n * @exports SliderLabel - The component for the label on the knob.\n * @exports SliderTrack - The component for the slide track on either side of\n *                        the knob.\n */\nexport default forwardRef<HTMLDivElement, SliderProps>(({\n  children,\n  className,\n  isInverted = false,\n  isTrackInteractive = true,\n  knobHeight = 30,\n  knobWidth = 30,\n  labelProvider,\n  onlyDispatchesOnDragEnd = false,\n  orientation = 'vertical',\n  position: externalPosition = 0,\n  trackPadding = 0,\n  onDragEnd,\n  onDragStart,\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: break\n    }\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const knobContainerRef = useRef<HTMLButtonElement>(null)\n\n  const { isDragging: [isDragging], isReleasing: [isReleasing], value: [position, setPosition] } = useDragEffect(knobContainerRef, {\n    initialValue: externalPosition,\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\n  useEffect(() => {\n    if (isDragging || externalPosition === position) return\n    setPosition(externalPosition)\n  }, [externalPosition])\n\n  useEffect(() => {\n    if (isDragging && onlyDispatchesOnDragEnd) return\n    onPositionChange?.(position, isDragging)\n  }, [position])\n\n  useEffect(() => {\n    if (isDragging || !onlyDispatchesOnDragEnd) return\n    onPositionChange?.(position, true)\n  }, [isDragging])\n\n  const components = asComponentDict(children, {\n    knob: SliderKnob,\n    label: SliderLabel,\n    track: SliderTrack,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    track: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    knob: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    label: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n  })\n\n  const fixedStyles = 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  const defaultStyles = 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  return (\n    <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {cloneStyledElement(components.track ?? <SliderTrack style={defaultStyles.track}/>, {\n          className: classNames('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 ?? <SliderTrack style={defaultStyles.track}/>, {\n          className: classNames('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 ?? <SliderKnob style={defaultStyles.knob}/>, {\n            className: classNames(fixedClassNames.knob),\n            style: styles(fixedStyles.knob),\n          }, labelProvider && cloneStyledElement(components.label ?? <SliderLabel style={defaultStyles.label}/>, {\n            className: classNames(fixedClassNames.label),\n            style: styles(fixedStyles.label),\n          }, labelProvider(position)))}\n        </button>\n      </div>\n    </div>\n  )\n})\n\nexport const SliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const SliderKnob = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const SliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useRef, type HTMLAttributes, type MouseEvent, type PropsWithChildren } from 'react'\nimport { Rect } from 'spase'\nimport useDragEffect from './hooks/useDragEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type SliderProps = 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 change events are dispatched only when dragging ends.\n   * When disabled, aforementioned events are fired repeatedly while 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   * The current position.\n   */\n  position?: number\n\n  /**\n   * A function that returns the label to be displayed at a given slider\n   * position.\n   *\n   * @param position The current slider position.\n   *\n   * @returns The label.\n   */\n  labelProvider?: (position: number) => string\n\n  /**\n   * Handler invoked when position changes. This can either be invoked from the\n   * `position` prop being changed or from the slider being dragged. Note that\n   * if the event is emitted at the end of dragging due to\n   * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is\n   * still `true`.\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 slider component supporting both horizontal and vertical orientations whose\n * sliding position (a decimal between 0.0 and 1.0, inclusive) can be two-way\n * binded. The component consists of three customizable elements: a draggable\n * knob, a label on the knob, and a scroll track on either side of the knob.\n * While the width and height of the slider is inferred from its CSS rules, the\n * width and height of the knob are set via props (`knobWidth` and `knobHeight`,\n * respectively). The size of the knob does not impact the size of the slider.\n *\n * @exports SliderKnob The component for the knob.\n * @exports SliderLabel The component for the label on the knob.\n * @exports SliderTrack The component for the slide track on either side of the\n *                        knob.\n */\nexport default forwardRef<HTMLDivElement, SliderProps>(({\n  children,\n  className,\n  isInverted = false,\n  isTrackInteractive = true,\n  knobHeight = 30,\n  knobWidth = 30,\n  labelProvider,\n  onlyDispatchesOnDragEnd = false,\n  orientation = 'vertical',\n  position: externalPosition = 0,\n  trackPadding = 0,\n  onDragEnd,\n  onDragStart,\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: break\n    }\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const knobContainerRef = useRef<HTMLButtonElement>(null)\n\n  const { isDragging: [isDragging], isReleasing: [isReleasing], value: [position, setPosition] } = useDragEffect(knobContainerRef, {\n    initialValue: externalPosition,\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\n  useEffect(() => {\n    if (isDragging || externalPosition === position) return\n    setPosition(externalPosition)\n  }, [externalPosition])\n\n  useEffect(() => {\n    if (isDragging && onlyDispatchesOnDragEnd) return\n    onPositionChange?.(position, isDragging)\n  }, [position])\n\n  useEffect(() => {\n    if (isDragging || !onlyDispatchesOnDragEnd) return\n    onPositionChange?.(position, true)\n  }, [isDragging])\n\n  const components = asComponentDict(children, {\n    knob: SliderKnob,\n    label: SliderLabel,\n    track: SliderTrack,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    track: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    knob: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    label: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n  })\n\n  const fixedStyles = 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  const defaultStyles = 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  return (\n    <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {cloneStyledElement(components.track ?? <SliderTrack style={defaultStyles.track}/>, {\n          className: classNames('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 ?? <SliderTrack style={defaultStyles.track}/>, {\n          className: classNames('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 ?? <SliderKnob style={defaultStyles.knob}/>, {\n            className: classNames(fixedClassNames.knob),\n            style: styles(fixedStyles.knob),\n          }, labelProvider && cloneStyledElement(components.label ?? <SliderLabel style={defaultStyles.label}/>, {\n            className: classNames(fixedClassNames.label),\n            style: styles(fixedStyles.label),\n          }, labelProvider(position)))}\n        </button>\n      </div>\n    </div>\n  )\n})\n\nexport const SliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const SliderKnob = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const SliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}

package/lib/StepwiseSlider.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
@@ -48,8 +48,8 @@ export type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChil
      * A function that returns the label to be displayed at a given slider
      * position and closest step index (if steps are provided).
      *
-     * @param position - The current slider position.
-     * @param index - The nearest step index (if steps are provided), or -1 if no
+     * @param position The current slider position.
+     * @param index The nearest step index (if steps are provided), or -1 if no
      *                steps are provided.
      *
      * @returns The label.
@@ -62,8 +62,8 @@ export type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChil
      * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
      * still `true`. This event is emitted right after `onPositionChange`.
      *
-     * @param index - The current slider index.
-     * @param isDragging - Specifies if the index change is due to dragging.
+     * @param index The current slider index.
+     * @param isDragging Specifies if the index change is due to dragging.
      */
     onIndexChange?: (index: number, isDragging: boolean) => void;
     /**
@@ -73,8 +73,8 @@ export type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChil
      * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
      * still `true`. This event is emitted right before `onIndexChange`.
      *
-     * @param position - The current slider position.
-     * @param isDragging - Specifies if the position change is due to dragging.
+     * @param position The current slider position.
+     * @param isDragging Specifies if the position change is due to dragging.
      */
     onPositionChange?: (position: number, isDragging: boolean) => void;
     /**
@@ -99,10 +99,10 @@ export type StepwiseSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChil
  * the slider. While dragging, the slider still emits a position change event,
  * where the position is a decimal ranging between 0.0 and 1.0, inclusive.
  *
- * @exports StepwiseSliderKnob - The component for the knob.
- * @exports StepwiseSliderLabel - The component for the label on the knob.
- * @exports StepwiseSliderTrack - The component for the slide track on either
- *                                side of the knob.
+ * @exports StepwiseSliderKnob The component for the knob.
+ * @exports StepwiseSliderLabel The component for the label on the knob.
+ * @exports StepwiseSliderTrack The component for the slide track on either side
+ *                                of the knob.
  */
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -152,8 +152,8 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * A function that returns the label to be displayed at a given slider
      * position and closest step index (if steps are provided).
      *
-     * @param position - The current slider position.
-     * @param index - The nearest step index (if steps are provided), or -1 if no
+     * @param position The current slider position.
+     * @param index The nearest step index (if steps are provided), or -1 if no
      *                steps are provided.
      *
      * @returns The label.
@@ -166,8 +166,8 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
      * still `true`. This event is emitted right after `onPositionChange`.
      *
-     * @param index - The current slider index.
-     * @param isDragging - Specifies if the index change is due to dragging.
+     * @param index The current slider index.
+     * @param isDragging Specifies if the index change is due to dragging.
      */
     onIndexChange?: ((index: number, isDragging: boolean) => void) | undefined;
     /**
@@ -177,8 +177,8 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * `onlyDispatchesOnDragEnd` set to `true`, the `isDragging` parameter here is
      * still `true`. This event is emitted right before `onIndexChange`.
      *
-     * @param position - The current slider position.
-     * @param isDragging - Specifies if the position change is due to dragging.
+     * @param position The current slider position.
+     * @param isDragging Specifies if the position change is due to dragging.
      */
     onPositionChange?: ((position: number, isDragging: boolean) => void) | undefined;
     /**
@@ -199,7 +199,7 @@ export declare const StepwiseSliderLabel: ({ ...props }: HTMLAttributes<HTMLDivE
 /**
  * Generates a set of steps compatible with this component.
  *
- * @param length - The number of steps. This must be at least 2 because you must
+ * @param length The number of steps. This must be at least 2 because you must
  *                 include the starting and ending points.
  *
  * @returns An array of steps.

package/lib/StepwiseSlider.js

@@ -89,10 +89,10 @@ var debug = (0, useDebug_1.default)('stepwise-slider');
  * the slider. While dragging, the slider still emits a position change event,
  * where the position is a decimal ranging between 0.0 and 1.0, inclusive.
  *
- * @exports StepwiseSliderKnob - The component for the knob.
- * @exports StepwiseSliderLabel - The component for the label on the knob.
- * @exports StepwiseSliderTrack - The component for the slide track on either
- *                                side of the knob.
+ * @exports StepwiseSliderKnob The component for the knob.
+ * @exports StepwiseSliderLabel The component for the label on the knob.
+ * @exports StepwiseSliderTrack The component for the slide track on either side
+ *                                of the knob.
  */
 exports.default = (0, react_1.forwardRef)(function (_a, ref) {
     var _b, _c, _d, _e;
@@ -317,7 +317,7 @@ exports.StepwiseSliderLabel = StepwiseSliderLabel;
 /**
  * Generates a set of steps compatible with this component.
  *
- * @param length - The number of steps. This must be at least 2 because you must
+ * @param length The number of steps. This must be at least 2 because you must
  *                 include the starting and ending points.
  *
  * @returns An array of steps.
@@ -338,8 +338,8 @@ 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.
  *
- * @param position - The position (0 - 1, inclusive).
- * @param steps - The steps.
+ * @param position - The position (0 1, inclusive).
+ * @param steps The steps.
  *
  * @returns The nearest index.
  */
@@ -361,8 +361,8 @@ function getNearestIndexByPosition(position, steps) {
 /**
  * Gets the position by step index. This value ranges between 0 - 1, inclusive.
  *
- * @param index - The step index.
- * @param steps - The steps.
+ * @param index The step index.
+ * @param steps The steps.
  *
  * @returns The position. If for whatever reason the position cannot be
  *          determined, `NaN` is returned.

package/lib/StepwiseSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["StepwiseSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, MouseEvent, PropsWithChildren, useEffect, useRef, useState } from 'react'\nimport { Rect } from 'spase'\nimport useDragEffect from './hooks/useDragEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\nimport useDebug from './utils/useDebug'\n\nconst debug = useDebug('stepwise-slider')\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   * 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\n *                                side of the knob.\n */\nexport default 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  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] } = useDragEffect(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\n  useEffect(() => {\n    if (isDragging) return\n\n    const newPosition = getPositionAt(externalIndex, steps)\n\n    if (position !== newPosition) {\n      debug('Updating drag effect value from index prop...', 'OK', `prop=${newPosition}, effect=${position}`)\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  const components = asComponentDict(children, {\n    knob: StepwiseSliderKnob,\n    label: StepwiseSliderLabel,\n    track: StepwiseSliderTrack,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    track: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    knob: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    label: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n  })\n\n  const fixedStyles = 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  const defaultStyles = 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  return (\n    <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {cloneStyledElement(components.track ?? <StepwiseSliderTrack style={defaultStyles.track}/>, {\n          className: classNames('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: classNames('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: classNames(fixedClassNames.knob),\n            style: styles(fixedStyles.knob),\n          }, steps && labelProvider && cloneStyledElement(components.label ?? <StepwiseSliderLabel style={defaultStyles.label}/>, {\n            className: classNames(fixedClassNames.label),\n            style: styles(fixedStyles.label),\n          }, labelProvider(position, getNearestIndexByPosition(position, steps))))}\n        </button>\n      </div>\n    </div>\n  )\n})\n\nexport const StepwiseSliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const StepwiseSliderKnob = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const StepwiseSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\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"]}
+{"version":3,"file":"StepwiseSlider.js","sourceRoot":"/","sources":["StepwiseSlider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAmC;AACnC,6CAAoI;AACpI,+BAA4B;AAC5B,wEAAiD;AACjD,4EAAqD;AACrD,4EAAqD;AACrD,oEAA6C;AAC7C,kFAA2D;AAC3D,0DAAmC;AACnC,8DAAuC;AAEvC,IAAM,KAAK,GAAG,IAAA,kBAAQ,EAAC,iBAAiB,CAAC,CAAA;AAwGzC;;;;;;;;;;;;;;;;;GAiBG;AACH,kBAAe,IAAA,kBAAU,EAAsC,UAAC,EAkB/D,EAAE,GAAG;;IAjBJ,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,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,aAAa,mBAAA,EACb,gBAAgB,sBAAA,EACb,KAAK,cAjBsD,sPAkB/D,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;YACnB,KAAK,YAAY,CAAC,CAAC;gBACjB,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;aACN;YACD,KAAK,UAAU,CAAC,CAAC;gBACf,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;aACN;YACD;gBACE,MAAK;SACR;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,uBAAa,EAAC,gBAAgB,EAAE;QAC/H,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;IAE9D,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;YAC5B,KAAK,CAAC,+CAA+C,EAAE,IAAI,EAAE,eAAQ,WAAW,sBAAY,QAAQ,CAAE,CAAC,CAAA;YACvG,WAAW,CAAC,WAAW,CAAC,CAAA;SACzB;QAED,IAAI,aAAa,KAAK,KAAK,EAAE;YAC3B,QAAQ,CAAC,aAAa,CAAC,CAAA;SACxB;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;YAC3D,WAAW,CAAC,eAAe,CAAC,CAAA;YAC5B,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,eAAe,EAAE,IAAI,CAAC,CAAA;SAC1C;IACH,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,IAAM,UAAU,GAAG,IAAA,yBAAe,EAAC,QAAQ,EAAE;QAC3C,IAAI,EAAE,0BAAkB;QACxB,KAAK,EAAE,2BAAmB;QAC1B,KAAK,EAAE,2BAAmB;KAC3B,CAAC,CAAA;IAEF,IAAM,eAAe,GAAG,IAAA,yBAAe,EAAC;QACtC,IAAI,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YAC5B,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,UAAU;YACtB,WAAW,EAAE,WAAW;SACzB,CAAC;QACF,KAAK,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YAC7B,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,UAAU;YACtB,WAAW,EAAE,WAAW;SACzB,CAAC;QACF,IAAI,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YAC5B,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,UAAU;YACtB,WAAW,EAAE,WAAW;SACzB,CAAC;QACF,KAAK,EAAE,IAAA,oBAAU,EAAC,WAAW,EAAE;YAC7B,QAAQ,EAAE,OAAO;YACjB,UAAU,EAAE,SAAS;YACrB,UAAU,EAAE,UAAU;YACtB,WAAW,EAAE,WAAW;SACzB,CAAC;KACH,CAAC,CAAA;IAEF,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,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;IAEF,IAAM,aAAa,GAAG,IAAA,qBAAW,EAAC;QAChC,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;IAEF,OAAO,CACL,kDAAS,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC;QAC9E,uCAAK,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,IAAI;YACvC,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,KAAK,mCAAI,8BAAC,2BAAmB,IAAC,KAAK,EAAE,aAAa,CAAC,KAAK,GAAG,EAAE;gBAC1F,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,EAAE,eAAe,CAAC,KAAK,CAAC;gBACrD,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;oBAC5D,MAAM,EAAE,eAAQ,eAAe,GAAG,GAAG,iBAAO,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,GAAG,kBAAQ,YAAY,QAAK;oBAC7G,GAAG,EAAE,GAAG;iBACT,CAAC,CAAC,CAAC;oBACF,IAAI,EAAE,GAAG;oBACT,KAAK,EAAE,eAAQ,eAAe,GAAG,GAAG,iBAAO,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,kBAAQ,YAAY,QAAK;iBAC5G,CAAC;gBACF,OAAO,EAAE,iBAAiB;aAC3B,EAAE,uCAAK,KAAK,EAAE,WAAW,CAAC,WAAW,GAAG,CAAC;YACzC,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,KAAK,mCAAI,8BAAC,2BAAmB,IAAC,KAAK,EAAE,aAAa,CAAC,KAAK,GAAG,EAAE;gBAC1F,SAAS,EAAE,IAAA,oBAAU,EAAC,KAAK,EAAE,eAAe,CAAC,KAAK,CAAC;gBACnD,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,KAAK,EAAE,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC;oBAC5D,MAAM,EAAE,GAAG;oBACX,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;iBACpH,CAAC,CAAC,CAAC;oBACF,KAAK,EAAE,GAAG;oBACV,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;iBAClH,CAAC;gBACF,OAAO,EAAE,iBAAiB;aAC3B,EAAE,uCAAK,KAAK,EAAE,WAAW,CAAC,WAAW,GAAG,CAAC;YAC1C,0CAAQ,GAAG,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,CAAC,aAAa,IAC5D,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,IAAI,mCAAI,8BAAC,0BAAkB,IAAC,KAAK,EAAE,aAAa,CAAC,IAAI,GAAG,EAAE;gBACvF,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,IAAI,CAAC;gBAC3C,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,IAAI,CAAC;aAChC,EAAE,KAAK,IAAI,aAAa,IAAI,IAAA,4BAAkB,EAAC,MAAA,UAAU,CAAC,KAAK,mCAAI,8BAAC,2BAAmB,IAAC,KAAK,EAAE,aAAa,CAAC,KAAK,GAAG,EAAE;gBACtH,SAAS,EAAE,IAAA,oBAAU,EAAC,eAAe,CAAC,KAAK,CAAC;gBAC5C,KAAK,EAAE,IAAA,gBAAM,EAAC,WAAW,CAAC,KAAK,CAAC;aACjC,EAAE,aAAa,CAAC,QAAQ,EAAE,yBAAyB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CACjE,CACL,CACF,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEK,IAAM,mBAAmB,GAAG,UAAC,EAA4C;QAAvC,KAAK,cAAV,EAAY,CAAF;IAAuC,OAAA,kDAAS,KAAK,EAAG,CAAA;CAAA,CAAA;AAAzF,QAAA,mBAAmB,uBAAsE;AAE/F,IAAM,kBAAkB,GAAG,UAAC,EAA4C;QAAvC,KAAK,cAAV,EAAY,CAAF;IAAuC,OAAA,kDAAS,KAAK,EAAG,CAAA;CAAA,CAAA;AAAxF,QAAA,kBAAkB,sBAAsE;AAE9F,IAAM,mBAAmB,GAAG,UAAC,EAA4C;QAAvC,KAAK,cAAV,EAAY,CAAF;IAAuC,OAAA,kDAAS,KAAK,EAAG,CAAA;CAAA,CAAA;AAAzF,QAAA,mBAAmB,uBAAsE;AAEtG;;;;;;;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;AAXD,sCAWC;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;QAC5C,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;YACvC,QAAQ,GAAG,KAAK,CAAA;YAChB,KAAK,GAAG,CAAC,CAAA;SACV;KACF;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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, useEffect, useRef, useState, type HTMLAttributes, type MouseEvent, type PropsWithChildren } from 'react'\nimport { Rect } from 'spase'\nimport useDragEffect from './hooks/useDragEffect'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\nimport useDebug from './utils/useDebug'\n\nconst debug = useDebug('stepwise-slider')\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   * 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 default 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  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] } = useDragEffect(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\n  useEffect(() => {\n    if (isDragging) return\n\n    const newPosition = getPositionAt(externalIndex, steps)\n\n    if (position !== newPosition) {\n      debug('Updating drag effect value from index prop...', 'OK', `prop=${newPosition}, effect=${position}`)\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  const components = asComponentDict(children, {\n    knob: StepwiseSliderKnob,\n    label: StepwiseSliderLabel,\n    track: StepwiseSliderTrack,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    track: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    knob: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    label: classNames(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n  })\n\n  const fixedStyles = 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  const defaultStyles = 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  return (\n    <div {...props} ref={ref} className={classNames(className, fixedClassNames.root)}>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {cloneStyledElement(components.track ?? <StepwiseSliderTrack style={defaultStyles.track}/>, {\n          className: classNames('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: classNames('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: classNames(fixedClassNames.knob),\n            style: styles(fixedStyles.knob),\n          }, steps && labelProvider && cloneStyledElement(components.label ?? <StepwiseSliderLabel style={defaultStyles.label}/>, {\n            className: classNames(fixedClassNames.label),\n            style: styles(fixedStyles.label),\n          }, labelProvider(position, getNearestIndexByPosition(position, steps))))}\n        </button>\n      </div>\n    </div>\n  )\n})\n\nexport const StepwiseSliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const StepwiseSliderKnob = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const StepwiseSliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\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"]}

package/lib/SwipeContainer.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type SwipeContainerProps = HTMLAttributes<HTMLDivElement> & {
     isEnabled?: boolean;
     threshold?: number;

package/lib/SwipeContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeContainer.js","sourceRoot":"/","sources":["SwipeContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes, useState } 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 default 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 - endPosition.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      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"]}
+{"version":3,"file":"SwipeContainer.js","sourceRoot":"/","sources":["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 default 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 - endPosition.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      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"]}

package/lib/TextField.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type TextFieldProps = HTMLAttributes<HTMLInputElement> & {
     value?: string;
     onFocus?: (value: string) => void;

package/lib/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"/","sources":["TextField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkF;AASlF,kBAAe,IAAA,kBAAU,EAAmC,UAAC,EAM5D,EAAE,GAAG;IALJ,IAAA,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,OAAO,aAAA,EACP,SAAS,eAAA,EACT,aAAa,mBAAA,EACV,KAAK,cALmD,kDAM5D,CADS;IACC,OAAA,CACT,oDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,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,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,MAAM,CAAC,KAAK,CAAC;QAA7B,CAA6B,EACtF,OAAO,EAAE,UAAC,EAAwC;gBAAtC,MAAM,YAAA;YAAqC,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,MAAM,CAAC,KAAK,CAAC;QAAvB,CAAuB,IAC9E,CACH,CAAA;CAAA,CAAC,CAAA","sourcesContent":["import React, { ChangeEvent, FocusEvent, forwardRef, HTMLAttributes } from 'react'\n\nexport type TextFieldProps = HTMLAttributes<HTMLInputElement> & {\n  value?: string\n  onFocus?: (value: string) => void\n  onUnfocus?: (value: string) => void\n  onValueChange?: (value: string) => void\n}\n\nexport default forwardRef<HTMLInputElement, TextFieldProps>(({\n  value = '',\n  onFocus,\n  onUnfocus,\n  onValueChange,\n  ...props\n}, ref) => (\n  <input\n    {...props}\n    ref={ref}\n    type='text'\n    value={value}\n    onBlur={({ target }: FocusEvent<HTMLInputElement>) => onUnfocus?.(target.value)}\n    onChange={({ target }: ChangeEvent<HTMLInputElement>) => onValueChange?.(target.value)}\n    onFocus={({ target }: FocusEvent<HTMLInputElement>) => onFocus?.(target.value)}\n  />\n))\n"]}
+{"version":3,"file":"TextField.js","sourceRoot":"/","sources":["TextField.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAiG;AASjG,kBAAe,IAAA,kBAAU,EAAmC,UAAC,EAM5D,EAAE,GAAG;IALJ,IAAA,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,OAAO,aAAA,EACP,SAAS,eAAA,EACT,aAAa,mBAAA,EACV,KAAK,cALmD,kDAM5D,CADS;IACC,OAAA,CACT,oDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,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,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,MAAM,CAAC,KAAK,CAAC;QAA7B,CAA6B,EACtF,OAAO,EAAE,UAAC,EAAwC;gBAAtC,MAAM,YAAA;YAAqC,OAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,MAAM,CAAC,KAAK,CAAC;QAAvB,CAAuB,IAC9E,CACH,CAAA;CAAA,CAAC,CAAA","sourcesContent":["import React, { forwardRef, type ChangeEvent, type FocusEvent, type HTMLAttributes } from 'react'\n\nexport type TextFieldProps = HTMLAttributes<HTMLInputElement> & {\n  value?: string\n  onFocus?: (value: string) => void\n  onUnfocus?: (value: string) => void\n  onValueChange?: (value: string) => void\n}\n\nexport default forwardRef<HTMLInputElement, TextFieldProps>(({\n  value = '',\n  onFocus,\n  onUnfocus,\n  onValueChange,\n  ...props\n}, ref) => (\n  <input\n    {...props}\n    ref={ref}\n    type='text'\n    value={value}\n    onBlur={({ target }: FocusEvent<HTMLInputElement>) => onUnfocus?.(target.value)}\n    onChange={({ target }: ChangeEvent<HTMLInputElement>) => onValueChange?.(target.value)}\n    onFocus={({ target }: FocusEvent<HTMLInputElement>) => onFocus?.(target.value)}\n  />\n))\n"]}

package/lib/Video.d.ts

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react';
+import React, { type HTMLAttributes } from 'react';
 export type VideoProps = HTMLAttributes<HTMLDivElement> & {
     autoLoop?: boolean;
     autoPlay?: boolean;

package/lib/Video.js.map

@@ -1 +1 @@
-{"version":3,"file":"Video.js","sourceRoot":"/","sources":["Video.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes, ReactEventHandler, useEffect, useRef } from 'react'\nimport asStyleDict from './utils/asStyleDict'\nimport useDebug from './utils/useDebug'\n\nconst debug = useDebug('video')\n\nexport type VideoProps = HTMLAttributes<HTMLDivElement> & {\n  autoLoop?: boolean\n  autoPlay?: boolean\n  hasControls?: boolean\n  isCover?: boolean\n  isMuted?: boolean\n  playsInline?: boolean\n  posterSrc?: string\n  src: string\n  onCanPlay?: () => void\n  onEnd?: () => void\n  onFullscreenChange?: (isFullscreen: boolean) => void\n  onPause?: () => void\n  onPlay?: () => void\n}\n\nexport default forwardRef<HTMLDivElement, VideoProps>(({\n  autoLoop = true,\n  autoPlay = true,\n  hasControls = false,\n  isCover = true,\n  isMuted = true,\n  playsInline = true,\n  posterSrc,\n  src,\n  onCanPlay,\n  onEnd,\n  onFullscreenChange,\n  onPause,\n  onPlay,\n  ...props\n}, ref) => {\n  const bodyRef = useRef<HTMLVideoElement>(null)\n  const isPaused = bodyRef.current?.paused ?? false\n\n  useEffect(() => {\n    debug(`Initializing video with src <${src}>...`, 'OK')\n\n    if (!bodyRef.current) return\n\n    bodyRef.current.muted = isMuted\n    bodyRef.current.load()\n    bodyRef.current.addEventListener('webkitfullscreenchange', fullscreenChangeHandler)\n    bodyRef.current.addEventListener('mozfullscreenchange', fullscreenChangeHandler)\n    bodyRef.current.addEventListener('fullscreenchange', fullscreenChangeHandler)\n\n    return () => {\n      debug(`Deinitializing video with src <${src}>...`, 'OK')\n\n      pause()\n\n      bodyRef.current?.removeEventListener('webkitfullscreenchange', fullscreenChangeHandler)\n      bodyRef.current?.removeEventListener('mozfullscreenchange', fullscreenChangeHandler)\n      bodyRef.current?.removeEventListener('fullscreenchange', fullscreenChangeHandler)\n    }\n  }, [src])\n\n  const fullscreenChangeHandler = (event: Event) => {\n    const isFullscreen: boolean | undefined = (document as any).fullScreen || (document as any).mozFullScreen || (document as any).webkitIsFullScreen\n    if (isFullscreen === undefined) return\n    onFullscreenChange?.(isFullscreen)\n  }\n\n  const canPlayHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Checking if video is ready to play...', 'OK')\n\n    if (autoPlay && isPaused) {\n      play()\n    }\n\n    onCanPlay?.()\n  }\n\n  const playHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Playing video...', 'OK')\n    onPlay?.()\n  }\n\n  const pauseHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Pausing video...', 'OK')\n    onPause?.()\n  }\n\n  const endHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Ending video...', 'OK')\n    onEnd?.()\n  }\n\n  const play = () => {\n    if (!bodyRef.current) return\n    bodyRef.current.play()\n  }\n\n  const pause = () => {\n    if (!bodyRef.current) return\n    bodyRef.current.pause()\n  }\n\n  const fixedStyles = asStyleDict({\n    body: {\n      height: '100%',\n      width: '100%',\n      objectFit: isCover ? 'cover' : 'fill',\n    },\n  })\n\n  return (\n    <div {...props} ref={ref}>\n      <video\n        ref={bodyRef}\n        style={fixedStyles.body}\n        autoPlay={autoPlay}\n        controls={hasControls}\n        loop={autoLoop}\n        muted={isMuted}\n        playsInline={playsInline}\n        poster={posterSrc}\n        onCanPlay={canPlayHandler}\n        onEnded={endHandler}\n        onPause={pauseHandler}\n        onPlay={playHandler}\n      >\n        <source src={src}/>\n      </video>\n    </div>\n  )\n})\n"]}
+{"version":3,"file":"Video.js","sourceRoot":"/","sources":["Video.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyG;AACzG,oEAA6C;AAC7C,8DAAuC;AAEvC,IAAM,KAAK,GAAG,IAAA,kBAAQ,EAAC,OAAO,CAAC,CAAA;AAkB/B,kBAAe,IAAA,kBAAU,EAA6B,UAAC,EAetD,EAAE,GAAG;;IAdJ,IAAA,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,gBAAe,EAAf,QAAQ,mBAAG,IAAI,KAAA,EACf,mBAAmB,EAAnB,WAAW,mBAAG,KAAK,KAAA,EACnB,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,eAAc,EAAd,OAAO,mBAAG,IAAI,KAAA,EACd,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAClB,SAAS,eAAA,EACT,GAAG,SAAA,EACH,SAAS,eAAA,EACT,KAAK,WAAA,EACL,kBAAkB,wBAAA,EAClB,OAAO,aAAA,EACP,MAAM,YAAA,EACH,KAAK,cAd6C,iKAetD,CADS;IAER,IAAM,OAAO,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAA;IAC9C,IAAM,QAAQ,GAAG,MAAA,MAAA,OAAO,CAAC,OAAO,0CAAE,MAAM,mCAAI,KAAK,CAAA;IAEjD,IAAA,iBAAS,EAAC;QACR,KAAK,CAAC,uCAAgC,GAAG,SAAM,EAAE,IAAI,CAAC,CAAA;QAEtD,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAM;QAE5B,OAAO,CAAC,OAAO,CAAC,KAAK,GAAG,OAAO,CAAA;QAC/B,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;QACtB,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,wBAAwB,EAAE,uBAAuB,CAAC,CAAA;QACnF,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,qBAAqB,EAAE,uBAAuB,CAAC,CAAA;QAChF,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,CAAA;QAE7E,OAAO;;YACL,KAAK,CAAC,yCAAkC,GAAG,SAAM,EAAE,IAAI,CAAC,CAAA;YAExD,KAAK,EAAE,CAAA;YAEP,MAAA,OAAO,CAAC,OAAO,0CAAE,mBAAmB,CAAC,wBAAwB,EAAE,uBAAuB,CAAC,CAAA;YACvF,MAAA,OAAO,CAAC,OAAO,0CAAE,mBAAmB,CAAC,qBAAqB,EAAE,uBAAuB,CAAC,CAAA;YACpF,MAAA,OAAO,CAAC,OAAO,0CAAE,mBAAmB,CAAC,kBAAkB,EAAE,uBAAuB,CAAC,CAAA;QACnF,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAA;IAET,IAAM,uBAAuB,GAAG,UAAC,KAAY;QAC3C,IAAM,YAAY,GAAyB,QAAgB,CAAC,UAAU,IAAK,QAAgB,CAAC,aAAa,IAAK,QAAgB,CAAC,kBAAkB,CAAA;QACjJ,IAAI,YAAY,KAAK,SAAS;YAAE,OAAM;QACtC,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,YAAY,CAAC,CAAA;IACpC,CAAC,CAAA;IAED,IAAM,cAAc,GAAwC,UAAA,KAAK;QAC/D,KAAK,CAAC,uCAAuC,EAAE,IAAI,CAAC,CAAA;QAEpD,IAAI,QAAQ,IAAI,QAAQ,EAAE;YACxB,IAAI,EAAE,CAAA;SACP;QAED,SAAS,aAAT,SAAS,uBAAT,SAAS,EAAI,CAAA;IACf,CAAC,CAAA;IAED,IAAM,WAAW,GAAwC,UAAA,KAAK;QAC5D,KAAK,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAA;QAC/B,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAA;IACZ,CAAC,CAAA;IAED,IAAM,YAAY,GAAwC,UAAA,KAAK;QAC7D,KAAK,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAA;QAC/B,OAAO,aAAP,OAAO,uBAAP,OAAO,EAAI,CAAA;IACb,CAAC,CAAA;IAED,IAAM,UAAU,GAAwC,UAAA,KAAK;QAC3D,KAAK,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAA;QAC9B,KAAK,aAAL,KAAK,uBAAL,KAAK,EAAI,CAAA;IACX,CAAC,CAAA;IAED,IAAM,IAAI,GAAG;QACX,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAM;QAC5B,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAA;IACxB,CAAC,CAAA;IAED,IAAM,KAAK,GAAG;QACZ,IAAI,CAAC,OAAO,CAAC,OAAO;YAAE,OAAM;QAC5B,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,CAAA;IACzB,CAAC,CAAA;IAED,IAAM,WAAW,GAAG,IAAA,qBAAW,EAAC;QAC9B,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;SACtC;KACF,CAAC,CAAA;IAEF,OAAO,CACL,kDAAS,KAAK,IAAE,GAAG,EAAE,GAAG;QACtB,yCACE,GAAG,EAAE,OAAO,EACZ,KAAK,EAAE,WAAW,CAAC,IAAI,EACvB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,WAAW,EACrB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,SAAS,EACjB,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,WAAW;YAEnB,0CAAQ,GAAG,EAAE,GAAG,GAAG,CACb,CACJ,CACP,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, { forwardRef, useEffect, useRef, type HTMLAttributes, type ReactEventHandler } from 'react'\nimport asStyleDict from './utils/asStyleDict'\nimport useDebug from './utils/useDebug'\n\nconst debug = useDebug('video')\n\nexport type VideoProps = HTMLAttributes<HTMLDivElement> & {\n  autoLoop?: boolean\n  autoPlay?: boolean\n  hasControls?: boolean\n  isCover?: boolean\n  isMuted?: boolean\n  playsInline?: boolean\n  posterSrc?: string\n  src: string\n  onCanPlay?: () => void\n  onEnd?: () => void\n  onFullscreenChange?: (isFullscreen: boolean) => void\n  onPause?: () => void\n  onPlay?: () => void\n}\n\nexport default forwardRef<HTMLDivElement, VideoProps>(({\n  autoLoop = true,\n  autoPlay = true,\n  hasControls = false,\n  isCover = true,\n  isMuted = true,\n  playsInline = true,\n  posterSrc,\n  src,\n  onCanPlay,\n  onEnd,\n  onFullscreenChange,\n  onPause,\n  onPlay,\n  ...props\n}, ref) => {\n  const bodyRef = useRef<HTMLVideoElement>(null)\n  const isPaused = bodyRef.current?.paused ?? false\n\n  useEffect(() => {\n    debug(`Initializing video with src <${src}>...`, 'OK')\n\n    if (!bodyRef.current) return\n\n    bodyRef.current.muted = isMuted\n    bodyRef.current.load()\n    bodyRef.current.addEventListener('webkitfullscreenchange', fullscreenChangeHandler)\n    bodyRef.current.addEventListener('mozfullscreenchange', fullscreenChangeHandler)\n    bodyRef.current.addEventListener('fullscreenchange', fullscreenChangeHandler)\n\n    return () => {\n      debug(`Deinitializing video with src <${src}>...`, 'OK')\n\n      pause()\n\n      bodyRef.current?.removeEventListener('webkitfullscreenchange', fullscreenChangeHandler)\n      bodyRef.current?.removeEventListener('mozfullscreenchange', fullscreenChangeHandler)\n      bodyRef.current?.removeEventListener('fullscreenchange', fullscreenChangeHandler)\n    }\n  }, [src])\n\n  const fullscreenChangeHandler = (event: Event) => {\n    const isFullscreen: boolean | undefined = (document as any).fullScreen || (document as any).mozFullScreen || (document as any).webkitIsFullScreen\n    if (isFullscreen === undefined) return\n    onFullscreenChange?.(isFullscreen)\n  }\n\n  const canPlayHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Checking if video is ready to play...', 'OK')\n\n    if (autoPlay && isPaused) {\n      play()\n    }\n\n    onCanPlay?.()\n  }\n\n  const playHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Playing video...', 'OK')\n    onPlay?.()\n  }\n\n  const pauseHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Pausing video...', 'OK')\n    onPause?.()\n  }\n\n  const endHandler: ReactEventHandler<HTMLVideoElement> = event => {\n    debug('Ending video...', 'OK')\n    onEnd?.()\n  }\n\n  const play = () => {\n    if (!bodyRef.current) return\n    bodyRef.current.play()\n  }\n\n  const pause = () => {\n    if (!bodyRef.current) return\n    bodyRef.current.pause()\n  }\n\n  const fixedStyles = asStyleDict({\n    body: {\n      height: '100%',\n      width: '100%',\n      objectFit: isCover ? 'cover' : 'fill',\n    },\n  })\n\n  return (\n    <div {...props} ref={ref}>\n      <video\n        ref={bodyRef}\n        style={fixedStyles.body}\n        autoPlay={autoPlay}\n        controls={hasControls}\n        loop={autoLoop}\n        muted={isMuted}\n        playsInline={playsInline}\n        poster={posterSrc}\n        onCanPlay={canPlayHandler}\n        onEnded={endHandler}\n        onPause={pauseHandler}\n        onPlay={playHandler}\n      >\n        <source src={src}/>\n      </video>\n    </div>\n  )\n})\n"]}