@ledgerhq/lumen-ui-react 0.1.14 → 0.1.16

package/dist/lib/Components/BaseInput/BaseInput.js

@@ -1,85 +1,85 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { useDisabledContext as $, cn as a } from "../../../libs/utils-shared/dist/index.js";
-import d from "react";
-import { useCommonTranslation as q } from "../../../i18n/useCommonTranslation.js";
-import { InteractiveIcon as H } from "../InteractiveIcon/InteractiveIcon.js";
-import { DeleteCircleFill as x } from "../../Symbols/Icons/DeleteCircleFill.js";
-const P = a(
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
+import { useDisabledContext as O, cn as a } from "../../../libs/utils-shared/dist/index.js";
+import { useRef as $, useId as q, useState as H, useCallback as P } from "react";
+import { useCommonTranslation as U } from "../../../i18n/useCommonTranslation.js";
+import { InteractiveIcon as W } from "../InteractiveIcon/InteractiveIcon.js";
+import { DeleteCircleFill as w } from "../../Symbols/Icons/DeleteCircleFill.js";
+const G = a(
   "group relative flex h-48 w-full cursor-text items-center gap-8 rounded-sm bg-muted px-16 transition-colors",
   "focus-within:ring-2 focus-within:ring-active hover:bg-muted-hover",
   "has-disabled:cursor-not-allowed has-disabled:bg-disabled has-disabled:text-disabled",
   "has-invalid:border-error has-invalid:ring-1 has-invalid:ring-error",
   'has-[input[aria-invalid="true"]]:border-error has-[input[aria-invalid="true"]]:ring-1 has-[input[aria-invalid="true"]]:ring-error'
-), U = a(
+), J = a(
   "peer w-full flex-1 bg-muted body-1 text-base caret-active outline-hidden transition-colors",
   "group-hover:bg-muted-hover group-disabled:bg-disabled",
   "group-has-disabled:cursor-not-allowed group-has-disabled:bg-disabled group-has-disabled:text-disabled",
   "placeholder:text-muted group-has-disabled:placeholder:text-disabled",
   "[&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
   "truncate"
-), W = a(
+), K = a(
   "pointer-events-none absolute top-6 left-16 origin-left body-4 text-muted transition-all duration-300",
   "peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:scale-100 peer-placeholder-shown:body-2",
   "group-has-disabled:text-disabled",
   "peer-focus:top-6 peer-focus:translate-y-0 peer-focus:body-4",
   "w-[calc(100%-var(--size-56))] truncate"
-), G = ({
-  ref: y,
-  className: I,
-  containerClassName: C,
-  inputClassName: S,
-  labelClassName: N,
-  label: u,
-  id: k,
-  disabled: R,
+), Q = ({
+  ref: x,
+  className: y,
+  containerClassName: I,
+  inputClassName: C,
+  labelClassName: S,
+  label: d,
+  id: N,
+  disabled: k,
   errorMessage: o,
   suffix: B,
   prefix: D,
   onClear: E,
-  hideClearButton: j = !1,
-  "aria-invalid": b,
-  onChange: h,
+  hideClearButton: R = !1,
+  "aria-invalid": p,
+  onChange: b,
   ...i
 }) => {
-  const m = $({
+  const h = O({
     consumerName: "BaseInput",
-    mergeWith: { disabled: R }
-  }), { t: z } = q(), n = d.useRef(null), F = d.useId(), c = k || `input-${F}`, L = b || (o ? !0 : void 0), s = i.value !== void 0, [T, v] = d.useState(
+    mergeWith: { disabled: k }
+  }), { t: j } = U(), n = $(null), z = q(), u = N || `input-${z}`, F = p || (o ? !0 : void 0), s = i.value !== void 0, [L, m] = H(
     i.defaultValue?.toString() || ""
-  ), V = d.useCallback(
+  ), T = P(
     (t) => {
-      s || v(t.target.value), h?.(t);
+      s || m(t.target.value), b?.(t);
     },
-    [s, h]
-  ), f = (s ? !!i.value && i.value.toString().length > 0 : T.length > 0) && !m && !j, g = `${c}-error`, A = () => {
+    [s, b]
+  ), v = (s ? !!i.value && i.value.toString().length > 0 : L.length > 0) && !h && !R, f = `${u}-error`, V = () => {
     if (!n.current) return;
     Object.getOwnPropertyDescriptor(
       window.HTMLInputElement.prototype,
       "value"
-    )?.set?.call(n.current, ""), s || v("");
+    )?.set?.call(n.current, ""), s || m("");
     const l = new Event("input", { bubbles: !0 });
     n.current.dispatchEvent(l), n.current.focus(), E?.();
   };
-  function O(...t) {
+  function A(...t) {
     return (l) => {
       t.forEach((e) => {
         e && (typeof e == "function" ? e(l) : e.current = l);
       });
     };
   }
-  return /* @__PURE__ */ p("div", { className: I, children: [
-    /* @__PURE__ */ p(
+  return /* @__PURE__ */ c("div", { className: y, children: [
+    /* @__PURE__ */ c(
       "div",
       {
-        className: a(P, C),
+        className: a(G, I),
         onPointerDown: (t) => {
           if (t.target.closest("input, button, a")) return;
           const e = n.current;
           if (!e) return;
-          const w = e.value.length > 0 ? e.value.length : 0;
+          const g = e.value.length > 0 ? e.value.length : 0;
           window.requestAnimationFrame(() => {
             try {
-              e.setSelectionRange(w, w);
+              e.setSelectionRange(g, g);
             } catch {
             }
             e.focus();
@@ -90,61 +90,61 @@ const P = a(
           /* @__PURE__ */ r(
             "input",
             {
-              ref: O(y, n),
-              id: c,
-              disabled: m,
+              ref: A(x, n),
+              id: u,
+              disabled: h,
               placeholder: " ",
-              "aria-invalid": L,
-              "aria-describedby": o ? g : void 0,
+              "aria-invalid": F,
+              "aria-describedby": o ? f : void 0,
               className: a(
-                U,
-                u && "pt-12 body-2",
-                S
+                J,
+                d && "pt-12 body-2",
+                C
               ),
-              onChange: V,
+              onChange: T,
               ...i
             }
           ),
-          u && /* @__PURE__ */ r(
+          d && /* @__PURE__ */ r(
             "label",
             {
-              htmlFor: c,
+              htmlFor: u,
               className: a(
-                W,
+                K,
                 o && "text-error",
-                N
+                S
               ),
-              children: u
+              children: d
             }
           ),
-          f && /* @__PURE__ */ r(
-            H,
+          v && /* @__PURE__ */ r(
+            W,
             {
               iconType: "filled",
-              onClick: A,
-              "aria-label": z("components.baseInput.clearInputAriaLabel"),
-              children: /* @__PURE__ */ r(x, { size: 20 })
+              onClick: V,
+              "aria-label": j("components.baseInput.clearInputAriaLabel"),
+              children: /* @__PURE__ */ r(w, { size: 20 })
             }
           ),
-          !f && B
+          !v && B
         ]
       }
     ),
-    o && /* @__PURE__ */ p(
+    o && /* @__PURE__ */ c(
       "div",
       {
-        id: g,
+        id: f,
         className: "mt-8 flex items-center gap-2 body-3 text-error",
         role: "alert",
         children: [
-          /* @__PURE__ */ r(x, { size: 16, className: "shrink-0 text-error" }),
+          /* @__PURE__ */ r(w, { size: 16, className: "text-error" }),
           /* @__PURE__ */ r("span", { children: o })
         ]
       }
     )
   ] });
 };
-G.displayName = "BaseInput";
+Q.displayName = "BaseInput";
 export {
-  G as BaseInput
+  Q as BaseInput
 };

package/dist/lib/Components/CardButton/CardButton.js

@@ -18,10 +18,10 @@ const h = f(
 ), x = ({
   ref: i,
   className: d,
-  appearance: l,
-  icon: n,
-  title: o,
-  description: s,
+  appearance: o,
+  icon: l,
+  title: n,
+  description: t,
   hideChevron: r,
   disabled: u,
   ...b
@@ -29,7 +29,7 @@ const h = f(
   const c = m({
     consumerName: "CardButton",
     mergeWith: { disabled: u }
-  }), t = n;
+  }), s = l;
   return /* @__PURE__ */ a(
     "button",
     {
@@ -37,22 +37,22 @@ const h = f(
       className: p(
         d,
         h({
-          appearance: l
+          appearance: o
         })
       ),
       disabled: c,
       ...b,
       children: [
-        t && /* @__PURE__ */ e(t, { size: 24, className: "shrink-0" }),
+        s && /* @__PURE__ */ e(s, { size: 24 }),
         /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 flex-col gap-4 text-left", children: [
-          /* @__PURE__ */ e("div", { className: "min-w-0 truncate body-2-semi-bold", children: o }),
-          s && /* @__PURE__ */ e("div", { className: "line-clamp-2 min-w-0 body-3 text-muted group-disabled:text-disabled", children: s })
+          /* @__PURE__ */ e("div", { className: "min-w-0 truncate body-2-semi-bold", children: n }),
+          t && /* @__PURE__ */ e("div", { className: "line-clamp-2 min-w-0 body-3 text-muted group-disabled:text-disabled", children: t })
         ] }),
         !r && /* @__PURE__ */ e(
           v,
           {
             size: 24,
-            className: "shrink-0 text-muted group-disabled:text-disabled"
+            className: "text-muted group-disabled:text-disabled"
           }
         )
       ]

package/dist/lib/Components/Dialog/Dialog.js

@@ -1,8 +1,8 @@
 import { jsx as o, jsxs as m } from "react/jsx-runtime";
-import { createSafeContext as u, cn as l } from "../../../libs/utils-shared/dist/index.js";
+import { createSafeContext as f, cn as l } from "../../../libs/utils-shared/dist/index.js";
 import * as n from "@radix-ui/react-dialog";
-import { cva as f } from "class-variance-authority";
-const [y, r] = u("Dialog"), h = f(
+import { cva as u } from "class-variance-authority";
+const [y, r] = f("Dialog"), p = u(
   [
     "flex w-400 max-w-[calc(100%-2rem)] flex-col overflow-hidden rounded-2xl bg-canvas-sheet pb-24",
     "fixed top-[50%] left-[50%] z-dialog-content translate-[-50%]",
@@ -11,33 +11,33 @@ const [y, r] = u("Dialog"), h = f(
   {
     variants: {
       height: {
-        hug: "max-h-560",
+        fit: "max-h-560",
         fixed: "h-560"
       }
     },
     defaultVariants: {
-      height: "hug"
+      height: "fit"
     }
   }
 );
-function k({ height: a = "hug", ...t }) {
-  return /* @__PURE__ */ o(y, { value: { height: a }, children: /* @__PURE__ */ o(n.Root, { "data-slot": "dialog", ...t }) });
+function k({ height: t = "fit", ...a }) {
+  return /* @__PURE__ */ o(y, { value: { height: t }, children: /* @__PURE__ */ o(n.Root, { "data-slot": "dialog", ...a }) });
 }
-function w({ ...a }) {
-  return /* @__PURE__ */ o(n.Trigger, { "data-slot": "dialog-trigger", ...a });
+function w({ ...t }) {
+  return /* @__PURE__ */ o(n.Trigger, { "data-slot": "dialog-trigger", ...t });
 }
-function p({
-  ...a
+function x({
+  ...t
 }) {
-  return /* @__PURE__ */ o(n.Portal, { "data-slot": "dialog-portal", ...a });
+  return /* @__PURE__ */ o(n.Portal, { "data-slot": "dialog-portal", ...t });
 }
-const s = ({ ref: a, className: t, ...e }) => /* @__PURE__ */ o(
+const s = ({ ref: t, className: a, ...e }) => /* @__PURE__ */ o(
   n.Overlay,
   {
-    ref: a,
+    ref: t,
     "data-slot": "dialog-overlay",
     className: l(
-      t,
+      a,
       "fixed inset-0 z-dialog-overlay bg-canvas-overlay backdrop-blur-sm data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in"
     ),
     ...e
@@ -45,84 +45,84 @@ const s = ({ ref: a, className: t, ...e }) => /* @__PURE__ */ o(
 );
 s.displayName = "DialogOverlay";
 function B({
-  className: a,
-  children: t,
+  className: t,
+  children: a,
   ...e
 }) {
   const { height: i } = r({
     consumerName: "DialogContent",
     contextRequired: !0
   });
-  return /* @__PURE__ */ m(p, { "data-slot": "dialog-portal", children: [
+  return /* @__PURE__ */ m(x, { "data-slot": "dialog-portal", children: [
     /* @__PURE__ */ o(s, {}),
     /* @__PURE__ */ o(
       n.Content,
       {
         "data-slot": "dialog-content",
-        className: l(h({ height: i }), a),
+        className: l(p({ height: i }), t),
         ...e,
-        children: t
+        children: a
       }
     )
   ] });
 }
-const x = ({
-  ref: a,
-  className: t,
+const h = ({
+  ref: t,
+  className: a,
   children: e,
   scrollbarWidth: i = "none",
   style: d,
-  ...g
+  ...c
 }) => {
-  const { height: c } = r({
+  const { height: g } = r({
     consumerName: "DialogBody",
     contextRequired: !0
   });
   return /* @__PURE__ */ o(
     "div",
     {
-      ref: a,
+      ref: t,
       "data-slot": "dialog-body",
       style: d,
       className: l(
         "-mb-24 flex min-h-0 grow flex-col overflow-y-auto px-24 pb-24",
-        c === "hug" ? "basis-auto" : "basis-0",
-        t,
+        g === "fit" ? "basis-auto" : "basis-0",
+        a,
         i === "auto" ? "scrollbar-custom" : "scrollbar-none"
       ),
-      ...g,
+      ...c,
       children: e
     }
   );
 };
-x.displayName = "DialogBody";
+h.displayName = "DialogBody";
 const v = ({
-  ref: a,
-  className: t,
+  ref: t,
+  className: a,
   children: e,
   ...i
 }) => /* @__PURE__ */ o(
   "div",
   {
-    ref: a,
+    ref: t,
     "data-slot": "dialog-body-sticky-content",
-    className: l("sticky top-0 bg-canvas-sheet py-8", t),
+    className: l("sticky top-0 bg-canvas-sheet py-8", a),
     ...i,
     children: e
   }
 );
 v.displayName = "DialogBodyStickyContent";
 const D = ({
-  ref: a,
-  className: t,
+  ref: t,
+  className: a,
   children: e,
   ...i
 }) => /* @__PURE__ */ o(
   "div",
   {
-    ref: a,
+    ref: t,
     "data-slot": "dialog-footer",
-    className: l("flex shrink-0 justify-end gap-8 px-24 pt-24", t),
+    className: l("flex shrink-0 justify-end gap-8 px-24 pt-24", a),
     ...i,
     children: e
   }
@@ -130,7 +130,7 @@ const D = ({
 D.displayName = "DialogFooter";
 export {
   k as Dialog,
-  x as DialogBody,
+  h as DialogBody,
   v as DialogBodyStickyContent,
   B as DialogContent,
   D as DialogFooter,

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

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
-export type DialogHeight = 'hug' | 'fixed';
+export type DialogHeight = 'fit' | 'fixed';
 export type DialogProps = {
     /**
      * The content to display inside the dialog.
@@ -22,9 +22,9 @@ export type DialogProps = {
     defaultOpen?: boolean;
     /**
      * The height behavior of the dialog.
-     * - `hug`: Content-fit height up to max 560px (default)
+     * - `fit`: Content-fit height up to max 560px (default)
      * - `fixed`: Always exactly 560px height
-     * @default 'hug'
+     * @default 'fit'
      */
     height?: DialogHeight;
     /**

package/dist/lib/Components/Icon/Icon.js

@@ -1,7 +1,7 @@
 import { cn as s } from "../../../libs/utils-shared/dist/index.js";
 import { cva as a } from "class-variance-authority";
 import { createElement as k } from "react";
-const l = a("inline-block", {
+const h = a("inline-block shrink-0", {
   variants: {
     size: {
       12: "icon-w-12 icon-h-12 icon-stroke-12",
@@ -17,7 +17,7 @@ const l = a("inline-block", {
   defaultVariants: {
     size: 24
   }
-}), h = ({
+}), l = ({
   ref: o,
   size: n = 24,
   className: i = "",
@@ -33,12 +33,12 @@ const l = a("inline-block", {
     "aria-hidden": "true",
     xmlns: r,
     viewBox: e,
-    className: s(i, l({ size: n }), "inline-block"),
+    className: s(i, h({ size: n }), "inline-block"),
     ...t
   },
   c
 );
-h.displayName = "Icon";
+l.displayName = "Icon";
 export {
-  h as Icon
+  l as Icon
 };

package/dist/lib/Components/Icon/createIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/createIcon.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;;GAMG;AACH,QAAA,MAAM,UAAU,GACd,UAAU,MAAM,EAChB,SAAS,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;6CAOjD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;;CAkB/B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/createIcon.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;;GAMG;AACH,QAAA,MAAM,UAAU,GACd,UAAU,MAAM,EAChB,SAAS,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;6CAOjD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;;CAkB/B,CAAC;AAGF,eAAe,UAAU,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Link/Link.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAmCpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,IAAI;6HAYd,SAAS;;CAsDX,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Link/Link.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAmCpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,IAAI;6HAYd,SAAS;;CAgDX,CAAC"}

package/dist/lib/Components/Link/Link.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as l, Fragment as c } from "react/jsx-runtime";
-import { useDisabledContext as h, cn as x } from "../../../libs/utils-shared/dist/index.js";
+import { useDisabledContext as x, cn as h } from "../../../libs/utils-shared/dist/index.js";
 import { Slot as k } from "@radix-ui/react-slot";
-import { cva as N } from "class-variance-authority";
-import { ExternalLink as g } from "../../Symbols/Icons/ExternalLink.js";
-const y = N(
+import { cva as g } from "class-variance-authority";
+import { ExternalLink as y } from "../../Symbols/Icons/ExternalLink.js";
+const z = g(
   "inline-flex w-fit max-w-full items-center justify-center transition-colors focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-focus",
   {
     variants: {
@@ -33,62 +33,55 @@ const y = N(
       disabled: !1
     }
   }
-), z = ({
+), N = ({
   ref: d,
   className: m,
-  children: s,
+  children: a,
   appearance: p,
-  size: t = "inherit",
+  size: i = "inherit",
   underline: f = !0,
   icon: u,
   isExternal: n = !1,
-  asChild: i = !1,
+  asChild: t = !1,
   disabled: b,
   ...v
 }) => {
-  const a = h({
+  const s = x({
     consumerName: "Link",
     mergeWith: { disabled: b }
-  }), r = t ? {
+  }), r = i ? {
     sm: 16,
     md: 20
-  }[t] : 20, o = u;
+  }[i] : 20, o = u;
   return /* @__PURE__ */ e(
-    i ? k : "a",
+    t ? k : "a",
     {
       ref: d,
-      className: x(
+      className: h(
         m,
-        y({
+        z({
           appearance: p,
-          size: t,
+          size: i,
           underline: f,
-          disabled: a
+          disabled: s
         })
       ),
-      "aria-disabled": a || void 0,
-      target: n && !i ? "_blank" : void 0,
-      rel: n && !i ? "noopener noreferrer" : void 0,
+      "aria-disabled": s || void 0,
+      target: n && !t ? "_blank" : void 0,
+      rel: n && !t ? "noopener noreferrer" : void 0,
       ...v,
-      children: i ? s : /* @__PURE__ */ l(c, { children: [
-        o && /* @__PURE__ */ e(o, { size: r, className: "shrink-0" }),
-        /* @__PURE__ */ e("span", { className: "min-w-0 truncate", children: s }),
+      children: t ? a : /* @__PURE__ */ l(c, { children: [
+        o && /* @__PURE__ */ e(o, { size: r }),
+        /* @__PURE__ */ e("span", { className: "min-w-0 truncate", children: a }),
         n && /* @__PURE__ */ l(c, { children: [
-          /* @__PURE__ */ e(
-            g,
-            {
-              size: r,
-              className: "shrink-0",
-              "aria-hidden": "true"
-            }
-          ),
+          /* @__PURE__ */ e(y, { size: r, "aria-hidden": "true" }),
           /* @__PURE__ */ e("span", { className: "sr-only", children: "(opens in a new tab)" })
         ] })
       ] })
     }
   );
 };
-z.displayName = "Link";
+N.displayName = "Link";
 export {
-  z as Link
+  N as Link
 };