@pushwoosh/dumb-components 1.1.46 → 1.1.48

package/Calendar/CalendarDropdown/CalendarDropdown.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type CalendarDropdownProps } from './types';
+export declare const CalendarDropdown: FC<CalendarDropdownProps>;

package/Calendar/CalendarDropdown/CalendarDropdown.js

@@ -0,0 +1,158 @@
+import React, { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal, useClickAway, Vertical } from '@pushwoosh/kit-helpers';
+import { CalendarIcon } from '@pushwoosh/kit-icons';
+import { stringifyValue } from './helpers';
+import { DropdownRoot, PopoverContent } from './styles';
+import { Button } from '../../Button';
+import { Chip } from '../../Chip';
+import { CalendarSuperForm } from '../CalendarSuperForm';
+import { formatTimezoneShort } from '../helpers-tz';
+export const CalendarDropdown = props => {
+  const {
+    mode,
+    calendarProps
+  } = props;
+  const isRangePicker = mode === 'range-date' || mode === 'range-datetime';
+  const withTime = mode === 'single-datetime' || mode === 'range-datetime';
+  const rootRef = useRef(null);
+  const popoverRef = useRef(null);
+  const [isShaking, setIsShaking] = useState(false);
+  const [popoverPosition, setPopoverPosition] = useState(null);
+  const [value, setValue] = useState(props.value ?? (isRangePicker ? [] : undefined));
+  const initialTimezone = 'timezone' in calendarProps ? calendarProps.timezone : 'UTC';
+  const [timezone, setTimezone] = useState(initialTimezone);
+  const closePopover = () => {
+    setPopoverPosition(null);
+    setValue(props.value ?? (isRangePicker ? [] : undefined));
+    setTimezone(initialTimezone);
+  };
+  useClickAway(!!popoverPosition, popoverRef, closePopover);
+  const openPopover = () => {
+    if (rootRef.current) {
+      const rect = rootRef.current.getBoundingClientRect();
+      setPopoverPosition({
+        top: rect.bottom + 4,
+        left: rect.left
+      });
+    }
+  };
+  const onChangeHandler = val => {
+    var _props$onChange;
+    setValue(val);
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, val);
+  };
+  const presets = 'presets' in props ? props.presets : undefined;
+  const noValue = isRangePicker ? (value === null || value === void 0 ? void 0 : value.length) === 0 : !value;
+  let buttonText;
+  if (noValue) {
+    buttonText = isRangePicker ? 'Select period' : 'Select date';
+  } else {
+    buttonText = stringifyValue(value, withTime);
+    if (withTime) {
+      const timezoneShort = formatTimezoneShort(timezone);
+      buttonText += ` ${timezoneShort}`;
+    }
+  }
+  const popoverContent = popoverPosition && React.createElement(PopoverContent, {
+    ref: popoverRef,
+    "$isShaking": isShaking,
+    onAnimationEnd: () => setIsShaking(false),
+    style: {
+      top: `${popoverPosition.top}px`,
+      left: `${popoverPosition.left}px`
+    }
+  }, React.createElement(Vertical, null, presets && presets.length > 0 && React.createElement(Horizontal, {
+    "$padding": {
+      horizontal: 16,
+      vertical: 12
+    },
+    "$border": {
+      bottom: `1px solid ${Color.DIVIDER}`
+    },
+    "$justifyContent": "start",
+    "$gap": 4
+  }, presets.map((preset, i) => React.createElement(Chip, {
+    key: i,
+    onClick: () => onChangeHandler(preset.value)
+  }, preset.label))), React.createElement(Horizontal, {
+    "$padding": 16,
+    "$border": {
+      bottom: `1px solid ${Color.DIVIDER}`
+    }
+  }, mode === 'single-date' && React.createElement(CalendarSuperForm, {
+    mode: "single-date",
+    ...calendarProps,
+    value: value,
+    onChange: onChangeHandler
+  }), mode === 'single-datetime' && React.createElement(CalendarSuperForm, {
+    mode: "single-datetime",
+    ...calendarProps,
+    value: value,
+    onChange: onChangeHandler,
+    timezone: timezone,
+    onChangeTimezone: val => {
+      setTimezone(val);
+      if ('onChangeTimezone' in calendarProps) {
+        calendarProps.onChangeTimezone(val);
+      }
+    }
+  }), mode === 'range-date' && React.createElement(CalendarSuperForm, {
+    mode: "range-date",
+    ...calendarProps,
+    value: value,
+    onChange: onChangeHandler
+  }), mode === 'range-datetime' && React.createElement(CalendarSuperForm, {
+    mode: "range-datetime",
+    ...calendarProps,
+    value: value,
+    onChange: onChangeHandler,
+    timezone: timezone,
+    onChangeTimezone: val => {
+      setTimezone(val);
+      if ('onChangeTimezone' in calendarProps) {
+        calendarProps.onChangeTimezone(val);
+      }
+    }
+  })), React.createElement(Horizontal, {
+    "$padding": 16,
+    "$justifyContent": "end",
+    "$gap": 8
+  }, React.createElement(Button, {
+    color: "secondary",
+    size: "compact",
+    onClick: () => {
+      if (noValue) {
+        closePopover();
+      } else {
+        setValue(isRangePicker ? [] : undefined);
+        setTimezone(initialTimezone);
+      }
+    }
+  }, noValue ? 'Cancel' : 'Reset'), React.createElement(Button, {
+    color: "primary",
+    size: "compact",
+    onClick: () => {
+      const isInvalid = isRangePicker ? (value === null || value === void 0 ? void 0 : value.length) !== 2 : !value;
+      if (isInvalid) {
+        setIsShaking(true);
+      } else {
+        props.onSubmit(value, timezone);
+        closePopover();
+      }
+    }
+  }, "Apply"))));
+  return React.createElement(DropdownRoot, {
+    ref: rootRef
+  }, React.createElement(Button, {
+    type: "button",
+    color: "secondary",
+    icon: React.createElement(CalendarIcon, {
+      size: "medium",
+      view: "lined"
+    }),
+    onClick: () => popoverPosition ? closePopover() : openPopover(),
+    isOpen: !!popoverPosition
+  }, buttonText), popoverContent && createPortal(popoverContent, document.body));
+};

package/Calendar/CalendarDropdown/helpers.d.ts

@@ -0,0 +1,3 @@
+import { type DateStruct, type DateTimeStruct, type RangeValue, type SingleValue } from '../types';
+export declare function formatDate(val: DateStruct | DateTimeStruct, withTime?: boolean): string;
+export declare const stringifyValue: (value: SingleValue<DateStruct | DateTimeStruct> | RangeValue<DateStruct | DateTimeStruct>, withTime?: boolean) => string;

package/Calendar/CalendarDropdown/helpers.js

@@ -0,0 +1,29 @@
+export function formatDate(val, withTime = true) {
+  const date = new Date(val.year, val.month - 1, val.day, 'hour' in val ? val.hour : 0, 'minute' in val ? val.minute : 0);
+  if (withTime) {
+    return date.toLocaleString('en-US', {
+      month: 'short',
+      day: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
+  }
+  return date.toLocaleString('en-US', {
+    month: 'short',
+    day: '2-digit',
+    year: 'numeric'
+  });
+}
+export const stringifyValue = (value, withTime) => {
+  if (Array.isArray(value)) {
+    if (value.length === 0) return '';
+    if (value.length === 1) return formatDate(value[0], withTime);
+    if (value.length === 2) return `${formatDate(value[0], withTime)} – ${formatDate(value[1], withTime)}`;
+  }
+  if (value) {
+    return formatDate(value, withTime);
+  }
+  return '';
+};

package/Calendar/CalendarDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { CalendarDropdown } from './CalendarDropdown';
+export { type CalendarDropdownProps } from './types';

package/Calendar/CalendarDropdown/index.js

@@ -0,0 +1 @@
+export { CalendarDropdown } from './CalendarDropdown';

package/Calendar/CalendarDropdown/styles.d.ts

@@ -0,0 +1,61 @@
+export declare const DropdownRoot: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $justifyContent: string;
+}, "$gridAutoFlow" | "$justifyContent">;
+export declare const PopoverContent: import("styled-components").StyledComponent<"div", any, {
+    $isShaking?: boolean;
+}, never>;

package/Calendar/CalendarDropdown/styles.js

@@ -0,0 +1,16 @@
+import styled, { keyframes, css } from 'styled-components';
+import { Shadow, ShapeRadius, Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+const shakeAnimation = keyframes(["0%,100%{transform:translateX(0);}10%,30%,50%,70%,90%{transform:translateX(-4px);}20%,40%,60%,80%{transform:translateX(4px);}"]);
+export const DropdownRoot = styled(Horizontal).attrs({
+  $justifyContent: 'start'
+}).withConfig({
+  displayName: "DropdownRoot",
+  componentId: "sc-h6jz87-0"
+})(["position:relative;"]);
+export const PopoverContent = styled.div.withConfig({
+  displayName: "PopoverContent",
+  componentId: "sc-h6jz87-1"
+})(["position:fixed;border-radius:", ";border:1px solid ", ";overflow:hidden;box-shadow:", ";background:", ";z-index:1000000;", ""], ShapeRadius.CONTROL, Color.FORM, Shadow.REGULAR, Color.CLEAR, ({
+  $isShaking
+}) => $isShaking && css(["animation:", " 0.4s ease-in-out;"], shakeAnimation));

package/Calendar/CalendarDropdown/types.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from 'react';
+import type { CalendarRangeDateProps, CalendarRangeDateTimeProps, CalendarSingleDateProps, CalendarSingleDateTimeProps } from '../CalendarSuperForm/types';
+import type { DateStruct, DateTimeStruct, RangeValue, TzValue } from '../types';
+export type CalendarDropdownSingleDateProps = {
+    mode: 'single-date';
+    calendarProps: Omit<CalendarSingleDateProps, 'mode' | 'value' | 'onChange'>;
+    value?: DateStruct;
+    onChange?: (value: DateStruct) => void;
+    onSubmit: (value: DateStruct, tz: TzValue) => void;
+};
+export type CalendarDropdownSingleDateTimeProps = {
+    mode: 'single-datetime';
+    calendarProps: Omit<CalendarSingleDateTimeProps, 'mode' | 'value' | 'onChange'>;
+    value?: DateTimeStruct;
+    onChange?: (value: DateTimeStruct) => void;
+    onSubmit: (value: DateTimeStruct, tz: TzValue) => void;
+};
+export type CalendarDropdownRangeDateProps = {
+    mode: 'range-date';
+    calendarProps: Omit<CalendarRangeDateProps, 'mode' | 'value' | 'onChange'>;
+    value?: RangeValue<DateStruct>;
+    onChange?: (value: RangeValue<DateStruct>) => void;
+    onSubmit: (value: RangeValue<DateStruct>, tz: TzValue) => void;
+    presets?: Array<{
+        label: ReactNode | string;
+        value: [DateStruct, DateStruct];
+    }>;
+};
+export type CalendarDropdownRangeDateTimeProps = {
+    mode: 'range-datetime';
+    calendarProps: Omit<CalendarRangeDateTimeProps, 'mode' | 'value' | 'onChange'>;
+    value?: RangeValue<DateTimeStruct>;
+    onChange?: (value: RangeValue<DateTimeStruct>) => void;
+    onSubmit: (value: RangeValue<DateTimeStruct>, tz: TzValue) => void;
+    presets?: Array<{
+        label: ReactNode | string;
+        value: [DateTimeStruct, DateTimeStruct];
+    }>;
+};
+export type CalendarDropdownProps = CalendarDropdownSingleDateProps | CalendarDropdownSingleDateTimeProps | CalendarDropdownRangeDateProps | CalendarDropdownRangeDateTimeProps;

package/Calendar/CalendarDropdown/types.js

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

package/Calendar/CalendarMonth/CalendarMonth.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import type { MonthProps } from './types';
+export declare const CalendarMonth: FC<MonthProps>;

package/Calendar/CalendarMonth/CalendarMonth.js

@@ -0,0 +1,109 @@
+import React, { useMemo } from 'react';
+import { Columns } from '@pushwoosh/kit-helpers';
+import { CellBox, DayHeader } from './styles';
+import { addPeriod, differenceInDays, getLastDayOfMonth, getFirstDayOfWeek, isSamePeriod, compareStructs, pickDateStruct } from '../helpers';
+export const CalendarMonth = ({
+  month,
+  selectedDay,
+  highlightDay,
+  periodFrom,
+  periodTo,
+  disableOnAndBefore,
+  disableOnAndAfter,
+  disablePeriod,
+  onDaySelect,
+  onDayMouseEnter,
+  onDayMouseLeave,
+  firstDayOfWeek = 0
+}) => {
+  const [firstDayDate, days] = useMemo(() => {
+    const firstDayOfMonth = {
+      ...month,
+      day: 1
+    };
+    const lastDayOfMonth = getLastDayOfMonth(month);
+    const firstDayOfFirstWeek = getFirstDayOfWeek(firstDayOfMonth, firstDayOfWeek);
+    const firstDayOfLastWeek = getFirstDayOfWeek(lastDayOfMonth, firstDayOfWeek);
+    const daysInCalendar = differenceInDays(firstDayOfLastWeek, firstDayOfFirstWeek) + 7;
+    return [firstDayOfFirstWeek, daysInCalendar];
+  }, [month, firstDayOfWeek]);
+  const today = useMemo(() => {
+    const now = new Date();
+    return {
+      year: now.getFullYear(),
+      month: now.getMonth() + 1,
+      day: now.getDate()
+    };
+  }, []);
+  const dayLabels = firstDayOfWeek === 0 ? ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] : ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+  return React.createElement(Columns, {
+    "$sizes": 7,
+    "$gap": 2
+  }, dayLabels.map(l => React.createElement(DayHeader, {
+    key: l
+  }, l)), Array.from({
+    length: days
+  }).map((_, i) => {
+    const curDay = addPeriod(firstDayDate, 'day', i);
+    let variant;
+    if (!isSamePeriod(month, curDay, 'month')) {
+      if (periodFrom && periodTo && compareStructs(periodFrom, periodTo) !== 0 && !isSamePeriod(periodFrom, periodTo, 'month')) {
+        const currentMonthStruct = {
+          year: month.year,
+          month: month.month,
+          day: 1
+        };
+        const outdatedMonthStruct = {
+          year: curDay.year,
+          month: curDay.month,
+          day: 1
+        };
+        const periodFromMonthStruct = {
+          year: periodFrom.year,
+          month: periodFrom.month,
+          day: 1
+        };
+        const periodToMonthStruct = {
+          year: periodTo.year,
+          month: periodTo.month,
+          day: 1
+        };
+        const isCurrentMonthInPeriod = compareStructs(currentMonthStruct, periodFromMonthStruct) >= 0 && compareStructs(currentMonthStruct, periodToMonthStruct) <= 0;
+        const isOutdatedMonthInPeriod = compareStructs(outdatedMonthStruct, periodFromMonthStruct) >= 0 && compareStructs(outdatedMonthStruct, periodToMonthStruct) <= 0;
+        if (isCurrentMonthInPeriod && isOutdatedMonthInPeriod) {
+          variant = 'periodOutdated';
+        } else {
+          variant = 'outdated';
+        }
+      } else {
+        variant = 'outdated';
+      }
+    } else if (disableOnAndBefore && compareStructs(curDay, disableOnAndBefore) <= 0 || disableOnAndAfter && compareStructs(curDay, disableOnAndAfter) >= 0 || disablePeriod && compareStructs(curDay, disablePeriod[0]) >= 0 && compareStructs(curDay, disablePeriod[1]) <= 0) {
+      if (periodFrom && isSamePeriod(curDay, periodFrom, 'day')) {
+        variant = 'selectedDisabled';
+      } else {
+        variant = 'disabled';
+      }
+    } else if (selectedDay && isSamePeriod(curDay, selectedDay, 'day')) {
+      variant = 'selected';
+    } else if (periodFrom && periodTo && isSamePeriod(periodFrom, periodTo, 'day') && isSamePeriod(curDay, periodFrom, 'day')) {
+      variant = 'selected';
+    } else if (periodFrom && isSamePeriod(curDay, periodFrom, 'day')) {
+      variant = 'periodFrom';
+    } else if (periodTo && isSamePeriod(curDay, periodTo, 'day')) {
+      variant = 'periodTo';
+    } else if (highlightDay && isSamePeriod(curDay, highlightDay, 'day')) {
+      variant = 'highlighted';
+    } else if (periodFrom && periodTo && compareStructs(curDay, periodFrom) > 0 && compareStructs(curDay, periodTo) < 0) {
+      variant = 'period';
+    }
+    return React.createElement(CellBox, {
+      key: `${curDay.year}-${curDay.month}-${curDay.day}`,
+      "$variant": variant,
+      "$isToday": isSamePeriod(curDay, today, 'day'),
+      onClick: () => onDaySelect(pickDateStruct(curDay)),
+      onMouseEnter: onDayMouseEnter ? () => onDayMouseEnter(curDay) : undefined,
+      onMouseLeave: onDayMouseLeave ? () => onDayMouseLeave(curDay) : undefined
+    }, curDay.day);
+  }));
+};

package/Calendar/CalendarMonth/styles.d.ts

@@ -0,0 +1,7 @@
+export type CellBoxVariant = 'selected' | 'selectedDisabled' | 'disabled' | 'outdated' | 'highlighted' | 'period' | 'periodOutdated' | 'periodFrom' | 'periodTo';
+export declare const CellBox: import("styled-components").StyledComponent<"div", any, {
+    $variant?: CellBoxVariant;
+    $height?: number | string;
+    $isToday?: boolean;
+}, never>;
+export declare const DayHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Calendar/CalendarMonth/styles.js

@@ -0,0 +1,48 @@
+import styled, { css } from 'styled-components';
+import { Color, ShapeRadius, FontSize, FontWeight, LineHeight } from '@pushwoosh/kit-constants';
+const calendarCellHeight = '28px';
+const selectedCss = css(["color:", ";background:", ";&:hover{background:", ";}"], Color.CLEAR, Color.MAIN, Color.PRIMARY_HOVER);
+const selectedDisabledCss = css(["pointer-events:none;", ""], selectedCss);
+const periodFromCss = css(["border-top-right-radius:0;border-bottom-right-radius:0;", ""], selectedCss);
+const periodToCss = css(["border-top-left-radius:0;border-bottom-left-radius:0;", ""], selectedCss);
+const disabledCss = css(["font-weight:", ";color:", ";border:1px solid ", ";background:linear-gradient( to top left,rgba(0,0,0,0) 0%,rgba(0,0,0,0) calc(50% - 0.8px),", " 50%,rgba(0,0,0,0) calc(50% + 0.8px),rgba(0,0,0,0) 100% );pointer-events:none;"], FontWeight.REGULAR, Color.PHANTOM, Color.DIVIDER, Color.DIVIDER);
+const outdatedCss = css(["opacity:0;pointer-events:none;"]);
+const highlightedCss = css(["outline:1px solid ", ";"], Color.SOFT_LIGHT);
+const periodCss = css(["position:relative;z-index:0;:before{content:'';position:absolute;top:0;left:-1px;right:-1px;bottom:0;background:", ";z-index:-1;}"], Color.SOFT_LIGHT);
+const periodOutdatedCss = css(["position:relative;z-index:0;color:transparent;pointer-events:none;:before{content:'';position:absolute;top:0;left:-1px;right:-1px;bottom:0;background:", ";z-index:-1;}"], Color.SOFT_LIGHT);
+const cssMap = {
+  selected: selectedCss,
+  selectedDisabled: selectedDisabledCss,
+  disabled: disabledCss,
+  outdated: outdatedCss,
+  highlighted: highlightedCss,
+  period: periodCss,
+  periodOutdated: periodOutdatedCss,
+  periodFrom: periodFromCss,
+  periodTo: periodToCss
+};
+const CalendarCellBaseStyled = styled.div.withConfig({
+  displayName: "CalendarCellBaseStyled",
+  componentId: "sc-hqj3qr-0"
+})(["display:grid;place-items:center;"]);
+export const CellBox = styled(CalendarCellBaseStyled).withConfig({
+  displayName: "CellBox",
+  componentId: "sc-hqj3qr-1"
+})(["font-size:", ";font-weight:", ";line-height:", ";height:", ";color:", ";border-radius:", ";cursor:pointer;&:hover{background:", ";}", " ", ""], FontSize.SMALL, FontWeight.REGULAR, LineHeight.SMALL, calendarCellHeight, Color.MAIN, ShapeRadius.CONTROL, Color.SOFT_LIGHT, ({
+  $variant
+}) => $variant && cssMap[$variant] || '', ({
+  $isToday,
+  $variant
+}) => $isToday && css(["position:relative;&::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:8px;height:2px;border-radius:1px;background:", ";}"], (() => {
+  if ($variant === 'selected' || $variant === 'selectedDisabled' || $variant === 'periodFrom' || $variant === 'periodTo') {
+    return Color.CLEAR;
+  }
+  if ($variant === 'disabled') {
+    return Color.PHANTOM;
+  }
+  return Color.MAIN;
+})()));
+export const DayHeader = styled(CalendarCellBaseStyled).withConfig({
+  displayName: "DayHeader",
+  componentId: "sc-hqj3qr-2"
+})(["height:", ";color:", ";font-weight:", ";font-size:", ";line-height:", ";"], calendarCellHeight, Color.LOCKED, FontWeight.REGULAR, FontSize.SMALL, LineHeight.SMALL);

package/Calendar/CalendarMonth/types.d.ts

@@ -0,0 +1,17 @@
+import { type DateStruct } from '../types';
+export interface MonthCommonProps {
+    selectedDay?: DateStruct;
+    highlightDay?: DateStruct;
+    periodFrom?: DateStruct;
+    periodTo?: DateStruct;
+    disableOnAndBefore?: DateStruct;
+    disableOnAndAfter?: DateStruct;
+    disablePeriod?: [from: DateStruct, to: DateStruct];
+    onDaySelect: (day: DateStruct) => void;
+    onDayMouseEnter?: (day: DateStruct) => void;
+    onDayMouseLeave?: (day: DateStruct) => void;
+    firstDayOfWeek?: 0 | 1;
+}
+export interface MonthProps extends MonthCommonProps {
+    month: DateStruct;
+}

package/Calendar/CalendarMonth/types.js

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

package/Calendar/CalendarMonthSlider/CalendarMonthSlider.d.ts

@@ -0,0 +1,11 @@
+import React, { type FC } from 'react';
+import { type MonthCommonProps } from '../CalendarMonth/types';
+import { type DateStruct } from '../types';
+export interface CalendarMonthSliderProps extends MonthCommonProps {
+    startMonth: DateStruct;
+    monthWidth?: number;
+    gap?: number;
+    visibleCount?: number;
+    renderAfter?: () => React.ReactNode;
+}
+export declare const CalendarMonthSlider: FC<CalendarMonthSliderProps>;