@nextsparkjs/core 0.1.0-beta.1

package/dist/components/teams/InviteMemberButton.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "../ui/tooltip";
+import { useTeamsConfig } from "../../hooks/useTeamsConfig";
+import { useTranslations } from "next-intl";
+import { UserPlus } from "lucide-react";
+function InviteMemberButton({
+  memberCount = 0,
+  onClick,
+  children,
+  variant = "outline",
+  size = "default",
+  className,
+  showIcon = true
+}) {
+  const t = useTranslations("teams");
+  const { canInvite, options } = useTeamsConfig();
+  if (!canInvite) {
+    return null;
+  }
+  const maxMembersPerTeam = options == null ? void 0 : options.maxMembersPerTeam;
+  const atLimit = maxMembersPerTeam != null && memberCount >= maxMembersPerTeam;
+  if (atLimit) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant,
+          size,
+          className,
+          disabled: true,
+          "data-cy": "invite-member-button-disabled",
+          "aria-label": t("invite.limitReached", { limit: maxMembersPerTeam }),
+          children: [
+            showIcon && /* @__PURE__ */ jsx(UserPlus, { className: "h-4 w-4 mr-2", "aria-hidden": "true" }),
+            children || t("invite.inviteMember")
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: t("invite.limitReached", { limit: maxMembersPerTeam }) }) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant,
+      size,
+      className,
+      onClick,
+      "data-cy": "invite-member-button",
+      "aria-label": t("invite.inviteMember"),
+      children: [
+        showIcon && /* @__PURE__ */ jsx(UserPlus, { className: "h-4 w-4 mr-2", "aria-hidden": "true" }),
+        children || t("invite.inviteMember")
+      ]
+    }
+  );
+}
+export {
+  InviteMemberButton
+};

package/dist/components/teams/InviteMemberDialog.d.ts

@@ -0,0 +1,17 @@
+import { TeamRole } from '../../lib/teams/types';
+interface InviteMemberDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Optional teamId to use instead of context teamId.
+     * Useful when displaying in entity detail page where teamId comes from URL.
+     */
+    teamId?: string;
+    /**
+     * Current user's role in the team - used to filter available roles
+     */
+    currentUserRole?: TeamRole;
+}
+export declare function InviteMemberDialog({ open, onOpenChange, teamId, currentUserRole }: InviteMemberDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InviteMemberDialog.d.ts.map

package/dist/components/teams/InviteMemberDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InviteMemberDialog.d.ts","sourceRoot":"","sources":["../../../src/components/teams/InviteMemberDialog.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAmBhD,UAAU,uBAAuB;IAC/B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,QAAQ,CAAA;CAC3B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,eAAyB,EAAE,EAAE,uBAAuB,2CAwGpH"}

package/dist/components/teams/InviteMemberDialog.js

@@ -0,0 +1,120 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../ui/dialog";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../ui/select";
+import { useTeamMembers } from "../../hooks/useTeamMembers";
+import { toast } from "sonner";
+import { APP_CONFIG_MERGED } from "../../lib/config/config-sync";
+import { getInvitableRoles } from "../../lib/teams/permissions";
+function getAvailableRolesForInvite(userRole) {
+  const hierarchy = APP_CONFIG_MERGED.teamRoles.hierarchy;
+  const userLevel = hierarchy[userRole] ?? 0;
+  const invitableRoles = getInvitableRoles();
+  return invitableRoles.filter((role) => {
+    const roleLevel = hierarchy[role] ?? 0;
+    return roleLevel <= userLevel;
+  });
+}
+function InviteMemberDialog({ open, onOpenChange, teamId, currentUserRole = "owner" }) {
+  const t = useTranslations("teams");
+  const { inviteMemberAsync, isInviting } = useTeamMembers({ teamId });
+  const [email, setEmail] = useState("");
+  const availableRoles = getAvailableRolesForInvite(currentUserRole);
+  const defaultRole = availableRoles.includes("admin") ? "admin" : availableRoles[0];
+  const [role, setRole] = useState(defaultRole);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      await inviteMemberAsync({ email, role });
+      toast.success(t("messages.memberInvited"));
+      onOpenChange(false);
+      setEmail("");
+      setRole(defaultRole);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : t("errors.unauthorized"));
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { "data-cy": "invite-member-dialog", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: t("actions.invite") }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: t("entity.description") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-4 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "member-email", children: t("fields.email") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "member-email",
+            name: "email",
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: "colleague@example.com",
+            required: true,
+            "data-cy": "member-email-input"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "member-role", children: t("fields.role") }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            name: "role",
+            value: role,
+            onValueChange: (value) => setRole(value),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { id: "member-role", "data-cy": "member-role-select", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: availableRoles.map((r) => /* @__PURE__ */ jsx(SelectItem, { value: r, "data-cy": `role-option-${r}`, children: t(`roles.${r}`) }, r)) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t(`roles.${role}`) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: () => onOpenChange(false),
+          disabled: isInviting,
+          "data-cy": "cancel-invite-member",
+          children: t("actions.cancel")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          disabled: isInviting,
+          "data-cy": "submit-invite-member",
+          children: isInviting ? t("actions.inviting") : t("actions.invite")
+        }
+      )
+    ] })
+  ] }) }) });
+}
+export {
+  InviteMemberDialog
+};

package/dist/components/teams/TeamBadge.d.ts

@@ -0,0 +1,9 @@
+import { Team } from '../../lib/teams/types';
+interface TeamBadgeProps {
+    team: Team;
+    showName?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function TeamBadge({ team, showName, size }: TeamBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TeamBadge.d.ts.map

package/dist/components/teams/TeamBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamBadge.d.ts","sourceRoot":"","sources":["../../../src/components/teams/TeamBadge.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,UAAU,cAAc;IACtB,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,QAAe,EAAE,IAAW,EAAE,EAAE,cAAc,2CAkB/E"}

package/dist/components/teams/TeamBadge.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Users } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { Badge } from "../ui/badge";
+function TeamBadge({ team, showName = true, size = "md" }) {
+  const t = useTranslations("teams");
+  const sizeClasses = {
+    sm: "h-3 w-3",
+    md: "h-4 w-4",
+    lg: "h-5 w-5"
+  };
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      variant: "default",
+      className: "gap-1",
+      children: [
+        /* @__PURE__ */ jsx(Users, { className: sizeClasses[size], "aria-hidden": "true" }),
+        showName && /* @__PURE__ */ jsx("span", { children: team.name })
+      ]
+    }
+  );
+}
+export {
+  TeamBadge
+};

package/dist/components/teams/TeamDetailSection.d.ts

@@ -0,0 +1,9 @@
+interface TeamDetailSectionProps {
+    /**
+     * The team ID to display members for
+     */
+    teamId: string;
+}
+export declare function TeamDetailSection({ teamId }: TeamDetailSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TeamDetailSection.d.ts.map

package/dist/components/teams/TeamDetailSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamDetailSection.d.ts","sourceRoot":"","sources":["../../../src/components/teams/TeamDetailSection.tsx"],"names":[],"mappings":"AAaA,UAAU,sBAAsB;IAC9B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAA;CACf;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,sBAAsB,2CAenE"}

package/dist/components/teams/TeamDetailSection.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
+import { TeamMembersList } from "./TeamMembersList";
+import { TeamPendingInvitations } from "./TeamPendingInvitations";
+function TeamDetailSection({ teamId }) {
+  return /* @__PURE__ */ jsxs(Card, { "data-cy": "team-members-section", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { children: "Team Members" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: "Manage team members and invitations" })
+    ] }),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsx(TeamMembersList, { teamId }),
+      /* @__PURE__ */ jsx(TeamPendingInvitations, { teamId })
+    ] })
+  ] });
+}
+export {
+  TeamDetailSection
+};

package/dist/components/teams/TeamMembersList.d.ts

@@ -0,0 +1,15 @@
+interface TeamMembersListProps {
+    /**
+     * Optional teamId to use instead of context teamId.
+     * Useful when displaying in entity detail page where teamId comes from URL.
+     */
+    teamId?: string;
+    /**
+     * When true, hides all management actions (invite, change role, remove).
+     * Used for read-only views like in admin panel.
+     */
+    readOnly?: boolean;
+}
+export declare function TeamMembersList({ teamId: propTeamId, readOnly }?: TeamMembersListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TeamMembersList.d.ts.map

package/dist/components/teams/TeamMembersList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamMembersList.d.ts","sourceRoot":"","sources":["../../../src/components/teams/TeamMembersList.tsx"],"names":[],"mappings":"AAmDA,UAAU,oBAAoB;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,QAAgB,EAAE,GAAE,oBAAyB,2CA0JlG"}

package/dist/components/teams/TeamMembersList.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { MoreHorizontal, Crown, Shield, Eye, UserMinus } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { formatDistanceToNow } from "date-fns";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "../ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../ui/dropdown-menu";
+import { Button } from "../ui/button";
+import { Badge } from "../ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { useTeamMembers } from "../../hooks/useTeamMembers";
+import { useTeam } from "../../hooks/useTeam";
+import { useAuth } from "../../hooks/useAuth";
+import { InviteMemberDialog } from "./InviteMemberDialog";
+import { APP_CONFIG_MERGED } from "../../lib/config/config-sync";
+import { canManageRole } from "../../lib/teams/permissions";
+const roleIconsMap = {
+  owner: Crown,
+  admin: Shield,
+  member: null,
+  viewer: Eye
+};
+const roleColorsMap = {
+  owner: "destructive",
+  admin: "default",
+  member: "secondary",
+  viewer: "outline"
+};
+const getRoleIcon = (role) => roleIconsMap[role] ?? Eye;
+const getRoleColor = (role) => roleColorsMap[role] ?? "outline";
+function TeamMembersList({ teamId: propTeamId, readOnly = false } = {}) {
+  const t = useTranslations("teams");
+  const { user } = useAuth();
+  const { team } = useTeam();
+  const { members, isLoading, updateMemberRole, removeMember } = useTeamMembers({ teamId: propTeamId });
+  const [showInviteDialog, setShowInviteDialog] = useState(false);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: t("messages.loading") }) });
+  }
+  const currentUserMember = members.find((m) => m.userId === (user == null ? void 0 : user.id) || m.user_id === (user == null ? void 0 : user.id));
+  const currentUserRole = (currentUserMember == null ? void 0 : currentUserMember.role) || "viewer";
+  const canManageMembers = !readOnly && currentUserMember && ["owner", "admin"].includes(currentUserMember.role);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold", children: [
+        t("entity.plural"),
+        " (",
+        members.length,
+        ")"
+      ] }),
+      canManageMembers && /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: () => setShowInviteDialog(true),
+          "data-cy": "invite-member-button",
+          children: t("actions.invite")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { children: t("fields.name") }),
+        /* @__PURE__ */ jsx(TableHead, { children: t("fields.role") }),
+        /* @__PURE__ */ jsx(TableHead, { children: t("fields.joinedAt") }),
+        canManageMembers && /* @__PURE__ */ jsx(TableHead, { className: "w-10" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: members.map((member) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+        const memberRole = member.role;
+        const RoleIcon = getRoleIcon(memberRole);
+        const isOwner = memberRole === "owner";
+        const isCurrentUser = member.userId === (user == null ? void 0 : user.id) || member.user_id === (user == null ? void 0 : user.id);
+        return /* @__PURE__ */ jsxs(TableRow, { "data-cy": `member-row-${member.userId || member.user_id}`, children: [
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8", children: [
+              /* @__PURE__ */ jsx(AvatarImage, { src: ((_a = member.user) == null ? void 0 : _a.avatarUrl) || ((_b = member.user) == null ? void 0 : _b.avatar_url), alt: (_c = member.user) == null ? void 0 : _c.name }),
+              /* @__PURE__ */ jsx(AvatarFallback, { children: (((_e = (_d = member.user) == null ? void 0 : _d.name) == null ? void 0 : _e[0]) || ((_g = (_f = member.user) == null ? void 0 : _f.email) == null ? void 0 : _g[0]) || "?").toUpperCase() })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "font-medium", children: ((_h = member.user) == null ? void 0 : _h.name) || "Unknown" }),
+              /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: (_i = member.user) == null ? void 0 : _i.email })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs(Badge, { variant: getRoleColor(memberRole), children: [
+            RoleIcon && /* @__PURE__ */ jsx(RoleIcon, { className: "h-3 w-3 mr-1", "aria-hidden": "true" }),
+            t(`roles.${memberRole}`)
+          ] }) }),
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: formatDistanceToNow(new Date(member.joinedAt || member.joined_at), {
+            addSuffix: true
+          }) }) }),
+          canManageMembers && /* @__PURE__ */ jsx(TableCell, { children: !isOwner && !isCurrentUser && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "data-cy": `member-actions-${member.id}`, children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+              APP_CONFIG_MERGED.teamRoles.availableTeamRoles.filter(
+                (role) => role !== "owner" && // Cannot assign owner role
+                role !== memberRole && // Don't show current role
+                canManageRole(currentUserRole, role)
+                // Only roles user can manage
+              ).map((role) => {
+                const roleLabel = t(`roles.${role}`, { defaultValue: role.charAt(0).toUpperCase() + role.slice(1) });
+                return /* @__PURE__ */ jsx(
+                  DropdownMenuItem,
+                  {
+                    onClick: () => updateMemberRole({
+                      memberId: member.id,
+                      role
+                    }),
+                    "data-cy": `make-${role}-action`,
+                    children: t("actions.makeRole", { role: roleLabel })
+                  },
+                  role
+                );
+              }),
+              /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  onClick: () => removeMember(member.id),
+                  className: "text-destructive",
+                  "data-cy": "remove-member-action",
+                  children: [
+                    /* @__PURE__ */ jsx(UserMinus, { className: "h-4 w-4 mr-2", "aria-hidden": "true" }),
+                    t("actions.removeMember")
+                  ]
+                }
+              )
+            ] })
+          ] }) })
+        ] }, member.id);
+      }) })
+    ] }) }),
+    !readOnly && /* @__PURE__ */ jsx(
+      InviteMemberDialog,
+      {
+        open: showInviteDialog,
+        onOpenChange: setShowInviteDialog,
+        teamId: propTeamId,
+        currentUserRole
+      }
+    )
+  ] });
+}
+export {
+  TeamMembersList
+};

package/dist/components/teams/TeamPendingInvitations.d.ts

@@ -0,0 +1,6 @@
+interface TeamPendingInvitationsProps {
+    teamId: string;
+}
+export declare function TeamPendingInvitations({ teamId }: TeamPendingInvitationsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TeamPendingInvitations.d.ts.map

package/dist/components/teams/TeamPendingInvitations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamPendingInvitations.d.ts","sourceRoot":"","sources":["../../../src/components/teams/TeamPendingInvitations.tsx"],"names":[],"mappings":"AAkDA,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAA;CACf;AAOD,wBAAgB,sBAAsB,CAAC,EAAE,MAAM,EAAE,EAAE,2BAA2B,2CAsK7E"}

package/dist/components/teams/TeamPendingInvitations.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useTranslations } from "next-intl";
+import { formatDistanceToNow } from "date-fns";
+import { Trash2, Mail, Clock, Shield, Eye, Crown } from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "../ui/table";
+import { Button } from "../ui/button";
+import { Badge } from "../ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "../ui/dialog";
+import { toast } from "sonner";
+import { useTeamMembers } from "../../hooks/useTeamMembers";
+import { useAuth } from "../../hooks/useAuth";
+const roleIconsMap = {
+  owner: Crown,
+  admin: Shield,
+  member: null,
+  viewer: Eye
+};
+const roleColorsMap = {
+  owner: "destructive",
+  admin: "default",
+  member: "secondary",
+  viewer: "outline"
+};
+const getRoleIcon = (role) => roleIconsMap[role] ?? Eye;
+const getRoleColor = (role) => roleColorsMap[role] ?? "outline";
+function TeamPendingInvitations({ teamId }) {
+  const t = useTranslations("teams");
+  const queryClient = useQueryClient();
+  const { user } = useAuth();
+  const { members } = useTeamMembers({ teamId });
+  const [cancellingId, setCancellingId] = useState(null);
+  const currentUserMember = members.find((m) => m.userId === (user == null ? void 0 : user.id) || m.user_id === (user == null ? void 0 : user.id));
+  const canManageInvitations = currentUserMember && ["owner", "admin"].includes(currentUserMember.role);
+  const { data: invitations = [], isLoading } = useQuery({
+    queryKey: ["team-invitations", teamId],
+    queryFn: async () => {
+      const response = await fetch(`/api/v1/teams/${teamId}/invitations?status=pending`);
+      if (!response.ok) throw new Error("Failed to fetch invitations");
+      const json = await response.json();
+      return json.data || [];
+    },
+    enabled: !!teamId
+  });
+  const cancelMutation = useMutation({
+    mutationFn: async (invitationId) => {
+      const response = await fetch(`/api/v1/teams/${teamId}/invitations?id=${invitationId}`, {
+        method: "DELETE"
+      });
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || "Failed to cancel invitation");
+      }
+      return response.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["team-invitations", teamId] });
+      toast.success(t("messages.invitationCancelled"));
+      setCancellingId(null);
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : t("errors.unauthorized"));
+      setCancellingId(null);
+    }
+  });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground py-4", children: t("messages.loading") });
+  }
+  if (invitations.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 mt-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Mail, { className: "h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsxs("h4", { className: "text-sm font-medium", children: [
+        t("invitations.pending"),
+        " (",
+        invitations.length,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { children: t("fields.email") }),
+        /* @__PURE__ */ jsx(TableHead, { children: t("fields.role") }),
+        /* @__PURE__ */ jsx(TableHead, { children: t("invitations.invitedBy") }),
+        /* @__PURE__ */ jsx(TableHead, { children: t("invitations.expiresAt") }),
+        canManageInvitations && /* @__PURE__ */ jsx(TableHead, { className: "w-10" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: invitations.map((invitation) => {
+        const invitationRole = invitation.role;
+        const RoleIcon = getRoleIcon(invitationRole);
+        const isExpired = new Date(invitation.expiresAt) < /* @__PURE__ */ new Date();
+        return /* @__PURE__ */ jsxs(TableRow, { "data-cy": `invitation-row-${invitation.id}`, children: [
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Mail, { className: "h-4 w-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: invitation.email })
+          ] }) }),
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs(Badge, { variant: getRoleColor(invitationRole), children: [
+            RoleIcon && /* @__PURE__ */ jsx(RoleIcon, { className: "h-3 w-3 mr-1", "aria-hidden": "true" }),
+            t(`roles.${invitationRole}`)
+          ] }) }),
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: invitation.inviterName || invitation.inviterEmail }) }),
+          /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3 text-muted-foreground" }),
+            /* @__PURE__ */ jsx("span", { className: `text-sm ${isExpired ? "text-destructive" : "text-muted-foreground"}`, children: isExpired ? t("invitations.expired") : formatDistanceToNow(new Date(invitation.expiresAt), { addSuffix: true }) })
+          ] }) }),
+          canManageInvitations && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: () => setCancellingId(invitation.id),
+              disabled: cancelMutation.isPending,
+              "data-cy": `cancel-invitation-${invitation.id}`,
+              children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4 text-destructive" })
+            }
+          ) })
+        ] }, invitation.id);
+      }) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Dialog, { open: !!cancellingId, onOpenChange: () => setCancellingId(null), children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: t("invitations.cancelTitle") }),
+        /* @__PURE__ */ jsx(DialogDescription, { children: t("invitations.cancelDescription") })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => setCancellingId(null),
+            disabled: cancelMutation.isPending,
+            children: t("actions.cancel")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "destructive",
+            onClick: () => cancellingId && cancelMutation.mutate(cancellingId),
+            disabled: cancelMutation.isPending,
+            children: cancelMutation.isPending ? t("messages.cancelling") : t("invitations.cancelConfirm")
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  TeamPendingInvitations
+};

package/dist/components/teams/TeamSwitchModal.d.ts

@@ -0,0 +1,16 @@
+import type { Team } from '../../lib/teams/types';
+interface TeamSwitchModalProps {
+    isOpen: boolean;
+    fromTeam: Team | null;
+    toTeam: Team | null;
+    onComplete: () => void;
+}
+/**
+ * TeamSwitchModal - Animated modal for team switching transition
+ *
+ * Shows a visual transition when the user switches between teams,
+ * providing clear feedback and triggering data reload.
+ */
+export declare function TeamSwitchModal({ isOpen, fromTeam, toTeam, onComplete, }: TeamSwitchModalProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TeamSwitchModal.d.ts.map