@campxdev/shared 1.4.6 → 1.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -42,6 +42,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
+    "react-flatpickr": "^3.10.13",
     "react-hook-form": "^7.40.0",
     "react-query": "^3.39.0",
     "react-router-dom": "^6.4.2",
@@ -52,6 +53,7 @@
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@types/react-flatpickr": "^3.8.8",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-essentials": "^6.5.14",
     "@storybook/addon-interactions": "^6.5.14",

package/src/components/HookForm/DatePicker.tsx

@@ -1,65 +1,40 @@
-import { Box, TextField, Typography } from '@mui/material'
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-interface Props {
-  label?: string
+import { DatePicker } from '../Input'
+import { IDatePicker } from '../Input/DatePicker'
+interface Props extends Omit<IDatePicker, 'onChange' | 'value'> {
   name: string
-  size?: 'small' | 'medium'
   control: any
-  minDate?: any
-  maxDate?: any
-  required?: boolean
 }
-export default function FormDatePicker(props: Props) {
-  const {
-    name,
-    size = 'small',
-    control,
-    label = '',
-    minDate,
-    maxDate,
-    required = false,
-  } = props
+
+export default function FormDatePicker({
+  name,
+  control,
+  minDate,
+  maxDate,
+  label,
+  required = false,
+  ...rest
+}: Props) {
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <Box>
-            <DatePicker
-              label={<FormLabel label={label} required={required} />}
-              mask="__/__/____"
-              inputFormat="DD/MM/yyyy"
-              value={field.value ?? null}
-              onChange={field.onChange}
-              minDate={minDate}
-              maxDate={maxDate}
-              renderInput={(params) => (
-                <TextField
-                  fullWidth
-                  size={size}
-                  {...params}
-                  error={Boolean(error)}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-            {error && (
-              <Typography
-                variant="caption"
-                component={'div'}
-                sx={{ pl: '2px' }}
-                color="rgb(211, 47, 47)"
-              >
-                {error.message}
-              </Typography>
-            )}
-          </Box>
-        )}
-      />
-    </LocalizationProvider>
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <DatePicker
+          label={label}
+          required={required}
+          onChange={field.onChange}
+          value={field.value}
+          minDate={minDate}
+          maxDate={maxDate}
+          inputProps={{
+            ...rest.inputProps,
+            error: !!error,
+            helperText: error?.message ?? '',
+          }}
+          {...rest}
+        />
+      )}
+    />
   )
 }

package/src/components/HookForm/DateTimePicker.tsx

@@ -1,70 +1,47 @@
-import { InputAdornment, TextField, Typography } from '@mui/material'
-import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { Controller } from 'react-hook-form'
-import DateRangeIcon from '@mui/icons-material/DateRange'
-interface Props {
-  label?: string
+import DateTimePicker, { IDateTimePicker } from '../Input/DateTimePicker'
+
+interface Props extends Omit<IDateTimePicker, 'onChange' | 'value'> {
   name: string
-  size?: 'small' | 'medium'
   control: any
-  required?: boolean
-  minDate?: any
 }
-export default function FormDateTimePicker(props: Props) {
-  const { name, size = 'small', control, label = '', required, minDate } = props
+
+export default function FormDateTimePicker({
+  name,
+  control,
+  label,
+  required,
+  minDate,
+  maxDate,
+  minTime,
+  maxTime,
+  ...rest
+}: Props) {
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <DateTimePicker
-              label={
-                <>
-                  {label}
-                  {required && (
-                    <Typography fontSize={14} component={'span'} color="error">
-                      {' *'}
-                    </Typography>
-                  )}
-                </>
-              }
-              minDate={minDate && minDate}
-              mask="__/__/____ __:__ _M"
-              inputFormat="DD/MM/yyyy hh:mm a"
-              value={field.value || null}
-              onChange={field.onChange}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <DateRangeIcon />
-                  </InputAdornment>
-                ),
-              }}
-              renderInput={(params) => (
-                <TextField
-                  fullWidth
-                  size={size}
-                  {...params}
-                  error={Boolean(error)}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-            {error && (
-              <Typography
-                variant="caption"
-                sx={{ pl: '2px' }}
-                color="rgb(211, 47, 47)"
-              >
-                {error.message}
-              </Typography>
-            )}
-          </>
-        )}
-      />
-    </LocalizationProvider>
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <DateTimePicker
+          name={name}
+          label={label}
+          required={required}
+          onChange={(v) => {
+            field.onChange(v)
+          }}
+          value={field.value}
+          minDate={minDate}
+          maxDate={maxDate}
+          minTime={minTime}
+          maxTime={maxTime}
+          inputProps={{
+            ...rest.inputProps,
+            error: !!error,
+            helperText: error?.message ?? '',
+          }}
+          {...rest}
+        />
+      )}
+    />
   )
 }

package/src/components/HookForm/TimePicker.tsx

@@ -1,82 +1,40 @@
-import DateRangeIcon from '@mui/icons-material/DateRange'
-import { InputAdornment, TextField, Typography } from '@mui/material'
-import {
-  LocalizationProvider,
-  TimePicker as MuiTimePicker,
-} from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { Controller } from 'react-hook-form'
+import TimePicker, { ITimePicker } from '../Input/TimePicker'
 
-interface Props {
-  label?: string
+interface Props extends Omit<ITimePicker, 'onChange' | 'value'> {
   name: string
-  size?: 'small' | 'medium'
   control: any
-  required?: boolean
-  hookForm?: boolean
 }
 
-export default function FormTimePicker(props: Props) {
-  const {
-    name,
-    size = 'small',
-    control,
-    label = '',
-    required,
-    hookForm = true,
-  } = props
-
+export default function FormTimePicker({
+  name,
+  control,
+  label,
+  minTime,
+  maxTime,
+  required,
+  ...rest
+}: Props) {
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <MuiTimePicker
-              label={
-                <>
-                  {label}
-                  {required && (
-                    <Typography fontSize={14} component={'span'} color="error">
-                      {' *'}
-                    </Typography>
-                  )}
-                </>
-              }
-              mask="__:__ _M"
-              inputFormat="hh:mm a"
-              value={field.value || null}
-              onChange={field.onChange}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <DateRangeIcon />
-                  </InputAdornment>
-                ),
-              }}
-              renderInput={(params) => (
-                <TextField
-                  fullWidth
-                  size={size}
-                  {...params}
-                  error={Boolean(error)}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-            {error && (
-              <Typography
-                variant="caption"
-                sx={{ pl: '2px' }}
-                color="rgb(211, 47, 47)"
-              >
-                {error.message}
-              </Typography>
-            )}
-          </>
-        )}
-      />
-    </LocalizationProvider>
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <TimePicker
+          label={label}
+          required={required}
+          onChange={field.onChange}
+          value={field.value}
+          minTime={minTime}
+          maxTime={maxTime}
+          inputProps={{
+            ...rest.inputProps,
+            error: !!error,
+            helperText: error?.message ?? '',
+          }}
+          {...rest}
+        />
+      )}
+    />
   )
 }

package/src/components/Input/DatePicker.tsx

@@ -1,60 +1,69 @@
-import { Box, TextField } from '@mui/material'
-import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import FormLabel from './FormLabel'
-interface Props {
-  label?: string
+import EventIcon from '@mui/icons-material/Event'
+import { InputAdornment, TextFieldProps } from '@mui/material'
+import 'flatpickr/dist/flatpickr.css'
+import { ReactNode } from 'react'
+import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
+import TextField from './TextField'
+
+export interface IDatePicker {
+  label: ReactNode
   name?: string
-  size?: 'small' | 'medium'
   control?: any
-  minDate?: any
-  maxDate?: any
+  minDate?: Date | string | number
+  maxDate?: Date | string | number
   required?: boolean
-  value: any
-  onChange: any
+  value: Date | null
+  onChange: (value: Date) => void
+  placeholder?: string
+  inputProps?: TextFieldProps
 }
-export default function FormDatePicker(props: Props) {
-  const {
-    name,
-    size = 'small',
-    label = '',
-    minDate,
-    maxDate,
-    required = false,
-    value,
-    onChange,
-  } = props
+
+export default function FormDatePicker({
+  name,
+  label,
+  minDate,
+  maxDate,
+  value,
+  onChange,
+  placeholder,
+  required = false,
+  ...rest
+}: IDatePicker) {
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Box>
-        <DatePicker
-          label={<FormLabel label={label} required={required} name={name} />}
-          mask="__/__/____"
-          inputFormat="DD/MM/yyyy"
-          value={value}
-          onChange={onChange}
-          minDate={minDate}
-          maxDate={maxDate}
-          renderInput={(params) => (
-            <TextField
-              fullWidth
-              size={size}
-              {...params}
-              // error={Boolean(error)}
-            />
-          )}
-        />
-        {/* {error && (
-          <Typography
-            variant="caption"
-            component={'div'}
-            sx={{ pl: '2px' }}
-            color="rgb(211, 47, 47)"
-          >
-            {error.message}
-          </Typography>
-        )} */}
-      </Box>
-    </LocalizationProvider>
+    <Flatpickr
+      onChange={(dates: Date[]) => {
+        if (onChange) onChange(dates[0])
+      }}
+      options={{
+        dateFormat: 'd-m-Y',
+        minDate,
+        maxDate,
+      }}
+      value={value || null}
+      render={(
+        props: Omit<DateTimePickerProps, 'options' | 'render'>,
+        ref: (node: HTMLInputElement | null) => void,
+      ) => {
+        return (
+          <TextField
+            placeholder={placeholder}
+            label={label}
+            name={name}
+            variant="outlined"
+            autoComplete="off"
+            required={required}
+            inputRef={ref}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <EventIcon />
+                </InputAdornment>
+              ),
+            }}
+            {...rest.inputProps}
+          />
+        )
+      }}
+    />
   )
 }

package/src/components/Input/DateTimePicker.tsx

@@ -1,70 +1,75 @@
-import { InputAdornment, TextField, Typography } from '@mui/material'
-import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import { Controller } from 'react-hook-form'
-import DateRangeIcon from '@mui/icons-material/DateRange'
-interface Props {
-  label?: string
-  name: string
-  size?: 'small' | 'medium'
-  control: any
+import EventIcon from '@mui/icons-material/Event'
+import { InputAdornment, TextFieldProps } from '@mui/material'
+import 'flatpickr/dist//flatpickr.css'
+import { ReactNode } from 'react'
+import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
+import TextField from './TextField'
+
+export interface IDateTimePicker {
+  label?: ReactNode
+  name?: string
   required?: boolean
-  minDate?: any
+  minDate?: Date | string | number
+  maxDate?: Date | string | number
+  minTime?: Date | string | number
+  maxTime?: Date | string | number
+  value: Date | null
+  onChange: (value: Date) => void
+  placeholder?: string
+  inputProps?: TextFieldProps
 }
-export default function FormDateTimePicker(props: Props) {
-  const { name, size = 'small', control, label = '', required, minDate } = props
+
+export default function DateTimePicker({
+  name,
+  label,
+  required,
+  minDate,
+  maxDate,
+  minTime,
+  maxTime,
+  onChange,
+  value,
+  placeholder,
+  ...rest
+}: IDateTimePicker) {
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <DateTimePicker
-              label={
-                <>
-                  {label}
-                  {required && (
-                    <Typography fontSize={14} component={'span'} color="error">
-                      {' *'}
-                    </Typography>
-                  )}
-                </>
-              }
-              minDate={minDate && minDate}
-              mask="__/__/____ __:__ _M"
-              inputFormat="DD/MM/yyyy hh:mm a"
-              value={field.value || null}
-              onChange={field.onChange}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <DateRangeIcon />
-                  </InputAdornment>
-                ),
-              }}
-              renderInput={(params) => (
-                <TextField
-                  fullWidth
-                  size={size}
-                  {...params}
-                  error={Boolean(error)}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-            {error && (
-              <Typography
-                variant="caption"
-                sx={{ pl: '2px' }}
-                color="rgb(211, 47, 47)"
-              >
-                {error.message}
-              </Typography>
-            )}
-          </>
-        )}
-      />
-    </LocalizationProvider>
+    <Flatpickr
+      options={{
+        enableTime: true,
+        dateFormat: 'd-m-Y h:i:K',
+        minDate,
+        maxDate,
+        minTime,
+        maxTime,
+      }}
+      onChange={(dates: Date[]) => {
+        if (onChange) onChange(dates[0])
+      }}
+      value={value || null}
+      render={(
+        props: Omit<DateTimePickerProps, 'options' | 'render'>,
+        ref: (node: HTMLInputElement | null) => void,
+      ) => {
+        return (
+          <TextField
+            placeholder={placeholder}
+            label={label}
+            name={name}
+            variant="outlined"
+            autoComplete="off"
+            required={required}
+            inputRef={ref}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <EventIcon />
+                </InputAdornment>
+              ),
+            }}
+            {...rest.inputProps}
+          />
+        )
+      }}
+    />
   )
 }

package/src/components/Input/MultiCheckbox.tsx

@@ -1,62 +1,64 @@
-import { Box, FormGroup, FormHelperText } from '@mui/material'
+import { Box, BoxProps, FormGroup, FormHelperText } from '@mui/material'
+import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
 import FormLabel from './FormLabel'
 import SingleCheckbox from './SingleCheckbox'
 
 interface Props {
-  label?: string
+  label?: ReactNode
   name: string
   size?: 'small' | 'medium'
-  control: any
-  options: Array<{ label: string; value: string }>
+  options: Array<{ label: ReactNode; value: any }>
   required?: boolean
   row?: boolean
+  error?: boolean
+  helperText?: ReactNode
+  value: { label: string; value: any }[]
+  onChange: (value: { label: ReactNode; value: any }[]) => void
+  containerProps?: BoxProps
 }
 
-export default function MultiCheckbox(props: Props) {
-  const {
-    name,
-    control,
-    label = '',
-    options = [],
-    required = false,
-    row = true,
-  } = props
-
+export default function MultiCheckbox({
+  name,
+  label,
+  options = [],
+  required = false,
+  value = [],
+  onChange,
+  error,
+  helperText,
+  row = true,
+  containerProps,
+  ...rest
+}: Props) {
   return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <Box width="100%">
-          <FormLabel label={label} required={required} name={name} />
-          <FormGroup row={row} sx={{ flexWrap: 'wrap' }}>
-            {options?.map((item, index) => (
-              <SingleCheckbox
-                name={name}
-                key={index}
-                label={item.label}
-                checked={field?.value
-                  ?.map((item: any) => item?.value)
-                  ?.includes(item?.value)}
-                onChange={(e) => {
-                  let value = field.value || []
-                  if (e.target.checked) {
-                    let newValue = [...value, item]
-                    field.onChange(newValue)
-                  } else {
-                    let filteredValue = value.filter(
-                      (opt: any) => opt?.value !== item.value,
-                    )
-                    field.onChange(filteredValue)
-                  }
-                }}
-              />
-            ))}
-          </FormGroup>
-          {error && <FormHelperText>{error.message}</FormHelperText>}
-        </Box>
-      )}
-    />
+    <Box width="100%" {...containerProps}>
+      <FormLabel label={label} required={required} name={name} />
+      <FormGroup row={row} sx={{ flexWrap: 'wrap' }}>
+        {options?.map((item, index) => (
+          <SingleCheckbox
+            name={name}
+            key={index}
+            label={item.label}
+            checked={value
+              ?.map((item: any) => item?.value)
+              ?.includes(item?.value)}
+            onChange={(e) => {
+              if (e.target.checked) {
+                let newValue = [...value, item]
+                onChange(newValue)
+              } else {
+                let filteredValue = value.filter(
+                  (opt: any) => opt?.value !== item.value,
+                )
+                onChange(filteredValue)
+              }
+            }}
+            {...rest}
+          />
+        ))}
+      </FormGroup>
+      {error && <FormHelperText>{helperText}</FormHelperText>}
+    </Box>
   )
 }

package/src/components/Input/RadioGroup.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  BoxProps,
   FormControlLabel,
   Radio,
   RadioGroup as MuiRadioGroup,
@@ -56,6 +57,7 @@ interface Props extends RadioGroupProps {
   row?: boolean
   required?: boolean
   options: { value: any; label: string | ReactNode }[]
+  containerProps?: BoxProps
 }
 
 export default function RadioGroup(props: Props) {
@@ -67,10 +69,11 @@ export default function RadioGroup(props: Props) {
     required = false,
     value,
     onChange,
+    containerProps,
     ...rest
   } = props
   return (
-    <Box width="100%">
+    <Box width="100%" {...containerProps}>
       <FormLabel label={label} name={name} required={required} />
       <MuiRadioGroup
         value={value}

package/src/components/Input/SingleSelect.tsx

@@ -7,18 +7,11 @@ import {
   Select,
   FormHelperText,
   Box,
+  BoxProps,
 } from '@mui/material'
 import { ReactNode } from 'react'
 import FormLabel from './FormLabel'
 
-type Props = {
-  options: Array<{ label: ReactNode; value: any }>
-  onChange?: (value: any) => void
-  required?: boolean
-  firstItemEmpty?: boolean
-  helperText?: string
-} & SelectProps
-
 const StyledFormControl = styled(FormControl)(({ theme }) => ({
   '& .MuiInputBase-root': {
     '& legend': { display: 'none' },
@@ -39,7 +32,6 @@ const PaperProps = {
     maxHeight: 360,
     marginTop: '1px',
     '& .MuiList-root': {
-      minWidth: '240px',
       padding: 0,
       '& li': {
         height: '60px',
@@ -55,6 +47,15 @@ const PaperProps = {
   },
 }
 
+type Props = {
+  options: Array<{ label: ReactNode; value: any }>
+  onChange?: (value: any) => void
+  required?: boolean
+  firstItemEmpty?: boolean
+  helperText?: string
+  containerProps?: BoxProps
+} & SelectProps
+
 export default function SingleSelect({
   name = 'select',
   options = [],
@@ -63,6 +64,7 @@ export default function SingleSelect({
   required,
   value,
   helperText,
+  containerProps,
   firstItemEmpty = false,
   ...props
 }: Props) {
@@ -71,7 +73,7 @@ export default function SingleSelect({
     : options
 
   return (
-    <Box width="100%">
+    <Box width="100%" {...containerProps}>
       <FormLabel required={required} label={label} name={name} />
       <StyledFormControl fullWidth>
         <Select

package/src/components/Input/TextField.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  BoxProps,
   styled,
   TextField as MuiTextField,
   TextFieldProps as MuiTextFieldProps,
@@ -17,16 +18,21 @@ const StyledTextField = styled(MuiTextField)(({ theme }) => ({
   },
 }))
 
+type TextFieldProps = {
+  containerProps?: BoxProps
+} & MuiTextFieldProps
+
 export default function TextField({
   name,
   label,
   value,
   onChange,
   required = false,
+  containerProps,
   ...rest
-}: MuiTextFieldProps) {
+}: TextFieldProps) {
   return (
-    <Box width="100%">
+    <Box width="100%" {...containerProps}>
       <FieldLabel label={label} required={required} name={name} />
       <StyledTextField
         id={name}

package/src/components/Input/TimePicker.tsx

@@ -1,82 +1,70 @@
-import DateRangeIcon from '@mui/icons-material/DateRange'
-import { InputAdornment, TextField, Typography } from '@mui/material'
-import {
-  LocalizationProvider,
-  TimePicker as MuiTimePicker,
-} from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import { Controller } from 'react-hook-form'
+import { QueryBuilder } from '@mui/icons-material'
+import { InputAdornment, TextFieldProps } from '@mui/material'
+import 'flatpickr/dist/flatpickr.css'
+import { ReactNode } from 'react'
+import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
+import TextField from './TextField'
 
-interface Props {
-  label?: string
-  name: string
-  size?: 'small' | 'medium'
-  control: any
+export interface ITimePicker {
+  label?: ReactNode
+  name?: string
   required?: boolean
-  hookForm?: boolean
+  minTime?: Date | string | number
+  maxTime?: Date | string | number
+  value: Date | null
+  onChange: (value: Date) => void
+  placeholder?: string
+  inputProps?: TextFieldProps
 }
 
-export default function TimePicker(props: Props) {
-  const {
-    name,
-    size = 'small',
-    control,
-    label = '',
-    required,
-    hookForm = true,
-  } = props
-
+export default function TimePicker({
+  name,
+  label,
+  required,
+  minTime,
+  maxTime,
+  onChange,
+  value,
+  placeholder,
+  ...rest
+}: ITimePicker) {
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <Controller
-        name={name}
-        control={control}
-        render={({ field, fieldState: { error } }) => (
-          <>
-            <MuiTimePicker
-              label={
-                <>
-                  {label}
-                  {required && (
-                    <Typography fontSize={14} component={'span'} color="error">
-                      {' *'}
-                    </Typography>
-                  )}
-                </>
-              }
-              mask="__:__ _M"
-              inputFormat="hh:mm a"
-              value={field.value || null}
-              onChange={field.onChange}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <DateRangeIcon />
-                  </InputAdornment>
-                ),
-              }}
-              renderInput={(params) => (
-                <TextField
-                  fullWidth
-                  size={size}
-                  {...params}
-                  error={Boolean(error)}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-            {error && (
-              <Typography
-                variant="caption"
-                sx={{ pl: '2px' }}
-                color="rgb(211, 47, 47)"
-              >
-                {error.message}
-              </Typography>
-            )}
-          </>
-        )}
-      />
-    </LocalizationProvider>
+    <Flatpickr
+      options={{
+        enableTime: true,
+        noCalendar: true,
+        dateFormat: 'h:i:K',
+        minTime,
+        maxTime,
+      }}
+      onChange={(dates: Date[]) => {
+        if (onChange) onChange(dates[0])
+      }}
+      value={value || null}
+      render={(
+        props: Omit<DateTimePickerProps, 'options' | 'render'>,
+        ref: (node: HTMLInputElement | null) => void,
+      ) => {
+        return (
+          <TextField
+            placeholder={placeholder}
+            label={label}
+            name={name}
+            variant="outlined"
+            autoComplete="off"
+            required={required}
+            inputRef={ref}
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <QueryBuilder />
+                </InputAdornment>
+              ),
+            }}
+            {...rest.inputProps}
+          />
+        )
+      }}
+    />
   )
 }