50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T30cc,"use client"; import * as React from "react"; import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, flexRender, type ColumnDef, type SortingState, type RowSelectionState, type ColumnFiltersState, type PaginationState, type VisibilityState, type OnChangeFn, type Row, type Column, } from "@tanstack/react-table"; import { HugeiconsIcon } from "@hugeicons/react"; import { ArrowUpDownIcon, SortByDown01Icon, SortByUp01Icon, } from "@hugeicons/core-free-icons"; import { cn } from "@/lib/utils"; import { elevatedSurface } from "@/registry/default/lib/elevated"; import { Checkbox } from "@/registry/default/checkbox/checkbox"; import { DataTableContext, useDataTable, } from "@/registry/default/data-table/data-table-context"; import { Toolbar, ToolbarSeparator, type ToolbarProps, } from "@/registry/default/toolbar/toolbar"; import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, type TableProps, } from "@/registry/default/table/table"; import { DataTableSearch } from "@/registry/default/data-table/data-table-search"; import { DataTableColumnToggle } from "@/registry/default/data-table/data-table-column-toggle"; import { DataTablePagination } from "@/registry/default/data-table/data-table-pagination"; export interface DataTableProps { columns: ColumnDef[]; data: TData[]; children: React.ReactNode; className?: string; enableSorting?: boolean; enableRowSelection?: boolean | ((row: Row) => boolean); enableMultiRowSelection?: boolean; enableFiltering?: boolean; enablePagination?: boolean; showSelectionColumn?: boolean; sorting?: SortingState; onSortingChange?: OnChangeFn; rowSelection?: RowSelectionState; onRowSelectionChange?: OnChangeFn; columnFilters?: ColumnFiltersState; onColumnFiltersChange?: OnChangeFn; pagination?: PaginationState; onPaginationChange?: OnChangeFn; columnVisibility?: VisibilityState; onColumnVisibilityChange?: OnChangeFn; globalFilter?: string; onGlobalFilterChange?: OnChangeFn; getRowId?: (originalRow: TData, index: number, parent?: Row) => string; } function DataTable({ columns: userColumns, data, children, className, enableSorting = false, enableRowSelection = false, enableMultiRowSelection = true, enableFiltering = false, enablePagination = false, showSelectionColumn = true, sorting: controlledSorting, onSortingChange, rowSelection: controlledRowSelection, onRowSelectionChange, columnFilters: controlledColumnFilters, onColumnFiltersChange, pagination: controlledPagination, onPaginationChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, getRowId, }: DataTableProps) { const [internalSorting, setInternalSorting] = React.useState( [], ); const [internalRowSelection, setInternalRowSelection] = React.useState({}); const [internalColumnFilters, setInternalColumnFilters] = React.useState([]); const [internalPagination, setInternalPagination] = React.useState({ pageIndex: 0, pageSize: 10, }); const [internalGlobalFilter, setInternalGlobalFilter] = React.useState(""); const [internalColumnVisibility, setInternalColumnVisibility] = React.useState({}); const sorting = controlledSorting ?? internalSorting; const rowSelection = controlledRowSelection ?? internalRowSelection; const columnFilters = controlledColumnFilters ?? internalColumnFilters; const pagination = controlledPagination ?? internalPagination; const globalFilter = controlledGlobalFilter ?? internalGlobalFilter; const columnVisibility = controlledColumnVisibility ?? internalColumnVisibility; const columns = React.useMemo(() => { if (!enableRowSelection || !showSelectionColumn) { return userColumns; } const selectionColumn: ColumnDef = { id: "__select__", header: ({ table }) => enableMultiRowSelection ? (

table.toggleAllPageRowsSelected(!!value) } aria-label="Select all" />

) : null, cell: ({ row }) => (

row.toggleSelected(!!value)} aria-label="Select row" />

), enableSorting: false, enableHiding: false, }; return [selectionColumn, ...userColumns]; }, [ userColumns, enableRowSelection, enableMultiRowSelection, showSelectionColumn, ]); const table = useReactTable({ data, columns, getRowId, state: { sorting, rowSelection, columnFilters, pagination, globalFilter, columnVisibility, }, onSortingChange: onSortingChange ?? setInternalSorting, onRowSelectionChange: onRowSelectionChange ?? setInternalRowSelection, onColumnFiltersChange: onColumnFiltersChange ?? setInternalColumnFilters, onPaginationChange: onPaginationChange ?? setInternalPagination, onGlobalFilterChange: onGlobalFilterChange ?? setInternalGlobalFilter, onColumnVisibilityChange: onColumnVisibilityChange ?? setInternalColumnVisibility, getCoreRowModel: getCoreRowModel(), ...(enableSorting && { getSortedRowModel: getSortedRowModel() }), ...(enableFiltering && { getFilteredRowModel: getFilteredRowModel() }), ...(enablePagination && { getPaginationRowModel: getPaginationRowModel() }), enableRowSelection, enableMultiRowSelection, globalFilterFn: "includesString", }); return (

{children}

); } function DataTableToolbar({ className, ...props }: ToolbarProps) { return ( ); } export interface DataTableContentProps extends Omit { children: React.ReactNode; } function DataTableContent({ bordered, striped, hoverable, rowDividers = true, className, children, ...tableProps }: DataTableContentProps) { return ( {children}

); } function SortableHeader({ column, children, align, isFirst, isLast, }: { column: Column; children: React.ReactNode; align?: "left" | "center" | "right"; isFirst?: boolean; isLast?: boolean; }) { return ( ); } export interface DataTableHeaderProps extends React.ComponentProps< typeof TableHeader > { enableSorting?: boolean; } function DataTableHeader({ enableSorting = false, className, ...props }: DataTableHeaderProps) { const { table } = useDataTable(); const renderHeader = ( header: ReturnType[0]["headers"][0], index: number, totalHeaders: number, ) => { if (header.isPlaceholder) return null; const headerDef = header.column.columnDef.header; const canSort = header.column.getCanSort(); const meta = header.column.columnDef.meta as | { align?: "left" | "center" | "right" } | undefined; if (typeof headerDef === "string" && enableSorting && canSort) { return ( {headerDef} ); } return flexRender(headerDef, header.getContext()); }; return ( {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header, index) => ( {renderHeader(header, index, headerGroup.headers.length)} ))} ))} ); } export interface DataTableBodyProps extends React.ComponentProps< typeof TableBody > { emptyState?: React.ReactNode; } function DataTableBody({ emptyState, className, ...props }: DataTableBodyProps) { const { table } = useDataTable(); const totalColumns = table.getAllColumns().length; return ( {table.getRowModel().rows?.length ? ( table.getRowModel().rows.map((row) => ( {row.getVisibleCells().map((cell) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} )) ) : ( {emptyState ?? "No results."} )} ); } export type DataTableFooterProps = React.ComponentProps; function DataTableFooter({ className, children, ...props }: DataTableFooterProps) { return ( {children} ); } export { DataTable, DataTableToolbar, ToolbarSeparator as DataTableToolbarSeparator, DataTableSearch, DataTableColumnToggle, DataTableContent, DataTableHeader, DataTableBody, DataTableFooter, DataTablePagination, useDataTable, }; export type { ColumnDef, SortingState, RowSelectionState, ColumnFiltersState, VisibilityState, PaginationState, }; 53:T679,"use client"; import * as React from "react"; import { HugeiconsIcon } from "@hugeicons/react"; import { FilterHorizontalIcon } from "@hugeicons/core-free-icons"; import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuCheckboxItem, } from "@/registry/default/dropdown-menu/dropdown-menu"; import { Button } from "@/registry/default/button/button"; import { useDataTable } from "@/registry/default/data-table/data-table-context"; function DataTableColumnToggle() { const { table } = useDataTable(); const toggleableColumns = table .getAllColumns() .filter((col) => col.id !== "__select__" && col.getCanHide()); return ( }> Toggle columns {toggleableColumns.map((column) => { const label = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id; return ( column.toggleVisibility(!!checked)} > {label} ); })} ); } export { DataTableColumnToggle }; 54:T4ca,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { Button } from "@/registry/default/button/button" import { useDataTable } from "@/registry/default/data-table/data-table-context" interface DataTablePaginationProps { className?: string showSelectedCount?: boolean } function DataTablePagination({ className, showSelectedCount = true, }: DataTablePaginationProps) { const { table } = useDataTable() return (

{showSelectedCount ? ( {table.getFilteredSelectedRowModel().rows.length} of{" "} {table.getFilteredRowModel().rows.length} row(s) selected ) : (

)}

) } export { DataTablePagination } 55:T597,"use client"; import * as React from "react"; import { Toolbar } from "@base-ui/react/toolbar"; import { HugeiconsIcon } from "@hugeicons/react"; import { Search01Icon } from "@hugeicons/core-free-icons"; import { cn } from "@/lib/utils"; import { useDataTable } from "@/registry/default/data-table/data-table-context"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/registry/default/input-group/input-group"; interface DataTableSearchProps extends Omit< React.ComponentProps<"input">, "value" | "onChange" | "size" > { placeholder?: string; size?: "default" | "sm"; } function DataTableSearch({ placeholder = "Search and filter", size = "sm", className, ...props }: DataTableSearchProps) { const { table } = useDataTable(); return ( table.setGlobalFilter(e.target.value)} className={cn("py-0", className)} render={} {...props} /> ); } export { DataTableSearch }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tanstack/react-table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-table"}]]}]}],["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L50",null,{"namespace":"@cubby-ui","registryDependencies":["@cubby-ui/checkbox","@cubby-ui/toolbar","@cubby-ui/table","@cubby-ui/dropdown-menu","@cubby-ui/button","@cubby-ui/input-group","@cubby-ui/elevated"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/data-table/data-table.tsx","content":"$52","type":"registry:ui","target":"components/ui/cubby-ui/data-table/data-table.tsx"},{"path":"registry/default/data-table/data-table-column-toggle.tsx","content":"$53","type":"registry:ui","target":"components/ui/cubby-ui/data-table/data-table-column-toggle.tsx"},{"path":"registry/default/data-table/data-table-context.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { type Table } from \"@tanstack/react-table\"\n\ninterface DataTableContextValue {\n\ttable: Table\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Generic context requires any; type safety is enforced via useDataTable()\nconst DataTableContext = React.createContext | null>(\n\tnull\n)\n\nfunction useDataTable() {\n\tconst context = React.useContext(DataTableContext)\n\tif (!context) {\n\t\tthrow new Error(\"useDataTable must be used within a DataTable\")\n\t}\n\treturn context as DataTableContextValue\n}\n\nexport { DataTableContext, useDataTable }\nexport type { DataTableContextValue }\n","type":"registry:ui","target":"components/ui/cubby-ui/data-table/data-table-context.tsx"},{"path":"registry/default/data-table/data-table-pagination.tsx","content":"$54","type":"registry:ui","target":"components/ui/cubby-ui/data-table/data-table-pagination.tsx"},{"path":"registry/default/data-table/data-table-search.tsx","content":"$55","type":"registry:ui","target":"components/ui/cubby-ui/data-table/data-table-search.tsx"}],"className":"h-[70svh] min-h-80"}]]}]