@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/attribute-chip/AttributeChip.module.css

@@ -0,0 +1,65 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  border-radius: var(--border-radius-default);
+  border: 1px solid var(--color-border-subtle);
+  overflow: hidden;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-default);
+  line-height: var(--line-height-tight);
+}
+
+.label,
+.value {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding-inline: var(--spacing-sm);
+}
+
+.label {
+  background: var(--color-bg-contextual);
+}
+
+.value {
+  background: var(--color-bg-contextual-subtle);
+  color: var(--color-fg-default);
+  font-weight: var(--font-weight-medium);
+}
+
+/* Optional: separator between label and value */
+.value {
+  border-left: 1px solid var(--color-border-subtle);
+}
+
+/* Sizes */
+.sm {
+  height: var(--component-size-xs);
+  font-size: var(--font-size-xs);
+}
+
+.md {
+  height: var(--component-size-sm);
+  font-size: var(--font-size-sm);
+}
+
+.lg {
+  height: var(--component-size-md);
+  font-size: var(--font-size-md);
+}
+
+.sm .label,
+.sm .value {
+  padding-inline: var(--spacing-xs);
+}
+
+.md .label,
+.md .value {
+  padding-inline: var(--spacing-sm);
+}
+
+.lg .label,
+.lg .value {
+  padding-inline: var(--spacing-md);
+}

package/dist/components/avatar/Avatar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { Size } from '../../types/sizes.types';
+import type { ButtonHTMLAttributes, JSX } from 'react';
 import type { Severity } from '../../constants/severity.types';
-import { ButtonHTMLAttributes } from 'react';
+import type { Size } from '../../types/sizes.types';
 interface AvatarProps extends Partial<ButtonHTMLAttributes<HTMLButtonElement>> {
     image?: React.ReactNode;
     imgSrc?: string;
@@ -10,6 +10,8 @@ interface AvatarProps extends Partial<ButtonHTMLAttributes<HTMLButtonElement>> {
     color?: Severity;
     button?: boolean;
     size?: Size;
+    fullWidth?: boolean;
+    photographerCredit?: string;
 }
-export declare function Avatar({ image, imgSrc, imgAlt, fullName, color, button, size, ...rest }: AvatarProps): JSX.Element;
+export declare function Avatar({ image, imgSrc, imgAlt, fullName, color, button, size, className, fullWidth, photographerCredit, ...rest }: AvatarProps): JSX.Element;
 export {};

package/dist/components/avatar/Avatar.js

@@ -1,42 +1,42 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import styles from './Avatar.module.css';
+import { SeverityBgColor, SeverityTextColor } from '../../constants/severity';
 import { sizes } from '../../constants/sizes';
-import { SeverityTextColor, SeverityBgColor } from '../../constants/severity';
-
-function Avatar({
-  image,
-  imgSrc,
-  imgAlt,
-  fullName,
-  color = "brand",
-  button,
-  size = "md",
-  ...rest
-}) {
-  const text = fullName ? fullName.split(" ").map((name) => name.charAt(0)).join("").toUpperCase() : "";
-  const styleVars = {
-    "--bg": SeverityBgColor[color],
-    "--text": SeverityTextColor[color],
-    "--size": sizes[size]
-  };
-  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 });
+export 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': SeverityBgColor[color],
+        '--text': SeverityTextColor[color],
+        '--size': fullWidth ? '100%' : sizes[size],
+    };
+    // Unique id per component instance so multiple avatars don't clash
+    const pathId = React.useId();
+    const renderImage = () => {
+        if (image) {
+            // If it's a valid React element, merge our className; otherwise render as-is
+            if (React.isValidElement(image)) {
+                const mergedClass = [image.props.className, styles.image].filter(Boolean).join(' ');
+                return React.cloneElement(image, { className: mergedClass });
+            }
+            return _jsx("span", { className: styles.imageSlot, children: image });
+        }
+        if (imgSrc) {
+            return _jsx("img", { className: styles.image, src: imgSrc, alt: imgAlt });
+        }
+        return (_jsx("span", { className: styles.avatar, "aria-hidden": "true", children: text }));
+    };
+    // Keep button behavior as before (no circular credit)
+    if (button) {
+        return (_jsx("button", { type: "button", ...rest, className: [styles.container, styles.button, className].filter(Boolean).join(' '), style: styleVars, children: renderImage() }));
     }
-    if (imgSrc) {
-      return /* @__PURE__ */ jsx("img", { className: styles.image, src: imgSrc, alt: imgAlt });
-    }
-    return /* @__PURE__ */ jsx("span", { className: styles.avatar, "aria-hidden": "true", children: text });
-  };
-  if (button) {
-    return /* @__PURE__ */ jsx("button", { ...rest, className: `${styles.container} ${styles.button}`, style: styleVars, children: renderImage() });
-  }
-  return /* @__PURE__ */ jsx("div", { className: styles.container, style: styleVars, children: renderImage() });
+    // Non-button: wrapper to overlay circular credit SVG
+    return (_jsxs("div", { className: [styles.wrapper, className].filter(Boolean).join(' '), style: styleVars, children: [_jsx("div", { className: styles.container, children: renderImage() }), photographerCredit && (_jsxs("svg", { className: styles.creditText, viewBox: "0 0 100 100", "aria-hidden": "true", focusable: "false", children: [_jsx("defs", { children: _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              " }) }), _jsx("text", { children: _jsx("textPath", { xlinkHref: `#${pathId}`, startOffset: "50%", textAnchor: "middle", children: photographerCredit }) })] }))] }));
 }
-
-export { Avatar };

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

@@ -1,6 +1,7 @@
 .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);
   background-color: var(--bg);
@@ -18,6 +19,7 @@
   background: var(--bg);
   transition: opacity var(--transition-fast) var(--ease-standard);
 }
+
 .container.button:hover {
   opacity: 0.8;
 }
@@ -41,3 +43,28 @@
 .imageSlot {
   display: contents;
 }
+
+/* Wrapper for non-button avatar so we can overlay SVG */
+.wrapper {
+  position: relative;
+  display: inline-block;
+  color: var(--text);
+}
+
+/* Circular photographer credit text overlay */
+.creditText {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  fill: currentColor;
+}
+
+/* Make sure the font is large enough and clearly visible */
+.creditText text {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}

package/dist/components/breadcrumbs/Breadcrumbs.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
+import type { ReactNode, HTMLAttributes, JSX } from 'react';
 export interface BreadcrumbItem {
-    label: string | React.ReactNode;
+    label: string | ReactNode;
     onClick?: () => void;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     disabled?: boolean;
     hidden?: boolean;
 }
 export interface BreadcrumbsProps {
     items: BreadcrumbItem[];
 }
-export declare function Breadcrumbs({ items }: BreadcrumbsProps): JSX.Element;
+export declare function Breadcrumbs({ items, ...navProps }: BreadcrumbsProps & HTMLAttributes<HTMLElement>): JSX.Element;

package/dist/components/breadcrumbs/Breadcrumbs.js

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

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

@@ -10,7 +10,6 @@
   margin: 0;
   padding: 0;
   font-size: var(--font-size-sm);
-  gap: var(--space-inline-sm);
 }
 
 .breadcrumbs li {
@@ -19,7 +18,7 @@
   gap: var(--spacing-xxs);
   padding-block: calc(var(--spacing-xxs) + var(--density));
   padding-inline: 0;
-  color: var(--color-text);
+  color: var(--color-fg-default);
   border-radius: var(--border-radius-sm);
   position: relative;
   transition:
@@ -27,47 +26,45 @@
     background-color var(--transition-fast) var(--ease-standard);
 }
 
-.breadcrumbs li:hover {
-  color: var(--color-text);
-  background-color: var(--color-surface-hover);
+.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-text);
+  color: var(--color-fg-default);
   cursor: default;
 }
 
-.breadcrumbs li[aria-current='page']::after,
-.breadcrumbs li:last-of-type::after {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-end: 0;
-  inline-size: 100%;
-  block-size: 2px;
-  background-color: var(--color-primary);
-  border-radius: 1px;
-  pointer-events: none;
+.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;
-  color: var(--color-secondary);
+  padding: 0 var(--spacing-xs);
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-md);
 }
 
 .breadcrumbs li svg {
-  inline-size: 1em;
-  block-size: 1em;
+  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-sm);
+  border-radius: var(--border-radius-default);
+  background-color: var(--color-bg-contextual-subtle);
+  padding: var(--spacing-xxs) var(--spacing-sm);
 }
 
 .breadcrumbs a:focus-visible,
@@ -79,6 +76,6 @@
 
 .breadcrumbs [aria-disabled='true'],
 .breadcrumbs .is-disabled {
-  color: var(--color-disabled-text);
+  color: var(--color-disabled-fg);
   pointer-events: none;
 }

package/dist/components/button/Button.d.ts

@@ -1,13 +1,17 @@
 import * as React from 'react';
+import type { Size } from '../../types/sizes.types';
 export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'default' | 'inline' | 'success' | 'danger';
+export type ButtonSize = Exclude<Size, 'xl'>;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
-    size?: 'sm' | 'md' | 'lg';
+    size?: ButtonSize;
+    fullWidth?: boolean;
     icon?: React.ReactNode;
     loading?: boolean;
     active?: boolean;
     spinIcon?: boolean;
-    tooltip?: string;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
     isLink?: boolean;
 }
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/button/Button.js

@@ -1,54 +1,60 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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';
-import { LoaderCircle } from 'lucide-react';
-import { Tooltip } from '../tooltip/Tooltip';
-
-const Button = React.forwardRef(function Button2({
-  variant = "outlined",
-  size = "md",
-  icon,
-  children,
-  loading,
-  active,
-  spinIcon,
-  tooltip,
-  isLink,
-  ...rest
-}, ref) {
-  let buttonEl;
-  const className = [
-    styles.button,
-    styles[variant],
-    styles[size],
-    active ? styles.active : "",
-    loading ? styles.loading : "",
-    isLink ? styles.link : "",
-    rest.className || ""
-  ].filter(Boolean).join(" ");
-  if (isLink && React.isValidElement(children)) {
-    buttonEl = React.cloneElement(children, {
-      className,
-      ...rest,
-      ref,
-      children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx("span", { className: `${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, {}) })
-      ] })
+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;
+        }
+    };
+}
+export const Button = React.forwardRef(function Button({ variant = 'outlined', size = 'md', fullWidth, icon, children, loading, active, spinIcon, tooltip, tooltipPlacement = 'top', isLink, type = 'button', ...rest }, ref) {
+    const { className: userClassName, ...buttonProps } = rest;
+    const computedClassName = cx(styles.button, styles[variant], styles[size], fullWidth ? styles.fullWidth : '', active ? styles.active : '', loading ? styles.loading : '', isLink ? styles.link : '', userClassName);
+    const tooltipEnabled = Boolean(tooltip);
+    // Tooltip anchored to the actual clickable element (button or link element)
+    const { triggerProps, id: tooltipId } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltip : null,
+        placement: tooltipPlacement,
+        offset: 8,
     });
-  } else {
-    buttonEl = /* @__PURE__ */ jsxs("button", { ref, className, ...rest, children: [
-      icon && /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${spinIcon ? "spin" : ""}`, children: icon }),
-      children,
-      loading && /* @__PURE__ */ jsx("span", { style: { display: "flex", opacity: 0.5 }, className: "spin", children: /* @__PURE__ */ jsx(LoaderCircle, {}) })
-    ] });
-  }
-  if (tooltip) {
-    return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, children: buttonEl });
-  }
-  return buttonEl;
+    // Merge aria-describedby (button may already have one)
+    const describedBy = (() => {
+        const existing = typeof buttonProps['aria-describedby'] === 'string'
+            ? buttonProps['aria-describedby']
+            : '';
+        const ids = [existing, tooltipEnabled ? tooltipId : ''].filter(Boolean);
+        return ids.length ? ids.join(' ') : undefined;
+    })();
+    const content = (_jsxs(_Fragment, { children: [icon && _jsx("span", { className: cx(styles.icon, spinIcon ? 'spin' : ''), children: icon }), children, loading && (_jsx("span", { style: { display: 'flex', opacity: 0.5 }, className: "spin", children: _jsx(LoaderCircle, {}) }))] }));
+    let buttonEl;
+    if (isLink && React.isValidElement(children)) {
+        // If this is a link-style button, we need to attach tooltip handlers + ref to the child.
+        const childClassName = typeof children.props.className === 'string' ? children.props.className : '';
+        const childRef = children.ref;
+        buttonEl = React.cloneElement(children, {
+            ...buttonProps,
+            ref: mergeRefs(childRef, ref),
+            className: cx(childClassName, computedClassName),
+            ...(tooltipEnabled ? triggerProps : {}),
+            'aria-describedby': describedBy,
+            children: (_jsxs(_Fragment, { children: [icon && _jsx("span", { className: cx(styles.icon, spinIcon ? 'spin' : ''), children: icon }), children.props.children, loading && (_jsx("span", { style: { display: 'flex', opacity: 0.5 }, className: "spin", children: _jsx(LoaderCircle, {}) }))] })),
+        });
+    }
+    else {
+        buttonEl = (_jsx("button", { className: computedClassName, type: type, ...buttonProps, ...(tooltipEnabled ? triggerProps : {}), "aria-describedby": describedBy, children: content }));
+    }
+    return buttonEl;
 });
-Button.displayName = "Button";
-
-export { Button };
+Button.displayName = 'Button';