@dbcdk/react-components 0.0.109 → 0.0.111

package/dist/client.cjs

@@ -84,6 +84,8 @@ var Grid = require('./components/grid/Grid');
 var Alert = require('./components/alert/Alert');
 var InlineStatus = require('./components/inline-status/InlineStatus');
 var MediaCard = require('./components/media-card/MediaCard');
+var Lightbox = require('./components/lightbox/Lightbox');
+var FileUpload = require('./components/forms/file-upload/FileUpload');
 
 
 
@@ -585,3 +587,15 @@ Object.keys(MediaCard).forEach(function (k) {
 		get: function () { return MediaCard[k]; }
 	});
 });
+Object.keys(Lightbox).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Lightbox[k]; }
+	});
+});
+Object.keys(FileUpload).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return FileUpload[k]; }
+	});
+});

package/dist/client.d.ts

@@ -81,3 +81,5 @@ export * from './components/grid/Grid';
 export * from './components/alert/Alert';
 export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
+export * from './components/lightbox/Lightbox';
+export * from './components/forms/file-upload/FileUpload';

package/dist/client.js

@@ -82,3 +82,5 @@ export * from './components/grid/Grid';
 export * from './components/alert/Alert';
 export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
+export * from './components/lightbox/Lightbox';
+export * from './components/forms/file-upload/FileUpload';

package/dist/components/forms/file-upload/FileUpload.cjs

@@ -0,0 +1,117 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var styles = require('./FileUpload.module.css');
+var InputContainer = require('../input-container/InputContainer');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function FileUpload({
+  label,
+  labelAction,
+  error,
+  helpText,
+  helpTextAddition,
+  orientation = "vertical",
+  labelWidth,
+  fullWidth = false,
+  required,
+  modified,
+  onChange,
+  children,
+  hint,
+  height,
+  minWidth,
+  width,
+  maxWidth,
+  id,
+  disabled,
+  className,
+  ...inputProps
+}) {
+  const reactId = react.useId();
+  const inputId = id != null ? id : `file-upload-${reactId}`;
+  const inputRef = react.useRef(null);
+  const [dragging, setDragging] = react.useState(false);
+  function handleDragOver(e) {
+    e.preventDefault();
+    if (!disabled) setDragging(true);
+  }
+  function handleDragLeave(e) {
+    if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+  }
+  function handleDrop(e) {
+    e.preventDefault();
+    setDragging(false);
+    if (disabled) return;
+    if (inputRef.current) {
+      const dt = e.dataTransfer;
+      const files = dt.files;
+      onChange == null ? void 0 : onChange(files.length > 0 ? files : null);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InputContainer.InputContainer,
+    {
+      label,
+      labelAction,
+      htmlFor: inputId,
+      error,
+      helpText,
+      helpTextAddition,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      modified,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: [
+            styles__default.default.dropzone,
+            dragging ? styles__default.default.dragging : "",
+            disabled ? styles__default.default.disabled : "",
+            error ? styles__default.default.hasError : "",
+            fullWidth ? styles__default.default.fullWidth : "",
+            className != null ? className : ""
+          ].filter(Boolean).join(" "),
+          style: {
+            ...height != null ? { height } : void 0,
+            ...minWidth != null ? { minWidth } : void 0,
+            ...width != null ? { width } : void 0,
+            ...maxWidth != null ? { maxWidth } : void 0
+          },
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ...inputProps,
+                ref: inputRef,
+                id: inputId,
+                type: "file",
+                disabled,
+                className: styles__default.default.input,
+                onChange: (e) => onChange == null ? void 0 : onChange(e.target.files)
+              }
+            ),
+            children != null ? children : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloud, { className: styles__default.default.icon, "aria-hidden": true }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.hint, children: hint != null ? hint : "Tr\xE6k filer hertil eller klik for at v\xE6lge" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+exports.FileUpload = FileUpload;

package/dist/components/forms/file-upload/FileUpload.d.ts

@@ -0,0 +1,15 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { InputContainerProps } from '../input-container/InputContainer';
+export interface FileUploadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'width' | 'onChange'>, Omit<InputContainerProps, 'children' | 'htmlFor' | 'size'> {
+    onChange?: (files: FileList | null) => void;
+    /** Custom content to replace the default icon + text hint */
+    children?: ReactNode;
+    /** Short hint shown below the icon when no custom children */
+    hint?: string;
+    fullWidth?: boolean;
+    height?: number | string;
+    minWidth?: string | number;
+    width?: string | number;
+    maxWidth?: string | number;
+}
+export declare function FileUpload({ label, labelAction, error, helpText, helpTextAddition, orientation, labelWidth, fullWidth, required, modified, onChange, children, hint, height, minWidth, width, maxWidth, id, disabled, className, ...inputProps }: FileUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/file-upload/FileUpload.js

@@ -0,0 +1,111 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { UploadCloud } from 'lucide-react';
+import { useId, useRef, useState } from 'react';
+import styles from './FileUpload.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+
+function FileUpload({
+  label,
+  labelAction,
+  error,
+  helpText,
+  helpTextAddition,
+  orientation = "vertical",
+  labelWidth,
+  fullWidth = false,
+  required,
+  modified,
+  onChange,
+  children,
+  hint,
+  height,
+  minWidth,
+  width,
+  maxWidth,
+  id,
+  disabled,
+  className,
+  ...inputProps
+}) {
+  const reactId = useId();
+  const inputId = id != null ? id : `file-upload-${reactId}`;
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  function handleDragOver(e) {
+    e.preventDefault();
+    if (!disabled) setDragging(true);
+  }
+  function handleDragLeave(e) {
+    if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+  }
+  function handleDrop(e) {
+    e.preventDefault();
+    setDragging(false);
+    if (disabled) return;
+    if (inputRef.current) {
+      const dt = e.dataTransfer;
+      const files = dt.files;
+      onChange == null ? void 0 : onChange(files.length > 0 ? files : null);
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    InputContainer,
+    {
+      label,
+      labelAction,
+      htmlFor: inputId,
+      error,
+      helpText,
+      helpTextAddition,
+      orientation,
+      labelWidth,
+      fullWidth,
+      required,
+      modified,
+      children: /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: [
+            styles.dropzone,
+            dragging ? styles.dragging : "",
+            disabled ? styles.disabled : "",
+            error ? styles.hasError : "",
+            fullWidth ? styles.fullWidth : "",
+            className != null ? className : ""
+          ].filter(Boolean).join(" "),
+          style: {
+            ...height != null ? { height } : void 0,
+            ...minWidth != null ? { minWidth } : void 0,
+            ...width != null ? { width } : void 0,
+            ...maxWidth != null ? { maxWidth } : void 0
+          },
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...inputProps,
+                ref: inputRef,
+                id: inputId,
+                type: "file",
+                disabled,
+                className: styles.input,
+                onChange: (e) => onChange == null ? void 0 : onChange(e.target.files)
+              }
+            ),
+            children != null ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(UploadCloud, { className: styles.icon, "aria-hidden": true }),
+              /* @__PURE__ */ jsx("span", { className: styles.hint, children: hint != null ? hint : "Tr\xE6k filer hertil eller klik for at v\xE6lge" })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export { FileUpload };

package/dist/components/forms/file-upload/FileUpload.module.css

@@ -0,0 +1,75 @@
+.dropzone {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xl) var(--spacing-lg);
+  background: var(--color-bg-surface);
+  border: var(--border-width-thin) dashed var(--color-border-default);
+  border-radius: var(--border-radius-default);
+  cursor: pointer;
+  color: var(--color-fg-muted);
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  text-align: center;
+  box-sizing: border-box;
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard);
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.dropzone:hover:not(.disabled) {
+  background-color: var(--color-bg-selected);
+  border-color: var(--color-border-selected);
+  color: var(--color-fg-default);
+}
+
+.dragging {
+  background-color: var(--color-bg-selected);
+  border-color: var(--color-border-selected);
+  color: var(--color-fg-default);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+}
+
+.hasError {
+  border-color: var(--color-status-error);
+}
+
+.hasError:hover:not(.disabled) {
+  border-color: var(--color-status-error);
+  background-color: var(--color-status-error-bg);
+}
+
+.disabled {
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+}
+
+.input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.icon {
+  width: var(--icon-size-lg);
+  height: var(--icon-size-lg);
+  stroke-width: 1.5;
+  flex-shrink: 0;
+}
+
+.hint {
+  line-height: var(--line-height-normal);
+}

package/dist/components/lightbox/Lightbox.cjs

@@ -0,0 +1,219 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var client = require('../../client');
+var styles = require('./Lightbox.module.css');
+var Button = require('../button/Button');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function extFromMime(mime) {
+  var _a;
+  const map = {
+    "image/jpeg": "jpg",
+    "image/png": "png",
+    "image/webp": "webp",
+    "image/gif": "gif"
+  };
+  return (_a = mime && map[mime]) != null ? _a : "jpg";
+}
+function Lightbox({
+  items,
+  title,
+  initialIndex = 0,
+  thumbnailHeight = 300,
+  showDownload = true,
+  getDownloadFilename,
+  buttonAddition,
+  trigger
+}) {
+  var _a;
+  const dialogRef = react.useRef(null);
+  const [open, setOpen] = react.useState(false);
+  const [index, setIndex] = react.useState(initialIndex);
+  const [downloading, setDownloading] = react.useState(false);
+  const current = items[index];
+  const multiple = items.length > 1;
+  react.useEffect(() => {
+    setIndex((i) => Math.min(Math.max(i, 0), Math.max(items.length - 1, 0)));
+  }, [items.length]);
+  const openAt = react.useCallback((i = 0) => {
+    setIndex(i);
+    setOpen(true);
+  }, []);
+  const close = react.useCallback(() => {
+    var _a2;
+    setDownloading(false);
+    (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
+    setOpen(false);
+  }, []);
+  const prev = react.useCallback(() => {
+    setIndex((i) => (i - 1 + items.length) % items.length);
+  }, [items.length]);
+  const next = react.useCallback(() => {
+    setIndex((i) => (i + 1) % items.length);
+  }, [items.length]);
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  }, [open]);
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const onCancel = (e) => {
+      e.preventDefault();
+      close();
+    };
+    const onClose = () => {
+      setOpen(false);
+      setDownloading(false);
+    };
+    dialog.addEventListener("cancel", onCancel);
+    dialog.addEventListener("close", onClose);
+    return () => {
+      dialog.removeEventListener("cancel", onCancel);
+      dialog.removeEventListener("close", onClose);
+    };
+  }, [close]);
+  react.useEffect(() => {
+    if (!open || !multiple) return;
+    const onKeyDown = (e) => {
+      if (e.key === "ArrowLeft") prev();
+      if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, multiple, prev, next]);
+  const download = react.useCallback(async () => {
+    var _a2;
+    if (!(current == null ? void 0 : current.downloadSrc)) return;
+    setDownloading(true);
+    try {
+      const res = await fetch(current.downloadSrc, { cache: "no-store" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const blob = await res.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      const ext = extFromMime((_a2 = current.mimeType) != null ? _a2 : blob.type);
+      const filename = getDownloadFilename ? getDownloadFilename(current, index) : `image-${index + 1}.${ext}`;
+      const a = document.createElement("a");
+      a.href = objectUrl;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(objectUrl);
+    } catch (err) {
+      console.warn("[Lightbox] download failed", err);
+    } finally {
+      setDownloading(false);
+    }
+  }, [current, index, getDownloadFilename]);
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    trigger ? trigger(openAt) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnails, children: items.map((item, i) => {
+      var _a2;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: styles__default.default.thumbnailBtn,
+          onClick: () => openAt(i),
+          "aria-label": (_a2 = item.title) != null ? _a2 : `Billede ${i + 1}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailImg, style: { height: thumbnailHeight }, children: item.thumbnail }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailMeta, children: /* @__PURE__ */ jsxRuntime.jsx(
+              client.MetaBar,
+              {
+                items: [
+                  { label: "H\xF8jde", value: item.height != null ? `${item.height}px` : "-" },
+                  { label: "Bredde", value: item.width != null ? `${item.width}px` : "-" }
+                ]
+              }
+            ) })
+          ]
+        },
+        i
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "dialog",
+      {
+        ref: dialogRef,
+        "aria-label": title != null ? title : "Lightbox",
+        tabIndex: -1,
+        className: styles__default.default.dialog,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) close();
+        },
+        children: current && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: styles__default.default.panel,
+            "data-surface": "inverse",
+            onClick: (e) => {
+              if (e.target === e.currentTarget) close();
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbar, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarInfo, children: [
+                  title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.titleMain, children: title }),
+                  current.title && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.titleItem, children: [
+                    title ? "\xB7 " : "",
+                    current.title
+                  ] }),
+                  multiple && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.counter, children: [
+                    title || current.title ? "\xB7 " : "",
+                    index + 1,
+                    "/",
+                    items.length
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.toolbarActions, children: [
+                  buttonAddition && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.buttonAdditionSlot, children: buttonAddition }),
+                  showDownload && current.downloadSrc && /* @__PURE__ */ jsxRuntime.jsx(
+                    Button.Button,
+                    {
+                      variant: "outlined",
+                      size: "sm",
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 16 }),
+                      onClick: download,
+                      loading: downloading,
+                      "aria-label": "Download",
+                      children: "Download"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    Button.Button,
+                    {
+                      variant: "outlined",
+                      size: "sm",
+                      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16 }),
+                      onClick: close,
+                      "aria-label": "Luk",
+                      children: "Luk"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.imageArea, children: (_a = current.preview) != null ? _a : current.thumbnail }),
+              multiple && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.nav, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", size: "sm", onClick: prev, "aria-label": "Forrige billede", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 20 }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.navHint, children: "\u2190 \u2192 \xB7 Esc" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { variant: "outlined", size: "sm", onClick: next, "aria-label": "N\xE6ste billede", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 20 }) })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+exports.Lightbox = Lightbox;

package/dist/components/lightbox/Lightbox.d.ts

@@ -0,0 +1,21 @@
+import type { ReactElement, ReactNode } from 'react';
+export type LightboxItem = {
+    thumbnail: ReactNode;
+    preview?: ReactNode;
+    title?: string;
+    downloadSrc?: string;
+    mimeType?: string;
+    width?: number;
+    height?: number;
+};
+export interface LightboxProps {
+    items: LightboxItem[];
+    title?: string;
+    initialIndex?: number;
+    thumbnailHeight?: number;
+    showDownload?: boolean;
+    getDownloadFilename?: (item: LightboxItem, index: number) => string;
+    buttonAddition?: ReactNode;
+    trigger?: (open: (index?: number) => void) => ReactNode;
+}
+export declare function Lightbox({ items, title, initialIndex, thumbnailHeight, showDownload, getDownloadFilename, buttonAddition, trigger, }: LightboxProps): ReactElement | null;

package/dist/components/lightbox/Lightbox.js

@@ -0,0 +1,213 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Download, X, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { MetaBar } from '../../client';
+import styles from './Lightbox.module.css';
+import { Button } from '../button/Button';
+
+function extFromMime(mime) {
+  var _a;
+  const map = {
+    "image/jpeg": "jpg",
+    "image/png": "png",
+    "image/webp": "webp",
+    "image/gif": "gif"
+  };
+  return (_a = mime && map[mime]) != null ? _a : "jpg";
+}
+function Lightbox({
+  items,
+  title,
+  initialIndex = 0,
+  thumbnailHeight = 300,
+  showDownload = true,
+  getDownloadFilename,
+  buttonAddition,
+  trigger
+}) {
+  var _a;
+  const dialogRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(initialIndex);
+  const [downloading, setDownloading] = useState(false);
+  const current = items[index];
+  const multiple = items.length > 1;
+  useEffect(() => {
+    setIndex((i) => Math.min(Math.max(i, 0), Math.max(items.length - 1, 0)));
+  }, [items.length]);
+  const openAt = useCallback((i = 0) => {
+    setIndex(i);
+    setOpen(true);
+  }, []);
+  const close = useCallback(() => {
+    var _a2;
+    setDownloading(false);
+    (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
+    setOpen(false);
+  }, []);
+  const prev = useCallback(() => {
+    setIndex((i) => (i - 1 + items.length) % items.length);
+  }, [items.length]);
+  const next = useCallback(() => {
+    setIndex((i) => (i + 1) % items.length);
+  }, [items.length]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  }, [open]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const onCancel = (e) => {
+      e.preventDefault();
+      close();
+    };
+    const onClose = () => {
+      setOpen(false);
+      setDownloading(false);
+    };
+    dialog.addEventListener("cancel", onCancel);
+    dialog.addEventListener("close", onClose);
+    return () => {
+      dialog.removeEventListener("cancel", onCancel);
+      dialog.removeEventListener("close", onClose);
+    };
+  }, [close]);
+  useEffect(() => {
+    if (!open || !multiple) return;
+    const onKeyDown = (e) => {
+      if (e.key === "ArrowLeft") prev();
+      if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, multiple, prev, next]);
+  const download = useCallback(async () => {
+    var _a2;
+    if (!(current == null ? void 0 : current.downloadSrc)) return;
+    setDownloading(true);
+    try {
+      const res = await fetch(current.downloadSrc, { cache: "no-store" });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const blob = await res.blob();
+      const objectUrl = URL.createObjectURL(blob);
+      const ext = extFromMime((_a2 = current.mimeType) != null ? _a2 : blob.type);
+      const filename = getDownloadFilename ? getDownloadFilename(current, index) : `image-${index + 1}.${ext}`;
+      const a = document.createElement("a");
+      a.href = objectUrl;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(objectUrl);
+    } catch (err) {
+      console.warn("[Lightbox] download failed", err);
+    } finally {
+      setDownloading(false);
+    }
+  }, [current, index, getDownloadFilename]);
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger ? trigger(openAt) : /* @__PURE__ */ jsx("div", { className: styles.thumbnails, children: items.map((item, i) => {
+      var _a2;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: styles.thumbnailBtn,
+          onClick: () => openAt(i),
+          "aria-label": (_a2 = item.title) != null ? _a2 : `Billede ${i + 1}`,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: styles.thumbnailImg, style: { height: thumbnailHeight }, children: item.thumbnail }),
+            /* @__PURE__ */ jsx("div", { className: styles.thumbnailMeta, children: /* @__PURE__ */ jsx(
+              MetaBar,
+              {
+                items: [
+                  { label: "H\xF8jde", value: item.height != null ? `${item.height}px` : "-" },
+                  { label: "Bredde", value: item.width != null ? `${item.width}px` : "-" }
+                ]
+              }
+            ) })
+          ]
+        },
+        i
+      );
+    }) }),
+    /* @__PURE__ */ jsx(
+      "dialog",
+      {
+        ref: dialogRef,
+        "aria-label": title != null ? title : "Lightbox",
+        tabIndex: -1,
+        className: styles.dialog,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) close();
+        },
+        children: current && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: styles.panel,
+            "data-surface": "inverse",
+            onClick: (e) => {
+              if (e.target === e.currentTarget) close();
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.toolbarInfo, children: [
+                  title && /* @__PURE__ */ jsx("span", { className: styles.titleMain, children: title }),
+                  current.title && /* @__PURE__ */ jsxs("span", { className: styles.titleItem, children: [
+                    title ? "\xB7 " : "",
+                    current.title
+                  ] }),
+                  multiple && /* @__PURE__ */ jsxs("span", { className: styles.counter, children: [
+                    title || current.title ? "\xB7 " : "",
+                    index + 1,
+                    "/",
+                    items.length
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: styles.toolbarActions, children: [
+                  buttonAddition && /* @__PURE__ */ jsx("div", { className: styles.buttonAdditionSlot, children: buttonAddition }),
+                  showDownload && current.downloadSrc && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outlined",
+                      size: "sm",
+                      icon: /* @__PURE__ */ jsx(Download, { size: 16 }),
+                      onClick: download,
+                      loading: downloading,
+                      "aria-label": "Download",
+                      children: "Download"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "outlined",
+                      size: "sm",
+                      icon: /* @__PURE__ */ jsx(X, { size: 16 }),
+                      onClick: close,
+                      "aria-label": "Luk",
+                      children: "Luk"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: styles.imageArea, children: (_a = current.preview) != null ? _a : current.thumbnail }),
+              multiple && /* @__PURE__ */ jsxs("div", { className: styles.nav, children: [
+                /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "sm", onClick: prev, "aria-label": "Forrige billede", children: /* @__PURE__ */ jsx(ChevronLeft, { size: 20 }) }),
+                /* @__PURE__ */ jsx("span", { className: styles.navHint, children: "\u2190 \u2192 \xB7 Esc" }),
+                /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "sm", onClick: next, "aria-label": "N\xE6ste billede", children: /* @__PURE__ */ jsx(ChevronRight, { size: 20 }) })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { Lightbox };

package/dist/components/lightbox/Lightbox.module.css

@@ -0,0 +1,161 @@
+.thumbnails {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--spacing-md);
+}
+
+.thumbnailBtn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  flex: none;
+  text-align: left;
+}
+
+.thumbnailImg {
+  overflow: hidden;
+  border-radius: var(--border-radius-default);
+  border: 1px solid var(--color-border-default);
+  box-shadow: var(--shadow-sm);
+  transition:
+    transform var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+.thumbnailBtn:hover .thumbnailImg {
+  transform: scale(1.02);
+}
+
+.thumbnailImg > img {
+  height: 100%;
+  width: auto;
+  display: block;
+}
+
+.thumbnailMeta {
+  display: flex;
+  gap: var(--spacing-2xs);
+}
+
+.dialog {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  max-width: none;
+  height: 100%;
+  max-height: none;
+  background: transparent;
+  border: none;
+  outline: none;
+}
+
+.dialog::backdrop {
+  background: color-mix(in srgb, black 85%, transparent);
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  padding: var(--spacing-sm);
+  box-sizing: border-box;
+  gap: var(--spacing-sm);
+}
+
+/* ── Toolbar ────────────────────────────────────────────────── */
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+  width: 100%;
+  max-width: min(96vw, 1200px);
+  flex-shrink: 0;
+}
+
+.toolbarInfo {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  color: var(--color-fg-default);
+  font-size: var(--font-size-sm);
+  font-family: var(--font-family);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.titleMain {
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.titleItem {
+  color: var(--color-fg-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.counter {
+  color: var(--color-fg-subtle);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.toolbarActions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-shrink: 0;
+}
+
+.buttonAdditionSlot {
+  margin-inline-end: var(--spacing-sm);
+}
+
+.imageArea {
+  width: 100%;
+  max-width: min(96vw, 1200px);
+  background: black;
+  border-radius: var(--border-radius-default);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex: 1 1 0;
+  min-height: 0;
+}
+
+.imageArea > img {
+  max-height: 100%;
+  max-width: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: min(96vw, 1200px);
+  flex-shrink: 0;
+}
+
+.navHint {
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-family);
+}

package/dist/components/media-card/MediaCard.cjs

@@ -2,17 +2,24 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var styles = require('./MediaCard.module.css');
 var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var React__default = /*#__PURE__*/_interopDefault(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
 function MediaCard({
   src,
   alt,
   href,
+  component: Component,
+  linkElement,
   loading = false,
   aspectRatio = "1 / 1",
   objectFit = "cover",
@@ -24,12 +31,13 @@ function MediaCard({
   imageClassName,
   linkProps
 }) {
-  const isInteractive = Boolean(href);
+  var _a;
+  const isInteractive = Boolean(href || Component || linkElement);
   const hasCaption = showCaption && (caption || meta);
   const content = /* @__PURE__ */ jsxRuntime.jsx(
     "figure",
     {
-      className: [styles__default.default.root, isInteractive ? styles__default.default.interactive : "", className != null ? className : ""].join(" "),
+      className: cx(styles__default.default.root, isInteractive ? styles__default.default.interactive : void 0, className),
       style: { "--media-card-aspect-ratio": aspectRatio },
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.media, children: [
         loading || !src ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { height: "100%" }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -37,7 +45,7 @@ function MediaCard({
           {
             src,
             alt,
-            className: [styles__default.default.image, imageClassName != null ? imageClassName : ""].join(" "),
+            className: cx(styles__default.default.image, imageClassName),
             style: {
               objectFit,
               objectPosition
@@ -51,10 +59,29 @@ function MediaCard({
       ] })
     }
   );
-  if (!href) {
+  if (!isInteractive) {
     return content;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: styles__default.default.link, ...linkProps, children: content });
+  const wrapperProps = {
+    ...linkProps,
+    ...href ? { href } : {},
+    className: cx(styles__default.default.link, linkProps == null ? void 0 : linkProps.className),
+    children: content
+  };
+  if (linkElement) {
+    const child = linkElement;
+    const childProps = (_a = child.props) != null ? _a : {};
+    return React__default.default.cloneElement(child, {
+      ...childProps,
+      ...wrapperProps,
+      className: cx(childProps.className, wrapperProps.className),
+      href: href != null ? href : childProps.href
+    });
+  }
+  if (Component) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...wrapperProps });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { ...wrapperProps });
 }
 
 exports.MediaCard = MediaCard;

package/dist/components/media-card/MediaCard.d.ts

@@ -1,9 +1,11 @@
-import type { AnchorHTMLAttributes, CSSProperties, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, CSSProperties, ElementType, ReactElement, ReactNode } from 'react';
 type AspectRatio = '1 / 1' | '4 / 3' | '3 / 4' | '16 / 9' | string;
 export type MediaCardProps = {
     src?: string;
     alt: string;
     href?: string;
+    component?: ElementType<any>;
+    linkElement?: ReactElement<any>;
     loading?: boolean;
     aspectRatio?: AspectRatio;
     objectFit?: CSSProperties['objectFit'];
@@ -15,5 +17,5 @@ export type MediaCardProps = {
     imageClassName?: string;
     linkProps?: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children'>;
 };
-export declare function MediaCard({ src, alt, href, loading, aspectRatio, objectFit, objectPosition, caption, meta, showCaption, className, imageClassName, linkProps, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function MediaCard({ src, alt, href, component: Component, linkElement, loading, aspectRatio, objectFit, objectPosition, caption, meta, showCaption, className, imageClassName, linkProps, }: MediaCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/media-card/MediaCard.js

@@ -1,12 +1,18 @@
 'use client';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
 import styles from './MediaCard.module.css';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
 function MediaCard({
   src,
   alt,
   href,
+  component: Component,
+  linkElement,
   loading = false,
   aspectRatio = "1 / 1",
   objectFit = "cover",
@@ -18,12 +24,13 @@ function MediaCard({
   imageClassName,
   linkProps
 }) {
-  const isInteractive = Boolean(href);
+  var _a;
+  const isInteractive = Boolean(href || Component || linkElement);
   const hasCaption = showCaption && (caption || meta);
   const content = /* @__PURE__ */ jsx(
     "figure",
     {
-      className: [styles.root, isInteractive ? styles.interactive : "", className != null ? className : ""].join(" "),
+      className: cx(styles.root, isInteractive ? styles.interactive : void 0, className),
       style: { "--media-card-aspect-ratio": aspectRatio },
       children: /* @__PURE__ */ jsxs("div", { className: styles.media, children: [
         loading || !src ? /* @__PURE__ */ jsx(SkeletonLoaderItem, { height: "100%" }) : /* @__PURE__ */ jsx(
@@ -31,7 +38,7 @@ function MediaCard({
           {
             src,
             alt,
-            className: [styles.image, imageClassName != null ? imageClassName : ""].join(" "),
+            className: cx(styles.image, imageClassName),
             style: {
               objectFit,
               objectPosition
@@ -45,10 +52,29 @@ function MediaCard({
       ] })
     }
   );
-  if (!href) {
+  if (!isInteractive) {
     return content;
   }
-  return /* @__PURE__ */ jsx("a", { href, className: styles.link, ...linkProps, children: content });
+  const wrapperProps = {
+    ...linkProps,
+    ...href ? { href } : {},
+    className: cx(styles.link, linkProps == null ? void 0 : linkProps.className),
+    children: content
+  };
+  if (linkElement) {
+    const child = linkElement;
+    const childProps = (_a = child.props) != null ? _a : {};
+    return React.cloneElement(child, {
+      ...childProps,
+      ...wrapperProps,
+      className: cx(childProps.className, wrapperProps.className),
+      href: href != null ? href : childProps.href
+    });
+  }
+  if (Component) {
+    return /* @__PURE__ */ jsx(Component, { ...wrapperProps });
+  }
+  return /* @__PURE__ */ jsx("a", { ...wrapperProps });
 }
 
 export { MediaCard };

package/dist/index.css

@@ -22,6 +22,7 @@
 @import './components/filtering/chip-multi-toggle/ChipMultiToggle.module.css';
 @import './components/forms/checkbox-group/CheckboxGroup.module.css';
 @import './components/forms/checkbox/Checkbox.module.css';
+@import './components/forms/file-upload/FileUpload.module.css';
 @import './components/forms/form-select/FormSelect.module.css';
 @import './components/forms/input-container/InputContainer.module.css';
 @import './components/forms/input/Input.module.css';
@@ -35,6 +36,7 @@
 @import './components/icon/Icon.module.css';
 @import './components/inline-status/InlineStatus.module.css';
 @import './components/json-viewer/JsonViewer.module.css';
+@import './components/lightbox/Lightbox.module.css';
 @import './components/media-card/MediaCard.module.css';
 @import './components/menu/Menu.module.css';
 @import './components/meta-bar/MetaBar.module.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.109",
+  "version": "0.0.111",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",