@availity/mui-controlled-form 2.2.8 → 2.3.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.3.1](https://github.com/Availity/element/compare/@availity/mui-controlled-form@2.3.0...@availity/mui-controlled-form@2.3.1) (2026-05-27)
+
+### Dependency Updates
+
+* `mui-autocomplete` updated to version `2.3.0`
+* `mui-datepicker` updated to version `2.3.0`
+* `mui-form-utils` updated to version `2.3.0`
+* `mui-textfield` updated to version `2.3.0`
+## [2.3.0](https://github.com/Availity/element/compare/@availity/mui-controlled-form@2.2.8...@availity/mui-controlled-form@2.3.0) (2026-05-22)
+
+### Dependency Updates
+
+* `mui-datepicker` updated to version `2.2.8`
+* `theme-provider` updated to version `2.2.8`
+
+### Features
+
+* **mui-datepicker:** add timepicker and update unfilled pickertextfield placeholder style ([cf95f5f](https://github.com/Availity/element/commit/cf95f5f1fdb1d29f1f66bd0a14f3dede759d834e))
+
 ## [2.2.8](https://github.com/Availity/element/compare/@availity/mui-controlled-form@2.2.7...@availity/mui-controlled-form@2.2.8) (2026-04-17)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -5,7 +5,7 @@ export { FormProvider, SubmitHandler, UseFormProps, UseFormReturn, useForm, useF
 import { ChipTypeMap } from '@mui/material/Chip';
 import { CheckboxProps } from '@availity/mui-checkbox';
 import { ApiConfig } from '@availity/api-axios';
-import { DatepickerProps } from '@availity/mui-datepicker';
+import { DatepickerProps, TimepickerProps } from '@availity/mui-datepicker';
 import { Dayjs } from 'dayjs';
 import { InputProps, RadioGroupProps, FormControlProps, SelectProps } from '@availity/mui-form-utils';
 import { TextFieldProps } from '@availity/mui-textfield';
@@ -97,4 +97,7 @@ declare const ControlledSelect: <Output = string, Input = unknown>({ name, defau
 type ControlledTextFieldProps<Output = string> = Omit<TextFieldProps, 'onBlur' | 'onChange' | 'value' | 'name'> & Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> & ControllerProps & TransformProp<string, Output>;
 declare const ControlledTextField: <Output = string>({ name, defaultValue, disabled, helperText, onBlur, onChange, rules, shouldUnregister, value, transform, ...rest }: ControlledTextFieldProps<Output>) => react_jsx_runtime.JSX.Element;
 
-export { ControlledAsyncAutocomplete, type ControlledAsyncAutocompleteProps, ControlledAutocomplete, type ControlledAutocompleteProps, ControlledCheckbox, type ControlledCheckboxProps, ControlledCodesAutocomplete, type ControlledCodesAutocompleteProps, ControlledDatepicker, type ControlledDatepickerProps, ControlledInput, type ControlledInputProps, type ControlledOrgAutocompleteProps, ControlledOrganizationAutocomplete, ControlledProviderAutocomplete, type ControlledProviderAutocompleteProps, ControlledRadioGroup, type ControlledRadioGroupProps, ControlledSelect, type ControlledSelectProps, ControlledTextField, type ControlledTextFieldProps };
+type ControlledTimepickerProps<Output = Dayjs | null> = Omit<TimepickerProps, 'onBlur' | 'onChange' | 'value' | 'name'> & Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> & ControllerProps & TransformProp<Dayjs | null, Output>;
+declare const ControlledTimepicker: <Output = Dayjs | null>({ name, defaultValue, onBlur, onChange, rules, shouldUnregister, value, FieldProps, transform, ...rest }: ControlledTimepickerProps<Output>) => react_jsx_runtime.JSX.Element;
+
+export { ControlledAsyncAutocomplete, type ControlledAsyncAutocompleteProps, ControlledAutocomplete, type ControlledAutocompleteProps, ControlledCheckbox, type ControlledCheckboxProps, ControlledCodesAutocomplete, type ControlledCodesAutocompleteProps, ControlledDatepicker, type ControlledDatepickerProps, ControlledInput, type ControlledInputProps, type ControlledOrgAutocompleteProps, ControlledOrganizationAutocomplete, ControlledProviderAutocomplete, type ControlledProviderAutocompleteProps, ControlledRadioGroup, type ControlledRadioGroupProps, ControlledSelect, type ControlledSelectProps, ControlledTextField, type ControlledTextFieldProps, ControlledTimepicker, type ControlledTimepickerProps };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { FormProvider, SubmitHandler, UseFormProps, UseFormReturn, useForm, useF
 import { ChipTypeMap } from '@mui/material/Chip';
 import { CheckboxProps } from '@availity/mui-checkbox';
 import { ApiConfig } from '@availity/api-axios';
-import { DatepickerProps } from '@availity/mui-datepicker';
+import { DatepickerProps, TimepickerProps } from '@availity/mui-datepicker';
 import { Dayjs } from 'dayjs';
 import { InputProps, RadioGroupProps, FormControlProps, SelectProps } from '@availity/mui-form-utils';
 import { TextFieldProps } from '@availity/mui-textfield';
@@ -97,4 +97,7 @@ declare const ControlledSelect: <Output = string, Input = unknown>({ name, defau
 type ControlledTextFieldProps<Output = string> = Omit<TextFieldProps, 'onBlur' | 'onChange' | 'value' | 'name'> & Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> & ControllerProps & TransformProp<string, Output>;
 declare const ControlledTextField: <Output = string>({ name, defaultValue, disabled, helperText, onBlur, onChange, rules, shouldUnregister, value, transform, ...rest }: ControlledTextFieldProps<Output>) => react_jsx_runtime.JSX.Element;
 
-export { ControlledAsyncAutocomplete, type ControlledAsyncAutocompleteProps, ControlledAutocomplete, type ControlledAutocompleteProps, ControlledCheckbox, type ControlledCheckboxProps, ControlledCodesAutocomplete, type ControlledCodesAutocompleteProps, ControlledDatepicker, type ControlledDatepickerProps, ControlledInput, type ControlledInputProps, type ControlledOrgAutocompleteProps, ControlledOrganizationAutocomplete, ControlledProviderAutocomplete, type ControlledProviderAutocompleteProps, ControlledRadioGroup, type ControlledRadioGroupProps, ControlledSelect, type ControlledSelectProps, ControlledTextField, type ControlledTextFieldProps };
+type ControlledTimepickerProps<Output = Dayjs | null> = Omit<TimepickerProps, 'onBlur' | 'onChange' | 'value' | 'name'> & Pick<RegisterOptions<FieldValues, string>, 'onBlur' | 'onChange' | 'value'> & ControllerProps & TransformProp<Dayjs | null, Output>;
+declare const ControlledTimepicker: <Output = Dayjs | null>({ name, defaultValue, onBlur, onChange, rules, shouldUnregister, value, FieldProps, transform, ...rest }: ControlledTimepickerProps<Output>) => react_jsx_runtime.JSX.Element;
+
+export { ControlledAsyncAutocomplete, type ControlledAsyncAutocompleteProps, ControlledAutocomplete, type ControlledAutocompleteProps, ControlledCheckbox, type ControlledCheckboxProps, ControlledCodesAutocomplete, type ControlledCodesAutocompleteProps, ControlledDatepicker, type ControlledDatepickerProps, ControlledInput, type ControlledInputProps, type ControlledOrgAutocompleteProps, ControlledOrganizationAutocomplete, ControlledProviderAutocomplete, type ControlledProviderAutocompleteProps, ControlledRadioGroup, type ControlledRadioGroupProps, ControlledSelect, type ControlledSelectProps, ControlledTextField, type ControlledTextFieldProps, ControlledTimepicker, type ControlledTimepickerProps };

package/dist/index.js

@@ -80,9 +80,10 @@ __export(index_exports, {
   ControlledRadioGroup: () => ControlledRadioGroup,
   ControlledSelect: () => ControlledSelect,
   ControlledTextField: () => ControlledTextField,
-  FormProvider: () => import_react_hook_form9.FormProvider,
-  useForm: () => import_react_hook_form9.useForm,
-  useFormContext: () => import_react_hook_form9.useFormContext
+  ControlledTimepicker: () => ControlledTimepicker,
+  FormProvider: () => import_react_hook_form10.FormProvider,
+  useForm: () => import_react_hook_form10.useForm,
+  useFormContext: () => import_react_hook_form10.useFormContext
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -720,8 +721,76 @@ var ControlledTextField = (_a) => {
   );
 };
 
-// src/index.ts
+// src/lib/Timepicker.tsx
+var import_mui_datepicker2 = require("@availity/mui-datepicker");
 var import_react_hook_form9 = require("react-hook-form");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ControlledTimepicker = (_a) => {
+  var _b = _a, {
+    name,
+    defaultValue,
+    onBlur,
+    onChange,
+    rules = {},
+    shouldUnregister,
+    value,
+    FieldProps,
+    transform
+  } = _b, rest = __objRest(_b, [
+    "name",
+    "defaultValue",
+    "onBlur",
+    "onChange",
+    "rules",
+    "shouldUnregister",
+    "value",
+    "FieldProps",
+    "transform"
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react_hook_form9.Controller,
+    {
+      name,
+      defaultValue,
+      rules: __spreadValues({
+        onBlur,
+        onChange,
+        shouldUnregister,
+        value
+      }, rules),
+      shouldUnregister,
+      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2, ref }, fieldState: { error } }) => {
+        var _a2;
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_mui_datepicker2.Timepicker,
+          __spreadProps(__spreadValues({}, rest), {
+            FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+              required: (typeof rules.required === "object" ? rules.required.value : !!rules.required) || (FieldProps == null ? void 0 : FieldProps.required),
+              error: !!error,
+              helperText: error ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                error.message,
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("br", {}),
+                FieldProps == null ? void 0 : FieldProps.helperText
+              ] }) : FieldProps == null ? void 0 : FieldProps.helperText,
+              inputRef: ref,
+              inputProps: {
+                onBlur: onBlur2
+              }
+            }),
+            onChange: (e) => {
+              var _a3, _b2;
+              return onChange2((_b2 = (_a3 = transform == null ? void 0 : transform.output) == null ? void 0 : _a3.call(transform, e)) != null ? _b2 : e);
+            },
+            value: ((_a2 = transform == null ? void 0 : transform.input) == null ? void 0 : _a2.call(transform, value2)) || value2 || null
+          })
+        );
+      }
+    }
+  );
+};
+
+// src/index.ts
+var import_react_hook_form10 = require("react-hook-form");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ControlledAsyncAutocomplete,
@@ -735,6 +804,7 @@ var import_react_hook_form9 = require("react-hook-form");
   ControlledRadioGroup,
   ControlledSelect,
   ControlledTextField,
+  ControlledTimepicker,
   FormProvider,
   useForm,
   useFormContext

package/dist/index.mjs

@@ -684,6 +684,74 @@ var ControlledTextField = (_a) => {
   );
 };
 
+// src/lib/Timepicker.tsx
+import { Timepicker } from "@availity/mui-datepicker";
+import { Controller as Controller9 } from "react-hook-form";
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var ControlledTimepicker = (_a) => {
+  var _b = _a, {
+    name,
+    defaultValue,
+    onBlur,
+    onChange,
+    rules = {},
+    shouldUnregister,
+    value,
+    FieldProps,
+    transform
+  } = _b, rest = __objRest(_b, [
+    "name",
+    "defaultValue",
+    "onBlur",
+    "onChange",
+    "rules",
+    "shouldUnregister",
+    "value",
+    "FieldProps",
+    "transform"
+  ]);
+  return /* @__PURE__ */ jsx12(
+    Controller9,
+    {
+      name,
+      defaultValue,
+      rules: __spreadValues({
+        onBlur,
+        onChange,
+        shouldUnregister,
+        value
+      }, rules),
+      shouldUnregister,
+      render: ({ field: { onChange: onChange2, value: value2, onBlur: onBlur2, ref }, fieldState: { error } }) => {
+        var _a2;
+        return /* @__PURE__ */ jsx12(
+          Timepicker,
+          __spreadProps(__spreadValues({}, rest), {
+            FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+              required: (typeof rules.required === "object" ? rules.required.value : !!rules.required) || (FieldProps == null ? void 0 : FieldProps.required),
+              error: !!error,
+              helperText: error ? /* @__PURE__ */ jsxs6(Fragment6, { children: [
+                error.message,
+                /* @__PURE__ */ jsx12("br", {}),
+                FieldProps == null ? void 0 : FieldProps.helperText
+              ] }) : FieldProps == null ? void 0 : FieldProps.helperText,
+              inputRef: ref,
+              inputProps: {
+                onBlur: onBlur2
+              }
+            }),
+            onChange: (e) => {
+              var _a3, _b2;
+              return onChange2((_b2 = (_a3 = transform == null ? void 0 : transform.output) == null ? void 0 : _a3.call(transform, e)) != null ? _b2 : e);
+            },
+            value: ((_a2 = transform == null ? void 0 : transform.input) == null ? void 0 : _a2.call(transform, value2)) || value2 || null
+          })
+        );
+      }
+    }
+  );
+};
+
 // src/index.ts
 import {
   FormProvider,
@@ -702,6 +770,7 @@ export {
   ControlledRadioGroup,
   ControlledSelect,
   ControlledTextField,
+  ControlledTimepicker,
   FormProvider,
   useForm,
   useFormContext2 as useFormContext

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "2.2.8",
+  "version": "2.3.1",
   "description": "Availity MUI/react-hook-form controlled form components - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,15 +40,15 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-autocomplete": "^2.2.6",
+    "@availity/mui-autocomplete": "^2.2.7",
     "@availity/mui-checkbox": "^2.0.2",
-    "@availity/mui-datepicker": "^2.1.0",
-    "@availity/mui-form-utils": "^2.0.5",
-    "@availity/mui-textfield": "^2.0.5",
+    "@availity/mui-datepicker": "^2.2.1",
+    "@availity/mui-form-utils": "^2.0.6",
+    "@availity/mui-textfield": "^2.0.6",
     "react-hook-form": "^7.55.0"
   },
   "devDependencies": {
-    "@availity/api-axios": "^12.0.4",
+    "@availity/api-axios": "^12.2.1",
     "@availity/mui-button": "^2.0.2",
     "@availity/mui-layout": "^2.0.1",
     "@availity/mui-menu": "^2.0.2",

package/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,

package/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',
+    },
+  },
+}

package/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);
+      });
+    });
+  });
+});

package/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}
+        />
+      )}
+    />
+  );
+};

package/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' } },