Util classname 3

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;

src/components/ui/Skeleton/Skeleton.tsx

@@ -1,15 +1,15 @@
 '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) => {
     // If loading is false, return the children
     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>;
 };

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>
     );
 };
 

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>
         </>
     );

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>;
 };

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>;
 };

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>;
 };

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>;
 };

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>;

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>;
 };

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>;

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>;
 };

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>

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}

src/components/ui/Text/Text.tsx

@@ -1,14 +1,15 @@
 '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
 // TODO: Add a core reusable function to check and render an as prop
 
 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
     );
 };

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>

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>;
 };

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'}

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}

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