@stisocial/ui 0.2.0 → 0.3.0

package/dist/id/OrgSwitcher/OrgSwitcher.css

@@ -1,9 +1,10 @@
 @layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
 @layer sti.components {
-  .sti-OrgSwitcher-trigger-8cf9a {
+  .sti-OrgSwitcher-trigger-0f64d {
     --sti-org-switcher-h: var(--sti-control-h-md);
     --sti-org-switcher-bg: transparent;
     --sti-org-switcher-border: var(--sti-border-control);
+    align-self: center;
     align-items: center;
     gap: var(--sti-space-2);
     box-sizing: border-box;
@@ -21,73 +22,180 @@
     cursor: pointer;
     transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
       border-color var(--sti-duration-fast) var(--sti-ease-snap);
+    flex: none;
     display: inline-flex;
   }
 
-  .sti-OrgSwitcher-trigger-8cf9a[data-size="sm"] {
+  .sti-OrgSwitcher-trigger-0f64d[data-size="sm"] {
     --sti-org-switcher-h: var(--sti-control-h-sm);
   }
 
-  .sti-OrgSwitcher-trigger-8cf9a[data-size="lg"] {
+  .sti-OrgSwitcher-trigger-0f64d[data-size="lg"] {
     --sti-org-switcher-h: var(--sti-control-h-lg);
     font-size: var(--sti-font-size-md);
   }
 
   @media (pointer: coarse) {
-    .sti-OrgSwitcher-trigger-8cf9a {
+    .sti-OrgSwitcher-trigger-0f64d {
       min-block-size: 2.75rem;
     }
   }
 
   @media (hover: hover) {
-    .sti-OrgSwitcher-trigger-8cf9a[data-hovered]:not([data-disabled]) {
+    .sti-OrgSwitcher-trigger-0f64d[data-hovered]:not([data-disabled]) {
       --sti-org-switcher-border: var(--sti-border-accent);
       --sti-org-switcher-bg: var(--sti-bg-surface-hover);
     }
   }
 
-  .sti-OrgSwitcher-trigger-8cf9a[data-pressed] {
+  .sti-OrgSwitcher-trigger-0f64d[data-pressed] {
     --sti-org-switcher-bg: var(--sti-bg-surface-active);
   }
 
-  .sti-OrgSwitcher-trigger-8cf9a[data-focus-visible] {
+  .sti-OrgSwitcher-trigger-0f64d[data-focus-visible] {
     outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
     outline-offset: var(--sti-focus-ring-offset);
   }
 
-  .sti-OrgSwitcher-trigger-8cf9a[data-disabled] {
+  .sti-OrgSwitcher-trigger-0f64d[data-disabled] {
     opacity: var(--sti-opacity-disabled);
     cursor: not-allowed;
   }
 
-  .sti-OrgSwitcher-name-0b2eb {
+  .sti-OrgSwitcher-name-c202c {
     text-overflow: ellipsis;
     white-space: nowrap;
     min-inline-size: 0;
     overflow: hidden;
   }
 
-  .sti-OrgSwitcher-chevron-e70b6 {
+  .sti-OrgSwitcher-mark-a5082 {
+    --sti-org-mark-bg: var(--sti-bg-surface-active);
+    --sti-org-mark-fg: var(--sti-fg);
+    box-sizing: border-box;
+    border-radius: var(--sti-radius-sm);
+    background: var(--sti-org-mark-bg);
+    block-size: 1.5rem;
+    inline-size: 1.5rem;
+    color: var(--sti-org-mark-fg);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-OrgSwitcher-mark-a5082 > svg {
+    block-size: .875rem;
+    inline-size: .875rem;
+  }
+
+  .sti-OrgSwitcher-mark-a5082[data-color="neutral-strong"] {
+    --sti-org-mark-bg: var(--sti-fill-neutral);
+    --sti-org-mark-fg: var(--sti-fg-on-neutral);
+  }
+
+  .sti-OrgSwitcher-mark-a5082[data-color="success"] {
+    --sti-org-mark-bg: var(--sti-bg-success-subtle);
+    --sti-org-mark-fg: var(--sti-fg-success-strong);
+  }
+
+  .sti-OrgSwitcher-mark-a5082[data-color="success-strong"] {
+    --sti-org-mark-bg: var(--sti-fill-success);
+    --sti-org-mark-fg: var(--sti-fg-on-success);
+  }
+
+  .sti-OrgSwitcher-mark-a5082[data-color="warning"] {
+    --sti-org-mark-bg: var(--sti-bg-warning-subtle);
+    --sti-org-mark-fg: var(--sti-fg-warning-strong);
+  }
+
+  .sti-OrgSwitcher-mark-a5082[data-color="warning-strong"] {
+    --sti-org-mark-bg: var(--sti-fill-warning);
+    --sti-org-mark-fg: var(--sti-fg-on-warning);
+  }
+
+  .sti-OrgSwitcher-chevron-d6eea {
     color: var(--sti-fg-muted);
     flex: none;
   }
 
-  .sti-OrgSwitcher-card-297cc {
-    min-inline-size: 0;
+  .sti-OrgSwitcher-card-af900 {
+    --sti-floating-w: 20rem;
   }
 
-  .sti-OrgSwitcher-body-e5f5e {
+  .sti-OrgSwitcher-body-dd131 {
     gap: var(--sti-space-2);
     min-inline-size: 0;
     display: grid;
   }
 
-  .sti-OrgSwitcher-scroll-eca85 {
+  .sti-OrgSwitcher-scroll-045d7 {
     max-block-size: 18rem;
     overflow: auto;
   }
 
-  .sti-OrgSwitcher-empty-1d36a {
+  .sti-OrgSwitcher-create-8b4bd {
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    padding-block-start: var(--sti-space-1);
+  }
+
+  .sti-OrgSwitcher-createRow-c2255 {
+    align-items: center;
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--sti-control-h-sm);
+    padding-block: var(--sti-space-2);
+    padding-inline: var(--sti-space-3);
+    border-radius: var(--sti-radius-sm);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-sm);
+    text-align: start;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    margin: 0;
+    text-decoration: none;
+    display: flex;
+  }
+
+  @media (pointer: coarse) {
+    .sti-OrgSwitcher-createRow-c2255 {
+      min-block-size: var(--sti-control-h-md);
+    }
+  }
+
+  @media (hover: hover) {
+    .sti-OrgSwitcher-createRow-c2255[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-OrgSwitcher-createRow-c2255[data-pressed] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-OrgSwitcher-createRow-c2255[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-OrgSwitcher-createIcon-a21cc {
+    box-sizing: border-box;
+    block-size: 1.5rem;
+    inline-size: 1.5rem;
+    padding: var(--sti-space-1);
+    border: var(--sti-border-width) dashed var(--sti-border-strong);
+    border-radius: var(--sti-radius-sm);
+    color: var(--sti-fg-muted);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-OrgSwitcher-empty-0c82b {
     padding: var(--sti-space-3);
     color: var(--sti-fg-muted);
     font-size: var(--sti-font-size-sm);
@@ -97,13 +205,17 @@
   }
 
   @media (forced-colors: active) {
-    .sti-OrgSwitcher-trigger-8cf9a[data-focus-visible] {
+    .sti-OrgSwitcher-mark-a5082 {
+      border: var(--sti-border-width) solid CanvasText;
+    }
+
+    .sti-OrgSwitcher-createRow-c2255[data-focus-visible], .sti-OrgSwitcher-trigger-0f64d[data-focus-visible] {
       outline-color: highlight;
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .sti-OrgSwitcher-trigger-8cf9a {
+    .sti-OrgSwitcher-trigger-0f64d {
       transition: none;
     }
   }

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

@@ -10,14 +10,33 @@ export interface OrgSwitcherOrg {
   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" düğmesi çıkar. */
+  /** 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";
@@ -30,8 +49,14 @@ export interface OrgSwitcherProps {
   id?: string;
 }
 /**
- * Kuruluş değiştirici: geçerli firma ya da müşteriyi gösteren düğme ve altında aranabilir seçim
- * listesi. Kuruluşlar türüne göre gruplanır. 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.
+ * 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, searchThreshold, size, placement, isDisabled, isOpen, defaultOpen, onOpenChange, className, id }: OrgSwitcherProps): import("react").JSX.Element;
+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

@@ -1,35 +1,51 @@
 "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 { Button as Button$1 } from "../../components/Button/Button.js";
-import { Avatar } 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";
-import { Button, ListBox } from "react-aria-components";
+import { Button, Link, ListBox } from "react-aria-components";
 // src/id/OrgSwitcher/OrgSwitcher.tsx
 const fold = (s, locale) => s.toLocaleLowerCase(locale);
 /**
-* Kuruluş değiştirici: geçerli firma ya da müşteriyi gösteren düğme ve altında aranabilir seçim
-* listesi. Kuruluşlar türüne göre gruplanır. 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.
+* 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 OrgSwitcher({ orgs, value, defaultValue = null, onChange, onCreate, searchThreshold = 7, size = "md", placement = "bottom start", isDisabled, isOpen, defaultOpen, onOpenChange, className, id }) {
+function OrgSwitcherPanel({ orgs, value = null, onSelect, onCreate, createHref, searchThreshold = 7, autoFocus = false, className, id }) {
 	const t = useMessages();
 	const locale = useLocale();
-	const [inner, setInner] = useState(defaultValue);
 	const [query, setQuery] = useState("");
-	const current = value === void 0 ? inner : value;
-	const selected = orgs.find((o) => o.id === current);
 	const showSearch = orgs.length > searchThreshold;
 	const q = fold(query.trim(), locale);
 	const items = useMemo(() => {
@@ -38,13 +54,7 @@ function OrgSwitcher({ orgs, value, defaultValue = null, onChange, onCreate, sea
 			id: o.id,
 			label: o.name,
 			description: o.description,
-			icon: o.avatarSrc ? /* @__PURE__ */ jsx(Avatar, {
-				name: o.name,
-				src: o.avatarSrc,
-				size: "xs",
-				shape: "square",
-				isDecorative: true
-			}) : o.kind === "company" ? /* @__PURE__ */ jsx(BuildingIcon, {}) : /* @__PURE__ */ jsx(BriefcaseIcon, {})
+			icon: /* @__PURE__ */ jsx(OrgMark, { org: o })
 		});
 		const companies = visible.filter((o) => o.kind === "company");
 		const clients = visible.filter((o) => o.kind === "client");
@@ -65,12 +75,73 @@ function OrgSwitcher({ orgs, value, defaultValue = null, onChange, onCreate, sea
 		t.idOrgKindCompany,
 		t.idOrgKindClient
 	]);
-	const pick = (key, close) => {
-		setInner(key);
-		onChange?.(key);
-		setQuery("");
-		close();
-	};
+	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,
@@ -78,23 +149,14 @@ function OrgSwitcher({ orgs, value, defaultValue = null, onChange, onCreate, sea
 		className: OrgSwitcher_module_default.card,
 		isOpen,
 		defaultOpen,
-		onOpenChange: (open) => {
-			if (!open) setQuery("");
-			onOpenChange?.(open);
-		},
+		onOpenChange,
 		trigger: /* @__PURE__ */ jsxs(Button, {
 			id,
 			className: [OrgSwitcher_module_default.trigger, className].filter(Boolean).join(" "),
 			"data-size": size,
 			isDisabled,
 			children: [
-				selected ? /* @__PURE__ */ jsx(Avatar, {
-					name: selected.name,
-					src: selected.avatarSrc,
-					size: "xs",
-					shape: "square",
-					isDecorative: true
-				}) : null,
+				selected ? /* @__PURE__ */ jsx(OrgMark, { org: selected }) : null,
 				selected ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [t.idOrgSwitcherCurrent, ": "] }) : null,
 				/* @__PURE__ */ jsx("span", {
 					className: OrgSwitcher_module_default.name,
@@ -106,48 +168,22 @@ function OrgSwitcher({ orgs, value, defaultValue = null, onChange, onCreate, sea
 				})
 			]
 		}),
-		footer: onCreate ? (close) => /* @__PURE__ */ jsx(Button$1, {
-			variant: "ghost",
-			size: "sm",
-			fullWidth: true,
-			iconStart: /* @__PURE__ */ jsx(PlusIcon, {}),
-			onPress: () => {
+		children: (close) => /* @__PURE__ */ jsx(OrgSwitcherPanel, {
+			orgs,
+			value: current,
+			searchThreshold,
+			autoFocus: true,
+			createHref,
+			onCreate: onCreate ? () => {
 				close();
 				onCreate();
-			},
-			children: t.idOrgCreate
-		}) : void 0,
-		children: (close) => /* @__PURE__ */ jsxs("div", {
-			className: OrgSwitcher_module_default.body,
-			children: [showSearch ? /* @__PURE__ */ jsx(SearchField$1, {
-				label: t.idOrgSearch,
-				hideLabel: true,
-				placeholder: t.idOrgSearch,
-				size: "sm",
-				value: query,
-				onChange: setQuery,
-				autoFocus: true
-			}) : 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: current ? [current] : [],
-					autoFocus: showSearch ? false : "first",
-					onSelectionChange: (keys) => {
-						const key = keys === "all" ? void 0 : [...keys][0];
-						if (key !== void 0) pick(String(key), close);
-					},
-					renderEmptyState: () => /* @__PURE__ */ jsx("p", {
-						className: OrgSwitcher_module_default.empty,
-						children: template(t.idOrgNoMatch, { query })
-					}),
-					children: renderOptions(items)
-				})
-			})]
+			} : void 0,
+			onSelect: (key) => {
+				setInner(key);
+				onChange?.(key);
+				close();
+			}
 		})
 	});
 }
-export { OrgSwitcher };
+export { OrgSwitcher, OrgSwitcherPanel };

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

@@ -1,12 +1,16 @@
 import './OrgSwitcher.css';
 // src/id/OrgSwitcher/OrgSwitcher.module.css
 var OrgSwitcher_module_default = {
-	"trigger": "sti-OrgSwitcher-trigger-8cf9a",
-	"name": "sti-OrgSwitcher-name-0b2eb",
-	"chevron": "sti-OrgSwitcher-chevron-e70b6",
-	"card": "sti-OrgSwitcher-card-297cc",
-	"body": "sti-OrgSwitcher-body-e5f5e",
-	"scroll": "sti-OrgSwitcher-scroll-eca85",
-	"empty": "sti-OrgSwitcher-empty-1d36a"
+	"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

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

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;