@dbcdk/react-components 0.0.103 → 0.0.105

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import styles from './Avatar.module.css';
+import { SeverityTextColor, SeverityBgColor } from '../../constants/severity';
+import { sizes } from '../../constants/sizes';
+
+function Avatar({
+  image,
+  imgSrc,
+  imgAlt,
+  fullName,
+  color = "brand",
+  button,
+  size = "md",
+  className,
+  fullWidth = false,
+  photographerCredit,
+  ...rest
+}) {
+  const text = (() => {
+    if (!fullName) return "";
+    const parts = fullName.trim().split(/\s+/);
+    if (parts.length === 1) {
+      return parts[0].charAt(0).toUpperCase();
+    }
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+  })();
+  const styleVars = {
+    "--bg": SeverityBgColor[color],
+    "--text": SeverityTextColor[color],
+    "--size": fullWidth ? "100%" : sizes[size]
+  };
+  const pathId = React.useId();
+  const renderImage = () => {
+    if (image) {
+      if (React.isValidElement(image)) {
+        const mergedClass = [image.props.className, styles.image].filter(Boolean).join(" ");
+        return React.cloneElement(image, { className: mergedClass });
+      }
+      return /* @__PURE__ */ jsx("span", { className: styles.imageSlot, children: image });
+    }
+    if (imgSrc) {
+      return /* @__PURE__ */ jsx("img", { className: styles.image, src: imgSrc, alt: imgAlt });
+    }
+    const avatarSizeClass = [styles.avatar];
+    if (size === "xs") avatarSizeClass.push(styles["size-xs"]);
+    if (size === "sm") avatarSizeClass.push(styles["size-sm"]);
+    return /* @__PURE__ */ jsx("span", { className: avatarSizeClass.join(" "), "aria-hidden": "true", children: text });
+  };
+  if (button) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...rest,
+        className: [styles.container, styles.button, className].filter(Boolean).join(" "),
+        style: styleVars,
+        children: renderImage()
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: [styles.wrapper, className].filter(Boolean).join(" "), style: styleVars, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.container, children: renderImage() }),
+    photographerCredit && /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: styles.creditText,
+        viewBox: "0 0 100 100",
+        "aria-hidden": "true",
+        focusable: "false",
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ 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__ */ jsx("text", { children: /* @__PURE__ */ jsx("textPath", { xlinkHref: `#${pathId}`, startOffset: "50%", textAnchor: "middle", children: photographerCredit }) })
+        ]
+      }
+    )
+  ] });
+}
+
+export { Avatar };

package/dist/components/avatar/Avatar.module.css

@@ -0,0 +1,91 @@
+.container {
+  inline-size: var(--size);
+  block-size: var(--size);
+  max-inline-size: var(--component-size-xl);
+  aspect-ratio: 1 / 1;
+  border-radius: var(--border-radius-round);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--font-weight-normal);
+  overflow: hidden;
+}
+
+.container.button {
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+  background: transparent; /* important */
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    opacity var(--transition-fast) var(--ease-standard);
+}
+
+.container.button:hover .avatar {
+  background-color: color-mix(in srgb, var(--bg) 25%, var(--color-bg-surface));
+}
+
+.container.button:active {
+  opacity: 0.8;
+}
+
+.avatar {
+  inline-size: 80%;
+  block-size: 80%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+
+  /* moved here */
+  background-color: color-mix(in srgb, var(--bg) 20%, var(--color-bg-surface));
+  color: var(--bg);
+
+  font-size: var(--font-size-sm);
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.avatar.size-xs,
+.avatar.size-sm {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-normal);
+}
+
+.image {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: 50%; /* important if image fills avatar */
+}
+
+.imageSlot {
+  display: contents;
+}
+
+.wrapper {
+  position: relative;
+  display: inline-block;
+  inline-size: var(--size);
+  block-size: var(--size);
+  max-inline-size: var(--component-size-xl);
+  aspect-ratio: 1 / 1;
+  color: var(--text);
+}
+
+.creditText {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  pointer-events: none;
+  fill: currentColor;
+}
+
+.creditText text {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}

package/dist/components/breadcrumbs/Breadcrumbs.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./Breadcrumbs.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Breadcrumbs({
+  items,
+  ...navProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: styles__default.default.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.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/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Fragment } from 'react';
+import styles from './Breadcrumbs.module.css';
+
+function Breadcrumbs({
+  items,
+  ...navProps
+}) {
+  return /* @__PURE__ */ jsx("nav", { className: styles.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsx("ul", { children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("li", { children: [
+      item.icon && item.icon,
+      item.onClick ? /* @__PURE__ */ jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsx("span", { children: item.label })
+    ] }),
+    index < items.length - 1 && /* @__PURE__ */ jsx("span", { className: styles.separator, children: "/" })
+  ] }, `breadcrumbItem-${item.label}-${index}`)) }) });
+}
+
+export { Breadcrumbs };

package/dist/components/breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,80 @@
+.breadcrumbs {
+  font-family: var(--font-family);
+}
+
+.breadcrumbs ul {
+  display: flex;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: var(--font-size-sm);
+}
+
+.breadcrumbs li {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  padding-block: calc(var(--spacing-xxs) + var(--density));
+  padding-inline: 0;
+  color: var(--color-fg-default);
+  border-radius: var(--border-radius-sm);
+  position: relative;
+  transition:
+    color var(--transition-fast) var(--ease-standard),
+    background-color var(--transition-fast) var(--ease-standard);
+}
+
+.breadcrumbs li:hover button {
+  color: var(--color-fg-default);
+  background-color: var(--color-bg-contextual);
+  cursor: pointer;
+}
+
+.breadcrumbs li[aria-current='page'],
+.breadcrumbs li:last-of-type {
+  color: var(--color-fg-default);
+  cursor: default;
+}
+
+.breadcrumbs li[aria-current='page'] button,
+.breadcrumbs li:last-of-type button {
+  background-color: var(--color-bg-contextual) !important;
+  font-weight: var(--font-weight-medium);
+}
+
+.separator {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing-xs);
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-md);
+}
+
+.breadcrumbs li svg {
+  inline-size: var(--icon-size-sm);
+  block-size: var(--icon-size-sm);
+}
+
+.breadcrumbs a,
+.breadcrumbs button,
+.breadcrumbs [role='link'] {
+  all: unset;
+  color: inherit;
+  border-radius: var(--border-radius-default);
+  background-color: var(--color-bg-contextual-subtle);
+  padding: var(--spacing-xxs) var(--spacing-sm);
+}
+
+.breadcrumbs a:focus-visible,
+.breadcrumbs button:focus-visible,
+.breadcrumbs [role='link']:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.breadcrumbs [aria-disabled='true'],
+.breadcrumbs .is-disabled {
+  color: var(--color-disabled-fg);
+  pointer-events: none;
+}

package/dist/components/button/Button.cjs

@@ -0,0 +1,149 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var useTooltipTrigger = require('../../components/overlay/tooltip/useTooltipTrigger');
+var styles = require('./Button.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);
+
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+const Button = React__namespace.forwardRef(function Button2({
+  variant = "outlined",
+  shape = "default",
+  size = "md",
+  fullWidth,
+  icon,
+  children,
+  loading,
+  active,
+  spinIcon,
+  tooltip,
+  tooltipPlacement = "top",
+  isLink,
+  type = "button",
+  ...rest
+}, ref) {
+  var _a;
+  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 : "",
+    shape !== "default" ? styles__default.default[shape] : "",
+    userClassName
+  );
+  const tooltipEnabled = Boolean(tooltip);
+  const childRef = isLink && React__namespace.isValidElement(children) ? (_a = children.ref) != null ? _a : null : null;
+  const mergedRef = React__namespace.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
+  const { triggerProps, id: tooltipId } = useTooltipTrigger.useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8
+  });
+  const describedBy = (() => {
+    const existing = typeof buttonProps["aria-describedby"] === "string" ? buttonProps["aria-describedby"] : "";
+    const ids = [existing, tooltipEnabled ? tooltipId : ""].filter(Boolean);
+    return ids.length ? ids.join(" ") : void 0;
+  })();
+  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 : "";
+    const { disabled, onClick, ...linkButtonProps } = buttonProps;
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      onClick == null ? void 0 : onClick(e);
+    };
+    buttonEl = React__namespace.cloneElement(children, {
+      ...linkButtonProps,
+      ref: mergedRef,
+      className: cx(childClassName, computedClassName, styles__default.default.buttonLink),
+      ...tooltipEnabled ? triggerProps : {},
+      "aria-describedby": describedBy,
+      "aria-disabled": disabled ? "true" : void 0,
+      onClick: handleClick,
+      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 {
+    const isDisabled = Boolean(buttonProps.disabled);
+    buttonEl = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: computedClassName,
+        type,
+        ...buttonProps,
+        ...tooltipEnabled && !isDisabled ? triggerProps : {},
+        "aria-describedby": describedBy,
+        children: content
+      }
+    );
+    if (tooltipEnabled && isDisabled) {
+      buttonEl = /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          ref: triggerProps.ref,
+          onPointerEnter: triggerProps.onPointerEnter,
+          onPointerLeave: triggerProps.onPointerLeave,
+          style: {
+            display: fullWidth ? "flex" : "inline-flex",
+            cursor: "not-allowed"
+          },
+          children: buttonEl
+        }
+      );
+    }
+  }
+  return buttonEl;
+});
+Button.displayName = "Button";
+
+exports.Button = Button;

package/dist/components/button/Button.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { LoaderCircle } from 'lucide-react';
+import * as React from 'react';
+import { useTooltipTrigger } from '../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './Button.module.css';
+
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") ref(node);
+      else ref.current = node;
+    }
+  };
+}
+const Button = React.forwardRef(function Button2({
+  variant = "outlined",
+  shape = "default",
+  size = "md",
+  fullWidth,
+  icon,
+  children,
+  loading,
+  active,
+  spinIcon,
+  tooltip,
+  tooltipPlacement = "top",
+  isLink,
+  type = "button",
+  ...rest
+}, ref) {
+  var _a;
+  const { className: userClassName, ...buttonProps } = rest;
+  const computedClassName = cx(
+    styles.button,
+    styles[variant],
+    styles[size],
+    fullWidth ? styles.fullWidth : "",
+    active ? styles.active : "",
+    loading ? styles.loading : "",
+    shape !== "default" ? styles[shape] : "",
+    userClassName
+  );
+  const tooltipEnabled = Boolean(tooltip);
+  const childRef = isLink && React.isValidElement(children) ? (_a = children.ref) != null ? _a : null : null;
+  const mergedRef = React.useMemo(() => mergeRefs(childRef, ref), [childRef, ref]);
+  const { triggerProps, id: tooltipId } = useTooltipTrigger({
+    content: tooltipEnabled ? tooltip : null,
+    placement: tooltipPlacement,
+    offset: 8
+  });
+  const describedBy = (() => {
+    const existing = typeof buttonProps["aria-describedby"] === "string" ? buttonProps["aria-describedby"] : "";
+    const ids = [existing, tooltipEnabled ? tooltipId : ""].filter(Boolean);
+    return ids.length ? ids.join(" ") : void 0;
+  })();
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon && /* @__PURE__ */ jsx("span", { className: cx(styles.icon, spinIcon ? "spin" : ""), children: icon }),
+    children,
+    loading && /* @__PURE__ */ jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsx(LoaderCircle, {}) })
+  ] });
+  let buttonEl;
+  if (isLink && React.isValidElement(children)) {
+    const childClassName = typeof children.props.className === "string" ? children.props.className : "";
+    const { disabled, onClick, ...linkButtonProps } = buttonProps;
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      onClick == null ? void 0 : onClick(e);
+    };
+    buttonEl = React.cloneElement(children, {
+      ...linkButtonProps,
+      ref: mergedRef,
+      className: cx(childClassName, computedClassName, styles.buttonLink),
+      ...tooltipEnabled ? triggerProps : {},
+      "aria-describedby": describedBy,
+      "aria-disabled": disabled ? "true" : void 0,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("span", { className: cx(styles.icon, spinIcon ? "spin" : ""), children: icon }),
+        children.props.children,
+        loading && /* @__PURE__ */ jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsx(LoaderCircle, {}) })
+      ] })
+    });
+  } else {
+    const isDisabled = Boolean(buttonProps.disabled);
+    buttonEl = /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: computedClassName,
+        type,
+        ...buttonProps,
+        ...tooltipEnabled && !isDisabled ? triggerProps : {},
+        "aria-describedby": describedBy,
+        children: content
+      }
+    );
+    if (tooltipEnabled && isDisabled) {
+      buttonEl = /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: triggerProps.ref,
+          onPointerEnter: triggerProps.onPointerEnter,
+          onPointerLeave: triggerProps.onPointerLeave,
+          style: {
+            display: fullWidth ? "flex" : "inline-flex",
+            cursor: "not-allowed"
+          },
+          children: buttonEl
+        }
+      );
+    }
+  }
+  return buttonEl;
+});
+Button.displayName = "Button";
+
+export { Button };