@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/card/Card.d.ts

@@ -1,5 +1,6 @@
-import React, { JSXElementConstructor, ReactElement } from 'react';
-import { Severity } from '@/constants/severity.types';
+import { JSXElementConstructor, ReactElement } from 'react';
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
 type CardVariant = 'default' | 'subtle' | 'strong';
 type CardSize = 'sm' | 'md' | 'lg';
 type CardImagePlacement = 'left' | 'right' | 'top';
@@ -9,16 +10,16 @@ interface CardProps {
     variant?: CardVariant;
     size?: CardSize;
     headerMarker?: boolean;
-    headerIcon?: React.ReactNode;
+    headerIcon?: ReactNode;
     severity?: Severity;
-    image?: React.ReactNode;
+    image?: ReactNode;
     imgPlacement?: CardImagePlacement;
     mediaWidth?: number;
-    actions?: React.ReactNode;
-    headerMeta?: React.ReactNode;
+    actions?: ReactNode;
+    headerMeta?: ReactNode;
     sectionTitle?: string;
     showSectionDivider?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
     link?: ReactElement<any, string | JSXElementConstructor<any>>;
     width?: 25 | 33 | 50 | 66 | 75 | 100;
 }

package/dist/components/card/Card.js

@@ -1,63 +1,22 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Headline } from '../headline/Headline';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Card.module.css';
+import { Headline } from '../headline/Headline';
+import { Hyperlink } from '../hyperlink/Hyperlink';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-import { Link } from '../link/Link';
-
-function Card({
-  title,
-  loading,
-  variant = "default",
-  size = "md",
-  headerMarker = true,
-  headerIcon,
-  severity,
-  image,
-  imgPlacement = "left",
-  mediaWidth,
-  actions,
-  headerMeta,
-  sectionTitle,
-  showSectionDivider = false,
-  children,
-  link,
-  width
-}) {
-  const outerContainerStyle = width ? { ["--width"]: `${width}%` } : void 0;
-  const mediaStyle = mediaWidth ? { ["--card-media-width"]: `${mediaWidth}px` } : void 0;
-  const innerPlacementClass = imgPlacement === "top" ? styles.innerImgTop : imgPlacement === "right" ? styles.innerImgRight : styles.innerImgLeft;
-  const inner = /* @__PURE__ */ jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [
-    image && /* @__PURE__ */ jsx("div", { className: styles.media, style: mediaStyle, children: image }),
-    /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
-      (title || headerMeta) && /* @__PURE__ */ jsxs("header", { className: styles.header, children: [
-        title && /* @__PURE__ */ jsx(
-          Headline,
-          {
-            severity,
-            marker: headerMarker,
-            icon: headerIcon,
-            size: 4,
-            weight: 500,
-            disableMargin: true,
-            children: title
-          }
-        ),
-        headerMeta && /* @__PURE__ */ jsx("div", { className: styles.headerMeta, children: headerMeta })
-      ] }),
-      loading && /* @__PURE__ */ jsx("div", { className: styles.loadingList, children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: styles.loadingRow, children: [
-        /* @__PURE__ */ jsx(SkeletonLoaderItem, {}),
-        /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: "100%" })
-      ] }, index)) }),
-      !loading && (showSectionDivider || sectionTitle) && /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
-        showSectionDivider && /* @__PURE__ */ jsx("div", { className: styles.sectionDivider }),
-        sectionTitle && /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: sectionTitle })
-      ] }),
-      !loading && children && /* @__PURE__ */ jsx("div", { className: styles.body, children }),
-      !loading && actions && /* @__PURE__ */ jsx("div", { className: styles.actions, children: actions })
-    ] })
-  ] });
-  const cardWithLink = link ? /* @__PURE__ */ jsx(Link, { component: link }) : inner;
-  return /* @__PURE__ */ jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerContainerStyle, children: /* @__PURE__ */ jsx("div", { className: [styles.container, styles[variant]].filter(Boolean).join(" "), children: cardWithLink }) });
+export function Card({ title, loading, variant = 'default', size = 'md', headerMarker = true, headerIcon, severity, image, imgPlacement = 'left', mediaWidth, actions, headerMeta, sectionTitle, showSectionDivider = false, children, link, width, }) {
+    const outerContainerStyle = width
+        ? { ['--width']: `${width}%` }
+        : undefined;
+    const mediaStyle = mediaWidth
+        ? { ['--card-media-width']: `${mediaWidth}px` }
+        : undefined;
+    const innerPlacementClass = imgPlacement === 'top'
+        ? styles.innerImgTop
+        : imgPlacement === 'right'
+            ? styles.innerImgRight
+            : styles.innerImgLeft;
+    const inner = (_jsxs("div", { className: `${styles.inner} ${innerPlacementClass}`, children: [image && (_jsx("div", { className: styles.media, style: mediaStyle, children: image })), _jsxs("div", { className: styles.content, children: [(title || headerMeta) && (_jsxs("header", { className: styles.header, children: [title && (_jsx(Headline, { severity: severity, marker: headerMarker, icon: headerIcon, size: 4, weight: 500, disableMargin: true, children: title })), headerMeta && _jsx("div", { className: styles.headerMeta, children: headerMeta })] })), loading && (_jsx("div", { className: styles.loadingList, children: Array.from({ length: 4 }).map((_, index) => (_jsxs("div", { className: styles.loadingRow, children: [_jsx(SkeletonLoaderItem, {}), _jsx(SkeletonLoaderItem, { width: "100%" })] }, index))) })), !loading && (showSectionDivider || sectionTitle) && (_jsxs("div", { className: styles.section, children: [showSectionDivider && _jsx("div", { className: styles.sectionDivider }), sectionTitle && _jsx("div", { className: styles.sectionTitle, children: sectionTitle })] })), !loading && children && _jsx("div", { className: styles.body, children: children }), !loading && actions && _jsx("div", { className: styles.actions, children: actions })] })] }));
+    const cardWithLink = link ? _jsx(Hyperlink, { component: link }) : inner;
+    return (_jsx("div", { className: `${styles.outerContainer} ${styles[size]}`, style: outerContainerStyle, children: _jsx("div", { className: [styles.container, styles[variant]].filter(Boolean).join(' '), children: cardWithLink }) }));
 }
-
-export { Card };

package/dist/components/card-container/CardContainer.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { Severity } from '@/constants/severity.types';
+import type { JSX, ReactNode } from 'react';
+import { Severity } from '../../constants/severity.types';
 interface CardContainerProps {
     headline?: string;
-    children?: React.ReactNode[];
+    children?: ReactNode[];
     expand?: boolean;
     severity?: Severity;
     displayHeaderMarker?: boolean;

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

@@ -1,18 +1,6 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Headline } from '@/components/headline/Headline';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Headline } from '../../components/headline/Headline';
 import styles from './CardContainer.module.css';
-
-function CardContainer({
-  children,
-  headline,
-  expand,
-  severity,
-  displayHeaderMarker
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
-    headline && /* @__PURE__ */ jsx(Headline, { marker: displayHeaderMarker, severity, children: headline }),
-    /* @__PURE__ */ jsx("div", { className: styles.container, style: { ["--expand"]: expand ? "1" : "0" }, children })
-  ] });
+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 })] }));
 }
-
-export { CardContainer };

package/dist/components/chip/Chip.d.ts

@@ -1,14 +1,15 @@
-import { Severity } from '@/constants/severity.types';
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
 interface ChipProps {
-    children: React.ReactNode;
-    severity?: Severity;
+    children: ReactNode;
+    severity?: Severity | null;
     disableIcon?: boolean;
-    customIcon?: React.ReactNode;
+    customIcon?: ReactNode;
     loading?: boolean;
     fullWidth?: boolean;
     onClose?: () => void;
     size?: 'sm' | 'md' | 'lg';
-    type?: 'default' | 'rounded';
+    type?: 'default' | 'rounded' | 'outlined';
 }
 export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, type, onClose, }: ChipProps): JSX.Element;
 export {};

package/dist/components/chip/Chip.js

@@ -1,44 +1,20 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
 import { useState, useRef, useEffect } from 'react';
 import styles from './Chip.module.css';
 import { Icon } from '../icon/Icon';
-import { X } from 'lucide-react';
 import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
-
-function Chip({
-  children,
-  severity = "neutral",
-  loading,
-  disableIcon = true,
-  fullWidth = false,
-  size = "md",
-  customIcon,
-  type = "rounded",
-  onClose
-}) {
-  const [chipWidth, setChipWidth] = useState(void 0);
-  const chipRef = useRef(null);
-  useEffect(() => {
-    if (chipRef.current) {
-      setChipWidth(`${chipRef.current.offsetWidth}px`);
-    }
-  }, [loading]);
-  if (loading) {
-    return /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: chipWidth != null ? chipWidth : "100px", height: "26px", radius: "25px" });
-  }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: chipRef,
-      className: `${styles.container} ${styles[severity]} ${fullWidth ? styles.fullWidth : ""} ${styles[size]} ${styles[type]}`,
-      children: [
-        severity && !disableIcon && /* @__PURE__ */ jsx(Icon, { severity }),
-        customIcon,
-        children,
-        onClose && /* @__PURE__ */ jsx("button", { onClick: onClose, className: styles.close, children: /* @__PURE__ */ jsx(X, {}) })
-      ]
+export function Chip({ children, severity = 'neutral', loading, disableIcon = true, fullWidth = false, size = 'md', customIcon, type = 'rounded', onClose, }) {
+    const [chipWidth, setChipWidth] = useState(undefined);
+    const chipRef = useRef(null);
+    useEffect(() => {
+        if (chipRef.current) {
+            setChipWidth(`${chipRef.current.offsetWidth}px`);
+        }
+    }, [loading]);
+    if (loading) {
+        return _jsx(SkeletonLoaderItem, { width: chipWidth !== null && chipWidth !== void 0 ? chipWidth : '100px', height: "26px", radius: "25px" });
     }
-  );
+    return (_jsxs("div", { ref: chipRef, className: `${styles.container} ${severity ? styles[severity] : ''} ${fullWidth ? styles.fullWidth : ''} ${styles[size]} ${styles[type]}`, children: [severity && !disableIcon && _jsx(Icon, { severity: severity }), customIcon, children, onClose && (_jsx("button", { onClick: onClose, className: styles.close, children: _jsx(X, {}) }))] }));
 }
-
-export { Chip };

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

@@ -5,7 +5,7 @@
   white-space: nowrap;
 
   /* Neutral pill background + text */
-  background-color: var(--color-bg-contextual);
+
   color: var(--chip-fg-default, var(--color-fg-default));
 
   border-radius: var(--border-radius-default);
@@ -29,6 +29,11 @@
   border-radius: var(--border-radius-rounded);
 }
 
+.container.outlined {
+  border-radius: var(--border-radius-rounded);
+  border: var(--border-width-thin) solid var(--color-border-default);
+}
+
 .container svg {
   inline-size: var(--icon-size-md);
   block-size: var(--icon-size-md);
@@ -51,6 +56,9 @@
 
 /* Status variants (use status tokens) */
 
+.container.neutral {
+  background-color: var(--color-bg-contextual);
+}
 .container.success {
   background-color: var(--color-status-success-bg);
   color: var(--color-status-success-fg);

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

@@ -1,7 +1,8 @@
-import { Severity } from '@/constants/severity.types';
+import type { ReactNode, JSX } from 'react';
+import { Severity } from '../../constants/severity.types';
 interface CircleProps {
     severity: Severity;
-    children?: React.ReactNode;
+    children?: ReactNode;
     glow?: boolean;
 }
 export declare function Circle({ severity, children, glow }: CircleProps): JSX.Element;

package/dist/components/circle/Circle.js

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

package/dist/components/clear-button/ClearButton.d.ts

@@ -1,6 +1,7 @@
+import type { ReactNode } from 'react';
 interface ClearButtonProps {
     onClick: () => void;
     absolute?: boolean;
 }
-export declare function ClearButton({ onClick, absolute }: ClearButtonProps): React.ReactNode;
+export declare function ClearButton({ onClick, absolute }: ClearButtonProps): ReactNode;
 export {};

package/dist/components/clear-button/ClearButton.js

@@ -1,20 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { X } from 'lucide-react';
 import styles from './ClearButton.module.css';
-
-function ClearButton({ onClick, absolute }) {
-  return /* @__PURE__ */ jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ""}`, children: /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: styles.button,
-      role: "button",
-      onClick: (e) => {
-        e.stopPropagation();
-        onClick();
-      },
-      children: /* @__PURE__ */ jsx(X, { size: 20 })
-    }
-  ) });
+export function ClearButton({ onClick, absolute }) {
+    return (_jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ''}`, children: _jsx("span", { className: styles.button, role: "button", onClick: e => {
+                e.stopPropagation();
+                onClick();
+            }, children: _jsx(X, { size: 20 }) }) }));
 }
-
-export { ClearButton };

package/dist/components/code-block/CodeBlock.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export interface CodeBlockProps {
     code: string;
     copyButton?: boolean;

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

@@ -1,12 +1,6 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { CopyButton } from '../copy-button/CopyButton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './CodeBlock.module.css';
-
-function CodeBlock({ code, copyButton, size = "md" }) {
-  return /* @__PURE__ */ jsxs("pre", { className: `${styles.container} ${styles[size]}`, children: [
-    copyButton && /* @__PURE__ */ jsx("span", { className: styles.copyButton, children: /* @__PURE__ */ jsx(CopyButton, { text: code }) }),
-    /* @__PURE__ */ jsx("code", { className: styles.code, children: code })
-  ] });
+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 })] }));
 }
-
-export { CodeBlock };

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

@@ -1,9 +1,10 @@
-import { ButtonSize, ButtonVariant } from '../button/Button';
+import type { ReactNode, ComponentProps } from 'react';
+import { Button, ButtonSize, ButtonVariant } from '../button/Button';
 interface CopyButtonProps {
     text: string;
     variant?: ButtonVariant;
     size?: ButtonSize;
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
-export declare function CopyButton({ text, variant, size, children, }: CopyButtonProps): React.ReactNode;
+export declare function CopyButton(props: CopyButtonProps & ComponentProps<typeof Button>): ReactNode;
 export {};

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

@@ -1,29 +1,22 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import { Button } from '../button/Button';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Copy } from 'lucide-react';
+import { useState } from 'react';
 import styles from './CopyButton.module.css';
-
-function CopyButton({
-  text,
-  variant = "outlined",
-  size = "sm",
-  children
-}) {
-  const [copied, setCopied] = useState(false);
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1e3);
-    } catch (err) {
-      console.error("Failed to copy: ", err);
-    }
-  };
-  return /* @__PURE__ */ jsxs(Button, { "aria-label": "Copy to clipboard", onClick: handleCopy, variant, size, children: [
-    /* @__PURE__ */ jsx("span", { className: `${styles.container} ${copied ? styles.copied : ""}`, children: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}) }),
-    children
-  ] });
+import { Button } from '../button/Button';
+export function CopyButton(props) {
+    var _a;
+    const { text, variant = 'outlined', size = 'sm', children, ...rest } = props;
+    const [copied, setCopied] = useState(false);
+    const handleCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1000);
+        }
+        catch (err) {
+            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] }));
 }
-
-export { CopyButton };

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

@@ -1,10 +1,12 @@
-import { Size } from '@/types/sizes.types';
+import React from 'react';
+import { Input } from '../../components/forms/input/Input';
 type Mode = 'single' | 'range';
 type WeekStart = 0 | 1;
 export type DateValue = Date | null | {
     start: Date | null;
     end: Date | null;
 };
+type InputProps = React.ComponentProps<typeof Input>;
 export interface DateTimePickerProps {
     mode?: Mode;
     value: DateValue;
@@ -22,10 +24,11 @@ export interface DateTimePickerProps {
             end: Date;
         };
     }[];
-    placeholder?: string;
-    inputSize?: Size;
-    disabled?: boolean;
-    id?: string;
+    /**
+     * Forwarded to the internal <Input />.
+     * DateTimePicker controls: value, onInput/onBlur/onKeyDown, icon, onClear.
+     */
+    inputProps?: Omit<InputProps, 'value' | 'onInput' | 'onBlur' | 'icon' | 'onClear' | 'type'>;
     formatDate?: (d: Date, opts: {
         locale: string;
         enableTime: boolean;