@stackframe/tanstack-start 0.0.1 → 2.8.91

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

@@ -0,0 +1,267 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-shared/dist/utils/promises");
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let ___index_js = require("../index.js");
+let ___lib_translations_js = require("../lib/translations.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let ___components_elements_maybe_full_page_js = require("../components/elements/maybe-full-page.js");
+let ___components_elements_sidebar_layout_js = require("../components/elements/sidebar-layout.js");
+let ___components_team_icon_js = require("../components/team-icon.js");
+let __account_settings_active_sessions_active_sessions_page_js = require("./account-settings/active-sessions/active-sessions-page.js");
+let __account_settings_api_keys_api_keys_page_js = require("./account-settings/api-keys/api-keys-page.js");
+let __account_settings_email_and_auth_email_and_auth_page_js = require("./account-settings/email-and-auth/email-and-auth-page.js");
+let __account_settings_notifications_notifications_page_js = require("./account-settings/notifications/notifications-page.js");
+let __account_settings_profile_page_profile_page_js = require("./account-settings/profile-page/profile-page.js");
+let __account_settings_payments_payments_page_js = require("./account-settings/payments/payments-page.js");
+let __account_settings_settings_settings_page_js = require("./account-settings/settings/settings-page.js");
+let __account_settings_teams_team_creation_page_js = require("./account-settings/teams/team-creation-page.js");
+let __account_settings_teams_team_page_js = require("./account-settings/teams/team-page.js");
+
+//#region src/components-page/account-settings.tsx
+const iconMap = {
+	Contact: lucide_react.Contact,
+	ShieldCheck: lucide_react.ShieldCheck,
+	Bell: lucide_react.Bell,
+	Monitor: lucide_react.Monitor,
+	Key: lucide_react.Key,
+	Settings: lucide_react.Settings,
+	CirclePlus: lucide_react.CirclePlus,
+	CreditCard: lucide_react.CreditCard
+};
+const Icon = ({ name }) => {
+	const LucideIcon = iconMap[name];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LucideIcon, { className: "mr-2 h-4 w-4" });
+};
+function AccountSettings(props) {
+	const { t } = (0, ___lib_translations_js.useTranslation)();
+	const userFromHook = (0, ___index_js.useUser)({ or: props.mockUser ? "return-null" : "redirect" });
+	const projectFromHook = (0, ___index_js.useStackApp)().useProject();
+	const user = props.mockUser ? {
+		useTeams: () => [],
+		useBilling: () => ({ hasCustomer: false })
+	} : userFromHook;
+	const project = props.mockProject || projectFromHook;
+	const teams = user?.useTeams() || [];
+	user?.useBilling();
+	const teamsById = (0, react.useMemo)(() => teams, [(0, react.useMemo)(() => teams.map((team) => team.id).join("|"), [teams])]);
+	const userRef = (0, react.useRef)(userFromHook ?? null);
+	const userId = userFromHook?.id ?? null;
+	const [paymentsAvailability, setPaymentsAvailability] = (0, react.useState)(() => ({
+		userHasProducts: false,
+		teamIdsWithProducts: /* @__PURE__ */ new Set(),
+		isReady: !!props.mockUser
+	}));
+	(0, react.useEffect)(() => {
+		userRef.current = userFromHook ?? null;
+	}, [userFromHook]);
+	(0, react.useEffect)(() => {
+		if (props.mockUser || !userId) return;
+		let cancelled = false;
+		(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronouslyWithAlert)(async () => {
+			const currentUser = userRef.current;
+			if (!currentUser || currentUser.id !== userId) return;
+			const [userProducts, teamsWithProducts] = await Promise.all([currentUser.listProducts({ limit: 1 }), Promise.all(teamsById.map(async (team) => {
+				if (!await currentUser.hasPermission(team, "team_admin")) return null;
+				return (await team.listProducts({ limit: 1 })).some((product) => product.customerType === "team") ? team.id : null;
+			}))]);
+			if (cancelled) return;
+			setPaymentsAvailability({
+				userHasProducts: userProducts.some((product) => product.customerType === "user"),
+				teamIdsWithProducts: new Set(teamsWithProducts.filter((id) => id !== null)),
+				isReady: true
+			});
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		props.mockUser,
+		teamsById,
+		userId
+	]);
+	const teamsWithProducts = (0, react.useMemo)(() => teamsById.filter((team) => paymentsAvailability.teamIdsWithProducts.has(team.id)), [paymentsAvailability.teamIdsWithProducts, teamsById]);
+	const shouldShowPaymentsTab = props.mockUser || paymentsAvailability.isReady && (paymentsAvailability.userHasProducts || teamsWithProducts.length > 0);
+	if (!props.mockUser && !userFromHook) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_elements_maybe_full_page_js.MaybeFullPage, {
+		fullPage: !!props.fullPage,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "self-stretch flex-grow w-full",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_elements_sidebar_layout_js.SidebarLayout, {
+				items: [
+					{
+						title: t("My Profile"),
+						type: "item",
+						id: "profile",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "Contact" }),
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__account_settings_profile_page_profile_page_js.ProfilePage, { mockUser: props.mockUser })
+					},
+					{
+						title: t("Emails & Auth"),
+						type: "item",
+						id: "auth",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "ShieldCheck" }),
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+							fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmailsAndAuthPageSkeleton, {}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__account_settings_email_and_auth_email_and_auth_page_js.EmailsAndAuthPage, { mockMode: !!props.mockUser })
+						})
+					},
+					{
+						title: t("Notifications"),
+						type: "item",
+						id: "notifications",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "Bell" }),
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+							fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NotificationsPageSkeleton, {}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__account_settings_notifications_notifications_page_js.NotificationsPage, {})
+						})
+					},
+					{
+						title: t("Active Sessions"),
+						type: "item",
+						id: "sessions",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "Monitor" }),
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+							fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActiveSessionsPageSkeleton, {}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__account_settings_active_sessions_active_sessions_page_js.ActiveSessionsPage, {
+								mockSessions: props.mockSessions,
+								mockMode: !!props.mockUser
+							})
+						})
+					},
+					...project.config.allowUserApiKeys ? [{
+						title: t("API Keys"),
+						type: "item",
+						id: "api-keys",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "Key" }),
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+							fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ApiKeysPageSkeleton, {}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__account_settings_api_keys_api_keys_page_js.ApiKeysPage, {
+								mockApiKeys: props.mockApiKeys,
+								mockMode: !!props.mockUser
+							})
+						})
+					}] : [],
+					...shouldShowPaymentsTab ? [{
+						title: t("Payments"),
+						type: "item",
+						id: "payments",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "CreditCard" }),
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+							fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaymentsPageSkeleton, {}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__account_settings_payments_payments_page_js.PaymentsPage, {
+								mockMode: !!props.mockUser,
+								allowPersonal: paymentsAvailability.userHasProducts,
+								availableTeams: teamsWithProducts
+							})
+						})
+					}] : [],
+					{
+						title: t("Settings"),
+						type: "item",
+						id: "settings",
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "Settings" }),
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__account_settings_settings_settings_page_js.SettingsPage, { mockMode: !!props.mockUser })
+					},
+					...props.extraItems?.map((item) => ({
+						title: item.title,
+						type: "item",
+						id: item.id,
+						icon: (() => {
+							const iconName = item.iconName;
+							if (iconName) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: iconName });
+							else if (item.icon) return item.icon;
+							return null;
+						})(),
+						content: item.content
+					})) || [],
+					...teams.length > 0 || project.config.clientTeamCreationEnabled ? [{
+						title: t("Teams"),
+						type: "divider"
+					}] : [],
+					...teams.map((team) => ({
+						title: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex gap-2 items-center w-full",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_team_icon_js.TeamIcon, { team }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+								className: "max-w-[320px] md:w-[90%] truncate",
+								children: team.displayName
+							})]
+						}),
+						type: "item",
+						id: `team-${team.id}`,
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+							fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TeamPageSkeleton, {}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__account_settings_teams_team_page_js.TeamPage, { team })
+						})
+					})),
+					...project.config.clientTeamCreationEnabled ? [{
+						title: t("Create a team"),
+						icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "CirclePlus" }),
+						type: "item",
+						id: "team-creation",
+						content: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+							fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TeamCreationSkeleton, {}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__account_settings_teams_team_creation_page_js.TeamCreationPage, { mockMode: !!props.mockUser })
+						})
+					}] : []
+				].filter((p) => p.type === "divider" || p.content),
+				title: t("Account Settings")
+			})
+		})
+	});
+}
+function PageLayout(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex flex-col gap-6",
+		children: props.children
+	});
+}
+function EmailsAndAuthPageSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageLayout, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" })
+	] });
+}
+function ActiveSessionsPageSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageLayout, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-6 w-48 mb-2" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-4 w-full mb-4" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })
+	] });
+}
+function ApiKeysPageSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageLayout, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })] });
+}
+function PaymentsPageSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageLayout, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-6 w-48 mb-2" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })
+	] });
+}
+function TeamPageSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageLayout, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-[200px] w-full mt-1 rounded-md" })
+	] });
+}
+function TeamCreationSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageLayout, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" })] });
+}
+function NotificationsPageSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PageLayout, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" })] });
+}
+
+//#endregion
+exports.AccountSettings = AccountSettings;
+//# sourceMappingURL=account-settings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"account-settings.js","names":["MaybeFullPage","SidebarLayout","ProfilePage","Suspense","EmailsAndAuthPage","NotificationsPage","ActiveSessionsPage","ApiKeysPage","PaymentsPage","SettingsPage","TeamIcon","Typography","TeamPage","TeamCreationPage","Skeleton"],"sources":["../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Skeleton, Typography } from '@stackframe/stack-ui';\nimport { Contact, ShieldCheck, Bell, Monitor, Key, Settings, CirclePlus, CreditCard } from 'lucide-react';\nimport React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useStackApp, useUser } from '..';\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { TeamIcon } from '../components/team-icon';\nimport { useTranslation } from \"../lib/translations\";\nimport { ActiveSessionsPage } from \"./account-settings/active-sessions/active-sessions-page\";\nimport { ApiKeysPage } from \"./account-settings/api-keys/api-keys-page\";\nimport { EmailsAndAuthPage } from './account-settings/email-and-auth/email-and-auth-page';\nimport { NotificationsPage } from './account-settings/notifications/notifications-page';\nimport { ProfilePage } from \"./account-settings/profile-page/profile-page\";\nimport { PaymentsPage } from \"./account-settings/payments/payments-page\";\nimport { SettingsPage } from './account-settings/settings/settings-page';\nimport { TeamCreationPage } from './account-settings/teams/team-creation-page';\nimport { TeamPage } from './account-settings/teams/team-page';\n\nconst iconMap = {\n  Contact,\n  ShieldCheck,\n  Bell,\n  Monitor,\n  Key,\n  Settings,\n  CirclePlus,\n  CreditCard,\n} as const;\n\nconst Icon = ({ name }: { name: keyof typeof iconMap }) => {\n  const LucideIcon = iconMap[name];\n  return <LucideIcon className=\"mr-2 h-4 w-4\"/>;\n};\n\nexport function AccountSettings(props: {\n  fullPage?: boolean,\n  extraItems?: ({\n    title: string,\n    content: React.ReactNode,\n    id: string,\n  } & ({\n    icon?: React.ReactNode,\n  } | {\n    iconName?: keyof typeof iconMap,\n  }))[],\n  mockUser?: {\n    displayName?: string,\n    profileImageUrl?: string,\n  },\n  mockApiKeys?: Array<{\n    id: string,\n    description: string,\n    createdAt: string,\n    expiresAt?: string,\n    manuallyRevokedAt?: string,\n  }>,\n  mockProject?: {\n    config: {\n      allowUserApiKeys: boolean,\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n  mockSessions?: Array<{\n    id: string,\n    isCurrentSession: boolean,\n    isImpersonation?: boolean,\n    createdAt: string,\n    lastUsedAt?: string,\n    geoInfo?: {\n      ip?: string,\n      cityName?: string,\n    },\n  }>,\n}) {\n  const { t } = useTranslation();\n  const userFromHook = useUser({ or: props.mockUser ? 'return-null' : 'redirect' });\n  const stackApp = useStackApp();\n  const projectFromHook = stackApp.useProject();\n\n  // Use mock data if provided, otherwise use real data\n  const user = props.mockUser ? {\n    useTeams: () => [], // Mock empty teams for now\n    useBilling: () => ({ hasCustomer: false }), // Mock empty billing for now\n  } : userFromHook;\n\n  const project = props.mockProject || projectFromHook;\n  const teams = user?.useTeams() || [];\n  const billing = user?.useBilling() || null;\n  const teamsKey = useMemo(() => teams.map(team => team.id).join(\"|\"), [teams]);\n  const teamsById = useMemo(() => teams, [teamsKey]);\n  const userRef = useRef(userFromHook ?? null);\n  const userId = userFromHook?.id ?? null;\n  const [paymentsAvailability, setPaymentsAvailability] = useState<{\n    userHasProducts: boolean,\n    teamIdsWithProducts: Set<string>,\n    isReady: boolean,\n  }>(() => ({\n    userHasProducts: false,\n    teamIdsWithProducts: new Set<string>(),\n    isReady: !!props.mockUser,\n  }));\n\n  useEffect(() => {\n    userRef.current = userFromHook ?? null;\n  }, [userFromHook]);\n\n  useEffect(() => {\n    if (props.mockUser || !userId) {\n      return;\n    }\n    let cancelled = false;\n    runAsynchronouslyWithAlert(async () => {\n      const currentUser = userRef.current;\n      if (!currentUser || currentUser.id !== userId) {\n        return;\n      }\n      const [userProducts, teamsWithProducts] = await Promise.all([\n        currentUser.listProducts({ limit: 1 }),\n        Promise.all(teamsById.map(async (team) => {\n          const isTeamAdmin = await currentUser.hasPermission(team, \"team_admin\");\n          if (!isTeamAdmin) {\n            return null;\n          }\n          const teamProducts = await team.listProducts({ limit: 1 });\n          const hasTeamProducts = teamProducts.some((product) => product.customerType === \"team\");\n          return hasTeamProducts ? team.id : null;\n        })),\n      ]);\n      if (cancelled) {\n        return;\n      }\n      const userHasProducts = userProducts.some((product) => product.customerType === \"user\");\n      const teamIdsWithProducts = new Set<string>(teamsWithProducts.filter((id): id is string => id !== null));\n      setPaymentsAvailability({\n        userHasProducts,\n        teamIdsWithProducts,\n        isReady: true,\n      });\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [props.mockUser, teamsById, userId]);\n\n  const teamsWithProducts = useMemo(\n    () => teamsById.filter(team => paymentsAvailability.teamIdsWithProducts.has(team.id)),\n    [paymentsAvailability.teamIdsWithProducts, teamsById],\n  );\n  const shouldShowPaymentsTab = props.mockUser\n    || (paymentsAvailability.isReady\n      && (paymentsAvailability.userHasProducts || teamsWithProducts.length > 0));\n\n  // If we're not in mock mode and don't have a user, the useUser hook will handle redirect\n  if (!props.mockUser && !userFromHook) {\n    return null;\n  }\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className=\"self-stretch flex-grow w-full\">\n        <SidebarLayout\n          items={([\n            {\n              title: t('My Profile'),\n              type: 'item',\n              id: 'profile',\n              icon: <Icon name=\"Contact\"/>,\n              content: <ProfilePage mockUser={props.mockUser}/>,\n            },\n            {\n              title: t('Emails & Auth'),\n              type: 'item',\n              id: 'auth',\n              icon: <Icon name=\"ShieldCheck\"/>,\n              content: <Suspense fallback={<EmailsAndAuthPageSkeleton/>}>\n                <EmailsAndAuthPage mockMode={!!props.mockUser}/>\n              </Suspense>,\n            },\n            {\n              title: t('Notifications'),\n              type: 'item',\n              id: 'notifications',\n              icon: <Icon name=\"Bell\"/>,\n              content: <Suspense fallback={<NotificationsPageSkeleton/>}>\n                <NotificationsPage/>\n              </Suspense>,\n            },\n            {\n              title: t('Active Sessions'),\n              type: 'item',\n              id: 'sessions',\n              icon: <Icon name=\"Monitor\"/>,\n              content: <Suspense fallback={<ActiveSessionsPageSkeleton/>}>\n                <ActiveSessionsPage mockSessions={props.mockSessions} mockMode={!!props.mockUser}/>\n              </Suspense>,\n            },\n            ...(project.config.allowUserApiKeys ? [{\n              title: t('API Keys'),\n              type: 'item',\n              id: 'api-keys',\n              icon: <Icon name=\"Key\" />,\n              content: <Suspense fallback={<ApiKeysPageSkeleton/>}>\n                <ApiKeysPage mockApiKeys={props.mockApiKeys} mockMode={!!props.mockUser} />\n              </Suspense>,\n            }] as const : []),\n            ...(shouldShowPaymentsTab ? [{\n              title: t('Payments'),\n              type: 'item',\n              id: 'payments',\n              icon: <Icon name=\"CreditCard\" />,\n              content: <Suspense fallback={<PaymentsPageSkeleton/>}>\n                <PaymentsPage\n                  mockMode={!!props.mockUser}\n                  allowPersonal={paymentsAvailability.userHasProducts}\n                  availableTeams={teamsWithProducts}\n                />\n              </Suspense>,\n            }] as const : []),\n            {\n              title: t('Settings'),\n              type: 'item',\n              id: 'settings',\n              icon: <Icon name=\"Settings\"/>,\n              content: <SettingsPage mockMode={!!props.mockUser}/>,\n            },\n            ...(props.extraItems?.map(item => ({\n              title: item.title,\n              type: 'item',\n              id: item.id,\n              icon: (() => {\n                const iconName = (item as any).iconName as keyof typeof iconMap | undefined;\n                if (iconName) {\n                  return <Icon name={iconName}/>;\n                } else if ((item as any).icon) {\n                  return (item as any).icon;\n                }\n                return null;\n              })(),\n              content: item.content,\n            } as const)) || []),\n            ...(teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{\n              title: t('Teams'),\n              type: 'divider',\n            }] as const : [],\n            ...teams.map(team => ({\n              title: <div className='flex gap-2 items-center w-full'>\n                <TeamIcon team={team}/>\n                <Typography className=\"max-w-[320px] md:w-[90%] truncate\">{team.displayName}</Typography>\n              </div>,\n              type: 'item',\n              id: `team-${team.id}`,\n              content: <Suspense fallback={<TeamPageSkeleton/>}>\n                <TeamPage team={team}/>\n              </Suspense>,\n            } as const)),\n            ...project.config.clientTeamCreationEnabled ? [{\n              title: t('Create a team'),\n              icon: <Icon name=\"CirclePlus\"/>,\n              type: 'item',\n              id: 'team-creation',\n              content: <Suspense fallback={<TeamCreationSkeleton/>}>\n                <TeamCreationPage mockMode={!!props.mockUser} />\n              </Suspense>,\n            }] as const : [],\n          ] as const).filter((p) => p.type === 'divider' || (p as any).content )}\n          title={t(\"Account Settings\")}\n        />\n      </div>\n    </MaybeFullPage>\n  );\n}\n\nfunction PageLayout(props: { children: React.ReactNode }) {\n  return (\n    <div className='flex flex-col gap-6'>\n      {props.children}\n    </div>\n  );\n}\n\nfunction EmailsAndAuthPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n\nfunction ActiveSessionsPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-6 w-48 mb-2\"/>\n    <Skeleton className=\"h-4 w-full mb-4\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction ApiKeysPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction PaymentsPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-6 w-48 mb-2\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction TeamPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-[200px] w-full mt-1 rounded-md\"/>\n  </PageLayout>;\n}\n\nfunction TeamCreationSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n\nfunction NotificationsPageSkeleton() {\n  return <PageLayout>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n    <Skeleton className=\"h-9 w-full mt-1\"/>\n  </PageLayout>;\n}\n"],"mappings":"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"}

package/dist/components-page/auth-page.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/auth-page.d.ts
+type Props = {
+  noPasswordRepeat?: boolean;
+  firstTab?: 'magic-link' | 'password';
+  fullPage?: boolean;
+  type: 'sign-in' | 'sign-up';
+  automaticRedirect?: boolean;
+  extraInfo?: React.ReactNode;
+  mockProject?: {
+    config: {
+      signUpEnabled: boolean;
+      credentialEnabled: boolean;
+      passkeyEnabled: boolean;
+      magicLinkEnabled: boolean;
+      oauthProviders: {
+        id: string;
+      }[];
+    };
+  };
+};
+declare function AuthPage(props: Props): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { AuthPage };
+//# sourceMappingURL=auth-page.d.ts.map

package/dist/components-page/auth-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-page.d.ts","names":[],"sources":["../../src/components-page/auth-page.tsx"],"mappings":";;;KAsBK,KAAA;EACH,gBAAA;EACA,QAAA;EACA,QAAA;EACA,IAAA;EACA,iBAAA;EACA,SAAA,GAAY,KAAA,CAAM,SAAA;EAClB,WAAA;IACE,MAAA;MACE,aAAA;MACA,iBAAA;MACA,cAAA;MACA,gBAAA;MACA,cAAA;QACE,EAAA;MAAA;IAAA;EAAA;AAAA;AAAA,iBAMQ,QAAA,CAAS,KAAA,EAAO,KAAA,GAAK,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components-page/auth-page.js

@@ -0,0 +1,163 @@
+'use client';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../chunk-BE-pF4vm.js');
+let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-shared/dist/utils/promises");
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let ___index_js = require("../index.js");
+let ___lib_translations_js = require("../lib/translations.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+let ___components_elements_maybe_full_page_js = require("../components/elements/maybe-full-page.js");
+let ___components_credential_sign_in_js = require("../components/credential-sign-in.js");
+let ___components_credential_sign_up_js = require("../components/credential-sign-up.js");
+let ___components_elements_separator_with_text_js = require("../components/elements/separator-with-text.js");
+let ___components_link_js = require("../components/link.js");
+let ___components_magic_link_sign_in_js = require("../components/magic-link-sign-in.js");
+let ___components_message_cards_predefined_message_card_js = require("../components/message-cards/predefined-message-card.js");
+let ___components_oauth_button_group_js = require("../components/oauth-button-group.js");
+let ___components_passkey_button_js = require("../components/passkey-button.js");
+
+//#region src/components-page/auth-page.tsx
+function AuthPage(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Fallback, { ...props }),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Inner, { ...props })
+	});
+}
+function Fallback(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_elements_maybe_full_page_js.MaybeFullPage, {
+		fullPage: !!props.fullPage,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "stack-scope flex flex-col items-stretch",
+			style: {
+				maxWidth: "380px",
+				flexBasis: "380px",
+				padding: props.fullPage ? "1rem" : 0
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "text-center mb-6 flex flex-col",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-2/3 self-center" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-3 w-16 mt-8" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-3 w-24 mt-2" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Skeleton, { className: "h-9 w-full mt-6" })
+				]
+			})
+		})
+	});
+}
+function Inner(props) {
+	const stackApp = (0, ___index_js.useStackApp)();
+	const user = (0, ___index_js.useUser)({ includeRestricted: true });
+	const projectFromHook = stackApp.useProject();
+	const project = props.mockProject || projectFromHook;
+	const { t } = (0, ___lib_translations_js.useTranslation)();
+	if (props.automaticRedirect && user && !props.mockProject) {
+		(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronously)(user.isRestricted ? stackApp.redirectToOnboarding({ replace: true }) : props.type === "sign-in" ? stackApp.redirectToAfterSignIn({ replace: true }) : stackApp.redirectToAfterSignUp({ replace: true }));
+		return null;
+	}
+	if (user && !props.mockProject && !props.automaticRedirect) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_message_cards_predefined_message_card_js.PredefinedMessageCard, {
+		type: "signedIn",
+		fullPage: props.fullPage
+	});
+	if (props.type === "sign-up" && !project.config.signUpEnabled) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_message_cards_predefined_message_card_js.PredefinedMessageCard, {
+		type: "signUpDisabled",
+		fullPage: props.fullPage
+	});
+	const hasOAuthProviders = project.config.oauthProviders.length > 0;
+	const hasPasskey = project.config.passkeyEnabled === true && props.type === "sign-in";
+	const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && (hasOAuthProviders || hasPasskey);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_elements_maybe_full_page_js.MaybeFullPage, {
+		fullPage: !!props.fullPage,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "stack-scope flex flex-col items-stretch",
+			style: {
+				maxWidth: "380px",
+				flexBasis: "380px",
+				padding: props.fullPage ? "1rem" : 0
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "text-center mb-6",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+						type: "h2",
+						children: props.type === "sign-in" ? t("Sign in to your account") : t("Create a new account")
+					}), props.type === "sign-in" ? project.config.signUpEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Typography, { children: [
+						t("Don't have an account?"),
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_link_js.StyledLink, {
+							href: stackApp.urls.signUp,
+							onClick: (e) => {
+								(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronously)(stackApp.redirectToSignUp());
+								e.preventDefault();
+							},
+							children: t("Sign up")
+						})
+					] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Typography, { children: [
+						t("Already have an account?"),
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_link_js.StyledLink, {
+							href: stackApp.urls.signIn,
+							onClick: (e) => {
+								(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronously)(stackApp.redirectToSignIn());
+								e.preventDefault();
+							},
+							children: t("Sign in")
+						})
+					] })]
+				}),
+				(hasOAuthProviders || hasPasskey) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "gap-4 flex flex-col items-stretch stack-scope",
+					children: [hasOAuthProviders && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_oauth_button_group_js.OAuthButtonGroup, {
+						type: props.type,
+						mockProject: props.mockProject
+					}), hasPasskey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_passkey_button_js.PasskeyButton, { type: props.type })]
+				}),
+				enableSeparator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_elements_separator_with_text_js.SeparatorWithText, { text: t("Or continue with") }),
+				project.config.credentialEnabled && project.config.magicLinkEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.Tabs, {
+					defaultValue: props.firstTab || "magic-link",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_stackframe_stack_ui.TabsList, {
+							className: (0, _stackframe_stack_ui.cn)("w-full mb-2", { "flex-row-reverse": props.firstTab === "password" }),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TabsTrigger, {
+								value: "magic-link",
+								className: "flex-1",
+								children: t("Email")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TabsTrigger, {
+								value: "password",
+								className: "flex-1",
+								children: t("Email & Password")
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TabsContent, {
+							value: "magic-link",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_magic_link_sign_in_js.MagicLinkSignIn, {})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.TabsContent, {
+							value: "password",
+							children: props.type === "sign-up" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_credential_sign_up_js.CredentialSignUp, { noPasswordRepeat: props.noPasswordRepeat }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_credential_sign_in_js.CredentialSignIn, {})
+						})
+					]
+				}) : project.config.credentialEnabled ? props.type === "sign-up" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_credential_sign_up_js.CredentialSignUp, { noPasswordRepeat: props.noPasswordRepeat }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_credential_sign_in_js.CredentialSignIn, {}) : project.config.magicLinkEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___components_magic_link_sign_in_js.MagicLinkSignIn, {}) : !(hasOAuthProviders || hasPasskey) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+					variant: "destructive",
+					className: "text-center",
+					children: t("No authentication method enabled.")
+				}) : null,
+				props.extraInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, _stackframe_stack_ui.cn)("flex flex-col items-center text-center text-sm text-gray-500", {
+						"mt-2": project.config.credentialEnabled || project.config.magicLinkEnabled,
+						"mt-6": !(project.config.credentialEnabled || project.config.magicLinkEnabled)
+					}),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: props.extraInfo })
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+exports.AuthPage = AuthPage;
+//# sourceMappingURL=auth-page.js.map

package/dist/components-page/auth-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-page.js","names":["Suspense","MaybeFullPage","Skeleton","PredefinedMessageCard","Typography","StyledLink","OAuthButtonGroup","PasskeyButton","SeparatorWithText","Tabs","TabsList","TabsTrigger","TabsContent","MagicLinkSignIn","CredentialSignUp","CredentialSignIn"],"sources":["../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Skeleton, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from '@stackframe/stack-ui';\nimport { Suspense } from 'react';\nimport { useStackApp, useUser } from '..';\nimport { CredentialSignIn } from '../components/credential-sign-in';\nimport { CredentialSignUp } from '../components/credential-sign-up';\nimport { MaybeFullPage } from '../components/elements/maybe-full-page';\nimport { SeparatorWithText } from '../components/elements/separator-with-text';\nimport { StyledLink } from '../components/link';\nimport { MagicLinkSignIn } from '../components/magic-link-sign-in';\nimport { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';\nimport { OAuthButtonGroup } from '../components/oauth-button-group';\nimport { PasskeyButton } from '../components/passkey-button';\nimport { useTranslation } from '../lib/translations';\n\ntype Props = {\n  noPasswordRepeat?: boolean,\n  firstTab?: 'magic-link' | 'password',\n  fullPage?: boolean,\n  type: 'sign-in' | 'sign-up',\n  automaticRedirect?: boolean,\n  extraInfo?: React.ReactNode,\n  mockProject?: {\n    config: {\n      signUpEnabled: boolean,\n      credentialEnabled: boolean,\n      passkeyEnabled: boolean,\n      magicLinkEnabled: boolean,\n      oauthProviders: {\n        id: string,\n      }[],\n    },\n  },\n}\n\nexport function AuthPage(props: Props) {\n  return <Suspense fallback={<Fallback {...props} />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback(props: Props) {\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>\n        <div className=\"text-center mb-6 flex flex-col\">\n          <Skeleton className='h-9 w-2/3 self-center' />\n\n          <Skeleton className='h-3 w-16 mt-8' />\n          <Skeleton className='h-9 w-full mt-1' />\n\n          <Skeleton className='h-3 w-24 mt-2' />\n          <Skeleton className='h-9 w-full mt-1' />\n\n          <Skeleton className='h-9 w-full mt-6' />\n        </div>\n      </div>\n    </MaybeFullPage>\n  );\n}\n\nfunction Inner(props: Props) {\n  const stackApp = useStackApp();\n  const user = useUser({ includeRestricted: true });\n  const projectFromHook = stackApp.useProject();\n  const project = props.mockProject || projectFromHook;\n  const { t } = useTranslation();\n\n  if (props.automaticRedirect && user && !props.mockProject) {\n    runAsynchronously(\n      user.isRestricted\n        ? stackApp.redirectToOnboarding({ replace: true })\n        : props.type === 'sign-in'\n          ? stackApp.redirectToAfterSignIn({ replace: true })\n          : stackApp.redirectToAfterSignUp({ replace: true })\n    );\n    return null;\n  }\n\n  if (user && !props.mockProject && !props.automaticRedirect) {\n    return <PredefinedMessageCard type='signedIn' fullPage={props.fullPage} />;\n  }\n\n  if (props.type === 'sign-up' && !project.config.signUpEnabled) {\n    return <PredefinedMessageCard type='signUpDisabled' fullPage={props.fullPage} />;\n  }\n\n  const hasOAuthProviders = project.config.oauthProviders.length > 0;\n  const hasPasskey = (project.config.passkeyEnabled === true && props.type === \"sign-in\");\n  const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && (hasOAuthProviders || hasPasskey);\n\n  return (\n    <MaybeFullPage fullPage={!!props.fullPage}>\n      <div className='stack-scope flex flex-col items-stretch' style={{ maxWidth: '380px', flexBasis: '380px', padding: props.fullPage ? '1rem' : 0 }}>\n        <div className=\"text-center mb-6\">\n          <Typography type='h2'>\n            {props.type === 'sign-in' ? t(\"Sign in to your account\") : t(\"Create a new account\")}\n          </Typography>\n          {props.type === 'sign-in' ? (\n            project.config.signUpEnabled && (\n              <Typography>\n                {t(\"Don't have an account?\")}{\" \"}\n                <StyledLink href={stackApp.urls.signUp} onClick={(e) => {\n                  runAsynchronously(stackApp.redirectToSignUp());\n                  e.preventDefault();\n                }}>{t(\"Sign up\")}</StyledLink>\n              </Typography>\n            )\n          ) : (\n            <Typography>\n              {t(\"Already have an account?\")}{\" \"}\n              <StyledLink href={stackApp.urls.signIn} onClick={(e) => {\n                runAsynchronously(stackApp.redirectToSignIn());\n                e.preventDefault();\n              }}>{t(\"Sign in\")}</StyledLink>\n            </Typography>\n          )}\n        </div>\n        {(hasOAuthProviders || hasPasskey) && (\n          <div className='gap-4 flex flex-col items-stretch stack-scope'>\n            {hasOAuthProviders && <OAuthButtonGroup type={props.type} mockProject={props.mockProject} />}\n            {hasPasskey && <PasskeyButton type={props.type} />}\n          </div>\n        )}\n\n        {enableSeparator && <SeparatorWithText text={t('Or continue with')} />}\n        {project.config.credentialEnabled && project.config.magicLinkEnabled ? (\n          <Tabs defaultValue={props.firstTab || 'magic-link'}>\n            <TabsList className={cn('w-full mb-2', {\n              'flex-row-reverse': props.firstTab === 'password'\n            })}>\n              <TabsTrigger value='magic-link' className='flex-1'>{t(\"Email\")}</TabsTrigger>\n              <TabsTrigger value='password' className='flex-1'>{t(\"Email & Password\")}</TabsTrigger>\n            </TabsList>\n            <TabsContent value='magic-link'>\n              <MagicLinkSignIn />\n            </TabsContent>\n            <TabsContent value='password'>\n              {props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn />}\n            </TabsContent>\n          </Tabs>\n        ) : project.config.credentialEnabled ? (\n          props.type === 'sign-up' ? <CredentialSignUp noPasswordRepeat={props.noPasswordRepeat} /> : <CredentialSignIn />\n        ) : project.config.magicLinkEnabled ? (\n          <MagicLinkSignIn />\n        ) : !(hasOAuthProviders || hasPasskey) ? <Typography variant={\"destructive\"} className=\"text-center\">{t(\"No authentication method enabled.\")}</Typography> : null}\n        {props.extraInfo && (\n          <div className={cn('flex flex-col items-center text-center text-sm text-gray-500', {\n            'mt-2': project.config.credentialEnabled || project.config.magicLinkEnabled,\n            'mt-6': !(project.config.credentialEnabled || project.config.magicLinkEnabled),\n          })}>\n            <div>{props.extraInfo}</div>\n          </div>\n        )}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":"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"}

package/dist/components-page/cli-auth-confirm.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/cli-auth-confirm.d.ts
+type CliAuthConfirmationStatus = "idle" | "invalid" | "authorizing" | "redirecting" | "success" | "error";
+type CliAuthConfirmationState = {
+  status: CliAuthConfirmationStatus;
+  loginCode: string | null;
+  error: Error | null;
+  isLoading: boolean;
+  authorize: () => Promise<void>;
+  retry: () => void;
+};
+declare function useCliAuthConfirmation(): CliAuthConfirmationState;
+declare function CliAuthConfirmation({
+  fullPage
+}: {
+  fullPage?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CliAuthConfirmation, CliAuthConfirmationState, CliAuthConfirmationStatus, useCliAuthConfirmation };
+//# sourceMappingURL=cli-auth-confirm.d.ts.map

package/dist/components-page/cli-auth-confirm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli-auth-confirm.d.ts","names":[],"sources":["../../src/components-page/cli-auth-confirm.tsx"],"mappings":";;;KAgEY,yBAAA;AAAA,KAQA,wBAAA;EACV,MAAA,EAAQ,yBAAA;EACR,SAAA;EACA,KAAA,EAAO,KAAA;EACP,SAAA;EACA,SAAA,QAAiB,OAAA;EACjB,KAAA;AAAA;AAAA,iBAGc,sBAAA,CAAA,GAA0B,wBAAA;AAAA,iBAgI1B,mBAAA,CAAA;EAAsB;AAAA;EAAqB,QAAA;AAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}