#TimeRangePicker

import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TimeRangePickerBasic() {
  const [value, setValue] = useState<import('@ifhover/leaf-ui').TimeRange | null>([
    '09:00',
    '18:00',
  ]);
  return (
    <Space direction="vertical" align="stretch">
      <TimeRangePicker value={value} onChange={setValue} />
      <output>
        <Text tone="muted">{value?.join(' ~ ') || '—'}</Text>
      </output>
    </Space>
  );
}

import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';

export function TimeRangePickerOptions() {
  return (
    <Space direction="vertical" align="stretch">
      <Text tone="muted">12-hour clock with seconds</Text>
      <TimeRangePicker use12Hours showSeconds defaultValue={['09:30:00', '17:45:00']} />
      <Text tone="muted">Allow an overnight range</Text>
      <TimeRangePicker allowOvernight defaultValue={['22:00', '06:00']} />
    </Space>
  );
}

import { Space, Text, TimeRangePicker } from '@ifhover/leaf-ui';

export function Capabilities() {
  return (
    <Space direction="vertical" align="stretch">
      <Text>{'Business hours for both endpoints'}</Text>
      <TimeRangePicker
        defaultValue={['09:00', '17:30']}
        disabledTime={(time) => time.hour < 9 || time.hour > 18}
        use12Hours
        minuteStep={15}
      />
    </Space>
  );
}