etudes 5.0.0 → 5.2.0

package/components/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sourceRoot":"/","sources":["components/Carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useEffect, useRef, useState, type ComponentType, type ForwardedRef, type HTMLAttributes, type MouseEvent, type PointerEvent, type ReactElement } from 'react'\nimport { Point, Rect } from 'spase'\nimport { useDragEffect } from '../hooks/useDragEffect'\nimport { useTimeout } from '../hooks/useTimeout'\nimport { Each } from '../operators/Each'\nimport { asStyleDict, styles } from '../utils'\n\nexport type CarouselOrientation = 'horizontal' | 'vertical'\n\nexport type CarouselProps<I> = HTMLAttributes<HTMLElement> & {\n  /**\n   * Current item index.\n   */\n  index?: number\n\n  /**\n   * The interval in milliseconds to wait before automatically advancing to the\n   * next item (auto loops).\n   */\n  autoAdvanceInterval?: number\n\n  /**\n   * Whether the carousel is draggable.\n   */\n  isDragEnabled?: boolean\n\n  /**\n   * Props for each item component\n   */\n  items?: Omit<I, 'exposure'>[]\n\n  /**\n   * Orientation of the carousel.\n   */\n  orientation?: CarouselOrientation\n\n  /**\n   * Whether to track item exposure (0-1, 0 meaning the item is fully scrolled\n   * out of view, 1 meaning the item is fully scrolled into view).\n   */\n  tracksItemExposure?: boolean\n\n  /**\n   * Handler invoked when auto advance pauses. This is invoked only when\n   * {@link autoAdvanceInterval} is greater than 0.\n   */\n  onAutoAdvancePause?: () => void\n\n  /**\n   * Handler invoked when auto advance resumes. This is invoked only when\n   * {@link autoAdvanceInterval} is greater than 0.\n   */\n  onAutoAdvanceResume?: () => void\n\n  /**\n   * Handler invoked when the item index changes.\n   *\n   * @param index The item index.\n   */\n  onIndexChange?: (index: number) => void\n\n  /**\n   * The component to render for each item.\n   */\n  ItemComponent: ComponentType<I>\n}\n\nexport const Carousel = forwardRef(({\n  style,\n  autoAdvanceInterval = 0,\n  index = 0,\n  isDragEnabled = true,\n  items = [],\n  orientation = 'horizontal',\n  tracksItemExposure = false,\n  onAutoAdvancePause,\n  onAutoAdvanceResume,\n  onIndexChange,\n  ItemComponent,\n  ...props\n}, ref) => {\n  const getItemExposures = () => {\n    const viewportElement = viewportRef.current\n    if (!viewportElement) return undefined\n\n    const exposures = []\n\n    for (let i = 0; i < viewportElement.children.length; i++) {\n      exposures.push(getItemExposureAt(i))\n    }\n\n    return exposures\n  }\n\n  const getItemExposureAt = (idx: number) => {\n    const viewportElement = viewportRef.current\n    const child = viewportElement?.children[idx]\n    if (!child) return 0\n\n    const intersection = Rect.intersecting(child, viewportElement)\n    if (!intersection) return 0\n\n    switch (orientation) {\n      case 'horizontal':\n        return Math.max(0, Math.min(1, Math.round((intersection.width / viewportElement.clientWidth + Number.EPSILON) * 1000) / 1000))\n      case 'vertical':\n        return Math.max(0, Math.min(1, Math.round((intersection.height / viewportElement.clientHeight + Number.EPSILON) * 1000) / 1000))\n      default:\n        throw new Error(`Unsupported orientation '${orientation}'`)\n    }\n  }\n\n  const handleIndexChange = (newValue: number) => {\n    onIndexChange?.(newValue)\n  }\n\n  const handlePointerDown = (event: PointerEvent) => {\n    pointerDownPositionRef.current = new Point([event.clientX, event.clientY])\n\n    setIsPointerDown(true)\n  }\n\n  const handlePointerUp = (event: PointerEvent) => {\n    pointerUpPositionRef.current = new Point([event.clientX, event.clientY])\n\n    setIsPointerDown(false)\n  }\n\n  const handleClick = (event: MouseEvent) => {\n    const downPosition = pointerDownPositionRef.current\n    const upPosition = pointerUpPositionRef.current\n\n    if (!downPosition || !upPosition) return\n\n    const threshold = 5\n    const delta = downPosition.subtract(upPosition)\n\n    if (Math.abs(delta.x) > threshold || Math.abs(delta.y) > threshold) {\n      event.stopPropagation()\n    }\n\n    pointerDownPositionRef.current = undefined\n    pointerUpPositionRef.current = undefined\n  }\n\n  const autoScrollToCurrentIndex = () => {\n    const viewportElement = viewportRef.current\n    if (!viewportElement) return\n\n    const top = orientation === 'horizontal' ? 0 : viewportElement.clientHeight * index\n    const left = orientation === 'horizontal' ? viewportElement.clientWidth * index : 0\n\n    viewportElement.scrollTo({ top, left, behavior: 'smooth' })\n\n    clearTimeout(autoScrollTimeoutRef.current)\n    autoScrollTimeoutRef.current = setTimeout(() => {\n      clearTimeout(autoScrollTimeoutRef.current)\n      autoScrollTimeoutRef.current = undefined\n    }, autoScrollTimeoutMs)\n  }\n\n  const prevIndexRef = useRef<number>()\n  const viewportRef = useRef<HTMLDivElement>(null)\n  const pointerDownPositionRef = useRef<Point | undefined>()\n  const pointerUpPositionRef = useRef<Point | undefined>()\n  const [exposures, setExposures] = useState<number[] | undefined>(getItemExposures())\n  const autoScrollTimeoutRef = useRef<NodeJS.Timeout>()\n  const autoScrollTimeoutMs = 1000\n  const [isPointerDown, setIsPointerDown] = useState(false)\n\n  useEffect(() => {\n    const viewportElement = viewportRef.current\n    if (!viewportElement) return\n\n    const scrollHandler = () => {\n      if (tracksItemExposure) {\n        setExposures(getItemExposures())\n      }\n\n      if (autoScrollTimeoutRef.current !== undefined) return\n\n      const newIndex = orientation === 'horizontal'\n        ? Math.round(viewportElement.scrollLeft / viewportElement.clientWidth)\n        : Math.round(viewportElement.scrollTop / viewportElement.clientHeight)\n\n      const clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex))\n\n      if (clampedIndex === index) return\n\n      // Set previous index ref here to avoid the side-effect of handling index\n      // changes from prop/state.\n      prevIndexRef.current = clampedIndex\n\n      handleIndexChange(clampedIndex)\n    }\n\n    viewportElement.addEventListener('scroll', scrollHandler)\n\n    return () => {\n      viewportElement.removeEventListener('scroll', scrollHandler)\n    }\n  }, [index, orientation])\n\n  useEffect(() => {\n    const isInitialRender = prevIndexRef.current === undefined\n    const isIndexModifiedFromManualScrolling = prevIndexRef.current === index\n\n    if (isIndexModifiedFromManualScrolling) return\n\n    prevIndexRef.current = index\n\n    if (isInitialRender) return\n\n    handleIndexChange(index)\n    autoScrollToCurrentIndex()\n  }, [index, orientation])\n\n  useEffect(() => {\n    if (autoAdvanceInterval <= 0) return\n\n    if (isPointerDown) {\n      onAutoAdvancePause?.()\n    }\n    else {\n      onAutoAdvanceResume?.()\n    }\n  }, [isPointerDown])\n\n  useDragEffect(viewportRef, {\n    isEnabled: isDragEnabled && items.length > 1,\n    onDragMove: (displacement: Point) => {\n      switch (orientation) {\n        case 'horizontal':\n          requestAnimationFrame(() => {\n            if (!viewportRef.current) return\n            viewportRef.current.scrollLeft += displacement.x * 1.5\n          })\n\n          break\n        case 'vertical':\n          requestAnimationFrame(() => {\n            if (!viewportRef.current) return\n            viewportRef.current.scrollTop += displacement.y * 1.5\n          })\n\n          break\n        default:\n          throw Error(`Unsupported orientation '${orientation}'`)\n      }\n    },\n  })\n\n  useTimeout(\n    () => handleIndexChange((index + items.length + 1) % items.length),\n    (isPointerDown || autoAdvanceInterval <= 0) ? -1 : autoAdvanceInterval,\n    [isPointerDown, index, items.length],\n  )\n\n  const fixedStyles = getFixedStyles({ isPointerDown, orientation })\n\n  return (\n    <div\n      {...props}\n      data-component='carousel'\n      ref={ref}\n      style={styles(style, fixedStyles.root)}\n      onPointerDown={event => handlePointerDown(event)}\n      onPointerUp={event => handlePointerUp(event)}\n      onPointerLeave={event => handlePointerUp(event)}\n      onClick={event => handleClick(event)}\n    >\n      <div\n        data-child='viewport'\n        ref={viewportRef}\n        style={styles(fixedStyles.viewport)}\n      >\n        <Each in={items}>\n          {({ style: itemStyle, ...itemProps }, idx) => (\n            <div style={styles(fixedStyles.itemContainer)}>\n              <ItemComponent\n                data-child='item'\n                style={styles(itemStyle, fixedStyles.item)}\n                exposure={tracksItemExposure ? exposures?.[idx] : undefined}\n                {...itemProps as any}\n              />\n            </div>\n          )}\n        </Each>\n      </div>\n    </div>\n  )\n}) as <I extends HTMLAttributes<HTMLElement>>(props: CarouselProps<I> & { ref?: ForwardedRef<HTMLDivElement> }) => ReactElement\n\nObject.defineProperty(Carousel, 'displayName', { value: 'Carousel', writable: false })\n\nfunction getFixedStyles({ isPointerDown = false, orientation = 'horizontal' }) {\n  return asStyleDict({\n    root: {\n    },\n    viewport: {\n      alignItems: 'center',\n      display: 'flex',\n      height: '100%',\n      userSelect: isPointerDown ? 'none' : 'auto',\n      justifyContent: 'flex-start',\n      scrollBehavior: isPointerDown ? 'auto' : 'smooth',\n      scrollSnapStop: isPointerDown ? 'unset' : 'always',\n      WebkitOverflowScrolling: 'touch',\n      width: '100%',\n      ...orientation === 'horizontal' ? {\n        flexDirection: 'row',\n        overflowX: 'scroll',\n        overflowY: 'hidden',\n        scrollSnapType: isPointerDown ? 'none' : 'x mandatory',\n      } : {\n        flexDirection: 'column',\n        overflowX: 'hidden',\n        overflowY: 'scroll',\n        scrollSnapType: isPointerDown ? 'none' : 'y mandatory',\n      },\n    },\n    itemContainer: {\n      height: '100%',\n      overflow: 'hidden',\n      scrollSnapAlign: 'start',\n      width: '100%',\n      scrollBehavior: 'smooth',\n    },\n    item: {\n      flex: '0 0 auto',\n      height: '100%',\n      width: '100%',\n    },\n  })\n}\n"]}
+{"version":3,"file":"Carousel.js","sourceRoot":"/","sources":["components/Carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useRef, useState, type ComponentType, type ForwardedRef, type HTMLAttributes, type MouseEvent, type PointerEvent, type ReactElement } from 'react'\nimport { Point, Rect } from 'spase'\nimport { useDragEffect } from '../hooks/useDragEffect'\nimport { useTimeout } from '../hooks/useTimeout'\nimport { Each } from '../operators/Each'\nimport { asStyleDict, styles } from '../utils'\n\nexport type CarouselOrientation = 'horizontal' | 'vertical'\n\nexport type CarouselProps<I> = HTMLAttributes<HTMLElement> & {\n  /**\n   * Current item index.\n   */\n  index?: number\n\n  /**\n   * The interval in milliseconds to wait before automatically advancing to the\n   * next item (auto loops).\n   */\n  autoAdvanceInterval?: number\n\n  /**\n   * Whether the carousel is draggable.\n   */\n  isDragEnabled?: boolean\n\n  /**\n   * Props for each item component\n   */\n  items?: Omit<I, 'exposure'>[]\n\n  /**\n   * Orientation of the carousel.\n   */\n  orientation?: CarouselOrientation\n\n  /**\n   * Whether to track item exposure (0-1, 0 meaning the item is fully scrolled\n   * out of view, 1 meaning the item is fully scrolled into view).\n   */\n  tracksItemExposure?: boolean\n\n  /**\n   * Handler invoked when auto advance pauses. This is invoked only when\n   * {@link autoAdvanceInterval} is greater than 0.\n   */\n  onAutoAdvancePause?: () => void\n\n  /**\n   * Handler invoked when auto advance resumes. This is invoked only when\n   * {@link autoAdvanceInterval} is greater than 0.\n   */\n  onAutoAdvanceResume?: () => void\n\n  /**\n   * Handler invoked when the item index changes.\n   *\n   * @param index The item index.\n   */\n  onIndexChange?: (index: number) => void\n\n  /**\n   * The component to render for each item.\n   */\n  ItemComponent: ComponentType<I>\n}\n\nexport const Carousel = forwardRef(({\n  style,\n  autoAdvanceInterval = 0,\n  index = 0,\n  isDragEnabled = true,\n  items = [],\n  orientation = 'horizontal',\n  tracksItemExposure = false,\n  onAutoAdvancePause,\n  onAutoAdvanceResume,\n  onIndexChange,\n  ItemComponent,\n  ...props\n}, ref) => {\n  const getItemExposures = () => {\n    const viewportElement = viewportRef.current\n    if (!viewportElement) return undefined\n\n    const exposures = []\n\n    for (let i = 0; i < viewportElement.children.length; i++) {\n      exposures.push(getItemExposureAt(i))\n    }\n\n    return exposures\n  }\n\n  const getItemExposureAt = (idx: number) => {\n    const viewportElement = viewportRef.current\n    const child = viewportElement?.children[idx]\n    if (!child) return 0\n\n    const intersection = Rect.intersecting(child, viewportElement)\n    if (!intersection) return 0\n\n    switch (orientation) {\n      case 'horizontal':\n        return Math.max(0, Math.min(1, Math.round((intersection.width / viewportElement.clientWidth + Number.EPSILON) * 1000) / 1000))\n      case 'vertical':\n        return Math.max(0, Math.min(1, Math.round((intersection.height / viewportElement.clientHeight + Number.EPSILON) * 1000) / 1000))\n      default:\n        throw new Error(`Unsupported orientation '${orientation}'`)\n    }\n  }\n\n  const handleIndexChange = (newValue: number) => {\n    onIndexChange?.(newValue)\n  }\n\n  const handlePointerDown = (event: PointerEvent) => {\n    pointerDownPositionRef.current = new Point([event.clientX, event.clientY])\n\n    setIsPointerDown(true)\n  }\n\n  const handlePointerUp = (event: PointerEvent) => {\n    pointerUpPositionRef.current = new Point([event.clientX, event.clientY])\n\n    setIsPointerDown(false)\n  }\n\n  const handleClick = (event: MouseEvent) => {\n    const downPosition = pointerDownPositionRef.current\n    const upPosition = pointerUpPositionRef.current\n\n    if (!downPosition || !upPosition) return\n\n    const threshold = 5\n    const delta = downPosition.subtract(upPosition)\n\n    if (Math.abs(delta.x) > threshold || Math.abs(delta.y) > threshold) {\n      event.stopPropagation()\n    }\n\n    pointerDownPositionRef.current = undefined\n    pointerUpPositionRef.current = undefined\n  }\n\n  const autoScrollToCurrentIndex = () => {\n    const viewportElement = viewportRef.current\n    if (!viewportElement) return\n\n    const top = orientation === 'horizontal' ? 0 : viewportElement.clientHeight * index\n    const left = orientation === 'horizontal' ? viewportElement.clientWidth * index : 0\n\n    viewportElement.scrollTo({ top, left, behavior: 'smooth' })\n\n    clearTimeout(autoScrollTimeoutRef.current)\n    autoScrollTimeoutRef.current = setTimeout(() => {\n      clearTimeout(autoScrollTimeoutRef.current)\n      autoScrollTimeoutRef.current = undefined\n    }, autoScrollTimeoutMs)\n  }\n\n  const prevIndexRef = useRef<number>()\n  const viewportRef = useRef<HTMLDivElement>(null)\n  const pointerDownPositionRef = useRef<Point | undefined>()\n  const pointerUpPositionRef = useRef<Point | undefined>()\n  const [exposures, setExposures] = useState<number[] | undefined>(getItemExposures())\n  const autoScrollTimeoutRef = useRef<NodeJS.Timeout>()\n  const autoScrollTimeoutMs = 1000\n  const [isPointerDown, setIsPointerDown] = useState(false)\n\n  useEffect(() => {\n    const viewportElement = viewportRef.current\n    if (!viewportElement) return\n\n    const scrollHandler = () => {\n      if (tracksItemExposure) {\n        setExposures(getItemExposures())\n      }\n\n      if (autoScrollTimeoutRef.current !== undefined) return\n\n      const newIndex = orientation === 'horizontal'\n        ? Math.round(viewportElement.scrollLeft / viewportElement.clientWidth)\n        : Math.round(viewportElement.scrollTop / viewportElement.clientHeight)\n\n      const clampedIndex = Math.max(0, Math.min(items.length - 1, newIndex))\n\n      if (clampedIndex === index) return\n\n      // Set previous index ref here to avoid the side-effect of handling index\n      // changes from prop/state.\n      prevIndexRef.current = clampedIndex\n\n      handleIndexChange(clampedIndex)\n    }\n\n    viewportElement.addEventListener('scroll', scrollHandler)\n\n    return () => {\n      viewportElement.removeEventListener('scroll', scrollHandler)\n    }\n  }, [index, orientation])\n\n  useEffect(() => {\n    const isInitialRender = prevIndexRef.current === undefined\n    const isIndexModifiedFromManualScrolling = prevIndexRef.current === index\n\n    if (isIndexModifiedFromManualScrolling) return\n\n    prevIndexRef.current = index\n\n    if (isInitialRender) return\n\n    handleIndexChange(index)\n    autoScrollToCurrentIndex()\n  }, [index, orientation])\n\n  useEffect(() => {\n    if (autoAdvanceInterval <= 0) return\n\n    if (isPointerDown) {\n      onAutoAdvancePause?.()\n    }\n    else {\n      onAutoAdvanceResume?.()\n    }\n  }, [isPointerDown])\n\n  useDragEffect(viewportRef, {\n    isEnabled: isDragEnabled && items.length > 1,\n    onDragMove: (displacement: Point) => {\n      switch (orientation) {\n        case 'horizontal':\n          requestAnimationFrame(() => {\n            if (!viewportRef.current) return\n            viewportRef.current.scrollLeft += displacement.x * 1.5\n          })\n\n          break\n        case 'vertical':\n          requestAnimationFrame(() => {\n            if (!viewportRef.current) return\n            viewportRef.current.scrollTop += displacement.y * 1.5\n          })\n\n          break\n        default:\n          throw Error(`Unsupported orientation '${orientation}'`)\n      }\n    },\n  })\n\n  useTimeout(\n    () => handleIndexChange((index + items.length + 1) % items.length),\n    (isPointerDown || autoAdvanceInterval <= 0) ? -1 : autoAdvanceInterval,\n    [isPointerDown, index, items.length],\n  )\n\n  const fixedStyles = getFixedStyles({ isPointerDown, orientation })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-component='carousel'\n      style={styles(style, fixedStyles.root)}\n      onClick={event => handleClick(event)}\n      onPointerDown={event => handlePointerDown(event)}\n      onPointerLeave={event => handlePointerUp(event)}\n      onPointerUp={event => handlePointerUp(event)}\n    >\n      <div\n        ref={viewportRef}\n        data-child='viewport'\n        style={styles(fixedStyles.viewport)}\n      >\n        <Each in={items}>\n          {({ style: itemStyle, ...itemProps }, idx) => (\n            <div style={styles(fixedStyles.itemContainer)}>\n              <ItemComponent\n                data-child='item'\n                exposure={tracksItemExposure ? exposures?.[idx] : undefined}\n                style={styles(itemStyle, fixedStyles.item)}\n                {...itemProps as any}\n              />\n            </div>\n          )}\n        </Each>\n      </div>\n    </div>\n  )\n}) as <I extends HTMLAttributes<HTMLElement>>(props: CarouselProps<I> & { ref?: ForwardedRef<HTMLDivElement> }) => ReactElement\n\nObject.defineProperty(Carousel, 'displayName', { value: 'Carousel', writable: false })\n\nfunction getFixedStyles({ isPointerDown = false, orientation = 'horizontal' }) {\n  return asStyleDict({\n    root: {\n    },\n    viewport: {\n      alignItems: 'center',\n      display: 'flex',\n      height: '100%',\n      userSelect: isPointerDown ? 'none' : 'auto',\n      justifyContent: 'flex-start',\n      scrollBehavior: isPointerDown ? 'auto' : 'smooth',\n      scrollSnapStop: isPointerDown ? 'unset' : 'always',\n      WebkitOverflowScrolling: 'touch',\n      width: '100%',\n      ...orientation === 'horizontal' ? {\n        flexDirection: 'row',\n        overflowX: 'scroll',\n        overflowY: 'hidden',\n        scrollSnapType: isPointerDown ? 'none' : 'x mandatory',\n      } : {\n        flexDirection: 'column',\n        overflowX: 'hidden',\n        overflowY: 'scroll',\n        scrollSnapType: isPointerDown ? 'none' : 'y mandatory',\n      },\n    },\n    itemContainer: {\n      height: '100%',\n      overflow: 'hidden',\n      scrollSnapAlign: 'start',\n      width: '100%',\n      scrollBehavior: 'smooth',\n    },\n    item: {\n      flex: '0 0 auto',\n      height: '100%',\n      width: '100%',\n    },\n  })\n}\n"]}

package/components/Collection.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)
@@ -74,9 +51,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Collection = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
 var clsx_1 = __importDefault(require("clsx"));
 var react_1 = __importDefault(require("fast-deep-equal/react"));
-var react_2 = __importStar(require("react"));
+var react_2 = require("react");
 var Each_1 = require("../operators/Each");
 var utils_1 = require("../utils");
 /**
@@ -164,11 +142,11 @@ exports.Collection = (0, react_2.forwardRef)(function (_a, ref) {
             return;
         handleSelectionChange(prevSelection, selection);
     }, [JSON.stringify(selection)]);
-    return (react_2.default.createElement("div", __assign({}, props, { "data-component": 'collection', ref: ref, className: (0, clsx_1.default)(className), style: (0, utils_1.styles)(style, fixedStyles.root) }), ItemComponent && (react_2.default.createElement(Each_1.Each, { in: items }, function (val, idx) { return (react_2.default.createElement(ItemComponent, { "data-child": 'item', className: (0, clsx_1.default)({ selected: isSelectedAt(idx) }), style: (0, utils_1.styles)(fixedStyles.item, __assign({ pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto' }, idx >= items.length - 1 ? {} : __assign({}, layout === 'list' ? __assign({}, orientation === 'vertical' ? {
-            marginBottom: "".concat(itemPadding, "px"),
-        } : {
-            marginRight: "".concat(itemPadding, "px"),
-        }) : {}))), "data-index": idx, index: idx, isSelected: isSelectedAt(idx), item: val, orientation: orientation, onCustomEvent: function (name, info) { return onItemCustomEvent === null || onItemCustomEvent === void 0 ? void 0 : onItemCustomEvent(idx, name, info); }, onClick: function () { return activateAt(idx); } })); }))));
+    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className), "data-component": 'collection', style: (0, utils_1.styles)(style, fixedStyles.root), children: ItemComponent && ((0, jsx_runtime_1.jsx)(Each_1.Each, { in: items, children: function (val, idx) { return ((0, jsx_runtime_1.jsx)(ItemComponent, { className: (0, clsx_1.default)({ selected: isSelectedAt(idx) }), "data-child": 'item', "data-index": idx, index: idx, isSelected: isSelectedAt(idx), item: val, orientation: orientation, style: (0, utils_1.styles)(fixedStyles.item, __assign({ pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto' }, idx >= items.length - 1 ? {} : __assign({}, layout === 'list' ? __assign({}, orientation === 'vertical' ? {
+                    marginBottom: "".concat(itemPadding, "px"),
+                } : {
+                    marginRight: "".concat(itemPadding, "px"),
+                }) : {}))), onClick: function () { return activateAt(idx); }, onCustomEvent: function (name, info) { return onItemCustomEvent === null || onItemCustomEvent === void 0 ? void 0 : onItemCustomEvent(idx, name, info); } })); } })) })));
 });
 Object.defineProperty(exports.Collection, 'displayName', { value: 'Collection', writable: false });
 function sortIndices(indices) {

package/components/Collection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collection.js","sourceRoot":"/","sources":["components/Collection.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport React, { forwardRef, useEffect, useRef, type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react'\nimport { Each } from '../operators/Each'\nimport { asStyleDict, styles } from '../utils'\n\n/**\n * Type describing the layout orientation of items in {@link Collection}.\n */\nexport type CollectionOrientation = 'horizontal' | 'vertical'\n\n/**\n * Type describing the layout appearance of {@link Collection}:\n *   - `list`: Items will be laid out in a list.\n *   - `grid`: Items will be laid out in a grid.\n */\nexport type CollectionLayout = 'list' | 'grid'\n\n/**\n *  Type describing the item selection behavior of {@link Collection}:\n *    - `none`: No selection permitted at all.\n *    - `single`: Only one item can be selected at a time (the previously\n *                selected item will be automatically deselected).\n *    - `multiple`: Multiple items can be selected simultaneously.\n */\nexport type CollectionSelectionMode = 'none' | 'single' | 'multiple'\n\n/**\n * Type describing the current item selection of {@link Collection}, composed of\n * an array of indices of items that are selected. If the selection mode of the\n * {@link Collection} is `single`, only one index is expected in this array.\n */\nexport type CollectionSelection = number[]\n\n/**\n * Type describing the props of `ItemComponent` provided to {@link Collection}.\n */\nexport type CollectionItemProps<T> = HTMLAttributes<HTMLElement> & {\n  /**\n   * The index of the item.\n   */\n  index: number\n\n  /**\n   * Indicates whether the item is selected.\n   */\n  isSelected: boolean\n\n  /**\n   * Data provided to the item.\n   */\n  item: T\n\n  /**\n   * Orientation of the parent collection.\n   */\n  orientation: CollectionOrientation\n\n  /**\n   * Handler invoked to dispatch a custom event.\n   *\n   * @param name User-defined name of the custom event.\n   * @param info Optional user-defined info of the custom event.\n   */\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\n/**\n * Type describing the props of {@link Collection}.\n */\nexport type CollectionProps<T> = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Indicates if item selection can be toggled, i.e. they can be deselected if\n   * selected again.\n   */\n  isSelectionTogglable?: boolean\n\n  /**\n   * Optional length (in pixels) of each item. Length refers to the height in\n   * vertical orientation and width in horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding between every item (in pixels).\n   */\n  itemPadding?: number\n\n  /**\n   * Generically typed data of each item.\n   */\n  items: T[]\n\n  /**\n   * Specifies the layout appearance of this component.\n   *\n   * @see {@link CollectionLayout}\n   */\n  layout?: CollectionLayout\n\n  /**\n   * Specifies the number of columns of this collection if the orientation is\n   * `vertical` or number of rows if the orientation is `horizontal`. This\n   * property is only used if the layout is set to `grid`.\n   */\n  numSegments?: number\n\n  /**\n   * Orientation of the component.\n   *\n   * @see {@link CollectionOrientation}\n   */\n  orientation?: CollectionOrientation\n\n  /**\n   * The selected indices. If `selectionMode` is `single`, only only the first\n   * value will be used.\n   *\n   * @see {@link CollectionSelection}\n   */\n  selection?: CollectionSelection\n\n  /**\n   * The item selection behavior.\n   *\n   * @see {@link CollectionSelectionMode}\n   */\n  selectionMode?: CollectionSelectionMode\n\n  /**\n   * Handler invoked when an item is activated (i.e. clicked). The order of\n   * handlers invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param index Item index.\n   */\n  onActivateAt?: (index: number) => void\n\n  /**\n   * Handler invoked when an item is deselected. The order of handlers invoked\n   * when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param index Item index.\n   */\n  onDeselectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when a custom event is dispatched from the item.\n   *\n   * @param index Index of the item.\n   * @param eventName User-defined name of the dispatched custom event.\n   * @param eventInfo Optional user-defined info of the dispatched custom event.\n   */\n  onItemCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when an item is selected. The order of handlers invoked\n   * when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param index Item index.\n   */\n  onSelectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected items changed. The order of handlers\n   * invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param selection Indices of selected items.\n   */\n  onSelectionChange?: (selection: CollectionSelection) => void\n\n  /**\n   * Component type for generating items in this collection.\n   */\n  ItemComponent?: ComponentType<CollectionItemProps<T>>\n}\n\n/**\n * A collection of selectable items with generic data. Items are generated based\n * on the provided `ItemComponent`. This component supports different layouts in\n * both horizontal and vertical orientations.\n */\nexport const Collection = forwardRef(({\n  className,\n  style,\n  isSelectionTogglable = false,\n  itemLength,\n  itemPadding = 0,\n  items,\n  layout = 'list',\n  numSegments = 1,\n  orientation = 'vertical',\n  selection: externalSelection,\n  selectionMode = 'none',\n  onActivateAt,\n  onDeselectAt,\n  onItemCustomEvent,\n  onSelectAt,\n  onSelectionChange,\n  ItemComponent,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (isNaN(index)) return true\n    if (index >= items.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const sanitizeSelection = (indices: CollectionSelection) => sortIndices(indices).filter(t => !isIndexOutOfRange(t))\n\n  const isSelectedAt = (index: number) => selection.indexOf(index) >= 0\n\n  const toggleAt = (index: number) => {\n    if (isSelectedAt(index)) {\n      deselectAt(index)\n    }\n    else {\n      selectAt(index)\n    }\n  }\n\n  const selectAt = (index: number) => {\n    if (isSelectedAt(index)) return\n\n    let transform: (val: CollectionSelection) => CollectionSelection\n\n    switch (selectionMode) {\n      case 'multiple': {\n        transform = val => sortIndices([...val.filter(t => t !== index), index])\n        break\n      }\n      case 'single': {\n        transform = val => [index]\n        break\n      }\n      default:\n        return\n    }\n\n    const newValue = transform(selection)\n\n    prevSelectionRef.current = newValue\n    handleSelectionChange(selection, newValue)\n  }\n\n  const deselectAt = (index: number) => {\n    if (!isSelectedAt(index)) return\n\n    const transform = (val: CollectionSelection) => val.filter(t => t !== index)\n    const newValue = transform(selection)\n\n    prevSelectionRef.current = newValue\n    handleSelectionChange(selection, newValue)\n  }\n\n  const activateAt = (index: number) => {\n    onActivateAt?.(index)\n\n    if (selectionMode === 'none') return\n\n    if (isSelectionTogglable) {\n      toggleAt(index)\n    }\n    else {\n      selectAt(index)\n    }\n  }\n\n  const handleSelectionChange = (oldValue: CollectionSelection | undefined, newValue: CollectionSelection) => {\n    if (isDeepEqual(oldValue, newValue)) return\n\n    const deselected = oldValue?.filter(t => newValue.indexOf(t) === -1) ?? []\n    const selected = newValue.filter(t => oldValue?.indexOf(t) === -1)\n\n    deselected.forEach(t => onDeselectAt?.(t))\n    selected.forEach(t => onSelectAt?.(t))\n\n    onSelectionChange?.(newValue)\n  }\n\n  const selection = sanitizeSelection(externalSelection ?? [])\n  const fixedStyles = getFixedStyles({ itemLength, itemPadding, layout, numSegments, orientation })\n  const prevSelectionRef = useRef<CollectionSelection>()\n  const prevSelection = prevSelectionRef.current\n\n  useEffect(() => {\n    prevSelectionRef.current = selection\n\n    if (prevSelection === undefined) return\n\n    handleSelectionChange(prevSelection, selection)\n  }, [JSON.stringify(selection)])\n\n  return (\n    <div\n      {...props}\n      data-component='collection'\n      ref={ref}\n      className={clsx(className)}\n      style={styles(style, fixedStyles.root)}\n    >\n      {ItemComponent && (\n        <Each in={items}>\n          {(val, idx) => (\n            <ItemComponent\n              data-child='item'\n              className={clsx({ selected: isSelectedAt(idx) })}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n                ...idx >= items.length - 1 ? {} : {\n                  ...layout === 'list' ? {\n                    ...orientation === 'vertical' ? {\n                      marginBottom: `${itemPadding}px`,\n                    } : {\n                      marginRight: `${itemPadding}px`,\n                    },\n                  } : {},\n                },\n              })}\n              data-index={idx}\n              index={idx}\n              isSelected={isSelectedAt(idx)}\n              item={val}\n              orientation={orientation}\n              onCustomEvent={(name, info) => onItemCustomEvent?.(idx, name, info)}\n              onClick={() => activateAt(idx)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: CollectionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nObject.defineProperty(Collection, 'displayName', { value: 'Collection', writable: false })\n\nfunction sortIndices(indices: number[]): number[] {\n  return indices.sort((a, b) => a - b)\n}\n\nfunction getFixedStyles({ itemLength = NaN, itemPadding = 0, layout = 'collection', numSegments = 1, orientation = 'vertical' }) {\n  return asStyleDict({\n    root: {\n      counterReset: 'item-counter',\n      listStyle: 'none',\n      ...layout === 'list' ? {\n        alignItems: 'flex-start',\n        display: 'flex',\n        flex: '0 0 auto',\n        flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n        justifyContent: 'flex-start',\n      } : {\n        display: 'grid',\n        gap: `${itemPadding}px`,\n        ...orientation === 'vertical' ? {\n          gridAutoRows: isNaN(itemLength) ? undefined : `${itemLength}px`,\n          gridTemplateColumns: `repeat(${numSegments}, 1fr)`,\n          gridAutoFlow: 'row',\n        } : {\n          gridAutoColumns: isNaN(itemLength) ? undefined : `${itemLength}px`,\n          gridTemplateRows: `repeat(${numSegments}, 1fr)`,\n          gridAutoFlow: 'column',\n        },\n      },\n    },\n    item: {\n      counterIncrement: 'item-counter',\n      flex: '0 0 auto',\n      ...layout === 'list' ? {\n        ...orientation === 'vertical' ? {\n          width: '100%',\n          height: isNaN(itemLength) ? undefined : `${itemLength}px`,\n        } : {\n          width: isNaN(itemLength) ? undefined : `${itemLength}px`,\n          height: '100%',\n        },\n      } : {},\n    },\n  })\n}\n"]}
+{"version":3,"file":"Collection.js","sourceRoot":"/","sources":["components/Collection.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport isDeepEqual from 'fast-deep-equal/react'\nimport { forwardRef, useEffect, useRef, type ComponentType, type HTMLAttributes, type ReactElement, type Ref } from 'react'\nimport { Each } from '../operators/Each'\nimport { asStyleDict, styles } from '../utils'\n\n/**\n * Type describing the layout orientation of items in {@link Collection}.\n */\nexport type CollectionOrientation = 'horizontal' | 'vertical'\n\n/**\n * Type describing the layout appearance of {@link Collection}:\n *   - `list`: Items will be laid out in a list.\n *   - `grid`: Items will be laid out in a grid.\n */\nexport type CollectionLayout = 'list' | 'grid'\n\n/**\n *  Type describing the item selection behavior of {@link Collection}:\n *    - `none`: No selection permitted at all.\n *    - `single`: Only one item can be selected at a time (the previously\n *                selected item will be automatically deselected).\n *    - `multiple`: Multiple items can be selected simultaneously.\n */\nexport type CollectionSelectionMode = 'none' | 'single' | 'multiple'\n\n/**\n * Type describing the current item selection of {@link Collection}, composed of\n * an array of indices of items that are selected. If the selection mode of the\n * {@link Collection} is `single`, only one index is expected in this array.\n */\nexport type CollectionSelection = number[]\n\n/**\n * Type describing the props of `ItemComponent` provided to {@link Collection}.\n */\nexport type CollectionItemProps<T> = HTMLAttributes<HTMLElement> & {\n  /**\n   * The index of the item.\n   */\n  index: number\n\n  /**\n   * Indicates whether the item is selected.\n   */\n  isSelected: boolean\n\n  /**\n   * Data provided to the item.\n   */\n  item: T\n\n  /**\n   * Orientation of the parent collection.\n   */\n  orientation: CollectionOrientation\n\n  /**\n   * Handler invoked to dispatch a custom event.\n   *\n   * @param name User-defined name of the custom event.\n   * @param info Optional user-defined info of the custom event.\n   */\n  onCustomEvent?: (name: string, info?: any) => void\n}\n\n/**\n * Type describing the props of {@link Collection}.\n */\nexport type CollectionProps<T> = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Indicates if item selection can be toggled, i.e. they can be deselected if\n   * selected again.\n   */\n  isSelectionTogglable?: boolean\n\n  /**\n   * Optional length (in pixels) of each item. Length refers to the height in\n   * vertical orientation and width in horizontal orientation.\n   */\n  itemLength?: number\n\n  /**\n   * Padding between every item (in pixels).\n   */\n  itemPadding?: number\n\n  /**\n   * Generically typed data of each item.\n   */\n  items: T[]\n\n  /**\n   * Specifies the layout appearance of this component.\n   *\n   * @see {@link CollectionLayout}\n   */\n  layout?: CollectionLayout\n\n  /**\n   * Specifies the number of columns of this collection if the orientation is\n   * `vertical` or number of rows if the orientation is `horizontal`. This\n   * property is only used if the layout is set to `grid`.\n   */\n  numSegments?: number\n\n  /**\n   * Orientation of the component.\n   *\n   * @see {@link CollectionOrientation}\n   */\n  orientation?: CollectionOrientation\n\n  /**\n   * The selected indices. If `selectionMode` is `single`, only only the first\n   * value will be used.\n   *\n   * @see {@link CollectionSelection}\n   */\n  selection?: CollectionSelection\n\n  /**\n   * The item selection behavior.\n   *\n   * @see {@link CollectionSelectionMode}\n   */\n  selectionMode?: CollectionSelectionMode\n\n  /**\n   * Handler invoked when an item is activated (i.e. clicked). The order of\n   * handlers invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param index Item index.\n   */\n  onActivateAt?: (index: number) => void\n\n  /**\n   * Handler invoked when an item is deselected. The order of handlers invoked\n   * when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param index Item index.\n   */\n  onDeselectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when a custom event is dispatched from the item.\n   *\n   * @param index Index of the item.\n   * @param eventName User-defined name of the dispatched custom event.\n   * @param eventInfo Optional user-defined info of the dispatched custom event.\n   */\n  onItemCustomEvent?: (index: number, eventName: string, eventInfo?: any) => void\n\n  /**\n   * Handler invoked when an item is selected. The order of handlers invoked\n   * when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param index Item index.\n   */\n  onSelectAt?: (index: number) => void\n\n  /**\n   * Handler invoked when the selected items changed. The order of handlers\n   * invoked when any selection changes take place is:\n   *   1. `onActivateAt`\n   *   2. `onDeselectAt`\n   *   3. `onSelectAt`\n   *   4. `onSelectionChange`\n   *\n   * @param selection Indices of selected items.\n   */\n  onSelectionChange?: (selection: CollectionSelection) => void\n\n  /**\n   * Component type for generating items in this collection.\n   */\n  ItemComponent?: ComponentType<CollectionItemProps<T>>\n}\n\n/**\n * A collection of selectable items with generic data. Items are generated based\n * on the provided `ItemComponent`. This component supports different layouts in\n * both horizontal and vertical orientations.\n */\nexport const Collection = forwardRef(({\n  className,\n  style,\n  isSelectionTogglable = false,\n  itemLength,\n  itemPadding = 0,\n  items,\n  layout = 'list',\n  numSegments = 1,\n  orientation = 'vertical',\n  selection: externalSelection,\n  selectionMode = 'none',\n  onActivateAt,\n  onDeselectAt,\n  onItemCustomEvent,\n  onSelectAt,\n  onSelectionChange,\n  ItemComponent,\n  ...props\n}, ref) => {\n  const isIndexOutOfRange = (index: number) => {\n    if (isNaN(index)) return true\n    if (index >= items.length) return true\n    if (index < 0) return true\n\n    return false\n  }\n\n  const sanitizeSelection = (indices: CollectionSelection) => sortIndices(indices).filter(t => !isIndexOutOfRange(t))\n\n  const isSelectedAt = (index: number) => selection.indexOf(index) >= 0\n\n  const toggleAt = (index: number) => {\n    if (isSelectedAt(index)) {\n      deselectAt(index)\n    }\n    else {\n      selectAt(index)\n    }\n  }\n\n  const selectAt = (index: number) => {\n    if (isSelectedAt(index)) return\n\n    let transform: (val: CollectionSelection) => CollectionSelection\n\n    switch (selectionMode) {\n      case 'multiple': {\n        transform = val => sortIndices([...val.filter(t => t !== index), index])\n        break\n      }\n      case 'single': {\n        transform = val => [index]\n        break\n      }\n      default:\n        return\n    }\n\n    const newValue = transform(selection)\n\n    prevSelectionRef.current = newValue\n    handleSelectionChange(selection, newValue)\n  }\n\n  const deselectAt = (index: number) => {\n    if (!isSelectedAt(index)) return\n\n    const transform = (val: CollectionSelection) => val.filter(t => t !== index)\n    const newValue = transform(selection)\n\n    prevSelectionRef.current = newValue\n    handleSelectionChange(selection, newValue)\n  }\n\n  const activateAt = (index: number) => {\n    onActivateAt?.(index)\n\n    if (selectionMode === 'none') return\n\n    if (isSelectionTogglable) {\n      toggleAt(index)\n    }\n    else {\n      selectAt(index)\n    }\n  }\n\n  const handleSelectionChange = (oldValue: CollectionSelection | undefined, newValue: CollectionSelection) => {\n    if (isDeepEqual(oldValue, newValue)) return\n\n    const deselected = oldValue?.filter(t => newValue.indexOf(t) === -1) ?? []\n    const selected = newValue.filter(t => oldValue?.indexOf(t) === -1)\n\n    deselected.forEach(t => onDeselectAt?.(t))\n    selected.forEach(t => onSelectAt?.(t))\n\n    onSelectionChange?.(newValue)\n  }\n\n  const selection = sanitizeSelection(externalSelection ?? [])\n  const fixedStyles = getFixedStyles({ itemLength, itemPadding, layout, numSegments, orientation })\n  const prevSelectionRef = useRef<CollectionSelection>()\n  const prevSelection = prevSelectionRef.current\n\n  useEffect(() => {\n    prevSelectionRef.current = selection\n\n    if (prevSelection === undefined) return\n\n    handleSelectionChange(prevSelection, selection)\n  }, [JSON.stringify(selection)])\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={clsx(className)}\n      data-component='collection'\n      style={styles(style, fixedStyles.root)}\n    >\n      {ItemComponent && (\n        <Each in={items}>\n          {(val, idx) => (\n            <ItemComponent\n              className={clsx({ selected: isSelectedAt(idx) })}\n              data-child='item'\n              data-index={idx}\n              index={idx}\n              isSelected={isSelectedAt(idx)}\n              item={val}\n              orientation={orientation}\n              style={styles(fixedStyles.item, {\n                pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',\n                ...idx >= items.length - 1 ? {} : {\n                  ...layout === 'list' ? {\n                    ...orientation === 'vertical' ? {\n                      marginBottom: `${itemPadding}px`,\n                    } : {\n                      marginRight: `${itemPadding}px`,\n                    },\n                  } : {},\n                },\n              })}\n              onClick={() => activateAt(idx)}\n              onCustomEvent={(name, info) => onItemCustomEvent?.(idx, name, info)}\n            />\n          )}\n        </Each>\n      )}\n    </div>\n  )\n}) as <T>(props: CollectionProps<T> & { ref?: Ref<HTMLDivElement> }) => ReactElement\n\nObject.defineProperty(Collection, 'displayName', { value: 'Collection', writable: false })\n\nfunction sortIndices(indices: number[]): number[] {\n  return indices.sort((a, b) => a - b)\n}\n\nfunction getFixedStyles({ itemLength = NaN, itemPadding = 0, layout = 'collection', numSegments = 1, orientation = 'vertical' }) {\n  return asStyleDict({\n    root: {\n      counterReset: 'item-counter',\n      listStyle: 'none',\n      ...layout === 'list' ? {\n        alignItems: 'flex-start',\n        display: 'flex',\n        flex: '0 0 auto',\n        flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n        justifyContent: 'flex-start',\n      } : {\n        display: 'grid',\n        gap: `${itemPadding}px`,\n        ...orientation === 'vertical' ? {\n          gridAutoRows: isNaN(itemLength) ? undefined : `${itemLength}px`,\n          gridTemplateColumns: `repeat(${numSegments}, 1fr)`,\n          gridAutoFlow: 'row',\n        } : {\n          gridAutoColumns: isNaN(itemLength) ? undefined : `${itemLength}px`,\n          gridTemplateRows: `repeat(${numSegments}, 1fr)`,\n          gridAutoFlow: 'column',\n        },\n      },\n    },\n    item: {\n      counterIncrement: 'item-counter',\n      flex: '0 0 auto',\n      ...layout === 'list' ? {\n        ...orientation === 'vertical' ? {\n          width: '100%',\n          height: isNaN(itemLength) ? undefined : `${itemLength}px`,\n        } : {\n          width: isNaN(itemLength) ? undefined : `${itemLength}px`,\n          height: '100%',\n        },\n      } : {},\n    },\n  })\n}\n"]}

package/components/Counter.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
-export declare const Counter: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "onChange"> & {
-    min?: number | undefined;
-    max?: number | undefined;
-    quantity?: number | undefined;
-    allowsInput?: boolean | undefined;
-    usesDefaultStyles?: boolean | undefined;
-    onChange?: ((quantity: number) => void) | undefined;
-    AddButtonComponent?: React.ComponentType<React.HTMLAttributes<HTMLElement>> | undefined;
-    SubtractButtonComponent?: React.ComponentType<React.HTMLAttributes<HTMLElement>> | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
+import { type ComponentType, type HTMLAttributes } from 'react';
+export declare const Counter: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "onChange"> & {
+    min?: number;
+    max?: number;
+    quantity?: number;
+    allowsInput?: boolean;
+    usesDefaultStyles?: boolean;
+    onChange?: (quantity: number) => void;
+    AddButtonComponent?: ComponentType<HTMLAttributes<HTMLElement>>;
+    SubtractButtonComponent?: ComponentType<HTMLAttributes<HTMLElement>>;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/components/Counter.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.Counter = 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 usePrevious_1 = require("../hooks/usePrevious");
 var asStyleDict_1 = require("../utils/asStyleDict");
 var styles_1 = require("../utils/styles");
@@ -85,10 +63,7 @@ exports.Counter = (0, react_1.forwardRef)(function (_a, ref) {
             return;
         handleQuantityChange(isNaN(max) ? quantity : Math.min(max, quantity));
     }, [max]);
-    return (react_1.default.createElement("div", __assign({}, props, { "data-component": 'counter', ref: ref, style: (0, styles_1.styles)(style, FIXED_STYLES.root, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.root) }),
-        SubtractButtonComponent && (react_1.default.createElement(SubtractButtonComponent, { "data-child": 'subtract-button', className: (0, clsx_1.default)({ disabled: isSubtractingDisabled }), style: (0, styles_1.styles)(FIXED_STYLES.subtract), onClick: function () { return handleSubtract(); } })) || (react_1.default.createElement("button", { "data-child": 'subtract-button', className: (0, clsx_1.default)({ disabled: isSubtractingDisabled }), style: (0, styles_1.styles)(FIXED_STYLES.subtract, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.subtract), onClick: function () { return handleSubtract(); } })),
-        react_1.default.createElement(TextField_1.TextField, { "data-child": 'text-field', value: quantity.toString(), isDisabled: !allowsInput, formatter: function (oldValue, newValue) { return isNaN(Number("0".concat(newValue))) ? oldValue : newValue; }, style: (0, styles_1.styles)(FIXED_STYLES.text, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.text) }),
-        AddButtonComponent && (react_1.default.createElement(AddButtonComponent, { "data-child": 'add-button', className: (0, clsx_1.default)({ disabled: isAddingDisabled }), style: (0, styles_1.styles)(FIXED_STYLES.add), onClick: function () { return handleAdd(); } })) || (react_1.default.createElement("button", { "data-child": 'add-button', className: (0, clsx_1.default)({ disabled: isAddingDisabled }), style: (0, styles_1.styles)(FIXED_STYLES.add, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.add), onClick: function () { return handleAdd(); } }))));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({}, props, { ref: ref, "data-component": 'counter', style: (0, styles_1.styles)(style, FIXED_STYLES.root, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.root), children: [SubtractButtonComponent && ((0, jsx_runtime_1.jsx)(SubtractButtonComponent, { className: (0, clsx_1.default)({ disabled: isSubtractingDisabled }), "data-child": 'subtract-button', style: (0, styles_1.styles)(FIXED_STYLES.subtract), onClick: function () { return handleSubtract(); } })) || ((0, jsx_runtime_1.jsx)("button", { className: (0, clsx_1.default)({ disabled: isSubtractingDisabled }), "data-child": 'subtract-button', style: (0, styles_1.styles)(FIXED_STYLES.subtract, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.subtract), onClick: function () { return handleSubtract(); } })), (0, jsx_runtime_1.jsx)(TextField_1.TextField, { "data-child": 'text-field', formatter: function (oldValue, newValue) { return isNaN(Number("0".concat(newValue))) ? oldValue : newValue; }, isDisabled: !allowsInput, style: (0, styles_1.styles)(FIXED_STYLES.text, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.text), value: quantity.toString() }), AddButtonComponent && ((0, jsx_runtime_1.jsx)(AddButtonComponent, { className: (0, clsx_1.default)({ disabled: isAddingDisabled }), "data-child": 'add-button', style: (0, styles_1.styles)(FIXED_STYLES.add), onClick: function () { return handleAdd(); } })) || ((0, jsx_runtime_1.jsx)("button", { className: (0, clsx_1.default)({ disabled: isAddingDisabled }), "data-child": 'add-button', style: (0, styles_1.styles)(FIXED_STYLES.add, defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.add), onClick: function () { return handleAdd(); } }))] })));
 });
 Object.defineProperty(exports.Counter, 'displayName', { value: 'Counter', writable: false });
 var FIXED_STYLES = (0, asStyleDict_1.asStyleDict)({

package/components/Counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.js","sourceRoot":"/","sources":["components/Counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport React, { forwardRef, useEffect, type ComponentType, type HTMLAttributes } from 'react'\nimport { usePrevious } from '../hooks/usePrevious'\nimport { asStyleDict } from '../utils/asStyleDict'\nimport { styles } from '../utils/styles'\nimport { TextField } from './TextField'\n\ntype Props = Omit<HTMLAttributes<HTMLElement>, 'onChange'> & {\n  min?: number\n  max?: number\n  quantity?: number\n  allowsInput?: boolean\n  usesDefaultStyles?: boolean\n  onChange?: (quantity: number) => void\n  AddButtonComponent?: ComponentType<HTMLAttributes<HTMLElement>>\n  SubtractButtonComponent?: ComponentType<HTMLAttributes<HTMLElement>>\n}\n\nexport const Counter = forwardRef<HTMLDivElement, Props>(({\n  style,\n  min = NaN,\n  max = NaN,\n  allowsInput = true,\n  quantity = 0,\n  usesDefaultStyles = true,\n  onChange,\n  AddButtonComponent,\n  SubtractButtonComponent,\n  ...props\n}, ref) => {\n  const handleSubtract = () => {\n    onChange?.(isNaN(min) ? quantity - 1 : Math.max(min, quantity - 1))\n  }\n\n  const handleAdd = () => {\n    onChange?.(isNaN(max) ? quantity + 1 : Math.min(max, quantity + 1))\n  }\n\n  const handleQuantityChange = (newValue: number) => {\n    if (newValue === quantity) return\n\n    onChange?.(newValue)\n  }\n\n  const prevQuantity = usePrevious(quantity)\n  const defaultStyles = usesDefaultStyles ? DEFAULT_STYLES : undefined\n  const isAddingDisabled = !isNaN(max) && quantity + 1 > max\n  const isSubtractingDisabled = !isNaN(min) && quantity - 1 < min\n\n  useEffect(() => {\n    if (prevQuantity === undefined) return\n\n    handleQuantityChange(quantity)\n  }, [quantity])\n\n  useEffect(() => {\n    handleQuantityChange(isNaN(min) ? quantity : Math.max(min, quantity))\n  }, [min])\n\n  useEffect(() => {\n    if (isNaN(max)) return\n\n    handleQuantityChange(isNaN(max) ? quantity : Math.min(max, quantity))\n  }, [max])\n\n  return (\n    <div\n      {...props}\n      data-component='counter'\n      ref={ref}\n      style={styles(style, FIXED_STYLES.root, defaultStyles?.root)}\n    >\n      {SubtractButtonComponent && (\n        <SubtractButtonComponent\n          data-child='subtract-button'\n          className={clsx({ disabled: isSubtractingDisabled })}\n          style={styles(FIXED_STYLES.subtract)}\n          onClick={() => handleSubtract()}\n        />\n      ) || (\n        <button\n          data-child='subtract-button'\n          className={clsx({ disabled: isSubtractingDisabled })}\n          style={styles(FIXED_STYLES.subtract, defaultStyles?.subtract)}\n          onClick={() => handleSubtract()}\n        />\n      )}\n      <TextField\n        data-child='text-field'\n        value={quantity.toString()}\n        isDisabled={!allowsInput}\n        formatter={(oldValue, newValue) => isNaN(Number(`0${newValue}`)) ? oldValue : newValue }\n        style={styles(FIXED_STYLES.text, defaultStyles?.text)}\n      />\n      {AddButtonComponent && (\n        <AddButtonComponent\n          data-child='add-button'\n          className={clsx({ disabled: isAddingDisabled })}\n          style={styles(FIXED_STYLES.add)}\n          onClick={() => handleAdd()}\n        />\n      ) || (\n        <button\n          data-child='add-button'\n          className={clsx({ disabled: isAddingDisabled })}\n          style={styles(FIXED_STYLES.add, defaultStyles?.add)}\n          onClick={() => handleAdd()}\n        />\n      )}\n    </div>\n  )\n})\n\nObject.defineProperty(Counter, 'displayName', { value: 'Counter', writable: false })\n\nconst FIXED_STYLES = asStyleDict({\n  root: styles({\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    alignItems: 'stretch',\n  }),\n  subtract: styles({\n    flex: '0 0 auto',\n  }),\n  add: styles({\n    flex: '0 0 auto',\n  }),\n  text: styles({\n    flex: '1 1 auto',\n  }),\n})\n\nconst DEFAULT_STYLES = asStyleDict({\n  root: styles({\n\n  }),\n  subtract: styles({\n    width: '20px',\n    height: '100%',\n    background: '#000',\n  }),\n  add: styles({\n    width: '20px',\n    height: '100%',\n    background: '#000',\n  }),\n  text: styles({\n    height: '100%',\n  }),\n})\n"]}
+{"version":3,"file":"Counter.js","sourceRoot":"/","sources":["components/Counter.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx'\nimport { forwardRef, useEffect, type ComponentType, type HTMLAttributes } from 'react'\nimport { usePrevious } from '../hooks/usePrevious'\nimport { asStyleDict } from '../utils/asStyleDict'\nimport { styles } from '../utils/styles'\nimport { TextField } from './TextField'\n\ntype Props = Omit<HTMLAttributes<HTMLElement>, 'onChange'> & {\n  min?: number\n  max?: number\n  quantity?: number\n  allowsInput?: boolean\n  usesDefaultStyles?: boolean\n  onChange?: (quantity: number) => void\n  AddButtonComponent?: ComponentType<HTMLAttributes<HTMLElement>>\n  SubtractButtonComponent?: ComponentType<HTMLAttributes<HTMLElement>>\n}\n\nexport const Counter = forwardRef<HTMLDivElement, Props>(({\n  style,\n  min = NaN,\n  max = NaN,\n  allowsInput = true,\n  quantity = 0,\n  usesDefaultStyles = true,\n  onChange,\n  AddButtonComponent,\n  SubtractButtonComponent,\n  ...props\n}, ref) => {\n  const handleSubtract = () => {\n    onChange?.(isNaN(min) ? quantity - 1 : Math.max(min, quantity - 1))\n  }\n\n  const handleAdd = () => {\n    onChange?.(isNaN(max) ? quantity + 1 : Math.min(max, quantity + 1))\n  }\n\n  const handleQuantityChange = (newValue: number) => {\n    if (newValue === quantity) return\n\n    onChange?.(newValue)\n  }\n\n  const prevQuantity = usePrevious(quantity)\n  const defaultStyles = usesDefaultStyles ? DEFAULT_STYLES : undefined\n  const isAddingDisabled = !isNaN(max) && quantity + 1 > max\n  const isSubtractingDisabled = !isNaN(min) && quantity - 1 < min\n\n  useEffect(() => {\n    if (prevQuantity === undefined) return\n\n    handleQuantityChange(quantity)\n  }, [quantity])\n\n  useEffect(() => {\n    handleQuantityChange(isNaN(min) ? quantity : Math.max(min, quantity))\n  }, [min])\n\n  useEffect(() => {\n    if (isNaN(max)) return\n\n    handleQuantityChange(isNaN(max) ? quantity : Math.min(max, quantity))\n  }, [max])\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-component='counter'\n      style={styles(style, FIXED_STYLES.root, defaultStyles?.root)}\n    >\n      {SubtractButtonComponent && (\n        <SubtractButtonComponent\n          className={clsx({ disabled: isSubtractingDisabled })}\n          data-child='subtract-button'\n          style={styles(FIXED_STYLES.subtract)}\n          onClick={() => handleSubtract()}\n        />\n      ) || (\n        <button\n          className={clsx({ disabled: isSubtractingDisabled })}\n          data-child='subtract-button'\n          style={styles(FIXED_STYLES.subtract, defaultStyles?.subtract)}\n          onClick={() => handleSubtract()}\n        />\n      )}\n      <TextField\n        data-child='text-field'\n        formatter={(oldValue, newValue) => isNaN(Number(`0${newValue}`)) ? oldValue : newValue}\n        isDisabled={!allowsInput}\n        style={styles(FIXED_STYLES.text, defaultStyles?.text)}\n        value={quantity.toString()}\n      />\n      {AddButtonComponent && (\n        <AddButtonComponent\n          className={clsx({ disabled: isAddingDisabled })}\n          data-child='add-button'\n          style={styles(FIXED_STYLES.add)}\n          onClick={() => handleAdd()}\n        />\n      ) || (\n        <button\n          className={clsx({ disabled: isAddingDisabled })}\n          data-child='add-button'\n          style={styles(FIXED_STYLES.add, defaultStyles?.add)}\n          onClick={() => handleAdd()}\n        />\n      )}\n    </div>\n  )\n})\n\nObject.defineProperty(Counter, 'displayName', { value: 'Counter', writable: false })\n\nconst FIXED_STYLES = asStyleDict({\n  root: styles({\n    display: 'flex',\n    flexDirection: 'row',\n    justifyContent: 'flex-start',\n    alignItems: 'stretch',\n  }),\n  subtract: styles({\n    flex: '0 0 auto',\n  }),\n  add: styles({\n    flex: '0 0 auto',\n  }),\n  text: styles({\n    flex: '1 1 auto',\n  }),\n})\n\nconst DEFAULT_STYLES = asStyleDict({\n  root: styles({\n\n  }),\n  subtract: styles({\n    width: '20px',\n    height: '100%',\n    background: '#000',\n  }),\n  add: styles({\n    width: '20px',\n    height: '100%',\n    background: '#000',\n  }),\n  text: styles({\n    height: '100%',\n  }),\n})\n"]}

package/components/CoverImage.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
 import { type ImageProps } from './Image';
 export type CoverImageProps = Omit<HTMLAttributes<HTMLDivElement>, 'onLoadStart'> & Pick<ImageProps, 'alt' | 'loadingMode' | 'sizes' | 'src' | 'srcSet' | 'onLoadStart' | 'onLoadComplete' | 'onLoadError'> & PropsWithChildren<{
     /**
@@ -12,17 +12,17 @@ export type CoverImageProps = Omit<HTMLAttributes<HTMLDivElement>, 'onLoadStart'
      */
     renderViewportContent?: () => JSX.Element;
 }>;
-export declare const CoverImage: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onLoadStart"> & Pick<ImageProps, "src" | "srcSet" | "sizes" | "onLoadStart" | "onLoadComplete" | "onLoadError" | "alt" | "loadingMode"> & {
+export declare const CoverImage: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "onLoadStart"> & Pick<ImageProps, "src" | "srcSet" | "sizes" | "onLoadStart" | "onLoadComplete" | "onLoadError" | "alt" | "loadingMode"> & {
     /**
      * The known aspect ratio of the image, expressed by width / height. If
      * unprovided, it will be inferred after loading the image.
      */
-    aspectRatio?: number | undefined;
+    aspectRatio?: number;
     /**
      * Content to render in the full-sized viewport (same size as the cover
      * image).
      */
-    renderViewportContent?: (() => JSX.Element) | undefined;
+    renderViewportContent?: () => JSX.Element;
 } & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/components/CoverImage.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.CoverImage = void 0;
-var react_1 = __importStar(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var spase_1 = require("spase");
 var useRect_1 = require("../hooks/useRect");
 var utils_1 = require("../utils");
@@ -87,17 +65,14 @@ exports.CoverImage = (0, react_1.forwardRef)(function (_a, ref) {
             ? Math.max(rootRect.height, Math.max(rootRect.width, rootRect.height * aspectRatio) / aspectRatio)
             : Math.max(rootRect.height, rootRect.width / aspectRatio),
     ]);
-    return (react_1.default.createElement("div", __assign({}, props, { ref: rootRef, style: (0, utils_1.styles)(style, FIXED_STYLES.root), "data-component": 'cover-image' }),
-        react_1.default.createElement(Image_1.Image, { style: (0, utils_1.styles)(FIXED_STYLES.viewport, {
-                width: "".concat(imageSize.width, "px"),
-                height: "".concat(imageSize.height, "px"),
-            }), alt: alt, src: src, srcSet: srcSet, sizes: sizes, onLoadStart: onLoadStart, onLoadComplete: onLoadComplete, onLoadError: onLoadError, "data-child": 'image', onSizeChange: function (size) { return handleSizeChange(size); } }),
-        renderViewportContent && (react_1.default.createElement("div", { "data-child": 'viewport', style: (0, utils_1.styles)(FIXED_STYLES.viewport, {
-                height: "".concat(imageSize.height, "px"),
-                pointerEvents: 'none',
-                width: "".concat(imageSize.width, "px"),
-            }) }, renderViewportContent())),
-        children));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({}, props, { ref: rootRef, "data-component": 'cover-image', style: (0, utils_1.styles)(style, FIXED_STYLES.root), children: [(0, jsx_runtime_1.jsx)(Image_1.Image, { alt: alt, "data-child": 'image', sizes: sizes, src: src, srcSet: srcSet, style: (0, utils_1.styles)(FIXED_STYLES.viewport, {
+                    width: "".concat(imageSize.width, "px"),
+                    height: "".concat(imageSize.height, "px"),
+                }), onLoadComplete: onLoadComplete, onLoadError: onLoadError, onLoadStart: onLoadStart, onSizeChange: function (size) { return handleSizeChange(size); } }), renderViewportContent && ((0, jsx_runtime_1.jsx)("div", { "data-child": 'viewport', style: (0, utils_1.styles)(FIXED_STYLES.viewport, {
+                    height: "".concat(imageSize.height, "px"),
+                    pointerEvents: 'none',
+                    width: "".concat(imageSize.width, "px"),
+                }), children: renderViewportContent() })), children] })));
 });
 Object.defineProperty(exports.CoverImage, 'displayName', { value: 'CoverImage', writable: false });
 var FIXED_STYLES = (0, utils_1.asStyleDict)({

package/components/CoverImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CoverImage.js","sourceRoot":"/","sources":["components/CoverImage.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useRef, useState, type HTMLAttributes, type PropsWithChildren, type RefObject } from 'react'\nimport { Size } from 'spase'\nimport { useRect } from '../hooks/useRect'\nimport { asStyleDict, styles } from '../utils'\nimport { Image, type ImageProps } from './Image'\n\nexport type CoverImageProps = Omit<HTMLAttributes<HTMLDivElement>, 'onLoadStart'> & Pick<ImageProps, 'alt' | 'loadingMode' | 'sizes' | 'src' | 'srcSet' | 'onLoadStart' | 'onLoadComplete' | 'onLoadError'> & PropsWithChildren<{\n  /**\n   * The known aspect ratio of the image, expressed by width / height. If\n   * unprovided, it will be inferred after loading the image.\n   */\n  aspectRatio?: number\n\n  /**\n   * Content to render in the full-sized viewport (same size as the cover\n   * image).\n   */\n  renderViewportContent?: () => JSX.Element\n}>\n\nexport const CoverImage = forwardRef<HTMLDivElement, CoverImageProps>(({\n  children,\n  style,\n  alt,\n  aspectRatio: externalAspectRatio = NaN,\n  loadingMode,\n  renderViewportContent,\n  sizes,\n  src,\n  srcSet,\n  onLoadStart,\n  onLoadComplete,\n  onLoadError,\n  ...props\n}, ref) => {\n  const handleSizeChange = (size?: Size) => {\n    setLocalAspectRatio(size ? size.width / size.height : NaN)\n  }\n\n  const localRef = useRef<HTMLDivElement>(null)\n  const rootRef = ref as RefObject<HTMLDivElement> ?? localRef\n  const [localAspectRatio, setLocalAspectRatio] = useState(NaN)\n  const aspectRatio = isNaN(externalAspectRatio) ? localAspectRatio : externalAspectRatio\n  const rootRect = useRect(rootRef)\n  const rootAspectRatio = rootRect.width / rootRect.height\n  const imageSize = new Size([\n    rootAspectRatio > 1\n      ? Math.max(rootRect.width, rootRect.height * aspectRatio)\n      : Math.max(rootRect.width, (Math.max(rootRect.height, rootRect.width / aspectRatio)) * aspectRatio),\n    rootAspectRatio > 1\n      ? Math.max(rootRect.height, Math.max(rootRect.width, rootRect.height * aspectRatio) / aspectRatio)\n      : Math.max(rootRect.height, rootRect.width / aspectRatio),\n  ])\n\n  return (\n    <div {...props} ref={rootRef} style={styles(style, FIXED_STYLES.root)} data-component='cover-image'>\n      <Image\n        style={styles(FIXED_STYLES.viewport, {\n          width: `${imageSize.width}px`,\n          height: `${imageSize.height}px`,\n        })}\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        onLoadStart={onLoadStart}\n        onLoadComplete={onLoadComplete}\n        onLoadError={onLoadError}\n        data-child='image'\n        onSizeChange={size => handleSizeChange(size)}\n      />\n      {renderViewportContent && (\n        <div\n          data-child='viewport'\n          style={styles(FIXED_STYLES.viewport, {\n            height: `${imageSize.height}px`,\n            pointerEvents: 'none',\n            width: `${imageSize.width}px`,\n          })}\n        >\n          {renderViewportContent()}\n        </div>\n      )}\n      {children}\n    </div>\n  )\n})\n\nObject.defineProperty(CoverImage, 'displayName', { value: 'CoverImage', writable: false })\n\nconst FIXED_STYLES = asStyleDict({\n  root: {\n    overflow: 'hidden',\n  },\n  viewport: {\n    fontSize: '0',\n    left: '50%',\n    position: 'absolute',\n    top: '50%',\n    transform: 'translate(-50%, -50%)',\n  },\n  viewportContent: {\n    height: '100%',\n    left: '0',\n    position: 'absolute',\n    top: '0',\n    width: '100%',\n  },\n})\n"]}
+{"version":3,"file":"CoverImage.js","sourceRoot":"/","sources":["components/CoverImage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useState, type HTMLAttributes, type PropsWithChildren, type RefObject } from 'react'\nimport { Size } from 'spase'\nimport { useRect } from '../hooks/useRect'\nimport { asStyleDict, styles } from '../utils'\nimport { Image, type ImageProps } from './Image'\n\nexport type CoverImageProps = Omit<HTMLAttributes<HTMLDivElement>, 'onLoadStart'> & Pick<ImageProps, 'alt' | 'loadingMode' | 'sizes' | 'src' | 'srcSet' | 'onLoadStart' | 'onLoadComplete' | 'onLoadError'> & PropsWithChildren<{\n  /**\n   * The known aspect ratio of the image, expressed by width / height. If\n   * unprovided, it will be inferred after loading the image.\n   */\n  aspectRatio?: number\n\n  /**\n   * Content to render in the full-sized viewport (same size as the cover\n   * image).\n   */\n  renderViewportContent?: () => JSX.Element\n}>\n\nexport const CoverImage = forwardRef<HTMLDivElement, CoverImageProps>(({\n  children,\n  style,\n  alt,\n  aspectRatio: externalAspectRatio = NaN,\n  loadingMode,\n  renderViewportContent,\n  sizes,\n  src,\n  srcSet,\n  onLoadStart,\n  onLoadComplete,\n  onLoadError,\n  ...props\n}, ref) => {\n  const handleSizeChange = (size?: Size) => {\n    setLocalAspectRatio(size ? size.width / size.height : NaN)\n  }\n\n  const localRef = useRef<HTMLDivElement>(null)\n  const rootRef = ref as RefObject<HTMLDivElement> ?? localRef\n  const [localAspectRatio, setLocalAspectRatio] = useState(NaN)\n  const aspectRatio = isNaN(externalAspectRatio) ? localAspectRatio : externalAspectRatio\n  const rootRect = useRect(rootRef)\n  const rootAspectRatio = rootRect.width / rootRect.height\n  const imageSize = new Size([\n    rootAspectRatio > 1\n      ? Math.max(rootRect.width, rootRect.height * aspectRatio)\n      : Math.max(rootRect.width, (Math.max(rootRect.height, rootRect.width / aspectRatio)) * aspectRatio),\n    rootAspectRatio > 1\n      ? Math.max(rootRect.height, Math.max(rootRect.width, rootRect.height * aspectRatio) / aspectRatio)\n      : Math.max(rootRect.height, rootRect.width / aspectRatio),\n  ])\n\n  return (\n    <div {...props} ref={rootRef} data-component='cover-image' style={styles(style, FIXED_STYLES.root)}>\n      <Image\n        alt={alt}\n        data-child='image'\n        sizes={sizes}\n        src={src}\n        srcSet={srcSet}\n        style={styles(FIXED_STYLES.viewport, {\n          width: `${imageSize.width}px`,\n          height: `${imageSize.height}px`,\n        })}\n        onLoadComplete={onLoadComplete}\n        onLoadError={onLoadError}\n        onLoadStart={onLoadStart}\n        onSizeChange={size => handleSizeChange(size)}\n      />\n      {renderViewportContent && (\n        <div\n          data-child='viewport'\n          style={styles(FIXED_STYLES.viewport, {\n            height: `${imageSize.height}px`,\n            pointerEvents: 'none',\n            width: `${imageSize.width}px`,\n          })}\n        >\n          {renderViewportContent()}\n        </div>\n      )}\n      {children}\n    </div>\n  )\n})\n\nObject.defineProperty(CoverImage, 'displayName', { value: 'CoverImage', writable: false })\n\nconst FIXED_STYLES = asStyleDict({\n  root: {\n    overflow: 'hidden',\n  },\n  viewport: {\n    fontSize: '0',\n    left: '50%',\n    position: 'absolute',\n    top: '50%',\n    transform: 'translate(-50%, -50%)',\n  },\n  viewportContent: {\n    height: '100%',\n    left: '0',\n    position: 'absolute',\n    top: '0',\n    width: '100%',\n  },\n})\n"]}

package/components/CoverVideo.d.ts

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
 import { type VideoProps } from './Video';
 export type CoverVideoProps = HTMLAttributes<HTMLDivElement> & Pick<VideoProps, 'autoLoop' | 'autoPlay' | 'hasControls' | 'isMuted' | 'playsInline' | 'posterSrc' | 'src' | 'onPause' | 'onPlay' | 'onCanPlay' | 'onEnd' | 'onFullscreenChange' | 'onLoadMetadata' | 'onLoadMetadataComplete' | 'onLoadMetadataError' | 'onSizeChange'> & PropsWithChildren<{
     /**
@@ -12,17 +12,17 @@ export type CoverVideoProps = HTMLAttributes<HTMLDivElement> & Pick<VideoProps,
      */
     renderViewportContent?: () => JSX.Element;
 }>;
-export declare const CoverVideo: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Pick<VideoProps, "src" | "onCanPlay" | "onPause" | "onPlay" | "onSizeChange" | "autoPlay" | "playsInline" | "autoLoop" | "hasControls" | "isMuted" | "posterSrc" | "onEnd" | "onFullscreenChange" | "onLoadMetadata" | "onLoadMetadataComplete" | "onLoadMetadataError"> & {
+export declare const CoverVideo: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & Pick<VideoProps, "src" | "onCanPlay" | "onPause" | "onPlay" | "onSizeChange" | "autoPlay" | "playsInline" | "autoLoop" | "hasControls" | "isMuted" | "posterSrc" | "onEnd" | "onFullscreenChange" | "onLoadMetadata" | "onLoadMetadataComplete" | "onLoadMetadataError"> & {
     /**
      * The known aspect ratio of the video, expressed by width / height. If
      * unprovided, it will be inferred after loading the video.
      */
-    aspectRatio?: number | undefined;
+    aspectRatio?: number;
     /**
      * Content to render in the full-sized viewport (same size as the cover
      * video).
      */
-    renderViewportContent?: (() => JSX.Element) | undefined;
+    renderViewportContent?: () => JSX.Element;
 } & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;