@stisocial/ui 0.2.1 → 0.3.0

package/dist/id/ConsentScreen/ConsentScreen.js

@@ -0,0 +1,181 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Avatar } from "../../components/Avatar/Avatar.js";
+import { Button } from "../../components/Button/Button.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import { AlertTriangleIcon } from "../../icons/generated/AlertTriangleIcon.js";
+import { Alert } from "../../components/Alert/Alert.js";
+import { Link } from "../../components/Link/Link.js";
+import { Badge } from "../../components/Badge/Badge.js";
+import { StiMark } from "../_internal/StiMark/StiMark.js";
+import ConsentScreen_module_default from "./ConsentScreen.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/id/ConsentScreen/ConsentScreen.tsx
+/** Yalnız http(s) adresinin alan adı; geçersizse `null` (bağlantı çizilmez). */
+function safeHost(url) {
+	try {
+		const u = new URL(url);
+		return u.protocol === "https:" || u.protocol === "http:" ? u.hostname : null;
+	} catch {
+		return null;
+	}
+}
+/**
+* OAuth izin ekranı ("STI ID ile devam edin"): uygulama (alan adıyla, doğrulanmamışsa uyarı),
+* hangi hesapla devam edildiği, istenen izinler (hassaslar önce ve uyarı tonunda), uygulamanın
+* gizlilik ve kullanım koşulları; "İzin vermeyin" ve "İzin verin" eşit ağırlıkta. Bağlantılar
+* yalnız http(s) adresleriyle çizilir.
+*/
+function ConsentScreen({ app, account, scopes, onAllow, onDeny, onSwitchAccount, className, id }) {
+	const t = useMessages();
+	const [pending, setPending] = useState(null);
+	const host = safeHost(app.url);
+	const ordered = [...scopes].sort((a, b) => Number(Boolean(b.sensitive)) - Number(Boolean(a.sensitive)));
+	const run = async (which, fn) => {
+		setPending(which);
+		try {
+			await fn();
+		} finally {
+			setPending(null);
+		}
+	};
+	const privacy = app.privacyUrl && safeHost(app.privacyUrl) ? app.privacyUrl : null;
+	const terms = app.termsUrl && safeHost(app.termsUrl) ? app.termsUrl : null;
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: [ConsentScreen_module_default.root, className].filter(Boolean).join(" "),
+		"aria-labelledby": `${id ?? "consent"}-title`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: ConsentScreen_module_default.brand,
+				children: [/* @__PURE__ */ jsx(StiMark, { className: ConsentScreen_module_default.mark }), /* @__PURE__ */ jsx("span", { children: t.idSignInWith })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: ConsentScreen_module_default.app,
+				children: [
+					/* @__PURE__ */ jsx(Avatar, {
+						name: app.name,
+						src: app.logo,
+						size: "lg",
+						shape: "square",
+						isDecorative: true
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						id: `${id ?? "consent"}-title`,
+						className: ConsentScreen_module_default.title,
+						children: template(t.idConsentTitle, { app: app.name })
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: ConsentScreen_module_default.host,
+						children: [host ?? app.url, app.verified ? /* @__PURE__ */ jsx(Badge, {
+							tone: "success",
+							children: t.idConnectedVerified
+						}) : null]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: ConsentScreen_module_default.account,
+				children: [
+					/* @__PURE__ */ jsx(Avatar, {
+						name: account.name,
+						src: account.avatar,
+						size: "sm"
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: ConsentScreen_module_default.accountText,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: ConsentScreen_module_default.accountName,
+							children: account.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: ConsentScreen_module_default.accountEmail,
+							children: account.email
+						})]
+					}),
+					onSwitchAccount ? /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						onPress: onSwitchAccount,
+						children: t.idConsentSwitch
+					}) : null
+				]
+			}),
+			app.verified ? null : /* @__PURE__ */ jsx(Alert, {
+				tone: "warning",
+				title: t.idConsentUnverified,
+				children: t.idConsentUnverifiedBody
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: ConsentScreen_module_default.scopes,
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: ConsentScreen_module_default.scopesTitle,
+					children: template(t.idConsentWill, { app: app.name })
+				}), /* @__PURE__ */ jsx("ul", {
+					className: ConsentScreen_module_default.scopeList,
+					children: ordered.map((s) => /* @__PURE__ */ jsxs("li", {
+						className: ConsentScreen_module_default.scope,
+						"data-sensitive": s.sensitive ? "" : void 0,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: ConsentScreen_module_default.scopeIcon,
+							"aria-hidden": "true",
+							children: s.sensitive ? /* @__PURE__ */ jsx(AlertTriangleIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {})
+						}), /* @__PURE__ */ jsxs("span", {
+							className: ConsentScreen_module_default.scopeText,
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: ConsentScreen_module_default.scopeLabel,
+								children: [s.label, s.sensitive ? /* @__PURE__ */ jsx("span", {
+									className: ConsentScreen_module_default.srOnly,
+									children: `, ${t.idConnectedSensitive}`
+								}) : null]
+							}), s.description ? /* @__PURE__ */ jsx("span", {
+								className: ConsentScreen_module_default.scopeDesc,
+								children: s.description
+							}) : null]
+						})]
+					}, s.id))
+				})]
+			}),
+			privacy || terms ? /* @__PURE__ */ jsxs("p", {
+				className: ConsentScreen_module_default.trust,
+				children: [
+					template(t.idConsentTrust, { app: app.name }),
+					" ",
+					privacy ? /* @__PURE__ */ jsx(Link, {
+						href: privacy,
+						target: "_blank",
+						children: t.idConsentPrivacy
+					}) : null,
+					privacy && terms ? ` ${t.idConsentAnd} ` : null,
+					terms ? /* @__PURE__ */ jsx(Link, {
+						href: terms,
+						target: "_blank",
+						children: t.idConsentTerms
+					}) : null,
+					"."
+				]
+			}) : /* @__PURE__ */ jsx("p", {
+				className: ConsentScreen_module_default.trust,
+				children: template(t.idConsentNoPolicy, { app: app.name })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: ConsentScreen_module_default.actions,
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					isPending: pending === "deny",
+					isDisabled: pending === "allow",
+					onPress: () => run("deny", onDeny),
+					children: t.idConsentDeny
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					isPending: pending === "allow",
+					isDisabled: pending === "deny",
+					onPress: () => run("allow", onAllow),
+					children: t.idConsentAllow
+				})]
+			})
+		]
+	});
+}
+export { ConsentScreen, safeHost };

package/dist/id/ConsentScreen/ConsentScreen.module.js

@@ -0,0 +1,26 @@
+import './ConsentScreen.css';
+// src/id/ConsentScreen/ConsentScreen.module.css
+var ConsentScreen_module_default = {
+	"root": "sti-ConsentScreen-root-cb068",
+	"brand": "sti-ConsentScreen-brand-a0266",
+	"mark": "sti-ConsentScreen-mark-29888",
+	"app": "sti-ConsentScreen-app-fa394",
+	"title": "sti-ConsentScreen-title-1dc84",
+	"host": "sti-ConsentScreen-host-79a70",
+	"account": "sti-ConsentScreen-account-f0752",
+	"accountText": "sti-ConsentScreen-accountText-55073",
+	"accountName": "sti-ConsentScreen-accountName-d3ce4",
+	"accountEmail": "sti-ConsentScreen-accountEmail-36210",
+	"scopes": "sti-ConsentScreen-scopes-03a6a",
+	"scopesTitle": "sti-ConsentScreen-scopesTitle-f8564",
+	"scopeList": "sti-ConsentScreen-scopeList-3fd84",
+	"scope": "sti-ConsentScreen-scope-d47a1",
+	"scopeIcon": "sti-ConsentScreen-scopeIcon-e7248",
+	"scopeText": "sti-ConsentScreen-scopeText-0fac0",
+	"scopeLabel": "sti-ConsentScreen-scopeLabel-1e718",
+	"scopeDesc": "sti-ConsentScreen-scopeDesc-0c344",
+	"trust": "sti-ConsentScreen-trust-a5133",
+	"actions": "sti-ConsentScreen-actions-5fbd0",
+	"srOnly": "sti-ConsentScreen-srOnly-8f0c5"
+};
+export { ConsentScreen_module_default as default };

package/dist/id/CookieConsent/CookieConsent.css

@@ -0,0 +1,128 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-CookieConsent-root-b7397 {
+    align-items: center;
+    gap: var(--sti-space-4) var(--sti-space-6);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    padding: var(--sti-space-5) var(--sti-space-6);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    box-shadow: var(--sti-shadow-lg);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-CookieConsent-root-b7397[data-placement="fixed"] {
+    z-index: var(--sti-z-toast);
+    inset-block-end: var(--sti-space-4);
+    inset-inline: var(--sti-space-4);
+    max-inline-size: 64rem;
+    margin-inline: auto;
+    position: fixed;
+  }
+
+  .sti-CookieConsent-root-b7397[data-placement="inline"] {
+    inline-size: 100%;
+    box-shadow: none;
+  }
+
+  .sti-CookieConsent-text-e9ea1 {
+    gap: var(--sti-space-1);
+    flex: 22rem;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-CookieConsent-title-c9520 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-CookieConsent-body-670a3 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-CookieConsent-actions-20cfe {
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    flex: 0 auto;
+    display: flex;
+  }
+
+  .sti-CookieConsent-actions-20cfe > * {
+    flex: auto;
+  }
+
+  .sti-CookieConsent-categories-d6dc5 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-CookieConsent-category-a1f53 {
+    align-items: center;
+    gap: var(--sti-space-4);
+    padding-block: var(--sti-space-3);
+    display: flex;
+  }
+
+  .sti-CookieConsent-category-a1f53 + .sti-CookieConsent-category-a1f53 {
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  .sti-CookieConsent-categoryText-51d32 {
+    gap: calc(var(--sti-space-1) / 2);
+    flex: auto;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-CookieConsent-categoryLabel-e9893 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    flex-wrap: wrap;
+    display: inline-flex;
+  }
+
+  .sti-CookieConsent-always-f6061 {
+    color: var(--sti-fg-accent);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-CookieConsent-categoryDesc-99b25 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+  }
+
+  @media (width <= 40rem) {
+    .sti-CookieConsent-root-b7397[data-placement="fixed"] {
+      inset-inline: var(--sti-space-2);
+      padding: var(--sti-space-4);
+      inset-block-end: var(--sti-space-2);
+    }
+
+    .sti-CookieConsent-actions-20cfe {
+      flex-direction: column;
+      flex-basis: 100%;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-CookieConsent-root-b7397 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/id/CookieConsent/CookieConsent.d.ts

@@ -0,0 +1,32 @@
+export interface CookieCategory {
+  id: string;
+  label: string;
+  description: string;
+  /** Zorunlu çerez (oturum, güvenlik): her zaman açık, kapatılamaz. */
+  required?: boolean;
+}
+export type CookieConsents = Record<string, boolean>;
+export interface CookieConsentProps {
+  /** Kategoriler; zorunlular her zaman açık kaydedilir. */
+  categories: readonly CookieCategory[];
+  /** Çerez Politikası adresi (yalnız http(s) ya da göreli yol). */
+  policyHref: string;
+  /**
+   * Seçim kaydedilir. Kabul, ret ve tercih yolu aynı biçimde döner: zorunlular `true`, diğerleri
+   * kişinin seçimi. Uygulama seçimi ve politika sürümünü sunucuda kaydeder.
+   */
+  onSave: (consents: CookieConsents) => void;
+  /** Tercihler penceresinin başlangıç seçimi (önceki kayıt). Verilmezse zorunlu dışı kapalı. */
+  defaultConsents?: CookieConsents;
+  /** `fixed`: sayfanın altında sabit şerit (varsayılan); `inline`: akış içinde. */
+  placement?: "fixed" | "inline";
+  className?: string;
+  id?: string;
+}
+/**
+ * Çerez onayı (KVKK ve ePrivacy): kısa bilgi, Çerez Politikası bağlantısı ve eşit ağırlıkta üç
+ * eylem: "Yalnız zorunlu olanlar", "Tercihleri yönetin", "Tümünü kabul edin" (ret, kabul kadar
+ * kolaydır; önceden işaretli kutu yoktur). Tercihler penceresinde her kategori bir anahtardır;
+ * zorunlu çerezler kilitli ve açıktır.
+ */
+export declare function CookieConsent({ categories, policyHref, onSave, defaultConsents, placement, className, id }: CookieConsentProps): import("react").JSX.Element;

package/dist/id/CookieConsent/CookieConsent.js

@@ -0,0 +1,120 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { Button } from "../../components/Button/Button.js";
+import { Link } from "../../components/Link/Link.js";
+import { Switch } from "../../components/Switch/Switch.js";
+import { Dialog } from "../../components/Dialog/Dialog.js";
+import CookieConsent_module_default from "./CookieConsent.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/id/CookieConsent/CookieConsent.tsx
+const isSafeHref = (href) => /^(https?:\/\/|\/(?!\/)|#)/i.test(href);
+/**
+* Çerez onayı (KVKK ve ePrivacy): kısa bilgi, Çerez Politikası bağlantısı ve eşit ağırlıkta üç
+* eylem: "Yalnız zorunlu olanlar", "Tercihleri yönetin", "Tümünü kabul edin" (ret, kabul kadar
+* kolaydır; önceden işaretli kutu yoktur). Tercihler penceresinde her kategori bir anahtardır;
+* zorunlu çerezler kilitli ve açıktır.
+*/
+function CookieConsent({ categories, policyHref, onSave, defaultConsents, placement = "fixed", className, id }) {
+	const t = useMessages();
+	const initial = () => Object.fromEntries(categories.map((c) => [c.id, c.required ? true : Boolean(defaultConsents?.[c.id])]));
+	const [choice, setChoice] = useState(initial);
+	const [open, setOpen] = useState(false);
+	const all = (value) => Object.fromEntries(categories.map((c) => [c.id, c.required ? true : value]));
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		className: [CookieConsent_module_default.root, className].filter(Boolean).join(" "),
+		"data-placement": placement,
+		"aria-labelledby": `${id ?? "cookie-consent"}-title`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: CookieConsent_module_default.text,
+			children: [/* @__PURE__ */ jsx("h2", {
+				id: `${id ?? "cookie-consent"}-title`,
+				className: CookieConsent_module_default.title,
+				children: t.idCookieTitle
+			}), /* @__PURE__ */ jsxs("p", {
+				className: CookieConsent_module_default.body,
+				children: [
+					t.idCookieBody,
+					" ",
+					isSafeHref(policyHref) ? /* @__PURE__ */ jsx(Link, {
+						href: policyHref,
+						target: "_blank",
+						children: t.idCookiePolicy
+					}) : null
+				]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: CookieConsent_module_default.actions,
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onPress: () => onSave(all(false)),
+					children: t.idCookieRejectAll
+				}),
+				/* @__PURE__ */ jsx(Dialog, {
+					isOpen: open,
+					onOpenChange: (o) => {
+						if (o) setChoice(initial());
+						setOpen(o);
+					},
+					trigger: /* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						children: t.idCookieManage
+					}),
+					title: t.idCookieManageTitle,
+					description: t.idCookieManageBody,
+					footer: (close) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						onPress: () => {
+							onSave(all(false));
+							close();
+						},
+						children: t.idCookieRejectAll
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						onPress: () => {
+							onSave(choice);
+							close();
+						},
+						children: t.idCookieSave
+					})] }),
+					children: /* @__PURE__ */ jsx("ul", {
+						className: CookieConsent_module_default.categories,
+						children: categories.map((c) => /* @__PURE__ */ jsxs("li", {
+							className: CookieConsent_module_default.category,
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: CookieConsent_module_default.categoryText,
+								children: [/* @__PURE__ */ jsxs("span", {
+									id: `${id ?? "cookie"}-${c.id}-label`,
+									className: CookieConsent_module_default.categoryLabel,
+									children: [c.label, c.required ? /* @__PURE__ */ jsx("span", {
+										className: CookieConsent_module_default.always,
+										children: t.idCookieAlwaysOn
+									}) : null]
+								}), /* @__PURE__ */ jsx("span", {
+									className: CookieConsent_module_default.categoryDesc,
+									children: c.description
+								})]
+							}), /* @__PURE__ */ jsx(Switch, {
+								"aria-labelledby": `${id ?? "cookie"}-${c.id}-label`,
+								isSelected: c.required ? true : Boolean(choice[c.id]),
+								isDisabled: c.required,
+								onChange: (v) => setChoice((prev) => ({
+									...prev,
+									[c.id]: v
+								}))
+							})]
+						}, c.id))
+					})
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onPress: () => onSave(all(true)),
+					children: t.idCookieAcceptAll
+				})
+			]
+		})]
+	});
+}
+export { CookieConsent };

package/dist/id/CookieConsent/CookieConsent.module.js

@@ -0,0 +1,16 @@
+import './CookieConsent.css';
+// src/id/CookieConsent/CookieConsent.module.css
+var CookieConsent_module_default = {
+	"root": "sti-CookieConsent-root-b7397",
+	"text": "sti-CookieConsent-text-e9ea1",
+	"title": "sti-CookieConsent-title-c9520",
+	"body": "sti-CookieConsent-body-670a3",
+	"actions": "sti-CookieConsent-actions-20cfe",
+	"categories": "sti-CookieConsent-categories-d6dc5",
+	"category": "sti-CookieConsent-category-a1f53",
+	"categoryText": "sti-CookieConsent-categoryText-51d32",
+	"categoryLabel": "sti-CookieConsent-categoryLabel-e9893",
+	"always": "sti-CookieConsent-always-f6061",
+	"categoryDesc": "sti-CookieConsent-categoryDesc-99b25"
+};
+export { CookieConsent_module_default as default };

package/dist/id/DeviceList/DeviceList.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+export interface RegisteredDevice {
+  id: string;
+  /** Ad ("MacBook Pro geçiş anahtarı", "YubiKey 5C"). */
+  name: string;
+  /** `passkey` geçiş anahtarı, `security-key` donanım anahtarı, `trusted` güvenilir cihaz. */
+  kind: "passkey" | "security-key" | "trusted";
+  addedAt: Date | string | number;
+  lastUsedAt?: Date | string | number;
+  /** Eşitlenen geçiş anahtarı (iCloud, Google Parola Yöneticisi). */
+  synced?: boolean;
+}
+export interface DeviceListProps {
+  devices: readonly RegisteredDevice[];
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Kaldırma (söz dönerse beklenir). Kaldırmadan önce kimlik doğrulaması uygulamanındır. */
+  onRemove?: (id: string) => void | Promise<void>;
+  /** "Ekleyin" düğmesi (ör. PasskeyButton akışını başlatır). */
+  onAdd?: () => void;
+  /** Son yöntem kaldırılamaz (hesap kilitlenmesin): tek öğe kaldığında kaldırma kapalı. */
+  keepLast?: boolean;
+  now?: Date | string | number;
+  className?: string;
+  id?: string;
+}
+/**
+ * Kayıtlı cihazlar ve geçiş anahtarları: tür, eklenme ve son kullanım, eşitlenme; kaldırma ve
+ * ekleme. Son kalan oturum açma yöntemi kaldırılamaz (`keepLast`) ve nedeni yazılır.
+ */
+export declare function DeviceList({ devices, title, description, onRemove, onAdd, keepLast, now, className, id }: DeviceListProps): import("react").JSX.Element;

package/dist/id/DeviceList/DeviceList.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 { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import { KeyIcon } from "../../icons/generated/KeyIcon.js";
+import { LaptopIcon } from "../../icons/generated/LaptopIcon.js";
+import { PasskeyIcon } from "../../icons/generated/PasskeyIcon.js";
+import { SecurityItem, SecurityList } from "../_internal/SecurityList/SecurityList.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/id/DeviceList/DeviceList.tsx
+const ICON = {
+	passkey: /* @__PURE__ */ jsx(PasskeyIcon, {}),
+	"security-key": /* @__PURE__ */ jsx(KeyIcon, {}),
+	trusted: /* @__PURE__ */ jsx(LaptopIcon, {})
+};
+/**
+* Kayıtlı cihazlar ve geçiş anahtarları: tür, eklenme ve son kullanım, eşitlenme; kaldırma ve
+* ekleme. Son kalan oturum açma yöntemi kaldırılamaz (`keepLast`) ve nedeni yazılır.
+*/
+function DeviceList({ devices, title, description, onRemove, onAdd, keepLast = true, now, className, id }) {
+	const t = useMessages();
+	const fmt = useFormatter();
+	const [initialNow] = useState(() => Date.now());
+	const [pending, setPending] = useState(null);
+	const locked = keepLast && devices.length <= 1;
+	const kindLabel = {
+		passkey: t.idDevicePasskey,
+		"security-key": t.idDeviceSecurityKey,
+		trusted: t.idDeviceTrusted
+	};
+	return /* @__PURE__ */ jsx(SecurityList, {
+		id,
+		className,
+		label: t.idDevices,
+		title: title ?? t.idDevices,
+		description: description ?? t.idDevicesDescription,
+		action: onAdd ? /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			size: "sm",
+			iconStart: /* @__PURE__ */ jsx(PlusIcon, {}),
+			onPress: onAdd,
+			children: t.idDevicesAdd
+		}) : null,
+		isEmpty: devices.length === 0,
+		empty: t.idDevicesEmpty,
+		footer: locked && onRemove ? /* @__PURE__ */ jsx("span", { children: t.idDevicesLastNote }) : null,
+		children: devices.map((d) => /* @__PURE__ */ jsx(SecurityItem, {
+			icon: ICON[d.kind],
+			title: d.name,
+			badges: d.synced ? /* @__PURE__ */ jsx(Badge, {
+				tone: "info",
+				children: t.idDeviceSynced
+			}) : null,
+			meta: [
+				kindLabel[d.kind],
+				template(t.idDeviceAdded, { date: fmt.date(new Date(d.addedAt)) }),
+				d.lastUsedAt ? template(t.idDeviceLastUsed, { time: fmt.relative(new Date(d.lastUsedAt), new Date(now ?? initialNow)) }) : t.idDeviceNeverUsed
+			],
+			actions: onRemove ? /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				isDisabled: locked || pending !== null && pending !== d.id,
+				isPending: pending === d.id,
+				onPress: async () => {
+					setPending(d.id);
+					try {
+						await onRemove(d.id);
+					} finally {
+						setPending(null);
+					}
+				},
+				children: [t.idDeviceRemove, /* @__PURE__ */ jsx(VisuallyHidden, { children: ` (${d.name})` })]
+			}) : null
+		}, d.id))
+	});
+}
+export { DeviceList };

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

@@ -0,0 +1,2 @@
+import { DeviceList, DeviceListProps, RegisteredDevice } from "./DeviceList.js";
+export { DeviceList, DeviceListProps, RegisteredDevice };