@tesouro/embedded-components-react 0.2.205 → 0.2.208

package/dist/libs/tesouro-embedded-components-react/cards-widget/feature/dist/index6.js

@@ -0,0 +1,260 @@
+"use client";
+import { useControllableState as ve } from "@radix-ui/react-use-controllable-state";
+import { useMemo as l, useEffect as x, useState as I, useRef as Ie, useCallback as g } from "react";
+import { useCreditCardsQuery as be } from "../../data-access/dist/index2.js";
+import { useDebitCardsQuery as Ae } from "../../data-access/dist/index3.js";
+import "../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import "../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import "../../../shared/data-access/dist/lib/rest/client.gen.js";
+import "@tanstack/react-query";
+import "../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import { useAllBankAccountsQuery as ye } from "../../../shared/data-access/dist/lib/bank-account/useAllBankAccountsQuery.js";
+import "../../../shared/feature/dist/lib/WidgetProvider/types.js";
+import "react/jsx-runtime";
+import "lucide-react";
+import "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import "../../../shared/ui/dist/lib/OnboardingShell/OnboardingShellOverlayPortal.js";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetContext.js";
+import "react-error-boundary";
+import { useAnalyticsTrack as he } from "../../../shared/feature/dist/lib/analytics/hooks.js";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetTokenRefreshContext.js";
+import { useWidgetConfig as Ne, useWidgetLoading as Re, useWidgetError as $e } from "../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
+import { CardProgram as b } from "../../../shared/feature/dist/lib/card/cardProgram.js";
+import { CardsWidgetAnalyticsEvent as we } from "./index5.js";
+import { resolveCardsFeatureLabels as Le } from "./index3.js";
+import { withFallback as xe, maskAccountNumber as De } from "./index7.js";
+import { getCardsPermissions as Fe } from "./index4.js";
+import { toCreditCardListItems as We, toDebitCardListItems as Ee, toCardRows as Me, CARD_COLUMNS_BY_PROGRAM as _e } from "./index8.js";
+const Ke = [10, 25, 50], Qe = 10, je = "<none>";
+function A(e, i) {
+  return e !== void 0 && i !== void 0 && e !== i;
+}
+function Z(e) {
+  const i = Number.isInteger(e?.pageSize) && Number(e?.pageSize) > 0 ? Number(e?.pageSize) : Qe;
+  return {
+    paginationToken: e?.paginationToken,
+    pageSize: i
+  };
+}
+function Sa({
+  cardProgram: e,
+  pagination: i,
+  defaultPagination: y,
+  onPaginationChange: D,
+  featureLabels: F,
+  selectedCardId: ee,
+  defaultSelectedCardId: ae,
+  onSelectedCardIdChange: ie,
+  onCreateCard: W,
+  onActivateCard: E
+}) {
+  const P = l(
+    () => Le(F),
+    [F]
+  ), M = he();
+  x(() => {
+    M(we.Mounted);
+  }, [M]);
+  const { organizationId: S, widgetToken: ne, initResponse: f } = Ne(), c = f?.userId ?? void 0, oe = Re(), _ = !!$e(), K = !!(S && ne), o = l(
+    () => Fe({ cardProgram: e, scopes: f?.scopes }),
+    [e, f?.scopes]
+  ), t = K && o.canRead && !!f, te = l(
+    () => Z(i),
+    [i?.pageSize, i?.paginationToken]
+  ), n = l(
+    () => Z(y),
+    [y?.pageSize, y?.paginationToken]
+  ), [p, re] = I(c);
+  c !== void 0 && c !== p && re(c);
+  const [r, se] = I(S);
+  S !== void 0 && S !== r && se(S);
+  const u = [
+    [
+      e,
+      r === null ? je : r ?? "",
+      p ?? ""
+    ].join("\0"),
+    n.paginationToken ?? "",
+    n.pageSize
+  ].join("\0"), k = i !== void 0, [Q, j] = I(() => ({
+    resetKey: u,
+    paginationToken: n.paginationToken,
+    pageSize: n.pageSize
+  })), [de, ge] = I(!1), [ce, v] = ve({
+    prop: ee,
+    defaultProp: ae ?? null,
+    onChange: ie,
+    caller: "CardsWidget"
+  }), z = Ie({
+    cardProgram: e,
+    organizationId: r,
+    userId: p
+  }), pe = z.current.cardProgram !== e || A(
+    z.current.organizationId,
+    r
+  ) || A(z.current.userId, p);
+  x(() => {
+    const a = z.current;
+    z.current = {
+      cardProgram: e,
+      organizationId: r,
+      userId: p
+    }, (a.cardProgram !== e || A(
+      a.organizationId,
+      r
+    ) || A(a.userId, p)) && v(null);
+  }, [
+    e,
+    r,
+    p,
+    v
+  ]);
+  const h = g(
+    (a) => {
+      v(a);
+    },
+    [v]
+  ), G = de && !!c, ue = Q.resetKey === u;
+  x(() => {
+    k || j(
+      (a) => a.resetKey === u ? a : {
+        resetKey: u,
+        paginationToken: n.paginationToken,
+        pageSize: n.pageSize
+      }
+    );
+  }, [
+    n.pageSize,
+    n.paginationToken,
+    k,
+    u
+  ]);
+  const O = k ? te : ue ? Q : n, me = O.paginationToken, s = O.pageSize, U = {
+    limit: s,
+    paginationToken: me,
+    userId: G ? c : void 0
+    // Both hooks are always called — hooks cannot be conditional — and exactly
+    // one of them is enabled, so only the selected program issues a request.
+    // Folding them into one hook was rejected upstream: the request contracts
+    // match but the response shapes do not.
+  }, N = be({
+    ...U,
+    enabled: t && e === b.Credit
+  }), R = Ae({
+    ...U,
+    enabled: t && e === b.Debit
+  }), C = e === b.Credit ? N : R, T = t && o.canReadFundingAccounts, m = ye({
+    enabled: T
+  }), V = l(() => {
+    const a = /* @__PURE__ */ new Map();
+    if (!o.canReadFundingAccounts)
+      return a;
+    for (const L of m.data?.data ?? [])
+      a.set(
+        L.id,
+        xe(
+          L.nickname,
+          De(L.accountNumber) ?? P.untitledFundingAccount
+        )
+      );
+    return a;
+  }, [
+    m.data?.data,
+    P.untitledFundingAccount,
+    o.canReadFundingAccounts
+  ]), Y = T && m.isError, le = T && !Y && (m.isLoading || m.isFetchingNextPage || !!m.hasNextPage), q = l(() => t ? e === b.Credit ? We(N.data?.data ?? []) : Ee(R.data?.data ?? []) : [], [
+    t,
+    e,
+    N.data?.data,
+    R.data?.data
+  ]), Ce = l(
+    () => Me(q, {
+      labels: P,
+      fundingAccountNames: V,
+      canActivate: o.canActivate,
+      // Always supplied now, so every row is selectable. A host that wants rows
+      // inert pins `selectedCardId` to `null`: the click is still reported, it
+      // just opens nothing.
+      onCardSelect: h,
+      onActivateCard: E
+    }),
+    [
+      q,
+      V,
+      h,
+      P,
+      E,
+      o.canActivate
+    ]
+  ), $ = C.data?.nextPaginationToken ?? void 0, w = C.data?.prevPaginationToken ?? void 0, Se = !!C.data, B = t && (C.isError || Y), d = g(
+    (a) => {
+      k || j({
+        resetKey: u,
+        paginationToken: a.paginationToken,
+        pageSize: a.pageSize
+      }), D?.(a);
+    },
+    [k, D, u]
+  ), H = g(() => {
+    d({ paginationToken: void 0, pageSize: s });
+  }, [d, s]), fe = g(
+    (a) => {
+      d({ paginationToken: void 0, pageSize: a });
+    },
+    [d]
+  ), ke = g(
+    (a) => {
+      ge(a), H();
+    },
+    [H]
+  ), ze = g(() => {
+    d({ paginationToken: w, pageSize: s });
+  }, [d, s, w]), Te = g(() => {
+    d({ paginationToken: $, pageSize: s });
+  }, [d, $, s]), J = C.refetch, X = m.refetch, Pe = g(() => {
+    J(), T && X();
+  }, [T, J, X]);
+  return {
+    rows: Ce,
+    // Not `CardsList` props — `CardsWidget` peels these two off for its details
+    // sheet and spreads the rest into the list.
+    //
+    // Reported closed from the first render the identity moves, rather than waiting
+    // for the effect above to clear it: a card that no longer belongs to this list
+    // must not reach the panel even once.
+    selectedCardId: pe ? null : ce,
+    onSelectCard: h,
+    columns: _e[e],
+    isLoading: !_ && (!K || oe && !f || t && (C.isLoading || le)),
+    // A token without the program's read scope resolves to neither loading nor
+    // error, so the list settles on its empty state. That matches every other
+    // embedded widget (`useBankAccountsWidget`, `useLinkedAccountsWidget`); the
+    // `ui` lib has no separate unauthorized screen, and inventing one here would
+    // be the only such state in the package.
+    isError: _ || B,
+    canToggleShowMyCards: o.canRead && !!c,
+    isShowingMyCards: G,
+    onShowMyCardsChange: ke,
+    // The affordance needs both the scope and somewhere to send the gesture —
+    // this widget implements neither flow, so an unsupplied callback correctly
+    // hides the button rather than offering a dead control.
+    canCreateCard: o.canCreate && !!W,
+    onCreateCardClick: W,
+    onRetry: Pe,
+    // Show the footer whenever a page loaded cleanly, not only when a cursor
+    // exists, so a single-page org keeps its rows-per-page control.
+    // The chevrons stay disabled by token availability.
+    isPaginationVisible: t && Se && !B,
+    pageSize: s,
+    pageSizeOptions: Ke,
+    isPreviousPageDisabled: !w,
+    isNextPageDisabled: !$,
+    onPageSizeChange: fe,
+    onPreviousPageClick: ze,
+    onNextPageClick: Te
+  };
+}
+export {
+  Sa as useCardsWidget
+};

package/dist/libs/tesouro-embedded-components-react/cards-widget/feature/dist/index7.js

@@ -0,0 +1,34 @@
+import { minorExponentForCurrency as o } from "../../../shared/util/dist/index3.js";
+import { normalizeAmountOutputCurrencyCode as e } from "../../../shared/util/dist/index7.js";
+function u(r) {
+  if (r == null || r === "")
+    return;
+  const t = Number(r);
+  return Number.isFinite(t) ? t : void 0;
+}
+function a({
+  limit: r,
+  currencyCode: t
+}) {
+  const n = u(r);
+  if (n === void 0)
+    return;
+  const i = e(t);
+  return new Intl.NumberFormat(void 0, {
+    style: "currency",
+    currency: i,
+    maximumFractionDigits: 0
+  }).format(n / 10 ** o(i));
+}
+function s(r) {
+  const t = r?.trim().slice(-4);
+  return t ? `••••${t}` : void 0;
+}
+function f(r, t) {
+  return r?.trim() || t;
+}
+export {
+  a as formatCardLimit,
+  s as maskAccountNumber,
+  f as withFallback
+};

package/dist/libs/tesouro-embedded-components-react/cards-widget/feature/dist/index8.js

@@ -0,0 +1,91 @@
+import "react/jsx-runtime";
+import "react";
+import "lucide-react";
+import "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "@radix-ui/react-use-controllable-state";
+import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import "../../../shared/ui/dist/lib/OnboardingShell/OnboardingShellOverlayPortal.js";
+import { CARD_COLUMN_KEYS as o } from "../../ui/dist/lib/CardsList/types.js";
+import "../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import "../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import "../../../shared/data-access/dist/lib/rest/client.gen.js";
+import "@tanstack/react-query";
+import "../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import "../../../shared/feature/dist/lib/WidgetProvider/types.js";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetContext.js";
+import "react-error-boundary";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetTokenRefreshContext.js";
+import { CardProgram as d } from "../../../shared/feature/dist/lib/card/cardProgram.js";
+import { CARD_STATUS_TONE as p } from "../../../shared/feature/dist/lib/card/cardPresentation.js";
+import { formatCardLimit as l, withFallback as n } from "./index7.js";
+const C = "PENDING_ACTIVATION", M = {
+  [d.Credit]: o.filter(
+    (a) => a !== "fundingAccount"
+  ),
+  [d.Debit]: o
+};
+function P(a) {
+  return a.map((t) => ({
+    id: t.id,
+    userId: t.userId,
+    status: t.cardStatus,
+    type: t.cardType,
+    cardholderName: t.cardholderName,
+    nickname: t.nickname,
+    lastFourDigits: t.lastFourDigits,
+    limit: t.cardLimit,
+    limitCurrencyCode: t.currentBalance?.currencyCode
+  }));
+}
+function U(a) {
+  return a.map((t) => ({
+    id: t.id,
+    userId: t.userId,
+    status: t.cardStatus,
+    type: t.cardType,
+    cardholderName: t.cardholderName,
+    nickname: t.nickname,
+    lastFourDigits: t.lastFourDigits,
+    limit: t.spendingLimit,
+    fundingAccountId: t.bankAccountId
+  }));
+}
+function $(a, {
+  labels: t,
+  fundingAccountNames: m,
+  canActivate: c,
+  onCardSelect: e,
+  onActivateCard: i
+}) {
+  return a.map((r) => {
+    const s = c && r.status === C, u = r.fundingAccountId ? m?.get(r.fundingAccountId) : void 0;
+    return {
+      key: r.id,
+      nickname: n(r.nickname, t.untitledCard),
+      lastFour: r.lastFourDigits,
+      // All three lookups are exhaustive over the generated unions, so
+      // TypeScript sees no `undefined` here — but these values arrive over the
+      // wire, and a backend adding a member (a `SUSPENDED` status, say) reaches
+      // this map before the client is regenerated. Without the fallbacks that
+      // rendered an empty badge carrying no tone class, which reads as a broken
+      // widget rather than an unrecognised status.
+      typeLabel: t.cardType[r.type] ?? t.emptyValue,
+      fundingAccount: u ?? t.emptyValue,
+      cardholder: n(r.cardholderName, t.emptyValue),
+      statusLabel: t.cardStatus[r.status] ?? t.emptyValue,
+      statusTone: p[r.status] ?? "neutral",
+      limit: l({
+        limit: r.limit,
+        currencyCode: r.limitCurrencyCode
+      }),
+      onSelect: e ? () => e(r.id) : void 0,
+      onActivate: s && i ? () => i(r.id) : void 0
+    };
+  });
+}
+export {
+  M as CARD_COLUMNS_BY_PROGRAM,
+  $ as toCardRows,
+  P as toCreditCardListItems,
+  U as toDebitCardListItems
+};

package/dist/libs/tesouro-embedded-components-react/cards-widget/ui/dist/lib/CardsList/CardFaceSwatch.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+function r() {
+  return /* @__PURE__ */ t(
+    "span",
+    {
+      "aria-hidden": !0,
+      "data-testid": "card-face-swatch",
+      className: "ttw:flex ttw:h-7 ttw:w-[42px] ttw:shrink-0 ttw:items-end ttw:rounded-[3.5px] ttw:bg-foreground ttw:p-1",
+      children: /* @__PURE__ */ t("span", { className: "ttw:h-1 ttw:w-2.5 ttw:rounded-[1px] ttw:bg-muted-foreground" })
+    }
+  );
+}
+export {
+  r as CardFaceSwatch
+};

package/dist/libs/tesouro-embedded-components-react/cards-widget/ui/dist/lib/CardsList/CardsList.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsxs as r, jsx as e, Fragment as B } from "react/jsx-runtime";
+import { useId as A, useMemo as F } from "react";
+import { PlusIcon as P, CreditCardIcon as I } from "lucide-react";
+import { Typography as O, Button as R, Switch as j, Table as E, TableHeader as H, TableRow as l, TableHead as y, TableBody as J, TableCell as g, Skeleton as K } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "@radix-ui/react-use-controllable-state";
+import "../../../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import { EmptyState as Q } from "../../../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
+import { ErrorState as V } from "../../../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import { PaginationFooter as Y } from "../../../../../shared/ui/dist/lib/PaginationFooter/PaginationFooter.js";
+import "../../../../../shared/ui/dist/lib/OnboardingShell/OnboardingShellOverlayPortal.js";
+import { CardsListRow as q } from "./CardsListRow.js";
+import { resolveCardsListLabels as G } from "./labels.js";
+const U = [10, 25, 50], W = 5;
+function X({ columnCount: i }) {
+  return /* @__PURE__ */ e(B, { children: Array.from({ length: W }).map((o, a) => /* @__PURE__ */ e(l, { className: "ttw:h-18", children: Array.from({ length: i }).map((w, c) => /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(K, { className: "ttw:h-4 ttw:w-24" }) }, c)) }, a)) });
+}
+function ce({
+  rows: i,
+  columns: o,
+  isLoading: a = !1,
+  isError: w = !1,
+  canToggleShowMyCards: c = !1,
+  isShowingMyCards: v = !1,
+  onShowMyCardsChange: p,
+  canCreateCard: x = !1,
+  onCreateCardClick: d,
+  onRetry: S,
+  isPaginationVisible: k = !1,
+  pageSize: z = 10,
+  pageSizeOptions: L = U,
+  rangeLabel: T = "",
+  isPreviousPageDisabled: M = !1,
+  isNextPageDisabled: D = !1,
+  onPageSizeChange: b,
+  onPreviousPageClick: C,
+  onNextPageClick: u,
+  labels: f
+}) {
+  const N = A(), t = F(
+    () => G(f),
+    [f]
+  ), m = !!(x && d), n = b && C && u ? {
+    onPageSizeChange: b,
+    onPreviousPageClick: C,
+    onNextPageClick: u
+  } : void 0, h = o.length + 1;
+  return /* @__PURE__ */ r(
+    "section",
+    {
+      "aria-label": t.regionLabel,
+      "aria-busy": a || void 0,
+      "data-testid": "cards-list",
+      children: [
+        /* @__PURE__ */ r("header", { className: "ttw:mb-5 ttw:flex ttw:flex-wrap ttw:items-start ttw:justify-between ttw:gap-4", children: [
+          /* @__PURE__ */ e(O, { variant: "h2", component: "h1", children: t.title }),
+          m && /* @__PURE__ */ r(R, { size: "sm", disabled: a, onClick: d, children: [
+            /* @__PURE__ */ e(P, { "aria-hidden": !0, className: "ttw:size-4" }),
+            t.createCardButton
+          ] })
+        ] }),
+        a && /* @__PURE__ */ e("span", { role: "status", className: "ttw:sr-only", children: t.loadingLabel }),
+        c && p && /* @__PURE__ */ r("div", { className: "ttw:mb-4 ttw:flex ttw:items-center ttw:gap-3", children: [
+          /* @__PURE__ */ e(
+            j,
+            {
+              id: N,
+              checked: v,
+              disabled: a,
+              onCheckedChange: p
+            }
+          ),
+          /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: N,
+              className: "ttw:text-sm ttw:font-medium ttw:text-foreground",
+              children: t.showMyCardsToggle
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { className: "ttw:overflow-hidden ttw:rounded-md ttw:border ttw:border-border ttw:bg-card", children: [
+          /* @__PURE__ */ r(E, { children: [
+            /* @__PURE__ */ e(H, { children: /* @__PURE__ */ r(l, { className: "ttw:hover:bg-transparent", children: [
+              o.map((s) => /* @__PURE__ */ e(y, { className: "ttw:text-sm", children: t.columnHeaders[s] }, s)),
+              /* @__PURE__ */ e(y, { className: "ttw:w-[90px]", children: /* @__PURE__ */ e("span", { className: "ttw:sr-only", children: t.rowActionsColumn }) })
+            ] }) }),
+            /* @__PURE__ */ e(J, { children: w ? /* @__PURE__ */ e(l, { className: "ttw:hover:bg-transparent", children: /* @__PURE__ */ e(g, { colSpan: h, className: "ttw:p-0", children: /* @__PURE__ */ e(
+              V,
+              {
+                title: t.errorTitle,
+                description: t.errorDescription,
+                retryLabel: t.retryButton,
+                onRetry: S
+              }
+            ) }) }) : a ? /* @__PURE__ */ e(X, { columnCount: h }) : i.length === 0 ? /* @__PURE__ */ e(l, { className: "ttw:hover:bg-transparent", children: /* @__PURE__ */ e(g, { colSpan: h, className: "ttw:p-0", children: /* @__PURE__ */ e(
+              Q,
+              {
+                icon: /* @__PURE__ */ e(I, { className: "ttw:size-6 ttw:text-muted-foreground" }),
+                title: t.emptyTitle,
+                description: t.emptyDescription,
+                actionLabel: m ? t.createCardButton : void 0,
+                actionIcon: /* @__PURE__ */ e(P, { "aria-hidden": !0, className: "ttw:size-4" }),
+                onAction: m ? d : void 0
+              }
+            ) }) }) : i.map((s) => /* @__PURE__ */ e(
+              q,
+              {
+                row: s,
+                columns: o,
+                labels: t
+              },
+              s.key
+            )) })
+          ] }),
+          k && n && /* @__PURE__ */ e(
+            Y,
+            {
+              pageSize: z,
+              pageSizeOptions: L,
+              rangeLabel: T,
+              isPreviousDisabled: M,
+              isNextDisabled: D,
+              isDisabled: a,
+              onPageSizeChange: n.onPageSizeChange,
+              onPreviousPageClick: n.onPreviousPageClick,
+              onNextPageClick: n.onNextPageClick,
+              labels: t.pagination
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ce as CardsList
+};

package/dist/libs/tesouro-embedded-components-react/cards-widget/ui/dist/lib/CardsList/CardsListDetailsSheet.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { Sheet as l, SheetContent as m, SheetTitle as h, SheetDescription as c } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { useMemo as p } from "react";
+import { CARDS_LIST_LABELS_EN as w } from "./labels.js";
+function u({
+  isOpen: o,
+  onClose: n,
+  labels: t,
+  children: r
+}) {
+  const s = p(
+    () => ({
+      ...w.detailsSheet,
+      ...t
+    }),
+    [t]
+  );
+  return /* @__PURE__ */ e(
+    l,
+    {
+      open: o,
+      onOpenChange: (a) => {
+        a || n();
+      },
+      children: /* @__PURE__ */ i(
+        m,
+        {
+          showCloseButton: !1,
+          className: "ttw:w-168 ttw:overflow-y-auto ttw:sm:max-w-168",
+          children: [
+            /* @__PURE__ */ e(h, { className: "ttw:sr-only", children: s.title }),
+            /* @__PURE__ */ e(c, { className: "ttw:sr-only", children: s.description }),
+            r
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  u as CardsListDetailsSheet
+};

package/dist/libs/tesouro-embedded-components-react/cards-widget/ui/dist/lib/CardsList/CardsListRow.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsxs as n, jsx as e, Fragment as d } from "react/jsx-runtime";
+import { TableRow as m, TableCell as l, Button as w } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { CardFaceSwatch as u } from "./CardFaceSwatch.js";
+import { cardStatusToneClassName as f } from "./statusBadge.js";
+function i({
+  row: t,
+  labels: s
+}) {
+  return /* @__PURE__ */ n(d, { children: [
+    /* @__PURE__ */ e(u, {}),
+    /* @__PURE__ */ n("span", { className: "ttw:flex ttw:min-w-0 ttw:flex-col ttw:gap-1", children: [
+      /* @__PURE__ */ n("span", { className: "ttw:flex ttw:gap-1 ttw:text-sm ttw:leading-none", children: [
+        /* @__PURE__ */ e("span", { className: "ttw:truncate ttw:font-medium ttw:text-foreground", children: t.nickname }),
+        /* @__PURE__ */ e("span", { className: "ttw:text-muted-foreground", "aria-hidden": !0, children: s.cardNameSeparator }),
+        /* @__PURE__ */ e("span", { className: "ttw:text-muted-foreground", children: t.lastFour })
+      ] }),
+      /* @__PURE__ */ e("span", { className: "ttw:truncate ttw:text-xs ttw:leading-none ttw:text-muted-foreground", children: t.typeLabel })
+    ] })
+  ] });
+}
+function N({ row: t, columns: s, labels: a }) {
+  const o = !!t.onActivate, c = {
+    cardName: t.onSelect ? /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        "aria-label": `${a.selectCardButton} ${t.nickname} ${t.lastFour} ${t.typeLabel}`,
+        onClick: () => t.onSelect?.(),
+        className: "ttw:flex ttw:w-full ttw:items-center ttw:gap-3 ttw:rounded-md ttw:text-left ttw:outline-none ttw:focus-visible:ring-2 ttw:focus-visible:ring-ring ttw:focus-visible:ring-offset-2",
+        children: /* @__PURE__ */ e(i, { row: t, labels: a })
+      }
+    ) : /* @__PURE__ */ e("span", { className: "ttw:flex ttw:w-full ttw:items-center ttw:gap-3", children: /* @__PURE__ */ e(i, { row: t, labels: a }) }),
+    fundingAccount: /* @__PURE__ */ e("span", { className: "ttw:text-sm ttw:text-foreground", children: t.fundingAccount }),
+    cardholder: /* @__PURE__ */ e("span", { className: "ttw:text-sm ttw:text-foreground", children: t.cardholder }),
+    status: /* @__PURE__ */ e("span", { className: f(t.statusTone), children: t.statusLabel }),
+    // Two weights, per the mockup: the amount reads as the value, the period as a
+    // qualifier on it ("$10,000 /mo"). A card with no limit says so in the muted
+    // weight throughout — an absence should read quieter than a real figure.
+    limit: t.limit ? /* @__PURE__ */ n("span", { className: "ttw:flex ttw:gap-1 ttw:text-sm", children: [
+      /* @__PURE__ */ e("span", { className: "ttw:font-semibold ttw:text-foreground", children: t.limit }),
+      t.limitPeriod && /* @__PURE__ */ e("span", { className: "ttw:text-muted-foreground", children: t.limitPeriod })
+    ] }) : /* @__PURE__ */ e("span", { className: "ttw:text-sm ttw:text-muted-foreground", children: a.noLimit })
+  };
+  return /* @__PURE__ */ n(m, { "data-testid": `cards-list-row-${t.key}`, className: "ttw:h-18", children: [
+    s.map((r) => /* @__PURE__ */ e(l, { children: c[r] }, r)),
+    /* @__PURE__ */ e(l, { className: "ttw:text-right", children: o && /* @__PURE__ */ e(
+      w,
+      {
+        size: "sm",
+        "aria-label": `${a.activateButtonForCard} ${t.nickname}`,
+        onClick: () => t.onActivate?.(),
+        children: a.activateButton
+      }
+    ) })
+  ] });
+}
+export {
+  N as CardsListRow
+};