@ledgerhq/lumen-ui-react 0.1.61 → 0.1.63

package/dist/lib/Components/core/Timeline/Timeline.d.ts

@@ -0,0 +1,54 @@
+import { TimelineItemCaptionProps, TimelineItemBodyProps, TimelineItemDescriptionProps, TimelineItemHeaderProps, TimelineItemLeadingProps, TimelineItemLeadingRowProps, TimelineItemProps, TimelineItemTitleProps, TimelineItemTrailingProps, TimelineProps } from './types';
+/**
+ * Vertical timeline. Lays out its items and holds no state of its own.
+ *
+ * @example
+ * <Timeline>
+ *   <TimelineItem>
+ *     <TimelineItemHeader>
+ *       <TimelineItemLeading>
+ *         <TimelineItemTitle>Payment confirmed</TimelineItemTitle>
+ *       </TimelineItemLeading>
+ *     </TimelineItemHeader>
+ *   </TimelineItem>
+ * </Timeline>
+ */
+export declare const Timeline: ({ ref, children, className, ...props }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * One row of a timeline. Draws the indicator from `status` and the connector
+ * to the neighbouring items.
+ */
+export declare const TimelineItem: ({ ref, status, children, className, ...props }: TimelineItemProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Row beside the indicator. Holds the leading column and the trailing slot.
+ */
+export declare const TimelineItemHeader: ({ ref, children, className, ...props }: TimelineItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Caption, title, and description column.
+ */
+export declare const TimelineItemLeading: ({ ref, children, className, ...props }: TimelineItemLeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Horizontal row for a title or description beside a tag.
+ */
+export declare const TimelineItemLeadingRow: ({ ref, children, className, ...props }: TimelineItemLeadingRowProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Overline above the title.
+ */
+export declare const TimelineItemCaption: ({ ref, children, className, ...props }: TimelineItemCaptionProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Title. An `idle` item uses the muted tone.
+ */
+export declare const TimelineItemTitle: ({ ref, children, className, ...props }: TimelineItemTitleProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Description under the title.
+ */
+export declare const TimelineItemDescription: ({ ref, children, className, ...props }: TimelineItemDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * End-aligned slot in the header.
+ */
+export declare const TimelineItemTrailing: ({ ref, children, className, ...props }: TimelineItemTrailingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Block under the header, indented past the indicator.
+ */
+export declare const TimelineItemBody: ({ ref, children, className, ...props }: TimelineItemBodyProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Timeline.d.ts.map

package/dist/lib/Components/core/Timeline/Timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Timeline/Timeline.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,wBAAwB,EACxB,qBAAqB,EACrB,4BAA4B,EAC5B,uBAAuB,EACvB,wBAAwB,EACxB,2BAA2B,EAC3B,iBAAiB,EAEjB,sBAAsB,EACtB,yBAAyB,EACzB,aAAa,EACd,MAAM,SAAS,CAAC;AAmEjB;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,GAAI,wCAKtB,aAAa,4CAUf,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,gDAM1B,iBAAiB,4CAiBnB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,wCAKhC,uBAAuB,4CAmBzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,wCAKjC,wBAAwB,4CAU1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,wCAKpC,2BAA2B,4CAU7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,wCAKjC,wBAAwB,4CAU1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,wCAK/B,sBAAsB,4CAexB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,uBAAuB,GAAI,wCAKrC,4BAA4B,4CAU9B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAAI,wCAKlC,yBAAyB,4CAa3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,wCAK9B,qBAAqB,4CAUvB,CAAC"}

package/dist/lib/Components/core/Timeline/Timeline.js

@@ -0,0 +1,228 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { cn as s, createSafeContext as d } from "../../../../libs/utils-shared/dist/index.js";
+import { cva as o } from "class-variance-authority";
+import { Spinner as c } from "../Spinner/Spinner.js";
+import { ClockFill as u } from "../../symbols/icons/ClockFill.js";
+import { DeleteCircleFill as x } from "../../symbols/icons/DeleteCircleFill.js";
+import { CheckmarkCircleFill as f } from "../../symbols/icons/CheckmarkCircleFill.js";
+const [p, m] = d("TimelineItem"), N = o("min-w-0 truncate body-2-semi-bold", {
+  variants: {
+    muted: {
+      true: "text-muted",
+      false: "text-base"
+    }
+  }
+}), h = /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "size-12 rounded-full bg-muted-pressed" }), b = {
+  success: /* @__PURE__ */ t(f, { "aria-hidden": !0, className: "text-success", size: 24 }),
+  error: /* @__PURE__ */ t(x, { "aria-hidden": !0, className: "text-error", size: 24 }),
+  pending: /* @__PURE__ */ t(u, { "aria-hidden": !0, className: "text-muted", size: 24 }),
+  loading: /* @__PURE__ */ t(c, { className: "text-muted", size: 24 }),
+  idle: /* @__PURE__ */ t(
+    "span",
+    {
+      "aria-hidden": !0,
+      className: "size-20 rounded-full border-2 border-muted-subtle-hover"
+    }
+  )
+}, v = ({ status: e }) => /* @__PURE__ */ t(
+  "span",
+  {
+    className: "mt-16 flex size-32 shrink-0 items-center justify-center self-start",
+    "data-testid": `timeline-indicator-${e ?? "neutral"}`,
+    children: e ? b[e] : h
+  }
+), T = () => /* @__PURE__ */ l(
+  "div",
+  {
+    "aria-hidden": !0,
+    className: "pointer-events-none absolute inset-y-0 start-0 flex w-32 flex-col items-center",
+    children: [
+      /* @__PURE__ */ t(
+        "span",
+        {
+          className: "h-16 w-0 shrink-0 border-l-2 border-muted-subtle-hover group-first/item:invisible",
+          "data-line": "in"
+        }
+      ),
+      /* @__PURE__ */ t("span", { className: "h-32 shrink-0" }),
+      /* @__PURE__ */ t(
+        "span",
+        {
+          className: "w-0 flex-1 border-l-2 border-muted-subtle-hover group-last/item:hidden",
+          "data-line": "out"
+        }
+      )
+    ]
+  }
+), R = ({
+  ref: e,
+  children: i,
+  className: n,
+  ...r
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: e,
+    className: s("flex w-full min-w-0 flex-col", n),
+    ...r,
+    children: i
+  }
+), j = ({
+  ref: e,
+  status: i,
+  children: n,
+  className: r,
+  ...a
+}) => /* @__PURE__ */ t(p, { value: { status: i }, children: /* @__PURE__ */ l(
+  "div",
+  {
+    ref: e,
+    "data-testid": "timeline-item",
+    className: s(
+      "group/item relative flex w-full min-w-0 flex-col",
+      r
+    ),
+    ...a,
+    children: [
+      /* @__PURE__ */ t(T, {}),
+      n
+    ]
+  }
+) }), F = ({
+  ref: e,
+  children: i,
+  className: n,
+  ...r
+}) => {
+  const { status: a } = m({
+    consumerName: "TimelineItemHeader",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: e,
+      className: s(
+        "flex min-h-64 w-full min-w-0 items-center gap-8",
+        n
+      ),
+      ...r,
+      children: [
+        /* @__PURE__ */ t(v, { status: a }),
+        i
+      ]
+    }
+  );
+}, S = ({
+  ref: e,
+  children: i,
+  className: n,
+  ...r
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: e,
+    className: s("flex min-w-0 flex-1 flex-col gap-2", n),
+    ...r,
+    children: i
+  }
+), q = ({
+  ref: e,
+  children: i,
+  className: n,
+  ...r
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: e,
+    className: s("flex min-w-0 items-center gap-4", n),
+    ...r,
+    children: i
+  }
+), B = ({
+  ref: e,
+  children: i,
+  className: n,
+  ...r
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: e,
+    className: s("min-w-0 truncate body-4 text-muted", n),
+    ...r,
+    children: i
+  }
+), D = ({
+  ref: e,
+  children: i,
+  className: n,
+  ...r
+}) => {
+  const { status: a } = m({
+    consumerName: "TimelineItemTitle",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: e,
+      className: s(N({ muted: a === "idle" }), n),
+      ...r,
+      children: i
+    }
+  );
+}, H = ({
+  ref: e,
+  children: i,
+  className: n,
+  ...r
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: e,
+    className: s("min-w-0 truncate body-3 text-muted", n),
+    ...r,
+    children: i
+  }
+), L = ({
+  ref: e,
+  children: i,
+  className: n,
+  ...r
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: e,
+    className: s(
+      "ms-auto flex shrink-0 flex-col items-end text-end body-2-semi-bold text-base",
+      n
+    ),
+    ...r,
+    children: i
+  }
+), P = ({
+  ref: e,
+  children: i,
+  className: n,
+  ...r
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: e,
+    className: s("ms-40 min-w-0 pt-8 pb-12 body-3 text-muted", n),
+    ...r,
+    children: i
+  }
+);
+export {
+  R as Timeline,
+  j as TimelineItem,
+  P as TimelineItemBody,
+  B as TimelineItemCaption,
+  H as TimelineItemDescription,
+  F as TimelineItemHeader,
+  S as TimelineItemLeading,
+  q as TimelineItemLeadingRow,
+  D as TimelineItemTitle,
+  L as TimelineItemTrailing
+};

package/dist/lib/Components/core/Timeline/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Timeline';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/core/Timeline/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Timeline/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/lib/Components/core/Timeline/types.d.ts

@@ -0,0 +1,148 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type TimelineItemStatus = 'idle' | 'success' | 'error' | 'pending' | 'loading';
+/**
+ * Props for the Timeline root.
+ */
+export type TimelineProps = {
+    /**
+     * The timeline items.
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Custom classname.
+     */
+    className?: string;
+} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+/**
+ * Props for one timeline item.
+ */
+export type TimelineItemProps = {
+    /**
+     * Indicator and title tone. Omit it for a neutral item.
+     * @default undefined
+     */
+    status?: TimelineItemStatus;
+    /**
+     * Header and content of the item.
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Custom classname.
+     */
+    className?: string;
+} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+/**
+ * Props for the row beside the indicator.
+ */
+export type TimelineItemHeaderProps = {
+    /**
+     * Leading and trailing parts.
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Custom classname.
+     */
+    className?: string;
+} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+/**
+ * Props for the text column opposite the trailing slot.
+ */
+export type TimelineItemLeadingProps = {
+    /**
+     * Caption, title, and description.
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Custom classname.
+     */
+    className?: string;
+} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+/**
+ * Props for a horizontal row inside the leading column.
+ */
+export type TimelineItemLeadingRowProps = {
+    /**
+     * A title or description beside an optional tag.
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Custom classname.
+     */
+    className?: string;
+} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+/**
+ * Props for the overline above the title.
+ */
+export type TimelineItemCaptionProps = {
+    /**
+     * Overline text. A date is the common case.
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Custom classname.
+     */
+    className?: string;
+} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+/**
+ * Props for the item title.
+ */
+export type TimelineItemTitleProps = {
+    /**
+     * Title text.
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Custom classname.
+     */
+    className?: string;
+} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+/**
+ * Props for the description under the title.
+ */
+export type TimelineItemDescriptionProps = {
+    /**
+     * Description text.
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Custom classname.
+     */
+    className?: string;
+} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+/**
+ * Props for the end-aligned header slot.
+ */
+export type TimelineItemTrailingProps = {
+    /**
+     * Amount, tag, or text.
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Custom classname.
+     */
+    className?: string;
+} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+/**
+ * Props for the block under the header.
+ */
+export type TimelineItemBodyProps = {
+    /**
+     * Content indented past the indicator.
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Custom classname.
+     */
+    className?: string;
+} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/core/Timeline/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Timeline/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,4BAA4B,GAAG;IACzC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC"}

package/dist/lib/Components/core/Toast/Toast.d.ts

@@ -0,0 +1,25 @@
+import { ToastProps } from './types';
+/**
+ * A single toast item: an inverted, compact surface with a status icon or
+ * spinner, a title, an optional trailing action and a close button.
+ *
+ * This is the presentational piece. For the queue, timing and imperative API,
+ * use `Toaster` + `toast`.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-toast--docs Guidelines}
+ *
+ * @example
+ * import { Toast } from '@ledgerhq/lumen-ui-react';
+ *
+ * <Toast appearance="success" title="Payment done" onClose={() => {}} />
+ *
+ * @example
+ * // Loading with an action
+ * <Toast
+ *   loading
+ *   title="Uploading…"
+ *   action={{ label: 'Cancel', onAction: () => {} }}
+ * />
+ */
+export declare const Toast: ({ ref, appearance, loading, title, action, onClose, closeAriaLabel, className, role, ...props }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toast.d.ts.map

package/dist/lib/Components/core/Toast/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Toast/Toast.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAmB,UAAU,EAAE,MAAM,SAAS,CAAC;AAU3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK,GAAI,iGAWnB,UAAU,4CAqDZ,CAAC"}

package/dist/lib/Components/core/Toast/Toast.js

@@ -0,0 +1,68 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { cn as l } from "../../../../libs/utils-shared/dist/index.js";
+import { toastVariants as N } from "./styles.js";
+import { useCommonTranslation as x } from "../../../../translations/translations.js";
+import { Spinner as v } from "../Spinner/Spinner.js";
+import { Button as u } from "../Button/Button.js";
+import { IconButton as k } from "../IconButton/IconButton.js";
+import { Close as b } from "../../symbols/icons/Close.js";
+import { DeleteCircleFill as w } from "../../symbols/icons/DeleteCircleFill.js";
+import { WarningFill as z } from "../../symbols/icons/WarningFill.js";
+import { CheckmarkCircleFill as C } from "../../symbols/icons/CheckmarkCircleFill.js";
+const g = {
+  success: /* @__PURE__ */ e(C, { size: 20, className: "text-success-on-interactive" }),
+  warning: /* @__PURE__ */ e(z, { size: 20, className: "text-warning-on-interactive" }),
+  error: /* @__PURE__ */ e(w, { size: 20, className: "text-error-on-interactive" })
+}, V = ({
+  ref: n,
+  appearance: s = "info",
+  loading: i = !1,
+  title: m,
+  action: r,
+  onClose: o,
+  closeAriaLabel: c,
+  className: f,
+  role: p,
+  ...d
+}) => {
+  const { t: h } = x(), t = i || s !== "info";
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: n,
+      role: p ?? (s === "error" || s === "warning" ? "alert" : "status"),
+      className: l(N({ hasLeading: t }), f),
+      ...d,
+      children: [
+        i ? /* @__PURE__ */ e("div", { className: "pt-10", children: /* @__PURE__ */ e(v, { size: 20, className: "shrink-0 text-on-interactive" }) }) : s !== "info" && /* @__PURE__ */ e("span", { className: "flex shrink-0 pt-10", children: g[s] }),
+        /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 flex-wrap items-start gap-8", children: [
+          /* @__PURE__ */ e("div", { className: "min-w-0 flex-auto pt-10 pr-16 last:pb-10", children: /* @__PURE__ */ e("p", { className: "line-clamp-5 body-2", children: m }) }),
+          r && /* @__PURE__ */ e(
+            u,
+            {
+              appearance: "base",
+              size: "sm",
+              className: l("shrink-0", t && "-ml-16"),
+              onClick: r.onAction,
+              children: r.label
+            }
+          )
+        ] }),
+        o && /* @__PURE__ */ e(
+          k,
+          {
+            appearance: "base",
+            size: "sm",
+            className: "shrink-0",
+            icon: b,
+            onClick: () => o(),
+            "aria-label": c || h("common.closeAriaLabel")
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  V as Toast
+};

package/dist/lib/Components/core/Toast/Toaster.d.ts

@@ -0,0 +1,27 @@
+import { ToasterProps } from './types';
+/**
+ * Subscribes to the module-level toast store and renders the queue viewport
+ * in a portal on `document.body`. Mount it once, anywhere in the tree — it
+ * takes no children. `toast.*` from `@ledgerhq/lumen-utils-shared` works even
+ * before this mounts, or from outside the React tree entirely.
+ *
+ * Mount exactly one `<Toaster />` for the whole app. Every instance renders
+ * the full queue, so a second one duplicates every toast on screen — mounting
+ * more than one logs a console warning.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/docs/react-toast--docs Guidelines}
+ *
+ * @example
+ * import { Toaster } from '@ledgerhq/lumen-ui-react';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <Toaster position="bottom-right" maxItems={3} />
+ *       <Routes />
+ *     </>
+ *   );
+ * }
+ */
+export declare const Toaster: ({ maxItems, position, insets, durations, }: ToasterProps) => import('react').ReactPortal | null;
+//# sourceMappingURL=Toaster.d.ts.map

package/dist/lib/Components/core/Toast/Toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Toast/Toaster.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAa,YAAY,EAAiB,MAAM,SAAS,CAAC;AAqDtE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,OAAO,GAAI,4CAKrB,YAAY,uCA+Cd,CAAC"}

package/dist/lib/Components/core/Toast/Toaster.js

@@ -0,0 +1,92 @@
+import { jsx as l } from "react/jsx-runtime";
+import { toastStore as n, resolveMaxItems as v, useToastBacklog as g, resolveDurationMs as b, useToastLifecycle as T } from "../../../../libs/utils-shared/dist/index.js";
+import { useSyncExternalStore as S, useState as x, useEffect as y } from "react";
+import { createPortal as M } from "react-dom";
+import { useToastCollapse as V } from "./hooks/useToastCollapse.js";
+import { useToastViewportPause as E } from "./hooks/useToastViewportPause.js";
+import { positionVariants as w, collapseVariants as q, slideExitVariants as C, queuedEnterVariants as I, slideEnterVariants as N } from "./styles.js";
+import { Toast as P } from "./Toast.js";
+const Q = ({
+  item: t,
+  durationMs: s,
+  queued: o,
+  position: r,
+  paused: c,
+  onDismiss: d
+}) => {
+  const e = t.exiting ?? !1, { contentRef: u, height: p } = V();
+  T({ durationMs: s, paused: c, exiting: e, onDismiss: d });
+  const a = r.startsWith("top") ? "top" : "bottom", m = () => e ? C({ position: r }) : o ? I({ edge: a }) : N({ position: r });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-slot": "toast-collapse",
+      className: q({ edge: a, exiting: e }),
+      style: { height: e ? 0 : p },
+      children: /* @__PURE__ */ l(
+        "div",
+        {
+          ref: u,
+          "data-slot": "toast-item",
+          className: m(),
+          style: e ? { animationFillMode: "forwards" } : void 0,
+          children: /* @__PURE__ */ l(
+            P,
+            {
+              appearance: t.appearance,
+              loading: t.loading,
+              title: t.title,
+              action: t.action,
+              onClose: t.dismissible ? d : void 0
+            }
+          )
+        }
+      )
+    }
+  );
+}, H = ({
+  maxItems: t = 3,
+  position: s = "bottom-right",
+  insets: o = {},
+  durations: r
+}) => {
+  const c = S(
+    n.subscribe,
+    n.getSnapshot,
+    n.getServerSnapshot
+  ), [d, e] = x(!1), { paused: u, viewportProps: p } = E();
+  y(() => (e(!0), n.registerRenderer()), []);
+  const a = v(t), m = c.slice(0, a), h = g(c, a), f = s.startsWith("top");
+  return d ? M(
+    /* @__PURE__ */ l(
+      "div",
+      {
+        "data-slot": "toast-viewport",
+        className: w({ position: s }),
+        style: {
+          left: o.left,
+          right: o.right,
+          top: f ? o.top : void 0,
+          bottom: f ? void 0 : o.bottom
+        },
+        ...p,
+        children: m.map((i) => /* @__PURE__ */ l(
+          Q,
+          {
+            item: i,
+            durationMs: b(i, r),
+            queued: h(i.id),
+            position: s,
+            paused: u,
+            onDismiss: () => n.dismiss(i.id)
+          },
+          i.id
+        ))
+      }
+    ),
+    document.body
+  ) : null;
+};
+export {
+  H as Toaster
+};

package/dist/lib/Components/core/Toast/hooks/useToastCollapse.d.ts

@@ -0,0 +1,15 @@
+import { RefObject } from 'react';
+type UseToastCollapseReturn = {
+    contentRef: RefObject<HTMLDivElement | null>;
+    height: number | undefined;
+};
+/**
+ * Measures the toast content so the collapse slot can animate its height.
+ * `height` stays `undefined` until the first observation, leaving the slot
+ * at its intrinsic size.
+ *
+ * @internal
+ */
+export declare const useToastCollapse: () => UseToastCollapseReturn;
+export {};
+//# sourceMappingURL=useToastCollapse.d.ts.map