From 5bc3860f211c74dd198ccc5a031559aac9200c31 Mon Sep 17 00:00:00 2001
From: Arshpreet Singh <73437174+GoldGroove06@users.noreply.github.com.>
Date: Wed, 11 Dec 2024 13:02:58 +0530
Subject: [PATCH] Util classname 3

---
 src/components/ui/Separator/Separator.tsx                   | 4 ++--
 src/components/ui/Skeleton/Skeleton.tsx                     | 4 ++--
 src/components/ui/Strong/Strong.tsx                         | 4 ++--
 src/components/ui/Switch/Switch.tsx                         | 3 ++-
 src/components/ui/Table/fragments/TableBody.tsx             | 3 ++-
 src/components/ui/Table/fragments/TableCell.tsx             | 3 ++-
 src/components/ui/Table/fragments/TableColumnCellHeader.tsx | 3 ++-
 src/components/ui/Table/fragments/TableHead.tsx             | 3 ++-
 src/components/ui/Table/fragments/TableRoot.tsx             | 6 +++---
 src/components/ui/Table/fragments/TableRow.tsx              | 3 ++-
 src/components/ui/Tabs/fragments/TabContent.tsx             | 3 ++-
 src/components/ui/Tabs/fragments/TabList.tsx                | 4 ++--
 src/components/ui/Tabs/fragments/TabRoot.tsx                | 4 ++--
 src/components/ui/Tabs/fragments/TabTrigger.tsx             | 4 ++--
 src/components/ui/Text/Text.tsx                             | 5 +++--
 src/components/ui/TextArea/TextArea.tsx                     | 4 ++--
 src/components/ui/TextArea/fragments/TextAreaRoot.tsx       | 3 ++-
 src/components/ui/Toggle/Toggle.tsx                         | 4 ++--
 src/components/ui/ToggleGroup/fragments/ToggleGroupRoot.tsx | 4 ++--
 src/components/ui/Tree/fragments/TreeItem.tsx               | 3 ++-
 20 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/components/ui/Separator/Separator.tsx b/src/components/ui/Separator/Separator.tsx
index dea62a6b..7b75e11e 100644
--- a/src/components/ui/Separator/Separator.tsx
+++ b/src/components/ui/Separator/Separator.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Separator';
 
 export type SeparatorProps = {
@@ -14,7 +14,7 @@ const Separator = ({ orientation = 'horizontal', className, customRootClass, ...
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     const orientationClass = orientation === 'vertical' ? `${rootClass}-vertical` : `${rootClass}-horizontal`;
 
-    return <div className={`${rootClass} ${orientationClass} ${className}`} {...props} ></div>;
+    return <div className={clsx(rootClass, orientationClass, className)} {...props} ></div>;
 };
 
 Separator.displayName = COMPONENT_NAME;
diff --git a/src/components/ui/Skeleton/Skeleton.tsx b/src/components/ui/Skeleton/Skeleton.tsx
index 4a9a2f72..a880a2b2 100644
--- a/src/components/ui/Skeleton/Skeleton.tsx
+++ b/src/components/ui/Skeleton/Skeleton.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Skeleton';
 
 const Skeleton = ({ loading = true, className = '', customRootClass = '', children, ...props }:any) => {
@@ -9,7 +9,7 @@ const Skeleton = ({ loading = true, className = '', customRootClass = '', childr
     if (!loading) return children;
 
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <span className={`${rootClass} ${className}`} {...props} >
+    return <span className={clsx(rootClass, className)} {...props} >
         {children}
     </span>;
 };
diff --git a/src/components/ui/Strong/Strong.tsx b/src/components/ui/Strong/Strong.tsx
index 6089eb0b..983b3faa 100644
--- a/src/components/ui/Strong/Strong.tsx
+++ b/src/components/ui/Strong/Strong.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 const COMPONENT_NAME = 'Strong';
 
@@ -12,7 +12,7 @@ export type StrongProps = {
 const Strong = ({ children, className, customRootClass, ...props }: StrongProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     return (
-        <strong className={`${rootClass} ${className}`} {...props} >{children}</strong>
+        <strong className={clsx(rootClass, className)} {...props} >{children}</strong>
     );
 };
 
diff --git a/src/components/ui/Switch/Switch.tsx b/src/components/ui/Switch/Switch.tsx
index 5d7d10c8..059c6547 100644
--- a/src/components/ui/Switch/Switch.tsx
+++ b/src/components/ui/Switch/Switch.tsx
@@ -1,6 +1,7 @@
 'use client';
 import React, { useState } from 'react';
 import { customClassSwitcher } from '~/core';
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Switch';
 
 export type SwitchProps = {
@@ -26,7 +27,7 @@ const Switch = ({ children, customRootClass = '', className = '', color = '', de
     };
     return (
         <>
-            <input type='checkbox' className={`${rootClass}`} {...props} checked= {isChecked}/>
+            <input type='checkbox' className={clsx(rootClass)} {...props} checked= {isChecked}/>
             <button type="button" onClick={handleChecked} role="switch"></button>
         </>
     );
diff --git a/src/components/ui/Table/fragments/TableBody.tsx b/src/components/ui/Table/fragments/TableBody.tsx
index 5c41648d..034fdcfd 100644
--- a/src/components/ui/Table/fragments/TableBody.tsx
+++ b/src/components/ui/Table/fragments/TableBody.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { clsx } from 'clsx';
 
 const TableBody = ({ children, className = '', ...props }:any) => {
-    return <tbody className={className} {...props} >
+    return <tbody className={clsx(className)} {...props} >
         {children}
     </tbody>;
 };
diff --git a/src/components/ui/Table/fragments/TableCell.tsx b/src/components/ui/Table/fragments/TableCell.tsx
index c7d7cd31..8da94437 100644
--- a/src/components/ui/Table/fragments/TableCell.tsx
+++ b/src/components/ui/Table/fragments/TableCell.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { clsx } from 'clsx';
 
 const TableCell = ({ children, className = 'cell', ...props }:any) => {
-    return <td className={className} {...props} >
+    return <td className={clsx(className)} {...props} >
         {children}
     </td>;
 };
diff --git a/src/components/ui/Table/fragments/TableColumnCellHeader.tsx b/src/components/ui/Table/fragments/TableColumnCellHeader.tsx
index 3e218d5a..ca066443 100644
--- a/src/components/ui/Table/fragments/TableColumnCellHeader.tsx
+++ b/src/components/ui/Table/fragments/TableColumnCellHeader.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { clsx } from 'clsx';
 
 const TableColumnCellHeader = ({ children, className = 'cell-header', ...props }:any) => {
-    return <th className={className} {...props}>
+    return <th className={clsx(className)} {...props}>
         {children}
     </th>;
 };
diff --git a/src/components/ui/Table/fragments/TableHead.tsx b/src/components/ui/Table/fragments/TableHead.tsx
index c2f5ae21..5f21dab0 100644
--- a/src/components/ui/Table/fragments/TableHead.tsx
+++ b/src/components/ui/Table/fragments/TableHead.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { clsx } from 'clsx';
 
 const TableHead = ({ children, className = 'header', ...props }:any) => {
-    return <thead className={className} {...props} >
+    return <thead className={clsx(className)} {...props} >
         {children}
     </thead>;
 };
diff --git a/src/components/ui/Table/fragments/TableRoot.tsx b/src/components/ui/Table/fragments/TableRoot.tsx
index 13624cd4..722c22af 100644
--- a/src/components/ui/Table/fragments/TableRoot.tsx
+++ b/src/components/ui/Table/fragments/TableRoot.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 
 const COMPONENT_NAME = 'Table';
@@ -11,9 +11,9 @@ const TableRoot = ({ children, className = '', customRootClass = '', ...props }:
     // so we created a new class for <table> element as a one off case in pattern when it comes to naming classes/conventions
     // this is because we cant style the table element directly, so we'll need to wrap it in a div and style it instead
 
-    return <div className={`${rootClass}-wrapper ${className}`} {...props} >
+    return <div className={clsx(`${rootClass}-wrapper`, className)} {...props} >
         {/* Todo: need to break this down into its own wrapper component */}
-        <table className={rootClass}>
+        <table className={clsx(rootClass)}>
             {children}
         </table>
     </div>;
diff --git a/src/components/ui/Table/fragments/TableRow.tsx b/src/components/ui/Table/fragments/TableRow.tsx
index 2d25911b..a113b191 100644
--- a/src/components/ui/Table/fragments/TableRow.tsx
+++ b/src/components/ui/Table/fragments/TableRow.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { clsx } from 'clsx';
 
 const TableRow = ({ children, className = 'row', ...props }:any) => {
-    return <tr className={className} {...props} >
+    return <tr className={clsx(className)} {...props} >
         {children}
     </tr>;
 };
diff --git a/src/components/ui/Tabs/fragments/TabContent.tsx b/src/components/ui/Tabs/fragments/TabContent.tsx
index d1f40e33..5891983e 100644
--- a/src/components/ui/Tabs/fragments/TabContent.tsx
+++ b/src/components/ui/Tabs/fragments/TabContent.tsx
@@ -3,6 +3,7 @@ import React, { useContext } from 'react';
 import { customClassSwitcher } from '~/core';
 import { TabProps } from '../types';
 import TabsRootContext from '../context/TabsRootContext';
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'TabContent';
 
 export type TabContentProps ={
@@ -17,7 +18,7 @@ const TabContent = ({ className, customRootClass }: TabContentProps) => {
 
     const { tabs, activeTab, setActiveTab } = useContext(TabsRootContext);
 
-    return <div className={`${rootClass} ${className}`}>
+    return <div className={clsx(rootClass, className)}>
         {tabs.map((tab, index) => {
             if (tab.value === activeTab) {
                 return <div key={index}>{tab.content}</div>;
diff --git a/src/components/ui/Tabs/fragments/TabList.tsx b/src/components/ui/Tabs/fragments/TabList.tsx
index 6aeca48f..bd37118a 100644
--- a/src/components/ui/Tabs/fragments/TabList.tsx
+++ b/src/components/ui/Tabs/fragments/TabList.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React, { useContext } from 'react';
-
+import { clsx } from 'clsx';
 import TabTrigger from './TabTrigger';
 import { TabProps } from '../types';
 import TabsRootContext from '../context/TabsRootContext';
@@ -17,7 +17,7 @@ export type TabListProps = {
 
 const TabList = ({ className = '', children }: TabListProps) => {
     const { rootClass } = useContext(TabsRootContext);
-    return <div role="tablist" aria-orientation='horizontal' aria-label="todo" className={`${rootClass}-list ${className}`}>
+    return <div role="tablist" aria-orientation='horizontal' aria-label="todo" className={clsx(`${rootClass}-list`, className)}>
         {children}
     </div>;
 };
diff --git a/src/components/ui/Tabs/fragments/TabRoot.tsx b/src/components/ui/Tabs/fragments/TabRoot.tsx
index 721c4d84..8cc1eee3 100644
--- a/src/components/ui/Tabs/fragments/TabRoot.tsx
+++ b/src/components/ui/Tabs/fragments/TabRoot.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useState, useRef } from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 import TabsRootContext from '../context/TabsRootContext';
 import { getAllBatchElements, getNextBatchItem, getPrevBatchItem } from '~/core/batches';
 
@@ -38,7 +38,7 @@ const TabRoot = ({ children, defaultTab = '', customRootClass, tabs = [], classN
     return (
         <TabsRootContext.Provider
             value={contextValues}>
-            <div ref={tabRef} className={`${rootClass} ${className}`} data-accent-color={color} {...props} >
+            <div ref={tabRef} className={clsx(rootClass, className)} data-accent-color={color} {...props} >
                 {children}
             </div>
         </TabsRootContext.Provider>
diff --git a/src/components/ui/Tabs/fragments/TabTrigger.tsx b/src/components/ui/Tabs/fragments/TabTrigger.tsx
index 5f481930..a8c70e3e 100644
--- a/src/components/ui/Tabs/fragments/TabTrigger.tsx
+++ b/src/components/ui/Tabs/fragments/TabTrigger.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React, { useContext, useRef } from 'react';
-
+import { clsx } from 'clsx';
 import { TabProps } from '../types';
 
 import TabsRootContext from '../context/TabsRootContext';
@@ -49,7 +49,7 @@ const TabTrigger = ({ tab, className = '', ...props }: TabTriggerProps) => {
     return (
         <button
             ref={ref}
-            role="tab" className={`${rootClass}-trigger ${isActive ? 'active' : ''} ${className}`} {...props} onKeyDown={handleKeyDownEvent}
+            role="tab" className={clsx(`${rootClass}-trigger`, `${isActive ? 'active' : ''}`, className)} {...props} onKeyDown={handleKeyDownEvent}
             onClick={() => handleClick(tab)}
             onFocus={() => handleFocus(tab)}
             tabIndex={isActive ? 0 : -1}
diff --git a/src/components/ui/Text/Text.tsx b/src/components/ui/Text/Text.tsx
index fab28ca7..01e9bf47 100644
--- a/src/components/ui/Text/Text.tsx
+++ b/src/components/ui/Text/Text.tsx
@@ -1,6 +1,7 @@
 'use client';
 import React from 'react';
 import { customClassSwitcher } from '~/core';
+import { clsx } from 'clsx';
 
 // Can be rendered as p, label, div, span, etc.
 // TODO: Add as prop support
@@ -8,7 +9,7 @@ import { customClassSwitcher } from '~/core';
 
 const COMPONENT_NAME = 'Text';
 
-const TAGS = ['div', 'span', 'p', 'label'];
+const TAGS = ['div', 'span', 'p', 'label']
 
 export type TextProps = {
     children: React.ReactNode;
@@ -24,7 +25,7 @@ const Text = ({ children, customRootClass = '', className = '', as = 'p', ...pro
 
     return React.createElement(
         as,
-        { className: `${rootClassName} ${className}`, ...props },
+        { className: clsx(rootClassName, className), ...props },
         children
     );
 };
diff --git a/src/components/ui/TextArea/TextArea.tsx b/src/components/ui/TextArea/TextArea.tsx
index 05103ecb..8b875390 100644
--- a/src/components/ui/TextArea/TextArea.tsx
+++ b/src/components/ui/TextArea/TextArea.tsx
@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-
+import { clsx } from 'clsx';
 import TextAreaRoot from './fragments/TextAreaRoot';
 import TextAreaInput from './fragments/TextAreaInput';
 
@@ -11,7 +11,7 @@ export type TextAreaProps = {
 }
 
 const TextArea = ({ customRootClass = '', className = '', children, ...props }: TextAreaProps) => {
-    return <TextAreaRoot customRootClass={customRootClass} className={`${className}`}>
+    return <TextAreaRoot customRootClass={customRootClass} className={clsx(className)}>
         <TextAreaInput placeholder="enter text">
             {children}
         </TextAreaInput>
diff --git a/src/components/ui/TextArea/fragments/TextAreaRoot.tsx b/src/components/ui/TextArea/fragments/TextAreaRoot.tsx
index cce978af..ffd6e707 100644
--- a/src/components/ui/TextArea/fragments/TextAreaRoot.tsx
+++ b/src/components/ui/TextArea/fragments/TextAreaRoot.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
+import { clsx } from 'clsx';
 
 const COMPONENT_NAME = 'TextArea';
 
@@ -11,7 +12,7 @@ export type TextAreaProps = {
 
 const TextAreaRoot = ({ children, customRootClass = '', className = '' }:TextAreaProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <div className={`${rootClass}${className}`}>
+    return <div className={clsx(rootClass, className)}>
         {children}
     </div>;
 };
diff --git a/src/components/ui/Toggle/Toggle.tsx b/src/components/ui/Toggle/Toggle.tsx
index 3ff09ca5..9a238d9f 100644
--- a/src/components/ui/Toggle/Toggle.tsx
+++ b/src/components/ui/Toggle/Toggle.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 
 import TogglePrimitive from '~/core/primitives/Toggle';
@@ -43,7 +43,7 @@ const Toggle: React.FC<ToggleProps> = ({
     return (
 
         <TogglePrimitive
-            className={`${rootClass}`}
+            className={clsx(rootClass)}
             pressed={isPressed}
             onPressedChange={handlePressed}
             data-state={isPressed ? 'on' : 'off'}
diff --git a/src/components/ui/ToggleGroup/fragments/ToggleGroupRoot.tsx b/src/components/ui/ToggleGroup/fragments/ToggleGroupRoot.tsx
index 9199a254..a13bb135 100644
--- a/src/components/ui/ToggleGroup/fragments/ToggleGroupRoot.tsx
+++ b/src/components/ui/ToggleGroup/fragments/ToggleGroupRoot.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 import { getAllBatchElements, getNextBatchItem, getPrevBatchItem } from '~/core/batches';
 
@@ -38,7 +38,7 @@ const ToggleGroupRoot = ({ type = 'multiple', className = '', loop = true, custo
     };
 
     return (
-        <div className={`${rootClass} ${className}`} role="group" ref={toggleGroupRef}>
+        <div className={clsx(rootClass, className)} role="group" ref={toggleGroupRef}>
             <ToggleContext.Provider
                 value={sendValues}>
                 {children}
diff --git a/src/components/ui/Tree/fragments/TreeItem.tsx b/src/components/ui/Tree/fragments/TreeItem.tsx
index 9f3f2d8a..7443f096 100644
--- a/src/components/ui/Tree/fragments/TreeItem.tsx
+++ b/src/components/ui/Tree/fragments/TreeItem.tsx
@@ -1,6 +1,7 @@
 import React, { useContext, useId, useRef, useState } from 'react';
 import ButtonPrimitive from '~/core/primitives/Button';
 import { TreeContext } from '../contexts/TreeContext';
+import { clsx } from 'clsx';
 
 type TreeItemProps = {
     children: React.ReactNode;
@@ -60,7 +61,7 @@ const TreeItem = ({ children, item, level = 0, className = '', ...props }: TreeI
     return <>
 
         <ButtonPrimitive
-            className={className}
+            className={clsx(className)}
             ref={buttonRef}
             onClick={handleClick}
             data-rad-ui-batch-element