chore: replace classnames with clsx

apps/site/app/[locale]/layout.tsx

@@ -1,6 +1,6 @@
 import { Analytics } from '@vercel/analytics/react';
 import { SpeedInsights } from '@vercel/speed-insights/next';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
 
 import BaseLayout from '@/layouts/Base';
@@ -12,7 +12,7 @@ import { ThemeProvider } from '@/providers/themeProvider';
 
 import '@/styles/index.css';
 
-const fontClasses = classNames(IBM_PLEX_MONO.variable, OPEN_SANS.variable);
+const fontClasses = clsx(IBM_PLEX_MONO.variable, OPEN_SANS.variable);
 
 type RotLayoutProps = PropsWithChildren<{ params: { locale: string } }>;
 

apps/site/components/Common/ActiveLink/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { ComponentProps, FC } from 'react';
 
 import Link from '@/components/Link';
@@ -21,7 +21,7 @@ const ActiveLink: FC<ActiveLocalizedLinkProps> = ({
 }) => {
   const pathname = usePathname();
 
-  const finalClassName = classNames(className, {
+  const finalClassName = clsx(className, {
     [activeClassName]: allowSubPath
       ? // When using allowSubPath we want only to check if
         // the current pathname starts with the utmost upper level

apps/site/components/Common/AvatarGroup/Avatar/index.tsx

@@ -1,5 +1,5 @@
 import * as RadixAvatar from '@radix-ui/react-avatar';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { ComponentPropsWithoutRef, ElementRef } from 'react';
 import { forwardRef } from 'react';
 
@@ -25,7 +25,7 @@ const Avatar = forwardRef<
   return (
     <RadixAvatar.Root
       {...props}
-      className={classNames(styles.avatar, styles[size], props.className)}
+      className={clsx(styles.avatar, styles[size], props.className)}
       ref={ref}
     >
       <Wrapper
@@ -41,7 +41,7 @@ const Avatar = forwardRef<
         />
         <RadixAvatar.Fallback
           delayMs={500}
-          className={classNames(styles.item, styles[size])}
+          className={clsx(styles.item, styles[size])}
         >
           {fallback}
         </RadixAvatar.Fallback>

apps/site/components/Common/AvatarGroup/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC } from 'react';
 import { useState, useMemo, Fragment } from 'react';
 
@@ -46,7 +46,7 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
             <Avatar
               {...avatar}
               size={size}
-              className={classNames({
+              className={clsx({
                 'cursor-pointer': avatar.url,
                 'pointer-events-none': !avatar.url,
               })}
@@ -57,7 +57,7 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
       {avatars.length > limit && (
         <span
           onClick={isExpandable ? () => setShowMore(prev => !prev) : undefined}
-          className={classNames(
+          className={clsx(
             avatarstyles.avatar,
             avatarstyles[size],
             'cursor-pointer'

apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.tsx

@@ -1,5 +1,5 @@
 import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
 import styles from './index.module.css';
@@ -24,7 +24,7 @@ const BreadcrumbItem: FC<PropsWithChildren<BreadcrumbItemProps>> = ({
     itemProp={!disableMicrodata ? 'itemListElement' : undefined}
     itemScope={!disableMicrodata ? true : undefined}
     itemType={!disableMicrodata ? 'https://schema.org/ListItem' : undefined}
-    className={classNames(
+    className={clsx(
       styles.item,
       { [styles.visuallyHidden]: hidden },
       props.className

apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { ComponentProps, FC } from 'react';
 
 import Link from '@/components/Link';
@@ -20,11 +20,7 @@ const BreadcrumbLink: FC<BreadcrumbLinkProps> = ({
     itemProp="item"
     itemID={href?.toString()}
     href={href}
-    className={classNames(
-      styles.link,
-      { [styles.active]: active },
-      props.className
-    )}
+    className={clsx(styles.link, { [styles.active]: active }, props.className)}
     aria-current={active ? 'page' : undefined}
     {...props}
   >

apps/site/components/Common/Button/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC, AnchorHTMLAttributes } from 'react';
 
 import Link from '@/components/Link';
@@ -23,7 +23,7 @@ const Button: FC<ButtonProps> = ({
     role="button"
     href={disabled ? undefined : href}
     aria-disabled={disabled}
-    className={classNames(styles.button, styles[kind], className)}
+    className={clsx(styles.button, styles[kind], className)}
     {...props}
   >
     {children}

apps/site/components/Common/CodeBox/index.tsx

@@ -4,7 +4,7 @@ import {
   DocumentDuplicateIcon,
   CodeBracketIcon,
 } from '@heroicons/react/24/outline';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useTranslations } from 'next-intl';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import { Fragment, isValidElement, useRef } from 'react';
@@ -102,7 +102,7 @@ const CodeBox: FC<PropsWithChildren<CodeBoxProps>> = ({
     <div className={styles.root}>
       <pre
         ref={ref}
-        className={classNames(styles.content, className)}
+        className={clsx(styles.content, className)}
         tabIndex={0}
         dir="ltr"
       >

apps/site/components/Common/CrossLink/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
@@ -20,7 +20,7 @@ const CrossLink: FC<CrossLinkProps> = ({ type, text, link }) => {
   return (
     <Link className={styles.crossLink} href={link}>
       <span
-        className={classNames(styles.header, {
+        className={clsx(styles.header, {
           [styles.reverse]: type === 'next',
         })}
       >
@@ -29,7 +29,7 @@ const CrossLink: FC<CrossLinkProps> = ({ type, text, link }) => {
       </span>
 
       <span
-        className={classNames(styles.content, {
+        className={clsx(styles.content, {
           [styles.reverse]: type === 'next',
         })}
       >

apps/site/components/Common/LanguageDropDown/index.tsx

@@ -1,7 +1,7 @@
 import { LanguageIcon } from '@heroicons/react/24/outline';
 import type { LocaleConfig } from '@node-core/website-i18n/types';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
@@ -43,7 +43,7 @@ const LanguageDropdown: FC<LanguageDropDownProps> = ({
               <DropdownMenu.Item
                 key={code}
                 onClick={() => onChange({ name, code })}
-                className={classNames(styles.dropDownItem, {
+                className={clsx(styles.dropDownItem, {
                   [styles.currentDropDown]: code === currentLanguage,
                 })}
               >

apps/site/components/Common/Notification/index.tsx

@@ -1,5 +1,5 @@
 import * as ToastPrimitive from '@radix-ui/react-toast';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC } from 'react';
 
 import styles from './index.module.css';
@@ -23,7 +23,7 @@ const Notification: FC<NotificationProps> = ({
     open={open}
     duration={duration}
     onOpenChange={onChange}
-    className={classNames(styles.root, className)}
+    className={clsx(styles.root, className)}
   >
     <ToastPrimitive.Title className={styles.message}>
       {children}

apps/site/components/Common/Preview/index.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC } from 'react';
 
 import HexagonGrid from '@/components/Icons/HexagonGrid';
@@ -13,7 +13,7 @@ type PreviewProps = {
 };
 
 const Preview: FC<PreviewProps> = ({ type = 'announcements', title }) => (
-  <div className={classNames(styles.root, styles[type])}>
+  <div className={clsx(styles.root, styles[type])}>
     <div className={styles.container} aria-hidden={true}>
       <HexagonGrid className={styles.hexagon} />
       <JsIconWhite className={styles.logo} />

apps/site/components/Common/Search/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useTranslations } from 'next-intl';
 import { useState, type FC } from 'react';
 
@@ -47,7 +47,7 @@ export const SearchButton: FC = () => {
         {t('components.search.searchBox.placeholder')}
         <kbd
           title={`${osCommandKey} K`}
-          className={classNames(styles.shortcutIndicator, {
+          className={clsx(styles.shortcutIndicator, {
             'opacity-0': isOSLoading,
           })}
         >

apps/site/components/Common/Select/index.tsx

@@ -3,7 +3,7 @@
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as ScrollPrimitive from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useId, useMemo } from 'react';
 import type { FC } from 'react';
 
@@ -68,11 +68,7 @@ const Select: FC<SelectProps> = ({
 
   return (
     <span
-      className={classNames(
-        styles.select,
-        { [styles.inline]: inline },
-        className
-      )}
+      className={clsx(styles.select, { [styles.inline]: inline }, className)}
     >
       {label && (
         <label className={styles.label} htmlFor={id}>
@@ -93,7 +89,7 @@ const Select: FC<SelectProps> = ({
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             position={inline ? 'popper' : 'item-aligned'}
-            className={classNames(styles.dropdown, { [styles.inline]: inline })}
+            className={clsx(styles.dropdown, { [styles.inline]: inline })}
           >
             <ScrollPrimitive.Root type="auto">
               <SelectPrimitive.Viewport>
@@ -102,7 +98,7 @@ const Select: FC<SelectProps> = ({
                     <SelectPrimitive.Group key={label?.toString() ?? key}>
                       {label && (
                         <SelectPrimitive.Label
-                          className={classNames(styles.item, styles.label)}
+                          className={clsx(styles.item, styles.label)}
                         >
                           {label}
                         </SelectPrimitive.Label>
@@ -113,7 +109,7 @@ const Select: FC<SelectProps> = ({
                           key={value}
                           value={value}
                           disabled={disabled}
-                          className={classNames(styles.item, styles.text)}
+                          className={clsx(styles.item, styles.text)}
                         >
                           <SelectPrimitive.ItemText>
                             {iconImage}

apps/site/components/Common/Tabs/index.tsx

@@ -1,5 +1,5 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 
 import styles from './index.module.css';
@@ -26,14 +26,14 @@ const Tabs: FC<PropsWithChildren<TabsProps>> = ({
 }) => (
   <TabsPrimitive.Root
     {...props}
-    className={classNames(styles.tabsRoot, props.className)}
+    className={clsx(styles.tabsRoot, props.className)}
   >
     <TabsPrimitive.List className={styles.tabsList}>
       {tabs.map(tab => (
         <TabsPrimitive.Trigger
           key={tab.key}
           value={tab.value ?? tab.key}
-          className={classNames(styles.tabsTrigger, triggerClassName)}
+          className={clsx(styles.tabsTrigger, triggerClassName)}
         >
           {tab.label}
           {tab.secondaryLabel ? (

apps/site/components/Common/Tooltip/index.tsx

@@ -1,5 +1,5 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { ComponentProps, FC, PropsWithChildren, ReactNode } from 'react';
 
 import styles from './index.module.css';
@@ -29,7 +29,7 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
         <TooltipPrimitive.Content
           side={side}
           sideOffset={4}
-          className={classNames(styles[kind], styles.content, {
+          className={clsx(styles[kind], styles.content, {
             'mx-1.5': side === 'top' || side === 'bottom',
           })}
         >

apps/site/components/Containers/NavBar/NavItem/index.tsx

@@ -1,5 +1,5 @@
 import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC, HTMLAttributeAnchorTarget, PropsWithChildren } from 'react';
 
 import ActiveLink from '@/components/Common/ActiveLink';
@@ -24,7 +24,7 @@ const NavItem: FC<PropsWithChildren<NavItemProps>> = ({
 }) => (
   <ActiveLink
     href={href}
-    className={classNames(styles.navItem, styles[type], className)}
+    className={clsx(styles.navItem, styles[type], className)}
     activeClassName={styles.active}
     allowSubPath={href.startsWith('/')}
     target={target}

apps/site/components/Downloads/DownloadButton/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { CloudArrowDownIcon } from '@heroicons/react/24/outline';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
 
 import Button from '@/components/Common/Button';
@@ -25,7 +25,7 @@ const DownloadButton: FC<PropsWithChildren<DownloadButtonProps>> = ({
       <Button
         kind="special"
         href={downloadLink}
-        className={classNames(styles.downloadButton, styles.special)}
+        className={clsx(styles.downloadButton, styles.special)}
       >
         {children}
 
@@ -35,7 +35,7 @@ const DownloadButton: FC<PropsWithChildren<DownloadButtonProps>> = ({
       <Button
         kind="primary"
         href={downloadLink}
-        className={classNames(styles.downloadButton, styles.primary)}
+        className={clsx(styles.downloadButton, styles.primary)}
       >
         {children}
 

apps/site/components/Icons/Logos/Nodejs.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { FC, SVGProps } from 'react';
 
 import type { LogoVariant } from '@/types';
@@ -18,7 +18,7 @@ const Nodejs: FC<NodeJsLogoProps> = ({
     viewBox="0 0 267 80"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    className={classNames('fill-[#333333] dark:fill-white', className)}
+    className={clsx('fill-[#333333] dark:fill-white', className)}
     {...props}
   >
     <mask