@nccirtu/tablefy 0.6.0 → 0.6.2

package/dist/columns/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var clsx = require('clsx');
+var utils = require('@/lib/utils');
 var badge = require('@/components/ui/badge');
 var button = require('@/components/ui/button');
 var lucideReact = require('lucide-react');
@@ -17,10 +17,6 @@ const AvatarList = ({ items, maxVisible = 5, size = 32, ...props }) => {
     return (jsxRuntime.jsxs("div", { className: "avatar-list", style: { "--avatar-size": `${sizeValue}px` }, ...props, children: [items.slice(0, maxVisible).map((item) => (jsxRuntime.jsx("div", { className: "avatar-item", children: item.src ? (jsxRuntime.jsx("img", { src: item.src, alt: item.alt || "Avatar", style: { width: `${sizeValue}px`, height: `${sizeValue}px` } })) : (jsxRuntime.jsx("div", { className: "avatar-initials", style: { width: `${sizeValue}px`, height: `${sizeValue}px` }, children: item.initials || "?" })) }, item.id))), items.length > maxVisible && (jsxRuntime.jsxs("div", { className: "avatar-count", style: { width: `${sizeValue}px`, height: `${sizeValue}px` }, children: ["+", items.length - maxVisible] }))] }));
 };
 
-function cn(...inputs) {
-    return clsx(inputs.filter(Boolean));
-}
-
 class BaseColumn {
     config;
     constructor(accessor) {
@@ -164,7 +160,7 @@ class AvatarGroupColumn extends BaseColumn {
         const { accessor, label, maxVisible, size, overlap, showTooltip, nameField, srcField, fallbackField, showNames, maxNames, } = config;
         return {
             accessorKey: accessor,
-            header: () => (jsxRuntime.jsx("span", { className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: label || String(accessor) })),
+            header: () => (jsxRuntime.jsx("span", { className: utils.cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: label || String(accessor) })),
             cell: ({ getValue, row }) => {
                 const rawValue = getValue();
                 // Items aus den Daten extrahieren
@@ -197,7 +193,7 @@ class AvatarGroupColumn extends BaseColumn {
                 }
                 // Konvertiere zu Datenstruktur für AvatarList
                 const contacts = this.toContactItems(items);
-                return (jsxRuntime.jsx("div", { className: cn("flex items-center", this.config.cellClassName), children: jsxRuntime.jsx(AvatarList, { items: contacts.map((contact) => ({
+                return (jsxRuntime.jsx("div", { className: utils.cn("flex items-center", this.config.cellClassName), children: jsxRuntime.jsx(AvatarList, { items: contacts.map((contact) => ({
                             id: contact.id,
                             src: contact.src,
                             alt: contact.alt,
@@ -245,9 +241,9 @@ class BadgeColumn extends BaseColumn {
             header: ({ column }) => {
                 const displayLabel = label || String(accessor);
                 if (!sortable) {
-                    return (jsxRuntime.jsx("span", { className: cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
+                    return (jsxRuntime.jsx("span", { className: utils.cn("text-muted-foreground font-medium", this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
                 }
-                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" })] }));
+                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" })] }));
             },
             cell: ({ getValue }) => {
                 const value = String(getValue());
@@ -260,7 +256,7 @@ class BadgeColumn extends BaseColumn {
                         variantConfig.variant === "info" ||
                         variantConfig.variant === "muted"
                         ? "default"
-                        : variantConfig.variant || "default", className: cn(variantConfig.className, this.config.cellClassName), children: [variantConfig.icon, variantConfig.label || value] }));
+                        : variantConfig.variant || "default", className: utils.cn(variantConfig.className, this.config.cellClassName), children: [variantConfig.icon, variantConfig.label || value] }));
             },
         };
     }
@@ -372,9 +368,9 @@ class DateColumn extends BaseColumn {
             header: ({ column }) => {
                 const displayLabel = label || String(accessor);
                 if (!sortable) {
-                    return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
+                    return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
                 }
-                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" })] }));
+                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" })] }));
             },
             cell: ({ getValue }) => {
                 const value = getValue();
@@ -386,7 +382,7 @@ class DateColumn extends BaseColumn {
                     return jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Ung\u00FCltiges Datum" });
                 }
                 const formatted = this.formatDate(date, format || 'short', locale || 'de-DE');
-                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] }));
+                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] }));
             },
         };
     }
@@ -626,9 +622,9 @@ class IconColumn extends BaseColumn {
             header: ({ column }) => {
                 const displayLabel = label || String(accessor);
                 if (!sortable) {
-                    return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
+                    return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
                 }
-                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" })] }));
+                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" })] }));
             },
             cell: ({ getValue }) => {
                 const value = String(getValue());
@@ -645,7 +641,7 @@ class IconColumn extends BaseColumn {
                 // Icon als Element rendern (falls LucideIcon übergeben wurde)
                 const IconElement = typeof icon === 'function' ? icon : null;
                 const renderedIcon = IconElement ? jsxRuntime.jsx(IconElement, { className: "h-full w-full" }) : icon;
-                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 })] }));
+                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 })] }));
                 if (showTooltip) {
                     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 }) })] }) }));
                 }
@@ -703,11 +699,11 @@ class ImageColumn extends BaseColumn {
         };
         return {
             accessorKey: accessor,
-            header: () => jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.config.headerClassName), children: label || '' }),
+            header: () => jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.config.headerClassName), children: label || '' }),
             cell: ({ getValue, row }) => {
                 const src = getValue();
                 const altText = alt ? alt(row.original) : 'Bild';
-                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) => {
+                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) => {
                         if (fallback) {
                             e.target.src = fallback;
                         }
@@ -797,9 +793,9 @@ class LinkColumn extends BaseColumn {
             header: ({ column }) => {
                 const displayLabel = label || String(accessor);
                 if (!sortable) {
-                    return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
+                    return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
                 }
-                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" })] }));
+                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" })] }));
             },
             cell: ({ getValue, row }) => {
                 const value = getValue();
@@ -816,7 +812,7 @@ class LinkColumn extends BaseColumn {
                 };
                 // Alignment ohne text-muted-foreground für Links
                 const alignmentClass = this.config.align === 'center' ? 'text-center' : this.config.align === 'right' ? 'text-right' : 'text-left';
-                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" })] }));
+                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" })] }));
             },
         };
     }
@@ -867,9 +863,9 @@ class NumberColumn extends BaseColumn {
             header: ({ column }) => {
                 const displayLabel = label || String(accessor);
                 if (!sortable) {
-                    return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
+                    return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
                 }
-                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" })] }));
+                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" })] }));
             },
             cell: ({ getValue }) => {
                 const value = getValue();
@@ -899,7 +895,7 @@ class NumberColumn extends BaseColumn {
                     }).format(value);
                 }
                 const displayValue = `${prefix || ''}${formatted}${suffix || ''}`;
-                return jsxRuntime.jsx("span", { className: cn('tabular-nums', this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
+                return jsxRuntime.jsx("span", { className: utils.cn('tabular-nums', this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
             },
         };
     }
@@ -1002,9 +998,9 @@ class ProgressColumn extends BaseColumn {
             header: ({ column }) => {
                 const displayLabel = label || String(accessor);
                 if (!sortable) {
-                    return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
+                    return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
                 }
-                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" })] }));
+                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" })] }));
             },
             cell: ({ getValue }) => {
                 const value = getValue();
@@ -1026,7 +1022,7 @@ class ProgressColumn extends BaseColumn {
                 else if (showPercentage) {
                     labelText = `${Math.round(percentage)}%`;
                 }
-                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 })] }));
+                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 })] }));
             },
         };
     }
@@ -1099,9 +1095,9 @@ class TextColumn extends BaseColumn {
             header: ({ column }) => {
                 const displayLabel = label || String(accessor);
                 if (!sortable) {
-                    return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
+                    return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground font-medium', this.getAlignmentClass(), this.config.headerClassName), children: displayLabel }));
                 }
-                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" })] }));
+                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" })] }));
             },
             cell: ({ row, getValue }) => {
                 let value = getValue();
@@ -1111,11 +1107,11 @@ class TextColumn extends BaseColumn {
                 }
                 // Placeholder wenn leer
                 if (value === null || value === undefined || value === '') {
-                    return (jsxRuntime.jsx("span", { className: cn('text-muted-foreground', this.getAlignmentClass(), this.config.cellClassName), children: placeholder || '—' }));
+                    return (jsxRuntime.jsx("span", { className: utils.cn('text-muted-foreground', this.getAlignmentClass(), this.config.cellClassName), children: placeholder || '—' }));
                 }
                 // Prefix/Suffix hinzufügen
                 const displayValue = `${prefix || ''}${value}${suffix || ''}`;
-                return jsxRuntime.jsx("span", { className: cn(this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
+                return jsxRuntime.jsx("span", { className: utils.cn(this.getAlignmentClass(), this.config.cellClassName), children: displayValue });
             },
         };
     }
@@ -1176,7 +1172,7 @@ class ActionsColumn {
                 const visibleActions = actions.filter((action) => !action.hidden || !action.hidden(data));
                 if (visibleActions.length === 0)
                     return null;
-                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: () => {
+                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: () => {
                                             if (action.href) {
                                                 window.location.href = action.href(data);
                                             }