From c24a619747129e507b121487e44a8bb4ea6ef863 Mon Sep 17 00:00:00 2001
From: Cedric van Putten <github@cedric.dev>
Date: Fri, 1 Nov 2024 12:38:29 +0100
Subject: [PATCH] refactor(ui): use `tailwind-merge` to merge classnames for
 tailwind

---
 .../expo-atlas-ui/components/BundleTag.tsx    |  2 +-
 .../components/ModuleReference.tsx            |  6 +++---
 .../expo-atlas-ui/components/PlatformName.tsx |  3 ++-
 .../components/PropertySummary.tsx            |  5 +++--
 packages/expo-atlas-ui/package.json           |  1 +
 packages/expo-atlas-ui/ui/Breadcrumb.tsx      | 15 ++++++-------
 packages/expo-atlas-ui/ui/Button.tsx          | 13 ++++++------
 packages/expo-atlas-ui/ui/Checkbox.tsx        |  7 ++++---
 packages/expo-atlas-ui/ui/Code.tsx            |  6 +++---
 packages/expo-atlas-ui/ui/Input.tsx           |  5 +++--
 packages/expo-atlas-ui/ui/Label.tsx           |  3 ++-
 packages/expo-atlas-ui/ui/Layout.tsx          | 13 ++++++------
 packages/expo-atlas-ui/ui/Menu.tsx            | 21 ++++++++++---------
 packages/expo-atlas-ui/ui/Panel.tsx           |  5 +++--
 packages/expo-atlas-ui/ui/Select.tsx          | 19 +++++++++--------
 packages/expo-atlas-ui/ui/Sheet.tsx           | 13 ++++++------
 packages/expo-atlas-ui/ui/Skeleton.tsx        |  4 ++--
 packages/expo-atlas-ui/ui/Spinner.tsx         |  5 +++--
 packages/expo-atlas-ui/ui/Tag.tsx             |  3 ++-
 packages/expo-atlas-ui/ui/Toast.tsx           | 11 +++++-----
 packages/expo-atlas-ui/ui/Tooltip.tsx         |  5 +++--
 packages/expo-atlas-ui/utils/classname.ts     |  9 ++++++++
 22 files changed, 100 insertions(+), 74 deletions(-)
 create mode 100644 packages/expo-atlas-ui/utils/classname.ts

diff --git a/packages/expo-atlas-ui/components/BundleTag.tsx b/packages/expo-atlas-ui/components/BundleTag.tsx
index 8ca1626..3774864 100644
--- a/packages/expo-atlas-ui/components/BundleTag.tsx
+++ b/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: {
diff --git a/packages/expo-atlas-ui/components/ModuleReference.tsx b/packages/expo-atlas-ui/components/ModuleReference.tsx
index 1f6d7e5..999cc99 100644
--- a/packages/expo-atlas-ui/components/ModuleReference.tsx
+++ b/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'
diff --git a/packages/expo-atlas-ui/components/PlatformName.tsx b/packages/expo-atlas-ui/components/PlatformName.tsx
index f999865..239c181 100644
--- a/packages/expo-atlas-ui/components/PlatformName.tsx
+++ b/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;
diff --git a/packages/expo-atlas-ui/components/PropertySummary.tsx b/packages/expo-atlas-ui/components/PropertySummary.tsx
index 980e35a..eed439a 100644
--- a/packages/expo-atlas-ui/components/PropertySummary.tsx
+++ b/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
       )}
diff --git a/packages/expo-atlas-ui/package.json b/packages/expo-atlas-ui/package.json
index 000ee69..6e5a9c8 100644
--- a/packages/expo-atlas-ui/package.json
+++ b/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"
   },
diff --git a/packages/expo-atlas-ui/ui/Breadcrumb.tsx b/packages/expo-atlas-ui/ui/Breadcrumb.tsx
index 6d0a471..e0401e5 100644
--- a/packages/expo-atlas-ui/ui/Breadcrumb.tsx
+++ b/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,7 +68,7 @@ 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}
     />
   )
@@ -75,7 +76,7 @@ export const BreadcrumbPage = forwardRef<HTMLSpanElement, ComponentPropsWithoutR
 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" />
diff --git a/packages/expo-atlas-ui/ui/Button.tsx b/packages/expo-atlas-ui/ui/Button.tsx
index 0307edb..db83070 100644
--- a/packages/expo-atlas-ui/ui/Button.tsx
+++ b/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(
diff --git a/packages/expo-atlas-ui/ui/Checkbox.tsx b/packages/expo-atlas-ui/ui/Checkbox.tsx
index 2a2398d..209a11a 100644
--- a/packages/expo-atlas-ui/ui/Checkbox.tsx
+++ b/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>
diff --git a/packages/expo-atlas-ui/ui/Code.tsx b/packages/expo-atlas-ui/ui/Code.tsx
index bff5bac..0811608 100644
--- a/packages/expo-atlas-ui/ui/Code.tsx
+++ b/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}
     />
   );
diff --git a/packages/expo-atlas-ui/ui/Input.tsx b/packages/expo-atlas-ui/ui/Input.tsx
index 0ec973b..ae36dca 100644
--- a/packages/expo-atlas-ui/ui/Input.tsx
+++ b/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',
diff --git a/packages/expo-atlas-ui/ui/Label.tsx b/packages/expo-atlas-ui/ui/Label.tsx
index 1f8caf0..5428a2e 100644
--- a/packages/expo-atlas-ui/ui/Label.tsx
+++ b/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'
 );
diff --git a/packages/expo-atlas-ui/ui/Layout.tsx b/packages/expo-atlas-ui/ui/Layout.tsx
index 4a3b8b9..62cf1b5 100644
--- a/packages/expo-atlas-ui/ui/Layout.tsx
+++ b/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,7 +30,7 @@ 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>
   );
@@ -37,7 +38,7 @@ export function LayoutHeader(props: PropsWithChildren<{ className?: string }>) {
 
 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
diff --git a/packages/expo-atlas-ui/ui/Menu.tsx b/packages/expo-atlas-ui/ui/Menu.tsx
index 0585362..5bf11a1 100644
--- a/packages/expo-atlas-ui/ui/Menu.tsx
+++ b/packages/expo-atlas-ui/ui/Menu.tsx
@@ -1,7 +1,6 @@
 // see: https://ui.shadcn.com/docs/components/context-menu
 
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import { cx } from 'class-variance-authority';
 // @ts-expect-error
 import CheckIcon from 'lucide-react/dist/esm/icons/check';
 // @ts-expect-error
@@ -15,6 +14,8 @@ import {
   type HTMLAttributes,
 } from 'react';
 
+import { cn } from '~/utils/classname';
+
 export const ContextMenu = ContextMenuPrimitive.Root;
 
 export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
@@ -35,7 +36,7 @@ export const ContextMenuSubTrigger = forwardRef<
 >(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
-    className={cx(
+    className={cn(
       'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
       inset && 'pl-8',
       className
@@ -54,7 +55,7 @@ export const ContextMenuSubContent = forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.SubContent
     ref={ref}
-    className={cx(
+    className={cn(
       'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
@@ -70,7 +71,7 @@ export const ContextMenuContent = forwardRef<
   <ContextMenuPrimitive.Portal>
     <ContextMenuPrimitive.Content
       ref={ref}
-      className={cx(
+      className={cn(
         'p-1 z-50 min-w-[8rem] overflow-hidden border border-default rounded-md bg-screen text-default shadow-md',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
@@ -90,7 +91,7 @@ export const ContextMenuItem = forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Item
     ref={ref}
-    className={cx(
+    className={cn(
       'px-2 py-1.5 relative flex items-center cursor-default select-none outline-none rounded-sm text-sm',
       'focus:bg-default focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
@@ -107,7 +108,7 @@ export const ContextMenuCheckboxItem = forwardRef<
 >(({ className, children, checked, ...props }, ref) => (
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
-    className={cx(
+    className={cn(
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
@@ -130,7 +131,7 @@ export const ContextMenuRadioItem = forwardRef<
 >(({ className, children, ...props }, ref) => (
   <ContextMenuPrimitive.RadioItem
     ref={ref}
-    className={cx(
+    className={cn(
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
@@ -154,7 +155,7 @@ export const ContextMenuLabel = forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
     ref={ref}
-    className={cx('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', className)}
+    className={cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', className)}
     {...props}
   />
 ));
@@ -166,7 +167,7 @@ export const ContextMenuSeparator = forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Separator
     ref={ref}
-    className={cx('-mx-1 my-1 h-px bg-hover', className)}
+    className={cn('-mx-1 my-1 h-px bg-hover', className)}
     {...props}
   />
 ));
@@ -175,7 +176,7 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 export const ContextMenuShortcut = ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cx('ml-auto text-xs tracking-widest text-muted-foreground', className)}
+      className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}
       {...props}
     />
   );
diff --git a/packages/expo-atlas-ui/ui/Panel.tsx b/packages/expo-atlas-ui/ui/Panel.tsx
index 9ae5b93..bcc1639 100644
--- a/packages/expo-atlas-ui/ui/Panel.tsx
+++ b/packages/expo-atlas-ui/ui/Panel.tsx
@@ -1,6 +1,7 @@
-import { cx } from 'class-variance-authority';
 import { type PropsWithChildren } from 'react';
 
+import { cn } from '~/utils/classname';
+
 export function PanelGroup(props: PropsWithChildren) {
   return (
     <div className="grid gri-cols-2 auto-rows-fr md:grid-cols-2 md:auto-rows-auto">
@@ -12,7 +13,7 @@ export function PanelGroup(props: PropsWithChildren) {
 export function Panel(props: PropsWithChildren) {
   return (
     <div
-      className={cx(
+      className={cn(
         'flex flex-col border-secondary bg-subtle border overflow-hidden',
         'first:rounded-t-md last:rounded-b-md',
         'md:border-r-0 md:last:border md:first:rounded-r-none md:first:rounded-l-md md:last:rounded-l-none md:last:rounded-r-md'
diff --git a/packages/expo-atlas-ui/ui/Select.tsx b/packages/expo-atlas-ui/ui/Select.tsx
index cf4a6a3..bdbd2a5 100644
--- a/packages/expo-atlas-ui/ui/Select.tsx
+++ b/packages/expo-atlas-ui/ui/Select.tsx
@@ -1,7 +1,6 @@
 // see: https://ui.shadcn.com/docs/components/select
 
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { cx } from 'class-variance-authority';
 // @ts-expect-error
 import CheckIcon from 'lucide-react/dist/esm/icons/check';
 // @ts-expect-error
@@ -10,6 +9,8 @@ import ChevronDownIcon from 'lucide-react/dist/esm/icons/chevron-down';
 import ChevronUpIcon from 'lucide-react/dist/esm/icons/chevron-up';
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
 
+import { cn } from '~/utils/classname';
+
 export const Select = SelectPrimitive.Root;
 
 export const SelectGroup = SelectPrimitive.Group;
@@ -22,7 +23,7 @@ export const SelectTrigger = forwardRef<
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
-    className={cx(
+    className={cn(
       'h-10 px-3 py-2 w-full flex items-center justify-between whitespace-nowrap group',
       'text-sm shadow-sm border rounded-md border-default bg-transparent hover:bg-subtle focus:bg-subtle transition-colors ring-offset-background',
       'hover:text-default data-[state=closed]:text-secondary focus:outline-none focus:ring-1 focus:ring-ring',
@@ -45,7 +46,7 @@ export const SelectScrollUpButton = forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cx('flex cursor-default items-center justify-center py-1', className)}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
     <ChevronUpIcon className="text-icon-default" size={16} />
@@ -59,7 +60,7 @@ export const SelectScrollDownButton = forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cx('flex cursor-default items-center justify-center py-1', className)}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
     <ChevronDownIcon className="text-icon-default" size={16} />
@@ -74,7 +75,7 @@ export const SelectContent = forwardRef<
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
-      className={cx(
+      className={cn(
         'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default bg-default text-popover-foreground shadow-md ',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
         'data-[side=bottom]:slide-in-from-top-1/3 data-[side=left]:slide-in-from-right-1/3 data-[side=right]:slide-in-from-left-1/3 data-[side=top]:slide-in-from-bottom-1/3',
@@ -87,7 +88,7 @@ export const SelectContent = forwardRef<
     >
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
-        className={cx(
+        className={cn(
           'p-1',
           position === 'popper' &&
             'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
@@ -107,7 +108,7 @@ export const SelectLabel = forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cx(
+    className={cn(
       'px-2 py-1 text-2xs leading-[1.6154] tracking-[-0.003rem] font-semibold text-secondary truncate',
       className
     )}
@@ -122,7 +123,7 @@ export const SelectItem = forwardRef<
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
-    className={cx(
+    className={cn(
       'relative w-full py-1.5 pl-2 pr-8 flex items-center cursor-pointer select-none rounded-sm text-sm text-secondary outline-none transition-colors',
       'hover:bg-subtle focus:bg-subtle focus:text-default hover:text-default',
       'data-[state=checked]:bg-subtle data-[state=checked]:text-default data-[state=checked]:cursor-default',
@@ -147,7 +148,7 @@ export const SelectSeparator = forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cx('-mx-1 my-1 h-px bg-muted', className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
 ));
diff --git a/packages/expo-atlas-ui/ui/Sheet.tsx b/packages/expo-atlas-ui/ui/Sheet.tsx
index ce941c4..0c29f89 100644
--- a/packages/expo-atlas-ui/ui/Sheet.tsx
+++ b/packages/expo-atlas-ui/ui/Sheet.tsx
@@ -1,11 +1,12 @@
 // see: https://ui.shadcn.com/docs/components/sheet
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { cva, cx, type VariantProps } from 'class-variance-authority';
 // @ts-expect-error
 import CloseIcon from 'lucide-react/dist/esm/icons/x';
 import { forwardRef, type ComponentPropsWithoutRef } from 'react';
 
+import { cva, cn, type VariantProps } from '~/utils/classname';
+
 export const Sheet = DialogPrimitive.Root;
 
 export const SheetTrigger = DialogPrimitive.Trigger;
@@ -21,7 +22,7 @@ export const SheetOverlay = () => null;
 //   React.ComponentPropsWithoutRef<typeof Dialog.Overlay>
 // >(({ className, ...props }, ref) => (
 //   <Dialog.Overlay
-//     className={cx(
+//     className={cn(
 //       'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
 //       className
 //     )}
@@ -74,13 +75,13 @@ export const SheetContent = forwardRef<
 SheetContent.displayName = DialogPrimitive.Content.displayName;
 
 export const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cx('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
 );
 SheetHeader.displayName = 'SheetHeader';
 
 export const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cx('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
     {...props}
   />
 );
@@ -92,7 +93,7 @@ export const SheetTitle = forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cx('text-lg font-semibold text-foreground', className)}
+    className={cn('text-lg font-semibold text-foreground', className)}
     {...props}
   />
 ));
@@ -104,7 +105,7 @@ export const SheetDescription = forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cx('text-sm text-muted-foreground', className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ));
diff --git a/packages/expo-atlas-ui/ui/Skeleton.tsx b/packages/expo-atlas-ui/ui/Skeleton.tsx
index b5f6ed9..88a5717 100644
--- a/packages/expo-atlas-ui/ui/Skeleton.tsx
+++ b/packages/expo-atlas-ui/ui/Skeleton.tsx
@@ -1,7 +1,7 @@
 // see: https://ui.shadcn.com/docs/components/skeleton
 
-import { cx } from 'class-variance-authority';
+import { cn } from '~/utils/classname';
 
 export function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cx('animate-pulse rounded-md bg-subtle', className)} {...props} />;
+  return <div className={cn('animate-pulse rounded-md bg-subtle', className)} {...props} />;
 }
diff --git a/packages/expo-atlas-ui/ui/Spinner.tsx b/packages/expo-atlas-ui/ui/Spinner.tsx
index 4a56b74..5f31825 100644
--- a/packages/expo-atlas-ui/ui/Spinner.tsx
+++ b/packages/expo-atlas-ui/ui/Spinner.tsx
@@ -1,8 +1,9 @@
-import { cx } from 'class-variance-authority';
 // @ts-expect-error
 import LoaderIcon from 'lucide-react/dist/esm/icons/loader-2';
 import { type ComponentProps } from 'react';
 
+import { cn } from '~/utils/classname';
+
 export function Spinner({ className, ...props }: ComponentProps<typeof LoaderIcon>) {
-  return <LoaderIcon className={cx('animate-spin', className)} {...props} />;
+  return <LoaderIcon className={cn('animate-spin', className)} {...props} />;
 }
diff --git a/packages/expo-atlas-ui/ui/Tag.tsx b/packages/expo-atlas-ui/ui/Tag.tsx
index 5f866ed..c21eb19 100644
--- a/packages/expo-atlas-ui/ui/Tag.tsx
+++ b/packages/expo-atlas-ui/ui/Tag.tsx
@@ -1,6 +1,7 @@
-import { cva, type VariantProps } from 'class-variance-authority';
 import { type ComponentProps, forwardRef } from 'react';
 
+import { cva, type VariantProps } from '~/utils/classname';
+
 const tagVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-full font-semibold',
   {
diff --git a/packages/expo-atlas-ui/ui/Toast.tsx b/packages/expo-atlas-ui/ui/Toast.tsx
index 668998b..cb056fd 100644
--- a/packages/expo-atlas-ui/ui/Toast.tsx
+++ b/packages/expo-atlas-ui/ui/Toast.tsx
@@ -1,7 +1,6 @@
 // see: https://ui.shadcn.com/docs/components/toast
 
 import * as ToastPrimitives from '@radix-ui/react-toast';
-import { cva, cx, type VariantProps } from 'class-variance-authority';
 // @ts-expect-error
 import CloseIcon from 'lucide-react/dist/esm/icons/x';
 import {
@@ -13,13 +12,15 @@ import {
   useEffect,
 } from 'react';
 
+import { cva, cn, type VariantProps } from '~/utils/classname';
+
 export const ToastViewport = forwardRef<
   ElementRef<typeof ToastPrimitives.Viewport>,
   ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
-    className={cx(
+    className={cn(
       'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-lg',
       className
     )}
@@ -64,7 +65,7 @@ export const ToastClose = forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Close
     ref={ref}
-    className={cx(
+    className={cn(
       'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
       className
     )}
@@ -80,7 +81,7 @@ export const ToastTitle = forwardRef<
   ElementRef<typeof ToastPrimitives.Title>,
   ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title ref={ref} className={cx('text-sm font-semibold', className)} {...props} />
+  <ToastPrimitives.Title ref={ref} className={cn('text-sm font-semibold', className)} {...props} />
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
@@ -90,7 +91,7 @@ export const ToastDescription = forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cx('text-sm opacity-90', className)}
+    className={cn('text-sm opacity-90', className)}
     {...props}
   />
 ));
diff --git a/packages/expo-atlas-ui/ui/Tooltip.tsx b/packages/expo-atlas-ui/ui/Tooltip.tsx
index 6d19877..26cb620 100644
--- a/packages/expo-atlas-ui/ui/Tooltip.tsx
+++ b/packages/expo-atlas-ui/ui/Tooltip.tsx
@@ -1,9 +1,10 @@
 // see: https://ui.shadcn.com/docs/components/tooltip
 
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { cx } from 'class-variance-authority';
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
 
+import { cn } from '~/utils/classname';
+
 export const TooltipProvider = TooltipPrimitive.Provider;
 
 export const Tooltip = TooltipPrimitive.Root;
@@ -17,7 +18,7 @@ export const TooltipContent = forwardRef<
   <TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}
-    className={cx(
+    className={cn(
       'z-50 px-3 py-2 overflow-hidden rounded-md bg-default text-secondary border border-secondary max-w-80 shadow-md leading-6 text-xs',
       'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
       'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
diff --git a/packages/expo-atlas-ui/utils/classname.ts b/packages/expo-atlas-ui/utils/classname.ts
new file mode 100644
index 0000000..4cd2866
--- /dev/null
+++ b/packages/expo-atlas-ui/utils/classname.ts
@@ -0,0 +1,9 @@
+import { cx, type CxOptions } from 'class-variance-authority';
+import { twMerge } from 'tailwind-merge';
+
+export { cva, type VariantProps } from 'class-variance-authority';
+
+/** Merge all classnames and optimize the styling for tailwind */
+export function cn(...inputs: CxOptions) {
+  return twMerge(cx(inputs));
+}