@ledgerhq/lumen-ui-react 0.0.80 → 0.0.82

package/dist/lib/Components/Table/Table.d.ts

@@ -0,0 +1,158 @@
+/**
+ * Root table container component. Wraps a scrollable HTML `<div>` around the `Table` element.
+ *
+ * @example
+ * <TableRoot>
+ *   <Table>
+ *     <TableHeader>
+ *       <TableHeaderRow>
+ *         <TableHeaderCell>
+ *           <TableHeaderCellSort sortDirection={sortDir} onToggleSort={setSortDir}>Name</TableHeaderCellSort>
+ *         </TableHeaderCell>
+ *       </TableHeaderRow>
+ *     </TableHeader>
+ *     <TableBody>
+ *       <TableRow>
+ *         <TableCell>John</TableCell>
+ *       </TableRow>
+ *     </TableBody>
+ *   </Table>
+ * </TableRoot>
+ */
+export declare const TableRoot: import('react').ForwardRefExoticComponent<{
+    appearance?: "no-background" | "plain";
+    children: import('react').ReactNode;
+    className?: string;
+    onScrollBottom?: () => void;
+    loading?: boolean;
+} & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Table: import('react').ForwardRefExoticComponent<{
+    children: import('react').ReactNode;
+    className?: string;
+} & import('react').HTMLAttributes<HTMLTableElement> & import('react').RefAttributes<HTMLTableElement>>;
+/**
+ * Table head component. Wraps the HTML `<thead>` element.
+ */
+export declare const TableHeader: import('react').ForwardRefExoticComponent<{
+    children: import('react').ReactNode;
+    className?: string;
+} & import('react').HTMLAttributes<HTMLTableSectionElement> & import('react').RefAttributes<HTMLTableSectionElement>>;
+/**
+ * Table body component. Wraps the HTML `<tbody>` element.
+ */
+export declare const TableBody: import('react').ForwardRefExoticComponent<{
+    children: import('react').ReactNode;
+    className?: string;
+} & import('react').HTMLAttributes<HTMLTableSectionElement> & import('react').RefAttributes<HTMLTableSectionElement>>;
+/**
+ * Table row component for body rows. Wraps the HTML `<tr>` element.
+ */
+export declare const TableRow: import('react').ForwardRefExoticComponent<{
+    clickable?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLTableRowElement>) => void;
+    children: import('react').ReactNode;
+    className?: string;
+} & import('react').HTMLAttributes<HTMLTableRowElement> & import('react').RefAttributes<HTMLTableRowElement>>;
+/**
+ * Table header row component. Wraps the HTML `<tr>` element with header-specific styles.
+ */
+export declare const TableHeaderRow: import('react').ForwardRefExoticComponent<{
+    children: import('react').ReactNode;
+    colSpan?: number;
+    className?: string;
+} & import('react').HTMLAttributes<HTMLTableRowElement> & import('react').RefAttributes<HTMLTableRowElement>>;
+/**
+ * Table Group Header row component. Wraps the HTML `<tr> + <td>` element with header sub-section for a table.
+ */
+export declare const TableGroupHeaderRow: import('react').ForwardRefExoticComponent<{
+    children: import('react').ReactNode;
+    className?: string;
+    colSpan: number;
+} & import('react').HTMLAttributes<HTMLTableRowElement> & import('react').RefAttributes<HTMLTableRowElement>>;
+/**
+ * Table data cell component. Wraps the HTML `<td>` element.
+ */
+export declare const TableCell: import('react').ForwardRefExoticComponent<{
+    hideBelow?: import('../../../types').Breakpoints;
+    children?: import('react').ReactNode;
+    className?: string;
+    align?: "start" | "end";
+} & Omit<import('react').TdHTMLAttributes<HTMLTableCellElement>, "align"> & import('react').RefAttributes<HTMLTableCellElement>>;
+/**
+ * Cell content component. To be used inside a TableCell or inside tanstack column render.
+ */
+export declare const TableCellContent: import('react').ForwardRefExoticComponent<{
+    align?: "start" | "end";
+    className?: string;
+    leadingContent?: import('react').ReactNode;
+    title?: import('react').ReactNode;
+    description?: import('react').ReactNode;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "children"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Table header cell component. Wraps the HTML `<th>` element.
+ * Use TableSortButton for sortable columns; other children are trailing content.
+ */
+export declare const TableHeaderCell: import('react').ForwardRefExoticComponent<{
+    hideBelow?: import('../../../types').Breakpoints;
+    children?: import('react').ReactNode;
+    trailingContent?: import('react').ReactNode;
+    className?: string;
+    align?: "start" | "end";
+    scope?: "col" | "row" | "colgroup" | "rowgroup";
+} & Omit<import('react').ThHTMLAttributes<HTMLTableCellElement>, "align"> & import('react').RefAttributes<HTMLTableCellElement>>;
+/**
+ * Action bar component for table controls. Positioned above the table.
+ *
+ * @example
+ * <TableActionBar>
+ *   <TableActionBarLeading>
+ *     <SearchInput />
+ *   </TableActionBarLeading>
+ *   <TableActionBarTrailing>
+ *     <Button>Export</Button>
+ *   </TableActionBarTrailing>
+ * </TableActionBar>
+ */
+export declare const TableActionBar: import('react').ForwardRefExoticComponent<{
+    children: import('react').ReactNode;
+    className?: string;
+} & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Leading section of the action bar. Contains left-aligned actions.
+ */
+export declare const TableActionBarLeading: import('react').ForwardRefExoticComponent<{
+    children: import('react').ReactNode;
+    className?: string;
+} & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Trailing section of the action bar. Contains right-aligned actions.
+ */
+export declare const TableActionBarTrailing: import('react').ForwardRefExoticComponent<{
+    children: import('react').ReactNode;
+    className?: string;
+} & import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Loading row component displayed at the bottom of the table during infinite scroll loading.
+ */
+export declare const TableLoadingRow: import('react').ForwardRefExoticComponent<{
+    className?: string;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "children"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Clickable sort control for table header columns.
+ * Displays the current sort state (asc/desc/idle) and triggers sort changes on click.
+ */
+export declare const TableInfoIcon: import('react').ForwardRefExoticComponent<{
+    className?: string;
+} & Omit<import('react').HTMLAttributes<HTMLButtonElement>, "children"> & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Sortable header label + icon. Renders a single button (label + sort icon) for accessibility.
+ * Use as the first child of TableHeaderCell; other children are trailing content.
+ */
+export declare const TableSortButton: import('react').ForwardRefExoticComponent<{
+    align?: "start" | "end";
+    children: import('react').ReactNode;
+    sortDirection?: import('./types').TableSortValue;
+    onToggleSort?: (sort: import('./types').TableSortValue) => void;
+    className?: string;
+} & Omit<import('react').HTMLAttributes<HTMLButtonElement>, "children"> & import('react').RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Table/Table.tsx"],"names":[],"mappings":"AAiDA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,SAAS;;;;;;mGA8BrB,CAAC;AAGF,eAAO,MAAM,KAAK;;;uGAYjB,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,WAAW;;;qHAStB,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,SAAS;;;qHAQrB,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,QAAQ;;wBA3FV,UAAS;;;6GA6GnB,CAAC;AAYF;;GAEG;AACH,eAAO,MAAM,cAAc;;;;6GAiBzB,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;6GAsB9B,CAAC;AA4BH;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;gIAYrB,CAAC;AAYF;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;qHA6B5B,CAAC;AA4BF;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;gIAoC3B,CAAC;AAGF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc;;;mGAY1B,CAAC;AAGF;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;mGAahC,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,sBAAsB;;;mGAajC,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,eAAe;;qHAwB3B,CAAC;AAGF;;;GAGG;AACH,eAAO,MAAM,aAAa;;2HAazB,CAAC;AAkCF;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;2HA6C3B,CAAC"}

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

@@ -0,0 +1,390 @@
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createSafeContext as T, cn as c } from "../../../libs/utils-shared/dist/index.js";
+import { cva as i } from "class-variance-authority";
+import { forwardRef as s } from "react";
+import { useThrottledScrollBottom as g } from "./utils/useThrottledScrollBottom.js";
+import { Spot as w } from "../Spot/Spot.js";
+import { Information as R } from "../../Symbols/Icons/Information.js";
+import { useCommonTranslation as B } from "../../../i18n/useCommonTranslation.js";
+import { ChevronUpDown as C } from "../../Symbols/Icons/ChevronUpDown.js";
+import { ChevronDescending as j } from "../../Symbols/Icons/ChevronDescending.js";
+import { ChevronAscending as H } from "../../Symbols/Icons/ChevronAscending.js";
+import { InteractiveIcon as A } from "../InteractiveIcon/InteractiveIcon.js";
+const [I, b] = T("Table"), L = i(
+  "relative scrollbar-none w-full max-w-full border-collapse overflow-x-auto rounded-lg",
+  {
+    variants: {
+      appearance: {
+        "no-background": "bg-canvas",
+        plain: "bg-surface"
+      }
+    }
+  }
+), V = s(
+  ({
+    children: t,
+    appearance: e = "no-background",
+    className: a,
+    onScrollBottom: r,
+    loading: n,
+    ...o
+  }, d) => {
+    const m = g({
+      onScrollBottom: r,
+      loading: n
+    });
+    return /* @__PURE__ */ l(I, { value: { appearance: e, loading: n }, children: /* @__PURE__ */ l(
+      "div",
+      {
+        ...o,
+        ref: d,
+        className: L({ appearance: e, className: a }),
+        onScroll: m,
+        children: t
+      }
+    ) });
+  }
+);
+V.displayName = "TableRoot";
+const S = s(
+  ({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l(
+    "table",
+    {
+      ...a,
+      className: c("w-full max-w-full table-fixed", e),
+      ref: r,
+      children: t
+    }
+  )
+);
+S.displayName = "Table";
+const q = s(({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l("thead", { ref: r, className: e, ...a, children: t }));
+q.displayName = "TableHeader";
+const z = s(
+  ({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l("tbody", { ref: r, className: e, ...a, children: t })
+);
+z.displayName = "TableBody";
+const G = s(
+  ({ children: t, className: e, clickable: a = !1, onClick: r, ...n }, o) => /* @__PURE__ */ l(
+    "tr",
+    {
+      ref: o,
+      onClick: r,
+      role: a ? "button" : void 0,
+      className: c(
+        a && "cursor-pointer outline-none select-none hover:bg-base-transparent-hover active:bg-base-transparent-pressed",
+        e
+      ),
+      ...n,
+      children: t
+    }
+  )
+);
+G.displayName = "TableRow";
+const M = i("sticky top-0", {
+  variants: {
+    appearance: {
+      "no-background": "bg-canvas",
+      plain: "bg-surface"
+    }
+  }
+}), k = s(({ children: t, className: e, ...a }, r) => {
+  const { appearance: n } = b({
+    consumerName: "TableHeaderRow",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ l(
+    "tr",
+    {
+      ref: r,
+      className: M({ appearance: n, className: e }),
+      ...a,
+      children: t
+    }
+  );
+});
+k.displayName = "TableHeaderRow";
+const J = s(({ children: t, className: e, colSpan: a = 1, ...r }, n) => {
+  const { appearance: o } = b({
+    consumerName: "TableGroupHeaderRow",
+    contextRequired: !0
+  });
+  return /* @__PURE__ */ l("tr", { ref: n, className: c("h-40", e), ...r, children: /* @__PURE__ */ l("td", { colSpan: a, children: /* @__PURE__ */ l(
+    "div",
+    {
+      className: c(
+        "flex h-32 w-full items-center bg-muted px-12 body-3 text-base",
+        o === "no-background" && "rounded-sm"
+      ),
+      children: t
+    }
+  ) }) });
+});
+J.displayName = "TableGroupHeaderRow";
+const f = {
+  root: i(
+    "h-64 truncate p-12 body-3 text-base first:rounded-l-md last:rounded-r-md",
+    {
+      variants: {
+        hideBelow: {
+          xs: "hidden xs:table-cell",
+          sm: "hidden sm:table-cell",
+          md: "hidden md:table-cell",
+          lg: "hidden lg:table-cell",
+          xl: "hidden xl:table-cell"
+        }
+      }
+    }
+  ),
+  inner: i("flex flex-1 justify-end", {
+    variants: {
+      align: {
+        start: "text-start justify-start",
+        end: "text-end justify-end"
+      }
+    }
+  })
+}, K = s(
+  ({ children: t, className: e, hideBelow: a, align: r = "start", ...n }, o) => /* @__PURE__ */ l(
+    "td",
+    {
+      ref: o,
+      className: f.root({ hideBelow: a, className: e }),
+      ...n,
+      children: /* @__PURE__ */ l("div", { className: f.inner({ align: r }), children: t })
+    }
+  )
+);
+K.displayName = "TableCell";
+const P = i("flex items-center gap-12 truncate", {
+  variants: {
+    align: {
+      start: "text-start",
+      end: "text-end"
+    }
+  }
+}), U = s(
+  ({
+    className: t,
+    align: e = "start",
+    leadingContent: a,
+    title: r,
+    description: n,
+    ...o
+  }, d) => /* @__PURE__ */ u(
+    "div",
+    {
+      ref: d,
+      className: P({ align: e, className: t }),
+      ...o,
+      children: [
+        /* @__PURE__ */ l("div", { children: a }),
+        /* @__PURE__ */ u("div", { className: "flex flex-col gap-4 truncate", children: [
+          /* @__PURE__ */ l("div", { className: "truncate body-2 text-base", children: r }),
+          /* @__PURE__ */ l("div", { className: "truncate body-3 text-muted", children: n })
+        ] })
+      ]
+    }
+  )
+);
+U.displayName = "TableCellContent";
+const v = {
+  root: i("group h-40 truncate p-12 body-3 text-base", {
+    variants: {
+      hideBelow: {
+        xs: "hidden xs:table-cell",
+        sm: "hidden sm:table-cell",
+        md: "hidden md:table-cell",
+        lg: "hidden lg:table-cell",
+        xl: "hidden xl:table-cell"
+      }
+    }
+  }),
+  content: i("flex min-w-0 items-center gap-4 truncate", {
+    variants: {
+      align: {
+        start: "text-start justify-start",
+        end: "text-end justify-end"
+      }
+    }
+  }),
+  trailingContent: i(
+    "flex items-center justify-center opacity-0 group-hover:opacity-100"
+  )
+}, E = s(
+  ({
+    children: t,
+    className: e,
+    scope: a = "col",
+    hideBelow: r,
+    align: n = "start",
+    trailingContent: o,
+    ...d
+  }, m) => /* @__PURE__ */ l(
+    "th",
+    {
+      ref: m,
+      scope: a,
+      className: v.root({ hideBelow: r, className: e }),
+      ...d,
+      children: /* @__PURE__ */ l("div", { className: "min-w-0", children: /* @__PURE__ */ u("div", { className: v.content({ align: n }), children: [
+        /* @__PURE__ */ l("span", { className: c("truncate", n === "end" && "order-1"), children: t }),
+        /* @__PURE__ */ l("div", { className: "flex items-center justify-center opacity-0 group-hover:opacity-100", children: o })
+      ] }) })
+    }
+  )
+);
+E.displayName = "TableHeaderCell";
+const F = s(
+  ({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l(
+    "div",
+    {
+      ref: r,
+      className: c("flex items-center gap-8 py-12", e),
+      ...a,
+      children: t
+    }
+  )
+);
+F.displayName = "TableActionBar";
+const O = s(({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l(
+  "div",
+  {
+    ref: r,
+    className: c("flex items-center gap-8", e),
+    ...a,
+    children: t
+  }
+));
+O.displayName = "TableActionBarLeading";
+const Q = s(({ children: t, className: e, ...a }, r) => /* @__PURE__ */ l(
+  "div",
+  {
+    ref: r,
+    className: c("ml-auto flex items-center gap-8", e),
+    ...a,
+    children: t
+  }
+));
+Q.displayName = "TableActionBarTrailing";
+const W = s(
+  ({ className: t, ...e }, a) => {
+    const { loading: r } = b({
+      consumerName: "TableLoadingRow",
+      contextRequired: !0
+    });
+    return r ? /* @__PURE__ */ l(
+      "div",
+      {
+        ...e,
+        ref: a,
+        className: c(
+          "flex h-80 w-full items-center justify-center p-12",
+          t
+        ),
+        children: /* @__PURE__ */ l(w, { appearance: "loader", size: 48 })
+      }
+    ) : null;
+  }
+);
+W.displayName = "TableLoadingRow";
+const X = s(
+  ({ className: t, ...e }, a) => /* @__PURE__ */ l(
+    A,
+    {
+      ...e,
+      iconType: "filled",
+      className: t,
+      ref: a,
+      children: /* @__PURE__ */ l(R, { size: 20 })
+    }
+  )
+);
+X.displayName = "TableInfoIcon";
+const Y = {
+  asc: H,
+  desc: j,
+  idle: C
+}, x = {
+  root: i(
+    [
+      "group 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"
+    ],
+    {
+      variants: {
+        align: {
+          end: "flex-row-reverse",
+          start: ""
+        }
+      }
+    }
+  ),
+  icon: i("", {
+    variants: {
+      active: {
+        true: "opacity-100",
+        false: "opacity-0 group-hover:opacity-100"
+      }
+    }
+  })
+}, Z = s(
+  ({
+    children: t,
+    sortDirection: e,
+    align: a = "start",
+    onToggleSort: r,
+    className: n,
+    onClick: o,
+    ...d
+  }, m) => {
+    const { t: p } = B(), h = Y[e || "idle"], y = {
+      asc: p("table.ascAriaLabel"),
+      desc: p("table.descAriaLabel")
+    };
+    return /* @__PURE__ */ u(
+      "button",
+      {
+        ...d,
+        ref: m,
+        type: "button",
+        className: x.root({ align: a, className: n }),
+        "aria-label": e ? y[e] : void 0,
+        onClick: (N) => {
+          o == null || o(N), r == null || r(e === "asc" ? "desc" : "asc");
+        },
+        children: [
+          /* @__PURE__ */ l("span", { className: "min-w-0 truncate", children: t }),
+          /* @__PURE__ */ l(
+            h,
+            {
+              size: 20,
+              className: x.icon({
+                active: !!e
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Z.displayName = "TableSortButton";
+export {
+  S as Table,
+  F as TableActionBar,
+  O as TableActionBarLeading,
+  Q as TableActionBarTrailing,
+  z as TableBody,
+  K as TableCell,
+  U as TableCellContent,
+  J as TableGroupHeaderRow,
+  q as TableHeader,
+  E as TableHeaderCell,
+  k as TableHeaderRow,
+  X as TableInfoIcon,
+  W as TableLoadingRow,
+  V as TableRoot,
+  G as TableRow,
+  Z as TableSortButton
+};

package/dist/lib/Components/Table/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const TABLE_CELL_HEIGHT = 64;
+export declare const TABLE_SCROLL_BOTTOM_THRESHOLD_IN_ROW = 2;
+//# sourceMappingURL=constants.d.ts.map

package/dist/lib/Components/Table/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Table/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,oCAAoC,IAAI,CAAC"}

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

@@ -0,0 +1,5 @@
+const L = 64, _ = 2;
+export {
+  L as TABLE_CELL_HEIGHT,
+  _ as TABLE_SCROLL_BOTTOM_THRESHOLD_IN_ROW
+};

package/dist/lib/Components/Table/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Table';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/Table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Table/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}