@payfit/unity-components 1.2.0 → 2.0.0

package/dist/esm/components/action-bar/ActionBar.js

@@ -1,17 +1,17 @@
 import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import P, { forwardRef as T, useCallback as j, isValidElement as z } from "react";
-import { uyTv as D } from "@payfit/unity-themes";
-import { Toolbar as R, Group as y } from "react-aria-components";
+import P, { forwardRef as T, useCallback as R, isValidElement as j } from "react";
+import { uyTv as z } from "@payfit/unity-themes";
+import { Toolbar as D, Group as y } from "react-aria-components";
 import { useIntl as S, FormattedMessage as l } from "react-intl";
 import { Button as _ } from "../button/Button.js";
 import { IconButton as E } from "../icon-button/IconButton.js";
 import { Icon as F } from "../icon/Icon.js";
 import { Menu as G } from "../menu/Menu.js";
 import { MenuContent as K } from "../menu/parts/MenuContent.js";
-import { MenuItem as L } from "../menu/parts/MenuItem.js";
-import { MenuTrigger as O } from "../menu/parts/MenuTrigger.js";
+import { MenuTrigger as L } from "../menu/parts/MenuTrigger.js";
+import { RawMenuItem as O } from "../menu/parts/RawMenuItem.js";
 import { ActionBarAction as U } from "./parts/ActionBarAction.js";
-const V = D({
+const V = z({
   slots: {
     base: [
       "uy:bg-surface-inverted uy:text-content-inverted",
@@ -46,14 +46,14 @@ const V = D({
     const { base: g, selectionArea: x, selectionCountText: A, actionArea: M } = V(), m = S(), s = a !== void 0 && typeof r == "function", k = i["aria-keyshortcuts"] !== void 0, B = p ?? m.formatMessage({
       id: "unity:component:action-bar:toolbar-label",
       defaultMessage: "Bulk actions toolbar"
-    }), I = j(() => {
+    }), I = R(() => {
       if (s) {
         const e = r;
         return a.map((o, N) => e(o, N));
       }
       return r;
-    }, [r, a, s]), C = !!r || "actions" in i && i.actions.length > 0, w = s ? a.filter((e) => e.variant !== "primary") : P.Children.map(r, (e) => {
-      if (!z(e) || e.type !== U)
+    }, [r, a, s]), w = !!r || "actions" in i && i.actions.length > 0, C = s ? a.filter((e) => e.variant !== "primary") : P.Children.map(r, (e) => {
+      if (!j(e) || e.type !== U)
         return null;
       const o = e.props;
       return o.variant === "primary" ? null : {
@@ -66,7 +66,7 @@ const V = D({
       };
     })?.filter(Boolean);
     return /* @__PURE__ */ n(
-      R,
+      D,
       {
         ...i,
         id: d,
@@ -126,7 +126,7 @@ const V = D({
               ]
             }
           ),
-          C && /* @__PURE__ */ n(
+          w && /* @__PURE__ */ n(
             y,
             {
               className: M(),
@@ -135,7 +135,7 @@ const V = D({
               children: [
                 I(),
                 /* @__PURE__ */ t("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ n(G, { children: [
-                  /* @__PURE__ */ t(O, { asChild: !0, children: /* @__PURE__ */ t(
+                  /* @__PURE__ */ t(L, { asChild: !0, children: /* @__PURE__ */ t(
                     E,
                     {
                       icon: "DotsThreeOutlined",
@@ -144,8 +144,8 @@ const V = D({
                       color: "inverted"
                     }
                   ) }),
-                  /* @__PURE__ */ t(K, { children: w.map((e) => /* @__PURE__ */ t(
-                    L,
+                  /* @__PURE__ */ t(K, { children: C.map((e) => /* @__PURE__ */ t(
+                    O,
                     {
                       onAction: () => {
                         e.onPress?.({});

package/dist/esm/components/actionable/Actionable.js

@@ -1,10 +1,10 @@
-import { jsx as C } from "react/jsx-runtime";
-import { forwardRef as H, useState as k } from "react";
-import { uyTv as F } from "@payfit/unity-themes";
-import { useFocusVisible as E, useHover as x, useFocus as N } from "@react-aria/interactions";
-import { useObjectRef as S, mergeProps as p } from "@react-aria/utils";
-import { useButton as U } from "react-aria";
-const V = F({
+import { jsx as H } from "react/jsx-runtime";
+import { forwardRef as k, useState as F, useMemo as E } from "react";
+import { uyTv as N } from "@payfit/unity-themes";
+import { useFocusVisible as x, useHover as S, useFocus as U } from "@react-aria/interactions";
+import { useObjectRef as V, mergeProps as f } from "@react-aria/utils";
+import { useButton as j } from "react-aria";
+const w = N({
   base: "uy:group",
   variants: {
     isUnstyled: {
@@ -19,45 +19,48 @@ const V = F({
   defaultVariants: {
     isUnstyled: !1
   }
-}), j = H((f, e) => {
+}), A = k((v, e) => {
   const {
     asElement: l = "div",
-    isUnstyled: m = !1,
-    className: v,
+    isUnstyled: d = !1,
+    className: c,
     children: o,
     ...s
-  } = f;
-  e = S(e);
-  const { isFocusVisible: i } = E(), { isHovered: a, hoverProps: d } = x({
+  } = v;
+  e = V(e);
+  const { isFocusVisible: i } = x(), { isHovered: a, hoverProps: u } = S({
     onHoverStart: s.onHoverStart,
     onHoverEnd: s.onHoverEnd,
     onHoverChange: s.onHoverChange,
     isDisabled: s.isDisabled
-  }), [t, D] = k(!1), { focusProps: c } = N({
+  }), [t, D] = F(!1), { focusProps: b } = U({
     onFocusChange: D,
     isDisabled: s.isDisabled
-  }), { buttonProps: u, isPressed: r } = U(
+  }), { buttonProps: m, isPressed: n } = j(
     {
       ...s,
       isDisabled: s.isDisabled,
       elementType: l
     },
     e
-  ), y = l, g = (n) => {
+  ), y = E(
+    () => w({ isUnstyled: d, className: c }),
+    [c, d]
+  ), g = l, C = (r) => {
     if (s.isDisabled) {
-      n.preventDefault(), n.stopPropagation();
+      r.preventDefault(), r.stopPropagation();
       return;
     }
-    const b = p(u, d, c);
-    b.onClick && b.onClick(n);
-  }, P = p(u, d, c), { onClick: w, ...h } = P;
-  return /* @__PURE__ */ C(
-    y,
+    const p = f(m, u, b);
+    p.onClick && p.onClick(r);
+  }, P = f(m, u, b), { onClick: M, ...h } = P;
+  return /* @__PURE__ */ H(
+    g,
     {
       ...h,
-      onClick: g,
-      className: V({ isUnstyled: m, className: v }),
-      ...r && { "data-pressed": r },
+      onClick: C,
+      className: y,
+      ...n && { "data-pressed": n },
       ...t && { "data-focused": t },
       ...a && { "data-hovered": a },
       ...s.isDisabled && { "data-disabled": s.isDisabled },
@@ -65,7 +68,7 @@ const V = F({
       ref: e,
       children: typeof o == "function" ? o({
         isHovered: a,
-        isPressed: r,
+        isPressed: n,
         isFocused: t,
         isDisabled: !!s.isDisabled,
         isFocusVisible: i,
@@ -75,7 +78,7 @@ const V = F({
     }
   );
 });
-j.displayName = "Actionable";
+A.displayName = "Actionable";
 export {
-  j as Actionable
+  A as Actionable
 };

package/dist/esm/components/app-layout/AppLayout.js

@@ -37,36 +37,36 @@ const w = x({
   }
 });
 function R({
-  children: y,
-  menu: l,
-  header: a,
+  children: l,
+  menu: a,
+  header: r,
   footer: u,
-  withoutContentPadding: n = !1
+  withoutContentPadding: p = !1
 }) {
-  const r = v(null), { height: o = 0 } = g({
-    ref: r,
+  const o = v(null), { height: y = 0 } = g({
+    ref: o,
     box: "border-box"
-  }), { body: p, header: s, menu: d, layoutWrapper: i, contentWrapper: c, content: f, footer: h } = w({
-    withoutContentPadding: n
+  }), { body: s, header: n, menu: d, layoutWrapper: i, contentWrapper: c, content: f, footer: h } = w({
+    withoutContentPadding: p
   }), m = {
-    "--uy-app-layout-menu-height": `calc(100dvh - ${o}px)`,
-    "--uy-app-layout-header-sticky-offset": `${o}px`
+    "--uy-app-layout-menu-height": `calc(100dvh - ${y}px)`,
+    "--uy-app-layout-header-sticky-offset": `${y}px`
   };
-  return /* @__PURE__ */ t("div", { className: p(), style: m, children: [
-    a && /* @__PURE__ */ e(
+  return /* @__PURE__ */ t("div", { className: s(), style: m, children: [
+    r && /* @__PURE__ */ e(
       "div",
       {
-        ref: r,
-        className: s(),
+        ref: o,
+        className: n(),
         role: "alert",
         "aria-live": "assertive",
-        children: a
+        children: r
       }
     ),
     /* @__PURE__ */ t("div", { className: i(), children: [
-      /* @__PURE__ */ e("div", { className: d(), children: l }),
+      a && /* @__PURE__ */ e("div", { className: d(), children: a }),
       /* @__PURE__ */ t("div", { className: c(), children: [
-        /* @__PURE__ */ e("div", { className: f(), children: y }),
+        /* @__PURE__ */ e("div", { className: f(), children: l }),
         u && /* @__PURE__ */ e("footer", { className: h(), children: u })
       ] })
     ] })

package/dist/esm/components/app-menu/parts/AppMenuHeader.d.ts

@@ -1,9 +1,91 @@
 import { ReactNode } from 'react';
-export interface AppMenuHeader {
+export interface AppMenuHeaderProps {
+    /**
+     * The application environment. Determines which brand logo variant to display.
+     */
     environment: 'production' | 'working' | 'testing' | 'development' | 'local';
-    linkHref: string;
-    linkLabel: string;
+    /**
+     * Accessible label for the brand logo link.
+     */
+    brandLabel: string;
+    /**
+     * Optional notification component to display in the header.
+     */
     notificationsComponent?: ReactNode;
+    /**
+     * Optional search component to display in the header.
+     */
     searchComponent?: ReactNode;
+    /**
+     * Render function for the brand logo link. Enables integration with any routing library.
+     * Provides href and children (the logo component) for flexible link implementation.
+     * Defaults to React Aria's Link component, which works with Unity's RouterProvider for router-agnostic behavior.
+     * @example
+     * ```tsx
+     * // With Tanstack Router
+     * import { Link } from '@tanstack/react-router'
+     *
+     * <AppMenuHeader
+     *   renderLink={({ href, children }) => (
+     *     <Link to={href}>{children}</Link>
+     *   )}
+     * />
+     *
+     * // With React Router v5/v6
+     * import { Link } from 'react-router-dom'
+     *
+     * <AppMenuHeader
+     *   renderLink={({ href, children }) => (
+     *     <Link to={href}>{children}</Link>
+     *   )}
+     * />
+     *
+     * // With plain HTML link
+     * <AppMenuHeader
+     *   renderLink={({ href, children }) => (
+     *     <a href={href}>{children}</a>
+     *   )}
+     * />
+     * ```
+     */
+    renderLink?: (props: {
+        children: ReactNode;
+    }) => ReactNode;
 }
-export declare const AppMenuHeader: ({ environment, linkHref, linkLabel, notificationsComponent, searchComponent, }: AppMenuHeader) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The header section of the AppMenu component, displaying the PayFit brand logo, search, and notifications.
+ * Provides a router-agnostic approach through a render prop pattern for the brand logo link.
+ * @param props - Component props
+ * @param props.environment - The application environment (determines brand logo variant)
+ * @param props.brandLabel - Accessible label for the brand logo link
+ * @param props.notificationsComponent - Optional notification component to display
+ * @param props.searchComponent - Optional search component to display
+ * @param props.renderLink - Optional render function for custom link implementation
+ * @example
+ * ```tsx
+ * import { AppMenuHeader } from '@payfit/unity-components'
+ *
+ * function AppShell() {
+ *   return (
+ *     <AppMenu>
+ *       <AppMenuHeader
+ *         environment="production"
+ *         linkHref="/"
+ *         linkLabel="PayFit Home"
+ *       />
+ *     </AppMenu>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The brand logo automatically adapts based on the environment prop (production displays standard logo, others display pre-production variants)
+ * - By default, uses React Aria's Link component which integrates with Unity's RouterProvider
+ * - For router-specific implementations, pass a custom `renderLink` function with your router's Link component
+ * - On mobile viewports, displays a menu toggle button; on desktop, displays the brand logo with optional search and notifications
+ * @see {@link AppMenuHeaderProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/app-menu GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+export declare const AppMenuHeader: ({ environment, brandLabel: linkLabel, notificationsComponent, searchComponent, renderLink, }: AppMenuHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/app-menu/parts/AppMenuHeader.js

@@ -1,41 +1,41 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useIntl as p } from "react-intl";
-import { Link as m } from "react-router-dom";
-import { IconButton as s } from "../../icon-button/IconButton.js";
-import { PayFitBrand as c } from "../../payfit-brand/PayFitBrand.js";
-import { PayFitBrandPreprod as y } from "../../payfit-brand/PayFitPreprod.js";
-import { useAppMenuContext as f } from "./AppMenu.context.js";
-const N = ({
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { Link as m } from "react-aria-components";
+import { useIntl as s } from "react-intl";
+import { IconButton as c } from "../../icon-button/IconButton.js";
+import { PayFitBrand as y } from "../../payfit-brand/PayFitBrand.js";
+import { PayFitBrandPreprod as f } from "../../payfit-brand/PayFitPreprod.js";
+import { useAppMenuContext as h } from "./AppMenu.context.js";
+const O = ({
   environment: o,
-  linkHref: a,
-  linkLabel: t,
-  notificationsComponent: r,
-  searchComponent: l
+  brandLabel: t,
+  notificationsComponent: i,
+  searchComponent: r,
+  renderLink: l = ({ children: e }) => /* @__PURE__ */ n(m, { href: "/", children: e })
 }) => {
-  const { isMobileMenuOpen: n, toggleMobileMenu: u } = f(), d = p();
-  return /* @__PURE__ */ i("header", { className: "uy:flex uy:flex-col uy:gap-y-200 uy:pl-25 uy:pr-25", children: [
-    /* @__PURE__ */ e("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ e(
-      s,
+  const { isMobileMenuOpen: e, toggleMobileMenu: u } = h(), d = s(), p = o === "production" ? /* @__PURE__ */ n(y, { label: t, width: 104 }) : /* @__PURE__ */ n(f, { label: t, env: o });
+  return /* @__PURE__ */ a("header", { className: "uy:flex uy:flex-col uy:gap-y-200 uy:pl-25 uy:pr-25", children: [
+    /* @__PURE__ */ n("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ n(
+      c,
       {
         variant: "ghost",
         color: "neutral",
-        icon: n ? "CloseOutlined" : "ListOutlined",
+        icon: e ? "CloseOutlined" : "ListOutlined",
         label: d.formatMessage({
-          id: n ? "unity:component:app-menu:header:menu-close" : "unity:component:app-menu:header:menu-open",
-          defaultMessage: n ? "Close navigation" : "Open navigation"
+          id: e ? "unity:component:app-menu:header:menu-close" : "unity:component:app-menu:header:menu-open",
+          defaultMessage: e ? "Close navigation" : "Open navigation"
         }),
         onClick: u,
-        "aria-expanded": n,
+        "aria-expanded": e,
         "aria-controls": "app-menu-nav-container app-menu-profile-button"
       }
     ) }),
-    /* @__PURE__ */ i("div", { className: "uy:hidden uy:justify-between uy:items-center uy:md:flex", children: [
-      /* @__PURE__ */ e(m, { to: a, children: o === "production" ? /* @__PURE__ */ e(c, { label: t, width: 104 }) : /* @__PURE__ */ e(y, { label: t, env: o }) }),
-      r
+    /* @__PURE__ */ a("div", { className: "uy:hidden uy:justify-between uy:items-center uy:md:flex", children: [
+      l({ children: p }),
+      i
     ] }),
-    /* @__PURE__ */ e("div", { className: "uy:hidden uy:md:flex", children: l })
+    /* @__PURE__ */ n("div", { className: "uy:hidden uy:md:flex", children: r })
   ] });
 };
 export {
-  N as AppMenuHeader
+  O as AppMenuHeader
 };

package/dist/esm/components/breadcrumbs/Breadcrumbs.context.js

@@ -1,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
-import { createContext as i, useContext as u } from "react";
-const e = i({
+import { useContext as i, createContext as u } from "react";
+const e = u({
   wrap: "wrap",
   isMobile: !1,
   isStaticApi: !1
@@ -14,7 +14,7 @@ function m({
   return /* @__PURE__ */ s(e.Provider, { value: { wrap: t, isMobile: o, isStaticApi: n }, children: r });
 }
 function d() {
-  const r = u(e);
+  const r = i(e);
   if (!r)
     throw new Error(
       "useBreadcrumbsContext must be used within an BreadcrumbsProvider"

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

@@ -1,33 +1,41 @@
 import { VariantProps } from '@payfit/unity-themes';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactElement, ReactNode, Ref } from 'react';
 import { AriaBreadcrumbsProps as AriaAriaBreadcrumbsProps } from 'react-aria';
 import { BreadcrumbsProps as AriaBreadcrumbsProps } from 'react-aria-components';
-import { BreadcrumbProps } from './parts/Breadcrumb.js';
+import { Breadcrumb } from './parts/Breadcrumb.js';
 import { breadcrumbsVariant } from './Breadcrumbs.variant.js';
-export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBreadcrumbsProps<BreadcrumbsProps>, 'onAction'> {
+export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBreadcrumbsProps<never>, 'onAction'> {
     items?: never;
     /**
-     * The breadcrumb list to render (static api)
+     * The breadcrumb list to render (static API)
      */
     children: ReactNode;
     /**
-     * If the breadcrumbs should wrap or not
+     * Whether the breadcrumbs should wrap or not
      */
     wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
 }
-export interface BreadcrumbsWithItemProps extends AriaAriaBreadcrumbsProps, VariantProps<typeof breadcrumbsVariant>, Pick<AriaBreadcrumbsProps<BreadcrumbsProps>, 'onAction'> {
+export interface BreadcrumbsWithItemProps<TItem extends {
+    label: string;
+}> extends AriaAriaBreadcrumbsProps, VariantProps<typeof breadcrumbsVariant>, Pick<AriaBreadcrumbsProps<TItem>, 'onAction'> {
     /**
      * The list of items to render, when using the dynamic API.
      */
-    items: BreadcrumbProps[];
+    items: TItem[];
     /**
-     * The function renderer to render each part of the breadcrumbs (dynamic api)
+     * The render function for each breadcrumb item (dynamic API)
      */
-    children: (item: BreadcrumbProps) => ReactNode;
+    children: (item: TItem) => ReactElement<ComponentPropsWithoutRef<typeof Breadcrumb>>;
     /**
-     * If the breadcrumbs should wrap or not
+     * Whether the breadcrumbs should wrap or not
      */
     wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
 }
-declare const Breadcrumbs: import('react').ForwardRefExoticComponent<(BreadcrumbsProps | BreadcrumbsWithItemProps) & import('react').RefAttributes<HTMLOListElement>>;
+declare const Breadcrumbs: (<TItem extends {
+    label: string;
+}>(props: (BreadcrumbsProps | BreadcrumbsWithItemProps<TItem>) & {
+    ref?: Ref<HTMLOListElement>;
+}) => ReactNode) & {
+    displayName: string;
+};
 export { Breadcrumbs };

package/dist/esm/components/breadcrumbs/Breadcrumbs.js

@@ -1,30 +1,41 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as m, Fragment as d } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as d, Fragment as m } from "react";
 import { Breadcrumbs as p } from "react-aria-components";
 import { useBreakpointListener as u } from "../../hooks/use-breakpoint-listener.js";
-import { BreadcrumbsProvider as f } from "./Breadcrumbs.context.js";
-import { breadcrumbsVariant as l } from "./Breadcrumbs.variant.js";
-const b = (o, r, t) => o ? r.length === 0 ? null : t(r.at(r.length === 1 ? 0 : -2)) : r.map((a) => /* @__PURE__ */ e(d, { children: t(a) }, `${a.label}${a.href}`)), w = m(({ items: o, children: r, wrap: t = "nowrap", ...a }, i) => {
-  const { base: c } = l({ wrap: t }), n = u(), s = n === "xs" || n === "sm";
-  return /* @__PURE__ */ e(
-    f,
+import { BreadcrumbsProvider as l } from "./Breadcrumbs.context.js";
+import { breadcrumbsVariant as f } from "./Breadcrumbs.variant.js";
+const b = (a, o, n) => a ? o.length === 0 ? null : n(o.at(o.length === 1 ? 0 : -2)) : o.map((r, t) => {
+  const e = "id" in r && r.id && typeof r.id == "string" ? r.id : `${r.label}-${t}`;
+  return /* @__PURE__ */ s(m, { children: n(r) }, e);
+});
+function B({
+  items: a,
+  children: o,
+  wrap: n = "nowrap",
+  ...r
+}, t) {
+  const { base: e } = f({ wrap: n }), i = u(), c = i === "xs" || i === "sm";
+  return /* @__PURE__ */ s(
+    l,
     {
-      wrap: t,
-      isMobile: s,
-      isStaticApi: o === void 0,
-      children: /* @__PURE__ */ e(
+      wrap: n,
+      isMobile: c,
+      isStaticApi: a === void 0,
+      children: /* @__PURE__ */ s(
         p,
         {
           "data-dd-privacy": "allow",
-          ref: i,
-          className: c(),
-          ...a,
-          children: o ? b(s, o, r) : r
+          ref: t,
+          className: e(),
+          ...r,
+          children: a ? b(c, a, o) : o
         }
       )
     }
   );
-});
+}
+const y = d(B);
+y.displayName = "Breadcrumbs";
 export {
-  w as Breadcrumbs
+  y as Breadcrumbs
 };

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.d.ts

@@ -1,9 +1,34 @@
+import { ComponentPropsWithoutRef, ReactElement } from 'react';
 import { BreadcrumbProps as AriaBreadcrumbProps } from 'react-aria-components';
-export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children'> {
-    /** The link of the breadcrumb */
-    href: string;
-    /** The text of the breadcrumb */
-    label: string;
+import { RawBreadcrumbLinkProps } from './RawBreadcrumbLink.js';
+export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children' | 'className' | 'style'> {
+    /**
+     * A single BreadcrumbLink child element
+     */
+    children: ReactElement<ComponentPropsWithoutRef<'a'> & RawBreadcrumbLinkProps>;
 }
+/**
+ * A semantic wrapper component for breadcrumb items that displays navigation hierarchy.
+ * Accepts exactly one BreadcrumbLink as a child to maintain design system consistency.
+ * @param props - Breadcrumb props including the BreadcrumbLink child
+ * @example
+ * ```tsx
+ * import { Breadcrumb, BreadcrumbLink } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Breadcrumb>
+ *       <BreadcrumbLink href="/dashboard">Dashboard</BreadcrumbLink>
+ *     </Breadcrumb>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Only accepts a single BreadcrumbLink component as a child
+ * - Automatically handles current page styling (disabled state)
+ * - Displays caret icons as separators between breadcrumb items
+ * - On mobile, displays a back arrow for the previous breadcrumb
+ * @see {@link BreadcrumbProps} for all available props
+ */
 declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLLIElement>>;
 export { Breadcrumb };

package/dist/esm/components/breadcrumbs/parts/Breadcrumb.js

@@ -1,33 +1,41 @@
-import { jsxs as i, jsx as r, Fragment as h } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { Breadcrumb as s } from "react-aria-components";
-import { Icon as m } from "../../icon/Icon.js";
-import { Link as u } from "../../link/Link.js";
-import { Tooltip as g } from "../../tooltip/Tooltip.js";
-import { useBreadcrumbsContext as w } from "../Breadcrumbs.context.js";
-import { breadcrumbsVariant as B } from "../Breadcrumbs.variant.js";
-const C = 25, l = ({ children: t, href: e }) => t.length > C ? /* @__PURE__ */ r(g, { title: t, children: /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }) }) : /* @__PURE__ */ r(u, { isExact: !0, href: e, color: "secondary", maxCharactersTruncation: 25, children: t }), R = x(
-  (t, e) => {
-    const { wrap: d, isMobile: f, isStaticApi: p } = w(), { breadcrumb: o } = B({ wrap: d });
-    if (!t)
-      return null;
-    const { href: n, label: a, ...c } = t;
-    return f && !p ? /* @__PURE__ */ i(s, { ref: e, ...c, className: o(), children: [
-      /* @__PURE__ */ r(m, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
-      /* @__PURE__ */ r(l, { href: n, children: a })
-    ] }) : /* @__PURE__ */ r(s, { ref: e, ...c, className: o(), children: ({ isCurrent: b }) => b ? /* @__PURE__ */ r("span", { className: "uy:text-nowrap uy:text-content-neutral-lowest", children: a }) : /* @__PURE__ */ i(h, { children: [
-      /* @__PURE__ */ r(l, { href: n, children: a }),
-      /* @__PURE__ */ r(
-        m,
+import { jsxs as i, jsx as e, Fragment as p } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { Breadcrumb as n } from "react-aria-components";
+import { Icon as s } from "../../icon/Icon.js";
+import { useBreadcrumbsContext as f } from "../Breadcrumbs.context.js";
+import { breadcrumbsVariant as h } from "../Breadcrumbs.variant.js";
+const x = b(
+  ({ children: r, ...t }, a) => {
+    const { wrap: c, isMobile: m, isStaticApi: u } = f(), { breadcrumb: o } = h({ wrap: c });
+    return m && !u ? /* @__PURE__ */ i(n, { ref: a, ...t, className: o(), children: [
+      /* @__PURE__ */ e(s, { src: "CaretLeftOutlined", "aria-hidden": "true" }),
+      r
+    ] }) : /* @__PURE__ */ e(n, { ref: a, ...t, className: o(), children: ({ isCurrent: d }) => {
+      const l = typeof r.props.children == "string" ? r.props.children : "";
+      return d ? /* @__PURE__ */ e(
+        "span",
         {
-          src: "CaretRightOutlined",
-          "aria-hidden": "true",
-          color: "content.neutral.lowest"
+          className: "uy:text-nowrap uy:text-content-neutral-lowest",
+          role: "link",
+          "aria-disabled": "true",
+          "aria-current": "page",
+          children: l
         }
-      )
-    ] }) });
+      ) : /* @__PURE__ */ i(p, { children: [
+        r,
+        /* @__PURE__ */ e(
+          s,
+          {
+            src: "CaretRightOutlined",
+            "aria-hidden": "true",
+            color: "content.neutral.lowest"
+          }
+        )
+      ] });
+    } });
   }
 );
+x.displayName = "Breadcrumb";
 export {
-  R as Breadcrumb
+  x as Breadcrumb
 };