22. Nuxt UI & Headless Design Systems

// Modern Headless UI Design Tokens with CVA & Tailwind v4
import { cva, type VariantProps } from 'class-variance-authority';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export const buttonStyles = cva(
  'inline-flex items-center justify-center font-medium transition focus:outline-none rounded-xl',
  {
    variants: {
      variant: {
        primary: 'bg-indigo-600 text-white hover:bg-indigo-500 shadow-sm',
        secondary: 'border border-slate-200 bg-white text-slate-800 dark:bg-slate-900 dark:text-slate-100',
        danger: 'bg-rose-600 text-white hover:bg-rose-500'
      },
      size: {
        sm: 'px-3 py-1.5 text-sm',
        base: 'px-4 py-2 text-base',
        lg: 'px-6 py-3 text-lg'
      }
    },
    defaultVariants: { variant: 'primary', size: 'base' }
  }
);