Util for className 1

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