@bigtablet/design-system 3.5.0 → 3.6.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as React$1 from 'react';
+import { Ref } from 'react';
 import * as _react_spring_web from '@react-spring/web';
 import { LucideProps, LucideIcon } from 'lucide-react';
 export { LucideIcon, LucideProps } from 'lucide-react';
@@ -195,6 +196,69 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
  */
 declare const Badge: ({ variant, shape, size, appearance, count, max, className, children, ...props }: BadgeProps) => React$1.JSX.Element;
 
+interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 일러스트 영역 (아이콘/이미지 등) */
+    illustration?: React$1.ReactNode;
+    /** 제목 */
+    title?: React$1.ReactNode;
+    /** 보조 설명 */
+    description?: React$1.ReactNode;
+    /** 액션 영역 (Button 등) */
+    action?: React$1.ReactNode;
+    /** 크기 (기본 "md") */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * 빈 상태 표시 - 데이터 없음, 검색 결과 없음, 시작 가이드 등.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   illustration={<InboxIcon size={64} />}
+ *   title="받은 메일이 없습니다"
+ *   description="새 메일이 오면 여기 표시됩니다."
+ *   action={<Button>새 메일 작성</Button>}
+ * />
+ * ```
+ */
+declare const EmptyState: ({ illustration, title, description, action, size, className, ...props }: EmptyStateProps) => React$1.JSX.Element;
+
+type ErrorStateVariant = "page" | "widget";
+interface ErrorStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 제목 (기본 "문제가 발생했습니다") */
+    title?: React$1.ReactNode;
+    /** 보조 설명 */
+    description?: React$1.ReactNode;
+    /** 아이콘/일러스트 (미지정 시 기본 경고 아이콘. `null` 로 숨김) */
+    icon?: React$1.ReactNode;
+    /** 액션 영역 (재시도 버튼 등) */
+    action?: React$1.ReactNode;
+    /**
+     * 레이아웃 모드 (기본 "page").
+     * - `page`: 전체 화면/영역 채움 - error boundary fallback. 큰 아이콘 + 넉넉한 패딩 + min-height.
+     * - `widget`: 인라인 컴팩트 - 위젯/카드 내부 error fallback. 작은 아이콘 + 좁은 패딩.
+     */
+    variant?: ErrorStateVariant;
+}
+/**
+ * 에러 상태 표시 - error boundary / 데이터 로드 실패 / 위젯 에러 fallback.
+ * `EmptyState` 의 형제. `status-error` 토큰 사용 (하드코딩 없음).
+ *
+ * @example
+ * ```tsx
+ * // 페이지 전체 (error boundary)
+ * <ErrorState
+ *   title="페이지를 불러오지 못했습니다"
+ *   description="잠시 후 다시 시도해 주세요."
+ *   action={<Button onClick={retry}>다시 시도</Button>}
+ * />
+ *
+ * // 위젯 인라인
+ * <ErrorState variant="widget" title="불러오기 실패" action={<Button size="sm" onClick={retry}>재시도</Button>} />
+ * ```
+ */
+declare const ErrorState: ({ title, description, icon, action, variant, className, ...props }: ErrorStateProps) => React$1.JSX.Element;
+
 interface BottomNavProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChange"> {
     /** 스크린 리더 레이블 (기본 "주요 메뉴") */
     ariaLabel?: string;
@@ -279,69 +343,6 @@ interface BreadcrumbProps extends React$1.HTMLAttributes<HTMLElement> {
  */
 declare const Breadcrumb: ({ items, separator, className, ...props }: BreadcrumbProps) => React$1.JSX.Element;
 
-interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** 일러스트 영역 (아이콘/이미지 등) */
-    illustration?: React$1.ReactNode;
-    /** 제목 */
-    title?: React$1.ReactNode;
-    /** 보조 설명 */
-    description?: React$1.ReactNode;
-    /** 액션 영역 (Button 등) */
-    action?: React$1.ReactNode;
-    /** 크기 (기본 "md") */
-    size?: "sm" | "md" | "lg";
-}
-/**
- * 빈 상태 표시 - 데이터 없음, 검색 결과 없음, 시작 가이드 등.
- *
- * @example
- * ```tsx
- * <EmptyState
- *   illustration={<InboxIcon size={64} />}
- *   title="받은 메일이 없습니다"
- *   description="새 메일이 오면 여기 표시됩니다."
- *   action={<Button>새 메일 작성</Button>}
- * />
- * ```
- */
-declare const EmptyState: ({ illustration, title, description, action, size, className, ...props }: EmptyStateProps) => React$1.JSX.Element;
-
-type ErrorStateVariant = "page" | "widget";
-interface ErrorStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** 제목 (기본 "문제가 발생했습니다") */
-    title?: React$1.ReactNode;
-    /** 보조 설명 */
-    description?: React$1.ReactNode;
-    /** 아이콘/일러스트 (미지정 시 기본 경고 아이콘. `null` 로 숨김) */
-    icon?: React$1.ReactNode;
-    /** 액션 영역 (재시도 버튼 등) */
-    action?: React$1.ReactNode;
-    /**
-     * 레이아웃 모드 (기본 "page").
-     * - `page`: 전체 화면/영역 채움 - error boundary fallback. 큰 아이콘 + 넉넉한 패딩 + min-height.
-     * - `widget`: 인라인 컴팩트 - 위젯/카드 내부 error fallback. 작은 아이콘 + 좁은 패딩.
-     */
-    variant?: ErrorStateVariant;
-}
-/**
- * 에러 상태 표시 - error boundary / 데이터 로드 실패 / 위젯 에러 fallback.
- * `EmptyState` 의 형제. `status-error` 토큰 사용 (하드코딩 없음).
- *
- * @example
- * ```tsx
- * // 페이지 전체 (error boundary)
- * <ErrorState
- *   title="페이지를 불러오지 못했습니다"
- *   description="잠시 후 다시 시도해 주세요."
- *   action={<Button onClick={retry}>다시 시도</Button>}
- * />
- *
- * // 위젯 인라인
- * <ErrorState variant="widget" title="불러오기 실패" action={<Button size="sm" onClick={retry}>재시도</Button>} />
- * ```
- */
-declare const ErrorState: ({ title, description, icon, action, variant, className, ...props }: ErrorStateProps) => React$1.JSX.Element;
-
 interface MenuItem {
     key: string;
     label: React$1.ReactNode;
@@ -1089,109 +1090,6 @@ declare const zIndex: {
     readonly level5: 1000;
 };
 
-type AlertVariant = "info" | "success" | "warning" | "error";
-type AlertActionsAlign = "left" | "center" | "right";
-interface AlertOptions {
-    /** 알림 스타일 변형 (기본값: "info") */
-    variant?: AlertVariant;
-    /** 알림 제목 */
-    title?: React$1.ReactNode;
-    /** 알림 본문 메시지 */
-    message?: React$1.ReactNode;
-    /** 확인 버튼 텍스트 (기본값: "확인") */
-    confirmText?: string;
-    /** 취소 버튼 텍스트 (기본값: "취소") */
-    cancelText?: string;
-    /** 취소 버튼 표시 여부 (기본값: false) */
-    showCancel?: boolean;
-    /**
-     * Destructive 액션 여부. true 시 확인 버튼이 빨간 강조(danger)로 표시되고
-     * 취소 버튼은 outline으로 유지. 위험성을 시각적으로 표현해 사용자가 인지 가능.
-     * (Material/shadcn/Radix 표준 패턴)
-     * @default false
-     */
-    destructive?: boolean;
-    /** 액션 버튼 정렬 (기본값: "right") */
-    actionsAlign?: AlertActionsAlign;
-    /** 변형 아이콘 표시 여부 (기본값: false). 원하면 명시적으로 켜기 */
-    showIcon?: boolean;
-    /** 확인 버튼 클릭 시 호출되는 콜백 */
-    onConfirm?: () => void;
-    /** 취소 버튼 클릭 시 호출되는 콜백 */
-    onCancel?: () => void;
-    /**
-     * 오버레이 클릭으로 닫기 허용 여부 (기본값: true).
-     * destructive 확인처럼 실수 닫힘을 막아야 하면 false 로.
-     */
-    closeOnOverlay?: boolean;
-}
-interface AlertContextValue {
-    showAlert: (options: AlertOptions) => void;
-}
-declare const useAlert: () => AlertContextValue;
-declare const AlertProvider: React$1.FC<{
-    children: React$1.ReactNode;
-}>;
-
-type ButtonVariant = "filled" | "tonal" | "outline" | "text";
-type ButtonSize = "sm" | "md" | "lg" | "xl";
-/** button/anchor 공통 스타일·콘텐츠 props */
-interface ButtonBaseProps {
-    /** 버튼 스타일 변형 (기본값: "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";
-    /**
-     * 위험한 액션 (삭제/취소 등) - 빨간 강조.
-     * filled: 빨간 bg, outline: 빨간 텍스트/border, tonal: 빨간 wash.
-     */
-    danger?: boolean;
-    /**
-     * 비활성화. button 은 native `disabled`, anchor 는 `aria-disabled`+`tabIndex=-1`+
-     * 클릭 차단으로 처리(anchor 엔 native disabled 가 없으므로).
-     */
-    disabled?: boolean;
-}
-/** `<button>` 으로 렌더링 (기본) */
-interface ButtonAsButton extends ButtonBaseProps, Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> {
-    /** 렌더링할 요소 (기본값: "button") */
-    as?: "button";
-    /** button 렌더 시엔 href 를 허용하지 않음 (href 만 주면 anchor 로 분기되도록) */
-    href?: never;
-    /** 루트 button 요소 ref (React 19 ref-as-prop) */
-    ref?: React$1.Ref<HTMLButtonElement>;
-}
-/** `<a>` 로 렌더링 - 링크 시맨틱(우클릭 새 탭·미들클릭·SR 링크 안내) */
-interface ButtonAsAnchor extends ButtonBaseProps, Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps> {
-    /** anchor 로 렌더링 - 생략 가능(href 만 줘도 anchor 로 분기) */
-    as?: "a";
-    /** 링크 대상 (anchor 필수) */
-    href: string;
-    /** 루트 anchor 요소 ref (React 19 ref-as-prop) */
-    ref?: React$1.Ref<HTMLAnchorElement>;
-}
-/**
- * Button props - `as`/`href` 에 따라 button 또는 anchor 로 렌더링되는 discriminated union.
- * `as` 미지정 시 기본 `<button>` (기존 동작과 100% 호환).
- */
-type ButtonProps = ButtonAsButton | ButtonAsAnchor;
-/**
- * 버튼을 렌더링한다.
- * Figma DS 기준 4가지 variant(filled/tonal/outline/text)와 4가지 size(sm/md/lg/xl)를 지원한다.
- * `as="a"` (또는 `href` 지정) 시 동일 스타일의 anchor 로 렌더링한다.
- * @param props 버튼 속성
- * @returns 렌더링된 button 또는 anchor 요소
- */
-declare const Button: (props: ButtonProps) => React$1.JSX.Element;
-
 type CardVariant = "default" | "accent" | "glass" | "outlined";
 type CardFooterAlign = "start" | "between" | "end";
 interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
@@ -1229,27 +1127,6 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, variant, interactive, footer, footerAlign, ref, className, children, ...props }: CardProps) => React$1.JSX.Element;
 
-interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
-    /** 체크박스 옆에 표시할 라벨 */
-    label?: React$1.ReactNode;
-    /** 중간 선택(indeterminate) 상태 여부 */
-    indeterminate?: boolean;
-    /** 에러 상태 여부 */
-    error?: boolean;
-    /** 입력 요소 참조 */
-    ref?: React$1.Ref<HTMLInputElement>;
-}
-/**
- * 체크박스를 렌더링한다.
- * Figma DS 기준 3가지 타입(Unselected/Checked/Indeterminate)과 state layer overlay를 지원한다.
- * @param props 체크박스 속성
- * @returns 렌더링된 체크박스 UI
- */
-declare const Checkbox: {
-    ({ label, indeterminate, error, className, ref, ...props }: CheckboxProps): React$1.JSX.Element;
-    displayName: string;
-};
-
 type ChipType = "basic" | "input" | "filter" | "static";
 type ChipSize = "sm" | "md";
 type ChipTone = "default" | "accent" | "info" | "success" | "warning" | "error";
@@ -1281,63 +1158,6 @@ interface ChipProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClic
 }
 declare const Chip: ({ type, size, tone, label, selected, removable, disabled, open, leadingIcon, onClick, onRemove, removeLabel, className, ...props }: ChipProps) => React$1.JSX.Element;
 
-type DatePickerMode = "year-month" | "year-month-day";
-type SelectableRange = "all" | "until-today";
-interface DatePickerBaseProps {
-    /** 데이트 피커 위에 표시할 라벨 텍스트 */
-    label?: string;
-    /** 제어형 날짜 값 ("YYYY-MM" 또는 "YYYY-MM-DD" 형식) */
-    value?: string;
-    /** 선택 모드 (기본값: "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의 라벨/플레이스홀더 (기본값: "Year") */
-    yearLabel?: string;
-    /** 월 select의 라벨/플레이스홀더 (기본값: "Month") */
-    monthLabel?: string;
-    /** 일 select의 라벨/플레이스홀더 (기본값: "Day") */
-    dayLabel?: string;
-    /**
-     * minDate 설정 시 스크린리더에 전달할 안내 문구 포맷.
-     * `{date}` 자리에 minDate 값이 치환됩니다. (기본값: "Minimum date: {date}")
-     */
-    minDateSrFormat?: string;
-    /**
-     * selectableRange="until-today" 설정 시 스크린리더에 전달할 안내 문구.
-     * (기본값: "Selectable up to today")
-     */
-    selectableRangeUntilTodaySrText?: string;
-}
-type DatePickerCallbacks = {
-    onValueChange: (value: string) => void;
-    onChange?: (value: string) => void;
-} | {
-    onValueChange?: (value: string) => void;
-    onChange: (value: string) => void;
-};
-type DatePickerProps = DatePickerBaseProps & DatePickerCallbacks;
-/**
- * 연/월/일 선택형 데이트 피커를 렌더링한다.
- * 내부적으로 DS Dropdown 3개를 조합해 드롭다운 UX 일관성을 유지한다.
- */
-declare const DatePicker: ({ label, value, onValueChange, onChange, mode, startYear, endYear: endYearProp, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => React$1.JSX.Element;
-
 interface DividerProps extends React$1.HTMLAttributes<HTMLHRElement> {
     /** 구분선 두께 (기본값: "standard") */
     weight?: "standard" | "heavy";
@@ -1350,164 +1170,6 @@ interface DividerProps extends React$1.HTMLAttributes<HTMLHRElement> {
  */
 declare const Divider: ({ weight, className, ...props }: DividerProps) => React$1.JSX.Element;
 
-/** Drawer 가 미끄러져 들어오는 방향 (top 은 범위 외) */
-type DrawerPlacement = "left" | "right" | "bottom";
-interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "role"> {
-    /** 드로어 열림 여부 */
-    open: boolean;
-    /** 드로어 닫기 콜백 */
-    onClose?: () => void;
-    /** 슬라이드 방향 (기본값: "right") */
-    placement?: DrawerPlacement;
-    /** 패널 크기 - left/right 는 너비, bottom 은 높이 (기본값: 360). number ⇒ px */
-    size?: number | string;
-    /** 드로어 제목 (헤더 h2, heading_small_bold) */
-    title?: React$1.ReactNode;
-    /** 하단 액션 영역 (Button들). 미지정 시 footer 영역 자체가 안 보임 */
-    footer?: React$1.ReactNode;
-    /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
-    closeOnOverlay?: boolean;
-    /** 우상단 X 닫기 아이콘 표시 여부 (기본값: true) */
-    showCloseIcon?: boolean;
-    /** X 닫기 버튼 접근성 레이블 (기본값: "닫기") */
-    closeLabel?: string;
-    /** 드로어 접근성 레이블 (title 없을 때 사용, 기본값: "Dialog") */
-    ariaLabel?: string;
-}
-/**
- * 화면 가장자리에서 미끄러져 들어오는 패널(Drawer)을 렌더링한다.
- * react-spring 기반 방향별 슬라이드 진입/퇴출 + 포커스 트랩 + 바디 스크롤 잠금.
- *
- * @param props 드로어 속성
- * @returns 열림 상태일 때 렌더링된 드로어, 닫힘 상태면 null
- */
-declare const Drawer: {
-    ({ open, onClose, placement, size, title, footer, closeOnOverlay, showCloseIcon, closeLabel, ariaLabel, children, className, ...props }: DrawerProps): React$1.ReactPortal | null;
-    displayName: string;
-};
-
-type DropdownSize = "sm" | "md" | "lg";
-interface DropdownOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-    /** 옵션 아래에 표시할 보조 텍스트 */
-    supportingText?: string;
-    /** 옵션 왼쪽 아이콘 */
-    leadingIcon?: React$1.ReactNode;
-    /** 옵션 오른쪽 아이콘 (미지정 시 선택 상태에 체크 아이콘 자동 표시) */
-    trailingIcon?: React$1.ReactNode;
-    /** 아이템 아래 구분선 표시 여부 */
-    showDivider?: boolean;
-}
-/** single/multiple 공통 속성 */
-interface DropdownCommonProps {
-    /** 드롭다운 요소의 id (미입력 시 자동 생성) */
-    id?: string;
-    /** 드롭다운 위에 표시할 플로팅 라벨 텍스트 */
-    label?: string;
-    /** 선택 전 표시할 플레이스홀더 (기본값: "Select…") */
-    placeholder?: string;
-    /** 표시할 옵션 목록 */
-    options: DropdownOption[];
-    /** 비활성화 여부 */
-    disabled?: boolean;
-    /** 드롭다운 크기 (기본값: "md") */
-    size?: DropdownSize;
-    /**
-     * @deprecated Dropdown 은 이제 항상 부모 너비를 채웁니다. 인라인 사용 시 부모를 `inline-block + width` 로 감싸세요.
-     */
-    fullWidth?: boolean;
-    /** 루트 요소에 추가할 className */
-    className?: string;
-    /**
-     * @deprecated variant는 더 이상 지원되지 않습니다. Dropdown은 outline 스타일만 사용합니다.
-     */
-    variant?: "outline" | "filled" | "ghost";
-    /**
-     * @deprecated textAlign은 더 이상 지원되지 않습니다.
-     */
-    textAlign?: "left" | "center";
-    /**
-     * 검색 가능 여부. 활성화 시 열린 패널 상단에 검색 입력이 표시되고, 옵션 `label` 부분 일치로 필터링됩니다.
-     * (기본값: false)
-     */
-    searchable?: boolean;
-    /** 검색 입력의 placeholder (기본값: "검색…") */
-    searchPlaceholder?: string;
-    /** 필터 결과가 0개일 때 표시할 텍스트 (기본값: "결과 없음") */
-    emptyText?: string;
-    /** 멀티 선택 요약 텍스트 (기본값: "N개 선택") */
-    selectedSummary?: (count: number) => string;
-    /**
-     * 네이티브 폼 제출 참여용 name. 지정 시 선택 값이 hidden input 으로 렌더되어
-     * `<form>` POST 에 포함됩니다 (multiple 은 같은 name 의 hidden input 반복).
-     */
-    name?: string;
-}
-/** 단일 선택 (기본) */
-interface DropdownSingleProps extends DropdownCommonProps {
-    /** 다중 선택 모드 (기본값: false) */
-    multiple?: false;
-    /** 제어형 선택 값 */
-    value?: string | null;
-    /** 값 변경 콜백 (canonical). 선택된 값과 전체 옵션 객체를 전달합니다. */
-    onValueChange?: (value: string | null, option?: DropdownOption | null) => void;
-    /** @deprecated `onValueChange` 를 사용하세요. */
-    onChange?: (value: string | null, option?: DropdownOption | null) => void;
-    /** 비제어형 초기 선택 값 */
-    defaultValue?: string | null;
-}
-/** 다중 선택 */
-interface DropdownMultipleProps extends DropdownCommonProps {
-    /** 다중 선택 모드 */
-    multiple: true;
-    /** 제어형 선택 값 목록 */
-    value?: string[];
-    /** 값 변경 콜백 (canonical). 선택된 값 목록과 옵션 객체 목록을 전달합니다. */
-    onValueChange?: (values: string[], options: DropdownOption[]) => void;
-    /** @deprecated `onValueChange` 를 사용하세요. */
-    onChange?: (values: string[], options: DropdownOption[]) => void;
-    /** 비제어형 초기 선택 값 목록 */
-    defaultValue?: string[];
-}
-type DropdownProps = DropdownSingleProps | DropdownMultipleProps;
-/**
- * 드롭다운 컴포넌트를 렌더링한다.
- * 제어형/비제어형 상태를 지원하며, 키보드/마우스 상호작용과 정적 라벨을 관리한다.
- * `searchable` 로 라벨 부분 일치 검색을, `multiple` 로 다중 선택을 opt-in 할 수 있다.
- * @param props 드롭다운 속성
- * @returns 렌더링된 드롭다운 UI
- */
-declare const Dropdown: (props: DropdownProps) => React$1.JSX.Element;
-
-type FileInputVariant = "button" | "preview";
-interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
-    /** 파일 선택 버튼 라벨 / preview variant 빈 상태 텍스트 (기본값: "Choose file") */
-    label?: string;
-    /** 파일 선택 시 호출되는 콜백 */
-    onFiles?: (files: FileList | null) => void;
-    /** 입력 필드 아래에 표시할 도움말 텍스트 (예: "PDF, DOC 파일만 업로드 가능합니다") */
-    supportingText?: string;
-    /** 이미지 파일 선택 시 64×64 썸네일을 버튼 아래 나열 (variant="button" 전용) */
-    preview?: boolean;
-    /**
-     * 표시 형태 (기본값: "button").
-     * - `"button"`: 일반 파일 선택 버튼. `preview=true` 면 아래에 작은 썸네일 표시.
-     * - `"preview"`: 큰 박스 안에 이미지 채움 (avatar / 이미지 업로더 패턴). 단일 이미지.
-     */
-    variant?: FileInputVariant;
-    /** variant="preview" 박스 크기 (px, 기본값: 160) */
-    previewSize?: number;
-}
-/**
- * 파일 입력 컴포넌트를 렌더링한다.
- * 내부 input 변경을 감지해 파일 목록을 콜백으로 전달한다.
- * @param props 파일 입력 속성
- * @returns 렌더링된 파일 입력 UI
- */
-declare const FileInput: ({ label, onFiles, supportingText, preview, variant, previewSize, className, disabled, accept, onChange, ...props }: FileInputProps) => React$1.JSX.Element;
-
 interface HeroAction {
     /** 버튼 라벨 */
     label: React$1.ReactNode;
@@ -1581,42 +1243,6 @@ declare const Icon: {
     displayName: string;
 };
 
-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;
-    /** 루트 button 요소 ref (React 19 ref-as-prop) */
-    ref?: React$1.Ref<HTMLButtonElement>;
-}
-/**
- * 아이콘만 표시하는 버튼을 렌더링한다.
- * Figma DS 기준 4가지 variant(standard/filled/tonal/outlined)와 2가지 size(sm/md)를 지원한다.
- * @param props 아이콘 버튼 속성
- * @returns 렌더링된 아이콘 버튼 요소
- */
-declare const IconButton: ({ variant, size, icon, type, ref, className, ...props }: IconButtonProps) => React$1.JSX.Element;
-
-interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** 전체 단계 수 */
-    totalSteps: number;
-    /** 현재 단계 (0부터 totalSteps까지) */
-    currentStep: number;
-    /** 접근성 레이블 (스크린 리더용) */
-    "aria-label": string;
-}
-/**
- * 선형 진행 표시기를 렌더링한다.
- * `totalSteps + 1` 개 dot (체크포인트) + 진행 바. Dot `i` 는 `i <= currentStep` 이면 채워짐.
- * @param props 진행 표시기 속성
- * @returns 렌더링된 진행 표시기 요소
- */
-declare const LinearProgress: ({ totalSteps, currentStep, className, ...props }: LinearProgressProps) => React$1.JSX.Element;
-
 interface ListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClick"> {
     /** 오버라인 (상단 작은 글씨). 문자열 또는 노드(강조/링크/아이콘) */
     overline?: React$1.ReactNode;
@@ -1683,197 +1309,6 @@ interface MediaCardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "t
  */
 declare const MediaCard: ({ image, imagePosition, aspectRatio, heading, headingAs: HeadingTag, eyebrow, shadow, bordered, clickable, meta, children, className, ...props }: MediaCardProps) => React$1.JSX.Element;
 
-type ModalFooterAlign = "end" | "between" | "start";
-interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "role"> {
-    /** 모달 열림 여부 */
-    open: boolean;
-    /** 모달 닫기 콜백 */
-    onClose?: () => void;
-    /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
-    closeOnOverlay?: boolean;
-    /** 모달 패널 너비 (기본값: 480) */
-    width?: number | string;
-    /** 모달 제목 (h2, heading_large_bold) */
-    title?: React$1.ReactNode;
-    /** 제목 아래 본문 설명 - paragraph로 자동 wrap */
-    description?: React$1.ReactNode;
-    /** 하단 액션 영역 (Button들). 미지정 시 footer 영역 자체가 안 보임 */
-    footer?: React$1.ReactNode;
-    /** Footer 정렬 (기본값: "end"). between은 좌우 분리 패턴 (destructive 액션 등) */
-    footerAlign?: ModalFooterAlign;
-    /** 우상단 X 닫기 아이콘 표시 여부 (기본값: true) */
-    showCloseIcon?: boolean;
-    /** X 닫기 버튼 접근성 레이블 (기본값: "닫기") */
-    closeLabel?: string;
-    /** 모달 접근성 레이블(기본값: title 또는 "Dialog") */
-    ariaLabel?: string;
-}
-/**
- * 모달을 렌더링한다.
- * react-spring 기반 진입/퇴출 모션 + 포커스 트랩 + 바디 스크롤 잠금.
- * @param props 모달 속성
- * @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
- */
-declare const Modal: ({ open, onClose, closeOnOverlay, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, ...props }: ModalProps) => React$1.ReactPortal | null;
-
-interface OtpInputProps {
-    /** OTP 자릿수 (기본값: 6) */
-    length?: 4 | 6;
-    /** 제어형 값 */
-    value?: string;
-    /** 값 변경 콜백 (canonical) */
-    onValueChange?: (value: string) => void;
-    /** @deprecated `onValueChange` 를 사용하세요. */
-    onChange?: (value: string) => void;
-    /** 에러 상태 */
-    error?: boolean;
-    /** 비활성화 */
-    disabled?: boolean;
-    /** 하단 도움말 텍스트 */
-    supportingText?: string;
-    /** 첫 번째 입력에 자동 포커스 */
-    autoFocus?: boolean;
-    /** 접근성 레이블 */
-    ariaLabel?: string;
-    /** 추가 className */
-    className?: string;
-}
-/**
- * OTP 입력 컴포넌트를 렌더링한다.
- * 각 자리를 개별 입력으로 분리하고, 자동 포커스 이동·붙여넣기를 지원한다.
- * @param props OTP 입력 속성
- * @returns 렌더링된 OTP 입력 요소
- */
-declare const OtpInput: {
-    ({ length, value, onValueChange, onChange, error, disabled, supportingText, autoFocus, ariaLabel, className, }: OtpInputProps): React$1.JSX.Element;
-    displayName: string;
-};
-
-interface PaginationBaseProps {
-    /** 현재 페이지 번호 (1-based) */
-    page: number;
-    /** 전체 페이지 수 */
-    totalPages: number;
-    /** 이전 페이지 버튼 aria-label (기본값: "Previous page") */
-    prevLabel?: string;
-    /** 다음 페이지 버튼 aria-label (기본값: "Next page") */
-    nextLabel?: string;
-}
-type PaginationCallbacks = {
-    onPageChange: (page: number) => void;
-    onChange?: (page: number) => void;
-} | {
-    onPageChange?: (page: number) => void;
-    onChange: (page: number) => void;
-};
-type PaginationProps = PaginationBaseProps & PaginationCallbacks;
-/**
- * 페이지네이션을 렌더링한다.
- * 이전/다음 버튼과 페이지 목록을 구성해 전달된 콜백으로 페이지 변경을 전달한다.
- * @param props 페이지네이션 속성
- * @returns 렌더링된 페이지네이션 UI
- */
-declare const Pagination: ({ page, totalPages, onPageChange, onChange, prevLabel, nextLabel, }: PaginationProps) => React$1.JSX.Element;
-
-interface RadioProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
-    /** 라디오 버튼 옆에 표시할 라벨 */
-    label?: React$1.ReactNode;
-    /** 라디오 버튼 크기 (기본값: "md"). `RadioGroup` 안에서는 그룹 size 가 기본값. */
-    size?: "sm" | "md" | "lg";
-    /** 입력 요소 참조 */
-    ref?: React$1.Ref<HTMLInputElement>;
-}
-/**
- * 라디오 버튼을 렌더링한다.
- * `RadioGroup` 안에서는 그룹 컨텍스트(name/value/size/disabled)를 자동 수신하고,
- * 밖에서는 native radio 로 standalone 동작한다 (기존 동작 유지).
- * @param props 라디오 속성
- * @returns 렌더링된 라디오 UI
- */
-declare const Radio: {
-    ({ label, size: sizeProp, className, ref, value, checked, onChange, name: nameProp, disabled: disabledProp, ...props }: RadioProps): React$1.JSX.Element;
-    displayName: string;
-};
-
-type RadioGroupSize = "sm" | "md" | "lg";
-type RadioGroupOrientation = "vertical" | "horizontal";
-interface RadioGroupProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
-    /** 제어형: 선택된 value */
-    value?: string;
-    /** 비제어형: 초기 선택 value */
-    defaultValue?: string;
-    /** value 변경 콜백 */
-    onValueChange?: (value: string) => void;
-    /** 라디오 그룹 name (미지정 시 자동 생성) */
-    name?: string;
-    /** 그룹 라벨 (radiogroup 의 접근성 레이블) */
-    label?: React$1.ReactNode;
-    /** 라벨/옵션 아래 보조 설명. error 일 때 에러 색 */
-    supportingText?: React$1.ReactNode;
-    /** 에러 상태 */
-    error?: boolean;
-    /** 그룹 사이즈 — 자식 Radio 에 전파 (기본값: "md") */
-    size?: RadioGroupSize;
-    /** 배치 방향 (기본값: "vertical") */
-    orientation?: RadioGroupOrientation;
-    /** 그룹 전체 비활성화 */
-    disabled?: boolean;
-    /** `Radio` 들 */
-    children: React$1.ReactNode;
-}
-/**
- * `Radio` 들을 묶는 합성 래퍼. Context 로 name/value/size/disabled 를 공유한다.
- * native `input[type=radio]` 라 같은 name 공유 시 브라우저가 방향키 이동을 기본 제공한다.
- *
- * - 제어형: `value` + `onValueChange`
- * - 비제어형: `defaultValue`
- *
- * @example
- * ```tsx
- * <RadioGroup label="크기" defaultValue="md" onValueChange={setSize}>
- *   <Radio value="sm" label="작게" />
- *   <Radio value="md" label="보통" />
- *   <Radio value="lg" label="크게" />
- * </RadioGroup>
- * ```
- */
-declare const RadioGroup: {
-    ({ value: controlledValue, defaultValue, onValueChange, name: nameProp, label, supportingText, error, size, orientation, disabled, className, children, ...props }: RadioGroupProps): React$1.JSX.Element;
-    displayName: string;
-};
-
-type SkeletonVariant = "text" | "title" | "avatar" | "rect";
-interface SkeletonProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
-    /** 스켈레톤 모양 (기본값: "text") */
-    variant?: SkeletonVariant;
-    /** CSS width 값 (예: "100%", 200, "16rem"). variant=avatar는 width=height로 사용 */
-    width?: number | string;
-    /** CSS height 값 */
-    height?: number | string;
-    /** border-radius 토큰 (sm/md/lg) 또는 임의 CSS 값 */
-    radius?: "sm" | "md" | "lg" | "full" | string;
-}
-/**
- * 로딩 상태를 표현하는 스켈레톤 플레이스홀더를 렌더링한다.
- * @param props 스켈레톤 속성
- * @returns 스켈레톤 요소
- */
-declare const Skeleton: ({ variant, width, height, radius, className, style, ...props }: SkeletonProps) => React$1.JSX.Element;
-
-interface SpinnerProps {
-    /** 스피너 크기(px) (기본값: 24) */
-    size?: number;
-    /** 스피너 접근성 레이블 (기본값: "Loading") */
-    ariaLabel?: string;
-}
-/**
- * 스피너를 렌더링한다. 12개 bar 가 방사형으로 배치되어 페이드 인/아웃 으로 회전하는 효과.
- * Vercel/iOS 스타일 - 클래식 border-spin 보다 부드럽고 미니멀.
- * @param props 스피너 속성
- * @returns 렌더링된 스피너 요소
- */
-declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => React$1.JSX.Element;
-
 type TableSize = "sm" | "md" | "lg";
 type TableSortDirection = "asc" | "desc";
 interface TableSort {
@@ -1955,48 +1390,534 @@ type TableProps<T extends object> = {
     selectRowAriaLabel?: (index: number) => string;
 } & TableSelectionProps<T>;
 /**
- * 데이터 테이블을 렌더링한다. 로딩 중에는 헤더 유지, 바디에 스켈레톤 행을 표시한다.
- * @param props 테이블 속성
- * @returns 테이블 컴포넌트
+ * 데이터 테이블을 렌더링한다. 로딩 중에는 헤더 유지, 바디에 스켈레톤 행을 표시한다.
+ * @param props 테이블 속성
+ * @returns 테이블 컴포넌트
+ */
+declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, rowClickHint, sort, onSortChange, selectAllAriaLabel, selectRowAriaLabel, selectable, rowKey, selectedKeys, onSelectionChange, }: TableProps<T>) => React$1.JSX.Element;
+
+type AlertVariant = "info" | "success" | "warning" | "error";
+type AlertActionsAlign = "left" | "center" | "right";
+interface AlertOptions {
+    /** 알림 스타일 변형 (기본값: "info") */
+    variant?: AlertVariant;
+    /** 알림 제목 */
+    title?: React$1.ReactNode;
+    /** 알림 본문 메시지 */
+    message?: React$1.ReactNode;
+    /** 확인 버튼 텍스트 (기본값: "확인") */
+    confirmText?: string;
+    /** 취소 버튼 텍스트 (기본값: "취소") */
+    cancelText?: string;
+    /** 취소 버튼 표시 여부 (기본값: false) */
+    showCancel?: boolean;
+    /**
+     * Destructive 액션 여부. true 시 확인 버튼이 빨간 강조(danger)로 표시되고
+     * 취소 버튼은 outline으로 유지. 위험성을 시각적으로 표현해 사용자가 인지 가능.
+     * (Material/shadcn/Radix 표준 패턴)
+     * @default false
+     */
+    destructive?: boolean;
+    /** 액션 버튼 정렬 (기본값: "right") */
+    actionsAlign?: AlertActionsAlign;
+    /** 변형 아이콘 표시 여부 (기본값: false). 원하면 명시적으로 켜기 */
+    showIcon?: boolean;
+    /** 확인 버튼 클릭 시 호출되는 콜백 */
+    onConfirm?: () => void;
+    /** 취소 버튼 클릭 시 호출되는 콜백 */
+    onCancel?: () => void;
+    /**
+     * 오버레이 클릭으로 닫기 허용 여부 (기본값: true).
+     * destructive 확인처럼 실수 닫힘을 막아야 하면 false 로.
+     */
+    closeOnOverlay?: boolean;
+}
+interface AlertContextValue {
+    showAlert: (options: AlertOptions) => void;
+}
+declare const useAlert: () => AlertContextValue;
+declare const AlertProvider: React$1.FC<{
+    children: React$1.ReactNode;
+}>;
+
+interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 전체 단계 수 */
+    totalSteps: number;
+    /** 현재 단계 (0부터 totalSteps까지) */
+    currentStep: number;
+    /** 접근성 레이블 (스크린 리더용) */
+    "aria-label": string;
+}
+/**
+ * 선형 진행 표시기를 렌더링한다.
+ * `totalSteps + 1` 개 dot (체크포인트) + 진행 바. Dot `i` 는 `i <= currentStep` 이면 채워짐.
+ * @param props 진행 표시기 속성
+ * @returns 렌더링된 진행 표시기 요소
+ */
+declare const LinearProgress: ({ totalSteps, currentStep, className, ...props }: LinearProgressProps) => React$1.JSX.Element;
+
+type SkeletonVariant = "text" | "title" | "avatar" | "rect";
+interface SkeletonProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 스켈레톤 모양 (기본값: "text") */
+    variant?: SkeletonVariant;
+    /** CSS width 값 (예: "100%", 200, "16rem"). variant=avatar는 width=height로 사용 */
+    width?: number | string;
+    /** CSS height 값 */
+    height?: number | string;
+    /** border-radius 토큰 (sm/md/lg) 또는 임의 CSS 값 */
+    radius?: "sm" | "md" | "lg" | "full" | string;
+}
+/**
+ * 로딩 상태를 표현하는 스켈레톤 플레이스홀더를 렌더링한다.
+ * @param props 스켈레톤 속성
+ * @returns 스켈레톤 요소
+ */
+declare const Skeleton: ({ variant, width, height, radius, className, style, ...props }: SkeletonProps) => React$1.JSX.Element;
+
+interface SpinnerProps {
+    /** 스피너 크기(px) (기본값: 24) */
+    size?: number;
+    /** 스피너 접근성 레이블 (기본값: "Loading") */
+    ariaLabel?: string;
+}
+/**
+ * 스피너를 렌더링한다. 12개 bar 가 방사형으로 배치되어 페이드 인/아웃 으로 회전하는 효과.
+ * Vercel/iOS 스타일 - 클래식 border-spin 보다 부드럽고 미니멀.
+ * @param props 스피너 속성
+ * @returns 렌더링된 스피너 요소
+ */
+declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => React$1.JSX.Element;
+
+interface ToastProviderProps {
+    /** 앱 루트에서 감싸는 자식 요소 */
+    children: React$1.ReactNode;
+    /** 최대 동시 표시 토스트 수 (기본값: 5) */
+    maxCount?: number;
+    /** 토스트 닫기 버튼의 aria-label (기본값: "Close") */
+    closeAriaLabel?: string;
+}
+/**
+ * 토스트 컨텍스트를 제공하는 Provider를 렌더링한다.
+ * 앱 최상단에서 children을 감싸야 useToast 훅을 사용할 수 있다.
+ * @param props Provider 속성
+ * @returns 렌더링된 Provider와 토스트 컨테이너
+ */
+declare const ToastProvider: ({ children, maxCount, closeAriaLabel, }: ToastProviderProps) => React$1.JSX.Element;
+
+/**
+ * 토스트 메시지를 표시하는 훅.
+ * ToastProvider 내부에서만 사용할 수 있다.
+ * @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;
+};
+
+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$1.JSX.Element | null;
+
+interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** 체크박스 옆에 표시할 라벨 */
+    label?: React$1.ReactNode;
+    /** 중간 선택(indeterminate) 상태 여부 */
+    indeterminate?: boolean;
+    /** 에러 상태 여부 */
+    error?: boolean;
+    /** 입력 요소 참조 */
+    ref?: React$1.Ref<HTMLInputElement>;
+}
+/**
+ * 체크박스를 렌더링한다.
+ * Figma DS 기준 3가지 타입(Unselected/Checked/Indeterminate)과 state layer overlay를 지원한다.
+ * @param props 체크박스 속성
+ * @returns 렌더링된 체크박스 UI
+ */
+declare const Checkbox: {
+    ({ label, indeterminate, error, className, ref, ...props }: CheckboxProps): React$1.JSX.Element;
+    displayName: string;
+};
+
+type DatePickerMode = "year-month" | "year-month-day";
+type SelectableRange = "all" | "until-today";
+interface DatePickerBaseProps {
+    /** 데이트 피커 위에 표시할 라벨 텍스트 */
+    label?: string;
+    /** 제어형 날짜 값 ("YYYY-MM" 또는 "YYYY-MM-DD" 형식) */
+    value?: string;
+    /** 선택 모드 (기본값: "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의 라벨/플레이스홀더 (기본값: "Year") */
+    yearLabel?: string;
+    /** 월 select의 라벨/플레이스홀더 (기본값: "Month") */
+    monthLabel?: string;
+    /** 일 select의 라벨/플레이스홀더 (기본값: "Day") */
+    dayLabel?: string;
+    /**
+     * minDate 설정 시 스크린리더에 전달할 안내 문구 포맷.
+     * `{date}` 자리에 minDate 값이 치환됩니다. (기본값: "Minimum date: {date}")
+     */
+    minDateSrFormat?: string;
+    /**
+     * selectableRange="until-today" 설정 시 스크린리더에 전달할 안내 문구.
+     * (기본값: "Selectable up to today")
+     */
+    selectableRangeUntilTodaySrText?: string;
+}
+type DatePickerCallbacks = {
+    onValueChange: (value: string) => void;
+    onChange?: (value: string) => void;
+} | {
+    onValueChange?: (value: string) => void;
+    onChange: (value: string) => void;
+};
+type DatePickerProps = DatePickerBaseProps & DatePickerCallbacks;
+/**
+ * 연/월/일 선택형 데이트 피커를 렌더링한다.
+ * 내부적으로 DS Dropdown 3개를 조합해 드롭다운 UX 일관성을 유지한다.
+ */
+declare const DatePicker: ({ label, value, onValueChange, onChange, mode, startYear, endYear: endYearProp, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => React$1.JSX.Element;
+
+type DropdownSize = "sm" | "md" | "lg";
+interface DropdownOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** 옵션 아래에 표시할 보조 텍스트 */
+    supportingText?: string;
+    /** 옵션 왼쪽 아이콘 */
+    leadingIcon?: React$1.ReactNode;
+    /** 옵션 오른쪽 아이콘 (미지정 시 선택 상태에 체크 아이콘 자동 표시) */
+    trailingIcon?: React$1.ReactNode;
+    /** 아이템 아래 구분선 표시 여부 */
+    showDivider?: boolean;
+}
+/** single/multiple 공통 속성 */
+interface DropdownCommonProps {
+    /** 드롭다운 요소의 id (미입력 시 자동 생성) */
+    id?: string;
+    /** 드롭다운 위에 표시할 플로팅 라벨 텍스트 */
+    label?: string;
+    /** 선택 전 표시할 플레이스홀더 (기본값: "Select…") */
+    placeholder?: string;
+    /** 표시할 옵션 목록 */
+    options: DropdownOption[];
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 드롭다운 크기 (기본값: "md") */
+    size?: DropdownSize;
+    /**
+     * @deprecated Dropdown 은 이제 항상 부모 너비를 채웁니다. 인라인 사용 시 부모를 `inline-block + width` 로 감싸세요.
+     */
+    fullWidth?: boolean;
+    /** 루트 요소에 추가할 className */
+    className?: string;
+    /**
+     * @deprecated variant는 더 이상 지원되지 않습니다. Dropdown은 outline 스타일만 사용합니다.
+     */
+    variant?: "outline" | "filled" | "ghost";
+    /**
+     * @deprecated textAlign은 더 이상 지원되지 않습니다.
+     */
+    textAlign?: "left" | "center";
+    /**
+     * 검색 가능 여부. 활성화 시 열린 패널 상단에 검색 입력이 표시되고, 옵션 `label` 부분 일치로 필터링됩니다.
+     * (기본값: false)
+     */
+    searchable?: boolean;
+    /** 검색 입력의 placeholder (기본값: "검색…") */
+    searchPlaceholder?: string;
+    /** 필터 결과가 0개일 때 표시할 텍스트 (기본값: "결과 없음") */
+    emptyText?: string;
+    /** 멀티 선택 요약 텍스트 (기본값: "N개 선택") */
+    selectedSummary?: (count: number) => string;
+    /**
+     * 네이티브 폼 제출 참여용 name. 지정 시 선택 값이 hidden input 으로 렌더되어
+     * `<form>` POST 에 포함됩니다 (multiple 은 같은 name 의 hidden input 반복).
+     */
+    name?: string;
+}
+/** 단일 선택 (기본) */
+interface DropdownSingleProps extends DropdownCommonProps {
+    /** 다중 선택 모드 (기본값: false) */
+    multiple?: false;
+    /** 제어형 선택 값 */
+    value?: string | null;
+    /** 값 변경 콜백 (canonical). 선택된 값과 전체 옵션 객체를 전달합니다. */
+    onValueChange?: (value: string | null, option?: DropdownOption | null) => void;
+    /** @deprecated `onValueChange` 를 사용하세요. */
+    onChange?: (value: string | null, option?: DropdownOption | null) => void;
+    /** 비제어형 초기 선택 값 */
+    defaultValue?: string | null;
+}
+/** 다중 선택 */
+interface DropdownMultipleProps extends DropdownCommonProps {
+    /** 다중 선택 모드 */
+    multiple: true;
+    /** 제어형 선택 값 목록 */
+    value?: string[];
+    /** 값 변경 콜백 (canonical). 선택된 값 목록과 옵션 객체 목록을 전달합니다. */
+    onValueChange?: (values: string[], options: DropdownOption[]) => void;
+    /** @deprecated `onValueChange` 를 사용하세요. */
+    onChange?: (values: string[], options: DropdownOption[]) => void;
+    /** 비제어형 초기 선택 값 목록 */
+    defaultValue?: string[];
+}
+type DropdownProps = DropdownSingleProps | DropdownMultipleProps;
+/**
+ * 드롭다운 컴포넌트를 렌더링한다.
+ * 제어형/비제어형 상태를 지원하며, 키보드/마우스 상호작용과 정적 라벨을 관리한다.
+ * `searchable` 로 라벨 부분 일치 검색을, `multiple` 로 다중 선택을 opt-in 할 수 있다.
+ * @param props 드롭다운 속성
+ * @returns 렌더링된 드롭다운 UI
+ */
+declare const Dropdown: (props: DropdownProps) => React$1.JSX.Element;
+
+type FileInputVariant = "button" | "preview";
+interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
+    /** 파일 선택 버튼 라벨 / preview variant 빈 상태 텍스트 (기본값: "Choose file") */
+    label?: string;
+    /** 파일 선택 시 호출되는 콜백 */
+    onFiles?: (files: FileList | null) => void;
+    /** 입력 필드 아래에 표시할 도움말 텍스트 (예: "PDF, DOC 파일만 업로드 가능합니다") */
+    supportingText?: string;
+    /** 이미지 파일 선택 시 64×64 썸네일을 버튼 아래 나열 (variant="button" 전용) */
+    preview?: boolean;
+    /**
+     * 표시 형태 (기본값: "button").
+     * - `"button"`: 일반 파일 선택 버튼. `preview=true` 면 아래에 작은 썸네일 표시.
+     * - `"preview"`: 큰 박스 안에 이미지 채움 (avatar / 이미지 업로더 패턴). 단일 이미지.
+     */
+    variant?: FileInputVariant;
+    /** variant="preview" 박스 크기 (px, 기본값: 160) */
+    previewSize?: number;
+}
+/**
+ * 파일 입력 컴포넌트를 렌더링한다.
+ * 내부 input 변경을 감지해 파일 목록을 콜백으로 전달한다.
+ * @param props 파일 입력 속성
+ * @returns 렌더링된 파일 입력 UI
+ */
+declare const FileInput: ({ label, onFiles, supportingText, preview, variant, previewSize, className, disabled, accept, onChange, ...props }: FileInputProps) => React$1.JSX.Element;
+
+/**
+ * 정사각 이미지 크롭의 좌표 계산. 화면 조작(드래그 이동량 + 확대 배율)을 원본 픽셀 기준
+ * 정사각 영역으로 환산하는 순수 함수만 모은다 — canvas / DOM 을 모르므로 그대로 단위 테스트
+ * 할 수 있다.
+ *
+ * 좌표 규약:
+ * - 뷰포트는 한 변이 `viewportSize` 인 정사각형이고, 이미지는 그 중앙을 기준으로 놓인다.
+ * - `offset` 은 이미지 중심이 뷰포트 중심에서 얼마나 밀렸는지(CSS px). 오른쪽/아래가 +.
+ * - 배율은 항상 `cover` 배율 × zoom 이라 zoom=1 이면 이미지가 뷰포트를 정확히 덮는다.
+ */
+/** 이미지 중심의 이동량(CSS px) */
+interface CropOffset {
+    x: number;
+    y: number;
+}
+/** 원본 이미지의 natural 크기(px) */
+interface CropImageSize {
+    width: number;
+    height: number;
+}
+/** 원본 픽셀 기준 정사각 크롭 영역 (`canvas.drawImage` 의 source 인자로 그대로 사용) */
+interface CropRect {
+    x: number;
+    y: number;
+    size: number;
+}
+
+interface ImageCropperHandle {
+    /** 현재 보이는 정사각 영역을 잘라 Blob 으로 돌려준다. 소비자의 "적용" 버튼에서 호출. */
+    crop: () => Promise<Blob>;
+    /** 배율·위치를 초기 상태(전체가 보이는 zoom=min, 중앙)로 되돌린다. */
+    reset: () => void;
+}
+interface ImageCropperProps {
+    /** 크롭/리셋을 호출할 imperative 핸들 (React 19 ref-as-prop). */
+    ref?: Ref<ImageCropperHandle>;
+    /** 크롭할 이미지. `File`/`Blob`(로컬) 또는 이미지 URL 문자열. */
+    src: File | Blob | string;
+    /** 결과물 한 변 길이(px). 기본 512. */
+    outputSize?: number;
+    /** 결과 MIME. `"auto"`(기본)는 PNG 는 PNG 로, 나머지는 JPEG 로 통일. */
+    outputType?: "auto" | "image/jpeg" | "image/png" | "image/webp";
+    /** JPEG/WebP 인코딩 품질(0~1). 기본 0.92. */
+    quality?: number;
+    /** 원형 가이드(아바타용). 기본 false(둥근 사각형 가이드). */
+    circular?: boolean;
+    /** 뷰포트 한 변 길이(px). 기본 240. */
+    viewportSize?: number;
+    /** 최소 배율. 기본 1(이미지가 뷰포트를 딱 덮음). */
+    minZoom?: number;
+    /** 최대 배율. 기본 3. */
+    maxZoom?: number;
+    /** 이미지 로드 완료 시. */
+    onReady?: (size: CropImageSize) => void;
+    /** 이미지 디코딩 실패 시(손상 파일 등). */
+    onError?: () => void;
+    className?: string;
+    /** 뷰포트 접근성 레이블. 기본 "이미지 위치와 배율 조정". */
+    label?: string;
+}
+/**
+ * 업로드 전에 이미지에서 보일 정사각 영역을 정하는 크로퍼. 뷰포트 안에서 **드래그(또는 방향키)**
+ * 로 위치를, **휠·슬라이더·＋/－ 버튼(또는 `+`/`-` 키)** 으로 배율을 맞춘다. 모달은 포함하지
+ * 않으므로 소비자가 `Modal` 등으로 감싸고, 적용 버튼에서 `ref.crop()` 을 호출해 Blob 을 받는다.
+ *
+ * ```tsx
+ * const cropperRef = useRef<ImageCropperHandle>(null);
+ * <ImageCropper ref={cropperRef} src={file} circular />
+ * // 적용:
+ * const blob = await cropperRef.current!.crop();
+ * ```
+ *
+ * 원격 URL 을 넘기면 `canvas.drawImage` 가 서버의 CORS(`Access-Control-Allow-Origin`)에
+ * 의존한다 — 확실히 자르려면 로컬 `File`/`Blob` 을 권장한다.
+ */
+declare function ImageCropper({ ref, src, outputSize, outputType, quality, circular, viewportSize, minZoom, maxZoom, onReady, onError, className, label, }: ImageCropperProps): React$1.JSX.Element;
+
+interface OtpInputProps {
+    /** OTP 자릿수 (기본값: 6) */
+    length?: 4 | 6;
+    /** 제어형 값 */
+    value?: string;
+    /** 값 변경 콜백 (canonical) */
+    onValueChange?: (value: string) => void;
+    /** @deprecated `onValueChange` 를 사용하세요. */
+    onChange?: (value: string) => void;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 하단 도움말 텍스트 */
+    supportingText?: string;
+    /** 첫 번째 입력에 자동 포커스 */
+    autoFocus?: boolean;
+    /** 접근성 레이블 */
+    ariaLabel?: string;
+    /** 추가 className */
+    className?: string;
+}
+/**
+ * OTP 입력 컴포넌트를 렌더링한다.
+ * 각 자리를 개별 입력으로 분리하고, 자동 포커스 이동·붙여넣기를 지원한다.
+ * @param props OTP 입력 속성
+ * @returns 렌더링된 OTP 입력 요소
  */
-declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, rowClickHint, sort, onSortChange, selectAllAriaLabel, selectRowAriaLabel, selectable, rowKey, selectedKeys, onSelectionChange, }: TableProps<T>) => React$1.JSX.Element;
+declare const OtpInput: {
+    ({ length, value, onValueChange, onChange, error, disabled, supportingText, autoFocus, ariaLabel, className, }: OtpInputProps): React$1.JSX.Element;
+    displayName: string;
+};
 
-type ThemeMode = "light" | "dark" | "system";
-type ResolvedTheme = "light" | "dark";
-interface ThemeContextValue {
-    /** 현재 선택된 모드 (system 포함) */
-    mode: ThemeMode;
-    /** 실제로 적용된 테마 (system은 prefers-color-scheme으로 해석됨) */
-    resolved: ResolvedTheme;
-    /** 모드 변경 */
-    setMode: (mode: ThemeMode) => void;
+interface RadioProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** 라디오 버튼 옆에 표시할 라벨 */
+    label?: React$1.ReactNode;
+    /** 라디오 버튼 크기 (기본값: "md"). `RadioGroup` 안에서는 그룹 size 가 기본값. */
+    size?: "sm" | "md" | "lg";
+    /** 입력 요소 참조 */
+    ref?: React$1.Ref<HTMLInputElement>;
 }
 /**
- * ThemeProvider 안에서 호출. mode/resolved/setMode를 반환.
- * Provider 외부에서 호출하면 에러를 던진다.
+ * 라디오 버튼을 렌더링한다.
+ * `RadioGroup` 안에서는 그룹 컨텍스트(name/value/size/disabled)를 자동 수신하고,
+ * 밖에서는 native radio 로 standalone 동작한다 (기존 동작 유지).
+ * @param props 라디오 속성
+ * @returns 렌더링된 라디오 UI
  */
-declare const useTheme: () => ThemeContextValue;
-interface ThemeProviderProps {
-    /** 초기 테마 (기본값: "system") */
-    defaultMode?: ThemeMode;
-    /** localStorage 키 (기본값: "bt-theme"). null이면 저장 안 함 */
-    storageKey?: string | null;
-    /** 적용 대상 element selector (기본값: document.documentElement) */
-    targetSelector?: string;
+declare const Radio: {
+    ({ label, size: sizeProp, className, ref, value, checked, onChange, name: nameProp, disabled: disabledProp, ...props }: RadioProps): React$1.JSX.Element;
+    displayName: string;
+};
+
+type RadioGroupSize = "sm" | "md" | "lg";
+type RadioGroupOrientation = "vertical" | "horizontal";
+interface RadioGroupProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 제어형: 선택된 value */
+    value?: string;
+    /** 비제어형: 초기 선택 value */
+    defaultValue?: string;
+    /** value 변경 콜백 */
+    onValueChange?: (value: string) => void;
+    /** 라디오 그룹 name (미지정 시 자동 생성) */
+    name?: string;
+    /** 그룹 라벨 (radiogroup 의 접근성 레이블) */
+    label?: React$1.ReactNode;
+    /** 라벨/옵션 아래 보조 설명. error 일 때 에러 색 */
+    supportingText?: React$1.ReactNode;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 그룹 사이즈 — 자식 Radio 에 전파 (기본값: "md") */
+    size?: RadioGroupSize;
+    /** 배치 방향 (기본값: "vertical") */
+    orientation?: RadioGroupOrientation;
+    /** 그룹 전체 비활성화 */
+    disabled?: boolean;
+    /** `Radio` 들 */
     children: React$1.ReactNode;
 }
 /**
- * Bigtablet DS 테마 컨텍스트를 제공한다.
- * `data-theme` attribute를 root element에 적용해서 CSS 변수 레이어를 전환한다.
+ * `Radio` 들을 묶는 합성 래퍼. Context 로 name/value/size/disabled 를 공유한다.
+ * native `input[type=radio]` 라 같은 name 공유 시 브라우저가 방향키 이동을 기본 제공한다.
+ *
+ * - 제어형: `value` + `onValueChange`
+ * - 비제어형: `defaultValue`
  *
  * @example
  * ```tsx
- * <ThemeProvider defaultMode="system">
- *   <App />
- * </ThemeProvider>
+ * <RadioGroup label="크기" defaultValue="md" onValueChange={setSize}>
+ *   <Radio value="sm" label="작게" />
+ *   <Radio value="md" label="보통" />
+ *   <Radio value="lg" label="크게" />
+ * </RadioGroup>
  * ```
  */
-declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
+declare const RadioGroup: {
+    ({ value: controlledValue, defaultValue, onValueChange, name: nameProp, label, supportingText, error, size, orientation, disabled, className, children, ...props }: RadioGroupProps): React$1.JSX.Element;
+    displayName: string;
+};
 
 type TextFieldSize = "sm" | "md" | "lg";
 /**
@@ -2101,102 +2022,259 @@ interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextArea
     ref?: React$1.Ref<HTMLTextAreaElement>;
 }
 /**
- * 멀티라인 텍스트 입력. `TextField` 와 동일한 시각/토큰 + textarea 특화 기능.
- * auto-grow (`minRows`/`maxRows`), 글자 수 카운터, resize 제어, 한글 IME 정책 지원.
+ * 멀티라인 텍스트 입력. `TextField` 와 동일한 시각/토큰 + textarea 특화 기능.
+ * auto-grow (`minRows`/`maxRows`), 글자 수 카운터, resize 제어, 한글 IME 정책 지원.
+ *
+ * @example
+ * ```tsx
+ * <Textarea label="내용" minRows={3} maxRows={8} maxLength={500} showCounter
+ *   onChangeAction={(v) => setContent(v)} />
+ * ```
+ */
+declare const Textarea: {
+    ({ id, label, showLabel, supportingText, error, fullWidth, size, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, rows, minRows, maxRows, showCounter, resize, maxLength, ref, ...props }: TextareaProps): React$1.JSX.Element;
+    displayName: string;
+};
+
+interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /** 제어형 토글 상태 */
+    checked?: boolean;
+    /** 비제어형 초기 토글 상태 */
+    defaultChecked?: boolean;
+    /** 상태 변경 콜백 (canonical) */
+    onCheckedChange?: (checked: boolean) => void;
+    /** @deprecated `onCheckedChange` 를 사용하세요. */
+    onChange?: (checked: boolean) => void;
+    /** 토글 크기 (기본값: "sm") */
+    size?: "sm" | "md";
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 토글 접근성 레이블(스크린 리더용) */
+    ariaLabel: string;
+    /** 버튼 요소 참조 */
+    ref?: React$1.Ref<HTMLButtonElement>;
+}
+/**
+ * 토글을 렌더링한다.
+ * 제어형/비제어형 상태를 판별해 토글 로직을 수행하고 버튼 형태의 토글 UI를 반환한다.
+ * @param props 토글 속성
+ * @returns 렌더링된 토글 요소
+ */
+declare const Toggle: {
+    ({ checked, defaultChecked, onCheckedChange, onChange, size, disabled, className, ariaLabel, ref, ...props }: ToggleProps): React$1.JSX.Element;
+    displayName: string;
+};
+
+type ButtonVariant = "filled" | "tonal" | "outline" | "text";
+type ButtonSize = "sm" | "md" | "lg" | "xl";
+/** button/anchor 공통 스타일·콘텐츠 props */
+interface ButtonBaseProps {
+    /** 버튼 스타일 변형 (기본값: "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";
+    /**
+     * 위험한 액션 (삭제/취소 등) - 빨간 강조.
+     * filled: 빨간 bg, outline: 빨간 텍스트/border, tonal: 빨간 wash.
+     */
+    danger?: boolean;
+    /**
+     * 비활성화. button 은 native `disabled`, anchor 는 `aria-disabled`+`tabIndex=-1`+
+     * 클릭 차단으로 처리(anchor 엔 native disabled 가 없으므로).
+     */
+    disabled?: boolean;
+}
+/** `<button>` 으로 렌더링 (기본) */
+interface ButtonAsButton extends ButtonBaseProps, Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonBaseProps> {
+    /** 렌더링할 요소 (기본값: "button") */
+    as?: "button";
+    /** button 렌더 시엔 href 를 허용하지 않음 (href 만 주면 anchor 로 분기되도록) */
+    href?: never;
+    /** 루트 button 요소 ref (React 19 ref-as-prop) */
+    ref?: React$1.Ref<HTMLButtonElement>;
+}
+/** `<a>` 로 렌더링 - 링크 시맨틱(우클릭 새 탭·미들클릭·SR 링크 안내) */
+interface ButtonAsAnchor extends ButtonBaseProps, Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonBaseProps> {
+    /** anchor 로 렌더링 - 생략 가능(href 만 줘도 anchor 로 분기) */
+    as?: "a";
+    /** 링크 대상 (anchor 필수) */
+    href: string;
+    /** 루트 anchor 요소 ref (React 19 ref-as-prop) */
+    ref?: React$1.Ref<HTMLAnchorElement>;
+}
+/**
+ * Button props - `as`/`href` 에 따라 button 또는 anchor 로 렌더링되는 discriminated union.
+ * `as` 미지정 시 기본 `<button>` (기존 동작과 100% 호환).
+ */
+type ButtonProps = ButtonAsButton | ButtonAsAnchor;
+/**
+ * 버튼을 렌더링한다.
+ * Figma DS 기준 4가지 variant(filled/tonal/outline/text)와 4가지 size(sm/md/lg/xl)를 지원한다.
+ * `as="a"` (또는 `href` 지정) 시 동일 스타일의 anchor 로 렌더링한다.
+ * @param props 버튼 속성
+ * @returns 렌더링된 button 또는 anchor 요소
+ */
+declare const Button: (props: ButtonProps) => React$1.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;
+    /** 루트 button 요소 ref (React 19 ref-as-prop) */
+    ref?: React$1.Ref<HTMLButtonElement>;
+}
+/**
+ * 아이콘만 표시하는 버튼을 렌더링한다.
+ * Figma DS 기준 4가지 variant(standard/filled/tonal/outlined)와 2가지 size(sm/md)를 지원한다.
+ * @param props 아이콘 버튼 속성
+ * @returns 렌더링된 아이콘 버튼 요소
+ */
+declare const IconButton: ({ variant, size, icon, type, ref, className, ...props }: IconButtonProps) => React$1.JSX.Element;
+
+interface PaginationBaseProps {
+    /** 현재 페이지 번호 (1-based) */
+    page: number;
+    /** 전체 페이지 수 */
+    totalPages: number;
+    /** 이전 페이지 버튼 aria-label (기본값: "Previous page") */
+    prevLabel?: string;
+    /** 다음 페이지 버튼 aria-label (기본값: "Next page") */
+    nextLabel?: string;
+}
+type PaginationCallbacks = {
+    onPageChange: (page: number) => void;
+    onChange?: (page: number) => void;
+} | {
+    onPageChange?: (page: number) => void;
+    onChange: (page: number) => void;
+};
+type PaginationProps = PaginationBaseProps & PaginationCallbacks;
+/**
+ * 페이지네이션을 렌더링한다.
+ * 이전/다음 버튼과 페이지 목록을 구성해 전달된 콜백으로 페이지 변경을 전달한다.
+ * @param props 페이지네이션 속성
+ * @returns 렌더링된 페이지네이션 UI
+ */
+declare const Pagination: ({ page, totalPages, onPageChange, onChange, prevLabel, nextLabel, }: PaginationProps) => React$1.JSX.Element;
+
+/** Drawer 가 미끄러져 들어오는 방향 (top 은 범위 외) */
+type DrawerPlacement = "left" | "right" | "bottom";
+interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "role"> {
+    /** 드로어 열림 여부 */
+    open: boolean;
+    /** 드로어 닫기 콜백 */
+    onClose?: () => void;
+    /** 슬라이드 방향 (기본값: "right") */
+    placement?: DrawerPlacement;
+    /** 패널 크기 - left/right 는 너비, bottom 은 높이 (기본값: 360). number ⇒ px */
+    size?: number | string;
+    /** 드로어 제목 (헤더 h2, heading_small_bold) */
+    title?: React$1.ReactNode;
+    /** 하단 액션 영역 (Button들). 미지정 시 footer 영역 자체가 안 보임 */
+    footer?: React$1.ReactNode;
+    /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
+    closeOnOverlay?: boolean;
+    /** 우상단 X 닫기 아이콘 표시 여부 (기본값: true) */
+    showCloseIcon?: boolean;
+    /** X 닫기 버튼 접근성 레이블 (기본값: "닫기") */
+    closeLabel?: string;
+    /** 드로어 접근성 레이블 (title 없을 때 사용, 기본값: "Dialog") */
+    ariaLabel?: string;
+}
+/**
+ * 화면 가장자리에서 미끄러져 들어오는 패널(Drawer)을 렌더링한다.
+ * react-spring 기반 방향별 슬라이드 진입/퇴출 + 포커스 트랩 + 바디 스크롤 잠금.
  *
- * @example
- * ```tsx
- * <Textarea label="내용" minRows={3} maxRows={8} maxLength={500} showCounter
- *   onChangeAction={(v) => setContent(v)} />
- * ```
+ * @param props 드로어 속성
+ * @returns 열림 상태일 때 렌더링된 드로어, 닫힘 상태면 null
  */
-declare const Textarea: {
-    ({ id, label, showLabel, supportingText, error, fullWidth, size, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, rows, minRows, maxRows, showCounter, resize, maxLength, ref, ...props }: TextareaProps): React$1.JSX.Element;
+declare const Drawer: {
+    ({ open, onClose, placement, size, title, footer, closeOnOverlay, showCloseIcon, closeLabel, ariaLabel, children, className, ...props }: DrawerProps): React$1.ReactPortal | null;
     displayName: string;
 };
 
-interface ToastProviderProps {
-    /** 앱 루트에서 감싸는 자식 요소 */
-    children: React$1.ReactNode;
-    /** 최대 동시 표시 토스트 수 (기본값: 5) */
-    maxCount?: number;
-    /** 토스트 닫기 버튼의 aria-label (기본값: "Close") */
-    closeAriaLabel?: string;
+type ModalFooterAlign = "end" | "between" | "start";
+interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title" | "onClick" | "onKeyDown" | "role"> {
+    /** 모달 열림 여부 */
+    open: boolean;
+    /** 모달 닫기 콜백 */
+    onClose?: () => void;
+    /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
+    closeOnOverlay?: boolean;
+    /** 모달 패널 너비 (기본값: 480) */
+    width?: number | string;
+    /** 모달 제목 (h2, heading_large_bold) */
+    title?: React$1.ReactNode;
+    /** 제목 아래 본문 설명 - paragraph로 자동 wrap */
+    description?: React$1.ReactNode;
+    /** 하단 액션 영역 (Button들). 미지정 시 footer 영역 자체가 안 보임 */
+    footer?: React$1.ReactNode;
+    /** Footer 정렬 (기본값: "end"). between은 좌우 분리 패턴 (destructive 액션 등) */
+    footerAlign?: ModalFooterAlign;
+    /** 우상단 X 닫기 아이콘 표시 여부 (기본값: true) */
+    showCloseIcon?: boolean;
+    /** X 닫기 버튼 접근성 레이블 (기본값: "닫기") */
+    closeLabel?: string;
+    /** 모달 접근성 레이블(기본값: title 또는 "Dialog") */
+    ariaLabel?: string;
 }
 /**
- * 토스트 컨텍스트를 제공하는 Provider를 렌더링한다.
- * 앱 최상단에서 children을 감싸야 useToast 훅을 사용할 수 있다.
- * @param props Provider 속성
- * @returns 렌더링된 Provider와 토스트 컨테이너
- */
-declare const ToastProvider: ({ children, maxCount, closeAriaLabel, }: ToastProviderProps) => React$1.JSX.Element;
-
-/**
- * 토스트 메시지를 표시하는 훅.
- * ToastProvider 내부에서만 사용할 수 있다.
- * @returns 토스트 메시지 표시 함수 객체
+ * 모달을 렌더링한다.
+ * react-spring 기반 진입/퇴출 모션 + 포커스 트랩 + 바디 스크롤 잠금.
+ * @param props 모달 속성
+ * @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
  */
-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 Modal: ({ open, onClose, closeOnOverlay, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, ...props }: ModalProps) => React$1.ReactPortal | null;
 
-interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
-    /** 제어형 토글 상태 */
-    checked?: boolean;
-    /** 비제어형 초기 토글 상태 */
-    defaultChecked?: boolean;
-    /** 상태 변경 콜백 (canonical) */
-    onCheckedChange?: (checked: boolean) => void;
-    /** @deprecated `onCheckedChange` 를 사용하세요. */
-    onChange?: (checked: boolean) => void;
-    /** 토글 크기 (기본값: "sm") */
-    size?: "sm" | "md";
-    /** 비활성화 여부 */
-    disabled?: boolean;
-    /** 토글 접근성 레이블(스크린 리더용) */
-    ariaLabel: string;
-    /** 버튼 요소 참조 */
-    ref?: React$1.Ref<HTMLButtonElement>;
+type ThemeMode = "light" | "dark" | "system";
+type ResolvedTheme = "light" | "dark";
+interface ThemeContextValue {
+    /** 현재 선택된 모드 (system 포함) */
+    mode: ThemeMode;
+    /** 실제로 적용된 테마 (system은 prefers-color-scheme으로 해석됨) */
+    resolved: ResolvedTheme;
+    /** 모드 변경 */
+    setMode: (mode: ThemeMode) => void;
 }
 /**
- * 토글을 렌더링한다.
- * 제어형/비제어형 상태를 판별해 토글 로직을 수행하고 버튼 형태의 토글 UI를 반환한다.
- * @param props 토글 속성
- * @returns 렌더링된 토글 요소
+ * ThemeProvider 안에서 호출. mode/resolved/setMode를 반환.
+ * Provider 외부에서 호출하면 에러를 던진다.
  */
-declare const Toggle: {
-    ({ checked, defaultChecked, onCheckedChange, onChange, size, disabled, className, ariaLabel, ref, ...props }: ToggleProps): React$1.JSX.Element;
-    displayName: string;
-};
-
-interface TopLoadingProps {
-    /** 진행률 (0-100). undefined면 indeterminate 모드 */
-    progress?: number;
-    /** 로딩바 색상 (기본: primary) */
-    color?: string;
-    /** 로딩바 높이 (기본: 3px) */
-    height?: number;
-    /** 표시 여부 */
-    isLoading?: boolean;
-    /** 프로그레스 바의 접근성 레이블 (기본값: "Page loading") */
-    ariaLabel?: string;
+declare const useTheme: () => ThemeContextValue;
+interface ThemeProviderProps {
+    /** 초기 테마 (기본값: "system") */
+    defaultMode?: ThemeMode;
+    /** localStorage 키 (기본값: "bt-theme"). null이면 저장 안 함 */
+    storageKey?: string | null;
+    /** 적용 대상 element selector (기본값: document.documentElement) */
+    targetSelector?: string;
+    children: React$1.ReactNode;
 }
 /**
- * 상단 로딩바를 렌더링한다.
- * 표시 여부와 진행률에 따라 determinate/indeterminate 상태를 구성한다.
- * @param props 로딩바 속성
- * @returns 렌더링된 로딩바 요소 또는 null
+ * Bigtablet DS 테마 컨텍스트를 제공한다.
+ * `data-theme` attribute를 root element에 적용해서 CSS 변수 레이어를 전환한다.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider defaultMode="system">
+ *   <App />
+ * </ThemeProvider>
+ * ```
  */
-declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => React$1.JSX.Element | null;
+declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
 
 type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
 interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
@@ -2227,6 +2305,54 @@ interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const Container: ({ size, center, as: Tag, ref, className, children, ...props }: ContainerProps) => React$1.JSX.Element;
 
+type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | "auto";
+type GridGap = 0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48;
+interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * 열 수. "auto" = auto-fill (minColWidth 사용)
+     * @default 3
+     */
+    cols?: GridCols;
+    /**
+     * auto-fill 모드일 때 최소 열 너비
+     * @default "280px"
+     */
+    minColWidth?: string;
+    /**
+     * 아이템 간격 (px). gap과 rowGap/colGap 동시 적용.
+     * @default 24
+     */
+    gap?: GridGap;
+    /** 행 간격 (gap을 override) */
+    rowGap?: GridGap;
+    /** 열 간격 (gap을 override) */
+    colGap?: GridGap;
+    /** 반응형 - compact(< 600px)에서 강제 1열 (기본 true) */
+    singleColOnMobile?: boolean;
+    /** 렌더링할 HTML 요소 */
+    as?: React$1.ElementType;
+    /** 루트 요소 ref (React 19 ref-as-prop) */
+    ref?: React$1.Ref<HTMLElement>;
+}
+/**
+ * CSS Grid 기반 2D 레이아웃 컨테이너.
+ * 고정 열 수 또는 auto-fill 반응형 그리드.
+ *
+ * @example
+ * ```tsx
+ * // 3열 고정
+ * <Grid cols={3} gap={24}>
+ *   <Card /><Card /><Card />
+ * </Grid>
+ *
+ * // auto-fill (최소 280px)
+ * <Grid cols="auto" minColWidth="280px" gap={16}>
+ *   {products.map(p => <MediaCard key={p.id} {...p} />)}
+ * </Grid>
+ * ```
+ */
+declare const Grid: ({ cols, minColWidth, gap, rowGap, colGap, singleColOnMobile, as: Tag, ref, className, children, style, ...props }: GridProps) => React$1.JSX.Element;
+
 type SectionSpacing = "xs" | "sm" | "md" | "lg" | "xl";
 type SectionBg = "default" | "dim" | "accent" | "inverted" | "transparent";
 interface SectionProps extends React$1.HTMLAttributes<HTMLElement> {
@@ -2308,52 +2434,4 @@ interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const Stack: ({ direction, gap, align, justify, wrap, as: Tag, ref, className, children, style, ...props }: StackProps) => React$1.JSX.Element;
 
-type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | "auto";
-type GridGap = 0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48;
-interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    /**
-     * 열 수. "auto" = auto-fill (minColWidth 사용)
-     * @default 3
-     */
-    cols?: GridCols;
-    /**
-     * auto-fill 모드일 때 최소 열 너비
-     * @default "280px"
-     */
-    minColWidth?: string;
-    /**
-     * 아이템 간격 (px). gap과 rowGap/colGap 동시 적용.
-     * @default 24
-     */
-    gap?: GridGap;
-    /** 행 간격 (gap을 override) */
-    rowGap?: GridGap;
-    /** 열 간격 (gap을 override) */
-    colGap?: GridGap;
-    /** 반응형 - compact(< 600px)에서 강제 1열 (기본 true) */
-    singleColOnMobile?: boolean;
-    /** 렌더링할 HTML 요소 */
-    as?: React$1.ElementType;
-    /** 루트 요소 ref (React 19 ref-as-prop) */
-    ref?: React$1.Ref<HTMLElement>;
-}
-/**
- * CSS Grid 기반 2D 레이아웃 컨테이너.
- * 고정 열 수 또는 auto-fill 반응형 그리드.
- *
- * @example
- * ```tsx
- * // 3열 고정
- * <Grid cols={3} gap={24}>
- *   <Card /><Card /><Card />
- * </Grid>
- *
- * // auto-fill (최소 280px)
- * <Grid cols="auto" minColWidth="280px" gap={16}>
- *   {products.map(p => <MediaCard key={p.id} {...p} />)}
- * </Grid>
- * ```
- */
-declare const Grid: ({ cols, minColWidth, gap, rowGap, colGap, singleColOnMobile, as: Tag, ref, className, children, style, ...props }: GridProps) => React$1.JSX.Element;
-
-export { Accordion, type AccordionItem, type AccordionProps, AlertProvider, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardFooterAlign, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Container, type ContainerProps, type ContainerSize, DatePicker, type DatePickerProps, Divider, type DividerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, type DropdownOption, type DropdownProps, type DropdownSize, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, FileInput, type FileInputProps, Grid, type GridCols, type GridGap, type GridProps, Hero, type HeroAction, type HeroAlign, type HeroHeight, type HeroOverlay, type HeroProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps, type ImeStrategy, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, MediaCard, type MediaCardImage, type MediaCardImagePosition, type MediaCardProps, type MediaCardShadow, Menu, type MenuItem, type MenuProps, Modal, type ModalProps, NavBar, type NavBarLayout, type NavBarLocaleConfig, type NavBarLocaleOption, type NavBarProps, type NavBarVariant, NavLink, type NavLinkProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Popover, type PopoverPlacement, type PopoverProps, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, type ResolvedTheme, Section, type SectionBg, type SectionProps, type SectionSpacing, Sidebar, SidebarItem, type SidebarItemProps, type SidebarMode, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, type StackWrap, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableSortDirection, Tabs, type TabsProps, type TabsSize, type TabsVariant, TextField, type TextFieldProps, type TextFieldSize, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
+export { Accordion, type AccordionItem, type AccordionProps, AlertProvider, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardFooterAlign, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Container, type ContainerProps, type ContainerSize, type CropImageSize, type CropOffset, type CropRect, DatePicker, type DatePickerProps, Divider, type DividerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, type DropdownOption, type DropdownProps, type DropdownSize, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, FileInput, type FileInputProps, Grid, type GridCols, type GridGap, type GridProps, Hero, type HeroAction, type HeroAlign, type HeroHeight, type HeroOverlay, type HeroProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps, ImageCropper, type ImageCropperHandle, type ImageCropperProps, type ImeStrategy, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, MediaCard, type MediaCardImage, type MediaCardImagePosition, type MediaCardProps, type MediaCardShadow, Menu, type MenuItem, type MenuProps, Modal, type ModalProps, NavBar, type NavBarLayout, type NavBarLocaleConfig, type NavBarLocaleOption, type NavBarProps, type NavBarVariant, NavLink, type NavLinkProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Popover, type PopoverPlacement, type PopoverProps, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, type ResolvedTheme, Section, type SectionBg, type SectionProps, type SectionSpacing, Sidebar, SidebarItem, type SidebarItemProps, type SidebarMode, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, type StackWrap, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableSortDirection, Tabs, type TabsProps, type TabsSize, type TabsVariant, TextField, type TextFieldProps, type TextFieldSize, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };