@mui/x-date-pickers 8.0.0-alpha.9 → 8.0.0-beta.0

package/modern/StaticTimePicker/StaticTimePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { StaticTimePickerProps } from "./StaticTimePicker.types.js";
+type StaticTimePickerComponent = ((props: StaticTimePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [StaticTimePicker API](https://mui.com/x/api/date-pickers/static-time-picker/)
+ */
+declare const StaticTimePicker: StaticTimePickerComponent;
+export { StaticTimePicker };

package/modern/StaticTimePicker/StaticTimePicker.js

@@ -43,11 +43,11 @@ const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker
   const {
     renderPicker
   } = useStaticPicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    validator: validateTime,
-    ref
+    validator: validateTime
   });
   return renderPicker();
 });

package/modern/StaticTimePicker/StaticTimePicker.types.d.ts

@@ -0,0 +1,18 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from "../TimePicker/shared.js";
+import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.js";
+import { TimeView } from "../models/index.js";
+export interface StaticTimePickerSlots extends BaseTimePickerSlots, UseStaticPickerSlots {}
+export interface StaticTimePickerSlotProps extends BaseTimePickerSlotProps, UseStaticPickerSlotProps {}
+export interface StaticTimePickerProps extends BaseTimePickerProps<TimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: StaticTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: StaticTimePickerSlotProps;
+}

package/modern/StaticTimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { StaticTimePicker } from "./StaticTimePicker.js";
+export type { StaticTimePickerProps, StaticTimePickerSlots, StaticTimePickerSlotProps } from './StaticTimePicker.types';

package/modern/TimeClock/Clock.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { PickerSelectionState } from '../internals/hooks/usePicker';
+import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
+import { PickerValidDate, TimeView } from "../models/index.js";
+import { ClockClasses } from "./clockClasses.js";
+import { FormProps } from "../internals/models/formProps.js";
+export interface ClockProps extends ReturnType<typeof useMeridiemMode>, FormProps {
+  ampm: boolean;
+  ampmInClock: boolean;
+  autoFocus?: boolean;
+  children: readonly React.ReactNode[];
+  isTimeDisabled: (timeValue: number, type: TimeView) => boolean;
+  minutesStep?: number;
+  onChange: (value: number, isFinish?: PickerSelectionState) => void;
+  /**
+   * DOM id that the selected option should have
+   * Should only be `undefined` on the server
+   */
+  selectedId: string | undefined;
+  type: TimeView;
+  /**
+   * The numeric value of the current view.
+   */
+  viewValue: number;
+  /**
+   * The current full date value.
+   */
+  value: PickerValidDate | null;
+  /**
+   * Minimum and maximum value of the clock.
+   */
+  viewRange: [number, number];
+  className?: string;
+  classes?: Partial<ClockClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function Clock(inProps: ClockProps): React.JSX.Element;

package/modern/TimeClock/Clock.js

@@ -104,7 +104,7 @@ const ClockPin = styled('div', {
   left: '50%',
   transform: 'translate(-50%, -50%)'
 }));
-const meridiemButtonCommonStyles = (theme, meridiemMode) => ({
+const meridiemButtonCommonStyles = (theme, clockMeridiemMode) => ({
   zIndex: 1,
   bottom: 8,
   paddingLeft: 4,
@@ -112,7 +112,7 @@ const meridiemButtonCommonStyles = (theme, meridiemMode) => ({
   width: CLOCK_HOUR_WIDTH,
   variants: [{
     props: {
-      meridiemMode
+      clockMeridiemMode
     },
     style: {
       backgroundColor: (theme.vars || theme).palette.primary.main,
@@ -317,7 +317,7 @@ export function Clock(inProps) {
         })]
       }), /*#__PURE__*/_jsx(ClockWrapper, {
         "aria-activedescendant": selectedId,
-        "aria-label": translations.clockLabelText(type, value == null ? null : utils.format(value, 'fullTime')),
+        "aria-label": translations.clockLabelText(type, value == null ? null : utils.format(value, ampm ? 'fullTime12h' : 'fullTime24h')),
         ref: listboxRef,
         role: "listbox",
         onKeyDown: handleKeyDown,

package/modern/TimeClock/ClockNumber.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ClockNumberClasses } from "./clockNumberClasses.js";
+export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
+  'aria-label': string;
+  disabled: boolean;
+  /**
+   * Make sure callers pass an id which. It should be defined if selected.
+   */
+  id: string | undefined;
+  index: number;
+  inner: boolean;
+  label: string;
+  selected: boolean;
+  classes?: Partial<ClockNumberClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ClockNumber(inProps: ClockNumberProps): React.JSX.Element;

package/modern/TimeClock/ClockNumbers.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { MuiPickersAdapter, PickerValidDate } from "../models/index.js";
+import type { PickerSelectionState } from '../internals/hooks/usePicker';
+interface GetHourNumbersOptions {
+  ampm: boolean;
+  value: PickerValidDate | null;
+  getClockNumberText: (hour: string) => string;
+  isDisabled: (value: number) => boolean;
+  onChange: (value: number, isFinish?: PickerSelectionState) => void;
+  /**
+   * DOM id that the selected option should have
+   * Should only be `undefined` on the server
+   */
+  selectedId: string | undefined;
+  utils: MuiPickersAdapter;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare const getHourNumbers: ({
+  ampm,
+  value,
+  getClockNumberText,
+  isDisabled,
+  selectedId,
+  utils
+}: GetHourNumbersOptions) => React.JSX.Element[];
+export declare const getMinutesNumbers: ({
+  utils,
+  value,
+  isDisabled,
+  getClockNumberText,
+  selectedId
+}: Omit<GetHourNumbersOptions, "ampm" | "value"> & {
+  value: number;
+}) => React.JSX.Element[];
+export {};

package/modern/TimeClock/ClockPointer.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TimeView } from "../models/index.js";
+import { ClockPointerClasses } from "./clockPointerClasses.js";
+export interface ClockPointerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * `true` if the pointer is between two clock values.
+   * On the `hours` view, it is always false.
+   * On the `minutes` view, it is true if the pointer is on a value that is not a multiple of 5.
+   */
+  isBetweenTwoClockValues: boolean;
+  isInner: boolean;
+  type: TimeView;
+  viewValue: number;
+  classes?: Partial<ClockPointerClasses>;
+}
+/**
+ * @ignore - internal component.
+ */
+export declare function ClockPointer(inProps: ClockPointerProps): React.JSX.Element;

package/modern/TimeClock/ClockPointer.js

@@ -58,7 +58,7 @@ const ClockPointerThumb = styled('div', {
   boxSizing: 'content-box',
   variants: [{
     props: {
-      isBetweenTwoClockValues: false
+      isClockPointerBetweenTwoValues: false
     },
     style: {
       backgroundColor: (theme.vars || theme).palette.primary.main

package/modern/TimeClock/TimeClock.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TimeClockProps } from "./TimeClock.types.js";
+type TimeClockComponent = ((props: TimeClockProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [TimeClock](https://mui.com/x/react-date-pickers/time-clock/)
+ *
+ * API:
+ *
+ * - [TimeClock API](https://mui.com/x/api/date-pickers/time-clock/)
+ */
+export declare const TimeClock: TimeClockComponent;
+export {};

package/modern/TimeClock/TimeClock.js

@@ -18,7 +18,7 @@ import { PickerViewRoot } from "../internals/components/PickerViewRoot/index.js"
 import { getTimeClockUtilityClass } from "./timeClockClasses.js";
 import { Clock } from "./Clock.js";
 import { getHourNumbers, getMinutesNumbers } from "./ClockNumbers.js";
-import { useControlledValueWithTimezone } from "../internals/hooks/useValueWithTimezone.js";
+import { useControlledValue } from "../internals/hooks/useControlledValue.js";
 import { singleItemValueManager } from "../internals/utils/valueManagers.js";
 import { useClockReferenceDate } from "../internals/hooks/useClockReferenceDate.js";
 import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
@@ -101,7 +101,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     value,
     handleValueChange,
     timezone
-  } = useControlledValueWithTimezone({
+  } = useControlledValue({
     name: 'TimeClock',
     timezone: timezoneProp,
     value: valueProp,

package/modern/TimeClock/TimeClock.types.d.ts

@@ -0,0 +1,36 @@
+import { TimeClockClasses } from "./timeClockClasses.js";
+import { PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from "../internals/components/PickersArrowSwitcher/index.js";
+import { BaseClockProps, ExportedBaseClockProps } from "../internals/models/props/time.js";
+import { TimeView } from "../models/index.js";
+import { TimeViewWithMeridiem } from "../internals/models/index.js";
+export interface ExportedTimeClockProps extends ExportedBaseClockProps {
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default false
+   */
+  ampmInClock?: boolean;
+}
+export interface TimeClockSlots extends PickersArrowSwitcherSlots {}
+export interface TimeClockSlotProps extends PickersArrowSwitcherSlotProps {}
+export interface TimeClockProps<TView extends TimeViewWithMeridiem = TimeView> extends ExportedTimeClockProps, BaseClockProps<TView> {
+  /**
+   * Available views.
+   * @default ['hours', 'minutes']
+   */
+  views?: readonly TView[];
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TimeClockClasses>;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TimeClockSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TimeClockSlotProps;
+  showViewSwitcher?: boolean;
+}

package/modern/TimeClock/clockClasses.d.ts

@@ -0,0 +1,23 @@
+export interface ClockClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the clock element. */
+  clock: string;
+  /** Styles applied to the wrapper element. */
+  wrapper: string;
+  /** Styles applied to the square mask element. */
+  squareMask: string;
+  /** Styles applied to the pin element. */
+  pin: string;
+  /** Styles applied to the am button element. */
+  amButton: string;
+  /** Styles applied to the pm button element. */
+  pmButton: string;
+  /** Styles applied to the meridiem typography element. */
+  meridiemText: string;
+  /** Styles applied to the selected meridiem button element */
+  selected: string;
+}
+export type ClockClassKey = keyof ClockClasses;
+export declare function getClockUtilityClass(slot: string): string;
+export declare const clockClasses: ClockClasses;

package/modern/TimeClock/clockNumberClasses.d.ts

@@ -0,0 +1,11 @@
+export interface ClockNumberClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to a selected root element. */
+  selected: string;
+  /** Styles applied to a disabled root element. */
+  disabled: string;
+}
+export type ClockNumberClassKey = keyof ClockNumberClasses;
+export declare function getClockNumberUtilityClass(slot: string): string;
+export declare const clockNumberClasses: ClockNumberClasses;

package/modern/TimeClock/clockPointerClasses.d.ts

@@ -0,0 +1,9 @@
+export interface ClockPointerClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the thumb element. */
+  thumb: string;
+}
+export type ClockPointerClassKey = keyof ClockPointerClasses;
+export declare function getClockPointerUtilityClass(slot: string): string;
+export declare const clockPointerClasses: ClockPointerClasses;

package/modern/TimeClock/index.d.ts

@@ -0,0 +1,13 @@
+export { TimeClock } from "./TimeClock.js";
+export type { TimeClockProps, TimeClockSlots, TimeClockSlotProps } from './TimeClock.types';
+export { clockClasses } from "./clockClasses.js";
+export type { ClockClasses, ClockClassKey } from './clockClasses';
+export type { ClockProps } from './Clock';
+export { clockNumberClasses } from "./clockNumberClasses.js";
+export type { ClockNumberClasses, ClockNumberClassKey } from './clockNumberClasses';
+export type { ClockNumberProps } from './ClockNumber';
+export { timeClockClasses, getTimeClockUtilityClass } from "./timeClockClasses.js";
+export type { TimeClockClasses, TimeClockClassKey } from './timeClockClasses';
+export { clockPointerClasses } from "./clockPointerClasses.js";
+export type { ClockPointerClasses, ClockPointerClassKey } from './clockPointerClasses';
+export type { ClockPointerProps } from './ClockPointer';

package/modern/TimeClock/shared.d.ts

@@ -0,0 +1,4 @@
+export declare const CLOCK_WIDTH = 220;
+export declare const CLOCK_HOUR_WIDTH = 36;
+export declare const getMinutes: (offsetX: number, offsetY: number, step?: number) => number;
+export declare const getHours: (offsetX: number, offsetY: number, ampm: boolean) => number;

package/modern/TimeClock/timeClockClasses.d.ts

@@ -0,0 +1,9 @@
+export interface TimeClockClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the arrowSwitcher element. */
+  arrowSwitcher: string;
+}
+export type TimeClockClassKey = keyof TimeClockClasses;
+export declare function getTimeClockUtilityClass(slot: string): string;
+export declare const timeClockClasses: TimeClockClasses;

package/modern/TimeField/TimeField.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TimeFieldProps } from "./TimeField.types.js";
+type TimeFieldComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: TimeFieldProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [TimeField](http://mui.com/x/react-date-pickers/time-field/)
+ * - [Fields](https://mui.com/x/react-date-pickers/fields/)
+ *
+ * API:
+ *
+ * - [TimeField API](https://mui.com/x/api/date-pickers/time-field/)
+ */
+declare const TimeField: TimeFieldComponent;
+export { TimeField };

package/modern/TimeField/TimeField.js

@@ -122,7 +122,8 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   formatDensity: PropTypes.oneOf(['dense', 'spacious']),
   /**
-   * Props applied to the [`FormHelperText`](/material-ui/api/form-helper-text/) element.
+   * Props applied to the [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) element.
+   * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   FormHelperTextProps: PropTypes.object,
   /**
@@ -147,19 +148,22 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   id: PropTypes.string,
   /**
-   * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
+   * Props applied to the [`InputLabel`](https://mui.com/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputLabelProps: PropTypes.object,
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
+   * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   inputProps: PropTypes.object,
   /**
    * Props applied to the Input element.
-   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
-   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * It will be a [`FilledInput`](https://mui.com/material-ui/api/filled-input/),
+   * [`OutlinedInput`](https://mui.com/material-ui/api/outlined-input/) or [`Input`](https://mui.com/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   InputProps: PropTypes.object,
   /**
@@ -225,7 +229,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   onSelectedSectionsChange: PropTypes.func,
   /**
    * The position at which the opening button is placed.
-   * If there is no picker to open, the button is not rendered
+   * If there is no Picker to open, the button is not rendered
    * @default 'end'
    */
   openPickerButtonPosition: PropTypes.oneOf(['end', 'start']),
@@ -280,6 +284,7 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The size of the component.
+   * @default 'medium'
    */
   size: PropTypes.oneOf(['medium', 'small']),
   /**

package/modern/TimeField/TimeField.types.d.ts

@@ -0,0 +1,22 @@
+import { MakeOptional } from '@mui/x-internals/types';
+import { UseFieldInternalProps } from "../internals/hooks/useField/index.js";
+import { TimeValidationError, BuiltInFieldTextFieldProps } from "../models/index.js";
+import { ExportedValidateTimeProps } from "../validation/validateTime.js";
+import { AmPmProps } from "../internals/models/props/time.js";
+import { PickerValue } from "../internals/models/index.js";
+import { ExportedPickerFieldUIProps, PickerFieldUISlotProps, PickerFieldUISlots } from "../internals/components/PickerFieldUI.js";
+export interface UseTimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean> extends MakeOptional<UseFieldInternalProps<PickerValue, TEnableAccessibleFieldDOMStructure, TimeValidationError>, 'format'>, ExportedValidateTimeProps, ExportedPickerFieldUIProps, AmPmProps {}
+export type TimeFieldProps<TEnableAccessibleFieldDOMStructure extends boolean = true> = UseTimeFieldProps<TEnableAccessibleFieldDOMStructure> & Omit<BuiltInFieldTextFieldProps<TEnableAccessibleFieldDOMStructure>, keyof UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>> & {
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TimeFieldSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TimeFieldSlotProps;
+};
+export interface TimeFieldSlots extends PickerFieldUISlots {}
+export interface TimeFieldSlotProps extends PickerFieldUISlotProps {}

package/modern/TimeField/index.d.ts

@@ -0,0 +1,3 @@
+export { TimeField } from "./TimeField.js";
+export { useTimeField as unstable_useTimeField } from "./useTimeField.js";
+export type { UseTimeFieldProps, TimeFieldProps } from './TimeField.types';

package/modern/TimeField/useTimeField.d.ts

@@ -0,0 +1,2 @@
+import { UseTimeFieldProps } from "./TimeField.types.js";
+export declare const useTimeField: <TEnableAccessibleFieldDOMStructure extends boolean, TAllProps extends UseTimeFieldProps<TEnableAccessibleFieldDOMStructure>>(props: TAllProps) => import("../internals").UseFieldResponse<TEnableAccessibleFieldDOMStructure, Omit<TAllProps, "disabled" | "readOnly" | "value" | "defaultValue" | "autoFocus" | "onChange" | "onError" | "format" | "focused" | keyof import("../internals").BaseTimeValidationProps | keyof import("../internals").TimeValidationProps | "ampm" | "referenceDate" | "formatDensity" | "timezone" | "shouldRespectLeadingZeros" | "selectedSections" | "onSelectedSectionsChange" | "unstableFieldRef" | "unstableStartFieldRef" | "unstableEndFieldRef" | "enableAccessibleFieldDOMStructure" | "dateSeparator">>;

package/modern/TimeField/useTimeField.js

@@ -20,6 +20,6 @@ export const useTimeField = props => {
     fieldValueManager: manager.internal_fieldValueManager,
     validator: manager.validator,
     valueType: manager.valueType,
-    getOpenPickerButtonAriaLabel: manager.internal_getOpenPickerButtonAriaLabel
+    getOpenPickerButtonAriaLabel: manager.internal_useOpenPickerButtonAriaLabel()
   });
 };

package/modern/TimePicker/TimePicker.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { TimePickerProps } from "./TimePicker.types.js";
+type TimePickerComponent = (<TEnableAccessibleFieldDOMStructure extends boolean = true>(props: TimePickerProps<TEnableAccessibleFieldDOMStructure> & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
+  propTypes?: any;
+};
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [Validation](https://mui.com/x/react-date-pickers/validation/)
+ *
+ * API:
+ *
+ * - [TimePicker API](https://mui.com/x/api/date-pickers/time-picker/)
+ */
+declare const TimePicker: TimePickerComponent;
+export { TimePicker };

package/modern/TimePicker/TimePicker.js

@@ -101,7 +101,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   disableIgnoringDatePartForTimeValidation: PropTypes.bool,
   /**
-   * If `true`, the open picker button will not be rendered (renders only the field).
+   * If `true`, the button to open the Picker will not be rendered (it will only render the field).
    * @default false
    */
   disableOpenPicker: PropTypes.bool,

package/modern/TimePicker/TimePicker.types.d.ts

@@ -0,0 +1,28 @@
+import { DesktopTimePickerProps, DesktopTimePickerSlots, DesktopTimePickerSlotProps } from "../DesktopTimePicker/index.js";
+import { BaseSingleInputFieldProps, TimeViewWithMeridiem } from "../internals/models/index.js";
+import { MobileTimePickerProps, MobileTimePickerSlots, MobileTimePickerSlotProps } from "../MobileTimePicker/index.js";
+import { ValidateTimeProps } from "../validation/validateTime.js";
+export interface TimePickerSlots extends DesktopTimePickerSlots, MobileTimePickerSlots {}
+export interface TimePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean> extends DesktopTimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, MobileTimePickerSlotProps<TEnableAccessibleFieldDOMStructure> {}
+export interface TimePickerProps<TEnableAccessibleFieldDOMStructure extends boolean = true> extends DesktopTimePickerProps<TEnableAccessibleFieldDOMStructure>, Omit<MobileTimePickerProps<TimeViewWithMeridiem, TEnableAccessibleFieldDOMStructure>, 'views'> {
+  /**
+   * CSS media query when `Mobile` mode will be changed to `Desktop`.
+   * @default '@media (pointer: fine)'
+   * @example '@media (min-width: 720px)' or theme.breakpoints.up("sm")
+   */
+  desktopModeMediaQuery?: string;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: TimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: TimePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
+}
+/**
+ * Props the field can receive when used inside a Time Picker (<TimePicker />, <DesktopTimePicker /> or <MobileTimePicker /> component).
+ */
+export type TimePickerFieldProps = ValidateTimeProps & BaseSingleInputFieldProps;

package/modern/TimePicker/TimePickerToolbar.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { BaseToolbarProps, ExportedBaseToolbarProps } from "../internals/models/props/toolbar.js";
+import { TimePickerToolbarClasses } from "./timePickerToolbarClasses.js";
+export interface TimePickerToolbarProps extends BaseToolbarProps, ExportedTimePickerToolbarProps {
+  ampm?: boolean;
+  ampmInClock?: boolean;
+}
+export interface ExportedTimePickerToolbarProps extends ExportedBaseToolbarProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<TimePickerToolbarClasses>;
+}
+/**
+ * Demos:
+ *
+ * - [TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+ * - [Custom components](https://mui.com/x/react-date-pickers/custom-components/)
+ *
+ * API:
+ *
+ * - [TimePickerToolbar API](https://mui.com/x/api/date-pickers/time-picker-toolbar/)
+ */
+declare function TimePickerToolbar(inProps: TimePickerToolbarProps): React.JSX.Element;
+declare namespace TimePickerToolbar {
+  var propTypes: any;
+}
+export { TimePickerToolbar };

package/modern/TimePicker/index.d.ts

@@ -0,0 +1,6 @@
+export { TimePicker } from "./TimePicker.js";
+export type { TimePickerProps, TimePickerSlots, TimePickerSlotProps, TimePickerFieldProps } from './TimePicker.types';
+export { TimePickerToolbar } from "./TimePickerToolbar.js";
+export type { TimePickerToolbarProps } from './TimePickerToolbar';
+export { timePickerToolbarClasses } from "./timePickerToolbarClasses.js";
+export type { TimePickerToolbarClassKey, TimePickerToolbarClasses } from './timePickerToolbarClasses';

package/modern/TimePicker/shared.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { DefaultizedProps } from '@mui/x-internals/types';
+import { TimeClockSlots, TimeClockSlotProps } from "../TimeClock/TimeClock.types.js";
+import { BasePickerInputProps } from "../internals/models/props/basePickerProps.js";
+import { LocalizedComponent } from "../locales/utils/pickersLocaleTextApi.js";
+import { TimePickerToolbarProps, ExportedTimePickerToolbarProps } from "./TimePickerToolbar.js";
+import { TimeValidationError } from "../models/index.js";
+import { PickerViewRendererLookup } from "../internals/hooks/usePicker/index.js";
+import { TimeViewRendererProps } from "../timeViewRenderers/index.js";
+import { BaseClockProps, ExportedBaseClockProps } from "../internals/models/props/time.js";
+import { PickerValue, TimeViewWithMeridiem } from "../internals/models/index.js";
+import { ValidateTimePropsToDefault } from "../validation/validateTime.js";
+export interface BaseTimePickerSlots extends TimeClockSlots {
+  /**
+   * Custom component for the toolbar rendered above the views.
+   * @default TimePickerToolbar
+   */
+  toolbar?: React.JSXElementConstructor<TimePickerToolbarProps>;
+}
+export interface BaseTimePickerSlotProps extends TimeClockSlotProps {
+  toolbar?: ExportedTimePickerToolbarProps;
+}
+export type TimePickerViewRenderers<TView extends TimeViewWithMeridiem> = PickerViewRendererLookup<PickerValue, TView, TimeViewRendererProps<TView, BaseClockProps<TView>>>;
+export interface BaseTimePickerProps<TView extends TimeViewWithMeridiem> extends BasePickerInputProps<PickerValue, TView, TimeValidationError>, ExportedBaseClockProps {
+  /**
+   * Display ampm controls under the clock (instead of in the toolbar).
+   * @default true on desktop, false on mobile
+   */
+  ampmInClock?: boolean;
+  /**
+   * Overridable component slots.
+   * @default {}
+   */
+  slots?: BaseTimePickerSlots;
+  /**
+   * The props used for each component slot.
+   * @default {}
+   */
+  slotProps?: BaseTimePickerSlotProps;
+  /**
+   * Define custom view renderers for each section.
+   * If `null`, the section will only have field editing.
+   * If `undefined`, internally defined view will be used.
+   */
+  viewRenderers?: Partial<TimePickerViewRenderers<TView>>;
+}
+type UseTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>> = LocalizedComponent<DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | ValidateTimePropsToDefault>>;
+export declare function useTimePickerDefaultizedProps<TView extends TimeViewWithMeridiem, Props extends BaseTimePickerProps<TView>>(props: Props, name: string): UseTimePickerDefaultizedProps<TView, Props>;
+export {};