@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/headline/Headline.cjs

@@ -1,53 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./Headline.module.css');
-var severity = require('../../constants/severity');
-var Icon = require('../icon/Icon');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Headline({
-  size = 2,
-  marker,
-  disableMargin,
-  children,
-  severity: severity$1,
-  weight = 600,
-  subHeadline,
-  addition,
-  icon,
-  tone
-}) {
-  const Tag = `h${size}`;
-  const containerClassName = [styles__default.default.headlineContainer, tone ? styles__default.default[`tone-${tone}`] : ""].filter(Boolean).join(" ");
-  const headlineClassName = [
-    styles__default.default.headline,
-    disableMargin ? styles__default.default.noMargin : "",
-    marker ? styles__default.default.marker : ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Tag,
-        {
-          style: {
-            "--font-weight": weight,
-            "--marker-color": severity$1 ? severity.SeverityBgColor[severity$1] : void 0
-          },
-          className: headlineClassName,
-          children: [
-            icon || severity$1 && !marker ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: icon, severity: severity$1 }) : null,
-            children
-          ]
-        }
-      ),
-      addition
-    ] }),
-    subHeadline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.subHeadline, children: subHeadline })
-  ] });
-}
-
-exports.Headline = Headline;

package/dist/components/icon/Icon.cjs

@@ -1,27 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var styles = require('./Icon.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const SeverityIcon = {
-  neutral: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
-  success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
-  error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, {}),
-  info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
-  warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, {}),
-  brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {})
-};
-function Icon({ severity, label, customIcon }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.icon} ${severity ? styles__default.default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
-  ] });
-}
-
-exports.Icon = Icon;
-exports.SeverityIcon = SeverityIcon;

package/dist/components/input/Input.cjs

@@ -1,89 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('../input/Input.module.css');
-var ClearButton = require('../clear-button/ClearButton');
-var Button = require('../button/Button');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") ref(node);
-      else ref.current = node;
-    }
-  };
-}
-const Input = react.forwardRef(function Input2({
-  label,
-  icon,
-  minWidth,
-  width,
-  fullWidth,
-  inputSize = "md",
-  variant = "outlined",
-  autoFocus,
-  onClear,
-  onButtonClick,
-  buttonLabel,
-  buttonIcon,
-  style,
-  ...rest
-}, ref) {
-  const inputRef = react.useRef(null);
-  react.useEffect(() => {
-    var _a;
-    if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
-  }, [autoFocus]);
-  const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
-  const rootStyle = {
-    ...style != null ? style : {},
-    ...minWidth ? { ["--input-min-width"]: minWidth } : null,
-    ...width ? { ["--input-width"]: width } : null
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: rootStyle,
-      className: [
-        styles__default.default.container,
-        fullWidth ? styles__default.default.fullWidth : "",
-        onClear ? styles__default.default.withClear : "",
-        hasButton ? styles__default.default.withButton : ""
-      ].filter(Boolean).join(" "),
-      children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: label, children: label }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.field, children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              id: label,
-              ...rest,
-              ref: mergeRefs(inputRef, ref),
-              className: [
-                styles__default.default.input,
-                icon ? styles__default.default.inputWithIcon : "",
-                inputSize ? styles__default.default[inputSize] : "",
-                styles__default.default[variant]
-              ].filter(Boolean).join(" ")
-            }
-          ),
-          onClear && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear, absolute: true })
-        ] }),
-        hasButton && /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { onClick: onButtonClick, className: styles__default.default.trailingButton, children: [
-          buttonIcon != null ? buttonIcon : null,
-          buttonLabel != null ? buttonLabel : null
-        ] })
-      ]
-    }
-  );
-});
-Input.displayName = "Input";
-
-exports.Input = Input;

package/dist/components/input/Input.js

@@ -1,83 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useEffect } from 'react';
-import styles from '../input/Input.module.css';
-import { ClearButton } from '../clear-button/ClearButton';
-import { Button } from '../button/Button';
-
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") ref(node);
-      else ref.current = node;
-    }
-  };
-}
-const Input = forwardRef(function Input2({
-  label,
-  icon,
-  minWidth,
-  width,
-  fullWidth,
-  inputSize = "md",
-  variant = "outlined",
-  autoFocus,
-  onClear,
-  onButtonClick,
-  buttonLabel,
-  buttonIcon,
-  style,
-  ...rest
-}, ref) {
-  const inputRef = useRef(null);
-  useEffect(() => {
-    var _a;
-    if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
-  }, [autoFocus]);
-  const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
-  const rootStyle = {
-    ...style != null ? style : {},
-    ...minWidth ? { ["--input-min-width"]: minWidth } : null,
-    ...width ? { ["--input-width"]: width } : null
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: rootStyle,
-      className: [
-        styles.container,
-        fullWidth ? styles.fullWidth : "",
-        onClear ? styles.withClear : "",
-        hasButton ? styles.withButton : ""
-      ].filter(Boolean).join(" "),
-      children: [
-        label && /* @__PURE__ */ jsx("label", { htmlFor: label, children: label }),
-        /* @__PURE__ */ jsxs("div", { className: styles.field, children: [
-          icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              id: label,
-              ...rest,
-              ref: mergeRefs(inputRef, ref),
-              className: [
-                styles.input,
-                icon ? styles.inputWithIcon : "",
-                inputSize ? styles[inputSize] : "",
-                styles[variant]
-              ].filter(Boolean).join(" ")
-            }
-          ),
-          onClear && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear, absolute: true })
-        ] }),
-        hasButton && /* @__PURE__ */ jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, children: [
-          buttonIcon != null ? buttonIcon : null,
-          buttonLabel != null ? buttonLabel : null
-        ] })
-      ]
-    }
-  );
-});
-Input.displayName = "Input";
-
-export { Input };

package/dist/components/link/Link.cjs

@@ -1,46 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var styles = require('./Link.module.css');
-var lucideReact = require('lucide-react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Link({ component, icon, disableIcon }) {
-  const originalProps = component.props;
-  return React__namespace.cloneElement(
-    component,
-    {
-      ...originalProps,
-      className: styles__default.default.link
-    },
-    /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.content, children: originalProps.children }),
-      icon || !disableIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, {}) })
-    ] })
-  );
-}
-
-exports.Link = Link;

package/dist/components/link/Link.js

@@ -1,21 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import styles from './Link.module.css';
-import { ArrowRight } from 'lucide-react';
-
-function Link({ component, icon, disableIcon }) {
-  const originalProps = component.props;
-  return React.cloneElement(
-    component,
-    {
-      ...originalProps,
-      className: styles.link
-    },
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { className: styles.content, children: originalProps.children }),
-      icon || !disableIcon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon != null ? icon : /* @__PURE__ */ jsx(ArrowRight, {}) })
-    ] })
-  );
-}
-
-export { Link };

package/dist/components/menu/Menu.cjs

@@ -1,96 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var styles = require('./Menu.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const MenuBase = React__namespace.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "ul",
-    {
-      ref,
-      role: "menu",
-      className: [styles__default.default.container, className].filter(Boolean).join(" "),
-      ...props,
-      children
-    }
-  )
-);
-MenuBase.displayName = "Menu";
-const isInteractiveEl = (el) => React__namespace.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
-const MenuItem = React__namespace.forwardRef(
-  ({ children, active, disabled, className, ...liProps }, ref) => {
-    if (isInteractiveEl(children)) {
-      const child = children;
-      const childClass = [styles__default.default.item, active ? styles__default.default.active : ""].filter(Boolean).join(" ");
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "li",
-        {
-          ref,
-          role: "none",
-          className: [styles__default.default.row, className].filter(Boolean).join(" "),
-          ...liProps,
-          children: React__namespace.cloneElement(child, {
-            role: "menuitem",
-            tabIndex: -1,
-            "aria-selected": active || void 0,
-            "aria-disabled": disabled || void 0,
-            className: [child.props.className, styles__default.default.interactive, childClass].filter(Boolean).join(" ")
-          })
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "li",
-      {
-        ref,
-        role: "none",
-        className: [styles__default.default.row, className].filter(Boolean).join(" "),
-        ...liProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            role: "menuitem",
-            tabIndex: -1,
-            "aria-selected": active || void 0,
-            "aria-disabled": disabled || void 0,
-            className: [styles__default.default.interactive, styles__default.default.item, active ? styles__default.default.active : ""].filter(Boolean).join(" "),
-            type: "button",
-            disabled,
-            children
-          }
-        )
-      }
-    );
-  }
-);
-MenuItem.displayName = "Menu.Item";
-const Menu = Object.assign(
-  MenuBase,
-  { Item: MenuItem }
-);
-
-exports.Menu = Menu;

package/dist/components/meta-bar/MetaBar.cjs

@@ -1,29 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var styles = require('./MetaBar.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function MetaBar({ items, separator = "\u2022" }) {
-  const visibleItems = items.filter(
-    (item) => item.value !== null && item.value !== void 0 && item.value !== ""
-  );
-  if (visibleItems.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.meta, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      item.label && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        item.label,
-        ": "
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.value })
-    ] }),
-    index < visibleItems.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: styles__default.default.dot, children: separator })
-  ] }, index)) });
-}
-
-exports.MetaBar = MetaBar;

package/dist/components/modal/Modal.cjs

@@ -1,134 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./Modal.module.css');
-var Headline = require('../headline/Headline');
-var Button = require('../button/Button');
-var lucideReact = require('lucide-react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Modal({
-  isOpen,
-  onRequestClose,
-  header,
-  content,
-  primaryAction,
-  secondaryAction,
-  closeOnOverlayClick = true,
-  severity,
-  disableContentSpacing = false,
-  isLoading
-}) {
-  const titleId = react.useId();
-  const dialogRef = react.useRef(null);
-  const lastActiveElementRef = react.useRef(null);
-  react.useEffect(() => {
-    if (!isOpen) return;
-    lastActiveElementRef.current = document.activeElement;
-    const dialog = dialogRef.current;
-    if (dialog) {
-      const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-      const focusable = dialog.querySelectorAll(focusableSelectors);
-      if (focusable.length > 0) {
-        focusable[0].focus();
-      } else {
-        dialog.focus();
-      }
-    }
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        onRequestClose();
-        return;
-      }
-      if (event.key === "Tab" && dialogRef.current) {
-        const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-        const focusable = dialogRef.current.querySelectorAll(focusableSelectors);
-        if (focusable.length === 0) return;
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        if (event.shiftKey) {
-          if (document.activeElement === first) {
-            event.preventDefault();
-            last.focus();
-          }
-        } else {
-          if (document.activeElement === last) {
-            event.preventDefault();
-            first.focus();
-          }
-        }
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      if (lastActiveElementRef.current) {
-        lastActiveElementRef.current.focus();
-      }
-    };
-  }, [isOpen, onRequestClose]);
-  if (!isOpen) return null;
-  const handleOverlayClick = () => {
-    if (closeOnOverlayClick) {
-      onRequestClose();
-    }
-  };
-  const stopPropagation = (e) => {
-    e.stopPropagation();
-  };
-  const resolvedSecondaryAction = secondaryAction != null ? secondaryAction : primaryAction ? { label: "Luk", onClick: onRequestClose } : void 0;
-  const shouldRenderFooter = Boolean(primaryAction || resolvedSecondaryAction);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.overlay, onClick: handleOverlayClick, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: dialogRef,
-      className: `${styles__default.default.modal} ${disableContentSpacing ? "" : styles__default.default.contentSpacing}`,
-      onClick: stopPropagation,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": header ? titleId : void 0,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.header, children: [
-          header && /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { severity, size: 3, disableMargin: true, children: header }),
-          /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { type: "button", variant: "inline", onClick: onRequestClose, "aria-label": "Luk", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children: content }),
-        shouldRenderFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.footer, children: [
-          resolvedSecondaryAction && /* @__PURE__ */ jsxRuntime.jsxs(
-            Button.Button,
-            {
-              type: "button",
-              variant: "outlined",
-              onClick: resolvedSecondaryAction.onClick,
-              disabled: isLoading,
-              children: [
-                resolvedSecondaryAction.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: resolvedSecondaryAction.icon }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: resolvedSecondaryAction.label })
-              ]
-            }
-          ),
-          primaryAction && /* @__PURE__ */ jsxRuntime.jsxs(
-            Button.Button,
-            {
-              type: "button",
-              variant: "primary",
-              onClick: primaryAction.onClick,
-              disabled: primaryAction.disabled || isLoading,
-              loading: isLoading,
-              children: [
-                primaryAction.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: primaryAction.icon }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: primaryAction.label })
-              ]
-            }
-          )
-        ] })
-      ]
-    }
-  ) });
-}
-
-exports.Modal = Modal;