@homecode/ui 5.4.1 → 5.6.0

package/dist/esm/index.js

@@ -17,6 +17,7 @@ export { Expand } from './src/components/Expand/Expand.js';
 export { Flex } from './src/components/Flex/Flex.js';
 export { Form } from './src/components/Form/Form.js';
 export { Gallery, normalizeGalleryItem } from './src/components/Gallery/Gallery.js';
+export { GridLayout } from './src/components/GridLayout/GridLayout.js';
 export { Heading } from './src/components/Heading/Heading.js';
 export { Icon } from './src/components/Icon/Icon.js';
 export { Input } from './src/components/Input/Input.js';
@@ -55,6 +56,7 @@ export { H1, H2, H3, H4, H5, H6 } from './src/components/Text/Text.js';
 export { Theme } from './src/components/Theme/Theme.js';
 export { ThemeProvider, useTheme } from './src/components/Theme/ThemeProvider.js';
 export { VH } from './src/components/VH/VH.js';
+export { VideoPlayer } from './src/components/VideoPlayer/VideoPlayer.js';
 export { default as Virtualized } from './src/components/Virtualized/Virtualized.js';
 export { default as VirtualizedList } from './src/components/Virtualized/List/List.js';
 export { default as VirtualizedListScroll } from './src/components/Virtualized/List/ListScroll.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -40,7 +40,11 @@ import '../Flex/Flex.styl.js';
 import '../Form/Form.styl.js';
 import '../Form/Validator.js';
 import '../Form/SubmitButtons/SubmitButtons.styl.js';
+import '../ProgressCircular/ProgressCircular.styl.js';
+import '../Slider/Slider.styl.js';
+import '../VideoPlayer/VideoPlayer.styl.js';
 import '../Gallery/Gallery.styl.js';
+import '../GridLayout/GridLayout.styl.js';
 import '../Heading/Heading.js';
 import '../InputFile/InputFile.styl.js';
 import '../InputFile/Item/Item.styl.js';
@@ -54,7 +58,6 @@ import '../Notifications/store.js';
 import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Progress/Progress.styl.js';
-import '../ProgressCircular/ProgressCircular.styl.js';
 import '../PromptComposer/PromptComposer.js';
 import '@tiptap/extensions';
 import '@tiptap/react';
@@ -64,7 +67,6 @@ import '../RadioGroup/RadioGroupContext.js';
 import '../RadioButton/RadioButton.styl.js';
 import '../RadioGroup/RadioGroup.styl.js';
 import '../Router/Router.js';
-import '../Slider/Slider.styl.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';
 import '../TextShimmer/TextShimmer.js';

package/dist/esm/src/components/Gallery/Gallery.js

@@ -7,6 +7,7 @@ import cn from 'classnames';
 import { Button } from '../Button/Button.js';
 import { Icon } from '../Icon/Icon.js';
 import { Spinner } from '../Spinner/Spinner.js';
+import { VideoPlayer } from '../VideoPlayer/VideoPlayer.js';
 import throttle from '../../tools/throttle.js';
 import { circularSlice } from '../../tools/array.js';
 import { omit } from '../../tools/object.js';
@@ -38,15 +39,13 @@ function Arr({ className, size, icon, ...rest }) {
     return (jsx(Button, { className: cn(S.arr, className), size: size, variant: "clear", ...rest, children: jsx(Icon, { type: icon, size: size }) }));
 }
 function VideoItem({ src, size, isActive, }) {
-    const [loaded, setLoaded] = useState(false);
-    const videoRef = useRef(null);
+    const wrapRef = useRef(null);
     useEffect(() => {
-        const video = videoRef.current;
-        if (!video || isActive)
+        if (isActive)
             return;
-        video.pause();
+        wrapRef.current?.querySelector('video')?.pause();
     }, [isActive, src]);
-    return (jsxs("div", { className: cn(S.item, S.videoItem), children: [jsx("video", { ref: videoRef, src: src, controls: true, playsInline: true, className: S.video, onLoadedData: () => setLoaded(true) }), !loaded && jsx(Spinner, { size: size })] }));
+    return (jsx("div", { ref: wrapRef, className: cn(S.item, S.videoItem), children: jsx(VideoPlayer, { src: src, size: size, storageKey: `Gallery:${src}`, className: S.video }) }));
 }
 function Item({ src, kind, size, isActive, }) {
     const [loaded, setLoaded] = useState(false);

package/dist/esm/src/components/Gallery/Gallery.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_videoItem__06r39 .Gallery_video__vKK23{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out;z-index:1}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
+var css_248z = ".Gallery_item__P4qTJ,.Gallery_root__-Crit{height:100%;width:100%}.Gallery_root__-Crit{overflow:hidden;position:relative}.Gallery_inner__4FAPt{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;position:absolute;touch-action:none;transform:translate3d(-33.33333%,0,0);width:calc(300% + 1px)}.Gallery_single__Wfd9h .Gallery_inner__4FAPt{transform:none;width:100%}.Gallery_single__Wfd9h .Gallery_item__P4qTJ{width:100%}.Gallery_inner__4FAPt.Gallery_left__zrrmv,.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transition:transform 0s ease-out;transition-duration:.2s}.Gallery_inner__4FAPt.Gallery_left__zrrmv{transform:translateZ(0)!important}.Gallery_inner__4FAPt.Gallery_right__dpZ-m{transform:translate3d(-66.66667%,0,0)!important}.Gallery_inner__4FAPt.Gallery_initialBounce__nZnKd{animation:Gallery_bounce__buqva 1s ease-out}.Gallery_item__P4qTJ{align-items:center;background-position:50%;background-repeat:no-repeat;background-size:contain;display:flex;justify-content:center;width:33.33333%}.Gallery_cover__ZGx5X .Gallery_item__P4qTJ{background-size:cover}.Gallery_item__P4qTJ>img{opacity:0;pointer-events:none;position:absolute}.Gallery_brokenImage__Bj3O-{height:50%;opacity:.2;width:50%}.Gallery_videoItem__06r39 .Gallery_video__vKK23{max-height:100%;max-width:100%}.Gallery_arr__knicI{background:transparent!important;height:100%;min-height:100%;opacity:0;padding:10%;position:absolute;top:0;transition:opacity .1s ease-out;z-index:1}.Gallery_arr__knicI.Gallery_left__zrrmv{justify-content:flex-start;left:0}.Gallery_arr__knicI.Gallery_right__dpZ-m{justify-content:flex-end;right:0;width:77%}.Gallery_arr__knicI:hover{opacity:1}@keyframes Gallery_bounce__buqva{0%{left:0}50%{left:-20%}80%{left:10%}to{left:0}}";
 var S = {"root":"Gallery_root__-Crit","item":"Gallery_item__P4qTJ","inner":"Gallery_inner__4FAPt","single":"Gallery_single__Wfd9h","left":"Gallery_left__zrrmv","right":"Gallery_right__dpZ-m","initialBounce":"Gallery_initialBounce__nZnKd","bounce":"Gallery_bounce__buqva","cover":"Gallery_cover__ZGx5X","brokenImage":"Gallery_brokenImage__Bj3O-","videoItem":"Gallery_videoItem__06r39","video":"Gallery_video__vKK23","arr":"Gallery_arr__knicI"};
 styleInject(css_248z);
 

package/dist/esm/src/components/GridLayout/GridLayout.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import S from './GridLayout.styl.js';
+
+function GridLayout({ children, colWidth = 300, gap = 'var(--p-2)', className, as: asProp, }) {
+    const As = asProp ?? 'div';
+    return (jsx(As, { className: cn(S.root, className), style: {
+            maxWidth: '100%',
+            gap,
+            display: 'grid',
+            gridTemplateColumns: `repeat(auto-fit, minmax(${colWidth}px, 1fr))`,
+        }, children: children }));
+}
+
+export { GridLayout };

package/dist/esm/src/components/GridLayout/GridLayout.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".GridLayout_root__tpdT0{display:grid;min-width:0;width:100%}";
+var S = {"root":"GridLayout_root__tpdT0"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Icon/icons/index.js

@@ -88,6 +88,8 @@ export { default as star } from './star.svg.js';
 export { default as stop } from './stop.svg.js';
 export { default as stopInCircle } from './stopInCircle.svg.js';
 export { default as syncArrows } from './syncArrows.svg.js';
+export { default as volume } from './volume.svg.js';
+export { default as volumeOff } from './volumeOff.svg.js';
 export { default as table } from './table.svg.js';
 export { default as telegram } from './telegram.svg.js';
 export { default as tool } from './tool.svg.js';

package/dist/esm/src/components/Icon/icons/volume.svg.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgVolume = function SvgVolume(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
+  })));
+};
+
+export { SvgVolume as default };

package/dist/esm/src/components/Icon/icons/volumeOff.svg.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgVolumeOff = function SvgVolumeOff(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "currentColor",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z"
+  })));
+};
+
+export { SvgVolumeOff as default };

package/dist/esm/src/components/InputFile/InputFile.js

@@ -44,7 +44,11 @@ import '../Flex/Flex.styl.js';
 import '../Form/Form.styl.js';
 import '../Form/Validator.js';
 import '../Form/SubmitButtons/SubmitButtons.styl.js';
+import '../ProgressCircular/ProgressCircular.styl.js';
+import '../Slider/Slider.styl.js';
+import '../VideoPlayer/VideoPlayer.styl.js';
 import '../Gallery/Gallery.styl.js';
+import '../GridLayout/GridLayout.styl.js';
 import '../Heading/Heading.js';
 import '../../services/i18n.js';
 import '../LightBox/LightBox.styl.js';
@@ -53,7 +57,6 @@ import '../Notifications/store.js';
 import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Progress/Progress.styl.js';
-import '../ProgressCircular/ProgressCircular.styl.js';
 import '../PromptComposer/PromptComposer.js';
 import '@tiptap/extensions';
 import '@tiptap/react';
@@ -64,7 +67,6 @@ import '../RadioGroup/RadioGroupContext.js';
 import '../RadioButton/RadioButton.styl.js';
 import '../RadioGroup/RadioGroup.styl.js';
 import '../Router/Router.js';
-import '../Slider/Slider.styl.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';
 import '../TextShimmer/TextShimmer.js';

package/dist/esm/src/components/Slider/Slider.js

@@ -9,27 +9,66 @@ const valueToPct = (value, min, max) => {
     const range = max - min;
     return range > 0 ? `${((value - min) / range) * 100}%` : '0%';
 };
-function Slider({ className, label, value, min = 0, max = 100, step, size = 'm', disabled = false, showGhost = false, markers, markerClassName, onMarkerClick, onChange, onInput, markerTooltipProps = {}, ...inputProps }) {
+function assignRef(ref, value) {
+    if (!ref)
+        return;
+    if (typeof ref === 'function')
+        ref(value);
+    else
+        ref.current = value;
+}
+function Slider({ className, label, value, defaultValue, inputRef, min = 0, max = 100, step, size = 'm', disabled = false, showGhost = false, vertical = false, markers, markerClassName, onMarkerClick, onChange, onInput, markerTooltipProps = {}, ...inputProps }) {
     const trackWrapRef = useRef(null);
+    const localInputRef = useRef(null);
     const [ghostRatio, setGhostRatio] = useState(null);
-    const progressPct = valueToPct(value, min, max);
-    const updateGhostFromPointer = useCallback((clientX) => {
+    const isControlled = value !== undefined;
+    const setInputRef = useCallback((el) => {
+        localInputRef.current = el;
+        assignRef(inputRef, el);
+    }, [inputRef]);
+    const getProgressPct = () => {
+        if (isControlled)
+            return valueToPct(value, min, max);
+        const live = localInputRef.current?.valueAsNumber;
+        if (Number.isFinite(live))
+            return valueToPct(live, min, max);
+        return valueToPct(defaultValue ?? min, min, max);
+    };
+    const updateGhostFromPointer = useCallback((clientX, clientY) => {
         if (disabled || !showGhost)
             return;
         const wrap = trackWrapRef.current;
         if (!wrap)
             return;
-        const { left, width } = wrap.getBoundingClientRect();
+        const { left, top, width, height } = wrap.getBoundingClientRect();
+        if (vertical) {
+            if (height <= 0)
+                return;
+            // writing-mode vertical-lr + direction rtl → max at top
+            setGhostRatio(clamp(1 - (clientY - top) / height, 0, 1));
+            return;
+        }
         if (width <= 0)
             return;
         setGhostRatio(clamp((clientX - left) / width, 0, 1));
-    }, [disabled, showGhost]);
+    }, [disabled, showGhost, vertical]);
     const clearGhost = useCallback(() => setGhostRatio(null), []);
-    const classes = cn(S.root, S[`size-${size}`], disabled && S.disabled, label && S.hasLabel, className);
-    return (jsxs("div", { className: classes, children: [label ? jsx("span", { className: S.label, children: label }) : null, jsxs("div", { ref: trackWrapRef, className: cn(S.trackWrap, markers?.length ? S.hasMarkers : null), onPointerEnter: showGhost ? e => updateGhostFromPointer(e.clientX) : undefined, onPointerMove: showGhost ? e => updateGhostFromPointer(e.clientX) : undefined, onPointerLeave: showGhost ? clearGhost : undefined, children: [jsxs("div", { className: S.trackRow, children: [jsx("input", { type: "range", className: S.control, style: { '--progress': progressPct }, value: value, min: min, max: max, step: step, disabled: disabled, onInput: e => {
+    const classes = cn(S.root, S[`size-${size}`], vertical && S.vertical, disabled && S.disabled, label && S.hasLabel, className);
+    const ghostStyle = vertical
+        ? { bottom: `${(ghostRatio ?? 0) * 100}%` }
+        : { left: `${(ghostRatio ?? 0) * 100}%` };
+    return (jsxs("div", { className: classes, children: [label ? jsx("span", { className: S.label, children: label }) : null, jsxs("div", { ref: trackWrapRef, className: cn(S.trackWrap, markers?.length ? S.hasMarkers : null), onPointerEnter: showGhost
+                    ? e => updateGhostFromPointer(e.clientX, e.clientY)
+                    : undefined, onPointerMove: showGhost
+                    ? e => updateGhostFromPointer(e.clientX, e.clientY)
+                    : undefined, onPointerLeave: showGhost ? clearGhost : undefined, children: [jsxs("div", { className: S.trackRow, children: [jsx("input", { type: "range", className: S.control, style: { '--progress': getProgressPct() }, ref: setInputRef, ...(isControlled
+                                    ? { value }
+                                    : { defaultValue: defaultValue ?? min }), min: min, max: max, step: step, disabled: disabled, "aria-orientation": vertical ? 'vertical' : 'horizontal', onInput: e => {
+                                    const next = Number(e.currentTarget.value);
+                                    e.currentTarget.style.setProperty('--progress', valueToPct(next, min, max));
                                     onInput?.(e);
-                                    onChange?.(Number(e.currentTarget.value), e);
-                                }, ...inputProps }), showGhost && ghostRatio !== null && !disabled ? (jsx("span", { className: S.ghost, style: { left: `${ghostRatio * 100}%` }, "aria-hidden": true })) : null] }), markers?.length ? (jsx("div", { className: S.markersRow, children: markers.map((marker, index) => {
+                                    onChange?.(next, e);
+                                }, ...(vertical ? { orient: 'vertical' } : null), ...inputProps }), showGhost && ghostRatio !== null && !disabled ? (jsx("span", { className: S.ghost, style: ghostStyle, "aria-hidden": true })) : null] }), markers?.length ? (jsx("div", { className: S.markersRow, children: markers.map((marker, index) => {
                             const markerButton = (jsx("button", { type: "button", className: cn(S.marker, markerClassName), "aria-label": typeof marker.label === 'string' ? marker.label : undefined, disabled: disabled, onPointerDown: e => {
                                     e.stopPropagation();
                                 }, onClick: e => {
@@ -37,7 +76,11 @@ function Slider({ className, label, value, min = 0, max = 100, step, size = 'm',
                                     if (!disabled)
                                         onMarkerClick?.(marker.value);
                                 } }));
-                            return (jsx("span", { className: S.markerWrap, style: { left: valueToPct(marker.value, min, max) }, children: marker.label ? (jsx(Tooltip, { direction: "bottom", ...markerTooltipProps, content: marker.label, children: markerButton })) : (markerButton) }, marker.key ?? index));
+                            const markerPos = valueToPct(marker.value, min, max);
+                            const markerStyle = vertical
+                                ? { bottom: markerPos }
+                                : { left: markerPos };
+                            return (jsx("span", { className: S.markerWrap, style: markerStyle, children: marker.label ? (jsx(Tooltip, { direction: "bottom", ...markerTooltipProps, content: marker.label, children: markerButton })) : (markerButton) }, marker.key ?? index));
                         }) })) : null] })] }));
 }
 

package/dist/esm/src/components/Slider/Slider.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Slider_root__hLZtd{color:var(--accent-color);position:relative;width:100%}.Slider_disabled__jz0lx{opacity:.4;pointer-events:none}.Slider_disabled__jz0lx .Slider_control__vtxup[disabled]{opacity:1}.Slider_hasLabel__Epyqi{align-items:center;display:flex;gap:var(--p-2)}.Slider_label__Gi7GI{color:inherit;font-size:inherit;white-space:nowrap}.Slider_trackWrap__PX861{display:flex;flex:1;flex-direction:column;min-width:0;position:relative}.Slider_hasMarkers__YfnMG{gap:var(--p-1)}.Slider_trackRow__hbQdR{align-items:center;display:flex;position:relative;width:100%}.Slider_markersRow__l-yga{flex-shrink:0;height:0;position:absolute;width:100%;z-index:2}.Slider_markerWrap__6hLJN{pointer-events:auto;position:absolute;top:-3px}.Slider_marker__vtOv9{background:var(--accent-color);border:none;border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-800);cursor:pointer;display:block;height:var(--marker-size);margin:0;padding:0;position:relative;width:var(--marker-size)}.Slider_marker__vtOv9:before{border-radius:50%;content:\"\";display:block;height:40px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:40px}.Slider_marker__vtOv9:hover{background:var(--active-color)}.Slider_marker__vtOv9:disabled{cursor:default;opacity:.5}.Slider_control__vtxup{--track-radius:50px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;cursor:pointer;height:var(--thumb-size);margin:0;padding:0;position:relative;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;width:100%;z-index:2}.Slider_control__vtxup:focus,.Slider_control__vtxup:hover{background-color:var(--active-color-alpha-100)}.Slider_control__vtxup[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Slider_control__vtxup:focus,.Slider_control__vtxup:hover{background:transparent!important}.Slider_control__vtxup:focus{box-shadow:inset 0 0 0 2px none}.Slider_control__vtxup::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--active-color) 0,var(--active-color) var(--progress),var(--accent-color-alpha-100) var(--progress),var(--accent-color-alpha-100) 100%);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--active-color);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:var(--thumb-size);margin-top:calc((var(--track-height) - var(--thumb-size))/2);width:var(--thumb-size)}.Slider_control__vtxup::-moz-range-track{background:var(--accent-color-alpha-100);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-moz-range-progress{background:var(--active-color);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-moz-range-thumb{background:var(--active-color);border:none;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size)}.Slider_ghost__tfPtm{background:var(--accent-color);border-radius:50%;height:var(--ghost-size);left:0;opacity:.45;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--ghost-size);z-index:2}.Slider_size-xs__v6UDK{--track-height:1px;--thumb-size:10px;--ghost-size:10px;--marker-size:6px;font-size:12px}.Slider_size-s__8hGSO{--track-height:2px;--thumb-size:12px;--ghost-size:12px;--marker-size:7px;font-size:14px}.Slider_size-s__8hGSO .Slider_markersRow__l-yga{top:-1px}.Slider_size-m__Dj7LT{--track-height:8px;--thumb-size:16px;--ghost-size:16px;--marker-size:12px;font-size:16px}.Slider_size-m__Dj7LT .Slider_markersRow__l-yga{top:1px}.Slider_size-l__Qi6tI{--track-height:12px;--thumb-size:20px;--ghost-size:20px;--marker-size:16px;font-size:18px}.Slider_size-l__Qi6tI .Slider_markersRow__l-yga{top:4px}.Slider_size-xl__85Gcz{--track-height:16px;--thumb-size:24px;--ghost-size:24px;--marker-size:20px;font-size:20px}.Slider_size-xl__85Gcz .Slider_markersRow__l-yga{top:5px}";
-var S = {"root":"Slider_root__hLZtd","disabled":"Slider_disabled__jz0lx","control":"Slider_control__vtxup","hasLabel":"Slider_hasLabel__Epyqi","label":"Slider_label__Gi7GI","trackWrap":"Slider_trackWrap__PX861","hasMarkers":"Slider_hasMarkers__YfnMG","trackRow":"Slider_trackRow__hbQdR","markersRow":"Slider_markersRow__l-yga","markerWrap":"Slider_markerWrap__6hLJN","marker":"Slider_marker__vtOv9","ghost":"Slider_ghost__tfPtm","size-xs":"Slider_size-xs__v6UDK","size-s":"Slider_size-s__8hGSO","size-m":"Slider_size-m__Dj7LT","size-l":"Slider_size-l__Qi6tI","size-xl":"Slider_size-xl__85Gcz"};
+var css_248z = ".Slider_root__hLZtd{color:var(--accent-color);position:relative;width:100%}.Slider_vertical__ZWdnf{display:flex;flex-direction:column;height:100%;min-height:0;width:auto}.Slider_vertical__ZWdnf.Slider_hasLabel__Epyqi{align-items:stretch;flex-direction:column}.Slider_vertical__ZWdnf .Slider_trackWrap__PX861{flex:1;height:100%;min-height:0;min-width:0;width:auto}.Slider_vertical__ZWdnf .Slider_trackRow__hbQdR{flex:1;height:100%;justify-content:center;min-height:0;width:auto}.Slider_vertical__ZWdnf .Slider_control__vtxup{direction:rtl;height:100%;width:var(--thumb-size);writing-mode:vertical-lr}.Slider_vertical__ZWdnf .Slider_control__vtxup::-webkit-slider-runnable-track{background:linear-gradient(to top,var(--active-color) 0,var(--active-color) var(--progress),var(--accent-color-alpha-100) var(--progress),var(--accent-color-alpha-100) 100%);height:100%;width:var(--track-height)}.Slider_vertical__ZWdnf .Slider_control__vtxup::-webkit-slider-thumb{margin-left:calc((var(--track-height) - var(--thumb-size))/2);margin-top:0}.Slider_vertical__ZWdnf .Slider_control__vtxup::-moz-range-progress,.Slider_vertical__ZWdnf .Slider_control__vtxup::-moz-range-track{height:100%;width:var(--track-height)}.Slider_vertical__ZWdnf .Slider_ghost__tfPtm{left:50%;top:auto;transform:translate(-50%,50%)}.Slider_vertical__ZWdnf .Slider_markersRow__l-yga{height:100%;left:auto;top:0;width:0}.Slider_vertical__ZWdnf .Slider_markerWrap__6hLJN{left:-3px;top:auto}.Slider_disabled__jz0lx{opacity:.4;pointer-events:none}.Slider_disabled__jz0lx .Slider_control__vtxup[disabled]{opacity:1}.Slider_hasLabel__Epyqi{align-items:center;display:flex;gap:var(--p-2)}.Slider_label__Gi7GI{color:inherit;font-size:inherit;white-space:nowrap}.Slider_trackWrap__PX861{display:flex;flex:1;flex-direction:column;min-width:0;position:relative}.Slider_hasMarkers__YfnMG{gap:var(--p-1)}.Slider_trackRow__hbQdR{align-items:center;display:flex;position:relative;width:100%}.Slider_markersRow__l-yga{flex-shrink:0;height:0;position:absolute;width:100%;z-index:2}.Slider_markerWrap__6hLJN{pointer-events:auto;position:absolute;top:-3px}.Slider_marker__vtOv9{background:var(--accent-color);border:none;border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-800);cursor:pointer;display:block;height:var(--marker-size);margin:0;padding:0;position:relative;width:var(--marker-size)}.Slider_marker__vtOv9:before{border-radius:50%;content:\"\";display:block;height:40px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:40px}.Slider_marker__vtOv9:hover{background:var(--active-color)}.Slider_marker__vtOv9:disabled{cursor:default;opacity:.5}.Slider_control__vtxup{--track-radius:50px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;cursor:pointer;height:var(--thumb-size);margin:0;padding:0;position:relative;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;width:100%;z-index:2}.Slider_control__vtxup:focus,.Slider_control__vtxup:hover{background-color:var(--active-color-alpha-100)}.Slider_control__vtxup[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Slider_control__vtxup:focus,.Slider_control__vtxup:hover{background:transparent!important}.Slider_control__vtxup:focus{box-shadow:inset 0 0 0 2px none}.Slider_control__vtxup::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--active-color) 0,var(--active-color) var(--progress),var(--accent-color-alpha-100) var(--progress),var(--accent-color-alpha-100) 100%);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--active-color);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:var(--thumb-size);margin-top:calc((var(--track-height) - var(--thumb-size))/2);width:var(--thumb-size)}.Slider_control__vtxup::-moz-range-track{background:var(--accent-color-alpha-100);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-moz-range-progress{background:var(--active-color);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-moz-range-thumb{background:var(--active-color);border:none;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size)}.Slider_ghost__tfPtm{background:var(--accent-color);border-radius:50%;height:var(--ghost-size);left:0;opacity:.45;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--ghost-size);z-index:2}.Slider_size-xs__v6UDK{--track-height:1px;--thumb-size:10px;--ghost-size:10px;--marker-size:6px;font-size:12px}.Slider_size-s__8hGSO{--track-height:2px;--thumb-size:12px;--ghost-size:12px;--marker-size:7px;font-size:14px}.Slider_size-s__8hGSO .Slider_markersRow__l-yga{top:-1px}.Slider_size-m__Dj7LT{--track-height:8px;--thumb-size:16px;--ghost-size:16px;--marker-size:12px;font-size:16px}.Slider_size-m__Dj7LT .Slider_markersRow__l-yga{top:1px}.Slider_size-l__Qi6tI{--track-height:12px;--thumb-size:20px;--ghost-size:20px;--marker-size:16px;font-size:18px}.Slider_size-l__Qi6tI .Slider_markersRow__l-yga{top:4px}.Slider_size-xl__85Gcz{--track-height:16px;--thumb-size:24px;--ghost-size:24px;--marker-size:20px;font-size:20px}.Slider_size-xl__85Gcz .Slider_markersRow__l-yga{top:5px}";
+var S = {"root":"Slider_root__hLZtd","vertical":"Slider_vertical__ZWdnf","hasLabel":"Slider_hasLabel__Epyqi","trackWrap":"Slider_trackWrap__PX861","trackRow":"Slider_trackRow__hbQdR","control":"Slider_control__vtxup","ghost":"Slider_ghost__tfPtm","markersRow":"Slider_markersRow__l-yga","markerWrap":"Slider_markerWrap__6hLJN","disabled":"Slider_disabled__jz0lx","label":"Slider_label__Gi7GI","hasMarkers":"Slider_hasMarkers__YfnMG","marker":"Slider_marker__vtOv9","size-xs":"Slider_size-xs__v6UDK","size-s":"Slider_size-s__8hGSO","size-m":"Slider_size-m__Dj7LT","size-l":"Slider_size-l__Qi6tI","size-xl":"Slider_size-xl__85Gcz"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/src/components/Tabs/Tabs.js

@@ -29,7 +29,9 @@ function Tabs(props) {
     const tabsButtons = items.map((params) => {
         const { id, label, forceRender, content, contentClassName: currContentClassName, ...rest } = params;
         const isActive = activeId === id;
-        const tabContent = typeof content === 'function' ? content() : content;
+        const tabContent = typeof content === 'function'
+            ? content()
+            : content;
         if (renderAll || forceRender || isActive) {
             tabsContent.push(jsx("div", { className: cn(contentClassName, currContentClassName, !isActive && S.inactive), children: tabContent }, id));
         }

package/dist/esm/src/components/VideoPlayer/VideoPlayer.helpers.js

@@ -0,0 +1,82 @@
+import LS from '../../tools/localStorage.js';
+
+const SEEK_MAX_SEC = 5;
+const SEEK_DURATION_RATIO = 0.1;
+const VOLUME_STEP = 0.1;
+const VOLUME_POPUP_HIDE_MS = 500;
+const KEYBOARD_DEBOUNCE_MS = 30;
+const TIME_PERSIST_DEBOUNCE_MS = 500;
+const DOUBLE_TAP_MS = 300;
+/** Keyboard seek step: min(5s, 10% of duration). */
+function getSeekDelta(duration) {
+    if (!Number.isFinite(duration) || duration <= 0)
+        return SEEK_MAX_SEC;
+    return Math.min(SEEK_MAX_SEC, duration * SEEK_DURATION_RATIO);
+}
+function timeToProgressPct(time, duration) {
+    if (!Number.isFinite(duration) || duration <= 0)
+        return '0%';
+    return `${(clamp(time, 0, duration) / duration) * 100}%`;
+}
+function getStorageKey(src, storageKey) {
+    return storageKey ?? `VideoPlayer:${src}`;
+}
+function loadStorage(key) {
+    const stored = LS.get(key);
+    if (!stored || typeof stored !== 'object')
+        return {};
+    return stored;
+}
+function saveStorage(key, data) {
+    const prev = loadStorage(key);
+    LS.set(key, { ...prev, ...data });
+}
+function formatTime(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0)
+        return '0:00';
+    const total = Math.floor(seconds);
+    const h = Math.floor(total / 3600);
+    const m = Math.floor((total % 3600) / 60);
+    const s = total % 60;
+    const mm = h > 0 ? String(m).padStart(2, '0') : String(m);
+    const ss = String(s).padStart(2, '0');
+    return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+function getBufferedPercent(video) {
+    if (!video || !video.duration || !video.buffered.length)
+        return 0;
+    try {
+        const end = video.buffered.end(video.buffered.length - 1);
+        return Math.min(100, Math.max(0, (end / video.duration) * 100));
+    }
+    catch {
+        return 0;
+    }
+}
+function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    const tag = target.tagName;
+    return (tag === 'INPUT' ||
+        tag === 'TEXTAREA' ||
+        tag === 'SELECT' ||
+        target.isContentEditable);
+}
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+/** Leading debounce: run immediately, then ignore calls for `ms`. */
+function leadingDebounce(fn, ms) {
+    let locked = false;
+    return ((...args) => {
+        if (locked)
+            return;
+        locked = true;
+        fn(...args);
+        setTimeout(() => {
+            locked = false;
+        }, ms);
+    });
+}
+
+export { DOUBLE_TAP_MS, KEYBOARD_DEBOUNCE_MS, SEEK_DURATION_RATIO, SEEK_MAX_SEC, TIME_PERSIST_DEBOUNCE_MS, VOLUME_POPUP_HIDE_MS, VOLUME_STEP, clamp, formatTime, getBufferedPercent, getSeekDelta, getStorageKey, isEditableTarget, leadingDebounce, loadStorage, saveStorage, timeToProgressPct };