@mui/x-date-pickers 5.0.1 → 5.0.2

package/CalendarPicker/pickersCalendarHeaderClasses.d.ts

@@ -0,0 +1,15 @@
+export interface PickersCalendarHeaderClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the label container element. */
+    labelContainer: string;
+    /** Styles applied to the label element. */
+    label: string;
+    /** Styles applied to the switch view button element. */
+    switchViewButton: string;
+    /** Styles applied to the switch view icon element. */
+    switchViewIcon: string;
+}
+export declare type PickersCalendarHeaderClassKey = keyof PickersCalendarHeaderClasses;
+export declare const getPickersCalendarHeaderUtilityClass: (slot: string) => string;
+export declare const pickersCalendarHeaderClasses: PickersCalendarHeaderClasses;

package/CalendarPicker/pickersCalendarHeaderClasses.js

@@ -0,0 +1,3 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export const getPickersCalendarHeaderUtilityClass = slot => generateUtilityClass('MuiPickersCalendarHeader', slot);
+export const pickersCalendarHeaderClasses = generateUtilityClasses('MuiPickersCalendarHeader', ['root', 'labelContainer', 'label', 'switchViewButton', 'switchViewIcon']);

package/CalendarPicker/pickersFadeTransitionGroupClasses.d.ts

@@ -0,0 +1,7 @@
+export interface PickersFadeTransitionGroupClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export declare type PickersFadeTransitionGroupClassKey = keyof PickersFadeTransitionGroupClasses;
+export declare const getPickersFadeTransitionGroupUtilityClass: (slot: string) => string;
+export declare const pickersFadeTransitionGroupClasses: PickersFadeTransitionGroupClasses;

package/CalendarPicker/pickersFadeTransitionGroupClasses.js

@@ -0,0 +1,3 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export const getPickersFadeTransitionGroupUtilityClass = slot => generateUtilityClass('MuiPickersFadeTransitionGroup', slot);
+export const pickersFadeTransitionGroupClasses = generateUtilityClasses('MuiPickersFadeTransitionGroup', ['root']);

package/CalendarPicker/pickersSlideTransitionClasses.d.ts

@@ -0,0 +1,19 @@
+export interface PickersSlideTransitionClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to content element sliding in from left. */
+    'slideEnter-left': string;
+    /** Styles applied to content element sliding in from right. */
+    'slideEnter-right': string;
+    /** Styles applied to the element entering (transitioning into) the container. */
+    slideEnterActive: string;
+    /** Styles applied to the element leaving (transitioning out of) the container. */
+    slideExit: string;
+    /** Styles applied to the element on the left leaving (transitioning out of) the container. */
+    'slideExitActiveLeft-left': string;
+    /** Styles applied to the element on the right leaving (transitioning out of) the container. */
+    'slideExitActiveLeft-right': string;
+}
+export declare type PickersSlideTransitionClassKey = keyof PickersSlideTransitionClasses;
+export declare const getPickersSlideTransitionUtilityClass: (slot: string) => string;
+export declare const pickersSlideTransitionClasses: PickersSlideTransitionClasses;

package/CalendarPicker/pickersSlideTransitionClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export const getPickersSlideTransitionUtilityClass = slot => // TODO v6: Rename 'PrivatePickersSlideTransition' to 'MuiPickersSlideTransition' to follow convention
+generateUtilityClass('PrivatePickersSlideTransition', slot);
+export const pickersSlideTransitionClasses = generateUtilityClasses( // TODO v6: Rename 'PrivatePickersSlideTransition' to 'MuiPickersSlideTransition' to follow convention
+'PrivatePickersSlideTransition', ['root', 'slideEnter-left', 'slideEnter-right', 'slideEnterActive', 'slideExit', 'slideExitActiveLeft-left', 'slideExitActiveLeft-right']);

package/CalendarPickerSkeleton/CalendarPickerSkeleton.d.ts

@@ -24,7 +24,7 @@ export interface CalendarPickerSkeletonProps extends HTMLDivProps {
  *
  * - [CalendarPickerSkeleton API](https://mui.com/x/api/date-pickers/calendar-picker-skeleton/)
  */
-declare function CalendarPickerSkeleton(props: CalendarPickerSkeletonProps): JSX.Element;
+declare function CalendarPickerSkeleton(inProps: CalendarPickerSkeletonProps): JSX.Element;
 declare namespace CalendarPickerSkeleton {
     var propTypes: any;
 }

package/CalendarPickerSkeleton/CalendarPickerSkeleton.js

@@ -41,7 +41,7 @@ const CalendarPickerSkeletonWeek = styled('div', {
 });
 const CalendarPickerSkeletonDay = styled(Skeleton, {
   name: 'MuiCalendarPickerSkeleton',
-  slot: 'Day',
+  slot: 'DaySkeleton',
   overridesResolver: (props, styles) => styles.daySkeleton
 })(({
   ownerState
@@ -71,17 +71,18 @@ const monthMap = [[0, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1,
  * - [CalendarPickerSkeleton API](https://mui.com/x/api/date-pickers/calendar-picker-skeleton/)
  */
 
-function CalendarPickerSkeleton(props) {
-  const _useThemeProps = useThemeProps({
-    props,
+function CalendarPickerSkeleton(inProps) {
+  const props = useThemeProps({
+    props: inProps,
     name: 'MuiCalendarPickerSkeleton'
-  }),
-        {
+  });
+
+  const {
     className
-  } = _useThemeProps,
-        other = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(other);
   return /*#__PURE__*/_jsx(CalendarPickerSkeletonRoot, _extends({
     className: clsx(classes.root, className)
   }, other, {

package/ClockPicker/Clock.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { PickerSelectionState } from '../internals/hooks/usePickerState';
 import { useMeridiemMode } from '../internals/hooks/date-helpers-hooks';
 import { ClockPickerView, MuiPickersAdapter } from '../internals/models';
+import { ClockClasses } from './clockClasses';
 export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
     ampm: boolean;
     ampmInClock: boolean;
@@ -21,8 +22,10 @@ export interface ClockProps<TDate> extends ReturnType<typeof useMeridiemMode> {
     value: number;
     disabled?: boolean;
     readOnly?: boolean;
+    className?: string;
+    classes?: Partial<ClockClasses>;
 }
 /**
  * @ignore - internal component.
  */
-export declare function Clock<TDate>(props: ClockProps<TDate>): JSX.Element;
+export declare function Clock<TDate>(inProps: ClockProps<TDate>): JSX.Element;

package/ClockPicker/Clock.js

@@ -1,16 +1,39 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import clsx from 'clsx';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_composeClasses as composeClasses } from '@mui/utils';
 import { ClockPointer } from './ClockPointer';
 import { useUtils } from '../internals/hooks/useUtils';
 import { WrapperVariantContext } from '../internals/components/wrappers/WrapperVariantContext';
 import { getHours, getMinutes } from './shared';
+import { getClockUtilityClass } from './clockClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const ClockRoot = styled('div')(({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    clock: ['clock'],
+    wrapper: ['wrapper'],
+    squareMask: ['squareMask'],
+    pin: ['pin'],
+    amButton: ['amButton'],
+    pmButton: ['pmButton']
+  };
+  return composeClasses(slots, getClockUtilityClass, classes);
+};
+
+const ClockRoot = styled('div', {
+  name: 'MuiClock',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   theme
 }) => ({
   display: 'flex',
@@ -18,7 +41,11 @@ const ClockRoot = styled('div')(({
   alignItems: 'center',
   margin: theme.spacing(2)
 }));
-const ClockClock = styled('div')({
+const ClockClock = styled('div', {
+  name: 'MuiClock',
+  slot: 'Clock',
+  overridesResolver: (_, styles) => styles.clock
+})({
   backgroundColor: 'rgba(0,0,0,.07)',
   borderRadius: '50%',
   height: 220,
@@ -27,12 +54,20 @@ const ClockClock = styled('div')({
   position: 'relative',
   pointerEvents: 'none'
 });
-const ClockWrapper = styled('div')({
+const ClockWrapper = styled('div', {
+  name: 'MuiClock',
+  slot: 'Wrapper',
+  overridesResolver: (_, styles) => styles.wrapper
+})({
   '&:focus': {
     outline: 'none'
   }
 });
-const ClockSquareMask = styled('div')(({
+const ClockSquareMask = styled('div', {
+  name: 'MuiClock',
+  slot: 'SquareMask',
+  overridesResolver: (_, styles) => styles.squareMask
+})(({
   ownerState
 }) => _extends({
   width: '100%',
@@ -52,7 +87,11 @@ const ClockSquareMask = styled('div')(({
     cursor: 'move'
   }
 }));
-const ClockPin = styled('div')(({
+const ClockPin = styled('div', {
+  name: 'MuiClock',
+  slot: 'Pin',
+  overridesResolver: (_, styles) => styles.pin
+})(({
   theme
 }) => ({
   width: 6,
@@ -64,7 +103,11 @@ const ClockPin = styled('div')(({
   left: '50%',
   transform: 'translate(-50%, -50%)'
 }));
-const ClockAmButton = styled(IconButton)(({
+const ClockAmButton = styled(IconButton, {
+  name: 'MuiClock',
+  slot: 'AmButton',
+  overridesResolver: (_, styles) => styles.amButton
+})(({
   theme,
   ownerState
 }) => _extends({
@@ -79,7 +122,11 @@ const ClockAmButton = styled(IconButton)(({
     backgroundColor: theme.palette.primary.light
   }
 }));
-const ClockPmButton = styled(IconButton)(({
+const ClockPmButton = styled(IconButton, {
+  name: 'MuiClock',
+  slot: 'PmButton',
+  overridesResolver: (_, styles) => styles.pmButton
+})(({
   theme,
   ownerState
 }) => _extends({
@@ -98,7 +145,11 @@ const ClockPmButton = styled(IconButton)(({
  * @ignore - internal component.
  */
 
-export function Clock(props) {
+export function Clock(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiClock'
+  });
   const {
     ampm,
     ampmInClock,
@@ -115,12 +166,14 @@ export function Clock(props) {
     type,
     value,
     disabled,
-    readOnly
+    readOnly,
+    className
   } = props;
   const ownerState = props;
   const utils = useUtils();
   const wrapperVariant = React.useContext(WrapperVariantContext);
   const isMoving = React.useRef(false);
+  const classes = useUtilityClasses(ownerState);
   const isSelectedTimeDisabled = isTimeDisabled(value, type);
   const isPointerInner = !ampm && type === 'hours' && (value < 1 || value > 12);
 
@@ -231,7 +284,9 @@ export function Clock(props) {
   };
 
   return /*#__PURE__*/_jsxs(ClockRoot, {
+    className: clsx(className, classes.root),
     children: [/*#__PURE__*/_jsxs(ClockClock, {
+      className: classes.clock,
       children: [/*#__PURE__*/_jsx(ClockSquareMask, {
         onTouchMove: handleTouchMove,
         onTouchEnd: handleTouchEnd,
@@ -239,9 +294,12 @@ export function Clock(props) {
         onMouseMove: handleMouseMove,
         ownerState: {
           disabled
-        }
+        },
+        className: classes.squareMask
       }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [/*#__PURE__*/_jsx(ClockPin, {}), date && /*#__PURE__*/_jsx(ClockPointer, {
+        children: [/*#__PURE__*/_jsx(ClockPin, {
+          className: classes.pin
+        }), date && /*#__PURE__*/_jsx(ClockPointer, {
           type: type,
           value: value,
           isInner: isPointerInner,
@@ -254,6 +312,7 @@ export function Clock(props) {
         role: "listbox",
         onKeyDown: handleKeyDown,
         tabIndex: 0,
+        className: classes.wrapper,
         children: children
       })]
     }), ampm && (wrapperVariant === 'desktop' || ampmInClock) && /*#__PURE__*/_jsxs(React.Fragment, {
@@ -261,6 +320,7 @@ export function Clock(props) {
         onClick: readOnly ? undefined : () => handleMeridiemChange('am'),
         disabled: disabled || meridiemMode === null,
         ownerState: ownerState,
+        className: classes.amButton,
         children: /*#__PURE__*/_jsx(Typography, {
           variant: "caption",
           children: "AM"
@@ -269,6 +329,7 @@ export function Clock(props) {
         disabled: disabled || meridiemMode === null,
         onClick: readOnly ? undefined : () => handleMeridiemChange('pm'),
         ownerState: ownerState,
+        className: classes.pmButton,
         children: /*#__PURE__*/_jsx(Typography, {
           variant: "caption",
           children: "PM"

package/ClockPicker/ClockNumber.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ClockNumberClasses } from './clockNumberClasses';
 export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
     'aria-label': string;
     disabled: boolean;
@@ -10,9 +11,9 @@ export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement>
     inner: boolean;
     label: string;
     selected: boolean;
+    classes?: Partial<ClockNumberClasses>;
 }
-export declare const classes: Record<"selected" | "disabled", string>;
 /**
  * @ignore - internal component.
  */
-export declare function ClockNumber(props: ClockNumberProps): JSX.Element;
+export declare function ClockNumber(inProps: ClockNumberProps): JSX.Element;

package/ClockPicker/ClockNumber.js

@@ -3,12 +3,33 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "disabled", "index", "inner", "label", "selected"];
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
-import { generateUtilityClasses } from '@mui/material';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
+import { getClockNumberUtilityClass, clockNumberClasses } from './clockNumberClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const classes = generateUtilityClasses('PrivateClockNumber', ['selected', 'disabled']);
-const ClockNumberRoot = styled('span')(({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    selected,
+    disabled
+  } = ownerState;
+  const slots = {
+    root: ['root', selected && 'selected', disabled && 'disabled']
+  };
+  return composeClasses(slots, getClockNumberUtilityClass, classes);
+};
+
+const ClockNumberRoot = styled('span', {
+  name: 'MuiClockNumber',
+  slot: 'Root',
+  overridesResolver: (_, styles) => [styles.root, {
+    [`&.${clockNumberClasses.disabled}`]: styles.disabled
+  }, {
+    [`&.${clockNumberClasses.selected}`]: styles.selected
+  }]
+})(({
   theme,
   ownerState
 }) => _extends({
@@ -25,10 +46,10 @@ const ClockNumberRoot = styled('span')(({
   '&:focused': {
     backgroundColor: theme.palette.background.paper
   },
-  [`&.${classes.selected}`]: {
+  [`&.${clockNumberClasses.selected}`]: {
     color: theme.palette.primary.contrastText
   },
-  [`&.${classes.disabled}`]: {
+  [`&.${clockNumberClasses.disabled}`]: {
     pointerEvents: 'none',
     color: theme.palette.text.disabled
   }
@@ -39,7 +60,12 @@ const ClockNumberRoot = styled('span')(({
  * @ignore - internal component.
  */
 
-export function ClockNumber(props) {
+export function ClockNumber(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiClockNumber'
+  });
+
   const {
     className,
     disabled,
@@ -51,12 +77,13 @@ export function ClockNumber(props) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const ownerState = props;
+  const classes = useUtilityClasses(ownerState);
   const angle = index % 12 / 12 * Math.PI * 2 - Math.PI / 2;
   const length = (CLOCK_WIDTH - CLOCK_HOUR_WIDTH - 2) / 2 * (inner ? 0.65 : 1);
   const x = Math.round(Math.cos(angle) * length);
   const y = Math.round(Math.sin(angle) * length);
   return /*#__PURE__*/_jsx(ClockNumberRoot, _extends({
-    className: clsx(className, selected && classes.selected, disabled && classes.disabled),
+    className: clsx(className, classes.root),
     "aria-disabled": disabled ? true : undefined,
     "aria-selected": selected ? true : undefined,
     role: "option",

package/ClockPicker/ClockPointer.d.ts

@@ -1,23 +1,14 @@
 import * as React from 'react';
 import { ClockPickerView } from '../internals/models';
+import { ClockPointerClasses } from './clockPointerClasses';
 export interface ClockPointerProps extends React.HTMLAttributes<HTMLDivElement> {
     hasSelected: boolean;
     isInner: boolean;
     type: ClockPickerView;
     value: number;
+    classes?: Partial<ClockPointerClasses>;
 }
 /**
  * @ignore - internal component.
- * TODO: Remove class
  */
-export declare class ClockPointer extends React.Component<ClockPointerProps> {
-    static getDerivedStateFromProps: (nextProps: ClockPointerProps, state: ClockPointer['state']) => {
-        toAnimateTransform: boolean;
-        previousType: ClockPickerView;
-    };
-    state: {
-        toAnimateTransform: boolean;
-        previousType: undefined;
-    };
-    render(): JSX.Element;
-}
+export declare function ClockPointer(inProps: ClockPointerProps): JSX.Element;

package/ClockPicker/ClockPointer.js

@@ -2,10 +2,29 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "hasSelected", "isInner", "type", "value"];
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from './shared';
+import { getClockPointerUtilityClass } from './clockPointerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ClockPointerRoot = styled('div')(({
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    thumb: ['thumb']
+  };
+  return composeClasses(slots, getClockPointerUtilityClass, classes);
+};
+
+const ClockPointerRoot = styled('div', {
+  name: 'MuiClockPointer',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
   theme,
   ownerState
 }) => _extends({
@@ -15,10 +34,14 @@ const ClockPointerRoot = styled('div')(({
   left: 'calc(50% - 1px)',
   bottom: '50%',
   transformOrigin: 'center bottom 0px'
-}, ownerState.toAnimateTransform && {
+}, ownerState.shouldAnimate && {
   transition: theme.transitions.create(['transform', 'height'])
 }));
-const ClockPointerThumb = styled('div')(({
+const ClockPointerThumb = styled('div', {
+  name: 'MuiClockPointer',
+  slot: 'Thumb',
+  overridesResolver: (_, styles) => styles.thumb
+})(({
   theme,
   ownerState
 }) => _extends({
@@ -36,67 +59,55 @@ const ClockPointerThumb = styled('div')(({
 }));
 /**
  * @ignore - internal component.
- * TODO: Remove class
  */
 
-export class ClockPointer extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      toAnimateTransform: false,
-      previousType: undefined
-    };
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      className,
-      isInner,
-      type,
-      value
-    } = _this$props,
-          other = _objectWithoutPropertiesLoose(_this$props, _excluded);
+export function ClockPointer(inProps) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiClockPointer'
+  });
 
-    const ownerState = _extends({}, this.props, this.state);
+  const {
+    className,
+    isInner,
+    type,
+    value
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
 
-    const getAngleStyle = () => {
-      const max = type === 'hours' ? 12 : 60;
-      let angle = 360 / max * value;
+  const previousType = React.useRef(type);
+  React.useEffect(() => {
+    previousType.current = type;
+  }, [type]);
 
-      if (type === 'hours' && value > 12) {
-        angle -= 360; // round up angle to max 360 degrees
-      }
+  const ownerState = _extends({}, props, {
+    shouldAnimate: previousType.current !== type
+  });
 
-      return {
-        height: Math.round((isInner ? 0.26 : 0.4) * CLOCK_WIDTH),
-        transform: `rotateZ(${angle}deg)`
-      };
-    };
+  const classes = useUtilityClasses(ownerState);
 
-    return /*#__PURE__*/_jsx(ClockPointerRoot, _extends({
-      style: getAngleStyle(),
-      className: className,
-      ownerState: ownerState
-    }, other, {
-      children: /*#__PURE__*/_jsx(ClockPointerThumb, {
-        ownerState: ownerState
-      })
-    }));
-  }
+  const getAngleStyle = () => {
+    const max = type === 'hours' ? 12 : 60;
+    let angle = 360 / max * value;
 
-}
+    if (type === 'hours' && value > 12) {
+      angle -= 360; // round up angle to max 360 degrees
+    }
 
-ClockPointer.getDerivedStateFromProps = (nextProps, state) => {
-  if (nextProps.type !== state.previousType) {
     return {
-      toAnimateTransform: true,
-      previousType: nextProps.type
+      height: Math.round((isInner ? 0.26 : 0.4) * CLOCK_WIDTH),
+      transform: `rotateZ(${angle}deg)`
     };
-  }
-
-  return {
-    toAnimateTransform: false,
-    previousType: nextProps.type
   };
-};
+
+  return /*#__PURE__*/_jsx(ClockPointerRoot, _extends({
+    style: getAngleStyle(),
+    className: clsx(className, classes.root),
+    ownerState: ownerState
+  }, other, {
+    children: /*#__PURE__*/_jsx(ClockPointerThumb, {
+      ownerState: ownerState,
+      className: classes.thumb
+    })
+  }));
+}

package/ClockPicker/clockClasses.d.ts

@@ -0,0 +1,19 @@
+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;
+}
+export declare type ClockClassKey = keyof ClockClasses;
+export declare function getClockUtilityClass(slot: string): string;
+export declare const clockClasses: ClockClasses;

package/ClockPicker/clockClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getClockUtilityClass(slot) {
+  return generateUtilityClass('MuiClock', slot);
+}
+export const clockClasses = generateUtilityClasses('MuiClock', ['root', 'clock', 'wrapper', 'squareMask', 'pin', 'amButton', 'pmButton']);

package/ClockPicker/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 declare type ClockNumberClassKey = keyof ClockNumberClasses;
+export declare function getClockNumberUtilityClass(slot: string): string;
+export declare const clockNumberClasses: ClockNumberClasses;

package/ClockPicker/clockNumberClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getClockNumberUtilityClass(slot) {
+  return generateUtilityClass('MuiClockNumber', slot);
+}
+export const clockNumberClasses = generateUtilityClasses('MuiClockNumber', ['root', 'selected', 'disabled']);

package/ClockPicker/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 declare type ClockPointerClassKey = keyof ClockPointerClasses;
+export declare function getClockPointerUtilityClass(slot: string): string;
+export declare const clockPointerClasses: ClockPointerClasses;

package/ClockPicker/clockPointerClasses.js

@@ -0,0 +1,5 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+export function getClockPointerUtilityClass(slot) {
+  return generateUtilityClass('MuiClockPointer', slot);
+}
+export const clockPointerClasses = generateUtilityClasses('MuiClockPointer', ['root', 'thumb']);