@dbcdk/react-components 0.0.10 → 0.0.13

package/dist/components/card/components/CardMeta.module.css

@@ -0,0 +1,51 @@
+.grid {
+  margin: 0;
+  display: grid;
+  gap: var(--spacing-xs) var(--spacing-lg);
+}
+
+/* Base: single column */
+.cols1,
+.cols2,
+.cols3 {
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .cols2 {
+    grid-template-columns: 1fr 1fr;
+  }
+  .cols3 {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+
+.row {
+  --label-width: 120px;
+  display: grid;
+  grid-template-columns: var(--label-width) 1fr;
+  gap: var(--spacing-xs);
+  align-items: baseline;
+  min-inline-size: 0;
+}
+
+.label {
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-subtle);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.value {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-default);
+  font-weight: var(--font-weight-medium);
+  min-inline-size: 0;
+  word-break: break-word;
+}
+
+.nowrap {
+  white-space: nowrap;
+}

package/dist/components/card-container/CardContainer.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Headline } from '../../components/headline/Headline';
 import styles from './CardContainer.module.css';
 export function CardContainer({ children, headline, expand, severity, displayHeaderMarker, }) {
-    return (_jsxs("div", { className: styles.wrapper, children: [headline && (_jsx(Headline, { marker: displayHeaderMarker, severity: severity, children: headline })), _jsx("div", { className: styles.container, style: { ['--expand']: expand ? '1' : '0' }, children: children })] }));
+    return (_jsxs("div", { className: styles.wrapper, children: [headline && (_jsx(Headline, { marker: displayHeaderMarker, severity: severity, disableMargin: true, children: headline })), _jsx("div", { className: styles.container, style: { ['--expand']: expand ? '1' : '0' }, children: children })] }));
 }

package/dist/components/card-container/CardContainer.module.css

@@ -1,5 +1,7 @@
 .wrapper {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
 }
 
 .container {

package/dist/components/chip/Chip.module.css

@@ -11,7 +11,7 @@
   border-radius: var(--border-radius-default);
   border: var(--border-width-thin) solid transparent;
 
-  padding-block: calc(var(--spacing-xxs) + var(--density));
+  padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-md);
 
   font-family: var(--font-family);
@@ -39,10 +39,15 @@
   block-size: var(--icon-size-md);
 }
 
+.sm svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
 /* Small size */
 .sm {
   height: var(--component-size-xs);
-  padding-block: calc(0px + var(--density));
+  padding-block: var(--spacing-xxs);
   padding-inline: var(--spacing-xs);
   font-size: var(--font-size-xs);
 }

package/dist/components/circle/Circle.d.ts

@@ -5,8 +5,9 @@ interface CircleProps {
     severity: Severity;
     children?: ReactNode;
     glow?: boolean;
+    muted?: boolean;
     pulse?: boolean;
     size?: CircleSize;
 }
-export declare function Circle({ severity, children, glow, pulse, size }: CircleProps): JSX.Element;
+export declare function Circle({ severity, children, glow, muted, pulse, size, }: CircleProps): JSX.Element;
 export {};

package/dist/components/circle/Circle.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Circle.module.css';
-export function Circle({ severity, children, glow, pulse, size = 'sm' }) {
-    return (_jsxs("span", { className: styles.container, children: [_jsx("span", { "data-glow": glow, "data-pulse": pulse, "data-size": size, className: `${styles.circle} ${styles[severity]}` }), children] }));
+export function Circle({ severity, children, glow, muted, pulse, size = 'sm', }) {
+    return (_jsxs("span", { className: styles.container, children: [_jsx("span", { "data-glow": glow, "data-pulse": pulse, "data-size": size, "data-muted": muted, className: `${styles.circle} ${styles[severity]}` }), children] }));
 }

package/dist/components/circle/Circle.module.css

@@ -16,10 +16,10 @@
   block-size: var(--component-size-sm);
   border-radius: var(--border-radius-round);
   flex-shrink: 0;
-
   transition:
     background-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
+    box-shadow var(--transition-fast) var(--ease-standard),
+    opacity var(--transition-normal) var(--ease-standard);
 }
 
 /* Density modifier (optional) */
@@ -77,6 +77,10 @@
   block-size: 18px;
 }
 
+.circle[data-muted='true'] {
+  opacity: 0.4;
+}
+
 .circle[data-size='lg'] {
   inline-size: 22px;
   block-size: 22px;

package/dist/components/code-block/CodeBlock.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './CodeBlock.module.css';
 import { CopyButton } from '../copy-button/CopyButton';
 export function CodeBlock({ code, copyButton, size = 'md' }) {
-    return (_jsxs("pre", { className: `${styles.container} ${styles[size]}`, children: [copyButton && (_jsx("span", { className: styles.copyButton, children: _jsx(CopyButton, { text: code }) })), _jsx("code", { className: styles.code, children: code })] }));
+    return (_jsxs("pre", { className: `${styles.container} ${styles[size]}`, tabIndex: 0, children: [copyButton && (_jsx("span", { className: styles.copyButton, children: _jsx(CopyButton, { style: "link", text: code }) })), _jsx("code", { className: styles.code, children: code })] }));
 }

package/dist/components/code-block/CodeBlock.module.css

@@ -1,21 +1,33 @@
 .container {
-  background-color: var(--color-bg-contextual);
   position: relative;
-  padding: var(--spacing-sm);
-  border-radius: var(--border-radius-default);
-  border: var(--border-width-thin) solid var(--color-border-default);
   margin-block: 0;
-  font-family: var(--font-family-mono);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  word-break: break-word;
+
+  background: var(--color-bg-contextual-subtle);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-xs);
+
+  padding: var(--spacing-sm);
   padding-inline-end: calc(var(--spacing-sm) + 40px);
+
+  font-family: var(--font-family-mono);
+  line-height: var(--line-height-relaxed);
+
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  /* Nice: avoids layout shift if/when scrollbars appear (supported in modern browsers) */
+  scrollbar-gutter: stable;
+}
+
+.container:focus-within {
+  border-color: var(--color-border-selected);
+  box-shadow: var(--shadow-xs), var(--focus-ring);
 }
 
 .container.sm {
   padding: var(--spacing-xs);
-  padding-inline-end: calc(var(--spacing-xxs) + 40px);
-  min-height: 0;
+  padding-inline-end: calc(var(--spacing-xs) + 40px);
 }
 
 .container.sm .code {
@@ -25,6 +37,7 @@
 .container.md .code {
   font-size: var(--font-size-sm);
 }
+
 .container.lg .code {
   font-size: var(--font-size-base);
 }
@@ -33,11 +46,15 @@
   display: block;
   margin: 0;
   font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  line-break: anywhere;
-  word-break: break-all;
+  color: var(--color-fg-default);
+
+  /* ✅ Preserve formatting but avoid ugly breaking */
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: normal; /* <- not break-all */
 }
 
+/* Copy button stays overlayed; does not affect layout */
 .copyButton {
   position: absolute;
   top: var(--spacing-xs);
@@ -54,7 +71,3 @@
   opacity: 1;
   pointer-events: auto;
 }
-
-.copyButton button {
-  pointer-events: auto;
-}

package/dist/components/copy-button/CopyButton.d.ts

@@ -5,6 +5,7 @@ interface CopyButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     children?: ReactNode;
+    style?: 'button' | 'link';
 }
 export declare function CopyButton(props: CopyButtonProps & ComponentProps<typeof Button>): ReactNode;
 export {};

package/dist/components/copy-button/CopyButton.js

@@ -4,8 +4,9 @@ import { Check, Copy } from 'lucide-react';
 import { useState } from 'react';
 import styles from './CopyButton.module.css';
 import { Button } from '../button/Button';
+import { Hyperlink } from '../hyperlink/Hyperlink';
 export function CopyButton(props) {
-    var _a;
+    var _a, _b;
     const { text, variant = 'outlined', size = 'sm', children, ...rest } = props;
     const [copied, setCopied] = useState(false);
     const handleCopy = async () => {
@@ -18,5 +19,12 @@ export function CopyButton(props) {
             console.error('Failed to copy: ', err);
         }
     };
-    return (_jsxs(Button, { ...rest, "aria-label": children ? '' : ((_a = rest['aria-label']) !== null && _a !== void 0 ? _a : 'Kopier til udklipsholder'), onClick: handleCopy, variant: variant, size: size, children: [_jsx("span", { className: `${styles.container} ${copied ? styles.copied : ''}`, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) }), children] }));
+    if (props.style === 'link') {
+        return (_jsx(Hyperlink, { asChild: true, variant: "secondary", inline: props.variant === 'inline', children: _jsxs("button", { "aria-label": children ? '' : ((_a = rest['aria-label']) !== null && _a !== void 0 ? _a : 'Kopier til udklipsholder'), onClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleCopy();
+                }, className: `${styles.link} ${copied ? styles.copied : ''}`, children: [children, copied ? _jsx(Check, {}) : _jsx(Copy, {})] }) }));
+    }
+    return (_jsxs(Button, { ...rest, "aria-label": children ? '' : ((_b = rest['aria-label']) !== null && _b !== void 0 ? _b : 'Kopier til udklipsholder'), onClick: handleCopy, variant: variant, size: size, children: [_jsx("span", { className: `${styles.container} ${copied ? styles.copied : ''}`, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) }), children] }));
 }

package/dist/components/datetime-picker/DateTimePicker.d.ts

@@ -1,17 +1,26 @@
 import React from 'react';
 import { Input } from '../../components/forms/input/Input';
-import { type UtcIsoString } from './dateTimeHelpers';
+import { type DateOnlyString, type UtcIsoString } from './dateTimeHelpers';
 type Mode = 'single' | 'range';
 type WeekStart = 0 | 1;
-export type DateValue = UtcIsoString | null | {
-    start: UtcIsoString | null;
-    end: UtcIsoString | null;
+/**
+ * Contract (recommended):
+ * - UI is always local time
+ *
+ * SINGLE:
+ * - enableTime=true  => value is UtcIsoString | null (UTC instant in/out)
+ * - enableTime=false => value is DateOnlyString | null (calendar date in/out)
+ *
+ * RANGE:
+ * - always date-only in UI AND value: { start/end: DateOnlyString | null }
+ */
+type RangeValue = {
+    start: DateOnlyString | null;
+    end: DateOnlyString | null;
 };
 type InputProps = React.ComponentProps<typeof Input>;
-export interface DateTimePickerProps {
+type BaseProps = {
     mode?: Mode;
-    value: DateValue;
-    onChange: (next: DateValue) => void;
     enableTime?: boolean;
     timeStep?: number;
     min?: Date;
@@ -34,6 +43,22 @@ export interface DateTimePickerProps {
         locale: string;
         enableTime: boolean;
     }) => string;
-}
+};
+export type DateTimePickerProps = (BaseProps & {
+    mode?: 'single';
+    enableTime?: true;
+    value: UtcIsoString | null;
+    onChange: (next: UtcIsoString | null) => void;
+}) | (BaseProps & {
+    mode?: 'single';
+    enableTime?: false;
+    value: DateOnlyString | null;
+    onChange: (next: DateOnlyString | null) => void;
+}) | (BaseProps & {
+    mode: 'range';
+    enableTime?: boolean;
+    value: RangeValue;
+    onChange: (next: RangeValue) => void;
+});
 export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLDivElement>>;
 export {};