etudes 5.0.0 → 5.2.0

package/components/RotatingGallery.d.ts

@@ -1,4 +1,4 @@
-import React, { type ComponentType, type HTMLAttributes, type PropsWithChildren } from 'react';
+import { type ComponentType, type HTMLAttributes, type PropsWithChildren } from 'react';
 export type RotatingGalleryImageProps = HTMLAttributes<HTMLElement> & {
     index: number;
     isVisible: boolean;
@@ -47,45 +47,45 @@ export type RotatingGalleryProps = HTMLAttributes<HTMLDivElement> & PropsWithChi
 /**
  * A component displaying rotating images.
  */
-export declare const RotatingGallery: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+export declare const RotatingGallery: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     /**
      * Current image index. An error is thrown if the index is invalid (must be
      * between 0 and length of `srcs` - 1, inclusive). This prop supports two-way
      * binding.
      */
-    index?: number | undefined;
+    index?: number;
     /**
      * Specifies if lazy loading of images should be enabled.
      */
-    lazy?: boolean | undefined;
+    lazy?: boolean;
     /**
      * The duration of one rotation in milliseconds (how long one image stays
      * before transitioning to the next). Specifying `NaN` or a negative number
      * will prevent the component from automatically rotating.
      */
-    rotationDuration?: number | undefined;
+    rotationDuration?: number;
     /**
      * An array of image paths.
      */
-    srcs?: string[] | undefined;
+    srcs?: string[];
     /**
      * The duration of an image transition in milliseconds.
      */
-    transitionDuration?: number | undefined;
+    transitionDuration?: number;
     /**
      * Specifies if the component should use default styles.
      */
-    usesDefaultStyles?: boolean | undefined;
+    usesDefaultStyles?: boolean;
     /**
      * Handler invoked when the image index changes.
      *
      * @param index The current image index.
      */
-    onIndexChange?: ((index: number) => void) | undefined;
+    onIndexChange?: (index: number) => void;
     /**
      * Component type for generating images in this collection.
      */
-    ImageComponent?: React.ComponentType<RotatingGalleryImageProps> | undefined;
+    ImageComponent?: ComponentType<RotatingGalleryImageProps>;
 } & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/components/RotatingGallery.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -49,8 +26,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RotatingGallery = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var clsx_1 = __importDefault(require("clsx"));
-var react_1 = __importStar(require("react"));
+var react_1 = require("react");
 var useInterval_1 = require("../hooks/useInterval");
 var Each_1 = require("../operators/Each");
 var utils_1 = require("../utils");
@@ -71,15 +49,14 @@ exports.RotatingGallery = (0, react_1.forwardRef)(function (_a, ref) {
     (0, react_1.useEffect)(function () {
         onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(index);
     }, [index]);
-    return (react_1.default.createElement("div", __assign({}, props, { className: (0, clsx_1.default)(className, fixedClassNames.root), ref: ref, "data-component": 'rotating-gallery' }),
-        react_1.default.createElement(Each_1.Each, { in: srcs }, function (src, idx) {
-            var isVisible = idx === index;
-            return ImageComponent ? (react_1.default.createElement(ImageComponent, { className: (0, clsx_1.default)(fixedClassNames.image), "data-child": 'item', style: (0, utils_1.styles)(fixedStyles.image, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.image, usesDefaultStyles ? {
-                    opacity: isVisible ? '1' : '0',
-                } : {}), isVisible: isVisible, index: idx, src: src })) : (react_1.default.createElement("img", { className: (0, clsx_1.default)(fixedClassNames.image), loading: lazy ? 'lazy' : 'eager', "data-child": 'item', style: (0, utils_1.styles)(fixedStyles.image, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.image, usesDefaultStyles ? {
-                    opacity: isVisible ? '1' : '0',
-                } : {}), src: src }));
-        })));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, fixedClassNames.root), "data-component": 'rotating-gallery', children: (0, jsx_runtime_1.jsx)(Each_1.Each, { in: srcs, children: function (src, idx) {
+                var isVisible = idx === index;
+                return ImageComponent ? ((0, jsx_runtime_1.jsx)(ImageComponent, { className: (0, clsx_1.default)(fixedClassNames.image), "data-child": 'item', index: idx, isVisible: isVisible, src: src, style: (0, utils_1.styles)(fixedStyles.image, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.image, usesDefaultStyles ? {
+                        opacity: isVisible ? '1' : '0',
+                    } : {}) })) : ((0, jsx_runtime_1.jsx)("img", { className: (0, clsx_1.default)(fixedClassNames.image), "data-child": 'item', loading: lazy ? 'lazy' : 'eager', src: src, style: (0, utils_1.styles)(fixedStyles.image, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.image, usesDefaultStyles ? {
+                        opacity: isVisible ? '1' : '0',
+                    } : {}) }));
+            } }) })));
 });
 Object.defineProperty(exports.RotatingGallery, 'displayName', { value: 'RotatingGallery', writable: false });
 function getFixedClassNames() {

package/components/RotatingGallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"RotatingGallery.js","sourceRoot":"/","sources":["components/RotatingGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport React, { forwardRef, useEffect, type ComponentType, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport { useInterval } from '../hooks/useInterval'\nimport { Each } from '../operators/Each'\nimport { asClassNameDict, asStyleDict, styles } from '../utils'\n\nexport type RotatingGalleryImageProps = HTMLAttributes<HTMLElement> & {\n  index: number\n  isVisible: boolean\n  src: string\n}\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   * Specifies if lazy loading of images should be enabled.\n   */\n  lazy?: boolean\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   * An array of image paths.\n   */\n  srcs?: string[]\n\n  /**\n   * The duration of an image transition in milliseconds.\n   */\n  transitionDuration?: number\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\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   * Component type for generating images in this collection.\n   */\n  ImageComponent?: ComponentType<RotatingGalleryImageProps>\n}>\n\n/**\n * A component displaying rotating images.\n */\nexport const RotatingGallery = forwardRef<HTMLDivElement, RotatingGalleryProps>(({\n  children,\n  className,\n  index = 0,\n  lazy = true,\n  rotationDuration = 5000,\n  srcs = [],\n  transitionDuration = 500,\n  usesDefaultStyles = true,\n  onIndexChange,\n  ImageComponent,\n  ...props\n}, ref) => {\n  const handleIndexChange = (newValue: number) => {\n    onIndexChange?.(newValue)\n  }\n\n  const fixedClassNames = getFixedClassNames()\n  const fixedStyles = getFixedStyles({ transitionDuration })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined\n\n  useInterval(() => {\n    handleIndexChange((index + 1) % srcs.length)\n  }, rotationDuration, undefined, [JSON.stringify(srcs), index])\n\n  useEffect(() => {\n    onIndexChange?.(index)\n  }, [index])\n\n  return (\n    <div {...props} className={clsx(className, fixedClassNames.root)} ref={ref} data-component='rotating-gallery'>\n      <Each in={srcs}>\n        {(src, idx) => {\n          const isVisible = idx === index\n\n          return ImageComponent ? (\n            <ImageComponent\n              className={clsx(fixedClassNames.image)}\n              data-child='item'\n              style={styles(\n                fixedStyles.image,\n                defaultStyles?.image,\n                usesDefaultStyles ? {\n                  opacity: isVisible ? '1' : '0',\n                } : {},\n              )}\n              isVisible={isVisible}\n              index={idx}\n              src={src}\n            />\n          ) : (\n            <img\n              className={clsx(fixedClassNames.image)}\n              loading={lazy ? 'lazy' : 'eager'}\n              data-child='item'\n              style={styles(\n                fixedStyles.image,\n                defaultStyles?.image,\n                usesDefaultStyles ? {\n                  opacity: isVisible ? '1' : '0',\n                } : {},\n              )}\n              src={src}\n            />\n          )\n        }}\n      </Each>\n    </div>\n  )\n})\n\nObject.defineProperty(RotatingGallery, 'displayName', { value: 'RotatingGallery', writable: false })\n\nfunction getFixedClassNames() {\n  return asClassNameDict({\n    root: clsx('rotating-gallery'),\n    image: clsx('image'),\n  })\n}\n\nfunction getFixedStyles({ transitionDuration = 0 }) {\n  return asStyleDict({\n    image: {\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      transitionDuration: `${transitionDuration}ms`,\n    },\n  })\n}\n\nfunction getDefaultStyles() {\n  return asStyleDict({\n    image: {\n      transitionProperty: 'opacity',\n      transitionTimingFunction: 'linear',\n    },\n  })\n}\n"]}
+{"version":3,"file":"RotatingGallery.js","sourceRoot":"/","sources":["components/RotatingGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport { forwardRef, useEffect, type ComponentType, type HTMLAttributes, type PropsWithChildren } from 'react'\nimport { useInterval } from '../hooks/useInterval'\nimport { Each } from '../operators/Each'\nimport { asClassNameDict, asStyleDict, styles } from '../utils'\n\nexport type RotatingGalleryImageProps = HTMLAttributes<HTMLElement> & {\n  index: number\n  isVisible: boolean\n  src: string\n}\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   * Specifies if lazy loading of images should be enabled.\n   */\n  lazy?: boolean\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   * An array of image paths.\n   */\n  srcs?: string[]\n\n  /**\n   * The duration of an image transition in milliseconds.\n   */\n  transitionDuration?: number\n\n  /**\n   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\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   * Component type for generating images in this collection.\n   */\n  ImageComponent?: ComponentType<RotatingGalleryImageProps>\n}>\n\n/**\n * A component displaying rotating images.\n */\nexport const RotatingGallery = forwardRef<HTMLDivElement, RotatingGalleryProps>(({\n  children,\n  className,\n  index = 0,\n  lazy = true,\n  rotationDuration = 5000,\n  srcs = [],\n  transitionDuration = 500,\n  usesDefaultStyles = true,\n  onIndexChange,\n  ImageComponent,\n  ...props\n}, ref) => {\n  const handleIndexChange = (newValue: number) => {\n    onIndexChange?.(newValue)\n  }\n\n  const fixedClassNames = getFixedClassNames()\n  const fixedStyles = getFixedStyles({ transitionDuration })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles() : undefined\n\n  useInterval(() => {\n    handleIndexChange((index + 1) % srcs.length)\n  }, rotationDuration, undefined, [JSON.stringify(srcs), index])\n\n  useEffect(() => {\n    onIndexChange?.(index)\n  }, [index])\n\n  return (\n    <div {...props} ref={ref} className={clsx(className, fixedClassNames.root)} data-component='rotating-gallery'>\n      <Each in={srcs}>\n        {(src, idx) => {\n          const isVisible = idx === index\n\n          return ImageComponent ? (\n            <ImageComponent\n              className={clsx(fixedClassNames.image)}\n              data-child='item'\n              index={idx}\n              isVisible={isVisible}\n              src={src}\n              style={styles(\n                fixedStyles.image,\n                defaultStyles?.image,\n                usesDefaultStyles ? {\n                  opacity: isVisible ? '1' : '0',\n                } : {},\n              )}\n            />\n          ) : (\n            <img\n              className={clsx(fixedClassNames.image)}\n              data-child='item'\n              loading={lazy ? 'lazy' : 'eager'}\n              src={src}\n              style={styles(\n                fixedStyles.image,\n                defaultStyles?.image,\n                usesDefaultStyles ? {\n                  opacity: isVisible ? '1' : '0',\n                } : {},\n              )}\n            />\n          )\n        }}\n      </Each>\n    </div>\n  )\n})\n\nObject.defineProperty(RotatingGallery, 'displayName', { value: 'RotatingGallery', writable: false })\n\nfunction getFixedClassNames() {\n  return asClassNameDict({\n    root: clsx('rotating-gallery'),\n    image: clsx('image'),\n  })\n}\n\nfunction getFixedStyles({ transitionDuration = 0 }) {\n  return asStyleDict({\n    image: {\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n      transitionDuration: `${transitionDuration}ms`,\n    },\n  })\n}\n\nfunction getDefaultStyles() {\n  return asStyleDict({\n    image: {\n      transitionProperty: 'opacity',\n      transitionTimingFunction: 'linear',\n    },\n  })\n}\n"]}

package/components/SelectableButton.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes, type ReactNode } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 export type SelectableButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
     children?: (props: Pick<SelectableButtonProps, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode;
     isDeselectable?: boolean;
@@ -8,12 +8,12 @@ export type SelectableButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'chi
     onDeselect?: () => void;
     onSelect?: () => void;
 };
-export declare const SelectableButton: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {
-    children?: ((props: Pick<SelectableButtonProps, 'isDeselectable' | 'isDisabled' | 'isSelected' | 'label'>) => ReactNode) | undefined;
-    isDeselectable?: boolean | undefined;
-    isDisabled?: boolean | undefined;
-    isSelected?: boolean | undefined;
-    label?: string | undefined;
-    onDeselect?: (() => void) | undefined;
-    onSelect?: (() => void) | undefined;
-} & React.RefAttributes<HTMLButtonElement>>;
+export declare const SelectableButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLButtonElement>, "children"> & {
+    children?: (props: Pick<SelectableButtonProps, "isDeselectable" | "isDisabled" | "isSelected" | "label">) => ReactNode;
+    isDeselectable?: boolean;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    label?: string;
+    onDeselect?: () => void;
+    onSelect?: () => void;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/components/SelectableButton.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -62,7 +39,8 @@ var __read = (this && this.__read) || function (o, n) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectableButton = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 exports.SelectableButton = (0, react_1.forwardRef)(function (_a, ref) {
     var _b;
     var children = _a.children, _c = _a.isDeselectable, isDeselectable = _c === void 0 ? false : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isSelected, externalIsSelected = _e === void 0 ? false : _e, label = _a.label, onDeselect = _a.onDeselect, onSelect = _a.onSelect, props = __rest(_a, ["children", "isDeselectable", "isDisabled", "isSelected", "label", "onDeselect", "onSelect"]);
@@ -84,7 +62,7 @@ exports.SelectableButton = (0, react_1.forwardRef)(function (_a, ref) {
     (0, react_1.useEffect)(function () {
         setIsSelected(externalIsSelected);
     }, [externalIsSelected]);
-    return (react_1.default.createElement("button", __assign({}, props, { ref: ref, "data-component": 'selectable-button', onClick: function () { return toggleSelection(); }, disabled: isDisabled || isSelected && !isDeselectable }), (_b = children === null || children === void 0 ? void 0 : children({ isDeselectable: isDeselectable, isDisabled: isDisabled, isSelected: isSelected, label: label })) !== null && _b !== void 0 ? _b : label));
+    return ((0, jsx_runtime_1.jsx)("button", __assign({}, props, { ref: ref, "data-component": 'selectable-button', disabled: isDisabled || isSelected && !isDeselectable, onClick: function () { return toggleSelection(); }, children: (_b = children === null || children === void 0 ? void 0 : children({ isDeselectable: isDeselectable, isDisabled: isDisabled, isSelected: isSelected, label: label })) !== null && _b !== void 0 ? _b : label })));
 });
 Object.defineProperty(exports.SelectableButton, 'displayName', { value: 'SelectableButton', writable: false });
 //# sourceMappingURL=SelectableButton.js.map

package/components/SelectableButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableButton.js","sourceRoot":"/","sources":["components/SelectableButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmG;AAYtF,QAAA,gBAAgB,GAAG,IAAA,kBAAU,EAA2C,UAAC,EASrF,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,cAR4E,6FASrF,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,CAAC;YACf,IAAI,CAAC,cAAc;gBAAE,OAAM;YAC3B,aAAa,CAAC,KAAK,CAAC,CAAA;YACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;QAChB,CAAC;aACI,CAAC;YACJ,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;QACd,CAAC;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,oBACO,mBAAmB,EAClC,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;AAEF,MAAM,CAAC,cAAc,CAAC,wBAAgB,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAE,KAAK,EAAE,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 const SelectableButton = 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      data-component='selectable-button'\n      onClick={() => toggleSelection()} disabled={isDisabled || isSelected && !isDeselectable}\n    >\n      {children?.({ isDeselectable, isDisabled, isSelected, label }) ?? label}\n    </button>\n  )\n})\n\nObject.defineProperty(SelectableButton, 'displayName', { value: 'SelectableButton', writable: false })\n"]}
+{"version":3,"file":"SelectableButton.js","sourceRoot":"/","sources":["components/SelectableButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA4F;AAY/E,QAAA,gBAAgB,GAAG,IAAA,kBAAU,EAA2C,UAAC,EASrF,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,cAR4E,6FASrF,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,CAAC;YACf,IAAI,CAAC,cAAc;gBAAE,OAAM;YAC3B,aAAa,CAAC,KAAK,CAAC,CAAA;YACpB,UAAU,aAAV,UAAU,uBAAV,UAAU,EAAI,CAAA;QAChB,CAAC;aACI,CAAC;YACJ,aAAa,CAAC,IAAI,CAAC,CAAA;YACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;QACd,CAAC;IACH,CAAC,CAAA;IAED,IAAA,iBAAS,EAAC;QACR,aAAa,CAAC,kBAAkB,CAAC,CAAA;IACnC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;IAExB,OAAO,CACL,8CACM,KAAK,IACT,GAAG,EAAE,GAAG,oBACO,mBAAmB,EAClC,QAAQ,EAAE,UAAU,IAAI,UAAU,IAAI,CAAC,cAAc,EACrD,OAAO,EAAE,cAAM,OAAA,eAAe,EAAE,EAAjB,CAAiB,YAE/B,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,cAAc,gBAAA,EAAE,UAAU,YAAA,EAAE,UAAU,YAAA,EAAE,KAAK,OAAA,EAAE,CAAC,mCAAI,KAAK,IAChE,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,cAAc,CAAC,wBAAgB,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA","sourcesContent":["import { 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 const SelectableButton = 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      data-component='selectable-button'\n      disabled={isDisabled || isSelected && !isDeselectable}\n      onClick={() => toggleSelection()}\n    >\n      {children?.({ isDeselectable, isDisabled, isSelected, label }) ?? label}\n    </button>\n  )\n})\n\nObject.defineProperty(SelectableButton, 'displayName', { value: 'SelectableButton', writable: false })\n"]}

package/components/Slider.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
 type Orientation = 'horizontal' | 'vertical';
 export type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
@@ -83,42 +83,42 @@ export type SliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
  * @exports SliderTrack The component for the slide track on either side of the
  *                      knob.
  */
-export declare const Slider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+export declare const Slider: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     /**
      * By default the position is a value from 0 - 1, 0 being the start of the
      * slider and 1 being the end. Switching on this flag inverts this behavior,
      * where 0 becomes the end of the slider and 1 being the start.
      */
-    isInverted?: boolean | undefined;
+    isInverted?: boolean;
     /**
      * Specifies if the track is clickable to set the position of the knob.
      */
-    isTrackInteractive?: boolean | undefined;
+    isTrackInteractive?: boolean;
     /**
      * Indicates if position change events are dispatched only when dragging ends.
      * When disabled, aforementioned events are fired repeatedly while dragging.
      */
-    onlyDispatchesOnDragEnd?: boolean | undefined;
+    onlyDispatchesOnDragEnd?: boolean;
     /**
      * Padding between the track and the knob in pixels.
      */
-    trackPadding?: number | undefined;
+    trackPadding?: number;
     /**
      * Height of the knob in pixels.
      */
-    knobHeight?: number | undefined;
+    knobHeight?: number;
     /**
      * Width of the knob in pixels.
      */
-    knobWidth?: number | undefined;
+    knobWidth?: number;
     /**
      * Orientation of the slider.
      */
-    orientation?: Orientation | undefined;
+    orientation?: Orientation;
     /**
      * The current position.
      */
-    position?: number | undefined;
+    position?: number;
     /**
      * A function that returns the label to be displayed at a given slider
      * position.
@@ -127,11 +127,11 @@ export declare const Slider: React.ForwardRefExoticComponent<React.HTMLAttribute
      *
      * @returns The label.
      */
-    labelProvider?: ((position: number) => string) | undefined;
+    labelProvider?: (position: number) => string;
     /**
      * Specifies if the component should use default styles.
      */
-    usesDefaultStyles?: boolean | undefined;
+    usesDefaultStyles?: boolean;
     /**
      * Handler invoked when position changes. This can either be invoked from the
      * `position` prop being changed or from the slider being dragged. Note that
@@ -142,19 +142,19 @@ export declare const Slider: React.ForwardRefExoticComponent<React.HTMLAttribute
      * @param position The current slider position.
      * @param isDragging Specifies if the position change is due to dragging.
      */
-    onPositionChange?: ((position: number, isDragging: boolean) => void) | undefined;
+    onPositionChange?: (position: number, isDragging: boolean) => void;
     /**
      * Handler invoked when dragging ends.
      */
-    onDragEnd?: (() => void) | undefined;
+    onDragEnd?: () => void;
     /**
      * Handler invoked when dragging begins.
      */
-    onDragStart?: (() => void) | undefined;
+    onDragStart?: () => void;
 } & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const SliderTrack: ({ ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-export declare const SliderKnob: ({ ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-export declare const SliderLabel: ({ ...props }: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderTrack: ({ ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const SliderKnob: ({ ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const SliderLabel: ({ ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/components/Slider.js

@@ -10,29 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -65,8 +42,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SliderLabel = exports.SliderKnob = exports.SliderTrack = exports.Slider = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var clsx_1 = __importDefault(require("clsx"));
-var react_1 = __importStar(require("react"));
+var react_1 = require("react");
 var spase_1 = require("spase");
 var useDragValueEffect_1 = require("../hooks/useDragValueEffect");
 var utils_1 = require("../utils");
@@ -154,52 +132,48 @@ exports.Slider = (0, react_1.forwardRef)(function (_a, ref) {
     var fixedClassNames = getFixedClassNames({ orientation: orientation, isAtEnd: isAtEnd, isAtStart: isAtStart, isDragging: isDragging, isReleasing: isReleasing });
     var fixedStyles = getFixedStyles({ orientation: orientation, isDragging: isDragging, naturalPosition: naturalPosition, knobHeight: knobHeight, knobWidth: knobWidth, isTrackInteractive: isTrackInteractive });
     var defaultStyles = usesDefaultStyles ? getDefaultStyles({ knobHeight: knobHeight }) : undefined;
-    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, fixedClassNames.root), "data-component": 'slider' }),
-        react_1.default.createElement("div", { ref: bodyRef, style: fixedStyles.body },
-            (0, utils_1.cloneStyledElement)((_b = components.track) !== null && _b !== void 0 ? _b : react_1.default.createElement(exports.SliderTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
-                className: (0, clsx_1.default)('start', fixedClassNames.track),
-                style: (0, utils_1.styles)(fixedStyles.track, orientation === 'vertical' ? {
-                    height: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
-                    top: '0',
-                } : {
-                    left: '0',
-                    width: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
-                }),
-                onClick: trackClickHandler,
-            }, react_1.default.createElement("div", { style: fixedStyles.trackHitbox })),
-            (0, utils_1.cloneStyledElement)((_c = components.track) !== null && _c !== void 0 ? _c : react_1.default.createElement(exports.SliderTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
-                className: (0, clsx_1.default)('end', fixedClassNames.track),
-                style: (0, utils_1.styles)(fixedStyles.track, orientation === 'vertical' ? {
-                    bottom: '0',
-                    height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
-                } : {
-                    right: '0',
-                    width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
-                }),
-                onClick: trackClickHandler,
-            }, react_1.default.createElement("div", { style: fixedStyles.trackHitbox })),
-            react_1.default.createElement("button", { ref: knobContainerRef, style: fixedStyles.knobContainer }, (0, utils_1.cloneStyledElement)((_d = components.knob) !== null && _d !== void 0 ? _d : react_1.default.createElement(exports.SliderKnob, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.knob }), {
-                className: (0, clsx_1.default)(fixedClassNames.knob),
-                style: (0, utils_1.styles)(fixedStyles.knob),
-            }, labelProvider && (0, utils_1.cloneStyledElement)((_e = components.label) !== null && _e !== void 0 ? _e : react_1.default.createElement(exports.SliderLabel, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.label }), {
-                className: (0, clsx_1.default)(fixedClassNames.label),
-                style: (0, utils_1.styles)(fixedStyles.label),
-            }, labelProvider(position)))))));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, fixedClassNames.root), "data-component": 'slider', children: (0, jsx_runtime_1.jsxs)("div", { ref: bodyRef, style: fixedStyles.body, children: [(0, utils_1.cloneStyledElement)((_b = components.track) !== null && _b !== void 0 ? _b : (0, jsx_runtime_1.jsx)(exports.SliderTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
+                    className: (0, clsx_1.default)('start', fixedClassNames.track),
+                    style: (0, utils_1.styles)(fixedStyles.track, orientation === 'vertical' ? {
+                        height: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
+                        top: '0',
+                    } : {
+                        left: '0',
+                        width: "calc(".concat(naturalPosition * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
+                    }),
+                    onClick: trackClickHandler,
+                }, (0, jsx_runtime_1.jsx)("div", { style: fixedStyles.trackHitbox })), (0, utils_1.cloneStyledElement)((_c = components.track) !== null && _c !== void 0 ? _c : (0, jsx_runtime_1.jsx)(exports.SliderTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
+                    className: (0, clsx_1.default)('end', fixedClassNames.track),
+                    style: (0, utils_1.styles)(fixedStyles.track, orientation === 'vertical' ? {
+                        bottom: '0',
+                        height: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobHeight * 0.5, "px - ").concat(trackPadding, "px)"),
+                    } : {
+                        right: '0',
+                        width: "calc(".concat((1 - naturalPosition) * 100, "% - ").concat(trackPadding <= 0 ? 0 : knobWidth * 0.5, "px - ").concat(trackPadding, "px)"),
+                    }),
+                    onClick: trackClickHandler,
+                }, (0, jsx_runtime_1.jsx)("div", { style: fixedStyles.trackHitbox })), (0, jsx_runtime_1.jsx)("button", { ref: knobContainerRef, style: fixedStyles.knobContainer, children: (0, utils_1.cloneStyledElement)((_d = components.knob) !== null && _d !== void 0 ? _d : (0, jsx_runtime_1.jsx)(exports.SliderKnob, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.knob }), {
+                        className: (0, clsx_1.default)(fixedClassNames.knob),
+                        style: (0, utils_1.styles)(fixedStyles.knob),
+                    }, labelProvider && (0, utils_1.cloneStyledElement)((_e = components.label) !== null && _e !== void 0 ? _e : (0, jsx_runtime_1.jsx)(exports.SliderLabel, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.label }), {
+                        className: (0, clsx_1.default)(fixedClassNames.label),
+                        style: (0, utils_1.styles)(fixedStyles.label),
+                    }, labelProvider(position))) })] }) })));
 });
 Object.defineProperty(exports.Slider, 'displayName', { value: 'Slider', writable: false });
 var SliderTrack = function (_a) {
     var props = __rest(_a, []);
-    return react_1.default.createElement("div", __assign({}, props, { "data-child": 'track' }));
+    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'track' }));
 };
 exports.SliderTrack = SliderTrack;
 var SliderKnob = function (_a) {
     var props = __rest(_a, []);
-    return react_1.default.createElement("div", __assign({}, props, { "data-child": 'knob' }));
+    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'knob' }));
 };
 exports.SliderKnob = SliderKnob;
 var SliderLabel = function (_a) {
     var props = __rest(_a, []);
-    return react_1.default.createElement("div", __assign({}, props, { "data-child": 'label' }));
+    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { "data-child": 'label' }));
 };
 exports.SliderLabel = SliderLabel;
 function getFixedClassNames(_a) {

package/components/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["components/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport React, { forwardRef, useEffect, useRef, type HTMLAttributes, type MouseEvent, type PropsWithChildren } from 'react'\nimport { Rect } from 'spase'\nimport { useDragValueEffect } from '../hooks/useDragValueEffect'\nimport { asClassNameDict, asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type 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   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\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 const Slider = 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  usesDefaultStyles = false,\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] } = useDragValueEffect(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 = getFixedClassNames({ orientation, isAtEnd, isAtStart, isDragging, isReleasing })\n  const fixedStyles = getFixedStyles({ orientation, isDragging, naturalPosition, knobHeight, knobWidth, isTrackInteractive })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles({ knobHeight }) : undefined\n\n  return (\n    <div {...props} ref={ref} className={clsx(className, fixedClassNames.root)} data-component='slider'>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {cloneStyledElement(components.track ?? <SliderTrack style={defaultStyles?.track}/>, {\n          className: clsx('start', fixedClassNames.track),\n          style: styles(fixedStyles.track, orientation === 'vertical' ? {\n            height: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,\n            top: '0',\n          } : {\n            left: '0',\n            width: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,\n          }),\n          onClick: trackClickHandler,\n        }, <div style={fixedStyles.trackHitbox}/>)}\n        {cloneStyledElement(components.track ?? <SliderTrack style={defaultStyles?.track}/>, {\n          className: clsx('end', fixedClassNames.track),\n          style: styles(fixedStyles.track, orientation === 'vertical' ? {\n            bottom: '0',\n            height: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,\n          } : {\n            right: '0',\n            width: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,\n          }),\n          onClick: trackClickHandler,\n        }, <div style={fixedStyles.trackHitbox}/>)}\n        <button ref={knobContainerRef} style={fixedStyles.knobContainer}>\n          {cloneStyledElement(components.knob ?? <SliderKnob style={defaultStyles?.knob}/>, {\n            className: clsx(fixedClassNames.knob),\n            style: styles(fixedStyles.knob),\n          }, labelProvider && cloneStyledElement(components.label ?? <SliderLabel style={defaultStyles?.label}/>, {\n            className: clsx(fixedClassNames.label),\n            style: styles(fixedStyles.label),\n          }, labelProvider(position)))}\n        </button>\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(Slider, 'displayName', { value: 'Slider', writable: false })\n\nexport const SliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='track'/>\n\nexport const SliderKnob = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='knob'/>\n\nexport const SliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='label'/>\n\nfunction getFixedClassNames({ orientation = 'vertical', isAtEnd = false, isAtStart = false, isDragging = false, isReleasing = false }) {\n  return asClassNameDict({\n    root: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    track: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    knob: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    label: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n  })\n}\n\nfunction getFixedStyles({ orientation = 'vertical', isDragging = false, naturalPosition = 0, knobHeight = 0, knobWidth = 0, isTrackInteractive = true }) {\n  return asStyleDict({\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    knobContainer: {\n      background: 'none',\n      border: 'none',\n      outline: 'none',\n      position: 'absolute',\n      transform: 'translate3d(-50%, -50%, 0)',\n      zIndex: '1',\n      ...orientation === 'vertical' ? {\n        left: '50%',\n        top: `${naturalPosition * 100}%`,\n        transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n      } : {\n        left: `${naturalPosition * 100}%`,\n        top: '50%',\n        transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n      },\n    },\n    knob: {\n      height: `${knobHeight}px`,\n      touchAction: 'none',\n      width: `${knobWidth}px`,\n    },\n    label: {\n      pointerEvents: 'none',\n      userSelect: 'none',\n    },\n    track: {\n      cursor: isTrackInteractive ? 'pointer' : 'auto',\n      pointerEvents: isTrackInteractive ? 'auto' : 'none',\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        left: '0',\n        margin: '0 auto',\n        right: '0',\n        width: '100%',\n      } : {\n        bottom: '0',\n        height: '100%',\n        margin: 'auto 0',\n        top: '0',\n      },\n    },\n    trackHitbox: {\n      height: '100%',\n      minHeight: '20px',\n      minWidth: '20px',\n      position: 'absolute',\n      transform: orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)',\n      width: '100%',\n    },\n  })\n}\n\nfunction getDefaultStyles({ knobHeight = 0 }) {\n  return asStyleDict({\n    knob: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      display: 'flex',\n      justifyContent: 'center',\n    },\n    label: {\n      color: '#000',\n      fontSize: '12px',\n      lineHeight: `${knobHeight}px`,\n    },\n    track: {\n      background: '#fff',\n    },\n  })\n}\n"]}
+{"version":3,"file":"Slider.js","sourceRoot":"/","sources":["components/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport { forwardRef, useEffect, useRef, type HTMLAttributes, type MouseEvent, type PropsWithChildren } from 'react'\nimport { Rect } from 'spase'\nimport { useDragValueEffect } from '../hooks/useDragValueEffect'\nimport { asClassNameDict, asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils'\n\ntype Orientation = 'horizontal' | 'vertical'\n\nexport type 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   * Specifies if the component should use default styles.\n   */\n  usesDefaultStyles?: boolean\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 const Slider = 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  usesDefaultStyles = false,\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] } = useDragValueEffect(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 = getFixedClassNames({ orientation, isAtEnd, isAtStart, isDragging, isReleasing })\n  const fixedStyles = getFixedStyles({ orientation, isDragging, naturalPosition, knobHeight, knobWidth, isTrackInteractive })\n  const defaultStyles = usesDefaultStyles ? getDefaultStyles({ knobHeight }) : undefined\n\n  return (\n    <div {...props} ref={ref} className={clsx(className, fixedClassNames.root)} data-component='slider'>\n      <div ref={bodyRef} style={fixedStyles.body}>\n        {cloneStyledElement(components.track ?? <SliderTrack style={defaultStyles?.track}/>, {\n          className: clsx('start', fixedClassNames.track),\n          style: styles(fixedStyles.track, orientation === 'vertical' ? {\n            height: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,\n            top: '0',\n          } : {\n            left: '0',\n            width: `calc(${naturalPosition * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,\n          }),\n          onClick: trackClickHandler,\n        }, <div style={fixedStyles.trackHitbox}/>)}\n        {cloneStyledElement(components.track ?? <SliderTrack style={defaultStyles?.track}/>, {\n          className: clsx('end', fixedClassNames.track),\n          style: styles(fixedStyles.track, orientation === 'vertical' ? {\n            bottom: '0',\n            height: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobHeight * 0.5}px - ${trackPadding}px)`,\n          } : {\n            right: '0',\n            width: `calc(${(1 - naturalPosition) * 100}% - ${trackPadding <= 0 ? 0 : knobWidth * 0.5}px - ${trackPadding}px)`,\n          }),\n          onClick: trackClickHandler,\n        }, <div style={fixedStyles.trackHitbox}/>)}\n        <button ref={knobContainerRef} style={fixedStyles.knobContainer}>\n          {cloneStyledElement(components.knob ?? <SliderKnob style={defaultStyles?.knob}/>, {\n            className: clsx(fixedClassNames.knob),\n            style: styles(fixedStyles.knob),\n          }, labelProvider && cloneStyledElement(components.label ?? <SliderLabel style={defaultStyles?.label}/>, {\n            className: clsx(fixedClassNames.label),\n            style: styles(fixedStyles.label),\n          }, labelProvider(position)))}\n        </button>\n      </div>\n    </div>\n  )\n})\n\nObject.defineProperty(Slider, 'displayName', { value: 'Slider', writable: false })\n\nexport const SliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='track'/>\n\nexport const SliderKnob = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='knob'/>\n\nexport const SliderLabel = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props} data-child='label'/>\n\nfunction getFixedClassNames({ orientation = 'vertical', isAtEnd = false, isAtStart = false, isDragging = false, isReleasing = false }) {\n  return asClassNameDict({\n    root: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    track: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    knob: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n    label: clsx(orientation, {\n      'at-end': isAtEnd,\n      'at-start': isAtStart,\n      'dragging': isDragging,\n      'releasing': isReleasing,\n    }),\n  })\n}\n\nfunction getFixedStyles({ orientation = 'vertical', isDragging = false, naturalPosition = 0, knobHeight = 0, knobWidth = 0, isTrackInteractive = true }) {\n  return asStyleDict({\n    body: {\n      height: '100%',\n      width: '100%',\n    },\n    knobContainer: {\n      background: 'none',\n      border: 'none',\n      outline: 'none',\n      position: 'absolute',\n      transform: 'translate3d(-50%, -50%, 0)',\n      zIndex: '1',\n      ...orientation === 'vertical' ? {\n        left: '50%',\n        top: `${naturalPosition * 100}%`,\n        transition: isDragging === false ? 'top 100ms ease-out' : 'none',\n      } : {\n        left: `${naturalPosition * 100}%`,\n        top: '50%',\n        transition: isDragging === false ? 'left 100ms ease-out' : 'none',\n      },\n    },\n    knob: {\n      height: `${knobHeight}px`,\n      touchAction: 'none',\n      width: `${knobWidth}px`,\n    },\n    label: {\n      pointerEvents: 'none',\n      userSelect: 'none',\n    },\n    track: {\n      cursor: isTrackInteractive ? 'pointer' : 'auto',\n      pointerEvents: isTrackInteractive ? 'auto' : 'none',\n      position: 'absolute',\n      ...orientation === 'vertical' ? {\n        left: '0',\n        margin: '0 auto',\n        right: '0',\n        width: '100%',\n      } : {\n        bottom: '0',\n        height: '100%',\n        margin: 'auto 0',\n        top: '0',\n      },\n    },\n    trackHitbox: {\n      height: '100%',\n      minHeight: '20px',\n      minWidth: '20px',\n      position: 'absolute',\n      transform: orientation === 'horizontal' ? 'translate3d(0, -50%, 0)' : 'translate3d(-50%, 0, 0)',\n      width: '100%',\n    },\n  })\n}\n\nfunction getDefaultStyles({ knobHeight = 0 }) {\n  return asStyleDict({\n    knob: {\n      alignItems: 'center',\n      background: '#fff',\n      boxSizing: 'border-box',\n      display: 'flex',\n      justifyContent: 'center',\n    },\n    label: {\n      color: '#000',\n      fontSize: '12px',\n      lineHeight: `${knobHeight}px`,\n    },\n    track: {\n      background: '#fff',\n    },\n  })\n}\n"]}