{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table",
  "title": "Data Table",
  "description": "A data-table component.",
  "dependencies": [
    "@tanstack/react-table",
    "@hugeicons/react",
    "@hugeicons/core-free-icons"
  ],
  "registryDependencies": [
    "@cubby-ui/checkbox",
    "@cubby-ui/toolbar",
    "@cubby-ui/table",
    "@cubby-ui/dropdown-menu",
    "@cubby-ui/button",
    "@cubby-ui/input-group",
    "@cubby-ui/elevated"
  ],
  "files": [
    {
      "path": "registry/default/data-table/data-table.tsx",
      "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport {\r\n  useReactTable,\r\n  getCoreRowModel,\r\n  getSortedRowModel,\r\n  getFilteredRowModel,\r\n  getPaginationRowModel,\r\n  flexRender,\r\n  type ColumnDef,\r\n  type SortingState,\r\n  type RowSelectionState,\r\n  type ColumnFiltersState,\r\n  type PaginationState,\r\n  type VisibilityState,\r\n  type OnChangeFn,\r\n  type Row,\r\n  type Column,\r\n} from \"@tanstack/react-table\";\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\nimport {\r\n  SortByDown01Icon,\r\n  SortByUp01Icon,\r\n  ArrowUpDownIcon,\r\n} from \"@hugeicons/core-free-icons\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\nimport { elevatedSurface } from \"@/registry/default/lib/elevated\";\r\nimport { Checkbox } from \"@/registry/default/checkbox/checkbox\";\r\nimport {\r\n  DataTableContext,\r\n  useDataTable,\r\n} from \"@/registry/default/data-table/data-table-context\";\r\nimport {\r\n  Toolbar,\r\n  ToolbarSeparator,\r\n  type ToolbarProps,\r\n} from \"@/registry/default/toolbar/toolbar\";\r\nimport {\r\n  Table,\r\n  TableHeader,\r\n  TableBody,\r\n  TableFooter,\r\n  TableHead,\r\n  TableRow,\r\n  TableCell,\r\n  type TableProps,\r\n} from \"@/registry/default/table/table\";\r\nimport { DataTableSearch } from \"@/registry/default/data-table/data-table-search\";\r\nimport { DataTableColumnToggle } from \"@/registry/default/data-table/data-table-column-toggle\";\r\nimport { DataTablePagination } from \"@/registry/default/data-table/data-table-pagination\";\r\n\r\nexport interface DataTableProps<TData, TValue> {\r\n  columns: ColumnDef<TData, TValue>[];\r\n  data: TData[];\r\n  children: React.ReactNode;\r\n  className?: string;\r\n\r\n  enableSorting?: boolean;\r\n  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);\r\n  enableMultiRowSelection?: boolean;\r\n  enableFiltering?: boolean;\r\n  enablePagination?: boolean;\r\n\r\n  showSelectionColumn?: boolean;\r\n\r\n  sorting?: SortingState;\r\n  onSortingChange?: OnChangeFn<SortingState>;\r\n  rowSelection?: RowSelectionState;\r\n  onRowSelectionChange?: OnChangeFn<RowSelectionState>;\r\n  columnFilters?: ColumnFiltersState;\r\n  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;\r\n  pagination?: PaginationState;\r\n  onPaginationChange?: OnChangeFn<PaginationState>;\r\n  columnVisibility?: VisibilityState;\r\n  onColumnVisibilityChange?: OnChangeFn<VisibilityState>;\r\n  globalFilter?: string;\r\n  onGlobalFilterChange?: OnChangeFn<string>;\r\n\r\n  getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;\r\n}\r\n\r\nfunction DataTable<TData, TValue>({\r\n  columns: userColumns,\r\n  data,\r\n  children,\r\n  className,\r\n  enableSorting = false,\r\n  enableRowSelection = false,\r\n  enableMultiRowSelection = true,\r\n  enableFiltering = false,\r\n  enablePagination = false,\r\n  showSelectionColumn = true,\r\n  sorting: controlledSorting,\r\n  onSortingChange,\r\n  rowSelection: controlledRowSelection,\r\n  onRowSelectionChange,\r\n  columnFilters: controlledColumnFilters,\r\n  onColumnFiltersChange,\r\n  pagination: controlledPagination,\r\n  onPaginationChange,\r\n  columnVisibility: controlledColumnVisibility,\r\n  onColumnVisibilityChange,\r\n  globalFilter: controlledGlobalFilter,\r\n  onGlobalFilterChange,\r\n  getRowId,\r\n}: DataTableProps<TData, TValue>) {\r\n  const [internalSorting, setInternalSorting] = React.useState<SortingState>(\r\n    [],\r\n  );\r\n  const [internalRowSelection, setInternalRowSelection] =\r\n    React.useState<RowSelectionState>({});\r\n  const [internalColumnFilters, setInternalColumnFilters] =\r\n    React.useState<ColumnFiltersState>([]);\r\n  const [internalPagination, setInternalPagination] =\r\n    React.useState<PaginationState>({\r\n      pageIndex: 0,\r\n      pageSize: 10,\r\n    });\r\n  const [internalGlobalFilter, setInternalGlobalFilter] = React.useState(\"\");\r\n  const [internalColumnVisibility, setInternalColumnVisibility] =\r\n    React.useState<VisibilityState>({});\r\n\r\n  const sorting = controlledSorting ?? internalSorting;\r\n  const rowSelection = controlledRowSelection ?? internalRowSelection;\r\n  const columnFilters = controlledColumnFilters ?? internalColumnFilters;\r\n  const pagination = controlledPagination ?? internalPagination;\r\n  const globalFilter = controlledGlobalFilter ?? internalGlobalFilter;\r\n  const columnVisibility =\r\n    controlledColumnVisibility ?? internalColumnVisibility;\r\n\r\n  const columns = React.useMemo(() => {\r\n    if (!enableRowSelection || !showSelectionColumn) {\r\n      return userColumns;\r\n    }\r\n\r\n    const selectionColumn: ColumnDef<TData, unknown> = {\r\n      id: \"__select__\",\r\n      header: ({ table }) =>\r\n        enableMultiRowSelection ? (\r\n          <div className=\"flex items-center\">\r\n            <Checkbox\r\n              checked={table.getIsAllPageRowsSelected()}\r\n              indeterminate={\r\n                table.getIsSomePageRowsSelected() &&\r\n                !table.getIsAllPageRowsSelected()\r\n              }\r\n              onCheckedChange={(value) =>\r\n                table.toggleAllPageRowsSelected(!!value)\r\n              }\r\n              aria-label=\"Select all\"\r\n            />\r\n          </div>\r\n        ) : null,\r\n      cell: ({ row }) => (\r\n        <div className=\"flex items-center\">\r\n          <Checkbox\r\n            checked={row.getIsSelected()}\r\n            disabled={!row.getCanSelect()}\r\n            onCheckedChange={(value) => row.toggleSelected(!!value)}\r\n            aria-label=\"Select row\"\r\n          />\r\n        </div>\r\n      ),\r\n      enableSorting: false,\r\n      enableHiding: false,\r\n    };\r\n\r\n    return [selectionColumn, ...userColumns];\r\n  }, [\r\n    userColumns,\r\n    enableRowSelection,\r\n    enableMultiRowSelection,\r\n    showSelectionColumn,\r\n  ]);\r\n\r\n  const table = useReactTable({\r\n    data,\r\n    columns,\r\n    getRowId,\r\n    state: {\r\n      sorting,\r\n      rowSelection,\r\n      columnFilters,\r\n      pagination,\r\n      globalFilter,\r\n      columnVisibility,\r\n    },\r\n    onSortingChange: onSortingChange ?? setInternalSorting,\r\n    onRowSelectionChange: onRowSelectionChange ?? setInternalRowSelection,\r\n    onColumnFiltersChange: onColumnFiltersChange ?? setInternalColumnFilters,\r\n    onPaginationChange: onPaginationChange ?? setInternalPagination,\r\n    onGlobalFilterChange: onGlobalFilterChange ?? setInternalGlobalFilter,\r\n    onColumnVisibilityChange:\r\n      onColumnVisibilityChange ?? setInternalColumnVisibility,\r\n    getCoreRowModel: getCoreRowModel(),\r\n    ...(enableSorting && { getSortedRowModel: getSortedRowModel() }),\r\n    ...(enableFiltering && { getFilteredRowModel: getFilteredRowModel() }),\r\n    ...(enablePagination && { getPaginationRowModel: getPaginationRowModel() }),\r\n    enableRowSelection,\r\n    enableMultiRowSelection,\r\n    globalFilterFn: \"includesString\",\r\n  });\r\n\r\n  return (\r\n    <DataTableContext.Provider value={{ table }}>\r\n      <div\r\n        className={cn(\r\n          // `relative` required: elevatedSurface's rim ::after must position inside\r\n          // this container, not climb to the nearest positioned ancestor.\r\n          \"relative w-full rounded-2xl md:max-w-2xl\",\r\n          // pseudo-element rim keeps the border line visible above opaque sticky\r\n          // children (DataTableToolbar, table header) in dark mode.\r\n          elevatedSurface(3, 1),\r\n          \"bg-muted\",\r\n          className,\r\n        )}\r\n      >\r\n        {children}\r\n      </div>\r\n    </DataTableContext.Provider>\r\n  );\r\n}\r\n\r\nfunction DataTableToolbar({ className, ...props }: ToolbarProps) {\r\n  return (\r\n    <Toolbar\r\n      className={cn(\"rounded-b-none px-2 pt-2 pb-0\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport interface DataTableContentProps extends Omit<TableProps, \"children\"> {\r\n  children: React.ReactNode;\r\n}\r\n\r\nfunction DataTableContent({\r\n  bordered,\r\n  striped,\r\n  hoverable,\r\n  rowDividers = true,\r\n  className,\r\n  children,\r\n  ...tableProps\r\n}: DataTableContentProps) {\r\n  return (\r\n    <Table\r\n      bordered={bordered}\r\n      striped={striped}\r\n      hoverable={hoverable}\r\n      rowDividers={rowDividers}\r\n      className={cn(\r\n        // Strips Table's own elevation; outer DataTable container owns it.\r\n        // `shadow-none!` needed because twMerge doesn't resolve custom shadow\r\n        // utilities, so without `!` the inner ring persists in light mode.\r\n        // `after:hidden` removes the dark-mode rim ::after (would paint a\r\n        // square-cornered rim over the DataTable's rounded one).\r\n        \"rounded-none bg-transparent shadow-none! ring-0 after:hidden\",\r\n        className,\r\n      )}\r\n      {...tableProps}\r\n    >\r\n      {children}\r\n    </Table>\r\n  );\r\n}\r\n\r\nfunction SortableHeader<TData>({\r\n  column,\r\n  children,\r\n  align,\r\n  isFirst,\r\n  isLast,\r\n}: {\r\n  column: Column<TData, unknown>;\r\n  children: React.ReactNode;\r\n  align?: \"left\" | \"center\" | \"right\";\r\n  isFirst?: boolean;\r\n  isLast?: boolean;\r\n}) {\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      className={cn(\r\n        \"group hover:text-foreground -mx-3 -my-2 flex w-[calc(100%+1.5rem)] cursor-pointer items-center gap-1.5 px-3 py-2 transition-colors\",\r\n        isFirst && \"rounded-l-lg\",\r\n        isLast && \"rounded-r-lg\",\r\n      )}\r\n      onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\r\n    >\r\n      <span\r\n        className={cn(\r\n          \"flex flex-1 items-center\",\r\n          align === \"right\" && \"justify-end\",\r\n          align === \"center\" && \"justify-center\",\r\n        )}\r\n      >\r\n        {children}\r\n      </span>\r\n      {column.getIsSorted() === \"asc\" ? (\r\n        <HugeiconsIcon\r\n          icon={SortByUp01Icon}\r\n          strokeWidth={2}\r\n          className=\"size-4\"\r\n        />\r\n      ) : column.getIsSorted() === \"desc\" ? (\r\n        <HugeiconsIcon\r\n          icon={SortByDown01Icon}\r\n          strokeWidth={2}\r\n          className=\"size-4\"\r\n        />\r\n      ) : (\r\n        <HugeiconsIcon\r\n          icon={ArrowUpDownIcon}\r\n          strokeWidth={2}\r\n          className=\"size-4 opacity-0 group-hover:opacity-50\"\r\n        />\r\n      )}\r\n    </button>\r\n  );\r\n}\r\n\r\nexport interface DataTableHeaderProps extends React.ComponentProps<\r\n  typeof TableHeader\r\n> {\r\n  enableSorting?: boolean;\r\n}\r\n\r\nfunction DataTableHeader({\r\n  enableSorting = false,\r\n  className,\r\n  ...props\r\n}: DataTableHeaderProps) {\r\n  const { table } = useDataTable();\r\n\r\n  const renderHeader = (\r\n    header: ReturnType<typeof table.getHeaderGroups>[0][\"headers\"][0],\r\n    index: number,\r\n    totalHeaders: number,\r\n  ) => {\r\n    if (header.isPlaceholder) return null;\r\n\r\n    const headerDef = header.column.columnDef.header;\r\n    const canSort = header.column.getCanSort();\r\n    const meta = header.column.columnDef.meta as\r\n      | { align?: \"left\" | \"center\" | \"right\" }\r\n      | undefined;\r\n\r\n    if (typeof headerDef === \"string\" && enableSorting && canSort) {\r\n      return (\r\n        <SortableHeader\r\n          column={header.column}\r\n          align={meta?.align}\r\n          isFirst={index === 0}\r\n          isLast={index === totalHeaders - 1}\r\n        >\r\n          {headerDef}\r\n        </SortableHeader>\r\n      );\r\n    }\r\n\r\n    return flexRender(headerDef, header.getContext());\r\n  };\r\n\r\n  return (\r\n    <TableHeader className={className} {...props}>\r\n      {table.getHeaderGroups().map((headerGroup) => (\r\n        <TableRow key={headerGroup.id}>\r\n          {headerGroup.headers.map((header, index) => (\r\n            <TableHead key={header.id} colSpan={header.colSpan}>\r\n              {renderHeader(header, index, headerGroup.headers.length)}\r\n            </TableHead>\r\n          ))}\r\n        </TableRow>\r\n      ))}\r\n    </TableHeader>\r\n  );\r\n}\r\n\r\nexport interface DataTableBodyProps extends React.ComponentProps<\r\n  typeof TableBody\r\n> {\r\n  emptyState?: React.ReactNode;\r\n}\r\n\r\nfunction DataTableBody({\r\n  emptyState,\r\n  className,\r\n  ...props\r\n}: DataTableBodyProps) {\r\n  const { table } = useDataTable();\r\n  const totalColumns = table.getAllColumns().length;\r\n\r\n  return (\r\n    <TableBody className={className} {...props}>\r\n      {table.getRowModel().rows?.length ? (\r\n        table.getRowModel().rows.map((row) => (\r\n          <TableRow key={row.id} selected={row.getIsSelected()}>\r\n            {row.getVisibleCells().map((cell) => (\r\n              <TableCell key={cell.id}>\r\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n              </TableCell>\r\n            ))}\r\n          </TableRow>\r\n        ))\r\n      ) : (\r\n        <TableRow>\r\n          <TableCell colSpan={totalColumns} className=\"h-24 text-center\">\r\n            {emptyState ?? \"No results.\"}\r\n          </TableCell>\r\n        </TableRow>\r\n      )}\r\n    </TableBody>\r\n  );\r\n}\r\n\r\nexport type DataTableFooterProps = React.ComponentProps<typeof TableFooter>;\r\n\r\nfunction DataTableFooter({\r\n  className,\r\n  children,\r\n  ...props\r\n}: DataTableFooterProps) {\r\n  return (\r\n    <TableFooter className={className} {...props}>\r\n      {children}\r\n    </TableFooter>\r\n  );\r\n}\r\n\r\nexport {\r\n  DataTable,\r\n  DataTableToolbar,\r\n  ToolbarSeparator as DataTableToolbarSeparator,\r\n  DataTableSearch,\r\n  DataTableColumnToggle,\r\n  DataTableContent,\r\n  DataTableHeader,\r\n  DataTableBody,\r\n  DataTableFooter,\r\n  DataTablePagination,\r\n  useDataTable,\r\n};\r\n\r\nexport type {\r\n  ColumnDef,\r\n  SortingState,\r\n  RowSelectionState,\r\n  ColumnFiltersState,\r\n  VisibilityState,\r\n  PaginationState,\r\n};\r\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/data-table/data-table.tsx"
    },
    {
      "path": "registry/default/data-table/data-table-column-toggle.tsx",
      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { HugeiconsIcon } from \"@hugeicons/react\"\r\nimport { FilterHorizontalIcon } from \"@hugeicons/core-free-icons\"\r\n\r\nimport {\r\n\tDropdownMenu,\r\n\tDropdownMenuTrigger,\r\n\tDropdownMenuContent,\r\n\tDropdownMenuLabel,\r\n\tDropdownMenuCheckboxItem,\r\n} from \"@/registry/default/dropdown-menu/dropdown-menu\"\r\nimport { Button } from \"@/registry/default/button/button\"\r\nimport { useDataTable } from \"@/registry/default/data-table/data-table-context\"\r\n\r\nfunction DataTableColumnToggle() {\r\n\tconst { table } = useDataTable()\r\n\r\n\tconst toggleableColumns = table\r\n\t\t.getAllColumns()\r\n\t\t.filter((col) => col.id !== \"__select__\" && col.getCanHide())\r\n\r\n\treturn (\r\n\t\t<DropdownMenu>\r\n\t\t\t<DropdownMenuTrigger render={<Button variant=\"ghost\" size=\"icon_sm\" />}>\r\n\t\t\t\t<HugeiconsIcon\r\n\t\t\t\t\ticon={FilterHorizontalIcon}\r\n\t\t\t\t\tclassName=\"size-4\"\r\n\t\t\t\t\tstrokeWidth={2}\r\n\t\t\t\t/>\r\n\t\t\t</DropdownMenuTrigger>\r\n\t\t\t<DropdownMenuContent side=\"bottom\" align=\"end\">\r\n\t\t\t\t<DropdownMenuLabel>Toggle columns</DropdownMenuLabel>\r\n\t\t\t\t{toggleableColumns.map((column) => {\r\n\t\t\t\t\tconst label =\r\n\t\t\t\t\t\ttypeof column.columnDef.header === \"string\"\r\n\t\t\t\t\t\t\t? column.columnDef.header\r\n\t\t\t\t\t\t\t: column.id\r\n\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<DropdownMenuCheckboxItem\r\n\t\t\t\t\t\t\tkey={column.id}\r\n\t\t\t\t\t\t\tchecked={column.getIsVisible()}\r\n\t\t\t\t\t\t\tonCheckedChange={(checked) =>\r\n\t\t\t\t\t\t\t\tcolumn.toggleVisibility(!!checked)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{label}\r\n\t\t\t\t\t\t</DropdownMenuCheckboxItem>\r\n\t\t\t\t\t)\r\n\t\t\t\t})}\r\n\t\t\t</DropdownMenuContent>\r\n\t\t</DropdownMenu>\r\n\t)\r\n}\r\n\r\nexport { DataTableColumnToggle }\r\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/data-table/data-table-column-toggle.tsx"
    },
    {
      "path": "registry/default/data-table/data-table-context.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type Table } from \"@tanstack/react-table\"\n\ninterface DataTableContextValue<TData> {\n\ttable: Table<TData>\n}\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Generic context requires any; type safety is enforced via useDataTable<TData>()\nconst DataTableContext = React.createContext<DataTableContextValue<any> | null>(\n\tnull\n)\n\nfunction useDataTable<TData>() {\n\tconst context = React.useContext(DataTableContext)\n\tif (!context) {\n\t\tthrow new Error(\"useDataTable must be used within a DataTable\")\n\t}\n\treturn context as DataTableContextValue<TData>\n}\n\nexport { DataTableContext, useDataTable }\nexport type { DataTableContextValue }\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/data-table/data-table-context.tsx"
    },
    {
      "path": "registry/default/data-table/data-table-pagination.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/button/button\"\nimport { useDataTable } from \"@/registry/default/data-table/data-table-context\"\n\ninterface DataTablePaginationProps {\n\tclassName?: string\n\tshowSelectedCount?: boolean\n}\n\nfunction DataTablePagination({\n\tclassName,\n\tshowSelectedCount = true,\n}: DataTablePaginationProps) {\n\tconst { table } = useDataTable()\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex items-center justify-between px-2 pb-2\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{showSelectedCount ? (\n\t\t\t\t<span className=\"text-muted-foreground text-sm\">\n\t\t\t\t\t{table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n\t\t\t\t\t{table.getFilteredRowModel().rows.length} row(s) selected\n\t\t\t\t</span>\n\t\t\t) : (\n\t\t\t\t<div />\n\t\t\t)}\n\t\t\t<div className=\"flex items-center gap-2\">\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\tonClick={() => table.previousPage()}\n\t\t\t\t\tdisabled={!table.getCanPreviousPage()}\n\t\t\t\t>\n\t\t\t\t\tPrevious\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\tonClick={() => table.nextPage()}\n\t\t\t\t\tdisabled={!table.getCanNextPage()}\n\t\t\t\t>\n\t\t\t\t\tNext\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\nexport { DataTablePagination }\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/data-table/data-table-pagination.tsx"
    },
    {
      "path": "registry/default/data-table/data-table-search.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toolbar } from \"@base-ui/react/toolbar\"\nimport { HugeiconsIcon } from \"@hugeicons/react\"\nimport { Search01Icon } from \"@hugeicons/core-free-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { useDataTable } from \"@/registry/default/data-table/data-table-context\"\nimport {\n\tInputGroup,\n\tInputGroupAddon,\n\tInputGroupInput,\n} from \"@/registry/default/input-group/input-group\"\n\ninterface DataTableSearchProps\n\textends Omit<React.ComponentProps<\"input\">, \"value\" | \"onChange\" | \"size\"> {\n\tplaceholder?: string\n\tsize?: \"default\" | \"sm\"\n}\n\nfunction DataTableSearch({\n\tplaceholder = \"Search and filter\",\n\tsize = \"sm\",\n\tclassName,\n\t...props\n}: DataTableSearchProps) {\n\tconst { table } = useDataTable()\n\n\treturn (\n\t\t<InputGroup className=\"flex-1 border-0 bg-transparent shadow-none outline-none! dark:bg-transparent\">\n\t\t\t<InputGroupAddon>\n\t\t\t\t<HugeiconsIcon\n\t\t\t\t\ticon={Search01Icon}\n\t\t\t\t\tclassName=\"text-muted-foreground size-4\"\n\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t/>\n\t\t\t</InputGroupAddon>\n\t\t\t<InputGroupInput\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tsize={size}\n\t\t\t\tvalue={table.getState().globalFilter ?? \"\"}\n\t\t\t\tonChange={(e) => table.setGlobalFilter(e.target.value)}\n\t\t\t\tclassName={cn(\"py-0\", className)}\n\t\t\t\trender={<Toolbar.Input />}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</InputGroup>\n\t)\n}\n\nexport { DataTableSearch }\n",
      "type": "registry:ui",
      "target": "components/ui/cubby-ui/data-table/data-table-search.tsx"
    }
  ],
  "type": "registry:ui"
}