@stackframe/react 2.7.20

package/dist/components/user-button.js

@@ -0,0 +1,120 @@
+"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/user-button.tsx
+var user_button_exports = {};
+__export(user_button_exports, {
+  UserButton: () => UserButton
+});
+module.exports = __toCommonJS(user_button_exports);
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import__ = require("..");
+var import_translations = require("../lib/translations");
+var import_user_avatar = require("./elements/user-avatar");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Item(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DropdownMenuItem, { onClick: () => (0, import_promises.runAsynchronouslyWithAlert)(props.onClick), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2 items-center", children: [
+    props.icon,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: props.text })
+  ] }) });
+}
+function UserButton(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-[34px] w-[34px] rounded-full stack-scope" }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInner, { ...props }) });
+}
+function UserButtonInner(props) {
+  const user = (0, import__.useUser)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserButtonInnerInner, { ...props, user });
+}
+function UserButtonInnerInner(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = props.user;
+  const app = (0, import__.useStackApp)();
+  const iconProps = { size: 20, className: "h-4 w-4" };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DropdownMenuTrigger, { className: "outline-none stack-scope", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.UserAvatar, { user }),
+      user && props.showUserInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col justify-center text-left", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "max-w-40 truncate", children: user.displayName }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "max-w-40 truncate", variant: "secondary", type: "label", children: user.primaryEmail })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.DropdownMenuContent, { className: "stack-scope", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DropdownMenuLabel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.UserAvatar, { user }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "max-w-40 truncate", children: user.displayName }),
+          user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "max-w-40 truncate", variant: "secondary", type: "label", children: user.primaryEmail }),
+          !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: t("Not signed in") })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.DropdownMenuSeparator, {}),
+      user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: t("Account settings"),
+          onClick: async () => await app.redirectToAccountSettings(),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.CircleUser, { ...iconProps })
+        }
+      ),
+      !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: t("Sign in"),
+          onClick: async () => await app.redirectToSignIn(),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.LogIn, { ...iconProps })
+        }
+      ),
+      !user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: t("Sign up"),
+          onClick: async () => await app.redirectToSignUp(),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserPlus, { ...iconProps })
+        }
+      ),
+      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: t("Toggle theme"),
+          onClick: props.colorModeToggle,
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.SunMoon, { ...iconProps })
+        }
+      ),
+      user && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        Item,
+        {
+          text: t("Sign out"),
+          onClick: () => user.signOut(),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.LogOut, { ...iconProps })
+        }
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UserButton
+});
+//# sourceMappingURL=user-button.js.map

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

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

package/dist/components-page/account-settings.d.mts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { icons } from 'lucide-react';
+import React__default from 'react';
+
+declare function AccountSettings(props: {
+    fullPage?: boolean;
+    extraItems?: ({
+        title: string;
+        content: React__default.ReactNode;
+        id: string;
+    } & ({
+        icon?: React__default.ReactNode;
+    } | {
+        iconName?: keyof typeof icons;
+    }))[];
+}): react_jsx_runtime.JSX.Element;
+declare function TeamCreation(): react_jsx_runtime.JSX.Element;
+declare function useDeleteAccountSection(): react_jsx_runtime.JSX.Element | null;
+declare function EditableText(props: {
+    value: string;
+    onSave?: (value: string) => void | Promise<void>;
+}): react_jsx_runtime.JSX.Element;
+
+export { AccountSettings, EditableText, TeamCreation, useDeleteAccountSection };

package/dist/components-page/account-settings.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { icons } from 'lucide-react';
+import React__default from 'react';
+
+declare function AccountSettings(props: {
+    fullPage?: boolean;
+    extraItems?: ({
+        title: string;
+        content: React__default.ReactNode;
+        id: string;
+    } & ({
+        icon?: React__default.ReactNode;
+    } | {
+        iconName?: keyof typeof icons;
+    }))[];
+}): react_jsx_runtime.JSX.Element;
+declare function TeamCreation(): react_jsx_runtime.JSX.Element;
+declare function useDeleteAccountSection(): react_jsx_runtime.JSX.Element | null;
+declare function EditableText(props: {
+    value: string;
+    onSave?: (value: string) => void | Promise<void>;
+}): react_jsx_runtime.JSX.Element;
+
+export { AccountSettings, EditableText, TeamCreation, useDeleteAccountSection };