@stackframe/stack 2.4.27 → 2.5.0

package/dist/components/oauth-button.d.ts

@@ -5,4 +5,4 @@ declare function OAuthButton({ provider, type, }: {
     type: 'sign-in' | 'sign-up';
 }): react_jsx_runtime.JSX.Element;
 
-export { OAuthButton as default };
+export { OAuthButton };

package/dist/components/oauth-button.js

@@ -1,9 +1,11 @@
 "use client";
 "use strict";
 "use client";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,16 +19,26 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/oauth-button.tsx
 var oauth_button_exports = {};
 __export(oauth_button_exports, {
-  default: () => OAuthButton
+  OAuthButton: () => OAuthButton
 });
 module.exports = __toCommonJS(oauth_button_exports);
+var import_stack_ui = require("@stackframe/stack-ui");
 var import__ = require("..");
-var import_components_core = require("../components-core");
+var import_color = __toESM(require("color"));
+var import_styled_components = __toESM(require("styled-components"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var iconSize = 22;
 function GoogleIcon({ iconSize: iconSize2 }) {
@@ -56,6 +68,21 @@ function MicrosoftIcon({ iconSize: iconSize2 }) {
 function SpotifyIcon({ iconSize: iconSize2 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 496 512", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "#ffffff", d: "M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z" }) });
 }
+var changeColor = (c, value) => {
+  if (c.isLight()) {
+    value = -value;
+  }
+  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();
+};
+var StyledButton = (0, import_styled_components.default)(import_stack_ui.Button)`
+  ${(props) => props.$bgColor ? `background-color: ${props.$bgColor} !important;` : ""}
+  ${(props) => props.$textColor ? `color: ${props.$textColor} !important;` : ""}
+  ${(props) => props.$border ? `border: ${props.$border} !important;` : ""}
+
+  &:hover {
+    ${(props) => props.$hoverBgColor ? `background-color: ${props.$hoverBgColor} !important;` : ""}
+  }
+`;
 function OAuthButton({
   provider,
   type
@@ -118,14 +145,16 @@ function OAuthButton({
     }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_components_core.Button,
+    StyledButton,
     {
-      color: style.backgroundColor,
-      style: { border: style.border, height: "2.5rem", color: style.textColor },
       onClick: () => stackApp.signInWithOAuth(provider),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", width: "100%", gap: "1rem" }, children: [
+      $bgColor: style.backgroundColor,
+      $hoverBgColor: changeColor((0, import_color.default)(style.backgroundColor), 10),
+      $textColor: style.textColor,
+      $border: style.border,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center w-full gap-4", children: [
         style.icon,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { flexGrow: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex-1", children: [
           type === "sign-up" ? "Sign up with " : "Sign in with ",
           style.name
         ] })
@@ -133,4 +162,8 @@ function OAuthButton({
     }
   );
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OAuthButton
+});
 //# sourceMappingURL=oauth-button.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\nimport { useStackApp } from '..';\nimport { Button } from \"../components-core\";\n\nconst iconSize = 22;\n\nfunction GoogleIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 24 24\">\n      <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"/>\n      <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"/>\n      <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"/>\n      <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"/>\n      <path fill=\"none\" d=\"M1 1h22v22H1z\" />\n    </svg>\n  );\n}\n\nfunction FacebookIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 512 512\">\n      <path fill='#FFFFFF' d=\"M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z\"/>\n    </svg>\n  );\n}\n\nfunction GitHubIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#FFFFFF' d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z\"/>\n    </svg>\n  );\n}\n\nfunction MicrosoftIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 21 21\">\n      <title>{\"MS-SymbolLockup\"}</title>\n      <path fill=\"#f25022\" d=\"M1 1h9v9H1z\" />\n      <path fill=\"#00a4ef\" d=\"M1 11h9v9H1z\" />\n      <path fill=\"#7fba00\" d=\"M11 1h9v9h-9z\" />\n      <path fill=\"#ffb900\" d=\"M11 11h9v9h-9z\" />\n    </svg>\n  );\n}\n\nfunction SpotifyIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#ffffff' d=\"M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z\"/>\n    </svg>\n  );\n}\nexport default function OAuthButton({\n  provider,\n  type,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n}) {\n  const stackApp = useStackApp();\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <GoogleIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <GitHubIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <FacebookIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <MicrosoftIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <SpotifyIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null\n      };\n    }\n  }\n\n  return (\n    <Button\n      color={style.backgroundColor}\n      style={{ border: style.border, height: '2.5rem', color: style.textColor }}\n      onClick={() => stackApp.signInWithOAuth(provider)}\n    >\n      <div style={{ display: 'flex', alignItems: 'center', width: '100%', gap: '1rem' }}>\n        {style.icon}\n        <span style={{ flexGrow: 1 }}>{type === 'sign-up' ? 'Sign up with ' : 'Sign in with '}{style.name}</span>\n      </div>\n    </Button>\n  );\n}\n"],"mappings":"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","names":["iconSize"]}
+{"version":3,"sources":["../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@stackframe/stack-ui';\nimport { useStackApp } from '..';\nimport Color from 'color';\nimport styled from 'styled-components';\n\nconst iconSize = 22;\n\nfunction GoogleIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 24 24\">\n      <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"/>\n      <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"/>\n      <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"/>\n      <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"/>\n      <path fill=\"none\" d=\"M1 1h22v22H1z\" />\n    </svg>\n  );\n}\n\nfunction FacebookIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 512 512\">\n      <path fill='#FFFFFF' d=\"M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z\"/>\n    </svg>\n  );\n}\n\nfunction GitHubIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#FFFFFF' d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z\"/>\n    </svg>\n  );\n}\n\nfunction MicrosoftIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 21 21\">\n      <title>{\"MS-SymbolLockup\"}</title>\n      <path fill=\"#f25022\" d=\"M1 1h9v9H1z\" />\n      <path fill=\"#00a4ef\" d=\"M1 11h9v9H1z\" />\n      <path fill=\"#7fba00\" d=\"M11 1h9v9h-9z\" />\n      <path fill=\"#ffb900\" d=\"M11 11h9v9h-9z\" />\n    </svg>\n  );\n}\n\nfunction SpotifyIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#ffffff' d=\"M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z\"/>\n    </svg>\n  );\n}\n\nconst changeColor = (c: Color, value: number) => {\n  if (c.isLight()) {\n    value = -value;\n  }\n  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nconst StyledButton = styled(Button)<{ $bgColor?: string, $hoverBgColor?: string, $textColor?: string, $border?: string }>`\n  ${props => props.$bgColor ? `background-color: ${props.$bgColor} !important;` : ''}\n  ${props => props.$textColor ? `color: ${props.$textColor} !important;` : ''}\n  ${props => props.$border ? `border: ${props.$border} !important;` : ''}\n\n  &:hover {\n    ${props => props.$hoverBgColor ? `background-color: ${props.$hoverBgColor} !important;` : ''}\n  }\n`;\n\nexport function OAuthButton({\n  provider,\n  type,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n}) {\n  const stackApp = useStackApp();\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <GoogleIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <GitHubIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <FacebookIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <MicrosoftIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <SpotifyIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null,\n      };\n    }\n  }\n  \n  return (\n    <StyledButton\n      onClick={() => stackApp.signInWithOAuth(provider)}\n      $bgColor={style.backgroundColor}\n      $hoverBgColor={changeColor(Color(style.backgroundColor), 10)}\n      $textColor={style.textColor}\n      $border={style.border}\n    >\n      <div className='flex items-center w-full gap-4'>\n        {style.icon}\n        <span className='flex-1'>\n          {type === 'sign-up' ? 'Sign up with ' : 'Sign in with '}{style.name}\n        </span>\n      </div>\n    </StyledButton>\n  );\n}\n"],"mappings":"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","names":["iconSize","styled","Color"]}

package/dist/components/{password-reset-inner.d.mts → password-reset-form.d.mts}

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function PasswordResetInner({ code, fullPage }: {
+declare function PasswordResetForm({ code, fullPage }: {
     code: string;
     fullPage?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-export { PasswordResetInner as default };
+export { PasswordResetForm as default };

package/dist/components/{password-reset-inner.d.ts → password-reset-form.d.ts}

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function PasswordResetInner({ code, fullPage }: {
+declare function PasswordResetForm({ code, fullPage }: {
     code: string;
     fullPage?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-export { PasswordResetInner as default };
+export { PasswordResetForm as default };

package/dist/components/{password-reset-inner.js → password-reset-form.js}

@@ -29,25 +29,24 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/components/password-reset-inner.tsx
-var password_reset_inner_exports = {};
-__export(password_reset_inner_exports, {
-  default: () => PasswordResetInner
+// src/components/password-reset-form.tsx
+var password_reset_form_exports = {};
+__export(password_reset_form_exports, {
+  default: () => PasswordResetForm
 });
-module.exports = __toCommonJS(password_reset_inner_exports);
+module.exports = __toCommonJS(password_reset_form_exports);
 var import_react = require("react");
 var import_react_hook_form = require("react-hook-form");
 var import_yup = require("@hookform/resolvers/yup");
 var yup = __toESM(require("yup"));
 var import_password = require("@stackframe/stack-shared/dist/helpers/password");
 var import__ = require("..");
-var import_password_field = __toESM(require("./password-field"));
-var import_form_warning = __toESM(require("./form-warning"));
-var import_predefined_message_card = __toESM(require("./message-cards/predefined-message-card"));
-var import_message_card = __toESM(require("./message-cards/message-card"));
-var import_maybe_full_page = __toESM(require("./maybe-full-page"));
-var import_components_core = require("../components-core");
+var import_form_warning = require("./elements/form-warning");
+var import_predefined_message_card = require("./message-cards/predefined-message-card");
+var import_message_card = require("./message-cards/message-card");
+var import_maybe_full_page = require("./elements/maybe-full-page");
 var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_stack_ui = require("@stackframe/stack-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 var schema = yup.object().shape({
   password: yup.string().required("Please enter your password").test({
@@ -63,30 +62,36 @@ var schema = yup.object().shape({
   }),
   passwordRepeat: yup.string().nullable().oneOf([yup.ref("password"), null], "Passwords do not match").required("Please repeat your password")
 });
-function PasswordResetInner({ code, fullPage = false }) {
+function PasswordResetForm({ code, fullPage = false }) {
   const { register, handleSubmit, formState: { errors }, clearErrors } = (0, import_react_hook_form.useForm)({
     resolver: (0, import_yup.yupResolver)(schema)
   });
   const stackApp = (0, import__.useStackApp)();
   const [finished, setFinished] = (0, import_react.useState)(false);
   const [resetError, setResetError] = (0, import_react.useState)(false);
+  const [loading, setLoading] = (0, import_react.useState)(false);
   const onSubmit = async (data) => {
-    const { password } = data;
-    const errorCode = await stackApp.resetPassword({ password, code });
-    if (errorCode) {
-      setResetError(true);
-      return;
+    setLoading(true);
+    try {
+      const { password } = data;
+      const errorCode = await stackApp.resetPassword({ password, code });
+      if (errorCode) {
+        setResetError(true);
+        return;
+      }
+      setFinished(true);
+    } finally {
+      setLoading(false);
     }
-    setFinished(true);
   };
   if (finished) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_predefined_message_card.default, { type: "passwordReset", fullPage });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_predefined_message_card.PredefinedMessageCard, { type: "passwordReset", fullPage });
   }
   if (resetError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_message_card.default, { title: "Failed to reset password", fullPage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { children: "Failed to reset password. Please request a new password reset link" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_message_card.MessageCard, { title: "Failed to reset password", fullPage, children: "Failed to reset password. Please request a new password reset link" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_maybe_full_page.default, { fullPage, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { size: "xl", as: "h2", children: "Reset Your Password" }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_maybe_full_page.MaybeFullPage, { fullPage, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-center mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h2", children: "Reset Your Password" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "form",
       {
@@ -94,9 +99,9 @@ function PasswordResetInner({ code, fullPage = false }) {
         onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
         noValidate: true,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "password", children: "New Password" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "password", className: "mb-1", children: "New Password" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_password_field.default,
+            import_stack_ui.PasswordInput,
             {
               id: "password",
               ...register("password"),
@@ -106,10 +111,10 @@ function PasswordResetInner({ code, fullPage = false }) {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: errors.password?.message?.toString() }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat New Password" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.password?.message?.toString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: "Repeat New Password" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_password_field.default,
+            import_stack_ui.PasswordInput,
             {
               id: "repeat-password",
               ...register("passwordRepeat"),
@@ -119,11 +124,11 @@ function PasswordResetInner({ code, fullPage = false }) {
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.default, { text: errors.passwordRepeat?.message?.toString() }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Button, { style: { marginTop: "1.5rem" }, type: "submit", children: "Reset Password" })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.passwordRepeat?.message?.toString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", className: "mt-6", loading, children: "Reset Password" })
         ]
       }
     )
   ] });
 }
-//# sourceMappingURL=password-reset-inner.js.map
+//# sourceMappingURL=password-reset-form.js.map

package/dist/components/password-reset-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/password-reset-form.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as yup from \"yup\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { useStackApp } from \"..\";\nimport { FormWarningText } from \"./elements/form-warning\";\nimport { PredefinedMessageCard } from \"./message-cards/predefined-message-card\";\nimport { MessageCard } from \"./message-cards/message-card\";\nimport { MaybeFullPage } from \"./elements/maybe-full-page\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Label, PasswordInput, Typography } from \"@stackframe/stack-ui\";\n\nconst schema = yup.object().shape({\n  password: yup.string().required('Please enter your password').test({\n    name: 'is-valid-password',\n    test: (value, ctx) => {\n      const error = getPasswordError(value);\n      if (error) {\n        return ctx.createError({ message: error.message });\n      } else {\n        return true;\n      }\n    }\n  }),\n  passwordRepeat: yup.string().nullable().oneOf([yup.ref('password'), null], 'Passwords do not match').required('Please repeat your password')\n});\n\nexport default function PasswordResetForm(\n  { code, fullPage = false }:\n  { code: string, fullPage?: boolean }\n) {\n  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const stackApp = useStackApp();\n  const [finished, setFinished] = useState(false);\n  const [resetError, setResetError] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { password } = data;\n      const errorCode = await stackApp.resetPassword({ password, code });\n      if (errorCode) {\n        setResetError(true);\n        return;\n      }\n\n      setFinished(true);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  if (finished) {\n    return <PredefinedMessageCard type='passwordReset' fullPage={fullPage} />;\n  }\n\n  if (resetError) {\n    return (\n      <MessageCard title=\"Failed to reset password\" fullPage={fullPage}>\n        Failed to reset password. Please request a new password reset link\n      </MessageCard>\n    );\n  }\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className=\"text-center mb-6\">\n        <Typography type='h2'>Reset Your Password</Typography>\n      </div>\n\n      <form \n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }} \n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <Label htmlFor=\"password\" className=\"mb-1\">New Password</Label>\n        <PasswordInput\n          id=\"password\"\n          {...register('password')}\n          onChange={() => {\n            clearErrors('password');\n            clearErrors('passwordRepeat');\n          }}\n        />\n        <FormWarningText text={errors.password?.message?.toString()} />\n\n        <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">Repeat New Password</Label>\n        <PasswordInput\n          id=\"repeat-password\"\n          {...register('passwordRepeat')}\n          onChange={() => {\n            clearErrors('password');\n            clearErrors('passwordRepeat');\n          }}\n        />\n        <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n\n        <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n          Reset Password\n        </Button>\n      </form>\n    </MaybeFullPage>\n  ); \n}\n"],"mappings":"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","names":[]}

package/dist/components/selected-team-switcher.d.mts

@@ -1,8 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Team } from '../lib/stack-app.mjs';
+import '@stackframe/stack-shared';
+import '@stackframe/stack-shared/dist/interface/clientInterface';
+import '@stackframe/stack-shared/dist/utils/json';
+import '@stackframe/stack-shared/dist/interface/adminInterface';
+import '@stackframe/stack-shared/dist/interface/serverInterface';
+import '@stackframe/stack-shared/dist/interface/crud/email-templates';
+import '@stackframe/stack-shared/dist/sessions';
 
 type SelectedTeamSwitcherProps = {
-    projectUrlMap?: (projectId: string) => string;
+    urlMap?: (team: Team) => string;
+    selectedTeam?: Team;
+    noUpdateSelectedTeam?: boolean;
 };
 declare function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps): react_jsx_runtime.JSX.Element;
 
-export { SelectedTeamSwitcher as default };
+export { SelectedTeamSwitcher };

package/dist/components/selected-team-switcher.d.ts

@@ -1,8 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Team } from '../lib/stack-app.js';
+import '@stackframe/stack-shared';
+import '@stackframe/stack-shared/dist/interface/clientInterface';
+import '@stackframe/stack-shared/dist/utils/json';
+import '@stackframe/stack-shared/dist/interface/adminInterface';
+import '@stackframe/stack-shared/dist/interface/serverInterface';
+import '@stackframe/stack-shared/dist/interface/crud/email-templates';
+import '@stackframe/stack-shared/dist/sessions';
 
 type SelectedTeamSwitcherProps = {
-    projectUrlMap?: (projectId: string) => string;
+    urlMap?: (team: Team) => string;
+    selectedTeam?: Team;
+    noUpdateSelectedTeam?: boolean;
 };
 declare function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps): react_jsx_runtime.JSX.Element;
 
-export { SelectedTeamSwitcher as default };
+export { SelectedTeamSwitcher };

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

@@ -22,54 +22,62 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/selected-team-switcher.tsx
 var selected_team_switcher_exports = {};
 __export(selected_team_switcher_exports, {
-  default: () => SelectedTeamSwitcher
+  SelectedTeamSwitcher: () => SelectedTeamSwitcher
 });
 module.exports = __toCommonJS(selected_team_switcher_exports);
 var import__ = require("..");
 var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
-var import_lucide_react = require("lucide-react");
 var import_navigation = require("next/navigation");
+var import_stack_ui = require("@stackframe/stack-ui");
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function TeamIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "1.5rem", height: "1.5rem", marginRight: "0.5rem", borderRadius: "0.25rem", backgroundColor: "rgb(228 228 231)" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: { color: "black", fontWeight: 400 }, children: props.displayName.slice(0, 1).toUpperCase() }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center justify-center w-6 h-6 mr-2 rounded bg-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: props.displayName.slice(0, 1).toUpperCase() }) });
 }
 function SelectedTeamSwitcher(props) {
   const user = (0, import__.useUser)();
   const router = (0, import_navigation.useRouter)();
-  const selectedTeam = user?.selectedTeam;
+  const selectedTeam = user?.selectedTeam || props.selectedTeam;
   const rawTeams = user?.useTeams();
   const teams = (0, import_react.useMemo)(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamIcon, { displayName: selectedTeam?.displayName || "" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: selectedTeam?.displayName || "Select team" })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DropdownMenuContent, { style: { zIndex: 1500 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuLabel, { children: "Teams" }),
-      teams && teams.map((team) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import__.DropdownMenuItem,
-        {
-          onClick: () => {
-            (0, import_promises.runAsynchronouslyWithAlert)(async () => {
-              await user?.setSelectedTeam(team);
-              if (props.projectUrlMap) {
-                router.push(props.projectUrlMap(team.id));
-              }
-            });
-          },
-          style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamIcon, { displayName: team.displayName }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: team.displayName })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { style: { marginLeft: "0.5rem", visibility: team.id === selectedTeam?.id ? "visible" : "hidden", height: "1rem", width: "1rem" } })
-          ]
-        },
-        team.id
-      ))
-    ] })
-  ] });
+  (0, import_react.useEffect)(() => {
+    if (!props.noUpdateSelectedTeam && props.selectedTeam) {
+      (0, import_promises.runAsynchronouslyWithAlert)(user?.setSelectedTeam(props.selectedTeam));
+    }
+  }, [props.noUpdateSelectedTeam, props.selectedTeam]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_stack_ui.Select,
+    {
+      value: selectedTeam?.id,
+      onValueChange: (value) => {
+        (0, import_promises.runAsynchronouslyWithAlert)(async () => {
+          const team = teams?.find((team2) => team2.id === value);
+          if (!team) {
+            throw new Error("Team not found, this should not happen");
+          }
+          if (!props.noUpdateSelectedTeam) {
+            await user?.setSelectedTeam(team);
+          }
+          if (props.urlMap) {
+            router.push(props.urlMap(team));
+          }
+        });
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectTrigger, { className: "stack-scope", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectValue, { placeholder: "Select team" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.SelectContent, { className: "stack-scope", children: [
+          teams && teams.map((team) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectItem, { value: team.id, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamIcon, { displayName: team.displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: team.displayName })
+          ] }) }, team.id)),
+          teams?.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SelectLabel, { children: "No teams" }) })
+        ] })
+      ]
+    }
+  );
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SelectedTeamSwitcher
+});
 //# sourceMappingURL=selected-team-switcher.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useUser,\n  Text,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  DropdownMenuLabel,\n  useStackApp,\n} from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Check } from \"lucide-react\";\nimport { useRouter } from \"next/navigation\";\nimport { useMemo } from \"react\";\n\ntype SelectedTeamSwitcherProps = {\n  projectUrlMap?: (projectId: string) => string,\n};\n\nfunction TeamIcon(props: { displayName: string }) {\n  return (\n    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '1.5rem', height: '1.5rem', marginRight: '0.5rem', borderRadius: '0.25rem', backgroundColor: 'rgb(228 228 231)' }}>\n      <Text style={{ color: 'black', fontWeight: 400 }}>{props.displayName.slice(0, 1).toUpperCase()}</Text>\n    </div>\n  );\n}\n\nexport default function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  const user = useUser();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <TeamIcon displayName={selectedTeam?.displayName || ''} />\n          <Text>{selectedTeam?.displayName || 'Select team'}</Text>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent style={{ zIndex: 1500 }}>\n        <DropdownMenuLabel>Teams</DropdownMenuLabel>\n        {teams && teams.map(team => (\n          <DropdownMenuItem\n            key={team.id}\n            onClick={() => {\n              runAsynchronouslyWithAlert(async () => {\n                await user?.setSelectedTeam(team);\n                if (props.projectUrlMap) {\n                  router.push(props.projectUrlMap(team.id));\n                }\n              });\n            }}\n            style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}\n          >\n            <div style={{ display: 'flex', alignItems: 'center' }}>\n              <TeamIcon displayName={team.displayName} />\n              <Text>{team.displayName}</Text>\n            </div>\n            <Check style={{ marginLeft: '0.5rem', visibility: team.id === selectedTeam?.id ? 'visible' : 'hidden', height: '1rem', width: '1rem' }} />\n          </DropdownMenuItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,eASO;AACP,sBAA2C;AAC3C,0BAAsB;AACtB,wBAA0B;AAC1B,mBAAwB;AASlB;AAHN,SAAS,SAAS,OAAgC;AAChD,SACE,4CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,UAAU,OAAO,UAAU,QAAQ,UAAU,aAAa,UAAU,cAAc,WAAW,iBAAiB,mBAAmB,GACpM,sDAAC,iBAAK,OAAO,EAAE,OAAO,SAAS,YAAY,IAAI,GAAI,gBAAM,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GACjG;AAEJ;AAEe,SAAR,qBAAsC,OAAkC;AAC7E,QAAM,WAAO,kBAAQ;AACrB,QAAM,aAAS,6BAAU;AACzB,QAAM,eAAe,MAAM;AAC3B,QAAM,WAAW,MAAM,SAAS;AAChC,QAAM,YAAQ,sBAAQ,MAAM,UAAU,KAAK,CAAC,GAAG,MAAM,EAAE,OAAO,cAAc,KAAK,IAAI,EAAE,GAAG,CAAC,UAAU,YAAY,CAAC;AAElH,SACE,6CAAC,yBACC;AAAA,gDAAC,gCACC,uDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,kDAAC,YAAS,aAAa,cAAc,eAAe,IAAI;AAAA,MACxD,4CAAC,iBAAM,wBAAc,eAAe,eAAc;AAAA,OACpD,GACF;AAAA,IACA,6CAAC,gCAAoB,OAAO,EAAE,QAAQ,KAAK,GACzC;AAAA,kDAAC,8BAAkB,mBAAK;AAAA,MACvB,SAAS,MAAM,IAAI,UAClB;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM;AACb,4DAA2B,YAAY;AACrC,oBAAM,MAAM,gBAAgB,IAAI;AAChC,kBAAI,MAAM,eAAe;AACvB,uBAAO,KAAK,MAAM,cAAc,KAAK,EAAE,CAAC;AAAA,cAC1C;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,gBAAgB;AAAA,UAEhF;AAAA,yDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,0DAAC,YAAS,aAAa,KAAK,aAAa;AAAA,cACzC,4CAAC,iBAAM,eAAK,aAAY;AAAA,eAC1B;AAAA,YACA,4CAAC,6BAAM,OAAO,EAAE,YAAY,UAAU,YAAY,KAAK,OAAO,cAAc,KAAK,YAAY,UAAU,QAAQ,QAAQ,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA,QAfnI,KAAK;AAAA,MAgBZ,CACD;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { Team, useUser } from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { useRouter } from \"next/navigation\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n  Typography,\n} from \"@stackframe/stack-ui\";\nimport { useEffect, useMemo } from \"react\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nfunction TeamIcon(props: { displayName: string }) {\n  return (\n    <div className=\"flex items-center justify-center w-6 h-6 mr-2 rounded bg-gray-200\">\n      <Typography>{props.displayName.slice(0, 1).toUpperCase()}</Typography>\n    </div>\n  );\n}\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  const user = useUser();\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\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {teams && teams.map(team => (\n          <SelectItem value={team.id} key={team.id}>\n            <div className=\"flex items-center\">\n              <TeamIcon displayName={team.displayName} />\n              <Typography>{team.displayName}</Typography>\n            </div>\n          </SelectItem>\n        ))}\n\n        {teams?.length === 0 && (\n          <SelectGroup>\n            <SelectLabel>No teams</SelectLabel>\n          </SelectGroup>\n        )}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,eAA8B;AAC9B,sBAA2C;AAC3C,wBAA0B;AAC1B,sBASO;AACP,mBAAmC;AAW7B;AAHN,SAAS,SAAS,OAAgC;AAChD,SACE,4CAAC,SAAI,WAAU,qEACb,sDAAC,8BAAY,gBAAM,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAC3D;AAEJ;AAEO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,WAAO,kBAAQ;AACrB,QAAM,aAAS,6BAAU;AACzB,QAAM,eAAe,MAAM,gBAAgB,MAAM;AACjD,QAAM,WAAW,MAAM,SAAS;AAChC,QAAM,YAAQ,sBAAQ,MAAM,UAAU,KAAK,CAAC,GAAG,MAAM,EAAE,OAAO,cAAc,KAAK,IAAI,EAAE,GAAG,CAAC,UAAU,YAAY,CAAC;AAElH,8BAAU,MAAM;AACd,QAAI,CAAC,MAAM,wBAAwB,MAAM,cAAc;AACrD,sDAA2B,MAAM,gBAAgB,MAAM,YAAY,CAAC;AAAA,IACtE;AAAA,EACF,GAAG,CAAC,MAAM,sBAAsB,MAAM,YAAY,CAAC;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,cAAc;AAAA,MACrB,eAAe,CAAC,UAAU;AACxB,wDAA2B,YAAY;AACrC,gBAAM,OAAO,OAAO,KAAK,CAAAA,UAAQA,MAAK,OAAO,KAAK;AAClD,cAAI,CAAC,MAAM;AACT,kBAAM,IAAI,MAAM,wCAAwC;AAAA,UAC1D;AAEA,cAAI,CAAC,MAAM,sBAAsB;AAC/B,kBAAM,MAAM,gBAAgB,IAAI;AAAA,UAClC;AACA,cAAI,MAAM,QAAQ;AAChB,mBAAO,KAAK,MAAM,OAAO,IAAI,CAAC;AAAA,UAChC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MAEA;AAAA,oDAAC,iCAAc,WAAU,eACvB,sDAAC,+BAAY,aAAY,eAAa,GACxC;AAAA,QACA,6CAAC,iCAAc,WAAU,eACtB;AAAA,mBAAS,MAAM,IAAI,UAClB,4CAAC,8BAAW,OAAO,KAAK,IACtB,uDAAC,SAAI,WAAU,qBACb;AAAA,wDAAC,YAAS,aAAa,KAAK,aAAa;AAAA,YACzC,4CAAC,8BAAY,eAAK,aAAY;AAAA,aAChC,KAJ+B,KAAK,EAKtC,CACD;AAAA,UAEA,OAAO,WAAW,KACjB,4CAAC,+BACC,sDAAC,+BAAY,sBAAQ,GACvB;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["team"]}

package/dist/components/user-button.d.mts

@@ -1,15 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
+import React from 'react';
 
 type UserButtonProps = {
     showUserInfo?: boolean;
     colorModeToggle?: () => void | Promise<void>;
     extraItems?: {
         text: string;
-        icon: React__default.ReactNode;
+        icon: React.ReactNode;
         onClick: () => void | Promise<void>;
     }[];
 };
 declare function UserButton(props: UserButtonProps): react_jsx_runtime.JSX.Element;
 
-export { UserButton as default };
+export { UserButton };

package/dist/components/user-button.d.ts

@@ -1,15 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default from 'react';
+import React from 'react';
 
 type UserButtonProps = {
     showUserInfo?: boolean;
     colorModeToggle?: () => void | Promise<void>;
     extraItems?: {
         text: string;
-        icon: React__default.ReactNode;
+        icon: React.ReactNode;
         onClick: () => void | Promise<void>;
     }[];
 };
 declare function UserButton(props: UserButtonProps): react_jsx_runtime.JSX.Element;
 
-export { UserButton as default };
+export { UserButton };