@bigtablet/design-system 3.1.1 → 3.2.0

package/dist/index.d.ts

@@ -74,11 +74,11 @@ declare function useSpringHover({ scale, lift, }?: {
  * ```
  */
 declare function useSpringPresence({ visible, from, onExitComplete, }: {
-    /** 보이는 상태인지 — false면 사라짐 모션 */
+    /** 보이는 상태인지 - false면 사라짐 모션 */
     visible: boolean;
     /** 진입 시 시작 transform (기본: 아래에서 살짝 올라옴) */
     from?: string;
-    /** exit 모션 완료 시 호출 — 부모에서 unmount 트리거용 */
+    /** exit 모션 완료 시 호출 - 부모에서 unmount 트리거용 */
     onExitComplete?: () => void;
 }): {
     opacity: _react_spring_web.SpringValue<number>;
@@ -94,7 +94,7 @@ interface AccordionItem {
 interface AccordionProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
     /** 아이템 목록 */
     items: AccordionItem[];
-    /** 여러 개 동시에 펼침 허용 (기본 false — 한 번에 하나) */
+    /** 여러 개 동시에 펼침 허용 (기본 false - 한 번에 하나) */
     multiple?: boolean;
     /** 기본으로 펼쳐진 키들 */
     defaultOpenKeys?: string[];
@@ -124,7 +124,7 @@ interface AvatarProps extends React$1.HTMLAttributes<HTMLSpanElement> {
     size?: AvatarSize;
     /** 모양 (기본값: "circle") */
     shape?: AvatarShape;
-    /** 색상 (기본값: navy accent) */
+    /** 색상 (기본값: accent-default — 검정/흰색 테마 자동) */
     bgColor?: string;
 }
 /**
@@ -142,6 +142,7 @@ declare const Avatar: ({ src, name, size, shape, bgColor, className, style, ...p
 type BadgeVariant = "accent" | "neutral" | "info" | "success" | "warning" | "error";
 type BadgeShape = "dot" | "count" | "label";
 type BadgeSize = "sm" | "md" | "lg";
+type BadgeAppearance = "solid" | "soft";
 interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
     /** 색상 variant (기본값: "accent") */
     variant?: BadgeVariant;
@@ -154,6 +155,12 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
      * - lg: 강조 (Hero 위 배지, 카테고리)
      */
     size?: BadgeSize;
+    /**
+     * 시각 강도 (기본값: "solid").
+     * - `solid`: 강한 fill bg + 흰/검 텍스트 - 기존 동작 (notification dot, status emphasis)
+     * - `soft`: tint 배경 + 진한 텍스트 - 차분한 정보 라벨 (WCAG AA 통과)
+     */
+    appearance?: BadgeAppearance;
     /** count shape 일 때 표시할 숫자. max를 넘으면 "max+" */
     count?: number;
     /** count 최댓값 (기본 99) */
@@ -167,9 +174,10 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
  * <Badge shape="dot" variant="error" />
  * <Badge shape="count" count={5} />
  * <Badge>New</Badge>
+ * <Badge variant="success" appearance="soft">+5%</Badge>
  * ```
  */
-declare const Badge: ({ variant, shape, size, count, max, className, children, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
+declare const Badge: ({ variant, shape, size, appearance, count, max, className, children, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
 interface BottomNavProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChange"> {
     /** 스크린 리더 레이블 (기본 "주요 메뉴") */
@@ -198,7 +206,7 @@ declare const BottomNav: ({ ariaLabel, className, children, ...props }: BottomNa
 interface BottomNavItemCommon {
     /** 아이콘 (필수) */
     icon: React$1.ReactNode;
-    /** 라벨 텍스트 (필수, 짧게 — 2–4자) */
+    /** 라벨 텍스트 (필수, 짧게 - 2–4자) */
     label: string;
     /** 활성 상태 */
     active?: boolean;
@@ -212,7 +220,7 @@ type BottomNavItemButton = BottomNavItemCommon & {
 type BottomNavItemAnchor = BottomNavItemCommon & {
     as: "a";
     href: string;
-    /** anchor 에 native `disabled` 없음 — `aria-disabled` + `preventDefault` 로 처리. */
+    /** anchor 에 native `disabled` 없음 - `aria-disabled` + `preventDefault` 로 처리. */
     disabled?: boolean;
 } & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "type">;
 type BottomNavItemProps = BottomNavItemButton | BottomNavItemAnchor;
@@ -268,7 +276,7 @@ interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
     size?: "sm" | "md" | "lg";
 }
 /**
- * 빈 상태 표시 — 데이터 없음, 검색 결과 없음, 시작 가이드 등.
+ * 빈 상태 표시 - 데이터 없음, 검색 결과 없음, 시작 가이드 등.
  *
  * @example
  * ```tsx
@@ -282,27 +290,63 @@ interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
  */
 declare const EmptyState: ({ illustration, title, description, action, size, className, ...props }: EmptyStateProps) => react_jsx_runtime.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_jsx_runtime.JSX.Element;
+
 interface MenuItem {
     key: string;
     label: React$1.ReactNode;
     icon?: React$1.ReactNode;
     disabled?: boolean;
-    /** 클릭 시 호출 — 자동으로 메뉴 닫힘 */
+    /** 클릭 시 호출 - 자동으로 메뉴 닫힘 */
     onSelect?: () => void;
-    /** destructive 액션 (삭제 등) — 빨간 텍스트 */
+    /** destructive 액션 (삭제 등) - 빨간 텍스트 */
     destructive?: boolean;
 }
 interface MenuProps {
     /** 메뉴 아이템들 */
     items: MenuItem[];
-    /** trigger 요소 — 클릭 시 메뉴 열림 */
+    /** trigger 요소 - 클릭 시 메뉴 열림 */
     trigger: React$1.ReactElement;
     /** 정렬 (기본 "start") */
     align?: "start" | "end";
 }
 /**
  * 컨텍스트 메뉴. trigger 클릭 시 아래에 메뉴 표시. 외부 클릭/Esc로 닫힘.
- * Form Dropdown과 다름 — 액션 메뉴 (Edit/Delete 등).
+ * Form Dropdown과 다름 - 액션 메뉴 (Edit/Delete 등).
  *
  * @example
  * ```tsx
@@ -330,7 +374,7 @@ interface NavBarLocaleConfig {
     options: NavBarLocaleOption[];
     /** locale 변경 콜백 */
     onChange: (next: string) => void;
-    /** 표시 라벨 — 기본은 옵션의 label, 미지정 시 short code 표시 */
+    /** 표시 라벨 - 기본은 옵션의 label, 미지정 시 short code 표시 */
     hideLabel?: boolean;
 }
 interface NavBarProps extends React$1.HTMLAttributes<HTMLElement> {
@@ -346,9 +390,9 @@ interface NavBarProps extends React$1.HTMLAttributes<HTMLElement> {
     profile?: React$1.ReactNode;
     /** actions / locale 와 profile 사이 수직 divider 표시 (기본 true, profile 있을 때만 표시) */
     divider?: boolean;
-    /** 시각 variant — default(흰 bg + 회색 border), transparent(투명, hero 위에), accent(navy bg) */
+    /** 시각 variant - default(흰 bg + 회색 border), transparent(투명, hero 위에), accent(검정 bg) */
     variant?: NavBarVariant;
-    /** 레이아웃 — contained(max 1200, marketing) / fluid(full width, admin/dashboard) */
+    /** 레이아웃 - contained(max 1200, marketing) / fluid(full width, admin/dashboard) */
     layout?: NavBarLayout;
     /** sticky 고정 여부 */
     sticky?: boolean;
@@ -491,6 +535,51 @@ interface TabPanelProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const TabPanel: ({ value, unmountInactive, className, children, ...props }: TabPanelProps) => react_jsx_runtime.JSX.Element | null;
 
+type PopoverPlacement = "top" | "bottom" | "left" | "right";
+interface PopoverProps {
+    /** trigger 요소 - 클릭 시 팝오버 토글 */
+    trigger: React$1.ReactElement;
+    /** 팝오버 내부 콘텐츠 - 임의 ReactNode (폼/설명/액션 조합) */
+    content: React$1.ReactNode;
+    /** 위치 (기본값: "bottom") */
+    placement?: PopoverPlacement;
+    /** 제어 모드 - 열림 상태 */
+    open?: boolean;
+    /** 비제어 모드 초기 열림 상태 (기본값: false) */
+    defaultOpen?: boolean;
+    /** 열림 상태 변경 콜백 */
+    onOpenChange?: (open: boolean) => void;
+    /** dialog 의 접근성 라벨 - content 에 제목이 없을 때 권장 */
+    "aria-label"?: string;
+    /** dialog 의 접근성 라벨 요소 id */
+    "aria-labelledby"?: string;
+    /** 추가 className - 팝오버 패널에 적용 */
+    className?: string;
+}
+/**
+ * 클릭 트리거로 임의의 interactive content 를 띄우는 범용 non-modal 팝오버.
+ * Menu(액션 리스트) / Tooltip(hover 정보) 과 역할 분리 - 폼/설명/액션 조합을 담는다.
+ * 외부 클릭/Esc 로 닫히며, 열릴 때 content 로 포커스 이동, Esc 로 닫으면 trigger 로 복귀.
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<Button>필터</Button>}
+ *   aria-label="필터 옵션"
+ *   content={
+ *     <Stack gap={8}>
+ *       <Checkbox label="활성" />
+ *       <Button size="sm">적용</Button>
+ *     </Stack>
+ *   }
+ * />
+ * ```
+ */
+declare const Popover: {
+    ({ trigger, content, placement, open: openProp, defaultOpen, onOpenChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, }: PopoverProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 type TooltipPlacement = "top" | "bottom" | "left" | "right";
 interface TooltipProps {
     /** 툴팁 콘텐츠 */
@@ -499,7 +588,7 @@ interface TooltipProps {
     placement?: TooltipPlacement;
     /** hover 후 지연 시간 ms (기본 200) */
     delay?: number;
-    /** 비활성화 — children만 그대로 렌더, 툴팁 없음 */
+    /** 비활성화 - children만 그대로 렌더, 툴팁 없음 */
     disabled?: boolean;
     children: React$1.ReactElement;
 }
@@ -561,20 +650,12 @@ declare const baseColors: {
     readonly neutral700: "#666666";
     readonly neutral800: "#333333";
     readonly neutral900: "#121212";
+    readonly neutral925: "#141414";
+    readonly neutral950: "#0A0A0A";
     readonly statusError: "#EF4444";
     readonly statusSuccess: "#10B981";
     readonly statusWarning: "#F59E0B";
     readonly statusInfo: "#3B82F6";
-    readonly navy50: "#F2F5F8";
-    readonly navy100: "#DDE3E9";
-    readonly navy200: "#B4C2CD";
-    readonly navy300: "#7AA5D2";
-    readonly navy400: "#5A8DCB";
-    readonly navy500: "#4C7CB6";
-    readonly navy600: "#47555E";
-    readonly navy700: "#3D4852";
-    readonly navy800: "#303841";
-    readonly navy900: "#1F2630";
     readonly alphaBlack5: "rgba(0, 0, 0, 0.05)";
     readonly alphaBlack8: "rgba(0, 0, 0, 0.08)";
     readonly alphaBlack12: "rgba(26, 26, 26, 0.12)";
@@ -625,11 +706,11 @@ declare const colors: {
         readonly info: "#3B82F6";
     };
     readonly accent: {
-        readonly subtle: "#F2F5F8";
-        readonly muted: "#DDE3E9";
-        readonly light: "#7AA5D2";
-        readonly default: "#47555E";
-        readonly strong: "#303841";
+        readonly subtle: "rgba(0, 0, 0, 0.05)";
+        readonly muted: "rgba(26, 26, 26, 0.12)";
+        readonly light: "#B3B3B3";
+        readonly default: "#121212";
+        readonly strong: "#121212";
         readonly onSurface: "#FFFFFF";
     };
 };
@@ -1036,7 +1117,7 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     /** border-radius 토큰 (기본값: "full") */
     radius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
     /**
-     * 위험한 액션 (삭제/취소 등) — 빨간 강조.
+     * 위험한 액션 (삭제/취소 등) - 빨간 강조.
      * filled: 빨간 bg, outline: 빨간 텍스트/border, tonal: 빨간 wash.
      */
     danger?: boolean;
@@ -1049,7 +1130,8 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
  */
 declare const Button: ({ variant, size, leadingIcon, trailingIcon, fullWidth, radius, danger, className, children, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
-type CardVariant = "default" | "accent";
+type CardVariant = "default" | "accent" | "glass" | "outlined";
+type CardFooterAlign = "start" | "between" | "end";
 interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** 카드 상단에 표시할 제목 */
     heading?: React$1.ReactNode;
@@ -1061,8 +1143,19 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     padding?: "none" | "sm" | "md" | "lg";
     /** 테두리 표시 여부 (기본값: false) */
     bordered?: boolean;
-    /** 카드 variant — "accent"는 navy bg + white text (강조 카드) */
+    /**
+     * 카드 variant (기본값: "default")
+     * - "accent": inverted bg + white text (강조 카드)
+     * - "glass": 반투명 + backdrop blur (컬러/이미지 배경 위에 권장)
+     * - "outlined": 투명 bg + 테두리만 (shadow 무시)
+     */
     variant?: CardVariant;
+    /** hover 시 살짝 떠오르는 인터랙션 (기본값: false). 클릭 가능한 카드에 사용 */
+    interactive?: boolean;
+    /** 카드 하단 영역 - 액션 버튼 등 (구분선과 함께 표시) */
+    footer?: React$1.ReactNode;
+    /** footer 정렬 (기본값: "end") */
+    footerAlign?: CardFooterAlign;
 }
 /**
  * 카드 컴포넌트를 렌더링한다.
@@ -1070,7 +1163,7 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
  * @param props 카드 속성
  * @returns 렌더링된 카드 UI
  */
-declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, variant, className, children, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, variant, interactive, footer, footerAlign, className, children, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
 
 interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 체크박스 옆에 표시할 라벨 */
@@ -1278,7 +1371,7 @@ interface HeroAction {
 }
 type HeroHeight = "sm" | "md" | "lg" | "full";
 type HeroAlign = "left" | "center" | "right";
-type HeroOverlay = boolean | "dark" | "light" | "navy";
+type HeroOverlay = boolean | "dark" | "light";
 interface HeroProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "title"> {
     /** 히어로 높이 (기본값: "md"). sm=320 / md=480 / lg=640 / full=100vh */
     height?: HeroHeight;
@@ -1286,26 +1379,25 @@ interface HeroProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "title"> {
     align?: HeroAlign;
     /** 배경 이미지 URL (CSS background-image로 사용) */
     backgroundImage?: string;
-    /** 배경색 — backgroundImage 없을 때 또는 그 위에 색 적용 */
+    /** 배경색 - backgroundImage 없을 때 또는 그 위에 색 적용 */
     backgroundColor?: string;
     /**
      * 텍스트 대비를 위한 오버레이.
      * - `true`/"dark": 위→아래 검정 그라데이션
      * - "light": 흰색 그라데이션
-     * - "navy": Bigtablet brand navy 그라데이션 (marketing 강조)
      */
     overlay?: HeroOverlay;
     /** h1으로 렌더링되는 메인 제목 */
     title?: React$1.ReactNode;
     /** 제목 아래 부제목 */
     subtitle?: React$1.ReactNode;
-    /** Eyebrow 텍스트 — 제목 위에 작게 표시되는 카테고리/태그 */
+    /** Eyebrow 텍스트 - 제목 위에 작게 표시되는 카테고리/태그 */
     eyebrow?: React$1.ReactNode;
     /** CTA 영역 (Button 등) */
     children?: React$1.ReactNode;
-    /** 텍스트 색상 — 배경이 어두우면 흰색 권장 (기본값: "auto" — overlay가 dark면 white) */
+    /** 텍스트 색상 - 배경이 어두우면 흰색 권장 (기본값: "auto" - overlay가 dark면 white) */
     textColor?: "auto" | "inverse" | "default";
-    /** Primary CTA — 미지정 시 children으로 직접 Button 전달 가능 */
+    /** Primary CTA - 미지정 시 children으로 직접 Button 전달 가능 */
     primaryAction?: HeroAction;
     /** Secondary CTA */
     secondaryAction?: HeroAction;
@@ -1377,14 +1469,14 @@ interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {
 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;
+    /** 오버라인 (상단 작은 글씨). 문자열 또는 노드(강조/링크/아이콘) */
+    overline?: React$1.ReactNode;
+    /** 라벨 (주요 텍스트). 문자열 또는 노드(강조/링크/Badge 등) */
+    label: React$1.ReactNode;
+    /** 보조 텍스트 (라벨 아래). 문자열 또는 노드 */
+    supportingText?: React$1.ReactNode;
+    /** 메타데이터 (보조 정보). 문자열 또는 노드 */
+    metadata?: React$1.ReactNode;
     /** 왼쪽에 표시할 요소 (아이콘, 이미지, 체크박스 등) */
     leadingElement?: React$1.ReactNode;
     /** 오른쪽에 표시할 요소 (아이콘 버튼, 체크박스 등) */
@@ -1393,7 +1485,7 @@ interface ListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "on
     alignment?: "top" | "middle";
     /** 비활성화 상태 */
     disabled?: boolean;
-    /** 선택 상태 — accent.subtle 배경 + accent.default 좌측 인디케이터 */
+    /** 선택 상태 - accent.subtle 배경 + accent.default 좌측 인디케이터 */
     selected?: boolean;
     /** 클릭 시 콜백 */
     onClick?: (event: React$1.MouseEvent<HTMLDivElement>) => void;
@@ -1423,7 +1515,7 @@ interface MediaCardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "t
     heading?: React$1.ReactNode;
     /** 제목 시맨틱 태그 (기본값: "h3") */
     headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
-    /** Eyebrow — 제목 위 작은 라벨/카테고리 */
+    /** Eyebrow - 제목 위 작은 라벨/카테고리 */
     eyebrow?: React$1.ReactNode;
     /** 카드 그림자 (기본값: "sm") */
     shadow?: MediaCardShadow;
@@ -1431,7 +1523,7 @@ interface MediaCardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "t
     bordered?: boolean;
     /** 카드 클릭 가능 여부 (hover 강조 + cursor) */
     clickable?: boolean;
-    /** 메타 영역 (날짜/작성자/조회수 등) — 본문 아래 작은 텍스트 */
+    /** 메타 영역 (날짜/작성자/조회수 등) - 본문 아래 작은 텍스트 */
     meta?: React$1.ReactNode;
 }
 /**
@@ -1454,7 +1546,7 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
     width?: number | string;
     /** 모달 제목 (h2, heading_large_bold) */
     title?: React$1.ReactNode;
-    /** 제목 아래 본문 설명 — paragraph로 자동 wrap */
+    /** 제목 아래 본문 설명 - paragraph로 자동 wrap */
     description?: React$1.ReactNode;
     /** 하단 액션 영역 (Button들). 미지정 시 footer 영역 자체가 안 보임 */
     footer?: React$1.ReactNode;
@@ -1529,19 +1621,67 @@ declare const Pagination: ({ page, totalPages, onChange, prevLabel, nextLabel, }
 interface RadioProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 라디오 버튼 옆에 표시할 라벨 */
     label?: React$1.ReactNode;
-    /** 라디오 버튼 크기 (기본값: "md") */
+    /** 라디오 버튼 크기 (기본값: "md"). `RadioGroup` 안에서는 그룹 size 가 기본값. */
     size?: "sm" | "md" | "lg";
     /** 입력 요소 참조 */
     ref?: React$1.Ref<HTMLInputElement>;
 }
 /**
  * 라디오 버튼을 렌더링한다.
- * 크기별 클래스와 라벨을 조합해 UI를 구성한다.
+ * `RadioGroup` 안에서는 그룹 컨텍스트(name/value/size/disabled)를 자동 수신하고,
+ * 밖에서는 native radio 로 standalone 동작한다 (기존 동작 유지).
  * @param props 라디오 속성
  * @returns 렌더링된 라디오 UI
  */
 declare const Radio: {
-    ({ label, size, className, ref, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+    ({ label, size: sizeProp, className, ref, value, checked, onChange, name: nameProp, disabled: disabledProp, ...props }: RadioProps): react_jsx_runtime.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_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1571,7 +1711,7 @@ interface SpinnerProps {
 }
 /**
  * 스피너를 렌더링한다. 12개 bar 가 방사형으로 배치되어 페이드 인/아웃 으로 회전하는 효과.
- * Vercel/iOS 스타일 — 클래식 border-spin 보다 부드럽고 미니멀.
+ * Vercel/iOS 스타일 - 클래식 border-spin 보다 부드럽고 미니멀.
  * @param props 스피너 속성
  * @returns 렌더링된 스피너 요소
  */
@@ -1579,7 +1719,7 @@ declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => react_jsx_runtime.
 
 type TableSize = "sm" | "md" | "lg";
 interface TableColumn<T extends object> {
-    /** 컬럼 식별자 — `data[key]` 자동 렌더링에도 쓰임 */
+    /** 컬럼 식별자 - `data[key]` 자동 렌더링에도 쓰임 */
     key: string;
     /** thead에 표시할 헤더 텍스트 */
     header: React$1.ReactNode;
@@ -1599,7 +1739,7 @@ interface TableProps<T extends object> {
     keyExtractor: (item: T, index: number) => string | number;
     /** 데이터 없을 때 표시 (기본값: "데이터가 없습니다") */
     emptyMessage?: React$1.ReactNode;
-    /** 로딩 상태 — 헤더 유지, 바디만 스켈레톤 */
+    /** 로딩 상태 - 헤더 유지, 바디만 스켈레톤 */
     isLoading?: boolean;
     /** 로딩 시 스켈레톤 행 개수 (기본값: 5) */
     skeletonRows?: number;
@@ -1661,6 +1801,12 @@ interface ThemeProviderProps {
 declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
 
 type TextFieldSize = "sm" | "md" | "lg";
+/**
+ * IME 조합(한글/일본어/중국어) 중 외부 콜백 처리 전략.
+ * - `delayed`: 조합 완료 후에만 `onChangeAction` 호출 (기본 - 폼 제출/검증용).
+ * - `immediate`: 조합 중에도 매 입력마다 즉시 호출 (실시간 검색/필터/미리보기용).
+ */
+type ImeStrategy = "delayed" | "immediate";
 interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
     /** 입력 필드 크기 (기본값: "md") */
     size?: TextFieldSize;
@@ -1680,8 +1826,13 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
     clearable?: boolean;
     /** 컨테이너 전체 너비 차지 여부 */
     fullWidth?: boolean;
-    /** 값 변경 시 호출되는 콜백 (IME 조합 완료 후 실행) */
+    /** 값 변경 시 호출되는 콜백. 호출 시점은 `imeStrategy` 에 따름 (기본: 조합 완료 후) */
     onChangeAction?: (value: string) => void;
+    /**
+     * IME 조합 중 콜백 전략 (기본값: "delayed").
+     * 실시간 구독(검색/필터) 이 필요하면 "immediate" - 한글 조합 중에도 매 입력 즉시 반영.
+     */
+    imeStrategy?: ImeStrategy;
     /** 제어형 입력 값 */
     value?: string;
     /** 비제어형 초기 입력 값 */
@@ -1699,7 +1850,66 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
  * @returns 렌더링된 텍스트 필드 UI
  */
 declare const TextField: {
-    ({ id, label, showLabel, supportingText, error, leadingIcon, trailingIcon, clearable, fullWidth, size, className, onChangeAction, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+    ({ id, label, showLabel, supportingText, error, leadingIcon, trailingIcon, clearable, fullWidth, size, className, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type TextareaSize = TextFieldSize;
+type TextareaResize = "none" | "vertical" | "both";
+interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "size" | "onChange" | "value" | "defaultValue" | "rows"> {
+    /** 입력 필드 크기 (기본값: "md") */
+    size?: TextareaSize;
+    /** 입력 필드 위에 표시할 라벨 텍스트 */
+    label?: string;
+    /** 라벨 표시 여부 (기본값: true) */
+    showLabel?: boolean;
+    /** 입력 필드 아래에 표시할 도움말 텍스트 */
+    supportingText?: string;
+    /** 에러 상태 여부 */
+    error?: boolean;
+    /** 컨테이너 전체 너비 차지 여부 */
+    fullWidth?: boolean;
+    /** 값 변경 시 호출되는 콜백. 호출 시점은 `imeStrategy` 에 따름 (기본: 조합 완료 후) */
+    onChangeAction?: (value: string) => void;
+    /**
+     * IME 조합 중 콜백 전략 (기본값: "delayed").
+     * 실시간 구독이 필요하면 "immediate" - 한글 조합 중에도 매 입력 즉시 반영.
+     */
+    imeStrategy?: ImeStrategy;
+    /** 제어형 입력 값 */
+    value?: string;
+    /** 비제어형 초기 입력 값 */
+    defaultValue?: string;
+    /** 입력값 변환 함수 */
+    transformValue?: (value: string) => string;
+    /**
+     * 고정 행 수 (기본 3). `minRows`/`maxRows` 미지정 시 고정 높이.
+     * auto-grow 를 원하면 `minRows`/`maxRows` 사용.
+     */
+    rows?: number;
+    /** auto-grow 최소 행 수. 지정 시 내용에 따라 높이 자동 증가 */
+    minRows?: number;
+    /** auto-grow 최대 행 수. 초과 시 스크롤 */
+    maxRows?: number;
+    /** 글자 수 카운터 표시 (maxLength 와 함께 사용 권장) */
+    showCounter?: boolean;
+    /** resize 핸들 제어 (기본 "vertical") */
+    resize?: TextareaResize;
+    /** textarea 요소 참조 */
+    ref?: React$1.Ref<HTMLTextAreaElement>;
+}
+/**
+ * 멀티라인 텍스트 입력. `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, onChangeAction, imeStrategy, value, defaultValue, transformValue, rows, minRows, maxRows, showCounter, resize, maxLength, ref, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1812,7 +2022,7 @@ interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
 declare const Container: ({ size, center, as: Tag, className, children, ...props }: ContainerProps) => react_jsx_runtime.JSX.Element;
 
 type SectionSpacing = "xs" | "sm" | "md" | "lg" | "xl";
-type SectionBg = "default" | "dim" | "accent" | "navy" | "transparent";
+type SectionBg = "default" | "dim" | "accent" | "inverted" | "transparent";
 interface SectionProps extends React$1.HTMLAttributes<HTMLElement> {
     /**
      * 수직 패딩 크기
@@ -1822,7 +2032,7 @@ interface SectionProps extends React$1.HTMLAttributes<HTMLElement> {
     spacing?: SectionSpacing;
     /**
      * 배경색 변형
-     * - default: bg-solid | dim: bg-solid-dim | accent: accent-subtle | navy: accent-default
+     * - default: bg-solid | dim: bg-solid-dim | accent: accent-subtle | inverted: accent-default (검정/흰색 반전)
      * @default "default"
      */
     bg?: SectionBg;
@@ -1910,7 +2120,7 @@ interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
     rowGap?: GridGap;
     /** 열 간격 (gap을 override) */
     colGap?: GridGap;
-    /** 반응형 — compact(< 600px)에서 강제 1열 (기본 true) */
+    /** 반응형 - compact(< 600px)에서 강제 1열 (기본 true) */
     singleColOnMobile?: boolean;
     /** 렌더링할 HTML 요소 */
     as?: React$1.ElementType;
@@ -1934,4 +2144,4 @@ interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const Grid: ({ cols, minColWidth, gap, rowGap, colGap, singleColOnMobile, as: Tag, className, children, style, ...props }: GridProps) => react_jsx_runtime.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 CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Container, type ContainerProps, type ContainerSize, DatePicker, type DatePickerProps, Divider, type DividerProps, Dropdown, type DropdownOption, type DropdownProps, type DropdownSize, EmptyState, type EmptyStateProps, 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, 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, Radio, 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, Tabs, type TabsProps, type TabsSize, type TabsVariant, TextField, type TextFieldProps, 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, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, 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, DatePicker, type DatePickerProps, Divider, type DividerProps, 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, 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, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };