// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name List View 03 * @description A list view with checkboxes for selection. * Perfect for batch operations and task lists. * * @slots list-view, list-view-container, list-view-toolbar, list-view-select-all, * list-view-selection-count, list-view-toolbar-actions, list-view-list, * list-view-item, list-view-item-checkbox, list-view-item-priority, * list-view-item-content, list-view-item-title, list-view-item-description, * list-view-item-meta * @variant selectable * * @registryDependencies button badge checkbox * @dependencies lucide-react */ import * as React from "react" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" import { Checkbox } from "@/registry/ui/checkbox" import { Trash2, Archive, Star, MoreHorizontal } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface ListItem { /** Unique identifier */ id: string /** Item title */ title: string /** Item description */ description?: string /** Due date or timestamp */ date?: string /** Priority level */ priority?: "low" | "medium" | "high" /** Is starred/favorited */ starred?: boolean } interface ListView03Props { /** Items to display */ items?: ListItem[] /** Currently selected item IDs */ selectedIds?: string[] /** Callback when selection changes */ onSelectionChange?: (ids: string[]) => void /** Callback when delete is clicked */ onDelete?: (ids: string[]) => void /** Callback when archive is clicked */ onArchive?: (ids: string[]) => void /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultItems: ListItem[] = [ { id: "1", title: "Review quarterly report", description: "Analyze Q4 performance metrics", date: "Today", priority: "high", starred: true }, { id: "2", title: "Update documentation", description: "Add new API endpoints", date: "Tomorrow", priority: "medium" }, { id: "3", title: "Team sync meeting", description: "Weekly standup with engineering", date: "Dec 20", priority: "medium" }, { id: "4", title: "Code review", description: "Review pull requests for v2.0", date: "Dec 21", priority: "high" }, { id: "5", title: "Database optimization", description: "Improve query performance", date: "Dec 22", priority: "low" }, ] const priorityColors: Record = { low: "bg-muted-foreground", medium: "bg-warning", high: "bg-destructive", } // ============================================================================ // COMPONENT // ============================================================================ function ListView03({ items = defaultItems, selectedIds: controlledSelectedIds, onSelectionChange, onDelete, onArchive, className, }: ListView03Props) { const [internalSelected, setInternalSelected] = React.useState([]) const selectedIds = controlledSelectedIds ?? internalSelected const handleSelect = (id: string, checked: boolean) => { const newIds = checked ? [...selectedIds, id] : selectedIds.filter((i) => i !== id) setInternalSelected(newIds) onSelectionChange?.(newIds) } const handleSelectAll = (checked: boolean) => { const newIds = checked ? items.map((i) => i.id) : [] setInternalSelected(newIds) onSelectionChange?.(newIds) } const allSelected = selectedIds.length === items.length && items.length > 0 return (

Task List

{/* Toolbar */}

handleSelectAll(!!checked)} aria-label="Select all" /> {selectedIds.length > 0 ? `${selectedIds.length} selected` : `${items.length} items`}

{selectedIds.length > 0 && (

)}

{/* List */}

{items.map((item) => { const isSelected = selectedIds.includes(item.id) return (

{/* Checkbox */} handleSelect(item.id, !!checked)} aria-label={`Select ${item.title}`} /> {/* Priority Indicator */}

{/* Content */}

{item.title}

{item.starred && (

{item.description && (

{item.description}

)}

{/* Date & Priority */}

{item.date && ( {item.date} )} {item.priority && ( {item.priority} )}

) })}

) } export default ListView03 export { ListView03, type ListView03Props, type ListItem }