@dbcdk/react-components 0.0.3 → 0.0.5

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.cjs

@@ -37,14 +37,18 @@ function Avatar({
   color = "brand",
   button,
   size = "md",
+  className,
+  fullWidth = false,
+  photographerCredit,
   ...rest
 }) {
-  const text = fullName ? fullName.split(" ").map((name) => name.charAt(0)).join("").toUpperCase() : "";
+  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": sizes.sizes[size]
+    "--size": fullWidth ? "100%" : sizes.sizes[size]
   };
+  const pathId = React__namespace.useId();
   const renderImage = () => {
     if (image) {
       if (React__namespace.isValidElement(image)) {
@@ -59,9 +63,39 @@ function Avatar({
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.avatar, "aria-hidden": "true", children: text });
   };
   if (button) {
-    return /* @__PURE__ */ jsxRuntime.jsx("button", { ...rest, className: `${styles__default.default.container} ${styles__default.default.button}`, style: styleVars, children: renderImage() });
+    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.jsx("div", { className: styles__default.default.container, 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/avatar/Avatar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import type { ButtonHTMLAttributes } from 'react';
 import type { Size } from '../../types/sizes.types';
 import type { Severity } from '../../constants/severity.types';
-import { ButtonHTMLAttributes } from 'react';
 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,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import styles from './Avatar.module.css';
 import { sizes } from '../../constants/sizes';
@@ -12,14 +12,18 @@ function Avatar({
   color = "brand",
   button,
   size = "md",
+  className,
+  fullWidth = false,
+  photographerCredit,
   ...rest
 }) {
-  const text = fullName ? fullName.split(" ").map((name) => name.charAt(0)).join("").toUpperCase() : "";
+  const text = fullName ? fullName.trim().split(/\s+/).map((name) => name.charAt(0)).join("").toUpperCase() : "";
   const styleVars = {
     "--bg": SeverityBgColor[color],
     "--text": SeverityTextColor[color],
-    "--size": sizes[size]
+    "--size": fullWidth ? "100%" : sizes[size]
   };
+  const pathId = React.useId();
   const renderImage = () => {
     if (image) {
       if (React.isValidElement(image)) {
@@ -34,9 +38,39 @@ function Avatar({
     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(
+      "button",
+      {
+        type: "button",
+        ...rest,
+        className: [styles.container, styles.button, className].filter(Boolean).join(" "),
+        style: styleVars,
+        children: renderImage()
+      }
+    );
   }
-  return /* @__PURE__ */ jsx("div", { className: styles.container, 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

@@ -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.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
 var styles = require('./Breadcrumbs.module.css');
 var React = require('react');
 
@@ -16,7 +15,7 @@ function Breadcrumbs({ items }) {
       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: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, {}) })
+    index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, children: "/" })
   ] }, `breadcrumbItem-${item.label}-${index}`)) }) });
 }
 

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ChevronRight } from 'lucide-react';
 import styles from './Breadcrumbs.module.css';
 import React from 'react';
 
@@ -9,7 +8,7 @@ function Breadcrumbs({ items }) {
       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, {}) })
+    index < items.length - 1 && /* @__PURE__ */ jsx("span", { className: styles.separator, children: "/" })
   ] }, `breadcrumbItem-${item.label}-${index}`)) }) });
 }
 

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.cjs

@@ -29,9 +29,13 @@ function _interopNamespace(e) {
 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,
@@ -41,33 +45,37 @@ const Button = React__namespace.forwardRef(function Button2({
   isLink,
   ...rest
 }, ref) {
-  let buttonEl;
-  const className = [
+  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 : "",
-    rest.className || ""
-  ].filter(Boolean).join(" ");
+    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, {
-      className,
-      ...rest,
+      ...buttonProps,
       ref,
+      className: cx(childClassName, computedClassName),
       children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.icon} ${spinIcon ? "spin" : ""}`, children: icon }),
+        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.jsxs("button", { ref, className, ...rest, children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${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, {}) })
-    ] });
+    buttonEl = /* @__PURE__ */ jsxRuntime.jsx("button", { ref, className: computedClassName, ...buttonProps, children: content });
   }
   if (tooltip) {
     return /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, children: buttonEl });

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

@@ -1,8 +1,11 @@
 import * as React from 'react';
+import { 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;

package/dist/components/button/Button.js

@@ -4,9 +4,13 @@ import styles from './Button.module.css';
 import { LoaderCircle } from 'lucide-react';
 import { Tooltip } from '../tooltip/Tooltip';
 
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
 const Button = React.forwardRef(function Button2({
   variant = "outlined",
   size = "md",
+  fullWidth,
   icon,
   children,
   loading,
@@ -16,33 +20,37 @@ const Button = React.forwardRef(function Button2({
   isLink,
   ...rest
 }, ref) {
-  let buttonEl;
-  const className = [
+  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 : "",
-    rest.className || ""
-  ].filter(Boolean).join(" ");
+    userClassName
+  );
+  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 : "";
     buttonEl = React.cloneElement(children, {
-      className,
-      ...rest,
+      ...buttonProps,
       ref,
+      className: cx(childClassName, computedClassName),
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${spinIcon ? "spin" : ""}`, children: icon }),
+        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 {
-    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, {}) })
-    ] });
+    buttonEl = /* @__PURE__ */ jsx("button", { ref, className: computedClassName, ...buttonProps, children: content });
   }
   if (tooltip) {
     return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, children: buttonEl });