@dbcdk/react-components 0.0.96 → 0.0.97

package/dist/hooks/usePagination.js

@@ -1,140 +0,0 @@
-'use client';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-function clamp(n, min, max) {
-    return Math.max(min, Math.min(max, n));
-}
-function normalizePaginationState(next) {
-    return {
-        skip: Math.max(0, next.skip),
-        take: Math.max(1, next.take),
-    };
-}
-function safeParsePaginationState(raw) {
-    if (!raw)
-        return null;
-    try {
-        const parsed = JSON.parse(raw);
-        if (typeof parsed !== 'object' ||
-            parsed == null ||
-            typeof parsed.skip !== 'number' ||
-            typeof parsed.take !== 'number') {
-            return null;
-        }
-        return normalizePaginationState({
-            skip: parsed.skip,
-            take: parsed.take,
-        });
-    }
-    catch {
-        return null;
-    }
-}
-export function usePagination({ data = [], skip = 0, take = 10, state, onStateChange, resetOnDataChange = false, storageKey, }) {
-    const isControlled = state != null;
-    const [hydrated, setHydrated] = useState(() => !storageKey || isControlled);
-    const [uncontrolled, setUncontrolled] = useState(() => {
-        var _a;
-        const initial = normalizePaginationState({
-            skip,
-            take,
-        });
-        if (typeof window === 'undefined' || !storageKey || isControlled) {
-            return initial;
-        }
-        return (_a = safeParsePaginationState(window.localStorage.getItem(storageKey))) !== null && _a !== void 0 ? _a : initial;
-    });
-    // Hydrate from localStorage when key changes.
-    useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        if (isControlled || !storageKey) {
-            setHydrated(true);
-            return;
-        }
-        const fallback = normalizePaginationState({ skip, take });
-        const stored = safeParsePaginationState(window.localStorage.getItem(storageKey));
-        setUncontrolled(stored !== null && stored !== void 0 ? stored : fallback);
-        setHydrated(true);
-    }, [isControlled, storageKey, skip, take]);
-    // Keep initial props in sync ONLY for uncontrolled if props change.
-    // Do not overwrite localStorage-hydrated state when storageKey is provided.
-    const didInitRef = useRef(false);
-    useEffect(() => {
-        if (isControlled)
-            return;
-        if (storageKey)
-            return;
-        if (!didInitRef.current) {
-            didInitRef.current = true;
-            return;
-        }
-        setUncontrolled(prev => ({
-            skip: prev.skip,
-            take: Math.max(1, take),
-        }));
-    }, [isControlled, storageKey, take]);
-    const paginationState = (isControlled ? state : uncontrolled);
-    const totalCount = data.length;
-    const safeTake = Math.max(1, paginationState.take);
-    const maxSkip = Math.max(0, totalCount === 0 ? 0 : Math.floor((totalCount - 1) / safeTake) * safeTake);
-    const safeSkip = clamp(Math.max(0, paginationState.skip), 0, maxSkip);
-    const setPagination = useCallback((next) => {
-        const normalized = normalizePaginationState(next);
-        if (isControlled) {
-            onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(normalized);
-            return;
-        }
-        setUncontrolled(normalized);
-    }, [isControlled, onStateChange]);
-    const onPageChange = useCallback((pageEvent) => {
-        const nextTake = Math.max(1, pageEvent.take);
-        const nextSkip = Math.max(0, (pageEvent.page - 1) * nextTake);
-        setPagination({ skip: nextSkip, take: nextTake });
-    }, [setPagination]);
-    const resetPage = useCallback(() => {
-        setPagination({ skip: 0, take: safeTake });
-    }, [setPagination, safeTake]);
-    // Optional: reset page when data reference changes (after sort/filter).
-    useEffect(() => {
-        if (!resetOnDataChange)
-            return;
-        if (!hydrated)
-            return;
-        resetPage();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [resetOnDataChange, data, hydrated]);
-    const paginatedData = useMemo(() => {
-        return data.slice(safeSkip, safeSkip + safeTake);
-    }, [data, safeSkip, safeTake]);
-    const page = useMemo(() => Math.floor(safeSkip / safeTake) + 1, [safeSkip, safeTake]);
-    // If uncontrolled and data shrinks such that skip becomes invalid, clamp it once.
-    useEffect(() => {
-        if (isControlled)
-            return;
-        if (safeSkip !== paginationState.skip) {
-            setUncontrolled(prev => ({ ...prev, skip: safeSkip }));
-        }
-    }, [isControlled, safeSkip, paginationState.skip]);
-    // Persist uncontrolled state to localStorage when enabled.
-    useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        if (isControlled || !storageKey)
-            return;
-        if (!hydrated)
-            return;
-        window.localStorage.setItem(storageKey, JSON.stringify({
-            skip: paginationState.skip,
-            take: paginationState.take,
-        }));
-    }, [hydrated, isControlled, paginationState.skip, paginationState.take, storageKey]);
-    return {
-        paginatedData,
-        paginationState: { skip: safeSkip, take: safeTake },
-        onPageChange,
-        setPagination,
-        resetPage,
-        page,
-        totalCount,
-    };
-}

package/dist/hooks/useSorting.js

@@ -1,118 +0,0 @@
-'use client';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-function defaultCompare(a, b, dir, nulls) {
-    const aNull = a == null;
-    const bNull = b == null;
-    if (aNull || bNull) {
-        if (aNull && bNull)
-            return 0;
-        const order = nulls === 'first' ? -1 : 1;
-        return aNull ? order : -order;
-    }
-    // Dates
-    if (a instanceof Date && b instanceof Date) {
-        const diff = a.getTime() - b.getTime();
-        return dir === 'asc' ? diff : -diff;
-    }
-    // Numbers
-    if (typeof a === 'number' && typeof b === 'number') {
-        const diff = a - b;
-        return dir === 'asc' ? diff : -diff;
-    }
-    // Booleans
-    if (typeof a === 'boolean' && typeof b === 'boolean') {
-        const diff = Number(a) - Number(b);
-        return dir === 'asc' ? diff : -diff;
-    }
-    // Strings (locale-aware-ish)
-    const aStr = String(a);
-    const bStr = String(b);
-    const diff = aStr.localeCompare(bStr, undefined, { numeric: true, sensitivity: 'base' });
-    return dir === 'asc' ? diff : -diff;
-}
-// Stable sort (decorate-sort-undecorate)
-function stableSort(arr, cmp) {
-    return arr
-        .map((item, idx) => ({ item, idx }))
-        .sort((x, y) => {
-        const c = cmp(x.item, y.item);
-        return c !== 0 ? c : x.idx - y.idx;
-    })
-        .map(x => x.item);
-}
-export function useSorting({ data = [], sortBy = null, sortDirection = 'asc', state, onStateChange, columnComparators = {}, nulls = 'last', allowUnsort = true, resetOnDataChange = false, }) {
-    const isControlled = state != null;
-    const [uncontrolled, setUncontrolled] = useState(() => ({
-        sortBy,
-        sortDirection,
-    }));
-    const sortState = (isControlled ? state : uncontrolled);
-    const setSort = useCallback((next) => {
-        var _a, _b;
-        const normalized = {
-            sortBy: (_a = next.sortBy) !== null && _a !== void 0 ? _a : null,
-            sortDirection: (_b = next.sortDirection) !== null && _b !== void 0 ? _b : null,
-        };
-        if (isControlled)
-            onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(normalized);
-        else
-            setUncontrolled(normalized);
-    }, [isControlled, onStateChange]);
-    const clearSort = useCallback(() => setSort({ sortBy: null, sortDirection: null }), [setSort]);
-    const onSortChange = useCallback((e) => {
-        var _a, _b;
-        const nextSortBy = ((_a = e.sortBy) !== null && _a !== void 0 ? _a : null);
-        setSort(sortState);
-        const current = sortState;
-        if (nextSortBy == null) {
-            return clearSort();
-        }
-        // Same column toggling
-        if (current.sortBy === nextSortBy) {
-            const nextDir = current.sortDirection === 'asc' ? 'desc' : allowUnsort ? null : 'asc';
-            return setSort({ sortBy: nextSortBy, sortDirection: nextDir });
-        }
-        // New column: default to provided direction or asc
-        return setSort({
-            sortBy: nextSortBy,
-            sortDirection: (_b = e.sortDirection) !== null && _b !== void 0 ? _b : 'asc',
-        });
-    }, [allowUnsort, clearSort, setSort, sortState]);
-    // Optional reset on data ref change
-    const didInitRef = useRef(false);
-    useEffect(() => {
-        if (!resetOnDataChange)
-            return;
-        if (!didInitRef.current) {
-            didInitRef.current = true;
-            return;
-        }
-        clearSort();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [resetOnDataChange, data]);
-    const sortedData = useMemo(() => {
-        const { sortBy: sb, sortDirection: dir } = sortState;
-        if (!sb || !dir)
-            return data;
-        const custom = columnComparators[sb];
-        const cmp = (a, b) => {
-            if (custom)
-                return custom(a, b, dir);
-            const av = a[sb];
-            const bv = b[sb];
-            return defaultCompare(av, bv, dir, nulls);
-        };
-        // Don’t mutate input
-        return stableSort(data, cmp);
-    }, [data, sortState, columnComparators, nulls]);
-    // Helper: support functional updates in uncontrolled mode (optional nicety)
-    const setSortRef = useRef(setSort);
-    setSortRef.current = setSort;
-    return {
-        sortedData,
-        sortState,
-        onSortChange,
-        setSort,
-        clearSort,
-    };
-}

package/dist/hooks/useTableData.js

@@ -1,45 +0,0 @@
-'use client';
-import { useEffect, useMemo } from 'react';
-import { usePagination } from './usePagination';
-import { useSorting, } from './useSorting';
-export function useTableData({ data = [], pagination, sorting, resetPageOnSortChange = true, }) {
-    var _a, _b, _c, _d, _e, _f;
-    const s = useSorting({
-        data,
-        sortBy: (_a = sorting === null || sorting === void 0 ? void 0 : sorting.sortBy) !== null && _a !== void 0 ? _a : null,
-        sortDirection: (_b = sorting === null || sorting === void 0 ? void 0 : sorting.direction) !== null && _b !== void 0 ? _b : null,
-        state: sorting === null || sorting === void 0 ? void 0 : sorting.state,
-        onStateChange: sorting === null || sorting === void 0 ? void 0 : sorting.onStateChange,
-        columnComparators: sorting === null || sorting === void 0 ? void 0 : sorting.columnComparators,
-        nulls: (_c = sorting === null || sorting === void 0 ? void 0 : sorting.nulls) !== null && _c !== void 0 ? _c : 'last',
-        allowUnsort: (_d = sorting === null || sorting === void 0 ? void 0 : sorting.allowUnsort) !== null && _d !== void 0 ? _d : true,
-    });
-    const p = usePagination({
-        data: s.sortedData,
-        skip: (_e = pagination === null || pagination === void 0 ? void 0 : pagination.skip) !== null && _e !== void 0 ? _e : 0,
-        take: (_f = pagination === null || pagination === void 0 ? void 0 : pagination.take) !== null && _f !== void 0 ? _f : 10,
-        state: pagination === null || pagination === void 0 ? void 0 : pagination.state,
-        onStateChange: pagination === null || pagination === void 0 ? void 0 : pagination.onStateChange,
-    });
-    useEffect(() => {
-        if (!resetPageOnSortChange)
-            return;
-        p.resetPage();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
-    const rows = useMemo(() => p.paginatedData, [p.paginatedData]);
-    return {
-        rows,
-        totalCount: s.sortedData.length,
-        pagination: {
-            state: p.paginationState,
-            onPageChange: p.onPageChange,
-            resetPage: p.resetPage,
-        },
-        sorting: {
-            state: s.sortState,
-            onSortChange: s.onSortChange,
-            clearSort: s.clearSort,
-        },
-    };
-}

package/dist/hooks/useTableSelection.js

@@ -1,164 +0,0 @@
-'use client';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-const EMPTY_IDS = new Set();
-function safeParseIds(raw) {
-    if (!raw)
-        return null;
-    try {
-        const parsed = JSON.parse(raw);
-        if (!Array.isArray(parsed))
-            return null;
-        return parsed.filter((v) => typeof v === 'string' || typeof v === 'number');
-    }
-    catch {
-        return null;
-    }
-}
-function serializeIds(ids) {
-    return JSON.stringify(Array.from(ids));
-}
-function areSetsEqual(a, b) {
-    if (a.size !== b.size)
-        return false;
-    for (const value of a) {
-        if (!b.has(value))
-            return false;
-    }
-    return true;
-}
-export function useTableSelection({ storageKey, items, getId, initialSelectedIds, onSelectionChange, selectionMode = 'single', pruneToItems = false, storage = 'session', }) {
-    const resolvedInitialSelectedIds = initialSelectedIds !== null && initialSelectedIds !== void 0 ? initialSelectedIds : EMPTY_IDS;
-    const [selectedIds, setSelectedIds] = useState(resolvedInitialSelectedIds);
-    const [hydrated, setHydrated] = useState(false);
-    const lastWrittenRef = useRef(null);
-    const itemsById = useMemo(() => {
-        const map = new Map();
-        for (const item of items) {
-            map.set(getId(item), item);
-        }
-        return map;
-    }, [items, getId]);
-    useEffect(() => {
-        if (typeof window === 'undefined')
-            return;
-        const storageApi = storage === 'local' ? window.localStorage : window.sessionStorage;
-        if (!storageKey) {
-            setSelectedIds(prev => areSetsEqual(prev, resolvedInitialSelectedIds) ? prev : new Set(resolvedInitialSelectedIds));
-            setHydrated(true);
-            lastWrittenRef.current = null;
-            return;
-        }
-        const parsed = safeParseIds(storageApi.getItem(storageKey));
-        const next = new Set(parsed !== null && parsed !== void 0 ? parsed : Array.from(resolvedInitialSelectedIds));
-        setSelectedIds(prev => (areSetsEqual(prev, next) ? prev : next));
-        lastWrittenRef.current = serializeIds(next);
-        setHydrated(true);
-    }, [storage, storageKey, resolvedInitialSelectedIds]);
-    useEffect(() => {
-        if (!pruneToItems)
-            return;
-        const visibleIds = new Set(Array.from(itemsById.keys()));
-        setSelectedIds(prev => {
-            if (prev.size === 0)
-                return prev;
-            if (visibleIds.size === 0)
-                return prev;
-            const next = new Set();
-            for (const id of prev) {
-                if (visibleIds.has(id))
-                    next.add(id);
-            }
-            return areSetsEqual(prev, next) ? prev : next;
-        });
-    }, [pruneToItems, itemsById]);
-    const selectedItemMap = useMemo(() => {
-        const map = new Map();
-        for (const id of selectedIds) {
-            const item = itemsById.get(id);
-            if (item !== undefined)
-                map.set(id, item);
-        }
-        return map;
-    }, [selectedIds, itemsById]);
-    const selectedItems = useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
-    const allSelected = useMemo(() => {
-        if (items.length === 0)
-            return false;
-        return items.every(item => selectedIds.has(getId(item)));
-    }, [items, selectedIds, getId]);
-    const anySelected = useMemo(() => selectedIds.size > 0, [selectedIds]);
-    useEffect(() => {
-        if (!hydrated)
-            return;
-        if (typeof window === 'undefined')
-            return;
-        if (storageKey) {
-            const storageApi = storage === 'local' ? window.localStorage : window.sessionStorage;
-            const nextStr = serializeIds(selectedIds);
-            if (lastWrittenRef.current !== nextStr) {
-                storageApi.setItem(storageKey, nextStr);
-                lastWrittenRef.current = nextStr;
-            }
-        }
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({ selectedIds, selectedItems });
-    }, [hydrated, onSelectionChange, selectedIds, selectedItems, storage, storageKey]);
-    const toggleId = useCallback((id, selected) => {
-        setSelectedIds(prev => {
-            const next = new Set(prev);
-            const isSelected = next.has(id);
-            const shouldSelect = selected === undefined ? !isSelected : selected;
-            if (selectionMode === 'single') {
-                next.clear();
-                if (shouldSelect)
-                    next.add(id);
-                return areSetsEqual(prev, next) ? prev : next;
-            }
-            if (shouldSelect)
-                next.add(id);
-            else
-                next.delete(id);
-            return areSetsEqual(prev, next) ? prev : next;
-        });
-    }, [selectionMode]);
-    const toggleItem = useCallback((item) => {
-        toggleId(getId(item));
-    }, [toggleId, getId]);
-    const selectOnly = useCallback((id) => {
-        setSelectedIds(prev => {
-            const next = new Set([id]);
-            return areSetsEqual(prev, next) ? prev : next;
-        });
-    }, []);
-    const clearSelection = useCallback(() => {
-        setSelectedIds(prev => (prev.size === 0 ? prev : new Set()));
-    }, []);
-    const toggleAll = useCallback((selected) => {
-        if (!selected) {
-            clearSelection();
-            return;
-        }
-        if (selectionMode === 'single') {
-            const first = items[0];
-            const next = first ? new Set([getId(first)]) : new Set();
-            setSelectedIds(prev => (areSetsEqual(prev, next) ? prev : next));
-            return;
-        }
-        const next = new Set();
-        for (const item of items) {
-            next.add(getId(item));
-        }
-        setSelectedIds(prev => (areSetsEqual(prev, next) ? prev : next));
-    }, [clearSelection, getId, items, selectionMode]);
-    return {
-        selectedIds,
-        selectedItems,
-        selectedItemMap,
-        toggleItem,
-        toggleId,
-        selectOnly,
-        clearSelection,
-        allSelected,
-        anySelected,
-        toggleAll,
-    };
-}

package/dist/hooks/useTableSettings.js

@@ -1,71 +0,0 @@
-'use client';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
-function getDefaultVisibleIds(tableColumns) {
-    var _a;
-    return ((_a = tableColumns === null || tableColumns === void 0 ? void 0 : tableColumns.filter(c => { var _a; return !((_a = c.meta) === null || _a === void 0 ? void 0 : _a.hidden); }).map(c => c.id).filter(Boolean)) !== null && _a !== void 0 ? _a : []);
-}
-function mergeDefaults(stored, defaults) {
-    const viewMode = (stored === null || stored === void 0 ? void 0 : stored.viewMode) === 'compact' || (stored === null || stored === void 0 ? void 0 : stored.viewMode) === 'wrapped'
-        ? stored.viewMode
-        : defaults.viewMode;
-    const visibleColumnIds = Array.isArray(stored === null || stored === void 0 ? void 0 : stored.visibleColumnIds) && stored.visibleColumnIds.length > 0
-        ? stored.visibleColumnIds
-        : defaults.visibleColumnIds;
-    return { viewMode, visibleColumnIds };
-}
-export const localStorageTableSettingsStorage = {
-    get: key => {
-        const v = readLocalStorage(key);
-        return v && typeof v === 'object' ? v : undefined;
-    },
-    set: (key, next) => {
-        writeLocalStorage(key, next);
-    },
-};
-export function useTableSettings({ storageKey, tableColumns, defaultViewMode = 'compact', defaultVisibleColumnIds, storage = localStorageTableSettingsStorage, }) {
-    const defaults = useMemo(() => {
-        return {
-            viewMode: defaultViewMode,
-            visibleColumnIds: defaultVisibleColumnIds !== null && defaultVisibleColumnIds !== void 0 ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns),
-        };
-    }, [defaultViewMode, defaultVisibleColumnIds, tableColumns]);
-    const [state, setState] = useState(defaults);
-    useEffect(() => {
-        const stored = storage.get(storageKey);
-        const next = mergeDefaults(stored, defaults);
-        setState(next);
-    }, [storageKey, storage, defaults]);
-    const persist = useCallback((next) => storage.set(storageKey, next), [storage, storageKey]);
-    const setViewMode = useCallback((mode) => {
-        setState(prev => {
-            if (prev.viewMode === mode)
-                return prev;
-            const next = { ...prev, viewMode: mode };
-            persist(next);
-            return next;
-        });
-    }, [persist]);
-    const toggleViewMode = useCallback(() => {
-        setState(prev => {
-            const nextMode = prev.viewMode === 'wrapped' ? 'compact' : 'wrapped';
-            const next = { ...prev, viewMode: nextMode };
-            persist(next);
-            return next;
-        });
-    }, [persist]);
-    const setVisibleColumnIds = useCallback((ids) => {
-        setState(prev => {
-            const next = { ...prev, visibleColumnIds: ids };
-            persist(next);
-            return next;
-        });
-    }, [persist]);
-    return {
-        viewMode: state.viewMode,
-        toggleViewMode,
-        setViewMode,
-        visibleColumnIds: state.visibleColumnIds,
-        setVisibleColumnIds,
-    };
-}

package/dist/hooks/useTheme.js

@@ -1,66 +0,0 @@
-'use client';
-import { useCallback, useEffect, useState } from 'react';
-const THEME_VARIANTS = ['light', 'dark', 'system'];
-const STORAGE_KEY = 'dbc_theme';
-function isThemeVariant(x) {
-    return !!x && THEME_VARIANTS.includes(x);
-}
-function getCookie(name) {
-    const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
-    return match ? decodeURIComponent(match[1]) : null;
-}
-function persistTheme(id) {
-    try {
-        localStorage.setItem(STORAGE_KEY, id);
-    }
-    catch {
-        console.error('Failed to access localStorage');
-    }
-    try {
-        document.cookie = `${STORAGE_KEY}=${encodeURIComponent(id)}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
-    }
-    catch {
-        console.error('Failed to set theme cookie');
-    }
-}
-function getTheme() {
-    return document.documentElement.dataset.theme;
-}
-function applyTheme(id) {
-    document.documentElement.dataset.theme = id;
-}
-export function useTheme(initialTheme = 'system') {
-    const [theme, setTheme] = useState(null);
-    useEffect(() => {
-        const themeFromDataAttributes = getTheme();
-        let resolved = isThemeVariant(themeFromDataAttributes)
-            ? themeFromDataAttributes
-            : initialTheme;
-        // Prefer cookie (SSR + client consistency)
-        const fromCookie = getCookie(STORAGE_KEY);
-        if (isThemeVariant(fromCookie)) {
-            resolved = fromCookie;
-        }
-        else {
-            // fallback to localStorage
-            try {
-                const fromStorage = localStorage.getItem(STORAGE_KEY);
-                if (isThemeVariant(fromStorage))
-                    resolved = fromStorage;
-            }
-            catch {
-                console.error('Failed to access localStorage');
-            }
-        }
-        applyTheme(resolved);
-        setTheme(resolved);
-        persistTheme(resolved);
-    }, [initialTheme]);
-    const switchTheme = useCallback((id) => {
-        applyTheme(id);
-        setTheme(id);
-        persistTheme(id);
-        return id;
-    }, []);
-    return { theme, switchTheme };
-}

package/dist/hooks/useTimeDuration.js

@@ -1,68 +0,0 @@
-'use client';
-import { useEffect, useMemo, useState } from 'react';
-function defaultDuration(ms) {
-    if (!Number.isFinite(ms) || ms < 0)
-        return '—';
-    const sec = Math.floor(ms / 1000) % 60;
-    const min = Math.floor(ms / (1000 * 60)) % 60;
-    const hr = Math.floor(ms / (1000 * 60 * 60));
-    if (hr > 0) {
-        return `${hr}t ${min}m ${sec}s`;
-    }
-    if (min > 0) {
-        return `${min}m ${sec}s`;
-    }
-    return `${sec}s`;
-}
-export function useTimeDuration({ start, end, dateFormat = {
-    year: '2-digit',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-}, fallback = '—', liveUpdate = false, formatDuration = defaultDuration, }) {
-    const [hydrated, setHydrated] = useState(false);
-    const [tick, setTick] = useState(0);
-    useEffect(() => setHydrated(true), []);
-    useEffect(() => {
-        if (!liveUpdate)
-            return;
-        if (end && end.getTime() <= Date.now())
-            return;
-        const timer = setInterval(() => {
-            if (end && end.getTime() <= Date.now()) {
-                clearInterval(timer);
-            }
-            setTick(tick => tick + 1);
-        }, 1000);
-        return () => clearInterval(timer);
-    }, [liveUpdate, end]);
-    const started = useMemo(() => {
-        if (!start)
-            return fallback;
-        if (!hydrated)
-            return fallback;
-        return new Intl.DateTimeFormat('da-DK', dateFormat).format(start);
-    }, [start, hydrated, fallback, dateFormat]);
-    const ended = useMemo(() => {
-        if (!end)
-            return fallback;
-        if (!hydrated)
-            return fallback;
-        return new Intl.DateTimeFormat('da-DK', dateFormat).format(end);
-    }, [end, hydrated, fallback, dateFormat]);
-    const duration = useMemo(() => {
-        if (!start || !hydrated)
-            return fallback;
-        const now = Date.now();
-        if (!end) {
-            return formatDuration(now - start.getTime());
-        }
-        if (end.getTime() > now) {
-            return formatDuration(end.getTime() - now);
-        }
-        return formatDuration(end.getTime() - start.getTime());
-    }, [start, end, fallback, hydrated, formatDuration, tick]);
-    return { started, ended, isFinished: !!start && !!end, duration, hydrated };
-}