chore: use-tailwind-merge-with-clsx

Author: tractorss

package.json

@@ -91,6 +91,7 @@
     "simplebar": "^5.3.6",
     "simplebar-react": "^2.3.6",
     "smooth-scroll-into-view-if-needed": "^1.1.33",
+    "tailwind-merge": "^3.0.2",
     "usehooks-ts": "^2.9.1"
   },
   "lint-staged": {

src/lib/accordion/accordion-item.tsx

@@ -3,8 +3,8 @@ import { useElementSize } from "../../hooks/useElementSize";
 import Plus from "../../assets/svgs/accordion/plus.svg";
 import Minus from "../../assets/svgs/accordion/minus.svg";
 
-import clsx from "clsx";
 import { Button } from "react-aria-components";
+import { cn } from "../../utils";
 
 interface AccordionItemProps {
   setExpanded: React.Dispatch<React.SetStateAction<number>>;
@@ -25,7 +25,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   return (
     <div className="my-2">
       <Button
-        className={clsx(
+        className={cn(
           "bg-klerosUIComponentsWhiteBackground border-klerosUIComponentsStroke border",
           "hover-medium-blue hover-short-transition hover:cursor-pointer",
           "rounded-[3px] px-8 py-[11.5px]",
@@ -35,18 +35,14 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
       >
         {title}
         {expanded ? (
-          <Minus
-            className={clsx("fill-klerosUIComponentsPrimaryText h-4 w-4")}
-          />
+          <Minus className={cn("fill-klerosUIComponentsPrimaryText h-4 w-4")} />
         ) : (
-          <Plus
-            className={clsx("fill-klerosUIComponentsPrimaryText h-4 w-4")}
-          />
+          <Plus className={cn("fill-klerosUIComponentsPrimaryText h-4 w-4")} />
         )}
       </Button>
       <div
         style={{ height: expanded ? `${height.toString()}px` : 0 }}
-        className={clsx(
+        className={cn(
           expanded ? `overflow-visible` : "overflow-hidden",
           "transition-[height] duration-(--klerosUIComponentsTransitionSpeed) ease-initial",
         )}

src/lib/accordion/custom.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useState } from "react";
 import AccordionItem from "./accordion-item";
-import clsx from "clsx";
+import { cn } from "../../utils";
 
 interface AccordionItem {
   title: ReactNode;
@@ -20,7 +20,7 @@ const CustomAccordion: React.FC<AccordionProps> = ({
   const [expanded, setExpanded] = useState(-1);
   return (
     <div
-      className={clsx("box-border flex w-[1000px] flex-col", className)}
+      className={cn("box-border flex w-[1000px] flex-col", className)}
       {...props}
     >
       {items.map((item, index) => (

src/lib/accordion/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useState } from "react";
 import AccordionItem from "./accordion-item";
-import clsx from "clsx";
+import { cn } from "../../utils";
 
 interface AccordionItem {
   title: string;
@@ -31,7 +31,7 @@ const Accordion: React.FC<AccordionProps> = ({
   const [expanded, setExpanded] = useState(defaultExpanded ?? -1);
   return (
     <div
-      className={clsx("box-border flex w-[1000px] flex-col", className)}
+      className={cn("box-border flex w-[1000px] flex-col", className)}
       {...props}
     >
       {items.map((item, index) => (

src/stories/accordion.stories.tsx

@@ -7,6 +7,8 @@ import Accordion from "../lib/accordion/index";
 
 const meta = {
   component: Accordion,
+  title: "Accordion",
+  tags: ["autodocs"],
 } satisfies Meta<typeof Accordion>;
 
 export default meta;

src/utils/index.ts

@@ -0,0 +1,6 @@
+import { twMerge } from "tailwind-merge";
+import clsx, { ClassValue } from "clsx";
+
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};

yarn.lock

@@ -1250,6 +1250,7 @@ __metadata:
     smooth-scroll-into-view-if-needed: "npm:^1.1.33"
     storybook: "npm:^8.6.4"
     styled-components: "npm:^5.3.3"
+    tailwind-merge: "npm:^3.0.2"
     tailwindcss: "npm:^4.0.11"
     typescript: "npm:^5.8.2"
     usehooks-ts: "npm:^2.9.1"
@@ -10394,6 +10395,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tailwind-merge@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "tailwind-merge@npm:3.0.2"
+  checksum: 10c0/73f528345e5130e7690c5c57701155849ae4f0834e0a4bf56bc03e25d4563d45d4905ff9c487a7dce9efdfa18689a223e78365962105ad0e2f2d1226216c66ef
+  languageName: node
+  linkType: hard
+
 "tailwindcss@npm:4.0.11, tailwindcss@npm:^4.0.11":
   version: 4.0.11
   resolution: "tailwindcss@npm:4.0.11"