@stisocial/ui 0.2.0 → 0.3.0

package/dist/id/ReauthDialog/ReauthDialog.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 { Dialog } from "../../components/Dialog/Dialog.js";
+import { InlineMessage } from "../../components/InlineMessage/InlineMessage.js";
+import { PasswordField } from "../../components/PasswordField/PasswordField.js";
+import { OtpField } from "../../components/OtpField/OtpField.js";
+import ReauthDialog_module_default from "./ReauthDialog.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+// src/id/ReauthDialog/ReauthDialog.tsx
+/** Alan pencere açılınca (bağlanınca) odağı alır; Dialog içinde `autoFocus` desteklenmeyen alanlar için. */
+const focusOnMount = (el) => el?.focus();
+/**
+* Kimlik yeniden doğrulama penceresi: parola, kimlik doğrulayıcı kodu ya da geçiş anahtarı. Yıkıcı
+* ya da hassas işlemden (parola değiştirme, anahtar silme) önce açılır. Pencere kipli bir iletişim
+* kutusudur: odak içeride tutulur, Escape vazgeçer, Enter gönderir. Hata alanın altında, metinle
+* yazılır ve pencere açık kalır.
+*/
+function ReauthDialog({ trigger, isOpen, defaultOpen, onOpenChange, methods = ["password"], accountEmail, reason, onVerify, onVerified }) {
+	const t = useMessages();
+	const formId = useId();
+	const first = methods[0] ?? "password";
+	const [method, setMethod] = useState(first);
+	const [value, setValue] = useState("");
+	const [pending, setPending] = useState(false);
+	const [error, setError] = useState(null);
+	const names = {
+		password: t.idMethodPassword,
+		totp: t.idMethodTotp,
+		passkey: t.idMethodPasskey
+	};
+	const reset = () => {
+		setMethod(first);
+		setValue("");
+		setError(null);
+		setPending(false);
+	};
+	const run = async (input, close) => {
+		if (pending) return;
+		setPending(true);
+		setError(null);
+		try {
+			const result = await onVerify(input);
+			if (result === true) {
+				close();
+				onVerified?.();
+				return;
+			}
+			setError(typeof result === "string" && result ? result : t.idReauthFailed);
+			setValue("");
+		} catch {
+			setError(t.idReauthFailed);
+			setValue("");
+		} finally {
+			setPending(false);
+		}
+	};
+	const others = methods.filter((m) => m !== method);
+	return /* @__PURE__ */ jsx(Dialog, {
+		size: "sm",
+		trigger,
+		isOpen,
+		defaultOpen,
+		onOpenChange: (open) => {
+			if (!open) reset();
+			onOpenChange?.(open);
+		},
+		isKeyboardDismissDisabled: pending,
+		isDismissable: !pending,
+		title: t.idReauthTitle,
+		description: reason ?? t.idReauthDescription,
+		footer: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			isDisabled: pending,
+			onPress: close,
+			children: t.idReauthCancel
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "primary",
+			type: "submit",
+			form: formId,
+			isPending: pending,
+			children: method === "passkey" ? t.idReauthPasskey : t.idReauthSubmit
+		})] }),
+		children: (close) => /* @__PURE__ */ jsxs("form", {
+			id: formId,
+			noValidate: true,
+			className: ReauthDialog_module_default.form,
+			onSubmit: (e) => {
+				e.preventDefault();
+				if (method === "passkey") run({ method }, close);
+				else if (value.trim()) run({
+					method,
+					value: value.trim()
+				}, close);
+				else setError(t.errorRequired);
+			},
+			children: [
+				accountEmail ? /* @__PURE__ */ jsx("p", {
+					className: ReauthDialog_module_default.account,
+					children: template(t.idReauthAccount, { email: accountEmail })
+				}) : null,
+				method === "password" ? /* @__PURE__ */ jsx(PasswordField, {
+					label: t.idReauthPassword,
+					autoComplete: "current-password",
+					value,
+					onChange: (v) => {
+						setValue(v);
+						setError(null);
+					},
+					isInvalid: error !== null,
+					errorMessage: error ?? void 0,
+					inputRef: focusOnMount,
+					isRequired: true
+				}) : method === "totp" ? /* @__PURE__ */ jsx(OtpField, {
+					label: t.idReauthCode,
+					description: t.idReauthCodeHint,
+					length: 6,
+					value,
+					onChange: (v) => {
+						setValue(v);
+						setError(null);
+					},
+					onComplete: (code) => run({
+						method,
+						value: code
+					}, close),
+					isInvalid: error !== null,
+					errorMessage: error ?? void 0,
+					isDisabled: pending,
+					autoFocus: true
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+					className: ReauthDialog_module_default.hint,
+					children: t.idReauthPasskeyHint
+				}), error ? /* @__PURE__ */ jsx(InlineMessage, {
+					tone: "danger",
+					live: true,
+					children: error
+				}) : null] }),
+				others.length > 0 ? /* @__PURE__ */ jsxs("div", {
+					className: ReauthDialog_module_default.others,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: ReauthDialog_module_default.othersLabel,
+						children: t.idReauthOtherMethods
+					}), others.map((m) => /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						isDisabled: pending,
+						onPress: () => {
+							setMethod(m);
+							setValue("");
+							setError(null);
+						},
+						children: template(t.idReauthUseMethod, { method: names[m] })
+					}, m))]
+				}) : null
+			]
+		})
+	});
+}
+export { ReauthDialog };

package/dist/id/ReauthDialog/ReauthDialog.module.js

@@ -0,0 +1,10 @@
+import './ReauthDialog.css';
+// src/id/ReauthDialog/ReauthDialog.module.css
+var ReauthDialog_module_default = {
+	"form": "sti-ReauthDialog-form-b1eb8",
+	"account": "sti-ReauthDialog-account-3c643",
+	"hint": "sti-ReauthDialog-hint-684ae",
+	"others": "sti-ReauthDialog-others-ecdb8",
+	"othersLabel": "sti-ReauthDialog-othersLabel-ec502"
+};
+export { ReauthDialog_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ReauthDialog, ReauthDialogProps, ReauthInput, ReauthMethod } from "./ReauthDialog.js";
+export { ReauthDialog, ReauthDialogProps, ReauthInput, ReauthMethod };

package/dist/id/RecoveryCodes/RecoveryCodes.css

@@ -0,0 +1,85 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-RecoveryCodes-root-9a799 {
+    gap: var(--sti-space-4);
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 32rem;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: grid;
+    container-type: inline-size;
+  }
+
+  .sti-RecoveryCodes-codes-6e1b3 {
+    gap: var(--sti-space-2) var(--sti-space-6);
+    padding: var(--sti-space-4) var(--sti-space-5);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    counter-reset: code;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    margin: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-RecoveryCodes-code-7e9af {
+    align-items: baseline;
+    gap: var(--sti-space-2);
+    font-family: var(--sti-font-mono);
+    font-size: var(--sti-font-size-md);
+    letter-spacing: .06em;
+    counter-increment: code;
+    display: flex;
+  }
+
+  .sti-RecoveryCodes-code-7e9af:before {
+    min-inline-size: 1.5em;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    text-align: end;
+    content: counter(code) ".";
+  }
+
+  .sti-RecoveryCodes-code-7e9af[data-used] code {
+    color: var(--sti-fg-muted);
+    text-decoration: line-through;
+  }
+
+  .sti-RecoveryCodes-used-4f02b {
+    color: var(--sti-fg-muted);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-xs);
+    letter-spacing: 0;
+  }
+
+  .sti-RecoveryCodes-count-cfb1e {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-RecoveryCodes-tools-ebcc7 {
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-RecoveryCodes-confirm-a6d48 {
+    gap: var(--sti-space-3);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    padding-block-start: var(--sti-space-4);
+    display: grid;
+  }
+
+  .sti-RecoveryCodes-confirm-a6d48 > :last-child {
+    justify-self: end;
+  }
+
+  @container (width <= 20rem) {
+    .sti-RecoveryCodes-codes-6e1b3 {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+}

package/dist/id/RecoveryCodes/RecoveryCodes.d.ts

@@ -0,0 +1,25 @@
+export interface RecoveryCode {
+  code: string;
+  /** Kullanılmış kod (yeniden kullanılamaz). */
+  used?: boolean;
+}
+export interface RecoveryCodesProps {
+  /** Kodlar (yalnız oluşturulduktan hemen sonra tamamı gösterilmelidir). */
+  codes: readonly (string | RecoveryCode)[];
+  /** İndirilen dosyanın adı. */
+  fileName?: string;
+  /** Dosyanın başına yazılacak hesap ("ayse@ornek.com"). */
+  accountName?: string;
+  /** Yeni kodlar oluşturur (eskiler geçersiz olur; kimlik doğrulaması uygulamanındır). */
+  onRegenerate?: () => void;
+  /** Verilirse "Kaydettim" onayı ve "Devam edin" düğmesi çıkar. */
+  onConfirm?: () => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * Kurtarma kodları: tek kullanımlık yedek kodlar iki sütunda eş aralıklı yazıyla; kullanılanlar
+ * üstü çizili ve metinle işaretli. Tümünü kopyalama, metin dosyası olarak indirme, yeniden
+ * oluşturma; isteğe bağlı "güvenli bir yere kaydettim" onayıyla devam.
+ */
+export declare function RecoveryCodes({ codes, fileName, accountName, onRegenerate, onConfirm, className, id }: RecoveryCodesProps): import("react").JSX.Element;

package/dist/id/RecoveryCodes/RecoveryCodes.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 { Alert } from "../../components/Alert/Alert.js";
+import { Checkbox } from "../../components/Checkbox/Checkbox.js";
+import { CopyButton } from "../../components/CopyButton/CopyButton.js";
+import { DownloadIcon } from "../../icons/generated/DownloadIcon.js";
+import { RefreshIcon } from "../../icons/generated/RefreshIcon.js";
+import RecoveryCodes_module_default from "./RecoveryCodes.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/id/RecoveryCodes/RecoveryCodes.tsx
+/**
+* Kurtarma kodları: tek kullanımlık yedek kodlar iki sütunda eş aralıklı yazıyla; kullanılanlar
+* üstü çizili ve metinle işaretli. Tümünü kopyalama, metin dosyası olarak indirme, yeniden
+* oluşturma; isteğe bağlı "güvenli bir yere kaydettim" onayıyla devam.
+*/
+function RecoveryCodes({ codes, fileName = "sti-id-kurtarma-kodlari.txt", accountName, onRegenerate, onConfirm, className, id }) {
+	const t = useMessages();
+	const [saved, setSaved] = useState(false);
+	const list = codes.map((c) => typeof c === "string" ? { code: c } : c);
+	const unused = list.filter((c) => !c.used);
+	const text = [
+		t.idRecoveryFileTitle,
+		accountName ? template(t.idRecoveryFileAccount, { account: accountName }) : "",
+		"",
+		...unused.map((c) => c.code),
+		"",
+		t.idRecoveryFileNote
+	].filter((l, i) => l !== "" || i > 1).join("\r\n");
+	const download = () => {
+		const url = URL.createObjectURL(new Blob([text], { type: "text/plain;charset=utf-8" }));
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = fileName;
+		a.click();
+		setTimeout(() => URL.revokeObjectURL(url), 0);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: [RecoveryCodes_module_default.root, className].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ jsx(Alert, {
+				tone: "warning",
+				title: t.idRecoveryTitle,
+				children: t.idRecoveryBody
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: RecoveryCodes_module_default.codes,
+				"aria-label": t.idRecoveryList,
+				children: list.map((c) => /* @__PURE__ */ jsxs("li", {
+					className: RecoveryCodes_module_default.code,
+					"data-used": c.used ? "" : void 0,
+					children: [/* @__PURE__ */ jsx("code", { children: c.code }), c.used ? /* @__PURE__ */ jsx("span", {
+						className: RecoveryCodes_module_default.used,
+						children: t.idRecoveryUsed
+					}) : null]
+				}, c.code))
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: RecoveryCodes_module_default.count,
+				children: template(t.idRecoveryRemaining, {
+					count: unused.length,
+					total: list.length
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: RecoveryCodes_module_default.tools,
+				children: [
+					/* @__PURE__ */ jsx(CopyButton, {
+						value: unused.map((c) => c.code).join("\n"),
+						label: t.idRecoveryCopy
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						size: "sm",
+						iconStart: /* @__PURE__ */ jsx(DownloadIcon, {}),
+						onPress: download,
+						children: t.idRecoveryDownload
+					}),
+					onRegenerate ? /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						iconStart: /* @__PURE__ */ jsx(RefreshIcon, {}),
+						onPress: onRegenerate,
+						children: t.idRecoveryRegenerate
+					}) : null
+				]
+			}),
+			onConfirm ? /* @__PURE__ */ jsxs("div", {
+				className: RecoveryCodes_module_default.confirm,
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					isSelected: saved,
+					onChange: setSaved,
+					children: t.idRecoverySavedCheck
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					isDisabled: !saved,
+					onPress: onConfirm,
+					children: t.idTwoFactorContinue
+				})]
+			}) : null
+		]
+	});
+}
+export { RecoveryCodes };

package/dist/id/RecoveryCodes/RecoveryCodes.module.js

@@ -0,0 +1,12 @@
+import './RecoveryCodes.css';
+// src/id/RecoveryCodes/RecoveryCodes.module.css
+var RecoveryCodes_module_default = {
+	"root": "sti-RecoveryCodes-root-9a799",
+	"codes": "sti-RecoveryCodes-codes-6e1b3",
+	"code": "sti-RecoveryCodes-code-7e9af",
+	"used": "sti-RecoveryCodes-used-4f02b",
+	"count": "sti-RecoveryCodes-count-cfb1e",
+	"tools": "sti-RecoveryCodes-tools-ebcc7",
+	"confirm": "sti-RecoveryCodes-confirm-a6d48"
+};
+export { RecoveryCodes_module_default as default };

package/dist/id/SecurityCheckup/SecurityCheckup.css

@@ -0,0 +1,155 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SecurityCheckup-root-cef57 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 44rem;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    gap: 0;
+    display: grid;
+    overflow: hidden;
+    container: sti-checkup / inline-size;
+  }
+
+  .sti-SecurityCheckup-summary-1723b {
+    --sti-checkup-tone: var(--sti-fg-success);
+    --sti-checkup-bg: var(--sti-bg-success-subtle);
+    align-items: center;
+    gap: var(--sti-space-4);
+    padding: var(--sti-space-5);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    background: var(--sti-checkup-bg);
+    display: flex;
+  }
+
+  .sti-SecurityCheckup-summary-1723b[data-status="warning"] {
+    --sti-checkup-tone: var(--sti-fg-warning);
+    --sti-checkup-bg: var(--sti-bg-warning-subtle);
+  }
+
+  .sti-SecurityCheckup-summary-1723b[data-status="danger"] {
+    --sti-checkup-tone: var(--sti-fg-danger);
+    --sti-checkup-bg: var(--sti-bg-danger-subtle);
+  }
+
+  .sti-SecurityCheckup-shield-22517 {
+    inline-size: var(--sti-space-12);
+    block-size: var(--sti-space-12);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface);
+    color: var(--sti-checkup-tone);
+    font-size: var(--sti-icon-lg);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-SecurityCheckup-summaryText-21a2b {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-SecurityCheckup-title-a1d08 {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+    margin: 0;
+  }
+
+  .sti-SecurityCheckup-headline-8ada1 {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    margin: 0;
+  }
+
+  .sti-SecurityCheckup-list-8833c {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .sti-SecurityCheckup-item-4b62d {
+    --sti-checkup-tone: var(--sti-fg-success);
+    align-items: start;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-4) var(--sti-space-5);
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    display: grid;
+  }
+
+  .sti-SecurityCheckup-item-4b62d + .sti-SecurityCheckup-item-4b62d {
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  .sti-SecurityCheckup-item-4b62d[data-status="warning"] {
+    --sti-checkup-tone: var(--sti-fg-warning);
+  }
+
+  .sti-SecurityCheckup-item-4b62d[data-status="danger"] {
+    --sti-checkup-tone: var(--sti-fg-danger);
+  }
+
+  .sti-SecurityCheckup-icon-6b8a9 {
+    color: var(--sti-checkup-tone);
+    font-size: var(--sti-icon-md);
+    padding-block-start: calc(var(--sti-space-1) / 2);
+    display: inline-flex;
+  }
+
+  .sti-SecurityCheckup-body-aac4d {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-SecurityCheckup-itemTitle-68b39 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-md);
+    margin: 0;
+  }
+
+  .sti-SecurityCheckup-description-3808a {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-SecurityCheckup-action-6bedd {
+    align-self: center;
+  }
+
+  @container sti-checkup (width <= 30rem) {
+    .sti-SecurityCheckup-item-4b62d {
+      grid-template-columns: auto minmax(0, 1fr);
+    }
+
+    .sti-SecurityCheckup-action-6bedd {
+      grid-column: 2;
+      justify-self: start;
+    }
+  }
+
+  .sti-SecurityCheckup-srOnly-f77ac {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (forced-colors: active) {
+    .sti-SecurityCheckup-root-cef57 {
+      border-color: canvastext;
+    }
+  }
+}

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;