@stackframe/tanstack-start 0.0.1 → 2.8.91

package/dist/esm/components/profile-image-editor.js

@@ -0,0 +1,165 @@
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Slider, Typography } from "@stackframe/stack-ui";
+import { useCallback, useState } from "react";
+import { useTranslation } from "../lib/translations.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Upload } from "lucide-react";
+import { fileToBase64 } from "@stackframe/stack-shared/dist/utils/base64";
+import imageCompression from "browser-image-compression";
+import Cropper from "react-easy-crop";
+import { UserAvatar } from "./elements/user-avatar.js";
+
+//#region src/components/profile-image-editor.tsx
+async function checkImageUrl(url) {
+	try {
+		return (await (await fetch(url, { method: "HEAD" })).blob()).type.startsWith("image/");
+	} catch (e) {
+		return false;
+	}
+}
+const createImage = (url) => new Promise((resolve, reject) => {
+	const image = new Image();
+	image.addEventListener("load", () => resolve(image));
+	image.addEventListener("error", (error) => reject(error));
+	image.setAttribute("crossOrigin", "anonymous");
+	image.src = url;
+});
+async function getCroppedImg(imageSrc, pixelCrop) {
+	const image = await createImage(imageSrc);
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	if (!ctx) return null;
+	const safeCrop = {
+		x: Math.max(0, pixelCrop.x),
+		y: Math.max(0, pixelCrop.y),
+		width: Math.max(1, pixelCrop.width),
+		height: Math.max(1, pixelCrop.height)
+	};
+	canvas.width = safeCrop.width;
+	canvas.height = safeCrop.height;
+	ctx.drawImage(image, safeCrop.x, safeCrop.y, safeCrop.width, safeCrop.height, 0, 0, safeCrop.width, safeCrop.height);
+	return canvas.toDataURL("image/jpeg");
+}
+function ProfileImageEditor(props) {
+	const { t } = useTranslation();
+	const [rawUrl, setRawUrl] = useState(null);
+	const [error, setError] = useState(null);
+	const [crop, setCrop] = useState({
+		x: 0,
+		y: 0
+	});
+	const [zoom, setZoom] = useState(1);
+	const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);
+	function reset() {
+		setRawUrl(null);
+		setError(null);
+		setCrop({
+			x: 0,
+			y: 0
+		});
+		setZoom(1);
+		setCroppedAreaPixels(null);
+	}
+	const onCropChange = useCallback((crop) => {
+		setCrop(crop);
+	}, []);
+	const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
+		setCroppedAreaPixels(croppedAreaPixels);
+	}, []);
+	const onZoomChange = useCallback((zoom) => {
+		setZoom(zoom);
+	}, []);
+	function upload() {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.onchange = (e) => {
+			const file = e.target.files?.[0];
+			if (!file) return;
+			runAsynchronouslyWithAlert(async () => {
+				const rawUrl = await fileToBase64(file);
+				if (await checkImageUrl(rawUrl)) {
+					setRawUrl(rawUrl);
+					setError(null);
+				} else setError(t("Invalid image"));
+				input.remove();
+			});
+		};
+		input.click();
+	}
+	if (!rawUrl) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "cursor-pointer relative",
+			onClick: upload,
+			children: [/* @__PURE__ */ jsx(UserAvatar, {
+				size: 60,
+				user: props.user,
+				border: true
+			}), /* @__PURE__ */ jsx("div", {
+				className: "absolute top-0 left-0 h-[60px] w-[60px] bg-gray-500/20 backdrop-blur-sm items-center justify-center rounded-full flex opacity-0 hover:opacity-100 transition-opacity",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "bg-background p-2 rounded-full",
+					children: /* @__PURE__ */ jsx(Upload, { className: "h-5 w-5" })
+				})
+			})]
+		}), error && /* @__PURE__ */ jsx(Typography, {
+			variant: "destructive",
+			type: "label",
+			children: error
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center gap-4",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "relative w-64 h-64",
+				children: /* @__PURE__ */ jsx(Cropper, {
+					image: rawUrl || props.user.profileImageUrl || "",
+					crop,
+					zoom,
+					aspect: 1,
+					cropShape: "round",
+					showGrid: false,
+					onCropChange,
+					onCropComplete,
+					onZoomChange
+				})
+			}),
+			/* @__PURE__ */ jsx(Slider, {
+				min: 1,
+				max: 3,
+				step: .1,
+				value: [zoom],
+				onValueChange: (v) => onZoomChange(v[0])
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					onClick: async () => {
+						if (rawUrl && croppedAreaPixels) {
+							const croppedImageUrl = await getCroppedImg(rawUrl, croppedAreaPixels);
+							if (croppedImageUrl) {
+								const compressedFile = await imageCompression(await imageCompression.getFilefromDataUrl(croppedImageUrl, "profile-image"), {
+									maxSizeMB: .1,
+									fileType: "image/jpeg"
+								});
+								const compressedUrl = await imageCompression.getDataUrlFromFile(compressedFile);
+								await props.onProfileImageUrlChange(compressedUrl);
+								reset();
+							} else setError(t("Could not crop image."));
+						}
+					},
+					children: t("Save")
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onClick: reset,
+					children: t("Cancel")
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { ProfileImageEditor, checkImageUrl, getCroppedImg };
+//# sourceMappingURL=profile-image-editor.js.map

package/dist/esm/components/profile-image-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-image-editor.js","names":[],"sources":["../../../src/components/profile-image-editor.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { fileToBase64 } from '@stackframe/stack-shared/dist/utils/base64';\nimport { runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Button, Slider, Typography } from '@stackframe/stack-ui';\nimport imageCompression from 'browser-image-compression';\nimport { Upload } from 'lucide-react';\nimport { ComponentProps, useCallback, useState } from 'react';\nimport Cropper, { Area } from 'react-easy-crop';\nimport { useTranslation } from '../lib/translations';\nimport { UserAvatar } from './elements/user-avatar';\n\nexport async function checkImageUrl(url: string){\n  try {\n    const res = await fetch(url, { method: 'HEAD' });\n    const buff = await res.blob();\n    return buff.type.startsWith('image/');\n  } catch (e) {\n    return false;\n  }\n}\n\nconst createImage = (url: string): Promise<HTMLImageElement> =>\n  new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', () => resolve(image));\n    image.addEventListener('error', (error) => reject(error));\n    image.setAttribute('crossOrigin', 'anonymous');\n    image.src = url;\n  });\n\nexport async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<string | null> {\n  const image = await createImage(imageSrc);\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n\n  if (!ctx) {\n    return null;\n  }\n\n  const safeCrop = {\n    x: Math.max(0, pixelCrop.x),\n    y: Math.max(0, pixelCrop.y),\n    width: Math.max(1, pixelCrop.width),\n    height: Math.max(1, pixelCrop.height),\n  };\n\n  canvas.width = safeCrop.width;\n  canvas.height = safeCrop.height;\n\n  ctx.drawImage(\n    image,\n    safeCrop.x,\n    safeCrop.y,\n    safeCrop.width,\n    safeCrop.height,\n    0,\n    0,\n    safeCrop.width,\n    safeCrop.height\n  );\n\n  return canvas.toDataURL('image/jpeg');\n}\n\nexport function ProfileImageEditor(props: {\n  user: NonNullable<ComponentProps<typeof UserAvatar>['user']>,\n  onProfileImageUrlChange: (profileImageUrl: string | null) => void | Promise<void>,\n}) {\n  const { t } = useTranslation();\n  const [rawUrl, setRawUrl] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);\n\n  function reset() {\n    setRawUrl(null);\n    setError(null);\n    setCrop({ x: 0, y: 0 });\n    setZoom(1);\n    setCroppedAreaPixels(null);\n  }\n\n  const onCropChange = useCallback((crop: { x: number, y: number }) => {\n    setCrop(crop);\n  }, []);\n\n  const onCropComplete = useCallback((croppedArea: Area, croppedAreaPixels: Area) => {\n    setCroppedAreaPixels(croppedAreaPixels);\n  }, []);\n\n  const onZoomChange = useCallback((zoom: number) => {\n    setZoom(zoom);\n  }, []);\n\n\n  function upload() {\n    const input = document.createElement('input');\n    input.type = 'file';\n    input.onchange = (e) => {\n      const file = (e.target as HTMLInputElement).files?.[0];\n      if (!file) return;\n      runAsynchronouslyWithAlert(async () => {\n        const rawUrl = await fileToBase64(file);\n        if (await checkImageUrl(rawUrl)) {\n          setRawUrl(rawUrl);\n          setError(null);\n        } else {\n          setError(t('Invalid image'));\n        }\n        input.remove();\n      });\n    };\n    input.click();\n  }\n\n  if (!rawUrl) {\n    return <div className='flex flex-col'>\n      <div className='cursor-pointer relative' onClick={upload}>\n        <UserAvatar\n          size={60}\n          user={props.user}\n          border\n        />\n        <div className='absolute top-0 left-0 h-[60px] w-[60px] bg-gray-500/20 backdrop-blur-sm items-center justify-center rounded-full flex opacity-0 hover:opacity-100 transition-opacity'>\n          <div className='bg-background p-2 rounded-full'>\n            <Upload className='h-5 w-5' />\n          </div>\n        </div>\n      </div>\n      {error && <Typography variant='destructive' type='label'>{error}</Typography>}\n    </div>;\n  }\n\n  return (\n    <div className='flex flex-col items-center gap-4'>\n      <div className='relative w-64 h-64'>\n        <Cropper\n          image={rawUrl || props.user.profileImageUrl || \"\"}\n          crop={crop}\n          zoom={zoom}\n          aspect={1}\n          cropShape=\"round\"\n          showGrid={false}\n          onCropChange={onCropChange}\n          onCropComplete={onCropComplete}\n          onZoomChange={onZoomChange}\n        />\n      </div>\n      <Slider\n        min={1}\n        max={3}\n        step={0.1}\n        value={[zoom]}\n        onValueChange={(v) => onZoomChange(v[0])}\n      />\n\n      <div className='flex flex-row gap-2'>\n        <Button\n          onClick={async () => {\n            if (rawUrl && croppedAreaPixels) {\n              const croppedImageUrl = await getCroppedImg(rawUrl, croppedAreaPixels);\n              if (croppedImageUrl) {\n                const compressedFile = await imageCompression(\n                  await imageCompression.getFilefromDataUrl(croppedImageUrl, 'profile-image'),\n                  {\n                    maxSizeMB: 0.1,\n                    fileType: \"image/jpeg\",\n                  }\n                );\n                const compressedUrl = await imageCompression.getDataUrlFromFile(compressedFile);\n                await props.onProfileImageUrlChange(compressedUrl);\n                reset();\n              } else {\n                setError(t('Could not crop image.'));\n              }\n            }\n          }}\n        >\n          {t('Save')}\n        </Button>\n        <Button\n          variant=\"secondary\"\n          onClick={reset}\n        >\n          {t('Cancel')}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Team } from "..";
+
+//#region src/components/selected-team-switcher.d.ts
+type MockTeam = {
+  id: string;
+  displayName: string;
+  profileImageUrl?: string | null;
+};
+type SelectedTeamSwitcherProps<AllowNull extends boolean = false> = {
+  urlMap?: (team: AllowNull extends true ? Team | null : Team) => string;
+  selectedTeam?: Team;
+  noUpdateSelectedTeam?: boolean;
+  allowNull?: AllowNull;
+  nullLabel?: string;
+  onChange?: (team: AllowNull extends true ? Team | null : Team) => void;
+  triggerClassName?: string;
+  mockUser?: {
+    selectedTeam?: MockTeam;
+  };
+  mockTeams?: MockTeam[];
+  mockProject?: {
+    config: {
+      clientTeamCreationEnabled: boolean;
+    };
+  };
+};
+declare function SelectedTeamSwitcher<AllowNull extends boolean = false>(props: SelectedTeamSwitcherProps<AllowNull>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { SelectedTeamSwitcher };
+//# sourceMappingURL=selected-team-switcher.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selected-team-switcher.d.ts","names":[],"sources":["../../../src/components/selected-team-switcher.tsx"],"mappings":";;;;KAcK,QAAA;EACH,EAAA;EACA,WAAA;EACA,eAAA;AAAA;AAAA,KAGG,yBAAA;EACH,MAAA,IAAU,IAAA,EAAM,SAAA,gBAAyB,IAAA,UAAc,IAAA;EACvD,YAAA,GAAe,IAAA;EACf,oBAAA;EACA,SAAA,GAAY,SAAA;EACZ,SAAA;EACA,QAAA,IAAY,IAAA,EAAM,SAAA,gBAAyB,IAAA,UAAc,IAAA;EACzD,gBAAA;EAEA,QAAA;IACE,YAAA,GAAe,QAAA;EAAA;EAEjB,SAAA,GAAY,QAAA;EACZ,WAAA;IACE,MAAA;MACE,yBAAA;IAAA;EAAA;AAAA;AAAA,iBAKU,oBAAA,mCAAA,CAAwD,KAAA,EAAO,yBAAA,CAA0B,SAAA,IAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,57 @@
+'use client';
+
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Skeleton } from "@stackframe/stack-ui";
+import { Suspense, useEffect } from "react";
+import { useStackApp, useUser } from "../index.js";
+import { jsx } from "react/jsx-runtime";
+import { TeamSwitcher } from "./team-switcher.js";
+
+//#region src/components/selected-team-switcher.tsx
+function SelectedTeamSwitcher(props) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(Fallback, {}),
+		children: /* @__PURE__ */ jsx(Inner, { ...props })
+	});
+}
+function Fallback() {
+	return /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full max-w-64 stack-scope" });
+}
+function Inner(props) {
+	const appFromHook = useStackApp();
+	const userFromHook = useUser();
+	const app = props.mockUser ? {
+		useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },
+		useNavigate: () => () => {},
+		urls: { accountSettings: "/account-settings" }
+	} : appFromHook;
+	const user = props.mockUser ? {
+		selectedTeam: props.mockUser.selectedTeam,
+		useTeams: () => props.mockTeams || [],
+		setSelectedTeam: async () => {}
+	} : userFromHook;
+	const navigate = app.useNavigate();
+	useEffect(() => {
+		if (!props.noUpdateSelectedTeam && props.selectedTeam && !props.mockUser) runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));
+	}, [
+		props.noUpdateSelectedTeam,
+		props.selectedTeam,
+		props.mockUser
+	]);
+	return /* @__PURE__ */ jsx(TeamSwitcher, {
+		team: props.selectedTeam,
+		allowNull: props.allowNull,
+		nullLabel: props.nullLabel,
+		triggerClassName: props.triggerClassName,
+		onChange: async (team) => {
+			if (props.onChange) props.onChange(team);
+			if (props.mockUser) return;
+			if (!props.noUpdateSelectedTeam) await user?.setSelectedTeam(team);
+			if (props.urlMap) navigate(props.urlMap(team));
+		}
+	});
+}
+
+//#endregion
+export { SelectedTeamSwitcher };
+//# sourceMappingURL=selected-team-switcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selected-team-switcher.js","names":[],"sources":["../../../src/components/selected-team-switcher.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//===========================================\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Skeleton,\n} from \"@stackframe/stack-ui\";\nimport { Suspense, useEffect } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { TeamSwitcher } from \"./team-switcher\";\n\ntype MockTeam = {\n  id: string,\n  displayName: string,\n  profileImageUrl?: string | null,\n};\n\ntype SelectedTeamSwitcherProps<AllowNull extends boolean = false> = {\n  urlMap?: (team: AllowNull extends true ? Team | null : Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n  allowNull?: AllowNull,\n  nullLabel?: string,\n  onChange?: (team: AllowNull extends true ? Team | null : Team) => void,\n  triggerClassName?: string,\n  // Mock data props\n  mockUser?: {\n    selectedTeam?: MockTeam,\n  },\n  mockTeams?: MockTeam[],\n  mockProject?: {\n    config: {\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n};\n\nexport function SelectedTeamSwitcher<AllowNull extends boolean = false>(props: SelectedTeamSwitcherProps<AllowNull>) {\n  return <Suspense fallback={<Fallback />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback() {\n  return <Skeleton className=\"h-9 w-full max-w-64 stack-scope\" />;\n}\n\nfunction Inner<AllowNull extends boolean>(props: SelectedTeamSwitcherProps<AllowNull>) {\n  const appFromHook = useStackApp();\n  const userFromHook = useUser();\n\n  // Use mock data if provided, otherwise use real data\n  const app = props.mockUser ? {\n    useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },\n    useNavigate: () => () => {}, // Mock navigate function\n    urls: { accountSettings: '/account-settings' },\n  } : appFromHook;\n\n  const user = props.mockUser ? {\n    selectedTeam: props.mockUser.selectedTeam,\n    useTeams: () => props.mockTeams || [],\n    setSelectedTeam: async () => {}, // Mock function\n  } : userFromHook;\n\n  const navigate = app.useNavigate();\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam && !props.mockUser) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam, props.mockUser]);\n\n  return (\n    <TeamSwitcher\n      team={props.selectedTeam}\n      allowNull={props.allowNull}\n      nullLabel={props.nullLabel}\n      triggerClassName={props.triggerClassName}\n      onChange={async (team) => {\n        if (props.onChange) {\n          props.onChange(team as Team);\n        }\n        // Skip actual navigation/updates in mock mode\n        if (props.mockUser) return;\n        if (!props.noUpdateSelectedTeam) {\n          await user?.setSelectedTeam(team as Team);\n        }\n        if (props.urlMap) {\n          navigate(props.urlMap(team as Team));\n        }\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AAwCA,SAAgB,qBAAwD,OAA6C;AACnH,QAAO,oBAAC;EAAS,UAAU,oBAAC,aAAW;YACrC,oBAAC,SAAM,GAAI,QAAS;GACX;;AAGb,SAAS,WAAW;AAClB,QAAO,oBAAC,YAAS,WAAU,oCAAoC;;AAGjE,SAAS,MAAiC,OAA6C;CACrF,MAAM,cAAc,aAAa;CACjC,MAAM,eAAe,SAAS;CAG9B,MAAM,MAAM,MAAM,WAAW;EAC3B,kBAAkB,MAAM,eAAe,EAAE,QAAQ,EAAE,2BAA2B,OAAO,EAAE;EACvF,yBAAyB;EACzB,MAAM,EAAE,iBAAiB,qBAAqB;EAC/C,GAAG;CAEJ,MAAM,OAAO,MAAM,WAAW;EAC5B,cAAc,MAAM,SAAS;EAC7B,gBAAgB,MAAM,aAAa,EAAE;EACrC,iBAAiB,YAAY;EAC9B,GAAG;CAEJ,MAAM,WAAW,IAAI,aAAa;AAElC,iBAAgB;AACd,MAAI,CAAC,MAAM,wBAAwB,MAAM,gBAAgB,CAAC,MAAM,SAC9D,4BAA2B,MAAM,gBAAgB,MAAM,aAAa,CAAC;IAEtE;EAAC,MAAM;EAAsB,MAAM;EAAc,MAAM;EAAS,CAAC;AAEpE,QACE,oBAAC;EACC,MAAM,MAAM;EACZ,WAAW,MAAM;EACjB,WAAW,MAAM;EACjB,kBAAkB,MAAM;EACxB,UAAU,OAAO,SAAS;AACxB,OAAI,MAAM,SACR,OAAM,SAAS,KAAa;AAG9B,OAAI,MAAM,SAAU;AACpB,OAAI,CAAC,MAAM,qBACT,OAAM,MAAM,gBAAgB,KAAa;AAE3C,OAAI,MAAM,OACR,UAAS,MAAM,OAAO,KAAa,CAAC;;GAGxC"}

package/dist/esm/components/team-icon.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Team } from "..";
+
+//#region src/components/team-icon.d.ts
+declare function TeamIcon(props: {
+  team: Team | 'personal';
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TeamIcon };
+//# sourceMappingURL=team-icon.d.ts.map

package/dist/esm/components/team-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-icon.d.ts","names":[],"sources":["../../../src/components/team-icon.tsx"],"mappings":";;;;iBAQgB,QAAA,CAAS,KAAA;EAAS,IAAA,EAAM,IAAA;AAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/team-icon.js

@@ -0,0 +1,29 @@
+import { Avatar, AvatarImage, Typography } from "@stackframe/stack-ui";
+import { jsx } from "react/jsx-runtime";
+import { User2 } from "lucide-react";
+
+//#region src/components/team-icon.tsx
+function TeamIcon(props) {
+	if (props.team === "personal") return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200",
+		children: /* @__PURE__ */ jsx(User2, { className: "w-4 h-4" })
+	});
+	if (props.team.profileImageUrl) return /* @__PURE__ */ jsx(Avatar, {
+		className: "min-w-6 min-h-6 max-w-6 max-h-6 rounded",
+		children: /* @__PURE__ */ jsx(AvatarImage, {
+			src: props.team.profileImageUrl,
+			alt: props.team.displayName
+		})
+	});
+	else return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200",
+		children: /* @__PURE__ */ jsx(Typography, {
+			className: "text-zinc-800 dark:text-zinc-800",
+			children: props.team.displayName.slice(0, 1).toUpperCase()
+		})
+	});
+}
+
+//#endregion
+export { TeamIcon };
+//# sourceMappingURL=team-icon.js.map

package/dist/esm/components/team-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-icon.js","names":[],"sources":["../../../src/components/team-icon.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { Avatar, AvatarImage, Typography } from \"@stackframe/stack-ui\";\nimport { User2 } from \"lucide-react\";\nimport { Team } from \"..\";\n\nexport function TeamIcon(props: { team: Team | 'personal' }) {\n  if (props.team === 'personal') {\n    return (\n      <div className=\"flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200\">\n        <User2 className=\"w-4 h-4\" />\n      </div>\n    );\n  }\n  if (props.team.profileImageUrl) {\n    return (\n      <Avatar className=\"min-w-6 min-h-6 max-w-6 max-h-6 rounded\">\n        <AvatarImage src={props.team.profileImageUrl} alt={props.team.displayName} />\n      </Avatar>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center min-w-6 min-h-6 max-w-6 max-h-6 rounded bg-zinc-200\">\n        <Typography className=\"text-zinc-800 dark:text-zinc-800\">{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;;AAQA,SAAgB,SAAS,OAAoC;AAC3D,KAAI,MAAM,SAAS,WACjB,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC,SAAM,WAAU,YAAY;GACzB;AAGV,KAAI,MAAM,KAAK,gBACb,QACE,oBAAC;EAAO,WAAU;YAChB,oBAAC;GAAY,KAAK,MAAM,KAAK;GAAiB,KAAK,MAAM,KAAK;IAAe;GACtE;KAGX,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAW,WAAU;aAAoC,MAAM,KAAK,YAAY,MAAM,GAAG,EAAE,CAAC,aAAa;IAAc;GACpH"}

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

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Team } from "..";
+
+//#region src/components/team-switcher.d.ts
+type MockTeam = {
+  id: string;
+  displayName: string;
+  profileImageUrl?: string | null;
+};
+type TeamSwitcherProps<AllowNull extends boolean = false> = {
+  team?: Team;
+  teamId?: string;
+  teams?: Team[];
+  allowNull?: AllowNull;
+  nullLabel?: string;
+  triggerClassName?: string;
+  onChange?: (team: AllowNull extends true ? Team | null : Team) => Promise<void>;
+  mockUser?: {
+    team?: MockTeam;
+  };
+  mockTeams?: MockTeam[];
+  mockProject?: {
+    config: {
+      clientTeamCreationEnabled: boolean;
+    };
+  };
+};
+declare function TeamSwitcher<AllowNull extends boolean = false>(props: TeamSwitcherProps<AllowNull>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TeamSwitcher };
+//# sourceMappingURL=team-switcher.d.ts.map

package/dist/esm/components/team-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-switcher.d.ts","names":[],"sources":["../../../src/components/team-switcher.tsx"],"mappings":";;;;KA4BK,QAAA;EACH,EAAA;EACA,WAAA;EACA,eAAA;AAAA;AAAA,KAGG,iBAAA;EACH,IAAA,GAAO,IAAA;EACP,MAAA;EACA,KAAA,GAAQ,IAAA;EACR,SAAA,GAAY,SAAA;EACZ,SAAA;EACA,gBAAA;EACA,QAAA,IAAY,IAAA,EAAM,SAAA,gBAAyB,IAAA,UAAc,IAAA,KAAS,OAAA;EAElE,QAAA;IACE,IAAA,GAAO,QAAA;EAAA;EAET,SAAA,GAAY,QAAA;EACZ,WAAA;IACE,MAAA;MACE,yBAAA;IAAA;EAAA;AAAA;AAAA,iBAKU,YAAA,mCAAA,CAAgD,KAAA,EAAO,iBAAA,CAAkB,SAAA,IAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,121 @@
+'use client';
+
+import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Typography, cn } from "@stackframe/stack-ui";
+import { Suspense, useMemo } from "react";
+import { useStackApp, useUser } from "../index.js";
+import { useTranslation } from "../lib/translations.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PlusCircle, Settings } from "lucide-react";
+import { TeamIcon } from "./team-icon.js";
+
+//#region src/components/team-switcher.tsx
+function TeamSwitcher(props) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(Fallback, {}),
+		children: /* @__PURE__ */ jsx(Inner, { ...props })
+	});
+}
+function Fallback() {
+	return /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full max-w-64 stack-scope" });
+}
+function Inner(props) {
+	const { t } = useTranslation();
+	const appFromHook = useStackApp();
+	const userFromHook = useUser();
+	const app = props.mockUser ? {
+		useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },
+		useNavigate: () => () => {},
+		urls: { accountSettings: "/account-settings" }
+	} : appFromHook;
+	const user = props.mockUser ? {
+		selectedTeam: props.mockUser.team,
+		useTeams: () => props.mockTeams || [],
+		setSelectedTeam: async () => {}
+	} : userFromHook;
+	const navigate = app.useNavigate();
+	const project = app.useProject();
+	const rawTeams = props.teams ?? user?.useTeams();
+	const selectedTeam = props.team || rawTeams?.find((team) => team.id === props.teamId);
+	const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);
+	return /* @__PURE__ */ jsxs(Select, {
+		value: selectedTeam?.id || (props.allowNull ? "null-sentinel" : void 0),
+		onValueChange: (value) => {
+			runAsynchronouslyWithAlert(async () => {
+				let team = null;
+				if (value !== "null-sentinel") {
+					team = teams?.find((team) => team.id === value) || null;
+					if (!team) throw new StackAssertionError("Team not found, this should not happen");
+				} else team = null;
+				if (props.onChange) await props.onChange(team);
+			});
+		},
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			className: cn("stack-scope max-w-64", props.triggerClassName),
+			children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select team" })
+		}), /* @__PURE__ */ jsxs(SelectContent, {
+			className: "stack-scope",
+			children: [
+				selectedTeam ? /* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ jsx("span", { children: t("Current team") }), /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon",
+						className: "h-6 w-6",
+						onClick: () => {
+							if (!props.mockUser) navigate(`${app.urls.accountSettings}#team-${selectedTeam.id}`);
+						},
+						children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" })
+					})]
+				}) }), /* @__PURE__ */ jsx(SelectItem, {
+					value: selectedTeam.id,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(TeamIcon, { team: selectedTeam }), /* @__PURE__ */ jsx(Typography, {
+							className: "max-w-40 truncate",
+							children: selectedTeam.displayName
+						})]
+					})
+				})] }) : void 0,
+				props.allowNull && /* @__PURE__ */ jsx(SelectGroup, { children: /* @__PURE__ */ jsx(SelectItem, {
+					value: "null-sentinel",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(TeamIcon, { team: "personal" }), /* @__PURE__ */ jsx(Typography, {
+							className: "max-w-40 truncate",
+							children: props.nullLabel || t("No team")
+						})]
+					})
+				}) }),
+				teams?.length ? /* @__PURE__ */ jsxs(SelectGroup, { children: [/* @__PURE__ */ jsx(SelectLabel, { children: t("Other teams") }), teams.filter((team) => team.id !== selectedTeam?.id).map((team) => /* @__PURE__ */ jsx(SelectItem, {
+					value: team.id,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(TeamIcon, { team }), /* @__PURE__ */ jsx(Typography, {
+							className: "max-w-64 truncate",
+							children: team.displayName
+						})]
+					})
+				}, team.id))] }) : null,
+				!teams?.length && !props.allowNull ? /* @__PURE__ */ jsx(SelectGroup, { children: /* @__PURE__ */ jsx(SelectLabel, { children: t("No teams yet") }) }) : null,
+				project.config.clientTeamCreationEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SelectSeparator, {}), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Button, {
+					onClick: () => {
+						if (!props.mockUser) navigate(`${app.urls.accountSettings}#team-creation`);
+					},
+					className: "w-full",
+					variant: "ghost",
+					children: [
+						/* @__PURE__ */ jsx(PlusCircle, { className: "mr-2 h-4 w-4" }),
+						" ",
+						t("Create a team")
+					]
+				}) })] })
+			]
+		})]
+	});
+}
+
+//#endregion
+export { TeamSwitcher };
+//# sourceMappingURL=team-switcher.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"team-switcher.js","names":[],"sources":["../../../src/components/team-switcher.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//===========================================\nimport { StackAssertionError } from \"@stackframe/stack-shared/dist/utils/errors\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Skeleton,\n  Typography,\n  cn,\n} from \"@stackframe/stack-ui\";\nimport { PlusCircle, Settings } from \"lucide-react\";\nimport { Suspense, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { TeamIcon } from \"./team-icon\";\n\ntype MockTeam = {\n  id: string,\n  displayName: string,\n  profileImageUrl?: string | null,\n};\n\ntype TeamSwitcherProps<AllowNull extends boolean = false> = {\n  team?: Team,\n  teamId?: string,\n  teams?: Team[],\n  allowNull?: AllowNull,\n  nullLabel?: string,\n  triggerClassName?: string,\n  onChange?: (team: AllowNull extends true ? Team | null : Team) => Promise<void>,\n  // Mock data props\n  mockUser?: {\n    team?: MockTeam,\n  },\n  mockTeams?: MockTeam[],\n  mockProject?: {\n    config: {\n      clientTeamCreationEnabled: boolean,\n    },\n  },\n};\n\nexport function TeamSwitcher<AllowNull extends boolean = false>(props: TeamSwitcherProps<AllowNull>) {\n  return <Suspense fallback={<Fallback />}>\n    <Inner {...props} />\n  </Suspense>;\n}\n\nfunction Fallback() {\n  return <Skeleton className=\"h-9 w-full max-w-64 stack-scope\" />;\n}\n\nfunction Inner<AllowNull extends boolean>(props: TeamSwitcherProps<AllowNull>) {\n  const { t } = useTranslation();\n  const appFromHook = useStackApp();\n  const userFromHook = useUser();\n\n  // Use mock data if provided, otherwise use real data\n  const app = props.mockUser ? {\n    useProject: () => props.mockProject || { config: { clientTeamCreationEnabled: false } },\n    useNavigate: () => () => {}, // Mock navigate function\n    urls: { accountSettings: '/account-settings' },\n  } : appFromHook;\n\n  const user = props.mockUser ? {\n    selectedTeam: props.mockUser.team,\n    useTeams: () => props.mockTeams || [],\n    setSelectedTeam: async () => {}, // Mock function\n  } : userFromHook;\n\n  const navigate = app.useNavigate();\n  const project = app.useProject();\n  const rawTeams = props.teams ?? user?.useTeams();\n  const selectedTeam = props.team || rawTeams?.find(team => team.id === props.teamId);\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n\n  return (\n    <Select\n      value={selectedTeam?.id || (props.allowNull ? 'null-sentinel' : undefined)}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          let team: MockTeam | null = null;\n          if (value !== 'null-sentinel') {\n            team = teams?.find(team => team.id === value) || null;\n            if (!team) {\n              throw new StackAssertionError('Team not found, this should not happen');\n            }\n          } else {\n            team = null;\n          }\n\n          // Call onChange callback if provided\n          if (props.onChange) {\n            await props.onChange(team as Team);\n          }\n        });\n      }}\n    >\n      <SelectTrigger className={cn(\"stack-scope max-w-64\", props.triggerClassName)}>\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              <span>\n                {t('Current team')}\n              </span>\n              <Button\n                variant='ghost'\n                size='icon'\n                className=\"h-6 w-6\"\n                onClick={() => {\n                  if (!props.mockUser) {\n                    navigate(`${app.urls.accountSettings}#team-${selectedTeam.id}`);\n                  }\n                }}\n              >\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={selectedTeam.id}>\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team={selectedTeam as Team} />\n              <Typography className=\"max-w-40 truncate\">{selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {props.allowNull && <SelectGroup>\n          <SelectItem value=\"null-sentinel\">\n            <div className=\"flex items-center gap-2\">\n              <TeamIcon team='personal' />\n              <Typography className=\"max-w-40 truncate\">{props.nullLabel || t('No team')}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup>}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>{t('Other teams')}</SelectLabel>\n            {teams.filter(team => team.id !== selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center gap-2\">\n                    <TeamIcon team={team as Team} />\n                    <Typography className=\"max-w-64 truncate\">{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> : null}\n\n        {!teams?.length && !props.allowNull ?\n          <SelectGroup>\n            <SelectLabel>{t('No teams yet')}</SelectLabel>\n          </SelectGroup> : null}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => {\n                if (!props.mockUser) {\n                  navigate(`${app.urls.accountSettings}#team-creation`);\n                }\n              }}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> {t('Create a team')}\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components/use-in-iframe.d.ts

@@ -0,0 +1,5 @@
+//#region src/components/use-in-iframe.d.ts
+declare function useInIframe(): boolean;
+//#endregion
+export { useInIframe };
+//# sourceMappingURL=use-in-iframe.d.ts.map

package/dist/esm/components/use-in-iframe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-in-iframe.d.ts","names":[],"sources":["../../../src/components/use-in-iframe.tsx"],"mappings":";iBAQgB,WAAA,CAAA"}

package/dist/esm/components/use-in-iframe.js

@@ -0,0 +1,16 @@
+'use client';
+
+import { useEffect, useState } from "react";
+
+//#region src/components/use-in-iframe.tsx
+function useInIframe() {
+	const [isIframe, setIsIframe] = useState(false);
+	useEffect(() => {
+		if (window.self !== window.top) setIsIframe(true);
+	}, []);
+	return isIframe;
+}
+
+//#endregion
+export { useInIframe };
+//# sourceMappingURL=use-in-iframe.js.map

package/dist/esm/components/use-in-iframe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-in-iframe.js","names":[],"sources":["../../../src/components/use-in-iframe.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//===========================================\nimport { useEffect, useState } from \"react\";\n\nexport function useInIframe() {\n  const [isIframe, setIsIframe] = useState(false);\n  useEffect(() => {\n    if (window.self !== window.top) {\n      setIsIframe(true);\n    }\n  }, []);\n\n  return isIframe;\n}\n"],"mappings":";;;;;AAQA,SAAgB,cAAc;CAC5B,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;AAC/C,iBAAgB;AACd,MAAI,OAAO,SAAS,OAAO,IACzB,aAAY,KAAK;IAElB,EAAE,CAAC;AAEN,QAAO"}

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

@@ -0,0 +1,22 @@
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/user-button.d.ts
+type UserButtonProps = {
+  showUserInfo?: boolean;
+  colorModeToggle?: () => void | Promise<void>;
+  extraItems?: {
+    text: string;
+    icon: React.ReactNode;
+    onClick: () => void | Promise<void>;
+  }[];
+  mockUser?: {
+    displayName?: string;
+    primaryEmail?: string;
+    profileImageUrl?: string;
+  };
+};
+declare function UserButton(props: UserButtonProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { UserButton };
+//# sourceMappingURL=user-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"user-button.d.ts","names":[],"sources":["../../../src/components/user-button.tsx"],"mappings":";;;;KA0BK,eAAA;EACH,YAAA;EACA,eAAA,gBAA+B,OAAA;EAC/B,UAAA;IACE,IAAA;IACA,IAAA,EAAM,KAAA,CAAM,SAAA;IACZ,OAAA,eAAsB,OAAA;EAAA;EAExB,QAAA;IACE,WAAA;IACA,YAAA;IACA,eAAA;EAAA;AAAA;AAAA,iBAIY,UAAA,CAAW,KAAA,EAAO,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}