@dbcdk/react-components 0.0.5 → 0.0.6

package/dist/components/__stories__/story-components/Spacing.js

@@ -1,184 +1,76 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from '../../../components/copy-button/CopyButton';
+import { Headline } from '../../../components/headline/Headline';
 import styles from './Spacing.module.css';
-import { Headline } from '@/components/headline/Headline';
-import { CopyButton } from '@/components/copy-button/CopyButton';
-
-const SIZES = ["xxs", "xs", "sm", "md", "lg", "xl", "2xl"];
-const AXES = ["all", "block", "inline", "top", "bottom", "start", "end"];
+const SIZES = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+const AXES = ['all', 'block', 'inline', 'top', 'bottom', 'start', 'end'];
+// Theme spacing values (px) to show in headers
 const SIZE_PX = {
-  xxs: "4px",
-  xs: "8px",
-  sm: "12px",
-  md: "16px",
-  lg: "24px",
-  xl: "32px",
-  "2xl": "48px"
+    xxs: '4px',
+    xs: '8px',
+    sm: '12px',
+    md: '16px',
+    lg: '24px',
+    xl: '32px',
+    '2xl': '48px',
 };
+// map axis -> class fragment for each kind
 const CLASS_PARTS = {
-  padding: {
-    all: "p",
-    block: "py",
-    inline: "px",
-    top: "pt",
-    bottom: "pb",
-    start: "ps",
-    end: "pe"
-  },
-  margin: {
-    all: "m",
-    block: "my",
-    inline: "mx",
-    top: "mt",
-    bottom: "mb",
-    start: "ms",
-    end: "me"
-  }
+    padding: {
+        all: 'p',
+        block: 'py',
+        inline: 'px',
+        top: 'pt',
+        bottom: 'pb',
+        start: 'ps',
+        end: 'pe',
+    },
+    margin: {
+        all: 'm',
+        block: 'my',
+        inline: 'mx',
+        top: 'mt',
+        bottom: 'mb',
+        start: 'ms',
+        end: 'me',
+    },
 };
-const HAS_SINGLE_SIDE_FOR = (size) => size !== "2xl";
+// Single-side helpers only go up to xl
+const HAS_SINGLE_SIDE_FOR = (size) => size !== '2xl';
 function makeClass(kind, axis, size) {
-  if ((axis === "top" || axis === "bottom" || axis === "start" || axis === "end") && !HAS_SINGLE_SIDE_FOR(size)) {
-    return null;
-  }
-  const part = CLASS_PARTS[kind][axis];
-  return `dbc-${part}-${size}`;
+    if ((axis === 'top' || axis === 'bottom' || axis === 'start' || axis === 'end') &&
+        !HAS_SINGLE_SIDE_FOR(size)) {
+        return null;
+    }
+    const part = CLASS_PARTS[kind][axis];
+    return `dbc-${part}-${size}`;
 }
 function Code({ children }) {
-  return /* @__PURE__ */ jsx("code", { className: styles.code, children });
+    return _jsx("code", { className: styles.code, children: children });
 }
-const ContentBlock = ({ helperClass }) => /* @__PURE__ */ jsxs(
-  "div",
-  {
-    className: `${styles.contentBlock} dbc-flex dbc-gap-xxs dbc-justify-center ${helperClass} dbc-items-center`,
-    children: [
-      helperClass,
-      " ",
-      /* @__PURE__ */ jsx(CopyButton, { text: helperClass, variant: "inline", size: "sm" })
-    ]
-  }
-);
+const ContentBlock = ({ helperClass }) => (_jsxs("div", { className: `${styles.contentBlock} dbc-flex dbc-gap-xxs dbc-justify-center ${helperClass} dbc-items-center`, children: [helperClass, " ", _jsx(CopyButton, { text: helperClass, variant: "inline", size: "sm" })] }));
 function PaddingPreview({ cls }) {
-  return /* @__PURE__ */ jsx("div", { className: `${styles.paddingPreview} ${cls}`, children: /* @__PURE__ */ jsx(ContentBlock, { helperClass: cls }) });
+    return (_jsx("div", { className: `${styles.paddingPreview} ${cls}`, children: _jsx(ContentBlock, { helperClass: cls }) }));
 }
 function MarginPreview({ cls }) {
-  return /* @__PURE__ */ jsx("div", { className: styles.marginCanvas, children: /* @__PURE__ */ jsx("div", { className: `${styles.marginBlock} ${cls}`, children: /* @__PURE__ */ jsx(ContentBlock, { helperClass: cls }) }) });
+    return (_jsx("div", { className: styles.marginCanvas, children: _jsx("div", { className: `${styles.marginBlock} ${cls}`, children: _jsx(ContentBlock, { helperClass: cls }) }) }));
 }
 function Cell({ kind, axis, size }) {
-  const cls = makeClass(kind, axis, size);
-  if (!cls) return /* @__PURE__ */ jsx("div", { className: styles.unavailable, children: "\u2014" });
-  return /* @__PURE__ */ jsx("div", { className: styles.cellInner, children: /* @__PURE__ */ jsx("div", { className: styles.cellPreview, children: kind === "padding" ? /* @__PURE__ */ jsx(PaddingPreview, { cls }) : /* @__PURE__ */ jsx(MarginPreview, { cls }) }) });
+    const cls = makeClass(kind, axis, size);
+    if (!cls)
+        return _jsx("div", { className: styles.unavailable, children: "\u2014" });
+    return (_jsx("div", { className: styles.cellInner, children: _jsx("div", { className: styles.cellPreview, children: kind === 'padding' ? _jsx(PaddingPreview, { cls: cls }) : _jsx(MarginPreview, { cls: cls }) }) }));
 }
 function Grid({ kind, title, severity }) {
-  return /* @__PURE__ */ jsxs("section", { className: styles.section, children: [
-    /* @__PURE__ */ jsx(Headline, { marker: true, severity, disableMargin: true, size: 2, children: title }),
-    /* @__PURE__ */ jsx("div", { className: styles.tableContainer, children: /* @__PURE__ */ jsxs("table", { className: styles.table, children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: styles.axisCol, children: "Axis" }),
-        SIZES.map((size) => /* @__PURE__ */ jsxs("th", { className: styles.sizeHead, children: [
-          size,
-          " ",
-          /* @__PURE__ */ jsxs("span", { className: styles.sizePx, children: [
-            "(",
-            SIZE_PX[size],
-            ")"
-          ] })
-        ] }, size))
-      ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: AXES.map((axis) => /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("th", { className: styles.axisHead, children: axis }),
-        SIZES.map((size) => /* @__PURE__ */ jsx("td", { className: styles.cell, children: /* @__PURE__ */ jsx(Cell, { kind, axis, size }) }, size))
-      ] }, axis)) })
-    ] }) })
-  ] });
+    return (_jsxs("section", { className: styles.section, children: [_jsx(Headline, { marker: true, severity: severity, disableMargin: true, size: 2, children: title }), _jsx("div", { className: styles.tableContainer, children: _jsxs("table", { className: styles.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: styles.axisCol, children: "Axis" }), SIZES.map(size => (_jsxs("th", { className: styles.sizeHead, children: [size, " ", _jsxs("span", { className: styles.sizePx, children: ["(", SIZE_PX[size], ")"] })] }, size)))] }) }), _jsx("tbody", { children: AXES.map(axis => (_jsxs("tr", { children: [_jsx("th", { className: styles.axisHead, children: axis }), SIZES.map(size => (_jsx("td", { className: styles.cell, children: _jsx(Cell, { kind: kind, axis: axis, size: size }) }, size)))] }, axis))) })] }) })] }));
 }
-function Spacing() {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: styles.container,
-      style: {
-        ["--pad-indicator"]: "var(--color-bg-info)",
-        ["--pad-border"]: "var(--color-info)",
-        ["--margin-indicator"]: "var(--color-bg-warning)",
-        ["--margin-border"]: "var(--color-warning)",
-        ["--dot-pad"]: "var(--color-bg-selected)",
-        ["--dot-mar"]: "var(--opac-bg-default)"
-      },
-      children: [
-        /* @__PURE__ */ jsx("header", { className: styles.header, children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, children: "Spacing helpers" }) }),
-        /* @__PURE__ */ jsxs("section", { className: styles.intro, children: [
-          /* @__PURE__ */ jsx("h2", { className: styles.h2, children: "Naming Convention" }),
-          /* @__PURE__ */ jsxs("p", { className: styles.paragraph, children: [
-            "Spacing helpers follow a simple ",
-            /* @__PURE__ */ jsx("strong", { children: "prefix\u2013axis\u2013size" }),
-            " pattern:"
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: styles.example, children: /* @__PURE__ */ jsx(Code, { children: "dbc-[prefix][axis?]-[size]" }) }),
-          /* @__PURE__ */ jsxs("ul", { className: styles.list, children: [
-            /* @__PURE__ */ jsxs("li", { children: [
-              /* @__PURE__ */ jsx("strong", { children: "Prefix" }),
-              ": ",
-              /* @__PURE__ */ jsx(Code, { children: "p" }),
-              " for ",
-              /* @__PURE__ */ jsx("em", { children: "padding" }),
-              ", ",
-              /* @__PURE__ */ jsx(Code, { children: "m" }),
-              " for",
-              " ",
-              /* @__PURE__ */ jsx("em", { children: "margin" }),
-              "."
-            ] }),
-            /* @__PURE__ */ jsxs("li", { children: [
-              /* @__PURE__ */ jsx("strong", { children: "Axis" }),
-              " (optional): ",
-              /* @__PURE__ */ jsx(Code, { children: "x" }),
-              " = inline (left + right), ",
-              /* @__PURE__ */ jsx(Code, { children: "y" }),
-              " ",
-              "= block (top + bottom), or single sides ",
-              /* @__PURE__ */ jsx(Code, { children: "t" }),
-              " / ",
-              /* @__PURE__ */ jsx(Code, { children: "b" }),
-              " / ",
-              /* @__PURE__ */ jsx(Code, { children: "s" }),
-              " ",
-              "/ ",
-              /* @__PURE__ */ jsx(Code, { children: "e" }),
-              "."
-            ] }),
-            /* @__PURE__ */ jsxs("li", { children: [
-              /* @__PURE__ */ jsx("strong", { children: "Size" }),
-              ": one of ",
-              /* @__PURE__ */ jsx(Code, { children: "xxs" }),
-              ", ",
-              /* @__PURE__ */ jsx(Code, { children: "xs" }),
-              ", ",
-              /* @__PURE__ */ jsx(Code, { children: "sm" }),
-              ",",
-              " ",
-              /* @__PURE__ */ jsx(Code, { children: "md" }),
-              ", ",
-              /* @__PURE__ */ jsx(Code, { children: "lg" }),
-              ", ",
-              /* @__PURE__ */ jsx(Code, { children: "xl" }),
-              ", ",
-              /* @__PURE__ */ jsx(Code, { children: "2xl" }),
-              "."
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("p", { className: styles.paragraph, children: [
-            "For example: ",
-            /* @__PURE__ */ jsx(Code, { children: "dbc-px-md" }),
-            " adds medium horizontal padding, while",
-            " ",
-            /* @__PURE__ */ jsx(Code, { children: "dbc-mt-lg" }),
-            " adds a large top margin."
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(Grid, { kind: "padding", title: "Padding", severity: "info" }),
-        /* @__PURE__ */ jsx(Grid, { kind: "margin", title: "Margin", severity: "warning" })
-      ]
-    }
-  );
+export function Spacing() {
+    return (_jsxs("div", { className: styles.container, style: {
+            ['--pad-indicator']: 'var(--color-bg-info)',
+            ['--pad-border']: 'var(--color-info)',
+            ['--margin-indicator']: 'var(--color-bg-warning)',
+            ['--margin-border']: 'var(--color-warning)',
+            ['--dot-pad']: 'var(--color-bg-selected)',
+            ['--dot-mar']: 'var(--opac-bg-default)',
+        }, children: [_jsx("header", { className: styles.header, children: _jsx(Headline, { disableMargin: true, children: "Spacing helpers" }) }), _jsxs("section", { className: styles.intro, children: [_jsx("h2", { className: styles.h2, children: "Naming Convention" }), _jsxs("p", { className: styles.paragraph, children: ["Spacing helpers follow a simple ", _jsx("strong", { children: "prefix\u2013axis\u2013size" }), " pattern:"] }), _jsx("div", { className: styles.example, children: _jsx(Code, { children: "dbc-[prefix][axis?]-[size]" }) }), _jsxs("ul", { className: styles.list, children: [_jsxs("li", { children: [_jsx("strong", { children: "Prefix" }), ": ", _jsx(Code, { children: "p" }), " for ", _jsx("em", { children: "padding" }), ", ", _jsx(Code, { children: "m" }), " for", ' ', _jsx("em", { children: "margin" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Axis" }), " (optional): ", _jsx(Code, { children: "x" }), " = inline (left + right), ", _jsx(Code, { children: "y" }), ' ', "= block (top + bottom), or single sides ", _jsx(Code, { children: "t" }), " / ", _jsx(Code, { children: "b" }), " / ", _jsx(Code, { children: "s" }), ' ', "/ ", _jsx(Code, { children: "e" }), "."] }), _jsxs("li", { children: [_jsx("strong", { children: "Size" }), ": one of ", _jsx(Code, { children: "xxs" }), ", ", _jsx(Code, { children: "xs" }), ", ", _jsx(Code, { children: "sm" }), ",", ' ', _jsx(Code, { children: "md" }), ", ", _jsx(Code, { children: "lg" }), ", ", _jsx(Code, { children: "xl" }), ", ", _jsx(Code, { children: "2xl" }), "."] })] }), _jsxs("p", { className: styles.paragraph, children: ["For example: ", _jsx(Code, { children: "dbc-px-md" }), " adds medium horizontal padding, while", ' ', _jsx(Code, { children: "dbc-mt-lg" }), " adds a large top margin."] })] }), _jsx(Grid, { kind: "padding", title: "Padding", severity: "info" }), _jsx(Grid, { kind: "margin", title: "Margin", severity: "warning" })] }));
 }
-
-export { Spacing };

package/dist/components/app-header/AppHeader.d.ts

@@ -1,5 +1,6 @@
-interface AppHeader {
-    children: React.ReactNode;
+import type { ReactNode, JSX } from 'react';
+interface AppHeaderProps {
+    children: ReactNode;
 }
-export declare function AppHeader({ children }: AppHeader): JSX.Element;
+export declare function AppHeader({ children }: AppHeaderProps): JSX.Element;
 export {};

package/dist/components/app-header/AppHeader.js

@@ -1,8 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './AppHeader.module.css';
-
-function AppHeader({ children }) {
-  return /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx("div", { className: styles.container, children }) });
+export function AppHeader({ children }) {
+    return (_jsx("header", { children: _jsx("div", { className: styles.container, children: children }) }));
 }
-
-export { AppHeader };

package/dist/components/attribute-chip/AttributeChip.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 interface AttributeChipProps {
     label: string;
     value: string | number | boolean;

package/dist/components/attribute-chip/AttributeChip.js

@@ -1,16 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './AttributeChip.module.css';
-
-function AttributeChip({
-  label,
-  value,
-  size = "md",
-  loading
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${styles[size]}`, "aria-busy": loading, children: [
-    /* @__PURE__ */ jsx("span", { className: styles.label, children: label }),
-    /* @__PURE__ */ jsx("span", { className: styles.value, children: loading ? "\u2014" : value == null ? void 0 : value.toString() })
-  ] });
+export function AttributeChip({ label, value, size = 'md', loading, }) {
+    return (_jsxs("div", { className: `${styles.container} ${styles[size]}`, "aria-busy": loading, children: [_jsx("span", { className: styles.label, children: label }), _jsx("span", { className: styles.value, children: loading ? '—' : value === null || value === void 0 ? void 0 : value.toString() })] }));
 }
-
-export { AttributeChip };

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 { ButtonHTMLAttributes, JSX } from 'react';
 import type { Severity } from '../../constants/severity.types';
+import type { Size } from '../../types/sizes.types';
 interface AvatarProps extends Partial<ButtonHTMLAttributes<HTMLButtonElement>> {
     image?: React.ReactNode;
     imgSrc?: string;

package/dist/components/avatar/Avatar.js

@@ -1,76 +1,42 @@
-import { jsx, jsxs } 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",
-  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]
-  };
-  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 });
-    }
-    return /* @__PURE__ */ jsx("span", { className: styles.avatar, "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              "
+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 });
             }
-          ) }),
-          /* @__PURE__ */ jsx("text", { children: /* @__PURE__ */ jsx("textPath", { xlinkHref: `#${pathId}`, startOffset: "50%", textAnchor: "middle", children: photographerCredit }) })
-        ]
-      }
-    )
-  ] });
+            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() }));
+    }
+    // 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/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,15 +1,6 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+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: "/" })
-  ] }, `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/button/Button.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Size } from '@/types/sizes.types';
+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> {
@@ -10,7 +10,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     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,62 +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';
-
 function cx(...parts) {
-  return parts.filter(Boolean).join(" ");
+    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",
-  size = "md",
-  fullWidth,
-  icon,
-  children,
-  loading,
-  active,
-  spinIcon,
-  tooltip,
-  isLink,
-  ...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 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, {
-      ...buttonProps,
-      ref,
-      className: cx(childClassName, computedClassName),
-      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, {}) })
-      ] })
+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__ */ jsx("button", { ref, className: computedClassName, ...buttonProps, children: content });
-  }
-  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';

package/dist/components/button/Button.module.css

@@ -45,7 +45,7 @@
   cursor: not-allowed;
   pointer-events: none;
   background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
+  border-color: transparent;
   color: var(--color-disabled-fg);
 }