aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
91 lines • 3.08 kB
TypeScript
import React from "react";
export interface KanbanCard {
id: string;
title: string;
description?: string;
content?: React.ReactNode;
priority?: "low" | "medium" | "high" | "urgent";
tags?: string[];
assignee?: {
id: string;
name: string;
avatar?: string;
};
dueDate?: Date;
createdAt?: Date;
updatedAt?: Date;
customData?: Record<string, any>;
}
export interface KanbanColumn {
id: string;
title: string;
description?: string;
color?: string;
limit?: number;
cards: KanbanCard[];
allowedCardTypes?: string[];
readOnly?: boolean;
customData?: Record<string, any>;
}
export interface DragState {
isDragging: boolean;
draggedCard?: KanbanCard;
draggedFrom?: string;
dragOverColumn?: string;
dragPosition?: number;
}
export interface GlassKanbanBoardProps extends React.HTMLAttributes<HTMLDivElement> {
/** Board columns */
columns?: KanbanColumn[];
/** Board title */
title?: string;
/** Board description */
description?: string;
/** Whether cards can be dragged */
enableDrag?: boolean;
/** Whether to show card counts */
showCardCounts?: boolean;
/** Whether to show column limits */
showColumnLimits?: boolean;
/** Card size variant */
cardSize?: "sm" | "md" | "lg";
/** Whether to enable virtual scrolling */
virtualized?: boolean;
/** Column width */
columnWidth?: string | number;
/** Maximum board height */
maxHeight?: string | number;
/** Custom card renderer */
renderCard?: (card: KanbanCard, columnId: string) => React.ReactNode;
/** Custom column header renderer */
renderColumnHeader?: (column: KanbanColumn) => React.ReactNode;
/** Card move handler */
onCardMove?: (cardId: string, fromColumn: string, toColumn: string, position: number) => void;
/** Card click handler */
onCardClick?: (card: KanbanCard, columnId: string) => void;
/** Card double click handler */
onCardDoubleClick?: (card: KanbanCard, columnId: string) => void;
/** Column add handler */
onColumnAdd?: () => void;
/** Column update handler */
onColumnUpdate?: (column: KanbanColumn) => void;
/** Column delete handler */
onColumnDelete?: (columnId: string) => void;
/** Card add handler */
onCardAdd?: (columnId: string) => void;
/** Card update handler */
onCardUpdate?: (card: KanbanCard, columnId: string) => void;
/** Card delete handler */
onCardDelete?: (cardId: string, columnId: string) => void;
/** Whether to show add column button */
showAddColumn?: boolean;
/** Whether to show add card buttons */
showAddCard?: boolean;
/** Custom empty state */
emptyState?: React.ReactNode;
/** Respect motion preferences */
respectMotionPreference?: boolean;
}
export declare const GlassKanbanBoard: React.ForwardRefExoticComponent<GlassKanbanBoardProps & React.RefAttributes<HTMLDivElement>>;
export default GlassKanbanBoard;
//# sourceMappingURL=GlassKanbanBoard.d.ts.map