@stisocial/ui 0.2.0 → 0.3.0

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/SignInButton/SignInButton.css

@@ -0,0 +1,179 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-SignInButton-root-d5651 {
+    --sti-signin-h: var(--sti-control-h-md);
+    --sti-signin-badge: calc(var(--sti-signin-h) - var(--sti-space-2));
+    --sti-signin-inset: var(--sti-space-1);
+    --sti-signin-gap: var(--sti-space-3);
+    --sti-signin-pe: var(--sti-space-5);
+    --sti-signin-font-size: var(--sti-font-size-sm);
+    --sti-signin-bg: var(--sti-fill-accent);
+    --sti-signin-fg: var(--sti-fg-on-accent);
+    --sti-signin-border: transparent;
+    --sti-signin-shadow: none;
+    align-items: center;
+    gap: var(--sti-signin-gap);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    min-block-size: var(--sti-signin-h);
+    padding-block: 0;
+    padding-inline: var(--sti-signin-inset) var(--sti-signin-pe);
+    border: var(--sti-border-width) solid var(--sti-signin-border);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-signin-bg);
+    box-shadow: var(--sti-signin-shadow);
+    color: var(--sti-signin-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-signin-font-size);
+    font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: .01em;
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      border-color var(--sti-duration-fast) var(--sti-ease-snap),
+      color var(--sti-duration-fast) var(--sti-ease-snap),
+      box-shadow var(--sti-duration-base) var(--sti-ease-out),
+      transform var(--sti-duration-fast) var(--sti-ease-snap);
+    line-height: 1;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .sti-SignInButton-root-d5651[data-size="sm"] {
+    --sti-signin-h: var(--sti-control-h-sm);
+    --sti-signin-gap: var(--sti-space-2);
+    --sti-signin-pe: var(--sti-space-4);
+  }
+
+  .sti-SignInButton-root-d5651[data-size="lg"] {
+    --sti-signin-h: var(--sti-control-h-lg);
+    --sti-signin-pe: var(--sti-space-6);
+    --sti-signin-font-size: var(--sti-font-size-body);
+  }
+
+  @media (pointer: coarse) {
+    .sti-SignInButton-root-d5651[data-size="sm"] {
+      --sti-signin-h: var(--sti-control-h-md);
+    }
+  }
+
+  .sti-SignInButton-root-d5651[data-full-width] {
+    inline-size: 100%;
+    display: flex;
+  }
+
+  .sti-SignInButton-root-d5651[data-full-width] .sti-SignInButton-label-82fd6 {
+    text-align: center;
+    white-space: normal;
+    text-wrap: balance;
+    line-height: var(--sti-line-height-sm);
+    padding-block: var(--sti-space-2);
+    flex: auto;
+  }
+
+  .sti-SignInButton-balance-c62d0 {
+    inline-size: calc(var(--sti-signin-badge) - var(--sti-signin-pe) + var(--sti-signin-inset));
+    flex: none;
+  }
+
+  .sti-SignInButton-root-d5651[data-variant="secondary"] {
+    --sti-signin-bg: var(--sti-bg-surface);
+    --sti-signin-fg: var(--sti-fg);
+    --sti-signin-border: var(--sti-border-strong);
+  }
+
+  .sti-SignInButton-root-d5651[data-variant="inverse"] {
+    --sti-signin-bg: var(--sti-bg-inverse);
+    --sti-signin-fg: var(--sti-fg-inverse);
+  }
+
+  @media (hover: hover) {
+    .sti-SignInButton-root-d5651[data-hovered]:not([data-disabled], [data-pending])[data-variant="primary"] {
+      --sti-signin-bg: var(--sti-fill-accent-hover);
+      --sti-signin-shadow: 0 0 40px color-mix(in oklab, var(--sti-fill-accent) 35%, transparent);
+    }
+
+    .sti-SignInButton-root-d5651[data-hovered]:not([data-disabled], [data-pending])[data-variant="secondary"] {
+      --sti-signin-border: var(--sti-border-accent);
+      --sti-signin-bg: var(--sti-bg-accent-subtle);
+    }
+
+    .sti-SignInButton-root-d5651[data-hovered]:not([data-disabled], [data-pending])[data-variant="inverse"] {
+      --sti-signin-shadow: 0 0 0 var(--sti-border-width-strong) var(--sti-focus-ring);
+    }
+  }
+
+  .sti-SignInButton-root-d5651[data-pressed]:not([data-disabled], [data-pending]) {
+    transform: scale(.98);
+  }
+
+  .sti-SignInButton-root-d5651[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-SignInButton-root-d5651[data-disabled] {
+    opacity: var(--sti-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .sti-SignInButton-root-d5651[data-pending] {
+    cursor: progress;
+  }
+
+  .sti-SignInButton-badge-3b086 {
+    box-sizing: border-box;
+    inline-size: var(--sti-signin-badge);
+    block-size: var(--sti-signin-badge);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-canvas);
+    box-shadow: inset 0 0 0 var(--sti-border-width) var(--sti-border-subtle);
+    color: var(--sti-fg);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-SignInButton-root-d5651[data-variant="secondary"] .sti-SignInButton-badge-3b086 {
+    background: var(--sti-bg-subtle);
+  }
+
+  .sti-SignInButton-mark-c9c2d {
+    block-size: 58%;
+    inline-size: 58%;
+  }
+
+  .sti-SignInButton-label-82fd6 {
+    min-inline-size: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-SignInButton-root-d5651 {
+      border-color: buttontext;
+    }
+
+    .sti-SignInButton-root-d5651[data-focus-visible] {
+      outline-color: highlight;
+    }
+
+    .sti-SignInButton-badge-3b086 {
+      border: var(--sti-border-width) solid ButtonText;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-SignInButton-root-d5651 {
+      transition: none;
+    }
+
+    .sti-SignInButton-root-d5651[data-pressed] {
+      transform: none;
+    }
+  }
+}

package/dist/id/SignInButton/SignInButton.d.ts

@@ -4,17 +4,26 @@ export interface SignInButtonProps {
   onPress?: () => void;
   /** Düğme metni; varsayılan "STI ID ile oturum açın". */
   label?: string;
+  /**
+   * `primary`: turkuaz dolgu (sayfanın ana eylemi); `secondary`: yüzey ve kenar (başka oturum
+   * yöntemlerinin yanında); `inverse`: ters renk (koyu ya da renkli zemin üstünde).
+   */
   variant?: "primary" | "secondary" | "inverse";
   size?: "sm" | "md" | "lg";
+  /** Kabını doldurur: monogram başta, metin ortada kalır. */
   fullWidth?: boolean;
-  /** Oturum açma sürerken: basma yok sayılır, ekran okuyucuya "Oturum açılıyor" duyurulur. */
+  /**
+   * Oturum açma sürerken: monogramın yerinde dönen gösterge, metin "Oturum açılıyor"; basma yok
+   * sayılır ve durum ekran okuyucuya duyurulur.
+   */
   isPending?: boolean;
   isDisabled?: boolean;
   className?: string;
   id?: string;
 }
 /**
- * "STI ID ile oturum açın" düğmesi: kalkan ikonlu, üç boyda, tam genişlikte kullanılabilir.
- * `href` verilirse bağlantı (Enter), verilmezse düğmedir (Enter ve Boşluk).
+ * "STI ID ile oturum açın" marka düğmesi: başta yuvarlak karoda STI monogramı, üç tür ve üç boy.
+ * `href` verilirse bağlantıdır (Enter), verilmezse düğmedir (Enter ve Boşluk). Beklerken bağlantı
+ * yerine meşgul düğme çizilir; ikinci basış yeni bir yönlendirme başlatmaz.
  */
 export declare function SignInButton({ href, onPress, label, variant, size, fullWidth, isPending, isDisabled, className, id }: SignInButtonProps): import("react").JSX.Element;

package/dist/id/SignInButton/SignInButton.js

@@ -1,34 +1,53 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
-import { Button } from "../../components/Button/Button.js";
-import { ShieldCheckIcon } from "../../icons/generated/ShieldCheckIcon.js";
-import { jsx } from "react/jsx-runtime";
+import { Spinner } from "../../components/Spinner/Spinner.js";
+import { StiMark } from "../_internal/StiMark/StiMark.js";
+import SignInButton_module_default from "./SignInButton.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Link } from "react-aria-components";
 // src/id/SignInButton/SignInButton.tsx
 /**
-* "STI ID ile oturum açın" düğmesi: kalkan ikonlu, üç boyda, tam genişlikte kullanılabilir.
-* `href` verilirse bağlantı (Enter), verilmezse düğmedir (Enter ve Boşluk).
+* "STI ID ile oturum açın" marka düğmesi: başta yuvarlak karoda STI monogramı, üç tür ve üç boy.
+* `href` verilirse bağlantıdır (Enter), verilmezse düğmedir (Enter ve Boşluk). Beklerken bağlantı
+* yerine meşgul düğme çizilir; ikinci basış yeni bir yönlendirme başlatmaz.
 */
 function SignInButton({ href, onPress, label, variant = "primary", size = "md", fullWidth, isPending, isDisabled, className, id }) {
 	const t = useMessages();
 	const text = isPending ? t.idSignInPending : label ?? t.idSignInWith;
-	const common = {
-		variant,
-		size,
-		fullWidth,
-		isDisabled,
-		className,
+	const shared = {
 		id,
-		iconStart: /* @__PURE__ */ jsx(ShieldCheckIcon, {})
+		className: [SignInButton_module_default.root, className].filter(Boolean).join(" "),
+		"data-variant": variant,
+		"data-size": size,
+		"data-full-width": fullWidth ? "" : void 0,
+		isDisabled
 	};
-	return href !== void 0 && !isPending ? /* @__PURE__ */ jsx(Button, {
-		...common,
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			className: SignInButton_module_default.badge,
+			"aria-hidden": "true",
+			children: isPending ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : /* @__PURE__ */ jsx(StiMark, { className: SignInButton_module_default.mark })
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: SignInButton_module_default.label,
+			children: text
+		}),
+		fullWidth ? /* @__PURE__ */ jsx("span", {
+			className: SignInButton_module_default.balance,
+			"aria-hidden": "true"
+		}) : null
+	] });
+	if (href !== void 0 && !isPending) return /* @__PURE__ */ jsx(Link, {
+		...shared,
 		href,
-		children: text
-	}) : /* @__PURE__ */ jsx(Button, {
-		...common,
+		onPress,
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		...shared,
 		isPending,
 		onPress,
-		children: text
+		children: content
 	});
 }
 export { SignInButton };

package/dist/id/SignInButton/SignInButton.module.js

@@ -0,0 +1,10 @@
+import './SignInButton.css';
+// src/id/SignInButton/SignInButton.module.css
+var SignInButton_module_default = {
+	"root": "sti-SignInButton-root-d5651",
+	"label": "sti-SignInButton-label-82fd6",
+	"balance": "sti-SignInButton-balance-c62d0",
+	"badge": "sti-SignInButton-badge-3b086",
+	"mark": "sti-SignInButton-mark-c9c2d"
+};
+export { SignInButton_module_default as default };

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;