@stackframe/stack 2.4.28 → 2.5.1

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

@@ -2,8 +2,10 @@
 "use client";
 
 // src/components/oauth-button.tsx
+import { Button } from "@stackframe/stack-ui";
 import { useStackApp } from "..";
-import { Button } from "../components-core";
+import Color from "color";
+import styled from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 var iconSize = 22;
 function GoogleIcon({ iconSize: iconSize2 }) {
@@ -33,6 +35,21 @@ function MicrosoftIcon({ iconSize: iconSize2 }) {
 function SpotifyIcon({ iconSize: iconSize2 }) {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 496 512", children: /* @__PURE__ */ 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 = styled(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
@@ -95,14 +112,16 @@ function OAuthButton({
     }
   }
   return /* @__PURE__ */ jsx(
-    Button,
+    StyledButton,
     {
-      color: style.backgroundColor,
-      style: { border: style.border, height: "2.5rem", color: style.textColor },
       onClick: () => stackApp.signInWithOAuth(provider),
-      children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", width: "100%", gap: "1rem" }, children: [
+      $bgColor: style.backgroundColor,
+      $hoverBgColor: changeColor(Color(style.backgroundColor), 10),
+      $textColor: style.textColor,
+      $border: style.border,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full gap-4", children: [
         style.icon,
-        /* @__PURE__ */ jsxs("span", { style: { flexGrow: 1 }, children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
           type === "sign-up" ? "Sign up with " : "Sign in with ",
           style.name
         ] })
@@ -111,6 +130,6 @@ function OAuthButton({
   );
 }
 export {
-  OAuthButton as default
+  OAuthButton
 };
 //# sourceMappingURL=oauth-button.js.map

package/dist/esm/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"]}

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

@@ -1,20 +1,19 @@
 "use client";
 "use client";
 
-// src/components/password-reset-inner.tsx
+// src/components/password-reset-form.tsx
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
 import { useStackApp } from "..";
-import PasswordField from "./password-field";
-import FormWarningText from "./form-warning";
-import PredefinedMessageCard from "./message-cards/predefined-message-card";
-import MessageCard from "./message-cards/message-card";
-import MaybeFullPage from "./maybe-full-page";
-import { Button, Label, Text } from "../components-core";
+import { FormWarningText } from "./elements/form-warning";
+import { PredefinedMessageCard } from "./message-cards/predefined-message-card";
+import { MessageCard } from "./message-cards/message-card";
+import { MaybeFullPage } from "./elements/maybe-full-page";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Label, PasswordInput, Typography } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 var schema = yup.object().shape({
   password: yup.string().required("Please enter your password").test({
@@ -30,30 +29,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 } = useForm({
     resolver: yupResolver(schema)
   });
   const stackApp = useStackApp();
   const [finished, setFinished] = useState(false);
   const [resetError, setResetError] = useState(false);
+  const [loading, setLoading] = 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__ */ jsx(PredefinedMessageCard, { type: "passwordReset", fullPage });
   }
   if (resetError) {
-    return /* @__PURE__ */ jsx(MessageCard, { title: "Failed to reset password", fullPage, children: /* @__PURE__ */ jsx(Text, { children: "Failed to reset password. Please request a new password reset link" }) });
+    return /* @__PURE__ */ jsx(MessageCard, { title: "Failed to reset password", fullPage, children: "Failed to reset password. Please request a new password reset link" });
   }
   return /* @__PURE__ */ jsxs(MaybeFullPage, { fullPage, children: [
-    /* @__PURE__ */ jsx("div", { style: { textAlign: "center", marginBottom: "1.5rem" }, children: /* @__PURE__ */ jsx(Text, { size: "xl", as: "h2", children: "Reset Your Password" }) }),
+    /* @__PURE__ */ jsx("div", { className: "text-center mb-6", children: /* @__PURE__ */ jsx(Typography, { type: "h2", children: "Reset Your Password" }) }),
     /* @__PURE__ */ jsxs(
       "form",
       {
@@ -61,9 +66,9 @@ function PasswordResetInner({ code, fullPage = false }) {
         onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
         noValidate: true,
         children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "password", children: "New Password" }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "password", className: "mb-1", children: "New Password" }),
           /* @__PURE__ */ jsx(
-            PasswordField,
+            PasswordInput,
             {
               id: "password",
               ...register("password"),
@@ -74,9 +79,9 @@ function PasswordResetInner({ code, fullPage = false }) {
             }
           ),
           /* @__PURE__ */ jsx(FormWarningText, { text: errors.password?.message?.toString() }),
-          /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", style: { marginTop: "1rem" }, children: "Repeat New Password" }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: "Repeat New Password" }),
           /* @__PURE__ */ jsx(
-            PasswordField,
+            PasswordInput,
             {
               id: "repeat-password",
               ...register("passwordRepeat"),
@@ -87,13 +92,13 @@ function PasswordResetInner({ code, fullPage = false }) {
             }
           ),
           /* @__PURE__ */ jsx(FormWarningText, { text: errors.passwordRepeat?.message?.toString() }),
-          /* @__PURE__ */ jsx(Button, { style: { marginTop: "1.5rem" }, type: "submit", children: "Reset Password" })
+          /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: "Reset Password" })
         ]
       }
     )
   ] });
 }
 export {
-  PasswordResetInner as default
+  PasswordResetForm as default
 };
-//# sourceMappingURL=password-reset-inner.js.map
+//# sourceMappingURL=password-reset-form.js.map

package/dist/esm/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/esm/components/selected-team-switcher.js

@@ -2,62 +2,67 @@
 "use client";
 
 // src/components/selected-team-switcher.tsx
-import {
-  useUser,
-  Text,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuLabel
-} from "..";
+import { useUser } from "..";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Check } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useMemo } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+  Typography
+} from "@stackframe/stack-ui";
+import { useEffect, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function TeamIcon(props) {
-  return /* @__PURE__ */ 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__ */ jsx(Text, { style: { color: "black", fontWeight: 400 }, children: props.displayName.slice(0, 1).toUpperCase() }) });
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-6 h-6 mr-2 rounded bg-gray-200", children: /* @__PURE__ */ jsx(Typography, { children: props.displayName.slice(0, 1).toUpperCase() }) });
 }
 function SelectedTeamSwitcher(props) {
   const user = useUser();
   const router = useRouter();
-  const selectedTeam = user?.selectedTeam;
+  const selectedTeam = user?.selectedTeam || props.selectedTeam;
   const rawTeams = user?.useTeams();
   const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx(TeamIcon, { displayName: selectedTeam?.displayName || "" }),
-      /* @__PURE__ */ jsx(Text, { children: selectedTeam?.displayName || "Select team" })
-    ] }) }),
-    /* @__PURE__ */ jsxs(DropdownMenuContent, { style: { zIndex: 1500 }, children: [
-      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Teams" }),
-      teams && teams.map((team) => /* @__PURE__ */ jsxs(
-        DropdownMenuItem,
-        {
-          onClick: () => {
-            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__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx(TeamIcon, { displayName: team.displayName }),
-              /* @__PURE__ */ jsx(Text, { children: team.displayName })
-            ] }),
-            /* @__PURE__ */ jsx(Check, { style: { marginLeft: "0.5rem", visibility: team.id === selectedTeam?.id ? "visible" : "hidden", height: "1rem", width: "1rem" } })
-          ]
-        },
-        team.id
-      ))
-    ] })
-  ] });
+  useEffect(() => {
+    if (!props.noUpdateSelectedTeam && props.selectedTeam) {
+      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));
+    }
+  }, [props.noUpdateSelectedTeam, props.selectedTeam]);
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      value: selectedTeam?.id,
+      onValueChange: (value) => {
+        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__ */ jsx(SelectTrigger, { className: "stack-scope", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select team" }) }),
+        /* @__PURE__ */ jsxs(SelectContent, { className: "stack-scope", children: [
+          teams && teams.map((team) => /* @__PURE__ */ jsx(SelectItem, { value: team.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx(TeamIcon, { displayName: team.displayName }),
+            /* @__PURE__ */ jsx(Typography, { children: team.displayName })
+          ] }) }, team.id)),
+          teams?.length === 0 && /* @__PURE__ */ jsx(SelectGroup, { children: /* @__PURE__ */ jsx(SelectLabel, { children: "No teams" }) })
+        ] })
+      ]
+    }
+  );
 }
 export {
-  SelectedTeamSwitcher as default
+  SelectedTeamSwitcher
 };
 //# sourceMappingURL=selected-team-switcher.js.map

package/dist/esm/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":";;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AASlB,cAeE,YAfF;AAHN,SAAS,SAAS,OAAgC;AAChD,SACE,oBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,UAAU,OAAO,UAAU,QAAQ,UAAU,aAAa,UAAU,cAAc,WAAW,iBAAiB,mBAAmB,GACpM,8BAAC,QAAK,OAAO,EAAE,OAAO,SAAS,YAAY,IAAI,GAAI,gBAAM,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GACjG;AAEJ;AAEe,SAAR,qBAAsC,OAAkC;AAC7E,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe,MAAM;AAC3B,QAAM,WAAW,MAAM,SAAS;AAChC,QAAM,QAAQ,QAAQ,MAAM,UAAU,KAAK,CAAC,GAAG,MAAM,EAAE,OAAO,cAAc,KAAK,IAAI,EAAE,GAAG,CAAC,UAAU,YAAY,CAAC;AAElH,SACE,qBAAC,gBACC;AAAA,wBAAC,uBACC,+BAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,0BAAC,YAAS,aAAa,cAAc,eAAe,IAAI;AAAA,MACxD,oBAAC,QAAM,wBAAc,eAAe,eAAc;AAAA,OACpD,GACF;AAAA,IACA,qBAAC,uBAAoB,OAAO,EAAE,QAAQ,KAAK,GACzC;AAAA,0BAAC,qBAAkB,mBAAK;AAAA,MACvB,SAAS,MAAM,IAAI,UAClB;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,MAAM;AACb,uCAA2B,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,iCAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,kCAAC,YAAS,aAAa,KAAK,aAAa;AAAA,cACzC,oBAAC,QAAM,eAAK,aAAY;AAAA,eAC1B;AAAA,YACA,oBAAC,SAAM,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":";;;AACA,SAAe,eAAe;AAC9B,SAAS,kCAAkC;AAC3C,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,eAAe;AAW7B,cA2CM,YA3CN;AAHN,SAAS,SAAS,OAAgC;AAChD,SACE,oBAAC,SAAI,WAAU,qEACb,8BAAC,cAAY,gBAAM,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAC3D;AAEJ;AAEO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe,MAAM,gBAAgB,MAAM;AACjD,QAAM,WAAW,MAAM,SAAS;AAChC,QAAM,QAAQ,QAAQ,MAAM,UAAU,KAAK,CAAC,GAAG,MAAM,EAAE,OAAO,cAAc,KAAK,IAAI,EAAE,GAAG,CAAC,UAAU,YAAY,CAAC;AAElH,YAAU,MAAM;AACd,QAAI,CAAC,MAAM,wBAAwB,MAAM,cAAc;AACrD,iCAA2B,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,mCAA2B,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,4BAAC,iBAAc,WAAU,eACvB,8BAAC,eAAY,aAAY,eAAa,GACxC;AAAA,QACA,qBAAC,iBAAc,WAAU,eACtB;AAAA,mBAAS,MAAM,IAAI,UAClB,oBAAC,cAAW,OAAO,KAAK,IACtB,+BAAC,SAAI,WAAU,qBACb;AAAA,gCAAC,YAAS,aAAa,KAAK,aAAa;AAAA,YACzC,oBAAC,cAAY,eAAK,aAAY;AAAA,aAChC,KAJ+B,KAAK,EAKtC,CACD;AAAA,UAEA,OAAO,WAAW,KACjB,oBAAC,eACC,8BAAC,eAAY,sBAAQ,GACvB;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["team"]}

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

@@ -2,51 +2,26 @@
 "use client";
 
 // src/components/user-button.tsx
-import React, { Suspense } from "react";
+import { Suspense } from "react";
 import {
   useUser,
-  Text,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  useStackApp,
-  Skeleton
+  useStackApp
 } from "..";
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import UserAvatar from "./user-avatar";
+import { UserAvatar } from "./elements/user-avatar";
 import { useRouter } from "next/navigation";
-import { typedEntries, typedFromEntries } from "@stackframe/stack-shared/dist/utils/objects";
-import styled from "styled-components";
 import { CircleUser, LogIn, SunMoon, UserPlus, LogOut } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
-var icons = typedFromEntries(typedEntries({
-  CircleUser,
-  UserPlus,
-  SunMoon,
-  LogIn,
-  LogOut
-}).map(([key, value]) => {
-  const styledComponent = styled(value)`
-    height: 1rem;
-    width: 1rem;
-  `;
-  return [
-    key,
-    React.createElement(styledComponent, { size: 20 })
-  ];
-}));
 function Item(props) {
   return /* @__PURE__ */ jsxs(
     DropdownMenuItem,
     {
       onClick: () => runAsynchronouslyWithAlert(props.onClick),
-      style: { display: "flex", gap: "0.5rem", alignItems: "center" },
+      className: "flex gap-2 items-center",
       children: [
         props.icon,
-        /* @__PURE__ */ jsx(Text, { children: props.text })
+        /* @__PURE__ */ jsx(Typography, { children: props.text })
       ]
     }
   );
@@ -68,27 +43,23 @@ function UserButtonInnerInner(props) {
   const user = props.user;
   const app = useStackApp();
   const router = useRouter();
-  const textStyles = {
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    margin: 0
-  };
+  const iconProps = { size: 20, className: "h-4 w-4" };
+  const textClasses = "text-ellipsis whitespace-nowrap overflow-hidden";
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { className: "outline-none stack-scope", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
       /* @__PURE__ */ jsx(UserAvatar, { user }),
-      user && props.showUserInfo && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
-        /* @__PURE__ */ jsx(Text, { style: textStyles, children: user.displayName }),
-        /* @__PURE__ */ jsx(Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })
+      user && props.showUserInfo && /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
+        /* @__PURE__ */ jsx(Typography, { className: textClasses, children: user.displayName }),
+        /* @__PURE__ */ jsx(Typography, { className: textClasses, variant: "secondary", type: "label", children: user.primaryEmail })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs(DropdownMenuContent, { style: { zIndex: 1500 }, children: [
-      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "stack-scope", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
         /* @__PURE__ */ jsx(UserAvatar, { user }),
         /* @__PURE__ */ jsxs("div", { children: [
-          user && /* @__PURE__ */ jsx(Text, { children: user.displayName }),
-          user && /* @__PURE__ */ jsx(Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail }),
-          !user && /* @__PURE__ */ jsx(Text, { children: "Not signed in" })
+          user && /* @__PURE__ */ jsx(Typography, { children: user.displayName }),
+          user && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: user.primaryEmail }),
+          !user && /* @__PURE__ */ jsx(Typography, { children: "Not signed in" })
         ] })
       ] }) }),
       /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
@@ -97,7 +68,7 @@ function UserButtonInnerInner(props) {
         {
           text: "Account settings",
           onClick: () => router.push(app.urls.accountSettings),
-          icon: icons.CircleUser
+          icon: /* @__PURE__ */ jsx(CircleUser, { ...iconProps })
         }
       ),
       !user && /* @__PURE__ */ jsx(
@@ -105,7 +76,7 @@ function UserButtonInnerInner(props) {
         {
           text: "Sign in",
           onClick: () => router.push(app.urls.signIn),
-          icon: icons.LogIn
+          icon: /* @__PURE__ */ jsx(LogIn, { ...iconProps })
         }
       ),
       !user && /* @__PURE__ */ jsx(
@@ -113,7 +84,7 @@ function UserButtonInnerInner(props) {
         {
           text: "Sign up",
           onClick: () => router.push(app.urls.signUp),
-          icon: icons.UserPlus
+          icon: /* @__PURE__ */ jsx(UserPlus, { ...iconProps })
         }
       ),
       user && props.extraItems && props.extraItems.map((item, index) => /* @__PURE__ */ jsx(Item, { ...item }, index)),
@@ -122,7 +93,7 @@ function UserButtonInnerInner(props) {
         {
           text: "Toggle theme",
           onClick: props.colorModeToggle,
-          icon: icons.SunMoon
+          icon: /* @__PURE__ */ jsx(SunMoon, { ...iconProps })
         }
       ),
       user && /* @__PURE__ */ jsx(
@@ -130,13 +101,13 @@ function UserButtonInnerInner(props) {
         {
           text: "Sign out",
           onClick: () => user.signOut(),
-          icon: icons.LogOut
+          icon: /* @__PURE__ */ jsx(LogOut, { ...iconProps })
         }
       )
     ] })
   ] });
 }
 export {
-  UserButton as default
+  UserButton
 };
 //# sourceMappingURL=user-button.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/user-button.tsx"],"sourcesContent":["'use client';\nimport React, { Suspense } from \"react\";\nimport {\n  useUser,\n  Text,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  useStackApp,\n  Skeleton,\n  CurrentUser,\n} from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport UserAvatar from \"./user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { typedEntries, typedFromEntries } from \"@stackframe/stack-shared/dist/utils/objects\";\nimport styled from \"styled-components\";\nimport { CircleUser, LogIn, SunMoon, UserPlus, LogOut } from \"lucide-react\";\n\nconst icons = typedFromEntries(typedEntries({\n  CircleUser,\n  UserPlus,\n  SunMoon,\n  LogIn,\n  LogOut,\n} as const).map(([key, value]) => {\n  const styledComponent = styled(value)`\n    height: 1rem;\n    width: 1rem;\n  `;\n  return [\n    key,\n    React.createElement(styledComponent, { size: 20 })\n  ];\n}));\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem \n      onClick={() => runAsynchronouslyWithAlert(props.onClick)}\n      style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}\n    >\n      {props.icon}\n      <Text>{props.text}</Text>\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 default 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 user = props.user;\n  const app = useStackApp();\n  const router = useRouter();\n\n  const textStyles = {\n    textOverflow: 'ellipsis', \n    whiteSpace: 'nowrap', \n    overflow: 'hidden',\n    margin: 0,\n  };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n          <UserAvatar user={user} />\n          {user && props.showUserInfo && <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>\n            <Text style={textStyles}>{user.displayName}</Text>\n            <Text style={{ ...textStyles, fontWeight: 400 }} variant=\"secondary\" size=\"sm\">{user.primaryEmail}</Text>\n          </div>}\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent style={{ zIndex: 1500 }}>\n        <DropdownMenuLabel>\n          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>\n            <UserAvatar user={user} />\n            <div>\n              {user && <Text>{user.displayName}</Text>}\n              {user && <Text variant=\"secondary\" size=\"sm\" style={{ fontWeight: 400 }}>{user.primaryEmail}</Text>}\n              {!user && <Text>Not signed in</Text>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item \n          text=\"Account settings\" \n          onClick={() => router.push(app.urls.accountSettings)}\n          icon={icons.CircleUser}\n        />}\n        {!user && <Item\n          text=\"Sign in\"\n          onClick={() => router.push(app.urls.signIn)}\n          icon={icons.LogIn}\n        />}\n        {!user && <Item\n          text=\"Sign up\"\n          onClick={() => router.push(app.urls.signUp)}\n          icon={icons.UserPlus}\n        />}\n        {user && props.extraItems && props.extraItems.map((item, index) => (\n          <Item key={index} {...item} />\n        ))}\n        {props.colorModeToggle && (\n          <Item \n            text=\"Toggle theme\" \n            onClick={props.colorModeToggle} \n            icon={icons.SunMoon}\n          />\n        )}\n        {user && <Item \n          text=\"Sign out\" \n          onClick={() => user.signOut()} \n          icon={icons.LogOut}\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 React, { Suspense } from \"react\";\nimport {\n  useUser,\n  useStackApp,\n  CurrentUser,\n} from \"..\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { UserAvatar } from \"./elements/user-avatar\";\nimport { useRouter } from \"next/navigation\";\nimport { CircleUser, LogIn, SunMoon, UserPlus, LogOut } from \"lucide-react\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Skeleton, Typography } from \"@stackframe/stack-ui\";\n\nfunction Item(props: { text: string, icon: React.ReactNode, onClick: () => void | Promise<void> }) {\n  return (\n    <DropdownMenuItem \n      onClick={() => runAsynchronouslyWithAlert(props.onClick)}\n      className=\"flex gap-2 items-center\"\n    >\n      {props.icon}\n      <Typography>{props.text}</Typography>\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 user = props.user;\n  const app = useStackApp();\n  const router = useRouter();\n  \n  const iconProps = { size: 20, className: 'h-4 w-4' };\n  const textClasses = 'text-ellipsis whitespace-nowrap overflow-hidden';\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\">\n              <Typography className={textClasses}>{user.displayName}</Typography>\n              <Typography className={textClasses} 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>{user.displayName}</Typography>}\n              {user && <Typography variant=\"secondary\" type='label'>{user.primaryEmail}</Typography>}\n              {!user && <Typography>Not signed in</Typography>}\n            </div>\n          </div>\n        </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {user && <Item \n          text=\"Account settings\" \n          onClick={() => router.push(app.urls.accountSettings)}\n          icon={<CircleUser {...iconProps} />}\n        />}\n        {!user && <Item\n          text=\"Sign in\"\n          onClick={() => router.push(app.urls.signIn)}\n          icon={<LogIn {...iconProps} />}\n        />}\n        {!user && <Item\n          text=\"Sign up\"\n          onClick={() => router.push(app.urls.signUp)}\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=\"Toggle theme\" \n            onClick={props.colorModeToggle} \n            icon={<SunMoon {...iconProps} />}\n          />\n        )}\n        {user && <Item \n          text=\"Sign out\" \n          onClick={() => user.signOut()} \n          icon={<LogOut {...iconProps} />}\n        />}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}