utils

1import { type ClassValue, clsx } from "clsx";
2import { extendTailwindMerge } from "tailwind-merge";
3 
4// Register our custom scales so tailwind-merge doesn't collapse them
5// into the wrong conflict groups. Without the font-size registration,
6// tailwind-merge lumps text-small / text-micro / etc alongside text-ink
7// (a color) and strips whichever comes first, so a destructive
8// MenuItem's `text-small ... text-error` collapses to just `text-error`.
9const twMerge = extendTailwindMerge({
10  extend: {
11    classGroups: {
12      "font-size": [
13        "text-micro",
14        "text-mini",
15        "text-small",
16        "text-regular",
17        "text-large",
18        "text-title3",
19        "text-title2",
20        "text-title1",
21      ],
22    },
23  },
24});
25 
26export function cn(...inputs: ClassValue[]): string {
27  return twMerge(clsx(inputs));
28}