(refactor): Breadcrumb uses react-router Link; drop linkComponent injection

CHANGELOG.md

@@ -4,6 +4,22 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.5] - 2026-08-12
+
+### Changed
+
+- **Breaking:** `Breadcrumb` now renders links with react-router `Link` directly. Dropped injectable `linkComponent`, `href`, and `linkProps` — use `to` on trail items only. Default link/current/separator colors use slate tones.
+
+### Removed
+
+- `BreadcrumbLinkComponent` export (no longer needed).
+
+## [0.4.4] - 2026-08-12
+
+### Fixed
+
+- `Breadcrumb` / `CookieConsent` `linkComponent` typing: `to` is required on the injected link props (and always passed when rendering links), so react-router `Link` is assignable without a host adapter. Exports: `BreadcrumbLinkComponent`, `CookieConsentLinkComponent`.
+
 ## [0.4.3] - 2026-08-06
 
 ### Added

src/components/components/Breadcrumb/Breadcrumb.tsx

@@ -1,27 +1,12 @@
-import {
+import { type FC, type ReactNode } from 'react'
-  type ComponentType,
+import { Link } from 'react-router-dom'
-  type FC,
-  type ReactNode,
-} from 'react'
 
 export interface BreadcrumbItem {
   label: ReactNode
-  /** Used by default `<a>` and as fallback for router links. */
+  /** Omit on the current page (last item). */
-  href?: string
-  /** Preferred when injecting react-router `Link`. */
   to?: string
-  /** Extra props passed to the injected link component. */
-  linkProps?: Record<string, unknown>
 }
 
-type BreadcrumbLinkComponent = ComponentType<{
-  href?: string
-  to?: string
-  className?: string
-  children?: ReactNode
-  [key: string]: unknown
-}>
-
 export interface BreadcrumbProps {
   items: BreadcrumbItem[]
   /** Defaults to `"/"`. */
@@ -30,35 +15,21 @@ export interface BreadcrumbProps {
   linkClassName?: string
   currentClassName?: string
   separatorClassName?: string
-  /** Host injects `Link` from react-router (or any anchor-like component). Defaults to `<a>`. */
-  linkComponent?: BreadcrumbLinkComponent
   /** Accessible name for the nav landmark. Defaults to `"Breadcrumb"`. */
   label?: string
 }
 
-const DefaultLink: BreadcrumbLinkComponent = ({
-  href,
-  to,
-  children,
-  ...rest
-}) => (
-  <a href={href ?? to} {...rest}>
-    {children}
-  </a>
-)
-
 /**
- * Presentational page trail. Use links/`span` only — never headings.
+ * Page trail (`nav` + `ol`). Links use react-router `Link`.
- * Keep a single page `h1` on `FormHeader` or the page title.
+ * Never uses headings — keep a single page `h1` on `FormHeader` or the page title.
  */
 const Breadcrumb: FC<BreadcrumbProps> = ({
   items,
   separator = '/',
   className = '',
-  linkClassName = 'text-sky-700 hover:text-sky-900 hover:underline',
+  linkClassName = 'text-slate-500 hover:text-slate-800 hover:underline',
-  currentClassName = 'text-gray-700',
+  currentClassName = 'text-slate-700',
-  separatorClassName = 'text-gray-400',
+  separatorClassName = 'text-slate-400',
-  linkComponent: LinkComponent = DefaultLink,
   label = 'Breadcrumb',
 }) => {
   if (items.length === 0)
@@ -72,8 +43,7 @@ const Breadcrumb: FC<BreadcrumbProps> = ({
       <ol className={'flex flex-wrap items-center gap-x-2 gap-y-1'}>
         {items.map((item, index) => {
           const isLast = index === items.length - 1
-          const target = item.to ?? item.href
+          const isLink = !isLast && Boolean(item.to)
-          const isLink = !isLast && Boolean(target)
 
           return (
             <li
@@ -89,15 +59,13 @@ const Breadcrumb: FC<BreadcrumbProps> = ({
                 </span>
               ) : null}
 
-              {isLink ? (
+              {isLink && item.to ? (
-                <LinkComponent
+                <Link
-                  href={item.href ?? (typeof item.to === 'string' ? item.to : undefined)}
+                  to={item.to}
-                  to={item.to ?? item.href}
                   className={linkClassName}
-                  {...(item.linkProps ?? {})}
                 >
                   {item.label}
-                </LinkComponent>
+                </Link>
               ) : (
                 <span
                   className={currentClassName}

src/components/components/CookieConsent/CookieConsent.tsx

@@ -17,12 +17,15 @@ export interface CookieConsentLink {
   linkProps?: Record<string, unknown>
 }
 
-type ConsentLinkComponent = ComponentType<{
+/**
+ * Injectable link surface for SPA routers.
+ * `to` is always provided when CookieConsent renders a link, so react-router `Link` is assignable.
+ */
+export type CookieConsentLinkComponent = ComponentType<{
+  to: string
   href?: string
-  to?: string
   className?: string
   children?: ReactNode
-  [key: string]: unknown
 }>
 
 export interface CookieConsentProps {
@@ -33,13 +36,13 @@ export interface CookieConsentProps {
   cookieName?: string
   cookieDays?: number
   /** Host injects `Link` from react-router (or any anchor-like component). Defaults to `<a>`. */
-  linkComponent?: ConsentLinkComponent
+  linkComponent?: CookieConsentLinkComponent
   onAccept?: () => void
   onDismiss?: () => void
   className?: string
 }
 
-const DefaultLink: ConsentLinkComponent = ({
+const DefaultLink: CookieConsentLinkComponent = ({
   href,
   to,
   children,
@@ -108,18 +111,24 @@ const CookieConsent: FC<CookieConsentProps> = ({
         {message}
         {links.length > 0 ? (
           <ul className={'mt-2 flex flex-wrap gap-x-3 gap-y-1'}>
-            {links.map((link, index) => (
+            {links.map((link, index) => {
+              const target = link.to ?? link.href
+              if (!target)
+                return null
+
+              return (
                 <li key={index}>
                   <LinkComponent
                     href={link.href ?? (typeof link.to === 'string' ? link.to : undefined)}
-                  to={link.to ?? link.href}
+                    to={target}
                     className={'text-sky-700 underline hover:text-sky-900'}
                     {...(link.linkProps ?? {})}
                   >
                     {link.label}
                   </LinkComponent>
                 </li>
-            ))}
+              )
+            })}
           </ul>
         ) : null}
       </div>

src/components/components/CookieConsent/index.ts

@@ -1,3 +1,7 @@
 export { CookieConsent } from './CookieConsent'
-export type { CookieConsentProps, CookieConsentLink } from './CookieConsent'
+export type {
+  CookieConsentProps,
+  CookieConsentLink,
+  CookieConsentLinkComponent,
+} from './CookieConsent'
 export { getCookie, setCookie } from './cookies'

src/components/index.ts

@@ -22,7 +22,11 @@ export type { MasonryProps } from './components/Masonry'
 export { LightBox } from './components/LightBox'
 export type { LightBoxProps, LightBoxSlide } from './components/LightBox'
 export { CookieConsent, getCookie, setCookie } from './components/CookieConsent'
-export type { CookieConsentProps, CookieConsentLink } from './components/CookieConsent'
+export type {
+  CookieConsentProps,
+  CookieConsentLink,
+  CookieConsentLinkComponent,
+} from './components/CookieConsent'
 export {
   WhatsAppButton,
   buildWhatsAppHref,

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maks-it.com/webui",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Shared contracts, utilities, and React components for MaksIT WebUI apps",
   "type": "module",
   "main": "./dist/index.cjs",

src/stories/components/Breadcrumb.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
     docs: {
       description: {
         component:
-          'Presentational page trail (`nav` + `ol`). Never uses headings — keep a single page `h1` on `FormHeader` or the page title. Inject `linkComponent` (e.g. react-router `Link`) for SPA navigation.',
+          'Page trail (`nav` + `ol`) using react-router `Link`. Never uses headings — keep a single page `h1` on `FormHeader` or the page title.',
       },
     },
   },
@@ -47,15 +47,14 @@ export const SingleItem: Story = {
 export const WithFormHeader: Story = {
   render: () => (
     <div className="space-y-0 border border-gray-200 bg-white">
-      <div className="bg-gray-50 px-4 py-2">
       <Breadcrumb
+        className="bg-gray-50 px-4 py-2"
         items={[
           { label: 'Admin', to: '/admin' },
           { label: 'Shop', to: '/admin/shop' },
           { label: 'Edit item' },
         ]}
       />
-      </div>
       <FormHeader>Edit shop item</FormHeader>
       <div className="p-4 text-sm text-gray-600">Form content</div>
     </div>