@ledgerhq/lumen-ui-react 0.1.2 → 0.1.4

package/dist/lib/Components/AmountDisplay/AmountDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AmountDisplay.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountDisplay/AmountDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAA8B,MAAM,SAAS,CAAC;AAyBzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,aAAa;0EAQvB,kBAAkB;;CA0DpB,CAAC"}
+{"version":3,"file":"AmountDisplay.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountDisplay/AmountDisplay.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,kBAAkB,EAInB,MAAM,SAAS,CAAC;AA2EjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,aAAa;0EAQvB,kBAAkB;;CAwDpB,CAAC"}

package/dist/lib/Components/AmountDisplay/AmountDisplay.js

@@ -1,78 +1,126 @@
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { useSplitText as g, buildAriaLabel as v, cn as o } from "../../../libs/utils-shared/dist/index.js";
-import { memo as N } from "react";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useSplitText as y, buildAriaLabel as x, cn as p } from "../../../libs/utils-shared/dist/index.js";
+import { memo as d } from "react";
+import { DIGITS as b } from "./types.js";
 import { useCommonTranslation as D } from "../../../i18n/useCommonTranslation.js";
-const P = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], A = N(({ value: i, animate: l }) => /* @__PURE__ */ n("div", { className: o("relative overflow-hidden"), children: [
-  /* @__PURE__ */ a("span", { className: "invisible", children: "0" }),
-  /* @__PURE__ */ a(
-    "span",
+const N = {
+  0: 24.5,
+  1: 15,
+  2: 23,
+  3: 24,
+  4: 25,
+  5: 23,
+  6: 24.5,
+  7: 21.5,
+  8: 24,
+  9: 24
+}, I = {
+  0: 17,
+  1: 10.5,
+  2: 16,
+  3: 16.5,
+  4: 17.2,
+  5: 15.7,
+  6: 17,
+  7: 14.7,
+  8: 16.5,
+  9: 16.5
+}, T = d(({ value: a, animate: l, type: r }) => {
+  const i = (r === "integer" ? N : I)[a];
+  return /* @__PURE__ */ o(
+    "div",
     {
-      className: o(
-        "absolute inset-x-0 top-0 flex flex-col items-center justify-center",
-        l && "transition-transform duration-600 ease-in-out"
-      ),
-      style: {
-        transform: `translateY(-${i * 10}%)`
-      },
-      children: P.map((t, s) => /* @__PURE__ */ a("span", { children: t }, s))
+      className: "relative overflow-hidden transition-[width] duration-600",
+      style: { width: i + "px" },
+      children: [
+        /* @__PURE__ */ e("span", { className: "invisible", children: "0" }),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: p(
+              "absolute inset-x-0 top-0 flex flex-col items-center justify-center",
+              l && "transition-transform duration-600 ease-in-out"
+            ),
+            style: {
+              transform: `translateY(-${a * 10}%)`
+            },
+            children: b.map((s, n) => /* @__PURE__ */ e("span", { inert: s !== a, children: s }, n))
+          }
+        )
+      ]
     }
-  )
-] })), T = ({
-  value: i,
+  );
+}), m = d(({ items: a, type: l, animate: r }) => a.map((i, s) => {
+  const n = a.length - s;
+  return i.type === "separator" ? /* @__PURE__ */ e("span", { children: i.value }, n) : /* @__PURE__ */ e(
+    T,
+    {
+      value: Number(i.value),
+      animate: r,
+      type: l
+    },
+    n
+  );
+})), g = ({
+  value: a,
   formatter: l,
-  hidden: t = !1,
-  loading: s = !1,
-  animate: u = !0,
-  className: f,
-  ...x
+  hidden: r = !1,
+  loading: i = !1,
+  animate: s = !0,
+  className: n,
+  ...u
 }) => {
-  const e = l(i), c = g(e), { t: h } = D(), y = v(
-    e,
+  const t = l(a), c = y(t), { t: f } = D(), h = x(
     t,
-    h("components.amountDisplay.amountHiddenAriaLabel")
-  ), m = (d) => {
-    let p = d.filter((r) => r.type === "digit").length;
-    return d.map((r, b) => r.type === "separator" ? /* @__PURE__ */ a("span", { children: r.value }, `sep-${b}`) : (p--, /* @__PURE__ */ a(
-      A,
-      {
-        value: parseInt(r.value, 10),
-        animate: u
-      },
-      p
-    )));
-  };
-  return /* @__PURE__ */ n(
+    r,
+    f("components.amountDisplay.amountHiddenAriaLabel")
+  );
+  return /* @__PURE__ */ o(
     "div",
     {
-      className: o(
-        s && "animate-pulse",
+      className: p(
+        i && "animate-pulse",
         "relative inline-flex items-end",
-        f
+        n
       ),
-      "aria-label": y,
-      "aria-busy": s,
-      ...x,
+      "aria-label": h,
+      "aria-busy": i,
+      ...u,
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ o(
           "span",
           {
             className: "inline-flex flex-row mask-fade-y heading-1-semi-bold text-base",
             "aria-hidden": "true",
             children: [
-              e.currencyPosition === "start" && /* @__PURE__ */ a("span", { className: "me-4", children: e.currencyText }),
-              t ? /* @__PURE__ */ a("span", { children: "••••" }) : m(c.integerPart)
+              t.currencyPosition === "start" && /* @__PURE__ */ e("span", { className: "me-4", children: t.currencyText }),
+              r ? /* @__PURE__ */ e("span", { children: "••••" }) : /* @__PURE__ */ e(
+                m,
+                {
+                  items: c.integerPart,
+                  animate: s,
+                  type: "integer"
+                }
+              )
             ]
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ o(
           "span",
           {
             className: "inline-flex flex-row mask-fade-y pb-2 heading-2-semi-bold text-muted",
             "aria-hidden": "true",
             children: [
-              !t && e.decimalPart && /* @__PURE__ */ a("span", { children: e.decimalSeparator }),
-              e.decimalPart && !t && m(c.decimalPart),
-              e.currencyPosition === "end" && /* @__PURE__ */ a("span", { className: "ms-4", children: e.currencyText })
+              !r && t.decimalPart && /* @__PURE__ */ e("span", { children: t.decimalSeparator }),
+              t.decimalPart && !r && /* @__PURE__ */ e(
+                m,
+                {
+                  items: c.decimalPart,
+                  animate: s,
+                  type: "decimal"
+                }
+              ),
+              t.currencyPosition === "end" && /* @__PURE__ */ e("span", { className: "ms-4", children: t.currencyText })
             ]
           }
         )
@@ -80,7 +128,7 @@ const P = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], A = N(({ value: i, animate: l }) => /*
     }
   );
 };
-T.displayName = "AmountDisplay";
+g.displayName = "AmountDisplay";
 export {
-  T as AmountDisplay
+  g as AmountDisplay
 };

package/dist/lib/Components/AmountDisplay/types.d.ts

@@ -1,10 +1,16 @@
 import { FormattedValue, SplitChar } from '@ledgerhq/lumen-utils-shared';
 import { ComponentPropsWithRef } from 'react';
-export type { FormattedValue, SplitChar };
+export type { FormattedValue };
+export declare const DIGITS: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+type IntegerDigit = (typeof DIGITS)[number];
 export type DigitStripProps = {
-    value: number;
+    value: IntegerDigit;
     animate: boolean;
+    type: 'integer' | 'decimal';
 };
+export type DigitStripListProps = {
+    items: SplitChar[];
+} & Omit<DigitStripProps, 'value'>;
 /**
  * Props for the AmountDisplay component.
  */

package/dist/lib/Components/AmountDisplay/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountDisplay/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC;AAE1C,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,CAAC;IAC7C;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/AmountDisplay/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,YAAY,EAAE,cAAc,EAAE,CAAC;AAE/B,eAAO,MAAM,MAAM,yCAA0C,CAAC;AAE9D,KAAK,YAAY,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,YAAY,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,SAAS,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB,GAAG,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,CAAC;IAC7C;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC"}

package/dist/lib/Components/AmountDisplay/types.js

@@ -0,0 +1,4 @@
+const o = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+export {
+  o as DIGITS
+};

package/dist/lib/Components/ContentBanner/ContentBanner.js

@@ -27,7 +27,7 @@ const u = ({
   "div",
   {
     ref: n,
-    className: r("line-clamp-1 body-2-semi-bold", a),
+    className: r("line-clamp-1 body-2-semi-bold text-base", a),
     ...e,
     children: t
   }

package/dist/lib/Components/SideBar/SideBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SideBar.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SideBar/SideBar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEL,YAAY,EACZ,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,0BAA0B,EAC3B,MAAM,SAAS,CAAC;AAmDjB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO;2KAWjB,YAAY;;CA2Bd,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,cAAc;6CAKxB,mBAAmB;;CAUrB,CAAC;AAGF;;;;GAIG;AACH,eAAO,MAAM,eAAe;6CAKzB,oBAAoB;;CAUtB,CAAC;AAGF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW;4IAWrB,gBAAgB;;CAiElB,CAAC;AAGF;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB;8BAG/B,0BAA0B;;CAiC5B,CAAC"}
+{"version":3,"file":"SideBar.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SideBar/SideBar.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEL,YAAY,EACZ,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,0BAA0B,EAC3B,MAAM,SAAS,CAAC;AAmDjB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO;2KAWjB,YAAY;;CA2Bd,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,cAAc;6CAKxB,mBAAmB;;CAUrB,CAAC;AAGF;;;;GAIG;AACH,eAAO,MAAM,eAAe;6CAKzB,oBAAoB;;CAUtB,CAAC;AAGF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW;4IAWrB,gBAAgB;;CAmDlB,CAAC;AAGF;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB;8BAG/B,0BAA0B;;CAgC5B,CAAC"}

package/dist/lib/Components/SideBar/SideBar.js

@@ -1,13 +1,13 @@
-import { jsx as a, jsxs as S, Fragment as A } from "react/jsx-runtime";
-import { createSafeContext as j, cn as d } from "../../../libs/utils-shared/dist/index.js";
+import { jsx as a, jsxs as x, Fragment as A } from "react/jsx-runtime";
+import { createSafeContext as j, cn as p } from "../../../libs/utils-shared/dist/index.js";
 import { cva as v } from "class-variance-authority";
 import { t as h } from "../../../node_modules/i18next/dist/esm/i18next.js";
-import { useCallback as N } from "react";
+import { useCallback as S } from "react";
 import { Tooltip as P, TooltipTrigger as R, TooltipContent as V } from "../Tooltip/Tooltip.js";
-import { useControllableState as C } from "../../../utils/useControllableState/useControllableState.js";
+import { useControllableState as B } from "../../../utils/useControllableState/useControllableState.js";
 import { ExpandRight as q } from "../../Symbols/Icons/ExpandRight.js";
 import { ExpandLeft as z } from "../../Symbols/Icons/ExpandLeft.js";
-const [E, y] = j("SideBar"), u = {
+const [E, C] = j("SideBar"), m = {
   root: v(
     [
       "flex h-full flex-col justify-between gap-16 overflow-y-auto rounded-xl bg-muted-transparent p-16",
@@ -17,7 +17,7 @@ const [E, y] = j("SideBar"), u = {
     {
       variants: {
         collapsed: {
-          true: "w-72",
+          true: "w-[76px]",
           false: "w-208"
         }
       },
@@ -29,7 +29,7 @@ const [E, y] = j("SideBar"), u = {
   section: v(["flex flex-col gap-16"]),
   item: v(
     [
-      "flex h-44 w-full cursor-pointer items-center rounded-md p-12",
+      "flex h-44 w-full cursor-pointer items-center overflow-hidden rounded-md p-12",
       "transition-all duration-300",
       "focus-visible:outline-2 focus-visible:outline-focus"
     ],
@@ -56,30 +56,30 @@ const [E, y] = j("SideBar"), u = {
   defaultCollapsed: e = !1,
   onCollapsedChange: o,
   active: n,
-  defaultActive: p,
+  defaultActive: c,
   onActiveChange: s,
   children: f,
   className: i,
   ...b
 }) => {
-  const [l, g] = C({
+  const [u, g] = B({
     prop: t,
     defaultProp: e,
     onChange: o
-  }), [c, m] = C({
+  }), [l, d] = B({
     prop: n,
-    defaultProp: p ?? "",
+    defaultProp: c ?? "",
     onChange: s
   });
   return /* @__PURE__ */ a(
     E,
     {
-      value: { collapsed: l, setCollapsed: g, active: c, onActiveChange: m },
+      value: { collapsed: u, setCollapsed: g, active: l, onActiveChange: d },
       children: /* @__PURE__ */ a(
         "nav",
         {
           ref: r,
-          className: d(u.root({ collapsed: l }), i),
+          className: p(m.root({ collapsed: u }), i),
           "aria-label": h("components.sideBar.navigationAriaLabel"),
           ...b,
           children: f
@@ -98,7 +98,7 @@ const F = ({
   "div",
   {
     ref: r,
-    className: d(u.section(), e),
+    className: p(m.section(), e),
     ...o,
     children: t
   }
@@ -113,7 +113,7 @@ const J = ({
   "div",
   {
     ref: r,
-    className: d("mt-auto", u.section(), e),
+    className: p("mt-auto", m.section(), e),
     ...o,
     children: t
   }
@@ -125,78 +125,67 @@ const K = ({
   icon: e,
   activeIcon: o,
   label: n,
-  tooltipContent: p,
+  tooltipContent: c,
   disabled: s = !1,
   className: f,
   onClick: i,
   ...b
 }) => {
-  const { collapsed: l, active: g, onActiveChange: c } = y({
+  const { collapsed: u, active: g, onActiveChange: l } = C({
     consumerName: "SideBarItem",
     contextRequired: !0
-  }), m = g === t, T = m ? o : e, x = p ?? n, w = N(
+  }), d = g === t, N = d ? o : e, y = c ?? n, T = S(
     (L) => {
-      s || (i == null || i(L), c == null || c(t));
+      s || (i == null || i(L), l == null || l(t));
     },
-    [s, i, c, t]
-  ), I = /* @__PURE__ */ S(A, { children: [
-    /* @__PURE__ */ a(T, { size: 16, className: "shrink-0" }),
-    n != null && /* @__PURE__ */ a(
-      "span",
-      {
-        className: d(
-          "truncate transition-all duration-200",
-          l ? "ml-0 w-0 opacity-0" : "ml-8 opacity-100"
-        ),
-        children: n
-      }
-    )
-  ] }), B = /* @__PURE__ */ a(
+    [s, i, l, t]
+  ), w = /* @__PURE__ */ x(A, { children: [
+    /* @__PURE__ */ a(N, { size: 20, className: "shrink-0" }),
+    n != null && /* @__PURE__ */ a("span", { className: "translate-x-8 truncate", children: n })
+  ] }), I = /* @__PURE__ */ a(
     "button",
     {
       ref: r,
       type: "button",
       disabled: s,
-      onClick: w,
-      className: d(
-        u.item({ active: m, disabled: s }),
-        l && "w-fit",
+      onClick: T,
+      className: p(
+        m.item({ active: d, disabled: s }),
         f
       ),
-      "aria-current": m ? "page" : void 0,
+      "aria-current": d ? "page" : void 0,
       ...b,
-      children: I
+      children: w
     }
   );
-  return l && x ? /* @__PURE__ */ S(P, { children: [
-    /* @__PURE__ */ a(R, { asChild: !0, children: B }),
-    /* @__PURE__ */ a(V, { side: "right", sideOffset: 8, children: x })
-  ] }) : B;
+  return /* @__PURE__ */ x(P, { open: u ? void 0 : !1, children: [
+    /* @__PURE__ */ a(R, { asChild: !0, children: I }),
+    /* @__PURE__ */ a(V, { side: "right", sideOffset: 8, children: y })
+  ] });
 };
 K.displayName = "SideBarItem";
 const O = ({
   className: r,
   ...t
 }) => {
-  const { collapsed: e, setCollapsed: o } = y({
+  const { collapsed: e, setCollapsed: o } = C({
     consumerName: "SideBarCollapseToggle",
     contextRequired: !0
-  }), n = N(() => {
+  }), n = S(() => {
     o(!e);
-  }, [e, o]), p = e ? q : z;
+  }, [e, o]), c = e ? q : z;
   return /* @__PURE__ */ a(
     "button",
     {
       type: "button",
       onClick: n,
-      className: d(
-        u.item({ active: !1, disabled: !1 }),
-        e && "w-fit",
+      className: p(
+        m.item({ active: !1, disabled: !1 }),
         r
       ),
       "aria-label": e ? h("components.sideBar.expandAriaLabel") : h("components.sideBar.collapseAriaLabel"),
       ...t,
-      children: /* @__PURE__ */ a(p, { size: 16, className: "shrink-0" })
+      children: /* @__PURE__ */ a(c, { size: 20, className: "shrink-0" })
     }
   );
 };

package/dist/lib/Components/Subheader/Subheader.js

@@ -12,7 +12,7 @@ const f = ({
   e,
   {
     className: s(
-      "min-w-0 truncate heading-4-semi-bold text-base group-hover/row:text-base-hover",
+      "min-w-0 truncate pe-1 heading-4-semi-bold text-base group-hover/row:text-base-hover",
       t
     ),
     ...n,

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [