@papernote/ui 1.7.0 → 1.7.1

package/dist/index.js

@@ -7283,12 +7283,24 @@ function Breadcrumbs({ items, showHome = true }) {
     return (jsxRuntime.jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center space-x-2 text-sm", children: [showHome && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactRouterDom.Link, { to: "/", className: "text-ink-500 hover:text-ink-900 transition-colors", "aria-label": "Home", children: jsxRuntime.jsx(lucideReact.Home, { className: "h-4 w-4" }) }), items.length > 0 && jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-400" })] })), items.map((item, index) => {
                 const isLast = index === items.length - 1;
                 const isActive = isLast;
-                return (jsxRuntime.jsxs(React.Fragment, { children: [item.href && !isActive ? (jsxRuntime.jsxs(reactRouterDom.Link, { to: item.href, className: "flex items-center gap-2 text-ink-500 hover:text-ink-900 hover:underline transition-colors", children: [item.icon && jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }), jsxRuntime.jsx("span", { children: item.label })] })) : (jsxRuntime.jsxs("span", { className: `
-                  flex items-center gap-2 px-2 py-1 rounded-md transition-colors
-                  ${isActive
-                                ? 'bg-accent-50 text-accent-900 font-semibold'
-                                : 'text-ink-700 font-medium'}
-                `, "aria-current": isActive ? 'page' : undefined, children: [item.icon && jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }), jsxRuntime.jsx("span", { children: item.label })] })), !isLast && jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-400" })] }, index));
+                const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon && jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }), jsxRuntime.jsx("span", { children: item.label })] }));
+                const renderBreadcrumb = () => {
+                    // Active item (last item) - always render as non-clickable span
+                    if (isActive) {
+                        return (jsxRuntime.jsx("span", { className: "flex items-center gap-2 px-2 py-1 rounded-md bg-accent-50 text-accent-900 font-semibold transition-colors", "aria-current": "page", children: content }));
+                    }
+                    // Has href - render as Link, also call onClick if provided
+                    if (item.href) {
+                        return (jsxRuntime.jsx(reactRouterDom.Link, { to: item.href, onClick: item.onClick, className: "flex items-center gap-2 text-ink-500 hover:text-ink-900 hover:underline transition-colors", children: content }));
+                    }
+                    // Only onClick (no href) - render as button
+                    if (item.onClick) {
+                        return (jsxRuntime.jsx("button", { type: "button", onClick: item.onClick, className: "flex items-center gap-2 text-ink-500 hover:text-ink-900 hover:underline transition-colors bg-transparent border-none cursor-pointer p-0", children: content }));
+                    }
+                    // Neither href nor onClick - render as non-clickable span
+                    return (jsxRuntime.jsx("span", { className: "flex items-center gap-2 text-ink-700 font-medium", children: content }));
+                };
+                return (jsxRuntime.jsxs(React.Fragment, { children: [renderBreadcrumb(), !isLast && jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-400" })] }, index));
             })] }));
 }