@gravity-ui/date-components 1.0.0

package/dist/cjs/components/utils/mergeProps.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeProps = void 0;
+function mergeProps(...args) {
+    const result = Object.assign({}, args[0]);
+    for (let i = 1; i < args.length; i++) {
+        const props = args[i];
+        if (!props) {
+            continue;
+        }
+        for (const key of Object.keys(props)) {
+            const left = result[key];
+            const right = props[key];
+            if (typeof left === 'function' &&
+                typeof right === 'function' &&
+                key.startsWith('on') &&
+                key.charCodeAt(2) >= /* A */ 65 &&
+                key.charCodeAt(2) <= /* Z */ 90) {
+                result[key] = chain(left, right);
+            }
+            else if (key === 'className' &&
+                typeof left === 'string' &&
+                typeof right === 'string') {
+                result[key] = left + ' ' + right;
+            }
+            else if (key === 'controlProps' &&
+                typeof left === 'object' &&
+                typeof right === 'object') {
+                result[key] = mergeProps(left, right);
+            }
+            else {
+                result[key] = right === undefined ? left : right;
+            }
+        }
+    }
+    return result;
+}
+exports.mergeProps = mergeProps;
+function chain(...fns) {
+    return (...args) => {
+        for (const callback of fns) {
+            if (typeof callback === 'function') {
+                callback(...args);
+            }
+        }
+    };
+}

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);

package/dist/cjs/utils/cn.d.ts

@@ -0,0 +1,2 @@
+export declare const NAMESPACE = "g-date-";
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;

package/dist/cjs/utils/cn.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.block = exports.NAMESPACE = void 0;
+const classname_1 = require("@bem-react/classname");
+exports.NAMESPACE = 'g-date-';
+exports.block = (0, classname_1.withNaming)({ n: exports.NAMESPACE, e: '__', m: '_' });

package/dist/esm/components/Calendar/Calendar.css

@@ -0,0 +1,220 @@
+.g-date-calendar {
+  --_--calendar-padding: var(--g-date-calendar-padding, 8px);
+  --_--calendar-day-size: var(--g-date-calendar-day-size, 28px);
+  --_--calendar-days-gap: var(--g-date-calendar-days-gap, 2px);
+  --_--calendar-width: calc(
+      7 * var(--_--calendar-day-size) + 6 * var(--_--calendar-days-gap) + 2 *
+          var(--_--calendar-padding)
+  );
+  --_--calendar-grid-height: calc(
+      7 * var(--_--calendar-day-size) + 5 * var(--_--calendar-days-gap) +
+          var(--_--calendar-padding)
+  );
+  display: inline-block;
+  width: var(--_--calendar-width);
+}
+.g-date-calendar_size_l {
+  --g-date-calendar-day-size: 36px;
+}
+.g-date-calendar_size_xl {
+  --g-date-calendar-day-size: 42px;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.g-date-calendar__header {
+  display: flex;
+  padding: var(--_--calendar-padding) var(--_--calendar-padding) 0;
+}
+.g-date-calendar__years-label {
+  color: var(--g-color-text-secondary);
+}
+.g-date-calendar__controls {
+  margin-left: auto;
+}
+.g-date-calendar__grid {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: var(--_--calendar-grid-height);
+  user-select: none;
+}
+.g-date-calendar__content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: grid;
+  grid-template-rows: var(--_--calendar-day-size) 1fr;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 0 var(--_--calendar-padding) var(--_--calendar-padding);
+}
+.g-date-calendar__content_animation_forward {
+  transform: translateX(-100%);
+  animation: calendar-forward 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_forward.g-date-calendar__current-state {
+  left: -100%;
+}
+.g-date-calendar__content_animation_backward {
+  transform: translateX(0);
+  animation: calendar-backward 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_backward.g-date-calendar__current-state {
+  left: 100%;
+}
+.g-date-calendar__content_animation_zoom-in {
+  transform: scale();
+}
+.g-date-calendar__content_animation_zoom-in.g-date-calendar__previous-state {
+  animation: calendar-zoom-in-hiding 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_zoom-in.g-date-calendar__current-state {
+  animation: calendar-zoom-in-showing 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_zoom-out {
+  transform: scale();
+}
+.g-date-calendar__content_animation_zoom-out.g-date-calendar__current-state {
+  animation: calendar-zoom-out-showing 0.25s ease forwards;
+}
+.g-date-calendar__content_animation_zoom-out.g-date-calendar__previous-state {
+  animation: calendar-zoom-out-hiding 0.25s ease forwards;
+}
+@keyframes calendar-forward {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes calendar-backward {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes calendar-zoom-in-showing {
+  from {
+    opacity: 0;
+    transform: scale(2);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes calendar-zoom-in-hiding {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+@keyframes calendar-zoom-out-showing {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes calendar-zoom-out-hiding {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+.g-date-calendar__grid-rowgroup {
+  display: grid;
+  gap: var(--_--calendar-days-gap);
+}
+.g-date-calendar__grid-rowgroup_mode_months, .g-date-calendar__grid-rowgroup_mode_years {
+  grid-row: 1/-1;
+  padding: 12px 0 0;
+}
+.g-date-calendar__grid-row {
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  gap: var(--_--calendar-days-gap);
+}
+.g-date-calendar__weekday {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.g-date-calendar__weekday_weekend {
+  color: var(--g-color-text-danger);
+}
+.g-date-calendar__button {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  font-weight: var(--g-text-subheader-font-weight);
+  cursor: pointer;
+  border-radius: 4px;
+  outline: none;
+}
+.g-date-calendar__button:focus {
+  box-shadow: 0 0 0 2px var(--g-color-line-misc);
+}
+.g-date-calendar__button:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+.g-date-calendar__button:hover {
+  background-color: var(--g-color-base-generic);
+}
+.g-date-calendar__button_selected[class] {
+  background-color: var(--g-color-base-selection);
+}
+.g-date-calendar__button_selected.g-date-calendar__button_selection-start, .g-date-calendar__button_selected.g-date-calendar__button_selection-end {
+  background-color: var(--g-color-base-brand);
+}
+.g-date-calendar__button_weekend {
+  color: var(--g-color-text-danger);
+}
+.g-date-calendar__button_out-of-boundary {
+  font-weight: var(--g-text-body-font-weight);
+  opacity: 0.6;
+}
+.g-date-calendar__button_current::before {
+  position: absolute;
+  top: 50%;
+  display: block;
+  width: 4px;
+  height: 4px;
+  content: "";
+  border-radius: 50%;
+  background-color: var(--g-color-text-primary);
+  transform: translateY(8px);
+}
+.g-date-calendar__button_disabled {
+  font-weight: var(--g-text-body-font-weight);
+  pointer-events: none;
+  opacity: 0.6;
+}
+.g-date-calendar__button_unavailable:not(.g-date-calendar__button_disabled) {
+  font-weight: var(--g-text-body-font-weight);
+  cursor: default;
+  opacity: 0.5;
+  background-color: var(--g-color-base-generic);
+}

package/dist/esm/components/Calendar/Calendar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from '../types';
+import type { CalendarInstance, CalendarSize } from './CalendarBase';
+import type { CalendarStateOptions } from './hooks/useCalendarState';
+import './Calendar.css';
+export interface CalendarProps extends CalendarStateOptions, DomProps, StyleProps, FocusEvents, AccessibilityProps {
+    /**
+     * The size of the element.
+     * @default m
+     */
+    size?: CalendarSize;
+}
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarInstance>>;

package/dist/esm/components/Calendar/Calendar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { CalendarBase } from './CalendarBase';
+import { useCalendarState } from './hooks/useCalendarState';
+import './Calendar.css';
+export const Calendar = React.forwardRef(function Calendar(props, ref) {
+    const state = useCalendarState(props);
+    return _jsx(CalendarBase, Object.assign({ ref: ref }, props, { state: state }));
+});

package/dist/esm/components/Calendar/CalendarBase.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from '../types';
+import type { RangeCalendarState } from './hooks/types';
+import type { CalendarState } from './hooks/useCalendarState';
+import './Calendar.css';
+export type CalendarSize = 'm' | 'l' | 'xl';
+export interface CalendarInstance {
+    focus: () => void;
+}
+export interface CalendarBaseProps extends DomProps, StyleProps, FocusEvents, AccessibilityProps {
+    state: CalendarState | RangeCalendarState;
+    /**
+     * The size of the element.
+     * @default m
+     */
+    size?: CalendarSize;
+}
+export declare const CalendarBase: React.ForwardRefExoticComponent<CalendarBaseProps & React.RefAttributes<CalendarInstance>>;

package/dist/esm/components/Calendar/CalendarBase.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { ArrowToggle, Button } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
+import { useCalendarCellProps } from './hooks/useCalendarCellProps';
+import { useCalendarGridProps } from './hooks/useCalendarGridProps';
+import { useCalendarProps } from './hooks/useCalendarProps';
+import { getDaysInPeriod, getWeekDays } from './utils';
+import './Calendar.css';
+const b = block('calendar');
+export const CalendarBase = React.forwardRef(function Calendar(props, ref) {
+    const { state } = props;
+    const { calendarProps, modeButtonProps, nextButtonProps, previousButtonProps } = useCalendarProps(props, state);
+    React.useImperativeHandle(ref, () => ({
+        focus() {
+            state.setFocused(true);
+        },
+    }));
+    return (_jsxs("div", Object.assign({}, calendarProps, { className: b({ size: props.size }), children: [_jsxs("div", { className: b('header'), children: [_jsx(Button, Object.assign({}, modeButtonProps, { view: "flat", size: props.size, children: state.mode === 'years' ? (_jsx("span", { className: b('mode-label', b(`years-label`)), children: modeButtonProps.children }, "label")) : ([
+                            _jsx("span", { className: b('mode-label'), children: modeButtonProps.children }, "label"),
+                            _jsx(Button.Icon, { children: _jsx(ArrowToggle, { direction: "bottom" }) }, "icon"),
+                        ]) })), _jsxs("div", { className: b('controls'), children: [_jsx(Button, Object.assign({}, previousButtonProps, { view: "flat", size: props.size, children: _jsx(Button.Icon, { children: _jsx(ArrowToggle, { direction: "left" }) }) })), _jsx(Button, Object.assign({}, nextButtonProps, { view: "flat", size: props.size, children: _jsx(Button.Icon, { children: _jsx(ArrowToggle, { direction: "right" }) }) }))] })] }), _jsx(CalendarGrid, { state: state })] })));
+});
+function CalendarGrid({ state }) {
+    const [prevState, setPrevState] = React.useState(() => (Object.assign(Object.assign({}, state), { isFocused: false })));
+    const modeChanged = state.mode !== prevState.mode;
+    const startDateChanged = !state.startDate.isSame(prevState.startDate, 'days');
+    let animation;
+    if (modeChanged) {
+        if ((state.mode === 'days' && prevState.mode === 'months') ||
+            (state.mode === 'months' && prevState.mode === 'years')) {
+            animation = 'zoom-out';
+        }
+        else {
+            animation = 'zoom-in';
+        }
+    }
+    else if (startDateChanged) {
+        if (state.startDate.isBefore(prevState.startDate)) {
+            animation = 'forward';
+        }
+        else {
+            animation = 'backward';
+        }
+    }
+    const { gridProps } = useCalendarGridProps(state);
+    return (_jsxs("div", Object.assign({ className: b('grid') }, gridProps, { children: [animation && (_jsx(Content, { className: b('previous-state'), state: prevState, animation: animation })), _jsx(Content, { className: b('current-state'), state: state, animation: animation, onAnimationEnd: () => {
+                    setPrevState(Object.assign(Object.assign({}, state), { isFocused: false }));
+                } }, "current")] })));
+}
+function Content({ className, state, animation, onAnimationEnd }) {
+    return (_jsxs("div", { className: b('content', { animation }, className), onAnimationEnd: onAnimationEnd, role: "presentation", children: [state.mode === 'days' && _jsx(Weekdays, { state: state }), _jsx(CalendarGridCells, { state: state })] }));
+}
+function Weekdays({ state }) {
+    const weekdays = getWeekDays();
+    return (_jsx("div", { className: b('grid-row'), role: "row", children: weekdays.map((date) => {
+            return (_jsx("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": date.format('dddd'), children: date.format('dd') }, date.day()));
+        }) }));
+}
+function CalendarGridCells({ state }) {
+    const rowsInPeriod = state.mode === 'days' ? 6 : 4;
+    const columnsInRow = state.mode === 'days' ? 7 : 3;
+    const days = getDaysInPeriod(state.startDate, state.endDate, state.mode);
+    return (_jsx("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => (_jsx("div", { className: b('grid-row'), role: "row", children: days
+                .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
+                .map((date) => {
+                return _jsx(CalendarCell, { date: date, state: state }, date.unix());
+            }) }, rowIndex))) }));
+}
+function CalendarCell({ date, state }) {
+    const { cellProps, buttonProps, formattedDate, isDisabled, isSelected, isRangeSelection, isSelectionStart, isSelectionEnd, isOutsideCurrentRange, isUnavailable, isCurrent, isWeekend, } = useCalendarCellProps(date, state);
+    return (_jsx("div", Object.assign({}, cellProps, { children: _jsx("div", Object.assign({}, buttonProps, { className: b('button', {
+                disabled: isDisabled,
+                selected: isSelected,
+                'range-selection': isRangeSelection,
+                'selection-start': isSelectionStart,
+                'selection-end': isSelectionEnd,
+                'out-of-boundary': isOutsideCurrentRange,
+                unavailable: isUnavailable,
+                current: isCurrent,
+                weekend: isWeekend,
+            }), children: formattedDate })) })));
+}

package/dist/esm/components/Calendar/RangeCalendar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from '../types';
+import type { CalendarInstance, CalendarSize } from './CalendarBase';
+import type { RangeCalendarStateOptions } from './hooks/useRangeCalendarState';
+import './Calendar.css';
+export interface RangeCalendarProps extends RangeCalendarStateOptions, DomProps, StyleProps, FocusEvents, AccessibilityProps {
+    /**
+     * The size of the element.
+     * @default m
+     */
+    size?: CalendarSize;
+}
+export declare const RangeCalendar: React.ForwardRefExoticComponent<RangeCalendarProps & React.RefAttributes<CalendarInstance>>;

package/dist/esm/components/Calendar/RangeCalendar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { CalendarBase } from './CalendarBase';
+import { useRangeCalendarState } from './hooks/useRangeCalendarState';
+import './Calendar.css';
+export const RangeCalendar = React.forwardRef(function Calendar(props, ref) {
+    const state = useRangeCalendarState(props);
+    const handleBlur = (e) => {
+        var _a;
+        if (state.anchorDate) {
+            state.selectFocusedDate();
+        }
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
+    return _jsx(CalendarBase, Object.assign({ ref: ref }, props, { state: state, onBlur: handleBlur }));
+});

package/dist/esm/components/Calendar/hooks/types.d.ts

@@ -0,0 +1,124 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { InputBase, RangeValue } from '../../types';
+export type CalendarLayout = 'days' | 'months' | 'years';
+export interface CalendarStateOptionsBase extends InputBase {
+    /** The minimum allowed date that a user may select. */
+    minValue?: DateTime;
+    /** The maximum allowed date that a user may select. */
+    maxValue?: DateTime;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+    isDateUnavailable?: (date: DateTime) => boolean;
+    /** */
+    timeZone?: string;
+    /**
+     * Whether to automatically focus the calendar when it mounts.
+     * @default false
+     */
+    autoFocus?: boolean;
+    /** Controls the currently focused date within the calendar. */
+    focusedValue?: DateTime | null;
+    /** The date that is focused when the calendar first mounts (uncontrolled). */
+    defaultFocusedValue?: DateTime;
+    /** Handler that is called when the focused date changes. */
+    onFocusUpdate?: (date: DateTime) => void;
+    /** Controls what to show in calendar (days, months or years) */
+    mode?: CalendarLayout;
+    /** Initial mode to show in calendar (days, months or years) */
+    defaultMode?: CalendarLayout;
+    /** Handler that is called when the mode changes */
+    onUpdateMode?: (mode: CalendarLayout) => void;
+}
+interface CalendarStateBase {
+    /** Whether the calendar is disabled. */
+    readonly disabled?: boolean;
+    /** Whether the calendar is in a read only state. */
+    readonly readOnly?: boolean;
+    readonly timeZone?: string;
+    /** The minimum allowed date that a user may select. */
+    readonly minValue?: DateTime;
+    /** The maximum allowed date that a user may select. */
+    readonly maxValue?: DateTime;
+    /** The currently focused date. */
+    readonly focusedDate: DateTime;
+    /** Sets the focused date. */
+    setFocusedDate(date: DateTime): void;
+    /** Selects the currently focused date. */
+    selectFocusedDate(): void;
+    /** Selects the given date. */
+    selectDate(date: DateTime): void;
+    /** Moves focus to the next calendar date. */
+    focusNextCell(): void;
+    /** Moves focus to the previous calendar date. */
+    focusPreviousCell(): void;
+    /** Moves focus to the next row of dates, e.g. the next week. */
+    focusNextRow(): void;
+    /** Moves focus to the previous row of dates, e.g. the previous work. */
+    focusPreviousRow(): void;
+    /**
+     * Moves focus to the next page of dates, e.g. the next month.
+     * If the `larger` option is `true`, the focus is moved by the next larger unit.
+     * For example, if days are displayed, then focus moves to the next year.
+     */
+    focusNextPage(larger?: boolean): void;
+    /**
+     * Moves focus to the previous page of dates, e.g. the previous month.
+     * If the `larger` option is `true`, the focus is moved by the next larger unit.
+     * For example, if days are displayed, then focus moves to the previous year.
+     */
+    focusPreviousPage(larger?: boolean): void;
+    /** Moves focus to the start of the current section of dates, e.g. the start of the current month. */
+    focusSectionStart(): void;
+    /** Moves focus to the end of the current section of dates, e.g. the end of the current month month. */
+    focusSectionEnd(): void;
+    /** Switches to more detailed layout. */
+    zoomIn(): void;
+    /** Switches to less detailed layout. */
+    zoomOut(): void;
+    /** Whether focus is currently within the calendar. */
+    readonly isFocused: boolean;
+    /** Sets whether focus is currently within the calendar. */
+    setFocused(isFocused: boolean): void;
+    /** Returns whether the given date is invalid according to the `minValue` and `maxValue` props. */
+    isInvalid(date: DateTime): boolean;
+    /** Returns whether the previous page is allowed to be selected according to the `minValue` prop. */
+    isPreviousPageInvalid(): boolean;
+    /** Returns whether the next page is allowed to be selected according to the `maxValue` prop. */
+    isNextPageInvalid(): boolean;
+    /** Returns whether the given date is currently selected. */
+    isSelected(date: DateTime): boolean;
+    /** Returns whether the given date is unavailable according to the `isDateUnavailable` prop. */
+    isCellUnavailable(date: DateTime): boolean;
+    /** Returns whether the given date is currently focused. */
+    isCellFocused(date: DateTime): boolean;
+    /** Returns whether the given date is disabled according to the `minValue, `maxValue`, and `isDisabled` props. */
+    isCellDisabled(date: DateTime): boolean;
+    /** Returns whether the given date is weekend */
+    isWeekend(date: DateTime): boolean;
+    /** Current calendar layout */
+    readonly mode: CalendarLayout;
+    /** Sets calendar layout */
+    setMode(mode: CalendarLayout): void;
+    readonly startDate: DateTime;
+    readonly endDate: DateTime;
+}
+export interface CalendarState extends CalendarStateBase {
+    /** The currently selected date. */
+    readonly value?: DateTime | null;
+    /** Sets the currently selected date. */
+    setValue(value: DateTime): void;
+}
+export interface RangeCalendarState extends CalendarStateBase {
+    /** The currently selected range. */
+    readonly value?: RangeValue<DateTime> | null;
+    /** Sets the currently selected range. */
+    setValue(value: RangeValue<DateTime>): void;
+    /** The current anchor date that the user clicked on to begin range selection. */
+    readonly anchorDate: DateTime | undefined;
+    /** Sets the anchor date that the user clicked on to begin range selection. */
+    setAnchorDate(date: DateTime | undefined): void;
+    /** The currently highlighted date range. */
+    readonly highlightedRange: RangeValue<DateTime> | undefined;
+    /** Highlights the given date during selection, e.g. by hovering. */
+    highlightDate(date: DateTime): void;
+}
+export {};

package/dist/esm/components/Calendar/hooks/types.js

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

package/dist/esm/components/Calendar/hooks/useCalendarCellProps.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { CalendarState, RangeCalendarState } from './types';
+export declare function useCalendarCellProps(date: DateTime, state: CalendarState | RangeCalendarState): {
+    cellProps: React.HTMLAttributes<unknown>;
+    buttonProps: React.HTMLAttributes<unknown> & {
+        ref: React.Ref<HTMLDivElement>;
+    };
+    formattedDate: string;
+    isDisabled: boolean;
+    isSelected: boolean;
+    isRangeSelection: boolean;
+    isSelectionStart: boolean | undefined;
+    isSelectionEnd: boolean | undefined;
+    isOutsideCurrentRange: boolean;
+    isUnavailable: boolean;
+    isCurrent: boolean;
+    isWeekend: boolean;
+};