chore: migrate to cn (#1150)

Author: sadmann7

package.json

@@ -52,8 +52,8 @@
     "@upstash/ratelimit": "^2.1.0",
     "@upstash/redis": "^1.38.4",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "cn": "^0.3.0",
     "date-fns": "^4.4.0",
     "drizzle-orm": "^0.45.2",
     "export-to-csv": "^1.5.0",
@@ -72,7 +72,6 @@
     "server-only": "^0.0.1",
     "shadcn": "4.21.0",
     "sonner": "^2.0.8",
-    "tailwind-merge": "^3.7.0",
     "uploadthing": "^7.7.4",
     "vaul": "^1.1.2",
     "zod": "^4.6.5"

pnpm-lock.yaml

@@ -23,7 +23,7 @@
         "label",
         "skeleton"
       ],
-      "dependencies": ["@tanstack/react-table", "lucide-react", "nuqs"],
+      "dependencies": ["@tanstack/react-table", "lucide-react", "nuqs", "cn"],
       "files": [
         {
           "path": "src/registry/bases/radix/components/data-table/data-table.tsx",
@@ -112,7 +112,7 @@
         "popover",
         "select"
       ],
-      "dependencies": ["@tanstack/react-table", "lucide-react"],
+      "dependencies": ["@tanstack/react-table", "lucide-react", "cn"],
       "files": [
         {
           "path": "src/registry/bases/radix/components/data-table/data-table-sort-list.tsx",
@@ -160,7 +160,7 @@
         "popover",
         "select"
       ],
-      "dependencies": ["@tanstack/react-table", "lucide-react", "nuqs"],
+      "dependencies": ["@tanstack/react-table", "lucide-react", "nuqs", "cn"],
       "files": [
         {
           "path": "src/registry/bases/radix/components/data-table/data-table-filter-list.tsx",
@@ -240,7 +240,7 @@
         "popover",
         "select"
       ],
-      "dependencies": ["@tanstack/react-table", "lucide-react", "nuqs"],
+      "dependencies": ["@tanstack/react-table", "lucide-react", "nuqs", "cn"],
       "files": [
         {
           "path": "src/registry/bases/radix/components/data-table/data-table-filter-menu.tsx",
@@ -317,7 +317,8 @@
         "@tanstack/react-table",
         "@tanstack/react-virtual",
         "lucide-react",
-        "sonner"
+        "sonner",
+        "cn"
       ],
       "files": [
         {
@@ -419,7 +420,7 @@
       "title": "Data Grid Select Column",
       "description": "A reusable select column definition for the data grid with checkbox selection and shift-click support",
       "registryDependencies": ["checkbox"],
-      "dependencies": ["@tanstack/react-table"],
+      "dependencies": ["@tanstack/react-table", "cn"],
       "files": [
         {
           "path": "src/registry/bases/radix/components/data-grid/data-grid-select-column.tsx",
@@ -448,7 +449,7 @@
         "popover",
         "select"
       ],
-      "dependencies": ["@tanstack/react-table", "lucide-react"],
+      "dependencies": ["@tanstack/react-table", "lucide-react", "cn"],
       "files": [
         {
           "path": "src/registry/bases/radix/components/data-grid/data-grid-sort-menu.tsx",
@@ -508,7 +509,7 @@
       "title": "Data Grid View Menu",
       "description": "A view menu component for the data grid to toggle column visibility",
       "registryDependencies": ["button", "command", "popover"],
-      "dependencies": ["@tanstack/react-table", "lucide-react"],
+      "dependencies": ["@tanstack/react-table", "lucide-react", "cn"],
       "files": [
         {
           "path": "src/registry/bases/radix/components/data-grid/data-grid-view-menu.tsx",
@@ -564,7 +565,7 @@
         "popover",
         "select"
       ],
-      "dependencies": ["@tanstack/react-table", "lucide-react"],
+      "dependencies": ["@tanstack/react-table", "lucide-react", "cn"],
       "files": [
         {
           "path": "src/registry/bases/radix/components/data-grid/data-grid-filter-menu.tsx",
@@ -613,7 +614,7 @@
       "title": "Data Grid Skeleton",
       "description": "A composable skeleton component for the data grid with toolbar and grid parts",
       "registryDependencies": ["skeleton"],
-      "dependencies": [],
+      "dependencies": ["cn"],
       "files": [
         {
           "path": "src/registry/bases/radix/components/data-grid/data-grid-skeleton.tsx",

registry.json

@@ -85,7 +85,7 @@ function withImportedDependencies(
 
   const next = [...(dependencies ?? [])];
 
-  for (const pkg of ["@base-ui/react", "@base-ui/utils"] as const) {
+  for (const pkg of ["@base-ui/react", "@base-ui/utils", "cn"] as const) {
     if (contents.some((content) => content.includes(`"${pkg}`))) {
       if (!next.includes(pkg)) next.push(pkg);
     }

scripts/build-registry.ts

@@ -1,9 +1,4 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+export { cn } from "cn";
 
 export function getAbsoluteUrl(path: string) {
   const normalizedPath = path.startsWith("/") ? path : `/${path}`;

src/lib/utils.ts

@@ -2,6 +2,7 @@
 
 import type { RowData } from "@tanstack/react-table";
 
+import { cn } from "cn";
 import * as React from "react";
 import { toast } from "sonner";
 
@@ -19,7 +20,6 @@ import {
   getUrlHref,
   parseLocalDate,
 } from "@/lib/data-grid-utils";
-import { cn } from "@/lib/utils";
 import { DataGridCellWrapper } from "@/registry/bases/base/components/data-grid/data-grid-cell-wrapper";
 import { Badge } from "@/registry/bases/base/ui/badge";
 import { Button } from "@/registry/bases/base/ui/button";

src/registry/bases/base/components/data-grid/data-grid-cell-variants.tsx

@@ -3,12 +3,12 @@
 import type { RowData } from "@tanstack/react-table";
 
 import { useMergedRefs } from "@base-ui/utils/useMergedRefs";
+import { cn } from "cn";
 import * as React from "react";
 
 import type { DataGridCellProps } from "@/lib/data-grid-types";
 
 import { getCellKey } from "@/lib/data-grid-utils";
-import { cn } from "@/lib/utils";
 import { useDataGridPresence } from "@/registry/bases/base/components/data-grid/data-grid-presence";
 
 interface DataGridCellWrapperProps<TData extends RowData>

src/registry/bases/base/components/data-grid/data-grid-cell-wrapper.tsx

@@ -9,12 +9,12 @@ import type {
   Table,
 } from "@tanstack/react-table";
 
+import { cn } from "cn";
 import * as React from "react";
 
 import type { DataGridFeatures } from "@/lib/data-grid-features";
 
 import { getColumnVariant } from "@/lib/data-grid-utils";
-import { cn } from "@/lib/utils";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,

src/registry/bases/base/components/data-grid/data-grid-column-header.tsx

@@ -7,6 +7,7 @@ import type {
   Table,
 } from "@tanstack/react-table";
 
+import { cn } from "cn";
 import * as React from "react";
 
 import type { DataGridFeatures } from "@/lib/data-grid-features";
@@ -18,7 +19,6 @@ import {
   getOperatorsForVariant,
 } from "@/lib/data-grid-filters";
 import { formatDate } from "@/lib/format";
-import { cn } from "@/lib/utils";
 import { Badge } from "@/registry/bases/base/ui/badge";
 import { Button } from "@/registry/bases/base/ui/button";
 import { useDirection } from "@/registry/bases/base/ui/direction";

src/registry/bases/base/components/data-grid/data-grid-filter-menu.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { cn } from "cn";
 import * as React from "react";
 
 import type {
@@ -8,7 +9,6 @@ import type {
 } from "@/lib/data-grid-types";
 
 import { useAsRef } from "@/hooks/use-as-ref";
-import { cn } from "@/lib/utils";
 import { Button } from "@/registry/bases/base/ui/button";
 import {
   Dialog,