액션 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
Chip — 동작 의미를 kind로 고정하는 타입 안전 Chip
action·filter·removable 의미를 판별 유니언으로 분리하고 선택 상태와 제거 액션의 접근성을 지키는 Expo·React Native Chip입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
Chip 사용 시점과 역할
Chip은 비슷한 pill 모양 안에서도 action, filter, removable의 의미와 허용 prop을 다르게 고정합니다. filter는 controlled selected 상태를 사용하고 removable은 값 컨테이너 안에 인터랙티브 요소를 중첩하지 않은 별도 제거 버튼을 제공하며, filled·outlined와 sm·md 크기를 공유합니다.
- kind에 따라 onPress·onSelectedChange·onRemove 계약을 상호 배타적으로 제한
- filled·outlined 변형, sm·md 크기와 leading 아이콘 슬롯
- 선택된 filter의 Provider check와 removable의 Provider close 아이콘 폴백
설치와 최소 예제
Chip: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Chip } from '@gj-kit/expo-ui';
<Chip kind="filter" label="완료" selected={done} onSelectedChange={setDone} />접근성과 플랫폼 동작
action은 이름이 있는 button으로, filter는 이름이 변하지 않는 toggle button과 pressed·checked 상태로 노출됩니다. removable은 정적 값과 필수 removeAccessibilityLabel을 가진 별도 제거 button을 형제 관계로 렌더링해 중첩 인터랙션을 피합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.