Simple styling utilites

class-names.ts

/**
 * Join string class names and ignore falsy values.
 *
 * ### Example
 *
 * ```tsx
 * <div className={`class1 class2 class3 ${condition ? 'class4' : ''} ${data ? 'class5' : ''}`} />
 * // becomes
 * <div
 *   className={classNames(
 *    'class1 class2 class3',
 *    condition && 'class4',
 *    data && 'class5',
 *   )}
 * />
 * ```
 *
 * @param classes List of string class names to join.
 * @returns Joined list of strings.
 */
export function classNames(...classes: (string | false | null | undefined | 0)[]) {
  return classes.filter(Boolean).join(' ');
}