etudes 5.2.0 → 5.3.0

package/components/Collection.js

@@ -1,70 +1,16 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.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 = require("react");
-var Each_1 = require("../operators/Each");
-var utils_1 = require("../utils");
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import isDeepEqual from 'fast-deep-equal/react';
+import { forwardRef, useEffect, useRef } from 'react';
+import { Each } from '../operators/Each.js';
+import { asStyleDict, styles } from '../utils/index.js';
 /**
  * A collection of selectable items with generic data. Items are generated based
  * on the provided `ItemComponent`. This component supports different layouts in
  * both horizontal and vertical orientations.
  */
-exports.Collection = (0, react_2.forwardRef)(function (_a, ref) {
-    var className = _a.className, style = _a.style, _b = _a.isSelectionTogglable, isSelectionTogglable = _b === void 0 ? false : _b, itemLength = _a.itemLength, _c = _a.itemPadding, itemPadding = _c === void 0 ? 0 : _c, items = _a.items, _d = _a.layout, layout = _d === void 0 ? 'list' : _d, _e = _a.numSegments, numSegments = _e === void 0 ? 1 : _e, _f = _a.orientation, orientation = _f === void 0 ? 'vertical' : _f, externalSelection = _a.selection, _g = _a.selectionMode, selectionMode = _g === void 0 ? 'none' : _g, onActivateAt = _a.onActivateAt, onDeselectAt = _a.onDeselectAt, onItemCustomEvent = _a.onItemCustomEvent, onSelectAt = _a.onSelectAt, onSelectionChange = _a.onSelectionChange, ItemComponent = _a.ItemComponent, props = __rest(_a, ["className", "style", "isSelectionTogglable", "itemLength", "itemPadding", "items", "layout", "numSegments", "orientation", "selection", "selectionMode", "onActivateAt", "onDeselectAt", "onItemCustomEvent", "onSelectAt", "onSelectionChange", "ItemComponent"]);
-    var isIndexOutOfRange = function (index) {
+export const Collection = forwardRef(({ className, style, isSelectionTogglable = false, itemLength, itemPadding = 0, items, layout = 'list', numSegments = 1, orientation = 'vertical', selection: externalSelection, selectionMode = 'none', onActivateAt, onDeselectAt, onItemCustomEvent, onSelectAt, onSelectionChange, ItemComponent, ...props }, ref) => {
+    const isIndexOutOfRange = (index) => {
         if (isNaN(index))
             return true;
         if (index >= items.length)
@@ -73,9 +19,9 @@ exports.Collection = (0, react_2.forwardRef)(function (_a, ref) {
             return true;
         return false;
     };
-    var sanitizeSelection = function (indices) { return sortIndices(indices).filter(function (t) { return !isIndexOutOfRange(t); }); };
-    var isSelectedAt = function (index) { return selection.indexOf(index) >= 0; };
-    var toggleAt = function (index) {
+    const sanitizeSelection = (indices) => sortIndices(indices).filter(t => !isIndexOutOfRange(t));
+    const isSelectedAt = (index) => selection.indexOf(index) >= 0;
+    const toggleAt = (index) => {
         if (isSelectedAt(index)) {
             deselectAt(index);
         }
@@ -83,36 +29,36 @@ exports.Collection = (0, react_2.forwardRef)(function (_a, ref) {
             selectAt(index);
         }
     };
-    var selectAt = function (index) {
+    const selectAt = (index) => {
         if (isSelectedAt(index))
             return;
-        var transform;
+        let transform;
         switch (selectionMode) {
             case 'multiple': {
-                transform = function (val) { return sortIndices(__spreadArray(__spreadArray([], __read(val.filter(function (t) { return t !== index; })), false), [index], false)); };
+                transform = val => sortIndices([...val.filter(t => t !== index), index]);
                 break;
             }
             case 'single': {
-                transform = function (val) { return [index]; };
+                transform = val => [index];
                 break;
             }
             default:
                 return;
         }
-        var newValue = transform(selection);
+        const newValue = transform(selection);
         prevSelectionRef.current = newValue;
         handleSelectionChange(selection, newValue);
     };
-    var deselectAt = function (index) {
+    const deselectAt = (index) => {
         if (!isSelectedAt(index))
             return;
-        var transform = function (val) { return val.filter(function (t) { return t !== index; }); };
-        var newValue = transform(selection);
+        const transform = (val) => val.filter(t => t !== index);
+        const newValue = transform(selection);
         prevSelectionRef.current = newValue;
         handleSelectionChange(selection, newValue);
     };
-    var activateAt = function (index) {
-        onActivateAt === null || onActivateAt === void 0 ? void 0 : onActivateAt(index);
+    const activateAt = (index) => {
+        onActivateAt?.(index);
         if (selectionMode === 'none')
             return;
         if (isSelectionTogglable) {
@@ -122,61 +68,79 @@ exports.Collection = (0, react_2.forwardRef)(function (_a, ref) {
             selectAt(index);
         }
     };
-    var handleSelectionChange = function (oldValue, newValue) {
-        var _a;
-        if ((0, react_1.default)(oldValue, newValue))
+    const handleSelectionChange = (oldValue, newValue) => {
+        if (isDeepEqual(oldValue, newValue))
             return;
-        var deselected = (_a = oldValue === null || oldValue === void 0 ? void 0 : oldValue.filter(function (t) { return newValue.indexOf(t) === -1; })) !== null && _a !== void 0 ? _a : [];
-        var selected = newValue.filter(function (t) { return (oldValue === null || oldValue === void 0 ? void 0 : oldValue.indexOf(t)) === -1; });
-        deselected.forEach(function (t) { return onDeselectAt === null || onDeselectAt === void 0 ? void 0 : onDeselectAt(t); });
-        selected.forEach(function (t) { return onSelectAt === null || onSelectAt === void 0 ? void 0 : onSelectAt(t); });
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(newValue);
+        const deselected = oldValue?.filter(t => newValue.indexOf(t) === -1) ?? [];
+        const selected = newValue.filter(t => oldValue?.indexOf(t) === -1);
+        deselected.forEach(t => onDeselectAt?.(t));
+        selected.forEach(t => onSelectAt?.(t));
+        onSelectionChange?.(newValue);
     };
-    var selection = sanitizeSelection(externalSelection !== null && externalSelection !== void 0 ? externalSelection : []);
-    var fixedStyles = getFixedStyles({ itemLength: itemLength, itemPadding: itemPadding, layout: layout, numSegments: numSegments, orientation: orientation });
-    var prevSelectionRef = (0, react_2.useRef)();
-    var prevSelection = prevSelectionRef.current;
-    (0, react_2.useEffect)(function () {
+    const selection = sanitizeSelection(externalSelection ?? []);
+    const fixedStyles = getFixedStyles({ itemLength, itemPadding, layout, numSegments, orientation });
+    const prevSelectionRef = useRef();
+    const prevSelection = prevSelectionRef.current;
+    useEffect(() => {
         prevSelectionRef.current = selection;
         if (prevSelection === undefined)
             return;
         handleSelectionChange(prevSelection, selection);
     }, [JSON.stringify(selection)]);
-    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); } })); } })) })));
+    return (_jsx("div", { ...props, ref: ref, className: clsx(className), "data-component": 'collection', style: styles(style, fixedStyles.root), children: ItemComponent && (_jsx(Each, { in: items, children: (val, idx) => (_jsx(ItemComponent, { className: clsx({ selected: isSelectedAt(idx) }), "data-child": 'item', "data-index": idx, index: idx, isSelected: isSelectedAt(idx), item: val, orientation: orientation, style: styles(fixedStyles.item, {
+                    pointerEvents: isSelectionTogglable !== true && isSelectedAt(idx) ? 'none' : 'auto',
+                    ...idx >= items.length - 1 ? {} : {
+                        ...layout === 'list' ? {
+                            ...orientation === 'vertical' ? {
+                                marginBottom: `${itemPadding}px`,
+                            } : {
+                                marginRight: `${itemPadding}px`,
+                            },
+                        } : {},
+                    },
+                }), onClick: () => activateAt(idx), onCustomEvent: (name, info) => onItemCustomEvent?.(idx, name, info) })) })) }));
 });
-Object.defineProperty(exports.Collection, 'displayName', { value: 'Collection', writable: false });
+Object.defineProperty(Collection, 'displayName', { value: 'Collection', writable: false });
 function sortIndices(indices) {
-    return indices.sort(function (a, b) { return a - b; });
+    return indices.sort((a, b) => a - b);
 }
-function getFixedStyles(_a) {
-    var _b = _a.itemLength, itemLength = _b === void 0 ? NaN : _b, _c = _a.itemPadding, itemPadding = _c === void 0 ? 0 : _c, _d = _a.layout, layout = _d === void 0 ? 'collection' : _d, _e = _a.numSegments, numSegments = _e === void 0 ? 1 : _e, _f = _a.orientation, orientation = _f === void 0 ? 'vertical' : _f;
-    return (0, utils_1.asStyleDict)({
-        root: __assign({ counterReset: 'item-counter', listStyle: 'none' }, layout === 'list' ? {
-            alignItems: 'flex-start',
-            display: 'flex',
+function getFixedStyles({ itemLength = NaN, itemPadding = 0, layout = 'collection', numSegments = 1, orientation = 'vertical' }) {
+    return asStyleDict({
+        root: {
+            counterReset: 'item-counter',
+            listStyle: 'none',
+            ...layout === 'list' ? {
+                alignItems: 'flex-start',
+                display: 'flex',
+                flex: '0 0 auto',
+                flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+                justifyContent: 'flex-start',
+            } : {
+                display: 'grid',
+                gap: `${itemPadding}px`,
+                ...orientation === 'vertical' ? {
+                    gridAutoRows: isNaN(itemLength) ? undefined : `${itemLength}px`,
+                    gridTemplateColumns: `repeat(${numSegments}, 1fr)`,
+                    gridAutoFlow: 'row',
+                } : {
+                    gridAutoColumns: isNaN(itemLength) ? undefined : `${itemLength}px`,
+                    gridTemplateRows: `repeat(${numSegments}, 1fr)`,
+                    gridAutoFlow: 'column',
+                },
+            },
+        },
+        item: {
+            counterIncrement: 'item-counter',
             flex: '0 0 auto',
-            flexDirection: orientation === 'horizontal' ? 'row' : 'column',
-            justifyContent: 'flex-start',
-        } : __assign({ display: 'grid', gap: "".concat(itemPadding, "px") }, orientation === 'vertical' ? {
-            gridAutoRows: isNaN(itemLength) ? undefined : "".concat(itemLength, "px"),
-            gridTemplateColumns: "repeat(".concat(numSegments, ", 1fr)"),
-            gridAutoFlow: 'row',
-        } : {
-            gridAutoColumns: isNaN(itemLength) ? undefined : "".concat(itemLength, "px"),
-            gridTemplateRows: "repeat(".concat(numSegments, ", 1fr)"),
-            gridAutoFlow: 'column',
-        })),
-        item: __assign({ counterIncrement: 'item-counter', flex: '0 0 auto' }, layout === 'list' ? __assign({}, orientation === 'vertical' ? {
-            width: '100%',
-            height: isNaN(itemLength) ? undefined : "".concat(itemLength, "px"),
-        } : {
-            width: isNaN(itemLength) ? undefined : "".concat(itemLength, "px"),
-            height: '100%',
-        }) : {}),
+            ...layout === 'list' ? {
+                ...orientation === 'vertical' ? {
+                    width: '100%',
+                    height: isNaN(itemLength) ? undefined : `${itemLength}px`,
+                } : {
+                    width: isNaN(itemLength) ? undefined : `${itemLength}px`,
+                    height: '100%',
+                },
+            } : {},
+        },
     });
 }
-//# sourceMappingURL=Collection.js.map

package/components/Counter.js

@@ -1,102 +1,71 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef, useEffect } from 'react';
+import { usePrevious } from '../hooks/usePrevious.js';
+import { asStyleDict, styles } from '../utils/index.js';
+import { TextField } from './TextField.js';
+export const Counter = forwardRef(({ style, min = NaN, max = NaN, allowsInput = true, quantity = 0, usesDefaultStyles = true, onChange, AddButtonComponent, SubtractButtonComponent, ...props }, ref) => {
+    const handleSubtract = () => {
+        onChange?.(isNaN(min) ? quantity - 1 : Math.max(min, quantity - 1));
     };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Counter = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var clsx_1 = __importDefault(require("clsx"));
-var react_1 = require("react");
-var usePrevious_1 = require("../hooks/usePrevious");
-var asStyleDict_1 = require("../utils/asStyleDict");
-var styles_1 = require("../utils/styles");
-var TextField_1 = require("./TextField");
-exports.Counter = (0, react_1.forwardRef)(function (_a, ref) {
-    var style = _a.style, _b = _a.min, min = _b === void 0 ? NaN : _b, _c = _a.max, max = _c === void 0 ? NaN : _c, _d = _a.allowsInput, allowsInput = _d === void 0 ? true : _d, _e = _a.quantity, quantity = _e === void 0 ? 0 : _e, _f = _a.usesDefaultStyles, usesDefaultStyles = _f === void 0 ? true : _f, onChange = _a.onChange, AddButtonComponent = _a.AddButtonComponent, SubtractButtonComponent = _a.SubtractButtonComponent, props = __rest(_a, ["style", "min", "max", "allowsInput", "quantity", "usesDefaultStyles", "onChange", "AddButtonComponent", "SubtractButtonComponent"]);
-    var handleSubtract = function () {
-        onChange === null || onChange === void 0 ? void 0 : onChange(isNaN(min) ? quantity - 1 : Math.max(min, quantity - 1));
+    const handleAdd = () => {
+        onChange?.(isNaN(max) ? quantity + 1 : Math.min(max, quantity + 1));
     };
-    var handleAdd = function () {
-        onChange === null || onChange === void 0 ? void 0 : onChange(isNaN(max) ? quantity + 1 : Math.min(max, quantity + 1));
-    };
-    var handleQuantityChange = function (newValue) {
+    const handleQuantityChange = (newValue) => {
         if (newValue === quantity)
             return;
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        onChange?.(newValue);
     };
-    var prevQuantity = (0, usePrevious_1.usePrevious)(quantity);
-    var defaultStyles = usesDefaultStyles ? DEFAULT_STYLES : undefined;
-    var isAddingDisabled = !isNaN(max) && quantity + 1 > max;
-    var isSubtractingDisabled = !isNaN(min) && quantity - 1 < min;
-    (0, react_1.useEffect)(function () {
+    const prevQuantity = usePrevious(quantity);
+    const defaultStyles = usesDefaultStyles ? DEFAULT_STYLES : undefined;
+    const isAddingDisabled = !isNaN(max) && quantity + 1 > max;
+    const isSubtractingDisabled = !isNaN(min) && quantity - 1 < min;
+    useEffect(() => {
         if (prevQuantity === undefined)
             return;
         handleQuantityChange(quantity);
     }, [quantity]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         handleQuantityChange(isNaN(min) ? quantity : Math.max(min, quantity));
     }, [min]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (isNaN(max))
             return;
         handleQuantityChange(isNaN(max) ? quantity : Math.min(max, quantity));
     }, [max]);
-    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(); } }))] })));
+    return (_jsxs("div", { ...props, ref: ref, "data-component": 'counter', style: styles(style, FIXED_STYLES.root, defaultStyles?.root), children: [SubtractButtonComponent && (_jsx(SubtractButtonComponent, { className: clsx({ disabled: isSubtractingDisabled }), "data-child": 'subtract-button', style: styles(FIXED_STYLES.subtract), onClick: () => handleSubtract() })) || (_jsx("button", { className: clsx({ disabled: isSubtractingDisabled }), "data-child": 'subtract-button', style: styles(FIXED_STYLES.subtract, defaultStyles?.subtract), onClick: () => handleSubtract() })), _jsx(TextField, { "data-child": 'text-field', formatter: (oldValue, newValue) => isNaN(Number(`0${newValue}`)) ? oldValue : newValue, isDisabled: !allowsInput, style: styles(FIXED_STYLES.text, defaultStyles?.text), value: quantity.toString() }), AddButtonComponent && (_jsx(AddButtonComponent, { className: clsx({ disabled: isAddingDisabled }), "data-child": 'add-button', style: styles(FIXED_STYLES.add), onClick: () => handleAdd() })) || (_jsx("button", { className: clsx({ disabled: isAddingDisabled }), "data-child": 'add-button', style: styles(FIXED_STYLES.add, defaultStyles?.add), onClick: () => handleAdd() }))] }));
 });
-Object.defineProperty(exports.Counter, 'displayName', { value: 'Counter', writable: false });
-var FIXED_STYLES = (0, asStyleDict_1.asStyleDict)({
-    root: (0, styles_1.styles)({
+Object.defineProperty(Counter, 'displayName', { value: 'Counter', writable: false });
+const FIXED_STYLES = asStyleDict({
+    root: styles({
         display: 'flex',
         flexDirection: 'row',
         justifyContent: 'flex-start',
         alignItems: 'stretch',
     }),
-    subtract: (0, styles_1.styles)({
+    subtract: styles({
         flex: '0 0 auto',
     }),
-    add: (0, styles_1.styles)({
+    add: styles({
         flex: '0 0 auto',
     }),
-    text: (0, styles_1.styles)({
+    text: styles({
         flex: '1 1 auto',
     }),
 });
-var DEFAULT_STYLES = (0, asStyleDict_1.asStyleDict)({
-    root: (0, styles_1.styles)({}),
-    subtract: (0, styles_1.styles)({
+const DEFAULT_STYLES = asStyleDict({
+    root: styles({}),
+    subtract: styles({
         width: '20px',
         height: '100%',
         background: '#000',
     }),
-    add: (0, styles_1.styles)({
+    add: styles({
         width: '20px',
         height: '100%',
         background: '#000',
     }),
-    text: (0, styles_1.styles)({
+    text: styles({
         height: '100%',
     }),
 });
-//# sourceMappingURL=Counter.js.map

package/components/CoverImage.js

@@ -1,63 +1,20 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CoverImage = void 0;
-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");
-var Image_1 = require("./Image");
-exports.CoverImage = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b;
-    var children = _a.children, style = _a.style, alt = _a.alt, _c = _a.aspectRatio, externalAspectRatio = _c === void 0 ? NaN : _c, loadingMode = _a.loadingMode, renderViewportContent = _a.renderViewportContent, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, onLoadStart = _a.onLoadStart, onLoadComplete = _a.onLoadComplete, onLoadError = _a.onLoadError, props = __rest(_a, ["children", "style", "alt", "aspectRatio", "loadingMode", "renderViewportContent", "sizes", "src", "srcSet", "onLoadStart", "onLoadComplete", "onLoadError"]);
-    var handleSizeChange = function (size) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from 'react';
+import { Size } from 'spase';
+import { useRect } from '../hooks/useRect.js';
+import { asStyleDict, styles } from '../utils/index.js';
+import { Image } from './Image.js';
+export const CoverImage = forwardRef(({ children, style, alt, aspectRatio: externalAspectRatio = NaN, loadingMode, renderViewportContent, sizes, src, srcSet, onLoadStart, onLoadComplete, onLoadError, ...props }, ref) => {
+    const handleSizeChange = (size) => {
         setLocalAspectRatio(size ? size.width / size.height : NaN);
     };
-    var localRef = (0, react_1.useRef)(null);
-    var rootRef = (_b = ref) !== null && _b !== void 0 ? _b : localRef;
-    var _d = __read((0, react_1.useState)(NaN), 2), localAspectRatio = _d[0], setLocalAspectRatio = _d[1];
-    var aspectRatio = isNaN(externalAspectRatio) ? localAspectRatio : externalAspectRatio;
-    var rootRect = (0, useRect_1.useRect)(rootRef);
-    var rootAspectRatio = rootRect.width / rootRect.height;
-    var imageSize = new spase_1.Size([
+    const localRef = useRef(null);
+    const rootRef = ref ?? localRef;
+    const [localAspectRatio, setLocalAspectRatio] = useState(NaN);
+    const aspectRatio = isNaN(externalAspectRatio) ? localAspectRatio : externalAspectRatio;
+    const rootRect = useRect(rootRef);
+    const rootAspectRatio = rootRect.width / rootRect.height;
+    const imageSize = new Size([
         rootAspectRatio > 1
             ? Math.max(rootRect.width, rootRect.height * aspectRatio)
             : Math.max(rootRect.width, (Math.max(rootRect.height, rootRect.width / aspectRatio)) * aspectRatio),
@@ -65,17 +22,17 @@ 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 ((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"),
+    return (_jsxs("div", { ...props, ref: rootRef, "data-component": 'cover-image', style: styles(style, FIXED_STYLES.root), children: [_jsx(Image, { alt: alt, "data-child": 'image', sizes: sizes, src: src, srcSet: srcSet, style: styles(FIXED_STYLES.viewport, {
+                    width: `${imageSize.width}px`,
+                    height: `${imageSize.height}px`,
+                }), onLoadComplete: onLoadComplete, onLoadError: onLoadError, onLoadStart: onLoadStart, onSizeChange: size => handleSizeChange(size) }), renderViewportContent && (_jsx("div", { "data-child": 'viewport', style: styles(FIXED_STYLES.viewport, {
+                    height: `${imageSize.height}px`,
                     pointerEvents: 'none',
-                    width: "".concat(imageSize.width, "px"),
-                }), children: renderViewportContent() })), children] })));
+                    width: `${imageSize.width}px`,
+                }), children: renderViewportContent() })), children] }));
 });
-Object.defineProperty(exports.CoverImage, 'displayName', { value: 'CoverImage', writable: false });
-var FIXED_STYLES = (0, utils_1.asStyleDict)({
+Object.defineProperty(CoverImage, 'displayName', { value: 'CoverImage', writable: false });
+const FIXED_STYLES = asStyleDict({
     root: {
         overflow: 'hidden',
     },
@@ -94,4 +51,3 @@ var FIXED_STYLES = (0, utils_1.asStyleDict)({
         width: '100%',
     },
 });
-//# sourceMappingURL=CoverImage.js.map