@tirth_jasoliya/ui 1.0.5 → 1.0.7

package/dist/components/data/data-template/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/data/data-template/index.ts","../../../../src/components/data/data-template/data-template.tsx","../../../../src/lib/utils.ts","../../../../src/components/ui/card.tsx","../../../../src/components/ui/button.tsx","../../../../src/components/ui/checkbox.tsx","../../../../src/components/data/data-template/data-template-toolbar.tsx","../../../../src/components/ui/input.tsx","../../../../src/components/ui/dropdown-menu.tsx","../../../../src/components/ui/select.tsx","../../../../src/components/data/data-template/data-template-pagination.tsx","../../../../src/components/ui/separator.tsx","../../../../src/components/ui/tooltip.tsx","../../../../src/components/data/data-template/data-template-action-bar.tsx"],"sourcesContent":["export { DataTemplate } from \"./data-template.jsx\"\r\nexport { DataTemplateToolbar } from \"./data-template-toolbar.jsx\"\r\nexport { DataTemplateActionBar, DataTemplateActionBarAction, DataTemplateActionBarSelection } from \"./data-template-action-bar.jsx\"\r\n\r\nexport type {\r\n  DataTemplateType,\r\n  DataTemplateActionBarActionProps,\r\n  DataTemplateActionBarProps,\r\n  DataTemplateController,\r\n  DataTemplateField,\r\n  DataTemplateFilter,\r\n  DataTemplatePagination,\r\n  DataTemplatePaginationConfig,\r\n  DataTemplateProps,\r\n  DataTemplateSettings\r\n} from \"./data-template-types.js\"","import { useState, useEffect, useMemo, useCallback, useRef } from \"react\"\r\nimport { Loader2 } from \"lucide-react\"\r\nimport { Card, CardContent } from \"../../ui/card.jsx\"\r\nimport { Button } from \"../../ui/button.jsx\"\r\nimport { Checkbox } from \"../../ui/checkbox.jsx\"\r\nimport { cn } from \"../../../lib/utils.js\"\r\nimport type {\r\n  DataTemplateProps,\r\n  DataTemplateController,\r\n  DataTemplateSettings,\r\n} from \"./data-template-types.js\"\r\nimport { DataTemplateToolbar } from \"./data-template-toolbar.jsx\"\r\nimport { DataTemplatePagination } from \"./data-template-pagination.jsx\"\r\n\r\nexport function DataTemplate<T extends Record<string, any>>({\r\n  data,\r\n  template,\r\n  fields = [],\r\n  filters = [],\r\n  pagination = { enabled: false },\r\n  settings = {},\r\n  header,\r\n  footer,\r\n  className = \"\",\r\n  loading = false,\r\n  error,\r\n  emptyMessage = \"No items found\",\r\n  emptyIcon,\r\n  onSelectionChange,\r\n  onExport,\r\n  onRefresh,\r\n  onTemplateReady,\r\n  children,\r\n}: DataTemplateProps<T>) {\r\n  const {\r\n    enableSorting = true,\r\n    enableFiltering = true,\r\n    enableGlobalSearch = true,\r\n    enableSelection = false,\r\n    enableExport = false,\r\n    toolbar = true,\r\n    selectionMode = \"multiple\",\r\n    gridCols = { default: 3, sm: 1, md: 2, lg: 3, xl: 4, \"2xl\": 6 },\r\n    gap = 4,\r\n    aspectRatio = \"auto\",\r\n    minCardWidth = 350,\r\n    maxCardWidth = 350,\r\n  } = settings as Required<DataTemplateSettings>\r\n\r\n  const [globalFilter, setGlobalFilter] = useState(\"\")\r\n  const [fieldFilters, setFieldFilters] = useState<Partial<Record<keyof T, any>>>({})\r\n  const [sortField, setSortField] = useState<keyof T | \"\">(\"\")\r\n  const [sortDirection, setSortDirection] = useState<\"asc\" | \"desc\">(\"asc\")\r\n  const [selectedItems, setSelectedItems] = useState<Set<number>>(new Set())\r\n  const [currentPage, setCurrentPage] = useState(1)\r\n  const [pageSize, setPageSize] = useState(pagination.pageSize || 12)\r\n  const [currentGridCols, setCurrentGridCols] = useState(gridCols.default)\r\n\r\n  const filteredAndSortedData = useMemo(() => {\r\n    let result = [...data]\r\n\r\n    if (enableGlobalSearch && globalFilter) {\r\n      const searchableFields = fields.filter((field) => field.searchable !== false)\r\n      result = result.filter((item) =>\r\n        searchableFields.some((field) => {\r\n          const value = item[field.key]\r\n          return value?.toString().toLowerCase().includes(globalFilter.toLowerCase())\r\n        }),\r\n      )\r\n    }\r\n\r\n    if (enableFiltering) {\r\n      (Object.keys(fieldFilters) as Array<keyof T>).forEach((key) => {\r\n        const value = fieldFilters[key]\r\n        if (value !== undefined && value !== null && value !== \"\") {\r\n          const field = fields.find((f) => f.key === key)\r\n          if (field) {\r\n            result = result.filter((item) => {\r\n              const itemValue = item[key]\r\n              if (field.type === \"boolean\") {\r\n                return itemValue === (value === \"true\")\r\n              } else if (field.type === \"number\") {\r\n                return itemValue === Number(value)\r\n              } else {\r\n                return itemValue?.toString().toLowerCase().includes(String(value).toLowerCase())\r\n              }\r\n            })\r\n          }\r\n        }\r\n      })\r\n    }\r\n\r\n    if (enableSorting && sortField) {\r\n      const field = fields.find((f) => f.key === sortField)\r\n      if (field) {\r\n        result.sort((a, b) => {\r\n          const aValue = a[sortField]\r\n          const bValue = b[sortField]\r\n\r\n          if (field.type === \"number\") {\r\n            return sortDirection === \"asc\" ? Number(aValue) - Number(bValue) : Number(bValue) - Number(aValue)\r\n          } else if (field.type === \"date\") {\r\n            const aDate = new Date(aValue)\r\n            const bDate = new Date(bValue)\r\n            return sortDirection === \"asc\" ? aDate.getTime() - bDate.getTime() : bDate.getTime() - aDate.getTime()\r\n          } else {\r\n            const aStr = String(aValue).toLowerCase()\r\n            const bStr = String(bValue).toLowerCase()\r\n            return sortDirection === \"asc\" ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr)\r\n          }\r\n        })\r\n      }\r\n    }\r\n    return result\r\n  }, [\r\n    data,\r\n    globalFilter,\r\n    fieldFilters,\r\n    sortField,\r\n    sortDirection,\r\n    fields,\r\n    enableGlobalSearch,\r\n    enableFiltering,\r\n    enableSorting,\r\n  ])\r\n\r\n  const paginatedData = useMemo(() => {\r\n    if (!pagination.enabled) return filteredAndSortedData\r\n\r\n    const startIndex = (currentPage - 1) * pageSize\r\n    const endIndex = startIndex + pageSize\r\n    return filteredAndSortedData.slice(startIndex, endIndex)\r\n  }, [filteredAndSortedData, currentPage, pageSize, pagination.enabled])\r\n\r\n  const totalPages = Math.ceil(filteredAndSortedData.length / pageSize)\r\n\r\n  const handleToggleSelect = useCallback(\r\n    (index: number) => {\r\n      if (!enableSelection) return\r\n\r\n      setSelectedItems((prev) => {\r\n        const newSelection = new Set(prev)\r\n        if (selectionMode === \"single\") {\r\n          newSelection.clear()\r\n          newSelection.add(index)\r\n        } else {\r\n          if (newSelection.has(index)) {\r\n            newSelection.delete(index)\r\n          } else {\r\n            newSelection.add(index)\r\n          }\r\n        }\r\n        return newSelection\r\n      })\r\n    },\r\n    [enableSelection, selectionMode],\r\n  )\r\n\r\n  const handleSelectAll = useCallback(() => {\r\n    if (!enableSelection || selectionMode === \"single\") return\r\n\r\n    if (selectedItems.size === filteredAndSortedData.length) {\r\n      setSelectedItems(new Set())\r\n    } else {\r\n      setSelectedItems(new Set(filteredAndSortedData.map((_, index) => index)))\r\n    }\r\n  }, [enableSelection, selectionMode, selectedItems.size, filteredAndSortedData.length])\r\n\r\n  const handleFieldFilterChange = useCallback((key: keyof T, value: any) => {\r\n    setFieldFilters((prev) => ({ ...prev, [key]: value }))\r\n    setCurrentPage(1)\r\n  }, [])\r\n\r\n  const handleSortChange = useCallback((field: keyof T, direction: \"asc\" | \"desc\") => {\r\n    setSortField(field)\r\n    setSortDirection(direction)\r\n  }, [])\r\n\r\n  const handleClearFilters = useCallback(() => {\r\n    setGlobalFilter(\"\")\r\n    setFieldFilters({})\r\n    setCurrentPage(1)\r\n  }, [])\r\n\r\n  const handleClearSorting = useCallback(() => {\r\n    setSortField(\"\")\r\n    setSortDirection(\"asc\")\r\n  }, [])\r\n\r\n  const controller: DataTemplateController<T> = useMemo(\r\n    () => ({\r\n      getSelectedItems: () => Array.from(selectedItems).map((index) => filteredAndSortedData[index]),\r\n      clearSelection: () => setSelectedItems(new Set()),\r\n      selectAll: handleSelectAll,\r\n      getFilteredData: () => filteredAndSortedData,\r\n      getTotalCount: () => data.length,\r\n      getVisibleCount: () => filteredAndSortedData.length,\r\n      refresh: () => onRefresh?.(),\r\n      exportData: () => onExport?.(filteredAndSortedData),\r\n    }),\r\n    [selectedItems, filteredAndSortedData, data.length, handleSelectAll, onRefresh, onExport],\r\n  )\r\n\r\n  const controllerRef = useRef<DataTemplateController<T> | null>(null)\r\n  controllerRef.current = controller\r\n\r\n  useEffect(() => {\r\n    if (onTemplateReady && controllerRef.current) {\r\n      onTemplateReady(controllerRef.current)\r\n    }\r\n  }, [])\r\n\r\n  useEffect(() => {\r\n    if (enableSelection && onSelectionChange) {\r\n      const selected = Array.from(selectedItems).map((index) => filteredAndSortedData[index])\r\n      onSelectionChange(selected)\r\n    }\r\n  }, [selectedItems])\r\n\r\n  // const gridClasses = cn(\r\n  //   \"grid gap-4\",\r\n  //   `grid-cols-${gridCols.sm || 1} sm:grid-cols-${gridCols.md || 2} md:grid-cols-${gridCols.lg || 3} lg:grid-cols-${gridCols.xl || 4} xl:grid-cols-${gridCols[\"2xl\"] || 6}`,\r\n  //   `gap-${gap}`,\r\n  // )\r\n\r\n  const gridContainerClasses = cn(\r\n    \"w-full\",\r\n    \"overflow-hidden\", // Prevent any potential overflow issues\r\n    className\r\n  );\r\n\r\n  const gridClasses = cn(\r\n    \"grid\",\r\n    `gap-${gap}`,\r\n    \"w-full\", // Ensure grid takes full width\r\n    \"mx-auto\", // Center the grid if it doesn't take full width\r\n    \"items-start\", // Align items to the top\r\n  );\r\n\r\n  const gridStyle = {\r\n    // Primary grid definition - choose one of these options:\r\n\r\n    gridTemplateColumns:\r\n      currentGridCols === 0\r\n        ? `repeat(auto-fill, minmax(clamp(${minCardWidth}px, 30%, ${maxCardWidth}px), 1fr))`\r\n        : `repeat(auto-fill, minmax(clamp(${minCardWidth}px, calc(100%/${currentGridCols} - ${gap * 4}px), ${maxCardWidth}px), 1fr))`,\r\n\r\n    // gridTemplateColumns: `repeat(auto-fill, minmax(clamp(${minCardWidth}px, calc(100%/${Math.min(\r\n    //   currentGridCols,\r\n    //   gridCols[\"2xl\"] || 6\r\n    // )} - ${gap * 4}px), ${maxCardWidth}px))`,\r\n\r\n    // Option 1: Fully fluid grid (recommended)\r\n    // gridTemplateColumns: `repeat(auto-fill, minmax(clamp(${minCardWidth}px, 30%, ${maxCardWidth}px), 1fr))`,\r\n\r\n    // Option 2: More controlled fluid grid\r\n    // gridTemplateColumns: `repeat(auto-fit, minmax(clamp(${minCardWidth}px, 25vw, ${maxCardWidth}px), 1fr))`,\r\n\r\n    // Option 3: Fixed maximum columns with fluid width\r\n    // gridTemplateColumns: `repeat(min(6, auto-fill), minmax(${minCardWidth}px, ${maxCardWidth}px))`,\r\n\r\n    // Additional grid enhancements\r\n    justifyItems: \"center\", // Center items horizontally in their grid cells\r\n    alignItems: \"stretch\", // Stretch items vertically to fill the grid cell\r\n    gridAutoRows: \"1fr\", // Make all rows the same height\r\n    gridAutoFlow: \"dense\", // Try to fill holes in the grid\r\n  };\r\n\r\n  if (error) {\r\n    return (\r\n      <Card className=\"w-full\">\r\n        <CardContent className=\"flex items-center justify-center py-12\">\r\n          <div className=\"text-center\">\r\n            <div className=\"text-red-500 mb-3 text-2xl\">⚠️</div>\r\n            <p className=\"text-sm text-muted-foreground mb-4\">{error}</p>\r\n            {onRefresh && (\r\n              <Button variant=\"outline\" size=\"sm\" onClick={onRefresh}>\r\n                <Loader2 className=\"mr-2 h-4 w-4\" />\r\n                Try Again\r\n              </Button>\r\n            )}\r\n          </div>\r\n        </CardContent>\r\n      </Card>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div className={cn(\"w-full flex gap-2 flex-col h-full\", gridContainerClasses)}>\r\n      {/* Header */}\r\n      {header && (\r\n        <Card className=\"shadow-sm border-0 py-0 text-xl font-bold\">\r\n          <CardContent className=\"p-2\">{header}</CardContent>\r\n        </Card>\r\n      )}\r\n\r\n      {/* Toolbar */}\r\n      {toolbar && (\r\n        <DataTemplateToolbar<T>\r\n          fields={fields}\r\n          filters={filters}\r\n          globalFilter={globalFilter}\r\n          onGlobalFilterChange={setGlobalFilter}\r\n          fieldFilters={fieldFilters}\r\n          onFieldFilterChange={handleFieldFilterChange}\r\n          sortField={sortField}\r\n          sortDirection={sortDirection}\r\n          onSortChange={handleSortChange}\r\n          selectedCount={selectedItems.size}\r\n          totalCount={data.length}\r\n          visibleCount={filteredAndSortedData.length}\r\n          onExport={enableExport ? () => onExport?.(filteredAndSortedData) : undefined}\r\n          onRefresh={onRefresh}\r\n          loading={loading}\r\n          // gridCols={currentGridCols}\r\n          // onGridColsChange={setCurrentGridCols}\r\n          onClearFilters={handleClearFilters}\r\n          onClearSorting={handleClearSorting}\r\n        />\r\n      )}\r\n\r\n      {/* Main Content */}\r\n      <Card className=\"border-0 overflow-auto shadow-none py-0 p-2 flex-1\">\r\n        <CardContent className=\"px-0\">\r\n          <div className=\"relative\">\r\n            {loading && (\r\n              <div className=\"absolute inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center rounded-lg\">\r\n                <div className=\"flex items-center gap-3 bg-background/90 px-4 py-3 rounded-lg shadow-sm\">\r\n                  <Loader2 className=\"size-5 animate-spin text-primary\" />\r\n                  <span className=\"text-sm font-medium text-muted-foreground\">Loading...</span>\r\n                </div>\r\n              </div>\r\n            )}\r\n\r\n            {paginatedData.length > 0 ? (\r\n              <div\r\n                className={cn(gridClasses)}\r\n                // style={{\r\n                //   gridTemplateColumns: `repeat(${currentGridCols}, minmax(${minCardWidth}px, ${maxCardWidth}px))`,\r\n                //   justifyContent: \"center\",\r\n                // }}\r\n                style={gridStyle}\r\n              >\r\n                {paginatedData.map((item, index) => {\r\n                  const globalIndex = pagination.enabled ? (currentPage - 1) * pageSize + index : index\r\n                  const isSelected = selectedItems.has(globalIndex)\r\n\r\n                  return (\r\n                    <div\r\n                      key={globalIndex}\r\n                      className={cn(\r\n                        \"relative h-full w-full flex flex-col\",\r\n                        \"transition-all duration-200 overflow-hidden\",\r\n                        \"rounded-2xl\",\r\n                        \"border border-border/20 hover:border-border/50\",\r\n                        aspectRatio === \"square\" ? \"aspect-square\" : \"\",\r\n                        aspectRatio === \"video\" ? \"aspect-video\" : \"\",\r\n                        enableSelection ? \"cursor-pointer\" : \"\",\r\n                        isSelected ? \"ring-2 ring-primary\" : \"\"\r\n                      )}\r\n                      onClick={() => enableSelection && handleToggleSelect(globalIndex)}\r\n                    >\r\n                      {enableSelection && selectionMode === \"multiple\" && (\r\n                        <div className=\"absolute top-2 right-2 z-10\">\r\n                          <Checkbox\r\n                            checked={isSelected}\r\n                            onCheckedChange={() => handleToggleSelect(globalIndex)}\r\n                            className=\"bg-background/80 backdrop-blur-sm\"\r\n                            onClick={(e) => e.stopPropagation()}\r\n                          />\r\n                        </div>\r\n                      )}\r\n                      {template(item, index, isSelected, () => handleToggleSelect(globalIndex))}\r\n                    </div>\r\n                  )\r\n                })}\r\n              </div>\r\n            ) : (\r\n              <div className=\"flex flex-col gap-4 items-center justify-center py-12 text-center\">\r\n                <div className=\"text-6xl\">{emptyIcon || \"📋\"}</div>\r\n                <p className=\"text-lg font-medium text-muted-foreground mb-2\">{emptyMessage}</p>\r\n                {(globalFilter || Object.values(fieldFilters).some((v) => v)) && (\r\n                  <Button variant=\"outline\" onClick={handleClearFilters}>\r\n                    Clear Filters\r\n                  </Button>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </CardContent>\r\n      </Card>\r\n\r\n      {/* Pagination */}\r\n      {pagination.enabled && (\r\n        <div className=\"pb-1\">\r\n          <DataTemplatePagination\r\n            currentPage={currentPage}\r\n            totalPages={totalPages}\r\n            pageSize={pageSize}\r\n            totalItems={filteredAndSortedData.length}\r\n            onPageChange={setCurrentPage}\r\n            onPageSizeChange={(size) => {\r\n              setPageSize(size)\r\n              setCurrentPage(1)\r\n            }}\r\n            config={pagination}\r\n          />\r\n        </div>\r\n      )}\r\n\r\n      {/* Footer */}\r\n      {footer && (\r\n        <div className=\"p-2 m-0.5\">\r\n          {footer}\r\n        </div>\r\n      )}\r\n\r\n      {/* Children with controller */}\r\n      {children && children(controller)}\r\n    </div>\r\n  )\r\n}\r\n\r\n\r\n\r\n// import { useState, useEffect, useMemo, useCallback, useRef } from \"react\"\r\n// import { Loader2 } from \"lucide-react\"\r\n// import { Card, CardContent } from \"../../ui/card\"\r\n// import { Button } from \"../../ui/button\"\r\n// import { Checkbox } from \"../../ui/checkbox\"\r\n// import { cn } from \"@/lib/utils\"\r\n// import { TemplateRepeaterToolbar } from \"./template-repeater-toolbar\"\r\n// import { TemplateRepeaterPagination } from \"./template-repeater-pagination\"\r\n// import type {\r\n//   TemplateRepeaterProps,\r\n//   TemplateRepeaterController,\r\n//   TemplateRepeaterSettings,\r\n//   TemplateRepeaterField,\r\n//   TemplateRepeaterFilter,\r\n// } from \"./template-repeater-types\"\r\n\r\n// export function TemplateRepeater<T extends Record<string, any>>({\r\n//   data,\r\n//   template,\r\n//   fields = [],\r\n//   filters = [],\r\n//   pagination = { enabled: false },\r\n//   settings = {},\r\n//   header,\r\n//   footer,\r\n//   className = \"\",\r\n//   loading = false,\r\n//   error,\r\n//   emptyMessage = \"No items found\",\r\n//   emptyIcon,\r\n//   onSelectionChange,\r\n//   onExport,\r\n//   onRefresh,\r\n//   onTemplateReady,\r\n//   children,\r\n// }: TemplateRepeaterProps<T>) {\r\n//   const {\r\n//     enableSorting = true,\r\n//     enableFiltering = true,\r\n//     enableGlobalSearch = true,\r\n//     enableSelection = false,\r\n//     enableExport = false,\r\n//     toolbar = true,\r\n//     selectionMode = \"multiple\",\r\n//     gridCols = { default: 3, sm: 1, md: 2, lg: 3, xl: 4, \"2xl\": 6 },\r\n//     gap = 4,\r\n//     aspectRatio = \"auto\",\r\n//     minCardWidth = 300,\r\n//     maxCardWidth = 400,\r\n//   } = settings as Required<TemplateRepeaterSettings>\r\n\r\n//   const [globalFilter, setGlobalFilter] = useState(\"\")\r\n//   const [fieldFilters, setFieldFilters] = useState<Partial<Record<keyof T, any>>>({})\r\n//   const [sortField, setSortField] = useState<keyof T | \"\">(\"\")\r\n//   const [sortDirection, setSortDirection] = useState<\"asc\" | \"desc\">(\"asc\")\r\n//   const [selectedItems, setSelectedItems] = useState<Set<number>>(new Set())\r\n//   const [currentPage, setCurrentPage] = useState(1)\r\n//   const [pageSize, setPageSize] = useState(pagination.pageSize || 12)\r\n//   const [currentGridCols, setCurrentGridCols] = useState(gridCols.default)\r\n\r\n//   const filteredAndSortedData = useMemo(() => {\r\n//     let result = [...data]\r\n\r\n//     if (enableGlobalSearch && globalFilter) {\r\n//       const searchableFields = fields.filter((field) => field.searchable !== false)\r\n//       result = result.filter((item) =>\r\n//         searchableFields.some((field) => {\r\n//           const value = item[field.key]\r\n//           return value?.toString().toLowerCase().includes(globalFilter.toLowerCase())\r\n//         }),\r\n//       )\r\n//     }\r\n\r\n//     if (enableFiltering) {\r\n//       (Object.keys(fieldFilters) as Array<keyof T>).forEach((key) => {\r\n//         const value = fieldFilters[key]\r\n//         if (value !== undefined && value !== null && value !== \"\") {\r\n//           const field = fields.find((f) => f.key === key)\r\n//           if (field) {\r\n//             result = result.filter((item) => {\r\n//               const itemValue = item[key]\r\n//               if (field.type === \"boolean\") {\r\n//                 return itemValue === (value === \"true\")\r\n//               } else if (field.type === \"number\") {\r\n//                 return itemValue === Number(value)\r\n//               } else {\r\n//                 return itemValue?.toString().toLowerCase().includes(String(value).toLowerCase())\r\n//               }\r\n//             })\r\n//           }\r\n//         }\r\n//       })\r\n//     }\r\n\r\n//     if (enableSorting && sortField) {\r\n//       const field = fields.find((f) => f.key === sortField)\r\n//       if (field) {\r\n//         result.sort((a, b) => {\r\n//           const aValue = a[sortField]\r\n//           const bValue = b[sortField]\r\n\r\n//           if (field.type === \"number\") {\r\n//             return sortDirection === \"asc\" ? Number(aValue) - Number(bValue) : Number(bValue) - Number(aValue)\r\n//           } else if (field.type === \"date\") {\r\n//             const aDate = new Date(aValue)\r\n//             const bDate = new Date(bValue)\r\n//             return sortDirection === \"asc\" ? aDate.getTime() - bDate.getTime() : bDate.getTime() - aDate.getTime()\r\n//           } else {\r\n//             const aStr = String(aValue).toLowerCase()\r\n//             const bStr = String(bValue).toLowerCase()\r\n//             return sortDirection === \"asc\" ? aStr.localeCompare(bStr) : bStr.localeCompare(aStr)\r\n//           }\r\n//         })\r\n//       }\r\n//     }\r\n\r\n//     return result\r\n//   }, [\r\n//     data,\r\n//     globalFilter,\r\n//     fieldFilters,\r\n//     sortField,\r\n//     sortDirection,\r\n//     fields,\r\n//     enableGlobalSearch,\r\n//     enableFiltering,\r\n//     enableSorting,\r\n//   ])\r\n\r\n//   const paginatedData = useMemo(() => {\r\n//     if (!pagination.enabled) return filteredAndSortedData\r\n\r\n//     const startIndex = (currentPage - 1) * pageSize\r\n//     const endIndex = startIndex + pageSize\r\n//     return filteredAndSortedData.slice(startIndex, endIndex)\r\n//   }, [filteredAndSortedData, currentPage, pageSize, pagination.enabled])\r\n\r\n//   const totalPages = Math.ceil(filteredAndSortedData.length / pageSize)\r\n\r\n//   const handleToggleSelect = useCallback(\r\n//     (index: number) => {\r\n//       if (!enableSelection) return\r\n\r\n//       setSelectedItems((prev) => {\r\n//         const newSelection = new Set(prev)\r\n//         if (selectionMode === \"single\") {\r\n//           newSelection.clear()\r\n//           newSelection.add(index)\r\n//         } else {\r\n//           if (newSelection.has(index)) {\r\n//             newSelection.delete(index)\r\n//           } else {\r\n//             newSelection.add(index)\r\n//           }\r\n//         }\r\n//         return newSelection\r\n//       })\r\n//     },\r\n//     [enableSelection, selectionMode],\r\n//   )\r\n\r\n//   const handleSelectAll = useCallback(() => {\r\n//     if (!enableSelection || selectionMode === \"single\") return\r\n\r\n//     if (selectedItems.size === filteredAndSortedData.length) {\r\n//       setSelectedItems(new Set())\r\n//     } else {\r\n//       setSelectedItems(new Set(filteredAndSortedData.map((_, index) => index)))\r\n//     }\r\n//   }, [enableSelection, selectionMode, selectedItems.size, filteredAndSortedData.length])\r\n\r\n//   const handleFieldFilterChange = useCallback((key: keyof T, value: any) => {\r\n//     setFieldFilters((prev) => ({ ...prev, [key]: value }))\r\n//     setCurrentPage(1)\r\n//   }, [])\r\n\r\n//   const handleSortChange = useCallback((field: keyof T, direction: \"asc\" | \"desc\") => {\r\n//     setSortField(field)\r\n//     setSortDirection(direction)\r\n//   }, [])\r\n\r\n//   const handleClearFilters = useCallback(() => {\r\n//     setGlobalFilter(\"\")\r\n//     setFieldFilters({})\r\n//     setCurrentPage(1)\r\n//   }, [])\r\n\r\n//   const handleClearSorting = useCallback(() => {\r\n//     setSortField(\"\")\r\n//     setSortDirection(\"asc\")\r\n//   }, [])\r\n\r\n//   const controller: TemplateRepeaterController<T> = useMemo(\r\n//     () => ({\r\n//       getSelectedItems: () => Array.from(selectedItems).map((index) => filteredAndSortedData[index]),\r\n//       clearSelection: () => setSelectedItems(new Set()),\r\n//       selectAll: handleSelectAll,\r\n//       getFilteredData: () => filteredAndSortedData,\r\n//       getTotalCount: () => data.length,\r\n//       getVisibleCount: () => filteredAndSortedData.length,\r\n//       refresh: () => onRefresh?.(),\r\n//       exportData: () => onExport?.(filteredAndSortedData),\r\n//     }),\r\n//     [selectedItems, filteredAndSortedData, data.length, handleSelectAll, onRefresh, onExport],\r\n//   )\r\n\r\n//   const controllerRef = useRef<TemplateRepeaterController<T> | null>(null)\r\n//   controllerRef.current = controller\r\n\r\n//   useEffect(() => {\r\n//     if (onTemplateReady && controllerRef.current) {\r\n//       onTemplateReady(controllerRef.current)\r\n//     }\r\n//   }, [])\r\n\r\n//   useEffect(() => {\r\n//     if (enableSelection && onSelectionChange) {\r\n//       const selected = Array.from(selectedItems).map((index) => filteredAndSortedData[index])\r\n//       onSelectionChange(selected)\r\n//     }\r\n//   }, [selectedItems])\r\n\r\n//   // const gridClasses = cn(\r\n//   //   \"grid gap-4\",\r\n//   //   `grid-cols-${gridCols.sm || 1} sm:grid-cols-${gridCols.md || 2} md:grid-cols-${gridCols.lg || 3} lg:grid-cols-${gridCols.xl || 4} xl:grid-cols-${gridCols[\"2xl\"] || 6}`,\r\n//   //   `gap-${gap}`,\r\n//   // )\r\n\r\n//   const gridContainerClasses = cn(\r\n//     \"w-full\",\r\n//     \"overflow-hidden\", // Prevent any potential overflow issues\r\n//     className\r\n//   );\r\n\r\n//   const gridClasses = cn(\r\n//     \"grid\",\r\n//     `gap-${gap}`,\r\n//     \"w-full\", // Ensure grid takes full width\r\n//     \"mx-auto\", // Center the grid if it doesn't take full width\r\n//     \"items-start\", // Align items to the top\r\n//   );\r\n\r\n//   const gridStyle = {\r\n//     // Primary grid definition - choose one of these options:\r\n\r\n//     gridTemplateColumns:\r\n//       currentGridCols === 0\r\n//         ? `repeat(auto-fill, minmax(clamp(${minCardWidth}px, 30%, ${maxCardWidth}px), 1fr))`\r\n//         : `repeat(auto-fill, minmax(clamp(${minCardWidth}px, calc(100%/${currentGridCols} - ${gap * 4}px), ${maxCardWidth}px), 1fr))`,\r\n\r\n//     // gridTemplateColumns: `repeat(auto-fill, minmax(clamp(${minCardWidth}px, calc(100%/${Math.min(\r\n//     //   currentGridCols,\r\n//     //   gridCols[\"2xl\"] || 6\r\n//     // )} - ${gap * 4}px), ${maxCardWidth}px))`,\r\n\r\n//     // Option 1: Fully fluid grid (recommended)\r\n//     // gridTemplateColumns: `repeat(auto-fill, minmax(clamp(${minCardWidth}px, 30%, ${maxCardWidth}px), 1fr))`,\r\n\r\n//     // Option 2: More controlled fluid grid\r\n//     // gridTemplateColumns: `repeat(auto-fit, minmax(clamp(${minCardWidth}px, 25vw, ${maxCardWidth}px), 1fr))`,\r\n\r\n//     // Option 3: Fixed maximum columns with fluid width\r\n//     // gridTemplateColumns: `repeat(min(6, auto-fill), minmax(${minCardWidth}px, ${maxCardWidth}px))`,\r\n\r\n//     // Additional grid enhancements\r\n//     justifyItems: \"center\", // Center items horizontally in their grid cells\r\n//     alignItems: \"stretch\", // Stretch items vertically to fill the grid cell\r\n//     gridAutoRows: \"1fr\", // Make all rows the same height\r\n//     gridAutoFlow: \"dense\", // Try to fill holes in the grid\r\n//   };\r\n\r\n//   if (error) {\r\n//     return (\r\n//       <Card className=\"w-full\">\r\n//         <CardContent className=\"flex items-center justify-center py-12\">\r\n//           <div className=\"text-center\">\r\n//             <div className=\"text-red-500 mb-3 text-2xl\">⚠️</div>\r\n//             <p className=\"text-sm text-muted-foreground mb-4\">{error}</p>\r\n//             {onRefresh && (\r\n//               <Button variant=\"outline\" size=\"sm\" onClick={onRefresh}>\r\n//                 <Loader2 className=\"mr-2 h-4 w-4\" />\r\n//                 Try Again\r\n//               </Button>\r\n//             )}\r\n//           </div>\r\n//         </CardContent>\r\n//       </Card>\r\n//     )\r\n//   }\r\n\r\n//   return (\r\n//     <div className={cn(\"w-full flex gap-2 flex-col h-full\", gridContainerClasses)}>\r\n//       {/* Header */}\r\n//       {header && (\r\n//         <Card className=\"shadow-sm border-0 bg-gradient-to-r from-background to-muted/20\">\r\n//           <CardContent className=\"p-6\">{header}</CardContent>\r\n//         </Card>\r\n//       )}\r\n\r\n//       {/* Toolbar */}\r\n//       {toolbar && (\r\n//         <TemplateRepeaterToolbar<T>\r\n//           fields={fields}\r\n//           filters={filters}\r\n//           globalFilter={globalFilter}\r\n//           onGlobalFilterChange={setGlobalFilter}\r\n//           fieldFilters={fieldFilters}\r\n//           onFieldFilterChange={handleFieldFilterChange}\r\n//           sortField={sortField}\r\n//           sortDirection={sortDirection}\r\n//           onSortChange={handleSortChange}\r\n//           selectedCount={selectedItems.size}\r\n//           totalCount={data.length}\r\n//           visibleCount={filteredAndSortedData.length}\r\n//           onExport={enableExport ? () => onExport?.(filteredAndSortedData) : undefined}\r\n//           onRefresh={onRefresh}\r\n//           loading={loading}\r\n//           gridCols={currentGridCols}\r\n//           onGridColsChange={setCurrentGridCols}\r\n//           onClearFilters={handleClearFilters}\r\n//           onClearSorting={handleClearSorting}\r\n//         />\r\n//       )}\r\n\r\n//       {/* Main Content */}\r\n//       <Card className=\"border-0 overflow-auto shadow-none py-0 p-2 flex-1\">\r\n//         <CardContent className=\"px-0 h-full\">\r\n//           <div className=\"relative flex-1 h-full\">\r\n//             {loading && (\r\n//               <div className=\"absolute inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center rounded-lg\">\r\n//                 <div className=\"flex items-center gap-3 bg-background/90 px-4 py-3 rounded-lg shadow-sm\">\r\n//                   <Loader2 className=\"size-5 animate-spin text-primary\" />\r\n//                   <span className=\"text-sm font-medium text-muted-foreground\">Loading...</span>\r\n//                 </div>\r\n//               </div>\r\n//             )}\r\n\r\n//             {paginatedData.length > 0 ? (\r\n//               <div\r\n//                 className={cn(gridClasses)}\r\n//                 // style={{\r\n//                 //   gridTemplateColumns: `repeat(${currentGridCols}, minmax(${minCardWidth}px, ${maxCardWidth}px))`,\r\n//                 //   justifyContent: \"center\",\r\n//                 // }}\r\n//                 style={gridStyle}\r\n//               >\r\n//                 {paginatedData.map((item, index) => {\r\n//                   const globalIndex = pagination.enabled ? (currentPage - 1) * pageSize + index : index\r\n//                   const isSelected = selectedItems.has(globalIndex)\r\n\r\n//                   return (\r\n//                     <div\r\n//                       key={globalIndex}\r\n//                       className={cn(\r\n//                         \"relative h-full w-full flex flex-col\",\r\n//                         \"transition-all duration-200 overflow-hidden\",\r\n//                         \"rounded-2xl\",\r\n//                         \"border border-border/20 hover:border-border/50\",\r\n//                         aspectRatio === \"square\" ? \"aspect-square\" : \"\",\r\n//                         aspectRatio === \"video\" ? \"aspect-video\" : \"\",\r\n//                         enableSelection ? \"cursor-pointer\" : \"\",\r\n//                         isSelected ? \"ring-2 ring-primary\" : \"\"\r\n//                       )}\r\n//                       onClick={() => enableSelection && handleToggleSelect(globalIndex)}\r\n//                     >\r\n//                       {enableSelection && (\r\n//                         <div className=\"absolute top-2 right-2 z-10\">\r\n//                           <Checkbox\r\n//                             checked={isSelected}\r\n//                             onCheckedChange={() => handleToggleSelect(globalIndex)}\r\n//                             className=\"bg-background/80 backdrop-blur-sm\"\r\n//                             onClick={(e) => e.stopPropagation()}\r\n//                           />\r\n//                         </div>\r\n//                       )}\r\n//                       {template(item, index, isSelected, () => handleToggleSelect(globalIndex))}\r\n//                     </div>\r\n//                   )\r\n//                 })}\r\n//               </div>\r\n//             ) : (\r\n//               <div className=\"flex flex-col items-center justify-center py-12 text-center h-full\">\r\n//                 <div className=\"text-6xl mb-4\">{emptyIcon || \"📋\"}</div>\r\n//                 <p className=\"text-lg font-medium text-muted-foreground mb-2\">{emptyMessage}</p>\r\n//                 {(globalFilter || Object.values(fieldFilters).some((v) => v)) && (\r\n//                   <Button variant=\"outline\" onClick={handleClearFilters}>\r\n//                     Clear Filters\r\n//                   </Button>\r\n//                 )}\r\n//               </div>\r\n//             )}\r\n//           </div>\r\n//         </CardContent>\r\n//       </Card>\r\n\r\n//       {/* Pagination */}\r\n//       {pagination.enabled && (\r\n//         <TemplateRepeaterPagination\r\n//           currentPage={currentPage}\r\n//           totalPages={totalPages}\r\n//           pageSize={pageSize}\r\n//           totalItems={filteredAndSortedData.length}\r\n//           onPageChange={setCurrentPage}\r\n//           onPageSizeChange={(size) => {\r\n//             setPageSize(size)\r\n//             setCurrentPage(1)\r\n//           }}\r\n//           config={pagination}\r\n//         />\r\n//       )}\r\n\r\n//       {/* Footer */}\r\n//       {footer && (\r\n//         <Card className=\"shadow-sm\">\r\n//           <CardContent className=\"p-6\">{footer}</CardContent>\r\n//         </Card>\r\n//       )}\r\n\r\n//       {/* Children with controller */}\r\n//       {children && children(controller)}\r\n//     </div>\r\n//   )\r\n// }","import { clsx, type ClassValue } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}","import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils.js\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","import * as React from \"react\"\nimport { Slot as SlotPrimitive } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils.js\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? SlotPrimitive.Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }), \"transition-none\")}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","import * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils.js\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current transition-none\"\n      >\n        <CheckIcon className=\"size-3.5\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n","import { Search, Download, RefreshCw, Filter, X, ChevronDown, Settings2 } from \"lucide-react\"\r\nimport { Button } from \"../../ui/button.jsx\"\r\nimport { Input } from \"../../ui/input.jsx\"\r\nimport {\r\n  DropdownMenu,\r\n  DropdownMenuContent,\r\n  DropdownMenuItem,\r\n  DropdownMenuLabel,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuTrigger,\r\n} from \"../../ui/dropdown-menu.jsx\"\r\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../../ui/select.jsx\"\r\nimport { cn } from \"../../../lib/utils.js\"\r\nimport type { DataTemplateField, DataTemplateFilter } from \"./data-template-types.js\"\r\n\r\ninterface DataTemplateToolbarProps<T extends Record<string, any>> {\r\n  fields: DataTemplateField<T>[]\r\n  filters: DataTemplateFilter<T>[]\r\n  globalFilter: string\r\n  onGlobalFilterChange: (value: string) => void\r\n  fieldFilters: Partial<Record<keyof T, any>>\r\n  onFieldFilterChange: (key: keyof T, value: any) => void\r\n  sortField: keyof T | \"\"\r\n  sortDirection: \"asc\" | \"desc\"\r\n  onSortChange: (field: keyof T, direction: \"asc\" | \"desc\") => void\r\n  selectedCount: number\r\n  totalCount: number\r\n  visibleCount: number\r\n  onExport?: () => void\r\n  onRefresh?: () => void\r\n  loading?: boolean\r\n  onClearFilters: () => void\r\n  onClearSorting: () => void\r\n}\r\n\r\nexport function DataTemplateToolbar<T extends Record<string, any>>({\r\n  fields,\r\n  filters,\r\n  globalFilter,\r\n  onGlobalFilterChange,\r\n  fieldFilters,\r\n  onFieldFilterChange,\r\n  sortField,\r\n  sortDirection,\r\n  onSortChange,\r\n  selectedCount,\r\n  totalCount,\r\n  visibleCount,\r\n  onExport,\r\n  onRefresh,\r\n  loading,\r\n  onClearFilters,\r\n  onClearSorting,\r\n}: DataTemplateToolbarProps<T>) {\r\n  const sortableFields = fields.filter((field) => field.sortable)\r\n  const hasActiveFilters =\r\n    Object.values(fieldFilters).some((value) => value !== undefined && value !== null && value !== \"\") ||\r\n    globalFilter !== \"\"\r\n  const hasActiveSorting = sortField !== \"\"\r\n\r\n  return (\r\n    <div className=\"rounded-xl p-0.5\">\r\n      <div className=\"px-2\">\r\n        <div className=\"flex flex-col gap-6\">\r\n          {/* Top Controls */}\r\n          <div className=\"flex items-center justify-between\">\r\n            <div className=\"flex items-center gap-3\">\r\n              {/* Filters Row */}\r\n              {filters.length > 0 && (\r\n                <div className=\"flex items-center gap-3 flex-wrap\">\r\n                  <div className=\"flex items-center gap-2 text-sm font-medium text-muted-foreground\">\r\n                    <Filter className=\"h-4 w-4\" />\r\n                  </div>\r\n                  {filters.map((filter) => (\r\n                    <div key={String(filter.key)} className=\"relative min-w-[150px]\">\r\n                      {filter.type === \"select\" ? (\r\n                        <Select\r\n                          value={fieldFilters[filter.key] || \"all\"}\r\n                          onValueChange={(value) => onFieldFilterChange(filter.key, value)}\r\n                        >\r\n                          {filter.icon && (\r\n                            <filter.icon className=\"size-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\" />\r\n                          )}\r\n                          <SelectTrigger className={cn(\"h-9 rounded-lg w-full\", filter.icon && \"pl-9\")}>\r\n                            <SelectValue placeholder={filter.placeholder || \"Select...\"} />\r\n                          </SelectTrigger>\r\n                          <SelectContent className=\"rounded-lg\">\r\n                            <SelectItem value=\"all\">All</SelectItem>\r\n                            {filter.options?.map((option) => (\r\n                              <SelectItem key={option.value} value={option.value}>\r\n                                {option.label}\r\n                              </SelectItem>\r\n                            ))}\r\n                          </SelectContent>\r\n                        </Select>\r\n                      ) : (\r\n                        <div className=\"relative\">\r\n                          {filter.icon && (\r\n                            <filter.icon className=\"size-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\" />\r\n                          )}\r\n                          <Input\r\n                            type={filter.type}\r\n                            placeholder={filter.placeholder}\r\n                            value={fieldFilters[filter.key] || \"\"}\r\n                            onChange={(e) => onFieldFilterChange(filter.key, e.target.value)}\r\n                            className={cn(\"h-9 rounded-lg\", filter.icon && \"pl-9\")}\r\n                          />\r\n                        </div>\r\n                      )}\r\n                    </div>\r\n                  ))}\r\n                </div>\r\n              )}\r\n            </div>\r\n\r\n            <div className=\"flex items-center gap-2\">\r\n              {/* Global Search */}\r\n              <div className=\"relative\">\r\n                <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\r\n                <Input\r\n                  placeholder=\"Global search...\"\r\n                  value={globalFilter}\r\n                  onChange={(e) => onGlobalFilterChange(e.target.value)}\r\n                  className=\"pl-9 h-9 rounded-lg max-w-max\"\r\n                />\r\n              </div>\r\n\r\n              {/* Sort Dropdown */}\r\n              {sortableFields.length > 0 && (\r\n                <DropdownMenu>\r\n                  <DropdownMenuTrigger asChild>\r\n                    <Button variant=\"outline\" size=\"sm\" className=\"rounded-lg gap-1\">\r\n                      <span>Sort</span>\r\n                      <ChevronDown className=\"h-4 w-4 opacity-50\" />\r\n                    </Button>\r\n                  </DropdownMenuTrigger>\r\n                  <DropdownMenuContent align=\"end\" className=\"w-[200px] rounded-lg\">\r\n                    <DropdownMenuLabel>Sort By</DropdownMenuLabel>\r\n                    <DropdownMenuSeparator />\r\n                    {sortableFields.map((field) => (\r\n                      <div key={String(field.key)}>\r\n                        <DropdownMenuItem onClick={() => onSortChange(field.key, \"asc\")}>\r\n                          {field.label} (A-Z)\r\n                        </DropdownMenuItem>\r\n                        <DropdownMenuItem onClick={() => onSortChange(field.key, \"desc\")}>\r\n                          {field.label} (Z-A)\r\n                        </DropdownMenuItem>\r\n                      </div>\r\n                    ))}\r\n                    {hasActiveSorting && (\r\n                      <>\r\n                        <DropdownMenuSeparator />\r\n                        <DropdownMenuItem onClick={onClearSorting}>\r\n                          Clear All Sorting\r\n                        </DropdownMenuItem>\r\n                      </>\r\n                    )}\r\n                  </DropdownMenuContent>\r\n                </DropdownMenu>\r\n              )}\r\n\r\n              {/* Table Settings */}\r\n              <DropdownMenu>\r\n                <DropdownMenuTrigger asChild>\r\n                  <Button variant=\"outline\" size=\"sm\" className=\"rounded-lg\">\r\n                    <Settings2 className=\"h-4 w-4\" />\r\n                  </Button>\r\n                </DropdownMenuTrigger>\r\n                <DropdownMenuContent align=\"end\" className=\"w-[200px] rounded-lg\">\r\n                  <DropdownMenuLabel>Table Settings</DropdownMenuLabel>\r\n                  <DropdownMenuSeparator />\r\n                  <DropdownMenuItem onClick={onClearSorting}>\r\n                    Clear All Sorting\r\n                  </DropdownMenuItem>\r\n                  <DropdownMenuItem onClick={onClearFilters}>\r\n                    Clear All Filters\r\n                  </DropdownMenuItem>\r\n                </DropdownMenuContent>\r\n              </DropdownMenu>\r\n\r\n              {/* Export Button */}\r\n              {onExport && (\r\n                <Button variant=\"outline\" size=\"sm\" onClick={onExport} className=\"rounded-lg\">\r\n                  <Download className=\"mr-2 h-4 w-4\" />\r\n                  Export\r\n                </Button>\r\n              )}\r\n\r\n              {/* Refresh Button */}\r\n              {onRefresh && (\r\n                <Button\r\n                  variant=\"outline\"\r\n                  size=\"sm\"\r\n                  onClick={onRefresh}\r\n                  disabled={loading}\r\n                  className=\"rounded-lg\"\r\n                >\r\n                  <RefreshCw className={cn(\"h-4 w-4\", loading && \"animate-spin\")} />\r\n                </Button>\r\n              )}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\n\r\n// import { Search, Download, RefreshCw, Filter, X, SortAsc, SortDesc, Grid3X3, Grid2X2, LayoutGrid, XIcon } from \"lucide-react\"\r\n// import { Button } from \"../../ui/button\"\r\n// import { Input } from \"../../ui/input\"\r\n// import {\r\n//   DropdownMenu,\r\n//   DropdownMenuContent,\r\n//   DropdownMenuItem,\r\n//   DropdownMenuLabel,\r\n//   DropdownMenuSeparator,\r\n//   DropdownMenuTrigger,\r\n//   DropdownMenuRadioGroup,\r\n//   DropdownMenuRadioItem,\r\n// } from \"../../ui/dropdown-menu\"\r\n// import { Badge } from \"../../ui/badge\"\r\n// import { Separator } from \"../../ui/separator\"\r\n// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../../ui/select\"\r\n// import type { TemplateRepeaterField, TemplateRepeaterFilter } from \"./template-repeater-types\"\r\n\r\n// // Constrain T to be an object with string keys\r\n// interface TemplateRepeaterToolbarProps<T extends Record<string, any>> {\r\n//   fields: TemplateRepeaterField<T>[]\r\n//   filters: TemplateRepeaterFilter<T>[]\r\n//   globalFilter: string\r\n//   onGlobalFilterChange: (value: string) => void\r\n//   fieldFilters: Partial<Record<keyof T, any>>\r\n//   onFieldFilterChange: (key: keyof T, value: any) => void\r\n//   sortField: keyof T | \"\"\r\n//   sortDirection: \"asc\" | \"desc\"\r\n//   onSortChange: (field: keyof T, direction: \"asc\" | \"desc\") => void\r\n//   selectedCount: number\r\n//   totalCount: number\r\n//   visibleCount: number\r\n//   onExport?: () => void\r\n//   onRefresh?: () => void\r\n//   loading?: boolean\r\n//   gridCols: number\r\n//   onGridColsChange: (cols: number) => void\r\n//   onClearFilters: () => void\r\n//   onClearSorting: () => void\r\n// }\r\n\r\n// export function TemplateRepeaterToolbar<T extends Record<string, any>>({\r\n//   fields,\r\n//   filters,\r\n//   globalFilter,\r\n//   onGlobalFilterChange,\r\n//   fieldFilters,\r\n//   onFieldFilterChange,\r\n//   sortField,\r\n//   sortDirection,\r\n//   onSortChange,\r\n//   selectedCount,\r\n//   totalCount,\r\n//   visibleCount,\r\n//   onExport,\r\n//   onRefresh,\r\n//   loading,\r\n//   gridCols,\r\n//   onGridColsChange,\r\n//   onClearFilters,\r\n//   onClearSorting,\r\n// }: TemplateRepeaterToolbarProps<T>) {\r\n//   const sortableFields = fields.filter((field) => field.sortable)\r\n//   const hasActiveFilters =\r\n//     Object.values(fieldFilters).some((value) => value !== undefined && value !== null && value !== \"\") ||\r\n//     globalFilter !== \"\"\r\n//   const hasActiveSorting = sortField !== \"\"\r\n\r\n//   // const gridOptions = [\r\n//   //   { value: 1, icon: LayoutGrid, label: \"1 Column\" },\r\n//   //   { value: 2, icon: Grid2X2, label: \"2 Columns\" },\r\n//   //   { value: 3, icon: Grid3X3, label: \"3 Columns\" },\r\n//   //   { value: 4, icon: Grid3X3, label: \"4 Columns\" },\r\n//   //   { value: 0, icon: Grid3X3, label: \"Auto Fit\" },\r\n//   // ];\r\n\r\n//   // Helper function to safely convert keyof T to string for React keys\r\n//   const getKeyString = (key: keyof T): string => String(key)\r\n\r\n//   return (\r\n//     <div className=\"flex flex-col gap-4 p-2 bg-muted/20 rounded-lg flex-none\">\r\n//       {/* Top Row - Search and Actions */}\r\n//       <div className=\"flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between\">\r\n//         <div className=\"flex flex-1 items-center gap-2 max-w-max\">\r\n//         </div>\r\n\r\n//         <div className=\"flex items-center gap-2\">\r\n//           <div className=\"relative flex-1\">\r\n//             <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 size-4 text-muted-foreground\" />\r\n//             <Input\r\n//               placeholder=\"Global Search...\"\r\n//               value={globalFilter}\r\n//               onChange={(e) => onGlobalFilterChange(e.target.value)}\r\n//               className=\"pl-9 h-8\"\r\n//               id=\"search\"\r\n//             />\r\n//           </div>\r\n//           {globalFilter && (\r\n//             <Button variant=\"ghost\" size=\"sm\" onClick={() => onGlobalFilterChange(\"\")}>\r\n//               <XIcon className=\"h-4 w-4\" />\r\n//             </Button>\r\n//           )}\r\n//           {/* Grid Layout Selector */}\r\n//           {/* <DropdownMenu>\r\n//             <DropdownMenuTrigger asChild>\r\n//               <Button variant=\"outline\" size=\"sm\">\r\n//                 <LayoutGrid className=\"h-4 w-4\" />\r\n//                 Grid\r\n//               </Button>\r\n//             </DropdownMenuTrigger>\r\n//             <DropdownMenuContent align=\"end\">\r\n//               <DropdownMenuLabel>Grid Layout</DropdownMenuLabel>\r\n//               <DropdownMenuSeparator />\r\n//               <DropdownMenuRadioGroup\r\n//                 value={gridCols.toString()}\r\n//                 onValueChange={(value) => onGridColsChange(Number.parseInt(value))}\r\n//               >\r\n//                 {gridOptions.map((option) => (\r\n//                   <DropdownMenuRadioItem key={option.value} value={option.value.toString()}>\r\n//                     <option.icon className=\"h-4 w-4\" />\r\n//                     {option.label}\r\n//                   </DropdownMenuRadioItem>\r\n//                 ))}\r\n//               </DropdownMenuRadioGroup>\r\n//             </DropdownMenuContent>\r\n//           </DropdownMenu> */}\r\n\r\n//           {/* Sort Dropdown */}\r\n//           {sortableFields.length > 0 && (\r\n//             <DropdownMenu>\r\n//               <DropdownMenuTrigger asChild>\r\n//                 <Button variant=\"outline\" size=\"sm\">\r\n//                   {sortDirection === \"asc\" ? (\r\n//                     <SortAsc className=\"h-4 w-4 mr-2\" />\r\n//                   ) : (\r\n//                     <SortDesc className=\"h-4 w-4 mr-2\" />\r\n//                   )}\r\n//                   Sort\r\n//                   {hasActiveSorting && (\r\n//                     <Badge variant=\"secondary\" className=\"ml-2\">\r\n//                       1\r\n//                     </Badge>\r\n//                   )}\r\n//                 </Button>\r\n//               </DropdownMenuTrigger>\r\n//               <DropdownMenuContent align=\"end\" className=\"w-48\">\r\n//                 <DropdownMenuLabel>Sort by</DropdownMenuLabel>\r\n//                 <DropdownMenuSeparator />\r\n//                 {sortableFields.map((field) => (\r\n//                   <div key={getKeyString(field.key)}>\r\n//                     <DropdownMenuItem onClick={() => onSortChange(field.key, \"asc\")}>\r\n//                       <SortAsc className=\"h-4 w-4 mr-2\" />\r\n//                       {field.label} (A-Z)\r\n//                     </DropdownMenuItem>\r\n//                     <DropdownMenuItem onClick={() => onSortChange(field.key, \"desc\")}>\r\n//                       <SortDesc className=\"h-4 w-4 mr-2\" />\r\n//                       {field.label} (Z-A)\r\n//                     </DropdownMenuItem>\r\n//                   </div>\r\n//                 ))}\r\n//                 {hasActiveSorting && (\r\n//                   <>\r\n//                     <DropdownMenuSeparator />\r\n//                     <DropdownMenuItem onClick={onClearSorting}>\r\n//                       <XIcon className=\"h-4 w-4 mr-2\" />\r\n//                       Clear Sort\r\n//                     </DropdownMenuItem>\r\n//                   </>\r\n//                 )}\r\n//               </DropdownMenuContent>\r\n//             </DropdownMenu>\r\n//           )}\r\n\r\n//           {/* Filters Dropdown */}\r\n//           {filters.length > 0 && (\r\n//             <DropdownMenu>\r\n//               <DropdownMenuTrigger asChild>\r\n//                 <Button variant=\"outline\" size=\"sm\">\r\n//                   <Filter className=\"h-4 w-4 mr-2\" />\r\n//                   Filters\r\n//                   {hasActiveFilters && (\r\n//                     <Badge variant=\"secondary\" className=\"ml-2\">\r\n//                       {Object.values(fieldFilters).filter((v) => v !== undefined && v !== null && v !== \"\").length +\r\n//                         (globalFilter ? 1 : 0)}\r\n//                     </Badge>\r\n//                   )}\r\n//                 </Button>\r\n//               </DropdownMenuTrigger>\r\n//               <DropdownMenuContent align=\"end\" className=\"w-64\">\r\n//                 <DropdownMenuLabel>Filters</DropdownMenuLabel>\r\n//                 <DropdownMenuSeparator />\r\n//                 <div className=\"p-2 space-y-3\">\r\n//                   {filters.map((filter) => (\r\n//                     <div key={getKeyString(filter.key)} className=\"space-y-1\">\r\n//                       <label className=\"text-sm font-medium\">{filter.label}</label>\r\n//                       {filter.type === \"select\" ? (\r\n//                         <Select\r\n//                           value={fieldFilters[filter.key] || \"all\"}\r\n//                           onValueChange={(value) => onFieldFilterChange(filter.key, value)}\r\n//                         >\r\n//                           <SelectTrigger className=\"h-8\">\r\n//                             <SelectValue placeholder={filter.placeholder || \"Select...\"} />\r\n//                           </SelectTrigger>\r\n//                           <SelectContent>\r\n//                             <SelectItem value=\"all\">All</SelectItem>\r\n//                             {filter.options?.map((option) => (\r\n//                               <SelectItem key={option.value} value={option.value}>\r\n//                                 {option.label}\r\n//                               </SelectItem>\r\n//                             ))}\r\n//                           </SelectContent>\r\n//                         </Select>\r\n//                       ) : (\r\n//                         <Input\r\n//                           type={filter.type}\r\n//                           placeholder={filter.placeholder}\r\n//                           value={fieldFilters[filter.key] || \"\"}\r\n//                           onChange={(e) => onFieldFilterChange(filter.key, e.target.value)}\r\n//                           className=\"h-8\"\r\n//                         />\r\n//                       )}\r\n//                     </div>\r\n//                   ))}\r\n//                 </div>\r\n//                 {hasActiveFilters && (\r\n//                   <>\r\n//                     <DropdownMenuSeparator />\r\n//                     <DropdownMenuItem onClick={onClearFilters}>\r\n//                       <XIcon className=\"h-4 w-4 mr-2\" />\r\n//                       Clear All Filters\r\n//                     </DropdownMenuItem>\r\n//                   </>\r\n//                 )}\r\n//               </DropdownMenuContent>\r\n//             </DropdownMenu>\r\n//           )}\r\n\r\n//           <Separator orientation=\"vertical\" className=\"h-6\" />\r\n\r\n//           {onRefresh && (\r\n//             <Button variant=\"outline\" size=\"sm\" onClick={onRefresh} disabled={loading}>\r\n//               <RefreshCw className={`h-4 w-4 mr-2 ${loading ? \"animate-spin\" : \"\"}`} />\r\n//               Refresh\r\n//             </Button>\r\n//           )}\r\n\r\n//           {onExport && (\r\n//             <Button variant=\"outline\" size=\"sm\" onClick={onExport} disabled={loading}>\r\n//               <Download className=\"h-4 w-4 mr-2\" />\r\n//               Export\r\n//             </Button>\r\n//           )}\r\n//         </div>\r\n//       </div>\r\n\r\n//       {/* Bottom Row - Stats and Active Filters */}\r\n//       {/* <div className=\"flex flex-col sm:flex-row gap-2 items-start sm:items-center justify-between text-sm text-muted-foreground\">\r\n//         <div className=\"flex items-center gap-4\">\r\n//           <span>\r\n//             Showing {visibleCount.toLocaleString()} of {totalCount.toLocaleString()} items\r\n//           </span>\r\n//           {selectedCount > 0 && (\r\n//             <span className=\"text-primary font-medium\">{selectedCount.toLocaleString()} selected</span>\r\n//           )}\r\n//         </div>\r\n//         {hasActiveFilters && (\r\n//           <div className=\"flex items-center gap-2 flex-wrap\">\r\n//             <span className=\"text-xs\">Active filters:</span>\r\n//             {globalFilter && (\r\n//               <Badge variant=\"secondary\" className=\"text-xs\">\r\n//                 Search: {globalFilter}\r\n//                 <Button variant=\"ghost\" size=\"sm\" className=\"h-auto p-0 ml-1\" onClick={() => onGlobalFilterChange(\"\")}>\r\n//                   <XIcon className=\"h-3 w-3\" />\r\n//                 </Button>\r\n//               </Badge>\r\n//             )}\r\n//             {(Object.keys(fieldFilters) as Array<keyof T>).map((key) => {\r\n//               const value = fieldFilters[key]\r\n//               if (!value) return null\r\n//               const filter = filters.find((f) => f.key === key)\r\n//               if (!filter) return null\r\n//               return (\r\n//                 <Badge key={getKeyString(key)} variant=\"secondary\" className=\"text-xs\">\r\n//                   {filter.label}: {String(value)}\r\n//                   <Button\r\n//                     variant=\"ghost\"\r\n//                     size=\"sm\"\r\n//                     className=\"h-auto p-0 ml-1\"\r\n//                     onClick={() => onFieldFilterChange(key, \"\")}\r\n//                   >\r\n//                     <XIcon className=\"h-3 w-3\" />\r\n//                   </Button>\r\n//                 </Badge>\r\n//               )\r\n//             })}\r\n//           </div>\r\n//         )}\r\n//       </div> */}\r\n//     </div>\r\n//   )\r\n// }","import * as React from \"react\"\n\nimport { cn } from \"../../lib/utils.js\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n        \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n","import * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils.js\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) rounded-md border p-1 shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"cursor-pointer focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n","import * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils.js\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-4 opacity-50\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\n          position === \"popper\" &&\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n","import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"lucide-react\"\r\nimport { Button } from \"../../ui/button.jsx\"\r\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../../ui/select.jsx\"\r\nimport type { DataTemplatePaginationConfig } from \"./data-template-types.js\"\r\n\r\ninterface DataTemplatePaginationProps {\r\n  currentPage: number\r\n  totalPages: number\r\n  pageSize: number\r\n  totalItems: number\r\n  onPageChange: (page: number) => void\r\n  onPageSizeChange: (pageSize: number) => void\r\n  config: DataTemplatePaginationConfig\r\n}\r\n\r\nexport function DataTemplatePagination({\r\n  currentPage,\r\n  totalPages,\r\n  pageSize,\r\n  totalItems,\r\n  onPageChange,\r\n  onPageSizeChange,\r\n  config,\r\n}: DataTemplatePaginationProps) {\r\n  // if (!config.enabled || totalPages <= 1) {\r\n  if (!config.enabled) {\r\n    return null\r\n  }\r\n\r\n  const pageSizeOptions = config.pageSizeOptions || [10, 20, 50, 100]\r\n  const startItem = (currentPage - 1) * pageSize + 1\r\n  const endItem = Math.min(currentPage * pageSize, totalItems)\r\n\r\n  const canPreviousPage = currentPage > 1\r\n  const canNextPage = currentPage < totalPages\r\n\r\n  // Generate page numbers to show\r\n  const getPageNumbers = () => {\r\n    const delta = 2\r\n    const range = []\r\n    const rangeWithDots = []\r\n\r\n    for (let i = Math.max(2, currentPage - delta); i <= Math.min(totalPages - 1, currentPage + delta); i++) {\r\n      range.push(i)\r\n    }\r\n\r\n    if (currentPage - delta > 2) {\r\n      rangeWithDots.push(1, \"...\")\r\n    } else {\r\n      rangeWithDots.push(1)\r\n    }\r\n\r\n    rangeWithDots.push(...range)\r\n\r\n    if (currentPage + delta < totalPages - 1) {\r\n      rangeWithDots.push(\"...\", totalPages)\r\n    } else if (totalPages > 1) {\r\n      rangeWithDots.push(totalPages)\r\n    }\r\n\r\n    return rangeWithDots\r\n  }\r\n\r\n  return (\r\n    <div className=\"rounded-xl\">\r\n      <div className=\"flex flex-col sm:flex-row items-center justify-between gap-4\">\r\n        {/* Info Section */}\r\n        <div className=\"flex items-center gap-6 text-sm text-muted-foreground\">\r\n          {config.showInfo !== false && (\r\n            <span>\r\n              Showing {startItem} to {endItem} of {totalItems} entries\r\n            </span>\r\n          )}\r\n        </div>\r\n\r\n        {/* Controls Section */}\r\n        <div className=\"flex flex-col sm:flex-row items-center gap-4\">\r\n          {/* Page Size Selector */}\r\n          {pageSizeOptions && (\r\n            <div className=\"flex items-center gap-2\">\r\n              <span className=\"text-sm font-medium whitespace-nowrap\">Page size:</span>\r\n              <Select value={`${pageSize}`} onValueChange={(value) => onPageSizeChange(Number(value))}>\r\n                <SelectTrigger className=\"h-9 w-[70px] rounded-lg\">\r\n                  <SelectValue />\r\n                </SelectTrigger>\r\n                <SelectContent side=\"top\" className=\"rounded-lg\">\r\n                  {pageSizeOptions.map((size) => (\r\n                    <SelectItem key={size} value={`${size}`}>\r\n                      {size}\r\n                    </SelectItem>\r\n                  ))}\r\n                </SelectContent>\r\n              </Select>\r\n            </div>\r\n          )}\r\n\r\n          {/* Navigation Controls */}\r\n          <div className=\"flex items-center gap-2\">\r\n            {/* First Page */}\r\n            <Button\r\n              variant=\"outline\"\r\n              size=\"sm\"\r\n              onClick={() => onPageChange(1)}\r\n              disabled={!canPreviousPage}\r\n              className=\"hidden sm:flex rounded-lg\"\r\n            >\r\n              <ChevronsLeft className=\"h-4 w-4\" />\r\n              <span className=\"sr-only\">Go to first page</span>\r\n            </Button>\r\n\r\n            {/* Previous Page */}\r\n            <Button\r\n              variant=\"outline\"\r\n              size=\"sm\"\r\n              onClick={() => onPageChange(currentPage - 1)}\r\n              disabled={!canPreviousPage}\r\n              className=\"rounded-lg\"\r\n            >\r\n              <ChevronLeft className=\"h-4 w-4 sm:mr-2\" />\r\n              <span className=\"hidden sm:inline\">Previous</span>\r\n              <span className=\"sr-only sm:hidden\">Go to previous page</span>\r\n            </Button>\r\n\r\n            {/* Page Numbers */}\r\n            {config.showPageNumbers && totalPages > 1 && (\r\n              <div className=\"hidden sm:flex items-center gap-1\">\r\n                {getPageNumbers().map((pageNumber, index) => {\r\n                  if (pageNumber === \"...\") {\r\n                    return (\r\n                      <span key={`dots-${index}`} className=\"px-2 py-1 text-sm text-muted-foreground\">\r\n                        ...\r\n                      </span>\r\n                    )\r\n                  }\r\n\r\n                  const page = pageNumber as number\r\n                  return (\r\n                    <Button\r\n                      key={page}\r\n                      variant={page === currentPage ? \"default\" : \"outline\"}\r\n                      size=\"sm\"\r\n                      className=\"w-9 h-9 p-0 rounded-lg\"\r\n                      onClick={() => onPageChange(page)}\r\n                    >\r\n                      {page}\r\n                    </Button>\r\n                  )\r\n                })}\r\n              </div>\r\n            )}\r\n\r\n            {/* Current Page Indicator (Mobile) */}\r\n            <div className=\"sm:hidden flex items-center gap-2 px-3 py-1 text-sm font-medium bg-muted rounded-lg\">\r\n              {currentPage} of {totalPages}\r\n            </div>\r\n\r\n            {/* Next Page */}\r\n            <Button\r\n              variant=\"outline\"\r\n              size=\"sm\"\r\n              onClick={() => onPageChange(currentPage + 1)}\r\n              disabled={!canNextPage}\r\n              className=\"rounded-lg\"\r\n            >\r\n              <span className=\"hidden sm:inline\">Next</span>\r\n              <ChevronRight className=\"h-4 w-4 sm:ml-2\" />\r\n              <span className=\"sr-only sm:hidden\">Go to next page</span>\r\n            </Button>\r\n\r\n            {/* Last Page */}\r\n            <Button\r\n              variant=\"outline\"\r\n              size=\"sm\"\r\n              onClick={() => onPageChange(totalPages)}\r\n              disabled={!canNextPage}\r\n              className=\"hidden sm:flex rounded-lg\"\r\n            >\r\n              <ChevronsRight className=\"h-4 w-4\" />\r\n              <span className=\"sr-only\">Go to last page</span>\r\n            </Button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n","import * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils.js\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator-root\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n","import * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils.js\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n","import { Button } from \"../../ui/button.jsx\"\r\nimport { Separator } from \"../../ui/separator.jsx\"\r\nimport { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from \"../../ui/tooltip.jsx\"\r\nimport { cn } from \"../../../lib/utils.js\"\r\nimport { Loader, X } from \"lucide-react\"\r\nimport { AnimatePresence, motion } from \"framer-motion\"\r\nimport * as React from \"react\"\r\nimport * as ReactDOM from \"react-dom\"\r\nimport type {\r\n  DataTemplateController,\r\n  DataTemplateActionBarProps,\r\n  DataTemplateActionBarActionProps,\r\n} from \"./data-template-types.js\"\r\n\r\nfunction DataTemplateActionBar<T>({\r\n  controller,\r\n  visible: visibleProp,\r\n  container: containerProp,\r\n  children,\r\n  className,\r\n  ...props\r\n}: DataTemplateActionBarProps<T> & React.ComponentProps<typeof motion.div>) {\r\n  const [mounted, setMounted] = React.useState(false)\r\n\r\n  React.useLayoutEffect(() => {\r\n    setMounted(true)\r\n  }, [])\r\n\r\n  React.useEffect(() => {\r\n    function onKeyDown(event: KeyboardEvent) {\r\n      if (event.key === \"Escape\" && controller) {\r\n        controller.clearSelection()\r\n      }\r\n    }\r\n\r\n    window.addEventListener(\"keydown\", onKeyDown)\r\n    return () => window.removeEventListener(\"keydown\", onKeyDown)\r\n  }, [controller])\r\n\r\n  const container = containerProp ?? (mounted ? globalThis.document?.body : null)\r\n\r\n  if (!container || !controller) return null\r\n\r\n  const selectedItems = controller.getSelectedItems()\r\n  const visible = visibleProp ?? selectedItems.length > 0\r\n\r\n  return ReactDOM.createPortal(\r\n    <AnimatePresence>\r\n      {visible && (\r\n        <motion.div\r\n          role=\"toolbar\"\r\n          aria-orientation=\"horizontal\"\r\n          initial={{ opacity: 0, y: 20 }}\r\n          animate={{ opacity: 1, y: 0 }}\r\n          exit={{ opacity: 0, y: 20 }}\r\n          transition={{ duration: 0.3, ease: \"easeInOut\" }}\r\n          className={cn(\r\n            \"fixed inset-x-0 bottom-6 z-50 mx-auto flex w-fit flex-wrap items-center justify-center gap-2 rounded-xl border bg-primary/10 backdrop-blur-sm p-3 text-foreground ring-8 ring-primary/5\",\r\n            className,\r\n          )}\r\n          {...props}\r\n        >\r\n          <TooltipProvider>{children}</TooltipProvider>\r\n        </motion.div>\r\n      )}\r\n    </AnimatePresence>,\r\n    container,\r\n  )\r\n}\r\n\r\nfunction DataTemplateActionBarAction({\r\n  size = \"sm\",\r\n  variant = \"secondary\",\r\n  tooltip,\r\n  isPending,\r\n  disabled,\r\n  className,\r\n  children,\r\n  onClick,\r\n  ...props\r\n}: DataTemplateActionBarActionProps) {\r\n  const trigger = (\r\n    <Button\r\n      variant={variant}\r\n      size={size}\r\n      className={cn(\r\n        \"gap-1.5 rounded-lg border border-secondary bg-secondary/50 hover:bg-secondary/70 transition-all duration-200\",\r\n        size === \"icon\" ? \"size-8\" : \"h-8 px-3\",\r\n        className,\r\n      )}\r\n      disabled={disabled || isPending}\r\n      onClick={onClick}\r\n      {...props}\r\n    >\r\n      {isPending ? <Loader className=\"animate-spin\" /> : children}\r\n    </Button>\r\n  )\r\n\r\n  if (!tooltip) return trigger\r\n\r\n  return (\r\n    <Tooltip>\r\n      <TooltipTrigger asChild>{trigger}</TooltipTrigger>\r\n      <TooltipContent\r\n        sideOffset={8}\r\n        className=\"rounded-lg border font-semibold text-foreground bg-secondary [&>span]:hidden\"\r\n      >\r\n        <p>{tooltip}</p>\r\n      </TooltipContent>\r\n    </Tooltip>\r\n  )\r\n}\r\n\r\ninterface DataTemplateActionBarSelectionProps<T> {\r\n  controller: DataTemplateController<T>\r\n}\r\n\r\nfunction DataTemplateActionBarSelection<T>({ controller }: DataTemplateActionBarSelectionProps<T>) {\r\n  const onClearSelection = React.useCallback(() => {\r\n    if (controller) {\r\n      controller.clearSelection()\r\n    }\r\n  }, [controller])\r\n\r\n  if (!controller) return null\r\n\r\n  const selectedItems = controller.getSelectedItems()\r\n\r\n  return (\r\n    <div className=\"flex h-8 items-center rounded-lg border bg-muted/50 pr-1 pl-3\">\r\n      <span className=\"whitespace-nowrap text-sm font-medium\">{selectedItems.length} selected</span>\r\n      <Separator orientation=\"vertical\" className=\"mr-2 ml-3 data-[orientation=vertical]:h-4\" />\r\n      <Tooltip>\r\n        <TooltipTrigger asChild>\r\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-6 rounded-md\" onClick={onClearSelection}>\r\n            <X className=\"size-3.5\" />\r\n          </Button>\r\n        </TooltipTrigger>\r\n        <TooltipContent\r\n          sideOffset={10}\r\n          className=\"flex items-center gap-2 rounded-lg border px-3 py-2 font-semibold text-foreground bg-secondary [&>span]:hidden\"\r\n        >\r\n          <p>Clear selection</p>\r\n          <kbd className=\"select-none rounded border bg-primary/50 px-2 py-1 font-mono font-normal text-[0.7rem] text-foreground shadow-sm\">\r\n            <abbr title=\"Escape\" className=\"no-underline\">\r\n              Esc\r\n            </abbr>\r\n          </kbd>\r\n        </TooltipContent>\r\n      </Tooltip>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport { DataTemplateActionBar, DataTemplateActionBarAction, DataTemplateActionBarSelection }\r\n"],"mappings":"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","names":["data_template_exports","__export","DataTemplate","DataTemplateActionBar","DataTemplateActionBarAction","DataTemplateActionBarSelection","DataTemplateToolbar","__toCommonJS","import_react","import_lucide_react","import_clsx","import_tailwind_merge","cn","inputs","import_jsx_runtime","Card","className","props","cn","CardContent","className","props","cn","import_radix_ui","import_class_variance_authority","import_jsx_runtime","buttonVariants","Button","className","variant","size","asChild","props","Comp","SlotPrimitive","cn","import_radix_ui","import_lucide_react","import_jsx_runtime","Checkbox","className","props","CheckboxPrimitive","cn","import_lucide_react","import_jsx_runtime","Input","className","type","props","cn","import_radix_ui","import_lucide_react","import_jsx_runtime","DropdownMenu","props","DropdownMenuPrimitive","DropdownMenuTrigger","props","DropdownMenuPrimitive","DropdownMenuContent","className","sideOffset","cn","DropdownMenuItem","className","inset","variant","props","DropdownMenuPrimitive","cn","DropdownMenuLabel","className","inset","props","DropdownMenuPrimitive","cn","DropdownMenuSeparator","import_radix_ui","import_lucide_react","import_jsx_runtime","Select","props","SelectPrimitive","SelectValue","props","SelectPrimitive","SelectTrigger","className","size","children","cn","SelectContent","position","SelectScrollUpButton","SelectScrollDownButton","SelectItem","className","children","props","SelectPrimitive","cn","SelectScrollUpButton","className","props","SelectPrimitive","cn","SelectScrollDownButton","import_jsx_runtime","DataTemplateToolbar","fields","filters","globalFilter","onGlobalFilterChange","fieldFilters","onFieldFilterChange","sortField","sortDirection","onSortChange","selectedCount","totalCount","visibleCount","onExport","onRefresh","loading","onClearFilters","onClearSorting","sortableFields","field","hasActiveFilters","value","hasActiveSorting","filter","Select","SelectTrigger","cn","SelectValue","SelectContent","SelectItem","option","Input","e","DropdownMenu","DropdownMenuTrigger","Button","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuItem","import_lucide_react","import_jsx_runtime","DataTemplatePagination","currentPage","totalPages","pageSize","totalItems","onPageChange","onPageSizeChange","config","pageSizeOptions","startItem","endItem","canPreviousPage","canNextPage","getPageNumbers","range","rangeWithDots","i","Select","value","SelectTrigger","SelectValue","SelectContent","size","SelectItem","Button","pageNumber","index","page","import_jsx_runtime","DataTemplate","data","template","fields","filters","pagination","settings","header","footer","className","loading","error","emptyMessage","emptyIcon","onSelectionChange","onExport","onRefresh","onTemplateReady","children","enableSorting","enableFiltering","enableGlobalSearch","enableSelection","enableExport","toolbar","selectionMode","gridCols","gap","aspectRatio","minCardWidth","maxCardWidth","globalFilter","setGlobalFilter","fieldFilters","setFieldFilters","sortField","setSortField","sortDirection","setSortDirection","selectedItems","setSelectedItems","currentPage","setCurrentPage","pageSize","setPageSize","currentGridCols","setCurrentGridCols","filteredAndSortedData","result","searchableFields","field","item","key","value","f","itemValue","a","b","aValue","bValue","aDate","bDate","aStr","bStr","paginatedData","startIndex","endIndex","totalPages","handleToggleSelect","index","prev","newSelection","handleSelectAll","_","handleFieldFilterChange","handleSortChange","direction","handleClearFilters","handleClearSorting","controller","controllerRef","selected","gridContainerClasses","cn","gridClasses","gridStyle","Card","CardContent","Button","DataTemplateToolbar","globalIndex","isSelected","Checkbox","e","v","DataTemplatePagination","size","import_radix_ui","import_jsx_runtime","Separator","className","orientation","decorative","props","SeparatorPrimitive","cn","import_radix_ui","import_jsx_runtime","TooltipProvider","delayDuration","props","TooltipPrimitive","Tooltip","TooltipTrigger","TooltipContent","className","sideOffset","children","cn","import_lucide_react","import_framer_motion","React","ReactDOM","import_jsx_runtime","DataTemplateActionBar","controller","visibleProp","containerProp","children","className","props","mounted","setMounted","onKeyDown","event","container","selectedItems","visible","cn","TooltipProvider","DataTemplateActionBarAction","size","variant","tooltip","isPending","disabled","onClick","trigger","Button","Tooltip","TooltipTrigger","TooltipContent","DataTemplateActionBarSelection","onClearSelection","Separator"]}

package/dist/components/data/data-template/index.d.cts

@@ -0,0 +1,8 @@
+export { DataTemplate } from './data-template.cjs';
+export { DataTemplateToolbar } from './data-template-toolbar.cjs';
+export { DataTemplateActionBar, DataTemplateActionBarAction, DataTemplateActionBarSelection } from './data-template-action-bar.cjs';
+export { DataTemplateActionBarActionProps, DataTemplateActionBarProps, DataTemplateController, DataTemplateField, DataTemplateFilter, DataTemplatePagination, DataTemplatePaginationConfig, DataTemplateProps, DataTemplateSettings, DataTemplateType } from './data-template-types.cjs';
+import 'react/jsx-runtime';
+import 'framer-motion';
+import 'react';
+import 'lucide-react';

package/dist/components/data/data-template/index.d.ts

@@ -0,0 +1,8 @@
+export { DataTemplate } from './data-template.js';
+export { DataTemplateToolbar } from './data-template-toolbar.js';
+export { DataTemplateActionBar, DataTemplateActionBarAction, DataTemplateActionBarSelection } from './data-template-action-bar.js';
+export { DataTemplateActionBarActionProps, DataTemplateActionBarProps, DataTemplateController, DataTemplateField, DataTemplateFilter, DataTemplatePagination, DataTemplatePaginationConfig, DataTemplateProps, DataTemplateSettings, DataTemplateType } from './data-template-types.js';
+import 'react/jsx-runtime';
+import 'framer-motion';
+import 'react';
+import 'lucide-react';

package/dist/components/data/data-template/index.js

@@ -0,0 +1,3 @@
+"use client"
+import{useState as G,useEffect as Xe,useMemo as Te,useCallback as W,useRef as Mt}from"react";import{Loader2 as Ze}from"lucide-react";import{clsx as dt}from"clsx";import{twMerge as ct}from"tailwind-merge";function a(...e){return ct(dt(e))}import{jsx as Ee}from"react/jsx-runtime";function se({className:e,...t}){return Ee("div",{"data-slot":"card",className:a("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",e),...t})}function le({className:e,...t}){return Ee("div",{"data-slot":"card-content",className:a("px-6",e),...t})}import{Slot as mt}from"radix-ui";import{cva as pt}from"class-variance-authority";import{jsx as ft}from"react/jsx-runtime";var ut=pt("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",{variants:{variant:{default:"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",destructive:"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",secondary:"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2 has-[>svg]:px-3",sm:"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",lg:"h-10 rounded-md px-6 has-[>svg]:px-4",icon:"size-9"}},defaultVariants:{variant:"default",size:"default"}});function f({className:e,variant:t,size:o,asChild:d=!1,...c}){let w=d?mt.Slot:"button";return ft(w,{"data-slot":"button",className:a(ut({variant:t,size:o,className:e}),"transition-none"),...c})}import{Checkbox as Ue}from"radix-ui";import{CheckIcon as gt}from"lucide-react";import{jsx as be}from"react/jsx-runtime";function We({className:e,...t}){return be(Ue.Root,{"data-slot":"checkbox",className:a("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",e),...t,children:be(Ue.Indicator,{"data-slot":"checkbox-indicator",className:"flex items-center justify-center text-current transition-none",children:be(gt,{className:"size-3.5"})})})}import{Search as yt,Download as wt,RefreshCw as St,Filter as Nt,ChevronDown as Tt,Settings2 as Pt}from"lucide-react";import{jsx as vt}from"react/jsx-runtime";function xe({className:e,type:t,...o}){return vt("input",{type:t,"data-slot":"input",className:a("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm","focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",e),...o})}import{DropdownMenu as V}from"radix-ui";import{CheckIcon as uo,ChevronRightIcon as fo,CircleIcon as go}from"lucide-react";import{jsx as j,jsxs as xo}from"react/jsx-runtime";function he({...e}){return j(V.Root,{"data-slot":"dropdown-menu",...e})}function Ce({...e}){return j(V.Trigger,{"data-slot":"dropdown-menu-trigger",...e})}function ye({className:e,sideOffset:t=4,...o}){return j(V.Portal,{children:j(V.Content,{"data-slot":"dropdown-menu-content",sideOffset:t,className:a("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) rounded-md border p-1 shadow-md",e),...o})})}function U({className:e,inset:t,variant:o="default",...d}){return j(V.Item,{"data-slot":"dropdown-menu-item","data-inset":t,"data-variant":o,className:a("cursor-pointer focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",e),...d})}function we({className:e,inset:t,...o}){return j(V.Label,{"data-slot":"dropdown-menu-label","data-inset":t,className:a("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",e),...o})}function de({className:e,...t}){return j(V.Separator,{"data-slot":"dropdown-menu-separator",className:a("bg-border -mx-1 my-1 h-px",e),...t})}import{Select as S}from"radix-ui";import{CheckIcon as bt,ChevronDownIcon as qe,ChevronUpIcon as xt}from"lucide-react";import{jsx as x,jsxs as Se}from"react/jsx-runtime";function ce({...e}){return x(S.Root,{"data-slot":"select",...e})}function me({...e}){return x(S.Value,{"data-slot":"select-value",...e})}function pe({className:e,size:t="default",children:o,...d}){return Se(S.Trigger,{"data-slot":"select-trigger","data-size":t,className:a("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",e),...d,children:[o,x(S.Icon,{asChild:!0,children:x(qe,{className:"size-4 opacity-50"})})]})}function ue({className:e,children:t,position:o="popper",...d}){return x(S.Portal,{children:Se(S.Content,{"data-slot":"select-content",className:a("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",o==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",e),position:o,...d,children:[x(ht,{}),x(S.Viewport,{className:a("p-1",o==="popper"&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),children:t}),x(Ct,{})]})})}function te({className:e,children:t,...o}){return Se(S.Item,{"data-slot":"select-item",className:a("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",e),...o,children:[x("span",{className:"absolute right-2 flex size-3.5 items-center justify-center",children:x(S.ItemIndicator,{children:x(bt,{className:"size-4"})})}),x(S.ItemText,{children:t})]})}function ht({className:e,...t}){return x(S.ScrollUpButton,{"data-slot":"select-scroll-up-button",className:a("flex cursor-default items-center justify-center py-1",e),...t,children:x(xt,{className:"size-4"})})}function Ct({className:e,...t}){return x(S.ScrollDownButton,{"data-slot":"select-scroll-down-button",className:a("flex cursor-default items-center justify-center py-1",e),...t,children:x(qe,{className:"size-4"})})}import{Fragment as Dt,jsx as n,jsxs as g}from"react/jsx-runtime";function Ne({fields:e,filters:t,globalFilter:o,onGlobalFilterChange:d,fieldFilters:c,onFieldFilterChange:w,sortField:y,sortDirection:R,onSortChange:N,selectedCount:z,totalCount:M,visibleCount:B,onExport:A,onRefresh:h,loading:T,onClearFilters:u,onClearSorting:I}){let X=e.filter(r=>r.sortable),fe=Object.values(c).some(r=>r!=null&&r!=="")||o!=="",ae=y!=="";return n("div",{className:"rounded-xl p-0.5",children:n("div",{className:"px-2",children:n("div",{className:"flex flex-col gap-6",children:g("div",{className:"flex items-center justify-between",children:[n("div",{className:"flex items-center gap-3",children:t.length>0&&g("div",{className:"flex items-center gap-3 flex-wrap",children:[n("div",{className:"flex items-center gap-2 text-sm font-medium text-muted-foreground",children:n(Nt,{className:"h-4 w-4"})}),t.map(r=>n("div",{className:"relative min-w-[150px]",children:r.type==="select"?g(ce,{value:c[r.key]||"all",onValueChange:v=>w(r.key,v),children:[r.icon&&n(r.icon,{className:"size-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"}),n(pe,{className:a("h-9 rounded-lg w-full",r.icon&&"pl-9"),children:n(me,{placeholder:r.placeholder||"Select..."})}),g(ue,{className:"rounded-lg",children:[n(te,{value:"all",children:"All"}),r.options?.map(v=>n(te,{value:v.value,children:v.label},v.value))]})]}):g("div",{className:"relative",children:[r.icon&&n(r.icon,{className:"size-4 absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"}),n(xe,{type:r.type,placeholder:r.placeholder,value:c[r.key]||"",onChange:v=>w(r.key,v.target.value),className:a("h-9 rounded-lg",r.icon&&"pl-9")})]})},String(r.key)))]})}),g("div",{className:"flex items-center gap-2",children:[g("div",{className:"relative",children:[n(yt,{className:"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"}),n(xe,{placeholder:"Global search...",value:o,onChange:r=>d(r.target.value),className:"pl-9 h-9 rounded-lg max-w-max"})]}),X.length>0&&g(he,{children:[n(Ce,{asChild:!0,children:g(f,{variant:"outline",size:"sm",className:"rounded-lg gap-1",children:[n("span",{children:"Sort"}),n(Tt,{className:"h-4 w-4 opacity-50"})]})}),g(ye,{align:"end",className:"w-[200px] rounded-lg",children:[n(we,{children:"Sort By"}),n(de,{}),X.map(r=>g("div",{children:[g(U,{onClick:()=>N(r.key,"asc"),children:[r.label," (A-Z)"]}),g(U,{onClick:()=>N(r.key,"desc"),children:[r.label," (Z-A)"]})]},String(r.key))),ae&&g(Dt,{children:[n(de,{}),n(U,{onClick:I,children:"Clear All Sorting"})]})]})]}),g(he,{children:[n(Ce,{asChild:!0,children:n(f,{variant:"outline",size:"sm",className:"rounded-lg",children:n(Pt,{className:"h-4 w-4"})})}),g(ye,{align:"end",className:"w-[200px] rounded-lg",children:[n(we,{children:"Table Settings"}),n(de,{}),n(U,{onClick:I,children:"Clear All Sorting"}),n(U,{onClick:u,children:"Clear All Filters"})]})]}),A&&g(f,{variant:"outline",size:"sm",onClick:A,className:"rounded-lg",children:[n(wt,{className:"mr-2 h-4 w-4"}),"Export"]}),h&&n(f,{variant:"outline",size:"sm",onClick:h,disabled:T,className:"rounded-lg",children:n(St,{className:a("h-4 w-4",T&&"animate-spin")})})]})]})})})})}import{ChevronLeft as kt,ChevronRight as Rt,ChevronsLeft as zt,ChevronsRight as It}from"lucide-react";import{jsx as p,jsxs as k}from"react/jsx-runtime";function Ke({currentPage:e,totalPages:t,pageSize:o,totalItems:d,onPageChange:c,onPageSizeChange:w,config:y}){if(!y.enabled)return null;let R=y.pageSizeOptions||[10,20,50,100],N=(e-1)*o+1,z=Math.min(e*o,d),M=e>1,B=e<t,A=()=>{let T=[],u=[];for(let I=Math.max(2,e-2);I<=Math.min(t-1,e+2);I++)T.push(I);return e-2>2?u.push(1,"..."):u.push(1),u.push(...T),e+2<t-1?u.push("...",t):t>1&&u.push(t),u};return p("div",{className:"rounded-xl",children:k("div",{className:"flex flex-col sm:flex-row items-center justify-between gap-4",children:[p("div",{className:"flex items-center gap-6 text-sm text-muted-foreground",children:y.showInfo!==!1&&k("span",{children:["Showing ",N," to ",z," of ",d," entries"]})}),k("div",{className:"flex flex-col sm:flex-row items-center gap-4",children:[R&&k("div",{className:"flex items-center gap-2",children:[p("span",{className:"text-sm font-medium whitespace-nowrap",children:"Page size:"}),k(ce,{value:`${o}`,onValueChange:h=>w(Number(h)),children:[p(pe,{className:"h-9 w-[70px] rounded-lg",children:p(me,{})}),p(ue,{side:"top",className:"rounded-lg",children:R.map(h=>p(te,{value:`${h}`,children:h},h))})]})]}),k("div",{className:"flex items-center gap-2",children:[k(f,{variant:"outline",size:"sm",onClick:()=>c(1),disabled:!M,className:"hidden sm:flex rounded-lg",children:[p(zt,{className:"h-4 w-4"}),p("span",{className:"sr-only",children:"Go to first page"})]}),k(f,{variant:"outline",size:"sm",onClick:()=>c(e-1),disabled:!M,className:"rounded-lg",children:[p(kt,{className:"h-4 w-4 sm:mr-2"}),p("span",{className:"hidden sm:inline",children:"Previous"}),p("span",{className:"sr-only sm:hidden",children:"Go to previous page"})]}),y.showPageNumbers&&t>1&&p("div",{className:"hidden sm:flex items-center gap-1",children:A().map((h,T)=>{if(h==="...")return p("span",{className:"px-2 py-1 text-sm text-muted-foreground",children:"..."},`dots-${T}`);let u=h;return p(f,{variant:u===e?"default":"outline",size:"sm",className:"w-9 h-9 p-0 rounded-lg",onClick:()=>c(u),children:u},u)})}),k("div",{className:"sm:hidden flex items-center gap-2 px-3 py-1 text-sm font-medium bg-muted rounded-lg",children:[e," of ",t]}),k(f,{variant:"outline",size:"sm",onClick:()=>c(e+1),disabled:!B,className:"rounded-lg",children:[p("span",{className:"hidden sm:inline",children:"Next"}),p(Rt,{className:"h-4 w-4 sm:ml-2"}),p("span",{className:"sr-only sm:hidden",children:"Go to next page"})]}),k(f,{variant:"outline",size:"sm",onClick:()=>c(t),disabled:!B,className:"hidden sm:flex rounded-lg",children:[p(It,{className:"h-4 w-4"}),p("span",{className:"sr-only",children:"Go to last page"})]})]})]})]})})}import{jsx as m,jsxs as $}from"react/jsx-runtime";function Bt({data:e,template:t,fields:o=[],filters:d=[],pagination:c={enabled:!1},settings:w={},header:y,footer:R,className:N="",loading:z=!1,error:M,emptyMessage:B="No items found",emptyIcon:A,onSelectionChange:h,onExport:T,onRefresh:u,onTemplateReady:I,children:X}){let{enableSorting:fe=!0,enableFiltering:ae=!0,enableGlobalSearch:r=!0,enableSelection:v=!1,enableExport:Qe=!1,toolbar:Ye=!0,selectionMode:Z="multiple",gridCols:et={default:3,sm:1,md:2,lg:3,xl:4,"2xl":6},gap:ze=4,aspectRatio:Ie="auto",minCardWidth:Me=350,maxCardWidth:Be=350}=w,[H,Ae]=G(""),[J,Fe]=G({}),[O,_e]=G(""),[Q,Ge]=G("asc"),[F,re]=G(new Set),[ne,ie]=G(1),[E,tt]=G(c.pageSize||12),[Le,Ut]=G(et.default),b=Te(()=>{let i=[...e];if(r&&H){let l=o.filter(s=>s.searchable!==!1);i=i.filter(s=>l.some(P=>s[P.key]?.toString().toLowerCase().includes(H.toLowerCase())))}if(ae&&Object.keys(J).forEach(l=>{let s=J[l];if(s!=null&&s!==""){let P=o.find(D=>D.key===l);P&&(i=i.filter(D=>{let _=D[l];return P.type==="boolean"?_===(s==="true"):P.type==="number"?_===Number(s):_?.toString().toLowerCase().includes(String(s).toLowerCase())}))}}),fe&&O){let l=o.find(s=>s.key===O);l&&i.sort((s,P)=>{let D=s[O],_=P[O];if(l.type==="number")return Q==="asc"?Number(D)-Number(_):Number(_)-Number(D);if(l.type==="date"){let Y=new Date(D),ee=new Date(_);return Q==="asc"?Y.getTime()-ee.getTime():ee.getTime()-Y.getTime()}else{let Y=String(D).toLowerCase(),ee=String(_).toLowerCase();return Q==="asc"?Y.localeCompare(ee):ee.localeCompare(Y)}})}return i},[e,H,J,O,Q,o,r,ae,fe]),Ve=Te(()=>{if(!c.enabled)return b;let i=(ne-1)*E,l=i+E;return b.slice(i,l)},[b,ne,E,c.enabled]),ot=Math.ceil(b.length/E),ge=W(i=>{v&&re(l=>{let s=new Set(l);return Z==="single"?(s.clear(),s.add(i)):s.has(i)?s.delete(i):s.add(i),s})},[v,Z]),je=W(()=>{!v||Z==="single"||(F.size===b.length?re(new Set):re(new Set(b.map((i,l)=>l))))},[v,Z,F.size,b.length]),at=W((i,l)=>{Fe(s=>({...s,[i]:l})),ie(1)},[]),rt=W((i,l)=>{_e(i),Ge(l)},[]),$e=W(()=>{Ae(""),Fe({}),ie(1)},[]),nt=W(()=>{_e(""),Ge("asc")},[]),Oe=Te(()=>({getSelectedItems:()=>Array.from(F).map(i=>b[i]),clearSelection:()=>re(new Set),selectAll:je,getFilteredData:()=>b,getTotalCount:()=>e.length,getVisibleCount:()=>b.length,refresh:()=>u?.(),exportData:()=>T?.(b)}),[F,b,e.length,je,u,T]),ve=Mt(null);ve.current=Oe,Xe(()=>{I&&ve.current&&I(ve.current)},[]),Xe(()=>{if(v&&h){let i=Array.from(F).map(l=>b[l]);h(i)}},[F]);let it=a("w-full","overflow-hidden",N),st=a("grid",`gap-${ze}`,"w-full","mx-auto","items-start"),lt={gridTemplateColumns:Le===0?`repeat(auto-fill, minmax(clamp(${Me}px, 30%, ${Be}px), 1fr))`:`repeat(auto-fill, minmax(clamp(${Me}px, calc(100%/${Le} - ${ze*4}px), ${Be}px), 1fr))`,justifyItems:"center",alignItems:"stretch",gridAutoRows:"1fr",gridAutoFlow:"dense"};return M?m(se,{className:"w-full",children:m(le,{className:"flex items-center justify-center py-12",children:$("div",{className:"text-center",children:[m("div",{className:"text-red-500 mb-3 text-2xl",children:"\u26A0\uFE0F"}),m("p",{className:"text-sm text-muted-foreground mb-4",children:M}),u&&$(f,{variant:"outline",size:"sm",onClick:u,children:[m(Ze,{className:"mr-2 h-4 w-4"}),"Try Again"]})]})})}):$("div",{className:a("w-full flex gap-2 flex-col h-full",it),children:[y&&m(se,{className:"shadow-sm border-0 py-0 text-xl font-bold",children:m(le,{className:"p-2",children:y})}),Ye&&m(Ne,{fields:o,filters:d,globalFilter:H,onGlobalFilterChange:Ae,fieldFilters:J,onFieldFilterChange:at,sortField:O,sortDirection:Q,onSortChange:rt,selectedCount:F.size,totalCount:e.length,visibleCount:b.length,onExport:Qe?()=>T?.(b):void 0,onRefresh:u,loading:z,onClearFilters:$e,onClearSorting:nt}),m(se,{className:"border-0 overflow-auto shadow-none py-0 p-2 flex-1",children:m(le,{className:"px-0",children:$("div",{className:"relative",children:[z&&m("div",{className:"absolute inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center rounded-lg",children:$("div",{className:"flex items-center gap-3 bg-background/90 px-4 py-3 rounded-lg shadow-sm",children:[m(Ze,{className:"size-5 animate-spin text-primary"}),m("span",{className:"text-sm font-medium text-muted-foreground",children:"Loading..."})]})}),Ve.length>0?m("div",{className:a(st),style:lt,children:Ve.map((i,l)=>{let s=c.enabled?(ne-1)*E+l:l,P=F.has(s);return $("div",{className:a("relative h-full w-full flex flex-col","transition-all duration-200 overflow-hidden","rounded-2xl","border border-border/20 hover:border-border/50",Ie==="square"?"aspect-square":"",Ie==="video"?"aspect-video":"",v?"cursor-pointer":"",P?"ring-2 ring-primary":""),onClick:()=>v&&ge(s),children:[v&&Z==="multiple"&&m("div",{className:"absolute top-2 right-2 z-10",children:m(We,{checked:P,onCheckedChange:()=>ge(s),className:"bg-background/80 backdrop-blur-sm",onClick:D=>D.stopPropagation()})}),t(i,l,P,()=>ge(s))]},s)})}):$("div",{className:"flex flex-col gap-4 items-center justify-center py-12 text-center",children:[m("div",{className:"text-6xl",children:A||"\u{1F4CB}"}),m("p",{className:"text-lg font-medium text-muted-foreground mb-2",children:B}),(H||Object.values(J).some(i=>i))&&m(f,{variant:"outline",onClick:$e,children:"Clear Filters"})]})]})})}),c.enabled&&m("div",{className:"pb-1",children:m(Ke,{currentPage:ne,totalPages:ot,pageSize:E,totalItems:b.length,onPageChange:ie,onPageSizeChange:i=>{tt(i),ie(1)},config:c})}),R&&m("div",{className:"p-2 m-0.5",children:R}),X&&X(Oe)]})}import{Separator as At}from"radix-ui";import{jsx as Ft}from"react/jsx-runtime";function He({className:e,orientation:t="horizontal",decorative:o=!0,...d}){return Ft(At.Root,{"data-slot":"separator-root",decorative:o,orientation:t,className:a("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",e),...d})}import{Tooltip as q}from"radix-ui";import{jsx as K,jsxs as _t}from"react/jsx-runtime";function Pe({delayDuration:e=0,...t}){return K(q.Provider,{"data-slot":"tooltip-provider",delayDuration:e,...t})}function De({...e}){return K(Pe,{children:K(q.Root,{"data-slot":"tooltip",...e})})}function ke({...e}){return K(q.Trigger,{"data-slot":"tooltip-trigger",...e})}function Re({className:e,sideOffset:t=0,children:o,...d}){return K(q.Portal,{children:_t(q.Content,{"data-slot":"tooltip-content",sideOffset:t,className:a("bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",e),...d,children:[o,K(q.Arrow,{className:"bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"})]})})}import{Loader as Gt,X as Lt}from"lucide-react";import{AnimatePresence as Vt,motion as jt}from"framer-motion";import*as L from"react";import*as Je from"react-dom";import{jsx as C,jsxs as oe}from"react/jsx-runtime";function $t({controller:e,visible:t,container:o,children:d,className:c,...w}){let[y,R]=L.useState(!1);L.useLayoutEffect(()=>{R(!0)},[]),L.useEffect(()=>{function B(A){A.key==="Escape"&&e&&e.clearSelection()}return window.addEventListener("keydown",B),()=>window.removeEventListener("keydown",B)},[e]);let N=o??(y?globalThis.document?.body:null);if(!N||!e)return null;let z=e.getSelectedItems(),M=t??z.length>0;return Je.createPortal(C(Vt,{children:M&&C(jt.div,{role:"toolbar","aria-orientation":"horizontal",initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:20},transition:{duration:.3,ease:"easeInOut"},className:a("fixed inset-x-0 bottom-6 z-50 mx-auto flex w-fit flex-wrap items-center justify-center gap-2 rounded-xl border bg-primary/10 backdrop-blur-sm p-3 text-foreground ring-8 ring-primary/5",c),...w,children:C(Pe,{children:d})})}),N)}function Ot({size:e="sm",variant:t="secondary",tooltip:o,isPending:d,disabled:c,className:w,children:y,onClick:R,...N}){let z=C(f,{variant:t,size:e,className:a("gap-1.5 rounded-lg border border-secondary bg-secondary/50 hover:bg-secondary/70 transition-all duration-200",e==="icon"?"size-8":"h-8 px-3",w),disabled:c||d,onClick:R,...N,children:d?C(Gt,{className:"animate-spin"}):y});return o?oe(De,{children:[C(ke,{asChild:!0,children:z}),C(Re,{sideOffset:8,className:"rounded-lg border font-semibold text-foreground bg-secondary [&>span]:hidden",children:C("p",{children:o})})]}):z}function Et({controller:e}){let t=L.useCallback(()=>{e&&e.clearSelection()},[e]);if(!e)return null;let o=e.getSelectedItems();return oe("div",{className:"flex h-8 items-center rounded-lg border bg-muted/50 pr-1 pl-3",children:[oe("span",{className:"whitespace-nowrap text-sm font-medium",children:[o.length," selected"]}),C(He,{orientation:"vertical",className:"mr-2 ml-3 data-[orientation=vertical]:h-4"}),oe(De,{children:[C(ke,{asChild:!0,children:C(f,{variant:"ghost",size:"icon",className:"size-6 rounded-md",onClick:t,children:C(Lt,{className:"size-3.5"})})}),oe(Re,{sideOffset:10,className:"flex items-center gap-2 rounded-lg border px-3 py-2 font-semibold text-foreground bg-secondary [&>span]:hidden",children:[C("p",{children:"Clear selection"}),C("kbd",{className:"select-none rounded border bg-primary/50 px-2 py-1 font-mono font-normal text-[0.7rem] text-foreground shadow-sm",children:C("abbr",{title:"Escape",className:"no-underline",children:"Esc"})})]})]})]})}export{Bt as DataTemplate,$t as DataTemplateActionBar,Ot as DataTemplateActionBarAction,Et as DataTemplateActionBarSelection,Ne as DataTemplateToolbar};
+//# sourceMappingURL=index.js.map