@stisocial/ui 0.1.0 → 0.2.1

package/dist/id/OrgSwitcher/OrgSwitcher.d.ts

@@ -0,0 +1,62 @@
+import { Placement } from "../../components/_internal/overlay/FloatingCard.js";
+import "../../components/Popover/Popover.js";
+export interface OrgSwitcherOrg {
+  /** Kalıcı anahtar. */
+  id: string;
+  name: string;
+  /** `company`: kendi firmanız, `client`: müşteri. Birden çok tür varsa gruplanır. */
+  kind: "company" | "client";
+  /** Adın altındaki kısa bilgi (rol, plan). */
+  description?: string;
+  avatarSrc?: string;
+}
+export interface OrgSwitcherPanelProps {
+  orgs: readonly OrgSwitcherOrg[];
+  /** Seçili kuruluşun anahtarı. */
+  value?: string | null;
+  /** Bir kuruluş seçildiğinde. */
+  onSelect?: (id: string) => void;
+  /** Verilirse listenin altında "Yeni kuruluş oluşturun" satırı çıkar. */
+  onCreate?: () => void;
+  /** Verilirse "Yeni kuruluş oluşturun" bağlantıdır. */
+  createHref?: string;
+  /** Bu sayıdan çok kuruluş varsa arama alanı gösterilir. Varsayılan 7. */
+  searchThreshold?: number;
+  /** Açılınca odak arama alanına ya da ilk seçeneğe gider (açılır kutuda açık). */
+  autoFocus?: boolean;
+  className?: string;
+  id?: string;
+}
+export interface OrgSwitcherProps {
+  orgs: readonly OrgSwitcherOrg[];
+  /** Seçili kuruluşun anahtarı (denetimli). */
+  value?: string | null;
+  defaultValue?: string | null;
+  onChange?: (id: string) => void;
+  /** Verilirse listenin altında "Yeni kuruluş oluşturun" satırı çıkar. */
+  onCreate?: () => void;
+  /** Verilirse "Yeni kuruluş oluşturun" bağlantıdır. */
+  createHref?: string;
+  /** Bu sayıdan çok kuruluş varsa arama alanı gösterilir. Varsayılan 7. */
+  searchThreshold?: number;
+  size?: "sm" | "md" | "lg";
+  placement?: Placement;
+  isDisabled?: boolean;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * Kuruluş listesi: isteğe bağlı arama alanı, türe göre gruplu tek seçimli liste (APG Listbox) ve
+ * "Yeni kuruluş oluşturun" satırı. `OrgSwitcher` bunu açılır kutuda çizer; uygulama yan menüde ya da
+ * kuruluş seçim sayfasında doğrudan kullanabilir.
+ */
+export declare function OrgSwitcherPanel({ orgs, value, onSelect, onCreate, createHref, searchThreshold, autoFocus, className, id }: OrgSwitcherPanelProps): import("react").JSX.Element;
+/**
+ * Kuruluş değiştirici: geçerli firma ya da müşteriyi gösteren düğme ve altında kuruluş listesi
+ * (`OrgSwitcherPanel`). APG Listbox (tek seçim) açılır kutuda: oklar gezer, Home ve End uçlara
+ * gider, harfle arama yapılır, Enter seçer ve kapatır, Escape vazgeçer.
+ */
+export declare function OrgSwitcher({ orgs, value, defaultValue, onChange, onCreate, createHref, searchThreshold, size, placement, isDisabled, isOpen, defaultOpen, onOpenChange, className, id }: OrgSwitcherProps): import("react").JSX.Element;

package/dist/id/OrgSwitcher/OrgSwitcher.js

@@ -0,0 +1,189 @@
+"use client";
+import { useLocale, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import listbox_module_default from "../../components/_internal/listbox/listbox.module.js";
+import { renderOptions } from "../../components/_internal/listbox/options.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { Avatar, avatarColorOf } from "../../components/Avatar/Avatar.js";
+import { SearchField as SearchField$1 } from "../../components/SearchField/SearchField.js";
+import { Popover as Popover$1 } from "../../components/Popover/Popover.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import { BuildingIcon } from "../../icons/generated/BuildingIcon.js";
+import { BriefcaseIcon } from "../../icons/generated/BriefcaseIcon.js";
+import { ChevronsUpDownIcon } from "../../icons/generated/ChevronsUpDownIcon.js";
+import OrgSwitcher_module_default from "./OrgSwitcher.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Button, Link, ListBox } from "react-aria-components";
+// src/id/OrgSwitcher/OrgSwitcher.tsx
+const fold = (s, locale) => s.toLocaleLowerCase(locale);
+/**
+* Kuruluş karosu (süs): fotoğraf varsa fotoğraf, yoksa türün ikonu (firma bina, müşteri çanta)
+* kuruluşa göre kalıcı renkli karoda. Harf yazılmaz: seçeneğin adı görünür metinle çelişmez.
+*/
+function OrgMark({ org, size = "sm" }) {
+	if (org.avatarSrc) return /* @__PURE__ */ jsx(Avatar, {
+		name: org.name,
+		src: org.avatarSrc,
+		size: size === "md" ? "sm" : "xs",
+		shape: "square",
+		isDecorative: true
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: OrgSwitcher_module_default.mark,
+		"data-size": size,
+		"data-color": avatarColorOf(org.id),
+		"aria-hidden": "true",
+		children: org.kind === "company" ? /* @__PURE__ */ jsx(BuildingIcon, {}) : /* @__PURE__ */ jsx(BriefcaseIcon, {})
+	});
+}
+/**
+* Kuruluş listesi: isteğe bağlı arama alanı, türe göre gruplu tek seçimli liste (APG Listbox) ve
+* "Yeni kuruluş oluşturun" satırı. `OrgSwitcher` bunu açılır kutuda çizer; uygulama yan menüde ya da
+* kuruluş seçim sayfasında doğrudan kullanabilir.
+*/
+function OrgSwitcherPanel({ orgs, value = null, onSelect, onCreate, createHref, searchThreshold = 7, autoFocus = false, className, id }) {
+	const t = useMessages();
+	const locale = useLocale();
+	const [query, setQuery] = useState("");
+	const showSearch = orgs.length > searchThreshold;
+	const q = fold(query.trim(), locale);
+	const items = useMemo(() => {
+		const visible = orgs.filter((o) => !q || fold(o.name, locale).includes(q));
+		const option = (o) => ({
+			id: o.id,
+			label: o.name,
+			description: o.description,
+			icon: /* @__PURE__ */ jsx(OrgMark, { org: o })
+		});
+		const companies = visible.filter((o) => o.kind === "company");
+		const clients = visible.filter((o) => o.kind === "client");
+		if (companies.length === 0 || clients.length === 0) return visible.map(option);
+		return [{
+			id: "company",
+			title: t.idOrgKindCompany,
+			options: companies.map(option)
+		}, {
+			id: "client",
+			title: t.idOrgKindClient,
+			options: clients.map(option)
+		}];
+	}, [
+		orgs,
+		q,
+		locale,
+		t.idOrgKindCompany,
+		t.idOrgKindClient
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [OrgSwitcher_module_default.body, className].filter(Boolean).join(" "),
+		children: [
+			showSearch ? /* @__PURE__ */ jsx(SearchField$1, {
+				label: t.idOrgSearch,
+				hideLabel: true,
+				placeholder: t.idOrgSearch,
+				size: "sm",
+				value: query,
+				onChange: setQuery,
+				autoFocus
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: OrgSwitcher_module_default.scroll,
+				children: /* @__PURE__ */ jsx(ListBox, {
+					"aria-label": t.idOrgList,
+					className: listbox_module_default.list,
+					selectionMode: "single",
+					disallowEmptySelection: true,
+					selectedKeys: value ? [value] : [],
+					autoFocus: autoFocus && !showSearch ? "first" : void 0,
+					onSelectionChange: (keys) => {
+						const key = keys === "all" ? void 0 : [...keys][0];
+						if (key === void 0) return;
+						setQuery("");
+						onSelect?.(String(key));
+					},
+					renderEmptyState: () => /* @__PURE__ */ jsx("p", {
+						className: OrgSwitcher_module_default.empty,
+						children: template(t.idOrgNoMatch, { query })
+					}),
+					children: renderOptions(items)
+				})
+			}),
+			onCreate || createHref ? /* @__PURE__ */ jsx("div", {
+				className: OrgSwitcher_module_default.create,
+				children: createHref ? /* @__PURE__ */ jsxs(Link, {
+					className: OrgSwitcher_module_default.createRow,
+					href: createHref,
+					onPress: onCreate,
+					children: [/* @__PURE__ */ jsx(PlusIcon, {
+						className: OrgSwitcher_module_default.createIcon,
+						"aria-hidden": "true"
+					}), t.idOrgCreate]
+				}) : /* @__PURE__ */ jsxs(Button, {
+					className: OrgSwitcher_module_default.createRow,
+					onPress: onCreate,
+					children: [/* @__PURE__ */ jsx(PlusIcon, {
+						className: OrgSwitcher_module_default.createIcon,
+						"aria-hidden": "true"
+					}), t.idOrgCreate]
+				})
+			}) : null
+		]
+	});
+}
+/**
+* Kuruluş değiştirici: geçerli firma ya da müşteriyi gösteren düğme ve altında kuruluş listesi
+* (`OrgSwitcherPanel`). APG Listbox (tek seçim) açılır kutuda: oklar gezer, Home ve End uçlara
+* gider, harfle arama yapılır, Enter seçer ve kapatır, Escape vazgeçer.
+*/
+function OrgSwitcher({ orgs, value, defaultValue = null, onChange, onCreate, createHref, searchThreshold = 7, size = "md", placement = "bottom start", isDisabled, isOpen, defaultOpen, onOpenChange, className, id }) {
+	const t = useMessages();
+	const [inner, setInner] = useState(defaultValue);
+	const current = value === void 0 ? inner : value;
+	const selected = orgs.find((o) => o.id === current);
+	return /* @__PURE__ */ jsx(Popover$1, {
+		placement,
+		"aria-label": t.idOrgSwitcher,
+		size: "md",
+		className: OrgSwitcher_module_default.card,
+		isOpen,
+		defaultOpen,
+		onOpenChange,
+		trigger: /* @__PURE__ */ jsxs(Button, {
+			id,
+			className: [OrgSwitcher_module_default.trigger, className].filter(Boolean).join(" "),
+			"data-size": size,
+			isDisabled,
+			children: [
+				selected ? /* @__PURE__ */ jsx(OrgMark, { org: selected }) : null,
+				selected ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [t.idOrgSwitcherCurrent, ": "] }) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: OrgSwitcher_module_default.name,
+					children: selected?.name ?? t.idOrgSwitcherChoose
+				}),
+				/* @__PURE__ */ jsx(ChevronsUpDownIcon, {
+					className: OrgSwitcher_module_default.chevron,
+					"aria-hidden": "true"
+				})
+			]
+		}),
+		children: (close) => /* @__PURE__ */ jsx(OrgSwitcherPanel, {
+			orgs,
+			value: current,
+			searchThreshold,
+			autoFocus: true,
+			createHref,
+			onCreate: onCreate ? () => {
+				close();
+				onCreate();
+			} : void 0,
+			onSelect: (key) => {
+				setInner(key);
+				onChange?.(key);
+				close();
+			}
+		})
+	});
+}
+export { OrgSwitcher, OrgSwitcherPanel };

package/dist/id/OrgSwitcher/OrgSwitcher.module.js

@@ -0,0 +1,16 @@
+import './OrgSwitcher.css';
+// src/id/OrgSwitcher/OrgSwitcher.module.css
+var OrgSwitcher_module_default = {
+	"trigger": "sti-OrgSwitcher-trigger-0f64d",
+	"name": "sti-OrgSwitcher-name-c202c",
+	"mark": "sti-OrgSwitcher-mark-a5082",
+	"chevron": "sti-OrgSwitcher-chevron-d6eea",
+	"card": "sti-OrgSwitcher-card-af900",
+	"body": "sti-OrgSwitcher-body-dd131",
+	"scroll": "sti-OrgSwitcher-scroll-045d7",
+	"create": "sti-OrgSwitcher-create-8b4bd",
+	"createRow": "sti-OrgSwitcher-createRow-c2255",
+	"createIcon": "sti-OrgSwitcher-createIcon-a21cc",
+	"empty": "sti-OrgSwitcher-empty-0c82b"
+};
+export { OrgSwitcher_module_default as default };

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

@@ -0,0 +1,2 @@
+import { OrgSwitcher, OrgSwitcherOrg, OrgSwitcherPanel, OrgSwitcherPanelProps, OrgSwitcherProps } from "./OrgSwitcher.js";
+export { OrgSwitcher, OrgSwitcherOrg, OrgSwitcherPanel, OrgSwitcherPanelProps, OrgSwitcherProps };

package/dist/id/PermissionGate/PermissionGate.css

@@ -0,0 +1,68 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PermissionGate-root-5f706 {
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    padding: var(--sti-space-5);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: flex;
+  }
+
+  .sti-PermissionGate-icon-c225d {
+    inline-size: var(--sti-control-h-md);
+    block-size: var(--sti-control-h-md);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-warning-subtle);
+    color: var(--sti-fg-warning-strong);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-PermissionGate-text-3358e {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    padding-block-start: var(--sti-space-2);
+    display: grid;
+  }
+
+  .sti-PermissionGate-action-69333 {
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    margin-block-start: var(--sti-space-2);
+    display: flex;
+  }
+
+  .sti-PermissionGate-title-9e7ef {
+    font-size: var(--sti-font-size-md);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-md);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-PermissionGate-description-3002e {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-PermissionGate-root-5f706 {
+      border-color: canvastext;
+    }
+
+    .sti-PermissionGate-icon-c225d {
+      border: var(--sti-border-width) solid CanvasText;
+    }
+  }
+}

package/dist/id/PermissionGate/PermissionGate.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+export type PermissionMatch = "all" | "any";
+/**
+ * Gerekli izinler sahip olunanlarla karşılanıyor mu. `match="all"` (varsayılan) hepsini, `"any"`
+ * herhangi birini ister. Gerekli izin verilmemişse (boş liste) erişim serbesttir.
+ */
+export declare function hasPermission(granted: readonly string[], required: string | readonly string[], match?: PermissionMatch): boolean;
+export interface PermissionGateProps {
+  /** Oturumdaki kullanıcının izinleri (`"proje:oku"`, `"proje:*"`, `"*"`). */
+  granted: readonly string[];
+  /** Gerekli izin ya da izinler. */
+  require: string | readonly string[];
+  /** `all`: hepsi gerekir (varsayılan); `any`: biri yeter. */
+  match?: PermissionMatch;
+  /** İzin yoksa çizilecek içerik; `denied` metni de yoksa hiçbir şey çizilmez. */
+  fallback?: ReactNode;
+  /** İzin yoksa gösterilecek açıklama ("Bu bölümü görüntüleme yetkiniz bulunmuyor."). */
+  denied?: ReactNode;
+  /** `denied` ile birlikte kısa başlık ("Erişim yetkisi gerekli"). */
+  deniedTitle?: ReactNode;
+  /** Yetki açıklamasının altındaki eylem ("Yetki isteyin" düğmesi ya da bağlantısı). */
+  deniedAction?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * İzin kapısı: kullanıcı gerekli izne sahipse içeriği çizer, değilse yedek içeriği ya da yetki
+ * açıklamasını. Yalnız GÖRÜNÜMÜ düzenler; yetki denetimi her zaman sunucuda yeniden yapılmalıdır.
+ * Sunucu bileşenidir.
+ */
+export declare function PermissionGate({ granted, require, match, fallback, denied, deniedTitle, deniedAction, children, className, id }: PermissionGateProps): import("react").JSX.Element | null;

package/dist/id/PermissionGate/PermissionGate.js

@@ -0,0 +1,58 @@
+import { LockIcon } from "../../icons/generated/LockIcon.js";
+import PermissionGate_module_default from "./PermissionGate.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/id/PermissionGate/PermissionGate.tsx
+/** Verilen izin, sahip olunan izinlerden biriyle eşleşir mi (`"org:*"` ve `"*"` joker kabul edilir). */
+function grants(granted, permission) {
+	return granted.some((g) => {
+		if (g === "*" || g === permission) return true;
+		return g.endsWith(":*") && permission.startsWith(g.slice(0, -1));
+	});
+}
+/**
+* Gerekli izinler sahip olunanlarla karşılanıyor mu. `match="all"` (varsayılan) hepsini, `"any"`
+* herhangi birini ister. Gerekli izin verilmemişse (boş liste) erişim serbesttir.
+*/
+function hasPermission(granted, required, match = "all") {
+	const list = typeof required === "string" ? [required] : required;
+	if (list.length === 0) return true;
+	return match === "any" ? list.some((p) => grants(granted, p)) : list.every((p) => grants(granted, p));
+}
+/**
+* İzin kapısı: kullanıcı gerekli izne sahipse içeriği çizer, değilse yedek içeriği ya da yetki
+* açıklamasını. Yalnız GÖRÜNÜMÜ düzenler; yetki denetimi her zaman sunucuda yeniden yapılmalıdır.
+* Sunucu bileşenidir.
+*/
+function PermissionGate({ granted, require, match = "all", fallback, denied, deniedTitle, deniedAction, children, className, id }) {
+	if (hasPermission(granted, require, match)) return /* @__PURE__ */ jsx(Fragment, { children });
+	if (fallback !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	if (!denied && !deniedTitle) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [PermissionGate_module_default.root, className].filter(Boolean).join(" "),
+		role: "note",
+		"data-denied": "",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: PermissionGate_module_default.icon,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(LockIcon, {})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: PermissionGate_module_default.text,
+			children: [
+				deniedTitle ? /* @__PURE__ */ jsx("p", {
+					className: PermissionGate_module_default.title,
+					children: deniedTitle
+				}) : null,
+				denied ? /* @__PURE__ */ jsx("p", {
+					className: PermissionGate_module_default.description,
+					children: denied
+				}) : null,
+				deniedAction ? /* @__PURE__ */ jsx("div", {
+					className: PermissionGate_module_default.action,
+					children: deniedAction
+				}) : null
+			]
+		})]
+	});
+}
+export { PermissionGate, hasPermission };

package/dist/id/PermissionGate/PermissionGate.module.js

@@ -0,0 +1,11 @@
+import './PermissionGate.css';
+// src/id/PermissionGate/PermissionGate.module.css
+var PermissionGate_module_default = {
+	"root": "sti-PermissionGate-root-5f706",
+	"icon": "sti-PermissionGate-icon-c225d",
+	"text": "sti-PermissionGate-text-3358e",
+	"action": "sti-PermissionGate-action-69333",
+	"title": "sti-PermissionGate-title-9e7ef",
+	"description": "sti-PermissionGate-description-3002e"
+};
+export { PermissionGate_module_default as default };

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

@@ -0,0 +1,2 @@
+import { PermissionGate, PermissionGateProps, PermissionMatch, hasPermission } from "./PermissionGate.js";
+export { PermissionGate, PermissionGateProps, PermissionMatch, hasPermission };

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

@@ -0,0 +1,29 @@
+export interface SignInButtonProps {
+  /** Verilirse bağlantı olarak çizilir (OAuth başlangıç adresi). */
+  href?: string;
+  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: 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" 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;