@stackframe/stack 2.6.15 → 2.6.17

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @stackframe/stack
 
+## 2.6.17
+
+### Patch Changes
+
+- Loading skeletons
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.17
+  - @stackframe/stack-sc@2.6.17
+  - @stackframe/stack-ui@2.6.17
+
+## 2.6.16
+
+### Patch Changes
+
+- - list user pagination
+  - fixed visual glitches
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.16
+  - @stackframe/stack-ui@2.6.16
+  - @stackframe/stack-sc@2.6.16
+
 ## 2.6.15
 
 ### Patch Changes

package/README.md

@@ -1,29 +1,26 @@
-# Stack
+# Stack Auth: Open-source Clerk/Auth0 alternative
 
-Stack is an open-source, self-hostable, and highly customizable authentication and user management system.
+## [📘 Docs](https://docs.stack-auth.com) | [☁️ Hosted Version](https://stack-auth.com/) | [✨ Demo](https://demo.stack-auth.com/) | [🎮 Discord](https://discord.stack-auth.com) | [GitHub](https://github.com/stack-auth/stack)
 
-We provide frontend and backend libraries for Next.js, React, and JavaScript. You can set it up in one minute and scale with the project as it grows.
+Stack Auth is a managed user authentication solution. It is developer-friendly and fully open-source (licensed under MIT and AGPL).
 
-## Features
+Stack gets you started in just five minutes, after which you'll be ready to use all of its features as you grow your project. Our managed service is completely optional and you can export your user data and self-host, for free, at any time.
 
-- Composable React components & hooks
-- OAuth (Google, Facebook, GitHub, etc.)
-- Email and password authentication (with email verification and password reset)
-- Easy to set up with proxied providers (no need to sign up and create OAuth endpoints yourself on all the providers)
-- User management & analytics
-- User-associated metadata with client-/server-specific permissions
-- Out-of-the-box Dark/Light mode support
-- suports switching out the underlying UI library, support MUI Joy out of the box
-- **100% open-source!**
+We support Next.js frontends, along with any backend that can use our [REST API](https://docs.stack-auth.com/rest-api/auth). Check out our [setup guide](https://docs.stack-auth.com/getting-started/setup) to get started.
 
-Currently, only Next.js is supported, but we are working on adding other frameworks.
+## 📦 Installation & Setup
 
-## Installation
+1. Run Stack’s installation wizard with the following command:
+    ```bash
+    npx @stackframe/init-stack@latest
+    ```
+2. Then, create an account on the [Stack Auth dashboard](https://app.stack-auth.com/projects), create a new project with an API key, and copy its environment variables into the .env.local file of your Next.js project:
+    ```
+    NEXT_PUBLIC_STACK_PROJECT_ID=<your-project-id>
+    NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=<your-publishable-client-key>
+    STACK_SECRET_SERVER_KEY=<your-secret-server-key>
+    ```
+3. That's it! You can run your app with `npm run dev` and go to [http://localhost:3000/handler/signup](http://localhost:3000/handler/signup) to see the sign-up page. You can also check out the account settings page at [http://localhost:3000/handler/account-settings](http://localhost:3000/handler/account-settings).
 
-To get started with Stack, you need to [create a Next.js project](https://nextjs.org/docs/getting-started/installation) using the App router. Then, you can install Stack by running the following command:
 
-```bash
-npm install @stackframe/stack
-```
-
-For setup, refer to [our documentation](https://docs.stack-auth.com).
+Check out the [documentation](https://docs.stack-auth.com/getting-started/setup) for a more detailed guide.

package/dist/components/message-cards/predefined-message-card.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function PredefinedMessageCard({ type, fullPage, }: {
-    type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified' | 'unknownError' | 'signUpDisabled';
+    type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'unknownError' | 'signUpDisabled';
     fullPage?: boolean;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/components/message-cards/predefined-message-card.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare function PredefinedMessageCard({ type, fullPage, }: {
-    type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified' | 'unknownError' | 'signUpDisabled';
+    type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'unknownError' | 'signUpDisabled';
     fullPage?: boolean;
 }): react_jsx_runtime.JSX.Element;
 

package/dist/components/message-cards/predefined-message-card.js

@@ -35,7 +35,6 @@ function PredefinedMessageCard({
   fullPage = false
 }) {
   const stackApp = (0, import__.useStackApp)();
-  const user = (0, import__.useUser)();
   const { t } = (0, import_translations.useTranslation)();
   let title;
   let message = null;
@@ -80,18 +79,6 @@ function PredefinedMessageCard({
       primaryButton = t("Sign in");
       break;
     }
-    case "emailVerified": {
-      title = t("Email verified!");
-      message = t("Your have successfully verified your email.");
-      if (user) {
-        primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });
-        primaryButton = t("Sign in");
-      } else {
-        primaryAction = () => stackApp.redirectToHome();
-        primaryButton = t("Go to home");
-      }
-      break;
-    }
     case "unknownError": {
       title = t("An unknown error occurred");
       message = t("Please try again and if the problem persists, contact support.");

package/dist/components/message-cards/predefined-message-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/message-cards/predefined-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { useStackApp, useUser } from \"../..\";\nimport { MessageCard } from \"./message-card\";\nimport { useTranslation } from \"../../lib/translations\";\n\nexport function PredefinedMessageCard({\n  type,\n  fullPage=false,\n}: {\n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified' | 'unknownError' | 'signUpDisabled',\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const { t } = useTranslation();\n\n  let title: string;\n  let message: string | null = null;\n  let primaryButton: string | null = null;\n  let secondaryButton: string | null = null;\n  let primaryAction: (() => Promise<void> | void) | null = null;\n  let secondaryAction: (() => Promise<void> | void) | null = null;\n\n  switch (type) {\n    case 'signedIn': {\n      title = t(\"You are already signed in\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignOut();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign out\");\n      break;\n    }\n    case 'signedOut': {\n      title = t(\"You are not currently signed in.\");\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'signUpDisabled': {\n      title = t(\"Sign up for new users is not enabled at the moment.\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailSent': {\n      title = t(\"Email sent!\");\n      message = t(\"If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n    case 'passwordReset': {\n      title = t(\"Password reset successfully!\");\n      message = t(\"Your password has been reset. You can now sign in with your new password.\");\n      primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailVerified': {\n      title = t(\"Email verified!\");\n      message = t(\"Your have successfully verified your email.\");\n      if (user) {\n        primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n        primaryButton = t(\"Sign in\");\n      } else {\n        primaryAction = () => stackApp.redirectToHome();\n        primaryButton = t(\"Go to home\");\n      }\n      break;\n    }\n    case 'unknownError': {\n      title = t(\"An unknown error occurred\");\n      message = t(\"Please try again and if the problem persists, contact support.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n  }\n\n  return (\n    <MessageCard\n      title={title}\n      fullPage={fullPage}\n      primaryButtonText={primaryButton}\n      primaryAction={primaryAction}\n      secondaryButtonText={secondaryButton || undefined}\n      secondaryAction={secondaryAction || undefined}\n    >\n      {message && <Typography>{message}</Typography>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAA2B;AAC3B,eAAqC;AACrC,0BAA4B;AAC5B,0BAA+B;AAuFb;AArFX,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,eAAW,sBAAY;AAC7B,QAAM,WAAO,kBAAQ;AACrB,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,MAAI;AACJ,MAAI,UAAyB;AAC7B,MAAI,gBAA+B;AACnC,MAAI,kBAAiC;AACrC,MAAI,gBAAqD;AACzD,MAAI,kBAAuD;AAE3D,UAAQ,MAAM;AAAA,IACZ,KAAK,YAAY;AACf,cAAQ,EAAE,2BAA2B;AACrC,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,kBAAkB;AACnD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,UAAU;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,kCAAkC;AAC5C,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,kBAAkB;AACrB,cAAQ,EAAE,qDAAqD;AAC/D,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,iBAAiB;AAClD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,SAAS;AAC7B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,aAAa;AACvB,gBAAU,EAAE,qHAAqH;AACjI,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ,EAAE,8BAA8B;AACxC,gBAAU,EAAE,2EAA2E;AACvF,sBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ,EAAE,iBAAiB;AAC3B,gBAAU,EAAE,6CAA6C;AACzD,UAAI,MAAM;AACR,wBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,wBAAgB,EAAE,SAAS;AAAA,MAC7B,OAAO;AACL,wBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAgB,EAAE,YAAY;AAAA,MAChC;AACA;AAAA,IACF;AAAA,IACA,KAAK,gBAAgB;AACnB,cAAQ,EAAE,2BAA2B;AACrC,gBAAU,EAAE,gEAAgE;AAC5E,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,qBAAqB,mBAAmB;AAAA,MACxC,iBAAiB,mBAAmB;AAAA,MAEnC,qBAAW,4CAAC,8BAAY,mBAAQ;AAAA;AAAA,EACnC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/message-cards/predefined-message-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { useStackApp, useUser } from \"../..\";\nimport { MessageCard } from \"./message-card\";\nimport { useTranslation } from \"../../lib/translations\";\n\nexport function PredefinedMessageCard({\n  type,\n  fullPage=false,\n}: {\n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'unknownError' | 'signUpDisabled',\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n  const { t } = useTranslation();\n\n  let title: string;\n  let message: string | null = null;\n  let primaryButton: string | null = null;\n  let secondaryButton: string | null = null;\n  let primaryAction: (() => Promise<void> | void) | null = null;\n  let secondaryAction: (() => Promise<void> | void) | null = null;\n\n  switch (type) {\n    case 'signedIn': {\n      title = t(\"You are already signed in\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignOut();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign out\");\n      break;\n    }\n    case 'signedOut': {\n      title = t(\"You are not currently signed in.\");\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'signUpDisabled': {\n      title = t(\"Sign up for new users is not enabled at the moment.\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Go to home\");\n      secondaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailSent': {\n      title = t(\"Email sent!\");\n      message = t(\"If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n    case 'passwordReset': {\n      title = t(\"Password reset successfully!\");\n      message = t(\"Your password has been reset. You can now sign in with your new password.\");\n      primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'unknownError': {\n      title = t(\"An unknown error occurred\");\n      message = t(\"Please try again and if the problem persists, contact support.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go to home\");\n      break;\n    }\n  }\n\n  return (\n    <MessageCard\n      title={title}\n      fullPage={fullPage}\n      primaryButtonText={primaryButton}\n      primaryAction={primaryAction}\n      secondaryButtonText={secondaryButton || undefined}\n      secondaryAction={secondaryAction || undefined}\n    >\n      {message && <Typography>{message}</Typography>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAA2B;AAC3B,eAAqC;AACrC,0BAA4B;AAC5B,0BAA+B;AA0Eb;AAxEX,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,WAAS;AACX,GAGG;AACD,QAAM,eAAW,sBAAY;AAC7B,QAAM,EAAE,EAAE,QAAI,oCAAe;AAE7B,MAAI;AACJ,MAAI,UAAyB;AAC7B,MAAI,gBAA+B;AACnC,MAAI,kBAAiC;AACrC,MAAI,gBAAqD;AACzD,MAAI,kBAAuD;AAE3D,UAAQ,MAAM;AAAA,IACZ,KAAK,YAAY;AACf,cAAQ,EAAE,2BAA2B;AACrC,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,kBAAkB;AACnD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,UAAU;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,kCAAkC;AAC5C,sBAAgB,MAAM,SAAS,iBAAiB;AAChD,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,kBAAkB;AACrB,cAAQ,EAAE,qDAAqD;AAC/D,sBAAgB,MAAM,SAAS,eAAe;AAC9C,wBAAkB,MAAM,SAAS,iBAAiB;AAClD,sBAAgB,EAAE,YAAY;AAC9B,wBAAkB,EAAE,SAAS;AAC7B;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,cAAQ,EAAE,aAAa;AACvB,gBAAU,EAAE,qHAAqH;AACjI,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,cAAQ,EAAE,8BAA8B;AACxC,gBAAU,EAAE,2EAA2E;AACvF,sBAAgB,MAAM,SAAS,iBAAiB,EAAE,gBAAgB,KAAK,CAAC;AACxE,sBAAgB,EAAE,SAAS;AAC3B;AAAA,IACF;AAAA,IACA,KAAK,gBAAgB;AACnB,cAAQ,EAAE,2BAA2B;AACrC,gBAAU,EAAE,gEAAgE;AAC5E,sBAAgB,MAAM,SAAS,eAAe;AAC9C,sBAAgB,EAAE,YAAY;AAC9B;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,qBAAqB,mBAAmB;AAAA,MACxC,iBAAiB,mBAAmB;AAAA,MAEnC,qBAAW,4CAAC,8BAAY,mBAAQ;AAAA;AAAA,EACnC;AAEJ;","names":[]}

package/dist/components/selected-team-switcher.js

@@ -35,6 +35,12 @@ var import_translations = require("../lib/translations");
 var import_team_icon = require("./team-icon");
 var import_jsx_runtime = require("react/jsx-runtime");
 function SelectedTeamSwitcher(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Fallback, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Inner, { ...props }) });
+}
+function Fallback() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full max-w-64 stack-scope" });
+}
+function Inner(props) {
   const { t } = (0, import_translations.useTranslation)();
   const app = (0, import__.useStackApp)();
   const user = (0, import__.useUser)();

package/dist/components/selected-team-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { useRouter } from \"next/navigation\";\nimport { useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const user = useUser();\n  const project = app.useProject();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team);\n          }\n          if (props.urlMap) {\n            router.push(props.urlMap(team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope max-w-64\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button variant='ghost' size='icon' className=\"h-6 w-6\" onClick={() => router.push(`${app.urls.accountSettings}#team-${user.selectedTeam?.id}`)}>\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={user.selectedTeam} />\n              <Typography className=\"max-w-40 truncate\">{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> :\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup>}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => router.push(`${app.urls.accountSettings}#team-creation`)}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}
+{"version":3,"sources":["../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { useRouter } from \"next/navigation\";\nimport { Suspense, useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  return <Suspense fallback={<Fallback />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback() {\n  return <Skeleton className=\"h-9 w-full max-w-64 stack-scope\" />;\n}\n\nfunction Inner(props: SelectedTeamSwitcherProps) {\n  const { t } = useTranslation();\n  const app = useStackApp();\n  const user = useUser();\n  const project = app.useProject();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team);\n          }\n          if (props.urlMap) {\n            router.push(props.urlMap(team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope max-w-64\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button variant='ghost' size='icon' className=\"h-6 w-6\" onClick={() => router.push(`${app.urls.accountSettings}#team-${user.selectedTeam?.id}`)}>\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={user.selectedTeam} />\n              <Typography className=\"max-w-40 truncate\">{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> :\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup>}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => router.push(`${app.urls.accountSettings}#team-creation`)}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}

package/dist/components/user-button.js

@@ -40,13 +40,7 @@ function Item(props) {
   ] }) });
 }
 function UserButton(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react.Suspense,
-    {
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInnerInner, { ...props, user: null }) }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInner, { ...props })
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-[34px] w-[34px] rounded-full stack-scope" }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInner, { ...props }) });
 }
 function UserButtonInner(props) {
   const user = (0, import__.useUser)();

package/dist/components/user-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/user-button.tsx"],"sourcesContent":["'use client';\n\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from \"@stackframe/stack-ui\";\nimport { CircleUser, LogIn, LogOut, SunMoon, UserPlus } from \"lucide-react\";\nimport React, { Suspense } from \"react\";\nimport { CurrentUser, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { UserAvatar } from \"./elements/user-avatar\";\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem onClick={() => runAsynchronouslyWithAlert(props.onClick)}>\n      <div className=\"flex gap-2 items-center\">\n        {props.icon}\n        <Typography>{props.text}</Typography>\n      </div>\n    </DropdownMenuItem>\n  );\n}\n\ntype UserButtonProps = {\n  showUserInfo?: boolean,\n  colorModeToggle?: () => void | Promise<void>,\n  extraItems?: {\n    text: string,\n    icon: React.ReactNode,\n    onClick: () => void | Promise<void>,\n  }[],\n};\n\nexport function UserButton(props: UserButtonProps) {\n  return (\n    <Suspense\n      fallback={\n        <Skeleton>\n          <UserButtonInnerInner {...props} user={null} />\n        </Skeleton>\n      }\n    >\n      <UserButtonInner {...props} />\n    </Suspense>\n  );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n  const user = useUser();\n  return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n  const { t } = useTranslation();\n  const user = props.user;\n  const app = useStackApp();\n\n  const iconProps = { size: 20, className: 'h-4 w-4' };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger className=\"outline-none stack-scope\">\n        <div className=\"flex gap-2 items-center\">\n          <UserAvatar user={user} />\n          {user && props.showUserInfo &&\n            <div className=\"flex flex-col justify-center text-left\">\n              <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>\n              <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>\n            </div>\n          }\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"stack-scope\">\n        <DropdownMenuLabel>\n          <div className=\"flex gap-2 items-center\">\n            <UserAvatar user={user} />\n            <div>\n              {user && <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>}\n              {user && <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>}\n              {!user && <Typography>{t('Not signed in')}</Typography>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item\n          text={t('Account settings')}\n          onClick={async () => await app.redirectToAccountSettings()}\n          icon={<CircleUser {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign in')}\n          onClick={async () => await app.redirectToSignIn()}\n          icon={<LogIn {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign up')}\n          onClick={async () => await app.redirectToSignUp()}\n          icon={<UserPlus {...iconProps}/> }\n        />}\n        {user && props.extraItems && props.extraItems.map((item, index) => (\n          <Item key={index} {...item} />\n        ))}\n        {props.colorModeToggle && (\n          <Item\n            text={t('Toggle theme')}\n            onClick={props.colorModeToggle}\n            icon={<SunMoon {...iconProps} />}\n          />\n        )}\n        {user && <Item\n          text={t('Sign out')}\n          onClick={() => user.signOut()}\n          icon={<LogOut {...iconProps} />}\n        />}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/user-button.tsx"],"sourcesContent":["'use client';\n\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from \"@stackframe/stack-ui\";\nimport { CircleUser, LogIn, LogOut, SunMoon, UserPlus } from \"lucide-react\";\nimport React, { Suspense } from \"react\";\nimport { CurrentUser, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { UserAvatar } from \"./elements/user-avatar\";\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem onClick={() => runAsynchronouslyWithAlert(props.onClick)}>\n      <div className=\"flex gap-2 items-center\">\n        {props.icon}\n        <Typography>{props.text}</Typography>\n      </div>\n    </DropdownMenuItem>\n  );\n}\n\ntype UserButtonProps = {\n  showUserInfo?: boolean,\n  colorModeToggle?: () => void | Promise<void>,\n  extraItems?: {\n    text: string,\n    icon: React.ReactNode,\n    onClick: () => void | Promise<void>,\n  }[],\n};\n\nexport function UserButton(props: UserButtonProps) {\n  return (\n    <Suspense fallback={<Skeleton className=\"h-[34px] w-[34px] rounded-full stack-scope\" />}>\n      <UserButtonInner {...props} />\n    </Suspense>\n  );\n}\n\nfunction UserButtonInner(props: UserButtonProps) {\n  const user = useUser();\n  return <UserButtonInnerInner {...props} user={user} />;\n}\n\n\nfunction UserButtonInnerInner(props: UserButtonProps & { user: CurrentUser | null }) {\n  const { t } = useTranslation();\n  const user = props.user;\n  const app = useStackApp();\n\n  const iconProps = { size: 20, className: 'h-4 w-4' };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger className=\"outline-none stack-scope\">\n        <div className=\"flex gap-2 items-center\">\n          <UserAvatar user={user} />\n          {user && props.showUserInfo &&\n            <div className=\"flex flex-col justify-center text-left\">\n              <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>\n              <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>\n            </div>\n          }\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"stack-scope\">\n        <DropdownMenuLabel>\n          <div className=\"flex gap-2 items-center\">\n            <UserAvatar user={user} />\n            <div>\n              {user && <Typography className=\"max-w-40 truncate\">{user.displayName}</Typography>}\n              {user && <Typography className=\"max-w-40 truncate\" variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>}\n              {!user && <Typography>{t('Not signed in')}</Typography>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item\n          text={t('Account settings')}\n          onClick={async () => await app.redirectToAccountSettings()}\n          icon={<CircleUser {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign in')}\n          onClick={async () => await app.redirectToSignIn()}\n          icon={<LogIn {...iconProps} />}\n        />}\n        {!user && <Item\n          text={t('Sign up')}\n          onClick={async () => await app.redirectToSignUp()}\n          icon={<UserPlus {...iconProps}/> }\n        />}\n        {user && props.extraItems && props.extraItems.map((item, index) => (\n          <Item key={index} {...item} />\n        ))}\n        {props.colorModeToggle && (\n          <Item\n            text={t('Toggle theme')}\n            onClick={props.colorModeToggle}\n            icon={<SunMoon {...iconProps} />}\n          />\n        )}\n        {user && <Item\n          text={t('Sign out')}\n          onClick={() => user.signOut()}\n          icon={<LogOut {...iconProps} />}\n        />}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -341,7 +341,7 @@ function usePasskeySection() {
   const stackApp = (0, import__.useStackApp)();
   const project = stackApp.useProject();
   const contactChannels = user.useContactChannels();
-  const has_passkey = user.passkeyAuthEnabled;
+  const hasPasskey = user.passkeyAuthEnabled;
   const isLastAuth = user.passkeyAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.otpAuthEnabled;
   const [showConfirmationModal, setShowConfirmationModal] = (0, import_react.useState)(false);
   const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.isVerified && x.usedForAuth).length > 0;
@@ -355,11 +355,11 @@ function usePasskeySection() {
   const handleAddNewPasskey = async () => {
     await user.registerPasskey();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: t("Passkey"), description: has_passkey ? t("Passkey registered") : t("Register a passkey"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex md:justify-end", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: t("Passkey"), description: hasPasskey ? t("Passkey registered") : t("Register a passkey"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex md:justify-end gap-2", children: [
     !hasValidEmail && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("To enable Passkey sign-in, please add a verified email and set it as your sign-in email.") }),
-    hasValidEmail && has_passkey && isLastAuth && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method") }),
-    !has_passkey && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: handleAddNewPasskey, variant: "secondary", children: t("Add new passkey") }) }),
-    hasValidEmail && has_passkey && !isLastAuth && !showConfirmationModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    hasValidEmail && hasPasskey && isLastAuth && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method") }),
+    !hasPasskey && hasValidEmail && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: handleAddNewPasskey, variant: "secondary", children: t("Add new passkey") }) }),
+    hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_stack_ui.Button,
       {
         variant: "secondary",
@@ -367,7 +367,7 @@ function usePasskeySection() {
         children: t("Delete Passkey")
       }
     ),
-    hasValidEmail && has_passkey && !isLastAuth && showConfirmationModal && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Are you sure you want to disable Passkey sign-in? You will not be able to sign in with your passkey anymore.") }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(