Util classname 1

package.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"
   },

src/components/ui/Accordion/fragments/AccordionContent.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 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/AccordionHeader.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/AccordionItem.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/AccordionRoot.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/AccordionTrigger.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/AlertDialog/fragments/AlertDialogContent.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/AlertDialogOverlay.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/AlertDialogRoot.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>

src/components/ui/Avatar/Avatar.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 import AvatarPrimitive from '~/core/primitives/Avatar';
 
 const COMPONENT_NAME = 'Avatar';
@@ -20,7 +20,7 @@ const Avatar = ({ customRootClass = '', fallback, className, src, alt, ...props
             <AvatarPrimitive.Image
                 src={src}
                 alt={alt}
-                className={className}
+                className={clsx(className)}
                 {...props}
             />
             <AvatarPrimitive.Fallback>

src/components/ui/AvatarGroup/AvatarGroup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 import AvatarGroupRoot from './fragments/AvatarGroupRoot';
 import AvatarPrimitiveRoot from '~/core/primitives/Avatar/fragments/AvatarPrimitiveRoot';
 import AvatarPrimitiveFallback from '~/core/primitives/Avatar/fragments/AvatarPrimitiveFallback';
@@ -18,7 +18,7 @@ type AvatarGroupProps = {
 }
 
 const AvatarGroup = ({ avatars = [], size, customRootClass = '', className, ...props }: AvatarGroupProps) => {
-    return <AvatarGroupRoot customRootClass={customRootClass} className={className} {...props} >
+    return <AvatarGroupRoot customRootClass={customRootClass} className={clsx(className)} {...props} >
         {avatars.map((avatar, index) => (
             <AvatarPrimitiveRoot key={index} src={avatar.src}>
                 <AvatarPrimitiveImage src={avatar.src} alt={avatar.alt} />

src/components/ui/AvatarGroup/fragments/AvatarGroupRoot.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core/customClassSwitcher';
 
 type AvatarGroupRootProps = {
@@ -11,7 +11,7 @@ type AvatarGroupRootProps = {
 const AvatarGroupRoot = ({ customRootClass = '', children, className, ...props }: AvatarGroupRootProps) => {
     const rootClass = customClassSwitcher(customRootClass, 'AvatarGroup');
     return (
-        <div className={`${rootClass} ${className}`} {...props}>
+        <div className={clsx(rootClass, className)} {...props}>
             {children}
         </div>
     );

src/components/ui/Badge/Badge.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import BadgeRoot from './fragments/BadgeRoot';
 import BadgeContent from './fragments/BadgeContent';
+import { clsx } from 'clsx';
 export type BadgeProps = {
     children?: React.ReactNode,
     customRootClass?: string,
@@ -11,7 +12,7 @@ export type BadgeProps = {
 }
 
 const Badge = ({ children, customRootClass, className, color, ...props }: BadgeProps) => {
-    return <BadgeRoot customRootClass={customRootClass} className={`${className}`} color={color ?? undefined} {...props}>
+    return <BadgeRoot customRootClass={customRootClass} className={clsx(className)} color={color ?? undefined} {...props}>
 
         <BadgeContent>
             {children}

src/components/ui/Badge/fragments/BadgeRoot.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Badge';
 
 type BadgeRootProps = {
@@ -15,7 +15,7 @@ const BadgeRoot = ({ children, customRootClass, className, color, ...props }:Bad
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
     return (
-        <span className= {`${rootClass} ${className}`} data-accent-color={color ?? undefined} {...props}>
+        <span className={clsx(rootClass, className)} data-accent-color={color ?? undefined} {...props}>
             {children}
         </span>
     );

src/components/ui/BlockQuote/BlockQuote.tsx

@@ -1,6 +1,6 @@
 'use client';
 import React from 'react';
-
+import { clsx } from 'clsx';
 import { customClassSwitcher } from '~/core';
 
 const COMPONENT_NAME = 'BlockQuote';
@@ -14,7 +14,7 @@ export type BlockQuoteProps = {
 const BlockQuote = ({ children, customRootClass, className, ...props }: BlockQuoteProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
-    return <blockquote className={`${rootClass} ${className}`} {...props}>{children}</blockquote>;
+    return <blockquote className={clsx(rootClass, className)} {...props}>{children}</blockquote>;
 };
 
 BlockQuote.displayName = COMPONENT_NAME;

src/components/ui/Button/Button.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React, { ButtonHTMLAttributes, DetailedHTMLProps, PropsWithChildren } from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 import ButtonPrimitive from '~/core/primitives/Button';
 
 // make the color prop default accent color
@@ -21,7 +21,7 @@ const Button = ({ children, type = 'button', customRootClass = '', className = '
     return (
         <ButtonPrimitive
             type={type}
-            className={`${rootClass} button-${variant} ${className} `} data-accent-color={color ?? undefined} data-size={size}
+            className={clsx(rootClass, 'button-${variant}', className, '')} data-accent-color={color ?? undefined} data-size={size}
             {...props}
         >
             {children}

src/components/ui/Callout/Callout.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { clsx } from 'clsx';
 /**
  * Shards
 */
@@ -15,7 +15,7 @@ export type CalloutProps = {
 
 const COMPONENT_NAME = 'Callout';
 const Callout = ({ children, className = '', color, customRootClass, ...props }: CalloutProps) => {
-    return (<CalloutRoot customRootClass={customRootClass} className={`${className}`} color={color ?? undefined} {...props}>
+    return (<CalloutRoot customRootClass={customRootClass} className={clsx(className)} color={color ?? undefined} {...props}>
         {children}
     </CalloutRoot>);
 };

src/components/ui/Callout/fragments/CalloutRoot.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Callout';
 
 type CalloutRootProps = {
@@ -13,7 +13,7 @@ type CalloutRootProps = {
 
 const CalloutRoot = ({ children, className, color, customRootClass, ...props }: CalloutRootProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <div className={`${rootClass} ${className}`} data-accent-color={color ?? undefined} {...props}>
+    return <div className={clsx(rootClass, className)} data-accent-color={color ?? undefined} {...props}>
         {children}
     </div>;
 };

src/components/ui/Card/Card.tsx

@@ -1,14 +1,14 @@
 import React, { PropsWithChildren } from 'react';
 import CardRoot from './fragments/CardRoot';
-
+import { clsx } from 'clsx';
 export type CardProps = {
     customRootClass?: string;
     className?: string;
     props?: any;
 } & React.ComponentProps<'div'>;
 
 const Card = ({ children, className = '', customRootClass, ...props }: PropsWithChildren<CardProps>) => (
-    <CardRoot className={className} customRootClass={customRootClass} {...props}>
+    <CardRoot className={clsx(className)} customRootClass={customRootClass} {...props}>
         {children}
     </CardRoot>
 );

src/components/ui/Card/fragments/CardRoot.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { customClassSwitcher } from '~/core';
-
+import { clsx } from 'clsx';
 const COMPONENT_NAME = 'Card';
 export type CardRootProps = {
     children: React.ReactNode;
@@ -13,7 +13,7 @@ const CardRoot = ({ children, customRootClass, className = '', ...props }: CardR
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
     return (
-        <div className={`${rootClass} ${className}`} {...props} >
+        <div className={clsx(rootClass, className)} {...props} >
             {children}
         </div>
     );

src/components/ui/Code/Code.tsx

@@ -1,12 +1,12 @@
 'use client';
 import React from 'react';
-
+import { clsx } from 'clsx';
 export type CodeProps= {
     children: React.ReactNode;
 }
 
 const Code = ({ children }: CodeProps) => {
-    return <code className='rui-code-root'>
+    return <code className={clsx('rui-code-root')}>
         {children}
     </code>;
 };