@countermeasure-platform/web-components 0.2.0

package/dist/react/primitives/json-path-browser.js

@@ -0,0 +1,191 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import * as i from "react";
+//#region src/react/primitives/json-path-browser.tsx
+function a(e) {
+	return e === null ? "null" : Array.isArray(e) ? "array" : typeof e;
+}
+function o(e) {
+	return e === null ? "null" : typeof e == "string" ? `"${e}"` : typeof e == "number" || typeof e == "boolean" ? String(e) : "";
+}
+function s(e) {
+	return e === null ? "null" : Array.isArray(e) ? `[${e.length}]` : typeof e == "object" ? `{${Object.keys(e).length}}` : typeof e == "string" ? "str" : typeof e == "number" ? "123" : typeof e == "boolean" ? "bool" : typeof e;
+}
+function c(e) {
+	return typeof e == "object" && !!e;
+}
+function l(e) {
+	navigator.clipboard.writeText(e).catch(() => {});
+}
+function u(e, t, n) {
+	return n.length === 0 ? !1 : e.toLowerCase().includes(n) ? !0 : c(t) ? !1 : o(t).toLowerCase().includes(n);
+}
+function d({ path: i, nodeKey: f, value: p, depth: m, showTypes: h, searchQuery: g, expandedPaths: _, selectedPath: v, onToggle: y, onSelectPath: b }) {
+	let x = u(f, p, g);
+	if (c(p)) {
+		let a = _.has(i), o = Array.isArray(p) ? p.map((e, t) => [String(t), e]) : Object.entries(p);
+		return /* @__PURE__ */ r("div", {
+			style: { paddingLeft: `${m * 16}px` },
+			children: [/* @__PURE__ */ r("div", {
+				className: e("flex items-center gap-1 rounded px-1 py-0.5 text-sm", x && "bg-accent-amber/10", v === i && "bg-surface-secondary"),
+				children: [
+					/* @__PURE__ */ n("button", {
+						onClick: () => y(i),
+						className: "text-foreground-secondary shrink-0 font-mono text-xs",
+						children: a ? "▾" : "▸"
+					}),
+					f.length > 0 && /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("span", {
+						className: "text-accent-cyan cursor-pointer font-mono",
+						onClick: () => b(i, p),
+						children: f
+					}), /* @__PURE__ */ n("span", {
+						className: "text-foreground-secondary",
+						children: ": "
+					})] }),
+					h && /* @__PURE__ */ n("span", {
+						className: e("rounded px-1 py-0.5 font-mono text-[10px]", "bg-surface-secondary text-foreground-secondary"),
+						children: s(p)
+					})
+				]
+			}), a && /* @__PURE__ */ n("div", { children: o.map(([e, t]) => /* @__PURE__ */ n(d, {
+				path: Array.isArray(p) ? `${i}[${e}]` : `${i}.${e}`,
+				nodeKey: e,
+				value: t,
+				depth: m + 1,
+				showTypes: h,
+				searchQuery: g,
+				expandedPaths: _,
+				selectedPath: v,
+				onToggle: y,
+				onSelectPath: b
+			}, e)) })]
+		});
+	}
+	let S = a(p);
+	return /* @__PURE__ */ n("div", {
+		style: { paddingLeft: `${m * 16}px` },
+		children: /* @__PURE__ */ r("div", {
+			className: e("flex items-center gap-1 rounded px-1 py-0.5 text-sm", x && "bg-accent-amber/10", v === i && "bg-surface-secondary"),
+			children: [
+				/* @__PURE__ */ n("span", { className: "w-3.5 shrink-0" }),
+				f.length > 0 && /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("span", {
+					className: "text-accent-cyan cursor-pointer font-mono",
+					onClick: () => b(i, p),
+					children: f
+				}), /* @__PURE__ */ n("span", {
+					className: "text-foreground-secondary",
+					children: ": "
+				})] }),
+				/* @__PURE__ */ n("span", {
+					className: e("cursor-pointer font-mono", S === "string" && "text-accent-amber", S === "number" && "text-accent-violet", S === "boolean" && "text-accent-rose", S === "null" && "text-foreground-secondary italic"),
+					title: "Click to copy value",
+					onClick: () => {
+						b(i, p), l(typeof p == "object" ? JSON.stringify(p) : String(p));
+					},
+					children: o(p)
+				}),
+				h && /* @__PURE__ */ n("span", {
+					className: e("rounded px-1 py-0.5 font-mono text-[10px]", "bg-surface-secondary text-foreground-secondary"),
+					children: s(p)
+				})
+			]
+		})
+	});
+}
+var f = 100;
+function p(e, t, n, r = 0) {
+	if (!(r > f || !c(e))) if (n.add(t), Array.isArray(e)) e.forEach((e, i) => p(e, `${t}[${i}]`, n, r + 1));
+	else for (let [i, a] of Object.entries(e)) p(a, `${t}.${i}`, n, r + 1);
+}
+function m(e, t, n, r, i = 0) {
+	if (i > f) return !1;
+	if (!c(e)) return o(e).toLowerCase().includes(n);
+	let a = !1;
+	if (Array.isArray(e)) e.forEach((e, o) => {
+		m(e, `${t}[${o}]`, n, r, i + 1) && (a = !0);
+	});
+	else for (let [o, s] of Object.entries(e)) o.toLowerCase().includes(n) && (a = !0), m(s, `${t}.${o}`, n, r, i + 1) && (a = !0);
+	return a && r.add(t), a;
+}
+function h({ data: t, expanded: a = !1, searchable: o = !0, showPath: s = !0, showTypes: c = !0, onSelect: u, className: f, ...h }) {
+	let [g, _] = i.useState(() => {
+		if (a) {
+			let e = /* @__PURE__ */ new Set();
+			return p(t, "$", e), e;
+		}
+		return /* @__PURE__ */ new Set();
+	}), [v, y] = i.useState(""), [b, x] = i.useState(""), S = i.useCallback((e) => {
+		_((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, []), C = i.useCallback((e, t) => {
+		y(e), u?.(e, t);
+	}, [u]), w = () => {
+		let e = /* @__PURE__ */ new Set();
+		p(t, "$", e), _(e);
+	}, T = () => {
+		_(/* @__PURE__ */ new Set());
+	}, E = (e) => {
+		if (x(e.toLowerCase()), e.length > 0) {
+			let n = /* @__PURE__ */ new Set();
+			m(t, "$", e.toLowerCase(), n), _(n);
+		}
+	}, D = () => {
+		l(v.length > 0 ? v : "$");
+	};
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "json-path-browser",
+		className: e("bg-glass border-border-glass flex flex-col rounded-lg border backdrop-blur-[20px]", f),
+		...h,
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "border-border-glass flex items-center gap-2 border-b px-3 py-2",
+				children: [
+					/* @__PURE__ */ n("button", {
+						onClick: w,
+						className: "bg-surface-secondary text-foreground-secondary hover:text-foreground rounded px-2 py-1 text-xs transition-colors",
+						children: "Expand All"
+					}),
+					/* @__PURE__ */ n("button", {
+						onClick: T,
+						className: "bg-surface-secondary text-foreground-secondary hover:text-foreground rounded px-2 py-1 text-xs transition-colors",
+						children: "Collapse All"
+					}),
+					o && /* @__PURE__ */ n("input", {
+						type: "text",
+						placeholder: "Search keys or values...",
+						className: "bg-surface-secondary text-foreground placeholder:text-foreground-secondary ml-auto rounded px-2 py-1 text-xs outline-none",
+						onChange: (e) => E(e.target.value)
+					})
+				]
+			}),
+			s && /* @__PURE__ */ n("div", {
+				className: "border-border-glass text-foreground-secondary cursor-pointer border-b px-3 py-1.5 font-mono text-xs transition-colors hover:text-foreground",
+				title: "Click to copy path",
+				onClick: D,
+				children: v.length > 0 ? v : "$"
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "flex-1 overflow-auto p-2",
+				children: /* @__PURE__ */ n(d, {
+					path: "$",
+					nodeKey: "",
+					value: t,
+					depth: 0,
+					showTypes: c,
+					searchQuery: b,
+					expandedPaths: g,
+					selectedPath: v,
+					onToggle: S,
+					onSelectPath: C
+				})
+			})
+		]
+	});
+}
+h.displayName = "JsonPathBrowser";
+//#endregion
+export { h as JsonPathBrowser };
+
+//# sourceMappingURL=json-path-browser.js.map

package/dist/react/primitives/json-path-browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-path-browser.js","names":[],"sources":["../../../src/react/primitives/json-path-browser.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from './utils'\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface JsonPathBrowserProps extends Omit<React.ComponentProps<'div'>, 'onSelect'> {\n  data: unknown\n  expanded?: boolean\n  searchable?: boolean\n  showPath?: boolean\n  showTypes?: boolean\n  onSelect?: (path: string, value: unknown) => void\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getValueType(value: unknown): string {\n  if (value === null) return 'null'\n  if (Array.isArray(value)) return 'array'\n  return typeof value\n}\n\nfunction formatValue(value: unknown): string {\n  if (value === null) return 'null'\n  if (typeof value === 'string') return `\"${value}\"`\n  if (typeof value === 'number' || typeof value === 'boolean') return String(value)\n  return ''\n}\n\nfunction getTypeBadge(value: unknown): string {\n  if (value === null) return 'null'\n  if (Array.isArray(value)) return `[${value.length}]`\n  if (typeof value === 'object') return `{${Object.keys(value).length}}`\n  if (typeof value === 'string') return 'str'\n  if (typeof value === 'number') return '123'\n  if (typeof value === 'boolean') return 'bool'\n  return typeof value\n}\n\nfunction isComposite(value: unknown): value is Record<string, unknown> | unknown[] {\n  return value !== null && typeof value === 'object'\n}\n\nfunction copyText(text: string): void {\n  void navigator.clipboard.writeText(text).catch(() => {})\n}\n\n// ---------------------------------------------------------------------------\n// JsonNode (recursive renderer)\n// ---------------------------------------------------------------------------\n\ninterface JsonNodeProps {\n  path: string\n  nodeKey: string\n  value: unknown\n  depth: number\n  showTypes: boolean\n  searchQuery: string\n  expandedPaths: Set<string>\n  selectedPath: string\n  onToggle: (path: string) => void\n  onSelectPath: (path: string, value: unknown) => void\n}\n\nfunction matchesSearch(key: string, value: unknown, query: string): boolean {\n  if (query.length === 0) return false\n  if (key.toLowerCase().includes(query)) return true\n  if (!isComposite(value)) {\n    return formatValue(value).toLowerCase().includes(query)\n  }\n  return false\n}\n\nfunction JsonNode({\n  path,\n  nodeKey,\n  value,\n  depth,\n  showTypes,\n  searchQuery,\n  expandedPaths,\n  selectedPath,\n  onToggle,\n  onSelectPath,\n}: JsonNodeProps) {\n  const isMatch = matchesSearch(nodeKey, value, searchQuery)\n\n  if (isComposite(value)) {\n    const expanded = expandedPaths.has(path)\n    const entries = Array.isArray(value)\n      ? value.map((v, i) => [String(i), v] as [string, unknown])\n      : Object.entries(value)\n\n    return (\n      <div style={{ paddingLeft: `${depth * 16}px` }}>\n        <div\n          className={cn(\n            'flex items-center gap-1 rounded px-1 py-0.5 text-sm',\n            isMatch && 'bg-accent-amber/10',\n            selectedPath === path && 'bg-surface-secondary'\n          )}\n        >\n          <button\n            onClick={() => onToggle(path)}\n            className=\"text-foreground-secondary shrink-0 font-mono text-xs\"\n          >\n            {expanded ? '\\u25BE' : '\\u25B8'}\n          </button>\n          {nodeKey.length > 0 && (\n            <>\n              <span\n                className=\"text-accent-cyan cursor-pointer font-mono\"\n                onClick={() => onSelectPath(path, value)}\n              >\n                {nodeKey}\n              </span>\n              <span className=\"text-foreground-secondary\">: </span>\n            </>\n          )}\n          {showTypes && (\n            <span\n              className={cn(\n                'rounded px-1 py-0.5 font-mono text-[10px]',\n                'bg-surface-secondary text-foreground-secondary'\n              )}\n            >\n              {getTypeBadge(value)}\n            </span>\n          )}\n        </div>\n        {expanded && (\n          <div>\n            {entries.map(([childKey, childValue]) => {\n              const childPath = Array.isArray(value)\n                ? `${path}[${childKey}]`\n                : `${path}.${childKey}`\n              return (\n                <JsonNode\n                  key={childKey}\n                  path={childPath}\n                  nodeKey={childKey}\n                  value={childValue}\n                  depth={depth + 1}\n                  showTypes={showTypes}\n                  searchQuery={searchQuery}\n                  expandedPaths={expandedPaths}\n                  selectedPath={selectedPath}\n                  onToggle={onToggle}\n                  onSelectPath={onSelectPath}\n                />\n              )\n            })}\n          </div>\n        )}\n      </div>\n    )\n  }\n\n  // Leaf node\n  const valueType = getValueType(value)\n\n  return (\n    <div style={{ paddingLeft: `${depth * 16}px` }}>\n      <div\n        className={cn(\n          'flex items-center gap-1 rounded px-1 py-0.5 text-sm',\n          isMatch && 'bg-accent-amber/10',\n          selectedPath === path && 'bg-surface-secondary'\n        )}\n      >\n        <span className=\"w-3.5 shrink-0\" />\n        {nodeKey.length > 0 && (\n          <>\n            <span\n              className=\"text-accent-cyan cursor-pointer font-mono\"\n              onClick={() => onSelectPath(path, value)}\n            >\n              {nodeKey}\n            </span>\n            <span className=\"text-foreground-secondary\">: </span>\n          </>\n        )}\n        <span\n          className={cn(\n            'cursor-pointer font-mono',\n            valueType === 'string' && 'text-accent-amber',\n            valueType === 'number' && 'text-accent-violet',\n            valueType === 'boolean' && 'text-accent-rose',\n            valueType === 'null' && 'text-foreground-secondary italic'\n          )}\n          title=\"Click to copy value\"\n          onClick={() => {\n            onSelectPath(path, value)\n            const text = typeof value === 'object' ? JSON.stringify(value) : String(value)\n            copyText(text)\n          }}\n        >\n          {formatValue(value)}\n        </span>\n        {showTypes && (\n          <span\n            className={cn(\n              'rounded px-1 py-0.5 font-mono text-[10px]',\n              'bg-surface-secondary text-foreground-secondary'\n            )}\n          >\n            {getTypeBadge(value)}\n          </span>\n        )}\n      </div>\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Helpers for expanding paths\n// ---------------------------------------------------------------------------\n\nconst MAX_RECURSION_DEPTH = 100\n\nfunction collectAllPaths(value: unknown, path: string, set: Set<string>, depth = 0): void {\n  if (depth > MAX_RECURSION_DEPTH || !isComposite(value)) return\n  set.add(path)\n  if (Array.isArray(value)) {\n    value.forEach((v, i) => collectAllPaths(v, `${path}[${i}]`, set, depth + 1))\n  } else {\n    for (const [key, child] of Object.entries(value)) {\n      collectAllPaths(child, `${path}.${key}`, set, depth + 1)\n    }\n  }\n}\n\nfunction expandMatchingPaths(\n  value: unknown,\n  path: string,\n  query: string,\n  set: Set<string>,\n  depth = 0\n): boolean {\n  if (depth > MAX_RECURSION_DEPTH) return false\n  if (!isComposite(value)) {\n    return formatValue(value).toLowerCase().includes(query)\n  }\n  let hasMatch = false\n  if (Array.isArray(value)) {\n    value.forEach((v, i) => {\n      if (expandMatchingPaths(v, `${path}[${i}]`, query, set, depth + 1)) hasMatch = true\n    })\n  } else {\n    for (const [key, child] of Object.entries(value)) {\n      if (key.toLowerCase().includes(query)) hasMatch = true\n      if (expandMatchingPaths(child, `${path}.${key}`, query, set, depth + 1)) hasMatch = true\n    }\n  }\n  if (hasMatch) set.add(path)\n  return hasMatch\n}\n\n// ---------------------------------------------------------------------------\n// JsonPathBrowser\n// ---------------------------------------------------------------------------\n\nfunction JsonPathBrowser({\n  data,\n  expanded = false,\n  searchable = true,\n  showPath = true,\n  showTypes = true,\n  onSelect,\n  className,\n  ...props\n}: JsonPathBrowserProps) {\n  const [expandedPaths, setExpandedPaths] = React.useState<Set<string>>(() => {\n    if (expanded) {\n      const set = new Set<string>()\n      collectAllPaths(data, '$', set)\n      return set\n    }\n    return new Set<string>()\n  })\n  const [selectedPath, setSelectedPath] = React.useState('')\n  const [searchQuery, setSearchQuery] = React.useState('')\n\n  const handleToggle = React.useCallback((path: string) => {\n    setExpandedPaths(prev => {\n      const next = new Set(prev)\n      if (next.has(path)) {\n        next.delete(path)\n      } else {\n        next.add(path)\n      }\n      return next\n    })\n  }, [])\n\n  const handleSelectPath = React.useCallback(\n    (path: string, value: unknown) => {\n      setSelectedPath(path)\n      onSelect?.(path, value)\n    },\n    [onSelect]\n  )\n\n  const handleExpandAll = () => {\n    const set = new Set<string>()\n    collectAllPaths(data, '$', set)\n    setExpandedPaths(set)\n  }\n\n  const handleCollapseAll = () => {\n    setExpandedPaths(new Set())\n  }\n\n  const handleSearch = (query: string) => {\n    setSearchQuery(query.toLowerCase())\n    if (query.length > 0) {\n      const set = new Set<string>()\n      expandMatchingPaths(data, '$', query.toLowerCase(), set)\n      setExpandedPaths(set)\n    }\n  }\n\n  const handlePathCopy = () => {\n    const pathText = selectedPath.length > 0 ? selectedPath : '$'\n    copyText(pathText)\n  }\n\n  return (\n    <div\n      data-slot=\"json-path-browser\"\n      className={cn(\n        'bg-glass border-border-glass flex flex-col rounded-lg border backdrop-blur-[20px]',\n        className\n      )}\n      {...props}\n    >\n      {/* Toolbar */}\n      <div className=\"border-border-glass flex items-center gap-2 border-b px-3 py-2\">\n        <button\n          onClick={handleExpandAll}\n          className=\"bg-surface-secondary text-foreground-secondary hover:text-foreground rounded px-2 py-1 text-xs transition-colors\"\n        >\n          Expand All\n        </button>\n        <button\n          onClick={handleCollapseAll}\n          className=\"bg-surface-secondary text-foreground-secondary hover:text-foreground rounded px-2 py-1 text-xs transition-colors\"\n        >\n          Collapse All\n        </button>\n        {searchable && (\n          <input\n            type=\"text\"\n            placeholder=\"Search keys or values...\"\n            className=\"bg-surface-secondary text-foreground placeholder:text-foreground-secondary ml-auto rounded px-2 py-1 text-xs outline-none\"\n            onChange={e => handleSearch(e.target.value)}\n          />\n        )}\n      </div>\n\n      {/* Path bar */}\n      {showPath && (\n        <div\n          className=\"border-border-glass text-foreground-secondary cursor-pointer border-b px-3 py-1.5 font-mono text-xs transition-colors hover:text-foreground\"\n          title=\"Click to copy path\"\n          onClick={handlePathCopy}\n        >\n          {selectedPath.length > 0 ? selectedPath : '$'}\n        </div>\n      )}\n\n      {/* Tree */}\n      <div className=\"flex-1 overflow-auto p-2\">\n        <JsonNode\n          path=\"$\"\n          nodeKey=\"\"\n          value={data}\n          depth={0}\n          showTypes={showTypes}\n          searchQuery={searchQuery}\n          expandedPaths={expandedPaths}\n          selectedPath={selectedPath}\n          onToggle={handleToggle}\n          onSelectPath={handleSelectPath}\n        />\n      </div>\n    </div>\n  )\n}\nJsonPathBrowser.displayName = 'JsonPathBrowser'\n\nexport { JsonPathBrowser }\n"],"mappings":"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"}

package/dist/react/primitives/kanban.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+export interface KanbanAssignee {
+    id: string;
+    name: string;
+    kind?: string;
+    avatarUrl?: string;
+}
+export interface KanbanCardData {
+    id: string;
+    title: string;
+    description?: string;
+    labels?: {
+        text: string;
+        color: string;
+    }[];
+    assignee?: string;
+    priority?: 'low' | 'medium' | 'high' | 'critical';
+    dueDate?: string | Date;
+    assignees?: KanbanAssignee[];
+    issueKey?: string;
+    issueType?: string;
+    storyPoints?: number;
+    completionPercentage?: number;
+    subtaskCount?: number;
+    subtaskCompleted?: number;
+}
+export interface KanbanColumnData {
+    id: string;
+    title: string;
+    cards: KanbanCardData[];
+    limit?: number;
+    color?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    emptyMessage?: string;
+    addButton?: boolean;
+}
+export interface KanbanBoardProps extends React.ComponentProps<'div'> {
+    columns: KanbanColumnData[];
+    draggable?: boolean;
+    onCardMove?: (cardId: string, fromColumn: string, toColumn: string, index: number) => void;
+    onCardClick?: (card: KanbanCardData) => void;
+    onAddCard?: (columnId: string) => void;
+    descriptionMaxLength?: number;
+    maxLabels?: number;
+}
+interface KanbanCardProps {
+    card: KanbanCardData;
+    columnId: string;
+    isDraggable: boolean;
+    descriptionMaxLength: number;
+    maxLabels: number;
+    onClick?: ((card: KanbanCardData) => void) | undefined;
+    onDragStart: (cardId: string, columnId: string) => void;
+}
+declare function KanbanCard({ card, columnId, isDraggable, descriptionMaxLength, maxLabels, onClick, onDragStart, }: KanbanCardProps): import("react/jsx-runtime").JSX.Element;
+interface KanbanColumnProps {
+    column: KanbanColumnData;
+    isDraggable: boolean;
+    descriptionMaxLength: number;
+    maxLabels: number;
+    onCardClick?: ((card: KanbanCardData) => void) | undefined;
+    onAddCard?: ((columnId: string) => void) | undefined;
+    onDragStart: (cardId: string, columnId: string) => void;
+    onDrop: (columnId: string, index: number) => void;
+}
+declare function KanbanColumn({ column, isDraggable, descriptionMaxLength, maxLabels, onCardClick, onAddCard, onDragStart, onDrop, }: KanbanColumnProps): import("react/jsx-runtime").JSX.Element;
+declare function KanbanBoard({ columns, draggable, onCardMove, onCardClick, onAddCard, descriptionMaxLength, maxLabels, className, ...props }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;
+declare namespace KanbanBoard {
+    var displayName: string;
+}
+export { KanbanBoard, KanbanColumn, KanbanCard };
+//# sourceMappingURL=kanban.d.ts.map

package/dist/react/primitives/kanban.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kanban.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/kanban.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAA;IACjD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,EAAE,CAAA;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1F,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAA;IAC5C,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAMD,UAAU,eAAe;IACvB,IAAI,EAAE,cAAc,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,OAAO,CAAA;IACpB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACtD,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACxD;AASD,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,oBAAoB,EACpB,SAAS,EACT,OAAO,EACP,WAAW,GACZ,EAAE,eAAe,2CAyHjB;AAMD,UAAU,iBAAiB;IACzB,MAAM,EAAE,gBAAgB,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IAC1D,SAAS,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAA;IACpD,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACvD,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,iBAAS,YAAY,CAAC,EACpB,MAAM,EACN,WAAW,EACX,oBAAoB,EACpB,SAAS,EACT,WAAW,EACX,SAAS,EACT,WAAW,EACX,MAAM,GACP,EAAE,iBAAiB,2CA0GnB;AAMD,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,SAAgB,EAChB,UAAU,EACV,WAAW,EACX,SAAS,EACT,oBAA0B,EAC1B,SAAa,EACb,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAiElB;kBA3EQ,WAAW;;;AA8EpB,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,CAAA"}

package/dist/react/primitives/kanban.js

@@ -0,0 +1,210 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import * as r from "react";
+//#region src/react/primitives/kanban.tsx
+var i = {
+	critical: "border-l-accent-rose border-l-2",
+	high: "border-l-accent-amber border-l-2",
+	medium: "border-l-accent-cyan border-l-2",
+	low: "border-l-accent-violet border-l-2"
+};
+function a({ card: a, columnId: o, isDraggable: s, descriptionMaxLength: c, maxLabels: l, onClick: u, onDragStart: d }) {
+	let f = (e) => {
+		e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", a.id), d(a.id, o);
+	}, p = a.description && a.description.length > c ? a.description.slice(0, c) + "..." : a.description, m = r.useMemo(() => a.completionPercentage === void 0 ? a.subtaskCount && a.subtaskCount > 0 ? (a.subtaskCompleted ?? 0) / a.subtaskCount * 100 : null : a.completionPercentage, [
+		a.completionPercentage,
+		a.subtaskCount,
+		a.subtaskCompleted
+	]);
+	return /* @__PURE__ */ n("div", {
+		className: e("bg-glass border-border-glass rounded-lg border p-3 backdrop-blur-[20px] transition-all", "hover:border-border-glass/80 cursor-pointer hover:shadow-sm", a.priority && i[a.priority]),
+		draggable: s,
+		onDragStart: s ? f : void 0,
+		onClick: () => u?.(a),
+		role: "listitem",
+		tabIndex: 0,
+		children: [
+			(a.issueKey || a.issueType || a.storyPoints !== void 0) && /* @__PURE__ */ n("div", {
+				className: "text-foreground-secondary mb-1.5 flex items-center gap-2 text-xs",
+				children: [
+					a.issueKey && /* @__PURE__ */ t("span", {
+						className: "font-medium",
+						children: a.issueKey
+					}),
+					a.issueType && /* @__PURE__ */ t("span", { children: a.issueType }),
+					a.storyPoints !== void 0 && /* @__PURE__ */ t("span", {
+						className: "bg-surface-secondary rounded-full px-1.5 py-0.5 text-[10px]",
+						children: a.storyPoints
+					})
+				]
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "text-foreground text-sm font-medium",
+				children: a.title
+			}),
+			p && /* @__PURE__ */ t("div", {
+				className: "text-foreground-secondary mt-1 text-xs",
+				children: p
+			}),
+			m !== null && /* @__PURE__ */ t("div", {
+				className: "bg-surface-secondary mt-2 h-1 rounded-full",
+				children: /* @__PURE__ */ t("div", {
+					className: "bg-accent-cyan h-full rounded-full transition-all",
+					style: { width: `${Math.round(m)}%` }
+				})
+			}),
+			a.dueDate && /* @__PURE__ */ t("div", {
+				className: "text-foreground-secondary mt-1.5 text-xs",
+				children: a.dueDate instanceof Date ? a.dueDate.toLocaleDateString() : a.dueDate
+			}),
+			a.assignees && a.assignees.length > 0 && /* @__PURE__ */ n("div", {
+				className: "mt-2 flex -space-x-1",
+				children: [a.assignees.slice(0, 3).map((e) => /* @__PURE__ */ t("div", {
+					title: e.name,
+					className: "bg-surface-secondary text-foreground-secondary flex size-6 items-center justify-center rounded-full border border-white/10 text-[10px] font-medium",
+					style: e.avatarUrl ? {
+						backgroundImage: `url(${e.avatarUrl})`,
+						backgroundSize: "cover"
+					} : void 0,
+					children: !e.avatarUrl && e.name.charAt(0).toUpperCase()
+				}, e.id)), a.assignees.length > 3 && /* @__PURE__ */ n("span", {
+					className: "text-foreground-secondary ml-1 text-xs",
+					children: ["+", a.assignees.length - 3]
+				})]
+			}),
+			a.labels && a.labels.length > 0 && /* @__PURE__ */ n("div", {
+				className: "mt-2 flex flex-wrap gap-1",
+				children: [a.labels.slice(0, l).map((e, n) => /* @__PURE__ */ t("span", {
+					className: "rounded-full px-2 py-0.5 text-[10px] font-medium text-white",
+					style: { backgroundColor: e.color },
+					children: e.text
+				}, n)), a.labels.length > l && /* @__PURE__ */ n("span", {
+					className: "text-foreground-secondary text-[10px]",
+					children: ["+", a.labels.length - l]
+				})]
+			}),
+			!a.assignees?.length && a.assignee && /* @__PURE__ */ t("div", {
+				className: "text-foreground-secondary mt-2 text-xs",
+				children: a.assignee
+			})
+		]
+	});
+}
+function o({ column: i, isDraggable: o, descriptionMaxLength: s, maxLabels: c, onCardClick: l, onAddCard: u, onDragStart: d, onDrop: f }) {
+	let [p, m] = r.useState(i.collapsed ?? !1), [h, g] = r.useState(!1), _ = i.limit !== void 0 && i.cards.length >= i.limit;
+	return /* @__PURE__ */ n("div", {
+		className: e("bg-surface-secondary/50 flex min-w-[280px] shrink-0 flex-col rounded-lg", _ && "border-accent-amber/30 border"),
+		children: [/* @__PURE__ */ n("div", {
+			className: "flex items-center gap-2 px-3 py-2.5",
+			style: i.color ? {
+				borderTop: `3px solid ${i.color}`,
+				borderRadius: "8px 8px 0 0"
+			} : void 0,
+			children: [
+				/* @__PURE__ */ t("span", {
+					className: "text-foreground text-sm font-semibold",
+					children: i.title
+				}),
+				/* @__PURE__ */ n("span", {
+					className: e("text-foreground-secondary text-xs", _ && "text-accent-amber"),
+					children: [i.cards.length, i.limit !== void 0 && ` / ${i.limit}`]
+				}),
+				/* @__PURE__ */ n("div", {
+					className: "ml-auto flex items-center gap-1",
+					children: [i.collapsible && /* @__PURE__ */ t("button", {
+						onClick: () => m(!p),
+						className: "text-foreground-secondary hover:text-foreground text-xs",
+						children: p ? "+" : "-"
+					}), i.addButton && /* @__PURE__ */ t("button", {
+						onClick: () => u?.(i.id),
+						className: "text-foreground-secondary hover:text-foreground text-xs",
+						children: "+"
+					})]
+				})
+			]
+		}), !p && /* @__PURE__ */ n("div", {
+			className: e("flex flex-1 flex-col gap-2 px-2 pb-2", h && "bg-accent-cyan/5 rounded-b-lg"),
+			onDragOver: o ? (e) => {
+				e.preventDefault(), e.dataTransfer.dropEffect = "move", g(!0);
+			} : void 0,
+			onDragLeave: o ? (e) => {
+				let t = e.relatedTarget;
+				t instanceof Node && e.currentTarget.contains(t) || g(!1);
+			} : void 0,
+			onDrop: o ? (e) => {
+				e.preventDefault(), g(!1);
+				let t = e.currentTarget.querySelectorAll("[role=\"listitem\"]"), n = t.length;
+				for (let r = 0; r < t.length; r++) {
+					let i = t[r]?.getBoundingClientRect();
+					if (i && e.clientY < i.top + i.height / 2) {
+						n = r;
+						break;
+					}
+				}
+				f(i.id, n);
+			} : void 0,
+			children: [i.cards.length === 0 && i.emptyMessage && /* @__PURE__ */ t("div", {
+				className: "text-foreground-secondary py-4 text-center text-xs",
+				children: i.emptyMessage
+			}), i.cards.map((e) => /* @__PURE__ */ t(a, {
+				card: e,
+				columnId: i.id,
+				isDraggable: o,
+				descriptionMaxLength: s,
+				maxLabels: c,
+				onClick: l,
+				onDragStart: d
+			}, e.id))]
+		})]
+	});
+}
+function s({ columns: n, draggable: i = !0, onCardMove: a, onCardClick: s, onAddCard: c, descriptionMaxLength: l = 100, maxLabels: u = 3, className: d, ...f }) {
+	let [p, m] = r.useState(n), h = r.useRef(null);
+	r.useEffect(() => {
+		m(n);
+	}, [n]);
+	let g = r.useCallback((e, t) => {
+		h.current = {
+			cardId: e,
+			fromColumnId: t
+		};
+	}, []), _ = r.useCallback((e, t) => {
+		let n = h.current;
+		if (!n) return;
+		h.current = null;
+		let { cardId: r, fromColumnId: i } = n;
+		m((n) => {
+			let a = n.map((e) => ({
+				...e,
+				cards: [...e.cards]
+			})), o = a.find((e) => e.id === i), s = a.find((t) => t.id === e);
+			if (!o || !s) return n;
+			let c = o.cards.findIndex((e) => e.id === r);
+			if (c < 0) return n;
+			let [l] = o.cards.splice(c, 1);
+			if (!l) return n;
+			let u = Math.min(t, s.cards.length);
+			return s.cards.splice(u, 0, l), a;
+		}), a?.(r, i, e, t);
+	}, [a]);
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "kanban-board",
+		className: e("flex gap-4 overflow-x-auto p-2", d),
+		...f,
+		children: p.map((e) => /* @__PURE__ */ t(o, {
+			column: e,
+			isDraggable: i,
+			descriptionMaxLength: l,
+			maxLabels: u,
+			onCardClick: s,
+			onAddCard: c,
+			onDragStart: g,
+			onDrop: _
+		}, e.id))
+	});
+}
+s.displayName = "KanbanBoard";
+//#endregion
+export { s as KanbanBoard, a as KanbanCard, o as KanbanColumn };
+
+//# sourceMappingURL=kanban.js.map

package/dist/react/primitives/kanban.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kanban.js","names":[],"sources":["../../../src/react/primitives/kanban.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from './utils'\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface KanbanAssignee {\n  id: string\n  name: string\n  kind?: string\n  avatarUrl?: string\n}\n\nexport interface KanbanCardData {\n  id: string\n  title: string\n  description?: string\n  labels?: { text: string; color: string }[]\n  assignee?: string\n  priority?: 'low' | 'medium' | 'high' | 'critical'\n  dueDate?: string | Date\n  assignees?: KanbanAssignee[]\n  issueKey?: string\n  issueType?: string\n  storyPoints?: number\n  completionPercentage?: number\n  subtaskCount?: number\n  subtaskCompleted?: number\n}\n\nexport interface KanbanColumnData {\n  id: string\n  title: string\n  cards: KanbanCardData[]\n  limit?: number\n  color?: string\n  collapsible?: boolean\n  collapsed?: boolean\n  emptyMessage?: string\n  addButton?: boolean\n}\n\nexport interface KanbanBoardProps extends React.ComponentProps<'div'> {\n  columns: KanbanColumnData[]\n  draggable?: boolean\n  onCardMove?: (cardId: string, fromColumn: string, toColumn: string, index: number) => void\n  onCardClick?: (card: KanbanCardData) => void\n  onAddCard?: (columnId: string) => void\n  descriptionMaxLength?: number\n  maxLabels?: number\n}\n\n// ---------------------------------------------------------------------------\n// KanbanCard\n// ---------------------------------------------------------------------------\n\ninterface KanbanCardProps {\n  card: KanbanCardData\n  columnId: string\n  isDraggable: boolean\n  descriptionMaxLength: number\n  maxLabels: number\n  onClick?: ((card: KanbanCardData) => void) | undefined\n  onDragStart: (cardId: string, columnId: string) => void\n}\n\nconst PRIORITY_STYLES: Record<string, string> = {\n  critical: 'border-l-accent-rose border-l-2',\n  high: 'border-l-accent-amber border-l-2',\n  medium: 'border-l-accent-cyan border-l-2',\n  low: 'border-l-accent-violet border-l-2',\n}\n\nfunction KanbanCard({\n  card,\n  columnId,\n  isDraggable,\n  descriptionMaxLength,\n  maxLabels,\n  onClick,\n  onDragStart,\n}: KanbanCardProps) {\n  const handleDragStart = (e: React.DragEvent) => {\n    e.dataTransfer.effectAllowed = 'move'\n    e.dataTransfer.setData('text/plain', card.id)\n    onDragStart(card.id, columnId)\n  }\n\n  const truncatedDesc =\n    card.description && card.description.length > descriptionMaxLength\n      ? card.description.slice(0, descriptionMaxLength) + '...'\n      : card.description\n\n  const percentage = React.useMemo(() => {\n    if (card.completionPercentage !== undefined) return card.completionPercentage\n    if (card.subtaskCount && card.subtaskCount > 0)\n      return ((card.subtaskCompleted ?? 0) / card.subtaskCount) * 100\n    return null\n  }, [card.completionPercentage, card.subtaskCount, card.subtaskCompleted])\n\n  return (\n    <div\n      className={cn(\n        'bg-glass border-border-glass rounded-lg border p-3 backdrop-blur-[20px] transition-all',\n        'hover:border-border-glass/80 cursor-pointer hover:shadow-sm',\n        card.priority && PRIORITY_STYLES[card.priority]\n      )}\n      draggable={isDraggable}\n      onDragStart={isDraggable ? handleDragStart : undefined}\n      onClick={() => onClick?.(card)}\n      role=\"listitem\"\n      tabIndex={0}\n    >\n      {/* Issue info row */}\n      {(card.issueKey || card.issueType || card.storyPoints !== undefined) && (\n        <div className=\"text-foreground-secondary mb-1.5 flex items-center gap-2 text-xs\">\n          {card.issueKey && <span className=\"font-medium\">{card.issueKey}</span>}\n          {card.issueType && <span>{card.issueType}</span>}\n          {card.storyPoints !== undefined && (\n            <span className=\"bg-surface-secondary rounded-full px-1.5 py-0.5 text-[10px]\">\n              {card.storyPoints}\n            </span>\n          )}\n        </div>\n      )}\n\n      {/* Title */}\n      <div className=\"text-foreground text-sm font-medium\">{card.title}</div>\n\n      {/* Description */}\n      {truncatedDesc && (\n        <div className=\"text-foreground-secondary mt-1 text-xs\">{truncatedDesc}</div>\n      )}\n\n      {/* Progress */}\n      {percentage !== null && (\n        <div className=\"bg-surface-secondary mt-2 h-1 rounded-full\">\n          <div\n            className=\"bg-accent-cyan h-full rounded-full transition-all\"\n            style={{ width: `${Math.round(percentage)}%` }}\n          />\n        </div>\n      )}\n\n      {/* Due date */}\n      {card.dueDate && (\n        <div className=\"text-foreground-secondary mt-1.5 text-xs\">\n          {card.dueDate instanceof Date ? card.dueDate.toLocaleDateString() : card.dueDate}\n        </div>\n      )}\n\n      {/* Assignees */}\n      {card.assignees && card.assignees.length > 0 && (\n        <div className=\"mt-2 flex -space-x-1\">\n          {card.assignees.slice(0, 3).map(a => (\n            <div\n              key={a.id}\n              title={a.name}\n              className=\"bg-surface-secondary text-foreground-secondary flex size-6 items-center justify-center rounded-full border border-white/10 text-[10px] font-medium\"\n              style={\n                a.avatarUrl\n                  ? { backgroundImage: `url(${a.avatarUrl})`, backgroundSize: 'cover' }\n                  : undefined\n              }\n            >\n              {!a.avatarUrl && a.name.charAt(0).toUpperCase()}\n            </div>\n          ))}\n          {card.assignees.length > 3 && (\n            <span className=\"text-foreground-secondary ml-1 text-xs\">\n              +{card.assignees.length - 3}\n            </span>\n          )}\n        </div>\n      )}\n\n      {/* Labels */}\n      {card.labels && card.labels.length > 0 && (\n        <div className=\"mt-2 flex flex-wrap gap-1\">\n          {card.labels.slice(0, maxLabels).map((label, idx) => (\n            <span\n              key={idx}\n              className=\"rounded-full px-2 py-0.5 text-[10px] font-medium text-white\"\n              style={{ backgroundColor: label.color }}\n            >\n              {label.text}\n            </span>\n          ))}\n          {card.labels.length > maxLabels && (\n            <span className=\"text-foreground-secondary text-[10px]\">\n              +{card.labels.length - maxLabels}\n            </span>\n          )}\n        </div>\n      )}\n\n      {/* Legacy assignee */}\n      {!card.assignees?.length && card.assignee && (\n        <div className=\"text-foreground-secondary mt-2 text-xs\">{card.assignee}</div>\n      )}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// KanbanColumn\n// ---------------------------------------------------------------------------\n\ninterface KanbanColumnProps {\n  column: KanbanColumnData\n  isDraggable: boolean\n  descriptionMaxLength: number\n  maxLabels: number\n  onCardClick?: ((card: KanbanCardData) => void) | undefined\n  onAddCard?: ((columnId: string) => void) | undefined\n  onDragStart: (cardId: string, columnId: string) => void\n  onDrop: (columnId: string, index: number) => void\n}\n\nfunction KanbanColumn({\n  column,\n  isDraggable,\n  descriptionMaxLength,\n  maxLabels,\n  onCardClick,\n  onAddCard,\n  onDragStart,\n  onDrop,\n}: KanbanColumnProps) {\n  const [isCollapsed, setIsCollapsed] = React.useState(column.collapsed ?? false)\n  const [isDragOver, setIsDragOver] = React.useState(false)\n  const isAtLimit = column.limit !== undefined && column.cards.length >= column.limit\n\n  const handleDragOver = (e: React.DragEvent) => {\n    e.preventDefault()\n    e.dataTransfer.dropEffect = 'move'\n    setIsDragOver(true)\n  }\n\n  const handleDragLeave = (e: React.DragEvent) => {\n    const related = e.relatedTarget\n    if (related instanceof Node && e.currentTarget.contains(related)) return\n    setIsDragOver(false)\n  }\n\n  const handleDrop = (e: React.DragEvent) => {\n    e.preventDefault()\n    setIsDragOver(false)\n    const listEl = e.currentTarget as HTMLElement\n    const cards = listEl.querySelectorAll('[role=\"listitem\"]')\n    let index = cards.length\n    for (let i = 0; i < cards.length; i++) {\n      const rect = cards[i]?.getBoundingClientRect()\n      if (rect && e.clientY < rect.top + rect.height / 2) {\n        index = i\n        break\n      }\n    }\n    onDrop(column.id, index)\n  }\n\n  return (\n    <div\n      className={cn(\n        'bg-surface-secondary/50 flex min-w-[280px] shrink-0 flex-col rounded-lg',\n        isAtLimit && 'border-accent-amber/30 border'\n      )}\n    >\n      {/* Header */}\n      <div\n        className=\"flex items-center gap-2 px-3 py-2.5\"\n        style={\n          column.color\n            ? { borderTop: `3px solid ${column.color}`, borderRadius: '8px 8px 0 0' }\n            : undefined\n        }\n      >\n        <span className=\"text-foreground text-sm font-semibold\">{column.title}</span>\n        <span className={cn('text-foreground-secondary text-xs', isAtLimit && 'text-accent-amber')}>\n          {column.cards.length}\n          {column.limit !== undefined && ` / ${column.limit}`}\n        </span>\n        <div className=\"ml-auto flex items-center gap-1\">\n          {column.collapsible && (\n            <button\n              onClick={() => setIsCollapsed(!isCollapsed)}\n              className=\"text-foreground-secondary hover:text-foreground text-xs\"\n            >\n              {isCollapsed ? '+' : '-'}\n            </button>\n          )}\n          {column.addButton && (\n            <button\n              onClick={() => onAddCard?.(column.id)}\n              className=\"text-foreground-secondary hover:text-foreground text-xs\"\n            >\n              +\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Cards */}\n      {!isCollapsed && (\n        <div\n          className={cn(\n            'flex flex-1 flex-col gap-2 px-2 pb-2',\n            isDragOver && 'bg-accent-cyan/5 rounded-b-lg'\n          )}\n          onDragOver={isDraggable ? handleDragOver : undefined}\n          onDragLeave={isDraggable ? handleDragLeave : undefined}\n          onDrop={isDraggable ? handleDrop : undefined}\n        >\n          {column.cards.length === 0 && column.emptyMessage && (\n            <div className=\"text-foreground-secondary py-4 text-center text-xs\">\n              {column.emptyMessage}\n            </div>\n          )}\n          {column.cards.map(card => (\n            <KanbanCard\n              key={card.id}\n              card={card}\n              columnId={column.id}\n              isDraggable={isDraggable}\n              descriptionMaxLength={descriptionMaxLength}\n              maxLabels={maxLabels}\n              onClick={onCardClick}\n              onDragStart={onDragStart}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// KanbanBoard\n// ---------------------------------------------------------------------------\n\nfunction KanbanBoard({\n  columns,\n  draggable = true,\n  onCardMove,\n  onCardClick,\n  onAddCard,\n  descriptionMaxLength = 100,\n  maxLabels = 3,\n  className,\n  ...props\n}: KanbanBoardProps) {\n  const [cols, setCols] = React.useState(columns)\n  const dragStateRef = React.useRef<{ cardId: string; fromColumnId: string } | null>(null)\n\n  // Sync with external columns prop\n  React.useEffect(() => {\n    setCols(columns)\n  }, [columns])\n\n  const handleDragStart = React.useCallback((cardId: string, fromColumnId: string) => {\n    dragStateRef.current = { cardId, fromColumnId }\n  }, [])\n\n  const handleDrop = React.useCallback(\n    (toColumnId: string, index: number) => {\n      const drag = dragStateRef.current\n      if (!drag) return\n      dragStateRef.current = null\n\n      const { cardId, fromColumnId } = drag\n\n      setCols(prev => {\n        const next = prev.map(col => ({ ...col, cards: [...col.cards] }))\n        const sourceCol = next.find(c => c.id === fromColumnId)\n        const targetCol = next.find(c => c.id === toColumnId)\n        if (!sourceCol || !targetCol) return prev\n\n        const cardIdx = sourceCol.cards.findIndex(c => c.id === cardId)\n        if (cardIdx < 0) return prev\n\n        const [card] = sourceCol.cards.splice(cardIdx, 1)\n        if (!card) return prev\n\n        const clampedIdx = Math.min(index, targetCol.cards.length)\n        targetCol.cards.splice(clampedIdx, 0, card)\n\n        return next\n      })\n\n      onCardMove?.(cardId, fromColumnId, toColumnId, index)\n    },\n    [onCardMove]\n  )\n\n  return (\n    <div\n      data-slot=\"kanban-board\"\n      className={cn('flex gap-4 overflow-x-auto p-2', className)}\n      {...props}\n    >\n      {cols.map(column => (\n        <KanbanColumn\n          key={column.id}\n          column={column}\n          isDraggable={draggable}\n          descriptionMaxLength={descriptionMaxLength}\n          maxLabels={maxLabels}\n          onCardClick={onCardClick}\n          onAddCard={onAddCard}\n          onDragStart={handleDragStart}\n          onDrop={handleDrop}\n        />\n      ))}\n    </div>\n  )\n}\nKanbanBoard.displayName = 'KanbanBoard'\n\nexport { KanbanBoard, KanbanColumn, KanbanCard }\n"],"mappings":"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"}

package/dist/react/primitives/kbd.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface KbdProps extends React.ComponentProps<'span'> {
+    /** Array of key labels to display (joined with '+' separators) */
+    keys?: string[];
+}
+declare function Kbd({ className, keys, children, ...props }: KbdProps): import("react/jsx-runtime").JSX.Element;
+export { Kbd };
+export type { KbdProps };
+//# sourceMappingURL=kbd.d.ts.map

package/dist/react/primitives/kbd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,UAAU,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;IACrD,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;CAChB;AAED,iBAAS,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAoB7D;AAED,OAAO,EAAE,GAAG,EAAE,CAAA;AACd,YAAY,EAAE,QAAQ,EAAE,CAAA"}

package/dist/react/primitives/kbd.js

@@ -0,0 +1,22 @@
+import { t as e } from "../../utils-B7XIe3qq.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import * as r from "react";
+//#region src/react/primitives/kbd.tsx
+function i({ className: i, keys: a, children: o, ...s }) {
+	return /* @__PURE__ */ t("span", {
+		"data-slot": "kbd",
+		className: e("inline-flex items-center gap-0.5", i),
+		...s,
+		children: a ? a.map((i, a) => /* @__PURE__ */ n(r.Fragment, { children: [a > 0 && /* @__PURE__ */ t("span", {
+			className: "text-foreground-muted text-xs",
+			children: "+"
+		}), /* @__PURE__ */ t("kbd", {
+			className: e("border-border-glass bg-glass text-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-md border px-1.5 text-xs font-medium backdrop-blur-[20px]", "font-mono shadow-sm"),
+			children: i
+		})] }, a)) : o
+	});
+}
+//#endregion
+export { i as Kbd };
+
+//# sourceMappingURL=kbd.js.map

package/dist/react/primitives/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","names":[],"sources":["../../../src/react/primitives/kbd.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from './utils'\n\ninterface KbdProps extends React.ComponentProps<'span'> {\n  /** Array of key labels to display (joined with '+' separators) */\n  keys?: string[]\n}\n\nfunction Kbd({ className, keys, children, ...props }: KbdProps) {\n  return (\n    <span data-slot=\"kbd\" className={cn('inline-flex items-center gap-0.5', className)} {...props}>\n      {keys\n        ? keys.map((key, index) => (\n            <React.Fragment key={index}>\n              {index > 0 && <span className=\"text-foreground-muted text-xs\">+</span>}\n              <kbd\n                className={cn(\n                  'border-border-glass bg-glass text-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-md border px-1.5 text-xs font-medium backdrop-blur-[20px]',\n                  'font-mono shadow-sm'\n                )}\n              >\n                {key}\n              </kbd>\n            </React.Fragment>\n          ))\n        : children}\n    </span>\n  )\n}\n\nexport { Kbd }\nexport type { KbdProps }\n"],"mappings":";;;;AASA,SAAS,EAAI,EAAE,cAAW,SAAM,aAAU,GAAG,KAAmB;AAC9D,QACE,kBAAC,QAAD;EAAM,aAAU;EAAM,WAAW,EAAG,oCAAoC,EAAU;EAAE,GAAI;YACrF,IACG,EAAK,KAAK,GAAK,MACb,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,IAAQ,KAAK,kBAAC,QAAD;GAAM,WAAU;aAAgC;GAAQ,CAAA,EACtE,kBAAC,OAAD;GACE,WAAW,EACT,sKACA,sBACD;aAEA;GACG,CAAA,CACS,EAAA,EAVI,EAUJ,CACjB,GACF;EACC,CAAA"}

package/dist/react/primitives/label.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Label Component
+ *
+ * A styled label component for form inputs.
+ * Based on Radix UI Label primitive.
+ */
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import('class-variance-authority/types').ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };
+//# sourceMappingURL=label.d.ts.map

package/dist/react/primitives/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/react/primitives/label.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE,QAAA,MAAM,KAAK,4PAKT,CAAA;AAGF,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/react/primitives/label.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../label-BObzQvEY.js";
+export { e as Label };