@stackframe/tanstack-start 0.0.1 → 2.8.92

package/dist/esm/components-page/account-settings/settings/delete-account-section.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/settings/delete-account-section.d.ts
+declare function DeleteAccountSection(props?: {
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { DeleteAccountSection };
+//# sourceMappingURL=delete-account-section.d.ts.map

package/dist/esm/components-page/account-settings/settings/delete-account-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete-account-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/settings/delete-account-section.tsx"],"mappings":";;;iBAUgB,oBAAA,CAAqB,KAAA;EAAU,QAAA;AAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/settings/delete-account-section.js

@@ -0,0 +1,68 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Typography } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useStackApp, useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
+
+//#region src/components-page/account-settings/settings/delete-account-section.tsx
+function DeleteAccountSection(props) {
+	const { t } = useTranslation();
+	const user = useUser({ or: props?.mockMode ? "return-null" : "redirect" });
+	const app = useStackApp();
+	const project = app.useProject();
+	const [deleting, setDeleting] = useState(false);
+	if (!(props?.mockMode || project.config.clientUserDeletionEnabled)) return null;
+	const handleDeleteAccount = async () => {
+		if (props?.mockMode) {
+			alert("Mock mode: Account deletion clicked");
+			setDeleting(false);
+			return;
+		}
+		if (user) {
+			await user.delete();
+			await app.redirectToHome();
+		}
+	};
+	return /* @__PURE__ */ jsx(Section, {
+		title: t("Delete Account"),
+		description: t("Permanently remove your account and all associated data"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "stack-scope flex flex-col items-stretch",
+			children: /* @__PURE__ */ jsx(Accordion, {
+				type: "single",
+				collapsible: true,
+				className: "w-full",
+				children: /* @__PURE__ */ jsxs(AccordionItem, {
+					value: "item-1",
+					children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: t("Danger zone") }), /* @__PURE__ */ jsx(AccordionContent, { children: !deleting ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+						variant: "destructive",
+						onClick: () => setDeleting(true),
+						children: t("Delete account")
+					}) }) : /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-2",
+						children: [/* @__PURE__ */ jsx(Typography, {
+							variant: "destructive",
+							children: t("Are you sure you want to delete your account? This action is IRREVERSIBLE and will delete ALL associated data.")
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ jsx(Button, {
+								variant: "destructive",
+								onClick: handleDeleteAccount,
+								children: t("Delete Account")
+							}), /* @__PURE__ */ jsx(Button, {
+								variant: "secondary",
+								onClick: () => setDeleting(false),
+								children: t("Cancel")
+							})]
+						})]
+					}) })]
+				})
+			})
+		})
+	});
+}
+
+//#endregion
+export { DeleteAccountSection };
+//# sourceMappingURL=delete-account-section.js.map

package/dist/esm/components-page/account-settings/settings/delete-account-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"delete-account-section.js","names":[],"sources":["../../../../../src/components-page/account-settings/settings/delete-account-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function DeleteAccountSection(props?: { mockMode?: boolean }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });\n  const app = useStackApp();\n  const project = app.useProject();\n  const [deleting, setDeleting] = useState(false);\n\n  // In mock mode, always show the delete section\n  const showDeleteSection = props?.mockMode || project.config.clientUserDeletionEnabled;\n\n  if (!showDeleteSection) {\n    return null;\n  }\n\n  const handleDeleteAccount = async () => {\n    if (props?.mockMode) {\n      // Mock mode - just show an alert\n      alert(\"Mock mode: Account deletion clicked\");\n      setDeleting(false);\n      return;\n    }\n\n    if (user) {\n      await user.delete();\n      await app.redirectToHome();\n    }\n  };\n\n  return (\n    <Section\n      title={t(\"Delete Account\")}\n      description={t(\"Permanently remove your account and all associated data\")}\n    >\n      <div className='stack-scope flex flex-col items-stretch'>\n        <Accordion type=\"single\" collapsible className=\"w-full\">\n          <AccordionItem value=\"item-1\">\n            <AccordionTrigger>{t(\"Danger zone\")}</AccordionTrigger>\n            <AccordionContent>\n              {!deleting ? (\n                <div>\n                  <Button\n                    variant='destructive'\n                    onClick={() => setDeleting(true)}\n                  >\n                    {t(\"Delete account\")}\n                  </Button>\n                </div>\n              ) : (\n                <div className='flex flex-col gap-2'>\n                  <Typography variant='destructive'>\n                    {t(\"Are you sure you want to delete your account? This action is IRREVERSIBLE and will delete ALL associated data.\")}\n                  </Typography>\n                  <div className='flex gap-2'>\n                    <Button\n                      variant='destructive'\n                      onClick={handleDeleteAccount}\n                    >\n                      {t(\"Delete Account\")}\n                    </Button>\n                    <Button\n                      variant='secondary'\n                      onClick={() => setDeleting(false)}\n                    >\n                      {t(\"Cancel\")}\n                    </Button>\n                  </div>\n                </div>\n              )}\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,qBAAqB,OAAgC;CACnE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,YAAY,CAAC;CAC1E,MAAM,MAAM,aAAa;CACzB,MAAM,UAAU,IAAI,YAAY;CAChC,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAK/C,KAAI,EAFsB,OAAO,YAAY,QAAQ,OAAO,2BAG1D,QAAO;CAGT,MAAM,sBAAsB,YAAY;AACtC,MAAI,OAAO,UAAU;AAEnB,SAAM,sCAAsC;AAC5C,eAAY,MAAM;AAClB;;AAGF,MAAI,MAAM;AACR,SAAM,KAAK,QAAQ;AACnB,SAAM,IAAI,gBAAgB;;;AAI9B,QACE,oBAAC;EACC,OAAO,EAAE,iBAAiB;EAC1B,aAAa,EAAE,0DAA0D;YAEzE,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAU,MAAK;IAAS;IAAY,WAAU;cAC7C,qBAAC;KAAc,OAAM;gBACnB,oBAAC,8BAAkB,EAAE,cAAc,GAAoB,EACvD,oBAAC,8BACE,CAAC,WACA,oBAAC,mBACC,oBAAC;MACC,SAAQ;MACR,eAAe,YAAY,KAAK;gBAE/B,EAAE,iBAAiB;OACb,GACL,GAEN,qBAAC;MAAI,WAAU;iBACb,oBAAC;OAAW,SAAQ;iBACjB,EAAE,iHAAiH;QACzG,EACb,qBAAC;OAAI,WAAU;kBACb,oBAAC;QACC,SAAQ;QACR,SAAS;kBAER,EAAE,iBAAiB;SACb,EACT,oBAAC;QACC,SAAQ;QACR,eAAe,YAAY,MAAM;kBAEhC,EAAE,SAAS;SACL;QACL;OACF,GAES;MACL;KACN;IACR;GACE"}

package/dist/esm/components-page/account-settings/settings/settings-page.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/settings/settings-page.d.ts
+declare function SettingsPage(props?: {
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SettingsPage };
+//# sourceMappingURL=settings-page.d.ts.map

package/dist/esm/components-page/account-settings/settings/settings-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-page.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/settings/settings-page.tsx"],"mappings":";;;iBASgB,YAAA,CAAa,KAAA;EAC3B,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/settings/settings-page.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PageLayout } from "../page-layout.js";
+import { DeleteAccountSection } from "./delete-account-section.js";
+import { SignOutSection } from "./sign-out-section.js";
+
+//#region src/components-page/account-settings/settings/settings-page.tsx
+function SettingsPage(props) {
+	return /* @__PURE__ */ jsxs(PageLayout, { children: [/* @__PURE__ */ jsx(DeleteAccountSection, { mockMode: props?.mockMode }), /* @__PURE__ */ jsx(SignOutSection, { mockMode: props?.mockMode })] });
+}
+
+//#endregion
+export { SettingsPage };
+//# sourceMappingURL=settings-page.js.map

package/dist/esm/components-page/account-settings/settings/settings-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-page.js","names":[],"sources":["../../../../../src/components-page/account-settings/settings/settings-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { PageLayout } from \"../page-layout\";\nimport { DeleteAccountSection } from \"./delete-account-section\";\nimport { SignOutSection } from \"./sign-out-section\";\n\n\nexport function SettingsPage(props?: {\n  mockMode?: boolean,\n}) {\n  return (\n    <PageLayout>\n      <DeleteAccountSection mockMode={props?.mockMode} />\n      <SignOutSection mockMode={props?.mockMode} />\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;AASA,SAAgB,aAAa,OAE1B;AACD,QACE,qBAAC,yBACC,oBAAC,wBAAqB,UAAU,OAAO,WAAY,EACnD,oBAAC,kBAAe,UAAU,OAAO,WAAY,IAClC"}

package/dist/esm/components-page/account-settings/settings/sign-out-section.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/settings/sign-out-section.d.ts
+declare function SignOutSection(props?: {
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SignOutSection };
+//# sourceMappingURL=sign-out-section.d.ts.map

package/dist/esm/components-page/account-settings/settings/sign-out-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sign-out-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/settings/sign-out-section.tsx"],"mappings":";;;iBASgB,cAAA,CAAe,KAAA;EAAU,QAAA;AAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/settings/sign-out-section.js

@@ -0,0 +1,31 @@
+import { Button } from "@stackframe/stack-ui";
+import { jsx } from "react/jsx-runtime";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
+
+//#region src/components-page/account-settings/settings/sign-out-section.tsx
+function SignOutSection(props) {
+	const { t } = useTranslation();
+	const user = useUser({ or: props?.mockMode ? "return-null" : "throw" });
+	const handleSignOut = async () => {
+		if (props?.mockMode) {
+			alert("Mock mode: Sign out clicked");
+			return;
+		}
+		if (user) await user.signOut();
+	};
+	return /* @__PURE__ */ jsx(Section, {
+		title: t("Sign out"),
+		description: t("End your current session"),
+		children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			onClick: handleSignOut,
+			children: t("Sign out")
+		}) })
+	});
+}
+
+//#endregion
+export { SignOutSection };
+//# sourceMappingURL=sign-out-section.js.map

package/dist/esm/components-page/account-settings/settings/sign-out-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sign-out-section.js","names":[],"sources":["../../../../../src/components-page/account-settings/settings/sign-out-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { Button } from \"@stackframe/stack-ui\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function SignOutSection(props?: { mockMode?: boolean }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? \"return-null\" : \"throw\" });\n\n  const handleSignOut = async () => {\n    if (props?.mockMode) {\n      // Mock mode - just show an alert or do nothing\n      alert(\"Mock mode: Sign out clicked\");\n      return;\n    }\n    if (user) {\n      await user.signOut();\n    }\n  };\n\n  return (\n    <Section\n      title={t(\"Sign out\")}\n      description={t(\"End your current session\")}\n    >\n      <div>\n        <Button\n          variant='secondary'\n          onClick={handleSignOut}\n        >\n          {t(\"Sign out\")}\n        </Button>\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,eAAe,OAAgC;CAC7D,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;CAEvE,MAAM,gBAAgB,YAAY;AAChC,MAAI,OAAO,UAAU;AAEnB,SAAM,8BAA8B;AACpC;;AAEF,MAAI,KACF,OAAM,KAAK,SAAS;;AAIxB,QACE,oBAAC;EACC,OAAO,EAAE,WAAW;EACpB,aAAa,EAAE,2BAA2B;YAE1C,oBAAC,mBACC,oBAAC;GACC,SAAQ;GACR,SAAS;aAER,EAAE,WAAW;IACP,GACL;GACE"}

package/dist/esm/components-page/account-settings/teams/leave-team-section.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Team } from "../../..";
+
+//#region src/components-page/account-settings/teams/leave-team-section.d.ts
+declare function LeaveTeamSection(props: {
+  team: Team;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { LeaveTeamSection };
+//# sourceMappingURL=leave-team-section.d.ts.map

package/dist/esm/components-page/account-settings/teams/leave-team-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"leave-team-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/teams/leave-team-section.tsx"],"mappings":";;;;iBAWgB,gBAAA,CAAiB,KAAA;EAAS,IAAA,EAAM,IAAA;AAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/teams/leave-team-section.js

@@ -0,0 +1,46 @@
+import { Button, Typography } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
+
+//#region src/components-page/account-settings/teams/leave-team-section.tsx
+function LeaveTeamSection(props) {
+	const { t } = useTranslation();
+	const user = useUser({ or: "redirect" });
+	const [leaving, setLeaving] = useState(false);
+	return /* @__PURE__ */ jsx(Section, {
+		title: t("Leave Team"),
+		description: t("leave this team and remove your team profile"),
+		children: !leaving ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			onClick: () => setLeaving(true),
+			children: t("Leave team")
+		}) }) : /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ jsx(Typography, {
+				variant: "destructive",
+				children: t("Are you sure you want to leave the team?")
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "destructive",
+					onClick: async () => {
+						await user.leaveTeam(props.team);
+						window.location.reload();
+					},
+					children: t("Leave")
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onClick: () => setLeaving(false),
+					children: t("Cancel")
+				})]
+			})]
+		})
+	});
+}
+
+//#endregion
+export { LeaveTeamSection };
+//# sourceMappingURL=leave-team-section.js.map

package/dist/esm/components-page/account-settings/teams/leave-team-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"leave-team-section.js","names":[],"sources":["../../../../../src/components-page/account-settings/teams/leave-team-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { Team } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function LeaveTeamSection(props: { team: Team }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const [leaving, setLeaving] = useState(false);\n\n  return (\n    <Section\n      title={t(\"Leave Team\")}\n      description={t(\"leave this team and remove your team profile\")}\n    >\n      {!leaving ? (\n        <div>\n          <Button\n            variant='secondary'\n            onClick={() => setLeaving(true)}\n          >\n            {t(\"Leave team\")}\n          </Button>\n        </div>\n      ) : (\n        <div className='flex flex-col gap-2'>\n          <Typography variant='destructive'>\n            {t(\"Are you sure you want to leave the team?\")}\n          </Typography>\n          <div className='flex gap-2'>\n            <Button\n              variant='destructive'\n              onClick={async () => {\n                await user.leaveTeam(props.team);\n                window.location.reload();\n              }}\n            >\n              {t(\"Leave\")}\n            </Button>\n            <Button\n              variant='secondary'\n              onClick={() => setLeaving(false)}\n            >\n              {t(\"Cancel\")}\n            </Button>\n          </div>\n        </div>\n      )}\n    </Section>\n  );\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,iBAAiB,OAAuB;CACtD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,OAAO,QAAQ,EAAE,IAAI,YAAY,CAAC;CACxC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,QACE,oBAAC;EACC,OAAO,EAAE,aAAa;EACtB,aAAa,EAAE,+CAA+C;YAE7D,CAAC,UACA,oBAAC,mBACC,oBAAC;GACC,SAAQ;GACR,eAAe,WAAW,KAAK;aAE9B,EAAE,aAAa;IACT,GACL,GAEN,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAW,SAAQ;cACjB,EAAE,2CAA2C;KACnC,EACb,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,SAAQ;KACR,SAAS,YAAY;AACnB,YAAM,KAAK,UAAU,MAAM,KAAK;AAChC,aAAO,SAAS,QAAQ;;eAGzB,EAAE,QAAQ;MACJ,EACT,oBAAC;KACC,SAAQ;KACR,eAAe,WAAW,MAAM;eAE/B,EAAE,SAAS;MACL;KACL;IACF;GAEA"}

package/dist/esm/components-page/account-settings/teams/team-api-keys-section.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Team } from "../../../lib/stack-app/teams";
+
+//#region src/components-page/account-settings/teams/team-api-keys-section.d.ts
+declare function TeamApiKeysSection(props: {
+  team: Team;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { TeamApiKeysSection };
+//# sourceMappingURL=team-api-keys-section.d.ts.map

package/dist/esm/components-page/account-settings/teams/team-api-keys-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-api-keys-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/teams/team-api-keys-section.tsx"],"mappings":";;;;iBAgBgB,kBAAA,CAAmB,KAAA;EAAS,IAAA,EAAM,IAAA;AAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/teams/team-api-keys-section.js

@@ -0,0 +1,55 @@
+import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
+import { Button } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useStackApp, useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { CreateApiKeyDialog, ShowApiKeyDialog } from "../../../components/api-key-dialogs.js";
+import { ApiKeyTable } from "../../../components/api-key-table.js";
+import { Section } from "../section.js";
+
+//#region src/components-page/account-settings/teams/team-api-keys-section.tsx
+function TeamApiKeysSection(props) {
+	const user = useUser({ or: "redirect" });
+	const team = user.useTeam(props.team.id);
+	const project = useStackApp().useProject();
+	if (!team) throw new StackAssertionError("Team not found");
+	const teamApiKeysEnabled = project.config.allowTeamApiKeys;
+	if (!user.usePermission(props.team, "$manage_api_keys") || !teamApiKeysEnabled) return null;
+	return /* @__PURE__ */ jsx(TeamApiKeysSectionInner, { team: props.team });
+}
+function TeamApiKeysSectionInner(props) {
+	const { t } = useTranslation();
+	const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);
+	const [returnedApiKey, setReturnedApiKey] = useState(null);
+	const apiKeys = props.team.useApiKeys();
+	const CreateDialog = CreateApiKeyDialog;
+	const ShowDialog = ShowApiKeyDialog;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Section, {
+			title: t("API Keys"),
+			description: t("API keys grant programmatic access to your team."),
+			children: /* @__PURE__ */ jsx(Button, {
+				onClick: () => setIsNewApiKeyDialogOpen(true),
+				children: t("Create API Key")
+			})
+		}),
+		/* @__PURE__ */ jsx(ApiKeyTable, { apiKeys }),
+		/* @__PURE__ */ jsx(CreateDialog, {
+			open: isNewApiKeyDialogOpen,
+			onOpenChange: setIsNewApiKeyDialogOpen,
+			onKeyCreated: setReturnedApiKey,
+			createApiKey: async (data) => {
+				return await props.team.createApiKey(data);
+			}
+		}),
+		/* @__PURE__ */ jsx(ShowDialog, {
+			apiKey: returnedApiKey,
+			onClose: () => setReturnedApiKey(null)
+		})
+	] });
+}
+
+//#endregion
+export { TeamApiKeysSection };
+//# sourceMappingURL=team-api-keys-section.js.map

package/dist/esm/components-page/account-settings/teams/team-api-keys-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-api-keys-section.js","names":[],"sources":["../../../../../src/components-page/account-settings/teams/team-api-keys-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { StackAssertionError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { Button } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { CreateApiKeyDialog, ShowApiKeyDialog } from \"../../../components/api-key-dialogs\";\nimport { ApiKeyTable } from \"../../../components/api-key-table\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { TeamApiKeyFirstView } from \"../../../lib/stack-app/api-keys\";\nimport { Team } from \"../../../lib/stack-app/teams\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\n\nexport function TeamApiKeysSection(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const team = user.useTeam(props.team.id);\n  const stackApp = useStackApp();\n  const project = stackApp.useProject();\n\n  if (!team) {\n    throw new StackAssertionError(\"Team not found\");\n  }\n\n  const teamApiKeysEnabled = project.config.allowTeamApiKeys;\n  const manageApiKeysPermission = user.usePermission(props.team, '$manage_api_keys');\n  if (!manageApiKeysPermission || !teamApiKeysEnabled) {\n    return null;\n  }\n\n  return <TeamApiKeysSectionInner team={props.team} />;\n}\n\nfunction TeamApiKeysSectionInner(props: { team: Team }) {\n  const { t } = useTranslation();\n\n  const [isNewApiKeyDialogOpen, setIsNewApiKeyDialogOpen] = useState(false);\n  const [returnedApiKey, setReturnedApiKey] = useState<TeamApiKeyFirstView | null>(null);\n\n  const apiKeys = props.team.useApiKeys();\n\n  const CreateDialog = CreateApiKeyDialog<\"team\">;\n  const ShowDialog = ShowApiKeyDialog<\"team\">;\n\n  return (\n    <>\n      <Section\n        title={t(\"API Keys\")}\n        description={t(\"API keys grant programmatic access to your team.\")}\n      >\n        <Button onClick={() => setIsNewApiKeyDialogOpen(true)}>\n          {t(\"Create API Key\")}\n        </Button>\n      </Section>\n      <ApiKeyTable apiKeys={apiKeys} />\n\n      <CreateDialog\n        open={isNewApiKeyDialogOpen}\n        onOpenChange={setIsNewApiKeyDialogOpen}\n        onKeyCreated={setReturnedApiKey}\n        createApiKey={async (data) => {\n          const apiKey = await props.team.createApiKey(data);\n          return apiKey;\n        }}\n      />\n      <ShowDialog\n        apiKey={returnedApiKey}\n        onClose={() => setReturnedApiKey(null)}\n      />\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAgBA,SAAgB,mBAAmB,OAAuB;CACxD,MAAM,OAAO,QAAQ,EAAE,IAAI,YAAY,CAAC;CACxC,MAAM,OAAO,KAAK,QAAQ,MAAM,KAAK,GAAG;CAExC,MAAM,UADW,aAAa,CACL,YAAY;AAErC,KAAI,CAAC,KACH,OAAM,IAAI,oBAAoB,iBAAiB;CAGjD,MAAM,qBAAqB,QAAQ,OAAO;AAE1C,KAAI,CAD4B,KAAK,cAAc,MAAM,MAAM,mBAAmB,IAClD,CAAC,mBAC/B,QAAO;AAGT,QAAO,oBAAC,2BAAwB,MAAM,MAAM,OAAQ;;AAGtD,SAAS,wBAAwB,OAAuB;CACtD,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,MAAM;CACzE,MAAM,CAAC,gBAAgB,qBAAqB,SAAqC,KAAK;CAEtF,MAAM,UAAU,MAAM,KAAK,YAAY;CAEvC,MAAM,eAAe;CACrB,MAAM,aAAa;AAEnB,QACE;EACE,oBAAC;GACC,OAAO,EAAE,WAAW;GACpB,aAAa,EAAE,mDAAmD;aAElE,oBAAC;IAAO,eAAe,yBAAyB,KAAK;cAClD,EAAE,iBAAiB;KACb;IACD;EACV,oBAAC,eAAqB,UAAW;EAEjC,oBAAC;GACC,MAAM;GACN,cAAc;GACd,cAAc;GACd,cAAc,OAAO,SAAS;AAE5B,WADe,MAAM,MAAM,KAAK,aAAa,KAAK;;IAGpD;EACF,oBAAC;GACC,QAAQ;GACR,eAAe,kBAAkB,KAAK;IACtC;KACD"}

package/dist/esm/components-page/account-settings/teams/team-creation-page.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/teams/team-creation-page.d.ts
+declare function TeamCreationPage(props?: {
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TeamCreationPage };
+//# sourceMappingURL=team-creation-page.d.ts.map

package/dist/esm/components-page/account-settings/teams/team-creation-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-creation-page.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/teams/team-creation-page.tsx"],"mappings":";;;iBAkBgB,gBAAA,CAAiB,KAAA;EAC/B,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/teams/team-creation-page.js

@@ -0,0 +1,65 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useStackApp, useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { PageLayout } from "../page-layout.js";
+import { FormWarningText } from "../../../components/elements/form-warning.js";
+import { Section } from "../section.js";
+import { MessageCard } from "../../../components/message-cards/message-card.js";
+
+//#region src/components-page/account-settings/teams/team-creation-page.tsx
+function TeamCreationPage(props) {
+	const { t } = useTranslation();
+	const { register, handleSubmit, formState: { errors } } = useForm({ resolver: yupResolver(yupObject({ displayName: yupString().defined().nonEmpty(t("Please enter a team name")) })) });
+	const app = useStackApp();
+	const project = app.useProject();
+	const user = useUser({ or: props?.mockMode ? "return-null" : "redirect" });
+	const navigate = app.useNavigate();
+	const [loading, setLoading] = useState(false);
+	if (props?.mockMode) return /* @__PURE__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx(MessageCard, { title: t("Team creation is disabled in demo mode") }) });
+	if (!project.config.clientTeamCreationEnabled) return /* @__PURE__ */ jsx(MessageCard, { title: t("Team creation is not enabled") });
+	const onSubmit = async (data) => {
+		if (props?.mockMode) {
+			alert("Mock mode: Team creation clicked");
+			return;
+		}
+		setLoading(true);
+		let team;
+		try {
+			team = await user?.createTeam({ displayName: data.displayName });
+		} finally {
+			setLoading(false);
+		}
+		if (team) navigate(`#team-${team.id}`);
+	};
+	return /* @__PURE__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx(Section, {
+		title: t("Create a Team"),
+		description: t("Enter a display name for your new team"),
+		children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+			noValidate: true,
+			className: "flex gap-2 flex-col sm:flex-row",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col flex-1",
+				children: [/* @__PURE__ */ jsx(Input, {
+					id: "displayName",
+					type: "text",
+					...register("displayName")
+				}), /* @__PURE__ */ jsx(FormWarningText, { text: errors.displayName?.message?.toString() })]
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				loading,
+				children: t("Create")
+			})]
+		})
+	}) });
+}
+
+//#endregion
+export { TeamCreationPage };
+//# sourceMappingURL=team-creation-page.js.map

package/dist/esm/components-page/account-settings/teams/team-creation-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-creation-page.js","names":[],"sources":["../../../../../src/components-page/account-settings/teams/team-creation-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { MessageCard } from \"../../../components/message-cards/message-card\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { PageLayout } from \"../page-layout\";\nimport { Section } from \"../section\";\n\nexport function TeamCreationPage(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n\n  const teamCreationSchema = yupObject({\n    displayName: yupString().defined().nonEmpty(t(\"Please enter a team name\")),\n  });\n\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(teamCreationSchema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });\n  const navigate = app.useNavigate();\n  const [loading, setLoading] = useState(false);\n\n  // In mock mode, show that team creation is disabled\n  if (props?.mockMode) {\n    return (\n      <PageLayout>\n        <MessageCard title={t(\"Team creation is disabled in demo mode\")} />\n      </PageLayout>\n    );\n  }\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return <MessageCard title={t(\"Team creation is not enabled\")} />;\n  }\n\n  const onSubmit = async (data: yup.InferType<typeof teamCreationSchema>) => {\n    if (props?.mockMode) {\n      // Mock mode - just show an alert\n      alert(\"Mock mode: Team creation clicked\");\n      return;\n    }\n\n    setLoading(true);\n\n    let team;\n    try {\n      team = await user?.createTeam({ displayName: data.displayName });\n    } finally {\n      setLoading(false);\n    }\n\n    if (team) {\n      navigate(`#team-${team.id}`);\n    }\n  };\n\n  return (\n    <PageLayout>\n      <Section title={t(\"Create a Team\")} description={t(\"Enter a display name for your new team\")}>\n        <form\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n          className='flex gap-2 flex-col sm:flex-row'\n        >\n          <div className='flex flex-col flex-1'>\n            <Input\n              id=\"displayName\"\n              type=\"text\"\n              {...register(\"displayName\")}\n            />\n            <FormWarningText text={errors.displayName?.message?.toString()} />\n          </div>\n          <Button type=\"submit\" loading={loading}>{t(\"Create\")}</Button>\n        </form>\n      </Section>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,SAAgB,iBAAiB,OAE9B;CACD,MAAM,EAAE,MAAM,gBAAgB;CAM9B,MAAM,EAAE,UAAU,cAAc,WAAW,EAAE,aAAa,QAAQ,EAChE,UAAU,YALe,UAAU,EACnC,aAAa,WAAW,CAAC,SAAS,CAAC,SAAS,EAAE,2BAA2B,CAAC,EAC3E,CAAC,CAGyC,EAC1C,CAAC;CACF,MAAM,MAAM,aAAa;CACzB,MAAM,UAAU,IAAI,YAAY;CAChC,MAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,YAAY,CAAC;CAC1E,MAAM,WAAW,IAAI,aAAa;CAClC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAG7C,KAAI,OAAO,SACT,QACE,oBAAC,wBACC,oBAAC,eAAY,OAAO,EAAE,yCAAyC,GAAI,GACxD;AAIjB,KAAI,CAAC,QAAQ,OAAO,0BAClB,QAAO,oBAAC,eAAY,OAAO,EAAE,+BAA+B,GAAI;CAGlE,MAAM,WAAW,OAAO,SAAmD;AACzE,MAAI,OAAO,UAAU;AAEnB,SAAM,mCAAmC;AACzC;;AAGF,aAAW,KAAK;EAEhB,IAAI;AACJ,MAAI;AACF,UAAO,MAAM,MAAM,WAAW,EAAE,aAAa,KAAK,aAAa,CAAC;YACxD;AACR,cAAW,MAAM;;AAGnB,MAAI,KACF,UAAS,SAAS,KAAK,KAAK;;AAIhC,QACE,oBAAC,wBACC,oBAAC;EAAQ,OAAO,EAAE,gBAAgB;EAAE,aAAa,EAAE,yCAAyC;YAC1F,qBAAC;GACC,WAAU,MAAK,2BAA2B,aAAa,SAAS,CAAC,EAAE,CAAC;GACpE;GACA,WAAU;cAEV,qBAAC;IAAI,WAAU;eACb,oBAAC;KACC,IAAG;KACH,MAAK;KACL,GAAI,SAAS,cAAc;MAC3B,EACF,oBAAC,mBAAgB,MAAM,OAAO,aAAa,SAAS,UAAU,GAAI;KAC9D,EACN,oBAAC;IAAO,MAAK;IAAkB;cAAU,EAAE,SAAS;KAAU;IACzD;GACC,GACC"}

package/dist/esm/components-page/account-settings/teams/team-display-name-section.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Team } from "../../..";
+
+//#region src/components-page/account-settings/teams/team-display-name-section.d.ts
+declare function TeamDisplayNameSection(props: {
+  team: Team;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { TeamDisplayNameSection };
+//# sourceMappingURL=team-display-name-section.d.ts.map

package/dist/esm/components-page/account-settings/teams/team-display-name-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-display-name-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/teams/team-display-name-section.tsx"],"mappings":";;;;iBAUgB,sBAAA,CAAuB,KAAA;EAAS,IAAA,EAAM,IAAA;AAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/teams/team-display-name-section.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
+import { EditableText } from "../editable-text.js";
+
+//#region src/components-page/account-settings/teams/team-display-name-section.tsx
+function TeamDisplayNameSection(props) {
+	const { t } = useTranslation();
+	if (!useUser({ or: "redirect" }).usePermission(props.team, "$update_team")) return null;
+	return /* @__PURE__ */ jsx(Section, {
+		title: t("Team display name"),
+		description: t("Change the display name of your team"),
+		children: /* @__PURE__ */ jsx(EditableText, {
+			value: props.team.displayName,
+			onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
+		})
+	});
+}
+
+//#endregion
+export { TeamDisplayNameSection };
+//# sourceMappingURL=team-display-name-section.js.map

package/dist/esm/components-page/account-settings/teams/team-display-name-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-display-name-section.js","names":[],"sources":["../../../../../src/components-page/account-settings/teams/team-display-name-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { Team } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { EditableText } from \"../editable-text\";\nimport { Section } from \"../section\";\n\nexport function TeamDisplayNameSection(props: { team: Team }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const updateTeamPermission = user.usePermission(props.team, '$update_team');\n\n  if (!updateTeamPermission) {\n    return null;\n  }\n\n  return (\n    <Section\n      title={t(\"Team display name\")}\n      description={t(\"Change the display name of your team\")}\n    >\n      <EditableText\n        value={props.team.displayName}\n        onSave={async (newDisplayName) => await props.team.update({ displayName: newDisplayName })}\n      />\n    </Section>\n  );\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,uBAAuB,OAAuB;CAC5D,MAAM,EAAE,MAAM,gBAAgB;AAI9B,KAAI,CAHS,QAAQ,EAAE,IAAI,YAAY,CAAC,CACN,cAAc,MAAM,MAAM,eAAe,CAGzE,QAAO;AAGT,QACE,oBAAC;EACC,OAAO,EAAE,oBAAoB;EAC7B,aAAa,EAAE,uCAAuC;YAEtD,oBAAC;GACC,OAAO,MAAM,KAAK;GAClB,QAAQ,OAAO,mBAAmB,MAAM,MAAM,KAAK,OAAO,EAAE,aAAa,gBAAgB,CAAC;IAC1F;GACM"}

package/dist/esm/components-page/account-settings/teams/team-member-invitation-section.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Team } from "../../..";
+
+//#region src/components-page/account-settings/teams/team-member-invitation-section.d.ts
+declare function TeamMemberInvitationSection(props: {
+  team: Team;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { TeamMemberInvitationSection };
+//# sourceMappingURL=team-member-invitation-section.d.ts.map

package/dist/esm/components-page/account-settings/teams/team-member-invitation-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-member-invitation-section.d.ts","names":[],"sources":["../../../../../src/components-page/account-settings/teams/team-member-invitation-section.tsx"],"mappings":";;;;iBAkBgB,2BAAA,CAA4B,KAAA;EAAS,IAAA,EAAM,IAAA;AAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components-page/account-settings/teams/team-member-invitation-section.js

@@ -0,0 +1,112 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import { strictEmailSchema, yupObject } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Trash } from "lucide-react";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { FormWarningText } from "../../../components/elements/form-warning.js";
+import { Section } from "../section.js";
+
+//#region src/components-page/account-settings/teams/team-member-invitation-section.tsx
+function TeamMemberInvitationSection(props) {
+	if (!useUser({ or: "redirect" }).usePermission(props.team, "$invite_members")) return null;
+	return /* @__PURE__ */ jsx(MemberInvitationSectionInner, { team: props.team });
+}
+function MemberInvitationsSectionInvitationsList(props) {
+	const user = useUser({ or: "redirect" });
+	const { t } = useTranslation();
+	const invitationsToShow = props.team.useInvitations();
+	const removeMemberPermission = user.usePermission(props.team, "$remove_members");
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Table, {
+		className: "mt-6",
+		children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+			/* @__PURE__ */ jsx(TableHead, {
+				className: "w-[200px]",
+				children: t("Outstanding invitations")
+			}),
+			/* @__PURE__ */ jsx(TableHead, {
+				className: "w-[60px]",
+				children: t("Expires")
+			}),
+			/* @__PURE__ */ jsx(TableHead, { className: "w-[36px] max-w-[36px]" })
+		] }) }), /* @__PURE__ */ jsxs(TableBody, { children: [invitationsToShow.map((invitation, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
+			/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: invitation.recipientEmail }) }),
+			/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, {
+				variant: "secondary",
+				children: invitation.expiresAt.toLocaleString()
+			}) }),
+			/* @__PURE__ */ jsx(TableCell, {
+				align: "right",
+				className: "max-w-[36px]",
+				children: removeMemberPermission && /* @__PURE__ */ jsx(Button, {
+					onClick: async () => await invitation.revoke(),
+					size: "icon",
+					variant: "ghost",
+					children: /* @__PURE__ */ jsx(Trash, { className: "w-4 h-4" })
+				})
+			})
+		] }, invitation.id)), invitationsToShow.length === 0 && /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+			colSpan: 3,
+			children: /* @__PURE__ */ jsx(Typography, {
+				variant: "secondary",
+				children: t("No outstanding invitations")
+			})
+		}) })] })]
+	}) });
+}
+function MemberInvitationSectionInner(props) {
+	const user = useUser({ or: "redirect" });
+	const { t } = useTranslation();
+	const readMemberPermission = user.usePermission(props.team, "$read_members");
+	const { register, handleSubmit, formState: { errors }, watch } = useForm({ resolver: yupResolver(yupObject({ email: strictEmailSchema(t("Please enter a valid email address")).defined().nonEmpty(t("Please enter an email address")) })) });
+	const [loading, setLoading] = useState(false);
+	const [invitedEmail, setInvitedEmail] = useState(null);
+	const onSubmit = async (data) => {
+		setLoading(true);
+		try {
+			await props.team.inviteUser({ email: data.email });
+			setInvitedEmail(data.email);
+		} finally {
+			setLoading(false);
+		}
+	};
+	useEffect(() => {
+		setInvitedEmail(null);
+	}, [watch("email")]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Section, {
+		title: t("Invite member"),
+		description: t("Invite a user to your team through email"),
+		children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+			noValidate: true,
+			className: "w-full",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-4 sm:flex-row w-full",
+					children: [/* @__PURE__ */ jsx(Input, {
+						placeholder: t("Email"),
+						...register("email")
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						loading,
+						children: t("Invite User")
+					})]
+				}),
+				/* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
+				invitedEmail && /* @__PURE__ */ jsxs(Typography, {
+					type: "label",
+					variant: "secondary",
+					children: ["Invited ", invitedEmail]
+				})
+			]
+		})
+	}), readMemberPermission && /* @__PURE__ */ jsx(MemberInvitationsSectionInvitationsList, { team: props.team })] });
+}
+
+//#endregion
+export { TeamMemberInvitationSection };
+//# sourceMappingURL=team-member-invitation-section.js.map

package/dist/esm/components-page/account-settings/teams/team-member-invitation-section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-member-invitation-section.js","names":[],"sources":["../../../../../src/components-page/account-settings/teams/team-member-invitation-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from \"@stackframe/stack-ui\";\nimport { Trash } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { Team } from \"../../..\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function TeamMemberInvitationSection(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!inviteMemberPermission) {\n    return null;\n  }\n\n  return <MemberInvitationSectionInner team={props.team} />;\n}\n\nfunction MemberInvitationsSectionInvitationsList(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const { t } = useTranslation();\n  const invitationsToShow = props.team.useInvitations();\n  const removeMemberPermission = user.usePermission(props.team, '$remove_members');\n\n  return <>\n    <Table className='mt-6'>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[200px]\">{t(\"Outstanding invitations\")}</TableHead>\n          <TableHead className=\"w-[60px]\">{t(\"Expires\")}</TableHead>\n          <TableHead className=\"w-[36px] max-w-[36px]\"></TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invitationsToShow.map((invitation, i) => (\n          <TableRow key={invitation.id}>\n            <TableCell>\n              <Typography>{invitation.recipientEmail}</Typography>\n            </TableCell>\n            <TableCell>\n              <Typography variant='secondary'>{invitation.expiresAt.toLocaleString()}</Typography>\n            </TableCell>\n            <TableCell align='right' className='max-w-[36px]'>\n              {removeMemberPermission && (\n                <Button onClick={async () => await invitation.revoke()} size='icon' variant='ghost'>\n                  <Trash className=\"w-4 h-4\" />\n                </Button>\n              )}\n            </TableCell>\n          </TableRow>\n        ))}\n        {invitationsToShow.length === 0 && <TableRow>\n          <TableCell colSpan={3}>\n            <Typography variant='secondary'>{t(\"No outstanding invitations\")}</Typography>\n          </TableCell>\n        </TableRow>}\n      </TableBody>\n    </Table>\n  </>;\n}\n\nfunction MemberInvitationSectionInner(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const { t } = useTranslation();\n  const readMemberPermission = user.usePermission(props.team, '$read_members');\n\n  const invitationSchema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email address')).defined().nonEmpty(t('Please enter an email address')),\n  });\n\n  const { register, handleSubmit, formState: { errors }, watch } = useForm({\n    resolver: yupResolver(invitationSchema)\n  });\n  const [loading, setLoading] = useState(false);\n  const [invitedEmail, setInvitedEmail] = useState<string | null>(null);\n\n  const onSubmit = async (data: yup.InferType<typeof invitationSchema>) => {\n    setLoading(true);\n\n    try {\n      await props.team.inviteUser({ email: data.email });\n      setInvitedEmail(data.email);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    setInvitedEmail(null);\n  }, [watch('email')]);\n\n  return (\n    <>\n      <Section\n        title={t(\"Invite member\")}\n        description={t(\"Invite a user to your team through email\")}\n      >\n        <form\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n          className='w-full'\n        >\n          <div className=\"flex flex-col gap-4 sm:flex-row w-full\">\n            <Input\n              placeholder={t(\"Email\")}\n              {...register(\"email\")}\n            />\n            <Button type=\"submit\" loading={loading}>{t(\"Invite User\")}</Button>\n          </div>\n          <FormWarningText text={errors.email?.message?.toString()} />\n          {invitedEmail && <Typography type='label' variant='secondary'>Invited {invitedEmail}</Typography>}\n        </form>\n      </Section>\n      {readMemberPermission && <MemberInvitationsSectionInvitationsList team={props.team} />}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,SAAgB,4BAA4B,OAAuB;AAIjE,KAAI,CAHS,QAAQ,EAAE,IAAI,YAAY,CAAC,CACJ,cAAc,MAAM,MAAM,kBAAkB,CAG9E,QAAO;AAGT,QAAO,oBAAC,gCAA6B,MAAM,MAAM,OAAQ;;AAG3D,SAAS,wCAAwC,OAAuB;CACtE,MAAM,OAAO,QAAQ,EAAE,IAAI,YAAY,CAAC;CACxC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,oBAAoB,MAAM,KAAK,gBAAgB;CACrD,MAAM,yBAAyB,KAAK,cAAc,MAAM,MAAM,kBAAkB;AAEhF,QAAO,0CACL,qBAAC;EAAM,WAAU;aACf,oBAAC,yBACC,qBAAC;GACC,oBAAC;IAAU,WAAU;cAAa,EAAE,0BAA0B;KAAa;GAC3E,oBAAC;IAAU,WAAU;cAAY,EAAE,UAAU;KAAa;GAC1D,oBAAC,aAAU,WAAU,0BAAoC;MAChD,GACC,EACd,qBAAC,wBACE,kBAAkB,KAAK,YAAY,MAClC,qBAAC;GACC,oBAAC,uBACC,oBAAC,wBAAY,WAAW,iBAA4B,GAC1C;GACZ,oBAAC,uBACC,oBAAC;IAAW,SAAQ;cAAa,WAAW,UAAU,gBAAgB;KAAc,GAC1E;GACZ,oBAAC;IAAU,OAAM;IAAQ,WAAU;cAChC,0BACC,oBAAC;KAAO,SAAS,YAAY,MAAM,WAAW,QAAQ;KAAE,MAAK;KAAO,SAAQ;eAC1E,oBAAC,SAAM,WAAU,YAAY;MACtB;KAED;OAbC,WAAW,GAcf,CACX,EACD,kBAAkB,WAAW,KAAK,oBAAC,sBAClC,oBAAC;GAAU,SAAS;aAClB,oBAAC;IAAW,SAAQ;cAAa,EAAE,6BAA6B;KAAc;IACpE,GACH,IACD;GACN,GACP;;AAGL,SAAS,6BAA6B,OAAuB;CAC3D,MAAM,OAAO,QAAQ,EAAE,IAAI,YAAY,CAAC;CACxC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,uBAAuB,KAAK,cAAc,MAAM,MAAM,gBAAgB;CAM5E,MAAM,EAAE,UAAU,cAAc,WAAW,EAAE,UAAU,UAAU,QAAQ,EACvE,UAAU,YALa,UAAU,EACjC,OAAO,kBAAkB,EAAE,qCAAqC,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,gCAAgC,CAAC,EACzH,CAAC,CAGuC,EACxC,CAAC;CACF,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,cAAc,mBAAmB,SAAwB,KAAK;CAErE,MAAM,WAAW,OAAO,SAAiD;AACvE,aAAW,KAAK;AAEhB,MAAI;AACF,SAAM,MAAM,KAAK,WAAW,EAAE,OAAO,KAAK,OAAO,CAAC;AAClD,mBAAgB,KAAK,MAAM;YACnB;AACR,cAAW,MAAM;;;AAIrB,iBAAgB;AACd,kBAAgB,KAAK;IACpB,CAAC,MAAM,QAAQ,CAAC,CAAC;AAEpB,QACE,4CACE,oBAAC;EACC,OAAO,EAAE,gBAAgB;EACzB,aAAa,EAAE,2CAA2C;YAE1D,qBAAC;GACC,WAAU,MAAK,2BAA2B,aAAa,SAAS,CAAC,EAAE,CAAC;GACpE;GACA,WAAU;;IAEV,qBAAC;KAAI,WAAU;gBACb,oBAAC;MACC,aAAa,EAAE,QAAQ;MACvB,GAAI,SAAS,QAAQ;OACrB,EACF,oBAAC;MAAO,MAAK;MAAkB;gBAAU,EAAE,cAAc;OAAU;MAC/D;IACN,oBAAC,mBAAgB,MAAM,OAAO,OAAO,SAAS,UAAU,GAAI;IAC3D,gBAAgB,qBAAC;KAAW,MAAK;KAAQ,SAAQ;gBAAY,YAAS;MAA0B;;IAC5F;GACC,EACT,wBAAwB,oBAAC,2CAAwC,MAAM,MAAM,OAAQ,IACrF"}