@nccirtu/tablefy 0.6.1 → 0.6.2

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.
Files changed (10) hide show
  1. package/README.md +7 -2
  2. package/dist/columns/index.esm.js +1 -5
  3. package/dist/columns/index.esm.js.map +1 -1
  4. package/dist/columns/index.js +28 -32
  5. package/dist/columns/index.js.map +1 -1
  6. package/dist/index.esm.js +1 -5
  7. package/dist/index.esm.js.map +1 -1
  8. package/dist/index.js +35 -39
  9. package/dist/index.js.map +1 -1
  10. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
4
4
  var react = require('react');
5
5
  var reactTable = require('@tanstack/react-table');
6
6
  var table = require('@/components/ui/table');
7
- var clsx = require('clsx');
7
+ var utils = require('@/lib/utils');
8
8
  var button = require('@/components/ui/button');
9
9
  var input = require('@/components/ui/input');
10
10
  var dropdownMenu = require('@/components/ui/dropdown-menu');
@@ -15,10 +15,6 @@ var checkbox = require('@/components/ui/checkbox');
15
15
  var tooltip = require('@/components/ui/tooltip');
16
16
  var progress = require('@/components/ui/progress');
17
17
 
18
- function cn(...inputs) {
19
- return clsx(inputs.filter(Boolean));
20
- }
21
-
22
18
  function DataTableHeader({ title, description, actions = [], search, searchValue = "", onSearchChange, table, selectedCount = 0, className, }) {
23
19
  const normalActions = actions.filter((a) => !a.bulk && !a.hidden);
24
20
  const bulkActions = actions.filter((a) => a.bulk && !a.hidden);
@@ -30,11 +26,11 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
30
26
  };
31
27
  const renderAction = (action, index) => {
32
28
  if (action.children && action.children.length > 0) {
33
- return (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { variant: action.variant || "outline", size: action.size || "default", disabled: action.disabled || action.loading, children: [action.icon, jsxRuntime.jsx("span", { className: cn(action.icon ? "ml-2" : ""), children: action.label }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-2 h-4 w-4" })] }) }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "end", children: action.children.map((child, childIndex) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: child.onClick, className: cn(child.variant === "destructive" &&
29
+ return (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { variant: action.variant || "outline", size: action.size || "default", disabled: action.disabled || action.loading, children: [action.icon, jsxRuntime.jsx("span", { className: utils.cn(action.icon ? "ml-2" : ""), children: action.label }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "ml-2 h-4 w-4" })] }) }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "end", children: action.children.map((child, childIndex) => (jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: child.onClick, className: utils.cn(child.variant === "destructive" &&
34
30
  "text-destructive focus:text-destructive"), children: [child.icon && jsxRuntime.jsx("span", { className: "mr-2", children: child.icon }), child.label] }, child.id || childIndex))) })] }, action.id || index));
35
31
  }
36
32
  if (action.href) {
37
- return (jsxRuntime.jsx(button.Button, { variant: action.variant || "outline", size: action.size || "default", disabled: action.disabled || action.loading, asChild: true, children: jsxRuntime.jsxs("a", { href: action.href, children: [action.icon, action.size !== "icon" && (jsxRuntime.jsx("span", { className: cn(action.icon ? "ml-2" : ""), children: action.label }))] }) }, action.id || index));
33
+ return (jsxRuntime.jsx(button.Button, { variant: action.variant || "outline", size: action.size || "default", disabled: action.disabled || action.loading, asChild: true, children: jsxRuntime.jsxs("a", { href: action.href, children: [action.icon, action.size !== "icon" && (jsxRuntime.jsx("span", { className: utils.cn(action.icon ? "ml-2" : ""), children: action.label }))] }) }, action.id || index));
38
34
  }
39
35
  return (jsxRuntime.jsxs(button.Button, { variant: action.variant || "outline", size: action.size || "default", disabled: action.disabled || action.loading, onClick: () => {
40
36
  if (action.bulk && action.bulkOnClick) {
@@ -43,7 +39,7 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
43
39
  else if (action.onClick) {
44
40
  action.onClick();
45
41
  }
46
- }, children: [action.loading ? (jsxRuntime.jsxs("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] })) : (action.icon), action.size !== "icon" && (jsxRuntime.jsx("span", { className: cn(action.icon || action.loading ? "ml-2" : ""), children: action.label }))] }, action.id || index));
42
+ }, children: [action.loading ? (jsxRuntime.jsxs("svg", { className: "animate-spin h-4 w-4", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] })) : (action.icon), action.size !== "icon" && (jsxRuntime.jsx("span", { className: utils.cn(action.icon || action.loading ? "ml-2" : ""), children: action.label }))] }, action.id || index));
47
43
  };
48
44
  if (!title &&
49
45
  !description &&
@@ -52,21 +48,21 @@ function DataTableHeader({ title, description, actions = [], search, searchValue
52
48
  !search?.enabled) {
53
49
  return null;
54
50
  }
55
- return (jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4", className), children: [(title || description) && (jsxRuntime.jsxs("div", { className: "space-y-1", children: [title && (jsxRuntime.jsx("h2", { className: "text-xl font-semibold tracking-tight", children: title })), description && (jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description }))] })), (search?.enabled || normalActions.length > 0 || showBulkActions) && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [search?.enabled && (jsxRuntime.jsxs("div", { className: "relative max-w-sm flex-1", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), jsxRuntime.jsx(input.Input, { placeholder: search.placeholder || "Suchen...", value: searchValue, onChange: (e) => onSearchChange?.(e.target.value), className: "pl-9 pr-9" }), searchValue && (jsxRuntime.jsx("button", { onClick: () => onSearchChange?.(""), className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] })), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [showBulkActions && (jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [selectedCount, " ausgew\u00E4hlt"] })), showBulkActions &&
51
+ return (jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col gap-4", className), children: [(title || description) && (jsxRuntime.jsxs("div", { className: "space-y-1", children: [title && (jsxRuntime.jsx("h2", { className: "text-xl font-semibold tracking-tight", children: title })), description && (jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: description }))] })), (search?.enabled || normalActions.length > 0 || showBulkActions) && (jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-4 mb-4", children: [search?.enabled && (jsxRuntime.jsxs("div", { className: "relative max-w-sm flex-1", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), jsxRuntime.jsx(input.Input, { placeholder: search.placeholder || "Suchen...", value: searchValue, onChange: (e) => onSearchChange?.(e.target.value), className: "pl-9 pr-9" }), searchValue && (jsxRuntime.jsx("button", { onClick: () => onSearchChange?.(""), className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }) }))] })), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [showBulkActions && (jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground", children: [selectedCount, " ausgew\u00E4hlt"] })), showBulkActions &&
56
52
  bulkActions.map((action, index) => renderAction(action, index)), normalActions.length > 0 &&
57
53
  normalActions.map((action, index) => renderAction(action, index))] })] }))] }));
58
54
  }
59
55
 
60
56
  function DataTableEmpty({ config, colSpan, className, }) {
61
57
  const { icon, imageUrl, title, description, action, variant } = config;
62
- return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: colSpan, className: cn("h-[400px]", className), children: jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-4 text-center p-8", children: [imageUrl ? (jsxRuntime.jsx("img", { className: "w-24 h-24", src: imageUrl, alt: "Empty State" })) : icon ? (jsxRuntime.jsx("div", { className: cn("rounded-full p-4", variant === "error" ? "bg-destructive/10" : "bg-muted"), children: icon })) : null, jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center gap-2", children: [jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-foreground whitespace-normal break-words", children: title }), description && (jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground font-normal whitespace-normal break-words leading-relaxed", children: description }))] }), action && (jsxRuntime.jsx(button.Button, { variant: variant === "error" ? "outline" : "default", onClick: action.onClick, asChild: !!action.href, className: "mt-2", children: action.href ? (jsxRuntime.jsxs("a", { href: action.href, children: [action.icon, jsxRuntime.jsx("span", { className: cn(action.icon ? "ml-2" : ""), children: action.label })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [action.icon, jsxRuntime.jsx("span", { className: cn(action.icon ? "ml-2" : ""), children: action.label })] })) }))] }) }) }));
58
+ return (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: colSpan, className: utils.cn("h-[400px]", className), children: jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-4 text-center p-8", children: [imageUrl ? (jsxRuntime.jsx("img", { className: "w-24 h-24", src: imageUrl, alt: "Empty State" })) : icon ? (jsxRuntime.jsx("div", { className: utils.cn("rounded-full p-4", variant === "error" ? "bg-destructive/10" : "bg-muted"), children: icon })) : null, jsxRuntime.jsxs("div", { className: "w-full flex flex-col items-center justify-center gap-2", children: [jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-foreground whitespace-normal break-words", children: title }), description && (jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground font-normal whitespace-normal break-words leading-relaxed", children: description }))] }), action && (jsxRuntime.jsx(button.Button, { variant: variant === "error" ? "outline" : "default", onClick: action.onClick, asChild: !!action.href, className: "mt-2", children: action.href ? (jsxRuntime.jsxs("a", { href: action.href, children: [action.icon, jsxRuntime.jsx("span", { className: utils.cn(action.icon ? "ml-2" : ""), children: action.label })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [action.icon, jsxRuntime.jsx("span", { className: utils.cn(action.icon ? "ml-2" : ""), children: action.label })] })) }))] }) }) }));
63
59
  }
64
60
 
65
61
  function DataTablePagination({ table, config, className, }) {
66
62
  if (!config?.enabled)
67
63
  return null;
68
64
  const { showPageInfo = true, showPageSizeSelector = true, pageSizeOptions = [10, 20, 30, 50, 100], } = config;
69
- return (jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between", className), children: [jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: table.getFilteredSelectedRowModel().rows.length > 0 ? (jsxRuntime.jsxs("span", { children: [table.getFilteredSelectedRowModel().rows.length, " von", " ", table.getFilteredRowModel().rows.length, " Zeile(n) ausgew\u00E4hlt"] })) : showPageInfo ? (jsxRuntime.jsxs("span", { children: [table.getFilteredRowModel().rows.length, " Eintr\u00E4ge"] })) : null }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-6", children: [showPageSizeSelector && (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Zeilen pro Seite" }), jsxRuntime.jsxs(select.Select, { value: `${table.getState().pagination.pageSize}`, onValueChange: (value) => table.setPageSize(Number(value)), children: [jsxRuntime.jsx(select.SelectTrigger, { className: "h-8 w-[70px]", children: jsxRuntime.jsx(select.SelectValue, { placeholder: table.getState().pagination.pageSize }) }), jsxRuntime.jsx(select.SelectContent, { side: "top", children: pageSizeOptions.map((pageSize) => (jsxRuntime.jsx(select.SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize))) })] })] })), showPageInfo && (jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground whitespace-nowrap", children: ["Seite", " ", table.getPageCount() > 0
65
+ return (jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between", className), children: [jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: table.getFilteredSelectedRowModel().rows.length > 0 ? (jsxRuntime.jsxs("span", { children: [table.getFilteredSelectedRowModel().rows.length, " von", " ", table.getFilteredRowModel().rows.length, " Zeile(n) ausgew\u00E4hlt"] })) : showPageInfo ? (jsxRuntime.jsxs("span", { children: [table.getFilteredRowModel().rows.length, " Eintr\u00E4ge"] })) : null }), jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-6", children: [showPageSizeSelector && (jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground whitespace-nowrap", children: "Zeilen pro Seite" }), jsxRuntime.jsxs(select.Select, { value: `${table.getState().pagination.pageSize}`, onValueChange: (value) => table.setPageSize(Number(value)), children: [jsxRuntime.jsx(select.SelectTrigger, { className: "h-8 w-[70px]", children: jsxRuntime.jsx(select.SelectValue, { placeholder: table.getState().pagination.pageSize }) }), jsxRuntime.jsx(select.SelectContent, { side: "top", children: pageSizeOptions.map((pageSize) => (jsxRuntime.jsx(select.SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize))) })] })] })), showPageInfo && (jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground whitespace-nowrap", children: ["Seite", " ", table.getPageCount() > 0
70
66
  ? table.getState().pagination.pageIndex + 1
71
67
  : 0, " ", "von ", Math.max(table.getPageCount(), 0)] })), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: [jsxRuntime.jsx(lucideReact.ChevronsLeft, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "Erste Seite" })] }), jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "Vorherige Seite" })] }), jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "N\u00E4chste Seite" })] }), jsxRuntime.jsxs(button.Button, { variant: "outline", size: "icon", className: "h-8 w-8", onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), children: [jsxRuntime.jsx(lucideReact.ChevronsRight, { className: "h-4 w-4" }), jsxRuntime.jsx("span", { className: "sr-only", children: "Letzte Seite" })] })] })] })] }));
72
68
  }
@@ -427,7 +423,7 @@ function DataTable({ columns, data, config = {}, className, isLoading = false, i
427
423
  };
428
424
  const selectedCount = table$1.getFilteredSelectedRowModel().rows.length;
429
425
  const hasRows = table$1.getRowModel().rows?.length > 0;
430
- return (jsxRuntime.jsxs("div", { className: cn("flex flex-col", className), children: [jsxRuntime.jsx(DataTableHeader, { title: config.title, description: config.description, actions: config.headerActions, search: config.search, searchValue: globalFilter, onSearchChange: setGlobalFilter, table: table$1, selectedCount: selectedCount }), jsxRuntime.jsx("div", { className: cn("overflow-hidden", config.bordered !== false && "rounded-md border"), children: jsxRuntime.jsxs(table.Table, { className: cn(densityClasses[config.density || "default"], config.striped ? "[&_tr:nth-child(even)]:bg-muted/50" : "", config.hoverable !== false && "[&_tr:hover]:bg-muted/50"), children: [jsxRuntime.jsx(table.TableHeader, { children: table$1.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(table.TableRow, { children: headerGroup.headers.map((header) => (jsxRuntime.jsx(table.TableHead, { children: header.isPlaceholder
426
+ return (jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col", className), children: [jsxRuntime.jsx(DataTableHeader, { title: config.title, description: config.description, actions: config.headerActions, search: config.search, searchValue: globalFilter, onSearchChange: setGlobalFilter, table: table$1, selectedCount: selectedCount }), jsxRuntime.jsx("div", { className: utils.cn("overflow-hidden", config.bordered !== false && "rounded-md border"), children: jsxRuntime.jsxs(table.Table, { className: utils.cn(densityClasses[config.density || "default"], config.striped ? "[&_tr:nth-child(even)]:bg-muted/50" : "", config.hoverable !== false && "[&_tr:hover]:bg-muted/50"), children: [jsxRuntime.jsx(table.TableHeader, { children: table$1.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(table.TableRow, { children: headerGroup.headers.map((header) => (jsxRuntime.jsx(table.TableHead, { children: header.isPlaceholder
431
427
  ? null
432
428
  : reactTable.flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), jsxRuntime.jsx(table.TableBody, { children: isLoading ? (jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: columns.length, className: "h-[400px]", children: jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [jsxRuntime.jsxs("svg", { className: "animate-spin h-8 w-8 text-muted-foreground", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", fill: "none" }), jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] }), jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "Laden..." })] }) }) }) })) : hasRows ? (table$1.getRowModel().rows.map((row) => (jsxRuntime.jsx(table.TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => (jsxRuntime.jsx(table.TableCell, { children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (jsxRuntime.jsx(DataTableEmpty, { config: getEmptyState(), colSpan: columns.length })) })] }) }), config.pagination?.enabled && hasRows && (jsxRuntime.jsx(DataTablePagination, { table: table$1, config: config.pagination }))] }));
433
429
  }
@@ -584,7 +580,7 @@ class AvatarGroupColumn extends BaseColumn {
584
580
  const { accessor, label, maxVisible, size, overlap, showTooltip, nameField, srcField, fallbackField, showNames, maxNames, } = config;
585
581
  return {
586
582
  accessorKey: accessor,
587
- header: () => (jsxRuntime.jsx("span", { className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: label || String(accessor) })),
583
+ header: () => (jsxRuntime.jsx("span", { className: utils.cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: label || String(accessor) })),
588
584
  cell: ({ getValue, row }) => {
589
585
  const rawValue = getValue();
590
586
  // Items aus den Daten extrahieren
@@ -617,7 +613,7 @@ class AvatarGroupColumn extends BaseColumn {
617
613
  }
618
614
  // Konvertiere zu Datenstruktur für AvatarList
619
615
  const contacts = this.toContactItems(items);
620
- return (jsxRuntime.jsx("div", { className: cn("flex items-center", this.config.cellClassName), children: jsxRuntime.jsx(AvatarList, { items: contacts.map((contact) => ({
616
+ return (jsxRuntime.jsx("div", { className: utils.cn("flex items-center", this.config.cellClassName), children: jsxRuntime.jsx(AvatarList, { items: contacts.map((contact) => ({
621
617
  id: contact.id,
622
618
  src: contact.src,
623
619
  alt: contact.alt,
@@ -665,9 +661,9 @@ class BadgeColumn extends BaseColumn {
665
661
  header: ({ column }) => {
666
662
  const displayLabel = label || String(accessor);
667
663
  if (!sortable) {
668
- return (jsxRuntime.jsx("span", { className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
664
+ return (jsxRuntime.jsx("span", { className: utils.cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
669
665
  }
670
- return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
666
+ return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === "asc"), className: utils.cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
671
667
  },
672
668
  cell: ({ getValue }) => {
673
669
  const value = String(getValue());
@@ -680,7 +676,7 @@ class BadgeColumn extends BaseColumn {
680
676
  variantConfig.variant === "info" ||
681
677
  variantConfig.variant === "muted"
682
678
  ? "default"
683
- : variantConfig.variant || "default", className: cn(variantConfig.className, this.config.cellClassName), children: [variantConfig.icon, variantConfig.label || value] }));
679
+ : variantConfig.variant || "default", className: utils.cn(variantConfig.className, this.config.cellClassName), children: [variantConfig.icon, variantConfig.label || value] }));
684
680
  },
685
681
  };
686
682
  }
@@ -792,9 +788,9 @@ class DateColumn extends BaseColumn {
792
788
  header: ({ column }) => {
793
789
  const displayLabel = label || String(accessor);
794
790
  if (!sortable) {
795
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
791
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
796
792
  }
797
- return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
793
+ return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
798
794
  },
799
795
  cell: ({ getValue }) => {
800
796
  const value = getValue();
@@ -806,7 +802,7 @@ class DateColumn extends BaseColumn {
806
802
  return jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Ung\u00FCltiges Datum" });
807
803
  }
808
804
  const formatted = this.formatDate(date, format || 'short', locale || 'de-DE');
809
- return (jsxRuntime.jsxs("span", { className: cn('flex items-center gap-2', this.getAlignmentClass(), this.config.cellClassName), children: [showIcon && jsxRuntime.jsx(lucideReact.Calendar, { className: "text-muted-foreground h-4 w-4" }), formatted] }));
805
+ return (jsxRuntime.jsxs("span", { className: utils.cn('flex items-center gap-2', this.getAlignmentClass(), this.config.cellClassName), children: [showIcon && jsxRuntime.jsx(lucideReact.Calendar, { className: "text-muted-foreground h-4 w-4" }), formatted] }));
810
806
  },
811
807
  };
812
808
  }
@@ -1046,9 +1042,9 @@ class IconColumn extends BaseColumn {
1046
1042
  header: ({ column }) => {
1047
1043
  const displayLabel = label || String(accessor);
1048
1044
  if (!sortable) {
1049
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1045
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1050
1046
  }
1051
- return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1047
+ return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1052
1048
  },
1053
1049
  cell: ({ getValue }) => {
1054
1050
  const value = String(getValue());
@@ -1065,7 +1061,7 @@ class IconColumn extends BaseColumn {
1065
1061
  // Icon als Element rendern (falls LucideIcon übergeben wurde)
1066
1062
  const IconElement = typeof icon === 'function' ? icon : null;
1067
1063
  const renderedIcon = IconElement ? jsxRuntime.jsx(IconElement, { className: "h-full w-full" }) : icon;
1068
- const iconElement = (jsxRuntime.jsxs("div", { className: cn('flex items-center gap-2', this.getAlignmentClass(), this.config.cellClassName), children: [withBackground ? (jsxRuntime.jsx("div", { className: cn('inline-flex items-center justify-center rounded-md', bgSizeClasses[size || 'md'], bgColor || 'bg-blue-50'), children: jsxRuntime.jsx("div", { className: cn(iconInBgSizeClasses[size || 'md'], color), children: renderedIcon }) })) : (jsxRuntime.jsx("div", { className: cn(sizeClasses[size || 'md'], color), children: renderedIcon })), showLabel && jsxRuntime.jsx("span", { className: cn('text-sm', color), children: stateLabel })] }));
1064
+ const iconElement = (jsxRuntime.jsxs("div", { className: utils.cn('flex items-center gap-2', this.getAlignmentClass(), this.config.cellClassName), children: [withBackground ? (jsxRuntime.jsx("div", { className: utils.cn('inline-flex items-center justify-center rounded-md', bgSizeClasses[size || 'md'], bgColor || 'bg-blue-50'), children: jsxRuntime.jsx("div", { className: utils.cn(iconInBgSizeClasses[size || 'md'], color), children: renderedIcon }) })) : (jsxRuntime.jsx("div", { className: utils.cn(sizeClasses[size || 'md'], color), children: renderedIcon })), showLabel && jsxRuntime.jsx("span", { className: utils.cn('text-sm', color), children: stateLabel })] }));
1069
1065
  if (showTooltip) {
1070
1066
  return (jsxRuntime.jsx(tooltip.TooltipProvider, { children: jsxRuntime.jsxs(tooltip.Tooltip, { children: [jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: iconElement }), jsxRuntime.jsx(tooltip.TooltipContent, { children: jsxRuntime.jsx("p", { children: tooltip$1 }) })] }) }));
1071
1067
  }
@@ -1123,11 +1119,11 @@ class ImageColumn extends BaseColumn {
1123
1119
  };
1124
1120
  return {
1125
1121
  accessorKey: accessor,
1126
- header: () => jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.config.headerClassName), children: label || '' }),
1122
+ header: () => jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.config.headerClassName), children: label || '' }),
1127
1123
  cell: ({ getValue, row }) => {
1128
1124
  const src = getValue();
1129
1125
  const altText = alt ? alt(row.original) : 'Bild';
1130
- return (jsxRuntime.jsx("img", { src: src || fallback || '/placeholder.png', alt: altText, className: cn('object-cover', sizeClasses[size || 'md'], roundedClasses[rounded || 'md'], this.config.cellClassName), onError: (e) => {
1126
+ return (jsxRuntime.jsx("img", { src: src || fallback || '/placeholder.png', alt: altText, className: utils.cn('object-cover', sizeClasses[size || 'md'], roundedClasses[rounded || 'md'], this.config.cellClassName), onError: (e) => {
1131
1127
  if (fallback) {
1132
1128
  e.target.src = fallback;
1133
1129
  }
@@ -1217,9 +1213,9 @@ class LinkColumn extends BaseColumn {
1217
1213
  header: ({ column }) => {
1218
1214
  const displayLabel = label || String(accessor);
1219
1215
  if (!sortable) {
1220
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1216
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1221
1217
  }
1222
- return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1218
+ return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1223
1219
  },
1224
1220
  cell: ({ getValue, row }) => {
1225
1221
  const value = getValue();
@@ -1236,7 +1232,7 @@ class LinkColumn extends BaseColumn {
1236
1232
  };
1237
1233
  // Alignment ohne text-muted-foreground für Links
1238
1234
  const alignmentClass = this.config.align === 'center' ? 'text-center' : this.config.align === 'right' ? 'text-right' : 'text-left';
1239
- return (jsxRuntime.jsxs("a", { href: url, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, onClick: onClick ? handleClick : undefined, className: cn('inline-flex items-center gap-1.5 text-sm text-blue-500', underlineClasses[underline || 'hover'], 'hover:text-blue-500/80', alignmentClass, this.config.cellClassName), children: [icon, jsxRuntime.jsx("span", { children: value }), showExternalIcon && jsxRuntime.jsx(lucideReact.ExternalLink, { className: "text-muted-foreground h-3 w-3" })] }));
1235
+ return (jsxRuntime.jsxs("a", { href: url, target: openInNewTab ? '_blank' : undefined, rel: openInNewTab ? 'noopener noreferrer' : undefined, onClick: onClick ? handleClick : undefined, className: utils.cn('inline-flex items-center gap-1.5 text-sm text-blue-500', underlineClasses[underline || 'hover'], 'hover:text-blue-500/80', alignmentClass, this.config.cellClassName), children: [icon, jsxRuntime.jsx("span", { children: value }), showExternalIcon && jsxRuntime.jsx(lucideReact.ExternalLink, { className: "text-muted-foreground h-3 w-3" })] }));
1240
1236
  },
1241
1237
  };
1242
1238
  }
@@ -1287,9 +1283,9 @@ class NumberColumn extends BaseColumn {
1287
1283
  header: ({ column }) => {
1288
1284
  const displayLabel = label || String(accessor);
1289
1285
  if (!sortable) {
1290
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1286
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1291
1287
  }
1292
- return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1288
+ return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1293
1289
  },
1294
1290
  cell: ({ getValue }) => {
1295
1291
  const value = getValue();
@@ -1319,7 +1315,7 @@ class NumberColumn extends BaseColumn {
1319
1315
  }).format(value);
1320
1316
  }
1321
1317
  const displayValue = `${prefix || ''}${formatted}${suffix || ''}`;
1322
- return jsxRuntime.jsx("span", { className: cn('tabular-nums', this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
1318
+ return jsxRuntime.jsx("span", { className: utils.cn('tabular-nums', this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
1323
1319
  },
1324
1320
  };
1325
1321
  }
@@ -1422,9 +1418,9 @@ class ProgressColumn extends BaseColumn {
1422
1418
  header: ({ column }) => {
1423
1419
  const displayLabel = label || String(accessor);
1424
1420
  if (!sortable) {
1425
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1421
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1426
1422
  }
1427
- return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1423
+ return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1428
1424
  },
1429
1425
  cell: ({ getValue }) => {
1430
1426
  const value = getValue();
@@ -1446,7 +1442,7 @@ class ProgressColumn extends BaseColumn {
1446
1442
  else if (showPercentage) {
1447
1443
  labelText = `${Math.round(percentage)}%`;
1448
1444
  }
1449
- return (jsxRuntime.jsxs("div", { className: cn('flex min-w-[120px] items-center gap-3', this.config.cellClassName), children: [jsxRuntime.jsx(progress.Progress, { value: percentage, className: cn('flex-1', sizeClasses[size || 'md'], colorClasses[currentColor]) }), labelText && jsxRuntime.jsx("span", { className: "text-muted-foreground min-w-[3rem] text-right text-sm tabular-nums", children: labelText })] }));
1445
+ return (jsxRuntime.jsxs("div", { className: utils.cn('flex min-w-[120px] items-center gap-3', this.config.cellClassName), children: [jsxRuntime.jsx(progress.Progress, { value: percentage, className: utils.cn('flex-1', sizeClasses[size || 'md'], colorClasses[currentColor]) }), labelText && jsxRuntime.jsx("span", { className: "text-muted-foreground min-w-[3rem] text-right text-sm tabular-nums", children: labelText })] }));
1450
1446
  },
1451
1447
  };
1452
1448
  }
@@ -1519,9 +1515,9 @@ class TextColumn extends BaseColumn {
1519
1515
  header: ({ column }) => {
1520
1516
  const displayLabel = label || String(accessor);
1521
1517
  if (!sortable) {
1522
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1518
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
1523
1519
  }
1524
- return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1520
+ return (jsxRuntime.jsxs(button.Button, { variant: "table_header", size: "table_header", onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'), className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: [displayLabel, jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "ml-2 h-4 w-4" })] }));
1525
1521
  },
1526
1522
  cell: ({ row, getValue }) => {
1527
1523
  let value = getValue();
@@ -1531,11 +1527,11 @@ class TextColumn extends BaseColumn {
1531
1527
  }
1532
1528
  // Placeholder wenn leer
1533
1529
  if (value === null || value === undefined || value === '') {
1534
- return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground', this.getAlignmentClass(), this.config.cellClassName), children: placeholder || '—' }));
1530
+ return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground', this.getAlignmentClass(), this.config.cellClassName), children: placeholder || '—' }));
1535
1531
  }
1536
1532
  // Prefix/Suffix hinzufügen
1537
1533
  const displayValue = `${prefix || ''}${value}${suffix || ''}`;
1538
- return jsxRuntime.jsx("span", { className: cn(this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
1534
+ return jsxRuntime.jsx("span", { className: utils.cn(this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
1539
1535
  },
1540
1536
  };
1541
1537
  }
@@ -1596,7 +1592,7 @@ class ActionsColumn {
1596
1592
  const visibleActions = actions.filter((action) => !action.hidden || !action.hidden(data));
1597
1593
  if (visibleActions.length === 0)
1598
1594
  return null;
1599
- return (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { variant: "ghost", className: "h-10 w-10 p-0", children: [jsxRuntime.jsx("span", { className: "sr-only", children: label }), triggerIcon || jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-8 w-8" })] }) }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "end", children: visibleActions.map((action, index) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { disabled: action.disabled?.(data), className: cn(action.variant === 'destructive' && 'text-destructive focus:text-destructive'), onClick: () => {
1595
+ return (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: jsxRuntime.jsxs(button.Button, { variant: "ghost", className: "h-10 w-10 p-0", children: [jsxRuntime.jsx("span", { className: "sr-only", children: label }), triggerIcon || jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-8 w-8" })] }) }), jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "end", children: visibleActions.map((action, index) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { disabled: action.disabled?.(data), className: utils.cn(action.variant === 'destructive' && 'text-destructive focus:text-destructive'), onClick: () => {
1600
1596
  if (action.href) {
1601
1597
  window.location.href = action.href(data);
1602
1598
  }