Util function to solve className issue

Author: GoldGroove06

package-lock.json

@@ -129,6 +129,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.20",
+    "clsx": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package.json

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { AccordionContext } from '../contexts/AccordionContext';
 import { AccordionItemContext } from '../contexts/AccordionItemContext';
+import { clsx } from 'clsx';
 
 type AccordionContentProps = {
   children: React.ReactNode;
@@ -16,7 +17,7 @@ const AccordionContent: React.FC<AccordionContentProps> = ({ children, index, ac
 
     return (
         <div
-            className={`${rootClass}-content ${className}`}
+            className={clsx(`${rootClass}-content`, className)}
             id={`content-${index}`}
             role="region"
             aria-labelledby={`section-${index}`}

src/components/ui/Accordion/fragments/AccordionContent.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { clsx } from 'clsx';
 
 export type AccordionHeaderProps = {
     children: React.ReactNode;
@@ -7,7 +8,7 @@ export type AccordionHeaderProps = {
 
 const AccordionHeader: React.FC<AccordionHeaderProps> = ({ children, className = '' }) => {
     return (
-        <div className={className}>
+        <div className={clsx(className)}>
             {children}
         </div>
     );

src/components/ui/Accordion/fragments/AccordionHeader.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext, useId, useEffect, useRef } from 'react';
-
+import { clsx } from 'clsx';
 import { AccordionContext } from '../contexts/AccordionContext';
 import { AccordionItemContext } from '../contexts/AccordionItemContext';
 
@@ -61,7 +61,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({ children, value, classNam
         <AccordionItemContext.Provider value={{ itemValue, setItemValue, handleBlurEvent, handleClickEvent, handleFocusEvent }}>
             <div
                 ref={accordionItemRef}
-                className={`${rootClass}-item ${className}`} {...props}
+                className={clsx(`${rootClass}-item`, className)} {...props}
                 id={`accordion-data-item-${id}`}
                 role="region"
                 aria-labelledby={`accordion-trigger-${id}`}

src/components/ui/Accordion/fragments/AccordionItem.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 import { AccordionContext } from '../contexts/AccordionContext';
 import { getAllBatchElements, getNextBatchItem, getPrevBatchItem } from '~/core/batches';
@@ -55,7 +55,7 @@ const AccordionRoot = ({ children, customRootClass }: AccordionRootProps) => {
                 accordionRef
 
             }}>
-            <div className={`${rootClass}-root`} ref={accordionRef} >
+            <div className={clsx(${rootClass}-root)} ref={accordionRef} >
                 {children}
             </div>
         </AccordionContext.Provider>

src/components/ui/Accordion/fragments/AccordionRoot.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { AccordionContext } from '../contexts/AccordionContext';
 import { AccordionItemContext } from '../contexts/AccordionItemContext';
+import { clsx } from 'clsx';
 
 type AccordionTriggerProps = {
   children: React.ReactNode;
@@ -31,7 +32,7 @@ const AccordionTrigger: React.FC<AccordionTriggerProps> = ({ children, index, cl
 
         <button
             type="button"
-            className={`${rootClass}-trigger ${className}`}
+            className={clsx(`${rootClass}-trigger`, className)}
             onBlur={handleBlurEvent}
             onFocus={onFocusHandler}
             onKeyDown={(e) => {

src/components/ui/Accordion/fragments/AccordionTrigger.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { AlertDialogContext } from '../contexts/AlertDialogContext';
-
+import { clsx } from 'clsx';
 export type AlertDialogContentProps = {
     children: React.ReactNode;
 }
@@ -11,7 +11,7 @@ const AlertDialogContent = ({ children } : AlertDialogContentProps) => {
     return (
         <>
             {isOpen && (
-                <div className={`${rootClass}-content`}>
+                <div className={clsx(`${rootClass}-content`)}>
                     {children}
                 </div>
             )}

src/components/ui/AlertDialog/fragments/AlertDialogContent.tsx

@@ -1,14 +1,14 @@
 import React, { useContext } from 'react';
 import Floater from '~/core/primitives/Floater';
 import { AlertDialogContext } from '../contexts/AlertDialogContext';
-
+import { clsx } from 'clsx';
 const AlertDialogOverlay = () => {
     const { isOpen, rootClass, handleOverlayClick } = useContext(AlertDialogContext);
     return (
         <>
             {isOpen && (
                 <Floater.Overlay
-                    className={`${rootClass}-overlay`} onClick={handleOverlayClick}>
+                    className={clsx(`${rootClass}-overlay`)} onClick={handleOverlayClick}>
 
                 </Floater.Overlay>
             )}

src/components/ui/AlertDialog/fragments/AlertDialogOverlay.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { customClassSwitcher } from '~/core';
 import { AlertDialogContext } from '../contexts/AlertDialogContext';
-
+import { clsx } from 'clsx';
 import Floater from '~/core/primitives/Floater';
 
 export type AlertDialogRootProps = {
@@ -31,7 +31,7 @@ const AlertDialogRoot = ({ children, customRootClass = '', open, onOpenChange, o
     const props = { isOpen, handleOpenChange, floaterContext, rootClass, handleOverlayClick };
     return (
         <AlertDialogContext.Provider value={props}>
-            <div className={rootClass} >
+            <div className={clsx(rootClass)} >
                 {children}
             </div>
         </AlertDialogContext.Provider>