From 30dc6f2c7b2a0c293b435abe85800abbd75ec28a Mon Sep 17 00:00:00 2001 From: asowneryt Date: Wed, 30 Sep 2026 21:26:38 +1300 Subject: [PATCH] Migrate to the cn package - Ran `npx shadcn@latest migrate cn`: swaps clsx + tailwind-merge for cn - Import cn from "cn" everywhere (matches what `shadcn add` now writes) and remove the src/lib/utils.js re-export shim Co-Authored-By: Claude Opus 5.5 --- package-lock.json | 25 +++++++++++++------------ package.json | 3 +-- src/app/components/ContactButtons.js | 2 +- src/app/components/Navbar.js | 2 +- src/components/ui/accordion.jsx | 2 +- src/components/ui/alert.jsx | 2 +- src/components/ui/button.jsx | 2 +- src/components/ui/card.jsx | 2 +- src/components/ui/input.jsx | 2 +- src/components/ui/label.jsx | 2 +- src/components/ui/native-select.jsx | 2 +- src/components/ui/navigation-menu.jsx | 2 +- src/components/ui/radio-group.jsx | 2 +- src/components/ui/separator.jsx | 2 +- src/components/ui/sheet.jsx | 2 +- src/components/ui/table.jsx | 2 +- src/components/ui/textarea.jsx | 2 +- src/lib/utils.js | 6 ------ 18 files changed, 29 insertions(+), 35 deletions(-) delete mode 100644 src/lib/utils.js diff --git a/package-lock.json b/package-lock.json index 7f9dc72..e6bde64 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,14 +9,13 @@ "version": "0.1.0", "dependencies": { "class-variance-authority": "^0.7.1", - "clsx": "^2.1.1", + "cn": "^0.4.0", "lucide-react": "^1.49.0", "next": "^16.3.7", "radix-ui": "^1.6.7", "react": "^19.3.0", "react-dom": "^19.3.0", "sharp": "^0.35.5", - "tailwind-merge": "^3.7.0", "tw-animate-css": "^1.4.0" }, "devDependencies": { @@ -4458,6 +4457,18 @@ "node": ">=6" } }, + "node_modules/cn": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/cn/-/cn-0.4.0.tgz", + "integrity": "sha512-qOAeUhPwPzBxx6jaeQdo646XIKliKHc2j1ZF7Ngb1o0pJZKH5gq8FkA0aVdUdPFUDXNXyUCXpCtoJISo6dhizg==", + "license": "MIT", + "bin": { + "cn": "bin/cn.mjs" + }, + "engines": { + "node": ">=20" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -8179,16 +8190,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/tailwind-merge": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.7.0.tgz", - "integrity": "sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA==", - "license": "MIT", - "funding": { - "type": "github", - "url": "https://github.com/sponsors/dcastil" - } - }, "node_modules/tailwindcss": { "version": "4.3.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.3.tgz", diff --git a/package.json b/package.json index 2a50abd..b674cc4 100644 --- a/package.json +++ b/package.json @@ -10,14 +10,13 @@ }, "dependencies": { "class-variance-authority": "^0.7.1", - "clsx": "^2.1.1", + "cn": "^0.4.0", "lucide-react": "^1.49.0", "next": "^16.3.7", "radix-ui": "^1.6.7", "react": "^19.3.0", "react-dom": "^19.3.0", "sharp": "^0.35.5", - "tailwind-merge": "^3.7.0", "tw-animate-css": "^1.4.0" }, "devDependencies": { diff --git a/src/app/components/ContactButtons.js b/src/app/components/ContactButtons.js index cff41dc..a4a6928 100644 --- a/src/app/components/ContactButtons.js +++ b/src/app/components/ContactButtons.js @@ -1,7 +1,7 @@ import Link from "next/link"; import { MessageCircle, MessageSquare, Phone } from "lucide-react"; import { Button } from "@/components/ui/button"; -import { cn } from "@/lib/utils"; +import { cn } from "cn"; import { business, links } from "@/lib/site"; // Call / Text (and optionally WhatsApp and Get a quote) buttons. diff --git a/src/app/components/Navbar.js b/src/app/components/Navbar.js index c920e7d..9a439bc 100644 --- a/src/app/components/Navbar.js +++ b/src/app/components/Navbar.js @@ -23,7 +23,7 @@ import { SheetTitle, SheetTrigger, } from "@/components/ui/sheet"; -import { cn } from "@/lib/utils"; +import { cn } from "cn"; import { business } from "@/lib/site"; import { services } from "@/lib/services"; diff --git a/src/components/ui/accordion.jsx b/src/components/ui/accordion.jsx index 9240b64..bf0d75d 100644 --- a/src/components/ui/accordion.jsx +++ b/src/components/ui/accordion.jsx @@ -4,7 +4,7 @@ import * as React from "react" import { Accordion as AccordionPrimitive } from "radix-ui" import { ChevronDownIcon } from "lucide-react" -import { cn } from "@/lib/utils" +import { cn } from "cn" function Accordion({ ...props diff --git a/src/components/ui/alert.jsx b/src/components/ui/alert.jsx index 607c06c..dad45aa 100644 --- a/src/components/ui/alert.jsx +++ b/src/components/ui/alert.jsx @@ -1,6 +1,6 @@ import * as React from "react" import { cva } from "class-variance-authority"; -import { cn } from "@/lib/utils" +import { cn } from "cn" const alertVariants = cva( "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx index e744b1c..78b55de 100644 --- a/src/components/ui/button.jsx +++ b/src/components/ui/button.jsx @@ -1,6 +1,6 @@ import * as React from "react" import { cva } from "class-variance-authority"; -import { cn } from "@/lib/utils" +import { cn } from "cn" import { Slot } from "radix-ui" const buttonVariants = cva( diff --git a/src/components/ui/card.jsx b/src/components/ui/card.jsx index 526c1b5..a82fe79 100644 --- a/src/components/ui/card.jsx +++ b/src/components/ui/card.jsx @@ -1,5 +1,5 @@ import * as React from "react" -import { cn } from "@/lib/utils" +import { cn } from "cn" function Card({ className, diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx index 292ed7d..9d426c1 100644 --- a/src/components/ui/input.jsx +++ b/src/components/ui/input.jsx @@ -1,5 +1,5 @@ import * as React from "react" -import { cn } from "@/lib/utils" +import { cn } from "cn" function Input({ className, diff --git a/src/components/ui/label.jsx b/src/components/ui/label.jsx index abc2406..bb8a0bb 100644 --- a/src/components/ui/label.jsx +++ b/src/components/ui/label.jsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { cn } from "@/lib/utils" +import { cn } from "cn" import { Label as LabelPrimitive } from "radix-ui" function Label({ diff --git a/src/components/ui/native-select.jsx b/src/components/ui/native-select.jsx index 3b06434..76dad1c 100644 --- a/src/components/ui/native-select.jsx +++ b/src/components/ui/native-select.jsx @@ -1,5 +1,5 @@ import * as React from "react" -import { cn } from "@/lib/utils" +import { cn } from "cn" import { ChevronDownIcon } from "lucide-react" function NativeSelect({ diff --git a/src/components/ui/navigation-menu.jsx b/src/components/ui/navigation-menu.jsx index d8a6826..118be8f 100644 --- a/src/components/ui/navigation-menu.jsx +++ b/src/components/ui/navigation-menu.jsx @@ -1,6 +1,6 @@ import * as React from "react" import { cva } from "class-variance-authority" -import { cn } from "@/lib/utils" +import { cn } from "cn" import { ChevronDownIcon } from "lucide-react" import { NavigationMenu as NavigationMenuPrimitive } from "radix-ui" diff --git a/src/components/ui/radio-group.jsx b/src/components/ui/radio-group.jsx index dfd1634..bcfdf3b 100644 --- a/src/components/ui/radio-group.jsx +++ b/src/components/ui/radio-group.jsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { cn } from "@/lib/utils" +import { cn } from "cn" import { CircleIcon } from "lucide-react" import { RadioGroup as RadioGroupPrimitive } from "radix-ui" diff --git a/src/components/ui/separator.jsx b/src/components/ui/separator.jsx index 8918101..dc11e85 100644 --- a/src/components/ui/separator.jsx +++ b/src/components/ui/separator.jsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { cn } from "@/lib/utils" +import { cn } from "cn" import { Separator as SeparatorPrimitive } from "radix-ui" function Separator({ diff --git a/src/components/ui/sheet.jsx b/src/components/ui/sheet.jsx index 37ad9ab..f1b94c0 100644 --- a/src/components/ui/sheet.jsx +++ b/src/components/ui/sheet.jsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { cn } from "@/lib/utils" +import { cn } from "cn" import { XIcon } from "lucide-react" import { Dialog as SheetPrimitive } from "radix-ui" diff --git a/src/components/ui/table.jsx b/src/components/ui/table.jsx index afed64f..64f19f6 100644 --- a/src/components/ui/table.jsx +++ b/src/components/ui/table.jsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { cn } from "@/lib/utils" +import { cn } from "cn" function Table({ className, diff --git a/src/components/ui/textarea.jsx b/src/components/ui/textarea.jsx index 2dba2c2..802c38a 100644 --- a/src/components/ui/textarea.jsx +++ b/src/components/ui/textarea.jsx @@ -1,5 +1,5 @@ import * as React from "react" -import { cn } from "@/lib/utils" +import { cn } from "cn" function Textarea({ className, diff --git a/src/lib/utils.js b/src/lib/utils.js deleted file mode 100644 index b20bf01..0000000 --- a/src/lib/utils.js +++ /dev/null @@ -1,6 +0,0 @@ -import { clsx } from "clsx"; -import { twMerge } from "tailwind-merge" - -export function cn(...inputs) { - return twMerge(clsx(inputs)); -}