@dbcdk/react-components 0.0.3 → 0.0.5

package/dist/components/copy-button/CopyButton.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Button } from '../button/Button';
+import { Check, Copy } from 'lucide-react';
+import styles from './CopyButton.module.css';
+
+function CopyButton({
+  text,
+  variant = "outlined",
+  size = "sm",
+  children
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1e3);
+    } catch (err) {
+      console.error("Failed to copy: ", err);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Button, { "aria-label": "Copy to clipboard", onClick: handleCopy, variant, size, children: [
+    /* @__PURE__ */ jsx("span", { className: `${styles.container} ${copied ? styles.copied : ""}`, children: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}) }),
+    children
+  ] });
+}
+
+export { CopyButton };

package/dist/components/copy-button/CopyButton.module.css

@@ -0,0 +1,6 @@
+.copied > button {
+  background-color: var(--color-status-success-bg);
+  border-color: var(--color-status-success-border);
+  color: var(--color-status-success);
+  transition: all ease-in 0.1s;
+}

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

@@ -0,0 +1,504 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var Popover = require('../popover/Popover');
+var Input = require('../input/Input');
+var Button = require('../button/Button');
+var styles = require('./DateTimePicker.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const digits = (s) => (s.match(/\d/g) || []).join("");
+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;
+}
+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;
+}
+function maskSingle(text, enableTime) {
+  let t = text.trim().replace(/\s+/g, " ");
+  if (!enableTime) return maskDateEU(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;
+}
+function maskRange(text, enableTime) {
+  const sepRe = /\s*(?:–|-|to|til)\s*/i;
+  const parts = text.split(sepRe);
+  if (parts.length === 1) {
+    return maskSingle(parts[0], enableTime);
+  }
+  const a = maskSingle(parts[0], enableTime);
+  const b = maskSingle(parts.slice(1).join(" "), enableTime);
+  return `${a} \u2013 ${b}`.trim();
+}
+const pad2 = (n) => String(n).padStart(2, "0");
+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;
+}
+function toMaskedRange(start, end, enableTime) {
+  if (start && end)
+    return `${toMaskedFromDate(start, enableTime)} \u2013 ${toMaskedFromDate(end, enableTime)}`;
+  if (start) return `${toMaskedFromDate(start, enableTime)} \u2013`;
+  if (end) return `\u2013 ${toMaskedFromDate(end, enableTime)}`;
+  return "";
+}
+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 ? 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;
+  let y, m, d;
+  let mIso = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(raw);
+  if (mIso) {
+    y = +mIso[1];
+    m = +mIso[2] - 1;
+    d = +mIso[3];
+  } else {
+    let 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;
+  if (local.getFullYear() !== y || local.getMonth() !== m || local.getDate() !== d) return null;
+  return local;
+}
+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 };
+}
+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();
+}
+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 = react.forwardRef(function DateTimePicker2({
+  mode = "single",
+  value,
+  onChange,
+  enableTime = false,
+  timeStep = 15,
+  min,
+  max,
+  locale = typeof navigator !== "undefined" ? navigator.language : "da-DK",
+  weekStartsOn = 1,
+  presets,
+  placeholder,
+  inputSize = "md",
+  disabled,
+  id,
+  formatDate = defaultFormatDate,
+  // still exposed, not used for input text
+  formatRange = defaultFormatRange
+  // still exposed, not used for input text
+}, _ref) {
+  const popRef = react.useRef(null);
+  const todayLocal = react.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const initialAnchor = react.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] = react.useState(initialAnchor);
+  const [timeHH, setTimeHH] = react.useState(todayLocal.getHours());
+  const [timeMM, setTimeMM] = react.useState(
+    Math.floor(todayLocal.getMinutes() / timeStep) * timeStep
+  );
+  const [hoverUTC, setHoverUTC] = react.useState(null);
+  const cellsUTC = react.useMemo(
+    () => buildMonthGrid(monthAnchor, weekStartsOn),
+    [monthAnchor, weekStartsOn]
+  );
+  const monthStartUTC = react.useMemo(() => startOfMonthUTC(toUTCDateOnly(monthAnchor)), [monthAnchor]);
+  const monthEndUTC = react.useMemo(() => endOfMonthUTC(toUTCDateOnly(monthAnchor)), [monthAnchor]);
+  const weekdayFmt = react.useMemo(() => new Intl.DateTimeFormat(locale, { weekday: "short" }), [locale]);
+  const monthFmt = react.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 = react.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 ? 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 ? void 0 : _b.close();
+    }
+  };
+  const gridRef = react.useRef(null);
+  react.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();
+      }
+      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 = react.useMemo(() => Array.from({ length: 24 }, (_, i) => i), []);
+  const minutes = react.useMemo(
+    () => Array.from({ length: Math.floor(60 / (timeStep || 1)) }, (_, i) => i * (timeStep || 1)),
+    [timeStep]
+  );
+  const formatted = react.useMemo(() => {
+    var _a, _b;
+    if (mode === "single") {
+      return value instanceof Date && value ? toMaskedFromDate(value, enableTime) : "";
+    }
+    const v = value;
+    return toMaskedRange((_a = v == null ? void 0 : v.start) != null ? _a : null, (_b = v == null ? void 0 : v.end) != null ? _b : null, enableTime);
+  }, [mode, value, enableTime]);
+  const [text, setText] = react.useState(formatted);
+  const [dirty, setDirty] = react.useState(false);
+  react.useEffect(() => {
+    if (!dirty) setText(formatted);
+  }, [formatted, dirty]);
+  const commitTypedValue = react.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 = react.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(), 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;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      ref: popRef,
+      trigger: (toggle) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: toggle, className: styles__default.default.triggerWrap, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Input.Input,
+          {
+            id,
+            placeholder: placeholder || (mode === "single" ? "V\xE6lg dato" : "V\xE6lg interval"),
+            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) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commitTypedValue();
+              }
+            },
+            inputSize,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { size: 16 }),
+            onClear: formatted || text ? clear : void 0,
+            "aria-haspopup": "dialog",
+            "aria-expanded": ((_a = popRef.current) == null ? void 0 : _a.isOpen()) ? true : false,
+            disabled
+          }
+        ) });
+      },
+      minWidth: "320px",
+      viewportPadding: 8,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(styles__default.default.panel, !!(presets == null ? void 0 : presets.length) && styles__default.default.panelWithPresets), children: [
+        (presets == null ? void 0 : presets.length) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.presetsCol, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.presetsLabel, children: "Forvalg" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.presetsList, children: [
+            presets.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+              Button.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 ? void 0 : _a.close();
+                },
+                children: p.label
+              },
+              p.label
+            )),
+            mode === "range" && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "danger", size: "sm", onClick: clear, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 }), children: "Ryd" })
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.calendarArea, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                variant: "outlined",
+                size: "sm",
+                "aria-label": "Forrige m\xE5ned",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 16 }),
+                onClick: () => setMonthAnchor(addMonthsLocal(monthAnchor, -1))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-live": "polite", className: styles__default.default.headerTitle, children: monthFmt.format(monthAnchor) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                variant: "outlined",
+                size: "sm",
+                "aria-label": "N\xE6ste m\xE5ned",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 16 }),
+                onClick: () => setMonthAnchor(addMonthsLocal(monthAnchor, 1))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.weekRow, "aria-hidden": true, children: Array.from({ length: 7 }, (_, i) => (i + weekStartsOn) % 7).map((dow) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.weekCell, children: weekdayFmt.format(dUTC(2024, 8, dow + 1)).slice(0, 2) }, dow)) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: gridRef,
+              role: "grid",
+              "aria-label": "Kalender",
+              tabIndex: 0,
+              className: styles__default.default.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 /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    role: "gridcell",
+                    "aria-selected": selected,
+                    "aria-disabled": disabledDay,
+                    onMouseEnter: () => setHoverUTC(utcDay),
+                    onClick: () => selectDay(utcDay),
+                    disabled: disabledDay,
+                    className: cx(
+                      styles__default.default.dayCell,
+                      inThisMonth ? styles__default.default.dayInMonth : styles__default.default.dayOutside,
+                      selected && styles__default.default.daySelected,
+                      inRange && styles__default.default.dayInRange,
+                      isToday && !selected && styles__default.default.dayToday,
+                      disabledDay && styles__default.default.dayDisabled
+                    ),
+                    title: new Date(utcDay).toLocaleDateString(locale),
+                    children: dayNum
+                  },
+                  idx
+                );
+              })
+            }
+          ),
+          enableTime && mode === "single" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.timeRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.timeLabel, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { size: 14 }),
+              " Tid"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                value: timeHH,
+                onChange: (e) => setTimeHH(parseInt(e.target.value, 10)),
+                className: styles__default.default.timeSelect,
+                children: hours.map((h) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: h, children: String(h).padStart(2, "0") }, h))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
+              {
+                value: timeMM,
+                onChange: (e) => setTimeMM(parseInt(e.target.value, 10)),
+                className: styles__default.default.timeSelect,
+                children: minutes.map((m) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: m, children: String(m).padStart(2, "0") }, m))
+              }
+            )
+          ] }),
+          mode === "range" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", size: "sm", onClick: clear, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 }), children: "Ryd" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "primary", size: "sm", onClick: () => {
+              var _a;
+              return (_a = popRef.current) == null ? void 0 : _a.close();
+            }, children: "OK" })
+          ] })
+        ] })
+      ] })
+    }
+  );
+});
+
+exports.DateTimePicker = DateTimePicker;

package/dist/components/datetime-picker/DateTimePicker.d.ts

@@ -0,0 +1,39 @@
+import { Size } from '@/types/sizes.types';
+type Mode = 'single' | 'range';
+type WeekStart = 0 | 1;
+export type DateValue = Date | null | {
+    start: Date | null;
+    end: Date | null;
+};
+export interface DateTimePickerProps {
+    mode?: Mode;
+    value: DateValue;
+    onChange: (next: DateValue) => void;
+    enableTime?: boolean;
+    timeStep?: number;
+    min?: Date;
+    max?: Date;
+    locale?: string;
+    weekStartsOn?: WeekStart;
+    presets?: {
+        label: string;
+        getRange: () => {
+            start: Date;
+            end: Date;
+        };
+    }[];
+    placeholder?: string;
+    inputSize?: Size;
+    disabled?: boolean;
+    id?: string;
+    formatDate?: (d: Date, opts: {
+        locale: string;
+        enableTime: boolean;
+    }) => string;
+    formatRange?: (s: Date | null, e: Date | null, opts: {
+        locale: string;
+        enableTime: boolean;
+    }) => string;
+}
+export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};