@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/avatar/Avatar.cjs

@@ -1,101 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var styles = require('./Avatar.module.css');
-var sizes = require('../../constants/sizes');
-var severity = require('../../constants/severity');
-
-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 Avatar({
-  image,
-  imgSrc,
-  imgAlt,
-  fullName,
-  color = "brand",
-  button,
-  size = "md",
-  className,
-  fullWidth = false,
-  photographerCredit,
-  ...rest
-}) {
-  const text = fullName ? fullName.trim().split(/\s+/).map((name) => name.charAt(0)).join("").toUpperCase() : "";
-  const styleVars = {
-    "--bg": severity.SeverityBgColor[color],
-    "--text": severity.SeverityTextColor[color],
-    "--size": fullWidth ? "100%" : sizes.sizes[size]
-  };
-  const pathId = React__namespace.useId();
-  const renderImage = () => {
-    if (image) {
-      if (React__namespace.isValidElement(image)) {
-        const mergedClass = [image.props.className, styles__default.default.image].filter(Boolean).join(" ");
-        return React__namespace.cloneElement(image, { className: mergedClass });
-      }
-      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.imageSlot, children: image });
-    }
-    if (imgSrc) {
-      return /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles__default.default.image, src: imgSrc, alt: imgAlt });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.avatar, "aria-hidden": "true", children: text });
-  };
-  if (button) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        ...rest,
-        className: [styles__default.default.container, styles__default.default.button, className].filter(Boolean).join(" "),
-        style: styleVars,
-        children: renderImage()
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [styles__default.default.wrapper, className].filter(Boolean).join(" "), style: styleVars, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, children: renderImage() }),
-    photographerCredit && /* @__PURE__ */ jsxRuntime.jsxs(
-      "svg",
-      {
-        className: styles__default.default.creditText,
-        viewBox: "0 0 100 100",
-        "aria-hidden": "true",
-        focusable: "false",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              id: pathId,
-              d: "\n                M 50, 50\n                m -42, 0\n                a 42,42 0 1,1 84,0\n                a 42,42 0 1,1 -84,0\n              "
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("text", { children: /* @__PURE__ */ jsxRuntime.jsx("textPath", { xlinkHref: `#${pathId}`, startOffset: "50%", textAnchor: "middle", children: photographerCredit }) })
-        ]
-      }
-    )
-  ] });
-}
-
-exports.Avatar = Avatar;

package/dist/components/breadcrumbs/Breadcrumbs.cjs

@@ -1,22 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./Breadcrumbs.module.css');
-var React = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-function Breadcrumbs({ items }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: styles__default.default.breadcrumbs, "aria-label": "breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-      item.icon && item.icon,
-      item.onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
-    ] }),
-    index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, children: "/" })
-  ] }, `breadcrumbItem-${item.label}-${index}`)) }) });
-}
-
-exports.Breadcrumbs = Breadcrumbs;

package/dist/components/button/Button.cjs

@@ -1,87 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var styles = require('./Button.module.css');
-var lucideReact = require('lucide-react');
-var Tooltip = require('../tooltip/Tooltip');
-
-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 cx(...parts) {
-  return parts.filter(Boolean).join(" ");
-}
-const Button = React__namespace.forwardRef(function Button2({
-  variant = "outlined",
-  size = "md",
-  fullWidth,
-  icon,
-  children,
-  loading,
-  active,
-  spinIcon,
-  tooltip,
-  isLink,
-  ...rest
-}, ref) {
-  const { className: userClassName, ...buttonProps } = rest;
-  const computedClassName = cx(
-    styles__default.default.button,
-    styles__default.default[variant],
-    styles__default.default[size],
-    fullWidth ? styles__default.default.fullWidth : "",
-    active ? styles__default.default.active : "",
-    loading ? styles__default.default.loading : "",
-    isLink ? styles__default.default.link : "",
-    userClassName
-  );
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(styles__default.default.icon, spinIcon ? "spin" : ""), children: icon }),
-    children,
-    loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
-  ] });
-  let buttonEl;
-  if (isLink && React__namespace.isValidElement(children)) {
-    const childClassName = typeof children.props.className === "string" ? children.props.className : "";
-    buttonEl = React__namespace.cloneElement(children, {
-      ...buttonProps,
-      ref,
-      className: cx(childClassName, computedClassName),
-      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(styles__default.default.icon, spinIcon ? "spin" : ""), children: icon }),
-        children.props.children,
-        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, {}) })
-      ] })
-    });
-  } else {
-    buttonEl = /* @__PURE__ */ jsxRuntime.jsx("button", { ref, className: computedClassName, ...buttonProps, children: content });
-  }
-  if (tooltip) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, children: buttonEl });
-  }
-  return buttonEl;
-});
-Button.displayName = "Button";
-
-exports.Button = Button;

package/dist/components/card/Card.cjs

@@ -1,69 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Headline = require('../headline/Headline');
-var styles = require('./Card.module.css');
-var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
-var Link = require('../link/Link');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-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__default.default.innerImgTop : imgPlacement === "right" ? styles__default.default.innerImgRight : styles__default.default.innerImgLeft;
-  const inner = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.inner} ${innerPlacementClass}`, children: [
-    image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.media, style: mediaStyle, children: image }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.content, children: [
-      (title || headerMeta) && /* @__PURE__ */ jsxRuntime.jsxs("header", { className: styles__default.default.header, children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx(
-          Headline.Headline,
-          {
-            severity,
-            marker: headerMarker,
-            icon: headerIcon,
-            size: 4,
-            weight: 500,
-            disableMargin: true,
-            children: title
-          }
-        ),
-        headerMeta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerMeta, children: headerMeta })
-      ] }),
-      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingList, children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.loadingRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { width: "100%" })
-      ] }, index)) }),
-      !loading && (showSectionDivider || sectionTitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.section, children: [
-        showSectionDivider && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionDivider }),
-        sectionTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionTitle, children: sectionTitle })
-      ] }),
-      !loading && children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.body, children }),
-      !loading && actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.actions, children: actions })
-    ] })
-  ] });
-  const cardWithLink = link ? /* @__PURE__ */ jsxRuntime.jsx(Link.Link, { component: link }) : inner;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles__default.default.outerContainer} ${styles__default.default[size]}`, style: outerContainerStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: [styles__default.default.container, styles__default.default[variant]].filter(Boolean).join(" "), children: cardWithLink }) });
-}
-
-exports.Card = Card;

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

@@ -1,24 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Headline = require('@/components/headline/Headline');
-var styles = require('./CardContainer.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function CardContainer({
-  children,
-  headline,
-  expand,
-  severity,
-  displayHeaderMarker
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.wrapper, children: [
-    headline && /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { marker: displayHeaderMarker, severity, children: headline }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.container, style: { ["--expand"]: expand ? "1" : "0" }, children })
-  ] });
-}
-
-exports.CardContainer = CardContainer;

package/dist/components/checkbox/Checkbox.cjs

@@ -1,42 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var lucideReact = require('lucide-react');
-var styles = require('./Checkbox.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Checkbox({
-  checked: controlled,
-  onChange,
-  variant = "outlined",
-  disabled,
-  label,
-  size = "md"
-}) {
-  const [internal, setInternal] = react.useState(false);
-  const isChecked = controlled != null ? controlled : internal;
-  const toggle = (e) => {
-    const value = !isChecked;
-    setInternal(value);
-    onChange == null ? void 0 : onChange(value, e);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { role: "button", className: styles__default.default.container, onClick: toggle, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        disabled,
-        type: "button",
-        "aria-pressed": isChecked,
-        className: `${styles__default.default.checkbox} ${isChecked ? styles__default.default.checked : ""} ${styles__default.default[variant]} ${styles__default.default[size]}`,
-        children: isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: styles__default.default.icon })
-      }
-    ),
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: label })
-  ] });
-}
-
-exports.Checkbox = Checkbox;

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,12 +0,0 @@
-type Variant = 'default' | 'primary' | 'outlined';
-type Size = 'sm' | 'md' | 'lg';
-interface CheckboxProps {
-    checked?: boolean;
-    onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
-    variant?: Variant;
-    disabled?: boolean;
-    label?: string;
-    size?: Size;
-}
-export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, size, }: CheckboxProps): JSX.Element;
-export {};

package/dist/components/checkbox/Checkbox.js

@@ -1,36 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
-import { Check } from 'lucide-react';
-import styles from './Checkbox.module.css';
-
-function Checkbox({
-  checked: controlled,
-  onChange,
-  variant = "outlined",
-  disabled,
-  label,
-  size = "md"
-}) {
-  const [internal, setInternal] = useState(false);
-  const isChecked = controlled != null ? controlled : internal;
-  const toggle = (e) => {
-    const value = !isChecked;
-    setInternal(value);
-    onChange == null ? void 0 : onChange(value, e);
-  };
-  return /* @__PURE__ */ jsxs("span", { role: "button", className: styles.container, onClick: toggle, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        disabled,
-        type: "button",
-        "aria-pressed": isChecked,
-        className: `${styles.checkbox} ${isChecked ? styles.checked : ""} ${styles[variant]} ${styles[size]}`,
-        children: isChecked && /* @__PURE__ */ jsx(Check, { className: styles.icon })
-      }
-    ),
-    label && /* @__PURE__ */ jsx("span", { className: styles.label, children: label })
-  ] });
-}
-
-export { Checkbox };

package/dist/components/chip/Chip.cjs

@@ -1,50 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./Chip.module.css');
-var Icon = require('../icon/Icon');
-var lucideReact = require('lucide-react');
-var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Chip({
-  children,
-  severity = "neutral",
-  loading,
-  disableIcon = true,
-  fullWidth = false,
-  size = "md",
-  customIcon,
-  type = "rounded",
-  onClose
-}) {
-  const [chipWidth, setChipWidth] = react.useState(void 0);
-  const chipRef = react.useRef(null);
-  react.useEffect(() => {
-    if (chipRef.current) {
-      setChipWidth(`${chipRef.current.offsetWidth}px`);
-    }
-  }, [loading]);
-  if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { width: chipWidth != null ? chipWidth : "100px", height: "26px", radius: "25px" });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: chipRef,
-      className: `${styles__default.default.container} ${styles__default.default[severity]} ${fullWidth ? styles__default.default.fullWidth : ""} ${styles__default.default[size]} ${styles__default.default[type]}`,
-      children: [
-        severity && !disableIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { severity }),
-        customIcon,
-        children,
-        onClose && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, className: styles__default.default.close, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
-      ]
-    }
-  );
-}
-
-exports.Chip = Chip;

package/dist/components/circle/Circle.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./Circle.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Circle({ severity, children, glow }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-glow": glow, className: `${styles__default.default.circle} ${styles__default.default[severity]}` }),
-    children,
-    " "
-  ] });
-}
-
-exports.Circle = Circle;

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

@@ -1,26 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var styles = require('./ClearButton.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function ClearButton({ onClick, absolute }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.clearButton} ${absolute ? styles__default.default.absolute : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: styles__default.default.button,
-      role: "button",
-      onClick: (e) => {
-        e.stopPropagation();
-        onClick();
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
-    }
-  ) });
-}
-
-exports.ClearButton = ClearButton;

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

@@ -1,18 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var CopyButton = require('../copy-button/CopyButton');
-var styles = require('./CodeBlock.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function CodeBlock({ code, copyButton, size = "md" }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("pre", { className: `${styles__default.default.container} ${styles__default.default[size]}`, children: [
-    copyButton && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.copyButton, children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton.CopyButton, { text: code }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("code", { className: styles__default.default.code, children: code })
-  ] });
-}
-
-exports.CodeBlock = CodeBlock;

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

@@ -1,35 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var Button = require('../button/Button');
-var lucideReact = require('lucide-react');
-var styles = require('./CopyButton.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function CopyButton({
-  text,
-  variant = "outlined",
-  size = "sm",
-  children
-}) {
-  const [copied, setCopied] = react.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__ */ jsxRuntime.jsxs(Button.Button, { "aria-label": "Copy to clipboard", onClick: handleCopy, variant, size, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.container} ${copied ? styles__default.default.copied : ""}`, children: copied ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, {}) }),
-    children
-  ] });
-}
-
-exports.CopyButton = CopyButton;