@bigtablet/design-system 3.16.0 → 3.17.0

package/dist/index.d.ts

@@ -35,6 +35,39 @@ type ClassValue = string | number | boolean | undefined | null | ClassValue[] |
  */
 declare const cn: (...classes: ClassValue[]) => string;
 
+/**
+ * `as` 로 렌더 요소를 바꾸는 컴포넌트의 props 타입.
+ *
+ * 왜 필요한가 - `as?: "button" | "a"` 리터럴 유니온으로는 `as={Link}` 처럼 **컴포넌트**를 넘길
+ * 수 없다. Next.js 앱에서 DS 버튼을 라우터 링크로 쓰려면 소비자가 DS 를 우회해 자기 버튼을
+ * 만들게 되고, 우회가 시작되는 지점이 DS 이탈이 시작되는 지점이다.
+ *
+ * `as` 에 준 요소의 props 가 그대로 따라온다 - `as="a"` 면 `href`·`target`, `as={Link}` 면
+ * `Link` 의 props 가 타입에 들어오고, 컴포넌트 자기 props(`Own`)와 겹치는 이름은 `Own` 이 이긴다.
+ *
+ * @example
+ * ```tsx
+ * interface OwnProps { variant?: "filled" | "text" }
+ *
+ * const Thing = <T extends React.ElementType = "button">({
+ *   as,
+ *   variant = "filled",
+ *   ...rest
+ * }: PolymorphicProps<T, OwnProps>) => {
+ *   const Tag = as ?? "button";
+ *   return <Tag {...rest} />;
+ * };
+ * ```
+ */
+type PolymorphicProps<T extends React$1.ElementType, Own> = Own & {
+    /** 렌더할 요소나 컴포넌트 */
+    as?: T;
+    /** 루트 요소 ref (React 19 ref-as-prop) */
+    ref?: PolymorphicRef<T>;
+} & Omit<React$1.ComponentPropsWithoutRef<T>, keyof Own | "as" | "ref">;
+/** `as` 에 준 요소의 ref 타입 */
+type PolymorphicRef<T extends React$1.ElementType> = React$1.ComponentPropsWithRef<T>["ref"];
+
 declare function useFocusTrap(containerRef: React$1.RefObject<HTMLElement | null>, isActive: boolean): void;
 
 /**
@@ -100,6 +133,64 @@ declare function useSpringPresence({ visible, from, onExitComplete, }: {
     transform: _react_spring_web.SpringValue<string>;
 };
 
+/** 팝업 목록의 한 항목이 최소한 갖춰야 하는 모양. 라벨·값 등 나머지는 소비자 몫이다. */
+interface ListboxItem {
+    /** 비활성 항목은 키보드 이동에서 건너뛰고 선택되지 않는다 */
+    disabled?: boolean;
+}
+interface UseListboxPopupArgs<T extends ListboxItem> {
+    /** 현재 목록에 보이는 항목 (검색 필터가 적용된 뒤의 배열) */
+    items: T[];
+    /** 항목이 확정될 때 호출 - Enter 또는 클릭 */
+    onCommit: (item: T) => void;
+    /** 트리거가 비활성이면 키보드 처리를 하지 않는다 */
+    disabled?: boolean;
+    /**
+     * 패널을 닫을 때 트리거로 포커스를 되돌릴지. 포커스가 패널 안(검색 입력)에 있는
+     * 형태에서 필요하다 - 안 되돌리면 닫는 순간 포커스가 body 로 유실된다.
+     */
+    returnFocusOnClose?: boolean;
+    /** 열릴 때 활성으로 둘 항목의 인덱스. 보통 선택된 항목 */
+    initialActiveIndex?: (items: T[]) => number;
+}
+interface UseListboxPopupResult {
+    isOpen: boolean;
+    setIsOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+    /** 위로 열릴지 - 아래 공간이 모자랄 때만 true */
+    dropUp: boolean;
+    activeIndex: number;
+    setActiveIndex: React$1.Dispatch<React$1.SetStateAction<number>>;
+    /** 바깥 클릭 감지 기준. 트리거와 패널을 함께 감싸는 요소에 붙인다 */
+    wrapperRef: React$1.RefObject<HTMLDivElement | null>;
+    /** 트리거 요소. 닫을 때 포커스를 되돌릴 대상 */
+    triggerRef: React$1.RefObject<HTMLButtonElement | null>;
+    /**
+     * 스크롤되는 목록 요소(`role="listbox"`). 붙이면 방향키로 옮긴 활성 항목을 따라 스크롤한다.
+     * 안 붙여도 나머지 동작은 그대로다 - 목록이 짧아 스크롤이 없는 경우.
+     */
+    listRef: React$1.RefObject<HTMLDivElement | null>;
+    /** 닫고 필요하면 트리거로 포커스를 되돌린다 */
+    close: () => void;
+    /** 방향키 이동 - 비활성 항목을 건너뛰고 양끝에서 순환한다 */
+    moveActive: (dir: 1 | -1) => void;
+    /** 현재 활성 항목을 확정한다 */
+    commitActive: () => void;
+    /** 트리거(button)용 키보드 핸들러 */
+    onTriggerKeyDown: (event: React$1.KeyboardEvent<HTMLElement>) => void;
+    /** 패널 안 입력(검색·콤보박스)용 키보드 핸들러 */
+    onInputKeyDown: (event: React$1.KeyboardEvent<HTMLElement>) => void;
+}
+/**
+ * 트리거 + 팝업 목록의 개폐·활성 항목·키보드·바깥 클릭·열림 방향을 담당한다.
+ *
+ * `Dropdown` 이 이 로직을 인라인으로 갖고 있었다. `Combobox` 가 같은 동작(APG Combobox 키보드
+ * 규약, 비활성 건너뛰기, dropUp)을 필요로 하는데, 복사하면 두 벌이 갈린다 - 이 저장소에서
+ * "형제 구현 한쪽만 고침" 이 이미 네 번 났다.
+ *
+ * 목록의 **내용**(검색·다중 선택·비동기)은 소비자가 갖는다. 이 훅은 팝업의 **거동**만 안다.
+ */
+declare function useListboxPopup<T extends ListboxItem>({ items, onCommit, disabled, returnFocusOnClose, initialActiveIndex, }: UseListboxPopupArgs<T>): UseListboxPopupResult;
+
 interface AccordionItem {
     key: string;
     title: React$1.ReactNode;
@@ -196,6 +287,98 @@ 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 DescriptionListItem {
+    /** 항목 이름 */
+    label: React$1.ReactNode;
+    /** 항목 값 */
+    value: React$1.ReactNode;
+    /** 이 항목만 값을 한 줄 전체로 (긴 주소·메모) */
+    full?: boolean;
+}
+type DescriptionListLayout = "row" | "stack";
+interface DescriptionListProps extends React$1.HTMLAttributes<HTMLDListElement> {
+    /** 이름·값 쌍 */
+    items: DescriptionListItem[];
+    /**
+     * 배치 (기본값: "row").
+     * - `row`: 이름 왼쪽, 값 오른쪽. 좁은 화면에서는 자동으로 쌓인다
+     * - `stack`: 항상 이름 위, 값 아래
+     */
+    layout?: DescriptionListLayout;
+    /** 항목 사이 구분선 (기본값: false) */
+    divided?: boolean;
+    /** 루트 요소 ref (React 19 ref-as-prop) */
+    ref?: React$1.Ref<HTMLDListElement>;
+}
+/**
+ * 이름·값 쌍의 목록. 상세 보기 화면의 기본 골격이다.
+ *
+ * `<dl>` · `<dt>` · `<dd>` 로 렌더한다 - 손으로 만들면 거의 항상 `<div>` 두 개가 되고, 그러면
+ * 스크린리더에 이름과 값의 관계가 남지 않는다. 이름만 읽고 값을 따로 읽어 주는 목록이 된다.
+ *
+ * `row` 는 좁은 화면에서 스스로 쌓인다 - 이름과 값을 한 줄에 억지로 붙이면 값이 잘린다.
+ *
+ * @example
+ * ```tsx
+ * <DescriptionList
+ *   divided
+ *   items={[
+ *     { label: "주문번호", value: "#1024" },
+ *     { label: "결제수단", value: "신용카드" },
+ *     { label: "배송지", value: "서울시 …", full: true },
+ *   ]}
+ * />
+ * ```
+ */
+declare const DescriptionList: ({ items, layout, divided, className, ref, ...props }: DescriptionListProps) => React$1.JSX.Element;
+
+/** 변화량의 색. 방향(↑↓)과 좋음/나쁨은 다르다 - "재고 부족 +2" 는 오르지만 나쁘다 */
+type StatDeltaTone = "positive" | "negative" | "neutral";
+interface StatProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** 지표 이름 */
+    label: React$1.ReactNode;
+    /** 지표 값. 숫자는 `tabular-nums` 로 폭이 고정된다 */
+    value: React$1.ReactNode;
+    /** 값 아래 변화량 (예: `+12%`) */
+    delta?: React$1.ReactNode;
+    /**
+     * 변화량의 색 (기본값: "neutral").
+     * 방향이 아니라 **좋음/나쁨**을 고른다 - 재고 부족이 늘어난 것은 `negative` 다.
+     */
+    deltaTone?: StatDeltaTone;
+    /** 라벨 왼쪽 장식 아이콘 */
+    icon?: React$1.ReactNode;
+    /** 루트 요소 ref (React 19 ref-as-prop) */
+    ref?: React$1.Ref<HTMLDivElement>;
+}
+declare const Stat: ({ label, value, delta, deltaTone, icon, className, ref, ...props }: StatProps) => React$1.JSX.Element;
+
+/** 항목의 진행 상태. 색과 연결선의 진하기를 정한다 */
+type TimelineStatus = "done" | "active" | "pending";
+interface TimelineItem {
+    /** 목록 키 */
+    id: string | number;
+    /** 항목 제목 */
+    title: React$1.ReactNode;
+    /** 제목 오른쪽의 시각 */
+    time?: React$1.ReactNode;
+    /** 제목 아래 설명 */
+    description?: React$1.ReactNode;
+    /** 진행 상태 (기본값: "pending") */
+    status?: TimelineStatus;
+    /** 인디케이터 안에 넣을 아이콘. 없으면 점 */
+    icon?: React$1.ReactNode;
+    /** 항목 아래에 붙일 임의 내용 (첨부, 액션 버튼 등) */
+    children?: React$1.ReactNode;
+}
+interface TimelineProps extends React$1.HTMLAttributes<HTMLOListElement> {
+    /** 위에서 아래로 흐르는 순서대로 */
+    items: TimelineItem[];
+    /** 루트 요소 ref (React 19 ref-as-prop) */
+    ref?: React$1.Ref<HTMLOListElement>;
+}
+declare const Timeline: ({ items, className, ref, ...props }: TimelineProps) => React$1.JSX.Element;
+
 interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
     /**
      * 일러스트 영역 (아이콘/이미지 등). **장식 전용** - `aria-hidden="true"` 래퍼로 접근성 트리에서
@@ -273,7 +456,7 @@ interface ErrorStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
  * <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;
+declare const ErrorState: ({ title: titleProp, description, icon, action, variant, className, ...props }: ErrorStateProps) => React$1.JSX.Element;
 
 interface BottomNavProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChange"> {
     /** 스크린 리더 레이블 (기본 "주요 메뉴") */
@@ -298,7 +481,7 @@ interface BottomNavProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onCh
  * <BottomNavSpacer />
  * ```
  */
-declare const BottomNav: ({ ariaLabel, className, children, ...props }: BottomNavProps) => React$1.JSX.Element;
+declare const BottomNav: ({ ariaLabel: ariaLabelProp, className, children, ...props }: BottomNavProps) => React$1.JSX.Element;
 interface BottomNavItemCommon {
     /** 아이콘 (필수) */
     icon: React$1.ReactNode;
@@ -309,22 +492,27 @@ interface BottomNavItemCommon {
     /** 아이콘 우상단 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` 로 처리. */
+/**
+ * BottomNavItem props. `as` 로 렌더 요소를 바꾼다 - `"a"`, `Link`(Next.js) 등 무엇이든.
+ *
+ * `disabled` 는 여기 남는다 - anchor·커스텀 컴포넌트에는 native `disabled` 가 없어
+ * `aria-disabled` + `tabIndex={-1}` + 클릭 차단으로 처리해야 하기 때문이다.
+ *
+ * `as="a"` 면 `href` 는 **필수**다 - 판별 유니온 시절 계약이고, `href` 없는 `<a>` 는 링크
+ * 시맨틱이 없다(`AnchorHTMLAttributes.href` 가 옵션이라 그대로 두면 느슨해진다).
+ */
+type BottomNavItemProps<T extends React$1.ElementType = "button"> = PolymorphicProps<T, BottomNavItemCommon & {
     disabled?: boolean;
-} & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "type">;
-type BottomNavItemProps = BottomNavItemButton | BottomNavItemAnchor;
+}> & ("button" extends T ? {
+    href?: string;
+} : Record<never, never>) & ("a" extends T ? {
+    href: string;
+} : Record<never, never>);
 /**
  * `BottomNav` 의 항목. icon + label 수직 스택.
  * active 시 `aria-current="page"` 자동 부여.
  */
-declare const BottomNavItem: (props: BottomNavItemProps) => React$1.JSX.Element;
+declare const BottomNavItem: <T extends React$1.ElementType = "button">(props: BottomNavItemProps<T>) => React$1.JSX.Element;
 /**
  * 페이지 본문 끝에 두면 `BottomNav` 가 콘텐츠를 가리지 않게 빈 공간 확보.
  * `--bt-bottom-nav-height` (+ safe-area) 만큼 height.
@@ -359,7 +547,7 @@ interface BreadcrumbProps extends React$1.HTMLAttributes<HTMLElement> {
  * ]} />
  * ```
  */
-declare const Breadcrumb: ({ items, separator, navLabel, className, ...props }: BreadcrumbProps) => React$1.JSX.Element;
+declare const Breadcrumb: ({ items, separator, navLabel: navLabelProp, className, ...props }: BreadcrumbProps) => React$1.JSX.Element;
 
 interface MenuItem {
     key: string;
@@ -516,8 +704,14 @@ interface SidebarProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChan
  * </Sidebar>
  * ```
  */
-declare const Sidebar: ({ header, headerCollapsed, footer, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, toggleLabel, width, collapsedWidth, mode, className, children, style, ...props }: SidebarProps) => React$1.JSX.Element;
+declare const Sidebar: ({ header, headerCollapsed, footer, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, toggleLabel: toggleLabelProp, width, collapsedWidth, mode, className, children, style, ...props }: SidebarProps) => React$1.JSX.Element;
 interface SidebarItemCommon {
+    /**
+     * 비활성. `<button>` 은 native `disabled`, 그 밖의 요소(anchor·`Link` 등)는
+     * `aria-disabled` + `tabIndex={-1}` + 클릭 차단으로 처리한다 - native `disabled` 가 없는
+     * 요소에 그냥 넘기면 조용히 무시되고 비활성 항목이 눌린다.
+     */
+    disabled?: boolean;
     /** 왼쪽 아이콘 */
     icon?: React$1.ReactNode;
     /** 현재 활성 상태 */
@@ -525,16 +719,21 @@ interface SidebarItemCommon {
     /** 오른쪽 trailing (Badge 등) */
     trailing?: React$1.ReactNode;
 }
-type SidebarItemButton = SidebarItemCommon & {
-    as?: "button";
-    href?: never;
-} & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
-type SidebarItemAnchor = SidebarItemCommon & {
-    as: "a";
+/**
+ * SidebarItem props. `as` 로 렌더 요소를 바꾼다 - `"a"`, `Link`(Next.js) 등 무엇이든.
+ *
+ * 리터럴 유니온(`"button" | "a"`)이었을 때는 Next 앱에서 사이드바 항목을 라우터 링크로 만들
+ * 방법이 없어, 소비자가 DS 를 우회해 자기 항목을 만들었다.
+ *
+ * `as="a"` 면 `href` 는 **필수**다 - 판별 유니온 시절 계약이고, `href` 없는 `<a>` 는 링크
+ * 시맨틱이 없다(`AnchorHTMLAttributes.href` 가 옵션이라 그대로 두면 느슨해진다).
+ */
+type SidebarItemProps<T extends React$1.ElementType = "button"> = PolymorphicProps<T, SidebarItemCommon> & ("button" extends T ? {
+    href?: string;
+} : Record<never, never>) & ("a" extends T ? {
     href: string;
-} & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "type">;
-type SidebarItemProps = SidebarItemButton | SidebarItemAnchor;
-declare const SidebarItem: (props: SidebarItemProps) => React$1.JSX.Element;
+} : Record<never, never>);
+declare const SidebarItem: <T extends React$1.ElementType = "button">(props: SidebarItemProps<T>) => React$1.JSX.Element;
 interface SidebarSectionProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** 섹션 라벨 (collapsed 상태에선 hidden) */
     label?: string;
@@ -1212,6 +1411,196 @@ 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 TableSize = "sm" | "md" | "lg";
+type TableSortDirection = "asc" | "desc";
+interface TableSort {
+    /** 정렬 중인 컬럼의 `TableColumn.key` */
+    key: string;
+    /** 정렬 방향 */
+    direction: TableSortDirection;
+}
+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;
+    /** 정렬 */
+    align?: "left" | "center" | "right";
+    /** 정렬 가능한 컬럼 여부 (기본값: false). 클릭 시 `onSortChange` 발화 - 실제 정렬은 소비자가 수행 */
+    sortable?: boolean;
+}
+/** `selectable` 시 `rowKey` 를 요구하기 위한 판별 유니온 */
+type TableSelectionProps<T extends object> = {
+    /** 행 선택(체크박스 컬럼) 활성화 여부 */
+    selectable: true;
+    /** 행 고유 key 추출 함수 - `selectable` 사용 시 필수 */
+    rowKey: (row: T) => string;
+    /** 선택된 행 key 배열 (제어형) */
+    selectedKeys?: string[];
+    /** 선택 변경 콜백 */
+    onSelectionChange?: (keys: string[]) => void;
+} | {
+    selectable?: false;
+    rowKey?: (row: T) => string;
+    selectedKeys?: string[];
+    onSelectionChange?: (keys: string[]) => void;
+};
+type 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;
+    /** 테이블 크기 */
+    size?: TableSize;
+    /** 행 hover 강조 (기본값: true) */
+    hoverable?: boolean;
+    /** thead sticky 고정 (기본값: false) */
+    stickyHeader?: boolean;
+    /** 스크린 리더용 테이블 레이블 */
+    ariaLabel?: string;
+    /** 루트 wrapper에 추가할 className */
+    className?: string;
+    /** 행 클릭 콜백 */
+    onRowClick?: (item: T, index: number) => void;
+    /**
+     * clickable 행(onRowClick)의 동작 설명. 각 clickable 행에 `aria-describedby` 로 연결된다 (기본값: "클릭 가능한 행").
+     * 행마다 셀 데이터가 이미 행을 식별하므로 여기엔 동작만 담으면 된다 (예: "선택하면 상세 항목으로 이동").
+     * `""`(빈 문자열)로 두면 힌트를 붙이지 않는다.
+     * `aria-label` 대신 `aria-describedby` 를 쓰는 이유: `<tr>` 의 `aria-label`/`role="button"` 은 행/셀의
+     * accessible name 을 덮거나 셀을 presentational 로 만들어 스크린리더가 셀 데이터를 못 읽는다.
+     */
+    rowClickHint?: string;
+    /** 현재 정렬 상태 (제어형). `undefined` 는 정렬 없음 */
+    sort?: TableSort;
+    /** 정렬 가능한 헤더 클릭 시 발화 (none→asc→desc→none 순환). DS는 데이터를 직접 정렬하지 않음 - 정렬된 `data` 를 다시 전달해야 함 */
+    onSortChange?: (sort: TableSort | undefined) => void;
+    /** 전체 선택 체크박스 aria-label */
+    selectAllAriaLabel?: string;
+    /** 개별 행 선택 체크박스 aria-label (기본값: (i) => `${i+1}번째 행 선택`) */
+    selectRowAriaLabel?: (index: number) => string;
+} & TableSelectionProps<T>;
+/**
+ * 데이터 테이블을 렌더링한다. 로딩 중에는 헤더 유지, 바디에 스켈레톤 행을 표시한다.
+ * @param props 테이블 속성
+ * @returns 테이블 컴포넌트
+ */
+declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage: emptyMessageProp, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, rowClickHint: rowClickHintProp, sort, onSortChange, selectAllAriaLabel: selectAllAriaLabelProp, selectRowAriaLabel: selectRowAriaLabelProp, selectable, rowKey, selectedKeys, onSelectionChange, }: TableProps<T>) => React$1.JSX.Element;
+
+/**
+ * 목록 화면이 데이터를 받는 모양.
+ *
+ * TanStack Query 등의 결과를 그대로 넣을 수 있게 필드 이름을 맞췄지만, 어떤 라이브러리도
+ * import 하지 않는다 - DS 가 특정 데이터 계층에 묶이면 안 된다.
+ */
+interface DataViewQuery<T> {
+    /** 현재 페이지에 표시할 행 */
+    data: T[] | undefined;
+    /** 첫 로딩 여부. true 면 Table 의 스켈레톤이 나온다 */
+    isLoading?: boolean;
+    /** 실패. 지정하면 표 대신 ErrorState 가 나온다 */
+    error?: unknown;
+    /** 재시도. 지정하면 ErrorState 에 버튼이 붙는다 */
+    refetch?: () => void;
+}
+interface DataViewToolbar {
+    /** 검색 입력 표시 여부 */
+    search?: boolean;
+    /** 검색어 (제어형) */
+    searchValue?: string;
+    /** 검색어 변경 콜백 */
+    onSearchChange?: (value: string) => void;
+    /** 검색 입력 placeholder */
+    searchPlaceholder?: string;
+    /** 검색 왼쪽에 놓을 필터 컨트롤 (`Dropdown` 등) */
+    filters?: React$1.ReactNode;
+}
+interface DataViewSelectionAction {
+    /** 버튼 라벨 */
+    label: string;
+    /** 선택된 key 를 받아 실행 */
+    onRun: (keys: string[]) => void;
+    /** 위험한 액션(삭제 등) - 빨간 강조 */
+    danger?: boolean;
+}
+interface DataViewPagination {
+    /** 현재 페이지 (1-based) */
+    page: number;
+    /** 전체 페이지 수 */
+    totalPages: number;
+    /** 페이지 변경 콜백 */
+    onPageChange: (page: number) => void;
+}
+interface DataViewProps<T extends object> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 데이터와 그 상태 */
+    query: DataViewQuery<T>;
+    /** 표 컬럼 정의 */
+    columns: TableColumn<T>[];
+    /** 행 고유 key */
+    rowKey: (row: T) => string;
+    /** 상단 검색·필터 줄 */
+    toolbar?: DataViewToolbar;
+    /**
+     * 행을 선택했을 때 나타나는 액션. 지정하면 표에 체크박스 컬럼이 붙는다.
+     * 선택 상태는 `DataView` 가 들고 있다.
+     */
+    selectionActions?: DataViewSelectionAction[];
+    /** 하단 페이지네이션 */
+    pagination?: DataViewPagination;
+    /** 데이터가 비었을 때. 미지정 시 기본 `EmptyState` */
+    empty?: React$1.ReactNode;
+    /** 정렬 상태 (제어형) */
+    sort?: TableSort;
+    /** 정렬 변경 콜백 */
+    onSortChange?: (sort: TableSort | undefined) => void;
+    /** 행 클릭 */
+    onRowClick?: (row: T, index: number) => void;
+    /** 표의 접근성 이름 */
+    ariaLabel?: string;
+    /** 선택 액션 줄의 안내 문구 (기본값: (n) => `${n}개 선택됨`) */
+    selectionSummary?: (count: number) => string;
+    /** 선택 해제 버튼 라벨 */
+    clearSelectionLabel?: string;
+    /** 실패 상태 제목 */
+    errorTitle?: string;
+    /** 재시도 버튼 라벨 */
+    retryLabel?: string;
+}
+/**
+ * 목록 화면 한 벌 - 검색·필터, 표, 선택 액션, 페이지네이션, 그리고 **네 상태 분기**.
+ *
+ * `Table` 은 정렬·선택·스켈레톤을 정직하게 처리하지만 목록 "화면" 은 그 위아래가 더 있다.
+ * 그 조합이 없어서 화면마다 다시 만들어졌고, 특히 **에러 상태를 빠뜨린 화면**이 생겼다.
+ * 여기서는 loading / error / empty / data 가 한 곳에서 갈린다.
+ *
+ * 새로 그리는 것은 거의 없다 - `Table`·`Pagination`·`EmptyState`·`ErrorState`·`TextField`·
+ * `Button` 을 그대로 쓴다.
+ *
+ * @example
+ * ```tsx
+ * <DataView
+ *   query={usersQuery}
+ *   columns={columns}
+ *   rowKey={(u) => u.id}
+ *   toolbar={{ search: true, searchValue: q, onSearchChange: setQ }}
+ *   selectionActions={[{ label: "삭제", danger: true, onRun: removeRows }]}
+ *   pagination={{ page, totalPages, onPageChange: setPage }}
+ * />
+ * ```
+ */
+declare const DataView: <T extends object>({ query, columns, rowKey, toolbar, selectionActions, pagination, empty, sort, onSortChange, onRowClick, ariaLabel, selectionSummary: selectionSummaryProp, clearSelectionLabel: clearSelectionLabelProp, errorTitle: errorTitleProp, retryLabel: retryLabelProp, className, ...props }: DataViewProps<T>) => React$1.JSX.Element;
+
 interface DividerProps extends React$1.HTMLAttributes<HTMLHRElement> {
     /** 구분선 두께 (기본값: "standard") */
     weight?: "standard" | "heavy";
@@ -1392,105 +1781,18 @@ declare const Prose: {
     displayName: string;
 };
 
-type TableSize = "sm" | "md" | "lg";
-type TableSortDirection = "asc" | "desc";
-interface TableSort {
-    /** 정렬 중인 컬럼의 `TableColumn.key` */
-    key: string;
-    /** 정렬 방향 */
-    direction: TableSortDirection;
-}
-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";
-    /** 정렬 가능한 컬럼 여부 (기본값: false). 클릭 시 `onSortChange` 발화 - 실제 정렬은 소비자가 수행 */
-    sortable?: boolean;
-}
-/** `selectable` 시 `rowKey` 를 요구하기 위한 판별 유니온 */
-type TableSelectionProps<T extends object> = {
-    /** 행 선택(체크박스 컬럼) 활성화 여부 */
-    selectable: true;
-    /** 행 고유 key 추출 함수 - `selectable` 사용 시 필수 */
-    rowKey: (row: T) => string;
-    /** 선택된 행 key 배열 (제어형) */
-    selectedKeys?: string[];
-    /** 선택 변경 콜백 */
-    onSelectionChange?: (keys: string[]) => void;
-} | {
-    selectable?: false;
-    rowKey?: (row: T) => string;
-    selectedKeys?: string[];
-    onSelectionChange?: (keys: string[]) => void;
-};
-type 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;
-    /**
-     * clickable 행(onRowClick)의 동작 설명. 각 clickable 행에 `aria-describedby` 로 연결된다 (기본값: "클릭 가능한 행").
-     * 행마다 셀 데이터가 이미 행을 식별하므로 여기엔 동작만 담으면 된다 (예: "선택하면 상세 항목으로 이동").
-     * `""`(빈 문자열)로 두면 힌트를 붙이지 않는다.
-     * `aria-label` 대신 `aria-describedby` 를 쓰는 이유: `<tr>` 의 `aria-label`/`role="button"` 은 행/셀의
-     * accessible name 을 덮거나 셀을 presentational 로 만들어 스크린리더가 셀 데이터를 못 읽는다.
-     */
-    rowClickHint?: string;
-    /** 현재 정렬 상태 (제어형). `undefined` 는 정렬 없음 */
-    sort?: TableSort;
-    /** 정렬 가능한 헤더 클릭 시 발화 (none→asc→desc→none 순환). DS는 데이터를 직접 정렬하지 않음 - 정렬된 `data` 를 다시 전달해야 함 */
-    onSortChange?: (sort: TableSort | undefined) => void;
-    /** 전체 선택 체크박스 aria-label (기본값: "전체 선택") */
-    selectAllAriaLabel?: string;
-    /** 개별 행 선택 체크박스 aria-label (기본값: (i) => `${i+1}번째 행 선택`) */
-    selectRowAriaLabel?: (index: number) => string;
-} & TableSelectionProps<T>;
-/**
- * 데이터 테이블을 렌더링한다. 로딩 중에는 헤더 유지, 바디에 스켈레톤 행을 표시한다.
- * @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;
@@ -1501,7 +1803,7 @@ interface AlertOptions {
      * @default false
      */
     destructive?: boolean;
-    /** 액션 버튼 정렬 (기본값: "right") */
+    /** 액션 버튼 정렬 */
     actionsAlign?: AlertActionsAlign;
     /** 변형 아이콘 표시 여부 (기본값: false). 원하면 명시적으로 켜기 */
     showIcon?: boolean;
@@ -1560,7 +1862,7 @@ declare const Skeleton: ({ variant, width, height, radius, className, style, ...
 interface SpinnerProps {
     /** 스피너 크기(px) (기본값: 24) */
     size?: number;
-    /** 스피너 접근성 레이블 (기본값: "로딩 중") */
+    /** 스피너 접근성 레이블 */
     ariaLabel?: string;
 }
 /**
@@ -1569,7 +1871,7 @@ interface SpinnerProps {
  * @param props 스피너 속성
  * @returns 렌더링된 스피너 요소
  */
-declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => React$1.JSX.Element;
+declare const Spinner: ({ size, ariaLabel: ariaLabelProp }: SpinnerProps) => React$1.JSX.Element;
 
 type ToastVariant = "success" | "error" | "warning" | "info" | "default";
 interface ToastProviderProps {
@@ -1577,7 +1879,7 @@ interface ToastProviderProps {
     children: React$1.ReactNode;
     /** 최대 동시 표시 토스트 수 (기본값: 5) */
     maxCount?: number;
-    /** 토스트 닫기 버튼의 aria-label (기본값: "닫기") */
+    /** 토스트 닫기 버튼의 aria-label */
     closeAriaLabel?: string;
     /** 토스트 리전(`role="region"`)의 접근성 이름 (기본값: "알림"). 스크린리더의 리전 목록에 뜬다 */
     regionLabel?: string;
@@ -1588,7 +1890,7 @@ interface ToastProviderProps {
  * @param props Provider 속성
  * @returns 렌더링된 Provider와 토스트 컨테이너
  */
-declare const ToastProvider: ({ children, maxCount, closeAriaLabel, regionLabel, }: ToastProviderProps) => React$1.JSX.Element;
+declare const ToastProvider: ({ children, maxCount, closeAriaLabel: closeAriaLabelProp, regionLabel: regionLabelProp, }: ToastProviderProps) => React$1.JSX.Element;
 
 /**
  * 토스트 메시지를 표시하는 훅.
@@ -1617,7 +1919,7 @@ interface TopLoadingProps {
     height?: number;
     /** 표시 여부 */
     isLoading?: boolean;
-    /** 프로그레스 바의 접근성 레이블 (기본값: "페이지 로딩 중") */
+    /** 프로그레스 바의 접근성 레이블 */
     ariaLabel?: string;
 }
 /**
@@ -1626,7 +1928,7 @@ interface TopLoadingProps {
  * @param props 로딩바 속성
  * @returns 렌더링된 로딩바 요소 또는 null
  */
-declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => React$1.JSX.Element | null;
+declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel: ariaLabelProp, }: TopLoadingProps) => React$1.JSX.Element | null;
 
 interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 체크박스 옆에 표시할 라벨 */
@@ -1649,6 +1951,71 @@ declare const Checkbox: {
     displayName: string;
 };
 
+interface ComboboxOption {
+    /** 선택 시 돌려줄 값 */
+    value: string;
+    /** 목록과 트리거에 표시할 텍스트 */
+    label: string;
+    /** 비활성 - 키보드 이동에서 건너뛰고 선택되지 않는다 */
+    disabled?: boolean;
+}
+type ComboboxSize = "sm" | "md" | "lg";
+interface ComboboxProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** 선택된 값 (제어형) */
+    value?: ComboboxOption | null;
+    /** 선택 변경 콜백 */
+    onValueChange?: (option: ComboboxOption | null) => void;
+    /**
+     * 검색어가 바뀔 때 호출. 서버에서 후보를 가져오는 자리다.
+     * `debounceMs` 만큼 기다린 뒤 호출되고, 늦게 도착한 응답은 버려진다.
+     */
+    onSearch: (query: string) => Promise<ComboboxOption[]>;
+    /** 검색어 입력 전에 보여줄 초기 후보 */
+    defaultOptions?: ComboboxOption[];
+    /** 검색 호출 간격 (기본값: 250ms) */
+    debounceMs?: number;
+    /** 입력 placeholder */
+    placeholder?: string;
+    /** 결과 없음 문구 */
+    emptyMessage?: string;
+    /** 검색 전 안내 문구 */
+    idleMessage?: string;
+    /** 크기 */
+    size?: ComboboxSize;
+    /** 비활성 여부 */
+    disabled?: boolean;
+    /** 전체 너비 차지 */
+    fullWidth?: boolean;
+    /** 목록 항목 렌더 커스터마이즈. 미지정 시 `label` */
+    renderOption?: (option: ComboboxOption) => React$1.ReactNode;
+    /** 접근성 이름 - `Field` 로 감싸면 그쪽 라벨이 우선한다 */
+    ariaLabel?: string;
+    /** 로딩 안내 */
+    loadingLabel?: string;
+}
+/**
+ * 후보를 서버에서 가져오는 선택 입력 (APG Combobox).
+ *
+ * `Dropdown` 도 `searchable` 로 타이핑 검색을 지원하지만 **이미 받아 둔 옵션 배열 안에서만**
+ * 거른다. 담당자·회사·상품처럼 후보가 수백 개인 필드는 그 목록을 통째로 내려받을 수 없어
+ * 소비자가 DS 를 우회해 직접 만들게 된다 - 우회가 시작되는 지점이 DS 이탈이 시작되는 지점이다.
+ *
+ * 팝업의 거동(개폐·활성 항목·키보드·바깥 클릭)은 `useListboxPopup` 을 `Dropdown` 과 공유한다.
+ * 여기 있는 것은 **비동기 네 가지**뿐이다 - 디바운스, 로딩 표시, 응답 경합 차단,
+ * "아직 검색 안 함" 과 "결과 없음" 의 구분.
+ *
+ * @example
+ * ```tsx
+ * <Combobox
+ *   value={owner}
+ *   onValueChange={setOwner}
+ *   onSearch={(q) => api.searchUsers(q)}
+ *   emptyMessage="일치하는 담당자가 없습니다"
+ * />
+ * ```
+ */
+declare const Combobox: ({ value, onValueChange, onSearch, defaultOptions, debounceMs, placeholder: placeholderProp, emptyMessage: emptyMessageProp, idleMessage: idleMessageProp, size, disabled, fullWidth, renderOption, ariaLabel, loadingLabel: loadingLabelProp, className, ...props }: ComboboxProps) => React$1.JSX.Element;
+
 type DatePickerMode = "year-month" | "year-month-day";
 type SelectableRange = "all" | "until-today";
 interface DatePickerBaseProps {
@@ -1656,7 +2023,7 @@ interface DatePickerBaseProps {
     label?: string;
     /** 제어형 날짜 값 ("YYYY-MM" 또는 "YYYY-MM-DD" 형식) */
     value?: string;
-    /** 선택 모드 (기본값: "year-month-day") */
+    /** 선택 모드 */
     mode?: DatePickerMode;
     /** 연도 선택 범위 시작 (기본값: 1950) */
     startYear?: number;
@@ -1675,11 +2042,11 @@ interface DatePickerBaseProps {
      * @deprecated `fullWidth` 사용 또는 CSS로 처리
      */
     width?: number | string;
-    /** 연도 select의 라벨/플레이스홀더 (기본값: "년") */
+    /** 연도 select의 라벨/플레이스홀더 */
     yearLabel?: string;
-    /** 월 select의 라벨/플레이스홀더 (기본값: "월") */
+    /** 월 select의 라벨/플레이스홀더 */
     monthLabel?: string;
-    /** 일 select의 라벨/플레이스홀더 (기본값: "일") */
+    /** 일 select의 라벨/플레이스홀더 */
     dayLabel?: string;
     /**
      * minDate 설정 시 스크린리더에 전달할 안내 문구 포맷.
@@ -1704,7 +2071,54 @@ 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;
+declare const DatePicker: ({ label, value, onValueChange, onChange, mode, startYear, endYear: endYearProp, minDate, selectableRange, disabled, fullWidth, width, yearLabel: yearLabelProp, monthLabel: monthLabelProp, dayLabel: dayLabelProp, minDateSrFormat: minDateSrFormatProp, selectableRangeUntilTodaySrText: selectableRangeUntilTodaySrTextProp, }: DatePickerProps) => React$1.JSX.Element;
+
+interface DateRange {
+    /** 시작일 (`"YYYY-MM-DD"`). 아직 고르지 않았으면 undefined */
+    start?: string;
+    /** 종료일 (`"YYYY-MM-DD"`). 아직 고르지 않았으면 undefined */
+    end?: string;
+}
+interface DateRangePickerProps {
+    /** 제어형 값 */
+    value?: DateRange;
+    /** 범위 변경. 시작일이 종료일을 넘어서면 종료일이 비워진 값이 온다 */
+    onValueChange: (value: DateRange) => void;
+    /** 시작일 select 묶음의 라벨 */
+    startLabel?: string;
+    /** 종료일 select 묶음의 라벨 */
+    endLabel?: string;
+    /** 연도 선택 범위 시작 (기본값: 1950) */
+    startYear?: number;
+    /** 연도 선택 범위 끝. 미지정 시 현재 연도 + 10 */
+    endYear?: number;
+    /** 선택 가능한 가장 이른 날짜 (`"YYYY-MM-DD"`) */
+    minDate?: string;
+    /** `"until-today"` 면 오늘 이후를 고를 수 없다 (기본값: "all") */
+    selectableRange?: "all" | "until-today";
+    /** 비활성 여부 */
+    disabled?: boolean;
+    /** 전체 너비 차지 (기본값: true) */
+    fullWidth?: boolean;
+}
+/**
+ * 시작일·종료일 한 쌍. `DatePicker` 둘을 묶는다.
+ *
+ * **거꾸로 된 범위를 만들 수 없다.** 종료일의 최소값이 시작일이라 애초에 이전 날짜가 목록에
+ * 없고, 시작일을 종료일보다 뒤로 옮기면 종료일이 비워진다. 손으로 두 개를 나란히 두면 이
+ * 검증을 화면마다 다시 쓰고, 대개 "조회" 버튼을 누른 뒤 서버 오류로 알게 된다.
+ *
+ * 종료일을 조용히 시작일로 맞추지 않고 **비운다** - 사용자가 고르지 않은 날짜를 고른 것처럼
+ * 만들면 그대로 조회·저장된다.
+ *
+ * @example
+ * ```tsx
+ * <Field name="period" label="조회 기간">
+ *   <DateRangePicker value={period} onValueChange={setPeriod} selectableRange="until-today" />
+ * </Field>
+ * ```
+ */
+declare const DateRangePicker: ({ value, onValueChange, startLabel: startLabelProp, endLabel: endLabelProp, startYear, endYear, minDate, selectableRange, disabled, fullWidth, }: DateRangePickerProps) => React$1.JSX.Element;
 
 type DropdownSize = "sm" | "md" | "lg";
 /**
@@ -1732,13 +2146,13 @@ interface DropdownCommonProps {
     id?: string;
     /** 드롭다운 위에 표시할 플로팅 라벨 텍스트 */
     label?: string;
-    /** 선택 전 표시할 플레이스홀더 (기본값: "선택…") */
+    /** 선택 전 표시할 플레이스홀더 */
     placeholder?: string;
     /** 표시할 옵션 목록 */
     options: DropdownOption[];
     /** 비활성화 여부 */
     disabled?: boolean;
-    /** 드롭다운 크기 (기본값: "md") */
+    /** 드롭다운 크기 */
     size?: DropdownSize;
     /**
      * @deprecated Dropdown 은 이제 항상 부모 너비를 채웁니다. 인라인 사용 시 부모를 `inline-block + width` 로 감싸세요.
@@ -1746,7 +2160,7 @@ interface DropdownCommonProps {
     fullWidth?: boolean;
     /** 루트 요소에 추가할 className */
     className?: string;
-    /** 컨트롤 시각 변형 (기본값: "outline") */
+    /** 컨트롤 시각 변형 */
     variant?: DropdownVariant;
     /**
      * @deprecated textAlign은 더 이상 지원되지 않습니다.
@@ -1757,11 +2171,11 @@ interface DropdownCommonProps {
      * (기본값: false)
      */
     searchable?: boolean;
-    /** 검색 입력의 placeholder (기본값: "검색…") */
+    /** 검색 입력의 placeholder */
     searchPlaceholder?: string;
-    /** 필터 결과가 0개일 때 표시할 텍스트 (기본값: "결과 없음") */
+    /** 필터 결과가 0개일 때 표시할 텍스트 */
     emptyText?: string;
-    /** 멀티 선택 요약 텍스트 (기본값: "N개 선택") */
+    /** 멀티 선택 요약 텍스트 */
     selectedSummary?: (count: number) => string;
     /**
      * 네이티브 폼 제출 참여용 name. 지정 시 선택 값이 hidden input 으로 렌더되어
@@ -1805,9 +2219,78 @@ type DropdownProps = DropdownSingleProps | DropdownMultipleProps;
  */
 declare const Dropdown: (props: DropdownProps) => React$1.JSX.Element;
 
+/**
+ * `Field` 가 자식 입력에게 내리는 값.
+ *
+ * 입력이 직접 읽지 않고 {@link useFieldControl} 을 거친다 - `Field` 밖에서는 `undefined` 라,
+ * 입력은 지금까지처럼 자기 id 와 자기 `supportingText` 로 동작한다.
+ */
+interface FieldControl {
+    /** 입력에 붙일 id. `Field` 의 `<label htmlFor>` 이 이 값을 가리킨다 */
+    inputId: string;
+    /**
+     * 라벨 요소의 id. `role="group"` 컨테이너(DatePicker·OtpInput·RadioGroup)는 `htmlFor` 로
+     * 연결되지 않으므로 이 값을 `aria-labelledby` 에 쓴다. 라벨이 없으면 undefined.
+     */
+    labelId: string | undefined;
+    /** help·error 를 함께 가리키는 `aria-describedby` 값. 둘 다 없으면 undefined */
+    describedBy: string | undefined;
+    /** 에러 상태 - 입력은 `aria-invalid` 에 반영한다 */
+    invalid: boolean;
+    /** 필수 여부 - 입력은 `aria-required` 에 반영한다 */
+    required: boolean;
+}
+/**
+ * 입력 컴포넌트가 감싸는 `Field` 를 인식하는 훅.
+ *
+ * `Field` 밖에서는 `undefined` 를 돌려주므로, 입력은 아래처럼 **자기 값을 기본으로 두고**
+ * 필드가 있을 때만 양보하면 된다. 기존 동작이 바뀌지 않는다.
+ *
+ * ```tsx
+ * const generatedId = useId();
+ * const field = useFieldControl();
+ * const inputId = id ?? field?.inputId ?? generatedId;
+ * ```
+ */
+declare function useFieldControl(): FieldControl | undefined;
+interface FieldProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 필드 이름. `Form` 의 `errors[name]` 을 찾는 키이자 입력 id 의 접두사 */
+    name: string;
+    /** 라벨 텍스트. `Field` 가 소유하므로 자식 입력에는 `label` 을 주지 않는다 */
+    label?: string;
+    /** 필수 표시(*). 자식 입력에 `aria-required` 로도 전달된다 */
+    required?: boolean;
+    /** 입력 아래 도움말. 에러가 있으면 에러가 대신 보인다 */
+    help?: React$1.ReactNode;
+    /**
+     * 에러 메시지. 지정하면 `Form` 의 `errors[name]` 보다 우선한다.
+     * 문자열이 아니어도 되지만 스크린리더가 읽으므로 텍스트를 권장한다.
+     */
+    error?: React$1.ReactNode;
+    /** 입력 하나 (`<TextField />`, `<Dropdown />` 등) */
+    children: React$1.ReactNode;
+}
+/**
+ * 라벨·필수 표시·도움말·에러와 그 접근성 연결을 소유하는 폼 필드 래퍼.
+ *
+ * 입력 11종은 label/supportingText/error 를 **서로 다르게** 갖고 있다 - 9종만 label 이 있고
+ * error 는 5종뿐이라, 폼 화면은 입력 밖에 문구를 직접 그려 왔다. `Field` 가 그 자리를 가져가면
+ * 어떤 입력을 넣어도 라벨 위치·간격·에러 문구·`aria-describedby` 가 같아진다.
+ *
+ * 입력의 기존 prop 은 그대로 살아 있다. `Field` 없이 쓰면 지금과 동일하게 동작한다.
+ *
+ * @example
+ * ```tsx
+ * <Field name="email" label="이메일" required help="로그인 ID 로 사용됩니다">
+ *   <TextField />
+ * </Field>
+ * ```
+ */
+declare const Field: ({ name, label, required, help, error: errorProp, children, className, ...props }: FieldProps) => React$1.JSX.Element;
+
 type FileInputVariant = "button" | "preview";
 interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
-    /** 파일 선택 버튼 라벨 / preview variant 빈 상태 텍스트 (기본값: "파일 선택") */
+    /** 파일 선택 버튼 라벨 / preview variant 빈 상태 텍스트 */
     label?: string;
     /** 파일 선택 시 호출되는 콜백 */
     onFiles?: (files: FileList | null) => void;
@@ -1830,7 +2313,48 @@ interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
  * @param props 파일 입력 속성
  * @returns 렌더링된 파일 입력 UI
  */
-declare const FileInput: ({ label, onFiles, supportingText, preview, variant, previewSize, className, disabled, accept, onChange, ...props }: FileInputProps) => React$1.JSX.Element;
+declare const FileInput: ({ label: labelProp, onFiles, supportingText, preview, variant, previewSize, className, disabled, accept, onChange, ...props }: FileInputProps) => React$1.JSX.Element;
+
+interface FormProps extends Omit<React$1.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    /**
+     * 필드 이름 → 에러 메시지. 해당 `Field` 가 자기 이름으로 찾아 표시한다.
+     * 서버 검증 실패(422) 응답을 필드에 꽂는 표준 경로다.
+     */
+    errors?: Record<string, React$1.ReactNode>;
+    /** 제출 콜백. `event.preventDefault()` 는 `Form` 이 이미 호출한 뒤 부른다 */
+    onSubmit?: (event: React$1.FormEvent<HTMLFormElement>) => void;
+    children: React$1.ReactNode;
+}
+/**
+ * `Field` 들을 묶어 세로 간격과 **서버 에러 배분**을 소유하는 폼 컨테이너.
+ *
+ * 폼 라이브러리에 의존하지 않는다 - `errors` 맵과 `onSubmit` 만 받으므로 react-hook-form 이든
+ * 수동 상태든 어댑터 한 겹으로 붙는다.
+ *
+ * @example
+ * ```tsx
+ * <Form onSubmit={save} errors={serverErrors}>
+ *   <Field name="email" label="이메일" required>
+ *     <TextField />
+ *   </Field>
+ *   <Form.Actions>
+ *     <Button type="submit">저장</Button>
+ *   </Form.Actions>
+ * </Form>
+ * ```
+ */
+declare const Form: {
+    ({ errors, onSubmit, children, className, ...props }: FormProps): React$1.JSX.Element;
+    Actions: {
+        ({ align, children, className, ...props }: FormActionsProps): React$1.JSX.Element;
+        displayName: string;
+    };
+};
+interface FormActionsProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** 버튼 정렬 (기본값: "end") */
+    align?: "start" | "center" | "end" | "between";
+    children: React$1.ReactNode;
+}
 
 /**
  * 정사각 이미지 크롭의 좌표 계산. 화면 조작(드래그 이동량 + 확대 배율)을 원본 픽셀 기준
@@ -1917,7 +2441,7 @@ interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onErro
  * 원격 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, hint, zoomOutLabel, zoomLabel, zoomInLabel, noPanHint, ...rest }: ImageCropperProps): React$1.JSX.Element;
+declare function ImageCropper({ ref, src, outputSize, outputType, quality, circular, viewportSize, minZoom, maxZoom, onReady, onError, className, label: labelProp, hint: hintProp, zoomOutLabel: zoomOutLabelProp, zoomLabel: zoomLabelProp, zoomInLabel: zoomInLabelProp, noPanHint: noPanHintProp, ...rest }: ImageCropperProps): React$1.JSX.Element;
 
 interface OtpInputProps {
     /** OTP 자릿수 (기본값: 6) */
@@ -1948,7 +2472,7 @@ interface OtpInputProps {
  * @returns 렌더링된 OTP 입력 요소
  */
 declare const OtpInput: {
-    ({ length, value, onValueChange, onChange, error, disabled, supportingText, autoFocus, ariaLabel, className, }: OtpInputProps): React$1.JSX.Element;
+    ({ length, value, onValueChange, onChange, error, disabled, supportingText, autoFocus, ariaLabel: ariaLabelProp, className, }: OtpInputProps): React$1.JSX.Element;
     displayName: string;
 };
 
@@ -2036,6 +2560,47 @@ declare const RadioGroup: {
     displayName: string;
 };
 
+type TagInputSize = "sm" | "md" | "lg";
+interface TagInputProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** 태그 목록 (제어형). 주지 않으면 내부 상태로 동작한다 */
+    value?: string[];
+    /** 비제어형 초기 태그 */
+    defaultValue?: string[];
+    /** 태그가 추가·제거될 때 */
+    onValueChange?: (tags: string[]) => void;
+    /** 입력 placeholder */
+    placeholder?: string;
+    /** 최대 개수. 도달하면 더 추가되지 않는다 */
+    maxTags?: number;
+    /** 같은 값을 여러 번 넣도록 허용 (기본값: false) */
+    allowDuplicates?: boolean;
+    /** 크기 */
+    size?: TagInputSize;
+    /** 비활성 여부 */
+    disabled?: boolean;
+    /** 전체 너비 차지 */
+    fullWidth?: boolean;
+    /** 접근성 이름 - `Field` 로 감싸면 그쪽 라벨이 우선한다 */
+    ariaLabel?: string;
+}
+/**
+ * 후보 목록에 없는 값을 사용자가 직접 만들어 넣는 다중 입력.
+ *
+ * 후보가 정해져 있으면 `Dropdown` 의 `multiple` 을, 후보를 서버에서 가져와야 하면 `Combobox` 를
+ * 쓴다. `TagInput` 이 맡는 것은 **목록 자체가 없는** 경우다 - 자유 키워드, 사내 라벨, 검색 필터처럼
+ * 사용자가 만들어 내는 값.
+ *
+ * 태그 칩은 `Chip` 의 `static` + `removable` 을 그대로 쓴다.
+ *
+ * @example
+ * ```tsx
+ * <Field name="keywords" label="키워드">
+ *   <TagInput value={tags} onValueChange={setTags} maxTags={10} />
+ * </Field>
+ * ```
+ */
+declare const TagInput: ({ value, defaultValue, onValueChange, placeholder: placeholderProp, maxTags, allowDuplicates, size, disabled, fullWidth, ariaLabel, className, ...props }: TagInputProps) => React$1.JSX.Element;
+
 type TextFieldSize = "sm" | "md" | "lg";
 /**
  * 입력 필드 시각 변형.
@@ -2050,9 +2615,9 @@ type TextFieldVariant = "outline" | "filled";
  */
 type ImeStrategy = "delayed" | "immediate";
 interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
-    /** 입력 필드 크기 (기본값: "md") */
+    /** 입력 필드 크기 */
     size?: TextFieldSize;
-    /** 입력 필드 시각 변형 (기본값: "outline") */
+    /** 입력 필드 시각 변형 */
     variant?: TextFieldVariant;
     /** 입력 필드 위에 표시할 라벨 텍스트 */
     label?: string;
@@ -2101,7 +2666,7 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
     };
     /** 값이 있을 때 오른쪽에 지우기(X) 버튼 표시 여부 */
     clearable?: boolean;
-    /** 지우기(X) 버튼의 `aria-label` (기본값: "지우기") */
+    /** 지우기(X) 버튼의 `aria-label` */
     clearLabel?: string;
     /** 컨테이너 전체 너비 차지 여부 */
     fullWidth?: boolean;
@@ -2131,7 +2696,7 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
  * @returns 렌더링된 텍스트 필드 UI
  */
 declare const TextField: {
-    ({ id, label, showLabel, supportingText, error, success, identifier, leadingIcon, trailingIcon, leadingAction, trailingAction, showPasswordToggle, passwordToggleLabels, clearable, clearLabel, type, fullWidth, size, variant, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): React$1.JSX.Element;
+    ({ id, label, showLabel, supportingText, error, success, identifier, leadingIcon, trailingIcon, leadingAction, trailingAction, showPasswordToggle, passwordToggleLabels, clearable, clearLabel: clearLabelProp, type, fullWidth, size, variant, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): React$1.JSX.Element;
     displayName: string;
 };
 
@@ -2202,6 +2767,49 @@ declare const Textarea: {
     displayName: string;
 };
 
+interface TimePickerProps {
+    /** 위에 표시할 라벨 */
+    label?: string;
+    /** 제어형 값 (`"HH:mm"`) */
+    value?: string;
+    /** 선택 변경 */
+    onValueChange: (value: string) => void;
+    /** 분 간격 (기본값: 5). 5·10·15·30 처럼 60 의 약수를 준다 */
+    minuteStep?: number;
+    /** 선택 가능한 가장 이른 시각 (`"HH:mm"`) */
+    minTime?: string;
+    /** 선택 가능한 가장 늦은 시각 (`"HH:mm"`) */
+    maxTime?: string;
+    /** 비활성 여부 */
+    disabled?: boolean;
+    /** 전체 너비 차지 (기본값: true) */
+    fullWidth?: boolean;
+    /** 시 select 의 라벨/placeholder */
+    hourLabel?: string;
+    /** 분 select 의 라벨/placeholder */
+    minuteLabel?: string;
+}
+/**
+ * 시·분 선택. `DatePicker` 와 같은 방식으로 DS `Dropdown` 두 개를 조합한다.
+ *
+ * 손으로 만들면 갈리는 것들을 여기서 소유한다.
+ *
+ * - **분 간격** — 예약·근무 시간은 5분·30분 단위인데 60개 옵션을 다 그리면 고르기 어렵다
+ * - **영업시간 밖 차단** — `minTime`/`maxTime` 이 시 목록까지 좁힌다. 분만 걸러 두면 09:00 이
+ *   최소인데 08시를 고를 수 있고, 그때 분 목록이 비어 막힌 화면이 된다
+ * - **경계에서의 분 목록** — 최소가 09:30 이면 09시의 분은 30분부터 시작한다
+ *
+ * 값은 24시간 `"HH:mm"` 이다 - 12시간 표기는 화면 표시의 문제라 소비자가 포맷한다.
+ *
+ * @example
+ * ```tsx
+ * <Field name="pickupAt" label="픽업 시각">
+ *   <TimePicker value={time} onValueChange={setTime} minuteStep={30} minTime="09:00" maxTime="21:00" />
+ * </Field>
+ * ```
+ */
+declare const TimePicker: ({ label, value, onValueChange, minuteStep, minTime, maxTime, disabled, fullWidth, hourLabel: hourLabelProp, minuteLabel: minuteLabelProp, }: TimePickerProps) => React$1.JSX.Element;
+
 interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
     /** 제어형 토글 상태 */
     checked?: boolean;
@@ -2258,37 +2866,46 @@ interface ButtonBaseProps {
      */
     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 필수) */
+/**
+ * Button props. `as` 로 렌더 요소를 바꾼다 - `"a"`, `Link`(Next.js) 등 무엇이든.
+ *
+ * `as` 를 주지 않으면 `<button>` 이고, `href` 만 주면 `<a>` 로 간다(예전부터 지원한 경로다).
+ * 그 경로를 유니온으로 만들면 `ref={(el) => …}` 의 파라미터 추론이 깨진다 - 기본 케이스에만
+ * `href` 를 더하는 조건부 교차로 두면 타입이 하나로 남아 추론이 유지된다.
+ *
+ * `as="a"` 면 `href` 는 **필수**다 - 판별 유니온 시절 `ButtonAsAnchor` 의 계약이고, `href` 없는
+ * `<a>` 는 링크 시맨틱(클릭·포커스)이 없어 접근성 트리에서 링크로 잡히지도 않는다. `React` 의
+ * `AnchorHTMLAttributes` 는 `href?` 라 그대로 두면 옵션으로 느슨해진다.
+ */
+type ButtonProps<T extends React$1.ElementType = "button"> = PolymorphicProps<T, ButtonBaseProps> & ("button" extends T ? {
+    href?: string;
+} : Record<never, never>) & ("a" extends T ? {
     href: string;
-    /** 루트 anchor 요소 ref (React 19 ref-as-prop) */
-    ref?: React$1.Ref<HTMLAnchorElement>;
-}
+} : Record<never, never>);
 /**
- * Button props - `as`/`href` 에 따라 button 또는 anchor 로 렌더링되는 discriminated union.
- * `as` 미지정 시 기본 `<button>` (기존 동작과 100% 호환).
+ * @deprecated `ButtonProps<"button">` 을 쓰세요. 리터럴 유니온 시절의 이름입니다.
  */
-type ButtonProps = ButtonAsButton | ButtonAsAnchor;
+type ButtonAsButton = ButtonProps<"button">;
+/**
+ * @deprecated `ButtonProps<"a">` 을 쓰세요. 리터럴 유니온 시절의 이름입니다.
+ */
+type ButtonAsAnchor = ButtonProps<"a">;
 /**
  * 버튼을 렌더링한다.
  * Figma DS 기준 4가지 variant(filled/tonal/outline/text)와 4가지 size(sm/md/lg/xl)를 지원한다.
- * `as="a"` (또는 `href` 지정) 시 동일 스타일의 anchor 로 렌더링한다.
- * @param props 버튼 속성
- * @returns 렌더링된 button 또는 anchor 요소
+ *
+ * `as` 로 렌더 요소를 바꾼다 - `as="a"`(또는 `href` 만 지정)는 anchor, `as={Link}` 는 라우터 링크.
+ *
+ * **native `disabled` 는 `<button>` 에만 준다.** 그 밖의 요소에는 `aria-disabled` +
+ * `tabIndex={-1}` + 클릭 차단으로 처리한다 - anchor 와 커스텀 컴포넌트에는 native disabled 가
+ * 없어서 그냥 넘기면 조용히 무시되고 비활성 버튼이 눌린다.
+ *
+ * @example
+ * ```tsx
+ * <Button as={Link} href="/orders">주문 보기</Button>
+ * ```
  */
-declare const Button: (props: ButtonProps) => React$1.JSX.Element;
+declare const Button: <T extends React$1.ElementType = "button">(props: ButtonProps<T>) => React$1.JSX.Element;
 
 type IconButtonVariant = "standard" | "filled" | "tonal" | "outlined";
 type IconButtonSize = "sm" | "md";
@@ -2347,9 +2964,9 @@ interface PaginationBaseProps {
     page: number;
     /** 전체 페이지 수 */
     totalPages: number;
-    /** 이전 페이지 버튼 aria-label (기본값: "이전 페이지") */
+    /** 이전 페이지 버튼 aria-label */
     prevLabel?: string;
-    /** 다음 페이지 버튼 aria-label (기본값: "다음 페이지") */
+    /** 다음 페이지 버튼 aria-label */
     nextLabel?: string;
     /** `<nav>` 랜드마크 이름 (기본값: "페이지 이동"). 스크린리더의 리전 목록에 그대로 뜬다 */
     navLabel?: string;
@@ -2368,7 +2985,7 @@ type PaginationProps = PaginationBaseProps & PaginationCallbacks;
  * @param props 페이지네이션 속성
  * @returns 렌더링된 페이지네이션 UI
  */
-declare const Pagination: ({ page, totalPages, onPageChange, onChange, prevLabel, nextLabel, navLabel, }: PaginationProps) => React$1.JSX.Element;
+declare const Pagination: ({ page, totalPages, onPageChange, onChange, prevLabel: prevLabelProp, nextLabel: nextLabelProp, navLabel: navLabelProp, }: PaginationProps) => React$1.JSX.Element;
 
 /** Drawer 가 미끄러져 들어오는 방향 (top 은 범위 외) */
 type DrawerPlacement = "left" | "right" | "bottom";
@@ -2377,7 +2994,7 @@ interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "titl
     open: boolean;
     /** 드로어 닫기 콜백 */
     onClose?: () => void;
-    /** 슬라이드 방향 (기본값: "right") */
+    /** 슬라이드 방향 */
     placement?: DrawerPlacement;
     /** 패널 크기 - left/right 는 너비, bottom 은 높이 (기본값: 360). number ⇒ px */
     size?: number | string;
@@ -2397,7 +3014,7 @@ interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "titl
     dismissible?: boolean;
     /** 우상단 X 닫기 아이콘 표시 여부 (기본값: true) */
     showCloseIcon?: boolean;
-    /** X 닫기 버튼 접근성 레이블 (기본값: "닫기") */
+    /** X 닫기 버튼 접근성 레이블 */
     closeLabel?: string;
     /**
      * 드로어 접근성 레이블. `title` 이 없을 때 이 값이 접근성 이름이 된다.
@@ -2418,7 +3035,7 @@ interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "titl
  * @returns 열림 상태일 때 렌더링된 드로어, 닫힘 상태면 null
  */
 declare const Drawer: {
-    ({ open, onClose, placement, size, title, footer, closeOnOverlay, dismissible, showCloseIcon, closeLabel, ariaLabel, onExited, children, className, ...props }: DrawerProps): React$1.ReactPortal | null;
+    ({ open, onClose, placement, size, title, footer, closeOnOverlay, dismissible, showCloseIcon, closeLabel: closeLabelProp, ariaLabel, onExited, children, className, ...props }: DrawerProps): React$1.ReactPortal | null;
     displayName: string;
 };
 
@@ -2450,7 +3067,7 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
     footerAlign?: ModalFooterAlign;
     /** 우상단 X 닫기 아이콘 표시 여부 (기본값: true) */
     showCloseIcon?: boolean;
-    /** X 닫기 버튼 접근성 레이블 (기본값: "닫기") */
+    /** X 닫기 버튼 접근성 레이블 */
     closeLabel?: string;
     /**
      * 모달 접근성 레이블. `title` 이 없으면 이 값이 유일한 접근성 이름이다 - 폴백이 없으므로
@@ -2469,7 +3086,128 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
  * @param props 모달 속성
  * @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
  */
-declare const Modal: ({ open, onClose, closeOnOverlay, dismissible, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, onExited, ...props }: ModalProps) => React$1.ReactPortal | null;
+declare const Modal: ({ open, onClose, closeOnOverlay, dismissible, width, title, description, footer, footerAlign, showCloseIcon, closeLabel: closeLabelProp, children, className, ariaLabel, onExited, ...props }: ModalProps) => React$1.ReactPortal | null;
+
+/**
+ * DS 가 스스로 렌더하는 모든 사용자 노출 문구. 컴포넌트 안에 흩어져 있던 기본값을 한곳에 모은다.
+ *
+ * 왜 한곳이어야 하나 - 소비자가 영어 화면을 만들려면 지금은 컴포넌트 **인스턴스마다** prop 을
+ * 넘겨야 한다. `Modal` 을 40번 쓰는 앱이면 `closeLabel` 을 40번 적는다. 하나라도 빠지면 그
+ * 화면만 한국어로 남는다.
+ *
+ * `{name}` 은 자리표시자다. 값은 `t(key, { name: … })` 로 채운다.
+ */
+interface LocaleMessages {
+    "chip.remove": string;
+    "dataView.clearSelection": string;
+    "dataView.empty": string;
+    "dataView.errorTitle": string;
+    "dataView.retry": string;
+    "dataView.search": string;
+    "dataView.selectionSummary": string;
+    "table.empty": string;
+    "table.rowClickHint": string;
+    "table.selectAll": string;
+    "table.selectRow": string;
+    "alert.cancel": string;
+    "alert.confirm": string;
+    "errorState.title": string;
+    "spinner.label": string;
+    "toast.close": string;
+    "toast.region": string;
+    "topLoading.label": string;
+    "combobox.empty": string;
+    "combobox.idle": string;
+    "combobox.loading": string;
+    "combobox.placeholder": string;
+    "datePicker.day": string;
+    "datePicker.minDateSr": string;
+    "datePicker.month": string;
+    "datePicker.rangeUntilTodaySr": string;
+    "datePicker.year": string;
+    "dateRange.end": string;
+    "dateRange.start": string;
+    "dropdown.empty": string;
+    "dropdown.placeholder": string;
+    "dropdown.searchPlaceholder": string;
+    "dropdown.selectedSummary": string;
+    "fileInput.label": string;
+    "fileInput.removeImage": string;
+    "imageCropper.hint": string;
+    "imageCropper.label": string;
+    "imageCropper.noPanHint": string;
+    "imageCropper.zoom": string;
+    "imageCropper.zoomIn": string;
+    "imageCropper.zoomOut": string;
+    "otpInput.digit": string;
+    "otpInput.label": string;
+    "tagInput.added": string;
+    "tagInput.addedWithNotes": string;
+    "tagInput.atCap": string;
+    "tagInput.duplicate": string;
+    "tagInput.placeholder": string;
+    "tagInput.removed": string;
+    "textField.clear": string;
+    "textField.passwordHide": string;
+    "textField.passwordShow": string;
+    "timePicker.hour": string;
+    "timePicker.minute": string;
+    "timePicker.rangeSr": string;
+    "bottomNav.label": string;
+    "breadcrumb.label": string;
+    "pagination.label": string;
+    "pagination.next": string;
+    "pagination.prev": string;
+    "sidebar.toggle": string;
+    "drawer.close": string;
+    "modal.close": string;
+}
+type LocaleKey = keyof LocaleMessages;
+/** 기본 카탈로그. 이 값이 각 컴포넌트의 기본 문구다 */
+declare const ko: LocaleMessages;
+/** 영어 카탈로그. `<LocaleProvider locale="en">` 로 고른다 */
+declare const en: LocaleMessages;
+declare const catalogs: {
+    readonly ko: LocaleMessages;
+    readonly en: LocaleMessages;
+};
+type LocaleName = keyof typeof catalogs;
+
+/** `t(key, vars)` - 카탈로그에서 문구를 꺼내고 `{name}` 자리표시자를 채운다 */
+type LocaleText = (key: LocaleKey, vars?: Record<string, string | number>) => string;
+interface LocaleProviderProps {
+    /** 기준 카탈로그 (기본값: "ko") */
+    locale?: LocaleName;
+    /** 기준 위에 덮어쓸 문구. 한 줄만 바꿀 때 쓴다 */
+    messages?: Partial<LocaleMessages>;
+    children?: React$1.ReactNode;
+}
+/**
+ * DS 가 스스로 렌더하는 문구를 한곳에서 정한다.
+ *
+ * Provider 가 없으면 한국어 카탈로그가 그대로 쓰인다 - 기존 소비자의 화면은 바뀌지 않는다.
+ *
+ * @example 영어 화면
+ * ```tsx
+ * <LocaleProvider locale="en">
+ *   <App />
+ * </LocaleProvider>
+ * ```
+ *
+ * @example 한 줄만 바꾸기
+ * ```tsx
+ * <LocaleProvider messages={{ "table.empty": "주문이 없습니다" }}>
+ * ```
+ */
+declare const LocaleProvider: ({ locale, messages, children }: LocaleProviderProps) => React$1.JSX.Element;
+/**
+ * 컴포넌트가 자기 기본 문구를 꺼내는 통로. Provider 밖에서는 한국어 카탈로그를 돌려준다.
+ *
+ * prop 으로 받은 값이 항상 우선이다 - `closeLabel ?? t("modal.close")`.
+ */
+declare function useLocaleText(): LocaleText;
+/** 현재 로케일 이름. 날짜·숫자 포맷을 소비자가 맞출 때 쓴다 */
+declare function useLocaleName(): LocaleName;
 
 type ThemeMode = "light" | "dark" | "system";
 type ResolvedTheme = "light" | "dark";
@@ -2508,8 +3246,47 @@ interface ThemeProviderProps {
  */
 declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
 
+interface AppShellProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** 좌측 네비게이션. 보통 `Sidebar` */
+    sidebar?: React$1.ReactNode;
+    /** 콘텐츠 열 위에 고정되는 헤더. 보통 `NavBar` */
+    header?: React$1.ReactNode;
+    /** 본문 여백 (기본값: true). 자체 여백을 가진 화면은 false */
+    padded?: boolean;
+    /** 루트 요소 ref (React 19 ref-as-prop) */
+    ref?: React$1.Ref<HTMLDivElement>;
+}
+/**
+ * 관리자·대시보드 화면의 껍데기. 사이드바 열 + 고정 헤더 + 본문을 한 곳에서 잡는다.
+ *
+ * 화면마다 `<div style={{ display: "flex", minHeight: "100vh" }}>` 로 다시 만들던 층이고,
+ * 그때마다 조용히 빠지던 것들을 여기서 소유한다.
+ *
+ * - **문서가 스크롤한다.** 본문을 `overflow-y: auto` 로 만들면 `Modal`·`Drawer` 의 스크롤
+ *   잠금(`body { overflow: hidden }`)이 본문에 닿지 않아 모달 뒤 배경이 계속 스크롤된다.
+ *   사이드바와 헤더는 `sticky` 로 붙인다.
+ * - **콘텐츠 열은 `minmax(0, 1fr)`.** 없으면 자기 넘침을 스스로 처리하지 않는 자식(줄바꿈 없는
+ *   긴 문자열, 폭이 고정된 블록)이 열 자체를 자기 폭까지 늘린다. 실측 - 1800px 자식을 넣으면
+ *   열이 1024px → 1869px 로 늘어나 고정 헤더와 모든 행이 화면보다 넓어진다. 이 값이 있으면
+ *   열은 뷰포트 폭에 머물고 넘침은 그 자식 안에 남는다.
+ * - **하단 크롬 여백.** `Sidebar` 는 600px 아래에서 fixed BottomBar 로 변신해 문서 흐름에서
+ *   빠지고, `BottomNav` 도 fixed 다. 본문 끝이 그 아래로 가려지지 않게 `--bt-bottom-inset`
+ *   만큼 띄운다.
+ *
+ * 헤더를 사이드바 위까지 꽉 채우려면 `AppShell` 밖에 두면 된다.
+ *
+ * @example
+ * ```tsx
+ * <AppShell sidebar={<Sidebar … />} header={<NavBar layout="fluid" sticky … />}>
+ *   <PageHeader title="대시보드" actions={<Button>추가</Button>} />
+ *   <DataView … />
+ * </AppShell>
+ * ```
+ */
+declare const AppShell: ({ sidebar, header, padded, className, children, ref, ...props }: AppShellProps) => React$1.JSX.Element;
+
 type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
-interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+interface ContainerOwnProps {
     /**
      * max-width 크기
      * - sm: 640px | md: 768px | lg: 1024px | xl: 1200px | full: 100%
@@ -2518,11 +3295,15 @@ interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
     size?: ContainerSize;
     /** 가운데 정렬 (기본 true) */
     center?: boolean;
-    /** 렌더링할 HTML 요소 */
-    as?: React$1.ElementType;
-    /** 루트 요소 ref (React 19 ref-as-prop) */
-    ref?: React$1.Ref<HTMLElement>;
 }
+/**
+ * Container props. `as` 로 렌더 요소를 바꾼다 - `"main"`·`"ul"` 같은 태그든 `Link` 같은
+ * 컴포넌트든, 그 요소의 props 가 타입에 그대로 따라온다.
+ *
+ * 예전에는 `as?: React.ElementType` 이라 요소만 갈리고 props 는 `div` 기준으로 고정돼,
+ * `as="a"` 로 바꿔도 `href` 가 타입에 없었다.
+ */
+type ContainerProps<T extends React$1.ElementType = "div"> = PolymorphicProps<T, ContainerOwnProps>;
 /**
  * max-width 제한 + 반응형 수평 패딩을 가진 컨테이너.
  * 모든 마케팅/서비스 페이지의 기본 wrapper.
@@ -2535,11 +3316,11 @@ interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
  * </Container>
  * ```
  */
-declare const Container: ({ size, center, as: Tag, ref, className, children, ...props }: ContainerProps) => React$1.JSX.Element;
+declare const Container: <T extends React$1.ElementType = "div">({ size, center, as, ref, className, children, ...props }: ContainerProps<T>) => 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> {
+interface GridOwnProps {
     /**
      * 열 수. "auto" = auto-fill (minColWidth 사용)
      * @default 3
@@ -2561,11 +3342,15 @@ interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
     colGap?: GridGap;
     /** 반응형 - compact(< 600px)에서 강제 1열 (기본 true) */
     singleColOnMobile?: boolean;
-    /** 렌더링할 HTML 요소 */
-    as?: React$1.ElementType;
-    /** 루트 요소 ref (React 19 ref-as-prop) */
-    ref?: React$1.Ref<HTMLElement>;
 }
+/**
+ * Grid props. `as` 로 렌더 요소를 바꾼다 - `"main"`·`"ul"` 같은 태그든 `Link` 같은
+ * 컴포넌트든, 그 요소의 props 가 타입에 그대로 따라온다.
+ *
+ * 예전에는 `as?: React.ElementType` 이라 요소만 갈리고 props 는 `div` 기준으로 고정돼,
+ * `as="a"` 로 바꿔도 `href` 가 타입에 없었다.
+ */
+type GridProps<T extends React$1.ElementType = "div"> = PolymorphicProps<T, GridOwnProps>;
 /**
  * CSS Grid 기반 2D 레이아웃 컨테이너.
  * 고정 열 수 또는 auto-fill 반응형 그리드.
@@ -2583,11 +3368,49 @@ interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
  * </Grid>
  * ```
  */
-declare const Grid: ({ cols, minColWidth, gap, rowGap, colGap, singleColOnMobile, as: Tag, ref, className, children, style, ...props }: GridProps) => React$1.JSX.Element;
+declare const Grid: <T extends React$1.ElementType = "div">({ cols, minColWidth, gap, rowGap, colGap, singleColOnMobile, as, ref, className, children, style, ...props }: GridProps<T>) => React$1.JSX.Element;
+
+interface PageHeaderProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 화면 제목. `h1` 로 렌더된다 */
+    title: React$1.ReactNode;
+    /** 제목 아래 한 줄 설명 */
+    description?: React$1.ReactNode;
+    /** 제목 위 경로. 보통 `Breadcrumb` */
+    breadcrumb?: React$1.ReactNode;
+    /** 우측 액션. 보통 `Button` 하나 또는 둘 */
+    actions?: React$1.ReactNode;
+    /** 제목 줄 아래에 붙는 영역. 보통 `TabList` */
+    tabs?: React$1.ReactNode;
+    /** 루트 요소 ref (React 19 ref-as-prop) */
+    ref?: React$1.Ref<HTMLDivElement>;
+}
+/**
+ * 화면 제목 줄. 경로 · 제목 · 설명 · 액션 · 탭을 한 규약으로 묶는다.
+ *
+ * 화면마다 `<h1 style={{ fontSize: 20, fontWeight: 600 }}>` 로 다시 만들던 층이다.
+ * 제목 크기와 설명 색을 화면마다 정하면 같은 제품 안에서 제목이 서로 다른 크기로 보인다.
+ *
+ * 제목은 `h1` 이다 - 화면의 제목이므로 문서에 하나만 있어야 한다.
+ *
+ * 겉은 `<header>` 가 아니라 `<div>` 다. `<header>` 는 `<main>` 안에 있어도 banner landmark 로
+ * 계산되므로(`main` 은 sectioning content 가 아니다), `NavBar` 의 `<header>` 와 banner 가 둘이
+ * 되어 landmark 목록이 망가진다.
+ *
+ * @example
+ * ```tsx
+ * <PageHeader
+ *   breadcrumb={<Breadcrumb items={…} />}
+ *   title="주문 관리"
+ *   description="최근 30일 주문을 봅니다"
+ *   actions={<Button>주문 추가</Button>}
+ * />
+ * ```
+ */
+declare const PageHeader: ({ title, description, breadcrumb, actions, tabs, className, ref, ...props }: PageHeaderProps) => 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> {
+interface SectionOwnProps {
     /**
      * 수직 패딩 크기
      * - xs: 32px | sm: 48px | md: 64px | lg: 96px | xl: 128px
@@ -2600,11 +3423,15 @@ interface SectionProps extends React$1.HTMLAttributes<HTMLElement> {
      * @default "default"
      */
     bg?: SectionBg;
-    /** 렌더링할 HTML 요소 */
-    as?: React$1.ElementType;
-    /** 루트 요소 ref (React 19 ref-as-prop) */
-    ref?: React$1.Ref<HTMLElement>;
 }
+/**
+ * Section props. `as` 로 렌더 요소를 바꾼다 - `"main"`·`"ul"` 같은 태그든 `Link` 같은
+ * 컴포넌트든, 그 요소의 props 가 타입에 그대로 따라온다.
+ *
+ * 예전에는 `as?: React.ElementType` 이라 요소만 갈리고 props 는 `div` 기준으로 고정돼,
+ * `as="a"` 로 바꿔도 `href` 가 타입에 없었다.
+ */
+type SectionProps<T extends React$1.ElementType = "section"> = PolymorphicProps<T, SectionOwnProps>;
 /**
  * 마케팅 페이지의 섹션 단위. 수직 여백 + 배경색 variants.
  *
@@ -2618,14 +3445,14 @@ interface SectionProps extends React$1.HTMLAttributes<HTMLElement> {
  * </Section>
  * ```
  */
-declare const Section: ({ spacing, bg, as: Tag, ref, className, children, ...props }: SectionProps) => React$1.JSX.Element;
+declare const Section: <T extends React$1.ElementType = "section">({ spacing, bg, as, ref, className, children, ...props }: SectionProps<T>) => React$1.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> {
+interface StackOwnProps {
     /**
      * flex 방향
      * @default "vertical"
@@ -2642,11 +3469,15 @@ interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
     justify?: StackJustify;
     /** flex-wrap */
     wrap?: StackWrap;
-    /** 렌더링할 HTML 요소 */
-    as?: React$1.ElementType;
-    /** 루트 요소 ref (React 19 ref-as-prop) */
-    ref?: React$1.Ref<HTMLElement>;
 }
+/**
+ * Stack props. `as` 로 렌더 요소를 바꾼다 - `"main"`·`"ul"` 같은 태그든 `Link` 같은
+ * 컴포넌트든, 그 요소의 props 가 타입에 그대로 따라온다.
+ *
+ * 예전에는 `as?: React.ElementType` 이라 요소만 갈리고 props 는 `div` 기준으로 고정돼,
+ * `as="a"` 로 바꿔도 `href` 가 타입에 없었다.
+ */
+type StackProps<T extends React$1.ElementType = "div"> = PolymorphicProps<T, StackOwnProps>;
 /**
  * Flex 기반 1D 레이아웃 컨테이너.
  * 수직(column) / 수평(row) 스택 + 간격/정렬 제어.
@@ -2664,6 +3495,6 @@ interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
  * </Stack>
  * ```
  */
-declare const Stack: ({ direction, gap, align, justify, wrap, as: Tag, ref, className, children, style, ...props }: StackProps) => React$1.JSX.Element;
+declare const Stack: <T extends React$1.ElementType = "div">({ direction, gap, align, justify, wrap, as, ref, className, children, style, ...props }: StackProps<T>) => React$1.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, type AlertActionsAlign, type AlertOptions, AlertProvider, type AlertVariant, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeAppearance, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchor, type ButtonAsButton, type ButtonProps, type ButtonSize, type ButtonVariant, 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 DropdownMultipleProps, type DropdownOption, type DropdownProps, type DropdownSingleProps, type DropdownSize, type DropdownVariant, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, FileInput, type FileInputProps, type FileInputVariant, 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 ModalFooterAlign, 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, Prose, type ProseProps, type ProseSize, Radio, RadioGroup, type RadioGroupContextValue, 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, type TextFieldVariant, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, ToastProvider, type ToastProviderProps, type ToastVariant, 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, useRadioGroupContext, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
+export { Accordion, type AccordionItem, type AccordionProps, type AlertActionsAlign, type AlertOptions, AlertProvider, type AlertVariant, AppShell, type AppShellProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeAppearance, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonAsAnchor, type ButtonAsButton, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardFooterAlign, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSize, Container, type ContainerProps, type ContainerSize, type CropImageSize, type CropOffset, type CropRect, DataView, type DataViewPagination, type DataViewProps, type DataViewQuery, type DataViewSelectionAction, type DataViewToolbar, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DescriptionList, type DescriptionListItem, type DescriptionListLayout, type DescriptionListProps, Divider, type DividerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, type DropdownMultipleProps, type DropdownOption, type DropdownProps, type DropdownSingleProps, type DropdownSize, type DropdownVariant, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, Field, type FieldControl, type FieldProps, FileInput, type FileInputProps, type FileInputVariant, Form, type FormActionsProps, type FormProps, 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, type ListboxItem, type LocaleKey, type LocaleMessages, type LocaleName, LocaleProvider, type LocaleProviderProps, type LocaleText, MediaCard, type MediaCardImage, type MediaCardImagePosition, type MediaCardProps, type MediaCardShadow, Menu, type MenuItem, type MenuProps, Modal, type ModalFooterAlign, type ModalProps, NavBar, type NavBarLayout, type NavBarLocaleConfig, type NavBarLocaleOption, type NavBarProps, type NavBarVariant, NavLink, type NavLinkProps, OtpInput, type OtpInputProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, type PolymorphicProps, type PolymorphicRef, Popover, type PopoverPlacement, type PopoverProps, Prose, type ProseProps, type ProseSize, Radio, RadioGroup, type RadioGroupContextValue, 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, Stat, type StatDeltaTone, type StatProps, 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, TagInput, type TagInputProps, type TagInputSize, TextField, type TextFieldProps, type TextFieldSize, type TextFieldVariant, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineStatus, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TopLoading, type TopLoadingProps, type UseListboxPopupArgs, type UseListboxPopupResult, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, catalogs, cn, colors, elevation, en, iconSize, ko, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFieldControl, useFocusTrap, useListboxPopup, useLocaleName, useLocaleText, useRadioGroupContext, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };