@ledgerhq/lumen-ui-react 0.1.46 → 0.1.48

package/dist/lib/Components/Table/Table.js

@@ -1,15 +1,15 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { createSafeContext as N, cn as c } from "../../../libs/utils-shared/dist/index.js";
-import { cva as s } from "class-variance-authority";
-import { useThrottledScrollBottom as T } from "./utils/useThrottledScrollBottom.js";
-import { Spot as y } from "../Spot/Spot.js";
-import { Information as w } from "../../Symbols/Icons/Information.js";
-import { useCommonTranslation as C } from "../../../i18n/useCommonTranslation.js";
-import { ChevronUpDown as R } from "../../Symbols/Icons/ChevronUpDown.js";
-import { ChevronDescending as B } from "../../Symbols/Icons/ChevronDescending.js";
-import { ChevronAscending as j } from "../../Symbols/Icons/ChevronAscending.js";
-import { InteractiveIcon as k } from "../InteractiveIcon/InteractiveIcon.js";
-const [H, u] = N("Table"), I = s(
+import { jsx as l, jsxs as v } from "react/jsx-runtime";
+import { createSafeContext as h, cn as s } from "../../../libs/utils-shared/dist/index.js";
+import { cva as c } from "class-variance-authority";
+import { useThrottledScrollBottom as N } from "./utils/useThrottledScrollBottom.js";
+import { Spot as w } from "../Spot/Spot.js";
+import { Information as y } from "../../Symbols/Icons/Information.js";
+import { useCommonTranslation as R } from "../../../i18n/useCommonTranslation.js";
+import { ChevronUpDown as B } from "../../Symbols/Icons/ChevronUpDown.js";
+import { ChevronDescending as j } from "../../Symbols/Icons/ChevronDescending.js";
+import { ChevronAscending as I } from "../../Symbols/Icons/ChevronAscending.js";
+import { InteractiveIcon as A } from "../InteractiveIcon/InteractiveIcon.js";
+const [k, u] = h("Table"), q = c(
   "relative scrollbar-none w-full max-w-full border-collapse overflow-x-auto rounded-lg",
   {
     variants: {
@@ -19,43 +19,43 @@ const [H, u] = N("Table"), I = s(
       }
     }
   }
-), Q = ({
-  children: a,
+), W = ({
+  children: n,
   appearance: e = "no-background",
   className: t,
-  onScrollBottom: n,
-  loading: l,
+  onScrollBottom: a,
+  loading: r,
   ref: o,
   ...i
 }) => {
-  const d = T({
-    onScrollBottom: n,
-    loading: l
+  const d = N({
+    onScrollBottom: a,
+    loading: r
   });
-  return /* @__PURE__ */ r(H, { value: { appearance: e, loading: l }, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ l(k, { value: { appearance: e, loading: r }, children: /* @__PURE__ */ l(
     "div",
     {
       ...i,
       ref: o,
-      className: I({ appearance: e, className: t }),
+      className: q({ appearance: e, className: t }),
       onScroll: d,
-      children: a
+      children: n
     }
   ) });
-}, W = ({ children: a, className: e, ref: t, ...n }) => /* @__PURE__ */ r(
+}, X = ({ children: n, className: e, ref: t, ...a }) => /* @__PURE__ */ l(
   "table",
   {
-    ...n,
-    className: c("w-full max-w-full table-fixed", e),
+    ...a,
+    className: s("w-full max-w-full table-fixed", e),
     ref: t,
-    children: a
+    children: n
   }
-), X = ({
-  children: a,
+), Y = ({
+  children: n,
   className: e,
   ref: t,
-  ...n
-}) => /* @__PURE__ */ r("colgroup", { ref: t, className: e, ...n, children: a }), S = s("", {
+  ...a
+}) => /* @__PURE__ */ l("colgroup", { ref: t, className: e, ...a, children: n }), H = c("", {
   variants: {
     hideBelow: {
       xs: "hidden xs:table-column",
@@ -65,49 +65,49 @@ const [H, u] = N("Table"), I = s(
       xl: "hidden xl:table-column"
     }
   }
-}), Y = ({
-  className: a,
+}), Z = ({
+  className: n,
   hideBelow: e,
   ref: t,
-  ...n
-}) => /* @__PURE__ */ r(
+  ...a
+}) => /* @__PURE__ */ l(
   "col",
   {
     ref: t,
-    className: S({ hideBelow: e, className: a }),
-    ...n
+    className: H({ hideBelow: e, className: n }),
+    ...a
   }
-), Z = ({
-  children: a,
+), _ = ({
+  children: n,
   className: e,
   ref: t,
-  ...n
-}) => /* @__PURE__ */ r("thead", { ref: t, className: e, ...n, children: a }), _ = ({
-  children: a,
+  ...a
+}) => /* @__PURE__ */ l("thead", { ref: t, className: e, ...a, children: n }), $ = ({
+  children: n,
   className: e,
   ref: t,
-  ...n
-}) => /* @__PURE__ */ r("tbody", { ref: t, className: e, ...n, children: a }), $ = ({
-  children: a,
+  ...a
+}) => /* @__PURE__ */ l("tbody", { ref: t, className: e, ...a, children: n }), ee = ({
+  children: n,
   className: e,
   clickable: t = !1,
-  onClick: n,
-  ref: l,
+  onClick: a,
+  ref: r,
   ...o
-}) => /* @__PURE__ */ r(
+}) => /* @__PURE__ */ l(
   "tr",
   {
-    ref: l,
-    onClick: n,
+    ref: r,
+    onClick: a,
     role: t ? "button" : void 0,
-    className: c(
+    className: s(
       t && "cursor-pointer outline-none select-none hover:bg-base-transparent-hover active:bg-base-transparent-pressed",
       e
     ),
     ...o,
-    children: a
+    children: n
   }
-), V = s("", {
+), S = c("", {
   variants: {
     appearance: {
       "no-background": "bg-canvas",
@@ -118,49 +118,49 @@ const [H, u] = N("Table"), I = s(
       false: ""
     }
   }
-}), D = ({
-  children: a,
+}), te = ({
+  children: n,
   className: e,
   stickyHeader: t = !0,
-  ref: n,
-  ...l
+  ref: a,
+  ...r
 }) => {
   const { appearance: o } = u({
     consumerName: "TableHeaderRow",
     contextRequired: !0
   });
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ l(
     "tr",
     {
-      ref: n,
-      className: V({ appearance: o, stickyHeader: t, className: e }),
-      ...l,
-      children: a
+      ref: a,
+      className: S({ appearance: o, stickyHeader: t, className: e }),
+      ...r,
+      children: n
     }
   );
-}, ee = ({
-  children: a,
+}, ne = ({
+  children: n,
   className: e,
   colSpan: t = 1,
-  ref: n,
-  ...l
+  ref: a,
+  ...r
 }) => {
   const { appearance: o } = u({
     consumerName: "TableGroupHeaderRow",
     contextRequired: !0
   });
-  return /* @__PURE__ */ r("tr", { ref: n, className: c("h-40", e), ...l, children: /* @__PURE__ */ r("td", { colSpan: t, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ l("tr", { ref: a, className: s("h-40", e), ...r, children: /* @__PURE__ */ l("td", { colSpan: t, children: /* @__PURE__ */ l(
     "div",
     {
-      className: c(
+      className: s(
         "flex h-32 w-full items-center bg-muted px-12 body-3 text-base",
         o === "no-background" && "rounded-sm"
       ),
-      children: a
+      children: n
     }
   ) }) });
 }, p = {
-  root: s(
+  root: c(
     "h-64 truncate p-12 body-3 text-base first:rounded-l-md last:rounded-r-md",
     {
       variants: {
@@ -174,60 +174,144 @@ const [H, u] = N("Table"), I = s(
       }
     }
   ),
-  inner: s("flex flex-1 justify-end", {
+  inner: c("flex flex-1", {
     variants: {
       align: {
-        start: "text-start justify-start",
-        end: "text-end justify-end"
+        start: "justify-start text-start",
+        end: "justify-end text-end"
       }
     }
   })
-}, te = ({
-  children: a,
+}, ae = ({
+  children: n,
   className: e,
   hideBelow: t,
-  align: n = "start",
-  ref: l,
+  align: a = "start",
+  ref: r,
   ...o
-}) => /* @__PURE__ */ r(
+}) => /* @__PURE__ */ l(
   "td",
   {
-    ref: l,
+    ref: r,
     className: p.root({ hideBelow: t, className: e }),
     ...o,
-    children: /* @__PURE__ */ r("div", { className: p.inner({ align: n }), children: a })
+    children: /* @__PURE__ */ l("div", { className: p.inner({ align: a }), children: n })
   }
-), A = s("flex min-w-0 items-center gap-12", {
+), [V, m] = h("TableCellItem", { align: "start" }), L = c("flex min-w-0 items-center gap-12", {
   variants: {
     align: {
       start: "text-start",
       end: "text-end"
     }
   }
-}), ae = ({
-  className: a,
+}), le = ({
+  className: n,
   align: e = "start",
-  leadingContent: t,
-  title: n,
-  description: l,
-  ref: o,
-  ...i
-}) => /* @__PURE__ */ m(
+  children: t,
+  ref: a,
+  ...r
+}) => /* @__PURE__ */ l(V, { value: { align: e }, children: /* @__PURE__ */ l(
   "div",
   {
-    ref: o,
-    className: A({ align: e, className: a }),
-    ...i,
-    children: [
-      t && /* @__PURE__ */ r("div", { className: "shrink-0", children: t }),
-      /* @__PURE__ */ m("div", { className: "flex min-w-0 flex-col gap-4", children: [
-        /* @__PURE__ */ r("div", { className: "shrink-0 body-2 text-base", children: n }),
-        /* @__PURE__ */ r("div", { className: "truncate body-3 text-muted", children: l })
-      ] })
-    ]
+    ref: a,
+    className: L({ align: e, className: n }),
+    ...r,
+    children: t
   }
-), f = {
-  root: s("group h-40 truncate p-12 body-3 text-base", {
+) }), re = ({
+  className: n,
+  children: e,
+  ref: t,
+  ...a
+}) => {
+  const { align: r } = m({
+    consumerName: "TableCellContent",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: t,
+      className: s(
+        "flex min-w-0 flex-col gap-4",
+        r === "end" && "items-end text-end",
+        n
+      ),
+      ...a,
+      children: e
+    }
+  );
+}, oe = ({
+  className: n,
+  children: e,
+  ref: t,
+  ...a
+}) => {
+  const { align: r } = m({
+    consumerName: "TableCellContentTitle",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: t,
+      className: s(
+        "shrink-0 body-2 text-base",
+        r === "end" && "text-end",
+        n
+      ),
+      ...a,
+      children: e
+    }
+  );
+}, se = ({
+  className: n,
+  children: e,
+  ref: t,
+  ...a
+}) => {
+  const { align: r } = m({
+    consumerName: "TableCellContentDescription",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: t,
+      className: s(
+        "truncate body-3 text-muted",
+        r === "end" && "text-end",
+        n
+      ),
+      ...a,
+      children: e
+    }
+  );
+}, ce = ({
+  className: n,
+  children: e,
+  ref: t,
+  ...a
+}) => {
+  const { align: r } = m({
+    consumerName: "TableCellContentRow",
+    contextRequired: !1
+  });
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: t,
+      className: s(
+        "flex min-w-0 items-center gap-8",
+        r === "end" && "justify-end",
+        n
+      ),
+      ...a,
+      children: e
+    }
+  );
+}, f = {
+  root: c("group h-40 truncate p-12 body-3 text-base", {
     variants: {
       hideBelow: {
         xs: "hidden xs:table-cell",
@@ -238,118 +322,118 @@ const [H, u] = N("Table"), I = s(
       }
     }
   }),
-  content: s("flex min-w-0 items-center gap-4 truncate", {
+  content: c("flex min-w-0 items-center gap-4 truncate", {
     variants: {
       align: {
-        start: "text-start justify-start",
-        end: "text-end justify-end"
+        start: "justify-start text-start",
+        end: "justify-end text-end"
       }
     }
   }),
-  trailingContent: s(
+  trailingContent: c(
     "flex items-center justify-center opacity-0 group-hover:opacity-100"
   )
-}, ne = ({
-  children: a,
+}, ie = ({
+  children: n,
   className: e,
   scope: t = "col",
-  hideBelow: n,
-  align: l = "start",
+  hideBelow: a,
+  align: r = "start",
   trailingContent: o,
   ref: i,
   ...d
-}) => /* @__PURE__ */ r(
+}) => /* @__PURE__ */ l(
   "th",
   {
     ref: i,
     scope: t,
-    className: f.root({ hideBelow: n, className: e }),
+    className: f.root({ hideBelow: a, className: e }),
     ...d,
-    children: /* @__PURE__ */ r("div", { className: "min-w-0", children: /* @__PURE__ */ m("div", { className: f.content({ align: l }), children: [
-      /* @__PURE__ */ r("span", { className: c("truncate", l === "end" && "order-1"), children: a }),
-      /* @__PURE__ */ r("div", { className: "flex items-center justify-center opacity-0 group-hover:opacity-100", children: o })
+    children: /* @__PURE__ */ l("div", { className: "min-w-0", children: /* @__PURE__ */ v("div", { className: f.content({ align: r }), children: [
+      /* @__PURE__ */ l("span", { className: s("truncate", r === "end" && "order-1"), children: n }),
+      /* @__PURE__ */ l("div", { className: "flex items-center justify-center opacity-0 group-hover:opacity-100", children: o })
     ] }) })
   }
-), re = ({
-  children: a,
+), de = ({
+  children: n,
   className: e,
   ref: t,
-  ...n
-}) => /* @__PURE__ */ r(
+  ...a
+}) => /* @__PURE__ */ l(
   "div",
   {
     ref: t,
-    className: c("flex items-center gap-8 py-12", e),
-    ...n,
-    children: a
+    className: s("flex items-center gap-8 py-12", e),
+    ...a,
+    children: n
   }
-), le = ({
-  children: a,
+), me = ({
+  children: n,
   className: e,
   ref: t,
-  ...n
-}) => /* @__PURE__ */ r(
+  ...a
+}) => /* @__PURE__ */ l(
   "div",
   {
     ref: t,
-    className: c("flex items-center gap-8", e),
-    ...n,
-    children: a
+    className: s("flex items-center gap-8", e),
+    ...a,
+    children: n
   }
-), oe = ({
-  children: a,
+), ue = ({
+  children: n,
   className: e,
   ref: t,
-  ...n
-}) => /* @__PURE__ */ r(
+  ...a
+}) => /* @__PURE__ */ l(
   "div",
   {
     ref: t,
-    className: c("ml-auto flex items-center gap-8", e),
-    ...n,
-    children: a
+    className: s("ml-auto flex items-center gap-8", e),
+    ...a,
+    children: n
   }
-), se = ({
-  className: a,
+), be = ({
+  className: n,
   ref: e,
   ...t
 }) => {
-  const { loading: n } = u({
+  const { loading: a } = u({
     consumerName: "TableLoadingRow",
     contextRequired: !0
   });
-  return n ? /* @__PURE__ */ r(
+  return a ? /* @__PURE__ */ l(
     "div",
     {
       ...t,
       ref: e,
-      className: c(
+      className: s(
         "flex h-80 w-full items-center justify-center p-12",
-        a
+        n
       ),
-      children: /* @__PURE__ */ r(y, { appearance: "loader", size: 48 })
+      children: /* @__PURE__ */ l(w, { appearance: "loader", size: 48 })
     }
   ) : null;
-}, ce = ({
-  className: a,
+}, pe = ({
+  className: n,
   ref: e,
   ...t
-}) => /* @__PURE__ */ r(
-  k,
+}) => /* @__PURE__ */ l(
+  A,
   {
     ...t,
     iconType: "filled",
-    icon: w,
+    icon: y,
     size: 20,
-    className: a,
+    className: n,
     ref: e
   }
-), L = {
-  asc: j,
-  desc: B,
-  idle: R
-}, h = {
-  root: s(
+), z = {
+  asc: I,
+  desc: j,
+  idle: B
+}, x = {
+  root: c(
     [
       "flex min-w-0 cursor-pointer items-center gap-4",
       "rounded-xs focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
@@ -363,7 +447,7 @@ const [H, u] = N("Table"), I = s(
       }
     }
   ),
-  icon: s("", {
+  icon: c("", {
     variants: {
       active: {
         true: "opacity-100",
@@ -371,38 +455,38 @@ const [H, u] = N("Table"), I = s(
       }
     }
   })
-}, ie = ({
-  children: a,
+}, fe = ({
+  children: n,
   sortDirection: e,
   align: t = "start",
-  onToggleSort: n,
-  className: l,
+  onToggleSort: a,
+  className: r,
   onClick: o,
   ref: i,
   ...d
 }) => {
-  const { t: b } = C(), x = L[e || "idle"], v = {
+  const { t: b } = R(), g = z[e || "idle"], T = {
     asc: b("components.table.ascAriaLabel"),
     desc: b("components.table.descAriaLabel")
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ v(
     "button",
     {
       ...d,
       ref: i,
       type: "button",
-      className: h.root({ align: t, className: l }),
-      "aria-label": e ? v[e] : void 0,
-      onClick: (g) => {
-        o?.(g), n?.(e === "asc" ? "desc" : "asc");
+      className: x.root({ align: t, className: r }),
+      "aria-label": e ? T[e] : void 0,
+      onClick: (C) => {
+        o?.(C), a?.(e === "asc" ? "desc" : "asc");
       },
       children: [
-        /* @__PURE__ */ r("span", { className: "min-w-0 truncate", children: a }),
-        /* @__PURE__ */ r(
-          x,
+        /* @__PURE__ */ l("span", { className: "min-w-0 truncate", children: n }),
+        /* @__PURE__ */ l(
+          g,
           {
             size: 20,
-            className: h.icon({
+            className: x.icon({
               active: !!e
             })
           }
@@ -412,22 +496,26 @@ const [H, u] = N("Table"), I = s(
   );
 };
 export {
-  W as Table,
-  re as TableActionBar,
-  le as TableActionBarLeading,
-  oe as TableActionBarTrailing,
-  _ as TableBody,
-  te as TableCell,
-  ae as TableCellContent,
-  Y as TableCol,
-  X as TableColGroup,
-  ee as TableGroupHeaderRow,
-  Z as TableHeader,
-  ne as TableHeaderCell,
-  D as TableHeaderRow,
-  ce as TableInfoIcon,
-  se as TableLoadingRow,
-  Q as TableRoot,
-  $ as TableRow,
-  ie as TableSortButton
+  X as Table,
+  de as TableActionBar,
+  me as TableActionBarLeading,
+  ue as TableActionBarTrailing,
+  $ as TableBody,
+  ae as TableCell,
+  re as TableCellContent,
+  se as TableCellContentDescription,
+  ce as TableCellContentRow,
+  oe as TableCellContentTitle,
+  le as TableCellItem,
+  Z as TableCol,
+  Y as TableColGroup,
+  ne as TableGroupHeaderRow,
+  _ as TableHeader,
+  ie as TableHeaderCell,
+  te as TableHeaderRow,
+  pe as TableInfoIcon,
+  be as TableLoadingRow,
+  W as TableRoot,
+  ee as TableRow,
+  fe as TableSortButton
 };