Date Picker

{
    const [value, setValue] = useState<Date | null>(ANCHOR);
    return (
      <div style={col}>
        <div style={caption}>
          Single-day picker. Click the trigger to open the 288 px panel,
          pick a day to commit. Month + year are native <code>&lt;select&gt;</code>s —
          tab into them to get the OS listbox.
        </div>
        <DatePicker
          label="Date"
          required
          tooltip
          placeholder="Pick a date"
          value={value}
          onChange={setValue}
        />
        <div style={valueRow}>
          value = {value ? value.toISOString().slice(0, 10) : 'null'}
        </div>
      </div>
    );
  }

{
    const [value, setValue] = useState<TimeValue | null>({
      hour: 2,
      minute: 30,
      meridiem: 'pm',
    });
    return (
      <div style={col}>
        <div style={caption}>
          Time-only picker. Numeric inputs for HH + MM, then an AM/PM
          toggle pair bound to a <code>role="radiogroup"</code>. Use when
          the date is already fixed by context (meeting rooms, daily
          standups, appointment slots).
        </div>
        <DatePicker
          type="time"
          label="Time"
          required
          tooltip
          placeholder="Pick a time"
          value={value}
          onChange={setValue}
        />
        <div style={valueRow}>
          value ={' '}
          {value
            ? `${String(value.hour).padStart(2, '0')}:${String(value.minute).padStart(2, '0')} ${value.meridiem.toUpperCase()}`
            : 'null'}
        </div>
      </div>
    );
  }

{
    const [value, setValue] = useState<{
      date: Date | null;
      time: TimeValue;
    } | null>({
      date: ANCHOR,
      time: { hour: 2, minute: 30, meridiem: 'pm' },
    });
    return (
      <div style={col}>
        <div style={caption}>
          Calendar + time footer in one popover. Prefer this over two
          side-by-side pickers — the Tab journey stays linear (label →
          trigger → day grid → time inputs → meridiem), and consumers
          manage a single <code>value</code> atom instead of two.
        </div>
        <DatePicker
          type="datetime"
          label="Date and Time"
          required
          tooltip
          placeholder="Pick date + time"
          value={value}
          onChange={setValue}
        />
        <div style={valueRow}>
          value ={' '}
          {value?.date
            ? `${value.date.toISOString().slice(0, 10)} @ ${String(value.time.hour).padStart(2, '0')}:${String(value.time.minute).padStart(2, '0')} ${value.time.meridiem.toUpperCase()}`
            : 'null'}
        </div>
      </div>
    );
  }

{
    const [value, setValue] = useState<DateRangeValue>({
      start: new Date(2026, 1, 6),
      end: new Date(2026, 1, 13),
    });
    return (
      <div style={col}>
        <div style={caption}>
          Dual-calendar inclusive range. Click once to anchor the start,
          hover to preview the fill, click again to commit the end. Teal-
          700 on endpoints, teal-200 mid-range, live hover preview before
          the second click lands. Panel is 576 px wide (two months side
          by side).
        </div>
        <DatePicker
          type="range"
          label="Travel window"
          required
          tooltip
          placeholder="Pick a range"
          value={value}
          onChange={setValue}
        />
        <div style={valueRow}>
          start = {value.start ? value.start.toISOString().slice(0, 10) : 'null'}
          {' · '}
          end = {value.end ? value.end.toISOString().slice(0, 10) : 'null'}
        </div>
      </div>
    );
  }

<div style={col}>
      <div style={caption}>
        Pixel-port of the state rows from Figma frame <code>6548:3304</code>.
        Hover the first field to see the border fade from primary-700 to
        primary-500. The error row renders the description line in error-600
        and flips <code>aria-invalid</code>. The disabled row drops its
        border and fills with neutral-100; clicking it does nothing.
      </div>
      <div style={row}>
        <DatePicker
          label="Enabled (hover me)"
          placeholder="MM/DD/YYYY"
          defaultValue={ANCHOR}
        />
        <DatePicker
          label="Error — empty"
          required
          error
          errorMessage="Error description"
        />
        <DatePicker
          label="Error — filled"
          required
          errorMessage="Error description"
          defaultValue={ANCHOR}
        />
        <DatePicker
          label="Disabled — empty"
          required
          disabled
          placeholder="MM/DD/YYYY"
        />
        <DatePicker
          label="Disabled — filled"
          required
          disabled
          defaultValue={ANCHOR}
        />
      </div>
    </div>

<div style={col}>
      {SIZES.map((size) => (
        <div
          key={size}
          style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}
        >
          <div style={caption}>
            <strong style={{ color: 'var(--oshon-color-neutral-900)' }}>
              size={size}
            </strong>
          </div>
          <div style={row}>
            <DatePicker
              size={size}
              label="Date"
              placeholder="Pick a date"
              defaultValue={ANCHOR}
            />
            <DatePicker
              size={size}
              type="time"
              label="Time"
              placeholder="Pick a time"
              defaultValue={{ hour: 2, minute: 30, meridiem: 'pm' }}
            />
            <DatePicker
              size={size}
              type="datetime"
              label="Both"
              placeholder="Pick both"
              defaultValue={{
                date: ANCHOR,
                time: { hour: 2, minute: 30, meridiem: 'pm' },
              }}
            />
            <DatePicker
              size={size}
              type="range"
              label="Range"
              placeholder="Pick a range"
              defaultValue={{ start: null, end: null }}
            />
          </div>
        </div>
      ))}
    </div>

{
    const [window, setWindow] = useState<DateRangeValue>({
      start: null,
      end: null,
    });
    const [arrival, setArrival] = useState<TimeValue | null>(null);

    const disabled = !window.start || !window.end || !arrival;

    return (
      <div style={col}>
        <div style={caption}>
          Working demo: a booking form that wires a range picker +
          time picker in sequence. The "Book" button stays disabled
          until both fields are set.
        </div>
        <div style={row}>
          <DatePicker
            type="range"
            label="Stay"
            required
            placeholder="Select check-in / out"
            value={window}
            onChange={setWindow}
          />
          <DatePicker
            type="time"
            label="Arrival time"
            required
            placeholder="Estimated arrival"
            value={arrival}
            onChange={setArrival}
          />
        </div>
        <div style={valueRow}>
          stay ={' '}
          {window.start && window.end
            ? `${window.start.toISOString().slice(0, 10)} → ${window.end.toISOString().slice(0, 10)}`
            : '—'}
          {' · '}
          arrival ={' '}
          {arrival
            ? `${String(arrival.hour).padStart(2, '0')}:${String(arrival.minute).padStart(2, '0')} ${arrival.meridiem.toUpperCase()}`
            : '—'}
        </div>
        <button
          type="button"
          disabled={disabled}
          style={{
            alignSelf: 'flex-start',
            padding: '0.5rem 1rem',
            borderRadius: '8px',
            border: '1px solid var(--oshon-color-primary-700, #038487)',
            background: disabled
              ? 'var(--oshon-color-neutral-200, #ececec)'
              : 'var(--oshon-color-primary-700, #038487)',
            color: disabled
              ? 'var(--oshon-color-neutral-600, #687576)'
              : 'white',
            cursor: disabled ? 'not-allowed' : 'pointer',
            font: 'inherit',
            fontWeight: 600,
          }}
        >
          Book
        </button>
      </div>
    );
  }