timepicker.addEventListener('dds-valid-time', e => {
  console.log('Valid Value:', e.detail)
  timepicker.feedback = 'valid'
  timepicker.status = 'valid'
  timepicker.feedbackType = 'positive'
})

timepicker.addEventListener('dds-invalid-time', e => {
  console.log('dds-invalid-time', event.detail.value)

  timepicker2.status = 'error'
  timepicker2.feedbackType = 'negative'

  if(event.detail.type === 'invalid') {
    timepicker2.feedback = 'Invalid time'
  }

  if(event.detail.type === 'out-of-range') {
    timepicker2.feedback = 'Time is out of range'
  }
})

timepicker.addEventListener('dds-change', e => {
  console.log('Value:', e.detail)
})

import { DapDSButtonReact, DapDSTimePickerReact } from 'dap-design-system/dist/react'
import { Controller, useForm } from 'react-hook-form';

function App() {
  const {
    control,
    handleSubmit,
    setValue,
    setError,
    formState: { errors },
  } = useForm()

  const onSubmit = (data: any) => {
    console.log('data', data)
  }
  
  return (
    <div className="App">
    <form onSubmit={handleSubmit(onSubmit)} noValidate>
      <Controller
        name="timepicker"
        control={control}
        render={({ field: { value } }) => (
          <DapDSTimePickerReact
            id="timepicker"
            label="Meeting time"
            description="Choose the meeting start time"
            required
            name="timepicker"
            value={value}
            feedback={errors?.timepicker?.message?.toString()}
            feedbackType={errors?.timepicker ? 'negative' : 'positive'}
            onDdsChange={(e) => {
              console.log(e)
              setValue('timepicker', e.detail.value, { shouldValidate: true })}
            }
            onDdsInvalidTime={(e) => {
              console.log(e)
              if (e.detail.type === 'invalid') {
                setError('timepicker', { message: 'Invalid time format' })
              }

              if (e.detail.type === 'out-of-range') {
                setError('timepicker', { message: 'Time out of range' })
              }
            }}
            onDdsValidTime={(e) => {
              console.log(e)
              setError('timepicker', { message: '' })
            }}
          >
          </DapDSTimePickerReact>
        )}
        rules={{
          validate: {
            required: value => {
              if (!value) return '*Required'
            },
          },
        }}
      />
      <DapDSButtonReact htmlType="submit">Submit</DapDSButtonReact>
    </form>
    </div>
  );
}

export default App;