@dbcdk/react-components 0.0.204 → 0.0.206

package/README.md

@@ -233,6 +233,22 @@ Storybook includes the a11y addon to help identify issues during development.
 
 ---
 
+## MIME type helpers
+
+These helpers work on both the server and client and are exported from the root and `/client` entrypoints:
+
+```ts
+import { formatMimeType, getMimeTypeExtension } from '@dbcdk/react-components'
+
+formatMimeType('application/pdf') // 'PDF'
+formatMimeType('text/plain; charset=utf-8') // 'Tekst'
+getMimeTypeExtension('image/jpeg') // 'jpg'
+```
+
+`formatMimeType` provides Danish labels for common MIME types, preserves unknown values unchanged, and returns `-` for `null` or `undefined`. `getMimeTypeExtension` returns an extension without a dot for common image types and PDF, or `undefined` for unsupported types. Both ignore MIME parameters, casing, and surrounding whitespace when looking up known types.
+
+---
+
 ## Contributing
 
 See [`CONTRIBUTING.md`](./CONTRIBUTING.md) for detailed guidelines on:

package/dist/client.cjs

@@ -51,6 +51,7 @@ var MultiSelect = require('./components/forms/multi-select/MultiSelect');
 var useViewportFill = require('./hooks/useViewportFill');
 var useStickyLayout = require('./hooks/useStickyLayout');
 var formatDate = require('./utils/date/formatDate');
+var mimeTypes = require('./utils/files/mimeTypes');
 var FilterField = require('./components/filter-field/FilterField');
 var Select = require('./components/forms/select/Select');
 var SplitButton = require('./components/split-button/SplitButton');
@@ -98,6 +99,7 @@ var CopyButton = require('./components/copy-button/CopyButton');
 var Divider = require('./components/divider/Divider');
 var Grid = require('./components/grid/Grid');
 var Alert = require('./components/alert/Alert');
+var Callout = require('./components/callout/Callout');
 var InlineStatus = require('./components/inline-status/InlineStatus');
 var MediaCard = require('./components/media-card/MediaCard');
 var Lightbox = require('./components/lightbox/Lightbox');
@@ -334,6 +336,14 @@ Object.defineProperty(exports, "formatDate", {
   enumerable: true,
   get: function () { return formatDate.formatDate; }
 });
+Object.defineProperty(exports, "formatMimeType", {
+  enumerable: true,
+  get: function () { return mimeTypes.formatMimeType; }
+});
+Object.defineProperty(exports, "getMimeTypeExtension", {
+  enumerable: true,
+  get: function () { return mimeTypes.getMimeTypeExtension; }
+});
 Object.defineProperty(exports, "FilterField", {
   enumerable: true,
   get: function () { return FilterField.FilterField; }
@@ -570,6 +580,10 @@ Object.defineProperty(exports, "Alert", {
   enumerable: true,
   get: function () { return Alert.Alert; }
 });
+Object.defineProperty(exports, "Callout", {
+  enumerable: true,
+  get: function () { return Callout.Callout; }
+});
 Object.defineProperty(exports, "InlineStatus", {
   enumerable: true,
   get: function () { return InlineStatus.InlineStatus; }

package/dist/client.d.ts

@@ -83,6 +83,7 @@ export type { MultiselectOption } from './components/forms/multi-select/MultiSel
 export { useViewportFill } from './hooks/useViewportFill';
 export { useStickyLayout } from './hooks/useStickyLayout';
 export { formatDate } from './utils/date/formatDate';
+export { formatMimeType, getMimeTypeExtension } from './utils/files/mimeTypes';
 export type { FormatDateOptions } from './utils/date/formatDate';
 export { FilterField, NUMBER_OPERATORS } from './components/filter-field/FilterField';
 export type { Operator, FilterEvent, FilterFieldProps } from './components/filter-field/FilterField';
@@ -164,6 +165,8 @@ export { Grid, GridItem } from './components/grid/Grid';
 export type { GridGap, GridMaxWidth, GridProps, GridItemProps } from './components/grid/Grid';
 export { Alert } from './components/alert/Alert';
 export type { AlertProps } from './components/alert/Alert';
+export { Callout } from './components/callout/Callout';
+export type { CalloutProps } from './components/callout/Callout';
 export { InlineStatus } from './components/inline-status/InlineStatus';
 export type { InlineStatusProps } from './components/inline-status/InlineStatus';
 export { MediaCard } from './components/media-card/MediaCard';

package/dist/client.js

@@ -49,6 +49,7 @@ export { MultiSelect } from './components/forms/multi-select/MultiSelect';
 export { useViewportFill } from './hooks/useViewportFill';
 export { useStickyLayout } from './hooks/useStickyLayout';
 export { formatDate } from './utils/date/formatDate';
+export { formatMimeType, getMimeTypeExtension } from './utils/files/mimeTypes';
 export { FilterField, NUMBER_OPERATORS } from './components/filter-field/FilterField';
 export { Select } from './components/forms/select/Select';
 export { SplitButton } from './components/split-button/SplitButton';
@@ -96,6 +97,7 @@ export { CopyButton } from './components/copy-button/CopyButton';
 export { Divider } from './components/divider/Divider';
 export { Grid, GridItem } from './components/grid/Grid';
 export { Alert } from './components/alert/Alert';
+export { Callout } from './components/callout/Callout';
 export { InlineStatus } from './components/inline-status/InlineStatus';
 export { MediaCard } from './components/media-card/MediaCard';
 export { Lightbox } from './components/lightbox/Lightbox';

package/dist/components/alert/Alert.module.css

@@ -1,18 +1,16 @@
 .container {
-  --alert-bg: var(--color-bg-toolbar);
-  --alert-fg: var(--color-fg-default);
-
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-sm);
   inline-size: min(100%, var(--alert-max-width, 72ch));
   max-inline-size: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  /* Severity accent on the left edge, as on toasts. */
+  border-inline-start: var(--border-width-thick) solid var(--alert-accent);
   border-radius: var(--border-radius-default);
-  background: var(--alert-bg);
-  color: var(--alert-fg);
-  /* Severity stripe on the left edge. An inset shadow keeps size and padding unchanged. */
-  box-shadow: inset var(--border-width-thick) 0 0 var(--alert-accent, transparent);
+  background: color-mix(in srgb, var(--alert-accent) 4%, var(--color-bg-surface));
+  color: var(--color-fg-default);
   box-sizing: border-box;
 }
 
@@ -66,53 +64,35 @@
 }
 
 .neutral {
-  --alert-bg: var(--color-bg-toolbar);
-  --alert-fg: var(--color-fg-default);
+  --alert-accent: var(--color-border-default);
+  background: var(--color-bg-surface-subtle);
 }
 
 .success {
-  --alert-bg: var(--color-status-success-bg);
-  --alert-fg: var(--color-status-success-fg);
   --alert-accent: var(--color-status-success);
 }
 
 .warning {
-  --alert-bg: var(--color-status-warning-bg);
-  --alert-fg: var(--color-status-warning-fg);
   --alert-accent: var(--color-status-warning);
 }
 
 .error {
-  --alert-bg: var(--color-status-error-bg);
-  --alert-fg: var(--color-status-error-fg);
   --alert-accent: var(--color-status-error);
 }
 
 .info {
-  --alert-bg: var(--color-status-info-bg);
-  --alert-fg: var(--color-status-info-fg);
   --alert-accent: var(--color-status-info);
 }
 
 .brand {
-  --alert-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
-  --alert-fg: var(--color-brand);
   --alert-accent: var(--color-brand);
 }
 
 .accent {
-  --alert-bg: var(--color-accent-bg);
-  --alert-fg: var(--color-accent-fg);
   --alert-accent: var(--color-accent);
 }
 
-/* Square corners on the striped edge, so the stripe stays straight. */
-.success,
-.warning,
-.error,
-.info,
-.brand,
-.accent {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+/* The brand icon is light (made for brand backgrounds), so use the brand colour here. */
+.brand .leading svg {
+  color: var(--color-brand);
 }

package/dist/components/callout/Callout.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Callout.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Callout({ children, severity = "neutral" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.callout} ${styles__default.default[severity]}`, children });
+}
+
+exports.Callout = Callout;

package/dist/components/callout/Callout.d.ts

@@ -0,0 +1,15 @@
+import type { JSX, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+export interface CalloutProps {
+    children: ReactNode;
+    /** Colour of the bar on the left edge. */
+    severity?: Severity;
+}
+/**
+ * A quiet box for extra content that belongs to what is right above it, e.g.
+ * help or examples under a form field. A light background and a bar on the
+ * left, without an outer border, so it doesn't look like an input or a card.
+ *
+ * Unlike Alert it has no icon, title or role: it isn't a message.
+ */
+export declare function Callout({ children, severity }: CalloutProps): JSX.Element;

package/dist/components/callout/Callout.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import styles from './Callout.module.css';
+
+function Callout({ children, severity = "neutral" }) {
+  return /* @__PURE__ */ jsx("div", { className: `${styles.callout} ${styles[severity]}`, children });
+}
+
+export { Callout };

package/dist/components/callout/Callout.module.css

@@ -0,0 +1,44 @@
+.callout {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-inline-start: var(--border-width-thick) solid var(--callout-accent);
+  border-radius: var(--border-radius-default);
+  background: var(--callout-bg);
+  color: var(--color-fg-default);
+  font-size: var(--font-size-sm);
+  overflow-wrap: anywhere;
+}
+
+.neutral {
+  --callout-accent: var(--color-border-strong);
+  --callout-bg: var(--color-bg-surface-subtle);
+}
+
+.success {
+  --callout-accent: var(--color-status-success);
+  --callout-bg: color-mix(in srgb, var(--color-status-success) 8%, var(--color-bg-surface));
+}
+
+.warning {
+  --callout-accent: var(--color-status-warning);
+  --callout-bg: color-mix(in srgb, var(--color-status-warning) 8%, var(--color-bg-surface));
+}
+
+.error {
+  --callout-accent: var(--color-status-error);
+  --callout-bg: color-mix(in srgb, var(--color-status-error) 8%, var(--color-bg-surface));
+}
+
+.info {
+  --callout-accent: var(--color-status-info);
+  --callout-bg: color-mix(in srgb, var(--color-status-info) 8%, var(--color-bg-surface));
+}
+
+.brand {
+  --callout-accent: var(--color-brand);
+  --callout-bg: color-mix(in srgb, var(--color-brand) 8%, var(--color-bg-surface));
+}
+
+.accent {
+  --callout-accent: var(--color-accent);
+  --callout-bg: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-surface));
+}

package/dist/components/forms/input/Input.module.css

@@ -473,7 +473,7 @@
   pointer-events: auto;
 }
 
-/* Error: wins over variant and modified styles */
+/* Error: wins over the variant's own border, hover and focus colours */
 .field.invalid,
 .field.invalid:hover:not([aria-disabled='true']) {
   border-color: var(--color-status-error);

package/dist/components/forms/select/Select.module.css

@@ -7,7 +7,7 @@
   background-color: var(--color-bg-toolbar-hover);
 }
 
-/* Error: wins over modified styles (attribute bumps specificity over Button's own styles) */
+/* Error (the attribute raises specificity above Button's own border styles) */
 .triggerInvalid[data-forminput],
 .triggerInvalid[data-forminput]:hover:not([disabled]) {
   border-color: var(--color-status-error);

package/dist/components/forms/text-area/Textarea.module.css

@@ -38,7 +38,7 @@
   box-shadow: inset 0 0 0 1px var(--color-field-focus);
 }
 
-/* Error: wins over modified styles */
+/* Error */
 .container.invalid textarea,
 .container.invalid textarea:hover {
   border-color: var(--color-status-error);

package/dist/components/inline-status/InlineStatus.module.css

@@ -1,18 +1,15 @@
 .container {
-  --inline-status-bg: var(--color-bg-toolbar);
-  --inline-status-fg: var(--color-fg-default);
-  --inline-status-border: var(--color-border-subtle);
-
   display: inline-flex;
   align-items: flex-start;
   gap: var(--spacing-xs);
   max-inline-size: 100%;
 
   padding: var(--spacing-2xs) var(--spacing-sm);
-  border: 1px solid var(--inline-status-border);
+  border: var(--border-width-thin) solid
+    color-mix(in srgb, var(--inline-status-accent) 25%, var(--color-border-default));
   border-radius: var(--border-radius-default);
-  background: var(--inline-status-bg);
-  color: var(--inline-status-fg);
+  background: color-mix(in srgb, var(--inline-status-accent) 4%, var(--color-bg-surface));
+  color: var(--color-fg-default);
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
@@ -56,43 +53,35 @@
 }
 
 .neutral {
-  --inline-status-bg: var(--color-bg-toolbar);
-  --inline-status-fg: var(--color-fg-default);
-  --inline-status-border: transparent;
+  --inline-status-accent: var(--color-border-default);
+  background: var(--color-bg-surface-subtle);
 }
 
 .success {
-  --inline-status-bg: var(--color-status-success-bg);
-  --inline-status-fg: var(--color-status-success-fg);
-  --inline-status-border: var(--color-status-success-border);
+  --inline-status-accent: var(--color-status-success);
 }
 
 .warning {
-  --inline-status-bg: var(--color-status-warning-bg);
-  --inline-status-fg: var(--color-status-warning-fg);
-  --inline-status-border: var(--color-status-warning-border);
+  --inline-status-accent: var(--color-status-warning);
 }
 
 .error {
-  --inline-status-bg: var(--color-status-error-bg);
-  --inline-status-fg: var(--color-status-error-fg);
-  --inline-status-border: var(--color-status-error-border);
+  --inline-status-accent: var(--color-status-error);
 }
 
 .info {
-  --inline-status-bg: var(--color-status-info-bg);
-  --inline-status-fg: var(--color-status-info-fg);
-  --inline-status-border: var(--color-status-info-border);
+  --inline-status-accent: var(--color-status-info);
 }
 
 .brand {
-  --inline-status-bg: color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-surface));
-  --inline-status-fg: var(--color-brand);
-  --inline-status-border: color-mix(in srgb, var(--color-brand) 35%, transparent);
+  --inline-status-accent: var(--color-brand);
 }
 
 .accent {
-  --inline-status-bg: var(--color-accent-bg);
-  --inline-status-fg: var(--color-accent-fg);
-  --inline-status-border: var(--color-accent-border);
+  --inline-status-accent: var(--color-accent);
+}
+
+/* The shared brand icon uses an on-brand colour; keep it visible on the faint tint. */
+.brand .leading svg {
+  color: var(--color-brand);
 }

package/dist/index.cjs

@@ -26,6 +26,7 @@ var severity_types = require('./constants/severity.types');
 var AppHeader = require('./components/app-header/AppHeader');
 var nestedFiltering = require('./utils/arrays/nested-filtering');
 var formatDate = require('./utils/date/formatDate');
+var mimeTypes = require('./utils/files/mimeTypes');
 var clipboard_utils = require('./utils/clipboard.utils');
 var AttributeChip = require('./components/attribute-chip/AttributeChip');
 var MetaBar = require('./components/meta-bar/MetaBar');
@@ -41,6 +42,7 @@ var Toast = require('./components/toast/Toast');
 var Hyperlink = require('./components/hyperlink/Hyperlink');
 var StatePage = require('./components/state-page/StatePage');
 var Alert = require('./components/alert/Alert');
+var Callout = require('./components/callout/Callout');
 var InlineStatus = require('./components/inline-status/InlineStatus');
 var MediaCard = require('./components/media-card/MediaCard');
 var HighlightedText = require('./components/highlighted-text/HighlightedText');
@@ -209,6 +211,12 @@ Object.keys(formatDate).forEach(function (k) {
 		get: function () { return formatDate[k]; }
 	});
 });
+Object.keys(mimeTypes).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return mimeTypes[k]; }
+	});
+});
 Object.keys(clipboard_utils).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
@@ -299,6 +307,12 @@ Object.keys(Alert).forEach(function (k) {
 		get: function () { return Alert[k]; }
 	});
 });
+Object.keys(Callout).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return Callout[k]; }
+	});
+});
 Object.keys(InlineStatus).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.css

@@ -10,6 +10,7 @@
 @import './components/breadcrumbs/Breadcrumbs.module.css';
 @import './components/button-select/ButtonSelect.module.css';
 @import './components/button/Button.module.css';
+@import './components/callout/Callout.module.css';
 @import './components/card-container/CardContainer.module.css';
 @import './components/card/Card.module.css';
 @import './components/card/components/CardMeta.module.css';

package/dist/index.d.ts

@@ -24,6 +24,7 @@ export * from './constants/severity.types';
 export * from './components/app-header/AppHeader';
 export * from './utils/arrays/nested-filtering';
 export * from './utils/date/formatDate';
+export * from './utils/files/mimeTypes';
 export * from './utils/clipboard.utils';
 export * from './components/attribute-chip/AttributeChip';
 export * from './components/meta-bar/MetaBar';
@@ -40,6 +41,7 @@ export * from './components/toast/Toast';
 export * from './components/hyperlink/Hyperlink';
 export * from './components/state-page/StatePage';
 export * from './components/alert/Alert';
+export * from './components/callout/Callout';
 export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
 export * from './components/highlighted-text/HighlightedText';

package/dist/index.js

@@ -24,6 +24,7 @@ export * from './constants/severity.types';
 export * from './components/app-header/AppHeader';
 export * from './utils/arrays/nested-filtering';
 export * from './utils/date/formatDate';
+export * from './utils/files/mimeTypes';
 export * from './utils/clipboard.utils';
 export * from './components/attribute-chip/AttributeChip';
 export * from './components/meta-bar/MetaBar';
@@ -39,6 +40,7 @@ export * from './components/toast/Toast';
 export * from './components/hyperlink/Hyperlink';
 export * from './components/state-page/StatePage';
 export * from './components/alert/Alert';
+export * from './components/callout/Callout';
 export * from './components/inline-status/InlineStatus';
 export * from './components/media-card/MediaCard';
 export * from './components/highlighted-text/HighlightedText';

package/dist/styles/styles.css

@@ -251,10 +251,18 @@ tr.dbc-table--hover:hover td:last-child {
   color: var(--color-fg-subtle);
 }
 
+.dbc-default-text {
+  color: var(--color-fg-default);
+}
+
 .dbc-tabular-nums {
   font-variant-numeric: tabular-nums;
 }
 
+.dbc-xs-text {
+  font-size: var(--font-size-xs);
+}
+
 .dbc-sm-text {
   font-size: var(--font-size-sm);
 }

package/dist/utils/files/mimeTypes.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+const MIME_TYPE_LABELS = /* @__PURE__ */ new Map([
+  ["application/pdf", "PDF"],
+  ["application/epub+zip", "EPUB"],
+  ["application/vnd.amazon.ebook", "Kindle"],
+  ["application/msword", "Word (DOC)"],
+  ["application/vnd.openxmlformats-officedocument.wordprocessingml.document", "Word (DOCX)"],
+  ["application/vnd.ms-excel", "Excel (XLS)"],
+  ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "Excel (XLSX)"],
+  ["application/vnd.ms-powerpoint", "PowerPoint (PPT)"],
+  [
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "PowerPoint (PPTX)"
+  ],
+  ["application/vnd.oasis.opendocument.text", "OpenDocument-tekst (ODT)"],
+  ["application/vnd.oasis.opendocument.spreadsheet", "OpenDocument-regneark (ODS)"],
+  ["application/vnd.oasis.opendocument.presentation", "OpenDocument-pr\xE6sentation (ODP)"],
+  ["application/rtf", "RTF"],
+  ["text/rtf", "RTF"],
+  ["text/plain", "Tekst"],
+  ["text/html", "HTML"],
+  ["application/xhtml+xml", "XHTML"],
+  ["text/csv", "CSV"],
+  ["text/tab-separated-values", "TSV"],
+  ["text/markdown", "Markdown"],
+  ["text/calendar", "Kalender (ICS)"],
+  ["application/xml", "XML"],
+  ["text/xml", "XML"],
+  ["application/json", "JSON"],
+  ["application/ld+json", "JSON-LD"],
+  ["image/jpeg", "JPEG"],
+  ["image/png", "PNG"],
+  ["image/apng", "APNG"],
+  ["image/gif", "GIF"],
+  ["image/webp", "WebP"],
+  ["image/avif", "AVIF"],
+  ["image/tiff", "TIFF"],
+  ["image/bmp", "BMP"],
+  ["image/svg+xml", "SVG"],
+  ["image/vnd.microsoft.icon", "ICO"],
+  ["audio/mpeg", "MP3"],
+  ["audio/mp4", "MP4-lyd"],
+  ["audio/aac", "AAC"],
+  ["audio/ogg", "Ogg-lyd"],
+  ["audio/wav", "WAV"],
+  ["audio/webm", "WebM-lyd"],
+  ["audio/midi", "MIDI"],
+  ["audio/x-midi", "MIDI"],
+  ["video/mp4", "MP4-video"],
+  ["video/mpeg", "MPEG-video"],
+  ["video/ogg", "Ogg-video"],
+  ["video/webm", "WebM-video"],
+  ["video/quicktime", "QuickTime (MOV)"],
+  ["video/x-msvideo", "AVI"],
+  ["application/zip", "ZIP"],
+  ["application/x-zip-compressed", "ZIP"],
+  ["application/gzip", "GZIP"],
+  ["application/x-gzip", "GZIP"],
+  ["application/x-tar", "TAR"],
+  ["application/vnd.rar", "RAR"],
+  ["application/x-rar-compressed", "RAR"],
+  ["application/x-7z-compressed", "7-Zip"],
+  ["application/x-bzip", "BZIP"],
+  ["application/x-bzip2", "BZIP2"],
+  ["application/octet-stream", "Bin\xE6r fil"]
+]);
+const MIME_TYPE_EXTENSIONS = /* @__PURE__ */ new Map([
+  ["application/pdf", "pdf"],
+  ["image/jpeg", "jpg"],
+  ["image/png", "png"],
+  ["image/apng", "apng"],
+  ["image/gif", "gif"],
+  ["image/webp", "webp"],
+  ["image/avif", "avif"],
+  ["image/tiff", "tiff"],
+  ["image/bmp", "bmp"],
+  ["image/svg+xml", "svg"],
+  ["image/vnd.microsoft.icon", "ico"]
+]);
+function getMimeTypeExtension(mimeType) {
+  return MIME_TYPE_EXTENSIONS.get(mimeType.split(";", 1)[0].trim().toLowerCase());
+}
+function formatMimeType(mimeType) {
+  var _a;
+  if (mimeType === void 0 || mimeType === null) return "-";
+  const type = mimeType.split(";", 1)[0].trim().toLowerCase();
+  return (_a = MIME_TYPE_LABELS.get(type)) != null ? _a : mimeType;
+}
+
+exports.formatMimeType = formatMimeType;
+exports.getMimeTypeExtension = getMimeTypeExtension;

package/dist/utils/files/mimeTypes.d.ts

@@ -0,0 +1,2 @@
+export declare function getMimeTypeExtension(mimeType: string): string | undefined;
+export declare function formatMimeType(mimeType: string | undefined | null): string;

package/dist/utils/files/mimeTypes.js

@@ -0,0 +1,89 @@
+const MIME_TYPE_LABELS = /* @__PURE__ */ new Map([
+  ["application/pdf", "PDF"],
+  ["application/epub+zip", "EPUB"],
+  ["application/vnd.amazon.ebook", "Kindle"],
+  ["application/msword", "Word (DOC)"],
+  ["application/vnd.openxmlformats-officedocument.wordprocessingml.document", "Word (DOCX)"],
+  ["application/vnd.ms-excel", "Excel (XLS)"],
+  ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "Excel (XLSX)"],
+  ["application/vnd.ms-powerpoint", "PowerPoint (PPT)"],
+  [
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "PowerPoint (PPTX)"
+  ],
+  ["application/vnd.oasis.opendocument.text", "OpenDocument-tekst (ODT)"],
+  ["application/vnd.oasis.opendocument.spreadsheet", "OpenDocument-regneark (ODS)"],
+  ["application/vnd.oasis.opendocument.presentation", "OpenDocument-pr\xE6sentation (ODP)"],
+  ["application/rtf", "RTF"],
+  ["text/rtf", "RTF"],
+  ["text/plain", "Tekst"],
+  ["text/html", "HTML"],
+  ["application/xhtml+xml", "XHTML"],
+  ["text/csv", "CSV"],
+  ["text/tab-separated-values", "TSV"],
+  ["text/markdown", "Markdown"],
+  ["text/calendar", "Kalender (ICS)"],
+  ["application/xml", "XML"],
+  ["text/xml", "XML"],
+  ["application/json", "JSON"],
+  ["application/ld+json", "JSON-LD"],
+  ["image/jpeg", "JPEG"],
+  ["image/png", "PNG"],
+  ["image/apng", "APNG"],
+  ["image/gif", "GIF"],
+  ["image/webp", "WebP"],
+  ["image/avif", "AVIF"],
+  ["image/tiff", "TIFF"],
+  ["image/bmp", "BMP"],
+  ["image/svg+xml", "SVG"],
+  ["image/vnd.microsoft.icon", "ICO"],
+  ["audio/mpeg", "MP3"],
+  ["audio/mp4", "MP4-lyd"],
+  ["audio/aac", "AAC"],
+  ["audio/ogg", "Ogg-lyd"],
+  ["audio/wav", "WAV"],
+  ["audio/webm", "WebM-lyd"],
+  ["audio/midi", "MIDI"],
+  ["audio/x-midi", "MIDI"],
+  ["video/mp4", "MP4-video"],
+  ["video/mpeg", "MPEG-video"],
+  ["video/ogg", "Ogg-video"],
+  ["video/webm", "WebM-video"],
+  ["video/quicktime", "QuickTime (MOV)"],
+  ["video/x-msvideo", "AVI"],
+  ["application/zip", "ZIP"],
+  ["application/x-zip-compressed", "ZIP"],
+  ["application/gzip", "GZIP"],
+  ["application/x-gzip", "GZIP"],
+  ["application/x-tar", "TAR"],
+  ["application/vnd.rar", "RAR"],
+  ["application/x-rar-compressed", "RAR"],
+  ["application/x-7z-compressed", "7-Zip"],
+  ["application/x-bzip", "BZIP"],
+  ["application/x-bzip2", "BZIP2"],
+  ["application/octet-stream", "Bin\xE6r fil"]
+]);
+const MIME_TYPE_EXTENSIONS = /* @__PURE__ */ new Map([
+  ["application/pdf", "pdf"],
+  ["image/jpeg", "jpg"],
+  ["image/png", "png"],
+  ["image/apng", "apng"],
+  ["image/gif", "gif"],
+  ["image/webp", "webp"],
+  ["image/avif", "avif"],
+  ["image/tiff", "tiff"],
+  ["image/bmp", "bmp"],
+  ["image/svg+xml", "svg"],
+  ["image/vnd.microsoft.icon", "ico"]
+]);
+function getMimeTypeExtension(mimeType) {
+  return MIME_TYPE_EXTENSIONS.get(mimeType.split(";", 1)[0].trim().toLowerCase());
+}
+function formatMimeType(mimeType) {
+  var _a;
+  if (mimeType === void 0 || mimeType === null) return "-";
+  const type = mimeType.split(";", 1)[0].trim().toLowerCase();
+  return (_a = MIME_TYPE_LABELS.get(type)) != null ? _a : mimeType;
+}
+
+export { formatMimeType, getMimeTypeExtension };

package/package.json

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