Bonbon Select

`className` 프롭을 이용해 테일윈드 자동완성을 누리면서, 커스텀 타이포그래피(`typo-`)와 시멘틱/커스텀 컬러 토큰(`text-`)을 안전하게 병합 오버라이딩할 수 있는 본본 셀렉트 예제입니다.

Interactive Demos

1. Default 스타일 (기본값)

프롭을 지정하지 않았을 때의 디자인 사양입니다. (기본: typo-t2-bold / text-grey-900)

Selected: apple

2. Custom 타이포 & 브랜드 컬러 (시멘틱 토큰)

작은 폰트(`typo-t4-medium`)와 정규 브랜드 시멘틱 컬러(`text-brand-600`)를 `className`에 기재하여 오버라이딩했습니다.

Selected: banana

3. Huge 타이포 & 붉은색 경고 컬러 (시멘틱 토큰)

매우 큰 폰트(`typo-t1-bold`)와 붉은색(`text-red-500`)을 `className`에 기재하여 화살표 및 체크 표시까지 상속되도록 했습니다.

Selected: cherry

Usage Example

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/components/bonbon/select";

// 1. 기본 스타일 (Default)
<Select value={value} onValueChange={setValue}>
  <SelectTrigger className="w-[280px]">
    <SelectValue placeholder="선택하세요" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">사과 🍎</SelectItem>
  </SelectContent>
</Select>

// 2. className을 이용한 디자인 오버라이딩 (IntelliSense 테일윈드 자동완성 지원)
// className에 typo- 와 시멘틱 컬러(text-brand-600)를 명시하면 기본 스타일이 깔끔하게 덮어써집니다.
<Select value={value} onValueChange={setValue}>
  <SelectTrigger className="w-[280px] typo-t4-medium text-brand-600">
    <SelectValue placeholder="선택하세요" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem className="typo-t4-medium text-brand-600 data-[state=checked]:text-brand-600" value="apple">사과 🍎</SelectItem>
    ...
  </SelectContent>
</Select>