40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { clsx, type ClassValue } from 'clsx';
|
|
import { extendTailwindMerge } from 'tailwind-merge';
|
|
|
|
const RB_TYPES = ['display', 'headline', 'title', 'body', 'label'] as const;
|
|
const RB_SIZES = ['l', 'm', 's'] as const;
|
|
|
|
const rbFontSizeClasses = RB_TYPES.flatMap((type) => RB_SIZES.map((size) => `${type}-${size}`));
|
|
|
|
const twMerge = extendTailwindMerge({
|
|
extend: {
|
|
classGroups: {
|
|
'font-size': [{ 'text-rb': rbFontSizeClasses }],
|
|
},
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Combines and merges CSS class names using clsx and tailwind-merge.
|
|
*
|
|
* This utility function combines the power of clsx for conditional class handling
|
|
* with tailwind-merge for proper Tailwind CSS class deduplication and conflict resolution.
|
|
*
|
|
* Tailwind-merge is configured to recognise `text-rb-{type}-{size}` classes
|
|
* (e.g. `text-rb-body-m`) as font-size utilities so they do not conflict with
|
|
* text-color classes such as `text-[var(--rb-text)]`.
|
|
*
|
|
* @param inputs - Class values to combine (strings, objects, arrays, etc.)
|
|
* @returns Merged class string with conflicts resolved
|
|
*
|
|
* @example
|
|
* ```typescript
|
|
* cn('px-4 py-2', 'bg-blue-500') // 'px-4 py-2 bg-blue-500'
|
|
* cn('px-4', { 'px-8': true }) // 'px-8' (px-8 overrides px-4)
|
|
* cn('text-red-500', undefined, 'text-blue-500') // 'text-blue-500'
|
|
* ```
|
|
*/
|
|
export function cn(...inputs: ClassValue[]): string {
|
|
return twMerge(clsx(inputs));
|
|
}
|