@hanzo/ui 5.3.32 → 5.3.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,594 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var React = require('react');
5
+ var core = require('@dnd-kit/core');
6
+ var sortable = require('@dnd-kit/sortable');
7
+ var utilities = require('@dnd-kit/utilities');
8
+ var classVarianceAuthority = require('class-variance-authority');
9
+ var lucideReact = require('lucide-react');
10
+ var utils = require('@hanzo/ui/lib/utils');
11
+ var badge = require('@hanzo/ui/primitives/badge');
12
+ var button = require('@hanzo/ui/primitives/button');
13
+ var card = require('@hanzo/ui/primitives/card');
14
+ var dialog = require('@hanzo/ui/primitives/dialog');
15
+ var dropdownMenu = require('@hanzo/ui/primitives/dropdown-menu');
16
+ var input = require('@hanzo/ui/primitives/input');
17
+ var label = require('@hanzo/ui/primitives/label');
18
+ var select = require('@hanzo/ui/primitives/select');
19
+ var textarea = require('@hanzo/ui/primitives/textarea');
20
+ var jsxRuntime = require('react/jsx-runtime');
21
+
22
+ function _interopNamespace(e) {
23
+ if (e && e.__esModule) return e;
24
+ var n = Object.create(null);
25
+ if (e) {
26
+ Object.keys(e).forEach(function (k) {
27
+ if (k !== 'default') {
28
+ var d = Object.getOwnPropertyDescriptor(e, k);
29
+ Object.defineProperty(n, k, d.get ? d : {
30
+ enumerable: true,
31
+ get: function () { return e[k]; }
32
+ });
33
+ }
34
+ });
35
+ }
36
+ n.default = e;
37
+ return Object.freeze(n);
38
+ }
39
+
40
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
41
+
42
+ var __defProp = Object.defineProperty;
43
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
44
+ var priorityVariants = classVarianceAuthority.cva(
45
+ "inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold",
46
+ {
47
+ variants: {
48
+ priority: {
49
+ low: "border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-800 dark:bg-blue-900/20 dark:text-blue-400",
50
+ medium: "border-yellow-200 bg-yellow-50 text-yellow-700 dark:border-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400",
51
+ high: "border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-800 dark:bg-orange-900/20 dark:text-orange-400",
52
+ urgent: "border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/20 dark:text-red-400"
53
+ }
54
+ },
55
+ defaultVariants: {
56
+ priority: "low"
57
+ }
58
+ }
59
+ );
60
+ function SortableCard({
61
+ card,
62
+ onEdit,
63
+ onDelete
64
+ }) {
65
+ const {
66
+ attributes,
67
+ listeners,
68
+ setNodeRef,
69
+ transform,
70
+ transition,
71
+ isDragging
72
+ } = sortable.useSortable({ id: card.id });
73
+ const style = {
74
+ transform: utilities.CSS.Transform.toString(transform),
75
+ transition
76
+ };
77
+ return /* @__PURE__ */ jsxRuntime.jsx(
78
+ "div",
79
+ {
80
+ ref: setNodeRef,
81
+ style,
82
+ ...attributes,
83
+ ...listeners,
84
+ className: utils.cn(
85
+ "cursor-grab active:cursor-grabbing",
86
+ isDragging && "opacity-50"
87
+ ),
88
+ children: /* @__PURE__ */ jsxRuntime.jsx(KanbanCardComponent, { card, onEdit, onDelete })
89
+ }
90
+ );
91
+ }
92
+ __name(SortableCard, "SortableCard");
93
+ function KanbanCardComponent({
94
+ card: card$1,
95
+ onEdit,
96
+ onDelete
97
+ }) {
98
+ return /* @__PURE__ */ jsxRuntime.jsx(card.Card, { className: "mb-3 group hover:shadow-md transition-shadow", children: /* @__PURE__ */ jsxRuntime.jsx(card.CardHeader, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-between", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
99
+ /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-medium text-sm leading-tight mb-2 break-words", children: card$1.title }),
100
+ card$1.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground line-clamp-2 mb-2", children: card$1.description }),
101
+ card$1.labels && card$1.labels.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mb-2", children: card$1.labels.map((label) => /* @__PURE__ */ jsxRuntime.jsx(
102
+ badge.Badge,
103
+ {
104
+ variant: "outline",
105
+ className: "text-xs h-5",
106
+ style: {
107
+ backgroundColor: `${label.color}20`,
108
+ borderColor: label.color,
109
+ color: label.color
110
+ },
111
+ children: label.name
112
+ },
113
+ label.id
114
+ )) }),
115
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-xs", children: [
116
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
117
+ card$1.priority && /* @__PURE__ */ jsxRuntime.jsx(
118
+ "span",
119
+ {
120
+ className: utils.cn(
121
+ priorityVariants({ priority: card$1.priority })
122
+ ),
123
+ children: card$1.priority
124
+ }
125
+ ),
126
+ card$1.assignee && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
127
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "h-3 w-3" }),
128
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: card$1.assignee })
129
+ ] })
130
+ ] }),
131
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
132
+ card$1.dueDate && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-muted-foreground", children: [
133
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "h-3 w-3" }),
134
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(card$1.dueDate).toLocaleDateString() })
135
+ ] }),
136
+ /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
137
+ /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
138
+ button.Button,
139
+ {
140
+ variant: "ghost",
141
+ size: "icon",
142
+ className: "h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity",
143
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-3 w-3" })
144
+ }
145
+ ) }),
146
+ /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", children: [
147
+ /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: () => onEdit(card$1), children: [
148
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit3, { className: "h-4 w-4 mr-2" }),
149
+ "Edit"
150
+ ] }),
151
+ /* @__PURE__ */ jsxRuntime.jsxs(
152
+ dropdownMenu.DropdownMenuItem,
153
+ {
154
+ onClick: () => onDelete(card$1.id),
155
+ className: "text-destructive",
156
+ children: [
157
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4 mr-2" }),
158
+ "Delete"
159
+ ]
160
+ }
161
+ )
162
+ ] })
163
+ ] })
164
+ ] })
165
+ ] })
166
+ ] }) }) }) });
167
+ }
168
+ __name(KanbanCardComponent, "KanbanCardComponent");
169
+ function KanbanColumnComponent({
170
+ column,
171
+ onAddCard,
172
+ onEditCard,
173
+ onDeleteCard
174
+ }) {
175
+ const { setNodeRef } = sortable.useSortable({ id: column.id });
176
+ return /* @__PURE__ */ jsxRuntime.jsxs(
177
+ "div",
178
+ {
179
+ ref: setNodeRef,
180
+ className: "bg-muted/50 rounded-lg p-4 min-w-[280px] max-w-[280px] flex flex-col",
181
+ children: [
182
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
183
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
184
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-sm", children: column.title }),
185
+ /* @__PURE__ */ jsxRuntime.jsxs(badge.Badge, { variant: "secondary", className: "text-xs", children: [
186
+ column.cards.length,
187
+ column.limit && `/${column.limit}`
188
+ ] })
189
+ ] }),
190
+ /* @__PURE__ */ jsxRuntime.jsx(
191
+ button.Button,
192
+ {
193
+ variant: "ghost",
194
+ size: "icon",
195
+ className: "h-8 w-8",
196
+ onClick: () => onAddCard(column.id),
197
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-4 w-4" })
198
+ }
199
+ )
200
+ ] }),
201
+ /* @__PURE__ */ jsxRuntime.jsx(
202
+ sortable.SortableContext,
203
+ {
204
+ items: column.cards.map((card) => card.id),
205
+ strategy: sortable.verticalListSortingStrategy,
206
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[200px]", children: column.cards.map((card) => /* @__PURE__ */ jsxRuntime.jsx(
207
+ SortableCard,
208
+ {
209
+ card,
210
+ onEdit: onEditCard,
211
+ onDelete: onDeleteCard
212
+ },
213
+ card.id
214
+ )) })
215
+ }
216
+ )
217
+ ]
218
+ }
219
+ );
220
+ }
221
+ __name(KanbanColumnComponent, "KanbanColumnComponent");
222
+ function CardFormDialog({
223
+ open,
224
+ onOpenChange,
225
+ card,
226
+ onSave,
227
+ labels
228
+ }) {
229
+ const [formData, setFormData] = React__namespace.useState({
230
+ title: card?.title || "",
231
+ description: card?.description || "",
232
+ priority: card?.priority || "low",
233
+ assignee: card?.assignee || "",
234
+ dueDate: card?.dueDate || "",
235
+ labels: card?.labels?.map((l) => l.id) || []
236
+ });
237
+ const handleSubmit = /* @__PURE__ */ __name((e) => {
238
+ e.preventDefault();
239
+ if (!formData.title.trim()) return;
240
+ onSave({
241
+ ...card,
242
+ ...formData,
243
+ labels: labels.filter((l) => formData.labels.includes(l.id)),
244
+ updatedAt: (/* @__PURE__ */ new Date()).toISOString()
245
+ });
246
+ onOpenChange(false);
247
+ }, "handleSubmit");
248
+ React__namespace.useEffect(() => {
249
+ if (card) {
250
+ setFormData({
251
+ title: card.title,
252
+ description: card.description || "",
253
+ priority: card.priority || "low",
254
+ assignee: card.assignee || "",
255
+ dueDate: card.dueDate || "",
256
+ labels: card.labels?.map((l) => l.id) || []
257
+ });
258
+ } else {
259
+ setFormData({
260
+ title: "",
261
+ description: "",
262
+ priority: "low",
263
+ assignee: "",
264
+ dueDate: "",
265
+ labels: []
266
+ });
267
+ }
268
+ }, [card]);
269
+ return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-w-md", children: [
270
+ /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
271
+ /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: card ? "Edit Card" : "Create Card" }),
272
+ /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: card ? "Update the card details below." : "Create a new card for your kanban board." })
273
+ ] }),
274
+ /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
275
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
276
+ /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "title", children: "Title *" }),
277
+ /* @__PURE__ */ jsxRuntime.jsx(
278
+ input.Input,
279
+ {
280
+ id: "title",
281
+ value: formData.title,
282
+ onChange: (e) => setFormData((prev) => ({ ...prev, title: e.target.value })),
283
+ placeholder: "Enter card title...",
284
+ required: true
285
+ }
286
+ )
287
+ ] }),
288
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
289
+ /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "description", children: "Description" }),
290
+ /* @__PURE__ */ jsxRuntime.jsx(
291
+ textarea.Textarea,
292
+ {
293
+ id: "description",
294
+ value: formData.description,
295
+ onChange: (e) => setFormData((prev) => ({
296
+ ...prev,
297
+ description: e.target.value
298
+ })),
299
+ placeholder: "Enter card description...",
300
+ rows: 3
301
+ }
302
+ )
303
+ ] }),
304
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
305
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
306
+ /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "priority", children: "Priority" }),
307
+ /* @__PURE__ */ jsxRuntime.jsxs(
308
+ select.Select,
309
+ {
310
+ value: formData.priority,
311
+ onValueChange: (value) => setFormData((prev) => ({ ...prev, priority: value })),
312
+ children: [
313
+ /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
314
+ /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
315
+ /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "low", children: "Low" }),
316
+ /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "medium", children: "Medium" }),
317
+ /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "high", children: "High" }),
318
+ /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "urgent", children: "Urgent" })
319
+ ] })
320
+ ]
321
+ }
322
+ )
323
+ ] }),
324
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
325
+ /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "assignee", children: "Assignee" }),
326
+ /* @__PURE__ */ jsxRuntime.jsx(
327
+ input.Input,
328
+ {
329
+ id: "assignee",
330
+ value: formData.assignee,
331
+ onChange: (e) => setFormData((prev) => ({ ...prev, assignee: e.target.value })),
332
+ placeholder: "Assign to..."
333
+ }
334
+ )
335
+ ] })
336
+ ] }),
337
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
338
+ /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "dueDate", children: "Due Date" }),
339
+ /* @__PURE__ */ jsxRuntime.jsx(
340
+ input.Input,
341
+ {
342
+ id: "dueDate",
343
+ type: "date",
344
+ value: formData.dueDate,
345
+ onChange: (e) => setFormData((prev) => ({ ...prev, dueDate: e.target.value }))
346
+ }
347
+ )
348
+ ] }),
349
+ /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogFooter, { children: [
350
+ /* @__PURE__ */ jsxRuntime.jsx(
351
+ button.Button,
352
+ {
353
+ type: "button",
354
+ variant: "outline",
355
+ onClick: () => onOpenChange(false),
356
+ children: "Cancel"
357
+ }
358
+ ),
359
+ /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { type: "submit", children: [
360
+ card ? "Update" : "Create",
361
+ " Card"
362
+ ] })
363
+ ] })
364
+ ] })
365
+ ] }) });
366
+ }
367
+ __name(CardFormDialog, "CardFormDialog");
368
+ function KanbanBoard({
369
+ board,
370
+ onUpdateBoard,
371
+ className
372
+ }) {
373
+ const [activeCard, setActiveCard] = React__namespace.useState(null);
374
+ const [searchQuery, setSearchQuery] = React__namespace.useState("");
375
+ const [cardFormOpen, setCardFormOpen] = React__namespace.useState(false);
376
+ const [editingCard, setEditingCard] = React__namespace.useState(
377
+ void 0
378
+ );
379
+ const [activeColumnId, setActiveColumnId] = React__namespace.useState("");
380
+ const sensors = core.useSensors(
381
+ core.useSensor(core.PointerSensor, {
382
+ activationConstraint: {
383
+ distance: 8
384
+ }
385
+ })
386
+ );
387
+ const filteredBoard = React__namespace.useMemo(() => {
388
+ if (!searchQuery.trim()) return board;
389
+ const filtered = {
390
+ ...board,
391
+ columns: board.columns.map((column) => ({
392
+ ...column,
393
+ cards: column.cards.filter(
394
+ (card) => card.title.toLowerCase().includes(searchQuery.toLowerCase()) || card.description?.toLowerCase().includes(searchQuery.toLowerCase()) || card.labels?.some(
395
+ (label) => label.name.toLowerCase().includes(searchQuery.toLowerCase())
396
+ )
397
+ )
398
+ }))
399
+ };
400
+ return filtered;
401
+ }, [board, searchQuery]);
402
+ const handleDragStart = /* @__PURE__ */ __name((event) => {
403
+ const { active } = event;
404
+ const card = board.columns.flatMap((col) => col.cards).find((card2) => card2.id === active.id);
405
+ setActiveCard(card || null);
406
+ }, "handleDragStart");
407
+ const handleDragOver = /* @__PURE__ */ __name((event) => {
408
+ const { active, over } = event;
409
+ if (!over) return;
410
+ const activeId = active.id;
411
+ const overId = over.id;
412
+ const activeContainer = findContainer(activeId);
413
+ const overContainer = findContainer(overId);
414
+ if (!activeContainer || !overContainer || activeContainer === overContainer) {
415
+ return;
416
+ }
417
+ const updatedBoard = { ...board };
418
+ const activeColumnIndex = updatedBoard.columns.findIndex(
419
+ (col) => col.id === activeContainer
420
+ );
421
+ const overColumnIndex = updatedBoard.columns.findIndex(
422
+ (col) => col.id === overContainer
423
+ );
424
+ const activeColumn = updatedBoard.columns[activeColumnIndex];
425
+ const overColumn = updatedBoard.columns[overColumnIndex];
426
+ const activeCardIndex = activeColumn.cards.findIndex(
427
+ (card) => card.id === activeId
428
+ );
429
+ const [movedCard] = activeColumn.cards.splice(activeCardIndex, 1);
430
+ if (overColumn.limit && overColumn.cards.length >= overColumn.limit) {
431
+ return;
432
+ }
433
+ overColumn.cards.push(movedCard);
434
+ onUpdateBoard(updatedBoard);
435
+ }, "handleDragOver");
436
+ const handleDragEnd = /* @__PURE__ */ __name((event) => {
437
+ const { active, over } = event;
438
+ setActiveCard(null);
439
+ if (!over) return;
440
+ const activeId = active.id;
441
+ const overId = over.id;
442
+ const activeContainer = findContainer(activeId);
443
+ const overContainer = findContainer(overId);
444
+ if (!activeContainer || !overContainer) return;
445
+ const activeColumnIndex = board.columns.findIndex(
446
+ (col) => col.id === activeContainer
447
+ );
448
+ const activeColumn = board.columns[activeColumnIndex];
449
+ if (activeContainer === overContainer) {
450
+ const oldIndex = activeColumn.cards.findIndex(
451
+ (card) => card.id === activeId
452
+ );
453
+ const newIndex = activeColumn.cards.findIndex(
454
+ (card) => card.id === overId
455
+ );
456
+ if (oldIndex !== newIndex) {
457
+ const updatedBoard = { ...board };
458
+ updatedBoard.columns[activeColumnIndex].cards = sortable.arrayMove(
459
+ activeColumn.cards,
460
+ oldIndex,
461
+ newIndex
462
+ );
463
+ onUpdateBoard(updatedBoard);
464
+ }
465
+ }
466
+ }, "handleDragEnd");
467
+ const findContainer = /* @__PURE__ */ __name((id) => {
468
+ if (board.columns.some((col) => col.id === id)) {
469
+ return id;
470
+ }
471
+ return board.columns.find((col) => col.cards.some((card) => card.id === id))?.id;
472
+ }, "findContainer");
473
+ const handleAddCard = /* @__PURE__ */ __name((columnId) => {
474
+ setActiveColumnId(columnId);
475
+ setEditingCard(void 0);
476
+ setCardFormOpen(true);
477
+ }, "handleAddCard");
478
+ const handleEditCard = /* @__PURE__ */ __name((card) => {
479
+ setEditingCard(card);
480
+ setActiveColumnId("");
481
+ setCardFormOpen(true);
482
+ }, "handleEditCard");
483
+ const handleSaveCard = /* @__PURE__ */ __name((cardData) => {
484
+ const updatedBoard = { ...board };
485
+ if (editingCard) {
486
+ const columnIndex = updatedBoard.columns.findIndex(
487
+ (col) => col.cards.some((card) => card.id === editingCard.id)
488
+ );
489
+ if (columnIndex !== -1) {
490
+ const cardIndex = updatedBoard.columns[columnIndex].cards.findIndex(
491
+ (card) => card.id === editingCard.id
492
+ );
493
+ if (cardIndex !== -1) {
494
+ updatedBoard.columns[columnIndex].cards[cardIndex] = {
495
+ ...editingCard,
496
+ ...cardData
497
+ };
498
+ }
499
+ }
500
+ } else {
501
+ const columnIndex = updatedBoard.columns.findIndex(
502
+ (col) => col.id === activeColumnId
503
+ );
504
+ if (columnIndex !== -1) {
505
+ const newCard = {
506
+ id: `card-${Date.now()}`,
507
+ title: cardData.title,
508
+ description: cardData.description,
509
+ labels: cardData.labels,
510
+ priority: cardData.priority,
511
+ assignee: cardData.assignee,
512
+ dueDate: cardData.dueDate,
513
+ createdAt: (/* @__PURE__ */ new Date()).toISOString(),
514
+ updatedAt: (/* @__PURE__ */ new Date()).toISOString()
515
+ };
516
+ updatedBoard.columns[columnIndex].cards.push(newCard);
517
+ }
518
+ }
519
+ onUpdateBoard(updatedBoard);
520
+ }, "handleSaveCard");
521
+ const handleDeleteCard = /* @__PURE__ */ __name((cardId) => {
522
+ const updatedBoard = { ...board };
523
+ const columnIndex = updatedBoard.columns.findIndex(
524
+ (col) => col.cards.some((card) => card.id === cardId)
525
+ );
526
+ if (columnIndex !== -1) {
527
+ updatedBoard.columns[columnIndex].cards = updatedBoard.columns[columnIndex].cards.filter((card) => card.id !== cardId);
528
+ onUpdateBoard(updatedBoard);
529
+ }
530
+ }, "handleDeleteCard");
531
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col h-full", className), children: [
532
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border-b", children: [
533
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: board.title }),
534
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
535
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
536
+ /* @__PURE__ */ jsxRuntime.jsx(
537
+ input.Input,
538
+ {
539
+ placeholder: "Search cards...",
540
+ value: searchQuery,
541
+ onChange: (e) => setSearchQuery(e.target.value),
542
+ className: "pl-9 w-64"
543
+ }
544
+ )
545
+ ] }) })
546
+ ] }),
547
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full p-4", children: /* @__PURE__ */ jsxRuntime.jsxs(
548
+ core.DndContext,
549
+ {
550
+ sensors,
551
+ collisionDetection: core.closestCorners,
552
+ onDragStart: handleDragStart,
553
+ onDragOver: handleDragOver,
554
+ onDragEnd: handleDragEnd,
555
+ children: [
556
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-6 h-full pb-4", children: filteredBoard.columns.map((column) => /* @__PURE__ */ jsxRuntime.jsx(
557
+ KanbanColumnComponent,
558
+ {
559
+ column,
560
+ onAddCard: handleAddCard,
561
+ onEditCard: handleEditCard,
562
+ onDeleteCard: handleDeleteCard
563
+ },
564
+ column.id
565
+ )) }),
566
+ /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { children: activeCard ? /* @__PURE__ */ jsxRuntime.jsx(
567
+ KanbanCardComponent,
568
+ {
569
+ card: activeCard,
570
+ onEdit: () => {
571
+ },
572
+ onDelete: () => {
573
+ }
574
+ }
575
+ ) : null })
576
+ ]
577
+ }
578
+ ) }) }),
579
+ /* @__PURE__ */ jsxRuntime.jsx(
580
+ CardFormDialog,
581
+ {
582
+ open: cardFormOpen,
583
+ onOpenChange: setCardFormOpen,
584
+ card: editingCard,
585
+ onSave: handleSaveCard,
586
+ labels: board.labels
587
+ }
588
+ )
589
+ ] });
590
+ }
591
+ __name(KanbanBoard, "KanbanBoard");
592
+ var kanban_default = KanbanBoard;
593
+
594
+ exports.KanbanBoard = kanban_default;