@bigtablet/design-system 1.18.1 → 1.18.3

package/dist/index.css

@@ -431,9 +431,11 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  cursor: pointer;
 }
 .file_input:hover .file_input_label {
   border-color: rgba(0, 0, 0, 0.08);
+  cursor: pointer;
 }
 .file_input_control {
   position: absolute;

package/dist/index.d.ts

@@ -8,6 +8,12 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     padding?: "none" | "sm" | "md" | "lg";
     bordered?: boolean;
 }
+/**
+ * 카드 컴포넌트를 렌더링한다.
+ * 그림자/패딩/테두리 옵션을 조합해 레이아웃 컨테이너를 구성한다.
+ * @param props 카드 속성
+ * @returns 렌더링된 카드 UI
+ */
 declare const Card: ({ heading, shadow, padding, bordered, className, children, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
 
 type AlertVariant = "info" | "success" | "warning" | "error";
@@ -26,16 +32,33 @@ interface AlertOptions {
 interface AlertContextValue {
     showAlert: (options: AlertOptions) => void;
 }
+/**
+ * AlertContext를 사용하는 훅.
+ * Provider 외부에서 호출되면 오류를 던진다.
+ * @returns alert 컨트롤러
+ */
 declare const useAlert: () => AlertContextValue;
+/**
+ * 알림 모달을 제어하는 Provider를 렌더링한다.
+ * 내부 상태를 통해 AlertModal 표시와 확인/취소 흐름을 관리한다.
+ * @param props Provider 속성
+ * @returns 렌더링된 Provider와 모달
+ */
 declare const AlertProvider: React.FC<{
     children: React.ReactNode;
 }>;
 
 interface SpinnerProps {
     size?: number;
-    /** Accessible label for the spinner (default: "Loading") */
+    /** 스피너 접근성 레이블 (기본값: "Loading") */
     ariaLabel?: string;
 }
+/**
+ * 스피너를 렌더링한다.
+ * 크기와 접근성 레이블을 적용한 뒤 상태 표시용 요소를 반환한다.
+ * @param props 스피너 속성
+ * @returns 렌더링된 스피너 요소
+ */
 declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => react_jsx_runtime.JSX.Element;
 
 interface TopLoadingProps {
@@ -50,11 +73,23 @@ interface TopLoadingProps {
     /** 프로그레스 바의 접근성 레이블 (기본값: "Page loading") */
     ariaLabel?: string;
 }
+/**
+ * 상단 로딩바를 렌더링한다.
+ * 표시 여부와 진행률에 따라 determinate/indeterminate 상태를 구성한다.
+ * @param props 로딩바 속성
+ * @returns 렌더링된 로딩바 요소 또는 null
+ */
 declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
 interface ToastProviderProps {
     containerId?: string;
 }
+/**
+ * 토스트 컨테이너를 렌더링한다.
+ * 기본 옵션을 설정하고 전역 토스트 표시 영역을 제공한다.
+ * @param props 토스트 컨테이너 속성
+ * @returns 렌더링된 토스트 컨테이너
+ */
 declare const ToastProvider: ({ containerId }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
 
 declare const useToast: (containerId?: string) => {
@@ -68,14 +103,20 @@ declare const useToast: (containerId?: string) => {
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "ghost" | "danger";
     size?: "sm" | "md" | "lg";
-    /** Whether the button should take the full width of its container */
+    /** 버튼이 컨테이너의 전체 너비를 차지할지 여부 */
     fullWidth?: boolean;
     /**
-     * Custom width for the button
-     * @deprecated Use `fullWidth` prop or CSS instead
+     * 버튼의 커스텀 너비
+     * @deprecated `fullWidth` 사용 또는 CSS로 처리
      */
     width?: string;
 }
+/**
+ * 버튼을 렌더링한다.
+ * 전달된 props로 클래스 조합과 인라인 스타일을 계산한 뒤 버튼 요소를 반환한다.
+ * @param props 버튼 속성
+ * @returns 렌더링된 버튼 요소
+ */
 declare const Button: ({ variant, size, fullWidth, width, className, style, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
@@ -83,18 +124,38 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
     size?: "sm" | "md" | "lg";
     indeterminate?: boolean;
 }
+/**
+ * 체크박스를 렌더링한다.
+ * indeterminate 상태를 반영하고 라벨을 포함한 UI를 구성한다.
+ * @param props 체크박스 속성
+ * @param ref 입력 요소 참조
+ * @returns 렌더링된 체크박스 UI
+ */
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
 interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
     onFiles?: (files: FileList | null) => void;
 }
+/**
+ * 파일 입력 컴포넌트를 렌더링한다.
+ * 내부 input 변경을 감지해 파일 목록을 콜백으로 전달한다.
+ * @param props 파일 입력 속성
+ * @returns 렌더링된 파일 입력 UI
+ */
 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;
     size?: "sm" | "md" | "lg";
 }
+/**
+ * 라디오 버튼을 렌더링한다.
+ * 크기별 클래스와 라벨을 조합해 UI를 구성한다.
+ * @param props 라디오 속성
+ * @param ref 입력 요소 참조
+ * @returns 렌더링된 라디오 UI
+ */
 declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 
 type SelectSize = "sm" | "md" | "lg";
@@ -119,6 +180,12 @@ interface SelectProps {
     className?: string;
     textAlign?: "left" | "center";
 }
+/**
+ * 셀렉트 컴포넌트를 렌더링한다.
+ * 제어형/비제어형 상태를 정리하고, 키보드/마우스 상호작용과 드롭다운 표시를 관리한다.
+ * @param props 셀렉트 속성
+ * @returns 렌더링된 셀렉트 UI
+ */
 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"> {
@@ -127,9 +194,16 @@ interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     onChange?: (checked: boolean) => void;
     size?: "sm" | "md" | "lg";
     disabled?: boolean;
-    /** Accessible label for the switch (for screen readers) */
+    /** 스위치 접근성 레이블(스크린 리더용) */
     ariaLabel: string;
 }
+/**
+ * 스위치를 렌더링한다.
+ * 제어형/비제어형 상태를 판별해 토글 로직을 수행하고 버튼 형태의 스위치 UI를 반환한다.
+ * @param props 스위치 속성
+ * @param ref 버튼 참조
+ * @returns 렌더링된 스위치 요소
+ */
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
 
 type TextFieldVariant = "outline" | "filled" | "ghost";
@@ -149,6 +223,13 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
     defaultValue?: string;
     transformValue?: (value: string) => string;
 }
+/**
+ * 텍스트 필드를 렌더링한다.
+ * 제어형/비제어형 값을 동기화하고, 조합 입력(IME)을 고려해 변경 이벤트를 전달한다.
+ * @param props 텍스트 필드 속성
+ * @param ref 입력 요소 참조
+ * @returns 렌더링된 텍스트 필드 UI
+ */
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 
 type DatePickerMode = "year-month" | "year-month-day";
@@ -163,14 +244,20 @@ interface DatePickerProps {
     minDate?: string;
     selectableRange?: SelectableRange;
     disabled?: boolean;
-    /** Whether the date picker should take the full width of its container */
+    /** 데이트 피커가 컨테이너의 전체 너비를 차지할지 여부 */
     fullWidth?: boolean;
     /**
-     * Custom width for the date picker
-     * @deprecated Use `fullWidth` prop or CSS instead
+     * 데이트 피커의 커스텀 너비
+     * @deprecated `fullWidth` 사용 또는 CSS로 처리
      */
     width?: number | string;
 }
+/**
+ * 연/월/일 선택형 데이트 피커를 렌더링한다.
+ * 입력 값과 선택 범위를 기준으로 옵션을 계산하고, 선택 변경을 상위로 전달한다.
+ * @param props 데이트 피커 속성
+ * @returns 렌더링된 데이트 피커 UI
+ */
 declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
@@ -178,6 +265,12 @@ interface PaginationProps {
     totalPages: number;
     onChange: (page: number) => void;
 }
+/**
+ * 페이지네이션을 렌더링한다.
+ * 이전/다음 버튼과 페이지 목록을 구성해 전달된 콜백으로 페이지 변경을 전달한다.
+ * @param props 페이지네이션 속성
+ * @returns 렌더링된 페이지네이션 UI
+ */
 declare const Pagination: ({ page, totalPages, onChange }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
 interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
@@ -186,9 +279,15 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
     closeOnOverlay?: boolean;
     width?: number | string;
     title?: React.ReactNode;
-    /** Accessible label for the modal (default uses title or "Dialog") */
+    /** 모달 접근성 레이블(기본값: title 또는 "Dialog") */
     ariaLabel?: string;
 }
+/**
+ * 모달을 렌더링한다.
+ * 포커스 트랩과 스크롤 잠금을 적용하고, 열림 상태에 따라 오버레이/패널을 구성한다.
+ * @param props 모달 속성
+ * @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
+ */
 declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ariaLabel, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
 
 export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, type SelectOption, Spinner, Switch, TextField, ToastProvider, TopLoading, useAlert, useToast };

package/dist/index.js

@@ -350,7 +350,7 @@ var FileInput = ({
     disabled && "file_input_disabled",
     className ?? ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { cursor: "pointer" }, className: rootClassName, children: [
     /* @__PURE__ */ jsx(
       "input",
       {

package/dist/next.d.ts

@@ -26,6 +26,12 @@ interface SidebarProps {
     match?: MatchMode;
     brandHref?: string;
 }
+/**
+ * 사이드바를 렌더링한다.
+ * 활성 경로를 기준으로 메뉴 상태를 계산하고 그룹 열림/닫힘을 관리한다.
+ * @param props 사이드바 속성
+ * @returns 렌더링된 사이드바 UI
+ */
 declare const Sidebar: ({ items, activePath, onItemSelect, className, style, match, brandHref, }: SidebarProps) => react_jsx_runtime.JSX.Element;
 
 export { Sidebar, type SidebarItem, type SidebarProps };

package/package.json

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