refactor(ui): use tailwind-merge to merge classnames for tailwind

packages/expo-atlas-ui/components/BundleTag.tsx

@@ -1,4 +1,3 @@
-import { cva, type VariantProps } from 'class-variance-authority';
 import type { AtlasBundle } from 'expo-atlas';
 import { type ComponentProps } from 'react';
 
@@ -7,6 +6,7 @@ import { EnvironmentName } from '~/components/EnvironmentName';
 import { PlatformName } from '~/components/PlatformName';
 import { Tag } from '~/ui/Tag';
 import { Tooltip, TooltipContent, TooltipTrigger } from '~/ui/Tooltip';
+import { cva, type VariantProps } from '~/utils/classname';
 
 const bundleTagVariants = cva('', {
   variants: {

packages/expo-atlas-ui/components/ModuleReference.tsx

@@ -1,4 +1,3 @@
-import { cva, cx } from 'class-variance-authority';
 import type { AtlasModule, PartialAtlasBundle } from 'expo-atlas';
 // @ts-expect-error
 import ChevronDownIcon from 'lucide-react/dist/esm/icons/chevron-down';
@@ -7,6 +6,7 @@ import { type ComponentProps, useState, useRef, useLayoutEffect } from 'react';
 import { ModuleReferenceList } from './ModuleReferenceList';
 
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '~/ui/Collapsible';
+import { cva, cn } from '~/utils/classname';
 
 type ModuleReferenceProps = {
   bundle: PartialAtlasBundle;
@@ -16,7 +16,7 @@ type ModuleReferenceProps = {
 
 export function ModuleReference(props: ModuleReferenceProps) {
   return (
-    <div className={cx('lg:grid lg:grid-cols-2', props.className)}>
+    <div className={cn('lg:grid lg:grid-cols-2', props.className)}>
       <div className="mb-6 lg:mb-0">
         <ModuleReferenceCollapsible
           title="Imported by modules"
@@ -88,7 +88,7 @@ function ModuleReferenceCollapsible(props: ModuleReferenceCollapsibleProps) {
           <h3 className="font-semibold mx-2">{props.title}</h3>
           <ChevronDownIcon
             size={18}
-            className={cx(
+            className={cn(
               'text-icon-secondary transition-transform invisible',
               isOverflowing && '!visible',
               isOpen && 'rotate-180'

packages/expo-atlas-ui/components/PlatformName.tsx

@@ -1,7 +1,8 @@
-import { cva } from 'class-variance-authority';
 import type { AtlasBundle } from 'expo-atlas';
 import type { PropsWithChildren } from 'react';
 
+import { cva } from '~/utils/classname';
+
 type PlatformNameProps = PropsWithChildren<{
   platform: AtlasBundle['platform'];
   className?: string;

packages/expo-atlas-ui/components/PropertySummary.tsx

@@ -1,6 +1,7 @@
-import { cx } from 'class-variance-authority';
 import { Children, ReactNode, type PropsWithChildren } from 'react';
 
+import { cn } from '~/utils/classname';
+
 /**
  * Render various properties or attributes of a certain entity.
  * This renders each of these properties with a separator in between.
@@ -10,7 +11,7 @@ export function PropertySummary(
 ) {
   return (
     <div
-      className={cx(
+      className={cn(
         'inline-flex items-center font-sm text-secondary gap-2 text-nowrap',
         props.className
       )}

packages/expo-atlas-ui/package.json

@@ -46,6 +46,7 @@
     "react-native-web": "~0.19.6",
     "shiki": "1.15.1",
     "tailwind-gradient-mask-image": "^1.2.0",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.10",
     "tailwindcss-animate": "^1.0.7"
   },

packages/expo-atlas-ui/ui/Breadcrumb.tsx

@@ -1,7 +1,6 @@
 // see: https://ui.shadcn.com/docs/components/breadcrumb
 
 import { Slot } from '@radix-ui/react-slot';
-import { cx } from 'class-variance-authority';
 // @ts-expect-error
 import ChevronRightIcon from 'lucide-react/dist/esm/icons/chevron-right';
 // @ts-expect-error
@@ -13,6 +12,8 @@ import {
   type ReactNode,
 } from 'react';
 
+import { cn } from '~/utils/classname';
+
 export const Breadcrumb = forwardRef<
   HTMLElement,
   ComponentPropsWithoutRef<'nav'> & {
@@ -25,7 +26,7 @@ export const BreadcrumbList = forwardRef<HTMLOListElement, ComponentPropsWithout
   ({ className, ...props }, ref) => (
     <ol
       ref={ref}
-      className={cx(
+      className={cn(
         'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
         className
       )}
@@ -37,7 +38,7 @@ BreadcrumbList.displayName = 'BreadcrumbList';
 
 export const BreadcrumbItem = forwardRef<HTMLLIElement, ComponentPropsWithoutRef<'li'>>(
   ({ className, ...props }, ref) => (
-    <li ref={ref} className={cx('inline-flex items-center gap-1.5', className)} {...props} />
+    <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
   )
 );
 BreadcrumbItem.displayName = 'BreadcrumbItem';
@@ -53,7 +54,7 @@ export const BreadcrumbLink = forwardRef<
   return (
     <Comp
       ref={ref}
-      className={cx('transition-colors hover:text-foreground', className)}
+      className={cn('transition-colors hover:text-foreground', className)}
       {...props}
     />
   );
@@ -67,15 +68,15 @@ export const BreadcrumbPage = forwardRef<HTMLSpanElement, ComponentPropsWithoutR
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cx('font-normal text-foreground', className)}
+      className={cn('font-normal text-foreground', className)}
       {...props}
     />
   )
 );
 BreadcrumbPage.displayName = 'BreadcrumbPage';
 
 export const BreadcrumbSeparator = ({ children, className, ...props }: ComponentProps<'li'>) => (
-  <li role="presentation" aria-hidden="true" className={cx('[&>svg]:size-4', className)} {...props}>
+  <li role="presentation" aria-hidden="true" className={cn('[&>svg]:size-4', className)} {...props}>
     {children ?? <ChevronRightIcon />}
   </li>
 );
@@ -85,7 +86,7 @@ export const BreadcrumbEllipsis = ({ className, ...props }: ComponentProps<'span
   <span
     role="presentation"
     aria-hidden="true"
-    className={cx('flex h-9 w-9 items-center justify-center', className)}
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
     {...props}
   >
     <EllipsisHorizontalIcon className="h-4 w-4" />

packages/expo-atlas-ui/ui/Button.tsx

@@ -1,44 +1,45 @@
 // see: https://ui.shadcn.com/docs/components/button
 
 import { Slot } from '@radix-ui/react-slot';
-import { cva, cx, type VariantProps } from 'class-variance-authority';
 import { type ButtonHTMLAttributes, forwardRef } from 'react';
 
+import { cva, cn, type VariantProps } from '~/utils/classname';
+
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
         // see: https://github.com/expo/styleguide/blob/251c92ac4558794903b83575fb97b4f03d00b1f8/packages/styleguide/src/components/Button/Button.tsx#L44
-        primary: cx(
+        primary: cn(
           'border-button-primary bg-button-primary text-button-primary shadow-xs',
           'hocus:bg-button-primary-hover active:scale-98',
           disabled(
             'bg-button-primary-disabled border-button-primary-disabled text-button-primary-disabled'
           )
         ),
-        secondary: cx(
+        secondary: cn(
           'border-button-secondary bg-button-secondary text-button-secondary shadow-xs',
           'hocus:bg-button-secondary-hover active:scale-98',
           disabled(
             'bg-button-secondary-disabled border-button-secondary-disabled text-button-secondary-disabled'
           )
         ),
-        tertiary: cx(
+        tertiary: cn(
           'border-button-tertiary bg-button-tertiary text-button-tertiary shadow-none',
           'hocus:bg-button-tertiary-hover active:scale-98',
           disabled(
             'bg-button-tertiary-disabled border-button-tertiary-disabled text-button-tertiary-disabled'
           )
         ),
-        quaternary: cx(
+        quaternary: cn(
           'border-button-quaternary bg-button-quaternary text-button-quaternary shadow-none',
           'hocus:bg-button-quaternary-hover active:scale-98',
           disabled(
             'bg-button-quaternary-disabled border-button-quaternary-disabled text-button-quaternary-disabled'
           )
         ),
-        destructive: cx(
+        destructive: cn(
           'border-button-primary-destructive bg-button-primary-destructive text-button-primary-destructive shadow-xs',
           'hocus:bg-button-primary-destructive-hover active:scale-98',
           disabled(

packages/expo-atlas-ui/ui/Checkbox.tsx

@@ -1,24 +1,25 @@
 // see: https://ui.shadcn.com/docs/components/checkbox
 
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { cx } from 'class-variance-authority';
 // @ts-expect-error
 import CheckIcon from 'lucide-react/dist/esm/icons/check';
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
 
+import { cn } from '~/utils/classname';
+
 export const Checkbox = forwardRef<
   ElementRef<typeof CheckboxPrimitive.Root>,
   ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
-    className={cx(
+    className={cn(
       'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator className={cx('flex items-center justify-center text-current')}>
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
       <CheckIcon className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>

packages/expo-atlas-ui/ui/Code.tsx

@@ -1,7 +1,7 @@
-import { cx } from 'class-variance-authority';
 import { type ComponentProps, type PropsWithChildren } from 'react';
 
-import { Button } from './Button';
+import { Button } from '~/ui/Button';
+import { cn } from '~/utils/classname';
 
 export function CodeHeader(props: PropsWithChildren) {
   return (
@@ -19,7 +19,7 @@ export function CodeAction({ className, ...props }: ComponentProps<typeof Button
   return (
     <Button
       variant="quaternary"
-      className={cx('m-0 border-l border-secondary rounded-none', className)}
+      className={cn('m-0 border-l border-secondary rounded-none', className)}
       {...props}
     />
   );

packages/expo-atlas-ui/ui/Input.tsx

@@ -1,8 +1,9 @@
-import { cx } from 'class-variance-authority';
 import { HTMLProps } from 'react';
 
+import { cn } from '~/utils/classname';
+
 export function Input(props: HTMLProps<HTMLInputElement>) {
-  const classes = cx(
+  const classes = cn(
     'text-[16px] leading-[1.625] tracking-[-0.011rem]',
     'relative w-full rounded-md border border-default bg-default p-3 text-default shadow-xs outline-0 transition-colors',
     'focus:border-palette-blue9',

packages/expo-atlas-ui/ui/Label.tsx

@@ -1,9 +1,10 @@
 // see: https://ui.shadcn.com/docs/components/label
 
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
 import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';
 
+import { cva, type VariantProps } from '~/utils/classname';
+
 const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
 );

packages/expo-atlas-ui/ui/Layout.tsx

@@ -1,7 +1,8 @@
-import { cva, cx, type VariantProps } from 'class-variance-authority';
 import { Link } from 'expo-router';
 import { type HTMLAttributes, type PropsWithChildren } from 'react';
 
+import { cva, cn, type VariantProps } from '~/utils/classname';
+
 const layoutVariants = cva('', {
   variants: {
     variant: {
@@ -29,15 +30,15 @@ export function Layout({
 
 export function LayoutHeader(props: PropsWithChildren<{ className?: string }>) {
   return (
-    <div className={cx('flex flex-row justify-between my-6 px-8', props.className)}>
+    <div className={cn('flex flex-row justify-between my-6 px-8', props.className)}>
       {props.children}
     </div>
   );
 }
 
 export function LayoutTitle(props: PropsWithChildren<{ className?: string }>) {
   return (
-    <div className={cx('flex flex-row flex-wrap items-center gap-3 min-h-10', props.className)}>
+    <div className={cn('flex flex-row flex-wrap items-center gap-3 min-h-10', props.className)}>
       {props.children}
     </div>
   );
@@ -49,7 +50,7 @@ export function LayoutNavigation({
 }: PropsWithChildren & { className?: string }) {
   return (
     <header
-      className={cx(
+      className={cn(
         'h-16 flex flex-shrink-0 items-center justify-between gap-2 border-b border-b-secondary bg-default px-4',
         className
       )}
@@ -71,7 +72,7 @@ function ExpoLogoBig({ className, ...props }: HTMLAttributes<SVGSVGElement>) {
       viewBox="0 0 71 20"
       fill="none"
       role="img"
-      className={cx('icon-md text-default', className)}
+      className={cn('icon-md text-default', className)}
       {...props}
     >
       <path
@@ -88,7 +89,7 @@ function ExpoLogoSmall({ className, ...props }: HTMLAttributes<SVGSVGElement>) {
       viewBox="0 0 20 20"
       fill="none"
       role="img"
-      className={cx('icon-md text-default', className)}
+      className={cn('icon-md text-default', className)}
       {...props}
     >
       <path