From cf95f5f1fdb1d29f1f66bd0a14f3dede759d834e Mon Sep 17 00:00:00 2001
From: Roxanne Young <Roxanne.Young@availity.com>
Date: Thu, 21 May 2026 10:20:33 -0400
Subject: [PATCH] feat(mui-datepicker): add timepicker and update unfilled
 pickertextfield placeholder style

---
 packages/controlled-form/src/index.ts         |   1 +
 .../src/lib/Timepicker.stories.tsx            | 104 +++++++++++++++++
 .../src/lib/Timepicker.test.tsx               | 110 ++++++++++++++++++
 .../controlled-form/src/lib/Timepicker.tsx    |  65 +++++++++++
 packages/controlled-form/src/lib/Types.tsx    |  51 ++++++++
 packages/datepicker/src/index.ts              |   1 +
 packages/datepicker/src/lib/Datepicker.tsx    |  28 +----
 .../datepicker/src/lib/PickersTextField.tsx   |  32 +++++
 .../datepicker/src/lib/Timepicker.stories.tsx |  62 ++++++++++
 .../datepicker/src/lib/Timepicker.test.tsx    |  14 +++
 packages/datepicker/src/lib/Timepicker.tsx    |  81 +++++++++++++
 packages/element/src/index.ts                 |   6 +-
 packages/theme/src/lib/legacy-theme.ts        |  11 ++
 packages/theme/src/lib/light-theme.ts         |  11 ++
 14 files changed, 548 insertions(+), 29 deletions(-)
 create mode 100644 packages/controlled-form/src/lib/Timepicker.stories.tsx
 create mode 100644 packages/controlled-form/src/lib/Timepicker.test.tsx
 create mode 100644 packages/controlled-form/src/lib/Timepicker.tsx
 create mode 100644 packages/datepicker/src/lib/PickersTextField.tsx
 create mode 100644 packages/datepicker/src/lib/Timepicker.stories.tsx
 create mode 100644 packages/datepicker/src/lib/Timepicker.test.tsx
 create mode 100644 packages/datepicker/src/lib/Timepicker.tsx

diff --git a/packages/controlled-form/src/index.ts b/packages/controlled-form/src/index.ts
index ee15a323e2..6bea8c4698 100644
--- a/packages/controlled-form/src/index.ts
+++ b/packages/controlled-form/src/index.ts
@@ -9,6 +9,7 @@ export * from './lib/ProviderAutocomplete';
 export * from './lib/RadioGroup';
 export * from './lib/Select';
 export * from './lib/TextField';
+export * from './lib/Timepicker';
 
 export {
   FormProvider,
diff --git a/packages/controlled-form/src/lib/Timepicker.stories.tsx b/packages/controlled-form/src/lib/Timepicker.stories.tsx
new file mode 100644
index 0000000000..dfc38e025c
--- /dev/null
+++ b/packages/controlled-form/src/lib/Timepicker.stories.tsx
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ControlledTimepicker, ControlledTimepickerProps } from './Timepicker';
+import { Button } from '@availity/mui-button';
+import { Paper } from '@availity/mui-paper';
+import { Typography } from '@availity/mui-typography';
+import { Grid } from '@availity/mui-layout';
+import { AllControllerPropertiesCategorized, TimepickerPropsCategorized } from './Types';
+import { FormProvider, useForm } from '..';
+import dayjs, { Dayjs } from 'dayjs';
+
+const meta: Meta<typeof ControlledTimepicker> = {
+  title: 'Form Components/Controlled Form/ControlledTimepicker',
+  component: ControlledTimepicker,
+  tags: ['autodocs'],
+  argTypes: { ...AllControllerPropertiesCategorized, ...TimepickerPropsCategorized },
+};
+
+export default meta;
+
+export const _ControlledTimePicker: StoryObj<typeof ControlledTimepicker> = {
+  render: (args: ControlledTimepickerProps) => {
+    const methods = useForm();
+
+    return (
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <ControlledTimepicker {...args} />
+          <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+            <Button
+              disabled={!methods?.formState?.isSubmitSuccessful}
+              children="Reset"
+              color="secondary"
+              onClick={() => methods.reset()}
+            />
+            <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
+          </Grid>
+          {methods?.formState?.isSubmitSuccessful ? (
+            <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+              <Typography variant="h2">Submitted Values</Typography>
+              <pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
+            </Paper>
+          ) : null}
+        </form>
+      </FormProvider>
+    );
+  },
+  args: {
+    name: 'controlledTimepicker',
+    FieldProps: {
+      fullWidth: false,
+      helperText: 'Help text for the field',
+      helpTopicId: '1234',
+      label: 'Time',
+    },
+  },
+};
+
+/**
+ * In this example, the underlying value is stored as a string in the form values,
+ * but the timepicker always receives a Dayjs object. The transform prop is used to
+ * convert the value to and from the format you want to store in the underlying
+ * form values. You can see the underlying value when submitting the form.
+ */
+export const _Transform: StoryObj<typeof ControlledTimepicker> = {
+  render: (args: ControlledTimepickerProps) => {
+    const methods = useForm();
+
+    return (
+      <FormProvider {...methods}>
+        <form onSubmit={methods.handleSubmit((data) => data)}>
+          <ControlledTimepicker {...args} />
+          <Grid container direction="row" justifyContent="space-between" marginTop={1}>
+            <Button
+              disabled={!methods?.formState?.isSubmitSuccessful}
+              children="Reset"
+              color="secondary"
+              onClick={() => methods.reset()}
+            />
+            <Button type="submit" disabled={methods?.formState?.isSubmitSuccessful} children="Submit" />
+          </Grid>
+          {methods?.formState?.isSubmitSuccessful ? (
+            <Paper sx={{ padding: '1.5rem', marginTop: '1.5rem' }}>
+              <Typography variant="h2">Submitted Values</Typography>
+              <pre data-testid="result">{JSON.stringify(methods.getValues(), null, 2)}</pre>
+            </Paper>
+          ) : null}
+        </form>
+      </FormProvider>
+    );
+  },
+  args: {
+    transform: {
+      output: (value: Dayjs) => value?.format('hh:mm A'),
+      input: (value: string) => (value ? dayjs(value, 'hh:mm A') : null),
+    },
+    name: 'controlledTimepickerTransform',
+    FieldProps: {
+      fullWidth: false,
+      helperText: 'Help text for the field',
+      helpTopicId: '1234',
+      label: 'Time',
+    },
+  },
+}
diff --git a/packages/controlled-form/src/lib/Timepicker.test.tsx b/packages/controlled-form/src/lib/Timepicker.test.tsx
new file mode 100644
index 0000000000..38f332b7f7
--- /dev/null
+++ b/packages/controlled-form/src/lib/Timepicker.test.tsx
@@ -0,0 +1,110 @@
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import { ThemeProvider } from '@availity/theme-provider';
+import dayjs from 'dayjs';
+import { ControlledTimepicker } from './Timepicker';
+import { TestForm } from './UtilComponents';
+
+const onSubmit = jest.fn();
+
+describe('ControlledTimepicker', () => {
+  test('should render successfully and submit selection', async () => {
+    const screen = render(
+      <ThemeProvider>
+        <TestForm UseFormOptions={{ values: { controlledTimepicker: null } }} onSubmit={onSubmit}>
+          <ControlledTimepicker
+            name="controlledTimepicker"
+            FieldProps={{
+              fullWidth: false,
+              helperText: 'Help text for the field',
+              helpTopicId: '1234',
+              label: 'Time',
+            }}
+          />
+        </TestForm>
+      </ThemeProvider>
+    );
+    expect(screen.getAllByText('Time')).toBeTruthy();
+    const input = screen.getByLabelText('Choose time');
+    fireEvent.click(input);
+    const listboxes = screen.getAllByRole('listbox');
+    const hourOption = listboxes[0].querySelectorAll('[role="option"]');
+    fireEvent.click(hourOption[2]);
+
+    fireEvent.click(screen.getByText('OK'));
+    fireEvent.click(screen.getByText('Submit'));
+    await waitFor(() => expect(onSubmit).toHaveBeenCalledTimes(1));
+    const result = screen.getByTestId('result');
+    await waitFor(() => {
+      const controlledTimepickerValue = JSON.parse(result.innerHTML).controlledTimepicker;
+      expect(controlledTimepickerValue).toBeDefined();
+      expect(dayjs(controlledTimepickerValue).isValid()).toBeTruthy();
+    });
+  }, 10000);
+
+  describe('when using rules', () => {
+    describe('when required', () => {
+      test('should indicate it is required when passing a string', async () => {
+        const screen = render(
+          <ThemeProvider>
+            <TestForm UseFormOptions={{ values: { controlledTimepicker: null } }} onSubmit={onSubmit}>
+              <ControlledTimepicker
+                name="controlledTimepicker"
+                FieldProps={{
+                  fullWidth: false,
+                  helperText: 'Help text for the field',
+                  helpTopicId: '1234',
+                  label: 'Time',
+                }}
+                rules={{ required: 'This field is required' }}
+              />
+            </TestForm>
+          </ThemeProvider>
+        );
+
+        expect(screen.getAllByText('*')).toBeDefined();
+      });
+
+      test('should indicate it is required when passing an object with true', async () => {
+        const screen = render(
+          <ThemeProvider>
+            <TestForm UseFormOptions={{ values: { controlledTimepicker: null } }} onSubmit={onSubmit}>
+              <ControlledTimepicker
+                name="controlledTimepicker"
+                FieldProps={{
+                  fullWidth: false,
+                  helperText: 'Help text for the field',
+                  helpTopicId: '1234',
+                  label: 'Time',
+                }}
+                rules={{ required: { value: true, message: 'This field is required' } }}
+              />
+            </TestForm>
+          </ThemeProvider>
+        );
+
+        expect(screen.getAllByText('*')).toBeDefined();
+      });
+
+      test('should not indicate it is required when passing an object with false', async () => {
+        const screen = render(
+          <ThemeProvider>
+            <TestForm UseFormOptions={{ values: { controlledTimepicker: null } }} onSubmit={onSubmit}>
+              <ControlledTimepicker
+                name="controlledTimepicker"
+                FieldProps={{
+                  fullWidth: false,
+                  helperText: 'Help text for the field',
+                  helpTopicId: '1234',
+                  label: 'Time',
+                }}
+                rules={{ required: { value: false, message: 'This field is required' } }}
+              />
+            </TestForm>
+          </ThemeProvider>
+        );
+
+        expect(screen.queryAllByText('*')).toHaveLength(0);
+      });
+    });
+  });
+});
diff --git a/packages/controlled-form/src/lib/Timepicker.tsx b/packages/controlled-form/src/lib/Timepicker.tsx
new file mode 100644
index 0000000000..8c75aeaf7f
--- /dev/null
+++ b/packages/controlled-form/src/lib/Timepicker.tsx
@@ -0,0 +1,65 @@
+import { Timepicker, TimepickerProps } from '@availity/mui-datepicker';
+import { RegisterOptions, FieldValues, Controller } from 'react-hook-form';
+import { ControllerProps, TransformProp } from './Types';
+import { Dayjs } from 'dayjs';
+
+export type ControlledTimepickerProps<Output = Dayjs | null> = Omit<
+  TimepickerProps,
+  'onBlur' | 'onChange' | 'value' | 'name'
+> &
+  Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> &
+  ControllerProps &
+  TransformProp<Dayjs | null, Output>;
+
+export const ControlledTimepicker = <Output = Dayjs | null,>({
+  name,
+  defaultValue,
+  onBlur,
+  onChange,
+  rules = {},
+  shouldUnregister,
+  value,
+  FieldProps,
+  transform,
+  ...rest
+}: ControlledTimepickerProps<Output>) => {
+  return (
+    <Controller
+      name={name}
+      defaultValue={defaultValue}
+      rules={{
+        onBlur,
+        onChange,
+        shouldUnregister,
+        value,
+        ...rules,
+      }}
+      shouldUnregister={shouldUnregister}
+      render={({ field: { onChange, value, onBlur, ref }, fieldState: { error } }) => (
+        <Timepicker
+          {...rest}
+          FieldProps={{
+            ...FieldProps,
+            required: (typeof rules.required === 'object' ? rules.required.value : !!rules.required) || FieldProps?.required,
+            error: !!error,
+            helperText: error ? (
+              <>
+                {error.message}
+                <br />
+                {FieldProps?.helperText}
+              </>
+            ) : (
+              FieldProps?.helperText
+            ),
+            inputRef: ref,
+            inputProps: {
+              onBlur: onBlur,
+            },
+          }}
+          onChange={(e) => onChange(transform?.output?.(e) ?? e)}
+          value={transform?.input?.(value) || value || null}
+        />
+      )}
+    />
+  );
+};
diff --git a/packages/controlled-form/src/lib/Types.tsx b/packages/controlled-form/src/lib/Types.tsx
index 80278b1e1e..cfad472f62 100644
--- a/packages/controlled-form/src/lib/Types.tsx
+++ b/packages/controlled-form/src/lib/Types.tsx
@@ -11,6 +11,7 @@ import {
   ControlledRadioGroupProps,
   ControlledSelectProps,
   ControlledTextFieldProps,
+  ControlledTimepickerProps,
 } from '..';
 import { HTMLAttributes } from 'react';
 
@@ -74,6 +75,14 @@ type DatepickerPropsObject = Record<
   { table: { category: 'Input Props' } }
 >;
 
+type TimepickerPropsObject = Record<
+  keyof Omit<
+    ControlledTimepickerProps,
+    keyof AllControllerProps | keyof Omit<HTMLAttributes<undefined>, 'autoFocus' | 'className' | 'onError'>
+  >,
+  { table: { category: 'Input Props' } }
+>;
+
 type ProviderAutocompletePropsObject = Record<
   keyof Omit<
     ControlledProviderAutocompleteProps,
@@ -429,6 +438,48 @@ export const DatepickerPropsCategorized: DatepickerPropsObject = {
   clearable: { table: { category: 'Input Props' } },
 };
 
+export const TimepickerPropsCategorized: TimepickerPropsObject = {
+  autoFocus: { table: { category: 'Input Props' } },
+  className: { table: { category: 'Input Props' } },
+  onError: { table: { category: 'Input Props' } },
+  sx: { table: { category: 'Input Props' } },
+  label: { table: { category: 'Input Props' } },
+  view: { table: { category: 'Input Props' } },
+  readOnly: { table: { category: 'Input Props' } },
+  onClose: { table: { category: 'Input Props' } },
+  onOpen: { table: { category: 'Input Props' } },
+  open: { table: { category: 'Input Props' } },
+  FieldProps: { table: { category: 'Input Props' } },
+  disableFuture: { table: { category: 'Input Props' } },
+  disablePast: { table: { category: 'Input Props' } },
+  views: { table: { category: 'Input Props' } },
+  onViewChange: { table: { category: 'Input Props' } },
+  localeText: { table: { category: 'Input Props' } },
+  onAccept: { table: { category: 'Input Props' } },
+  viewRenderers: { table: { category: 'Input Props' } },
+  referenceDate: { table: { category: 'Input Props' } },
+  timezone: { table: { category: 'Input Props' } },
+  formatDensity: { table: { category: 'Input Props' } },
+  selectedSections: { table: { category: 'Input Props' } },
+  onSelectedSectionsChange: { table: { category: 'Input Props' } },
+  closeOnSelect: { table: { category: 'Input Props' } },
+  format: { table: { category: 'Input Props' } },
+  inputRef: { table: { category: 'Input Props' } },
+  placement: { table: { category: 'Input Props' } },
+  clearable: { table: { category: 'Input Props' } },
+  onClear: { table: { category: 'Input Props' } },
+  minutesStep: { table: { category: 'Input Props' } },
+  minTime: { table: { category: 'Input Props' } },
+  maxTime: { table: { category: 'Input Props' } },
+  shouldDisableTime: { table: { category: 'Input Props' } },
+  disableIgnoringDatePartForTimeValidation: { table: { category: 'Input Props' } },
+  ampm: { table: { category: 'Input Props' } },
+  skipDisabled: { table: { category: 'Input Props' } },
+  timeSteps: { table: { category: 'Input Props' } },
+  ampmInClock: { table: { category: 'Input Props' } },
+  thresholdToRenderTimeInASingleColumn: { table: { category: 'Input Props' } }
+};
+
 export const CodesAutocompletePropsCategorized: CodesAutocompletePropsObject = {
   classes: { table: { category: 'Input Props' } },
   id: { table: { category: 'Input Props' } },
diff --git a/packages/datepicker/src/index.ts b/packages/datepicker/src/index.ts
index 6b7ce2cff4..33ca876e60 100644
--- a/packages/datepicker/src/index.ts
+++ b/packages/datepicker/src/index.ts
@@ -1 +1,2 @@
 export * from './lib/Datepicker';
+export * from './lib/Timepicker';
diff --git a/packages/datepicker/src/lib/Datepicker.tsx b/packages/datepicker/src/lib/Datepicker.tsx
index 895b4af73a..b910773cac 100644
--- a/packages/datepicker/src/lib/Datepicker.tsx
+++ b/packages/datepicker/src/lib/Datepicker.tsx
@@ -7,8 +7,7 @@ import { PickersTextField as MuiPickersTextField, PickersTextFieldProps as MuiPi
 import { PickerFieldUISlotProps } from '@mui/x-date-pickers/internals';
 import { FormHelperText, FormLabel, InputPropOverrides } from '@availity/mui-form-utils';
 import { forwardRef } from 'react';
-
-type AvTextFieldAdditionalProps = Pick<TextFieldProps, 'error' | 'helpTopicId' | 'helperText' | 'inputProps' | 'label' | 'required'>;
+import { AvTextFieldAdditionalProps, PickersTextField } from './PickersTextField';
 
 export type DatepickerProps = {
   value?: Dayjs | null | undefined;
@@ -50,31 +49,6 @@ export type DatepickerProps = {
 
 const paperProps = { elevation: 8, variant: 'elevation', sx: { marginTop: '4px' } } as const;
 
-const PickersTextField = forwardRef((props: MuiPickersTextFieldProps & AvTextFieldAdditionalProps, ref: React.Ref<HTMLDivElement>) => {
-  const {helperText=<></>, helpTopicId, InputLabelProps: InputLabelPropsIN, inputProps: inputPropsIN, FormHelperTextProps: FormHelperTextPropsIN,  required, ...params} = props;
-  const PickersLabel = (props: MuiPickersTextFieldProps["InputLabelProps"] & Pick<TextFieldProps, 'helpTopicId'>) => <FormLabel helpTopicId={helpTopicId} required={required} {...props}/>;
-  return (
-    <MuiPickersTextField
-      {...params}
-      helperText={helperText}
-      InputLabelProps= {{
-        component: PickersLabel,
-        ...InputLabelPropsIN,
-      }}
-      inputProps= {{
-        'aria-required': required,
-        ...inputPropsIN
-      }}
-      FormHelperTextProps= {{
-        component: FormHelperText,
-        error: params.error,
-        ...FormHelperTextPropsIN,
-      }}
-      ref={ref}
-    />
-  )
-});
-
 export const Datepicker = ({
   FieldProps,
   placement = 'bottom-start',
diff --git a/packages/datepicker/src/lib/PickersTextField.tsx b/packages/datepicker/src/lib/PickersTextField.tsx
new file mode 100644
index 0000000000..e2fd1d9c64
--- /dev/null
+++ b/packages/datepicker/src/lib/PickersTextField.tsx
@@ -0,0 +1,32 @@
+import { TextFieldProps } from '@availity/mui-textfield';
+import type {} from '@mui/x-date-pickers/AdapterDayjs';
+import { PickersTextField as MuiPickersTextField, PickersTextFieldProps as MuiPickersTextFieldProps } from '@mui/x-date-pickers/PickersTextField';
+import { FormHelperText, FormLabel } from '@availity/mui-form-utils';
+import { forwardRef } from 'react';
+
+export type AvTextFieldAdditionalProps = Pick<TextFieldProps, 'error' | 'helpTopicId' | 'helperText' | 'inputProps' | 'label' | 'required'>;
+
+export const PickersTextField = forwardRef((props: MuiPickersTextFieldProps & AvTextFieldAdditionalProps, ref: React.Ref<HTMLDivElement>) => {
+  const {helperText=<></>, helpTopicId, InputLabelProps: InputLabelPropsIN, inputProps: inputPropsIN, FormHelperTextProps: FormHelperTextPropsIN,  required, ...params} = props;
+  const PickersLabel = (props: MuiPickersTextFieldProps["InputLabelProps"] & Pick<TextFieldProps, 'helpTopicId'>) => <FormLabel helpTopicId={helpTopicId} required={required} {...props}/>;
+  return (
+    <MuiPickersTextField
+      {...params}
+      helperText={helperText}
+      InputLabelProps= {{
+        component: PickersLabel,
+        ...InputLabelPropsIN,
+      }}
+      inputProps= {{
+        'aria-required': required,
+        ...inputPropsIN
+      }}
+      FormHelperTextProps= {{
+        component: FormHelperText,
+        error: params.error,
+        ...FormHelperTextPropsIN,
+      }}
+      ref={ref}
+    />
+  )
+});
diff --git a/packages/datepicker/src/lib/Timepicker.stories.tsx b/packages/datepicker/src/lib/Timepicker.stories.tsx
new file mode 100644
index 0000000000..32c1fa4b3d
--- /dev/null
+++ b/packages/datepicker/src/lib/Timepicker.stories.tsx
@@ -0,0 +1,62 @@
+// Each exported component in the package should have its own stories file
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Dayjs } from 'dayjs';
+import { Stack } from '@availity/mui-layout';
+import { Timepicker, TimepickerProps } from './Timepicker';
+
+const meta: Meta<typeof Timepicker> = {
+  title: 'Form Components/Uncontrolled Fields/Timepicker',
+  component: Timepicker,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _Timepicker: StoryObj<typeof Timepicker> = {
+  render: (args: TimepickerProps) => {
+    const [value, setValue] = useState<Dayjs | null>(null);
+
+    return (
+      <Timepicker
+        {...args}
+        value={value}
+        onChange={(value) => {
+          setValue(value);
+        }}
+      />
+    );
+  },
+  args: {
+    FieldProps: {
+      fullWidth: false,
+      helperText: 'Help text for the field',
+      helpTopicId: '1234',
+      label: 'Time'
+    },
+    timeSteps: { minutes: 15 }
+  },
+};
+
+/** Notice the new `read-only` styling. We're moving away from `disabled` in favor of `read-only`.
+ * _See the [Disabled Fields Explainer](./?path=/docs/upgrading/bs4-migration-form-migration--disabled-fields) for more information on when to use each._
+*/
+export const _States: StoryObj<typeof Timepicker> = {
+  render: (args) => (
+    <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap' }}>
+      <Timepicker {...args} FieldProps={{...args.FieldProps, id: "default", label: "Default"}}/>
+      <Timepicker {...args} FieldProps={{...args.FieldProps, id: "focused", label: "Focused", focused: true}} />
+      <Timepicker {...args} FieldProps={{...args.FieldProps, id: "error", label: "Error", error: true}} />
+      <Timepicker {...args} FieldProps={{...args.FieldProps, id: "read-only", label: "Read Only"}} readOnly />
+      <Timepicker {...args} FieldProps={{...args.FieldProps, id: "disabled", label: "Disabled"}} disabled />
+    </Stack>
+  ),
+  args: {
+    FieldProps: {
+      fullWidth: false,
+      helperText: 'Help text for the field',
+      helpTopicId: '1234',
+      label: 'Time',
+    },
+  },
+};
diff --git a/packages/datepicker/src/lib/Timepicker.test.tsx b/packages/datepicker/src/lib/Timepicker.test.tsx
new file mode 100644
index 0000000000..c4006364be
--- /dev/null
+++ b/packages/datepicker/src/lib/Timepicker.test.tsx
@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { ThemeProvider } from '@availity/theme-provider';
+import { Timepicker } from './Timepicker';
+
+describe('Timepicker', () => {
+  test('should render successfully', () => {
+    const { getAllByText } = render(
+      <ThemeProvider>
+        <Timepicker FieldProps={{ label: 'Test' }} onChange={jest.fn()} value={null} />
+      </ThemeProvider>
+    );
+    expect(getAllByText('Test')).toBeTruthy();
+  });
+});
diff --git a/packages/datepicker/src/lib/Timepicker.tsx b/packages/datepicker/src/lib/Timepicker.tsx
new file mode 100644
index 0000000000..52f89ea638
--- /dev/null
+++ b/packages/datepicker/src/lib/Timepicker.tsx
@@ -0,0 +1,81 @@
+import { ClockIcon } from '@availity/mui-icon';
+import { TimePicker as MuiTimePicker, TimePickerProps as MuiTimePickerProps } from '@mui/x-date-pickers/TimePicker';
+import type { Dayjs } from 'dayjs';
+import type {} from '@mui/x-date-pickers/AdapterDayjs';
+import { ExportedPickerFieldUIProps, PickerFieldUISlotProps } from '@mui/x-date-pickers/internals';
+import { AvTextFieldAdditionalProps, PickersTextField } from './PickersTextField';
+
+export type TimepickerProps = {
+  value?: Dayjs | null | undefined;
+  /** Props applied to the `PickersTextField` component */
+  FieldProps?: PickerFieldUISlotProps['textField'] & AvTextFieldAdditionalProps;
+  /** Determines where the Calendar will be placed when opened.
+   * @default bottom-start
+   */
+  placement?: 'bottom-start' | 'bottom' | 'bottom-end';
+}
+  & Pick<ExportedPickerFieldUIProps, 'onClear' | 'clearable'>
+  & Omit<
+  MuiTimePickerProps<false>,
+  | 'components'
+  | 'componentsProps'
+  | 'desktopModeMediaQuery'
+  | 'DialogProps'
+  | 'disableOpenPicker'
+  | 'enableAccessibleFieldDOMStructure'
+  | 'OpenPickerButtonProps'
+  | 'openTo'
+  | 'orientation'
+  | 'PaperProps'
+  | 'PopperProps'
+  | 'reduceAnimations'
+  | 'renderInput'
+  | 'rifmFormatter'
+  | 'showToolbar'
+  | 'slots'
+  | 'slotProps'
+  | 'ToolbarComponent'
+  | 'toolbarFormat'
+  | 'toolbarPlaceholder'
+  | 'toolbarTitle'
+  | 'TransitionComponent'
+  | 'value'
+>;
+
+const paperProps = { elevation: 8, variant: 'elevation', sx: { marginTop: '4px' } } as const;
+
+export const Timepicker = ({
+  FieldProps,
+  placement = 'bottom-start',
+  clearable,
+  onClear,
+  ...props
+}: TimepickerProps): React.JSX.Element => {
+  return (
+    <MuiTimePicker
+      {...props}
+      slotProps={{
+        desktopPaper: paperProps,
+        mobilePaper: {
+          ...paperProps,
+          'aria-label': FieldProps?.label?.toString() || FieldProps?.inputProps?.['aria-label'] || 'Time picker',
+          'aria-labelledby': FieldProps?.inputProps?.['aria-labelledby'] || undefined,
+        },
+        field: { clearable, onClear },
+        textField: FieldProps,
+        popper: {
+          placement,
+          'aria-label': FieldProps?.label?.toString() || FieldProps?.inputProps?.['aria-label'] || 'Time picker',
+          'aria-labelledby': FieldProps?.inputProps?.['aria-labelledby'] || undefined,
+        },
+        openPickerIcon: {
+          fontSize: 'xsmall',
+        },
+      }}
+      slots={{
+        openPickerIcon: ClockIcon,
+        textField: PickersTextField
+      }}
+    />
+  );
+};
diff --git a/packages/element/src/index.ts b/packages/element/src/index.ts
index bed8591507..e9ae7087fd 100644
--- a/packages/element/src/index.ts
+++ b/packages/element/src/index.ts
@@ -91,6 +91,7 @@ export {
   ControlledRadioGroup,
   ControlledSelect,
   ControlledTextField,
+  ControlledTimepicker,
 } from '@availity/mui-controlled-form';
 export type {
   SubmitHandler,
@@ -107,11 +108,12 @@ export type {
   ControlledRadioGroupProps,
   ControlledSelectProps,
   ControlledTextFieldProps,
+  ControlledTimepickerProps,
 } from '@availity/mui-controlled-form';
 
 // Datepicker
-export { Datepicker } from '@availity/mui-datepicker';
-export type { DatepickerProps } from '@availity/mui-datepicker';
+export { Datepicker, Timepicker } from '@availity/mui-datepicker';
+export type { DatepickerProps, TimepickerProps } from '@availity/mui-datepicker';
 
 // Dialog
 export { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@availity/mui-dialog';
diff --git a/packages/theme/src/lib/legacy-theme.ts b/packages/theme/src/lib/legacy-theme.ts
index 9d1785e483..9f9ced6d4f 100644
--- a/packages/theme/src/lib/legacy-theme.ts
+++ b/packages/theme/src/lib/legacy-theme.ts
@@ -1898,6 +1898,17 @@ export const legacyTheme = {
             },
           },
         },
+        sectionsContainer: {
+          variants: [
+            {
+              props: { hasStartAdornment: false, isFieldFocused: false, isFieldValueEmpty: true },
+              style: {
+                color: tokens.colorTextPlaceholder,
+                opacity: 1,
+              },
+            }
+          ]
+        },
       },
     },
     MuiPickersMonth: {
diff --git a/packages/theme/src/lib/light-theme.ts b/packages/theme/src/lib/light-theme.ts
index e4bd0857fb..a65bcf99a0 100644
--- a/packages/theme/src/lib/light-theme.ts
+++ b/packages/theme/src/lib/light-theme.ts
@@ -1863,6 +1863,17 @@ export const lightTheme = {
             height: '2.25rem',
           },
         },
+        sectionsContainer: {
+          variants: [
+            {
+              props: { hasStartAdornment: false, isFieldFocused: false, isFieldValueEmpty: true },
+              style: {
+                color: tokens.colorTextPlaceholder,
+                opacity: 1,
+              },
+            }
+          ]
+        },
       },
     },
     MuiPickersOutlinedInput: {