@moontra/moonui-pro 2.13.0 → 2.14.0

package/dist/index.d.ts

@@ -1120,9 +1120,59 @@ interface KanbanProps {
     disabled?: boolean;
     labels?: KanbanLabel[];
     users?: KanbanAssignee[];
+    renderCard?: (card: KanbanCard, column: KanbanColumn, provided: any) => React.ReactNode;
+    renderCardPreview?: (card: KanbanCard) => React.ReactNode;
+    renderCardBadge?: (card: KanbanCard) => React.ReactNode;
+    renderCardActions?: (card: KanbanCard) => React.ReactNode;
+    cardCompactMode?: boolean;
+    cardShowCoverImage?: boolean;
+    cardShowAssignees?: boolean;
+    cardShowLabels?: boolean;
+    cardShowProgress?: boolean;
+    cardDateFormat?: string;
+    cardMaxAssigneesToShow?: number;
+    renderAddCardButton?: (columnId: string) => React.ReactNode;
+    renderAddCardForm?: (columnId: string, onAdd: (card: Partial<KanbanCard>) => void, onCancel: () => void) => React.ReactNode;
+    addCardButtonText?: string | ((columnId: string) => string);
+    addCardPosition?: 'top' | 'bottom';
+    allowQuickAdd?: boolean;
+    quickAddFields?: ('title' | 'description' | 'assignee' | 'priority')[];
+    validateCard?: (card: Partial<KanbanCard>) => {
+        valid: boolean;
+        errors?: string[];
+    };
+    onBeforeCardAdd?: (card: Partial<KanbanCard>) => Partial<KanbanCard> | false;
+    renderColumnHeader?: (column: KanbanColumn) => React.ReactNode;
+    renderColumnFooter?: (column: KanbanColumn) => React.ReactNode;
+    renderEmptyColumn?: (column: KanbanColumn) => React.ReactNode;
+    columnMenuActions?: Array<{
+        label: string;
+        icon?: React.ReactNode;
+        action: (column: KanbanColumn) => void;
+        visible?: (column: KanbanColumn) => boolean;
+    }>;
+    allowColumnReorder?: boolean;
+    columnColorOptions?: string[];
+    columnDefaultColor?: string;
+    dragDisabled?: boolean | ((card: KanbanCard) => boolean);
+    dropDisabled?: boolean | ((column: KanbanColumn) => boolean);
+    dragPreview?: 'card' | 'compact' | 'custom';
+    renderDragPreview?: (card: KanbanCard) => React.ReactNode;
+    canDrop?: (card: KanbanCard, targetColumn: KanbanColumn, position: number) => boolean;
+    onDragStart?: (card: KanbanCard, column: KanbanColumn) => void;
+    onDragEnd?: (card: KanbanCard, column: KanbanColumn) => void;
+    theme?: 'default' | 'compact' | 'modern' | 'minimal';
+    cardVariant?: 'default' | 'bordered' | 'elevated' | 'flat';
+    enableAnimations?: boolean;
+    animationDuration?: number;
+    columnWidth?: number | 'auto';
+    columnGap?: number;
+    cardGap?: number;
+    showTooltips?: boolean;
+    tooltipDelay?: number;
 }
 
-declare function Kanban({ columns: initialColumns, onCardMove, onCardClick, onCardEdit, onCardDelete, onCardUpdate, onAddCard, onAddColumn, onColumnUpdate, onColumnDelete, onBulkAction, onExport, className, showAddColumn, showCardDetails, showFilters, showSearch, enableKeyboardShortcuts, cardTemplates, columnTemplates, filters, defaultFilter, loading, disabled, labels, users }: KanbanProps): react_jsx_runtime.JSX.Element;
+declare function Kanban({ columns: initialColumns, onCardMove, onCardClick, onCardEdit, onCardDelete, onCardUpdate, onAddCard, onAddColumn, onColumnUpdate, onColumnDelete, onBulkAction, onExport, className, showAddColumn, showCardDetails, showFilters, showSearch, enableKeyboardShortcuts, cardTemplates, columnTemplates, filters, defaultFilter, loading, disabled, labels, users, renderCard, renderCardPreview, renderCardBadge, renderCardActions, cardCompactMode, cardShowCoverImage, cardShowAssignees, cardShowLabels, cardShowProgress, cardDateFormat, cardMaxAssigneesToShow, renderAddCardButton, renderAddCardForm, addCardButtonText, addCardPosition, allowQuickAdd, quickAddFields, validateCard, onBeforeCardAdd, renderColumnHeader, renderColumnFooter, renderEmptyColumn, columnMenuActions, allowColumnReorder, columnColorOptions, columnDefaultColor, dragDisabled, dropDisabled, dragPreview, renderDragPreview, canDrop, onDragStart, onDragEnd, theme, cardVariant, enableAnimations, animationDuration, columnWidth, columnGap, cardGap, showTooltips, tooltipDelay }: KanbanProps): react_jsx_runtime.JSX.Element;
 
 interface AIConfig {
     provider?: 'openai' | 'claude' | 'gemini' | 'cohere';

package/dist/index.mjs

@@ -12183,29 +12183,51 @@ var useAutoScroll = () => {
 };
 var KanbanCardComponent = ({
   card,
+  column,
   isDragging,
   onEdit,
   onDelete,
   onClick,
   showDetails,
-  disabled
+  disabled,
+  renderCard,
+  renderCardPreview,
+  renderCardBadge,
+  renderCardActions,
+  cardCompactMode,
+  cardShowCoverImage,
+  cardShowAssignees,
+  cardShowLabels,
+  cardShowProgress,
+  cardDateFormat,
+  cardMaxAssigneesToShow,
+  provided,
+  enableAnimations,
+  animationDuration,
+  cardVariant
 }) => {
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [title, setTitle] = useState(card.title);
   const dragControls = useDragControls();
+  const animationsEnabled = enableAnimations ?? true;
+  const animDuration = animationDuration ?? 0.2;
+  const variant = cardVariant ?? "default";
   const completedChecklistItems = card.checklist?.items.filter((item) => item.completed).length || 0;
   const totalChecklistItems = card.checklist?.items.length || 0;
   const checklistProgress = totalChecklistItems > 0 ? completedChecklistItems / totalChecklistItems * 100 : 0;
+  if (renderCard) {
+    return renderCard(card, column, provided || {});
+  }
   return /* @__PURE__ */ jsx(
     motion.div,
     {
       layout: true,
-      initial: { opacity: 0, y: 20 },
+      initial: { opacity: animationsEnabled ? 0 : 1, y: animationsEnabled ? 20 : 0 },
       animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: -20 },
-      whileHover: { scale: 1.02 },
-      whileDrag: { scale: 1.05, rotate: 3 },
-      transition: { duration: 0.2 },
+      exit: { opacity: animationsEnabled ? 0 : 1, y: animationsEnabled ? -20 : 0 },
+      whileHover: animationsEnabled ? { scale: 1.02 } : {},
+      whileDrag: animationsEnabled ? { scale: 1.05, rotate: 3 } : {},
+      transition: { duration: animationsEnabled ? animDuration : 0 },
       className: cn(
         "relative group cursor-pointer select-none",
         isDragging && "z-50"
@@ -12214,7 +12236,11 @@ var KanbanCardComponent = ({
         MoonUICardPro,
         {
           className: cn(
-            "border hover:shadow-md transition-all duration-200",
+            "border transition-all duration-200",
+            variant === "bordered" && "border-2",
+            variant === "elevated" && "shadow-lg hover:shadow-xl",
+            variant === "flat" && "border-0 bg-muted/30",
+            variant === "default" && "hover:shadow-md",
             isDragging && "shadow-2xl ring-2 ring-primary ring-offset-2",
             disabled && "cursor-not-allowed opacity-50"
           ),
@@ -12227,7 +12253,7 @@ var KanbanCardComponent = ({
                 onPointerDown: (e) => dragControls.start(e)
               }
             ),
-            card.coverImage && /* @__PURE__ */ jsxs("div", { className: "relative h-32 -mx-px -mt-px rounded-t-lg overflow-hidden", children: [
+            cardShowCoverImage && card.coverImage && /* @__PURE__ */ jsxs("div", { className: "relative h-32 -mx-px -mt-px rounded-t-lg overflow-hidden", children: [
               /* @__PURE__ */ jsx(
                 "img",
                 {
@@ -12239,7 +12265,7 @@ var KanbanCardComponent = ({
               /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" })
             ] }),
             /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "p-3", children: [
-              card.labels && card.labels.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mb-2", children: card.labels.map((label) => /* @__PURE__ */ jsx(
+              cardShowLabels && card.labels && card.labels.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mb-2", children: card.labels.map((label) => /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: "h-2 w-12 rounded-full",
@@ -12269,7 +12295,7 @@ var KanbanCardComponent = ({
                     onClick: (e) => e.stopPropagation()
                   }
                 ) : /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm line-clamp-2", children: card.title }) }),
-                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                renderCardActions ? /* @__PURE__ */ jsx("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity", children: renderCardActions(card) }) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
                   /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(
                     MoonUIButtonPro,
                     {
@@ -12312,8 +12338,8 @@ var KanbanCardComponent = ({
                   ] })
                 ] }) })
               ] }),
-              card.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-3 line-clamp-2", children: card.description }),
-              (card.progress !== void 0 || card.checklist) && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
+              !cardCompactMode && card.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mb-3 line-clamp-2", children: card.description }),
+              cardShowProgress && (card.progress !== void 0 || card.checklist) && /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground mb-1", children: [
                   /* @__PURE__ */ jsx("span", { children: "Progress" }),
                   /* @__PURE__ */ jsxs("span", { children: [
@@ -12323,7 +12349,7 @@ var KanbanCardComponent = ({
                 ] }),
                 /* @__PURE__ */ jsx(MoonUIProgressPro, { value: card.progress || checklistProgress, className: "h-1" })
               ] }),
-              card.tags && card.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mb-3", children: card.tags.map((tag, index2) => /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "text-xs px-1.5 py-0", children: tag }, index2)) }),
+              !cardCompactMode && card.tags && card.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mb-3", children: card.tags.map((tag, index2) => /* @__PURE__ */ jsx(MoonUIBadgePro, { variant: "secondary", className: "text-xs px-1.5 py-0", children: tag }, index2)) }),
               showDetails && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   card.priority && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -12335,7 +12361,7 @@ var KanbanCardComponent = ({
                     isOverdue(card.dueDate) && "text-destructive"
                   ), children: [
                     /* @__PURE__ */ jsx(Calendar$1, { className: "h-3 w-3" }),
-                    /* @__PURE__ */ jsx("span", { children: formatDate(card.dueDate) })
+                    /* @__PURE__ */ jsx("span", { children: cardDateFormat ? format(card.dueDate, cardDateFormat) : formatDate(card.dueDate) })
                   ] }),
                   card.checklist && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                     /* @__PURE__ */ jsx(CheckSquare, { className: "h-3 w-3" }),
@@ -12355,7 +12381,7 @@ var KanbanCardComponent = ({
                     /* @__PURE__ */ jsx(Paperclip, { className: "h-3 w-3" }),
                     /* @__PURE__ */ jsx("span", { children: card.attachments.length })
                   ] }),
-                  card.assignees && card.assignees.length > 0 && /* @__PURE__ */ jsx(MoonUIAvatarGroupPro, { max: 3, size: "xs", children: card.assignees.map((assignee) => /* @__PURE__ */ jsxs(MoonUIAvatarPro, { className: "h-5 w-5", children: [
+                  cardShowAssignees && card.assignees && card.assignees.length > 0 && /* @__PURE__ */ jsx(MoonUIAvatarGroupPro, { max: cardMaxAssigneesToShow, size: "xs", children: card.assignees.map((assignee) => /* @__PURE__ */ jsxs(MoonUIAvatarPro, { className: "h-5 w-5", children: [
                     /* @__PURE__ */ jsx(MoonUIAvatarImagePro, { src: assignee.avatar }),
                     /* @__PURE__ */ jsx(MoonUIAvatarFallbackPro, { className: "text-xs", children: getInitials3(assignee.name) })
                   ] }, assignee.id)) })
@@ -12394,7 +12420,54 @@ function Kanban({
   loading = false,
   disabled = false,
   labels = [],
-  users = []
+  users = [],
+  // Card Render Customization
+  renderCard,
+  renderCardPreview,
+  renderCardBadge,
+  renderCardActions,
+  cardCompactMode = false,
+  cardShowCoverImage = true,
+  cardShowAssignees = true,
+  cardShowLabels = true,
+  cardShowProgress = true,
+  cardDateFormat,
+  cardMaxAssigneesToShow = 3,
+  // Add Card Customization
+  renderAddCardButton,
+  renderAddCardForm,
+  addCardButtonText,
+  addCardPosition = "bottom",
+  allowQuickAdd = true,
+  quickAddFields = ["title"],
+  validateCard,
+  onBeforeCardAdd,
+  // Column Customization
+  renderColumnHeader,
+  renderColumnFooter,
+  renderEmptyColumn,
+  columnMenuActions,
+  allowColumnReorder = true,
+  columnColorOptions,
+  columnDefaultColor = "#6B7280",
+  // Drag & Drop Enhancement
+  dragDisabled = false,
+  dropDisabled = false,
+  dragPreview = "card",
+  renderDragPreview,
+  canDrop,
+  onDragStart,
+  onDragEnd,
+  // UI/UX Customization
+  theme = "default",
+  cardVariant = "default",
+  enableAnimations = true,
+  animationDuration = 0.2,
+  columnWidth,
+  columnGap = 24,
+  cardGap = 12,
+  showTooltips = true,
+  tooltipDelay = 500
 }) {
   const { hasProAccess, isLoading } = useSubscription();
   if (!isLoading && !hasProAccess) {
@@ -12485,11 +12558,24 @@ function Kanban({
   const handleDragStart = (card, columnId) => {
     if (disabled)
       return;
+    if (typeof dragDisabled === "function" && dragDisabled(card))
+      return;
+    if (dragDisabled === true)
+      return;
     setDraggedCard(card.id);
+    const column = columns.find((col) => col.id === columnId);
+    if (column && onDragStart) {
+      onDragStart(card, column);
+    }
   };
   const handleDragOver = (e, columnId) => {
     if (disabled)
       return;
+    const column = columns.find((col) => col.id === columnId);
+    if (column && typeof dropDisabled === "function" && dropDisabled(column))
+      return;
+    if (dropDisabled === true)
+      return;
     e.preventDefault();
     setDraggedOverColumn(columnId);
     const container = scrollRef.current;
@@ -12506,6 +12592,13 @@ function Kanban({
     }
   };
   const handleDragEnd = () => {
+    if (draggedCard) {
+      const card = columns.flatMap((col) => col.cards).find((c2) => c2.id === draggedCard);
+      const column = columns.find((col) => col.cards.some((c2) => c2.id === draggedCard));
+      if (card && column && onDragEnd) {
+        onDragEnd(card, column);
+      }
+    }
     setDraggedCard(null);
     setDraggedOverColumn(null);
     stopAutoScroll();
@@ -12514,6 +12607,11 @@ function Kanban({
     if (disabled || !draggedCard || !onCardMove)
       return;
     e.preventDefault();
+    const targetColumn = columns.find((col) => col.id === targetColumnId);
+    const draggedCardObj = columns.flatMap((col) => col.cards).find((card) => card.id === draggedCard);
+    if (targetColumn && draggedCardObj && canDrop && !canDrop(draggedCardObj, targetColumn, targetIndex)) {
+      return;
+    }
     let sourceColumnId = null;
     let sourceCard = null;
     for (const column of columns) {
@@ -12691,11 +12789,11 @@ function Kanban({
       description: "Column color has been changed"
     });
   };
-  const handleExport = (format5) => {
+  const handleExport = (format6) => {
     if (onExport) {
-      onExport(format5);
+      onExport(format6);
     } else {
-      if (format5 === "json") {
+      if (format6 === "json") {
         const data = JSON.stringify(columns, null, 2);
         const blob = new Blob([data], { type: "application/json" });
         const url = URL.createObjectURL(blob);
@@ -12710,7 +12808,7 @@ function Kanban({
           title: "Board exported",
           description: "Board exported as JSON file"
         });
-      } else if (format5 === "csv") {
+      } else if (format6 === "csv") {
         let csv = "Column,Card Title,Description,Priority,Assignees,Due Date,Tags\n";
         columns.forEach((column) => {
           column.cards.forEach((card) => {
@@ -12853,7 +12951,8 @@ function Kanban({
       "div",
       {
         ref: scrollRef,
-        className: "flex gap-6 overflow-x-auto pb-4",
+        className: "flex overflow-x-auto pb-4",
+        style: { gap: `${columnGap}px` },
         onDragOver: (e) => e.preventDefault(),
         children: [
           /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: filteredColumns.map((column) => {
@@ -12862,14 +12961,19 @@ function Kanban({
             return /* @__PURE__ */ jsx(
               motion.div,
               {
-                layout: true,
-                initial: { opacity: 0, x: -20 },
+                layout: enableAnimations,
+                initial: { opacity: enableAnimations ? 0 : 1, x: enableAnimations ? -20 : 0 },
                 animate: { opacity: 1, x: 0 },
-                exit: { opacity: 0, x: 20 },
+                exit: { opacity: enableAnimations ? 0 : 1, x: enableAnimations ? 20 : 0 },
                 className: cn(
-                  "flex-shrink-0 w-80 transition-all duration-200",
+                  "flex-shrink-0 transition-all",
                   isDraggedOver && "scale-105"
                 ),
+                style: {
+                  width: columnWidth === "auto" ? "auto" : (columnWidth || 320) + "px",
+                  minWidth: columnWidth === "auto" ? "300px" : void 0,
+                  transitionDuration: enableAnimations ? `${animationDuration}s` : "0s"
+                },
                 onDragOver: (e) => handleDragOver(e, column.id),
                 onDragLeave: () => setDraggedOverColumn(null),
                 onDrop: (e) => handleDrop(e, column.id, column.cards.length),
@@ -12878,7 +12982,7 @@ function Kanban({
                   isDraggedOver && "ring-2 ring-primary ring-offset-2 bg-primary/5",
                   column.collapsed && "opacity-60"
                 ), children: [
-                  /* @__PURE__ */ jsxs(MoonUICardHeaderPro, { className: "pb-3", children: [
+                  /* @__PURE__ */ jsx(MoonUICardHeaderPro, { className: "pb-3", children: renderColumnHeader ? renderColumnHeader(column) : /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                         column.color && /* @__PURE__ */ jsx(
@@ -12915,7 +13019,21 @@ function Kanban({
                       ] }),
                       /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
                         /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsx(MoonUIButtonPro, { variant: "ghost", size: "sm", className: "h-6 w-6 p-0", children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }),
-                        /* @__PURE__ */ jsxs(MoonUIDropdownMenuContentPro, { align: "end", children: [
+                        /* @__PURE__ */ jsx(MoonUIDropdownMenuContentPro, { align: "end", children: columnMenuActions ? columnMenuActions.map((action, index2) => {
+                          if (action.visible && !action.visible(column))
+                            return null;
+                          return /* @__PURE__ */ jsxs(
+                            MoonUIDropdownMenuItemPro,
+                            {
+                              onClick: () => action.action(column),
+                              children: [
+                                action.icon || null,
+                                action.label
+                              ]
+                            },
+                            index2
+                          );
+                        }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                           /* @__PURE__ */ jsxs(MoonUIDropdownMenuItemPro, { onClick: () => handleColumnAction(column, "rename"), children: [
                             /* @__PURE__ */ jsx(Edit, { className: "mr-2 h-4 w-4" }),
                             "Rename"
@@ -12967,7 +13085,7 @@ function Kanban({
                               ]
                             }
                           )
-                        ] })
+                        ] }) })
                       ] })
                     ] }),
                     column.limit && /* @__PURE__ */ jsx(MoonUICardDescriptionPro, { className: cn(
@@ -12981,12 +13099,12 @@ function Kanban({
                       column.limit,
                       ")"
                     ] }) : `WIP limit: ${column.cards.length}/${column.limit}` })
-                  ] }),
-                  !column.collapsed && /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "space-y-3", children: [
-                    /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-300px)]", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: column.cards.sort((a, b) => a.position - b.position).map((card, index2) => /* @__PURE__ */ jsx(
+                  ] }) }),
+                  !column.collapsed && /* @__PURE__ */ jsxs(MoonUICardContentPro, { className: "space-y-3", style: { gap: `${cardGap}px` }, children: [
+                    /* @__PURE__ */ jsx(ScrollArea, { className: "h-[calc(100vh-300px)]", children: column.cards.length === 0 && renderEmptyColumn ? renderEmptyColumn(column) : /* @__PURE__ */ jsx(AnimatePresence, { mode: enableAnimations ? "popLayout" : void 0, children: column.cards.sort((a, b) => a.position - b.position).map((card, index2) => /* @__PURE__ */ jsx(
                       "div",
                       {
-                        draggable: !disabled,
+                        draggable: !disabled && (typeof dragDisabled === "function" ? !dragDisabled(card) : !dragDisabled),
                         onDragStart: () => handleDragStart(card, column.id),
                         onDragEnd: handleDragEnd,
                         onDrop: (e) => {
@@ -12999,6 +13117,7 @@ function Kanban({
                           KanbanCardComponent,
                           {
                             card,
+                            column,
                             isDragging: draggedCard === card.id,
                             onEdit: (e) => {
                               e.stopPropagation();
@@ -13010,13 +13129,27 @@ function Kanban({
                             },
                             onClick: () => handleCardClick(card),
                             showDetails: showCardDetails,
-                            disabled
+                            disabled,
+                            renderCard,
+                            renderCardPreview,
+                            renderCardBadge,
+                            renderCardActions,
+                            cardCompactMode,
+                            cardShowCoverImage,
+                            cardShowAssignees,
+                            cardShowLabels,
+                            cardShowProgress,
+                            cardDateFormat,
+                            cardMaxAssigneesToShow,
+                            enableAnimations,
+                            animationDuration,
+                            cardVariant
                           }
                         )
                       },
                       card.id
                     )) }) }),
-                    onAddCard && !column.locked && !isOverLimit && /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
+                    onAddCard && !column.locked && !isOverLimit && (renderAddCardButton ? renderAddCardButton(column.id) : /* @__PURE__ */ jsxs(MoonUIDropdownMenuPro, { children: [
                       /* @__PURE__ */ jsx(MoonUIDropdownMenuTriggerPro, { asChild: true, children: /* @__PURE__ */ jsxs(
                         MoonUIButtonPro,
                         {
@@ -13026,7 +13159,7 @@ function Kanban({
                           disabled,
                           children: [
                             /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4 mr-2" }),
-                            "Add card"
+                            typeof addCardButtonText === "function" ? addCardButtonText(column.id) : addCardButtonText || "Add card"
                           ]
                         }
                       ) }),
@@ -13049,7 +13182,8 @@ function Kanban({
                           index2
                         ))
                       ] })
-                    ] })
+                    ] })),
+                    renderColumnFooter && renderColumnFooter(column)
                   ] })
                 ] })
               },
@@ -55056,9 +55190,9 @@ function AdvancedChart({
       toggleSeriesVisibility(entry.dataKey);
     }
   };
-  const handleExport = (format5) => {
+  const handleExport = (format6) => {
     if (onExport) {
-      onExport(format5);
+      onExport(format6);
     }
   };
   const handleZoom = (direction) => {
@@ -59254,7 +59388,7 @@ var OptimizedImageInternal = ({
   width,
   height,
   quality = 75,
-  format: format5 = "auto",
+  format: format6 = "auto",
   lazy = true,
   blur: blur2 = true,
   priority = false,
@@ -59293,7 +59427,7 @@ var OptimizedImageInternal = ({
       params.set("f", options.format);
     return optimizedUrl;
   };
-  const optimizedSrc = getOptimizedSrc(src, { width, height, quality, format: format5 });
+  const optimizedSrc = getOptimizedSrc(src, { width, height, quality, format: format6 });
   const handleImageLoad = () => {
     setIsLoaded(true);
     setIsLoading(false);
@@ -59457,7 +59591,7 @@ var OptimizedImageInternal = ({
                   ] }),
                   /* @__PURE__ */ jsxs("div", { children: [
                     "Format: ",
-                    format5
+                    format6
                   ] })
                 ]
               }
@@ -62337,11 +62471,11 @@ function downloadFile(content, filename, mimeType) {
   URL.revokeObjectURL(url);
 }
 async function exportData(data, options) {
-  const { format: format5, filename = "data-export", columns, includeHeaders = true } = options;
+  const { format: format6, filename = "data-export", columns, includeHeaders = true } = options;
   let content;
   let mimeType;
   let extension;
-  switch (format5) {
+  switch (format6) {
     case "csv":
       content = dataToCSV(data, columns, includeHeaders);
       mimeType = "text/csv;charset=utf-8;";
@@ -62355,7 +62489,7 @@ async function exportData(data, options) {
     case "xlsx":
       throw new Error("XLSX export requires additional dependencies. Use CSV format instead.");
     default:
-      throw new Error(`Unsupported export format: ${format5}`);
+      throw new Error(`Unsupported export format: ${format6}`);
   }
   const finalFilename = `${filename}-${( new Date()).toISOString().split("T")[0]}.${extension}`;
   downloadFile(content, finalFilename, mimeType);
@@ -62838,11 +62972,11 @@ function DataTable({
     rowSelection: features.rowSelection !== false || selectable,
     export: features.export !== false || exportable
   });
-  const handleExport = async (format5) => {
+  const handleExport = async (format6) => {
     const selectedRows = table.getFilteredSelectedRowModel().rows;
     const dataToExport = selectedRows.length > 0 ? selectedRows.map((row) => row.original) : table.getFilteredRowModel().rows.map((row) => row.original);
     if (typeof exportable === "object" && exportable.onExport) {
-      exportable.onExport(dataToExport, format5);
+      exportable.onExport(dataToExport, format6);
       return;
     }
     if (onExport) {
@@ -62852,7 +62986,7 @@ function DataTable({
     const filename = typeof exportable === "object" && exportable.filename ? exportable.filename : "data-export";
     const visibleColumns = getVisibleColumns(columns, columnVisibility);
     await exportData(dataToExport, {
-      format: format5,
+      format: format6,
       filename,
       columns: visibleColumns,
       includeHeaders: true
@@ -64784,18 +64918,18 @@ var countries = [
   { code: "NO", name: "Norway", dialCode: "+47", flag: "\u{1F1F3}\u{1F1F4}", format: "xxx xx xxx" },
   { code: "FI", name: "Finland", dialCode: "+358", flag: "\u{1F1EB}\u{1F1EE}", format: "xx xxxxxxx" }
 ];
-function formatPhoneNumber(number, format5) {
-  if (!number || !format5)
+function formatPhoneNumber(number, format6) {
+  if (!number || !format6)
     return "";
   const cleaned = number.replace(/\D/g, "");
   let formatted = "";
   let digitIndex = 0;
-  for (let i = 0; i < format5.length && digitIndex < cleaned.length; i++) {
-    if (format5[i] === "x") {
+  for (let i = 0; i < format6.length && digitIndex < cleaned.length; i++) {
+    if (format6[i] === "x") {
       formatted += cleaned[digitIndex];
       digitIndex++;
     } else {
-      formatted += format5[i];
+      formatted += format6[i];
     }
   }
   return formatted;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui-pro",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components",
   "type": "module",
   "main": "dist/index.mjs",