@tesouro/embedded-components-react 0.2.1

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/account-details/ui/dist/index2.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Button as s, Badge as x, Skeleton as h, Tabs as I, TabsList as j, TabsTrigger as u, TabsContent as w, Table as C, TableHeader as N, TableRow as c, TableHead as n, TableBody as T, TableCell as l, Dialog as O, DialogContent as R, DialogHeader as U, DialogTitle as $, DialogDescription as q, Label as y, Input as L, DialogFooter as z } from "../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { ArrowLeftIcon as G, PencilIcon as J } from "lucide-react";
+import { DEFAULT_LABELS as K } from "./index3.js";
+function _({
+  labels: k,
+  title: D,
+  subtitle: E,
+  statusLabel: b,
+  summaryItems: B,
+  transactionRows: p,
+  transferRows: f,
+  isLoading: o = !1,
+  isError: g = !1,
+  isEditOpen: S,
+  isEditError: F = !1,
+  isEditDisabled: i = !1,
+  isSubmitting: P = !1,
+  editForm: d,
+  onBack: A,
+  onEditOpenChange: m,
+  onEditFormChange: v,
+  onEditSubmit: H
+}) {
+  const e = { ...K, ...k };
+  return /* @__PURE__ */ a("section", { className: "ttw:w-full ttw:space-y-5", children: [
+    /* @__PURE__ */ a("div", { className: "ttw:flex ttw:flex-col ttw:gap-3 ttw:sm:flex-row ttw:sm:items-start ttw:sm:justify-between", children: [
+      /* @__PURE__ */ a("div", { className: "ttw:flex ttw:min-w-0 ttw:gap-3", children: [
+        /* @__PURE__ */ a(s, { type: "button", variant: "ghost", size: "icon", onClick: A, children: [
+          /* @__PURE__ */ t(G, {}),
+          /* @__PURE__ */ t("span", { className: "ttw:sr-only", children: e.backButton })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "ttw:min-w-0", children: [
+          /* @__PURE__ */ a("div", { className: "ttw:flex ttw:flex-wrap ttw:items-center ttw:gap-2", children: [
+            /* @__PURE__ */ t("h2", { className: "ttw:text-xl ttw:font-semibold ttw:text-foreground", children: D }),
+            b && /* @__PURE__ */ t(x, { variant: "outline", children: b })
+          ] }),
+          /* @__PURE__ */ t("p", { className: "ttw:mt-1 ttw:text-sm ttw:text-muted-foreground", children: E })
+        ] })
+      ] }),
+      /* @__PURE__ */ a(
+        s,
+        {
+          type: "button",
+          variant: "outline",
+          disabled: i,
+          onClick: () => m(!0),
+          children: [
+            /* @__PURE__ */ t(J, {}),
+            e.editButton
+          ]
+        }
+      )
+    ] }),
+    o && /* @__PURE__ */ a(
+      "div",
+      {
+        "aria-label": e.loadingLabel,
+        className: "ttw:space-y-3 ttw:rounded-md ttw:border ttw:border-border ttw:p-4",
+        children: [
+          /* @__PURE__ */ t(h, { height: 22, width: "45%" }),
+          /* @__PURE__ */ t(h, { height: 44, width: "100%" }),
+          /* @__PURE__ */ t(h, { height: 44, width: "100%" })
+        ]
+      }
+    ),
+    !o && g && /* @__PURE__ */ t("div", { className: "ttw:rounded-md ttw:border ttw:border-destructive/30 ttw:p-4 ttw:text-sm ttw:text-destructive", children: e.errorTitle }),
+    !o && !g && /* @__PURE__ */ a(I, { defaultValue: "summary", children: [
+      /* @__PURE__ */ a(j, { children: [
+        /* @__PURE__ */ t(u, { value: "summary", children: e.summaryTab }),
+        /* @__PURE__ */ t(u, { value: "transactions", children: e.transactionsTab }),
+        /* @__PURE__ */ t(u, { value: "transfers", children: e.transfersTab })
+      ] }),
+      /* @__PURE__ */ t(w, { value: "summary", children: /* @__PURE__ */ t("dl", { className: "ttw:grid ttw:gap-3 ttw:sm:grid-cols-2", children: B.map((r) => /* @__PURE__ */ a(
+        "div",
+        {
+          className: "ttw:rounded-md ttw:border ttw:border-border ttw:p-4",
+          children: [
+            /* @__PURE__ */ t("dt", { className: "ttw:text-sm ttw:text-muted-foreground", children: r.label }),
+            /* @__PURE__ */ t("dd", { className: "ttw:mt-1 ttw:text-sm ttw:font-medium ttw:text-foreground", children: r.value })
+          ]
+        },
+        r.label
+      )) }) }),
+      /* @__PURE__ */ t(w, { value: "transactions", children: p.length === 0 ? /* @__PURE__ */ t("div", { className: "ttw:rounded-md ttw:border ttw:border-dashed ttw:border-border ttw:p-6 ttw:text-sm ttw:text-muted-foreground", children: e.emptyTransactions }) : /* @__PURE__ */ a(C, { children: [
+        /* @__PURE__ */ t(N, { children: /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ t(n, { children: e.descriptionColumn }),
+          /* @__PURE__ */ t(n, { children: e.dateColumn }),
+          /* @__PURE__ */ t(n, { children: e.amountColumn }),
+          /* @__PURE__ */ t(n, { children: e.balanceColumn })
+        ] }) }),
+        /* @__PURE__ */ t(T, { children: p.map((r) => /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ t(l, { children: r.description }),
+          /* @__PURE__ */ t(l, { children: r.dateLabel }),
+          /* @__PURE__ */ t(l, { children: r.amountLabel }),
+          /* @__PURE__ */ t(l, { children: r.balanceLabel })
+        ] }, r.id)) })
+      ] }) }),
+      /* @__PURE__ */ t(w, { value: "transfers", children: f.length === 0 ? /* @__PURE__ */ t("div", { className: "ttw:rounded-md ttw:border ttw:border-dashed ttw:border-border ttw:p-6 ttw:text-sm ttw:text-muted-foreground", children: e.emptyTransfers }) : /* @__PURE__ */ a(C, { children: [
+        /* @__PURE__ */ t(N, { children: /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ t(n, { children: e.routeColumn }),
+          /* @__PURE__ */ t(n, { children: e.dateColumn }),
+          /* @__PURE__ */ t(n, { children: e.amountColumn }),
+          /* @__PURE__ */ t(n, { children: e.statusColumn })
+        ] }) }),
+        /* @__PURE__ */ t(T, { children: f.map((r) => /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ t(l, { children: r.routeLabel }),
+          /* @__PURE__ */ t(l, { children: r.dateLabel }),
+          /* @__PURE__ */ t(l, { children: r.amountLabel }),
+          /* @__PURE__ */ t(l, { children: /* @__PURE__ */ t(x, { variant: "outline", children: r.statusLabel }) })
+        ] }, r.id)) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ t(O, { open: S, onOpenChange: m, children: /* @__PURE__ */ a(R, { children: [
+      /* @__PURE__ */ a(U, { children: [
+        /* @__PURE__ */ t($, { children: e.editTitle }),
+        /* @__PURE__ */ t(q, { children: e.editDescription })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "ttw:space-y-4", children: [
+        /* @__PURE__ */ a("div", { className: "ttw:space-y-2", children: [
+          /* @__PURE__ */ t(y, { htmlFor: "account-details-nickname", children: e.nicknameLabel }),
+          /* @__PURE__ */ t(
+            L,
+            {
+              id: "account-details-nickname",
+              disabled: i,
+              value: d.nickname,
+              onChange: (r) => v({
+                ...d,
+                nickname: r.target.value
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { className: "ttw:space-y-2", children: [
+          /* @__PURE__ */ t(y, { htmlFor: "account-details-reference", children: e.referenceLabel }),
+          /* @__PURE__ */ t(
+            L,
+            {
+              id: "account-details-reference",
+              disabled: i,
+              value: d.reference,
+              onChange: (r) => v({
+                ...d,
+                reference: r.target.value
+              })
+            }
+          )
+        ] })
+      ] }),
+      F && /* @__PURE__ */ t(
+        "div",
+        {
+          role: "alert",
+          className: "ttw:rounded-md ttw:border ttw:border-destructive/30 ttw:p-3 ttw:text-sm ttw:text-destructive",
+          children: e.editErrorTitle
+        }
+      ),
+      /* @__PURE__ */ a(z, { children: [
+        /* @__PURE__ */ t(
+          s,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: () => m(!1),
+            children: e.cancelButton
+          }
+        ),
+        /* @__PURE__ */ t(
+          s,
+          {
+            type: "button",
+            loading: P,
+            disabled: i,
+            onClick: H,
+            children: e.saveButton
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  _ as AccountDetailsWidgetUi
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/account-details/ui/dist/index3.js

@@ -0,0 +1,27 @@
+const t = {
+  backButton: "Back",
+  editButton: "Edit",
+  editTitle: "Edit account",
+  editDescription: "Update the display values for this account.",
+  nicknameLabel: "Nickname",
+  referenceLabel: "Reference",
+  cancelButton: "Cancel",
+  saveButton: "Save",
+  loadingLabel: "Loading account",
+  errorTitle: "Unable to load account",
+  editErrorTitle: "Unable to save account",
+  summaryTab: "Summary",
+  transactionsTab: "Transactions",
+  transfersTab: "Transfers",
+  emptyTransactions: "No transactions to show.",
+  emptyTransfers: "No transfers to show.",
+  descriptionColumn: "Description",
+  dateColumn: "Date",
+  amountColumn: "Amount",
+  balanceColumn: "Balance",
+  routeColumn: "Route",
+  statusColumn: "Status"
+};
+export {
+  t as DEFAULT_LABELS
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/data-access/dist/index2.js

@@ -0,0 +1,27 @@
+"use client";
+import { useQuery as m } from "@tanstack/react-query";
+import "../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import { useEmbedApi as p } from "../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import { organizationHeaders as s } from "../../../shared/data-access/dist/lib/organizationHeaders.js";
+import "../../../shared/data-access/dist/lib/rest/client.gen.js";
+import { getBankAccountsOptions as u } from "../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
+import { withAuthEpoch as c } from "../../../shared/data-access/dist/lib/withAuthEpoch.js";
+import "../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import "react";
+function E({
+  enabled: t,
+  ...r
+} = {}) {
+  const { client: e, organizationId: o, widgetToken: i, authEpoch: n } = p(), a = u({
+    query: r,
+    client: e,
+    headers: s(o)
+  });
+  return m({
+    ...c(a, n),
+    enabled: !!(o && i) && (t === !0 || t === void 0)
+  });
+}
+export {
+  E as useBankAccountsQuery
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/data-access/dist/index3.js

@@ -0,0 +1,25 @@
+"use client";
+import { useMutation as n } from "@tanstack/react-query";
+import { invalidateAllClients as r } from "../../../shared/data-access/dist/lib/clientRegistry.js";
+import "../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import { useEmbedApi as s } from "../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import { organizationHeaders as c } from "../../../shared/data-access/dist/lib/organizationHeaders.js";
+import "../../../shared/data-access/dist/lib/rest/client.gen.js";
+import { getBankAccountsQueryKey as m, createBankAccountMutation as u } from "../../../shared/data-access/dist/lib/rest/@tanstack/react-query.gen.js";
+import "../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import "react";
+function B() {
+  const { client: t, organizationId: e } = s(), a = c(e), o = u({
+    client: t,
+    headers: a
+  });
+  return n({
+    ...o,
+    onSuccess: async (...i) => {
+      await r(m({ client: t, headers: a })), await o.onSuccess?.(...i);
+    }
+  });
+}
+export {
+  B as useCreateBankAccountMutation
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/feature/dist/index2.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx as s } from "react/jsx-runtime";
+import { useState as F, useEffect as M, useMemo as v } from "react";
+import { useControllableState as U } from "@radix-ui/react-use-controllable-state";
+import { useBankAccountsQuery as z } from "../../data-access/dist/index2.js";
+import { useCreateBankAccountMutation as D } from "../../data-access/dist/index3.js";
+import { AccountDetailsWidget as R } from "../../account-details/feature/dist/index2.js";
+import { BankAccountsWidgetUi as $ } from "../../ui/dist/index2.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 "lucide-react";
+import "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetContext.js";
+import { WidgetProvider as j } from "../../../shared/feature/dist/lib/WidgetProvider/WidgetProvider.js";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetTokenRefreshContext.js";
+import { useWidgetConfig as P } from "../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
+import { useAnalyticsTrack as x } from "../../../shared/feature/dist/lib/analytics/hooks.js";
+import { BankAccountsWidgetAnalyticsEvent as k } from "./index4.js";
+import { DEFAULT_FEATURE_LABELS as O } from "./index3.js";
+const E = {
+  nickname: "",
+  reference: ""
+};
+function _({
+  labels: a,
+  accountDetailsLabels: i,
+  featureLabels: n,
+  selectedAccountId: r,
+  defaultSelectedAccountId: c,
+  onSelectedAccountIdChange: m
+}) {
+  const t = {
+    ...O,
+    ...n
+  }, l = x(), { organizationId: d, widgetToken: b } = P(), o = !!(d && b), [C, S] = U({
+    prop: r,
+    defaultProp: c ?? null,
+    onChange: m,
+    caller: "BankAccountsWidget"
+  }), [B, A] = F(!1), [f, L] = F(E);
+  M(() => {
+    l(k.Mounted);
+  }, [l]);
+  const p = z({
+    limit: 100,
+    enabled: o
+  }), g = D(), u = o ? p.data?.data ?? [] : [], w = v(
+    () => Q(u, t),
+    [u, t]
+  ), N = v(
+    () => u.map((e) => ({
+      id: e.id,
+      title: e.nickname || t.accountFallback,
+      subtitle: e.accountNumber,
+      balanceLabel: I(e.balance, t),
+      statusLabel: e.status,
+      detailLines: [
+        {
+          label: t.routingNumberLabel,
+          value: e.routingNumber
+        },
+        {
+          label: t.referenceLabel,
+          value: e.bankAccountReference ?? t.unavailableLabel
+        }
+      ]
+    })),
+    [u, t]
+  ), y = (e) => {
+    S(e), e && l(k.AccountSelected, { accountId: e });
+  }, W = (e) => {
+    e && !o || A(e);
+  }, h = () => {
+    if (!o) return;
+    const e = f.nickname.trim() || t.defaultNickname;
+    g.mutate(
+      {
+        body: {
+          nickname: e,
+          bankAccountReference: f.reference.trim() || null
+        }
+      },
+      {
+        onSuccess: (T) => {
+          l(k.AccountCreated, {
+            accountId: T?.id
+          }), L(E), A(!1);
+        }
+      }
+    );
+  };
+  return C && o ? /* @__PURE__ */ s(
+    R,
+    {
+      accountId: C,
+      labels: i,
+      featureLabels: t,
+      onBack: () => y(null)
+    }
+  ) : /* @__PURE__ */ s(
+    $,
+    {
+      labels: a,
+      rows: N,
+      totalBalanceLabel: w,
+      isLoading: !o || p.isLoading,
+      isError: p.isError,
+      isCreateError: g.isError,
+      isCreateOpen: B,
+      isCreateDisabled: !o,
+      isSubmitting: g.isPending,
+      createForm: f,
+      onCreateOpenChange: W,
+      onCreateFormChange: L,
+      onCreateSubmit: h,
+      onRowSelect: y
+    }
+  );
+}
+function fe({
+  baseUrl: a,
+  widgetToken: i,
+  organizationId: n,
+  configClient: r,
+  linkComponent: c,
+  implementation: m,
+  uiFramework: t,
+  errorFallback: l,
+  onError: d,
+  analytics: b,
+  ...o
+}) {
+  return /* @__PURE__ */ s(
+    j,
+    {
+      baseUrl: a,
+      widgetToken: i,
+      organizationId: n,
+      configClient: r,
+      linkComponent: c,
+      implementation: m,
+      uiFramework: t,
+      errorFallback: l,
+      onError: d,
+      analytics: b,
+      children: /* @__PURE__ */ s(_, { ...o })
+    }
+  );
+}
+function Q(a, i) {
+  if (a.length === 0) return;
+  const n = /* @__PURE__ */ new Map();
+  for (const r of a) {
+    const c = n.get(r.balance.currencyCode) ?? 0;
+    n.set(
+      r.balance.currencyCode,
+      c + Number(r.balance.value)
+    );
+  }
+  return [...n].map(
+    ([r, c]) => I({ currencyCode: r, value: c }, i)
+  ).join(", ");
+}
+function I(a, i) {
+  if (!a) return i.unavailableLabel;
+  const n = Number(a.value);
+  return Number.isFinite(n) ? new Intl.NumberFormat(void 0, {
+    style: "currency",
+    currency: a.currencyCode
+  }).format(n / 100) : i.unavailableLabel;
+}
+export {
+  fe as BankAccountsWidget
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/feature/dist/index3.js

@@ -0,0 +1,11 @@
+const a = {
+  accountFallback: "Bank account",
+  accountNumberLabel: "Account",
+  routingNumberLabel: "Routing",
+  referenceLabel: "Reference",
+  unavailableLabel: "Unavailable",
+  defaultNickname: "Operating account"
+};
+export {
+  a as DEFAULT_FEATURE_LABELS
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/feature/dist/index4.js

@@ -0,0 +1,8 @@
+const t = {
+  Mounted: "bank_accounts_widget.mounted",
+  AccountSelected: "bank_accounts_widget.account_selected",
+  AccountCreated: "bank_accounts_widget.account_created"
+};
+export {
+  t as BankAccountsWidgetAnalyticsEvent
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/ui/dist/index2.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Button as d, Skeleton as u, Table as B, TableHeader as D, TableRow as p, TableHead as s, TableBody as T, TableCell as c, Badge as S, Dialog as F, DialogContent as E, DialogHeader as H, DialogTitle as j, DialogDescription as A, Label as x, Input as f, DialogFooter as O } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { PlusIcon as U } from "lucide-react";
+import { DEFAULT_LABELS as I } from "./index3.js";
+function G({
+  labels: N,
+  rows: o,
+  totalBalanceLabel: b,
+  isLoading: r = !1,
+  isError: m = !1,
+  isCreateError: v = !1,
+  isCreateOpen: C,
+  isCreateDisabled: n = !1,
+  isSubmitting: k = !1,
+  createForm: i,
+  onCreateOpenChange: w,
+  onCreateFormChange: g,
+  onCreateSubmit: y,
+  onRowSelect: L
+}) {
+  const e = { ...I, ...N };
+  return /* @__PURE__ */ a("section", { className: "ttw:w-full ttw:space-y-5", children: [
+    /* @__PURE__ */ a("div", { className: "ttw:flex ttw:flex-col ttw:gap-3 ttw:sm:flex-row ttw:sm:items-start ttw:sm:justify-between", children: [
+      /* @__PURE__ */ a("div", { className: "ttw:min-w-0", children: [
+        /* @__PURE__ */ t("h2", { className: "ttw:text-xl ttw:font-semibold ttw:text-foreground", children: e.title }),
+        /* @__PURE__ */ t("p", { className: "ttw:mt-1 ttw:text-sm ttw:text-muted-foreground", children: e.description })
+      ] }),
+      /* @__PURE__ */ a(
+        d,
+        {
+          disabled: n,
+          onClick: () => w(!0),
+          children: [
+            /* @__PURE__ */ t(U, {}),
+            e.createButton
+          ]
+        }
+      )
+    ] }),
+    b && /* @__PURE__ */ a("div", { className: "ttw:rounded-md ttw:border ttw:border-border ttw:p-4", children: [
+      /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:text-muted-foreground", children: e.totalBalanceLabel }),
+      /* @__PURE__ */ t("p", { className: "ttw:mt-1 ttw:text-2xl ttw:font-semibold ttw:text-foreground", children: b })
+    ] }),
+    r && /* @__PURE__ */ a(
+      "div",
+      {
+        "aria-label": e.loadingLabel,
+        className: "ttw:space-y-3 ttw:rounded-md ttw:border ttw:border-border ttw:p-4",
+        children: [
+          /* @__PURE__ */ t(u, { height: 22, width: "45%" }),
+          /* @__PURE__ */ t(u, { height: 44, width: "100%" }),
+          /* @__PURE__ */ t(u, { height: 44, width: "100%" })
+        ]
+      }
+    ),
+    !r && m && /* @__PURE__ */ t("div", { className: "ttw:rounded-md ttw:border ttw:border-destructive/30 ttw:p-4 ttw:text-sm ttw:text-destructive", children: e.errorTitle }),
+    !r && !m && o.length === 0 && /* @__PURE__ */ a("div", { className: "ttw:rounded-md ttw:border ttw:border-dashed ttw:border-border ttw:p-8 ttw:text-center", children: [
+      /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:font-medium ttw:text-foreground", children: e.emptyTitle }),
+      /* @__PURE__ */ t("p", { className: "ttw:mt-1 ttw:text-sm ttw:text-muted-foreground", children: e.emptyDescription })
+    ] }),
+    !r && !m && o.length > 0 && /* @__PURE__ */ a(B, { children: [
+      /* @__PURE__ */ t(D, { children: /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ t(s, { children: e.accountColumn }),
+        /* @__PURE__ */ t(s, { children: e.balanceColumn }),
+        /* @__PURE__ */ t(s, { children: e.statusColumn }),
+        /* @__PURE__ */ t(s, { className: "ttw:text-right", children: e.detailsButton })
+      ] }) }),
+      /* @__PURE__ */ t(T, { children: o.map((l) => /* @__PURE__ */ a(p, { children: [
+        /* @__PURE__ */ a(c, { children: [
+          /* @__PURE__ */ t("div", { className: "ttw:font-medium ttw:text-foreground", children: l.title }),
+          /* @__PURE__ */ t("div", { className: "ttw:text-xs ttw:text-muted-foreground", children: l.subtitle }),
+          /* @__PURE__ */ t("dl", { className: "ttw:mt-2 ttw:flex ttw:flex-wrap ttw:gap-x-4 ttw:gap-y-1", children: l.detailLines.map((h) => /* @__PURE__ */ a("div", { className: "ttw:text-xs", children: [
+            /* @__PURE__ */ t("dt", { className: "ttw:inline ttw:text-muted-foreground", children: h.label }),
+            /* @__PURE__ */ t("dd", { className: "ttw:ml-1 ttw:inline ttw:text-foreground", children: h.value })
+          ] }, h.label)) })
+        ] }),
+        /* @__PURE__ */ t(c, { className: "ttw:font-medium", children: l.balanceLabel }),
+        /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(S, { variant: "outline", children: l.statusLabel }) }),
+        /* @__PURE__ */ t(c, { className: "ttw:text-right", children: /* @__PURE__ */ t(
+          d,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => L(l.id),
+            children: e.detailsButton
+          }
+        ) })
+      ] }, l.id)) })
+    ] }),
+    /* @__PURE__ */ t(F, { open: C, onOpenChange: w, children: /* @__PURE__ */ a(E, { children: [
+      /* @__PURE__ */ a(H, { children: [
+        /* @__PURE__ */ t(j, { children: e.createTitle }),
+        /* @__PURE__ */ t(A, { children: e.createDescription })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "ttw:space-y-4", children: [
+        /* @__PURE__ */ a("div", { className: "ttw:space-y-2", children: [
+          /* @__PURE__ */ t(x, { htmlFor: "bank-account-nickname", children: e.nicknameLabel }),
+          /* @__PURE__ */ t(
+            f,
+            {
+              id: "bank-account-nickname",
+              disabled: n,
+              value: i.nickname,
+              onChange: (l) => g({
+                ...i,
+                nickname: l.target.value
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { className: "ttw:space-y-2", children: [
+          /* @__PURE__ */ t(x, { htmlFor: "bank-account-reference", children: e.referenceLabel }),
+          /* @__PURE__ */ t(
+            f,
+            {
+              id: "bank-account-reference",
+              disabled: n,
+              value: i.reference,
+              onChange: (l) => g({
+                ...i,
+                reference: l.target.value
+              })
+            }
+          )
+        ] })
+      ] }),
+      v && /* @__PURE__ */ t(
+        "div",
+        {
+          role: "alert",
+          className: "ttw:rounded-md ttw:border ttw:border-destructive/30 ttw:p-3 ttw:text-sm ttw:text-destructive",
+          children: e.createErrorTitle
+        }
+      ),
+      /* @__PURE__ */ a(O, { children: [
+        /* @__PURE__ */ t(
+          d,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: () => w(!1),
+            children: e.cancelButton
+          }
+        ),
+        /* @__PURE__ */ t(
+          d,
+          {
+            type: "button",
+            loading: k,
+            disabled: n,
+            onClick: y,
+            children: e.submitButton
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  G as BankAccountsWidgetUi
+};

package/dist/libs/tesouro-embedded-components-react/bank-accounts-widget/ui/dist/index3.js

@@ -0,0 +1,24 @@
+const e = {
+  title: "Bank accounts",
+  description: "View account balances and open a new account.",
+  totalBalanceLabel: "Total balance",
+  createButton: "Create account",
+  createTitle: "Create account",
+  createDescription: "Add a nickname for the account.",
+  nicknameLabel: "Nickname",
+  referenceLabel: "Reference",
+  cancelButton: "Cancel",
+  submitButton: "Create",
+  loadingLabel: "Loading accounts",
+  errorTitle: "Unable to load accounts",
+  createErrorTitle: "Unable to create account",
+  emptyTitle: "No accounts yet",
+  emptyDescription: "Create an account to start moving money.",
+  accountColumn: "Account",
+  balanceColumn: "Balance",
+  statusColumn: "Status",
+  detailsButton: "Details"
+};
+export {
+  e as DEFAULT_LABELS
+};