@stisocial/ui 0.2.0 → 0.3.0

package/dist/id/SignInMethods/SignInMethods.js

@@ -0,0 +1,80 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { Badge } from "../../components/Badge/Badge.js";
+import { ChevronRightIcon } from "../../icons/generated/ChevronRightIcon.js";
+import { MailIcon } from "../../icons/generated/MailIcon.js";
+import { FingerprintIcon } from "../../icons/generated/FingerprintIcon.js";
+import { GlobeIcon } from "../../icons/generated/GlobeIcon.js";
+import { KeyIcon } from "../../icons/generated/KeyIcon.js";
+import { SmartphoneIcon } from "../../icons/generated/SmartphoneIcon.js";
+import { ActionItem } from "../_internal/ActionItem/ActionItem.js";
+import SignInMethods_module_default from "./SignInMethods.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/id/SignInMethods/SignInMethods.tsx
+const KINDS = {
+	passkey: {
+		icon: /* @__PURE__ */ jsx(FingerprintIcon, {}),
+		label: "idMethodPasskey",
+		desc: "idMethodPasskeyDesc"
+	},
+	password: {
+		icon: /* @__PURE__ */ jsx(KeyIcon, {}),
+		label: "idMethodPassword",
+		desc: "idMethodPasswordDesc"
+	},
+	"email-code": {
+		icon: /* @__PURE__ */ jsx(MailIcon, {}),
+		label: "idMethodEmailCode",
+		desc: "idMethodEmailCodeDesc"
+	},
+	sso: {
+		icon: /* @__PURE__ */ jsx(GlobeIcon, {}),
+		label: "idMethodSso",
+		desc: "idMethodSsoDesc"
+	},
+	totp: {
+		icon: /* @__PURE__ */ jsx(SmartphoneIcon, {}),
+		label: "idMethodTotp",
+		desc: "idMethodTotpDesc"
+	}
+};
+/**
+* Oturum açma yöntemleri: her yöntem kenarlı bir satırdır (ikon, ad, açıklama, ok). Son kullanılan
+* yöntem rozetle işaretlenir. Satırlar sıradan düğme ya da bağlantıdır (Tab, Enter, Boşluk); özel
+* bir klavye kalıbı yoktur.
+*/
+function SignInMethods({ methods, label, className, id }) {
+	const t = useMessages();
+	return /* @__PURE__ */ jsx("ul", {
+		id,
+		className: [SignInMethods_module_default.root, className].filter(Boolean).join(" "),
+		"aria-label": label ?? t.idSignInMethods,
+		children: methods.map((m) => {
+			const kind = m.kind ? KINDS[m.kind] : void 0;
+			const name = m.label ?? (kind ? t[kind.label] : m.id);
+			const description = m.description ?? (kind ? t[kind.desc] : void 0);
+			return /* @__PURE__ */ jsx("li", {
+				className: SignInMethods_module_default.item,
+				children: /* @__PURE__ */ jsx(ActionItem, {
+					variant: "outlined",
+					label: name,
+					description,
+					icon: m.icon ?? kind?.icon,
+					href: m.href,
+					onPress: m.onPress,
+					isDisabled: m.isDisabled,
+					isPending: m.isPending,
+					trailing: /* @__PURE__ */ jsxs("span", {
+						className: SignInMethods_module_default.trailing,
+						children: [m.isLastUsed ? /* @__PURE__ */ jsx(Badge, {
+							tone: "accent",
+							size: "sm",
+							children: t.idSignInMethodsLastUsed
+						}) : null, /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" })]
+					})
+				})
+			}, m.id);
+		})
+	});
+}
+export { SignInMethods };

package/dist/id/SignInMethods/SignInMethods.module.js

@@ -0,0 +1,8 @@
+import './SignInMethods.css';
+// src/id/SignInMethods/SignInMethods.module.css
+var SignInMethods_module_default = {
+	"root": "sti-SignInMethods-root-2cba4",
+	"item": "sti-SignInMethods-item-35646",
+	"trailing": "sti-SignInMethods-trailing-6ae91"
+};
+export { SignInMethods_module_default as default };

package/dist/id/SignInMethods/index.d.ts

@@ -0,0 +1,2 @@
+import { SignInMethod, SignInMethodKind, SignInMethods, SignInMethodsProps } from "./SignInMethods.js";
+export { SignInMethod, SignInMethodKind, SignInMethods, SignInMethodsProps };

package/dist/id/TwoFactorSetup/TwoFactorSetup.css

@@ -0,0 +1,123 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-TwoFactorSetup-root-5c35d {
+    gap: var(--sti-space-5);
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 36rem;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-TwoFactorSetup-steps-8a526 {
+    gap: var(--sti-space-6);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-TwoFactorSetup-step-ee16f {
+    grid-template-columns: var(--sti-space-8) minmax(0, 1fr);
+    gap: var(--sti-space-3);
+    display: grid;
+    position: relative;
+  }
+
+  .sti-TwoFactorSetup-step-ee16f:not(:last-child):after {
+    inset-block: calc(var(--sti-space-8) + var(--sti-space-2))
+      calc(var(--sti-space-6) * -1 + var(--sti-space-2));
+    inline-size: var(--sti-border-width);
+    background: var(--sti-border);
+    content: "";
+    position: absolute;
+    inset-inline-start: calc(var(--sti-space-8) / 2);
+  }
+
+  .sti-TwoFactorSetup-number-4140e {
+    inline-size: var(--sti-space-8);
+    block-size: var(--sti-space-8);
+    border: var(--sti-border-width) solid var(--sti-fg-accent);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-TwoFactorSetup-stepBody-2a4fa {
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-TwoFactorSetup-stepTitle-00143 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+    padding-block-start: calc(var(--sti-space-1) + 1px);
+  }
+
+  .sti-TwoFactorSetup-text-c1505 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-TwoFactorSetup-qrRow-ac49d {
+    align-items: center;
+    gap: var(--sti-space-4);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-TwoFactorSetup-account-1fc4b {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-TwoFactorSetup-manual-3b996 {
+    max-inline-size: 30rem;
+  }
+
+  .sti-TwoFactorSetup-secretRow-53e51 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    margin-block-start: var(--sti-space-2);
+    display: flex;
+  }
+
+  .sti-TwoFactorSetup-secret-65cfd {
+    padding: var(--sti-space-2) var(--sti-space-3);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-subtle);
+    font-family: var(--sti-font-mono);
+    font-size: var(--sti-font-size-sm);
+    letter-spacing: .04em;
+    overflow-wrap: anywhere;
+    -webkit-user-select: all;
+    user-select: all;
+  }
+
+  .sti-TwoFactorSetup-actions-6a374 {
+    justify-content: flex-end;
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  @media (forced-colors: active) {
+    .sti-TwoFactorSetup-number-4140e {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/id/TwoFactorSetup/TwoFactorSetup.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+export interface TwoFactorSetupProps {
+  /** Kurulum adresi (`otpauth://totp/STI%20ID:ayse@…?secret=…&issuer=STI%20ID`). */
+  otpauthUri: string;
+  /** Elle girilecek gizli anahtar (Base32). */
+  secret: string;
+  /** Doğrulanan hesap ("ayse@ornek.com"): uygulamada görünecek ad. */
+  accountName?: string;
+  /**
+   * Kodu sunucuda doğrular. `true` başarı; `false` ya da hata metni başarısızlık. Reddedilen söz de
+   * başarısızlıktır.
+   */
+  onVerify: (code: string) => boolean | string | Promise<boolean | string>;
+  /** Doğrulama başarılı olunca "Devam edin" ile (ör. kurtarma kodlarına geçiş). */
+  onComplete?: () => void;
+  onCancel?: () => void;
+  /** Başarı ekranının ek içeriği. */
+  successContent?: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * İki adımlı doğrulama kurulumu (kimlik doğrulayıcı uygulaması): 1) QR kodu tarama ya da anahtarı
+ * elle girme, 2) uygulamadaki 6 haneli kodla doğrulama. Hata alanın altında yazılır, kod yeniden
+ * girilir; başarıda açık bir onay ve "Devam edin". Gizli anahtar varsayılan olarak kapalı bölümdedir.
+ */
+export declare function TwoFactorSetup({ otpauthUri, secret, accountName, onVerify, onComplete, onCancel, successContent, className, id }: TwoFactorSetupProps): import("react").JSX.Element;

package/dist/id/TwoFactorSetup/TwoFactorSetup.js

@@ -0,0 +1,162 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
+import { Alert } from "../../components/Alert/Alert.js";
+import { CopyButton } from "../../components/CopyButton/CopyButton.js";
+import { Disclosure } from "../../components/Disclosure/Disclosure.js";
+import { OtpField } from "../../components/OtpField/OtpField.js";
+import { QrCode } from "../../components/QrCode/QrCode.js";
+import TwoFactorSetup_module_default from "./TwoFactorSetup.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/id/TwoFactorSetup/TwoFactorSetup.tsx
+/** Base32 anahtarı dörtlü gruplara böler (elle girişte okunur; kopyada boşluksuz). */
+const groupSecret = (s) => s.replace(/\s+/g, "").replace(/(.{4})/g, "$1 ").trim();
+/**
+* İki adımlı doğrulama kurulumu (kimlik doğrulayıcı uygulaması): 1) QR kodu tarama ya da anahtarı
+* elle girme, 2) uygulamadaki 6 haneli kodla doğrulama. Hata alanın altında yazılır, kod yeniden
+* girilir; başarıda açık bir onay ve "Devam edin". Gizli anahtar varsayılan olarak kapalı bölümdedir.
+*/
+function TwoFactorSetup({ otpauthUri, secret, accountName, onVerify, onComplete, onCancel, successContent, className, id }) {
+	const t = useMessages();
+	const [code, setCode] = useState("");
+	const [pending, setPending] = useState(false);
+	const [error, setError] = useState(null);
+	const [done, setDone] = useState(false);
+	const verify = async (value) => {
+		if (pending || value.length !== 6) return;
+		setPending(true);
+		setError(null);
+		try {
+			const result = await onVerify(value);
+			if (result === true) setDone(true);
+			else {
+				setError(typeof result === "string" && result ? result : t.idTwoFactorWrongCode);
+				setCode("");
+			}
+		} catch {
+			setError(t.idTwoFactorWrongCode);
+			setCode("");
+		} finally {
+			setPending(false);
+		}
+	};
+	if (done) return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: [TwoFactorSetup_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx(Alert, {
+				tone: "success",
+				title: t.idTwoFactorEnabled,
+				children: t.idTwoFactorEnabledBody
+			}),
+			successContent,
+			onComplete ? /* @__PURE__ */ jsx("div", {
+				className: TwoFactorSetup_module_default.actions,
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					onPress: onComplete,
+					children: t.idTwoFactorContinue
+				})
+			}) : null
+		]
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: [TwoFactorSetup_module_default.root, className].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ jsxs("ol", {
+			className: TwoFactorSetup_module_default.steps,
+			children: [/* @__PURE__ */ jsxs("li", {
+				className: TwoFactorSetup_module_default.step,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: TwoFactorSetup_module_default.number,
+					"aria-hidden": "true",
+					children: "1"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: TwoFactorSetup_module_default.stepBody,
+					children: [
+						/* @__PURE__ */ jsx("h3", {
+							className: TwoFactorSetup_module_default.stepTitle,
+							children: t.idTwoFactorScanTitle
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: TwoFactorSetup_module_default.text,
+							children: t.idTwoFactorScanBody
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: TwoFactorSetup_module_default.qrRow,
+							children: [/* @__PURE__ */ jsx(QrCode, {
+								value: otpauthUri,
+								label: t.idTwoFactorQrLabel,
+								size: "md"
+							}), accountName ? /* @__PURE__ */ jsx("p", {
+								className: TwoFactorSetup_module_default.account,
+								children: template(t.idTwoFactorAccount, { account: accountName })
+							}) : null]
+						}),
+						/* @__PURE__ */ jsxs(Disclosure, {
+							title: t.idTwoFactorCantScan,
+							size: "sm",
+							className: TwoFactorSetup_module_default.manual,
+							children: [/* @__PURE__ */ jsx("p", {
+								className: TwoFactorSetup_module_default.text,
+								children: t.idTwoFactorManualBody
+							}), /* @__PURE__ */ jsxs("div", {
+								className: TwoFactorSetup_module_default.secretRow,
+								children: [/* @__PURE__ */ jsx("code", {
+									className: TwoFactorSetup_module_default.secret,
+									children: groupSecret(secret)
+								}), /* @__PURE__ */ jsx(CopyButton, {
+									value: secret.replace(/\s+/g, ""),
+									label: t.idTwoFactorCopySecret
+								})]
+							})]
+						})
+					]
+				})]
+			}), /* @__PURE__ */ jsxs("li", {
+				className: TwoFactorSetup_module_default.step,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: TwoFactorSetup_module_default.number,
+					"aria-hidden": "true",
+					children: "2"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: TwoFactorSetup_module_default.stepBody,
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: TwoFactorSetup_module_default.stepTitle,
+						children: t.idTwoFactorCodeTitle
+					}), /* @__PURE__ */ jsx(OtpField, {
+						label: t.idTwoFactorCodeLabel,
+						description: t.idTwoFactorCodeHint,
+						length: 6,
+						value: code,
+						onChange: (v) => {
+							setCode(v);
+							setError(null);
+						},
+						onComplete: verify,
+						isInvalid: error !== null,
+						errorMessage: error ?? void 0,
+						isDisabled: pending
+					})]
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: TwoFactorSetup_module_default.actions,
+			children: [onCancel ? /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				onPress: onCancel,
+				isDisabled: pending,
+				children: t.idReauthCancel
+			}) : null, /* @__PURE__ */ jsx(Button, {
+				variant: "primary",
+				isPending: pending,
+				isDisabled: code.length !== 6,
+				onPress: () => verify(code),
+				children: t.idTwoFactorVerify
+			})]
+		})]
+	});
+}
+export { TwoFactorSetup };

package/dist/id/TwoFactorSetup/TwoFactorSetup.module.js

@@ -0,0 +1,18 @@
+import './TwoFactorSetup.css';
+// src/id/TwoFactorSetup/TwoFactorSetup.module.css
+var TwoFactorSetup_module_default = {
+	"root": "sti-TwoFactorSetup-root-5c35d",
+	"steps": "sti-TwoFactorSetup-steps-8a526",
+	"step": "sti-TwoFactorSetup-step-ee16f",
+	"number": "sti-TwoFactorSetup-number-4140e",
+	"stepBody": "sti-TwoFactorSetup-stepBody-2a4fa",
+	"stepTitle": "sti-TwoFactorSetup-stepTitle-00143",
+	"text": "sti-TwoFactorSetup-text-c1505",
+	"qrRow": "sti-TwoFactorSetup-qrRow-ac49d",
+	"account": "sti-TwoFactorSetup-account-1fc4b",
+	"manual": "sti-TwoFactorSetup-manual-3b996",
+	"secretRow": "sti-TwoFactorSetup-secretRow-53e51",
+	"secret": "sti-TwoFactorSetup-secret-65cfd",
+	"actions": "sti-TwoFactorSetup-actions-6a374"
+};
+export { TwoFactorSetup_module_default as default };

package/dist/id/TwoFactorSetup/index.d.ts

@@ -0,0 +1,2 @@
+import { TwoFactorSetup, TwoFactorSetupProps } from "./TwoFactorSetup.js";
+export { TwoFactorSetup, TwoFactorSetupProps };

package/dist/id/VerifyEmailBanner/VerifyEmailBanner.css

@@ -0,0 +1,14 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-VerifyEmailBanner-root-e4ebc {
+    min-inline-size: 0;
+  }
+
+  .sti-VerifyEmailBanner-status-d6666 {
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-VerifyEmailBanner-status-d6666[data-phase="failed"] {
+    color: var(--sti-fg-danger-strong);
+  }
+}

package/dist/id/VerifyEmailBanner/VerifyEmailBanner.d.ts

@@ -0,0 +1,22 @@
+export interface VerifyEmailBannerProps {
+  /** Doğrulanmamış e-posta adresi. */
+  email: string;
+  /**
+   * Doğrulama bağlantısını yeniden gönderir. Reddedilen söz başarısızlık sayılır ve hata metni
+   * gösterilir. Başarıdan sonra düğme `cooldownSeconds` boyunca bekler (kötüye kullanımı önler;
+   * asıl sınır sunucudadır).
+   */
+  onResend: () => void | Promise<void>;
+  /** Yeniden gönderme için bekleme süresi (saniye). Varsayılan 60. */
+  cooldownSeconds?: number;
+  /** Kapatma düğmesi; kapatma kalıcı değildir, uygulama doğrulanana dek yeniden gösterir. */
+  onDismiss?: () => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * E-posta doğrulama şeridi: adresin doğrulanmadığını söyler ve bağlantıyı yeniden göndermeyi sunar.
+ * Gönderim sonucu (gönderildi ya da gönderilemedi) ekran okuyucuya duyurulur; başarıdan sonra
+ * düğme geri sayımla beklemeye geçer.
+ */
+export declare function VerifyEmailBanner({ email, onResend, cooldownSeconds, onDismiss, className, id }: VerifyEmailBannerProps): import("react").JSX.Element;

package/dist/id/VerifyEmailBanner/VerifyEmailBanner.js

@@ -0,0 +1,68 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
+import { Banner } from "../../components/Banner/Banner.js";
+import VerifyEmailBanner_module_default from "./VerifyEmailBanner.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+// src/id/VerifyEmailBanner/VerifyEmailBanner.tsx
+/**
+* E-posta doğrulama şeridi: adresin doğrulanmadığını söyler ve bağlantıyı yeniden göndermeyi sunar.
+* Gönderim sonucu (gönderildi ya da gönderilemedi) ekran okuyucuya duyurulur; başarıdan sonra
+* düğme geri sayımla beklemeye geçer.
+*/
+function VerifyEmailBanner({ email, onResend, cooldownSeconds = 60, onDismiss, className, id }) {
+	const t = useMessages();
+	const [phase, setPhase] = useState("idle");
+	const [remaining, setRemaining] = useState(0);
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	useEffect(() => {
+		if (remaining <= 0) return;
+		const timer = setTimeout(() => setRemaining((n) => n - 1), 1e3);
+		return () => clearTimeout(timer);
+	}, [remaining]);
+	const resend = async () => {
+		if (phase === "pending" || remaining > 0) return;
+		setPhase("pending");
+		try {
+			await onResend();
+			if (!mounted.current) return;
+			setPhase("sent");
+			setRemaining(cooldownSeconds);
+		} catch {
+			if (mounted.current) setPhase("failed");
+		}
+	};
+	const waiting = remaining > 0;
+	const status = phase === "sent" ? template(t.idVerifyEmailSent, { email }) : phase === "failed" ? t.idVerifyEmailFailed : "";
+	return /* @__PURE__ */ jsxs(Banner, {
+		id,
+		className: [VerifyEmailBanner_module_default.root, className].filter(Boolean).join(" "),
+		tone: "warning",
+		title: t.idVerifyEmailTitle,
+		dismissible: onDismiss !== void 0,
+		onDismiss,
+		action: /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "secondary",
+			isPending: phase === "pending",
+			isDisabled: waiting,
+			onPress: resend,
+			children: waiting ? template(t.idVerifyEmailWait, { seconds: remaining }) : t.idVerifyEmailResend
+		}),
+		children: [template(t.idVerifyEmailBody, { email }), /* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: VerifyEmailBanner_module_default.status,
+			"data-phase": phase,
+			children: status ? ` ${status}` : ""
+		})]
+	});
+}
+export { VerifyEmailBanner };

package/dist/id/VerifyEmailBanner/VerifyEmailBanner.module.js

@@ -0,0 +1,7 @@
+import './VerifyEmailBanner.css';
+// src/id/VerifyEmailBanner/VerifyEmailBanner.module.css
+var VerifyEmailBanner_module_default = {
+	"root": "sti-VerifyEmailBanner-root-e4ebc",
+	"status": "sti-VerifyEmailBanner-status-d6666"
+};
+export { VerifyEmailBanner_module_default as default };