@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/icons/index.js

@@ -0,0 +1,150 @@
+import { Icon } from "./Icon.js";
+import { ChevronDownIcon } from "./generated/ChevronDownIcon.js";
+import { CheckIcon } from "./generated/CheckIcon.js";
+import { AlertCircleIcon } from "./generated/AlertCircleIcon.js";
+import { CloseIcon } from "./generated/CloseIcon.js";
+import { AlertTriangleIcon } from "./generated/AlertTriangleIcon.js";
+import { CheckCircleIcon } from "./generated/CheckCircleIcon.js";
+import { InfoIcon } from "./generated/InfoIcon.js";
+import { LightbulbIcon } from "./generated/LightbulbIcon.js";
+import { MenuIcon } from "./generated/MenuIcon.js";
+import { ArrowRightIcon } from "./generated/ArrowRightIcon.js";
+import { ArrowUpRightIcon } from "./generated/ArrowUpRightIcon.js";
+import { ExternalLinkIcon } from "./generated/ExternalLinkIcon.js";
+import { UserIcon } from "./generated/UserIcon.js";
+import { ArrowLeftIcon } from "./generated/ArrowLeftIcon.js";
+import { ChevronRightIcon } from "./generated/ChevronRightIcon.js";
+import { MoreHorizontalIcon } from "./generated/MoreHorizontalIcon.js";
+import { ChevronLeftIcon } from "./generated/ChevronLeftIcon.js";
+import { FileTextIcon } from "./generated/FileTextIcon.js";
+import { ClockIcon } from "./generated/ClockIcon.js";
+import { MinusIcon } from "./generated/MinusIcon.js";
+import { SearchIcon } from "./generated/SearchIcon.js";
+import { HelpCircleIcon } from "./generated/HelpCircleIcon.js";
+import { CopyIcon } from "./generated/CopyIcon.js";
+import { PlusIcon } from "./generated/PlusIcon.js";
+import { CalendarIcon } from "./generated/CalendarIcon.js";
+import { DownloadIcon } from "./generated/DownloadIcon.js";
+import { MailIcon } from "./generated/MailIcon.js";
+import { SmileIcon } from "./generated/SmileIcon.js";
+import { RefreshIcon } from "./generated/RefreshIcon.js";
+import { HomeIcon } from "./generated/HomeIcon.js";
+import { LockIcon } from "./generated/LockIcon.js";
+import { SettingsIcon } from "./generated/SettingsIcon.js";
+import { BookmarkIcon } from "./generated/BookmarkIcon.js";
+import { HeartIcon } from "./generated/HeartIcon.js";
+import { StarIcon } from "./generated/StarIcon.js";
+import { MessageIcon } from "./generated/MessageIcon.js";
+import { ArchiveIcon } from "./generated/ArchiveIcon.js";
+import { FileIcon } from "./generated/FileIcon.js";
+import { ImageIcon } from "./generated/ImageIcon.js";
+import { TableIcon } from "./generated/TableIcon.js";
+import { VideoIcon } from "./generated/VideoIcon.js";
+import { UploadIcon } from "./generated/UploadIcon.js";
+import { ArrowUpIcon } from "./generated/ArrowUpIcon.js";
+import { BuildingIcon } from "./generated/BuildingIcon.js";
+import { iconCatalog } from "./generated/catalog.js";
+import { AddSquareIcon } from "./generated/AddSquareIcon.js";
+import { AlertIcon } from "./generated/AlertIcon.js";
+import { AppsIcon } from "./generated/AppsIcon.js";
+import { ArrowDownIcon } from "./generated/ArrowDownIcon.js";
+import { AtSignIcon } from "./generated/AtSignIcon.js";
+import { BarChartIcon } from "./generated/BarChartIcon.js";
+import { BellIcon } from "./generated/BellIcon.js";
+import { BellOffIcon } from "./generated/BellOffIcon.js";
+import { BookIcon } from "./generated/BookIcon.js";
+import { BriefcaseIcon } from "./generated/BriefcaseIcon.js";
+import { CalendarRangeIcon } from "./generated/CalendarRangeIcon.js";
+import { CameraIcon } from "./generated/CameraIcon.js";
+import { ChartIcon } from "./generated/ChartIcon.js";
+import { ChevronUpIcon } from "./generated/ChevronUpIcon.js";
+import { ChevronsUpDownIcon } from "./generated/ChevronsUpDownIcon.js";
+import { ClipboardIcon } from "./generated/ClipboardIcon.js";
+import { CodeIcon } from "./generated/CodeIcon.js";
+import { ColumnsIcon } from "./generated/ColumnsIcon.js";
+import { CompassIcon } from "./generated/CompassIcon.js";
+import { ContrastIcon } from "./generated/ContrastIcon.js";
+import { CreditCardIcon } from "./generated/CreditCardIcon.js";
+import { DatabaseIcon } from "./generated/DatabaseIcon.js";
+import { DotIcon } from "./generated/DotIcon.js";
+import { EditIcon } from "./generated/EditIcon.js";
+import { EyeIcon } from "./generated/EyeIcon.js";
+import { EyeOffIcon } from "./generated/EyeOffIcon.js";
+import { FilterIcon } from "./generated/FilterIcon.js";
+import { FingerprintIcon } from "./generated/FingerprintIcon.js";
+import { FlagIcon } from "./generated/FlagIcon.js";
+import { FolderIcon } from "./generated/FolderIcon.js";
+import { GaugeIcon } from "./generated/GaugeIcon.js";
+import { GlobeIcon } from "./generated/GlobeIcon.js";
+import { GridIcon } from "./generated/GridIcon.js";
+import { GripVerticalIcon } from "./generated/GripVerticalIcon.js";
+import { HashIcon } from "./generated/HashIcon.js";
+import { HistoryIcon } from "./generated/HistoryIcon.js";
+import { IdCardIcon } from "./generated/IdCardIcon.js";
+import { InboxIcon } from "./generated/InboxIcon.js";
+import { KeyIcon } from "./generated/KeyIcon.js";
+import { LaptopIcon } from "./generated/LaptopIcon.js";
+import { LayersIcon } from "./generated/LayersIcon.js";
+import { LifebuoyIcon } from "./generated/LifebuoyIcon.js";
+import { LineChartIcon } from "./generated/LineChartIcon.js";
+import { LinkIcon } from "./generated/LinkIcon.js";
+import { LiraIcon } from "./generated/LiraIcon.js";
+import { ListIcon } from "./generated/ListIcon.js";
+import { LoaderIcon } from "./generated/LoaderIcon.js";
+import { LogInIcon } from "./generated/LogInIcon.js";
+import { LogOutIcon } from "./generated/LogOutIcon.js";
+import { MailOpenIcon } from "./generated/MailOpenIcon.js";
+import { MapPinIcon } from "./generated/MapPinIcon.js";
+import { MaximizeIcon } from "./generated/MaximizeIcon.js";
+import { MegaphoneIcon } from "./generated/MegaphoneIcon.js";
+import { MicIcon } from "./generated/MicIcon.js";
+import { MinimizeIcon } from "./generated/MinimizeIcon.js";
+import { MonitorIcon } from "./generated/MonitorIcon.js";
+import { MoonIcon } from "./generated/MoonIcon.js";
+import { MoreVerticalIcon } from "./generated/MoreVerticalIcon.js";
+import { PaletteIcon } from "./generated/PaletteIcon.js";
+import { PaperclipIcon } from "./generated/PaperclipIcon.js";
+import { PasskeyIcon } from "./generated/PasskeyIcon.js";
+import { PauseIcon } from "./generated/PauseIcon.js";
+import { PercentIcon } from "./generated/PercentIcon.js";
+import { PhoneIcon } from "./generated/PhoneIcon.js";
+import { PieChartIcon } from "./generated/PieChartIcon.js";
+import { PlayIcon } from "./generated/PlayIcon.js";
+import { PlusCircleIcon } from "./generated/PlusCircleIcon.js";
+import { PrinterIcon } from "./generated/PrinterIcon.js";
+import { PulseIcon } from "./generated/PulseIcon.js";
+import { QrCodeIcon } from "./generated/QrCodeIcon.js";
+import { ReceiptIcon } from "./generated/ReceiptIcon.js";
+import { RedoIcon } from "./generated/RedoIcon.js";
+import { RotateIcon } from "./generated/RotateIcon.js";
+import { ScaleIcon } from "./generated/ScaleIcon.js";
+import { SendIcon } from "./generated/SendIcon.js";
+import { ShareIcon } from "./generated/ShareIcon.js";
+import { ShieldIcon } from "./generated/ShieldIcon.js";
+import { ShieldCheckIcon } from "./generated/ShieldCheckIcon.js";
+import { ShoppingBagIcon } from "./generated/ShoppingBagIcon.js";
+import { SidebarIcon } from "./generated/SidebarIcon.js";
+import { SlidersIcon } from "./generated/SlidersIcon.js";
+import { SmartphoneIcon } from "./generated/SmartphoneIcon.js";
+import { SortAscendingIcon } from "./generated/SortAscendingIcon.js";
+import { SortDescendingIcon } from "./generated/SortDescendingIcon.js";
+import { SunIcon } from "./generated/SunIcon.js";
+import { TagIcon } from "./generated/TagIcon.js";
+import { TrashIcon } from "./generated/TrashIcon.js";
+import { TrendingDownIcon } from "./generated/TrendingDownIcon.js";
+import { TrendingUpIcon } from "./generated/TrendingUpIcon.js";
+import { TypeIcon } from "./generated/TypeIcon.js";
+import { UndoIcon } from "./generated/UndoIcon.js";
+import { UnlinkIcon } from "./generated/UnlinkIcon.js";
+import { UnlockIcon } from "./generated/UnlockIcon.js";
+import { UserCheckIcon } from "./generated/UserCheckIcon.js";
+import { UserMinusIcon } from "./generated/UserMinusIcon.js";
+import { UserPlusIcon } from "./generated/UserPlusIcon.js";
+import { UsersIcon } from "./generated/UsersIcon.js";
+import { WalletIcon } from "./generated/WalletIcon.js";
+import { WifiIcon } from "./generated/WifiIcon.js";
+import { WifiOffIcon } from "./generated/WifiOffIcon.js";
+import { XCircleIcon } from "./generated/XCircleIcon.js";
+import { ZoomInIcon } from "./generated/ZoomInIcon.js";
+import { ZoomOutIcon } from "./generated/ZoomOutIcon.js";
+export { AddSquareIcon, AlertCircleIcon, AlertIcon, AlertTriangleIcon, AppsIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, AtSignIcon, BarChartIcon, BellIcon, BellOffIcon, BookIcon, BookmarkIcon, BriefcaseIcon, BuildingIcon, CalendarIcon, CalendarRangeIcon, CameraIcon, ChartIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, ClipboardIcon, ClockIcon, CloseIcon, CodeIcon, ColumnsIcon, CompassIcon, ContrastIcon, CopyIcon, CreditCardIcon, DatabaseIcon, DotIcon, DownloadIcon, EditIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileIcon, FileTextIcon, FilterIcon, FingerprintIcon, FlagIcon, FolderIcon, GaugeIcon, GlobeIcon, GridIcon, GripVerticalIcon, HashIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, Icon, IdCardIcon, ImageIcon, InboxIcon, InfoIcon, KeyIcon, LaptopIcon, LayersIcon, LifebuoyIcon, LightbulbIcon, LineChartIcon, LinkIcon, LiraIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapPinIcon, MaximizeIcon, MegaphoneIcon, MenuIcon, MessageIcon, MicIcon, MinimizeIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PaletteIcon, PaperclipIcon, PasskeyIcon, PauseIcon, PercentIcon, PhoneIcon, PieChartIcon, PlayIcon, PlusCircleIcon, PlusIcon, PrinterIcon, PulseIcon, QrCodeIcon, ReceiptIcon, RedoIcon, RefreshIcon, RotateIcon, ScaleIcon, SearchIcon, SendIcon, SettingsIcon, ShareIcon, ShieldCheckIcon, ShieldIcon, ShoppingBagIcon, SidebarIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SortAscendingIcon, SortDescendingIcon, StarIcon, SunIcon, TableIcon, TagIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TypeIcon, UndoIcon, UnlinkIcon, UnlockIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UsersIcon, VideoIcon, WalletIcon, WifiIcon, WifiOffIcon, XCircleIcon, ZoomInIcon, ZoomOutIcon, iconCatalog };

package/dist/id/AccountMenu/AccountMenu.css

@@ -0,0 +1,110 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-AccountMenu-trigger-cc23b {
+    --sti-account-menu-ring: var(--sti-border-subtle);
+    box-sizing: border-box;
+    padding: var(--sti-space-0-5);
+    border: var(--sti-border-width) solid var(--sti-account-menu-ring);
+    border-radius: var(--sti-radius-pill);
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: border-color var(--sti-duration-fast) var(--sti-ease-snap),
+      background-color var(--sti-duration-fast) var(--sti-ease-snap);
+    background: none;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    .sti-AccountMenu-trigger-cc23b[data-hovered] {
+      --sti-account-menu-ring: var(--sti-border-accent);
+    }
+  }
+
+  .sti-AccountMenu-trigger-cc23b[data-pressed], .sti-AccountMenu-trigger-cc23b[data-pressed][data-hovered] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-AccountMenu-trigger-cc23b[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-AccountMenu-trigger-cc23b[data-expanded] {
+    --sti-account-menu-ring: var(--sti-border-selected);
+  }
+
+  @media (pointer: coarse) {
+    .sti-AccountMenu-trigger-cc23b {
+      min-block-size: 2.75rem;
+      min-inline-size: 2.75rem;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-AccountMenu-trigger-cc23b[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-AccountMenu-trigger-cc23b {
+      transition: none;
+    }
+  }
+
+  .sti-AccountMenu-card-db0a8 {
+    min-inline-size: 0;
+  }
+
+  .sti-AccountMenu-body-cd3ae {
+    gap: var(--sti-space-4);
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-AccountMenu-identity-5173a {
+    align-items: center;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-AccountMenu-names-17aee {
+    gap: var(--sti-space-0-5);
+    min-inline-size: 0;
+    display: grid;
+  }
+
+  .sti-AccountMenu-name-28b79 {
+    color: var(--sti-fg);
+    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-AccountMenu-email-aafda {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+    margin: 0;
+  }
+
+  .sti-AccountMenu-items-efec6 {
+    gap: var(--sti-space-0-5);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  .sti-AccountMenu-item-b7ab2 {
+    min-inline-size: 0;
+  }
+}

package/dist/id/AccountMenu/AccountMenu.d.ts

@@ -0,0 +1,45 @@
+import { Placement } from "../../components/_internal/overlay/FloatingCard.js";
+import "../../components/Popover/Popover.js";
+import { ReactNode } from "react";
+export interface AccountMenuAccount {
+  /** Hesap sahibinin adı. */
+  name: string;
+  /** Oturum açılan e-posta adresi. */
+  email: string;
+  /** Profil fotoğrafı; yoksa baş harfler çizilir. */
+  avatarSrc?: string;
+}
+export interface AccountMenuItem {
+  /** Kalıcı anahtar. */
+  id: string;
+  label: string;
+  /** Süs ikonu. */
+  icon?: ReactNode;
+  /** Verilirse bağlantı, verilmezse düğme. */
+  href?: string;
+  onPress?: () => void;
+}
+export interface AccountMenuProps {
+  account: AccountMenuAccount;
+  /** Hesap bilgisinin altındaki bağlantı ve eylemler ("Güvenlik", "Faturalama"). */
+  items?: readonly AccountMenuItem[];
+  /** "STI ID hesabınızı yönetin" düğmesinin adresi; verilmezse düğme çizilmez. */
+  manageHref?: string;
+  /** Oturumu kapatma eylemi; adres (`signOutHref`) ya da işlev. */
+  onSignOut?: () => void;
+  signOutHref?: string;
+  /** Tetikleyicinin avatar boyu. */
+  size?: "sm" | "md" | "lg";
+  placement?: Placement;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * Hesap menüsü: avatar düğmesi, altında hesabın adı ve e-postası, hesap yönetimi, bağlantılar ve
+ * oturumu kapatma. APG Dialog kalıbı (kipsiz açılır kutu): Enter ya da Boşluk açar, Tab içeride
+ * dolaşır, Escape kapatır ve odak düğmeye döner.
+ */
+export declare function AccountMenu({ account, items, manageHref, onSignOut, signOutHref, size, placement, isOpen, defaultOpen, onOpenChange, className, id }: AccountMenuProps): import("react").JSX.Element;

package/dist/id/AccountMenu/AccountMenu.js

@@ -0,0 +1,98 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.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 { Popover as Popover$1 } from "../../components/Popover/Popover.js";
+import { LogOutIcon } from "../../icons/generated/LogOutIcon.js";
+import { ActionItem } from "../_internal/ActionItem/ActionItem.js";
+import AccountMenu_module_default from "./AccountMenu.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "react-aria-components";
+// src/id/AccountMenu/AccountMenu.tsx
+/**
+* Hesap menüsü: avatar düğmesi, altında hesabın adı ve e-postası, hesap yönetimi, bağlantılar ve
+* oturumu kapatma. APG Dialog kalıbı (kipsiz açılır kutu): Enter ya da Boşluk açar, Tab içeride
+* dolaşır, Escape kapatır ve odak düğmeye döner.
+*/
+function AccountMenu({ account, items = [], manageHref, onSignOut, signOutHref, size = "md", placement = "bottom end", isOpen, defaultOpen, onOpenChange, className, id }) {
+	const t = useMessages();
+	return /* @__PURE__ */ jsx(Popover$1, {
+		isOpen,
+		defaultOpen,
+		onOpenChange,
+		placement,
+		"aria-label": t.idAccountMenu,
+		size: "md",
+		className: AccountMenu_module_default.card,
+		trigger: /* @__PURE__ */ jsxs(Button, {
+			id,
+			className: [AccountMenu_module_default.trigger, className].filter(Boolean).join(" "),
+			"data-size": size,
+			children: [/* @__PURE__ */ jsx(Avatar, {
+				name: account.name,
+				src: account.avatarSrc,
+				size,
+				isDecorative: true
+			}), /* @__PURE__ */ jsx(VisuallyHidden, { children: template(t.idAccountMenuFor, { name: account.name }) })]
+		}),
+		footer: (close) => onSignOut || signOutHref ? /* @__PURE__ */ jsx(Button$1, {
+			variant: "ghost",
+			size: "sm",
+			fullWidth: true,
+			iconStart: /* @__PURE__ */ jsx(LogOutIcon, {}),
+			...signOutHref ? { href: signOutHref } : { onPress: () => {
+				close();
+				onSignOut?.();
+			} },
+			children: t.idAccountSignOut
+		}) : null,
+		children: (close) => /* @__PURE__ */ jsxs("div", {
+			className: AccountMenu_module_default.body,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: AccountMenu_module_default.identity,
+					children: [/* @__PURE__ */ jsx(Avatar, {
+						name: account.name,
+						src: account.avatarSrc,
+						size: "lg",
+						isDecorative: true
+					}), /* @__PURE__ */ jsxs("div", {
+						className: AccountMenu_module_default.names,
+						children: [/* @__PURE__ */ jsx("p", {
+							className: AccountMenu_module_default.name,
+							children: account.name
+						}), /* @__PURE__ */ jsx("p", {
+							className: AccountMenu_module_default.email,
+							children: account.email
+						})]
+					})]
+				}),
+				manageHref ? /* @__PURE__ */ jsx(Button$1, {
+					variant: "secondary",
+					size: "sm",
+					fullWidth: true,
+					href: manageHref,
+					children: t.idAccountManage
+				}) : null,
+				items.length > 0 ? /* @__PURE__ */ jsx("ul", {
+					className: AccountMenu_module_default.items,
+					children: items.map((item) => /* @__PURE__ */ jsx("li", {
+						className: AccountMenu_module_default.item,
+						children: /* @__PURE__ */ jsx(ActionItem, {
+							label: item.label,
+							icon: item.icon,
+							href: item.href,
+							onPress: () => {
+								close();
+								item.onPress?.();
+							}
+						})
+					}, item.id))
+				}) : null
+			]
+		})
+	});
+}
+export { AccountMenu };

package/dist/id/AccountMenu/AccountMenu.module.js

@@ -0,0 +1,14 @@
+import './AccountMenu.css';
+// src/id/AccountMenu/AccountMenu.module.css
+var AccountMenu_module_default = {
+	"trigger": "sti-AccountMenu-trigger-cc23b",
+	"card": "sti-AccountMenu-card-db0a8",
+	"body": "sti-AccountMenu-body-cd3ae",
+	"identity": "sti-AccountMenu-identity-5173a",
+	"names": "sti-AccountMenu-names-17aee",
+	"name": "sti-AccountMenu-name-28b79",
+	"email": "sti-AccountMenu-email-aafda",
+	"items": "sti-AccountMenu-items-efec6",
+	"item": "sti-AccountMenu-item-b7ab2"
+};
+export { AccountMenu_module_default as default };

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

@@ -0,0 +1,2 @@
+import { AccountMenu, AccountMenuAccount, AccountMenuItem, AccountMenuProps } from "./AccountMenu.js";
+export { AccountMenu, AccountMenuAccount, AccountMenuItem, AccountMenuProps };

package/dist/id/AppSwitcher/AppSwitcher.css

@@ -0,0 +1,109 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-AppSwitcher-grid-1bb9f {
+    gap: var(--sti-space-1);
+    font-family: var(--sti-font-text);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+  }
+
+  @media (width <= 22.5rem) {
+    .sti-AppSwitcher-grid-1bb9f {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  .sti-AppSwitcher-cell-419c9 {
+    min-inline-size: 0;
+  }
+
+  .sti-AppSwitcher-app-2a6b7 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    box-sizing: border-box;
+    min-block-size: 5.5rem;
+    padding: var(--sti-space-3) var(--sti-space-2);
+    border: var(--sti-border-width) solid transparent;
+    border-radius: var(--sti-radius-md);
+    color: var(--sti-fg);
+    text-align: center;
+    cursor: pointer;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      border-color var(--sti-duration-fast) var(--sti-ease-snap);
+    flex-direction: column;
+    text-decoration: none;
+    display: flex;
+  }
+
+  @media (hover: hover) {
+    .sti-AppSwitcher-app-2a6b7[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-AppSwitcher-app-2a6b7[data-pressed] {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-AppSwitcher-app-2a6b7[data-current] {
+    border-color: var(--sti-border-selected);
+    background: var(--sti-bg-accent-subtle);
+  }
+
+  .sti-AppSwitcher-app-2a6b7[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-AppSwitcher-tile-ba8b2 {
+    inline-size: var(--sti-control-h-lg);
+    block-size: var(--sti-control-h-lg);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-surface-active);
+    color: var(--sti-fg);
+    font-size: var(--sti-icon-lg);
+    font-weight: var(--sti-font-weight-semibold);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-AppSwitcher-app-2a6b7[data-current] .sti-AppSwitcher-tile-ba8b2 {
+    background: var(--sti-fill-accent);
+    color: var(--sti-fg-on-accent);
+  }
+
+  .sti-AppSwitcher-name-c7544 {
+    min-inline-size: 0;
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-medium);
+    line-height: var(--sti-line-height-sm);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-AppSwitcher-empty-1bdf0 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  @media (forced-colors: active) {
+    .sti-AppSwitcher-app-2a6b7[data-current] {
+      border-color: highlight;
+    }
+
+    .sti-AppSwitcher-app-2a6b7[data-focus-visible] {
+      outline-color: highlight;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-AppSwitcher-app-2a6b7 {
+      transition: none;
+    }
+  }
+}

package/dist/id/AppSwitcher/AppSwitcher.d.ts

@@ -0,0 +1,31 @@
+import { Placement } from "../../components/_internal/overlay/FloatingCard.js";
+import "../../components/Popover/Popover.js";
+import { ReactNode } from "react";
+export interface AppSwitcherApp {
+  /** Kalıcı anahtar. */
+  id: string;
+  name: string;
+  /** Uygulamanın adresi. */
+  href: string;
+  /** Karodaki ikon (süs); yoksa adın baş harfi çizilir. */
+  icon?: ReactNode;
+  /** Geçerli uygulama: işaretlenir ve ekran okuyucuya bildirilir. */
+  isCurrent?: boolean;
+}
+export interface AppSwitcherProps {
+  apps: readonly AppSwitcherApp[];
+  /** Tetikleyicinin adı; varsayılan "STI uygulamaları". */
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  placement?: Placement;
+  isOpen?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının karo ızgarası.
+ * Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla gezilir.
+ */
+export declare function AppSwitcher({ apps, label, size, placement, isOpen, defaultOpen, onOpenChange, className, id }: AppSwitcherProps): import("react").JSX.Element;

package/dist/id/AppSwitcher/AppSwitcher.js

@@ -0,0 +1,88 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.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";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-aria-components";
+// src/id/AppSwitcher/AppSwitcher.tsx
+const ARROWS = {
+	ArrowRight: () => 1,
+	ArrowLeft: () => -1,
+	ArrowDown: (cols) => cols,
+	ArrowUp: (cols) => -cols
+};
+/** Izgarada oklarla gezinme: sütun sayısı hesaplanan düzenden okunur; Home ve End uçlara gider. */
+function onGridKeyDown(event) {
+	const links = Array.from(event.currentTarget.querySelectorAll("a[href]"));
+	const index = links.indexOf(document.activeElement);
+	if (index < 0) return;
+	let next = index;
+	if (event.key === "Home") next = 0;
+	else if (event.key === "End") next = links.length - 1;
+	else if (ARROWS[event.key]) {
+		const cols = Math.max(1, getComputedStyle(event.currentTarget).gridTemplateColumns.split(" ").length);
+		next = Math.min(links.length - 1, Math.max(0, index + (ARROWS[event.key]?.(cols) ?? 0)));
+	} else return;
+	event.preventDefault();
+	links[next]?.focus();
+}
+/**
+* Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının karo ızgarası.
+* Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla gezilir.
+*/
+function AppSwitcher({ apps, label, size = "md", placement = "bottom end", isOpen, defaultOpen, onOpenChange, className, id }) {
+	const t = useMessages();
+	const name = label ?? t.idAppSwitcher;
+	return /* @__PURE__ */ jsx(Popover$1, {
+		isOpen,
+		defaultOpen,
+		onOpenChange,
+		placement,
+		"aria-label": name,
+		size: "md",
+		trigger: /* @__PURE__ */ jsx(IconButton, {
+			id,
+			className,
+			label: name,
+			icon: /* @__PURE__ */ jsx(AppsIcon, {}),
+			variant: "ghost",
+			size
+		}),
+		children: apps.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: AppSwitcher_module_default.empty,
+			children: t.idAppSwitcherEmpty
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: AppSwitcher_module_default.grid,
+			onKeyDown: onGridKeyDown,
+			children: apps.map((app) => /* @__PURE__ */ jsx("li", {
+				className: AppSwitcher_module_default.cell,
+				children: /* @__PURE__ */ jsxs(Link, {
+					className: AppSwitcher_module_default.app,
+					href: app.href,
+					"data-current": app.isCurrent ? "" : void 0,
+					"aria-current": app.isCurrent ? "true" : void 0,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: AppSwitcher_module_default.tile,
+							"aria-hidden": "true",
+							children: app.icon ?? Array.from(app.name.trim())[0]?.toLocaleUpperCase("tr-TR")
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: AppSwitcher_module_default.name,
+							children: app.name
+						}),
+						app.isCurrent ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+							" (",
+							t.idAppSwitcherCurrent,
+							")"
+						] }) : null
+					]
+				})
+			}, app.id))
+		})
+	});
+}
+export { AppSwitcher };

package/dist/id/AppSwitcher/AppSwitcher.module.js

@@ -0,0 +1,11 @@
+import './AppSwitcher.css';
+// src/id/AppSwitcher/AppSwitcher.module.css
+var AppSwitcher_module_default = {
+	"grid": "sti-AppSwitcher-grid-1bb9f",
+	"cell": "sti-AppSwitcher-cell-419c9",
+	"app": "sti-AppSwitcher-app-2a6b7",
+	"tile": "sti-AppSwitcher-tile-ba8b2",
+	"name": "sti-AppSwitcher-name-c7544",
+	"empty": "sti-AppSwitcher-empty-1bdf0"
+};
+export { AppSwitcher_module_default as default };

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

@@ -0,0 +1,2 @@
+import { AppSwitcher, AppSwitcherApp, AppSwitcherProps } from "./AppSwitcher.js";
+export { AppSwitcher, AppSwitcherApp, AppSwitcherProps };