@stisocial/ui 0.2.1 → 0.3.0

package/dist/components/JsonViewer/JsonViewer.js

@@ -0,0 +1,109 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { ChevronRightIcon } from "../../icons/generated/ChevronRightIcon.js";
+import { CopyButton } from "../CopyButton/CopyButton.js";
+import { onOpenBranchKey } from "../_internal/tree/openBranchKey.js";
+import JsonViewer_module_default from "./JsonViewer.module.js";
+import { expandedIds, stringifyJson, toJsonTree } from "./jsonTree.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Button, Tree, TreeItem, TreeItemContent } from "react-aria-components";
+// src/components/JsonViewer/JsonViewer.tsx
+/**
+* JSON görüntüleyici: veriyi açılıp kapanan ağaç olarak gösterir (APG Tree). Alan adları ve türüne
+* göre renkli değerler; kapalı nesne ve dizinin öğe sayısı; bütün JSON'u kopyalama.
+*/
+function JsonViewer({ data, label, title, defaultExpandDepth = 1, copyable = true, maxHeight, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const root = useMemo(() => toJsonTree(data), [data]);
+	const text = useMemo(() => stringifyJson(data), [data]);
+	const expanded = useMemo(() => expandedIds(root, defaultExpandDepth), [root, defaultExpandDepth]);
+	const name = label ?? t.jsonViewerLabel;
+	const summary = (node) => node.type === "object" ? node.size === 0 ? "{}" : `{${template(t.jsonViewerKeys, { count: f.number(node.size) })}}` : `[${node.size === 0 ? "" : template(t.jsonViewerItems, { count: f.number(node.size) })}]`;
+	/** Ekran okuyucunun ve harfle aramanın kullandığı metin. */
+	const textValue = (node) => {
+		const k = node.key === null ? "" : `${node.key}: `;
+		if (node.type === "object" || node.type === "array") return `${k}${node.type === "object" ? t.jsonViewerObject : t.jsonViewerArray}, ${node.type === "object" ? template(t.jsonViewerKeys, { count: f.number(node.size) }) : template(t.jsonViewerItems, { count: f.number(node.size) })}`;
+		return `${k}${node.type === "invalid" ? t.jsonViewerInvalid : node.text}`;
+	};
+	const renderNode = (node) => /* @__PURE__ */ jsxs(TreeItem, {
+		id: node.id,
+		textValue: textValue(node),
+		className: JsonViewer_module_default.item,
+		children: [/* @__PURE__ */ jsx(TreeItemContent, { children: ({ hasChildItems, isExpanded }) => /* @__PURE__ */ jsxs("div", {
+			className: JsonViewer_module_default.row,
+			children: [
+				hasChildItems ? /* @__PURE__ */ jsx(Button, {
+					slot: "chevron",
+					className: JsonViewer_module_default.chevron,
+					"data-expanded": isExpanded || void 0,
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" })
+				}) : /* @__PURE__ */ jsx("span", {
+					className: JsonViewer_module_default.spacer,
+					"aria-hidden": "true"
+				}),
+				node.key !== null ? /* @__PURE__ */ jsxs("span", {
+					className: JsonViewer_module_default.key,
+					"data-index": typeof node.key === "number" || void 0,
+					children: [typeof node.key === "number" ? node.key : `"${node.key}"`, /* @__PURE__ */ jsx("span", {
+						className: JsonViewer_module_default.colon,
+						children: ":"
+					})]
+				}) : null,
+				node.type === "object" || node.type === "array" ? /* @__PURE__ */ jsx("span", {
+					className: JsonViewer_module_default.summary,
+					children: summary(node)
+				}) : /* @__PURE__ */ jsx("span", {
+					className: JsonViewer_module_default.value,
+					"data-type": node.type,
+					children: node.type === "string" ? `"${node.text}"` : node.type === "invalid" ? t.jsonViewerInvalid : node.text
+				})
+			]
+		}) }), node.children.map(renderNode)]
+	}, node.id);
+	const top = root.type === "object" || root.type === "array" ? root.children : [root];
+	const topExpanded = expanded.filter((x) => x !== root.id);
+	const copy = copyable ? /* @__PURE__ */ jsx(CopyButton, {
+		value: text,
+		label: t.jsonViewerCopy,
+		variant: "ghost",
+		size: "sm",
+		iconOnly: true,
+		className: JsonViewer_module_default.copy
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [JsonViewer_module_default.root, className].filter(Boolean).join(" "),
+		"data-max-height": maxHeight,
+		children: [title !== void 0 ? /* @__PURE__ */ jsxs("div", {
+			className: JsonViewer_module_default.head,
+			children: [/* @__PURE__ */ jsx("span", {
+				className: JsonViewer_module_default.title,
+				children: title
+			}), copy]
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: JsonViewer_module_default.body,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: JsonViewer_module_default.scroll,
+				dir: "ltr",
+				onKeyDownCapture: onOpenBranchKey,
+				children: /* @__PURE__ */ jsx(Tree, {
+					"aria-label": name,
+					className: JsonViewer_module_default.tree,
+					defaultExpandedKeys: topExpanded,
+					renderEmptyState: () => /* @__PURE__ */ jsx("span", {
+						className: JsonViewer_module_default.summary,
+						children: summary(root)
+					}),
+					children: top.map(renderNode)
+				})
+			}), title === void 0 && copy ? /* @__PURE__ */ jsx("div", {
+				className: JsonViewer_module_default.floating,
+				children: copy
+			}) : null]
+		})]
+	});
+}
+export { JsonViewer };

package/dist/components/JsonViewer/JsonViewer.module.js

@@ -0,0 +1,21 @@
+import './JsonViewer.css';
+// src/components/JsonViewer/JsonViewer.module.css
+var JsonViewer_module_default = {
+	"root": "sti-JsonViewer-root-e86b2",
+	"head": "sti-JsonViewer-head-e97fe",
+	"title": "sti-JsonViewer-title-62776",
+	"copy": "sti-JsonViewer-copy-3e0a0",
+	"body": "sti-JsonViewer-body-4bb56",
+	"floating": "sti-JsonViewer-floating-056b2",
+	"scroll": "sti-JsonViewer-scroll-8d190",
+	"tree": "sti-JsonViewer-tree-1a99c",
+	"item": "sti-JsonViewer-item-1a936",
+	"row": "sti-JsonViewer-row-46407",
+	"chevron": "sti-JsonViewer-chevron-7ac15",
+	"spacer": "sti-JsonViewer-spacer-5851f",
+	"key": "sti-JsonViewer-key-b1e01",
+	"colon": "sti-JsonViewer-colon-92e1d",
+	"summary": "sti-JsonViewer-summary-e40dc",
+	"value": "sti-JsonViewer-value-ef406"
+};
+export { JsonViewer_module_default as default };

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

@@ -0,0 +1,3 @@
+import { JsonViewer, JsonViewerProps } from "./JsonViewer.js";
+import { JsonNode, JsonNodeType, toJsonTree } from "./jsonTree.js";
+export { type JsonNode, type JsonNodeType, JsonViewer, JsonViewerProps, toJsonTree };

package/dist/components/JsonViewer/jsonTree.d.ts

@@ -0,0 +1,18 @@
+/**
+ * JSON değerini ağaç düğümlerine çevirir (saf işlev; sunucuda ve tarayıcıda aynı sonucu verir).
+ * Döngüsel başvuru, `undefined`, işlev ve sembol "geçersiz" yapraktır; dönüşüm çökmez.
+ */
+export type JsonNodeType = "object" | "array" | "string" | "number" | "boolean" | "null" | "invalid";
+export interface JsonNode {
+  /** Kökten yol ("$.musteri.adres[0]"); kalıcı anahtar. */
+  id: string;
+  /** Nesne alanının adı ya da dizi sırası; kökte `null`. */
+  key: string | number | null;
+  type: JsonNodeType;
+  /** Yaprak değerin metni (dize tırnaksız); nesne ve dizide boş. */
+  text: string;
+  /** Nesne ve dizinin çocuk sayısı. */
+  size: number;
+  children: JsonNode[];
+}
+export declare function toJsonTree(value: unknown, key?: string | number | null, id?: string, seen?: WeakSet<object>): JsonNode;

package/dist/components/JsonViewer/jsonTree.js

@@ -0,0 +1,76 @@
+// src/components/JsonViewer/jsonTree.ts
+const pathOf = (parent, key) => typeof key === "number" ? `${parent}[${key}]` : /^[A-Za-z_$][\w$]*$/.test(key) ? `${parent}.${key}` : `${parent}[${JSON.stringify(key)}]`;
+function toJsonTree(value, key = null, id = "$", seen = /* @__PURE__ */ new WeakSet()) {
+	const leaf = (type, text) => ({
+		id,
+		key,
+		type,
+		text,
+		size: 0,
+		children: []
+	});
+	if (value === null) return leaf("null", "null");
+	switch (typeof value) {
+		case "string": return leaf("string", value);
+		case "number": return Number.isFinite(value) ? leaf("number", String(value)) : leaf("null", "null");
+		case "boolean": return leaf("boolean", String(value));
+		case "bigint": return leaf("number", value.toString());
+		case "object": {
+			if (seen.has(value)) return leaf("invalid", "");
+			const json = value.toJSON;
+			if (typeof json === "function") return toJsonTree(json.call(value), key, id, seen);
+			seen.add(value);
+			if (Array.isArray(value)) {
+				const children = value.map((v, i) => toJsonTree(v, i, pathOf(id, i), seen));
+				seen.delete(value);
+				return {
+					id,
+					key,
+					type: "array",
+					text: "",
+					size: children.length,
+					children
+				};
+			}
+			const children = Object.entries(value).filter(([, v]) => v !== void 0 && typeof v !== "function" && typeof v !== "symbol").map(([k, v]) => toJsonTree(v, k, pathOf(id, k), seen));
+			seen.delete(value);
+			return {
+				id,
+				key,
+				type: "object",
+				text: "",
+				size: children.length,
+				children
+			};
+		}
+		default: return leaf("invalid", "");
+	}
+}
+/** Başlangıçta açık olacak düğümler: kök düzey 0'dır; `depth` kadar düzey açılır. */
+function expandedIds(root, depth) {
+	const out = [];
+	const walk = (node, level) => {
+		if (node.children.length === 0 || level >= depth) return;
+		out.push(node.id);
+		for (const child of node.children) walk(child, level + 1);
+	};
+	walk(root, 0);
+	return out;
+}
+/** Kopyalanacak metin: 2 boşluk girintili JSON; dönüştürülemezse boş. */
+function stringifyJson(value) {
+	const seen = /* @__PURE__ */ new WeakSet();
+	try {
+		return JSON.stringify(value, (_k, v) => {
+			if (typeof v === "bigint") return v.toString();
+			if (v && typeof v === "object") {
+				if (seen.has(v)) return void 0;
+				seen.add(v);
+			}
+			return v;
+		}, 2) ?? "";
+	} catch {
+		return "";
+	}
+}
+export { expandedIds, stringifyJson, toJsonTree };

package/dist/components/Kanban/Kanban.css

@@ -0,0 +1,225 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Kanban-root-ac46d {
+    --sti-kanban-lane-w: 18rem;
+    align-items: flex-start;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x proximity;
+    scrollbar-width: thin;
+    padding-block-end: var(--sti-space-2);
+    display: flex;
+    overflow-x: auto;
+  }
+
+  .sti-Kanban-lane-caed1 {
+    flex: 0 0 var(--sti-kanban-lane-w);
+    gap: var(--sti-space-2);
+    max-inline-size: calc(100% - var(--sti-space-8));
+    padding: var(--sti-space-3);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    scroll-snap-align: start;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-Kanban-laneHead-4b3bb {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-2);
+    padding-inline: var(--sti-space-1);
+    display: flex;
+  }
+
+  .sti-Kanban-laneTitle-cd8e6 {
+    font-size: var(--sti-font-size-sm);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-Kanban-count-4b831 {
+    padding: 0 var(--sti-space-2);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-surface-hover);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--sti-line-height-xs);
+  }
+
+  .sti-Kanban-count-4b831[data-over-limit] {
+    background: var(--sti-bg-warning-subtle);
+    color: var(--sti-fg-warning);
+    font-weight: var(--sti-font-weight-semibold);
+  }
+
+  .sti-Kanban-list-8f18c {
+    gap: var(--sti-space-2);
+    min-block-size: var(--sti-space-16);
+    border-radius: var(--sti-radius-md);
+    outline: none;
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-Kanban-list-8f18c[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-Kanban-list-8f18c[data-drop-target] {
+    outline: var(--sti-border-width-strong) dashed var(--sti-fg-accent);
+    outline-offset: var(--sti-space-1);
+    background: var(--sti-bg-accent-subtle);
+  }
+
+  .sti-Kanban-card-bba14 {
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-3);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--lightningcss-light, var(--sti-bg-canvas)) var(--lightningcss-dark, var(--sti-bg-surface));
+    box-shadow: none;
+    color: var(--sti-fg);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    transition: border-color var(--sti-duration-fast) var(--sti-ease-snap),
+      box-shadow var(--sti-duration-fast) var(--sti-ease-snap);
+    outline: none;
+    display: grid;
+  }
+
+  .sti-Kanban-card-bba14[data-has-action] {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .sti-Kanban-card-bba14[data-hovered] {
+      border-color: var(--sti-border);
+      box-shadow: var(--sti-shadow-sm);
+    }
+  }
+
+  .sti-Kanban-card-bba14[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-Kanban-card-bba14[data-dragging] {
+    opacity: .5;
+  }
+
+  .sti-Kanban-card-bba14[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--sti-opacity-disabled);
+  }
+
+  .sti-Kanban-cardTop-337cd {
+    align-items: flex-start;
+    gap: var(--sti-space-1);
+    margin-block: calc(var(--sti-space-1) * -1);
+    margin-inline: calc(var(--sti-space-2) * -1) calc(var(--sti-space-2) * -1);
+    display: flex;
+  }
+
+  .sti-Kanban-drag-28fd1 {
+    inline-size: var(--sti-space-6);
+    block-size: var(--sti-space-8);
+    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;
+    padding: 0;
+    display: inline-grid;
+  }
+
+  @media (hover: hover) {
+    .sti-Kanban-drag-28fd1[data-hovered] {
+      background: var(--sti-bg-surface-hover);
+      color: var(--sti-fg);
+    }
+  }
+
+  .sti-Kanban-drag-28fd1[data-focus-visible] {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-Kanban-title-ef9f7 {
+    min-inline-size: 0;
+    padding-block: calc(var(--sti-space-1) + 2px);
+    font-weight: var(--sti-font-weight-medium);
+    overflow-wrap: anywhere;
+    flex: auto;
+  }
+
+  .sti-Kanban-description-94317 {
+    color: var(--sti-fg-muted);
+    overflow-wrap: anywhere;
+  }
+
+  .sti-Kanban-meta-fcd3b {
+    align-items: center;
+    gap: var(--sti-space-2);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-Kanban-dropIndicator-33207 {
+    outline: none;
+  }
+
+  .sti-Kanban-dropIndicator-33207[data-drop-target] {
+    outline: var(--sti-border-width-strong) solid var(--sti-fg-accent);
+    block-size: 0;
+  }
+
+  .sti-Kanban-empty-36e0c {
+    min-block-size: var(--sti-space-16);
+    border: var(--sti-border-width) dashed var(--sti-border);
+    border-radius: var(--sti-radius-md);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    place-items: center;
+    margin: 0;
+    display: grid;
+  }
+
+  .sti-Kanban-srOnly-c26cc {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Kanban-card-bba14 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-Kanban-card-bba14 {
+      border-color: canvastext;
+    }
+
+    .sti-Kanban-card-bba14[data-focus-visible], .sti-Kanban-drag-28fd1[data-focus-visible], .sti-Kanban-list-8f18c[data-focus-visible], .sti-Kanban-dropIndicator-33207[data-drop-target], .sti-Kanban-list-8f18c[data-drop-target] {
+      outline-color: highlight;
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+import { KanbanCardBase } from "./moveCards.js";
+import { ReactNode } from "react";
+export interface KanbanColumn {
+  id: string;
+  title: string;
+  /** Sütundaki en çok kart (WIP sınırı); aşılınca sayı uyarı renginde ve metinle bildirilir. */
+  limit?: number;
+}
+export interface KanbanCard extends KanbanCardBase {
+  /** Kartın adı (düz metin): erişilebilir ad. */
+  title: string;
+  description?: ReactNode;
+  /** Kartın altında: etiketler, kişi, tarih. */
+  meta?: ReactNode;
+  isDisabled?: boolean;
+}
+export interface KanbanProps<C extends KanbanCard> {
+  /** Panonun adı (zorunlu). */
+  label: string;
+  columns: readonly KanbanColumn[];
+  /** Kartlar; sıra dizideki sıradır. */
+  cards: readonly C[];
+  /** Taşıma sonrası bütün kartların yeni dizisi (sürükle-bırak ya da "Taşı" menüsü). */
+  onCardsChange: (cards: C[], moved: {
+    ids: string[];
+    columnId: string;
+  }) => void;
+  /** Kart etkinleşince (tıklama, Enter): ayrıntıyı açmak için. */
+  onCardAction?: (id: string) => void;
+  /** Sütun boşken. */
+  emptyText?: string;
+  className?: string;
+  id?: string;
+}
+/**
+ * Kanban panosu: her sütun bir React Aria GridList'tir; kartlar tutamaçla sürüklenip sütun içinde
+ * sıralanır ya da başka sütuna bırakılır (klavyeyle de: tutamaçta Enter, Tab ile hedef sütun, oklar,
+ * Enter). Sürüklemeyen yol: her kartta "Taşı" menüsü (WCAG 2.5.7). Sütunda kart sayısı ve
+ * isteğe bağlı sınır (WIP).
+ */
+export declare function Kanban<C extends KanbanCard>({ label, columns, cards, onCardsChange, onCardAction, emptyText, className, id }: KanbanProps<C>): import("react").JSX.Element;

package/dist/components/Kanban/Kanban.js

@@ -0,0 +1,156 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { MoreHorizontalIcon } from "../../icons/generated/MoreHorizontalIcon.js";
+import { MenuItem as MenuItem$1, MenuSection as MenuSection$1 } from "../Menu/Menu.js";
+import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
+import { GripVerticalIcon } from "../../icons/generated/GripVerticalIcon.js";
+import Kanban_module_default from "./Kanban.module.js";
+import { moveCards } from "./moveCards.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, DropIndicator, GridList, GridListItem, isTextDropItem, useDragAndDrop } from "react-aria-components";
+// src/components/Kanban/Kanban.tsx
+const MIME = "application/x-sti-kanban-card";
+/**
+* Kanban panosu: her sütun bir React Aria GridList'tir; kartlar tutamaçla sürüklenip sütun içinde
+* sıralanır ya da başka sütuna bırakılır (klavyeyle de: tutamaçta Enter, Tab ile hedef sütun, oklar,
+* Enter). Sürüklemeyen yol: her kartta "Taşı" menüsü (WCAG 2.5.7). Sütunda kart sayısı ve
+* isteğe bağlı sınır (WIP).
+*/
+function Kanban({ label, columns, cards, onCardsChange, onCardAction, emptyText, className, id }) {
+	const t = useMessages();
+	const move = (ids, columnId, target) => onCardsChange(moveCards(cards, ids, columnId, target), {
+		ids,
+		columnId
+	});
+	return /* @__PURE__ */ jsx("section", {
+		id,
+		"aria-label": label,
+		className: [Kanban_module_default.root, className].filter(Boolean).join(" "),
+		children: columns.map((column) => /* @__PURE__ */ jsx(KanbanLane, {
+			column,
+			columns,
+			cards: cards.filter((c) => c.columnId === column.id),
+			move,
+			onCardAction,
+			emptyText: emptyText ?? t.kanbanEmpty
+		}, column.id))
+	});
+}
+function KanbanLane({ column, columns, cards, move, onCardAction, emptyText }) {
+	const t = useMessages();
+	const headingId = `kanban-${column.id}`;
+	const over = column.limit !== void 0 && cards.length > column.limit;
+	const readIds = async (items) => (await Promise.all(items.filter(isTextDropItem).map(async (item) => JSON.parse(await item.getText(MIME))))).filter((x) => typeof x === "string");
+	const { dragAndDropHooks } = useDragAndDrop({
+		getItems: (keys) => [...keys].map((key) => ({
+			[MIME]: JSON.stringify(String(key)),
+			"text/plain": cards.find((c) => c.id === String(key))?.title ?? ""
+		})),
+		acceptedDragTypes: [MIME],
+		getDropOperation: () => "move",
+		onReorder: (e) => {
+			if (e.target.dropPosition === "on") return;
+			move([...e.keys].map(String), column.id, {
+				id: String(e.target.key),
+				position: e.target.dropPosition
+			});
+		},
+		onInsert: async (e) => {
+			if (e.target.dropPosition === "on") return;
+			move(await readIds(e.items), column.id, {
+				id: String(e.target.key),
+				position: e.target.dropPosition
+			});
+		},
+		onRootDrop: async (e) => {
+			move(await readIds(e.items), column.id);
+		},
+		renderDropIndicator: (target) => /* @__PURE__ */ jsx(DropIndicator, {
+			target,
+			className: Kanban_module_default.dropIndicator
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: Kanban_module_default.lane,
+		"data-over-limit": over ? "" : void 0,
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: Kanban_module_default.laneHead,
+			children: [/* @__PURE__ */ jsx("h3", {
+				id: headingId,
+				className: Kanban_module_default.laneTitle,
+				children: column.title
+			}), /* @__PURE__ */ jsxs("span", {
+				className: Kanban_module_default.count,
+				"data-over-limit": over ? "" : void 0,
+				children: [column.limit !== void 0 ? template(t.kanbanLimit, {
+					count: cards.length,
+					limit: column.limit
+				}) : cards.length, over ? /* @__PURE__ */ jsxs("span", {
+					className: Kanban_module_default.srOnly,
+					children: [" ", t.kanbanOverLimit]
+				}) : null]
+			})]
+		}), /* @__PURE__ */ jsx(GridList, {
+			"aria-labelledby": headingId,
+			className: Kanban_module_default.list,
+			items: cards,
+			dragAndDropHooks,
+			onAction: onCardAction ? (key) => onCardAction(String(key)) : void 0,
+			disabledKeys: cards.filter((c) => c.isDisabled).map((c) => c.id),
+			renderEmptyState: () => /* @__PURE__ */ jsx("p", {
+				className: Kanban_module_default.empty,
+				children: emptyText
+			}),
+			children: (card) => /* @__PURE__ */ jsxs(GridListItem, {
+				id: card.id,
+				textValue: card.title,
+				className: Kanban_module_default.card,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: Kanban_module_default.cardTop,
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								slot: "drag",
+								className: Kanban_module_default.drag,
+								children: /* @__PURE__ */ jsx(GripVerticalIcon, {})
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: Kanban_module_default.title,
+								children: card.title
+							}),
+							/* @__PURE__ */ jsx(DropdownMenu, {
+								placement: "bottom end",
+								trigger: /* @__PURE__ */ jsx(IconButton, {
+									size: "sm",
+									variant: "ghost",
+									label: template(t.kanbanMoveCard, { title: card.title }),
+									icon: /* @__PURE__ */ jsx(MoreHorizontalIcon, {})
+								}),
+								disabledKeys: [column.id],
+								onAction: (to) => move([card.id], to),
+								children: /* @__PURE__ */ jsx(MenuSection$1, {
+									title: t.kanbanMoveTo,
+									children: columns.map((c) => /* @__PURE__ */ jsx(MenuItem$1, {
+										id: c.id,
+										children: c.title
+									}, c.id))
+								})
+							})
+						]
+					}),
+					card.description ? /* @__PURE__ */ jsx("div", {
+						className: Kanban_module_default.description,
+						children: card.description
+					}) : null,
+					card.meta ? /* @__PURE__ */ jsx("div", {
+						className: Kanban_module_default.meta,
+						children: card.meta
+					}) : null
+				]
+			})
+		})]
+	});
+}
+export { Kanban };

package/dist/components/Kanban/Kanban.module.js

@@ -0,0 +1,20 @@
+import './Kanban.css';
+// src/components/Kanban/Kanban.module.css
+var Kanban_module_default = {
+	"root": "sti-Kanban-root-ac46d",
+	"lane": "sti-Kanban-lane-caed1",
+	"laneHead": "sti-Kanban-laneHead-4b3bb",
+	"laneTitle": "sti-Kanban-laneTitle-cd8e6",
+	"count": "sti-Kanban-count-4b831",
+	"list": "sti-Kanban-list-8f18c",
+	"card": "sti-Kanban-card-bba14",
+	"cardTop": "sti-Kanban-cardTop-337cd",
+	"drag": "sti-Kanban-drag-28fd1",
+	"title": "sti-Kanban-title-ef9f7",
+	"description": "sti-Kanban-description-94317",
+	"meta": "sti-Kanban-meta-fcd3b",
+	"dropIndicator": "sti-Kanban-dropIndicator-33207",
+	"empty": "sti-Kanban-empty-36e0c",
+	"srOnly": "sti-Kanban-srOnly-c26cc"
+};
+export { Kanban_module_default as default };

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

@@ -0,0 +1,3 @@
+import { KanbanCardBase, moveCards } from "./moveCards.js";
+import { Kanban, KanbanCard, KanbanColumn, KanbanProps } from "./Kanban.js";
+export { Kanban, KanbanCard, KanbanCardBase, KanbanColumn, KanbanProps, moveCards };