@cloud-ru/ds-calendar 1.0.0

package/dist/esm/helperComponents/TimePickerDrum/TimePickerDrumWheelColumn.js

@@ -0,0 +1,219 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isBrowser } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { ROW_REL } from './constants.js';
+import styles from './styles.module.css';
+import { mod, nearestInSortedValues } from './utils.js';
+/** Инерция барабана (iOS-подобный «доворот»): затухание скорости за мс и пороги остановки/запуска. */
+const MOMENTUM_DECAY_PER_MS = 0.9966;
+/** Ниже этой |скорости| (px/ms) инерция останавливается и колонка доводится до ближайшего значения. */
+const MOMENTUM_STOP_VELOCITY = 0.02;
+/** Минимальная |скорость| отпускания (px/ms), запускающая инерцию; ниже — сразу snap. */
+const MOMENTUM_MIN_FLING_VELOCITY = 0.05;
+/**
+ * Колонка «барабана»: 5 строк в DOM, значения по кругу в пределах `options`.
+ */
+export const TimePickerDrumWheelColumn = forwardRef(function TimePickerDrumWheelColumn({ options, value, onChange, itemHeight, height, formatLabel, className, 'data-test-id': dataTestId }, ref) {
+    const n = options.length;
+    const [dragOffset, setDragOffset] = useState(0);
+    const dragOffsetRef = useRef(0);
+    const valueRef = useRef(value);
+    const optionsRef = useRef(options);
+    const startY = useRef(0);
+    const startOffset = useRef(0);
+    const wheelAccum = useRef(0);
+    const wheelTimer = useRef(undefined);
+    const viewportRef = useRef(null);
+    // Инерция: скорость отпускания (px/ms), отметка последнего move и хэндл rAF-цикла доворота.
+    const velocityRef = useRef(0);
+    const lastMoveRef = useRef({ y: 0, t: 0 });
+    const momentumRaf = useRef(0);
+    useEffect(() => {
+        dragOffsetRef.current = dragOffset;
+    }, [dragOffset]);
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
+    useEffect(() => {
+        optionsRef.current = options;
+    }, [options]);
+    useEffect(() => {
+        setDragOffset(0);
+    }, [value, options]);
+    const valueIdx = useMemo(() => {
+        const i = options.indexOf(value);
+        if (i >= 0) {
+            return i;
+        }
+        return options.indexOf(nearestInSortedValues(options, value));
+    }, [options, value]);
+    const stepsRounded = Math.round(dragOffset / itemHeight);
+    const previewIndex = n > 0 ? mod(valueIdx - stepsRounded, n) : 0;
+    const dragRemainderPx = dragOffset - stepsRounded * itemHeight;
+    const resolveIndex = useCallback((list, raw) => {
+        let idx = list.indexOf(raw);
+        if (idx >= 0) {
+            return idx;
+        }
+        idx = list.indexOf(nearestInSortedValues(list, raw));
+        return idx >= 0 ? idx : 0;
+    }, []);
+    const commitDrag = useCallback(() => {
+        const list = optionsRef.current;
+        const len = list.length;
+        if (len === 0) {
+            setDragOffset(0);
+            return null;
+        }
+        const off = dragOffsetRef.current;
+        const steps = Math.round(off / itemHeight);
+        let committed = null;
+        if (steps !== 0) {
+            const idx = resolveIndex(list, valueRef.current);
+            committed = list[mod(idx - steps, len)];
+            onChange(committed);
+        }
+        setDragOffset(0);
+        return committed;
+    }, [itemHeight, onChange, resolveIndex]);
+    const cancelMomentum = useCallback(() => {
+        if (momentumRaf.current) {
+            cancelAnimationFrame(momentumRaf.current);
+            momentumRaf.current = 0;
+        }
+    }, []);
+    /**
+     * Инерционный «доворот» после отпускания (iOS-подобный): колонка продолжает крутиться по скорости
+     * жеста с экспоненциальным затуханием, затем доводится до ближайшего значения (`commitDrag`).
+     * При скорости ниже порога снап происходит сразу. Использует timestamp из rAF (без `performance.now`).
+     */
+    const startMomentum = useCallback(() => {
+        const v0 = velocityRef.current;
+        velocityRef.current = 0;
+        if (!isBrowser() || !Number.isFinite(v0) || Math.abs(v0) < MOMENTUM_MIN_FLING_VELOCITY) {
+            commitDrag();
+            return;
+        }
+        let velocity = v0;
+        let last = 0;
+        const tick = (now) => {
+            if (last === 0) {
+                last = now;
+                if (isBrowser()) {
+                    momentumRaf.current = requestAnimationFrame(tick);
+                }
+                return;
+            }
+            const dt = Math.max(1, now - last);
+            last = now;
+            dragOffsetRef.current += velocity * dt;
+            setDragOffset(dragOffsetRef.current);
+            velocity *= MOMENTUM_DECAY_PER_MS ** dt;
+            if (Math.abs(velocity) < MOMENTUM_STOP_VELOCITY) {
+                momentumRaf.current = 0;
+                commitDrag();
+                return;
+            }
+            if (isBrowser()) {
+                momentumRaf.current = requestAnimationFrame(tick);
+            }
+        };
+        if (isBrowser()) {
+            momentumRaf.current = requestAnimationFrame(tick);
+        }
+    }, [commitDrag]);
+    const flushWheel = useCallback(() => {
+        const list = optionsRef.current;
+        const len = list.length;
+        if (len === 0) {
+            return null;
+        }
+        const steps = Math.round(wheelAccum.current / itemHeight);
+        wheelAccum.current = 0;
+        if (steps !== 0) {
+            const idx = resolveIndex(list, valueRef.current);
+            const committed = list[mod(idx - steps, len)];
+            onChange(committed);
+            return committed;
+        }
+        return null;
+    }, [itemHeight, onChange, resolveIndex]);
+    // Форсит завершение незакоммиченного жеста (инерция + колесо) синхронно и возвращает итоговое значение.
+    const flush = useCallback(() => {
+        cancelMomentum();
+        const wheeled = flushWheel();
+        const dragged = commitDrag();
+        return dragged ?? wheeled ?? valueRef.current;
+    }, [cancelMomentum, commitDrag, flushWheel]);
+    useImperativeHandle(ref, () => ({ flush }), [flush]);
+    useEffect(() => {
+        const el = viewportRef.current;
+        if (!el) {
+            return;
+        }
+        const onWheelNative = (event) => {
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            let delta = event.deltaY * 0.12;
+            if (Math.abs(delta) < itemHeight * 0.25) {
+                delta = itemHeight * 0.35 * Math.sign(event.deltaY);
+            }
+            wheelAccum.current += delta;
+            window.clearTimeout(wheelTimer.current);
+            wheelTimer.current = setTimeout(() => {
+                flushWheel();
+            }, 180);
+        };
+        el.addEventListener('wheel', onWheelNative, { passive: false });
+        return () => {
+            el.removeEventListener('wheel', onWheelNative);
+        };
+    }, [flushWheel, itemHeight]);
+    useEffect(() => () => {
+        window.clearTimeout(wheelTimer.current);
+        cancelMomentum();
+    }, [cancelMomentum]);
+    const onPointerDown = useCallback((event) => {
+        cancelMomentum();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        startY.current = event.clientY;
+        startOffset.current = dragOffsetRef.current;
+        velocityRef.current = 0;
+        lastMoveRef.current = { y: event.clientY, t: event.timeStamp };
+    }, [cancelMomentum]);
+    const onPointerMove = useCallback((event) => {
+        if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
+            return;
+        }
+        const dt = event.timeStamp - lastMoveRef.current.t;
+        if (dt > 0) {
+            velocityRef.current = (event.clientY - lastMoveRef.current.y) / dt;
+        }
+        lastMoveRef.current = { y: event.clientY, t: event.timeStamp };
+        setDragOffset(startOffset.current + (event.clientY - startY.current));
+    }, []);
+    const onPointerUp = useCallback((event) => {
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+    }, []);
+    const onPointerCancel = useCallback((event) => {
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+    }, []);
+    const trackTranslate = height / 2 - itemHeight / 2 - 2 * itemHeight + dragRemainderPx;
+    if (n === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: cn(className), "data-test-id": dataTestId, onLostPointerCapture: startMomentum, onPointerCancel: onPointerCancel, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, children: _jsx("div", { ref: viewportRef, className: styles.wheelViewport, style: {
+                height,
+                '--wheel-item': `${itemHeight}px`,
+            }, children: _jsxs("div", { className: styles.wheelFadingWrapper, children: [_jsx("div", { className: styles.wheelTrack, style: { '--wheel-translate': `${trackTranslate}px` }, children: ROW_REL.map(rel => {
+                            const cellValue = options[mod(previewIndex + rel, n)];
+                            const selected = rel === 0;
+                            return (_jsxs("div", { className: cn(styles.wheelRow, styles.itemCell, selected && styles.itemCellSelected), style: { '--wheel-item': `${itemHeight}px` }, children: [_jsx("span", { "aria-hidden": true, className: styles.stateLayer, "data-state": 'emptyNeutralOnBackground' }), _jsx("span", { className: styles.itemLabel, children: formatLabel(cellValue) })] }, rel));
+                        }) }), _jsx("div", { className: styles.wheelFadeTop, "aria-hidden": true }), _jsx("div", { className: styles.wheelFadeBottom, "aria-hidden": true }), _jsxs("div", { className: styles.wheelSlotLines, "aria-hidden": true, children: [_jsx("span", { className: styles.wheelSlotLine }), _jsx("span", { className: styles.wheelSlotLine })] })] }) }) }));
+});

package/dist/esm/helperComponents/TimePickerDrum/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const TEST_IDS: {
+    readonly root: "time-picker-drum";
+    readonly selectedDate: "time-picker-drum__selected-date";
+    readonly selectedTime: "time-picker-drum__selected-time";
+    readonly drum: "time-picker-drum__drum";
+    readonly hoursColumn: "time-picker-drum__hours";
+    readonly minutesColumn: "time-picker-drum__minutes";
+    readonly secondsColumn: "time-picker-drum__seconds";
+};
+export declare const ROW_REL: readonly [-2, -1, 0, 1, 2];
+export declare const noop: () => void;

package/dist/esm/helperComponents/TimePickerDrum/constants.js

@@ -0,0 +1,11 @@
+export const TEST_IDS = {
+    root: 'time-picker-drum',
+    selectedDate: 'time-picker-drum__selected-date',
+    selectedTime: 'time-picker-drum__selected-time',
+    drum: 'time-picker-drum__drum',
+    hoursColumn: 'time-picker-drum__hours',
+    minutesColumn: 'time-picker-drum__minutes',
+    secondsColumn: 'time-picker-drum__seconds',
+};
+export const ROW_REL = [-2, -1, 0, 1, 2];
+export const noop = () => { };

package/dist/esm/helperComponents/TimePickerDrum/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TimePickerDrum.js';
+export { TEST_IDS } from './constants.js';
+export * from './types.js';

package/dist/esm/helperComponents/TimePickerDrum/index.js

@@ -0,0 +1,3 @@
+export * from './TimePickerDrum.js';
+export { TEST_IDS } from './constants.js';
+export * from './types.js';

package/dist/esm/helperComponents/TimePickerDrum/styles.module.css

@@ -0,0 +1,297 @@
+@charset "UTF-8";
+.root{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+}
+.root[data-size=s]{
+  gap:var(--sn-calendar-anatomy-size-s-timePicker-gap, var(--sn-primitive-dimension-24, 24px));
+  padding:var(--sn-calendar-anatomy-size-s-timePicker-padding, var(--sn-primitive-dimension-8, 8px));
+}
+.root[data-size=m]{
+  gap:var(--sn-calendar-anatomy-size-m-timePicker-gap, var(--sn-primitive-dimension-32, 32px));
+  padding:var(--sn-calendar-anatomy-size-m-timePicker-padding, var(--sn-primitive-dimension-8, 8px));
+}
+.root[data-size=l]{
+  gap:var(--sn-calendar-anatomy-size-l-timePicker-gap, var(--sn-primitive-dimension-40, 40px));
+  padding:var(--sn-calendar-anatomy-size-l-timePicker-padding, var(--sn-primitive-dimension-8, 8px));
+}
+
+.selectedTime{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+}
+
+.root[data-size=s] .selectedTime{
+  gap:var(--sn-calendar-anatomy-size-s-timePicker-selectedTime-gap, var(--sn-primitive-dimension-8, 8px));
+}
+
+.root[data-size=m] .selectedTime{
+  gap:var(--sn-calendar-anatomy-size-m-timePicker-selectedTime-gap, var(--sn-primitive-dimension-8, 8px));
+}
+
+.root[data-size=l] .selectedTime{
+  gap:var(--sn-calendar-anatomy-size-l-timePicker-selectedTime-gap, var(--sn-primitive-dimension-8, 8px));
+}
+
+.dateLabel{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+  text-align:center;
+}
+.root[data-size=s] .dateLabel{
+  font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+}
+.root[data-size=m] .dateLabel{
+  font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.root[data-size=l] .dateLabel{
+  font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
+  line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+
+.timeRow{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.timeMain{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.root[data-size=s] .timeMain{
+  font-family:var(--sn-regular-display-s-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-s, var(--sn-brand-font-fontWeight-light-regular-display-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-display-s-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightS, var(--sn-primitive-font-lineHeight-by40, 48px)));
+  font-size:var(--sn-regular-display-s-fontSize, var(--sn-density-typography-roleDisplay-fontSizeS, var(--sn-primitive-font-fontSize-40, 40px)));
+  letter-spacing:var(--sn-regular-display-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize40, 20px));
+}
+.root[data-size=m] .timeMain{
+  font-family:var(--sn-regular-display-m-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-m, var(--sn-brand-font-fontWeight-light-regular-display-m, var(--sn-primitive-font-fontWeightValue-650, 650))));
+  line-height:var(--sn-regular-display-m-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightM, var(--sn-primitive-font-lineHeight-by48, 60px)));
+  font-size:var(--sn-regular-display-m-fontSize, var(--sn-density-typography-roleDisplay-fontSizeM, var(--sn-primitive-font-fontSize-48, 48px)));
+  letter-spacing:var(--sn-regular-display-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize48, 24px));
+}
+.root[data-size=l] .timeMain{
+  font-family:var(--sn-regular-display-l-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-l, var(--sn-brand-font-fontWeight-light-regular-display-l, var(--sn-primitive-font-fontWeightValue-700, 700))));
+  line-height:var(--sn-regular-display-l-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightL, var(--sn-primitive-font-lineHeight-by64, 72px)));
+  font-size:var(--sn-regular-display-l-fontSize, var(--sn-density-typography-roleDisplay-fontSizeL, var(--sn-primitive-font-fontSize-64, 64px)));
+  letter-spacing:var(--sn-regular-display-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize56, 28px));
+}
+
+.timeSeconds{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.root[data-size=s] .timeSeconds{
+  font-family:var(--sn-regular-display-s-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-s, var(--sn-brand-font-fontWeight-light-regular-display-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
+  line-height:var(--sn-regular-display-s-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightS, var(--sn-primitive-font-lineHeight-by40, 48px)));
+  font-size:var(--sn-regular-display-s-fontSize, var(--sn-density-typography-roleDisplay-fontSizeS, var(--sn-primitive-font-fontSize-40, 40px)));
+  letter-spacing:var(--sn-regular-display-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize40, 20px));
+}
+.root[data-size=m] .timeSeconds{
+  font-family:var(--sn-regular-display-m-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-m, var(--sn-brand-font-fontWeight-light-regular-display-m, var(--sn-primitive-font-fontWeightValue-650, 650))));
+  line-height:var(--sn-regular-display-m-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightM, var(--sn-primitive-font-lineHeight-by48, 60px)));
+  font-size:var(--sn-regular-display-m-fontSize, var(--sn-density-typography-roleDisplay-fontSizeM, var(--sn-primitive-font-fontSize-48, 48px)));
+  letter-spacing:var(--sn-regular-display-m-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize48, 24px));
+}
+.root[data-size=l] .timeSeconds{
+  font-family:var(--sn-regular-display-l-fontFamily, var(--sn-brand-font-fontFamily-regular-display, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-display-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-display-l, var(--sn-brand-font-fontWeight-light-regular-display-l, var(--sn-primitive-font-fontWeightValue-700, 700))));
+  line-height:var(--sn-regular-display-l-lineHeight, var(--sn-density-typography-roleDisplay-lineHeightL, var(--sn-primitive-font-lineHeight-by64, 72px)));
+  font-size:var(--sn-regular-display-l-fontSize, var(--sn-density-typography-roleDisplay-fontSizeL, var(--sn-primitive-font-fontSize-64, 64px)));
+  letter-spacing:var(--sn-regular-display-l-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-regular-display-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize56, 28px));
+}
+
+.drum{
+  display:flex;
+  flex-direction:row;
+  align-items:stretch;
+  width:100%;
+}
+.root[data-size=s] .drum{
+  max-width:240px;
+}
+.root[data-size=m] .drum{
+  max-width:240px;
+}
+.root[data-size=l] .drum{
+  max-width:300px;
+}
+
+.column{
+  -webkit-user-select:none;
+     -moz-user-select:none;
+          user-select:none;
+  flex:1 1 0%;
+  min-width:0;
+  -webkit-touch-callout:none;
+}
+
+.wheelViewport{
+  touch-action:none;
+  position:relative;
+  overflow:hidden;
+  box-sizing:border-box;
+  width:100%;
+}
+.wheelFadingWrapper{
+  position:relative;
+  overflow:hidden;
+  width:100%;
+  height:100%;
+}
+
+.wheelFadeTop,
+.wheelFadeBottom{
+  pointer-events:none;
+  position:absolute;
+  z-index:2;
+  right:0;
+  left:0;
+  height:40%;
+}
+
+.wheelFadeTop{
+  top:0;
+  background:linear-gradient(to bottom, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 0%, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 45%, transparent) 52%, transparent 100%);
+}
+
+.wheelFadeBottom{
+  bottom:0;
+  background:linear-gradient(to top, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 0%, color-mix(in srgb, var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd))) 45%, transparent) 52%, transparent 100%);
+}
+
+.wheelSlotLines{
+  pointer-events:none;
+  position:absolute;
+  z-index:3;
+  top:50%;
+  right:0;
+  left:0;
+  transform:translateY(-50%);
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  height:var(--wheel-item, 40px);
+}
+
+.wheelSlotLine{
+  height:0;
+  border-top:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+}
+
+.wheelTrack{
+  will-change:transform;
+  position:relative;
+  z-index:0;
+  transform:translate3d(0, var(--wheel-translate), 0);
+}
+
+.wheelRow{
+  flex-shrink:0;
+  width:100%;
+  height:var(--wheel-item);
+}
+
+.itemCell{
+  position:relative;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:100%;
+  margin:0;
+}
+.root[data-size=s] .itemCell{
+  min-width:var(--sn-calendar-anatomy-size-s-itemCalendar-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  min-height:var(--sn-calendar-anatomy-size-s-itemCalendar-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  padding-right:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-left:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=m] .itemCell{
+  min-width:var(--sn-calendar-anatomy-size-m-itemCalendar-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  min-height:var(--sn-calendar-anatomy-size-m-itemCalendar-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  padding-right:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-left:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=l] .itemCell{
+  min-width:var(--sn-calendar-anatomy-size-l-itemCalendar-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  min-height:var(--sn-calendar-anatomy-size-l-itemCalendar-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  padding-right:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding-left:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+}
+
+.stateLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  visibility:initial;
+}
+.stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+
+.itemLabel{
+  position:relative;
+  text-align:center;
+}
+.root[data-size=s] .itemCell .itemLabel{
+  font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
+}
+.root[data-size=m] .itemCell .itemLabel{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.root[data-size=l] .itemCell .itemLabel{
+  font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+  font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
+  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
+}
+.itemCellSelected .itemLabel{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.itemCell:not(.itemCellSelected) .itemLabel{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}

package/dist/esm/helperComponents/TimePickerDrum/types.d.ts

@@ -0,0 +1,59 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { Size } from '../../types.js';
+/**
+ * Ограничения допустимых значений в колонках барабана времени.
+ * Приоритет: непустой whitelist `allowed*` для соответствующей колонки; иначе — нижняя граница `min*`; иначе — полный диапазон.
+ */
+export type TimePickerDrumCustomOptions = {
+    /** Whitelist часов (0–23): в колонке часов доступны только перечисленные значения. */
+    allowedHours?: number[];
+    /** Whitelist минут (0–59): в колонке минут доступны только перечисленные значения. */
+    allowedMinutes?: number[];
+    /** Whitelist секунд (0–59): в колонке секунд доступны только перечисленные значения. */
+    allowedSeconds?: number[];
+    /** Нижняя граница часов: доступны значения от этого часа до 23 включительно. */
+    minHour?: number;
+    /** Нижняя граница минут: доступны значения от этой минуты до 59 включительно. */
+    minMinute?: number;
+    /** Нижняя граница секунд: доступны значения от этой секунды до 59 включительно. */
+    minSecond?: number;
+};
+export type TimePickerDrumProps = WithSupportProps<{
+    /** Размер по оси Figma `size` календаря (высота строк барабана и отступы). */
+    size?: Size;
+    /** Показывать третью колонку секунд (`secondsList` в макете). Если `false`, колонка скрыта и `onSecondsChange` не используется. */
+    showSeconds?: boolean;
+    /** Текст даты над дисплеем времени (локализуется снаружи). В подписи выводится только дата; время — в `timeRow`. Допускается ISO или строка, распознаваемая `Date.parse`. */
+    selectedDateLabel?: string;
+    /** Текущий выбранный час (0–23), контролируемое значение колонки часов. */
+    hours: number;
+    /** Текущая выбранная минута (0–59), контролируемое значение колонки минут. */
+    minutes: number;
+    /** Текущая выбранная секунда (0–59), контролируемое значение колонки секунд. Учитывается при `showSeconds === true`. */
+    seconds?: number;
+    /**
+     * Вызывается при смене часа после жеста (отпускание указателя / `lostpointercapture`) или после паузы при прокрутке колесом,
+     * а также при автоподгонке под `customOptions`. В контролируемом режиме обработчик обязан записать переданный `value` в состояние,
+     * иначе эффект подгонки может вызываться на каждом рендере.
+     */
+    onHoursChange(value: number): void;
+    /**
+     * Вызывается при смене минуты после жеста или после паузы при прокрутке колесом, а также при автоподгонке под `customOptions`.
+     * В контролируемом режиме обработчик обязан записать переданный `value` в состояние, иначе эффект подгонки может вызываться на каждом рендере.
+     */
+    onMinutesChange(value: number): void;
+    /**
+     * Вызывается при смене секунды после жеста или после паузы при прокрутке колесом, а также при автоподгонке под `customOptions`.
+     * Нужен при `showSeconds === true`. В контролируемом режиме обработчик обязан записать переданный `value` в состояние,
+     * иначе эффект подгонки может вызываться на каждом рендере.
+     */
+    onSecondsChange?(value: number): void;
+    /**
+     * Ограничение допустимых значений в колонках: whitelist (`allowed*`) или нижняя граница (`min*`).
+     * Если задан непустой `allowed*` после нормализации, для этой колонки используется только он; иначе при наличии `min*` — диапазон от `min` до максимума (часы 0–23, минуты и секунды 0–59).
+     * При несовпадении текущего `hours` / `minutes` / `seconds` с допустимым набором компонент подставит ближайшее допустимое значение через соответствующий `on*Change`.
+     */
+    customOptions?: TimePickerDrumCustomOptions;
+    /** Дополнительный CSS-класс корневого контейнера барабана. */
+    className?: string;
+}>;

package/dist/esm/helperComponents/TimePickerDrum/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/helperComponents/TimePickerDrum/utils.d.ts

@@ -0,0 +1,36 @@
+import { Size } from '../../types.js';
+/**
+ * Допустимые значения колонки: whitelist `allowed` (если после фильтра непустой),
+ * иначе диапазон от `min` до конца (`0 .. fullCount - 1`), иначе полный диапазон.
+ */
+export declare function buildColumnValues(fullCount: number, allowed?: number[], min?: number): number[];
+/** `values` — отсортированный по возрастанию список без дубликатов. */
+export declare function nearestInSortedValues(values: number[], target: number): number;
+/**
+ * Математический остаток `n` по модулю `m`: результат всегда в диапазоне `[0, m - 1]` при `m > 0`,
+ * в том числе для отрицательных и дробных `n` (после `%` в JS). Нужен для циклического индекса в колонке барабана.
+ *
+ * @param n делимое (часто индекс со сдвигом)
+ * @param m положительный модуль (длина списка `options`)
+ */
+export declare function mod(n: number, m: number): number;
+/**
+ * Форматирует числовую часть времени для отображения: целое приводится к строке с ведущим нулём до двух знаков (`0` → `"00"`, `9` → `"09"`).
+ * Используется для часов, минут и секунд в дисплее и в подписях ячеек барабана.
+ *
+ * @param value целое в допустимом диапазоне колонки (часы, минуты или секунды)
+ */
+export declare function formatDisplayPart(value: number): string;
+/** В блоке подписи показываем только календарную часть (время — в `timeRow`). */
+export declare function formatSelectedDateLabelForDisplay(text: string): string;
+/**
+ * Геометрия барабана времени по размеру календаря: высота одной строки (`itemHeight`) и высота окна колонок (`pickerHeight`) в пикселях.
+ * Соответствует ступенчатым значениям для `s` / `m` / `l` из дизайн-токенов `TimePickerDrum`.
+ *
+ * @param size размер по оси Figma (`SIZE.S` | `SIZE.M` | `SIZE.L`)
+ * @returns `itemHeight` — шаг строки и дискретизации жеста; `pickerHeight` — высота видимой области колонки
+ */
+export declare function getSizeLimits(size: Size): {
+    itemHeight: number;
+    pickerHeight: number;
+};