@stisocial/ui 0.2.1 → 0.3.0

package/dist/id/ApiKeyList/ApiKeyList.css

@@ -0,0 +1,75 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ApiKeyList-root-c1173 {
+    gap: var(--sti-space-4);
+    inline-size: 100%;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-ApiKeyList-secret-2b7b1 {
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-4);
+    border: var(--sti-border-width) solid var(--sti-fg-accent);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-accent-subtle);
+    display: grid;
+  }
+
+  .sti-ApiKeyList-secretTitle-eada3 {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-ApiKeyList-secretNote-399bb {
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-ApiKeyList-secretRow-32136 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    padding: var(--sti-space-2) var(--sti-space-2) 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-canvas);
+    display: flex;
+  }
+
+  .sti-ApiKeyList-secretValue-f5f84 {
+    min-inline-size: 0;
+    font-family: var(--sti-font-mono);
+    font-size: var(--sti-font-size-sm);
+    overflow-wrap: anywhere;
+    -webkit-user-select: all;
+    user-select: all;
+    flex: auto;
+  }
+
+  .sti-ApiKeyList-secretDone-44ea2 {
+    justify-self: start;
+  }
+
+  .sti-ApiKeyList-prefix-eefe1 {
+    font-family: var(--sti-font-mono);
+    font-size: var(--sti-font-size-xs);
+  }
+
+  .sti-ApiKeyList-scopes-89292 {
+    gap: var(--sti-space-1);
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+
+  @media (forced-colors: active) {
+    .sti-ApiKeyList-secret-2b7b1 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/id/ApiKeyList/ApiKeyList.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+export interface ApiKey {
+  id: string;
+  name: string;
+  /** Anahtarın görünür başı ("sti_live_4f9a"); gizli kısmı asla verilmez. */
+  prefix: string;
+  /** İzin adları ("Raporları okuma"). */
+  scopes?: readonly string[];
+  createdAt: Date | string | number;
+  lastUsedAt?: Date | string | number;
+  expiresAt?: Date | string | number;
+}
+export interface ApiKeyListProps {
+  keys: readonly ApiKey[];
+  title?: ReactNode;
+  description?: ReactNode;
+  /** "Yeni anahtar oluşturun" (ad ve izin seçimi uygulamanın penceresindedir). */
+  onCreate?: () => void;
+  /** Anahtarı iptal eder (söz dönerse beklenir). */
+  onRevoke?: (id: string) => void | Promise<void>;
+  /**
+   * Az önce oluşturulan anahtarın tamamı: yalnız bir kez gösterilir, kopyalanır, kapatılınca
+   * `onDismissSecret` ile uygulama belleğinden de silmelidir.
+   */
+  newSecret?: {
+    name: string;
+    value: string;
+  };
+  onDismissSecret?: () => void;
+  /** Süresi bu kadar gün içinde dolacak anahtar uyarı rozeti alır. */
+  expiryWarningDays?: number;
+  now?: Date | string | number;
+  className?: string;
+  id?: string;
+}
+/**
+ * API anahtarları: ad, görünür başlangıç (gizli kısım yok), izinler, oluşturma, son kullanım ve
+ * son geçerlilik (yaklaşan ve dolmuş rozetleri); oluşturma ve iptal. Yeni anahtarın tamamı yalnız
+ * bir kez, uyarıyla ve kopyalama düğmesiyle gösterilir.
+ */
+export declare function ApiKeyList({ keys, title, description, onCreate, onRevoke, newSecret, onDismissSecret, expiryWarningDays, now, className, id }: ApiKeyListProps): import("react").JSX.Element;

package/dist/id/ApiKeyList/ApiKeyList.js

@@ -0,0 +1,131 @@
+"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 { CopyButton } from "../../components/CopyButton/CopyButton.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import { KeyIcon } from "../../icons/generated/KeyIcon.js";
+import { SecurityItem, SecurityList } from "../_internal/SecurityList/SecurityList.js";
+import ApiKeyList_module_default from "./ApiKeyList.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/id/ApiKeyList/ApiKeyList.tsx
+const DAY = 864e5;
+/**
+* API anahtarları: ad, görünür başlangıç (gizli kısım yok), izinler, oluşturma, son kullanım ve
+* son geçerlilik (yaklaşan ve dolmuş rozetleri); oluşturma ve iptal. Yeni anahtarın tamamı yalnız
+* bir kez, uyarıyla ve kopyalama düğmesiyle gösterilir.
+*/
+function ApiKeyList({ keys, title, description, onCreate, onRevoke, newSecret, onDismissSecret, expiryWarningDays = 14, now, className, id }) {
+	const t = useMessages();
+	const fmt = useFormatter();
+	const [initialNow] = useState(() => Date.now());
+	const [pending, setPending] = useState(null);
+	const current = new Date(now ?? initialNow).getTime();
+	const expiry = (k) => {
+		if (k.expiresAt === void 0) return null;
+		const left = new Date(k.expiresAt).getTime() - current;
+		if (left <= 0) return /* @__PURE__ */ jsx(Badge, {
+			tone: "danger",
+			children: t.idApiKeyExpired
+		});
+		if (left <= expiryWarningDays * DAY) return /* @__PURE__ */ jsx(Badge, {
+			tone: "warning",
+			children: template(t.idApiKeyExpiresSoon, { days: Math.ceil(left / DAY) })
+		});
+		return null;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: [ApiKeyList_module_default.root, className].filter(Boolean).join(" "),
+		id,
+		children: [newSecret ? /* @__PURE__ */ jsxs("section", {
+			className: ApiKeyList_module_default.secret,
+			"aria-labelledby": `${id ?? "api"}-secret`,
+			children: [
+				/* @__PURE__ */ jsx("h3", {
+					id: `${id ?? "api"}-secret`,
+					className: ApiKeyList_module_default.secretTitle,
+					children: template(t.idApiKeyCreated, { name: newSecret.name })
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: ApiKeyList_module_default.secretNote,
+					children: t.idApiKeyShownOnce
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: ApiKeyList_module_default.secretRow,
+					children: [/* @__PURE__ */ jsx("code", {
+						className: ApiKeyList_module_default.secretValue,
+						children: newSecret.value
+					}), /* @__PURE__ */ jsx(CopyButton, {
+						value: newSecret.value,
+						label: t.idApiKeyCopy
+					})]
+				}),
+				onDismissSecret ? /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					size: "sm",
+					onPress: onDismissSecret,
+					className: ApiKeyList_module_default.secretDone,
+					children: t.idApiKeySaved
+				}) : null
+			]
+		}) : null, /* @__PURE__ */ jsx(SecurityList, {
+			label: t.idApiKeys,
+			title: title ?? t.idApiKeys,
+			description: description ?? t.idApiKeysDescription,
+			action: onCreate ? /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "sm",
+				iconStart: /* @__PURE__ */ jsx(PlusIcon, {}),
+				onPress: onCreate,
+				children: t.idApiKeyCreate
+			}) : null,
+			isEmpty: keys.length === 0,
+			empty: t.idApiKeysEmpty,
+			children: keys.map((k) => {
+				const badge = expiry(k);
+				return /* @__PURE__ */ jsx(SecurityItem, {
+					icon: /* @__PURE__ */ jsx(KeyIcon, {}),
+					tone: k.expiresAt !== void 0 && new Date(k.expiresAt).getTime() <= current ? "danger" : badge ? "warning" : void 0,
+					title: k.name,
+					badges: badge,
+					meta: [
+						/* @__PURE__ */ jsx("code", {
+							className: ApiKeyList_module_default.prefix,
+							children: `${k.prefix}…`
+						}, "p"),
+						template(t.idApiKeyCreatedAt, { date: fmt.date(new Date(k.createdAt)) }),
+						k.lastUsedAt ? template(t.idDeviceLastUsed, { time: fmt.relative(new Date(k.lastUsedAt), new Date(current)) }) : t.idDeviceNeverUsed,
+						k.expiresAt ? template(t.idApiKeyExpiresAt, { date: fmt.date(new Date(k.expiresAt)) }) : null
+					],
+					extra: k.scopes && k.scopes.length > 0 ? /* @__PURE__ */ jsx("ul", {
+						className: ApiKeyList_module_default.scopes,
+						"aria-label": t.idApiKeyScopes,
+						children: k.scopes.map((s) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Badge, {
+							tone: "neutral",
+							children: s
+						}) }, s))
+					}) : null,
+					actions: onRevoke ? /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						isPending: pending === k.id,
+						isDisabled: pending !== null && pending !== k.id,
+						onPress: async () => {
+							setPending(k.id);
+							try {
+								await onRevoke(k.id);
+							} finally {
+								setPending(null);
+							}
+						},
+						children: [t.idApiKeyRevoke, /* @__PURE__ */ jsx(VisuallyHidden, { children: ` (${k.name})` })]
+					}) : null
+				}, k.id);
+			})
+		})]
+	});
+}
+export { ApiKeyList };

package/dist/id/ApiKeyList/ApiKeyList.module.js

@@ -0,0 +1,14 @@
+import './ApiKeyList.css';
+// src/id/ApiKeyList/ApiKeyList.module.css
+var ApiKeyList_module_default = {
+	"root": "sti-ApiKeyList-root-c1173",
+	"secret": "sti-ApiKeyList-secret-2b7b1",
+	"secretTitle": "sti-ApiKeyList-secretTitle-eada3",
+	"secretNote": "sti-ApiKeyList-secretNote-399bb",
+	"secretRow": "sti-ApiKeyList-secretRow-32136",
+	"secretValue": "sti-ApiKeyList-secretValue-f5f84",
+	"secretDone": "sti-ApiKeyList-secretDone-44ea2",
+	"prefix": "sti-ApiKeyList-prefix-eefe1",
+	"scopes": "sti-ApiKeyList-scopes-89292"
+};
+export { ApiKeyList_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ApiKey, ApiKeyList, ApiKeyListProps } from "./ApiKeyList.js";
+export { ApiKey, ApiKeyList, ApiKeyListProps };

package/dist/id/AppSwitcher/AppSwitcher.js

@@ -1,9 +1,9 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
-import { IconButton } from "../../components/IconButton/IconButton.js";
+import { avatarColorOf } from "../../components/Avatar/Avatar.js";
 import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
 import { ArrowRightIcon } from "../../icons/generated/ArrowRightIcon.js";
-import { avatarColorOf } from "../../components/Avatar/Avatar.js";
 import { Popover as Popover$1 } from "../../components/Popover/Popover.js";
 import { AppsIcon } from "../../icons/generated/AppsIcon.js";
 import AppSwitcher_module_default from "./AppSwitcher.module.js";

package/dist/id/ConnectedApps/ConnectedApps.css

@@ -0,0 +1,16 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ConnectedApps-scopes-1073c {
+    max-inline-size: 36rem;
+  }
+
+  .sti-ConnectedApps-scopeList-6daae {
+    gap: var(--sti-space-1);
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+    padding-inline-start: var(--sti-space-5);
+    display: grid;
+  }
+}

package/dist/id/ConnectedApps/ConnectedApps.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+export interface ConnectedApp {
+  id: string;
+  name: string;
+  /** Uygulamanın simgesi (Avatar `src`). */
+  logo?: string;
+  /** Yayıncı ya da alan adı ("canva.com"). */
+  publisher?: string;
+  /** Verilen izinlerin okunur adları ("Profil bilgilerinizi görme"). */
+  scopes: readonly string[];
+  /** Hassas izin içeriyorsa (e-posta gönderme, dosya yazma). */
+  hasSensitiveScopes?: boolean;
+  /** STI tarafından doğrulanmış uygulama. */
+  verified?: boolean;
+  grantedAt: Date | string | number;
+  lastUsedAt?: Date | string | number;
+}
+export interface ConnectedAppsProps {
+  apps: readonly ConnectedApp[];
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Erişimi kaldırır (söz dönerse beklenir). */
+  onRevoke?: (id: string) => void | Promise<void>;
+  now?: Date | string | number;
+  className?: string;
+  id?: string;
+}
+/**
+ * Hesaba erişimi olan üçüncü taraf uygulamalar: ad, yayıncı, doğrulanmış ve hassas izin
+ * rozetleri, erişim tarihi ve son kullanım; izinler açılır bölümde. Erişim tek düğmeyle kaldırılır.
+ */
+export declare function ConnectedApps({ apps, title, description, onRevoke, now, className, id }: ConnectedAppsProps): import("react").JSX.Element;

package/dist/id/ConnectedApps/ConnectedApps.js

@@ -0,0 +1,80 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Avatar } from "../../components/Avatar/Avatar.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { Button } from "../../components/Button/Button.js";
+import { Badge } from "../../components/Badge/Badge.js";
+import { Disclosure } from "../../components/Disclosure/Disclosure.js";
+import { SecurityItem, SecurityList } from "../_internal/SecurityList/SecurityList.js";
+import ConnectedApps_module_default from "./ConnectedApps.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/id/ConnectedApps/ConnectedApps.tsx
+/**
+* Hesaba erişimi olan üçüncü taraf uygulamalar: ad, yayıncı, doğrulanmış ve hassas izin
+* rozetleri, erişim tarihi ve son kullanım; izinler açılır bölümde. Erişim tek düğmeyle kaldırılır.
+*/
+function ConnectedApps({ apps, title, description, onRevoke, now, className, id }) {
+	const t = useMessages();
+	const fmt = useFormatter();
+	const [initialNow] = useState(() => Date.now());
+	const [pending, setPending] = useState(null);
+	return /* @__PURE__ */ jsx(SecurityList, {
+		id,
+		className,
+		label: t.idConnectedApps,
+		title: title ?? t.idConnectedApps,
+		description: description ?? t.idConnectedAppsDescription,
+		isEmpty: apps.length === 0,
+		empty: t.idConnectedAppsEmpty,
+		children: apps.map((a) => /* @__PURE__ */ jsx(SecurityItem, {
+			icon: /* @__PURE__ */ jsx(Avatar, {
+				name: a.name,
+				src: a.logo,
+				size: "sm",
+				shape: "square",
+				isDecorative: true
+			}),
+			title: a.name,
+			tone: a.hasSensitiveScopes ? "warning" : void 0,
+			badges: /* @__PURE__ */ jsxs(Fragment, { children: [a.verified ? /* @__PURE__ */ jsx(Badge, {
+				tone: "success",
+				children: t.idConnectedVerified
+			}) : null, a.hasSensitiveScopes ? /* @__PURE__ */ jsx(Badge, {
+				tone: "warning",
+				children: t.idConnectedSensitive
+			}) : null] }),
+			meta: [
+				a.publisher,
+				template(t.idConnectedGranted, { date: fmt.date(new Date(a.grantedAt)) }),
+				a.lastUsedAt ? template(t.idDeviceLastUsed, { time: fmt.relative(new Date(a.lastUsedAt), new Date(now ?? initialNow)) }) : null
+			],
+			extra: /* @__PURE__ */ jsx(Disclosure, {
+				title: template(t.idConnectedScopes, { count: a.scopes.length }),
+				size: "sm",
+				className: ConnectedApps_module_default.scopes,
+				children: /* @__PURE__ */ jsx("ul", {
+					className: ConnectedApps_module_default.scopeList,
+					children: a.scopes.map((s) => /* @__PURE__ */ jsx("li", { children: s }, s))
+				})
+			}),
+			actions: onRevoke ? /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				size: "sm",
+				isPending: pending === a.id,
+				isDisabled: pending !== null && pending !== a.id,
+				onPress: async () => {
+					setPending(a.id);
+					try {
+						await onRevoke(a.id);
+					} finally {
+						setPending(null);
+					}
+				},
+				children: [t.idConnectedRevoke, /* @__PURE__ */ jsx(VisuallyHidden, { children: ` (${a.name})` })]
+			}) : null
+		}, a.id))
+	});
+}
+export { ConnectedApps };

package/dist/id/ConnectedApps/ConnectedApps.module.js

@@ -0,0 +1,7 @@
+import './ConnectedApps.css';
+// src/id/ConnectedApps/ConnectedApps.module.css
+var ConnectedApps_module_default = {
+	"scopes": "sti-ConnectedApps-scopes-1073c",
+	"scopeList": "sti-ConnectedApps-scopeList-6daae"
+};
+export { ConnectedApps_module_default as default };

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

@@ -0,0 +1,2 @@
+import { ConnectedApp, ConnectedApps, ConnectedAppsProps } from "./ConnectedApps.js";
+export { ConnectedApp, ConnectedApps, ConnectedAppsProps };

package/dist/id/ConsentScreen/ConsentScreen.css

@@ -0,0 +1,196 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ConsentScreen-root-cb068 {
+    gap: var(--sti-space-5);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 30rem;
+    padding: var(--sti-space-6);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-xl);
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    grid-template-columns: minmax(0, 1fr);
+    display: grid;
+    container: sti-consent / inline-size;
+  }
+
+  .sti-ConsentScreen-brand-a0266 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    display: inline-flex;
+  }
+
+  .sti-ConsentScreen-mark-29888 {
+    inline-size: var(--sti-space-6);
+    block-size: var(--sti-space-6);
+  }
+
+  .sti-ConsentScreen-app-fa394 {
+    justify-items: center;
+    gap: var(--sti-space-2);
+    text-align: center;
+    display: grid;
+  }
+
+  .sti-ConsentScreen-title-1dc84 {
+    font-size: var(--sti-font-size-xl);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-xl);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-ConsentScreen-host-79a70 {
+    justify-content: center;
+    align-items: center;
+    gap: var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    overflow-wrap: anywhere;
+    flex-wrap: wrap;
+    margin: 0;
+    display: inline-flex;
+  }
+
+  .sti-ConsentScreen-account-f0752 {
+    align-items: center;
+    gap: var(--sti-space-3);
+    padding: var(--sti-space-2) var(--sti-space-2) var(--sti-space-2) var(--sti-space-3);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-pill);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-ConsentScreen-accountText-55073 {
+    flex: 10rem;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-ConsentScreen-accountName-d3ce4 {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-ConsentScreen-accountEmail-36210 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .sti-ConsentScreen-scopes-03a6a {
+    gap: var(--sti-space-3);
+    display: grid;
+  }
+
+  .sti-ConsentScreen-scopesTitle-f8564 {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    margin: 0;
+  }
+
+  .sti-ConsentScreen-scopeList-3fd84 {
+    gap: var(--sti-space-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-ConsentScreen-scope-d47a1 {
+    gap: var(--sti-space-3);
+    grid-template-columns: auto minmax(0, 1fr);
+    display: grid;
+  }
+
+  .sti-ConsentScreen-scopeIcon-e7248 {
+    inline-size: var(--sti-space-6);
+    block-size: var(--sti-space-6);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent);
+    font-size: var(--sti-icon-sm);
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-ConsentScreen-scope-d47a1[data-sensitive] .sti-ConsentScreen-scopeIcon-e7248 {
+    background: var(--sti-bg-warning-subtle);
+    color: var(--sti-fg-warning);
+  }
+
+  .sti-ConsentScreen-scopeText-0fac0 {
+    gap: calc(var(--sti-space-1) / 2);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-ConsentScreen-scopeLabel-1e718 {
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+  }
+
+  .sti-ConsentScreen-scope-d47a1[data-sensitive] .sti-ConsentScreen-scopeLabel-1e718 {
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-ConsentScreen-scopeDesc-0c344 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-ConsentScreen-trust-a5133 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    margin: 0;
+  }
+
+  .sti-ConsentScreen-actions-5fbd0 {
+    gap: var(--sti-space-2);
+    grid-template-columns: 1fr 1fr;
+    display: grid;
+  }
+
+  .sti-ConsentScreen-srOnly-8f0c5 {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @container sti-consent (width <= 22rem) {
+    .sti-ConsentScreen-actions-5fbd0 {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .sti-ConsentScreen-account-f0752 {
+      border-radius: var(--sti-radius-lg);
+    }
+  }
+
+  @media (width <= 30rem) {
+    .sti-ConsentScreen-root-cb068 {
+      padding: var(--sti-space-5) var(--sti-space-4);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ConsentScreen-root-cb068, .sti-ConsentScreen-account-f0752 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/id/ConsentScreen/ConsentScreen.d.ts

@@ -0,0 +1,43 @@
+export interface ConsentScope {
+  id: string;
+  /** İzin, kullanıcının anlayacağı dille ("Takviminizi görme"). */
+  label: string;
+  description?: string;
+  /** Hassas izin (yazma, silme, gönderme): uyarı tonunda ve önce gösterilir. */
+  sensitive?: boolean;
+}
+export interface ConsentScreenProps {
+  app: {
+    name: string;
+    logo?: string;
+    /** Uygulamanın adresi; yalnız alan adı gösterilir (yanıltıcı ada karşı). */
+    url: string;
+    /** STI tarafından doğrulanmış uygulama. */
+    verified?: boolean;
+    privacyUrl?: string;
+    termsUrl?: string;
+  };
+  account: {
+    name: string;
+    email: string;
+    avatar?: string;
+  };
+  scopes: readonly ConsentScope[];
+  /** İzin verir (söz dönerse beklenir). */
+  onAllow: () => void | Promise<void>;
+  /** İzin vermez (geri döner). */
+  onDeny: () => void | Promise<void>;
+  /** "Başka bir hesap kullanın". */
+  onSwitchAccount?: () => void;
+  className?: string;
+  id?: string;
+}
+/** Yalnız http(s) adresinin alan adı; geçersizse `null` (bağlantı çizilmez). */
+export declare function safeHost(url: string): string | 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.
+ */
+export declare function ConsentScreen({ app, account, scopes, onAllow, onDeny, onSwitchAccount, className, id }: ConsentScreenProps): import("react").JSX.Element;