@bigtablet/design-system 1.24.0 → 1.24.1

package/dist/index.d.ts

@@ -1,6 +1,31 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
+declare const a11y: {
+    readonly focusRing: "0 0 0 3px rgba(0, 0, 0, 0.15)";
+    readonly focusRingError: "0 0 0 3px rgba(239, 68, 68, 0.15)";
+    readonly focusRingSuccess: "0 0 0 3px rgba(16, 185, 129, 0.15)";
+    readonly tapMinSize: "44px";
+};
+
+declare const baseBorderWidth: {
+    readonly "0": "0px";
+    readonly "1": "1px";
+    readonly "2": "2px";
+};
+declare const borderWidth: {
+    readonly none: "0px";
+    readonly standard: "1px";
+    readonly indicator: "2px";
+};
+
+declare const breakpoints: {
+    readonly compact: 0;
+    readonly medium: 600;
+    readonly expanded: 840;
+    readonly large: 1200;
+};
+
 declare const baseColors: {
     readonly brandPrimary: "#121212";
     readonly blue600: "#1A73E8";
@@ -66,6 +91,76 @@ declare const colors: {
     };
 };
 
+declare const motion: {
+    readonly transition: {
+        readonly fast: "0.1s ease-in-out";
+        readonly base: "0.2s ease-in-out";
+        readonly slow: "0.3s ease-in-out";
+        readonly emphasized: "0.25s cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly bounce: "0.3s cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly fade: "0.15s ease-in-out";
+        readonly slide: "0.25s ease-in-out";
+        readonly scale: "0.2s cubic-bezier(0.2, 0.8, 0.2, 1)";
+        readonly state: "0.18s ease-in-out";
+    };
+};
+
+declare const opacity: {
+    readonly "0": 0;
+    readonly "5": 0.05;
+    readonly "8": 0.08;
+    readonly "12": 0.12;
+    readonly "16": 0.16;
+    readonly "38": 0.38;
+    readonly "50": 0.5;
+    readonly "80": 0.8;
+    readonly "90": 0.9;
+    readonly "100": 1;
+};
+
+declare const radius: {
+    readonly none: "0px";
+    readonly xs: "4px";
+    readonly sm: "6px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly full: "9999px";
+};
+
+declare const shadows: {
+    readonly level1: "0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12)";
+    readonly level2: "0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12)";
+    readonly level3: "0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12)";
+    readonly level4: "0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12)";
+    readonly level5: "0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)";
+};
+
+declare const skeleton: {
+    readonly color: {
+        readonly base: "#F4F4F4";
+        readonly wave: "#E5E5E5";
+        readonly highlight: "#FFFFFF";
+    };
+    readonly gradient: "linear-gradient(90deg, #F4F4F4 25%, #FFFFFF 37%, #E5E5E5 63%)";
+    readonly radius: {
+        readonly sm: "6px";
+        readonly md: "8px";
+        readonly lg: "12px";
+    };
+    readonly height: {
+        readonly xs: "4px";
+        readonly sm: "8px";
+        readonly md: "12px";
+        readonly lg: "16px";
+        readonly xl: "20px";
+    };
+    readonly animation: {
+        readonly duration: "1.4s";
+        readonly timing: "ease-in-out";
+    };
+};
+
 declare const spacing: {
     readonly "0": "0px";
     readonly "1": "1px";
@@ -318,94 +413,6 @@ declare const typography: {
     };
 };
 
-declare const radius: {
-    readonly none: "0px";
-    readonly xs: "4px";
-    readonly sm: "6px";
-    readonly md: "8px";
-    readonly lg: "12px";
-    readonly xl: "16px";
-    readonly full: "9999px";
-};
-
-declare const shadows: {
-    readonly level1: "0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12)";
-    readonly level2: "0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12)";
-    readonly level3: "0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12)";
-    readonly level4: "0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12)";
-    readonly level5: "0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)";
-};
-
-declare const baseBorderWidth: {
-    readonly "0": "0px";
-    readonly "1": "1px";
-    readonly "2": "2px";
-};
-declare const borderWidth: {
-    readonly none: "0px";
-    readonly standard: "1px";
-    readonly indicator: "2px";
-};
-
-declare const opacity: {
-    readonly "0": 0;
-    readonly "5": 0.05;
-    readonly "8": 0.08;
-    readonly "12": 0.12;
-    readonly "16": 0.16;
-    readonly "38": 0.38;
-    readonly "50": 0.5;
-    readonly "80": 0.8;
-    readonly "90": 0.9;
-    readonly "100": 1;
-};
-
-declare const motion: {
-    readonly transition: {
-        readonly fast: "0.1s ease-in-out";
-        readonly base: "0.2s ease-in-out";
-        readonly slow: "0.3s ease-in-out";
-        readonly emphasized: "0.25s cubic-bezier(0.4, 0, 0.2, 1)";
-        readonly bounce: "0.3s cubic-bezier(0.16, 1, 0.3, 1)";
-        readonly fade: "0.15s ease-in-out";
-        readonly slide: "0.25s ease-in-out";
-        readonly scale: "0.2s cubic-bezier(0.2, 0.8, 0.2, 1)";
-        readonly state: "0.18s ease-in-out";
-    };
-};
-
-declare const skeleton: {
-    readonly color: {
-        readonly base: "#F4F4F4";
-        readonly wave: "#E5E5E5";
-        readonly highlight: "#FFFFFF";
-    };
-    readonly gradient: "linear-gradient(90deg, #F4F4F4 25%, #FFFFFF 37%, #E5E5E5 63%)";
-    readonly radius: {
-        readonly sm: "6px";
-        readonly md: "8px";
-        readonly lg: "12px";
-    };
-    readonly height: {
-        readonly xs: "4px";
-        readonly sm: "8px";
-        readonly md: "12px";
-        readonly lg: "16px";
-        readonly xl: "20px";
-    };
-    readonly animation: {
-        readonly duration: "1.4s";
-        readonly timing: "ease-in-out";
-    };
-};
-
-declare const breakpoints: {
-    readonly compact: 0;
-    readonly medium: 600;
-    readonly expanded: 840;
-    readonly large: 1200;
-};
-
 declare const zIndex: {
     readonly level0: 0;
     readonly level1: 10;
@@ -415,13 +422,6 @@ declare const zIndex: {
     readonly level5: 1000;
 };
 
-declare const a11y: {
-    readonly focusRing: "0 0 0 3px rgba(0, 0, 0, 0.15)";
-    readonly focusRingError: "0 0 0 3px rgba(239, 68, 68, 0.15)";
-    readonly focusRingSuccess: "0 0 0 3px rgba(16, 185, 129, 0.15)";
-    readonly tapMinSize: "44px";
-};
-
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 카드 상단에 표시할 제목 */
     heading?: React.ReactNode;
@@ -497,26 +497,6 @@ interface SpinnerProps {
  */
 declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => react_jsx_runtime.JSX.Element;
 
-interface TopLoadingProps {
-    /** 진행률 (0-100). undefined면 indeterminate 모드 */
-    progress?: number;
-    /** 로딩바 색상 (기본: primary) */
-    color?: string;
-    /** 로딩바 높이 (기본: 3px) */
-    height?: number;
-    /** 표시 여부 */
-    isLoading?: boolean;
-    /** 프로그레스 바의 접근성 레이블 (기본값: "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 {
     /** 앱 루트에서 감싸는 자식 요소 */
     children: React.ReactNode;
@@ -531,7 +511,7 @@ interface ToastProviderProps {
  * @param props Provider 속성
  * @returns 렌더링된 Provider와 토스트 컨테이너
  */
-declare const ToastProvider: ({ children, maxCount, closeAriaLabel }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ToastProvider: ({ children, maxCount, closeAriaLabel, }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
 
 /**
  * 토스트 메시지를 표시하는 훅.
@@ -551,26 +531,25 @@ declare const useToast: () => {
     message: (message: string, duration?: number) => void;
 };
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** 버튼 스타일 변형 (기본값: "primary") */
-    variant?: "primary" | "secondary" | "ghost" | "danger";
-    /** 버튼 크기 (기본값: "md") */
-    size?: "sm" | "md" | "lg";
-    /** 버튼이 컨테이너의 전체 너비를 차지할지 여부 */
-    fullWidth?: boolean;
-    /**
-     * 버튼의 커스텀 너비
-     * @deprecated `fullWidth` 사용 또는 CSS로 처리
-     */
-    width?: string;
+interface TopLoadingProps {
+    /** 진행률 (0-100). undefined면 indeterminate 모드 */
+    progress?: number;
+    /** 로딩바 색상 (기본: primary) */
+    color?: string;
+    /** 로딩바 높이 (기본: 3px) */
+    height?: number;
+    /** 표시 여부 */
+    isLoading?: boolean;
+    /** 프로그레스 바의 접근성 레이블 (기본값: "Page loading") */
+    ariaLabel?: string;
 }
 /**
- * 버튼을 렌더링한다.
- * 전달된 props로 클래스 조합과 인라인 스타일을 계산한 뒤 버튼 요소를 반환한다.
- * @param props 버튼 속성
- * @returns 렌더링된 버튼 요소
+ * 상단 로딩바를 렌더링한다.
+ * 표시 여부와 진행률에 따라 determinate/indeterminate 상태를 구성한다.
+ * @param props 로딩바 속성
+ * @returns 렌더링된 로딩바 요소 또는 null
  */
-declare const Button: ({ variant, size, fullWidth, width, className, style, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
 interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 체크박스 옆에 표시할 라벨 */
@@ -593,6 +572,59 @@ declare const Checkbox: {
     displayName: string;
 };
 
+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;
+    /**
+     * 데이트 피커의 커스텀 너비
+     * @deprecated `fullWidth` 사용 또는 CSS로 처리
+     */
+    width?: number | string;
+    /** 연도 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Year") */
+    yearLabel?: string;
+    /** 월 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Month") */
+    monthLabel?: string;
+    /** 일 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Day") */
+    dayLabel?: string;
+    /**
+     * minDate 설정 시 스크린리더에 전달할 안내 문구 포맷.
+     * `{date}` 자리에 minDate 값이 치환됩니다. (기본값: "Minimum date: {date}")
+     */
+    minDateSrFormat?: string;
+    /**
+     * selectableRange="until-today" 설정 시 스크린리더에 전달할 안내 문구.
+     * (기본값: "Selectable up to today")
+     */
+    selectableRangeUntilTodaySrText?: string;
+}
+/**
+ * 연/월/일 선택형 데이트 피커를 렌더링한다.
+ * 입력 값과 선택 범위를 기준으로 옵션을 계산하고, 선택 변경을 상위로 전달한다.
+ * @param props 데이트 피커 속성
+ * @returns 렌더링된 데이트 피커 UI
+ */
+declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+
 interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /** 파일 선택 버튼 라벨 텍스트 (기본값: "Choose file") */
     label?: string;
@@ -628,49 +660,6 @@ declare const Radio: {
     displayName: string;
 };
 
-type SelectSize = "sm" | "md" | "lg";
-type SelectVariant = "outline" | "filled" | "ghost";
-interface SelectOption {
-    value: string;
-    label: string;
-    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";
-}
-/**
- * 셀렉트 컴포넌트를 렌더링한다.
- * 제어형/비제어형 상태를 정리하고, 키보드/마우스 상호작용과 드롭다운 표시를 관리한다.
- * @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"> {
     /** 제어형 스위치 상태 */
     checked?: boolean;
@@ -741,58 +730,69 @@ declare const TextField: {
     displayName: string;
 };
 
-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;
-    /** 데이트 피커가 컨테이너의 전체 너비를 차지할지 여부 */
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 버튼 스타일 변형 (기본값: "primary") */
+    variant?: "primary" | "secondary" | "ghost" | "danger";
+    /** 버튼 크기 (기본값: "md") */
+    size?: "sm" | "md" | "lg";
+    /** 버튼이 컨테이너의 전체 너비를 차지할지 여부 */
     fullWidth?: boolean;
     /**
-     * 데이트 피커의 커스텀 너비
+     * 버튼의 커스텀 너비
      * @deprecated `fullWidth` 사용 또는 CSS로 처리
      */
-    width?: number | string;
-    /** 연도 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Year") */
-    yearLabel?: string;
-    /** 월 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Month") */
-    monthLabel?: string;
-    /** 일 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Day") */
-    dayLabel?: string;
-    /**
-     * minDate 설정 시 스크린리더에 전달할 안내 문구 포맷.
-     * `{date}` 자리에 minDate 값이 치환됩니다. (기본값: "Minimum date: {date}")
-     */
-    minDateSrFormat?: string;
-    /**
-     * selectableRange="until-today" 설정 시 스크린리더에 전달할 안내 문구.
-     * (기본값: "Selectable up to today")
-     */
-    selectableRangeUntilTodaySrText?: string;
+    width?: string;
 }
 /**
- * 연/월/일 선택형 데이트 피커를 렌더링한다.
- * 입력 값과 선택 범위를 기준으로 옵션을 계산하고, 선택 변경을 상위로 전달한다.
- * @param props 데이트 피커 속성
- * @returns 렌더링된 데이트 피커 UI
+ * 버튼을 렌더링한다.
+ * 전달된 props로 클래스 조합과 인라인 스타일을 계산한 뒤 버튼 요소를 반환한다.
+ * @param props 버튼 속성
+ * @returns 렌더링된 버튼 요소
  */
-declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ variant, size, fullWidth, width, className, style, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+type SelectSize = "sm" | "md" | "lg";
+type SelectVariant = "outline" | "filled" | "ghost";
+interface SelectOption {
+    value: string;
+    label: string;
+    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";
+}
+/**
+ * 셀렉트 컴포넌트를 렌더링한다.
+ * 제어형/비제어형 상태를 정리하고, 키보드/마우스 상호작용과 드롭다운 표시를 관리한다.
+ * @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 PaginationProps {
     /** 현재 페이지 번호 (1-based) */
@@ -812,7 +812,7 @@ interface PaginationProps {
  * @param props 페이지네이션 속성
  * @returns 렌더링된 페이지네이션 UI
  */
-declare const Pagination: ({ page, totalPages, onChange, prevLabel, nextLabel }: PaginationProps) => react_jsx_runtime.JSX.Element;
+declare const Pagination: ({ page, totalPages, onChange, prevLabel, nextLabel, }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
 interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
     /** 모달 열림 여부 */