06 Typed Variants — Panda codegen vs VariantProps, HTML attr 충돌, polymorphic

# package.json
{
  "scripts": {
    "prepare": "panda codegen",
    "dev": "panda codegen --watch & next dev"
  }
}

// styled-system/recipes/button.d.ts (자동 생성)
import type { ConditionalValue } from '../types'
import type { Pretty } from '../types/helpers'
import type { DistributiveOmit } from '../types/system-types'
 
interface ButtonVariant {
  size: 'sm' | 'md' | 'lg'
  variant: 'primary' | 'ghost' | 'danger'
}
 
type ButtonVariantMap = {
  [key in keyof ButtonVariant]: Array<ButtonVariant[key]>
}
 
export type ButtonVariantProps = {
  [key in keyof ButtonVariant]?: ConditionalValue<ButtonVariant[key]>
}
 
export interface ButtonRecipe {
  __type: ButtonVariantProps
  (props?: ButtonVariantProps): string
  raw: (props?: ButtonVariantProps) => ButtonVariantProps
  variantMap: ButtonVariantMap
  variantKeys: Array<keyof ButtonVariant>
  splitVariantProps<Props extends ButtonVariantProps>(
    props: Props
  ): [ButtonVariantProps, Pretty<DistributiveOmit<Props, keyof ButtonVariantProps>>]
}
 
export declare const button: ButtonRecipe

import { button } from 'styled-system/recipes'
 
function Button(props) {
  const [variantProps, restProps] = button.splitVariantProps(props)
  return <button className={button(variantProps)} {...restProps} />
}

import { cva, type VariantProps } from 'class-variance-authority'
 
const button = cva('inline-flex items-center', {
  variants: {
    size: { sm: 'h-8', md: 'h-10', lg: 'h-12' },
    variant: {
      primary: 'bg-blue-600 text-white',
      ghost: 'bg-transparent',
    },
  },
  defaultVariants: { size: 'md', variant: 'primary' },
})
 
// 핵심 한 줄
type ButtonVariants = VariantProps<typeof button>
//   ^? { size?: 'sm' | 'md' | 'lg'; variant?: 'primary' | 'ghost' }

// CVA 내부 (단순화)
type ConfigVariants<T> = T extends (props: infer P) => string ? P : never
export type VariantProps<T> = Omit<ConfigVariants<T>, 'class' | 'className'>

import { tv, type VariantProps } from 'tailwind-variants'
 
const button = tv({
  base: '...',
  variants: { ... },
})
 
type Props = VariantProps<typeof button>
// 결과는 CVA와 사실상 동일
 
// slots가 있으면 반환 타입이 다름 — 각 slot 함수의 객체
const card = tv({ slots: { root: '...', body: '...' }, variants: { ... } })
const { root, body } = card({ tone: 'emphasis' })
// root, body 각각이 함수

const button = cva('...', {
  variants: {
    type: { // ← HTML <button type="submit">의 type과 충돌
      primary: 'bg-blue-600',
      ghost: 'bg-transparent',
    },
  },
})
 
type ButtonProps = VariantProps<typeof button> &
  React.ButtonHTMLAttributes<HTMLButtonElement>
// → type: 'primary' | 'ghost' | 'submit' | 'reset' | 'button' (intersection of broken)
 
<Button type="primary"> {/* 컴파일 통과, 런타임에 form submit 동작 깨짐 */}

const button = cva('...', {
  variants: {
    variant: { // 또는 'tone', 'intent'
      primary: 'bg-blue-600',
      ghost: 'bg-transparent',
    },
  },
})
 
<Button type="submit" variant="primary"> {/* 둘이 독립 */}

type InputProps = VariantProps<typeof input> & React.InputHTMLAttributes<HTMLInputElement>
// size: 'sm' | 'md' | 'lg' | number — 두 의미가 union

type InputProps = VariantProps<typeof input> &
  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>

import { cva, type VariantProps } from 'class-variance-authority'
import type { ComponentPropsWithoutRef, ElementType } from 'react'
 
const button = cva('...', { variants: { ... } })
 
type ButtonOwnProps<E extends ElementType> = VariantProps<typeof button> & {
  as?: E
}
 
type ButtonProps<E extends ElementType> = ButtonOwnProps<E> &
  Omit<ComponentPropsWithoutRef<E>, keyof ButtonOwnProps<E>>
 
export function Button<E extends ElementType = 'button'>({
  as,
  size,
  variant,
  ...props
}: ButtonProps<E>) {
  const Component = as ?? 'button'
  return <Component className={button({ size, variant })} {...props} />
}
 
// 사용
<Button>Click</Button>            // <button>
<Button as="a" href="/x">Link</Button>  // <a> — href 인식