@stisocial/ui 0.2.1 → 0.3.0

package/dist/id/SecurityCheckup/SecurityCheckup.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+export type SecurityCheckStatus = "ok" | "warning" | "danger";
+export interface SecurityCheckItem {
+  id: string;
+  title: ReactNode;
+  description?: ReactNode;
+  status: SecurityCheckStatus;
+  /** Öneriyi yerine getiren eylem ("Ekleyin", "Gözden geçirin"). */
+  action?: {
+    label: string;
+    href?: string;
+    onPress?: () => void;
+  };
+}
+export interface SecurityCheckupProps {
+  items: readonly SecurityCheckItem[];
+  /** Görünür başlık; verilmezse "Güvenlik denetimi". */
+  title?: ReactNode;
+  titleLevel?: 2 | 3;
+  className?: string;
+  id?: string;
+}
+/**
+ * Güvenlik denetimi (Google Hesap gibi): üstte genel durum (korunuyor, öneri var, risk), altında
+ * denetim maddeleri: durum ikonu ve metni, açıklama, gereken eylem. Önce risk, sonra öneriler,
+ * en son tamamlananlar sıralanır. Durum renkle birlikte ikon ve metinle bildirilir.
+ */
+export declare function SecurityCheckup({ items, title, titleLevel, className, id }: SecurityCheckupProps): import("react").JSX.Element;

package/dist/id/SecurityCheckup/SecurityCheckup.js

@@ -0,0 +1,107 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
+import { AlertCircleIcon } from "../../icons/generated/AlertCircleIcon.js";
+import { AlertTriangleIcon } from "../../icons/generated/AlertTriangleIcon.js";
+import { CheckCircleIcon } from "../../icons/generated/CheckCircleIcon.js";
+import { ShieldIcon } from "../../icons/generated/ShieldIcon.js";
+import { ShieldCheckIcon } from "../../icons/generated/ShieldCheckIcon.js";
+import SecurityCheckup_module_default from "./SecurityCheckup.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/id/SecurityCheckup/SecurityCheckup.tsx
+const ICON = {
+	ok: /* @__PURE__ */ jsx(CheckCircleIcon, {}),
+	warning: /* @__PURE__ */ jsx(AlertTriangleIcon, {}),
+	danger: /* @__PURE__ */ jsx(AlertCircleIcon, {})
+};
+/**
+* Güvenlik denetimi (Google Hesap gibi): üstte genel durum (korunuyor, öneri var, risk), altında
+* denetim maddeleri: durum ikonu ve metni, açıklama, gereken eylem. Önce risk, sonra öneriler,
+* en son tamamlananlar sıralanır. Durum renkle birlikte ikon ve metinle bildirilir.
+*/
+function SecurityCheckup({ items, title, titleLevel = 2, className, id }) {
+	const t = useMessages();
+	const H = `h${titleLevel}`;
+	const rank = {
+		danger: 0,
+		warning: 1,
+		ok: 2
+	};
+	const sorted = [...items].sort((a, b) => rank[a.status] - rank[b.status]);
+	const dangers = items.filter((i) => i.status === "danger").length;
+	const warnings = items.filter((i) => i.status === "warning").length;
+	const overall = dangers ? "danger" : warnings ? "warning" : "ok";
+	const headline = overall === "danger" ? t.idCheckupDanger : overall === "warning" ? template(t.idCheckupWarning, { count: warnings }) : t.idCheckupOk;
+	const statusText = {
+		ok: t.idCheckupItemOk,
+		warning: t.idCheckupItemWarning,
+		danger: t.idCheckupItemDanger
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: [SecurityCheckup_module_default.root, className].filter(Boolean).join(" "),
+		"aria-labelledby": id ? `${id}-title` : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: SecurityCheckup_module_default.summary,
+			"data-status": overall,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: SecurityCheckup_module_default.shield,
+				"aria-hidden": "true",
+				children: overall === "ok" ? /* @__PURE__ */ jsx(ShieldCheckIcon, {}) : /* @__PURE__ */ jsx(ShieldIcon, {})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: SecurityCheckup_module_default.summaryText,
+				children: [/* @__PURE__ */ jsx(H, {
+					id: id ? `${id}-title` : void 0,
+					className: SecurityCheckup_module_default.title,
+					children: title ?? t.idCheckupTitle
+				}), /* @__PURE__ */ jsx("p", {
+					className: SecurityCheckup_module_default.headline,
+					children: headline
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: SecurityCheckup_module_default.list,
+			children: sorted.map((item) => /* @__PURE__ */ jsxs("li", {
+				className: SecurityCheckup_module_default.item,
+				"data-status": item.status,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: SecurityCheckup_module_default.icon,
+						"aria-hidden": "true",
+						children: ICON[item.status]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: SecurityCheckup_module_default.body,
+						children: [/* @__PURE__ */ jsxs("p", {
+							className: SecurityCheckup_module_default.itemTitle,
+							children: [item.title, /* @__PURE__ */ jsx("span", {
+								className: SecurityCheckup_module_default.srOnly,
+								children: `, ${statusText[item.status]}`
+							})]
+						}), item.description ? /* @__PURE__ */ jsx("p", {
+							className: SecurityCheckup_module_default.description,
+							children: item.description
+						}) : null]
+					}),
+					item.action && item.status !== "ok" ? /* @__PURE__ */ jsx(Button, {
+						variant: item.status === "danger" ? "primary" : "secondary",
+						size: "sm",
+						href: item.action.href,
+						onPress: item.action.onPress,
+						className: SecurityCheckup_module_default.action,
+						children: item.action.label
+					}) : item.action ? /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						href: item.action.href,
+						onPress: item.action.onPress,
+						className: SecurityCheckup_module_default.action,
+						children: item.action.label
+					}) : null
+				]
+			}, item.id))
+		})]
+	});
+}
+export { SecurityCheckup };

package/dist/id/SecurityCheckup/SecurityCheckup.module.js

@@ -0,0 +1,19 @@
+import './SecurityCheckup.css';
+// src/id/SecurityCheckup/SecurityCheckup.module.css
+var SecurityCheckup_module_default = {
+	"root": "sti-SecurityCheckup-root-cef57",
+	"summary": "sti-SecurityCheckup-summary-1723b",
+	"shield": "sti-SecurityCheckup-shield-22517",
+	"summaryText": "sti-SecurityCheckup-summaryText-21a2b",
+	"title": "sti-SecurityCheckup-title-a1d08",
+	"headline": "sti-SecurityCheckup-headline-8ada1",
+	"list": "sti-SecurityCheckup-list-8833c",
+	"item": "sti-SecurityCheckup-item-4b62d",
+	"icon": "sti-SecurityCheckup-icon-6b8a9",
+	"body": "sti-SecurityCheckup-body-aac4d",
+	"itemTitle": "sti-SecurityCheckup-itemTitle-68b39",
+	"description": "sti-SecurityCheckup-description-3808a",
+	"action": "sti-SecurityCheckup-action-6bedd",
+	"srOnly": "sti-SecurityCheckup-srOnly-f77ac"
+};
+export { SecurityCheckup_module_default as default };

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

@@ -0,0 +1,2 @@
+import { SecurityCheckItem, SecurityCheckStatus, SecurityCheckup, SecurityCheckupProps } from "./SecurityCheckup.js";
+export { SecurityCheckItem, SecurityCheckStatus, SecurityCheckup, SecurityCheckupProps };

package/dist/id/SessionList/SessionList.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+export interface Session {
+  id: string;
+  /** Tarayıcı ve işletim sistemi ("Chrome · Windows 11"). */
+  device: string;
+  kind?: "desktop" | "laptop" | "mobile";
+  /** Yaklaşık konum ("İstanbul, Türkiye"). */
+  location?: string;
+  /** IP adresi; maskelenerek gösterilir. */
+  ip?: string;
+  /** Son etkinlik anı. */
+  lastActive: Date | string | number;
+  /** Bu oturum (şu an kullanılan cihaz). */
+  isCurrent?: boolean;
+}
+export interface SessionListProps {
+  sessions: readonly Session[];
+  /** Görünür başlık; verilmezse "Etkin oturumlar". */
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Oturumu kapatır (söz dönerse beklenir). Geçerli oturumda düğme çizilmez. */
+  onSignOut?: (id: string) => void | Promise<void>;
+  /** Bu cihaz dışındaki bütün oturumları kapatır. */
+  onSignOutOthers?: () => void | Promise<void>;
+  /** Göreli zamanın "şimdi"si (sınama ve sunucu çıktısı için). */
+  now?: Date | string | number;
+  /** IP adresini maskeler (varsayılan açık). */
+  maskIp?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Etkin oturumlar (Google Hesap "Cihazlarınız" gibi): cihaz, konum, maskeli IP ve son etkinlik;
+ * bu cihaz rozetle işaretli ve en üstte. Tek tek ya da bu cihaz dışındaki bütün oturumlar
+ * kapatılabilir; işlem sürerken düğme bekler. Tanımadığınız oturumu kapatmanız önerilir.
+ */
+export declare function SessionList({ sessions, title, description, onSignOut, onSignOutOthers, now, maskIp, className, id }: SessionListProps): import("react").JSX.Element;

package/dist/id/SessionList/SessionList.js

@@ -0,0 +1,81 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { Button } from "../../components/Button/Button.js";
+import { Badge } from "../../components/Badge/Badge.js";
+import { maskIpAddress } from "../../components/AuditLogList/AuditLogList.js";
+import { LaptopIcon } from "../../icons/generated/LaptopIcon.js";
+import { LogOutIcon } from "../../icons/generated/LogOutIcon.js";
+import { MonitorIcon } from "../../icons/generated/MonitorIcon.js";
+import { SmartphoneIcon } from "../../icons/generated/SmartphoneIcon.js";
+import { SecurityItem, SecurityList } from "../_internal/SecurityList/SecurityList.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/id/SessionList/SessionList.tsx
+const ICON = {
+	desktop: /* @__PURE__ */ jsx(MonitorIcon, {}),
+	laptop: /* @__PURE__ */ jsx(LaptopIcon, {}),
+	mobile: /* @__PURE__ */ jsx(SmartphoneIcon, {})
+};
+/**
+* Etkin oturumlar (Google Hesap "Cihazlarınız" gibi): cihaz, konum, maskeli IP ve son etkinlik;
+* bu cihaz rozetle işaretli ve en üstte. Tek tek ya da bu cihaz dışındaki bütün oturumlar
+* kapatılabilir; işlem sürerken düğme bekler. Tanımadığınız oturumu kapatmanız önerilir.
+*/
+function SessionList({ sessions, title, description, onSignOut, onSignOutOthers, now, maskIp = true, className, id }) {
+	const t = useMessages();
+	const fmt = useFormatter();
+	const [initialNow] = useState(() => Date.now());
+	const [pending, setPending] = useState(null);
+	const ordered = [...sessions].sort((a, b) => Number(Boolean(b.isCurrent)) - Number(Boolean(a.isCurrent)) || new Date(b.lastActive).getTime() - new Date(a.lastActive).getTime());
+	const others = sessions.filter((s) => !s.isCurrent).length;
+	const run = async (key, fn) => {
+		setPending(key);
+		try {
+			await fn();
+		} finally {
+			setPending(null);
+		}
+	};
+	return /* @__PURE__ */ jsx(SecurityList, {
+		id,
+		className,
+		label: t.idSessions,
+		title: title ?? t.idSessions,
+		description: description ?? t.idSessionsDescription,
+		isEmpty: sessions.length === 0,
+		empty: t.idSessionsEmpty,
+		footer: onSignOutOthers && others > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: template(t.idSessionsOthers, { count: others }) }), /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			size: "sm",
+			iconStart: /* @__PURE__ */ jsx(LogOutIcon, {}),
+			isPending: pending === "*",
+			isDisabled: pending !== null && pending !== "*",
+			onPress: () => run("*", onSignOutOthers),
+			children: t.idSessionsSignOutOthers
+		})] }) : null,
+		children: ordered.map((s) => /* @__PURE__ */ jsx(SecurityItem, {
+			icon: ICON[s.kind ?? "desktop"],
+			title: s.device,
+			badges: s.isCurrent ? /* @__PURE__ */ jsx(Badge, {
+				tone: "success",
+				children: t.idSessionsCurrent
+			}) : null,
+			meta: [
+				s.location,
+				s.ip ? maskIp ? maskIpAddress(s.ip) : s.ip : null,
+				s.isCurrent ? t.idSessionsActiveNow : fmt.relative(new Date(s.lastActive), new Date(now ?? initialNow))
+			],
+			actions: onSignOut && !s.isCurrent ? /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				isPending: pending === s.id,
+				isDisabled: pending !== null && pending !== s.id,
+				onPress: () => run(s.id, () => onSignOut(s.id)),
+				children: [t.idAccountSignOut, /* @__PURE__ */ jsx(VisuallyHidden, { children: ` (${s.device})` })]
+			}) : null
+		}, s.id))
+	});
+}
+export { SessionList };

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

@@ -0,0 +1,2 @@
+import { Session, SessionList, SessionListProps } from "./SessionList.js";
+export { Session, SessionList, SessionListProps };

package/dist/id/SignInMethods/SignInMethods.css

@@ -0,0 +1,24 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SignInMethods-root-2cba4 {
+    gap: var(--sti-space-2);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-SignInMethods-item-35646 {
+    min-inline-size: 0;
+  }
+
+  .sti-SignInMethods-trailing-6ae91 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    display: inline-flex;
+  }
+}

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

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+export type SignInMethodKind = "passkey" | "password" | "email-code" | "sso" | "totp";
+export interface SignInMethod {
+  /** Kalıcı anahtar. */
+  id: string;
+  /** Hazır yöntem türü: ad, açıklama ve ikon varsayılanlarını belirler. */
+  kind?: SignInMethodKind;
+  /** Görünen ad; `kind` yoksa zorunludur. */
+  label?: string;
+  description?: string;
+  /** Soldaki ikon (süs); `kind` varsa varsayılanı kullanılır. */
+  icon?: ReactNode;
+  /** Verilirse bağlantı olarak çizilir. */
+  href?: string;
+  onPress?: () => void;
+  /** Kullanıcının en son bu yöntemle oturum açtığını işaretler. */
+  isLastUsed?: boolean;
+  isDisabled?: boolean;
+  isPending?: boolean;
+}
+export interface SignInMethodsProps {
+  methods: readonly SignInMethod[];
+  /** Listenin ekran okuyucu adı; varsayılan "Oturum açma yöntemleri". */
+  label?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * 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.
+ */
+export declare function SignInMethods({ methods, label, className, id }: SignInMethodsProps): import("react").JSX.Element;

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;