packages/date-picker/src/interfaces/classes.ts - develop - kaws/ui-kit-ce

packages/date-picker/src/interfaces/classes.ts
309 строк15 KB
Калиниченко Никита Артемович
fix(date-picker): исправление ошибок ввода даты и дизайна в QuarterPicker и QuarterRangePicker
16 сен 2025, 13:15
16 сен 2025, 13:156dc4f06
export type DatePickerClasses = {
  /** Стиль, применяемый к основному элементу  */
  root?: string
  /** Стиль, применяемый к основному элементу поля ввода */
  inputRoot?: string
  /** Стиль, применяемый к обертке поля ввода */
  inputContainer?: string
  /** Стиль, применяемый к основному элементу в случае ошибки */
  error?: string
  /** Стиль, применяемый к основному элементу состоянии disabled */
  disabled?: string
  /** Стиль, применяемый к выпадашке пикера */
  calendarPickerDropdown?: string
  /** Стиль, применяемый к основному элементу пикера времени*/
  timePickerRoot?: string
  /** Стиль, применяемый к обертке пикера времени */
  timePickerContainer?: string
}

export type CalendarPickerClasses = {
  /** Стиль, применяемый к основному элементу  */
  root?: string
  /** Стиль, применяемый к элементам навигации */
  calendarBar?: string
  /** Стиль, применяемый к кнопкам промотки месяцев */
  chevron?: string
  /** Стиль, применяемый к кнопки выбора месяца */
  month?: string
  /** Стиль, применяемый к кнопке выбора года */
  year?: string
  /** Стиль, применяемый к кнопкам выбора года/месяца при активации выбора года/месяца */
  selected?: string
}

export type QuarterCalendarPickerClasses = {
  /** Стиль, применяемый к основному элементу  */
  root?: string
  /** Стиль, применяемый к элементам навигации */
  calendarBar?: string
  /** Стиль, применяемый к кнопкам промотки месяцев */
  chevron?: string
  /** Стиль, применяемый к кнопке выбора кватала */
  quarter?: string
  /** Стиль, применяемый к кнопке выбора года */
  year?: string
  /** Стиль, применяемый к кнопкам выбора года/квартала при активации выбора года/квартала */
  selected?: string
}

export type QuarterPickerClasses = {
  /** Стиль, применяемый к основному элементу  */
  root?: string
  /** Стиль, применяемый к элементам навигации */
  calendarBar?: string
  /** Стиль, применяемый к кнопкам переключения годов */
  chevron?: string
  /** Стиль, применяемый к кнопке выбора квартала */
  quarter?: string
  /** Стиль, применяемый к кнопке выбора года */
  year?: string
  /** Стиль, применяемый к кнопкам выбора года/квартала при активации выбора года/квартала */
  selected?: string
  /** Стиль, применяемый к основному элементу в случае ошибки */
  error?: string
  /** Стиль, применяемый к основному элементу состоянии disabled */
  disabled?: string
  /** Стиль, применяемый к выпадающему меню с календарями */
  calendarPickerDropdown?: string
  /** Стиль, применяемый к обертке полей ввода */
  inputContainer?: string
}

export type DayViewClasses = {
  /** Стиль, применяемый к каждой строке (недели) */
  row?: string
  /** Стиль, применяемый к выбранному дню */
  selected?: string
  /** Стиль, применяемый к каждому заголовку дню недели */
  weekDay?: string
  /** Стиль, применяемый к текстовому полю каждого дня */
  dayText?: string
  /** Стиль, применяемый к кнопке каждого дня */
  dayButton?: string
  /** Стиль, применяемый к сегодняшнему дню */
  today?: string
  /** Стиль, применяемый к каждому дню не текущего месяца */
  notCurrentMonth?: string
}

export type MonthViewClasses = {
  /** Стиль, применяемый к обертке компонента */
  root?: string
  /** Стиль, применяемый к выбранному месяцу */
  selected?: string
  /** Стиль, применяемый к текстовому полю каждого месяца */
  monthText?: string
  /** Стиль, применяемый к кнопке каждого месяца */
  monthButton?: string
}

export type QuarterViewClasses = {
  /** Стиль, применяемый к обертке компонента */
  root?: string
  /** Стиль, применяемый к выбранному кварталу */
  selected?: string
  /** Стиль, применяемый к текстовому полю каждого квартала */
  quarterText?: string
  /** Стиль, применяемый к текстовому полю месяцев каждого квартала */
  quarterMonthsText?: string
  /** Стиль, применяемый к кнопке каждого квартала */
  quarterButton?: string
}

export type YearViewClasses = {
  /** Стиль, применяемый к обертке компонента */
  root?: string
  /** Стиль, применяемый к выбранному году */
  selected?: string
  /** Стиль, применяемый к текстовому полю каждого года */
  yearText?: string
  /** Стиль, применяемый к кнопке каждого года */
  yearButton?: string
}

export type RangePickerClasses = {
  /** Стиль, применяемый к основному элементу  */
  root?: string
  /** Стиль, применяемый к обертке полей ввода */
  inputContainer?: string
  /** Стиль, применяемый к inputContainer в случае ошибки */
  error?: string
  /** Стиль, применяемый к inputContainer, в состоянии disabled */
  disabled?: string
  /** Стиль, применяемый к inputContainer, в состоянии focused */
  focused?: string
  /** Стиль, применяемый к inputContainer в случае lg размера */
  large?: string
  /** Стиль, применяемый к inputContainer в случае sm размера */
  small?: string
  /** Стиль, применяемый к разделителю между инпутами */
  divider?: string
  /** Стиль, применяемый к обертке иконки календаря */
  iconContainer?: string
  /** Стиль, применяемый к иконке ошибки в случае inputStyle="default" */
  errorIcon?: string
  /** Стиль, применяемый к выпадающему меню с календарями */
  calendarPickerDropdown?: string
  /**
   * Стиль, применяемый в контейнере `panelHeader`, над календарем.
   *
   * @deprecated используйте свойство `components`.
   */
  panelHeader?: string
  /**
   * Стиль, применяемый в контейнере `panelFooter`, под календарем.
   *
   * @deprecated используйте свойство `components`.
   */
  panelFooter?: string
}

export type QuarterRangePickerClasses = RangePickerClasses

export type RangeDayViewClasses = {
  /** Стиль, применяемый к каждой строке (недели) */
  row?: string
  /** Стиль, применяемый к выбранному дню */
  selected?: string
  /** Стиль, применяемый к кнопке каждого дня, в состоянии вхождения в выбранный период */
  withinRange?: string
  /** Стиль, применяемый при наведении на кнопку каждого дня, в состоянии вхождения в выбранный период */
  withinHoverRange?: string
  /** Стиль, применяемый при наведении на кнопку первого дня предполагаемого периода */
  withinHoverRangeStart?: string
  /** Стиль, применяемый при наведении на кнопку последнего дня предполагаемого периода */
  withinHoverRangeEnd?: string
  /** Стиль, применяемый к каждому заголовку дню недели */
  weekDay?: string
  /** Стиль, применяемый к текстовому полю каждого дня */
  dayText?: string
  /** Стиль, применяемый к кнопке каждого дня */
  dayButton?: string
  /** Стиль, применяемый к сегодняшнему дню */
  today?: string
  /** Стиль, применяемый к каждому дню не текущего месяца */
  notCurrentMonth?: string
  /** Стиль, применяемый к каждой кнопке дня начала недели */
  weekStart?: string
  /** Стиль, применяемый к каждой кнопке дня конца недели */
  weekEnd?: string
  /** Стиль, применяемый к каждой кнопке дня начала месяца */
  monthStart?: string
  /** Стиль, применяемый к каждой кнопке дня конца месяца */
  monthEnd?: string
}

export type RangeMonthViewClasses = {
  /** Стиль, применяемый к обертке компонента */
  root?: string
  /** Стиль, применяемый к выбранному месяцу */
  selected?: string
  /** Стиль, применяемый к кнопке каждого месяца, в состоянии вхождения в выбранный период */
  withinRange?: string
  /** Стиль, применяемый при наведении на кнопку каждого месяца, в состоянии вхождения в выбранный период */
  withinHoverRange?: string
  /** Стиль, применяемый при наведении на кнопку первого месяца предполагаемого периода */
  withinHoverRangeStart?: string
  /** Стиль, применяемый при наведении на кнопку последного месяца предполагаемого периода */
  withinHoverRangeEnd?: string
  /** Стиль, применяемый к текстовому полю каждого месяца */
  monthText?: string
  /** Стиль, применяемый к кнопке каждого месяца */
  monthButton?: string
}

export type RangeMonthsViewClasses = {
  /** Стиль, применяемый к корневому элементу */
  root?: string
  /** Стиль, применяемый к каждой строке */
  row?: string
  /** Стиль, применяемый к выбранному месяцу */
  selected?: string
  /** Стиль, применяемый к текстовому полю каждого месяца */
  monthText?: string
  /** Стиль, применяемый к кнопке каждого месяца */
  monthButton?: string
}

export type RangeYearViewClasses = {
  /** Стиль, применяемый к обертке компонента */
  root?: string
  /** Стиль, применяемый к выбранному году */
  selected?: string
  /** Стиль, применяемый к текстовому полю каждого года */
  yearText?: string
  /** Стиль, применяемый к кнопке каждого года */
  yearButton?: string
  /** Стиль, применяемый к кнопке каждого года, в состоянии вхождения в выбранный период */
  withinRange?: string
  /** Стиль, применяемый при наведении на кнопку каждого года, в состоянии вхождения в выбранный период */
  withinHoverRange?: string
  /** Стиль, применяемый при наведении на кнопку первого года предполагаемого периода */
  withinHoverRangeStart?: string
  /** Стиль, применяемый при наведении на кнопку последного года предполагаемого периода */
  withinHoverRangeEnd?: string
}

export type RangeYearsViewClasses = {
  /** Стиль, применяемый к корневому элементу */
  root?: string
  /** Стиль, применяемый к каждой строке */
  row?: string
  /** Стиль, применяемый к выбранному году */
  selected?: string
  /** Стиль, применяемый к текстовому полю каждого года */
  yearText?: string
  /** Стиль, применяемый к кнопке каждого года */
  yearButton?: string
}

export type CalendarViewClasses = {
  /** Стиль, применяемый к каждой строке (недели) */
  row?: string
  /** Стиль, применяемый к каждому заголовку дню недели */
  weekDay?: string
  /** Стиль, применяемый к текстовому полю каждого дня */
  dayText?: string
  /** Стиль, применяемый к кнопке каждого дня */
  dayButton?: string
  /** Стиль, применяемый к кнопке сегодняшнего дня */
  todayButton?: string
  /** Стиль, применяемый к выбранному дню */
  selected?: string
  /** Стиль, применяемый к каждому дню не текущего месяца */
  notInMonth?: string
  /** Стиль, применяемый к кнопке каждого дня попадающего в диапазон */
  inRange?: string
  /** */
  hovered?: string
  /** */
  'selected-start'?: string
  /** */
  'selected-end'?: string
  /** */
  'hovered-start'?: string
  /** */
  'hovered-end'?: string
  /** */
  startOfMonth?: string
  /** */
  endOfMonth?: string
  /** */
  startOfWeek?: string
  /** */
  endOfWeek?: string
}

export type PanelHeaderClasses = {
  /** Стиль, применяемый к обертке компонента */
  root?: string
  /** Стиль, применяемый к кнопкам промотки месяцев */
  chevron?: string
  /** Стиль, применяемый к кнопки выбора месяца */
  month?: string
  /** Стиль, применяемый к кнопке выбора года */
  year?: string
  /** Стиль, применяемый к кнопкам выбора года/месяца при активации выбора года/месяца */
  selected?: string
}