@cloud-ru/ds-calendar 1.0.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@cloud-ru/ds-calendar",
+  "version": "1.0.0",
+  "description": "Пакет календаря и выбора времени — Calendar с режимами даты, диапазона и месяца/года, TimePicker и TimePickerDropdown для времени в составе полей ввода.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloud-ru-tech/snack-v2.git",
+    "directory": "packages/calendar"
+  },
+  "homepage": "https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/calendar",
+  "license": "Apache-2.0",
+  "author": "Ilya Belyavskiy <iabelyavskiy@cloud.ru>",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./locale": {
+      "source": "./src/locale/index.ts",
+      "types": "./dist/esm/locale/index.d.ts",
+      "import": "./dist/esm/locale/index.js",
+      "require": "./dist/cjs/locale/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "MIGRATION.md",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tanstack/react-virtual": "^3.14.8",
+    "classnames": "^2.5.1",
+    "weekstart": "^2.0.0",
+    "@cloud-ru/ds-adaptive": "^1.0.0",
+    "@cloud-ru/ds-bottom-sheet": "^1.0.0",
+    "@cloud-ru/ds-button": "^1.0.0",
+    "@cloud-ru/ds-dropdown": "^1.0.0",
+    "@cloud-ru/ds-divider": "^1.0.0",
+    "@cloud-ru/ds-icons": "^1.0.0",
+    "@cloud-ru/ds-list": "^1.0.0",
+    "@cloud-ru/ds-locale": "^1.0.0",
+    "@cloud-ru/ds-materials": "^1.0.0",
+    "@cloud-ru/ds-utils": "^1.0.0",
+    "@cloud-ru/ds-scroll": "^1.0.0"
+  }
+}

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,172 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { CSSProperties, ReactNode, RefObject, useCallback, useMemo } from 'react';
+
+import { CALENDAR_MODE } from '../../constants';
+import { CalendarBase } from '../../helperComponents';
+import { BuildCellPropsFunction, FocusDirection, PresetsOptions, Range, Size } from '../../types';
+import { getNormalizedValue } from './utils';
+
+type CommonCalendarProps = {
+  /**
+   * Размер
+   * @default m
+   */
+  size?: Size;
+  /** Дата сегодняшнего дня */
+  today?: Date | number;
+  /** Раскрашивает субботу и воскресенье */
+  showHolidays?: boolean;
+  /**
+   * Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра:
+   * <br> `Date` - дата ячейки
+   * <br> `ViewMode`:
+   * <br>  - `month` отображение месяца, каждая ячейка - 1 день
+   * <br>  - `year` отображение года, каждая ячейка - 1 месяц
+   * <br>  - `decade` отображение декады, каждая ячейка - 1 год
+   * <br><br> Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки.
+   * @type (date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean };
+   */
+  buildCellProps?: BuildCellPropsFunction;
+  /** CSS-класс контейнера */
+  className?: string;
+  /**
+   * Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%).
+   * @default true
+   */
+  fitToContainer?: boolean;
+  /** Объект со стилями на контейнер. */
+  style?: CSSProperties;
+  /** Автофокус */
+  autofocus?: boolean;
+  /**
+   * Локаль, в соответствие с которой выставляется язык названий и первый день недели
+   * @default Проставляется в соответствие с языком в настройках браузера
+   * @type Intl.Locale
+   */
+  locale?: Intl.Locale;
+  /** Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. */
+  onFocusLeave?(direction: FocusDirection): void;
+  /** Ссылка на управление первым элементом навигации */
+  navigationStartRef?: RefObject<{ focus(): void }>;
+  /** Настройки секции с пресетами быстрого выбора периода. Доступны только при mode === 'date-range' и отсутствии buildCellProps (временно PDS-3139) */
+  presets?: PresetsOptions;
+  /** Рендерится после основной разметки календаря, внутри `CalendarContext` (например футер с Apply в дропдауне). */
+  bottomSlot?: ReactNode;
+};
+
+type DateCalendarProps = CommonCalendarProps & {
+  /** Режим работы календаря: <br> - `date` - режим выбора даты */
+  mode: typeof CALENDAR_MODE.Date;
+  /** Выбранное значение.<br> - в режиме date тип `Date` */
+  value?: Date;
+  /** Значение по-умолчанию для uncontrolled.<br> - в режиме date тип `Date` */
+  defaultValue?: Date;
+  /** Колбек выбора значения.<br> - в режиме date принимает тип `Date` */
+  onChangeValue?(value: Date): void;
+};
+
+type MonthCalendarProps = CommonCalendarProps & {
+  /** <br> - `month` - режим выбора месяца */
+  mode: typeof CALENDAR_MODE.Month;
+  /** <br> - в режиме month тип `Date` */
+  value?: Date;
+  /** <br> - в режиме month тип `Date` */
+  defaultValue?: Date;
+  /** <br> - в режиме month принимает тип `Date` */
+  onChangeValue?(value: Date): void;
+};
+
+type YearCalendarProps = CommonCalendarProps & {
+  /** <br> - `year` - режим выбора года */
+  mode: typeof CALENDAR_MODE.Year;
+  /** <br> - в режиме year тип `Date` */
+  value?: Date;
+  /** <br> - в режиме year тип `Date` */
+  defaultValue?: Date;
+  /** <br> - в режиме year принимает тип `Date` */
+  onChangeValue?(value: Date): void;
+};
+
+type DateTimeCalendarProps = CommonCalendarProps & {
+  /** <br> - `date-time` - режим выбора даты и времени */
+  mode: typeof CALENDAR_MODE.DateTime;
+  /** <br> - в режиме date-time тип `Date` */
+  value?: Date;
+  /** <br> - в режиме date-time тип `Date` */
+  defaultValue?: Date;
+  /** <br> - в режиме date-time принимает тип `Date` */
+  onChangeValue?(value: Date): void;
+  /** Показывать ли секунды (только в режиме date-time) */
+  showSeconds?: boolean;
+};
+
+type RangeCalendarProps = CommonCalendarProps & {
+  /** <br> - `date-range` - режим выбора периода */
+  mode: typeof CALENDAR_MODE.DateRange;
+  /** <br> - в режиме date-range тип `Range` (`[Date, Date]`) */
+  value?: Range;
+  /** <br> - в режиме date-range тип `Range` (`[Date, Date]`) */
+  defaultValue?: Range;
+  /** <br> - в режиме date-range принимает тип `Range` */
+  onChangeValue?(value: Range): void;
+};
+
+type MonthRangeCalendarProps = CommonCalendarProps & {
+  /** <br> - `month-range` - режим выбора периода из месяцев */
+  mode: typeof CALENDAR_MODE.MonthRange;
+  /** <br> - в режиме month-range тип `Range` (`[Date, Date]`) */
+  value?: Range;
+  /** <br> - в режиме month-range тип `Range` (`[Date, Date]`) */
+  defaultValue?: Range;
+  /** <br> - в режиме month-range принимает тип `Range` */
+  onChangeValue?(value: Range): void;
+};
+
+type YearRangeCalendarProps = CommonCalendarProps & {
+  /** <br> - `year-range` - режим выбора периода из лет */
+  mode: typeof CALENDAR_MODE.YearRange;
+  /** <br> - в режиме year-range тип `Range` (`[Date, Date]`) */
+  value?: Range;
+  /** <br> - в режиме year-range тип `Range` (`[Date, Date]`) */
+  defaultValue?: Range;
+  /** <br> - в режиме year-range принимает тип `Range` */
+  onChangeValue?(value: Range): void;
+};
+
+export type CalendarProps = WithSupportProps<
+  | DateCalendarProps
+  | RangeCalendarProps
+  | MonthRangeCalendarProps
+  | YearRangeCalendarProps
+  | MonthCalendarProps
+  | DateTimeCalendarProps
+  | YearCalendarProps
+>;
+
+export function Calendar(props: CalendarProps) {
+  const { onChangeValue, mode, ...rest } = props;
+
+  const changeValueHandler = useCallback(
+    (value: Range) => {
+      if (
+        mode === CALENDAR_MODE.Date ||
+        mode === CALENDAR_MODE.Month ||
+        mode === CALENDAR_MODE.Year ||
+        mode === CALENDAR_MODE.DateTime
+      ) {
+        const [date] = value;
+        onChangeValue?.(date);
+        return;
+      }
+      onChangeValue?.(value);
+    },
+    [onChangeValue, mode],
+  );
+
+  const value = useMemo(() => getNormalizedValue(props.value), [props.value]);
+  const defaultValue = useMemo(() => getNormalizedValue(props.defaultValue), [props.defaultValue]);
+
+  return (
+    <CalendarBase {...rest} mode={mode} value={value} defaultValue={defaultValue} onChangeValue={changeValueHandler} />
+  );
+}

package/src/components/Calendar/index.ts

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

package/src/components/Calendar/utils.ts

@@ -0,0 +1,22 @@
+import { Range } from '../../types';
+import { CalendarProps } from './Calendar';
+
+function isRangeValue(value: CalendarProps['value']): value is Range {
+  return Array.isArray(value) && value.length === 2 && value[0] instanceof Date && value[1] instanceof Date;
+}
+
+function isDateValue(value: CalendarProps['value']): value is Date {
+  return value instanceof Date;
+}
+
+export const getNormalizedValue = (value: CalendarProps['value']): Range | undefined => {
+  if (isRangeValue(value)) {
+    return value;
+  }
+
+  if (isDateValue(value)) {
+    return [value, value];
+  }
+
+  return value;
+};

package/src/components/CalendarDropdown/CalendarDropdown.tsx

@@ -0,0 +1,51 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { DropdownProps } from '@cloud-ru/ds-dropdown';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+
+import { DesktopCalendarDropdown } from '../../helperComponents/DesktopCalendarDropdown';
+import { MobileCalendarDropdown } from '../../helperComponents/MobileCalendarDropdown';
+import { CalendarProps } from '../Calendar';
+
+type DropdownBridgeProps = Pick<
+  DropdownProps,
+  | 'triggerClassName'
+  | 'trigger'
+  | 'placement'
+  | 'hoverDelayOpen'
+  | 'hoverDelayClose'
+  | 'closeOnEscapeKey'
+  | 'triggerClickByKeys'
+  | 'triggerRef'
+  | 'outsideClick'
+  | 'fallbackPlacements'
+  | 'disableSpanWrapper'
+  | 'closeOnPopstate'
+  | 'open'
+  | 'onOpenChange'
+>;
+
+/**
+ * Адаптивный календарь в триггере. На desktop открывается в popover (`@cloud-ru/ds-dropdown`), на mobile —
+ * в `@cloud-ru/ds-bottom-sheet` (раскладка берётся из `@cloud-ru/ds-adaptive`; собственного пропа `layoutType` нет).
+ * Пропы позиционирования popover (`placement`, `fallbackPlacements`, `triggerRef`, …) на mobile игнорируются.
+ */
+export type CalendarDropdownProps = WithSupportProps<
+  CalendarProps &
+    DropdownBridgeProps & {
+      /** Элемент открытия dropdown (триггер). */
+      children?: ReactNode;
+      /** Закрыть dropdown после нажатия Apply. */
+      closeOnApply?: boolean;
+      /** Колбек после подтверждения в футере. */
+      onApply?(): void;
+      /** Колбек по кнопке Current в футере. */
+      onCurrent?(): void;
+    }
+>;
+
+export function CalendarDropdown(props: CalendarDropdownProps) {
+  const { layoutType } = useAdaptiveLayout();
+
+  return isMobileLayout(layoutType) ? <MobileCalendarDropdown {...props} /> : <DesktopCalendarDropdown {...props} />;
+}

package/src/components/CalendarDropdown/index.ts

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

package/src/components/CalendarDropdown/styles.module.scss

@@ -0,0 +1,8 @@
+.dropdown {
+  width: fit-content;
+}
+
+.calendarDropdownContent {
+  display: flex;
+  flex-direction: column;
+}

package/src/components/TimePicker/TimePicker.tsx

@@ -0,0 +1,218 @@
+import { ListProps } from '@cloud-ru/ds-list';
+import { useLang } from '@cloud-ru/ds-locale';
+import { useEventHandler, useUncontrolledProp, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { SIZE } from '../../constants';
+import { CalendarContext, CalendarContextType, TimePickerBase } from '../../helperComponents';
+import { useDateAndTime } from '../../hooks';
+import { BuildCellPropsFunction, FocusDirection, Range, Size, TimeValue } from '../../types';
+import { getLocale, getTestIdBuilder, isTimePortionComplete, timeValuesEqual } from '../../utils';
+import { DEFAULT_LOCALE } from './constants';
+import styles from './styles.module.scss';
+
+const stubFunc = () => {};
+const stubBuildCellProps: BuildCellPropsFunction = () => ({ isDisabled: false, isHoliday: false });
+
+export type TimePickerProps = WithSupportProps<{
+  /** Выбранное значение.*/
+  value?: TimeValue;
+  /** Дата сегодняшнего дня */
+  today?: Date | number;
+  /** Значение по-умолчанию для uncontrolled. */
+  defaultValue?: TimeValue;
+  /** Колбек выбора значения */
+  onChangeValue?(value?: TimeValue): void;
+  /** Показывать ли секунды */
+  showSeconds?: boolean;
+
+  /**
+   * Размер
+   * @default m
+   */
+  size?: Size;
+  /** CSS-класс контейнера */
+  className?: string;
+  /**
+   * Отключает предустановленный размер, заставляя компонент подстраиваться к размеру контейнра: (width: 100%, height: 100%).
+   * @default true
+   */
+  fitToContainer?: boolean;
+
+  /** Колбек потери фокуса. Вызывается со значением `next`, когда фокус покидает компонент, передвигаясь вперед, по клавише `tab`. Со значением `prev` - по клавише стрелки вверх или `shift + tab`. */
+  onFocusLeave?(direction: FocusDirection): void;
+  /** Ссылка на управление первым элементом навигации */
+  navigationStartRef?: RefObject<{ focus(): void }>;
+}>;
+
+export function TimePicker({
+  className,
+  size = SIZE.M,
+  fitToContainer = true,
+  value: valueProp,
+  defaultValue,
+  onChangeValue,
+  onFocusLeave,
+  'data-test-id': testId,
+  navigationStartRef,
+  showSeconds = true,
+  today: todayProp,
+}: TimePickerProps) {
+  const [value, setValueState] = useUncontrolledProp<TimeValue | undefined>(valueProp, defaultValue, onChangeValue);
+  const setValueEventHandler = useEventHandler(setValueState);
+  const [internalValue, setInternalValue] = useState<Range | undefined>();
+  const [focus, setFocus] = useState<string | undefined>(undefined);
+  const today = useMemo(() => (typeof todayProp === 'number' ? new Date(todayProp) : todayProp), [todayProp]);
+  const previousValueRef = useRef(value);
+
+  useEffect(() => {
+    if (!internalValue?.[0]) {
+      return;
+    }
+
+    const hours = internalValue[0].getHours() ?? 0;
+    const minutes = internalValue[0].getMinutes() ?? 0;
+    const seconds = internalValue[0].getSeconds() ?? 0;
+
+    setValueEventHandler({ hours, minutes, seconds });
+  }, [internalValue, setValueEventHandler]);
+
+  const setValue = useCallback((dates: Range) => {
+    const newDate = dates[0];
+    setInternalValue([newDate, newDate]);
+  }, []);
+
+  const {
+    dateAndTime,
+    onTimeChange,
+    onDateChange,
+    onDateAndTimeChange,
+    isDateFilled,
+    isTimeFilled,
+    isDateAndTimeFilled,
+  } = useDateAndTime({ showSeconds, value });
+
+  useEffect(() => {
+    const wasValueCleared = value === undefined && previousValueRef.current !== undefined;
+    previousValueRef.current = value;
+
+    if (wasValueCleared) {
+      return;
+    }
+
+    if (!isTimePortionComplete(dateAndTime, showSeconds)) {
+      return;
+    }
+
+    const next: TimeValue = {
+      hours: dateAndTime.hours ?? 0,
+      minutes: dateAndTime.minutes ?? 0,
+      seconds: dateAndTime.seconds ?? 0,
+    };
+
+    if (timeValuesEqual(value, next)) {
+      return;
+    }
+
+    setValueEventHandler(next);
+  }, [dateAndTime, showSeconds, setValueEventHandler, value]);
+
+  const applyButtonRef = useRef<HTMLButtonElement>(null);
+  const currentButtonRef = useRef<HTMLButtonElement>(null);
+  const hoursKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => {} });
+  const minutesKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => {} });
+  const secondsKeyboardNavigationRef: ListProps['keyboardNavigationRef'] = useRef({ focusItem: () => {} });
+
+  const getTestId = useMemo(() => getTestIdBuilder(testId), [testId]);
+
+  const ctxLang = useLang();
+
+  const locale = useMemo(() => getLocale({ localeProp: DEFAULT_LOCALE, ctxLang }), [ctxLang]);
+
+  const calendarContextValue = useMemo<CalendarContextType>(() => {
+    const stubDate = new Date();
+
+    return {
+      mode: 'time',
+      locale,
+      size,
+      value: internalValue,
+      fitToContainer,
+      focus,
+      setValue,
+      setFocus,
+      getTestId,
+      onFocusLeave,
+      navigationStartRef,
+      showSeconds,
+      dateAndTime,
+      onTimeChange,
+      onDateAndTimeChange,
+      isTimeFilled,
+      applyButtonRef,
+      currentButtonRef,
+      hoursKeyboardNavigationRef,
+      minutesKeyboardNavigationRef,
+      secondsKeyboardNavigationRef,
+      today,
+
+      // Stub props
+      viewMode: 'month',
+      showHolidays: false,
+      viewDate: stubDate,
+      referenceDate: stubDate,
+      preselectedRange: undefined,
+      viewShift: 0,
+      setViewMode: stubFunc,
+      setViewShift: stubFunc,
+      startPreselect: stubFunc,
+      continuePreselect: stubFunc,
+      completePreselect: stubFunc,
+      restartPreselect: stubFunc,
+      buildCellProps: stubBuildCellProps,
+      onDateChange,
+      isDateAndTimeFilled,
+      isDateFilled,
+    };
+  }, [
+    applyButtonRef,
+    currentButtonRef,
+    dateAndTime,
+    fitToContainer,
+    focus,
+    getTestId,
+    hoursKeyboardNavigationRef,
+    internalValue,
+    isDateAndTimeFilled,
+    isDateFilled,
+    isTimeFilled,
+    locale,
+    minutesKeyboardNavigationRef,
+    navigationStartRef,
+    onDateAndTimeChange,
+    onDateChange,
+    onFocusLeave,
+    onTimeChange,
+    secondsKeyboardNavigationRef,
+    setFocus,
+    setValue,
+    showSeconds,
+    size,
+    today,
+  ]);
+
+  return (
+    <div
+      className={cn(styles.timePickerWrapper, className)}
+      data-fit-to-container={fitToContainer || undefined}
+      data-show-seconds={String(showSeconds)}
+      data-size={size}
+      data-test-id={testId}
+    >
+      <CalendarContext.Provider value={calendarContextValue}>
+        <TimePickerBase />
+      </CalendarContext.Provider>
+    </div>
+  );
+}

package/src/components/TimePicker/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');

package/src/components/TimePicker/index.ts

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

package/src/components/TimePicker/styles.module.scss

@@ -0,0 +1,13 @@
+.timePickerWrapper {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  box-sizing: border-box;
+  width: fit-content;
+
+  &[data-fit-to-container] {
+    min-width: 100%;
+    height: 100%;
+  }
+}

package/src/components/TimePickerDropdown/TimePickerDropdown.tsx

@@ -0,0 +1,55 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { DropdownProps } from '@cloud-ru/ds-dropdown';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+
+import { DesktopTimePickerDropdown } from '../../helperComponents/DesktopTimePickerDropdown';
+import { MobileTimePickerDropdown } from '../../helperComponents/MobileTimePickerDropdown';
+import { TimePickerProps } from '../TimePicker';
+
+type DropdownBridgeProps = Pick<
+  DropdownProps,
+  | 'triggerClassName'
+  | 'trigger'
+  | 'placement'
+  | 'hoverDelayOpen'
+  | 'hoverDelayClose'
+  | 'closeOnEscapeKey'
+  | 'triggerClickByKeys'
+  | 'triggerRef'
+  | 'outsideClick'
+  | 'fallbackPlacements'
+  | 'disableSpanWrapper'
+  | 'closeOnPopstate'
+  | 'open'
+  | 'onOpenChange'
+>;
+
+/**
+ * Адаптивный выбор времени в триггере. На desktop открывается в popover (`@cloud-ru/ds-dropdown`), на mobile —
+ * в `@cloud-ru/ds-bottom-sheet` с барабанным пикером (раскладка из `@cloud-ru/ds-adaptive`; собственного пропа `layoutType` нет).
+ * Пропы позиционирования popover на mobile игнорируются.
+ */
+export type TimePickerDropdownProps = WithSupportProps<
+  TimePickerProps &
+    DropdownBridgeProps & {
+      /** Контент триггера открытия dropdown */
+      children?: ReactNode;
+      /** Закрыть dropdown после нажатия кнопки Apply */
+      closeOnApply?: boolean;
+      /** Колбек по нажатию Apply */
+      onApply?(): void;
+      /** Колбек по нажатию Current */
+      onCurrent?(): void;
+    }
+>;
+
+export function TimePickerDropdown(props: TimePickerDropdownProps) {
+  const { layoutType } = useAdaptiveLayout();
+
+  return isMobileLayout(layoutType) ? (
+    <MobileTimePickerDropdown {...props} />
+  ) : (
+    <DesktopTimePickerDropdown {...props} />
+  );
+}

package/src/components/TimePickerDropdown/index.ts

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

package/src/components/TimePickerDropdown/styles.module.scss

@@ -0,0 +1,25 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+$sizes: 's', 'm', 'l';
+$heightMap: (
+  's': 257,
+  'm': 265,
+  'l': 337,
+);
+
+.dropdown {
+  width: fit-content;
+}
+
+.timePickerDropdownContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.timePickerBaseLimited {
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      height: #{base.simple-var($heightMap, $size)}px;
+    }
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './Calendar';
+export * from './CalendarDropdown';
+export * from './TimePicker';
+export * from './TimePickerDropdown';