tw-merge moved to own file

components/forms/formik/CheckboxField.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { Switch } from "@headlessui/react";
 import { IFormInput } from "@/lib/interfaces";
 import Label from "./Label";

components/forms/formik/ColorPickerField.tsx

@@ -1,5 +1,5 @@
 import { IFormInput } from "@/lib/interfaces";
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import Label from "./Label";
 import dynamic from "next/dynamic";
 

components/forms/formik/DatePickerField.tsx

@@ -1,5 +1,5 @@
 import { IFormInput } from "@/lib/interfaces";
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { format } from "date-fns";
 import Label from "./Label";
 import dynamic from "next/dynamic";

components/forms/formik/FormErrorMessage.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { FormikErrors } from "formik";
 
 type Props = {

components/forms/formik/Label.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 
 type Props = {
  label: string;

components/forms/formik/PasswordField.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { Eye, EyeOff } from "lucide-react";
 import { IFormInput } from "@/lib/interfaces";
 import dynamic from "next/dynamic";

components/forms/formik/TaskLabelsSelectField.tsx

@@ -3,7 +3,7 @@
 import { Fragment } from "react";
 import { Listbox, Transition } from "@headlessui/react";
 import { IFormInput } from "@/lib/interfaces";
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import getLabels from "@/app/actions/label/getLabels";
 import useSWR from "swr";
 import Label from "./Label";

components/forms/formik/TextField.tsx

@@ -1,5 +1,5 @@
 import { IFormInput } from "@/lib/interfaces";
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import dynamic from "next/dynamic";
 import Label from "./Label";
 

components/forms/formik/TextareaField.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { IFormInput } from "@/lib/interfaces";
 import Label from "./Label";
 import dynamic from "next/dynamic";

components/navigation/components/NavLink.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 

components/providers/TaskProvider.tsx

@@ -4,7 +4,7 @@ import { ITask } from "@/lib/interfaces";
 import { useState } from "react";
 import { TaskContext } from "../context/TaskContext";
 import dynamic from "next/dynamic";
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { format } from "date-fns";
 import { toast } from "sonner";
 import useSound from "../hooks/useSound";

components/task/AddTaskButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { Plus } from "lucide-react";
 import Button from "../ui/Button";
 import { useContext } from "react";

components/task/TaskDetailsContainer.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { X } from "lucide-react";
 import ButtonIcon from "../ui/ButtonIcon";
 import TaskDetails from "./components/TaskDetails";

components/task/components/SortTasksListbox.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { Listbox, Transition } from "@headlessui/react";
 import {
  ArrowDown01,

components/task/components/Task.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { cn, getDueDateText } from "@/lib/utils";
+import cn from "@/lib/cn";
+import { getDueDateText } from "@/lib/utils";
 import { isPast } from "date-fns";
 import { Check, Star, ReceiptText } from "lucide-react";
 import React, { useContext, useEffect } from "react";

components/ui/Alert.tsx

@@ -1,6 +1,6 @@
-import { AlertVariants, alert } from "../cva/alert";
+import alert, { AlertVariants } from "../cva/alert";
 import { AlertOctagon, AlertTriangle, CheckCircle, Info } from "lucide-react";
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 
 interface Props {
  variant: AlertVariants;

components/ui/AtSign.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 
 interface Props {
  className?: string;

components/ui/Button.tsx

@@ -1,5 +1,5 @@
-import { cn } from "@/lib/utils";
-import { ButtonVariants, button } from "../cva/button";
+import cn from "@/lib/cn";
+import button, { ButtonVariants } from "../cva/button";
 import Spinner from "./Spinner";
 
 interface Props extends React.ComponentProps<"button"> {

components/ui/ButtonIcon.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import Spinner from "./Spinner";
 
 interface Props extends React.ComponentProps<"button"> {

components/ui/Chip.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 
 interface Props extends React.ComponentProps<"button"> {
  title: string;

components/ui/DisclousureContainer.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { Disclosure, Transition } from "@headlessui/react";
 import { ChevronDown } from "lucide-react";
 

components/ui/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { Menu, Transition } from "@headlessui/react";
 import { ChevronDownIcon } from "lucide-react";
 import { Fragment } from "react";

components/ui/DropdownListItem.tsx

@@ -1,5 +1,5 @@
 import { INavLink } from "@/lib/interfaces";
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { Menu } from "@headlessui/react";
 import Link from "next/link";
 

components/ui/Logo.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import { Bell } from "lucide-react";
 import Link from "next/link";
 

components/ui/Modal.tsx

@@ -3,7 +3,7 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment } from "react";
 import { X } from "lucide-react";
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import ButtonIcon from "./ButtonIcon";
 
 interface Props {

components/ui/PageTitle.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 
 interface Props {
  children: React.ReactNode;

components/ui/SideBar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { X } from "lucide-react";
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 import dynamic from "next/dynamic";
 
 const Logo = dynamic(() => import("./Logo"), { loading: () => <span></span> });

components/ui/Skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 
 interface Props {
  className?: string;

components/ui/Spinner.tsx

@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import cn from "@/lib/cn";
 
 interface Props {
  className?: string;

lib/cn.ts

@@ -0,0 +1,6 @@
+import { twMerge } from "tailwind-merge";
+import { clsx, ClassValue } from "clsx";
+
+export default function cn(...args: ClassValue[]) {
+ return twMerge(clsx(args));
+}

lib/utils.ts

@@ -1,13 +1,7 @@
-import { twMerge } from "tailwind-merge";
-import { clsx, ClassValue } from "clsx";
 import { validate } from "uuid";
 import { format, isToday, isTomorrow } from "date-fns";
 import { enUS } from "date-fns/locale";
 
-export function cn(...args: ClassValue[]) {
- return twMerge(clsx(args));
-}
-
 export const isUUID = (id: string | null | undefined): boolean => {
  return !!id && validate(id);
 };