@declarion/react 0.60.0 → 0.63.0

package/dist-lib/AuthShell-DdiughRT.js

@@ -0,0 +1,361 @@
+import { wt as e, xt as t } from "./useCurrentScreen--UovgvRj.js";
+import { t as n } from "./Icons-lt-7lhYR.js";
+import { n as r } from "./CopyButton-C0iEvaT1.js";
+import { z as i } from "./PropertyGridEditor-BTjscqfz.js";
+import { o as a, t as o } from "./useBranding-Ckp_AuJb.js";
+import { a as s } from "./useParams-ei6w4I7w.js";
+import { t as c } from "./page-inset-D_kkVwwN.js";
+import { useEffect as l, useMemo as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/primitives/BrandLogo.tsx
+function m({ appLogo: e, size: t, radius: n, fallback: r }) {
+	if (!a(e)) return r ? /* @__PURE__ */ f(d, { children: r }) : null;
+	let i = n ?? (t >= 30 ? 8 : 6);
+	return /* @__PURE__ */ f("img", {
+		src: e.trim(),
+		alt: "",
+		width: t,
+		height: t,
+		style: {
+			display: "block",
+			borderRadius: i,
+			objectFit: "contain"
+		}
+	});
+}
+//#endregion
+//#region src/components/pages/auth/AuthShell.tsx
+var h = 560;
+function g(e) {
+	try {
+		return new URL(e).host;
+	} catch {
+		return e;
+	}
+}
+function _(e, t) {
+	if (!e) return "";
+	let n = t ? t.slice(0, 7) : "";
+	if (!n || !t) return e;
+	let r = Math.min(e.length, t.length);
+	return e.slice(0, r) === t.slice(0, r) ? e : `${e}+${n}`;
+}
+function v({ children: a, tenantSlug: v, tagline: y, subTagline: b, version: x, badges: S, brandName: C }) {
+	let w = e(), T = i((e) => e.colorScheme), E = t(), D = i((e) => e.set), O = i((e) => e.hydrateFromBranding), k = () => D("colorScheme", T === "dark" ? "light" : "dark"), { branding: A } = o();
+	l(() => {
+		O(A?.preferences);
+	}, [A, O]);
+	let j = A?.identity, M = C ?? j?.wordmark ?? j?.app_name ?? "", N = y ?? w(j?.auth_tagline), P = b ?? w(j?.auth_subtagline), F = x ?? j?.version_label ?? "", I = u(() => S && S.length ? S : (j?.auth_badges ?? []).map((e) => w(e)).filter(Boolean).slice(0, 8).map((e) => [e, "shield"]), [
+		S,
+		j?.auth_badges,
+		w
+	]), L = j?.workspace_domain ?? "", R = !!(v && L), z = j?.status_url ?? "", B = !!z, V = j?.legal_links, H = u(() => [
+		[w("auth.footer.security", "Security"), V?.security_url ?? ""],
+		[w("auth.footer.privacy", "Privacy"), V?.privacy_url ?? ""],
+		[w("auth.footer.terms", "Terms"), V?.terms_url ?? ""],
+		[w("auth.footer.docs", "Docs"), V?.docs_url ?? ""]
+	].filter(([, e]) => !!e), [
+		V?.security_url,
+		V?.privacy_url,
+		V?.terms_url,
+		V?.docs_url,
+		w
+	]), U = j?.legal_entity ?? "", W = `© ${(/* @__PURE__ */ new Date()).getFullYear()}${U ? ` ${U}` : ""}`, { data: G } = s(), K = G?.meta, q = _(K?.version, K?.revision), J = [K?.region ? w("auth.meta.region", "Region: {value}", { value: K.region }) : "", q ? w("auth.meta.build", "Build {value}", { value: q }) : ""].filter(Boolean).join(" · "), Y = E.isPhone || E.height < h;
+	return /* @__PURE__ */ p("div", {
+		style: {
+			minHeight: "var(--app-height)",
+			background: "var(--background)",
+			display: "flex",
+			flexDirection: "column",
+			minWidth: 0,
+			overflowX: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ p("div", {
+				style: {
+					paddingTop: Y ? 12 : 16,
+					paddingBottom: Y ? 12 : 16,
+					...Y ? c(14) : {
+						paddingLeft: 20,
+						paddingRight: 20
+					},
+					display: "flex",
+					alignItems: "center",
+					gap: 10
+				},
+				children: [
+					/* @__PURE__ */ f(m, {
+						appLogo: j?.app_logo,
+						size: 26
+					}),
+					M && /* @__PURE__ */ f("span", {
+						style: {
+							fontSize: 14,
+							fontWeight: 600,
+							letterSpacing: "-0.01em",
+							minWidth: 0,
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: M
+					}),
+					R && /* @__PURE__ */ p("span", {
+						className: "mono",
+						style: {
+							marginLeft: 6,
+							fontSize: 10.5,
+							color: "var(--text-4)",
+							padding: "2px 6px",
+							background: "var(--surface-2)",
+							border: "1px solid var(--border)",
+							borderRadius: 4
+						},
+						children: [
+							v,
+							".",
+							L
+						]
+					}),
+					/* @__PURE__ */ f("div", { style: { flex: 1 } }),
+					/* @__PURE__ */ f(r, {
+						icon: f(T === "dark" ? n.sun : n.moon, { size: 14 }),
+						onClick: k,
+						title: w("auth.toggle_theme", "Toggle theme")
+					})
+				]
+			}),
+			/* @__PURE__ */ f("div", {
+				style: {
+					flex: 1,
+					display: "flex",
+					alignItems: Y ? "flex-start" : "center",
+					justifyContent: "center",
+					paddingTop: Y ? 16 : 20,
+					paddingBottom: Y ? 12 : 20,
+					...Y ? c(12) : {
+						paddingLeft: 20,
+						paddingRight: 20
+					},
+					minWidth: 0
+				},
+				children: /* @__PURE__ */ p("div", {
+					style: {
+						display: "grid",
+						gridTemplateColumns: Y ? "minmax(0, 1fr)" : "1fr 1fr",
+						gap: 0,
+						width: Y ? "100%" : 980,
+						maxWidth: "100%",
+						minHeight: Y ? "auto" : h,
+						background: "var(--surface)",
+						border: "1px solid var(--border)",
+						borderRadius: Y ? 12 : 14,
+						overflow: "hidden",
+						boxShadow: Y ? "var(--shadow-sm)" : "var(--shadow-lg)"
+					},
+					children: [!Y && /* @__PURE__ */ p("div", {
+						"data-testid": "auth-brand-panel",
+						style: {
+							padding: "36px 36px 28px",
+							background: "linear-gradient(155deg, var(--auth-panel-bg-start) 0%, var(--auth-panel-bg-mid) 40%, var(--auth-panel-bg-end) 100%)",
+							color: "var(--auth-panel-fg)",
+							display: "flex",
+							flexDirection: "column",
+							position: "relative",
+							overflow: "hidden"
+						},
+						children: [
+							/* @__PURE__ */ f("div", { style: {
+								position: "absolute",
+								top: -80,
+								right: -80,
+								width: 280,
+								height: 280,
+								borderRadius: "50%",
+								background: "radial-gradient(circle, var(--auth-panel-glow-1) 0%, transparent 70%)"
+							} }),
+							/* @__PURE__ */ f("div", { style: {
+								position: "absolute",
+								bottom: -60,
+								left: -40,
+								width: 220,
+								height: 220,
+								borderRadius: "50%",
+								background: "radial-gradient(circle, var(--auth-panel-glow-2) 0%, transparent 70%)"
+							} }),
+							/* @__PURE__ */ p("div", {
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 8,
+									position: "relative"
+								},
+								children: [
+									/* @__PURE__ */ f(m, {
+										appLogo: j?.app_logo,
+										size: 34
+									}),
+									M && /* @__PURE__ */ f("span", {
+										style: {
+											fontSize: 18,
+											fontWeight: 600,
+											letterSpacing: "-0.012em"
+										},
+										children: M
+									}),
+									F && /* @__PURE__ */ f("span", {
+										className: "mono",
+										style: {
+											fontSize: 10,
+											padding: "2px 6px",
+											border: "1px solid var(--auth-panel-border-faint)",
+											borderRadius: 4,
+											color: "var(--auth-panel-fg-muted)"
+										},
+										children: F
+									})
+								]
+							}),
+							(j?.app_logo || M) && /* @__PURE__ */ p("div", {
+								style: {
+									marginTop: 48,
+									position: "relative",
+									display: "flex",
+									flexDirection: "column",
+									alignItems: "center",
+									gap: 16
+								},
+								children: [j?.app_logo && /* @__PURE__ */ f(m, {
+									appLogo: j.app_logo,
+									size: 96,
+									radius: 0
+								}), M && /* @__PURE__ */ f("span", {
+									style: {
+										fontSize: 28,
+										fontWeight: 600,
+										letterSpacing: "-0.018em",
+										color: "var(--auth-panel-fg)"
+									},
+									children: M
+								})]
+							}),
+							/* @__PURE__ */ p("div", {
+								style: {
+									marginTop: "auto",
+									position: "relative"
+								},
+								children: [
+									N && /* @__PURE__ */ f("h1", {
+										style: {
+											margin: 0,
+											fontSize: 26,
+											fontWeight: 600,
+											letterSpacing: "-0.022em",
+											lineHeight: 1.2
+										},
+										children: N
+									}),
+									P && /* @__PURE__ */ f("p", {
+										style: {
+											margin: "10px 0 0",
+											fontSize: 13,
+											color: "var(--auth-panel-fg-muted)",
+											lineHeight: 1.65
+										},
+										children: P
+									}),
+									I.length > 0 && /* @__PURE__ */ f("div", {
+										style: {
+											marginTop: 22,
+											display: "grid",
+											gridTemplateColumns: "1fr 1fr",
+											gap: 10,
+											fontSize: 11.5,
+											color: "var(--auth-panel-fg-dim)"
+										},
+										children: I.map(([e, t]) => {
+											let r = n[t];
+											return /* @__PURE__ */ p("div", {
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: 6
+												},
+												children: [r && /* @__PURE__ */ f(r, {
+													size: 12,
+													style: { color: "var(--accent-hover)" }
+												}), /* @__PURE__ */ f("span", { children: e })]
+											}, e);
+										})
+									}),
+									B && /* @__PURE__ */ f("a", {
+										href: z,
+										target: "_blank",
+										rel: "noopener noreferrer",
+										className: "mono",
+										style: {
+											marginTop: 20,
+											padding: "10px 12px",
+											background: "var(--auth-panel-surface-soft)",
+											border: "1px solid var(--auth-panel-border-soft)",
+											borderRadius: 8,
+											display: "flex",
+											alignItems: "center",
+											gap: 8,
+											fontSize: 11.5,
+											color: "var(--auth-panel-fg-muted)",
+											textDecoration: "none"
+										},
+										children: g(z)
+									})
+								]
+							})
+						]
+					}), /* @__PURE__ */ f("div", {
+						"data-testid": "auth-form-panel",
+						style: {
+							padding: Y ? "28px 20px 24px" : "36px 40px",
+							display: "flex",
+							flexDirection: "column",
+							justifyContent: "center",
+							minWidth: 0
+						},
+						children: a
+					})]
+				})
+			}),
+			/* @__PURE__ */ p("div", {
+				style: {
+					padding: Y ? "12px 14px calc(12px + var(--safe-area-bottom))" : "14px 20px",
+					display: "flex",
+					alignItems: Y ? "flex-start" : "center",
+					flexDirection: Y ? "column" : "row",
+					gap: Y ? 6 : 16,
+					fontSize: 11,
+					color: "var(--text-4)",
+					minWidth: 0
+				},
+				children: [
+					/* @__PURE__ */ f("span", { children: W }),
+					H.map(([e, t]) => /* @__PURE__ */ f("a", {
+						href: t,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						style: { color: "inherit" },
+						children: e
+					}, e)),
+					J && /* @__PURE__ */ p(d, { children: [!Y && /* @__PURE__ */ f("div", { style: { flex: 1 } }), /* @__PURE__ */ f("span", {
+						className: "mono",
+						style: {
+							maxWidth: "100%",
+							overflowWrap: "anywhere"
+						},
+						children: J
+					})] })
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { m as n, v as t };

package/dist-lib/ChangePasswordDialog-DFe7lVQg.js

@@ -0,0 +1,12 @@
+import { Suspense as e, lazy as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/shared/ChangePasswordDialog.tsx
+var r = t(() => import("./ChangePasswordDialog.impl-DtSIaP-A.js").then((e) => ({ default: e.ChangePasswordDialog })));
+function i(t) {
+	return /* @__PURE__ */ n(e, {
+		fallback: null,
+		children: /* @__PURE__ */ n(r, { ...t })
+	});
+}
+//#endregion
+export { i as t };

package/dist-lib/ChangePasswordDialog.impl-DtSIaP-A.js

@@ -0,0 +1,194 @@
+import { Ft as e, Q as t, wt as n, xt as r } from "./useCurrentScreen--UovgvRj.js";
+import { t as i } from "./Icons-lt-7lhYR.js";
+import { n as a, r as o } from "./CopyButton-C0iEvaT1.js";
+import { Q as s, V as c, W as l } from "./PropertyGridEditor-BTjscqfz.js";
+import { useId as u, useState as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/shared/ChangePasswordDialog.impl.tsx
+var h = "auth.change_password", g = "auth.change_password@v1";
+function _({ open: _, onClose: v, onSubmit: y }) {
+	let b = n(), x = n("errors"), { data: S } = e(), C = b(S?.actions?.[h]?.display?.name) || h, w = r().isPhone, T = u(), [E, D] = d(""), [O, k] = d(""), [A, j] = d(""), [M, N] = d(!1), [P, F] = d(null);
+	if (!_) return null;
+	let I = () => {
+		D(""), k(""), j(""), F(null), N(!1);
+	}, L = () => {
+		I(), v();
+	}, R = E.length > 0 && O.length >= 8 && A === O;
+	return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+		onClick: L,
+		style: {
+			position: "fixed",
+			inset: 0,
+			background: "var(--scrim)",
+			zIndex: 60,
+			backdropFilter: "blur(2px)"
+		}
+	}), /* @__PURE__ */ m("div", {
+		"data-testid": "change-password-dialog",
+		style: {
+			position: "fixed",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			zIndex: 61,
+			width: w ? "calc(100vw - 24px)" : 460,
+			maxWidth: "calc(100vw - 24px)",
+			background: "var(--surface)",
+			borderRadius: 12,
+			boxShadow: "var(--shadow-lg)",
+			border: "1px solid var(--border)",
+			overflow: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ m("div", {
+				style: {
+					padding: "14px 18px 0",
+					display: "flex",
+					alignItems: "center",
+					gap: 10
+				},
+				children: [
+					/* @__PURE__ */ p("span", {
+						style: {
+							width: 28,
+							height: 28,
+							borderRadius: 7,
+							background: "var(--accent-soft)",
+							color: "var(--accent)",
+							display: "inline-flex",
+							alignItems: "center",
+							justifyContent: "center"
+						},
+						children: /* @__PURE__ */ p(i.key, { size: 15 })
+					}),
+					/* @__PURE__ */ m("div", {
+						style: { flex: 1 },
+						children: [/* @__PURE__ */ p("div", {
+							style: {
+								fontSize: 14,
+								fontWeight: 600,
+								color: "var(--text)"
+							},
+							children: C
+						}), /* @__PURE__ */ p("div", {
+							style: {
+								fontSize: 11.5,
+								color: "var(--text-3)"
+							},
+							children: b("account.password.subtitle", "Pick something strong. You'll stay signed in on this device.")
+						})]
+					}),
+					/* @__PURE__ */ p(a, {
+						icon: /* @__PURE__ */ p(i.x, { size: 14 }),
+						title: b("dialog.close", "Close"),
+						onClick: L
+					})
+				]
+			}),
+			/* @__PURE__ */ m("div", {
+				style: {
+					padding: "12px 18px 16px",
+					display: "flex",
+					flexDirection: "column",
+					gap: 12
+				},
+				children: [
+					/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p(c, {
+						required: !0,
+						htmlFor: `${T}-current`,
+						children: b("account.password.current", "Current password")
+					}), /* @__PURE__ */ p(l, {
+						id: `${T}-current`,
+						value: E,
+						onChange: D,
+						placeholder: b("account.password.current_placeholder", "Enter your current password")
+					})] }),
+					/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p(c, {
+						required: !0,
+						htmlFor: `${T}-new`,
+						children: b("account.password.new", "New password")
+					}), /* @__PURE__ */ p(l, {
+						id: `${T}-new`,
+						value: O,
+						onChange: k,
+						placeholder: b("account.password.new_placeholder", "At least 8 characters"),
+						showStrength: !0
+					})] }),
+					/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p(c, {
+						required: !0,
+						htmlFor: `${T}-confirm`,
+						children: b("account.password.confirm", "Confirm new password")
+					}), /* @__PURE__ */ p(l, {
+						id: `${T}-confirm`,
+						value: A,
+						onChange: j,
+						placeholder: b("account.password.confirm_placeholder", "Re-enter new password")
+					})] }),
+					P && /* @__PURE__ */ m("div", {
+						style: {
+							padding: "8px 10px",
+							background: "var(--danger-soft)",
+							borderRadius: 6,
+							fontSize: 11.5,
+							color: "var(--danger)",
+							display: "flex",
+							gap: 6
+						},
+						children: [/* @__PURE__ */ p(i.info, { size: 13 }), /* @__PURE__ */ p("span", { children: P })]
+					})
+				]
+			}),
+			/* @__PURE__ */ m("div", {
+				style: {
+					padding: "10px 16px",
+					borderTop: "1px solid var(--divider)",
+					display: "flex",
+					alignItems: "center",
+					gap: 8,
+					background: "var(--surface-2)",
+					flexWrap: w ? "wrap" : "nowrap"
+				},
+				children: [
+					/* @__PURE__ */ p("span", {
+						className: "mono",
+						style: {
+							fontSize: 10.5,
+							color: "var(--text-4)",
+							overflowWrap: "anywhere"
+						},
+						children: g
+					}),
+					/* @__PURE__ */ p("div", { style: { flex: 1 } }),
+					/* @__PURE__ */ p(o, {
+						onClick: L,
+						children: b("dialog.cancel", "Cancel")
+					}),
+					/* @__PURE__ */ p(o, {
+						kind: "primary",
+						icon: p(M ? s : i.key, { size: 13 }),
+						onClick: async () => {
+							if (!R) O.length < 8 ? F(b("account.password.too_short", "New password must be at least 8 characters.")) : F(A === O ? b("account.password.fill_all", "Fill in all fields.") : b("account.password.mismatch", "Passwords do not match."));
+							else {
+								F(null), N(!0);
+								try {
+									await y({
+										current: E,
+										next: O
+									}), I(), v();
+								} catch (e) {
+									F(t(x, e));
+								} finally {
+									N(!1);
+								}
+							}
+						},
+						disabled: !R || M,
+						children: M ? b("account.password.updating", "Updating…") : b("account.password.submit", "Update password")
+					})
+				]
+			})
+		]
+	})] });
+}
+//#endregion
+export { _ as ChangePasswordDialog };