0.1.27

카테고리 필터·옵션 선택에 사용하는 선택형 레이블 Chip 컴포넌트를 추가합니다. 단일/다중 선택과 선택 상태 기반 자동 스타일 전환, 아바타·제거 버튼 조합을 지원합니다.

Chip 컴포넌트를 추가합니다. Tag를 기반으로 한 선택형 인터랙티브 레이블로, 카테고리 필터나 옵션 선택처럼 선택 상태를 명확히 드러내야 하는 UI에 사용합니다.

컴포넌트 구조

Compound 컴포넌트로 필요한 부분만 조합합니다.

Chip.Group — 선택 세트를 관리합니다. multiple로 단일/다중 선택을 전환하고 value/onValueChange로 제어합니다.
Chip.Root — 칩 본체입니다.
Chip.Icon — 아이콘 슬롯입니다. 라벨 앞뒤 어디에나 놓을 수 있습니다.
Chip.Label — 텍스트입니다.
Chip.Indicator — 선택 시 체크마크를 표시하는 opt-in 슬롯입니다. render로 선택 상태에 따라 직접 그릴 수 있습니다.
Chip.RemoveButton — 제거(×) 버튼입니다.

Chip.Group 안에서 variant를 지정하지 않으면 미선택 칩은 outline, 선택된 칩은 filled로 자동 전환됩니다. variant를 명시하면 상태와 무관하게 고정됩니다.

그룹 내 칩은 Tab으로 이동하고 Space / Enter로 선택을 토글합니다. variant는 filled / outline, size는 sm / md / lg를 지원하며 모두 반응형 객체를 받습니다.

size="lg" 칩에 Avatar.Root를 앞에 놓아 인물 칩을 구성할 수 있습니다. 리딩 아이콘/아바타의 여백은 $css(paddingLeft 등)로 직접 조정합니다 — 컴포넌트가 강제하지 않습니다.

Chip.RemoveButton을 조합하면 제거 가능한 칩이 됩니다. 키보드 Delete / Backspace로도 제거할 수 있습니다.

Chip은 선택 상태(selected)를 가지는 인터랙티브 레이블이고 Tag는 표시·제거 전용입니다. 단순히 정보를 보여주거나 제거만 필요하면 Tag를, 선택·필터가 필요하면 Chip을 사용하세요.