@ledgerhq/lumen-ui-react 0.1.45 → 0.1.47

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

@@ -1,12 +1,13 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { useDisabledContext as U, resolveBaseInputPlaceholder as G, useMergedRef as J, cn as n } from "../../../libs/utils-shared/dist/index.js";
-import { cva as u } from "class-variance-authority";
-import { useRef as K, useId as Q, useState as X, useCallback as Y } from "react";
-import { useCommonTranslation as Z } from "../../../i18n/useCommonTranslation.js";
-import { InteractiveIcon as _ } from "../InteractiveIcon/InteractiveIcon.js";
-import { DeleteCircleFill as y } from "../../Symbols/Icons/DeleteCircleFill.js";
-import { CheckmarkCircleFill as ee } from "../../Symbols/Icons/CheckmarkCircleFill.js";
-const te = u(
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useDisabledContext as Q, resolveBaseInputPlaceholder as X, useMergedRef as Y, cn as s } from "../../../libs/utils-shared/dist/index.js";
+import { cva as g } from "class-variance-authority";
+import { useRef as Z, useId as _, useState as ee, useCallback as te } from "react";
+import { useCommonTranslation as re } from "../../../i18n/useCommonTranslation.js";
+import { InteractiveIcon as se } from "../InteractiveIcon/InteractiveIcon.js";
+import { DeleteCircleFill as k } from "../../Symbols/Icons/DeleteCircleFill.js";
+import { InformationFill as ae } from "../../Symbols/Icons/InformationFill.js";
+import { CheckmarkCircleFill as oe } from "../../Symbols/Icons/CheckmarkCircleFill.js";
+const ne = g(
   [
     "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",
@@ -24,20 +25,20 @@ const te = u(
       status: "default"
     }
   }
-), re = n(
+), le = s(
   "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"
-), ae = n(
+), ie = s(
   "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"
-), se = u(ae, {
+), ce = g(ie, {
   variants: {
     status: {
       default: "",
@@ -53,7 +54,7 @@ const te = u(
     status: "default",
     floated: !1
   }
-}), oe = u("mt-8 flex items-center gap-2 body-3", {
+}), de = g("flex items-center gap-2 body-3", {
   variants: {
     status: {
       default: "text-muted",
@@ -64,129 +65,154 @@ const te = u(
   defaultVariants: {
     status: "default"
   }
-}), be = ({
-  ref: I,
-  className: C,
-  containerClassName: S,
-  inputClassName: V,
-  labelClassName: N,
-  label: l,
-  id: k,
-  disabled: F,
-  helperText: p,
-  status: e,
+}), Ie = ({
+  ref: a,
+  className: o,
+  containerClassName: t,
+  inputClassName: B,
+  labelClassName: F,
+  label: i,
+  id: j,
+  disabled: z,
+  helperText: b,
+  maxCount: c,
+  status: d,
   suffix: P,
   prefix: R,
-  onClear: z,
-  hideClearButton: B = !1,
-  "aria-invalid": D,
-  onChange: h,
-  placeholder: j,
-  ...a
+  onClear: D,
+  hideClearButton: $ = !1,
+  "aria-invalid": E,
+  onChange: v,
+  placeholder: H,
+  ...u
 }) => {
-  const b = U({
+  const w = Q({
     consumerName: "BaseInput",
-    mergeWith: { disabled: F }
-  }), { t: E } = Z(), t = K(null), L = Q(), c = k || `input-${L}`, A = D ?? (e === "error" ? !0 : void 0), i = a.value !== void 0, [H, f] = X(
-    a.defaultValue?.toString() || ""
-  ), M = Y(
-    (s) => {
-      i || f(s.target.value), h?.(s);
+    mergeWith: { disabled: z }
+  }), { t: L } = re(), r = Z(null), A = _(), m = j || `input-${A}`, M = E ?? (d === "error" ? !0 : void 0), p = u.value !== void 0, [O, y] = ee(
+    u.defaultValue?.toString() ?? ""
+  ), T = te(
+    (n) => {
+      p || y(n.target.value), v?.(n);
     },
-    [i, h]
-  ), O = i ? !!a.value && a.value.toString().length > 0 : H.length > 0, { inputPlaceholder: T, labelStaysFloatedWithPlaceholder: W } = G({
-    label: l,
-    placeholder: j
-  }), m = O && !b && !B, g = `${c}-helper`, v = !!p, $ = () => {
-    if (!t.current) return;
+    [p, v]
+  ), x = p ? u.value?.toString() ?? "" : O, W = x.length > 0, { inputPlaceholder: q, labelStaysFloatedWithPlaceholder: U } = X({
+    label: i,
+    placeholder: H
+  }), I = W && !w && !$, G = x.length, C = !!(c && c > 0), N = `${m}-helper`, h = !!b, J = () => {
+    if (!r.current) return;
     Object.getOwnPropertyDescriptor(
       window.HTMLInputElement.prototype,
       "value"
-    )?.set?.call(t.current, ""), i || f("");
-    const w = new Event("input", { bubbles: !0 });
-    t.current.dispatchEvent(w), t.current.focus(), z?.();
-  }, q = J(I, t);
-  return /* @__PURE__ */ d("div", { className: C, children: [
-    /* @__PURE__ */ d(
+    )?.set?.call(r.current, ""), p || y("");
+    const V = new Event("input", { bubbles: !0 });
+    r.current.dispatchEvent(V), r.current.focus(), D?.();
+  }, K = Y(a, r);
+  return /* @__PURE__ */ f("div", { className: o, children: [
+    /* @__PURE__ */ f(
       "div",
       {
-        className: n(te({ status: e }), S),
-        onPointerDown: (s) => {
-          if (s.target.closest("input, button, a")) return;
-          const o = t.current;
-          if (!o) return;
-          const x = o.value.length > 0 ? o.value.length : 0;
+        className: s(ne({ status: d }), t),
+        onPointerDown: (n) => {
+          if (n.target.closest("input, button, a")) return;
+          const l = r.current;
+          if (!l) return;
+          const S = l.value.length > 0 ? l.value.length : 0;
           window.requestAnimationFrame(() => {
             try {
-              o.setSelectionRange(x, x);
+              l.setSelectionRange(S, S);
             } catch {
             }
-            o.focus();
+            l.focus();
           });
         },
         children: [
           R,
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ e(
             "input",
             {
-              ref: q,
-              id: c,
-              disabled: b,
-              placeholder: T,
-              "aria-invalid": A,
-              "aria-describedby": v ? g : void 0,
-              className: n(
-                re,
-                l && "pt-12 body-2",
-                V
+              ref: K,
+              id: m,
+              disabled: w,
+              placeholder: q,
+              "aria-invalid": M,
+              "aria-describedby": h ? N : void 0,
+              className: s(
+                le,
+                i && "pt-12 body-2",
+                B
               ),
-              onChange: M,
-              ...a
+              onChange: T,
+              ...u
             }
           ),
-          l && /* @__PURE__ */ r(
+          i && /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: c,
-              className: n(
-                se({
-                  status: e,
-                  floated: W
+              htmlFor: m,
+              className: s(
+                ce({
+                  status: d,
+                  floated: U
                 }),
-                N
+                F
               ),
-              children: l
+              children: i
             }
           ),
-          m && /* @__PURE__ */ r(
-            _,
+          I && /* @__PURE__ */ e(
+            se,
             {
               iconType: "filled",
-              icon: y,
+              icon: k,
               size: 20,
-              onClick: $,
-              "aria-label": E("components.baseInput.clearInputAriaLabel")
+              onClick: J,
+              "aria-label": L("components.baseInput.clearInputAriaLabel")
             }
           ),
-          !m && P
+          !I && P
         ]
       }
     ),
-    v && /* @__PURE__ */ d(
+    (h || C) && /* @__PURE__ */ f(
       "div",
       {
-        id: g,
-        className: oe({ status: e }),
-        role: e === "error" ? "alert" : void 0,
+        className: s(
+          "mt-8 flex items-start gap-8",
+          h ? "justify-between" : "justify-end"
+        ),
         children: [
-          e === "error" && /* @__PURE__ */ r(y, { size: 16, className: "text-error" }),
-          e === "success" && /* @__PURE__ */ r(ee, { size: 16, className: "text-success" }),
-          /* @__PURE__ */ r("span", { children: p })
+          h && b && /* @__PURE__ */ e(
+            ue,
+            {
+              id: N,
+              helperText: b,
+              status: d
+            }
+          ),
+          C && c != null && /* @__PURE__ */ e(pe, { count: G, maxCount: c })
         ]
       }
     )
   ] });
-};
+}, ue = ({
+  id: a,
+  helperText: o,
+  status: t
+}) => /* @__PURE__ */ f(
+  "div",
+  {
+    id: a,
+    className: de({ status: t }),
+    role: t === "error" ? "alert" : void 0,
+    children: [
+      !t && /* @__PURE__ */ e(ae, { size: 16, className: "text-muted" }),
+      t === "error" && /* @__PURE__ */ e(k, { size: 16, className: "text-error" }),
+      t === "success" && /* @__PURE__ */ e(oe, { size: 16, className: "text-success" }),
+      /* @__PURE__ */ e("span", { className: "body-3", children: o })
+    ]
+  }
+), pe = ({ count: a, maxCount: o }) => /* @__PURE__ */ e("span", { "aria-live": "polite", className: "shrink-0 body-3 text-muted", children: `${a}/${o}` });
 export {
-  be as BaseInput
+  Ie as BaseInput
 };

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

@@ -10,6 +10,10 @@ export type BaseInputProps = {
      * Pair with `status` for error/success styling and icons; omit `status` for a neutral hint.
      */
     helperText?: string;
+    /**
+     * Soft character limit. When set, renders a `count/maxCount` counter below the input.
+     */
+    maxCount?: number;
     /**
      * Visual state for border, label, helper text, and helper icon.
      * Omit when `helperText` is a neutral hint.
@@ -57,4 +61,24 @@ export type BaseInputProps = {
      */
     labelClassName?: string;
 } & Omit<ComponentPropsWithRef<'input'>, 'size' | 'prefix'>;
+export type BaseInputHelperTextProps = {
+    /**
+     * The id linking the helper text to the input via `aria-describedby`.
+     */
+    id: string;
+    /**
+     * The helper copy shown below the input.
+     */
+    helperText: string;
+} & Pick<BaseInputProps, 'status'>;
+export type BaseInputCounterProps = {
+    /**
+     * Current character count.
+     */
+    count: number;
+    /**
+     * Soft character limit rendered as the counter denominator.
+     */
+    maxCount: number;
+};
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/BaseInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC;AAE5D,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAEnC,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/lib/Components/Button/BaseButton.d.ts

@@ -1,6 +1,6 @@
 import { BaseButtonProps } from './types';
 export declare const baseButtonVariants: (props?: ({
-    appearance?: "base" | "red" | "gray" | "transparent" | "accent" | "no-background" | null | undefined;
+    appearance?: "base" | "gray" | "transparent" | "accent" | "no-background" | "red" | null | undefined;
     disabled?: boolean | null | undefined;
     loading?: boolean | null | undefined;
     size?: "md" | "sm" | "lg" | "xs" | null | undefined;

package/dist/lib/Components/Card/Card.js

@@ -1,6 +1,6 @@
 import { jsx as s, jsxs as f, Fragment as b } from "react/jsx-runtime";
-import { createSafeContext as m, DisabledProvider as g, cn as o, getButtonA11yProps as C } from "../../../libs/utils-shared/dist/index.js";
-import { cva as p } from "class-variance-authority";
+import { createSafeContext as m, DisabledProvider as p, cn as o, getButtonA11yProps as C } from "../../../libs/utils-shared/dist/index.js";
+import { cva as g } from "class-variance-authority";
 import { useMemo as h } from "react";
 import { ChevronUp as N } from "../../Symbols/Icons/ChevronUp.js";
 import { ChevronDown as w } from "../../Symbols/Icons/ChevronDown.js";
@@ -46,12 +46,12 @@ const k = ({
   }
 ), [q, v] = m("CardContentAlign", {
   align: "left"
-}), E = p(
+}), E = g(
   "flex w-full flex-col overflow-clip rounded-lg bg-surface text-base transition-colors",
   {
     variants: {
       interactive: {
-        true: "cursor-pointer hover:bg-surface-hover active:bg-surface-pressed focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus",
+        true: "cursor-pointer hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:bg-surface-pressed",
         false: ""
       },
       outlined: {
@@ -96,7 +96,7 @@ const k = ({
     }),
     [r, e, l, i]
   );
-  return /* @__PURE__ */ s(R, { value: u, children: /* @__PURE__ */ s(g, { value: { disabled: i }, children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ s(R, { value: u, children: /* @__PURE__ */ s(p, { value: { disabled: i }, children: /* @__PURE__ */ s(
     "div",
     {
       ref: t,

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

@@ -8,7 +8,7 @@ const h = f(
     variants: {
       appearance: {
         base: "bg-surface text-base hover:bg-surface-hover active:bg-surface-pressed disabled:bg-disabled",
-        outline: "bg-base-transparent text-base outline-dashed outline-1 outline-muted-subtle hover:bg-base-transparent-hover hover:outline-muted-subtle-hover focus-visible:outline-hidden focus-visible:outline-offset-0 active:bg-base-transparent-pressed active:outline-muted-subtle-pressed disabled:bg-base-transparent disabled:outline-disabled"
+        outline: "bg-base-transparent text-base outline-1 outline-muted-subtle outline-dashed hover:bg-base-transparent-hover hover:outline-muted-subtle-hover focus-visible:outline-hidden focus-visible:outline-offset-0 active:bg-base-transparent-pressed active:outline-muted-subtle-pressed disabled:bg-base-transparent disabled:outline-disabled"
       }
     },
     defaultVariants: {

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/DataTable/DataTable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,OAAO,EAER,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAgBvD,OAAO,KAAK,EAGV,cAAc,EACd,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAejB;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,SAAS,OAAO,EAAE,sKAelD,kBAAkB,CAAC,KAAK,CAAC,4CAqB3B,CAAC;AAyDF;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,GAAI,8BAA8B,cAAc,4CA6BrE,CAAC;AAsHF;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAAI,wBAGxC,gBAAgB,4CAqBlB,CAAC"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/DataTable/DataTable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,OAAO,EAER,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAkBvD,OAAO,KAAK,EAGV,cAAc,EACd,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAejB;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,SAAS,OAAO,EAAE,sKAelD,kBAAkB,CAAC,KAAK,CAAC,4CAqB3B,CAAC;AAqFF;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,GAAI,8BAA8B,cAAc,4CA8BrE,CAAC;AAsHF;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAAI,wBAGxC,gBAAgB,4CAqBlB,CAAC"}