@dbcdk/react-components 0.0.168 → 0.0.169

package/dist/hooks/useTheme.cjs

@@ -1,64 +0,0 @@
-'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

@@ -1,7 +0,0 @@
-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

@@ -1,62 +0,0 @@
-'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

@@ -1,75 +0,0 @@
-'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

@@ -1,26 +0,0 @@
-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

@@ -1,73 +0,0 @@
-'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

@@ -1,82 +0,0 @@
-'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

@@ -1,13 +0,0 @@
-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

@@ -1,80 +0,0 @@
-'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 };