Repository: ionic-team/ionic-framework
File: core/src/components/datetime/datetime.tsx (TypeScript)

Code before:
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';

import { getIonMode } from '../../global/ionic-global';
import type {
  Color,
  DatetimePresentation,
  DatetimeChangeEventDetail,
  DatetimeParts,
  Mode,
  StyleEventDetail,
  TitleSelectedDatesFormatter,
  DatetimeHighlight,
  DatetimeHighlightStyle,
  DatetimeHighlightCallback,
} from '../../interface';
import { startFocusVisible } from '../../utils/focus-visible';
import { getElementRoot, raf, renderHiddenInput } from '../../utils/helpers';
import { printIonError, printIonWarning } from '../../utils/logging';
import { isRTL } from '../../utils/rtl';
import { createColorClasses } from '../../utils/theme';
import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces';

import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from './utils/comparison';
import {
  generateMonths,
  getDaysOfMonth,
  getDaysOfWeek,
  getToday,
  getMonthColumnData,
  getDayColumnData,
  getYearColumnData,
  getTimeColumnsData,
  getCombinedDateColumnData,
} from './utils/data';
import { formatValue, getLocalizedTime, getMonthAndDay, getMonthAndYear } from './utils/format';
import { is24Hour, isLocaleDayPeriodRTL, isMonthFirstLocale, getNumDaysInMonth } from './utils/helpers';
import {
  calculateHourFromAMPM,
  convertDataToISO,
  getClosestValidDate,
  getEndOfWeek,
  getNextDay,

Review comment (suggestion):
~ It might be worth updating these imports to come directly from the `datetime-interface` file located within the same folder vs. the barrel file. Otherwise we will need to manually fix this when syncing `main` with `feature-7.0`. Stencil v3 requires that we import from relative paths instead of the type declaration file that we share with consumers. 

Code after:
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';

import { getIonMode } from '../../global/ionic-global';
import type { Color, Mode, StyleEventDetail } from '../../interface';
import { startFocusVisible } from '../../utils/focus-visible';
import { getElementRoot, raf, renderHiddenInput } from '../../utils/helpers';
import { printIonError, printIonWarning } from '../../utils/logging';
import { isRTL } from '../../utils/rtl';
import { createColorClasses } from '../../utils/theme';
import type { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces';

import type {
  DatetimePresentation,
  DatetimeChangeEventDetail,
  DatetimeParts,
  TitleSelectedDatesFormatter,
  DatetimeHighlight,
  DatetimeHighlightStyle,
  DatetimeHighlightCallback,
} from './datetime-interface';
import { isSameDay, warnIfValueOutOfBounds, isBefore, isAfter } from './utils/comparison';
import {
  generateMonths,
  getDaysOfMonth,
  getDaysOfWeek,
  getToday,
  getMonthColumnData,
  getDayColumnData,
  getYearColumnData,
  getTimeColumnsData,
  getCombinedDateColumnData,
} from './utils/data';
import { formatValue, getLocalizedTime, getMonthAndDay, getMonthAndYear } from './utils/format';
import { is24Hour, isLocaleDayPeriodRTL, isMonthFirstLocale, getNumDaysInMonth } from './utils/helpers';
import {
  calculateHourFromAMPM,
  convertDataToISO,
  getClosestValidDate,
  getEndOfWeek,
  getNextDay,
  getNextMonth,
  getNextWeek,