03 CVA & tailwind-variants — 런타임에서 className을 조립하는 두 가지 길

import { cva, type VariantProps } from 'class-variance-authority'
 
const button = cva(
  // ① base — 모든 variant 공통
  'inline-flex items-center justify-center rounded font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:opacity-50 disabled:pointer-events-none',
  {
    // ② variants — 각 축의 값별 utility
    variants: {
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4 text-base',
        lg: 'h-12 px-6 text-lg',
      },
      variant: {
        primary: 'bg-blue-600 text-white hover:bg-blue-700',
        ghost: 'bg-transparent text-blue-700 hover:bg-blue-50',
        danger: 'bg-red-600 text-white hover:bg-red-700',
      },
      tone: {
        solid: '',
        outline: 'border-2 bg-transparent',
      },
    },
    // ③ compoundVariants — 다축 조합 전용
    compoundVariants: [
      {
        variant: 'primary',
        tone: 'outline',
        class: 'border-blue-600 text-blue-600 hover:bg-blue-50',
      },
      {
        variant: 'danger',
        tone: 'outline',
        class: 'border-red-600 text-red-600 hover:bg-red-50',
      },
    ],
    // ④ defaultVariants — 호출자가 안 주면 이 값
    defaultVariants: {
      size: 'md',
      variant: 'primary',
      tone: 'solid',
    },
  }
)
 
// VariantProps로 prop 타입 자동 추론
type ButtonVariants = VariantProps<typeof button>
// { size?: 'sm' | 'md' | 'lg'; variant?: ...; tone?: ... }
 
type ButtonProps = ButtonVariants & React.ButtonHTMLAttributes<HTMLButtonElement>
 
export function Button({ size, variant, tone, className, ...rest }: ButtonProps) {
  return <button className={button({ size, variant, tone, class: className })} {...rest} />
}

// shadcn/ui 스타일의 cn() 헬퍼
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
 
// 사용
<button className={cn(button({ variant }), className)} />

import { tv, type VariantProps } from 'tailwind-variants'
 
const button = tv({
  base: 'inline-flex items-center justify-center rounded font-medium transition-colors',
  variants: {
    size: {
      sm: 'h-8 px-3 text-sm',
      md: 'h-10 px-4',
      lg: 'h-12 px-6 text-lg',
    },
    variant: {
      primary: 'bg-blue-600 text-white hover:bg-blue-700',
      ghost: 'bg-transparent text-blue-700 hover:bg-blue-50',
    },
  },
  compoundVariants: [
    { variant: 'primary', size: 'lg', class: 'font-bold tracking-wide' },
  ],
  defaultVariants: { size: 'md', variant: 'primary' },
})
 
type ButtonVariants = VariantProps<typeof button>
 
export function Button({ size, variant, className, ...rest }) {
  return <button className={button({ size, variant, class: className })} {...rest} />
  // ↑ twMerge가 내장이라 className에 'p-8'을 주면 base의 'px-4'를 덮어씀
}

import { tv } from 'tailwind-variants'
 
const card = tv({
  slots: {
    root: 'rounded-lg overflow-hidden border',
    header: 'p-4 border-b font-semibold',
    body: 'p-4',
    footer: 'p-4 border-t bg-gray-50',
  },
  variants: {
    tone: {
      default: {
        root: 'border-gray-200 bg-white',
        header: 'bg-white',
      },
      emphasis: {
        root: 'border-blue-200 bg-blue-50',
        header: 'bg-blue-100 text-blue-900',
        footer: 'bg-blue-100',
      },
    },
    size: {
      compact: {
        header: 'p-2',
        body: 'p-2',
        footer: 'p-2',
      },
      cozy: {
        header: 'p-4',
        body: 'p-4',
        footer: 'p-4',
      },
    },
  },
  defaultVariants: { tone: 'default', size: 'cozy' },
})
 
function Card({ tone, size, children }) {
  const { root, header, body, footer } = card({ tone, size })
  return (
    <div className={root()}>
      <div className={header()}>Title</div>
      <div className={body()}>{children}</div>
      <div className={footer()}>Footer</div>
    </div>
  )
}

// Panda — 입력이 CSS-in-JS 객체 (camelCase)
cva({
  base: { display: 'inline-flex', backgroundColor: 'primary' },
})
 
// CVA / tv — 입력이 Tailwind utility 문자열
cva('inline-flex bg-blue-600', { ... })
tv({ base: 'inline-flex bg-blue-600', ... })

const button = tv({
  base: 'inline-flex items-center',
  variants: {
    size: { sm: 'h-8', md: 'h-10', lg: 'h-12' },
  },
})
 
// 호출 시 객체로 반응형 지정
<button className={button({
  size: { initial: 'sm', md: 'md', lg: 'lg' }
})} />
// → 'h-8 md:h-10 lg:h-12'