@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

package/dist/src/components/patient-table.js

@@ -0,0 +1,921 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { ArrowLeftToLine, ArrowRightToLine, ChevronDown, ChevronUp, GripVertical, MoreHorizontal, PinOff, Search } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Button } from "../shadcn/components/ui/button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../shadcn/components/ui/dropdown-menu.js";
+import { Input } from "../shadcn/components/ui/input.js";
+import { cn } from "../shadcn/lib/utils.js";
+// Unstyled table components to preserve custom styling
+const Table = ({ className, ...props })=>/*#__PURE__*/ _jsx("table", {
+        className: className,
+        ...props
+    });
+const TableHeader = ({ className, ...props })=>/*#__PURE__*/ _jsx("thead", {
+        className: className,
+        ...props
+    });
+const TableBody = ({ className, ...props })=>/*#__PURE__*/ _jsx("tbody", {
+        className: className,
+        ...props
+    });
+const TableRow = ({ className, ...props })=>/*#__PURE__*/ _jsx("tr", {
+        className: className,
+        ...props
+    });
+const TableHead = ({ className, ...props })=>/*#__PURE__*/ _jsx("th", {
+        className: className,
+        ...props
+    });
+const TableCell = ({ className, ...props })=>/*#__PURE__*/ _jsx("td", {
+        className: className,
+        ...props
+    });
+const getPinningStyles = (column)=>{
+    const isPinned = column.getIsPinned();
+    return {
+        left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+        right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+        position: isPinned ? "sticky" : "relative",
+        width: column.getSize(),
+        zIndex: isPinned ? 1 : 0
+    };
+};
+// Styles
+const styles = {
+    // Table container
+    tableContainer: cn("w-full", "overflow-x-auto", "border", "border-border-secondary", "rounded-md"),
+    table: cn("w-full", "table-fixed", "border-collapse", "text-sm", "[&_td]:border-border", "[&_th]:border-border", "border-separate", "border-spacing-0", "[&_tfoot_td]:border-t", "[&_th]:border-b", "[&_tr]:border-none"),
+    // Global cell padding
+    cellPadding: cn("px-4"),
+    pinnedColumn: cn("data-pinned:bg-background/90", "data-pinned:backdrop-blur-xs", "[&[data-pinned=left][data-last-col=left]]:border-r", "[&[data-pinned=left][data-last-col=left]]:border-r-border-primary", "[&[data-pinned=right][data-last-col=right]]:border-l", "[&[data-pinned=right][data-last-col=right]]:border-l-border-primary"),
+    pinnedHeader: cn("data-pinned:bg-muted/90", "data-pinned:backdrop-blur-xs", "[&[data-pinned=left][data-last-col=left]]:border-r", "[&[data-pinned=left][data-last-col=left]]:border-r-border-primary", "[&[data-pinned=right][data-last-col=right]]:border-l", "[&[data-pinned=right][data-last-col=right]]:border-l-border-primary"),
+    // Header styles
+    thead: cn("bg-bg-secondary"),
+    th: cn("h-8", "text-left", "font-medium", "text-text-primary", "select-none"),
+    thSortable: cn("cursor-pointer", "hover:bg-bg-tertiary"),
+    thSorted: cn("bg-bg-link/3", "border-b", "border-border-link"),
+    thRightAlign: cn("text-right"),
+    // Cell styles for sorted columns
+    cellSorted: cn("bg-bg-link/3"),
+    // Header content
+    headerContent: cn("h-8", "flex", "items-center", "justify-between", "typo-body", "text-text-secondary", "relative", "w-full"),
+    headerText: cn("truncate", "pr-3"),
+    headerIcons: cn("flex", "flex-col", "items-center", "justify-center"),
+    headerIcon: cn("w-3", "h-3"),
+    headerIconInactive: cn("w-3", "h-3", "opacity-30"),
+    // Cell content
+    cellContent: cn("h-8", "flex", "items-center", "text-text-primary"),
+    cellText: cn("truncate"),
+    cellCode: cn("h-8", "flex", "items-center", "text-text-primary", "typo-code"),
+    cellRightAlign: cn("justify-end"),
+    cellTextRightAlign: cn("text-right"),
+    // Filter row
+    filterRow: cn("bg-white", "border-b", "border-border-secondary"),
+    filterCell: cn("px-1", "h-8"),
+    filterCellPinned: cn("px-1", "h-8", "bg-white/90", "backdrop-blur-xs"),
+    filterActions: cn("text-text-tertiary", "text-sm"),
+    filterInput: cn("border-0", "h-8"),
+    filterIcon: cn("w-4", "h-4", "text-text-tertiary"),
+    dataRow: cn("hover:bg-bg-link/10"),
+    dataRowZebra: cn("bg-bg-secondary", "hover:bg-bg-link/10"),
+    dataCell: cn("h-8"),
+    // Action button
+    actionButton: cn("text-text-link", "hover:text-text-link_hover", "transition-colors", "cursor-pointer"),
+    // Action link
+    actionLink: cn("text-text-link", "hover:text-text-link_hover", "transition-colors", "cursor-pointer"),
+    // Column resize handle
+    resizeHandle: cn("absolute", "right-0", "top-0", "h-full", "w-1", "bg-border-primary", "cursor-col-resize", "user-select-none", "touch-action-none", "opacity-0", "hover:opacity-100", "active:opacity-100", "transition-opacity", "duration-150", "before:absolute", "before:right-[-4px]", "before:top-0", "before:w-2", "before:h-full", "before:content-['']"),
+    resizeHandleActive: cn("opacity-100", "bg-border-link"),
+    // Resizable header indicator
+    resizableHeader: cn("group-hover:[&:not(:last-child)]:after:opacity-30", "after:absolute", "after:right-0", "after:top-1/2", "after:-translate-y-1/2", "after:h-4", "after:w-px", "after:bg-border-primary", "after:opacity-0", "after:transition-opacity", "after:duration-150", "hover:after:opacity-50", "last:after:w-0"),
+    // Draggable header styles
+    draggableHeader: cn("transition-all", "duration-150", "group/header"),
+    dragZone: cn("absolute", "left-0", "top-0", "h-full", "cursor-grab", "active:cursor-grabbing", "flex", "items-center", "justify-start", "pl-0", "opacity-0", "hover:opacity-100", "group-hover/header:opacity-60", "hover:!opacity-100", "transition-opacity", "duration-150", "bg-transparent", "border-none", "text-text-tertiary", "hover:text-text-secondary", "right-5"),
+    draggingHeader: cn("bg-bg-primary_inverse/10", "scale-105", "shadow-lg", "z-50"),
+    draggingColumn: cn("bg-bg-primary_inverse/10", "shadow-inner"),
+    dropZone: cn("relative", "before:absolute", "before:left-0", "before:top-0", "before:w-1", "before:h-full", "before:bg-border-link", "before:opacity-0", "before:transition-opacity", "before:duration-150"),
+    dropZoneActive: cn("before:opacity-100")
+};
+// Mock components
+function TableHeaderContent({ content, isSortable = false, sortDirection = null, isPinnable = false, pinnedDirection = false, onPin }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: styles.headerContent,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: styles.headerText,
+                children: content
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center",
+                children: [
+                    isSortable && /*#__PURE__*/ _jsx("div", {
+                        className: styles.headerIcons,
+                        children: sortDirection === "asc" ? /*#__PURE__*/ _jsx(ChevronUp, {
+                            className: styles.headerIcon
+                        }) : sortDirection === "desc" ? /*#__PURE__*/ _jsx(ChevronDown, {
+                            className: styles.headerIcon
+                        }) : /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col",
+                            children: [
+                                /*#__PURE__*/ _jsx(ChevronUp, {
+                                    className: styles.headerIconInactive
+                                }),
+                                /*#__PURE__*/ _jsx(ChevronDown, {
+                                    className: styles.headerIconInactive
+                                })
+                            ]
+                        })
+                    }),
+                    isPinnable && onPin && (pinnedDirection ? /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        variant: "ghost",
+                        className: "h-6 w-6 p-0 ml-1 opacity-60 hover:opacity-100",
+                        onClick: ()=>onPin(false),
+                        title: "Unpin column",
+                        children: /*#__PURE__*/ _jsx(PinOff, {
+                            className: "h-3 w-3"
+                        })
+                    }) : /*#__PURE__*/ _jsxs(DropdownMenu, {
+                        children: [
+                            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ _jsx(Button, {
+                                    size: "small",
+                                    variant: "ghost",
+                                    className: "h-6 w-6 p-0 ml-1 opacity-60 hover:opacity-100",
+                                    title: "Pin column",
+                                    children: /*#__PURE__*/ _jsx(MoreHorizontal, {
+                                        className: "h-3 w-3"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                                align: "end",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(DropdownMenuItem, {
+                                        onClick: ()=>onPin("left"),
+                                        children: [
+                                            /*#__PURE__*/ _jsx(ArrowLeftToLine, {
+                                                className: "mr-2 h-4 w-4"
+                                            }),
+                                            "Stick to left"
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(DropdownMenuItem, {
+                                        onClick: ()=>onPin("right"),
+                                        children: [
+                                            /*#__PURE__*/ _jsx(ArrowRightToLine, {
+                                                className: "mr-2 h-4 w-4"
+                                            }),
+                                            "Stick to right"
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }))
+                ]
+            })
+        ]
+    });
+}
+function TableCellContent({ content, type = "text", rightAlign = false, actions = [], rowId }) {
+    // For action types, render actions instead of content
+    if (type === "link" || type === "button") {
+        return /*#__PURE__*/ _jsx("div", {
+            className: cn(styles.cellContent, rightAlign && styles.cellRightAlign),
+            children: /*#__PURE__*/ _jsx("div", {
+                className: "flex gap-2",
+                children: actions.map((action, index)=>{
+                    const handleClick = (e)=>{
+                        e.stopPropagation();
+                        action.onClick(rowId || "");
+                    };
+                    const actionKey = `${rowId}-${action.label}-${index}`;
+                    if (type === "button") {
+                        return /*#__PURE__*/ _jsx(Button, {
+                            variant: action.variant || "primary",
+                            size: "small",
+                            ...action.danger !== undefined && {
+                                danger: action.danger
+                            },
+                            onClick: handleClick,
+                            children: action.label
+                        }, actionKey);
+                    }
+                    // Default to link type
+                    return /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        className: styles.actionLink,
+                        onClick: handleClick,
+                        children: action.label
+                    }, actionKey);
+                })
+            })
+        });
+    }
+    // For regular content
+    const cellClass = cn(type === "code" ? styles.cellCode : styles.cellContent, rightAlign && styles.cellRightAlign);
+    const textClass = cn(styles.cellText, rightAlign && styles.cellTextRightAlign);
+    return /*#__PURE__*/ _jsx("div", {
+        className: cellClass,
+        children: /*#__PURE__*/ _jsx("span", {
+            className: textClass,
+            children: content
+        })
+    });
+}
+// Filter row component
+function FilterRow({ headers, draggedColumn, dropTarget }) {
+    return /*#__PURE__*/ _jsx(TableRow, {
+        className: styles.filterRow,
+        children: headers.map((header)=>{
+            const tableColumn = header.column;
+            const columnKey = header.id;
+            const isPinned = tableColumn.getIsPinned();
+            const isBeingDragged = draggedColumn === columnKey;
+            const isDropTarget = dropTarget === columnKey;
+            const isLastLeftPinned = isPinned === "left" && tableColumn.getIsLastColumn("left");
+            const isFirstRightPinned = isPinned === "right" && tableColumn.getIsFirstColumn("right");
+            return /*#__PURE__*/ _jsx(TableCell, {
+                className: cn(isPinned ? styles.filterCellPinned : styles.filterCell, styles.pinnedColumn, isBeingDragged && styles.draggingColumn, isDropTarget && styles.dropZone, isDropTarget && styles.dropZoneActive),
+                style: {
+                    ...getPinningStyles(tableColumn)
+                },
+                "data-pinned": isPinned || undefined,
+                "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : undefined,
+                children: columnKey === "actions" ? /*#__PURE__*/ _jsx("div", {
+                    className: styles.filterActions
+                }) : /*#__PURE__*/ _jsx(Input, {
+                    placeholder: "Search",
+                    leftSlot: /*#__PURE__*/ _jsx(Search, {
+                        className: styles.filterIcon
+                    }),
+                    onChange: (e)=>console.log(`Filter ${columnKey}:`, e.target.value),
+                    className: styles.filterInput
+                })
+            }, `filter-${columnKey}`);
+        })
+    });
+}
+function DataTable({ columns, data, showZebraStripes, showFilters = true, showSorting = true, enableColumnResizing = false, enableColumnReordering = false, enableColumnPinning = false, onSort, columnWidths = {}, sortConfig, columnOrder = [], onColumnOrderChange, columnPinning = {}, onColumnPinningChange, columnConfigs }) {
+    const [draggedColumn, setDraggedColumn] = useState(null);
+    const [dropTarget, setDropTarget] = useState(null);
+    const initialColumnSizing = useMemo(()=>{
+        if (!enableColumnResizing || !columnConfigs) return {};
+        const sizing = {};
+        columnConfigs.forEach((config)=>{
+            if (config.width) {
+                const width = parseInt(config.width.replace("px", ""), 10);
+                if (!Number.isNaN(width)) {
+                    sizing[config.key] = width;
+                }
+            }
+        });
+        return sizing;
+    }, [
+        enableColumnResizing,
+        columnConfigs
+    ]);
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        enableColumnResizing,
+        enableColumnPinning,
+        columnResizeMode: "onChange",
+        state: {
+            ...columnOrder.length > 0 && {
+                columnOrder
+            },
+            ...enableColumnPinning && {
+                columnPinning
+            }
+        },
+        ...onColumnOrderChange && {
+            onColumnOrderChange: (updater)=>{
+                const newOrder = typeof updater === "function" ? updater(columnOrder) : updater;
+                onColumnOrderChange(newOrder);
+            }
+        },
+        ...onColumnPinningChange && enableColumnPinning && {
+            onColumnPinningChange: (updater)=>{
+                const newPinning = typeof updater === "function" ? updater(columnPinning) : updater;
+                onColumnPinningChange(newPinning);
+            }
+        },
+        initialState: {
+            columnSizing: initialColumnSizing
+        }
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: styles.tableContainer,
+        children: /*#__PURE__*/ _jsxs(Table, {
+            className: styles.table,
+            children: [
+                /*#__PURE__*/ _jsx(TableHeader, {
+                    className: styles.thead,
+                    children: /*#__PURE__*/ _jsx(TableRow, {
+                        className: enableColumnResizing ? "group" : "",
+                        children: table.getHeaderGroups()[0]?.headers.map((header)=>{
+                            const columnKey = header.id;
+                            const isSortable = columnKey !== "actions";
+                            const isPinned = header.column.getIsPinned();
+                            const isSorted = sortConfig?.key === columnKey;
+                            const isDraggable = enableColumnReordering && !isPinned;
+                            const isDragging = draggedColumn === columnKey;
+                            const isDropTarget = dropTarget === columnKey;
+                            const isLastLeftPinned = isPinned === "left" && header.column.getIsLastColumn("left");
+                            const isFirstRightPinned = isPinned === "right" && header.column.getIsFirstColumn("right");
+                            const columnConfig = columnConfigs?.find((config)=>config.key === columnKey);
+                            const isRightAlign = columnConfig?.rightAlign || false;
+                            return /*#__PURE__*/ _jsxs(TableHead, {
+                                className: cn(styles.cellPadding, styles.th, isSortable && showSorting && styles.thSortable, styles.pinnedHeader, isSorted && styles.thSorted, isRightAlign && styles.thRightAlign, "relative", enableColumnResizing && header.column.getCanResize() && styles.resizableHeader, isDraggable && styles.draggableHeader, isDragging && styles.draggingHeader, isDragging && styles.draggingColumn, isDropTarget && styles.dropZone, isDropTarget && styles.dropZoneActive),
+                                style: {
+                                    ...getPinningStyles(header.column),
+                                    ...enableColumnResizing ? {} : {
+                                        width: columnWidths[columnKey] || "200px"
+                                    }
+                                },
+                                "data-pinned": isPinned || undefined,
+                                "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : undefined,
+                                onClick: (e)=>{
+                                    const target = e.currentTarget;
+                                    if (target.closest("[data-resize-handle]") || target.closest("[data-drag-zone]")) {
+                                        return;
+                                    }
+                                    if (isSortable && showSorting && onSort) {
+                                        onSort(String(columnKey));
+                                    }
+                                },
+                                onDragOver: (e)=>{
+                                    if (!isDraggable || !draggedColumn || draggedColumn === columnKey) return;
+                                    e.preventDefault();
+                                    setDropTarget(columnKey);
+                                },
+                                onDragLeave: (e)=>{
+                                    const rect = e.currentTarget.getBoundingClientRect();
+                                    const x = e.clientX;
+                                    const y = e.clientY;
+                                    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+                                        setDropTarget(null);
+                                    }
+                                },
+                                onDrop: (e)=>{
+                                    e.preventDefault();
+                                    if (!isDraggable || !draggedColumn || !onColumnOrderChange) return;
+                                    const currentOrder = table.getAllLeafColumns().map((col)=>col.id);
+                                    const draggedIndex = currentOrder.indexOf(draggedColumn);
+                                    const targetIndex = currentOrder.indexOf(columnKey);
+                                    if (draggedIndex !== -1 && targetIndex !== -1) {
+                                        const newOrder = [
+                                            ...currentOrder
+                                        ];
+                                        newOrder.splice(draggedIndex, 1);
+                                        newOrder.splice(targetIndex, 0, draggedColumn);
+                                        onColumnOrderChange(newOrder);
+                                    }
+                                    setDraggedColumn(null);
+                                    setDropTarget(null);
+                                },
+                                children: [
+                                    isDraggable && /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        "data-drag-zone": true,
+                                        draggable: true,
+                                        className: styles.dragZone,
+                                        onDragStart: (e)=>{
+                                            setDraggedColumn(columnKey);
+                                            e.dataTransfer.effectAllowed = "move";
+                                        },
+                                        onDragEnd: ()=>{
+                                            setDraggedColumn(null);
+                                            setDropTarget(null);
+                                        },
+                                        children: /*#__PURE__*/ _jsx(GripVertical, {
+                                            className: "w-4 h-4"
+                                        })
+                                    }),
+                                    flexRender(header.column.columnDef.header, header.getContext()),
+                                    enableColumnResizing && header.column.getCanResize() && /*#__PURE__*/ _jsx("div", {
+                                        "data-resize-handle": true,
+                                        onMouseDown: header.getResizeHandler(),
+                                        onTouchStart: header.getResizeHandler(),
+                                        onClick: (e)=>e.stopPropagation(),
+                                        className: cn(styles.resizeHandle, header.column.getIsResizing() && styles.resizeHandleActive)
+                                    })
+                                ]
+                            }, `header-${columnKey}`);
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(TableBody, {
+                    children: [
+                        showFilters && /*#__PURE__*/ _jsx(FilterRow, {
+                            headers: table.getHeaderGroups()[0]?.headers || [],
+                            draggedColumn: draggedColumn,
+                            dropTarget: dropTarget
+                        }),
+                        table.getRowModel().rows.map((row, rowIndex)=>/*#__PURE__*/ _jsx(TableRow, {
+                                className: cn(styles.dataRow, showZebraStripes && rowIndex % 2 === (showFilters ? 0 : 1) && styles.dataRowZebra),
+                                children: row.getVisibleCells().map((cell)=>{
+                                    const columnKey = cell.column.id;
+                                    const isPinned = cell.column.getIsPinned();
+                                    const isSorted = sortConfig?.key === columnKey;
+                                    const isBeingDragged = draggedColumn === columnKey;
+                                    const isDropTarget = dropTarget === columnKey;
+                                    const isLastLeftPinned = isPinned === "left" && cell.column.getIsLastColumn("left");
+                                    const isFirstRightPinned = isPinned === "right" && cell.column.getIsFirstColumn("right");
+                                    return /*#__PURE__*/ _jsx(TableCell, {
+                                        className: cn(styles.cellPadding, styles.dataCell, styles.pinnedColumn, isSorted && styles.cellSorted, isBeingDragged && styles.draggingColumn, isDropTarget && styles.dropZone, isDropTarget && styles.dropZoneActive),
+                                        style: {
+                                            ...getPinningStyles(cell.column),
+                                            ...enableColumnResizing ? {} : {
+                                                width: columnWidths[columnKey] || "200px"
+                                            }
+                                        },
+                                        "data-pinned": isPinned || undefined,
+                                        "data-last-col": isLastLeftPinned ? "left" : isFirstRightPinned ? "right" : undefined,
+                                        children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                    }, cell.id);
+                                })
+                            }, `row-${row.id}`))
+                    ]
+                })
+            ]
+        })
+    });
+}
+const columnHelper = createColumnHelper();
+const columns = [
+    columnHelper.accessor("firstName", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "First name"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue()
+            })
+    }),
+    columnHelper.accessor("lastName", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "Last name"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue()
+            })
+    }),
+    columnHelper.accessor("id", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "ID"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue(),
+                type: "code"
+            })
+    }),
+    columnHelper.accessor("birthDate", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "Birth"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue(),
+                type: "code"
+            })
+    }),
+    columnHelper.accessor("phoneNumber", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "Phone number"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue()
+            })
+    }),
+    columnHelper.accessor("email", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "Email"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue()
+            })
+    }),
+    columnHelper.accessor("gender", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "Gender"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue()
+            })
+    }),
+    columnHelper.accessor("street", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "Street"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue()
+            })
+    }),
+    columnHelper.accessor("city", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "City"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue()
+            })
+    }),
+    columnHelper.accessor("state", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "State"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue()
+            })
+    }),
+    columnHelper.accessor("zip", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "ZIP"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue()
+            })
+    }),
+    columnHelper.accessor("country", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "Country"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue()
+            })
+    }),
+    columnHelper.accessor("encounters", {
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "Encounters"
+            }),
+        cell: (props)=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: props.getValue()
+            })
+    }),
+    columnHelper.display({
+        id: "actions",
+        header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                content: "Actions"
+            }),
+        cell: ({ row })=>/*#__PURE__*/ _jsx(TableCellContent, {
+                content: /*#__PURE__*/ _jsx("button", {
+                    type: "button",
+                    className: styles.actionButton,
+                    onClick: (e)=>{
+                        e.stopPropagation();
+                        console.log("Match clicked for:", row.original.id);
+                    },
+                    children: "Match"
+                })
+            }),
+        meta: {
+            fixed: "right"
+        }
+    })
+];
+export function PatientTable(props) {
+    const { showFilters = true, showSorting = true, enableColumnResizing = false, enableColumnReordering = false, enableColumnPinning = false, showPinningMenu = true, columnWidths = {}, columnConfigs } = props;
+    const [sortConfig, setSortConfig] = useState(null);
+    const [columnOrder, setColumnOrder] = useState([]);
+    const [columnPinning, setColumnPinning] = useState({});
+    useEffect(()=>{
+        if (!enableColumnPinning || !columnConfigs) return;
+        const fixedColumns = columnConfigs.filter((config)=>config.fixed);
+        if (fixedColumns.length > 0) {
+            const initialPinning = {
+                right: fixedColumns.map((config)=>config.key)
+            };
+            setColumnPinning(initialPinning);
+        }
+    }, [
+        enableColumnPinning,
+        columnConfigs
+    ]);
+    const handleSort = (columnKey)=>{
+        setSortConfig((current)=>{
+            if (current?.key === columnKey) {
+                return current.direction === "asc" ? {
+                    key: columnKey,
+                    direction: "desc"
+                } : null;
+            }
+            return {
+                key: columnKey,
+                direction: "asc"
+            };
+        });
+    };
+    const data = [
+        {
+            id: "PAT-000001",
+            firstName: "John",
+            lastName: "Smith",
+            phoneNumber: "(555) 123-4567",
+            email: "john.smith@gmail.com",
+            birthDate: "1985-03-15",
+            gender: "MALE",
+            street: "123 Main St",
+            city: "New York",
+            state: "NY",
+            zip: "10001",
+            encounters: 5
+        },
+        {
+            id: "PAT-000002",
+            firstName: "Jane",
+            lastName: "Johnson",
+            phoneNumber: "(555) 234-5678",
+            email: "jane.johnson@yahoo.com",
+            birthDate: "1990-07-22",
+            gender: "FEMALE",
+            street: "456 Oak Ave",
+            city: "Los Angeles",
+            state: "CA",
+            zip: "90210",
+            encounters: 12
+        },
+        {
+            id: "PAT-000003",
+            firstName: "Michael",
+            lastName: "Williams",
+            phoneNumber: "(555) 345-6789",
+            email: "michael.williams@hotmail.com",
+            birthDate: "1978-11-08",
+            gender: "MALE",
+            street: "789 Pine St",
+            city: "Chicago",
+            state: "IL",
+            zip: "60601",
+            encounters: 8
+        },
+        {
+            id: "PAT-000004",
+            firstName: "Sarah",
+            lastName: "Brown",
+            phoneNumber: "(555) 456-7890",
+            email: "sarah.brown@outlook.com",
+            birthDate: "1992-01-30",
+            gender: "FEMALE",
+            street: "321 Elm Ave",
+            city: "Houston",
+            state: "TX",
+            zip: "77001",
+            encounters: 3
+        },
+        {
+            id: "PAT-000005",
+            firstName: "David",
+            lastName: "Garcia",
+            phoneNumber: "(555) 567-8901",
+            email: "david.garcia@gmail.com",
+            birthDate: "1980-09-12",
+            gender: "MALE",
+            street: "654 Cedar St",
+            city: "Phoenix",
+            state: "AZ",
+            zip: "85001",
+            encounters: 15
+        },
+        {
+            id: "PAT-000006",
+            firstName: "Emily",
+            lastName: "Martinez",
+            phoneNumber: "(555) 678-9012",
+            email: "emily.martinez@icloud.com",
+            birthDate: "1995-05-18",
+            gender: "FEMALE",
+            street: "987 Washington St",
+            city: "Philadelphia",
+            state: "PA",
+            zip: "19101",
+            encounters: 7
+        },
+        {
+            id: "PAT-000007",
+            firstName: "Robert",
+            lastName: "Davis",
+            phoneNumber: "(555) 789-0123",
+            email: "robert.davis@aol.com",
+            birthDate: "1973-12-03",
+            gender: "MALE",
+            street: "147 Park Ave",
+            city: "San Antonio",
+            state: "TX",
+            zip: "78201",
+            encounters: 22
+        },
+        {
+            id: "PAT-000008",
+            firstName: "Jessica",
+            lastName: "Rodriguez",
+            phoneNumber: "(555) 890-1234",
+            email: "jessica.rodriguez@protonmail.com",
+            birthDate: "1988-04-25",
+            gender: "FEMALE",
+            street: "258 Lincoln St",
+            city: "San Diego",
+            state: "CA",
+            zip: "92101",
+            encounters: 9
+        },
+        {
+            id: "PAT-000009",
+            firstName: "William",
+            lastName: "Wilson",
+            phoneNumber: "(555) 901-2345",
+            email: "william.wilson@gmail.com",
+            birthDate: "1965-08-14",
+            gender: "MALE",
+            street: "369 Jefferson Ave",
+            city: "Dallas",
+            state: "TX",
+            zip: "75201",
+            encounters: 18
+        },
+        {
+            id: "PAT-000010",
+            firstName: "Ashley",
+            lastName: "Anderson",
+            phoneNumber: "(555) 012-3456",
+            email: "ashley.anderson@yahoo.com",
+            birthDate: "1993-10-07",
+            gender: "FEMALE",
+            street: "741 Madison St",
+            city: "San Jose",
+            state: "CA",
+            zip: "95101",
+            encounters: 4
+        },
+        {
+            id: "PAT-000011",
+            firstName: "Alex",
+            lastName: "Taylor",
+            phoneNumber: "(555) 111-2222",
+            email: "alex.taylor@outlook.com",
+            birthDate: "1987-06-19",
+            gender: "OTHER",
+            street: "852 Adams Ave",
+            city: "Austin",
+            state: "TX",
+            zip: "73301",
+            encounters: 11
+        }
+    ];
+    const sortedData = useMemo(()=>{
+        if (!sortConfig) return data;
+        return [
+            ...data
+        ].sort((a, b)=>{
+            const aValue = a[sortConfig.key] ?? "";
+            const bValue = b[sortConfig.key] ?? "";
+            if (aValue < bValue) return sortConfig.direction === "asc" ? -1 : 1;
+            if (aValue > bValue) return sortConfig.direction === "asc" ? 1 : -1;
+            return 0;
+        });
+    }, [
+        sortConfig
+    ]);
+    const generatedColumnWidths = useMemo(()=>{
+        if (!columnConfigs) {
+            return columnWidths;
+        }
+        const configWidths = {};
+        columnConfigs.forEach((config)=>{
+            if (config.width) {
+                configWidths[config.key] = config.width;
+            }
+        });
+        return {
+            ...columnWidths,
+            ...configWidths
+        };
+    }, [
+        columnConfigs,
+        columnWidths
+    ]);
+    const generatedColumns = useMemo(()=>{
+        if (!columnConfigs) {
+            return columns;
+        }
+        return columnConfigs.map((config)=>{
+            const columnSize = config.width ? parseInt(config.width.replace("px", ""), 10) : undefined;
+            if (config.type === "link" || config.type === "button") {
+                return {
+                    id: config.key,
+                    accessorFn: ()=>null,
+                    header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                            content: config.label
+                        }),
+                    cell: ({ row })=>/*#__PURE__*/ _jsx(TableCellContent, {
+                            content: "",
+                            ...config.type && {
+                                type: config.type
+                            },
+                            ...config.rightAlign !== undefined && {
+                                rightAlign: config.rightAlign
+                            },
+                            actions: config.actions || [],
+                            rowId: row.original.id
+                        }),
+                    ...config.fixed && {
+                        meta: {
+                            fixed: "right"
+                        }
+                    },
+                    ...columnSize && {
+                        size: columnSize
+                    }
+                };
+            }
+            return {
+                accessorKey: config.key,
+                header: ()=>/*#__PURE__*/ _jsx(TableHeaderContent, {
+                        content: config.label
+                    }),
+                cell: ({ cell })=>/*#__PURE__*/ _jsx(TableCellContent, {
+                        content: cell.getValue(),
+                        type: config.type || "text",
+                        ...config.rightAlign !== undefined && {
+                            rightAlign: config.rightAlign
+                        }
+                    }),
+                ...config.fixed && {
+                    meta: {
+                        fixed: "right"
+                    }
+                },
+                ...columnSize && {
+                    size: columnSize
+                }
+            };
+        });
+    }, [
+        columnConfigs
+    ]);
+    const columnsWithSorting = generatedColumns.map((column)=>({
+            ...column,
+            header: ()=>{
+                const columnKey = column.id || column.accessorKey;
+                const isSortable = columnKey !== "actions";
+                const isPinnedLeft = columnPinning.left?.includes(columnKey);
+                const isPinnedRight = columnPinning.right?.includes(columnKey);
+                const pinnedDirection = isPinnedLeft ? "left" : isPinnedRight ? "right" : false;
+                const handlePin = (direction)=>{
+                    const newPinning = {
+                        ...columnPinning
+                    };
+                    if (newPinning.left) {
+                        newPinning.left = newPinning.left.filter((id)=>id !== columnKey);
+                    }
+                    if (newPinning.right) {
+                        newPinning.right = newPinning.right.filter((id)=>id !== columnKey);
+                    }
+                    if (direction === "left") {
+                        newPinning.left = [
+                            ...newPinning.left || [],
+                            columnKey
+                        ];
+                    } else if (direction === "right") {
+                        newPinning.right = [
+                            ...newPinning.right || [],
+                            columnKey
+                        ];
+                    }
+                    setColumnPinning(newPinning);
+                };
+                return /*#__PURE__*/ _jsx(TableHeaderContent, {
+                    content: typeof column.header === "function" ? column.header({}) : column.header,
+                    isSortable: isSortable && showSorting,
+                    sortDirection: sortConfig?.key === columnKey && sortConfig ? sortConfig.direction : null,
+                    isPinnable: enableColumnPinning && showPinningMenu,
+                    pinnedDirection: pinnedDirection,
+                    onPin: handlePin
+                });
+            }
+        }));
+    return /*#__PURE__*/ _jsx(DataTable, {
+        columns: columnsWithSorting,
+        data: sortedData,
+        showZebraStripes: true,
+        showFilters: showFilters,
+        showSorting: showSorting,
+        enableColumnResizing: enableColumnResizing,
+        enableColumnReordering: enableColumnReordering,
+        enableColumnPinning: enableColumnPinning,
+        onSort: handleSort,
+        columnWidths: generatedColumnWidths,
+        sortConfig: sortConfig,
+        columnOrder: columnOrder,
+        onColumnOrderChange: setColumnOrder,
+        columnPinning: columnPinning,
+        onColumnPinningChange: setColumnPinning,
+        ...columnConfigs && {
+            columnConfigs
+        }
+    });
+}
+
+//# sourceMappingURL=patient-table.js.map