@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/chip/Chip.js

@@ -1,43 +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,
-  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]}`,
-      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

@@ -4,10 +4,11 @@
   gap: var(--space-inline-sm);
   white-space: nowrap;
 
-  background-color: var(--opac-bg-default);
-  color: var(--color-text);
+  /* Neutral pill background + text */
 
-  border-radius: var(--border-radius-rounded);
+  color: var(--chip-fg-default, var(--color-fg-default));
+
+  border-radius: var(--border-radius-default);
   border: var(--border-width-thin) solid transparent;
 
   padding-block: calc(var(--spacing-xxs) + var(--density));
@@ -15,7 +16,7 @@
 
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--font-weight-default);
 
   transition:
     background-color var(--transition-fast) var(--ease-standard),
@@ -24,48 +25,69 @@
     box-shadow var(--transition-fast) var(--ease-standard);
 }
 
-.container:hover {
-  background-color: var(--opac-bg-dark);
+.container.rounded {
+  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);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
 }
 
+/* Small size */
 .sm {
-  padding-block: calc(var(--spacing-2xs) + var(--density));
+  height: var(--component-size-xs);
+  padding-block: calc(0px + var(--density));
   padding-inline: var(--spacing-xs);
   font-size: var(--font-size-xs);
 }
 
+/* Inverted variant: for dark / strong backgrounds */
 .container.invert {
-  background-color: var(--opac-bg-default-invert);
-  color: var(--color-text-inverse);
+  background-color: transparent;
+  color: var(--color-fg-on-strong);
+  border-color: transparent;
 }
 
-/* Status variants */
+/* Status variants (use status tokens) */
+
+.container.neutral {
+  background-color: var(--color-bg-contextual);
+}
 .container.success {
-  background-color: var(--color-bg-success);
-  color: var(--color-success);
+  background-color: var(--color-status-success-bg);
+  color: var(--color-status-success-fg);
+  border-color: var(--color-status-success-border);
 }
+
 .container.warning {
-  background-color: var(--color-bg-warning);
-  color: var(--color-warning);
+  background-color: var(--color-status-warning-bg);
+  color: var(--color-status-warning-fg);
+  border-color: var(--color-status-warning-border);
 }
+
 .container.error {
-  background-color: var(--color-bg-error);
-  color: var(--color-error);
+  background-color: var(--color-status-error-bg);
+  color: var(--color-status-error-fg);
+  border-color: var(--color-status-error-border);
 }
+
 .container.info {
-  background-color: var(--color-bg-info);
-  color: var(--color-info);
+  background-color: var(--color-status-info-bg);
+  color: var(--color-status-info-fg);
+  border-color: var(--color-status-info-border);
 }
 
 /* Brand variant */
 .container.brand {
-  background-color: var(--color-primary);
-  color: var(--color-text-on-primary);
+  background-color: var(--color-brand);
+  color: var(--color-fg-on-brand);
+  border-color: transparent;
 }
 
 /* Full width */
@@ -74,23 +96,24 @@
   justify-content: center;
 }
 
+/* Close button inside chip */
 .close {
   all: unset;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-
   cursor: pointer;
   color: inherit;
-
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
   border-radius: var(--border-radius-round);
   transition: background-color var(--transition-fast) var(--ease-standard);
 }
+
 .close:hover {
-  background-color: var(--color-surface-hover);
+  background-color: var(--color-bg-hover-subtle);
 }
+
 .close:focus-visible {
   box-shadow: var(--focus-ring);
   outline: none;

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/circle/Circle.module.css

@@ -6,7 +6,7 @@
   white-space: nowrap;
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
-  color: var(--color-text);
+  color: var(--color-fg-default);
 }
 
 .circle {
@@ -29,34 +29,34 @@
 
 /* Status variants */
 .brand {
-  background-color: var(--color-primary);
+  background-color: var(--color-brand);
 }
 .success {
-  background-color: var(--color-success);
+  background-color: var(--color-status-success);
 }
 .warning {
-  background-color: var(--color-warning);
+  background-color: var(--color-status-warning);
 }
 .error {
-  background-color: var(--color-error);
+  background-color: var(--color-status-error);
 }
 .info {
-  background-color: var(--color-info);
+  background-color: var(--color-status-info);
 }
 
 .brand[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-bg-primary);
+  box-shadow: 0 0 0 2px var(--color-bg-selected);
 }
 
 .success[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-bg-success);
+  box-shadow: 0 0 0 2px var(--color-status-success-bg);
 }
 .warning[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-bg-warning);
+  box-shadow: 0 0 0 2px var(--color-status-warning-bg);
 }
 .error[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-bg-error);
+  box-shadow: 0 0 0 2px var(--color-status-error-bg);
 }
 .info[data-glow='true'] {
-  box-shadow: 0 0 0 2px var(--color-bg-info);
+  box-shadow: 0 0 0 2px var(--color-status-info-bg);
 }

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 { Button } from '../button/Button';
 import styles from './ClearButton.module.css';
-
-function ClearButton({ onClick, absolute }) {
-  return /* @__PURE__ */ jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ""}`, children: /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant: "inline",
-      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/clear-button/ClearButton.module.css

@@ -1,16 +1,17 @@
-.clearButton button {
+.clearButton .button {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-text-muted);
-  &:hover {
-    color: var(--color-text);
-  }
+  color: var(--color-fg-subtle);
 }
 
-.clearButton.absolute button {
+.clearButton .button:hover {
+  background-color: var(--color-bg-contextual);
+}
+
+.clearButton.absolute .button {
   position: absolute;
-  right: var(--spacing-md);
+  right: var(--spacing-xxs);
   top: 50%;
   transform: translateY(-50%);
 }

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

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+export interface CodeBlockProps {
+    code: string;
+    copyButton?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function CodeBlock({ code, copyButton, size }: CodeBlockProps): JSX.Element;

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

@@ -0,0 +1,6 @@
+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 })] }));
+}

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

@@ -0,0 +1,60 @@
+.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;
+  padding-inline-end: calc(var(--spacing-sm) + 40px);
+}
+
+.container.sm {
+  padding: var(--spacing-xxs);
+  padding-inline-end: calc(var(--spacing-xxs) + 40px);
+  min-height: 0;
+}
+
+.container.sm .code {
+  font-size: var(--font-size-xs);
+}
+
+.container.md .code {
+  font-size: var(--font-size-sm);
+}
+.container.lg .code {
+  font-size: var(--font-size-base);
+}
+
+.code {
+  display: block;
+  margin: 0;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-break: anywhere;
+  word-break: break-all;
+}
+
+.copyButton {
+  position: absolute;
+  top: var(--spacing-xs);
+  right: var(--spacing-xs);
+  z-index: 2;
+
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+.container:hover .copyButton,
+.container:focus-within .copyButton {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.copyButton button {
+  pointer-events: auto;
+}

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

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

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

@@ -0,0 +1,22 @@
+'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';
+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] }));
+}

package/dist/components/copy-button/CopyButton.module.css

@@ -0,0 +1,6 @@
+.copied > button {
+  background-color: var(--color-status-success-bg);
+  border-color: var(--color-status-success-border);
+  color: var(--color-status-success);
+  transition: all ease-in 0.1s;
+}

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

@@ -0,0 +1,42 @@
+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;
+    onChange: (next: DateValue) => void;
+    enableTime?: boolean;
+    timeStep?: number;
+    min?: Date;
+    max?: Date;
+    locale?: string;
+    weekStartsOn?: WeekStart;
+    presets?: {
+        label: string;
+        getRange: () => {
+            start: Date;
+            end: Date;
+        };
+    }[];
+    /**
+     * 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;
+    }) => string;
+    formatRange?: (s: Date | null, e: Date | null, opts: {
+        locale: string;
+        enableTime: boolean;
+    }) => string;
+}
+export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLDivElement>>;
+export {};