@cloud-ru/ds-calendar 1.0.0

package/dist/esm/helperComponents/Item/Item.d.ts

@@ -0,0 +1,21 @@
+import { Cell, Size } from '../../types.js';
+type RequiredCellProps = Pick<Cell, 'label'>;
+type OptionalCellProps = Partial<Omit<Cell, 'label'>>;
+export type CalendarItemProps = RequiredCellProps & OptionalCellProps & {
+    /**
+     * Сегмент для `data-test-id` (`getTestId(segment)`). По умолчанию `item`;
+     * подписи дней недели в `WeekRow` используют `header-item`.
+     */
+    testIdSegment?: string;
+    /** Размер */
+    size: Size;
+    /**
+     * Отображается ли в интерфейсе (ячейка без содержимого для мобильной сетки)
+     * @default true
+     */
+    visible?: boolean;
+    /** CSS-класс */
+    className?: string;
+};
+export declare function Item({ label, testIdSegment, size, checked, rangePosition, disabled, holiday, another, current, visible, className, tabIndex, address, date, onSelect, onPreselect, onLeave, onKeyDown, }: CalendarItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/Item/Item.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { focusWithoutScroll, useLayoutEffect } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useRef } from 'react';
+import { AUTOFOCUS, RANGE_POSITION } from '../../constants.js';
+import { useCalendarContext } from '../../hooks/index.js';
+import { stringifyAddress } from '../../utils.js';
+import { useKeyboardFocus } from './hooks.js';
+import styles from './styles.module.css';
+export function Item({ label, testIdSegment, size, checked, rangePosition = RANGE_POSITION.Out, disabled, holiday, another, current, visible = true, className, tabIndex, address, date, onSelect, onPreselect, onLeave, onKeyDown, }) {
+    const ref = useRef(null);
+    const { focus, setFocus, getTestId } = useCalendarContext();
+    const dataTestId = getTestId(testIdSegment ?? 'item');
+    const navigationEnabled = Boolean(address);
+    const keyDownHandler = useKeyboardFocus({
+        address: address ?? [0, 0],
+        onKeyDown,
+        enabled: navigationEnabled,
+    });
+    useLayoutEffect(() => {
+        if (!address) {
+            return;
+        }
+        if (stringifyAddress(address) === focus) {
+            // preventScroll: ячейка всегда видна в открытом календаре; без него браузер при
+            // программном focus прокручивает страницу к ячейке (виден как «скролл от стрелок»).
+            focusWithoutScroll(ref.current);
+        }
+    }, [focus, address]);
+    useLayoutEffect(() => {
+        if (!address) {
+            return;
+        }
+        if (tabIndex === 0 && focus === AUTOFOCUS) {
+            focusWithoutScroll(ref.current);
+        }
+    }, [focus, tabIndex, address]);
+    const attributes = {
+        'data-size': size,
+        'data-visible': visible || undefined,
+        'data-checked': checked || undefined,
+        'data-disabled': disabled || undefined,
+        'data-another': another || undefined,
+        'data-holiday': holiday || undefined,
+        'data-current': current || undefined,
+        'data-range-position': rangePosition,
+    };
+    const handleSelect = () => {
+        if (!disabled && date && onSelect) {
+            onSelect(date);
+        }
+    };
+    const showMarker = !disabled && !another && visible && current;
+    return (_jsx("div", { className: cn(styles.root, className), ...attributes, children: _jsxs("button", { type: 'button', "aria-disabled": disabled, className: styles.container, onClick: handleSelect, onMouseEnter: () => !disabled && date && onPreselect?.(date), onFocus: () => {
+                if (address) {
+                    setFocus(stringifyAddress(address));
+                }
+                if (!disabled && date) {
+                    onPreselect?.(date);
+                }
+            }, onMouseLeave: onLeave, onBlur: () => {
+                if (address) {
+                    setFocus(undefined);
+                }
+                onLeave?.();
+            }, onKeyDown: keyDownHandler, ref: ref, "data-disabled": attributes['data-disabled'], "data-another": attributes['data-another'], "data-checked": attributes['data-checked'], "data-range-position": attributes['data-range-position'], ...(dataTestId ? { 'data-test-id': dataTestId } : {}), tabIndex: tabIndex, children: [_jsx("div", { className: styles.stateLayer, "data-state": checked && (!another || rangePosition !== RANGE_POSITION.Out)
+                        ? 'activatedOnBackground'
+                        : 'emptyNeutralOnBackground' }), _jsxs("div", { className: styles.labelWrapper, children: [_jsx("span", { className: styles.label, "data-disabled": attributes['data-disabled'], "data-another": attributes['data-another'], "data-checked": attributes['data-checked'], "data-range-position": attributes['data-range-position'], "data-holiday": attributes['data-holiday'], children: label }), showMarker && (_jsx("div", { className: styles.marker, children: _jsx("div", { className: styles.markerLine, "data-checked": attributes['data-checked'], "data-range-position": attributes['data-range-position'], "data-holiday": attributes['data-holiday'] }) }))] }), _jsx("div", { className: styles.focusLayer })] }) }));
+}

package/dist/esm/helperComponents/Item/hooks.d.ts

@@ -0,0 +1,30 @@
+import { KeyboardEvent, KeyboardEventHandler } from 'react';
+/**
+ * Параметры хука {@link useKeyboardFocus}.
+ */
+type UseKeyboardFocusProps = {
+    /** Индекс строки и столбца `[row, column]` ячейки в сетке текущего представления (`viewMode`). */
+    address: [number, number];
+    /** Дополнительный обработчик клавиш; вызывается до встроенной навигации по сетке. */
+    onKeyDown?: KeyboardEventHandler;
+    /**
+     * Включить встроенную навигацию (стрелки, Tab по правилам контекста календаря).
+     * При `false` остаётся только вызов `onKeyDown` — например, если у ячейки нет адреса в сетке и перемещаться стрелками некуда.
+     */
+    enabled: boolean;
+};
+/**
+ * Возвращает мемоизированный обработчик `onKeyDown` для клавиатурной навигации по ячейкам сетки календаря.
+ *
+ * Сначала вызывается переданный `onKeyDown` (если есть). Затем при `enabled === true` обрабатываются:
+ * `ArrowLeft` / `ArrowRight` — сдвиг фокуса по колонкам в пределах текущего `viewMode`;
+ * `ArrowUp` / `ArrowDown` — сдвиг по строкам; на границе сетки меняется `viewShift` и фокус переносится на противоположную строку той же колонки;
+ * `Tab` без Shift — в режимах, отличных от месячного вида в `CALENDAR_MODE.DateTime`, вызывается `onFocusLeave('next')` для выхода из сетки.
+ *
+ * @param props.address Координаты ячейки `[row, column]` в сетке текущего представления.
+ * @param props.onKeyDown Дополнительный обработчик клавиш; выполняется до встроенной навигации.
+ * @param props.enabled При `false` встроенная навигация стрелками и Tab не выполняется (остаётся только вызов `onKeyDown`).
+ * @returns Обработчик `KeyboardEvent<HTMLButtonElement>` для привязки к ячейке.
+ */
+export declare function useKeyboardFocus({ address: [row, column], onKeyDown, enabled }: UseKeyboardFocusProps): (e: KeyboardEvent<HTMLButtonElement>) => void;
+export {};

package/dist/esm/helperComponents/Item/hooks.js

@@ -0,0 +1,68 @@
+import { preventScrollOnArrowKeys } from '@cloud-ru/ds-utils';
+import { useCallback } from 'react';
+import { CALENDAR_MODE, GRID_SIZE, VIEW_MODE } from '../../constants.js';
+import { useCalendarContext } from '../../hooks/index.js';
+import { stringifyAddress } from '../../utils.js';
+/**
+ * Возвращает мемоизированный обработчик `onKeyDown` для клавиатурной навигации по ячейкам сетки календаря.
+ *
+ * Сначала вызывается переданный `onKeyDown` (если есть). Затем при `enabled === true` обрабатываются:
+ * `ArrowLeft` / `ArrowRight` — сдвиг фокуса по колонкам в пределах текущего `viewMode`;
+ * `ArrowUp` / `ArrowDown` — сдвиг по строкам; на границе сетки меняется `viewShift` и фокус переносится на противоположную строку той же колонки;
+ * `Tab` без Shift — в режимах, отличных от месячного вида в `CALENDAR_MODE.DateTime`, вызывается `onFocusLeave('next')` для выхода из сетки.
+ *
+ * @param props.address Координаты ячейки `[row, column]` в сетке текущего представления.
+ * @param props.onKeyDown Дополнительный обработчик клавиш; выполняется до встроенной навигации.
+ * @param props.enabled При `false` встроенная навигация стрелками и Tab не выполняется (остаётся только вызов `onKeyDown`).
+ * @returns Обработчик `KeyboardEvent<HTMLButtonElement>` для привязки к ячейке.
+ */
+export function useKeyboardFocus({ address: [row, column], onKeyDown, enabled = true }) {
+    const { viewMode, viewShift, setViewShift, setFocus, onFocusLeave, mode } = useCalendarContext();
+    const { rows, columns } = GRID_SIZE[viewMode];
+    return useCallback((e) => {
+        onKeyDown?.(e);
+        if (!enabled) {
+            return;
+        }
+        // Стрелки навигации по сетке гасим: без preventDefault нативное поведение прокручивает
+        // страницу (фокус в ячейке-кнопке, событие иначе уходит за календарь).
+        preventScrollOnArrowKeys(e);
+        switch (e.key) {
+            case 'ArrowLeft':
+                if (column) {
+                    setFocus(stringifyAddress([row, column - 1]));
+                }
+                return;
+            case 'ArrowRight':
+                if (column < columns - 1) {
+                    setFocus(stringifyAddress([row, column + 1]));
+                }
+                return;
+            case 'ArrowUp':
+                if (row) {
+                    setFocus(stringifyAddress([row - 1, column]));
+                }
+                else {
+                    setViewShift(viewShift - 1);
+                    setFocus(stringifyAddress([rows - 1, column]));
+                }
+                return;
+            case 'ArrowDown':
+                if (row < rows - 1) {
+                    setFocus(stringifyAddress([row + 1, column]));
+                }
+                else {
+                    setViewShift(viewShift + 1);
+                    setFocus(stringifyAddress([0, column]));
+                }
+                return;
+            case 'Tab':
+                if (!e.shiftKey && (mode !== CALENDAR_MODE.DateTime || viewMode !== VIEW_MODE.Month)) {
+                    onFocusLeave?.('next');
+                }
+                return;
+            default:
+            // do nothing
+        }
+    }, [column, columns, enabled, mode, onFocusLeave, onKeyDown, row, rows, setFocus, setViewShift, viewMode, viewShift]);
+}

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

@@ -0,0 +1 @@
+export * from './Item.js';

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

@@ -0,0 +1 @@
+export * from './Item.js';

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

@@ -0,0 +1,355 @@
+@charset "UTF-8";
+.stateLayer{
+  position:absolute;
+  width:100%;
+  height:100%;
+  visibility:initial;
+}
+
+.focusLayer{
+  position:absolute;
+  inset:0;
+  display:none;
+  width:100%;
+  height:100%;
+  border:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  border-radius:0;
+}
+
+.container{
+  position:relative;
+  display:flex;
+  flex:1 0 0;
+  align-items:center;
+  align-self:stretch;
+  justify-content:center;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  border:0 solid transparent;
+  background-color:transparent;
+}
+.container[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.container:focus-visible{
+  outline:none;
+}
+.container:focus-visible .focusLayer{
+  display:initial;
+}
+.container:not([data-disabled]){
+  cursor:pointer;
+}
+.container:not([data-disabled]) .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.container:not([data-disabled]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.container:not([data-disabled]) .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)));
+}
+.container:not([data-disabled]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.container:not([data-disabled]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.container:not([data-disabled]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.container:not([data-disabled]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.container:not([data-disabled]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.container:not([data-disabled]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container:not([data-disabled]):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.container:not([data-disabled]){
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=borderOnBackground], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=activatedOnBackground], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=versionOnColor], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=emptyVersionOnColor], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=inversionOnColor], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=emptyInversionOnColor], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container:not([data-disabled])[data-loading] .stateLayer[data-state=emptyDarkOnAccent], .container:not([data-disabled]):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .container:not([data-disabled])[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.container:not([data-disabled]):not([data-another])[data-checked]{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.container:not([data-disabled]):not([data-another])[data-range-position=in]{
+  background-color:transparent;
+}
+.container:not([data-disabled])[data-another][data-checked][data-range-position=start], .container:not([data-disabled])[data-another][data-checked][data-range-position=end], .container:not([data-disabled])[data-another][data-checked][data-range-position=start-end]{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+
+.label{
+  text-align:center;
+}
+.label[data-another]{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+.label[data-another][data-checked]:not([data-range-position=in], [data-range-position=out]){
+  color:var(--sn-theme-color-available-onComplementary, #ffffff);
+}
+.label[data-disabled]{
+  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
+}
+.label:not([data-disabled], [data-another])[data-checked]:not([data-range-position=in]){
+  color:var(--sn-theme-color-available-onComplementary, #ffffff);
+}
+.label:not([data-disabled], [data-another])[data-checked][data-range-position=in]{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.label:not([data-disabled], [data-another])[data-checked][data-range-position=in][data-holiday]{
+  color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+}
+.label:not([data-disabled], [data-another]):not([data-checked]){
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.label:not([data-disabled], [data-another]):not([data-checked])[data-holiday]{
+  color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+}
+@media (hover: hover){
+  .label:not([data-disabled], [data-another]):not([data-holiday]){
+    color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  }
+  .label:not([data-disabled], [data-another])[data-holiday]{
+    color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+  }
+}
+
+.marker{
+  position:absolute;
+  right:0;
+  bottom:-2px;
+  left:0;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:center;
+}
+
+.markerLine{
+  flex-shrink:0;
+}
+.markerLine[data-holiday]{
+  background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.markerLine[data-checked]:not([data-range-position=in]){
+  background-color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+.markerLine[data-checked][data-range-position=in]{
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.markerLine[data-checked][data-range-position=in][data-holiday]{
+  background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+.markerLine:not([data-checked]){
+  background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+.markerLine:not([data-checked])[data-holiday]{
+  background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+
+.labelWrapper{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+}
+
+.root{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+.root:not([data-visible]){
+  pointer-events:none;
+  visibility:hidden;
+}
+.root:not([data-visible]) .stateLayer{
+  display:none;
+}
+.root[data-disabled] .stateLayer{
+  display:none;
+}
+.root[data-size=s]{
+  min-height:var(--sn-calendar-anatomy-size-s-itemCalendar-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  min-width:var(--sn-calendar-anatomy-size-s-itemCalendar-minWidth, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+}
+.root[data-size=s] .container{
+  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=s] .container[data-range-position=start]{
+  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px))) 0 0 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=s] .container[data-range-position=in]{
+  border-radius:0;
+}
+.root[data-size=s] .container[data-range-position=end]{
+  border-radius:0 var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px))) var(--sn-calendar-anatomy-size-s-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-s, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.root[data-size=s] .container[data-range-position=out], .root[data-size=s] .container[data-range-position=start-end]{
+  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=s] .labelWrapper{
+  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)));
+  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)));
+}
+.root[data-size=s] .label{
+  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=s] .markerLine{
+  height:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
+  border-radius:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  width:var(--sn-calendar-anatomy-size-s-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-12, 12px));
+}
+.root[data-size=m]{
+  min-height:var(--sn-calendar-anatomy-size-m-itemCalendar-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  min-width:var(--sn-calendar-anatomy-size-m-itemCalendar-minWidth, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+}
+.root[data-size=m] .container{
+  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=m] .container[data-range-position=start]{
+  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px))) 0 0 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=m] .container[data-range-position=in]{
+  border-radius:0;
+}
+.root[data-size=m] .container[data-range-position=end]{
+  border-radius:0 var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px))) var(--sn-calendar-anatomy-size-m-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-m, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.root[data-size=m] .container[data-range-position=out], .root[data-size=m] .container[data-range-position=start-end]{
+  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=m] .labelWrapper{
+  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)));
+  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)));
+}
+.root[data-size=m] .label{
+  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=m] .markerLine{
+  height:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
+  border-radius:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  width:var(--sn-calendar-anatomy-size-m-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-16, 16px));
+}
+.root[data-size=l]{
+  min-height:var(--sn-calendar-anatomy-size-l-itemCalendar-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  min-width:var(--sn-calendar-anatomy-size-l-itemCalendar-minWidth, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+}
+.root[data-size=l] .container{
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=l] .container[data-range-position=start]{
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px))) 0 0 var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=l] .container[data-range-position=in]{
+  border-radius:0;
+}
+.root[data-size=l] .container[data-range-position=end]{
+  border-radius:0 var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px))) var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px))) 0;
+}
+.root[data-size=l] .container[data-range-position=out], .root[data-size=l] .container[data-range-position=start-end]{
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-borderRadius, var(--sn-brand-anatomy-radius-button-l, var(--sn-primitive-dimension-2, 2px)));
+}
+.root[data-size=l] .labelWrapper{
+  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)));
+  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)));
+}
+.root[data-size=l] .label{
+  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));
+}
+.root[data-size=l] .markerLine{
+  height:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-height, var(--sn-primitive-dimension-2, 2px));
+  border-radius:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-borderRadius, var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
+  width:var(--sn-calendar-anatomy-size-l-itemCalendar-container-labelWrapper-marker-width, var(--sn-primitive-dimension-20, 20px));
+}
+@media (hover: hover){
+  .root:hover:not([data-disabled], [data-another]) .container{
+    background-color:transparent;
+  }
+  .root:hover:not([data-disabled], [data-another]) .label:not([data-holiday]){
+    color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  }
+  .root:hover:not([data-disabled], [data-another]) .label[data-holiday]{
+    color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
+  }
+  .root:hover:not([data-disabled], [data-another]) .markerLine:not([data-holiday]){
+    background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  }
+  .root:hover:not([data-disabled], [data-another]) .markerLine[data-holiday]{
+    background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+  }
+}

package/dist/esm/helperComponents/MobileCalendar/MobileCalendar.d.ts

@@ -0,0 +1,25 @@
+import { BuildCellPropsFunction, CalendarMode, PresetsOptions, Range, Size } from '../../types.js';
+export type MobileCalendarProps = {
+    open: boolean;
+    onClose(): void;
+    mode: CalendarMode;
+    size?: Size;
+    today?: Date | number;
+    showHolidays?: boolean;
+    showSeconds?: boolean;
+    buildCellProps?: BuildCellPropsFunction;
+    locale?: Intl.Locale;
+    presets?: PresetsOptions;
+    value?: Range;
+    defaultValue?: Range;
+    onChangeValue(value: Range): void;
+    onApply?(): void;
+    onCurrent?(): void;
+    closeOnApply?: boolean;
+    closeOnPopstate?: boolean;
+    'data-test-id'?: string;
+};
+/**
+ * BottomSheet со скроллом периодов, дропдаун-шапкой уровня, футером. Один CalendarContext для всех экранов.
+ */
+export declare function MobileCalendar({ open, onClose, mode, size, today: todayProp, showHolidays, showSeconds, buildCellProps, locale: localeProp, presets, value: valueProp, defaultValue, onChangeValue, onApply, onCurrent, closeOnApply, closeOnPopstate, 'data-test-id': testId, }: MobileCalendarProps): import("react/jsx-runtime").JSX.Element;