@idbrnd/design-system 1.6.3 → 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/dist/components/Chip/Chip/Chip.d.ts

@@ -0,0 +1,15 @@
+import { type ButtonHTMLAttributes, type CSSProperties, type MouseEventHandler, type ReactNode } from "react";
+export type ChipVariant = "fillWeak" | "fill" | "outline" | "outlineSurface";
+export type ChipSize = "large" | "medium" | "small" | "xsmall";
+export interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "style" | "type" | "onClick"> {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    variant?: ChipVariant;
+    size?: ChipSize;
+    selected?: boolean;
+    disabled?: boolean;
+    leadingSlot?: ReactNode;
+    trailingSlot?: ReactNode;
+    customStyle?: CSSProperties;
+}
+declare function Chip({ variant, size, selected, disabled, leadingSlot, trailingSlot, customStyle, className, onClick, children, ...rest }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export default Chip;

package/dist/components/Chip/ChipGroup/ChipGroup.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties, type ReactNode } from "react";
+export type ChipGroupType = "selection" | "suggestion";
+export type ChipGroupSize = "large" | "medium" | "small" | "xsmall";
+export interface ChipGroupProps {
+    /**
+     * 칩 목록의 overflow 처리 방식.
+     * - `selection`: 줄바꿈 (기본값)
+     * - `suggestion`: Embla 캐러셀 (가로 드래그 스크롤)
+     */
+    type?: ChipGroupType;
+    /** 칩 목록 앞에 표시할 텍스트/라벨 콘텐츠 */
+    leadingSlot?: ReactNode;
+    /** 칩 목록 앞에 구분선과 함께 표시할 엘리먼트 (아이콘, 아바타 등) */
+    leadingElementSlot?: ReactNode;
+    /** 그룹 내 칩 간격 및 칩 크기 */
+    size?: ChipGroupSize;
+    /**
+     * suggestion 타입에서 스크롤 여부에 따라 양끝에 그라데이션 오버레이 표시
+     */
+    gradient?: boolean;
+    /** 루트 엘리먼트 인라인 스타일 */
+    customStyle?: CSSProperties;
+    children?: ReactNode;
+}
+declare function ChipGroup({ type, leadingSlot, leadingElementSlot, size, gradient, customStyle, children, }: ChipGroupProps): import("react/jsx-runtime").JSX.Element;
+export default ChipGroup;

package/dist/components/Chip/FilterBar/FilterBar.d.ts

@@ -0,0 +1,20 @@
+import { type CSSProperties, type ReactNode } from "react";
+export type FilterBarSize = "large" | "medium" | "small" | "xsmall";
+export interface FilterBarProps {
+    /** 필터 칩 목록 앞에 구분선과 함께 표시할 엘리먼트 (아이콘, 아바타 등) */
+    leadingElementSlot?: ReactNode;
+    /** 필터 칩 목록 뒤에 표시할 엘리먼트 */
+    trailingElementSlot?: ReactNode;
+    /** 칩 간격 크기 */
+    size?: FilterBarSize;
+    /**
+     * true: 위아래 8px 패딩, 그라데이션 없음
+     * false(기본값): 그라데이션 사용, 패딩 없음
+     */
+    verticalPadding?: boolean;
+    /** 루트 엘리먼트 인라인 스타일 */
+    customStyle?: CSSProperties;
+    children?: ReactNode;
+}
+declare function FilterBar({ leadingElementSlot, trailingElementSlot, size, verticalPadding, customStyle, children, }: FilterBarProps): import("react/jsx-runtime").JSX.Element;
+export default FilterBar;

package/dist/components/Chip/FilterChip/FilterChip.d.ts

@@ -0,0 +1,27 @@
+import type { DropdownAlign, DropdownOption, DropdownType } from "../../Dropdown/Dropdown.types";
+import { type ChipProps } from "../Chip/Chip";
+export interface FilterChipProps extends Omit<ChipProps, "onSelect" | "trailingSlot"> {
+    /** 드롭다운에 표시할 옵션 목록 */
+    options: DropdownOption[];
+    /**
+     * 옵션 선택/해제 콜백.
+     * - 새로운 옵션 선택 시: 선택된 `DropdownOption` 전달
+     * - 이미 선택된 옵션 재클릭 시: `undefined` 전달 (선택 해제)
+     */
+    onSelect: (option: DropdownOption | undefined) => void;
+    /** 현재 선택된 옵션의 value */
+    selectedValue?: string;
+    /** 드롭다운 형태. `basic`(기본) | `search`(검색 포함) */
+    dropdownType?: DropdownType;
+    /** 옵션 정렬 방향 */
+    dropdownAlign?: DropdownAlign;
+    /** 드롭다운 목록 너비 (px) */
+    dropdownWidth?: number;
+    /**
+     * true면 선택된 옵션의 label을 children 옆에 함께 표시.
+     * ex) children="소속", 선택값="4공장 C조" → "소속 4공장 C조"
+     */
+    showSelectedLabel?: boolean;
+}
+declare function FilterChip({ options, onSelect, selectedValue, dropdownType, dropdownAlign, dropdownWidth, showSelectedLabel, variant, size, disabled, selected, children, ...chipRest }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
+export default FilterChip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idbrnd/design-system",
-  "version": "1.6.3",
+  "version": "1.7.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -49,6 +49,7 @@
     "vite-plugin-lib-inject-css": "^2.2.2"
   },
   "dependencies": {
+    "embla-carousel-react": "^8.6.0",
     "style-dictionary": "^5.3.1"
   }
 }