@cloud-ru/ds-calendar 1.0.0

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

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

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

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

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/cjs/helperComponents/TimePickerDrum/utils.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildColumnValues = buildColumnValues;
+exports.nearestInSortedValues = nearestInSortedValues;
+exports.mod = mod;
+exports.formatDisplayPart = formatDisplayPart;
+exports.formatSelectedDateLabelForDisplay = formatSelectedDateLabelForDisplay;
+exports.getSizeLimits = getSizeLimits;
+const constants_1 = require("../../constants");
+/**
+ * Допустимые значения колонки: whitelist `allowed` (если после фильтра непустой),
+ * иначе диапазон от `min` до конца (`0 .. fullCount - 1`), иначе полный диапазон.
+ */
+function buildColumnValues(fullCount, allowed, min) {
+    const max = fullCount - 1;
+    const fullRange = () => Array.from({ length: fullCount }, (_, i) => i);
+    if (allowed != null && allowed.length > 0) {
+        const uniq = new Set();
+        for (const raw of allowed) {
+            if (typeof raw !== 'number' || !Number.isFinite(raw)) {
+                continue;
+            }
+            const v = Math.trunc(raw);
+            if (v >= 0 && v <= max) {
+                uniq.add(v);
+            }
+        }
+        const list = [...uniq].sort((a, b) => a - b);
+        if (list.length > 0) {
+            return list;
+        }
+    }
+    if (min !== undefined && typeof min === 'number' && Number.isFinite(min)) {
+        const from = Math.min(max, Math.max(0, Math.trunc(min)));
+        return Array.from({ length: max - from + 1 }, (_, i) => from + i);
+    }
+    return fullRange();
+}
+/** `values` — отсортированный по возрастанию список без дубликатов. */
+function nearestInSortedValues(values, target) {
+    if (values.length === 0) {
+        return target;
+    }
+    const t = typeof target === 'number' && Number.isFinite(target) ? target : 0;
+    const first = values[0];
+    const last = values[values.length - 1];
+    if (t <= first) {
+        return first;
+    }
+    if (t >= last) {
+        return last;
+    }
+    let lo = 0;
+    let hi = values.length - 1;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        const m = values[mid];
+        if (m === t) {
+            return t;
+        }
+        if (m < t) {
+            lo = mid + 1;
+        }
+        else {
+            hi = mid - 1;
+        }
+    }
+    const left = values[hi];
+    const right = values[lo];
+    return Math.abs(t - left) <= Math.abs(right - t) ? left : right;
+}
+/**
+ * Математический остаток `n` по модулю `m`: результат всегда в диапазоне `[0, m - 1]` при `m > 0`,
+ * в том числе для отрицательных и дробных `n` (после `%` в JS). Нужен для циклического индекса в колонке барабана.
+ *
+ * @param n делимое (часто индекс со сдвигом)
+ * @param m положительный модуль (длина списка `options`)
+ */
+function mod(n, m) {
+    return ((n % m) + m) % m;
+}
+/**
+ * Форматирует числовую часть времени для отображения: целое приводится к строке с ведущим нулём до двух знаков (`0` → `"00"`, `9` → `"09"`).
+ * Используется для часов, минут и секунд в дисплее и в подписях ячеек барабана.
+ *
+ * @param value целое в допустимом диапазоне колонки (часы, минуты или секунды)
+ */
+function formatDisplayPart(value) {
+    return String(value).padStart(2, '0');
+}
+/** В блоке подписи показываем только календарную часть (время — в `timeRow`). */
+function formatSelectedDateLabelForDisplay(text) {
+    const trimmed = text.trim();
+    if (trimmed === '') {
+        return '';
+    }
+    const parsed = Date.parse(trimmed);
+    if (!Number.isNaN(parsed)) {
+        return new Intl.DateTimeFormat('en-US', {
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+        }).format(new Date(parsed));
+    }
+    return trimmed;
+}
+/**
+ * Геометрия барабана времени по размеру календаря: высота одной строки (`itemHeight`) и высота окна колонок (`pickerHeight`) в пикселях.
+ * Соответствует ступенчатым значениям для `s` / `m` / `l` из дизайн-токенов `TimePickerDrum`.
+ *
+ * @param size размер по оси Figma (`SIZE.S` | `SIZE.M` | `SIZE.L`)
+ * @returns `itemHeight` — шаг строки и дискретизации жеста; `pickerHeight` — высота видимой области колонки
+ */
+function getSizeLimits(size) {
+    if (size === constants_1.SIZE.L) {
+        return { itemHeight: 56, pickerHeight: 280 };
+    }
+    if (size === constants_1.SIZE.M) {
+        return { itemHeight: 48, pickerHeight: 240 };
+    }
+    return { itemHeight: 40, pickerHeight: 200 };
+}

package/dist/cjs/helperComponents/WeekRow/WeekRow.d.ts

@@ -0,0 +1 @@
+export declare function WeekRow(): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/helperComponents/WeekRow/WeekRow.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WeekRow = WeekRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const hooks_1 = require("../../hooks");
+const Item_1 = require("../Item");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
+function WeekRow() {
+    const { viewMode, locale, size } = (0, hooks_1.useCalendarContext)();
+    const labels = (0, react_1.useMemo)(() => (0, utils_1.getWeekLabels)(locale), [locale]);
+    if (viewMode === constants_1.VIEW_MODE.Month) {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: labels.map((label, index) => ((0, jsx_runtime_1.jsx)(Item_1.Item, { another: true, className: styles_module_scss_1.default.cell, label: label, rangePosition: 'out', size: size, tabIndex: -1, testIdSegment: 'header-item' }, `${index}-${label}`))) }));
+    }
+    return null;
+}

package/dist/cjs/helperComponents/WeekRow/index.d.ts

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

package/dist/cjs/helperComponents/WeekRow/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("./WeekRow"), exports);

package/dist/cjs/helperComponents/WeekRow/styles.module.css

@@ -0,0 +1,3 @@
+.cell{
+  pointer-events:none;
+}

package/dist/cjs/helperComponents/WeekRow/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const MONDAY_DATE: Date;
+export declare const SUNDAY_DATE: Date;
+export declare const getWeekLabels: (locale: Intl.Locale) => string[];

package/dist/cjs/helperComponents/WeekRow/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWeekLabels = exports.SUNDAY_DATE = exports.MONDAY_DATE = void 0;
+const utils_1 = require("../../utils");
+exports.MONDAY_DATE = new Date(1970, 1, 2);
+exports.SUNDAY_DATE = new Date(1970, 1, 1);
+const getWeekLabels = (locale) => {
+    const labels = [];
+    const startDate = (0, utils_1.getStartOfWeek)(locale) === 0 ? exports.SUNDAY_DATE : exports.MONDAY_DATE;
+    for (let i = 0; i < 7; i++) {
+        const date = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + i);
+        labels.push((0, utils_1.capitalize)(date.toLocaleString(locale, { weekday: 'short' })));
+    }
+    return labels;
+};
+exports.getWeekLabels = getWeekLabels;

package/dist/cjs/helperComponents/YearView/YearView.d.ts

@@ -0,0 +1 @@
+export declare function YearView(): import("react/jsx-runtime").JSX.Element;