love-ui 1.2.12 → 1.2.14

package/public/r/comp-478.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-478",
+  "type": "registry:component",
+  "dependencies": [
+    "@tanstack/react-table"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/table.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-478.tsx",
+      "content": "\"use client\"\n\nimport { useId, useMemo, useState } from \"react\"\nimport {\n  Column,\n  ColumnDef,\n  ColumnFiltersState,\n  flexRender,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getSortedRowModel,\n  RowData,\n  SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  ExternalLinkIcon,\n  SearchIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/building-blocks/default/ui/table\"\n\ndeclare module \"@tanstack/react-table\" {\n  //allows us to define custom properties for our columns\n  interface ColumnMeta<TData extends RowData, TValue> {\n    filterVariant?: \"text\" | \"range\" | \"select\"\n  }\n}\n\ntype Item = {\n  id: string\n  keyword: string\n  intents: Array<\n    \"Informational\" | \"Navigational\" | \"Commercial\" | \"Transactional\"\n  >\n  volume: number\n  cpc: number\n  traffic: number\n  link: string\n}\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n  },\n  {\n    header: \"Keyword\",\n    accessorKey: \"keyword\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"keyword\")}</div>\n    ),\n  },\n  {\n    header: \"Intents\",\n    accessorKey: \"intents\",\n    cell: ({ row }) => {\n      const intents = row.getValue(\"intents\") as string[]\n      return (\n        <div className=\"flex gap-1\">\n          {intents.map((intent) => {\n            const styles = {\n              Informational: \"bg-indigo-400/20 text-indigo-500\",\n              Navigational: \"bg-emerald-400/20 text-emerald-500\",\n              Commercial: \"bg-amber-400/20 text-amber-500\",\n              Transactional: \"bg-rose-400/20 text-rose-500\",\n            }[intent]\n\n            return (\n              <div\n                key={intent}\n                className={cn(\n                  \"flex size-5 items-center justify-center rounded text-xs font-medium\",\n                  styles\n                )}\n              >\n                {intent.charAt(0)}\n              </div>\n            )\n          })}\n        </div>\n      )\n    },\n    enableSorting: false,\n    meta: {\n      filterVariant: \"select\",\n    },\n    filterFn: (row, id, filterValue) => {\n      const rowValue = row.getValue(id)\n      return Array.isArray(rowValue) && rowValue.includes(filterValue)\n    },\n  },\n  {\n    header: \"Volume\",\n    accessorKey: \"volume\",\n    cell: ({ row }) => {\n      const volume = parseInt(row.getValue(\"volume\"))\n      return new Intl.NumberFormat(\"en-US\", {\n        notation: \"compact\",\n        maximumFractionDigits: 1,\n      }).format(volume)\n    },\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    header: \"CPC\",\n    accessorKey: \"cpc\",\n    cell: ({ row }) => <div>${row.getValue(\"cpc\")}</div>,\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    header: \"Traffic\",\n    accessorKey: \"traffic\",\n    cell: ({ row }) => {\n      const traffic = parseInt(row.getValue(\"traffic\"))\n      return new Intl.NumberFormat(\"en-US\", {\n        notation: \"compact\",\n        maximumFractionDigits: 1,\n      }).format(traffic)\n    },\n    meta: {\n      filterVariant: \"range\",\n    },\n  },\n  {\n    header: \"Link\",\n    accessorKey: \"link\",\n    cell: ({ row }) => (\n      <a className=\"inline-flex items-center gap-1 hover:underline\" href=\"#\">\n        {row.getValue(\"link\")} <ExternalLinkIcon size={12} aria-hidden=\"true\" />\n      </a>\n    ),\n    enableSorting: false,\n  },\n]\n\nconst items: Item[] = [\n  {\n    id: \"1\",\n    keyword: \"react components\",\n    intents: [\"Informational\", \"Navigational\"],\n    volume: 2507,\n    cpc: 2.5,\n    traffic: 88,\n    link: \"https://loveui.dev/building-blocks\",\n  },\n  {\n    id: \"2\",\n    keyword: \"buy react templates\",\n    intents: [\"Commercial\", \"Transactional\"],\n    volume: 1850,\n    cpc: 4.75,\n    traffic: 65,\n    link: \"https://loveui.dev/building-blocks/input\",\n  },\n  {\n    id: \"3\",\n    keyword: \"react ui library\",\n    intents: [\"Informational\", \"Commercial\"],\n    volume: 3200,\n    cpc: 3.25,\n    traffic: 112,\n    link: \"https://loveui.dev/building-blocks/badge\",\n  },\n  {\n    id: \"4\",\n    keyword: \"tailwind components download\",\n    intents: [\"Transactional\"],\n    volume: 890,\n    cpc: 1.95,\n    traffic: 45,\n    link: \"https://loveui.dev/building-blocks/alert\",\n  },\n  {\n    id: \"5\",\n    keyword: \"react dashboard template free\",\n    intents: [\"Commercial\", \"Transactional\"],\n    volume: 4100,\n    cpc: 5.5,\n    traffic: 156,\n    link: \"https://loveui.dev/building-blocks/tabs\",\n  },\n  {\n    id: \"6\",\n    keyword: \"how to use react components\",\n    intents: [\"Informational\"],\n    volume: 1200,\n    cpc: 1.25,\n    traffic: 42,\n    link: \"https://loveui.dev/building-blocks/table\",\n  },\n  {\n    id: \"7\",\n    keyword: \"react ui kit premium\",\n    intents: [\"Commercial\", \"Transactional\"],\n    volume: 760,\n    cpc: 6.8,\n    traffic: 28,\n    link: \"https://loveui.dev/building-blocks/avatar\",\n  },\n  {\n    id: \"8\",\n    keyword: \"react component documentation\",\n    intents: [\"Informational\", \"Navigational\"],\n    volume: 950,\n    cpc: 1.8,\n    traffic: 35,\n    link: \"https://loveui.dev/building-blocks\",\n  },\n]\n\nexport default function Component() {\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      id: \"traffic\",\n      desc: false,\n    },\n  ])\n\n  const table = useReactTable({\n    data: items,\n    columns,\n    state: {\n      sorting,\n      columnFilters,\n    },\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(), //client-side filtering\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(), // client-side faceting\n    getFacetedUniqueValues: getFacetedUniqueValues(), // generate unique values for select filter/autocomplete\n    getFacetedMinMaxValues: getFacetedMinMaxValues(), // generate min/max values for range filter\n    onSortingChange: setSorting,\n    enableSortingRemoval: false,\n  })\n\n  return (\n    <div className=\"space-y-6\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap gap-3\">\n        {/* Search input */}\n        <div className=\"w-44\">\n          <Filter column={table.getColumn(\"keyword\")!} />\n        </div>\n        {/* Intents select */}\n        <div className=\"w-36\">\n          <Filter column={table.getColumn(\"intents\")!} />\n        </div>\n        {/* Volume inputs */}\n        <div className=\"w-36\">\n          <Filter column={table.getColumn(\"volume\")!} />\n        </div>\n        {/* CPC inputs */}\n        <div className=\"w-36\">\n          <Filter column={table.getColumn(\"cpc\")!} />\n        </div>\n        {/* Traffic inputs */}\n        <div className=\"w-36\">\n          <Filter column={table.getColumn(\"traffic\")!} />\n        </div>\n      </div>\n\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id} className=\"bg-muted/50\">\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    key={header.id}\n                    className=\"relative h-10 border-t select-none\"\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                  >\n                    {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer items-center justify-between gap-2 select-none\"\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault()\n                            header.column.getToggleSortingHandler()?.(e)\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        {flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )}\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                              aria-hidden=\"true\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                              aria-hidden=\"true\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? (\n                          <span className=\"size-4\" aria-hidden=\"true\" />\n                        )}\n                      </div>\n                    ) : (\n                      flexRender(\n                        header.column.columnDef.header,\n                        header.getContext()\n                      )\n                    )}\n                  </TableHead>\n                )\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                key={row.id}\n                data-state={row.getIsSelected() && \"selected\"}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id}>\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-sm text-muted-foreground\">\n        Data table with filters made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  )\n}\n\nfunction Filter({ column }: { column: Column<any, unknown> }) {\n  const id = useId()\n  const columnFilterValue = column.getFilterValue()\n  const { filterVariant } = column.columnDef.meta ?? {}\n  const columnHeader =\n    typeof column.columnDef.header === \"string\" ? column.columnDef.header : \"\"\n  const sortedUniqueValues = useMemo(() => {\n    if (filterVariant === \"range\") return []\n\n    // Get all unique values from the column\n    const values = Array.from(column.getFacetedUniqueValues().keys())\n\n    // If the values are arrays, flatten them and get unique items\n    const flattenedValues = values.reduce((acc: string[], curr) => {\n      if (Array.isArray(curr)) {\n        return [...acc, ...curr]\n      }\n      return [...acc, curr]\n    }, [])\n\n    // Get unique values and sort them\n    return Array.from(new Set(flattenedValues)).sort()\n  }, [column.getFacetedUniqueValues(), filterVariant])\n\n  if (filterVariant === \"range\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label>{columnHeader}</Label>\n        <div className=\"flex\">\n          <Input\n            id={`${id}-range-1`}\n            className=\"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            value={(columnFilterValue as [number, number])?.[0] ?? \"\"}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                e.target.value ? Number(e.target.value) : undefined,\n                old?.[1],\n              ])\n            }\n            placeholder=\"Min\"\n            type=\"number\"\n            aria-label={`${columnHeader} min`}\n          />\n          <Input\n            id={`${id}-range-2`}\n            className=\"-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            value={(columnFilterValue as [number, number])?.[1] ?? \"\"}\n            onChange={(e) =>\n              column.setFilterValue((old: [number, number]) => [\n                old?.[0],\n                e.target.value ? Number(e.target.value) : undefined,\n              ])\n            }\n            placeholder=\"Max\"\n            type=\"number\"\n            aria-label={`${columnHeader} max`}\n          />\n        </div>\n      </div>\n    )\n  }\n\n  if (filterVariant === \"select\") {\n    return (\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={`${id}-select`}>{columnHeader}</Label>\n        <Select\n          value={columnFilterValue?.toString() ?? \"all\"}\n          onValueChange={(value) => {\n            column.setFilterValue(value === \"all\" ? undefined : value)\n          }}\n        >\n          <SelectTrigger id={`${id}-select`}>\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All</SelectItem>\n            {sortedUniqueValues.map((value) => (\n              <SelectItem key={String(value)} value={String(value)}>\n                {String(value)}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`${id}-input`}>{columnHeader}</Label>\n      <div className=\"relative\">\n        <Input\n          id={`${id}-input`}\n          className=\"peer ps-9\"\n          value={(columnFilterValue ?? \"\") as string}\n          onChange={(e) => column.setFilterValue(e.target.value)}\n          placeholder={`Search ${columnHeader.toLowerCase()}`}\n          type=\"text\"\n        />\n        <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n          <SearchIcon size={16} />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "table",
+      "tanstack",
+      "checkbox",
+      "search",
+      "select",
+      "range",
+      "input",
+      "filter",
+      "sort"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-479.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-479",
+  "type": "registry:component",
+  "dependencies": [
+    "@tanstack/react-table"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/table.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-479.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport {\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/building-blocks/default/ui/table\"\n\ntype Item = {\n  id: string\n  name: string\n  email: string\n  location: string\n  flag: string\n  status: \"Active\" | \"Inactive\" | \"Pending\"\n  balance: number\n  department: string\n  role: string\n  joinDate: string\n  lastActive: string\n  performance: \"Excellent\" | \"Good\" | \"Average\" | \"Poor\"\n}\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    header: \"Name\",\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    sortUndefined: \"last\",\n    sortDescFirst: false,\n  },\n  {\n    header: \"Email\",\n    accessorKey: \"email\",\n  },\n  {\n    header: \"Location\",\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n  },\n  {\n    header: \"Status\",\n    accessorKey: \"status\",\n  },\n  {\n    header: \"Balance\",\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"balance\"))\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n      return formatted\n    },\n  },\n  {\n    header: \"Department\",\n    accessorKey: \"department\",\n  },\n  {\n    header: \"Role\",\n    accessorKey: \"role\",\n  },\n  {\n    header: \"Join Date\",\n    accessorKey: \"joinDate\",\n  },\n  {\n    header: \"Last Active\",\n    accessorKey: \"lastActive\",\n  },\n  {\n    header: \"Performance\",\n    accessorKey: \"performance\",\n  },\n]\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([])\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      id: \"name\",\n      desc: false,\n    },\n  ])\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\"\n      )\n      const data = await res.json()\n      setData(data.slice(0, 5)) // Limit to 5 items\n    }\n    fetchPosts()\n  }, [])\n\n  const table = useReactTable({\n    data,\n    columns,\n    columnResizeMode: \"onChange\",\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n    enableSortingRemoval: false,\n  })\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed\"\n        style={{\n          width: table.getCenterTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id} className=\"bg-muted/50\">\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead\n                    key={header.id}\n                    className=\"relative h-10 border-t select-none last:[&>.cursor-col-resize]:opacity-0\"\n                    aria-sort={\n                      header.column.getIsSorted() === \"asc\"\n                        ? \"ascending\"\n                        : header.column.getIsSorted() === \"desc\"\n                          ? \"descending\"\n                          : \"none\"\n                    }\n                    {...{\n                      colSpan: header.colSpan,\n                      style: {\n                        width: header.getSize(),\n                      },\n                    }}\n                  >\n                    {header.isPlaceholder ? null : (\n                      <div\n                        className={cn(\n                          header.column.getCanSort() &&\n                            \"flex h-full cursor-pointer items-center justify-between gap-2 select-none\"\n                        )}\n                        onClick={header.column.getToggleSortingHandler()}\n                        onKeyDown={(e) => {\n                          // Enhanced keyboard handling for sorting\n                          if (\n                            header.column.getCanSort() &&\n                            (e.key === \"Enter\" || e.key === \" \")\n                          ) {\n                            e.preventDefault()\n                            header.column.getToggleSortingHandler()?.(e)\n                          }\n                        }}\n                        tabIndex={header.column.getCanSort() ? 0 : undefined}\n                      >\n                        <span className=\"truncate\">\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                        </span>\n                        {{\n                          asc: (\n                            <ChevronUpIcon\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                              aria-hidden=\"true\"\n                            />\n                          ),\n                          desc: (\n                            <ChevronDownIcon\n                              className=\"shrink-0 opacity-60\"\n                              size={16}\n                              aria-hidden=\"true\"\n                            />\n                          ),\n                        }[header.column.getIsSorted() as string] ?? null}\n                      </div>\n                    )}\n                    {header.column.getCanResize() && (\n                      <div\n                        {...{\n                          onDoubleClick: () => header.column.resetSize(),\n                          onMouseDown: header.getResizeHandler(),\n                          onTouchStart: header.getResizeHandler(),\n                          className:\n                            \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:translate-x-px\",\n                        }}\n                      />\n                    )}\n                  </TableHead>\n                )\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                key={row.id}\n                data-state={row.getIsSelected() && \"selected\"}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <TableCell key={cell.id} className=\"truncate\">\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-sm text-muted-foreground\">\n        Resizable and sortable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "table",
+      "tanstack",
+      "flag",
+      "sort",
+      "resize"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-48.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-48",
+  "type": "registry:component",
+  "dependencies": [
+    "react-payment-inputs"
+  ],
+  "devDependencies": [
+    "@types/react-payment-inputs"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-48.tsx",
+      "content": "\"use client\"\n\nimport { useId } from \"react\"\nimport { usePaymentInputs } from \"react-payment-inputs\"\n\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\n\nexport default function Component() {\n  const id = useId()\n  const { getExpiryDateProps } = usePaymentInputs()\n\n  return (\n    <div className=\"*:not-first:mt-2\">\n      <Label htmlFor={`expiry-${id}`}>Expiry date</Label>\n      <Input\n        {...getExpiryDateProps()}\n        id={`expiry-${id}`}\n        className=\"[direction:inherit]\"\n      />\n      <p\n        className=\"mt-2 text-xs text-muted-foreground\"\n        role=\"region\"\n        aria-live=\"polite\"\n      >\n        Built with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://github.com/medipass/react-payment-inputs\"\n          target=\"_blank\"\n          rel=\"noopener nofollow\"\n        >\n          React Payment Inputs\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "input",
+      "label",
+      "checkout",
+      "payment",
+      "credit card",
+      "form"
+    ]
+  }
+}

package/public/r/comp-480.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-480",
+  "type": "registry:component",
+  "dependencies": [
+    "@tanstack/react-table"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/table.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-480.tsx",
+      "content": "\"use client\"\n\nimport { CSSProperties, useEffect, useState } from \"react\"\nimport {\n  Column,\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport {\n  ArrowLeftToLineIcon,\n  ArrowRightToLineIcon,\n  EllipsisIcon,\n  PinOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/building-blocks/default/ui/table\"\n\ntype Item = {\n  id: string\n  name: string\n  email: string\n  location: string\n  flag: string\n  status: \"Active\" | \"Inactive\" | \"Pending\"\n  balance: number\n  department: string\n  role: string\n  joinDate: string\n  lastActive: string\n  performance: \"Good\" | \"Very Good\" | \"Excellent\" | \"Outstanding\"\n}\n\n// Helper function to compute pinning styles for columns\nconst getPinningStyles = (column: Column<Item>): CSSProperties => {\n  const isPinned = column.getIsPinned()\n  return {\n    left: isPinned === \"left\" ? `${column.getStart(\"left\")}px` : undefined,\n    right: isPinned === \"right\" ? `${column.getAfter(\"right\")}px` : undefined,\n    position: isPinned ? \"sticky\" : \"relative\",\n    width: column.getSize(),\n    zIndex: isPinned ? 1 : 0,\n  }\n}\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    header: \"Name\",\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n  },\n  {\n    header: \"Email\",\n    accessorKey: \"email\",\n  },\n  {\n    header: \"Location\",\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n  },\n  {\n    header: \"Status\",\n    accessorKey: \"status\",\n  },\n  {\n    header: \"Balance\",\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"balance\"))\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n      return formatted\n    },\n  },\n  {\n    header: \"Department\",\n    accessorKey: \"department\",\n  },\n  {\n    header: \"Role\",\n    accessorKey: \"role\",\n  },\n  {\n    header: \"Join Date\",\n    accessorKey: \"joinDate\",\n  },\n  {\n    header: \"Last Active\",\n    accessorKey: \"lastActive\",\n  },\n  {\n    header: \"Performance\",\n    accessorKey: \"performance\",\n  },\n]\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([])\n  const [sorting, setSorting] = useState<SortingState>([])\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\"\n      )\n      const data = await res.json()\n      setData(data.slice(0, 5)) // Limit to 5 items\n    }\n    fetchPosts()\n  }, [])\n\n  const table = useReactTable({\n    data,\n    columns,\n    columnResizeMode: \"onChange\",\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n    enableSortingRemoval: false,\n  })\n\n  return (\n    <div>\n      <Table\n        className=\"table-fixed border-separate border-spacing-0 [&_td]:border-border [&_tfoot_td]:border-t [&_th]:border-b [&_th]:border-border [&_tr]:border-none [&_tr:not(:last-child)_td]:border-b\"\n        style={{\n          width: table.getTotalSize(),\n        }}\n      >\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id} className=\"bg-muted/50\">\n              {headerGroup.headers.map((header) => {\n                const { column } = header\n                const isPinned = column.getIsPinned()\n                const isLastLeftPinned =\n                  isPinned === \"left\" && column.getIsLastColumn(\"left\")\n                const isFirstRightPinned =\n                  isPinned === \"right\" && column.getIsFirstColumn(\"right\")\n\n                return (\n                  <TableHead\n                    key={header.id}\n                    className=\"relative h-10 truncate border-t data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\"\n                    colSpan={header.colSpan}\n                    style={{ ...getPinningStyles(column) }}\n                    data-pinned={isPinned || undefined}\n                    data-last-col={\n                      isLastLeftPinned\n                        ? \"left\"\n                        : isFirstRightPinned\n                          ? \"right\"\n                          : undefined\n                    }\n                  >\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"truncate\">\n                        {header.isPlaceholder\n                          ? null\n                          : flexRender(\n                              header.column.columnDef.header,\n                              header.getContext()\n                            )}\n                      </span>\n                      {/* Pin/Unpin column controls with enhanced accessibility */}\n                      {!header.isPlaceholder &&\n                        header.column.getCanPin() &&\n                        (header.column.getIsPinned() ? (\n                          <Button\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"-mr-1 size-7 shadow-none\"\n                            onClick={() => header.column.pin(false)}\n                            aria-label={`Unpin ${header.column.columnDef.header as string} column`}\n                            title={`Unpin ${header.column.columnDef.header as string} column`}\n                          >\n                            <PinOffIcon\n                              className=\"opacity-60\"\n                              size={16}\n                              aria-hidden=\"true\"\n                            />\n                          </Button>\n                        ) : (\n                          <DropdownMenu>\n                            <DropdownMenuTrigger asChild>\n                              <Button\n                                size=\"icon\"\n                                variant=\"ghost\"\n                                className=\"-mr-1 size-7 shadow-none\"\n                                aria-label={`Pin options for ${header.column.columnDef.header as string} column`}\n                                title={`Pin options for ${header.column.columnDef.header as string} column`}\n                              >\n                                <EllipsisIcon\n                                  className=\"opacity-60\"\n                                  size={16}\n                                  aria-hidden=\"true\"\n                                />\n                              </Button>\n                            </DropdownMenuTrigger>\n                            <DropdownMenuContent align=\"end\">\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"left\")}\n                              >\n                                <ArrowLeftToLineIcon\n                                  size={16}\n                                  className=\"opacity-60\"\n                                  aria-hidden=\"true\"\n                                />\n                                Stick to left\n                              </DropdownMenuItem>\n                              <DropdownMenuItem\n                                onClick={() => header.column.pin(\"right\")}\n                              >\n                                <ArrowRightToLineIcon\n                                  size={16}\n                                  className=\"opacity-60\"\n                                  aria-hidden=\"true\"\n                                />\n                                Stick to right\n                              </DropdownMenuItem>\n                            </DropdownMenuContent>\n                          </DropdownMenu>\n                        ))}\n                      {header.column.getCanResize() && (\n                        <div\n                          {...{\n                            onDoubleClick: () => header.column.resetSize(),\n                            onMouseDown: header.getResizeHandler(),\n                            onTouchStart: header.getResizeHandler(),\n                            className:\n                              \"absolute top-0 h-full w-4 cursor-col-resize user-select-none touch-none -right-2 z-10 flex justify-center before:absolute before:w-px before:inset-y-0 before:bg-border before:-translate-x-px\",\n                          }}\n                        />\n                      )}\n                    </div>\n                  </TableHead>\n                )\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                key={row.id}\n                data-state={row.getIsSelected() && \"selected\"}\n              >\n                {row.getVisibleCells().map((cell) => {\n                  const { column } = cell\n                  const isPinned = column.getIsPinned()\n                  const isLastLeftPinned =\n                    isPinned === \"left\" && column.getIsLastColumn(\"left\")\n                  const isFirstRightPinned =\n                    isPinned === \"right\" && column.getIsFirstColumn(\"right\")\n\n                  return (\n                    <TableCell\n                      key={cell.id}\n                      className=\"truncate data-pinned:bg-background/90 data-pinned:backdrop-blur-xs [&[data-pinned=left][data-last-col=left]]:border-r [&[data-pinned=right][data-last-col=right]]:border-l [&[data-pinned][data-last-col]]:border-border\"\n                      style={{ ...getPinningStyles(column) }}\n                      data-pinned={isPinned || undefined}\n                      data-last-col={\n                        isLastLeftPinned\n                          ? \"left\"\n                          : isFirstRightPinned\n                            ? \"right\"\n                            : undefined\n                      }\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  )\n                })}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-sm text-muted-foreground\">\n        Pinnable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "table",
+      "tanstack",
+      "flag",
+      "sticky",
+      "resize"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-481.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-481",
+  "type": "registry:component",
+  "dependencies": [
+    "@dnd-kit/core",
+    "@dnd-kit/modifiers",
+    "@dnd-kit/sortable",
+    "@dnd-kit/utilities",
+    "@tanstack/react-table"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/table.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-481.tsx",
+      "content": "\"use client\"\n\nimport { CSSProperties, useEffect, useId, useState } from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n} from \"@dnd-kit/core\"\nimport { restrictToHorizontalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  horizontalListSortingStrategy,\n  SortableContext,\n  useSortable,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  Cell,\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  Header,\n  SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport { ChevronDownIcon, ChevronUpIcon, GripVerticalIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/building-blocks/default/ui/table\"\n\ntype Item = {\n  id: string\n  name: string\n  email: string\n  location: string\n  flag: string\n  status: \"Active\" | \"Inactive\" | \"Pending\"\n  balance: number\n}\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    id: \"name\",\n    header: \"Name\",\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"truncate font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    sortUndefined: \"last\",\n    sortDescFirst: false,\n  },\n  {\n    id: \"email\",\n    header: \"Email\",\n    accessorKey: \"email\",\n  },\n  {\n    id: \"location\",\n    header: \"Location\",\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div className=\"truncate\">\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n  },\n  {\n    id: \"status\",\n    header: \"Status\",\n    accessorKey: \"status\",\n  },\n  {\n    id: \"balance\",\n    header: \"Balance\",\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"balance\"))\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n      return formatted\n    },\n  },\n]\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([])\n  const [sorting, setSorting] = useState<SortingState>([])\n  const [columnOrder, setColumnOrder] = useState<string[]>(\n    columns.map((column) => column.id as string)\n  )\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\"\n      )\n      const data = await res.json()\n      setData(data.slice(0, 5)) // Limit to 5 items\n    }\n    fetchPosts()\n  }, [])\n\n  const table = useReactTable({\n    data,\n    columns,\n    columnResizeMode: \"onChange\",\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n      columnOrder,\n    },\n    onColumnOrderChange: setColumnOrder,\n    enableSortingRemoval: false,\n  })\n\n  // reorder columns after drag & drop\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setColumnOrder((columnOrder) => {\n        const oldIndex = columnOrder.indexOf(active.id as string)\n        const newIndex = columnOrder.indexOf(over.id as string)\n        return arrayMove(columnOrder, oldIndex, newIndex) //this is just a splice util\n      })\n    }\n  }\n\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  return (\n    <DndContext\n      id={useId()}\n      collisionDetection={closestCenter}\n      modifiers={[restrictToHorizontalAxis]}\n      onDragEnd={handleDragEnd}\n      sensors={sensors}\n    >\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id} className=\"bg-muted/50\">\n              <SortableContext\n                items={columnOrder}\n                strategy={horizontalListSortingStrategy}\n              >\n                {headerGroup.headers.map((header) => (\n                  <DraggableTableHeader key={header.id} header={header} />\n                ))}\n              </SortableContext>\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                key={row.id}\n                data-state={row.getIsSelected() && \"selected\"}\n              >\n                {row.getVisibleCells().map((cell) => (\n                  <SortableContext\n                    key={cell.id}\n                    items={columnOrder}\n                    strategy={horizontalListSortingStrategy}\n                  >\n                    <DragAlongCell key={cell.id} cell={cell} />\n                  </SortableContext>\n                ))}\n              </TableRow>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-sm text-muted-foreground\">\n        Draggable columns made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          TanStack Table\n        </a>{\" \"}\n        and{\" \"}\n        <a href=\"https://dndkit.com/\" target=\"_blank\" rel=\"noopener noreferrer\">\n          dnd kit\n        </a>\n      </p>\n    </DndContext>\n  )\n}\n\nconst DraggableTableHeader = ({\n  header,\n}: {\n  header: Header<Item, unknown>\n}) => {\n  const {\n    attributes,\n    isDragging,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n  } = useSortable({\n    id: header.column.id,\n  })\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    whiteSpace: \"nowrap\",\n    width: header.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  }\n\n  return (\n    <TableHead\n      ref={setNodeRef}\n      className=\"relative h-10 border-t before:absolute before:inset-y-0 before:start-0 before:w-px before:bg-border first:before:bg-transparent\"\n      style={style}\n      aria-sort={\n        header.column.getIsSorted() === \"asc\"\n          ? \"ascending\"\n          : header.column.getIsSorted() === \"desc\"\n            ? \"descending\"\n            : \"none\"\n      }\n    >\n      <div className=\"flex items-center justify-start gap-0.5\">\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"-ml-2 size-7 shadow-none\"\n          {...attributes}\n          {...listeners}\n          aria-label=\"Drag to reorder\"\n        >\n          <GripVerticalIcon\n            className=\"opacity-60\"\n            size={16}\n            aria-hidden=\"true\"\n          />\n        </Button>\n        <span className=\"grow truncate\">\n          {header.isPlaceholder\n            ? null\n            : flexRender(header.column.columnDef.header, header.getContext())}\n        </span>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"group -mr-1 size-7 shadow-none\"\n          onClick={header.column.getToggleSortingHandler()}\n          onKeyDown={(e) => {\n            // Enhanced keyboard handling for sorting\n            if (\n              header.column.getCanSort() &&\n              (e.key === \"Enter\" || e.key === \" \")\n            ) {\n              e.preventDefault()\n              header.column.getToggleSortingHandler()?.(e)\n            }\n          }}\n        >\n          {{\n            asc: (\n              <ChevronUpIcon\n                className=\"shrink-0 opacity-60\"\n                size={16}\n                aria-hidden=\"true\"\n              />\n            ),\n            desc: (\n              <ChevronDownIcon\n                className=\"shrink-0 opacity-60\"\n                size={16}\n                aria-hidden=\"true\"\n              />\n            ),\n          }[header.column.getIsSorted() as string] ?? (\n            <ChevronUpIcon\n              className=\"shrink-0 opacity-0 group-hover:opacity-60\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n          )}\n        </Button>\n      </div>\n    </TableHead>\n  )\n}\n\nconst DragAlongCell = ({ cell }: { cell: Cell<Item, unknown> }) => {\n  const { isDragging, setNodeRef, transform, transition } = useSortable({\n    id: cell.column.id,\n  })\n\n  const style: CSSProperties = {\n    opacity: isDragging ? 0.8 : 1,\n    position: \"relative\",\n    transform: CSS.Translate.toString(transform),\n    transition,\n    width: cell.column.getSize(),\n    zIndex: isDragging ? 1 : 0,\n  }\n\n  return (\n    <TableCell ref={setNodeRef} className=\"truncate\" style={style}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </TableCell>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "table",
+      "tanstack",
+      "flag",
+      "sort",
+      "drag and drop"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-482.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-482",
+  "type": "registry:component",
+  "dependencies": [
+    "@tanstack/react-table"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/badge.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/table.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-482.tsx",
+      "content": "\"use client\"\n\nimport { Fragment, useEffect, useState } from \"react\"\nimport {\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport { ChevronDownIcon, ChevronUpIcon, InfoIcon } from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Badge } from \"@/registry/building-blocks/default/ui/badge\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/building-blocks/default/ui/table\"\n\ntype Item = {\n  id: string\n  name: string\n  email: string\n  location: string\n  flag: string\n  status: \"Active\" | \"Inactive\" | \"Pending\"\n  balance: number\n  note?: string\n}\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    id: \"expander\",\n    header: () => null,\n    cell: ({ row }) => {\n      return row.getCanExpand() ? (\n        <Button\n          {...{\n            className: \"size-7 shadow-none text-muted-foreground\",\n            onClick: row.getToggleExpandedHandler(),\n            \"aria-expanded\": row.getIsExpanded(),\n            \"aria-label\": row.getIsExpanded()\n              ? `Collapse details for ${row.original.name}`\n              : `Expand details for ${row.original.name}`,\n            size: \"icon\",\n            variant: \"ghost\",\n          }}\n        >\n          {row.getIsExpanded() ? (\n            <ChevronUpIcon\n              className=\"opacity-60\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n          ) : (\n            <ChevronDownIcon\n              className=\"opacity-60\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n          )}\n        </Button>\n      ) : undefined\n    },\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n  },\n  {\n    header: \"Name\",\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n  },\n  {\n    header: \"Email\",\n    accessorKey: \"email\",\n  },\n  {\n    header: \"Location\",\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n  },\n  {\n    header: \"Status\",\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\"\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n  },\n  {\n    header: () => <div className=\"text-right\">Balance</div>,\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"balance\"))\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n      return <div className=\"text-right\">{formatted}</div>\n    },\n  },\n]\n\nexport default function Component() {\n  const [data, setData] = useState<Item[]>([])\n\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\"\n      )\n      const data = await res.json()\n      setData(data.slice(0, 5)) // Limit to 5 items\n    }\n    fetchPosts()\n  }, [])\n\n  const table = useReactTable({\n    data,\n    columns,\n    getRowCanExpand: (row) => Boolean(row.original.note),\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n  })\n\n  return (\n    <div>\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id} className=\"hover:bg-transparent\">\n              {headerGroup.headers.map((header) => {\n                return (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )}\n                  </TableHead>\n                )\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {table.getRowModel().rows?.length ? (\n            table.getRowModel().rows.map((row) => (\n              <Fragment key={row.id}>\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      key={cell.id}\n                      className=\"whitespace-nowrap [&:has([aria-expanded])]:w-px [&:has([aria-expanded])]:py-0 [&:has([aria-expanded])]:pr-0\"\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n                {row.getIsExpanded() && (\n                  <TableRow>\n                    <TableCell colSpan={row.getVisibleCells().length}>\n                      <div className=\"flex items-start py-2 text-primary/80\">\n                        <span\n                          className=\"me-3 mt-0.5 flex w-7 shrink-0 justify-center\"\n                          aria-hidden=\"true\"\n                        >\n                          <InfoIcon className=\"opacity-60\" size={16} />\n                        </span>\n                        <p className=\"text-sm\">{row.original.note}</p>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )}\n              </Fragment>\n            ))\n          ) : (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n                No results.\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n      </Table>\n      <p className=\"mt-4 text-center text-sm text-muted-foreground\">\n        Expanding sub-row made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "table",
+      "tanstack",
+      "checkbox",
+      "collapsible",
+      "flag",
+      "badge",
+      "chip"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-483.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-483",
+  "type": "registry:component",
+  "dependencies": [
+    "@tanstack/react-table"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/badge.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/pagination.json",
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/table.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-483.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useId, useState } from \"react\"\nimport {\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  PaginationState,\n  SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Badge } from \"@/registry/building-blocks/default/ui/badge\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/building-blocks/default/ui/pagination\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/building-blocks/default/ui/table\"\n\ntype Item = {\n  id: string\n  name: string\n  email: string\n  location: string\n  flag: string\n  status: \"Active\" | \"Inactive\" | \"Pending\"\n  balance: number\n}\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n    size: 28,\n    enableSorting: false,\n  },\n  {\n    header: \"Name\",\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    size: 180,\n  },\n  {\n    header: \"Email\",\n    accessorKey: \"email\",\n    size: 200,\n  },\n  {\n    header: \"Location\",\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    size: 180,\n  },\n  {\n    header: \"Status\",\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\"\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    size: 120,\n  },\n  {\n    header: \"Balance\",\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"balance\"))\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n      return formatted\n    },\n    size: 120,\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 5,\n  })\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      id: \"name\",\n      desc: false,\n    },\n  ])\n\n  const [data, setData] = useState<Item[]>([])\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\"\n      )\n      const data = await res.json()\n      setData([...data, ...data])\n    }\n    fetchPosts()\n  }, [])\n\n  const table = useReactTable({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    enableSortingRemoval: false,\n    getPaginationRowModel: getPaginationRowModel(),\n    onPaginationChange: setPagination,\n    state: {\n      sorting,\n      pagination,\n    },\n  })\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id} className=\"hover:bg-transparent\">\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                      className=\"h-11\"\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer items-center justify-between gap-2 select-none\"\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault()\n                              header.column.getToggleSortingHandler()?.(e)\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                                aria-hidden=\"true\"\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                                aria-hidden=\"true\"\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )\n                      )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label htmlFor={id} className=\"max-sm:sr-only\">\n            Rows per page\n          </Label>\n          <Select\n            value={table.getState().pagination.pageSize.toString()}\n            onValueChange={(value) => {\n              table.setPageSize(Number(value))\n            }}\n          >\n            <SelectTrigger id={id} className=\"w-fit whitespace-nowrap\">\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end text-sm whitespace-nowrap text-muted-foreground\">\n          <p\n            className=\"text-sm whitespace-nowrap text-muted-foreground\"\n            aria-live=\"polite\"\n          >\n            <span className=\"text-foreground\">\n              {table.getState().pagination.pageIndex *\n                table.getState().pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.getState().pagination.pageIndex *\n                    table.getState().pagination.pageSize +\n                    table.getState().pagination.pageSize,\n                  0\n                ),\n                table.getRowCount()\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  size=\"icon\"\n                  variant=\"outline\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  onClick={() => table.firstPage()}\n                  disabled={!table.getCanPreviousPage()}\n                  aria-label=\"Go to first page\"\n                >\n                  <ChevronFirstIcon size={16} aria-hidden=\"true\" />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  size=\"icon\"\n                  variant=\"outline\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n                  aria-label=\"Go to previous page\"\n                >\n                  <ChevronLeftIcon size={16} aria-hidden=\"true\" />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  size=\"icon\"\n                  variant=\"outline\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n                  aria-label=\"Go to next page\"\n                >\n                  <ChevronRightIcon size={16} aria-hidden=\"true\" />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  size=\"icon\"\n                  variant=\"outline\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  onClick={() => table.lastPage()}\n                  disabled={!table.getCanNextPage()}\n                  aria-label=\"Go to last page\"\n                >\n                  <ChevronLastIcon size={16} aria-hidden=\"true\" />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-sm text-muted-foreground\">\n        Paginated table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "table",
+      "tanstack",
+      "checkbox",
+      "sort",
+      "flag",
+      "badge",
+      "chip",
+      "pagination"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-484.json

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-484",
+  "type": "registry:component",
+  "dependencies": [
+    "@tanstack/react-table"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/badge.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/pagination.json",
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/table.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-484.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport {\n  ColumnDef,\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  PaginationState,\n  SortingState,\n  useReactTable,\n} from \"@tanstack/react-table\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n} from \"lucide-react\"\n\nimport { usePagination } from \"@/registry/building-blocks/default/hooks/use-pagination\"\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport { Badge } from \"@/registry/building-blocks/default/ui/badge\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n} from \"@/registry/building-blocks/default/ui/pagination\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/building-blocks/default/ui/table\"\n\ntype Item = {\n  id: string\n  name: string\n  email: string\n  location: string\n  flag: string\n  status: \"Active\" | \"Inactive\" | \"Pending\"\n  balance: number\n}\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all rows\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n    size: 28,\n    enableSorting: false,\n  },\n  {\n    header: \"Name\",\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    size: 180,\n  },\n  {\n    header: \"Email\",\n    accessorKey: \"email\",\n    size: 200,\n  },\n  {\n    header: \"Location\",\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    size: 180,\n  },\n  {\n    header: \"Status\",\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\"\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    size: 120,\n  },\n  {\n    header: \"Balance\",\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"balance\"))\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n      return formatted\n    },\n    size: 120,\n  },\n]\n\nexport default function Component() {\n  const pageSize = 5\n\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: pageSize,\n  })\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      id: \"name\",\n      desc: false,\n    },\n  ])\n\n  const [data, setData] = useState<Item[]>([])\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\"\n      )\n      const data = await res.json()\n      setData(data)\n    }\n    fetchPosts()\n  }, [])\n\n  const table = useReactTable({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    enableSortingRemoval: false,\n    getPaginationRowModel: getPaginationRowModel(),\n    onPaginationChange: setPagination,\n    state: {\n      sorting,\n      pagination,\n    },\n  })\n\n  const { pages, showLeftEllipsis, showRightEllipsis } = usePagination({\n    currentPage: table.getState().pagination.pageIndex + 1,\n    totalPages: table.getPageCount(),\n    paginationItemsToDisplay: 5,\n  })\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id} className=\"hover:bg-transparent\">\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                      className=\"h-11\"\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer items-center justify-between gap-2 select-none\"\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault()\n                              header.column.getToggleSortingHandler()?.(e)\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                                aria-hidden=\"true\"\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                                aria-hidden=\"true\"\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )\n                      )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-3 max-sm:flex-col\">\n        {/* Page number information */}\n        <p\n          className=\"flex-1 text-sm whitespace-nowrap text-muted-foreground\"\n          aria-live=\"polite\"\n        >\n          Page{\" \"}\n          <span className=\"text-foreground\">\n            {table.getState().pagination.pageIndex + 1}\n          </span>{\" \"}\n          of <span className=\"text-foreground\">{table.getPageCount()}</span>\n        </p>\n\n        {/* Pagination buttons */}\n        <div className=\"grow\">\n          <Pagination>\n            <PaginationContent>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  size=\"icon\"\n                  variant=\"outline\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n                  aria-label=\"Go to previous page\"\n                >\n                  <ChevronLeftIcon size={16} aria-hidden=\"true\" />\n                </Button>\n              </PaginationItem>\n\n              {/* Left ellipsis (...) */}\n              {showLeftEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Page number buttons */}\n              {pages.map((page) => {\n                const isActive =\n                  page === table.getState().pagination.pageIndex + 1\n                return (\n                  <PaginationItem key={page}>\n                    <Button\n                      size=\"icon\"\n                      variant={`${isActive ? \"outline\" : \"ghost\"}`}\n                      onClick={() => table.setPageIndex(page - 1)}\n                      aria-current={isActive ? \"page\" : undefined}\n                    >\n                      {page}\n                    </Button>\n                  </PaginationItem>\n                )\n              })}\n\n              {/* Right ellipsis (...) */}\n              {showRightEllipsis && (\n                <PaginationItem>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              )}\n\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  size=\"icon\"\n                  variant=\"outline\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n                  aria-label=\"Go to next page\"\n                >\n                  <ChevronRightIcon size={16} aria-hidden=\"true\" />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n\n        {/* Results per page */}\n        <div className=\"flex flex-1 justify-end\">\n          <Select\n            value={table.getState().pagination.pageSize.toString()}\n            onValueChange={(value) => {\n              table.setPageSize(Number(value))\n            }}\n            aria-label=\"Results per page\"\n          >\n            <SelectTrigger\n              id=\"results-per-page\"\n              className=\"w-fit whitespace-nowrap\"\n            >\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent>\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize} / page\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-sm text-muted-foreground\">\n        Numeric pagination made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  )\n}\n",
+      "type": "registry:component"
+    },
+    {
+      "path": "registry/default/hooks/use-pagination.ts",
+      "content": "type UsePaginationProps = {\n  currentPage: number\n  totalPages: number\n  paginationItemsToDisplay: number\n}\n\ntype UsePaginationReturn = {\n  pages: number[]\n  showLeftEllipsis: boolean\n  showRightEllipsis: boolean\n}\n\nexport function usePagination({\n  currentPage,\n  totalPages,\n  paginationItemsToDisplay,\n}: UsePaginationProps): UsePaginationReturn {\n  const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2\n  const showRightEllipsis =\n    totalPages - currentPage + 1 > paginationItemsToDisplay / 2\n\n  function calculatePaginationRange(): number[] {\n    if (totalPages <= paginationItemsToDisplay) {\n      return Array.from({ length: totalPages }, (_, i) => i + 1)\n    }\n\n    const halfDisplay = Math.floor(paginationItemsToDisplay / 2)\n    const initialRange = {\n      start: currentPage - halfDisplay,\n      end: currentPage + halfDisplay,\n    }\n\n    const adjustedRange = {\n      start: Math.max(1, initialRange.start),\n      end: Math.min(totalPages, initialRange.end),\n    }\n\n    if (adjustedRange.start === 1) {\n      adjustedRange.end = paginationItemsToDisplay\n    }\n    if (adjustedRange.end === totalPages) {\n      adjustedRange.start = totalPages - paginationItemsToDisplay + 1\n    }\n\n    if (showLeftEllipsis) adjustedRange.start++\n    if (showRightEllipsis) adjustedRange.end--\n\n    return Array.from(\n      { length: adjustedRange.end - adjustedRange.start + 1 },\n      (_, i) => adjustedRange.start + i\n    )\n  }\n\n  const pages = calculatePaginationRange()\n\n  return {\n    pages,\n    showLeftEllipsis,\n    showRightEllipsis,\n  }\n}\n",
+      "type": "registry:hook"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "table",
+      "tanstack",
+      "checkbox",
+      "sort",
+      "flag",
+      "badge",
+      "chip",
+      "pagination"
+    ],
+    "colSpan": 3
+  }
+}

package/public/r/comp-485.json

@@ -0,0 +1,43 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "comp-485",
+  "type": "registry:component",
+  "dependencies": [
+    "@tanstack/react-table"
+  ],
+  "registryDependencies": [
+    "https://loveui.dev/building-blocks/r/alert-dialog.json",
+    "https://loveui.dev/building-blocks/r/badge.json",
+    "https://loveui.dev/building-blocks/r/button.json",
+    "https://loveui.dev/building-blocks/r/checkbox.json",
+    "https://loveui.dev/building-blocks/r/dropdown-menu.json",
+    "https://loveui.dev/building-blocks/r/input.json",
+    "https://loveui.dev/building-blocks/r/label.json",
+    "https://loveui.dev/building-blocks/r/pagination.json",
+    "https://loveui.dev/building-blocks/r/popover.json",
+    "https://loveui.dev/building-blocks/r/select.json",
+    "https://loveui.dev/building-blocks/r/table.json"
+  ],
+  "files": [
+    {
+      "path": "registry/default/components/comp-485.tsx",
+      "content": "\"use client\"\n\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\"\nimport {\n  ColumnDef,\n  ColumnFiltersState,\n  FilterFn,\n  flexRender,\n  getCoreRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  PaginationState,\n  Row,\n  SortingState,\n  useReactTable,\n  VisibilityState,\n} from \"@tanstack/react-table\"\nimport {\n  ChevronDownIcon,\n  ChevronFirstIcon,\n  ChevronLastIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ChevronUpIcon,\n  CircleAlertIcon,\n  CircleXIcon,\n  Columns3Icon,\n  EllipsisIcon,\n  FilterIcon,\n  ListFilterIcon,\n  PlusIcon,\n  TrashIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/registry/building-blocks/default/lib/utils\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/building-blocks/default/ui/alert-dialog\"\nimport { Badge } from \"@/registry/building-blocks/default/ui/badge\"\nimport { Button } from \"@/registry/building-blocks/default/ui/button\"\nimport { Checkbox } from \"@/registry/building-blocks/default/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/building-blocks/default/ui/dropdown-menu\"\nimport { Input } from \"@/registry/building-blocks/default/ui/input\"\nimport { Label } from \"@/registry/building-blocks/default/ui/label\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationItem,\n} from \"@/registry/building-blocks/default/ui/pagination\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/building-blocks/default/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/building-blocks/default/ui/select\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/building-blocks/default/ui/table\"\n\ntype Item = {\n  id: string\n  name: string\n  email: string\n  location: string\n  flag: string\n  status: \"Active\" | \"Inactive\" | \"Pending\"\n  balance: number\n}\n\n// Custom filter function for multi-column searching\nconst multiColumnFilterFn: FilterFn<Item> = (row, columnId, filterValue) => {\n  const searchableRowContent =\n    `${row.original.name} ${row.original.email}`.toLowerCase()\n  const searchTerm = (filterValue ?? \"\").toLowerCase()\n  return searchableRowContent.includes(searchTerm)\n}\n\nconst statusFilterFn: FilterFn<Item> = (\n  row,\n  columnId,\n  filterValue: string[]\n) => {\n  if (!filterValue?.length) return true\n  const status = row.getValue(columnId) as string\n  return filterValue.includes(status)\n}\n\nconst columns: ColumnDef<Item>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n    size: 28,\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    header: \"Name\",\n    accessorKey: \"name\",\n    cell: ({ row }) => (\n      <div className=\"font-medium\">{row.getValue(\"name\")}</div>\n    ),\n    size: 180,\n    filterFn: multiColumnFilterFn,\n    enableHiding: false,\n  },\n  {\n    header: \"Email\",\n    accessorKey: \"email\",\n    size: 220,\n  },\n  {\n    header: \"Location\",\n    accessorKey: \"location\",\n    cell: ({ row }) => (\n      <div>\n        <span className=\"text-lg leading-none\">{row.original.flag}</span>{\" \"}\n        {row.getValue(\"location\")}\n      </div>\n    ),\n    size: 180,\n  },\n  {\n    header: \"Status\",\n    accessorKey: \"status\",\n    cell: ({ row }) => (\n      <Badge\n        className={cn(\n          row.getValue(\"status\") === \"Inactive\" &&\n            \"bg-muted-foreground/60 text-primary-foreground\"\n        )}\n      >\n        {row.getValue(\"status\")}\n      </Badge>\n    ),\n    size: 100,\n    filterFn: statusFilterFn,\n  },\n  {\n    header: \"Performance\",\n    accessorKey: \"performance\",\n  },\n  {\n    header: \"Balance\",\n    accessorKey: \"balance\",\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"balance\"))\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n      return formatted\n    },\n    size: 120,\n  },\n  {\n    id: \"actions\",\n    header: () => <span className=\"sr-only\">Actions</span>,\n    cell: ({ row }) => <RowActions row={row} />,\n    size: 60,\n    enableHiding: false,\n  },\n]\n\nexport default function Component() {\n  const id = useId()\n  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})\n  const [pagination, setPagination] = useState<PaginationState>({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const [sorting, setSorting] = useState<SortingState>([\n    {\n      id: \"name\",\n      desc: false,\n    },\n  ])\n\n  const [data, setData] = useState<Item[]>([])\n  useEffect(() => {\n    async function fetchPosts() {\n      const res = await fetch(\n        \"https://raw.githubusercontent.com/origin-space/origin-images/refs/heads/main/users-01_fertyx.json\"\n      )\n      const data = await res.json()\n      setData(data)\n    }\n    fetchPosts()\n  }, [])\n\n  const handleDeleteRows = () => {\n    const selectedRows = table.getSelectedRowModel().rows\n    const updatedData = data.filter(\n      (item) => !selectedRows.some((row) => row.original.id === item.id)\n    )\n    setData(updatedData)\n    table.resetRowSelection()\n  }\n\n  const table = useReactTable({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    onSortingChange: setSorting,\n    enableSortingRemoval: false,\n    getPaginationRowModel: getPaginationRowModel(),\n    onPaginationChange: setPagination,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    getFilteredRowModel: getFilteredRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    state: {\n      sorting,\n      pagination,\n      columnFilters,\n      columnVisibility,\n    },\n  })\n\n  // Get unique status values\n  const uniqueStatusValues = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\")\n\n    if (!statusColumn) return []\n\n    const values = Array.from(statusColumn.getFacetedUniqueValues().keys())\n\n    return values.sort()\n  }, [table.getColumn(\"status\")?.getFacetedUniqueValues()])\n\n  // Get counts for each status\n  const statusCounts = useMemo(() => {\n    const statusColumn = table.getColumn(\"status\")\n    if (!statusColumn) return new Map()\n    return statusColumn.getFacetedUniqueValues()\n  }, [table.getColumn(\"status\")?.getFacetedUniqueValues()])\n\n  const selectedStatuses = useMemo(() => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[]\n    return filterValue ?? []\n  }, [table.getColumn(\"status\")?.getFilterValue()])\n\n  const handleStatusChange = (checked: boolean, value: string) => {\n    const filterValue = table.getColumn(\"status\")?.getFilterValue() as string[]\n    const newFilterValue = filterValue ? [...filterValue] : []\n\n    if (checked) {\n      newFilterValue.push(value)\n    } else {\n      const index = newFilterValue.indexOf(value)\n      if (index > -1) {\n        newFilterValue.splice(index, 1)\n      }\n    }\n\n    table\n      .getColumn(\"status\")\n      ?.setFilterValue(newFilterValue.length ? newFilterValue : undefined)\n  }\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Filters */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex items-center gap-3\">\n          {/* Filter by name or email */}\n          <div className=\"relative\">\n            <Input\n              id={`${id}-input`}\n              ref={inputRef}\n              className={cn(\n                \"peer min-w-60 ps-9\",\n                Boolean(table.getColumn(\"name\")?.getFilterValue()) && \"pe-9\"\n              )}\n              value={\n                (table.getColumn(\"name\")?.getFilterValue() ?? \"\") as string\n              }\n              onChange={(e) =>\n                table.getColumn(\"name\")?.setFilterValue(e.target.value)\n              }\n              placeholder=\"Filter by name or email...\"\n              type=\"text\"\n              aria-label=\"Filter by name or email\"\n            />\n            <div className=\"pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50\">\n              <ListFilterIcon size={16} aria-hidden=\"true\" />\n            </div>\n            {Boolean(table.getColumn(\"name\")?.getFilterValue()) && (\n              <button\n                className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 transition-[color,box-shadow] outline-none hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n                aria-label=\"Clear filter\"\n                onClick={() => {\n                  table.getColumn(\"name\")?.setFilterValue(\"\")\n                  if (inputRef.current) {\n                    inputRef.current.focus()\n                  }\n                }}\n              >\n                <CircleXIcon size={16} aria-hidden=\"true\" />\n              </button>\n            )}\n          </div>\n          {/* Filter by status */}\n          <Popover>\n            <PopoverTrigger asChild>\n              <Button variant=\"outline\">\n                <FilterIcon\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                  aria-hidden=\"true\"\n                />\n                Status\n                {selectedStatuses.length > 0 && (\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70\">\n                    {selectedStatuses.length}\n                  </span>\n                )}\n              </Button>\n            </PopoverTrigger>\n            <PopoverContent className=\"w-auto min-w-36 p-3\" align=\"start\">\n              <div className=\"space-y-3\">\n                <div className=\"text-xs font-medium text-muted-foreground\">\n                  Filters\n                </div>\n                <div className=\"space-y-3\">\n                  {uniqueStatusValues.map((value, i) => (\n                    <div key={value} className=\"flex items-center gap-2\">\n                      <Checkbox\n                        id={`${id}-${i}`}\n                        checked={selectedStatuses.includes(value)}\n                        onCheckedChange={(checked: boolean) =>\n                          handleStatusChange(checked, value)\n                        }\n                      />\n                      <Label\n                        htmlFor={`${id}-${i}`}\n                        className=\"flex grow justify-between gap-2 font-normal\"\n                      >\n                        {value}{\" \"}\n                        <span className=\"ms-2 text-xs text-muted-foreground\">\n                          {statusCounts.get(value)}\n                        </span>\n                      </Label>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </PopoverContent>\n          </Popover>\n          {/* Toggle columns visibility */}\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\">\n                <Columns3Icon\n                  className=\"-ms-1 opacity-60\"\n                  size={16}\n                  aria-hidden=\"true\"\n                />\n                View\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\n              {table\n                .getAllColumns()\n                .filter((column) => column.getCanHide())\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                      onSelect={(event) => event.preventDefault()}\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n        <div className=\"flex items-center gap-3\">\n          {/* Delete button */}\n          {table.getSelectedRowModel().rows.length > 0 && (\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button className=\"ml-auto\" variant=\"outline\">\n                  <TrashIcon\n                    className=\"-ms-1 opacity-60\"\n                    size={16}\n                    aria-hidden=\"true\"\n                  />\n                  Delete\n                  <span className=\"-me-1 inline-flex h-5 max-h-full items-center rounded border bg-background px-1 font-[inherit] text-[0.625rem] font-medium text-muted-foreground/70\">\n                    {table.getSelectedRowModel().rows.length}\n                  </span>\n                </Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <div className=\"flex flex-col gap-2 max-sm:items-center sm:flex-row sm:gap-4\">\n                  <div\n                    className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\"\n                    aria-hidden=\"true\"\n                  >\n                    <CircleAlertIcon className=\"opacity-80\" size={16} />\n                  </div>\n                  <AlertDialogHeader>\n                    <AlertDialogTitle>\n                      Are you absolutely sure?\n                    </AlertDialogTitle>\n                    <AlertDialogDescription>\n                      This action cannot be undone. This will permanently delete{\" \"}\n                      {table.getSelectedRowModel().rows.length} selected{\" \"}\n                      {table.getSelectedRowModel().rows.length === 1\n                        ? \"row\"\n                        : \"rows\"}\n                      .\n                    </AlertDialogDescription>\n                  </AlertDialogHeader>\n                </div>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction onClick={handleDeleteRows}>\n                    Delete\n                  </AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          )}\n          {/* Add user button */}\n          <Button className=\"ml-auto\" variant=\"outline\">\n            <PlusIcon\n              className=\"-ms-1 opacity-60\"\n              size={16}\n              aria-hidden=\"true\"\n            />\n            Add user\n          </Button>\n        </div>\n      </div>\n\n      {/* Table */}\n      <div className=\"overflow-hidden rounded-md border bg-background\">\n        <Table className=\"table-fixed\">\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id} className=\"hover:bg-transparent\">\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead\n                      key={header.id}\n                      style={{ width: `${header.getSize()}px` }}\n                      className=\"h-11\"\n                    >\n                      {header.isPlaceholder ? null : header.column.getCanSort() ? (\n                        <div\n                          className={cn(\n                            header.column.getCanSort() &&\n                              \"flex h-full cursor-pointer items-center justify-between gap-2 select-none\"\n                          )}\n                          onClick={header.column.getToggleSortingHandler()}\n                          onKeyDown={(e) => {\n                            // Enhanced keyboard handling for sorting\n                            if (\n                              header.column.getCanSort() &&\n                              (e.key === \"Enter\" || e.key === \" \")\n                            ) {\n                              e.preventDefault()\n                              header.column.getToggleSortingHandler()?.(e)\n                            }\n                          }}\n                          tabIndex={header.column.getCanSort() ? 0 : undefined}\n                        >\n                          {flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                          {{\n                            asc: (\n                              <ChevronUpIcon\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                                aria-hidden=\"true\"\n                              />\n                            ),\n                            desc: (\n                              <ChevronDownIcon\n                                className=\"shrink-0 opacity-60\"\n                                size={16}\n                                aria-hidden=\"true\"\n                              />\n                            ),\n                          }[header.column.getIsSorted() as string] ?? null}\n                        </div>\n                      ) : (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )\n                      )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id} className=\"last:py-0\">\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n\n      {/* Pagination */}\n      <div className=\"flex items-center justify-between gap-8\">\n        {/* Results per page */}\n        <div className=\"flex items-center gap-3\">\n          <Label htmlFor={id} className=\"max-sm:sr-only\">\n            Rows per page\n          </Label>\n          <Select\n            value={table.getState().pagination.pageSize.toString()}\n            onValueChange={(value) => {\n              table.setPageSize(Number(value))\n            }}\n          >\n            <SelectTrigger id={id} className=\"w-fit whitespace-nowrap\">\n              <SelectValue placeholder=\"Select number of results\" />\n            </SelectTrigger>\n            <SelectContent className=\"[&_*[role=option]]:ps-2 [&_*[role=option]]:pe-8 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:end-2\">\n              {[5, 10, 25, 50].map((pageSize) => (\n                <SelectItem key={pageSize} value={pageSize.toString()}>\n                  {pageSize}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        {/* Page number information */}\n        <div className=\"flex grow justify-end text-sm whitespace-nowrap text-muted-foreground\">\n          <p\n            className=\"text-sm whitespace-nowrap text-muted-foreground\"\n            aria-live=\"polite\"\n          >\n            <span className=\"text-foreground\">\n              {table.getState().pagination.pageIndex *\n                table.getState().pagination.pageSize +\n                1}\n              -\n              {Math.min(\n                Math.max(\n                  table.getState().pagination.pageIndex *\n                    table.getState().pagination.pageSize +\n                    table.getState().pagination.pageSize,\n                  0\n                ),\n                table.getRowCount()\n              )}\n            </span>{\" \"}\n            of{\" \"}\n            <span className=\"text-foreground\">\n              {table.getRowCount().toString()}\n            </span>\n          </p>\n        </div>\n\n        {/* Pagination buttons */}\n        <div>\n          <Pagination>\n            <PaginationContent>\n              {/* First page button */}\n              <PaginationItem>\n                <Button\n                  size=\"icon\"\n                  variant=\"outline\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  onClick={() => table.firstPage()}\n                  disabled={!table.getCanPreviousPage()}\n                  aria-label=\"Go to first page\"\n                >\n                  <ChevronFirstIcon size={16} aria-hidden=\"true\" />\n                </Button>\n              </PaginationItem>\n              {/* Previous page button */}\n              <PaginationItem>\n                <Button\n                  size=\"icon\"\n                  variant=\"outline\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n                  aria-label=\"Go to previous page\"\n                >\n                  <ChevronLeftIcon size={16} aria-hidden=\"true\" />\n                </Button>\n              </PaginationItem>\n              {/* Next page button */}\n              <PaginationItem>\n                <Button\n                  size=\"icon\"\n                  variant=\"outline\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n                  aria-label=\"Go to next page\"\n                >\n                  <ChevronRightIcon size={16} aria-hidden=\"true\" />\n                </Button>\n              </PaginationItem>\n              {/* Last page button */}\n              <PaginationItem>\n                <Button\n                  size=\"icon\"\n                  variant=\"outline\"\n                  className=\"disabled:pointer-events-none disabled:opacity-50\"\n                  onClick={() => table.lastPage()}\n                  disabled={!table.getCanNextPage()}\n                  aria-label=\"Go to last page\"\n                >\n                  <ChevronLastIcon size={16} aria-hidden=\"true\" />\n                </Button>\n              </PaginationItem>\n            </PaginationContent>\n          </Pagination>\n        </div>\n      </div>\n      <p className=\"mt-4 text-center text-sm text-muted-foreground\">\n        Example of a more complex table made with{\" \"}\n        <a\n          className=\"underline hover:text-foreground\"\n          href=\"https://tanstack.com/table\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          TanStack Table\n        </a>\n      </p>\n    </div>\n  )\n}\n\nfunction RowActions({ row }: { row: Row<Item> }) {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <div className=\"flex justify-end\">\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            className=\"shadow-none\"\n            aria-label=\"Edit item\"\n          >\n            <EllipsisIcon size={16} aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\">\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Edit</span>\n            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <span>Duplicate</span>\n            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <span>Archive</span>\n            <DropdownMenuShortcut>⌘A</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem>Move to project</DropdownMenuItem>\n                <DropdownMenuItem>Move to folder</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>Advanced options</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem>Share</DropdownMenuItem>\n          <DropdownMenuItem>Add to favorites</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n          <span>Delete</span>\n          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n",
+      "type": "registry:component"
+    }
+  ],
+  "meta": {
+    "tags": [
+      "table",
+      "tanstack",
+      "checkbox",
+      "sort",
+      "flag",
+      "badge",
+      "chip",
+      "pagination",
+      "filter",
+      "select"
+    ],
+    "colSpan": 3
+  }
+}