@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

package/dist/esm/components/bottom-sheet/BottomSheet.d.ts

@@ -0,0 +1,137 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const bottomSheet: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface BottomSheetProps extends PropsWithChildren<VariantProps<typeof bottomSheet>> {
+    /**
+     * Controls whether the sheet can be dismissed by clicking outside or using escape key.
+     * @default true
+     */
+    isDismissable?: boolean;
+    /**
+     * When true, pressing the Escape key will not close the sheet.
+     * This is useful when you need to prevent accidental dismissal.
+     * @default false
+     */
+    isKeyboardDismissDisabled?: boolean;
+    /**
+     * Controls the open state of the sheet in controlled mode.
+     * Must be used together with `onOpenChange`.
+     */
+    isOpen?: boolean;
+    /**
+     * Sets the initial open state in uncontrolled mode.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback fired when the open state changes.
+     * Required when using controlled mode with `isOpen`.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+/**
+ * The BottomSheet component provides a mobile-optimized interface for displaying content
+ * that slides up from the bottom of the screen. It's ideal for secondary tasks and supplementary
+ * information without leaving the current context.
+ *
+ * This component is specifically designed as a bottom-anchored variant, unlike the SidePanel
+ * which adapts to different viewports.
+ *
+ * Control the sheet using either uncontrolled mode with `defaultOpen` or controlled mode with
+ * `isOpen`/`onOpenChange` props. Customize dismissal behavior with `isDismissable` and
+ * `isKeyboardDismissDisabled` props.
+ * @param {BottomSheetProps} props - The props for the BottomSheet component
+ * @see {@link BottomSheetProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   BottomSheet,
+ *   BottomSheetHeader,
+ *   BottomSheetContent,
+ *   BottomSheetFooter,
+ *   Button,
+ *   DialogTrigger
+ * } from '@payfit/unity-components'
+ *
+ * // Uncontrolled example
+ * function BasicExample() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Open bottom sheet</Button>
+ *       <BottomSheet>
+ *         <BottomSheetHeader>Sheet title</BottomSheetHeader>
+ *         <BottomSheetContent>Your content here</BottomSheetContent>
+ *         <BottomSheetFooter>
+ *           <Button variant="secondary">Cancel</Button>
+ *           <Button variant="primary">Save</Button>
+ *         </BottomSheetFooter>
+ *       </BottomSheet>
+ *     </DialogTrigger>
+ *   )
+ * }
+ *
+ * // Controlled example
+ * function ControlledExample() {
+ *   const [isOpen, setIsOpen] = useState(false)
+ *
+ *   return (
+ *     <>
+ *       <Button onPress={() => setIsOpen(true)}>Open bottom sheet</Button>
+ *
+ *       <BottomSheet isOpen={isOpen} onOpenChange={setIsOpen}>
+ *         <BottomSheetHeader>Sheet title</BottomSheetHeader>
+ *         <BottomSheetContent>Your content here</BottomSheetContent>
+ *         <BottomSheetFooter>
+ *           <Button
+ *             variant="primary"
+ *             onPress={() => setIsOpen(false)}
+ *           >
+ *             Close
+ *           </Button>
+ *         </BottomSheetFooter>
+ *       </BottomSheet>
+ *     </>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
+ */
+declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheet };

package/dist/esm/components/bottom-sheet/BottomSheet.js

@@ -0,0 +1,68 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { ModalOverlay as h, Modal as p, Dialog as x } from "react-aria-components";
+import { BottomSheetDragIndicator as w } from "./parts/BottomSheetDragIndicator.js";
+const g = c({
+  slots: {
+    overlay: [
+      "uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
+      "uy:backdrop-blur-sm uy:bg-utility-backdrop/65",
+      "uy:data-[entering]:animate-fade-in uy:data-[exiting]:animate-fade-out"
+    ],
+    wrapper: [
+      "uy:w-full uy:md:max-w-[50svw]",
+      "uy:fixed uy:bottom-0 uy:left-0 uy:right-0 uy:md:left-0 uy:md:right-0 uy:md:mx-auto uy:z-[100]",
+      "uy:bg-surface-neutral uy:rounded-t-200",
+      "uy:shadow-flying",
+      "uy:flex uy:flex-col uy:max-h-[95svh]",
+      "uy:overflow-hidden",
+      "uy:data-[entering]:animate-slide-up-fade-in uy:data-[exiting]:animate-slide-down-fade-out"
+    ],
+    content: [
+      "uy:flex uy:flex-col uy:h-full uy:min-h-[40svh] uy:overflow-hidden uy:outline-none"
+    ]
+  }
+}), v = s(
+  ({
+    children: t,
+    isOpen: o,
+    onOpenChange: a,
+    defaultOpen: u,
+    isDismissable: y = !0,
+    isKeyboardDismissDisabled: r = !1,
+    ...i
+  }, l) => {
+    const { overlay: d, wrapper: n, content: m } = g();
+    return /* @__PURE__ */ e(
+      h,
+      {
+        className: d(),
+        isOpen: o,
+        onOpenChange: a,
+        defaultOpen: u,
+        isDismissable: y,
+        isKeyboardDismissDisabled: r,
+        children: /* @__PURE__ */ f(
+          p,
+          {
+            "data-dd-privacy": "allow",
+            ...i,
+            ref: l,
+            className: n(),
+            "data-unity-bottom-sheet": !0,
+            children: [
+              /* @__PURE__ */ e(w, {}),
+              /* @__PURE__ */ e(x, { className: m(), children: t })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+v.displayName = "BottomSheet";
+export {
+  v as BottomSheet,
+  g as bottomSheet
+};

package/dist/esm/components/bottom-sheet/parts/BottomSheetContent.d.ts

@@ -0,0 +1,56 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const bottomSheetContent: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    scroller: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            scroller?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    scroller: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    scroller: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface BottomSheetContentProps extends PropsWithChildren<VariantProps<typeof bottomSheetContent>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetContent` component renders the main content area of a bottom sheet.
+ * It takes up the majority of the space between the header and footer components
+ * The content is scrollable when it exceeds the available space.
+ * @component
+ * @param {BottomSheetContentProps} props - The props for the `BottomSheetContent` component
+ * @example
+ * ```tsx
+ * import { BottomSheetContent } from '@payfit/unity-components'
+ *
+ * <BottomSheetContent>
+ *   Your panel content here
+ * </BottomSheetContent>
+ * ```
+ * @see {@link BottomSheetContentProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-bottomsheet--docs)
+ */
+declare const BottomSheetContent: import('react').ForwardRefExoticComponent<BottomSheetContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetContent };

package/dist/esm/components/bottom-sheet/parts/BottomSheetContent.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { uyTv as n } from "@payfit/unity-themes";
+const s = n({
+  slots: {
+    base: [
+      "uy:bg-surface-neutral uy:typography-body uy:text-content-neutral",
+      "uy:flex uy:flex-col uy:flex-1 uy:min-h-0 uy:overflow-hidden",
+      "uy:w-full"
+    ],
+    scroller: [
+      "uy:flex-1 uy:overflow-y-auto uy:overflow-x-hidden uy:p-300",
+      "uy:h-full uy:min-h-0"
+    ]
+  }
+}), f = y(
+  ({ children: o, ...t }, l) => {
+    const { base: r, scroller: u } = s();
+    return /* @__PURE__ */ e("section", { ref: l, className: r(), ...t, children: /* @__PURE__ */ e("div", { className: u(), children: o }) });
+  }
+);
+f.displayName = "BottomSheetContent";
+export {
+  f as BottomSheetContent,
+  s as bottomSheetContent
+};

package/dist/esm/components/bottom-sheet/parts/BottomSheetDragIndicator.d.ts

@@ -0,0 +1,40 @@
+export declare const bottomSheetDragIndicator: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    indicator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            indicator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    indicator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * A drag indicator component that connects to the overlay state context and
+ * provides swipe-to-dismiss functionality for the SidePanel.
+ * @internal
+ */
+export declare function BottomSheetDragIndicator(): import("react/jsx-runtime").JSX.Element;
+export declare namespace BottomSheetDragIndicator {
+    var displayName: string;
+}

package/dist/esm/components/bottom-sheet/parts/BottomSheetDragIndicator.js

@@ -0,0 +1,67 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useRef as b, useContext as g } from "react";
+import { uyTv as x } from "@payfit/unity-themes";
+import { useDrag as D } from "@use-gesture/react";
+import { OverlayTriggerStateContext as v } from "react-aria-components";
+import { useBreakpointListener as S } from "../../../hooks/use-breakpoint-listener.js";
+const T = x({
+  slots: {
+    base: [
+      "uy:md:hidden uy:mx-auto uy:py-100 uy:w-500",
+      "uy:cursor-grab uy:touch-action-none"
+    ],
+    indicator: "uy:h-50 uy:rounded-pill uy:bg-content-neutral-lowest"
+  }
+}), I = 100;
+function N() {
+  const r = b(null), o = g(v), n = S(), { base: i, indicator: l } = T(), m = n === "xs" || n === "sm", u = D(
+    (c) => {
+      var s;
+      const {
+        movement: [B, e],
+        direction: [E, d],
+        intentional: f,
+        cancel: y,
+        last: p,
+        event: h
+      } = c;
+      if (!m) {
+        y();
+        return;
+      }
+      h.preventDefault();
+      const t = (s = r.current) == null ? void 0 : s.closest(
+        "[data-unity-bottom-sheet]"
+      );
+      if (t) {
+        if (e < 0) {
+          t.style.transform = "translate3d(0, 0, 0)";
+          return;
+        }
+        t.style.transform = `translate3d(0, ${e}px, 0)`, t.style.transition = "none", p && f && (e > I || d > 0 ? o && setTimeout(() => {
+          o.close();
+        }, 50) : (t.style.transform = "translate3d(0, 0, 0)", t.style.transition = "transform 0.3s ease"));
+      }
+    },
+    {
+      axis: "y",
+      filterTaps: !0,
+      threshold: 5
+    }
+  );
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: i(),
+      "aria-hidden": "true",
+      ref: r,
+      ...u(),
+      children: /* @__PURE__ */ a("div", { className: l() })
+    }
+  );
+}
+N.displayName = "BottomSheetDragIndicator";
+export {
+  N as BottomSheetDragIndicator,
+  T as bottomSheetDragIndicator
+};

package/dist/esm/components/bottom-sheet/parts/BottomSheetFooter.d.ts

@@ -0,0 +1,27 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const bottomSheetFooter: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export interface BottomSheetFooterProps extends PropsWithChildren<VariantProps<typeof bottomSheetFooter>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetFooter` component renders the footer section of a bottom sheet.
+ * It provides a space for action buttons and stays fixed at the bottom of the panel.
+ * On mobile devices, it respects the safe area to avoid being obscured by device UI elements.
+ * @component
+ * @param {BottomSheetFooterProps} props - The props for the `BottomSheetFooter` component
+ * @example
+ * ```tsx
+ * import { BottomSheetFooter, Button } from '@payfit/unity-components'
+ *
+ * <BottomSheetFooter>
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button>Save</Button>
+ * </BottomSheetFooter>
+ * ```
+ * @see {@link BottomSheetFooterProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/navigation-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const BottomSheetFooter: import('react').ForwardRefExoticComponent<BottomSheetFooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetFooter };

package/dist/esm/components/bottom-sheet/parts/BottomSheetFooter.js

@@ -0,0 +1,28 @@
+import { jsx as u } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { uyTv as a } from "@payfit/unity-themes";
+const s = a({
+  base: [
+    "uy:py-150 uy:px-300 uy:w-full",
+    "uy:flex uy:items-center uy:justify-end uy:gap-100 uy:shrink-0",
+    "uy:bg-surface-neutral uy:border-t uy:border-solid uy:border-border-neutral",
+    "uy:sticky uy:bottom-0 uy:z-10",
+    "uy:mt-auto",
+    "uy:pb-[max(env(safe-area-inset-bottom),var(--uy-spacing-200))] uy:md:pb-200"
+  ]
+}), m = y(
+  ({ children: o, className: t, ...e }, r) => /* @__PURE__ */ u(
+    "footer",
+    {
+      ref: r,
+      className: s({ class: t }),
+      ...e,
+      children: o
+    }
+  )
+);
+m.displayName = "BottomSheetFooter";
+export {
+  m as BottomSheetFooter,
+  s as bottomSheetFooter
+};

package/dist/esm/components/bottom-sheet/parts/BottomSheetHeader.d.ts

@@ -0,0 +1,65 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+export declare const bottomSheetHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface BottomSheetHeaderProps extends PropsWithChildren<VariantProps<typeof bottomSheetHeader>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetHeader` component renders the header section of a side panel.
+ * It includes a title and close button, and on mobile it displays a drag handle for bottom sheet interaction.
+ * @component
+ * @param {BottomSheetHeaderProps} props - The props for the `BottomSheetHeader` component
+ * @example
+ * ```tsx
+ * import { BottomSheetHeader } from '@payfit/unity-components'
+ *
+ * <BottomSheetHeader>Title of the panel</BottomSheetHeader>
+ * ```
+ * @see {@link BottomSheetHeaderProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const BottomSheetHeader: import('react').ForwardRefExoticComponent<BottomSheetHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetHeader };

package/dist/esm/components/bottom-sheet/parts/BottomSheetHeader.js

@@ -0,0 +1,45 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { uyTv as i } from "@payfit/unity-themes";
+import { Heading as c } from "react-aria-components";
+import { CircularIconButton as m } from "../../icon-button/CircularIconButton.js";
+const d = i({
+  slots: {
+    base: [
+      "uy:py-200 uy:px-300 uy:w-full",
+      "uy:flex uy:flex-col uy:shrink-0",
+      "uy:bg-surface-neutral uy:rounded-tl-200 uy:rounded-tr-200 uy:shadow-raising",
+      "uy:sticky uy:top-0 uy:z-10"
+    ],
+    content: ["uy:flex uy:items-center uy:w-full"],
+    heading: [
+      "uy:typography-h3 uy:text-center uy:text-content-neutral uy:truncate",
+      "uy:flex-1 uy:min-w-0"
+    ],
+    buttonContainer: ["uy:flex-shrink-0 uy:flex-grow-0 uy:w-[28px]"]
+  }
+}), f = y(
+  ({ children: o, ...r }, n) => {
+    const { base: u, content: l, heading: a, buttonContainer: t } = d();
+    return /* @__PURE__ */ e("header", { ref: n, className: u(), ...r, children: /* @__PURE__ */ s("div", { className: l(), children: [
+      /* @__PURE__ */ e("div", { className: t() }),
+      /* @__PURE__ */ e(c, { slot: "title", className: a(), children: o }),
+      /* @__PURE__ */ e("div", { className: t(), children: /* @__PURE__ */ e(
+        m,
+        {
+          asElement: "button",
+          slot: "close",
+          icon: "CloseOutlined",
+          title: "Close",
+          size: "large",
+          color: "content.neutral.low"
+        }
+      ) })
+    ] }) });
+  }
+);
+f.displayName = "BottomSheetHeader";
+export {
+  f as BottomSheetHeader,
+  d as bottomSheetHeader
+};

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

@@ -0,0 +1,12 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+import { breadcrumbsVariant } from './Breadcrumbs.variant.js';
+interface BreadcrumbsContextValue {
+    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+    isMobile: boolean;
+    isStaticApi: boolean;
+}
+export declare const BreadcrumbsContext: import('react').Context<BreadcrumbsContextValue>;
+export declare function BreadcrumbsProvider({ children, wrap, isMobile, isStaticApi, }: PropsWithChildren<BreadcrumbsContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useBreadcrumbsContext(): BreadcrumbsContextValue;
+export {};

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

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

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

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as m, Fragment as d } 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,
+    {
+      wrap: t,
+      isMobile: s,
+      isStaticApi: o === void 0,
+      children: /* @__PURE__ */ e(
+        p,
+        {
+          "data-dd-privacy": "allow",
+          ref: i,
+          className: c(),
+          ...a,
+          children: o ? b(s, o, r) : r
+        }
+      )
+    }
+  );
+});
+export {
+  w as Breadcrumbs
+};

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

@@ -0,0 +1,37 @@
+export declare const breadcrumbsVariant: import('tailwind-variants').TVReturnType<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, undefined, {
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, import('tailwind-variants').TVReturnType<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, undefined, unknown, unknown, undefined>>;