ikoncomponents 1.7.6 → 1.8.0

package/dist/ikoncomponents/table/DataTableFilter/index.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { X, ChevronDown, Check, RotateCcw, Search, ListFilter } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "../../../shadcn/dropdown-menu";
+import { Button } from "../../../shadcn/button";
+export function DataTableFilter({ table }) {
+    const [open, setOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [pendingColumns, setPendingColumns] = useState([]);
+    // Syncing with Table State: Which columns currently have a filter active?
+    const activeFilters = table.getState().columnFilters;
+    const activeIds = activeFilters.map((f) => f.id);
+    const columns = table.getAllLeafColumns().filter((col) => col.getCanFilter());
+    const filteredColumns = columns.filter((col) => {
+        if (col.id === "DTActions")
+            return false; // Exclude action column from filter list
+        const label = (typeof col.columnDef.header === "string") ? col.columnDef.header : col.id;
+        return label.toLowerCase().includes(searchQuery.toLowerCase());
+    });
+    const togglePendingColumn = (id) => {
+        setPendingColumns((prev) => prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]);
+    };
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: (o) => {
+            setOpen(o);
+            if (o)
+                setPendingColumns(activeIds);
+        }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background relative", children: [_jsx(ListFilter, { className: "w-4 h-4" }), "Filter", activeIds.length > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 w-4 h-4 bg-foreground text-background text-[10px] rounded-full flex items-center justify-center font-bold", children: activeIds.length }))] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56 p-2 space-y-2", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Filter" }), _jsxs("div", { className: "px-2 relative", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search columns...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-8 pl-8 pr-2 text-xs rounded-md border border-border bg-muted/20 focus:outline-none focus:ring-1 focus:ring-foreground/30" })] }), _jsx("div", { className: "space-y-1 max-h-[300px] overflow-y-auto pr-1", children: filteredColumns.map((col) => {
+                            const label = typeof col.columnDef.header === "string"
+                                ? col.columnDef.header
+                                : col.id;
+                            const isSelected = pendingColumns.includes(col.id);
+                            return (_jsxs("button", { onClick: () => togglePendingColumn(col.id), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: "flex h-4 w-4 items-center justify-center rounded-sm border", style: isSelected
+                                            ? { backgroundColor: "hsl(var(--foreground))", borderColor: "hsl(var(--foreground))", color: "hsl(var(--background))" }
+                                            : { borderColor: "hsl(var(--border))" }, children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate", children: label })] }, col.id));
+                        }) }), _jsxs("div", { className: "px-2 pt-2 mt-1 flex gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "flex-1 text-xs font-medium bg-foreground text-background hover:bg-foreground/90", onClick: () => {
+                                    columns.forEach((col) => {
+                                        const wasActive = activeIds.includes(col.id);
+                                        const willActive = pendingColumns.includes(col.id);
+                                        if (willActive && !wasActive)
+                                            col.setFilterValue([]);
+                                        if (!willActive && wasActive)
+                                            col.setFilterValue(undefined);
+                                    });
+                                    setOpen(false);
+                                }, children: "Apply" }), _jsxs(Button, { variant: "secondary", size: "sm", className: "flex-1 text-xs font-medium bg-secondary hover:bg-secondary/80 text-secondary-foreground", onClick: () => {
+                                    setPendingColumns([]);
+                                    table.resetColumnFilters();
+                                    setOpen(false);
+                                }, children: [_jsx(RotateCcw, { className: "w-3.5 h-3.5 mr-2 inline" }), " Reset"] })] })] })] }));
+}
+export function FilterTagSpacer({ activeFilters, table }) {
+    if (!activeFilters || activeFilters.length === 0)
+        return null;
+    return (
+    // {/* --- ACTIVE FILTER TAGS --- */}
+    _jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0 overflow-x-auto", style: { scrollbarWidth: "none", msOverflowStyle: "none" }, children: activeFilters.map((filter) => (_jsx(FilterTag, { filter: filter, table: table }, filter.id))) }));
+}
+// --- INDIVIDUAL TAG COMPONENT WITH VALUE DROPDOWN ---
+function FilterTag({ filter, table }) {
+    const [searchQuery, setSearchQuery] = useState("");
+    const column = table.getColumn(filter.id);
+    const colHeader = typeof (column === null || column === void 0 ? void 0 : column.columnDef.header) === "string" ? column.columnDef.header : filter.id;
+    const selectedValues = filter.value || [];
+    // Extract unique values from data
+    const uniqueValues = useMemo(() => {
+        const set = new Set();
+        table.getPreFilteredRowModel().flatRows.forEach((row) => {
+            const val = row.getValue(filter.id);
+            if (val !== null && val !== undefined)
+                set.add(val);
+        });
+        return Array.from(set).sort();
+    }, [table.getPreFilteredRowModel().flatRows, filter.id]);
+    const filteredValues = uniqueValues.filter((v) => String(v).toLowerCase().includes(searchQuery.toLowerCase()));
+    const toggleValue = (val) => {
+        const next = selectedValues.includes(val)
+            ? selectedValues.filter((v) => v !== val)
+            : [...selectedValues, val];
+        column.setFilterValue(next);
+    };
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("div", { className: "flex items-center gap-1.5 px-3 py-1.5 h-9 bg-muted/50 border border-border rounded-full text-xs font-medium cursor-pointer hover:bg-muted/80 transition-colors flex-1 shrink min-w-[140px] max-w-fit", title: `${colHeader}: ${selectedValues.length} Selected`, children: [_jsxs("span", { className: "uppercase truncate shrink font-semibold", children: [colHeader, ":"] }), _jsxs("span", { className: "text-muted-foreground whitespace-nowrap shrink-0", children: [selectedValues.length, " Selected"] }), _jsx(ChevronDown, { className: "w-3.5 h-3.5 ml-1 opacity-50 shrink-0" }), _jsx("div", { className: "p-0.5 ml-1 rounded-full hover:bg-background/80 shrink-0", onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                column.setFilterValue(undefined);
+                            }, onPointerDown: (e) => {
+                                e.stopPropagation();
+                            }, children: _jsx(X, { className: "w-3.5 h-3.5" }) })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-56 p-2 space-y-2", children: [_jsxs("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: ["Filter ", colHeader] }), _jsxs("div", { className: "px-2 relative", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search items...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full h-8 pl-8 pr-2 text-xs rounded-md border border-border bg-muted/20 focus:outline-none focus:ring-1 focus:ring-foreground/30" })] }), _jsxs("div", { className: "space-y-1 max-h-[200px] overflow-y-auto pr-1", children: [filteredValues.map((val) => {
+                                const isSelected = selectedValues.includes(val);
+                                const label = String(val).trim() === "" ? "N/A" : String(val);
+                                return (_jsxs("button", { onClick: () => toggleValue(val), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: "flex h-4 w-4 items-center justify-center rounded-sm border", style: isSelected
+                                                ? { backgroundColor: "hsl(var(--foreground))", borderColor: "hsl(var(--foreground))", color: "hsl(var(--background))" }
+                                                : { borderColor: "hsl(var(--border))" }, children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate text-left", children: label })] }, String(val)));
+                            }), filteredValues.length === 0 && (_jsx("div", { className: "px-2 py-2 text-xs text-muted-foreground text-center", children: "No items found." }))] }), selectedValues.length > 0 && (_jsx("div", { className: "px-2 pt-1 border-t", children: _jsx(Button, { variant: "ghost", size: "sm", className: "w-full text-xs", onClick: () => column.setFilterValue([]), children: "Clear Selections" }) }))] })] }));
+}

package/dist/ikoncomponents/table/DataTablePageSize/index.d.ts

@@ -1 +1 @@
-export declare function DataTablePageSize(): import("react/jsx-runtime").JSX.Element;
+export declare function DataTablePageSize(): import("react").JSX.Element;

package/dist/ikoncomponents/table/DataTablePageSize/index.js

@@ -7,9 +7,11 @@ export function DataTablePageSize() {
     const searchParams = useSearchParams();
     const currentSize = searchParams.get("size") || "10";
     const handleSizeChange = (e) => {
+        // Create a new URLSearchParams instance from the current ones
         const params = new URLSearchParams(searchParams.toString());
         params.set("size", e.target.value);
         params.set("page", "1");
+        // Next.js navigation
         router.push(`${pathname}?${params.toString()}`);
     };
     return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page:" }), _jsxs("select", { className: "h-9 rounded-md border border-border bg-background text-foreground px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary", value: currentSize, onChange: handleSizeChange, children: [_jsx("option", { value: "10", children: "10" }), _jsx("option", { value: "20", children: "20" }), _jsx("option", { value: "50", children: "50" }), _jsx("option", { value: "100", children: "100" })] })] }));

package/dist/ikoncomponents/table/DataTablePagination/index.d.ts

@@ -1,6 +1,6 @@
 interface PaginationProps {
-    totalPages: number;
+    totalPages: number | undefined;
     currentPage: number;
 }
-export declare function DataTablePagination({ totalPages, currentPage }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataTablePagination({ totalPages, currentPage }: PaginationProps): import("react").JSX.Element;
 export {};

package/dist/ikoncomponents/table/DataTablePagination/index.js

@@ -6,9 +6,11 @@ export function DataTablePagination({ totalPages, currentPage }) {
     const pathname = usePathname();
     const searchParams = useSearchParams();
     const handlePageChange = (newPage) => {
+        // Create a new URLSearchParams instance from the current ones
         const params = new URLSearchParams(searchParams.toString());
         params.set("page", newPage.toString());
+        // Next.js navigation
         router.push(`${pathname}?${params.toString()}`);
     };
-    return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage <= 1, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Previous" }), _jsxs("span", { className: "text-sm text-muted-foreground px-2", children: ["Page ", _jsx("span", { className: "font-semibold", children: currentPage }), " of", " ", _jsx("span", { className: "font-semibold", children: Math.max(totalPages, 1) })] }), _jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage >= totalPages, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Next" })] }));
+    return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("button", { type: "button", onClick: () => handlePageChange(currentPage - 1), disabled: currentPage <= 1, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Previous" }), _jsxs("span", { className: "text-sm text-muted-foreground px-2", children: ["Page ", _jsx("span", { className: "font-semibold", children: currentPage }), " of", " ", _jsx("span", { className: "font-semibold", children: Math.max(totalPages !== null && totalPages !== void 0 ? totalPages : 1, 1) })] }), _jsx("button", { type: "button", onClick: () => handlePageChange(currentPage + 1), disabled: totalPages === undefined ? undefined : currentPage >= totalPages, className: "h-9 px-3 py-1 text-sm font-medium border border-border rounded-md bg-background text-foreground hover:bg-muted disabled:opacity-50 disabled:cursor-not-allowed transition-colors", children: "Next" })] }));
 }

package/dist/ikoncomponents/table/DataTableSearch/index.d.ts

@@ -1 +1 @@
-export declare function DataTableSearch(): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableSearch(): import("react").JSX.Element;

package/dist/ikoncomponents/table/DataTableSearch/index.js

@@ -1,27 +1,39 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { useState, useEffect } from "react";
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
 import { useDebounce } from "use-debounce";
 import { Search } from "lucide-react";
 export function DataTableSearch() {
     const router = useRouter();
     const pathname = usePathname();
     const searchParams = useSearchParams();
+    // 1. Initialize local state from the URL 'search' param
     const [searchTerm, setSearchTerm] = useState(searchParams.get("search") || "");
+    // 2. Debounce the local state (500ms delay)
     const [debouncedSearch] = useDebounce(searchTerm, 500);
+    // 3. Update the URL whenever the debounced value changes
     useEffect(() => {
         const params = new URLSearchParams(searchParams.toString());
         if (debouncedSearch) {
             params.set("search", debouncedSearch);
+            // Update the global filter in the parent component
         }
         else {
             params.delete("search");
         }
+        // Only navigate if the param actually changed (prevents redundant history entries)
         if (params.get("search") !== searchParams.get("search")) {
-            params.set("page", "1");
-            router.push(`${pathname}?${params.toString()}`);
+            params.set("page", "1"); // Reset to page 1 on new search
+            router.replace(`${pathname}?${params.toString()}`);
         }
     }, [debouncedSearch, pathname, router, searchParams]);
-    return (_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search ...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "flex h-9 w-full rounded-md border border-border bg-transparent pl-9 pr-3 py-1 text-sm shadow-sm transition-colors text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary" })] }));
+    // 4. Sync local state if the URL is changed externally (e.g., browser back button)
+    useEffect(() => {
+        const urlSearch = searchParams.get("search") || "";
+        if (urlSearch !== searchTerm) {
+            setSearchTerm(urlSearch);
+        }
+    }, [searchParams]);
+    return (_jsxs("div", { className: "relative  max-w-sm  min-w-[10%]", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search ...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), className: "flex h-9 w-full rounded-md border border-border bg-transparent pl-9 pr-3 py-1 text-sm shadow-sm transition-colors text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary" })] }));
 }

package/dist/ikoncomponents/table/index.d.ts

@@ -1,2 +1,2 @@
-import { DataTableLayoutProps } from "./type";
-export declare function DataTableLayout<T>({ data, columns, extraTools, }: DataTableLayoutProps<T>): import("react/jsx-runtime").JSX.Element;
+import type { DataTableLayoutProps } from "./type";
+export declare function DataTableLayout<T>({ data, columns, extraTools, }: DataTableLayoutProps<T>): import("react").JSX.Element;

package/dist/ikoncomponents/table/index.js

@@ -1,165 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
-import { LayoutGrid, List, ChevronDown, X, GripVertical, Settings2, Check, Download, RotateCcw, Search, ListFilter } from "lucide-react";
-import { Badge } from "../../shadcn/badge";
-import { Reload } from "../reload-component";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { DataTable } from "./DataTable";
-import { DataTableSearch } from "./DataTableSearch";
-import { DataTablePagination } from "./DataTablePagination";
-import { DataTablePageSize } from "./DataTablePageSize";
-import { Button } from "../../shadcn/button";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } from "../../shadcn/dropdown-menu";
 export function DataTableLayout({ data, columns, extraTools, }) {
-    const { keyExtractor, totalPages, currentPage, filterComponent, actionNode, onRowClick, gridComponent, isLoading, onReload, themeColor, onLoadMore, hasMore, onFilterChange, unfilteredData, } = extraTools !== null && extraTools !== void 0 ? extraTools : {};
-    const [viewMode, setViewMode] = useState("list");
-    const observerTarget = useRef(null);
-    useEffect(() => {
-        if (viewMode !== "grid" || !onLoadMore || !hasMore)
-            return;
-        const observer = new IntersectionObserver((entries) => {
-            if (entries[0].isIntersecting) {
-                onLoadMore();
-            }
-        }, { threshold: 0.1 });
-        if (observerTarget.current) {
-            observer.observe(observerTarget.current);
-        }
-        return () => observer.disconnect();
-    }, [viewMode, onLoadMore, hasMore]);
-    const [groupedColumns, setGroupedColumns] = useState([]);
-    const [tableFilters, setTableFilters] = useState({});
-    const [activeFilterColumns, setActiveFilterColumns] = useState([]);
-    const [isFilterDropdownOpen, setIsFilterDropdownOpen] = useState(false);
-    const [pendingFilterColumns, setPendingFilterColumns] = useState([]);
-    const [filterSearchQuery, setFilterSearchQuery] = useState("");
-    const [columnSearchQueries, setColumnSearchQueries] = useState({});
-    const [visibleColumns, setVisibleColumns] = useState(columns.map(col => typeof col.header === "string" ? col.header : ""));
-    const toggleColumn = (header) => {
-        setVisibleColumns(prev => prev.includes(header) ? prev.filter(h => h !== header) : [...prev, header]);
-    };
-    const handleToggleFilterValue = (column, value) => {
-        const currentValues = tableFilters[column] || [];
-        const nextValues = currentValues.includes(value)
-            ? currentValues.filter(v => v !== value)
-            : [...currentValues, value];
-        const nextFilters = Object.assign({}, tableFilters);
-        if (nextValues.length === 0) {
-            delete nextFilters[column];
-        }
-        else {
-            nextFilters[column] = nextValues;
-        }
-        setTableFilters(nextFilters);
-        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
-    };
-    const removeActiveFilterColumn = (column) => {
-        const nextActiveColumns = activeFilterColumns.filter(c => c !== column);
-        const nextFilters = Object.assign({}, tableFilters);
-        delete nextFilters[column];
-        setActiveFilterColumns(nextActiveColumns);
-        setTableFilters(nextFilters);
-        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
-    };
-    const handleTogglePendingFilterColumn = (column) => {
-        setPendingFilterColumns(prev => prev.includes(column) ? prev.filter(c => c !== column) : [...prev, column]);
-    };
-    const getUniqueValuesForColumn = (header) => {
-        const col = columns.find(c => c.header === header);
-        if (!col || !col.accessorKey)
-            return [];
-        const sourceData = unfilteredData || data;
-        const values = sourceData.map(row => String(row[col.accessorKey] || ""));
-        return Array.from(new Set(values)).filter(Boolean).sort();
-    };
-    const handleToggleGroup = (columnHeader) => {
-        setGroupedColumns(prev => prev.includes(columnHeader)
-            ? prev.filter(c => c !== columnHeader)
-            : [...prev, columnHeader]);
-    };
-    const exportToCSV = () => {
-        if (!data || data.length === 0)
-            return;
-        const headers = columns
-            .filter(col => typeof col.header === "string")
-            .map(col => col.header);
-        const csvRows = data.map(row => columns
-            .filter(col => typeof col.header === "string")
-            .map(col => {
-            const val = col.accessorKey ? row[col.accessorKey] : "";
-            return `"${String(val).replace(/"/g, '""')}"`;
-        })
-            .join(","));
-        const csvContent = [headers.join(","), ...csvRows].join("\n");
-        const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-        const link = document.createElement("a");
-        const url = URL.createObjectURL(blob);
-        link.setAttribute("href", url);
-        link.setAttribute("download", `table-export-${new Date().toISOString().split('T')[0]}.csv`);
-        link.style.visibility = "hidden";
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    };
-    // data is the current page from the backend — render it directly, no client-side filtering.
-    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 w-full", children: [_jsx("div", { className: "flex items-center gap-2 w-full sm:w-auto sm:max-w-[200px] shrink-0", children: _jsx(DataTableSearch, {}) }), _jsxs("div", { className: "flex items-center gap-3 flex-wrap shrink-0", children: [actionNode && actionNode, filterComponent && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background", children: [_jsx(ListFilter, { className: "w-4 h-4" }), "Filter"] }) }), _jsx(DropdownMenuContent, { align: "end", className: "p-4 min-w-[200px]", children: filterComponent })] })), _jsxs(DropdownMenu, { open: isFilterDropdownOpen, onOpenChange: (open) => {
-                                    setIsFilterDropdownOpen(open);
-                                    if (open) {
-                                        setPendingFilterColumns(activeFilterColumns);
-                                    }
-                                }, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background relative", children: [_jsx(ListFilter, { className: "w-4 h-4" }), "Filter", activeFilterColumns.length > 0 && (_jsx("span", { className: "absolute -top-1 -right-1 w-4 h-4 bg-foreground text-background text-[10px] rounded-full flex items-center justify-center font-bold", children: activeFilterColumns.length }))] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-56 p-2 space-y-2", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Filter" }), _jsxs("div", { className: "px-2 relative", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search columns...", value: filterSearchQuery, onChange: (e) => setFilterSearchQuery(e.target.value), className: "w-full h-8 pl-8 pr-2 text-xs rounded-md border border-border bg-muted/20 focus:outline-none focus:ring-1 focus:ring-foreground/30" })] }), _jsx("div", { className: "space-y-1 max-h-[300px] overflow-y-auto pr-1", children: columns
-                                                    .filter(col => {
-                                                    const headerText = typeof col.header === "string" ? col.header : "";
-                                                    return headerText && col.accessorKey && headerText.toLowerCase().includes(filterSearchQuery.toLowerCase());
-                                                })
-                                                    .map((col, idx) => {
-                                                    const headerText = typeof col.header === "string" ? col.header : "";
-                                                    const isSelected = pendingFilterColumns.includes(headerText);
-                                                    return (_jsxs("button", { onClick: () => handleTogglePendingFilterColumn(headerText), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: `flex h-4 w-4 items-center justify-center rounded-sm border`, style: isSelected ? { backgroundColor: 'hsl(var(--foreground))', borderColor: 'hsl(var(--foreground))', color: 'hsl(var(--background))' } : { borderColor: 'hsl(var(--border))' }, children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate", children: headerText })] }, idx));
-                                                }) }), _jsxs("div", { className: "px-2 pt-2 mt-1 flex gap-2", children: [_jsx(Button, { variant: "default", size: "sm", className: "flex-1 text-xs font-medium bg-foreground text-background hover:bg-foreground/90", onClick: () => {
-                                                            setActiveFilterColumns(pendingFilterColumns);
-                                                            const removedColumns = activeFilterColumns.filter(c => !pendingFilterColumns.includes(c));
-                                                            const nextFilters = Object.assign({}, tableFilters);
-                                                            removedColumns.forEach(c => delete nextFilters[c]);
-                                                            setTableFilters(nextFilters);
-                                                            setIsFilterDropdownOpen(false);
-                                                            // Notify parent so it can re-fetch from the backend
-                                                            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
-                                                        }, children: "Apply" }), _jsxs(Button, { variant: "secondary", size: "sm", className: "flex-1 text-xs font-medium bg-secondary hover:bg-secondary/80 text-secondary-foreground", onClick: () => {
-                                                            setPendingFilterColumns([]);
-                                                            setActiveFilterColumns([]);
-                                                            setTableFilters({});
-                                                            setIsFilterDropdownOpen(false);
-                                                            // Notify parent so it can re-fetch all data without filters
-                                                            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange({});
-                                                        }, children: [_jsx(RotateCcw, { className: "w-3.5 h-3.5 mr-2 inline" }), " Reset"] })] })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background", children: [_jsx(Settings2, { className: "w-4 h-4" }), "Columns"] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-48 p-2", children: [_jsx("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Toggle Columns" }), columns.map((col, idx) => {
-                                                const headerText = typeof col.header === "string" ? col.header : `Column ${idx + 1}`;
-                                                const isVisible = visibleColumns.includes(headerText);
-                                                return (_jsxs("button", { onClick: () => toggleColumn(headerText), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: `flex h-4 w-4 items-center justify-center rounded-sm border border-primary ${isVisible ? 'bg-primary text-primary-foreground' : 'bg-transparent'}`, children: isVisible && _jsx(Check, { className: "h-3 w-3" }) }), headerText] }, idx));
-                                            })] })] }), _jsx(Button, { variant: "outline", size: "sm", className: "h-9 gap-2 border-border bg-background", onClick: exportToCSV, children: _jsx(Download, { className: "w-4 h-4" }) }), _jsxs("div", { className: "flex items-center border border-border rounded-md bg-background overflow-hidden h-9", children: [_jsx("button", { onClick: () => setViewMode("list"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "list" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "List View", children: _jsx(List, { className: "w-4 h-4" }) }), _jsx("button", { onClick: () => setViewMode("grid"), className: `px-2.5 h-full flex items-center justify-center transition-colors ${viewMode === "grid" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`, title: "Grid View", children: _jsx(LayoutGrid, { className: "w-4 h-4" }) })] })] })] }), activeFilterColumns.length > 0 && (_jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0 overflow-x-auto", style: { scrollbarWidth: 'none', msOverflowStyle: 'none' }, children: activeFilterColumns.map(colHeader => {
-                    const selectedCount = (tableFilters[colHeader] || []).length;
-                    const searchQuery = columnSearchQueries[colHeader] || "";
-                    const uniqueValues = getUniqueValuesForColumn(colHeader);
-                    const filteredValues = uniqueValues.filter(v => v.toLowerCase().includes(searchQuery.toLowerCase()));
-                    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("div", { className: "flex items-center gap-1.5 px-3 py-1.5 h-9 bg-muted/50 border border-border rounded-full text-xs font-medium cursor-pointer hover:bg-muted/80 transition-colors flex-1 shrink min-w-[140px] max-w-fit [&::-webkit-scrollbar]:hidden", title: `${colHeader}: ${selectedCount} Selected`, children: [_jsxs("span", { className: "uppercase truncate shrink font-semibold", children: [colHeader, ":"] }), _jsxs("span", { className: "text-muted-foreground whitespace-nowrap shrink-0", children: [selectedCount, " Selected"] }), _jsx(ChevronDown, { className: "w-3.5 h-3.5 ml-1 opacity-50 shrink-0" }), _jsx("div", { className: "p-0.5 ml-1 rounded-full hover:bg-background/80 shrink-0", onClick: (e) => {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                removeActiveFilterColumn(colHeader);
-                                            }, onPointerDown: (e) => {
-                                                e.stopPropagation();
-                                            }, children: _jsx(X, { className: "w-3.5 h-3.5" }) })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-56 p-2 space-y-2", children: [_jsxs("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: ["Filter ", colHeader] }), _jsxs("div", { className: "px-2 relative", children: [_jsx(Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: "Search items...", value: searchQuery, onChange: (e) => setColumnSearchQueries(prev => (Object.assign(Object.assign({}, prev), { [colHeader]: e.target.value }))), className: "w-full h-8 pl-8 pr-2 text-xs rounded-md border border-border bg-muted/20 focus:outline-none focus:ring-1 focus:ring-foreground/30" })] }), _jsxs("div", { className: "space-y-1 max-h-[200px] overflow-y-auto pr-1", children: [filteredValues.map(val => {
-                                                const isSelected = (tableFilters[colHeader] || []).includes(val);
-                                                return (_jsxs("button", { onClick: () => handleToggleFilterValue(colHeader, val), className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm rounded-sm hover:bg-muted transition-colors", children: [_jsx("div", { className: `flex h-4 w-4 items-center justify-center rounded-sm border`, style: isSelected ? { backgroundColor: 'hsl(var(--foreground))', borderColor: 'hsl(var(--foreground))', color: 'hsl(var(--background))' } : { borderColor: 'hsl(var(--border))' }, children: isSelected && _jsx(Check, { className: "h-3 w-3" }) }), _jsx("span", { className: "truncate text-left", children: val })] }, val));
-                                            }), filteredValues.length === 0 && (_jsx("div", { className: "px-2 py-2 text-xs text-muted-foreground text-center", children: "No items found." }))] }), (tableFilters[colHeader] || []).length > 0 && (_jsx("div", { className: "px-2 pt-1 border-t", children: _jsx(Button, { variant: "ghost", size: "sm", className: "w-full text-xs", onClick: () => {
-                                                const nextFilters = Object.assign({}, tableFilters);
-                                                delete nextFilters[colHeader];
-                                                setTableFilters(nextFilters);
-                                                onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(nextFilters);
-                                            }, children: "Clear Selections" }) }))] })] }, colHeader));
-                }) })), _jsxs("div", { className: "w-full flex items-center gap-2 p-2 border border-dashed border-border rounded-lg bg-muted/20 min-h-[48px] transition-all hover:bg-muted/40 group shadow-sm", onDragOver: (e) => e.preventDefault(), onDrop: (e) => {
-                    e.preventDefault();
-                    const columnHeader = e.dataTransfer.getData("columnHeader");
-                    if (columnHeader && !groupedColumns.includes(columnHeader)) {
-                        handleToggleGroup(columnHeader);
-                    }
-                }, children: [_jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs px-2 select-none border-r pr-4 mr-2 border-border/50", children: [_jsx(GripVertical, { className: "w-4 h-4 opacity-40" }), _jsx("span", { className: "font-semibold uppercase tracking-wider opacity-70", children: "Grouping" })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: groupedColumns.length === 0 ? (_jsx("div", { className: "flex items-center gap-2 text-muted-foreground/60 text-sm italic py-1", children: _jsx("span", { children: "Drag column headers here to group your data..." }) })) : (groupedColumns.map(col => (_jsxs(Badge, { variant: "secondary", className: "gap-2 pl-3 pr-1.5 h-8 text-xs font-semibold bg-background border shadow-sm animate-in fade-in zoom-in duration-200", children: [col, _jsx("button", { onClick: () => handleToggleGroup(col), className: "hover:bg-muted rounded-full p-0.5 transition-colors", children: _jsx(X, { className: "w-3.5 h-3.5" }) })] }, col)))) })] }), _jsxs("div", { className: "relative min-h-[300px] mt-2", children: [_jsx(Reload, { isLoading: isLoading !== null && isLoading !== void 0 ? isLoading : false, onReload: onReload || (() => window.location.reload()) }), _jsx("div", { className: `transition-all duration-300 ${isLoading ? 'opacity-50 pointer-events-none' : ''}`, children: viewMode === "list" ? (_jsx(DataTable, { data: data, columns: columns.filter(col => typeof col.header === "string" ? visibleColumns.includes(col.header) : true), keyExtractor: keyExtractor !== null && keyExtractor !== void 0 ? keyExtractor : (() => ""), onRowClick: onRowClick, groupedColumns: groupedColumns, onToggleGroup: handleToggleGroup })) : (_jsxs(_Fragment, { children: [gridComponent ? gridComponent(data) : (_jsx("div", { className: "p-12 text-center text-muted-foreground border border-border border-dashed rounded-md bg-muted/20", children: "Grid view not implemented for this component yet." })), viewMode === "grid" && hasMore && (_jsx("div", { ref: observerTarget, className: "flex justify-center p-6 w-full", children: _jsx("div", { className: "w-6 h-6 border-2 rounded-full animate-spin border-foreground border-t-transparent" }) }))] })) })] }), viewMode === "list" && (_jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-border mt-4", children: [_jsx(DataTablePageSize, {}), _jsx(DataTablePagination, { totalPages: totalPages !== null && totalPages !== void 0 ? totalPages : 0, currentPage: currentPage !== null && currentPage !== void 0 ? currentPage : 0 })] }))] }));
+    return (_jsx(DataTable, { data: data, columns: columns, extraTools: extraTools }));
 }

package/dist/ikoncomponents/table/type.d.ts

@@ -1,34 +1,93 @@
-export interface ColumnDef<T> {
-    header: string | (() => React.ReactNode);
-    accessorKey?: keyof T;
-    cell?: (row: T) => React.ReactNode;
-}
-export interface DataTableProps<T> {
-    data: T[];
-    columns: ColumnDef<T>[];
-    keyExtractor: (row: T) => string | number;
-    onRowClick?: (row: T) => void;
-    groupedColumns?: string[];
-    onToggleGroup?: (columnHeader: string) => void;
-}
+import type { ColumnDef, PaginationState } from "@tanstack/react-table";
+import type { ActionMenuProps } from "../action-menu/type";
 export interface DataTableLayoutProps<T> {
     data: T[];
-    columns: ColumnDef<T>[];
+    columns: ColumnsProps<T, unknown>[];
     extraTools?: ExtraPrams<T>;
 }
 export type ExtraPrams<T> = {
-    keyExtractor: (row: T) => string | number;
-    totalPages: number;
-    currentPage: number;
-    filterComponent?: React.ReactNode;
+    /** Total page count. When omitted, it's derived from `data.length / pageSize` (10/page default). */
+    totalPages?: number;
+    /**
+     * Server-side (pageable) pagination. When true, the table renders `data` as-is
+     * (already paged by your API) and emits `onPaginationChange` so the parent can
+     * fetch the next page. When false/undefined (default) the table receives the
+     * full `data` and paginates client-side — i.e. "call all data" mode.
+     */
+    manualPagination?: boolean;
+    /** Initial page index (0-based). Defaults to 0. */
+    pageIndex?: number;
+    /** Initial / current page size. Defaults to 10. */
+    pageSize?: number;
+    /** Fired whenever the page index or size changes — use it to fetch from your API. */
+    onPaginationChange?: (state: PaginationState) => void;
+    toggleViewMode?: boolean;
+    hiddenColumns?: string[];
     actionNode?: React.ReactNode;
-    onRowClick?: (row: T) => void;
+    actionMenu?: TableActionMenuProps;
+    groupActionMenu?: TableActionMenuProps;
     gridComponent?: (data: T[]) => React.ReactNode;
     isLoading?: boolean;
     onReload?: () => void;
-    themeColor?: string;
-    onLoadMore?: () => void;
-    hasMore?: boolean;
-    onFilterChange?: (filters: Record<string, string[]>) => void;
-    unfilteredData?: T[];
+    /** Enable default grouping. When true, the table is grouped by `groupedValue` on first render. */
+    grouping?: boolean;
+    /** Column id(s) to group by initially (used when `grouping` is true). */
+    groupedValue?: string[];
+    showFooter?: boolean;
+    footerLabel?: string;
+    /** Max height of the scrollable content (shared by list & grid view), e.g. "500px" or "60vh". */
+    tableHeight?: string;
+    /**
+     * Dynamic footer definition. Each entry is one footer row, so the footer can
+     * show multiple labels / summary rows. When provided (non-empty) it takes
+     * precedence over the column-level `footer` definitions used by `showFooter`.
+     */
+    footerRows?: FooterRowConfig<T>[];
+    fileName?: string;
+};
+/** Built-in single-column aggregations available to a footer cell. */
+export type FooterAggregate = "sum" | "avg" | "min" | "max" | "count";
+/** Arithmetic operations for combining several columns in a footer cell. */
+export type FooterOperation = "add" | "subtract" | "multiply" | "divide";
+/**
+ * Definition of a single footer cell. Use a plain string for a static label,
+ * or an object to aggregate one column / combine several columns arithmetically.
+ */
+export type FooterCellConfig<T> = string | {
+    /** Aggregate a single column's numeric values. */
+    aggregate?: FooterAggregate;
+    /** Column key to aggregate (defaults to the column this cell sits under). */
+    column?: string;
+    /** Combine the sums of multiple columns with an arithmetic operation. */
+    operation?: FooterOperation;
+    /** Column keys used by `operation`, combined left-to-right. */
+    columns?: string[];
+    /** Decimal places for numeric output (defaults to locale formatting). */
+    decimals?: number;
+    /** Text rendered before the value. */
+    prefix?: string;
+    /** Text rendered after the value. */
+    suffix?: string;
+    /** Full custom renderer; receives the filtered row data. Overrides the above. */
+    render?: (rows: T[]) => React.ReactNode;
+    /** Extra class names applied to the footer cell. */
+    className?: string;
+};
+/** Definition of one footer row, with cells keyed by column id / accessorKey. */
+export type FooterRowConfig<T> = {
+    /** Cell definitions keyed by column id / accessorKey. */
+    cells: Record<string, FooterCellConfig<T>>;
+    /** Extra class names applied to the footer row. */
+    className?: string;
+};
+export type ColumnsProps<TData, TValue = unknown> = ColumnDef<TData, TValue> & {
+    header: string | (() => React.ReactNode);
+    footer?: (row: TData) => React.ReactNode;
+    filterFns?: string | "multiSelect";
+    draggable?: boolean | undefined;
+    headerClassName?: string;
+};
+export type TableActionMenuProps = {
+    items: ActionMenuProps[];
+    extraArguments?: any[];
 };

package/dist/ikoncomponents/table/type.js

@@ -1,8 +1 @@
-// export interface DataTableLayoutProps<T> {
-//   data: T[];
-//   columns: ColumnDef<T>[];
-//   keyExtractor: (row: T) => string | number;
-//   totalPages: number;
-//   currentPage: number;
-;
 export {};

package/dist/ikoncomponents/tabs/index.d.ts

@@ -1,2 +1,3 @@
 import { TabProps } from "./type";
-export declare function CustomTabs({ children, tabArray, pathName, tabListClass, tabListInnerClass, tabListButtonClass, tabContentClass, headerEndComponent, onTabChange, isSeperatePage, }: TabProps): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export declare function CustomTabs({ children, tabArray, pathName, tabListClass, tabListInnerClass, tabListButtonClass, tabContentClass, headerEndComponent, onTabChange, isSeperatePage, }: TabProps): React.JSX.Element;

package/dist/ikoncomponents/theme-toggle-btn/index.d.ts

@@ -1 +1 @@
-export declare function ThemeToggleBtn(): import("react/jsx-runtime").JSX.Element | null;
+export declare function ThemeToggleBtn(): import("react").JSX.Element | null;

package/dist/ikoncomponents/title-progress/index.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 interface Props {
     title: string;
     value: number;
@@ -8,5 +9,5 @@ interface Props {
     valueClassName?: string;
     progressClassName?: string;
 }
-export declare function TitleProgress({ title, value, valueText, isPercent, className, titleClassName, valueClassName, progressClassName }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function TitleProgress({ title, value, valueText, isPercent, className, titleClassName, valueClassName, progressClassName }: Props): React.JSX.Element;
 export {};

package/dist/ikoncomponents/tooltip/index.d.ts

@@ -2,4 +2,4 @@ import * as React from "react";
 export declare function TooltipComponent({ tooltipContent, children }: {
     tooltipContent: string | React.ReactNode;
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/ikoncomponents/twolevel-dropdown/index.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 export interface FrameworkEntry {
     id: string;
     index: string;
@@ -27,5 +28,5 @@ interface FrameworkItemDropdownProps {
     searchPlaceholder?: string;
     className?: string;
 }
-export declare function FrameworkItemDropdown({ processedData, value, onChange, placeholder, searchPlaceholder, className, }: FrameworkItemDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function FrameworkItemDropdown({ processedData, value, onChange, placeholder, searchPlaceholder, className, }: FrameworkItemDropdownProps): React.JSX.Element;
 export {};

package/dist/ikoncomponents/upload-tab/index.d.ts

@@ -1 +1 @@
-export declare function UploadTab(): import("react/jsx-runtime").JSX.Element;
+export declare function UploadTab(): import("react").JSX.Element;

package/dist/ikoncomponents/widgets/index.d.ts

@@ -1,2 +1,3 @@
+import * as React from "react";
 import { WidgetsFunctionProps } from "./type";
-export declare function Widgets({ widgetData }: WidgetsFunctionProps): import("react/jsx-runtime").JSX.Element;
+export declare function Widgets({ widgetData }: WidgetsFunctionProps): React.JSX.Element;

package/dist/ikoncomponents/work-in-progress/index.d.ts

@@ -1 +1,2 @@
-export declare function WorkInProgress(): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export declare function WorkInProgress(): React.JSX.Element;

package/dist/index.d.ts

@@ -59,7 +59,7 @@ export { getDataTableColumnTitle } from "./ikoncomponents/data-table/function";
 export { DataTable } from "./ikoncomponents/data-table";
 export type { DataTableProps, DTColumnsProps, DTExtraParamsProps, DTActionMenuProps, DataTableViewOptionsProps, DTToolBarProps, DataTableFilterProps, DataTableFacetedFilterProps, DataTablePaginationProps, DragDropHeaderProp, } from "./ikoncomponents/data-table/type";
 export { DataTableLayout } from "./ikoncomponents/table";
-export type { DataTableLayoutProps, ColumnDef } from "./ikoncomponents/table/type";
+export type { DataTableLayoutProps, ExtraPrams, ColumnsProps } from "./ikoncomponents/table/type";
 export { Reload } from "./ikoncomponents/reload-component";
 export { EChart } from "./ikoncomponents/e-chart";
 export { FileInput } from "./ikoncomponents/file-input";

package/dist/shadcn/accordion.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };