@dbcdk/react-components 0.0.9 → 0.0.10

package/dist/components/accordion/Accordion.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
+export interface AccordionItem {
+    header: string;
+    headerIcon?: ReactNode;
+    severity?: Severity;
+    children: ReactNode;
+    disabled?: boolean;
+}
+type Size = 'sm' | 'md' | 'lg';
+type Mode = 'single' | 'multiple';
+export interface AccordionProps {
+    items: AccordionItem[];
+    mode?: Mode;
+    size?: Size;
+    /** Uncontrolled defaults */
+    defaultOpenIndex?: number | null;
+    defaultOpenIndexes?: number[];
+    /** Controlled state */
+    openIndex?: number | null;
+    openIndexes?: number[];
+    /** Change callbacks */
+    onOpenIndexChange?: (index: number | null) => void;
+    onOpenIndexesChange?: (indexes: number[]) => void;
+}
+export declare function Accordion({ items, mode, size, defaultOpenIndex, defaultOpenIndexes, openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }: AccordionProps): JSX.Element;
+export {};

package/dist/components/accordion/Accordion.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useState } from 'react';
+import styles from './Accordion.module.css';
+import { Headline } from '../headline/Headline';
+function uniqSorted(nums) {
+    return Array.from(new Set(nums)).sort((a, b) => a - b);
+}
+export function Accordion({ items, mode = 'single', size = 'md', defaultOpenIndex = null, defaultOpenIndexes = [], openIndex, openIndexes, onOpenIndexChange, onOpenIndexesChange, }) {
+    const uid = useId();
+    const isControlledSingle = mode === 'single' && openIndex !== undefined;
+    const isControlledMultiple = mode === 'multiple' && openIndexes !== undefined;
+    const [internalOpenIndex, setInternalOpenIndex] = useState(mode === 'single' ? defaultOpenIndex : null);
+    const [internalOpenIndexes, setInternalOpenIndexes] = useState(mode === 'multiple' ? uniqSorted(defaultOpenIndexes) : []);
+    const currentOpenIndex = mode === 'single' ? (isControlledSingle ? openIndex : internalOpenIndex) : null;
+    const currentOpenIndexes = useMemo(() => mode === 'multiple'
+        ? isControlledMultiple
+            ? uniqSorted(openIndexes)
+            : internalOpenIndexes
+        : [], [mode, isControlledMultiple, openIndexes, internalOpenIndexes]);
+    const openSet = useMemo(() => new Set(mode === 'single'
+        ? currentOpenIndex !== null
+            ? [currentOpenIndex]
+            : []
+        : currentOpenIndexes), [mode, currentOpenIndex, currentOpenIndexes]);
+    function setSingle(next) {
+        if (isControlledSingle)
+            onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
+        else {
+            setInternalOpenIndex(next);
+            onOpenIndexChange === null || onOpenIndexChange === void 0 ? void 0 : onOpenIndexChange(next);
+        }
+    }
+    function setMultiple(next) {
+        const normalized = uniqSorted(next);
+        if (isControlledMultiple)
+            onOpenIndexesChange === null || onOpenIndexesChange === void 0 ? void 0 : onOpenIndexesChange(normalized);
+        else {
+            setInternalOpenIndexes(normalized);
+            onOpenIndexesChange === null || onOpenIndexesChange === void 0 ? void 0 : onOpenIndexesChange(normalized);
+        }
+    }
+    function toggle(index) {
+        const item = items[index];
+        if (!item || item.disabled)
+            return;
+        if (mode === 'single') {
+            const isOpen = openSet.has(index);
+            setSingle(isOpen ? null : index);
+            return;
+        }
+        // multiple
+        const isOpen = openSet.has(index);
+        if (isOpen)
+            setMultiple(currentOpenIndexes.filter(i => i !== index));
+        else
+            setMultiple([...currentOpenIndexes, index]);
+    }
+    return (_jsx("div", { className: `${styles.container} ${styles[size]}`, children: items.map((item, i) => {
+            const isOpen = openSet.has(i);
+            const isDisabled = !!item.disabled;
+            const buttonId = `${uid}-acc-btn-${i}`;
+            const panelId = `${uid}-acc-panel-${i}`;
+            return (_jsxs("section", { className: `${styles.item} ${isOpen ? styles.open : ''} ${isDisabled ? styles.disabled : ''}`, children: [_jsxs("button", { type: "button", id: buttonId, className: styles.trigger, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => toggle(i), disabled: isDisabled, children: [_jsx("span", { className: styles.title, children: _jsx(Headline, { disableMargin: true, size: 4, weight: 500, severity: item.severity, allowWrap: isOpen, children: item.header }) }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx("svg", { viewBox: "0 0 20 20", focusable: "false", children: _jsx("path", { d: "M5.5 7.5L10 12l4.5-4.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })] }), _jsx("div", { id: panelId, role: "region", "aria-labelledby": buttonId, className: styles.panel, "data-open": isOpen ? 'true' : 'false', children: _jsx("div", { className: styles.content, children: item.children }) })] }, i));
+        }) }));
+}

package/dist/components/accordion/Accordion.module.css

@@ -0,0 +1,87 @@
+.container {
+  border-radius: var(--border-radius-default);
+  background-color: var(--color-bg-surface);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  gap: var(--spacing-xxs);
+}
+
+.trigger {
+  all: unset;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
+  cursor: pointer;
+  user-select: none;
+  padding: var(--spacing-xs) var(--spacing-md);
+  background: var(--color-bg-contextual);
+
+  /* IMPORTANT: allow flex children to actually shrink */
+  min-width: 0;
+}
+
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.disabled .trigger {
+  cursor: not-allowed;
+  color: var(--color-disabled-fg);
+}
+
+.title {
+  /* IMPORTANT: this is the shrinking area that contains Headline */
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+
+  /* ensures any overflow is clipped so ellipsis can show */
+  overflow: hidden;
+}
+
+.chevron {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  flex: 0 0 auto;
+  transition: transform var(--transition-normal) var(--ease-standard);
+}
+
+.open .chevron {
+  transform: rotate(180deg);
+}
+
+/* Collapsible panel using max-height */
+.panel {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height var(--transition-slow) var(--ease-decelerate);
+}
+
+.panel[data-open='true'] {
+  max-height: 999px;
+}
+
+.content {
+  padding: var(--spacing-md) 0;
+}
+
+/* Sizes */
+.sm .trigger,
+.sm .content {
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+.md .trigger {
+  padding: var(--spacing-sm) var(--spacing-md);
+}
+
+.lg .trigger {
+  padding: var(--spacing-md) var(--spacing-md);
+}

package/dist/components/button/Button.module.css

@@ -47,6 +47,7 @@
   background-color: var(--color-disabled-bg);
   border-color: transparent;
   color: var(--color-disabled-fg);
+  opacity: 0.5;
 }
 
 /* ==========================================================================

package/dist/components/circle/Circle.d.ts

@@ -1,9 +1,12 @@
 import type { ReactNode, JSX } from 'react';
 import { Severity } from '../../constants/severity.types';
+type CircleSize = 'xs' | 'sm' | 'md' | 'lg';
 interface CircleProps {
     severity: Severity;
     children?: ReactNode;
     glow?: boolean;
+    pulse?: boolean;
+    size?: CircleSize;
 }
-export declare function Circle({ severity, children, glow }: CircleProps): JSX.Element;
+export declare function Circle({ severity, children, glow, pulse, size }: CircleProps): JSX.Element;
 export {};

package/dist/components/circle/Circle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Circle.module.css';
-export function Circle({ severity, children, glow }) {
-    return (_jsxs("span", { className: styles.container, children: [_jsx("span", { "data-glow": glow, className: `${styles.circle} ${styles[severity]}` }), children, ' '] }));
+export function Circle({ severity, children, glow, pulse, size = 'sm' }) {
+    return (_jsxs("span", { className: styles.container, children: [_jsx("span", { "data-glow": glow, "data-pulse": pulse, "data-size": size, className: `${styles.circle} ${styles[severity]}` }), children] }));
 }

package/dist/components/circle/Circle.module.css

@@ -10,9 +10,10 @@
 }
 
 .circle {
+  position: relative;
   display: inline-block;
-  inline-size: var(--component-size-xs);
-  block-size: var(--component-size-xs);
+  inline-size: var(--component-size-sm);
+  block-size: var(--component-size-sm);
   border-radius: var(--border-radius-round);
   flex-shrink: 0;
 
@@ -60,3 +61,54 @@
 .info[data-glow='true'] {
   box-shadow: 0 0 0 2px var(--color-status-info-bg);
 }
+
+.circle[data-size='xs'] {
+  inline-size: var(--component-size-xxs);
+  block-size: var(--component-size-xxs);
+}
+
+.circle[data-size='sm'] {
+  inline-size: 14px;
+  block-size: 14px;
+}
+
+.circle[data-size='md'] {
+  inline-size: 18px;
+  block-size: 18px;
+}
+
+.circle[data-size='lg'] {
+  inline-size: 22px;
+  block-size: 22px;
+}
+
+.circle[data-pulse='true']::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: inherit;
+  animation: circle-pulse 1.6s ease-out infinite;
+  pointer-events: none;
+}
+
+@keyframes circle-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.6;
+  }
+  60% {
+    transform: scale(2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .circle[data-pulse='true']::after {
+    animation: none;
+  }
+}

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Input } from '../../components/forms/input/Input';
-import { DateOnly } from './dateTimeHelpers';
+import { type UtcIsoString } from './dateTimeHelpers';
 type Mode = 'single' | 'range';
 type WeekStart = 0 | 1;
-export type DateValue = number | DateOnly | null | {
-    start: DateOnly | null;
-    end: DateOnly | null;
+export type DateValue = UtcIsoString | null | {
+    start: UtcIsoString | null;
+    end: UtcIsoString | null;
 };
 type InputProps = React.ComponentProps<typeof Input>;
 export interface DateTimePickerProps {
@@ -25,10 +25,6 @@ export interface DateTimePickerProps {
             end: Date;
         };
     }[];
-    /**
-     * Forwarded to the internal <Input />.
-     * DateTimePicker controls: value, onInput/onBlur/onKeyDown, icon, onClear.
-     */
     inputProps?: Omit<InputProps, 'value' | 'onInput' | 'onBlur' | 'icon' | 'onClear' | 'type'>;
     formatDate?: (d: Date, opts: {
         locale: string;

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

@@ -5,9 +5,9 @@ import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'r
 import { Button } from '../../components/button/Button';
 import { Input } from '../../components/forms/input/Input';
 import { Popover } from '../../components/popover/Popover';
-import { localDateFromYMD, maskRange, maskSingle, pad2, parseLooseDateOrDateTime, parseLooseRange, toMaskedFromDate, toMaskedFromYMD, utcMillisFromYMD, ymdFromLocalDate, ymdFromUTCDateOnly, } from './dateTimeHelpers';
+import { isoFromLocalDate, isoFromLocalParts, localDateFromIso, maskRange, maskSingle, parseLooseDateOrDateTime, parseLooseRange, utcMillisFromIso, toMaskedFromDate, } from './dateTimeHelpers';
 import styles from './DateTimePicker.module.css';
-/* ---------- Date grid helpers (UTC) ---------- */
+/* ---------- 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);
@@ -15,14 +15,16 @@ const endOfMonthUTC = (utcDate) => dUTC(utcDate.getUTCFullYear(), utcDate.getUTC
 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());
+// IMPORTANT: 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 = toUTCDateOnly(anchorLocalDate);
+    const anchorUTC = toUTCDateOnlyFromLocal(anchorLocalDate);
     const firstUTC = startOfWeekUTC(startOfMonthUTC(anchorUTC), weekStartsOn);
     const cells = [];
     for (let i = 0; i < 42; i++)
@@ -55,77 +57,72 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
     void formatRange;
     const popRef = useRef(null);
     const todayLocal = useMemo(() => new Date(), []);
-    // ---- Derive a local anchor from the controlled value ----
+    // ---- local anchor from controlled value ----
     const initialAnchor = useMemo(() => {
         var _a, _b;
         if (mode === 'single') {
-            if (enableTime && typeof value === 'number')
-                return new Date(value); // local rendering
-            if (!enableTime && typeof value === 'string')
-                return (_a = localDateFromYMD(value)) !== null && _a !== void 0 ? _a : todayLocal;
+            if (typeof value === 'string')
+                return (_a = localDateFromIso(value)) !== null && _a !== void 0 ? _a : todayLocal;
             return todayLocal;
         }
         if (mode === 'range' && value && typeof value === 'object' && 'start' in value && value.start) {
-            return (_b = localDateFromYMD(value.start)) !== null && _b !== void 0 ? _b : todayLocal;
+            return (_b = localDateFromIso(value.start)) !== null && _b !== void 0 ? _b : todayLocal;
         }
         return todayLocal;
-    }, [mode, value, enableTime, todayLocal]);
+    }, [mode, value, todayLocal]);
     const [monthAnchor, setMonthAnchor] = useState(initialAnchor);
-    // Keep month anchor in sync when external value changes (but don’t fight while typing)
-    useEffect(() => {
-        setMonthAnchor(initialAnchor);
-    }, [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 value is a datetime and changes externally, keep dropdowns in sync
+    // If datetime value changes externally, keep HH/MM in sync
     useEffect(() => {
-        if (mode === 'single' && enableTime && typeof value === 'number') {
-            const d = new Date(value);
+        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(toUTCDateOnly(monthAnchor)), [monthAnchor]);
-    const monthEndUTC = useMemo(() => endOfMonthUTC(toUTCDateOnly(monthAnchor)), [monthAnchor]);
+    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 the grid (always compared in UTC date-only space) ----
+    // ---- selection state for grid (compare in UTC date-only) ----
     const selectedUTC_single = useMemo(() => {
-        if (mode !== 'single' || !value)
+        if (mode !== 'single')
             return null;
-        if (enableTime) {
-            if (typeof value !== 'number')
-                return null;
-            return toUTCDateOnly(new Date(value));
-        }
         if (typeof value !== 'string')
             return null;
-        const local = localDateFromYMD(value);
-        return local ? toUTCDateOnly(local) : null;
-    }, [mode, value, enableTime]);
+        const d = localDateFromIso(value);
+        if (!d)
+            return null;
+        return toUTCDateOnlyFromLocal(d);
+    }, [mode, value]);
     const selectedUTC_start = useMemo(() => {
         if (mode !== 'range' || !value || typeof value !== 'object' || !('start' in value))
             return null;
         if (!value.start)
             return null;
-        const local = localDateFromYMD(value.start);
-        return local ? toUTCDateOnly(local) : null;
+        const d = localDateFromIso(value.start);
+        return d ? toUTCDateOnlyFromLocal(d) : null;
     }, [mode, value]);
     const selectedUTC_end = useMemo(() => {
         if (mode !== 'range' || !value || typeof value !== 'object' || !('end' in value))
             return null;
         if (!value.end)
             return null;
-        const local = localDateFromYMD(value.end);
-        return local ? toUTCDateOnly(local) : null;
+        const d = localDateFromIso(value.end);
+        return d ? toUTCDateOnlyFromLocal(d) : null;
     }, [mode, value]);
     const isDisabledUTC = useCallback((utcDay) => {
-        // min/max are Dates (instants). Treat them as local-day constraints for UI.
-        if (min && utcDay < toUTCDateOnly(min))
+        // Interpret min/max as local-day constraints for UI
+        if (min && utcDay < toUTCDateOnlyFromLocal(min))
             return true;
-        if (max && utcDay > toUTCDateOnly(max))
+        if (max && utcDay > toUTCDateOnlyFromLocal(max))
             return true;
         return false;
     }, [min, max]);
@@ -133,33 +130,29 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
         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) {
-                // User picked a local wall time; emit UTC instant as millis
-                const y = utcDay.getUTCFullYear();
-                const m = utcDay.getUTCMonth();
-                const d = utcDay.getUTCDate();
-                const local = new Date(y, m, d, timeHH, timeMM, 0, 0);
-                onChange(local.getTime());
-            }
-            else {
-                // Date-only: emit timezone-free day label
-                onChange(ymdFromUTCDateOnly(utcDay));
-            }
+            const iso = enableTime
+                ? isoFromLocalParts(y, m0, d, timeHH, timeMM)
+                : isoFromLocalParts(y, m0, d, 0, 0);
+            onChange(iso);
             (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
             return;
         }
-        // RANGE: date-only
+        // range (date-only in UI, but emitted as ISO instants at local midnight)
         const curr = value && typeof value === 'object' && 'start' in value
             ? value
             : { start: null, end: null };
-        const picked = ymdFromUTCDateOnly(utcDay);
+        const picked = isoFromLocalParts(y, m0, d, 0, 0);
         if (!curr.start || (curr.start && curr.end)) {
             onChange({ start: picked, end: null });
             return;
         }
-        const a = utcMillisFromYMD(curr.start);
-        const b = utcMillisFromYMD(picked);
+        const a = utcMillisFromIso(curr.start);
+        const b = utcMillisFromIso(picked);
         const start = a <= b ? curr.start : picked;
         const end = a <= b ? picked : curr.start;
         onChange({ start, end });
@@ -186,7 +179,7 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
             ].includes(e.key)) {
                 e.preventDefault();
             }
-            const anchor = toUTCDateOnly(monthAnchor);
+            const anchor = toUTCDateOnlyFromLocal(monthAnchor);
             const move = (days) => setMonthAnchor(prev => addDaysLocal(prev, days));
             switch (e.key) {
                 case 'ArrowLeft':
@@ -223,31 +216,26 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
     // ---- Input display: always local ----
     const formatted = useMemo(() => {
         if (mode === 'single') {
-            if (!value)
-                return '';
-            if (enableTime) {
-                if (typeof value !== 'number')
-                    return '';
-                return toMaskedFromDate(new Date(value), true);
-            }
             if (typeof value !== 'string')
                 return '';
-            return toMaskedFromYMD(value);
+            const d = localDateFromIso(value);
+            return d ? toMaskedFromDate(d, enableTime) : '';
         }
-        // range (date-only)
         const v = value;
-        const s = typeof (v === null || v === void 0 ? void 0 : v.start) === 'string' ? toMaskedFromYMD(v.start) : '';
-        const e = typeof (v === null || v === void 0 ? void 0 : v.end) === 'string' ? toMaskedFromYMD(v.end) : '';
-        if (s && e)
-            return `${s} – ${e}`;
-        if (s)
-            return `${s} –`;
-        if (e)
-            return `– ${e}`;
+        const s = typeof (v === null || v === void 0 ? void 0 : v.start) === 'string' ? localDateFromIso(v.start) : null;
+        const e = typeof (v === null || v === void 0 ? void 0 : v.end) === 'string' ? localDateFromIso(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); // while user is typing
+    const [dirty, setDirty] = useState(false);
     useEffect(() => {
         if (!dirty)
             setText(formatted);
@@ -265,28 +253,21 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
             const dLocal = parseLooseDateOrDateTime(text);
             if (!dLocal)
                 return;
-            if (enableTime) {
-                // Emit UTC instant millis
-                onChange(dLocal.getTime());
-            }
-            else {
-                // Emit date-only string (local calendar day)
-                onChange(ymdFromLocalDate(dLocal));
-            }
+            // If enableTime=false, parseLooseDateOrDateTime returns 00:00 local -> still OK.
+            onChange(isoFromLocalDate(dLocal));
             setMonthAnchor(dLocal);
             setDirty(false);
             return;
         }
         const r = parseLooseRange(text);
         if (r) {
-            // Range is date-only, based on local calendar parts
-            const start = `${r.start.getFullYear()}-${pad2(r.start.getMonth() + 1)}-${pad2(r.start.getDate())}`;
-            const end = `${r.end.getFullYear()}-${pad2(r.end.getMonth() + 1)}-${pad2(r.end.getDate())}`;
-            onChange({ start, end });
+            const startIso = isoFromLocalParts(r.start.getFullYear(), r.start.getMonth(), r.start.getDate(), 0, 0);
+            const endIso = isoFromLocalParts(r.end.getFullYear(), r.end.getMonth(), r.end.getDate(), 0, 0);
+            onChange({ start: startIso, end: endIso });
             setMonthAnchor(r.start);
             setDirty(false);
         }
-    }, [text, mode, onChange, enableTime]);
+    }, [text, mode, onChange]);
     const clear = useCallback(() => {
         if (mode === 'single')
             onChange(null);
@@ -308,7 +289,7 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
     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 => {
+            return (_jsx("div", { onClick: toggle, className: styles.triggerWrap, children: _jsx(Input, { ...inputProps, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", 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);
@@ -326,17 +307,16 @@ export const DateTimePicker = forwardRef(function DateTimePicker({ mode = 'singl
         }, 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();
-                                        // Presets -> date-only range
-                                        const start = `${r.start.getFullYear()}-${pad2(r.start.getMonth() + 1)}-${pad2(r.start.getDate())}`;
-                                        const end = `${r.end.getFullYear()}-${pad2(r.end.getMonth() + 1)}-${pad2(r.end.getDate())}`;
-                                        onChange({ start, end });
+                                        const startIso = isoFromLocalParts(r.start.getFullYear(), r.start.getMonth(), r.start.getDate(), 0, 0);
+                                        const endIso = isoFromLocalParts(r.end.getFullYear(), r.end.getMonth(), r.end.getDate(), 0, 0);
+                                        onChange({ start: startIso, end: endIso });
                                         setDirty(false);
-                                        setText(`${toMaskedFromYMD(start)} – ${toMaskedFromYMD(end)}`);
+                                        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(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 isToday = sameDayUTC(utcDay, toUTCDateOnlyFromLocal(todayLocal));
                                 const disabledDay = isDisabledUTC(utcDay);
                                 let selected = false;
                                 let inRange = false;

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

@@ -2,20 +2,22 @@ export declare const digits: (s: string) => string;
 export declare function maskDateEU(text: string): string;
 export declare function maskTimeHM(text: string): string;
 export declare function maskSingle(text: string, enableTime: boolean): string;
-export declare function maskRange(text: string, enableTime: boolean): string;
+export declare function maskRange(text: string, _enableTime: boolean): string;
 export declare const pad2: (n: number) => string;
-export type DateOnly = string;
-export declare function parseYMD(ymd: string): {
-    y: number;
-    m: number;
-    d: number;
-} | null;
-export declare function ymdFromLocalDate(dLocal: Date): DateOnly;
-export declare function ymdFromUTCDateOnly(utcDay: Date): DateOnly;
-export declare function utcMillisFromYMD(ymd: DateOnly): number;
-export declare function localDateFromYMD(ymd: DateOnly): Date | null;
+export type UtcIsoString = string;
+export declare function isUtcIsoString(v: unknown): v is UtcIsoString;
+export declare function utcMillisFromIso(iso: UtcIsoString): number;
+/**
+ * Build a *local* Date from y/m/d/hh/mm and return UTC ISO string (Z).
+ * This keeps the UI meaning "local wall time", while emitting a stable UTC instant.
+ */
+export declare function isoFromLocalParts(y: number, m0: number, // 0-based
+d: number, hh?: number, mm?: number): UtcIsoString;
+/** Convert a local Date to a UTC ISO string (Z). */
+export declare function isoFromLocalDate(dLocal: Date): UtcIsoString;
+/** For anchoring the calendar safely from a UTC ISO string. */
+export declare function localDateFromIso(iso: UtcIsoString): Date | null;
 export declare function toMaskedFromDate(d: Date, enableTime: boolean): string;
-export declare function toMaskedFromYMD(ymd: DateOnly): string;
 export declare function parseLooseDateOrDateTime(input: string): Date | null;
 export declare function parseLooseRange(input: string): {
     start: Date;