{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-478",
  "type": "registry:component",
  "title": "Comp 478",
  "description": "Comp 478",
  "files": [
    {
      "path": "registry/ui-basic/comp-478.tsx",
      "content": "\"use client\";\n\nimport { useId, useMemo, useState } from \"react\";\n\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@/components/ui/select\";\nimport {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport {\n\tColumn,\n\tColumnDef,\n\tColumnFiltersState,\n\tflexRender,\n\tgetCoreRowModel,\n\tgetFacetedMinMaxValues,\n\tgetFacetedRowModel,\n\tgetFacetedUniqueValues,\n\tgetFilteredRowModel,\n\tgetSortedRowModel,\n\tRowData,\n\tSortingState,\n\tuseReactTable,\n} from \"@tanstack/react-table\";\nimport {\n\tChevronDownIcon,\n\tChevronUpIcon,\n\tExternalLinkIcon,\n\tSearchIcon,\n} from \"lucide-react\";\n\nimport { cn } from \"../utilities/cn\";\n\ndeclare module \"@tanstack/react-table\" {\n\t//allows us to define custom properties for our columns\n\tinterface ColumnMeta<TData extends RowData, TValue> {\n\t\tfilterVariant?: \"text\" | \"range\" | \"select\";\n\t}\n}\n\ntype Item = {\n\tid: string;\n\tkeyword: string;\n\tintents: Array<\n\t\t\"Informational\" | \"Navigational\" | \"Commercial\" | \"Transactional\"\n\t>;\n\tvolume: number;\n\tcpc: number;\n\ttraffic: number;\n\tlink: string;\n};\n\nconst columns: ColumnDef<Item>[] = [\n\t{\n\t\tid: \"select\",\n\t\theader: ({ table }) => (\n\t\t\t<Checkbox\n\t\t\t\tchecked={\n\t\t\t\t\ttable.getIsAllPageRowsSelected() ||\n\t\t\t\t\t(table.getIsSomePageRowsSelected() && \"indeterminate\")\n\t\t\t\t}\n\t\t\t\tonCheckedChange={(value) =>\n\t\t\t\t\ttable.toggleAllPageRowsSelected(!!value)\n\t\t\t\t}\n\t\t\t\taria-label=\"Select all\"\n\t\t\t/>\n\t\t),\n\t\tcell: ({ row }) => (\n\t\t\t<Checkbox\n\t\t\t\tchecked={row.getIsSelected()}\n\t\t\t\tonCheckedChange={(value) => row.toggleSelected(!!value)}\n\t\t\t\taria-label=\"Select row\"\n\t\t\t/>\n\t\t),\n\t},\n\t{\n\t\theader: \"Keyword\",\n\t\taccessorKey: \"keyword\",\n\t\tcell: ({ row }) => (\n\t\t\t<div className=\"font-medium\">{row.getValue(\"keyword\")}</div>\n\t\t),\n\t},\n\t{\n\t\theader: \"Intents\",\n\t\taccessorKey: \"intents\",\n\t\tcell: ({ row }) => {\n\t\t\tconst intents = row.getValue(\"intents\") as string[];\n\t\t\treturn (\n\t\t\t\t<div className=\"flex gap-1\">\n\t\t\t\t\t{intents.map((intent) => {\n\t\t\t\t\t\tconst styles = {\n\t\t\t\t\t\t\tInformational: \"bg-indigo-400/20 text-indigo-500\",\n\t\t\t\t\t\t\tNavigational: \"bg-emerald-400/20 text-emerald-500\",\n\t\t\t\t\t\t\tCommercial: \"bg-amber-400/20 text-amber-500\",\n\t\t\t\t\t\t\tTransactional: \"bg-rose-400/20 text-rose-500\",\n\t\t\t\t\t\t}[intent];\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={intent}\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"flex size-5 items-center justify-center rounded text-xs font-medium\",\n\t\t\t\t\t\t\t\t\tstyles\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{intent.charAt(0)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\tenableSorting: false,\n\t\tmeta: {\n\t\t\tfilterVariant: \"select\",\n\t\t},\n\t\tfilterFn: (row, id, filterValue) => {\n\t\t\tconst rowValue = row.getValue(id);\n\t\t\treturn Array.isArray(rowValue) && rowValue.includes(filterValue);\n\t\t},\n\t},\n\t{\n\t\theader: \"Volume\",\n\t\taccessorKey: \"volume\",\n\t\tcell: ({ row }) => {\n\t\t\tconst volume = parseInt(row.getValue(\"volume\"));\n\t\t\treturn new Intl.NumberFormat(\"en-US\", {\n\t\t\t\tnotation: \"compact\",\n\t\t\t\tmaximumFractionDigits: 1,\n\t\t\t}).format(volume);\n\t\t},\n\t\tmeta: {\n\t\t\tfilterVariant: \"range\",\n\t\t},\n\t},\n\t{\n\t\theader: \"CPC\",\n\t\taccessorKey: \"cpc\",\n\t\tcell: ({ row }) => <div>${row.getValue(\"cpc\")}</div>,\n\t\tmeta: {\n\t\t\tfilterVariant: \"range\",\n\t\t},\n\t},\n\t{\n\t\theader: \"Traffic\",\n\t\taccessorKey: \"traffic\",\n\t\tcell: ({ row }) => {\n\t\t\tconst traffic = parseInt(row.getValue(\"traffic\"));\n\t\t\treturn new Intl.NumberFormat(\"en-US\", {\n\t\t\t\tnotation: \"compact\",\n\t\t\t\tmaximumFractionDigits: 1,\n\t\t\t}).format(traffic);\n\t\t},\n\t\tmeta: {\n\t\t\tfilterVariant: \"range\",\n\t\t},\n\t},\n\t{\n\t\theader: \"Link\",\n\t\taccessorKey: \"link\",\n\t\tcell: ({ row }) => (\n\t\t\t<a className=\"inline-flex items-center gap-1 hover:underline\" href=\"#\">\n\t\t\t\t{row.getValue(\"link\")}{\" \"}\n\t\t\t\t<ExternalLinkIcon size={12} aria-hidden=\"true\" />\n\t\t\t</a>\n\t\t),\n\t\tenableSorting: false,\n\t},\n];\n\nconst items: Item[] = [\n\t{\n\t\tid: \"1\",\n\t\tkeyword: \"react components\",\n\t\tintents: [\"Informational\", \"Navigational\"],\n\t\tvolume: 2507,\n\t\tcpc: 2.5,\n\t\ttraffic: 88,\n\t\tlink: \"https://originui.com\",\n\t},\n\t{\n\t\tid: \"2\",\n\t\tkeyword: \"buy react templates\",\n\t\tintents: [\"Commercial\", \"Transactional\"],\n\t\tvolume: 1850,\n\t\tcpc: 4.75,\n\t\ttraffic: 65,\n\t\tlink: \"https://originui.com/input\",\n\t},\n\t{\n\t\tid: \"3\",\n\t\tkeyword: \"react ui library\",\n\t\tintents: [\"Informational\", \"Commercial\"],\n\t\tvolume: 3200,\n\t\tcpc: 3.25,\n\t\ttraffic: 112,\n\t\tlink: \"https://originui.com/badge\",\n\t},\n\t{\n\t\tid: \"4\",\n\t\tkeyword: \"tailwind components download\",\n\t\tintents: [\"Transactional\"],\n\t\tvolume: 890,\n\t\tcpc: 1.95,\n\t\ttraffic: 45,\n\t\tlink: \"https://originui.com/alert\",\n\t},\n\t{\n\t\tid: \"5\",\n\t\tkeyword: \"react dashboard template free\",\n\t\tintents: [\"Commercial\", \"Transactional\"],\n\t\tvolume: 4100,\n\t\tcpc: 5.5,\n\t\ttraffic: 156,\n\t\tlink: \"https://originui.com/tabs\",\n\t},\n\t{\n\t\tid: \"6\",\n\t\tkeyword: \"how to use react components\",\n\t\tintents: [\"Informational\"],\n\t\tvolume: 1200,\n\t\tcpc: 1.25,\n\t\ttraffic: 42,\n\t\tlink: \"https://originui.com/table\",\n\t},\n\t{\n\t\tid: \"7\",\n\t\tkeyword: \"react ui kit premium\",\n\t\tintents: [\"Commercial\", \"Transactional\"],\n\t\tvolume: 760,\n\t\tcpc: 6.8,\n\t\ttraffic: 28,\n\t\tlink: \"https://originui.com/avatar\",\n\t},\n\t{\n\t\tid: \"8\",\n\t\tkeyword: \"react component documentation\",\n\t\tintents: [\"Informational\", \"Navigational\"],\n\t\tvolume: 950,\n\t\tcpc: 1.8,\n\t\ttraffic: 35,\n\t\tlink: \"https://originui.com\",\n\t},\n];\n\nexport default function Component() {\n\tconst [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n\tconst [sorting, setSorting] = useState<SortingState>([\n\t\t{\n\t\t\tid: \"traffic\",\n\t\t\tdesc: false,\n\t\t},\n\t]);\n\n\tconst table = useReactTable({\n\t\tdata: items,\n\t\tcolumns,\n\t\tstate: {\n\t\t\tsorting,\n\t\t\tcolumnFilters,\n\t\t},\n\t\tonColumnFiltersChange: setColumnFilters,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\tgetFilteredRowModel: getFilteredRowModel(), //client-side filtering\n\t\tgetSortedRowModel: getSortedRowModel(),\n\t\tgetFacetedRowModel: getFacetedRowModel(), // client-side faceting\n\t\tgetFacetedUniqueValues: getFacetedUniqueValues(), // generate unique values for select filter/autocomplete\n\t\tgetFacetedMinMaxValues: getFacetedMinMaxValues(), // generate min/max values for range filter\n\t\tonSortingChange: setSorting,\n\t\tenableSortingRemoval: false,\n\t});\n\n\treturn (\n\t\t<div className=\"space-y-6\">\n\t\t\t{/* Filters */}\n\t\t\t<div className=\"flex flex-wrap gap-3\">\n\t\t\t\t{/* Search input */}\n\t\t\t\t<div className=\"w-44\">\n\t\t\t\t\t<Filter column={table.getColumn(\"keyword\")!} />\n\t\t\t\t</div>\n\t\t\t\t{/* Intents select */}\n\t\t\t\t<div className=\"w-36\">\n\t\t\t\t\t<Filter column={table.getColumn(\"intents\")!} />\n\t\t\t\t</div>\n\t\t\t\t{/* Volume inputs */}\n\t\t\t\t<div className=\"w-36\">\n\t\t\t\t\t<Filter column={table.getColumn(\"volume\")!} />\n\t\t\t\t</div>\n\t\t\t\t{/* CPC inputs */}\n\t\t\t\t<div className=\"w-36\">\n\t\t\t\t\t<Filter column={table.getColumn(\"cpc\")!} />\n\t\t\t\t</div>\n\t\t\t\t{/* Traffic inputs */}\n\t\t\t\t<div className=\"w-36\">\n\t\t\t\t\t<Filter column={table.getColumn(\"traffic\")!} />\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<Table>\n\t\t\t\t<TableHeader>\n\t\t\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t\t\t<TableRow key={headerGroup.id} className=\"bg-muted/50\">\n\t\t\t\t\t\t\t{headerGroup.headers.map((header) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\t\t\t\tkey={header.id}\n\t\t\t\t\t\t\t\t\t\tclassName=\"relative h-10 border-t select-none\"\n\t\t\t\t\t\t\t\t\t\taria-sort={\n\t\t\t\t\t\t\t\t\t\t\theader.column.getIsSorted() === \"asc\"\n\t\t\t\t\t\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t\t\t\t\t\t: header.column.getIsSorted() === \"desc\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"descending\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: \"none\"\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{header.isPlaceholder ? null : header.column.getCanSort() ? (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getCanSort() &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"flex h-full cursor-pointer items-center justify-between gap-2 select-none\"\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={header.column.getToggleSortingHandler()}\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// Enhanced keyboard handling for sorting\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getCanSort() &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(e.key === \"Enter\" || e.key === \" \")\n\t\t\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getToggleSortingHandler()?.(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\te\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\ttabIndex={\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getCanSort()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.getContext()\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t{{\n\t\t\t\t\t\t\t\t\t\t\t\t\tasc: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ChevronUpIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"shrink-0 opacity-60\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\tdesc: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<ChevronDownIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"shrink-0 opacity-60\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t}[\n\t\t\t\t\t\t\t\t\t\t\t\t\theader.column.getIsSorted() as string\n\t\t\t\t\t\t\t\t\t\t\t\t] ?? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"size-4\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\tflexRender(\n\t\t\t\t\t\t\t\t\t\t\t\theader.column.columnDef.header,\n\t\t\t\t\t\t\t\t\t\t\t\theader.getContext()\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t))}\n\t\t\t\t</TableHeader>\n\t\t\t\t<TableBody>\n\t\t\t\t\t{table.getRowModel().rows?.length ? (\n\t\t\t\t\t\ttable.getRowModel().rows.map((row) => (\n\t\t\t\t\t\t\t<TableRow\n\t\t\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\t\t\tdata-state={row.getIsSelected() && \"selected\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t\t\t\t\t\t<TableCell key={cell.id}>\n\t\t\t\t\t\t\t\t\t\t{flexRender(\n\t\t\t\t\t\t\t\t\t\t\tcell.column.columnDef.cell,\n\t\t\t\t\t\t\t\t\t\t\tcell.getContext()\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t\t))\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<TableRow>\n\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\tcolSpan={columns.length}\n\t\t\t\t\t\t\t\tclassName=\"h-24 text-center\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tNo results.\n\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t</TableRow>\n\t\t\t\t\t)}\n\t\t\t\t</TableBody>\n\t\t\t</Table>\n\t\t\t<p className=\"text-muted-foreground mt-4 text-center text-sm\">\n\t\t\t\tData table with filters made with{\" \"}\n\t\t\t\t<a\n\t\t\t\t\tclassName=\"hover:text-foreground underline\"\n\t\t\t\t\thref=\"https://tanstack.com/table\"\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t>\n\t\t\t\t\tTanStack Table\n\t\t\t\t</a>\n\t\t\t</p>\n\t\t</div>\n\t);\n}\n\nfunction Filter({ column }: { column: Column<any, unknown> }) {\n\tconst id = useId();\n\tconst columnFilterValue = column.getFilterValue();\n\tconst { filterVariant } = column.columnDef.meta ?? {};\n\tconst columnHeader =\n\t\ttypeof column.columnDef.header === \"string\"\n\t\t\t? column.columnDef.header\n\t\t\t: \"\";\n\tconst sortedUniqueValues = useMemo(() => {\n\t\tif (filterVariant === \"range\") return [];\n\n\t\t// Get all unique values from the column\n\t\tconst values = Array.from(column.getFacetedUniqueValues().keys());\n\n\t\t// If the values are arrays, flatten them and get unique items\n\t\tconst flattenedValues = values.reduce((acc: string[], curr) => {\n\t\t\tif (Array.isArray(curr)) {\n\t\t\t\treturn [...acc, ...curr];\n\t\t\t}\n\t\t\treturn [...acc, curr];\n\t\t}, []);\n\n\t\t// Get unique values and sort them\n\t\treturn Array.from(new Set(flattenedValues)).sort();\n\t}, [column.getFacetedUniqueValues(), filterVariant]);\n\n\tif (filterVariant === \"range\") {\n\t\treturn (\n\t\t\t<div className=\"not-first:*:mt-2\">\n\t\t\t\t<Label>{columnHeader}</Label>\n\t\t\t\t<div className=\"flex\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\tid={`${id}-range-1`}\n\t\t\t\t\t\tclassName=\"flex-1 rounded-e-none [-moz-appearance:textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n\t\t\t\t\t\tvalue={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n\t\t\t\t\t\tonChange={(e) =>\n\t\t\t\t\t\t\tcolumn.setFilterValue((old: [number, number]) => [\n\t\t\t\t\t\t\t\te.target.value ? Number(e.target.value) : undefined,\n\t\t\t\t\t\t\t\told?.[1],\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t}\n\t\t\t\t\t\tplaceholder=\"Min\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\taria-label={`${columnHeader} min`}\n\t\t\t\t\t/>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tid={`${id}-range-2`}\n\t\t\t\t\t\tclassName=\"-ms-px flex-1 rounded-s-none [-moz-appearance:textfield] focus:z-10 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none\"\n\t\t\t\t\t\tvalue={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n\t\t\t\t\t\tonChange={(e) =>\n\t\t\t\t\t\t\tcolumn.setFilterValue((old: [number, number]) => [\n\t\t\t\t\t\t\t\told?.[0],\n\t\t\t\t\t\t\t\te.target.value ? Number(e.target.value) : undefined,\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t}\n\t\t\t\t\t\tplaceholder=\"Max\"\n\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\taria-label={`${columnHeader} max`}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (filterVariant === \"select\") {\n\t\treturn (\n\t\t\t<div className=\"not-first:*:mt-2\">\n\t\t\t\t<Label htmlFor={`${id}-select`}>{columnHeader}</Label>\n\t\t\t\t<Select\n\t\t\t\t\tvalue={columnFilterValue?.toString() ?? \"all\"}\n\t\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\t\tcolumn.setFilterValue(value === \"all\" ? undefined : value);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<SelectTrigger id={`${id}-select`}>\n\t\t\t\t\t\t<SelectValue />\n\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t<SelectItem value=\"all\">All</SelectItem>\n\t\t\t\t\t\t{sortedUniqueValues.map((value) => (\n\t\t\t\t\t\t\t<SelectItem key={String(value)} value={String(value)}>\n\t\t\t\t\t\t\t\t{String(value)}\n\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</SelectContent>\n\t\t\t\t</Select>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className=\"not-first:*:mt-2\">\n\t\t\t<Label htmlFor={`${id}-input`}>{columnHeader}</Label>\n\t\t\t<div className=\"relative\">\n\t\t\t\t<Input\n\t\t\t\t\tid={`${id}-input`}\n\t\t\t\t\tclassName=\"peer ps-9\"\n\t\t\t\t\tvalue={(columnFilterValue ?? \"\") as string}\n\t\t\t\t\tonChange={(e) => column.setFilterValue(e.target.value)}\n\t\t\t\t\tplaceholder={`Search ${columnHeader.toLowerCase()}`}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t/>\n\t\t\t\t<div className=\"text-muted-foreground/80 pointer-events-none absolute inset-y-0 inset-s-0 flex items-center justify-center ps-3 peer-disabled:opacity-50\">\n\t\t\t\t\t<SearchIcon size={16} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/checkbox.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\r\nimport { Check } from \"lucide-react\";\r\n\r\nconst Checkbox = React.forwardRef<\r\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\r\n\tReact.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n\t<CheckboxPrimitive.Root\r\n\t\tref={ref}\r\n\t\tclassName={cn(\r\n\t\t\t\"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\r\n\t\t\tclassName\r\n\t\t)}\r\n\t\t{...props}\r\n\t>\r\n\t\t<CheckboxPrimitive.Indicator\r\n\t\t\tclassName={cn(\"flex items-center justify-center text-current\")}\r\n\t\t>\r\n\t\t\t<Check className=\"h-4 w-4\" />\r\n\t\t</CheckboxPrimitive.Indicator>\r\n\t</CheckboxPrimitive.Root>\r\n));\r\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\r\n\r\nexport { Checkbox };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/input.tsx",
      "content": "// SHADCN UI GENERATED CODE\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\nexport interface InputProps\n\textends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, type, ...props }, ref) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype={type}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/label.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst labelVariants = cva(\n\t\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\nconst Label = React.forwardRef<\n\tReact.ElementRef<typeof LabelPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n\t\tVariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n\t<LabelPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(labelVariants(), className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n",
      "type": "registry:ui"
    }
  ]
}