@stackframe/stack 2.3.4 → 2.3.7

package/dist/components/redirect-message-card.js

@@ -1,61 +1,113 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRouter } from "next/navigation";
-import { useStackApp } from "..";
-import MessageCard from "./message-card";
-import { Text, Button } from "../components-core";
-import { neverResolve } from "@stackframe/stack-shared/dist/utils/promises";
-export default function RedirectMessageCard({ type, fullPage = false, }) {
-    const stackApp = useStackApp();
-    const router = useRouter();
-    let title;
-    let primaryUrl;
-    let secondaryUrl = null;
-    let message = null;
-    let primaryButton;
-    let secondaryButton = null;
-    switch (type) {
-        case 'signedIn': {
-            title = "You are already signed in";
-            primaryUrl = stackApp.urls.home;
-            secondaryUrl = stackApp.urls.signOut;
-            primaryButton = "Go to Home";
-            secondaryButton = "Sign Out";
-            break;
-        }
-        case 'signedOut': {
-            title = "You are not currently signed in.";
-            primaryUrl = stackApp.urls.home;
-            primaryButton = "Go to Home";
-            break;
-        }
-        case 'emailSent': {
-            title = "Email sent!";
-            message = 'Please check your inbox. Make sure to check your spam folder.';
-            primaryUrl = stackApp.urls.home;
-            primaryButton = "Go to Home";
-            break;
-        }
-        case 'passwordReset': {
-            title = "Password reset successfully!";
-            message = 'Your password has been reset. You can now sign in with your new password.';
-            primaryUrl = stackApp.urls.signIn;
-            primaryButton = "Go to Sign In";
-            break;
-        }
-        case 'emailVerified': {
-            title = "Email verified!";
-            message = 'Your have successfully verified your email.';
-            primaryUrl = stackApp.urls.home;
-            primaryButton = "Go to Home";
-            break;
-        }
+"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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/redirect-message-card.tsx
+var redirect_message_card_exports = {};
+__export(redirect_message_card_exports, {
+  default: () => RedirectMessageCard
+});
+module.exports = __toCommonJS(redirect_message_card_exports);
+var import_navigation = require("next/navigation");
+var import__ = require("..");
+var import_message_card = __toESM(require("./message-card"));
+var import_components_core = require("../components-core");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_jsx_runtime = require("react/jsx-runtime");
+function RedirectMessageCard({
+  type,
+  fullPage = false
+}) {
+  const stackApp = (0, import__.useStackApp)();
+  const router = (0, import_navigation.useRouter)();
+  let title;
+  let primaryUrl;
+  let secondaryUrl = null;
+  let message = null;
+  let primaryButton;
+  let secondaryButton = null;
+  switch (type) {
+    case "signedIn": {
+      title = "You are already signed in";
+      primaryUrl = stackApp.urls.home;
+      secondaryUrl = stackApp.urls.signOut;
+      primaryButton = "Go to Home";
+      secondaryButton = "Sign Out";
+      break;
     }
-    return (_jsxs(MessageCard, { title: title, fullPage: fullPage, children: [message && _jsx(Text, { children: message }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: '16px', marginTop: 20 }, children: [secondaryButton && (_jsx(Button, { variant: "secondary", onClick: async () => {
-                            router.push(stackApp.urls.signOut.toString());
-                            await neverResolve();
-                        }, children: secondaryButton })), _jsx(Button, { onClick: async () => {
-                            router.push(primaryUrl.toString());
-                            await neverResolve();
-                        }, children: primaryButton })] })] }));
+    case "signedOut": {
+      title = "You are not currently signed in.";
+      primaryUrl = stackApp.urls.home;
+      primaryButton = "Go to Home";
+      break;
+    }
+    case "emailSent": {
+      title = "Email sent!";
+      message = "Please check your inbox. Make sure to check your spam folder.";
+      primaryUrl = stackApp.urls.home;
+      primaryButton = "Go to Home";
+      break;
+    }
+    case "passwordReset": {
+      title = "Password reset successfully!";
+      message = "Your password has been reset. You can now sign in with your new password.";
+      primaryUrl = stackApp.urls.signIn;
+      primaryButton = "Go to Sign In";
+      break;
+    }
+    case "emailVerified": {
+      title = "Email verified!";
+      message = "Your have successfully verified your email.";
+      primaryUrl = stackApp.urls.home;
+      primaryButton = "Go to Home";
+      break;
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_message_card.default, { title, fullPage, children: [
+    message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: "16px", marginTop: 20 }, children: [
+      secondaryButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components_core.Button,
+        {
+          variant: "secondary",
+          onClick: async () => {
+            router.push(stackApp.urls.signOut.toString());
+            await (0, import_promises.neverResolve)();
+          },
+          children: secondaryButton
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Button, { onClick: async () => {
+        router.push(primaryUrl.toString());
+        await (0, import_promises.neverResolve)();
+      }, children: primaryButton })
+    ] })
+  ] });
 }

package/dist/components/separator-with-text.d.mts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function SeparatorWithText({ text }: {
+    text: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { SeparatorWithText as default };

package/dist/components/separator-with-text.d.ts

@@ -1,3 +1,7 @@
-export default function SeparatorWithText({ text }: {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function SeparatorWithText({ text }: {
     text: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): react_jsx_runtime.JSX.Element;
+
+export { SeparatorWithText as default };

package/dist/components/separator-with-text.js

@@ -1,6 +1,36 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Separator, Text } from "../components-core";
-export default function SeparatorWithText({ text }) {
-    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '1.5rem', marginBottom: '1.5rem' }, children: [_jsx("div", { style: { flex: 1 }, children: _jsx(Separator, {}) }), _jsx(Text, { style: { padding: '0 16px' }, variant: "secondary", size: 'sm', children: text }), _jsx("div", { style: { flex: 1 }, children: _jsx(Separator, {}) })] }));
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/separator-with-text.tsx
+var separator_with_text_exports = {};
+__export(separator_with_text_exports, {
+  default: () => SeparatorWithText
+});
+module.exports = __toCommonJS(separator_with_text_exports);
+var import_components_core = require("../components-core");
+var import_jsx_runtime = require("react/jsx-runtime");
+function SeparatorWithText({ text }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", marginTop: "1.5rem", marginBottom: "1.5rem" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Separator, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Text, { style: { padding: "0 16px" }, variant: "secondary", size: "sm", children: text }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components_core.Separator, {}) })
+  ] });
 }

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

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { User } 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';
+
+declare function UserAvatar(props: {
+    size?: number;
+    user: User | null;
+}): react_jsx_runtime.JSX.Element;
+
+export { UserAvatar as default };

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

@@ -1,3 +1,13 @@
-export default function UserAvatar(props: {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { User } 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';
+
+declare function UserAvatar(props: {
     size?: number;
-}): import("react/jsx-runtime").JSX.Element | null;
+    user: User | null;
+}): react_jsx_runtime.JSX.Element;
+
+export { UserAvatar as default };

package/dist/components/user-avatar.js

@@ -1,9 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, AvatarFallback, AvatarImage, Text, useUser } from "..";
-export default function UserAvatar(props) {
-    const user = useUser();
-    if (!user) {
-        return null;
-    }
-    return (_jsxs(Avatar, { style: { height: props.size, width: props.size }, children: [_jsx(AvatarImage, { src: user.profileImageUrl || '' }), _jsx(AvatarFallback, { children: _jsx(Text, { style: { fontWeight: 500 }, children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) })] }));
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/user-avatar.tsx
+var user_avatar_exports = {};
+__export(user_avatar_exports, {
+  default: () => UserAvatar
+});
+module.exports = __toCommonJS(user_avatar_exports);
+var import_rx = require("react-icons/rx");
+var import__ = require("..");
+var import_jsx_runtime = require("react/jsx-runtime");
+function UserAvatar(props) {
+  const user = props.user;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.Avatar, { style: { height: props.size, width: props.size }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarImage, { src: user?.profileImageUrl || "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: { fontWeight: 500 }, children: (user?.displayName || user?.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_rx.RxPerson, { size: props.size }) })
+  ] });
 }

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

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

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

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

package/dist/components/user-button.js

@@ -1,27 +1,163 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useUser, Text, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuLabel, DropdownMenuSeparator, useStackApp, useDesign } from "..";
-import { RxPerson, RxEnter, RxSun, RxShadow } from "react-icons/rx";
-import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
-import { SECONDARY_FONT_COLORS } from "../utils/constants";
-import UserAvatar from "./user-avatar";
-import { useRouter } from "next/navigation";
+"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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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/user-button.tsx
+var user_button_exports = {};
+__export(user_button_exports, {
+  default: () => UserButton
+});
+module.exports = __toCommonJS(user_button_exports);
+var import_react = __toESM(require("react"));
+var import__ = require("..");
+var import_rx = require("react-icons/rx");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_constants = require("../utils/constants");
+var import_user_avatar = __toESM(require("./user-avatar"));
+var import_navigation = require("next/navigation");
+var import_objects = require("@stackframe/stack-shared/dist/utils/objects");
+var import_styled_components = __toESM(require("styled-components"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var icons = (0, import_objects.typedFromEntries)((0, import_objects.typedEntries)({
+  RxPencil2: import_rx.RxPencil2,
+  RxPerson: import_rx.RxPerson,
+  RxEnter: import_rx.RxEnter,
+  RxHalf2: import_rx.RxHalf2,
+  RxFilePlus: import_rx.RxFilePlus
+}).map(([key, value]) => {
+  const styledComponent = (0, import_styled_components.default)(value)`
+    color: ${import_constants.SECONDARY_FONT_COLORS.light};
+
+    html[data-theme='dark'] & {
+      color: ${import_constants.SECONDARY_FONT_COLORS.dark};
+    }
+  `;
+  return [
+    key,
+    import_react.default.createElement(styledComponent, { size: 20 })
+  ];
+}));
 function Item(props) {
-    return (_jsxs(DropdownMenuItem, { onClick: () => runAsynchronously(props.onClick), style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [props.icon, _jsx(Text, { children: props.text })] }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import__.DropdownMenuItem,
+    {
+      onClick: () => (0, import_promises.runAsynchronously)(props.onClick),
+      style: { display: "flex", gap: "0.5rem", alignItems: "center" },
+      children: [
+        props.icon,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: props.text })
+      ]
+    }
+  );
 }
-export default function UserButton({ showUserInfo = false, showColorMode = true, }) {
-    const { colorMode, setColorMode } = useDesign();
-    const user = useUser();
-    const app = useStackApp();
-    const router = useRouter();
-    const textStyles = {
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden'
-    };
-    if (!user)
-        return null;
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, {}), showUserInfo && _jsxs("div", { style: { display: 'flex', flexDirection: 'column', justifyContent: 'center' }, children: [_jsx(Text, { style: textStyles, children: user.displayName }), _jsx(Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })] })] }) }), _jsxs(DropdownMenuContent, { style: { zIndex: 1500 }, children: [_jsx(DropdownMenuLabel, { children: _jsxs("div", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' }, children: [_jsx(UserAvatar, {}), _jsxs("div", { children: [_jsx(Text, { children: user.displayName }), _jsx(Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail })] })] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(Item, { text: "Account settings", onClick: () => runAsynchronously(router.push(app.urls.accountSettings)), icon: _jsx(RxPerson, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), showColorMode && _jsx(Item, { text: colorMode === 'dark' ? 'Light theme' : 'Dark theme', onClick: () => setColorMode(colorMode === 'dark' ? 'light' : 'dark'), icon: colorMode === 'dark' ?
-                            _jsx(RxSun, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) :
-                            _jsx(RxShadow, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) }), _jsx(Item, { text: "Sign out", onClick: () => user.signOut(), icon: _jsx(RxEnter, { size: 22, color: SECONDARY_FONT_COLORS[colorMode] }) })] })] }));
+function UserButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react.Suspense,
+    {
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Skeleton, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInnerInner, { ...props, user: null }) }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInner, { ...props })
+    }
+  );
+}
+function UserButtonInner(props) {
+  const user = (0, import__.useUser)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInnerInner, { ...props, user });
+}
+function UserButtonInnerInner(props) {
+  const user = props.user;
+  const app = (0, import__.useStackApp)();
+  const router = (0, import_navigation.useRouter)();
+  const textStyles = {
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    overflow: "hidden"
+  };
+  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", gap: "0.5rem", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.default, { user }),
+      user && props.showUserInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: textStyles, children: user.displayName }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { style: { ...textStyles, fontWeight: 400 }, variant: "secondary", size: "sm", children: user.primaryEmail })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import__.DropdownMenuContent, { style: { zIndex: 1500 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.default, { user }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { children: user.displayName }),
+          user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { variant: "secondary", size: "sm", style: { fontWeight: 400 }, children: user.primaryEmail }),
+          !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Text, { variant: "secondary", children: "Not signed in" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DropdownMenuSeparator, {}),
+      user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: "Account settings",
+          onClick: () => (0, import_promises.runAsynchronously)(router.push(app.urls.accountSettings)),
+          icon: icons.RxPerson
+        }
+      ),
+      !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: "Sign in",
+          onClick: () => (0, import_promises.runAsynchronously)(router.push(app.urls.signIn)),
+          icon: icons.RxPerson
+        }
+      ),
+      !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: "Sign up",
+          onClick: () => (0, import_promises.runAsynchronously)(router.push(app.urls.signUp)),
+          icon: icons.RxPencil2
+        }
+      ),
+      user && props.extraItems && props.extraItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Item, { ...item }, index)),
+      props.colorModeToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: "Toggle theme",
+          onClick: props.colorModeToggle,
+          icon: icons.RxHalf2
+        }
+      ),
+      user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: "Sign out",
+          onClick: () => user.signOut(),
+          icon: icons.RxEnter
+        }
+      )
+    ] })
+  ] });
 }

package/dist/components-core/avatar.d.mts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as _radix_ui_react_avatar from '@radix-ui/react-avatar';
+
+declare const Avatar: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/components-core/avatar.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export { Avatar, AvatarImage, AvatarFallback };
+import * as _radix_ui_react_avatar from '@radix-ui/react-avatar';
+
+declare const Avatar: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<_radix_ui_react_avatar.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+
+export { Avatar, AvatarFallback, AvatarImage };