@idbrnd/design-system 1.2.2 → 1.3.0

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,3 @@
+import type { DropdownProps } from './Dropdown.types';
+declare function Dropdown({ children, type, align, content, options, onSelect, selectedValue, textColor, customStyle, disabled, width, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export default Dropdown;

package/dist/components/Dropdown/Dropdown.types.d.ts

@@ -0,0 +1,76 @@
+import type { CSSProperties, ReactNode } from "react";
+export type DropdownType = "basic" | "search";
+export type DropdownAlign = "left" | "center";
+export interface DropdownOption {
+    /** 옵션에 표시되는 텍스트 */
+    label: string;
+    /** 옵션의 고유 식별 값 */
+    value: string;
+    /** 옵션 라벨 좌측에 표시할 아이콘. `content={true}`일 때만 렌더링됩니다. */
+    icon?: ReactNode;
+}
+export interface DropdownProps {
+    /** 드롭다운 트리거 엘리먼트.
+     * - 클릭 시 드롭다운 목록이 열리고 닫힙니다.
+     * - 버튼, 텍스트, 아이콘 등 자유롭게 전달할 수 있습니다.
+     * @example
+     * ```tsx
+     * <Dropdown options={options} onSelect={handleSelect}>
+     *   <button>메뉴 열기</button>
+     * </Dropdown>
+     * ```
+     */
+    children: ReactNode;
+    /** 드롭다운 목록의 형태.
+     * - `basic`: 일반 목록형 (기본값)
+     * - `search`: 상단에 검색 입력란이 포함된 형태. 입력 시 옵션이 실시간 필터링됩니다.
+     * @defaultValue `'basic'`
+     */
+    type?: DropdownType;
+    /** 옵션 항목의 텍스트 정렬 방향.
+     * - `left`: 좌측 정렬 (기본값)
+     * - `center`: 중앙 정렬. 아이콘이 있는 경우 아이콘은 좌측, 라벨은 중앙 정렬됩니다.
+     * @defaultValue `'left'`
+     */
+    align?: DropdownAlign;
+    /** 옵션 항목에 아이콘 영역을 표시할지 여부.
+     * - `false`: 아이콘 영역 미표시 (기본값)
+     * - `true`: 각 옵션의 `icon` 값이 존재하면 라벨 좌측에 아이콘을 표시
+     * @defaultValue `false`
+     */
+    content?: boolean;
+    /** 드롭다운에 표시할 옵션 아이템 배열.
+     * 각 아이템은 `{ label, value, icon? }` 형태입니다.
+     */
+    options: DropdownOption[];
+    /** 옵션 항목 선택 시 호출되는 콜백.
+     * 선택된 `DropdownOption` 객체가 인자로 전달됩니다.
+     */
+    onSelect: (option: DropdownOption) => void;
+    /** 현재 선택된 옵션의 `value`.
+     * - 일치하는 항목에 선택 스타일과 `aria-selected`가 적용됩니다.
+     * - 미지정 시 선택 상태 없음
+     */
+    selectedValue?: string;
+    /** 옵션 라벨의 텍스트 색상을 커스터마이징합니다.
+     * - 미지정 시 기본 텍스트 색상(`inherit`) 사용
+     * - CSS 색상 문자열을 전달합니다. (예: `'#6366f1'`, `'red'`)
+     */
+    textColor?: string;
+    /** 루트 엘리먼트 인라인 스타일. (`style` prop 대신 사용)
+     * - 커스텀 해야 할 스타일이 있을 때 사용
+     * - 컴포넌트 너비 설정 시 px이 아닌 다른 단위를 사용해야 한다면, 이 속성 사용 권장
+     */
+    customStyle?: CSSProperties;
+    /** 비활성화 여부.
+     * - `false`: 트리거 클릭 시 드롭다운 열림 (기본값)
+     * - `true`: 트리거 클릭이 무시되고 드롭다운이 열리지 않음
+     * @defaultValue `false`
+     */
+    disabled?: boolean;
+    /** 드롭다운 목록의 너비. (단위: px)
+     * - 미지정 시 트리거 엘리먼트의 너비에 맞춤 (기본값)
+     * - 숫자 전달 시 고정 너비 적용
+     */
+    width?: number;
+}

package/dist/components/Dropdown/DropdownMenu.d.ts

@@ -0,0 +1,3 @@
+import type { DropdownMenuProps } from './DropdownMenu.types';
+declare function DropdownMenu({ listboxId, type, align, content, options, selectedValue, onSelect, textColor, closing, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export default DropdownMenu;

package/dist/components/Dropdown/DropdownMenu.types.d.ts

@@ -0,0 +1,50 @@
+import type { DropdownOption } from "./Dropdown.types";
+export type DropdownMenuType = "basic" | "search";
+export type DropdownMenuAlign = "left" | "center";
+export interface DropdownMenuProps {
+    /** `<ul>` 엘리먼트의 id. 트리거의 `aria-controls`와 연결됩니다.
+     * - 미지정 시 id 속성 생략
+     */
+    listboxId?: string;
+    /** 드롭다운 목록의 형태.
+     * - `basic`: 일반 목록형 (기본값)
+     * - `search`: 상단에 검색 입력란이 포함된 형태. 입력 시 옵션이 실시간 필터링됩니다.
+     * @defaultValue `'basic'`
+     */
+    type?: DropdownMenuType;
+    /** 옵션 항목의 텍스트 정렬 방향.
+     * - `left`: 좌측 정렬 (기본값)
+     * - `center`: 중앙 정렬. 아이콘이 있는 경우 아이콘은 좌측, 라벨은 중앙 정렬됩니다.
+     * @defaultValue `'left'`
+     */
+    align?: DropdownMenuAlign;
+    /** 옵션 항목에 아이콘 영역을 표시할지 여부.
+     * - `false`: 아이콘 영역 미표시 (기본값)
+     * - `true`: 각 옵션의 `icon` 값이 존재하면 라벨 좌측에 아이콘을 표시
+     * @defaultValue `false`
+     */
+    content?: boolean;
+    /** 드롭다운에 표시할 옵션 아이템 배열.
+     * 각 아이템은 `{ label, value, icon? }` 형태입니다.
+     */
+    options: DropdownOption[];
+    /** 현재 선택된 옵션의 `value`.
+     * - 일치하는 항목에 선택 스타일(`selectedItem`)과 `aria-selected`가 적용됩니다.
+     * - 미지정 시 선택 상태 없음
+     */
+    selectedValue?: string;
+    /** 옵션 항목 선택 시 호출되는 콜백.
+     * 선택된 `DropdownOption` 객체가 인자로 전달됩니다.
+     */
+    onSelect: (option: DropdownOption) => void;
+    /** 옵션 라벨의 텍스트 색상을 커스터마이징합니다.
+     * - 미지정 시 기본 텍스트 색상(`inherit`) 사용
+     * - CSS 색상 문자열을 전달합니다. (예: `'#6366f1'`, `'red'`)
+     */
+    textColor?: string;
+    /** 닫힘 애니메이션 진행 중 여부. (내부 전용)
+     * - `true`일 때 퇴장 애니메이션이 재생됩니다.
+     * @defaultValue `false`
+     */
+    closing?: boolean;
+}

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,4 @@
+import type { SelectProps } from './Select.types';
+export type { SelectAlign, SelectProps, SelectSize, SelectType, SelectVariant, } from './Select.types';
+declare function Select({ variant, size, heading, required, leadingContent, description, disabled, placeholder, value, onSelect, options, type, align, content, width, customStyle, textColor, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export default Select;

package/dist/components/Select/Select.types.d.ts

@@ -0,0 +1,80 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { DropdownOption } from "../Dropdown/Dropdown.types";
+export type SelectVariant = "default" | "choosing" | "error" | "selected";
+export type SelectSize = "large" | "medium" | "small";
+export type SelectType = "basic" | "search";
+export type SelectAlign = "left" | "center";
+export interface SelectProps {
+    /** 트리거 박스 상태.
+     * - `default`: 기본 상태 (기본값)
+     * - `choosing`: 선택 중인 상태 (자동 적용)
+     * - `error`: 에러 상태 (자동 적용)
+     * - `selected`: 선택 완료 상태 (자동 적용)
+     */
+    variant?: SelectVariant;
+    /** 높이.
+     * - `large`: 44px | `medium`: 40px | `small`: 36px (기본값)
+     */
+    size?: SelectSize;
+    /** 상단 라벨 텍스트.
+     * - 라벨 텍스트 없으면 라벨 미표시 (기본값)
+     */
+    heading?: string;
+    /** 라벨 우측 `*` 표시할지 여부
+     * - `false`: 라벨 우측 `*` 미표시 (기본값)
+     * - `true`: 라벨 우측 `*` 표시
+     */
+    required?: boolean;
+    /** 텍스트 좌측에 표시할 아이콘 등의 컨텐츠.
+     * - 컨텐츠 없으면 미표시 (기본값)
+     */
+    leadingContent?: ReactNode;
+    /** 하단 안내 문구.
+     * - 안내 문구 없으면 미표시 (기본값)
+     */
+    description?: ReactNode;
+    /** 비활성화 여부.
+     * - `false`: 비활성화 아님 (기본값)
+     * - `true`: 비활성화
+     */
+    disabled?: boolean;
+    /** 플레이스홀더 텍스트.
+     * - 플레이스홀더 텍스트 없으면 미표시 (기본값)
+     */
+    placeholder?: string;
+    /** 현재 선택된 옵션. */
+    value?: DropdownOption | null;
+    /** 옵션 선택 시 콜백. */
+    onSelect?: (option: DropdownOption) => void;
+    /** 드롭다운 옵션 목록. (기본값: 빈 배열) */
+    options?: DropdownOption[];
+    /** 드롭다운 형태.
+     * - `basic`: 일반 목록형 (기본값)
+     * - `search`: 상단에 검색바가 포함된 형태
+     */
+    type?: SelectType;
+    /** 옵션 텍스트 정렬.
+     * - `left`: 좌측 정렬 (기본값)
+     * - `center`: 중앙 정렬
+     */
+    align?: SelectAlign;
+    /** 옵션에 아이콘 영역을 표시할지 여부.
+     * - `false`: 아이콘 영역을 미표시 (기본값)
+     * - `true`: 아이콘 영역을 표시
+     */
+    content?: boolean;
+    /** 컴포넌트 너비. (단위: px)
+     * - 미지정 시 부모 컨테이너 width: 100% (유동형) (기본값)
+     * - 숫자 전달 시 고정 너비 적용
+     */
+    width?: number;
+    /** 루트 엘리먼트 인라인 스타일 (`style` prop 대신 사용)
+     * - 커스텀 해야 할 스타일이 있을 때 사용
+     * - 컴포넌트 너비 설정 시 px이 아닌 다른 속성을 사용해야 한다면, 이 속성 사용 권장
+     */
+    customStyle?: CSSProperties;
+    /** 리스트 항목 텍스트 색상 커스터마이징.
+     * - 미지정 시 기본 텍스트 색상 사용
+     */
+    textColor?: string;
+}

package/dist/index.d.ts

@@ -36,3 +36,7 @@ export { default as ContentBadge } from "./components/Content/ContentBadge/Conte
 export type { ContentBadgeProps, ContentBadgeVariant, ContentBadgeSize, } from "./components/Content/ContentBadge/ContentBadge";
 export { default as StateBadge } from "./components/Content/StateBadge/StateBadge";
 export type { StateBadgeProps, StateBadgeVariant, StateBadgeSize, } from "./components/Content/StateBadge/StateBadge";
+export { default as Select } from "./components/Select/Select";
+export type { SelectProps, SelectVariant, SelectSize, SelectType, SelectAlign, } from "./components/Select/Select";
+export { default as Dropdown } from "./components/Dropdown/Dropdown";
+export type { DropdownProps, DropdownType, DropdownAlign, DropdownOption, } from "./components/Dropdown/Dropdown.types";