@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/hooks/useTheme.cjs

@@ -0,0 +1,64 @@
+'use client';
+'use strict';
+
+var react = require('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;
+}
+function useTheme(initialTheme = "system") {
+  const [theme, setTheme] = react.useState(null);
+  react.useEffect(() => {
+    const themeFromDataAttributes = getTheme();
+    let resolved = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
+    const fromCookie = getCookie(STORAGE_KEY);
+    if (isThemeVariant(fromCookie)) {
+      resolved = fromCookie;
+    } else {
+      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 = react.useCallback((id) => {
+    applyTheme(id);
+    setTheme(id);
+    persistTheme(id);
+    return id;
+  }, []);
+  return { theme, switchTheme };
+}
+
+exports.useTheme = useTheme;

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1,7 @@
+declare const THEME_VARIANTS: readonly ["light", "dark", "system"];
+export type ThemeVariant = (typeof THEME_VARIANTS)[number];
+export declare function useTheme(initialTheme?: ThemeVariant): {
+    theme: ThemeVariant | null;
+    switchTheme: (id: ThemeVariant) => ThemeVariant;
+};
+export {};

package/dist/hooks/useTheme.js

@@ -0,0 +1,62 @@
+'use client';
+import { useState, useEffect, useCallback } 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;
+}
+function useTheme(initialTheme = "system") {
+  const [theme, setTheme] = useState(null);
+  useEffect(() => {
+    const themeFromDataAttributes = getTheme();
+    let resolved = isThemeVariant(themeFromDataAttributes) ? themeFromDataAttributes : initialTheme;
+    const fromCookie = getCookie(STORAGE_KEY);
+    if (isThemeVariant(fromCookie)) {
+      resolved = fromCookie;
+    } else {
+      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 };
+}
+
+export { useTheme };

package/dist/hooks/useTimeDuration.cjs

@@ -0,0 +1,75 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+function defaultDuration(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
+  const sec = Math.floor(ms / 1e3) % 60;
+  const min = Math.floor(ms / (1e3 * 60)) % 60;
+  const hr = Math.floor(ms / (1e3 * 60 * 60));
+  if (hr > 0) {
+    return `${hr}t ${min}m ${sec}s`;
+  }
+  if (min > 0) {
+    return `${min}m ${sec}s`;
+  }
+  return `${sec}s`;
+}
+function useTimeDuration({
+  start,
+  end,
+  dateFormat = {
+    year: "2-digit",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  },
+  fallback = "\u2014",
+  liveUpdate = false,
+  formatDuration = defaultDuration
+}) {
+  const [hydrated, setHydrated] = react.useState(false);
+  const [now, setNow] = react.useState(0);
+  react.useEffect(() => {
+    setHydrated(true);
+    setNow(Date.now());
+  }, []);
+  react.useEffect(() => {
+    if (!liveUpdate) return;
+    if (end && end.getTime() <= Date.now()) return;
+    const timer = setInterval(() => {
+      const next = Date.now();
+      setNow(next);
+      if (end && end.getTime() <= next) {
+        clearInterval(timer);
+      }
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [liveUpdate, end]);
+  const started = react.useMemo(() => {
+    if (!start) return fallback;
+    if (!hydrated) return fallback;
+    return new Intl.DateTimeFormat("da-DK", dateFormat).format(start);
+  }, [start, hydrated, fallback, dateFormat]);
+  const ended = react.useMemo(() => {
+    if (!end) return fallback;
+    if (!hydrated) return fallback;
+    return new Intl.DateTimeFormat("da-DK", dateFormat).format(end);
+  }, [end, hydrated, fallback, dateFormat]);
+  const duration = react.useMemo(() => {
+    if (!start || !hydrated) return fallback;
+    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, now]);
+  return { started, ended, isFinished: !!start && !!end, duration, hydrated };
+}
+
+exports.useTimeDuration = useTimeDuration;

package/dist/hooks/useTimeDuration.d.ts

@@ -0,0 +1,26 @@
+export type useTimeDurationReturn = {
+    /** Formatted start date (hydration-safe) */
+    started: string;
+    /** Formatted end date (hydration-safe) */
+    ended: string;
+    /** Whether the time duration has finished */
+    isFinished?: boolean;
+    /** Formatted duration (hydration-safe) */
+    duration: string;
+    /** Whether client hydration has completed */
+    hydrated: boolean;
+};
+type useTimeDurationArgs = {
+    start?: Date;
+    end?: Date;
+    /** Intl options for started/ended formatting */
+    dateFormat?: Intl.DateTimeFormatOptions;
+    /** Placeholder shown before hydration or when date is missing */
+    fallback?: string;
+    /** Whether to update the duration in real time (every second) */
+    liveUpdate?: boolean;
+    /** Custom duration formatter if you don’t want the default "1t 2m 3s" */
+    formatDuration?: (ms: number) => string;
+};
+export declare function useTimeDuration({ start, end, dateFormat, fallback, liveUpdate, formatDuration, }: useTimeDurationArgs): useTimeDurationReturn;
+export {};

package/dist/hooks/useTimeDuration.js

@@ -0,0 +1,73 @@
+'use client';
+import { useState, useEffect, useMemo } from 'react';
+
+function defaultDuration(ms) {
+  if (!Number.isFinite(ms) || ms < 0) return "\u2014";
+  const sec = Math.floor(ms / 1e3) % 60;
+  const min = Math.floor(ms / (1e3 * 60)) % 60;
+  const hr = Math.floor(ms / (1e3 * 60 * 60));
+  if (hr > 0) {
+    return `${hr}t ${min}m ${sec}s`;
+  }
+  if (min > 0) {
+    return `${min}m ${sec}s`;
+  }
+  return `${sec}s`;
+}
+function useTimeDuration({
+  start,
+  end,
+  dateFormat = {
+    year: "2-digit",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  },
+  fallback = "\u2014",
+  liveUpdate = false,
+  formatDuration = defaultDuration
+}) {
+  const [hydrated, setHydrated] = useState(false);
+  const [now, setNow] = useState(0);
+  useEffect(() => {
+    setHydrated(true);
+    setNow(Date.now());
+  }, []);
+  useEffect(() => {
+    if (!liveUpdate) return;
+    if (end && end.getTime() <= Date.now()) return;
+    const timer = setInterval(() => {
+      const next = Date.now();
+      setNow(next);
+      if (end && end.getTime() <= next) {
+        clearInterval(timer);
+      }
+    }, 1e3);
+    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;
+    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, now]);
+  return { started, ended, isFinished: !!start && !!end, duration, hydrated };
+}
+
+export { useTimeDuration };

package/dist/hooks/useViewportFill.cjs

@@ -0,0 +1,82 @@
+'use client';
+'use strict';
+
+var react = require('react');
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
+function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false, watchRef } = {}) {
+  const [maxHeight, setMaxHeight] = react.useState(min);
+  const raf = react.useRef(null);
+  const measure = react.useCallback(() => {
+    if (typeof window === "undefined" || !ref.current) return;
+    const el = ref.current;
+    const rect = el.getBoundingClientRect();
+    let top = rect.top;
+    if (includeMarginTop) {
+      const marginTop = parseFloat(window.getComputedStyle(el).marginTop || "0") || 0;
+      top -= marginTop;
+    }
+    const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
+    setMaxHeight((prev) => prev === next ? prev : next);
+  }, [ref, bottomOffset, min, includeMarginTop]);
+  const scheduleMeasure = react.useCallback(() => {
+    if (typeof window === "undefined") return;
+    if (raf.current != null) {
+      cancelAnimationFrame(raf.current);
+    }
+    raf.current = window.requestAnimationFrame(() => {
+      raf.current = null;
+      measure();
+    });
+  }, [measure]);
+  useIsomorphicLayoutEffect(() => {
+    measure();
+  }, [measure]);
+  react.useEffect(() => {
+    var _a;
+    if (typeof window === "undefined" || !ref.current) return;
+    const target = ref.current;
+    const extra = (_a = watchRef == null ? void 0 : watchRef.current) != null ? _a : null;
+    const parent = target.parentElement;
+    const onResize = () => scheduleMeasure();
+    const onTransitionOrAnimationEnd = () => scheduleMeasure();
+    window.addEventListener("resize", onResize);
+    document.addEventListener("transitionend", onTransitionOrAnimationEnd, true);
+    document.addEventListener("animationend", onTransitionOrAnimationEnd, true);
+    let resizeObserver = null;
+    if ("ResizeObserver" in window) {
+      resizeObserver = new ResizeObserver(() => scheduleMeasure());
+      resizeObserver.observe(target);
+      if (parent && parent !== target) {
+        resizeObserver.observe(parent);
+      }
+      if (extra && extra !== target && extra !== parent) {
+        resizeObserver.observe(extra);
+      }
+    }
+    return () => {
+      window.removeEventListener("resize", onResize);
+      document.removeEventListener("transitionend", onTransitionOrAnimationEnd, true);
+      document.removeEventListener("animationend", onTransitionOrAnimationEnd, true);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      if (raf.current != null) {
+        cancelAnimationFrame(raf.current);
+        raf.current = null;
+      }
+    };
+  }, [ref, watchRef, scheduleMeasure]);
+  const style = react.useMemo(
+    () => ({
+      maxHeight,
+      overflow: "auto"
+    }),
+    [maxHeight]
+  );
+  return {
+    maxHeight,
+    style,
+    recompute: measure
+  };
+}
+
+exports.useViewportFill = useViewportFill;

package/dist/hooks/useViewportFill.d.ts

@@ -0,0 +1,13 @@
+import { type CSSProperties, type RefObject } from 'react';
+type Options = {
+    bottomOffset?: number;
+    min?: number;
+    includeMarginTop?: boolean;
+    watchRef?: RefObject<HTMLElement | null>;
+};
+export declare function useViewportFill<T extends HTMLElement>(ref: RefObject<T | null>, { bottomOffset, min, includeMarginTop, watchRef }?: Options): {
+    maxHeight: number;
+    style: CSSProperties;
+    recompute: () => void;
+};
+export {};

package/dist/hooks/useViewportFill.js

@@ -0,0 +1,80 @@
+'use client';
+import { useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function useViewportFill(ref, { bottomOffset = 0, min = 120, includeMarginTop = false, watchRef } = {}) {
+  const [maxHeight, setMaxHeight] = useState(min);
+  const raf = useRef(null);
+  const measure = useCallback(() => {
+    if (typeof window === "undefined" || !ref.current) return;
+    const el = ref.current;
+    const rect = el.getBoundingClientRect();
+    let top = rect.top;
+    if (includeMarginTop) {
+      const marginTop = parseFloat(window.getComputedStyle(el).marginTop || "0") || 0;
+      top -= marginTop;
+    }
+    const next = Math.max(min, Math.floor(window.innerHeight - bottomOffset - top));
+    setMaxHeight((prev) => prev === next ? prev : next);
+  }, [ref, bottomOffset, min, includeMarginTop]);
+  const scheduleMeasure = useCallback(() => {
+    if (typeof window === "undefined") return;
+    if (raf.current != null) {
+      cancelAnimationFrame(raf.current);
+    }
+    raf.current = window.requestAnimationFrame(() => {
+      raf.current = null;
+      measure();
+    });
+  }, [measure]);
+  useIsomorphicLayoutEffect(() => {
+    measure();
+  }, [measure]);
+  useEffect(() => {
+    var _a;
+    if (typeof window === "undefined" || !ref.current) return;
+    const target = ref.current;
+    const extra = (_a = watchRef == null ? void 0 : watchRef.current) != null ? _a : null;
+    const parent = target.parentElement;
+    const onResize = () => scheduleMeasure();
+    const onTransitionOrAnimationEnd = () => scheduleMeasure();
+    window.addEventListener("resize", onResize);
+    document.addEventListener("transitionend", onTransitionOrAnimationEnd, true);
+    document.addEventListener("animationend", onTransitionOrAnimationEnd, true);
+    let resizeObserver = null;
+    if ("ResizeObserver" in window) {
+      resizeObserver = new ResizeObserver(() => scheduleMeasure());
+      resizeObserver.observe(target);
+      if (parent && parent !== target) {
+        resizeObserver.observe(parent);
+      }
+      if (extra && extra !== target && extra !== parent) {
+        resizeObserver.observe(extra);
+      }
+    }
+    return () => {
+      window.removeEventListener("resize", onResize);
+      document.removeEventListener("transitionend", onTransitionOrAnimationEnd, true);
+      document.removeEventListener("animationend", onTransitionOrAnimationEnd, true);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      if (raf.current != null) {
+        cancelAnimationFrame(raf.current);
+        raf.current = null;
+      }
+    };
+  }, [ref, watchRef, scheduleMeasure]);
+  const style = useMemo(
+    () => ({
+      maxHeight,
+      overflow: "auto"
+    }),
+    [maxHeight]
+  );
+  return {
+    maxHeight,
+    style,
+    recompute: measure
+  };
+}
+
+export { useViewportFill };