TimePicker

import { TimePicker } from '@caroainc/ui-components/client'

const [time, setTime] = React.useState('09:30')
 
<TimePicker value={time} onChange={setTime} />

// 15分間隔
<TimePicker value={time} onChange={setTime} interval={15} />
 
// 30分間隔（デフォルト）
<TimePicker value={time} onChange={setTime} interval={30} />
 
// 60分間隔
<TimePicker value={time} onChange={setTime} interval={60} />

<TimePicker
  value={time}
  onChange={setTime}
  minTime="08:00"
  maxTime="18:00"
/>

<TimePicker
  value={time}
  onChange={setTime}
  placeholder="開始時刻を選択"
/>

<TimePicker value="09:30" disabled />

import { Field, FieldLabel, TimePicker } from '@caroainc/ui-components/client'
 
function BusinessHoursForm() {
  const [startTime, setStartTime] = React.useState('09:00')
  const [endTime, setEndTime] = React.useState('18:00')
 
  return (
    <div className="flex gap-4">
      <Field>
        <FieldLabel>開始時刻</FieldLabel>
        <TimePicker value={startTime} onChange={setStartTime} />
      </Field>
      <Field>
        <FieldLabel>終了時刻</FieldLabel>
        <TimePicker value={endTime} onChange={setEndTime} />
      </Field>
    </div>
  )
}