npm - @dbcdk/react-components - Versions diffs - 0.0.8 → 0.0.10 - Mend

@dbcdk/react-components 0.0.8 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/dist/hooks/useTimeDuration.js CHANGED Viewed

@@ -6,7 +6,13 @@ function defaultDuration(ms) {
     const sec = Math.floor(ms / 1000) % 60;
     const min = Math.floor(ms / (1000 * 60)) % 60;
     const hr = Math.floor(ms / (1000 * 60 * 60));
-    return hr > 0 ? `${hr}t ${min}m ${sec}s` : `${min}m ${sec}s`;
+    if (hr > 0) {
+        return `${hr}t ${min}m ${sec}s`;
+    }
+    if (min > 0) {
+        return `${min}m ${sec}s`;
+    }
+    return `${sec}s`;
 }
 export function useTimeDuration({ start, end, dateFormat = { dateStyle: 'short', timeStyle: 'medium' }, fallback = '—', formatDuration = defaultDuration, }) {
     const [hydrated, setHydrated] = useState(false);
@@ -16,14 +22,14 @@ export function useTimeDuration({ start, end, dateFormat = { dateStyle: 'short',
             return fallback;
         if (!hydrated)
             return fallback;
-        return new Intl.DateTimeFormat(undefined, dateFormat).format(start);
+        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(undefined, dateFormat).format(end);
+        return new Intl.DateTimeFormat('da-DK', dateFormat).format(end);
     }, [end, hydrated, fallback, dateFormat]);
     const duration = useMemo(() => {
         if (!start || !end)

package/dist/hooks/useViewportFill.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /**

package/dist/index.d.ts CHANGED Viewed

@@ -61,3 +61,9 @@ export * from './components/hyperlink/Hyperlink';
 export * from './components/overlay/tooltip/Tooltip';
 export * from './components/overlay/tooltip/TooltipProvider';
 export * from './components/overlay/tooltip/useTooltipTrigger';
+export * from './components/forms/radio-buttons/RadioButton';
+export * from './components/forms/radio-buttons/RadioButtonGroup';
+export * from './components/interval-select/IntervalSelect';
+export * from './components/accordion/Accordion';
+export * from './components/state-page/StatePage';
+export * from './components/sticky-footer-layout/StickyFooterLayout';

package/dist/index.js CHANGED Viewed

@@ -1,4 +1,3 @@
-'use client';
 export * from './components/button/Button';
 export * from './components/nav-bar/NavBar';
 export * from './components/avatar/Avatar';
@@ -62,3 +61,9 @@ export * from './components/hyperlink/Hyperlink';
 export * from './components/overlay/tooltip/Tooltip';
 export * from './components/overlay/tooltip/TooltipProvider';
 export * from './components/overlay/tooltip/useTooltipTrigger';
+export * from './components/forms/radio-buttons/RadioButton';
+export * from './components/forms/radio-buttons/RadioButtonGroup';
+export * from './components/interval-select/IntervalSelect';
+export * from './components/accordion/Accordion';
+export * from './components/state-page/StatePage';
+export * from './components/sticky-footer-layout/StickyFooterLayout';

package/dist/src/styles/styles.css CHANGED Viewed

@@ -30,6 +30,8 @@ body {
   color: var(--color-fg-default);
   background-color: var(--color-bg-page);
   --density: var(--density-comfortable);
+  font-size: var(--font-size-sm);
+  margin: 0;
 }
 h1 {
@@ -45,7 +47,7 @@ h3 {
 }
 h4 {
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
 }
@@ -53,6 +55,10 @@ body.dbc-app {
   max-width: 1600px;
 }
+.dbc-font-mono {
+  font-family: monospace;
+}
 .dbc-table {
   --card-label-width: 260px;
   border-collapse: collapse;
@@ -85,14 +91,27 @@ body.dbc-app {
   }
 }
+.dbc-full-width {
+  width: 100%;
+}
+.dbc-highlight {
+  background-color: var(--color-status-warning-bg);
+}
+.dbc-muted-text {
+  color: var(--color-fg-subtle);
+}
 .dbc-table--bordered {
   width: auto;
-  border: 1px solid var(--color-border-default);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-collapse: collapse;
 }
 .dbc-table--bordered th,
 .dbc-table--bordered td {
-  border: 1px solid var(--color-border-default);
+  border: var(--border-width-thin) solid var(--color-border-default);
   padding: var(--spacing-xs) var(--spacing-sm);
 }

package/dist/styles/styles.css CHANGED Viewed

@@ -30,6 +30,8 @@ body {
   color: var(--color-fg-default);
   background-color: var(--color-bg-page);
   --density: var(--density-comfortable);
+  font-size: var(--font-size-sm);
+  margin: 0;
 }
 h1 {
@@ -45,7 +47,7 @@ h3 {
 }
 h4 {
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
 }
@@ -53,6 +55,10 @@ body.dbc-app {
   max-width: 1600px;
 }
+.dbc-font-mono {
+  font-family: monospace;
+}
 .dbc-table {
   --card-label-width: 260px;
   border-collapse: collapse;
@@ -85,14 +91,27 @@ body.dbc-app {
   }
 }
+.dbc-full-width {
+  width: 100%;
+}
+.dbc-highlight {
+  background-color: var(--color-status-warning-bg);
+}
+.dbc-muted-text {
+  color: var(--color-fg-subtle);
+}
 .dbc-table--bordered {
   width: auto;
-  border: 1px solid var(--color-border-default);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-collapse: collapse;
 }
 .dbc-table--bordered th,
 .dbc-table--bordered td {
-  border: 1px solid var(--color-border-default);
+  border: var(--border-width-thin) solid var(--color-border-default);
   padding: var(--spacing-xs) var(--spacing-sm);
 }

package/dist/styles/themes/dbc/dark.css CHANGED Viewed

@@ -215,7 +215,7 @@ html[data-theme='dark'] {
   --component-size-md: 36px;
   --component-size-lg: 44px;
   --component-size-xl: 435px;
-  --sidebar-width: 200px;
+  --sidebar-width: 180px;
   /* Control paddings */
   --control-padding-x: 12px;

package/dist/styles/themes/dbc/light.css CHANGED Viewed

@@ -202,12 +202,13 @@ html[data-theme='light'] {
   --icon-size-md: 20px;
   --icon-size-lg: 24px;
+  --component-size-xxs: 12px;
   --component-size-xs: 20px;
   --component-size-sm: 30px;
   --component-size-md: 36px;
   --component-size-lg: 44px;
   --component-size-xl: 435px;
-  --sidebar-width: 200px;
+  --sidebar-width: 180px;
   /* Control paddings */
   --control-padding-x: 12px;

package/package.json CHANGED Viewed

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