@dbcdk/react-components 0.0.102 → 0.0.104

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

@@ -0,0 +1,91 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { TextWrap } from 'lucide-react';
+import { useState, useMemo, isValidElement } from 'react';
+import styles from './CodeBlock.module.css';
+import { Button } from '../button/Button';
+import { CopyButton } from '../copy-button/CopyButton';
+
+const looksLikeStackFrame = (line) => {
+  const t = line.trim();
+  return t.startsWith("at ") || // Java, JS
+  t.startsWith("...") || t.startsWith("Caused by:") || t.startsWith("Suppressed:") || t.startsWith("Traceback") || // Python header
+  t.startsWith("File ") || // Python
+  t.startsWith("\u21B3") || // some tools
+  /^at\s+\w/.test(t);
+};
+function getTextContent(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(getTextContent).join("");
+  if (isValidElement(node)) return getTextContent(node.props.children);
+  return "";
+}
+function CodeBlock({
+  code,
+  children,
+  copyButton,
+  copyText,
+  size = "md",
+  smart = true,
+  wrap = true
+}) {
+  const text = typeof code === "string" ? code : void 0;
+  const hasChildren = children !== void 0 && children !== null;
+  const [isWrapped, setIsWrapped] = useState(wrap);
+  const copy = useMemo(
+    () => {
+      var _a;
+      return (_a = copyText != null ? copyText : text) != null ? _a : getTextContent(children);
+    },
+    [copyText, text, children]
+  );
+  const lines = useMemo(
+    () => smart && !hasChildren && typeof text === "string" ? text.split("\n") : null,
+    [smart, hasChildren, text]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [
+        styles.wrapper,
+        styles[size],
+        isWrapped ? styles.wrap : styles.noWrap,
+        copyButton ? styles.hasActions : ""
+      ].filter(Boolean).join(" "),
+      children: [
+        copyButton && /* @__PURE__ */ jsxs("span", { className: styles.actions, "aria-hidden": false, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "inline",
+              size: "sm",
+              shape: "round",
+              onClick: () => setIsWrapped((v) => !v),
+              "aria-pressed": isWrapped,
+              active: isWrapped,
+              title: isWrapped ? "Ombryd ikke tekst" : "Ombryd tekst",
+              children: /* @__PURE__ */ jsx(TextWrap, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx(CopyButton, { size: "sm", shape: "round", variant: "inline", text: copy })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: styles.container, tabIndex: 0, children: /* @__PURE__ */ jsx("code", { className: styles.code, children: hasChildren ? children : lines ? lines.map((line, i) => {
+          const isFirst = i === 0;
+          const isFrame = looksLikeStackFrame(line);
+          const cls = [
+            styles.line,
+            isFirst ? styles.lineFirst : "",
+            isFrame ? styles.lineFrame : ""
+          ].filter(Boolean).join(" ");
+          return /* @__PURE__ */ jsxs("span", { className: cls, children: [
+            line,
+            "\n"
+          ] }, i);
+        }) : text }) })
+      ]
+    }
+  );
+}
+
+export { CodeBlock };

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

@@ -0,0 +1,124 @@
+.wrapper {
+  position: relative;
+  display: inline-block;
+  max-inline-size: 100%;
+  --code-actions-h: var(--component-size-sm);
+  --code-actions-inset: var(--spacing-xs);
+}
+
+/* <pre> */
+.container {
+  position: relative;
+  margin-block: 0;
+  background: var(--color-bg-surface-strong);
+  border: var(--border-width-thin) solid var(--color-border-subtle);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--shadow-xs);
+  padding: var(--spacing-sm);
+  font-family: var(--font-family-mono);
+  line-height: 1.35;
+  overflow: auto;
+  scrollbar-gutter: stable;
+  display: inline-flex;
+  align-items: flex-start;
+  max-inline-size: 100%;
+}
+
+/* Sizes */
+.sm .container {
+  padding: var(--spacing-xs);
+}
+
+.sm .code {
+  font-size: var(--font-size-xs);
+}
+
+.md .code {
+  font-size: var(--font-size-sm);
+}
+
+.lg .code {
+  font-size: var(--font-size-base);
+}
+
+.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
+}
+
+.sm.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-xs) + var(--spacing-xs));
+}
+
+.md.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
+}
+
+.lg.hasActions .container {
+  min-block-size: calc(var(--code-actions-h) + var(--spacing-sm) + var(--spacing-sm));
+}
+
+/* Focus ring */
+.wrapper:focus-within .container {
+  border-color: var(--color-border-selected);
+  box-shadow: var(--shadow-xs), var(--focus-ring);
+}
+
+/* <code> */
+.code {
+  display: block;
+  margin: 0;
+  font-family: var(--font-family-mono);
+  color: var(--color-fg-default);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* Wrapping modes */
+.wrap .code {
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: normal;
+}
+
+.noWrap .code {
+  white-space: pre;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.actions {
+  position: absolute;
+  top: var(--code-actions-inset);
+  right: var(--code-actions-inset);
+  z-index: 3;
+  display: inline-flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+  padding: var(--spacing-2xs);
+  border-radius: var(--border-radius-lg);
+  background: color-mix(in oklab, var(--color-bg-surface) 70%, transparent);
+  backdrop-filter: blur(6px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition-fast) var(--ease-standard);
+}
+
+.wrapper:hover .actions,
+.wrapper:focus-within .actions {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.line {
+  display: inline;
+}
+
+.lineFirst {
+  font-family: inherit;
+  font-weight: 500;
+  color: var(--color-fg-default);
+}
+
+.lineFrame {
+  color: var(--color-fg-subtle);
+}

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

@@ -0,0 +1,139 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var styles = require('./CopyButton.module.css');
+var Button = require('../button/Button');
+var Input = require('../forms/input/Input');
+var Hyperlink = require('../hyperlink/Hyperlink');
+var ToastProvider = require('../toast/provider/ToastProvider');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function CopyButton(props) {
+  var _a, _b, _c;
+  const {
+    text,
+    variant = "outlined",
+    size = "sm",
+    children,
+    displayStyle,
+    disableIcon = false,
+    disableToast = false,
+    className,
+    style,
+    fullWidth,
+    disabled,
+    ...rest
+  } = props;
+  const [copied, setCopied] = react.useState(false);
+  const toast = ToastProvider.useOptionalToast();
+  const buttonLabel = children;
+  const icon = disableIcon ? null : copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, {});
+  const handleCopySuccess = () => {
+    if (!disableIcon) {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1e3);
+      return;
+    }
+    if (!disableToast) {
+      toast == null ? void 0 : toast.showToast({
+        severity: "neutral",
+        message: "Kopieret"
+      });
+    }
+  };
+  const handleCopy = async () => {
+    try {
+      if (!window.isSecureContext || !navigator.clipboard) {
+        throw new Error("Clipboard API unavailable");
+      }
+      await navigator.clipboard.writeText(text);
+      handleCopySuccess();
+    } catch (err) {
+      console.error("Failed to copy:", err);
+      try {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.setAttribute("readonly", "");
+        textarea.style.position = "fixed";
+        textarea.style.left = "-9999px";
+        document.body.appendChild(textarea);
+        textarea.select();
+        const success = document.execCommand("copy");
+        document.body.removeChild(textarea);
+        if (success) {
+          handleCopySuccess();
+        }
+      } catch (fallbackErr) {
+        console.error("Fallback copy failed:", fallbackErr);
+      }
+    }
+  };
+  if (displayStyle === "link") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Hyperlink.Hyperlink, { asChild: true, variant: "primary", icon, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": children ? "" : (_a = rest["aria-label"]) != null ? _a : "Kopier til udklipsholder",
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          handleCopy();
+        },
+        className: [styles__default.default.link, copied ? styles__default.default.copied : "", className != null ? className : ""].filter(Boolean).join(" "),
+        style,
+        disabled,
+        children: buttonLabel
+      }
+    ) });
+  }
+  if (displayStyle === "field") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Input.Input,
+      {
+        value: text,
+        readOnly: true,
+        disabled,
+        fullWidth,
+        className,
+        style,
+        inputSize: size,
+        variant: "outlined",
+        buttonLabel: typeof buttonLabel === "string" ? buttonLabel : void 0,
+        buttonIcon: icon,
+        onButtonClick: () => {
+          void handleCopy();
+        },
+        "aria-label": (_b = rest["aria-label"]) != null ? _b : "Kopier til udklipsholder"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Button.Button,
+    {
+      ...rest,
+      "aria-label": children ? "" : (_c = rest["aria-label"]) != null ? _c : "Kopier til udklipsholder",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleCopy();
+      },
+      variant,
+      size,
+      className,
+      style,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.container} ${copied ? styles__default.default.copied : ""}`, children: icon }),
+        buttonLabel
+      ]
+    }
+  );
+}
+
+exports.CopyButton = CopyButton;

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

@@ -0,0 +1,133 @@
+'use client';
+import { jsx, 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';
+import { Input } from '../forms/input/Input';
+import { Hyperlink } from '../hyperlink/Hyperlink';
+import { useOptionalToast } from '../toast/provider/ToastProvider';
+
+function CopyButton(props) {
+  var _a, _b, _c;
+  const {
+    text,
+    variant = "outlined",
+    size = "sm",
+    children,
+    displayStyle,
+    disableIcon = false,
+    disableToast = false,
+    className,
+    style,
+    fullWidth,
+    disabled,
+    ...rest
+  } = props;
+  const [copied, setCopied] = useState(false);
+  const toast = useOptionalToast();
+  const buttonLabel = children;
+  const icon = disableIcon ? null : copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {});
+  const handleCopySuccess = () => {
+    if (!disableIcon) {
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1e3);
+      return;
+    }
+    if (!disableToast) {
+      toast == null ? void 0 : toast.showToast({
+        severity: "neutral",
+        message: "Kopieret"
+      });
+    }
+  };
+  const handleCopy = async () => {
+    try {
+      if (!window.isSecureContext || !navigator.clipboard) {
+        throw new Error("Clipboard API unavailable");
+      }
+      await navigator.clipboard.writeText(text);
+      handleCopySuccess();
+    } catch (err) {
+      console.error("Failed to copy:", err);
+      try {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.setAttribute("readonly", "");
+        textarea.style.position = "fixed";
+        textarea.style.left = "-9999px";
+        document.body.appendChild(textarea);
+        textarea.select();
+        const success = document.execCommand("copy");
+        document.body.removeChild(textarea);
+        if (success) {
+          handleCopySuccess();
+        }
+      } catch (fallbackErr) {
+        console.error("Fallback copy failed:", fallbackErr);
+      }
+    }
+  };
+  if (displayStyle === "link") {
+    return /* @__PURE__ */ jsx(Hyperlink, { asChild: true, variant: "primary", icon, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": children ? "" : (_a = rest["aria-label"]) != null ? _a : "Kopier til udklipsholder",
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          handleCopy();
+        },
+        className: [styles.link, copied ? styles.copied : "", className != null ? className : ""].filter(Boolean).join(" "),
+        style,
+        disabled,
+        children: buttonLabel
+      }
+    ) });
+  }
+  if (displayStyle === "field") {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: text,
+        readOnly: true,
+        disabled,
+        fullWidth,
+        className,
+        style,
+        inputSize: size,
+        variant: "outlined",
+        buttonLabel: typeof buttonLabel === "string" ? buttonLabel : void 0,
+        buttonIcon: icon,
+        onButtonClick: () => {
+          void handleCopy();
+        },
+        "aria-label": (_b = rest["aria-label"]) != null ? _b : "Kopier til udklipsholder"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ...rest,
+      "aria-label": children ? "" : (_c = rest["aria-label"]) != null ? _c : "Kopier til udklipsholder",
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        handleCopy();
+      },
+      variant,
+      size,
+      className,
+      style,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: `${styles.container} ${copied ? styles.copied : ""}`, children: icon }),
+        buttonLabel
+      ]
+    }
+  );
+}
+
+export { CopyButton };

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

@@ -0,0 +1,22 @@
+.container,
+.link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  background-color: unset;
+}
+
+.link {
+  appearance: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.copied {
+  color: var(--color-status-success);
+  transition: color ease-in 0.1s;
+}