@idbrnd/design-system 1.7.0 → 1.7.3

package/README.md

@@ -1,6 +1,6 @@
 # @idbrnd/design-system
 
-![Version](https://img.shields.io/badge/version-1.5.2-4B5FE1?style=flat-square)
+![Version](https://img.shields.io/badge/version-1.7.3-4B5FE1?style=flat-square)
 ![React](https://img.shields.io/badge/React-18.3.1-61DAFB?style=flat-square&logo=react&logoColor=white)
 ![Vite](https://img.shields.io/badge/Vite-7.3.0-646CFF?style=flat-square&logo=vite&logoColor=white)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.9.3-3178C6?style=flat-square&logo=typescript&logoColor=white)
@@ -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)
 
@@ -601,6 +606,7 @@ import { Tooltip } from "@idbrnd/design-system";
 - `position`의 첫 번째 단어는 툴팁이 놓이는 방향, 두 번째 단어는 화살표가 치우치는 방향입니다.
 - `content`에 render function을 전달하면 닫기 버튼 등 인터랙션을 구현할 수 있습니다.
 - 툴팁은 `document.body`에 포탈로 렌더링됩니다.
+- 화살표는 회전된 정사각형(`rotate(45deg)`) 방식으로 렌더링됩니다. 툴팁 본체와 겹쳐 배치해 브라우저 줌 축소 시 발생하는 서브픽셀 갭을 방지하며, 개별 `rgba` 대신 부모 `opacity`를 사용해 겹침 영역의 투명도 이중 적용을 방지합니다.
 
 ---
 
@@ -918,6 +924,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
@@ -946,8 +1135,43 @@ import { Spinner, CustomSpinner, Clip, FadeSpinner } from "@idbrnd/design-system
 
 ```tsx
 import type {
+  // Button
   FillButtonProps,
+  FillButtonSize,
+  FillButtonVariant,
+  FillButtonWidthType,
+  OutlineButtonProps,
+  OutlineButtonSize,
+  OutlineButtonVariant,
+  OutlineButtonWidthType,
+  TextButtonProps,
+  TextButtonSize,
+  TextButtonVariant,
+  TextButtonWidthType,
+  WeakButtonProps,
+  WeakButtonSize,
+  WeakButtonVariant,
+  WeakButtonWidthType,
+
+  // IconButton
+  BasicIconButtonProps,
+  BasicIconButtonSize,
+  FillIconButtonProps,
+  FillIconButtonSize,
+  FillIconButtonVariant,
+  OutlineIconButtonProps,
+  OutlineIconButtonSize,
+
+  // Input
   InputProps,
+  InputSize,
+  InputVariant,
+  DesignType,
+  SearchBarProps,
+  SearchBarSize,
+  SearchBarVariant,
+
+  // Control
   CheckBoxProps,
   CheckBoxVariant,
   CheckBoxSize,
@@ -958,19 +1182,39 @@ import type {
   RadioDensity,
   ToggleSwitchProps,
   ToggleSwitchSize,
+
+  // Feedback
   ToastShowOptions,
+  ToastVariant,
   SnackbarShowOptions,
+  SnackbarVariant,
+  PushBadgeProps,
+  PushBadgeVariant,
+  ClipProps,
+  CustomSpinnerProps,
+  FadeSpinnerProps,
+
+  // Tooltip
   TooltipProps,
   TooltipPosition,
   TooltipVariant,
   TooltipTrigger,
   TooltipContent,
+
+  // Content
+  AvatarProps,
+  AvatarSize,
+  AvatarStackProps,
+  AvatarStackSrc,
+  AvatarStackSize,
   ContentBadgeProps,
   ContentBadgeVariant,
   ContentBadgeSize,
   StateBadgeProps,
   StateBadgeVariant,
   StateBadgeSize,
+
+  // Select & Dropdown
   SelectProps,
   SelectVariant,
   SelectSize,