@bigtablet/design-system 2.5.0 → 3.1.0

package/dist/index.d.ts

@@ -1,12 +1,531 @@
 import * as React$1 from 'react';
-import React__default from 'react';
+import * as _react_spring_web from '@react-spring/web';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LucideProps, LucideIcon } from 'lucide-react';
+export { LucideIcon, LucideProps } from 'lucide-react';
+
+/**
+ * ClassValue type for cn() utility
+ * Supports strings, numbers, booleans, arrays, and conditional objects
+ */
+type ClassValue = string | number | boolean | undefined | null | ClassValue[] | Record<string, boolean | undefined | null>;
+/**
+ * Utility for combining class names (clsx-like)
+ * Filters out falsy values and joins with space
+ *
+ * @example
+ * // String arguments
+ * cn("btn", "btn--primary")
+ * // "btn btn--primary"
+ *
+ * @example
+ * // Conditional with boolean
+ * cn("btn", isActive && "btn--active")
+ * // "btn btn--active" (if isActive is true)
+ *
+ * @example
+ * // Object syntax
+ * cn("btn", { "btn--active": isActive, "btn--disabled": isDisabled })
+ * // "btn btn--active" (if isActive is true, isDisabled is false)
+ *
+ * @example
+ * // Array syntax
+ * cn(["btn", "btn--primary"], className)
+ * // "btn btn--primary custom-class"
+ */
+declare const cn: (...classes: ClassValue[]) => string;
+
+declare function useFocusTrap(containerRef: React$1.RefObject<HTMLElement | null>, isActive: boolean): void;
+
+/**
+ * 마우스 hover 시 spring 기반 lift 효과를 만든다. 카드/CTA 강조에 사용.
+ *
+ * @example
+ * ```tsx
+ * const { style, bind } = useSpringHover();
+ * return <animated.div style={style} {...bind}>...</animated.div>;
+ * ```
+ */
+declare function useSpringHover({ scale, lift, }?: {
+    /** hover 시 scale 비율 (기본 1.02) */
+    scale?: number;
+    /** hover 시 Y축 이동 px (기본 -2 = 살짝 떠오름) */
+    lift?: number;
+}): {
+    style: {
+        transform: _react_spring_web.SpringValue<string>;
+    };
+    bind: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onFocus: () => void;
+        onBlur: () => void;
+    };
+};
+
+/**
+ * 컴포넌트가 마운트/언마운트되거나 visible 상태가 토글될 때 자연스러운 진입/퇴출을 만든다.
+ * Vercel/Linear 스타일의 부드러운 spring 모션.
+ *
+ * @example
+ * ```tsx
+ * const style = useSpringPresence({ visible: isOpen });
+ * return <animated.div style={style}>...</animated.div>;
+ * ```
+ */
+declare function useSpringPresence({ visible, from, onExitComplete, }: {
+    /** 보이는 상태인지 — false면 사라짐 모션 */
+    visible: boolean;
+    /** 진입 시 시작 transform (기본: 아래에서 살짝 올라옴) */
+    from?: string;
+    /** exit 모션 완료 시 호출 — 부모에서 unmount 트리거용 */
+    onExitComplete?: () => void;
+}): {
+    opacity: _react_spring_web.SpringValue<number>;
+    transform: _react_spring_web.SpringValue<string>;
+};
+
+interface AccordionItem {
+    key: string;
+    title: React$1.ReactNode;
+    content: React$1.ReactNode;
+    disabled?: boolean;
+}
+interface AccordionProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 아이템 목록 */
+    items: AccordionItem[];
+    /** 여러 개 동시에 펼침 허용 (기본 false — 한 번에 하나) */
+    multiple?: boolean;
+    /** 기본으로 펼쳐진 키들 */
+    defaultOpenKeys?: string[];
+    /** 제어형: 펼쳐진 키들 */
+    openKeys?: string[];
+    /** 펼침/접힘 콜백 */
+    onChange?: (openKeys: string[]) => void;
+}
+/**
+ * 펼침/접힘 영역. FAQ, 설정 그룹, details 패턴.
+ *
+ * @example
+ * ```tsx
+ * <Accordion items={faqItems} multiple />
+ * ```
+ */
+declare const Accordion: ({ items, multiple, defaultOpenKeys, openKeys: controlledKeys, onChange, className, ...props }: AccordionProps) => react_jsx_runtime.JSX.Element;
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+type AvatarShape = "circle" | "square";
+interface AvatarProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+    /** 이미지 URL */
+    src?: string;
+    /** alt 텍스트 (이미지일 때) 또는 initials 추출용 이름 */
+    name?: string;
+    /** 크기 (기본값: "md"). xs=24 / sm=32 / md=40 / lg=48 / xl=64 */
+    size?: AvatarSize;
+    /** 모양 (기본값: "circle") */
+    shape?: AvatarShape;
+    /** 색상 (기본값: navy accent) */
+    bgColor?: string;
+}
+/**
+ * 사용자 프로필 아바타. 이미지 없으면 이름의 initials로 fallback.
+ *
+ * @example
+ * ```tsx
+ * <Avatar src="/me.jpg" name="박상민" />
+ * <Avatar name="박상민" /> // initials "박"
+ * <Avatar name="Sangmin Park" size="lg" /> // initials "SP"
+ * ```
+ */
+declare const Avatar: ({ src, name, size, shape, bgColor, className, style, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = "accent" | "neutral" | "info" | "success" | "warning" | "error";
+type BadgeShape = "dot" | "count" | "label";
+type BadgeSize = "sm" | "md" | "lg";
+interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+    /** 색상 variant (기본값: "accent") */
+    variant?: BadgeVariant;
+    /** 모양 (기본값: "label"). dot=점만 / count=숫자 / label=텍스트 */
+    shape?: BadgeShape;
+    /**
+     * 사이즈 (기본값: "md"). 웹 기본.
+     * - sm: 컴팩트 (아이콘 위 알림 dot, 모바일)
+     * - md: 일반 웹 (admin/marketing)
+     * - lg: 강조 (Hero 위 배지, 카테고리)
+     */
+    size?: BadgeSize;
+    /** count shape 일 때 표시할 숫자. max를 넘으면 "max+" */
+    count?: number;
+    /** count 최댓값 (기본 99) */
+    max?: number;
+}
+/**
+ * 작은 상태 표시. 카운트/dot/라벨 3가지 모양.
+ *
+ * @example
+ * ```tsx
+ * <Badge shape="dot" variant="error" />
+ * <Badge shape="count" count={5} />
+ * <Badge>New</Badge>
+ * ```
+ */
+declare const Badge: ({ variant, shape, size, count, max, className, children, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
+interface BottomNavProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChange"> {
+    /** 스크린 리더 레이블 (기본 "주요 메뉴") */
+    ariaLabel?: string;
+    /** 2–5 개의 `BottomNavItem` */
+    children: React$1.ReactNode;
+}
+/**
+ * 모바일 하단 네비게이션 바.
+ *
+ * `position: fixed; bottom: 0` 으로 viewport 하단 고정. iOS 홈 인디케이터 영역
+ * (`env(safe-area-inset-bottom)`) 자동 패딩. 본문이 가려지지 않게 페이지 끝에
+ * `<BottomNavSpacer />` 를 깔거나 `--bt-bottom-nav-height` CSS 변수로 padding 계산.
+ *
+ * @example
+ * ```tsx
+ * <BottomNav>
+ *   <BottomNavItem icon={<Home />} label="주문" active />
+ *   <BottomNavItem icon={<Menu />} label="메뉴" />
+ *   <BottomNavItem icon={<Chart />} label="매출" />
+ * </BottomNav>
+ * <BottomNavSpacer />
+ * ```
+ */
+declare const BottomNav: ({ ariaLabel, className, children, ...props }: BottomNavProps) => react_jsx_runtime.JSX.Element;
+interface BottomNavItemCommon {
+    /** 아이콘 (필수) */
+    icon: React$1.ReactNode;
+    /** 라벨 텍스트 (필수, 짧게 — 2–4자) */
+    label: string;
+    /** 활성 상태 */
+    active?: boolean;
+    /** 아이콘 우상단 dot/카운트 (Badge 등) */
+    badge?: React$1.ReactNode;
+}
+type BottomNavItemButton = BottomNavItemCommon & {
+    as?: "button";
+    href?: never;
+} & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children">;
+type BottomNavItemAnchor = BottomNavItemCommon & {
+    as: "a";
+    href: string;
+    /** anchor 에 native `disabled` 없음 — `aria-disabled` + `preventDefault` 로 처리. */
+    disabled?: boolean;
+} & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "type">;
+type BottomNavItemProps = BottomNavItemButton | BottomNavItemAnchor;
+/**
+ * `BottomNav` 의 항목. icon + label 수직 스택.
+ * active 시 `aria-current="page"` 자동 부여.
+ */
+declare const BottomNavItem: (props: BottomNavItemProps) => react_jsx_runtime.JSX.Element;
+/**
+ * 페이지 본문 끝에 두면 `BottomNav` 가 콘텐츠를 가리지 않게 빈 공간 확보.
+ * `--bt-bottom-nav-height` (+ safe-area) 만큼 height.
+ */
+declare const BottomNavSpacer: ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+
+interface BreadcrumbItem {
+    /** 표시 텍스트 */
+    label: React$1.ReactNode;
+    /** 클릭 시 이동할 URL. 없으면 현재 페이지로 간주 */
+    href?: string;
+    /** 클릭 콜백 (href 없이 사용 가능) */
+    onClick?: (e: React$1.MouseEvent<HTMLElement>) => void;
+}
+interface BreadcrumbProps extends React$1.HTMLAttributes<HTMLElement> {
+    /** 경로 아이템 배열. 마지막은 현재 페이지로 간주 */
+    items: BreadcrumbItem[];
+    /** 구분자 (기본값: ChevronRight 아이콘) */
+    separator?: React$1.ReactNode;
+}
+/**
+ * 페이지 위계 네비게이션. 마지막 아이템은 현재 페이지로 표시.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb items={[
+ *   { label: "홈", href: "/" },
+ *   { label: "블로그", href: "/blog" },
+ *   { label: "글 제목" },
+ * ]} />
+ * ```
+ */
+declare const Breadcrumb: ({ items, separator, className, ...props }: BreadcrumbProps) => react_jsx_runtime.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_jsx_runtime.JSX.Element;
+
+interface MenuItem {
+    key: string;
+    label: React$1.ReactNode;
+    icon?: React$1.ReactNode;
+    disabled?: boolean;
+    /** 클릭 시 호출 — 자동으로 메뉴 닫힘 */
+    onSelect?: () => void;
+    /** destructive 액션 (삭제 등) — 빨간 텍스트 */
+    destructive?: boolean;
+}
+interface MenuProps {
+    /** 메뉴 아이템들 */
+    items: MenuItem[];
+    /** trigger 요소 — 클릭 시 메뉴 열림 */
+    trigger: React$1.ReactElement;
+    /** 정렬 (기본 "start") */
+    align?: "start" | "end";
+}
+/**
+ * 컨텍스트 메뉴. trigger 클릭 시 아래에 메뉴 표시. 외부 클릭/Esc로 닫힘.
+ * Form Dropdown과 다름 — 액션 메뉴 (Edit/Delete 등).
+ *
+ * @example
+ * ```tsx
+ * <Menu
+ *   trigger={<IconButton icon={<MoreIcon />} />}
+ *   items={[
+ *     { key: "edit", label: "편집", onSelect: handleEdit },
+ *     { key: "del", label: "삭제", onSelect: handleDel, destructive: true },
+ *   ]}
+ * />
+ * ```
+ */
+declare const Menu: ({ items, trigger, align }: MenuProps) => react_jsx_runtime.JSX.Element;
+
+type NavBarVariant = "default" | "transparent" | "accent";
+type NavBarLayout = "contained" | "fluid";
+interface NavBarLocaleOption {
+    value: string;
+    label: string;
+}
+interface NavBarLocaleConfig {
+    /** 현재 선택된 locale 값 (예: "ko") */
+    current: string;
+    /** 가능한 옵션 */
+    options: NavBarLocaleOption[];
+    /** locale 변경 콜백 */
+    onChange: (next: string) => void;
+    /** 표시 라벨 — 기본은 옵션의 label, 미지정 시 short code 표시 */
+    hideLabel?: boolean;
+}
+interface NavBarProps extends React$1.HTMLAttributes<HTMLElement> {
+    /** 왼쪽 brand/로고 영역 */
+    brand?: React$1.ReactNode;
+    /** 중앙 또는 우측의 검색 영역 (TextField 등) */
+    searchSlot?: React$1.ReactNode;
+    /** 오른쪽 액션 영역 (IconButton, primary CTA Button 등) */
+    actions?: React$1.ReactNode;
+    /** i18n locale switcher (Globe 아이콘 + 드롭다운) */
+    locale?: NavBarLocaleConfig;
+    /** 우측 프로필 영역 (Avatar/ProfileButton) */
+    profile?: React$1.ReactNode;
+    /** actions / locale 와 profile 사이 수직 divider 표시 (기본 true, profile 있을 때만 표시) */
+    divider?: boolean;
+    /** 시각 variant — default(흰 bg + 회색 border), transparent(투명, hero 위에), accent(navy bg) */
+    variant?: NavBarVariant;
+    /** 레이아웃 — contained(max 1200, marketing) / fluid(full width, admin/dashboard) */
+    layout?: NavBarLayout;
+    /** sticky 고정 여부 */
+    sticky?: boolean;
+}
+/**
+ * 페이지 상단 네비게이션 바. 마케팅/B2C 헤더 + admin/dashboard 헤더 둘 다 지원.
+ *
+ * @example marketing
+ * ```tsx
+ * <NavBar brand={<Logo />} actions={<Button>로그인</Button>}>
+ *   <NavLink href="/about">About</NavLink>
+ *   <NavLink href="/blog" active>Blog</NavLink>
+ * </NavBar>
+ * ```
+ *
+ * @example admin/dashboard
+ * ```tsx
+ * <NavBar
+ *   brand={<OrgButton />}
+ *   searchSlot={<TextField placeholder="검색" />}
+ *   actions={<IconButton icon={Calendar} aria-label="캘린더" />}
+ *   locale={{ current: "ko", options: [...], onChange: setLocale }}
+ *   profile={<Avatar name="박상민" />}
+ * />
+ * ```
+ */
+declare const NavBar: ({ brand, searchSlot, actions, locale, profile, divider, variant, layout, sticky, className, children, ...props }: NavBarProps) => react_jsx_runtime.JSX.Element;
+interface NavLinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** 현재 활성 페이지 여부 */
+    active?: boolean;
+}
+declare const NavLink: ({ active, className, children, ...props }: NavLinkProps) => react_jsx_runtime.JSX.Element;
+
+type SidebarMode = "auto" | "static";
+interface SidebarProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChange"> {
+    /** 상단 brand 영역 (펼친 상태 로고) */
+    header?: React$1.ReactNode;
+    /** collapsed 상태 헤더 (보통 favicon). 미지정 시 collapsed 에서도 `header` 사용. */
+    headerCollapsed?: React$1.ReactNode;
+    /** 하단 영역 (사용자/설정/로그아웃 등) */
+    footer?: React$1.ReactNode;
+    /** collapsed 상태 (controlled) */
+    collapsed?: boolean;
+    /** collapsed 초기값 (uncontrolled). `collapsed` 미지정 시 사용. */
+    defaultCollapsed?: boolean;
+    /** collapsed 변경 콜백 (controlled/uncontrolled 모두에서 호출) */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** 내장 collapse 토글 버튼 표시 (기본 true) */
+    collapsible?: boolean;
+    /** 토글 버튼 a11y label (기본 "사이드바 토글") */
+    toggleLabel?: string;
+    /** 너비 (기본 240px) */
+    width?: number;
+    /** collapsed 너비 (기본 64px) */
+    collapsedWidth?: number;
+    /**
+     * 반응형 모드 (기본 `"auto"`).
+     * - `"auto"`: viewport `< 600px` 에서 자동으로 하단 bar 로 변신.
+     * - `"static"`: 어떤 viewport 에서도 좌측 rail 유지 (admin desktop-only).
+     */
+    mode?: SidebarMode;
+}
+/**
+ * admin/dashboard 좌측 네비게이션.
+ * `SidebarItem` + `SidebarSection` 과 함께 사용.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   header={<Logo />}
+ *   headerCollapsed={<Favicon />}
+ *   defaultCollapsed={false}
+ * >
+ *   <SidebarItem icon={<HomeIcon />} active>홈</SidebarItem>
+ * </Sidebar>
+ * ```
+ */
+declare const Sidebar: ({ header, headerCollapsed, footer, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, toggleLabel, width, collapsedWidth, mode, className, children, style, ...props }: SidebarProps) => react_jsx_runtime.JSX.Element;
+interface SidebarItemCommon {
+    /** 왼쪽 아이콘 */
+    icon?: React$1.ReactNode;
+    /** 현재 활성 상태 */
+    active?: boolean;
+    /** 오른쪽 trailing (Badge 등) */
+    trailing?: React$1.ReactNode;
+}
+type SidebarItemButton = SidebarItemCommon & {
+    as?: "button";
+    href?: never;
+} & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
+type SidebarItemAnchor = SidebarItemCommon & {
+    as: "a";
+    href: string;
+} & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "type">;
+type SidebarItemProps = SidebarItemButton | SidebarItemAnchor;
+declare const SidebarItem: (props: SidebarItemProps) => react_jsx_runtime.JSX.Element;
+interface SidebarSectionProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** 섹션 라벨 (collapsed 상태에선 hidden) */
+    label?: string;
+}
+/** SidebarItem 그룹 라벨. collapsed에선 sr-only로 숨김. */
+declare const SidebarSection: ({ label, className, children, ...props }: SidebarSectionProps) => react_jsx_runtime.JSX.Element;
+
+type TabsVariant = "line" | "fills";
+type TabsSize = "sm" | "md";
+interface TabsProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 제어형: 현재 활성 tab의 value */
+    value?: string;
+    /** 비제어형: 초기 활성 tab의 value */
+    defaultValue?: string;
+    /** value 변경 콜백 */
+    onValueChange?: (value: string) => void;
+    /** 시각 스타일 (기본값: "line"). line=하단 underline, pills=둥근 박스 */
+    variant?: TabsVariant;
+    /** 크기 (기본값: "md") */
+    size?: TabsSize;
+}
+/**
+ * 탭 컨테이너. TabList + TabPanel을 자식으로 받음.
+ * 컨텍스트로 value/onValueChange를 자식들에게 공유.
+ * - 제어형: `value` + `onValueChange`
+ * - 비제어형: `defaultValue`
+ */
+declare const Tabs: ({ value: controlledValue, defaultValue, onValueChange, variant, size, className, children, ...props }: TabsProps) => react_jsx_runtime.JSX.Element;
+interface TabListProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** 스크린리더 라벨 */
+    ariaLabel?: string;
+}
+declare const TabList: ({ ariaLabel, className, children, ...props }: TabListProps) => react_jsx_runtime.JSX.Element;
+interface TabProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    /** 이 tab의 value */
+    value: string;
+}
+declare const Tab: ({ value, className, children, onClick, ...props }: TabProps) => react_jsx_runtime.JSX.Element;
+interface TabPanelProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** 이 panel을 활성화할 tab의 value */
+    value: string;
+    /** 비활성 panel을 unmount 할지 (기본 true). false면 display: none으로 유지 */
+    unmountInactive?: boolean;
+}
+declare const TabPanel: ({ value, unmountInactive, className, children, ...props }: TabPanelProps) => react_jsx_runtime.JSX.Element | null;
+
+type TooltipPlacement = "top" | "bottom" | "left" | "right";
+interface TooltipProps {
+    /** 툴팁 콘텐츠 */
+    content: React$1.ReactNode;
+    /** 위치 (기본값: "top") */
+    placement?: TooltipPlacement;
+    /** hover 후 지연 시간 ms (기본 200) */
+    delay?: number;
+    /** 비활성화 — children만 그대로 렌더, 툴팁 없음 */
+    disabled?: boolean;
+    children: React$1.ReactElement;
+}
+/**
+ * hover/focus 시 추가 정보를 보여주는 툴팁. react-spring fade+slide entrance.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="저장하기">
+ *   <IconButton icon={<SaveIcon />} />
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: ({ content, placement, delay, disabled, children, }: TooltipProps) => react_jsx_runtime.JSX.Element;
 
 declare const a11y: {
     readonly focusRing: "0 0 0 3px rgba(0, 0, 0, 0.15)";
     readonly focusRingError: "0 0 0 3px rgba(239, 68, 68, 0.15)";
     readonly focusRingSuccess: "0 0 0 3px rgba(16, 185, 129, 0.15)";
     readonly tapMinSize: "44px";
+    readonly tapTarget: {
+        readonly dense: "32px";
+        readonly compact: "40px";
+        readonly comfortable: "48px";
+        readonly spacious: "56px";
+    };
 };
 
 declare const baseBorderWidth: {
@@ -17,6 +536,7 @@ declare const baseBorderWidth: {
 declare const borderWidth: {
     readonly none: "0px";
     readonly standard: "1px";
+    readonly thick: "2px";
     readonly indicator: "2px";
 };
 
@@ -32,6 +552,7 @@ declare const baseColors: {
     readonly blue600: "#1A73E8";
     readonly neutral0: "#FFFFFF";
     readonly neutral50: "#F4F4F4";
+    readonly neutral100: "#F2F2F2";
     readonly neutral200: "#E5E5E5";
     readonly neutral300: "#999999";
     readonly neutral400: "#B3B3B3";
@@ -44,6 +565,16 @@ declare const baseColors: {
     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)";
@@ -93,6 +624,14 @@ declare const colors: {
         readonly warning: "#F59E0B";
         readonly info: "#3B82F6";
     };
+    readonly accent: {
+        readonly subtle: "#F2F5F8";
+        readonly muted: "#DDE3E9";
+        readonly light: "#7AA5D2";
+        readonly default: "#47555E";
+        readonly strong: "#303841";
+        readonly onSurface: "#FFFFFF";
+    };
 };
 
 declare const elevation: {
@@ -114,6 +653,14 @@ declare const motion: {
         readonly slide: "0.25s ease-in-out";
         readonly scale: "0.2s cubic-bezier(0.2, 0.8, 0.2, 1)";
         readonly state: "0.18s ease-in-out";
+        readonly enterFast: "0.15s cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly enterBase: "0.2s cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly exitFast: "0.12s cubic-bezier(0.4, 0, 1, 1)";
+        readonly exitBase: "0.15s cubic-bezier(0.4, 0, 1, 1)";
+    };
+    readonly easing: {
+        readonly enter: "cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly exit: "cubic-bezier(0.4, 0, 1, 1)";
     };
 };
 
@@ -226,6 +773,7 @@ declare const baseTypography: {
     };
     readonly letterSpacing: {
         readonly normal: "0px";
+        readonly tight: "0.32px";
     };
 };
 declare const typography: {
@@ -448,8 +996,17 @@ interface AlertOptions {
     cancelText?: string;
     /** 취소 버튼 표시 여부 (기본값: false) */
     showCancel?: boolean;
+    /**
+     * Destructive 액션 여부. true 시 확인 버튼이 빨간 강조(danger)로 표시되고
+     * 취소 버튼은 outline으로 유지. 위험성을 시각적으로 표현해 사용자가 인지 가능.
+     * (Material/shadcn/Radix 표준 패턴)
+     * @default false
+     */
+    destructive?: boolean;
     /** 액션 버튼 정렬 (기본값: "right") */
     actionsAlign?: AlertActionsAlign;
+    /** 변형 아이콘 표시 여부 (기본값: false). 원하면 명시적으로 켜기 */
+    showIcon?: boolean;
     /** 확인 버튼 클릭 시 호출되는 콜백 */
     onConfirm?: () => void;
     /** 취소 버튼 클릭 시 호출되는 콜백 */
@@ -458,24 +1015,13 @@ interface AlertOptions {
 interface AlertContextValue {
     showAlert: (options: AlertOptions) => void;
 }
-/**
- * AlertContext를 사용하는 훅.
- * Provider 외부에서 호출되면 오류를 던진다.
- * @returns alert 컨트롤러
- */
 declare const useAlert: () => AlertContextValue;
-/**
- * 알림 모달을 제어하는 Provider를 렌더링한다.
- * 내부 상태를 통해 AlertModal 표시와 확인/취소 흐름을 관리한다.
- * @param props Provider 속성
- * @returns 렌더링된 Provider와 모달
- */
 declare const AlertProvider: React$1.FC<{
     children: React$1.ReactNode;
 }>;
 
 type ButtonVariant = "filled" | "tonal" | "outline" | "text";
-type ButtonSize = "sm" | "md" | "xl";
+type ButtonSize = "sm" | "md" | "lg" | "xl";
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     /** 버튼 스타일 변형 (기본값: "filled") */
     variant?: ButtonVariant;
@@ -489,15 +1035,21 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     fullWidth?: boolean;
     /** border-radius 토큰 (기본값: "full") */
     radius?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    /**
+     * 위험한 액션 (삭제/취소 등) — 빨간 강조.
+     * filled: 빨간 bg, outline: 빨간 텍스트/border, tonal: 빨간 wash.
+     */
+    danger?: boolean;
 }
 /**
  * 버튼을 렌더링한다.
- * Figma DS 기준 4가지 variant(filled/tonal/outline/text)와 3가지 size(sm/md/xl)를 지원한다.
+ * Figma DS 기준 4가지 variant(filled/tonal/outline/text)와 4가지 size(sm/md/lg/xl)를 지원한다.
  * @param props 버튼 속성
  * @returns 렌더링된 버튼 요소
  */
-declare const Button: ({ variant, size, leadingIcon, trailingIcon, fullWidth, radius, className, children, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ variant, size, leadingIcon, trailingIcon, fullWidth, radius, danger, className, children, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
+type CardVariant = "default" | "accent";
 interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** 카드 상단에 표시할 제목 */
     heading?: React$1.ReactNode;
@@ -509,8 +1061,8 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     padding?: "none" | "sm" | "md" | "lg";
     /** 테두리 표시 여부 (기본값: false) */
     bordered?: boolean;
-    /** hover 시 살짝 떠오르는 효과 (기본값: false) */
-    hoverable?: boolean;
+    /** 카드 variant — "accent"는 navy bg + white text (강조 카드) */
+    variant?: CardVariant;
 }
 /**
  * 카드 컴포넌트를 렌더링한다.
@@ -518,7 +1070,7 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
  * @param props 카드 속성
  * @returns 렌더링된 카드 UI
  */
-declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, hoverable, className, children, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, variant, className, children, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
 
 interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 체크박스 옆에 표시할 라벨 */
@@ -541,26 +1093,34 @@ declare const Checkbox: {
     displayName: string;
 };
 
-type ChipType = "basic" | "input" | "filter";
-interface ChipProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "onClick"> {
-    /** 칩 유형 (기본값: "basic") */
+type ChipType = "basic" | "input" | "filter" | "static";
+type ChipSize = "sm" | "md";
+type ChipTone = "default" | "accent" | "info" | "success" | "warning" | "error";
+interface ChipProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClick"> {
+    /** 칩 유형 (기본값: "basic"). `static`은 비인터랙티브 라벨 (구 Tag 대체) */
     type?: ChipType;
+    /** 칩 크기 (미지정 시 기본 32px). "sm"=24px, "md"=28px */
+    size?: ChipSize;
+    /** 색조 (type=`static`에서만 적용). 카테고리/상태 라벨 색 구분 */
+    tone?: ChipTone;
     /** 라벨 텍스트 */
     label: string;
     /** 선택 상태 */
     selected?: boolean;
-    /** 삭제 가능 여부 (input 타입에서만 사용) */
+    /** 삭제 가능 여부 (input / static 타입에서 사용) */
     removable?: boolean;
     /** 비활성화 상태 */
     disabled?: boolean;
     /** 팝업 열림 상태 (filter 타입에서 aria-expanded로 사용) */
     open?: boolean;
+    /** 왼쪽 아이콘 (static 타입에서 사용) */
+    leadingIcon?: React$1.ReactNode;
     /** 칩 클릭 시 콜백 */
-    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
     /** 삭제 버튼 클릭 시 콜백 */
     onRemove?: () => void;
 }
-declare const Chip: ({ type, label, selected, removable, disabled, open, onClick, onRemove, className, ...props }: ChipProps) => react_jsx_runtime.JSX.Element;
+declare const Chip: ({ type, size, tone, label, selected, removable, disabled, open, leadingIcon, onClick, onRemove, className, ...props }: ChipProps) => react_jsx_runtime.JSX.Element;
 
 type DatePickerMode = "year-month" | "year-month-day";
 type SelectableRange = "all" | "until-today";
@@ -609,7 +1169,7 @@ interface DatePickerProps {
 }
 /**
  * 연/월/일 선택형 데이트 피커를 렌더링한다.
- * 내부적으로 DS Select 3개를 조합해 드롭다운 UX 일관성을 유지한다.
+ * 내부적으로 DS Dropdown 3개를 조합해 드롭다운 UX 일관성을 유지한다.
  */
 declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear: endYearProp, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
@@ -658,7 +1218,9 @@ interface DropdownProps {
     disabled?: boolean;
     /** 드롭다운 크기 (기본값: "md") */
     size?: DropdownSize;
-    /** 컨테이너 전체 너비 차지 여부 */
+    /**
+     * @deprecated Dropdown 은 이제 항상 부모 너비를 채웁니다. 인라인 사용 시 부모를 `inline-block + width` 로 감싸세요.
+     */
     fullWidth?: boolean;
     /** 루트 요소에 추가할 className */
     className?: string;
@@ -677,34 +1239,26 @@ interface DropdownProps {
  * @param props 드롭다운 속성
  * @returns 렌더링된 드롭다운 UI
  */
-declare const Dropdown: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, fullWidth, className, }: DropdownProps) => react_jsx_runtime.JSX.Element;
-
-type FABVariant = "primary" | "additive";
-interface FABProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** FAB 스타일 변형 (기본값: "primary") */
-    variant?: FABVariant;
-    /** 표시할 아이콘 */
-    icon: React$1.ReactNode;
-    /** 접근성 레이블 (스크린 리더용, 아이콘 전용 버튼이므로 필수) */
-    "aria-label": string;
-}
-/**
- * FAB(Floating Action Button)을 렌더링한다.
- * 화면에서 가장 중요한 단일 액션을 강조하는 플로팅 버튼이다.
- * @param props FAB 속성
- * @returns 렌더링된 FAB 요소
- */
-declare const FAB: ({ variant, icon, className, ...props }: FABProps) => react_jsx_runtime.JSX.Element;
+declare const Dropdown: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, className, }: DropdownProps) => react_jsx_runtime.JSX.Element;
 
+type FileInputVariant = "button" | "preview";
 interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
-    /** 파일 선택 버튼 라벨 텍스트 (기본값: "Choose file") */
+    /** 파일 선택 버튼 라벨 / preview variant 빈 상태 텍스트 (기본값: "Choose file") */
     label?: string;
     /** 파일 선택 시 호출되는 콜백 */
     onFiles?: (files: FileList | null) => void;
     /** 입력 필드 아래에 표시할 도움말 텍스트 (예: "PDF, DOC 파일만 업로드 가능합니다") */
     supportingText?: string;
-    /** 이미지 파일 선택 시 썸네일 미리보기 표시 여부 (기본값: false) */
+    /** 이미지 파일 선택 시 64×64 썸네일을 버튼 아래 나열 (variant="button" 전용) */
     preview?: boolean;
+    /**
+     * 표시 형태 (기본값: "button").
+     * - `"button"`: 일반 파일 선택 버튼. `preview=true` 면 아래에 작은 썸네일 표시.
+     * - `"preview"`: 큰 박스 안에 이미지 채움 (avatar / 이미지 업로더 패턴). 단일 이미지.
+     */
+    variant?: FileInputVariant;
+    /** variant="preview" 박스 크기 (px, 기본값: 160) */
+    previewSize?: number;
 }
 /**
  * 파일 입력 컴포넌트를 렌더링한다.
@@ -712,35 +1266,79 @@ interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
  * @param props 파일 입력 속성
  * @returns 렌더링된 파일 입력 UI
  */
-declare const FileInput: ({ label, onFiles, supportingText, preview, className, disabled, ...props }: FileInputProps) => react_jsx_runtime.JSX.Element;
+declare const FileInput: ({ label, onFiles, supportingText, preview, variant, previewSize, className, disabled, accept, onChange, ...props }: FileInputProps) => react_jsx_runtime.JSX.Element;
 
+interface HeroAction {
+    /** 버튼 라벨 */
+    label: React$1.ReactNode;
+    /** 클릭 핸들러 */
+    onClick?: () => void;
+    /** href 사용 시 anchor로 렌더링 */
+    href?: string;
+}
+type HeroHeight = "sm" | "md" | "lg" | "full";
+type HeroAlign = "left" | "center" | "right";
+type HeroOverlay = boolean | "dark" | "light" | "navy";
+interface HeroProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "title"> {
+    /** 히어로 높이 (기본값: "md"). sm=320 / md=480 / lg=640 / full=100vh */
+    height?: HeroHeight;
+    /** 텍스트 정렬 (기본값: "left") */
+    align?: HeroAlign;
+    /** 배경 이미지 URL (CSS background-image로 사용) */
+    backgroundImage?: string;
+    /** 배경색 — backgroundImage 없을 때 또는 그 위에 색 적용 */
+    backgroundColor?: string;
+    /**
+     * 텍스트 대비를 위한 오버레이.
+     * - `true`/"dark": 위→아래 검정 그라데이션
+     * - "light": 흰색 그라데이션
+     * - "navy": Bigtablet brand navy 그라데이션 (marketing 강조)
+     */
+    overlay?: HeroOverlay;
+    /** h1으로 렌더링되는 메인 제목 */
+    title?: React$1.ReactNode;
+    /** 제목 아래 부제목 */
+    subtitle?: React$1.ReactNode;
+    /** Eyebrow 텍스트 — 제목 위에 작게 표시되는 카테고리/태그 */
+    eyebrow?: React$1.ReactNode;
+    /** CTA 영역 (Button 등) */
+    children?: React$1.ReactNode;
+    /** 텍스트 색상 — 배경이 어두우면 흰색 권장 (기본값: "auto" — overlay가 dark면 white) */
+    textColor?: "auto" | "inverse" | "default";
+    /** Primary CTA — 미지정 시 children으로 직접 Button 전달 가능 */
+    primaryAction?: HeroAction;
+    /** Secondary CTA */
+    secondaryAction?: HeroAction;
+}
 /**
- * ⚠️  AUTO-GENERATED — DO NOT EDIT MANUALLY
- * Run `node scripts/generate-icons.mjs` to regenerate.
- *
- * Source: @material-symbols/svg-300, @material-symbols/svg-400 (outlined)
- * Icons: 57 icons × 4 variants (weight 300/400 × fill/no-fill)
- * ViewBox: "0 -960 960 960" (Material Symbols standard)
+ * 페이지 상단 히어로 섹션을 렌더링한다.
+ * 배경 이미지/색상 + 오버레이 + 제목/부제목 + CTA 슬롯으로 구성.
+ * @param props 히어로 속성
+ * @returns 히어로 섹션
  */
-type IconName = "add_a_photo" | "add_circle" | "add_lg" | "add_md" | "apartment" | "arrow_back" | "calendar_today" | "check" | "check_box" | "check_circle" | "close" | "close_small" | "cloud_download" | "cloud_upload" | "content_copy" | "delete_forever" | "edit" | "edit_note" | "error" | "event" | "fiber_manual_record" | "forward_5" | "group" | "groups" | "help" | "id" | "id_card" | "image" | "indeterminate_check_box" | "info" | "keyboard_arrow_down" | "keyboard_arrow_left" | "keyboard_arrow_right" | "keyboard_arrow_up" | "location_on" | "login" | "logout" | "more_vert" | "open_in_browser" | "open_in_new" | "pause" | "person" | "photo_camera" | "photo_library" | "play_arrow" | "replay_5" | "search" | "settings" | "share" | "speed_1_2x" | "speed_1_5x" | "speed_1_7x" | "speed_1x" | "speed_2x" | "stop" | "visibility" | "visibility_off";
-type IconWeight = 300 | 400;
+declare const Hero: ({ height, align, backgroundImage, backgroundColor, overlay, title, subtitle, eyebrow, textColor, primaryAction, secondaryAction, children, className, style, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
 
-interface IconProps extends Omit<React$1.SVGProps<SVGSVGElement>, "fill"> {
-    /** 아이콘 이름 */
-    name: IconName;
-    /** 아이콘 크기 (px, 기본값: 24) */
-    size?: 20 | 24;
-    /** 선의 굵기 (기본값: 400) */
-    weight?: IconWeight;
-    /** 채움 스타일 여부 (기본값: false) */
-    fill?: boolean;
+interface IconProps extends Omit<LucideProps, "ref"> {
+    /** lucide-react 아이콘 컴포넌트 */
+    icon: LucideIcon;
 }
 /**
- * Material Symbols 기반 인라인 SVG 아이콘 컴포넌트.
- * weight(300/400) × fill(true/false) × size(20/24) 조합을 지원한다.
+ * lucide-react 아이콘 wrapper.
+ * aria-label이 없으면 aria-hidden을 자동 적용해 스크린리더 노이즈를 방지한다.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from "@bigtablet/design-system";
+ * import { Search, X } from "lucide-react";
+ *
+ * <Icon icon={Search} size={20} />
+ * <Icon icon={X} size={16} strokeWidth={2.5} aria-label="닫기" />
+ * ```
+ *
+ * lucide-react 아이콘 전체 카탈로그: https://lucide.dev/icons/
  */
 declare const Icon: {
-    ({ name, size, weight, fill, style, ...props }: IconProps): react_jsx_runtime.JSX.Element | null;
+    ({ icon: IconComponent, ...props }: IconProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -772,7 +1370,7 @@ interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
  * 선형 진행 표시기를 렌더링한다.
- * 현재 단계와 전체 단계를 기반으로 진행률을 시각적으로 표시한다.
+ * `totalSteps + 1` 개 dot (체크포인트) + 진행 바. Dot `i` 는 `i <= currentStep` 이면 채워짐.
  * @param props 진행 표시기 속성
  * @returns 렌더링된 진행 표시기 요소
  */
@@ -791,10 +1389,12 @@ interface ListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "on
     leadingElement?: React$1.ReactNode;
     /** 오른쪽에 표시할 요소 (아이콘 버튼, 체크박스 등) */
     trailingElement?: React$1.ReactNode;
-    /** 요소 정렬 (기본값: "top") */
+    /** 요소 정렬. 미지정 시 자동: OneLine(label 만) → middle, multi-line → top */
     alignment?: "top" | "middle";
     /** 비활성화 상태 */
     disabled?: boolean;
+    /** 선택 상태 — accent.subtle 배경 + accent.default 좌측 인디케이터 */
+    selected?: boolean;
     /** 클릭 시 콜백 */
     onClick?: (event: React$1.MouseEvent<HTMLDivElement>) => void;
 }
@@ -804,8 +1404,45 @@ interface ListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "on
  * @param props 리스트 아이템 속성
  * @returns 렌더링된 리스트 아이템 UI
  */
-declare const ListItem: ({ overline, label, supportingText, metadata, leadingElement, trailingElement, alignment, disabled, onClick, className, ...props }: ListItemProps) => react_jsx_runtime.JSX.Element;
+declare const ListItem: ({ overline, label, supportingText, metadata, leadingElement, trailingElement, alignment, disabled, selected, onClick, className, ...props }: ListItemProps) => react_jsx_runtime.JSX.Element;
+
+type MediaCardImagePosition = "top" | "left" | "overlay";
+type MediaCardShadow = "none" | "sm" | "md" | "lg";
+interface MediaCardImage {
+    src: string;
+    alt: string;
+}
+interface MediaCardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 이미지 정보 (src + alt). alt=""는 장식 이미지로 처리됨 */
+    image: MediaCardImage;
+    /** 이미지 위치 (기본값: "top"). overlay = 이미지 위에 텍스트가 얹힘 */
+    imagePosition?: MediaCardImagePosition;
+    /** 이미지 aspect-ratio (예: "16/9", "4/3", "1/1") */
+    aspectRatio?: string;
+    /** 카드 제목 */
+    heading?: React$1.ReactNode;
+    /** 제목 시맨틱 태그 (기본값: "h3") */
+    headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /** Eyebrow — 제목 위 작은 라벨/카테고리 */
+    eyebrow?: React$1.ReactNode;
+    /** 카드 그림자 (기본값: "sm") */
+    shadow?: MediaCardShadow;
+    /** 테두리 표시 여부 (기본값: false) */
+    bordered?: boolean;
+    /** 카드 클릭 가능 여부 (hover 강조 + cursor) */
+    clickable?: boolean;
+    /** 메타 영역 (날짜/작성자/조회수 등) — 본문 아래 작은 텍스트 */
+    meta?: React$1.ReactNode;
+}
+/**
+ * 이미지가 포함된 카드를 렌더링한다.
+ * Blog/News/Product 같은 B2C 콘텐츠 리스트에 사용한다.
+ * @param props 카드 속성
+ * @returns 이미지 카드
+ */
+declare const MediaCard: ({ image, imagePosition, aspectRatio, heading, headingAs: HeadingTag, eyebrow, shadow, bordered, clickable, meta, children, className, ...props }: MediaCardProps) => react_jsx_runtime.JSX.Element;
 
+type ModalFooterAlign = "end" | "between" | "start";
 interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
     /** 모달 열림 여부 */
     open: boolean;
@@ -813,20 +1450,30 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
     onClose?: () => void;
     /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
     closeOnOverlay?: boolean;
-    /** 모달 패널 너비 (기본값: 520) */
+    /** 모달 패널 너비 (기본값: 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, children, className, ariaLabel, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
+declare const Modal: ({ open, onClose, closeOnOverlay, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
 
 interface OtpInputProps {
     /** OTP 자릿수 (기본값: 6) */
@@ -898,6 +1545,24 @@ declare const Radio: {
     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_jsx_runtime.JSX.Element;
+
 interface SpinnerProps {
     /** 스피너 크기(px) (기본값: 24) */
     size?: number;
@@ -905,14 +1570,97 @@ interface SpinnerProps {
     ariaLabel?: string;
 }
 /**
- * 스피너를 렌더링한다.
- * 크기와 접근성 레이블을 적용한 뒤 상태 표시용 요소를 반환한다.
+ * 스피너를 렌더링한다. 12개 bar 가 방사형으로 배치되어 페이드 인/아웃 으로 회전하는 효과.
+ * Vercel/iOS 스타일 — 클래식 border-spin 보다 부드럽고 미니멀.
  * @param props 스피너 속성
  * @returns 렌더링된 스피너 요소
  */
 declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => react_jsx_runtime.JSX.Element;
 
-type TextFieldSize = "sm" | "md";
+type TableSize = "sm" | "md" | "lg";
+interface TableColumn<T extends object> {
+    /** 컬럼 식별자 — `data[key]` 자동 렌더링에도 쓰임 */
+    key: string;
+    /** thead에 표시할 헤더 텍스트 */
+    header: React$1.ReactNode;
+    /** 셀 렌더 함수. 없으면 `item[key]` 자동 렌더 */
+    render?: (item: T, index: number) => React$1.ReactNode;
+    /** CSS width 값 (예: "120px", "20%") */
+    width?: string;
+    /** 정렬 (기본값: "left") */
+    align?: "left" | "center" | "right";
+}
+interface TableProps<T extends object> {
+    /** 컬럼 정의 */
+    columns: TableColumn<T>[];
+    /** 표시할 데이터 배열 */
+    data: T[];
+    /** 행의 고유 key 추출 함수 */
+    keyExtractor: (item: T, index: number) => string | number;
+    /** 데이터 없을 때 표시 (기본값: "데이터가 없습니다") */
+    emptyMessage?: React$1.ReactNode;
+    /** 로딩 상태 — 헤더 유지, 바디만 스켈레톤 */
+    isLoading?: boolean;
+    /** 로딩 시 스켈레톤 행 개수 (기본값: 5) */
+    skeletonRows?: number;
+    /** 테이블 크기 (기본값: "md") */
+    size?: TableSize;
+    /** 행 hover 강조 (기본값: true) */
+    hoverable?: boolean;
+    /** thead sticky 고정 (기본값: false) */
+    stickyHeader?: boolean;
+    /** 스크린 리더용 테이블 레이블 */
+    ariaLabel?: string;
+    /** 루트 wrapper에 추가할 className */
+    className?: string;
+    /** 행 클릭 콜백 */
+    onRowClick?: (item: T, index: number) => void;
+}
+/**
+ * 데이터 테이블을 렌더링한다. 로딩 중에는 헤더 유지, 바디에 스켈레톤 행을 표시한다.
+ * @param props 테이블 속성
+ * @returns 테이블 컴포넌트
+ */
+declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, }: TableProps<T>) => react_jsx_runtime.JSX.Element;
+
+type ThemeMode = "light" | "dark" | "system";
+type ResolvedTheme = "light" | "dark";
+interface ThemeContextValue {
+    /** 현재 선택된 모드 (system 포함) */
+    mode: ThemeMode;
+    /** 실제로 적용된 테마 (system은 prefers-color-scheme으로 해석됨) */
+    resolved: ResolvedTheme;
+    /** 모드 변경 */
+    setMode: (mode: ThemeMode) => void;
+}
+/**
+ * ThemeProvider 안에서 호출. mode/resolved/setMode를 반환.
+ * Provider 외부에서 호출하면 에러를 던진다.
+ */
+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;
+}
+/**
+ * Bigtablet DS 테마 컨텍스트를 제공한다.
+ * `data-theme` attribute를 root element에 적용해서 CSS 변수 레이어를 전환한다.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider defaultMode="system">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
+
+type TextFieldSize = "sm" | "md" | "lg";
 interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
     /** 입력 필드 크기 (기본값: "md") */
     size?: TextFieldSize;
@@ -1036,4 +1784,154 @@ interface TopLoadingProps {
  */
 declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AlertProvider, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipType, DatePicker, type DatePickerProps, Divider, type DividerProps, Dropdown, type DropdownOption, type DropdownProps, type DropdownSize, FAB, type FABProps, type FABVariant, FileInput, type FileInputProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconName, type IconProps, type IconWeight, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, Modal, type ModalProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Radio, type RadioProps, Dropdown as Select, type DropdownOption as SelectOption, type DropdownProps as SelectProps, Spinner, type SpinnerProps, TextField, type TextFieldProps, ToastProvider, Toggle, type ToggleProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };
+type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
+interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * max-width 크기
+     * - sm: 640px | md: 768px | lg: 1024px | xl: 1200px | full: 100%
+     * @default "xl"
+     */
+    size?: ContainerSize;
+    /** 가운데 정렬 (기본 true) */
+    center?: boolean;
+    /** 렌더링할 HTML 요소 */
+    as?: React$1.ElementType;
+}
+/**
+ * max-width 제한 + 반응형 수평 패딩을 가진 컨테이너.
+ * 모든 마케팅/서비스 페이지의 기본 wrapper.
+ *
+ * @example
+ * ```tsx
+ * <Container size="xl">
+ *   <HeroSection />
+ *   <FeatureGrid />
+ * </Container>
+ * ```
+ */
+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";
+interface SectionProps extends React$1.HTMLAttributes<HTMLElement> {
+    /**
+     * 수직 패딩 크기
+     * - xs: 32px | sm: 48px | md: 64px | lg: 96px | xl: 128px
+     * @default "md"
+     */
+    spacing?: SectionSpacing;
+    /**
+     * 배경색 변형
+     * - default: bg-solid | dim: bg-solid-dim | accent: accent-subtle | navy: accent-default
+     * @default "default"
+     */
+    bg?: SectionBg;
+    /** 렌더링할 HTML 요소 */
+    as?: React$1.ElementType;
+}
+/**
+ * 마케팅 페이지의 섹션 단위. 수직 여백 + 배경색 variants.
+ *
+ * @example
+ * ```tsx
+ * <Section spacing="lg" bg="dim">
+ *   <Container>
+ *     <h2>Features</h2>
+ *     <FeatureGrid />
+ *   </Container>
+ * </Section>
+ * ```
+ */
+declare const Section: ({ spacing, bg, as: Tag, className, children, ...props }: SectionProps) => react_jsx_runtime.JSX.Element;
+
+type StackDirection = "vertical" | "horizontal";
+type StackAlign = "start" | "center" | "end" | "stretch";
+type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+type StackGap = 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48;
+type StackWrap = "nowrap" | "wrap" | "wrap-reverse";
+interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * flex 방향
+     * @default "vertical"
+     */
+    direction?: StackDirection;
+    /**
+     * 아이템 간격 (px)
+     * @default 16
+     */
+    gap?: StackGap;
+    /** 교차축 정렬 (align-items) */
+    align?: StackAlign;
+    /** 주축 정렬 (justify-content) */
+    justify?: StackJustify;
+    /** flex-wrap */
+    wrap?: StackWrap;
+    /** 렌더링할 HTML 요소 */
+    as?: React$1.ElementType;
+}
+/**
+ * Flex 기반 1D 레이아웃 컨테이너.
+ * 수직(column) / 수평(row) 스택 + 간격/정렬 제어.
+ *
+ * @example
+ * ```tsx
+ * <Stack direction="horizontal" gap={16} align="center">
+ *   <Icon name="star" />
+ *   <span>Rating</span>
+ * </Stack>
+ *
+ * <Stack gap={24}>
+ *   <Card />
+ *   <Card />
+ * </Stack>
+ * ```
+ */
+declare const Stack: ({ direction, gap, align, justify, wrap, as: Tag, className, children, style, ...props }: StackProps) => react_jsx_runtime.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;
+}
+/**
+ * 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, 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 };