@stackframe/react 2.7.20

package/dist/components/elements/sidebar-layout.js

@@ -0,0 +1,126 @@
+"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/elements/sidebar-layout.tsx
+var sidebar_layout_exports = {};
+__export(sidebar_layout_exports, {
+  SidebarLayout: () => SidebarLayout
+});
+module.exports = __toCommonJS(sidebar_layout_exports);
+var import_use_hash = require("@stackframe/stack-shared/dist/hooks/use-hash");
+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_jsx_runtime = require("react/jsx-runtime");
+function SidebarLayout(props) {
+  const app = (0, import__.useStackApp)();
+  const navigate = app.useNavigate();
+  const hash = (0, import_use_hash.useHash)();
+  const selectedIndex = props.items.findIndex((item) => item.id && item.id === hash);
+  (0, import_react.useEffect)(() => {
+    if (selectedIndex === -1) {
+      navigate("#" + props.items[0].id);
+    }
+  }, [hash]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_stack_ui.cn)("hidden sm:flex stack-scope h-full", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DesktopLayout, { items: props.items, title: props.title, selectedIndex }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_stack_ui.cn)("sm:hidden stack-scope h-full", props.className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MobileLayout, { items: props.items, title: props.title, selectedIndex }) })
+  ] });
+}
+function Items(props) {
+  const app = (0, import__.useStackApp)();
+  const navigate = app.useNavigate();
+  return props.items.map((item, index) => item.type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_stack_ui.Button,
+    {
+      variant: "ghost",
+      size: "sm",
+      className: (0, import_stack_ui.cn)(
+        props.selectedIndex === index && "bg-muted",
+        "justify-start text-md text-zinc-800 dark:text-zinc-300 px-2 text-left"
+      ),
+      onClick: () => {
+        if (item.id) {
+          navigate("#" + item.id);
+        }
+      },
+      children: [
+        item.icon,
+        item.title
+      ]
+    },
+    index
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: item.title }, index));
+}
+function DesktopLayout(props) {
+  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "stack-scope flex w-full h-full max-w-full relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex max-w-[200px] min-w-[200px] border-r flex-col items-stretch gap-2 p-2 overflow-y-auto", children: [
+      props.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h2", className: "text-lg font-semibold text-zinc-800 dark:text-zinc-300", children: props.title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Items, { items: props.items, selectedIndex: props.selectedIndex })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 w-0 flex justify-center gap-4 py-2 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col max-w-[800px] w-[800px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-4 mb-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h4", className: "font-semibold", children: selectedItem.title }),
+        selectedItem.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: selectedItem.description })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1", children: selectedItem.content })
+    ] }) })
+  ] });
+}
+function MobileLayout(props) {
+  const selectedItem = props.items[props.selectedIndex];
+  const app = (0, import__.useStackApp)();
+  const navigate = app.useNavigate();
+  if (props.selectedIndex === -1) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2 p-2", children: [
+      props.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-2 ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h2", className: "text-lg font-semibold text-zinc-800 dark:text-zinc-300", children: props.title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Items, { items: props.items, selectedIndex: props.selectedIndex })
+    ] });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex flex-col gap-4 py-2 px-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h4", className: "font-semibold", children: selectedItem.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_stack_ui.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: () => {
+                navigate("#");
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.XIcon, { className: "h-5 w-5" })
+            }
+          )
+        ] }),
+        selectedItem.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: selectedItem.description })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1", children: selectedItem.content })
+    ] });
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SidebarLayout
+});
+//# sourceMappingURL=sidebar-layout.js.map

package/dist/components/elements/sidebar-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/elements/sidebar-layout.tsx"],"sourcesContent":["'use client';\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\n\nimport { useHash } from '@stackframe/stack-shared/dist/hooks/use-hash';\nimport { Button, Typography, cn } from '@stackframe/stack-ui';\nimport { XIcon } from 'lucide-react';\nimport React, { ReactNode, useEffect } from 'react';\nimport { useStackApp } from '../..';\n\nexport type SidebarItem = {\n  title: React.ReactNode,\n  type: 'item' | 'divider',\n  description?: React.ReactNode,\n  id?: string,\n  icon?: React.ReactNode,\n  content?: React.ReactNode,\n  contentTitle?: React.ReactNode,\n}\n\nexport function SidebarLayout(props: { items: SidebarItem[], title?: ReactNode, className?: string }) {\n  const app = useStackApp();\n  const navigate = app.useNavigate();\n  const hash = useHash();\n  const selectedIndex = props.items.findIndex(item => item.id && (item.id === hash));\n\n  useEffect(() => {\n    if (selectedIndex === -1) {\n      navigate('#' + props.items[0].id);\n    }\n  }, [hash]);\n\n  return (\n    <>\n      <div className={cn(\"hidden sm:flex stack-scope h-full\", props.className)}>\n        <DesktopLayout items={props.items} title={props.title} selectedIndex={selectedIndex} />\n      </div>\n      <div className={cn(\"sm:hidden stack-scope h-full\", props.className)}>\n        <MobileLayout items={props.items} title={props.title} selectedIndex={selectedIndex} />\n      </div>\n    </>\n  );\n}\n\nfunction Items(props: { items: SidebarItem[], selectedIndex: number }) {\n  const app = useStackApp();\n  const navigate = app.useNavigate();\n\n  return props.items.map((item, index) => (\n    item.type === 'item' ?\n      <Button\n        key={index}\n        variant='ghost'\n        size='sm'\n        className={cn(\n          props.selectedIndex === index && \"bg-muted\",\n          \"justify-start text-md text-zinc-800 dark:text-zinc-300 px-2 text-left\",\n        )}\n        onClick={() => {\n          if (item.id) {\n            navigate('#' + item.id);\n          }\n        }}\n      >\n        {item.icon}\n        {item.title}\n      </Button> :\n      <Typography key={index}>\n        {item.title}\n      </Typography>\n  ));\n\n}\n\nfunction DesktopLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number }) {\n  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];\n\n  return (\n    <div className=\"stack-scope flex w-full h-full max-w-full relative\">\n      <div className=\"flex max-w-[200px] min-w-[200px] border-r flex-col items-stretch gap-2 p-2 overflow-y-auto\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        <Items items={props.items} selectedIndex={props.selectedIndex} />\n      </div>\n      <div className=\"flex-1 w-0 flex justify-center gap-4 py-2 px-4\">\n        <div className='flex flex-col max-w-[800px] w-[800px]'>\n          <div className='mt-4 mb-6'>\n            <Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>\n            {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n          </div>\n          <div className='flex-1'>\n            {selectedItem.content}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MobileLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number }) {\n  const selectedItem = props.items[props.selectedIndex];\n  const app = useStackApp();\n  const navigate = app.useNavigate();\n\n  if (props.selectedIndex === -1) {\n    return (\n      <div className=\"flex flex-col gap-2 p-2\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        <Items items={props.items} selectedIndex={props.selectedIndex} />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex-1 flex flex-col gap-4 py-2 px-4\">\n        <div className='flex flex-col'>\n          <div className='flex justify-between'>\n            <Typography type='h4' className='font-semibold'>{selectedItem.title}</Typography>\n            <Button\n              variant='ghost'\n              size='icon'\n              onClick={() => { navigate('#'); }}\n            >\n              <XIcon className='h-5 w-5' />\n            </Button>\n          </div>\n          {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {selectedItem.content}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/components/elements/ssr-layout-effect.d.mts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function SsrScript(props: {
+    script: string;
+    nonce?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { SsrScript };

package/dist/components/elements/ssr-layout-effect.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function SsrScript(props: {
+    script: string;
+    nonce?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { SsrScript };

package/dist/components/elements/ssr-layout-effect.js

@@ -0,0 +1,47 @@
+"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/elements/ssr-layout-effect.tsx
+var ssr_layout_effect_exports = {};
+__export(ssr_layout_effect_exports, {
+  SsrScript: () => SsrScript
+});
+module.exports = __toCommonJS(ssr_layout_effect_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function SsrScript(props) {
+  (0, import_react.useLayoutEffect)(() => {
+    (0, eval)(props.script);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "script",
+    {
+      suppressHydrationWarning: true,
+      nonce: props.nonce,
+      dangerouslySetInnerHTML: { __html: props.script }
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SsrScript
+});
+//# sourceMappingURL=ssr-layout-effect.js.map

package/dist/components/elements/ssr-layout-effect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/elements/ssr-layout-effect.tsx"],"sourcesContent":["\"use client\";\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { useLayoutEffect } from \"react\";\n\nexport function SsrScript(props: { script: string, nonce?: string }) {\n  useLayoutEffect(() => {\n    // TODO fix workaround: React has a bug where it doesn't run the script on the first CSR render if SSR has been skipped due to suspense\n    // As a workaround, we run the script in the <script> tag again after the first render\n    // Note that we do an indirect eval as described here: https://esbuild.github.io/content-types/#direct-eval\n    (0, eval)(props.script);\n  }, []);\n\n  return (\n    <script\n      suppressHydrationWarning  // the transpiler is setup differently for client/server targets, so if `script` was generated with Function.toString they will differ\n      nonce={props.nonce}\n      dangerouslySetInnerHTML={{ __html: props.script }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,mBAAgC;AAW5B;AATG,SAAS,UAAU,OAA2C;AACnE,oCAAgB,MAAM;AAIpB,KAAC,GAAG,MAAM,MAAM,MAAM;AAAA,EACxB,GAAG,CAAC,CAAC;AAEL,SACE;AAAA,IAAC;AAAA;AAAA,MACC,0BAAwB;AAAA,MACxB,OAAO,MAAM;AAAA,MACb,yBAAyB,EAAE,QAAQ,MAAM,OAAO;AAAA;AAAA,EAClD;AAEJ;","names":[]}

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

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function UserAvatar(props: {
+    size?: number;
+    user?: {
+        profileImageUrl?: string | null;
+        displayName?: string | null;
+        primaryEmail?: string | null;
+    } | null;
+    border?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { UserAvatar };

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

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function UserAvatar(props: {
+    size?: number;
+    user?: {
+        profileImageUrl?: string | null;
+        displayName?: string | null;
+        primaryEmail?: string | null;
+    } | null;
+    border?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { UserAvatar };

package/dist/components/elements/user-avatar.js

@@ -0,0 +1,41 @@
+"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/elements/user-avatar.tsx
+var user_avatar_exports = {};
+__export(user_avatar_exports, {
+  UserAvatar: () => UserAvatar
+});
+module.exports = __toCommonJS(user_avatar_exports);
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultSize = 34;
+function UserAvatar(props) {
+  const user = props.user;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Avatar, { style: { height: props.size || defaultSize, width: props.size || defaultSize }, className: props.border ? "border" : "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarImage, { src: user?.profileImageUrl || "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AvatarFallback, { children: user ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", style: { fontSize: (props.size || defaultSize) * 0.4 }, children: (user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase() }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.UserRound, { className: "text-zinc-500", size: (props.size || defaultSize) * 0.6 }) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  UserAvatar
+});
+//# sourceMappingURL=user-avatar.js.map

package/dist/components/elements/user-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@stackframe/stack-ui\";\nimport { UserRound } from \"lucide-react\";\n\nconst defaultSize = 34;\n\nexport function UserAvatar(props: {\n  size?: number,\n  user?: {\n    profileImageUrl?: string | null,\n    displayName?: string | null,\n    primaryEmail?: string | null,\n  } | null,\n  border?: boolean,\n}) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size || defaultSize, width: props.size || defaultSize }} className={props.border ? 'border' : ''}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ?\n          <div className='font-medium' style={{ fontSize: (props.size || defaultSize) * 0.4 }}>\n            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </div> :\n          <UserRound className=\"text-zinc-500\" size={(props.size || defaultSize) * 0.6} />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,sBAAoD;AACpD,0BAA0B;AAetB;AAbJ,IAAM,cAAc;AAEb,SAAS,WAAW,OAQxB;AACD,QAAM,OAAO,MAAM;AACnB,SACE,6CAAC,0BAAO,OAAO,EAAE,QAAQ,MAAM,QAAQ,aAAa,OAAO,MAAM,QAAQ,YAAY,GAAG,WAAW,MAAM,SAAS,WAAW,IAC3H;AAAA,gDAAC,+BAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,4CAAC,kCACE,iBACC,4CAAC,SAAI,WAAU,eAAc,OAAO,EAAE,WAAW,MAAM,QAAQ,eAAe,IAAI,GAC9E,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,4CAAC,iCAAU,WAAU,iBAAgB,OAAO,MAAM,QAAQ,eAAe,KAAK,GAClF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/iframe-preventer.d.mts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+
+declare function IframePreventer({ children }: {
+    children: React.ReactNode;
+}): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<React$1.AwaitedReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+export { IframePreventer };

package/dist/components/iframe-preventer.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+
+declare function IframePreventer({ children }: {
+    children: React.ReactNode;
+}): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<React$1.AwaitedReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
+
+export { IframePreventer };

package/dist/components/iframe-preventer.js

@@ -0,0 +1,52 @@
+"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/iframe-preventer.tsx
+var iframe_preventer_exports = {};
+__export(iframe_preventer_exports, {
+  IframePreventer: () => IframePreventer
+});
+module.exports = __toCommonJS(iframe_preventer_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function IframePreventer({ children }) {
+  const [isIframe, setIsIframe] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (window.self !== window.top) {
+      setIsIframe(true);
+    }
+  }, []);
+  if (isIframe) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      "Stack Auth components may not run in an ",
+      "<",
+      "iframe",
+      ">",
+      "."
+    ] });
+  }
+  return children;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IframePreventer
+});
+//# sourceMappingURL=iframe-preventer.js.map

package/dist/components/iframe-preventer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/iframe-preventer.tsx"],"sourcesContent":["'use client';\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\nimport { useEffect, useState } from \"react\";\n\nexport function IframePreventer({ children }: {\n  children: React.ReactNode,\n}) {\n  const [isIframe, setIsIframe] = useState(false);\n  useEffect(() => {\n    if (window.self !== window.top) {\n      setIsIframe(true);\n    }\n  }, []);\n\n  if (isIframe) {\n    return <div>Stack Auth components may not run in an {'<'}iframe{'>'}.</div>;\n  }\n\n  return children;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,mBAAoC;AAazB;AAXJ,SAAS,gBAAgB,EAAE,SAAS,GAExC;AACD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,KAAK;AAC9C,8BAAU,MAAM;AACd,QAAI,OAAO,SAAS,OAAO,KAAK;AAC9B,kBAAY,IAAI;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,UAAU;AACZ,WAAO,6CAAC,SAAI;AAAA;AAAA,MAAyC;AAAA,MAAI;AAAA,MAAO;AAAA,MAAI;AAAA,OAAC;AAAA,EACvE;AAEA,SAAO;AACT;","names":[]}

package/dist/components/link.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type LinkProps = {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    prefetch?: boolean;
+};
+declare function Link(props: LinkProps): react_jsx_runtime.JSX.Element;
+declare function StyledLink(props: LinkProps): react_jsx_runtime.JSX.Element;
+
+export { Link, StyledLink };

package/dist/components/link.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type LinkProps = {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+    target?: string;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    prefetch?: boolean;
+};
+declare function Link(props: LinkProps): react_jsx_runtime.JSX.Element;
+declare function StyledLink(props: LinkProps): react_jsx_runtime.JSX.Element;
+
+export { Link, StyledLink };

package/dist/components/link.js

@@ -0,0 +1,51 @@
+"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/link.tsx
+var link_exports = {};
+__export(link_exports, {
+  Link: () => Link,
+  StyledLink: () => StyledLink
+});
+module.exports = __toCommonJS(link_exports);
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_jsx_runtime = require("react/jsx-runtime");
+function Link(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      href: props.href,
+      target: props.target,
+      className: props.className,
+      onClick: props.onClick,
+      children: props.children
+    }
+  );
+}
+function StyledLink(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { ...props, className: (0, import_stack_ui.cn)("underline font-medium", props.className), children: props.children });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Link,
+  StyledLink
+});
+//# sourceMappingURL=link.js.map

package/dist/components/link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/link.tsx"],"sourcesContent":["'use client';\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\n\n\nimport { cn } from \"@stackframe/stack-ui\";\n\ntype LinkProps = {\n  href: string,\n  children: React.ReactNode,\n  className?: string,\n  target?: string,\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>,\n  prefetch?: boolean,\n};\n\nfunction Link(props: LinkProps) {\n  return <a\n    href={props.href}\n    target={props.target}\n    className={props.className}\n    onClick={props.onClick}\n  >\n    {props.children}\n  </a>;\n}\n\nfunction StyledLink(props: LinkProps) {\n  return (\n    <Link {...props} className={cn(\"underline font-medium\", props.className)}>\n      {props.children}\n    </Link>\n  );\n}\n\nexport { Link, StyledLink };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,sBAAmB;AAYV;AADT,SAAS,KAAK,OAAkB;AAC9B,SAAO;AAAA,IAAC;AAAA;AAAA,MACN,MAAM,MAAM;AAAA,MACZ,QAAQ,MAAM;AAAA,MACd,WAAW,MAAM;AAAA,MACjB,SAAS,MAAM;AAAA,MAEd,gBAAM;AAAA;AAAA,EACT;AACF;AAEA,SAAS,WAAW,OAAkB;AACpC,SACE,4CAAC,QAAM,GAAG,OAAO,eAAW,oBAAG,yBAAyB,MAAM,SAAS,GACpE,gBAAM,UACT;AAEJ;","names":[]}

package/dist/components/magic-link-sign-in.d.mts

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

package/dist/components/magic-link-sign-in.d.ts

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

package/dist/components/magic-link-sign-in.js

@@ -0,0 +1,151 @@
+"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/magic-link-sign-in.tsx
+var magic_link_sign_in_exports = {};
+__export(magic_link_sign_in_exports, {
+  MagicLinkSignIn: () => MagicLinkSignIn
+});
+module.exports = __toCommonJS(magic_link_sign_in_exports);
+var import_yup = require("@hookform/resolvers/yup");
+var import_stack_shared = require("@stackframe/stack-shared");
+var import_schema_fields = require("@stackframe/stack-shared/dist/schema-fields");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import__ = require("..");
+var import_translations = require("../lib/translations");
+var import_form_warning = require("./elements/form-warning");
+var import_jsx_runtime = require("react/jsx-runtime");
+function OTP(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const [otp, setOtp] = (0, import_react.useState)("");
+  const [submitting, setSubmitting] = (0, import_react.useState)(false);
+  const stackApp = (0, import__.useStackApp)();
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (otp.length === 6 && !submitting) {
+      setSubmitting(true);
+      stackApp.signInWithMagicLink(otp + props.nonce).then((result) => {
+        if (result.status === "error") {
+          if (result.error instanceof import_stack_shared.KnownErrors.VerificationCodeError) {
+            setError(t("Invalid code"));
+          } else if (result.error instanceof import_stack_shared.KnownErrors.InvalidTotpCode) {
+            setError(t("Invalid TOTP code"));
+          } else {
+            throw result.error;
+          }
+        }
+      }).catch((e) => console.error(e)).finally(() => {
+        setSubmitting(false);
+        setOtp("");
+      });
+    }
+    if (otp.length !== 0 && otp.length !== 6) {
+      setError(null);
+    }
+  }, [otp, submitting]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-stretch stack-scope", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { className: "w-full flex flex-col items-center mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "mb-2", children: t("Enter the code from your email") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.InputOTP,
+        {
+          maxLength: 6,
+          type: "text",
+          inputMode: "text",
+          pattern: "^[a-zA-Z0-9]+$",
+          value: otp,
+          onChange: (value) => setOtp(value.toUpperCase()),
+          disabled: submitting,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.InputOTPGroup, { children: [0, 1, 2, 3, 4, 5].map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.InputOTPSlot, { index, size: "lg" }, index)) })
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: error })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { variant: "link", onClick: props.onBack, className: "underline", children: t("Cancel") })
+  ] });
+}
+function MagicLinkSignIn() {
+  const { t } = (0, import_translations.useTranslation)();
+  const app = (0, import__.useStackApp)();
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [nonce, setNonce] = (0, import_react.useState)(null);
+  const schema = (0, import_schema_fields.yupObject)({
+    email: (0, import_schema_fields.strictEmailSchema)(t("Please enter a valid email")).defined().nonEmpty(t("Please enter your email"))
+  });
+  const { register, handleSubmit, setError, formState: { errors } } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(schema)
+  });
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      const { email } = data;
+      const result = await app.sendMagicLinkEmail(email);
+      if (result.status === "error") {
+        setError("email", { type: "manual", message: result.error.message });
+        return;
+      } else {
+        setNonce(result.data.nonce);
+      }
+    } catch (e) {
+      if (e instanceof import_stack_shared.KnownErrors.SignUpNotEnabled) {
+        setError("email", { type: "manual", message: t("New account registration is not allowed") });
+      } else {
+        throw e;
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (nonce) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OTP, { nonce, onBack: () => setNonce(null) });
+  } else {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "form",
+      {
+        className: "flex flex-col items-stretch stack-scope",
+        onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "email", className: "mb-1", children: t("Email") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_stack_ui.Input,
+            {
+              id: "email",
+              type: "email",
+              autoComplete: "email",
+              ...register("email")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.email?.message?.toString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", className: "mt-6", loading, children: t("Send email") })
+        ]
+      }
+    );
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MagicLinkSignIn
+});
+//# sourceMappingURL=magic-link-sign-in.js.map