@tesouro/embedded-components-react 0.2.7 → 0.2.16

package/dist/libs/tesouro-embedded-components-react/team-widget/ui/dist/index12.js

@@ -1,151 +1,59 @@
 "use client";
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
-import { useRef as C, useEffect as z } from "react";
-import { ArrowLeftIcon as B, PencilIcon as S, UserXIcon as y } from "lucide-react";
-import { Button as c, Badge as D, Separator as m, Spinner as A } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-import { DEFAULT_LABELS as E } from "./index14.js";
-import { statusToneClassName as I } from "./index11.js";
-function l({ label: s, value: r }) {
-  return /* @__PURE__ */ e("div", { className: "ttw:flex ttw:flex-col ttw:gap-1", children: [
-    /* @__PURE__ */ t("dt", { className: "ttw:text-xs ttw:font-medium ttw:uppercase ttw:tracking-wide ttw:text-muted-foreground", children: s }),
-    /* @__PURE__ */ t("dd", { className: "ttw:text-sm ttw:text-foreground", children: r })
-  ] });
-}
-function F({
-  name: s,
-  email: r,
-  initials: u,
-  roleCardTitle: f,
-  roleCardDescription: d,
-  roleCardIcon: b,
-  isRoleLoading: x = !1,
-  statusLabel: o,
-  statusTone: h,
-  lastSignInLabel: g,
-  departmentLabel: p,
-  locationLabel: N,
-  accountAccessLabel: v,
-  onBackClick: L,
-  onEditClick: i,
-  onDeactivateClick: n,
-  labels: k
+import { jsx as t, jsxs as e } from "react/jsx-runtime";
+import { AlertDialog as f, AlertDialogContent as h, AlertDialogHeader as x, AlertDialogTitle as D, AlertDialogDescription as b, AlertDialogFooter as A, AlertDialogCancel as j, Button as v } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "@radix-ui/react-use-controllable-state";
+import "lucide-react";
+import "react";
+import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import { InlineErrorAlert as C } from "../../../shared/ui/dist/lib/InlineErrorAlert/InlineErrorAlert.js";
+import { DEFAULT_LABELS as N } from "./index17.js";
+function O({
+  open: s,
+  icon: r,
+  title: c,
+  description: d,
+  subjectName: i,
+  subjectDetail: n,
+  confirmButtonLabel: m,
+  confirmVariant: o = "destructive",
+  errorMessage: a,
+  isConfirming: l = !1,
+  onOpenChange: w,
+  onConfirm: u,
+  labels: p
 }) {
-  const a = { ...E, ...k }, w = C(null);
-  return z(() => {
-    w.current?.focus();
-  }, []), /* @__PURE__ */ e(
-    "section",
-    {
-      "aria-label": s,
-      className: "ttw:rounded-md ttw:border ttw:border-border ttw:bg-white ttw:p-4",
-      children: [
-        /* @__PURE__ */ e("div", { className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-2", children: [
-          /* @__PURE__ */ e(
-            c,
-            {
-              ref: w,
-              variant: "ghost",
-              size: "sm",
-              onClick: L,
-              children: [
-                /* @__PURE__ */ t(B, { className: "ttw:size-4" }),
-                a.detailsBackButton
-              ]
-            }
-          ),
-          (i || n) && /* @__PURE__ */ e("div", { className: "ttw:flex ttw:items-center ttw:gap-2", children: [
-            i && /* @__PURE__ */ e(c, { variant: "outline", size: "sm", onClick: i, children: [
-              /* @__PURE__ */ t(S, { "aria-hidden": !0, className: "ttw:size-4" }),
-              a.detailsEditButton
-            ] }),
-            n && /* @__PURE__ */ e(
-              c,
-              {
-                variant: "outline",
-                size: "sm",
-                className: "ttw:text-destructive ttw:hover:bg-destructive/10 ttw:hover:text-destructive",
-                onClick: n,
-                children: [
-                  /* @__PURE__ */ t(y, { "aria-hidden": !0, className: "ttw:size-4" }),
-                  a.detailsDeactivateButton
-                ]
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "ttw:mt-4 ttw:flex ttw:items-center ttw:gap-3", children: [
-          /* @__PURE__ */ t(
-            "span",
-            {
-              "aria-hidden": !0,
-              className: "ttw:flex ttw:size-12 ttw:shrink-0 ttw:items-center ttw:justify-center ttw:rounded-full ttw:bg-muted ttw:text-sm ttw:font-semibold ttw:text-muted-foreground",
-              children: u
-            }
-          ),
-          /* @__PURE__ */ e("div", { className: "ttw:min-w-0", children: [
-            /* @__PURE__ */ t("h3", { className: "ttw:text-lg ttw:font-semibold ttw:text-foreground", children: s }),
-            /* @__PURE__ */ t("p", { className: "ttw:truncate ttw:text-sm ttw:text-muted-foreground", children: r })
-          ] }),
-          /* @__PURE__ */ t(D, { className: `ttw:ml-auto ${I(h)}`, children: o })
-        ] }),
-        /* @__PURE__ */ t(m, { className: "ttw:my-4" }),
-        /* @__PURE__ */ e("div", { className: "ttw:mb-4", children: [
-          /* @__PURE__ */ t("h4", { className: "ttw:mb-1 ttw:text-base ttw:font-semibold ttw:text-foreground", children: a.rolesSectionHeading }),
-          /* @__PURE__ */ t("p", { className: "ttw:mb-4 ttw:text-sm ttw:text-muted-foreground", children: a.rolesSectionDescription }),
-          x ? /* @__PURE__ */ e("div", { className: "ttw:flex ttw:items-center ttw:gap-2 ttw:py-2", children: [
-            /* @__PURE__ */ t(A, { className: "ttw:size-4" }),
-            /* @__PURE__ */ t("span", { className: "ttw:text-sm ttw:text-muted-foreground", children: a.roleLoadingLabel })
-          ] }) : /* @__PURE__ */ t("div", { className: "ttw:flex ttw:w-full ttw:flex-col ttw:rounded-xl ttw:border ttw:border-border ttw:bg-white ttw:p-4", children: /* @__PURE__ */ e("span", { className: "ttw:flex ttw:w-full ttw:items-start ttw:gap-3", children: [
-            /* @__PURE__ */ t(
-              b,
-              {
-                className: "ttw:mt-0.5 ttw:size-4 ttw:shrink-0 ttw:text-foreground",
-                "aria-hidden": !0
-              }
-            ),
-            /* @__PURE__ */ e("span", { className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:gap-1", children: [
-              /* @__PURE__ */ t("span", { className: "ttw:text-sm ttw:font-semibold ttw:text-foreground", children: f }),
-              d ? /* @__PURE__ */ t("span", { className: "ttw:text-sm ttw:leading-normal ttw:text-muted-foreground", children: d }) : null
-            ] })
-          ] }) })
-        ] }),
-        /* @__PURE__ */ t(m, { className: "ttw:my-4" }),
-        /* @__PURE__ */ e("dl", { className: "ttw:grid ttw:grid-cols-1 ttw:gap-4 ttw:sm:grid-cols-2", children: [
-          /* @__PURE__ */ t(l, { label: a.detailsEmailLabel, value: r }),
-          /* @__PURE__ */ t(l, { label: a.detailsStatusLabel, value: o }),
-          /* @__PURE__ */ t(
-            l,
-            {
-              label: a.detailsLastSignInLabel,
-              value: g
-            }
-          ),
-          /* @__PURE__ */ t(
-            l,
-            {
-              label: a.detailsDepartmentLabel,
-              value: p
-            }
-          ),
-          /* @__PURE__ */ t(
-            l,
-            {
-              label: a.detailsLocationLabel,
-              value: N
-            }
-          ),
-          /* @__PURE__ */ t(
-            l,
-            {
-              label: a.detailsAccountAccessLabel,
-              value: v
-            }
-          )
-        ] })
-      ]
-    }
-  );
+  const g = { ...N, ...p };
+  return /* @__PURE__ */ t(f, { open: s, onOpenChange: w, children: /* @__PURE__ */ e(h, { children: [
+    r ? /* @__PURE__ */ t("div", { className: "ttw:flex ttw:justify-center", children: /* @__PURE__ */ t(
+      "span",
+      {
+        className: `ttw:flex ttw:size-12 ttw:items-center ttw:justify-center ttw:rounded-full ${o === "destructive" ? "ttw:bg-destructive/10 ttw:text-destructive" : "ttw:bg-primary/10 ttw:text-primary"}`,
+        children: r
+      }
+    ) }) : null,
+    /* @__PURE__ */ e(x, { className: r ? "ttw:text-center" : void 0, children: [
+      /* @__PURE__ */ t(D, { children: c }),
+      /* @__PURE__ */ t(b, { children: d })
+    ] }),
+    i && /* @__PURE__ */ e("div", { className: "ttw:rounded-md ttw:border ttw:border-border ttw:bg-muted/50 ttw:px-3 ttw:py-2", children: [
+      /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:font-medium ttw:text-foreground", children: i }),
+      n && /* @__PURE__ */ t("p", { className: "ttw:truncate ttw:text-sm ttw:text-muted-foreground", children: n })
+    ] }),
+    a && /* @__PURE__ */ t(C, { children: a }),
+    /* @__PURE__ */ e(A, { children: [
+      /* @__PURE__ */ t(j, { disabled: l, children: g.actionDialogCancelButton }),
+      /* @__PURE__ */ t(
+        v,
+        {
+          variant: o,
+          loading: l,
+          onClick: u,
+          children: m
+        }
+      )
+    ] })
+  ] }) });
 }
 export {
-  F as TeamMemberDetails
+  O as TeamActionDialog
 };

package/dist/libs/tesouro-embedded-components-react/team-widget/ui/dist/index13.js

@@ -1,25 +1,185 @@
 "use client";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Tabs as l, TabsList as b, TabsTrigger as c, TabsContent as o } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
-function h({
-  tabs: n,
-  activeTabId: s,
-  onTabChange: r,
-  children: t
+import { jsxs as i, jsx as t, Fragment as g } from "react/jsx-runtime";
+import { useRef as D, useEffect as L } from "react";
+import { Plus as B, Building2 as I, UsersIcon as j } from "lucide-react";
+import { Button as $, Table as F, TableHeader as A, TableRow as c, TableHead as o, TableBody as E, TableCell as s, Badge as h, Skeleton as n } from "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "@radix-ui/react-use-controllable-state";
+import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import { PaginationFooter as H } from "../../../shared/ui/dist/lib/PaginationFooter/PaginationFooter.js";
+import { avatarSwatchFor as R } from "./index19.js";
+import { DEFAULT_LABELS as K } from "./index17.js";
+import { statusToneClassName as U } from "./index14.js";
+const q = [5, 10, 25], O = 4;
+function G() {
+  return /* @__PURE__ */ t(g, { children: Array.from({ length: 5 }).map((l, r) => /* @__PURE__ */ i(c, { children: [
+    /* @__PURE__ */ t(s, { children: /* @__PURE__ */ i("div", { className: "ttw:flex ttw:items-center ttw:gap-2", children: [
+      /* @__PURE__ */ t(n, { className: "ttw:size-8 ttw:rounded-full" }),
+      /* @__PURE__ */ i("div", { className: "ttw:flex-1 ttw:space-y-2", children: [
+        /* @__PURE__ */ t(n, { className: "ttw:h-4 ttw:w-32" }),
+        /* @__PURE__ */ t(n, { className: "ttw:h-3 ttw:w-44" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ t(s, { children: /* @__PURE__ */ t(n, { className: "ttw:h-4 ttw:w-20" }) }),
+    /* @__PURE__ */ t(s, { children: /* @__PURE__ */ t(n, { className: "ttw:h-4 ttw:w-24" }) }),
+    /* @__PURE__ */ t(s, { children: /* @__PURE__ */ t(n, { className: "ttw:h-4 ttw:w-16" }) })
+  ] }, r)) });
+}
+function f({
+  title: l,
+  description: r
+}) {
+  return /* @__PURE__ */ t(c, { className: "ttw:hover:bg-transparent", children: /* @__PURE__ */ t(s, { colSpan: O, className: "ttw:p-0", children: /* @__PURE__ */ i("div", { className: "ttw:flex ttw:flex-col ttw:items-center ttw:justify-center ttw:px-4 ttw:py-14 ttw:text-center", children: [
+    /* @__PURE__ */ t("div", { className: "ttw:mb-4 ttw:flex ttw:size-14 ttw:items-center ttw:justify-center ttw:rounded-2xl ttw:bg-muted", children: /* @__PURE__ */ t(j, { className: "ttw:size-6 ttw:text-muted-foreground" }) }),
+    /* @__PURE__ */ t("h3", { className: "ttw:mb-2 ttw:text-lg ttw:font-bold ttw:tracking-tight ttw:text-foreground", children: l }),
+    /* @__PURE__ */ t("p", { className: "ttw:max-w-sm ttw:text-sm ttw:text-muted-foreground", children: r })
+  ] }) }) });
+}
+function et({
+  rows: l,
+  isLoading: r = !1,
+  isError: p = !1,
+  showPagination: b = !1,
+  isPreviousPageDisabled: x = !1,
+  isNextPageDisabled: N = !1,
+  pageSize: v = 10,
+  pageSizeOptions: y = q,
+  rangeLabel: k = "",
+  onPageSizeChange: C,
+  autoFocusRowKey: w,
+  onPreviousPageClick: P,
+  onNextPageClick: S,
+  onInviteClick: d,
+  labels: z
 }) {
-  return /* @__PURE__ */ i(
-    l,
+  const a = { ...K, ...z }, m = D(null);
+  return L(() => {
+    if (!w)
+      return;
+    const e = m.current;
+    e && (e.querySelector(
+      `button[data-row-key="${CSS.escape(w)}"]`
+    ) ?? e).focus();
+  }, [w]), /* @__PURE__ */ i(
+    "section",
     {
-      value: s,
-      onValueChange: r,
-      className: "ttw:w-full ttw:space-y-5",
+      ref: m,
+      tabIndex: -1,
+      "aria-label": a.title,
+      "aria-busy": r || void 0,
+      className: "ttw:overflow-hidden ttw:rounded-md ttw:border ttw:border-border ttw:bg-background",
       children: [
-        /* @__PURE__ */ e(b, { children: n.map((a) => /* @__PURE__ */ e(c, { value: a.id, children: a.label }, a.id)) }),
-        /* @__PURE__ */ e(o, { value: s, children: t })
+        r && /* @__PURE__ */ t("span", { role: "status", className: "ttw:sr-only", children: a.loadingLabel }),
+        /* @__PURE__ */ i("div", { className: "ttw:flex ttw:items-center ttw:justify-between ttw:gap-4 ttw:border-b ttw:border-border ttw:p-3", children: [
+          /* @__PURE__ */ t("h2", { className: "ttw:text-lg ttw:font-semibold ttw:text-foreground", children: a.title }),
+          d && /* @__PURE__ */ i($, { size: "sm", disabled: r, onClick: d, children: [
+            /* @__PURE__ */ t(B, { "aria-hidden": !0, className: "ttw:size-4" }),
+            a.inviteButton
+          ] })
+        ] }),
+        /* @__PURE__ */ i(F, { children: [
+          /* @__PURE__ */ t(A, { children: /* @__PURE__ */ i(c, { className: "ttw:hover:bg-transparent", children: [
+            /* @__PURE__ */ t(o, { children: a.nameColumn }),
+            /* @__PURE__ */ t(o, { children: a.roleColumn }),
+            /* @__PURE__ */ t(o, { children: a.departmentColumn }),
+            /* @__PURE__ */ t(o, { children: a.statusColumn })
+          ] }) }),
+          /* @__PURE__ */ t(E, { children: p ? /* @__PURE__ */ t(
+            f,
+            {
+              title: a.errorTitle,
+              description: a.errorDescription
+            }
+          ) : r ? /* @__PURE__ */ t(G, {}) : l.length === 0 ? /* @__PURE__ */ t(
+            f,
+            {
+              title: a.emptyTitle,
+              description: a.emptyDescription
+            }
+          ) : l.map((e) => {
+            const u = /* @__PURE__ */ i(g, { children: [
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: `ttw:flex ttw:size-8 ttw:shrink-0 ttw:items-center ttw:justify-center ttw:rounded-full ttw:text-xs ttw:font-semibold ${R(
+                    e.key
+                  )}`,
+                  children: e.initials
+                }
+              ),
+              /* @__PURE__ */ i("div", { className: "ttw:min-w-0 ttw:flex-1", children: [
+                /* @__PURE__ */ t("div", { className: "ttw:text-sm ttw:font-medium ttw:text-foreground", children: e.name }),
+                /* @__PURE__ */ t("div", { className: "ttw:truncate ttw:text-sm ttw:text-muted-foreground", children: e.email })
+              ] })
+            ] });
+            return /* @__PURE__ */ i(
+              c,
+              {
+                "data-testid": `team-member-row-${e.key}`,
+                className: e.isInactive ? "ttw:cursor-default ttw:opacity-50 ttw:hover:bg-transparent" : "ttw:cursor-pointer",
+                onClick: e.isInactive ? void 0 : () => e.onSelect(),
+                children: [
+                  /* @__PURE__ */ t(s, { children: e.isInactive ? /* @__PURE__ */ t("div", { className: "ttw:flex ttw:w-full ttw:max-w-md ttw:items-center ttw:gap-2", children: u }) : /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      "data-row-key": e.key,
+                      onClick: (T) => {
+                        T.stopPropagation(), e.onSelect();
+                      },
+                      className: "ttw:flex ttw:w-full ttw:max-w-md ttw:items-center ttw:gap-2 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: u
+                    }
+                  ) }),
+                  /* @__PURE__ */ t(s, { children: e.isInactive ? (
+                    // Deactivated members show a muted placeholder for role,
+                    // matching the legacy team list.
+                    /* @__PURE__ */ t("span", { className: "ttw:text-sm ttw:font-medium ttw:text-muted-foreground", children: a.inactiveRolePlaceholder })
+                  ) : /* @__PURE__ */ t(
+                    h,
+                    {
+                      variant: "outline",
+                      className: "ttw:rounded ttw:border-[#D0D5DD] ttw:font-medium ttw:text-[#344054]",
+                      children: e.roleLabel
+                    }
+                  ) }),
+                  /* @__PURE__ */ t(s, { children: /* @__PURE__ */ i("div", { className: "ttw:flex ttw:items-center ttw:gap-2 ttw:text-sm ttw:font-medium ttw:text-[#344054]", children: [
+                    /* @__PURE__ */ t(
+                      I,
+                      {
+                        "aria-hidden": !0,
+                        className: "ttw:size-4 ttw:shrink-0 ttw:text-[#98A2B3]"
+                      }
+                    ),
+                    /* @__PURE__ */ t("span", { children: e.departmentLabel })
+                  ] }) }),
+                  /* @__PURE__ */ t(s, { children: /* @__PURE__ */ t(h, { className: U(e.statusTone), children: e.statusLabel }) })
+                ]
+              },
+              e.key
+            );
+          }) })
+        ] }),
+        b && /* @__PURE__ */ t(
+          H,
+          {
+            pageSize: v,
+            pageSizeOptions: y,
+            rangeLabel: k,
+            isPreviousDisabled: x,
+            isNextDisabled: N,
+            isDisabled: r,
+            onPageSizeChange: C ?? (() => {
+            }),
+            onPreviousPageClick: P,
+            onNextPageClick: S,
+            labels: a
+          }
+        )
       ]
     }
   );
 }
 export {
-  h as TeamTabs
+  et as TeamMembersTable
 };

package/dist/libs/tesouro-embedded-components-react/team-widget/ui/dist/index14.js

@@ -1,61 +1,11 @@
 const e = {
-  title: "Team",
-  nameColumn: "Name",
-  roleColumn: "Role",
-  departmentColumn: "Department",
-  statusColumn: "Status",
-  loadingLabel: "Loading team members",
-  emptyTitle: "No team members yet",
-  emptyDescription: "Team members will appear here once they join your organization.",
-  errorTitle: "Unable to load team members",
-  errorDescription: "Something went wrong while fetching your team. Please try again.",
-  rowsPerPageLabel: "Rows per page",
-  previousPageButton: "Previous",
-  nextPageButton: "Next",
-  detailsBackButton: "Back to team",
-  detailsEmailLabel: "Email",
-  detailsRoleLabel: "Role",
-  detailsStatusLabel: "Status",
-  detailsLastSignInLabel: "Last sign-in",
-  detailsDepartmentLabel: "Department",
-  detailsLocationLabel: "Location",
-  detailsAccountAccessLabel: "Account access",
-  rolesSectionHeading: "Roles and permissions",
-  rolesSectionDescription: "Specifies what the team member can do, including access to money movement, account data, and administrative actions.",
-  roleLoadingLabel: "Loading role…",
-  detailsEditButton: "Edit",
-  detailsDeactivateButton: "Deactivate",
-  inviteButton: "Add user",
-  inviteTitle: "Invite team member",
-  inviteBackToTeamButton: "Back to team management",
-  inviteDetailsSectionHeading: "Team member details",
-  inviteFirstNameLabel: "First name",
-  inviteLastNameLabel: "Last name",
-  inviteWorkEmailLabel: "Work email address",
-  inviteDepartmentLabel: "Department",
-  inviteDepartmentPlaceholder: "Select a department",
-  inviteDepartmentEmpty: "No departments available",
-  inviteLocationLabel: "Location",
-  inviteLocationPlaceholder: "Select a location",
-  inviteLocationEmpty: "No locations available",
-  inviteReportingManagerLabel: "Reporting manager",
-  inviteReportingManagerPlaceholder: "Select a reporting manager",
-  inviteReportingManagerEmpty: "No reporting managers available",
-  inviteOptionsLoading: "Loading…",
-  inviteOptionNone: "None",
-  inviteRoleSectionHeading: "Assign role",
-  inviteRoleSectionDescription: "Choose what this team member can do. Roles set access to money movement, account data, and administrative actions.",
-  inviteCancelButton: "Cancel",
-  inviteSubmitButton: "Send invite",
-  editTitle: "Edit team member",
-  editDescription: "Update the member's profile and role.",
-  editNameLabel: "Full name",
-  editRoleLabel: "Role",
-  editRolePlaceholder: "Select a role",
-  editCancelButton: "Cancel",
-  editSaveButton: "Save changes",
-  actionDialogCancelButton: "Cancel"
-};
+  success: "ttw:bg-[#ECFDF5] ttw:text-[#027A48]",
+  info: "ttw:bg-[#EFF8FF] ttw:text-[#175CD3]",
+  neutral: "ttw:bg-[#F2F4F7] ttw:text-[#344054]"
+}, w = "ttw:rounded ttw:border-transparent ttw:px-2 ttw:py-0.5 ttw:text-xs ttw:font-medium";
+function n(t) {
+  return `${w} ${e[t]}`;
+}
 export {
-  e as DEFAULT_LABELS
+  n as statusToneClassName
 };