@stisocial/ui 0.2.1 → 0.3.0

package/dist/components/Kanban/moveCards.d.ts

@@ -0,0 +1,13 @@
+export interface KanbanCardBase {
+  id: string;
+  columnId: string;
+}
+/**
+ * `ids` kartlarını `columnId` sütununa taşır. `target` verilirse o kartın önüne/arkasına, yoksa
+ * sütunun sonuna. Taşınanların kendi sırası korunur; hedef taşınanlardan biriyse ya da başka
+ * sütundaysa sütunun sonuna eklenir. Yeni dizi döner (girdi değişmez).
+ */
+export declare function moveCards<C extends KanbanCardBase>(cards: readonly C[], ids: Iterable<string>, columnId: string, target?: {
+  id: string;
+  position: "before" | "after";
+}): C[];

package/dist/components/Kanban/moveCards.js

@@ -0,0 +1,33 @@
+// src/components/Kanban/moveCards.ts
+/**
+* `ids` kartlarını `columnId` sütununa taşır. `target` verilirse o kartın önüne/arkasına, yoksa
+* sütunun sonuna. Taşınanların kendi sırası korunur; hedef taşınanlardan biriyse ya da başka
+* sütundaysa sütunun sonuna eklenir. Yeni dizi döner (girdi değişmez).
+*/
+function moveCards(cards, ids, columnId, target) {
+	const set = new Set(ids);
+	const moving = cards.filter((c) => set.has(c.id)).map((c) => ({
+		...c,
+		columnId
+	}));
+	if (moving.length === 0) return [...cards];
+	const rest = cards.filter((c) => !set.has(c.id));
+	let at = -1;
+	if (target && !set.has(target.id)) {
+		const i = rest.findIndex((c) => c.id === target.id && c.columnId === columnId);
+		if (i >= 0) at = target.position === "after" ? i + 1 : i;
+	}
+	if (at < 0) {
+		let last = -1;
+		rest.forEach((c, i) => {
+			if (c.columnId === columnId) last = i;
+		});
+		at = last >= 0 ? last + 1 : rest.length;
+	}
+	return [
+		...rest.slice(0, at),
+		...moving,
+		...rest.slice(at)
+	];
+}
+export { moveCards };

package/dist/components/LanguageSwitch/LanguageSwitch.js

@@ -1,8 +1,8 @@
 "use client";
 import { useLocale, useMessages } from "../../provider/UIProvider.js";
-import { IconButton } from "../IconButton/IconButton.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { Button } from "../Button/Button.js";
+import { IconButton } from "../IconButton/IconButton.js";
 import { MenuItem } from "../Menu/Menu.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import { GlobeIcon } from "../../icons/generated/GlobeIcon.js";

package/dist/components/Lightbox/Lightbox.js

@@ -1,10 +1,10 @@
 "use client";
 import { useFormatter, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
-import { useThemeContext } from "../_internal/themeContext.js";
 import { Spinner } from "../Spinner/Spinner.js";
-import { IconButton } from "../IconButton/IconButton.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { useThemeContext } from "../_internal/themeContext.js";
+import { IconButton } from "../IconButton/IconButton.js";
 import { announce } from "../Alert/announcer.js";
 import { CloseButton } from "../CloseButton/CloseButton.js";
 import { ChevronRightIcon } from "../../icons/generated/ChevronRightIcon.js";

package/dist/components/ListView/ListView.css

@@ -0,0 +1,337 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ListView-root-0928e {
+    --sti-listview-px: var(--sti-space-4);
+    --sti-listview-py: var(--sti-space-3);
+    --sti-listview-gap: var(--sti-space-3);
+    --sti-listview-font-size: var(--sti-font-size-md);
+    --sti-listview-line-height: var(--sti-line-height-md);
+    --sti-listview-check: var(--sti-icon-md);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-listview-font-size);
+    line-height: var(--sti-listview-line-height);
+    outline: none;
+    flex-direction: column;
+    display: flex;
+    container: sti-listview / inline-size;
+  }
+
+  .sti-ListView-root-0928e[data-size="sm"] {
+    --sti-listview-px: var(--sti-space-3);
+    --sti-listview-py: var(--sti-space-2);
+    --sti-listview-gap: var(--sti-space-2);
+    --sti-listview-font-size: var(--sti-font-size-sm);
+    --sti-listview-line-height: var(--sti-line-height-sm);
+    --sti-listview-check: var(--sti-icon-sm);
+  }
+
+  .sti-ListView-root-0928e[data-size="lg"] {
+    --sti-listview-py: var(--sti-space-4);
+    --sti-listview-gap: var(--sti-space-4);
+  }
+
+  .sti-ListView-root-0928e[data-variant="bordered"] {
+    border: var(--sti-border-width) solid var(--sti-border);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    overflow: hidden;
+  }
+
+  .sti-ListView-root-0928e[data-variant="plain"] {
+    gap: var(--sti-space-0-5);
+  }
+
+  .sti-ListView-root-0928e[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ListView-row-899af {
+    box-sizing: border-box;
+    align-items: center;
+    gap: var(--sti-listview-gap);
+    min-block-size: var(--sti-control-h-lg);
+    min-inline-size: 0;
+    padding: var(--sti-listview-py) var(--sti-listview-px);
+    color: var(--sti-fg);
+    cursor: default;
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap);
+    outline: none;
+    text-decoration: none;
+    display: flex;
+    position: relative;
+  }
+
+  .sti-ListView-root-0928e[data-size="sm"] .sti-ListView-row-899af {
+    min-block-size: var(--sti-control-h-md);
+  }
+
+  .sti-ListView-root-0928e[data-variant="bordered"] .sti-ListView-row-899af + .sti-ListView-row-899af, .sti-ListView-root-0928e[data-variant="bordered"] .sti-ListView-dropIndicator-5b69d + .sti-ListView-row-899af {
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  .sti-ListView-root-0928e[data-variant="plain"] .sti-ListView-row-899af {
+    border-radius: var(--sti-radius-md);
+  }
+
+  .sti-ListView-row-899af:is([data-href], [data-selection-mode], [data-has-action]) {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .sti-ListView-row-899af[data-hovered]:not([data-selected], [data-disabled]) {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-ListView-row-899af[data-pressed]:not([data-disabled]) {
+    background: var(--sti-bg-surface-active);
+  }
+
+  .sti-ListView-row-899af[data-selected] {
+    background: var(--sti-bg-accent-subtle);
+  }
+
+  .sti-ListView-row-899af[data-selected]:before {
+    inline-size: var(--sti-border-width-strong);
+    background: var(--sti-border-selected);
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+
+  .sti-ListView-root-0928e[data-variant="plain"] .sti-ListView-row-899af[data-selected]:before {
+    inset-block: var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+  }
+
+  .sti-ListView-row-899af[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-ListView-root-0928e[data-variant="bordered"] .sti-ListView-row-899af[data-focus-visible] {
+    border-radius: var(--sti-radius-md);
+  }
+
+  .sti-ListView-row-899af[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  .sti-ListView-row-899af[data-disabled] :is(.sti-ListView-drag-d4c46, .sti-ListView-check-1cd9b, .sti-ListView-leading-073c3, .sti-ListView-texts-cc4bb, .sti-ListView-meta-47075, .sti-ListView-actions-0778d) {
+    opacity: var(--sti-opacity-disabled);
+  }
+
+  .sti-ListView-row-899af[data-dragging] {
+    opacity: .5;
+  }
+
+  .sti-ListView-drag-d4c46 {
+    inline-size: var(--sti-space-6);
+    block-size: var(--sti-space-6);
+    border-radius: var(--sti-radius-sm);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-sm);
+    cursor: grab;
+    touch-action: none;
+    background: none;
+    border: 0;
+    outline: none;
+    flex: none;
+    place-items: center;
+    margin-inline-start: calc(var(--sti-space-2) * -1);
+    padding: 0;
+    display: inline-grid;
+  }
+
+  @media (pointer: coarse) {
+    .sti-ListView-drag-d4c46 {
+      inline-size: var(--sti-control-h-md);
+      block-size: var(--sti-control-h-md);
+    }
+  }
+
+  @media (hover: hover) {
+    .sti-ListView-drag-d4c46[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+      color: var(--sti-fg);
+    }
+  }
+
+  .sti-ListView-drag-d4c46[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-ListView-check-1cd9b {
+    cursor: pointer;
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+
+  .sti-ListView-box-4204b {
+    inline-size: var(--sti-listview-check);
+    block-size: var(--sti-listview-check);
+    border: var(--sti-border-width) solid var(--sti-border-control);
+    border-radius: var(--sti-radius-xs);
+    background: var(--sti-bg-canvas);
+    color: var(--sti-fg-on-accent);
+    font-size: calc(var(--sti-listview-check) - 4px);
+    transition: background-color var(--sti-duration-fast) var(--sti-ease-snap),
+      border-color var(--sti-duration-fast) var(--sti-ease-snap);
+    place-items: center;
+    display: inline-grid;
+    position: relative;
+  }
+
+  @media (pointer: coarse) {
+    .sti-ListView-box-4204b:after {
+      inset: calc((var(--sti-control-h-md) - var(--sti-listview-check)) / -2);
+      content: "";
+      position: absolute;
+    }
+  }
+
+  .sti-ListView-mark-f9d6b {
+    stroke-width: 2.5px;
+  }
+
+  @media (hover: hover) {
+    .sti-ListView-check-1cd9b[data-hovered] .sti-ListView-box-4204b {
+      border-color: var(--sti-border-strong);
+    }
+  }
+
+  .sti-ListView-check-1cd9b[data-selected] .sti-ListView-box-4204b {
+    border-color: var(--sti-fg-accent);
+    background: var(--sti-fill-accent);
+  }
+
+  .sti-ListView-check-1cd9b[data-focus-visible] .sti-ListView-box-4204b {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ListView-leading-073c3 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-icon-md);
+    flex: none;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .sti-ListView-texts-cc4bb {
+    gap: var(--sti-space-0-5);
+    flex-direction: column;
+    flex: auto;
+    min-inline-size: 0;
+    display: flex;
+  }
+
+  .sti-ListView-title-0dcb3 {
+    font-weight: var(--sti-font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .sti-ListView-description-9f9e3 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .sti-ListView-root-0928e[data-size="sm"] .sti-ListView-description-9f9e3 {
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-ListView-meta-47075 {
+    align-items: center;
+    gap: var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    flex: none;
+    display: inline-flex;
+  }
+
+  .sti-ListView-actions-0778d {
+    align-items: center;
+    gap: var(--sti-space-1);
+    flex: none;
+    margin-inline-end: calc(var(--sti-space-2) * -1);
+    display: inline-flex;
+  }
+
+  @container sti-listview (width <= 24rem) {
+    .sti-ListView-meta-47075 {
+      display: none;
+    }
+  }
+
+  .sti-ListView-dropIndicator-5b69d {
+    outline: none;
+  }
+
+  .sti-ListView-dropIndicator-5b69d[data-drop-target] {
+    z-index: 1;
+    outline: var(--sti-border-width-strong) solid var(--sti-fg-accent);
+    block-size: 0;
+    position: relative;
+  }
+
+  .sti-ListView-empty-93e95 {
+    padding: var(--sti-space-8) var(--sti-space-4);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    text-align: center;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ListView-row-899af, .sti-ListView-box-4204b {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ListView-row-899af[data-selected]:before {
+      background: highlight;
+    }
+
+    .sti-ListView-row-899af[data-selected] {
+      outline: var(--sti-border-width) solid Highlight;
+      outline-offset: calc(var(--sti-border-width) * -1);
+    }
+
+    .sti-ListView-row-899af[data-focus-visible] {
+      outline-color: highlight;
+    }
+
+    .sti-ListView-box-4204b {
+      forced-color-adjust: none;
+      background: field;
+      border-color: fieldtext;
+    }
+
+    .sti-ListView-check-1cd9b[data-selected] .sti-ListView-box-4204b {
+      color: highlighttext;
+      background: highlight;
+      border-color: highlight;
+    }
+
+    .sti-ListView-dropIndicator-5b69d[data-drop-target] {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/components/ListView/ListView.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+export interface ListViewItem {
+  id: string;
+  /** Satırın adı (düz metin): erişilebilir ad ve harfle arama bundandır. */
+  title: string;
+  /** Adın altında ikincil satır (e-posta, yol, özet). */
+  description?: ReactNode;
+  /** Başta süs: Avatar, ikon, küçük görsel. */
+  leading?: ReactNode;
+  /** Sonda ikincil bilgi: Badge, tarih, boyut. */
+  meta?: ReactNode;
+  /** En sonda satır eylemleri: IconButton ya da DropdownMenu. → ile ulaşılır. */
+  actions?: ReactNode;
+  /** Satır bir sayfaya gidiyorsa adresi. */
+  href?: string;
+  isDisabled?: boolean;
+}
+export interface ListViewProps {
+  items: readonly ListViewItem[];
+  /** Listenin adı (zorunlu). */
+  label: string;
+  /** `none` (varsayılan), `single` ya da `multiple` (onay kutulu). */
+  selectionMode?: "none" | "single" | "multiple";
+  selectedKeys?: readonly string[];
+  defaultSelectedKeys?: readonly string[];
+  onSelectionChange?: (keys: string[]) => void;
+  /** Satır etkinleşince (tıklama, Enter). Seçimli listede seçim onay kutusuyla yapılır. */
+  onAction?: (id: string) => void;
+  /** Verilirse satırlar tutamaçla (fare, dokunma, klavye) sürüklenip sıralanır; yeni sıra döner. */
+  onReorder?: (ids: string[]) => void;
+  /** `bordered` (varsayılan): çerçeveli ve ayraçlı; `plain`: çerçevesiz, yuvarlak satırlar. */
+  variant?: "bordered" | "plain";
+  size?: "sm" | "md" | "lg";
+  /** Öğe yokken; verilmezse "Gösterilecek kayıt yok." */
+  emptyState?: ReactNode;
+  className?: string;
+  id?: string;
+}
+/**
+ * Etkileşimli liste (APG Grid kalıbı, React Aria GridList): ↑ ↓ satırlar arasında, → satır
+ * içindeki eylemlere gider; tek ya da çoklu seçim (Shift ile aralık, Ctrl+A), satır eylemi,
+ * bağlantılı satır ve erişilebilir sürükle-bırak sıralama (tutamaçta Enter, oklar, Enter).
+ */
+export declare function ListView({ items, label, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, onAction, onReorder, variant, size, emptyState, className, id }: ListViewProps): import("react").JSX.Element;

package/dist/components/ListView/ListView.js

@@ -0,0 +1,95 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
+import { GripVerticalIcon } from "../../icons/generated/GripVerticalIcon.js";
+import ListView_module_default from "./ListView.module.js";
+import { moveKeys } from "./reorder.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, DropIndicator, GridList, GridListItem, useDragAndDrop } from "react-aria-components";
+// src/components/ListView/ListView.tsx
+/**
+* Etkileşimli liste (APG Grid kalıbı, React Aria GridList): ↑ ↓ satırlar arasında, → satır
+* içindeki eylemlere gider; tek ya da çoklu seçim (Shift ile aralık, Ctrl+A), satır eylemi,
+* bağlantılı satır ve erişilebilir sürükle-bırak sıralama (tutamaçta Enter, oklar, Enter).
+*/
+function ListView({ items, label, selectionMode = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, onAction, onReorder, variant = "bordered", size = "md", emptyState, className, id }) {
+	const t = useMessages();
+	const titles = new Map(items.map((item) => [item.id, item.title]));
+	const { dragAndDropHooks } = useDragAndDrop({
+		getItems: (keys) => [...keys].map((key) => ({ "text/plain": titles.get(String(key)) ?? "" })),
+		onReorder: (e) => {
+			if (e.target.dropPosition === "on") return;
+			const ids = items.map((item) => item.id);
+			const next = moveKeys(ids, [...e.keys].map(String), String(e.target.key), e.target.dropPosition);
+			if (next.join("\0") !== ids.join("\0")) onReorder?.(next);
+		},
+		renderDropIndicator: (target) => /* @__PURE__ */ jsx(DropIndicator, {
+			target,
+			className: ListView_module_default.dropIndicator
+		})
+	});
+	const allIds = () => items.filter((item) => !item.isDisabled).map((item) => item.id);
+	return /* @__PURE__ */ jsx(GridList, {
+		id,
+		"aria-label": label,
+		className: [ListView_module_default.root, className].filter(Boolean).join(" "),
+		"data-variant": variant,
+		"data-size": size,
+		selectionMode,
+		selectedKeys,
+		defaultSelectedKeys,
+		onSelectionChange: (keys) => onSelectionChange?.(keys === "all" ? allIds() : [...keys].map(String)),
+		onAction: onAction ? (key) => onAction(String(key)) : void 0,
+		disabledKeys: items.filter((item) => item.isDisabled).map((item) => item.id),
+		dragAndDropHooks: onReorder ? dragAndDropHooks : void 0,
+		renderEmptyState: () => /* @__PURE__ */ jsx("div", {
+			className: ListView_module_default.empty,
+			children: emptyState ?? t.listViewEmpty
+		}),
+		children: items.map((item) => /* @__PURE__ */ jsx(GridListItem, {
+			id: item.id,
+			textValue: item.title,
+			href: item.href,
+			className: ListView_module_default.row,
+			children: ({ selectionMode: mode, allowsDragging }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+				allowsDragging ? /* @__PURE__ */ jsx(Button, {
+					slot: "drag",
+					className: ListView_module_default.drag,
+					children: /* @__PURE__ */ jsx(GripVerticalIcon, {})
+				}) : null,
+				mode === "multiple" ? /* @__PURE__ */ jsx(Checkbox, {
+					slot: "selection",
+					className: ListView_module_default.check,
+					children: ({ isSelected }) => /* @__PURE__ */ jsx("span", {
+						className: ListView_module_default.box,
+						"aria-hidden": "true",
+						children: isSelected ? /* @__PURE__ */ jsx(CheckIcon, { className: ListView_module_default.mark }) : null
+					})
+				}) : null,
+				item.leading ? /* @__PURE__ */ jsx("span", {
+					className: ListView_module_default.leading,
+					children: item.leading
+				}) : null,
+				/* @__PURE__ */ jsxs("span", {
+					className: ListView_module_default.texts,
+					children: [/* @__PURE__ */ jsx("span", {
+						className: ListView_module_default.title,
+						children: item.title
+					}), item.description ? /* @__PURE__ */ jsx("span", {
+						className: ListView_module_default.description,
+						children: item.description
+					}) : null]
+				}),
+				item.meta ? /* @__PURE__ */ jsx("span", {
+					className: ListView_module_default.meta,
+					children: item.meta
+				}) : null,
+				item.actions ? /* @__PURE__ */ jsx("span", {
+					className: ListView_module_default.actions,
+					children: item.actions
+				}) : null
+			] })
+		}, item.id))
+	});
+}
+export { ListView };

package/dist/components/ListView/ListView.module.js

@@ -0,0 +1,19 @@
+import './ListView.css';
+// src/components/ListView/ListView.module.css
+var ListView_module_default = {
+	"root": "sti-ListView-root-0928e",
+	"row": "sti-ListView-row-899af",
+	"dropIndicator": "sti-ListView-dropIndicator-5b69d",
+	"drag": "sti-ListView-drag-d4c46",
+	"check": "sti-ListView-check-1cd9b",
+	"leading": "sti-ListView-leading-073c3",
+	"texts": "sti-ListView-texts-cc4bb",
+	"meta": "sti-ListView-meta-47075",
+	"actions": "sti-ListView-actions-0778d",
+	"box": "sti-ListView-box-4204b",
+	"mark": "sti-ListView-mark-f9d6b",
+	"title": "sti-ListView-title-0dcb3",
+	"description": "sti-ListView-description-9f9e3",
+	"empty": "sti-ListView-empty-93e95"
+};
+export { ListView_module_default as default };

package/dist/components/ListView/index.d.ts

@@ -0,0 +1,3 @@
+import { ListView, ListViewItem, ListViewProps } from "./ListView.js";
+import { moveKeys } from "./reorder.js";
+export { ListView, ListViewItem, ListViewProps, moveKeys };

package/dist/components/ListView/reorder.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Taşınan anahtarları hedef öğenin önüne ya da arkasına yerleştirir; taşınanların kendi sırası
+ * korunur. Hedef taşınanların arasındaysa ya da yoksa sıra değişmez. Saf işlev (sunucuda da çalışır).
+ */
+export declare function moveKeys(ids: readonly string[], moving: Iterable<string>, target: string, position: "before" | "after"): string[];

package/dist/components/ListView/reorder.js

@@ -0,0 +1,20 @@
+// src/components/ListView/reorder.ts
+/**
+* Taşınan anahtarları hedef öğenin önüne ya da arkasına yerleştirir; taşınanların kendi sırası
+* korunur. Hedef taşınanların arasındaysa ya da yoksa sıra değişmez. Saf işlev (sunucuda da çalışır).
+*/
+function moveKeys(ids, moving, target, position) {
+	const set = new Set(moving);
+	if (set.has(target)) return [...ids];
+	const rest = ids.filter((id) => !set.has(id));
+	const moved = ids.filter((id) => set.has(id));
+	let at = rest.indexOf(target);
+	if (at < 0 || moved.length === 0) return [...ids];
+	if (position === "after") at += 1;
+	return [
+		...rest.slice(0, at),
+		...moved,
+		...rest.slice(at)
+	];
+}
+export { moveKeys };

package/dist/components/Markdown/Markdown.js

@@ -1,7 +1,7 @@
 import { messagesFor } from "../../messages/messages.js";
 import { searchKey } from "../../text/text.js";
-import { CheckIcon } from "../../icons/generated/CheckIcon.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
 import { Prose } from "../Prose/Prose.js";
 import Markdown_module_default from "./Markdown.module.js";
 import { isExternal, parseMarkdown, plainText } from "./parse.js";

package/dist/components/Mentions/Mentions.js

@@ -1,9 +1,9 @@
 "use client";
 import { useFormatter, useLocale, useMessages } from "../../provider/UIProvider.js";
 import { matchesLoose, template } from "../../text/text.js";
+import { Avatar } from "../Avatar/Avatar.js";
 import { TextArea } from "../TextArea/TextArea.js";
 import { announce } from "../Alert/announcer.js";
-import { Avatar } from "../Avatar/Avatar.js";
 import Mentions_module_default from "./Mentions.module.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";

package/dist/components/NewPasswordField/NewPasswordField.js

@@ -1,8 +1,8 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
-import { CheckIcon } from "../../icons/generated/CheckIcon.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { CheckIcon } from "../../icons/generated/CheckIcon.js";
 import { PasswordField } from "../PasswordField/PasswordField.js";
 import { containsPersonalInfo, isCommonPassword } from "../PasswordStrength/estimate.js";
 import { PasswordStrength } from "../PasswordStrength/PasswordStrength.js";

package/dist/components/NotificationBell/NotificationBell.js

@@ -1,11 +1,11 @@
 "use client";
 import { useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { RelativeTime } from "../RelativeTime/RelativeTime.js";
 import { useThemeContext } from "../_internal/themeContext.js";
 import { IconButton } from "../IconButton/IconButton.js";
-import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { NavBadge } from "../_internal/nav/NavBadge.js";
-import { RelativeTime } from "../RelativeTime/RelativeTime.js";
 import { BellIcon } from "../../icons/generated/BellIcon.js";
 import { BellOffIcon } from "../../icons/generated/BellOffIcon.js";
 import NotificationBell_module_default from "./NotificationBell.module.js";

package/dist/components/NotificationCenter/NotificationCenter.js

@@ -1,14 +1,14 @@
 "use client";
 import { useFormatter, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
-import { IconButton } from "../IconButton/IconButton.js";
 import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { Button as Button$1 } from "../Button/Button.js";
 import { parseDateValue } from "../DateTime/instant.js";
 import { RelativeTime } from "../RelativeTime/RelativeTime.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/SegmentedControl.js";
 import { MailIcon } from "../../icons/generated/MailIcon.js";
 import { EmptyState } from "../EmptyState/EmptyState.js";
-import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/SegmentedControl.js";
 import { BellOffIcon } from "../../icons/generated/BellOffIcon.js";
 import { MailOpenIcon } from "../../icons/generated/MailOpenIcon.js";
 import NotificationCenter_module_default from "./NotificationCenter.module.js";