@idbrnd/design-system 1.6.3 → 1.7.0

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.0",
   "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"
   }
 }