npm - @tatchi-xyz/sdk - Versions diffs - 0.32.2 → 0.32.3 - Mend

@tatchi-xyz/sdk 0.32.2 → 0.32.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist/esm/react/components/PasskeyAuthMenu/skeleton.js CHANGED Viewed

@@ -1,116 +1,170 @@
 import { useTheme } from "../theme/ThemeProvider.js";
-import "./PasskeyAuthMenu.js";
+import { ArrowLeftIcon } from "./ui/icons/ArrowLeft.js";
+import { MailIcon } from "./ui/icons/Mail.js";
+import QRCodeIcon_default from "../QRCodeIcon.js";
 import { PasskeyAuthMenuThemeScope } from "./themeScope.js";
+import { AuthMenuMode } from "./authMenuTypes.js";
+import { getModeTitle } from "./controller/mode.js";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/react/components/PasskeyAuthMenu/skeleton.tsx
-const PasskeyAuthMenuSkeletonInner = React.forwardRef(({ className, style }, ref) => {
-	return /* @__PURE__ */ jsxs("div", {
+const PasskeyAuthMenuSkeletonInner = React.forwardRef(({ className, style, defaultMode, headings }, ref) => {
+	const mode = typeof defaultMode === "number" ? defaultMode : AuthMenuMode.Register;
+	const title = getModeTitle(mode, headings ?? null);
+	const placeholder = mode === AuthMenuMode.Register ? "Pick a username" : mode === AuthMenuMode.Sync ? "Leave blank to discover accounts" : "Enter your username";
+	const segHelpText = mode === AuthMenuMode.Login ? "Sign in with your passkey" : mode === AuthMenuMode.Sync ? "Sync account (iCloud/Chrome sync)" : "Create a new account";
+	const segActiveWidth = "calc((100% - 18px) / 3)";
+	const segActiveX = mode === AuthMenuMode.Login ? `calc(5px + ${segActiveWidth} + 4px)` : mode === AuthMenuMode.Sync ? `calc(5px + ${segActiveWidth} + 4px + ${segActiveWidth} + 4px)` : "5px";
+	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: `w3a-signup-menu-root w3a-skeleton${className ? ` ${className}` : ""}`,
 		style,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "w3a-header",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "w3a-skeleton-block w3a-title-skeleton",
-					style: {
-						width: "60%",
-						height: "24px",
-						marginBottom: "8px"
-					}
-				}), /* @__PURE__ */ jsx("div", {
-					className: "w3a-skeleton-block w3a-subtitle-skeleton",
-					style: {
-						width: "80%",
-						height: "16px"
-					}
-				})]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "w3a-passkey-row",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "w3a-input-pill w3a-skeleton-input",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "w3a-skeleton-block",
-						style: {
-							width: "40%",
-							height: "18px",
-							marginLeft: "12px"
-						}
-					})
-				})
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "w3a-segmented-root",
-				children: /* @__PURE__ */ jsxs("div", {
-					className: "w3a-seg-track",
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: "w3a-seg-button",
-							children: "Register"
-						}),
-						/* @__PURE__ */ jsx("div", {
-							className: "w3a-seg-button",
-							children: "Login"
-						}),
-						/* @__PURE__ */ jsx("div", {
-							className: "w3a-seg-button",
-							children: "Sync"
-						})
-					]
+		"data-mode": mode,
+		"data-waiting": "false",
+		"data-scan-device": "false",
+		"data-email-recovery": "false",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "w3a-content-switcher",
+			children: [/* @__PURE__ */ jsx("button", {
+				"aria-label": "Back",
+				type: "button",
+				className: "w3a-back-button",
+				disabled: true,
+				children: /* @__PURE__ */ jsx(ArrowLeftIcon, {
+					size: 18,
+					strokeWidth: 2.25,
+					style: { display: "block" }
 				})
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "w3a-seg-help-row",
+			}), /* @__PURE__ */ jsx("div", {
+				className: "w3a-content-area",
 				children: /* @__PURE__ */ jsx("div", {
-					className: "w3a-skeleton-block",
-					style: {
-						width: "50%",
-						height: "14px",
-						margin: "0 auto"
-					}
-				})
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "w3a-scan-device-row",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "w3a-section-divider",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "w3a-section-divider-text",
-						children: "Already have an account?"
+					className: "w3a-content-sizer",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "w3a-signin-menu",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "w3a-header",
+								children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+									className: "w3a-title",
+									children: title.title
+								}), /* @__PURE__ */ jsx("div", {
+									className: "w3a-subhead",
+									children: title.subtitle
+								})] })
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "w3a-passkey-row",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "w3a-input-pill",
+									children: /* @__PURE__ */ jsx("div", {
+										className: "w3a-input-wrap",
+										children: /* @__PURE__ */ jsx("input", {
+											type: "text",
+											name: "passkey",
+											disabled: true,
+											placeholder,
+											className: "w3a-input",
+											"aria-disabled": "true",
+											autoCapitalize: "none",
+											autoCorrect: "off",
+											spellCheck: false,
+											inputMode: "text",
+											style: { pointerEvents: "none" }
+										})
+									})
+								}), /* @__PURE__ */ jsx("div", {
+									style: {
+										position: "relative",
+										display: "inline-block"
+									},
+									children: /* @__PURE__ */ jsx("button", {
+										"aria-label": "Continue",
+										type: "button",
+										className: "w3a-arrow-btn no-transition",
+										disabled: true
+									})
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "w3a-seg",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "w3a-seg-active",
+									style: {
+										width: segActiveWidth,
+										transform: `translateX(${segActiveX})`,
+										opacity: .9,
+										background: "var(--w3a-passkey-auth-menu2-seg-active-bg)"
+									}
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "w3a-seg-grid",
+									children: [
+										/* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-pressed": mode === AuthMenuMode.Register,
+											className: `w3a-seg-btn${mode === AuthMenuMode.Register ? " is-active" : ""} register`,
+											disabled: true,
+											children: "Register"
+										}),
+										/* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-pressed": mode === AuthMenuMode.Login,
+											className: `w3a-seg-btn${mode === AuthMenuMode.Login ? " is-active" : ""} login`,
+											disabled: true,
+											children: "Login"
+										}),
+										/* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-pressed": mode === AuthMenuMode.Sync,
+											className: `w3a-seg-btn${mode === AuthMenuMode.Sync ? " is-active" : ""} sync`,
+											disabled: true,
+											children: "Sync"
+										})
+									]
+								})]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "w3a-seg-help-row",
+								children: /* @__PURE__ */ jsx("div", {
+									className: "w3a-seg-help",
+									"aria-live": "polite",
+									children: segHelpText
+								})
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "w3a-scan-device-row",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "w3a-section-divider",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "w3a-section-divider-text",
+										children: "Already have an account?"
+									})
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "w3a-secondary-actions",
+									children: [/* @__PURE__ */ jsxs("button", {
+										className: "w3a-link-device-btn",
+										disabled: true,
+										children: [/* @__PURE__ */ jsx(QRCodeIcon_default, {
+											width: 18,
+											height: 18,
+											strokeWidth: 2
+										}), "Scan and Link Device"]
+									}), /* @__PURE__ */ jsxs("button", {
+										className: "w3a-link-device-btn",
+										disabled: true,
+										children: [/* @__PURE__ */ jsx(MailIcon, {
+											size: 18,
+											strokeWidth: 2,
+											style: { display: "block" }
+										}), "Recover Account with Email"]
+									})]
+								})]
+							})
+						]
 					})
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "w3a-secondary-actions",
-					children: [/* @__PURE__ */ jsxs("button", {
-						className: "w3a-link-device-btn",
-						disabled: true,
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "w3a-skeleton-block",
-							style: {
-								width: "18px",
-								height: "18px",
-								marginRight: "8px",
-								borderRadius: "4px"
-							}
-						}), "Scan and Link Device"]
-					}), /* @__PURE__ */ jsxs("button", {
-						className: "w3a-link-device-btn",
-						disabled: true,
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "w3a-skeleton-block",
-							style: {
-								width: "18px",
-								height: "18px",
-								marginRight: "8px",
-								borderRadius: "9999px"
-							}
-						}), "Recover Account with Email"]
-					})]
-				})]
-			})
-		]
+				})
+			})]
+		})
 	});
 });
 PasskeyAuthMenuSkeletonInner.displayName = "PasskeyAuthMenuSkeletonInner";

package/dist/esm/react/components/PasskeyAuthMenu/skeleton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.js","names":["PasskeyAuthMenuSkeleton: React.FC<PasskeyAuthMenuSkeletonProps>"],"sources":["../../../../../src/react/components/PasskeyAuthMenu/skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport './~~PasskeyAuthMenu.css~~';\nimport { PasskeyAuthMenuThemeScope } from './themeScope';\nimport { useTheme } from '../theme';\n\nexport interface PasskeyAuthMenuSkeletonProps {\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const PasskeyAuthMenuSkeletonInner = React.forwardRef<\n HTMLDivElement,\n PasskeyAuthMenuSkeletonProps\n>(({ className, style }, ref) => {\n return (\n <div\n ref={ref}\n className={`w3a-signup-menu-root w3a-skeleton${className ? ` ${className}` : ''}`}\n style={style}\n >\n <div className=\"w3a-~~header~~\">\n <~~div~~\n className=\"w3a-~~skeleton~~-~~block w3a-title-skeleton~~\"\n style={{ ~~width~~: '~~60%~~', ~~height: '24px', marginBottom: '8px'~~ }}\n ~~/>\~~n <div\n className=\"w3a-~~skeleton~~-~~block~~ w3a-~~subtitle~~-~~skeleton~~\"\n ~~style=~~{{ ~~width: '80%', height: '16px'~~ }}\n ~~/>\~~n </div>\n\n <div className=\"w3a-passkey-row\">\n <div className=\"w3a-input-pill w3a-~~skeleton~~-~~input~~\">\n <~~div~~\n className=\"w3a-~~skeleton~~-~~block~~\"\n style={{ ~~width~~: '~~40%~~', ~~height~~: '~~18px~~', ~~marginLeft~~: '~~12px~~' }}\n />\n </div>\n </div>\n\n <div className=\"w3a-~~segmented-root~~\">\n <div className=\"w3a-seg-~~track~~\">\n <div className=\"w3a-seg-button\">Register</~~div~~>\n <~~div~~ className~~=\"~~w3a-seg-~~button~~\">Login</~~div~~>\n <~~div~~ className~~=\"~~w3a-seg-~~button~~\">Sync</~~div~~>\n </div>\n </div>\n\n <div className=\"w3a-seg-help-row\">\n <div\n className=\"w3a-~~skeleton~~-~~block~~\"\n ~~style=~~{~~{ width: '50%', height: '14px', margin: '0 auto'~~ }}\n ~~/>\~~n </div>\n\n <div className=\"w3a-scan-device-row\">\n <div className=\"w3a-section-divider\">\n <~~div~~ className=\"w3a-section-divider-text\">Already have an account?</~~div~~>\n </div>\n <div className=\"w3a-secondary-actions\">\n <button className=\"w3a-link-device-btn\" disabled>\n <~~div\n className=\"w3a-skeleton-block\"\n style~~={~~{\n width:~~ ~~'18px',\n~~ height: ~~'18px',\n marginRight:~~ ~~'8px',\n borderRadius: '4px',\n }}\n~~ />\n Scan and Link Device\n </button>\n <button className=\"w3a-link-device-btn\" disabled>\n <~~div\n className=\"w3a-skeleton-block\"\n~~ style={{~~\n width:~~ ~~'18px',\n height~~: '~~18px~~'~~,\n marginRight:~~ ~~'8px',\n borderRadius: '9999px',\n~~ }}\n />\n Recover Account with Email\n </button>\n </div>\n </div>\n </div>\n );\n});\nPasskeyAuthMenuSkeletonInner.displayName = 'PasskeyAuthMenuSkeletonInner';\n\nexport const PasskeyAuthMenuSkeleton: React.FC<PasskeyAuthMenuSkeletonProps> = (props) => {\n const { theme } = useTheme();\n return (\n <PasskeyAuthMenuThemeScope theme={theme}>\n <PasskeyAuthMenuSkeletonInner {...props} />\n </PasskeyAuthMenuThemeScope>\n );\n};\n\nexport default PasskeyAuthMenuSkeleton;\n"],"mappings":"~~;;;;;;;AAUA~~,MAAa,+BAA+B,MAAM,YAG/C,EAAE,WAAW,~~SAAS~~,QAAQ;~~AAC/B~~,QACE,~~qBAAC~~;EACM;EACL,WAAW,oCAAoC,YAAY,IAAI,cAAc;EACtE~~;;GAEP~~,qBAAC;~~IAAI~~,WAAU;~~eACb~~,oBAAC;~~KACC~~,~~WAAU~~;~~KACV~~,~~OAAO~~;~~MAAE~~,~~OAAO~~;~~MAAO,QAAQ~~;~~MAAQ~~,~~cAAc;;QAEvD,~~oBAAC;~~KACC~~,~~WAAU~~;~~KACV~~,~~OAAO~~;~~MAAE~~,OAAO~~;MAAO~~,~~QAAQ;;;;GAInC~~,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAI,WAAU;eACb,oBAAC;~~MACC~~,WAAU;~~MACV~~,~~OAAO~~;~~OAAE~~,~~OAAO~~;~~OAAO~~,~~QAAQ~~;~~OAAQ~~,~~YAAY;;;;;GAKzD,~~oBAAC;~~IAAI~~,WAAU;~~cACb~~,qBAAC;~~KAAI~~,WAAU~~;;MACb~~,oBAAC;~~OAAI~~,WAAU;~~iBAAiB;;MAChC~~,oBAAC;~~OAAI~~,WAAU;~~iBAAiB;;MAChC~~,oBAAC;~~OAAI~~,~~WAAU~~;~~iBAAiB;;;;;GAIpC~~,~~oBAAC~~;~~IAAI~~,WAAU;~~cACb~~,~~oBAAC~~;~~KACC~~,WAAU;~~KACV~~,OAAO;~~MAAE~~,OAAO;~~MAAO~~,~~QAAQ~~;~~MAAQ~~,~~QAAQ~~;;;;~~GAInD~~,qBAAC;~~IAAI~~,WAAU;~~eACb~~,oBAAC;~~KAAI~~,WAAU;~~eACb~~,~~oBAAC~~;~~MAAI~~,~~WAAU~~;~~gBAA2B~~;;~~QAE5C~~,qBAAC;~~KAAI~~,WAAU;~~gBACb~~,~~qBAAC~~;~~MAAO~~,~~WAAU~~;~~MAAsB~~;~~iBACtC~~,oBAAC;~~OACC~~,~~WAAU~~;~~OACV~~,~~OAAO;QACL~~,~~OAAO~~;~~QACP~~,QAAQ;~~QACR~~,aAAa;~~QACb~~,cAAc~~;;UAEhB~~;~~SAGJ~~,qBAAC;~~MAAO~~,WAAU;~~MAAsB~~;~~iBACtC~~,oBAAC;~~OACC~~,WAAU;~~OACV~~,~~OAAO~~;~~QACL~~,OAAO;~~QACP~~,QAAQ;~~QACR~~,aAAa;~~QACb~~,~~cAAc;;UAEhB;;;;;;;AAQd~~,6BAA6B,cAAc;AAE3C,~~MAAaA~~,2BAAmE,UAAU;CACxF,MAAM,EAAE,UAAU;AAClB,QACE,oBAAC;EAAiC;YAChC,oBAAC,gCAA6B,GAAI;;;AAKxC,uBAAe"}
1	+ {"version":3,"file":"skeleton.js","names":["QRCodeIcon","PasskeyAuthMenuSkeleton: React.FC<PasskeyAuthMenuSkeletonProps>"],"sources":["../../../../../src/react/components/PasskeyAuthMenu/skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport { ArrowLeftIcon, MailIcon } from './ui/icons';\nimport QRCodeIcon from '../QRCodeIcon';\nimport { PasskeyAuthMenuThemeScope } from './themeScope';\nimport { useTheme } from '../theme';\nimport { getModeTitle } from './controller/mode';\nimport { AuthMenuMode, type AuthMenuHeadings } from './types';\n\nexport interface PasskeyAuthMenuSkeletonProps {\n className?: string;\n style?: React.CSSProperties;\n /** Best-effort to match the hydrated UI default tab. /\n defaultMode?: AuthMenuMode;\n /* Best-effort to match the hydrated UI headings. */\n headings?: AuthMenuHeadings;\n}\n\nexport const PasskeyAuthMenuSkeletonInner = React.forwardRef<\n HTMLDivElement,\n PasskeyAuthMenuSkeletonProps\n>(({ className, style, defaultMode, headings }, ref) => {\n const mode = typeof defaultMode === 'number' ? defaultMode : AuthMenuMode.Register;\n const title = getModeTitle(mode, headings ?? null);\n const placeholder =\n mode === AuthMenuMode.Register\n ? 'Pick a username'\n : mode === AuthMenuMode.Sync\n ? 'Leave blank to discover accounts'\n : 'Enter your username';\n const segHelpText =\n mode === AuthMenuMode.Login\n ? 'Sign in with your passkey'\n : mode === AuthMenuMode.Sync\n ? 'Sync account (iCloud/Chrome sync)'\n : 'Create a new account';\n const segActiveWidth = 'calc((100% - 18px) / 3)';\n const segActiveX =\n mode === AuthMenuMode.Login\n ? `calc(5px + ${segActiveWidth} + 4px)`\n : mode === AuthMenuMode.Sync\n ? `calc(5px + ${segActiveWidth} + 4px + ${segActiveWidth} + 4px)`\n : '5px';\n\n return (\n <div\n ref={ref}\n className={`w3a-signup-menu-root w3a-skeleton${className ? ` ${className}` : ''}`}\n style={style}\n data-mode={mode}\n data-waiting=\"false\"\n data-scan-device=\"false\"\n data-email-recovery=\"false\"\n >\n <div className=\"w3a-content-switcher\">\n <button aria-label=\"Back\" type=\"button\" className=\"w3a-back-button\" disabled>\n <ArrowLeftIcon size={18} strokeWidth={2.25} style={{ display: 'block' }} />\n </button>\n\n <div className=\"w3a-content-area\">\n <div className=\"w3a-content-sizer\">\n <div className=\"w3a-signin-menu\">\n <div className=\"w3a-header\">\n <div>\n <div className=\"w3a-title\">{title.title}</div>\n <div className=\"w3a-subhead\">{title.subtitle}</div>\n </div>\n </div>\n\n <div className=\"w3a-passkey-row\">\n <div className=\"w3a-input-pill\">\n <div className=\"w3a-input-wrap\">\n <input\n type=\"text\"\n name=\"passkey\"\n disabled\n placeholder={placeholder}\n className=\"w3a-input\"\n aria-disabled=\"true\"\n autoCapitalize=\"none\"\n autoCorrect=\"off\"\n spellCheck={false}\n inputMode=\"text\"\n style={{ pointerEvents: 'none' }}\n />\n </div>\n </div>\n <div style={{ position: 'relative', display: 'inline-block' }}>\n <button aria-label=\"Continue\" type=\"button\" className=\"w3a-arrow-btn no-transition\" disabled />\n </div>\n </div>\n\n <div className=\"w3a-seg\">\n <div\n className=\"w3a-seg-active\"\n style={{\n width: segActiveWidth,\n transform: `translateX(${segActiveX})`,\n opacity: 0.9,\n background: 'var(--w3a-passkey-auth-menu2-seg-active-bg)',\n }}\n />\n <div className=\"w3a-seg-grid\">\n <button\n type=\"button\"\n aria-pressed={mode === AuthMenuMode.Register}\n className={`w3a-seg-btn${mode === AuthMenuMode.Register ? ' is-active' : ''} register`}\n disabled\n >\n Register\n </button>\n <button\n type=\"button\"\n aria-pressed={mode === AuthMenuMode.Login}\n className={`w3a-seg-btn${mode === AuthMenuMode.Login ? ' is-active' : ''} login`}\n disabled\n >\n Login\n </button>\n <button\n type=\"button\"\n aria-pressed={mode === AuthMenuMode.Sync}\n className={`w3a-seg-btn${mode === AuthMenuMode.Sync ? ' is-active' : ''} sync`}\n disabled\n >\n Sync\n </button>\n </div>\n </div>\n\n <div className=\"w3a-seg-help-row\">\n <div className=\"w3a-seg-help\" aria-live=\"polite\">\n {segHelpText}\n </div>\n </div>\n\n <div className=\"w3a-scan-device-row\">\n <div className=\"w3a-section-divider\">\n <span className=\"w3a-section-divider-text\">Already have an account?</span>\n </div>\n <div className=\"w3a-secondary-actions\">\n <button className=\"w3a-link-device-btn\" disabled>\n <QRCodeIcon width={18} height={18} strokeWidth={2} />\n Scan and Link Device\n </button>\n <button className=\"w3a-link-device-btn\" disabled>\n <MailIcon size={18} strokeWidth={2} style={{ display: 'block' }} />\n Recover Account with Email\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n );\n});\nPasskeyAuthMenuSkeletonInner.displayName = 'PasskeyAuthMenuSkeletonInner';\n\nexport const PasskeyAuthMenuSkeleton: React.FC<PasskeyAuthMenuSkeletonProps> = (props) => {\n const { theme } = useTheme();\n return (\n <PasskeyAuthMenuThemeScope theme={theme}>\n <PasskeyAuthMenuSkeletonInner {...props} />\n </PasskeyAuthMenuThemeScope>\n );\n};\n\nexport default PasskeyAuthMenuSkeleton;\n"],"mappings":";;;;;;;;;;;AAiBA,MAAa,+BAA+B,MAAM,YAG/C,EAAE,WAAW,OAAO,aAAa,YAAY,QAAQ;CACtD,MAAM,OAAO,OAAO,gBAAgB,WAAW,cAAc,aAAa;CAC1E,MAAM,QAAQ,aAAa,MAAM,YAAY;CAC7C,MAAM,cACJ,SAAS,aAAa,WAClB,oBACA,SAAS,aAAa,OACpB,qCACA;CACR,MAAM,cACJ,SAAS,aAAa,QAClB,8BACA,SAAS,aAAa,OACpB,sCACA;CACR,MAAM,iBAAiB;CACvB,MAAM,aACJ,SAAS,aAAa,QAClB,cAAc,eAAe,WAC7B,SAAS,aAAa,OACpB,cAAc,eAAe,WAAW,eAAe,WACvD;AAER,QACE,oBAAC;EACM;EACL,WAAW,oCAAoC,YAAY,IAAI,cAAc;EACtE;EACP,aAAW;EACX,gBAAa;EACb,oBAAiB;EACjB,uBAAoB;YAEpB,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAO,cAAW;IAAO,MAAK;IAAS,WAAU;IAAkB;cAClE,oBAAC;KAAc,MAAM;KAAI,aAAa;KAAM,OAAO,EAAE,SAAS;;OAGhE,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAI,WAAU;eACb,qBAAC;MAAI,WAAU;;OACb,oBAAC;QAAI,WAAU;kBACb,qBAAC,oBACC,oBAAC;SAAI,WAAU;mBAAa,MAAM;YAClC,oBAAC;SAAI,WAAU;mBAAe,MAAM;;;OAIxC,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAI,WAAU;mBACb,oBAAC;UAAI,WAAU;oBACb,oBAAC;WACC,MAAK;WACL,MAAK;WACL;WACa;WACb,WAAU;WACV,iBAAc;WACd,gBAAe;WACf,aAAY;WACZ,YAAY;WACZ,WAAU;WACV,OAAO,EAAE,eAAe;;;YAI9B,oBAAC;SAAI,OAAO;UAAE,UAAU;UAAY,SAAS;;mBAC3C,oBAAC;UAAO,cAAW;UAAW,MAAK;UAAS,WAAU;UAA8B;;;;OAIxF,qBAAC;QAAI,WAAU;mBACb,oBAAC;SACC,WAAU;SACV,OAAO;UACL,OAAO;UACP,WAAW,cAAc,WAAW;UACpC,SAAS;UACT,YAAY;;YAGhB,qBAAC;SAAI,WAAU;;UACb,oBAAC;WACC,MAAK;WACL,gBAAc,SAAS,aAAa;WACpC,WAAW,cAAc,SAAS,aAAa,WAAW,eAAe,GAAG;WAC5E;qBACD;;UAGD,oBAAC;WACC,MAAK;WACL,gBAAc,SAAS,aAAa;WACpC,WAAW,cAAc,SAAS,aAAa,QAAQ,eAAe,GAAG;WACzE;qBACD;;UAGD,oBAAC;WACC,MAAK;WACL,gBAAc,SAAS,aAAa;WACpC,WAAW,cAAc,SAAS,aAAa,OAAO,eAAe,GAAG;WACxE;qBACD;;;;;OAML,oBAAC;QAAI,WAAU;kBACb,oBAAC;SAAI,WAAU;SAAe,aAAU;mBACrC;;;OAIL,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAI,WAAU;mBACb,oBAAC;UAAK,WAAU;oBAA2B;;YAE7C,qBAAC;SAAI,WAAU;oBACb,qBAAC;UAAO,WAAU;UAAsB;qBACtC,oBAACA;WAAW,OAAO;WAAI,QAAQ;WAAI,aAAa;cAAK;aAGvD,qBAAC;UAAO,WAAU;UAAsB;qBACtC,oBAAC;WAAS,MAAM;WAAI,aAAa;WAAG,OAAO,EAAE,SAAS;cAAa;;;;;;;;;;;AAYvF,6BAA6B,cAAc;AAE3C,MAAaC,2BAAmE,UAAU;CACxF,MAAM,EAAE,UAAU;AAClB,QACE,oBAAC;EAAiC;YAChC,oBAAC,gCAA6B,GAAI;;;AAKxC,uBAAe"}

package/dist/esm/react/components/PasskeyAuthMenu/ui/ContentSwitcher.js CHANGED Viewed

@@ -6,6 +6,10 @@ const ContentSwitcher = ({ waiting, waitingText = "Waiting for Passkey…", wait
 	const switcherRef = React.useRef(null);
 	const contentAreaRef = React.useRef(null);
 	const sizerRef = React.useRef(null);
+	const isInitialMount = React.useRef(true);
+	React.useEffect(() => {
+		isInitialMount.current = false;
+	}, []);
 	const prefersReducedMotion = React.useMemo(() => {
 		if (typeof window === "undefined" || !("matchMedia" in window)) return false;
 		return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -91,7 +95,7 @@ const ContentSwitcher = ({ waiting, waitingText = "Waiting for Passkey…", wait
 						children: emailRecoveryElement
 					}),
 					!waiting && !showScanDevice && !showEmailRecovery && /* @__PURE__ */ jsx("div", {
-						className: "w3a-signin-menu",
+						className: `w3a-signin-menu${isInitialMount.current ? " w3a-no-animation" : ""}`,
 						children
 					})
 				]

package/dist/esm/react/components/PasskeyAuthMenu/ui/ContentSwitcher.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentSwitcher.js","names":["ContentSwitcher: React.FC<ContentSwitcherProps>"],"sources":["../../../../../../src/react/components/PasskeyAuthMenu/ui/ContentSwitcher.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface ContentSwitcherProps {\n waiting: boolean;\n waitingText?: string;\n waitingSubtext?: string;\n waitingSDKEventsText?: string;\n showScanDevice?: boolean;\n showQRCodeElement?: React.ReactNode;\n showEmailRecovery?: boolean;\n emailRecoveryElement?: React.ReactNode;\n children: React.ReactNode;\n backButton?: React.ReactNode;\n}\n\nexport const ContentSwitcher: React.FC<ContentSwitcherProps> = ({\n waiting,\n waitingText = 'Waiting for Passkey…',\n waitingSubtext = '',\n waitingSDKEventsText = '',\n showScanDevice = false,\n showQRCodeElement,\n showEmailRecovery = false,\n emailRecoveryElement,\n children,\n backButton,\n}) => {\n // Animate height of the switcher as content changes\n const switcherRef = React.useRef<HTMLDivElement \| null>(null);\n const contentAreaRef = React.useRef<HTMLDivElement \| null>(null);\n const sizerRef = React.useRef<HTMLDivElement \| null>(null);\n\n // Track whether user prefers reduced motion\n const prefersReducedMotion = React.useMemo(() => {\n if (typeof window === 'undefined' \|\| !('matchMedia' in window)) return false;\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n }, []);\n\n // Helper to read current content height and apply to the switcher\n const syncHeight = React.useCallback(() => {\n const wrap = switcherRef.current;\n const sizer = sizerRef.current;\n if (!wrap \|\| !sizer) return;\n // Use scrollHeight to capture intrinsic content size regardless of flex context\n const next = sizer.scrollHeight;\n if (prefersReducedMotion) {\n // Apply without animation\n wrap.style.transition = 'none';\n wrap.style.height = `${next}px`;\n // Force reflow then restore transition so future changes can animate\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n wrap.offsetHeight;\n wrap.style.transition = '';\n return;\n }\n // Normal path: let CSS transition handle the interpolation\n wrap.style.height = `${next}px`;\n }, [prefersReducedMotion]);\n\n // Observe size changes of the content area\n React.useLayoutEffect(() => {\n const area = contentAreaRef.current;\n const sizer = sizerRef.current;\n if (!area \|\| !sizer) return;\n\n // Initial sync after mount/update\n syncHeight();\n\n // ResizeObserver to capture dynamic content changes (e.g., QR render)\n const ro = new ResizeObserver(() => {\n // Use rAF to coalesce layout reads/writes with rendering\n requestAnimationFrame(syncHeight);\n });\n ro.observe(sizer);\n\n // Re-sync after fonts load (text metrics can change)\n const fonts = document?.fonts;\n if (fonts?.ready) {\n fonts.ready.then(() => syncHeight()).catch(() => {});\n }\n\n // Also re-sync on window resize\n const onResize = () => syncHeight();\n window.addEventListener('resize', onResize);\n\n return () => {\n ro.disconnect();\n window.removeEventListener('resize', onResize);\n };\n }, [syncHeight, waiting, showScanDevice, showEmailRecovery, children, emailRecoveryElement]);\n\n return (\n <div ref={switcherRef} className=\"w3a-content-switcher\">\n {/* Back button - absolutely positioned overlay /}\n {backButton}\n\n {/ Content areas - conditionally rendered with smooth transitions */}\n <div ref={contentAreaRef} className=\"w3a-content-area\">\n <div ref={sizerRef} className=\"w3a-content-sizer\">\n {waiting && (\n <div className=\"w3a-waiting\">\n <div className=\"w3a-waiting-message\">\n <div className=\"w3a-waiting-text\">{waitingText}</div>\n {waitingSubtext.trim().length > 0 && (\n <div className=\"w3a-waiting-subtext\">{waitingSubtext}</div>\n )}\n {waitingSDKEventsText.trim().length > 0 && (\n <div className=\"w3a-waiting-sdk-events\">{waitingSDKEventsText}</div>\n )}\n </div>\n <div aria-label=\"Loading\" className=\"w3a-spinner\" />\n </div>\n )}\n\n {showScanDevice && <div className=\"w3a-scan-device-content\">{showQRCodeElement}</div>}\n\n {showEmailRecovery && <div className=\"w3a-email-recovery-content\">{emailRecoveryElement}</div>}\n\n {!waiting && !showScanDevice && !showEmailRecovery && (\n <div className~~=\"~~w3a-signin-menu~~\">~~{children}</div>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default ContentSwitcher;\n"],"mappings":";;;;AAeA,MAAaA,mBAAmD,EAC9D,SACA,cAAc,wBACd,iBAAiB,IACjB,uBAAuB,IACvB,iBAAiB,OACjB,mBACA,oBAAoB,OACpB,sBACA,UACA,iBACI;CAEJ,MAAM,cAAc,MAAM,OAA8B;CACxD,MAAM,iBAAiB,MAAM,OAA8B;CAC3D,MAAM,WAAW,MAAM,OAA8B;~~CAGrD~~,MAAM,uBAAuB,MAAM,cAAc;AAC/C,MAAI,OAAO,WAAW,eAAe,EAAE,gBAAgB,QAAS,QAAO;AACvE,SAAO,OAAO,WAAW,oCAAoC;IAC5D;CAGH,MAAM,aAAa,MAAM,kBAAkB;EACzC,MAAM,OAAO,YAAY;EACzB,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,QAAQ,CAAC,MAAO;EAErB,MAAM,OAAO,MAAM;AACnB,MAAI,sBAAsB;AAExB,QAAK,MAAM,aAAa;AACxB,QAAK,MAAM,SAAS,GAAG,KAAK;AAG5B,QAAK;AACL,QAAK,MAAM,aAAa;AACxB;;AAGF,OAAK,MAAM,SAAS,GAAG,KAAK;IAC3B,CAAC;AAGJ,OAAM,sBAAsB;EAC1B,MAAM,OAAO,eAAe;EAC5B,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,QAAQ,CAAC,MAAO;AAGrB;EAGA,MAAM,KAAK,IAAI,qBAAqB;AAElC,yBAAsB;;AAExB,KAAG,QAAQ;EAGX,MAAM,QAAQ,UAAU;AACxB,MAAI,OAAO,MACT,OAAM,MAAM,WAAW,cAAc,YAAY;EAInD,MAAM,iBAAiB;AACvB,SAAO,iBAAiB,UAAU;AAElC,eAAa;AACX,MAAG;AACH,UAAO,oBAAoB,UAAU;;IAEtC;EAAC;EAAY;EAAS;EAAgB;EAAmB;EAAU;;AAEtE,QACE,qBAAC;EAAI,KAAK;EAAa,WAAU;aAE9B,YAGD,oBAAC;GAAI,KAAK;GAAgB,WAAU;aAClC,qBAAC;IAAI,KAAK;IAAU,WAAU;;KAC3B,WACC,qBAAC;MAAI,WAAU;iBACb,qBAAC;OAAI,WAAU;;QACb,oBAAC;SAAI,WAAU;mBAAoB;;QAClC,eAAe,OAAO,SAAS,KAC9B,oBAAC;SAAI,WAAU;mBAAuB;;QAEvC,qBAAqB,OAAO,SAAS,KACpC,oBAAC;SAAI,WAAU;mBAA0B;;;UAG7C,oBAAC;OAAI,cAAW;OAAU,WAAU;;;KAIvC,kBAAkB,oBAAC;MAAI,WAAU;gBAA2B;;KAE5D,qBAAqB,oBAAC;MAAI,WAAU;gBAA8B;;KAElE,CAAC,WAAW,CAAC,kBAAkB,CAAC,qBAC/B,oBAAC;MAAI,~~WAAU~~;~~MAAmB~~"}
1	+ {"version":3,"file":"ContentSwitcher.js","names":["ContentSwitcher: React.FC<ContentSwitcherProps>"],"sources":["../../../../../../src/react/components/PasskeyAuthMenu/ui/ContentSwitcher.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface ContentSwitcherProps {\n waiting: boolean;\n waitingText?: string;\n waitingSubtext?: string;\n waitingSDKEventsText?: string;\n showScanDevice?: boolean;\n showQRCodeElement?: React.ReactNode;\n showEmailRecovery?: boolean;\n emailRecoveryElement?: React.ReactNode;\n children: React.ReactNode;\n backButton?: React.ReactNode;\n}\n\nexport const ContentSwitcher: React.FC<ContentSwitcherProps> = ({\n waiting,\n waitingText = 'Waiting for Passkey…',\n waitingSubtext = '',\n waitingSDKEventsText = '',\n showScanDevice = false,\n showQRCodeElement,\n showEmailRecovery = false,\n emailRecoveryElement,\n children,\n backButton,\n}) => {\n // Animate height of the switcher as content changes\n const switcherRef = React.useRef<HTMLDivElement \| null>(null);\n const contentAreaRef = React.useRef<HTMLDivElement \| null>(null);\n const sizerRef = React.useRef<HTMLDivElement \| null>(null);\n const isInitialMount = React.useRef(true);\n\n React.useEffect(() => {\n isInitialMount.current = false;\n }, []);\n\n // Track whether user prefers reduced motion\n const prefersReducedMotion = React.useMemo(() => {\n if (typeof window === 'undefined' \|\| !('matchMedia' in window)) return false;\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n }, []);\n\n // Helper to read current content height and apply to the switcher\n const syncHeight = React.useCallback(() => {\n const wrap = switcherRef.current;\n const sizer = sizerRef.current;\n if (!wrap \|\| !sizer) return;\n // Use scrollHeight to capture intrinsic content size regardless of flex context\n const next = sizer.scrollHeight;\n if (prefersReducedMotion) {\n // Apply without animation\n wrap.style.transition = 'none';\n wrap.style.height = `${next}px`;\n // Force reflow then restore transition so future changes can animate\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n wrap.offsetHeight;\n wrap.style.transition = '';\n return;\n }\n // Normal path: let CSS transition handle the interpolation\n wrap.style.height = `${next}px`;\n }, [prefersReducedMotion]);\n\n // Observe size changes of the content area\n React.useLayoutEffect(() => {\n const area = contentAreaRef.current;\n const sizer = sizerRef.current;\n if (!area \|\| !sizer) return;\n\n // Initial sync after mount/update\n syncHeight();\n\n // ResizeObserver to capture dynamic content changes (e.g., QR render)\n const ro = new ResizeObserver(() => {\n // Use rAF to coalesce layout reads/writes with rendering\n requestAnimationFrame(syncHeight);\n });\n ro.observe(sizer);\n\n // Re-sync after fonts load (text metrics can change)\n const fonts = document?.fonts;\n if (fonts?.ready) {\n fonts.ready.then(() => syncHeight()).catch(() => { });\n }\n\n // Also re-sync on window resize\n const onResize = () => syncHeight();\n window.addEventListener('resize', onResize);\n\n return () => {\n ro.disconnect();\n window.removeEventListener('resize', onResize);\n };\n }, [syncHeight, waiting, showScanDevice, showEmailRecovery, children, emailRecoveryElement]);\n\n return (\n <div ref={switcherRef} className=\"w3a-content-switcher\">\n {/* Back button - absolutely positioned overlay /}\n {backButton}\n\n {/ Content areas - conditionally rendered with smooth transitions */}\n <div ref={contentAreaRef} className=\"w3a-content-area\">\n <div ref={sizerRef} className=\"w3a-content-sizer\">\n {waiting && (\n <div className=\"w3a-waiting\">\n <div className=\"w3a-waiting-message\">\n <div className=\"w3a-waiting-text\">{waitingText}</div>\n {waitingSubtext.trim().length > 0 && (\n <div className=\"w3a-waiting-subtext\">{waitingSubtext}</div>\n )}\n {waitingSDKEventsText.trim().length > 0 && (\n <div className=\"w3a-waiting-sdk-events\">{waitingSDKEventsText}</div>\n )}\n </div>\n <div aria-label=\"Loading\" className=\"w3a-spinner\" />\n </div>\n )}\n\n {showScanDevice && <div className=\"w3a-scan-device-content\">{showQRCodeElement}</div>}\n\n {showEmailRecovery && <div className=\"w3a-email-recovery-content\">{emailRecoveryElement}</div>}\n\n {!waiting && !showScanDevice && !showEmailRecovery && (\n <div className={`w3a-signin-menu${isInitialMount.current ? ' w3a-no-animation' : ''}`}>\n {children}\n </div>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default ContentSwitcher;\n"],"mappings":";;;;AAeA,MAAaA,mBAAmD,EAC9D,SACA,cAAc,wBACd,iBAAiB,IACjB,uBAAuB,IACvB,iBAAiB,OACjB,mBACA,oBAAoB,OACpB,sBACA,UACA,iBACI;CAEJ,MAAM,cAAc,MAAM,OAA8B;CACxD,MAAM,iBAAiB,MAAM,OAA8B;CAC3D,MAAM,WAAW,MAAM,OAA8B;CACrD,MAAM,iBAAiB,MAAM,OAAO;AAEpC,OAAM,gBAAgB;AACpB,iBAAe,UAAU;IACxB;CAGH,MAAM,uBAAuB,MAAM,cAAc;AAC/C,MAAI,OAAO,WAAW,eAAe,EAAE,gBAAgB,QAAS,QAAO;AACvE,SAAO,OAAO,WAAW,oCAAoC;IAC5D;CAGH,MAAM,aAAa,MAAM,kBAAkB;EACzC,MAAM,OAAO,YAAY;EACzB,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,QAAQ,CAAC,MAAO;EAErB,MAAM,OAAO,MAAM;AACnB,MAAI,sBAAsB;AAExB,QAAK,MAAM,aAAa;AACxB,QAAK,MAAM,SAAS,GAAG,KAAK;AAG5B,QAAK;AACL,QAAK,MAAM,aAAa;AACxB;;AAGF,OAAK,MAAM,SAAS,GAAG,KAAK;IAC3B,CAAC;AAGJ,OAAM,sBAAsB;EAC1B,MAAM,OAAO,eAAe;EAC5B,MAAM,QAAQ,SAAS;AACvB,MAAI,CAAC,QAAQ,CAAC,MAAO;AAGrB;EAGA,MAAM,KAAK,IAAI,qBAAqB;AAElC,yBAAsB;;AAExB,KAAG,QAAQ;EAGX,MAAM,QAAQ,UAAU;AACxB,MAAI,OAAO,MACT,OAAM,MAAM,WAAW,cAAc,YAAY;EAInD,MAAM,iBAAiB;AACvB,SAAO,iBAAiB,UAAU;AAElC,eAAa;AACX,MAAG;AACH,UAAO,oBAAoB,UAAU;;IAEtC;EAAC;EAAY;EAAS;EAAgB;EAAmB;EAAU;;AAEtE,QACE,qBAAC;EAAI,KAAK;EAAa,WAAU;aAE9B,YAGD,oBAAC;GAAI,KAAK;GAAgB,WAAU;aAClC,qBAAC;IAAI,KAAK;IAAU,WAAU;;KAC3B,WACC,qBAAC;MAAI,WAAU;iBACb,qBAAC;OAAI,WAAU;;QACb,oBAAC;SAAI,WAAU;mBAAoB;;QAClC,eAAe,OAAO,SAAS,KAC9B,oBAAC;SAAI,WAAU;mBAAuB;;QAEvC,qBAAqB,OAAO,SAAS,KACpC,oBAAC;SAAI,WAAU;mBAA0B;;;UAG7C,oBAAC;OAAI,cAAW;OAAU,WAAU;;;KAIvC,kBAAkB,oBAAC;MAAI,WAAU;gBAA2B;;KAE5D,qBAAqB,oBAAC;MAAI,WAAU;gBAA8B;;KAElE,CAAC,WAAW,CAAC,kBAAkB,CAAC,qBAC/B,oBAAC;MAAI,WAAW,kBAAkB,eAAe,UAAU,sBAAsB;MAC9E"}

package/dist/esm/react/index.js CHANGED Viewed

@@ -19,11 +19,11 @@ import { PROFILE_MENU_ITEM_IDS } from "./components/AccountMenuButton/types.js";
 import { QRCodeScanner } from "./components/QRCodeScanner.js";
 import { AccountMenuButton, ProfileSettingsButton } from "./components/AccountMenuButton/index.js";
 import { ShowQRCode } from "./components/ShowQRCode2.js";
+import QRCodeIcon_default from "./components/QRCodeIcon.js";
+import { AuthMenuMode, AuthMenuModeMap } from "./components/PasskeyAuthMenu/authMenuTypes.js";
 import { PasskeyAuthMenuSkeleton, PasskeyAuthMenuSkeletonInner } from "./components/PasskeyAuthMenu/skeleton.js";
 import { preloadPasskeyAuthMenu } from "./components/PasskeyAuthMenu/preload.js";
 import { PasskeyAuthMenu } from "./components/PasskeyAuthMenu/shell.js";
-import { AuthMenuMode, AuthMenuModeMap } from "./components/PasskeyAuthMenu/authMenuTypes.js";
-import QRCodeIcon_default from "./components/QRCodeIcon.js";
 import { PasskeyAuthMenuClient } from "./components/PasskeyAuthMenu/client.js";
 export { AccountMenuButton, ActionPhase, ActionStatus, ActionType, AuthMenuMode, AuthMenuModeMap, DARK_TOKENS, ActionPhase as DelegateActionPhase, DeviceLinkingPhase, DeviceLinkingStatus, EmailRecoveryPhase, EmailRecoveryStatus, LIGHT_TOKENS, LoginPhase, LoginStatus, MoonIcon_default as MoonIcon, PASSKEY_MANAGER_DEFAULT_CONFIGS, PROFILE_MENU_ITEM_IDS, PasskeyAuthMenu, PasskeyAuthMenuClient, PasskeyAuthMenuSkeleton, PasskeyAuthMenuSkeletonInner, ProfileSettingsButton, QRCodeIcon_default as QRCodeIcon, QRCodeScanner, QRScanMode, RegistrationPhase, RegistrationStatus, ShowQRCode, SunIcon_default as SunIcon, SyncAccountPhase, SyncAccountStatus, TatchiContextProvider, TatchiPasskey, TatchiPasskeyProvider, Theme, TouchIcon_default as TouchIcon, TxExecutionStatus, preloadPasskeyAuthMenu, useAccountInput, useDeviceLinking, useNearClient, usePostfixPosition, useQRCamera, useQRFileUpload, useTatchi, useTheme };