feat(date-time-field): TEDI-Ready DateTimeField component #554

skills/tedi-react/SKILL.md

@@ -154,7 +154,7 @@ const [email, setEmail] = useState('');
 <Checkbox id="agree" label="I agree" value="agree" onChange={(val, checked) => setAgreed(checked)} />
 ```
 
-Form controls: `TextField`, `Select`, `TextArea`, `NumberField`, `Checkbox`, `Radio`, `ChoiceGroup`, `Search`, `DateField`, `FileUpload`, `FileDropzone`.
+Form controls: `TextField`, `Select`, `TextArea`, `NumberField`, `Checkbox`, `Radio`, `ChoiceGroup`, `Search`, `DateField`, `TimeField`, `DateTimeField`, `FileUpload`, `FileDropzone`.
 
 ## Theming
 

skills/tedi-react/references/components.md

@@ -338,6 +338,109 @@ The ref shape mirrors TextField (`{ input, wrapper }`). In `'multiple'` mode the
 <DateField id="dob" label="Date of birth" useNativePicker md={{ useNativePicker: false }} />
 ```
 
+### TimeField
+**Props:** `TimeFieldProps` | bp, form
+- `id: string` (required), `label: string` (required)
+- `value?: string`, `defaultValue?: string` — `"HH:mm"` 24-hour format
+- `onChange?: (time: string) => void`
+- `placeholder?: string`
+- `required?: boolean`, `readOnly?: boolean`
+- `stepMinutes?: number = 1` — minute increment for the picker wheel / grid
+- `availableTimes?: string[]` — limit selectable times to a fixed list (`["09:00", "09:30", …]`); switches the popover to grid mode
+- `inputProps?: Omit<TextFieldProps, 'id' | 'label' | 'value' | 'onChange'>` — pass-through to the underlying input
+- `className?: string`
+- **Breakpoint-aware:** `useNativePicker?: boolean = false` (swap to `<input type="time">`; ignores `availableTimes`), `showPicker?: boolean = true`, `timePickerTrigger?: 'input' | 'button' = 'button'`, `availableTimesVariant?: 'grid-buttons' | 'grid-radio' | 'dropdown'` — which variant the picker renders when `availableTimes` is set
+
+```tsx
+<TimeField id="meeting" label="Meeting time" value={time} onChange={setTime} stepMinutes={15} />
+
+// Constrain to specific slots, render as a radio-button grid
+<TimeField
+  id="slot"
+  label="Available slot"
+  availableTimes={['09:00', '09:30', '10:00', '14:00', '15:30']}
+  availableTimesVariant="grid-radio"
+  value={slot}
+  onChange={setSlot}
+/>
+
+// Native picker on mobile, custom wheel on desktop
+<TimeField id="alarm" label="Alarm" useNativePicker md={{ useNativePicker: false }} />
+```
+
+### TimePicker
+> **For plain time inputs use `TimeField`.** TimePicker is the lower-level picker primitive — reach for it only when you need a standalone, always-visible time selector (scheduling UI, custom popover, side-by-side with a calendar in a DateTime composite).
+
+**Props:** `TimePickerProps` | form
+- `value?: string`, `defaultValue?: string` — `"HH:mm"`
+- `onChange?: (time: string) => void`
+- `stepMinutes?: number = 1` — minute increment for the wheel
+- `availableTimes?: string[]` — switches from scroll-wheel mode to a predefined-slots grid
+- `gridVariant?: 'button' | 'radio' = 'button'` — only used with `availableTimes`
+- `bordered?: boolean = true` — set `false` when embedding inside a parent that already provides its own surface (e.g. alongside a Calendar)
+- `className?: string`
+
+The wheel column supports full keyboard navigation: `ArrowUp` / `ArrowDown` and `PageUp` / `PageDown` cycle through the column (wrap at both ends), `Home` / `End` jump to the bounds, `Enter` / `Space` commit the highlighted value.
+
+```tsx
+import { TimePicker } from '@tedi-design-system/react/tedi';
+
+<TimePicker value={time} onChange={setTime} stepMinutes={5} />
+
+// Predefined slots
+<TimePicker
+  availableTimes={['09:00', '10:00', '11:00', '14:00']}
+  gridVariant="radio"
+  value={slot}
+  onChange={setSlot}
+/>
+```
+
+### DateTimeField
+**Props:** `DateTimeFieldProps` | bp, form
+- `id: string` (required), `label: string` (required)
+- `mode?: 'single' | 'range' = 'single'` — note: no `'multiple'` (combining multi-date with per-row times is ambiguous)
+- `value?: Date | DateTimeRange`, `defaultValue?: Date | DateTimeRange` — shape matches `mode` (`Date` for single, `{ from?, to? }` for range)
+- `onChange?: (value: Date | DateTimeRange | undefined) => void`
+- `placeholder?: string`, `required?: boolean`, `readOnly?: boolean`, `disabled?: boolean`
+- `minDate?: Date`, `maxDate?: Date`, `disablePast?: boolean`, `disableFuture?: boolean` — calendar-only; the time wheel still allows every minute
+- `stepMinutes?: number = 15` — minute increment for the time wheel (ignored when `availableTimes` is set)
+- `initialMonth?: Date`
+- `locale?: Locale = et`, `localeCode?: string = 'et-EE'`
+- `selectTimeLabel?: string`, `backLabel?: string` — multi-step layout button labels (fall back to localised labels)
+- `inputProps?: Omit<TextFieldProps, 'id' | 'label' | 'value' | 'onChange'>` — pass-through to the underlying input (helper, icon, isClearable, size, …)
+- **Breakpoint-aware:** `layout?: 'side-by-side' | 'multi-step' = 'side-by-side'`, `availableTimes?: string[]` (switches the time step to a grid of fixed slots), `timeGridVariant?: 'button' | 'radio'` (default `'button'` for side-by-side, `'radio'` for multi-step), `monthYearSelectType?: 'dropdown' | 'grid' = 'dropdown'`, `showOutsideDays?: boolean = true`, `useNativePicker?: boolean = false` (renders `<input type="datetime-local">`; ignored when `mode='range'`), `timeHeading?: ReactNode` (heading above the time picker in side-by-side layout)
+
+In `mode='range'` the popover renders a 2-month calendar plus **two** time pickers stacked underneath — one for `from`, one for `to` — and each `from`/`to` `Date` carries its own time component.
+
+```tsx
+import { DateTimeField } from '@tedi-design-system/react/tedi';
+
+// Side-by-side wheel
+<DateTimeField id="meeting" label="Meeting" placeholder="pp.kk.aaaa hh:mm" stepMinutes={15} />
+
+// Predefined slots, multi-step layout (pick date → pick slot)
+<DateTimeField
+  id="appointment"
+  label="Appointment"
+  layout="multi-step"
+  availableTimes={['09:30', '10:00', '11:30']}
+  timeGridVariant="radio"
+/>
+
+// Range mode — two calendars + two time pickers
+<DateTimeField
+  id="period"
+  label="Booking period"
+  mode="range"
+  value={range}
+  onChange={(v) => setRange(v && 'from' in v ? v : undefined)}
+/>
+
+// Native fallback (single mode only)
+<DateTimeField id="alarm" label="Alarm" useNativePicker md={{ useNativePicker: false }} />
+```
+
 ### FileUpload
 **Props:** `FileUploadProps` | form
 - `id: string` (required), `name: string` (required)

skills/tedi-react/references/forms.md

@@ -15,6 +15,8 @@ TEDI form controls support both **controlled** and **uncontrolled** modes, follo
 | ChoiceGroup | `ChoiceGroupValue` | Radio/checkbox groups, segmented variant |
 | Search | `string` | Search button, onSearch callback |
 | DateField | `Date \| Date[] \| DateRange` | Single/multiple/range, manual input, min/max, native picker, breakpoint-aware |
+| TimeField | `string` (`"HH:mm"`) | Wheel / grid picker, native fallback, stepMinutes, availableTimes |
+| DateTimeField | `Date \| DateTimeRange` | Calendar + time wheel / slots, side-by-side or multi-step layout, range mode, native fallback |
 | FileUpload | `FileUploadFile[]` | Multi-file, validation, loading states |
 | FileDropzone | `FileUploadFile[]` | Drag-and-drop |
 
@@ -177,6 +179,101 @@ const [date, setDate] = useState<Date>();
 />
 ```
 
+## TimeField
+
+The value is always a `"HH:mm"` 24-hour string. The popover defaults to a wheel picker; set `availableTimes` to switch to a fixed-slot grid, or `useNativePicker` to drop the custom UI entirely.
+
+```tsx
+import { TimeField } from '@tedi-design-system/react/tedi';
+
+// Wheel picker, 15-minute step
+<TimeField
+  id="meeting"
+  label="Meeting time"
+  value={time}
+  onChange={setTime}
+  stepMinutes={15}
+  required
+/>
+
+// Constrain to predefined slots, render as a radio-button grid
+<TimeField
+  id="slot"
+  label="Available slot"
+  availableTimes={['09:00', '09:30', '10:00', '14:00', '15:30']}
+  availableTimesVariant="grid-radio"
+  value={slot}
+  onChange={setSlot}
+/>
+
+// Native picker on mobile, custom wheel on desktop
+<TimeField
+  id="alarm"
+  label="Alarm"
+  useNativePicker
+  md={{ useNativePicker: false }}
+/>
+```
+
+For an always-visible time selector (e.g. side-by-side with a calendar, or inside a custom popover) use the lower-level `TimePicker` directly:
+
+```tsx
+import { TimePicker } from '@tedi-design-system/react/tedi';
+
+<TimePicker value={time} onChange={setTime} stepMinutes={5} bordered={false} />
+```
+
+## DateTimeField
+
+Combines a `DateField` calendar with a `TimePicker` in one input. The popover shows them either side-by-side (default) or as a two-step flow (`layout='multi-step'`). The committed value is a single `Date` (carrying both date and time) — or a `DateTimeRange` (`{ from, to }`) in `mode='range'`.
+
+```tsx
+import { DateTimeField } from '@tedi-design-system/react/tedi';
+
+// Default — side-by-side calendar + time wheel
+<DateTimeField
+  id="meeting"
+  label="Meeting"
+  placeholder="pp.kk.aaaa hh:mm"
+  stepMinutes={15}
+  value={value}
+  onChange={(v) => setValue(v instanceof Date ? v : undefined)}
+/>
+
+// Predefined time slots rendered as a button grid
+<DateTimeField
+  id="slot"
+  label="Available slot"
+  availableTimes={['09:30', '10:00', '11:30', '15:30']}
+  timeGridVariant="button"
+  value={slot}
+  onChange={setSlot}
+/>
+
+// Multi-step layout — pick the day first, then a slot
+<DateTimeField
+  id="appointment"
+  label="Appointment"
+  layout="multi-step"
+  availableTimes={['09:30', '10:00', '11:30']}
+  timeGridVariant="radio"
+/>
+
+// Range mode — two-month calendar + `from` / `to` time pickers
+<DateTimeField
+  id="period"
+  label="Booking period"
+  mode="range"
+  value={range}
+  onChange={(v) => setRange(v && 'from' in v ? v : undefined)}
+/>
+
+// Native fallback (`<input type="datetime-local">`) — `mode='single'` only
+<DateTimeField id="alarm" label="Alarm" useNativePicker md={{ useNativePicker: false }} />
+```
+
+Constraints (`minDate` / `maxDate` / `disablePast` / `disableFuture`) apply to the **calendar only** — the time wheel still allows every minute inside the allowed days.
+
 ## Checkbox & Radio
 
 ```tsx
@@ -283,6 +380,8 @@ import { FileUpload, FileDropzone } from '@tedi-design-system/react/tedi';
 - **Select:** `onChange?: (value: ISelectOption | ISelectOption[] | null) => void`
 - **NumberField:** `onChange?: (value: number) => void`
 - **DateField:** `onSelect?: OnSelectHandler<Date | Date[] | DateRange | undefined>` — value shape depends on `mode` (`'single'` → `Date`, `'multiple'` → `Date[]`, `'range'` → `DateRange`)
+- **TimeField / TimePicker:** `onChange?: (time: string) => void` — value is always `"HH:mm"` 24-hour format (empty string when cleared)
+- **DateTimeField:** `onChange?: (value: Date | DateTimeRange | undefined) => void` — value shape depends on `mode` (`'single'` → `Date`, `'range'` → `{ from, to }`)
 
 ## Disabled State
 

src/tedi/components/content/calendar/calendar.module.scss

@@ -67,7 +67,9 @@
       all: unset;
       display: block;
       width: 100%;
+      width: var(--form-calendar-date-width);
       height: 100%;
+      height: var(--form-calendar-date-width);
       overflow: hidden;
       font-size: var(--body-regular-size);
       font-weight: var(--tedi-weight-02);

src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.module.scss

@@ -47,7 +47,11 @@
       }
     }
 
-    &:focus-visible {
+    // The outline fires when the card itself is focused (checkbox variant) or
+    // when the inner radio input is focused (radio variant — the wrapper has
+    // tabIndex=-1, so only the input receives focus).
+    &:focus-visible,
+    &:has(input:focus-visible) {
       z-index: 5;
       outline: 2px solid var(--form-checkbox-radio-default-border-selected);
       outline-offset: 2px;

src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.spec.tsx

@@ -125,4 +125,19 @@ describe('ChoiceGroupItem', () => {
     fireEvent.click(input);
     expect(mockInputClick).not.toHaveBeenCalled();
   });
+
+  it('makes the outer wrapper non-tabbable for radio type (arrow-navigated group)', () => {
+    const { container } = renderWithContext({ type: 'radio', variant: 'card' });
+    const card = container.querySelector('.tedi-choice-group-item') as HTMLElement;
+    expect(card).toHaveAttribute('tabIndex', '-1');
+    expect(card).not.toHaveAttribute('role');
+    expect(card).not.toHaveAttribute('aria-checked');
+  });
+
+  it('keeps the outer wrapper tabbable with role=checkbox for checkbox type', () => {
+    const { container } = renderWithContext({ type: 'checkbox', variant: 'card' });
+    const card = container.querySelector('.tedi-choice-group-item') as HTMLElement;
+    expect(card).toHaveAttribute('tabIndex', '0');
+    expect(card).toHaveAttribute('role', 'checkbox');
+  });
 });

src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.tsx

@@ -91,14 +91,16 @@ export const ChoiceGroupItem = (props: ExtendedChoiceGroupItemProps): React.Reac
 
     document.getElementById(id)?.click();
   };
+
+  const isRadio = type === 'radio';
   return (
     <Col {...colProps} className={ColumnBEM}>
       <div
         className={ChoiceGroupItemBEM}
-        tabIndex={disabled ? -1 : 0}
+        tabIndex={isRadio || disabled ? -1 : 0}
         onClick={handleClick}
-        role={type}
-        aria-checked={isChecked}
+        role={isRadio ? undefined : type}
+        aria-checked={isRadio ? undefined : isChecked}
       >
         {variant === 'default' || showIndicator ? (
           <InputComponent