@stisocial/ui 0.2.1 → 0.3.0

package/dist/id/OrgInvitation/OrgInvitation.css

@@ -0,0 +1,87 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-OrgInvitation-root-b599b {
+    --sti-org-invitation-padding: var(--sti-space-6);
+    gap: var(--sti-space-5);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 36rem;
+    padding: var(--sti-org-invitation-padding);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  @media (width <= 48rem) {
+    .sti-OrgInvitation-root-b599b {
+      --sti-org-invitation-padding: var(--sti-space-4);
+    }
+  }
+
+  .sti-OrgInvitation-header-32ffc {
+    align-items: flex-start;
+    gap: var(--sti-space-4);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-OrgInvitation-titles-99e02 {
+    gap: var(--sti-space-3);
+    flex: 14rem;
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-OrgInvitation-title-98006 {
+    font-size: var(--sti-font-size-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-lg);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-OrgInvitation-meta-18882 {
+    gap: var(--sti-space-2) var(--sti-space-6);
+    flex-wrap: wrap;
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-OrgInvitation-metaItem-0bab5 {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-OrgInvitation-term-5319a {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    letter-spacing: var(--sti-tracking-label);
+  }
+
+  .sti-OrgInvitation-detail-5533c {
+    font-size: var(--sti-font-size-sm);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-OrgInvitation-actions-e7f77 {
+    gap: var(--sti-space-3);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  @media (width <= 30rem) {
+    .sti-OrgInvitation-actions-e7f77 {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+}

package/dist/id/OrgInvitation/OrgInvitation.d.ts

@@ -0,0 +1,31 @@
+export type OrgInvitationStatus = "pending" | "accepted" | "declined" | "expired";
+export interface OrgInvitationData {
+  /** Davet eden kuruluşun adı. */
+  orgName: string;
+  orgAvatarSrc?: string;
+  /** Daveti gönderen kişinin adı. */
+  inviterName: string;
+  /** Verilecek rolün görünen adı ("Yönetici", "Editör"). */
+  role: string;
+  /** Davetin son geçerlilik anı; geçmişse davet süresi dolmuş sayılır. */
+  expiresAt?: Date | number;
+}
+export interface OrgInvitationProps {
+  invitation: OrgInvitationData;
+  /** Durum (denetimli); verilmezse bileşen kendi durumunu tutar, başlangıç `pending`. */
+  status?: OrgInvitationStatus;
+  /** Kabul: söz bitene dek düğme bekler; reddedilirse hata gösterilir ve davet beklemede kalır. */
+  onAccept: () => void | Promise<void>;
+  onDecline: () => void | Promise<void>;
+  onStatusChange?: (status: OrgInvitationStatus) => void;
+  /** Başlık düzeyi (2–6). Varsayılan 2. */
+  titleLevel?: 2 | 3 | 4 | 5 | 6;
+  className?: string;
+  id?: string;
+}
+/**
+ * Kuruluş daveti: kimin hangi kuruluşa hangi rolle davet ettiğini, son geçerlilik tarihini ve
+ * kabul / ret eylemlerini gösterir. Sonuç (kabul, ret, süre dolumu, hata) metinle ve ekran
+ * okuyucuya duyurularak bildirilir; karar verildikten sonra eylemler kalkar.
+ */
+export declare function OrgInvitation({ invitation, status: controlled, onAccept, onDecline, onStatusChange, titleLevel, className, id }: OrgInvitationProps): import("react").JSX.Element;

package/dist/id/OrgInvitation/OrgInvitation.js

@@ -0,0 +1,130 @@
+"use client";
+import { useFormatter, 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 { Alert } from "../../components/Alert/Alert.js";
+import { Badge } from "../../components/Badge/Badge.js";
+import OrgInvitation_module_default from "./OrgInvitation.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+// src/id/OrgInvitation/OrgInvitation.tsx
+/**
+* Kuruluş daveti: kimin hangi kuruluşa hangi rolle davet ettiğini, son geçerlilik tarihini ve
+* kabul / ret eylemlerini gösterir. Sonuç (kabul, ret, süre dolumu, hata) metinle ve ekran
+* okuyucuya duyurularak bildirilir; karar verildikten sonra eylemler kalkar.
+*/
+function OrgInvitation({ invitation, status: controlled, onAccept, onDecline, onStatusChange, titleLevel = 2, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const titleId = useId();
+	const [inner, setInner] = useState("pending");
+	const [busy, setBusy] = useState(null);
+	const [failed, setFailed] = useState(false);
+	const base = controlled ?? inner;
+	const status = base === "pending" && invitation.expiresAt !== void 0 && +invitation.expiresAt < Date.now() ? "expired" : base;
+	const act = async (kind) => {
+		if (busy) return;
+		setBusy(kind);
+		setFailed(false);
+		try {
+			await (kind === "accept" ? onAccept() : onDecline());
+			const next = kind === "accept" ? "accepted" : "declined";
+			setInner(next);
+			onStatusChange?.(next);
+		} catch {
+			setFailed(true);
+		} finally {
+			setBusy(null);
+		}
+	};
+	const Heading = `h${titleLevel}`;
+	const result = status === "accepted" ? /* @__PURE__ */ jsx(Alert, {
+		tone: "success",
+		live: true,
+		children: template(t.idInviteAccepted, { org: invitation.orgName })
+	}) : status === "declined" ? /* @__PURE__ */ jsx(Alert, {
+		tone: "neutral",
+		live: true,
+		children: t.idInviteDeclined
+	}) : status === "expired" ? /* @__PURE__ */ jsx(Alert, {
+		tone: "warning",
+		live: true,
+		children: t.idInviteExpired
+	}) : null;
+	return /* @__PURE__ */ jsxs("article", {
+		id,
+		className: [OrgInvitation_module_default.root, className].filter(Boolean).join(" "),
+		"aria-labelledby": titleId,
+		"data-status": status,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: OrgInvitation_module_default.header,
+				children: [/* @__PURE__ */ jsx(Avatar, {
+					name: invitation.orgName,
+					src: invitation.orgAvatarSrc,
+					size: "xl",
+					shape: "square",
+					isDecorative: true
+				}), /* @__PURE__ */ jsxs("div", {
+					className: OrgInvitation_module_default.titles,
+					children: [/* @__PURE__ */ jsx(Heading, {
+						id: titleId,
+						className: OrgInvitation_module_default.title,
+						children: template(t.idInviteTitle, {
+							inviter: invitation.inviterName,
+							org: invitation.orgName
+						})
+					}), /* @__PURE__ */ jsxs("dl", {
+						className: OrgInvitation_module_default.meta,
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: OrgInvitation_module_default.metaItem,
+							children: [/* @__PURE__ */ jsx("dt", {
+								className: OrgInvitation_module_default.term,
+								children: t.idInviteRole
+							}), /* @__PURE__ */ jsx("dd", {
+								className: OrgInvitation_module_default.detail,
+								children: /* @__PURE__ */ jsx(Badge, {
+									tone: "accent",
+									size: "sm",
+									children: invitation.role
+								})
+							})]
+						}), invitation.expiresAt !== void 0 ? /* @__PURE__ */ jsxs("div", {
+							className: OrgInvitation_module_default.metaItem,
+							children: [/* @__PURE__ */ jsx("dt", {
+								className: OrgInvitation_module_default.term,
+								children: t.idInviteExpires
+							}), /* @__PURE__ */ jsx("dd", {
+								className: OrgInvitation_module_default.detail,
+								children: f.dateTime(invitation.expiresAt)
+							})]
+						}) : null]
+					})]
+				})]
+			}),
+			result,
+			status === "pending" ? /* @__PURE__ */ jsxs(Fragment, { children: [failed ? /* @__PURE__ */ jsx(Alert, {
+				tone: "danger",
+				live: true,
+				children: t.idInviteFailed
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: OrgInvitation_module_default.actions,
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					isPending: busy === "accept",
+					isDisabled: busy === "decline",
+					onPress: () => act("accept"),
+					children: t.idInviteAccept
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					isPending: busy === "decline",
+					isDisabled: busy === "accept",
+					onPress: () => act("decline"),
+					children: t.idInviteDecline
+				})]
+			})] }) : null
+		]
+	});
+}
+export { OrgInvitation };

package/dist/id/OrgInvitation/OrgInvitation.module.js

@@ -0,0 +1,14 @@
+import './OrgInvitation.css';
+// src/id/OrgInvitation/OrgInvitation.module.css
+var OrgInvitation_module_default = {
+	"root": "sti-OrgInvitation-root-b599b",
+	"header": "sti-OrgInvitation-header-32ffc",
+	"titles": "sti-OrgInvitation-titles-99e02",
+	"title": "sti-OrgInvitation-title-98006",
+	"meta": "sti-OrgInvitation-meta-18882",
+	"metaItem": "sti-OrgInvitation-metaItem-0bab5",
+	"term": "sti-OrgInvitation-term-5319a",
+	"detail": "sti-OrgInvitation-detail-5533c",
+	"actions": "sti-OrgInvitation-actions-e7f77"
+};
+export { OrgInvitation_module_default as default };

package/dist/id/OrgSwitcher/OrgSwitcher.js

@@ -1,16 +1,16 @@
 "use client";
 import { useLocale, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
+import { Avatar, avatarColorOf } from "../../components/Avatar/Avatar.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.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 { ChevronsUpDownIcon } from "../../icons/generated/ChevronsUpDownIcon.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";

package/dist/id/PasskeyButton/PasskeyButton.css

@@ -0,0 +1,34 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-PasskeyButton-root-36fa6 {
+    justify-items: start;
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-PasskeyButton-root-36fa6[data-full-width] {
+    justify-items: stretch;
+    inline-size: 100%;
+  }
+
+  .sti-PasskeyButton-note-ae910 {
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-PasskeyButton-note-ae910:empty {
+    display: none;
+  }
+
+  .sti-PasskeyButton-note-ae910[data-tone="muted"] {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-PasskeyButton-note-ae910[data-tone="danger"] {
+    color: var(--sti-fg-danger-strong);
+  }
+}

package/dist/id/PasskeyButton/PasskeyButton.d.ts

@@ -0,0 +1,25 @@
+export interface PasskeyButtonProps {
+  /** `signin`: geçiş anahtarıyla oturum açar; `register`: yeni anahtar ekler. */
+  mode?: "signin" | "register";
+  /**
+   * WebAuthn işlemini başlatır (sunucudan seçenek alma, `navigator.credentials.get/create`,
+   * sonucu sunucuya gönderme). Söz bitene dek düğme bekler; reddedilirse hata metni gösterilir.
+   */
+  onPress: () => void | Promise<void>;
+  /** Desteği dışarıdan bildirir; verilmezse tarayıcıdan algılanır. */
+  isSupported?: boolean;
+  /** Düğme metni; varsayılan kipe göre. */
+  label?: string;
+  variant?: "primary" | "secondary" | "ghost";
+  size?: "sm" | "md" | "lg";
+  fullWidth?: boolean;
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Geçiş anahtarı düğmesi: işlemi başlatır, cihaz doğrulaması beklenirken bekleme durumunu ve
+ * "Cihazınızın doğrulama isteği bekleniyor." duyurusunu verir; iptal ya da zaman aşımında hatayı
+ * yazar. Tarayıcı geçiş anahtarı desteklemiyorsa düğme devre dışıdır ve nedeni yazılıdır.
+ */
+export declare function PasskeyButton({ mode, onPress, isSupported, label, variant, size, fullWidth, isDisabled, className, id }: PasskeyButtonProps): import("react").JSX.Element;

package/dist/id/PasskeyButton/PasskeyButton.js

@@ -0,0 +1,66 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { Button } from "../../components/Button/Button.js";
+import { PasskeyIcon } from "../../icons/generated/PasskeyIcon.js";
+import PasskeyButton_module_default from "./PasskeyButton.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+// src/id/PasskeyButton/PasskeyButton.tsx
+/**
+* Geçiş anahtarı düğmesi: işlemi başlatır, cihaz doğrulaması beklenirken bekleme durumunu ve
+* "Cihazınızın doğrulama isteği bekleniyor." duyurusunu verir; iptal ya da zaman aşımında hatayı
+* yazar. Tarayıcı geçiş anahtarı desteklemiyorsa düğme devre dışıdır ve nedeni yazılıdır.
+*/
+function PasskeyButton({ mode = "signin", onPress, isSupported, label, variant = "secondary", size = "md", fullWidth, isDisabled, className, id }) {
+	const t = useMessages();
+	const noteId = useId();
+	const [detected, setDetected] = useState(void 0);
+	const [pending, setPending] = useState(false);
+	const [failed, setFailed] = useState(false);
+	const mounted = useRef(true);
+	useEffect(() => {
+		mounted.current = true;
+		setDetected(typeof window !== "undefined" && "PublicKeyCredential" in window);
+		return () => {
+			mounted.current = false;
+		};
+	}, []);
+	const supported = isSupported ?? detected ?? true;
+	const text = label ?? (mode === "register" ? t.idPasskeyRegister : t.idPasskeySignIn);
+	const press = async () => {
+		if (pending) return;
+		setPending(true);
+		setFailed(false);
+		try {
+			await onPress();
+		} catch {
+			if (mounted.current) setFailed(true);
+		} finally {
+			if (mounted.current) setPending(false);
+		}
+	};
+	const note = !supported ? t.idPasskeyUnsupported : pending ? t.idPasskeyWaiting : failed ? t.idPasskeyFailed : "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: [PasskeyButton_module_default.root, className].filter(Boolean).join(" "),
+		"data-full-width": fullWidth ? "" : void 0,
+		children: [/* @__PURE__ */ jsx(Button, {
+			id,
+			variant,
+			size,
+			fullWidth,
+			iconStart: /* @__PURE__ */ jsx(PasskeyIcon, {}),
+			isDisabled: isDisabled || !supported,
+			isPending: pending,
+			onPress: press,
+			"aria-describedby": note ? noteId : void 0,
+			children: text
+		}), /* @__PURE__ */ jsx("p", {
+			id: noteId,
+			className: PasskeyButton_module_default.note,
+			"data-tone": failed ? "danger" : "muted",
+			role: !supported ? void 0 : "status",
+			children: note
+		})]
+	});
+}
+export { PasskeyButton };

package/dist/id/PasskeyButton/PasskeyButton.module.js

@@ -0,0 +1,7 @@
+import './PasskeyButton.css';
+// src/id/PasskeyButton/PasskeyButton.module.css
+var PasskeyButton_module_default = {
+	"root": "sti-PasskeyButton-root-36fa6",
+	"note": "sti-PasskeyButton-note-ae910"
+};
+export { PasskeyButton_module_default as default };

package/dist/id/ProfileCard/ProfileCard.css

@@ -0,0 +1,119 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ProfileCard-root-047ba {
+    box-sizing: border-box;
+    inline-size: 100%;
+    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);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    container: sti-profile / inline-size;
+  }
+
+  .sti-ProfileCard-inner-537df {
+    align-items: center;
+    gap: var(--sti-space-5);
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    display: grid;
+  }
+
+  .sti-ProfileCard-photo-4ee9f {
+    position: relative;
+  }
+
+  .sti-ProfileCard-photoButton-9288c {
+    position: absolute;
+    inset-block-end: -4px;
+    inset-inline-end: -4px;
+  }
+
+  .sti-ProfileCard-main-7db7a {
+    gap: var(--sti-space-1);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-ProfileCard-name-ae906 {
+    font-family: var(--sti-font-display);
+    font-size: var(--sti-font-size-xl);
+    font-weight: var(--sti-font-weight-bold);
+    line-height: var(--sti-line-height-xl);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-ProfileCard-role-61953 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    margin: 0;
+  }
+
+  .sti-ProfileCard-contacts-23d16 {
+    gap: var(--sti-space-1);
+    margin: var(--sti-space-2) 0 0;
+    display: grid;
+  }
+
+  .sti-ProfileCard-contact-d98b4 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-ProfileCard-contactLabel-489dd {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-sm);
+    display: inline-flex;
+  }
+
+  .sti-ProfileCard-contactValue-7db2e {
+    align-items: center;
+    gap: var(--sti-space-2);
+    min-inline-size: 0;
+    font-size: var(--sti-font-size-sm);
+    flex-wrap: wrap;
+    margin: 0;
+    display: flex;
+  }
+
+  .sti-ProfileCard-value-996a7 {
+    overflow-wrap: anywhere;
+  }
+
+  .sti-ProfileCard-actions-26b36 {
+    gap: var(--sti-space-2);
+    flex-wrap: wrap;
+    align-self: start;
+    display: flex;
+  }
+
+  @container sti-profile (width <= 34rem) {
+    .sti-ProfileCard-inner-537df {
+      text-align: center;
+      grid-template-columns: minmax(0, 1fr);
+      justify-items: center;
+    }
+
+    .sti-ProfileCard-contact-d98b4, .sti-ProfileCard-contactValue-7db2e {
+      justify-content: center;
+    }
+
+    .sti-ProfileCard-actions-26b36 {
+      align-self: auto;
+    }
+  }
+
+  .sti-ProfileCard-srOnly-f834c {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+}

package/dist/id/ProfileCard/ProfileCard.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+export interface ProfileCardProps {
+  name: string;
+  email: string;
+  avatarSrc?: string;
+  /** Unvan ("Sosyal medya uzmanı"). */
+  title?: string;
+  /** Kuruluş ("Atlas Gıda A.Ş."). */
+  organization?: string;
+  phone?: string;
+  emailVerified?: boolean;
+  phoneVerified?: boolean;
+  /** "Profili düzenleyin". */
+  onEdit?: () => void;
+  /** Fotoğrafı değiştirme (verilirse fotoğrafın üstünde kamera düğmesi). */
+  onChangePhoto?: () => void;
+  /** Ek eylemler (sağ altta). */
+  actions?: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * Profil kartı (STI ID hesap sayfasının başı): büyük fotoğraf (değiştirme düğmesiyle), ad,
+ * unvan ve kuruluş, e-posta ve telefon doğrulanmış/doğrulanmamış rozetleriyle, düzenleme.
+ * Doğrulanmamış iletişim bilgisi uyarı rozetiyle işaretlenir (yalnız renk değil metin de).
+ */
+export declare function ProfileCard({ name, email, avatarSrc, title, organization, phone, emailVerified, phoneVerified, onEdit, onChangePhoto, actions, className, id }: ProfileCardProps): import("react").JSX.Element;

package/dist/id/ProfileCard/ProfileCard.js

@@ -0,0 +1,111 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { Avatar } from "../../components/Avatar/Avatar.js";
+import { Button } from "../../components/Button/Button.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { Badge } from "../../components/Badge/Badge.js";
+import { MailIcon } from "../../icons/generated/MailIcon.js";
+import { CameraIcon } from "../../icons/generated/CameraIcon.js";
+import { EditIcon } from "../../icons/generated/EditIcon.js";
+import { PhoneIcon } from "../../icons/generated/PhoneIcon.js";
+import ProfileCard_module_default from "./ProfileCard.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/id/ProfileCard/ProfileCard.tsx
+/**
+* Profil kartı (STI ID hesap sayfasının başı): büyük fotoğraf (değiştirme düğmesiyle), ad,
+* unvan ve kuruluş, e-posta ve telefon doğrulanmış/doğrulanmamış rozetleriyle, düzenleme.
+* Doğrulanmamış iletişim bilgisi uyarı rozetiyle işaretlenir (yalnız renk değil metin de).
+*/
+function ProfileCard({ name, email, avatarSrc, title, organization, phone, emailVerified, phoneVerified, onEdit, onChangePhoto, actions, className, id }) {
+	const t = useMessages();
+	const verified = (v) => v === void 0 ? null : v ? /* @__PURE__ */ jsx(Badge, {
+		tone: "success",
+		children: t.idProfileVerified
+	}) : /* @__PURE__ */ jsx(Badge, {
+		tone: "warning",
+		children: t.idProfileNotVerified
+	});
+	return /* @__PURE__ */ jsx("section", {
+		id,
+		className: [ProfileCard_module_default.root, className].filter(Boolean).join(" "),
+		"aria-label": name,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: ProfileCard_module_default.inner,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: ProfileCard_module_default.photo,
+					children: [/* @__PURE__ */ jsx(Avatar, {
+						name,
+						src: avatarSrc,
+						size: "xl"
+					}), onChangePhoto ? /* @__PURE__ */ jsx(IconButton, {
+						size: "sm",
+						variant: "secondary",
+						label: t.idProfileChangePhoto,
+						icon: /* @__PURE__ */ jsx(CameraIcon, {}),
+						onPress: onChangePhoto,
+						className: ProfileCard_module_default.photoButton
+					}) : null]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: ProfileCard_module_default.main,
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							className: ProfileCard_module_default.name,
+							children: name
+						}),
+						title || organization ? /* @__PURE__ */ jsx("p", {
+							className: ProfileCard_module_default.role,
+							children: [title, organization].filter(Boolean).join(" · ")
+						}) : null,
+						/* @__PURE__ */ jsxs("dl", {
+							className: ProfileCard_module_default.contacts,
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: ProfileCard_module_default.contact,
+								children: [/* @__PURE__ */ jsxs("dt", {
+									className: ProfileCard_module_default.contactLabel,
+									children: [/* @__PURE__ */ jsx(MailIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+										className: ProfileCard_module_default.srOnly,
+										children: t.idProfileEmail
+									})]
+								}), /* @__PURE__ */ jsxs("dd", {
+									className: ProfileCard_module_default.contactValue,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: ProfileCard_module_default.value,
+										children: email
+									}), verified(emailVerified)]
+								})]
+							}), phone ? /* @__PURE__ */ jsxs("div", {
+								className: ProfileCard_module_default.contact,
+								children: [/* @__PURE__ */ jsxs("dt", {
+									className: ProfileCard_module_default.contactLabel,
+									children: [/* @__PURE__ */ jsx(PhoneIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+										className: ProfileCard_module_default.srOnly,
+										children: t.idProfilePhone
+									})]
+								}), /* @__PURE__ */ jsxs("dd", {
+									className: ProfileCard_module_default.contactValue,
+									children: [/* @__PURE__ */ jsx("span", {
+										className: ProfileCard_module_default.value,
+										children: phone
+									}), verified(phoneVerified)]
+								})]
+							}) : null]
+						})
+					]
+				}),
+				onEdit || actions ? /* @__PURE__ */ jsxs("div", {
+					className: ProfileCard_module_default.actions,
+					children: [actions, onEdit ? /* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						size: "sm",
+						iconStart: /* @__PURE__ */ jsx(EditIcon, {}),
+						onPress: onEdit,
+						children: t.idProfileEdit
+					}) : null]
+				}) : null
+			]
+		})
+	});
+}
+export { ProfileCard };