@availity/mui-controlled-form 2.2.7 → 2.3.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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
+
+* `mui-datepicker` updated to version `2.2.7`
+* `theme-provider` updated to version `2.2.7`
 ## [2.2.7](https://github.com/Availity/element/compare/@availity/mui-controlled-form@2.2.6...@availity/mui-controlled-form@2.2.7) (2026-03-16)
 
 ### Dependency Updates

package/README.md

@@ -10,7 +10,7 @@
 
 This package extends the Element's Form components with [react-hook-form](https://react-hook-form.com/). The goal of this package is to decrease the amount of setup involved with building a form using Element components and react-hook-form. If you would like to use another form library, the raw Element form components are also available.
 
-Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-controlled-form-introduction--docs)
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/form-components-controlled-form-readme--docs)
 
 Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7)
 

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/introduction.mdx

@@ -2,7 +2,7 @@ import { Markdown, Meta } from '@storybook/addon-docs/blocks';
 import ReadMe from './README.md?raw';
 import CHANGELOG from './CHANGELOG.md?raw';
 
-<Meta title="Form Components/Controlled Form/Introduction" />
+<Meta title="Form Components/Controlled Form/README" />
 
 <Markdown>{ReadMe}</Markdown>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "2.2.7",
+  "version": "2.3.0",
   "description": "Availity MUI/react-hook-form controlled form components - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -8,7 +8,7 @@
     "availity",
     "mui"
   ],
-  "homepage": "https://availity.github.io/element/?path=/docs/components-controlled-form-introduction--docs",
+  "homepage": "https://availity.github.io/element/?path=/docs/components-controlled-form-readme--docs",
   "bugs": {
     "url": "https://github.com/Availity/element/issues"
   },
@@ -42,7 +42,7 @@
   "dependencies": {
     "@availity/mui-autocomplete": "^2.2.6",
     "@availity/mui-checkbox": "^2.0.2",
-    "@availity/mui-datepicker": "^2.0.6",
+    "@availity/mui-datepicker": "^2.2.0",
     "@availity/mui-form-utils": "^2.0.5",
     "@availity/mui-textfield": "^2.0.5",
     "react-hook-form": "^7.55.0"

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/RHF.stories.tsx

@@ -0,0 +1,185 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import dayjs from 'dayjs';
+import * as yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Button, LoadingButton } from '@availity/mui-button';
+import { FormControl, FormControlLabel, FormLabel, Radio, RequiredKey } from '@availity/mui-form-utils';
+import { ControlledAutocomplete, ControlledDatepicker, ControlledRadioGroup, ControlledSelect, ControlledTextField, FormProvider, SubmitHandler, useForm } from '..';
+
+  /**
+   * All of our controlled form components have `react-hook-form` controllers baked in.
+   * For a simpler experience, `@availity/element` exports the necessary `react-hook-form` hooks.
+   *
+   * - [`FormProvider` component](https://react-hook-form.com/docs/formprovider) - host context object and allow consuming component to subscribe to context and use useForm props and methods.
+   * - [`useForm` hook](https://react-hook-form.com/docs/useform) - primary hook that drives `react-hook-form`.
+   * - [`useFormContext` hook](https://react-hook-form.com/docs/useformcontext) - allows you to access the form context. Intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop.
+   * - `SubmitHandler` type
+   * - `UseFormProps` type
+   * - `UseFormReturn` type
+   *
+   * For complex forms, you may need to get additional resources directly from `react-hook-form`, i.e. `useWatch`, `useFieldArray`.
+   *
+   * [Schema-based validation resolvers](https://react-hook-form.com/get-started#SchemaValidation) are available from `@hookform/resolvers`. We've included an example using `yup` but more are supported.
+   *
+   * For more information, hooks, or components see the [react-hook-form documentation](https://react-hook-form.com/)
+   */
+  const meta: Meta = {
+    title: 'Form Components/Controlled Form',
+    tags: ['autodocs'],
+    parameters: { docs: {
+      // description: { component: `${FormMigration}`},
+      source: { state: true }
+    }}
+
+  };
+
+  export default meta;
+
+  const dropdownOptions = ['Bulbasaur', 'Squirtle', 'Charmander'];
+
+  /** Form with controlled form components, `yup`, and `@hookform/resolvers/yup` */
+  export const _YupValidation: StoryObj = {
+    render: () => {
+      const schema = yup.object({
+        textField: yup
+          .string()
+          .max(200, 'Text Field cannot exceed 200 characters.')
+          .required('This field is required.'),
+        selectField: yup
+          .string()
+          .required('This Field is required.')
+          .nullable(),
+        datePicker: yup
+          .mixed<dayjs.Dayjs>()
+          .required('This Field is required.')
+          .nullable(),
+        radio: yup
+          .string()
+          .required('A selection is required'),
+      });
+
+      const isRequired = (name: string) => {
+        return(!(schema.describe().fields[name] as yup.SchemaDescription)?.optional || undefined)
+      }
+
+      type FormInputsType = yup.InferType<typeof schema>;
+
+      const onSubmit: SubmitHandler<FormInputsType> = (data) => console.log(data)
+
+      const methods = useForm({
+        defaultValues: {
+          textField: "",
+          selectField: undefined,
+          datePicker: undefined,
+          radio: "",
+        },
+        mode: 'onBlur',
+        resolver: yupResolver(schema)
+      });
+
+      return (
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(onSubmit)}>
+            <RequiredKey />
+            <ControlledTextField
+              name="textField"
+              label="Textfield"
+              margin="normal"
+              fullWidth
+              helperText='Max 200 characters'
+              required={isRequired('textField')}
+            />
+            <ControlledAutocomplete
+              name="selectField"
+              FieldProps={{
+                margin:"normal",
+                label: 'Select Field',
+                placeholder: 'Value',
+                required: isRequired('selectField'),
+              }}
+              options={dropdownOptions}
+            />
+            <ControlledDatepicker
+              name="datePicker"
+              FieldProps={{
+                label: "Date",
+                margin: "normal",
+                required: isRequired('datePicker')
+              }}
+            />
+            <ControlledRadioGroup name="radio" label="Radio Group" row aria-required required={isRequired('radio')}>
+              <FormControlLabel control={<Radio />} value="1" label="Option 1" />
+              <FormControlLabel control={<Radio />} value="2" label="Option 2" />
+            </ControlledRadioGroup>
+            <LoadingButton loading={methods?.formState?.isSubmitting} type="submit" sx={{mt: 2}}>
+              Submit
+            </LoadingButton>
+          </form>
+        </FormProvider>
+      )
+    }
+  }
+
+  /** Form with controlled form components using internal rules for validation.
+   *
+   * Useful for smaller forms where writing a full schema could be cumbersome.
+   */
+  export const _RHFRules: StoryObj = {
+    render: () => {
+      const methods = useForm({defaultValues: {textField: '', selectField: null, datePicker: null, radio: ''}});
+      const onSubmit = (data: any) => console.log(data)
+      return (
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(onSubmit)}>
+            <RequiredKey />
+            <ControlledTextField
+              name="textField"
+              label="Textfield"
+              margin="normal"
+              fullWidth
+              required
+              rules={{
+                required: 'This field is required',
+                maxLength: { value: 200, message: 'This field must not exceed 200 characters'}
+              }}
+              helperText='Max 200 characters'
+            />
+            <ControlledAutocomplete
+              name="selectField"
+              rules={{ required: 'This field is required'}}
+              FieldProps={{
+                margin:"normal",
+                label: 'Select Field',
+                placeholder: 'Value',
+                required: true,
+              }}
+              options={dropdownOptions}
+            />
+            <ControlledDatepicker
+              name="datePicker"
+              rules={{ required: 'This field is required' }}
+              FieldProps={{
+                label: "Date",
+                margin: "normal",
+                required: true,
+              }}
+            />
+            <ControlledRadioGroup
+              name="radio"
+              label="Radio Group"
+              row
+              aria-required
+              required
+              rules={{ required: 'This field is required' }}
+            >
+              <FormControlLabel control={<Radio />} value="1" label="Option 1" />
+              <FormControlLabel control={<Radio />} value="2" label="Option 2" />
+            </ControlledRadioGroup>
+            <LoadingButton loading={methods?.formState?.isSubmitting} type="submit" sx={{mt: 2}}>
+              Submit
+            </LoadingButton>
+          </form>
+        </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' } },