@bigtablet/design-system 1.24.2 → 1.26.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
+import * as React$1 from 'react';
 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)";
@@ -35,6 +35,7 @@ declare const baseColors: {
     readonly neutral300: "#999999";
     readonly neutral400: "#B3B3B3";
     readonly neutral500: "#888888";
+    readonly neutral600: "#6B6B6B";
     readonly neutral700: "#666666";
     readonly neutral900: "#121212";
     readonly statusError: "#EF4444";
@@ -128,7 +129,7 @@ declare const radius: {
     readonly full: "9999px";
 };
 
-declare const shadows: {
+declare const elevation: {
     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)";
@@ -197,8 +198,15 @@ declare const baseTypography: {
         readonly "48": "48px";
     };
     readonly fontWeight: {
+        readonly thin: "Thin";
+        readonly extraLight: "ExtraLight";
+        readonly light: "Light";
         readonly regular: "Regular";
         readonly medium: "Medium";
+        readonly semiBold: "SemiBold";
+        readonly bold: "Bold";
+        readonly extraBold: "ExtraBold";
+        readonly black: "Black";
     };
     readonly lineHeight: {
         readonly "16": "16px";
@@ -422,35 +430,15 @@ declare const zIndex: {
     readonly level5: 1000;
 };
 
-interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** 카드 상단에 표시할 제목 */
-    heading?: React.ReactNode;
-    /** 제목에 사용할 시맨틱 헤딩 태그 (기본값: "h3"). 스크린리더 outline에 반영됩니다. */
-    headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
-    /** 카드 그림자 크기 (기본값: "sm") */
-    shadow?: "none" | "sm" | "md" | "lg";
-    /** 카드 내부 여백 (기본값: "md") */
-    padding?: "none" | "sm" | "md" | "lg";
-    /** 테두리 표시 여부 (기본값: false) */
-    bordered?: boolean;
-}
-/**
- * 카드 컴포넌트를 렌더링한다.
- * 그림자/패딩/테두리 옵션을 조합해 레이아웃 컨테이너를 구성한다.
- * @param props 카드 속성
- * @returns 렌더링된 카드 UI
- */
-declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, className, children, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
-
 type AlertVariant = "info" | "success" | "warning" | "error";
 type AlertActionsAlign = "left" | "center" | "right";
 interface AlertOptions {
     /** 알림 스타일 변형 (기본값: "info") */
     variant?: AlertVariant;
     /** 알림 제목 */
-    title?: React.ReactNode;
+    title?: React$1.ReactNode;
     /** 알림 본문 메시지 */
-    message?: React.ReactNode;
+    message?: React$1.ReactNode;
     /** 확인 버튼 텍스트 (기본값: "확인") */
     confirmText?: string;
     /** 취소 버튼 텍스트 (기본값: "취소") */
@@ -479,99 +467,94 @@ declare const useAlert: () => AlertContextValue;
  * @param props Provider 속성
  * @returns 렌더링된 Provider와 모달
  */
-declare const AlertProvider: React.FC<{
-    children: React.ReactNode;
+declare const AlertProvider: React$1.FC<{
+    children: React$1.ReactNode;
 }>;
 
-interface SpinnerProps {
-    /** 스피너 크기(px) (기본값: 24) */
-    size?: number;
-    /** 스피너 접근성 레이블 (기본값: "Loading") */
-    ariaLabel?: string;
-}
-/**
- * 스피너를 렌더링한다.
- * 크기와 접근성 레이블을 적용한 뒤 상태 표시용 요소를 반환한다.
- * @param props 스피너 속성
- * @returns 렌더링된 스피너 요소
- */
-declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => react_jsx_runtime.JSX.Element;
-
-interface ToastProviderProps {
-    /** 앱 루트에서 감싸는 자식 요소 */
-    children: React.ReactNode;
-    /** 최대 동시 표시 토스트 수 (기본값: 5) */
-    maxCount?: number;
-    /** 토스트 닫기 버튼의 aria-label (기본값: "Close") */
-    closeAriaLabel?: string;
+type ButtonVariant = "filled" | "tonal" | "outline" | "text";
+type ButtonSize = "sm" | "md" | "xl";
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 버튼 스타일 변형 (기본값: "filled") */
+    variant?: ButtonVariant;
+    /** 버튼 크기 (기본값: "md") */
+    size?: ButtonSize;
+    /** 버튼 앞에 표시할 아이콘 */
+    leadingIcon?: React$1.ReactNode;
+    /** 버튼 뒤에 표시할 아이콘 */
+    trailingIcon?: React$1.ReactNode;
+    /** 버튼이 컨테이너의 전체 너비를 차지할지 여부 */
+    fullWidth?: boolean;
+    /** border-radius 토큰 (기본값: "full") */
+    radius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
 }
 /**
- * 토스트 컨텍스트를 제공하는 Provider를 렌더링한다.
- * 앱 최상단에서 children을 감싸야 useToast 훅을 사용할 수 있다.
- * @param props Provider 속성
- * @returns 렌더링된 Provider와 토스트 컨테이너
- */
-declare const ToastProvider: ({ children, maxCount, closeAriaLabel, }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
-
-/**
- * 토스트 메시지를 표시하는 훅.
- * ToastProvider 내부에서만 사용할 수 있다.
- * @returns 토스트 메시지 표시 함수 객체
+ * 버튼을 렌더링한다.
+ * Figma DS 기준 4가지 variant(filled/tonal/outline/text)와 3가지 size(sm/md/xl)를 지원한다.
+ * @param props 버튼 속성
+ * @returns 렌더링된 버튼 요소
  */
-declare const useToast: () => {
-    /** 성공 메시지를 표시한다 */
-    success: (message: string, duration?: number) => void;
-    /** 오류 메시지를 표시한다 */
-    error: (message: string, duration?: number) => void;
-    /** 경고 메시지를 표시한다 */
-    warning: (message: string, duration?: number) => void;
-    /** 정보 메시지를 표시한다 */
-    info: (message: string, duration?: number) => void;
-    /** 기본 메시지를 표시한다 */
-    message: (message: string, duration?: number) => void;
-};
+declare const Button: ({ variant, size, leadingIcon, trailingIcon, fullWidth, radius, className, children, ...props }: ButtonProps) => 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;
+interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** 카드 상단에 표시할 제목 */
+    heading?: React$1.ReactNode;
+    /** 제목에 사용할 시맨틱 헤딩 태그 (기본값: "h3"). 스크린리더 outline에 반영됩니다. */
+    headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /** 카드 그림자 크기 (기본값: "sm") */
+    shadow?: "none" | "sm" | "md" | "lg";
+    /** 카드 내부 여백 (기본값: "md") */
+    padding?: "none" | "sm" | "md" | "lg";
+    /** 테두리 표시 여부 (기본값: false) */
+    bordered?: boolean;
 }
 /**
- * 상단 로딩바를 렌더링한다.
- * 표시 여부와 진행률에 따라 determinate/indeterminate 상태를 구성한다.
- * @param props 로딩바 속성
- * @returns 렌더링된 로딩바 요소 또는 null
+ * 카드 컴포넌트를 렌더링한다.
+ * 그림자/패딩/테두리 옵션을 조합해 레이아웃 컨테이너를 구성한다.
+ * @param props 카드 속성
+ * @returns 렌더링된 카드 UI
  */
-declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
+declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, className, children, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
 
-interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 체크박스 옆에 표시할 라벨 */
-    label?: React.ReactNode;
-    /** 체크박스 크기 (기본값: "md") */
-    size?: "sm" | "md" | "lg";
+    label?: React$1.ReactNode;
     /** 중간 선택(indeterminate) 상태 여부 */
     indeterminate?: boolean;
+    /** 에러 상태 여부 */
+    error?: boolean;
     /** 입력 요소 참조 */
-    ref?: React.Ref<HTMLInputElement>;
+    ref?: React$1.Ref<HTMLInputElement>;
 }
 /**
  * 체크박스를 렌더링한다.
- * indeterminate 상태를 반영하고 라벨을 포함한 UI를 구성한다.
+ * Figma DS 기준 3가지 타입(Unselected/Checked/Indeterminate)과 state layer overlay를 지원한다.
  * @param props 체크박스 속성
  * @returns 렌더링된 체크박스 UI
  */
 declare const Checkbox: {
-    ({ label, size, indeterminate, className, ref, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
+    ({ label, indeterminate, error, className, ref, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
+type ChipType = "basic" | "input" | "filter";
+interface ChipProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClick"> {
+    /** 칩 유형 (기본값: "basic") */
+    type?: ChipType;
+    /** 라벨 텍스트 */
+    label: string;
+    /** 선택 상태 */
+    selected?: boolean;
+    /** 삭제 가능 여부 (input 타입에서만 사용) */
+    removable?: boolean;
+    /** 비활성화 상태 */
+    disabled?: boolean;
+    /** 칩 클릭 시 콜백 */
+    onClick?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
+    /** 삭제 버튼 클릭 시 콜백 */
+    onRemove?: () => void;
+}
+declare const Chip: ({ type, label, selected, removable, disabled, onClick, onRemove, className, ...props }: ChipProps) => react_jsx_runtime.JSX.Element;
+
 type DatePickerMode = "year-month" | "year-month-day";
 type SelectableRange = "all" | "until-today";
 interface DatePickerProps {
@@ -620,18 +603,47 @@ interface DatePickerProps {
 /**
  * 연/월/일 선택형 데이트 피커를 렌더링한다.
  * 입력 값과 선택 범위를 기준으로 옵션을 계산하고, 선택 변경을 상위로 전달한다.
- * @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;
+declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear: endYearProp, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+
+interface DividerProps extends React$1.HTMLAttributes<HTMLHRElement> {
+    /** 구분선 두께 (기본값: "standard") */
+    weight?: "standard" | "heavy";
+}
+/**
+ * 구분선 컴포넌트를 렌더링한다.
+ * 콘텐츠 영역을 시각적으로 분리하는 수평 구분선을 표시한다.
+ * @param props 구분선 속성
+ * @returns 렌더링된 구분선 UI
+ */
+declare const Divider: ({ weight, className, ...props }: DividerProps) => react_jsx_runtime.JSX.Element;
+
+type FABVariant = "primary" | "additive";
+interface FABProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** FAB 스타일 변형 (기본값: "primary") */
+    variant?: FABVariant;
+    /** 표시할 아이콘 */
+    icon: React$1.ReactNode;
+    /** 접근성 레이블 (스크린 리더용, 아이콘 전용 버튼이므로 필수) */
+    "aria-label": string;
+}
+/**
+ * FAB(Floating Action Button)을 렌더링한다.
+ * 화면에서 가장 중요한 단일 액션을 강조하는 플로팅 버튼이다.
+ * @param props FAB 속성
+ * @returns 렌더링된 FAB 요소
+ */
+declare const FAB: ({ variant, icon, className, ...props }: FABProps) => react_jsx_runtime.JSX.Element;
 
-interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
     /** 파일 선택 버튼 라벨 텍스트 (기본값: "Choose file") */
     label?: string;
     /** 파일 선택 시 호출되는 콜백 */
     onFiles?: (files: FileList | null) => void;
-    /** 허용 파일 형식 안내 텍스트. 스크린리더에게 전달됩니다. (예: "PDF, DOC 파일만 업로드 가능합니다") */
-    helperText?: string;
+    /** 입력 필드 아래에 표시할 도움말 텍스트 (예: "PDF, DOC 파일만 업로드 가능합니다") */
+    supportingText?: string;
+    /** 이미지 파일 선택 시 썸네일 미리보기 표시 여부 (기본값: false) */
+    preview?: boolean;
 }
 /**
  * 파일 입력 컴포넌트를 렌더링한다.
@@ -639,15 +651,119 @@ interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  * @param props 파일 입력 속성
  * @returns 렌더링된 파일 입력 UI
  */
-declare const FileInput: ({ label, onFiles, helperText, className, disabled, ...props }: FileInputProps) => react_jsx_runtime.JSX.Element;
+declare const FileInput: ({ label, onFiles, supportingText, preview, className, disabled, ...props }: FileInputProps) => react_jsx_runtime.JSX.Element;
+
+type IconButtonVariant = "standard" | "filled" | "tonal" | "outlined";
+type IconButtonSize = "sm" | "md";
+interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** 아이콘 버튼 스타일 변형 (기본값: "standard") */
+    variant?: IconButtonVariant;
+    /** 아이콘 버튼 크기 (기본값: "md") */
+    size?: IconButtonSize;
+    /** 표시할 아이콘 */
+    icon: React$1.ReactNode;
+}
+/**
+ * 아이콘만 표시하는 버튼을 렌더링한다.
+ * Figma DS 기준 4가지 variant(standard/filled/tonal/outlined)와 2가지 size(sm/md)를 지원한다.
+ * @param props 아이콘 버튼 속성
+ * @returns 렌더링된 아이콘 버튼 요소
+ */
+declare const IconButton: ({ variant, size, icon, className, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+
+interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 전체 단계 수 */
+    totalSteps: number;
+    /** 현재 단계 (0부터 totalSteps까지) */
+    currentStep: number;
+    /** 접근성 레이블 (스크린 리더용) */
+    "aria-label": string;
+}
+/**
+ * 선형 진행 표시기를 렌더링한다.
+ * 현재 단계와 전체 단계를 기반으로 진행률을 시각적으로 표시한다.
+ * @param props 진행 표시기 속성
+ * @returns 렌더링된 진행 표시기 요소
+ */
+declare const LinearProgress: ({ totalSteps, currentStep, className, ...props }: LinearProgressProps) => react_jsx_runtime.JSX.Element;
+
+interface ListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClick"> {
+    /** 오버라인 텍스트 (상단 작은 글씨) */
+    overline?: string;
+    /** 라벨 텍스트 (주요 텍스트) */
+    label: string;
+    /** 보조 텍스트 (라벨 아래) */
+    supportingText?: string;
+    /** 메타데이터 텍스트 (보조 정보) */
+    metadata?: string;
+    /** 왼쪽에 표시할 요소 (아이콘, 이미지, 체크박스 등) */
+    leadingElement?: React$1.ReactNode;
+    /** 오른쪽에 표시할 요소 (아이콘 버튼, 체크박스 등) */
+    trailingElement?: React$1.ReactNode;
+    /** 요소 정렬 (기본값: "top") */
+    alignment?: "top" | "middle";
+    /** 비활성화 상태 */
+    disabled?: boolean;
+    /** 클릭 시 콜백 */
+    onClick?: (event: React$1.MouseEvent<HTMLDivElement>) => void;
+}
+/**
+ * 리스트 아이템 컴포넌트를 렌더링한다.
+ * 리딩/트레일링 슬롯과 다양한 텍스트 구조를 지원한다.
+ * @param props 리스트 아이템 속성
+ * @returns 렌더링된 리스트 아이템 UI
+ */
+declare const ListItem: ({ overline, label, supportingText, metadata, leadingElement, trailingElement, alignment, disabled, onClick, className, ...props }: ListItemProps) => react_jsx_runtime.JSX.Element;
 
-interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 모달 열림 여부 */
+    open: boolean;
+    /** 모달 닫기 콜백 */
+    onClose?: () => void;
+    /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
+    closeOnOverlay?: boolean;
+    /** 모달 패널 너비 (기본값: 520) */
+    width?: number | string;
+    /** 모달 헤더에 표시할 제목 */
+    title?: React$1.ReactNode;
+    /** 모달 접근성 레이블(기본값: 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;
+
+interface PaginationProps {
+    /** 현재 페이지 번호 (1-based) */
+    page: number;
+    /** 전체 페이지 수 */
+    totalPages: number;
+    /** 페이지 변경 시 호출되는 콜백 */
+    onChange: (page: number) => void;
+    /** 이전 페이지 버튼 aria-label (기본값: "Previous page") */
+    prevLabel?: string;
+    /** 다음 페이지 버튼 aria-label (기본값: "Next page") */
+    nextLabel?: string;
+}
+/**
+ * 페이지네이션을 렌더링한다.
+ * 이전/다음 버튼과 페이지 목록을 구성해 전달된 콜백으로 페이지 변경을 전달한다.
+ * @param props 페이지네이션 속성
+ * @returns 렌더링된 페이지네이션 UI
+ */
+declare const Pagination: ({ page, totalPages, onChange, prevLabel, nextLabel, }: PaginationProps) => react_jsx_runtime.JSX.Element;
+
+interface RadioProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 라디오 버튼 옆에 표시할 라벨 */
-    label?: React.ReactNode;
+    label?: React$1.ReactNode;
     /** 라디오 버튼 크기 (기본값: "md") */
     size?: "sm" | "md" | "lg";
     /** 입력 요소 참조 */
-    ref?: React.Ref<HTMLInputElement>;
+    ref?: React$1.Ref<HTMLInputElement>;
 }
 /**
  * 라디오 버튼을 렌더링한다.
@@ -660,7 +776,64 @@ declare const Radio: {
     displayName: string;
 };
 
-interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+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 SpinnerProps {
+    /** 스피너 크기(px) (기본값: 24) */
+    size?: number;
+    /** 스피너 접근성 레이블 (기본값: "Loading") */
+    ariaLabel?: string;
+}
+/**
+ * 스피너를 렌더링한다.
+ * 크기와 접근성 레이블을 적용한 뒤 상태 표시용 요소를 반환한다.
+ * @param props 스피너 속성
+ * @returns 렌더링된 스피너 요소
+ */
+declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => react_jsx_runtime.JSX.Element;
+
+interface SwitchProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
     /** 제어형 스위치 상태 */
     checked?: boolean;
     /** 비제어형 초기 스위치 상태 */
@@ -674,7 +847,7 @@ interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     /** 스위치 접근성 레이블(스크린 리더용) */
     ariaLabel: string;
     /** 버튼 요소 참조 */
-    ref?: React.Ref<HTMLButtonElement>;
+    ref?: React$1.Ref<HTMLButtonElement>;
 }
 /**
  * 스위치를 렌더링한다.
@@ -687,25 +860,19 @@ declare const Switch: {
     displayName: string;
 };
 
-type TextFieldVariant = "outline" | "filled" | "ghost";
-type TextFieldSize = "sm" | "md" | "lg";
-interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
+interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
     /** 입력 필드 위에 표시할 라벨 텍스트 */
     label?: string;
+    /** 라벨 표시 여부 (기본값: true) */
+    showLabel?: boolean;
     /** 입력 필드 아래에 표시할 도움말 텍스트 */
-    helperText?: string;
+    supportingText?: string;
     /** 에러 상태 여부 */
     error?: boolean;
-    /** 성공 상태 여부 */
-    success?: boolean;
-    /** 입력 필드 스타일 변형 (기본값: "outline") */
-    variant?: TextFieldVariant;
-    /** 입력 필드 크기 (기본값: "md") */
-    size?: TextFieldSize;
     /** 입력 필드 왼쪽에 표시할 아이콘 */
-    leftIcon?: React.ReactNode;
+    leadingIcon?: React$1.ReactNode;
     /** 입력 필드 오른쪽에 표시할 아이콘 */
-    rightIcon?: React.ReactNode;
+    trailingIcon?: React$1.ReactNode;
     /** 컨테이너 전체 너비 차지 여부 */
     fullWidth?: boolean;
     /** 값 변경 시 호출되는 콜백 (IME 조합 완료 후 실행) */
@@ -717,123 +884,71 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
     /** 입력값 변환 함수 (예: 숫자만 허용, 대문자 변환) */
     transformValue?: (value: string) => string;
     /** 입력 요소 참조 */
-    ref?: React.Ref<HTMLInputElement>;
+    ref?: React$1.Ref<HTMLInputElement>;
 }
 /**
  * 텍스트 필드를 렌더링한다.
- * 제어형/비제어형 값을 동기화하고, 조합 입력(IME)을 고려해 변경 이벤트를 전달한다.
+ * Figma DS 기준 outlined 스타일 + floating label을 지원한다.
  * @param props 텍스트 필드 속성
  * @returns 렌더링된 텍스트 필드 UI
  */
 declare const TextField: {
-    ({ id, label, helperText, error, success, variant, size, leftIcon, rightIcon, fullWidth, className, onChangeAction, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+    ({ id, label, showLabel, supportingText, error, leadingIcon, trailingIcon, fullWidth, className, onChangeAction, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** 버튼 스타일 변형 (기본값: "primary") */
-    variant?: "primary" | "secondary" | "ghost" | "danger";
-    /** 버튼 크기 (기본값: "md") */
-    size?: "sm" | "md" | "lg";
-    /** 버튼이 컨테이너의 전체 너비를 차지할지 여부 */
-    fullWidth?: boolean;
-    /**
-     * 버튼의 커스텀 너비
-     * @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;
-
-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";
+interface ToastProviderProps {
+    /** 앱 루트에서 감싸는 자식 요소 */
+    children: React$1.ReactNode;
+    /** 최대 동시 표시 토스트 수 (기본값: 5) */
+    maxCount?: number;
+    /** 토스트 닫기 버튼의 aria-label (기본값: "Close") */
+    closeAriaLabel?: string;
 }
 /**
- * 셀렉트 컴포넌트를 렌더링한다.
- * 제어형/비제어형 상태를 정리하고, 키보드/마우스 상호작용과 드롭다운 표시를 관리한다.
- * @param props 셀렉트 속성
- * @returns 렌더링된 셀렉트 UI
+ * 토스트 컨텍스트를 제공하는 Provider를 렌더링한다.
+ * 앱 최상단에서 children을 감싸야 useToast 훅을 사용할 수 있다.
+ * @param props Provider 속성
+ * @returns 렌더링된 Provider와 토스트 컨테이너
  */
-declare const Select: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, variant, fullWidth, className, textAlign, }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const ToastProvider: ({ children, maxCount, closeAriaLabel, }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
 
-interface PaginationProps {
-    /** 현재 페이지 번호 (1-based) */
-    page: number;
-    /** 전체 페이지 수 */
-    totalPages: number;
-    /** 페이지 변경 시 호출되는 콜백 */
-    onChange: (page: number) => void;
-    /** 이전 페이지 버튼 aria-label (기본값: "Previous page") */
-    prevLabel?: string;
-    /** 다음 페이지 버튼 aria-label (기본값: "Next page") */
-    nextLabel?: string;
-}
 /**
- * 페이지네이션을 렌더링한다.
- * 이전/다음 버튼과 페이지 목록을 구성해 전달된 콜백으로 페이지 변경을 전달한다.
- * @param props 페이지네이션 속성
- * @returns 렌더링된 페이지네이션 UI
+ * 토스트 메시지를 표시하는 훅.
+ * ToastProvider 내부에서만 사용할 수 있다.
+ * @returns 토스트 메시지 표시 함수 객체
  */
-declare const Pagination: ({ page, totalPages, onChange, prevLabel, nextLabel, }: PaginationProps) => react_jsx_runtime.JSX.Element;
+declare const useToast: () => {
+    /** 성공 메시지를 표시한다 */
+    success: (message: string, duration?: number) => void;
+    /** 오류 메시지를 표시한다 */
+    error: (message: string, duration?: number) => void;
+    /** 경고 메시지를 표시한다 */
+    warning: (message: string, duration?: number) => void;
+    /** 정보 메시지를 표시한다 */
+    info: (message: string, duration?: number) => void;
+    /** 기본 메시지를 표시한다 */
+    message: (message: string, duration?: number) => void;
+};
 
-interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** 모달 열림 여부 */
-    open: boolean;
-    /** 모달 닫기 콜백 */
-    onClose?: () => void;
-    /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
-    closeOnOverlay?: boolean;
-    /** 모달 패널 너비 (기본값: 520) */
-    width?: number | string;
-    /** 모달 헤더에 표시할 제목 */
-    title?: React.ReactNode;
-    /** 모달 접근성 레이블(기본값: title 또는 "Dialog") */
+interface TopLoadingProps {
+    /** 진행률 (0-100). undefined면 indeterminate 모드 */
+    progress?: number;
+    /** 로딩바 색상 (기본: primary) */
+    color?: string;
+    /** 로딩바 높이 (기본: 3px) */
+    height?: number;
+    /** 표시 여부 */
+    isLoading?: boolean;
+    /** 프로그레스 바의 접근성 레이블 (기본값: "Page loading") */
     ariaLabel?: string;
 }
 /**
- * 모달을 렌더링한다.
- * 포커스 트랩과 스크롤 잠금을 적용하고, 열림 상태에 따라 오버레이/패널을 구성한다.
- * @param props 모달 속성
- * @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
+ * 상단 로딩바를 렌더링한다.
+ * 표시 여부와 진행률에 따라 determinate/indeterminate 상태를 구성한다.
+ * @param props 로딩바 속성
+ * @returns 렌더링된 로딩바 요소 또는 null
  */
-declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ariaLabel, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
+declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, type SelectOption, Spinner, Switch, TextField, ToastProvider, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, motion, opacity, radius, shadows, skeleton, spacing, typography, useAlert, useToast, zIndex };
+export { AlertProvider, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipType, DatePicker, Divider, type DividerProps, FAB, type FABProps, type FABVariant, FileInput, type FileInputProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, Modal, type ModalProps, Pagination, type PaginationProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, Switch, type SwitchProps, TextField, type TextFieldProps, ToastProvider, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };