@dbcdk/react-components 0.0.95 → 0.0.97

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

@@ -1,78 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, Copy } from 'lucide-react';
-import { useState } from 'react';
-import styles from './CopyButton.module.css';
-import { Button } from '../button/Button';
-import { Input } from '../forms/input/Input';
-import { Hyperlink } from '../hyperlink/Hyperlink';
-import { useOptionalToast } from '../toast/provider/ToastProvider';
-export function CopyButton(props) {
-    var _a, _b, _c;
-    const { text, variant = 'outlined', size = 'sm', children, displayStyle, disableIcon = false, disableToast = false, className, style, fullWidth, disabled, ...rest } = props;
-    const [copied, setCopied] = useState(false);
-    const toast = useOptionalToast();
-    const buttonLabel = children !== null && children !== void 0 ? children : 'Kopiér';
-    const icon = disableIcon ? null : copied ? _jsx(Check, {}) : _jsx(Copy, {});
-    const handleCopySuccess = () => {
-        if (!disableIcon) {
-            setCopied(true);
-            window.setTimeout(() => setCopied(false), 1000);
-            return;
-        }
-        if (!disableToast) {
-            toast === null || toast === void 0 ? void 0 : toast.showToast({
-                severity: 'neutral',
-                message: 'Kopieret',
-            });
-        }
-    };
-    const handleCopy = async () => {
-        try {
-            if (!window.isSecureContext || !navigator.clipboard) {
-                throw new Error('Clipboard API unavailable');
-            }
-            await navigator.clipboard.writeText(text);
-            handleCopySuccess();
-        }
-        catch (err) {
-            console.error('Failed to copy:', err);
-            try {
-                const textarea = document.createElement('textarea');
-                textarea.value = text;
-                textarea.setAttribute('readonly', '');
-                textarea.style.position = 'fixed';
-                textarea.style.left = '-9999px';
-                document.body.appendChild(textarea);
-                textarea.select();
-                const success = document.execCommand('copy');
-                document.body.removeChild(textarea);
-                if (success) {
-                    handleCopySuccess();
-                }
-            }
-            catch (fallbackErr) {
-                console.error('Fallback copy failed:', fallbackErr);
-            }
-        }
-    };
-    if (displayStyle === 'link') {
-        return (_jsx(Hyperlink, { asChild: true, variant: "primary", icon: icon, children: _jsx("button", { type: "button", "aria-label": children ? '' : ((_a = rest['aria-label']) !== null && _a !== void 0 ? _a : 'Kopier til udklipsholder'), onClick: e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleCopy();
-                }, className: [styles.link, copied ? styles.copied : '', className !== null && className !== void 0 ? className : '']
-                    .filter(Boolean)
-                    .join(' '), style: style, disabled: disabled, children: buttonLabel }) }));
-    }
-    if (displayStyle === 'field') {
-        return (_jsx(Input, { value: text, readOnly: true, disabled: disabled, fullWidth: fullWidth, className: className, style: style, inputSize: size, variant: "outlined", buttonLabel: String(buttonLabel), buttonIcon: icon, onButtonClick: () => {
-                void handleCopy();
-            }, "aria-label": (_b = rest['aria-label']) !== null && _b !== void 0 ? _b : 'Kopier til udklipsholder' }));
-    }
-    return (_jsxs(Button, { ...rest, "aria-label": children ? '' : ((_c = rest['aria-label']) !== null && _c !== void 0 ? _c : 'Kopier til udklipsholder'), onClick: e => {
-            e.preventDefault();
-            e.stopPropagation();
-            handleCopy();
-        }, variant: variant, size: size, className: className, style: style, disabled: disabled, children: [_jsx("span", { className: `${styles.container} ${copied ? styles.copied : ''}`, children: icon }), buttonLabel] }));
-}

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

@@ -1,22 +0,0 @@
-.container,
-.link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-xxs);
-  background-color: unset;
-}
-
-.link {
-  appearance: none;
-  border: none;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  vertical-align: middle;
-}
-
-.copied {
-  color: var(--color-status-success);
-  transition: color ease-in 0.1s;
-}

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

@@ -1,403 +0,0 @@
-'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 { compareDateOnly, dateOnlyFromLocalParts, isoFromLocalDate, isoFromLocalParts, localDateFromDateOnly, localDateFromIso, maskRange, maskSingle, parseLooseDateOrDateTime, parseLooseRange, toMaskedFromDate, } from './dateTimeHelpers';
-import styles from './DateTimePicker.module.css';
-/* ---------- Date grid helpers (UTC date-only cells) ---------- */
-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();
-// Treat local calendar date as the source of truth for the grid.
-// Build an equivalent "UTC date-only" for comparisons.
-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);
-};
-/* ---------- 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, showCalendarIcon = true, timeStep = 15, min, max, locale = typeof navigator !== 'undefined' ? navigator.language : 'da-DK', weekStartsOn = 1, presets, inputProps, formatDate = defaultFormatDate, formatRange = defaultFormatRange, onOpenChange, }, _ref) {
-    void formatDate;
-    void formatRange;
-    const popRef = useRef(null);
-    // Narrowed onChange call signatures (avoids union-of-functions intersection issues)
-    const onChangeRange = onChange;
-    const onChangeIso = onChange;
-    const onChangeDateOnly = onChange;
-    const todayLocal = useMemo(() => new Date(), []);
-    // ---- local anchor from controlled value ----
-    const initialAnchor = useMemo(() => {
-        if (mode === 'single') {
-            if (typeof value === 'string') {
-                const d = enableTime
-                    ? localDateFromIso(value)
-                    : localDateFromDateOnly(value);
-                return d !== null && d !== void 0 ? d : todayLocal;
-            }
-            return todayLocal;
-        }
-        // range: anchor from start if present
-        const v = value;
-        if (v === null || v === void 0 ? void 0 : v.start) {
-            const d = localDateFromDateOnly(v.start);
-            return d !== null && d !== void 0 ? d : todayLocal;
-        }
-        return todayLocal;
-    }, [mode, value, enableTime, todayLocal]);
-    const [monthAnchor, setMonthAnchor] = useState(initialAnchor);
-    useEffect(() => setMonthAnchor(initialAnchor), [initialAnchor]);
-    // time defaults (local)
-    const [timeHH, setTimeHH] = useState(todayLocal.getHours());
-    const [timeMM, setTimeMM] = useState(Math.floor(todayLocal.getMinutes() / timeStep) * timeStep);
-    // If datetime value changes externally, keep HH/MM in sync
-    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]);
-    // ---- selection state for grid (compare in UTC date-only) ----
-    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 || v === void 0 ? 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 || v === void 0 ? void 0 : v.end))
-            return null;
-        const d = localDateFromDateOnly(v.end);
-        return d ? toUTCDateOnlyFromLocal(d) : null;
-    }, [mode, value]);
-    const isDisabledUTC = useCallback((utcDay) => {
-        // Interpret min/max as local-day constraints for UI
-        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;
-        // utcDay's UTC Y/M/D corresponds to the *local calendar day* shown in UI.
-        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; // DST-invalid time; you may want to surface validation UI
-                onChangeIso(iso);
-            }
-            else {
-                const dateOnly = dateOnlyFromLocalParts(y, m0, d);
-                onChangeDateOnly(dateOnly);
-            }
-            (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
-            return;
-        }
-        // range: date-only
-        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 || _b === void 0 ? 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 || _a === void 0 ? 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]);
-    // ---- Input display: always local ----
-    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 || v === void 0 ? void 0 : v.start) === 'string' ? localDateFromDateOnly(v.start) : null;
-        const e = typeof (v === null || v === void 0 ? 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} – ${ee}`;
-        if (ss)
-            return `${ss} –`;
-        if (ee)
-            return `– ${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;
-        }
-        // range: date-only
-        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ælg dato' : 'Vælg interval';
-    const fullWidth = Boolean(inputProps === null || inputProps === void 0 ? void 0 : inputProps.fullWidth);
-    return (_jsx(Popover, { matchTriggerWidth: false, ref: popRef, onOpenChange: onOpenChange, fullWidth: fullWidth, trigger: toggle => {
-            var _a, _b;
-            return (_jsx("div", { onClick: toggle, className: [styles.triggerWrap, fullWidth ? styles.triggerWrapFullWidth : '']
-                    .filter(Boolean)
-                    .join(' '), children: _jsx(Input, { ...inputProps, fieldClassName: styles.compactTriggerField, autoComplete: "off", autoCorrect: "off", autoCapitalize: "none", spellCheck: "false", 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, false);
-                        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: showCalendarIcon ? _jsx(Calendar, { size: 16 }) : undefined, 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();
-                                        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)} – ${toMaskedFromDate(r.end, false)}`);
-                                        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(prev => addMonthsLocal(prev, -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(prev => addMonthsLocal(prev, 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, 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 (_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 => {
-                                        const nextHH = parseInt(e.target.value, 10);
-                                        setTimeHH(nextHH);
-                                        emitTimeChange(nextHH, timeMM);
-                                    }, className: styles.timeSelect, children: hours.map(h => (_jsx("option", { value: h, children: String(h).padStart(2, '0') }, h))) }), _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 => (_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

@@ -1,155 +0,0 @@
-.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;
-}