@ledgerhq/lumen-ui-react 0.1.53 → 0.1.55

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

@@ -1,23 +1,22 @@
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import { cn as g, useDisabledContext as v } from "../../../../libs/utils-shared/dist/index.js";
-import { cva as b } from "class-variance-authority";
-import { useRef as C } from "react";
-import { useSegmentedControlContext as y, SegmentedControlContextProvider as S } from "./SegmentedControlContext.js";
-import { useSegmentedControlSelectedIndex as w, usePillElementLayoutEffect as N } from "./usePillElementLayoutEffect.js";
-const p = {
-  root: b("relative flex flex-row items-center rounded-sm", {
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import { cn as h, useDisabledContext as y } from "../../../../libs/utils-shared/dist/index.js";
+import { cva as m } from "class-variance-authority";
+import { useMemo as w, useRef as v } from "react";
+import { useSegmentedControlContext as k, SegmentedControlContextProvider as N } from "./SegmentedControlContext.js";
+import { useSegmentedControlSelectedIndex as R, usePillElementLayoutEffect as I } from "./usePillElementLayoutEffect.js";
+import { useScrollArrows as j, useScrollSelectedIntoView as z } from "./useScrollArrows.js";
+import { ChevronLeft as A } from "../../symbols/icons/ChevronLeft.js";
+import { ChevronRight as L } from "../../symbols/icons/ChevronRight.js";
+const f = {
+  root: m("relative flex-row items-center rounded-sm", {
     variants: {
-      appearance: {
-        background: "bg-surface",
-        "no-background": "bg-transparent"
-      },
       tabLayout: {
         fit: "inline-flex",
-        fixed: "w-full"
+        fixed: "flex w-full"
       }
     }
   }),
-  pill: b("pointer-events-none absolute top-0 left-0 z-0 rounded-sm", {
+  pill: m("pointer-events-none absolute top-0 left-0 z-0 rounded-sm", {
     variants: {
       disabled: {
         true: "bg-base-transparent-pressed",
@@ -29,8 +28,9 @@ const p = {
       }
     }
   }),
-  item: b(
-    "z-10 flex cursor-pointer flex-row items-center justify-center rounded-sm px-16 py-8 select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus disabled:cursor-not-allowed",
+  item: m(
+    // The focus ring is inset because the scroll container clips anything drawn outside the box.
+    "z-10 flex cursor-pointer flex-row items-center justify-center rounded-sm px-16 py-8 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus disabled:cursor-not-allowed",
     {
       variants: {
         selected: {
@@ -51,112 +51,257 @@ const p = {
         }
       ]
     }
+  ),
+  scrollArea: m("relative rounded-sm", {
+    variants: {
+      appearance: {
+        background: "bg-surface",
+        "no-background": "bg-transparent"
+      },
+      tabLayout: {
+        // Fit lets the segments size themselves, so the area must not stretch.
+        fit: "",
+        fixed: "w-full"
+      }
+    }
+  }),
+  arrow: m(
+    "absolute inset-y-0 z-20 flex cursor-pointer items-center justify-center rounded-sm py-8 text-muted transition-opacity duration-200 hover:text-muted-hover",
+    {
+      variants: {
+        visible: {
+          true: "opacity-100",
+          false: "pointer-events-none opacity-0"
+        },
+        side: {
+          left: "left-0 pr-16 pl-8",
+          right: "right-0 pr-8 pl-16"
+        }
+      }
+    }
   )
 };
-function k({
-  value: s,
-  children: i,
+function B(e, t) {
+  return `linear-gradient(to right, ${e ? "transparent 0px, transparent 40px, black 72px" : "black 0px"}, ${t ? "black calc(100% - 72px), transparent calc(100% - 40px), transparent 100%" : "black 100%"})`;
+}
+function x({
+  side: e,
   icon: t,
-  trailingContent: l,
-  onClick: d,
-  className: c,
-  ...r
+  label: r,
+  visible: n,
+  onClick: a
 }) {
-  const { selectedValue: u, onSelectedChange: o, disabled: e, tabLayout: m } = y(), n = u === s;
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      "aria-label": r,
+      "aria-hidden": !n,
+      tabIndex: -1,
+      disabled: !n,
+      onClick: a,
+      className: f.arrow({ visible: n, side: e }),
+      children: /* @__PURE__ */ o(t, { size: 20 })
+    }
+  );
+}
+function D({
+  appearance: e,
+  tabLayout: t,
+  className: r,
+  selectedIndex: n,
+  children: a,
+  ...d
+}) {
+  const l = v(null), { canScrollLeft: c, canScrollRight: s, scrollBy: u } = j(l);
+  z(l, n);
+  const i = c || s ? B(c, s) : void 0;
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ...d,
+      className: h(
+        f.scrollArea({ appearance: e, tabLayout: t }),
+        r
+      ),
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            ref: l,
+            className: "scrollbar-none overflow-x-auto",
+            style: i ? { maskImage: i, WebkitMaskImage: i } : void 0,
+            children: a
+          }
+        ),
+        /* @__PURE__ */ o(
+          x,
+          {
+            side: "left",
+            icon: A,
+            label: "Scroll left",
+            visible: c,
+            onClick: () => u("left")
+          }
+        ),
+        /* @__PURE__ */ o(
+          x,
+          {
+            side: "right",
+            icon: L,
+            label: "Scroll right",
+            visible: s,
+            onClick: () => u("right")
+          }
+        )
+      ]
+    }
+  );
+}
+function M({
+  layout: e,
+  isReady: t,
+  disabled: r
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "aria-hidden": !0,
+      className: f.pill({ disabled: r, isReady: t }),
+      style: {
+        width: e.width,
+        height: e.height,
+        transform: `translateX(${e.x}px)`
+      }
+    }
+  );
+}
+function P({
+  tabLayout: e,
+  disabled: t,
+  selectedIndex: r,
+  children: n
+}) {
+  const a = v(null), { pill: d, isReady: l } = I({
+    ref: a,
+    selectedIndex: r,
+    children: n
+  });
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ref: a,
+      role: "radiogroup",
+      "aria-disabled": t,
+      className: f.root({ tabLayout: e }),
+      children: [
+        n,
+        /* @__PURE__ */ o(
+          M,
+          {
+            layout: d,
+            isReady: l,
+            disabled: t
+          }
+        )
+      ]
+    }
+  );
+}
+function $({
+  value: e,
+  children: t,
+  icon: r,
+  trailingContent: n,
+  onClick: a,
+  className: d,
+  disabled: l,
+  ...c
+}) {
+  const {
+    selectedValue: s,
+    onSelectedChange: u,
+    disabled: i,
+    tabLayout: S
+  } = k(), g = s === e, p = w(() => !!(l || i), [l, i]);
+  return /* @__PURE__ */ o(
     "button",
     {
       type: "button",
       role: "radio",
-      "aria-checked": n,
-      "aria-disabled": e,
-      disabled: e,
-      onClick: (f) => {
-        e || (o(s), d?.(f));
+      "aria-checked": g,
+      "aria-disabled": p,
+      disabled: p,
+      onClick: (C) => {
+        p || (u(e), a?.(C));
       },
-      className: g(
-        p.item({ selected: n, disabled: !!e }),
-        m === "fixed" && "min-w-0 flex-1",
-        c
+      className: h(
+        f.item({ selected: g, disabled: p }),
+        S === "fixed" && "min-w-0 flex-1",
+        d
       ),
-      ...r,
-      children: /* @__PURE__ */ x("span", { className: "inline-flex min-w-0 items-center justify-center gap-8", children: [
-        t && /* @__PURE__ */ a(t, { size: 16, className: "shrink-0" }),
-        /* @__PURE__ */ a("span", { className: "min-w-0 truncate", children: i }),
-        l
+      ...c,
+      children: /* @__PURE__ */ b("span", { className: "inline-flex min-w-0 items-center justify-center gap-8", children: [
+        r && /* @__PURE__ */ o(r, { size: 16, className: "shrink-0" }),
+        /* @__PURE__ */ o("span", { className: "min-w-0 truncate", children: t }),
+        n
       ] })
     }
   );
 }
-function j({
-  selectedValue: s,
-  onSelectedChange: i,
-  children: t,
-  className: l,
-  disabled: d,
-  appearance: c = "background",
-  tabLayout: r = "fixed",
-  ...u
+function E({
+  selectedValue: e,
+  onSelectedChange: t,
+  children: r,
+  className: n,
+  disabled: a,
+  appearance: d = "background",
+  tabLayout: l = "fixed",
+  ...c
 }) {
-  const o = v({
+  const s = y({
     consumerName: "SegmentedControl",
-    mergeWith: { disabled: d }
-  }), e = C(null), m = w(
-    s,
-    t
-  ), { pill: n, isReady: f } = N({
-    ref: e,
-    selectedIndex: m,
-    children: t
-  });
-  return /* @__PURE__ */ a(
-    S,
+    mergeWith: { disabled: a }
+  }), u = R(
+    e,
+    r
+  );
+  return /* @__PURE__ */ o(
+    N,
     {
       value: {
-        selectedValue: s,
-        onSelectedChange: (h) => i(h),
-        disabled: o,
-        tabLayout: r
+        selectedValue: e,
+        onSelectedChange: (i) => t(i),
+        disabled: s,
+        tabLayout: l
       },
-      children: /* @__PURE__ */ x(
-        "div",
+      children: /* @__PURE__ */ o(
+        D,
         {
-          ...u,
-          ref: e,
-          role: "radiogroup",
-          "aria-disabled": o,
-          className: g(
-            p.root({
-              appearance: c,
-              tabLayout: r
-            }),
-            l
-          ),
-          children: [
-            t,
-            /* @__PURE__ */ a(
-              "div",
-              {
-                "aria-hidden": !0,
-                className: p.pill({ disabled: o, isReady: f }),
-                style: {
-                  width: n.width,
-                  height: n.height,
-                  transform: `translateX(${n.x}px)`
-                }
-              }
-            )
-          ]
+          ...c,
+          appearance: d,
+          tabLayout: l,
+          className: n,
+          selectedIndex: u,
+          children: /* @__PURE__ */ o(
+            P,
+            {
+              tabLayout: l,
+              disabled: s,
+              selectedIndex: u,
+              children: r
+            }
+          )
         }
       )
     }
   );
 }
-function D() {
-  return { SegmentedControl: j, SegmentedControlButton: k };
+function O() {
+  return { SegmentedControl: E, SegmentedControlButton: $ };
 }
 export {
-  j as SegmentedControl,
-  k as SegmentedControlButton,
-  D as createSegmentedControl
+  E as SegmentedControl,
+  $ as SegmentedControlButton,
+  O as createSegmentedControl
 };

package/dist/lib/Components/core/SegmentedControl/SegmentedControlContext.d.ts

@@ -1,8 +1,9 @@
+import { SegmentedControlProps } from './types';
 export type SegmentedControlContextValue = {
     selectedValue: string;
     onSelectedChange: (value: string) => void;
     disabled: boolean;
-    tabLayout: 'fit' | 'fixed';
+    tabLayout: NonNullable<SegmentedControlProps['tabLayout']>;
 };
 declare const SegmentedControlContextProvider: import('react').FC<{
     children: import('react').ReactNode;

package/dist/lib/Components/core/SegmentedControl/SegmentedControlContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/SegmentedControlContext.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAO,+BAA+B;;;EAC+B,CAAC;AAEtE,eAAO,MAAM,0BAA0B,oCAInC,CAAC;AAEL,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
+{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/SegmentedControlContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;CAC5D,CAAC;AAEF,QAAA,MAAO,+BAA+B;;;EAC+B,CAAC;AAEtE,eAAO,MAAM,0BAA0B,oCAInC,CAAC;AAEL,OAAO,EAAE,+BAA+B,EAAE,CAAC"}

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

@@ -21,11 +21,12 @@ export type SegmentedControlProps<T extends SegmentedControlValue = SegmentedCon
     appearance?: 'background' | 'no-background';
     /**
      * Controls how tab widths are calculated.
-     * - "fit": each tab sizes to its content
-     * - "fixed": all tabs share equal width, filling the container
+     * - `"fixed"`: all tabs share equal width, filling the container
+     * - `"fit"`: each tab sizes to its content; when tabs overflow the container,
+     *   left/right arrow buttons appear automatically to scroll them into view
      * @default 'fixed'
      */
-    tabLayout?: 'fit' | 'fixed';
+    tabLayout?: 'fixed' | 'fit';
     /**
      * Segment buttons (SegmentedControlButton).
      */

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,qBAAqB,CAC/B,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC;IACjB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAC5C;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,CACrC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,qBAAqB,CAC/B,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC;IACjB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAC5C;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,CACrC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC"}

package/dist/lib/Components/core/SegmentedControl/usePillElementLayoutEffect.js

@@ -1,40 +1,41 @@
-import { useMemo as h, Children as y, isValidElement as g, useState as u, useLayoutEffect as p, useEffect as v } from "react";
-function R({
+import { useMemo as m, Children as h, isValidElement as y, useState as f, useLayoutEffect as p, useEffect as g } from "react";
+function E({
   ref: n,
   selectedIndex: e,
   children: r
 }) {
-  const [f, c] = u({ width: 0, height: 0, x: 0 }), [a, l] = u(!1);
+  const [u, c] = f({ width: 0, height: 0, x: 0 }), [a, l] = f(!1);
   return p(() => {
     const t = n.current;
-    if (!t) return;
+    if (!t)
+      return;
     const o = () => {
-      const { height: d } = t.getBoundingClientRect(), m = Array.from(t.children).slice(0, -1), i = e >= 0 ? m[e] : void 0;
+      const d = Array.from(t.children).slice(0, -1), i = e >= 0 ? d[e] : void 0;
       c({
         width: i?.offsetWidth ?? 0,
-        height: d,
+        height: t.offsetHeight,
         x: i?.offsetLeft ?? 0
       });
     };
     if (o(), typeof ResizeObserver > "u") return;
     const s = new ResizeObserver(o);
     return s.observe(t), () => s.disconnect();
-  }, [r, e, n]), v(() => {
+  }, [r, e, n]), g(() => {
     const t = requestAnimationFrame(() => {
       l(!0);
     });
     return () => cancelAnimationFrame(t);
-  }, []), { pill: f, isReady: a };
+  }, []), { pill: u, isReady: a };
 }
 function b(n, e) {
-  return h(
-    () => y.toArray(e).findIndex(
-      (r) => g(r) && r.props.value === n
+  return m(
+    () => h.toArray(e).findIndex(
+      (r) => y(r) && r.props.value === n
     ),
     [n, e]
   );
 }
 export {
-  R as usePillElementLayoutEffect,
+  E as usePillElementLayoutEffect,
   b as useSegmentedControlSelectedIndex
 };

package/dist/lib/Components/core/SegmentedControl/useScrollArrows.d.ts

@@ -0,0 +1,16 @@
+import { RefObject } from 'react';
+export type ScrollDirection = 'left' | 'right';
+/**
+ * Overflow state and the scroll action backing the left/right arrow buttons.
+ */
+export declare function useScrollArrows(scrollRef: RefObject<HTMLDivElement | null>): {
+    canScrollLeft: boolean;
+    canScrollRight: boolean;
+    scrollBy: (direction: ScrollDirection) => void;
+};
+/**
+ * Centers the selected segment on mount only, so a later selection change never
+ * fights the scroll position the user set by hand.
+ */
+export declare function useScrollSelectedIntoView(scrollRef: RefObject<HTMLDivElement | null>, selectedIndex: number): void;
+//# sourceMappingURL=useScrollArrows.d.ts.map

package/dist/lib/Components/core/SegmentedControl/useScrollArrows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollArrows.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/useScrollArrows.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,CAAC;AA8C/C;;GAEG;AACH,wBAAgB,eAAe,CAAC,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG;IAC5E,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD,CAmBA;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAC3C,aAAa,EAAE,MAAM,GACpB,IAAI,CAmBN"}

package/dist/lib/Components/core/SegmentedControl/useScrollArrows.js

@@ -0,0 +1,51 @@
+import { useCallback as u, useLayoutEffect as f, useState as i } from "react";
+function a(n) {
+  const [o, r] = i(!1), [s, c] = i(!1), e = u(() => {
+    const t = n.current;
+    t && (r(t.scrollLeft > 0), c(t.scrollLeft + t.clientWidth < t.scrollWidth - 1));
+  }, [n]);
+  return f(() => {
+    const t = n.current;
+    if (!t)
+      return;
+    e(), t.addEventListener("scroll", e, { passive: !0 });
+    const l = new ResizeObserver(e);
+    return l.observe(t), t.firstElementChild instanceof HTMLElement && l.observe(t.firstElementChild), () => {
+      t.removeEventListener("scroll", e), l.disconnect();
+    };
+  }, [e, n]), { canScrollLeft: o, canScrollRight: s };
+}
+function S(n) {
+  const { canScrollLeft: o, canScrollRight: r } = a(n), s = u(
+    (c) => {
+      const e = n.current;
+      if (!e)
+        return;
+      const t = e.clientWidth / 2;
+      e.scrollBy({
+        left: c === "left" ? -t : t,
+        behavior: "smooth"
+      });
+    },
+    [n]
+  );
+  return { canScrollLeft: o, canScrollRight: r, scrollBy: s };
+}
+function d(n, o) {
+  f(() => {
+    if (o < 0)
+      return;
+    const r = n.current;
+    if (!r)
+      return;
+    const c = r.querySelectorAll('button[role="radio"]')[o];
+    if (c) {
+      const { offsetLeft: e, offsetWidth: t } = c, { clientWidth: l } = r;
+      r.scrollLeft = e - (l - t) / 2;
+    }
+  }, []);
+}
+export {
+  S as useScrollArrows,
+  d as useScrollSelectedIntoView
+};

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

@@ -1 +1 @@
-{"version":3,"file":"Trend.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Trend/Trend.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA+C1C,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,QAAQ,EAAE,YAAoB,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CAyBZ"}
+{"version":3,"file":"Trend.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Trend/Trend.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA+C1C,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAW,EACX,QAAQ,EAAE,YAAoB,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CAuBZ"}

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

@@ -1,13 +1,13 @@
-import { jsxs as c, jsx as u } from "react/jsx-runtime";
-import { useDisabledContext as f, cn as p } from "../../../../libs/utils-shared/dist/index.js";
-import { cva as b } from "class-variance-authority";
-import { useCommonTranslation as v } from "../../../../i18n/useCommonTranslation.js";
-import { TriangleDown as g } from "../../symbols/icons/TriangleDown.js";
-import { TriangleUp as x } from "../../symbols/icons/TriangleUp.js";
-function V(e) {
+import { jsxs as m, jsx as c } from "react/jsx-runtime";
+import { useDisabledContext as u, cn as p } from "../../../../libs/utils-shared/dist/index.js";
+import { cva as f } from "class-variance-authority";
+import { useCommonTranslation as b } from "../../../../i18n/useCommonTranslation.js";
+import { TriangleDown as v } from "../../symbols/icons/TriangleDown.js";
+import { TriangleUp as g } from "../../symbols/icons/TriangleUp.js";
+function x(e) {
   return e === 0 ? "neutral" : e > 0 ? "positive" : "negative";
 }
-const T = b("inline-flex items-center", {
+const T = f("inline-flex items-center", {
   variants: {
     size: {
       md: "gap-2 body-2",
@@ -32,36 +32,36 @@ const T = b("inline-flex items-center", {
     size: "md",
     disabled: !1
   }
-}), h = {
+}), V = {
   md: 16,
   sm: 12
-}, z = {
-  positive: x,
-  negative: g,
+}, h = {
+  positive: g,
+  negative: v,
   neutral: null
 };
 function M({
   value: e,
-  size: s = "md",
+  size: t = "md",
   disabled: r = !1,
   className: o,
   ...l
 }) {
-  const t = V(e), n = f({
+  const a = x(e), s = u({
     consumerName: "Trend",
     mergeWith: { disabled: r }
-  }), { t: d } = v(), i = z[t], a = `${Math.abs(e).toFixed(2)}%`, m = e < 0 ? `-${a}` : a;
-  return /* @__PURE__ */ c(
+  }), { t: d } = b(), n = h[a], i = `${Math.abs(e).toFixed(2)}%`;
+  return /* @__PURE__ */ m(
     "span",
     {
-      "aria-label": d(`components.trend.${t}AriaLabel`, {
-        value: a
+      "aria-label": d(`components.trend.${a}AriaLabel`, {
+        value: i
       }),
-      className: p(T({ size: s, variant: t, disabled: n }), o),
+      className: p(T({ size: t, variant: a, disabled: s }), o),
       ...l,
       children: [
-        i && /* @__PURE__ */ u(i, { size: h[s], disabled: n }),
-        m
+        n && /* @__PURE__ */ c(n, { size: V[t], disabled: s }),
+        i
       ]
     }
   );

package/dist/lib/Components/symbols/icons/CalendarRefresh.d.ts

@@ -0,0 +1,29 @@
+/**
+ * CalendarRefresh icon component.
+ *
+ * This icon component is automatically generated from SVG files and uses the createIcon utility
+ * to create a consistent icon interface. It supports all standard SVG props and additional
+ * size variants defined in the Icon component.
+ *
+ * @see {@link https://ldls.vercel.app/?path=/story/react-icon--base&args=name:CalendarRefresh Storybook}
+ *
+ * @component
+ * @param {16 | 20 | 24 | 40 | 48 | 56} [size=24] - The size of the icon in pixels.
+ * @param {string} [className] - Additional CSS classes to apply to the icon.
+ * @param {React.SVGProps<SVGSVGElement>} [...props] - All standard SVG element props.
+ *
+ * @example
+ * // Basic usage with default size (24px)
+ * import { CalendarRefresh } from '@ledgerhq/lumen-ui-react/symbols';
+ *
+ * <CalendarRefresh />
+ *
+ * @example
+ * // With custom size and className
+ * <CalendarRefresh size={40} className="text-warning" />
+ */
+export declare const CalendarRefresh: {
+    ({ ref, className, disabled, ...props }: Omit<import('../Icon').IconProps, "children">): import('react').FunctionComponentElement<import('../Icon').IconProps>;
+    displayName: string;
+};
+//# sourceMappingURL=CalendarRefresh.d.ts.map

package/dist/lib/Components/symbols/icons/CalendarRefresh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalendarRefresh.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/symbols/icons/CalendarRefresh.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,eAAe;;;CAiB3B,CAAC"}