@idbrnd/design-system 1.7.0 → 1.7.1

package/README.md

@@ -63,6 +63,11 @@ export default function App() {
   - [AvatarStack](#avatarstack)
   - [ContentBadge](#contentbadge)
   - [StateBadge](#statebadge)
+- [Chip](#chip)
+  - [Chip](#chip-1)
+  - [ChipGroup](#chipgroup)
+  - [FilterChip](#filterchip)
+  - [FilterBar](#filterbar)
 - [기타](#기타)
   - [Spinner](#spinner)
 
@@ -918,6 +923,189 @@ import { StateBadge } from "@idbrnd/design-system";
 
 ---
 
+## Chip
+
+`Chip`, `ChipGroup`, `FilterChip`, `FilterBar` 4개의 컴포넌트로 구성됩니다.
+
+### Chip
+
+기본 칩 버튼 컴포넌트입니다.
+
+```tsx
+import { Chip } from "@idbrnd/design-system";
+
+// 기본
+<Chip>텍스트</Chip>
+
+// variant + selected
+<Chip variant="fill" selected>선택됨</Chip>
+
+// 아이콘 포함
+<Chip
+  leadingSlot={<img src="/icon.svg" width={16} height={16} alt="" />}
+  trailingSlot={<img src="/close.svg" width={16} height={16} alt="" />}
+>
+  검색어
+</Chip>
+
+// 클릭 핸들러
+<Chip variant="outline" selected={isSelected} onClick={() => setIsSelected(p => !p)}>
+  토글
+</Chip>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `"fillWeak" \| "fill" \| "outline" \| "outlineSurface"` | `"outline"` | 칩 스타일 |
+| `size` | `"large" \| "medium" \| "small" \| "xsmall"` | `"medium"` | 칩 크기 |
+| `selected` | `boolean` | `false` | 선택 상태 |
+| `disabled` | `boolean` | `false` | 비활성화 |
+| `leadingSlot` | `ReactNode` | — | 텍스트 왼쪽 콘텐츠 |
+| `trailingSlot` | `ReactNode` | — | 텍스트 오른쪽 콘텐츠 |
+| `onClick` | `MouseEventHandler` | — | 클릭 핸들러 |
+| `customStyle` | `CSSProperties` | — | 루트 엘리먼트 인라인 스타일 |
+
+---
+
+### ChipGroup
+
+여러 `Chip`을 묶어서 표시하는 컨테이너입니다.
+
+```tsx
+import { Chip, ChipGroup } from "@idbrnd/design-system";
+
+// selection — 줄바꿈 다중 선택
+const [selected, setSelected] = useState<DropdownOption[]>([]);
+
+function toggle(prev: DropdownOption[], item: DropdownOption) {
+  return prev.some(o => o.value === item.value)
+    ? prev.filter(o => o.value !== item.value)
+    : [...prev, item];
+}
+
+<ChipGroup type="selection" leadingSlot={<span>카테고리</span>}>
+  {categories.map(({ label, value }) => (
+    <Chip
+      key={value}
+      variant="outline"
+      selected={selected.some(o => o.value === value)}
+      onClick={() => setSelected(prev => toggle(prev, { label, value }))}
+    >
+      {label}
+    </Chip>
+  ))}
+</ChipGroup>
+
+// suggestion — 가로 드래그 캐러셀 + 그라데이션
+<ChipGroup type="suggestion" gradient>
+  {suggestions.map(({ label, value }) => (
+    <Chip key={value} variant="fillWeak">{label}</Chip>
+  ))}
+</ChipGroup>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `"selection" \| "suggestion"` | `"selection"` | `selection`: 줄바꿈, `suggestion`: 가로 드래그 캐러셀 |
+| `size` | `"large" \| "medium" \| "small" \| "xsmall"` | `"medium"` | 칩 간격 크기 |
+| `gradient` | `boolean` | `false` | `suggestion` 타입에서 스크롤 시 양끝 그라데이션 표시 |
+| `leadingSlot` | `ReactNode` | — | 칩 목록 앞 텍스트/라벨 |
+| `leadingElementSlot` | `ReactNode` | — | 칩 목록 앞 구분선 포함 엘리먼트 |
+| `customStyle` | `CSSProperties` | — | 루트 엘리먼트 인라인 스타일 |
+
+---
+
+### FilterChip
+
+드롭다운 옵션 선택 기능이 내장된 칩입니다. `trailingSlot`을 제외한 `Chip`의 모든 props를 지원합니다.
+
+```tsx
+import { FilterChip } from "@idbrnd/design-system";
+import type { DropdownOption } from "@idbrnd/design-system";
+
+const [sort, setSort] = useState<DropdownOption | undefined>();
+
+// 기본
+<FilterChip
+  variant="outline"
+  options={sortOptions}
+  selectedValue={sort?.value}
+  onSelect={setSort}
+>
+  {sort?.label ?? "정렬"}
+</FilterChip>
+
+// showSelectedLabel — "소속 하의" 형태로 표시, 재클릭 시 선택 해제
+<FilterChip
+  variant="outline"
+  options={categoryOptions}
+  selectedValue={category?.value}
+  onSelect={setCategory}
+  showSelectedLabel
+>
+  소속
+</FilterChip>
+
+// 검색형 드롭다운 + 너비 고정
+<FilterChip
+  variant="outline"
+  options={brandOptions}
+  selectedValue={brand?.value}
+  onSelect={setBrand}
+  dropdownType="search"
+  dropdownWidth={280}
+>
+  {brand?.label ?? "브랜드"}
+</FilterChip>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `DropdownOption[]` | (필수) | 드롭다운 옵션 목록 |
+| `onSelect` | `(option: DropdownOption \| undefined) => void` | (필수) | 선택/해제 콜백. 이미 선택된 옵션 재클릭 시 `undefined` 전달 |
+| `selectedValue` | `string` | — | 현재 선택된 옵션의 `value` |
+| `dropdownType` | `"basic" \| "search"` | `"basic"` | `search`: 검색 입력란 포함 |
+| `dropdownAlign` | `"left" \| "center"` | `"left"` | 드롭다운 정렬 방향 |
+| `dropdownWidth` | `number` | — | 드롭다운 너비 (px) |
+| `showSelectedLabel` | `boolean` | `false` | `children`을 prefix로, 선택값 label을 옆에 함께 표시 |
+
+---
+
+### FilterBar
+
+`FilterChip`들을 가로 드래그 캐러셀로 배치하는 컨테이너입니다.
+
+```tsx
+import { FilterBar, FilterChip } from "@idbrnd/design-system";
+
+<FilterBar
+  leadingElementSlot={<img src="/filter-icon.svg" width={24} height={24} alt="" />}
+  trailingElementSlot={<button onClick={handleReset}>초기화</button>}
+>
+  <FilterChip options={sortOptions} selectedValue={sort?.value} onSelect={setSort} showSelectedLabel>
+    정렬
+  </FilterChip>
+  <FilterChip options={categoryOptions} selectedValue={category?.value} onSelect={setCategory} showSelectedLabel>
+    소속
+  </FilterChip>
+</FilterBar>
+
+// verticalPadding — 패딩 O, 그라데이션 X
+<FilterBar verticalPadding>
+  <FilterChip ...>정렬</FilterChip>
+</FilterBar>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `"large" \| "medium" \| "small" \| "xsmall"` | `"medium"` | 칩 간격 및 슬롯 폰트 크기 |
+| `verticalPadding` | `boolean` | `false` | `true`: 위아래 8px 패딩, 그라데이션 없음. `false`: 그라데이션 사용 |
+| `leadingElementSlot` | `ReactNode` | — | 칩 목록 앞 구분선 포함 엘리먼트 |
+| `trailingElementSlot` | `ReactNode` | — | 칩 목록 뒤 엘리먼트 (초기화 버튼 등) |
+| `customStyle` | `CSSProperties` | — | 루트 엘리먼트 인라인 스타일 |
+
+---
+
 ## 기타
 
 ### Spinner

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idbrnd/design-system",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",