@bigtablet/design-system 1.18.4 → 1.18.5

package/dist/index.d.ts

@@ -3,9 +3,13 @@ import * as React from 'react';
 import * as react_toastify from 'react-toastify';
 
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 카드 상단에 표시할 제목 */
     heading?: React.ReactNode;
+    /** 카드 그림자 크기 (기본값: "sm") */
     shadow?: "none" | "sm" | "md" | "lg";
+    /** 카드 내부 여백 (기본값: "md") */
     padding?: "none" | "sm" | "md" | "lg";
+    /** 테두리 표시 여부 (기본값: false) */
     bordered?: boolean;
 }
 /**
@@ -19,14 +23,23 @@ declare const Card: ({ heading, shadow, padding, bordered, className, children,
 type AlertVariant = "info" | "success" | "warning" | "error";
 type AlertActionsAlign = "left" | "center" | "right";
 interface AlertOptions {
+    /** 알림 스타일 변형 (기본값: "info") */
     variant?: AlertVariant;
+    /** 알림 제목 */
     title?: React.ReactNode;
+    /** 알림 본문 메시지 */
     message?: React.ReactNode;
+    /** 확인 버튼 텍스트 (기본값: "확인") */
     confirmText?: string;
+    /** 취소 버튼 텍스트 (기본값: "취소") */
     cancelText?: string;
+    /** 취소 버튼 표시 여부 (기본값: false) */
     showCancel?: boolean;
+    /** 액션 버튼 정렬 (기본값: "right") */
     actionsAlign?: AlertActionsAlign;
+    /** 확인 버튼 클릭 시 호출되는 콜백 */
     onConfirm?: () => void;
+    /** 취소 버튼 클릭 시 호출되는 콜백 */
     onCancel?: () => void;
 }
 interface AlertContextValue {
@@ -49,6 +62,7 @@ declare const AlertProvider: React.FC<{
 }>;
 
 interface SpinnerProps {
+    /** 스피너 크기(px) (기본값: 24) */
     size?: number;
     /** 스피너 접근성 레이블 (기본값: "Loading") */
     ariaLabel?: string;
@@ -82,6 +96,7 @@ interface TopLoadingProps {
 declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
 interface ToastProviderProps {
+    /** 토스트 컨테이너 식별자 (기본값: "default") */
     containerId?: string;
 }
 /**
@@ -101,7 +116,9 @@ declare const useToast: (containerId?: string) => {
 };
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 버튼 스타일 변형 (기본값: "primary") */
     variant?: "primary" | "secondary" | "ghost" | "danger";
+    /** 버튼 크기 (기본값: "md") */
     size?: "sm" | "md" | "lg";
     /** 버튼이 컨테이너의 전체 너비를 차지할지 여부 */
     fullWidth?: boolean;
@@ -120,8 +137,11 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 declare const Button: ({ variant, size, fullWidth, width, className, style, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** 체크박스 옆에 표시할 라벨 */
     label?: React.ReactNode;
+    /** 체크박스 크기 (기본값: "md") */
     size?: "sm" | "md" | "lg";
+    /** 중간 선택(indeterminate) 상태 여부 */
     indeterminate?: boolean;
 }
 /**
@@ -134,7 +154,9 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
 interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** 파일 선택 버튼 라벨 텍스트 (기본값: "파일 선택") */
     label?: string;
+    /** 파일 선택 시 호출되는 콜백 */
     onFiles?: (files: FileList | null) => void;
 }
 /**
@@ -146,7 +168,9 @@ interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 declare const FileInput: ({ label, onFiles, className, disabled, ...props }: FileInputProps) => react_jsx_runtime.JSX.Element;
 
 interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** 라디오 버튼 옆에 표시할 라벨 */
     label?: React.ReactNode;
+    /** 라디오 버튼 크기 (기본값: "md") */
     size?: "sm" | "md" | "lg";
 }
 /**
@@ -166,18 +190,31 @@ interface SelectOption {
     disabled?: boolean;
 }
 interface SelectProps {
+    /** 셀렉트 요소의 id (미입력 시 자동 생성) */
     id?: string;
+    /** 셀렉트 위에 표시할 라벨 텍스트 */
     label?: string;
+    /** 선택 전 표시할 플레이스홀더 (기본값: "Select…") */
     placeholder?: string;
+    /** 표시할 옵션 목록 */
     options: SelectOption[];
+    /** 제어형 선택 값 */
     value?: string | null;
+    /** 값 변경 시 호출되는 콜백. 선택된 값과 전체 옵션 객체를 인자로 전달합니다. */
     onChange?: (value: string | null, option?: SelectOption | null) => void;
+    /** 비제어형 초기 선택 값 */
     defaultValue?: string | null;
+    /** 비활성화 여부 */
     disabled?: boolean;
+    /** 셀렉트 크기 (기본값: "md") */
     size?: SelectSize;
+    /** 셀렉트 스타일 변형 (기본값: "outline") */
     variant?: SelectVariant;
+    /** 컨테이너 전체 너비 차지 여부 */
     fullWidth?: boolean;
+    /** 루트 요소에 추가할 className */
     className?: string;
+    /** 선택된 값 텍스트 정렬 (기본값: "left") */
     textAlign?: "left" | "center";
 }
 /**
@@ -189,10 +226,15 @@ interface SelectProps {
 declare const Select: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, variant, fullWidth, className, textAlign, }: SelectProps) => react_jsx_runtime.JSX.Element;
 
 interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /** 제어형 스위치 상태 */
     checked?: boolean;
+    /** 비제어형 초기 스위치 상태 */
     defaultChecked?: boolean;
+    /** 상태 변경 시 호출되는 콜백 */
     onChange?: (checked: boolean) => void;
+    /** 스위치 크기 (기본값: "md") */
     size?: "sm" | "md" | "lg";
+    /** 비활성화 여부 */
     disabled?: boolean;
     /** 스위치 접근성 레이블(스크린 리더용) */
     ariaLabel: string;
@@ -209,18 +251,31 @@ declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAtt
 type TextFieldVariant = "outline" | "filled" | "ghost";
 type TextFieldSize = "sm" | "md" | "lg";
 interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
+    /** 입력 필드 위에 표시할 라벨 텍스트 */
     label?: string;
+    /** 입력 필드 아래에 표시할 도움말 텍스트 */
     helperText?: string;
+    /** 에러 상태 여부 */
     error?: boolean;
+    /** 성공 상태 여부 */
     success?: boolean;
+    /** 입력 필드 스타일 변형 (기본값: "outline") */
     variant?: TextFieldVariant;
+    /** 입력 필드 크기 (기본값: "md") */
     size?: TextFieldSize;
+    /** 입력 필드 왼쪽에 표시할 아이콘 */
     leftIcon?: React.ReactNode;
+    /** 입력 필드 오른쪽에 표시할 아이콘 */
     rightIcon?: React.ReactNode;
+    /** 컨테이너 전체 너비 차지 여부 */
     fullWidth?: boolean;
+    /** 값 변경 시 호출되는 콜백 (IME 조합 완료 후 실행) */
     onChangeAction?: (value: string) => void;
+    /** 제어형 입력 값 */
     value?: string;
+    /** 비제어형 초기 입력 값 */
     defaultValue?: string;
+    /** 입력값 변환 함수 (예: 숫자만 허용, 대문자 변환) */
     transformValue?: (value: string) => string;
 }
 /**
@@ -235,14 +290,23 @@ declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.
 type DatePickerMode = "year-month" | "year-month-day";
 type SelectableRange = "all" | "until-today";
 interface DatePickerProps {
+    /** 데이트 피커 위에 표시할 라벨 텍스트 */
     label?: string;
+    /** 제어형 날짜 값 ("YYYY-MM" 또는 "YYYY-MM-DD" 형식) */
     value?: string;
+    /** 날짜 변경 시 호출되는 콜백. `mode` 값에 따라 "YYYY-MM" 또는 "YYYY-MM-DD" 형식의 문자열이 전달됩니다. */
     onChange: (value: string) => void;
+    /** 선택 모드 (기본값: "year-month-day") */
     mode?: DatePickerMode;
+    /** 연도 선택 범위 시작 (기본값: 1950) */
     startYear?: number;
+    /** 연도 선택 범위 끝 (기본값: 현재 연도 + 10) */
     endYear?: number;
+    /** 선택 가능한 최소 날짜 ("YYYY-MM-DD" 형식) */
     minDate?: string;
+    /** 선택 가능한 날짜 범위 ("all": 제한 없음, "until-today": 오늘까지) */
     selectableRange?: SelectableRange;
+    /** 비활성화 여부 */
     disabled?: boolean;
     /** 데이트 피커가 컨테이너의 전체 너비를 차지할지 여부 */
     fullWidth?: boolean;
@@ -261,8 +325,11 @@ interface DatePickerProps {
 declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
+    /** 현재 페이지 번호 (1-based) */
     page: number;
+    /** 전체 페이지 수 */
     totalPages: number;
+    /** 페이지 변경 시 호출되는 콜백 */
     onChange: (page: number) => void;
 }
 /**
@@ -274,10 +341,15 @@ interface PaginationProps {
 declare const Pagination: ({ page, totalPages, onChange }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
 interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 모달 열림 여부 */
     open: boolean;
+    /** 모달 닫기 콜백 */
     onClose?: () => void;
+    /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
     closeOnOverlay?: boolean;
+    /** 모달 패널 너비 (기본값: 520) */
     width?: number | string;
+    /** 모달 헤더에 표시할 제목 */
     title?: React.ReactNode;
     /** 모달 접근성 레이블(기본값: title 또는 "Dialog") */
     ariaLabel?: string;

package/dist/next.d.ts

@@ -4,26 +4,42 @@ import { LucideIcon } from 'lucide-react';
 
 type MatchMode = "startsWith" | "exact";
 interface SidebarLinkItem {
+    /** 항목 타입 (생략 시 "link"로 간주) */
     type?: "link";
+    /** 링크 경로 */
     href: string;
+    /** 메뉴 항목에 표시할 라벨 */
     label: React.ReactNode;
+    /** 메뉴 항목 앞에 표시할 아이콘 */
     icon?: LucideIcon;
 }
 interface SidebarGroupItem {
+    /** 항목 타입 ("group"으로 고정) */
     type: "group";
+    /** 그룹 고유 식별자 */
     id: string;
+    /** 그룹 헤더에 표시할 라벨 */
     label: React.ReactNode;
+    /** 그룹 헤더 앞에 표시할 아이콘 */
     icon?: LucideIcon;
+    /** 그룹 하위 링크 항목 목록 */
     children: SidebarLinkItem[];
 }
 type SidebarItem = SidebarLinkItem | SidebarGroupItem;
 interface SidebarProps {
+    /** 사이드바에 표시할 메뉴 항목 목록 */
     items?: SidebarItem[];
+    /** 현재 활성 경로 (활성 메뉴 항목 하이라이트에 사용) */
     activePath?: string;
+    /** 메뉴 항목 클릭 시 호출되는 콜백 */
     onItemSelect?: (href: string) => void;
+    /** 루트 요소에 추가할 className */
     className?: string;
+    /** 루트 요소에 적용할 인라인 스타일 */
     style?: React.CSSProperties;
+    /** 활성 경로 매칭 방식 (기본값: "startsWith") */
     match?: MatchMode;
+    /** 브랜드 로고 클릭 시 이동할 경로 (기본값: "/main") */
     brandHref?: string;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.18.4",
+  "version": "1.18.5",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",