@stackframe/tanstack-start 0.0.1 → 2.8.92

package/dist/esm/components/message-cards/known-error-message-card.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { KnownError } from "@stackframe/stack-shared";
+
+//#region src/components/message-cards/known-error-message-card.d.ts
+declare function KnownErrorMessageCard({
+  error,
+  fullPage
+}: {
+  error: KnownError;
+  fullPage?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { KnownErrorMessageCard };
+//# sourceMappingURL=known-error-message-card.d.ts.map

package/dist/esm/components/message-cards/known-error-message-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"known-error-message-card.d.ts","names":[],"sources":["../../../../src/components/message-cards/known-error-message-card.tsx"],"mappings":";;;;iBAYgB,qBAAA,CAAA;EACd,KAAA;EACA;AAAA;EAEA,KAAA,EAAO,UAAA;EACP,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/message-cards/known-error-message-card.js

@@ -0,0 +1,22 @@
+"use client";
+
+import { Typography } from "@stackframe/stack-ui";
+import { jsxs } from "react/jsx-runtime";
+import { useStackApp } from "../../index.js";
+import { MessageCard } from "./message-card.js";
+
+//#region src/components/message-cards/known-error-message-card.tsx
+function KnownErrorMessageCard({ error, fullPage = false }) {
+	const stackApp = useStackApp();
+	return /* @__PURE__ */ jsxs(MessageCard, {
+		title: "An error occurred",
+		fullPage,
+		primaryButtonText: "Go Home",
+		primaryAction: () => stackApp.redirectToHome(),
+		children: [/* @__PURE__ */ jsxs(Typography, { children: ["Error Code: ", error.errorCode] }), /* @__PURE__ */ jsxs(Typography, { children: ["Error Message: ", error.message] })]
+	});
+}
+
+//#endregion
+export { KnownErrorMessageCard };
+//# sourceMappingURL=known-error-message-card.js.map

package/dist/esm/components/message-cards/known-error-message-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"known-error-message-card.js","names":[],"sources":["../../../../src/components/message-cards/known-error-message-card.tsx"],"sourcesContent":["\"use client\";\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { KnownError } from \"@stackframe/stack-shared\";\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { useStackApp } from \"../..\";\nimport { MessageCard } from \"./message-card\";\n\nexport function KnownErrorMessageCard({\n  error,\n  fullPage=false,\n}: {\n  error: KnownError,\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n\n  return (\n    <MessageCard\n      title={\"An error occurred\"}\n      fullPage={fullPage}\n      primaryButtonText={\"Go Home\"}\n      primaryAction={() => stackApp.redirectToHome()}\n    >\n      {<Typography>Error Code: {error.errorCode}</Typography>}\n      {<Typography>Error Message: {error.message}</Typography>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,sBAAsB,EACpC,OACA,WAAS,SAIR;CACD,MAAM,WAAW,aAAa;AAE9B,QACE,qBAAC;EACC,OAAO;EACG;EACV,mBAAmB;EACnB,qBAAqB,SAAS,gBAAgB;aAE7C,qBAAC,yBAAW,gBAAa,MAAM,aAAuB,EACtD,qBAAC,yBAAW,mBAAgB,MAAM,WAAqB;GAC5C"}

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

@@ -0,0 +1,19 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/message-cards/message-card.d.ts
+declare function MessageCard({
+  fullPage,
+  ...props
+}: {
+  children?: React.ReactNode;
+  title: string;
+  fullPage?: boolean;
+  primaryButtonText?: string;
+  primaryAction?: () => Promise<void> | void;
+  secondaryButtonText?: string;
+  secondaryAction?: () => Promise<void> | void;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MessageCard };
+//# sourceMappingURL=message-card.d.ts.map

package/dist/esm/components/message-cards/message-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-card.d.ts","names":[],"sources":["../../../../src/components/message-cards/message-card.tsx"],"mappings":";;;;iBAWgB,WAAA,CAAA;EACZ,QAAA;EAAA,GAAmB;AAAA;EAEnB,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,KAAA;EACA,QAAA;EACA,iBAAA;EACA,aAAA,SAAsB,OAAA;EACtB,mBAAA;EACA,eAAA,SAAwB,OAAA;AAAA,IACzB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,43 @@
+'use client';
+
+import { Button, Typography } from "@stackframe/stack-ui";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MaybeFullPage } from "../elements/maybe-full-page.js";
+
+//#region src/components/message-cards/message-card.tsx
+function MessageCard({ fullPage = false, ...props }) {
+	return /* @__PURE__ */ jsx(MaybeFullPage, {
+		fullPage,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-center stack-scope flex flex-col gap-4",
+			style: {
+				maxWidth: "380px",
+				flexBasis: "380px",
+				padding: fullPage ? "1rem" : 0
+			},
+			children: [
+				/* @__PURE__ */ jsx(Typography, {
+					type: "h3",
+					children: props.title
+				}),
+				props.children,
+				(props.primaryButtonText || props.secondaryButtonText) && /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-center gap-4 my-5",
+					children: [props.secondaryButtonText && /* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						onClick: props.secondaryAction,
+						children: props.secondaryButtonText
+					}), props.primaryButtonText && /* @__PURE__ */ jsx(Button, {
+						onClick: props.primaryAction,
+						children: props.primaryButtonText
+					})]
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { MessageCard };
+//# sourceMappingURL=message-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"message-card.js","names":[],"sources":["../../../../src/components/message-cards/message-card.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport React from \"react\";\nimport { MaybeFullPage } from \"../elements/maybe-full-page\";\nimport { Button, Typography } from \"@stackframe/stack-ui\";\n\nexport function MessageCard(\n  { fullPage=false, ...props }:\n  {\n    children?: React.ReactNode,\n    title: string,\n    fullPage?: boolean,\n    primaryButtonText?: string,\n    primaryAction?: () => Promise<void> | void,\n    secondaryButtonText?: string,\n    secondaryAction?: () => Promise<void> | void,\n  }\n) {\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className=\"text-center stack-scope flex flex-col gap-4\" style={{ maxWidth: '380px', flexBasis: '380px', padding: fullPage ? '1rem' : 0 }}>\n        <Typography type='h3'>{props.title}</Typography>\n        {props.children}\n        {(props.primaryButtonText || props.secondaryButtonText) && (\n          <div className=\"flex justify-center gap-4 my-5\">\n            {props.secondaryButtonText && (\n              <Button variant=\"secondary\" onClick={props.secondaryAction}>\n                {props.secondaryButtonText}\n              </Button>\n            )}\n            {props.primaryButtonText && (\n              <Button onClick={props.primaryAction}>\n                {props.primaryButtonText}\n              </Button>\n            )}\n          </div>\n        )}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,YACd,EAAE,WAAS,OAAO,GAAG,SAUrB;AACA,QACE,oBAAC;EAAwB;YACvB,qBAAC;GAAI,WAAU;GAA8C,OAAO;IAAE,UAAU;IAAS,WAAW;IAAS,SAAS,WAAW,SAAS;IAAG;;IAC3I,oBAAC;KAAW,MAAK;eAAM,MAAM;MAAmB;IAC/C,MAAM;KACL,MAAM,qBAAqB,MAAM,wBACjC,qBAAC;KAAI,WAAU;gBACZ,MAAM,uBACL,oBAAC;MAAO,SAAQ;MAAY,SAAS,MAAM;gBACxC,MAAM;OACA,EAEV,MAAM,qBACL,oBAAC;MAAO,SAAS,MAAM;gBACpB,MAAM;OACA;MAEP;;IAEJ;GACQ"}

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

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/message-cards/predefined-message-card.d.ts
+declare function PredefinedMessageCard({
+  type,
+  fullPage
+}: {
+  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'unknownError' | 'signUpDisabled';
+  fullPage?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PredefinedMessageCard };
+//# sourceMappingURL=predefined-message-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"predefined-message-card.d.ts","names":[],"sources":["../../../../src/components/message-cards/predefined-message-card.tsx"],"mappings":";;;iBAYgB,qBAAA,CAAA;EACd,IAAA;EACA;AAAA;EAEA,IAAA;EACA,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,71 @@
+"use client";
+
+import { Typography } from "@stackframe/stack-ui";
+import { jsx } from "react/jsx-runtime";
+import { useStackApp } from "../../index.js";
+import { MessageCard } from "./message-card.js";
+import { useTranslation } from "../../lib/translations.js";
+
+//#region src/components/message-cards/predefined-message-card.tsx
+function PredefinedMessageCard({ type, fullPage = false }) {
+	const stackApp = useStackApp();
+	const { t } = useTranslation();
+	let title;
+	let message = null;
+	let primaryButton = null;
+	let secondaryButton = null;
+	let primaryAction = null;
+	let secondaryAction = null;
+	switch (type) {
+		case "signedIn":
+			title = t("You are already signed in");
+			primaryAction = () => stackApp.redirectToHome();
+			secondaryAction = () => stackApp.redirectToSignOut();
+			primaryButton = t("Go home");
+			secondaryButton = t("Sign out");
+			break;
+		case "signedOut":
+			title = t("You are not currently signed in.");
+			primaryAction = () => stackApp.redirectToSignIn();
+			primaryButton = t("Sign in");
+			break;
+		case "signUpDisabled":
+			title = t("Sign up for new users is not enabled at the moment.");
+			primaryAction = () => stackApp.redirectToHome();
+			secondaryAction = () => stackApp.redirectToSignIn();
+			primaryButton = t("Go home");
+			secondaryButton = t("Sign in");
+			break;
+		case "emailSent":
+			title = t("Email sent!");
+			message = t("If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.");
+			primaryAction = () => stackApp.redirectToHome();
+			primaryButton = t("Go home");
+			break;
+		case "passwordReset":
+			title = t("Password reset successfully!");
+			message = t("Your password has been reset. You can now sign in with your new password.");
+			primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });
+			primaryButton = t("Sign in");
+			break;
+		case "unknownError":
+			title = t("An unknown error occurred");
+			message = t("Please try again and if the problem persists, contact support.");
+			primaryAction = () => stackApp.redirectToHome();
+			primaryButton = t("Go home");
+			break;
+	}
+	return /* @__PURE__ */ jsx(MessageCard, {
+		title,
+		fullPage,
+		primaryButtonText: primaryButton,
+		primaryAction,
+		secondaryButtonText: secondaryButton || void 0,
+		secondaryAction: secondaryAction || void 0,
+		children: message && /* @__PURE__ */ jsx(Typography, { children: message })
+	});
+}
+
+//#endregion
+export { PredefinedMessageCard };
+//# sourceMappingURL=predefined-message-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"predefined-message-card.js","names":[],"sources":["../../../../src/components/message-cards/predefined-message-card.tsx"],"sourcesContent":["\"use client\";\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { Typography } from \"@stackframe/stack-ui\";\nimport { useStackApp } from \"../..\";\nimport { useTranslation } from \"../../lib/translations\";\nimport { MessageCard } from \"./message-card\";\n\nexport function PredefinedMessageCard({\n  type,\n  fullPage=false,\n}: {\n  type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'unknownError' | 'signUpDisabled',\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n  const { t } = useTranslation();\n\n  let title: string;\n  let message: string | null = null;\n  let primaryButton: string | null = null;\n  let secondaryButton: string | null = null;\n  let primaryAction: (() => Promise<void> | void) | null = null;\n  let secondaryAction: (() => Promise<void> | void) | null = null;\n\n  switch (type) {\n    case 'signedIn': {\n      title = t(\"You are already signed in\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignOut();\n      primaryButton = t(\"Go home\");\n      secondaryButton = t(\"Sign out\");\n      break;\n    }\n    case 'signedOut': {\n      title = t(\"You are not currently signed in.\");\n      primaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'signUpDisabled': {\n      title = t(\"Sign up for new users is not enabled at the moment.\");\n      primaryAction = () => stackApp.redirectToHome();\n      secondaryAction = () => stackApp.redirectToSignIn();\n      primaryButton = t(\"Go home\");\n      secondaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'emailSent': {\n      title = t(\"Email sent!\");\n      message = t(\"If the user with this e-mail address exists, an e-mail was sent to your inbox. Make sure to check your spam folder.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go home\");\n      break;\n    }\n    case 'passwordReset': {\n      title = t(\"Password reset successfully!\");\n      message = t(\"Your password has been reset. You can now sign in with your new password.\");\n      primaryAction = () => stackApp.redirectToSignIn({ noRedirectBack: true });\n      primaryButton = t(\"Sign in\");\n      break;\n    }\n    case 'unknownError': {\n      title = t(\"An unknown error occurred\");\n      message = t(\"Please try again and if the problem persists, contact support.\");\n      primaryAction = () => stackApp.redirectToHome();\n      primaryButton = t(\"Go home\");\n      break;\n    }\n  }\n\n  return (\n    <MessageCard\n      title={title}\n      fullPage={fullPage}\n      primaryButtonText={primaryButton}\n      primaryAction={primaryAction}\n      secondaryButtonText={secondaryButton || undefined}\n      secondaryAction={secondaryAction || undefined}\n    >\n      {message && <Typography>{message}</Typography>}\n    </MessageCard>\n  );\n}\n"],"mappings":";;;;;;;;;AAYA,SAAgB,sBAAsB,EACpC,MACA,WAAS,SAIR;CACD,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,MAAM,gBAAgB;CAE9B,IAAI;CACJ,IAAI,UAAyB;CAC7B,IAAI,gBAA+B;CACnC,IAAI,kBAAiC;CACrC,IAAI,gBAAqD;CACzD,IAAI,kBAAuD;AAE3D,SAAQ,MAAR;EACE,KAAK;AACH,WAAQ,EAAE,4BAA4B;AACtC,yBAAsB,SAAS,gBAAgB;AAC/C,2BAAwB,SAAS,mBAAmB;AACpD,mBAAgB,EAAE,UAAU;AAC5B,qBAAkB,EAAE,WAAW;AAC/B;EAEF,KAAK;AACH,WAAQ,EAAE,mCAAmC;AAC7C,yBAAsB,SAAS,kBAAkB;AACjD,mBAAgB,EAAE,UAAU;AAC5B;EAEF,KAAK;AACH,WAAQ,EAAE,sDAAsD;AAChE,yBAAsB,SAAS,gBAAgB;AAC/C,2BAAwB,SAAS,kBAAkB;AACnD,mBAAgB,EAAE,UAAU;AAC5B,qBAAkB,EAAE,UAAU;AAC9B;EAEF,KAAK;AACH,WAAQ,EAAE,cAAc;AACxB,aAAU,EAAE,sHAAsH;AAClI,yBAAsB,SAAS,gBAAgB;AAC/C,mBAAgB,EAAE,UAAU;AAC5B;EAEF,KAAK;AACH,WAAQ,EAAE,+BAA+B;AACzC,aAAU,EAAE,4EAA4E;AACxF,yBAAsB,SAAS,iBAAiB,EAAE,gBAAgB,MAAM,CAAC;AACzE,mBAAgB,EAAE,UAAU;AAC5B;EAEF,KAAK;AACH,WAAQ,EAAE,4BAA4B;AACtC,aAAU,EAAE,iEAAiE;AAC7E,yBAAsB,SAAS,gBAAgB;AAC/C,mBAAgB,EAAE,UAAU;AAC5B;;AAIJ,QACE,oBAAC;EACQ;EACG;EACV,mBAAmB;EACJ;EACf,qBAAqB,mBAAmB;EACxC,iBAAiB,mBAAmB;YAEnC,WAAW,oBAAC,wBAAY,UAAqB;GAClC"}

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

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/oauth-button-group.d.ts
+declare function OAuthButtonGroup({
+  type,
+  mockProject
+}: {
+  type: 'sign-in' | 'sign-up';
+  mockProject?: {
+    config: {
+      oauthProviders: {
+        id: string;
+      }[];
+    };
+  };
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { OAuthButtonGroup };
+//# sourceMappingURL=oauth-button-group.d.ts.map

package/dist/esm/components/oauth-button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-button-group.d.ts","names":[],"sources":["../../../src/components/oauth-button-group.tsx"],"mappings":";;;iBAUgB,gBAAA,CAAA;EACd,IAAA;EACA;AAAA;EAEA,IAAA;EACA,WAAA;IACE,MAAA;MACE,cAAA;QACE,EAAA;MAAA;IAAA;EAAA;AAAA,IAIP,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,22 @@
+'use client';
+
+import { jsx } from "react/jsx-runtime";
+import { useStackApp } from "../lib/hooks.js";
+import { OAuthButton } from "./oauth-button.js";
+
+//#region src/components/oauth-button-group.tsx
+function OAuthButtonGroup({ type, mockProject }) {
+	const stackApp = useStackApp();
+	return /* @__PURE__ */ jsx("div", {
+		className: "gap-4 flex flex-col items-stretch stack-scope",
+		children: (mockProject || stackApp.useProject()).config.oauthProviders.map((p) => /* @__PURE__ */ jsx(OAuthButton, {
+			provider: p.id,
+			type,
+			isMock: !!mockProject
+		}, p.id))
+	});
+}
+
+//#endregion
+export { OAuthButtonGroup };
+//# sourceMappingURL=oauth-button-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-button-group.js","names":[],"sources":["../../../src/components/oauth-button-group.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { useStackApp } from \"../lib/hooks\";\nimport { OAuthButton } from \"./oauth-button\";\n\nexport function OAuthButtonGroup({\n  type,\n  mockProject,\n}: {\n  type: 'sign-in' | 'sign-up',\n  mockProject?: {\n    config: {\n      oauthProviders: {\n        id: string,\n      }[],\n    },\n  },\n}) {\n  const stackApp = useStackApp();\n  const project = mockProject || stackApp.useProject();\n  return (\n    <div className='gap-4 flex flex-col items-stretch stack-scope'>\n      {project.config.oauthProviders.map(p => (\n        <OAuthButton key={p.id} provider={p.id} type={type}\n          isMock={!!mockProject}\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAUA,SAAgB,iBAAiB,EAC/B,MACA,eAUC;CACD,MAAM,WAAW,aAAa;AAE9B,QACE,oBAAC;EAAI,WAAU;aAFD,eAAe,SAAS,YAAY,EAGvC,OAAO,eAAe,KAAI,MACjC,oBAAC;GAAuB,UAAU,EAAE;GAAU;GAC5C,QAAQ,CAAC,CAAC;KADM,EAAE,GAElB,CACF;GACE"}

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/oauth-button.d.ts
+declare function OAuthButton({
+  provider,
+  type,
+  isMock,
+  onAuthenticate
+}: {
+  provider: string;
+  type: 'sign-in' | 'sign-up';
+  isMock?: boolean;
+  onAuthenticate?: () => Promise<void>;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { OAuthButton };
+//# sourceMappingURL=oauth-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-button.d.ts","names":[],"sources":["../../../src/components/oauth-button.tsx"],"mappings":";;;iBAuBgB,WAAA,CAAA;EACd,QAAA;EACA,IAAA;EACA,MAAA;EACA;AAAA;EAEA,QAAA;EACA,IAAA;EACA,MAAA;EACA,cAAA,SAAuB,OAAA;AAAA,IACxB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,170 @@
+'use client';
+
+import { BrandIcons, Button, SimpleTooltip } from "@stackframe/stack-ui";
+import { useEffect, useId, useState } from "react";
+import { useTranslation } from "../lib/translations.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useStackApp } from "../lib/hooks.js";
+import Color from "color";
+import { useInIframe } from "./use-in-iframe.js";
+
+//#region src/components/oauth-button.tsx
+const iconSize = 22;
+const changeColor = (c, value) => {
+	if (c.isLight()) value = -value;
+	return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();
+};
+function OAuthButton({ provider, type, isMock = false, onAuthenticate }) {
+	const { t } = useTranslation();
+	const stackApp = useStackApp();
+	const styleId = useId().replaceAll(":", "-");
+	const isIframe = useInIframe();
+	const [lastUsed, setLastUsed] = useState(null);
+	useEffect(() => {
+		setLastUsed(localStorage.getItem("_STACK_AUTH.lastUsed"));
+	}, []);
+	let style;
+	switch (provider) {
+		case "google":
+			style = {
+				backgroundColor: "#fff",
+				textColor: "#000",
+				name: "Google",
+				border: "1px solid #ddd",
+				icon: /* @__PURE__ */ jsx(BrandIcons.Google, { iconSize })
+			};
+			break;
+		case "github":
+			style = {
+				backgroundColor: "#111",
+				textColor: "#fff",
+				border: "1px solid #333",
+				name: "GitHub",
+				icon: /* @__PURE__ */ jsx(BrandIcons.GitHub, { iconSize })
+			};
+			break;
+		case "facebook":
+			style = {
+				backgroundColor: "#1877F2",
+				textColor: "#fff",
+				name: "Facebook",
+				icon: /* @__PURE__ */ jsx(BrandIcons.Facebook, { iconSize })
+			};
+			break;
+		case "microsoft":
+			style = {
+				backgroundColor: "#2f2f2f",
+				textColor: "#fff",
+				name: "Microsoft",
+				icon: /* @__PURE__ */ jsx(BrandIcons.Microsoft, { iconSize })
+			};
+			break;
+		case "spotify":
+			style = {
+				backgroundColor: "#1DB954",
+				textColor: "#fff",
+				name: "Spotify",
+				icon: /* @__PURE__ */ jsx(BrandIcons.Spotify, { iconSize })
+			};
+			break;
+		case "discord":
+			style = {
+				backgroundColor: "#5865F2",
+				textColor: "#fff",
+				name: "Discord",
+				icon: /* @__PURE__ */ jsx(BrandIcons.Discord, { iconSize })
+			};
+			break;
+		case "gitlab":
+			style = {
+				backgroundColor: "#111",
+				textColor: "#fff",
+				border: "1px solid #333",
+				name: "Gitlab",
+				icon: /* @__PURE__ */ jsx(BrandIcons.Gitlab, { iconSize })
+			};
+			break;
+		case "apple":
+			style = {
+				backgroundColor: "#000",
+				textColor: "#fff",
+				border: "1px solid #333",
+				name: "Apple",
+				icon: /* @__PURE__ */ jsx(BrandIcons.Apple, { iconSize })
+			};
+			break;
+		case "bitbucket":
+			style = {
+				backgroundColor: "#fff",
+				textColor: "#000",
+				border: "1px solid #ddd",
+				name: "Bitbucket",
+				icon: /* @__PURE__ */ jsx(BrandIcons.Bitbucket, { iconSize })
+			};
+			break;
+		case "linkedin":
+			style = {
+				backgroundColor: "#0073b1",
+				textColor: "#fff",
+				name: "LinkedIn",
+				icon: /* @__PURE__ */ jsx(BrandIcons.LinkedIn, { iconSize })
+			};
+			break;
+		case "x":
+			style = {
+				backgroundColor: "#000",
+				textColor: "#fff",
+				name: "X",
+				icon: /* @__PURE__ */ jsx(BrandIcons.X, { iconSize })
+			};
+			break;
+		case "twitch":
+			style = {
+				backgroundColor: "#6441a5",
+				textColor: "#fff",
+				name: "Twitch",
+				icon: /* @__PURE__ */ jsx(BrandIcons.Twitch, { iconSize })
+			};
+			break;
+		default: style = {
+			name: provider,
+			icon: null
+		};
+	}
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: `
+    .stack-oauth-button-${styleId} {
+      background-color: ${style.backgroundColor} !important;
+      color: ${style.textColor} !important;
+      border: ${style.border} !important;
+    }
+    .stack-oauth-button-${styleId}:hover {
+      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;
+    }
+  ` }), /* @__PURE__ */ jsx(SimpleTooltip, {
+		disabled: !isIframe,
+		tooltip: isIframe ? "This auth provider is not supported in an iframe for security reasons." : void 0,
+		className: "stack-scope w-full inline-flex",
+		children: /* @__PURE__ */ jsxs(Button, {
+			onClick: async () => {
+				localStorage.setItem("_STACK_AUTH.lastUsed", provider);
+				await (onAuthenticate ? onAuthenticate() : stackApp.signInWithOAuth(provider));
+			},
+			className: `stack-oauth-button-${styleId} stack-scope relative w-full`,
+			disabled: isIframe,
+			children: [!isMock && lastUsed === provider && /* @__PURE__ */ jsx("span", {
+				className: "absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md",
+				children: "last"
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center w-full gap-4",
+				children: [style.icon, /* @__PURE__ */ jsx("span", {
+					className: "flex-1",
+					children: type === "sign-up" ? t("Sign up with {provider}", { provider: style.name }) : t("Sign in with {provider}", { provider: style.name })
+				})]
+			})]
+		})
+	})] });
+}
+
+//#endregion
+export { OAuthButton };
+//# sourceMappingURL=oauth-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-button.js","names":[],"sources":["../../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { BrandIcons, Button, SimpleTooltip } from '@stackframe/stack-ui';\nimport Color, { ColorInstance } from 'color';\nimport { useEffect, useId, useState } from 'react';\nimport { useStackApp } from '../lib/hooks';\nimport { useTranslation } from '../lib/translations';\nimport { useInIframe } from './use-in-iframe';\n\nconst iconSize = 22;\n\nconst changeColor = (c: ColorInstance, value: number) => {\n  if (c.isLight()) {\n    value = -value;\n  }\n  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n  provider,\n  type,\n  isMock = false,\n  onAuthenticate,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n  isMock?: boolean,\n  onAuthenticate?: () => Promise<void>,\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n  const isIframe = useInIframe();\n\n  const [lastUsed, setLastUsed] = useState<string | null>(null);\n  useEffect(() => {\n    setLastUsed(localStorage.getItem('_STACK_AUTH.lastUsed'));\n  }, []);\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: <BrandIcons.Google 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: <BrandIcons.GitHub iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <BrandIcons.Facebook iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <BrandIcons.Microsoft iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <BrandIcons.Spotify iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'discord': {\n      style = {\n        backgroundColor: '#5865F2',\n        textColor: '#fff',\n        name: 'Discord',\n        icon: <BrandIcons.Discord iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'gitlab': {\n      style = {\n        backgroundColor: \"#111\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Gitlab\",\n        icon: <BrandIcons.Gitlab iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'apple': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        border: \"1px solid #333\",\n        name: \"Apple\",\n        icon: <BrandIcons.Apple iconSize={iconSize} />,\n      };\n      break;\n    }\n    case \"bitbucket\": {\n      style = {\n        backgroundColor: \"#fff\",\n        textColor: \"#000\",\n        border: \"1px solid #ddd\",\n        name: \"Bitbucket\",\n        icon: <BrandIcons.Bitbucket iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'linkedin': {\n      style = {\n        backgroundColor: \"#0073b1\",\n        textColor: \"#fff\",\n        name: \"LinkedIn\",\n        icon: <BrandIcons.LinkedIn iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'x': {\n      style = {\n        backgroundColor: \"#000\",\n        textColor: \"#fff\",\n        name: \"X\",\n        icon: <BrandIcons.X iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'twitch': {\n      style = {\n        backgroundColor: \"#6441a5\",\n        textColor: \"#fff\",\n        name: \"Twitch\",\n        icon: <BrandIcons.Twitch iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null,\n      };\n    }\n  }\n\n  const styleSheet = `\n    .stack-oauth-button-${styleId} {\n      background-color: ${style.backgroundColor} !important;\n      color: ${style.textColor} !important;\n      border: ${style.border} !important;\n    }\n    .stack-oauth-button-${styleId}:hover {\n      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n    }\n  `;\n\n  return (\n    <>\n      <style>{styleSheet}</style>\n      <SimpleTooltip\n        disabled={!isIframe}\n        tooltip={isIframe ? \"This auth provider is not supported in an iframe for security reasons.\" : undefined}\n        className='stack-scope w-full inline-flex'\n      >\n        <Button\n          onClick={async () => {\n            localStorage.setItem('_STACK_AUTH.lastUsed', provider);\n            await (onAuthenticate ? onAuthenticate() : stackApp.signInWithOAuth(provider));\n          }}\n          className={`stack-oauth-button-${styleId} stack-scope relative w-full`}\n          disabled={isIframe}\n        >\n          {!isMock && lastUsed === provider && (\n            <span className=\"absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md\">\n            last\n            </span>\n          )}\n          <div className='flex items-center w-full gap-4'>\n            {style.icon}\n            <span className='flex-1'>\n              {type === 'sign-up' ?\n              t('Sign up with {provider}', { provider: style.name }) :\n              t('Sign in with {provider}', { provider: style.name })\n              }\n            </span>\n          </div>\n        </Button>\n      </SimpleTooltip>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components/passkey-button.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/passkey-button.d.ts
+declare function PasskeyButton({
+  type
+}: {
+  type: 'sign-in' | 'sign-up';
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PasskeyButton };
+//# sourceMappingURL=passkey-button.d.ts.map

package/dist/esm/components/passkey-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"passkey-button.d.ts","names":[],"sources":["../../../src/components/passkey-button.tsx"],"mappings":";;;iBAcgB,aAAA,CAAA;EACd;AAAA;EAEA,IAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { Button } from "@stackframe/stack-ui";
+import { useId } from "react";
+import { useStackApp } from "../index.js";
+import { useTranslation } from "../lib/translations.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { KeyRound } from "lucide-react";
+
+//#region src/components/passkey-button.tsx
+function PasskeyButton({ type }) {
+	const { t } = useTranslation();
+	const stackApp = useStackApp();
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Button, {
+		onClick: async () => {
+			await stackApp.signInWithPasskey();
+		},
+		className: `stack-oauth-button-${useId().replaceAll(":", "-")} stack-scope`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center w-full gap-4",
+			children: [/* @__PURE__ */ jsx(KeyRound, {}), /* @__PURE__ */ jsx("span", {
+				className: "flex-1",
+				children: type === "sign-up" ? t("Sign up with Passkey") : t("Sign in with Passkey")
+			})]
+		})
+	}) });
+}
+
+//#endregion
+export { PasskeyButton };
+//# sourceMappingURL=passkey-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"passkey-button.js","names":[],"sources":["../../../src/components/passkey-button.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { Button } from '@stackframe/stack-ui';\nimport { KeyRound } from 'lucide-react';\nimport { useId } from 'react';\nimport { useStackApp } from '..';\nimport { useTranslation } from '../lib/translations';\n\n\nexport function PasskeyButton({\n  type,\n}: {\n  type: 'sign-in' | 'sign-up',\n}) {\n  const { t } = useTranslation();\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n\n\n  return (\n    <>\n      <Button\n        onClick={async () => { await stackApp.signInWithPasskey(); }}\n        className={`stack-oauth-button-${styleId} stack-scope`}\n      >\n        <div className='flex items-center w-full gap-4'>\n          <KeyRound />\n          <span className='flex-1'>\n            {type === 'sign-up' ?\n              t('Sign up with Passkey') :\n              t('Sign in with Passkey')\n            }\n          </span>\n        </div>\n      </Button>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;AAcA,SAAgB,cAAc,EAC5B,QAGC;CACD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;AAI9B,QACE,0CACE,oBAAC;EACC,SAAS,YAAY;AAAE,SAAM,SAAS,mBAAmB;;EACzD,WAAW,sBAPD,OAAO,CAAC,WAAW,KAAK,IAAI,CAOG;YAEzC,qBAAC;GAAI,WAAU;cACb,oBAAC,aAAW,EACZ,oBAAC;IAAK,WAAU;cACb,SAAS,YACR,EAAE,uBAAuB,GACzB,EAAE,uBAAuB;KAEtB;IACH;GACC,GACR"}

package/dist/esm/components/profile-image-editor.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Area } from "react-easy-crop";
+import { UserAvatar } from "./elements/user-avatar";
+
+//#region src/components/profile-image-editor.d.ts
+declare function checkImageUrl(url: string): Promise<boolean>;
+declare function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<string | null>;
+declare function ProfileImageEditor(props: {
+  user: NonNullable<ComponentProps<typeof UserAvatar>['user']>;
+  onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ProfileImageEditor, checkImageUrl, getCroppedImg };
+//# sourceMappingURL=profile-image-editor.d.ts.map

package/dist/esm/components/profile-image-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-image-editor.d.ts","names":[],"sources":["../../../src/components/profile-image-editor.tsx"],"mappings":";;;;;;iBAcsB,aAAA,CAAc,GAAA,WAAW,OAAA;AAAA,iBAmBzB,aAAA,CAAc,QAAA,UAAkB,SAAA,EAAW,IAAA,GAAO,OAAA;AAAA,iBAkCxD,kBAAA,CAAmB,KAAA;EACjC,IAAA,EAAM,WAAA,CAAY,cAAA,QAAsB,UAAA;EACxC,uBAAA,GAA0B,eAAA,2BAA0C,OAAA;AAAA,IACrE,kBAAA,CAAA,GAAA,CAAA,OAAA"}