@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/datetime-picker/DateTimePicker.js

@@ -0,0 +1,403 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, ChevronLeft, ChevronRight, Clock, X } from 'lucide-react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '../../components/button/Button';
+import { Input } from '../../components/forms/input/Input';
+import { Popover } from '../../components/popover/Popover';
+import styles from './DateTimePicker.module.css';
+/* ---------- Mask helpers (no deps) ---------- */
+// Pull only 0-9
+const digits = (s) => (s.match(/\d/g) || []).join('');
+// DD-MM-YYYY
+function maskDateEU(text) {
+    const d = digits(text).slice(0, 8);
+    const dd = d.slice(0, 2);
+    const mm = d.slice(2, 4);
+    const yyyy = d.slice(4, 8);
+    let out = dd;
+    if (mm.length)
+        out += (out ? '-' : '') + mm;
+    if (yyyy.length)
+        out += (out ? '-' : '') + yyyy;
+    return out;
+}
+// HH:mm (24h)
+function maskTimeHM(text) {
+    const d = digits(text).slice(0, 4);
+    const hh = d.slice(0, 2);
+    const mm = d.slice(2, 4);
+    return mm.length ? `${hh}:${mm}` : hh;
+}
+// Single: "DD-MM-YYYY" or "DD-MM-YYYY HH:mm"
+function maskSingle(text, enableTime) {
+    let t = text.trim().replace(/\s+/g, ' ');
+    if (!enableTime)
+        return maskDateEU(t);
+    // split date + time by first space or 'T'
+    const m = /^(.*?)[ T](.*)$/.exec(t);
+    if (!m)
+        return maskDateEU(t);
+    const datePart = maskDateEU(m[1]);
+    const timePart = maskTimeHM(m[2]);
+    return timePart ? `${datePart} ${timePart}` : datePart;
+}
+// Range: mask both sides around common separators (–, -, to, til)
+function maskRange(text, enableTime) {
+    const sepRe = /\s*(?:–|-|to|til)\s*/i;
+    const parts = text.split(sepRe);
+    if (parts.length === 1) {
+        // user typing first side
+        return maskSingle(parts[0], enableTime);
+    }
+    const a = maskSingle(parts[0], enableTime);
+    const b = maskSingle(parts.slice(1).join(' '), enableTime); // everything after first sep
+    return `${a} – ${b}`.trim();
+}
+// Pad helper
+const pad2 = (n) => String(n).padStart(2, '0');
+// From Date → "DD-MM-YYYY" or "DD-MM-YYYY HH:mm" (local time)
+function toMaskedFromDate(d, enableTime) {
+    const dd = pad2(d.getDate());
+    const mm = pad2(d.getMonth() + 1);
+    const yyyy = String(d.getFullYear());
+    let out = `${dd}-${mm}-${yyyy}`;
+    if (enableTime)
+        out += ` ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+    return out;
+}
+// From start/end → "DD-MM-YYYY – DD-MM-YYYY" (+ optional time)
+function toMaskedRange(start, end, enableTime) {
+    if (start && end)
+        return `${toMaskedFromDate(start, enableTime)} – ${toMaskedFromDate(end, enableTime)}`;
+    if (start)
+        return `${toMaskedFromDate(start, enableTime)} –`;
+    if (end)
+        return `– ${toMaskedFromDate(end, enableTime)}`;
+    return '';
+}
+/* ---------- Parsing helpers (no deps) ---------- */
+// Accepts: YYYY-MM-DD, DD-MM-YYYY, DD/MM/YYYY, DD.MM.YYYY (+ optional HH:mm)
+function parseLooseDateOrDateTime(input) {
+    const txt = input.trim().replace(/\s+/g, ' ');
+    const dateTimeMatch = /^(?<date>[\d./-]{8,10})(?:[ T](?<hh>\d{1,2}):(?<mm>\d{2}))?$/i.exec(txt);
+    if (!(dateTimeMatch === null || dateTimeMatch === void 0 ? void 0 : dateTimeMatch.groups))
+        return null;
+    const raw = dateTimeMatch.groups.date;
+    const hh = dateTimeMatch.groups.hh ? parseInt(dateTimeMatch.groups.hh, 10) : 0;
+    const mm = dateTimeMatch.groups.mm ? parseInt(dateTimeMatch.groups.mm, 10) : 0;
+    if (hh < 0 || hh > 23 || mm < 0 || mm > 59)
+        return null;
+    // Try YYYY-MM-DD first
+    let y, m, d;
+    const mIso = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(raw);
+    if (mIso) {
+        y = +mIso[1];
+        m = +mIso[2] - 1;
+        d = +mIso[3];
+    }
+    else {
+        // Try DD-MM-YYYY or DD/MM/YYYY or DD.MM.YYYY
+        const mEu = /^(\d{1,2})[./-](\d{1,2})[./-](\d{4})$/.exec(raw);
+        if (!mEu)
+            return null;
+        d = +mEu[1];
+        m = +mEu[2] - 1;
+        y = +mEu[3];
+    }
+    const local = new Date(y, m, d, hh, mm, 0, 0);
+    if (Number.isNaN(local.getTime()))
+        return null;
+    // Guard: JS autocorrects invalid dates; re-validate exact Y/M/D
+    if (local.getFullYear() !== y || local.getMonth() !== m || local.getDate() !== d)
+        return null;
+    return local;
+}
+// Parse a range string with separators: "–", "-", "to", "til"
+function parseLooseRange(input) {
+    const sep = /\s*(?:–|-|to|til)\s*/i;
+    const [a, b] = input.split(sep);
+    if (!a || !b)
+        return null;
+    const s = parseLooseDateOrDateTime(a);
+    const e = parseLooseDateOrDateTime(b);
+    if (!s || !e)
+        return null;
+    return s <= e ? { start: s, end: e } : { start: e, end: s };
+}
+/* ---------- Date grid helpers (UTC) ---------- */
+const dUTC = (y, m, day) => new Date(Date.UTC(y, m, day));
+const addDaysUTC = (utcDate, n) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), utcDate.getUTCDate() + n);
+const startOfMonthUTC = (utcDate) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTCMonth(), 1);
+const endOfMonthUTC = (utcDate) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTCMonth() + 1, 0);
+const sameDayUTC = (a, b) => a.getUTCFullYear() === b.getUTCFullYear() &&
+    a.getUTCMonth() === b.getUTCMonth() &&
+    a.getUTCDate() === b.getUTCDate();
+const toUTCDateOnly = (local) => dUTC(local.getFullYear(), local.getMonth(), local.getDate());
+const startOfWeekUTC = (utcDate, weekStartsOn) => {
+    const dow = utcDate.getUTCDay();
+    const diff = (dow - weekStartsOn + 7) % 7;
+    return addDaysUTC(utcDate, -diff);
+};
+function buildMonthGrid(anchorLocalDate, weekStartsOn) {
+    const anchorUTC = toUTCDateOnly(anchorLocalDate);
+    const firstUTC = startOfWeekUTC(startOfMonthUTC(anchorUTC), weekStartsOn);
+    const cells = [];
+    for (let i = 0; i < 42; i++)
+        cells.push(addDaysUTC(firstUTC, i));
+    return cells;
+}
+const isBetweenUTC = (d, a, b) => {
+    const t = +d, s = +a, e = +b;
+    return t >= Math.min(s, e) && t <= Math.max(s, e);
+};
+function composeLocalDateTimeISO(utcDateOnly, hh, mm) {
+    const y = utcDateOnly.getUTCFullYear();
+    const m = utcDateOnly.getUTCMonth();
+    const d = utcDateOnly.getUTCDate();
+    const local = new Date(y, m, d, hh, mm, 0, 0);
+    return local.toISOString();
+}
+/* ---------- Formatting (exposed but input uses mask) ---------- */
+function defaultFormatDate(d, { locale, enableTime }) {
+    const opts = enableTime
+        ? { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }
+        : { year: 'numeric', month: 'short', day: '2-digit' };
+    return new Intl.DateTimeFormat(locale || undefined, opts).format(d);
+}
+function defaultFormatRange(s, e, opts) {
+    if (s && e)
+        return `${defaultFormatDate(s, opts)} – ${defaultFormatDate(e, opts)}`;
+    if (s)
+        return `${defaultFormatDate(s, opts)} –`;
+    if (e)
+        return `– ${defaultFormatDate(e, opts)}`;
+    return '';
+}
+const cx = (...classes) => classes.filter(Boolean).join(' ');
+export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'single', value, onChange, enableTime = false, timeStep = 15, min, max, locale = typeof navigator !== 'undefined' ? navigator.language : 'da-DK', weekStartsOn = 1, presets, inputProps, formatDate = defaultFormatDate, // still exposed, not used for input text
+formatRange = defaultFormatRange, // still exposed, not used for input text
+ }, _ref) {
+    void formatDate;
+    void formatRange;
+    const popRef = useRef(null);
+    const todayLocal = useMemo(() => new Date(), []);
+    const initialAnchor = useMemo(() => {
+        if (mode === 'single' && value instanceof Date && value)
+            return value;
+        if (mode === 'range' && value && typeof value === 'object' && 'start' in value && value.start)
+            return value.start;
+        return todayLocal;
+    }, [mode, value, todayLocal]);
+    const [monthAnchor, setMonthAnchor] = useState(initialAnchor);
+    const [timeHH, setTimeHH] = useState(todayLocal.getHours());
+    const [timeMM, setTimeMM] = useState(Math.floor(todayLocal.getMinutes() / timeStep) * timeStep);
+    const [hoverUTC, setHoverUTC] = useState(null);
+    const cellsUTC = useMemo(() => buildMonthGrid(monthAnchor, weekStartsOn), [monthAnchor, weekStartsOn]);
+    const monthStartUTC = useMemo(() => startOfMonthUTC(toUTCDateOnly(monthAnchor)), [monthAnchor]);
+    const monthEndUTC = useMemo(() => endOfMonthUTC(toUTCDateOnly(monthAnchor)), [monthAnchor]);
+    const weekdayFmt = useMemo(() => new Intl.DateTimeFormat(locale, { weekday: 'short' }), [locale]);
+    const monthFmt = useMemo(() => new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric' }), [locale]);
+    const selectedUTC_single = mode === 'single' && value instanceof Date && value ? toUTCDateOnly(value) : null;
+    const selectedUTC_start = mode === 'range' && value && typeof value === 'object' && 'start' in value && value.start
+        ? toUTCDateOnly(value.start)
+        : null;
+    const selectedUTC_end = mode === 'range' && value && typeof value === 'object' && 'end' in value && value.end
+        ? toUTCDateOnly(value.end)
+        : null;
+    const isDisabledUTC = useCallback((utcDay) => {
+        if (min && utcDay < toUTCDateOnly(min))
+            return true;
+        if (max && utcDay > toUTCDateOnly(max))
+            return true;
+        return false;
+    }, [min, max]);
+    const selectDay = (utcDay) => {
+        var _a, _b;
+        if (isDisabledUTC(utcDay))
+            return;
+        if (mode === 'single') {
+            if (enableTime) {
+                const iso = composeLocalDateTimeISO(utcDay, timeHH, timeMM);
+                onChange(new Date(iso));
+            }
+            else {
+                onChange(new Date(utcDay.getTime()));
+            }
+            (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
+            return;
+        }
+        const curr = value && typeof value === 'object' && 'start' in value ? value : { start: null, end: null };
+        if (!curr.start || (curr.start && curr.end)) {
+            onChange({ start: new Date(utcDay.getTime()), end: null });
+        }
+        else {
+            const startUTC = toUTCDateOnly(curr.start);
+            const endUTC = utcDay;
+            const s = new Date(Math.min(+startUTC, +endUTC));
+            const e = new Date(Math.max(+startUTC, +endUTC));
+            onChange({ start: s, end: e });
+            (_b = popRef.current) === null || _b === void 0 ? void 0 : _b.close();
+        }
+    };
+    const gridRef = useRef(null);
+    useEffect(() => {
+        const el = gridRef.current;
+        if (!el)
+            return;
+        const onKey = (e) => {
+            var _a;
+            if (!((_a = popRef.current) === null || _a === void 0 ? void 0 : _a.isOpen()))
+                return;
+            if ([
+                'ArrowLeft',
+                'ArrowRight',
+                'ArrowUp',
+                'ArrowDown',
+                'PageUp',
+                'PageDown',
+                'Home',
+                'End',
+            ].includes(e.key)) {
+                e.preventDefault();
+            }
+            const anchor = toUTCDateOnly(monthAnchor);
+            const move = (days) => setMonthAnchor(prev => addDaysLocal(prev, days));
+            switch (e.key) {
+                case 'ArrowLeft':
+                    move(-1);
+                    break;
+                case 'ArrowRight':
+                    move(1);
+                    break;
+                case 'ArrowUp':
+                    move(-7);
+                    break;
+                case 'ArrowDown':
+                    move(7);
+                    break;
+                case 'PageUp':
+                    setMonthAnchor(addMonthsLocal(monthAnchor, -1));
+                    break;
+                case 'PageDown':
+                    setMonthAnchor(addMonthsLocal(monthAnchor, 1));
+                    break;
+                case 'Home':
+                    setMonthAnchor(new Date(anchor.getUTCFullYear(), anchor.getUTCMonth(), 1));
+                    break;
+                case 'End':
+                    setMonthAnchor(new Date(anchor.getUTCFullYear(), anchor.getUTCMonth() + 1, 0));
+                    break;
+            }
+        };
+        el.addEventListener('keydown', onKey);
+        return () => el.removeEventListener('keydown', onKey);
+    }, [monthAnchor]);
+    const hours = useMemo(() => Array.from({ length: 24 }, (_, i) => i), []);
+    const minutes = useMemo(() => Array.from({ length: Math.floor(60 / (timeStep || 1)) }, (_, i) => i * (timeStep || 1)), [timeStep]);
+    // ---- Input display: follow mask format (not Intl) ----
+    const formatted = useMemo(() => {
+        var _a, _b;
+        if (mode === 'single') {
+            return value instanceof Date && value ? toMaskedFromDate(value, enableTime) : '';
+        }
+        const v = value;
+        return toMaskedRange((_a = v === null || v === void 0 ? void 0 : v.start) !== null && _a !== void 0 ? _a : null, (_b = v === null || v === void 0 ? void 0 : v.end) !== null && _b !== void 0 ? _b : null, enableTime);
+    }, [mode, value, enableTime]);
+    const [text, setText] = useState(formatted);
+    const [dirty, setDirty] = useState(false); // while user is typing
+    useEffect(() => {
+        if (!dirty)
+            setText(formatted); // keep in sync when external value changes
+    }, [formatted, dirty]);
+    const commitTypedValue = useCallback(() => {
+        if (!text.trim()) {
+            if (mode === 'single')
+                onChange(null);
+            else
+                onChange({ start: null, end: null });
+            setDirty(false);
+            return;
+        }
+        if (mode === 'single') {
+            const dLocal = parseLooseDateOrDateTime(text);
+            if (dLocal) {
+                onChange(dLocal);
+                setMonthAnchor(dLocal);
+                setDirty(false);
+            }
+            return;
+        }
+        const r = parseLooseRange(text);
+        if (r) {
+            onChange({ start: r.start, end: r.end });
+            setMonthAnchor(r.start);
+            setDirty(false);
+        }
+    }, [text, mode, onChange]);
+    const clear = useCallback(() => {
+        if (mode === 'single')
+            onChange(null);
+        else
+            onChange({ start: null, end: null });
+        setDirty(false);
+        setText('');
+    }, [mode, onChange]);
+    function addMonthsLocal(dt, n) {
+        const y = dt.getFullYear();
+        const m = dt.getMonth();
+        return new Date(y, m + n, 1);
+    }
+    function addDaysLocal(dt, n) {
+        const d = new Date(dt);
+        d.setDate(d.getDate() + n);
+        return d;
+    }
+    const fallbackPlaceholder = mode === 'single' ? 'Vælg dato' : 'Vælg interval';
+    return (_jsx(Popover, { ref: popRef, trigger: toggle => {
+            var _a, _b;
+            return (_jsx("div", { onClick: toggle, className: styles.triggerWrap, children: _jsx(Input, { ...inputProps, placeholder: (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder) !== null && _a !== void 0 ? _a : fallbackPlaceholder, value: dirty ? text : formatted, onInput: e => {
+                        setDirty(true);
+                        const raw = e.target.value;
+                        const masked = mode === 'single' ? maskSingle(raw, enableTime) : maskRange(raw, enableTime);
+                        setText(masked);
+                    }, onBlur: commitTypedValue, onKeyDown: e => {
+                        var _a;
+                        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                        if (e.defaultPrevented)
+                            return;
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            commitTypedValue();
+                        }
+                    }, icon: _jsx(Calendar, { size: 16 }), onClear: formatted || text ? clear : undefined, "aria-haspopup": "dialog", "aria-expanded": ((_b = popRef.current) === null || _b === void 0 ? void 0 : _b.isOpen()) ? true : false, disabled: inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled, error: inputProps === null || inputProps === void 0 ? void 0 : inputProps.error }) }));
+        }, viewportPadding: 8, children: _jsxs("div", { className: cx(styles.panel, !!(presets === null || presets === void 0 ? void 0 : presets.length) && styles.panelWithPresets), children: [(presets === null || presets === void 0 ? void 0 : presets.length) ? (_jsxs("div", { className: styles.presetsCol, children: [_jsx("div", { className: styles.presetsLabel, children: "Forvalg" }), _jsxs("div", { className: styles.presetsList, children: [presets.map(p => (_jsx(Button, { variant: "outlined", size: "sm", onClick: () => {
+                                        var _a;
+                                        const r = p.getRange();
+                                        onChange({ start: r.start, end: r.end });
+                                        setDirty(false);
+                                        setText(toMaskedRange(r.start, r.end, enableTime));
+                                        setMonthAnchor(r.start);
+                                        (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                                    }, children: p.label }, p.label))), mode === 'range' && (_jsx(Button, { variant: "danger", size: "sm", onClick: clear, icon: _jsx(X, { size: 14 }), children: "Ryd" }))] })] })) : null, _jsxs("div", { className: styles.calendarArea, children: [_jsxs("div", { className: styles.header, children: [_jsx(Button, { variant: "outlined", size: "sm", "aria-label": "Forrige m\u00E5ned", icon: _jsx(ChevronLeft, { size: 16 }), onClick: () => setMonthAnchor(addMonthsLocal(monthAnchor, -1)) }), _jsx("div", { "aria-live": "polite", className: styles.headerTitle, children: monthFmt.format(monthAnchor) }), _jsx(Button, { variant: "outlined", size: "sm", "aria-label": "N\u00E6ste m\u00E5ned", icon: _jsx(ChevronRight, { size: 16 }), onClick: () => setMonthAnchor(addMonthsLocal(monthAnchor, 1)) })] }), _jsx("div", { className: styles.weekRow, "aria-hidden": true, children: Array.from({ length: 7 }, (_, i) => (i + weekStartsOn) % 7).map(dow => (_jsx("div", { className: styles.weekCell, children: weekdayFmt.format(dUTC(2024, 8, dow + 1)).slice(0, 2) }, dow))) }), _jsx("div", { ref: gridRef, role: "grid", "aria-label": "Kalender", tabIndex: 0, className: styles.grid, onMouseLeave: () => setHoverUTC(null), children: cellsUTC.map((utcDay, idx) => {
+                                const inThisMonth = utcDay >= monthStartUTC && utcDay <= monthEndUTC;
+                                const isToday = sameDayUTC(utcDay, toUTCDateOnly(todayLocal));
+                                const disabledDay = isDisabledUTC(utcDay);
+                                let selected = false;
+                                let inRange = false;
+                                if (mode === 'single' && selectedUTC_single)
+                                    selected = sameDayUTC(utcDay, selectedUTC_single);
+                                if (mode === 'range' && selectedUTC_start && selectedUTC_end) {
+                                    inRange = isBetweenUTC(utcDay, selectedUTC_start, selectedUTC_end);
+                                    selected =
+                                        sameDayUTC(utcDay, selectedUTC_start) || sameDayUTC(utcDay, selectedUTC_end);
+                                }
+                                if (mode === 'range' && selectedUTC_start && !selectedUTC_end && hoverUTC) {
+                                    inRange = isBetweenUTC(utcDay, selectedUTC_start, hoverUTC);
+                                    selected = sameDayUTC(utcDay, selectedUTC_start);
+                                }
+                                const dayNum = utcDay.getUTCDate();
+                                return (_jsx("button", { role: "gridcell", "aria-selected": selected, "aria-disabled": disabledDay, onMouseEnter: () => setHoverUTC(utcDay), onClick: () => selectDay(utcDay), disabled: disabledDay, className: cx(styles.dayCell, inThisMonth ? styles.dayInMonth : styles.dayOutside, selected && styles.daySelected, inRange && styles.dayInRange, isToday && !selected && styles.dayToday, disabledDay && styles.dayDisabled), title: new Date(utcDay).toLocaleDateString(locale), children: dayNum }, idx));
+                            }) }), enableTime && mode === 'single' && (_jsxs("div", { className: styles.timeRow, children: [_jsxs("div", { className: styles.timeLabel, children: [_jsx(Clock, { size: 14 }), " Tid"] }), _jsx("select", { value: timeHH, onChange: e => setTimeHH(parseInt(e.target.value, 10)), className: styles.timeSelect, children: hours.map(h => (_jsx("option", { value: h, children: String(h).padStart(2, '0') }, h))) }), _jsx("select", { value: timeMM, onChange: e => setTimeMM(parseInt(e.target.value, 10)), className: styles.timeSelect, children: minutes.map(m => (_jsx("option", { value: m, children: String(m).padStart(2, '0') }, m))) })] })), mode === 'range' && (_jsxs("div", { className: styles.footer, children: [_jsx(Button, { variant: "outlined", size: "sm", onClick: clear, icon: _jsx(X, { size: 14 }), children: "Ryd" }), _jsx(Button, { variant: "primary", size: "sm", onClick: () => { var _a; return (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close(); }, children: "OK" })] }))] })] }) }));
+});
+DateTimePicker.displayName = 'DateTimePicker';

package/dist/components/datetime-picker/DateTimePicker.module.css

@@ -0,0 +1,144 @@
+.triggerWrap {
+  display: inline-block;
+}
+
+.panel {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+  padding: 8px;
+  background: var(--color-bg-surface);
+}
+
+.panelWithPresets {
+  grid-template-columns: 140px 1fr;
+}
+
+.presetsCol {
+  border-right: 1px solid var(--color-border-default);
+  padding-right: 8px;
+}
+
+.presetsLabel {
+  font-size: 12px;
+  color: var(--color-fg-muted);
+  margin: 4px 0 6px;
+}
+
+.presetsList {
+  display: grid;
+  gap: 6px;
+}
+
+.calendarArea {
+  display: grid;
+  gap: 8px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 4px;
+}
+
+.headerTitle {
+  font-weight: var(--font-weight-semibold);
+}
+
+.weekRow {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+}
+
+.weekCell {
+  text-align: center;
+  font-size: 12px;
+  color: var(--color-fg-muted);
+  padding: 2px 0;
+}
+
+/* Grid */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 4px;
+  outline: none;
+}
+
+/* Day cell */
+.dayCell {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: var(--border-radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  background: transparent;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-fg-default);
+}
+
+.dayCell:disabled {
+  cursor: not-allowed;
+}
+
+.dayInMonth {
+  color: var(--color-fg-default);
+}
+
+.dayOutside {
+  color: var(--color-fg-muted);
+}
+
+.dayDisabled {
+  color: var(--color-disabled-fg);
+}
+
+.daySelected {
+  background: var(--color-brand);
+  color: var(--color-fg-on-brand);
+}
+
+.dayInRange:not(.daySelected) {
+  background: var(--color-bg-selected);
+}
+
+.dayToday {
+  outline: 1px solid var(--color-border-selected);
+  outline-offset: 1px;
+}
+
+/* Time row */
+.timeRow {
+  display: grid;
+  grid-template-columns: auto 1fr 1fr;
+  align-items: center;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+.timeLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--color-fg-muted);
+}
+
+.timeSelect {
+  height: 32px;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--border-radius-md);
+  background: var(--color-bg-surface);
+  padding: 0 8px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Footer */
+.footer {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 4px;
+}

package/dist/components/filter-field/FilterField.d.ts

@@ -5,7 +5,7 @@ export interface FilterEvent {
     operator: Operator;
     value: string | string[] | null;
 }
-export interface MultiselectOption {
+interface MultiselectOption {
     label: string;
     value: string;
     icon?: React.ReactNode;
@@ -14,15 +14,18 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     field: string;
     control: 'input' | 'select';
     operator: Operator;
+    value: string | string[] | null;
     onChange: (e: FilterEvent) => void;
     operators?: Operator[];
     options?: MultiselectOption[];
     single?: boolean;
-    value?: string | string[] | null;
     size?: 'sm' | 'md' | 'lg';
     label?: string;
     placeholder?: string;
     disabled?: boolean;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, onChange, operators, options, single, value, size, label, placeholder, disabled, ...inputProps }: FilterFieldProps): React.ReactElement;
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, label, placeholder, disabled, 'data-cy': dataCy, ...inputProps }: FilterFieldProps & {
+    'data-cy'?: string;
+}): React.ReactElement;
+export {};