From 092100a7c0d4ad241e23aae79eb04304e73dd961 Mon Sep 17 00:00:00 2001
From: Kian Bazza <kian@bazza.dev>
Date: Sat, 12 Apr 2025 18:56:16 -0400
Subject: [PATCH 1/8] feat(data-table-filter): the great decoupling (#47)

Decoupled from TanStack Table.
---
 .gitignore                                    |    4 +
 .vscode/launch.json                           |   47 +
 apps/web/app/demo/page.tsx                    |   17 +
 apps/web/app/layout.tsx                       |    5 +-
 apps/web/app/page.tsx                         |    2 +-
 apps/web/components/code-block.tsx            |   48 +
 .../data.ts                                   |    0
 .../demo.tsx                                  |    0
 .../dynamic/columns.tsx                       |  277 +++
 .../dynamic/data-table.tsx                    |  100 +
 .../data-table-filter-demo/dynamic/data.ts    |  540 +++++
 .../data-table-filter-demo/dynamic/demo.tsx   |   52 +
 .../data-table-filter-demo/dynamic/types.ts   |   31 +
 .../data-table-filter-demo/dynamic/utils.ts   |   13 +
 .../types.tsx                                 |    0
 .../data-table-filter-demo/v2/columns.tsx     |  280 +++
 .../data-table-filter-demo/v2/data-table.tsx  |  123 ++
 .../data-table-filter-demo/v2/data.ts         |  544 +++++
 .../data-table-filter-demo/v2/demo.tsx        |  149 ++
 .../data-table-filter-demo/v2/types.ts        |   32 +
 .../data-table-filter-demo/v2/utils.ts        |   13 +
 apps/web/components/mdx.tsx                   |    2 +-
 apps/web/components/ui/select.tsx             |  185 ++
 apps/web/lib/highlighter.ts                   |   30 +
 apps/web/lib/utils.ts                         |    4 +
 apps/web/package.json                         |    3 +-
 .../components/data-table-filter.tsx          | 1796 +++++++++++++++++
 .../data-table-filter-v2/lib/array.ts         |   27 +
 .../data-table-filter-v2/lib/filter-fns.ts    |  296 +++
 .../data-table-filter-v2/lib/filters-tst.ts   |   93 +
 .../data-table-filter-v2/lib/filters.test.ts  |   44 +
 .../data-table-filter-v2/lib/filters.ts       |  735 +++++++
 .../data-table-filter-v2/lib/filters.types.ts |  308 +++
 .../registry/data-table-filter-v2/lib/memo.ts |   35 +
 bun.lock                                      |    6 +-
 35 files changed, 5836 insertions(+), 5 deletions(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 apps/web/app/demo/page.tsx
 create mode 100644 apps/web/components/code-block.tsx
 rename apps/web/components/{data-table-filter => data-table-filter-demo}/data.ts (100%)
 rename apps/web/components/{data-table-filter => data-table-filter-demo}/demo.tsx (100%)
 create mode 100644 apps/web/components/data-table-filter-demo/dynamic/columns.tsx
 create mode 100644 apps/web/components/data-table-filter-demo/dynamic/data-table.tsx
 create mode 100644 apps/web/components/data-table-filter-demo/dynamic/data.ts
 create mode 100644 apps/web/components/data-table-filter-demo/dynamic/demo.tsx
 create mode 100644 apps/web/components/data-table-filter-demo/dynamic/types.ts
 create mode 100644 apps/web/components/data-table-filter-demo/dynamic/utils.ts
 rename apps/web/components/{data-table-filter => data-table-filter-demo}/types.tsx (100%)
 create mode 100644 apps/web/components/data-table-filter-demo/v2/columns.tsx
 create mode 100644 apps/web/components/data-table-filter-demo/v2/data-table.tsx
 create mode 100644 apps/web/components/data-table-filter-demo/v2/data.ts
 create mode 100644 apps/web/components/data-table-filter-demo/v2/demo.tsx
 create mode 100644 apps/web/components/data-table-filter-demo/v2/types.ts
 create mode 100644 apps/web/components/data-table-filter-demo/v2/utils.ts
 create mode 100644 apps/web/components/ui/select.tsx
 create mode 100644 apps/web/lib/highlighter.ts
 create mode 100644 apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx
 create mode 100644 apps/web/registry/data-table-filter-v2/lib/array.ts
 create mode 100644 apps/web/registry/data-table-filter-v2/lib/filter-fns.ts
 create mode 100644 apps/web/registry/data-table-filter-v2/lib/filters-tst.ts
 create mode 100644 apps/web/registry/data-table-filter-v2/lib/filters.test.ts
 create mode 100644 apps/web/registry/data-table-filter-v2/lib/filters.ts
 create mode 100644 apps/web/registry/data-table-filter-v2/lib/filters.types.ts
 create mode 100644 apps/web/registry/data-table-filter-v2/lib/memo.ts

diff --git a/.gitignore b/.gitignore
index 96fab4fe..b082d458 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,7 @@ yarn-error.log*
 # Misc
 .DS_Store
 *.pem
+
+
+# Repomix
+repomix-output.txt
\ No newline at end of file
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..7e4c92ad
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,47 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "bun dev",
+      "cwd": "${workspaceFolder}/apps/web"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug client-side (Firefox)",
+      "type": "firefox",
+      "request": "launch",
+      "url": "http://localhost:3000",
+      "reAttach": true,
+      "pathMappings": [
+        {
+          "url": "webpack://_N_E",
+          "path": "${workspaceFolder}"
+        }
+      ]
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/node_modules/.bin/next",
+      "cwd": "${workspaceFolder}/apps/web",
+      "runtimeArgs": ["--inspect"],
+      "skipFiles": ["<node_internals>/**"],
+      "serverReadyAction": {
+        "action": "debugWithEdge",
+        "killOnServerStop": true,
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "webRoot": "${workspaceFolder}"
+      }
+    }
+  ]
+}
diff --git a/apps/web/app/demo/page.tsx b/apps/web/app/demo/page.tsx
new file mode 100644
index 00000000..95dfd2d3
--- /dev/null
+++ b/apps/web/app/demo/page.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+const DataTableDemo = dynamic(
+  () => import('@/components/data-table-filter-demo/v2/demo'),
+  { ssr: false },
+)
+// import DataTableDemo from '@/components/data-table-filter/v2/demo'
+
+export default function DemoPage() {
+  return (
+    <div className="p-16">
+      <DataTableDemo />
+    </div>
+  )
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 3754693d..85429723 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -5,6 +5,8 @@ import { env } from '@/lib/env'
 import { berkeleyMono, inter } from '@/lib/fonts'
 import { ThemeProvider } from '@/providers/theme-provider'
 import type { Viewport } from 'next'
+import Head from 'next/head'
+import Script from 'next/script'
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
 
 const title = 'bazza/ui — Hand-crafted, modern React components'
@@ -75,7 +77,8 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <OneDollarStatsScript />
+      <Script src="https://cdn.jsdelivr.net/npm/react-scan/dist/auto.global.js" />
+      {/* <OneDollarStatsScript /> */}
       <body
         className={`${inter.variable} ${berkeleyMono.variable} font-sans antialiased bg-site-background min-h-svh`}
       >
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 0dd13556..c1e3da30 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -1,4 +1,4 @@
-import DataTableDemo from '@/components/data-table-filter/demo'
+import DataTableDemo from '@/components/data-table-filter-demo/demo'
 import { GithubIcon, XIcon } from '@/components/icons'
 import { CodeBlock } from '@/components/landing/code-block'
 import { FadeBlurContainer } from '@/components/landing/fade-blur-container'
diff --git a/apps/web/components/code-block.tsx b/apps/web/components/code-block.tsx
new file mode 100644
index 00000000..37e310a3
--- /dev/null
+++ b/apps/web/components/code-block.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { highlight } from '@/lib/highlighter'
+import { cn } from '@/lib/utils'
+import { type HTMLAttributes, type JSX, useLayoutEffect, useState } from 'react'
+import type { BundledLanguage } from 'shiki/bundle-web.mjs'
+
+interface CodeBlockWrapperProps extends HTMLAttributes<HTMLDivElement> {
+  loading?: boolean
+}
+
+export const CodeBlockWrapper = ({
+  className,
+  children,
+  loading,
+  ...props
+}: CodeBlockWrapperProps) => {
+  return (
+    <div
+      className={cn(
+        '**:font-mono text-sm not-dark:font-[450] rounded-2xl *:rounded-2xl border border-border bg-white dark:bg-neutral-900 shadow-xs',
+        loading && 'p-4',
+        className,
+      )}
+    >
+      {loading ? (
+        <code className="not-dark:font-[450] text-sm text-muted-foreground">
+          Loading...
+        </code>
+      ) : (
+        children
+      )}
+    </div>
+  )
+}
+
+export function CodeBlock({
+  code,
+  lang,
+}: { code: string; lang: BundledLanguage }) {
+  const [nodes, setNodes] = useState<JSX.Element | null>(null)
+
+  useLayoutEffect(() => {
+    void highlight(code, lang).then(setNodes)
+  }, [code, lang])
+
+  return <CodeBlockWrapper loading={!nodes}>{nodes}</CodeBlockWrapper>
+}
diff --git a/apps/web/components/data-table-filter/data.ts b/apps/web/components/data-table-filter-demo/data.ts
similarity index 100%
rename from apps/web/components/data-table-filter/data.ts
rename to apps/web/components/data-table-filter-demo/data.ts
diff --git a/apps/web/components/data-table-filter/demo.tsx b/apps/web/components/data-table-filter-demo/demo.tsx
similarity index 100%
rename from apps/web/components/data-table-filter/demo.tsx
rename to apps/web/components/data-table-filter-demo/demo.tsx
diff --git a/apps/web/components/data-table-filter-demo/dynamic/columns.tsx b/apps/web/components/data-table-filter-demo/dynamic/columns.tsx
new file mode 100644
index 00000000..c3dd45df
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/dynamic/columns.tsx
@@ -0,0 +1,277 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Checkbox } from '@/components/ui/checkbox'
+import { cn } from '@/lib/utils'
+import { defineMeta, filterFn } from '@/registry/data-table-filter/lib/filters'
+import { createColumnHelper } from '@tanstack/react-table'
+import { format } from 'date-fns'
+import {
+  CalendarArrowDownIcon,
+  CalendarArrowUpIcon,
+  CircleDashedIcon,
+  CircleDotDashedIcon,
+  ClockIcon,
+  Heading1Icon,
+  TagsIcon,
+  UserCheckIcon,
+} from 'lucide-react'
+import type { Issue } from './types'
+
+const columnHelper = createColumnHelper<Issue>()
+
+const LABEL_STYLES_MAP = {
+  red: 'bg-red-500 border-red-500',
+  orange: 'bg-orange-500 border-orange-500',
+  amber: 'bg-amber-500 border-amber-500',
+  yellow: 'bg-yellow-500 border-yellow-500',
+  lime: 'bg-lime-500 border-lime-500',
+  green: 'bg-green-500 border-green-500',
+  emerald: 'bg-emerald-500 border-emerald-500',
+  teal: 'bg-teal-500 border-teal-500',
+  cyan: 'bg-cyan-500 border-cyan-500',
+  sky: 'bg-sky-500 border-sky-500',
+  blue: 'bg-blue-500 border-blue-500',
+  indigo: 'bg-indigo-500 border-indigo-500',
+  violet: 'bg-violet-500 border-violet-500',
+  purple: 'bg-purple-500 border-purple-500',
+  fuchsia: 'bg-fuchsia-500 border-fuchsia-500',
+  pink: 'bg-pink-500 border-pink-500',
+  rose: 'bg-rose-500 border-rose-500',
+  neutral: 'bg-neutral-500 border-neutral-500',
+} as const
+
+type TW_COLOR = keyof typeof LABEL_STYLES_MAP
+
+export const columns = [
+  columnHelper.display({
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  }),
+  columnHelper.accessor((row) => row.status, {
+    id: 'status',
+    header: 'Status',
+    cell: ({ row }) => {
+      const status = row.getValue<Issue['status']>('status')
+      const StatusIcon = status.icon
+
+      return (
+        <div className="flex items-center gap-2">
+          <StatusIcon className="size-4" />
+          <span>{status.name}</span>
+        </div>
+      )
+    },
+    filterFn: filterFn('option'),
+    meta: {
+      displayName: 'Status',
+      type: 'option',
+      icon: CircleDotDashedIcon,
+      transformOptionFn(value) {
+        return { value: value.id, label: value.name, icon: value.icon }
+      },
+    },
+  }),
+  columnHelper.accessor((row) => row.title, {
+    id: 'title',
+    header: 'Title',
+    cell: ({ row }) => <div>{row.getValue('title')}</div>,
+    meta: {
+      displayName: 'Title',
+      type: 'text',
+      icon: Heading1Icon,
+    },
+    filterFn: filterFn('text'),
+  }),
+  columnHelper.accessor('assignee', {
+    id: 'assignee',
+    header: 'Assignee',
+    cell: ({ row }) => {
+      const user = row.getValue<Issue['assignee']>('assignee')
+
+      if (!user) {
+        return <CircleDashedIcon className="size-5 text-border" />
+      }
+
+      const initials = user.name
+        .split(' ')
+        .map((x) => x[0])
+        .join('')
+        .toUpperCase()
+
+      return (
+        <Avatar className="size-5">
+          <AvatarImage src={user.picture} />
+          <AvatarFallback>{initials}</AvatarFallback>
+        </Avatar>
+      )
+    },
+    filterFn: filterFn('option'),
+    meta: {
+      displayName: 'Assignee',
+      type: 'option',
+      icon: UserCheckIcon,
+      transformOptionFn: ({ id, name, picture }) => ({
+        value: id,
+        label: name,
+        icon: (
+          <Avatar className="size-4">
+            <AvatarImage src={picture} />
+            <AvatarFallback>
+              {name
+                .split(' ')
+                .map((x) => x[0])
+                .join('')
+                .toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+        ),
+      }),
+    },
+  }),
+  columnHelper.accessor((row) => row.assignee?.name, {
+    id: 'assigneeName',
+    header: 'Assignee (Name)',
+    filterFn: filterFn('option'),
+    meta: defineMeta((row) => row.assignee?.name, {
+      displayName: 'Assignee (Name)',
+      type: 'option',
+      icon: UserCheckIcon,
+      transformOptionFn: (firstName) => ({
+        value: firstName,
+        label: firstName,
+      }),
+    }),
+  }),
+  columnHelper.accessor((row) => row.estimatedHours, {
+    id: 'estimatedHours',
+    header: 'Estimated Hours',
+    cell: ({ row }) => {
+      const estimatedHours = row.getValue<number>('estimatedHours')
+
+      if (!estimatedHours) {
+        return null
+      }
+
+      return (
+        <span>
+          <span className="tabular-nums tracking-tighter">
+            {estimatedHours}
+          </span>
+          <span className="text-muted-foreground ml-0.5">h</span>
+        </span>
+      )
+    },
+    meta: {
+      displayName: 'Estimated Hours',
+      type: 'number',
+      icon: ClockIcon,
+      max: 16,
+    },
+    filterFn: filterFn('number'),
+  }),
+  columnHelper.accessor((row) => row.startDate, {
+    id: 'startDate',
+    header: 'Start Date',
+    cell: ({ row }) => {
+      const startDate = row.getValue<Issue['startDate']>('startDate')
+
+      if (!startDate) {
+        return null
+      }
+
+      const formatted = format(startDate, 'MMM dd')
+
+      return <span>{formatted}</span>
+    },
+    meta: {
+      displayName: 'Start Date',
+      type: 'date',
+      icon: CalendarArrowUpIcon,
+    },
+    filterFn: filterFn('date'),
+  }),
+  columnHelper.accessor((row) => row.endDate, {
+    id: 'endDate',
+    header: 'End Date',
+    cell: ({ row }) => {
+      const endDate = row.getValue<Issue['endDate']>('endDate')
+
+      if (!endDate) {
+        return null
+      }
+
+      const formatted = format(endDate, 'MMM dd')
+
+      return <span>{formatted}</span>
+    },
+    meta: {
+      displayName: 'End Date',
+      type: 'date',
+      icon: CalendarArrowDownIcon,
+    },
+    filterFn: filterFn('date'),
+  }),
+  columnHelper.accessor((row) => row.labels, {
+    id: 'labels',
+    header: 'Labels',
+    cell: ({ row }) => {
+      const labels = row.getValue<Issue['labels']>('labels')
+
+      if (!labels) return null
+
+      return (
+        <div className="flex gap-1">
+          {labels.map((l) => (
+            <div
+              key={l.id}
+              className={cn(
+                'flex items-center gap-1 py-1 px-2 rounded-full text-[11px] tracking-[-0.01em] shadow-xs',
+                LABEL_STYLES_MAP[l.color as TW_COLOR],
+                'border-none text-white font-medium',
+              )}
+            >
+              {l.name}
+            </div>
+          ))}
+        </div>
+      )
+    },
+    filterFn: filterFn('multiOption'),
+    meta: defineMeta((row) => row.labels, {
+      displayName: 'Labels',
+      type: 'multiOption',
+      icon: TagsIcon,
+      transformOptionFn(data) {
+        return {
+          value: data.id,
+          label: data.name,
+          icon: (
+            <div
+              className={cn(
+                'size-2.5 border-none rounded-full',
+                LABEL_STYLES_MAP[data.color as TW_COLOR],
+              )}
+            />
+          ),
+        }
+      },
+    }),
+  }),
+]
diff --git a/apps/web/components/data-table-filter-demo/dynamic/data-table.tsx b/apps/web/components/data-table-filter-demo/dynamic/data-table.tsx
new file mode 100644
index 00000000..f442444c
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/dynamic/data-table.tsx
@@ -0,0 +1,100 @@
+import { Button } from '@/components/ui/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { DataTableFilter } from '@/registry/data-table-filter/components/data-table-filter'
+import { type Table as TanStackTable, flexRender } from '@tanstack/react-table'
+
+export default function DataTable<TData>({
+  table,
+}: { table: TanStackTable<TData> }) {
+  return (
+    <div className="w-full">
+      <div className="flex items-center py-4 gap-2">
+        <DataTableFilter table={table} />
+      </div>
+      <div className="rounded-md border bg-white dark:bg-inherit">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={table.getAllColumns().length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <div className="flex-1 text-sm text-muted-foreground tabular-nums">
+          {table.getFilteredSelectedRowModel().rows.length} of{' '}
+          {table.getFilteredRowModel().rows.length} row(s) selected.{' '}
+          <span className="text-primary font-medium">
+            Total row count: {table.getCoreRowModel().rows.length}
+          </span>
+        </div>
+        <div className="space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/components/data-table-filter-demo/dynamic/data.ts b/apps/web/components/data-table-filter-demo/dynamic/data.ts
new file mode 100644
index 00000000..2bbfc3eb
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/dynamic/data.ts
@@ -0,0 +1,540 @@
+import { lorem } from '@ndaidong/txtgen'
+import { add, differenceInDays, sub } from 'date-fns'
+import {
+  CircleCheckIcon,
+  CircleDashedIcon,
+  CircleDotIcon,
+  CircleIcon,
+} from 'lucide-react'
+import { nanoid } from 'nanoid'
+import { randomInteger, sample } from 'remeda'
+import type { Issue, IssueLabel, IssueStatus, User } from './types'
+import { isAnyOf } from './utils'
+
+export const calculateEndDate = (start: Date) => {
+  const diff = differenceInDays(new Date(), start)
+  const offset = randomInteger(0, diff + 1)
+
+  return add(start, { days: offset })
+}
+
+export const USERS: User[] = [
+  {
+    id: nanoid(),
+    name: 'John Smith',
+    picture: '/avatars/john-smith.png',
+  },
+  {
+    id: nanoid(),
+    name: 'Rose Eve',
+    picture: '/avatars/rose-eve.png',
+  },
+  {
+    id: nanoid(),
+    name: 'Adam Young',
+    picture: '/avatars/adam-young.png',
+  },
+  {
+    id: nanoid(),
+    name: 'Michael Scott',
+    picture: '/avatars/michael-scott.png',
+  },
+] as const
+
+export const ISSUE_STATUSES: IssueStatus[] = [
+  {
+    id: 'backlog',
+    name: 'Backlog',
+    icon: CircleDashedIcon,
+  },
+  {
+    id: 'todo',
+    name: 'Todo',
+    icon: CircleIcon,
+  },
+  {
+    id: 'in-progress',
+    name: 'In Progress',
+    icon: CircleDotIcon,
+  },
+  {
+    id: 'done',
+    name: 'Done',
+    icon: CircleCheckIcon,
+  },
+] as const
+
+export const ISSUE_LABELS: IssueLabel[] = [
+  { id: '550e8400-e29b-41d4-a716-446655440000', name: 'Bug', color: 'red' },
+  {
+    id: '6ba7b810-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Enhancement',
+    color: 'green',
+  },
+  { id: '6ba7b811-9dad-11d1-80b4-00c04fd430c8', name: 'Task', color: 'blue' },
+  { id: '6ba7b812-9dad-11d1-80b4-00c04fd430c8', name: 'Urgent', color: 'pink' },
+  {
+    id: '6ba7b813-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Low Priority',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b814-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Frontend',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b815-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Backend',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b816-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Database',
+    color: 'violet',
+  },
+  { id: '6ba7b817-9dad-11d1-80b4-00c04fd430c8', name: 'API', color: 'red' },
+  {
+    id: '6ba7b818-9dad-11d1-80b4-00c04fd430c8',
+    name: 'AI Model',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b819-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Data Pipeline',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b81a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Inference',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b81b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'AI Integration',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b81c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Ethics',
+    color: 'fuchsia',
+  },
+  {
+    id: '6ba7b81d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Refactor',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b81e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Performance',
+    color: 'red',
+  },
+  {
+    id: '6ba7b81f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Security',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b820-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Testing',
+    color: 'yellow',
+  },
+  {
+    id: '6ba7b821-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Documentation',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b822-9dad-11d1-80b4-00c04fd430c8',
+    name: 'In Progress',
+    color: 'green',
+  },
+  {
+    id: '6ba7b823-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Blocked',
+    color: 'indigo',
+  },
+  {
+    id: '6ba7b824-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Needs Review',
+    color: 'orange',
+  },
+  { id: '6ba7b825-9dad-11d1-80b4-00c04fd430c8', name: 'Done', color: 'teal' },
+  { id: '6ba7b826-9dad-11d1-80b4-00c04fd430c8', name: 'UI', color: 'red' },
+  { id: '6ba7b827-9dad-11d1-80b4-00c04fd430c8', name: 'UX', color: 'sky' },
+  {
+    id: '6ba7b828-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Accessibility',
+    color: 'red',
+  },
+  {
+    id: '6ba7b829-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Deployment',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b82a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Infrastructure',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b82b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Monitoring',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b82c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Real-Time',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b82d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Scalability',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b82e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Third-Party',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b82f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Authentication',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b830-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Authorization',
+    color: 'green',
+  },
+  {
+    id: '6ba7b831-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Caching',
+    color: 'lime',
+  },
+  { id: '6ba7b832-9dad-11d1-80b4-00c04fd430c8', name: 'Logging', color: 'red' },
+  {
+    id: '6ba7b833-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Analytics',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b834-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Feature Request',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b835-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Regression',
+    color: 'teal',
+  },
+  { id: '6ba7b836-9dad-11d1-80b4-00c04fd430c8', name: 'Hotfix', color: 'red' },
+  {
+    id: '6ba7b837-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Code Review',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b838-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Tech Debt',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b839-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Migration',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b83a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Configuration',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b83b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Validation',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b83c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Input Handling',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b83d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Error Handling',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b83e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Session Management',
+    color: 'green',
+  },
+  {
+    id: '6ba7b83f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Concurrency',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b840-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Load Balancing',
+    color: 'red',
+  },
+  {
+    id: '6ba7b841-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Data Migration',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b842-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Model Training',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b843-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Hyperparameters',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b844-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Overfitting',
+    color: 'red',
+  },
+  {
+    id: '6ba7b845-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Underfitting',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b846-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Feature Engineering',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b847-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Data Quality',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b848-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Preprocessing',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b849-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Model Deployment',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b84a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Latency',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b84b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Throughput',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b84c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'API Versioning',
+    color: 'green',
+  },
+  {
+    id: '6ba7b84d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Rate Limiting',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b84e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Throttling',
+    color: 'red',
+  },
+  {
+    id: '6ba7b84f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Retry Logic',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b850-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Fallback',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b851-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Circuit Breaker',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b852-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Queue Management',
+    color: 'red',
+  },
+  {
+    id: '6ba7b853-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Batch Processing',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b854-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Streaming',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b855-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Event Handling',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b856-9dad-11d1-80b4-00c04fd430c8',
+    name: 'WebSocket',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b857-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Cron Job',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b858-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Scheduled Task',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b859-9dad-11d1-80b4-00c04fd430c8',
+    name: 'File Upload',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b85a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'File Processing',
+    color: 'green',
+  },
+  { id: '6ba7b85b-9dad-11d1-80b4-00c04fd430c8', name: 'Export', color: 'lime' },
+  { id: '6ba7b85c-9dad-11d1-80b4-00c04fd430c8', name: 'Import', color: 'red' },
+  {
+    id: '6ba7b85d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Localization',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b85e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Internationalization',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b85f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Notifications',
+    color: 'teal',
+  },
+  { id: '6ba7b860-9dad-11d1-80b4-00c04fd430c8', name: 'Email', color: 'red' },
+  {
+    id: '6ba7b861-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Push Notifications',
+    color: 'emerald',
+  },
+  { id: '6ba7b862-9dad-11d1-80b4-00c04fd430c8', name: 'SMS', color: 'purple' },
+  {
+    id: '6ba7b863-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Audit Log',
+    color: 'pink',
+  },
+  { id: '6ba7b864-9dad-11d1-80b4-00c04fd430c8', name: 'Backup', color: 'lime' },
+  {
+    id: '6ba7b865-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Restore',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b866-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Disaster Recovery',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b867-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Compliance',
+    color: 'rose',
+  },
+  { id: '6ba7b868-9dad-11d1-80b4-00c04fd430c8', name: 'GDPR', color: 'green' },
+  { id: '6ba7b869-9dad-11d1-80b4-00c04fd430c8', name: 'HIPAA', color: 'lime' },
+  {
+    id: '6ba7b86a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Debugging',
+    color: 'red',
+  },
+  {
+    id: '6ba7b86b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Profiling',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b86c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Optimization',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b86d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Research',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b86e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Experiment',
+    color: 'red',
+  },
+  {
+    id: '6ba7b86f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Proof of Concept',
+    color: 'emerald',
+  },
+]
+
+export function generateSampleIssue(): Issue {
+  const title = lorem(4, 8)
+  const description = lorem(4, 8)
+
+  const labelsCount = randomInteger(0, 5)
+  const labels =
+    labelsCount > 0
+      ? (sample(ISSUE_LABELS, labelsCount) as IssueLabel[])
+      : undefined
+
+  let [assignee] = sample(USERS, 1)
+  if (!assignee) throw new Error('No assignee found')
+  assignee = Math.random() > 0.5 ? assignee : undefined
+
+  const [status] = sample(ISSUE_STATUSES, 1)
+  if (!status) throw new Error('No status found')
+
+  const startDate = isAnyOf(status.id, ['backlog', 'todo'])
+    ? undefined
+    : sub(new Date(), { days: randomInteger(10, 60) })
+
+  const endDate =
+    !startDate || status.id !== 'done' ? undefined : calculateEndDate(startDate)
+
+  const estimatedHours = randomInteger(1, 16)
+
+  return {
+    id: nanoid(),
+    title,
+    description,
+    status,
+    labels,
+    assignee,
+    startDate,
+    endDate,
+    estimatedHours,
+  }
+}
+
+export function generateIssues(count: number) {
+  const arr: Issue[] = []
+
+  for (let i = 0; i < count; i++) {
+    arr.push(generateSampleIssue())
+  }
+
+  return arr
+}
+
+export const ISSUES = generateIssues(5000)
diff --git a/apps/web/components/data-table-filter-demo/dynamic/demo.tsx b/apps/web/components/data-table-filter-demo/dynamic/demo.tsx
new file mode 100644
index 00000000..3bb54944
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/dynamic/demo.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import { useState } from 'react'
+
+import {
+  type ColumnFiltersState,
+  type SortingState,
+  type VisibilityState,
+  getCoreRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { columns } from './columns'
+import { ISSUES } from './data'
+import DataTable from './data-table'
+
+export default function DataTableDemo() {
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [globalFilter, setGlobalFilter] = useState('')
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = useState({})
+
+  const table = useReactTable({
+    data: ISSUES,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedMinMaxValues: getFacetedMinMaxValues(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    state: {
+      sorting,
+      columnFilters,
+      globalFilter,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return <DataTable table={table} />
+}
diff --git a/apps/web/components/data-table-filter-demo/dynamic/types.ts b/apps/web/components/data-table-filter-demo/dynamic/types.ts
new file mode 100644
index 00000000..b945937d
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/dynamic/types.ts
@@ -0,0 +1,31 @@
+export type Issue = {
+  id: string
+  title: string
+  description?: string
+  status: IssueStatus
+  labels?: IssueLabel[]
+  assignee?: User
+  startDate?: Date
+  endDate?: Date
+  estimatedHours?: number
+}
+
+import type { LucideIcon } from 'lucide-react'
+
+export type User = {
+  id: string
+  name: string
+  picture: string
+}
+
+export type IssueLabel = {
+  id: string
+  name: string
+  color: string
+}
+
+export type IssueStatus = {
+  id: 'backlog' | 'todo' | 'in-progress' | 'done'
+  name: string
+  icon: LucideIcon
+}
diff --git a/apps/web/components/data-table-filter-demo/dynamic/utils.ts b/apps/web/components/data-table-filter-demo/dynamic/utils.ts
new file mode 100644
index 00000000..a2db0f5c
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/dynamic/utils.ts
@@ -0,0 +1,13 @@
+import { add, differenceInDays } from 'date-fns'
+import { randomInteger } from 'remeda'
+
+export const calculateEndDate = (start: Date) => {
+  const diff = differenceInDays(new Date(), start)
+  const offset = randomInteger(0, diff + 1)
+
+  return add(start, { days: offset })
+}
+
+export function isAnyOf<T>(value: T, array: T[]) {
+  return array.includes(value)
+}
diff --git a/apps/web/components/data-table-filter/types.tsx b/apps/web/components/data-table-filter-demo/types.tsx
similarity index 100%
rename from apps/web/components/data-table-filter/types.tsx
rename to apps/web/components/data-table-filter-demo/types.tsx
diff --git a/apps/web/components/data-table-filter-demo/v2/columns.tsx b/apps/web/components/data-table-filter-demo/v2/columns.tsx
new file mode 100644
index 00000000..4eed46d1
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/v2/columns.tsx
@@ -0,0 +1,280 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Checkbox } from '@/components/ui/checkbox'
+import { cn } from '@/lib/utils'
+import { createColumnConfigHelper } from '@/registry/data-table-filter-v2/lib/filters'
+import { filterFn } from '@/registry/data-table-filter/lib/filters'
+import { createColumnHelper } from '@tanstack/react-table'
+import { format } from 'date-fns'
+import {
+  CalendarArrowDownIcon,
+  CalendarArrowUpIcon,
+  CircleDashedIcon,
+  CircleDotDashedIcon,
+  ClockIcon,
+  Heading1Icon,
+  TagsIcon,
+  UserCheckIcon,
+} from 'lucide-react'
+import { ISSUE_STATUSES } from './data'
+import type { Issue } from './types'
+
+const LABEL_STYLES_MAP = {
+  red: 'bg-red-500 border-red-500',
+  orange: 'bg-orange-500 border-orange-500',
+  amber: 'bg-amber-500 border-amber-500',
+  yellow: 'bg-yellow-500 border-yellow-500',
+  lime: 'bg-lime-500 border-lime-500',
+  green: 'bg-green-500 border-green-500',
+  emerald: 'bg-emerald-500 border-emerald-500',
+  teal: 'bg-teal-500 border-teal-500',
+  cyan: 'bg-cyan-500 border-cyan-500',
+  sky: 'bg-sky-500 border-sky-500',
+  blue: 'bg-blue-500 border-blue-500',
+  indigo: 'bg-indigo-500 border-indigo-500',
+  violet: 'bg-violet-500 border-violet-500',
+  purple: 'bg-purple-500 border-purple-500',
+  fuchsia: 'bg-fuchsia-500 border-fuchsia-500',
+  pink: 'bg-pink-500 border-pink-500',
+  rose: 'bg-rose-500 border-rose-500',
+  neutral: 'bg-neutral-500 border-neutral-500',
+} as const
+
+type TW_COLOR = keyof typeof LABEL_STYLES_MAP
+
+const columnHelper = createColumnHelper<Issue>()
+
+export const columns = [
+  columnHelper.display({
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor((row) => row.status, {
+    id: 'status',
+    header: 'Status',
+    enableColumnFilter: true,
+    cell: ({ row }) => {
+      const status = row.getValue<Issue['status']>('status')
+      const StatusIcon = status.icon
+
+      return (
+        <div className="flex items-center gap-2">
+          <StatusIcon className="size-4" />
+          <span>{status.name}</span>
+        </div>
+      )
+    },
+  }),
+  columnHelper.accessor((row) => row.title, {
+    id: 'title',
+    header: 'Title',
+    enableColumnFilter: true,
+    cell: ({ row }) => <div>{row.getValue('title')}</div>,
+  }),
+  columnHelper.accessor('assignee', {
+    id: 'assignee',
+    header: 'Assignee',
+    enableColumnFilter: true,
+    cell: ({ row }) => {
+      const user = row.getValue<Issue['assignee']>('assignee')
+
+      if (!user) {
+        return <CircleDashedIcon className="size-5 text-border" />
+      }
+
+      const initials = user.name
+        .split(' ')
+        .map((x) => x[0])
+        .join('')
+        .toUpperCase()
+
+      return (
+        <Avatar className="size-5">
+          <AvatarImage src={user.picture} />
+          <AvatarFallback>{initials}</AvatarFallback>
+        </Avatar>
+      )
+    },
+  }),
+  columnHelper.accessor((row) => row.assignee?.name, {
+    id: 'assigneeName',
+    header: 'Assignee (Name)',
+    enableColumnFilter: true,
+  }),
+  columnHelper.accessor((row) => row.estimatedHours, {
+    id: 'estimatedHours',
+    header: 'Estimated Hours',
+    enableColumnFilter: true,
+    cell: ({ row }) => {
+      const estimatedHours = row.getValue<number>('estimatedHours')
+
+      if (!estimatedHours) {
+        return null
+      }
+
+      return (
+        <span>
+          <span className="tabular-nums tracking-tighter">
+            {estimatedHours}
+          </span>
+          <span className="text-muted-foreground ml-0.5">h</span>
+        </span>
+      )
+    },
+  }),
+  columnHelper.accessor((row) => row.startDate, {
+    id: 'startDate',
+    header: 'Start Date',
+    enableColumnFilter: true,
+    cell: ({ row }) => {
+      const startDate = row.getValue<Issue['startDate']>('startDate')
+
+      if (!startDate) {
+        return null
+      }
+
+      const formatted = format(startDate, 'MMM dd')
+
+      return <span>{formatted}</span>
+    },
+  }),
+  columnHelper.accessor((row) => row.endDate, {
+    id: 'endDate',
+    header: 'End Date',
+    cell: ({ row }) => {
+      const endDate = row.getValue<Issue['endDate']>('endDate')
+
+      if (!endDate) {
+        return null
+      }
+
+      const formatted = format(endDate, 'MMM dd')
+
+      return <span>{formatted}</span>
+    },
+  }),
+  columnHelper.accessor((row) => row.labels, {
+    id: 'labels',
+    header: 'Labels',
+    enableColumnFilter: true,
+    cell: ({ row }) => {
+      const labels = row.getValue<Issue['labels']>('labels')
+
+      if (!labels) return null
+
+      return (
+        <div className="flex gap-1">
+          {labels.map((l) => (
+            <div
+              key={l.id}
+              className={cn(
+                'flex items-center gap-1 py-1 px-2 rounded-full text-[11px] tracking-[-0.01em] shadow-xs',
+                LABEL_STYLES_MAP[l.color as TW_COLOR],
+                'border-none text-white font-medium',
+              )}
+            >
+              {l.name}
+            </div>
+          ))}
+        </div>
+      )
+    },
+  }),
+]
+
+const filtersHelper = createColumnConfigHelper<Issue>()
+
+export const columnsConfig = [
+  filtersHelper.accessor((row) => row.title, {
+    id: 'title',
+    type: 'text',
+    displayName: 'Title',
+    icon: Heading1Icon,
+  }),
+  filtersHelper.accessor((row) => row.status, {
+    id: 'status',
+    type: 'option',
+    displayName: 'Status',
+    icon: CircleDotDashedIcon,
+    transformOptionFn(value) {
+      return { value: value.id, label: value.name, icon: value.icon }
+    },
+    orderFn(a, b) {
+      return a.order - b.order
+    },
+  }),
+  filtersHelper.accessor((row) => row.assignee, {
+    id: 'assignee',
+    type: 'option',
+    displayName: 'Assignee',
+    icon: UserCheckIcon,
+    transformOptionFn: ({ id, name, picture }) => ({
+      value: id,
+      label: name,
+      icon: (
+        <Avatar className="size-4">
+          <AvatarImage src={picture} />
+          <AvatarFallback>
+            {name
+              .split(' ')
+              .map((x) => x[0])
+              .join('')
+              .toUpperCase()}
+          </AvatarFallback>
+        </Avatar>
+      ),
+    }),
+  }),
+  filtersHelper.accessor((row) => row.labels, {
+    id: 'labels',
+    type: 'multiOption',
+    displayName: 'Labels',
+    icon: TagsIcon,
+    transformOptionFn(data) {
+      return {
+        value: data.id,
+        label: data.name,
+        icon: (
+          <div
+            className={cn(
+              'size-2.5 border-none rounded-full',
+              LABEL_STYLES_MAP[data.color as TW_COLOR],
+            )}
+          />
+        ),
+      }
+    },
+  }),
+  filtersHelper.accessor((row) => row.estimatedHours, {
+    id: 'estimatedHours',
+    type: 'number',
+    displayName: 'Estimated hours',
+    icon: ClockIcon,
+    min: 0,
+    max: 100,
+  }),
+  filtersHelper.accessor((row) => row.startDate, {
+    id: 'startDate',
+    type: 'date',
+    displayName: 'Start Date',
+    icon: CalendarArrowUpIcon,
+  }),
+]
diff --git a/apps/web/components/data-table-filter-demo/v2/data-table.tsx b/apps/web/components/data-table-filter-demo/v2/data-table.tsx
new file mode 100644
index 00000000..206bd68f
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/v2/data-table.tsx
@@ -0,0 +1,123 @@
+import { Button } from '@/components/ui/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { DataTableFilter } from '@/registry/data-table-filter-v2/components/data-table-filter'
+import type {
+  Column,
+  DataTableFilterActions,
+  FiltersState,
+} from '@/registry/data-table-filter-v2/lib/filters.types'
+import { type Table as TanStackTable, flexRender } from '@tanstack/react-table'
+import { memo } from 'react'
+
+interface DataTableProps<TData> {
+  table: TanStackTable<TData>
+  filters: FiltersState
+  columns: Column<TData>[]
+  actions: DataTableFilterActions
+}
+
+export function DataTable<TData>({
+  table,
+  filters,
+  columns,
+  actions,
+}: DataTableProps<TData>) {
+  return (
+    <div className="w-full">
+      <div className="flex items-center pb-4 gap-2">
+        <DataTableFilter
+          filters={filters}
+          columns={columns}
+          actions={actions}
+        />
+      </div>
+      <div className="rounded-md border bg-white dark:bg-inherit">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                  className="h-12"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={table.getAllColumns().length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <div className="flex-1 text-sm text-muted-foreground tabular-nums">
+          {table.getFilteredSelectedRowModel().rows.length} of{' '}
+          {table.getFilteredRowModel().rows.length} row(s) selected.{' '}
+          <span className="text-primary font-medium">
+            Total row count: {table.getCoreRowModel().rows.length}
+          </span>
+        </div>
+        <div className="space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DataTable
diff --git a/apps/web/components/data-table-filter-demo/v2/data.ts b/apps/web/components/data-table-filter-demo/v2/data.ts
new file mode 100644
index 00000000..575beb69
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/v2/data.ts
@@ -0,0 +1,544 @@
+import { lorem } from '@ndaidong/txtgen'
+import { add, differenceInDays, sub } from 'date-fns'
+import {
+  CircleCheckIcon,
+  CircleDashedIcon,
+  CircleDotIcon,
+  CircleIcon,
+} from 'lucide-react'
+import { nanoid } from 'nanoid'
+import { randomInteger, sample } from 'remeda'
+import type { Issue, IssueLabel, IssueStatus, User } from './types'
+import { isAnyOf } from './utils'
+
+export const calculateEndDate = (start: Date) => {
+  const diff = differenceInDays(new Date(), start)
+  const offset = randomInteger(0, diff + 1)
+
+  return add(start, { days: offset })
+}
+
+export const USERS: User[] = [
+  {
+    id: 'rmraOG0B-2xSUyJ3e73mv',
+    name: 'John Smith',
+    picture: '/avatars/john-smith.png',
+  },
+  {
+    id: '4_vjFSibR5YkkQiHafaLx',
+    name: 'Rose Eve',
+    picture: '/avatars/rose-eve.png',
+  },
+  {
+    id: 'RC9mraUl-oJECORIjeNbd',
+    name: 'Adam Young',
+    picture: '/avatars/adam-young.png',
+  },
+  {
+    id: 'hhkjn-3L9bKDbl1FKuZW0',
+    name: 'Michael Scott',
+    picture: '/avatars/michael-scott.png',
+  },
+] as const
+
+export const ISSUE_STATUSES: IssueStatus[] = [
+  {
+    id: 'backlog',
+    name: 'Backlog',
+    icon: CircleDashedIcon,
+    order: 1,
+  },
+  {
+    id: 'todo',
+    name: 'Todo',
+    icon: CircleIcon,
+    order: 2,
+  },
+  {
+    id: 'in-progress',
+    name: 'In Progress',
+    icon: CircleDotIcon,
+    order: 3,
+  },
+  {
+    id: 'done',
+    name: 'Done',
+    icon: CircleCheckIcon,
+    order: 4,
+  },
+] as const
+
+export const ISSUE_LABELS: IssueLabel[] = [
+  { id: '550e8400-e29b-41d4-a716-446655440000', name: 'Bug', color: 'red' },
+  {
+    id: '6ba7b810-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Enhancement',
+    color: 'green',
+  },
+  { id: '6ba7b811-9dad-11d1-80b4-00c04fd430c8', name: 'Task', color: 'blue' },
+  { id: '6ba7b812-9dad-11d1-80b4-00c04fd430c8', name: 'Urgent', color: 'pink' },
+  {
+    id: '6ba7b813-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Low Priority',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b814-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Frontend',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b815-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Backend',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b816-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Database',
+    color: 'violet',
+  },
+  { id: '6ba7b817-9dad-11d1-80b4-00c04fd430c8', name: 'API', color: 'red' },
+  {
+    id: '6ba7b818-9dad-11d1-80b4-00c04fd430c8',
+    name: 'AI Model',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b819-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Data Pipeline',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b81a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Inference',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b81b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'AI Integration',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b81c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Ethics',
+    color: 'fuchsia',
+  },
+  {
+    id: '6ba7b81d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Refactor',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b81e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Performance',
+    color: 'red',
+  },
+  {
+    id: '6ba7b81f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Security',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b820-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Testing',
+    color: 'yellow',
+  },
+  {
+    id: '6ba7b821-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Documentation',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b822-9dad-11d1-80b4-00c04fd430c8',
+    name: 'In Progress',
+    color: 'green',
+  },
+  {
+    id: '6ba7b823-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Blocked',
+    color: 'indigo',
+  },
+  {
+    id: '6ba7b824-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Needs Review',
+    color: 'orange',
+  },
+  { id: '6ba7b825-9dad-11d1-80b4-00c04fd430c8', name: 'Done', color: 'teal' },
+  { id: '6ba7b826-9dad-11d1-80b4-00c04fd430c8', name: 'UI', color: 'red' },
+  { id: '6ba7b827-9dad-11d1-80b4-00c04fd430c8', name: 'UX', color: 'sky' },
+  {
+    id: '6ba7b828-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Accessibility',
+    color: 'red',
+  },
+  {
+    id: '6ba7b829-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Deployment',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b82a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Infrastructure',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b82b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Monitoring',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b82c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Real-Time',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b82d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Scalability',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b82e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Third-Party',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b82f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Authentication',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b830-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Authorization',
+    color: 'green',
+  },
+  {
+    id: '6ba7b831-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Caching',
+    color: 'lime',
+  },
+  { id: '6ba7b832-9dad-11d1-80b4-00c04fd430c8', name: 'Logging', color: 'red' },
+  {
+    id: '6ba7b833-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Analytics',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b834-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Feature Request',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b835-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Regression',
+    color: 'teal',
+  },
+  { id: '6ba7b836-9dad-11d1-80b4-00c04fd430c8', name: 'Hotfix', color: 'red' },
+  {
+    id: '6ba7b837-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Code Review',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b838-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Tech Debt',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b839-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Migration',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b83a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Configuration',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b83b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Validation',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b83c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Input Handling',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b83d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Error Handling',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b83e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Session Management',
+    color: 'green',
+  },
+  {
+    id: '6ba7b83f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Concurrency',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b840-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Load Balancing',
+    color: 'red',
+  },
+  {
+    id: '6ba7b841-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Data Migration',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b842-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Model Training',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b843-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Hyperparameters',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b844-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Overfitting',
+    color: 'red',
+  },
+  {
+    id: '6ba7b845-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Underfitting',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b846-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Feature Engineering',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b847-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Data Quality',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b848-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Preprocessing',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b849-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Model Deployment',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b84a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Latency',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b84b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Throughput',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b84c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'API Versioning',
+    color: 'green',
+  },
+  {
+    id: '6ba7b84d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Rate Limiting',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b84e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Throttling',
+    color: 'red',
+  },
+  {
+    id: '6ba7b84f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Retry Logic',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b850-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Fallback',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b851-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Circuit Breaker',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b852-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Queue Management',
+    color: 'red',
+  },
+  {
+    id: '6ba7b853-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Batch Processing',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b854-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Streaming',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b855-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Event Handling',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b856-9dad-11d1-80b4-00c04fd430c8',
+    name: 'WebSocket',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b857-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Cron Job',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b858-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Scheduled Task',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b859-9dad-11d1-80b4-00c04fd430c8',
+    name: 'File Upload',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b85a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'File Processing',
+    color: 'green',
+  },
+  { id: '6ba7b85b-9dad-11d1-80b4-00c04fd430c8', name: 'Export', color: 'lime' },
+  { id: '6ba7b85c-9dad-11d1-80b4-00c04fd430c8', name: 'Import', color: 'red' },
+  {
+    id: '6ba7b85d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Localization',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b85e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Internationalization',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b85f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Notifications',
+    color: 'teal',
+  },
+  { id: '6ba7b860-9dad-11d1-80b4-00c04fd430c8', name: 'Email', color: 'red' },
+  {
+    id: '6ba7b861-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Push Notifications',
+    color: 'emerald',
+  },
+  { id: '6ba7b862-9dad-11d1-80b4-00c04fd430c8', name: 'SMS', color: 'purple' },
+  {
+    id: '6ba7b863-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Audit Log',
+    color: 'pink',
+  },
+  { id: '6ba7b864-9dad-11d1-80b4-00c04fd430c8', name: 'Backup', color: 'lime' },
+  {
+    id: '6ba7b865-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Restore',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b866-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Disaster Recovery',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b867-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Compliance',
+    color: 'rose',
+  },
+  { id: '6ba7b868-9dad-11d1-80b4-00c04fd430c8', name: 'GDPR', color: 'green' },
+  { id: '6ba7b869-9dad-11d1-80b4-00c04fd430c8', name: 'HIPAA', color: 'lime' },
+  {
+    id: '6ba7b86a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Debugging',
+    color: 'red',
+  },
+  {
+    id: '6ba7b86b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Profiling',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b86c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Optimization',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b86d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Research',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b86e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Experiment',
+    color: 'red',
+  },
+  {
+    id: '6ba7b86f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Proof of Concept',
+    color: 'emerald',
+  },
+]
+
+export function generateSampleIssue(): Issue {
+  const title = lorem(4, 8)
+  const description = lorem(4, 8)
+
+  const labelsCount = randomInteger(0, 5)
+  const labels =
+    labelsCount > 0
+      ? (sample(ISSUE_LABELS, labelsCount) as IssueLabel[])
+      : undefined
+
+  let [assignee] = sample(USERS, 1)
+  if (!assignee) throw new Error('No assignee found')
+  assignee = Math.random() > 0.5 ? assignee : undefined
+
+  const [status] = sample(ISSUE_STATUSES, 1)
+  if (!status) throw new Error('No status found')
+
+  const startDate = isAnyOf(status.id, ['backlog', 'todo'])
+    ? undefined
+    : sub(new Date(), { days: randomInteger(10, 60) })
+
+  const endDate =
+    !startDate || status.id !== 'done' ? undefined : calculateEndDate(startDate)
+
+  const estimatedHours = randomInteger(1, 16)
+
+  return {
+    id: nanoid(),
+    title,
+    description,
+    status,
+    labels,
+    assignee,
+    startDate,
+    endDate,
+    estimatedHours,
+  }
+}
+
+export function generateIssues(count: number) {
+  const arr: Issue[] = []
+
+  for (let i = 0; i < count; i++) {
+    arr.push(generateSampleIssue())
+  }
+
+  return arr
+}
+
+export const ISSUES = generateIssues(10)
diff --git a/apps/web/components/data-table-filter-demo/v2/demo.tsx b/apps/web/components/data-table-filter-demo/v2/demo.tsx
new file mode 100644
index 00000000..ec49ebcc
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/v2/demo.tsx
@@ -0,0 +1,149 @@
+'use client'
+
+import { use, useEffect, useMemo, useState } from 'react'
+
+import { CodeBlock } from '@/components/code-block'
+import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { print } from '@/lib/utils'
+import { useDataTableFilters } from '@/registry/data-table-filter-v2/components/data-table-filter'
+import {
+  createTSTColumns,
+  createTSTFilters,
+} from '@/registry/data-table-filter-v2/lib/filters-tst'
+import type { FiltersState } from '@/registry/data-table-filter-v2/lib/filters.types'
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  type SortingState,
+  type VisibilityState,
+  getCoreRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { useSearchParams } from 'next/navigation'
+import { parseAsJson, useQueryState } from 'nuqs'
+import { z } from 'zod'
+import { columnsConfig, columns as tableColumns } from './columns'
+import { ISSUES } from './data'
+import DataTable from './data-table'
+import type { Issue } from './types'
+
+interface DemoConfig {
+  state: 'internal' | 'external' | 'nuqs'
+}
+
+const filtersSchema = z
+  .object({
+    columnId: z.string(),
+    operator: z.string(),
+    values: z.array(z.any()),
+  })
+  .array()
+  .min(0)
+
+type FiltersSchema = z.infer<typeof filtersSchema>
+
+const demoConfigSchema = z.object({
+  state: z.enum(['internal', 'external', 'nuqs']),
+})
+
+export default function DataTableDemo() {
+  const [rowSelection, setRowSelection] = useState({})
+
+  const [config, setConfig] = useQueryState<DemoConfig>(
+    'demoConfig',
+    parseAsJson(demoConfigSchema.parse).withDefault({ state: 'internal' }),
+  )
+
+  const [columnFiltersExternal, setColumnFiltersExternal] =
+    useState<FiltersState>([])
+
+  const tstFilters = useMemo(
+    () => createTSTFilters(columnFiltersExternal),
+    [columnFiltersExternal],
+  )
+
+  // const [columnFiltersNuqs, setColumnFiltersNuqs] = useQueryState<FiltersState>(
+  //   'filters',
+  //   parseAsJson(filtersSchema.parse).withDefault([]),
+  // )
+
+  // const filtersState =
+  //   config.state === 'external'
+  //     ? [columnFiltersExternal, setColumnFiltersExternal]
+  //     : config.state === 'nuqs'
+  //       ? [columnFiltersNuqs, setColumnFiltersNuqs]
+  //       : undefined
+
+  // console.log('[DataTableDemo] re-rendering')
+  const tstColumns = useMemo(() => {
+    console.log('[DataTableDemo] Creating TST columns')
+    return createTSTColumns({
+      columns: tableColumns as ColumnDef<Issue>[],
+      configs: columnsConfig,
+    })
+  }, [])
+
+  const table = useReactTable({
+    data: ISSUES,
+    columns: tstColumns,
+    getRowId: (row) => row.id,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onRowSelectionChange: setRowSelection,
+    state: {
+      rowSelection,
+      columnFilters: tstFilters,
+    },
+  })
+
+  const { filters, columns, actions } = useDataTableFilters(
+    ISSUES,
+    columnsConfig,
+    [columnFiltersExternal, setColumnFiltersExternal],
+  )
+
+  return (
+    <div className="grid grid-cols-3 gap-8">
+      <div className="col-span-2">
+        <DataTable
+          table={table}
+          filters={filters}
+          columns={columns}
+          actions={actions}
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        {/* <div>Query: {searchParams.get('filters')}</div> */}
+        <Select
+          value={config.state}
+          onValueChange={(value: DemoConfig['state']) =>
+            setConfig({ state: value })
+          }
+        >
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Filters state" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="internal">Internal</SelectItem>
+            <SelectItem value="external">React State</SelectItem>
+            <SelectItem value="nuqs">URL Query</SelectItem>
+          </SelectContent>
+        </Select>
+        <CodeBlock lang="json" code={print(filters)} />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/components/data-table-filter-demo/v2/types.ts b/apps/web/components/data-table-filter-demo/v2/types.ts
new file mode 100644
index 00000000..57670f1c
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/v2/types.ts
@@ -0,0 +1,32 @@
+export type Issue = {
+  id: string
+  title: string
+  description?: string
+  status: IssueStatus
+  labels?: IssueLabel[]
+  assignee?: User
+  startDate?: Date
+  endDate?: Date
+  estimatedHours?: number
+}
+
+import type { LucideIcon } from 'lucide-react'
+
+export type User = {
+  id: string
+  name: string
+  picture: string
+}
+
+export type IssueLabel = {
+  id: string
+  name: string
+  color: string
+}
+
+export type IssueStatus = {
+  id: 'backlog' | 'todo' | 'in-progress' | 'done'
+  name: string
+  order: number
+  icon: LucideIcon
+}
diff --git a/apps/web/components/data-table-filter-demo/v2/utils.ts b/apps/web/components/data-table-filter-demo/v2/utils.ts
new file mode 100644
index 00000000..a2db0f5c
--- /dev/null
+++ b/apps/web/components/data-table-filter-demo/v2/utils.ts
@@ -0,0 +1,13 @@
+import { add, differenceInDays } from 'date-fns'
+import { randomInteger } from 'remeda'
+
+export const calculateEndDate = (start: Date) => {
+  const diff = differenceInDays(new Date(), start)
+  const offset = randomInteger(0, diff + 1)
+
+  return add(start, { days: offset })
+}
+
+export function isAnyOf<T>(value: T, array: T[]) {
+  return array.includes(value)
+}
diff --git a/apps/web/components/mdx.tsx b/apps/web/components/mdx.tsx
index 6bd61279..0008d82a 100644
--- a/apps/web/components/mdx.tsx
+++ b/apps/web/components/mdx.tsx
@@ -5,7 +5,7 @@ import type { MDXComponents } from 'mdx/types'
 import Image from 'next/image'
 import { CodeBlockCommand } from './code-block-command'
 import CollapsibleCodeBlock from './collapsible-code-block'
-import DataTableDemo from './data-table-filter/demo'
+import DataTableDemo from './data-table-filter-demo/demo'
 import { ResponsiveImage } from './responsive-image'
 
 export const components: Readonly<MDXComponents> = {
diff --git a/apps/web/components/ui/select.tsx b/apps/web/components/ui/select.tsx
new file mode 100644
index 00000000..b9297710
--- /dev/null
+++ b/apps/web/components/ui/select.tsx
@@ -0,0 +1,185 @@
+'use client'
+
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import type * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default'
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/apps/web/lib/highlighter.ts b/apps/web/lib/highlighter.ts
new file mode 100644
index 00000000..49740e69
--- /dev/null
+++ b/apps/web/lib/highlighter.ts
@@ -0,0 +1,30 @@
+import {
+  transformerNotationDiff,
+  transformerNotationHighlight,
+} from '@shikijs/transformers'
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime'
+import type { JSX } from 'react'
+import { Fragment } from 'react'
+import { jsx, jsxs } from 'react/jsx-runtime'
+import type { BundledLanguage } from 'shiki/bundle/web'
+import { codeToHast } from 'shiki/bundle/web'
+
+export async function highlight(code: string, lang: BundledLanguage) {
+  const out = await codeToHast(code, {
+    lang,
+    themes: {
+      light: 'github-light',
+      dark: 'github-dark',
+    },
+    transformers: [transformerNotationDiff(), transformerNotationHighlight()],
+    colorReplacements: {
+      '#24292e': 'oklch(0.205 0 0)',
+    },
+  })
+
+  return toJsxRuntime(out, {
+    Fragment,
+    jsx,
+    jsxs,
+  }) as JSX.Element
+}
diff --git a/apps/web/lib/utils.ts b/apps/web/lib/utils.ts
index d32b0fe6..a142d56f 100644
--- a/apps/web/lib/utils.ts
+++ b/apps/web/lib/utils.ts
@@ -4,3 +4,7 @@ import { twMerge } from 'tailwind-merge'
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function print(obj: any) {
+  return JSON.stringify(obj, null, '\t')
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 3d588759..77a4c1ef 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -24,6 +24,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slider": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.2",
@@ -38,7 +39,7 @@
     "date-fns": "^4.1.0",
     "jotai": "^2.12.2",
     "lucide-react": "^0.482.0",
-    "nanoid": "^5.1.2",
+    "nanoid": "^5.1.5",
     "next": "15.2.4",
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.4.4",
diff --git a/apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx b/apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx
new file mode 100644
index 00000000..5d195dac
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx
@@ -0,0 +1,1796 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Checkbox } from '@/components/ui/checkbox'
+// import { Checkbox as __Checkbox } from '@/components/ui/checkbox'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  // CommandItem as __CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import { Input } from '@/components/ui/input'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { Separator } from '@/components/ui/separator'
+import { Slider } from '@/components/ui/slider'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { useIsMobile } from '@/hooks/use-mobile'
+import { cn, print } from '@/lib/utils'
+import { format, isEqual } from 'date-fns'
+import { FilterXIcon } from 'lucide-react'
+import { ArrowRight, Filter } from 'lucide-react'
+import { X } from 'lucide-react'
+import { Ellipsis } from 'lucide-react'
+import { Nullable } from 'nuqs'
+import {
+  cloneElement,
+  isValidElement,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import type { DateRange } from 'react-day-picker'
+import { take, uniq } from '../lib/array'
+import { addUniq, removeUniq } from '../lib/array'
+import {
+  DEFAULT_OPERATORS,
+  createColumns,
+  createNumberFilterValue,
+  createNumberRange,
+  dateFilterDetails,
+  determineNewOperator,
+  filterTypeOperatorDetails,
+  getColumn,
+  multiOptionFilterDetails,
+  numberFilterDetails,
+  optionFilterDetails,
+  textFilterDetails,
+} from '../lib/filters'
+import type {
+  Column,
+  ColumnConfig,
+  ColumnDataType,
+  ColumnOption,
+  DataTableFilterActions,
+  DataTableFilterConfig,
+  ElementType,
+  FilterModel,
+  FilterOperators,
+  FilterValues,
+  FiltersState,
+  OptionBasedColumnDataType,
+} from '../lib/filters.types'
+
+// const Checkbox = memo(__Checkbox) as typeof __Checkbox
+// const CommandItem = memo(__CommandItem) as typeof __CommandItem
+// const Checkbox = __Checkbox
+// const CommandItem = __CommandItem
+
+export function useDataTableFilters<TData>(
+  data: TData[],
+  columnsConfig: ColumnConfig<TData>[],
+  controlledState?:
+    | [FiltersState, React.Dispatch<React.SetStateAction<FiltersState>>]
+    | undefined,
+) {
+  const [internalFilters, setInternalFilters] = useState<FiltersState>([])
+  const [filters, setFilters] = controlledState ?? [
+    internalFilters,
+    setInternalFilters,
+  ]
+
+  // console.log('Filters:', print(filters))
+
+  useEffect(() => {
+    console.log('[useDataTableFilters] Filters:', print(filters))
+  }, [filters])
+
+  // This useMemo call ensures that createColumns() only recomputes when data or config.columns change.
+  const columns = useMemo(() => {
+    console.log('[useDataTableFilters] Computing columns')
+    return createColumns(data, columnsConfig)
+  }, [data, columnsConfig])
+
+  const actions: DataTableFilterActions = useMemo(
+    () => ({
+      addFilterValue<TData, TType extends OptionBasedColumnDataType>(
+        column: ColumnConfig<TData, TType>,
+        values: FilterModel<TType>['values'],
+      ) {
+        if (column.type === 'option') {
+          setFilters((prev) => {
+            // Does column already have a filter?
+            const filter = prev.find((f) => f.columnId === column.id) // as FilterModel<'option'> | undefined
+
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              // Add a new filter
+              return [
+                ...prev,
+                {
+                  columnId: column.id,
+                  operator:
+                    values.length > 1
+                      ? DEFAULT_OPERATORS[column.type].multiple
+                      : DEFAULT_OPERATORS[column.type].single,
+                  values,
+                },
+              ]
+            }
+
+            // Column already has a filter - update it
+            const oldValues = filter.values
+            const newValues = addUniq(filter.values, values)
+            const newOperator = determineNewOperator(
+              'option',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+
+          return
+        }
+
+        if (column.type === 'multiOption') {
+          setFilters((prev) => {
+            // Does column already have a filter?
+            const filter = prev.find((f) => f.columnId === column.id) // as FilterModel<'multiOption'> | undefined
+
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              // Add a new filter
+              return [
+                ...prev,
+                {
+                  columnId: column.id,
+                  operator:
+                    values.length > 1
+                      ? DEFAULT_OPERATORS[column.type].multiple
+                      : DEFAULT_OPERATORS[column.type].single,
+                  values,
+                },
+              ]
+            }
+
+            // Column already has a filter - update it
+            const oldValues = filter.values
+            const newValues = addUniq(filter.values, values)
+            const newOperator = determineNewOperator(
+              'multiOption',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+
+            // Remove filter if it's empty now
+            if (newValues.length === 0) {
+              return prev.filter((f) => f.columnId !== column.id)
+            }
+
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+
+          return
+        }
+
+        throw new Error(
+          '[data-table-filter] addFilterValue() is only supported for option columns',
+        )
+      },
+      removeFilterValue<TData, TType extends OptionBasedColumnDataType>(
+        column: ColumnConfig<TData, TType>,
+        value: FilterModel<TType>['values'],
+      ) {
+        if (column.type === 'option') {
+          setFilters((prev) => {
+            // Does column already have a filter?
+            const filter = prev.find((f) => f.columnId === column.id) // as FilterModel<'option'> | undefined
+
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              // Add a new filter
+              return [...prev]
+            }
+
+            // Column already has a filter - update it
+            const newValues = removeUniq(filter.values, value)
+            const oldValues = filter.values
+
+            const newOperator = determineNewOperator(
+              'option',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+
+            // Remove filter if it's empty now
+            if (newValues.length === 0) {
+              return prev.filter((f) => f.columnId !== column.id)
+            }
+
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+
+          return
+        }
+
+        if (column.type === 'multiOption') {
+          setFilters((prev) => {
+            // Does column already have a filter?
+            const filter = prev.find((f) => f.columnId === column.id) // as FilterModel<'multiOption'> | undefined
+
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              // Do nothing if column is not filtered
+              return [...prev]
+            }
+
+            // Column already has a filter - update it
+            const newValues = removeUniq(filter.values, value)
+            const oldValues = filter.values
+
+            const newOperator = determineNewOperator(
+              'multiOption',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+
+            // Remove filter if it's empty now
+            if (newValues.length === 0) {
+              return prev.filter((f) => f.columnId !== column.id)
+            }
+
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+
+          return
+        }
+
+        throw new Error(
+          '[data-table-filter] removeFilterValue() is only supported for option columns',
+        )
+      },
+
+      setFilterValue<TData, TType extends ColumnDataType>(
+        column: ColumnConfig<TData, TType>,
+        values: FilterModel<TType>['values'],
+      ) {
+        console.log('here!')
+        setFilters((prev) => {
+          // Does this column already have a filter?
+          const filter = prev.find((f) => f.columnId === column.id)
+          const isColumnFiltered = filter && filter.values.length > 0
+
+          const newValues =
+            column.type === 'number'
+              ? createNumberFilterValue(values as number[])
+              : uniq(values)
+
+          if (newValues.length === 0) return prev
+
+          if (!isColumnFiltered) {
+            // Add a new filter
+            return [
+              ...prev,
+              {
+                columnId: column.id,
+                operator:
+                  values.length > 1
+                    ? DEFAULT_OPERATORS[column.type].multiple
+                    : DEFAULT_OPERATORS[column.type].single,
+                values: newValues,
+              },
+            ]
+          }
+
+          // Column already has a filter - override it
+          const oldValues = filter.values
+          const newOperator = determineNewOperator(
+            column.type,
+            oldValues,
+            newValues,
+            filter.operator,
+          )
+
+          const newFilter = {
+            columnId: column.id,
+            operator: newOperator,
+            values: newValues as any,
+          } satisfies FilterModel<TType>
+
+          return prev.map((f) => (f.columnId === column.id ? newFilter : f))
+        })
+      },
+      setFilterOperator<TType extends ColumnDataType>(
+        columnId: string,
+        operator: FilterModel<TType>['operator'],
+      ) {
+        setFilters((prev) =>
+          prev.map((f) => (f.columnId === columnId ? { ...f, operator } : f)),
+        )
+      },
+      removeFilter(columnId: string) {
+        setFilters((prev) => prev.filter((f) => f.columnId !== columnId))
+      },
+      removeAllFilters() {
+        setFilters([])
+      },
+    }),
+    [setFilters],
+  )
+
+  return { columns, filters, actions }
+}
+
+interface DataTableFilterProps<TData> {
+  columns: Column<TData>[]
+  filters: FiltersState
+  actions: DataTableFilterActions
+}
+
+export function DataTableFilter<TData>({
+  columns,
+  filters,
+  actions,
+}: DataTableFilterProps<TData>) {
+  // const isMobile = useIsMobile()
+  // if (isMobile) {
+  //   return (
+  //     <div className="flex w-full items-start justify-between gap-2">
+  //       <div className="flex gap-1">
+  //         <FilterSelector
+  //           filters={filters}
+  //           columns={columns}
+  //           actions={actions}
+  //         />
+  //         <FilterActions filters={filters} actions={actions} />
+  //       </div>
+  //       <ActiveFiltersMobileContainer>
+  //         <ActiveFilters
+  //           columns={columns}
+  //           filters={filters}
+  //           actions={actions}
+  //         />
+  //       </ActiveFiltersMobileContainer>
+  //     </div>
+  //   )
+  // }
+
+  return (
+    <div className="flex w-full items-start justify-between gap-2">
+      <div className="flex md:flex-wrap gap-2 w-full flex-1">
+        <FilterSelector columns={columns} filters={filters} actions={actions} />
+        <ActiveFilters columns={columns} filters={filters} actions={actions} />
+      </div>
+      <FilterActions hasFilters={filters.length > 0} actions={actions} />
+    </div>
+  )
+}
+
+interface FilterActionsProps {
+  hasFilters: boolean
+  actions?: DataTableFilterActions
+}
+
+export const FilterActions = memo(__FilterActions)
+function __FilterActions({ hasFilters, actions }: FilterActionsProps) {
+  return (
+    <Button
+      className={cn('h-7 !px-2', !hasFilters && 'hidden')}
+      variant="destructive"
+      onClick={actions?.removeAllFilters}
+    >
+      <FilterXIcon />
+      <span className="hidden md:block">Clear</span>
+    </Button>
+  )
+}
+
+interface FilterSelectorProps<TData> {
+  filters: FiltersState
+  columns: Column<TData>[]
+  actions: DataTableFilterActions
+}
+
+export const FilterSelector = memo(__FilterSelector) as typeof __FilterSelector
+
+function __FilterSelector<TData>({
+  filters,
+  columns,
+  actions,
+}: FilterSelectorProps<TData>) {
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState('')
+  const [property, setProperty] = useState<string | undefined>(undefined)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const column = property ? getColumn(columns, property) : undefined
+  const filter = property
+    ? filters.find((f) => f.columnId === property)
+    : undefined
+
+  const hasFilters = filters.length > 0
+
+  useEffect(() => {
+    if (property && inputRef) {
+      inputRef.current?.focus()
+      setValue('')
+    }
+  }, [property])
+
+  useEffect(() => {
+    if (!open) setTimeout(() => setValue(''), 150)
+  }, [open])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: need filters to be updated
+  const content = useMemo(
+    () =>
+      property && column ? (
+        <FilterValueController
+          filter={filter!}
+          column={column as Column<TData, ColumnDataType>}
+          actions={actions}
+        />
+      ) : (
+        <Command loop>
+          <CommandInput
+            value={value}
+            onValueChange={setValue}
+            ref={inputRef}
+            placeholder="Search..."
+          />
+          <CommandEmpty>No results.</CommandEmpty>
+          <CommandList className="max-h-fit">
+            <CommandGroup>
+              {columns.map((column) => (
+                <FilterableColumn
+                  key={column.id}
+                  column={column}
+                  setProperty={setProperty}
+                />
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      ),
+    [property, column, filter, filters, columns, actions, value],
+  )
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={async (value) => {
+        setOpen(value)
+        if (!value) setTimeout(() => setProperty(undefined), 100)
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn('h-7', hasFilters && 'w-fit !px-2')}
+        >
+          <Filter className="size-4" />
+          {!hasFilters && <span>Filter</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        side="bottom"
+        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
+      >
+        {content}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export function FilterableColumn<TData, TType extends ColumnDataType, TVal>({
+  column,
+  setProperty,
+}: {
+  column: Column<TData, TType, TVal>
+  setProperty: (value: string) => void
+}) {
+  const itemRef = useRef<HTMLDivElement>(null)
+
+  const prefetch = useCallback(() => {
+    column.prefetchOptions()
+    column.prefetchValues()
+    column.prefetchFacetedUniqueValues()
+  }, [column])
+
+  useEffect(() => {
+    const target = itemRef.current
+
+    if (!target) return
+
+    // Set up MutationObserver
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes') {
+          const isSelected = target.getAttribute('data-selected') === 'true'
+          if (isSelected) prefetch()
+        }
+      }
+    })
+
+    // Set up observer
+    observer.observe(target, {
+      attributes: true,
+      attributeFilter: ['data-selected'],
+    })
+
+    // Cleanup on unmount
+    return () => observer.disconnect()
+  }, [prefetch])
+
+  return (
+    <CommandItem
+      ref={itemRef}
+      onSelect={() => setProperty(column.id)}
+      className="group"
+      onMouseEnter={prefetch}
+    >
+      <div className="flex w-full items-center justify-between">
+        <div className="inline-flex items-center gap-1.5">
+          {<column.icon strokeWidth={2.25} className="size-4" />}
+          <span>{column.displayName}</span>
+        </div>
+        <ArrowRight className="size-4 opacity-0 group-aria-selected:opacity-100" />
+      </div>
+    </CommandItem>
+  )
+}
+
+interface ActiveFiltersProps<TData> {
+  columns: Column<TData>[]
+  filters: FiltersState
+  actions: DataTableFilterActions
+}
+
+export function ActiveFilters<TData>({
+  columns,
+  filters,
+  actions,
+}: ActiveFiltersProps<TData>) {
+  return (
+    <>
+      {filters.map((filter) => {
+        const id = filter.columnId
+
+        const column = getColumn(columns, id)
+
+        // Skip if no filter value
+        if (!filter.values) return null
+
+        return (
+          <ActiveFilter
+            key={`active-filter-${filter.columnId}`}
+            filter={filter}
+            column={column}
+            actions={actions}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+interface ActiveFilterProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+}
+
+// Generic render function for a filter with type-safe value
+export function ActiveFilter<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+}: ActiveFilterProps<TData, TType>) {
+  return (
+    <div className="flex h-7 items-center rounded-2xl border border-border bg-background shadow-xs text-xs">
+      <FilterSubject column={column} />
+      <Separator orientation="vertical" />
+      <FilterOperator filter={filter} column={column} actions={actions} />
+      <Separator orientation="vertical" />
+      <FilterValue filter={filter} column={column} actions={actions} />
+      <Separator orientation="vertical" />
+      <Button
+        variant="ghost"
+        className="rounded-none rounded-r-2xl text-xs w-7 h-full"
+        onClick={() => actions.removeFilter(filter.columnId)}
+      >
+        <X className="size-4 -translate-x-0.5" />
+      </Button>
+    </div>
+  )
+}
+
+/****** Property Filter Subject ******/
+
+interface FilterSubjectProps<TData, TType extends ColumnDataType> {
+  column: Column<TData, TType>
+}
+
+export function FilterSubject<TData, TType extends ColumnDataType>({
+  column,
+}: FilterSubjectProps<TData, TType>) {
+  const hasIcon = !!column.icon
+  return (
+    <span className="flex select-none items-center gap-1 whitespace-nowrap px-2 font-medium">
+      {hasIcon && <column.icon className="size-4 stroke-[2.25px]" />}
+      <span>{column.displayName}</span>
+    </span>
+  )
+}
+
+/****** Property Filter Operator ******/
+
+interface FilterOperatorProps<TData, TType extends ColumnDataType> {
+  column: Column<TData, TType>
+  filter: FilterModel<TType>
+  actions: DataTableFilterActions
+}
+
+// Renders the filter operator display and menu for a given column filter
+// The filter operator display is the label and icon for the filter operator
+// The filter operator menu is the dropdown menu for the filter operator
+export function FilterOperator<TData, TType extends ColumnDataType>({
+  column,
+  filter,
+  actions,
+}: FilterOperatorProps<TData, TType>) {
+  const [open, setOpen] = useState<boolean>(false)
+
+  const close = () => setOpen(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          className="m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs"
+        >
+          <FilterOperatorDisplay filter={filter} columnType={column.type} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
+      >
+        <Command loop>
+          <CommandInput placeholder="Search..." />
+          <CommandEmpty>No results.</CommandEmpty>
+          <CommandList className="max-h-fit">
+            <FilterOperatorController
+              filter={filter}
+              column={column}
+              actions={actions}
+              closeController={close}
+            />
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+interface FilterOperatorDisplayProps<TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  columnType: TType
+}
+
+export function FilterOperatorDisplay<TType extends ColumnDataType>({
+  filter,
+  columnType,
+}: FilterOperatorDisplayProps<TType>) {
+  const operator = filterTypeOperatorDetails[columnType][filter.operator]
+
+  return <span>{operator.label}</span>
+}
+
+interface FilterOperatorControllerProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+  closeController: () => void
+}
+
+/*
+ *
+ * TODO: Reduce into a single component. Each data type does not need it's own controller.
+ *
+ */
+export function FilterOperatorController<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, TType>) {
+  switch (column.type) {
+    case 'option':
+      return (
+        <FilterOperatorOptionController
+          filter={filter as FilterModel<'option'>}
+          column={column as Column<TData, 'option'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'multiOption':
+      return (
+        <FilterOperatorMultiOptionController
+          filter={filter as FilterModel<'multiOption'>}
+          column={column as Column<TData, 'multiOption'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'date':
+      return (
+        <FilterOperatorDateController
+          filter={filter as FilterModel<'date'>}
+          column={column as Column<TData, 'date'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'text':
+      return (
+        <FilterOperatorTextController
+          filter={filter as FilterModel<'text'>}
+          column={column as Column<TData, 'text'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'number':
+      return (
+        <FilterOperatorNumberController
+          filter={filter as FilterModel<'number'>}
+          column={column as Column<TData, 'number'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+function FilterOperatorOptionController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'option'>) {
+  const filterDetails = optionFilterDetails[filter.operator]
+
+  // console.log(
+  //   '[FilterOperatorOptionController] filterDetails:',
+  //   print(filterDetails),
+  // )
+
+  const relatedFilters = Object.values(optionFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['option'])
+    closeController()
+  }
+
+  return (
+    <CommandGroup heading="Operators">
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+function FilterOperatorMultiOptionController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'multiOption'>) {
+  const filterDetails = multiOptionFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(multiOptionFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(
+      column.id,
+      value as FilterOperators['multiOption'],
+    )
+    closeController()
+  }
+
+  return (
+    <CommandGroup heading="Operators">
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+function FilterOperatorDateController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'date'>) {
+  const filterDetails = dateFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(dateFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['date'])
+    closeController()
+  }
+
+  return (
+    <CommandGroup>
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+export function FilterOperatorTextController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'text'>) {
+  const filterDetails = textFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(textFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['text'])
+    closeController()
+  }
+
+  return (
+    <CommandGroup heading="Operators">
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+function FilterOperatorNumberController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'number'>) {
+  // Show all related operators
+  const filterDetails = numberFilterDetails[filter.operator]
+
+  // console.log(
+  //   '[FilterOperatorOptionController] filterDetails:',
+  //   print(filterDetails),
+  // )
+
+  const relatedFilters = Object.values(numberFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['number'])
+    closeController()
+  }
+
+  return (
+    <div>
+      <CommandGroup heading="Operators">
+        {relatedFilters.map((r) => (
+          <CommandItem
+            onSelect={() => changeOperator(r.value)}
+            value={r.value}
+            key={r.value}
+          >
+            {r.label} {/**/}
+          </CommandItem>
+        ))}
+      </CommandGroup>
+    </div>
+  )
+}
+
+/****** Property Filter Value ******/
+
+interface FilterValueProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+}
+
+export const FilterValue = memo(__FilterValue) as typeof __FilterValue
+
+function __FilterValue<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+}: FilterValueProps<TData, TType>) {
+  // console.log('[FilterValue] Rendering')
+  useEffect(() => {
+    console.log('[FilterValue] Filters:', print(filter))
+  }, [filter])
+
+  return (
+    <Popover>
+      <PopoverAnchor className="h-full" />
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          className="m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs"
+        >
+          <FilterValueDisplay
+            filter={filter}
+            column={column}
+            actions={actions}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        side="bottom"
+        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
+      >
+        <FilterValueController
+          filter={filter}
+          column={column}
+          actions={actions}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+interface FilterValueDisplayProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+}
+
+export function FilterValueDisplay<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, TType>) {
+  switch (column.type) {
+    case 'option':
+      return (
+        <FilterValueOptionDisplay
+          filter={filter as FilterModel<'option'>}
+          column={column as Column<TData, 'option'>}
+          actions={actions}
+        />
+      )
+    case 'multiOption':
+      return (
+        <FilterValueMultiOptionDisplay
+          filter={filter as FilterModel<'multiOption'>}
+          column={column as Column<TData, 'multiOption'>}
+          actions={actions}
+        />
+      )
+    case 'date':
+      return (
+        <FilterValueDateDisplay
+          filter={filter as FilterModel<'date'>}
+          column={column as Column<TData, 'date'>}
+          actions={actions}
+        />
+      )
+    case 'text':
+      return (
+        <FilterValueTextDisplay
+          filter={filter as FilterModel<'text'>}
+          column={column as Column<TData, 'text'>}
+          actions={actions}
+        />
+      )
+    case 'number':
+      return (
+        <FilterValueNumberDisplay
+          filter={filter as FilterModel<'number'>}
+          column={column as Column<TData, 'number'>}
+          actions={actions}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+export function FilterValueOptionDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'option'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const selected = options.filter((o) => filter?.values.includes(o.value))
+
+  // We display the selected options based on how many are selected
+  //
+  // If there is only one option selected, we display its icon and label
+  //
+  // If there are multiple options selected, we display:
+  // 1) up to 3 icons of the selected options
+  // 2) the number of selected options
+  if (selected.length === 1) {
+    const { label, icon: Icon } = selected[0]
+    const hasIcon = !!Icon
+    return (
+      <span className="inline-flex items-center gap-1">
+        {hasIcon &&
+          (isValidElement(Icon) ? (
+            Icon
+          ) : (
+            <Icon className="size-4 text-primary" />
+          ))}
+        <span>{label}</span>
+      </span>
+    )
+  }
+  const name = column.displayName.toLowerCase()
+  const pluralName = name.endsWith('s') ? `${name}es` : `${name}s`
+
+  const hasOptionIcons = !options?.some((o) => !o.icon)
+
+  return (
+    <div className="inline-flex items-center gap-0.5">
+      {hasOptionIcons &&
+        take(selected, 3).map(({ value, icon }) => {
+          const Icon = icon!
+          return isValidElement(Icon) ? (
+            Icon
+          ) : (
+            <Icon key={value} className="size-4" />
+          )
+        })}
+      <span className={cn(hasOptionIcons && 'ml-1.5')}>
+        {selected.length} {pluralName}
+      </span>
+    </div>
+  )
+}
+
+export function FilterValueMultiOptionDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'multiOption'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const selected = options.filter((o) => filter.values.includes(o.value))
+
+  if (selected.length === 1) {
+    const { label, icon: Icon } = selected[0]
+    const hasIcon = !!Icon
+    return (
+      <span className="inline-flex items-center gap-1.5">
+        {hasIcon &&
+          (isValidElement(Icon) ? (
+            Icon
+          ) : (
+            <Icon className="size-4 text-primary" />
+          ))}
+
+        <span>{label}</span>
+      </span>
+    )
+  }
+
+  const name = column.displayName.toLowerCase()
+
+  const hasOptionIcons = !options?.some((o) => !o.icon)
+
+  return (
+    <div className="inline-flex items-center gap-1.5">
+      {hasOptionIcons && (
+        <div key="icons" className="inline-flex items-center gap-0.5">
+          {take(selected, 3).map(({ value, icon }) => {
+            const Icon = icon!
+            return isValidElement(Icon) ? (
+              cloneElement(Icon, { key: value })
+            ) : (
+              <Icon key={value} className="size-4" />
+            )
+          })}
+        </div>
+      )}
+      <span>
+        {selected.length} {name}
+      </span>
+    </div>
+  )
+}
+
+function formatDateRange(start: Date, end: Date) {
+  const sameMonth = start.getMonth() === end.getMonth()
+  const sameYear = start.getFullYear() === end.getFullYear()
+
+  if (sameMonth && sameYear) {
+    return `${format(start, 'MMM d')} - ${format(end, 'd, yyyy')}`
+  }
+
+  if (sameYear) {
+    return `${format(start, 'MMM d')} - ${format(end, 'MMM d, yyyy')}`
+  }
+
+  return `${format(start, 'MMM d, yyyy')} - ${format(end, 'MMM d, yyyy')}`
+}
+
+export function FilterValueDateDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'date'>) {
+  if (!filter) return null
+  if (filter.values.length === 0) return <Ellipsis className="size-4" />
+  if (filter.values.length === 1) {
+    const value = filter.values[0]
+
+    const formattedDateStr = format(value, 'MMM d, yyyy')
+
+    return <span>{formattedDateStr}</span>
+  }
+
+  const formattedRangeStr = formatDateRange(filter.values[0], filter.values[1])
+
+  return <span>{formattedRangeStr}</span>
+}
+
+export function FilterValueTextDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'text'>) {
+  if (!filter) return null
+  if (filter.values.length === 0 || filter.values[0].trim() === '')
+    return <Ellipsis className="size-4" />
+
+  const value = filter.values[0]
+
+  return <span>{value}</span>
+}
+
+export function FilterValueNumberDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'number'>) {
+  const maxFromMeta = column.max
+  const cappedMax = maxFromMeta ?? 2147483647
+
+  if (!filter) return null
+
+  if (
+    filter.operator === 'is between' ||
+    filter.operator === 'is not between'
+  ) {
+    const minValue = filter.values[0]
+    const maxValue =
+      filter.values[1] === Number.POSITIVE_INFINITY ||
+      filter.values[1] >= cappedMax
+        ? `${cappedMax}+`
+        : filter.values[1]
+
+    return (
+      <span className="tabular-nums tracking-tight">
+        {minValue} and {maxValue}
+      </span>
+    )
+  }
+
+  if (!filter.values || filter.values.length === 0) {
+    return null
+  }
+
+  const value = filter.values[0]
+  return <span className="tabular-nums tracking-tight">{value}</span>
+}
+
+/****** Property Filter Value Controller ******/
+
+interface FilterValueControllerProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+}
+
+export const FilterValueController = memo(
+  __FilterValueController,
+) as typeof __FilterValueController
+
+function __FilterValueController<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, TType>) {
+  switch (column.type) {
+    case 'option':
+      return (
+        <FilterValueOptionController
+          filter={filter as FilterModel<'option'>}
+          column={column as Column<TData, 'option'>}
+          actions={actions}
+        />
+      )
+    case 'multiOption':
+      return (
+        <FilterValueMultiOptionController
+          filter={filter as FilterModel<'multiOption'>}
+          column={column as Column<TData, 'multiOption'>}
+          actions={actions}
+        />
+      )
+    case 'date':
+      return (
+        <FilterValueDateController
+          filter={filter as FilterModel<'date'>}
+          column={column as Column<TData, 'date'>}
+          actions={actions}
+        />
+      )
+    case 'text':
+      return (
+        <FilterValueTextController
+          filter={filter as FilterModel<'text'>}
+          column={column as Column<TData, 'text'>}
+          actions={actions}
+        />
+      )
+    case 'number':
+      return (
+        <FilterValueNumberController
+          filter={filter as FilterModel<'number'>}
+          column={column as Column<TData, 'number'>}
+          actions={actions}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+export function FilterValueOptionController<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, 'option'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])
+
+  function handleOptionSelect(value: string, check: boolean) {
+    if (check) actions.addFilterValue(column, [value])
+    else actions.removeFilterValue(column, [value])
+  }
+
+  return (
+    <Command loop>
+      <CommandInput autoFocus placeholder="Search..." />
+      <CommandEmpty>No results.</CommandEmpty>
+      <CommandList className="max-h-fit">
+        <CommandGroup>
+          {options.map((v) => {
+            const checked = Boolean(filter?.values.includes(v.value))
+            const count = optionsCount.get(v.value) ?? 0
+
+            return (
+              <CommandItem
+                key={v.value}
+                onSelect={() => {
+                  handleOptionSelect(v.value, !checked)
+                }}
+                className="group flex items-center justify-between gap-1.5"
+              >
+                <div className="flex items-center gap-1.5">
+                  <Checkbox
+                    checked={checked}
+                    className="opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100"
+                  />
+                  {v.icon &&
+                    (isValidElement(v.icon) ? (
+                      v.icon
+                    ) : (
+                      <v.icon className="size-4 text-primary" />
+                    ))}
+                  <span>
+                    {v.label}
+                    <sup
+                      className={cn(
+                        'ml-0.5 tabular-nums tracking-tight text-muted-foreground',
+                        count === 0 && 'slashed-zero',
+                      )}
+                    >
+                      {count < 100 ? count : '100+'}
+                    </sup>
+                  </span>
+                </div>
+              </CommandItem>
+            )
+          })}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueMultiOptionController<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, 'multiOption'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])
+
+  // Handles the selection/deselection of an option
+  function handleOptionSelect(value: string, check: boolean) {
+    if (check) actions.addFilterValue(column, [value])
+    else actions.removeFilterValue(column, [value])
+  }
+
+  return (
+    <Command loop>
+      <CommandInput autoFocus placeholder="Search..." />
+      <CommandEmpty>No results.</CommandEmpty>
+      <CommandList>
+        <CommandGroup>
+          {options.map((v) => {
+            const checked = Boolean(filter?.values?.includes(v.value))
+            const count = optionsCount.get(v.value) ?? 0
+
+            return (
+              <CommandItem
+                key={v.value}
+                onSelect={() => {
+                  handleOptionSelect(v.value, !checked)
+                }}
+                className="group flex items-center justify-between gap-1.5"
+              >
+                <div className="flex items-center gap-1.5">
+                  <Checkbox
+                    checked={checked}
+                    className="opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100"
+                  />
+                  {v.icon &&
+                    (isValidElement(v.icon) ? (
+                      v.icon
+                    ) : (
+                      <v.icon className="size-4 text-primary" />
+                    ))}
+                  <span>
+                    {v.label}
+                    <sup
+                      className={cn(
+                        'ml-0.5 tabular-nums tracking-tight text-muted-foreground',
+                        count === 0 && 'slashed-zero',
+                      )}
+                    >
+                      {count < 100 ? count : '100+'}
+                    </sup>
+                  </span>
+                </div>
+              </CommandItem>
+            )
+          })}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueDateController<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, 'date'>) {
+  const [date, setDate] = useState<DateRange | undefined>({
+    from: filter?.values[0] ?? new Date(),
+    to: filter?.values[1] ?? undefined,
+  })
+
+  function changeDateRange(value: DateRange | undefined) {
+    const start = value?.from
+    const end =
+      start && value && value.to && !isEqual(start, value.to)
+        ? value.to
+        : undefined
+
+    setDate({ from: start, to: end })
+
+    const isRange = start && end
+    const newValues = isRange ? [start, end] : start ? [start] : []
+
+    actions.setFilterValue(column, newValues)
+  }
+
+  return (
+    <Command>
+      <CommandList className="max-h-fit">
+        <CommandGroup>
+          <div>
+            <Calendar
+              initialFocus
+              mode="range"
+              defaultMonth={date?.from}
+              selected={date}
+              onSelect={changeDateRange}
+              numberOfMonths={1}
+            />
+          </div>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueTextController<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, 'text'>) {
+  const changeText = (value: string | number) => {
+    actions.setFilterValue(column, [String(value)])
+  }
+
+  return (
+    <Command>
+      <CommandList className="max-h-fit">
+        <CommandGroup>
+          <CommandItem>
+            <DebouncedInput
+              placeholder="Search..."
+              autoFocus
+              value={filter?.values[0] ?? ''}
+              onChange={changeText}
+            />
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueNumberController<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, 'number'>) {
+  const [datasetMin, datasetMax] = useMemo(
+    () => column.getFacetedMinMaxValues(),
+    [column],
+  )
+  const [sliderMin, sliderMax] = [
+    column.min ?? datasetMin,
+    column.max ?? datasetMax,
+  ]
+
+  // Local state for values
+  const [values, setValues] = useState(filter?.values ?? [0, 0])
+
+  // Sync with parent filter changes
+  useEffect(() => {
+    // console.log('a')
+    if (
+      filter?.values &&
+      filter.values.length === values.length &&
+      filter.values.every((v, i) => v === values[i])
+    ) {
+      setValues(filter.values)
+    }
+  }, [filter?.values, values])
+
+  const isNumberRange =
+    filter && numberFilterDetails[filter.operator].target === 'multiple'
+
+  const changeNumber = (value: number[]) => {
+    setValues(value)
+    // console.log('a')
+    actions.setFilterValue(column, value)
+  }
+
+  const changeMinNumber = (value: number) => {
+    const newValues = [value, values[1]]
+    setValues(newValues)
+    console.log('[FilterValueNumberController] changeMinNumber')
+    actions.setFilterValue(column, newValues)
+  }
+
+  const changeMaxNumber = (value: number) => {
+    const newValues = [values[0], value]
+    setValues(newValues)
+    console.log('[FilterValueNumberController] changeMaxNumber')
+    actions.setFilterValue(column, newValues)
+  }
+
+  const changeType = useCallback(
+    (type: 'single' | 'range') => {
+      console.log('changeType to:', type)
+      const newValues =
+        type === 'single'
+          ? [values[0]] // Keep the first value for single mode
+          : [values[0], values[1] ?? datasetMax] // Use two values for range mode
+      const newOperator = type === 'single' ? 'is' : 'is between'
+
+      // Update local state
+      setValues(newValues)
+
+      // Update global filter state atomically
+      actions.setFilterOperator(column.id, newOperator)
+      actions.setFilterValue(column, newValues)
+    },
+    [values, datasetMax, column, actions],
+  )
+
+  return (
+    <Command>
+      <CommandList className="w-[300px] px-2 py-2">
+        <CommandGroup>
+          <div className="flex flex-col w-full">
+            <Tabs
+              value={isNumberRange ? 'range' : 'single'}
+              onValueChange={(v) => changeType(v as 'single' | 'range')}
+            >
+              <TabsList className="w-full *:text-xs">
+                <TabsTrigger value="single">Single</TabsTrigger>
+                <TabsTrigger value="range">Range</TabsTrigger>
+              </TabsList>
+              <TabsContent value="single" className="flex flex-col gap-4 mt-4">
+                <Slider
+                  value={[values[0]]}
+                  onValueChange={(value) => changeNumber(value)}
+                  min={sliderMin}
+                  max={sliderMax}
+                  step={1}
+                  aria-orientation="horizontal"
+                />
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-medium">Value</span>
+                  <Input
+                    id="single"
+                    type="number"
+                    value={values[0].toString()} // Use values[0] directly
+                    onChange={(e) => changeNumber([Number(e.target.value)])}
+                    min={datasetMin}
+                    max={datasetMax}
+                  />
+                </div>
+              </TabsContent>
+              <TabsContent value="range" className="flex flex-col gap-4 mt-4">
+                <Slider
+                  value={values} // Use values directly
+                  onValueChange={changeNumber}
+                  min={sliderMin}
+                  max={sliderMax}
+                  step={1}
+                  aria-orientation="horizontal"
+                />
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium">Min</span>
+                    <DebouncedInput
+                      type="number"
+                      value={values[0]}
+                      onChange={(v) => changeMinNumber(Number(v))}
+                      min={datasetMin}
+                      max={datasetMax}
+                    />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium">Max</span>
+                    <DebouncedInput
+                      type="number"
+                      value={values[1]}
+                      onChange={(v) => changeMaxNumber(Number(v))}
+                      min={datasetMin}
+                      max={datasetMax}
+                    />
+                  </div>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function ActiveFiltersMobileContainer({
+  children,
+}: { children: React.ReactNode }) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const [showLeftBlur, setShowLeftBlur] = useState(false)
+  const [showRightBlur, setShowRightBlur] = useState(true)
+
+  // Check if there's content to scroll and update blur states
+  const checkScroll = () => {
+    if (scrollContainerRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } =
+        scrollContainerRef.current
+
+      // Show left blur if scrolled to the right
+      setShowLeftBlur(scrollLeft > 0)
+
+      // Show right blur if there's more content to scroll to the right
+      // Add a small buffer (1px) to account for rounding errors
+      setShowRightBlur(scrollLeft + clientWidth < scrollWidth - 1)
+    }
+  }
+
+  // Log blur states for debugging
+  // useEffect(() => {
+  //   console.log('left:', showLeftBlur, '  right:', showRightBlur)
+  // }, [showLeftBlur, showRightBlur])
+
+  // Set up ResizeObserver to monitor container size
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      const resizeObserver = new ResizeObserver(() => {
+        checkScroll()
+      })
+      resizeObserver.observe(scrollContainerRef.current)
+      return () => {
+        resizeObserver.disconnect()
+      }
+    }
+  }, [])
+
+  // Update blur states when children change
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    checkScroll()
+  }, [children])
+
+  return (
+    <div className="relative w-full overflow-x-hidden">
+      {/* Left blur effect */}
+      {showLeftBlur && (
+        <div className="absolute left-0 top-0 bottom-0 w-16 z-10 pointer-events-none bg-gradient-to-r from-background to-transparent animate-in fade-in-0" />
+      )}
+
+      {/* Scrollable container */}
+      <div
+        ref={scrollContainerRef}
+        className="flex gap-2 overflow-x-scroll no-scrollbar"
+        onScroll={checkScroll}
+      >
+        {children}
+      </div>
+
+      {/* Right blur effect */}
+      {showRightBlur && (
+        <div className="absolute right-0 top-0 bottom-0 w-16 z-10 pointer-events-none bg-gradient-to-l from-background to-transparent animate-in fade-in-0 " />
+      )}
+    </div>
+  )
+}
+
+function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => func(...args), wait)
+  }
+}
+
+export function DebouncedInput({
+  value: initialValue,
+  onChange,
+  debounceMs = 500, // This is the wait time, not the function
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounceMs?: number
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {
+  const [value, setValue] = useState(initialValue)
+
+  // Sync with initialValue when it changes
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  // Define the debounced function with useCallback
+  const debouncedOnChange = useCallback(
+    debounce((newValue: string | number) => {
+      onChange(newValue)
+    }, debounceMs), // Pass the wait time here
+    [debounceMs, onChange], // Dependencies
+  )
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value
+    setValue(newValue) // Update local state immediately
+    debouncedOnChange(newValue) // Call debounced version
+  }
+
+  return <Input {...props} value={value} onChange={handleChange} />
+}
+
+// Local debounce function
diff --git a/apps/web/registry/data-table-filter-v2/lib/array.ts b/apps/web/registry/data-table-filter-v2/lib/array.ts
new file mode 100644
index 00000000..bd562eb6
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/lib/array.ts
@@ -0,0 +1,27 @@
+export function intersection<T>(a: T[], b: T[]): T[] {
+  return a.filter((x) => b.includes(x))
+}
+
+export function uniq<T>(a: T[]): T[] {
+  return Array.from(new Set(a))
+}
+
+export function take<T>(a: T[], n: number): T[] {
+  return a.slice(0, n)
+}
+
+export function flatten<T>(a: T[][]): T[] {
+  return a.flat()
+}
+
+export function addUniq<T>(arr: T[], values: T[]): T[] {
+  return uniq([...arr, ...values])
+}
+
+export function removeUniq<T>(arr: T[], values: T[]): T[] {
+  return arr.filter((v) => !values.includes(v))
+}
+
+export function isAnyOf<T>(value: T, values: T[]): boolean {
+  return values.includes(value)
+}
diff --git a/apps/web/registry/data-table-filter-v2/lib/filter-fns.ts b/apps/web/registry/data-table-filter-v2/lib/filter-fns.ts
new file mode 100644
index 00000000..a50925a5
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/lib/filter-fns.ts
@@ -0,0 +1,296 @@
+/**********************************************************************************************************
+ ***** Filter Functions ******
+ **********************************************************************************************************
+ * These are functions that filter data based on the current filter values, column data type, and operator.
+ * There exists a separate filter function for each column data type.
+ *
+ * Two variants of the filter functions are provided - as an example, we will take the optionFilterFn:
+ * 1. optionFilterFn: takes in a row, columnId, and filterValue.
+ * 2. __optionFilterFn: takes in an inputData and filterValue.
+ *
+ * __optionFilterFn is a private function that is used by filterFn to perform the actual filtering.
+ * *********************************************************************************************************/
+
+import type { Row } from '@tanstack/react-table'
+import {
+  endOfDay,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isWithinInterval,
+  startOfDay,
+} from 'date-fns'
+import { intersection } from './array'
+import {
+  dateFilterDetails,
+  isColumnOption,
+  isColumnOptionArray,
+  isStringArray,
+} from './filters'
+import type { ColumnDataType, FilterModel } from './filters.types'
+
+/*
+ * Returns a filter function for a given column data type.
+ * This function is used to determine the appropriate filter function to use based on the column data type.
+ */
+export function filterFn(dataType: ColumnDataType) {
+  switch (dataType) {
+    // case 'option':
+    //   return optionFilterFn
+    // case 'multiOption':
+    //   return multiOptionFilterFn
+    case 'date':
+      return dateFilterFn
+    case 'text':
+      return textFilterFn
+    case 'number':
+      return numberFilterFn
+    default:
+      throw new Error('Invalid column data type')
+  }
+}
+
+// export function optionFilterFn<TData>(
+//   row: Row<TData>,
+//   columnId: string,
+//   filterValue: FilterModel<'option'>,
+// ) {
+//   const value = row.getValue(columnId)
+
+//   if (!value) return false
+
+//   if (typeof value === 'string') {
+//     return __optionFilterFn(value, filterValue)
+//   }
+
+//   if (isColumnOption(value)) {
+//     return __optionFilterFn(value.value, filterValue)
+//   }
+
+//   const sanitizedValue = columnMeta.transformOptionFn!(value as never)
+//   return __optionFilterFn(sanitizedValue.value, filterValue)
+// }
+
+export function __optionFilterFn<TData>(
+  inputData: string,
+  filterValue: FilterModel<'option'>,
+) {
+  if (!inputData) return false
+  if (filterValue.values.length === 0) return true
+
+  const value = inputData.toString().toLowerCase()
+
+  const found = !!filterValue.values.find((v) => v.toLowerCase() === value)
+
+  switch (filterValue.operator) {
+    case 'is':
+    case 'is any of':
+      return found
+    case 'is not':
+    case 'is none of':
+      return !found
+  }
+}
+
+// export function multiOptionFilterFn<TData>(
+//   row: Row<TData>,
+//   columnId: string,
+//   filterValue: FilterModel<'multiOption'>,
+// ) {
+//   const value = row.getValue(columnId)
+
+//   if (!value) return false
+
+//   if (isStringArray(value)) {
+//     return __multiOptionFilterFn(value, filterValue)
+//   }
+
+//   if (isColumnOptionArray(value)) {
+//     return __multiOptionFilterFn(
+//       value.map((v) => v.value),
+//       filterValue,
+//     )
+//   }
+
+//   const sanitizedValue = (value as never[]).map((v) =>
+//     columnMeta.transformOptionFn!(v),
+//   )
+
+//   return __multiOptionFilterFn(
+//     sanitizedValue.map((v) => v.value),
+//     filterValue,
+//   )
+// }
+
+export function __multiOptionFilterFn(
+  inputData: string[],
+  filterValue: FilterModel<'multiOption'>,
+) {
+  if (!inputData) return false
+
+  if (
+    filterValue.values.length === 0 ||
+    !filterValue.values[0] ||
+    filterValue.values[0].length === 0
+  )
+    return true
+
+  const values = inputData
+  const filterValues = filterValue.values
+
+  switch (filterValue.operator) {
+    case 'include':
+    case 'include any of':
+      return intersection(values, filterValues).length > 0
+    case 'exclude':
+      return intersection(values, filterValues).length === 0
+    case 'exclude if any of':
+      return !(intersection(values, filterValues).length > 0)
+    case 'include all of':
+      return intersection(values, filterValues).length === filterValues.length
+    case 'exclude if all':
+      return !(
+        intersection(values, filterValues).length === filterValues.length
+      )
+  }
+}
+
+export function dateFilterFn<TData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: FilterModel<'date'>,
+) {
+  const value = row.getValue<Date>(columnId)
+
+  return __dateFilterFn(value, filterValue)
+}
+
+export function __dateFilterFn<TData>(
+  inputData: Date,
+  filterValue: FilterModel<'date'>,
+) {
+  if (!filterValue || filterValue.values.length === 0) return true
+
+  if (
+    dateFilterDetails[filterValue.operator].target === 'single' &&
+    filterValue.values.length > 1
+  )
+    throw new Error('Singular operators require at most one filter value')
+
+  if (
+    filterValue.operator in ['is between', 'is not between'] &&
+    filterValue.values.length !== 2
+  )
+    throw new Error('Plural operators require two filter values')
+
+  const filterVals = filterValue.values
+  const d1 = filterVals[0]
+  const d2 = filterVals[1]
+
+  const value = inputData
+
+  switch (filterValue.operator) {
+    case 'is':
+      return isSameDay(value, d1)
+    case 'is not':
+      return !isSameDay(value, d1)
+    case 'is before':
+      return isBefore(value, startOfDay(d1))
+    case 'is on or after':
+      return isSameDay(value, d1) || isAfter(value, startOfDay(d1))
+    case 'is after':
+      return isAfter(value, startOfDay(d1))
+    case 'is on or before':
+      return isSameDay(value, d1) || isBefore(value, startOfDay(d1))
+    case 'is between':
+      return isWithinInterval(value, {
+        start: startOfDay(d1),
+        end: endOfDay(d2),
+      })
+    case 'is not between':
+      return !isWithinInterval(value, {
+        start: startOfDay(filterValue.values[0]),
+        end: endOfDay(filterValue.values[1]),
+      })
+  }
+}
+
+export function textFilterFn<TData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: FilterModel<'text'>,
+) {
+  const value = row.getValue<string>(columnId) ?? ''
+
+  return __textFilterFn(value, filterValue)
+}
+
+export function __textFilterFn<TData>(
+  inputData: string,
+  filterValue: FilterModel<'text'>,
+) {
+  if (!filterValue || filterValue.values.length === 0) return true
+
+  const value = inputData.toLowerCase().trim()
+  const filterStr = filterValue.values[0].toLowerCase().trim()
+
+  if (filterStr === '') return true
+
+  const found = value.includes(filterStr)
+
+  switch (filterValue.operator) {
+    case 'contains':
+      return found
+    case 'does not contain':
+      return !found
+  }
+}
+
+export function numberFilterFn<TData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: FilterModel<'number'>,
+) {
+  const value = row.getValue<number>(columnId)
+
+  return __numberFilterFn(value, filterValue)
+}
+
+export function __numberFilterFn<TData>(
+  inputData: number,
+  filterValue: FilterModel<'number'>,
+) {
+  if (!filterValue || !filterValue.values || filterValue.values.length === 0) {
+    return true
+  }
+
+  const value = inputData
+  const filterVal = filterValue.values[0]
+
+  switch (filterValue.operator) {
+    case 'is':
+      return value === filterVal
+    case 'is not':
+      return value !== filterVal
+    case 'is greater than':
+      return value > filterVal
+    case 'is greater than or equal to':
+      return value >= filterVal
+    case 'is less than':
+      return value < filterVal
+    case 'is less than or equal to':
+      return value <= filterVal
+    case 'is between': {
+      const lowerBound = filterValue.values[0]
+      const upperBound = filterValue.values[1]
+      return value >= lowerBound && value <= upperBound
+    }
+    case 'is not between': {
+      const lowerBound = filterValue.values[0]
+      const upperBound = filterValue.values[1]
+      return value < lowerBound || value > upperBound
+    }
+    default:
+      return true
+  }
+}
diff --git a/apps/web/registry/data-table-filter-v2/lib/filters-tst.ts b/apps/web/registry/data-table-filter-v2/lib/filters-tst.ts
new file mode 100644
index 00000000..ceee94d6
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/lib/filters-tst.ts
@@ -0,0 +1,93 @@
+import type { ColumnDef, ColumnFiltersState } from '@tanstack/react-table'
+import { isAnyOf } from './array'
+import { __multiOptionFilterFn, __optionFilterFn, filterFn } from './filter-fns'
+import { isColumnOption, isColumnOptionArray, isStringArray } from './filters'
+import type { ColumnConfig, FilterModel, FiltersState } from './filters.types'
+
+interface CreateTSTColumns<TData> {
+  columns: ColumnDef<TData>[]
+  configs: ColumnConfig<TData>[]
+}
+
+export function createTSTColumns<TData>({
+  columns,
+  configs,
+}: CreateTSTColumns<TData>) {
+  const _cols: ColumnDef<TData>[] = []
+
+  for (const col of columns) {
+    // Get the column filter config for this column
+    const config = configs.find((c) => c.id === col.id)
+
+    // If the column is not filterable or doesn't have a filter config, skip it
+    if (!col.enableColumnFilter || !config) {
+      _cols.push(col)
+      continue
+    }
+
+    if (isAnyOf(config.type, ['text', 'number', 'date'])) {
+      col.filterFn = filterFn(config.type)
+      _cols.push(col)
+      continue
+    }
+
+    if (config.type === 'option') {
+      col.filterFn = (row, columnId, filterValue: FilterModel<'option'>) => {
+        const value = row.getValue(columnId)
+
+        if (!value) return false
+
+        if (typeof value === 'string') {
+          return __optionFilterFn(value, filterValue)
+        }
+
+        if (isColumnOption(value)) {
+          return __optionFilterFn(value.value, filterValue)
+        }
+
+        const sanitizedValue = config.transformOptionFn!(value as never)
+        return __optionFilterFn(sanitizedValue.value, filterValue)
+      }
+    }
+
+    if (config.type === 'multiOption') {
+      col.filterFn = (
+        row,
+        columnId,
+        filterValue: FilterModel<'multiOption'>,
+      ) => {
+        const value = row.getValue(columnId)
+
+        if (!value) return false
+
+        if (isStringArray(value)) {
+          return __multiOptionFilterFn(value, filterValue)
+        }
+
+        if (isColumnOptionArray(value)) {
+          return __multiOptionFilterFn(
+            value.map((v) => v.value),
+            filterValue,
+          )
+        }
+
+        const sanitizedValue = (value as never[]).map((v) =>
+          config.transformOptionFn!(v),
+        )
+
+        return __multiOptionFilterFn(
+          sanitizedValue.map((v) => v.value),
+          filterValue,
+        )
+      }
+    }
+
+    _cols.push(col)
+  }
+
+  return _cols
+}
+
+export function createTSTFilters(filters: FiltersState): ColumnFiltersState {
+  return filters.map((filter) => ({ id: filter.columnId, value: filter }))
+}
diff --git a/apps/web/registry/data-table-filter-v2/lib/filters.test.ts b/apps/web/registry/data-table-filter-v2/lib/filters.test.ts
new file mode 100644
index 00000000..e148ce91
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/lib/filters.test.ts
@@ -0,0 +1,44 @@
+import {
+  type DataTableFilterConfig,
+  createColumnConfigHelper,
+} from '@/registry/data-table-filter-v2/lib/filters'
+import { CircleDotDashedIcon } from 'lucide-react'
+
+type Issue = {
+  id: string
+  title: string
+  description?: string
+  status: 'todo' | 'in progress' | 'done'
+  startDate?: Date
+  endDate?: Date
+  estimatedHours?: number
+  foo: {
+    bar: string
+  }
+}
+
+const helper = createColumnConfigHelper<Issue>()
+
+const columns = [
+  helper.accessor((row) => row.description, {
+    id: 'description',
+    displayName: 'Description',
+    icon: CircleDotDashedIcon,
+    type: 'text',
+  }),
+  helper.accessor((row) => row.status, {
+    id: 'status',
+    displayName: 'Status',
+    icon: CircleDotDashedIcon,
+    type: 'option',
+    options: [
+      { label: 'Todo', value: 'todo' },
+      { label: 'In Progress', value: 'in progress' },
+      { label: 'Done', value: 'done' },
+    ],
+  }),
+]
+
+const config = {
+  columns,
+} satisfies DataTableFilterConfig<Issue>
diff --git a/apps/web/registry/data-table-filter-v2/lib/filters.ts b/apps/web/registry/data-table-filter-v2/lib/filters.ts
new file mode 100644
index 00000000..ef3281d7
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/lib/filters.ts
@@ -0,0 +1,735 @@
+import { isAnyOf, uniq } from './array'
+import type {
+  Column,
+  ColumnConfig,
+  ColumnConfigHelper,
+  ColumnDataNativeMap,
+  ColumnDataType,
+  ColumnOption,
+  ElementType,
+  FilterDetails,
+  FilterOperatorTarget,
+  FilterOperators,
+  FilterTypeOperatorDetails,
+  FilterValues,
+  Nullable,
+} from './filters.types'
+import { memo } from './memo'
+
+export function createColumnConfigHelper<TData>(): ColumnConfigHelper<TData> {
+  return {
+    accessor: (accessor, config) =>
+      ({
+        ...config,
+        accessor,
+      }) as any,
+  }
+}
+
+export function getColumnOptions<TData, TType extends ColumnDataType, TVal>(
+  column: ColumnConfig<TData, TType, TVal>,
+  data: TData[],
+): ColumnOption[] {
+  if (!isAnyOf(column.type, ['option', 'multiOption'])) {
+    console.warn(
+      'Column options can only be retrieved for option and multiOption columns',
+    )
+    return []
+  }
+
+  if (column.options) {
+    return column.options
+  }
+
+  const filtered = data
+    .flatMap(column.accessor)
+    .filter((v): v is NonNullable<TVal> => v !== undefined && v !== null)
+
+  // console.log(`[getColumnOptions] [${column.id}] filtered:`, filtered)
+
+  let models = uniq(filtered)
+
+  if (column.orderFn) {
+    models = models.sort((m1, m2) =>
+      column.orderFn!(
+        m1 as ElementType<NonNullable<TVal>>,
+        m2 as ElementType<NonNullable<TVal>>,
+      ),
+    )
+  }
+
+  // console.log(`[getColumnOptions] [${column.id}] models:`, models)
+
+  if (column.transformOptionFn) {
+    // Memoize transformOptionFn calls
+    const memoizedTransform = memo(
+      () => [models],
+      (deps) =>
+        deps[0].map((m) =>
+          column.transformOptionFn!(m as ElementType<NonNullable<TVal>>),
+        ),
+      { key: `transform-${column.id}` },
+    )
+    return memoizedTransform()
+  }
+
+  if (isColumnOptionArray(models)) return models
+
+  throw new Error(
+    `[data-table-filter] [${column.id}] Either provide static options, a transformOptionFn, or ensure the column data conforms to ColumnOption type`,
+  )
+}
+
+export function getColumnValues<TData, TType extends ColumnDataType, TVal>(
+  column: ColumnConfig<TData, TType, TVal>,
+  data: TData[],
+) {
+  // Memoize accessor calls
+  const memoizedAccessor = memo(
+    () => [data],
+    (deps) =>
+      deps[0]
+        .flatMap(column.accessor)
+        .filter(
+          (v): v is NonNullable<TVal> => v !== undefined && v !== null,
+        ) as ElementType<NonNullable<TVal>>[],
+    { key: `accessor-${column.id}` },
+  )
+
+  const raw = memoizedAccessor()
+
+  if (!isAnyOf(column.type, ['option', 'multiOption'])) {
+    return raw
+  }
+
+  if (column.options) {
+    return raw
+      .map((v) => column.options?.find((o) => o.value === v)?.value)
+      .filter((v) => v !== undefined && v !== null)
+  }
+
+  if (column.transformOptionFn) {
+    const memoizedTransform = memo(
+      () => [raw],
+      (deps) =>
+        deps[0].map(
+          (v) => column.transformOptionFn!(v) as ElementType<NonNullable<TVal>>,
+        ),
+      { key: `transform-values-${column.id}` },
+    )
+    return memoizedTransform()
+  }
+
+  if (isColumnOptionArray(raw)) {
+    return raw
+  }
+
+  throw new Error(
+    `[data-table-filter] [${column.id}] Either provide static options, a transformOptionFn, or ensure the column data conforms to ColumnOption type`,
+  )
+}
+
+export function getFacetedUniqueValues<
+  TData,
+  TType extends ColumnDataType,
+  TVal,
+>(
+  column: ColumnConfig<TData, TType, TVal>,
+  values: string[] | ColumnOption[],
+): Map<string, number> {
+  // console.time('getFacetedUniqueValues')
+  if (!isAnyOf(column.type, ['option', 'multiOption'])) {
+    // console.timeEnd('getFacetedUniqueValues')
+    // console.warn(
+    //   'Faceted unique values can only be retrieved for option and multiOption columns',
+    // )
+    return new Map<string, number>()
+  }
+
+  const acc = new Map<string, number>()
+
+  if (isColumnOptionArray(values)) {
+    for (const option of values) {
+      const curr = acc.get(option.value) ?? 0
+      acc.set(option.value, curr + 1)
+    }
+  } else {
+    for (const option of values) {
+      const curr = acc.get(option as string) ?? 0
+      acc.set(option as string, curr + 1)
+    }
+  }
+
+  // console.timeEnd('getFacetedUniqueValues')
+
+  return acc
+}
+
+export function getFacetedMinMaxValues<
+  TData,
+  TType extends ColumnDataType,
+  TVal,
+>(column: ColumnConfig<TData, TType, TVal>, data: TData[]): number[] {
+  if (column.type !== 'number') return [0, 0] // Only applicable to number columns
+
+  const values = data
+    .flatMap((row) => column.accessor(row) as Nullable<number>)
+    .filter((v): v is number => typeof v === 'number' && !Number.isNaN(v))
+
+  if (values.length === 0) {
+    return [column.min ?? 0, column.max ?? 100] // Fallback to config or reasonable defaults
+  }
+
+  const min = Math.min(...values)
+  const max = Math.max(...values)
+
+  // Apply config overrides if provided
+  return [
+    column.min !== undefined ? Math.max(min, column.min) : min,
+    column.max !== undefined ? Math.min(max, column.max) : max,
+  ]
+}
+
+export function createColumns<TData>(
+  data: TData[],
+  columnConfigs: ColumnConfig<TData>[],
+): Column<TData>[] {
+  return columnConfigs.map((columnConfig) => {
+    const getOptions: () => ColumnOption[] = memo(
+      () => [data],
+      () => getColumnOptions(columnConfig, data),
+      { key: `options-${columnConfig.id}` },
+    )
+
+    const getValues: () => ElementType<NonNullable<any>>[] = memo(
+      () => [data],
+      () => getColumnValues(columnConfig, data),
+      { key: `values-${columnConfig.id}` },
+    )
+
+    const getUniqueValues: () => Map<string, number> = memo(
+      () => [getValues()],
+      (deps) => getFacetedUniqueValues(columnConfig, deps[0]),
+      { key: `faceted-${columnConfig.id}` },
+    )
+
+    const getMinMaxValues: () => number[] = memo(
+      () => [data],
+      () => getFacetedMinMaxValues(columnConfig, data),
+      { key: `minmax-${columnConfig.id}` },
+    )
+
+    // Create the Column instance
+    const column: Column<TData> = {
+      ...columnConfig,
+      getOptions,
+      getValues,
+      getFacetedUniqueValues: getUniqueValues,
+      getFacetedMinMaxValues: getMinMaxValues,
+      // Prefetch methods will be added below
+      prefetchOptions: async () => {}, // Placeholder, defined below
+      prefetchValues: async () => {},
+      prefetchFacetedUniqueValues: async () => {},
+      _prefetchedOptionsCache: null, // Initialize private cache
+      _prefetchedValuesCache: null,
+      _prefetchedFacetedCache: null,
+    }
+
+    // Define prefetch methods with access to the column instance
+    column.prefetchOptions = async (): Promise<void> => {
+      if (!column._prefetchedOptionsCache) {
+        await new Promise((resolve) =>
+          setTimeout(() => {
+            const options = getOptions()
+            column._prefetchedOptionsCache = options
+            // console.log(`Prefetched options for ${columnConfig.id}`)
+            resolve(undefined)
+          }, 0),
+        )
+      }
+    }
+
+    column.prefetchValues = async (): Promise<void> => {
+      if (!column._prefetchedValuesCache) {
+        await new Promise((resolve) =>
+          setTimeout(() => {
+            const values = getValues()
+            column._prefetchedValuesCache = values
+            // console.log(`Prefetched values for ${columnConfig.id}`)
+            resolve(undefined)
+          }, 0),
+        )
+      }
+    }
+
+    column.prefetchFacetedUniqueValues = async (): Promise<void> => {
+      if (!column._prefetchedFacetedCache) {
+        await new Promise((resolve) =>
+          setTimeout(() => {
+            const facetedMap = getUniqueValues()
+            column._prefetchedFacetedCache = facetedMap
+            // console.log(
+            //   `Prefetched faceted unique values for ${columnConfig.id}`,
+            // )
+            resolve(undefined)
+          }, 0),
+        )
+      }
+    }
+
+    return column
+  })
+}
+
+export function getColumn<TData>(columns: Column<TData>[], id: string) {
+  const column = columns.find((c) => c.id === id)
+
+  if (!column) {
+    throw new Error(`Column with id ${id} not found`)
+  }
+
+  return column
+}
+
+export const DEFAULT_OPERATORS: Record<
+  ColumnDataType,
+  Record<FilterOperatorTarget, FilterOperators[ColumnDataType]>
+> = {
+  text: {
+    single: 'contains',
+    multiple: 'contains',
+  },
+  number: {
+    single: 'is',
+    multiple: 'is between',
+  },
+  date: {
+    single: 'is',
+    multiple: 'is between',
+  },
+  option: {
+    single: 'is',
+    multiple: 'is any of',
+  },
+  multiOption: {
+    single: 'include',
+    multiple: 'include any of',
+  },
+}
+
+/* Details for all the filter operators for option data type */
+export const optionFilterDetails = {
+  is: {
+    label: 'is',
+    value: 'is',
+    target: 'single',
+    singularOf: 'is any of',
+    relativeOf: 'is not',
+    isNegated: false,
+    negation: 'is not',
+  },
+  'is not': {
+    label: 'is not',
+    value: 'is not',
+    target: 'single',
+    singularOf: 'is none of',
+    relativeOf: 'is',
+    isNegated: true,
+    negationOf: 'is',
+  },
+  'is any of': {
+    label: 'is any of',
+    value: 'is any of',
+    target: 'multiple',
+    pluralOf: 'is',
+    relativeOf: 'is none of',
+    isNegated: false,
+    negation: 'is none of',
+  },
+  'is none of': {
+    label: 'is none of',
+    value: 'is none of',
+    target: 'multiple',
+    pluralOf: 'is not',
+    relativeOf: 'is any of',
+    isNegated: true,
+    negationOf: 'is any of',
+  },
+} as const satisfies FilterDetails<'option'>
+
+/* Details for all the filter operators for multi-option data type */
+export const multiOptionFilterDetails = {
+  include: {
+    label: 'include',
+    value: 'include',
+    target: 'single',
+    singularOf: 'include any of',
+    relativeOf: 'exclude',
+    isNegated: false,
+    negation: 'exclude',
+  },
+  exclude: {
+    label: 'exclude',
+    value: 'exclude',
+    target: 'single',
+    singularOf: 'exclude if any of',
+    relativeOf: 'include',
+    isNegated: true,
+    negationOf: 'include',
+  },
+  'include any of': {
+    label: 'include any of',
+    value: 'include any of',
+    target: 'multiple',
+    pluralOf: 'include',
+    relativeOf: ['exclude if all', 'include all of', 'exclude if any of'],
+    isNegated: false,
+    negation: 'exclude if all',
+  },
+  'exclude if all': {
+    label: 'exclude if all',
+    value: 'exclude if all',
+    target: 'multiple',
+    pluralOf: 'exclude',
+    relativeOf: ['include any of', 'include all of', 'exclude if any of'],
+    isNegated: true,
+    negationOf: 'include any of',
+  },
+  'include all of': {
+    label: 'include all of',
+    value: 'include all of',
+    target: 'multiple',
+    pluralOf: 'include',
+    relativeOf: ['include any of', 'exclude if all', 'exclude if any of'],
+    isNegated: false,
+    negation: 'exclude if any of',
+  },
+  'exclude if any of': {
+    label: 'exclude if any of',
+    value: 'exclude if any of',
+    target: 'multiple',
+    pluralOf: 'exclude',
+    relativeOf: ['include any of', 'exclude if all', 'include all of'],
+    isNegated: true,
+    negationOf: 'include all of',
+  },
+} as const satisfies FilterDetails<'multiOption'>
+
+/* Details for all the filter operators for date data type */
+export const dateFilterDetails = {
+  is: {
+    label: 'is',
+    value: 'is',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: 'is after',
+    isNegated: false,
+    negation: 'is before',
+  },
+  'is not': {
+    label: 'is not',
+    value: 'is not',
+    target: 'single',
+    singularOf: 'is not between',
+    relativeOf: [
+      'is',
+      'is before',
+      'is on or after',
+      'is after',
+      'is on or before',
+    ],
+    isNegated: true,
+    negationOf: 'is',
+  },
+  'is before': {
+    label: 'is before',
+    value: 'is before',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is on or after',
+      'is after',
+      'is on or before',
+    ],
+    isNegated: false,
+    negation: 'is on or after',
+  },
+  'is on or after': {
+    label: 'is on or after',
+    value: 'is on or after',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: ['is', 'is not', 'is before', 'is after', 'is on or before'],
+    isNegated: false,
+    negation: 'is before',
+  },
+  'is after': {
+    label: 'is after',
+    value: 'is after',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is before',
+      'is on or after',
+      'is on or before',
+    ],
+    isNegated: false,
+    negation: 'is on or before',
+  },
+  'is on or before': {
+    label: 'is on or before',
+    value: 'is on or before',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: ['is', 'is not', 'is after', 'is on or after', 'is before'],
+    isNegated: false,
+    negation: 'is after',
+  },
+  'is between': {
+    label: 'is between',
+    value: 'is between',
+    target: 'multiple',
+    pluralOf: 'is',
+    relativeOf: 'is not between',
+    isNegated: false,
+    negation: 'is not between',
+  },
+  'is not between': {
+    label: 'is not between',
+    value: 'is not between',
+    target: 'multiple',
+    pluralOf: 'is not',
+    relativeOf: 'is between',
+    isNegated: true,
+    negationOf: 'is between',
+  },
+} as const satisfies FilterDetails<'date'>
+
+/* Details for all the filter operators for text data type */
+export const textFilterDetails = {
+  contains: {
+    label: 'contains',
+    value: 'contains',
+    target: 'single',
+    relativeOf: 'does not contain',
+    isNegated: false,
+    negation: 'does not contain',
+  },
+  'does not contain': {
+    label: 'does not contain',
+    value: 'does not contain',
+    target: 'single',
+    relativeOf: 'contains',
+    isNegated: true,
+    negationOf: 'contains',
+  },
+} as const satisfies FilterDetails<'text'>
+
+/* Details for all the filter operators for number data type */
+export const numberFilterDetails = {
+  is: {
+    label: 'is',
+    value: 'is',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is not',
+      'is greater than',
+      'is less than or equal to',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is not',
+  },
+  'is not': {
+    label: 'is not',
+    value: 'is not',
+    target: 'single',
+    singularOf: 'is not between',
+    relativeOf: [
+      'is',
+      'is greater than',
+      'is less than or equal to',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: true,
+    negationOf: 'is',
+  },
+  'is greater than': {
+    label: '>',
+    value: 'is greater than',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is less than or equal to',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is less than or equal to',
+  },
+  'is greater than or equal to': {
+    label: '>=',
+    value: 'is greater than or equal to',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is greater than',
+      'is less than or equal to',
+      'is less than',
+    ],
+    isNegated: false,
+    negation: 'is less than or equal to',
+  },
+  'is less than': {
+    label: '<',
+    value: 'is less than',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is greater than',
+      'is less than or equal to',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is greater than',
+  },
+  'is less than or equal to': {
+    label: '<=',
+    value: 'is less than or equal to',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is greater than',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is greater than or equal to',
+  },
+  'is between': {
+    label: 'is between',
+    value: 'is between',
+    target: 'multiple',
+    pluralOf: 'is',
+    relativeOf: 'is not between',
+    isNegated: false,
+    negation: 'is not between',
+  },
+  'is not between': {
+    label: 'is not between',
+    value: 'is not between',
+    target: 'multiple',
+    pluralOf: 'is not',
+    relativeOf: 'is between',
+    isNegated: true,
+    negationOf: 'is between',
+  },
+} as const satisfies FilterDetails<'number'>
+
+export const filterTypeOperatorDetails: FilterTypeOperatorDetails = {
+  text: textFilterDetails,
+  number: numberFilterDetails,
+  date: dateFilterDetails,
+  option: optionFilterDetails,
+  multiOption: multiOptionFilterDetails,
+}
+
+/*
+ *
+ * Determines the new operator for a filter based on the current operator, old and new filter values.
+ *
+ * This handles cases where the filter values have transitioned from a single value to multiple values (or vice versa),
+ * and the current operator needs to be transitioned to its plural form (or singular form).
+ *
+ * For example, if the current operator is 'is', and the new filter values have a length of 2, the
+ * new operator would be 'is any of'.
+ *
+ */
+export function determineNewOperator<TType extends ColumnDataType>(
+  type: TType,
+  oldVals: FilterValues<TType>,
+  nextVals: FilterValues<TType>,
+  currentOperator: FilterOperators[TType],
+): FilterOperators[TType] {
+  const a =
+    Array.isArray(oldVals) && Array.isArray(oldVals[0])
+      ? oldVals[0].length
+      : oldVals.length
+  const b =
+    Array.isArray(nextVals) && Array.isArray(nextVals[0])
+      ? nextVals[0].length
+      : nextVals.length
+
+  // console.log('[determineNewOperator] a:', a, 'b:', b)
+
+  // If filter size has not transitioned from single to multiple (or vice versa)
+  // or is unchanged, return the current operator.
+  if (a === b || (a >= 2 && b >= 2) || (a <= 1 && b <= 1))
+    return currentOperator
+
+  const opDetails = filterTypeOperatorDetails[type][currentOperator]
+
+  // Handle transition from single to multiple filter values.
+  if (a < b && b >= 2) return opDetails.singularOf ?? currentOperator
+  // Handle transition from multiple to single filter values.
+  if (a > b && b <= 1) return opDetails.pluralOf ?? currentOperator
+  return currentOperator
+}
+
+export function createNumberFilterValue(
+  values: number[] | undefined,
+): number[] {
+  if (!values || values.length === 0) return []
+  if (values.length === 1) return [values[0]]
+  if (values.length === 2) return createNumberRange(values)
+  return [values[0], values[1]]
+}
+
+export function createNumberRange(values: number[] | undefined) {
+  let a = 0
+  let b = 0
+
+  if (!values || values.length === 0) return [a, b]
+  if (values.length === 1) {
+    a = values[0]
+  } else {
+    a = values[0]
+    b = values[1]
+  }
+
+  const [min, max] = a < b ? [a, b] : [b, a]
+
+  return [min, max]
+}
+
+export function isColumnOption(value: unknown): value is ColumnOption {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'value' in value &&
+    'label' in value
+  )
+}
+
+export function isColumnOptionArray(value: unknown): value is ColumnOption[] {
+  return Array.isArray(value) && value.every(isColumnOption)
+}
+
+export function isStringArray(value: unknown): value is string[] {
+  return Array.isArray(value) && value.every((v) => typeof v === 'string')
+}
diff --git a/apps/web/registry/data-table-filter-v2/lib/filters.types.ts b/apps/web/registry/data-table-filter-v2/lib/filters.types.ts
new file mode 100644
index 00000000..193aa401
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/lib/filters.types.ts
@@ -0,0 +1,308 @@
+import type { LucideIcon } from 'lucide-react'
+
+/*
+ * # GENERAL NOTES:
+ *
+ * ## GENERICS:
+ *
+ * TData is the shape of a single row in your data table.
+ * TVal is the shape of the underlying value for a column.
+ * TType is the type (kind) of the column.
+ *
+ */
+
+export type ElementType<T> = T extends (infer U)[] ? U : T
+
+export type Nullable<T> = T | null | undefined
+
+/*
+ * The model of a column option.
+ * Used for representing underlying column values of type `option` or `multiOption`.
+ */
+export interface ColumnOption {
+  /* The label to display for the option. */
+  label: string
+  /* The internal value of the option. */
+  value: string
+  /* An optional icon to display next to the label. */
+  icon?: React.ReactElement | React.ElementType
+}
+
+/*
+ * Represents the data type (kind) of a column.
+ */
+export type ColumnDataType =
+  /* The column value is a string that should be searchable. */
+  | 'text'
+  | 'number'
+  | 'date'
+  /* The column value can be a single value from a list of options. */
+  | 'option'
+  /* The column value can be zero or more values from a list of options. */
+  | 'multiOption'
+
+/*
+ * Represents the data type (kind) of option and multi-option columns.
+ */
+export type OptionBasedColumnDataType = Extract<
+  ColumnDataType,
+  'option' | 'multiOption'
+>
+
+/*
+ * Maps a ColumnDataType to it's primitive type (i.e. string, number, etc.).
+ */
+export type ColumnDataNativeMap = {
+  text: string
+  number: number
+  date: Date
+  option: string
+  multiOption: string[]
+}
+
+/*
+ * Represents the value of a column filter.
+ * Contigent on the filtered column's data type.
+ */
+export type FilterValues<T extends ColumnDataType> = Array<
+  ElementType<ColumnDataNativeMap[T]>
+>
+
+/*
+ * An accessor function for a column's data.
+ * Uses the original row data as an argument.
+ */
+export type TAccessorFn<TData, TVal = unknown> = (data: TData) => TVal
+
+/*
+ * Used by `option` and `multiOption` columns.
+ * Transforms the underlying column value into a valid ColumnOption.
+ */
+export type TTransformOptionFn<TVal = unknown> = (
+  value: ElementType<NonNullable<TVal>>,
+) => ColumnOption
+
+/*
+ * Used by `option` and `multiOption` columns.
+ * A custom ordering function when sorting a column's options.
+ */
+export type TOrderFn<TVal = unknown> = (
+  a: ElementType<NonNullable<TVal>>,
+  b: ElementType<NonNullable<TVal>>,
+) => number
+
+/*
+ * The configuration for a column.
+ */
+export type ColumnConfig<
+  TData,
+  TType extends ColumnDataType = any,
+  TVal = unknown,
+> = {
+  id: string
+  accessor: TAccessorFn<TData, TVal>
+  displayName: string
+  icon: LucideIcon
+  type: TType
+  options?: TType extends OptionBasedColumnDataType ? ColumnOption[] : never
+  min?: TType extends 'number' ? number : never
+  max?: TType extends 'number' ? number : never
+  transformOptionFn?: TType extends OptionBasedColumnDataType
+    ? TTransformOptionFn<TVal>
+    : never
+  orderFn?: TType extends OptionBasedColumnDataType ? TOrderFn<TVal> : never
+}
+
+/*
+ * Describes a helper function for creating column configurations.
+ */
+export type ColumnConfigHelper<TData> = {
+  accessor: <
+    TAccessor extends TAccessorFn<TData>,
+    TType extends ColumnDataType,
+    TVal extends ReturnType<TAccessor>,
+  >(
+    accessor: TAccessor,
+    config?: Omit<ColumnConfig<TData, TType, TVal>, 'accessor'>,
+  ) => ColumnConfig<TData, TType, unknown>
+}
+
+export type DataTableFilterConfig<TData> = {
+  data: TData[]
+  columns: ColumnConfig<TData>[]
+}
+
+export type ColumnProperties<TData, TVal> = {
+  getOptions: () => ColumnOption[]
+  getValues: () => ElementType<NonNullable<TVal>>[]
+  getFacetedUniqueValues: () => Map<string, number>
+  getFacetedMinMaxValues: () => number[]
+  prefetchOptions: () => Promise<void> // Prefetch options
+  prefetchValues: () => Promise<void> // Prefetch values
+  prefetchFacetedUniqueValues: () => Promise<void> // Prefetch faceted unique values
+}
+
+export type ColumnPrivateProperties<TData, TVal> = {
+  _prefetchedOptionsCache: ColumnOption[] | null
+  _prefetchedValuesCache: ElementType<NonNullable<TVal>>[] | null
+  _prefetchedFacetedCache: Map<string, number> | null
+}
+
+export type Column<
+  TData,
+  TType extends ColumnDataType = any,
+  TVal = unknown,
+> = ColumnConfig<TData, TType, TVal> &
+  ColumnProperties<TData, TVal> &
+  ColumnPrivateProperties<TData, TVal>
+
+/*
+ * Describes the available actions on column filters.
+ * Includes both column-specific and global actions, ultimately acting on the column filters.
+ */
+export interface DataTableFilterActions {
+  addFilterValue: <TData, TType extends OptionBasedColumnDataType>(
+    column: Column<TData, TType>,
+    values: FilterModel<TType>['values'],
+  ) => void
+
+  removeFilterValue: <TData, TType extends OptionBasedColumnDataType>(
+    column: Column<TData, TType>,
+    value: FilterModel<TType>['values'],
+  ) => void
+
+  setFilterValue: <TData, TType extends ColumnDataType>(
+    column: Column<TData, TType>,
+    values: FilterModel<TType>['values'],
+  ) => void
+
+  setFilterOperator: <TType extends ColumnDataType>(
+    columnId: string,
+    operator: FilterModel<TType>['operator'],
+  ) => void
+
+  removeFilter: (columnId: string) => void
+
+  removeAllFilters: () => void
+}
+
+/* Operators for text data */
+export type TextFilterOperator = 'contains' | 'does not contain'
+
+/* Operators for number data */
+export type NumberFilterOperator =
+  | 'is'
+  | 'is not'
+  | 'is less than'
+  | 'is greater than or equal to'
+  | 'is greater than'
+  | 'is less than or equal to'
+  | 'is between'
+  | 'is not between'
+
+/* Operators for date data */
+export type DateFilterOperator =
+  | 'is'
+  | 'is not'
+  | 'is before'
+  | 'is on or after'
+  | 'is after'
+  | 'is on or before'
+  | 'is between'
+  | 'is not between'
+
+/* Operators for option data */
+export type OptionFilterOperator = 'is' | 'is not' | 'is any of' | 'is none of'
+
+/* Operators for multi-option data */
+export type MultiOptionFilterOperator =
+  | 'include'
+  | 'exclude'
+  | 'include any of'
+  | 'include all of'
+  | 'exclude if any of'
+  | 'exclude if all'
+
+/* Maps filter operators to their respective data types */
+export type FilterOperators = {
+  text: TextFilterOperator
+  number: NumberFilterOperator
+  date: DateFilterOperator
+  option: OptionFilterOperator
+  multiOption: MultiOptionFilterOperator
+}
+
+/*
+ *
+ * FilterValue is a type that represents a filter value for a specific column.
+ *
+ * It consists of:
+ * - Operator: The operator to be used for the filter.
+ * - Values: An array of values to be used for the filter.
+ *
+ */
+export type FilterModel<TType extends ColumnDataType = any> = {
+  columnId: string
+  operator: FilterOperators[TType]
+  values: FilterValues<TType>
+}
+
+export type FiltersState = Array<FilterModel>
+
+/*
+ * FilterDetails is a type that represents the details of all the filter operators for a specific column data type.
+ */
+export type FilterDetails<T extends ColumnDataType> = {
+  [key in FilterOperators[T]]: FilterOperatorDetails<key, T>
+}
+
+export type FilterOperatorTarget = 'single' | 'multiple'
+
+export type FilterOperatorDetailsBase<
+  OperatorValue,
+  T extends ColumnDataType,
+> = {
+  /* The operator value. Usually the string representation of the operator. */
+  value: OperatorValue
+  /* The label for the operator, to show in the UI. */
+  label: string
+  /* How much data the operator applies to. */
+  target: FilterOperatorTarget
+  /* The plural form of the operator, if applicable. */
+  singularOf?: FilterOperators[T]
+  /* The singular form of the operator, if applicable. */
+  pluralOf?: FilterOperators[T]
+  /* All related operators. Normally, all the operators which share the same target. */
+  relativeOf: FilterOperators[T] | Array<FilterOperators[T]>
+  /* Whether the operator is negated. */
+  isNegated: boolean
+  /* If the operator is not negated, this provides the negated equivalent. */
+  negation?: FilterOperators[T]
+  /* If the operator is negated, this provides the positive equivalent. */
+  negationOf?: FilterOperators[T]
+}
+
+/*
+ *
+ * FilterOperatorDetails is a type that provides details about a filter operator for a specific column data type.
+ * It extends FilterOperatorDetailsBase with additional logic and contraints on the defined properties.
+ *
+ */
+export type FilterOperatorDetails<
+  OperatorValue,
+  T extends ColumnDataType,
+> = FilterOperatorDetailsBase<OperatorValue, T> &
+  (
+    | { singularOf?: never; pluralOf?: never }
+    | { target: 'single'; singularOf: FilterOperators[T]; pluralOf?: never }
+    | { target: 'multiple'; singularOf?: never; pluralOf: FilterOperators[T] }
+  ) &
+  (
+    | { isNegated: false; negation: FilterOperators[T]; negationOf?: never }
+    | { isNegated: true; negation?: never; negationOf: FilterOperators[T] }
+  )
+
+/* Maps column data types to their respective filter operator details */
+export type FilterTypeOperatorDetails = {
+  [key in ColumnDataType]: FilterDetails<key>
+}
diff --git a/apps/web/registry/data-table-filter-v2/lib/memo.ts b/apps/web/registry/data-table-filter-v2/lib/memo.ts
new file mode 100644
index 00000000..528c371f
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/lib/memo.ts
@@ -0,0 +1,35 @@
+export function memo<TDeps extends readonly any[], TResult>(
+  getDeps: () => TDeps,
+  compute: (deps: TDeps) => TResult,
+  options: { key: string },
+): () => TResult {
+  let prevDeps: TDeps | undefined
+  let cachedResult: TResult | undefined
+
+  return () => {
+    // console.log(`[memo] Calling memoized function: ${options.key}`)
+
+    const deps = getDeps()
+
+    // If no previous deps or deps have changed, recompute
+    if (!prevDeps || !shallowEqual(prevDeps, deps)) {
+      // console.log(`[memo] Cache MISS - ${options.key}`)
+      cachedResult = compute(deps)
+      prevDeps = deps
+    } else {
+      // console.log(`[memo] Cache HIT - ${options.key}`)
+    }
+
+    return cachedResult!
+  }
+}
+
+function shallowEqual<T>(arr1: readonly T[], arr2: readonly T[]): boolean {
+  if (arr1 === arr2) return true
+  if (arr1.length !== arr2.length) return false
+
+  for (let i = 0; i < arr1.length; i++) {
+    if (arr1[i] !== arr2[i]) return false
+  }
+  return true
+}
diff --git a/bun.lock b/bun.lock
index fe10f71f..f17985d6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -22,6 +22,7 @@
         "@radix-ui/react-dropdown-menu": "^2.1.6",
         "@radix-ui/react-label": "^2.1.2",
         "@radix-ui/react-popover": "^1.1.6",
+        "@radix-ui/react-select": "^2.1.6",
         "@radix-ui/react-separator": "^1.1.2",
         "@radix-ui/react-slider": "^1.2.3",
         "@radix-ui/react-slot": "^1.1.2",
@@ -36,7 +37,7 @@
         "date-fns": "^4.1.0",
         "jotai": "^2.12.2",
         "lucide-react": "^0.482.0",
-        "nanoid": "^5.1.2",
+        "nanoid": "^5.1.5",
         "next": "15.2.4",
         "next-mdx-remote": "^5.0.0",
         "next-themes": "^0.4.4",
@@ -464,6 +465,8 @@
 
     "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.2", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw=="],
 
+    "@radix-ui/react-select": ["@radix-ui/react-select@2.1.6", "", { "dependencies": { "@radix-ui/number": "1.1.0", "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-dismissable-layer": "1.1.5", "@radix-ui/react-focus-guards": "1.1.1", "@radix-ui/react-focus-scope": "1.1.2", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-popper": "1.2.2", "@radix-ui/react-portal": "1.1.4", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-slot": "1.1.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-visually-hidden": "1.1.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg=="],
+
     "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.2", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-oZfHcaAp2Y6KFBX6I5P1u7CQoy4lheCGiYj+pGFrHy8E/VNRb5E39TkTr3JrV520csPBTZjkuKFdEsjS5EUNKQ=="],
 
     "@radix-ui/react-slider": ["@radix-ui/react-slider@1.2.3", "", { "dependencies": { "@radix-ui/number": "1.1.0", "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-use-size": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-nNrLAWLjGESnhqBqcCNW4w2nn7LxudyMzeB6VgdyAnFLC6kfQgnAjSL2v6UkQTnDctJBlxrmxfplWS4iYjdUTw=="],
@@ -1777,6 +1780,7 @@
     "@repo/web/lucide-react": ["lucide-react@0.482.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-XM8PzHzSrg8ATmmO+fzf+JyYlVVdQnJjuyLDj2p4V2zEtcKeBNAqAoJIGFv1x2HSBa7kT8gpYUxwdQ0g7nypfw=="],
 
     "@testing-library/dom/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+    "@repo/web/nanoid": ["nanoid@5.1.5", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw=="],
 
     "@ts-morph/common/minimatch": ["minimatch@7.4.6", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw=="],
 

From 0662f386f7a6e56ab7645e059b88b0f99daf93f0 Mon Sep 17 00:00:00 2001
From: Kian Bazza <kian@bazza.dev>
Date: Sat, 12 Apr 2025 18:59:25 -0400
Subject: [PATCH 2/8] feat(data-table-filter): server-side filtering (#53)

Adds support for server-side filtering.
---
 apps/web/app/demo/page.tsx                    |  17 -
 .../demos/server/tst-query/_}/columns.tsx     | 116 +-----
 .../demos/server/tst-query/_}/data-table.tsx  |  34 +-
 .../demos/server/tst-query/_}/data.ts         |  11 +-
 .../web/app/demos/server/tst-query/_/fetch.ts | 131 ++++++
 .../app/demos/server/tst-query/_/filters.tsx  |  59 +++
 .../demos/server/tst-query/_/issues-table.tsx | 165 ++++++++
 .../app/demos/server/tst-query/_/queries.ts   |  55 +++
 .../tst-query/_/query-client-provider.tsx     |  17 +
 .../server/tst-query/_/table-skeleton.tsx     |  78 ++++
 .../demos/server/tst-query/_}/types.ts        |   4 +-
 .../demos/server/tst-query/_}/utils.ts        |   4 +
 .../web/app/demos/server/tst-query/layout.tsx |  10 +
 apps/web/app/demos/server/tst-query/page.tsx  |  46 +++
 .../data-table-filter-demo/v2/demo.tsx        | 149 -------
 apps/web/components/nav-bar.tsx               |  39 ++
 apps/web/package.json                         |   3 +-
 .../__tests__/arrays.test.ts                  | 113 +++++
 .../__tests__/data-table-filters.test.tsx     | 262 ++++++++++++
 .../components/data-table-filter.tsx          | 244 ++++++-----
 .../data-table-filter-v2/lib/array.ts         | 121 +++++-
 .../data-table-filter-v2/lib/filters-tst.ts   |  11 +-
 .../data-table-filter-v2/lib/filters.test.ts  |  44 --
 .../data-table-filter-v2/lib/filters.ts       | 301 +++++++++++---
 .../data-table-filter-v2/lib/filters.types.ts |  25 +-
 apps/web/tsconfig.json                        |   1 +
 apps/web/vitest-config.mts                    |  10 -
 apps/web/vitest.config.mts                    |  19 +
 bun.lock                                      | 388 +++++++++---------
 package.json                                  |   1 +
 turbo.json                                    |   4 +
 31 files changed, 1746 insertions(+), 736 deletions(-)
 delete mode 100644 apps/web/app/demo/page.tsx
 rename apps/web/{components/data-table-filter-demo/v2 => app/demos/server/tst-query/_}/columns.tsx (61%)
 rename apps/web/{components/data-table-filter-demo/v2 => app/demos/server/tst-query/_}/data-table.tsx (79%)
 rename apps/web/{components/data-table-filter-demo/v2 => app/demos/server/tst-query/_}/data.ts (97%)
 create mode 100644 apps/web/app/demos/server/tst-query/_/fetch.ts
 create mode 100644 apps/web/app/demos/server/tst-query/_/filters.tsx
 create mode 100644 apps/web/app/demos/server/tst-query/_/issues-table.tsx
 create mode 100644 apps/web/app/demos/server/tst-query/_/queries.ts
 create mode 100644 apps/web/app/demos/server/tst-query/_/query-client-provider.tsx
 create mode 100644 apps/web/app/demos/server/tst-query/_/table-skeleton.tsx
 rename apps/web/{components/data-table-filter-demo/v2 => app/demos/server/tst-query/_}/types.ts (100%)
 rename apps/web/{components/data-table-filter-demo/v2 => app/demos/server/tst-query/_}/utils.ts (77%)
 create mode 100644 apps/web/app/demos/server/tst-query/layout.tsx
 create mode 100644 apps/web/app/demos/server/tst-query/page.tsx
 delete mode 100644 apps/web/components/data-table-filter-demo/v2/demo.tsx
 create mode 100644 apps/web/components/nav-bar.tsx
 create mode 100644 apps/web/registry/data-table-filter-v2/__tests__/arrays.test.ts
 create mode 100644 apps/web/registry/data-table-filter-v2/__tests__/data-table-filters.test.tsx
 delete mode 100644 apps/web/registry/data-table-filter-v2/lib/filters.test.ts
 delete mode 100644 apps/web/vitest-config.mts
 create mode 100644 apps/web/vitest.config.mts

diff --git a/apps/web/app/demo/page.tsx b/apps/web/app/demo/page.tsx
deleted file mode 100644
index 95dfd2d3..00000000
--- a/apps/web/app/demo/page.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client'
-
-import dynamic from 'next/dynamic'
-
-const DataTableDemo = dynamic(
-  () => import('@/components/data-table-filter-demo/v2/demo'),
-  { ssr: false },
-)
-// import DataTableDemo from '@/components/data-table-filter/v2/demo'
-
-export default function DemoPage() {
-  return (
-    <div className="p-16">
-      <DataTableDemo />
-    </div>
-  )
-}
diff --git a/apps/web/components/data-table-filter-demo/v2/columns.tsx b/apps/web/app/demos/server/tst-query/_/columns.tsx
similarity index 61%
rename from apps/web/components/data-table-filter-demo/v2/columns.tsx
rename to apps/web/app/demos/server/tst-query/_/columns.tsx
index 4eed46d1..5292bb08 100644
--- a/apps/web/components/data-table-filter-demo/v2/columns.tsx
+++ b/apps/web/app/demos/server/tst-query/_/columns.tsx
@@ -1,24 +1,12 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Checkbox } from '@/components/ui/checkbox'
 import { cn } from '@/lib/utils'
-import { createColumnConfigHelper } from '@/registry/data-table-filter-v2/lib/filters'
-import { filterFn } from '@/registry/data-table-filter/lib/filters'
 import { createColumnHelper } from '@tanstack/react-table'
 import { format } from 'date-fns'
-import {
-  CalendarArrowDownIcon,
-  CalendarArrowUpIcon,
-  CircleDashedIcon,
-  CircleDotDashedIcon,
-  ClockIcon,
-  Heading1Icon,
-  TagsIcon,
-  UserCheckIcon,
-} from 'lucide-react'
-import { ISSUE_STATUSES } from './data'
+import { CircleDashedIcon } from 'lucide-react'
 import type { Issue } from './types'
 
-const LABEL_STYLES_MAP = {
+export const LABEL_STYLES_MAP = {
   red: 'bg-red-500 border-red-500',
   orange: 'bg-orange-500 border-orange-500',
   amber: 'bg-amber-500 border-amber-500',
@@ -39,11 +27,11 @@ const LABEL_STYLES_MAP = {
   neutral: 'bg-neutral-500 border-neutral-500',
 } as const
 
-type TW_COLOR = keyof typeof LABEL_STYLES_MAP
+export type TW_COLOR = keyof typeof LABEL_STYLES_MAP
 
 const columnHelper = createColumnHelper<Issue>()
 
-export const columns = [
+export const tstColumnDefs = [
   columnHelper.display({
     id: 'select',
     header: ({ table }) => (
@@ -67,12 +55,12 @@ export const columns = [
     enableHiding: false,
     enableColumnFilter: false,
   }),
-  columnHelper.accessor((row) => row.status, {
+  columnHelper.accessor((row) => row.status.id, {
     id: 'status',
     header: 'Status',
     enableColumnFilter: true,
     cell: ({ row }) => {
-      const status = row.getValue<Issue['status']>('status')
+      const { status } = row.original
       const StatusIcon = status.icon
 
       return (
@@ -89,12 +77,12 @@ export const columns = [
     enableColumnFilter: true,
     cell: ({ row }) => <div>{row.getValue('title')}</div>,
   }),
-  columnHelper.accessor('assignee', {
+  columnHelper.accessor((row) => row.assignee?.id, {
     id: 'assignee',
     header: 'Assignee',
     enableColumnFilter: true,
     cell: ({ row }) => {
-      const user = row.getValue<Issue['assignee']>('assignee')
+      const user = row.original.assignee
 
       if (!user) {
         return <CircleDashedIcon className="size-5 text-border" />
@@ -114,11 +102,6 @@ export const columns = [
       )
     },
   }),
-  columnHelper.accessor((row) => row.assignee?.name, {
-    id: 'assigneeName',
-    header: 'Assignee (Name)',
-    enableColumnFilter: true,
-  }),
   columnHelper.accessor((row) => row.estimatedHours, {
     id: 'estimatedHours',
     header: 'Estimated Hours',
@@ -171,12 +154,12 @@ export const columns = [
       return <span>{formatted}</span>
     },
   }),
-  columnHelper.accessor((row) => row.labels, {
+  columnHelper.accessor((row) => row.labels?.map((l) => l.id), {
     id: 'labels',
     header: 'Labels',
     enableColumnFilter: true,
     cell: ({ row }) => {
-      const labels = row.getValue<Issue['labels']>('labels')
+      const labels = row.original.labels
 
       if (!labels) return null
 
@@ -199,82 +182,3 @@ export const columns = [
     },
   }),
 ]
-
-const filtersHelper = createColumnConfigHelper<Issue>()
-
-export const columnsConfig = [
-  filtersHelper.accessor((row) => row.title, {
-    id: 'title',
-    type: 'text',
-    displayName: 'Title',
-    icon: Heading1Icon,
-  }),
-  filtersHelper.accessor((row) => row.status, {
-    id: 'status',
-    type: 'option',
-    displayName: 'Status',
-    icon: CircleDotDashedIcon,
-    transformOptionFn(value) {
-      return { value: value.id, label: value.name, icon: value.icon }
-    },
-    orderFn(a, b) {
-      return a.order - b.order
-    },
-  }),
-  filtersHelper.accessor((row) => row.assignee, {
-    id: 'assignee',
-    type: 'option',
-    displayName: 'Assignee',
-    icon: UserCheckIcon,
-    transformOptionFn: ({ id, name, picture }) => ({
-      value: id,
-      label: name,
-      icon: (
-        <Avatar className="size-4">
-          <AvatarImage src={picture} />
-          <AvatarFallback>
-            {name
-              .split(' ')
-              .map((x) => x[0])
-              .join('')
-              .toUpperCase()}
-          </AvatarFallback>
-        </Avatar>
-      ),
-    }),
-  }),
-  filtersHelper.accessor((row) => row.labels, {
-    id: 'labels',
-    type: 'multiOption',
-    displayName: 'Labels',
-    icon: TagsIcon,
-    transformOptionFn(data) {
-      return {
-        value: data.id,
-        label: data.name,
-        icon: (
-          <div
-            className={cn(
-              'size-2.5 border-none rounded-full',
-              LABEL_STYLES_MAP[data.color as TW_COLOR],
-            )}
-          />
-        ),
-      }
-    },
-  }),
-  filtersHelper.accessor((row) => row.estimatedHours, {
-    id: 'estimatedHours',
-    type: 'number',
-    displayName: 'Estimated hours',
-    icon: ClockIcon,
-    min: 0,
-    max: 100,
-  }),
-  filtersHelper.accessor((row) => row.startDate, {
-    id: 'startDate',
-    type: 'date',
-    displayName: 'Start Date',
-    icon: CalendarArrowUpIcon,
-  }),
-]
diff --git a/apps/web/components/data-table-filter-demo/v2/data-table.tsx b/apps/web/app/demos/server/tst-query/_/data-table.tsx
similarity index 79%
rename from apps/web/components/data-table-filter-demo/v2/data-table.tsx
rename to apps/web/app/demos/server/tst-query/_/data-table.tsx
index 206bd68f..01824c45 100644
--- a/apps/web/components/data-table-filter-demo/v2/data-table.tsx
+++ b/apps/web/app/demos/server/tst-query/_/data-table.tsx
@@ -7,37 +7,11 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
-import { DataTableFilter } from '@/registry/data-table-filter-v2/components/data-table-filter'
-import type {
-  Column,
-  DataTableFilterActions,
-  FiltersState,
-} from '@/registry/data-table-filter-v2/lib/filters.types'
 import { type Table as TanStackTable, flexRender } from '@tanstack/react-table'
-import { memo } from 'react'
 
-interface DataTableProps<TData> {
-  table: TanStackTable<TData>
-  filters: FiltersState
-  columns: Column<TData>[]
-  actions: DataTableFilterActions
-}
-
-export function DataTable<TData>({
-  table,
-  filters,
-  columns,
-  actions,
-}: DataTableProps<TData>) {
+export function DataTable({ table }: { table: TanStackTable<any> }) {
   return (
-    <div className="w-full">
-      <div className="flex items-center pb-4 gap-2">
-        <DataTableFilter
-          filters={filters}
-          columns={columns}
-          actions={actions}
-        />
-      </div>
+    <>
       <div className="rounded-md border bg-white dark:bg-inherit">
         <Table>
           <TableHeader>
@@ -116,8 +90,6 @@ export function DataTable<TData>({
           </Button>
         </div>
       </div>
-    </div>
+    </>
   )
 }
-
-export default DataTable
diff --git a/apps/web/components/data-table-filter-demo/v2/data.ts b/apps/web/app/demos/server/tst-query/_/data.ts
similarity index 97%
rename from apps/web/components/data-table-filter-demo/v2/data.ts
rename to apps/web/app/demos/server/tst-query/_/data.ts
index 575beb69..3b976c84 100644
--- a/apps/web/components/data-table-filter-demo/v2/data.ts
+++ b/apps/web/app/demos/server/tst-query/_/data.ts
@@ -9,14 +9,7 @@ import {
 import { nanoid } from 'nanoid'
 import { randomInteger, sample } from 'remeda'
 import type { Issue, IssueLabel, IssueStatus, User } from './types'
-import { isAnyOf } from './utils'
-
-export const calculateEndDate = (start: Date) => {
-  const diff = differenceInDays(new Date(), start)
-  const offset = randomInteger(0, diff + 1)
-
-  return add(start, { days: offset })
-}
+import { calculateEndDate, isAnyOf } from './utils'
 
 export const USERS: User[] = [
   {
@@ -540,5 +533,3 @@ export function generateIssues(count: number) {
 
   return arr
 }
-
-export const ISSUES = generateIssues(10)
diff --git a/apps/web/app/demos/server/tst-query/_/fetch.ts b/apps/web/app/demos/server/tst-query/_/fetch.ts
new file mode 100644
index 00000000..eb032e78
--- /dev/null
+++ b/apps/web/app/demos/server/tst-query/_/fetch.ts
@@ -0,0 +1,131 @@
+import {
+  __dateFilterFn,
+  __multiOptionFilterFn,
+  __numberFilterFn,
+  __optionFilterFn,
+  __textFilterFn,
+} from '@/registry/data-table-filter-v2/lib/filter-fns'
+import { getFacetedUniqueValues } from '@/registry/data-table-filter-v2/lib/filters'
+import type { FiltersState } from '@/registry/data-table-filter-v2/lib/filters.types'
+import { ISSUE_LABELS, ISSUE_STATUSES, USERS, generateIssues } from './data'
+import { columnsConfig } from './filters'
+import type { Issue } from './types'
+import { isAnyOf, sleep } from './utils'
+
+const ISSUES_COUNT = process.env.NODE_ENV === 'production' ? 100000 : 1000
+
+const ISSUES = generateIssues(ISSUES_COUNT)
+
+export async function fetchIssues(filters?: FiltersState) {
+  await sleep(1500)
+
+  if (!filters || filters.length === 0) return ISSUES
+
+  // Apply filters using AND logic
+  // You can use a provided filterFn function (prefixed with __) from @/registry/data-table-filter-v2/lib/filter-fns
+  const filteredIssues = ISSUES.filter((issue) => {
+    return filters.every((filter) => {
+      const columnId = filter.columnId as keyof Issue
+
+      if (isAnyOf(columnId, ['id', 'title', 'description'])) {
+        const value = issue[columnId] as string | undefined
+
+        if (!value) return false
+        return __textFilterFn(value, filter)
+      }
+
+      if (isAnyOf(columnId, ['status', 'assignee'])) {
+        const value = (issue[columnId] as any)?.id
+        if (!value) return false
+        return __optionFilterFn(value, filter)
+      }
+
+      if (isAnyOf(columnId, ['labels'])) {
+        const value = ((issue[columnId] as any) ?? []).map((l: any) => l.id)
+        if (!value) return false
+        return __multiOptionFilterFn(value, filter)
+      }
+
+      if (isAnyOf(columnId, ['estimatedHours'])) {
+        const value = issue[columnId] as number
+        return __numberFilterFn(value, filter)
+      }
+
+      if (isAnyOf(columnId, ['startDate', 'endDate'])) {
+        const value = issue[columnId] as Date | undefined
+        if (!value) return false
+        return __dateFilterFn(value, filter)
+      }
+
+      throw new Error(`Unknown columnId: ${columnId}`)
+    })
+  })
+
+  return filteredIssues
+}
+
+export async function fetchLabels() {
+  await sleep(1500)
+  return ISSUE_LABELS
+}
+
+export async function fetchUsers() {
+  await sleep(1500)
+  return USERS
+}
+
+export async function fetchStatuses() {
+  await sleep(1500)
+  return ISSUE_STATUSES
+}
+
+export async function fetchFacetedLabels() {
+  const map = new Map<string, number>()
+
+  for (const label of ISSUE_LABELS) {
+    map.set(label.id, 0)
+  }
+
+  for (const issue of ISSUES) {
+    const labelIds = issue.labels?.map((l) => l.id) ?? []
+
+    for (const labelId of labelIds) {
+      const curr = map.get(labelId) ?? 0
+      map.set(labelId, curr + 1)
+    }
+  }
+
+  return map
+}
+
+export async function fetchFacetedStatuses() {
+  const map = new Map<string, number>()
+
+  for (const status of ISSUE_STATUSES) {
+    map.set(status.id, 0)
+  }
+
+  for (const issue of ISSUES) {
+    const statusId = issue.status.id
+    const curr = map.get(statusId) ?? 0
+    map.set(statusId, curr + 1)
+  }
+
+  return map
+}
+
+export async function fetchFacetedUsers() {
+  const map = new Map<string, number>()
+
+  for (const user of USERS) {
+    map.set(user.id, 0)
+  }
+
+  for (const issue of ISSUES) {
+    const userId = issue.assignee?.id ?? ''
+    const curr = map.get(userId) ?? 0
+    map.set(userId, curr + 1)
+  }
+
+  return map
+}
diff --git a/apps/web/app/demos/server/tst-query/_/filters.tsx b/apps/web/app/demos/server/tst-query/_/filters.tsx
new file mode 100644
index 00000000..bbc526eb
--- /dev/null
+++ b/apps/web/app/demos/server/tst-query/_/filters.tsx
@@ -0,0 +1,59 @@
+import { createColumnConfigHelper } from '@/registry/data-table-filter-v2/lib/filters'
+import {
+  CalendarArrowUpIcon,
+  CircleDotDashedIcon,
+  ClockIcon,
+  Heading1Icon,
+  TagsIcon,
+  UserCheckIcon,
+} from 'lucide-react'
+import type { Issue } from './types'
+
+const dtf = createColumnConfigHelper<Issue>()
+
+export const columnsConfig = [
+  dtf
+    .text()
+    .id('title')
+    .accessor((row) => row.title)
+    .displayName('Title')
+    .icon(Heading1Icon)
+    .build(),
+  dtf
+    .option()
+    .accessor((row) => row.status.id)
+    .id('status')
+    .displayName('Status')
+    .icon(CircleDotDashedIcon)
+    .build(),
+  dtf
+    .option()
+    .accessor((row) => row.assignee?.id)
+    .id('assignee')
+    .displayName('Assignee')
+    .icon(UserCheckIcon)
+    .build(),
+  dtf
+    .multiOption()
+    .accessor((row) => row.labels?.map((l) => l.id))
+    .id('labels')
+    .displayName('Labels')
+    .icon(TagsIcon)
+    .build(),
+  dtf
+    .number()
+    .accessor((row) => row.estimatedHours)
+    .id('estimatedHours')
+    .displayName('Estimated hours')
+    .icon(ClockIcon)
+    .min(0)
+    .max(100)
+    .build(),
+  dtf
+    .date()
+    .accessor((row) => row.startDate)
+    .id('startDate')
+    .displayName('Start Date')
+    .icon(CalendarArrowUpIcon)
+    .build(),
+] as const
diff --git a/apps/web/app/demos/server/tst-query/_/issues-table.tsx b/apps/web/app/demos/server/tst-query/_/issues-table.tsx
new file mode 100644
index 00000000..c376eb79
--- /dev/null
+++ b/apps/web/app/demos/server/tst-query/_/issues-table.tsx
@@ -0,0 +1,165 @@
+'use client'
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { cn } from '@/lib/utils'
+import {
+  DataTableFilter,
+  useDataTableFilters,
+} from '@/registry/data-table-filter-v2/components/data-table-filter'
+import { createTSTColumns } from '@/registry/data-table-filter-v2/lib/filters-tst'
+import type { FiltersState } from '@/registry/data-table-filter-v2/lib/filters.types'
+import { useQuery } from '@tanstack/react-query'
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { useMemo, useState } from 'react'
+import { LABEL_STYLES_MAP, type TW_COLOR, tstColumnDefs } from './columns'
+import { DataTable } from './data-table'
+import { columnsConfig } from './filters'
+import { queries } from './queries'
+import { TableFilterSkeleton, TableSkeleton } from './table-skeleton'
+import type { IssueLabel, IssueStatus, User } from './types'
+
+function createLabelOptions(labels: IssueLabel[] | undefined) {
+  return labels?.map((l) => ({
+    value: l.id,
+    label: l.name,
+    icon: (
+      <div
+        className={cn(
+          'size-2.5 rounded-full',
+          LABEL_STYLES_MAP[l.color as TW_COLOR],
+        )}
+      />
+    ),
+  }))
+}
+
+function createStatusOptions(statuses: IssueStatus[] | undefined) {
+  return statuses?.map((s) => ({
+    value: s.id,
+    label: s.name,
+    icon: s.icon,
+  }))
+}
+
+function createUserOptions(users: User[] | undefined) {
+  return users?.map((u) => ({
+    value: u.id,
+    label: u.name,
+    icon: (
+      <Avatar className="">
+        <AvatarImage src={u.picture} />
+        <AvatarFallback>
+          {u.name
+            .split('')
+            .map((x) => x[0])
+            .join('')
+            .toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+    ),
+  }))
+}
+
+export function IssuesTable({
+  state,
+}: {
+  state: {
+    filters: FiltersState
+    setFilters: React.Dispatch<React.SetStateAction<FiltersState>>
+  }
+}) {
+  // Step 1: Fetch data from the server
+  const labels = useQuery(queries.labels.all())
+  const statuses = useQuery(queries.statuses.all())
+  const users = useQuery(queries.users.all())
+
+  const facetedLabels = useQuery(queries.labels.faceted())
+  const facetedStatuses = useQuery(queries.statuses.faceted())
+  const facetedUsers = useQuery(queries.users.faceted())
+
+  const issues = useQuery(queries.issues.all(state.filters))
+
+  // Step 2: Create ColumnOption[] for each option-based column
+  const labelOptions = createLabelOptions(labels.data)
+  const statusOptions = createStatusOptions(statuses.data)
+  const userOptions = createUserOptions(users.data)
+
+  const isOptionsDataPending =
+    labels.isPending ||
+    statuses.isPending ||
+    users.isPending ||
+    facetedLabels.isPending ||
+    facetedStatuses.isPending ||
+    facetedUsers.isPending
+
+  // Step 3: Create our data table filters instance
+  //
+  // This instance will handle the logic for filtering the data and updating the filters state.
+  // We expose an `options` prop to provide the options for each column dynamically, after fetching them above.
+  // It exposes our filters state, for you to pass on as you wish - e.g. to a TanStack Table instance.
+  const { columns, filters, actions, strategy } = useDataTableFilters({
+    strategy: 'server',
+    data: issues.data ?? [],
+    columnsConfig,
+    controlledState: [state.filters, state.setFilters],
+    options: {
+      status: [statusOptions, facetedStatuses.data],
+      assignee: [userOptions, facetedUsers.data],
+      labels: [labelOptions, facetedLabels.data],
+    },
+  })
+
+  // Step 4: Extend our TanStack Table columns with custom filter functions (and more!)
+  //         using our integration hook.
+  const tstColumns = useMemo(
+    () =>
+      createTSTColumns({
+        columns: tstColumnDefs,
+        configs: columns,
+      }),
+    [columns],
+  )
+
+  // Step 5: Create our TanStack Table instance
+  const [rowSelection, setRowSelection] = useState({})
+  const table = useReactTable({
+    data: issues.data ?? [],
+    columns: tstColumns,
+    getRowId: (row) => row.id,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onRowSelectionChange: setRowSelection,
+    state: {
+      rowSelection,
+    },
+  })
+
+  // Step 6: Render the table!
+  return (
+    <div className="w-full col-span-2">
+      <div className="flex items-center pb-4 gap-2">
+        {isOptionsDataPending ? (
+          <TableFilterSkeleton />
+        ) : (
+          <DataTableFilter
+            filters={filters}
+            columns={columns}
+            actions={actions}
+            strategy={strategy}
+          />
+        )}
+      </div>
+      {issues.isLoading ? (
+        <div className="w-full col-span-2">
+          <TableSkeleton numCols={tstColumns.length} numRows={10} />
+        </div>
+      ) : (
+        <DataTable table={table} />
+      )}
+    </div>
+  )
+}
diff --git a/apps/web/app/demos/server/tst-query/_/queries.ts b/apps/web/app/demos/server/tst-query/_/queries.ts
new file mode 100644
index 00000000..0cafd1fd
--- /dev/null
+++ b/apps/web/app/demos/server/tst-query/_/queries.ts
@@ -0,0 +1,55 @@
+import type { FiltersState } from '@/registry/data-table-filter-v2/lib/filters.types'
+import type { QueryOptions } from '@tanstack/react-query'
+import {
+  fetchFacetedLabels,
+  fetchFacetedStatuses,
+  fetchFacetedUsers,
+  fetchIssues,
+  fetchLabels,
+  fetchStatuses,
+  fetchUsers,
+} from './fetch'
+
+export const queries = {
+  issues: {
+    all: (filters?: FiltersState) =>
+      ({
+        queryKey: ['issues', filters],
+        queryFn: () => fetchIssues(filters),
+      }) satisfies QueryOptions,
+  },
+  statuses: {
+    all: () => ({
+      queryKey: ['statuses'],
+      queryFn: () => fetchStatuses(),
+    }),
+    faceted: () =>
+      ({
+        queryKey: ['statuses', 'faceted'],
+        queryFn: () => fetchFacetedStatuses(),
+      }) satisfies QueryOptions,
+  },
+  labels: {
+    all: () => ({
+      queryKey: ['labels'],
+      queryFn: () => fetchLabels(),
+    }),
+    faceted: () =>
+      ({
+        queryKey: ['labels', 'faceted'],
+        queryFn: () => fetchFacetedLabels(),
+      }) satisfies QueryOptions,
+  },
+  users: {
+    all: () =>
+      ({
+        queryKey: ['users'],
+        queryFn: () => fetchUsers(),
+      }) satisfies QueryOptions,
+    faceted: () =>
+      ({
+        queryKey: ['users', 'faceted'],
+        queryFn: () => fetchFacetedUsers(),
+      }) satisfies QueryOptions,
+  },
+}
diff --git a/apps/web/app/demos/server/tst-query/_/query-client-provider.tsx b/apps/web/app/demos/server/tst-query/_/query-client-provider.tsx
new file mode 100644
index 00000000..2a0c02e6
--- /dev/null
+++ b/apps/web/app/demos/server/tst-query/_/query-client-provider.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import {
+  QueryClient,
+  QueryClientProvider as ReactQueryClientProvider,
+} from '@tanstack/react-query'
+
+export default function QueryClientProvider({
+  children,
+}: { children: React.ReactNode }) {
+  const queryClient = new QueryClient()
+  return (
+    <ReactQueryClientProvider client={queryClient}>
+      {children}
+    </ReactQueryClientProvider>
+  )
+}
diff --git a/apps/web/app/demos/server/tst-query/_/table-skeleton.tsx b/apps/web/app/demos/server/tst-query/_/table-skeleton.tsx
new file mode 100644
index 00000000..1f8aeac2
--- /dev/null
+++ b/apps/web/app/demos/server/tst-query/_/table-skeleton.tsx
@@ -0,0 +1,78 @@
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { FilterIcon } from 'lucide-react'
+
+export interface TableSkeletonProps {
+  numCols: number
+  numRows: number
+}
+
+export function TableSkeleton({ numRows, numCols }: TableSkeletonProps) {
+  const rows = Array.from(Array(numRows).keys())
+  const cols = Array.from(Array(numCols).keys())
+
+  return (
+    <>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {cols.map((_, index) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                <TableHead key={index}>
+                  <Skeleton className="h-[20px] w-[75px]" />
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((_, index) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              <TableRow key={index} className="h-12">
+                {cols.map((_, index2) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                  <TableCell key={index2}>
+                    <Skeleton className="h-[30px] w-[140px]" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end py-4 space-x-2">
+        <div className="flex-1 flex items-center gap-2">
+          <Skeleton className="h-[20px] w-[200px]" />
+          <Skeleton className="h-[20px] w-[150px]" />
+        </div>
+        <div className="space-x-2">
+          <Button variant="outline" size="sm" disabled>
+            Previous
+          </Button>
+          <Button variant="outline" size="sm" disabled>
+            Next
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export function TableFilterSkeleton() {
+  return (
+    <div>
+      <Button variant="outline" className="h-7" disabled>
+        <FilterIcon className="size-4" />
+        <span>Filter</span>
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/web/components/data-table-filter-demo/v2/types.ts b/apps/web/app/demos/server/tst-query/_/types.ts
similarity index 100%
rename from apps/web/components/data-table-filter-demo/v2/types.ts
rename to apps/web/app/demos/server/tst-query/_/types.ts
index 57670f1c..878483f2 100644
--- a/apps/web/components/data-table-filter-demo/v2/types.ts
+++ b/apps/web/app/demos/server/tst-query/_/types.ts
@@ -1,3 +1,5 @@
+import type { LucideIcon } from 'lucide-react'
+
 export type Issue = {
   id: string
   title: string
@@ -10,8 +12,6 @@ export type Issue = {
   estimatedHours?: number
 }
 
-import type { LucideIcon } from 'lucide-react'
-
 export type User = {
   id: string
   name: string
diff --git a/apps/web/components/data-table-filter-demo/v2/utils.ts b/apps/web/app/demos/server/tst-query/_/utils.ts
similarity index 77%
rename from apps/web/components/data-table-filter-demo/v2/utils.ts
rename to apps/web/app/demos/server/tst-query/_/utils.ts
index a2db0f5c..4a85c166 100644
--- a/apps/web/components/data-table-filter-demo/v2/utils.ts
+++ b/apps/web/app/demos/server/tst-query/_/utils.ts
@@ -11,3 +11,7 @@ export const calculateEndDate = (start: Date) => {
 export function isAnyOf<T>(value: T, array: T[]) {
   return array.includes(value)
 }
+
+export async function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
diff --git a/apps/web/app/demos/server/tst-query/layout.tsx b/apps/web/app/demos/server/tst-query/layout.tsx
new file mode 100644
index 00000000..9377db73
--- /dev/null
+++ b/apps/web/app/demos/server/tst-query/layout.tsx
@@ -0,0 +1,10 @@
+import { Suspense } from 'react'
+import QueryClientProvider from './_/query-client-provider'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider>
+      <Suspense>{children}</Suspense>
+    </QueryClientProvider>
+  )
+}
diff --git a/apps/web/app/demos/server/tst-query/page.tsx b/apps/web/app/demos/server/tst-query/page.tsx
new file mode 100644
index 00000000..e0193c8e
--- /dev/null
+++ b/apps/web/app/demos/server/tst-query/page.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import { CodeBlock } from '@/components/code-block'
+import { NavBar } from '@/components/nav-bar'
+import type { FiltersState } from '@/registry/data-table-filter-v2/lib/filters.types'
+import { parseAsJson, useQueryState } from 'nuqs'
+import { z } from 'zod'
+import { IssuesTable } from './_/issues-table'
+
+const filtersSchema = z.custom<FiltersState>()
+
+export default function SSRPage() {
+  const [filters, setFilters] = useQueryState<FiltersState>(
+    'filters',
+    parseAsJson(filtersSchema.parse).withDefault([]),
+  )
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="border-b border-border border-dashed sticky top-0 bg-site-background backdrop-blur-md z-50">
+        <div className="px-4 py-2 max-w-screen-xl w-full mx-auto border-border border-dashed xl:border-x">
+          <NavBar />
+        </div>
+      </div>
+      <div className="border-b border-border border-dashed bg-site-background">
+        <div className="px-4 py-2 max-w-screen-2xl w-full mx-auto border-border border-dashed xl:border-x">
+          <div className="flex flex-col gap-8 p-8">
+            <h1 className="text-4xl font-[538] tracking-[-0.03rem] select-none">
+              Server-side filtering{' '}
+              <span className="text-muted-foreground">
+                (TanStack Query + nuqs)
+              </span>
+            </h1>
+            <div className="grid grid-cols-3 gap-8">
+              <CodeBlock
+                lang="json"
+                code={JSON.stringify(filters, null, '\t')}
+              />
+              <IssuesTable state={{ filters, setFilters }} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/components/data-table-filter-demo/v2/demo.tsx b/apps/web/components/data-table-filter-demo/v2/demo.tsx
deleted file mode 100644
index ec49ebcc..00000000
--- a/apps/web/components/data-table-filter-demo/v2/demo.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-'use client'
-
-import { use, useEffect, useMemo, useState } from 'react'
-
-import { CodeBlock } from '@/components/code-block'
-import { Button } from '@/components/ui/button'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { print } from '@/lib/utils'
-import { useDataTableFilters } from '@/registry/data-table-filter-v2/components/data-table-filter'
-import {
-  createTSTColumns,
-  createTSTFilters,
-} from '@/registry/data-table-filter-v2/lib/filters-tst'
-import type { FiltersState } from '@/registry/data-table-filter-v2/lib/filters.types'
-import {
-  type ColumnDef,
-  type ColumnFiltersState,
-  type SortingState,
-  type VisibilityState,
-  getCoreRowModel,
-  getFacetedMinMaxValues,
-  getFacetedRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table'
-import { useSearchParams } from 'next/navigation'
-import { parseAsJson, useQueryState } from 'nuqs'
-import { z } from 'zod'
-import { columnsConfig, columns as tableColumns } from './columns'
-import { ISSUES } from './data'
-import DataTable from './data-table'
-import type { Issue } from './types'
-
-interface DemoConfig {
-  state: 'internal' | 'external' | 'nuqs'
-}
-
-const filtersSchema = z
-  .object({
-    columnId: z.string(),
-    operator: z.string(),
-    values: z.array(z.any()),
-  })
-  .array()
-  .min(0)
-
-type FiltersSchema = z.infer<typeof filtersSchema>
-
-const demoConfigSchema = z.object({
-  state: z.enum(['internal', 'external', 'nuqs']),
-})
-
-export default function DataTableDemo() {
-  const [rowSelection, setRowSelection] = useState({})
-
-  const [config, setConfig] = useQueryState<DemoConfig>(
-    'demoConfig',
-    parseAsJson(demoConfigSchema.parse).withDefault({ state: 'internal' }),
-  )
-
-  const [columnFiltersExternal, setColumnFiltersExternal] =
-    useState<FiltersState>([])
-
-  const tstFilters = useMemo(
-    () => createTSTFilters(columnFiltersExternal),
-    [columnFiltersExternal],
-  )
-
-  // const [columnFiltersNuqs, setColumnFiltersNuqs] = useQueryState<FiltersState>(
-  //   'filters',
-  //   parseAsJson(filtersSchema.parse).withDefault([]),
-  // )
-
-  // const filtersState =
-  //   config.state === 'external'
-  //     ? [columnFiltersExternal, setColumnFiltersExternal]
-  //     : config.state === 'nuqs'
-  //       ? [columnFiltersNuqs, setColumnFiltersNuqs]
-  //       : undefined
-
-  // console.log('[DataTableDemo] re-rendering')
-  const tstColumns = useMemo(() => {
-    console.log('[DataTableDemo] Creating TST columns')
-    return createTSTColumns({
-      columns: tableColumns as ColumnDef<Issue>[],
-      configs: columnsConfig,
-    })
-  }, [])
-
-  const table = useReactTable({
-    data: ISSUES,
-    columns: tstColumns,
-    getRowId: (row) => row.id,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onRowSelectionChange: setRowSelection,
-    state: {
-      rowSelection,
-      columnFilters: tstFilters,
-    },
-  })
-
-  const { filters, columns, actions } = useDataTableFilters(
-    ISSUES,
-    columnsConfig,
-    [columnFiltersExternal, setColumnFiltersExternal],
-  )
-
-  return (
-    <div className="grid grid-cols-3 gap-8">
-      <div className="col-span-2">
-        <DataTable
-          table={table}
-          filters={filters}
-          columns={columns}
-          actions={actions}
-        />
-      </div>
-      <div className="flex flex-col gap-3">
-        {/* <div>Query: {searchParams.get('filters')}</div> */}
-        <Select
-          value={config.state}
-          onValueChange={(value: DemoConfig['state']) =>
-            setConfig({ state: value })
-          }
-        >
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Filters state" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="internal">Internal</SelectItem>
-            <SelectItem value="external">React State</SelectItem>
-            <SelectItem value="nuqs">URL Query</SelectItem>
-          </SelectContent>
-        </Select>
-        <CodeBlock lang="json" code={print(filters)} />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/web/components/nav-bar.tsx b/apps/web/components/nav-bar.tsx
new file mode 100644
index 00000000..5395b0ae
--- /dev/null
+++ b/apps/web/components/nav-bar.tsx
@@ -0,0 +1,39 @@
+import { Button } from '@/components/ui/button'
+import logoSrc from '@/public/bazzaui-v3-color.png'
+import Image from 'next/image'
+import Link from 'next/link'
+import { GithubIcon, XIcon } from './icons'
+import { ThemeToggle } from './theme-toggle'
+
+export function NavBar() {
+  return (
+    <div className="flex items-center gap-4 justify-between h-8">
+      <Link
+        href="/"
+        className="inline-flex items-center gap-1 font-medium font-mono tracking-tight text-sm"
+      >
+        <Image
+          className="size-6 mr-1 translate-y-[-0.75px]"
+          src={logoSrc}
+          alt="bazza/ui"
+        />
+        <span>bazza</span>
+        <span className="text-xl text-border">/</span>
+        <span>ui</span>
+      </Link>
+      <div className="flex items-center">
+        <Button variant="ghost" size="icon" asChild>
+          <Link href="https://x.com/kianbazza">
+            <XIcon className="size-3.5" />
+          </Link>
+        </Button>
+        <Button variant="ghost" size="icon" asChild>
+          <Link href="https://github.com/kianbazza/ui">
+            <GithubIcon className="size-5" />
+          </Link>
+        </Button>
+        <ThemeToggle />
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 77a4c1ef..57d4b539 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "next dev --turbopack",
     "test": "vitest",
-    "test:watch": "vitest --watch",
+    "test:watch": "vitest --watch --disable-console-intercept",
     "build": "next build",
     "vercel:install": "./vercel-submodule.sh && bun install",
     "start": "next start",
@@ -32,6 +32,7 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@t3-oss/env-nextjs": "^0.12.0",
+    "@tanstack/react-query": "^5.72.2",
     "@tanstack/react-table": "^8.21.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
diff --git a/apps/web/registry/data-table-filter-v2/__tests__/arrays.test.ts b/apps/web/registry/data-table-filter-v2/__tests__/arrays.test.ts
new file mode 100644
index 00000000..d355d733
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/__tests__/arrays.test.ts
@@ -0,0 +1,113 @@
+import { describe, expect, it } from 'vitest'
+import { uniq } from '../lib/array'
+
+describe('lib/array', () => {
+  describe('uniq', () => {
+    it('should return an empty array for an empty input', () => {
+      const data: any[] = []
+      expect(uniq(data)).toEqual([])
+    })
+
+    it('should work with referential equality', () => {
+      const item = { id: 1 }
+      const data = [item, item]
+      expect(uniq(data)).toHaveLength(1)
+      expect(uniq(data)[0]).toBe(item)
+    })
+
+    it('should work with deep equality for objects', () => {
+      const data = [
+        { id: 1, name: 'IB Bank' },
+        { id: 1, name: 'IB Bank' },
+      ]
+      const uniqueData = uniq(data)
+      expect(uniqueData).toHaveLength(1)
+      expect(uniqueData[0]).toEqual({ id: 1, name: 'IB Bank' })
+    })
+
+    it('should work with primitive values', () => {
+      const numbers = [1, 2, 2, 3, 1, 4]
+      const uniqueNumbers = uniq(numbers)
+      expect(uniqueNumbers).toHaveLength(4)
+      expect(uniqueNumbers).toEqual(expect.arrayContaining([1, 2, 3, 4]))
+
+      const strings = ['a', 'b', 'a', 'c']
+      const uniqueStrings = uniq(strings)
+      expect(uniqueStrings).toHaveLength(3)
+      expect(uniqueStrings).toEqual(expect.arrayContaining(['a', 'b', 'c']))
+    })
+
+    it('should work with nested arrays', () => {
+      const data = [
+        [1, 2],
+        [1, 2],
+        [2, 3],
+      ]
+      const uniqueData = uniq(data)
+      expect(uniqueData).toHaveLength(2)
+      expect(uniqueData).toEqual(
+        expect.arrayContaining([
+          [1, 2],
+          [2, 3],
+        ]),
+      )
+    })
+
+    it('should work with nested objects and arrays', () => {
+      const data = [
+        { id: 1, arr: [1, 2, { nested: 'a' }] },
+        { id: 1, arr: [1, 2, { nested: 'a' }] },
+        { id: 2, arr: [3, 4, { nested: 'b' }] },
+      ]
+      const uniqueData = uniq(data)
+      expect(uniqueData).toHaveLength(2)
+      expect(uniqueData).toEqual(
+        expect.arrayContaining([
+          { id: 1, arr: [1, 2, { nested: 'a' }] },
+          { id: 2, arr: [3, 4, { nested: 'b' }] },
+        ]),
+      )
+    })
+
+    it('should work with a mix of types', () => {
+      const data = [
+        1,
+        '1',
+        { val: 1 },
+        { val: '1' },
+        [1],
+        [1],
+        null,
+        null,
+        undefined,
+        undefined,
+      ]
+      const uniqueData = uniq(data)
+      // The expected length depends on deep equality of all these different types.
+      expect(uniqueData).toHaveLength(7)
+      expect(uniqueData).toEqual(
+        expect.arrayContaining([
+          1,
+          '1',
+          { val: 1 },
+          { val: '1' },
+          [1],
+          null,
+          undefined,
+        ]),
+      )
+    })
+
+    it('should consider functions equal if their toString representations are equal', () => {
+      // Warning: using toString for functions is usually not recommended for complex cases.
+      const func1 = () => 1
+      const func2 = () => 1
+      const func3 = () => 1
+      const data = [func1, func1, func2, func3]
+      const uniqueData = uniq(data)
+      // Depending on the implementation of function toString, func1 and func2 might have the same string representation.
+      // func3 (an arrow function) likely has a different string representation than func1 and func2.
+      expect(uniqueData.length).toBeGreaterThanOrEqual(2)
+    })
+  })
+})
diff --git a/apps/web/registry/data-table-filter-v2/__tests__/data-table-filters.test.tsx b/apps/web/registry/data-table-filter-v2/__tests__/data-table-filters.test.tsx
new file mode 100644
index 00000000..2f12aaac
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/__tests__/data-table-filters.test.tsx
@@ -0,0 +1,262 @@
+import { act, renderHook } from '@testing-library/react'
+import { CircleIcon } from 'lucide-react'
+import { describe, expect, it } from 'vitest'
+import { useDataTableFilters } from '../components/data-table-filter'
+import {
+  DEFAULT_OPERATORS,
+  createColumnConfigHelper,
+  determineNewOperator,
+} from '../lib/filters'
+
+// Dummy icon component for column configuration
+const DummyIcon = CircleIcon
+
+// Define a dummy data type used for testing.
+type TestData = {
+  name: string
+  status: string
+}
+
+// Sample data and column configurations.
+const data: TestData[] = [
+  { name: 'John', status: 'active' },
+  { name: 'Jane', status: 'inactive' },
+]
+
+const helper = createColumnConfigHelper<TestData>()
+
+const optionColumn = helper
+  .option()
+  .accessor((row) => row.status)
+  .id('status')
+  .displayName('Status')
+  .icon(DummyIcon)
+  .build()
+const textColumn = helper
+  .text()
+  .accessor((row) => row.name)
+  .id('name')
+  .displayName('Name')
+  .icon(DummyIcon)
+  .build()
+
+const columnsConfig = [optionColumn, textColumn] as const
+
+// For option columns, supply static options that the hook uses.
+const options = {
+  status: [
+    { value: 'active', label: 'Active' },
+    { value: 'inactive', label: 'Inactive' },
+  ],
+}
+
+describe('useDataTableFilters hook (Data Table Filters Component Logic)', () => {
+  it('should add an option filter value via addFilterValue', () => {
+    const { result } = renderHook(() =>
+      useDataTableFilters({
+        strategy: 'client',
+        data,
+        columnsConfig,
+        options,
+      }),
+    )
+
+    // Initially, no filters exist.
+    expect(result.current.filters).toHaveLength(0)
+
+    // Add a filter value for the option column.
+    act(() => {
+      result.current.actions.addFilterValue(optionColumn as any, ['active'])
+    })
+
+    expect(result.current.filters).toHaveLength(1)
+    const filter = result.current.filters[0]
+    expect(filter.columnId).toBe('status')
+    expect(filter.values).toEqual(['active'])
+    // For an option column with a single value, the default operator is expected to be "single".
+    expect(filter.operator).toBe(DEFAULT_OPERATORS.option.single)
+  })
+
+  it('should update an existing option filter when adding new values', () => {
+    const { result } = renderHook(() =>
+      useDataTableFilters({
+        strategy: 'client',
+        data,
+        columnsConfig,
+        options,
+      }),
+    )
+
+    // Start by adding a single filter value.
+    act(() => {
+      result.current.actions.addFilterValue(optionColumn as any, ['active'])
+    })
+    // Adding the same value again should not result in duplicates.
+    act(() => {
+      result.current.actions.addFilterValue(optionColumn as any, ['active'])
+    })
+    expect(result.current.filters).toHaveLength(1)
+    expect(result.current.filters[0].values).toEqual(['active'])
+
+    // Add a different value.
+    act(() => {
+      result.current.actions.addFilterValue(optionColumn as any, ['inactive'])
+    })
+    expect(result.current.filters).toHaveLength(1)
+    expect(result.current.filters[0].values).toEqual(['active', 'inactive'])
+    // Multiple selected values should cause the operator to switch to "multiple".
+    expect(result.current.filters[0].operator).toBe(
+      DEFAULT_OPERATORS.option.multiple,
+    )
+  })
+
+  it('should remove an option filter value using removeFilterValue', () => {
+    const { result } = renderHook(() =>
+      useDataTableFilters({
+        strategy: 'client',
+        data,
+        columnsConfig,
+        options,
+      }),
+    )
+
+    // Add two filter values.
+    act(() => {
+      result.current.actions.addFilterValue(optionColumn as any, [
+        'active',
+        'inactive',
+      ])
+    })
+    expect(result.current.filters[0].values).toEqual(['active', 'inactive'])
+
+    // Remove one value.
+    act(() => {
+      result.current.actions.removeFilterValue(optionColumn as any, ['active'])
+    })
+    expect(result.current.filters[0].values).toEqual(['inactive'])
+
+    // Remove the last value; the filter should then be removed.
+    act(() => {
+      result.current.actions.removeFilterValue(optionColumn as any, [
+        'inactive',
+      ])
+    })
+    expect(result.current.filters).toHaveLength(0)
+  })
+
+  it('should set a text filter value using setFilterValue', () => {
+    const { result } = renderHook(() =>
+      useDataTableFilters({
+        strategy: 'client',
+        data,
+        columnsConfig,
+      }),
+    )
+
+    // Set a filter for the text column.
+    act(() => {
+      result.current.actions.setFilterValue(textColumn as any, ['John'])
+    })
+    expect(result.current.filters).toHaveLength(1)
+    const textFilter = result.current.filters.find((f) => f.columnId === 'name')
+    expect(textFilter).toBeDefined()
+    expect(textFilter!.values).toEqual(['John'])
+    // The default operator for text columns should be "contains" (as defined in DEFAULT_OPERATORS).
+    expect(textFilter!.operator).toBe(DEFAULT_OPERATORS.text.single)
+  })
+
+  it('should update the filter operator using setFilterOperator', () => {
+    const { result } = renderHook(() =>
+      useDataTableFilters({
+        strategy: 'client',
+        data,
+        columnsConfig,
+      }),
+    )
+
+    // First, set a filter for the text column.
+    act(() => {
+      result.current.actions.setFilterValue(textColumn as any, ['Jane'])
+    })
+    let filter = result.current.filters.find((f) => f.columnId === 'name')
+    expect(filter).toBeDefined()
+    expect(filter!.operator).toBe(DEFAULT_OPERATORS.text.single)
+
+    // Update the operator explicitly.
+    act(() => {
+      result.current.actions.setFilterOperator('name', 'does not contain')
+    })
+    filter = result.current.filters.find((f) => f.columnId === 'name')
+    expect(filter).toBeDefined()
+    expect(filter!.operator).toBe('does not contain')
+  })
+
+  it('should remove a filter using removeFilter', () => {
+    const { result } = renderHook(() =>
+      useDataTableFilters({
+        strategy: 'client',
+        data,
+        columnsConfig,
+        options,
+      }),
+    )
+
+    // Add filters for both the option and text columns.
+    act(() => {
+      result.current.actions.addFilterValue(optionColumn as any, ['active'])
+      result.current.actions.setFilterValue(textColumn as any, ['John'])
+    })
+    expect(result.current.filters).toHaveLength(2)
+
+    // Remove the text filter.
+    act(() => {
+      result.current.actions.removeFilter('name')
+    })
+    expect(result.current.filters).toHaveLength(1)
+    expect(result.current.filters[0].columnId).toBe('status')
+  })
+
+  it('should remove all filters using removeAllFilters', () => {
+    const { result } = renderHook(() =>
+      useDataTableFilters({
+        strategy: 'client',
+        data,
+        columnsConfig,
+        options,
+      }),
+    )
+
+    // Add multiple filters.
+    act(() => {
+      result.current.actions.addFilterValue(optionColumn as any, ['active'])
+      result.current.actions.setFilterValue(textColumn as any, ['Jane'])
+    })
+    expect(result.current.filters).toHaveLength(2)
+
+    // Remove all filters.
+    act(() => {
+      result.current.actions.removeAllFilters()
+    })
+    expect(result.current.filters).toHaveLength(0)
+  })
+})
+
+describe('determineNewOperator function', () => {
+  it('should return the same operator when the number of values does not change', () => {
+    const newOp = determineNewOperator('text', ['foo'], ['bar'], 'contains')
+    expect(newOp).toBe('contains')
+  })
+
+  it('should switch to the multiple value operator when transitioning from a single value to multiple values', () => {
+    // For an option column, "is" should transition to "is any of" when there is more than one value.
+    const newOp = determineNewOperator('option', ['a'], ['a', 'b'], 'is')
+    expect(newOp).toBe('is any of')
+  })
+
+  it('should switch to the single value operator when transitioning from multiple values to a single value', () => {
+    // For a number column using a range operator, transitioning from two values to a single value
+    // should update from "is between" to "is".
+    const newOp = determineNewOperator('number', [5, 10], [5], 'is between')
+    expect(newOp).toBe('is')
+  })
+})
diff --git a/apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx b/apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx
index 5d195dac..c29417ff 100644
--- a/apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx
+++ b/apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx
@@ -3,14 +3,12 @@
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Checkbox } from '@/components/ui/checkbox'
-// import { Checkbox as __Checkbox } from '@/components/ui/checkbox'
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-  // CommandItem as __CommandItem,
   CommandList,
 } from '@/components/ui/command'
 import { Input } from '@/components/ui/input'
@@ -30,7 +28,6 @@ import { FilterXIcon } from 'lucide-react'
 import { ArrowRight, Filter } from 'lucide-react'
 import { X } from 'lucide-react'
 import { Ellipsis } from 'lucide-react'
-import { Nullable } from 'nuqs'
 import {
   cloneElement,
   isValidElement,
@@ -48,11 +45,12 @@ import {
   DEFAULT_OPERATORS,
   createColumns,
   createNumberFilterValue,
-  createNumberRange,
   dateFilterDetails,
   determineNewOperator,
   filterTypeOperatorDetails,
   getColumn,
+  isColumnOptionArray,
+  isColumnOptionMap,
   multiOptionFilterDetails,
   numberFilterDetails,
   optionFilterDetails,
@@ -64,44 +62,82 @@ import type {
   ColumnDataType,
   ColumnOption,
   DataTableFilterActions,
-  DataTableFilterConfig,
-  ElementType,
   FilterModel,
   FilterOperators,
-  FilterValues,
+  FilterStrategy,
   FiltersState,
   OptionBasedColumnDataType,
+  OptionColumnIds,
 } from '../lib/filters.types'
 
-// const Checkbox = memo(__Checkbox) as typeof __Checkbox
-// const CommandItem = memo(__CommandItem) as typeof __CommandItem
-// const Checkbox = __Checkbox
-// const CommandItem = __CommandItem
-
-export function useDataTableFilters<TData>(
-  data: TData[],
-  columnsConfig: ColumnConfig<TData>[],
+export interface DataTableFiltersOptions<
+  TData,
+  TColumns extends ReadonlyArray<ColumnConfig<TData, any, any, any>>,
+  TStrategy extends FilterStrategy,
+> {
+  strategy: TStrategy
+  data: TData[]
+  columnsConfig: TColumns
   controlledState?:
     | [FiltersState, React.Dispatch<React.SetStateAction<FiltersState>>]
-    | undefined,
-) {
+    | undefined
+  options?: Partial<
+    Record<
+      OptionColumnIds<TColumns>,
+      | ColumnOption[]
+      | [ColumnOption[] | undefined, Map<string, number> | undefined]
+    >
+  >
+}
+
+export function useDataTableFilters<
+  TData,
+  TColumns extends ReadonlyArray<ColumnConfig<TData, any, any, any>>,
+  TStrategy extends FilterStrategy,
+>({
+  strategy,
+  data,
+  columnsConfig,
+  controlledState,
+  options,
+}: DataTableFiltersOptions<TData, TColumns, TStrategy>) {
   const [internalFilters, setInternalFilters] = useState<FiltersState>([])
   const [filters, setFilters] = controlledState ?? [
     internalFilters,
     setInternalFilters,
   ]
 
-  // console.log('Filters:', print(filters))
+  // Convert ColumnConfig to Column, applying options and faceted options if provided
+  const columns = useMemo(() => {
+    const enhancedConfigs = columnsConfig.map((config) => {
+      if (
+        options &&
+        (config.type === 'option' || config.type === 'multiOption')
+      ) {
+        const optionsInput = options[config.id as OptionColumnIds<TColumns>]
 
-  useEffect(() => {
-    console.log('[useDataTableFilters] Filters:', print(filters))
-  }, [filters])
+        if (!optionsInput) return config
 
-  // This useMemo call ensures that createColumns() only recomputes when data or config.columns change.
-  const columns = useMemo(() => {
-    console.log('[useDataTableFilters] Computing columns')
-    return createColumns(data, columnsConfig)
-  }, [data, columnsConfig])
+        if (isColumnOptionArray(optionsInput)) {
+          return { ...config, options: optionsInput }
+        }
+
+        if (
+          isColumnOptionArray(optionsInput[0]) &&
+          isColumnOptionMap(optionsInput[1])
+        ) {
+          return {
+            ...config,
+            options: optionsInput[0],
+            facetedOptions: optionsInput[1],
+          }
+        }
+      }
+
+      return config
+    })
+    return createColumns(data, enhancedConfigs, strategy)
+  }, [data, columnsConfig, options, strategy])
 
   const actions: DataTableFilterActions = useMemo(
     () => ({
@@ -111,12 +147,9 @@ export function useDataTableFilters<TData>(
       ) {
         if (column.type === 'option') {
           setFilters((prev) => {
-            // Does column already have a filter?
-            const filter = prev.find((f) => f.columnId === column.id) // as FilterModel<'option'> | undefined
-
+            const filter = prev.find((f) => f.columnId === column.id)
             const isColumnFiltered = filter && filter.values.length > 0
             if (!isColumnFiltered) {
-              // Add a new filter
               return [
                 ...prev,
                 {
@@ -129,8 +162,6 @@ export function useDataTableFilters<TData>(
                 },
               ]
             }
-
-            // Column already has a filter - update it
             const oldValues = filter.values
             const newValues = addUniq(filter.values, values)
             const newOperator = determineNewOperator(
@@ -139,7 +170,6 @@ export function useDataTableFilters<TData>(
               newValues,
               filter.operator,
             )
-
             return prev.map((f) =>
               f.columnId === column.id
                 ? {
@@ -150,18 +180,13 @@ export function useDataTableFilters<TData>(
                 : f,
             )
           })
-
           return
         }
-
         if (column.type === 'multiOption') {
           setFilters((prev) => {
-            // Does column already have a filter?
-            const filter = prev.find((f) => f.columnId === column.id) // as FilterModel<'multiOption'> | undefined
-
+            const filter = prev.find((f) => f.columnId === column.id)
             const isColumnFiltered = filter && filter.values.length > 0
             if (!isColumnFiltered) {
-              // Add a new filter
               return [
                 ...prev,
                 {
@@ -174,8 +199,6 @@ export function useDataTableFilters<TData>(
                 },
               ]
             }
-
-            // Column already has a filter - update it
             const oldValues = filter.values
             const newValues = addUniq(filter.values, values)
             const newOperator = determineNewOperator(
@@ -184,12 +207,9 @@ export function useDataTableFilters<TData>(
               newValues,
               filter.operator,
             )
-
-            // Remove filter if it's empty now
             if (newValues.length === 0) {
               return prev.filter((f) => f.columnId !== column.id)
             }
-
             return prev.map((f) =>
               f.columnId === column.id
                 ? {
@@ -200,10 +220,8 @@ export function useDataTableFilters<TData>(
                 : f,
             )
           })
-
           return
         }
-
         throw new Error(
           '[data-table-filter] addFilterValue() is only supported for option columns',
         )
@@ -214,31 +232,22 @@ export function useDataTableFilters<TData>(
       ) {
         if (column.type === 'option') {
           setFilters((prev) => {
-            // Does column already have a filter?
-            const filter = prev.find((f) => f.columnId === column.id) // as FilterModel<'option'> | undefined
-
+            const filter = prev.find((f) => f.columnId === column.id)
             const isColumnFiltered = filter && filter.values.length > 0
             if (!isColumnFiltered) {
-              // Add a new filter
               return [...prev]
             }
-
-            // Column already has a filter - update it
             const newValues = removeUniq(filter.values, value)
             const oldValues = filter.values
-
             const newOperator = determineNewOperator(
               'option',
               oldValues,
               newValues,
               filter.operator,
             )
-
-            // Remove filter if it's empty now
             if (newValues.length === 0) {
               return prev.filter((f) => f.columnId !== column.id)
             }
-
             return prev.map((f) =>
               f.columnId === column.id
                 ? {
@@ -249,37 +258,26 @@ export function useDataTableFilters<TData>(
                 : f,
             )
           })
-
           return
         }
-
         if (column.type === 'multiOption') {
           setFilters((prev) => {
-            // Does column already have a filter?
-            const filter = prev.find((f) => f.columnId === column.id) // as FilterModel<'multiOption'> | undefined
-
+            const filter = prev.find((f) => f.columnId === column.id)
             const isColumnFiltered = filter && filter.values.length > 0
             if (!isColumnFiltered) {
-              // Do nothing if column is not filtered
               return [...prev]
             }
-
-            // Column already has a filter - update it
             const newValues = removeUniq(filter.values, value)
             const oldValues = filter.values
-
             const newOperator = determineNewOperator(
               'multiOption',
               oldValues,
               newValues,
               filter.operator,
             )
-
-            // Remove filter if it's empty now
             if (newValues.length === 0) {
               return prev.filter((f) => f.columnId !== column.id)
             }
-
             return prev.map((f) =>
               f.columnId === column.id
                 ? {
@@ -290,34 +288,25 @@ export function useDataTableFilters<TData>(
                 : f,
             )
           })
-
           return
         }
-
         throw new Error(
           '[data-table-filter] removeFilterValue() is only supported for option columns',
         )
       },
-
       setFilterValue<TData, TType extends ColumnDataType>(
         column: ColumnConfig<TData, TType>,
         values: FilterModel<TType>['values'],
       ) {
-        console.log('here!')
         setFilters((prev) => {
-          // Does this column already have a filter?
           const filter = prev.find((f) => f.columnId === column.id)
           const isColumnFiltered = filter && filter.values.length > 0
-
           const newValues =
             column.type === 'number'
               ? createNumberFilterValue(values as number[])
               : uniq(values)
-
           if (newValues.length === 0) return prev
-
           if (!isColumnFiltered) {
-            // Add a new filter
             return [
               ...prev,
               {
@@ -330,8 +319,6 @@ export function useDataTableFilters<TData>(
               },
             ]
           }
-
-          // Column already has a filter - override it
           const oldValues = filter.values
           const newOperator = determineNewOperator(
             column.type,
@@ -339,13 +326,11 @@ export function useDataTableFilters<TData>(
             newValues,
             filter.operator,
           )
-
           const newFilter = {
             columnId: column.id,
             operator: newOperator,
             values: newValues as any,
           } satisfies FilterModel<TType>
-
           return prev.map((f) => (f.columnId === column.id ? newFilter : f))
         })
       },
@@ -367,48 +352,62 @@ export function useDataTableFilters<TData>(
     [setFilters],
   )
 
-  return { columns, filters, actions }
+  return { columns, filters, actions, strategy } // columns is Column<TData>[]
 }
 
 interface DataTableFilterProps<TData> {
   columns: Column<TData>[]
   filters: FiltersState
   actions: DataTableFilterActions
+  strategy: FilterStrategy
 }
 
 export function DataTableFilter<TData>({
   columns,
   filters,
   actions,
+  strategy,
 }: DataTableFilterProps<TData>) {
-  // const isMobile = useIsMobile()
-  // if (isMobile) {
-  //   return (
-  //     <div className="flex w-full items-start justify-between gap-2">
-  //       <div className="flex gap-1">
-  //         <FilterSelector
-  //           filters={filters}
-  //           columns={columns}
-  //           actions={actions}
-  //         />
-  //         <FilterActions filters={filters} actions={actions} />
-  //       </div>
-  //       <ActiveFiltersMobileContainer>
-  //         <ActiveFilters
-  //           columns={columns}
-  //           filters={filters}
-  //           actions={actions}
-  //         />
-  //       </ActiveFiltersMobileContainer>
-  //     </div>
-  //   )
-  // }
+  const isMobile = useIsMobile()
+  if (isMobile) {
+    return (
+      <div className="flex w-full items-start justify-between gap-2">
+        <div className="flex gap-1">
+          <FilterSelector
+            columns={columns}
+            filters={filters}
+            actions={actions}
+            strategy={strategy}
+          />
+          <FilterActions hasFilters={filters.length > 0} actions={actions} />
+        </div>
+        <ActiveFiltersMobileContainer>
+          <ActiveFilters
+            columns={columns}
+            filters={filters}
+            actions={actions}
+            strategy={strategy}
+          />
+        </ActiveFiltersMobileContainer>
+      </div>
+    )
+  }
 
   return (
     <div className="flex w-full items-start justify-between gap-2">
       <div className="flex md:flex-wrap gap-2 w-full flex-1">
-        <FilterSelector columns={columns} filters={filters} actions={actions} />
-        <ActiveFilters columns={columns} filters={filters} actions={actions} />
+        <FilterSelector
+          columns={columns}
+          filters={filters}
+          actions={actions}
+          strategy={strategy}
+        />
+        <ActiveFilters
+          columns={columns}
+          filters={filters}
+          actions={actions}
+          strategy={strategy}
+        />
       </div>
       <FilterActions hasFilters={filters.length > 0} actions={actions} />
     </div>
@@ -438,6 +437,7 @@ interface FilterSelectorProps<TData> {
   filters: FiltersState
   columns: Column<TData>[]
   actions: DataTableFilterActions
+  strategy: FilterStrategy
 }
 
 export const FilterSelector = memo(__FilterSelector) as typeof __FilterSelector
@@ -446,6 +446,7 @@ function __FilterSelector<TData>({
   filters,
   columns,
   actions,
+  strategy,
 }: FilterSelectorProps<TData>) {
   const [open, setOpen] = useState(false)
   const [value, setValue] = useState('')
@@ -478,6 +479,7 @@ function __FilterSelector<TData>({
           filter={filter!}
           column={column as Column<TData, ColumnDataType>}
           actions={actions}
+          strategy={strategy}
         />
       ) : (
         <Command loop>
@@ -594,12 +596,14 @@ interface ActiveFiltersProps<TData> {
   columns: Column<TData>[]
   filters: FiltersState
   actions: DataTableFilterActions
+  strategy: FilterStrategy
 }
 
 export function ActiveFilters<TData>({
   columns,
   filters,
   actions,
+  strategy,
 }: ActiveFiltersProps<TData>) {
   return (
     <>
@@ -617,6 +621,7 @@ export function ActiveFilters<TData>({
             filter={filter}
             column={column}
             actions={actions}
+            strategy={strategy}
           />
         )
       })}
@@ -628,6 +633,7 @@ interface ActiveFilterProps<TData, TType extends ColumnDataType> {
   filter: FilterModel<TType>
   column: Column<TData, TType>
   actions: DataTableFilterActions
+  strategy: FilterStrategy
 }
 
 // Generic render function for a filter with type-safe value
@@ -635,6 +641,7 @@ export function ActiveFilter<TData, TType extends ColumnDataType>({
   filter,
   column,
   actions,
+  strategy,
 }: ActiveFilterProps<TData, TType>) {
   return (
     <div className="flex h-7 items-center rounded-2xl border border-border bg-background shadow-xs text-xs">
@@ -642,7 +649,12 @@ export function ActiveFilter<TData, TType extends ColumnDataType>({
       <Separator orientation="vertical" />
       <FilterOperator filter={filter} column={column} actions={actions} />
       <Separator orientation="vertical" />
-      <FilterValue filter={filter} column={column} actions={actions} />
+      <FilterValue
+        filter={filter}
+        column={column}
+        actions={actions}
+        strategy={strategy}
+      />
       <Separator orientation="vertical" />
       <Button
         variant="ghost"
@@ -981,6 +993,7 @@ interface FilterValueProps<TData, TType extends ColumnDataType> {
   filter: FilterModel<TType>
   column: Column<TData, TType>
   actions: DataTableFilterActions
+  strategy: FilterStrategy
 }
 
 export const FilterValue = memo(__FilterValue) as typeof __FilterValue
@@ -989,6 +1002,7 @@ function __FilterValue<TData, TType extends ColumnDataType>({
   filter,
   column,
   actions,
+  strategy,
 }: FilterValueProps<TData, TType>) {
   // console.log('[FilterValue] Rendering')
   useEffect(() => {
@@ -1019,6 +1033,7 @@ function __FilterValue<TData, TType extends ColumnDataType>({
           filter={filter}
           column={column}
           actions={actions}
+          strategy={strategy}
         />
       </PopoverContent>
     </Popover>
@@ -1276,6 +1291,7 @@ interface FilterValueControllerProps<TData, TType extends ColumnDataType> {
   filter: FilterModel<TType>
   column: Column<TData, TType>
   actions: DataTableFilterActions
+  strategy: FilterStrategy
 }
 
 export const FilterValueController = memo(
@@ -1286,6 +1302,7 @@ function __FilterValueController<TData, TType extends ColumnDataType>({
   filter,
   column,
   actions,
+  strategy,
 }: FilterValueControllerProps<TData, TType>) {
   switch (column.type) {
     case 'option':
@@ -1294,6 +1311,7 @@ function __FilterValueController<TData, TType extends ColumnDataType>({
           filter={filter as FilterModel<'option'>}
           column={column as Column<TData, 'option'>}
           actions={actions}
+          strategy={strategy}
         />
       )
     case 'multiOption':
@@ -1302,6 +1320,7 @@ function __FilterValueController<TData, TType extends ColumnDataType>({
           filter={filter as FilterModel<'multiOption'>}
           column={column as Column<TData, 'multiOption'>}
           actions={actions}
+          strategy={strategy}
         />
       )
     case 'date':
@@ -1310,6 +1329,7 @@ function __FilterValueController<TData, TType extends ColumnDataType>({
           filter={filter as FilterModel<'date'>}
           column={column as Column<TData, 'date'>}
           actions={actions}
+          strategy={strategy}
         />
       )
     case 'text':
@@ -1318,6 +1338,7 @@ function __FilterValueController<TData, TType extends ColumnDataType>({
           filter={filter as FilterModel<'text'>}
           column={column as Column<TData, 'text'>}
           actions={actions}
+          strategy={strategy}
         />
       )
     case 'number':
@@ -1326,6 +1347,7 @@ function __FilterValueController<TData, TType extends ColumnDataType>({
           filter={filter as FilterModel<'number'>}
           column={column as Column<TData, 'number'>}
           actions={actions}
+          strategy={strategy}
         />
       )
     default:
@@ -1337,6 +1359,7 @@ export function FilterValueOptionController<TData>({
   filter,
   column,
   actions,
+  strategy,
 }: FilterValueControllerProps<TData, 'option'>) {
   const options = useMemo(() => column.getOptions(), [column])
   const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])
@@ -1354,7 +1377,7 @@ export function FilterValueOptionController<TData>({
         <CommandGroup>
           {options.map((v) => {
             const checked = Boolean(filter?.values.includes(v.value))
-            const count = optionsCount.get(v.value) ?? 0
+            const count = optionsCount?.get(v.value) ?? 0
 
             return (
               <CommandItem
@@ -1379,6 +1402,7 @@ export function FilterValueOptionController<TData>({
                     {v.label}
                     <sup
                       className={cn(
+                        !optionsCount && 'hidden',
                         'ml-0.5 tabular-nums tracking-tight text-muted-foreground',
                         count === 0 && 'slashed-zero',
                       )}
@@ -1400,6 +1424,7 @@ export function FilterValueMultiOptionController<TData>({
   filter,
   column,
   actions,
+  strategy,
 }: FilterValueControllerProps<TData, 'multiOption'>) {
   const options = useMemo(() => column.getOptions(), [column])
   const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])
@@ -1418,7 +1443,7 @@ export function FilterValueMultiOptionController<TData>({
         <CommandGroup>
           {options.map((v) => {
             const checked = Boolean(filter?.values?.includes(v.value))
-            const count = optionsCount.get(v.value) ?? 0
+            const count = optionsCount?.get(v.value) ?? 0
 
             return (
               <CommandItem
@@ -1443,6 +1468,7 @@ export function FilterValueMultiOptionController<TData>({
                     {v.label}
                     <sup
                       className={cn(
+                        !optionsCount && 'hidden',
                         'ml-0.5 tabular-nums tracking-tight text-muted-foreground',
                         count === 0 && 'slashed-zero',
                       )}
diff --git a/apps/web/registry/data-table-filter-v2/lib/array.ts b/apps/web/registry/data-table-filter-v2/lib/array.ts
index bd562eb6..0168a7cd 100644
--- a/apps/web/registry/data-table-filter-v2/lib/array.ts
+++ b/apps/web/registry/data-table-filter-v2/lib/array.ts
@@ -2,8 +2,125 @@ export function intersection<T>(a: T[], b: T[]): T[] {
   return a.filter((x) => b.includes(x))
 }
 
-export function uniq<T>(a: T[]): T[] {
-  return Array.from(new Set(a))
+/**
+ * Computes a stable hash string for any value using deep inspection.
+ * This function recursively builds a string for primitives, arrays, and objects.
+ * It uses a cache (WeakMap) to avoid rehashing the same object twice, which is
+ * particularly beneficial if an object appears in multiple places.
+ */
+function deepHash(value: any, cache = new WeakMap<object, string>()): string {
+  // Handle primitives and null/undefined.
+  if (value === null) return 'null'
+  if (value === undefined) return 'undefined'
+  const type = typeof value
+  if (type === 'number' || type === 'boolean' || type === 'string') {
+    return `${type}:${value.toString()}`
+  }
+  if (type === 'function') {
+    // Note: using toString for functions.
+    return `function:${value.toString()}`
+  }
+
+  // For objects and arrays, use caching to avoid repeated work.
+  if (type === 'object') {
+    // If we’ve seen this object before, return the cached hash.
+    if (cache.has(value)) {
+      return cache.get(value)!
+    }
+    let hash: string
+    if (Array.isArray(value)) {
+      // Compute hash for each element in order.
+      hash = `array:[${value.map((v) => deepHash(v, cache)).join(',')}]`
+    } else {
+      // For objects, sort keys to ensure the representation is stable.
+      const keys = Object.keys(value).sort()
+      const props = keys
+        .map((k) => `${k}:${deepHash(value[k], cache)}`)
+        .join(',')
+      hash = `object:{${props}}`
+    }
+    cache.set(value, hash)
+    return hash
+  }
+
+  // Fallback if no case matched.
+  return `${type}:${value.toString()}`
+}
+
+/**
+ * Performs deep equality check for any two values.
+ * This recursively checks primitives, arrays, and plain objects.
+ */
+function deepEqual(a: any, b: any): boolean {
+  // Check strict equality first.
+  if (a === b) return true
+  // If types differ, they’re not equal.
+  if (typeof a !== typeof b) return false
+  if (a === null || b === null || a === undefined || b === undefined)
+    return false
+
+  // Check arrays.
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) return false
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return false
+    }
+    return true
+  }
+
+  // Check objects.
+  if (typeof a === 'object') {
+    if (typeof b !== 'object') return false
+    const aKeys = Object.keys(a).sort()
+    const bKeys = Object.keys(b).sort()
+    if (aKeys.length !== bKeys.length) return false
+    for (let i = 0; i < aKeys.length; i++) {
+      if (aKeys[i] !== bKeys[i]) return false
+      if (!deepEqual(a[aKeys[i]], b[bKeys[i]])) return false
+    }
+    return true
+  }
+
+  // For any other types (should be primitives by now), use strict equality.
+  return false
+}
+
+/**
+ * Returns a new array containing only the unique values from the input array.
+ * Uniqueness is determined by deep equality.
+ *
+ * @param arr - The array of values to be filtered.
+ * @returns A new array with duplicates removed.
+ */
+export function uniq<T>(arr: T[]): T[] {
+  // Use a Map where key is the deep hash and value is an array of items sharing the same hash.
+  const seen = new Map<string, T[]>()
+  const result: T[] = []
+
+  for (const item of arr) {
+    const hash = deepHash(item)
+    if (seen.has(hash)) {
+      // There is a potential duplicate; check the stored items with the same hash.
+      const itemsWithHash = seen.get(hash)!
+      let duplicateFound = false
+      for (const existing of itemsWithHash) {
+        if (deepEqual(existing, item)) {
+          duplicateFound = true
+          break
+        }
+      }
+      if (!duplicateFound) {
+        itemsWithHash.push(item)
+        result.push(item)
+      }
+    } else {
+      // First time this hash appears.
+      seen.set(hash, [item])
+      result.push(item)
+    }
+  }
+
+  return result
 }
 
 export function take<T>(a: T[], n: number): T[] {
diff --git a/apps/web/registry/data-table-filter-v2/lib/filters-tst.ts b/apps/web/registry/data-table-filter-v2/lib/filters-tst.ts
index ceee94d6..43bc1aa7 100644
--- a/apps/web/registry/data-table-filter-v2/lib/filters-tst.ts
+++ b/apps/web/registry/data-table-filter-v2/lib/filters-tst.ts
@@ -2,11 +2,16 @@ import type { ColumnDef, ColumnFiltersState } from '@tanstack/react-table'
 import { isAnyOf } from './array'
 import { __multiOptionFilterFn, __optionFilterFn, filterFn } from './filter-fns'
 import { isColumnOption, isColumnOptionArray, isStringArray } from './filters'
-import type { ColumnConfig, FilterModel, FiltersState } from './filters.types'
+import type {
+  Column,
+  ColumnConfig,
+  FilterModel,
+  FiltersState,
+} from './filters.types'
 
 interface CreateTSTColumns<TData> {
-  columns: ColumnDef<TData>[]
-  configs: ColumnConfig<TData>[]
+  columns: ColumnDef<TData, any>[]
+  configs: Column<TData>[]
 }
 
 export function createTSTColumns<TData>({
diff --git a/apps/web/registry/data-table-filter-v2/lib/filters.test.ts b/apps/web/registry/data-table-filter-v2/lib/filters.test.ts
deleted file mode 100644
index e148ce91..00000000
--- a/apps/web/registry/data-table-filter-v2/lib/filters.test.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {
-  type DataTableFilterConfig,
-  createColumnConfigHelper,
-} from '@/registry/data-table-filter-v2/lib/filters'
-import { CircleDotDashedIcon } from 'lucide-react'
-
-type Issue = {
-  id: string
-  title: string
-  description?: string
-  status: 'todo' | 'in progress' | 'done'
-  startDate?: Date
-  endDate?: Date
-  estimatedHours?: number
-  foo: {
-    bar: string
-  }
-}
-
-const helper = createColumnConfigHelper<Issue>()
-
-const columns = [
-  helper.accessor((row) => row.description, {
-    id: 'description',
-    displayName: 'Description',
-    icon: CircleDotDashedIcon,
-    type: 'text',
-  }),
-  helper.accessor((row) => row.status, {
-    id: 'status',
-    displayName: 'Status',
-    icon: CircleDotDashedIcon,
-    type: 'option',
-    options: [
-      { label: 'Todo', value: 'todo' },
-      { label: 'In Progress', value: 'in progress' },
-      { label: 'Done', value: 'done' },
-    ],
-  }),
-]
-
-const config = {
-  columns,
-} satisfies DataTableFilterConfig<Issue>
diff --git a/apps/web/registry/data-table-filter-v2/lib/filters.ts b/apps/web/registry/data-table-filter-v2/lib/filters.ts
index ef3281d7..3815ad74 100644
--- a/apps/web/registry/data-table-filter-v2/lib/filters.ts
+++ b/apps/web/registry/data-table-filter-v2/lib/filters.ts
@@ -1,3 +1,4 @@
+import type { LucideIcon } from 'lucide-react'
 import { isAnyOf, uniq } from './array'
 import type {
   Column,
@@ -10,25 +11,186 @@ import type {
   FilterDetails,
   FilterOperatorTarget,
   FilterOperators,
+  FilterStrategy,
   FilterTypeOperatorDetails,
   FilterValues,
   Nullable,
+  TAccessorFn,
+  TOrderFn,
+  TTransformOptionFn,
 } from './filters.types'
 import { memo } from './memo'
 
-export function createColumnConfigHelper<TData>(): ColumnConfigHelper<TData> {
+class ColumnConfigBuilder<
+  TData,
+  TType extends ColumnDataType = any,
+  TVal = unknown,
+  TId extends string = string, // Add TId generic
+> {
+  private config: Partial<ColumnConfig<TData, TType, TVal, TId>>
+
+  constructor(type: TType) {
+    this.config = { type } as Partial<ColumnConfig<TData, TType, TVal, TId>>
+  }
+
+  private clone(): ColumnConfigBuilder<TData, TType, TVal, TId> {
+    const newInstance = new ColumnConfigBuilder<TData, TType, TVal, TId>(
+      this.config.type as TType,
+    )
+    newInstance.config = { ...this.config }
+    return newInstance
+  }
+
+  id<TNewId extends string>(
+    value: TNewId,
+  ): ColumnConfigBuilder<TData, TType, TVal, TNewId> {
+    const newInstance = this.clone() as any // We'll refine this
+    newInstance.config.id = value
+    return newInstance as ColumnConfigBuilder<TData, TType, TVal, TNewId>
+  }
+
+  accessor<TNewVal>(
+    accessor: TAccessorFn<TData, TNewVal>,
+  ): ColumnConfigBuilder<TData, TType, TNewVal, TId> {
+    const newInstance = this.clone() as any
+    newInstance.config.accessor = accessor
+    return newInstance as ColumnConfigBuilder<TData, TType, TNewVal, TId>
+  }
+
+  displayName(value: string): ColumnConfigBuilder<TData, TType, TVal, TId> {
+    const newInstance = this.clone()
+    newInstance.config.displayName = value
+    return newInstance
+  }
+
+  icon(value: any): ColumnConfigBuilder<TData, TType, TVal, TId> {
+    const newInstance = this.clone()
+    newInstance.config.icon = value
+    return newInstance
+  }
+
+  min(
+    value: number,
+  ): ColumnConfigBuilder<
+    TData,
+    TType extends 'number' ? TType : never,
+    TVal,
+    TId
+  > {
+    if (this.config.type !== 'number') {
+      throw new Error('min() is only applicable to number columns')
+    }
+    const newInstance = this.clone() as any
+    newInstance.config.min = value
+    return newInstance
+  }
+
+  max(
+    value: number,
+  ): ColumnConfigBuilder<
+    TData,
+    TType extends 'number' ? TType : never,
+    TVal,
+    TId
+  > {
+    if (this.config.type !== 'number') {
+      throw new Error('max() is only applicable to number columns')
+    }
+    const newInstance = this.clone() as any
+    newInstance.config.max = value
+    return newInstance
+  }
+
+  options(
+    value: ColumnOption[],
+  ): ColumnConfigBuilder<
+    TData,
+    TType extends 'option' | 'multiOption' ? TType : never,
+    TVal,
+    TId
+  > {
+    if (!isAnyOf(this.config.type, ['option', 'multiOption'])) {
+      throw new Error(
+        'options() is only applicable to option or multiOption columns',
+      )
+    }
+    const newInstance = this.clone() as any
+    newInstance.config.options = value
+    return newInstance
+  }
+
+  transformOptionFn(
+    fn: TTransformOptionFn<TVal>,
+  ): ColumnConfigBuilder<
+    TData,
+    TType extends 'option' | 'multiOption' ? TType : never,
+    TVal,
+    TId
+  > {
+    if (!isAnyOf(this.config.type, ['option', 'multiOption'])) {
+      throw new Error(
+        'transformOptionFn() is only applicable to option or multiOption columns',
+      )
+    }
+    const newInstance = this.clone() as any
+    newInstance.config.transformOptionFn = fn
+    return newInstance
+  }
+
+  orderFn(
+    fn: TOrderFn<TVal>,
+  ): ColumnConfigBuilder<
+    TData,
+    TType extends 'option' | 'multiOption' ? TType : never,
+    TVal,
+    TId
+  > {
+    if (!isAnyOf(this.config.type, ['option', 'multiOption'])) {
+      throw new Error(
+        'orderFn() is only applicable to option or multiOption columns',
+      )
+    }
+    const newInstance = this.clone() as any
+    newInstance.config.orderFn = fn
+    return newInstance
+  }
+
+  build(): ColumnConfig<TData, TType, TVal, TId> {
+    if (!this.config.id) throw new Error('id is required')
+    if (!this.config.accessor) throw new Error('accessor is required')
+    if (!this.config.displayName) throw new Error('displayName is required')
+    if (!this.config.icon) throw new Error('icon is required')
+    return this.config as ColumnConfig<TData, TType, TVal, TId>
+  }
+}
+
+// Update the helper interface
+interface FluentColumnConfigHelper<TData> {
+  text: () => ColumnConfigBuilder<TData, 'text', string>
+  number: () => ColumnConfigBuilder<TData, 'number', number>
+  date: () => ColumnConfigBuilder<TData, 'date', Date>
+  option: () => ColumnConfigBuilder<TData, 'option', string>
+  multiOption: () => ColumnConfigBuilder<TData, 'multiOption', string[]>
+}
+
+// Factory function remains mostly the same
+export function createColumnConfigHelper<
+  TData,
+>(): FluentColumnConfigHelper<TData> {
   return {
-    accessor: (accessor, config) =>
-      ({
-        ...config,
-        accessor,
-      }) as any,
+    text: () => new ColumnConfigBuilder<TData, 'text', string>('text'),
+    number: () => new ColumnConfigBuilder<TData, 'number', number>('number'),
+    date: () => new ColumnConfigBuilder<TData, 'date', Date>('date'),
+    option: () => new ColumnConfigBuilder<TData, 'option', string>('option'),
+    multiOption: () =>
+      new ColumnConfigBuilder<TData, 'multiOption', string[]>('multiOption'),
   }
 }
 
 export function getColumnOptions<TData, TType extends ColumnDataType, TVal>(
   column: ColumnConfig<TData, TType, TVal>,
   data: TData[],
+  strategy: FilterStrategy,
 ): ColumnOption[] {
   if (!isAnyOf(column.type, ['option', 'multiOption'])) {
     console.warn(
@@ -37,6 +199,10 @@ export function getColumnOptions<TData, TType extends ColumnDataType, TVal>(
     return []
   }
 
+  if (strategy === 'server' && !column.options) {
+    throw new Error('column options are required for server-side filtering')
+  }
+
   if (column.options) {
     return column.options
   }
@@ -136,16 +302,19 @@ export function getFacetedUniqueValues<
 >(
   column: ColumnConfig<TData, TType, TVal>,
   values: string[] | ColumnOption[],
-): Map<string, number> {
-  // console.time('getFacetedUniqueValues')
+  strategy: FilterStrategy,
+): Map<string, number> | undefined {
   if (!isAnyOf(column.type, ['option', 'multiOption'])) {
-    // console.timeEnd('getFacetedUniqueValues')
-    // console.warn(
-    //   'Faceted unique values can only be retrieved for option and multiOption columns',
-    // )
+    console.warn(
+      'Faceted unique values can only be retrieved for option and multiOption columns',
+    )
     return new Map<string, number>()
   }
 
+  if (strategy === 'server') {
+    return column.facetedOptions
+  }
+
   const acc = new Map<string, number>()
 
   if (isColumnOptionArray(values)) {
@@ -160,8 +329,6 @@ export function getFacetedUniqueValues<
     }
   }
 
-  // console.timeEnd('getFacetedUniqueValues')
-
   return acc
 }
 
@@ -192,30 +359,34 @@ export function getFacetedMinMaxValues<
 
 export function createColumns<TData>(
   data: TData[],
-  columnConfigs: ColumnConfig<TData>[],
+  columnConfigs: ReadonlyArray<ColumnConfig<TData, any, any, any>>,
+  strategy: FilterStrategy,
 ): Column<TData>[] {
   return columnConfigs.map((columnConfig) => {
     const getOptions: () => ColumnOption[] = memo(
-      () => [data],
-      () => getColumnOptions(columnConfig, data),
+      () => [data, strategy, columnConfig.options],
+      ([data, strategy]) =>
+        getColumnOptions(columnConfig, data as any, strategy as any),
       { key: `options-${columnConfig.id}` },
     )
 
     const getValues: () => ElementType<NonNullable<any>>[] = memo(
-      () => [data],
-      () => getColumnValues(columnConfig, data),
+      () => [data, strategy],
+      () => (strategy === 'client' ? getColumnValues(columnConfig, data) : []),
       { key: `values-${columnConfig.id}` },
     )
 
-    const getUniqueValues: () => Map<string, number> = memo(
-      () => [getValues()],
-      (deps) => getFacetedUniqueValues(columnConfig, deps[0]),
+    const getUniqueValues: () => Map<string, number> | undefined = memo(
+      () => [getValues(), strategy],
+      ([values, strategy]) =>
+        getFacetedUniqueValues(columnConfig, values as any, strategy as any),
       { key: `faceted-${columnConfig.id}` },
     )
 
     const getMinMaxValues: () => number[] = memo(
-      () => [data],
-      () => getFacetedMinMaxValues(columnConfig, data),
+      () => [data, strategy],
+      () =>
+        strategy === 'client' ? getFacetedMinMaxValues(columnConfig, data) : [],
       { key: `minmax-${columnConfig.id}` },
     )
 
@@ -235,45 +406,47 @@ export function createColumns<TData>(
       _prefetchedFacetedCache: null,
     }
 
-    // Define prefetch methods with access to the column instance
-    column.prefetchOptions = async (): Promise<void> => {
-      if (!column._prefetchedOptionsCache) {
-        await new Promise((resolve) =>
-          setTimeout(() => {
-            const options = getOptions()
-            column._prefetchedOptionsCache = options
-            // console.log(`Prefetched options for ${columnConfig.id}`)
-            resolve(undefined)
-          }, 0),
-        )
+    if (strategy === 'client') {
+      // Define prefetch methods with access to the column instance
+      column.prefetchOptions = async (): Promise<void> => {
+        if (!column._prefetchedOptionsCache) {
+          await new Promise((resolve) =>
+            setTimeout(() => {
+              const options = getOptions()
+              column._prefetchedOptionsCache = options
+              // console.log(`Prefetched options for ${columnConfig.id}`)
+              resolve(undefined)
+            }, 0),
+          )
+        }
       }
-    }
 
-    column.prefetchValues = async (): Promise<void> => {
-      if (!column._prefetchedValuesCache) {
-        await new Promise((resolve) =>
-          setTimeout(() => {
-            const values = getValues()
-            column._prefetchedValuesCache = values
-            // console.log(`Prefetched values for ${columnConfig.id}`)
-            resolve(undefined)
-          }, 0),
-        )
+      column.prefetchValues = async (): Promise<void> => {
+        if (!column._prefetchedValuesCache) {
+          await new Promise((resolve) =>
+            setTimeout(() => {
+              const values = getValues()
+              column._prefetchedValuesCache = values
+              // console.log(`Prefetched values for ${columnConfig.id}`)
+              resolve(undefined)
+            }, 0),
+          )
+        }
       }
-    }
 
-    column.prefetchFacetedUniqueValues = async (): Promise<void> => {
-      if (!column._prefetchedFacetedCache) {
-        await new Promise((resolve) =>
-          setTimeout(() => {
-            const facetedMap = getUniqueValues()
-            column._prefetchedFacetedCache = facetedMap
-            // console.log(
-            //   `Prefetched faceted unique values for ${columnConfig.id}`,
-            // )
-            resolve(undefined)
-          }, 0),
-        )
+      column.prefetchFacetedUniqueValues = async (): Promise<void> => {
+        if (!column._prefetchedFacetedCache) {
+          await new Promise((resolve) =>
+            setTimeout(() => {
+              const facetedMap = getUniqueValues()
+              column._prefetchedFacetedCache = facetedMap ?? null
+              // console.log(
+              //   `Prefetched faceted unique values for ${columnConfig.id}`,
+              // )
+              resolve(undefined)
+            }, 0),
+          )
+        }
       }
     }
 
@@ -733,3 +906,13 @@ export function isColumnOptionArray(value: unknown): value is ColumnOption[] {
 export function isStringArray(value: unknown): value is string[] {
   return Array.isArray(value) && value.every((v) => typeof v === 'string')
 }
+
+export function isColumnOptionMap(
+  value: unknown,
+): value is Map<string, number> {
+  return (
+    value instanceof Map &&
+    value.keys().every((k) => typeof k === 'string') &&
+    value.values().every((v) => typeof v === 'number')
+  )
+}
diff --git a/apps/web/registry/data-table-filter-v2/lib/filters.types.ts b/apps/web/registry/data-table-filter-v2/lib/filters.types.ts
index 193aa401..f497426b 100644
--- a/apps/web/registry/data-table-filter-v2/lib/filters.types.ts
+++ b/apps/web/registry/data-table-filter-v2/lib/filters.types.ts
@@ -98,13 +98,17 @@ export type ColumnConfig<
   TData,
   TType extends ColumnDataType = any,
   TVal = unknown,
+  TId extends string = string,
 > = {
-  id: string
+  id: TId
   accessor: TAccessorFn<TData, TVal>
   displayName: string
   icon: LucideIcon
   type: TType
   options?: TType extends OptionBasedColumnDataType ? ColumnOption[] : never
+  facetedOptions?: TType extends OptionBasedColumnDataType
+    ? Map<string, number>
+    : never
   min?: TType extends 'number' ? number : never
   max?: TType extends 'number' ? number : never
   transformOptionFn?: TType extends OptionBasedColumnDataType
@@ -113,6 +117,21 @@ export type ColumnConfig<
   orderFn?: TType extends OptionBasedColumnDataType ? TOrderFn<TVal> : never
 }
 
+export type OptionColumnId<T> = T extends ColumnConfig<
+  infer TData,
+  'option' | 'multiOption',
+  infer TVal,
+  infer TId
+>
+  ? TId
+  : never
+
+export type OptionColumnIds<
+  T extends ReadonlyArray<ColumnConfig<any, any, any, any>>,
+> = {
+  [K in keyof T]: OptionColumnId<T[K]>
+}[number]
+
 /*
  * Describes a helper function for creating column configurations.
  */
@@ -135,7 +154,7 @@ export type DataTableFilterConfig<TData> = {
 export type ColumnProperties<TData, TVal> = {
   getOptions: () => ColumnOption[]
   getValues: () => ElementType<NonNullable<TVal>>[]
-  getFacetedUniqueValues: () => Map<string, number>
+  getFacetedUniqueValues: () => Map<string, number> | undefined
   getFacetedMinMaxValues: () => number[]
   prefetchOptions: () => Promise<void> // Prefetch options
   prefetchValues: () => Promise<void> // Prefetch values
@@ -186,6 +205,8 @@ export interface DataTableFilterActions {
   removeAllFilters: () => void
 }
 
+export type FilterStrategy = 'client' | 'server'
+
 /* Operators for text data */
 export type TextFilterOperator = 'contains' | 'does not contain'
 
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 5339c9fd..1535af11 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -19,6 +19,7 @@
         "name": "next"
       }
     ],
+    "types": ["vitest/globals"],
     "paths": {
       "@/*": ["./*"]
     }
diff --git a/apps/web/vitest-config.mts b/apps/web/vitest-config.mts
deleted file mode 100644
index 91373a33..00000000
--- a/apps/web/vitest-config.mts
+++ /dev/null
@@ -1,10 +0,0 @@
-import react from '@vitejs/plugin-react'
-import tsconfigPaths from 'vite-tsconfig-paths'
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  plugins: [tsconfigPaths(), react()],
-  test: {
-    environment: 'jsdom',
-  },
-})
diff --git a/apps/web/vitest.config.mts b/apps/web/vitest.config.mts
new file mode 100644
index 00000000..1df3f9d9
--- /dev/null
+++ b/apps/web/vitest.config.mts
@@ -0,0 +1,19 @@
+import path from 'node:path'
+import react from '@vitejs/plugin-react'
+import tsConfigPaths from 'vite-tsconfig-paths'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  plugins: [tsConfigPaths(), react()],
+  test: {
+    include: ['./**/*.test.?(c|m)[jt]s?(x)'],
+    exclude: ['./node_modules/**/*'],
+    globals: true,
+    environment: 'jsdom',
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '.'),
+    },
+  },
+})
diff --git a/bun.lock b/bun.lock
index f17985d6..d67ae540 100644
--- a/bun.lock
+++ b/bun.lock
@@ -30,6 +30,7 @@
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-tooltip": "^1.1.8",
         "@t3-oss/env-nextjs": "^0.12.0",
+        "@tanstack/react-query": "^5.72.2",
         "@tanstack/react-table": "^8.21.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -157,13 +158,13 @@
 
     "@babel/core": ["@babel/core@7.26.10", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.10", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-module-transforms": "^7.26.0", "@babel/helpers": "^7.26.10", "@babel/parser": "^7.26.10", "@babel/template": "^7.26.9", "@babel/traverse": "^7.26.10", "@babel/types": "^7.26.10", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ=="],
 
-    "@babel/generator": ["@babel/generator@7.26.10", "", { "dependencies": { "@babel/parser": "^7.26.10", "@babel/types": "^7.26.10", "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^3.0.2" } }, "sha512-rRHT8siFIXQrAYOYqZQVsAr8vJ+cBNqcVAY6m5V8/4QqzaPl+zDBe6cLEPRDuNOUf3ww8RfJVlOyQMoSI+5Ang=="],
+    "@babel/generator": ["@babel/generator@7.27.0", "", { "dependencies": { "@babel/parser": "^7.27.0", "@babel/types": "^7.27.0", "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^3.0.2" } }, "sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw=="],
 
     "@babel/helper-annotate-as-pure": ["@babel/helper-annotate-as-pure@7.25.9", "", { "dependencies": { "@babel/types": "^7.25.9" } }, "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g=="],
 
-    "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.26.5", "", { "dependencies": { "@babel/compat-data": "^7.26.5", "@babel/helper-validator-option": "^7.25.9", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA=="],
+    "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.27.0", "", { "dependencies": { "@babel/compat-data": "^7.26.8", "@babel/helper-validator-option": "^7.25.9", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-LVk7fbXml0H2xH34dFzKQ7TDZ2G4/rVTOrq9V+icbbadjbVxxeFeDsNHv2SrZeWoA+6ZiTyWYWtScEIW07EAcA=="],
 
-    "@babel/helper-create-class-features-plugin": ["@babel/helper-create-class-features-plugin@7.26.9", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.25.9", "@babel/helper-member-expression-to-functions": "^7.25.9", "@babel/helper-optimise-call-expression": "^7.25.9", "@babel/helper-replace-supers": "^7.26.5", "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9", "@babel/traverse": "^7.26.9", "semver": "^6.3.1" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-ubbUqCofvxPRurw5L8WTsCLSkQiVpov4Qx0WMA+jUN+nXBK8ADPlJO1grkFw5CWKC5+sZSOfuGMdX1aI1iT9Sg=="],
+    "@babel/helper-create-class-features-plugin": ["@babel/helper-create-class-features-plugin@7.27.0", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.25.9", "@babel/helper-member-expression-to-functions": "^7.25.9", "@babel/helper-optimise-call-expression": "^7.25.9", "@babel/helper-replace-supers": "^7.26.5", "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9", "@babel/traverse": "^7.27.0", "semver": "^6.3.1" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-vSGCvMecvFCd/BdpGlhpXYNhhC4ccxyvQWpbGL4CWbvfEoLFWUZuSuf7s9Aw70flgQF+6vptvgK2IfOnKlRmBg=="],
 
     "@babel/helper-member-expression-to-functions": ["@babel/helper-member-expression-to-functions@7.25.9", "", { "dependencies": { "@babel/traverse": "^7.25.9", "@babel/types": "^7.25.9" } }, "sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ=="],
 
@@ -185,9 +186,9 @@
 
     "@babel/helper-validator-option": ["@babel/helper-validator-option@7.25.9", "", {}, "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw=="],
 
-    "@babel/helpers": ["@babel/helpers@7.26.10", "", { "dependencies": { "@babel/template": "^7.26.9", "@babel/types": "^7.26.10" } }, "sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g=="],
+    "@babel/helpers": ["@babel/helpers@7.27.0", "", { "dependencies": { "@babel/template": "^7.27.0", "@babel/types": "^7.27.0" } }, "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg=="],
 
-    "@babel/parser": ["@babel/parser@7.26.10", "", { "dependencies": { "@babel/types": "^7.26.10" }, "bin": "./bin/babel-parser.js" }, "sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA=="],
+    "@babel/parser": ["@babel/parser@7.27.0", "", { "dependencies": { "@babel/types": "^7.27.0" }, "bin": "./bin/babel-parser.js" }, "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg=="],
 
     "@babel/plugin-syntax-typescript": ["@babel/plugin-syntax-typescript@7.25.9", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.25.9" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ=="],
 
@@ -195,15 +196,15 @@
 
     "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.25.9", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.25.9" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg=="],
 
-    "@babel/plugin-transform-typescript": ["@babel/plugin-transform-typescript@7.26.8", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.25.9", "@babel/helper-create-class-features-plugin": "^7.25.9", "@babel/helper-plugin-utils": "^7.26.5", "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9", "@babel/plugin-syntax-typescript": "^7.25.9" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-bME5J9AC8ChwA7aEPJ6zym3w7aObZULHhbNLU0bKUhKsAkylkzUdq+0kdymh9rzi8nlNFl2bmldFBCKNJBUpuw=="],
+    "@babel/plugin-transform-typescript": ["@babel/plugin-transform-typescript@7.27.0", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.25.9", "@babel/helper-create-class-features-plugin": "^7.27.0", "@babel/helper-plugin-utils": "^7.26.5", "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9", "@babel/plugin-syntax-typescript": "^7.25.9" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-fRGGjO2UEGPjvEcyAZXRXAS8AfdaQoq7HnxAbJoAoW10B9xOKesmmndJv+Sym2a+9FHWZ9KbyyLCe9s0Sn5jtg=="],
 
-    "@babel/runtime": ["@babel/runtime@7.26.10", "", { "dependencies": { "regenerator-runtime": "^0.14.0" } }, "sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw=="],
+    "@babel/runtime": ["@babel/runtime@7.27.0", "", { "dependencies": { "regenerator-runtime": "^0.14.0" } }, "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw=="],
 
-    "@babel/template": ["@babel/template@7.26.9", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "@babel/parser": "^7.26.9", "@babel/types": "^7.26.9" } }, "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA=="],
+    "@babel/template": ["@babel/template@7.27.0", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "@babel/parser": "^7.27.0", "@babel/types": "^7.27.0" } }, "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA=="],
 
-    "@babel/traverse": ["@babel/traverse@7.26.10", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.10", "@babel/parser": "^7.26.10", "@babel/template": "^7.26.9", "@babel/types": "^7.26.10", "debug": "^4.3.1", "globals": "^11.1.0" } }, "sha512-k8NuDrxr0WrPH5Aupqb2LCVURP/S0vBEn5mK6iH+GIYob66U5EtoZvcdudR2jQ4cmTwhEwW1DLB+Yyas9zjF6A=="],
+    "@babel/traverse": ["@babel/traverse@7.27.0", "", { "dependencies": { "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.27.0", "@babel/parser": "^7.27.0", "@babel/template": "^7.27.0", "@babel/types": "^7.27.0", "debug": "^4.3.1", "globals": "^11.1.0" } }, "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA=="],
 
-    "@babel/types": ["@babel/types@7.26.10", "", { "dependencies": { "@babel/helper-string-parser": "^7.25.9", "@babel/helper-validator-identifier": "^7.25.9" } }, "sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ=="],
+    "@babel/types": ["@babel/types@7.27.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.25.9", "@babel/helper-validator-identifier": "^7.25.9" } }, "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg=="],
 
     "@biomejs/biome": ["@biomejs/biome@1.9.4", "", { "optionalDependencies": { "@biomejs/cli-darwin-arm64": "1.9.4", "@biomejs/cli-darwin-x64": "1.9.4", "@biomejs/cli-linux-arm64": "1.9.4", "@biomejs/cli-linux-arm64-musl": "1.9.4", "@biomejs/cli-linux-x64": "1.9.4", "@biomejs/cli-linux-x64-musl": "1.9.4", "@biomejs/cli-win32-arm64": "1.9.4", "@biomejs/cli-win32-x64": "1.9.4" }, "bin": { "biome": "bin/biome" } }, "sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog=="],
 
@@ -239,75 +240,75 @@
 
     "@csstools/css-tokenizer": ["@csstools/css-tokenizer@3.0.3", "", {}, "sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw=="],
 
-    "@emnapi/runtime": ["@emnapi/runtime@1.3.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-kEBmG8KyqtxJZv+ygbEim+KCGtIq1fC22Ms3S4ziXmYKm8uyoLX0MHONVKwp+9opg390VaKRNt4a7A9NwmpNhw=="],
+    "@emnapi/runtime": ["@emnapi/runtime@1.4.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-64WYIf4UYcdLnbKn/umDlNjQDSS8AgZrI/R9+x5ilkUVFxXcA1Ebl+gQLc/6mERA4407Xof0R7wEyEuj091CVw=="],
 
-    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.1", "", { "os": "aix", "cpu": "ppc64" }, "sha512-kfYGy8IdzTGy+z0vFGvExZtxkFlA4zAxgKEahG9KE1ScBjpQnFsNOX8KTU5ojNru5ed5CVoJYXFtoxaq5nFbjQ=="],
+    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-wCIboOL2yXZym2cgm6mlA742s9QeJ8DjGVaL39dLN4rRwrOgOyYSnOaFPhKZGLb2ngj4EyfAFjsNJwPXZvseag=="],
 
-    "@esbuild/android-arm": ["@esbuild/android-arm@0.25.1", "", { "os": "android", "cpu": "arm" }, "sha512-dp+MshLYux6j/JjdqVLnMglQlFu+MuVeNrmT5nk6q07wNhCdSnB7QZj+7G8VMUGh1q+vj2Bq8kRsuyA00I/k+Q=="],
+    "@esbuild/android-arm": ["@esbuild/android-arm@0.25.2", "", { "os": "android", "cpu": "arm" }, "sha512-NQhH7jFstVY5x8CKbcfa166GoV0EFkaPkCKBQkdPJFvo5u+nGXLEH/ooniLb3QI8Fk58YAx7nsPLozUWfCBOJA=="],
 
-    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.25.1", "", { "os": "android", "cpu": "arm64" }, "sha512-50tM0zCJW5kGqgG7fQ7IHvQOcAn9TKiVRuQ/lN0xR+T2lzEFvAi1ZcS8DiksFcEpf1t/GYOeOfCAgDHFpkiSmA=="],
+    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.25.2", "", { "os": "android", "cpu": "arm64" }, "sha512-5ZAX5xOmTligeBaeNEPnPaeEuah53Id2tX4c2CVP3JaROTH+j4fnfHCkr1PjXMd78hMst+TlkfKcW/DlTq0i4w=="],
 
-    "@esbuild/android-x64": ["@esbuild/android-x64@0.25.1", "", { "os": "android", "cpu": "x64" }, "sha512-GCj6WfUtNldqUzYkN/ITtlhwQqGWu9S45vUXs7EIYf+7rCiiqH9bCloatO9VhxsL0Pji+PF4Lz2XXCES+Q8hDw=="],
+    "@esbuild/android-x64": ["@esbuild/android-x64@0.25.2", "", { "os": "android", "cpu": "x64" }, "sha512-Ffcx+nnma8Sge4jzddPHCZVRvIfQ0kMsUsCMcJRHkGJ1cDmhe4SsrYIjLUKn1xpHZybmOqCWwB0zQvsjdEHtkg=="],
 
-    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-5hEZKPf+nQjYoSr/elb62U19/l1mZDdqidGfmFutVUjjUZrOazAtwK+Kr+3y0C/oeJfLlxo9fXb1w7L+P7E4FQ=="],
+    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-MpM6LUVTXAzOvN4KbjzU/q5smzryuoNjlriAIx+06RpecwCkL9JpenNzpKd2YMzLJFOdPqBpuub6eVRP5IgiSA=="],
 
-    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.25.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-hxVnwL2Dqs3fM1IWq8Iezh0cX7ZGdVhbTfnOy5uURtao5OIVCEyj9xIzemDi7sRvKsuSdtCAhMKarxqtlyVyfA=="],
+    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.25.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-5eRPrTX7wFyuWe8FqEFPG2cU0+butQQVNcT4sVipqjLYQjjh8a8+vUTfgBKM88ObB85ahsnTwF7PSIt6PG+QkA=="],
 
-    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.25.1", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-1MrCZs0fZa2g8E+FUo2ipw6jw5qqQiH+tERoS5fAfKnRx6NXH31tXBKI3VpmLijLH6yriMZsxJtaXUyFt/8Y4A=="],
+    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.25.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-mLwm4vXKiQ2UTSX4+ImyiPdiHjiZhIaE9QvC7sw0tZ6HoNMjYAqQpGyui5VRIi5sGd+uWq940gdCbY3VLvsO1w=="],
 
-    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.25.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-0IZWLiTyz7nm0xuIs0q1Y3QWJC52R8aSXxe40VUxm6BB1RNmkODtW6LHvWRrGiICulcX7ZvyH6h5fqdLu4gkww=="],
+    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.25.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-6qyyn6TjayJSwGpm8J9QYYGQcRgc90nmfdUb0O7pp1s4lTY+9D0H9O02v5JqGApUyiHOtkz6+1hZNvNtEhbwRQ=="],
 
-    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.25.1", "", { "os": "linux", "cpu": "arm" }, "sha512-NdKOhS4u7JhDKw9G3cY6sWqFcnLITn6SqivVArbzIaf3cemShqfLGHYMx8Xlm/lBit3/5d7kXvriTUGa5YViuQ=="],
+    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.25.2", "", { "os": "linux", "cpu": "arm" }, "sha512-UHBRgJcmjJv5oeQF8EpTRZs/1knq6loLxTsjc3nxO9eXAPDLcWW55flrMVc97qFPbmZP31ta1AZVUKQzKTzb0g=="],
 
-    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.25.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-jaN3dHi0/DDPelk0nLcXRm1q7DNJpjXy7yWaWvbfkPvI+7XNSc/lDOnCLN7gzsyzgu6qSAmgSvP9oXAhP973uQ=="],
+    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.25.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-gq/sjLsOyMT19I8obBISvhoYiZIAaGF8JpeXu1u8yPv8BE5HlWYobmlsfijFIZ9hIVGYkbdFhEqC0NvM4kNO0g=="],
 
-    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.25.1", "", { "os": "linux", "cpu": "ia32" }, "sha512-OJykPaF4v8JidKNGz8c/q1lBO44sQNUQtq1KktJXdBLn1hPod5rE/Hko5ugKKZd+D2+o1a9MFGUEIUwO2YfgkQ=="],
+    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.25.2", "", { "os": "linux", "cpu": "ia32" }, "sha512-bBYCv9obgW2cBP+2ZWfjYTU+f5cxRoGGQ5SeDbYdFCAZpYWrfjjfYwvUpP8MlKbP0nwZ5gyOU/0aUzZ5HWPuvQ=="],
 
-    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.25.1", "", { "os": "linux", "cpu": "none" }, "sha512-nGfornQj4dzcq5Vp835oM/o21UMlXzn79KobKlcs3Wz9smwiifknLy4xDCLUU0BWp7b/houtdrgUz7nOGnfIYg=="],
+    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.25.2", "", { "os": "linux", "cpu": "none" }, "sha512-SHNGiKtvnU2dBlM5D8CXRFdd+6etgZ9dXfaPCeJtz+37PIUlixvlIhI23L5khKXs3DIzAn9V8v+qb1TRKrgT5w=="],
 
-    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.25.1", "", { "os": "linux", "cpu": "none" }, "sha512-1osBbPEFYwIE5IVB/0g2X6i1qInZa1aIoj1TdL4AaAb55xIIgbg8Doq6a5BzYWgr+tEcDzYH67XVnTmUzL+nXg=="],
+    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.25.2", "", { "os": "linux", "cpu": "none" }, "sha512-hDDRlzE6rPeoj+5fsADqdUZl1OzqDYow4TB4Y/3PlKBD0ph1e6uPHzIQcv2Z65u2K0kpeByIyAjCmjn1hJgG0Q=="],
 
-    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.25.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-/6VBJOwUf3TdTvJZ82qF3tbLuWsscd7/1w+D9LH0W/SqUgM5/JJD0lrJ1fVIfZsqB6RFmLCe0Xz3fmZc3WtyVg=="],
+    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.25.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-tsHu2RRSWzipmUi9UBDEzc0nLc4HtpZEI5Ba+Omms5456x5WaNuiG3u7xh5AO6sipnJ9r4cRWQB2tUjPyIkc6g=="],
 
-    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.25.1", "", { "os": "linux", "cpu": "none" }, "sha512-nSut/Mx5gnilhcq2yIMLMe3Wl4FK5wx/o0QuuCLMtmJn+WeWYoEGDN1ipcN72g1WHsnIbxGXd4i/MF0gTcuAjQ=="],
+    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.25.2", "", { "os": "linux", "cpu": "none" }, "sha512-k4LtpgV7NJQOml/10uPU0s4SAXGnowi5qBSjaLWMojNCUICNu7TshqHLAEbkBdAszL5TabfvQ48kK84hyFzjnw=="],
 
-    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.25.1", "", { "os": "linux", "cpu": "s390x" }, "sha512-cEECeLlJNfT8kZHqLarDBQso9a27o2Zd2AQ8USAEoGtejOrCYHNtKP8XQhMDJMtthdF4GBmjR2au3x1udADQQQ=="],
+    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.25.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-GRa4IshOdvKY7M/rDpRR3gkiTNp34M0eLTaC1a08gNrh4u488aPhuZOCpkF6+2wl3zAN7L7XIpOFBhnaE3/Q8Q=="],
 
-    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.25.1", "", { "os": "linux", "cpu": "x64" }, "sha512-xbfUhu/gnvSEg+EGovRc+kjBAkrvtk38RlerAzQxvMzlB4fXpCFCeUAYzJvrnhFtdeyVCDANSjJvOvGYoeKzFA=="],
+    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.25.2", "", { "os": "linux", "cpu": "x64" }, "sha512-QInHERlqpTTZ4FRB0fROQWXcYRD64lAoiegezDunLpalZMjcUcld3YzZmVJ2H/Cp0wJRZ8Xtjtj0cEHhYc/uUg=="],
 
-    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.25.1", "", { "os": "none", "cpu": "arm64" }, "sha512-O96poM2XGhLtpTh+s4+nP7YCCAfb4tJNRVZHfIE7dgmax+yMP2WgMd2OecBuaATHKTHsLWHQeuaxMRnCsH8+5g=="],
+    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.25.2", "", { "os": "none", "cpu": "arm64" }, "sha512-talAIBoY5M8vHc6EeI2WW9d/CkiO9MQJ0IOWX8hrLhxGbro/vBXJvaQXefW2cP0z0nQVTdQ/eNyGFV1GSKrxfw=="],
 
-    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.25.1", "", { "os": "none", "cpu": "x64" }, "sha512-X53z6uXip6KFXBQ+Krbx25XHV/NCbzryM6ehOAeAil7X7oa4XIq+394PWGnwaSQ2WRA0KI6PUO6hTO5zeF5ijA=="],
+    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.25.2", "", { "os": "none", "cpu": "x64" }, "sha512-voZT9Z+tpOxrvfKFyfDYPc4DO4rk06qamv1a/fkuzHpiVBMOhpjK+vBmWM8J1eiB3OLSMFYNaOaBNLXGChf5tg=="],
 
-    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.25.1", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-Na9T3szbXezdzM/Kfs3GcRQNjHzM6GzFBeU1/6IV/npKP5ORtp9zbQjvkDJ47s6BCgaAZnnnu/cY1x342+MvZg=="],
+    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.25.2", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-dcXYOC6NXOqcykeDlwId9kB6OkPUxOEqU+rkrYVqJbK2hagWOMrsTGsMr8+rW02M+d5Op5NNlgMmjzecaRf7Tg=="],
 
-    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.25.1", "", { "os": "openbsd", "cpu": "x64" }, "sha512-T3H78X2h1tszfRSf+txbt5aOp/e7TAz3ptVKu9Oyir3IAOFPGV6O9c2naym5TOriy1l0nNf6a4X5UXRZSGX/dw=="],
+    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.25.2", "", { "os": "openbsd", "cpu": "x64" }, "sha512-t/TkWwahkH0Tsgoq1Ju7QfgGhArkGLkF1uYz8nQS/PPFlXbP5YgRpqQR3ARRiC2iXoLTWFxc6DJMSK10dVXluw=="],
 
-    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.25.1", "", { "os": "sunos", "cpu": "x64" }, "sha512-2H3RUvcmULO7dIE5EWJH8eubZAI4xw54H1ilJnRNZdeo8dTADEZ21w6J22XBkXqGJbe0+wnNJtw3UXRoLJnFEg=="],
+    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.25.2", "", { "os": "sunos", "cpu": "x64" }, "sha512-cfZH1co2+imVdWCjd+D1gf9NjkchVhhdpgb1q5y6Hcv9TP6Zi9ZG/beI3ig8TvwT9lH9dlxLq5MQBBgwuj4xvA=="],
 
-    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.25.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-GE7XvrdOzrb+yVKB9KsRMq+7a2U/K5Cf/8grVFRAGJmfADr/e/ODQ134RK2/eeHqYV5eQRFxb1hY7Nr15fv1NQ=="],
+    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.25.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-7Loyjh+D/Nx/sOTzV8vfbB3GJuHdOQyrOryFdZvPHLf42Tk9ivBU5Aedi7iyX+x6rbn2Mh68T4qq1SDqJBQO5Q=="],
 
-    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-uOxSJCIcavSiT6UnBhBzE8wy3n0hOkJsBOzy7HDAuTDE++1DJMRRVCPGisULScHL+a/ZwdXPpXD3IyFKjA7K8A=="],
+    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-WRJgsz9un0nqZJ4MfhabxaD9Ft8KioqU3JMinOTvobbX6MOSUigSBlogP8QB3uxpJDsFS6yN+3FDBdqE5lg9kg=="],
 
-    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.1", "", { "os": "win32", "cpu": "x64" }, "sha512-Y1EQdcfwMSeQN/ujR5VayLOJ1BHaK+ssyk0AEzPjC+t1lITgsnccPqFjb6V+LsTp/9Iov4ysfjxLaGJ9RPtkVg=="],
+    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.2", "", { "os": "win32", "cpu": "x64" }, "sha512-kM3HKb16VIXZyIeVrM1ygYmZBKybX8N4p754bw390wGO3Tf2j4L2/WYL+4suWujpgf6GBYs3jv7TyUivdd05JA=="],
 
     "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.5.1", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-soEIOALTfTK6EjmKMMoLugwaP0rzkad90iIWd1hMO9ARkSAyjfMfkRRhLvD5qH7vvM0Cg72pieUfR6yh6XxC4w=="],
 
     "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.1", "", {}, "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ=="],
 
-    "@eslint/config-array": ["@eslint/config-array@0.19.2", "", { "dependencies": { "@eslint/object-schema": "^2.1.6", "debug": "^4.3.1", "minimatch": "^3.1.2" } }, "sha512-GNKqxfHG2ySmJOBSHg7LxeUx4xpuCoFjacmlCoYWEbaPXLwvfIjixRI12xCQZeULksQb23uiA8F40w5TojpV7w=="],
+    "@eslint/config-array": ["@eslint/config-array@0.20.0", "", { "dependencies": { "@eslint/object-schema": "^2.1.6", "debug": "^4.3.1", "minimatch": "^3.1.2" } }, "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ=="],
 
-    "@eslint/config-helpers": ["@eslint/config-helpers@0.1.0", "", {}, "sha512-kLrdPDJE1ckPo94kmPPf9Hfd0DU0Jw6oKYrhe+pwSC0iTUInmTa+w6fw8sGgcfkFJGNdWOUeOaDM4quW4a7OkA=="],
+    "@eslint/config-helpers": ["@eslint/config-helpers@0.2.1", "", {}, "sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw=="],
 
     "@eslint/core": ["@eslint/core@0.12.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg=="],
 
-    "@eslint/eslintrc": ["@eslint/eslintrc@3.3.0", "", { "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", "espree": "^10.0.1", "globals": "^14.0.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", "js-yaml": "^4.1.0", "minimatch": "^3.1.2", "strip-json-comments": "^3.1.1" } }, "sha512-yaVPAiNAalnCZedKLdR21GOGILMLKPyqSLWaAjQFvYA2i/ciDi8ArYVr69Anohb6cH2Ukhqti4aFnYyPm8wdwQ=="],
+    "@eslint/eslintrc": ["@eslint/eslintrc@3.3.1", "", { "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", "espree": "^10.0.1", "globals": "^14.0.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", "js-yaml": "^4.1.0", "minimatch": "^3.1.2", "strip-json-comments": "^3.1.1" } }, "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ=="],
 
-    "@eslint/js": ["@eslint/js@9.22.0", "", {}, "sha512-vLFajx9o8d1/oL2ZkpMYbkLv8nDB6yaIwFNt7nI4+I80U/z03SxmfOMsLbvWr3p7C+Wnoh//aOu2pQW8cS0HCQ=="],
+    "@eslint/js": ["@eslint/js@9.24.0", "", {}, "sha512-uIY/y3z0uvOGX8cp1C2fiC4+ZmBhp6yZWkojtHL1YEMnRt1Y63HB9TM17proGEmeG7HeUY+UP36F0aknKYTpYA=="],
 
     "@eslint/object-schema": ["@eslint/object-schema@2.1.6", "", {}, "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA=="],
 
-    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.2.7", "", { "dependencies": { "@eslint/core": "^0.12.0", "levn": "^0.4.1" } }, "sha512-JubJ5B2pJ4k4yGxaNLdbjrnk9d/iDz6/q8wOilpIowd6PJPgaxCuHBnBszq7Ce2TyMrywm5r4PnKm6V3iiZF+g=="],
+    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.2.8", "", { "dependencies": { "@eslint/core": "^0.13.0", "levn": "^0.4.1" } }, "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA=="],
 
     "@floating-ui/core": ["@floating-ui/core@1.6.9", "", { "dependencies": { "@floating-ui/utils": "^0.2.9" } }, "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw=="],
 
@@ -363,13 +364,13 @@
 
     "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.33.5", "", { "os": "win32", "cpu": "x64" }, "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg=="],
 
-    "@inquirer/confirm": ["@inquirer/confirm@5.1.8", "", { "dependencies": { "@inquirer/core": "^10.1.9", "@inquirer/type": "^3.0.5" }, "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-dNLWCYZvXDjO3rnQfk2iuJNL4Ivwz/T2+C3+WnNfJKsNGSuOs3wAo2F6e0p946gtSAk31nZMfW+MRmYaplPKsg=="],
+    "@inquirer/confirm": ["@inquirer/confirm@5.1.9", "", { "dependencies": { "@inquirer/core": "^10.1.10", "@inquirer/type": "^3.0.6" }, "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-NgQCnHqFTjF7Ys2fsqK2WtnA8X1kHyInyG+nMIuHowVTIgIuS10T4AznI/PvbqSpJqjCUqNBlKGh1v3bwLFL4w=="],
 
-    "@inquirer/core": ["@inquirer/core@10.1.9", "", { "dependencies": { "@inquirer/figures": "^1.0.11", "@inquirer/type": "^3.0.5", "ansi-escapes": "^4.3.2", "cli-width": "^4.1.0", "mute-stream": "^2.0.0", "signal-exit": "^4.1.0", "wrap-ansi": "^6.2.0", "yoctocolors-cjs": "^2.1.2" }, "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-sXhVB8n20NYkUBfDYgizGHlpRVaCRjtuzNZA6xpALIUbkgfd2Hjz+DfEN6+h1BRnuxw0/P4jCIMjMsEOAMwAJw=="],
+    "@inquirer/core": ["@inquirer/core@10.1.10", "", { "dependencies": { "@inquirer/figures": "^1.0.11", "@inquirer/type": "^3.0.6", "ansi-escapes": "^4.3.2", "cli-width": "^4.1.0", "mute-stream": "^2.0.0", "signal-exit": "^4.1.0", "wrap-ansi": "^6.2.0", "yoctocolors-cjs": "^2.1.2" }, "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-roDaKeY1PYY0aCqhRmXihrHjoSW2A00pV3Ke5fTpMCkzcGF64R8e0lw3dK+eLEHwS4vB5RnW1wuQmvzoRul8Mw=="],
 
     "@inquirer/figures": ["@inquirer/figures@1.0.11", "", {}, "sha512-eOg92lvrn/aRUqbxRyvpEWnrvRuTYRifixHkYVpJiygTgVSBIHDqLh0SrMQXkafvULg3ck11V7xvR+zcgvpHFw=="],
 
-    "@inquirer/type": ["@inquirer/type@3.0.5", "", { "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-ZJpeIYYueOz/i/ONzrfof8g89kNdO2hjGuvULROo3O8rlB2CRtSseE5KeirnyE4t/thAn/EwvS/vuQeJCn+NZg=="],
+    "@inquirer/type": ["@inquirer/type@3.0.6", "", { "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-/mKVCtVpyBu3IDarv0G+59KC4stsD5mDsGpYh+GKs1NZT88Jh52+cuoA1AtLk2Q0r/quNl+1cSUyLRHBFeD0XA=="],
 
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.8", "", { "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA=="],
 
@@ -419,83 +420,83 @@
 
     "@open-draft/until": ["@open-draft/until@2.1.0", "", {}, "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg=="],
 
-    "@radix-ui/number": ["@radix-ui/number@1.1.0", "", {}, "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="],
+    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
 
-    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.1", "", {}, "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="],
+    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
 
-    "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.2", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg=="],
+    "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-2dvVU4jva0qkNZH6HHWuSz5FN5GeU5tymvCgutF8WaXz9WnD1NgUhy73cqzkjkN4Zkn8lfTPv5JIfrC221W+Nw=="],
 
-    "@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.1.3", "", { "dependencies": { "@radix-ui/react-context": "1.1.1", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Paen00T4P8L8gd9bNsRMw7Cbaz85oxiv+hzomsRZgFm2byltPFDtfcoqlWJ8GyZlIBWgLssJlzLCnKU0G0302g=="],
+    "@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.1.4", "", { "dependencies": { "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-+kBesLBzwqyDiYCtYFK+6Ktf+N7+Y6QOTUueLGLIbLZ/YeyFW6bsBGDsN+5HxHpM55C90u5fxsg0ErxzXTcwKA=="],
 
-    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.1.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-use-size": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wP0CPAHq+P5I4INKe3hJrIa1WoNqqrejzW+zoU0rOvo1b9gDEJJFl2rYfO1PYJUQCc2H1WZxIJmyv9BS8i5fLw=="],
+    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.1.5", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.3", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-use-controllable-state": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-B0gYIVxl77KYDR25AY9EGe/G//ef85RVBIxQvK+m5pxAC7XihAc/8leMHhDvjvhDu02SBSb6BuytlWr/G7F3+g=="],
 
-    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-slot": "1.1.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw=="],
+    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-slot": "1.2.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-mM2pxoQw5HJ49rkzwOs7Y6J4oYH22wS8BfK2/bBxROlI4xuR0c4jEenQP63LlTlDkO6Buj2Vt+QYAYcOgqtrXA=="],
 
-    "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw=="],
+    "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
-    "@radix-ui/react-context": ["@radix-ui/react-context@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q=="],
+    "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
 
-    "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.5", "@radix-ui/react-focus-guards": "1.1.1", "@radix-ui/react-focus-scope": "1.1.2", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-portal": "1.1.4", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-slot": "1.1.2", "@radix-ui/react-use-controllable-state": "1.1.0", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw=="],
+    "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.6", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.3", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.5", "@radix-ui/react-presence": "1.1.3", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-slot": "1.2.0", "@radix-ui/react-use-controllable-state": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-EIdma8C0C/I6kL6sO02avaCRqi3fmWJpxH6mqbVScorW6nNktzKJT/le7VPho3o/7wCsyRg3z0+Q+Obr0Gy/VQ=="],
 
-    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg=="],
+    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
 
-    "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.5", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-escape-keydown": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg=="],
+    "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7gpgMT2gyKym9Jz2ZhlRXSg2y6cNQIK8d/cqBZ0RBCaps8pFryCWXiUKI+uHGFrhMrbGUP7U6PWgiXzIxoyF3Q=="],
 
-    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-menu": "2.1.6", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-no3X7V5fD487wab/ZYSHXq3H37u4NVeLDKI/Ks724X/eEFSSEFYZxWgsIlr1UBeEyDaM29HM5x9p1Nv8DuTYPA=="],
+    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.7", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-use-controllable-state": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7/1LiuNZuCQE3IzdicGoHdQOHkS2Q08+7p8w6TXZ6ZjgAULaCI85ZY15yPl4o4FVgoKLRT43/rsfNVN8osClQQ=="],
 
-    "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg=="],
+    "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA=="],
 
-    "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA=="],
+    "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-4XaDlq0bPt7oJwR+0k0clCiCO/7lO7NKZTAaJBYxDNQT/vj4ig0/UvctrRscZaFREpRvUTkpKR96ov1e6jptQg=="],
 
-    "@radix-ui/react-id": ["@radix-ui/react-id@1.1.0", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA=="],
+    "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
 
-    "@radix-ui/react-label": ["@radix-ui/react-label@2.1.2", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw=="],
+    "@radix-ui/react-label": ["@radix-ui/react-label@2.1.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zwSQ1NzSKG95yA0tvBMgv6XPHoqapJCcg9nsUBaQQ66iRBhZNhlpaQG2ERYYX4O4stkYFK5rxj5NsWfO9CS+Hg=="],
 
-    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-dismissable-layer": "1.1.5", "@radix-ui/react-focus-guards": "1.1.1", "@radix-ui/react-focus-scope": "1.1.2", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-popper": "1.2.2", "@radix-ui/react-portal": "1.1.4", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-roving-focus": "1.1.2", "@radix-ui/react-slot": "1.1.2", "@radix-ui/react-use-callback-ref": "1.1.0", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg=="],
+    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.6", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.3", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.3", "@radix-ui/react-portal": "1.1.5", "@radix-ui/react-presence": "1.1.3", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-roving-focus": "1.1.3", "@radix-ui/react-slot": "1.2.0", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tBODsrk68rOi1/iQzbM54toFF+gSw/y+eQgttFflqlGekuSebNqvFNHjJgjqPhiMb4Fw9A0zNFly1QT6ZFdQ+Q=="],
 
-    "@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.5", "@radix-ui/react-focus-guards": "1.1.1", "@radix-ui/react-focus-scope": "1.1.2", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-popper": "1.2.2", "@radix-ui/react-portal": "1.1.4", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-slot": "1.1.2", "@radix-ui/react-use-controllable-state": "1.1.0", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg=="],
+    "@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.6", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.3", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.3", "@radix-ui/react-portal": "1.1.5", "@radix-ui/react-presence": "1.1.3", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-slot": "1.2.0", "@radix-ui/react-use-controllable-state": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-I38OYWDmJF2kbO74LX8UsFydSHWOJuQ7LxPnTefjxxvdvPLempvAnmsyX9UsBlywcbSGpRH7oMLfkUf+ij4nrw=="],
 
-    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.2", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-rect": "1.1.0", "@radix-ui/react-use-size": "1.1.0", "@radix-ui/rect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA=="],
+    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.3", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-iNb9LYUMkne9zIahukgQmHlSBp9XWGeQQ7FvUGNk45ywzOb6kQa+Ca38OphXlWDiKvyneo9S+KSJsLfLt8812A=="],
 
-    "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.4", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA=="],
+    "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.5", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ps/67ZqsFm+Mb6lSPJpfhRLrVL2i2fntgCmGMqqth4eaGUf+knAuuRtWVJrNjUhExgmdRqftSgzpf0DF0n6yXA=="],
 
-    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg=="],
+    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IrVLIhskYhH3nLvtcBLQFZr61tBG7wx7O3kEmdzcYwRGAEBmBicGGL7ATzNgruYJ3xBTbuzEEq9OXJM3PAX3tA=="],
 
-    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.0.2", "", { "dependencies": { "@radix-ui/react-slot": "1.1.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w=="],
+    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.0.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Pf/t/GkndH7CQ8wE2hbkXA+WyZ83fhQQn5DDmwDiDo6AwN/fhaH8oqZ0jRjMrO2iaMhDi6P1HRx6AZwyMinY1g=="],
 
-    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.2", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw=="],
+    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ufbpLUjZiOg4iYgb2hQrWXEPYX6jOLBbR27bDyAff5GYMRrCzcze8lukjuXVUQvJ6HZe8+oL+hhswDcjmcgVyg=="],
 
-    "@radix-ui/react-select": ["@radix-ui/react-select@2.1.6", "", { "dependencies": { "@radix-ui/number": "1.1.0", "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-dismissable-layer": "1.1.5", "@radix-ui/react-focus-guards": "1.1.1", "@radix-ui/react-focus-scope": "1.1.2", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-popper": "1.2.2", "@radix-ui/react-portal": "1.1.4", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-slot": "1.1.2", "@radix-ui/react-use-callback-ref": "1.1.0", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-visually-hidden": "1.1.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg=="],
+    "@radix-ui/react-select": ["@radix-ui/react-select@2.1.7", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.6", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.3", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.3", "@radix-ui/react-portal": "1.1.5", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-slot": "1.2.0", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-visually-hidden": "1.1.3", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-exzGIRtc7S8EIM2KjFg+7lJZsH7O7tpaBaJbBNVDnOZNhtoQ2iV+iSNfi2Wth0m6h3trJkMVvzAehB3c6xj/3Q=="],
 
-    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.2", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-oZfHcaAp2Y6KFBX6I5P1u7CQoy4lheCGiYj+pGFrHy8E/VNRb5E39TkTr3JrV520csPBTZjkuKFdEsjS5EUNKQ=="],
+    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-2omrWKJvxR0U/tkIXezcc1nFMwtLU0+b/rDK40gnzJqTLWQ/TD/D5IYVefp9sC3QWfeQbpSbEA6op9MQKyaALQ=="],
 
-    "@radix-ui/react-slider": ["@radix-ui/react-slider@1.2.3", "", { "dependencies": { "@radix-ui/number": "1.1.0", "@radix-ui/primitive": "1.1.1", "@radix-ui/react-collection": "1.1.2", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-layout-effect": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-use-size": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-nNrLAWLjGESnhqBqcCNW4w2nn7LxudyMzeB6VgdyAnFLC6kfQgnAjSL2v6UkQTnDctJBlxrmxfplWS4iYjdUTw=="],
+    "@radix-ui/react-slider": ["@radix-ui/react-slider@1.2.4", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-use-controllable-state": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Vr/OgNejNJPAghIhjS7Mf/2F/EXGDT0qgtiHf2BHz71+KqgN+jndFLKq5xAB9JOGejGzejfJLIvT04Do+yzhcg=="],
 
-    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.1.2", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ=="],
+    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.0", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w=="],
 
-    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.1.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-use-previous": "1.1.0", "@radix-ui/react-use-size": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ=="],
+    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.1.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-use-controllable-state": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-zGP6W8plLeogoeGMiTHJ/uvf+TE1C2chVsEwfP8YlvpQKJHktG+iCkUtCLGPAuDV8/qDSmIRPm4NggaTxFMVBQ=="],
 
-    "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-direction": "1.1.0", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-roving-focus": "1.1.2", "@radix-ui/react-use-controllable-state": "1.1.0" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9mFyI30cuRDImbmFF6O2KUJdgEOsGh9Vmx9x/Dh9tOhL7BngmQPQfwW4aejKm5OHpfWIdmeV6ySyuxoOGjtNng=="],
+    "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.4", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.3", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-roving-focus": "1.1.3", "@radix-ui/react-use-controllable-state": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-fuHMHWSf5SRhXke+DbHXj2wVMo+ghVH30vhX3XVacdXqDl+J4XWafMIGOOER861QpBx1jxgwKXL2dQnfrsd8MQ=="],
 
-    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.1.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.1", "@radix-ui/react-compose-refs": "1.1.1", "@radix-ui/react-context": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.5", "@radix-ui/react-id": "1.1.0", "@radix-ui/react-popper": "1.2.2", "@radix-ui/react-portal": "1.1.4", "@radix-ui/react-presence": "1.1.2", "@radix-ui/react-primitive": "2.0.2", "@radix-ui/react-slot": "1.1.2", "@radix-ui/react-use-controllable-state": "1.1.0", "@radix-ui/react-visually-hidden": "1.1.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-YAA2cu48EkJZdAMHC0dqo9kialOcRStbtiY4nJPaht7Ptrhcvpo+eDChaM6BIs8kL6a8Z5l5poiqLnXcNduOkA=="],
+    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.0", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.6", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.3", "@radix-ui/react-portal": "1.1.5", "@radix-ui/react-presence": "1.1.3", "@radix-ui/react-primitive": "2.0.3", "@radix-ui/react-slot": "1.2.0", "@radix-ui/react-use-controllable-state": "1.1.1", "@radix-ui/react-visually-hidden": "1.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-b1Sdc75s7zN9B8ONQTGBSHL3XS8+IcjcOIY51fhM4R1Hx8s0YbgqgyNZiri4qcYMVZK8hfCZVBiyCm7N9rs0rw=="],
 
-    "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw=="],
+    "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
 
-    "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.1.0", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw=="],
+    "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-YnEXIy8/ga01Y1PN0VfaNH//MhA91JlEGVBDxDzROqwrAtG5Yr2QGEPz8A/rJA3C7ZAHryOYGaUv8fLSW2H/mg=="],
 
-    "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.0", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw=="],
+    "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
 
-    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w=="],
+    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
-    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.0", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og=="],
+    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
 
-    "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.0", "", { "dependencies": { "@radix-ui/rect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ=="],
+    "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
 
-    "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.0", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw=="],
+    "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
 
-    "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.1.2", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q=="],
+    "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.1.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.0.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-oXSF3ZQRd5fvomd9hmUCb2EHSZbPp3ZSHAHJJU/DlF9XoFkJBBW8RHU/E8WEH+RbSfJd/QFA0sl8ClJXknBwHQ=="],
 
-    "@radix-ui/rect": ["@radix-ui/rect@1.1.0", "", {}, "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="],
+    "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
     "@repo/typescript-config": ["@repo/typescript-config@workspace:packages/typescript-config"],
 
@@ -503,127 +504,129 @@
 
     "@repo/web": ["@repo/web@workspace:apps/web"],
 
-    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.36.0", "", { "os": "android", "cpu": "arm" }, "sha512-jgrXjjcEwN6XpZXL0HUeOVGfjXhPyxAbbhD0BlXUB+abTOpbPiN5Wb3kOT7yb+uEtATNYF5x5gIfwutmuBA26w=="],
+    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.39.0", "", { "os": "android", "cpu": "arm" }, "sha512-lGVys55Qb00Wvh8DMAocp5kIcaNzEFTmGhfFd88LfaogYTRKrdxgtlO5H6S49v2Nd8R2C6wLOal0qv6/kCkOwA=="],
 
-    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.36.0", "", { "os": "android", "cpu": "arm64" }, "sha512-NyfuLvdPdNUfUNeYKUwPwKsE5SXa2J6bCt2LdB/N+AxShnkpiczi3tcLJrm5mA+eqpy0HmaIY9F6XCa32N5yzg=="],
+    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.39.0", "", { "os": "android", "cpu": "arm64" }, "sha512-It9+M1zE31KWfqh/0cJLrrsCPiF72PoJjIChLX+rEcujVRCb4NLQ5QzFkzIZW8Kn8FTbvGQBY5TkKBau3S8cCQ=="],
 
-    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.36.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-JQ1Jk5G4bGrD4pWJQzWsD8I1n1mgPXq33+/vP4sk8j/z/C2siRuxZtaUA7yMTf71TCZTZl/4e1bfzwUmFb3+rw=="],
+    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.39.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-lXQnhpFDOKDXiGxsU9/l8UEGGM65comrQuZ+lDcGUx+9YQ9dKpF3rSEGepyeR5AHZ0b5RgiligsBhWZfSSQh8Q=="],
 
-    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.36.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-6c6wMZa1lrtiRsbDziCmjE53YbTkxMYhhnWnSW8R/yqsM7a6mSJ3uAVT0t8Y/DGt7gxUWYuFM4bwWk9XCJrFKA=="],
+    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.39.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-mKXpNZLvtEbgu6WCkNij7CGycdw9cJi2k9v0noMb++Vab12GZjFgUXD69ilAbBh034Zwn95c2PNSz9xM7KYEAQ=="],
 
-    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.36.0", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-KXVsijKeJXOl8QzXTsA+sHVDsFOmMCdBRgFmBb+mfEb/7geR7+C8ypAml4fquUt14ZyVXaw2o1FWhqAfOvA4sg=="],
+    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.39.0", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-jivRRlh2Lod/KvDZx2zUR+I4iBfHcu2V/BA2vasUtdtTN2Uk3jfcZczLa81ESHZHPHy4ih3T/W5rPFZ/hX7RtQ=="],
 
-    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.36.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-dVeWq1ebbvByI+ndz4IJcD4a09RJgRYmLccwlQ8bPd4olz3Y213uf1iwvc7ZaxNn2ab7bjc08PrtBgMu6nb4pQ=="],
+    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.39.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-8RXIWvYIRK9nO+bhVz8DwLBepcptw633gv/QT4015CpJ0Ht8punmoHU/DuEd3iw9Hr8UwUV+t+VNNuZIWYeY7Q=="],
 
-    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.36.0", "", { "os": "linux", "cpu": "arm" }, "sha512-bvXVU42mOVcF4le6XSjscdXjqx8okv4n5vmwgzcmtvFdifQ5U4dXFYaCB87namDRKlUL9ybVtLQ9ztnawaSzvg=="],
+    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.39.0", "", { "os": "linux", "cpu": "arm" }, "sha512-mz5POx5Zu58f2xAG5RaRRhp3IZDK7zXGk5sdEDj4o96HeaXhlUwmLFzNlc4hCQi5sGdR12VDgEUqVSHer0lI9g=="],
 
-    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.36.0", "", { "os": "linux", "cpu": "arm" }, "sha512-JFIQrDJYrxOnyDQGYkqnNBtjDwTgbasdbUiQvcU8JmGDfValfH1lNpng+4FWlhaVIR4KPkeddYjsVVbmJYvDcg=="],
+    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.39.0", "", { "os": "linux", "cpu": "arm" }, "sha512-+YDwhM6gUAyakl0CD+bMFpdmwIoRDzZYaTWV3SDRBGkMU/VpIBYXXEvkEcTagw/7VVkL2vA29zU4UVy1mP0/Yw=="],
 
-    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.36.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-KqjYVh3oM1bj//5X7k79PSCZ6CvaVzb7Qs7VMWS+SlWB5M8p3FqufLP9VNp4CazJ0CsPDLwVD9r3vX7Ci4J56A=="],
+    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.39.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-EKf7iF7aK36eEChvlgxGnk7pdJfzfQbNvGV/+l98iiMwU23MwvmV0Ty3pJ0p5WQfm3JRHOytSIqD9LB7Bq7xdQ=="],
 
-    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.36.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-QiGnhScND+mAAtfHqeT+cB1S9yFnNQ/EwCg5yE3MzoaZZnIV0RV9O5alJAoJKX/sBONVKeZdMfO8QSaWEygMhw=="],
+    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.39.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-vYanR6MtqC7Z2SNr8gzVnzUul09Wi1kZqJaek3KcIlI/wq5Xtq4ZPIZ0Mr/st/sv/NnaPwy/D4yXg5x0B3aUUA=="],
 
-    "@rollup/rollup-linux-loongarch64-gnu": ["@rollup/rollup-linux-loongarch64-gnu@4.36.0", "", { "os": "linux", "cpu": "none" }, "sha512-1ZPyEDWF8phd4FQtTzMh8FQwqzvIjLsl6/84gzUxnMNFBtExBtpL51H67mV9xipuxl1AEAerRBgBwFNpkw8+Lg=="],
+    "@rollup/rollup-linux-loongarch64-gnu": ["@rollup/rollup-linux-loongarch64-gnu@4.39.0", "", { "os": "linux", "cpu": "none" }, "sha512-NMRUT40+h0FBa5fb+cpxtZoGAggRem16ocVKIv5gDB5uLDgBIwrIsXlGqYbLwW8YyO3WVTk1FkFDjMETYlDqiw=="],
 
-    "@rollup/rollup-linux-powerpc64le-gnu": ["@rollup/rollup-linux-powerpc64le-gnu@4.36.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-VMPMEIUpPFKpPI9GZMhJrtu8rxnp6mJR3ZzQPykq4xc2GmdHj3Q4cA+7avMyegXy4n1v+Qynr9fR88BmyO74tg=="],
+    "@rollup/rollup-linux-powerpc64le-gnu": ["@rollup/rollup-linux-powerpc64le-gnu@4.39.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-0pCNnmxgduJ3YRt+D+kJ6Ai/r+TaePu9ZLENl+ZDV/CdVczXl95CbIiwwswu4L+K7uOIGf6tMo2vm8uadRaICQ=="],
 
-    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.36.0", "", { "os": "linux", "cpu": "none" }, "sha512-ttE6ayb/kHwNRJGYLpuAvB7SMtOeQnVXEIpMtAvx3kepFQeowVED0n1K9nAdraHUPJ5hydEMxBpIR7o4nrm8uA=="],
+    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.39.0", "", { "os": "linux", "cpu": "none" }, "sha512-t7j5Zhr7S4bBtksT73bO6c3Qa2AV/HqiGlj9+KB3gNF5upcVkx+HLgxTm8DK4OkzsOYqbdqbLKwvGMhylJCPhQ=="],
 
-    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.36.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-4a5gf2jpS0AIe7uBjxDeUMNcFmaRTbNv7NxI5xOCs4lhzsVyGR/0qBXduPnoWf6dGC365saTiwag8hP1imTgag=="],
+    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.39.0", "", { "os": "linux", "cpu": "none" }, "sha512-m6cwI86IvQ7M93MQ2RF5SP8tUjD39Y7rjb1qjHgYh28uAPVU8+k/xYWvxRO3/tBN2pZkSMa5RjnPuUIbrwVxeA=="],
 
-    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.36.0", "", { "os": "linux", "cpu": "x64" }, "sha512-5KtoW8UWmwFKQ96aQL3LlRXX16IMwyzMq/jSSVIIyAANiE1doaQsx/KRyhAvpHlPjPiSU/AYX/8m+lQ9VToxFQ=="],
+    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.39.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-iRDJd2ebMunnk2rsSBYlsptCyuINvxUfGwOUldjv5M4tpa93K8tFMeYGpNk2+Nxl+OBJnBzy2/JCscGeO507kA=="],
 
-    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.36.0", "", { "os": "linux", "cpu": "x64" }, "sha512-sycrYZPrv2ag4OCvaN5js+f01eoZ2U+RmT5as8vhxiFz+kxwlHrsxOwKPSA8WyS+Wc6Epid9QeI/IkQ9NkgYyQ=="],
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.39.0", "", { "os": "linux", "cpu": "x64" }, "sha512-t9jqYw27R6Lx0XKfEFe5vUeEJ5pF3SGIM6gTfONSMb7DuG6z6wfj2yjcoZxHg129veTqU7+wOhY6GX8wmf90dA=="],
 
-    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.36.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-qbqt4N7tokFwwSVlWDsjfoHgviS3n/vZ8LK0h1uLG9TYIRuUTJC88E1xb3LM2iqZ/WTqNQjYrtmtGmrmmawB6A=="],
+    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.39.0", "", { "os": "linux", "cpu": "x64" }, "sha512-ThFdkrFDP55AIsIZDKSBWEt/JcWlCzydbZHinZ0F/r1h83qbGeenCt/G/wG2O0reuENDD2tawfAj2s8VK7Bugg=="],
 
-    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.36.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-t+RY0JuRamIocMuQcfwYSOkmdX9dtkr1PbhKW42AMvaDQa+jOdpUYysroTF/nuPpAaQMWp7ye+ndlmmthieJrQ=="],
+    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.39.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-jDrLm6yUtbOg2TYB3sBF3acUnAwsIksEYjLeHL+TJv9jg+TmTwdyjnDex27jqEMakNKf3RwwPahDIt7QXCSqRQ=="],
 
-    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.36.0", "", { "os": "win32", "cpu": "x64" }, "sha512-aRXd7tRZkWLqGbChgcMMDEHjOKudo1kChb1Jt1IfR8cY/KIpgNviLeJy5FUb9IpSuQj8dU2fAYNMPW/hLKOSTw=="],
+    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.39.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-6w9uMuza+LbLCVoNKL5FSLE7yvYkq9laSd09bwS0tMjkwXrmib/4KmoJcrKhLWHvw19mwU+33ndC69T7weNNjQ=="],
 
-    "@shikijs/core": ["@shikijs/core@3.2.1", "", { "dependencies": { "@shikijs/types": "3.2.1", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-FhsdxMWYu/C11sFisEp7FMGBtX/OSSbnXZDMBhGuUDBNTdsoZlMSgQv5f90rwvzWAdWIW6VobD+G3IrazxA6dQ=="],
+    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.39.0", "", { "os": "win32", "cpu": "x64" }, "sha512-yAkUOkIKZlK5dl7u6dg897doBgLXmUHhIINM2c+sND3DZwnrdQkkSiDh7N75Ll4mM4dxSkYfXqU9fW3lLkMFug=="],
 
-    "@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.2.1", "", { "dependencies": { "@shikijs/types": "3.2.1", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.1.0" } }, "sha512-eMdcUzN3FMQYxOmRf2rmU8frikzoSHbQDFH2hIuXsrMO+IBOCI9BeeRkCiBkcLDHeRKbOCtYMJK3D6U32ooU9Q=="],
+    "@shikijs/core": ["@shikijs/core@3.2.2", "", { "dependencies": { "@shikijs/types": "3.2.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-yvlSKVMLjddAGBa2Yu+vUZxuu3sClOWW1AG+UtJkvejYuGM5BVL35s6Ijiwb75O9QdEx6IkMxinHZSi8ZyrBaA=="],
 
-    "@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@3.2.1", "", { "dependencies": { "@shikijs/types": "3.2.1", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-wZZAkayEn6qu2+YjenEoFqj0OyQI64EWsNR6/71d1EkG4sxEOFooowKivsWPpaWNBu3sxAG+zPz5kzBL/SsreQ=="],
+    "@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.2.2", "", { "dependencies": { "@shikijs/types": "3.2.2", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.1.0" } }, "sha512-tlDKfhWpF4jKLUyVAnmL+ggIC+0VyteNsUpBzh1iwWLZu4i+PelIRr0TNur6pRRo5UZIv3ss/PLMuwahg9S2hg=="],
 
-    "@shikijs/langs": ["@shikijs/langs@3.2.1", "", { "dependencies": { "@shikijs/types": "3.2.1" } }, "sha512-If0iDHYRSGbihiA8+7uRsgb1er1Yj11pwpX1c6HLYnizDsKAw5iaT3JXj5ZpaimXSWky/IhxTm7C6nkiYVym+A=="],
+    "@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@3.2.2", "", { "dependencies": { "@shikijs/types": "3.2.2", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-vyXRnWVCSvokwbaUD/8uPn6Gqsf5Hv7XwcW4AgiU4Z2qwy19sdr6VGzMdheKKN58tJOOe5MIKiNb901bgcUXYQ=="],
 
-    "@shikijs/themes": ["@shikijs/themes@3.2.1", "", { "dependencies": { "@shikijs/types": "3.2.1" } }, "sha512-k5DKJUT8IldBvAm8WcrDT5+7GA7se6lLksR+2E3SvyqGTyFMzU2F9Gb7rmD+t+Pga1MKrYFxDIeyWjMZWM6uBQ=="],
+    "@shikijs/langs": ["@shikijs/langs@3.2.2", "", { "dependencies": { "@shikijs/types": "3.2.2" } }, "sha512-NY0Urg2dV9ETt3JIOWoMPuoDNwte3geLZ4M1nrPHbkDS8dWMpKcEwlqiEIGqtwZNmt5gKyWpR26ln2Bg2ecPgw=="],
 
-    "@shikijs/transformers": ["@shikijs/transformers@3.2.1", "", { "dependencies": { "@shikijs/core": "3.2.1", "@shikijs/types": "3.2.1" } }, "sha512-oIT40p8LOPV/6XLnUrVPeRtJtbu0Mpl+BjGFuMXw870eX9zTSQlidg7CsksFDVyUiSAOC/CH1RQm+ldZp0/6eQ=="],
+    "@shikijs/themes": ["@shikijs/themes@3.2.2", "", { "dependencies": { "@shikijs/types": "3.2.2" } }, "sha512-Zuq4lgAxVKkb0FFdhHSdDkALuRpsj1so1JdihjKNQfgM78EHxV2JhO10qPsMrm01FkE3mDRTdF68wfmsqjt6HA=="],
 
-    "@shikijs/types": ["@shikijs/types@3.2.1", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA=="],
+    "@shikijs/transformers": ["@shikijs/transformers@3.2.2", "", { "dependencies": { "@shikijs/core": "3.2.2", "@shikijs/types": "3.2.2" } }, "sha512-DQvrPdygc6NNdbfeOZoO1+KiRnnjUQuuPLwsAbUuSKq4QFLD0Ik15FbHojmot5NbgCQRbVr8ufRg8U6X5rGWuQ=="],
+
+    "@shikijs/types": ["@shikijs/types@3.2.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-a5TiHk7EH5Lso8sHcLHbVNNhWKP0Wi3yVnXnu73g86n3WoDgEra7n3KszyeCGuyoagspQ2fzvy4cpSc8pKhb0A=="],
 
     "@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.2", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
 
-    "@swc/core": ["@swc/core@1.11.11", "", { "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.19" }, "optionalDependencies": { "@swc/core-darwin-arm64": "1.11.11", "@swc/core-darwin-x64": "1.11.11", "@swc/core-linux-arm-gnueabihf": "1.11.11", "@swc/core-linux-arm64-gnu": "1.11.11", "@swc/core-linux-arm64-musl": "1.11.11", "@swc/core-linux-x64-gnu": "1.11.11", "@swc/core-linux-x64-musl": "1.11.11", "@swc/core-win32-arm64-msvc": "1.11.11", "@swc/core-win32-ia32-msvc": "1.11.11", "@swc/core-win32-x64-msvc": "1.11.11" }, "peerDependencies": { "@swc/helpers": "*" }, "optionalPeers": ["@swc/helpers"] }, "sha512-pCVY2Wn6dV/labNvssk9b3Owi4WOYsapcbWm90XkIj4xH/56Z6gzja9fsU+4MdPuEfC2Smw835nZHcdCFGyX6A=="],
+    "@swc/core": ["@swc/core@1.11.20", "", { "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.21" }, "optionalDependencies": { "@swc/core-darwin-arm64": "1.11.20", "@swc/core-darwin-x64": "1.11.20", "@swc/core-linux-arm-gnueabihf": "1.11.20", "@swc/core-linux-arm64-gnu": "1.11.20", "@swc/core-linux-arm64-musl": "1.11.20", "@swc/core-linux-x64-gnu": "1.11.20", "@swc/core-linux-x64-musl": "1.11.20", "@swc/core-win32-arm64-msvc": "1.11.20", "@swc/core-win32-ia32-msvc": "1.11.20", "@swc/core-win32-x64-msvc": "1.11.20" }, "peerDependencies": { "@swc/helpers": ">=0.5.17" }, "optionalPeers": ["@swc/helpers"] }, "sha512-2F0+bQs7+pwbudsxRffLdfpGCQX4Ih5k88f7LqTfj2oC7aTrv7FssduOvcAvfVY/InZmyYEblKl1rqg8bvzrZQ=="],
 
-    "@swc/core-darwin-arm64": ["@swc/core-darwin-arm64@1.11.11", "", { "os": "darwin", "cpu": "arm64" }, "sha512-vJcjGVDB8cZH7zyOkC0AfpFYI/7GHKG0NSsH3tpuKrmoAXJyCYspKPGid7FT53EAlWreN7+Pew+bukYf5j+Fmg=="],
+    "@swc/core-darwin-arm64": ["@swc/core-darwin-arm64@1.11.20", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Sc06h6pwMhQagU7vz92b7wwQTIibTiqRE4y/XjkvurSbjSarrtSZR4OKkrdNwUkSy1HlQE4NhKQf7tmLeQ7PhQ=="],
 
-    "@swc/core-darwin-x64": ["@swc/core-darwin-x64@1.11.11", "", { "os": "darwin", "cpu": "x64" }, "sha512-/N4dGdqEYvD48mCF3QBSycAbbQd3yoZ2YHSzYesQf8usNc2YpIhYqEH3sql02UsxTjEFOJSf1bxZABDdhbSl6A=="],
+    "@swc/core-darwin-x64": ["@swc/core-darwin-x64@1.11.20", "", { "os": "darwin", "cpu": "x64" }, "sha512-kHANJrgbqaGzUyTectNfLyhnHAeDGGVSRXYyPVAx6x0nuLOnRhKbuSyZY42UEN1IgHauaADCzcd+HiiMv/rgRw=="],
 
-    "@swc/core-linux-arm-gnueabihf": ["@swc/core-linux-arm-gnueabihf@1.11.11", "", { "os": "linux", "cpu": "arm" }, "sha512-hsBhKK+wVXdN3x9MrL5GW0yT8o9GxteE5zHAI2HJjRQel3HtW7m5Nvwaq+q8rwMf4YQRd8ydbvwl4iUOZx7i2Q=="],
+    "@swc/core-linux-arm-gnueabihf": ["@swc/core-linux-arm-gnueabihf@1.11.20", "", { "os": "linux", "cpu": "arm" }, "sha512-FXllEBeAwU6FNIZzo+u1LmHGaHzwAKzz7tWRkUOqBKjKr20Ot4KGS3xlz2qgV2NESFHAisdHja2P2rcQWqtZRg=="],
 
-    "@swc/core-linux-arm64-gnu": ["@swc/core-linux-arm64-gnu@1.11.11", "", { "os": "linux", "cpu": "arm64" }, "sha512-YOCdxsqbnn/HMPCNM6nrXUpSndLXMUssGTtzT7ffXqr7WuzRg2e170FVDVQFIkb08E7Ku5uOnnUVAChAJQbMOQ=="],
+    "@swc/core-linux-arm64-gnu": ["@swc/core-linux-arm64-gnu@1.11.20", "", { "os": "linux", "cpu": "arm64" }, "sha512-OsYMFyJzUM0K8a97tu6KxZaCob3vr+UknVqHO09QwechX+rdX4euWm7Lte4d1B+7SBfokhw7ghLZsNTQfRw9pA=="],
 
-    "@swc/core-linux-arm64-musl": ["@swc/core-linux-arm64-musl@1.11.11", "", { "os": "linux", "cpu": "arm64" }, "sha512-nR2tfdQRRzwqR2XYw9NnBk9Fdvff/b8IiJzDL28gRR2QiJWLaE8LsRovtWrzCOYq6o5Uu9cJ3WbabWthLo4jLw=="],
+    "@swc/core-linux-arm64-musl": ["@swc/core-linux-arm64-musl@1.11.20", "", { "os": "linux", "cpu": "arm64" }, "sha512-fbSWOQ5ZZ7sWodoC6GnzV9RhbImdxoH8b14K1tnHCWJXolzTH40/4JKf/koJ3r24nm1PtsqX9OUxRsOXYAy5dg=="],
 
-    "@swc/core-linux-x64-gnu": ["@swc/core-linux-x64-gnu@1.11.11", "", { "os": "linux", "cpu": "x64" }, "sha512-b4gBp5HA9xNWNC5gsYbdzGBJWx4vKSGybGMGOVWWuF+ynx10+0sA/o4XJGuNHm8TEDuNh9YLKf6QkIO8+GPJ1g=="],
+    "@swc/core-linux-x64-gnu": ["@swc/core-linux-x64-gnu@1.11.20", "", { "os": "linux", "cpu": "x64" }, "sha512-OFU53idbY8KA1RkNzZBi0FpoRPSn/anv4N7ZzGZGk664UoFwMbSL+XHGocJzhV9G/VNGH7bMBmgoVWk72nn5hw=="],
 
-    "@swc/core-linux-x64-musl": ["@swc/core-linux-x64-musl@1.11.11", "", { "os": "linux", "cpu": "x64" }, "sha512-dEvqmQVswjNvMBwXNb8q5uSvhWrJLdttBSef3s6UC5oDSwOr00t3RQPzyS3n5qmGJ8UMTdPRmsopxmqaODISdg=="],
+    "@swc/core-linux-x64-musl": ["@swc/core-linux-x64-musl@1.11.20", "", { "os": "linux", "cpu": "x64" }, "sha512-GZbqXEc09nIarkGMXc2P4Hf2ONb1vre22X7Se9CCeU/QtWYRU/H1a2TFnYgBKzNVOH65Dd/XYXcuy+tM1aw1iw=="],
 
-    "@swc/core-win32-arm64-msvc": ["@swc/core-win32-arm64-msvc@1.11.11", "", { "os": "win32", "cpu": "arm64" }, "sha512-aZNZznem9WRnw2FbTqVpnclvl8Q2apOBW2B316gZK+qxbe+ktjOUnYaMhdCG3+BYggyIBDOnaJeQrXbKIMmNdw=="],
+    "@swc/core-win32-arm64-msvc": ["@swc/core-win32-arm64-msvc@1.11.20", "", { "os": "win32", "cpu": "arm64" }, "sha512-i0H2MeK8krEd/YeiGz0GHtNL9wSGfAPXiouh8aRNV/u+w4vPaaRqnXwv/yzAW+D2vPpKJBhOwmNFFzdgTJ5mWw=="],
 
-    "@swc/core-win32-ia32-msvc": ["@swc/core-win32-ia32-msvc@1.11.11", "", { "os": "win32", "cpu": "ia32" }, "sha512-DjeJn/IfjgOddmJ8IBbWuDK53Fqw7UvOz7kyI/728CSdDYC3LXigzj3ZYs4VvyeOt+ZcQZUB2HA27edOifomGw=="],
+    "@swc/core-win32-ia32-msvc": ["@swc/core-win32-ia32-msvc@1.11.20", "", { "os": "win32", "cpu": "ia32" }, "sha512-/7e3X7EGO8uOvAUP+YKJTdoR2JR5vdiewDOnDS9FFXj8yr9x6/oDFLd92Sp9NglF+aXuqAo33IfH2OTz1MR+Ww=="],
 
-    "@swc/core-win32-x64-msvc": ["@swc/core-win32-x64-msvc@1.11.11", "", { "os": "win32", "cpu": "x64" }, "sha512-Gp/SLoeMtsU4n0uRoKDOlGrRC6wCfifq7bqLwSlAG8u8MyJYJCcwjg7ggm0rhLdC2vbiZ+lLVl3kkETp+JUvKg=="],
+    "@swc/core-win32-x64-msvc": ["@swc/core-win32-x64-msvc@1.11.20", "", { "os": "win32", "cpu": "x64" }, "sha512-rcZpt5uiVNTs/Se+CYBoaDphafFJcsqXo3DNmfkJZoDZUb4PZqxu61p4Qa+lvFDQlRragrlLRpGQM9qnLNd4iQ=="],
 
     "@swc/counter": ["@swc/counter@0.1.3", "", {}, "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="],
 
     "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
 
-    "@swc/types": ["@swc/types@0.1.19", "", { "dependencies": { "@swc/counter": "^0.1.3" } }, "sha512-WkAZaAfj44kh/UFdAQcrMP1I0nwRqpt27u+08LMBYMqmQfwwMofYoMh/48NGkMMRfC4ynpfwRbJuu8ErfNloeA=="],
+    "@swc/types": ["@swc/types@0.1.21", "", { "dependencies": { "@swc/counter": "^0.1.3" } }, "sha512-2YEtj5HJVbKivud9N4bpPBAyZhj4S2Ipe5LkUG94alTpr7in/GU/EARgPAd3BwU+YOmFVJC2+kjqhGRi3r0ZpQ=="],
 
     "@t3-oss/env-core": ["@t3-oss/env-core@0.12.0", "", { "peerDependencies": { "typescript": ">=5.0.0", "valibot": "^1.0.0-beta.7 || ^1.0.0", "zod": "^3.24.0" }, "optionalPeers": ["typescript", "valibot", "zod"] }, "sha512-lOPj8d9nJJTt81mMuN9GMk8x5veOt7q9m11OSnCBJhwp1QrL/qR+M8Y467ULBSm9SunosryWNbmQQbgoiMgcdw=="],
 
     "@t3-oss/env-nextjs": ["@t3-oss/env-nextjs@0.12.0", "", { "dependencies": { "@t3-oss/env-core": "0.12.0" }, "peerDependencies": { "typescript": ">=5.0.0", "valibot": "^1.0.0-beta.7 || ^1.0.0", "zod": "^3.24.0" }, "optionalPeers": ["typescript", "valibot", "zod"] }, "sha512-rFnvYk1049RnNVUPvY8iQ55AuQh1Rr+qZzQBh3t++RttCGK4COpXGNxS4+45afuQq02lu+QAOy/5955aU8hRKw=="],
 
-    "@tailwindcss/node": ["@tailwindcss/node@4.0.14", "", { "dependencies": { "enhanced-resolve": "^5.18.1", "jiti": "^2.4.2", "tailwindcss": "4.0.14" } }, "sha512-Ux9NbFkKWYE4rfUFz6M5JFLs/GEYP6ysxT8uSyPn6aTbh2K3xDE1zz++eVK4Vwx799fzMF8CID9sdHn4j/Ab8w=="],
+    "@tailwindcss/node": ["@tailwindcss/node@4.1.3", "", { "dependencies": { "enhanced-resolve": "^5.18.1", "jiti": "^2.4.2", "lightningcss": "1.29.2", "tailwindcss": "4.1.3" } }, "sha512-H/6r6IPFJkCfBJZ2dKZiPJ7Ueb2wbL592+9bQEl2r73qbX6yGnmQVIfiUvDRB2YI0a3PWDrzUwkvQx1XW1bNkA=="],
 
-    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.0.14", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.0.14", "@tailwindcss/oxide-darwin-arm64": "4.0.14", "@tailwindcss/oxide-darwin-x64": "4.0.14", "@tailwindcss/oxide-freebsd-x64": "4.0.14", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.14", "@tailwindcss/oxide-linux-arm64-gnu": "4.0.14", "@tailwindcss/oxide-linux-arm64-musl": "4.0.14", "@tailwindcss/oxide-linux-x64-gnu": "4.0.14", "@tailwindcss/oxide-linux-x64-musl": "4.0.14", "@tailwindcss/oxide-win32-arm64-msvc": "4.0.14", "@tailwindcss/oxide-win32-x64-msvc": "4.0.14" } }, "sha512-M8VCNyO/NBi5vJ2cRcI9u8w7Si+i76a7o1vveoGtbbjpEYJZYiyc7f2VGps/DqawO56l3tImIbq2OT/533jcrA=="],
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.3", "@tailwindcss/oxide-darwin-arm64": "4.1.3", "@tailwindcss/oxide-darwin-x64": "4.1.3", "@tailwindcss/oxide-freebsd-x64": "4.1.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.3", "@tailwindcss/oxide-linux-arm64-musl": "4.1.3", "@tailwindcss/oxide-linux-x64-gnu": "4.1.3", "@tailwindcss/oxide-linux-x64-musl": "4.1.3", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.3", "@tailwindcss/oxide-win32-x64-msvc": "4.1.3" } }, "sha512-t16lpHCU7LBxDe/8dCj9ntyNpXaSTAgxWm1u2XQP5NiIu4KGSyrDJJRlK9hJ4U9yJxx0UKCVI67MJWFNll5mOQ=="],
 
-    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.0.14", "", { "os": "android", "cpu": "arm64" }, "sha512-VBFKC2rFyfJ5J8lRwjy6ub3rgpY186kAcYgiUr8ArR8BAZzMruyeKJ6mlsD22Zp5ZLcPW/FXMasJiJBx0WsdQg=="],
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.3", "", { "os": "android", "cpu": "arm64" }, "sha512-cxklKjtNLwFl3mDYw4XpEfBY+G8ssSg9ADL4Wm6//5woi3XGqlxFsnV5Zb6v07dxw1NvEX2uoqsxO/zWQsgR+g=="],
 
-    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.0.14", "", { "os": "darwin", "cpu": "arm64" }, "sha512-U3XOwLrefGr2YQZ9DXasDSNWGPZBCh8F62+AExBEDMLDfvLLgI/HDzY8Oq8p/JtqkAY38sWPOaNnRwEGKU5Zmg=="],
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-mqkf2tLR5VCrjBvuRDwzKNShRu99gCAVMkVsaEOFvv6cCjlEKXRecPu9DEnxp6STk5z+Vlbh1M5zY3nQCXMXhw=="],
 
-    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.0.14", "", { "os": "darwin", "cpu": "x64" }, "sha512-V5AjFuc3ndWGnOi1d379UsODb0TzAS2DYIP/lwEbfvafUaD2aNZIcbwJtYu2DQqO2+s/XBvDVA+w4yUyaewRwg=="],
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-7sGraGaWzXvCLyxrc7d+CCpUN3fYnkkcso3rCzwUmo/LteAl2ZGCDlGvDD8Y/1D3ngxT8KgDj1DSwOnNewKhmg=="],
 
-    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.0.14", "", { "os": "freebsd", "cpu": "x64" }, "sha512-tXvtxbaZfcPfqBwW3f53lTcyH6EDT+1eT7yabwcfcxTs+8yTPqxsDUhrqe9MrnEzpNkd+R/QAjJapfd4tjWdLg=="],
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.3", "", { "os": "freebsd", "cpu": "x64" }, "sha512-E2+PbcbzIReaAYZe997wb9rId246yDkCwAakllAWSGqe6VTg9hHle67hfH6ExjpV2LSK/siRzBUs5wVff3RW9w=="],
 
-    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.0.14", "", { "os": "linux", "cpu": "arm" }, "sha512-cSeLNWWqIWeSTmBntQvyY2/2gcLX8rkPFfDDTQVF8qbRcRMVPLxBvFVJyfSAYRNch6ZyVH2GI6dtgALOBDpdNA=="],
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.3", "", { "os": "linux", "cpu": "arm" }, "sha512-GvfbJ8wjSSjbLFFE3UYz4Eh8i4L6GiEYqCtA8j2Zd2oXriPuom/Ah/64pg/szWycQpzRnbDiJozoxFU2oJZyfg=="],
 
-    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.0.14", "", { "os": "linux", "cpu": "arm64" }, "sha512-bwDWLBalXFMDItcSXzFk6y7QKvj6oFlaY9vM+agTlwFL1n1OhDHYLZkSjaYsh6KCeG0VB0r7H8PUJVOM1LRZyg=="],
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-35UkuCWQTeG9BHcBQXndDOrpsnt3Pj9NVIB4CgNiKmpG8GnCNXeMczkUpOoqcOhO6Cc/mM2W7kaQ/MTEENDDXg=="],
 
-    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.0.14", "", { "os": "linux", "cpu": "arm64" }, "sha512-gVkJdnR/L6iIcGYXx64HGJRmlme2FGr/aZH0W6u4A3RgPMAb+6ELRLi+UBiH83RXBm9vwCfkIC/q8T51h8vUJQ=="],
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-dm18aQiML5QCj9DQo7wMbt1Z2tl3Giht54uVR87a84X8qRtuXxUqnKQkRDK5B4bCOmcZ580lF9YcoMkbDYTXHQ=="],
 
-    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.0.14", "", { "os": "linux", "cpu": "x64" }, "sha512-EE+EQ+c6tTpzsg+LGO1uuusjXxYx0Q00JE5ubcIGfsogSKth8n8i2BcS2wYTQe4jXGs+BQs35l78BIPzgwLddw=="],
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.3", "", { "os": "linux", "cpu": "x64" }, "sha512-LMdTmGe/NPtGOaOfV2HuO7w07jI3cflPrVq5CXl+2O93DCewADK0uW1ORNAcfu2YxDUS035eY2W38TxrsqngxA=="],
 
-    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.0.14", "", { "os": "linux", "cpu": "x64" }, "sha512-KCCOzo+L6XPT0oUp2Jwh233ETRQ/F6cwUnMnR0FvMUCbkDAzHbcyOgpfuAtRa5HD0WbTbH4pVD+S0pn1EhNfbw=="],
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.3", "", { "os": "linux", "cpu": "x64" }, "sha512-aalNWwIi54bbFEizwl1/XpmdDrOaCjRFQRgtbv9slWjmNPuJJTIKPHf5/XXDARc9CneW9FkSTqTbyvNecYAEGw=="],
 
-    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.0.14", "", { "os": "win32", "cpu": "arm64" }, "sha512-AHObFiFL9lNYcm3tZSPqa/cHGpM5wOrNmM2uOMoKppp+0Hom5uuyRh0QkOp7jftsHZdrZUpmoz0Mp6vhh2XtUg=="],
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-PEj7XR4OGTGoboTIAdXicKuWl4EQIjKHKuR+bFy9oYN7CFZo0eu74+70O4XuERX4yjqVZGAkCdglBODlgqcCXg=="],
 
-    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.0.14", "", { "os": "win32", "cpu": "x64" }, "sha512-rNXXMDJfCJLw/ZaFTOLOHoGULxyXfh2iXTGiChFiYTSgKBKQHIGEpV0yn5N25WGzJJ+VBnRjHzlmDqRV+d//oQ=="],
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.3", "", { "os": "win32", "cpu": "x64" }, "sha512-T8gfxECWDBENotpw3HR9SmNiHC9AOJdxs+woasRZ8Q/J4VHN0OMs7F+4yVNZ9EVN26Wv6mZbK0jv7eHYuLJLwA=="],
 
-    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.0.14", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.0.14", "@tailwindcss/oxide": "4.0.14", "lightningcss": "1.29.2", "postcss": "^8.4.41", "tailwindcss": "4.0.14" } }, "sha512-+uIR6KtKhla1XeIanF27KtrfYy+PX+R679v5LxbkmEZlhQe3g8rk+wKj7Xgt++rWGRuFLGMXY80Ek8JNn+kN/g=="],
+    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.3", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.3", "@tailwindcss/oxide": "4.1.3", "postcss": "^8.4.41", "tailwindcss": "4.1.3" } }, "sha512-6s5nJODm98F++QT49qn8xJKHQRamhYHfMi3X7/ltxiSQ9dyRsaFSfFkfaMsanWzf+TMYQtbk8mt5f6cCVXJwfg=="],
 
-    "@tailwindcss/vite": ["@tailwindcss/vite@4.0.14", "", { "dependencies": { "@tailwindcss/node": "4.0.14", "@tailwindcss/oxide": "4.0.14", "lightningcss": "1.29.2", "tailwindcss": "4.0.14" }, "peerDependencies": { "vite": "^5.2.0 || ^6" } }, "sha512-y69ztPTRFy+13EPS/7dEFVl7q2Goh1pQueVO8IfGeyqSpcx/joNJXFk0lLhMgUbF0VFJotwRSb9ZY7Xoq3r26Q=="],
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.1.3", "", { "dependencies": { "@tailwindcss/node": "4.1.3", "@tailwindcss/oxide": "4.1.3", "tailwindcss": "4.1.3" }, "peerDependencies": { "vite": "^5.2.0 || ^6" } }, "sha512-lUI/QaDxLtlV52Lho6pu07CG9pSnRYLOPmKGIQjyHdTBagemc6HmgZxyjGAQ/5HMPrNeWBfTVIpQl0/jLXvWHQ=="],
 
     "@tanstack/match-sorter-utils": ["@tanstack/match-sorter-utils@8.19.4", "", { "dependencies": { "remove-accents": "0.5.0" } }, "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg=="],
 
-    "@tanstack/query-core": ["@tanstack/query-core@5.69.0", "", {}, "sha512-Kn410jq6vs1P8Nm+ZsRj9H+U3C0kjuEkYLxbiCyn3MDEiYor1j2DGVULqAz62SLZtUZ/e9Xt6xMXiJ3NJ65WyQ=="],
+    "@tanstack/query-core": ["@tanstack/query-core@5.72.2", "", {}, "sha512-fxl9/0yk3mD/FwTmVEf1/H6N5B975H0luT+icKyX566w6uJG0x6o+Yl+I38wJRCaogiMkstByt+seXfDbWDAcA=="],
 
-    "@tanstack/react-query": ["@tanstack/react-query@5.69.0", "", { "dependencies": { "@tanstack/query-core": "5.69.0" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-Ift3IUNQqTcaFa1AiIQ7WCb/PPy8aexZdq9pZWLXhfLcLxH0+PZqJ2xFImxCpdDZrFRZhLJrh76geevS5xjRhA=="],
+    "@tanstack/react-query": ["@tanstack/react-query@5.72.2", "", { "dependencies": { "@tanstack/query-core": "5.72.2" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-SVNHzyBUYiis+XiCl+8yiPZmMYei2AKYY94wM/zpvB5l1jxqOo82FQTziSJ4pBi96jtYqvYrTMxWynmbQh3XKw=="],
 
     "@tanstack/react-table": ["@tanstack/react-table@8.21.2", "", { "dependencies": { "@tanstack/table-core": "8.21.2" }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-11tNlEDTdIhMJba2RBH+ecJ9l1zgS2kjmexDPAraulc8jeNA4xocSNeyzextT0XJyASil4XsCYlJmf5jEWAtYg=="],
 
@@ -635,8 +638,6 @@
 
     "@ts-morph/common": ["@ts-morph/common@0.19.0", "", { "dependencies": { "fast-glob": "^3.2.12", "minimatch": "^7.4.3", "mkdirp": "^2.1.6", "path-browserify": "^1.0.1" } }, "sha512-Unz/WHmd4pGax91rdIKWi51wnVUW11QttMEPpBiBgIewnc9UQIX7UDLxr5vRlqeByXCwhkF6VabSsI0raWcyAQ=="],
 
-    "@types/acorn": ["@types/acorn@4.0.6", "", { "dependencies": { "@types/estree": "*" } }, "sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ=="],
-
     "@types/aria-query": ["@types/aria-query@5.0.4", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="],
 
     "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
@@ -651,7 +652,7 @@
 
     "@types/debug": ["@types/debug@4.1.12", "", { "dependencies": { "@types/ms": "*" } }, "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ=="],
 
-    "@types/estree": ["@types/estree@1.0.6", "", {}, "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="],
+    "@types/estree": ["@types/estree@1.0.7", "", {}, "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ=="],
 
     "@types/estree-jsx": ["@types/estree-jsx@1.0.5", "", { "dependencies": { "@types/estree": "*" } }, "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg=="],
 
@@ -665,11 +666,11 @@
 
     "@types/ms": ["@types/ms@2.1.0", "", {}, "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="],
 
-    "@types/node": ["@types/node@22.13.10", "", { "dependencies": { "undici-types": "~6.20.0" } }, "sha512-I6LPUvlRH+O6VRUqYOcMudhaIdUVWfsjnZavnsraHvpBwaEyMN29ry+0UVJhImYL16xsscu0aske3yA+uPOWfw=="],
+    "@types/node": ["@types/node@22.14.0", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA=="],
 
-    "@types/react": ["@types/react@19.0.11", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-vrdxRZfo9ALXth6yPfV16PYTLZwsUWhVjjC+DkfE5t1suNSbBrWC9YqSuuxJZ8Ps6z1o2ycRpIqzZJIgklq4Tw=="],
+    "@types/react": ["@types/react@19.1.1", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-ePapxDL7qrgqSF67s0h9m412d9DbXyC1n59O2st+9rjuuamWsZuD2w55rqY12CbzsZ7uVXb5Nw0gEp9Z8MMutQ=="],
 
-    "@types/react-dom": ["@types/react-dom@19.0.4", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg=="],
+    "@types/react-dom": ["@types/react-dom@19.1.2", "", { "peerDependencies": { "@types/react": "^19.0.0" } }, "sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw=="],
 
     "@types/statuses": ["@types/statuses@2.0.5", "", {}, "sha512-jmIUGWrAiwu3dZpxntxieC+1n/5c3mjrImkmOSQ2NC5uP6cYO4aAZDdSmRcI5C1oiTmqlZGHC+/NmJrKogbP5A=="],
 
@@ -679,27 +680,27 @@
 
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
-    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.26.1", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.26.1", "@typescript-eslint/type-utils": "8.26.1", "@typescript-eslint/utils": "8.26.1", "@typescript-eslint/visitor-keys": "8.26.1", "graphemer": "^1.4.0", "ignore": "^5.3.1", "natural-compare": "^1.4.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-2X3mwqsj9Bd3Ciz508ZUtoQQYpOhU/kWoUqIf49H8Z0+Vbh6UF/y0OEYp0Q0axOGzaBGs7QxRwq0knSQ8khQNA=="],
+    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.29.1", "", { "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.29.1", "@typescript-eslint/type-utils": "8.29.1", "@typescript-eslint/utils": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1", "graphemer": "^1.4.0", "ignore": "^5.3.1", "natural-compare": "^1.4.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-ba0rr4Wfvg23vERs3eB+P3lfj2E+2g3lhWcCVukUuhtcdUx5lSIFZlGFEBHKr+3zizDa/TvZTptdNHVZWAkSBg=="],
 
-    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.26.1", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.26.1", "@typescript-eslint/types": "8.26.1", "@typescript-eslint/typescript-estree": "8.26.1", "@typescript-eslint/visitor-keys": "8.26.1", "debug": "^4.3.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-w6HZUV4NWxqd8BdeFf81t07d7/YV9s7TCWrQQbG5uhuvGUAW+fq1usZ1Hmz9UPNLniFnD8GLSsDpjP0hm1S4lQ=="],
+    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.29.1", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.29.1", "@typescript-eslint/types": "8.29.1", "@typescript-eslint/typescript-estree": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1", "debug": "^4.3.4" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-zczrHVEqEaTwh12gWBIJWj8nx+ayDcCJs06yoNMY0kwjMWDM6+kppljY+BxWI06d2Ja+h4+WdufDcwMnnMEWmg=="],
 
-    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.26.1", "", { "dependencies": { "@typescript-eslint/types": "8.26.1", "@typescript-eslint/visitor-keys": "8.26.1" } }, "sha512-6EIvbE5cNER8sqBu6V7+KeMZIC1664d2Yjt+B9EWUXrsyWpxx4lEZrmvxgSKRC6gX+efDL/UY9OpPZ267io3mg=="],
+    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1" } }, "sha512-2nggXGX5F3YrsGN08pw4XpMLO1Rgtnn4AzTegC2MDesv6q3QaTU5yU7IbS1tf1IwCR0Hv/1EFygLn9ms6LIpDA=="],
 
-    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.26.1", "", { "dependencies": { "@typescript-eslint/typescript-estree": "8.26.1", "@typescript-eslint/utils": "8.26.1", "debug": "^4.3.4", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-Kcj/TagJLwoY/5w9JGEFV0dclQdyqw9+VMndxOJKtoFSjfZhLXhYjzsQEeyza03rwHx2vFEGvrJWJBXKleRvZg=="],
+    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.29.1", "", { "dependencies": { "@typescript-eslint/typescript-estree": "8.29.1", "@typescript-eslint/utils": "8.29.1", "debug": "^4.3.4", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-DkDUSDwZVCYN71xA4wzySqqcZsHKic53A4BLqmrWFFpOpNSoxX233lwGu/2135ymTCR04PoKiEEEvN1gFYg4Tw=="],
 
-    "@typescript-eslint/types": ["@typescript-eslint/types@8.26.1", "", {}, "sha512-n4THUQW27VmQMx+3P+B0Yptl7ydfceUj4ON/AQILAASwgYdZ/2dhfymRMh5egRUrvK5lSmaOm77Ry+lmXPOgBQ=="],
+    "@typescript-eslint/types": ["@typescript-eslint/types@8.29.1", "", {}, "sha512-VT7T1PuJF1hpYC3AGm2rCgJBjHL3nc+A/bhOp9sGMKfi5v0WufsX/sHCFBfNTx2F+zA6qBc/PD0/kLRLjdt8mQ=="],
 
-    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.26.1", "", { "dependencies": { "@typescript-eslint/types": "8.26.1", "@typescript-eslint/visitor-keys": "8.26.1", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "typescript": ">=4.8.4 <5.9.0" } }, "sha512-yUwPpUHDgdrv1QJ7YQal3cMVBGWfnuCdKbXw1yyjArax3353rEJP1ZA+4F8nOlQ3RfS2hUN/wze3nlY+ZOhvoA=="],
+    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "@typescript-eslint/visitor-keys": "8.29.1", "debug": "^4.3.4", "fast-glob": "^3.3.2", "is-glob": "^4.0.3", "minimatch": "^9.0.4", "semver": "^7.6.0", "ts-api-utils": "^2.0.1" }, "peerDependencies": { "typescript": ">=4.8.4 <5.9.0" } }, "sha512-l1enRoSaUkQxOQnbi0KPUtqeZkSiFlqrx9/3ns2rEDhGKfTa+88RmXqedC1zmVTOWrLc2e6DEJrTA51C9iLH5g=="],
 
-    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.26.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@typescript-eslint/scope-manager": "8.26.1", "@typescript-eslint/types": "8.26.1", "@typescript-eslint/typescript-estree": "8.26.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-V4Urxa/XtSUroUrnI7q6yUTD3hDtfJ2jzVfeT3VK0ciizfK2q/zGC0iDh1lFMUZR8cImRrep6/q0xd/1ZGPQpg=="],
+    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.29.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@typescript-eslint/scope-manager": "8.29.1", "@typescript-eslint/types": "8.29.1", "@typescript-eslint/typescript-estree": "8.29.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-QAkFEbytSaB8wnmB+DflhUPz6CLbFWE2SnSCrRMEa+KnXIzDYbpsn++1HGvnfAsUY44doDXmvRkO5shlM/3UfA=="],
 
-    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.26.1", "", { "dependencies": { "@typescript-eslint/types": "8.26.1", "eslint-visitor-keys": "^4.2.0" } }, "sha512-AjOC3zfnxd6S4Eiy3jwktJPclqhFHNyd8L6Gycf9WUPoKZpgM5PjkxY1X7uSy61xVpiJDhhk7XT2NVsN3ALTWg=="],
+    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.29.1", "", { "dependencies": { "@typescript-eslint/types": "8.29.1", "eslint-visitor-keys": "^4.2.0" } }, "sha512-RGLh5CRaUEf02viP5c1Vh1cMGffQscyHe7HPAzGpfmfflFg1wUz2rYxd+OZqwpeypYvZ8UxSxuIpF++fmOzEcg=="],
 
     "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
 
     "@vitejs/plugin-react": ["@vitejs/plugin-react@4.3.4", "", { "dependencies": { "@babel/core": "^7.26.0", "@babel/plugin-transform-react-jsx-self": "^7.25.9", "@babel/plugin-transform-react-jsx-source": "^7.25.9", "@types/babel__core": "^7.20.5", "react-refresh": "^0.14.2" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0" } }, "sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug=="],
 
-    "@vitejs/plugin-react-swc": ["@vitejs/plugin-react-swc@3.8.0", "", { "dependencies": { "@swc/core": "^1.10.15" }, "peerDependencies": { "vite": "^4 || ^5 || ^6" } }, "sha512-T4sHPvS+DIqDP51ifPqa9XIRAz/kIvIi8oXcnOZZgHmMotgmmdxe/DD5tMFlt5nuIRzT0/QuiwmKlH0503Aapw=="],
+    "@vitejs/plugin-react-swc": ["@vitejs/plugin-react-swc@3.8.1", "", { "dependencies": { "@swc/core": "^1.11.11" }, "peerDependencies": { "vite": "^4 || ^5 || ^6" } }, "sha512-aEUPCckHDcFyxpwFm0AIkbtv6PpUp3xTb9wYGFjtABynXjCYKkWoxX0AOK9NT9XCrdk6mBBUOeHQS+RKdcNO1A=="],
 
     "@vitest/expect": ["@vitest/expect@3.1.1", "", { "dependencies": { "@vitest/spy": "3.1.1", "@vitest/utils": "3.1.1", "chai": "^5.2.0", "tinyrainbow": "^2.0.0" } }, "sha512-q/zjrW9lgynctNbwvFtQkGK9+vvHA5UzVi2V8APrp1C6fG6/MuYYkmlx4FubuqLycCeSdHD5aadWfua/Vr0EUA=="],
 
@@ -767,7 +768,7 @@
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001706", "", {}, "sha512-3ZczoTApMAZwPKYWmwVbQMFpXBDds3/0VciVoUwPUbldlYyVLmRVuRs/PcUZtHpbLRpzzDvrvnFuREsGt6lUug=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001713", "", {}, "sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q=="],
 
     "ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="],
 
@@ -875,7 +876,7 @@
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
 
-    "electron-to-chromium": ["electron-to-chromium@1.5.120", "", {}, "sha512-oTUp3gfX1gZI+xfD2djr2rzQdHCwHzPQrrK0CD7WpTdF0nPdQ/INcRVjWgLdCT4a9W3jFObR9DAfsuyFQnI8CQ=="],
+    "electron-to-chromium": ["electron-to-chromium@1.5.136", "", {}, "sha512-kL4+wUTD7RSA5FHx5YwWtjDnEEkIIikFgWHR4P6fqjw1PPLlqYkxeOb++wAauAssat0YClCy8Y3C5SxgSkjibQ=="],
 
     "emoji-regex": ["emoji-regex@10.4.0", "", {}, "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="],
 
@@ -903,13 +904,13 @@
 
     "esast-util-from-js": ["esast-util-from-js@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "acorn": "^8.0.0", "esast-util-from-estree": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw=="],
 
-    "esbuild": ["esbuild@0.25.1", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.1", "@esbuild/android-arm": "0.25.1", "@esbuild/android-arm64": "0.25.1", "@esbuild/android-x64": "0.25.1", "@esbuild/darwin-arm64": "0.25.1", "@esbuild/darwin-x64": "0.25.1", "@esbuild/freebsd-arm64": "0.25.1", "@esbuild/freebsd-x64": "0.25.1", "@esbuild/linux-arm": "0.25.1", "@esbuild/linux-arm64": "0.25.1", "@esbuild/linux-ia32": "0.25.1", "@esbuild/linux-loong64": "0.25.1", "@esbuild/linux-mips64el": "0.25.1", "@esbuild/linux-ppc64": "0.25.1", "@esbuild/linux-riscv64": "0.25.1", "@esbuild/linux-s390x": "0.25.1", "@esbuild/linux-x64": "0.25.1", "@esbuild/netbsd-arm64": "0.25.1", "@esbuild/netbsd-x64": "0.25.1", "@esbuild/openbsd-arm64": "0.25.1", "@esbuild/openbsd-x64": "0.25.1", "@esbuild/sunos-x64": "0.25.1", "@esbuild/win32-arm64": "0.25.1", "@esbuild/win32-ia32": "0.25.1", "@esbuild/win32-x64": "0.25.1" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-BGO5LtrGC7vxnqucAe/rmvKdJllfGaYWdyABvyMoXQlfYMb2bbRuReWR5tEGE//4LcNJj9XrkovTqNYRFZHAMQ=="],
+    "esbuild": ["esbuild@0.25.2", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.2", "@esbuild/android-arm": "0.25.2", "@esbuild/android-arm64": "0.25.2", "@esbuild/android-x64": "0.25.2", "@esbuild/darwin-arm64": "0.25.2", "@esbuild/darwin-x64": "0.25.2", "@esbuild/freebsd-arm64": "0.25.2", "@esbuild/freebsd-x64": "0.25.2", "@esbuild/linux-arm": "0.25.2", "@esbuild/linux-arm64": "0.25.2", "@esbuild/linux-ia32": "0.25.2", "@esbuild/linux-loong64": "0.25.2", "@esbuild/linux-mips64el": "0.25.2", "@esbuild/linux-ppc64": "0.25.2", "@esbuild/linux-riscv64": "0.25.2", "@esbuild/linux-s390x": "0.25.2", "@esbuild/linux-x64": "0.25.2", "@esbuild/netbsd-arm64": "0.25.2", "@esbuild/netbsd-x64": "0.25.2", "@esbuild/openbsd-arm64": "0.25.2", "@esbuild/openbsd-x64": "0.25.2", "@esbuild/sunos-x64": "0.25.2", "@esbuild/win32-arm64": "0.25.2", "@esbuild/win32-ia32": "0.25.2", "@esbuild/win32-x64": "0.25.2" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ=="],
 
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
     "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
 
-    "eslint": ["eslint@9.22.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.19.2", "@eslint/config-helpers": "^0.1.0", "@eslint/core": "^0.12.0", "@eslint/eslintrc": "^3.3.0", "@eslint/js": "9.22.0", "@eslint/plugin-kit": "^0.2.7", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "@types/json-schema": "^7.0.15", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^8.3.0", "eslint-visitor-keys": "^4.2.0", "espree": "^10.3.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-9V/QURhsRN40xuHXWjV64yvrzMjcz7ZyNoF2jJFmy9j/SLk0u1OLSZgXi28MrXjymnjEGSR80WCdab3RGMDveQ=="],
+    "eslint": ["eslint@9.24.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.20.0", "@eslint/config-helpers": "^0.2.0", "@eslint/core": "^0.12.0", "@eslint/eslintrc": "^3.3.1", "@eslint/js": "9.24.0", "@eslint/plugin-kit": "^0.2.7", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "@types/json-schema": "^7.0.15", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^8.3.0", "eslint-visitor-keys": "^4.2.0", "espree": "^10.3.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-eh/jxIEJyZrvbWRe4XuVclLPDYSYYYgLy5zXGGxD6j8zjSAxFEzI2fL/8xNq6O2yKqVt+eF2YhV+hxjV6UKXwQ=="],
 
     "eslint-plugin-react-hooks": ["eslint-plugin-react-hooks@5.2.0", "", { "peerDependencies": { "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0" } }, "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg=="],
 
@@ -939,7 +940,7 @@
 
     "estree-util-to-js": ["estree-util-to-js@2.0.0", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "astring": "^1.8.0", "source-map": "^0.7.0" } }, "sha512-WDF+xj5rRWmD5tj6bIqRi6CkLIXbbNQUcxQHzGysQzvHmdYG2G7p/Tf0J0gpxGgkeMZNTIjT/AoSvC9Xehcgdg=="],
 
-    "estree-util-value-to-estree": ["estree-util-value-to-estree@3.3.2", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-hYH1aSvQI63Cvq3T3loaem6LW4u72F187zW4FHpTrReJSm6W66vYTFNO1vH/chmcOulp1HlAj1pxn8Ag0oXI5Q=="],
+    "estree-util-value-to-estree": ["estree-util-value-to-estree@3.3.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-Db+m1WSD4+mUO7UgMeKkAwdbfNWwIxLt48XF2oFU9emPfXkIu+k5/nlOj313v7wqtAPo0f9REhUvznFrPkG8CQ=="],
 
     "estree-util-visit": ["estree-util-visit@2.0.0", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/unist": "^3.0.0" } }, "sha512-m5KgiH85xAhhW8Wta0vShLcUvOsh3LLPI2YVwcbio1l7E09NTLL1EyMZFM1OyWowoH0skScNbhOPl4kcBgzTww=="],
 
@@ -1175,9 +1176,9 @@
 
     "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
 
-    "lint-staged": ["lint-staged@15.5.0", "", { "dependencies": { "chalk": "^5.4.1", "commander": "^13.1.0", "debug": "^4.4.0", "execa": "^8.0.1", "lilconfig": "^3.1.3", "listr2": "^8.2.5", "micromatch": "^4.0.8", "pidtree": "^0.6.0", "string-argv": "^0.3.2", "yaml": "^2.7.0" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-WyCzSbfYGhK7cU+UuDDkzUiytbfbi0ZdPy2orwtM75P3WTtQBzmG40cCxIa8Ii2+XjfxzLH6Be46tUfWS85Xfg=="],
+    "lint-staged": ["lint-staged@15.5.1", "", { "dependencies": { "chalk": "^5.4.1", "commander": "^13.1.0", "debug": "^4.4.0", "execa": "^8.0.1", "lilconfig": "^3.1.3", "listr2": "^8.2.5", "micromatch": "^4.0.8", "pidtree": "^0.6.0", "string-argv": "^0.3.2", "yaml": "^2.7.0" }, "bin": { "lint-staged": "bin/lint-staged.js" } }, "sha512-6m7u8mue4Xn6wK6gZvSCQwBvMBR36xfY24nF5bMTf2MHDYG6S3yhJuOgdYVw99hsjyDt2d4z168b3naI8+NWtQ=="],
 
-    "listr2": ["listr2@8.2.5", "", { "dependencies": { "cli-truncate": "^4.0.0", "colorette": "^2.0.20", "eventemitter3": "^5.0.1", "log-update": "^6.1.0", "rfdc": "^1.4.1", "wrap-ansi": "^9.0.0" } }, "sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ=="],
+    "listr2": ["listr2@8.3.2", "", { "dependencies": { "cli-truncate": "^4.0.0", "colorette": "^2.0.20", "eventemitter3": "^5.0.1", "log-update": "^6.1.0", "rfdc": "^1.4.1", "wrap-ansi": "^9.0.0" } }, "sha512-vsBzcU4oE+v0lj4FhVLzr9dBTv4/fHIa57l+GCwovP8MoFNZJTOhGU8PXd4v2VJCbECAaijBiHntiekFMLvo0g=="],
 
     "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
 
@@ -1263,9 +1264,9 @@
 
     "micromark-extension-gfm-task-list-item": ["micromark-extension-gfm-task-list-item@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw=="],
 
-    "micromark-extension-mdx-expression": ["micromark-extension-mdx-expression@3.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-mdx-expression": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-events-to-acorn": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-sI0nwhUDz97xyzqJAbHQhp5TfaxEvZZZ2JDqUo+7NvyIYG6BZ5CPPqj2ogUoPJlmXHBnyZUzISg9+oUmU6tUjQ=="],
+    "micromark-extension-mdx-expression": ["micromark-extension-mdx-expression@3.0.1", "", { "dependencies": { "@types/estree": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-mdx-expression": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-events-to-acorn": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-dD/ADLJ1AeMvSAKBwO22zG22N4ybhe7kFIZ3LsDI0GlsNr2A3KYxb0LdC1u5rj4Nw+CHKY0RVdnHX8vj8ejm4Q=="],
 
-    "micromark-extension-mdx-jsx": ["micromark-extension-mdx-jsx@3.0.1", "", { "dependencies": { "@types/acorn": "^4.0.0", "@types/estree": "^1.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "micromark-factory-mdx-expression": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-events-to-acorn": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-vNuFb9czP8QCtAQcEJn0UJQJZA8Dk6DXKBqx+bg/w0WGuSxDxNr7hErW89tHUY31dUW4NqEOWwmEUNhjTFmHkg=="],
+    "micromark-extension-mdx-jsx": ["micromark-extension-mdx-jsx@3.0.2", "", { "dependencies": { "@types/estree": "^1.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "micromark-factory-mdx-expression": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-events-to-acorn": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-e5+q1DjMh62LZAJOnDraSSbDMvGJ8x3cbjygy2qFEi7HCeUT4BDKCvMozPozcD6WmOt6sVvYDNBKhFSz3kjOVQ=="],
 
     "micromark-extension-mdx-md": ["micromark-extension-mdx-md@2.0.0", "", { "dependencies": { "micromark-util-types": "^2.0.0" } }, "sha512-EpAiszsB3blw4Rpba7xTOUptcFeBFi+6PY8VnJ2hhimH+vCQDirWgsMpz7w1XcZE7LVrSAUGb9VJpG9ghlYvYQ=="],
 
@@ -1277,7 +1278,7 @@
 
     "micromark-factory-label": ["micromark-factory-label@2.0.1", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg=="],
 
-    "micromark-factory-mdx-expression": ["micromark-factory-mdx-expression@2.0.2", "", { "dependencies": { "@types/estree": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-events-to-acorn": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-position-from-estree": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-5E5I2pFzJyg2CtemqAbcyCktpHXuJbABnsb32wX2U8IQKhhVFBqkcZR5LRm1WVoFqa4kTueZK4abep7wdo9nrw=="],
+    "micromark-factory-mdx-expression": ["micromark-factory-mdx-expression@2.0.3", "", { "dependencies": { "@types/estree": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-events-to-acorn": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-position-from-estree": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-kQnEtA3vzucU2BkrIa8/VaSAsP+EJ3CKOvhMuJgOEGg9KDC6OAY6nSnNDVRiVNRqj7Y4SlSzcStaH/5jge8JdQ=="],
 
     "micromark-factory-space": ["micromark-factory-space@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg=="],
 
@@ -1299,7 +1300,7 @@
 
     "micromark-util-encode": ["micromark-util-encode@2.0.1", "", {}, "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw=="],
 
-    "micromark-util-events-to-acorn": ["micromark-util-events-to-acorn@2.0.2", "", { "dependencies": { "@types/acorn": "^4.0.0", "@types/estree": "^1.0.0", "@types/unist": "^3.0.0", "devlop": "^1.0.0", "estree-util-visit": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-Fk+xmBrOv9QZnEDguL9OI9/NQQp6Hz4FuQ4YmCb/5V7+9eAh1s6AYSvL20kHkD67YIg7EpE54TiSlcsf3vyZgA=="],
+    "micromark-util-events-to-acorn": ["micromark-util-events-to-acorn@2.0.3", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/unist": "^3.0.0", "devlop": "^1.0.0", "estree-util-visit": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-jmsiEIiZ1n7X1Rr5k8wVExBQCg5jy4UXVADItHmNk1zkwEVhBuIUKRu3fqv+hs4nxLISi2DQGlqIOGiFxgbfHg=="],
 
     "micromark-util-html-tag-name": ["micromark-util-html-tag-name@2.0.1", "", {}, "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA=="],
 
@@ -1339,7 +1340,7 @@
 
     "mute-stream": ["mute-stream@2.0.0", "", {}, "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA=="],
 
-    "nanoid": ["nanoid@5.1.4", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-GTFcMIDgR7tqji/LpSY8rtg464VnJl/j6ypoehYnuGb+Y8qZUdtKB8WVCXon0UEZgFDbuUxpIl//6FHLHgXSNA=="],
+    "nanoid": ["nanoid@5.1.5", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw=="],
 
     "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
 
@@ -1425,11 +1426,11 @@
 
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
 
-    "react": ["react@19.0.0", "", {}, "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ=="],
+    "react": ["react@19.1.0", "", {}, "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg=="],
 
     "react-day-picker": ["react-day-picker@8.10.1", "", { "peerDependencies": { "date-fns": "^2.28.0 || ^3.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA=="],
 
-    "react-dom": ["react-dom@19.0.0", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ=="],
+    "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
 
     "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
 
@@ -1487,7 +1488,7 @@
 
     "remark-parse": ["remark-parse@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "micromark-util-types": "^2.0.0", "unified": "^11.0.0" } }, "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA=="],
 
-    "remark-rehype": ["remark-rehype@11.1.1", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "mdast-util-to-hast": "^13.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ=="],
+    "remark-rehype": ["remark-rehype@11.1.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "mdast-util-to-hast": "^13.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw=="],
 
     "remark-stringify": ["remark-stringify@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw=="],
 
@@ -1507,7 +1508,7 @@
 
     "rfdc": ["rfdc@1.4.1", "", {}, "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA=="],
 
-    "rollup": ["rollup@4.36.0", "", { "dependencies": { "@types/estree": "1.0.6" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.36.0", "@rollup/rollup-android-arm64": "4.36.0", "@rollup/rollup-darwin-arm64": "4.36.0", "@rollup/rollup-darwin-x64": "4.36.0", "@rollup/rollup-freebsd-arm64": "4.36.0", "@rollup/rollup-freebsd-x64": "4.36.0", "@rollup/rollup-linux-arm-gnueabihf": "4.36.0", "@rollup/rollup-linux-arm-musleabihf": "4.36.0", "@rollup/rollup-linux-arm64-gnu": "4.36.0", "@rollup/rollup-linux-arm64-musl": "4.36.0", "@rollup/rollup-linux-loongarch64-gnu": "4.36.0", "@rollup/rollup-linux-powerpc64le-gnu": "4.36.0", "@rollup/rollup-linux-riscv64-gnu": "4.36.0", "@rollup/rollup-linux-s390x-gnu": "4.36.0", "@rollup/rollup-linux-x64-gnu": "4.36.0", "@rollup/rollup-linux-x64-musl": "4.36.0", "@rollup/rollup-win32-arm64-msvc": "4.36.0", "@rollup/rollup-win32-ia32-msvc": "4.36.0", "@rollup/rollup-win32-x64-msvc": "4.36.0", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-zwATAXNQxUcd40zgtQG0ZafcRK4g004WtEl7kbuhTWPvf07PsfohXl39jVUvPF7jvNAIkKPQ2XrsDlWuxBd++Q=="],
+    "rollup": ["rollup@4.39.0", "", { "dependencies": { "@types/estree": "1.0.7" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.39.0", "@rollup/rollup-android-arm64": "4.39.0", "@rollup/rollup-darwin-arm64": "4.39.0", "@rollup/rollup-darwin-x64": "4.39.0", "@rollup/rollup-freebsd-arm64": "4.39.0", "@rollup/rollup-freebsd-x64": "4.39.0", "@rollup/rollup-linux-arm-gnueabihf": "4.39.0", "@rollup/rollup-linux-arm-musleabihf": "4.39.0", "@rollup/rollup-linux-arm64-gnu": "4.39.0", "@rollup/rollup-linux-arm64-musl": "4.39.0", "@rollup/rollup-linux-loongarch64-gnu": "4.39.0", "@rollup/rollup-linux-powerpc64le-gnu": "4.39.0", "@rollup/rollup-linux-riscv64-gnu": "4.39.0", "@rollup/rollup-linux-riscv64-musl": "4.39.0", "@rollup/rollup-linux-s390x-gnu": "4.39.0", "@rollup/rollup-linux-x64-gnu": "4.39.0", "@rollup/rollup-linux-x64-musl": "4.39.0", "@rollup/rollup-win32-arm64-msvc": "4.39.0", "@rollup/rollup-win32-ia32-msvc": "4.39.0", "@rollup/rollup-win32-x64-msvc": "4.39.0", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-thI8kNc02yNvnmJp8dr3fNWJ9tCONDhp6TV35X6HkKGGs9E6q7YWCHbe5vKiTa7TAiNcFEmXKj3X/pG2b3ci0g=="],
 
     "rrweb-cssom": ["rrweb-cssom@0.8.0", "", {}, "sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw=="],
 
@@ -1519,7 +1520,7 @@
 
     "saxes": ["saxes@6.0.0", "", { "dependencies": { "xmlchars": "^2.2.0" } }, "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA=="],
 
-    "scheduler": ["scheduler@0.25.0", "", {}, "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA=="],
+    "scheduler": ["scheduler@0.26.0", "", {}, "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="],
 
     "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
@@ -1531,7 +1532,7 @@
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
 
-    "shiki": ["shiki@3.2.1", "", { "dependencies": { "@shikijs/core": "3.2.1", "@shikijs/engine-javascript": "3.2.1", "@shikijs/engine-oniguruma": "3.2.1", "@shikijs/langs": "3.2.1", "@shikijs/themes": "3.2.1", "@shikijs/types": "3.2.1", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-VML/2o1/KGYkEf/stJJ+s9Ypn7jUKQPomGLGYso4JJFMFxVDyPNsjsI3MB3KLjlMOeH44gyaPdXC6rik2WXvUQ=="],
+    "shiki": ["shiki@3.2.2", "", { "dependencies": { "@shikijs/core": "3.2.2", "@shikijs/engine-javascript": "3.2.2", "@shikijs/engine-oniguruma": "3.2.2", "@shikijs/langs": "3.2.2", "@shikijs/themes": "3.2.2", "@shikijs/types": "3.2.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-0qWBkM2t/0NXPRcVgtLhtHv6Ak3Q5yI4K/ggMqcgLRKm4+pCs3namgZlhlat/7u2CuqNtlShNs9lENOG6n7UaQ=="],
 
     "siginfo": ["siginfo@2.0.0", "", {}, "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g=="],
 
@@ -1589,9 +1590,9 @@
 
     "symbol-tree": ["symbol-tree@3.2.4", "", {}, "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="],
 
-    "tailwind-merge": ["tailwind-merge@3.0.2", "", {}, "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw=="],
+    "tailwind-merge": ["tailwind-merge@3.2.0", "", {}, "sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA=="],
 
-    "tailwindcss": ["tailwindcss@4.0.14", "", {}, "sha512-92YT2dpt671tFiHH/e1ok9D987N9fHD5VWoly1CdPD/Cd1HMglvZwP3nx2yTj2lbXDAHt8QssZkxTLCCTNL+xw=="],
+    "tailwindcss": ["tailwindcss@4.1.3", "", {}, "sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g=="],
 
     "tailwindcss-animate": ["tailwindcss-animate@1.0.7", "", { "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders" } }, "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA=="],
 
@@ -1623,7 +1624,7 @@
 
     "trough": ["trough@2.2.0", "", {}, "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw=="],
 
-    "ts-api-utils": ["ts-api-utils@2.0.1", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w=="],
+    "ts-api-utils": ["ts-api-utils@2.1.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ=="],
 
     "ts-morph": ["ts-morph@18.0.0", "", { "dependencies": { "@ts-morph/common": "~0.19.0", "code-block-writer": "^12.0.0" } }, "sha512-Kg5u0mk19PIIe4islUI/HWRvm9bC1lHejK4S0oh1zaZ77TMZAEmQC0sHQYiu2RgCQFZKXz1fMVi/7nOOeirznA=="],
 
@@ -1633,29 +1634,29 @@
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
-    "turbo": ["turbo@2.4.4", "", { "optionalDependencies": { "turbo-darwin-64": "2.4.4", "turbo-darwin-arm64": "2.4.4", "turbo-linux-64": "2.4.4", "turbo-linux-arm64": "2.4.4", "turbo-windows-64": "2.4.4", "turbo-windows-arm64": "2.4.4" }, "bin": { "turbo": "bin/turbo" } }, "sha512-N9FDOVaY3yz0YCOhYIgOGYad7+m2ptvinXygw27WPLQvcZDl3+0Sa77KGVlLSiuPDChOUEnTKE9VJwLSi9BPGQ=="],
+    "turbo": ["turbo@2.5.0", "", { "optionalDependencies": { "turbo-darwin-64": "2.5.0", "turbo-darwin-arm64": "2.5.0", "turbo-linux-64": "2.5.0", "turbo-linux-arm64": "2.5.0", "turbo-windows-64": "2.5.0", "turbo-windows-arm64": "2.5.0" }, "bin": { "turbo": "bin/turbo" } }, "sha512-PvSRruOsitjy6qdqwIIyolv99+fEn57gP6gn4zhsHTEcCYgXPhv6BAxzAjleS8XKpo+Y582vTTA9nuqYDmbRuA=="],
 
-    "turbo-darwin-64": ["turbo-darwin-64@2.4.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-5kPvRkLAfmWI0MH96D+/THnDMGXlFNmjeqNRj5grLKiry+M9pKj3pRuScddAXPdlxjO5Ptz06UNaOQrrYGTx1g=="],
+    "turbo-darwin-64": ["turbo-darwin-64@2.5.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-fP1hhI9zY8hv0idym3hAaXdPi80TLovmGmgZFocVAykFtOxF+GlfIgM/l4iLAV9ObIO4SUXPVWHeBZQQ+Hpjag=="],
 
-    "turbo-darwin-arm64": ["turbo-darwin-arm64@2.4.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-/gtHPqbGQXDFhrmy+Q/MFW2HUTUlThJ97WLLSe4bxkDrKHecDYhAjbZ4rN3MM93RV9STQb3Tqy4pZBtsd4DfCw=="],
+    "turbo-darwin-arm64": ["turbo-darwin-arm64@2.5.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-p9sYq7kXH7qeJwIQE86cOWv/xNqvow846l6c/qWc26Ib1ci5W7V0sI5thsrP3eH+VA0d+SHalTKg5SQXgNQBWA=="],
 
-    "turbo-linux-64": ["turbo-linux-64@2.4.4", "", { "os": "linux", "cpu": "x64" }, "sha512-SR0gri4k0bda56hw5u9VgDXLKb1Q+jrw4lM7WAhnNdXvVoep4d6LmnzgMHQQR12Wxl3KyWPbkz9d1whL6NTm2Q=="],
+    "turbo-linux-64": ["turbo-linux-64@2.5.0", "", { "os": "linux", "cpu": "x64" }, "sha512-1iEln2GWiF3iPPPS1HQJT6ZCFXynJPd89gs9SkggH2EJsj3eRUSVMmMC8y6d7bBbhBFsiGGazwFIYrI12zs6uQ=="],
 
-    "turbo-linux-arm64": ["turbo-linux-arm64@2.4.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-COXXwzRd3vslQIfJhXUklgEqlwq35uFUZ7hnN+AUyXx7hUOLIiD5NblL+ETrHnhY4TzWszrbwUMfe2BYWtaPQg=="],
+    "turbo-linux-arm64": ["turbo-linux-arm64@2.5.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-bKBcbvuQHmsX116KcxHJuAcppiiBOfivOObh2O5aXNER6mce7YDDQJy00xQQNp1DhEfcSV2uOsvb3O3nN2cbcA=="],
 
-    "turbo-windows-64": ["turbo-windows-64@2.4.4", "", { "os": "win32", "cpu": "x64" }, "sha512-PV9rYNouGz4Ff3fd6sIfQy5L7HT9a4fcZoEv8PKRavU9O75G7PoDtm8scpHU10QnK0QQNLbE9qNxOAeRvF0fJg=="],
+    "turbo-windows-64": ["turbo-windows-64@2.5.0", "", { "os": "win32", "cpu": "x64" }, "sha512-9BCo8oQ7BO7J0K913Czbc3tw8QwLqn2nTe4E47k6aVYkM12ASTScweXPTuaPFP5iYXAT6z5Dsniw704Ixa5eGg=="],
 
-    "turbo-windows-arm64": ["turbo-windows-arm64@2.4.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-403sqp9t5sx6YGEC32IfZTVWkRAixOQomGYB8kEc6ZD+//LirSxzeCHCnM8EmSXw7l57U1G+Fb0kxgTcKPU/Lg=="],
+    "turbo-windows-arm64": ["turbo-windows-arm64@2.5.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-OUHCV+ueXa3UzfZ4co/ueIHgeq9B2K48pZwIxKSm5VaLVuv8M13MhM7unukW09g++dpdrrE1w4IOVgxKZ0/exg=="],
 
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
 
-    "type-fest": ["type-fest@4.37.0", "", {}, "sha512-S/5/0kFftkq27FPNye0XM1e2NsnoD/3FS+pBmbjmmtLT6I+i344KoOf7pvXreaFsDamWeaJX55nczA1m5PsBDg=="],
+    "type-fest": ["type-fest@4.39.1", "", {}, "sha512-uW9qzd66uyHYxwyVBYiwS4Oi0qZyUqwjU+Oevr6ZogYiXt99EOYtwvzMSLw1c3lYo2HzJsep/NB23iEVEgjG/w=="],
 
     "typescript": ["typescript@5.8.2", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ=="],
 
-    "typescript-eslint": ["typescript-eslint@8.26.1", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.26.1", "@typescript-eslint/parser": "8.26.1", "@typescript-eslint/utils": "8.26.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-t/oIs9mYyrwZGRpDv3g+3K6nZ5uhKEMt2oNmAPwaY4/ye0+EH4nXIPYNtkYFS6QHm+1DFg34DbglYBz5P9Xysg=="],
+    "typescript-eslint": ["typescript-eslint@8.29.1", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.29.1", "@typescript-eslint/parser": "8.29.1", "@typescript-eslint/utils": "8.29.1" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <5.9.0" } }, "sha512-f8cDkvndhbQMPcysk6CUSGBWV+g1utqdn71P5YKwMumVMOG/5k7cHq0KyG4O52nB0oKS4aN2Tp5+wB4APJGC+w=="],
 
-    "undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="],
+    "undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
 
     "unified": ["unified@11.0.5", "", { "dependencies": { "@types/unist": "^3.0.0", "bail": "^2.0.0", "devlop": "^1.0.0", "extend": "^3.0.0", "is-plain-obj": "^4.0.0", "trough": "^2.0.0", "vfile": "^6.0.0" } }, "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA=="],
 
@@ -1695,11 +1696,11 @@
 
     "vfile-location": ["vfile-location@5.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg=="],
 
-    "vfile-matter": ["vfile-matter@5.0.0", "", { "dependencies": { "vfile": "^6.0.0", "yaml": "^2.0.0" } }, "sha512-jhPSqlj8hTSkTXOqyxbUeZAFFVq/iwu/jukcApEqc/7DOidaAth6rDc0Zgg0vWpzUnWkwFP7aK28l6nBmxMqdQ=="],
+    "vfile-matter": ["vfile-matter@5.0.1", "", { "dependencies": { "vfile": "^6.0.0", "yaml": "^2.0.0" } }, "sha512-o6roP82AiX0XfkyTHyRCMXgHfltUNlXSEqCIS80f+mbAyiQBE2fxtDVMtseyytGx75sihiJFo/zR6r/4LTs2Cw=="],
 
     "vfile-message": ["vfile-message@4.0.2", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw=="],
 
-    "vite": ["vite@6.2.2", "", { "dependencies": { "esbuild": "^0.25.0", "postcss": "^8.5.3", "rollup": "^4.30.1" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-yW7PeMM+LkDzc7CgJuRLMW2Jz0FxMOsVJ8Lv3gpgW9WLcb9cTW+121UEr1hvmfR7w3SegR5ItvYyzVz1vxNJgQ=="],
+    "vite": ["vite@6.2.6", "", { "dependencies": { "esbuild": "^0.25.0", "postcss": "^8.5.3", "rollup": "^4.30.1" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw=="],
 
     "vite-node": ["vite-node@3.1.1", "", { "dependencies": { "cac": "^6.7.14", "debug": "^4.4.0", "es-module-lexer": "^1.6.0", "pathe": "^2.0.3", "vite": "^5.0.0 || ^6.0.0" }, "bin": { "vite-node": "vite-node.mjs" } }, "sha512-V+IxPAE2FvXpTCHXyNem0M+gWm6J7eRyWPR6vYoG/Gl+IscNOjXzztUhimQgTxaAoUoj40Qqimaa0NLIOOAH4w=="],
 
@@ -1741,7 +1742,7 @@
 
     "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
-    "yaml": ["yaml@2.7.0", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA=="],
+    "yaml": ["yaml@2.7.1", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ=="],
 
     "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
 
@@ -1765,6 +1766,8 @@
 
     "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
 
+    "@eslint/plugin-kit/@eslint/core": ["@eslint/core@0.13.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw=="],
+
     "@humanfs/node/@humanwhocodes/retry": ["@humanwhocodes/retry@0.3.1", "", {}, "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA=="],
 
     "@inquirer/core/ansi-escapes": ["ansi-escapes@4.3.2", "", { "dependencies": { "type-fest": "^0.21.3" } }, "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ=="],
@@ -1773,14 +1776,13 @@
 
     "@repo/vite-basic/typescript": ["typescript@5.7.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw=="],
 
-    "@repo/web/@types/node": ["@types/node@20.17.24", "", { "dependencies": { "undici-types": "~6.19.2" } }, "sha512-d7fGCyB96w9BnWQrOsJtpyiSaBcAYYr75bnK6ZRjDbql2cGLj/3GsL5OYmLPNq76l7Gf2q4Rv9J2o6h5CrD9sA=="],
+    "@repo/web/@types/node": ["@types/node@20.17.30", "", { "dependencies": { "undici-types": "~6.19.2" } }, "sha512-7zf4YyHA+jvBNfVrk2Gtvs6x7E8V+YDW05bNfG2XkWDJfYRXrTiP/DsB2zSYTaHX0bGIujTBQdMVAhb+j7mwpg=="],
 
     "@repo/web/cmdk": ["cmdk@1.0.0", "", { "dependencies": { "@radix-ui/react-dialog": "1.0.5", "@radix-ui/react-primitive": "1.0.3" }, "peerDependencies": { "react": "^18.0.0", "react-dom": "^18.0.0" } }, "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q=="],
 
     "@repo/web/lucide-react": ["lucide-react@0.482.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-XM8PzHzSrg8ATmmO+fzf+JyYlVVdQnJjuyLDj2p4V2zEtcKeBNAqAoJIGFv1x2HSBa7kT8gpYUxwdQ0g7nypfw=="],
 
     "@testing-library/dom/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
-    "@repo/web/nanoid": ["nanoid@5.1.5", "", { "bin": { "nanoid": "bin/nanoid.js" } }, "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw=="],
 
     "@ts-morph/common/minimatch": ["minimatch@7.4.6", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw=="],
 
@@ -1810,7 +1812,7 @@
 
     "parse-entities/@types/unist": ["@types/unist@2.0.11", "", {}, "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="],
 
-    "postcss/nanoid": ["nanoid@3.3.10", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-vSJJTG+t/dIKAUhUDw/dLdZ9s//5OxcHqLaDWWrW4Cdq7o6tdLIczUkMXt2MBNmk6sJRZBZRXVixs7URY1CmIg=="],
+    "postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
     "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
 
@@ -1828,6 +1830,8 @@
 
     "shadcn/https-proxy-agent": ["https-proxy-agent@6.2.1", "", { "dependencies": { "agent-base": "^7.0.2", "debug": "4" } }, "sha512-ONsE3+yfZF2caH5+bJlcddtWqNI3Gvs5A38+ngvljxaBiRXRswym2c7yf8UAeFpRFKjFNHIFEHqR/OLAWJzyiA=="],
 
+    "shadcn/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
+
     "sharp/semver": ["semver@7.7.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA=="],
 
     "simple-swizzle/is-arrayish": ["is-arrayish@0.3.2", "", {}, "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="],
@@ -1876,7 +1880,7 @@
 
     "log-update/slice-ansi/is-fullwidth-code-point": ["is-fullwidth-code-point@5.0.0", "", { "dependencies": { "get-east-asian-width": "^1.0.0" } }, "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA=="],
 
-    "next/postcss/nanoid": ["nanoid@3.3.10", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-vSJJTG+t/dIKAUhUDw/dLdZ9s//5OxcHqLaDWWrW4Cdq7o6tdLIczUkMXt2MBNmk6sJRZBZRXVixs7URY1CmIg=="],
+    "next/postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
     "restore-cursor/onetime/mimic-fn": ["mimic-fn@2.1.0", "", {}, "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="],
 
@@ -1886,6 +1890,8 @@
 
     "shadcn/execa/signal-exit": ["signal-exit@3.0.7", "", {}, "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="],
 
+    "shadcn/postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
     "yargs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
     "yargs/string-width/is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
diff --git a/package.json b/package.json
index b58c761d..6e3a7e7d 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "vercel:install": "turbo run vercel:install",
     "build": "turbo run build",
     "registry:build": "turbo run registry:build",
+    "start": "turbo run start",
     "prepare": "husky"
   },
   "devDependencies": {
diff --git a/turbo.json b/turbo.json
index 0e0aa7fc..f20b335e 100644
--- a/turbo.json
+++ b/turbo.json
@@ -26,6 +26,10 @@
     "test:watch": {
       "cache": false,
       "persistent": true
+    },
+    "start": {
+      "cache": false,
+      "persistent": true
     }
   }
 }

From 81fa49a9b5508493ba5b5007120e92bd740020de Mon Sep 17 00:00:00 2001
From: Kian Bazza <kian@bazza.dev>
Date: Sat, 12 Apr 2025 19:02:22 -0400
Subject: [PATCH 3/8] refactor(data-table-filter): registry item files
 re-organization (#54)

---
 apps/web/app/demos/server/tst-query/_/data.ts |    2 +-
 .../web/app/demos/server/tst-query/_/fetch.ts |   24 +-
 .../app/demos/server/tst-query/_/filters.tsx  |    2 +-
 .../demos/server/tst-query/_/issues-table.tsx |    6 +-
 .../app/demos/server/tst-query/_/queries.ts   |    2 +-
 apps/web/app/demos/server/tst-query/page.tsx  |    2 +-
 apps/web/public/r/filters-v2.json             |  140 ++
 apps/web/registry.json                        |  120 ++
 .../__tests__/data-table-filters.test.tsx     |    9 +-
 .../components/active-filters.tsx             |  162 ++
 .../components/data-table-filter.tsx          | 1759 +----------------
 .../components/filter-actions.tsx             |   24 +
 .../components/filter-operator.tsx            |  322 +++
 .../components/filter-selector.tsx            |  185 ++
 .../components/filter-subject.tsx             |   17 +
 .../components/filter-value.tsx               |  748 +++++++
 .../{lib => core}/filters.ts                  |  482 +----
 .../data-table-filter-v2/core/operators.ts    |  406 ++++
 .../{lib/filters.types.ts => core/types.ts}   |    0
 .../hooks/use-data-table-filters.tsx          |  308 +++
 .../registry/data-table-filter-v2/index.tsx   |    2 +
 .../integrations/tanstack-table/filter-fns.ts |   33 +
 .../tanstack-table/index.tsx}                 |   47 +-
 .../data-table-filter-v2/lib/filter-fns.ts    |  129 +-
 .../data-table-filter-v2/lib/helpers.ts       |   64 +
 .../ui/debounced-input.tsx                    |   49 +
 bun.lock                                      |   22 +-
 examples/vite-basic/package.json              |   24 +-
 examples/vite-basic/src/App.tsx               |   20 +-
 .../components/active-filters.tsx             |  162 ++
 .../components/data-table-filter.tsx          |   69 +
 .../components/filter-actions.tsx             |   24 +
 .../components/filter-operator.tsx            |  322 +++
 .../components/filter-selector.tsx            |  185 ++
 .../components/filter-subject.tsx             |   17 +
 .../components/filter-value.tsx               |  748 +++++++
 .../data-table-filter/core/filters.ts         |  444 +++++
 .../data-table-filter/core/operators.ts       |  406 ++++
 .../data-table-filter/core/types.ts           |  329 +++
 .../hooks/use-data-table-filters.tsx          |  308 +++
 .../components/data-table-filter/index.tsx    |    2 +
 .../integrations/tanstack-table/filter-fns.ts |   33 +
 .../integrations/tanstack-table/index.tsx     |  109 +
 .../components/data-table-filter/lib/array.ts |  144 ++
 .../data-table-filter/lib/filter-fns.ts       |  175 ++
 .../data-table-filter/lib/helpers.ts          |   64 +
 .../components/data-table-filter/lib/memo.ts  |   35 +
 .../data-table-filter/ui/debounced-input.tsx  |   47 +
 .../components/demo/ssf-tst-query/columns.tsx |  184 ++
 .../demo/ssf-tst-query/data-table.tsx         |   95 +
 .../src/components/demo/ssf-tst-query/data.ts |  535 +++++
 .../components/demo/ssf-tst-query/fetch.ts    |  129 ++
 .../components/demo/ssf-tst-query/filters.tsx |   59 +
 .../demo/ssf-tst-query/issues-table.tsx       |  167 ++
 .../components/demo/ssf-tst-query/queries.ts  |   55 +
 .../ssf-tst-query/query-client-provider.tsx   |   17 +
 .../demo/ssf-tst-query/table-skeleton.tsx     |   78 +
 .../components/demo/ssf-tst-query/types.ts    |   32 +
 .../components/demo/ssf-tst-query/utils.ts    |   17 +
 .../vite-basic/src/components/ui/skeleton.tsx |   13 +
 examples/vite-basic/src/main.tsx              |    5 +-
 examples/vite-basic/tsconfig.app.json         |   15 +-
 62 files changed, 7697 insertions(+), 2437 deletions(-)
 create mode 100644 apps/web/public/r/filters-v2.json
 create mode 100644 apps/web/registry/data-table-filter-v2/components/active-filters.tsx
 create mode 100644 apps/web/registry/data-table-filter-v2/components/filter-actions.tsx
 create mode 100644 apps/web/registry/data-table-filter-v2/components/filter-operator.tsx
 create mode 100644 apps/web/registry/data-table-filter-v2/components/filter-selector.tsx
 create mode 100644 apps/web/registry/data-table-filter-v2/components/filter-subject.tsx
 create mode 100644 apps/web/registry/data-table-filter-v2/components/filter-value.tsx
 rename apps/web/registry/data-table-filter-v2/{lib => core}/filters.ts (51%)
 create mode 100644 apps/web/registry/data-table-filter-v2/core/operators.ts
 rename apps/web/registry/data-table-filter-v2/{lib/filters.types.ts => core/types.ts} (100%)
 create mode 100644 apps/web/registry/data-table-filter-v2/hooks/use-data-table-filters.tsx
 create mode 100644 apps/web/registry/data-table-filter-v2/index.tsx
 create mode 100644 apps/web/registry/data-table-filter-v2/integrations/tanstack-table/filter-fns.ts
 rename apps/web/registry/data-table-filter-v2/{lib/filters-tst.ts => integrations/tanstack-table/index.tsx} (65%)
 create mode 100644 apps/web/registry/data-table-filter-v2/lib/helpers.ts
 create mode 100644 apps/web/registry/data-table-filter-v2/ui/debounced-input.tsx
 create mode 100644 examples/vite-basic/src/components/data-table-filter/components/active-filters.tsx
 create mode 100644 examples/vite-basic/src/components/data-table-filter/components/data-table-filter.tsx
 create mode 100644 examples/vite-basic/src/components/data-table-filter/components/filter-actions.tsx
 create mode 100644 examples/vite-basic/src/components/data-table-filter/components/filter-operator.tsx
 create mode 100644 examples/vite-basic/src/components/data-table-filter/components/filter-selector.tsx
 create mode 100644 examples/vite-basic/src/components/data-table-filter/components/filter-subject.tsx
 create mode 100644 examples/vite-basic/src/components/data-table-filter/components/filter-value.tsx
 create mode 100644 examples/vite-basic/src/components/data-table-filter/core/filters.ts
 create mode 100644 examples/vite-basic/src/components/data-table-filter/core/operators.ts
 create mode 100644 examples/vite-basic/src/components/data-table-filter/core/types.ts
 create mode 100644 examples/vite-basic/src/components/data-table-filter/hooks/use-data-table-filters.tsx
 create mode 100644 examples/vite-basic/src/components/data-table-filter/index.tsx
 create mode 100644 examples/vite-basic/src/components/data-table-filter/integrations/tanstack-table/filter-fns.ts
 create mode 100644 examples/vite-basic/src/components/data-table-filter/integrations/tanstack-table/index.tsx
 create mode 100644 examples/vite-basic/src/components/data-table-filter/lib/array.ts
 create mode 100644 examples/vite-basic/src/components/data-table-filter/lib/filter-fns.ts
 create mode 100644 examples/vite-basic/src/components/data-table-filter/lib/helpers.ts
 create mode 100644 examples/vite-basic/src/components/data-table-filter/lib/memo.ts
 create mode 100644 examples/vite-basic/src/components/data-table-filter/ui/debounced-input.tsx
 create mode 100644 examples/vite-basic/src/components/demo/ssf-tst-query/columns.tsx
 create mode 100644 examples/vite-basic/src/components/demo/ssf-tst-query/data-table.tsx
 create mode 100644 examples/vite-basic/src/components/demo/ssf-tst-query/data.ts
 create mode 100644 examples/vite-basic/src/components/demo/ssf-tst-query/fetch.ts
 create mode 100644 examples/vite-basic/src/components/demo/ssf-tst-query/filters.tsx
 create mode 100644 examples/vite-basic/src/components/demo/ssf-tst-query/issues-table.tsx
 create mode 100644 examples/vite-basic/src/components/demo/ssf-tst-query/queries.ts
 create mode 100644 examples/vite-basic/src/components/demo/ssf-tst-query/query-client-provider.tsx
 create mode 100644 examples/vite-basic/src/components/demo/ssf-tst-query/table-skeleton.tsx
 create mode 100644 examples/vite-basic/src/components/demo/ssf-tst-query/types.ts
 create mode 100644 examples/vite-basic/src/components/demo/ssf-tst-query/utils.ts
 create mode 100644 examples/vite-basic/src/components/ui/skeleton.tsx

diff --git a/apps/web/app/demos/server/tst-query/_/data.ts b/apps/web/app/demos/server/tst-query/_/data.ts
index 3b976c84..a6c900cb 100644
--- a/apps/web/app/demos/server/tst-query/_/data.ts
+++ b/apps/web/app/demos/server/tst-query/_/data.ts
@@ -1,5 +1,5 @@
 import { lorem } from '@ndaidong/txtgen'
-import { add, differenceInDays, sub } from 'date-fns'
+import { sub } from 'date-fns'
 import {
   CircleCheckIcon,
   CircleDashedIcon,
diff --git a/apps/web/app/demos/server/tst-query/_/fetch.ts b/apps/web/app/demos/server/tst-query/_/fetch.ts
index eb032e78..a6c2ed47 100644
--- a/apps/web/app/demos/server/tst-query/_/fetch.ts
+++ b/apps/web/app/demos/server/tst-query/_/fetch.ts
@@ -1,14 +1,12 @@
+import type { FiltersState } from '@/registry/data-table-filter-v2/core/types'
 import {
-  __dateFilterFn,
-  __multiOptionFilterFn,
-  __numberFilterFn,
-  __optionFilterFn,
-  __textFilterFn,
+  dateFilterFn,
+  multiOptionFilterFn,
+  numberFilterFn,
+  optionFilterFn,
+  textFilterFn,
 } from '@/registry/data-table-filter-v2/lib/filter-fns'
-import { getFacetedUniqueValues } from '@/registry/data-table-filter-v2/lib/filters'
-import type { FiltersState } from '@/registry/data-table-filter-v2/lib/filters.types'
 import { ISSUE_LABELS, ISSUE_STATUSES, USERS, generateIssues } from './data'
-import { columnsConfig } from './filters'
 import type { Issue } from './types'
 import { isAnyOf, sleep } from './utils'
 
@@ -31,30 +29,30 @@ export async function fetchIssues(filters?: FiltersState) {
         const value = issue[columnId] as string | undefined
 
         if (!value) return false
-        return __textFilterFn(value, filter)
+        return textFilterFn(value, filter)
       }
 
       if (isAnyOf(columnId, ['status', 'assignee'])) {
         const value = (issue[columnId] as any)?.id
         if (!value) return false
-        return __optionFilterFn(value, filter)
+        return optionFilterFn(value, filter)
       }
 
       if (isAnyOf(columnId, ['labels'])) {
         const value = ((issue[columnId] as any) ?? []).map((l: any) => l.id)
         if (!value) return false
-        return __multiOptionFilterFn(value, filter)
+        return multiOptionFilterFn(value, filter)
       }
 
       if (isAnyOf(columnId, ['estimatedHours'])) {
         const value = issue[columnId] as number
-        return __numberFilterFn(value, filter)
+        return numberFilterFn(value, filter)
       }
 
       if (isAnyOf(columnId, ['startDate', 'endDate'])) {
         const value = issue[columnId] as Date | undefined
         if (!value) return false
-        return __dateFilterFn(value, filter)
+        return dateFilterFn(value, filter)
       }
 
       throw new Error(`Unknown columnId: ${columnId}`)
diff --git a/apps/web/app/demos/server/tst-query/_/filters.tsx b/apps/web/app/demos/server/tst-query/_/filters.tsx
index bbc526eb..919c45e9 100644
--- a/apps/web/app/demos/server/tst-query/_/filters.tsx
+++ b/apps/web/app/demos/server/tst-query/_/filters.tsx
@@ -1,4 +1,4 @@
-import { createColumnConfigHelper } from '@/registry/data-table-filter-v2/lib/filters'
+import { createColumnConfigHelper } from '@/registry/data-table-filter-v2/core/filters'
 import {
   CalendarArrowUpIcon,
   CircleDotDashedIcon,
diff --git a/apps/web/app/demos/server/tst-query/_/issues-table.tsx b/apps/web/app/demos/server/tst-query/_/issues-table.tsx
index c376eb79..248c4549 100644
--- a/apps/web/app/demos/server/tst-query/_/issues-table.tsx
+++ b/apps/web/app/demos/server/tst-query/_/issues-table.tsx
@@ -5,9 +5,9 @@ import { cn } from '@/lib/utils'
 import {
   DataTableFilter,
   useDataTableFilters,
-} from '@/registry/data-table-filter-v2/components/data-table-filter'
-import { createTSTColumns } from '@/registry/data-table-filter-v2/lib/filters-tst'
-import type { FiltersState } from '@/registry/data-table-filter-v2/lib/filters.types'
+} from '@/registry/data-table-filter-v2'
+import type { FiltersState } from '@/registry/data-table-filter-v2/core/types'
+import { createTSTColumns } from '@/registry/data-table-filter-v2/integrations/tanstack-table'
 import { useQuery } from '@tanstack/react-query'
 import {
   getCoreRowModel,
diff --git a/apps/web/app/demos/server/tst-query/_/queries.ts b/apps/web/app/demos/server/tst-query/_/queries.ts
index 0cafd1fd..a10dc20b 100644
--- a/apps/web/app/demos/server/tst-query/_/queries.ts
+++ b/apps/web/app/demos/server/tst-query/_/queries.ts
@@ -1,4 +1,4 @@
-import type { FiltersState } from '@/registry/data-table-filter-v2/lib/filters.types'
+import type { FiltersState } from '@/registry/data-table-filter-v2/core/types'
 import type { QueryOptions } from '@tanstack/react-query'
 import {
   fetchFacetedLabels,
diff --git a/apps/web/app/demos/server/tst-query/page.tsx b/apps/web/app/demos/server/tst-query/page.tsx
index e0193c8e..8e8ce8e5 100644
--- a/apps/web/app/demos/server/tst-query/page.tsx
+++ b/apps/web/app/demos/server/tst-query/page.tsx
@@ -2,7 +2,7 @@
 
 import { CodeBlock } from '@/components/code-block'
 import { NavBar } from '@/components/nav-bar'
-import type { FiltersState } from '@/registry/data-table-filter-v2/lib/filters.types'
+import type { FiltersState } from '@/registry/data-table-filter-v2/core/types'
 import { parseAsJson, useQueryState } from 'nuqs'
 import { z } from 'zod'
 import { IssuesTable } from './_/issues-table'
diff --git a/apps/web/public/r/filters-v2.json b/apps/web/public/r/filters-v2.json
new file mode 100644
index 00000000..d9c98415
--- /dev/null
+++ b/apps/web/public/r/filters-v2.json
@@ -0,0 +1,140 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "filters-v2",
+  "type": "registry:block",
+  "title": "Data table filter",
+  "author": "Kian Bazarjani <kian@bazza.dev>",
+  "description": "A powerful data table filter component inspired by Linear.",
+  "dependencies": ["@tanstack/react-table@8.21.2", "date-fns"],
+  "registryDependencies": [
+    "button",
+    "calendar",
+    "checkbox",
+    "command",
+    "dropdown-menu",
+    "input",
+    "label",
+    "popover",
+    "separator",
+    "slider",
+    "table",
+    "tabs",
+    "use-mobile"
+  ],
+  "files": [
+    {
+      "path": "registry/data-table-filter-v2/index.tsx",
+      "content": "export { useDataTableFilters } from './hooks/use-data-table-filters'\nexport { DataTableFilter } from './components/data-table-filter'\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/index.tsx"
+    },
+    {
+      "path": "registry/data-table-filter-v2/components/active-filters.tsx",
+      "content": "import { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport { X } from 'lucide-react'\nimport { useEffect, useRef, useState } from 'react'\nimport type {\n  Column,\n  ColumnDataType,\n  DataTableFilterActions,\n  FilterModel,\n  FilterStrategy,\n  FiltersState,\n} from '../core/types'\nimport { getColumn } from '../lib/helpers'\nimport { FilterOperator } from './filter-operator'\nimport { FilterSubject } from './filter-subject'\nimport { FilterValue } from './filter-value'\n\ninterface ActiveFiltersProps<TData> {\n  columns: Column<TData>[]\n  filters: FiltersState\n  actions: DataTableFilterActions\n  strategy: FilterStrategy\n}\n\nexport function ActiveFilters<TData>({\n  columns,\n  filters,\n  actions,\n  strategy,\n}: ActiveFiltersProps<TData>) {\n  return (\n    <>\n      {filters.map((filter) => {\n        const id = filter.columnId\n\n        const column = getColumn(columns, id)\n\n        // Skip if no filter value\n        if (!filter.values) return null\n\n        return (\n          <ActiveFilter\n            key={`active-filter-${filter.columnId}`}\n            filter={filter}\n            column={column}\n            actions={actions}\n            strategy={strategy}\n          />\n        )\n      })}\n    </>\n  )\n}\n\ninterface ActiveFilterProps<TData, TType extends ColumnDataType> {\n  filter: FilterModel<TType>\n  column: Column<TData, TType>\n  actions: DataTableFilterActions\n  strategy: FilterStrategy\n}\n\n// Generic render function for a filter with type-safe value\nexport function ActiveFilter<TData, TType extends ColumnDataType>({\n  filter,\n  column,\n  actions,\n  strategy,\n}: ActiveFilterProps<TData, TType>) {\n  return (\n    <div className=\"flex h-7 items-center rounded-2xl border border-border bg-background shadow-xs text-xs\">\n      <FilterSubject column={column} />\n      <Separator orientation=\"vertical\" />\n      <FilterOperator filter={filter} column={column} actions={actions} />\n      <Separator orientation=\"vertical\" />\n      <FilterValue\n        filter={filter}\n        column={column}\n        actions={actions}\n        strategy={strategy}\n      />\n      <Separator orientation=\"vertical\" />\n      <Button\n        variant=\"ghost\"\n        className=\"rounded-none rounded-r-2xl text-xs w-7 h-full\"\n        onClick={() => actions.removeFilter(filter.columnId)}\n      >\n        <X className=\"size-4 -translate-x-0.5\" />\n      </Button>\n    </div>\n  )\n}\n\nexport function ActiveFiltersMobileContainer({\n  children,\n}: { children: React.ReactNode }) {\n  const scrollContainerRef = useRef<HTMLDivElement>(null)\n  const [showLeftBlur, setShowLeftBlur] = useState(false)\n  const [showRightBlur, setShowRightBlur] = useState(true)\n\n  // Check if there's content to scroll and update blur states\n  const checkScroll = () => {\n    if (scrollContainerRef.current) {\n      const { scrollLeft, scrollWidth, clientWidth } =\n        scrollContainerRef.current\n\n      // Show left blur if scrolled to the right\n      setShowLeftBlur(scrollLeft > 0)\n\n      // Show right blur if there's more content to scroll to the right\n      // Add a small buffer (1px) to account for rounding errors\n      setShowRightBlur(scrollLeft + clientWidth < scrollWidth - 1)\n    }\n  }\n\n  // Log blur states for debugging\n  // useEffect(() => {\n  //   console.log('left:', showLeftBlur, '  right:', showRightBlur)\n  // }, [showLeftBlur, showRightBlur])\n\n  // Set up ResizeObserver to monitor container size\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n  useEffect(() => {\n    if (scrollContainerRef.current) {\n      const resizeObserver = new ResizeObserver(() => {\n        checkScroll()\n      })\n      resizeObserver.observe(scrollContainerRef.current)\n      return () => {\n        resizeObserver.disconnect()\n      }\n    }\n  }, [])\n\n  // Update blur states when children change\n  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n  useEffect(() => {\n    checkScroll()\n  }, [children])\n\n  return (\n    <div className=\"relative w-full overflow-x-hidden\">\n      {/* Left blur effect */}\n      {showLeftBlur && (\n        <div className=\"absolute left-0 top-0 bottom-0 w-16 z-10 pointer-events-none bg-gradient-to-r from-background to-transparent animate-in fade-in-0\" />\n      )}\n\n      {/* Scrollable container */}\n      <div\n        ref={scrollContainerRef}\n        className=\"flex gap-2 overflow-x-scroll no-scrollbar\"\n        onScroll={checkScroll}\n      >\n        {children}\n      </div>\n\n      {/* Right blur effect */}\n      {showRightBlur && (\n        <div className=\"absolute right-0 top-0 bottom-0 w-16 z-10 pointer-events-none bg-gradient-to-l from-background to-transparent animate-in fade-in-0 \" />\n      )}\n    </div>\n  )\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/components/active-filters.tsx"
+    },
+    {
+      "path": "registry/data-table-filter-v2/components/data-table-filter.tsx",
+      "content": "'use client'\n\nimport { useIsMobile } from '@/hooks/use-mobile'\nimport type {\n  Column,\n  DataTableFilterActions,\n  FilterStrategy,\n  FiltersState,\n} from '../core/types'\nimport { ActiveFilters, ActiveFiltersMobileContainer } from './active-filters'\nimport { FilterActions } from './filter-actions'\nimport { FilterSelector } from './filter-selector'\n\ninterface DataTableFilterProps<TData> {\n  columns: Column<TData>[]\n  filters: FiltersState\n  actions: DataTableFilterActions\n  strategy: FilterStrategy\n}\n\nexport function DataTableFilter<TData>({\n  columns,\n  filters,\n  actions,\n  strategy,\n}: DataTableFilterProps<TData>) {\n  const isMobile = useIsMobile()\n  if (isMobile) {\n    return (\n      <div className=\"flex w-full items-start justify-between gap-2\">\n        <div className=\"flex gap-1\">\n          <FilterSelector\n            columns={columns}\n            filters={filters}\n            actions={actions}\n            strategy={strategy}\n          />\n          <FilterActions hasFilters={filters.length > 0} actions={actions} />\n        </div>\n        <ActiveFiltersMobileContainer>\n          <ActiveFilters\n            columns={columns}\n            filters={filters}\n            actions={actions}\n            strategy={strategy}\n          />\n        </ActiveFiltersMobileContainer>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"flex w-full items-start justify-between gap-2\">\n      <div className=\"flex md:flex-wrap gap-2 w-full flex-1\">\n        <FilterSelector\n          columns={columns}\n          filters={filters}\n          actions={actions}\n          strategy={strategy}\n        />\n        <ActiveFilters\n          columns={columns}\n          filters={filters}\n          actions={actions}\n          strategy={strategy}\n        />\n      </div>\n      <FilterActions hasFilters={filters.length > 0} actions={actions} />\n    </div>\n  )\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/components/data-table-filter.tsx"
+    },
+    {
+      "path": "registry/data-table-filter-v2/components/filter-actions.tsx",
+      "content": "import { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\nimport { FilterXIcon } from 'lucide-react'\nimport { memo } from 'react'\nimport type { DataTableFilterActions } from '../core/types'\n\ninterface FilterActionsProps {\n  hasFilters: boolean\n  actions?: DataTableFilterActions\n}\n\nexport const FilterActions = memo(__FilterActions)\nfunction __FilterActions({ hasFilters, actions }: FilterActionsProps) {\n  return (\n    <Button\n      className={cn('h-7 !px-2', !hasFilters && 'hidden')}\n      variant=\"destructive\"\n      onClick={actions?.removeAllFilters}\n    >\n      <FilterXIcon />\n      <span className=\"hidden md:block\">Clear</span>\n    </Button>\n  )\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/components/filter-actions.tsx"
+    },
+    {
+      "path": "registry/data-table-filter-v2/components/filter-operator.tsx",
+      "content": "import { Button } from '@/components/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command'\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { useState } from 'react'\nimport {\n  dateFilterDetails,\n  filterTypeOperatorDetails,\n  multiOptionFilterDetails,\n  numberFilterDetails,\n  optionFilterDetails,\n  textFilterDetails,\n} from '../core/operators'\nimport type {\n  Column,\n  ColumnDataType,\n  DataTableFilterActions,\n  FilterModel,\n  FilterOperators,\n  FilterStrategy,\n} from '../core/types'\n\ninterface FilterOperatorProps<TData, TType extends ColumnDataType> {\n  column: Column<TData, TType>\n  filter: FilterModel<TType>\n  actions: DataTableFilterActions\n}\n\n// Renders the filter operator display and menu for a given column filter\n// The filter operator display is the label and icon for the filter operator\n// The filter operator menu is the dropdown menu for the filter operator\nexport function FilterOperator<TData, TType extends ColumnDataType>({\n  column,\n  filter,\n  actions,\n}: FilterOperatorProps<TData, TType>) {\n  const [open, setOpen] = useState<boolean>(false)\n\n  const close = () => setOpen(false)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          className=\"m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs\"\n        >\n          <FilterOperatorDisplay filter={filter} columnType={column.type} />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"w-fit p-0 origin-(--radix-popover-content-transform-origin)\"\n      >\n        <Command loop>\n          <CommandInput placeholder=\"Search...\" />\n          <CommandEmpty>No results.</CommandEmpty>\n          <CommandList className=\"max-h-fit\">\n            <FilterOperatorController\n              filter={filter}\n              column={column}\n              actions={actions}\n              closeController={close}\n            />\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\ninterface FilterOperatorDisplayProps<TType extends ColumnDataType> {\n  filter: FilterModel<TType>\n  columnType: TType\n}\n\nexport function FilterOperatorDisplay<TType extends ColumnDataType>({\n  filter,\n  columnType,\n}: FilterOperatorDisplayProps<TType>) {\n  const operator = filterTypeOperatorDetails[columnType][filter.operator]\n\n  return <span>{operator.label}</span>\n}\n\ninterface FilterOperatorControllerProps<TData, TType extends ColumnDataType> {\n  filter: FilterModel<TType>\n  column: Column<TData, TType>\n  actions: DataTableFilterActions\n  closeController: () => void\n}\n\n/*\n *\n * TODO: Reduce into a single component. Each data type does not need it's own controller.\n *\n */\nexport function FilterOperatorController<TData, TType extends ColumnDataType>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, TType>) {\n  switch (column.type) {\n    case 'option':\n      return (\n        <FilterOperatorOptionController\n          filter={filter as FilterModel<'option'>}\n          column={column as Column<TData, 'option'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'multiOption':\n      return (\n        <FilterOperatorMultiOptionController\n          filter={filter as FilterModel<'multiOption'>}\n          column={column as Column<TData, 'multiOption'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'date':\n      return (\n        <FilterOperatorDateController\n          filter={filter as FilterModel<'date'>}\n          column={column as Column<TData, 'date'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'text':\n      return (\n        <FilterOperatorTextController\n          filter={filter as FilterModel<'text'>}\n          column={column as Column<TData, 'text'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'number':\n      return (\n        <FilterOperatorNumberController\n          filter={filter as FilterModel<'number'>}\n          column={column as Column<TData, 'number'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    default:\n      return null\n  }\n}\n\nfunction FilterOperatorOptionController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'option'>) {\n  const filterDetails = optionFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(optionFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['option'])\n    closeController()\n  }\n\n  return (\n    <CommandGroup heading=\"Operators\">\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nfunction FilterOperatorMultiOptionController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'multiOption'>) {\n  const filterDetails = multiOptionFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(multiOptionFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(\n      column.id,\n      value as FilterOperators['multiOption'],\n    )\n    closeController()\n  }\n\n  return (\n    <CommandGroup heading=\"Operators\">\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nfunction FilterOperatorDateController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'date'>) {\n  const filterDetails = dateFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(dateFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['date'])\n    closeController()\n  }\n\n  return (\n    <CommandGroup>\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nexport function FilterOperatorTextController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'text'>) {\n  const filterDetails = textFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(textFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['text'])\n    closeController()\n  }\n\n  return (\n    <CommandGroup heading=\"Operators\">\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nfunction FilterOperatorNumberController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'number'>) {\n  // Show all related operators\n  const filterDetails = numberFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(numberFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['number'])\n    closeController()\n  }\n\n  return (\n    <div>\n      <CommandGroup heading=\"Operators\">\n        {relatedFilters.map((r) => (\n          <CommandItem\n            onSelect={() => changeOperator(r.value)}\n            value={r.value}\n            key={r.value}\n          >\n            {r.label} {/**/}\n          </CommandItem>\n        ))}\n      </CommandGroup>\n    </div>\n  )\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/components/filter-operator.tsx"
+    },
+    {
+      "path": "registry/data-table-filter-v2/components/filter-selector.tsx",
+      "content": "import { Button } from '@/components/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { cn } from '@/lib/utils'\nimport { ArrowRightIcon, FilterIcon } from 'lucide-react'\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport type {\n  Column,\n  ColumnDataType,\n  DataTableFilterActions,\n  FilterStrategy,\n  FiltersState,\n} from '../core/types'\nimport { getColumn } from '../lib/helpers'\nimport { FilterValueController } from './filter-value'\n\ninterface FilterSelectorProps<TData> {\n  filters: FiltersState\n  columns: Column<TData>[]\n  actions: DataTableFilterActions\n  strategy: FilterStrategy\n}\n\nexport const FilterSelector = memo(__FilterSelector) as typeof __FilterSelector\n\nfunction __FilterSelector<TData>({\n  filters,\n  columns,\n  actions,\n  strategy,\n}: FilterSelectorProps<TData>) {\n  const [open, setOpen] = useState(false)\n  const [value, setValue] = useState('')\n  const [property, setProperty] = useState<string | undefined>(undefined)\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const column = property ? getColumn(columns, property) : undefined\n  const filter = property\n    ? filters.find((f) => f.columnId === property)\n    : undefined\n\n  const hasFilters = filters.length > 0\n\n  useEffect(() => {\n    if (property && inputRef) {\n      inputRef.current?.focus()\n      setValue('')\n    }\n  }, [property])\n\n  useEffect(() => {\n    if (!open) setTimeout(() => setValue(''), 150)\n  }, [open])\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: need filters to be updated\n  const content = useMemo(\n    () =>\n      property && column ? (\n        <FilterValueController\n          filter={filter!}\n          column={column as Column<TData, ColumnDataType>}\n          actions={actions}\n          strategy={strategy}\n        />\n      ) : (\n        <Command loop>\n          <CommandInput\n            value={value}\n            onValueChange={setValue}\n            ref={inputRef}\n            placeholder=\"Search...\"\n          />\n          <CommandEmpty>No results.</CommandEmpty>\n          <CommandList className=\"max-h-fit\">\n            <CommandGroup>\n              {columns.map((column) => (\n                <FilterableColumn\n                  key={column.id}\n                  column={column}\n                  setProperty={setProperty}\n                />\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      ),\n    [property, column, filter, filters, columns, actions, value],\n  )\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={async (value) => {\n        setOpen(value)\n        if (!value) setTimeout(() => setProperty(undefined), 100)\n      }}\n    >\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          className={cn('h-7', hasFilters && 'w-fit !px-2')}\n        >\n          <FilterIcon className=\"size-4\" />\n          {!hasFilters && <span>Filter</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        side=\"bottom\"\n        className=\"w-fit p-0 origin-(--radix-popover-content-transform-origin)\"\n      >\n        {content}\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport function FilterableColumn<TData, TType extends ColumnDataType, TVal>({\n  column,\n  setProperty,\n}: {\n  column: Column<TData, TType, TVal>\n  setProperty: (value: string) => void\n}) {\n  const itemRef = useRef<HTMLDivElement>(null)\n\n  const prefetch = useCallback(() => {\n    column.prefetchOptions()\n    column.prefetchValues()\n    column.prefetchFacetedUniqueValues()\n  }, [column])\n\n  useEffect(() => {\n    const target = itemRef.current\n\n    if (!target) return\n\n    // Set up MutationObserver\n    const observer = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        if (mutation.type === 'attributes') {\n          const isSelected = target.getAttribute('data-selected') === 'true'\n          if (isSelected) prefetch()\n        }\n      }\n    })\n\n    // Set up observer\n    observer.observe(target, {\n      attributes: true,\n      attributeFilter: ['data-selected'],\n    })\n\n    // Cleanup on unmount\n    return () => observer.disconnect()\n  }, [prefetch])\n\n  return (\n    <CommandItem\n      ref={itemRef}\n      onSelect={() => setProperty(column.id)}\n      className=\"group\"\n      onMouseEnter={prefetch}\n    >\n      <div className=\"flex w-full items-center justify-between\">\n        <div className=\"inline-flex items-center gap-1.5\">\n          {<column.icon strokeWidth={2.25} className=\"size-4\" />}\n          <span>{column.displayName}</span>\n        </div>\n        <ArrowRightIcon className=\"size-4 opacity-0 group-aria-selected:opacity-100\" />\n      </div>\n    </CommandItem>\n  )\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/components/filter-selector.tsx"
+    },
+    {
+      "path": "registry/data-table-filter-v2/components/filter-subject.tsx",
+      "content": "import type { Column, ColumnDataType } from '../core/types'\n\ninterface FilterSubjectProps<TData, TType extends ColumnDataType> {\n  column: Column<TData, TType>\n}\n\nexport function FilterSubject<TData, TType extends ColumnDataType>({\n  column,\n}: FilterSubjectProps<TData, TType>) {\n  const hasIcon = !!column.icon\n  return (\n    <span className=\"flex select-none items-center gap-1 whitespace-nowrap px-2 font-medium\">\n      {hasIcon && <column.icon className=\"size-4 stroke-[2.25px]\" />}\n      <span>{column.displayName}</span>\n    </span>\n  )\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/components/filter-subject.tsx"
+    },
+    {
+      "path": "registry/data-table-filter-v2/components/filter-value.tsx",
+      "content": "import { Button } from '@/components/ui/button'\nimport { Calendar } from '@/components/ui/calendar'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command'\nimport { Input } from '@/components/ui/input'\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { Slider } from '@/components/ui/slider'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport { cn } from '@/lib/utils'\nimport { isEqual } from 'date-fns'\nimport { format } from 'date-fns'\nimport { Ellipsis } from 'lucide-react'\nimport {\n  cloneElement,\n  isValidElement,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport type { DateRange } from 'react-day-picker'\nimport { numberFilterDetails } from '../core/operators'\nimport type {\n  Column,\n  ColumnDataType,\n  DataTableFilterActions,\n  FilterModel,\n  FilterStrategy,\n} from '../core/types'\nimport { take } from '../lib/array'\nimport { DebouncedInput } from '../ui/debounced-input'\n\ninterface FilterValueProps<TData, TType extends ColumnDataType> {\n  filter: FilterModel<TType>\n  column: Column<TData, TType>\n  actions: DataTableFilterActions\n  strategy: FilterStrategy\n}\n\nexport const FilterValue = memo(__FilterValue) as typeof __FilterValue\n\nfunction __FilterValue<TData, TType extends ColumnDataType>({\n  filter,\n  column,\n  actions,\n  strategy,\n}: FilterValueProps<TData, TType>) {\n  return (\n    <Popover>\n      <PopoverAnchor className=\"h-full\" />\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          className=\"m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs\"\n        >\n          <FilterValueDisplay\n            filter={filter}\n            column={column}\n            actions={actions}\n          />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        side=\"bottom\"\n        className=\"w-fit p-0 origin-(--radix-popover-content-transform-origin)\"\n      >\n        <FilterValueController\n          filter={filter}\n          column={column}\n          actions={actions}\n          strategy={strategy}\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\ninterface FilterValueDisplayProps<TData, TType extends ColumnDataType> {\n  filter: FilterModel<TType>\n  column: Column<TData, TType>\n  actions: DataTableFilterActions\n}\n\nexport function FilterValueDisplay<TData, TType extends ColumnDataType>({\n  filter,\n  column,\n  actions,\n}: FilterValueDisplayProps<TData, TType>) {\n  switch (column.type) {\n    case 'option':\n      return (\n        <FilterValueOptionDisplay\n          filter={filter as FilterModel<'option'>}\n          column={column as Column<TData, 'option'>}\n          actions={actions}\n        />\n      )\n    case 'multiOption':\n      return (\n        <FilterValueMultiOptionDisplay\n          filter={filter as FilterModel<'multiOption'>}\n          column={column as Column<TData, 'multiOption'>}\n          actions={actions}\n        />\n      )\n    case 'date':\n      return (\n        <FilterValueDateDisplay\n          filter={filter as FilterModel<'date'>}\n          column={column as Column<TData, 'date'>}\n          actions={actions}\n        />\n      )\n    case 'text':\n      return (\n        <FilterValueTextDisplay\n          filter={filter as FilterModel<'text'>}\n          column={column as Column<TData, 'text'>}\n          actions={actions}\n        />\n      )\n    case 'number':\n      return (\n        <FilterValueNumberDisplay\n          filter={filter as FilterModel<'number'>}\n          column={column as Column<TData, 'number'>}\n          actions={actions}\n        />\n      )\n    default:\n      return null\n  }\n}\n\nexport function FilterValueOptionDisplay<TData>({\n  filter,\n  column,\n  actions,\n}: FilterValueDisplayProps<TData, 'option'>) {\n  const options = useMemo(() => column.getOptions(), [column])\n  const selected = options.filter((o) => filter?.values.includes(o.value))\n\n  // We display the selected options based on how many are selected\n  //\n  // If there is only one option selected, we display its icon and label\n  //\n  // If there are multiple options selected, we display:\n  // 1) up to 3 icons of the selected options\n  // 2) the number of selected options\n  if (selected.length === 1) {\n    const { label, icon: Icon } = selected[0]\n    const hasIcon = !!Icon\n    return (\n      <span className=\"inline-flex items-center gap-1\">\n        {hasIcon &&\n          (isValidElement(Icon) ? (\n            Icon\n          ) : (\n            <Icon className=\"size-4 text-primary\" />\n          ))}\n        <span>{label}</span>\n      </span>\n    )\n  }\n  const name = column.displayName.toLowerCase()\n  const pluralName = name.endsWith('s') ? `${name}es` : `${name}s`\n\n  const hasOptionIcons = !options?.some((o) => !o.icon)\n\n  return (\n    <div className=\"inline-flex items-center gap-0.5\">\n      {hasOptionIcons &&\n        take(selected, 3).map(({ value, icon }) => {\n          const Icon = icon!\n          return isValidElement(Icon) ? (\n            Icon\n          ) : (\n            <Icon key={value} className=\"size-4\" />\n          )\n        })}\n      <span className={cn(hasOptionIcons && 'ml-1.5')}>\n        {selected.length} {pluralName}\n      </span>\n    </div>\n  )\n}\n\nexport function FilterValueMultiOptionDisplay<TData>({\n  filter,\n  column,\n  actions,\n}: FilterValueDisplayProps<TData, 'multiOption'>) {\n  const options = useMemo(() => column.getOptions(), [column])\n  const selected = options.filter((o) => filter.values.includes(o.value))\n\n  if (selected.length === 1) {\n    const { label, icon: Icon } = selected[0]\n    const hasIcon = !!Icon\n    return (\n      <span className=\"inline-flex items-center gap-1.5\">\n        {hasIcon &&\n          (isValidElement(Icon) ? (\n            Icon\n          ) : (\n            <Icon className=\"size-4 text-primary\" />\n          ))}\n\n        <span>{label}</span>\n      </span>\n    )\n  }\n\n  const name = column.displayName.toLowerCase()\n\n  const hasOptionIcons = !options?.some((o) => !o.icon)\n\n  return (\n    <div className=\"inline-flex items-center gap-1.5\">\n      {hasOptionIcons && (\n        <div key=\"icons\" className=\"inline-flex items-center gap-0.5\">\n          {take(selected, 3).map(({ value, icon }) => {\n            const Icon = icon!\n            return isValidElement(Icon) ? (\n              cloneElement(Icon, { key: value })\n            ) : (\n              <Icon key={value} className=\"size-4\" />\n            )\n          })}\n        </div>\n      )}\n      <span>\n        {selected.length} {name}\n      </span>\n    </div>\n  )\n}\n\nfunction formatDateRange(start: Date, end: Date) {\n  const sameMonth = start.getMonth() === end.getMonth()\n  const sameYear = start.getFullYear() === end.getFullYear()\n\n  if (sameMonth && sameYear) {\n    return `${format(start, 'MMM d')} - ${format(end, 'd, yyyy')}`\n  }\n\n  if (sameYear) {\n    return `${format(start, 'MMM d')} - ${format(end, 'MMM d, yyyy')}`\n  }\n\n  return `${format(start, 'MMM d, yyyy')} - ${format(end, 'MMM d, yyyy')}`\n}\n\nexport function FilterValueDateDisplay<TData>({\n  filter,\n  column,\n  actions,\n}: FilterValueDisplayProps<TData, 'date'>) {\n  if (!filter) return null\n  if (filter.values.length === 0) return <Ellipsis className=\"size-4\" />\n  if (filter.values.length === 1) {\n    const value = filter.values[0]\n\n    const formattedDateStr = format(value, 'MMM d, yyyy')\n\n    return <span>{formattedDateStr}</span>\n  }\n\n  const formattedRangeStr = formatDateRange(filter.values[0], filter.values[1])\n\n  return <span>{formattedRangeStr}</span>\n}\n\nexport function FilterValueTextDisplay<TData>({\n  filter,\n  column,\n  actions,\n}: FilterValueDisplayProps<TData, 'text'>) {\n  if (!filter) return null\n  if (filter.values.length === 0 || filter.values[0].trim() === '')\n    return <Ellipsis className=\"size-4\" />\n\n  const value = filter.values[0]\n\n  return <span>{value}</span>\n}\n\nexport function FilterValueNumberDisplay<TData>({\n  filter,\n  column,\n  actions,\n}: FilterValueDisplayProps<TData, 'number'>) {\n  const maxFromMeta = column.max\n  const cappedMax = maxFromMeta ?? 2147483647\n\n  if (!filter) return null\n\n  if (\n    filter.operator === 'is between' ||\n    filter.operator === 'is not between'\n  ) {\n    const minValue = filter.values[0]\n    const maxValue =\n      filter.values[1] === Number.POSITIVE_INFINITY ||\n      filter.values[1] >= cappedMax\n        ? `${cappedMax}+`\n        : filter.values[1]\n\n    return (\n      <span className=\"tabular-nums tracking-tight\">\n        {minValue} and {maxValue}\n      </span>\n    )\n  }\n\n  if (!filter.values || filter.values.length === 0) {\n    return null\n  }\n\n  const value = filter.values[0]\n  return <span className=\"tabular-nums tracking-tight\">{value}</span>\n}\n\n/****** Property Filter Value Controller ******/\n\ninterface FilterValueControllerProps<TData, TType extends ColumnDataType> {\n  filter: FilterModel<TType>\n  column: Column<TData, TType>\n  actions: DataTableFilterActions\n  strategy: FilterStrategy\n}\n\nexport const FilterValueController = memo(\n  __FilterValueController,\n) as typeof __FilterValueController\n\nfunction __FilterValueController<TData, TType extends ColumnDataType>({\n  filter,\n  column,\n  actions,\n  strategy,\n}: FilterValueControllerProps<TData, TType>) {\n  switch (column.type) {\n    case 'option':\n      return (\n        <FilterValueOptionController\n          filter={filter as FilterModel<'option'>}\n          column={column as Column<TData, 'option'>}\n          actions={actions}\n          strategy={strategy}\n        />\n      )\n    case 'multiOption':\n      return (\n        <FilterValueMultiOptionController\n          filter={filter as FilterModel<'multiOption'>}\n          column={column as Column<TData, 'multiOption'>}\n          actions={actions}\n          strategy={strategy}\n        />\n      )\n    case 'date':\n      return (\n        <FilterValueDateController\n          filter={filter as FilterModel<'date'>}\n          column={column as Column<TData, 'date'>}\n          actions={actions}\n          strategy={strategy}\n        />\n      )\n    case 'text':\n      return (\n        <FilterValueTextController\n          filter={filter as FilterModel<'text'>}\n          column={column as Column<TData, 'text'>}\n          actions={actions}\n          strategy={strategy}\n        />\n      )\n    case 'number':\n      return (\n        <FilterValueNumberController\n          filter={filter as FilterModel<'number'>}\n          column={column as Column<TData, 'number'>}\n          actions={actions}\n          strategy={strategy}\n        />\n      )\n    default:\n      return null\n  }\n}\n\nexport function FilterValueOptionController<TData>({\n  filter,\n  column,\n  actions,\n  strategy,\n}: FilterValueControllerProps<TData, 'option'>) {\n  const options = useMemo(() => column.getOptions(), [column])\n  const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])\n\n  function handleOptionSelect(value: string, check: boolean) {\n    if (check) actions.addFilterValue(column, [value])\n    else actions.removeFilterValue(column, [value])\n  }\n\n  return (\n    <Command loop>\n      <CommandInput autoFocus placeholder=\"Search...\" />\n      <CommandEmpty>No results.</CommandEmpty>\n      <CommandList className=\"max-h-fit\">\n        <CommandGroup>\n          {options.map((v) => {\n            const checked = Boolean(filter?.values.includes(v.value))\n            const count = optionsCount?.get(v.value) ?? 0\n\n            return (\n              <CommandItem\n                key={v.value}\n                onSelect={() => {\n                  handleOptionSelect(v.value, !checked)\n                }}\n                className=\"group flex items-center justify-between gap-1.5\"\n              >\n                <div className=\"flex items-center gap-1.5\">\n                  <Checkbox\n                    checked={checked}\n                    className=\"opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100\"\n                  />\n                  {v.icon &&\n                    (isValidElement(v.icon) ? (\n                      v.icon\n                    ) : (\n                      <v.icon className=\"size-4 text-primary\" />\n                    ))}\n                  <span>\n                    {v.label}\n                    <sup\n                      className={cn(\n                        !optionsCount && 'hidden',\n                        'ml-0.5 tabular-nums tracking-tight text-muted-foreground',\n                        count === 0 && 'slashed-zero',\n                      )}\n                    >\n                      {count < 100 ? count : '100+'}\n                    </sup>\n                  </span>\n                </div>\n              </CommandItem>\n            )\n          })}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n\nexport function FilterValueMultiOptionController<TData>({\n  filter,\n  column,\n  actions,\n  strategy,\n}: FilterValueControllerProps<TData, 'multiOption'>) {\n  const options = useMemo(() => column.getOptions(), [column])\n  const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])\n\n  // Handles the selection/deselection of an option\n  function handleOptionSelect(value: string, check: boolean) {\n    if (check) actions.addFilterValue(column, [value])\n    else actions.removeFilterValue(column, [value])\n  }\n\n  return (\n    <Command loop>\n      <CommandInput autoFocus placeholder=\"Search...\" />\n      <CommandEmpty>No results.</CommandEmpty>\n      <CommandList>\n        <CommandGroup>\n          {options.map((v) => {\n            const checked = Boolean(filter?.values?.includes(v.value))\n            const count = optionsCount?.get(v.value) ?? 0\n\n            return (\n              <CommandItem\n                key={v.value}\n                onSelect={() => {\n                  handleOptionSelect(v.value, !checked)\n                }}\n                className=\"group flex items-center justify-between gap-1.5\"\n              >\n                <div className=\"flex items-center gap-1.5\">\n                  <Checkbox\n                    checked={checked}\n                    className=\"opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100\"\n                  />\n                  {v.icon &&\n                    (isValidElement(v.icon) ? (\n                      v.icon\n                    ) : (\n                      <v.icon className=\"size-4 text-primary\" />\n                    ))}\n                  <span>\n                    {v.label}\n                    <sup\n                      className={cn(\n                        !optionsCount && 'hidden',\n                        'ml-0.5 tabular-nums tracking-tight text-muted-foreground',\n                        count === 0 && 'slashed-zero',\n                      )}\n                    >\n                      {count < 100 ? count : '100+'}\n                    </sup>\n                  </span>\n                </div>\n              </CommandItem>\n            )\n          })}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n\nexport function FilterValueDateController<TData>({\n  filter,\n  column,\n  actions,\n}: FilterValueControllerProps<TData, 'date'>) {\n  const [date, setDate] = useState<DateRange | undefined>({\n    from: filter?.values[0] ?? new Date(),\n    to: filter?.values[1] ?? undefined,\n  })\n\n  function changeDateRange(value: DateRange | undefined) {\n    const start = value?.from\n    const end =\n      start && value && value.to && !isEqual(start, value.to)\n        ? value.to\n        : undefined\n\n    setDate({ from: start, to: end })\n\n    const isRange = start && end\n    const newValues = isRange ? [start, end] : start ? [start] : []\n\n    actions.setFilterValue(column, newValues)\n  }\n\n  return (\n    <Command>\n      <CommandList className=\"max-h-fit\">\n        <CommandGroup>\n          <div>\n            <Calendar\n              initialFocus\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={changeDateRange}\n              numberOfMonths={1}\n            />\n          </div>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n\nexport function FilterValueTextController<TData>({\n  filter,\n  column,\n  actions,\n}: FilterValueControllerProps<TData, 'text'>) {\n  const changeText = (value: string | number) => {\n    actions.setFilterValue(column, [String(value)])\n  }\n\n  return (\n    <Command>\n      <CommandList className=\"max-h-fit\">\n        <CommandGroup>\n          <CommandItem>\n            <DebouncedInput\n              placeholder=\"Search...\"\n              autoFocus\n              value={filter?.values[0] ?? ''}\n              onChange={changeText}\n            />\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n\nexport function FilterValueNumberController<TData>({\n  filter,\n  column,\n  actions,\n}: FilterValueControllerProps<TData, 'number'>) {\n  const [datasetMin, datasetMax] = useMemo(\n    () => column.getFacetedMinMaxValues(),\n    [column],\n  )\n  const [sliderMin, sliderMax] = [\n    column.min ?? datasetMin,\n    column.max ?? datasetMax,\n  ]\n\n  // Local state for values\n  const [values, setValues] = useState(filter?.values ?? [0, 0])\n\n  // Sync with parent filter changes\n  useEffect(() => {\n    if (\n      filter?.values &&\n      filter.values.length === values.length &&\n      filter.values.every((v, i) => v === values[i])\n    ) {\n      setValues(filter.values)\n    }\n  }, [filter?.values, values])\n\n  const isNumberRange =\n    filter && numberFilterDetails[filter.operator].target === 'multiple'\n\n  const changeNumber = (value: number[]) => {\n    setValues(value)\n    actions.setFilterValue(column, value)\n  }\n\n  const changeMinNumber = (value: number) => {\n    const newValues = [value, values[1]]\n    setValues(newValues)\n    actions.setFilterValue(column, newValues)\n  }\n\n  const changeMaxNumber = (value: number) => {\n    const newValues = [values[0], value]\n    setValues(newValues)\n    actions.setFilterValue(column, newValues)\n  }\n\n  const changeType = useCallback(\n    (type: 'single' | 'range') => {\n      const newValues =\n        type === 'single'\n          ? [values[0]] // Keep the first value for single mode\n          : [values[0], values[1] ?? datasetMax] // Use two values for range mode\n      const newOperator = type === 'single' ? 'is' : 'is between'\n\n      // Update local state\n      setValues(newValues)\n\n      // Update global filter state atomically\n      actions.setFilterOperator(column.id, newOperator)\n      actions.setFilterValue(column, newValues)\n    },\n    [values, datasetMax, column, actions],\n  )\n\n  return (\n    <Command>\n      <CommandList className=\"w-[300px] px-2 py-2\">\n        <CommandGroup>\n          <div className=\"flex flex-col w-full\">\n            <Tabs\n              value={isNumberRange ? 'range' : 'single'}\n              onValueChange={(v) => changeType(v as 'single' | 'range')}\n            >\n              <TabsList className=\"w-full *:text-xs\">\n                <TabsTrigger value=\"single\">Single</TabsTrigger>\n                <TabsTrigger value=\"range\">Range</TabsTrigger>\n              </TabsList>\n              <TabsContent value=\"single\" className=\"flex flex-col gap-4 mt-4\">\n                <Slider\n                  value={[values[0]]}\n                  onValueChange={(value) => changeNumber(value)}\n                  min={sliderMin}\n                  max={sliderMax}\n                  step={1}\n                  aria-orientation=\"horizontal\"\n                />\n                <div className=\"flex items-center gap-2\">\n                  <span className=\"text-xs font-medium\">Value</span>\n                  <Input\n                    id=\"single\"\n                    type=\"number\"\n                    value={values[0].toString()} // Use values[0] directly\n                    onChange={(e) => changeNumber([Number(e.target.value)])}\n                    min={datasetMin}\n                    max={datasetMax}\n                  />\n                </div>\n              </TabsContent>\n              <TabsContent value=\"range\" className=\"flex flex-col gap-4 mt-4\">\n                <Slider\n                  value={values} // Use values directly\n                  onValueChange={changeNumber}\n                  min={sliderMin}\n                  max={sliderMax}\n                  step={1}\n                  aria-orientation=\"horizontal\"\n                />\n                <div className=\"grid grid-cols-2 gap-4\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"text-xs font-medium\">Min</span>\n                    <DebouncedInput\n                      type=\"number\"\n                      value={values[0]}\n                      onChange={(v) => changeMinNumber(Number(v))}\n                      min={datasetMin}\n                      max={datasetMax}\n                    />\n                  </div>\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"text-xs font-medium\">Max</span>\n                    <DebouncedInput\n                      type=\"number\"\n                      value={values[1]}\n                      onChange={(v) => changeMaxNumber(Number(v))}\n                      min={datasetMin}\n                      max={datasetMax}\n                    />\n                  </div>\n                </div>\n              </TabsContent>\n            </Tabs>\n          </div>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/components/filter-value.tsx"
+    },
+    {
+      "path": "registry/data-table-filter-v2/core/filters.ts",
+      "content": "import { isAnyOf, uniq } from '../lib/array'\nimport { isColumnOptionArray } from '../lib/helpers'\nimport { memo } from '../lib/memo'\nimport type {\n  Column,\n  ColumnConfig,\n  ColumnDataType,\n  ColumnOption,\n  ElementType,\n  FilterStrategy,\n  Nullable,\n  TAccessorFn,\n  TOrderFn,\n  TTransformOptionFn,\n} from './types'\n\nclass ColumnConfigBuilder<\n  TData,\n  TType extends ColumnDataType = any,\n  TVal = unknown,\n  TId extends string = string, // Add TId generic\n> {\n  private config: Partial<ColumnConfig<TData, TType, TVal, TId>>\n\n  constructor(type: TType) {\n    this.config = { type } as Partial<ColumnConfig<TData, TType, TVal, TId>>\n  }\n\n  private clone(): ColumnConfigBuilder<TData, TType, TVal, TId> {\n    const newInstance = new ColumnConfigBuilder<TData, TType, TVal, TId>(\n      this.config.type as TType,\n    )\n    newInstance.config = { ...this.config }\n    return newInstance\n  }\n\n  id<TNewId extends string>(\n    value: TNewId,\n  ): ColumnConfigBuilder<TData, TType, TVal, TNewId> {\n    const newInstance = this.clone() as any // We'll refine this\n    newInstance.config.id = value\n    return newInstance as ColumnConfigBuilder<TData, TType, TVal, TNewId>\n  }\n\n  accessor<TNewVal>(\n    accessor: TAccessorFn<TData, TNewVal>,\n  ): ColumnConfigBuilder<TData, TType, TNewVal, TId> {\n    const newInstance = this.clone() as any\n    newInstance.config.accessor = accessor\n    return newInstance as ColumnConfigBuilder<TData, TType, TNewVal, TId>\n  }\n\n  displayName(value: string): ColumnConfigBuilder<TData, TType, TVal, TId> {\n    const newInstance = this.clone()\n    newInstance.config.displayName = value\n    return newInstance\n  }\n\n  icon(value: any): ColumnConfigBuilder<TData, TType, TVal, TId> {\n    const newInstance = this.clone()\n    newInstance.config.icon = value\n    return newInstance\n  }\n\n  min(\n    value: number,\n  ): ColumnConfigBuilder<\n    TData,\n    TType extends 'number' ? TType : never,\n    TVal,\n    TId\n  > {\n    if (this.config.type !== 'number') {\n      throw new Error('min() is only applicable to number columns')\n    }\n    const newInstance = this.clone() as any\n    newInstance.config.min = value\n    return newInstance\n  }\n\n  max(\n    value: number,\n  ): ColumnConfigBuilder<\n    TData,\n    TType extends 'number' ? TType : never,\n    TVal,\n    TId\n  > {\n    if (this.config.type !== 'number') {\n      throw new Error('max() is only applicable to number columns')\n    }\n    const newInstance = this.clone() as any\n    newInstance.config.max = value\n    return newInstance\n  }\n\n  options(\n    value: ColumnOption[],\n  ): ColumnConfigBuilder<\n    TData,\n    TType extends 'option' | 'multiOption' ? TType : never,\n    TVal,\n    TId\n  > {\n    if (!isAnyOf(this.config.type, ['option', 'multiOption'])) {\n      throw new Error(\n        'options() is only applicable to option or multiOption columns',\n      )\n    }\n    const newInstance = this.clone() as any\n    newInstance.config.options = value\n    return newInstance\n  }\n\n  transformOptionFn(\n    fn: TTransformOptionFn<TVal>,\n  ): ColumnConfigBuilder<\n    TData,\n    TType extends 'option' | 'multiOption' ? TType : never,\n    TVal,\n    TId\n  > {\n    if (!isAnyOf(this.config.type, ['option', 'multiOption'])) {\n      throw new Error(\n        'transformOptionFn() is only applicable to option or multiOption columns',\n      )\n    }\n    const newInstance = this.clone() as any\n    newInstance.config.transformOptionFn = fn\n    return newInstance\n  }\n\n  orderFn(\n    fn: TOrderFn<TVal>,\n  ): ColumnConfigBuilder<\n    TData,\n    TType extends 'option' | 'multiOption' ? TType : never,\n    TVal,\n    TId\n  > {\n    if (!isAnyOf(this.config.type, ['option', 'multiOption'])) {\n      throw new Error(\n        'orderFn() is only applicable to option or multiOption columns',\n      )\n    }\n    const newInstance = this.clone() as any\n    newInstance.config.orderFn = fn\n    return newInstance\n  }\n\n  build(): ColumnConfig<TData, TType, TVal, TId> {\n    if (!this.config.id) throw new Error('id is required')\n    if (!this.config.accessor) throw new Error('accessor is required')\n    if (!this.config.displayName) throw new Error('displayName is required')\n    if (!this.config.icon) throw new Error('icon is required')\n    return this.config as ColumnConfig<TData, TType, TVal, TId>\n  }\n}\n\n// Update the helper interface\ninterface FluentColumnConfigHelper<TData> {\n  text: () => ColumnConfigBuilder<TData, 'text', string>\n  number: () => ColumnConfigBuilder<TData, 'number', number>\n  date: () => ColumnConfigBuilder<TData, 'date', Date>\n  option: () => ColumnConfigBuilder<TData, 'option', string>\n  multiOption: () => ColumnConfigBuilder<TData, 'multiOption', string[]>\n}\n\n// Factory function remains mostly the same\nexport function createColumnConfigHelper<\n  TData,\n>(): FluentColumnConfigHelper<TData> {\n  return {\n    text: () => new ColumnConfigBuilder<TData, 'text', string>('text'),\n    number: () => new ColumnConfigBuilder<TData, 'number', number>('number'),\n    date: () => new ColumnConfigBuilder<TData, 'date', Date>('date'),\n    option: () => new ColumnConfigBuilder<TData, 'option', string>('option'),\n    multiOption: () =>\n      new ColumnConfigBuilder<TData, 'multiOption', string[]>('multiOption'),\n  }\n}\n\nexport function getColumnOptions<TData, TType extends ColumnDataType, TVal>(\n  column: ColumnConfig<TData, TType, TVal>,\n  data: TData[],\n  strategy: FilterStrategy,\n): ColumnOption[] {\n  if (!isAnyOf(column.type, ['option', 'multiOption'])) {\n    console.warn(\n      'Column options can only be retrieved for option and multiOption columns',\n    )\n    return []\n  }\n\n  if (strategy === 'server' && !column.options) {\n    throw new Error('column options are required for server-side filtering')\n  }\n\n  if (column.options) {\n    return column.options\n  }\n\n  const filtered = data\n    .flatMap(column.accessor)\n    .filter((v): v is NonNullable<TVal> => v !== undefined && v !== null)\n\n  let models = uniq(filtered)\n\n  if (column.orderFn) {\n    models = models.sort((m1, m2) =>\n      column.orderFn!(\n        m1 as ElementType<NonNullable<TVal>>,\n        m2 as ElementType<NonNullable<TVal>>,\n      ),\n    )\n  }\n\n  if (column.transformOptionFn) {\n    // Memoize transformOptionFn calls\n    const memoizedTransform = memo(\n      () => [models],\n      (deps) =>\n        deps[0].map((m) =>\n          column.transformOptionFn!(m as ElementType<NonNullable<TVal>>),\n        ),\n      { key: `transform-${column.id}` },\n    )\n    return memoizedTransform()\n  }\n\n  if (isColumnOptionArray(models)) return models\n\n  throw new Error(\n    `[data-table-filter] [${column.id}] Either provide static options, a transformOptionFn, or ensure the column data conforms to ColumnOption type`,\n  )\n}\n\nexport function getColumnValues<TData, TType extends ColumnDataType, TVal>(\n  column: ColumnConfig<TData, TType, TVal>,\n  data: TData[],\n) {\n  // Memoize accessor calls\n  const memoizedAccessor = memo(\n    () => [data],\n    (deps) =>\n      deps[0]\n        .flatMap(column.accessor)\n        .filter(\n          (v): v is NonNullable<TVal> => v !== undefined && v !== null,\n        ) as ElementType<NonNullable<TVal>>[],\n    { key: `accessor-${column.id}` },\n  )\n\n  const raw = memoizedAccessor()\n\n  if (!isAnyOf(column.type, ['option', 'multiOption'])) {\n    return raw\n  }\n\n  if (column.options) {\n    return raw\n      .map((v) => column.options?.find((o) => o.value === v)?.value)\n      .filter((v) => v !== undefined && v !== null)\n  }\n\n  if (column.transformOptionFn) {\n    const memoizedTransform = memo(\n      () => [raw],\n      (deps) =>\n        deps[0].map(\n          (v) => column.transformOptionFn!(v) as ElementType<NonNullable<TVal>>,\n        ),\n      { key: `transform-values-${column.id}` },\n    )\n    return memoizedTransform()\n  }\n\n  if (isColumnOptionArray(raw)) {\n    return raw\n  }\n\n  throw new Error(\n    `[data-table-filter] [${column.id}] Either provide static options, a transformOptionFn, or ensure the column data conforms to ColumnOption type`,\n  )\n}\n\nexport function getFacetedUniqueValues<\n  TData,\n  TType extends ColumnDataType,\n  TVal,\n>(\n  column: ColumnConfig<TData, TType, TVal>,\n  values: string[] | ColumnOption[],\n  strategy: FilterStrategy,\n): Map<string, number> | undefined {\n  if (!isAnyOf(column.type, ['option', 'multiOption'])) {\n    console.warn(\n      'Faceted unique values can only be retrieved for option and multiOption columns',\n    )\n    return new Map<string, number>()\n  }\n\n  if (strategy === 'server') {\n    return column.facetedOptions\n  }\n\n  const acc = new Map<string, number>()\n\n  if (isColumnOptionArray(values)) {\n    for (const option of values) {\n      const curr = acc.get(option.value) ?? 0\n      acc.set(option.value, curr + 1)\n    }\n  } else {\n    for (const option of values) {\n      const curr = acc.get(option as string) ?? 0\n      acc.set(option as string, curr + 1)\n    }\n  }\n\n  return acc\n}\n\nexport function getFacetedMinMaxValues<\n  TData,\n  TType extends ColumnDataType,\n  TVal,\n>(column: ColumnConfig<TData, TType, TVal>, data: TData[]): number[] {\n  if (column.type !== 'number') return [0, 0] // Only applicable to number columns\n\n  const values = data\n    .flatMap((row) => column.accessor(row) as Nullable<number>)\n    .filter((v): v is number => typeof v === 'number' && !Number.isNaN(v))\n\n  if (values.length === 0) {\n    return [column.min ?? 0, column.max ?? 100] // Fallback to config or reasonable defaults\n  }\n\n  const min = Math.min(...values)\n  const max = Math.max(...values)\n\n  // Apply config overrides if provided\n  return [\n    column.min !== undefined ? Math.max(min, column.min) : min,\n    column.max !== undefined ? Math.min(max, column.max) : max,\n  ]\n}\n\nexport function createColumns<TData>(\n  data: TData[],\n  columnConfigs: ReadonlyArray<ColumnConfig<TData, any, any, any>>,\n  strategy: FilterStrategy,\n): Column<TData>[] {\n  return columnConfigs.map((columnConfig) => {\n    const getOptions: () => ColumnOption[] = memo(\n      () => [data, strategy, columnConfig.options],\n      ([data, strategy]) =>\n        getColumnOptions(columnConfig, data as any, strategy as any),\n      { key: `options-${columnConfig.id}` },\n    )\n\n    const getValues: () => ElementType<NonNullable<any>>[] = memo(\n      () => [data, strategy],\n      () => (strategy === 'client' ? getColumnValues(columnConfig, data) : []),\n      { key: `values-${columnConfig.id}` },\n    )\n\n    const getUniqueValues: () => Map<string, number> | undefined = memo(\n      () => [getValues(), strategy],\n      ([values, strategy]) =>\n        getFacetedUniqueValues(columnConfig, values as any, strategy as any),\n      { key: `faceted-${columnConfig.id}` },\n    )\n\n    const getMinMaxValues: () => number[] = memo(\n      () => [data, strategy],\n      () =>\n        strategy === 'client' ? getFacetedMinMaxValues(columnConfig, data) : [],\n      { key: `minmax-${columnConfig.id}` },\n    )\n\n    // Create the Column instance\n    const column: Column<TData> = {\n      ...columnConfig,\n      getOptions,\n      getValues,\n      getFacetedUniqueValues: getUniqueValues,\n      getFacetedMinMaxValues: getMinMaxValues,\n      // Prefetch methods will be added below\n      prefetchOptions: async () => {}, // Placeholder, defined below\n      prefetchValues: async () => {},\n      prefetchFacetedUniqueValues: async () => {},\n      _prefetchedOptionsCache: null, // Initialize private cache\n      _prefetchedValuesCache: null,\n      _prefetchedFacetedCache: null,\n    }\n\n    if (strategy === 'client') {\n      // Define prefetch methods with access to the column instance\n      column.prefetchOptions = async (): Promise<void> => {\n        if (!column._prefetchedOptionsCache) {\n          await new Promise((resolve) =>\n            setTimeout(() => {\n              const options = getOptions()\n              column._prefetchedOptionsCache = options\n              // console.log(`Prefetched options for ${columnConfig.id}`)\n              resolve(undefined)\n            }, 0),\n          )\n        }\n      }\n\n      column.prefetchValues = async (): Promise<void> => {\n        if (!column._prefetchedValuesCache) {\n          await new Promise((resolve) =>\n            setTimeout(() => {\n              const values = getValues()\n              column._prefetchedValuesCache = values\n              // console.log(`Prefetched values for ${columnConfig.id}`)\n              resolve(undefined)\n            }, 0),\n          )\n        }\n      }\n\n      column.prefetchFacetedUniqueValues = async (): Promise<void> => {\n        if (!column._prefetchedFacetedCache) {\n          await new Promise((resolve) =>\n            setTimeout(() => {\n              const facetedMap = getUniqueValues()\n              column._prefetchedFacetedCache = facetedMap ?? null\n              // console.log(\n              //   `Prefetched faceted unique values for ${columnConfig.id}`,\n              // )\n              resolve(undefined)\n            }, 0),\n          )\n        }\n      }\n    }\n\n    return column\n  })\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/core/filters.ts"
+    },
+    {
+      "path": "registry/data-table-filter-v2/core/operators.ts",
+      "content": "import type {\n  ColumnDataType,\n  FilterDetails,\n  FilterOperatorTarget,\n  FilterOperators,\n  FilterTypeOperatorDetails,\n  FilterValues,\n} from './types'\n\nexport const DEFAULT_OPERATORS: Record<\n  ColumnDataType,\n  Record<FilterOperatorTarget, FilterOperators[ColumnDataType]>\n> = {\n  text: {\n    single: 'contains',\n    multiple: 'contains',\n  },\n  number: {\n    single: 'is',\n    multiple: 'is between',\n  },\n  date: {\n    single: 'is',\n    multiple: 'is between',\n  },\n  option: {\n    single: 'is',\n    multiple: 'is any of',\n  },\n  multiOption: {\n    single: 'include',\n    multiple: 'include any of',\n  },\n}\n\n/* Details for all the filter operators for option data type */\nexport const optionFilterDetails = {\n  is: {\n    label: 'is',\n    value: 'is',\n    target: 'single',\n    singularOf: 'is any of',\n    relativeOf: 'is not',\n    isNegated: false,\n    negation: 'is not',\n  },\n  'is not': {\n    label: 'is not',\n    value: 'is not',\n    target: 'single',\n    singularOf: 'is none of',\n    relativeOf: 'is',\n    isNegated: true,\n    negationOf: 'is',\n  },\n  'is any of': {\n    label: 'is any of',\n    value: 'is any of',\n    target: 'multiple',\n    pluralOf: 'is',\n    relativeOf: 'is none of',\n    isNegated: false,\n    negation: 'is none of',\n  },\n  'is none of': {\n    label: 'is none of',\n    value: 'is none of',\n    target: 'multiple',\n    pluralOf: 'is not',\n    relativeOf: 'is any of',\n    isNegated: true,\n    negationOf: 'is any of',\n  },\n} as const satisfies FilterDetails<'option'>\n\n/* Details for all the filter operators for multi-option data type */\nexport const multiOptionFilterDetails = {\n  include: {\n    label: 'include',\n    value: 'include',\n    target: 'single',\n    singularOf: 'include any of',\n    relativeOf: 'exclude',\n    isNegated: false,\n    negation: 'exclude',\n  },\n  exclude: {\n    label: 'exclude',\n    value: 'exclude',\n    target: 'single',\n    singularOf: 'exclude if any of',\n    relativeOf: 'include',\n    isNegated: true,\n    negationOf: 'include',\n  },\n  'include any of': {\n    label: 'include any of',\n    value: 'include any of',\n    target: 'multiple',\n    pluralOf: 'include',\n    relativeOf: ['exclude if all', 'include all of', 'exclude if any of'],\n    isNegated: false,\n    negation: 'exclude if all',\n  },\n  'exclude if all': {\n    label: 'exclude if all',\n    value: 'exclude if all',\n    target: 'multiple',\n    pluralOf: 'exclude',\n    relativeOf: ['include any of', 'include all of', 'exclude if any of'],\n    isNegated: true,\n    negationOf: 'include any of',\n  },\n  'include all of': {\n    label: 'include all of',\n    value: 'include all of',\n    target: 'multiple',\n    pluralOf: 'include',\n    relativeOf: ['include any of', 'exclude if all', 'exclude if any of'],\n    isNegated: false,\n    negation: 'exclude if any of',\n  },\n  'exclude if any of': {\n    label: 'exclude if any of',\n    value: 'exclude if any of',\n    target: 'multiple',\n    pluralOf: 'exclude',\n    relativeOf: ['include any of', 'exclude if all', 'include all of'],\n    isNegated: true,\n    negationOf: 'include all of',\n  },\n} as const satisfies FilterDetails<'multiOption'>\n\n/* Details for all the filter operators for date data type */\nexport const dateFilterDetails = {\n  is: {\n    label: 'is',\n    value: 'is',\n    target: 'single',\n    singularOf: 'is between',\n    relativeOf: 'is after',\n    isNegated: false,\n    negation: 'is before',\n  },\n  'is not': {\n    label: 'is not',\n    value: 'is not',\n    target: 'single',\n    singularOf: 'is not between',\n    relativeOf: [\n      'is',\n      'is before',\n      'is on or after',\n      'is after',\n      'is on or before',\n    ],\n    isNegated: true,\n    negationOf: 'is',\n  },\n  'is before': {\n    label: 'is before',\n    value: 'is before',\n    target: 'single',\n    singularOf: 'is between',\n    relativeOf: [\n      'is',\n      'is not',\n      'is on or after',\n      'is after',\n      'is on or before',\n    ],\n    isNegated: false,\n    negation: 'is on or after',\n  },\n  'is on or after': {\n    label: 'is on or after',\n    value: 'is on or after',\n    target: 'single',\n    singularOf: 'is between',\n    relativeOf: ['is', 'is not', 'is before', 'is after', 'is on or before'],\n    isNegated: false,\n    negation: 'is before',\n  },\n  'is after': {\n    label: 'is after',\n    value: 'is after',\n    target: 'single',\n    singularOf: 'is between',\n    relativeOf: [\n      'is',\n      'is not',\n      'is before',\n      'is on or after',\n      'is on or before',\n    ],\n    isNegated: false,\n    negation: 'is on or before',\n  },\n  'is on or before': {\n    label: 'is on or before',\n    value: 'is on or before',\n    target: 'single',\n    singularOf: 'is between',\n    relativeOf: ['is', 'is not', 'is after', 'is on or after', 'is before'],\n    isNegated: false,\n    negation: 'is after',\n  },\n  'is between': {\n    label: 'is between',\n    value: 'is between',\n    target: 'multiple',\n    pluralOf: 'is',\n    relativeOf: 'is not between',\n    isNegated: false,\n    negation: 'is not between',\n  },\n  'is not between': {\n    label: 'is not between',\n    value: 'is not between',\n    target: 'multiple',\n    pluralOf: 'is not',\n    relativeOf: 'is between',\n    isNegated: true,\n    negationOf: 'is between',\n  },\n} as const satisfies FilterDetails<'date'>\n\n/* Details for all the filter operators for text data type */\nexport const textFilterDetails = {\n  contains: {\n    label: 'contains',\n    value: 'contains',\n    target: 'single',\n    relativeOf: 'does not contain',\n    isNegated: false,\n    negation: 'does not contain',\n  },\n  'does not contain': {\n    label: 'does not contain',\n    value: 'does not contain',\n    target: 'single',\n    relativeOf: 'contains',\n    isNegated: true,\n    negationOf: 'contains',\n  },\n} as const satisfies FilterDetails<'text'>\n\n/* Details for all the filter operators for number data type */\nexport const numberFilterDetails = {\n  is: {\n    label: 'is',\n    value: 'is',\n    target: 'single',\n    singularOf: 'is between',\n    relativeOf: [\n      'is not',\n      'is greater than',\n      'is less than or equal to',\n      'is less than',\n      'is greater than or equal to',\n    ],\n    isNegated: false,\n    negation: 'is not',\n  },\n  'is not': {\n    label: 'is not',\n    value: 'is not',\n    target: 'single',\n    singularOf: 'is not between',\n    relativeOf: [\n      'is',\n      'is greater than',\n      'is less than or equal to',\n      'is less than',\n      'is greater than or equal to',\n    ],\n    isNegated: true,\n    negationOf: 'is',\n  },\n  'is greater than': {\n    label: '>',\n    value: 'is greater than',\n    target: 'single',\n    singularOf: 'is between',\n    relativeOf: [\n      'is',\n      'is not',\n      'is less than or equal to',\n      'is less than',\n      'is greater than or equal to',\n    ],\n    isNegated: false,\n    negation: 'is less than or equal to',\n  },\n  'is greater than or equal to': {\n    label: '>=',\n    value: 'is greater than or equal to',\n    target: 'single',\n    singularOf: 'is between',\n    relativeOf: [\n      'is',\n      'is not',\n      'is greater than',\n      'is less than or equal to',\n      'is less than',\n    ],\n    isNegated: false,\n    negation: 'is less than or equal to',\n  },\n  'is less than': {\n    label: '<',\n    value: 'is less than',\n    target: 'single',\n    singularOf: 'is between',\n    relativeOf: [\n      'is',\n      'is not',\n      'is greater than',\n      'is less than or equal to',\n      'is greater than or equal to',\n    ],\n    isNegated: false,\n    negation: 'is greater than',\n  },\n  'is less than or equal to': {\n    label: '<=',\n    value: 'is less than or equal to',\n    target: 'single',\n    singularOf: 'is between',\n    relativeOf: [\n      'is',\n      'is not',\n      'is greater than',\n      'is less than',\n      'is greater than or equal to',\n    ],\n    isNegated: false,\n    negation: 'is greater than or equal to',\n  },\n  'is between': {\n    label: 'is between',\n    value: 'is between',\n    target: 'multiple',\n    pluralOf: 'is',\n    relativeOf: 'is not between',\n    isNegated: false,\n    negation: 'is not between',\n  },\n  'is not between': {\n    label: 'is not between',\n    value: 'is not between',\n    target: 'multiple',\n    pluralOf: 'is not',\n    relativeOf: 'is between',\n    isNegated: true,\n    negationOf: 'is between',\n  },\n} as const satisfies FilterDetails<'number'>\n\nexport const filterTypeOperatorDetails: FilterTypeOperatorDetails = {\n  text: textFilterDetails,\n  number: numberFilterDetails,\n  date: dateFilterDetails,\n  option: optionFilterDetails,\n  multiOption: multiOptionFilterDetails,\n}\n\n/*\n *\n * Determines the new operator for a filter based on the current operator, old and new filter values.\n *\n * This handles cases where the filter values have transitioned from a single value to multiple values (or vice versa),\n * and the current operator needs to be transitioned to its plural form (or singular form).\n *\n * For example, if the current operator is 'is', and the new filter values have a length of 2, the\n * new operator would be 'is any of'.\n *\n */\nexport function determineNewOperator<TType extends ColumnDataType>(\n  type: TType,\n  oldVals: FilterValues<TType>,\n  nextVals: FilterValues<TType>,\n  currentOperator: FilterOperators[TType],\n): FilterOperators[TType] {\n  const a =\n    Array.isArray(oldVals) && Array.isArray(oldVals[0])\n      ? oldVals[0].length\n      : oldVals.length\n  const b =\n    Array.isArray(nextVals) && Array.isArray(nextVals[0])\n      ? nextVals[0].length\n      : nextVals.length\n\n  // If filter size has not transitioned from single to multiple (or vice versa)\n  // or is unchanged, return the current operator.\n  if (a === b || (a >= 2 && b >= 2) || (a <= 1 && b <= 1))\n    return currentOperator\n\n  const opDetails = filterTypeOperatorDetails[type][currentOperator]\n\n  // Handle transition from single to multiple filter values.\n  if (a < b && b >= 2) return opDetails.singularOf ?? currentOperator\n  // Handle transition from multiple to single filter values.\n  if (a > b && b <= 1) return opDetails.pluralOf ?? currentOperator\n  return currentOperator\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/core/operators.ts"
+    },
+    {
+      "path": "registry/data-table-filter-v2/core/types.ts",
+      "content": "import type { LucideIcon } from 'lucide-react'\n\n/*\n * # GENERAL NOTES:\n *\n * ## GENERICS:\n *\n * TData is the shape of a single row in your data table.\n * TVal is the shape of the underlying value for a column.\n * TType is the type (kind) of the column.\n *\n */\n\nexport type ElementType<T> = T extends (infer U)[] ? U : T\n\nexport type Nullable<T> = T | null | undefined\n\n/*\n * The model of a column option.\n * Used for representing underlying column values of type `option` or `multiOption`.\n */\nexport interface ColumnOption {\n  /* The label to display for the option. */\n  label: string\n  /* The internal value of the option. */\n  value: string\n  /* An optional icon to display next to the label. */\n  icon?: React.ReactElement | React.ElementType\n}\n\n/*\n * Represents the data type (kind) of a column.\n */\nexport type ColumnDataType =\n  /* The column value is a string that should be searchable. */\n  | 'text'\n  | 'number'\n  | 'date'\n  /* The column value can be a single value from a list of options. */\n  | 'option'\n  /* The column value can be zero or more values from a list of options. */\n  | 'multiOption'\n\n/*\n * Represents the data type (kind) of option and multi-option columns.\n */\nexport type OptionBasedColumnDataType = Extract<\n  ColumnDataType,\n  'option' | 'multiOption'\n>\n\n/*\n * Maps a ColumnDataType to it's primitive type (i.e. string, number, etc.).\n */\nexport type ColumnDataNativeMap = {\n  text: string\n  number: number\n  date: Date\n  option: string\n  multiOption: string[]\n}\n\n/*\n * Represents the value of a column filter.\n * Contigent on the filtered column's data type.\n */\nexport type FilterValues<T extends ColumnDataType> = Array<\n  ElementType<ColumnDataNativeMap[T]>\n>\n\n/*\n * An accessor function for a column's data.\n * Uses the original row data as an argument.\n */\nexport type TAccessorFn<TData, TVal = unknown> = (data: TData) => TVal\n\n/*\n * Used by `option` and `multiOption` columns.\n * Transforms the underlying column value into a valid ColumnOption.\n */\nexport type TTransformOptionFn<TVal = unknown> = (\n  value: ElementType<NonNullable<TVal>>,\n) => ColumnOption\n\n/*\n * Used by `option` and `multiOption` columns.\n * A custom ordering function when sorting a column's options.\n */\nexport type TOrderFn<TVal = unknown> = (\n  a: ElementType<NonNullable<TVal>>,\n  b: ElementType<NonNullable<TVal>>,\n) => number\n\n/*\n * The configuration for a column.\n */\nexport type ColumnConfig<\n  TData,\n  TType extends ColumnDataType = any,\n  TVal = unknown,\n  TId extends string = string,\n> = {\n  id: TId\n  accessor: TAccessorFn<TData, TVal>\n  displayName: string\n  icon: LucideIcon\n  type: TType\n  options?: TType extends OptionBasedColumnDataType ? ColumnOption[] : never\n  facetedOptions?: TType extends OptionBasedColumnDataType\n    ? Map<string, number>\n    : never\n  min?: TType extends 'number' ? number : never\n  max?: TType extends 'number' ? number : never\n  transformOptionFn?: TType extends OptionBasedColumnDataType\n    ? TTransformOptionFn<TVal>\n    : never\n  orderFn?: TType extends OptionBasedColumnDataType ? TOrderFn<TVal> : never\n}\n\nexport type OptionColumnId<T> = T extends ColumnConfig<\n  infer TData,\n  'option' | 'multiOption',\n  infer TVal,\n  infer TId\n>\n  ? TId\n  : never\n\nexport type OptionColumnIds<\n  T extends ReadonlyArray<ColumnConfig<any, any, any, any>>,\n> = {\n  [K in keyof T]: OptionColumnId<T[K]>\n}[number]\n\n/*\n * Describes a helper function for creating column configurations.\n */\nexport type ColumnConfigHelper<TData> = {\n  accessor: <\n    TAccessor extends TAccessorFn<TData>,\n    TType extends ColumnDataType,\n    TVal extends ReturnType<TAccessor>,\n  >(\n    accessor: TAccessor,\n    config?: Omit<ColumnConfig<TData, TType, TVal>, 'accessor'>,\n  ) => ColumnConfig<TData, TType, unknown>\n}\n\nexport type DataTableFilterConfig<TData> = {\n  data: TData[]\n  columns: ColumnConfig<TData>[]\n}\n\nexport type ColumnProperties<TData, TVal> = {\n  getOptions: () => ColumnOption[]\n  getValues: () => ElementType<NonNullable<TVal>>[]\n  getFacetedUniqueValues: () => Map<string, number> | undefined\n  getFacetedMinMaxValues: () => number[]\n  prefetchOptions: () => Promise<void> // Prefetch options\n  prefetchValues: () => Promise<void> // Prefetch values\n  prefetchFacetedUniqueValues: () => Promise<void> // Prefetch faceted unique values\n}\n\nexport type ColumnPrivateProperties<TData, TVal> = {\n  _prefetchedOptionsCache: ColumnOption[] | null\n  _prefetchedValuesCache: ElementType<NonNullable<TVal>>[] | null\n  _prefetchedFacetedCache: Map<string, number> | null\n}\n\nexport type Column<\n  TData,\n  TType extends ColumnDataType = any,\n  TVal = unknown,\n> = ColumnConfig<TData, TType, TVal> &\n  ColumnProperties<TData, TVal> &\n  ColumnPrivateProperties<TData, TVal>\n\n/*\n * Describes the available actions on column filters.\n * Includes both column-specific and global actions, ultimately acting on the column filters.\n */\nexport interface DataTableFilterActions {\n  addFilterValue: <TData, TType extends OptionBasedColumnDataType>(\n    column: Column<TData, TType>,\n    values: FilterModel<TType>['values'],\n  ) => void\n\n  removeFilterValue: <TData, TType extends OptionBasedColumnDataType>(\n    column: Column<TData, TType>,\n    value: FilterModel<TType>['values'],\n  ) => void\n\n  setFilterValue: <TData, TType extends ColumnDataType>(\n    column: Column<TData, TType>,\n    values: FilterModel<TType>['values'],\n  ) => void\n\n  setFilterOperator: <TType extends ColumnDataType>(\n    columnId: string,\n    operator: FilterModel<TType>['operator'],\n  ) => void\n\n  removeFilter: (columnId: string) => void\n\n  removeAllFilters: () => void\n}\n\nexport type FilterStrategy = 'client' | 'server'\n\n/* Operators for text data */\nexport type TextFilterOperator = 'contains' | 'does not contain'\n\n/* Operators for number data */\nexport type NumberFilterOperator =\n  | 'is'\n  | 'is not'\n  | 'is less than'\n  | 'is greater than or equal to'\n  | 'is greater than'\n  | 'is less than or equal to'\n  | 'is between'\n  | 'is not between'\n\n/* Operators for date data */\nexport type DateFilterOperator =\n  | 'is'\n  | 'is not'\n  | 'is before'\n  | 'is on or after'\n  | 'is after'\n  | 'is on or before'\n  | 'is between'\n  | 'is not between'\n\n/* Operators for option data */\nexport type OptionFilterOperator = 'is' | 'is not' | 'is any of' | 'is none of'\n\n/* Operators for multi-option data */\nexport type MultiOptionFilterOperator =\n  | 'include'\n  | 'exclude'\n  | 'include any of'\n  | 'include all of'\n  | 'exclude if any of'\n  | 'exclude if all'\n\n/* Maps filter operators to their respective data types */\nexport type FilterOperators = {\n  text: TextFilterOperator\n  number: NumberFilterOperator\n  date: DateFilterOperator\n  option: OptionFilterOperator\n  multiOption: MultiOptionFilterOperator\n}\n\n/*\n *\n * FilterValue is a type that represents a filter value for a specific column.\n *\n * It consists of:\n * - Operator: The operator to be used for the filter.\n * - Values: An array of values to be used for the filter.\n *\n */\nexport type FilterModel<TType extends ColumnDataType = any> = {\n  columnId: string\n  operator: FilterOperators[TType]\n  values: FilterValues<TType>\n}\n\nexport type FiltersState = Array<FilterModel>\n\n/*\n * FilterDetails is a type that represents the details of all the filter operators for a specific column data type.\n */\nexport type FilterDetails<T extends ColumnDataType> = {\n  [key in FilterOperators[T]]: FilterOperatorDetails<key, T>\n}\n\nexport type FilterOperatorTarget = 'single' | 'multiple'\n\nexport type FilterOperatorDetailsBase<\n  OperatorValue,\n  T extends ColumnDataType,\n> = {\n  /* The operator value. Usually the string representation of the operator. */\n  value: OperatorValue\n  /* The label for the operator, to show in the UI. */\n  label: string\n  /* How much data the operator applies to. */\n  target: FilterOperatorTarget\n  /* The plural form of the operator, if applicable. */\n  singularOf?: FilterOperators[T]\n  /* The singular form of the operator, if applicable. */\n  pluralOf?: FilterOperators[T]\n  /* All related operators. Normally, all the operators which share the same target. */\n  relativeOf: FilterOperators[T] | Array<FilterOperators[T]>\n  /* Whether the operator is negated. */\n  isNegated: boolean\n  /* If the operator is not negated, this provides the negated equivalent. */\n  negation?: FilterOperators[T]\n  /* If the operator is negated, this provides the positive equivalent. */\n  negationOf?: FilterOperators[T]\n}\n\n/*\n *\n * FilterOperatorDetails is a type that provides details about a filter operator for a specific column data type.\n * It extends FilterOperatorDetailsBase with additional logic and contraints on the defined properties.\n *\n */\nexport type FilterOperatorDetails<\n  OperatorValue,\n  T extends ColumnDataType,\n> = FilterOperatorDetailsBase<OperatorValue, T> &\n  (\n    | { singularOf?: never; pluralOf?: never }\n    | { target: 'single'; singularOf: FilterOperators[T]; pluralOf?: never }\n    | { target: 'multiple'; singularOf?: never; pluralOf: FilterOperators[T] }\n  ) &\n  (\n    | { isNegated: false; negation: FilterOperators[T]; negationOf?: never }\n    | { isNegated: true; negation?: never; negationOf: FilterOperators[T] }\n  )\n\n/* Maps column data types to their respective filter operator details */\nexport type FilterTypeOperatorDetails = {\n  [key in ColumnDataType]: FilterDetails<key>\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/core/types.ts"
+    },
+    {
+      "path": "registry/data-table-filter-v2/hooks/use-data-table-filters.tsx",
+      "content": "'use client'\n\nimport { useMemo, useState } from 'react'\nimport { createColumns } from '../core/filters'\nimport { DEFAULT_OPERATORS, determineNewOperator } from '../core/operators'\nimport type {\n  ColumnConfig,\n  ColumnDataType,\n  ColumnOption,\n  DataTableFilterActions,\n  FilterModel,\n  FilterStrategy,\n  FiltersState,\n  OptionBasedColumnDataType,\n  OptionColumnIds,\n} from '../core/types'\nimport { uniq } from '../lib/array'\nimport { addUniq, removeUniq } from '../lib/array'\nimport {\n  createNumberFilterValue,\n  isColumnOptionArray,\n  isColumnOptionMap,\n} from '../lib/helpers'\n\nexport interface DataTableFiltersOptions<\n  TData,\n  TColumns extends ReadonlyArray<ColumnConfig<TData, any, any, any>>,\n  TStrategy extends FilterStrategy,\n> {\n  strategy: TStrategy\n  data: TData[]\n  columnsConfig: TColumns\n  controlledState?:\n    | [FiltersState, React.Dispatch<React.SetStateAction<FiltersState>>]\n    | undefined\n  options?: Partial<\n    Record<\n      OptionColumnIds<TColumns>,\n      | ColumnOption[]\n      | [ColumnOption[] | undefined, Map<string, number> | undefined]\n    >\n  >\n}\n\nexport function useDataTableFilters<\n  TData,\n  TColumns extends ReadonlyArray<ColumnConfig<TData, any, any, any>>,\n  TStrategy extends FilterStrategy,\n>({\n  strategy,\n  data,\n  columnsConfig,\n  controlledState,\n  options,\n}: DataTableFiltersOptions<TData, TColumns, TStrategy>) {\n  const [internalFilters, setInternalFilters] = useState<FiltersState>([])\n  const [filters, setFilters] = controlledState ?? [\n    internalFilters,\n    setInternalFilters,\n  ]\n\n  // Convert ColumnConfig to Column, applying options and faceted options if provided\n  const columns = useMemo(() => {\n    const enhancedConfigs = columnsConfig.map((config) => {\n      if (\n        options &&\n        (config.type === 'option' || config.type === 'multiOption')\n      ) {\n        const optionsInput = options[config.id as OptionColumnIds<TColumns>]\n\n        if (!optionsInput) return config\n\n        if (isColumnOptionArray(optionsInput)) {\n          return { ...config, options: optionsInput }\n        }\n\n        if (\n          isColumnOptionArray(optionsInput[0]) &&\n          isColumnOptionMap(optionsInput[1])\n        ) {\n          return {\n            ...config,\n            options: optionsInput[0],\n            facetedOptions: optionsInput[1],\n          }\n        }\n      }\n\n      return config\n    })\n    return createColumns(data, enhancedConfigs, strategy)\n  }, [data, columnsConfig, options, strategy])\n\n  const actions: DataTableFilterActions = useMemo(\n    () => ({\n      addFilterValue<TData, TType extends OptionBasedColumnDataType>(\n        column: ColumnConfig<TData, TType>,\n        values: FilterModel<TType>['values'],\n      ) {\n        if (column.type === 'option') {\n          setFilters((prev) => {\n            const filter = prev.find((f) => f.columnId === column.id)\n            const isColumnFiltered = filter && filter.values.length > 0\n            if (!isColumnFiltered) {\n              return [\n                ...prev,\n                {\n                  columnId: column.id,\n                  operator:\n                    values.length > 1\n                      ? DEFAULT_OPERATORS[column.type].multiple\n                      : DEFAULT_OPERATORS[column.type].single,\n                  values,\n                },\n              ]\n            }\n            const oldValues = filter.values\n            const newValues = addUniq(filter.values, values)\n            const newOperator = determineNewOperator(\n              'option',\n              oldValues,\n              newValues,\n              filter.operator,\n            )\n            return prev.map((f) =>\n              f.columnId === column.id\n                ? {\n                    columnId: column.id,\n                    operator: newOperator,\n                    values: newValues,\n                  }\n                : f,\n            )\n          })\n          return\n        }\n        if (column.type === 'multiOption') {\n          setFilters((prev) => {\n            const filter = prev.find((f) => f.columnId === column.id)\n            const isColumnFiltered = filter && filter.values.length > 0\n            if (!isColumnFiltered) {\n              return [\n                ...prev,\n                {\n                  columnId: column.id,\n                  operator:\n                    values.length > 1\n                      ? DEFAULT_OPERATORS[column.type].multiple\n                      : DEFAULT_OPERATORS[column.type].single,\n                  values,\n                },\n              ]\n            }\n            const oldValues = filter.values\n            const newValues = addUniq(filter.values, values)\n            const newOperator = determineNewOperator(\n              'multiOption',\n              oldValues,\n              newValues,\n              filter.operator,\n            )\n            if (newValues.length === 0) {\n              return prev.filter((f) => f.columnId !== column.id)\n            }\n            return prev.map((f) =>\n              f.columnId === column.id\n                ? {\n                    columnId: column.id,\n                    operator: newOperator,\n                    values: newValues,\n                  }\n                : f,\n            )\n          })\n          return\n        }\n        throw new Error(\n          '[data-table-filter] addFilterValue() is only supported for option columns',\n        )\n      },\n      removeFilterValue<TData, TType extends OptionBasedColumnDataType>(\n        column: ColumnConfig<TData, TType>,\n        value: FilterModel<TType>['values'],\n      ) {\n        if (column.type === 'option') {\n          setFilters((prev) => {\n            const filter = prev.find((f) => f.columnId === column.id)\n            const isColumnFiltered = filter && filter.values.length > 0\n            if (!isColumnFiltered) {\n              return [...prev]\n            }\n            const newValues = removeUniq(filter.values, value)\n            const oldValues = filter.values\n            const newOperator = determineNewOperator(\n              'option',\n              oldValues,\n              newValues,\n              filter.operator,\n            )\n            if (newValues.length === 0) {\n              return prev.filter((f) => f.columnId !== column.id)\n            }\n            return prev.map((f) =>\n              f.columnId === column.id\n                ? {\n                    columnId: column.id,\n                    operator: newOperator,\n                    values: newValues,\n                  }\n                : f,\n            )\n          })\n          return\n        }\n        if (column.type === 'multiOption') {\n          setFilters((prev) => {\n            const filter = prev.find((f) => f.columnId === column.id)\n            const isColumnFiltered = filter && filter.values.length > 0\n            if (!isColumnFiltered) {\n              return [...prev]\n            }\n            const newValues = removeUniq(filter.values, value)\n            const oldValues = filter.values\n            const newOperator = determineNewOperator(\n              'multiOption',\n              oldValues,\n              newValues,\n              filter.operator,\n            )\n            if (newValues.length === 0) {\n              return prev.filter((f) => f.columnId !== column.id)\n            }\n            return prev.map((f) =>\n              f.columnId === column.id\n                ? {\n                    columnId: column.id,\n                    operator: newOperator,\n                    values: newValues,\n                  }\n                : f,\n            )\n          })\n          return\n        }\n        throw new Error(\n          '[data-table-filter] removeFilterValue() is only supported for option columns',\n        )\n      },\n      setFilterValue<TData, TType extends ColumnDataType>(\n        column: ColumnConfig<TData, TType>,\n        values: FilterModel<TType>['values'],\n      ) {\n        setFilters((prev) => {\n          const filter = prev.find((f) => f.columnId === column.id)\n          const isColumnFiltered = filter && filter.values.length > 0\n          const newValues =\n            column.type === 'number'\n              ? createNumberFilterValue(values as number[])\n              : uniq(values)\n          if (newValues.length === 0) return prev\n          if (!isColumnFiltered) {\n            return [\n              ...prev,\n              {\n                columnId: column.id,\n                operator:\n                  values.length > 1\n                    ? DEFAULT_OPERATORS[column.type].multiple\n                    : DEFAULT_OPERATORS[column.type].single,\n                values: newValues,\n              },\n            ]\n          }\n          const oldValues = filter.values\n          const newOperator = determineNewOperator(\n            column.type,\n            oldValues,\n            newValues,\n            filter.operator,\n          )\n          const newFilter = {\n            columnId: column.id,\n            operator: newOperator,\n            values: newValues as any,\n          } satisfies FilterModel<TType>\n          return prev.map((f) => (f.columnId === column.id ? newFilter : f))\n        })\n      },\n      setFilterOperator<TType extends ColumnDataType>(\n        columnId: string,\n        operator: FilterModel<TType>['operator'],\n      ) {\n        setFilters((prev) =>\n          prev.map((f) => (f.columnId === columnId ? { ...f, operator } : f)),\n        )\n      },\n      removeFilter(columnId: string) {\n        setFilters((prev) => prev.filter((f) => f.columnId !== columnId))\n      },\n      removeAllFilters() {\n        setFilters([])\n      },\n    }),\n    [setFilters],\n  )\n\n  return { columns, filters, actions, strategy } // columns is Column<TData>[]\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/hooks/use-data-table-filters.tsx"
+    },
+    {
+      "path": "registry/data-table-filter-v2/integrations/tanstack-table/index.tsx",
+      "content": "import type { ColumnDef, ColumnFiltersState } from '@tanstack/react-table'\nimport type { Column, FilterModel, FiltersState } from '../../core/types'\nimport { multiOptionFilterFn, optionFilterFn } from '../../lib/filter-fns'\nimport {\n  isColumnOption,\n  isColumnOptionArray,\n  isStringArray,\n} from '../../lib/helpers'\nimport { dateFilterFn, numberFilterFn, textFilterFn } from './filter-fns'\n\ninterface CreateTSTColumns<TData> {\n  columns: ColumnDef<TData, any>[]\n  configs: Column<TData>[]\n}\n\nexport function createTSTColumns<TData>({\n  columns,\n  configs,\n}: CreateTSTColumns<TData>) {\n  const _cols: ColumnDef<TData>[] = []\n\n  for (const col of columns) {\n    // Get the column filter config for this column\n    const config = configs.find((c) => c.id === col.id)\n\n    // If the column is not filterable or doesn't have a filter config, skip it\n    if (!col.enableColumnFilter || !config) {\n      _cols.push(col)\n      continue\n    }\n\n    if (config.type === 'text') {\n      col.filterFn = textFilterFn\n      _cols.push(col)\n      continue\n    }\n\n    if (config.type === 'number') {\n      col.filterFn = numberFilterFn\n      _cols.push(col)\n      continue\n    }\n\n    if (config.type === 'date') {\n      col.filterFn = dateFilterFn\n      _cols.push(col)\n      continue\n    }\n\n    if (config.type === 'option') {\n      col.filterFn = (row, columnId, filterValue: FilterModel<'option'>) => {\n        const value = row.getValue<unknown>(columnId)\n\n        if (!value) return false\n\n        if (typeof value === 'string') {\n          return optionFilterFn(value, filterValue)\n        }\n\n        if (isColumnOption(value)) {\n          return optionFilterFn(value.value, filterValue)\n        }\n\n        const sanitizedValue = config.transformOptionFn!(value as never)\n        return optionFilterFn(sanitizedValue.value, filterValue)\n      }\n    }\n\n    if (config.type === 'multiOption') {\n      col.filterFn = (\n        row,\n        columnId,\n        filterValue: FilterModel<'multiOption'>,\n      ) => {\n        const value = row.getValue(columnId)\n\n        if (!value) return false\n\n        if (isStringArray(value)) {\n          return multiOptionFilterFn(value, filterValue)\n        }\n\n        if (isColumnOptionArray(value)) {\n          return multiOptionFilterFn(\n            value.map((v) => v.value),\n            filterValue,\n          )\n        }\n\n        const sanitizedValue = (value as never[]).map((v) =>\n          config.transformOptionFn!(v),\n        )\n\n        return multiOptionFilterFn(\n          sanitizedValue.map((v) => v.value),\n          filterValue,\n        )\n      }\n    }\n\n    _cols.push(col)\n  }\n\n  return _cols\n}\n\nexport function createTSTFilters(filters: FiltersState): ColumnFiltersState {\n  return filters.map((filter) => ({ id: filter.columnId, value: filter }))\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/integrations/tanstack-table/index.tsx"
+    },
+    {
+      "path": "registry/data-table-filter-v2/integrations/tanstack-table/filter-fns.ts",
+      "content": "import type { Row } from '@tanstack/react-table'\nimport type { FilterModel } from '../../core/types'\nimport * as f from '../../lib/filter-fns'\n\nexport function dateFilterFn<TData>(\n  row: Row<TData>,\n  columnId: string,\n  filterValue: FilterModel<'date'>,\n): boolean {\n  const value = row.getValue<Date>(columnId)\n\n  return f.dateFilterFn(value, filterValue)\n}\n\nexport function textFilterFn<TData>(\n  row: Row<TData>,\n  columnId: string,\n  filterValue: FilterModel<'text'>,\n): boolean {\n  const value = row.getValue<string>(columnId) ?? ''\n\n  return f.textFilterFn(value, filterValue)\n}\n\nexport function numberFilterFn<TData>(\n  row: Row<TData>,\n  columnId: string,\n  filterValue: FilterModel<'number'>,\n): boolean {\n  const value = row.getValue<number>(columnId)\n\n  return f.numberFilterFn(value, filterValue)\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/integrations/tanstack-table/filter-fns.ts"
+    },
+    {
+      "path": "registry/data-table-filter-v2/lib/array.ts",
+      "content": "export function intersection<T>(a: T[], b: T[]): T[] {\n  return a.filter((x) => b.includes(x))\n}\n\n/**\n * Computes a stable hash string for any value using deep inspection.\n * This function recursively builds a string for primitives, arrays, and objects.\n * It uses a cache (WeakMap) to avoid rehashing the same object twice, which is\n * particularly beneficial if an object appears in multiple places.\n */\nfunction deepHash(value: any, cache = new WeakMap<object, string>()): string {\n  // Handle primitives and null/undefined.\n  if (value === null) return 'null'\n  if (value === undefined) return 'undefined'\n  const type = typeof value\n  if (type === 'number' || type === 'boolean' || type === 'string') {\n    return `${type}:${value.toString()}`\n  }\n  if (type === 'function') {\n    // Note: using toString for functions.\n    return `function:${value.toString()}`\n  }\n\n  // For objects and arrays, use caching to avoid repeated work.\n  if (type === 'object') {\n    // If we’ve seen this object before, return the cached hash.\n    if (cache.has(value)) {\n      return cache.get(value)!\n    }\n    let hash: string\n    if (Array.isArray(value)) {\n      // Compute hash for each element in order.\n      hash = `array:[${value.map((v) => deepHash(v, cache)).join(',')}]`\n    } else {\n      // For objects, sort keys to ensure the representation is stable.\n      const keys = Object.keys(value).sort()\n      const props = keys\n        .map((k) => `${k}:${deepHash(value[k], cache)}`)\n        .join(',')\n      hash = `object:{${props}}`\n    }\n    cache.set(value, hash)\n    return hash\n  }\n\n  // Fallback if no case matched.\n  return `${type}:${value.toString()}`\n}\n\n/**\n * Performs deep equality check for any two values.\n * This recursively checks primitives, arrays, and plain objects.\n */\nfunction deepEqual(a: any, b: any): boolean {\n  // Check strict equality first.\n  if (a === b) return true\n  // If types differ, they’re not equal.\n  if (typeof a !== typeof b) return false\n  if (a === null || b === null || a === undefined || b === undefined)\n    return false\n\n  // Check arrays.\n  if (Array.isArray(a)) {\n    if (!Array.isArray(b) || a.length !== b.length) return false\n    for (let i = 0; i < a.length; i++) {\n      if (!deepEqual(a[i], b[i])) return false\n    }\n    return true\n  }\n\n  // Check objects.\n  if (typeof a === 'object') {\n    if (typeof b !== 'object') return false\n    const aKeys = Object.keys(a).sort()\n    const bKeys = Object.keys(b).sort()\n    if (aKeys.length !== bKeys.length) return false\n    for (let i = 0; i < aKeys.length; i++) {\n      if (aKeys[i] !== bKeys[i]) return false\n      if (!deepEqual(a[aKeys[i]], b[bKeys[i]])) return false\n    }\n    return true\n  }\n\n  // For any other types (should be primitives by now), use strict equality.\n  return false\n}\n\n/**\n * Returns a new array containing only the unique values from the input array.\n * Uniqueness is determined by deep equality.\n *\n * @param arr - The array of values to be filtered.\n * @returns A new array with duplicates removed.\n */\nexport function uniq<T>(arr: T[]): T[] {\n  // Use a Map where key is the deep hash and value is an array of items sharing the same hash.\n  const seen = new Map<string, T[]>()\n  const result: T[] = []\n\n  for (const item of arr) {\n    const hash = deepHash(item)\n    if (seen.has(hash)) {\n      // There is a potential duplicate; check the stored items with the same hash.\n      const itemsWithHash = seen.get(hash)!\n      let duplicateFound = false\n      for (const existing of itemsWithHash) {\n        if (deepEqual(existing, item)) {\n          duplicateFound = true\n          break\n        }\n      }\n      if (!duplicateFound) {\n        itemsWithHash.push(item)\n        result.push(item)\n      }\n    } else {\n      // First time this hash appears.\n      seen.set(hash, [item])\n      result.push(item)\n    }\n  }\n\n  return result\n}\n\nexport function take<T>(a: T[], n: number): T[] {\n  return a.slice(0, n)\n}\n\nexport function flatten<T>(a: T[][]): T[] {\n  return a.flat()\n}\n\nexport function addUniq<T>(arr: T[], values: T[]): T[] {\n  return uniq([...arr, ...values])\n}\n\nexport function removeUniq<T>(arr: T[], values: T[]): T[] {\n  return arr.filter((v) => !values.includes(v))\n}\n\nexport function isAnyOf<T>(value: T, values: T[]): boolean {\n  return values.includes(value)\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/lib/array.ts"
+    },
+    {
+      "path": "registry/data-table-filter-v2/lib/filter-fns.ts",
+      "content": "import {\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isWithinInterval,\n  startOfDay,\n} from 'date-fns'\nimport { dateFilterDetails } from '../core/operators'\nimport type { FilterModel } from '../core/types'\nimport { intersection } from './array'\n\nexport function optionFilterFn<TData>(\n  inputData: string,\n  filterValue: FilterModel<'option'>,\n) {\n  if (!inputData) return false\n  if (filterValue.values.length === 0) return true\n\n  const value = inputData.toString().toLowerCase()\n\n  const found = !!filterValue.values.find((v) => v.toLowerCase() === value)\n\n  switch (filterValue.operator) {\n    case 'is':\n    case 'is any of':\n      return found\n    case 'is not':\n    case 'is none of':\n      return !found\n  }\n}\n\nexport function multiOptionFilterFn(\n  inputData: string[],\n  filterValue: FilterModel<'multiOption'>,\n) {\n  if (!inputData) return false\n\n  if (\n    filterValue.values.length === 0 ||\n    !filterValue.values[0] ||\n    filterValue.values[0].length === 0\n  )\n    return true\n\n  const values = inputData\n  const filterValues = filterValue.values\n\n  switch (filterValue.operator) {\n    case 'include':\n    case 'include any of':\n      return intersection(values, filterValues).length > 0\n    case 'exclude':\n      return intersection(values, filterValues).length === 0\n    case 'exclude if any of':\n      return !(intersection(values, filterValues).length > 0)\n    case 'include all of':\n      return intersection(values, filterValues).length === filterValues.length\n    case 'exclude if all':\n      return !(\n        intersection(values, filterValues).length === filterValues.length\n      )\n  }\n}\n\nexport function dateFilterFn<TData>(\n  inputData: Date,\n  filterValue: FilterModel<'date'>,\n) {\n  if (!filterValue || filterValue.values.length === 0) return true\n\n  if (\n    dateFilterDetails[filterValue.operator].target === 'single' &&\n    filterValue.values.length > 1\n  )\n    throw new Error('Singular operators require at most one filter value')\n\n  if (\n    filterValue.operator in ['is between', 'is not between'] &&\n    filterValue.values.length !== 2\n  )\n    throw new Error('Plural operators require two filter values')\n\n  const filterVals = filterValue.values\n  const d1 = filterVals[0]\n  const d2 = filterVals[1]\n\n  const value = inputData\n\n  switch (filterValue.operator) {\n    case 'is':\n      return isSameDay(value, d1)\n    case 'is not':\n      return !isSameDay(value, d1)\n    case 'is before':\n      return isBefore(value, startOfDay(d1))\n    case 'is on or after':\n      return isSameDay(value, d1) || isAfter(value, startOfDay(d1))\n    case 'is after':\n      return isAfter(value, startOfDay(d1))\n    case 'is on or before':\n      return isSameDay(value, d1) || isBefore(value, startOfDay(d1))\n    case 'is between':\n      return isWithinInterval(value, {\n        start: startOfDay(d1),\n        end: endOfDay(d2),\n      })\n    case 'is not between':\n      return !isWithinInterval(value, {\n        start: startOfDay(filterValue.values[0]),\n        end: endOfDay(filterValue.values[1]),\n      })\n  }\n}\n\nexport function textFilterFn<TData>(\n  inputData: string,\n  filterValue: FilterModel<'text'>,\n) {\n  if (!filterValue || filterValue.values.length === 0) return true\n\n  const value = inputData.toLowerCase().trim()\n  const filterStr = filterValue.values[0].toLowerCase().trim()\n\n  if (filterStr === '') return true\n\n  const found = value.includes(filterStr)\n\n  switch (filterValue.operator) {\n    case 'contains':\n      return found\n    case 'does not contain':\n      return !found\n  }\n}\n\nexport function numberFilterFn<TData>(\n  inputData: number,\n  filterValue: FilterModel<'number'>,\n) {\n  if (!filterValue || !filterValue.values || filterValue.values.length === 0) {\n    return true\n  }\n\n  const value = inputData\n  const filterVal = filterValue.values[0]\n\n  switch (filterValue.operator) {\n    case 'is':\n      return value === filterVal\n    case 'is not':\n      return value !== filterVal\n    case 'is greater than':\n      return value > filterVal\n    case 'is greater than or equal to':\n      return value >= filterVal\n    case 'is less than':\n      return value < filterVal\n    case 'is less than or equal to':\n      return value <= filterVal\n    case 'is between': {\n      const lowerBound = filterValue.values[0]\n      const upperBound = filterValue.values[1]\n      return value >= lowerBound && value <= upperBound\n    }\n    case 'is not between': {\n      const lowerBound = filterValue.values[0]\n      const upperBound = filterValue.values[1]\n      return value < lowerBound || value > upperBound\n    }\n    default:\n      return true\n  }\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/lib/filter-fns.ts"
+    },
+    {
+      "path": "registry/data-table-filter-v2/lib/memo.ts",
+      "content": "export function memo<TDeps extends readonly any[], TResult>(\n  getDeps: () => TDeps,\n  compute: (deps: TDeps) => TResult,\n  options: { key: string },\n): () => TResult {\n  let prevDeps: TDeps | undefined\n  let cachedResult: TResult | undefined\n\n  return () => {\n    // console.log(`[memo] Calling memoized function: ${options.key}`)\n\n    const deps = getDeps()\n\n    // If no previous deps or deps have changed, recompute\n    if (!prevDeps || !shallowEqual(prevDeps, deps)) {\n      // console.log(`[memo] Cache MISS - ${options.key}`)\n      cachedResult = compute(deps)\n      prevDeps = deps\n    } else {\n      // console.log(`[memo] Cache HIT - ${options.key}`)\n    }\n\n    return cachedResult!\n  }\n}\n\nfunction shallowEqual<T>(arr1: readonly T[], arr2: readonly T[]): boolean {\n  if (arr1 === arr2) return true\n  if (arr1.length !== arr2.length) return false\n\n  for (let i = 0; i < arr1.length; i++) {\n    if (arr1[i] !== arr2[i]) return false\n  }\n  return true\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/lib/memo.ts"
+    },
+    {
+      "path": "registry/data-table-filter-v2/lib/helpers.ts",
+      "content": "import type { Column, ColumnOption } from '../core/types'\n\nexport function getColumn<TData>(columns: Column<TData>[], id: string) {\n  const column = columns.find((c) => c.id === id)\n\n  if (!column) {\n    throw new Error(`Column with id ${id} not found`)\n  }\n\n  return column\n}\n\nexport function createNumberFilterValue(\n  values: number[] | undefined,\n): number[] {\n  if (!values || values.length === 0) return []\n  if (values.length === 1) return [values[0]]\n  if (values.length === 2) return createNumberRange(values)\n  return [values[0], values[1]]\n}\n\nexport function createNumberRange(values: number[] | undefined) {\n  let a = 0\n  let b = 0\n\n  if (!values || values.length === 0) return [a, b]\n  if (values.length === 1) {\n    a = values[0]\n  } else {\n    a = values[0]\n    b = values[1]\n  }\n\n  const [min, max] = a < b ? [a, b] : [b, a]\n\n  return [min, max]\n}\n\nexport function isColumnOption(value: unknown): value is ColumnOption {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    'value' in value &&\n    'label' in value\n  )\n}\n\nexport function isColumnOptionArray(value: unknown): value is ColumnOption[] {\n  return Array.isArray(value) && value.every(isColumnOption)\n}\n\nexport function isStringArray(value: unknown): value is string[] {\n  return Array.isArray(value) && value.every((v) => typeof v === 'string')\n}\n\nexport function isColumnOptionMap(\n  value: unknown,\n): value is Map<string, number> {\n  return (\n    value instanceof Map &&\n    value.keys().every((k) => typeof k === 'string') &&\n    value.values().every((v) => typeof v === 'number')\n  )\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/lib/helpers.ts"
+    },
+    {
+      "path": "registry/data-table-filter-v2/ui/debounced-input.tsx",
+      "content": "'use client'\n\nimport { Input } from '@/components/ui/input'\nimport { useCallback, useEffect, useState } from 'react'\n\nfunction debounce<T extends (...args: any[]) => void>(\n  func: T,\n  wait: number,\n): (...args: Parameters<T>) => void {\n  let timeout: NodeJS.Timeout\n  return (...args: Parameters<T>) => {\n    clearTimeout(timeout)\n    timeout = setTimeout(() => func(...args), wait)\n  }\n}\n\nexport function DebouncedInput({\n  value: initialValue,\n  onChange,\n  debounceMs = 500, // This is the wait time, not the function\n  ...props\n}: {\n  value: string | number\n  onChange: (value: string | number) => void\n  debounceMs?: number\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {\n  const [value, setValue] = useState(initialValue)\n\n  // Sync with initialValue when it changes\n  useEffect(() => {\n    setValue(initialValue)\n  }, [initialValue])\n\n  // Define the debounced function with useCallback\n  const debouncedOnChange = useCallback(\n    debounce((newValue: string | number) => {\n      onChange(newValue)\n    }, debounceMs), // Pass the wait time here\n    [debounceMs, onChange], // Dependencies\n  )\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value\n    setValue(newValue) // Update local state immediately\n    debouncedOnChange(newValue) // Call debounced version\n  }\n\n  return <Input {...props} value={value} onChange={handleChange} />\n}\n",
+      "type": "registry:file",
+      "target": "components/data-table-filter/ui/debounced-input.tsx"
+    }
+  ]
+}
diff --git a/apps/web/registry.json b/apps/web/registry.json
index 1c8055eb..1beed8e8 100644
--- a/apps/web/registry.json
+++ b/apps/web/registry.json
@@ -39,6 +39,126 @@
           "type": "registry:lib"
         }
       ]
+    },
+    {
+      "name": "filters-v2",
+      "title": "Data table filter",
+      "description": "A powerful data table filter component inspired by Linear.",
+      "author": "Kian Bazarjani <kian@bazza.dev>",
+      "type": "registry:block",
+      "dependencies": ["@tanstack/react-table@8.21.2", "date-fns"],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "checkbox",
+        "command",
+        "dropdown-menu",
+        "input",
+        "label",
+        "popover",
+        "separator",
+        "slider",
+        "table",
+        "tabs",
+        "use-mobile"
+      ],
+      "files": [
+        {
+          "path": "registry/data-table-filter-v2/index.tsx",
+          "type": "registry:file",
+          "target": "components/data-table-filter/index.tsx"
+        },
+        {
+          "path": "registry/data-table-filter-v2/components/active-filters.tsx",
+          "type": "registry:file",
+          "target": "components/data-table-filter/components/active-filters.tsx"
+        },
+        {
+          "path": "registry/data-table-filter-v2/components/data-table-filter.tsx",
+          "type": "registry:file",
+          "target": "components/data-table-filter/components/data-table-filter.tsx"
+        },
+        {
+          "path": "registry/data-table-filter-v2/components/filter-actions.tsx",
+          "type": "registry:file",
+          "target": "components/data-table-filter/components/filter-actions.tsx"
+        },
+        {
+          "path": "registry/data-table-filter-v2/components/filter-operator.tsx",
+          "type": "registry:file",
+          "target": "components/data-table-filter/components/filter-operator.tsx"
+        },
+        {
+          "path": "registry/data-table-filter-v2/components/filter-selector.tsx",
+          "type": "registry:file",
+          "target": "components/data-table-filter/components/filter-selector.tsx"
+        },
+        {
+          "path": "registry/data-table-filter-v2/components/filter-subject.tsx",
+          "type": "registry:file",
+          "target": "components/data-table-filter/components/filter-subject.tsx"
+        },
+        {
+          "path": "registry/data-table-filter-v2/components/filter-value.tsx",
+          "type": "registry:file",
+          "target": "components/data-table-filter/components/filter-value.tsx"
+        },
+        {
+          "path": "registry/data-table-filter-v2/core/filters.ts",
+          "type": "registry:file",
+          "target": "components/data-table-filter/core/filters.ts"
+        },
+        {
+          "path": "registry/data-table-filter-v2/core/operators.ts",
+          "type": "registry:file",
+          "target": "components/data-table-filter/core/operators.ts"
+        },
+        {
+          "path": "registry/data-table-filter-v2/core/types.ts",
+          "type": "registry:file",
+          "target": "components/data-table-filter/core/types.ts"
+        },
+        {
+          "path": "registry/data-table-filter-v2/hooks/use-data-table-filters.tsx",
+          "type": "registry:file",
+          "target": "components/data-table-filter/hooks/use-data-table-filters.tsx"
+        },
+        {
+          "path": "registry/data-table-filter-v2/integrations/tanstack-table/index.tsx",
+          "type": "registry:file",
+          "target": "components/data-table-filter/integrations/tanstack-table/index.tsx"
+        },
+        {
+          "path": "registry/data-table-filter-v2/integrations/tanstack-table/filter-fns.ts",
+          "type": "registry:file",
+          "target": "components/data-table-filter/integrations/tanstack-table/filter-fns.ts"
+        },
+        {
+          "path": "registry/data-table-filter-v2/lib/array.ts",
+          "type": "registry:file",
+          "target": "components/data-table-filter/lib/array.ts"
+        },
+        {
+          "path": "registry/data-table-filter-v2/lib/filter-fns.ts",
+          "type": "registry:file",
+          "target": "components/data-table-filter/lib/filter-fns.ts"
+        },
+        {
+          "path": "registry/data-table-filter-v2/lib/memo.ts",
+          "type": "registry:file",
+          "target": "components/data-table-filter/lib/memo.ts"
+        },
+        {
+          "path": "registry/data-table-filter-v2/lib/helpers.ts",
+          "type": "registry:file",
+          "target": "components/data-table-filter/lib/helpers.ts"
+        },
+        {
+          "path": "registry/data-table-filter-v2/ui/debounced-input.tsx",
+          "type": "registry:file",
+          "target": "components/data-table-filter/ui/debounced-input.tsx"
+        }
+      ]
     }
   ]
 }
diff --git a/apps/web/registry/data-table-filter-v2/__tests__/data-table-filters.test.tsx b/apps/web/registry/data-table-filter-v2/__tests__/data-table-filters.test.tsx
index 2f12aaac..ac3822bb 100644
--- a/apps/web/registry/data-table-filter-v2/__tests__/data-table-filters.test.tsx
+++ b/apps/web/registry/data-table-filter-v2/__tests__/data-table-filters.test.tsx
@@ -1,12 +1,9 @@
 import { act, renderHook } from '@testing-library/react'
 import { CircleIcon } from 'lucide-react'
 import { describe, expect, it } from 'vitest'
-import { useDataTableFilters } from '../components/data-table-filter'
-import {
-  DEFAULT_OPERATORS,
-  createColumnConfigHelper,
-  determineNewOperator,
-} from '../lib/filters'
+import { createColumnConfigHelper } from '../core/filters'
+import { DEFAULT_OPERATORS, determineNewOperator } from '../core/operators'
+import { useDataTableFilters } from '../hooks/use-data-table-filters'
 
 // Dummy icon component for column configuration
 const DummyIcon = CircleIcon
diff --git a/apps/web/registry/data-table-filter-v2/components/active-filters.tsx b/apps/web/registry/data-table-filter-v2/components/active-filters.tsx
new file mode 100644
index 00000000..97686ab3
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/components/active-filters.tsx
@@ -0,0 +1,162 @@
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { X } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import type {
+  Column,
+  ColumnDataType,
+  DataTableFilterActions,
+  FilterModel,
+  FilterStrategy,
+  FiltersState,
+} from '../core/types'
+import { getColumn } from '../lib/helpers'
+import { FilterOperator } from './filter-operator'
+import { FilterSubject } from './filter-subject'
+import { FilterValue } from './filter-value'
+
+interface ActiveFiltersProps<TData> {
+  columns: Column<TData>[]
+  filters: FiltersState
+  actions: DataTableFilterActions
+  strategy: FilterStrategy
+}
+
+export function ActiveFilters<TData>({
+  columns,
+  filters,
+  actions,
+  strategy,
+}: ActiveFiltersProps<TData>) {
+  return (
+    <>
+      {filters.map((filter) => {
+        const id = filter.columnId
+
+        const column = getColumn(columns, id)
+
+        // Skip if no filter value
+        if (!filter.values) return null
+
+        return (
+          <ActiveFilter
+            key={`active-filter-${filter.columnId}`}
+            filter={filter}
+            column={column}
+            actions={actions}
+            strategy={strategy}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+interface ActiveFilterProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+  strategy: FilterStrategy
+}
+
+// Generic render function for a filter with type-safe value
+export function ActiveFilter<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+  strategy,
+}: ActiveFilterProps<TData, TType>) {
+  return (
+    <div className="flex h-7 items-center rounded-2xl border border-border bg-background shadow-xs text-xs">
+      <FilterSubject column={column} />
+      <Separator orientation="vertical" />
+      <FilterOperator filter={filter} column={column} actions={actions} />
+      <Separator orientation="vertical" />
+      <FilterValue
+        filter={filter}
+        column={column}
+        actions={actions}
+        strategy={strategy}
+      />
+      <Separator orientation="vertical" />
+      <Button
+        variant="ghost"
+        className="rounded-none rounded-r-2xl text-xs w-7 h-full"
+        onClick={() => actions.removeFilter(filter.columnId)}
+      >
+        <X className="size-4 -translate-x-0.5" />
+      </Button>
+    </div>
+  )
+}
+
+export function ActiveFiltersMobileContainer({
+  children,
+}: { children: React.ReactNode }) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const [showLeftBlur, setShowLeftBlur] = useState(false)
+  const [showRightBlur, setShowRightBlur] = useState(true)
+
+  // Check if there's content to scroll and update blur states
+  const checkScroll = () => {
+    if (scrollContainerRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } =
+        scrollContainerRef.current
+
+      // Show left blur if scrolled to the right
+      setShowLeftBlur(scrollLeft > 0)
+
+      // Show right blur if there's more content to scroll to the right
+      // Add a small buffer (1px) to account for rounding errors
+      setShowRightBlur(scrollLeft + clientWidth < scrollWidth - 1)
+    }
+  }
+
+  // Log blur states for debugging
+  // useEffect(() => {
+  //   console.log('left:', showLeftBlur, '  right:', showRightBlur)
+  // }, [showLeftBlur, showRightBlur])
+
+  // Set up ResizeObserver to monitor container size
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      const resizeObserver = new ResizeObserver(() => {
+        checkScroll()
+      })
+      resizeObserver.observe(scrollContainerRef.current)
+      return () => {
+        resizeObserver.disconnect()
+      }
+    }
+  }, [])
+
+  // Update blur states when children change
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    checkScroll()
+  }, [children])
+
+  return (
+    <div className="relative w-full overflow-x-hidden">
+      {/* Left blur effect */}
+      {showLeftBlur && (
+        <div className="absolute left-0 top-0 bottom-0 w-16 z-10 pointer-events-none bg-gradient-to-r from-background to-transparent animate-in fade-in-0" />
+      )}
+
+      {/* Scrollable container */}
+      <div
+        ref={scrollContainerRef}
+        className="flex gap-2 overflow-x-scroll no-scrollbar"
+        onScroll={checkScroll}
+      >
+        {children}
+      </div>
+
+      {/* Right blur effect */}
+      {showRightBlur && (
+        <div className="absolute right-0 top-0 bottom-0 w-16 z-10 pointer-events-none bg-gradient-to-l from-background to-transparent animate-in fade-in-0 " />
+      )}
+    </div>
+  )
+}
diff --git a/apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx b/apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx
index c29417ff..50f4e603 100644
--- a/apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx
+++ b/apps/web/registry/data-table-filter-v2/components/data-table-filter.tsx
@@ -1,359 +1,15 @@
 'use client'
 
-import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/calendar'
-import { Checkbox } from '@/components/ui/checkbox'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command'
-import { Input } from '@/components/ui/input'
-import {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import { Separator } from '@/components/ui/separator'
-import { Slider } from '@/components/ui/slider'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useIsMobile } from '@/hooks/use-mobile'
-import { cn, print } from '@/lib/utils'
-import { format, isEqual } from 'date-fns'
-import { FilterXIcon } from 'lucide-react'
-import { ArrowRight, Filter } from 'lucide-react'
-import { X } from 'lucide-react'
-import { Ellipsis } from 'lucide-react'
-import {
-  cloneElement,
-  isValidElement,
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import type { DateRange } from 'react-day-picker'
-import { take, uniq } from '../lib/array'
-import { addUniq, removeUniq } from '../lib/array'
-import {
-  DEFAULT_OPERATORS,
-  createColumns,
-  createNumberFilterValue,
-  dateFilterDetails,
-  determineNewOperator,
-  filterTypeOperatorDetails,
-  getColumn,
-  isColumnOptionArray,
-  isColumnOptionMap,
-  multiOptionFilterDetails,
-  numberFilterDetails,
-  optionFilterDetails,
-  textFilterDetails,
-} from '../lib/filters'
 import type {
   Column,
-  ColumnConfig,
-  ColumnDataType,
-  ColumnOption,
   DataTableFilterActions,
-  FilterModel,
-  FilterOperators,
   FilterStrategy,
   FiltersState,
-  OptionBasedColumnDataType,
-  OptionColumnIds,
-} from '../lib/filters.types'
-
-export interface DataTableFiltersOptions<
-  TData,
-  TColumns extends ReadonlyArray<ColumnConfig<TData, any, any, any>>,
-  TStrategy extends FilterStrategy,
-> {
-  strategy: TStrategy
-  data: TData[]
-  columnsConfig: TColumns
-  controlledState?:
-    | [FiltersState, React.Dispatch<React.SetStateAction<FiltersState>>]
-    | undefined
-  options?: Partial<
-    Record<
-      OptionColumnIds<TColumns>,
-      | ColumnOption[]
-      | [ColumnOption[] | undefined, Map<string, number> | undefined]
-    >
-  >
-}
-
-export function useDataTableFilters<
-  TData,
-  TColumns extends ReadonlyArray<ColumnConfig<TData, any, any, any>>,
-  TStrategy extends FilterStrategy,
->({
-  strategy,
-  data,
-  columnsConfig,
-  controlledState,
-  options,
-}: DataTableFiltersOptions<TData, TColumns, TStrategy>) {
-  const [internalFilters, setInternalFilters] = useState<FiltersState>([])
-  const [filters, setFilters] = controlledState ?? [
-    internalFilters,
-    setInternalFilters,
-  ]
-
-  // Convert ColumnConfig to Column, applying options and faceted options if provided
-  const columns = useMemo(() => {
-    const enhancedConfigs = columnsConfig.map((config) => {
-      if (
-        options &&
-        (config.type === 'option' || config.type === 'multiOption')
-      ) {
-        const optionsInput = options[config.id as OptionColumnIds<TColumns>]
-
-        if (!optionsInput) return config
-
-        if (isColumnOptionArray(optionsInput)) {
-          return { ...config, options: optionsInput }
-        }
-
-        if (
-          isColumnOptionArray(optionsInput[0]) &&
-          isColumnOptionMap(optionsInput[1])
-        ) {
-          return {
-            ...config,
-            options: optionsInput[0],
-            facetedOptions: optionsInput[1],
-          }
-        }
-      }
-
-      return config
-    })
-    return createColumns(data, enhancedConfigs, strategy)
-  }, [data, columnsConfig, options, strategy])
-
-  const actions: DataTableFilterActions = useMemo(
-    () => ({
-      addFilterValue<TData, TType extends OptionBasedColumnDataType>(
-        column: ColumnConfig<TData, TType>,
-        values: FilterModel<TType>['values'],
-      ) {
-        if (column.type === 'option') {
-          setFilters((prev) => {
-            const filter = prev.find((f) => f.columnId === column.id)
-            const isColumnFiltered = filter && filter.values.length > 0
-            if (!isColumnFiltered) {
-              return [
-                ...prev,
-                {
-                  columnId: column.id,
-                  operator:
-                    values.length > 1
-                      ? DEFAULT_OPERATORS[column.type].multiple
-                      : DEFAULT_OPERATORS[column.type].single,
-                  values,
-                },
-              ]
-            }
-            const oldValues = filter.values
-            const newValues = addUniq(filter.values, values)
-            const newOperator = determineNewOperator(
-              'option',
-              oldValues,
-              newValues,
-              filter.operator,
-            )
-            return prev.map((f) =>
-              f.columnId === column.id
-                ? {
-                    columnId: column.id,
-                    operator: newOperator,
-                    values: newValues,
-                  }
-                : f,
-            )
-          })
-          return
-        }
-        if (column.type === 'multiOption') {
-          setFilters((prev) => {
-            const filter = prev.find((f) => f.columnId === column.id)
-            const isColumnFiltered = filter && filter.values.length > 0
-            if (!isColumnFiltered) {
-              return [
-                ...prev,
-                {
-                  columnId: column.id,
-                  operator:
-                    values.length > 1
-                      ? DEFAULT_OPERATORS[column.type].multiple
-                      : DEFAULT_OPERATORS[column.type].single,
-                  values,
-                },
-              ]
-            }
-            const oldValues = filter.values
-            const newValues = addUniq(filter.values, values)
-            const newOperator = determineNewOperator(
-              'multiOption',
-              oldValues,
-              newValues,
-              filter.operator,
-            )
-            if (newValues.length === 0) {
-              return prev.filter((f) => f.columnId !== column.id)
-            }
-            return prev.map((f) =>
-              f.columnId === column.id
-                ? {
-                    columnId: column.id,
-                    operator: newOperator,
-                    values: newValues,
-                  }
-                : f,
-            )
-          })
-          return
-        }
-        throw new Error(
-          '[data-table-filter] addFilterValue() is only supported for option columns',
-        )
-      },
-      removeFilterValue<TData, TType extends OptionBasedColumnDataType>(
-        column: ColumnConfig<TData, TType>,
-        value: FilterModel<TType>['values'],
-      ) {
-        if (column.type === 'option') {
-          setFilters((prev) => {
-            const filter = prev.find((f) => f.columnId === column.id)
-            const isColumnFiltered = filter && filter.values.length > 0
-            if (!isColumnFiltered) {
-              return [...prev]
-            }
-            const newValues = removeUniq(filter.values, value)
-            const oldValues = filter.values
-            const newOperator = determineNewOperator(
-              'option',
-              oldValues,
-              newValues,
-              filter.operator,
-            )
-            if (newValues.length === 0) {
-              return prev.filter((f) => f.columnId !== column.id)
-            }
-            return prev.map((f) =>
-              f.columnId === column.id
-                ? {
-                    columnId: column.id,
-                    operator: newOperator,
-                    values: newValues,
-                  }
-                : f,
-            )
-          })
-          return
-        }
-        if (column.type === 'multiOption') {
-          setFilters((prev) => {
-            const filter = prev.find((f) => f.columnId === column.id)
-            const isColumnFiltered = filter && filter.values.length > 0
-            if (!isColumnFiltered) {
-              return [...prev]
-            }
-            const newValues = removeUniq(filter.values, value)
-            const oldValues = filter.values
-            const newOperator = determineNewOperator(
-              'multiOption',
-              oldValues,
-              newValues,
-              filter.operator,
-            )
-            if (newValues.length === 0) {
-              return prev.filter((f) => f.columnId !== column.id)
-            }
-            return prev.map((f) =>
-              f.columnId === column.id
-                ? {
-                    columnId: column.id,
-                    operator: newOperator,
-                    values: newValues,
-                  }
-                : f,
-            )
-          })
-          return
-        }
-        throw new Error(
-          '[data-table-filter] removeFilterValue() is only supported for option columns',
-        )
-      },
-      setFilterValue<TData, TType extends ColumnDataType>(
-        column: ColumnConfig<TData, TType>,
-        values: FilterModel<TType>['values'],
-      ) {
-        setFilters((prev) => {
-          const filter = prev.find((f) => f.columnId === column.id)
-          const isColumnFiltered = filter && filter.values.length > 0
-          const newValues =
-            column.type === 'number'
-              ? createNumberFilterValue(values as number[])
-              : uniq(values)
-          if (newValues.length === 0) return prev
-          if (!isColumnFiltered) {
-            return [
-              ...prev,
-              {
-                columnId: column.id,
-                operator:
-                  values.length > 1
-                    ? DEFAULT_OPERATORS[column.type].multiple
-                    : DEFAULT_OPERATORS[column.type].single,
-                values: newValues,
-              },
-            ]
-          }
-          const oldValues = filter.values
-          const newOperator = determineNewOperator(
-            column.type,
-            oldValues,
-            newValues,
-            filter.operator,
-          )
-          const newFilter = {
-            columnId: column.id,
-            operator: newOperator,
-            values: newValues as any,
-          } satisfies FilterModel<TType>
-          return prev.map((f) => (f.columnId === column.id ? newFilter : f))
-        })
-      },
-      setFilterOperator<TType extends ColumnDataType>(
-        columnId: string,
-        operator: FilterModel<TType>['operator'],
-      ) {
-        setFilters((prev) =>
-          prev.map((f) => (f.columnId === columnId ? { ...f, operator } : f)),
-        )
-      },
-      removeFilter(columnId: string) {
-        setFilters((prev) => prev.filter((f) => f.columnId !== columnId))
-      },
-      removeAllFilters() {
-        setFilters([])
-      },
-    }),
-    [setFilters],
-  )
-
-  return { columns, filters, actions, strategy } // columns is Column<TData>[]
-}
+} from '../core/types'
+import { ActiveFilters, ActiveFiltersMobileContainer } from './active-filters'
+import { FilterActions } from './filter-actions'
+import { FilterSelector } from './filter-selector'
 
 interface DataTableFilterProps<TData> {
   columns: Column<TData>[]
@@ -413,1410 +69,3 @@ export function DataTableFilter<TData>({
     </div>
   )
 }
-
-interface FilterActionsProps {
-  hasFilters: boolean
-  actions?: DataTableFilterActions
-}
-
-export const FilterActions = memo(__FilterActions)
-function __FilterActions({ hasFilters, actions }: FilterActionsProps) {
-  return (
-    <Button
-      className={cn('h-7 !px-2', !hasFilters && 'hidden')}
-      variant="destructive"
-      onClick={actions?.removeAllFilters}
-    >
-      <FilterXIcon />
-      <span className="hidden md:block">Clear</span>
-    </Button>
-  )
-}
-
-interface FilterSelectorProps<TData> {
-  filters: FiltersState
-  columns: Column<TData>[]
-  actions: DataTableFilterActions
-  strategy: FilterStrategy
-}
-
-export const FilterSelector = memo(__FilterSelector) as typeof __FilterSelector
-
-function __FilterSelector<TData>({
-  filters,
-  columns,
-  actions,
-  strategy,
-}: FilterSelectorProps<TData>) {
-  const [open, setOpen] = useState(false)
-  const [value, setValue] = useState('')
-  const [property, setProperty] = useState<string | undefined>(undefined)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const column = property ? getColumn(columns, property) : undefined
-  const filter = property
-    ? filters.find((f) => f.columnId === property)
-    : undefined
-
-  const hasFilters = filters.length > 0
-
-  useEffect(() => {
-    if (property && inputRef) {
-      inputRef.current?.focus()
-      setValue('')
-    }
-  }, [property])
-
-  useEffect(() => {
-    if (!open) setTimeout(() => setValue(''), 150)
-  }, [open])
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: need filters to be updated
-  const content = useMemo(
-    () =>
-      property && column ? (
-        <FilterValueController
-          filter={filter!}
-          column={column as Column<TData, ColumnDataType>}
-          actions={actions}
-          strategy={strategy}
-        />
-      ) : (
-        <Command loop>
-          <CommandInput
-            value={value}
-            onValueChange={setValue}
-            ref={inputRef}
-            placeholder="Search..."
-          />
-          <CommandEmpty>No results.</CommandEmpty>
-          <CommandList className="max-h-fit">
-            <CommandGroup>
-              {columns.map((column) => (
-                <FilterableColumn
-                  key={column.id}
-                  column={column}
-                  setProperty={setProperty}
-                />
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      ),
-    [property, column, filter, filters, columns, actions, value],
-  )
-
-  return (
-    <Popover
-      open={open}
-      onOpenChange={async (value) => {
-        setOpen(value)
-        if (!value) setTimeout(() => setProperty(undefined), 100)
-      }}
-    >
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          className={cn('h-7', hasFilters && 'w-fit !px-2')}
-        >
-          <Filter className="size-4" />
-          {!hasFilters && <span>Filter</span>}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        align="start"
-        side="bottom"
-        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
-      >
-        {content}
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-export function FilterableColumn<TData, TType extends ColumnDataType, TVal>({
-  column,
-  setProperty,
-}: {
-  column: Column<TData, TType, TVal>
-  setProperty: (value: string) => void
-}) {
-  const itemRef = useRef<HTMLDivElement>(null)
-
-  const prefetch = useCallback(() => {
-    column.prefetchOptions()
-    column.prefetchValues()
-    column.prefetchFacetedUniqueValues()
-  }, [column])
-
-  useEffect(() => {
-    const target = itemRef.current
-
-    if (!target) return
-
-    // Set up MutationObserver
-    const observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        if (mutation.type === 'attributes') {
-          const isSelected = target.getAttribute('data-selected') === 'true'
-          if (isSelected) prefetch()
-        }
-      }
-    })
-
-    // Set up observer
-    observer.observe(target, {
-      attributes: true,
-      attributeFilter: ['data-selected'],
-    })
-
-    // Cleanup on unmount
-    return () => observer.disconnect()
-  }, [prefetch])
-
-  return (
-    <CommandItem
-      ref={itemRef}
-      onSelect={() => setProperty(column.id)}
-      className="group"
-      onMouseEnter={prefetch}
-    >
-      <div className="flex w-full items-center justify-between">
-        <div className="inline-flex items-center gap-1.5">
-          {<column.icon strokeWidth={2.25} className="size-4" />}
-          <span>{column.displayName}</span>
-        </div>
-        <ArrowRight className="size-4 opacity-0 group-aria-selected:opacity-100" />
-      </div>
-    </CommandItem>
-  )
-}
-
-interface ActiveFiltersProps<TData> {
-  columns: Column<TData>[]
-  filters: FiltersState
-  actions: DataTableFilterActions
-  strategy: FilterStrategy
-}
-
-export function ActiveFilters<TData>({
-  columns,
-  filters,
-  actions,
-  strategy,
-}: ActiveFiltersProps<TData>) {
-  return (
-    <>
-      {filters.map((filter) => {
-        const id = filter.columnId
-
-        const column = getColumn(columns, id)
-
-        // Skip if no filter value
-        if (!filter.values) return null
-
-        return (
-          <ActiveFilter
-            key={`active-filter-${filter.columnId}`}
-            filter={filter}
-            column={column}
-            actions={actions}
-            strategy={strategy}
-          />
-        )
-      })}
-    </>
-  )
-}
-
-interface ActiveFilterProps<TData, TType extends ColumnDataType> {
-  filter: FilterModel<TType>
-  column: Column<TData, TType>
-  actions: DataTableFilterActions
-  strategy: FilterStrategy
-}
-
-// Generic render function for a filter with type-safe value
-export function ActiveFilter<TData, TType extends ColumnDataType>({
-  filter,
-  column,
-  actions,
-  strategy,
-}: ActiveFilterProps<TData, TType>) {
-  return (
-    <div className="flex h-7 items-center rounded-2xl border border-border bg-background shadow-xs text-xs">
-      <FilterSubject column={column} />
-      <Separator orientation="vertical" />
-      <FilterOperator filter={filter} column={column} actions={actions} />
-      <Separator orientation="vertical" />
-      <FilterValue
-        filter={filter}
-        column={column}
-        actions={actions}
-        strategy={strategy}
-      />
-      <Separator orientation="vertical" />
-      <Button
-        variant="ghost"
-        className="rounded-none rounded-r-2xl text-xs w-7 h-full"
-        onClick={() => actions.removeFilter(filter.columnId)}
-      >
-        <X className="size-4 -translate-x-0.5" />
-      </Button>
-    </div>
-  )
-}
-
-/****** Property Filter Subject ******/
-
-interface FilterSubjectProps<TData, TType extends ColumnDataType> {
-  column: Column<TData, TType>
-}
-
-export function FilterSubject<TData, TType extends ColumnDataType>({
-  column,
-}: FilterSubjectProps<TData, TType>) {
-  const hasIcon = !!column.icon
-  return (
-    <span className="flex select-none items-center gap-1 whitespace-nowrap px-2 font-medium">
-      {hasIcon && <column.icon className="size-4 stroke-[2.25px]" />}
-      <span>{column.displayName}</span>
-    </span>
-  )
-}
-
-/****** Property Filter Operator ******/
-
-interface FilterOperatorProps<TData, TType extends ColumnDataType> {
-  column: Column<TData, TType>
-  filter: FilterModel<TType>
-  actions: DataTableFilterActions
-}
-
-// Renders the filter operator display and menu for a given column filter
-// The filter operator display is the label and icon for the filter operator
-// The filter operator menu is the dropdown menu for the filter operator
-export function FilterOperator<TData, TType extends ColumnDataType>({
-  column,
-  filter,
-  actions,
-}: FilterOperatorProps<TData, TType>) {
-  const [open, setOpen] = useState<boolean>(false)
-
-  const close = () => setOpen(false)
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          className="m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs"
-        >
-          <FilterOperatorDisplay filter={filter} columnType={column.type} />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        align="start"
-        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
-      >
-        <Command loop>
-          <CommandInput placeholder="Search..." />
-          <CommandEmpty>No results.</CommandEmpty>
-          <CommandList className="max-h-fit">
-            <FilterOperatorController
-              filter={filter}
-              column={column}
-              actions={actions}
-              closeController={close}
-            />
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-interface FilterOperatorDisplayProps<TType extends ColumnDataType> {
-  filter: FilterModel<TType>
-  columnType: TType
-}
-
-export function FilterOperatorDisplay<TType extends ColumnDataType>({
-  filter,
-  columnType,
-}: FilterOperatorDisplayProps<TType>) {
-  const operator = filterTypeOperatorDetails[columnType][filter.operator]
-
-  return <span>{operator.label}</span>
-}
-
-interface FilterOperatorControllerProps<TData, TType extends ColumnDataType> {
-  filter: FilterModel<TType>
-  column: Column<TData, TType>
-  actions: DataTableFilterActions
-  closeController: () => void
-}
-
-/*
- *
- * TODO: Reduce into a single component. Each data type does not need it's own controller.
- *
- */
-export function FilterOperatorController<TData, TType extends ColumnDataType>({
-  filter,
-  column,
-  actions,
-  closeController,
-}: FilterOperatorControllerProps<TData, TType>) {
-  switch (column.type) {
-    case 'option':
-      return (
-        <FilterOperatorOptionController
-          filter={filter as FilterModel<'option'>}
-          column={column as Column<TData, 'option'>}
-          actions={actions}
-          closeController={closeController}
-        />
-      )
-    case 'multiOption':
-      return (
-        <FilterOperatorMultiOptionController
-          filter={filter as FilterModel<'multiOption'>}
-          column={column as Column<TData, 'multiOption'>}
-          actions={actions}
-          closeController={closeController}
-        />
-      )
-    case 'date':
-      return (
-        <FilterOperatorDateController
-          filter={filter as FilterModel<'date'>}
-          column={column as Column<TData, 'date'>}
-          actions={actions}
-          closeController={closeController}
-        />
-      )
-    case 'text':
-      return (
-        <FilterOperatorTextController
-          filter={filter as FilterModel<'text'>}
-          column={column as Column<TData, 'text'>}
-          actions={actions}
-          closeController={closeController}
-        />
-      )
-    case 'number':
-      return (
-        <FilterOperatorNumberController
-          filter={filter as FilterModel<'number'>}
-          column={column as Column<TData, 'number'>}
-          actions={actions}
-          closeController={closeController}
-        />
-      )
-    default:
-      return null
-  }
-}
-
-function FilterOperatorOptionController<TData>({
-  filter,
-  column,
-  actions,
-  closeController,
-}: FilterOperatorControllerProps<TData, 'option'>) {
-  const filterDetails = optionFilterDetails[filter.operator]
-
-  // console.log(
-  //   '[FilterOperatorOptionController] filterDetails:',
-  //   print(filterDetails),
-  // )
-
-  const relatedFilters = Object.values(optionFilterDetails).filter(
-    (o) => o.target === filterDetails.target,
-  )
-
-  const changeOperator = (value: string) => {
-    actions?.setFilterOperator(column.id, value as FilterOperators['option'])
-    closeController()
-  }
-
-  return (
-    <CommandGroup heading="Operators">
-      {relatedFilters.map((r) => {
-        return (
-          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
-            {r.label}
-          </CommandItem>
-        )
-      })}
-    </CommandGroup>
-  )
-}
-
-function FilterOperatorMultiOptionController<TData>({
-  filter,
-  column,
-  actions,
-  closeController,
-}: FilterOperatorControllerProps<TData, 'multiOption'>) {
-  const filterDetails = multiOptionFilterDetails[filter.operator]
-
-  const relatedFilters = Object.values(multiOptionFilterDetails).filter(
-    (o) => o.target === filterDetails.target,
-  )
-
-  const changeOperator = (value: string) => {
-    actions?.setFilterOperator(
-      column.id,
-      value as FilterOperators['multiOption'],
-    )
-    closeController()
-  }
-
-  return (
-    <CommandGroup heading="Operators">
-      {relatedFilters.map((r) => {
-        return (
-          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
-            {r.label}
-          </CommandItem>
-        )
-      })}
-    </CommandGroup>
-  )
-}
-
-function FilterOperatorDateController<TData>({
-  filter,
-  column,
-  actions,
-  closeController,
-}: FilterOperatorControllerProps<TData, 'date'>) {
-  const filterDetails = dateFilterDetails[filter.operator]
-
-  const relatedFilters = Object.values(dateFilterDetails).filter(
-    (o) => o.target === filterDetails.target,
-  )
-
-  const changeOperator = (value: string) => {
-    actions?.setFilterOperator(column.id, value as FilterOperators['date'])
-    closeController()
-  }
-
-  return (
-    <CommandGroup>
-      {relatedFilters.map((r) => {
-        return (
-          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
-            {r.label}
-          </CommandItem>
-        )
-      })}
-    </CommandGroup>
-  )
-}
-
-export function FilterOperatorTextController<TData>({
-  filter,
-  column,
-  actions,
-  closeController,
-}: FilterOperatorControllerProps<TData, 'text'>) {
-  const filterDetails = textFilterDetails[filter.operator]
-
-  const relatedFilters = Object.values(textFilterDetails).filter(
-    (o) => o.target === filterDetails.target,
-  )
-
-  const changeOperator = (value: string) => {
-    actions?.setFilterOperator(column.id, value as FilterOperators['text'])
-    closeController()
-  }
-
-  return (
-    <CommandGroup heading="Operators">
-      {relatedFilters.map((r) => {
-        return (
-          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
-            {r.label}
-          </CommandItem>
-        )
-      })}
-    </CommandGroup>
-  )
-}
-
-function FilterOperatorNumberController<TData>({
-  filter,
-  column,
-  actions,
-  closeController,
-}: FilterOperatorControllerProps<TData, 'number'>) {
-  // Show all related operators
-  const filterDetails = numberFilterDetails[filter.operator]
-
-  // console.log(
-  //   '[FilterOperatorOptionController] filterDetails:',
-  //   print(filterDetails),
-  // )
-
-  const relatedFilters = Object.values(numberFilterDetails).filter(
-    (o) => o.target === filterDetails.target,
-  )
-
-  const changeOperator = (value: string) => {
-    actions?.setFilterOperator(column.id, value as FilterOperators['number'])
-    closeController()
-  }
-
-  return (
-    <div>
-      <CommandGroup heading="Operators">
-        {relatedFilters.map((r) => (
-          <CommandItem
-            onSelect={() => changeOperator(r.value)}
-            value={r.value}
-            key={r.value}
-          >
-            {r.label} {/**/}
-          </CommandItem>
-        ))}
-      </CommandGroup>
-    </div>
-  )
-}
-
-/****** Property Filter Value ******/
-
-interface FilterValueProps<TData, TType extends ColumnDataType> {
-  filter: FilterModel<TType>
-  column: Column<TData, TType>
-  actions: DataTableFilterActions
-  strategy: FilterStrategy
-}
-
-export const FilterValue = memo(__FilterValue) as typeof __FilterValue
-
-function __FilterValue<TData, TType extends ColumnDataType>({
-  filter,
-  column,
-  actions,
-  strategy,
-}: FilterValueProps<TData, TType>) {
-  // console.log('[FilterValue] Rendering')
-  useEffect(() => {
-    console.log('[FilterValue] Filters:', print(filter))
-  }, [filter])
-
-  return (
-    <Popover>
-      <PopoverAnchor className="h-full" />
-      <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          className="m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs"
-        >
-          <FilterValueDisplay
-            filter={filter}
-            column={column}
-            actions={actions}
-          />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        align="start"
-        side="bottom"
-        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
-      >
-        <FilterValueController
-          filter={filter}
-          column={column}
-          actions={actions}
-          strategy={strategy}
-        />
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-interface FilterValueDisplayProps<TData, TType extends ColumnDataType> {
-  filter: FilterModel<TType>
-  column: Column<TData, TType>
-  actions: DataTableFilterActions
-}
-
-export function FilterValueDisplay<TData, TType extends ColumnDataType>({
-  filter,
-  column,
-  actions,
-}: FilterValueDisplayProps<TData, TType>) {
-  switch (column.type) {
-    case 'option':
-      return (
-        <FilterValueOptionDisplay
-          filter={filter as FilterModel<'option'>}
-          column={column as Column<TData, 'option'>}
-          actions={actions}
-        />
-      )
-    case 'multiOption':
-      return (
-        <FilterValueMultiOptionDisplay
-          filter={filter as FilterModel<'multiOption'>}
-          column={column as Column<TData, 'multiOption'>}
-          actions={actions}
-        />
-      )
-    case 'date':
-      return (
-        <FilterValueDateDisplay
-          filter={filter as FilterModel<'date'>}
-          column={column as Column<TData, 'date'>}
-          actions={actions}
-        />
-      )
-    case 'text':
-      return (
-        <FilterValueTextDisplay
-          filter={filter as FilterModel<'text'>}
-          column={column as Column<TData, 'text'>}
-          actions={actions}
-        />
-      )
-    case 'number':
-      return (
-        <FilterValueNumberDisplay
-          filter={filter as FilterModel<'number'>}
-          column={column as Column<TData, 'number'>}
-          actions={actions}
-        />
-      )
-    default:
-      return null
-  }
-}
-
-export function FilterValueOptionDisplay<TData>({
-  filter,
-  column,
-  actions,
-}: FilterValueDisplayProps<TData, 'option'>) {
-  const options = useMemo(() => column.getOptions(), [column])
-  const selected = options.filter((o) => filter?.values.includes(o.value))
-
-  // We display the selected options based on how many are selected
-  //
-  // If there is only one option selected, we display its icon and label
-  //
-  // If there are multiple options selected, we display:
-  // 1) up to 3 icons of the selected options
-  // 2) the number of selected options
-  if (selected.length === 1) {
-    const { label, icon: Icon } = selected[0]
-    const hasIcon = !!Icon
-    return (
-      <span className="inline-flex items-center gap-1">
-        {hasIcon &&
-          (isValidElement(Icon) ? (
-            Icon
-          ) : (
-            <Icon className="size-4 text-primary" />
-          ))}
-        <span>{label}</span>
-      </span>
-    )
-  }
-  const name = column.displayName.toLowerCase()
-  const pluralName = name.endsWith('s') ? `${name}es` : `${name}s`
-
-  const hasOptionIcons = !options?.some((o) => !o.icon)
-
-  return (
-    <div className="inline-flex items-center gap-0.5">
-      {hasOptionIcons &&
-        take(selected, 3).map(({ value, icon }) => {
-          const Icon = icon!
-          return isValidElement(Icon) ? (
-            Icon
-          ) : (
-            <Icon key={value} className="size-4" />
-          )
-        })}
-      <span className={cn(hasOptionIcons && 'ml-1.5')}>
-        {selected.length} {pluralName}
-      </span>
-    </div>
-  )
-}
-
-export function FilterValueMultiOptionDisplay<TData>({
-  filter,
-  column,
-  actions,
-}: FilterValueDisplayProps<TData, 'multiOption'>) {
-  const options = useMemo(() => column.getOptions(), [column])
-  const selected = options.filter((o) => filter.values.includes(o.value))
-
-  if (selected.length === 1) {
-    const { label, icon: Icon } = selected[0]
-    const hasIcon = !!Icon
-    return (
-      <span className="inline-flex items-center gap-1.5">
-        {hasIcon &&
-          (isValidElement(Icon) ? (
-            Icon
-          ) : (
-            <Icon className="size-4 text-primary" />
-          ))}
-
-        <span>{label}</span>
-      </span>
-    )
-  }
-
-  const name = column.displayName.toLowerCase()
-
-  const hasOptionIcons = !options?.some((o) => !o.icon)
-
-  return (
-    <div className="inline-flex items-center gap-1.5">
-      {hasOptionIcons && (
-        <div key="icons" className="inline-flex items-center gap-0.5">
-          {take(selected, 3).map(({ value, icon }) => {
-            const Icon = icon!
-            return isValidElement(Icon) ? (
-              cloneElement(Icon, { key: value })
-            ) : (
-              <Icon key={value} className="size-4" />
-            )
-          })}
-        </div>
-      )}
-      <span>
-        {selected.length} {name}
-      </span>
-    </div>
-  )
-}
-
-function formatDateRange(start: Date, end: Date) {
-  const sameMonth = start.getMonth() === end.getMonth()
-  const sameYear = start.getFullYear() === end.getFullYear()
-
-  if (sameMonth && sameYear) {
-    return `${format(start, 'MMM d')} - ${format(end, 'd, yyyy')}`
-  }
-
-  if (sameYear) {
-    return `${format(start, 'MMM d')} - ${format(end, 'MMM d, yyyy')}`
-  }
-
-  return `${format(start, 'MMM d, yyyy')} - ${format(end, 'MMM d, yyyy')}`
-}
-
-export function FilterValueDateDisplay<TData>({
-  filter,
-  column,
-  actions,
-}: FilterValueDisplayProps<TData, 'date'>) {
-  if (!filter) return null
-  if (filter.values.length === 0) return <Ellipsis className="size-4" />
-  if (filter.values.length === 1) {
-    const value = filter.values[0]
-
-    const formattedDateStr = format(value, 'MMM d, yyyy')
-
-    return <span>{formattedDateStr}</span>
-  }
-
-  const formattedRangeStr = formatDateRange(filter.values[0], filter.values[1])
-
-  return <span>{formattedRangeStr}</span>
-}
-
-export function FilterValueTextDisplay<TData>({
-  filter,
-  column,
-  actions,
-}: FilterValueDisplayProps<TData, 'text'>) {
-  if (!filter) return null
-  if (filter.values.length === 0 || filter.values[0].trim() === '')
-    return <Ellipsis className="size-4" />
-
-  const value = filter.values[0]
-
-  return <span>{value}</span>
-}
-
-export function FilterValueNumberDisplay<TData>({
-  filter,
-  column,
-  actions,
-}: FilterValueDisplayProps<TData, 'number'>) {
-  const maxFromMeta = column.max
-  const cappedMax = maxFromMeta ?? 2147483647
-
-  if (!filter) return null
-
-  if (
-    filter.operator === 'is between' ||
-    filter.operator === 'is not between'
-  ) {
-    const minValue = filter.values[0]
-    const maxValue =
-      filter.values[1] === Number.POSITIVE_INFINITY ||
-      filter.values[1] >= cappedMax
-        ? `${cappedMax}+`
-        : filter.values[1]
-
-    return (
-      <span className="tabular-nums tracking-tight">
-        {minValue} and {maxValue}
-      </span>
-    )
-  }
-
-  if (!filter.values || filter.values.length === 0) {
-    return null
-  }
-
-  const value = filter.values[0]
-  return <span className="tabular-nums tracking-tight">{value}</span>
-}
-
-/****** Property Filter Value Controller ******/
-
-interface FilterValueControllerProps<TData, TType extends ColumnDataType> {
-  filter: FilterModel<TType>
-  column: Column<TData, TType>
-  actions: DataTableFilterActions
-  strategy: FilterStrategy
-}
-
-export const FilterValueController = memo(
-  __FilterValueController,
-) as typeof __FilterValueController
-
-function __FilterValueController<TData, TType extends ColumnDataType>({
-  filter,
-  column,
-  actions,
-  strategy,
-}: FilterValueControllerProps<TData, TType>) {
-  switch (column.type) {
-    case 'option':
-      return (
-        <FilterValueOptionController
-          filter={filter as FilterModel<'option'>}
-          column={column as Column<TData, 'option'>}
-          actions={actions}
-          strategy={strategy}
-        />
-      )
-    case 'multiOption':
-      return (
-        <FilterValueMultiOptionController
-          filter={filter as FilterModel<'multiOption'>}
-          column={column as Column<TData, 'multiOption'>}
-          actions={actions}
-          strategy={strategy}
-        />
-      )
-    case 'date':
-      return (
-        <FilterValueDateController
-          filter={filter as FilterModel<'date'>}
-          column={column as Column<TData, 'date'>}
-          actions={actions}
-          strategy={strategy}
-        />
-      )
-    case 'text':
-      return (
-        <FilterValueTextController
-          filter={filter as FilterModel<'text'>}
-          column={column as Column<TData, 'text'>}
-          actions={actions}
-          strategy={strategy}
-        />
-      )
-    case 'number':
-      return (
-        <FilterValueNumberController
-          filter={filter as FilterModel<'number'>}
-          column={column as Column<TData, 'number'>}
-          actions={actions}
-          strategy={strategy}
-        />
-      )
-    default:
-      return null
-  }
-}
-
-export function FilterValueOptionController<TData>({
-  filter,
-  column,
-  actions,
-  strategy,
-}: FilterValueControllerProps<TData, 'option'>) {
-  const options = useMemo(() => column.getOptions(), [column])
-  const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])
-
-  function handleOptionSelect(value: string, check: boolean) {
-    if (check) actions.addFilterValue(column, [value])
-    else actions.removeFilterValue(column, [value])
-  }
-
-  return (
-    <Command loop>
-      <CommandInput autoFocus placeholder="Search..." />
-      <CommandEmpty>No results.</CommandEmpty>
-      <CommandList className="max-h-fit">
-        <CommandGroup>
-          {options.map((v) => {
-            const checked = Boolean(filter?.values.includes(v.value))
-            const count = optionsCount?.get(v.value) ?? 0
-
-            return (
-              <CommandItem
-                key={v.value}
-                onSelect={() => {
-                  handleOptionSelect(v.value, !checked)
-                }}
-                className="group flex items-center justify-between gap-1.5"
-              >
-                <div className="flex items-center gap-1.5">
-                  <Checkbox
-                    checked={checked}
-                    className="opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100"
-                  />
-                  {v.icon &&
-                    (isValidElement(v.icon) ? (
-                      v.icon
-                    ) : (
-                      <v.icon className="size-4 text-primary" />
-                    ))}
-                  <span>
-                    {v.label}
-                    <sup
-                      className={cn(
-                        !optionsCount && 'hidden',
-                        'ml-0.5 tabular-nums tracking-tight text-muted-foreground',
-                        count === 0 && 'slashed-zero',
-                      )}
-                    >
-                      {count < 100 ? count : '100+'}
-                    </sup>
-                  </span>
-                </div>
-              </CommandItem>
-            )
-          })}
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  )
-}
-
-export function FilterValueMultiOptionController<TData>({
-  filter,
-  column,
-  actions,
-  strategy,
-}: FilterValueControllerProps<TData, 'multiOption'>) {
-  const options = useMemo(() => column.getOptions(), [column])
-  const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])
-
-  // Handles the selection/deselection of an option
-  function handleOptionSelect(value: string, check: boolean) {
-    if (check) actions.addFilterValue(column, [value])
-    else actions.removeFilterValue(column, [value])
-  }
-
-  return (
-    <Command loop>
-      <CommandInput autoFocus placeholder="Search..." />
-      <CommandEmpty>No results.</CommandEmpty>
-      <CommandList>
-        <CommandGroup>
-          {options.map((v) => {
-            const checked = Boolean(filter?.values?.includes(v.value))
-            const count = optionsCount?.get(v.value) ?? 0
-
-            return (
-              <CommandItem
-                key={v.value}
-                onSelect={() => {
-                  handleOptionSelect(v.value, !checked)
-                }}
-                className="group flex items-center justify-between gap-1.5"
-              >
-                <div className="flex items-center gap-1.5">
-                  <Checkbox
-                    checked={checked}
-                    className="opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100"
-                  />
-                  {v.icon &&
-                    (isValidElement(v.icon) ? (
-                      v.icon
-                    ) : (
-                      <v.icon className="size-4 text-primary" />
-                    ))}
-                  <span>
-                    {v.label}
-                    <sup
-                      className={cn(
-                        !optionsCount && 'hidden',
-                        'ml-0.5 tabular-nums tracking-tight text-muted-foreground',
-                        count === 0 && 'slashed-zero',
-                      )}
-                    >
-                      {count < 100 ? count : '100+'}
-                    </sup>
-                  </span>
-                </div>
-              </CommandItem>
-            )
-          })}
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  )
-}
-
-export function FilterValueDateController<TData>({
-  filter,
-  column,
-  actions,
-}: FilterValueControllerProps<TData, 'date'>) {
-  const [date, setDate] = useState<DateRange | undefined>({
-    from: filter?.values[0] ?? new Date(),
-    to: filter?.values[1] ?? undefined,
-  })
-
-  function changeDateRange(value: DateRange | undefined) {
-    const start = value?.from
-    const end =
-      start && value && value.to && !isEqual(start, value.to)
-        ? value.to
-        : undefined
-
-    setDate({ from: start, to: end })
-
-    const isRange = start && end
-    const newValues = isRange ? [start, end] : start ? [start] : []
-
-    actions.setFilterValue(column, newValues)
-  }
-
-  return (
-    <Command>
-      <CommandList className="max-h-fit">
-        <CommandGroup>
-          <div>
-            <Calendar
-              initialFocus
-              mode="range"
-              defaultMonth={date?.from}
-              selected={date}
-              onSelect={changeDateRange}
-              numberOfMonths={1}
-            />
-          </div>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  )
-}
-
-export function FilterValueTextController<TData>({
-  filter,
-  column,
-  actions,
-}: FilterValueControllerProps<TData, 'text'>) {
-  const changeText = (value: string | number) => {
-    actions.setFilterValue(column, [String(value)])
-  }
-
-  return (
-    <Command>
-      <CommandList className="max-h-fit">
-        <CommandGroup>
-          <CommandItem>
-            <DebouncedInput
-              placeholder="Search..."
-              autoFocus
-              value={filter?.values[0] ?? ''}
-              onChange={changeText}
-            />
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  )
-}
-
-export function FilterValueNumberController<TData>({
-  filter,
-  column,
-  actions,
-}: FilterValueControllerProps<TData, 'number'>) {
-  const [datasetMin, datasetMax] = useMemo(
-    () => column.getFacetedMinMaxValues(),
-    [column],
-  )
-  const [sliderMin, sliderMax] = [
-    column.min ?? datasetMin,
-    column.max ?? datasetMax,
-  ]
-
-  // Local state for values
-  const [values, setValues] = useState(filter?.values ?? [0, 0])
-
-  // Sync with parent filter changes
-  useEffect(() => {
-    // console.log('a')
-    if (
-      filter?.values &&
-      filter.values.length === values.length &&
-      filter.values.every((v, i) => v === values[i])
-    ) {
-      setValues(filter.values)
-    }
-  }, [filter?.values, values])
-
-  const isNumberRange =
-    filter && numberFilterDetails[filter.operator].target === 'multiple'
-
-  const changeNumber = (value: number[]) => {
-    setValues(value)
-    // console.log('a')
-    actions.setFilterValue(column, value)
-  }
-
-  const changeMinNumber = (value: number) => {
-    const newValues = [value, values[1]]
-    setValues(newValues)
-    console.log('[FilterValueNumberController] changeMinNumber')
-    actions.setFilterValue(column, newValues)
-  }
-
-  const changeMaxNumber = (value: number) => {
-    const newValues = [values[0], value]
-    setValues(newValues)
-    console.log('[FilterValueNumberController] changeMaxNumber')
-    actions.setFilterValue(column, newValues)
-  }
-
-  const changeType = useCallback(
-    (type: 'single' | 'range') => {
-      console.log('changeType to:', type)
-      const newValues =
-        type === 'single'
-          ? [values[0]] // Keep the first value for single mode
-          : [values[0], values[1] ?? datasetMax] // Use two values for range mode
-      const newOperator = type === 'single' ? 'is' : 'is between'
-
-      // Update local state
-      setValues(newValues)
-
-      // Update global filter state atomically
-      actions.setFilterOperator(column.id, newOperator)
-      actions.setFilterValue(column, newValues)
-    },
-    [values, datasetMax, column, actions],
-  )
-
-  return (
-    <Command>
-      <CommandList className="w-[300px] px-2 py-2">
-        <CommandGroup>
-          <div className="flex flex-col w-full">
-            <Tabs
-              value={isNumberRange ? 'range' : 'single'}
-              onValueChange={(v) => changeType(v as 'single' | 'range')}
-            >
-              <TabsList className="w-full *:text-xs">
-                <TabsTrigger value="single">Single</TabsTrigger>
-                <TabsTrigger value="range">Range</TabsTrigger>
-              </TabsList>
-              <TabsContent value="single" className="flex flex-col gap-4 mt-4">
-                <Slider
-                  value={[values[0]]}
-                  onValueChange={(value) => changeNumber(value)}
-                  min={sliderMin}
-                  max={sliderMax}
-                  step={1}
-                  aria-orientation="horizontal"
-                />
-                <div className="flex items-center gap-2">
-                  <span className="text-xs font-medium">Value</span>
-                  <Input
-                    id="single"
-                    type="number"
-                    value={values[0].toString()} // Use values[0] directly
-                    onChange={(e) => changeNumber([Number(e.target.value)])}
-                    min={datasetMin}
-                    max={datasetMax}
-                  />
-                </div>
-              </TabsContent>
-              <TabsContent value="range" className="flex flex-col gap-4 mt-4">
-                <Slider
-                  value={values} // Use values directly
-                  onValueChange={changeNumber}
-                  min={sliderMin}
-                  max={sliderMax}
-                  step={1}
-                  aria-orientation="horizontal"
-                />
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs font-medium">Min</span>
-                    <DebouncedInput
-                      type="number"
-                      value={values[0]}
-                      onChange={(v) => changeMinNumber(Number(v))}
-                      min={datasetMin}
-                      max={datasetMax}
-                    />
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs font-medium">Max</span>
-                    <DebouncedInput
-                      type="number"
-                      value={values[1]}
-                      onChange={(v) => changeMaxNumber(Number(v))}
-                      min={datasetMin}
-                      max={datasetMax}
-                    />
-                  </div>
-                </div>
-              </TabsContent>
-            </Tabs>
-          </div>
-        </CommandGroup>
-      </CommandList>
-    </Command>
-  )
-}
-
-export function ActiveFiltersMobileContainer({
-  children,
-}: { children: React.ReactNode }) {
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
-  const [showLeftBlur, setShowLeftBlur] = useState(false)
-  const [showRightBlur, setShowRightBlur] = useState(true)
-
-  // Check if there's content to scroll and update blur states
-  const checkScroll = () => {
-    if (scrollContainerRef.current) {
-      const { scrollLeft, scrollWidth, clientWidth } =
-        scrollContainerRef.current
-
-      // Show left blur if scrolled to the right
-      setShowLeftBlur(scrollLeft > 0)
-
-      // Show right blur if there's more content to scroll to the right
-      // Add a small buffer (1px) to account for rounding errors
-      setShowRightBlur(scrollLeft + clientWidth < scrollWidth - 1)
-    }
-  }
-
-  // Log blur states for debugging
-  // useEffect(() => {
-  //   console.log('left:', showLeftBlur, '  right:', showRightBlur)
-  // }, [showLeftBlur, showRightBlur])
-
-  // Set up ResizeObserver to monitor container size
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  useEffect(() => {
-    if (scrollContainerRef.current) {
-      const resizeObserver = new ResizeObserver(() => {
-        checkScroll()
-      })
-      resizeObserver.observe(scrollContainerRef.current)
-      return () => {
-        resizeObserver.disconnect()
-      }
-    }
-  }, [])
-
-  // Update blur states when children change
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  useEffect(() => {
-    checkScroll()
-  }, [children])
-
-  return (
-    <div className="relative w-full overflow-x-hidden">
-      {/* Left blur effect */}
-      {showLeftBlur && (
-        <div className="absolute left-0 top-0 bottom-0 w-16 z-10 pointer-events-none bg-gradient-to-r from-background to-transparent animate-in fade-in-0" />
-      )}
-
-      {/* Scrollable container */}
-      <div
-        ref={scrollContainerRef}
-        className="flex gap-2 overflow-x-scroll no-scrollbar"
-        onScroll={checkScroll}
-      >
-        {children}
-      </div>
-
-      {/* Right blur effect */}
-      {showRightBlur && (
-        <div className="absolute right-0 top-0 bottom-0 w-16 z-10 pointer-events-none bg-gradient-to-l from-background to-transparent animate-in fade-in-0 " />
-      )}
-    </div>
-  )
-}
-
-function debounce<T extends (...args: any[]) => void>(
-  func: T,
-  wait: number,
-): (...args: Parameters<T>) => void {
-  let timeout: NodeJS.Timeout
-  return (...args: Parameters<T>) => {
-    clearTimeout(timeout)
-    timeout = setTimeout(() => func(...args), wait)
-  }
-}
-
-export function DebouncedInput({
-  value: initialValue,
-  onChange,
-  debounceMs = 500, // This is the wait time, not the function
-  ...props
-}: {
-  value: string | number
-  onChange: (value: string | number) => void
-  debounceMs?: number
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {
-  const [value, setValue] = useState(initialValue)
-
-  // Sync with initialValue when it changes
-  useEffect(() => {
-    setValue(initialValue)
-  }, [initialValue])
-
-  // Define the debounced function with useCallback
-  const debouncedOnChange = useCallback(
-    debounce((newValue: string | number) => {
-      onChange(newValue)
-    }, debounceMs), // Pass the wait time here
-    [debounceMs, onChange], // Dependencies
-  )
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value
-    setValue(newValue) // Update local state immediately
-    debouncedOnChange(newValue) // Call debounced version
-  }
-
-  return <Input {...props} value={value} onChange={handleChange} />
-}
-
-// Local debounce function
diff --git a/apps/web/registry/data-table-filter-v2/components/filter-actions.tsx b/apps/web/registry/data-table-filter-v2/components/filter-actions.tsx
new file mode 100644
index 00000000..cd38c10e
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/components/filter-actions.tsx
@@ -0,0 +1,24 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { FilterXIcon } from 'lucide-react'
+import { memo } from 'react'
+import type { DataTableFilterActions } from '../core/types'
+
+interface FilterActionsProps {
+  hasFilters: boolean
+  actions?: DataTableFilterActions
+}
+
+export const FilterActions = memo(__FilterActions)
+function __FilterActions({ hasFilters, actions }: FilterActionsProps) {
+  return (
+    <Button
+      className={cn('h-7 !px-2', !hasFilters && 'hidden')}
+      variant="destructive"
+      onClick={actions?.removeAllFilters}
+    >
+      <FilterXIcon />
+      <span className="hidden md:block">Clear</span>
+    </Button>
+  )
+}
diff --git a/apps/web/registry/data-table-filter-v2/components/filter-operator.tsx b/apps/web/registry/data-table-filter-v2/components/filter-operator.tsx
new file mode 100644
index 00000000..7d6ed7fb
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/components/filter-operator.tsx
@@ -0,0 +1,322 @@
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { useState } from 'react'
+import {
+  dateFilterDetails,
+  filterTypeOperatorDetails,
+  multiOptionFilterDetails,
+  numberFilterDetails,
+  optionFilterDetails,
+  textFilterDetails,
+} from '../core/operators'
+import type {
+  Column,
+  ColumnDataType,
+  DataTableFilterActions,
+  FilterModel,
+  FilterOperators,
+  FilterStrategy,
+} from '../core/types'
+
+interface FilterOperatorProps<TData, TType extends ColumnDataType> {
+  column: Column<TData, TType>
+  filter: FilterModel<TType>
+  actions: DataTableFilterActions
+}
+
+// Renders the filter operator display and menu for a given column filter
+// The filter operator display is the label and icon for the filter operator
+// The filter operator menu is the dropdown menu for the filter operator
+export function FilterOperator<TData, TType extends ColumnDataType>({
+  column,
+  filter,
+  actions,
+}: FilterOperatorProps<TData, TType>) {
+  const [open, setOpen] = useState<boolean>(false)
+
+  const close = () => setOpen(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          className="m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs"
+        >
+          <FilterOperatorDisplay filter={filter} columnType={column.type} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
+      >
+        <Command loop>
+          <CommandInput placeholder="Search..." />
+          <CommandEmpty>No results.</CommandEmpty>
+          <CommandList className="max-h-fit">
+            <FilterOperatorController
+              filter={filter}
+              column={column}
+              actions={actions}
+              closeController={close}
+            />
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+interface FilterOperatorDisplayProps<TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  columnType: TType
+}
+
+export function FilterOperatorDisplay<TType extends ColumnDataType>({
+  filter,
+  columnType,
+}: FilterOperatorDisplayProps<TType>) {
+  const operator = filterTypeOperatorDetails[columnType][filter.operator]
+
+  return <span>{operator.label}</span>
+}
+
+interface FilterOperatorControllerProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+  closeController: () => void
+}
+
+/*
+ *
+ * TODO: Reduce into a single component. Each data type does not need it's own controller.
+ *
+ */
+export function FilterOperatorController<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, TType>) {
+  switch (column.type) {
+    case 'option':
+      return (
+        <FilterOperatorOptionController
+          filter={filter as FilterModel<'option'>}
+          column={column as Column<TData, 'option'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'multiOption':
+      return (
+        <FilterOperatorMultiOptionController
+          filter={filter as FilterModel<'multiOption'>}
+          column={column as Column<TData, 'multiOption'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'date':
+      return (
+        <FilterOperatorDateController
+          filter={filter as FilterModel<'date'>}
+          column={column as Column<TData, 'date'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'text':
+      return (
+        <FilterOperatorTextController
+          filter={filter as FilterModel<'text'>}
+          column={column as Column<TData, 'text'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'number':
+      return (
+        <FilterOperatorNumberController
+          filter={filter as FilterModel<'number'>}
+          column={column as Column<TData, 'number'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+function FilterOperatorOptionController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'option'>) {
+  const filterDetails = optionFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(optionFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['option'])
+    closeController()
+  }
+
+  return (
+    <CommandGroup heading="Operators">
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+function FilterOperatorMultiOptionController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'multiOption'>) {
+  const filterDetails = multiOptionFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(multiOptionFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(
+      column.id,
+      value as FilterOperators['multiOption'],
+    )
+    closeController()
+  }
+
+  return (
+    <CommandGroup heading="Operators">
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+function FilterOperatorDateController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'date'>) {
+  const filterDetails = dateFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(dateFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['date'])
+    closeController()
+  }
+
+  return (
+    <CommandGroup>
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+export function FilterOperatorTextController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'text'>) {
+  const filterDetails = textFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(textFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['text'])
+    closeController()
+  }
+
+  return (
+    <CommandGroup heading="Operators">
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+function FilterOperatorNumberController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'number'>) {
+  // Show all related operators
+  const filterDetails = numberFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(numberFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['number'])
+    closeController()
+  }
+
+  return (
+    <div>
+      <CommandGroup heading="Operators">
+        {relatedFilters.map((r) => (
+          <CommandItem
+            onSelect={() => changeOperator(r.value)}
+            value={r.value}
+            key={r.value}
+          >
+            {r.label} {/**/}
+          </CommandItem>
+        ))}
+      </CommandGroup>
+    </div>
+  )
+}
diff --git a/apps/web/registry/data-table-filter-v2/components/filter-selector.tsx b/apps/web/registry/data-table-filter-v2/components/filter-selector.tsx
new file mode 100644
index 00000000..549f9445
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/components/filter-selector.tsx
@@ -0,0 +1,185 @@
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+import { ArrowRightIcon, FilterIcon } from 'lucide-react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type {
+  Column,
+  ColumnDataType,
+  DataTableFilterActions,
+  FilterStrategy,
+  FiltersState,
+} from '../core/types'
+import { getColumn } from '../lib/helpers'
+import { FilterValueController } from './filter-value'
+
+interface FilterSelectorProps<TData> {
+  filters: FiltersState
+  columns: Column<TData>[]
+  actions: DataTableFilterActions
+  strategy: FilterStrategy
+}
+
+export const FilterSelector = memo(__FilterSelector) as typeof __FilterSelector
+
+function __FilterSelector<TData>({
+  filters,
+  columns,
+  actions,
+  strategy,
+}: FilterSelectorProps<TData>) {
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState('')
+  const [property, setProperty] = useState<string | undefined>(undefined)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const column = property ? getColumn(columns, property) : undefined
+  const filter = property
+    ? filters.find((f) => f.columnId === property)
+    : undefined
+
+  const hasFilters = filters.length > 0
+
+  useEffect(() => {
+    if (property && inputRef) {
+      inputRef.current?.focus()
+      setValue('')
+    }
+  }, [property])
+
+  useEffect(() => {
+    if (!open) setTimeout(() => setValue(''), 150)
+  }, [open])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: need filters to be updated
+  const content = useMemo(
+    () =>
+      property && column ? (
+        <FilterValueController
+          filter={filter!}
+          column={column as Column<TData, ColumnDataType>}
+          actions={actions}
+          strategy={strategy}
+        />
+      ) : (
+        <Command loop>
+          <CommandInput
+            value={value}
+            onValueChange={setValue}
+            ref={inputRef}
+            placeholder="Search..."
+          />
+          <CommandEmpty>No results.</CommandEmpty>
+          <CommandList className="max-h-fit">
+            <CommandGroup>
+              {columns.map((column) => (
+                <FilterableColumn
+                  key={column.id}
+                  column={column}
+                  setProperty={setProperty}
+                />
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      ),
+    [property, column, filter, filters, columns, actions, value],
+  )
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={async (value) => {
+        setOpen(value)
+        if (!value) setTimeout(() => setProperty(undefined), 100)
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn('h-7', hasFilters && 'w-fit !px-2')}
+        >
+          <FilterIcon className="size-4" />
+          {!hasFilters && <span>Filter</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        side="bottom"
+        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
+      >
+        {content}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export function FilterableColumn<TData, TType extends ColumnDataType, TVal>({
+  column,
+  setProperty,
+}: {
+  column: Column<TData, TType, TVal>
+  setProperty: (value: string) => void
+}) {
+  const itemRef = useRef<HTMLDivElement>(null)
+
+  const prefetch = useCallback(() => {
+    column.prefetchOptions()
+    column.prefetchValues()
+    column.prefetchFacetedUniqueValues()
+  }, [column])
+
+  useEffect(() => {
+    const target = itemRef.current
+
+    if (!target) return
+
+    // Set up MutationObserver
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes') {
+          const isSelected = target.getAttribute('data-selected') === 'true'
+          if (isSelected) prefetch()
+        }
+      }
+    })
+
+    // Set up observer
+    observer.observe(target, {
+      attributes: true,
+      attributeFilter: ['data-selected'],
+    })
+
+    // Cleanup on unmount
+    return () => observer.disconnect()
+  }, [prefetch])
+
+  return (
+    <CommandItem
+      ref={itemRef}
+      onSelect={() => setProperty(column.id)}
+      className="group"
+      onMouseEnter={prefetch}
+    >
+      <div className="flex w-full items-center justify-between">
+        <div className="inline-flex items-center gap-1.5">
+          {<column.icon strokeWidth={2.25} className="size-4" />}
+          <span>{column.displayName}</span>
+        </div>
+        <ArrowRightIcon className="size-4 opacity-0 group-aria-selected:opacity-100" />
+      </div>
+    </CommandItem>
+  )
+}
diff --git a/apps/web/registry/data-table-filter-v2/components/filter-subject.tsx b/apps/web/registry/data-table-filter-v2/components/filter-subject.tsx
new file mode 100644
index 00000000..60b3217c
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/components/filter-subject.tsx
@@ -0,0 +1,17 @@
+import type { Column, ColumnDataType } from '../core/types'
+
+interface FilterSubjectProps<TData, TType extends ColumnDataType> {
+  column: Column<TData, TType>
+}
+
+export function FilterSubject<TData, TType extends ColumnDataType>({
+  column,
+}: FilterSubjectProps<TData, TType>) {
+  const hasIcon = !!column.icon
+  return (
+    <span className="flex select-none items-center gap-1 whitespace-nowrap px-2 font-medium">
+      {hasIcon && <column.icon className="size-4 stroke-[2.25px]" />}
+      <span>{column.displayName}</span>
+    </span>
+  )
+}
diff --git a/apps/web/registry/data-table-filter-v2/components/filter-value.tsx b/apps/web/registry/data-table-filter-v2/components/filter-value.tsx
new file mode 100644
index 00000000..7b8cacd2
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/components/filter-value.tsx
@@ -0,0 +1,748 @@
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import { Input } from '@/components/ui/input'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { Slider } from '@/components/ui/slider'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { cn } from '@/lib/utils'
+import { isEqual } from 'date-fns'
+import { format } from 'date-fns'
+import { Ellipsis } from 'lucide-react'
+import {
+  cloneElement,
+  isValidElement,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import type { DateRange } from 'react-day-picker'
+import { numberFilterDetails } from '../core/operators'
+import type {
+  Column,
+  ColumnDataType,
+  DataTableFilterActions,
+  FilterModel,
+  FilterStrategy,
+} from '../core/types'
+import { take } from '../lib/array'
+import { DebouncedInput } from '../ui/debounced-input'
+
+interface FilterValueProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+  strategy: FilterStrategy
+}
+
+export const FilterValue = memo(__FilterValue) as typeof __FilterValue
+
+function __FilterValue<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+  strategy,
+}: FilterValueProps<TData, TType>) {
+  return (
+    <Popover>
+      <PopoverAnchor className="h-full" />
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          className="m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs"
+        >
+          <FilterValueDisplay
+            filter={filter}
+            column={column}
+            actions={actions}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        side="bottom"
+        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
+      >
+        <FilterValueController
+          filter={filter}
+          column={column}
+          actions={actions}
+          strategy={strategy}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+interface FilterValueDisplayProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+}
+
+export function FilterValueDisplay<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, TType>) {
+  switch (column.type) {
+    case 'option':
+      return (
+        <FilterValueOptionDisplay
+          filter={filter as FilterModel<'option'>}
+          column={column as Column<TData, 'option'>}
+          actions={actions}
+        />
+      )
+    case 'multiOption':
+      return (
+        <FilterValueMultiOptionDisplay
+          filter={filter as FilterModel<'multiOption'>}
+          column={column as Column<TData, 'multiOption'>}
+          actions={actions}
+        />
+      )
+    case 'date':
+      return (
+        <FilterValueDateDisplay
+          filter={filter as FilterModel<'date'>}
+          column={column as Column<TData, 'date'>}
+          actions={actions}
+        />
+      )
+    case 'text':
+      return (
+        <FilterValueTextDisplay
+          filter={filter as FilterModel<'text'>}
+          column={column as Column<TData, 'text'>}
+          actions={actions}
+        />
+      )
+    case 'number':
+      return (
+        <FilterValueNumberDisplay
+          filter={filter as FilterModel<'number'>}
+          column={column as Column<TData, 'number'>}
+          actions={actions}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+export function FilterValueOptionDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'option'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const selected = options.filter((o) => filter?.values.includes(o.value))
+
+  // We display the selected options based on how many are selected
+  //
+  // If there is only one option selected, we display its icon and label
+  //
+  // If there are multiple options selected, we display:
+  // 1) up to 3 icons of the selected options
+  // 2) the number of selected options
+  if (selected.length === 1) {
+    const { label, icon: Icon } = selected[0]
+    const hasIcon = !!Icon
+    return (
+      <span className="inline-flex items-center gap-1">
+        {hasIcon &&
+          (isValidElement(Icon) ? (
+            Icon
+          ) : (
+            <Icon className="size-4 text-primary" />
+          ))}
+        <span>{label}</span>
+      </span>
+    )
+  }
+  const name = column.displayName.toLowerCase()
+  const pluralName = name.endsWith('s') ? `${name}es` : `${name}s`
+
+  const hasOptionIcons = !options?.some((o) => !o.icon)
+
+  return (
+    <div className="inline-flex items-center gap-0.5">
+      {hasOptionIcons &&
+        take(selected, 3).map(({ value, icon }) => {
+          const Icon = icon!
+          return isValidElement(Icon) ? (
+            Icon
+          ) : (
+            <Icon key={value} className="size-4" />
+          )
+        })}
+      <span className={cn(hasOptionIcons && 'ml-1.5')}>
+        {selected.length} {pluralName}
+      </span>
+    </div>
+  )
+}
+
+export function FilterValueMultiOptionDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'multiOption'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const selected = options.filter((o) => filter.values.includes(o.value))
+
+  if (selected.length === 1) {
+    const { label, icon: Icon } = selected[0]
+    const hasIcon = !!Icon
+    return (
+      <span className="inline-flex items-center gap-1.5">
+        {hasIcon &&
+          (isValidElement(Icon) ? (
+            Icon
+          ) : (
+            <Icon className="size-4 text-primary" />
+          ))}
+
+        <span>{label}</span>
+      </span>
+    )
+  }
+
+  const name = column.displayName.toLowerCase()
+
+  const hasOptionIcons = !options?.some((o) => !o.icon)
+
+  return (
+    <div className="inline-flex items-center gap-1.5">
+      {hasOptionIcons && (
+        <div key="icons" className="inline-flex items-center gap-0.5">
+          {take(selected, 3).map(({ value, icon }) => {
+            const Icon = icon!
+            return isValidElement(Icon) ? (
+              cloneElement(Icon, { key: value })
+            ) : (
+              <Icon key={value} className="size-4" />
+            )
+          })}
+        </div>
+      )}
+      <span>
+        {selected.length} {name}
+      </span>
+    </div>
+  )
+}
+
+function formatDateRange(start: Date, end: Date) {
+  const sameMonth = start.getMonth() === end.getMonth()
+  const sameYear = start.getFullYear() === end.getFullYear()
+
+  if (sameMonth && sameYear) {
+    return `${format(start, 'MMM d')} - ${format(end, 'd, yyyy')}`
+  }
+
+  if (sameYear) {
+    return `${format(start, 'MMM d')} - ${format(end, 'MMM d, yyyy')}`
+  }
+
+  return `${format(start, 'MMM d, yyyy')} - ${format(end, 'MMM d, yyyy')}`
+}
+
+export function FilterValueDateDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'date'>) {
+  if (!filter) return null
+  if (filter.values.length === 0) return <Ellipsis className="size-4" />
+  if (filter.values.length === 1) {
+    const value = filter.values[0]
+
+    const formattedDateStr = format(value, 'MMM d, yyyy')
+
+    return <span>{formattedDateStr}</span>
+  }
+
+  const formattedRangeStr = formatDateRange(filter.values[0], filter.values[1])
+
+  return <span>{formattedRangeStr}</span>
+}
+
+export function FilterValueTextDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'text'>) {
+  if (!filter) return null
+  if (filter.values.length === 0 || filter.values[0].trim() === '')
+    return <Ellipsis className="size-4" />
+
+  const value = filter.values[0]
+
+  return <span>{value}</span>
+}
+
+export function FilterValueNumberDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'number'>) {
+  const maxFromMeta = column.max
+  const cappedMax = maxFromMeta ?? 2147483647
+
+  if (!filter) return null
+
+  if (
+    filter.operator === 'is between' ||
+    filter.operator === 'is not between'
+  ) {
+    const minValue = filter.values[0]
+    const maxValue =
+      filter.values[1] === Number.POSITIVE_INFINITY ||
+      filter.values[1] >= cappedMax
+        ? `${cappedMax}+`
+        : filter.values[1]
+
+    return (
+      <span className="tabular-nums tracking-tight">
+        {minValue} and {maxValue}
+      </span>
+    )
+  }
+
+  if (!filter.values || filter.values.length === 0) {
+    return null
+  }
+
+  const value = filter.values[0]
+  return <span className="tabular-nums tracking-tight">{value}</span>
+}
+
+/****** Property Filter Value Controller ******/
+
+interface FilterValueControllerProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+  strategy: FilterStrategy
+}
+
+export const FilterValueController = memo(
+  __FilterValueController,
+) as typeof __FilterValueController
+
+function __FilterValueController<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+  strategy,
+}: FilterValueControllerProps<TData, TType>) {
+  switch (column.type) {
+    case 'option':
+      return (
+        <FilterValueOptionController
+          filter={filter as FilterModel<'option'>}
+          column={column as Column<TData, 'option'>}
+          actions={actions}
+          strategy={strategy}
+        />
+      )
+    case 'multiOption':
+      return (
+        <FilterValueMultiOptionController
+          filter={filter as FilterModel<'multiOption'>}
+          column={column as Column<TData, 'multiOption'>}
+          actions={actions}
+          strategy={strategy}
+        />
+      )
+    case 'date':
+      return (
+        <FilterValueDateController
+          filter={filter as FilterModel<'date'>}
+          column={column as Column<TData, 'date'>}
+          actions={actions}
+          strategy={strategy}
+        />
+      )
+    case 'text':
+      return (
+        <FilterValueTextController
+          filter={filter as FilterModel<'text'>}
+          column={column as Column<TData, 'text'>}
+          actions={actions}
+          strategy={strategy}
+        />
+      )
+    case 'number':
+      return (
+        <FilterValueNumberController
+          filter={filter as FilterModel<'number'>}
+          column={column as Column<TData, 'number'>}
+          actions={actions}
+          strategy={strategy}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+export function FilterValueOptionController<TData>({
+  filter,
+  column,
+  actions,
+  strategy,
+}: FilterValueControllerProps<TData, 'option'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])
+
+  function handleOptionSelect(value: string, check: boolean) {
+    if (check) actions.addFilterValue(column, [value])
+    else actions.removeFilterValue(column, [value])
+  }
+
+  return (
+    <Command loop>
+      <CommandInput autoFocus placeholder="Search..." />
+      <CommandEmpty>No results.</CommandEmpty>
+      <CommandList className="max-h-fit">
+        <CommandGroup>
+          {options.map((v) => {
+            const checked = Boolean(filter?.values.includes(v.value))
+            const count = optionsCount?.get(v.value) ?? 0
+
+            return (
+              <CommandItem
+                key={v.value}
+                onSelect={() => {
+                  handleOptionSelect(v.value, !checked)
+                }}
+                className="group flex items-center justify-between gap-1.5"
+              >
+                <div className="flex items-center gap-1.5">
+                  <Checkbox
+                    checked={checked}
+                    className="opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100"
+                  />
+                  {v.icon &&
+                    (isValidElement(v.icon) ? (
+                      v.icon
+                    ) : (
+                      <v.icon className="size-4 text-primary" />
+                    ))}
+                  <span>
+                    {v.label}
+                    <sup
+                      className={cn(
+                        !optionsCount && 'hidden',
+                        'ml-0.5 tabular-nums tracking-tight text-muted-foreground',
+                        count === 0 && 'slashed-zero',
+                      )}
+                    >
+                      {count < 100 ? count : '100+'}
+                    </sup>
+                  </span>
+                </div>
+              </CommandItem>
+            )
+          })}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueMultiOptionController<TData>({
+  filter,
+  column,
+  actions,
+  strategy,
+}: FilterValueControllerProps<TData, 'multiOption'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])
+
+  // Handles the selection/deselection of an option
+  function handleOptionSelect(value: string, check: boolean) {
+    if (check) actions.addFilterValue(column, [value])
+    else actions.removeFilterValue(column, [value])
+  }
+
+  return (
+    <Command loop>
+      <CommandInput autoFocus placeholder="Search..." />
+      <CommandEmpty>No results.</CommandEmpty>
+      <CommandList>
+        <CommandGroup>
+          {options.map((v) => {
+            const checked = Boolean(filter?.values?.includes(v.value))
+            const count = optionsCount?.get(v.value) ?? 0
+
+            return (
+              <CommandItem
+                key={v.value}
+                onSelect={() => {
+                  handleOptionSelect(v.value, !checked)
+                }}
+                className="group flex items-center justify-between gap-1.5"
+              >
+                <div className="flex items-center gap-1.5">
+                  <Checkbox
+                    checked={checked}
+                    className="opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100"
+                  />
+                  {v.icon &&
+                    (isValidElement(v.icon) ? (
+                      v.icon
+                    ) : (
+                      <v.icon className="size-4 text-primary" />
+                    ))}
+                  <span>
+                    {v.label}
+                    <sup
+                      className={cn(
+                        !optionsCount && 'hidden',
+                        'ml-0.5 tabular-nums tracking-tight text-muted-foreground',
+                        count === 0 && 'slashed-zero',
+                      )}
+                    >
+                      {count < 100 ? count : '100+'}
+                    </sup>
+                  </span>
+                </div>
+              </CommandItem>
+            )
+          })}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueDateController<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, 'date'>) {
+  const [date, setDate] = useState<DateRange | undefined>({
+    from: filter?.values[0] ?? new Date(),
+    to: filter?.values[1] ?? undefined,
+  })
+
+  function changeDateRange(value: DateRange | undefined) {
+    const start = value?.from
+    const end =
+      start && value && value.to && !isEqual(start, value.to)
+        ? value.to
+        : undefined
+
+    setDate({ from: start, to: end })
+
+    const isRange = start && end
+    const newValues = isRange ? [start, end] : start ? [start] : []
+
+    actions.setFilterValue(column, newValues)
+  }
+
+  return (
+    <Command>
+      <CommandList className="max-h-fit">
+        <CommandGroup>
+          <div>
+            <Calendar
+              initialFocus
+              mode="range"
+              defaultMonth={date?.from}
+              selected={date}
+              onSelect={changeDateRange}
+              numberOfMonths={1}
+            />
+          </div>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueTextController<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, 'text'>) {
+  const changeText = (value: string | number) => {
+    actions.setFilterValue(column, [String(value)])
+  }
+
+  return (
+    <Command>
+      <CommandList className="max-h-fit">
+        <CommandGroup>
+          <CommandItem>
+            <DebouncedInput
+              placeholder="Search..."
+              autoFocus
+              value={filter?.values[0] ?? ''}
+              onChange={changeText}
+            />
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueNumberController<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, 'number'>) {
+  const [datasetMin, datasetMax] = useMemo(
+    () => column.getFacetedMinMaxValues(),
+    [column],
+  )
+  const [sliderMin, sliderMax] = [
+    column.min ?? datasetMin,
+    column.max ?? datasetMax,
+  ]
+
+  // Local state for values
+  const [values, setValues] = useState(filter?.values ?? [0, 0])
+
+  // Sync with parent filter changes
+  useEffect(() => {
+    if (
+      filter?.values &&
+      filter.values.length === values.length &&
+      filter.values.every((v, i) => v === values[i])
+    ) {
+      setValues(filter.values)
+    }
+  }, [filter?.values, values])
+
+  const isNumberRange =
+    filter && numberFilterDetails[filter.operator].target === 'multiple'
+
+  const changeNumber = (value: number[]) => {
+    setValues(value)
+    actions.setFilterValue(column, value)
+  }
+
+  const changeMinNumber = (value: number) => {
+    const newValues = [value, values[1]]
+    setValues(newValues)
+    actions.setFilterValue(column, newValues)
+  }
+
+  const changeMaxNumber = (value: number) => {
+    const newValues = [values[0], value]
+    setValues(newValues)
+    actions.setFilterValue(column, newValues)
+  }
+
+  const changeType = useCallback(
+    (type: 'single' | 'range') => {
+      const newValues =
+        type === 'single'
+          ? [values[0]] // Keep the first value for single mode
+          : [values[0], values[1] ?? datasetMax] // Use two values for range mode
+      const newOperator = type === 'single' ? 'is' : 'is between'
+
+      // Update local state
+      setValues(newValues)
+
+      // Update global filter state atomically
+      actions.setFilterOperator(column.id, newOperator)
+      actions.setFilterValue(column, newValues)
+    },
+    [values, datasetMax, column, actions],
+  )
+
+  return (
+    <Command>
+      <CommandList className="w-[300px] px-2 py-2">
+        <CommandGroup>
+          <div className="flex flex-col w-full">
+            <Tabs
+              value={isNumberRange ? 'range' : 'single'}
+              onValueChange={(v) => changeType(v as 'single' | 'range')}
+            >
+              <TabsList className="w-full *:text-xs">
+                <TabsTrigger value="single">Single</TabsTrigger>
+                <TabsTrigger value="range">Range</TabsTrigger>
+              </TabsList>
+              <TabsContent value="single" className="flex flex-col gap-4 mt-4">
+                <Slider
+                  value={[values[0]]}
+                  onValueChange={(value) => changeNumber(value)}
+                  min={sliderMin}
+                  max={sliderMax}
+                  step={1}
+                  aria-orientation="horizontal"
+                />
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-medium">Value</span>
+                  <Input
+                    id="single"
+                    type="number"
+                    value={values[0].toString()} // Use values[0] directly
+                    onChange={(e) => changeNumber([Number(e.target.value)])}
+                    min={datasetMin}
+                    max={datasetMax}
+                  />
+                </div>
+              </TabsContent>
+              <TabsContent value="range" className="flex flex-col gap-4 mt-4">
+                <Slider
+                  value={values} // Use values directly
+                  onValueChange={changeNumber}
+                  min={sliderMin}
+                  max={sliderMax}
+                  step={1}
+                  aria-orientation="horizontal"
+                />
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium">Min</span>
+                    <DebouncedInput
+                      type="number"
+                      value={values[0]}
+                      onChange={(v) => changeMinNumber(Number(v))}
+                      min={datasetMin}
+                      max={datasetMax}
+                    />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium">Max</span>
+                    <DebouncedInput
+                      type="number"
+                      value={values[1]}
+                      onChange={(v) => changeMaxNumber(Number(v))}
+                      min={datasetMin}
+                      max={datasetMax}
+                    />
+                  </div>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/apps/web/registry/data-table-filter-v2/lib/filters.ts b/apps/web/registry/data-table-filter-v2/core/filters.ts
similarity index 51%
rename from apps/web/registry/data-table-filter-v2/lib/filters.ts
rename to apps/web/registry/data-table-filter-v2/core/filters.ts
index 3815ad74..07e1d973 100644
--- a/apps/web/registry/data-table-filter-v2/lib/filters.ts
+++ b/apps/web/registry/data-table-filter-v2/core/filters.ts
@@ -1,25 +1,18 @@
-import type { LucideIcon } from 'lucide-react'
-import { isAnyOf, uniq } from './array'
+import { isAnyOf, uniq } from '../lib/array'
+import { isColumnOptionArray } from '../lib/helpers'
+import { memo } from '../lib/memo'
 import type {
   Column,
   ColumnConfig,
-  ColumnConfigHelper,
-  ColumnDataNativeMap,
   ColumnDataType,
   ColumnOption,
   ElementType,
-  FilterDetails,
-  FilterOperatorTarget,
-  FilterOperators,
   FilterStrategy,
-  FilterTypeOperatorDetails,
-  FilterValues,
   Nullable,
   TAccessorFn,
   TOrderFn,
   TTransformOptionFn,
-} from './filters.types'
-import { memo } from './memo'
+} from './types'
 
 class ColumnConfigBuilder<
   TData,
@@ -211,8 +204,6 @@ export function getColumnOptions<TData, TType extends ColumnDataType, TVal>(
     .flatMap(column.accessor)
     .filter((v): v is NonNullable<TVal> => v !== undefined && v !== null)
 
-  // console.log(`[getColumnOptions] [${column.id}] filtered:`, filtered)
-
   let models = uniq(filtered)
 
   if (column.orderFn) {
@@ -224,8 +215,6 @@ export function getColumnOptions<TData, TType extends ColumnDataType, TVal>(
     )
   }
 
-  // console.log(`[getColumnOptions] [${column.id}] models:`, models)
-
   if (column.transformOptionFn) {
     // Memoize transformOptionFn calls
     const memoizedTransform = memo(
@@ -453,466 +442,3 @@ export function createColumns<TData>(
     return column
   })
 }
-
-export function getColumn<TData>(columns: Column<TData>[], id: string) {
-  const column = columns.find((c) => c.id === id)
-
-  if (!column) {
-    throw new Error(`Column with id ${id} not found`)
-  }
-
-  return column
-}
-
-export const DEFAULT_OPERATORS: Record<
-  ColumnDataType,
-  Record<FilterOperatorTarget, FilterOperators[ColumnDataType]>
-> = {
-  text: {
-    single: 'contains',
-    multiple: 'contains',
-  },
-  number: {
-    single: 'is',
-    multiple: 'is between',
-  },
-  date: {
-    single: 'is',
-    multiple: 'is between',
-  },
-  option: {
-    single: 'is',
-    multiple: 'is any of',
-  },
-  multiOption: {
-    single: 'include',
-    multiple: 'include any of',
-  },
-}
-
-/* Details for all the filter operators for option data type */
-export const optionFilterDetails = {
-  is: {
-    label: 'is',
-    value: 'is',
-    target: 'single',
-    singularOf: 'is any of',
-    relativeOf: 'is not',
-    isNegated: false,
-    negation: 'is not',
-  },
-  'is not': {
-    label: 'is not',
-    value: 'is not',
-    target: 'single',
-    singularOf: 'is none of',
-    relativeOf: 'is',
-    isNegated: true,
-    negationOf: 'is',
-  },
-  'is any of': {
-    label: 'is any of',
-    value: 'is any of',
-    target: 'multiple',
-    pluralOf: 'is',
-    relativeOf: 'is none of',
-    isNegated: false,
-    negation: 'is none of',
-  },
-  'is none of': {
-    label: 'is none of',
-    value: 'is none of',
-    target: 'multiple',
-    pluralOf: 'is not',
-    relativeOf: 'is any of',
-    isNegated: true,
-    negationOf: 'is any of',
-  },
-} as const satisfies FilterDetails<'option'>
-
-/* Details for all the filter operators for multi-option data type */
-export const multiOptionFilterDetails = {
-  include: {
-    label: 'include',
-    value: 'include',
-    target: 'single',
-    singularOf: 'include any of',
-    relativeOf: 'exclude',
-    isNegated: false,
-    negation: 'exclude',
-  },
-  exclude: {
-    label: 'exclude',
-    value: 'exclude',
-    target: 'single',
-    singularOf: 'exclude if any of',
-    relativeOf: 'include',
-    isNegated: true,
-    negationOf: 'include',
-  },
-  'include any of': {
-    label: 'include any of',
-    value: 'include any of',
-    target: 'multiple',
-    pluralOf: 'include',
-    relativeOf: ['exclude if all', 'include all of', 'exclude if any of'],
-    isNegated: false,
-    negation: 'exclude if all',
-  },
-  'exclude if all': {
-    label: 'exclude if all',
-    value: 'exclude if all',
-    target: 'multiple',
-    pluralOf: 'exclude',
-    relativeOf: ['include any of', 'include all of', 'exclude if any of'],
-    isNegated: true,
-    negationOf: 'include any of',
-  },
-  'include all of': {
-    label: 'include all of',
-    value: 'include all of',
-    target: 'multiple',
-    pluralOf: 'include',
-    relativeOf: ['include any of', 'exclude if all', 'exclude if any of'],
-    isNegated: false,
-    negation: 'exclude if any of',
-  },
-  'exclude if any of': {
-    label: 'exclude if any of',
-    value: 'exclude if any of',
-    target: 'multiple',
-    pluralOf: 'exclude',
-    relativeOf: ['include any of', 'exclude if all', 'include all of'],
-    isNegated: true,
-    negationOf: 'include all of',
-  },
-} as const satisfies FilterDetails<'multiOption'>
-
-/* Details for all the filter operators for date data type */
-export const dateFilterDetails = {
-  is: {
-    label: 'is',
-    value: 'is',
-    target: 'single',
-    singularOf: 'is between',
-    relativeOf: 'is after',
-    isNegated: false,
-    negation: 'is before',
-  },
-  'is not': {
-    label: 'is not',
-    value: 'is not',
-    target: 'single',
-    singularOf: 'is not between',
-    relativeOf: [
-      'is',
-      'is before',
-      'is on or after',
-      'is after',
-      'is on or before',
-    ],
-    isNegated: true,
-    negationOf: 'is',
-  },
-  'is before': {
-    label: 'is before',
-    value: 'is before',
-    target: 'single',
-    singularOf: 'is between',
-    relativeOf: [
-      'is',
-      'is not',
-      'is on or after',
-      'is after',
-      'is on or before',
-    ],
-    isNegated: false,
-    negation: 'is on or after',
-  },
-  'is on or after': {
-    label: 'is on or after',
-    value: 'is on or after',
-    target: 'single',
-    singularOf: 'is between',
-    relativeOf: ['is', 'is not', 'is before', 'is after', 'is on or before'],
-    isNegated: false,
-    negation: 'is before',
-  },
-  'is after': {
-    label: 'is after',
-    value: 'is after',
-    target: 'single',
-    singularOf: 'is between',
-    relativeOf: [
-      'is',
-      'is not',
-      'is before',
-      'is on or after',
-      'is on or before',
-    ],
-    isNegated: false,
-    negation: 'is on or before',
-  },
-  'is on or before': {
-    label: 'is on or before',
-    value: 'is on or before',
-    target: 'single',
-    singularOf: 'is between',
-    relativeOf: ['is', 'is not', 'is after', 'is on or after', 'is before'],
-    isNegated: false,
-    negation: 'is after',
-  },
-  'is between': {
-    label: 'is between',
-    value: 'is between',
-    target: 'multiple',
-    pluralOf: 'is',
-    relativeOf: 'is not between',
-    isNegated: false,
-    negation: 'is not between',
-  },
-  'is not between': {
-    label: 'is not between',
-    value: 'is not between',
-    target: 'multiple',
-    pluralOf: 'is not',
-    relativeOf: 'is between',
-    isNegated: true,
-    negationOf: 'is between',
-  },
-} as const satisfies FilterDetails<'date'>
-
-/* Details for all the filter operators for text data type */
-export const textFilterDetails = {
-  contains: {
-    label: 'contains',
-    value: 'contains',
-    target: 'single',
-    relativeOf: 'does not contain',
-    isNegated: false,
-    negation: 'does not contain',
-  },
-  'does not contain': {
-    label: 'does not contain',
-    value: 'does not contain',
-    target: 'single',
-    relativeOf: 'contains',
-    isNegated: true,
-    negationOf: 'contains',
-  },
-} as const satisfies FilterDetails<'text'>
-
-/* Details for all the filter operators for number data type */
-export const numberFilterDetails = {
-  is: {
-    label: 'is',
-    value: 'is',
-    target: 'single',
-    singularOf: 'is between',
-    relativeOf: [
-      'is not',
-      'is greater than',
-      'is less than or equal to',
-      'is less than',
-      'is greater than or equal to',
-    ],
-    isNegated: false,
-    negation: 'is not',
-  },
-  'is not': {
-    label: 'is not',
-    value: 'is not',
-    target: 'single',
-    singularOf: 'is not between',
-    relativeOf: [
-      'is',
-      'is greater than',
-      'is less than or equal to',
-      'is less than',
-      'is greater than or equal to',
-    ],
-    isNegated: true,
-    negationOf: 'is',
-  },
-  'is greater than': {
-    label: '>',
-    value: 'is greater than',
-    target: 'single',
-    singularOf: 'is between',
-    relativeOf: [
-      'is',
-      'is not',
-      'is less than or equal to',
-      'is less than',
-      'is greater than or equal to',
-    ],
-    isNegated: false,
-    negation: 'is less than or equal to',
-  },
-  'is greater than or equal to': {
-    label: '>=',
-    value: 'is greater than or equal to',
-    target: 'single',
-    singularOf: 'is between',
-    relativeOf: [
-      'is',
-      'is not',
-      'is greater than',
-      'is less than or equal to',
-      'is less than',
-    ],
-    isNegated: false,
-    negation: 'is less than or equal to',
-  },
-  'is less than': {
-    label: '<',
-    value: 'is less than',
-    target: 'single',
-    singularOf: 'is between',
-    relativeOf: [
-      'is',
-      'is not',
-      'is greater than',
-      'is less than or equal to',
-      'is greater than or equal to',
-    ],
-    isNegated: false,
-    negation: 'is greater than',
-  },
-  'is less than or equal to': {
-    label: '<=',
-    value: 'is less than or equal to',
-    target: 'single',
-    singularOf: 'is between',
-    relativeOf: [
-      'is',
-      'is not',
-      'is greater than',
-      'is less than',
-      'is greater than or equal to',
-    ],
-    isNegated: false,
-    negation: 'is greater than or equal to',
-  },
-  'is between': {
-    label: 'is between',
-    value: 'is between',
-    target: 'multiple',
-    pluralOf: 'is',
-    relativeOf: 'is not between',
-    isNegated: false,
-    negation: 'is not between',
-  },
-  'is not between': {
-    label: 'is not between',
-    value: 'is not between',
-    target: 'multiple',
-    pluralOf: 'is not',
-    relativeOf: 'is between',
-    isNegated: true,
-    negationOf: 'is between',
-  },
-} as const satisfies FilterDetails<'number'>
-
-export const filterTypeOperatorDetails: FilterTypeOperatorDetails = {
-  text: textFilterDetails,
-  number: numberFilterDetails,
-  date: dateFilterDetails,
-  option: optionFilterDetails,
-  multiOption: multiOptionFilterDetails,
-}
-
-/*
- *
- * Determines the new operator for a filter based on the current operator, old and new filter values.
- *
- * This handles cases where the filter values have transitioned from a single value to multiple values (or vice versa),
- * and the current operator needs to be transitioned to its plural form (or singular form).
- *
- * For example, if the current operator is 'is', and the new filter values have a length of 2, the
- * new operator would be 'is any of'.
- *
- */
-export function determineNewOperator<TType extends ColumnDataType>(
-  type: TType,
-  oldVals: FilterValues<TType>,
-  nextVals: FilterValues<TType>,
-  currentOperator: FilterOperators[TType],
-): FilterOperators[TType] {
-  const a =
-    Array.isArray(oldVals) && Array.isArray(oldVals[0])
-      ? oldVals[0].length
-      : oldVals.length
-  const b =
-    Array.isArray(nextVals) && Array.isArray(nextVals[0])
-      ? nextVals[0].length
-      : nextVals.length
-
-  // console.log('[determineNewOperator] a:', a, 'b:', b)
-
-  // If filter size has not transitioned from single to multiple (or vice versa)
-  // or is unchanged, return the current operator.
-  if (a === b || (a >= 2 && b >= 2) || (a <= 1 && b <= 1))
-    return currentOperator
-
-  const opDetails = filterTypeOperatorDetails[type][currentOperator]
-
-  // Handle transition from single to multiple filter values.
-  if (a < b && b >= 2) return opDetails.singularOf ?? currentOperator
-  // Handle transition from multiple to single filter values.
-  if (a > b && b <= 1) return opDetails.pluralOf ?? currentOperator
-  return currentOperator
-}
-
-export function createNumberFilterValue(
-  values: number[] | undefined,
-): number[] {
-  if (!values || values.length === 0) return []
-  if (values.length === 1) return [values[0]]
-  if (values.length === 2) return createNumberRange(values)
-  return [values[0], values[1]]
-}
-
-export function createNumberRange(values: number[] | undefined) {
-  let a = 0
-  let b = 0
-
-  if (!values || values.length === 0) return [a, b]
-  if (values.length === 1) {
-    a = values[0]
-  } else {
-    a = values[0]
-    b = values[1]
-  }
-
-  const [min, max] = a < b ? [a, b] : [b, a]
-
-  return [min, max]
-}
-
-export function isColumnOption(value: unknown): value is ColumnOption {
-  return (
-    typeof value === 'object' &&
-    value !== null &&
-    'value' in value &&
-    'label' in value
-  )
-}
-
-export function isColumnOptionArray(value: unknown): value is ColumnOption[] {
-  return Array.isArray(value) && value.every(isColumnOption)
-}
-
-export function isStringArray(value: unknown): value is string[] {
-  return Array.isArray(value) && value.every((v) => typeof v === 'string')
-}
-
-export function isColumnOptionMap(
-  value: unknown,
-): value is Map<string, number> {
-  return (
-    value instanceof Map &&
-    value.keys().every((k) => typeof k === 'string') &&
-    value.values().every((v) => typeof v === 'number')
-  )
-}
diff --git a/apps/web/registry/data-table-filter-v2/core/operators.ts b/apps/web/registry/data-table-filter-v2/core/operators.ts
new file mode 100644
index 00000000..a64473df
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/core/operators.ts
@@ -0,0 +1,406 @@
+import type {
+  ColumnDataType,
+  FilterDetails,
+  FilterOperatorTarget,
+  FilterOperators,
+  FilterTypeOperatorDetails,
+  FilterValues,
+} from './types'
+
+export const DEFAULT_OPERATORS: Record<
+  ColumnDataType,
+  Record<FilterOperatorTarget, FilterOperators[ColumnDataType]>
+> = {
+  text: {
+    single: 'contains',
+    multiple: 'contains',
+  },
+  number: {
+    single: 'is',
+    multiple: 'is between',
+  },
+  date: {
+    single: 'is',
+    multiple: 'is between',
+  },
+  option: {
+    single: 'is',
+    multiple: 'is any of',
+  },
+  multiOption: {
+    single: 'include',
+    multiple: 'include any of',
+  },
+}
+
+/* Details for all the filter operators for option data type */
+export const optionFilterDetails = {
+  is: {
+    label: 'is',
+    value: 'is',
+    target: 'single',
+    singularOf: 'is any of',
+    relativeOf: 'is not',
+    isNegated: false,
+    negation: 'is not',
+  },
+  'is not': {
+    label: 'is not',
+    value: 'is not',
+    target: 'single',
+    singularOf: 'is none of',
+    relativeOf: 'is',
+    isNegated: true,
+    negationOf: 'is',
+  },
+  'is any of': {
+    label: 'is any of',
+    value: 'is any of',
+    target: 'multiple',
+    pluralOf: 'is',
+    relativeOf: 'is none of',
+    isNegated: false,
+    negation: 'is none of',
+  },
+  'is none of': {
+    label: 'is none of',
+    value: 'is none of',
+    target: 'multiple',
+    pluralOf: 'is not',
+    relativeOf: 'is any of',
+    isNegated: true,
+    negationOf: 'is any of',
+  },
+} as const satisfies FilterDetails<'option'>
+
+/* Details for all the filter operators for multi-option data type */
+export const multiOptionFilterDetails = {
+  include: {
+    label: 'include',
+    value: 'include',
+    target: 'single',
+    singularOf: 'include any of',
+    relativeOf: 'exclude',
+    isNegated: false,
+    negation: 'exclude',
+  },
+  exclude: {
+    label: 'exclude',
+    value: 'exclude',
+    target: 'single',
+    singularOf: 'exclude if any of',
+    relativeOf: 'include',
+    isNegated: true,
+    negationOf: 'include',
+  },
+  'include any of': {
+    label: 'include any of',
+    value: 'include any of',
+    target: 'multiple',
+    pluralOf: 'include',
+    relativeOf: ['exclude if all', 'include all of', 'exclude if any of'],
+    isNegated: false,
+    negation: 'exclude if all',
+  },
+  'exclude if all': {
+    label: 'exclude if all',
+    value: 'exclude if all',
+    target: 'multiple',
+    pluralOf: 'exclude',
+    relativeOf: ['include any of', 'include all of', 'exclude if any of'],
+    isNegated: true,
+    negationOf: 'include any of',
+  },
+  'include all of': {
+    label: 'include all of',
+    value: 'include all of',
+    target: 'multiple',
+    pluralOf: 'include',
+    relativeOf: ['include any of', 'exclude if all', 'exclude if any of'],
+    isNegated: false,
+    negation: 'exclude if any of',
+  },
+  'exclude if any of': {
+    label: 'exclude if any of',
+    value: 'exclude if any of',
+    target: 'multiple',
+    pluralOf: 'exclude',
+    relativeOf: ['include any of', 'exclude if all', 'include all of'],
+    isNegated: true,
+    negationOf: 'include all of',
+  },
+} as const satisfies FilterDetails<'multiOption'>
+
+/* Details for all the filter operators for date data type */
+export const dateFilterDetails = {
+  is: {
+    label: 'is',
+    value: 'is',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: 'is after',
+    isNegated: false,
+    negation: 'is before',
+  },
+  'is not': {
+    label: 'is not',
+    value: 'is not',
+    target: 'single',
+    singularOf: 'is not between',
+    relativeOf: [
+      'is',
+      'is before',
+      'is on or after',
+      'is after',
+      'is on or before',
+    ],
+    isNegated: true,
+    negationOf: 'is',
+  },
+  'is before': {
+    label: 'is before',
+    value: 'is before',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is on or after',
+      'is after',
+      'is on or before',
+    ],
+    isNegated: false,
+    negation: 'is on or after',
+  },
+  'is on or after': {
+    label: 'is on or after',
+    value: 'is on or after',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: ['is', 'is not', 'is before', 'is after', 'is on or before'],
+    isNegated: false,
+    negation: 'is before',
+  },
+  'is after': {
+    label: 'is after',
+    value: 'is after',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is before',
+      'is on or after',
+      'is on or before',
+    ],
+    isNegated: false,
+    negation: 'is on or before',
+  },
+  'is on or before': {
+    label: 'is on or before',
+    value: 'is on or before',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: ['is', 'is not', 'is after', 'is on or after', 'is before'],
+    isNegated: false,
+    negation: 'is after',
+  },
+  'is between': {
+    label: 'is between',
+    value: 'is between',
+    target: 'multiple',
+    pluralOf: 'is',
+    relativeOf: 'is not between',
+    isNegated: false,
+    negation: 'is not between',
+  },
+  'is not between': {
+    label: 'is not between',
+    value: 'is not between',
+    target: 'multiple',
+    pluralOf: 'is not',
+    relativeOf: 'is between',
+    isNegated: true,
+    negationOf: 'is between',
+  },
+} as const satisfies FilterDetails<'date'>
+
+/* Details for all the filter operators for text data type */
+export const textFilterDetails = {
+  contains: {
+    label: 'contains',
+    value: 'contains',
+    target: 'single',
+    relativeOf: 'does not contain',
+    isNegated: false,
+    negation: 'does not contain',
+  },
+  'does not contain': {
+    label: 'does not contain',
+    value: 'does not contain',
+    target: 'single',
+    relativeOf: 'contains',
+    isNegated: true,
+    negationOf: 'contains',
+  },
+} as const satisfies FilterDetails<'text'>
+
+/* Details for all the filter operators for number data type */
+export const numberFilterDetails = {
+  is: {
+    label: 'is',
+    value: 'is',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is not',
+      'is greater than',
+      'is less than or equal to',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is not',
+  },
+  'is not': {
+    label: 'is not',
+    value: 'is not',
+    target: 'single',
+    singularOf: 'is not between',
+    relativeOf: [
+      'is',
+      'is greater than',
+      'is less than or equal to',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: true,
+    negationOf: 'is',
+  },
+  'is greater than': {
+    label: '>',
+    value: 'is greater than',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is less than or equal to',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is less than or equal to',
+  },
+  'is greater than or equal to': {
+    label: '>=',
+    value: 'is greater than or equal to',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is greater than',
+      'is less than or equal to',
+      'is less than',
+    ],
+    isNegated: false,
+    negation: 'is less than or equal to',
+  },
+  'is less than': {
+    label: '<',
+    value: 'is less than',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is greater than',
+      'is less than or equal to',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is greater than',
+  },
+  'is less than or equal to': {
+    label: '<=',
+    value: 'is less than or equal to',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is greater than',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is greater than or equal to',
+  },
+  'is between': {
+    label: 'is between',
+    value: 'is between',
+    target: 'multiple',
+    pluralOf: 'is',
+    relativeOf: 'is not between',
+    isNegated: false,
+    negation: 'is not between',
+  },
+  'is not between': {
+    label: 'is not between',
+    value: 'is not between',
+    target: 'multiple',
+    pluralOf: 'is not',
+    relativeOf: 'is between',
+    isNegated: true,
+    negationOf: 'is between',
+  },
+} as const satisfies FilterDetails<'number'>
+
+export const filterTypeOperatorDetails: FilterTypeOperatorDetails = {
+  text: textFilterDetails,
+  number: numberFilterDetails,
+  date: dateFilterDetails,
+  option: optionFilterDetails,
+  multiOption: multiOptionFilterDetails,
+}
+
+/*
+ *
+ * Determines the new operator for a filter based on the current operator, old and new filter values.
+ *
+ * This handles cases where the filter values have transitioned from a single value to multiple values (or vice versa),
+ * and the current operator needs to be transitioned to its plural form (or singular form).
+ *
+ * For example, if the current operator is 'is', and the new filter values have a length of 2, the
+ * new operator would be 'is any of'.
+ *
+ */
+export function determineNewOperator<TType extends ColumnDataType>(
+  type: TType,
+  oldVals: FilterValues<TType>,
+  nextVals: FilterValues<TType>,
+  currentOperator: FilterOperators[TType],
+): FilterOperators[TType] {
+  const a =
+    Array.isArray(oldVals) && Array.isArray(oldVals[0])
+      ? oldVals[0].length
+      : oldVals.length
+  const b =
+    Array.isArray(nextVals) && Array.isArray(nextVals[0])
+      ? nextVals[0].length
+      : nextVals.length
+
+  // If filter size has not transitioned from single to multiple (or vice versa)
+  // or is unchanged, return the current operator.
+  if (a === b || (a >= 2 && b >= 2) || (a <= 1 && b <= 1))
+    return currentOperator
+
+  const opDetails = filterTypeOperatorDetails[type][currentOperator]
+
+  // Handle transition from single to multiple filter values.
+  if (a < b && b >= 2) return opDetails.singularOf ?? currentOperator
+  // Handle transition from multiple to single filter values.
+  if (a > b && b <= 1) return opDetails.pluralOf ?? currentOperator
+  return currentOperator
+}
diff --git a/apps/web/registry/data-table-filter-v2/lib/filters.types.ts b/apps/web/registry/data-table-filter-v2/core/types.ts
similarity index 100%
rename from apps/web/registry/data-table-filter-v2/lib/filters.types.ts
rename to apps/web/registry/data-table-filter-v2/core/types.ts
diff --git a/apps/web/registry/data-table-filter-v2/hooks/use-data-table-filters.tsx b/apps/web/registry/data-table-filter-v2/hooks/use-data-table-filters.tsx
new file mode 100644
index 00000000..eca7f557
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/hooks/use-data-table-filters.tsx
@@ -0,0 +1,308 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { createColumns } from '../core/filters'
+import { DEFAULT_OPERATORS, determineNewOperator } from '../core/operators'
+import type {
+  ColumnConfig,
+  ColumnDataType,
+  ColumnOption,
+  DataTableFilterActions,
+  FilterModel,
+  FilterStrategy,
+  FiltersState,
+  OptionBasedColumnDataType,
+  OptionColumnIds,
+} from '../core/types'
+import { uniq } from '../lib/array'
+import { addUniq, removeUniq } from '../lib/array'
+import {
+  createNumberFilterValue,
+  isColumnOptionArray,
+  isColumnOptionMap,
+} from '../lib/helpers'
+
+export interface DataTableFiltersOptions<
+  TData,
+  TColumns extends ReadonlyArray<ColumnConfig<TData, any, any, any>>,
+  TStrategy extends FilterStrategy,
+> {
+  strategy: TStrategy
+  data: TData[]
+  columnsConfig: TColumns
+  controlledState?:
+    | [FiltersState, React.Dispatch<React.SetStateAction<FiltersState>>]
+    | undefined
+  options?: Partial<
+    Record<
+      OptionColumnIds<TColumns>,
+      | ColumnOption[]
+      | [ColumnOption[] | undefined, Map<string, number> | undefined]
+    >
+  >
+}
+
+export function useDataTableFilters<
+  TData,
+  TColumns extends ReadonlyArray<ColumnConfig<TData, any, any, any>>,
+  TStrategy extends FilterStrategy,
+>({
+  strategy,
+  data,
+  columnsConfig,
+  controlledState,
+  options,
+}: DataTableFiltersOptions<TData, TColumns, TStrategy>) {
+  const [internalFilters, setInternalFilters] = useState<FiltersState>([])
+  const [filters, setFilters] = controlledState ?? [
+    internalFilters,
+    setInternalFilters,
+  ]
+
+  // Convert ColumnConfig to Column, applying options and faceted options if provided
+  const columns = useMemo(() => {
+    const enhancedConfigs = columnsConfig.map((config) => {
+      if (
+        options &&
+        (config.type === 'option' || config.type === 'multiOption')
+      ) {
+        const optionsInput = options[config.id as OptionColumnIds<TColumns>]
+
+        if (!optionsInput) return config
+
+        if (isColumnOptionArray(optionsInput)) {
+          return { ...config, options: optionsInput }
+        }
+
+        if (
+          isColumnOptionArray(optionsInput[0]) &&
+          isColumnOptionMap(optionsInput[1])
+        ) {
+          return {
+            ...config,
+            options: optionsInput[0],
+            facetedOptions: optionsInput[1],
+          }
+        }
+      }
+
+      return config
+    })
+    return createColumns(data, enhancedConfigs, strategy)
+  }, [data, columnsConfig, options, strategy])
+
+  const actions: DataTableFilterActions = useMemo(
+    () => ({
+      addFilterValue<TData, TType extends OptionBasedColumnDataType>(
+        column: ColumnConfig<TData, TType>,
+        values: FilterModel<TType>['values'],
+      ) {
+        if (column.type === 'option') {
+          setFilters((prev) => {
+            const filter = prev.find((f) => f.columnId === column.id)
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              return [
+                ...prev,
+                {
+                  columnId: column.id,
+                  operator:
+                    values.length > 1
+                      ? DEFAULT_OPERATORS[column.type].multiple
+                      : DEFAULT_OPERATORS[column.type].single,
+                  values,
+                },
+              ]
+            }
+            const oldValues = filter.values
+            const newValues = addUniq(filter.values, values)
+            const newOperator = determineNewOperator(
+              'option',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+          return
+        }
+        if (column.type === 'multiOption') {
+          setFilters((prev) => {
+            const filter = prev.find((f) => f.columnId === column.id)
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              return [
+                ...prev,
+                {
+                  columnId: column.id,
+                  operator:
+                    values.length > 1
+                      ? DEFAULT_OPERATORS[column.type].multiple
+                      : DEFAULT_OPERATORS[column.type].single,
+                  values,
+                },
+              ]
+            }
+            const oldValues = filter.values
+            const newValues = addUniq(filter.values, values)
+            const newOperator = determineNewOperator(
+              'multiOption',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+            if (newValues.length === 0) {
+              return prev.filter((f) => f.columnId !== column.id)
+            }
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+          return
+        }
+        throw new Error(
+          '[data-table-filter] addFilterValue() is only supported for option columns',
+        )
+      },
+      removeFilterValue<TData, TType extends OptionBasedColumnDataType>(
+        column: ColumnConfig<TData, TType>,
+        value: FilterModel<TType>['values'],
+      ) {
+        if (column.type === 'option') {
+          setFilters((prev) => {
+            const filter = prev.find((f) => f.columnId === column.id)
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              return [...prev]
+            }
+            const newValues = removeUniq(filter.values, value)
+            const oldValues = filter.values
+            const newOperator = determineNewOperator(
+              'option',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+            if (newValues.length === 0) {
+              return prev.filter((f) => f.columnId !== column.id)
+            }
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+          return
+        }
+        if (column.type === 'multiOption') {
+          setFilters((prev) => {
+            const filter = prev.find((f) => f.columnId === column.id)
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              return [...prev]
+            }
+            const newValues = removeUniq(filter.values, value)
+            const oldValues = filter.values
+            const newOperator = determineNewOperator(
+              'multiOption',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+            if (newValues.length === 0) {
+              return prev.filter((f) => f.columnId !== column.id)
+            }
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+          return
+        }
+        throw new Error(
+          '[data-table-filter] removeFilterValue() is only supported for option columns',
+        )
+      },
+      setFilterValue<TData, TType extends ColumnDataType>(
+        column: ColumnConfig<TData, TType>,
+        values: FilterModel<TType>['values'],
+      ) {
+        setFilters((prev) => {
+          const filter = prev.find((f) => f.columnId === column.id)
+          const isColumnFiltered = filter && filter.values.length > 0
+          const newValues =
+            column.type === 'number'
+              ? createNumberFilterValue(values as number[])
+              : uniq(values)
+          if (newValues.length === 0) return prev
+          if (!isColumnFiltered) {
+            return [
+              ...prev,
+              {
+                columnId: column.id,
+                operator:
+                  values.length > 1
+                    ? DEFAULT_OPERATORS[column.type].multiple
+                    : DEFAULT_OPERATORS[column.type].single,
+                values: newValues,
+              },
+            ]
+          }
+          const oldValues = filter.values
+          const newOperator = determineNewOperator(
+            column.type,
+            oldValues,
+            newValues,
+            filter.operator,
+          )
+          const newFilter = {
+            columnId: column.id,
+            operator: newOperator,
+            values: newValues as any,
+          } satisfies FilterModel<TType>
+          return prev.map((f) => (f.columnId === column.id ? newFilter : f))
+        })
+      },
+      setFilterOperator<TType extends ColumnDataType>(
+        columnId: string,
+        operator: FilterModel<TType>['operator'],
+      ) {
+        setFilters((prev) =>
+          prev.map((f) => (f.columnId === columnId ? { ...f, operator } : f)),
+        )
+      },
+      removeFilter(columnId: string) {
+        setFilters((prev) => prev.filter((f) => f.columnId !== columnId))
+      },
+      removeAllFilters() {
+        setFilters([])
+      },
+    }),
+    [setFilters],
+  )
+
+  return { columns, filters, actions, strategy } // columns is Column<TData>[]
+}
diff --git a/apps/web/registry/data-table-filter-v2/index.tsx b/apps/web/registry/data-table-filter-v2/index.tsx
new file mode 100644
index 00000000..38f2e6c3
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/index.tsx
@@ -0,0 +1,2 @@
+export { useDataTableFilters } from './hooks/use-data-table-filters'
+export { DataTableFilter } from './components/data-table-filter'
diff --git a/apps/web/registry/data-table-filter-v2/integrations/tanstack-table/filter-fns.ts b/apps/web/registry/data-table-filter-v2/integrations/tanstack-table/filter-fns.ts
new file mode 100644
index 00000000..989cfc94
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/integrations/tanstack-table/filter-fns.ts
@@ -0,0 +1,33 @@
+import type { Row } from '@tanstack/react-table'
+import type { FilterModel } from '../../core/types'
+import * as f from '../../lib/filter-fns'
+
+export function dateFilterFn<TData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: FilterModel<'date'>,
+): boolean {
+  const value = row.getValue<Date>(columnId)
+
+  return f.dateFilterFn(value, filterValue)
+}
+
+export function textFilterFn<TData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: FilterModel<'text'>,
+): boolean {
+  const value = row.getValue<string>(columnId) ?? ''
+
+  return f.textFilterFn(value, filterValue)
+}
+
+export function numberFilterFn<TData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: FilterModel<'number'>,
+): boolean {
+  const value = row.getValue<number>(columnId)
+
+  return f.numberFilterFn(value, filterValue)
+}
diff --git a/apps/web/registry/data-table-filter-v2/lib/filters-tst.ts b/apps/web/registry/data-table-filter-v2/integrations/tanstack-table/index.tsx
similarity index 65%
rename from apps/web/registry/data-table-filter-v2/lib/filters-tst.ts
rename to apps/web/registry/data-table-filter-v2/integrations/tanstack-table/index.tsx
index 43bc1aa7..5c34d7c3 100644
--- a/apps/web/registry/data-table-filter-v2/lib/filters-tst.ts
+++ b/apps/web/registry/data-table-filter-v2/integrations/tanstack-table/index.tsx
@@ -1,13 +1,12 @@
 import type { ColumnDef, ColumnFiltersState } from '@tanstack/react-table'
-import { isAnyOf } from './array'
-import { __multiOptionFilterFn, __optionFilterFn, filterFn } from './filter-fns'
-import { isColumnOption, isColumnOptionArray, isStringArray } from './filters'
-import type {
-  Column,
-  ColumnConfig,
-  FilterModel,
-  FiltersState,
-} from './filters.types'
+import type { Column, FilterModel, FiltersState } from '../../core/types'
+import { multiOptionFilterFn, optionFilterFn } from '../../lib/filter-fns'
+import {
+  isColumnOption,
+  isColumnOptionArray,
+  isStringArray,
+} from '../../lib/helpers'
+import { dateFilterFn, numberFilterFn, textFilterFn } from './filter-fns'
 
 interface CreateTSTColumns<TData> {
   columns: ColumnDef<TData, any>[]
@@ -30,28 +29,40 @@ export function createTSTColumns<TData>({
       continue
     }
 
-    if (isAnyOf(config.type, ['text', 'number', 'date'])) {
-      col.filterFn = filterFn(config.type)
+    if (config.type === 'text') {
+      col.filterFn = textFilterFn
+      _cols.push(col)
+      continue
+    }
+
+    if (config.type === 'number') {
+      col.filterFn = numberFilterFn
+      _cols.push(col)
+      continue
+    }
+
+    if (config.type === 'date') {
+      col.filterFn = dateFilterFn
       _cols.push(col)
       continue
     }
 
     if (config.type === 'option') {
       col.filterFn = (row, columnId, filterValue: FilterModel<'option'>) => {
-        const value = row.getValue(columnId)
+        const value = row.getValue<unknown>(columnId)
 
         if (!value) return false
 
         if (typeof value === 'string') {
-          return __optionFilterFn(value, filterValue)
+          return optionFilterFn(value, filterValue)
         }
 
         if (isColumnOption(value)) {
-          return __optionFilterFn(value.value, filterValue)
+          return optionFilterFn(value.value, filterValue)
         }
 
         const sanitizedValue = config.transformOptionFn!(value as never)
-        return __optionFilterFn(sanitizedValue.value, filterValue)
+        return optionFilterFn(sanitizedValue.value, filterValue)
       }
     }
 
@@ -66,11 +77,11 @@ export function createTSTColumns<TData>({
         if (!value) return false
 
         if (isStringArray(value)) {
-          return __multiOptionFilterFn(value, filterValue)
+          return multiOptionFilterFn(value, filterValue)
         }
 
         if (isColumnOptionArray(value)) {
-          return __multiOptionFilterFn(
+          return multiOptionFilterFn(
             value.map((v) => v.value),
             filterValue,
           )
@@ -80,7 +91,7 @@ export function createTSTColumns<TData>({
           config.transformOptionFn!(v),
         )
 
-        return __multiOptionFilterFn(
+        return multiOptionFilterFn(
           sanitizedValue.map((v) => v.value),
           filterValue,
         )
diff --git a/apps/web/registry/data-table-filter-v2/lib/filter-fns.ts b/apps/web/registry/data-table-filter-v2/lib/filter-fns.ts
index a50925a5..19ed572d 100644
--- a/apps/web/registry/data-table-filter-v2/lib/filter-fns.ts
+++ b/apps/web/registry/data-table-filter-v2/lib/filter-fns.ts
@@ -1,17 +1,3 @@
-/**********************************************************************************************************
- ***** Filter Functions ******
- **********************************************************************************************************
- * These are functions that filter data based on the current filter values, column data type, and operator.
- * There exists a separate filter function for each column data type.
- *
- * Two variants of the filter functions are provided - as an example, we will take the optionFilterFn:
- * 1. optionFilterFn: takes in a row, columnId, and filterValue.
- * 2. __optionFilterFn: takes in an inputData and filterValue.
- *
- * __optionFilterFn is a private function that is used by filterFn to perform the actual filtering.
- * *********************************************************************************************************/
-
-import type { Row } from '@tanstack/react-table'
 import {
   endOfDay,
   isAfter,
@@ -20,58 +6,11 @@ import {
   isWithinInterval,
   startOfDay,
 } from 'date-fns'
+import { dateFilterDetails } from '../core/operators'
+import type { FilterModel } from '../core/types'
 import { intersection } from './array'
-import {
-  dateFilterDetails,
-  isColumnOption,
-  isColumnOptionArray,
-  isStringArray,
-} from './filters'
-import type { ColumnDataType, FilterModel } from './filters.types'
-
-/*
- * Returns a filter function for a given column data type.
- * This function is used to determine the appropriate filter function to use based on the column data type.
- */
-export function filterFn(dataType: ColumnDataType) {
-  switch (dataType) {
-    // case 'option':
-    //   return optionFilterFn
-    // case 'multiOption':
-    //   return multiOptionFilterFn
-    case 'date':
-      return dateFilterFn
-    case 'text':
-      return textFilterFn
-    case 'number':
-      return numberFilterFn
-    default:
-      throw new Error('Invalid column data type')
-  }
-}
-
-// export function optionFilterFn<TData>(
-//   row: Row<TData>,
-//   columnId: string,
-//   filterValue: FilterModel<'option'>,
-// ) {
-//   const value = row.getValue(columnId)
-
-//   if (!value) return false
 
-//   if (typeof value === 'string') {
-//     return __optionFilterFn(value, filterValue)
-//   }
-
-//   if (isColumnOption(value)) {
-//     return __optionFilterFn(value.value, filterValue)
-//   }
-
-//   const sanitizedValue = columnMeta.transformOptionFn!(value as never)
-//   return __optionFilterFn(sanitizedValue.value, filterValue)
-// }
-
-export function __optionFilterFn<TData>(
+export function optionFilterFn<TData>(
   inputData: string,
   filterValue: FilterModel<'option'>,
 ) {
@@ -92,37 +31,7 @@ export function __optionFilterFn<TData>(
   }
 }
 
-// export function multiOptionFilterFn<TData>(
-//   row: Row<TData>,
-//   columnId: string,
-//   filterValue: FilterModel<'multiOption'>,
-// ) {
-//   const value = row.getValue(columnId)
-
-//   if (!value) return false
-
-//   if (isStringArray(value)) {
-//     return __multiOptionFilterFn(value, filterValue)
-//   }
-
-//   if (isColumnOptionArray(value)) {
-//     return __multiOptionFilterFn(
-//       value.map((v) => v.value),
-//       filterValue,
-//     )
-//   }
-
-//   const sanitizedValue = (value as never[]).map((v) =>
-//     columnMeta.transformOptionFn!(v),
-//   )
-
-//   return __multiOptionFilterFn(
-//     sanitizedValue.map((v) => v.value),
-//     filterValue,
-//   )
-// }
-
-export function __multiOptionFilterFn(
+export function multiOptionFilterFn(
   inputData: string[],
   filterValue: FilterModel<'multiOption'>,
 ) {
@@ -156,16 +65,6 @@ export function __multiOptionFilterFn(
 }
 
 export function dateFilterFn<TData>(
-  row: Row<TData>,
-  columnId: string,
-  filterValue: FilterModel<'date'>,
-) {
-  const value = row.getValue<Date>(columnId)
-
-  return __dateFilterFn(value, filterValue)
-}
-
-export function __dateFilterFn<TData>(
   inputData: Date,
   filterValue: FilterModel<'date'>,
 ) {
@@ -216,16 +115,6 @@ export function __dateFilterFn<TData>(
 }
 
 export function textFilterFn<TData>(
-  row: Row<TData>,
-  columnId: string,
-  filterValue: FilterModel<'text'>,
-) {
-  const value = row.getValue<string>(columnId) ?? ''
-
-  return __textFilterFn(value, filterValue)
-}
-
-export function __textFilterFn<TData>(
   inputData: string,
   filterValue: FilterModel<'text'>,
 ) {
@@ -247,16 +136,6 @@ export function __textFilterFn<TData>(
 }
 
 export function numberFilterFn<TData>(
-  row: Row<TData>,
-  columnId: string,
-  filterValue: FilterModel<'number'>,
-) {
-  const value = row.getValue<number>(columnId)
-
-  return __numberFilterFn(value, filterValue)
-}
-
-export function __numberFilterFn<TData>(
   inputData: number,
   filterValue: FilterModel<'number'>,
 ) {
diff --git a/apps/web/registry/data-table-filter-v2/lib/helpers.ts b/apps/web/registry/data-table-filter-v2/lib/helpers.ts
new file mode 100644
index 00000000..bd465bba
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/lib/helpers.ts
@@ -0,0 +1,64 @@
+import type { Column, ColumnOption } from '../core/types'
+
+export function getColumn<TData>(columns: Column<TData>[], id: string) {
+  const column = columns.find((c) => c.id === id)
+
+  if (!column) {
+    throw new Error(`Column with id ${id} not found`)
+  }
+
+  return column
+}
+
+export function createNumberFilterValue(
+  values: number[] | undefined,
+): number[] {
+  if (!values || values.length === 0) return []
+  if (values.length === 1) return [values[0]]
+  if (values.length === 2) return createNumberRange(values)
+  return [values[0], values[1]]
+}
+
+export function createNumberRange(values: number[] | undefined) {
+  let a = 0
+  let b = 0
+
+  if (!values || values.length === 0) return [a, b]
+  if (values.length === 1) {
+    a = values[0]
+  } else {
+    a = values[0]
+    b = values[1]
+  }
+
+  const [min, max] = a < b ? [a, b] : [b, a]
+
+  return [min, max]
+}
+
+export function isColumnOption(value: unknown): value is ColumnOption {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'value' in value &&
+    'label' in value
+  )
+}
+
+export function isColumnOptionArray(value: unknown): value is ColumnOption[] {
+  return Array.isArray(value) && value.every(isColumnOption)
+}
+
+export function isStringArray(value: unknown): value is string[] {
+  return Array.isArray(value) && value.every((v) => typeof v === 'string')
+}
+
+export function isColumnOptionMap(
+  value: unknown,
+): value is Map<string, number> {
+  return (
+    value instanceof Map &&
+    value.keys().every((k) => typeof k === 'string') &&
+    value.values().every((v) => typeof v === 'number')
+  )
+}
diff --git a/apps/web/registry/data-table-filter-v2/ui/debounced-input.tsx b/apps/web/registry/data-table-filter-v2/ui/debounced-input.tsx
new file mode 100644
index 00000000..537a7905
--- /dev/null
+++ b/apps/web/registry/data-table-filter-v2/ui/debounced-input.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { Input } from '@/components/ui/input'
+import { useCallback, useEffect, useState } from 'react'
+
+function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => func(...args), wait)
+  }
+}
+
+export function DebouncedInput({
+  value: initialValue,
+  onChange,
+  debounceMs = 500, // This is the wait time, not the function
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounceMs?: number
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {
+  const [value, setValue] = useState(initialValue)
+
+  // Sync with initialValue when it changes
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  // Define the debounced function with useCallback
+  const debouncedOnChange = useCallback(
+    debounce((newValue: string | number) => {
+      onChange(newValue)
+    }, debounceMs), // Pass the wait time here
+    [debounceMs, onChange], // Dependencies
+  )
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value
+    setValue(newValue) // Update local state immediately
+    debouncedOnChange(newValue) // Call debounced version
+  }
+
+  return <Input {...props} value={value} onChange={handleChange} />
+}
diff --git a/bun.lock b/bun.lock
index d67ae540..92f73ddb 100644
--- a/bun.lock
+++ b/bun.lock
@@ -91,19 +91,19 @@
       "dependencies": {
         "@ndaidong/txtgen": "^4.0.1",
         "@radix-ui/react-avatar": "^1.1.3",
-        "@radix-ui/react-checkbox": "^1.1.4",
-        "@radix-ui/react-dialog": "^1.1.6",
-        "@radix-ui/react-dropdown-menu": "^2.1.6",
-        "@radix-ui/react-label": "^2.1.2",
-        "@radix-ui/react-popover": "^1.1.6",
-        "@radix-ui/react-separator": "^1.1.2",
-        "@radix-ui/react-slider": "^1.2.3",
-        "@radix-ui/react-slot": "^1.1.2",
-        "@radix-ui/react-tabs": "^1.1.3",
+        "@radix-ui/react-checkbox": "^1.1.5",
+        "@radix-ui/react-dialog": "^1.1.7",
+        "@radix-ui/react-dropdown-menu": "^2.1.7",
+        "@radix-ui/react-label": "^2.1.3",
+        "@radix-ui/react-popover": "^1.1.7",
+        "@radix-ui/react-separator": "^1.1.3",
+        "@radix-ui/react-slider": "^1.2.4",
+        "@radix-ui/react-slot": "^1.2.0",
+        "@radix-ui/react-tabs": "^1.1.4",
         "@radix-ui/react-tooltip": "^1.1.8",
         "@tailwindcss/vite": "^4.0.14",
         "@tanstack/match-sorter-utils": "8.19.4",
-        "@tanstack/react-query": "^5.68.0",
+        "@tanstack/react-query": "^5.72.2",
         "@tanstack/react-table": "8.21.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -111,6 +111,7 @@
         "date-fns": "^4.1.0",
         "lucide-react": "^0.481.0",
         "nanoid": "^5.1.3",
+        "nuqs": "^2.4.1",
         "react": "^19.0.0",
         "react-day-picker": "8.10.1",
         "react-dom": "^19.0.0",
@@ -118,6 +119,7 @@
         "tailwind-merge": "^3.0.2",
         "tailwindcss": "^4.0.14",
         "tailwindcss-animate": "^1.0.7",
+        "zod": "^3.24.2",
       },
       "devDependencies": {
         "@eslint/js": "^9.21.0",
diff --git a/examples/vite-basic/package.json b/examples/vite-basic/package.json
index 4e43f4fc..286238a1 100644
--- a/examples/vite-basic/package.json
+++ b/examples/vite-basic/package.json
@@ -12,19 +12,19 @@
   "dependencies": {
     "@ndaidong/txtgen": "^4.0.1",
     "@radix-ui/react-avatar": "^1.1.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slider": "^1.2.3",
-    "@radix-ui/react-slot": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.5",
+    "@radix-ui/react-dialog": "^1.1.7",
+    "@radix-ui/react-dropdown-menu": "^2.1.7",
+    "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-separator": "^1.1.3",
+    "@radix-ui/react-slider": "^1.2.4",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tailwindcss/vite": "^4.0.14",
     "@tanstack/match-sorter-utils": "8.19.4",
-    "@tanstack/react-query": "^5.68.0",
+    "@tanstack/react-query": "^5.72.2",
     "@tanstack/react-table": "8.21.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -32,13 +32,15 @@
     "date-fns": "^4.1.0",
     "lucide-react": "^0.481.0",
     "nanoid": "^5.1.3",
+    "nuqs": "^2.4.1",
     "react": "^19.0.0",
     "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
     "remeda": "^2.21.2",
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.14",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
diff --git a/examples/vite-basic/src/App.tsx b/examples/vite-basic/src/App.tsx
index add6f9f6..69b3a12b 100644
--- a/examples/vite-basic/src/App.tsx
+++ b/examples/vite-basic/src/App.tsx
@@ -1,15 +1,28 @@
 import Example1 from '@/components/demo/ex1'
+import { parseAsJson, useQueryState } from 'nuqs'
+import { z } from 'zod'
+import { FiltersState } from './components/data-table-filter/core/types'
 import { default as DataTableDynamic } from './components/demo/dynamic/data-table'
+import { IssuesTable } from './components/demo/ssf-tst-query/issues-table'
+import QueryClientProvider from './components/demo/ssf-tst-query/query-client-provider'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs'
 
+const filtersSchema = z.custom<FiltersState>()
+
 export default function App() {
+  const [filters, setFilters] = useQueryState<FiltersState>(
+    'filters',
+    parseAsJson(filtersSchema.parse).withDefault([]),
+  )
+
   return (
     <div className="p-16">
       <Tabs defaultValue="dynamic">
-        <TabsList className="w-[300px]">
+        <TabsList className="w-[350px]">
           <TabsTrigger value="dynamic">Dynamic</TabsTrigger>
           <TabsTrigger value="static">Static</TabsTrigger>
           <TabsTrigger value="ex1">Example 1</TabsTrigger>
+          <TabsTrigger value="ex2">Example 2</TabsTrigger>
         </TabsList>
         <TabsContent value="dynamic">
           <DataTableDynamic />
@@ -17,6 +30,11 @@ export default function App() {
         <TabsContent value="ex1">
           <Example1 />
         </TabsContent>
+        <TabsContent value="ex2">
+          <QueryClientProvider>
+            <IssuesTable state={{ filters, setFilters }} />
+          </QueryClientProvider>
+        </TabsContent>
       </Tabs>
     </div>
   )
diff --git a/examples/vite-basic/src/components/data-table-filter/components/active-filters.tsx b/examples/vite-basic/src/components/data-table-filter/components/active-filters.tsx
new file mode 100644
index 00000000..97686ab3
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/components/active-filters.tsx
@@ -0,0 +1,162 @@
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { X } from 'lucide-react'
+import { useEffect, useRef, useState } from 'react'
+import type {
+  Column,
+  ColumnDataType,
+  DataTableFilterActions,
+  FilterModel,
+  FilterStrategy,
+  FiltersState,
+} from '../core/types'
+import { getColumn } from '../lib/helpers'
+import { FilterOperator } from './filter-operator'
+import { FilterSubject } from './filter-subject'
+import { FilterValue } from './filter-value'
+
+interface ActiveFiltersProps<TData> {
+  columns: Column<TData>[]
+  filters: FiltersState
+  actions: DataTableFilterActions
+  strategy: FilterStrategy
+}
+
+export function ActiveFilters<TData>({
+  columns,
+  filters,
+  actions,
+  strategy,
+}: ActiveFiltersProps<TData>) {
+  return (
+    <>
+      {filters.map((filter) => {
+        const id = filter.columnId
+
+        const column = getColumn(columns, id)
+
+        // Skip if no filter value
+        if (!filter.values) return null
+
+        return (
+          <ActiveFilter
+            key={`active-filter-${filter.columnId}`}
+            filter={filter}
+            column={column}
+            actions={actions}
+            strategy={strategy}
+          />
+        )
+      })}
+    </>
+  )
+}
+
+interface ActiveFilterProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+  strategy: FilterStrategy
+}
+
+// Generic render function for a filter with type-safe value
+export function ActiveFilter<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+  strategy,
+}: ActiveFilterProps<TData, TType>) {
+  return (
+    <div className="flex h-7 items-center rounded-2xl border border-border bg-background shadow-xs text-xs">
+      <FilterSubject column={column} />
+      <Separator orientation="vertical" />
+      <FilterOperator filter={filter} column={column} actions={actions} />
+      <Separator orientation="vertical" />
+      <FilterValue
+        filter={filter}
+        column={column}
+        actions={actions}
+        strategy={strategy}
+      />
+      <Separator orientation="vertical" />
+      <Button
+        variant="ghost"
+        className="rounded-none rounded-r-2xl text-xs w-7 h-full"
+        onClick={() => actions.removeFilter(filter.columnId)}
+      >
+        <X className="size-4 -translate-x-0.5" />
+      </Button>
+    </div>
+  )
+}
+
+export function ActiveFiltersMobileContainer({
+  children,
+}: { children: React.ReactNode }) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const [showLeftBlur, setShowLeftBlur] = useState(false)
+  const [showRightBlur, setShowRightBlur] = useState(true)
+
+  // Check if there's content to scroll and update blur states
+  const checkScroll = () => {
+    if (scrollContainerRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } =
+        scrollContainerRef.current
+
+      // Show left blur if scrolled to the right
+      setShowLeftBlur(scrollLeft > 0)
+
+      // Show right blur if there's more content to scroll to the right
+      // Add a small buffer (1px) to account for rounding errors
+      setShowRightBlur(scrollLeft + clientWidth < scrollWidth - 1)
+    }
+  }
+
+  // Log blur states for debugging
+  // useEffect(() => {
+  //   console.log('left:', showLeftBlur, '  right:', showRightBlur)
+  // }, [showLeftBlur, showRightBlur])
+
+  // Set up ResizeObserver to monitor container size
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      const resizeObserver = new ResizeObserver(() => {
+        checkScroll()
+      })
+      resizeObserver.observe(scrollContainerRef.current)
+      return () => {
+        resizeObserver.disconnect()
+      }
+    }
+  }, [])
+
+  // Update blur states when children change
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    checkScroll()
+  }, [children])
+
+  return (
+    <div className="relative w-full overflow-x-hidden">
+      {/* Left blur effect */}
+      {showLeftBlur && (
+        <div className="absolute left-0 top-0 bottom-0 w-16 z-10 pointer-events-none bg-gradient-to-r from-background to-transparent animate-in fade-in-0" />
+      )}
+
+      {/* Scrollable container */}
+      <div
+        ref={scrollContainerRef}
+        className="flex gap-2 overflow-x-scroll no-scrollbar"
+        onScroll={checkScroll}
+      >
+        {children}
+      </div>
+
+      {/* Right blur effect */}
+      {showRightBlur && (
+        <div className="absolute right-0 top-0 bottom-0 w-16 z-10 pointer-events-none bg-gradient-to-l from-background to-transparent animate-in fade-in-0 " />
+      )}
+    </div>
+  )
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/components/data-table-filter.tsx b/examples/vite-basic/src/components/data-table-filter/components/data-table-filter.tsx
new file mode 100644
index 00000000..38724e88
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/components/data-table-filter.tsx
@@ -0,0 +1,69 @@
+import { useIsMobile } from '@/hooks/use-mobile'
+import type {
+  Column,
+  DataTableFilterActions,
+  FilterStrategy,
+  FiltersState,
+} from '../core/types'
+import { ActiveFilters, ActiveFiltersMobileContainer } from './active-filters'
+import { FilterActions } from './filter-actions'
+import { FilterSelector } from './filter-selector'
+
+interface DataTableFilterProps<TData> {
+  columns: Column<TData>[]
+  filters: FiltersState
+  actions: DataTableFilterActions
+  strategy: FilterStrategy
+}
+
+export function DataTableFilter<TData>({
+  columns,
+  filters,
+  actions,
+  strategy,
+}: DataTableFilterProps<TData>) {
+  const isMobile = useIsMobile()
+  if (isMobile) {
+    return (
+      <div className="flex w-full items-start justify-between gap-2">
+        <div className="flex gap-1">
+          <FilterSelector
+            columns={columns}
+            filters={filters}
+            actions={actions}
+            strategy={strategy}
+          />
+          <FilterActions hasFilters={filters.length > 0} actions={actions} />
+        </div>
+        <ActiveFiltersMobileContainer>
+          <ActiveFilters
+            columns={columns}
+            filters={filters}
+            actions={actions}
+            strategy={strategy}
+          />
+        </ActiveFiltersMobileContainer>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex w-full items-start justify-between gap-2">
+      <div className="flex md:flex-wrap gap-2 w-full flex-1">
+        <FilterSelector
+          columns={columns}
+          filters={filters}
+          actions={actions}
+          strategy={strategy}
+        />
+        <ActiveFilters
+          columns={columns}
+          filters={filters}
+          actions={actions}
+          strategy={strategy}
+        />
+      </div>
+      <FilterActions hasFilters={filters.length > 0} actions={actions} />
+    </div>
+  )
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/components/filter-actions.tsx b/examples/vite-basic/src/components/data-table-filter/components/filter-actions.tsx
new file mode 100644
index 00000000..cd38c10e
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/components/filter-actions.tsx
@@ -0,0 +1,24 @@
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { FilterXIcon } from 'lucide-react'
+import { memo } from 'react'
+import type { DataTableFilterActions } from '../core/types'
+
+interface FilterActionsProps {
+  hasFilters: boolean
+  actions?: DataTableFilterActions
+}
+
+export const FilterActions = memo(__FilterActions)
+function __FilterActions({ hasFilters, actions }: FilterActionsProps) {
+  return (
+    <Button
+      className={cn('h-7 !px-2', !hasFilters && 'hidden')}
+      variant="destructive"
+      onClick={actions?.removeAllFilters}
+    >
+      <FilterXIcon />
+      <span className="hidden md:block">Clear</span>
+    </Button>
+  )
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/components/filter-operator.tsx b/examples/vite-basic/src/components/data-table-filter/components/filter-operator.tsx
new file mode 100644
index 00000000..7d6ed7fb
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/components/filter-operator.tsx
@@ -0,0 +1,322 @@
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { useState } from 'react'
+import {
+  dateFilterDetails,
+  filterTypeOperatorDetails,
+  multiOptionFilterDetails,
+  numberFilterDetails,
+  optionFilterDetails,
+  textFilterDetails,
+} from '../core/operators'
+import type {
+  Column,
+  ColumnDataType,
+  DataTableFilterActions,
+  FilterModel,
+  FilterOperators,
+  FilterStrategy,
+} from '../core/types'
+
+interface FilterOperatorProps<TData, TType extends ColumnDataType> {
+  column: Column<TData, TType>
+  filter: FilterModel<TType>
+  actions: DataTableFilterActions
+}
+
+// Renders the filter operator display and menu for a given column filter
+// The filter operator display is the label and icon for the filter operator
+// The filter operator menu is the dropdown menu for the filter operator
+export function FilterOperator<TData, TType extends ColumnDataType>({
+  column,
+  filter,
+  actions,
+}: FilterOperatorProps<TData, TType>) {
+  const [open, setOpen] = useState<boolean>(false)
+
+  const close = () => setOpen(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          className="m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs"
+        >
+          <FilterOperatorDisplay filter={filter} columnType={column.type} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
+      >
+        <Command loop>
+          <CommandInput placeholder="Search..." />
+          <CommandEmpty>No results.</CommandEmpty>
+          <CommandList className="max-h-fit">
+            <FilterOperatorController
+              filter={filter}
+              column={column}
+              actions={actions}
+              closeController={close}
+            />
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+interface FilterOperatorDisplayProps<TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  columnType: TType
+}
+
+export function FilterOperatorDisplay<TType extends ColumnDataType>({
+  filter,
+  columnType,
+}: FilterOperatorDisplayProps<TType>) {
+  const operator = filterTypeOperatorDetails[columnType][filter.operator]
+
+  return <span>{operator.label}</span>
+}
+
+interface FilterOperatorControllerProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+  closeController: () => void
+}
+
+/*
+ *
+ * TODO: Reduce into a single component. Each data type does not need it's own controller.
+ *
+ */
+export function FilterOperatorController<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, TType>) {
+  switch (column.type) {
+    case 'option':
+      return (
+        <FilterOperatorOptionController
+          filter={filter as FilterModel<'option'>}
+          column={column as Column<TData, 'option'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'multiOption':
+      return (
+        <FilterOperatorMultiOptionController
+          filter={filter as FilterModel<'multiOption'>}
+          column={column as Column<TData, 'multiOption'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'date':
+      return (
+        <FilterOperatorDateController
+          filter={filter as FilterModel<'date'>}
+          column={column as Column<TData, 'date'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'text':
+      return (
+        <FilterOperatorTextController
+          filter={filter as FilterModel<'text'>}
+          column={column as Column<TData, 'text'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    case 'number':
+      return (
+        <FilterOperatorNumberController
+          filter={filter as FilterModel<'number'>}
+          column={column as Column<TData, 'number'>}
+          actions={actions}
+          closeController={closeController}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+function FilterOperatorOptionController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'option'>) {
+  const filterDetails = optionFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(optionFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['option'])
+    closeController()
+  }
+
+  return (
+    <CommandGroup heading="Operators">
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+function FilterOperatorMultiOptionController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'multiOption'>) {
+  const filterDetails = multiOptionFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(multiOptionFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(
+      column.id,
+      value as FilterOperators['multiOption'],
+    )
+    closeController()
+  }
+
+  return (
+    <CommandGroup heading="Operators">
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+function FilterOperatorDateController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'date'>) {
+  const filterDetails = dateFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(dateFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['date'])
+    closeController()
+  }
+
+  return (
+    <CommandGroup>
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+export function FilterOperatorTextController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'text'>) {
+  const filterDetails = textFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(textFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['text'])
+    closeController()
+  }
+
+  return (
+    <CommandGroup heading="Operators">
+      {relatedFilters.map((r) => {
+        return (
+          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>
+            {r.label}
+          </CommandItem>
+        )
+      })}
+    </CommandGroup>
+  )
+}
+
+function FilterOperatorNumberController<TData>({
+  filter,
+  column,
+  actions,
+  closeController,
+}: FilterOperatorControllerProps<TData, 'number'>) {
+  // Show all related operators
+  const filterDetails = numberFilterDetails[filter.operator]
+
+  const relatedFilters = Object.values(numberFilterDetails).filter(
+    (o) => o.target === filterDetails.target,
+  )
+
+  const changeOperator = (value: string) => {
+    actions?.setFilterOperator(column.id, value as FilterOperators['number'])
+    closeController()
+  }
+
+  return (
+    <div>
+      <CommandGroup heading="Operators">
+        {relatedFilters.map((r) => (
+          <CommandItem
+            onSelect={() => changeOperator(r.value)}
+            value={r.value}
+            key={r.value}
+          >
+            {r.label} {/**/}
+          </CommandItem>
+        ))}
+      </CommandGroup>
+    </div>
+  )
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/components/filter-selector.tsx b/examples/vite-basic/src/components/data-table-filter/components/filter-selector.tsx
new file mode 100644
index 00000000..549f9445
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/components/filter-selector.tsx
@@ -0,0 +1,185 @@
+import { Button } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+import { ArrowRightIcon, FilterIcon } from 'lucide-react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type {
+  Column,
+  ColumnDataType,
+  DataTableFilterActions,
+  FilterStrategy,
+  FiltersState,
+} from '../core/types'
+import { getColumn } from '../lib/helpers'
+import { FilterValueController } from './filter-value'
+
+interface FilterSelectorProps<TData> {
+  filters: FiltersState
+  columns: Column<TData>[]
+  actions: DataTableFilterActions
+  strategy: FilterStrategy
+}
+
+export const FilterSelector = memo(__FilterSelector) as typeof __FilterSelector
+
+function __FilterSelector<TData>({
+  filters,
+  columns,
+  actions,
+  strategy,
+}: FilterSelectorProps<TData>) {
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState('')
+  const [property, setProperty] = useState<string | undefined>(undefined)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const column = property ? getColumn(columns, property) : undefined
+  const filter = property
+    ? filters.find((f) => f.columnId === property)
+    : undefined
+
+  const hasFilters = filters.length > 0
+
+  useEffect(() => {
+    if (property && inputRef) {
+      inputRef.current?.focus()
+      setValue('')
+    }
+  }, [property])
+
+  useEffect(() => {
+    if (!open) setTimeout(() => setValue(''), 150)
+  }, [open])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: need filters to be updated
+  const content = useMemo(
+    () =>
+      property && column ? (
+        <FilterValueController
+          filter={filter!}
+          column={column as Column<TData, ColumnDataType>}
+          actions={actions}
+          strategy={strategy}
+        />
+      ) : (
+        <Command loop>
+          <CommandInput
+            value={value}
+            onValueChange={setValue}
+            ref={inputRef}
+            placeholder="Search..."
+          />
+          <CommandEmpty>No results.</CommandEmpty>
+          <CommandList className="max-h-fit">
+            <CommandGroup>
+              {columns.map((column) => (
+                <FilterableColumn
+                  key={column.id}
+                  column={column}
+                  setProperty={setProperty}
+                />
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      ),
+    [property, column, filter, filters, columns, actions, value],
+  )
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={async (value) => {
+        setOpen(value)
+        if (!value) setTimeout(() => setProperty(undefined), 100)
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn('h-7', hasFilters && 'w-fit !px-2')}
+        >
+          <FilterIcon className="size-4" />
+          {!hasFilters && <span>Filter</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        side="bottom"
+        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
+      >
+        {content}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export function FilterableColumn<TData, TType extends ColumnDataType, TVal>({
+  column,
+  setProperty,
+}: {
+  column: Column<TData, TType, TVal>
+  setProperty: (value: string) => void
+}) {
+  const itemRef = useRef<HTMLDivElement>(null)
+
+  const prefetch = useCallback(() => {
+    column.prefetchOptions()
+    column.prefetchValues()
+    column.prefetchFacetedUniqueValues()
+  }, [column])
+
+  useEffect(() => {
+    const target = itemRef.current
+
+    if (!target) return
+
+    // Set up MutationObserver
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes') {
+          const isSelected = target.getAttribute('data-selected') === 'true'
+          if (isSelected) prefetch()
+        }
+      }
+    })
+
+    // Set up observer
+    observer.observe(target, {
+      attributes: true,
+      attributeFilter: ['data-selected'],
+    })
+
+    // Cleanup on unmount
+    return () => observer.disconnect()
+  }, [prefetch])
+
+  return (
+    <CommandItem
+      ref={itemRef}
+      onSelect={() => setProperty(column.id)}
+      className="group"
+      onMouseEnter={prefetch}
+    >
+      <div className="flex w-full items-center justify-between">
+        <div className="inline-flex items-center gap-1.5">
+          {<column.icon strokeWidth={2.25} className="size-4" />}
+          <span>{column.displayName}</span>
+        </div>
+        <ArrowRightIcon className="size-4 opacity-0 group-aria-selected:opacity-100" />
+      </div>
+    </CommandItem>
+  )
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/components/filter-subject.tsx b/examples/vite-basic/src/components/data-table-filter/components/filter-subject.tsx
new file mode 100644
index 00000000..60b3217c
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/components/filter-subject.tsx
@@ -0,0 +1,17 @@
+import type { Column, ColumnDataType } from '../core/types'
+
+interface FilterSubjectProps<TData, TType extends ColumnDataType> {
+  column: Column<TData, TType>
+}
+
+export function FilterSubject<TData, TType extends ColumnDataType>({
+  column,
+}: FilterSubjectProps<TData, TType>) {
+  const hasIcon = !!column.icon
+  return (
+    <span className="flex select-none items-center gap-1 whitespace-nowrap px-2 font-medium">
+      {hasIcon && <column.icon className="size-4 stroke-[2.25px]" />}
+      <span>{column.displayName}</span>
+    </span>
+  )
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/components/filter-value.tsx b/examples/vite-basic/src/components/data-table-filter/components/filter-value.tsx
new file mode 100644
index 00000000..7b8cacd2
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/components/filter-value.tsx
@@ -0,0 +1,748 @@
+import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import { Input } from '@/components/ui/input'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import { Slider } from '@/components/ui/slider'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { cn } from '@/lib/utils'
+import { isEqual } from 'date-fns'
+import { format } from 'date-fns'
+import { Ellipsis } from 'lucide-react'
+import {
+  cloneElement,
+  isValidElement,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import type { DateRange } from 'react-day-picker'
+import { numberFilterDetails } from '../core/operators'
+import type {
+  Column,
+  ColumnDataType,
+  DataTableFilterActions,
+  FilterModel,
+  FilterStrategy,
+} from '../core/types'
+import { take } from '../lib/array'
+import { DebouncedInput } from '../ui/debounced-input'
+
+interface FilterValueProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+  strategy: FilterStrategy
+}
+
+export const FilterValue = memo(__FilterValue) as typeof __FilterValue
+
+function __FilterValue<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+  strategy,
+}: FilterValueProps<TData, TType>) {
+  return (
+    <Popover>
+      <PopoverAnchor className="h-full" />
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          className="m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs"
+        >
+          <FilterValueDisplay
+            filter={filter}
+            column={column}
+            actions={actions}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        side="bottom"
+        className="w-fit p-0 origin-(--radix-popover-content-transform-origin)"
+      >
+        <FilterValueController
+          filter={filter}
+          column={column}
+          actions={actions}
+          strategy={strategy}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+interface FilterValueDisplayProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+}
+
+export function FilterValueDisplay<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, TType>) {
+  switch (column.type) {
+    case 'option':
+      return (
+        <FilterValueOptionDisplay
+          filter={filter as FilterModel<'option'>}
+          column={column as Column<TData, 'option'>}
+          actions={actions}
+        />
+      )
+    case 'multiOption':
+      return (
+        <FilterValueMultiOptionDisplay
+          filter={filter as FilterModel<'multiOption'>}
+          column={column as Column<TData, 'multiOption'>}
+          actions={actions}
+        />
+      )
+    case 'date':
+      return (
+        <FilterValueDateDisplay
+          filter={filter as FilterModel<'date'>}
+          column={column as Column<TData, 'date'>}
+          actions={actions}
+        />
+      )
+    case 'text':
+      return (
+        <FilterValueTextDisplay
+          filter={filter as FilterModel<'text'>}
+          column={column as Column<TData, 'text'>}
+          actions={actions}
+        />
+      )
+    case 'number':
+      return (
+        <FilterValueNumberDisplay
+          filter={filter as FilterModel<'number'>}
+          column={column as Column<TData, 'number'>}
+          actions={actions}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+export function FilterValueOptionDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'option'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const selected = options.filter((o) => filter?.values.includes(o.value))
+
+  // We display the selected options based on how many are selected
+  //
+  // If there is only one option selected, we display its icon and label
+  //
+  // If there are multiple options selected, we display:
+  // 1) up to 3 icons of the selected options
+  // 2) the number of selected options
+  if (selected.length === 1) {
+    const { label, icon: Icon } = selected[0]
+    const hasIcon = !!Icon
+    return (
+      <span className="inline-flex items-center gap-1">
+        {hasIcon &&
+          (isValidElement(Icon) ? (
+            Icon
+          ) : (
+            <Icon className="size-4 text-primary" />
+          ))}
+        <span>{label}</span>
+      </span>
+    )
+  }
+  const name = column.displayName.toLowerCase()
+  const pluralName = name.endsWith('s') ? `${name}es` : `${name}s`
+
+  const hasOptionIcons = !options?.some((o) => !o.icon)
+
+  return (
+    <div className="inline-flex items-center gap-0.5">
+      {hasOptionIcons &&
+        take(selected, 3).map(({ value, icon }) => {
+          const Icon = icon!
+          return isValidElement(Icon) ? (
+            Icon
+          ) : (
+            <Icon key={value} className="size-4" />
+          )
+        })}
+      <span className={cn(hasOptionIcons && 'ml-1.5')}>
+        {selected.length} {pluralName}
+      </span>
+    </div>
+  )
+}
+
+export function FilterValueMultiOptionDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'multiOption'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const selected = options.filter((o) => filter.values.includes(o.value))
+
+  if (selected.length === 1) {
+    const { label, icon: Icon } = selected[0]
+    const hasIcon = !!Icon
+    return (
+      <span className="inline-flex items-center gap-1.5">
+        {hasIcon &&
+          (isValidElement(Icon) ? (
+            Icon
+          ) : (
+            <Icon className="size-4 text-primary" />
+          ))}
+
+        <span>{label}</span>
+      </span>
+    )
+  }
+
+  const name = column.displayName.toLowerCase()
+
+  const hasOptionIcons = !options?.some((o) => !o.icon)
+
+  return (
+    <div className="inline-flex items-center gap-1.5">
+      {hasOptionIcons && (
+        <div key="icons" className="inline-flex items-center gap-0.5">
+          {take(selected, 3).map(({ value, icon }) => {
+            const Icon = icon!
+            return isValidElement(Icon) ? (
+              cloneElement(Icon, { key: value })
+            ) : (
+              <Icon key={value} className="size-4" />
+            )
+          })}
+        </div>
+      )}
+      <span>
+        {selected.length} {name}
+      </span>
+    </div>
+  )
+}
+
+function formatDateRange(start: Date, end: Date) {
+  const sameMonth = start.getMonth() === end.getMonth()
+  const sameYear = start.getFullYear() === end.getFullYear()
+
+  if (sameMonth && sameYear) {
+    return `${format(start, 'MMM d')} - ${format(end, 'd, yyyy')}`
+  }
+
+  if (sameYear) {
+    return `${format(start, 'MMM d')} - ${format(end, 'MMM d, yyyy')}`
+  }
+
+  return `${format(start, 'MMM d, yyyy')} - ${format(end, 'MMM d, yyyy')}`
+}
+
+export function FilterValueDateDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'date'>) {
+  if (!filter) return null
+  if (filter.values.length === 0) return <Ellipsis className="size-4" />
+  if (filter.values.length === 1) {
+    const value = filter.values[0]
+
+    const formattedDateStr = format(value, 'MMM d, yyyy')
+
+    return <span>{formattedDateStr}</span>
+  }
+
+  const formattedRangeStr = formatDateRange(filter.values[0], filter.values[1])
+
+  return <span>{formattedRangeStr}</span>
+}
+
+export function FilterValueTextDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'text'>) {
+  if (!filter) return null
+  if (filter.values.length === 0 || filter.values[0].trim() === '')
+    return <Ellipsis className="size-4" />
+
+  const value = filter.values[0]
+
+  return <span>{value}</span>
+}
+
+export function FilterValueNumberDisplay<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueDisplayProps<TData, 'number'>) {
+  const maxFromMeta = column.max
+  const cappedMax = maxFromMeta ?? 2147483647
+
+  if (!filter) return null
+
+  if (
+    filter.operator === 'is between' ||
+    filter.operator === 'is not between'
+  ) {
+    const minValue = filter.values[0]
+    const maxValue =
+      filter.values[1] === Number.POSITIVE_INFINITY ||
+      filter.values[1] >= cappedMax
+        ? `${cappedMax}+`
+        : filter.values[1]
+
+    return (
+      <span className="tabular-nums tracking-tight">
+        {minValue} and {maxValue}
+      </span>
+    )
+  }
+
+  if (!filter.values || filter.values.length === 0) {
+    return null
+  }
+
+  const value = filter.values[0]
+  return <span className="tabular-nums tracking-tight">{value}</span>
+}
+
+/****** Property Filter Value Controller ******/
+
+interface FilterValueControllerProps<TData, TType extends ColumnDataType> {
+  filter: FilterModel<TType>
+  column: Column<TData, TType>
+  actions: DataTableFilterActions
+  strategy: FilterStrategy
+}
+
+export const FilterValueController = memo(
+  __FilterValueController,
+) as typeof __FilterValueController
+
+function __FilterValueController<TData, TType extends ColumnDataType>({
+  filter,
+  column,
+  actions,
+  strategy,
+}: FilterValueControllerProps<TData, TType>) {
+  switch (column.type) {
+    case 'option':
+      return (
+        <FilterValueOptionController
+          filter={filter as FilterModel<'option'>}
+          column={column as Column<TData, 'option'>}
+          actions={actions}
+          strategy={strategy}
+        />
+      )
+    case 'multiOption':
+      return (
+        <FilterValueMultiOptionController
+          filter={filter as FilterModel<'multiOption'>}
+          column={column as Column<TData, 'multiOption'>}
+          actions={actions}
+          strategy={strategy}
+        />
+      )
+    case 'date':
+      return (
+        <FilterValueDateController
+          filter={filter as FilterModel<'date'>}
+          column={column as Column<TData, 'date'>}
+          actions={actions}
+          strategy={strategy}
+        />
+      )
+    case 'text':
+      return (
+        <FilterValueTextController
+          filter={filter as FilterModel<'text'>}
+          column={column as Column<TData, 'text'>}
+          actions={actions}
+          strategy={strategy}
+        />
+      )
+    case 'number':
+      return (
+        <FilterValueNumberController
+          filter={filter as FilterModel<'number'>}
+          column={column as Column<TData, 'number'>}
+          actions={actions}
+          strategy={strategy}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+export function FilterValueOptionController<TData>({
+  filter,
+  column,
+  actions,
+  strategy,
+}: FilterValueControllerProps<TData, 'option'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])
+
+  function handleOptionSelect(value: string, check: boolean) {
+    if (check) actions.addFilterValue(column, [value])
+    else actions.removeFilterValue(column, [value])
+  }
+
+  return (
+    <Command loop>
+      <CommandInput autoFocus placeholder="Search..." />
+      <CommandEmpty>No results.</CommandEmpty>
+      <CommandList className="max-h-fit">
+        <CommandGroup>
+          {options.map((v) => {
+            const checked = Boolean(filter?.values.includes(v.value))
+            const count = optionsCount?.get(v.value) ?? 0
+
+            return (
+              <CommandItem
+                key={v.value}
+                onSelect={() => {
+                  handleOptionSelect(v.value, !checked)
+                }}
+                className="group flex items-center justify-between gap-1.5"
+              >
+                <div className="flex items-center gap-1.5">
+                  <Checkbox
+                    checked={checked}
+                    className="opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100"
+                  />
+                  {v.icon &&
+                    (isValidElement(v.icon) ? (
+                      v.icon
+                    ) : (
+                      <v.icon className="size-4 text-primary" />
+                    ))}
+                  <span>
+                    {v.label}
+                    <sup
+                      className={cn(
+                        !optionsCount && 'hidden',
+                        'ml-0.5 tabular-nums tracking-tight text-muted-foreground',
+                        count === 0 && 'slashed-zero',
+                      )}
+                    >
+                      {count < 100 ? count : '100+'}
+                    </sup>
+                  </span>
+                </div>
+              </CommandItem>
+            )
+          })}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueMultiOptionController<TData>({
+  filter,
+  column,
+  actions,
+  strategy,
+}: FilterValueControllerProps<TData, 'multiOption'>) {
+  const options = useMemo(() => column.getOptions(), [column])
+  const optionsCount = useMemo(() => column.getFacetedUniqueValues(), [column])
+
+  // Handles the selection/deselection of an option
+  function handleOptionSelect(value: string, check: boolean) {
+    if (check) actions.addFilterValue(column, [value])
+    else actions.removeFilterValue(column, [value])
+  }
+
+  return (
+    <Command loop>
+      <CommandInput autoFocus placeholder="Search..." />
+      <CommandEmpty>No results.</CommandEmpty>
+      <CommandList>
+        <CommandGroup>
+          {options.map((v) => {
+            const checked = Boolean(filter?.values?.includes(v.value))
+            const count = optionsCount?.get(v.value) ?? 0
+
+            return (
+              <CommandItem
+                key={v.value}
+                onSelect={() => {
+                  handleOptionSelect(v.value, !checked)
+                }}
+                className="group flex items-center justify-between gap-1.5"
+              >
+                <div className="flex items-center gap-1.5">
+                  <Checkbox
+                    checked={checked}
+                    className="opacity-0 group-hover:opacity-100 data-[state=checked]:opacity-100"
+                  />
+                  {v.icon &&
+                    (isValidElement(v.icon) ? (
+                      v.icon
+                    ) : (
+                      <v.icon className="size-4 text-primary" />
+                    ))}
+                  <span>
+                    {v.label}
+                    <sup
+                      className={cn(
+                        !optionsCount && 'hidden',
+                        'ml-0.5 tabular-nums tracking-tight text-muted-foreground',
+                        count === 0 && 'slashed-zero',
+                      )}
+                    >
+                      {count < 100 ? count : '100+'}
+                    </sup>
+                  </span>
+                </div>
+              </CommandItem>
+            )
+          })}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueDateController<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, 'date'>) {
+  const [date, setDate] = useState<DateRange | undefined>({
+    from: filter?.values[0] ?? new Date(),
+    to: filter?.values[1] ?? undefined,
+  })
+
+  function changeDateRange(value: DateRange | undefined) {
+    const start = value?.from
+    const end =
+      start && value && value.to && !isEqual(start, value.to)
+        ? value.to
+        : undefined
+
+    setDate({ from: start, to: end })
+
+    const isRange = start && end
+    const newValues = isRange ? [start, end] : start ? [start] : []
+
+    actions.setFilterValue(column, newValues)
+  }
+
+  return (
+    <Command>
+      <CommandList className="max-h-fit">
+        <CommandGroup>
+          <div>
+            <Calendar
+              initialFocus
+              mode="range"
+              defaultMonth={date?.from}
+              selected={date}
+              onSelect={changeDateRange}
+              numberOfMonths={1}
+            />
+          </div>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueTextController<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, 'text'>) {
+  const changeText = (value: string | number) => {
+    actions.setFilterValue(column, [String(value)])
+  }
+
+  return (
+    <Command>
+      <CommandList className="max-h-fit">
+        <CommandGroup>
+          <CommandItem>
+            <DebouncedInput
+              placeholder="Search..."
+              autoFocus
+              value={filter?.values[0] ?? ''}
+              onChange={changeText}
+            />
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
+
+export function FilterValueNumberController<TData>({
+  filter,
+  column,
+  actions,
+}: FilterValueControllerProps<TData, 'number'>) {
+  const [datasetMin, datasetMax] = useMemo(
+    () => column.getFacetedMinMaxValues(),
+    [column],
+  )
+  const [sliderMin, sliderMax] = [
+    column.min ?? datasetMin,
+    column.max ?? datasetMax,
+  ]
+
+  // Local state for values
+  const [values, setValues] = useState(filter?.values ?? [0, 0])
+
+  // Sync with parent filter changes
+  useEffect(() => {
+    if (
+      filter?.values &&
+      filter.values.length === values.length &&
+      filter.values.every((v, i) => v === values[i])
+    ) {
+      setValues(filter.values)
+    }
+  }, [filter?.values, values])
+
+  const isNumberRange =
+    filter && numberFilterDetails[filter.operator].target === 'multiple'
+
+  const changeNumber = (value: number[]) => {
+    setValues(value)
+    actions.setFilterValue(column, value)
+  }
+
+  const changeMinNumber = (value: number) => {
+    const newValues = [value, values[1]]
+    setValues(newValues)
+    actions.setFilterValue(column, newValues)
+  }
+
+  const changeMaxNumber = (value: number) => {
+    const newValues = [values[0], value]
+    setValues(newValues)
+    actions.setFilterValue(column, newValues)
+  }
+
+  const changeType = useCallback(
+    (type: 'single' | 'range') => {
+      const newValues =
+        type === 'single'
+          ? [values[0]] // Keep the first value for single mode
+          : [values[0], values[1] ?? datasetMax] // Use two values for range mode
+      const newOperator = type === 'single' ? 'is' : 'is between'
+
+      // Update local state
+      setValues(newValues)
+
+      // Update global filter state atomically
+      actions.setFilterOperator(column.id, newOperator)
+      actions.setFilterValue(column, newValues)
+    },
+    [values, datasetMax, column, actions],
+  )
+
+  return (
+    <Command>
+      <CommandList className="w-[300px] px-2 py-2">
+        <CommandGroup>
+          <div className="flex flex-col w-full">
+            <Tabs
+              value={isNumberRange ? 'range' : 'single'}
+              onValueChange={(v) => changeType(v as 'single' | 'range')}
+            >
+              <TabsList className="w-full *:text-xs">
+                <TabsTrigger value="single">Single</TabsTrigger>
+                <TabsTrigger value="range">Range</TabsTrigger>
+              </TabsList>
+              <TabsContent value="single" className="flex flex-col gap-4 mt-4">
+                <Slider
+                  value={[values[0]]}
+                  onValueChange={(value) => changeNumber(value)}
+                  min={sliderMin}
+                  max={sliderMax}
+                  step={1}
+                  aria-orientation="horizontal"
+                />
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-medium">Value</span>
+                  <Input
+                    id="single"
+                    type="number"
+                    value={values[0].toString()} // Use values[0] directly
+                    onChange={(e) => changeNumber([Number(e.target.value)])}
+                    min={datasetMin}
+                    max={datasetMax}
+                  />
+                </div>
+              </TabsContent>
+              <TabsContent value="range" className="flex flex-col gap-4 mt-4">
+                <Slider
+                  value={values} // Use values directly
+                  onValueChange={changeNumber}
+                  min={sliderMin}
+                  max={sliderMax}
+                  step={1}
+                  aria-orientation="horizontal"
+                />
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium">Min</span>
+                    <DebouncedInput
+                      type="number"
+                      value={values[0]}
+                      onChange={(v) => changeMinNumber(Number(v))}
+                      min={datasetMin}
+                      max={datasetMax}
+                    />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs font-medium">Max</span>
+                    <DebouncedInput
+                      type="number"
+                      value={values[1]}
+                      onChange={(v) => changeMaxNumber(Number(v))}
+                      min={datasetMin}
+                      max={datasetMax}
+                    />
+                  </div>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  )
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/core/filters.ts b/examples/vite-basic/src/components/data-table-filter/core/filters.ts
new file mode 100644
index 00000000..07e1d973
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/core/filters.ts
@@ -0,0 +1,444 @@
+import { isAnyOf, uniq } from '../lib/array'
+import { isColumnOptionArray } from '../lib/helpers'
+import { memo } from '../lib/memo'
+import type {
+  Column,
+  ColumnConfig,
+  ColumnDataType,
+  ColumnOption,
+  ElementType,
+  FilterStrategy,
+  Nullable,
+  TAccessorFn,
+  TOrderFn,
+  TTransformOptionFn,
+} from './types'
+
+class ColumnConfigBuilder<
+  TData,
+  TType extends ColumnDataType = any,
+  TVal = unknown,
+  TId extends string = string, // Add TId generic
+> {
+  private config: Partial<ColumnConfig<TData, TType, TVal, TId>>
+
+  constructor(type: TType) {
+    this.config = { type } as Partial<ColumnConfig<TData, TType, TVal, TId>>
+  }
+
+  private clone(): ColumnConfigBuilder<TData, TType, TVal, TId> {
+    const newInstance = new ColumnConfigBuilder<TData, TType, TVal, TId>(
+      this.config.type as TType,
+    )
+    newInstance.config = { ...this.config }
+    return newInstance
+  }
+
+  id<TNewId extends string>(
+    value: TNewId,
+  ): ColumnConfigBuilder<TData, TType, TVal, TNewId> {
+    const newInstance = this.clone() as any // We'll refine this
+    newInstance.config.id = value
+    return newInstance as ColumnConfigBuilder<TData, TType, TVal, TNewId>
+  }
+
+  accessor<TNewVal>(
+    accessor: TAccessorFn<TData, TNewVal>,
+  ): ColumnConfigBuilder<TData, TType, TNewVal, TId> {
+    const newInstance = this.clone() as any
+    newInstance.config.accessor = accessor
+    return newInstance as ColumnConfigBuilder<TData, TType, TNewVal, TId>
+  }
+
+  displayName(value: string): ColumnConfigBuilder<TData, TType, TVal, TId> {
+    const newInstance = this.clone()
+    newInstance.config.displayName = value
+    return newInstance
+  }
+
+  icon(value: any): ColumnConfigBuilder<TData, TType, TVal, TId> {
+    const newInstance = this.clone()
+    newInstance.config.icon = value
+    return newInstance
+  }
+
+  min(
+    value: number,
+  ): ColumnConfigBuilder<
+    TData,
+    TType extends 'number' ? TType : never,
+    TVal,
+    TId
+  > {
+    if (this.config.type !== 'number') {
+      throw new Error('min() is only applicable to number columns')
+    }
+    const newInstance = this.clone() as any
+    newInstance.config.min = value
+    return newInstance
+  }
+
+  max(
+    value: number,
+  ): ColumnConfigBuilder<
+    TData,
+    TType extends 'number' ? TType : never,
+    TVal,
+    TId
+  > {
+    if (this.config.type !== 'number') {
+      throw new Error('max() is only applicable to number columns')
+    }
+    const newInstance = this.clone() as any
+    newInstance.config.max = value
+    return newInstance
+  }
+
+  options(
+    value: ColumnOption[],
+  ): ColumnConfigBuilder<
+    TData,
+    TType extends 'option' | 'multiOption' ? TType : never,
+    TVal,
+    TId
+  > {
+    if (!isAnyOf(this.config.type, ['option', 'multiOption'])) {
+      throw new Error(
+        'options() is only applicable to option or multiOption columns',
+      )
+    }
+    const newInstance = this.clone() as any
+    newInstance.config.options = value
+    return newInstance
+  }
+
+  transformOptionFn(
+    fn: TTransformOptionFn<TVal>,
+  ): ColumnConfigBuilder<
+    TData,
+    TType extends 'option' | 'multiOption' ? TType : never,
+    TVal,
+    TId
+  > {
+    if (!isAnyOf(this.config.type, ['option', 'multiOption'])) {
+      throw new Error(
+        'transformOptionFn() is only applicable to option or multiOption columns',
+      )
+    }
+    const newInstance = this.clone() as any
+    newInstance.config.transformOptionFn = fn
+    return newInstance
+  }
+
+  orderFn(
+    fn: TOrderFn<TVal>,
+  ): ColumnConfigBuilder<
+    TData,
+    TType extends 'option' | 'multiOption' ? TType : never,
+    TVal,
+    TId
+  > {
+    if (!isAnyOf(this.config.type, ['option', 'multiOption'])) {
+      throw new Error(
+        'orderFn() is only applicable to option or multiOption columns',
+      )
+    }
+    const newInstance = this.clone() as any
+    newInstance.config.orderFn = fn
+    return newInstance
+  }
+
+  build(): ColumnConfig<TData, TType, TVal, TId> {
+    if (!this.config.id) throw new Error('id is required')
+    if (!this.config.accessor) throw new Error('accessor is required')
+    if (!this.config.displayName) throw new Error('displayName is required')
+    if (!this.config.icon) throw new Error('icon is required')
+    return this.config as ColumnConfig<TData, TType, TVal, TId>
+  }
+}
+
+// Update the helper interface
+interface FluentColumnConfigHelper<TData> {
+  text: () => ColumnConfigBuilder<TData, 'text', string>
+  number: () => ColumnConfigBuilder<TData, 'number', number>
+  date: () => ColumnConfigBuilder<TData, 'date', Date>
+  option: () => ColumnConfigBuilder<TData, 'option', string>
+  multiOption: () => ColumnConfigBuilder<TData, 'multiOption', string[]>
+}
+
+// Factory function remains mostly the same
+export function createColumnConfigHelper<
+  TData,
+>(): FluentColumnConfigHelper<TData> {
+  return {
+    text: () => new ColumnConfigBuilder<TData, 'text', string>('text'),
+    number: () => new ColumnConfigBuilder<TData, 'number', number>('number'),
+    date: () => new ColumnConfigBuilder<TData, 'date', Date>('date'),
+    option: () => new ColumnConfigBuilder<TData, 'option', string>('option'),
+    multiOption: () =>
+      new ColumnConfigBuilder<TData, 'multiOption', string[]>('multiOption'),
+  }
+}
+
+export function getColumnOptions<TData, TType extends ColumnDataType, TVal>(
+  column: ColumnConfig<TData, TType, TVal>,
+  data: TData[],
+  strategy: FilterStrategy,
+): ColumnOption[] {
+  if (!isAnyOf(column.type, ['option', 'multiOption'])) {
+    console.warn(
+      'Column options can only be retrieved for option and multiOption columns',
+    )
+    return []
+  }
+
+  if (strategy === 'server' && !column.options) {
+    throw new Error('column options are required for server-side filtering')
+  }
+
+  if (column.options) {
+    return column.options
+  }
+
+  const filtered = data
+    .flatMap(column.accessor)
+    .filter((v): v is NonNullable<TVal> => v !== undefined && v !== null)
+
+  let models = uniq(filtered)
+
+  if (column.orderFn) {
+    models = models.sort((m1, m2) =>
+      column.orderFn!(
+        m1 as ElementType<NonNullable<TVal>>,
+        m2 as ElementType<NonNullable<TVal>>,
+      ),
+    )
+  }
+
+  if (column.transformOptionFn) {
+    // Memoize transformOptionFn calls
+    const memoizedTransform = memo(
+      () => [models],
+      (deps) =>
+        deps[0].map((m) =>
+          column.transformOptionFn!(m as ElementType<NonNullable<TVal>>),
+        ),
+      { key: `transform-${column.id}` },
+    )
+    return memoizedTransform()
+  }
+
+  if (isColumnOptionArray(models)) return models
+
+  throw new Error(
+    `[data-table-filter] [${column.id}] Either provide static options, a transformOptionFn, or ensure the column data conforms to ColumnOption type`,
+  )
+}
+
+export function getColumnValues<TData, TType extends ColumnDataType, TVal>(
+  column: ColumnConfig<TData, TType, TVal>,
+  data: TData[],
+) {
+  // Memoize accessor calls
+  const memoizedAccessor = memo(
+    () => [data],
+    (deps) =>
+      deps[0]
+        .flatMap(column.accessor)
+        .filter(
+          (v): v is NonNullable<TVal> => v !== undefined && v !== null,
+        ) as ElementType<NonNullable<TVal>>[],
+    { key: `accessor-${column.id}` },
+  )
+
+  const raw = memoizedAccessor()
+
+  if (!isAnyOf(column.type, ['option', 'multiOption'])) {
+    return raw
+  }
+
+  if (column.options) {
+    return raw
+      .map((v) => column.options?.find((o) => o.value === v)?.value)
+      .filter((v) => v !== undefined && v !== null)
+  }
+
+  if (column.transformOptionFn) {
+    const memoizedTransform = memo(
+      () => [raw],
+      (deps) =>
+        deps[0].map(
+          (v) => column.transformOptionFn!(v) as ElementType<NonNullable<TVal>>,
+        ),
+      { key: `transform-values-${column.id}` },
+    )
+    return memoizedTransform()
+  }
+
+  if (isColumnOptionArray(raw)) {
+    return raw
+  }
+
+  throw new Error(
+    `[data-table-filter] [${column.id}] Either provide static options, a transformOptionFn, or ensure the column data conforms to ColumnOption type`,
+  )
+}
+
+export function getFacetedUniqueValues<
+  TData,
+  TType extends ColumnDataType,
+  TVal,
+>(
+  column: ColumnConfig<TData, TType, TVal>,
+  values: string[] | ColumnOption[],
+  strategy: FilterStrategy,
+): Map<string, number> | undefined {
+  if (!isAnyOf(column.type, ['option', 'multiOption'])) {
+    console.warn(
+      'Faceted unique values can only be retrieved for option and multiOption columns',
+    )
+    return new Map<string, number>()
+  }
+
+  if (strategy === 'server') {
+    return column.facetedOptions
+  }
+
+  const acc = new Map<string, number>()
+
+  if (isColumnOptionArray(values)) {
+    for (const option of values) {
+      const curr = acc.get(option.value) ?? 0
+      acc.set(option.value, curr + 1)
+    }
+  } else {
+    for (const option of values) {
+      const curr = acc.get(option as string) ?? 0
+      acc.set(option as string, curr + 1)
+    }
+  }
+
+  return acc
+}
+
+export function getFacetedMinMaxValues<
+  TData,
+  TType extends ColumnDataType,
+  TVal,
+>(column: ColumnConfig<TData, TType, TVal>, data: TData[]): number[] {
+  if (column.type !== 'number') return [0, 0] // Only applicable to number columns
+
+  const values = data
+    .flatMap((row) => column.accessor(row) as Nullable<number>)
+    .filter((v): v is number => typeof v === 'number' && !Number.isNaN(v))
+
+  if (values.length === 0) {
+    return [column.min ?? 0, column.max ?? 100] // Fallback to config or reasonable defaults
+  }
+
+  const min = Math.min(...values)
+  const max = Math.max(...values)
+
+  // Apply config overrides if provided
+  return [
+    column.min !== undefined ? Math.max(min, column.min) : min,
+    column.max !== undefined ? Math.min(max, column.max) : max,
+  ]
+}
+
+export function createColumns<TData>(
+  data: TData[],
+  columnConfigs: ReadonlyArray<ColumnConfig<TData, any, any, any>>,
+  strategy: FilterStrategy,
+): Column<TData>[] {
+  return columnConfigs.map((columnConfig) => {
+    const getOptions: () => ColumnOption[] = memo(
+      () => [data, strategy, columnConfig.options],
+      ([data, strategy]) =>
+        getColumnOptions(columnConfig, data as any, strategy as any),
+      { key: `options-${columnConfig.id}` },
+    )
+
+    const getValues: () => ElementType<NonNullable<any>>[] = memo(
+      () => [data, strategy],
+      () => (strategy === 'client' ? getColumnValues(columnConfig, data) : []),
+      { key: `values-${columnConfig.id}` },
+    )
+
+    const getUniqueValues: () => Map<string, number> | undefined = memo(
+      () => [getValues(), strategy],
+      ([values, strategy]) =>
+        getFacetedUniqueValues(columnConfig, values as any, strategy as any),
+      { key: `faceted-${columnConfig.id}` },
+    )
+
+    const getMinMaxValues: () => number[] = memo(
+      () => [data, strategy],
+      () =>
+        strategy === 'client' ? getFacetedMinMaxValues(columnConfig, data) : [],
+      { key: `minmax-${columnConfig.id}` },
+    )
+
+    // Create the Column instance
+    const column: Column<TData> = {
+      ...columnConfig,
+      getOptions,
+      getValues,
+      getFacetedUniqueValues: getUniqueValues,
+      getFacetedMinMaxValues: getMinMaxValues,
+      // Prefetch methods will be added below
+      prefetchOptions: async () => {}, // Placeholder, defined below
+      prefetchValues: async () => {},
+      prefetchFacetedUniqueValues: async () => {},
+      _prefetchedOptionsCache: null, // Initialize private cache
+      _prefetchedValuesCache: null,
+      _prefetchedFacetedCache: null,
+    }
+
+    if (strategy === 'client') {
+      // Define prefetch methods with access to the column instance
+      column.prefetchOptions = async (): Promise<void> => {
+        if (!column._prefetchedOptionsCache) {
+          await new Promise((resolve) =>
+            setTimeout(() => {
+              const options = getOptions()
+              column._prefetchedOptionsCache = options
+              // console.log(`Prefetched options for ${columnConfig.id}`)
+              resolve(undefined)
+            }, 0),
+          )
+        }
+      }
+
+      column.prefetchValues = async (): Promise<void> => {
+        if (!column._prefetchedValuesCache) {
+          await new Promise((resolve) =>
+            setTimeout(() => {
+              const values = getValues()
+              column._prefetchedValuesCache = values
+              // console.log(`Prefetched values for ${columnConfig.id}`)
+              resolve(undefined)
+            }, 0),
+          )
+        }
+      }
+
+      column.prefetchFacetedUniqueValues = async (): Promise<void> => {
+        if (!column._prefetchedFacetedCache) {
+          await new Promise((resolve) =>
+            setTimeout(() => {
+              const facetedMap = getUniqueValues()
+              column._prefetchedFacetedCache = facetedMap ?? null
+              // console.log(
+              //   `Prefetched faceted unique values for ${columnConfig.id}`,
+              // )
+              resolve(undefined)
+            }, 0),
+          )
+        }
+      }
+    }
+
+    return column
+  })
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/core/operators.ts b/examples/vite-basic/src/components/data-table-filter/core/operators.ts
new file mode 100644
index 00000000..a64473df
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/core/operators.ts
@@ -0,0 +1,406 @@
+import type {
+  ColumnDataType,
+  FilterDetails,
+  FilterOperatorTarget,
+  FilterOperators,
+  FilterTypeOperatorDetails,
+  FilterValues,
+} from './types'
+
+export const DEFAULT_OPERATORS: Record<
+  ColumnDataType,
+  Record<FilterOperatorTarget, FilterOperators[ColumnDataType]>
+> = {
+  text: {
+    single: 'contains',
+    multiple: 'contains',
+  },
+  number: {
+    single: 'is',
+    multiple: 'is between',
+  },
+  date: {
+    single: 'is',
+    multiple: 'is between',
+  },
+  option: {
+    single: 'is',
+    multiple: 'is any of',
+  },
+  multiOption: {
+    single: 'include',
+    multiple: 'include any of',
+  },
+}
+
+/* Details for all the filter operators for option data type */
+export const optionFilterDetails = {
+  is: {
+    label: 'is',
+    value: 'is',
+    target: 'single',
+    singularOf: 'is any of',
+    relativeOf: 'is not',
+    isNegated: false,
+    negation: 'is not',
+  },
+  'is not': {
+    label: 'is not',
+    value: 'is not',
+    target: 'single',
+    singularOf: 'is none of',
+    relativeOf: 'is',
+    isNegated: true,
+    negationOf: 'is',
+  },
+  'is any of': {
+    label: 'is any of',
+    value: 'is any of',
+    target: 'multiple',
+    pluralOf: 'is',
+    relativeOf: 'is none of',
+    isNegated: false,
+    negation: 'is none of',
+  },
+  'is none of': {
+    label: 'is none of',
+    value: 'is none of',
+    target: 'multiple',
+    pluralOf: 'is not',
+    relativeOf: 'is any of',
+    isNegated: true,
+    negationOf: 'is any of',
+  },
+} as const satisfies FilterDetails<'option'>
+
+/* Details for all the filter operators for multi-option data type */
+export const multiOptionFilterDetails = {
+  include: {
+    label: 'include',
+    value: 'include',
+    target: 'single',
+    singularOf: 'include any of',
+    relativeOf: 'exclude',
+    isNegated: false,
+    negation: 'exclude',
+  },
+  exclude: {
+    label: 'exclude',
+    value: 'exclude',
+    target: 'single',
+    singularOf: 'exclude if any of',
+    relativeOf: 'include',
+    isNegated: true,
+    negationOf: 'include',
+  },
+  'include any of': {
+    label: 'include any of',
+    value: 'include any of',
+    target: 'multiple',
+    pluralOf: 'include',
+    relativeOf: ['exclude if all', 'include all of', 'exclude if any of'],
+    isNegated: false,
+    negation: 'exclude if all',
+  },
+  'exclude if all': {
+    label: 'exclude if all',
+    value: 'exclude if all',
+    target: 'multiple',
+    pluralOf: 'exclude',
+    relativeOf: ['include any of', 'include all of', 'exclude if any of'],
+    isNegated: true,
+    negationOf: 'include any of',
+  },
+  'include all of': {
+    label: 'include all of',
+    value: 'include all of',
+    target: 'multiple',
+    pluralOf: 'include',
+    relativeOf: ['include any of', 'exclude if all', 'exclude if any of'],
+    isNegated: false,
+    negation: 'exclude if any of',
+  },
+  'exclude if any of': {
+    label: 'exclude if any of',
+    value: 'exclude if any of',
+    target: 'multiple',
+    pluralOf: 'exclude',
+    relativeOf: ['include any of', 'exclude if all', 'include all of'],
+    isNegated: true,
+    negationOf: 'include all of',
+  },
+} as const satisfies FilterDetails<'multiOption'>
+
+/* Details for all the filter operators for date data type */
+export const dateFilterDetails = {
+  is: {
+    label: 'is',
+    value: 'is',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: 'is after',
+    isNegated: false,
+    negation: 'is before',
+  },
+  'is not': {
+    label: 'is not',
+    value: 'is not',
+    target: 'single',
+    singularOf: 'is not between',
+    relativeOf: [
+      'is',
+      'is before',
+      'is on or after',
+      'is after',
+      'is on or before',
+    ],
+    isNegated: true,
+    negationOf: 'is',
+  },
+  'is before': {
+    label: 'is before',
+    value: 'is before',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is on or after',
+      'is after',
+      'is on or before',
+    ],
+    isNegated: false,
+    negation: 'is on or after',
+  },
+  'is on or after': {
+    label: 'is on or after',
+    value: 'is on or after',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: ['is', 'is not', 'is before', 'is after', 'is on or before'],
+    isNegated: false,
+    negation: 'is before',
+  },
+  'is after': {
+    label: 'is after',
+    value: 'is after',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is before',
+      'is on or after',
+      'is on or before',
+    ],
+    isNegated: false,
+    negation: 'is on or before',
+  },
+  'is on or before': {
+    label: 'is on or before',
+    value: 'is on or before',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: ['is', 'is not', 'is after', 'is on or after', 'is before'],
+    isNegated: false,
+    negation: 'is after',
+  },
+  'is between': {
+    label: 'is between',
+    value: 'is between',
+    target: 'multiple',
+    pluralOf: 'is',
+    relativeOf: 'is not between',
+    isNegated: false,
+    negation: 'is not between',
+  },
+  'is not between': {
+    label: 'is not between',
+    value: 'is not between',
+    target: 'multiple',
+    pluralOf: 'is not',
+    relativeOf: 'is between',
+    isNegated: true,
+    negationOf: 'is between',
+  },
+} as const satisfies FilterDetails<'date'>
+
+/* Details for all the filter operators for text data type */
+export const textFilterDetails = {
+  contains: {
+    label: 'contains',
+    value: 'contains',
+    target: 'single',
+    relativeOf: 'does not contain',
+    isNegated: false,
+    negation: 'does not contain',
+  },
+  'does not contain': {
+    label: 'does not contain',
+    value: 'does not contain',
+    target: 'single',
+    relativeOf: 'contains',
+    isNegated: true,
+    negationOf: 'contains',
+  },
+} as const satisfies FilterDetails<'text'>
+
+/* Details for all the filter operators for number data type */
+export const numberFilterDetails = {
+  is: {
+    label: 'is',
+    value: 'is',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is not',
+      'is greater than',
+      'is less than or equal to',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is not',
+  },
+  'is not': {
+    label: 'is not',
+    value: 'is not',
+    target: 'single',
+    singularOf: 'is not between',
+    relativeOf: [
+      'is',
+      'is greater than',
+      'is less than or equal to',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: true,
+    negationOf: 'is',
+  },
+  'is greater than': {
+    label: '>',
+    value: 'is greater than',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is less than or equal to',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is less than or equal to',
+  },
+  'is greater than or equal to': {
+    label: '>=',
+    value: 'is greater than or equal to',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is greater than',
+      'is less than or equal to',
+      'is less than',
+    ],
+    isNegated: false,
+    negation: 'is less than or equal to',
+  },
+  'is less than': {
+    label: '<',
+    value: 'is less than',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is greater than',
+      'is less than or equal to',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is greater than',
+  },
+  'is less than or equal to': {
+    label: '<=',
+    value: 'is less than or equal to',
+    target: 'single',
+    singularOf: 'is between',
+    relativeOf: [
+      'is',
+      'is not',
+      'is greater than',
+      'is less than',
+      'is greater than or equal to',
+    ],
+    isNegated: false,
+    negation: 'is greater than or equal to',
+  },
+  'is between': {
+    label: 'is between',
+    value: 'is between',
+    target: 'multiple',
+    pluralOf: 'is',
+    relativeOf: 'is not between',
+    isNegated: false,
+    negation: 'is not between',
+  },
+  'is not between': {
+    label: 'is not between',
+    value: 'is not between',
+    target: 'multiple',
+    pluralOf: 'is not',
+    relativeOf: 'is between',
+    isNegated: true,
+    negationOf: 'is between',
+  },
+} as const satisfies FilterDetails<'number'>
+
+export const filterTypeOperatorDetails: FilterTypeOperatorDetails = {
+  text: textFilterDetails,
+  number: numberFilterDetails,
+  date: dateFilterDetails,
+  option: optionFilterDetails,
+  multiOption: multiOptionFilterDetails,
+}
+
+/*
+ *
+ * Determines the new operator for a filter based on the current operator, old and new filter values.
+ *
+ * This handles cases where the filter values have transitioned from a single value to multiple values (or vice versa),
+ * and the current operator needs to be transitioned to its plural form (or singular form).
+ *
+ * For example, if the current operator is 'is', and the new filter values have a length of 2, the
+ * new operator would be 'is any of'.
+ *
+ */
+export function determineNewOperator<TType extends ColumnDataType>(
+  type: TType,
+  oldVals: FilterValues<TType>,
+  nextVals: FilterValues<TType>,
+  currentOperator: FilterOperators[TType],
+): FilterOperators[TType] {
+  const a =
+    Array.isArray(oldVals) && Array.isArray(oldVals[0])
+      ? oldVals[0].length
+      : oldVals.length
+  const b =
+    Array.isArray(nextVals) && Array.isArray(nextVals[0])
+      ? nextVals[0].length
+      : nextVals.length
+
+  // If filter size has not transitioned from single to multiple (or vice versa)
+  // or is unchanged, return the current operator.
+  if (a === b || (a >= 2 && b >= 2) || (a <= 1 && b <= 1))
+    return currentOperator
+
+  const opDetails = filterTypeOperatorDetails[type][currentOperator]
+
+  // Handle transition from single to multiple filter values.
+  if (a < b && b >= 2) return opDetails.singularOf ?? currentOperator
+  // Handle transition from multiple to single filter values.
+  if (a > b && b <= 1) return opDetails.pluralOf ?? currentOperator
+  return currentOperator
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/core/types.ts b/examples/vite-basic/src/components/data-table-filter/core/types.ts
new file mode 100644
index 00000000..f497426b
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/core/types.ts
@@ -0,0 +1,329 @@
+import type { LucideIcon } from 'lucide-react'
+
+/*
+ * # GENERAL NOTES:
+ *
+ * ## GENERICS:
+ *
+ * TData is the shape of a single row in your data table.
+ * TVal is the shape of the underlying value for a column.
+ * TType is the type (kind) of the column.
+ *
+ */
+
+export type ElementType<T> = T extends (infer U)[] ? U : T
+
+export type Nullable<T> = T | null | undefined
+
+/*
+ * The model of a column option.
+ * Used for representing underlying column values of type `option` or `multiOption`.
+ */
+export interface ColumnOption {
+  /* The label to display for the option. */
+  label: string
+  /* The internal value of the option. */
+  value: string
+  /* An optional icon to display next to the label. */
+  icon?: React.ReactElement | React.ElementType
+}
+
+/*
+ * Represents the data type (kind) of a column.
+ */
+export type ColumnDataType =
+  /* The column value is a string that should be searchable. */
+  | 'text'
+  | 'number'
+  | 'date'
+  /* The column value can be a single value from a list of options. */
+  | 'option'
+  /* The column value can be zero or more values from a list of options. */
+  | 'multiOption'
+
+/*
+ * Represents the data type (kind) of option and multi-option columns.
+ */
+export type OptionBasedColumnDataType = Extract<
+  ColumnDataType,
+  'option' | 'multiOption'
+>
+
+/*
+ * Maps a ColumnDataType to it's primitive type (i.e. string, number, etc.).
+ */
+export type ColumnDataNativeMap = {
+  text: string
+  number: number
+  date: Date
+  option: string
+  multiOption: string[]
+}
+
+/*
+ * Represents the value of a column filter.
+ * Contigent on the filtered column's data type.
+ */
+export type FilterValues<T extends ColumnDataType> = Array<
+  ElementType<ColumnDataNativeMap[T]>
+>
+
+/*
+ * An accessor function for a column's data.
+ * Uses the original row data as an argument.
+ */
+export type TAccessorFn<TData, TVal = unknown> = (data: TData) => TVal
+
+/*
+ * Used by `option` and `multiOption` columns.
+ * Transforms the underlying column value into a valid ColumnOption.
+ */
+export type TTransformOptionFn<TVal = unknown> = (
+  value: ElementType<NonNullable<TVal>>,
+) => ColumnOption
+
+/*
+ * Used by `option` and `multiOption` columns.
+ * A custom ordering function when sorting a column's options.
+ */
+export type TOrderFn<TVal = unknown> = (
+  a: ElementType<NonNullable<TVal>>,
+  b: ElementType<NonNullable<TVal>>,
+) => number
+
+/*
+ * The configuration for a column.
+ */
+export type ColumnConfig<
+  TData,
+  TType extends ColumnDataType = any,
+  TVal = unknown,
+  TId extends string = string,
+> = {
+  id: TId
+  accessor: TAccessorFn<TData, TVal>
+  displayName: string
+  icon: LucideIcon
+  type: TType
+  options?: TType extends OptionBasedColumnDataType ? ColumnOption[] : never
+  facetedOptions?: TType extends OptionBasedColumnDataType
+    ? Map<string, number>
+    : never
+  min?: TType extends 'number' ? number : never
+  max?: TType extends 'number' ? number : never
+  transformOptionFn?: TType extends OptionBasedColumnDataType
+    ? TTransformOptionFn<TVal>
+    : never
+  orderFn?: TType extends OptionBasedColumnDataType ? TOrderFn<TVal> : never
+}
+
+export type OptionColumnId<T> = T extends ColumnConfig<
+  infer TData,
+  'option' | 'multiOption',
+  infer TVal,
+  infer TId
+>
+  ? TId
+  : never
+
+export type OptionColumnIds<
+  T extends ReadonlyArray<ColumnConfig<any, any, any, any>>,
+> = {
+  [K in keyof T]: OptionColumnId<T[K]>
+}[number]
+
+/*
+ * Describes a helper function for creating column configurations.
+ */
+export type ColumnConfigHelper<TData> = {
+  accessor: <
+    TAccessor extends TAccessorFn<TData>,
+    TType extends ColumnDataType,
+    TVal extends ReturnType<TAccessor>,
+  >(
+    accessor: TAccessor,
+    config?: Omit<ColumnConfig<TData, TType, TVal>, 'accessor'>,
+  ) => ColumnConfig<TData, TType, unknown>
+}
+
+export type DataTableFilterConfig<TData> = {
+  data: TData[]
+  columns: ColumnConfig<TData>[]
+}
+
+export type ColumnProperties<TData, TVal> = {
+  getOptions: () => ColumnOption[]
+  getValues: () => ElementType<NonNullable<TVal>>[]
+  getFacetedUniqueValues: () => Map<string, number> | undefined
+  getFacetedMinMaxValues: () => number[]
+  prefetchOptions: () => Promise<void> // Prefetch options
+  prefetchValues: () => Promise<void> // Prefetch values
+  prefetchFacetedUniqueValues: () => Promise<void> // Prefetch faceted unique values
+}
+
+export type ColumnPrivateProperties<TData, TVal> = {
+  _prefetchedOptionsCache: ColumnOption[] | null
+  _prefetchedValuesCache: ElementType<NonNullable<TVal>>[] | null
+  _prefetchedFacetedCache: Map<string, number> | null
+}
+
+export type Column<
+  TData,
+  TType extends ColumnDataType = any,
+  TVal = unknown,
+> = ColumnConfig<TData, TType, TVal> &
+  ColumnProperties<TData, TVal> &
+  ColumnPrivateProperties<TData, TVal>
+
+/*
+ * Describes the available actions on column filters.
+ * Includes both column-specific and global actions, ultimately acting on the column filters.
+ */
+export interface DataTableFilterActions {
+  addFilterValue: <TData, TType extends OptionBasedColumnDataType>(
+    column: Column<TData, TType>,
+    values: FilterModel<TType>['values'],
+  ) => void
+
+  removeFilterValue: <TData, TType extends OptionBasedColumnDataType>(
+    column: Column<TData, TType>,
+    value: FilterModel<TType>['values'],
+  ) => void
+
+  setFilterValue: <TData, TType extends ColumnDataType>(
+    column: Column<TData, TType>,
+    values: FilterModel<TType>['values'],
+  ) => void
+
+  setFilterOperator: <TType extends ColumnDataType>(
+    columnId: string,
+    operator: FilterModel<TType>['operator'],
+  ) => void
+
+  removeFilter: (columnId: string) => void
+
+  removeAllFilters: () => void
+}
+
+export type FilterStrategy = 'client' | 'server'
+
+/* Operators for text data */
+export type TextFilterOperator = 'contains' | 'does not contain'
+
+/* Operators for number data */
+export type NumberFilterOperator =
+  | 'is'
+  | 'is not'
+  | 'is less than'
+  | 'is greater than or equal to'
+  | 'is greater than'
+  | 'is less than or equal to'
+  | 'is between'
+  | 'is not between'
+
+/* Operators for date data */
+export type DateFilterOperator =
+  | 'is'
+  | 'is not'
+  | 'is before'
+  | 'is on or after'
+  | 'is after'
+  | 'is on or before'
+  | 'is between'
+  | 'is not between'
+
+/* Operators for option data */
+export type OptionFilterOperator = 'is' | 'is not' | 'is any of' | 'is none of'
+
+/* Operators for multi-option data */
+export type MultiOptionFilterOperator =
+  | 'include'
+  | 'exclude'
+  | 'include any of'
+  | 'include all of'
+  | 'exclude if any of'
+  | 'exclude if all'
+
+/* Maps filter operators to their respective data types */
+export type FilterOperators = {
+  text: TextFilterOperator
+  number: NumberFilterOperator
+  date: DateFilterOperator
+  option: OptionFilterOperator
+  multiOption: MultiOptionFilterOperator
+}
+
+/*
+ *
+ * FilterValue is a type that represents a filter value for a specific column.
+ *
+ * It consists of:
+ * - Operator: The operator to be used for the filter.
+ * - Values: An array of values to be used for the filter.
+ *
+ */
+export type FilterModel<TType extends ColumnDataType = any> = {
+  columnId: string
+  operator: FilterOperators[TType]
+  values: FilterValues<TType>
+}
+
+export type FiltersState = Array<FilterModel>
+
+/*
+ * FilterDetails is a type that represents the details of all the filter operators for a specific column data type.
+ */
+export type FilterDetails<T extends ColumnDataType> = {
+  [key in FilterOperators[T]]: FilterOperatorDetails<key, T>
+}
+
+export type FilterOperatorTarget = 'single' | 'multiple'
+
+export type FilterOperatorDetailsBase<
+  OperatorValue,
+  T extends ColumnDataType,
+> = {
+  /* The operator value. Usually the string representation of the operator. */
+  value: OperatorValue
+  /* The label for the operator, to show in the UI. */
+  label: string
+  /* How much data the operator applies to. */
+  target: FilterOperatorTarget
+  /* The plural form of the operator, if applicable. */
+  singularOf?: FilterOperators[T]
+  /* The singular form of the operator, if applicable. */
+  pluralOf?: FilterOperators[T]
+  /* All related operators. Normally, all the operators which share the same target. */
+  relativeOf: FilterOperators[T] | Array<FilterOperators[T]>
+  /* Whether the operator is negated. */
+  isNegated: boolean
+  /* If the operator is not negated, this provides the negated equivalent. */
+  negation?: FilterOperators[T]
+  /* If the operator is negated, this provides the positive equivalent. */
+  negationOf?: FilterOperators[T]
+}
+
+/*
+ *
+ * FilterOperatorDetails is a type that provides details about a filter operator for a specific column data type.
+ * It extends FilterOperatorDetailsBase with additional logic and contraints on the defined properties.
+ *
+ */
+export type FilterOperatorDetails<
+  OperatorValue,
+  T extends ColumnDataType,
+> = FilterOperatorDetailsBase<OperatorValue, T> &
+  (
+    | { singularOf?: never; pluralOf?: never }
+    | { target: 'single'; singularOf: FilterOperators[T]; pluralOf?: never }
+    | { target: 'multiple'; singularOf?: never; pluralOf: FilterOperators[T] }
+  ) &
+  (
+    | { isNegated: false; negation: FilterOperators[T]; negationOf?: never }
+    | { isNegated: true; negation?: never; negationOf: FilterOperators[T] }
+  )
+
+/* Maps column data types to their respective filter operator details */
+export type FilterTypeOperatorDetails = {
+  [key in ColumnDataType]: FilterDetails<key>
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/hooks/use-data-table-filters.tsx b/examples/vite-basic/src/components/data-table-filter/hooks/use-data-table-filters.tsx
new file mode 100644
index 00000000..eca7f557
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/hooks/use-data-table-filters.tsx
@@ -0,0 +1,308 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { createColumns } from '../core/filters'
+import { DEFAULT_OPERATORS, determineNewOperator } from '../core/operators'
+import type {
+  ColumnConfig,
+  ColumnDataType,
+  ColumnOption,
+  DataTableFilterActions,
+  FilterModel,
+  FilterStrategy,
+  FiltersState,
+  OptionBasedColumnDataType,
+  OptionColumnIds,
+} from '../core/types'
+import { uniq } from '../lib/array'
+import { addUniq, removeUniq } from '../lib/array'
+import {
+  createNumberFilterValue,
+  isColumnOptionArray,
+  isColumnOptionMap,
+} from '../lib/helpers'
+
+export interface DataTableFiltersOptions<
+  TData,
+  TColumns extends ReadonlyArray<ColumnConfig<TData, any, any, any>>,
+  TStrategy extends FilterStrategy,
+> {
+  strategy: TStrategy
+  data: TData[]
+  columnsConfig: TColumns
+  controlledState?:
+    | [FiltersState, React.Dispatch<React.SetStateAction<FiltersState>>]
+    | undefined
+  options?: Partial<
+    Record<
+      OptionColumnIds<TColumns>,
+      | ColumnOption[]
+      | [ColumnOption[] | undefined, Map<string, number> | undefined]
+    >
+  >
+}
+
+export function useDataTableFilters<
+  TData,
+  TColumns extends ReadonlyArray<ColumnConfig<TData, any, any, any>>,
+  TStrategy extends FilterStrategy,
+>({
+  strategy,
+  data,
+  columnsConfig,
+  controlledState,
+  options,
+}: DataTableFiltersOptions<TData, TColumns, TStrategy>) {
+  const [internalFilters, setInternalFilters] = useState<FiltersState>([])
+  const [filters, setFilters] = controlledState ?? [
+    internalFilters,
+    setInternalFilters,
+  ]
+
+  // Convert ColumnConfig to Column, applying options and faceted options if provided
+  const columns = useMemo(() => {
+    const enhancedConfigs = columnsConfig.map((config) => {
+      if (
+        options &&
+        (config.type === 'option' || config.type === 'multiOption')
+      ) {
+        const optionsInput = options[config.id as OptionColumnIds<TColumns>]
+
+        if (!optionsInput) return config
+
+        if (isColumnOptionArray(optionsInput)) {
+          return { ...config, options: optionsInput }
+        }
+
+        if (
+          isColumnOptionArray(optionsInput[0]) &&
+          isColumnOptionMap(optionsInput[1])
+        ) {
+          return {
+            ...config,
+            options: optionsInput[0],
+            facetedOptions: optionsInput[1],
+          }
+        }
+      }
+
+      return config
+    })
+    return createColumns(data, enhancedConfigs, strategy)
+  }, [data, columnsConfig, options, strategy])
+
+  const actions: DataTableFilterActions = useMemo(
+    () => ({
+      addFilterValue<TData, TType extends OptionBasedColumnDataType>(
+        column: ColumnConfig<TData, TType>,
+        values: FilterModel<TType>['values'],
+      ) {
+        if (column.type === 'option') {
+          setFilters((prev) => {
+            const filter = prev.find((f) => f.columnId === column.id)
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              return [
+                ...prev,
+                {
+                  columnId: column.id,
+                  operator:
+                    values.length > 1
+                      ? DEFAULT_OPERATORS[column.type].multiple
+                      : DEFAULT_OPERATORS[column.type].single,
+                  values,
+                },
+              ]
+            }
+            const oldValues = filter.values
+            const newValues = addUniq(filter.values, values)
+            const newOperator = determineNewOperator(
+              'option',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+          return
+        }
+        if (column.type === 'multiOption') {
+          setFilters((prev) => {
+            const filter = prev.find((f) => f.columnId === column.id)
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              return [
+                ...prev,
+                {
+                  columnId: column.id,
+                  operator:
+                    values.length > 1
+                      ? DEFAULT_OPERATORS[column.type].multiple
+                      : DEFAULT_OPERATORS[column.type].single,
+                  values,
+                },
+              ]
+            }
+            const oldValues = filter.values
+            const newValues = addUniq(filter.values, values)
+            const newOperator = determineNewOperator(
+              'multiOption',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+            if (newValues.length === 0) {
+              return prev.filter((f) => f.columnId !== column.id)
+            }
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+          return
+        }
+        throw new Error(
+          '[data-table-filter] addFilterValue() is only supported for option columns',
+        )
+      },
+      removeFilterValue<TData, TType extends OptionBasedColumnDataType>(
+        column: ColumnConfig<TData, TType>,
+        value: FilterModel<TType>['values'],
+      ) {
+        if (column.type === 'option') {
+          setFilters((prev) => {
+            const filter = prev.find((f) => f.columnId === column.id)
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              return [...prev]
+            }
+            const newValues = removeUniq(filter.values, value)
+            const oldValues = filter.values
+            const newOperator = determineNewOperator(
+              'option',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+            if (newValues.length === 0) {
+              return prev.filter((f) => f.columnId !== column.id)
+            }
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+          return
+        }
+        if (column.type === 'multiOption') {
+          setFilters((prev) => {
+            const filter = prev.find((f) => f.columnId === column.id)
+            const isColumnFiltered = filter && filter.values.length > 0
+            if (!isColumnFiltered) {
+              return [...prev]
+            }
+            const newValues = removeUniq(filter.values, value)
+            const oldValues = filter.values
+            const newOperator = determineNewOperator(
+              'multiOption',
+              oldValues,
+              newValues,
+              filter.operator,
+            )
+            if (newValues.length === 0) {
+              return prev.filter((f) => f.columnId !== column.id)
+            }
+            return prev.map((f) =>
+              f.columnId === column.id
+                ? {
+                    columnId: column.id,
+                    operator: newOperator,
+                    values: newValues,
+                  }
+                : f,
+            )
+          })
+          return
+        }
+        throw new Error(
+          '[data-table-filter] removeFilterValue() is only supported for option columns',
+        )
+      },
+      setFilterValue<TData, TType extends ColumnDataType>(
+        column: ColumnConfig<TData, TType>,
+        values: FilterModel<TType>['values'],
+      ) {
+        setFilters((prev) => {
+          const filter = prev.find((f) => f.columnId === column.id)
+          const isColumnFiltered = filter && filter.values.length > 0
+          const newValues =
+            column.type === 'number'
+              ? createNumberFilterValue(values as number[])
+              : uniq(values)
+          if (newValues.length === 0) return prev
+          if (!isColumnFiltered) {
+            return [
+              ...prev,
+              {
+                columnId: column.id,
+                operator:
+                  values.length > 1
+                    ? DEFAULT_OPERATORS[column.type].multiple
+                    : DEFAULT_OPERATORS[column.type].single,
+                values: newValues,
+              },
+            ]
+          }
+          const oldValues = filter.values
+          const newOperator = determineNewOperator(
+            column.type,
+            oldValues,
+            newValues,
+            filter.operator,
+          )
+          const newFilter = {
+            columnId: column.id,
+            operator: newOperator,
+            values: newValues as any,
+          } satisfies FilterModel<TType>
+          return prev.map((f) => (f.columnId === column.id ? newFilter : f))
+        })
+      },
+      setFilterOperator<TType extends ColumnDataType>(
+        columnId: string,
+        operator: FilterModel<TType>['operator'],
+      ) {
+        setFilters((prev) =>
+          prev.map((f) => (f.columnId === columnId ? { ...f, operator } : f)),
+        )
+      },
+      removeFilter(columnId: string) {
+        setFilters((prev) => prev.filter((f) => f.columnId !== columnId))
+      },
+      removeAllFilters() {
+        setFilters([])
+      },
+    }),
+    [setFilters],
+  )
+
+  return { columns, filters, actions, strategy } // columns is Column<TData>[]
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/index.tsx b/examples/vite-basic/src/components/data-table-filter/index.tsx
new file mode 100644
index 00000000..38f2e6c3
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/index.tsx
@@ -0,0 +1,2 @@
+export { useDataTableFilters } from './hooks/use-data-table-filters'
+export { DataTableFilter } from './components/data-table-filter'
diff --git a/examples/vite-basic/src/components/data-table-filter/integrations/tanstack-table/filter-fns.ts b/examples/vite-basic/src/components/data-table-filter/integrations/tanstack-table/filter-fns.ts
new file mode 100644
index 00000000..989cfc94
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/integrations/tanstack-table/filter-fns.ts
@@ -0,0 +1,33 @@
+import type { Row } from '@tanstack/react-table'
+import type { FilterModel } from '../../core/types'
+import * as f from '../../lib/filter-fns'
+
+export function dateFilterFn<TData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: FilterModel<'date'>,
+): boolean {
+  const value = row.getValue<Date>(columnId)
+
+  return f.dateFilterFn(value, filterValue)
+}
+
+export function textFilterFn<TData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: FilterModel<'text'>,
+): boolean {
+  const value = row.getValue<string>(columnId) ?? ''
+
+  return f.textFilterFn(value, filterValue)
+}
+
+export function numberFilterFn<TData>(
+  row: Row<TData>,
+  columnId: string,
+  filterValue: FilterModel<'number'>,
+): boolean {
+  const value = row.getValue<number>(columnId)
+
+  return f.numberFilterFn(value, filterValue)
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/integrations/tanstack-table/index.tsx b/examples/vite-basic/src/components/data-table-filter/integrations/tanstack-table/index.tsx
new file mode 100644
index 00000000..5c34d7c3
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/integrations/tanstack-table/index.tsx
@@ -0,0 +1,109 @@
+import type { ColumnDef, ColumnFiltersState } from '@tanstack/react-table'
+import type { Column, FilterModel, FiltersState } from '../../core/types'
+import { multiOptionFilterFn, optionFilterFn } from '../../lib/filter-fns'
+import {
+  isColumnOption,
+  isColumnOptionArray,
+  isStringArray,
+} from '../../lib/helpers'
+import { dateFilterFn, numberFilterFn, textFilterFn } from './filter-fns'
+
+interface CreateTSTColumns<TData> {
+  columns: ColumnDef<TData, any>[]
+  configs: Column<TData>[]
+}
+
+export function createTSTColumns<TData>({
+  columns,
+  configs,
+}: CreateTSTColumns<TData>) {
+  const _cols: ColumnDef<TData>[] = []
+
+  for (const col of columns) {
+    // Get the column filter config for this column
+    const config = configs.find((c) => c.id === col.id)
+
+    // If the column is not filterable or doesn't have a filter config, skip it
+    if (!col.enableColumnFilter || !config) {
+      _cols.push(col)
+      continue
+    }
+
+    if (config.type === 'text') {
+      col.filterFn = textFilterFn
+      _cols.push(col)
+      continue
+    }
+
+    if (config.type === 'number') {
+      col.filterFn = numberFilterFn
+      _cols.push(col)
+      continue
+    }
+
+    if (config.type === 'date') {
+      col.filterFn = dateFilterFn
+      _cols.push(col)
+      continue
+    }
+
+    if (config.type === 'option') {
+      col.filterFn = (row, columnId, filterValue: FilterModel<'option'>) => {
+        const value = row.getValue<unknown>(columnId)
+
+        if (!value) return false
+
+        if (typeof value === 'string') {
+          return optionFilterFn(value, filterValue)
+        }
+
+        if (isColumnOption(value)) {
+          return optionFilterFn(value.value, filterValue)
+        }
+
+        const sanitizedValue = config.transformOptionFn!(value as never)
+        return optionFilterFn(sanitizedValue.value, filterValue)
+      }
+    }
+
+    if (config.type === 'multiOption') {
+      col.filterFn = (
+        row,
+        columnId,
+        filterValue: FilterModel<'multiOption'>,
+      ) => {
+        const value = row.getValue(columnId)
+
+        if (!value) return false
+
+        if (isStringArray(value)) {
+          return multiOptionFilterFn(value, filterValue)
+        }
+
+        if (isColumnOptionArray(value)) {
+          return multiOptionFilterFn(
+            value.map((v) => v.value),
+            filterValue,
+          )
+        }
+
+        const sanitizedValue = (value as never[]).map((v) =>
+          config.transformOptionFn!(v),
+        )
+
+        return multiOptionFilterFn(
+          sanitizedValue.map((v) => v.value),
+          filterValue,
+        )
+      }
+    }
+
+    _cols.push(col)
+  }
+
+  return _cols
+}
+
+export function createTSTFilters(filters: FiltersState): ColumnFiltersState {
+  return filters.map((filter) => ({ id: filter.columnId, value: filter }))
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/lib/array.ts b/examples/vite-basic/src/components/data-table-filter/lib/array.ts
new file mode 100644
index 00000000..0168a7cd
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/lib/array.ts
@@ -0,0 +1,144 @@
+export function intersection<T>(a: T[], b: T[]): T[] {
+  return a.filter((x) => b.includes(x))
+}
+
+/**
+ * Computes a stable hash string for any value using deep inspection.
+ * This function recursively builds a string for primitives, arrays, and objects.
+ * It uses a cache (WeakMap) to avoid rehashing the same object twice, which is
+ * particularly beneficial if an object appears in multiple places.
+ */
+function deepHash(value: any, cache = new WeakMap<object, string>()): string {
+  // Handle primitives and null/undefined.
+  if (value === null) return 'null'
+  if (value === undefined) return 'undefined'
+  const type = typeof value
+  if (type === 'number' || type === 'boolean' || type === 'string') {
+    return `${type}:${value.toString()}`
+  }
+  if (type === 'function') {
+    // Note: using toString for functions.
+    return `function:${value.toString()}`
+  }
+
+  // For objects and arrays, use caching to avoid repeated work.
+  if (type === 'object') {
+    // If we’ve seen this object before, return the cached hash.
+    if (cache.has(value)) {
+      return cache.get(value)!
+    }
+    let hash: string
+    if (Array.isArray(value)) {
+      // Compute hash for each element in order.
+      hash = `array:[${value.map((v) => deepHash(v, cache)).join(',')}]`
+    } else {
+      // For objects, sort keys to ensure the representation is stable.
+      const keys = Object.keys(value).sort()
+      const props = keys
+        .map((k) => `${k}:${deepHash(value[k], cache)}`)
+        .join(',')
+      hash = `object:{${props}}`
+    }
+    cache.set(value, hash)
+    return hash
+  }
+
+  // Fallback if no case matched.
+  return `${type}:${value.toString()}`
+}
+
+/**
+ * Performs deep equality check for any two values.
+ * This recursively checks primitives, arrays, and plain objects.
+ */
+function deepEqual(a: any, b: any): boolean {
+  // Check strict equality first.
+  if (a === b) return true
+  // If types differ, they’re not equal.
+  if (typeof a !== typeof b) return false
+  if (a === null || b === null || a === undefined || b === undefined)
+    return false
+
+  // Check arrays.
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) return false
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i])) return false
+    }
+    return true
+  }
+
+  // Check objects.
+  if (typeof a === 'object') {
+    if (typeof b !== 'object') return false
+    const aKeys = Object.keys(a).sort()
+    const bKeys = Object.keys(b).sort()
+    if (aKeys.length !== bKeys.length) return false
+    for (let i = 0; i < aKeys.length; i++) {
+      if (aKeys[i] !== bKeys[i]) return false
+      if (!deepEqual(a[aKeys[i]], b[bKeys[i]])) return false
+    }
+    return true
+  }
+
+  // For any other types (should be primitives by now), use strict equality.
+  return false
+}
+
+/**
+ * Returns a new array containing only the unique values from the input array.
+ * Uniqueness is determined by deep equality.
+ *
+ * @param arr - The array of values to be filtered.
+ * @returns A new array with duplicates removed.
+ */
+export function uniq<T>(arr: T[]): T[] {
+  // Use a Map where key is the deep hash and value is an array of items sharing the same hash.
+  const seen = new Map<string, T[]>()
+  const result: T[] = []
+
+  for (const item of arr) {
+    const hash = deepHash(item)
+    if (seen.has(hash)) {
+      // There is a potential duplicate; check the stored items with the same hash.
+      const itemsWithHash = seen.get(hash)!
+      let duplicateFound = false
+      for (const existing of itemsWithHash) {
+        if (deepEqual(existing, item)) {
+          duplicateFound = true
+          break
+        }
+      }
+      if (!duplicateFound) {
+        itemsWithHash.push(item)
+        result.push(item)
+      }
+    } else {
+      // First time this hash appears.
+      seen.set(hash, [item])
+      result.push(item)
+    }
+  }
+
+  return result
+}
+
+export function take<T>(a: T[], n: number): T[] {
+  return a.slice(0, n)
+}
+
+export function flatten<T>(a: T[][]): T[] {
+  return a.flat()
+}
+
+export function addUniq<T>(arr: T[], values: T[]): T[] {
+  return uniq([...arr, ...values])
+}
+
+export function removeUniq<T>(arr: T[], values: T[]): T[] {
+  return arr.filter((v) => !values.includes(v))
+}
+
+export function isAnyOf<T>(value: T, values: T[]): boolean {
+  return values.includes(value)
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/lib/filter-fns.ts b/examples/vite-basic/src/components/data-table-filter/lib/filter-fns.ts
new file mode 100644
index 00000000..19ed572d
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/lib/filter-fns.ts
@@ -0,0 +1,175 @@
+import {
+  endOfDay,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isWithinInterval,
+  startOfDay,
+} from 'date-fns'
+import { dateFilterDetails } from '../core/operators'
+import type { FilterModel } from '../core/types'
+import { intersection } from './array'
+
+export function optionFilterFn<TData>(
+  inputData: string,
+  filterValue: FilterModel<'option'>,
+) {
+  if (!inputData) return false
+  if (filterValue.values.length === 0) return true
+
+  const value = inputData.toString().toLowerCase()
+
+  const found = !!filterValue.values.find((v) => v.toLowerCase() === value)
+
+  switch (filterValue.operator) {
+    case 'is':
+    case 'is any of':
+      return found
+    case 'is not':
+    case 'is none of':
+      return !found
+  }
+}
+
+export function multiOptionFilterFn(
+  inputData: string[],
+  filterValue: FilterModel<'multiOption'>,
+) {
+  if (!inputData) return false
+
+  if (
+    filterValue.values.length === 0 ||
+    !filterValue.values[0] ||
+    filterValue.values[0].length === 0
+  )
+    return true
+
+  const values = inputData
+  const filterValues = filterValue.values
+
+  switch (filterValue.operator) {
+    case 'include':
+    case 'include any of':
+      return intersection(values, filterValues).length > 0
+    case 'exclude':
+      return intersection(values, filterValues).length === 0
+    case 'exclude if any of':
+      return !(intersection(values, filterValues).length > 0)
+    case 'include all of':
+      return intersection(values, filterValues).length === filterValues.length
+    case 'exclude if all':
+      return !(
+        intersection(values, filterValues).length === filterValues.length
+      )
+  }
+}
+
+export function dateFilterFn<TData>(
+  inputData: Date,
+  filterValue: FilterModel<'date'>,
+) {
+  if (!filterValue || filterValue.values.length === 0) return true
+
+  if (
+    dateFilterDetails[filterValue.operator].target === 'single' &&
+    filterValue.values.length > 1
+  )
+    throw new Error('Singular operators require at most one filter value')
+
+  if (
+    filterValue.operator in ['is between', 'is not between'] &&
+    filterValue.values.length !== 2
+  )
+    throw new Error('Plural operators require two filter values')
+
+  const filterVals = filterValue.values
+  const d1 = filterVals[0]
+  const d2 = filterVals[1]
+
+  const value = inputData
+
+  switch (filterValue.operator) {
+    case 'is':
+      return isSameDay(value, d1)
+    case 'is not':
+      return !isSameDay(value, d1)
+    case 'is before':
+      return isBefore(value, startOfDay(d1))
+    case 'is on or after':
+      return isSameDay(value, d1) || isAfter(value, startOfDay(d1))
+    case 'is after':
+      return isAfter(value, startOfDay(d1))
+    case 'is on or before':
+      return isSameDay(value, d1) || isBefore(value, startOfDay(d1))
+    case 'is between':
+      return isWithinInterval(value, {
+        start: startOfDay(d1),
+        end: endOfDay(d2),
+      })
+    case 'is not between':
+      return !isWithinInterval(value, {
+        start: startOfDay(filterValue.values[0]),
+        end: endOfDay(filterValue.values[1]),
+      })
+  }
+}
+
+export function textFilterFn<TData>(
+  inputData: string,
+  filterValue: FilterModel<'text'>,
+) {
+  if (!filterValue || filterValue.values.length === 0) return true
+
+  const value = inputData.toLowerCase().trim()
+  const filterStr = filterValue.values[0].toLowerCase().trim()
+
+  if (filterStr === '') return true
+
+  const found = value.includes(filterStr)
+
+  switch (filterValue.operator) {
+    case 'contains':
+      return found
+    case 'does not contain':
+      return !found
+  }
+}
+
+export function numberFilterFn<TData>(
+  inputData: number,
+  filterValue: FilterModel<'number'>,
+) {
+  if (!filterValue || !filterValue.values || filterValue.values.length === 0) {
+    return true
+  }
+
+  const value = inputData
+  const filterVal = filterValue.values[0]
+
+  switch (filterValue.operator) {
+    case 'is':
+      return value === filterVal
+    case 'is not':
+      return value !== filterVal
+    case 'is greater than':
+      return value > filterVal
+    case 'is greater than or equal to':
+      return value >= filterVal
+    case 'is less than':
+      return value < filterVal
+    case 'is less than or equal to':
+      return value <= filterVal
+    case 'is between': {
+      const lowerBound = filterValue.values[0]
+      const upperBound = filterValue.values[1]
+      return value >= lowerBound && value <= upperBound
+    }
+    case 'is not between': {
+      const lowerBound = filterValue.values[0]
+      const upperBound = filterValue.values[1]
+      return value < lowerBound || value > upperBound
+    }
+    default:
+      return true
+  }
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/lib/helpers.ts b/examples/vite-basic/src/components/data-table-filter/lib/helpers.ts
new file mode 100644
index 00000000..bd465bba
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/lib/helpers.ts
@@ -0,0 +1,64 @@
+import type { Column, ColumnOption } from '../core/types'
+
+export function getColumn<TData>(columns: Column<TData>[], id: string) {
+  const column = columns.find((c) => c.id === id)
+
+  if (!column) {
+    throw new Error(`Column with id ${id} not found`)
+  }
+
+  return column
+}
+
+export function createNumberFilterValue(
+  values: number[] | undefined,
+): number[] {
+  if (!values || values.length === 0) return []
+  if (values.length === 1) return [values[0]]
+  if (values.length === 2) return createNumberRange(values)
+  return [values[0], values[1]]
+}
+
+export function createNumberRange(values: number[] | undefined) {
+  let a = 0
+  let b = 0
+
+  if (!values || values.length === 0) return [a, b]
+  if (values.length === 1) {
+    a = values[0]
+  } else {
+    a = values[0]
+    b = values[1]
+  }
+
+  const [min, max] = a < b ? [a, b] : [b, a]
+
+  return [min, max]
+}
+
+export function isColumnOption(value: unknown): value is ColumnOption {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'value' in value &&
+    'label' in value
+  )
+}
+
+export function isColumnOptionArray(value: unknown): value is ColumnOption[] {
+  return Array.isArray(value) && value.every(isColumnOption)
+}
+
+export function isStringArray(value: unknown): value is string[] {
+  return Array.isArray(value) && value.every((v) => typeof v === 'string')
+}
+
+export function isColumnOptionMap(
+  value: unknown,
+): value is Map<string, number> {
+  return (
+    value instanceof Map &&
+    value.keys().every((k) => typeof k === 'string') &&
+    value.values().every((v) => typeof v === 'number')
+  )
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/lib/memo.ts b/examples/vite-basic/src/components/data-table-filter/lib/memo.ts
new file mode 100644
index 00000000..528c371f
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/lib/memo.ts
@@ -0,0 +1,35 @@
+export function memo<TDeps extends readonly any[], TResult>(
+  getDeps: () => TDeps,
+  compute: (deps: TDeps) => TResult,
+  options: { key: string },
+): () => TResult {
+  let prevDeps: TDeps | undefined
+  let cachedResult: TResult | undefined
+
+  return () => {
+    // console.log(`[memo] Calling memoized function: ${options.key}`)
+
+    const deps = getDeps()
+
+    // If no previous deps or deps have changed, recompute
+    if (!prevDeps || !shallowEqual(prevDeps, deps)) {
+      // console.log(`[memo] Cache MISS - ${options.key}`)
+      cachedResult = compute(deps)
+      prevDeps = deps
+    } else {
+      // console.log(`[memo] Cache HIT - ${options.key}`)
+    }
+
+    return cachedResult!
+  }
+}
+
+function shallowEqual<T>(arr1: readonly T[], arr2: readonly T[]): boolean {
+  if (arr1 === arr2) return true
+  if (arr1.length !== arr2.length) return false
+
+  for (let i = 0; i < arr1.length; i++) {
+    if (arr1[i] !== arr2[i]) return false
+  }
+  return true
+}
diff --git a/examples/vite-basic/src/components/data-table-filter/ui/debounced-input.tsx b/examples/vite-basic/src/components/data-table-filter/ui/debounced-input.tsx
new file mode 100644
index 00000000..4abacd1f
--- /dev/null
+++ b/examples/vite-basic/src/components/data-table-filter/ui/debounced-input.tsx
@@ -0,0 +1,47 @@
+import { Input } from '@/components/ui/input'
+import { useCallback, useEffect, useState } from 'react'
+
+function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number,
+): (...args: Parameters<T>) => void {
+  let timeout: NodeJS.Timeout
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => func(...args), wait)
+  }
+}
+
+export function DebouncedInput({
+  value: initialValue,
+  onChange,
+  debounceMs = 500, // This is the wait time, not the function
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounceMs?: number
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {
+  const [value, setValue] = useState(initialValue)
+
+  // Sync with initialValue when it changes
+  useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  // Define the debounced function with useCallback
+  const debouncedOnChange = useCallback(
+    debounce((newValue: string | number) => {
+      onChange(newValue)
+    }, debounceMs), // Pass the wait time here
+    [debounceMs, onChange], // Dependencies
+  )
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value
+    setValue(newValue) // Update local state immediately
+    debouncedOnChange(newValue) // Call debounced version
+  }
+
+  return <Input {...props} value={value} onChange={handleChange} />
+}
diff --git a/examples/vite-basic/src/components/demo/ssf-tst-query/columns.tsx b/examples/vite-basic/src/components/demo/ssf-tst-query/columns.tsx
new file mode 100644
index 00000000..5292bb08
--- /dev/null
+++ b/examples/vite-basic/src/components/demo/ssf-tst-query/columns.tsx
@@ -0,0 +1,184 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Checkbox } from '@/components/ui/checkbox'
+import { cn } from '@/lib/utils'
+import { createColumnHelper } from '@tanstack/react-table'
+import { format } from 'date-fns'
+import { CircleDashedIcon } from 'lucide-react'
+import type { Issue } from './types'
+
+export const LABEL_STYLES_MAP = {
+  red: 'bg-red-500 border-red-500',
+  orange: 'bg-orange-500 border-orange-500',
+  amber: 'bg-amber-500 border-amber-500',
+  yellow: 'bg-yellow-500 border-yellow-500',
+  lime: 'bg-lime-500 border-lime-500',
+  green: 'bg-green-500 border-green-500',
+  emerald: 'bg-emerald-500 border-emerald-500',
+  teal: 'bg-teal-500 border-teal-500',
+  cyan: 'bg-cyan-500 border-cyan-500',
+  sky: 'bg-sky-500 border-sky-500',
+  blue: 'bg-blue-500 border-blue-500',
+  indigo: 'bg-indigo-500 border-indigo-500',
+  violet: 'bg-violet-500 border-violet-500',
+  purple: 'bg-purple-500 border-purple-500',
+  fuchsia: 'bg-fuchsia-500 border-fuchsia-500',
+  pink: 'bg-pink-500 border-pink-500',
+  rose: 'bg-rose-500 border-rose-500',
+  neutral: 'bg-neutral-500 border-neutral-500',
+} as const
+
+export type TW_COLOR = keyof typeof LABEL_STYLES_MAP
+
+const columnHelper = createColumnHelper<Issue>()
+
+export const tstColumnDefs = [
+  columnHelper.display({
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={(value) => table.toggleAllRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label="Select row"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor((row) => row.status.id, {
+    id: 'status',
+    header: 'Status',
+    enableColumnFilter: true,
+    cell: ({ row }) => {
+      const { status } = row.original
+      const StatusIcon = status.icon
+
+      return (
+        <div className="flex items-center gap-2">
+          <StatusIcon className="size-4" />
+          <span>{status.name}</span>
+        </div>
+      )
+    },
+  }),
+  columnHelper.accessor((row) => row.title, {
+    id: 'title',
+    header: 'Title',
+    enableColumnFilter: true,
+    cell: ({ row }) => <div>{row.getValue('title')}</div>,
+  }),
+  columnHelper.accessor((row) => row.assignee?.id, {
+    id: 'assignee',
+    header: 'Assignee',
+    enableColumnFilter: true,
+    cell: ({ row }) => {
+      const user = row.original.assignee
+
+      if (!user) {
+        return <CircleDashedIcon className="size-5 text-border" />
+      }
+
+      const initials = user.name
+        .split(' ')
+        .map((x) => x[0])
+        .join('')
+        .toUpperCase()
+
+      return (
+        <Avatar className="size-5">
+          <AvatarImage src={user.picture} />
+          <AvatarFallback>{initials}</AvatarFallback>
+        </Avatar>
+      )
+    },
+  }),
+  columnHelper.accessor((row) => row.estimatedHours, {
+    id: 'estimatedHours',
+    header: 'Estimated Hours',
+    enableColumnFilter: true,
+    cell: ({ row }) => {
+      const estimatedHours = row.getValue<number>('estimatedHours')
+
+      if (!estimatedHours) {
+        return null
+      }
+
+      return (
+        <span>
+          <span className="tabular-nums tracking-tighter">
+            {estimatedHours}
+          </span>
+          <span className="text-muted-foreground ml-0.5">h</span>
+        </span>
+      )
+    },
+  }),
+  columnHelper.accessor((row) => row.startDate, {
+    id: 'startDate',
+    header: 'Start Date',
+    enableColumnFilter: true,
+    cell: ({ row }) => {
+      const startDate = row.getValue<Issue['startDate']>('startDate')
+
+      if (!startDate) {
+        return null
+      }
+
+      const formatted = format(startDate, 'MMM dd')
+
+      return <span>{formatted}</span>
+    },
+  }),
+  columnHelper.accessor((row) => row.endDate, {
+    id: 'endDate',
+    header: 'End Date',
+    cell: ({ row }) => {
+      const endDate = row.getValue<Issue['endDate']>('endDate')
+
+      if (!endDate) {
+        return null
+      }
+
+      const formatted = format(endDate, 'MMM dd')
+
+      return <span>{formatted}</span>
+    },
+  }),
+  columnHelper.accessor((row) => row.labels?.map((l) => l.id), {
+    id: 'labels',
+    header: 'Labels',
+    enableColumnFilter: true,
+    cell: ({ row }) => {
+      const labels = row.original.labels
+
+      if (!labels) return null
+
+      return (
+        <div className="flex gap-1">
+          {labels.map((l) => (
+            <div
+              key={l.id}
+              className={cn(
+                'flex items-center gap-1 py-1 px-2 rounded-full text-[11px] tracking-[-0.01em] shadow-xs',
+                LABEL_STYLES_MAP[l.color as TW_COLOR],
+                'border-none text-white font-medium',
+              )}
+            >
+              {l.name}
+            </div>
+          ))}
+        </div>
+      )
+    },
+  }),
+]
diff --git a/examples/vite-basic/src/components/demo/ssf-tst-query/data-table.tsx b/examples/vite-basic/src/components/demo/ssf-tst-query/data-table.tsx
new file mode 100644
index 00000000..01824c45
--- /dev/null
+++ b/examples/vite-basic/src/components/demo/ssf-tst-query/data-table.tsx
@@ -0,0 +1,95 @@
+import { Button } from '@/components/ui/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { type Table as TanStackTable, flexRender } from '@tanstack/react-table'
+
+export function DataTable({ table }: { table: TanStackTable<any> }) {
+  return (
+    <>
+      <div className="rounded-md border bg-white dark:bg-inherit">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                  className="h-12"
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={table.getAllColumns().length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <div className="flex-1 text-sm text-muted-foreground tabular-nums">
+          {table.getFilteredSelectedRowModel().rows.length} of{' '}
+          {table.getFilteredRowModel().rows.length} row(s) selected.{' '}
+          <span className="text-primary font-medium">
+            Total row count: {table.getCoreRowModel().rows.length}
+          </span>
+        </div>
+        <div className="space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/examples/vite-basic/src/components/demo/ssf-tst-query/data.ts b/examples/vite-basic/src/components/demo/ssf-tst-query/data.ts
new file mode 100644
index 00000000..a6c900cb
--- /dev/null
+++ b/examples/vite-basic/src/components/demo/ssf-tst-query/data.ts
@@ -0,0 +1,535 @@
+import { lorem } from '@ndaidong/txtgen'
+import { sub } from 'date-fns'
+import {
+  CircleCheckIcon,
+  CircleDashedIcon,
+  CircleDotIcon,
+  CircleIcon,
+} from 'lucide-react'
+import { nanoid } from 'nanoid'
+import { randomInteger, sample } from 'remeda'
+import type { Issue, IssueLabel, IssueStatus, User } from './types'
+import { calculateEndDate, isAnyOf } from './utils'
+
+export const USERS: User[] = [
+  {
+    id: 'rmraOG0B-2xSUyJ3e73mv',
+    name: 'John Smith',
+    picture: '/avatars/john-smith.png',
+  },
+  {
+    id: '4_vjFSibR5YkkQiHafaLx',
+    name: 'Rose Eve',
+    picture: '/avatars/rose-eve.png',
+  },
+  {
+    id: 'RC9mraUl-oJECORIjeNbd',
+    name: 'Adam Young',
+    picture: '/avatars/adam-young.png',
+  },
+  {
+    id: 'hhkjn-3L9bKDbl1FKuZW0',
+    name: 'Michael Scott',
+    picture: '/avatars/michael-scott.png',
+  },
+] as const
+
+export const ISSUE_STATUSES: IssueStatus[] = [
+  {
+    id: 'backlog',
+    name: 'Backlog',
+    icon: CircleDashedIcon,
+    order: 1,
+  },
+  {
+    id: 'todo',
+    name: 'Todo',
+    icon: CircleIcon,
+    order: 2,
+  },
+  {
+    id: 'in-progress',
+    name: 'In Progress',
+    icon: CircleDotIcon,
+    order: 3,
+  },
+  {
+    id: 'done',
+    name: 'Done',
+    icon: CircleCheckIcon,
+    order: 4,
+  },
+] as const
+
+export const ISSUE_LABELS: IssueLabel[] = [
+  { id: '550e8400-e29b-41d4-a716-446655440000', name: 'Bug', color: 'red' },
+  {
+    id: '6ba7b810-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Enhancement',
+    color: 'green',
+  },
+  { id: '6ba7b811-9dad-11d1-80b4-00c04fd430c8', name: 'Task', color: 'blue' },
+  { id: '6ba7b812-9dad-11d1-80b4-00c04fd430c8', name: 'Urgent', color: 'pink' },
+  {
+    id: '6ba7b813-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Low Priority',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b814-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Frontend',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b815-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Backend',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b816-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Database',
+    color: 'violet',
+  },
+  { id: '6ba7b817-9dad-11d1-80b4-00c04fd430c8', name: 'API', color: 'red' },
+  {
+    id: '6ba7b818-9dad-11d1-80b4-00c04fd430c8',
+    name: 'AI Model',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b819-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Data Pipeline',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b81a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Inference',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b81b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'AI Integration',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b81c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Ethics',
+    color: 'fuchsia',
+  },
+  {
+    id: '6ba7b81d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Refactor',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b81e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Performance',
+    color: 'red',
+  },
+  {
+    id: '6ba7b81f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Security',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b820-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Testing',
+    color: 'yellow',
+  },
+  {
+    id: '6ba7b821-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Documentation',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b822-9dad-11d1-80b4-00c04fd430c8',
+    name: 'In Progress',
+    color: 'green',
+  },
+  {
+    id: '6ba7b823-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Blocked',
+    color: 'indigo',
+  },
+  {
+    id: '6ba7b824-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Needs Review',
+    color: 'orange',
+  },
+  { id: '6ba7b825-9dad-11d1-80b4-00c04fd430c8', name: 'Done', color: 'teal' },
+  { id: '6ba7b826-9dad-11d1-80b4-00c04fd430c8', name: 'UI', color: 'red' },
+  { id: '6ba7b827-9dad-11d1-80b4-00c04fd430c8', name: 'UX', color: 'sky' },
+  {
+    id: '6ba7b828-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Accessibility',
+    color: 'red',
+  },
+  {
+    id: '6ba7b829-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Deployment',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b82a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Infrastructure',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b82b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Monitoring',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b82c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Real-Time',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b82d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Scalability',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b82e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Third-Party',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b82f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Authentication',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b830-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Authorization',
+    color: 'green',
+  },
+  {
+    id: '6ba7b831-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Caching',
+    color: 'lime',
+  },
+  { id: '6ba7b832-9dad-11d1-80b4-00c04fd430c8', name: 'Logging', color: 'red' },
+  {
+    id: '6ba7b833-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Analytics',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b834-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Feature Request',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b835-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Regression',
+    color: 'teal',
+  },
+  { id: '6ba7b836-9dad-11d1-80b4-00c04fd430c8', name: 'Hotfix', color: 'red' },
+  {
+    id: '6ba7b837-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Code Review',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b838-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Tech Debt',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b839-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Migration',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b83a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Configuration',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b83b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Validation',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b83c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Input Handling',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b83d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Error Handling',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b83e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Session Management',
+    color: 'green',
+  },
+  {
+    id: '6ba7b83f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Concurrency',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b840-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Load Balancing',
+    color: 'red',
+  },
+  {
+    id: '6ba7b841-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Data Migration',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b842-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Model Training',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b843-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Hyperparameters',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b844-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Overfitting',
+    color: 'red',
+  },
+  {
+    id: '6ba7b845-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Underfitting',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b846-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Feature Engineering',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b847-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Data Quality',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b848-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Preprocessing',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b849-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Model Deployment',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b84a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Latency',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b84b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Throughput',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b84c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'API Versioning',
+    color: 'green',
+  },
+  {
+    id: '6ba7b84d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Rate Limiting',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b84e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Throttling',
+    color: 'red',
+  },
+  {
+    id: '6ba7b84f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Retry Logic',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b850-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Fallback',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b851-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Circuit Breaker',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b852-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Queue Management',
+    color: 'red',
+  },
+  {
+    id: '6ba7b853-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Batch Processing',
+    color: 'emerald',
+  },
+  {
+    id: '6ba7b854-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Streaming',
+    color: 'purple',
+  },
+  {
+    id: '6ba7b855-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Event Handling',
+    color: 'pink',
+  },
+  {
+    id: '6ba7b856-9dad-11d1-80b4-00c04fd430c8',
+    name: 'WebSocket',
+    color: 'lime',
+  },
+  {
+    id: '6ba7b857-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Cron Job',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b858-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Scheduled Task',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b859-9dad-11d1-80b4-00c04fd430c8',
+    name: 'File Upload',
+    color: 'rose',
+  },
+  {
+    id: '6ba7b85a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'File Processing',
+    color: 'green',
+  },
+  { id: '6ba7b85b-9dad-11d1-80b4-00c04fd430c8', name: 'Export', color: 'lime' },
+  { id: '6ba7b85c-9dad-11d1-80b4-00c04fd430c8', name: 'Import', color: 'red' },
+  {
+    id: '6ba7b85d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Localization',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b85e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Internationalization',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b85f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Notifications',
+    color: 'teal',
+  },
+  { id: '6ba7b860-9dad-11d1-80b4-00c04fd430c8', name: 'Email', color: 'red' },
+  {
+    id: '6ba7b861-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Push Notifications',
+    color: 'emerald',
+  },
+  { id: '6ba7b862-9dad-11d1-80b4-00c04fd430c8', name: 'SMS', color: 'purple' },
+  {
+    id: '6ba7b863-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Audit Log',
+    color: 'pink',
+  },
+  { id: '6ba7b864-9dad-11d1-80b4-00c04fd430c8', name: 'Backup', color: 'lime' },
+  {
+    id: '6ba7b865-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Restore',
+    color: 'amber',
+  },
+  {
+    id: '6ba7b866-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Disaster Recovery',
+    color: 'cyan',
+  },
+  {
+    id: '6ba7b867-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Compliance',
+    color: 'rose',
+  },
+  { id: '6ba7b868-9dad-11d1-80b4-00c04fd430c8', name: 'GDPR', color: 'green' },
+  { id: '6ba7b869-9dad-11d1-80b4-00c04fd430c8', name: 'HIPAA', color: 'lime' },
+  {
+    id: '6ba7b86a-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Debugging',
+    color: 'red',
+  },
+  {
+    id: '6ba7b86b-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Profiling',
+    color: 'sky',
+  },
+  {
+    id: '6ba7b86c-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Optimization',
+    color: 'orange',
+  },
+  {
+    id: '6ba7b86d-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Research',
+    color: 'teal',
+  },
+  {
+    id: '6ba7b86e-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Experiment',
+    color: 'red',
+  },
+  {
+    id: '6ba7b86f-9dad-11d1-80b4-00c04fd430c8',
+    name: 'Proof of Concept',
+    color: 'emerald',
+  },
+]
+
+export function generateSampleIssue(): Issue {
+  const title = lorem(4, 8)
+  const description = lorem(4, 8)
+
+  const labelsCount = randomInteger(0, 5)
+  const labels =
+    labelsCount > 0
+      ? (sample(ISSUE_LABELS, labelsCount) as IssueLabel[])
+      : undefined
+
+  let [assignee] = sample(USERS, 1)
+  if (!assignee) throw new Error('No assignee found')
+  assignee = Math.random() > 0.5 ? assignee : undefined
+
+  const [status] = sample(ISSUE_STATUSES, 1)
+  if (!status) throw new Error('No status found')
+
+  const startDate = isAnyOf(status.id, ['backlog', 'todo'])
+    ? undefined
+    : sub(new Date(), { days: randomInteger(10, 60) })
+
+  const endDate =
+    !startDate || status.id !== 'done' ? undefined : calculateEndDate(startDate)
+
+  const estimatedHours = randomInteger(1, 16)
+
+  return {
+    id: nanoid(),
+    title,
+    description,
+    status,
+    labels,
+    assignee,
+    startDate,
+    endDate,
+    estimatedHours,
+  }
+}
+
+export function generateIssues(count: number) {
+  const arr: Issue[] = []
+
+  for (let i = 0; i < count; i++) {
+    arr.push(generateSampleIssue())
+  }
+
+  return arr
+}
diff --git a/examples/vite-basic/src/components/demo/ssf-tst-query/fetch.ts b/examples/vite-basic/src/components/demo/ssf-tst-query/fetch.ts
new file mode 100644
index 00000000..53cd6e9a
--- /dev/null
+++ b/examples/vite-basic/src/components/demo/ssf-tst-query/fetch.ts
@@ -0,0 +1,129 @@
+import type { FiltersState } from '@/components/data-table-filter/core/types'
+import {
+  dateFilterFn,
+  multiOptionFilterFn,
+  numberFilterFn,
+  optionFilterFn,
+  textFilterFn,
+} from '@/components/data-table-filter/lib/filter-fns'
+import { ISSUE_LABELS, ISSUE_STATUSES, USERS, generateIssues } from './data'
+import type { Issue } from './types'
+import { isAnyOf, sleep } from './utils'
+
+const ISSUES_COUNT = process.env.NODE_ENV === 'production' ? 100000 : 1000
+
+const ISSUES = generateIssues(ISSUES_COUNT)
+
+export async function fetchIssues(filters?: FiltersState) {
+  await sleep(1500)
+
+  if (!filters || filters.length === 0) return ISSUES
+
+  // Apply filters using AND logic
+  // You can use a provided filterFn function (prefixed with __) from @/registry/data-table-filter-v2/lib/filter-fns
+  const filteredIssues = ISSUES.filter((issue) => {
+    return filters.every((filter) => {
+      const columnId = filter.columnId as keyof Issue
+
+      if (isAnyOf(columnId, ['id', 'title', 'description'])) {
+        const value = issue[columnId] as string | undefined
+
+        if (!value) return false
+        return textFilterFn(value, filter)
+      }
+
+      if (isAnyOf(columnId, ['status', 'assignee'])) {
+        const value = (issue[columnId] as any)?.id
+        if (!value) return false
+        return optionFilterFn(value, filter)
+      }
+
+      if (isAnyOf(columnId, ['labels'])) {
+        const value = ((issue[columnId] as any) ?? []).map((l: any) => l.id)
+        if (!value) return false
+        return multiOptionFilterFn(value, filter)
+      }
+
+      if (isAnyOf(columnId, ['estimatedHours'])) {
+        const value = issue[columnId] as number
+        return numberFilterFn(value, filter)
+      }
+
+      if (isAnyOf(columnId, ['startDate', 'endDate'])) {
+        const value = issue[columnId] as Date | undefined
+        if (!value) return false
+        return dateFilterFn(value, filter)
+      }
+
+      throw new Error(`Unknown columnId: ${columnId}`)
+    })
+  })
+
+  return filteredIssues
+}
+
+export async function fetchLabels() {
+  await sleep(1500)
+  return ISSUE_LABELS
+}
+
+export async function fetchUsers() {
+  await sleep(1500)
+  return USERS
+}
+
+export async function fetchStatuses() {
+  await sleep(1500)
+  return ISSUE_STATUSES
+}
+
+export async function fetchFacetedLabels() {
+  const map = new Map<string, number>()
+
+  for (const label of ISSUE_LABELS) {
+    map.set(label.id, 0)
+  }
+
+  for (const issue of ISSUES) {
+    const labelIds = issue.labels?.map((l) => l.id) ?? []
+
+    for (const labelId of labelIds) {
+      const curr = map.get(labelId) ?? 0
+      map.set(labelId, curr + 1)
+    }
+  }
+
+  return map
+}
+
+export async function fetchFacetedStatuses() {
+  const map = new Map<string, number>()
+
+  for (const status of ISSUE_STATUSES) {
+    map.set(status.id, 0)
+  }
+
+  for (const issue of ISSUES) {
+    const statusId = issue.status.id
+    const curr = map.get(statusId) ?? 0
+    map.set(statusId, curr + 1)
+  }
+
+  return map
+}
+
+export async function fetchFacetedUsers() {
+  const map = new Map<string, number>()
+
+  for (const user of USERS) {
+    map.set(user.id, 0)
+  }
+
+  for (const issue of ISSUES) {
+    const userId = issue.assignee?.id ?? ''
+    const curr = map.get(userId) ?? 0
+    map.set(userId, curr + 1)
+  }
+
+  return map
+}
diff --git a/examples/vite-basic/src/components/demo/ssf-tst-query/filters.tsx b/examples/vite-basic/src/components/demo/ssf-tst-query/filters.tsx
new file mode 100644
index 00000000..695b943f
--- /dev/null
+++ b/examples/vite-basic/src/components/demo/ssf-tst-query/filters.tsx
@@ -0,0 +1,59 @@
+import { createColumnConfigHelper } from '@/components/data-table-filter/core/filters'
+import {
+  CalendarArrowUpIcon,
+  CircleDotDashedIcon,
+  ClockIcon,
+  Heading1Icon,
+  TagsIcon,
+  UserCheckIcon,
+} from 'lucide-react'
+import type { Issue } from './types'
+
+const dtf = createColumnConfigHelper<Issue>()
+
+export const columnsConfig = [
+  dtf
+    .text()
+    .id('title')
+    .accessor((row) => row.title)
+    .displayName('Title')
+    .icon(Heading1Icon)
+    .build(),
+  dtf
+    .option()
+    .accessor((row) => row.status.id)
+    .id('status')
+    .displayName('Status')
+    .icon(CircleDotDashedIcon)
+    .build(),
+  dtf
+    .option()
+    .accessor((row) => row.assignee?.id)
+    .id('assignee')
+    .displayName('Assignee')
+    .icon(UserCheckIcon)
+    .build(),
+  dtf
+    .multiOption()
+    .accessor((row) => row.labels?.map((l) => l.id))
+    .id('labels')
+    .displayName('Labels')
+    .icon(TagsIcon)
+    .build(),
+  dtf
+    .number()
+    .accessor((row) => row.estimatedHours)
+    .id('estimatedHours')
+    .displayName('Estimated hours')
+    .icon(ClockIcon)
+    .min(0)
+    .max(100)
+    .build(),
+  dtf
+    .date()
+    .accessor((row) => row.startDate)
+    .id('startDate')
+    .displayName('Start Date')
+    .icon(CalendarArrowUpIcon)
+    .build(),
+] as const
diff --git a/examples/vite-basic/src/components/demo/ssf-tst-query/issues-table.tsx b/examples/vite-basic/src/components/demo/ssf-tst-query/issues-table.tsx
new file mode 100644
index 00000000..3615238a
--- /dev/null
+++ b/examples/vite-basic/src/components/demo/ssf-tst-query/issues-table.tsx
@@ -0,0 +1,167 @@
+'use client'
+
+import type { FiltersState } from '@/components/data-table-filter/core/types'
+import {
+  DataTableFilter,
+  useDataTableFilters,
+} from '@/components/data-table-filter/index'
+import { createTSTColumns } from '@/components/data-table-filter/integrations/tanstack-table'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { cn } from '@/lib/utils'
+import { useQuery } from '@tanstack/react-query'
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { useMemo, useState } from 'react'
+import { LABEL_STYLES_MAP, type TW_COLOR, tstColumnDefs } from './columns'
+import { DataTable } from './data-table'
+import { columnsConfig } from './filters'
+import { queries } from './queries'
+import { TableFilterSkeleton, TableSkeleton } from './table-skeleton'
+import type { IssueLabel, IssueStatus, User } from './types'
+
+function createLabelOptions(labels: IssueLabel[] | undefined) {
+  return labels?.map((l) => ({
+    value: l.id,
+    label: l.name,
+    icon: (
+      <div
+        className={cn(
+          'size-2.5 rounded-full',
+          LABEL_STYLES_MAP[l.color as TW_COLOR],
+        )}
+      />
+    ),
+  }))
+}
+
+function createStatusOptions(statuses: IssueStatus[] | undefined) {
+  return statuses?.map((s) => ({
+    value: s.id,
+    label: s.name,
+    icon: s.icon,
+  }))
+}
+
+function createUserOptions(users: User[] | undefined) {
+  return users?.map((u) => ({
+    value: u.id,
+    label: u.name,
+    icon: (
+      <Avatar className="">
+        <AvatarImage src={u.picture} />
+        <AvatarFallback>
+          {u.name
+            .split('')
+            .map((x) => x[0])
+            .join('')
+            .toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+    ),
+  }))
+}
+
+interface IssuesTableProps {
+  state: {
+    filters: FiltersState
+    setFilters: React.Dispatch<React.SetStateAction<FiltersState>>
+  }
+}
+
+export function IssuesTable({ state }: IssuesTableProps) {
+  // const [filtersState, setFiltersState] = useState<FiltersState>([])
+
+  // Step 1: Fetch data from the server
+  const labels = useQuery(queries.labels.all())
+  const statuses = useQuery(queries.statuses.all())
+  const users = useQuery(queries.users.all())
+
+  const facetedLabels = useQuery(queries.labels.faceted())
+  const facetedStatuses = useQuery(queries.statuses.faceted())
+  const facetedUsers = useQuery(queries.users.faceted())
+
+  const issues = useQuery(queries.issues.all(state.filters))
+
+  // Step 2: Create ColumnOption[] for each option-based column
+  const labelOptions = createLabelOptions(labels.data)
+  const statusOptions = createStatusOptions(statuses.data)
+  const userOptions = createUserOptions(users.data)
+
+  const isOptionsDataPending =
+    labels.isPending ||
+    statuses.isPending ||
+    users.isPending ||
+    facetedLabels.isPending ||
+    facetedStatuses.isPending ||
+    facetedUsers.isPending
+
+  // Step 3: Create our data table filters instance
+  //
+  // This instance will handle the logic for filtering the data and updating the filters state.
+  // We expose an `options` prop to provide the options for each column dynamically, after fetching them above.
+  // It exposes our filters state, for you to pass on as you wish - e.g. to a TanStack Table instance.
+  const { columns, filters, actions, strategy } = useDataTableFilters({
+    strategy: 'server',
+    data: issues.data ?? [],
+    columnsConfig,
+    controlledState: [state.filters, state.setFilters],
+    options: {
+      status: [statusOptions, facetedStatuses.data],
+      assignee: [userOptions, facetedUsers.data],
+      labels: [labelOptions, facetedLabels.data],
+    },
+  })
+
+  // Step 4: Extend our TanStack Table columns with custom filter functions (and more!)
+  //         using our integration hook.
+  const tstColumns = useMemo(
+    () =>
+      createTSTColumns({
+        columns: tstColumnDefs,
+        configs: columns,
+      }),
+    [columns],
+  )
+
+  // Step 5: Create our TanStack Table instance
+  const [rowSelection, setRowSelection] = useState({})
+  const table = useReactTable({
+    data: issues.data ?? [],
+    columns: tstColumns,
+    getRowId: (row) => row.id,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onRowSelectionChange: setRowSelection,
+    state: {
+      rowSelection,
+    },
+  })
+
+  // Step 6: Render the table!
+  return (
+    <div className="w-full col-span-2">
+      <div className="flex items-center pb-4 gap-2">
+        {isOptionsDataPending ? (
+          <TableFilterSkeleton />
+        ) : (
+          <DataTableFilter
+            filters={filters}
+            columns={columns}
+            actions={actions}
+            strategy={strategy}
+          />
+        )}
+      </div>
+      {issues.isLoading ? (
+        <div className="w-full col-span-2">
+          <TableSkeleton numCols={tstColumns.length} numRows={10} />
+        </div>
+      ) : (
+        <DataTable table={table} />
+      )}
+    </div>
+  )
+}
diff --git a/examples/vite-basic/src/components/demo/ssf-tst-query/queries.ts b/examples/vite-basic/src/components/demo/ssf-tst-query/queries.ts
new file mode 100644
index 00000000..566239ac
--- /dev/null
+++ b/examples/vite-basic/src/components/demo/ssf-tst-query/queries.ts
@@ -0,0 +1,55 @@
+import type { FiltersState } from '@/components/data-table-filter/core/types'
+import type { QueryOptions } from '@tanstack/react-query'
+import {
+  fetchFacetedLabels,
+  fetchFacetedStatuses,
+  fetchFacetedUsers,
+  fetchIssues,
+  fetchLabels,
+  fetchStatuses,
+  fetchUsers,
+} from './fetch'
+
+export const queries = {
+  issues: {
+    all: (filters?: FiltersState) =>
+      ({
+        queryKey: ['issues', filters],
+        queryFn: () => fetchIssues(filters),
+      }) satisfies QueryOptions,
+  },
+  statuses: {
+    all: () => ({
+      queryKey: ['statuses'],
+      queryFn: () => fetchStatuses(),
+    }),
+    faceted: () =>
+      ({
+        queryKey: ['statuses', 'faceted'],
+        queryFn: () => fetchFacetedStatuses(),
+      }) satisfies QueryOptions,
+  },
+  labels: {
+    all: () => ({
+      queryKey: ['labels'],
+      queryFn: () => fetchLabels(),
+    }),
+    faceted: () =>
+      ({
+        queryKey: ['labels', 'faceted'],
+        queryFn: () => fetchFacetedLabels(),
+      }) satisfies QueryOptions,
+  },
+  users: {
+    all: () =>
+      ({
+        queryKey: ['users'],
+        queryFn: () => fetchUsers(),
+      }) satisfies QueryOptions,
+    faceted: () =>
+      ({
+        queryKey: ['users', 'faceted'],
+        queryFn: () => fetchFacetedUsers(),
+      }) satisfies QueryOptions,
+  },
+}
diff --git a/examples/vite-basic/src/components/demo/ssf-tst-query/query-client-provider.tsx b/examples/vite-basic/src/components/demo/ssf-tst-query/query-client-provider.tsx
new file mode 100644
index 00000000..2a0c02e6
--- /dev/null
+++ b/examples/vite-basic/src/components/demo/ssf-tst-query/query-client-provider.tsx
@@ -0,0 +1,17 @@
+'use client'
+
+import {
+  QueryClient,
+  QueryClientProvider as ReactQueryClientProvider,
+} from '@tanstack/react-query'
+
+export default function QueryClientProvider({
+  children,
+}: { children: React.ReactNode }) {
+  const queryClient = new QueryClient()
+  return (
+    <ReactQueryClientProvider client={queryClient}>
+      {children}
+    </ReactQueryClientProvider>
+  )
+}
diff --git a/examples/vite-basic/src/components/demo/ssf-tst-query/table-skeleton.tsx b/examples/vite-basic/src/components/demo/ssf-tst-query/table-skeleton.tsx
new file mode 100644
index 00000000..1f8aeac2
--- /dev/null
+++ b/examples/vite-basic/src/components/demo/ssf-tst-query/table-skeleton.tsx
@@ -0,0 +1,78 @@
+import { Button } from '@/components/ui/button'
+import { Skeleton } from '@/components/ui/skeleton'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { FilterIcon } from 'lucide-react'
+
+export interface TableSkeletonProps {
+  numCols: number
+  numRows: number
+}
+
+export function TableSkeleton({ numRows, numCols }: TableSkeletonProps) {
+  const rows = Array.from(Array(numRows).keys())
+  const cols = Array.from(Array(numCols).keys())
+
+  return (
+    <>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {cols.map((_, index) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                <TableHead key={index}>
+                  <Skeleton className="h-[20px] w-[75px]" />
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rows.map((_, index) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              <TableRow key={index} className="h-12">
+                {cols.map((_, index2) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                  <TableCell key={index2}>
+                    <Skeleton className="h-[30px] w-[140px]" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end py-4 space-x-2">
+        <div className="flex-1 flex items-center gap-2">
+          <Skeleton className="h-[20px] w-[200px]" />
+          <Skeleton className="h-[20px] w-[150px]" />
+        </div>
+        <div className="space-x-2">
+          <Button variant="outline" size="sm" disabled>
+            Previous
+          </Button>
+          <Button variant="outline" size="sm" disabled>
+            Next
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export function TableFilterSkeleton() {
+  return (
+    <div>
+      <Button variant="outline" className="h-7" disabled>
+        <FilterIcon className="size-4" />
+        <span>Filter</span>
+      </Button>
+    </div>
+  )
+}
diff --git a/examples/vite-basic/src/components/demo/ssf-tst-query/types.ts b/examples/vite-basic/src/components/demo/ssf-tst-query/types.ts
new file mode 100644
index 00000000..878483f2
--- /dev/null
+++ b/examples/vite-basic/src/components/demo/ssf-tst-query/types.ts
@@ -0,0 +1,32 @@
+import type { LucideIcon } from 'lucide-react'
+
+export type Issue = {
+  id: string
+  title: string
+  description?: string
+  status: IssueStatus
+  labels?: IssueLabel[]
+  assignee?: User
+  startDate?: Date
+  endDate?: Date
+  estimatedHours?: number
+}
+
+export type User = {
+  id: string
+  name: string
+  picture: string
+}
+
+export type IssueLabel = {
+  id: string
+  name: string
+  color: string
+}
+
+export type IssueStatus = {
+  id: 'backlog' | 'todo' | 'in-progress' | 'done'
+  name: string
+  order: number
+  icon: LucideIcon
+}
diff --git a/examples/vite-basic/src/components/demo/ssf-tst-query/utils.ts b/examples/vite-basic/src/components/demo/ssf-tst-query/utils.ts
new file mode 100644
index 00000000..4a85c166
--- /dev/null
+++ b/examples/vite-basic/src/components/demo/ssf-tst-query/utils.ts
@@ -0,0 +1,17 @@
+import { add, differenceInDays } from 'date-fns'
+import { randomInteger } from 'remeda'
+
+export const calculateEndDate = (start: Date) => {
+  const diff = differenceInDays(new Date(), start)
+  const offset = randomInteger(0, diff + 1)
+
+  return add(start, { days: offset })
+}
+
+export function isAnyOf<T>(value: T, array: T[]) {
+  return array.includes(value)
+}
+
+export async function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms))
+}
diff --git a/examples/vite-basic/src/components/ui/skeleton.tsx b/examples/vite-basic/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..e3beb902
--- /dev/null
+++ b/examples/vite-basic/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/examples/vite-basic/src/main.tsx b/examples/vite-basic/src/main.tsx
index bef5202a..04d60c0a 100644
--- a/examples/vite-basic/src/main.tsx
+++ b/examples/vite-basic/src/main.tsx
@@ -1,10 +1,13 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
+import { NuqsAdapter } from 'nuqs/adapters/react'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <NuqsAdapter>
+      <App />
+    </NuqsAdapter>
   </StrictMode>,
 )
diff --git a/examples/vite-basic/tsconfig.app.json b/examples/vite-basic/tsconfig.app.json
index aaef7769..5cad9351 100644
--- a/examples/vite-basic/tsconfig.app.json
+++ b/examples/vite-basic/tsconfig.app.json
@@ -1,34 +1,25 @@
 {
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
+    "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-    /* Linting */
     "strict": true,
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
-    /* shadcn */
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     }
   }
 }

From cd76cea8fcaa2b4fcd15cc27571b9e6662722ec3 Mon Sep 17 00:00:00 2001
From: Kian Bazza <kian@bazza.dev>
Date: Sat, 12 Apr 2025 19:05:32 -0400
Subject: [PATCH 4/8] feat(data-table-filter): use muted text color for
 operator display (#55)

---
 apps/web/public/r/filters-v2.json                               | 2 +-
 .../data-table-filter-v2/components/filter-operator.tsx         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/public/r/filters-v2.json b/apps/web/public/r/filters-v2.json
index d9c98415..c0bb251e 100644
--- a/apps/web/public/r/filters-v2.json
+++ b/apps/web/public/r/filters-v2.json
@@ -48,7 +48,7 @@
     },
     {
       "path": "registry/data-table-filter-v2/components/filter-operator.tsx",
-      "content": "import { Button } from '@/components/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command'\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { useState } from 'react'\nimport {\n  dateFilterDetails,\n  filterTypeOperatorDetails,\n  multiOptionFilterDetails,\n  numberFilterDetails,\n  optionFilterDetails,\n  textFilterDetails,\n} from '../core/operators'\nimport type {\n  Column,\n  ColumnDataType,\n  DataTableFilterActions,\n  FilterModel,\n  FilterOperators,\n  FilterStrategy,\n} from '../core/types'\n\ninterface FilterOperatorProps<TData, TType extends ColumnDataType> {\n  column: Column<TData, TType>\n  filter: FilterModel<TType>\n  actions: DataTableFilterActions\n}\n\n// Renders the filter operator display and menu for a given column filter\n// The filter operator display is the label and icon for the filter operator\n// The filter operator menu is the dropdown menu for the filter operator\nexport function FilterOperator<TData, TType extends ColumnDataType>({\n  column,\n  filter,\n  actions,\n}: FilterOperatorProps<TData, TType>) {\n  const [open, setOpen] = useState<boolean>(false)\n\n  const close = () => setOpen(false)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          className=\"m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs\"\n        >\n          <FilterOperatorDisplay filter={filter} columnType={column.type} />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"w-fit p-0 origin-(--radix-popover-content-transform-origin)\"\n      >\n        <Command loop>\n          <CommandInput placeholder=\"Search...\" />\n          <CommandEmpty>No results.</CommandEmpty>\n          <CommandList className=\"max-h-fit\">\n            <FilterOperatorController\n              filter={filter}\n              column={column}\n              actions={actions}\n              closeController={close}\n            />\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\ninterface FilterOperatorDisplayProps<TType extends ColumnDataType> {\n  filter: FilterModel<TType>\n  columnType: TType\n}\n\nexport function FilterOperatorDisplay<TType extends ColumnDataType>({\n  filter,\n  columnType,\n}: FilterOperatorDisplayProps<TType>) {\n  const operator = filterTypeOperatorDetails[columnType][filter.operator]\n\n  return <span>{operator.label}</span>\n}\n\ninterface FilterOperatorControllerProps<TData, TType extends ColumnDataType> {\n  filter: FilterModel<TType>\n  column: Column<TData, TType>\n  actions: DataTableFilterActions\n  closeController: () => void\n}\n\n/*\n *\n * TODO: Reduce into a single component. Each data type does not need it's own controller.\n *\n */\nexport function FilterOperatorController<TData, TType extends ColumnDataType>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, TType>) {\n  switch (column.type) {\n    case 'option':\n      return (\n        <FilterOperatorOptionController\n          filter={filter as FilterModel<'option'>}\n          column={column as Column<TData, 'option'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'multiOption':\n      return (\n        <FilterOperatorMultiOptionController\n          filter={filter as FilterModel<'multiOption'>}\n          column={column as Column<TData, 'multiOption'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'date':\n      return (\n        <FilterOperatorDateController\n          filter={filter as FilterModel<'date'>}\n          column={column as Column<TData, 'date'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'text':\n      return (\n        <FilterOperatorTextController\n          filter={filter as FilterModel<'text'>}\n          column={column as Column<TData, 'text'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'number':\n      return (\n        <FilterOperatorNumberController\n          filter={filter as FilterModel<'number'>}\n          column={column as Column<TData, 'number'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    default:\n      return null\n  }\n}\n\nfunction FilterOperatorOptionController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'option'>) {\n  const filterDetails = optionFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(optionFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['option'])\n    closeController()\n  }\n\n  return (\n    <CommandGroup heading=\"Operators\">\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nfunction FilterOperatorMultiOptionController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'multiOption'>) {\n  const filterDetails = multiOptionFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(multiOptionFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(\n      column.id,\n      value as FilterOperators['multiOption'],\n    )\n    closeController()\n  }\n\n  return (\n    <CommandGroup heading=\"Operators\">\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nfunction FilterOperatorDateController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'date'>) {\n  const filterDetails = dateFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(dateFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['date'])\n    closeController()\n  }\n\n  return (\n    <CommandGroup>\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nexport function FilterOperatorTextController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'text'>) {\n  const filterDetails = textFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(textFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['text'])\n    closeController()\n  }\n\n  return (\n    <CommandGroup heading=\"Operators\">\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nfunction FilterOperatorNumberController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'number'>) {\n  // Show all related operators\n  const filterDetails = numberFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(numberFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['number'])\n    closeController()\n  }\n\n  return (\n    <div>\n      <CommandGroup heading=\"Operators\">\n        {relatedFilters.map((r) => (\n          <CommandItem\n            onSelect={() => changeOperator(r.value)}\n            value={r.value}\n            key={r.value}\n          >\n            {r.label} {/**/}\n          </CommandItem>\n        ))}\n      </CommandGroup>\n    </div>\n  )\n}\n",
+      "content": "import { Button } from '@/components/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command'\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { useState } from 'react'\nimport {\n  dateFilterDetails,\n  filterTypeOperatorDetails,\n  multiOptionFilterDetails,\n  numberFilterDetails,\n  optionFilterDetails,\n  textFilterDetails,\n} from '../core/operators'\nimport type {\n  Column,\n  ColumnDataType,\n  DataTableFilterActions,\n  FilterModel,\n  FilterOperators,\n  FilterStrategy,\n} from '../core/types'\n\ninterface FilterOperatorProps<TData, TType extends ColumnDataType> {\n  column: Column<TData, TType>\n  filter: FilterModel<TType>\n  actions: DataTableFilterActions\n}\n\n// Renders the filter operator display and menu for a given column filter\n// The filter operator display is the label and icon for the filter operator\n// The filter operator menu is the dropdown menu for the filter operator\nexport function FilterOperator<TData, TType extends ColumnDataType>({\n  column,\n  filter,\n  actions,\n}: FilterOperatorProps<TData, TType>) {\n  const [open, setOpen] = useState<boolean>(false)\n\n  const close = () => setOpen(false)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          className=\"m-0 h-full w-fit whitespace-nowrap rounded-none p-0 px-2 text-xs\"\n        >\n          <FilterOperatorDisplay filter={filter} columnType={column.type} />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"w-fit p-0 origin-(--radix-popover-content-transform-origin)\"\n      >\n        <Command loop>\n          <CommandInput placeholder=\"Search...\" />\n          <CommandEmpty>No results.</CommandEmpty>\n          <CommandList className=\"max-h-fit\">\n            <FilterOperatorController\n              filter={filter}\n              column={column}\n              actions={actions}\n              closeController={close}\n            />\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\ninterface FilterOperatorDisplayProps<TType extends ColumnDataType> {\n  filter: FilterModel<TType>\n  columnType: TType\n}\n\nexport function FilterOperatorDisplay<TType extends ColumnDataType>({\n  filter,\n  columnType,\n}: FilterOperatorDisplayProps<TType>) {\n  const operator = filterTypeOperatorDetails[columnType][filter.operator]\n\n  return <span className=\"text-muted-foreground\">{operator.label}</span>\n}\n\ninterface FilterOperatorControllerProps<TData, TType extends ColumnDataType> {\n  filter: FilterModel<TType>\n  column: Column<TData, TType>\n  actions: DataTableFilterActions\n  closeController: () => void\n}\n\n/*\n *\n * TODO: Reduce into a single component. Each data type does not need it's own controller.\n *\n */\nexport function FilterOperatorController<TData, TType extends ColumnDataType>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, TType>) {\n  switch (column.type) {\n    case 'option':\n      return (\n        <FilterOperatorOptionController\n          filter={filter as FilterModel<'option'>}\n          column={column as Column<TData, 'option'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'multiOption':\n      return (\n        <FilterOperatorMultiOptionController\n          filter={filter as FilterModel<'multiOption'>}\n          column={column as Column<TData, 'multiOption'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'date':\n      return (\n        <FilterOperatorDateController\n          filter={filter as FilterModel<'date'>}\n          column={column as Column<TData, 'date'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'text':\n      return (\n        <FilterOperatorTextController\n          filter={filter as FilterModel<'text'>}\n          column={column as Column<TData, 'text'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    case 'number':\n      return (\n        <FilterOperatorNumberController\n          filter={filter as FilterModel<'number'>}\n          column={column as Column<TData, 'number'>}\n          actions={actions}\n          closeController={closeController}\n        />\n      )\n    default:\n      return null\n  }\n}\n\nfunction FilterOperatorOptionController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'option'>) {\n  const filterDetails = optionFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(optionFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['option'])\n    closeController()\n  }\n\n  return (\n    <CommandGroup heading=\"Operators\">\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nfunction FilterOperatorMultiOptionController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'multiOption'>) {\n  const filterDetails = multiOptionFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(multiOptionFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(\n      column.id,\n      value as FilterOperators['multiOption'],\n    )\n    closeController()\n  }\n\n  return (\n    <CommandGroup heading=\"Operators\">\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nfunction FilterOperatorDateController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'date'>) {\n  const filterDetails = dateFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(dateFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['date'])\n    closeController()\n  }\n\n  return (\n    <CommandGroup>\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nexport function FilterOperatorTextController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'text'>) {\n  const filterDetails = textFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(textFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['text'])\n    closeController()\n  }\n\n  return (\n    <CommandGroup heading=\"Operators\">\n      {relatedFilters.map((r) => {\n        return (\n          <CommandItem onSelect={changeOperator} value={r.value} key={r.value}>\n            {r.label}\n          </CommandItem>\n        )\n      })}\n    </CommandGroup>\n  )\n}\n\nfunction FilterOperatorNumberController<TData>({\n  filter,\n  column,\n  actions,\n  closeController,\n}: FilterOperatorControllerProps<TData, 'number'>) {\n  // Show all related operators\n  const filterDetails = numberFilterDetails[filter.operator]\n\n  const relatedFilters = Object.values(numberFilterDetails).filter(\n    (o) => o.target === filterDetails.target,\n  )\n\n  const changeOperator = (value: string) => {\n    actions?.setFilterOperator(column.id, value as FilterOperators['number'])\n    closeController()\n  }\n\n  return (\n    <div>\n      <CommandGroup heading=\"Operators\">\n        {relatedFilters.map((r) => (\n          <CommandItem\n            onSelect={() => changeOperator(r.value)}\n            value={r.value}\n            key={r.value}\n          >\n            {r.label} {/**/}\n          </CommandItem>\n        ))}\n      </CommandGroup>\n    </div>\n  )\n}\n",
       "type": "registry:file",
       "target": "components/data-table-filter/components/filter-operator.tsx"
     },
diff --git a/apps/web/registry/data-table-filter-v2/components/filter-operator.tsx b/apps/web/registry/data-table-filter-v2/components/filter-operator.tsx
index 7d6ed7fb..732cc356 100644
--- a/apps/web/registry/data-table-filter-v2/components/filter-operator.tsx
+++ b/apps/web/registry/data-table-filter-v2/components/filter-operator.tsx
@@ -91,7 +91,7 @@ export function FilterOperatorDisplay<TType extends ColumnDataType>({
 }: FilterOperatorDisplayProps<TType>) {
   const operator = filterTypeOperatorDetails[columnType][filter.operator]
 
-  return <span>{operator.label}</span>
+  return <span className="text-muted-foreground">{operator.label}</span>
 }
 
 interface FilterOperatorControllerProps<TData, TType extends ColumnDataType> {

From 265756b96b02835d6c0ee7f356d219b293d15b61 Mon Sep 17 00:00:00 2001
From: Kian Bazza <kian@bazza.dev>
Date: Sat, 12 Apr 2025 20:23:22 -0400
Subject: [PATCH 5/8] chore: add CHANGELOG.md (#56)

### TL;DR

Added a CHANGELOG.md file to track project changes.

### What changed?

Created a new CHANGELOG.md file that documents recent features and changes to the project, specifically focusing on data-table-filter component updates. The changelog includes:

- Server-side filtering implementation (#53)
- Component decoupling (#47)
- UI improvements for operator display using muted text color (#55)
- Registry item files reorganization (#54)

The changelog is structured with "Unreleased" section and categorizes changes as Added, Changed, Fixed, and Other.

### Why make this change?

Adding a changelog improves project documentation by providing a centralized record of changes, making it easier for developers and users to track feature additions, improvements, and fixes across versions.
---
 CHANGELOG.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..d7359e00
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,21 @@
+# Changelog
+
+## [Unreleased]
+
+### Added
+
+- **feat(data-table-filter)**: server-side filtering ([#53](https://github.com/kianbazza/ui/pull/53))
+- **feat(data-table-filter)**: the great decoupling ([#47](https://github.com/kianbazza/ui/pull/47))
+
+### Changed
+
+- **feat(data-table-filter)**: use muted text color for operator display ([#55](https://github.com/kianbazza/ui/pull/55))
+- **refactor(data-table-filter)**: registry item files re-organization ([#54](https://github.com/kianbazza/ui/pull/54))
+
+### Fixed
+
+- ...
+
+### Other
+
+- ...
\ No newline at end of file

From d5ca46dd34deee086982aed09eb3b0f9fbb2f6ad Mon Sep 17 00:00:00 2001
From: Kian Bazza <kian@bazza.dev>
Date: Sat, 12 Apr 2025 23:24:56 -0400
Subject: [PATCH 6/8] chore(deps): bump react to v19.1 (#58)

---
 apps/web/package.json | 8 ++++----
 bun.lock              | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 57d4b539..1d056bb9 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -45,9 +45,9 @@
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.4.4",
     "nuqs": "^2.4.1",
-    "react": "^19.0.0",
+    "react": "^19.1.0",
     "react-day-picker": "8.10.1",
-    "react-dom": "^19.0.0",
+    "react-dom": "^19.1.0",
     "shadcn": "2.4.0-canary.13",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
@@ -62,8 +62,8 @@
     "@testing-library/react": "^16.3.0",
     "@types/mdx": "^2.0.13",
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "^19.1.1",
+    "@types/react-dom": "^19.1.2",
     "@types/unist": "^3.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "husky": "^9.1.7",
diff --git a/bun.lock b/bun.lock
index 92f73ddb..00c90bd6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -43,9 +43,9 @@
         "next-mdx-remote": "^5.0.0",
         "next-themes": "^0.4.4",
         "nuqs": "^2.4.1",
-        "react": "^19.0.0",
+        "react": "^19.1.0",
         "react-day-picker": "8.10.1",
-        "react-dom": "^19.0.0",
+        "react-dom": "^19.1.0",
         "shadcn": "2.4.0-canary.13",
         "tailwind-merge": "^3.0.2",
         "tailwindcss-animate": "^1.0.7",
@@ -60,8 +60,8 @@
         "@testing-library/react": "^16.3.0",
         "@types/mdx": "^2.0.13",
         "@types/node": "^20",
-        "@types/react": "^19",
-        "@types/react-dom": "^19",
+        "@types/react": "^19.1.1",
+        "@types/react-dom": "^19.1.2",
         "@types/unist": "^3.0.3",
         "@vitejs/plugin-react": "^4.3.4",
         "husky": "^9.1.7",

From 78b39008e1f5dd1b4493c428398f8d7b49d28337 Mon Sep 17 00:00:00 2001
From: Kian Bazza <kian@bazza.dev>
Date: Sat, 12 Apr 2025 23:28:23 -0400
Subject: [PATCH 7/8] chore(deps): bump next.js to v15.3 (#57)

---
 apps/web/package.json |  2 +-
 bun.lock              | 64 ++++++++++++++++++++++---------------------
 2 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 1d056bb9..e630abde 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -41,7 +41,7 @@
     "jotai": "^2.12.2",
     "lucide-react": "^0.482.0",
     "nanoid": "^5.1.5",
-    "next": "15.2.4",
+    "next": "^15.3.0",
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.4.4",
     "nuqs": "^2.4.1",
diff --git a/bun.lock b/bun.lock
index 00c90bd6..a65519e8 100644
--- a/bun.lock
+++ b/bun.lock
@@ -39,7 +39,7 @@
         "jotai": "^2.12.2",
         "lucide-react": "^0.482.0",
         "nanoid": "^5.1.5",
-        "next": "15.2.4",
+        "next": "^15.3.0",
         "next-mdx-remote": "^5.0.0",
         "next-themes": "^0.4.4",
         "nuqs": "^2.4.1",
@@ -328,43 +328,45 @@
 
     "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.2", "", {}, "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ=="],
 
-    "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.0.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ=="],
+    "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.1", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.1.0" }, "os": "darwin", "cpu": "arm64" }, "sha512-pn44xgBtgpEbZsu+lWf2KNb6OAf70X68k+yk69Ic2Xz11zHR/w24/U49XT7AeRwJ0Px+mhALhU5LPci1Aymk7A=="],
 
-    "@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.0.4" }, "os": "darwin", "cpu": "x64" }, "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q=="],
+    "@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.1", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.1.0" }, "os": "darwin", "cpu": "x64" }, "sha512-VfuYgG2r8BpYiOUN+BfYeFo69nP/MIwAtSJ7/Zpxc5QF3KS22z8Pvg3FkrSFJBPNQ7mmcUcYQFBmEQp7eu1F8Q=="],
 
-    "@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.0.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg=="],
+    "@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.1.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA=="],
 
-    "@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.0.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ=="],
+    "@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.1.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ=="],
 
-    "@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.0.5", "", { "os": "linux", "cpu": "arm" }, "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g=="],
+    "@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.1.0", "", { "os": "linux", "cpu": "arm" }, "sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA=="],
 
-    "@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.0.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA=="],
+    "@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.1.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew=="],
 
-    "@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.0.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA=="],
+    "@img/sharp-libvips-linux-ppc64": ["@img/sharp-libvips-linux-ppc64@1.1.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ=="],
 
-    "@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.0.4", "", { "os": "linux", "cpu": "x64" }, "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw=="],
+    "@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.1.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA=="],
 
-    "@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.0.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA=="],
+    "@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.1.0", "", { "os": "linux", "cpu": "x64" }, "sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q=="],
 
-    "@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.0.4", "", { "os": "linux", "cpu": "x64" }, "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw=="],
+    "@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.1.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w=="],
 
-    "@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.0.5" }, "os": "linux", "cpu": "arm" }, "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ=="],
+    "@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.1.0", "", { "os": "linux", "cpu": "x64" }, "sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A=="],
 
-    "@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.0.4" }, "os": "linux", "cpu": "arm64" }, "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA=="],
+    "@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.34.1", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.1.0" }, "os": "linux", "cpu": "arm" }, "sha512-anKiszvACti2sGy9CirTlNyk7BjjZPiML1jt2ZkTdcvpLU1YH6CXwRAZCA2UmRXnhiIftXQ7+Oh62Ji25W72jA=="],
 
-    "@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.0.4" }, "os": "linux", "cpu": "s390x" }, "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q=="],
+    "@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.34.1", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.1.0" }, "os": "linux", "cpu": "arm64" }, "sha512-kX2c+vbvaXC6vly1RDf/IWNXxrlxLNpBVWkdpRq5Ka7OOKj6nr66etKy2IENf6FtOgklkg9ZdGpEu9kwdlcwOQ=="],
 
-    "@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.0.4" }, "os": "linux", "cpu": "x64" }, "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA=="],
+    "@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.34.1", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.1.0" }, "os": "linux", "cpu": "s390x" }, "sha512-7s0KX2tI9mZI2buRipKIw2X1ufdTeaRgwmRabt5bi9chYfhur+/C1OXg3TKg/eag1W+6CCWLVmSauV1owmRPxA=="],
 
-    "@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.0.4" }, "os": "linux", "cpu": "arm64" }, "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g=="],
+    "@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.34.1", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.1.0" }, "os": "linux", "cpu": "x64" }, "sha512-wExv7SH9nmoBW3Wr2gvQopX1k8q2g5V5Iag8Zk6AVENsjwd+3adjwxtp3Dcu2QhOXr8W9NusBU6XcQUohBZ5MA=="],
 
-    "@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.0.4" }, "os": "linux", "cpu": "x64" }, "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw=="],
+    "@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.34.1", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.1.0" }, "os": "linux", "cpu": "arm64" }, "sha512-DfvyxzHxw4WGdPiTF0SOHnm11Xv4aQexvqhRDAoD00MzHekAj9a/jADXeXYCDFH/DzYruwHbXU7uz+H+nWmSOQ=="],
 
-    "@img/sharp-wasm32": ["@img/sharp-wasm32@0.33.5", "", { "dependencies": { "@emnapi/runtime": "^1.2.0" }, "cpu": "none" }, "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg=="],
+    "@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.34.1", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.1.0" }, "os": "linux", "cpu": "x64" }, "sha512-pax/kTR407vNb9qaSIiWVnQplPcGU8LRIJpDT5o8PdAx5aAA7AS3X9PS8Isw1/WfqgQorPotjrZL3Pqh6C5EBg=="],
 
-    "@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.33.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ=="],
+    "@img/sharp-wasm32": ["@img/sharp-wasm32@0.34.1", "", { "dependencies": { "@emnapi/runtime": "^1.4.0" }, "cpu": "none" }, "sha512-YDybQnYrLQfEpzGOQe7OKcyLUCML4YOXl428gOOzBgN6Gw0rv8dpsJ7PqTHxBnXnwXr8S1mYFSLSa727tpz0xg=="],
 
-    "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.33.5", "", { "os": "win32", "cpu": "x64" }, "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg=="],
+    "@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.34.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-WKf/NAZITnonBf3U1LfdjoMgNO5JYRSlhovhRhMxXVdvWYveM4kM3L8m35onYIdh75cOMCo1BexgVQcCDzyoWw=="],
+
+    "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.1", "", { "os": "win32", "cpu": "x64" }, "sha512-hw1iIAHpNE8q3uMIRCgGOeDoz9KtFNarFLQclLxr/LK1VBkj8nby18RjFvr6aP7USRYAjTZW6yisnBWMX571Tw=="],
 
     "@inquirer/confirm": ["@inquirer/confirm@5.1.9", "", { "dependencies": { "@inquirer/core": "^10.1.10", "@inquirer/type": "^3.0.6" }, "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-NgQCnHqFTjF7Ys2fsqK2WtnA8X1kHyInyG+nMIuHowVTIgIuS10T4AznI/PvbqSpJqjCUqNBlKGh1v3bwLFL4w=="],
 
@@ -392,23 +394,23 @@
 
     "@ndaidong/txtgen": ["@ndaidong/txtgen@4.0.1", "", {}, "sha512-z0I53ozZXEhjDKYl/1CEdrunOw/Ck15dJH+ciKgIKxb5atf/bGilxws8G9nF1iKMfb8rieCE03cHud7odMGEKg=="],
 
-    "@next/env": ["@next/env@15.2.4", "", {}, "sha512-+SFtMgoiYP3WoSswuNmxJOCwi06TdWE733D+WPjpXIe4LXGULwEaofiiAy6kbS0+XjM5xF5n3lKuBwN2SnqD9g=="],
+    "@next/env": ["@next/env@15.3.0", "", {}, "sha512-6mDmHX24nWlHOlbwUiAOmMyY7KELimmi+ed8qWcJYjqXeC+G6JzPZ3QosOAfjNwgMIzwhXBiRiCgdh8axTTdTA=="],
 
-    "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-1AnMfs655ipJEDC/FHkSr0r3lXBgpqKo4K1kiwfUf3iE68rDFXZ1TtHdMvf7D0hMItgDZ7Vuq3JgNMbt/+3bYw=="],
+    "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.3.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-PDQcByT0ZfF2q7QR9d+PNj3wlNN4K6Q8JoHMwFyk252gWo4gKt7BF8Y2+KBgDjTFBETXZ/TkBEUY7NIIY7A/Kw=="],
 
-    "@next/swc-darwin-x64": ["@next/swc-darwin-x64@15.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-3qK2zb5EwCwxnO2HeO+TRqCubeI/NgCe+kL5dTJlPldV/uwCnUgC7VbEzgmxbfrkbjehL4H9BPztWOEtsoMwew=="],
+    "@next/swc-darwin-x64": ["@next/swc-darwin-x64@15.3.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-m+eO21yg80En8HJ5c49AOQpFDq+nP51nu88ZOMCorvw3g//8g1JSUsEiPSiFpJo1KCTQ+jm9H0hwXK49H/RmXg=="],
 
-    "@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@15.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-HFN6GKUcrTWvem8AZN7tT95zPb0GUGv9v0d0iyuTb303vbXkkbHDp/DxufB04jNVD+IN9yHy7y/6Mqq0h0YVaQ=="],
+    "@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@15.3.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-H0Kk04ZNzb6Aq/G6e0un4B3HekPnyy6D+eUBYPJv9Abx8KDYgNMWzKt4Qhj57HXV3sTTjsfc1Trc1SxuhQB+Tg=="],
 
-    "@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@15.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-Oioa0SORWLwi35/kVB8aCk5Uq+5/ZIumMK1kJV+jSdazFm2NzPDztsefzdmzzpx5oGCJ6FkUC7vkaUseNTStNA=="],
+    "@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@15.3.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-k8GVkdMrh/+J9uIv/GpnHakzgDQhrprJ/FbGQvwWmstaeFG06nnAoZCJV+wO/bb603iKV1BXt4gHG+s2buJqZA=="],
 
-    "@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@15.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-yb5WTRaHdkgOqFOZiu6rHV1fAEK0flVpaIN2HB6kxHVSy/dIajWbThS7qON3W9/SNOH2JWkVCyulgGYekMePuw=="],
+    "@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@15.3.0", "", { "os": "linux", "cpu": "x64" }, "sha512-ZMQ9yzDEts/vkpFLRAqfYO1wSpIJGlQNK9gZ09PgyjBJUmg8F/bb8fw2EXKgEaHbCc4gmqMpDfh+T07qUphp9A=="],
 
-    "@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@15.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-Dcdv/ix6srhkM25fgXiyOieFUkz+fOYkHlydWCtB0xMST6X9XYI3yPDKBZt1xuhOytONsIFJFB08xXYsxUwJLw=="],
+    "@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@15.3.0", "", { "os": "linux", "cpu": "x64" }, "sha512-RFwq5VKYTw9TMr4T3e5HRP6T4RiAzfDJ6XsxH8j/ZeYq2aLsBqCkFzwMI0FmnSsLaUbOb46Uov0VvN3UciHX5A=="],
 
-    "@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@15.2.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-dW0i7eukvDxtIhCYkMrZNQfNicPDExt2jPb9AZPpL7cfyUo7QSNl1DjsHjmmKp6qNAqUESyT8YFl/Aw91cNJJg=="],
+    "@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@15.3.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-a7kUbqa/k09xPjfCl0RSVAvEjAkYBYxUzSVAzk2ptXiNEL+4bDBo9wNC43G/osLA/EOGzG4CuNRFnQyIHfkRgQ=="],
 
-    "@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.2.4", "", { "os": "win32", "cpu": "x64" }, "sha512-SbnWkJmkS7Xl3kre8SdMF6F/XDh1DTFEhp0jRTj/uB8iPKoU2bb2NDfcu+iifv1+mxQEd1g2vvSxcZbXSKyWiQ=="],
+    "@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.3.0", "", { "os": "win32", "cpu": "x64" }, "sha512-vHUQS4YVGJPmpjn7r5lEZuMhK5UQBNBRSB+iGDvJjaNk649pTIcRluDWNb9siunyLLiu/LDPHfvxBtNamyuLTw=="],
 
     "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
 
@@ -1346,7 +1348,7 @@
 
     "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
 
-    "next": ["next@15.2.4", "", { "dependencies": { "@next/env": "15.2.4", "@swc/counter": "0.1.3", "@swc/helpers": "0.5.15", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.2.4", "@next/swc-darwin-x64": "15.2.4", "@next/swc-linux-arm64-gnu": "15.2.4", "@next/swc-linux-arm64-musl": "15.2.4", "@next/swc-linux-x64-gnu": "15.2.4", "@next/swc-linux-x64-musl": "15.2.4", "@next/swc-win32-arm64-msvc": "15.2.4", "@next/swc-win32-x64-msvc": "15.2.4", "sharp": "^0.33.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.41.2", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-VwL+LAaPSxEkd3lU2xWbgEOtrM8oedmyhBqaVNmgKB+GvZlCy9rgaEc+y2on0wv+l0oSFqLtYD6dcC1eAedUaQ=="],
+    "next": ["next@15.3.0", "", { "dependencies": { "@next/env": "15.3.0", "@swc/counter": "0.1.3", "@swc/helpers": "0.5.15", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.3.0", "@next/swc-darwin-x64": "15.3.0", "@next/swc-linux-arm64-gnu": "15.3.0", "@next/swc-linux-arm64-musl": "15.3.0", "@next/swc-linux-x64-gnu": "15.3.0", "@next/swc-linux-x64-musl": "15.3.0", "@next/swc-win32-arm64-msvc": "15.3.0", "@next/swc-win32-x64-msvc": "15.3.0", "sharp": "^0.34.1" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.41.2", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-k0MgP6BsK8cZ73wRjMazl2y2UcXj49ZXLDEgx6BikWuby/CN+nh81qFFI16edgd7xYpe/jj2OZEIwCoqnzz0bQ=="],
 
     "next-mdx-remote": ["next-mdx-remote@5.0.0", "", { "dependencies": { "@babel/code-frame": "^7.23.5", "@mdx-js/mdx": "^3.0.1", "@mdx-js/react": "^3.0.1", "unist-util-remove": "^3.1.0", "vfile": "^6.0.1", "vfile-matter": "^5.0.0" }, "peerDependencies": { "react": ">=16" } }, "sha512-RNNbqRpK9/dcIFZs/esQhuLA8jANqlH694yqoDBK8hkVdJUndzzGmnPHa2nyi90N4Z9VmzuSWNRpr5ItT3M7xQ=="],
 
@@ -1528,7 +1530,7 @@
 
     "shadcn": ["shadcn@2.4.0-canary.13", "", { "dependencies": { "@antfu/ni": "^23.2.0", "@babel/core": "^7.22.1", "@babel/parser": "^7.22.6", "@babel/plugin-transform-typescript": "^7.22.5", "commander": "^10.0.0", "cosmiconfig": "^8.1.3", "deepmerge": "^4.3.1", "diff": "^5.1.0", "execa": "^7.0.0", "fast-glob": "^3.3.2", "fs-extra": "^11.1.0", "https-proxy-agent": "^6.2.0", "kleur": "^4.1.5", "msw": "^2.7.1", "node-fetch": "^3.3.0", "ora": "^6.1.2", "postcss": "^8.4.24", "prompts": "^2.4.2", "recast": "^0.23.2", "stringify-object": "^5.0.0", "ts-morph": "^18.0.0", "tsconfig-paths": "^4.2.0", "zod": "^3.20.2" }, "bin": { "shadcn": "dist/index.js" } }, "sha512-nb595Z2I7KOZYzw00dG2uFokTvUIeuzQpuXDBMPjhcV4IROPRT70rXbZJh+2WX3EpySLwPUwG5gFu7VhuHb9Tg=="],
 
-    "sharp": ["sharp@0.33.5", "", { "dependencies": { "color": "^4.2.3", "detect-libc": "^2.0.3", "semver": "^7.6.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.33.5", "@img/sharp-darwin-x64": "0.33.5", "@img/sharp-libvips-darwin-arm64": "1.0.4", "@img/sharp-libvips-darwin-x64": "1.0.4", "@img/sharp-libvips-linux-arm": "1.0.5", "@img/sharp-libvips-linux-arm64": "1.0.4", "@img/sharp-libvips-linux-s390x": "1.0.4", "@img/sharp-libvips-linux-x64": "1.0.4", "@img/sharp-libvips-linuxmusl-arm64": "1.0.4", "@img/sharp-libvips-linuxmusl-x64": "1.0.4", "@img/sharp-linux-arm": "0.33.5", "@img/sharp-linux-arm64": "0.33.5", "@img/sharp-linux-s390x": "0.33.5", "@img/sharp-linux-x64": "0.33.5", "@img/sharp-linuxmusl-arm64": "0.33.5", "@img/sharp-linuxmusl-x64": "0.33.5", "@img/sharp-wasm32": "0.33.5", "@img/sharp-win32-ia32": "0.33.5", "@img/sharp-win32-x64": "0.33.5" } }, "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw=="],
+    "sharp": ["sharp@0.34.1", "", { "dependencies": { "color": "^4.2.3", "detect-libc": "^2.0.3", "semver": "^7.7.1" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.1", "@img/sharp-darwin-x64": "0.34.1", "@img/sharp-libvips-darwin-arm64": "1.1.0", "@img/sharp-libvips-darwin-x64": "1.1.0", "@img/sharp-libvips-linux-arm": "1.1.0", "@img/sharp-libvips-linux-arm64": "1.1.0", "@img/sharp-libvips-linux-ppc64": "1.1.0", "@img/sharp-libvips-linux-s390x": "1.1.0", "@img/sharp-libvips-linux-x64": "1.1.0", "@img/sharp-libvips-linuxmusl-arm64": "1.1.0", "@img/sharp-libvips-linuxmusl-x64": "1.1.0", "@img/sharp-linux-arm": "0.34.1", "@img/sharp-linux-arm64": "0.34.1", "@img/sharp-linux-s390x": "0.34.1", "@img/sharp-linux-x64": "0.34.1", "@img/sharp-linuxmusl-arm64": "0.34.1", "@img/sharp-linuxmusl-x64": "0.34.1", "@img/sharp-wasm32": "0.34.1", "@img/sharp-win32-ia32": "0.34.1", "@img/sharp-win32-x64": "0.34.1" } }, "sha512-1j0w61+eVxu7DawFJtnfYcvSv6qPFvfTaqzTQ2BLknVhHTwGS8sc63ZBF4rzkWMBVKybo4S5OBtDdZahh2A1xg=="],
 
     "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
 

From 739e9dd85b6b4a1eb503f9e9a7baa02a31917010 Mon Sep 17 00:00:00 2001
From: Kian Bazza <kian@bazza.dev>
Date: Sat, 12 Apr 2025 23:13:13 -0400
Subject: [PATCH 8/8] build: use turbopack for builds

---
 apps/web/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index e630abde..2ff9bc75 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -6,7 +6,7 @@
     "dev": "next dev --turbopack",
     "test": "vitest",
     "test:watch": "vitest --watch --disable-console-intercept",
-    "build": "next build",
+    "build": "next build --turbo",
     "vercel:install": "./vercel-submodule.sh && bun install",
     "start": "next start",
     "lint": "next lint",