@dbcdk/react-components 0.0.169 → 0.0.171

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

@@ -0,0 +1,557 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { X, ChevronLeft, ChevronRight, Clock, Calendar } from 'lucide-react';
+import { forwardRef, useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { Button } from '../../components/button/Button';
+import { Input } from '../../components/forms/input/Input';
+import { Popover } from '../../components/popover/Popover';
+import { localDateFromIso, localDateFromDateOnly, isoFromLocalParts, dateOnlyFromLocalParts, compareDateOnly, toMaskedFromDate, parseLooseDateOrDateTime, isoFromLocalDate, parseLooseRange, maskSingle, maskRange } from './dateTimeHelpers';
+import styles from './DateTimePicker.module.css';
+
+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 toUTCDateOnlyFromLocal = (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 = toUTCDateOnlyFromLocal(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 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 || void 0, opts).format(d);
+}
+function defaultFormatRange(s, e, opts) {
+  if (s && e) return `${defaultFormatDate(s, opts)} \u2013 ${defaultFormatDate(e, opts)}`;
+  if (s) return `${defaultFormatDate(s, opts)} \u2013`;
+  if (e) return `\u2013 ${defaultFormatDate(e, opts)}`;
+  return "";
+}
+const cx = (...classes) => classes.filter(Boolean).join(" ");
+const DateTimePicker = forwardRef(function DateTimePicker2({
+  mode = "single",
+  value,
+  onChange,
+  enableTime = false,
+  showCalendarIcon = true,
+  timeStep = 15,
+  min,
+  max,
+  locale = typeof navigator !== "undefined" ? navigator.language : "da-DK",
+  weekStartsOn = 1,
+  presets,
+  inputProps,
+  formatDate = defaultFormatDate,
+  formatRange = defaultFormatRange,
+  onOpenChange
+}, _ref) {
+  const popRef = useRef(null);
+  const onChangeRange = onChange;
+  const onChangeIso = onChange;
+  const onChangeDateOnly = onChange;
+  const todayLocal = useMemo(() => /* @__PURE__ */ new Date(), []);
+  const initialAnchor = useMemo(() => {
+    if (mode === "single") {
+      if (typeof value === "string") {
+        const d = enableTime ? localDateFromIso(value) : localDateFromDateOnly(value);
+        return d != null ? d : todayLocal;
+      }
+      return todayLocal;
+    }
+    const v = value;
+    if (v == null ? void 0 : v.start) {
+      const d = localDateFromDateOnly(v.start);
+      return d != null ? d : todayLocal;
+    }
+    return todayLocal;
+  }, [mode, value, enableTime, todayLocal]);
+  const [monthAnchor, setMonthAnchor] = useState(initialAnchor);
+  useEffect(() => setMonthAnchor(initialAnchor), [initialAnchor]);
+  const [timeHH, setTimeHH] = useState(todayLocal.getHours());
+  const [timeMM, setTimeMM] = useState(
+    Math.floor(todayLocal.getMinutes() / timeStep) * timeStep
+  );
+  useEffect(() => {
+    if (mode === "single" && enableTime && typeof value === "string") {
+      const d = localDateFromIso(value);
+      if (!d) return;
+      setTimeHH(d.getHours());
+      setTimeMM(Math.floor(d.getMinutes() / timeStep) * timeStep);
+    }
+  }, [mode, enableTime, value, timeStep]);
+  const [hoverUTC, setHoverUTC] = useState(null);
+  const cellsUTC = useMemo(
+    () => buildMonthGrid(monthAnchor, weekStartsOn),
+    [monthAnchor, weekStartsOn]
+  );
+  const monthStartUTC = useMemo(
+    () => startOfMonthUTC(toUTCDateOnlyFromLocal(monthAnchor)),
+    [monthAnchor]
+  );
+  const monthEndUTC = useMemo(
+    () => endOfMonthUTC(toUTCDateOnlyFromLocal(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 = useMemo(() => {
+    if (mode !== "single") return null;
+    if (typeof value !== "string") return null;
+    const d = enableTime ? localDateFromIso(value) : localDateFromDateOnly(value);
+    if (!d) return null;
+    return toUTCDateOnlyFromLocal(d);
+  }, [mode, value, enableTime]);
+  const selectedUTC_start = useMemo(() => {
+    if (mode !== "range") return null;
+    const v = value;
+    if (!(v == null ? void 0 : v.start)) return null;
+    const d = localDateFromDateOnly(v.start);
+    return d ? toUTCDateOnlyFromLocal(d) : null;
+  }, [mode, value]);
+  const selectedUTC_end = useMemo(() => {
+    if (mode !== "range") return null;
+    const v = value;
+    if (!(v == null ? void 0 : v.end)) return null;
+    const d = localDateFromDateOnly(v.end);
+    return d ? toUTCDateOnlyFromLocal(d) : null;
+  }, [mode, value]);
+  const isDisabledUTC = useCallback(
+    (utcDay) => {
+      if (min && utcDay < toUTCDateOnlyFromLocal(min)) return true;
+      if (max && utcDay > toUTCDateOnlyFromLocal(max)) return true;
+      return false;
+    },
+    [min, max]
+  );
+  const selectDay = useCallback(
+    (utcDay) => {
+      var _a, _b;
+      if (isDisabledUTC(utcDay)) return;
+      const y = utcDay.getUTCFullYear();
+      const m0 = utcDay.getUTCMonth();
+      const d = utcDay.getUTCDate();
+      if (mode === "single") {
+        if (enableTime) {
+          const iso = isoFromLocalParts(y, m0, d, timeHH, timeMM);
+          if (!iso) return;
+          onChangeIso(iso);
+        } else {
+          const dateOnly = dateOnlyFromLocalParts(y, m0, d);
+          onChangeDateOnly(dateOnly);
+        }
+        (_a = popRef.current) == null ? void 0 : _a.close();
+        return;
+      }
+      const curr = value;
+      const picked = dateOnlyFromLocalParts(y, m0, d);
+      if (!curr.start || curr.start && curr.end) {
+        onChangeRange({ start: picked, end: null });
+        return;
+      }
+      const start = compareDateOnly(curr.start, picked) <= 0 ? curr.start : picked;
+      const end = compareDateOnly(curr.start, picked) <= 0 ? picked : curr.start;
+      onChangeRange({ start, end });
+      (_b = popRef.current) == null ? void 0 : _b.close();
+    },
+    [
+      enableTime,
+      isDisabledUTC,
+      mode,
+      onChangeDateOnly,
+      onChangeIso,
+      onChangeRange,
+      timeHH,
+      timeMM,
+      value
+    ]
+  );
+  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 gridRef = useRef(null);
+  useEffect(() => {
+    const el = gridRef.current;
+    if (!el) return;
+    const onKey = (e) => {
+      var _a;
+      if (!((_a = popRef.current) == null ? void 0 : _a.isOpen())) return;
+      if ([
+        "ArrowLeft",
+        "ArrowRight",
+        "ArrowUp",
+        "ArrowDown",
+        "PageUp",
+        "PageDown",
+        "Home",
+        "End"
+      ].includes(e.key)) {
+        e.preventDefault();
+      }
+      switch (e.key) {
+        case "ArrowLeft":
+          setMonthAnchor((prev) => addDaysLocal(prev, -1));
+          break;
+        case "ArrowRight":
+          setMonthAnchor((prev) => addDaysLocal(prev, 1));
+          break;
+        case "ArrowUp":
+          setMonthAnchor((prev) => addDaysLocal(prev, -7));
+          break;
+        case "ArrowDown":
+          setMonthAnchor((prev) => addDaysLocal(prev, 7));
+          break;
+        case "PageUp":
+          setMonthAnchor((prev) => addMonthsLocal(prev, -1));
+          break;
+        case "PageDown":
+          setMonthAnchor((prev) => addMonthsLocal(prev, 1));
+          break;
+        case "Home": {
+          const a = toUTCDateOnlyFromLocal(monthAnchor);
+          setMonthAnchor(new Date(a.getUTCFullYear(), a.getUTCMonth(), 1));
+          break;
+        }
+        case "End": {
+          const a = toUTCDateOnlyFromLocal(monthAnchor);
+          setMonthAnchor(new Date(a.getUTCFullYear(), a.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]
+  );
+  const formatted = useMemo(() => {
+    if (mode === "single") {
+      if (typeof value !== "string") return "";
+      const d = enableTime ? localDateFromIso(value) : localDateFromDateOnly(value);
+      return d ? toMaskedFromDate(d, enableTime) : "";
+    }
+    const v = value;
+    const s = typeof (v == null ? void 0 : v.start) === "string" ? localDateFromDateOnly(v.start) : null;
+    const e = typeof (v == null ? void 0 : v.end) === "string" ? localDateFromDateOnly(v.end) : null;
+    const ss = s ? toMaskedFromDate(s, false) : "";
+    const ee = e ? toMaskedFromDate(e, false) : "";
+    if (ss && ee) return `${ss} \u2013 ${ee}`;
+    if (ss) return `${ss} \u2013`;
+    if (ee) return `\u2013 ${ee}`;
+    return "";
+  }, [mode, value, enableTime]);
+  const [text, setText] = useState(formatted);
+  const [dirty, setDirty] = useState(false);
+  useEffect(() => {
+    if (!dirty) setText(formatted);
+  }, [formatted, dirty]);
+  const commitTypedValue = useCallback(() => {
+    if (!text.trim()) {
+      if (mode === "single") {
+        if (enableTime) onChangeIso(null);
+        else onChangeDateOnly(null);
+      } else {
+        onChangeRange({ start: null, end: null });
+      }
+      setDirty(false);
+      return;
+    }
+    if (mode === "single") {
+      const dLocal = parseLooseDateOrDateTime(text);
+      if (!dLocal) return;
+      if (enableTime) {
+        onChangeIso(isoFromLocalDate(dLocal));
+      } else {
+        onChangeDateOnly(
+          dateOnlyFromLocalParts(dLocal.getFullYear(), dLocal.getMonth(), dLocal.getDate())
+        );
+      }
+      setMonthAnchor(dLocal);
+      setDirty(false);
+      return;
+    }
+    const r = parseLooseRange(text);
+    if (r) {
+      const start = dateOnlyFromLocalParts(
+        r.start.getFullYear(),
+        r.start.getMonth(),
+        r.start.getDate()
+      );
+      const end = dateOnlyFromLocalParts(r.end.getFullYear(), r.end.getMonth(), r.end.getDate());
+      onChangeRange({ start, end });
+      setMonthAnchor(r.start);
+      setDirty(false);
+    }
+  }, [text, mode, enableTime, onChangeDateOnly, onChangeIso, onChangeRange]);
+  const emitTimeChange = useCallback(
+    (nextHH, nextMM) => {
+      if (mode !== "single" || !enableTime) return;
+      if (typeof value !== "string") return;
+      const current = localDateFromIso(value);
+      if (!current) return;
+      const iso = isoFromLocalParts(
+        current.getFullYear(),
+        current.getMonth(),
+        current.getDate(),
+        nextHH,
+        nextMM
+      );
+      if (!iso) return;
+      onChangeIso(iso);
+    },
+    [mode, enableTime, value, onChangeIso]
+  );
+  const clear = useCallback(() => {
+    if (mode === "single") {
+      if (enableTime) onChangeIso(null);
+      else onChangeDateOnly(null);
+    } else {
+      onChangeRange({ start: null, end: null });
+    }
+    setDirty(false);
+    setText("");
+  }, [mode, enableTime, onChangeDateOnly, onChangeIso, onChangeRange]);
+  const fallbackPlaceholder = mode === "single" ? "V\xE6lg dato" : "V\xE6lg interval";
+  const fullWidth = Boolean(inputProps == null ? void 0 : inputProps.fullWidth);
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      matchTriggerWidth: false,
+      ref: popRef,
+      onOpenChange,
+      fullWidth,
+      trigger: (toggle) => {
+        var _a, _b;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: (e) => {
+              const target = e.target;
+              if (target == null ? void 0 : target.closest('[data-input-container-label-action="true"]')) return;
+              toggle(e);
+            },
+            className: [styles.triggerWrap, fullWidth ? styles.triggerWrapFullWidth : ""].filter(Boolean).join(" "),
+            children: /* @__PURE__ */ jsx(
+              Input,
+              {
+                ...inputProps,
+                fieldClassName: styles.compactTriggerField,
+                autoComplete: "off",
+                autoCorrect: "off",
+                autoCapitalize: "none",
+                spellCheck: "false",
+                placeholder: (_a = inputProps == null ? void 0 : inputProps.placeholder) != null ? _a : fallbackPlaceholder,
+                value: dirty ? text : formatted,
+                onInput: (e) => {
+                  setDirty(true);
+                  const raw = e.target.value;
+                  const masked = mode === "single" ? maskSingle(raw, enableTime) : maskRange(raw, false);
+                  setText(masked);
+                },
+                onBlur: commitTypedValue,
+                onKeyDown: (e) => {
+                  var _a2;
+                  (_a2 = inputProps == null ? void 0 : inputProps.onKeyDown) == null ? void 0 : _a2.call(inputProps, e);
+                  if (e.defaultPrevented) return;
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitTypedValue();
+                  }
+                },
+                icon: showCalendarIcon ? /* @__PURE__ */ jsx(Calendar, { size: 16 }) : void 0,
+                onClear: formatted || text ? clear : void 0,
+                "aria-haspopup": "dialog",
+                "aria-expanded": ((_b = popRef.current) == null ? void 0 : _b.isOpen()) ? true : false,
+                disabled: inputProps == null ? void 0 : inputProps.disabled,
+                error: inputProps == null ? void 0 : inputProps.error
+              }
+            )
+          }
+        );
+      },
+      viewportPadding: 8,
+      children: /* @__PURE__ */ jsxs("div", { className: cx(styles.panel, !!(presets == null ? void 0 : presets.length) && styles.panelWithPresets), children: [
+        (presets == null ? void 0 : presets.length) ? /* @__PURE__ */ jsxs("div", { className: styles.presetsCol, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.presetsLabel, children: "Forvalg" }),
+          /* @__PURE__ */ jsxs("div", { className: styles.presetsList, children: [
+            presets.map((p) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outlined",
+                size: "sm",
+                onClick: () => {
+                  var _a;
+                  const r = p.getRange();
+                  const start = dateOnlyFromLocalParts(
+                    r.start.getFullYear(),
+                    r.start.getMonth(),
+                    r.start.getDate()
+                  );
+                  const end = dateOnlyFromLocalParts(
+                    r.end.getFullYear(),
+                    r.end.getMonth(),
+                    r.end.getDate()
+                  );
+                  onChangeRange({ start, end });
+                  setDirty(false);
+                  setText(
+                    `${toMaskedFromDate(r.start, false)} \u2013 ${toMaskedFromDate(r.end, false)}`
+                  );
+                  setMonthAnchor(r.start);
+                  (_a = popRef.current) == null ? void 0 : _a.close();
+                },
+                children: p.label
+              },
+              p.label
+            )),
+            mode === "range" && /* @__PURE__ */ jsx(Button, { variant: "danger", size: "sm", onClick: clear, icon: /* @__PURE__ */ jsx(X, { size: 14 }), children: "Ryd" })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { className: styles.calendarArea, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outlined",
+                size: "sm",
+                "aria-label": "Forrige m\xE5ned",
+                icon: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 }),
+                onClick: () => setMonthAnchor((prev) => addMonthsLocal(prev, -1))
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { "aria-live": "polite", className: styles.headerTitle, children: monthFmt.format(monthAnchor) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outlined",
+                size: "sm",
+                "aria-label": "N\xE6ste m\xE5ned",
+                icon: /* @__PURE__ */ jsx(ChevronRight, { size: 16 }),
+                onClick: () => setMonthAnchor((prev) => addMonthsLocal(prev, 1))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.weekRow, "aria-hidden": true, children: Array.from({ length: 7 }, (_, i) => (i + weekStartsOn) % 7).map((dow) => /* @__PURE__ */ jsx("div", { className: styles.weekCell, children: weekdayFmt.format(dUTC(2024, 8, dow + 1)).slice(0, 2) }, dow)) }),
+          /* @__PURE__ */ 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, toUTCDateOnlyFromLocal(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 /* @__PURE__ */ 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" && /* @__PURE__ */ jsxs("div", { className: styles.timeRow, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.timeLabel, children: [
+              /* @__PURE__ */ jsx(Clock, { size: 14 }),
+              " Tid"
+            ] }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: timeHH,
+                onChange: (e) => {
+                  const nextHH = parseInt(e.target.value, 10);
+                  setTimeHH(nextHH);
+                  emitTimeChange(nextHH, timeMM);
+                },
+                className: styles.timeSelect,
+                children: hours.map((h) => /* @__PURE__ */ jsx("option", { value: h, children: String(h).padStart(2, "0") }, h))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: timeMM,
+                onChange: (e) => {
+                  const nextMM = parseInt(e.target.value, 10);
+                  setTimeMM(nextMM);
+                  emitTimeChange(timeHH, nextMM);
+                },
+                className: styles.timeSelect,
+                children: minutes.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: String(m).padStart(2, "0") }, m))
+              }
+            )
+          ] }),
+          mode === "range" && /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
+            /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "sm", onClick: clear, icon: /* @__PURE__ */ jsx(X, { size: 14 }), children: "Ryd" }),
+            /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", onClick: () => {
+              var _a;
+              return (_a = popRef.current) == null ? void 0 : _a.close();
+            }, children: "OK" })
+          ] })
+        ] })
+      ] })
+    }
+  );
+});
+DateTimePicker.displayName = "DateTimePicker";
+
+export { DateTimePicker };

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

@@ -0,0 +1,155 @@
+.triggerWrap {
+  display: inline-block;
+}
+
+.triggerWrapFullWidth {
+  display: block;
+  width: 100%;
+}
+
+.compactTriggerField {
+  padding-block: 2px;
+}
+
+.panel {
+  display: grid;
+  grid-template-columns: 1fr;
+  width: fit-content;
+  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;
+  width: max-content;
+  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;
+}