@thewrong/ui 0.1.0

package/dist/src/components/table/paginated-mini-table.d.ts

@@ -0,0 +1,28 @@
+import { MiniTableProps } from './mini-table';
+export interface PaginatedMiniTableProps<T> extends MiniTableProps<T> {
+    /** 1-base. */
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (size: number) => void;
+    hasPreviousPage?: boolean;
+    hasNextPage?: boolean;
+    totalElements?: number;
+    /** "총 N건" 노출 여부. 통계 카드 디폴트는 노출 안 함. @default false */
+    showTotalCount?: boolean;
+    /** 페이지 점프 입력 + 키보드 가이드. 통계 카드 디폴트는 노출 안 함. @default false */
+    enablePageJump?: boolean;
+    /** Alt + ←/→ 네비게이션. 통계 카드 디폴트는 비활성. @default false */
+    enableKeyboardPagination?: boolean;
+}
+/**
+ * PaginatedMiniTable — MiniTable + PaginationFooter.
+ *
+ * 통계/요약 카드용 — 페이지네이션 바만 깔끔히 보이도록 footer 옵션의 디폴트가 모두 false.
+ * 필요 시 prop으로 켤 수 있음.
+ */
+export declare const PaginatedMiniTable: <T>(props: PaginatedMiniTableProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;

package/dist/src/components/table/paginated-table.d.ts

@@ -0,0 +1,8 @@
+import { PaginatedTableProps } from './types';
+/**
+ * PaginatedTable — Table 코어를 래핑해 페이지네이션 footer를 추가한 변형.
+ * Table 본체 로직(헤더 정렬·리사이즈·grip, 본문 스트라이프·선택·sticky, 컬럼 프리셋)은 Table에 그대로 위임한다.
+ */
+export declare const PaginatedTable: <T>(props: PaginatedTableProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;

package/dist/src/components/table/table.d.ts

@@ -0,0 +1,10 @@
+import { TableProps } from './types';
+/**
+ * Table — 코어 테이블. 헤더(정렬/리사이즈/grip 드래그) + 본문(스트라이프/선택/sticky) + 컬럼 프리셋.
+ *
+ * 페이지네이션이 없는 조회 API 또는 페이지네이션 영역을 별도로 렌더하는 경우 사용.
+ * PaginatedTable은 이 컴포넌트를 wrap해서 footer(Pagination/PageJump/PageSize)를 추가.
+ */
+export declare const Table: <T>(props: TableProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.ReactElement;

package/dist/src/components/table/types.d.ts

@@ -0,0 +1,409 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+/**
+ * Table 컴포넌트의 스타일 변형 타입
+ */
+export type TableVariant = "default" | "bordered" | "striped";
+/**
+ * Table 컴포넌트의 크기 타입
+ */
+export type TableSize = "small" | "medium" | "large";
+/**
+ * 컬럼 정렬 방향 타입
+ */
+export type SortDirection = "asc" | "desc" | null;
+/**
+ * 컬럼 정렬 정보
+ */
+export interface ColumnSort {
+    key: string;
+    direction: SortDirection;
+}
+/**
+ * Table에 외부에서 주입하는 controlled 컬럼 상태.
+ *
+ * 순서/숨김/너비를 한 묶음으로 받는다. Table은 이 객체를 통해서만 컬럼 상태를 다루며,
+ * 데이터 소스(useColumnPresets 등)에 대해서는 모른다.
+ */
+export interface TableColumnState {
+    /** 헤더에 실제로 그릴 순서. excludeFromPreset 컬럼은 columns 정의 위치 기준으로 외부에서 끼워넣어야 한다. */
+    columnOrder: string[];
+    /** 화면에서 숨길 컬럼 키. */
+    hiddenColumns: string[];
+    /** 컬럼 키 → 픽셀 너비. 누락 키는 자동 계산값/컬럼 정의 사용. */
+    columnWidths: Record<string, number>;
+    /** 헤더 DnD 후 호출. 새 순서를 외부 store에 반영한다. */
+    onColumnOrderChange: (next: string[]) => void;
+    /** 헤더 리사이즈/드롭다운 너비 조정 후 호출. */
+    onColumnWidthsChange: (widths: Record<string, number>) => void;
+}
+/**
+ * Table 컬럼 정의
+ */
+export interface TableColumn<T> {
+    /**
+     * 컬럼의 고유 키
+     */
+    key: string;
+    /**
+     * 컬럼 헤더 텍스트 또는 컴포넌트
+     */
+    header: string | ReactNode;
+    /**
+     * 행 데이터에서 값을 추출하는 함수
+     * @param row 행 데이터
+     * @returns 렌더링할 ReactNode
+     */
+    accessor?: (row: T) => ReactNode;
+    /**
+     * 정렬 가능 여부
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * 컬럼 정렬 방향
+     * @default null
+     */
+    sortDirection?: SortDirection;
+    /**
+     * 컬럼 정렬 변경 콜백
+     */
+    onSort?: (direction: SortDirection) => void;
+    /**
+     * 컬럼 정렬 정렬
+     * @default 'left'
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * 컬럼 너비 (CSS 값 또는 숫자)
+     */
+    width?: string | number;
+    /**
+     * 컬럼 최소 너비 (px)
+     */
+    minWidth?: number;
+    /**
+     * 스티키 컬럼 여부 (좌측 고정)
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * 모바일에서 숨기기 여부
+     * @default false
+     */
+    hideOnMobile?: boolean;
+    /**
+     * 컬럼 숨기기 여부
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * 프리셋(순서 변경/숨김) 대상에서 제외 여부
+     * 시스템 컬럼(선택, 액션 등)에 사용해요.
+     * @default false
+     */
+    excludeFromPreset?: boolean;
+}
+/**
+ * 컬럼 그룹 메타 — `Table`이 thead 상단에 그룹 헤더를 그리기 위해 받는 메타데이터.
+ *
+ * 옵션 2 정책:
+ * - 그룹은 "묶음 고정". 하위 컬럼들이 항상 함께 표시되고 함께 숨겨진다.
+ * - 그룹 자체는 단일 슬롯처럼 취급 — 그룹 단위로 순서 이동/숨김.
+ * - 그룹 내부 컬럼은 사용자가 순서·너비를 조정할 수 없다 (정의 시점에 박힘).
+ *
+ * 사용 방법:
+ * 1. `columns`는 평면 `TableColumn[]`로 정의 (기존과 동일).
+ * 2. 그룹화하고 싶은 컬럼들의 key를 모아 `columnGroups: [{ key, header, columnKeys: [...] }]`로 전달.
+ * 3. `columns` 배열 안에서 같은 그룹의 컬럼들은 인접한 순서로 두어야 한다 (그룹 단위로 함께 이동).
+ */
+export interface TableColumnGroupMeta {
+    /** 그룹 슬롯 키 — columnOrder/hiddenColumns에서 그룹을 식별. */
+    key: string;
+    /** 그룹 헤더 (thead 상단 row에 colSpan으로 표시) */
+    header: string | ReactNode;
+    /** 그룹에 속한 하위 컬럼 key 목록. 표시 순서대로. */
+    columnKeys: string[];
+    /** 모바일에서 그룹 전체 숨기기. */
+    hideOnMobile?: boolean;
+}
+/**
+ * Table 컴포넌트의 공통 Props
+ */
+export interface TableCommonProps<T> {
+    /**
+     * 테이블에 표시할 데이터 배열
+     */
+    data: T[];
+    /**
+     * 컬럼 정의 배열. 평면 `TableColumn`만 받는다(legacy/accordion 호환).
+     * 컬럼 그룹은 `Table` 컴포넌트에 `columnGroups` prop으로 별도 전달.
+     */
+    columns: TableColumn<T>[];
+    /**
+     * 가상화 사용 여부 (자동 감지 시 undefined)
+     * @default undefined (자동 감지)
+     */
+    virtualized?: boolean;
+    /**
+     * 가상화 자동 감지 임계값 (이 개수 이상일 때 자동 가상화)
+     * @default 100
+     */
+    virtualizedThreshold?: number;
+    /**
+     * 예상 행 높이 (px, 가상화용)
+     * @default 50
+     */
+    estimatedRowHeight?: number;
+    /**
+     * 행 높이 (px, 일반 테이블용)
+     */
+    rowHeight?: number;
+    /**
+     * 로딩 상태 — 본문 전체를 스피너로 대체. 첫 fetch에 사용.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 백그라운드 재조회 중 — 기존 데이터를 유지한 채 dim + 스피너 오버레이.
+     * placeholderData 패턴에서 검색/페이지 이동 중 시각적 시그널 용도.
+     * @default false
+     */
+    isFetching?: boolean;
+    /**
+     * 빈 상태 메시지
+     * @default "데이터가 없어요"
+     */
+    emptyMessage?: string;
+    /**
+     * 행 클릭 핸들러
+     */
+    onRowClick?: (row: T, index: number) => void;
+    /**
+     * 선택된 행 배열
+     */
+    selectedRows?: T[];
+    /**
+     * 행 선택 변경 핸들러
+     */
+    onRowSelect?: (row: T, selected: boolean) => void;
+    /**
+     * 행 선택 사용 여부
+     * @default false
+     */
+    enableRowSelection?: boolean;
+    /**
+     * 전체 선택 사용 여부
+     * @default false
+     */
+    enableSelectAll?: boolean;
+    /**
+     * 행 비교 함수 (선택된 행 확인용)
+     */
+    rowCompare?: (row1: T, row2: T) => boolean;
+    /**
+     * 행의 안정 식별자. 드래그 다중 선택에서 ID 추적에 사용된다.
+     * 미지정 시 드래그 선택은 row index 기반으로 동작하며, 데이터 변경 시 어긋날 수 있다.
+     */
+    getRowId?: (row: T) => string | number;
+    /**
+     * 정렬 사용 여부 (클라이언트 사이드 정렬)
+     * @default false
+     */
+    enableSorting?: boolean;
+    /**
+     * 서버 사이드 정렬 사용 여부
+     * @default false
+     */
+    serverSideSorting?: boolean;
+    /**
+     * 정렬 변경 핸들러 (서버 사이드 정렬 시)
+     */
+    onSortChange?: (sort: ColumnSort | null) => void;
+    /**
+     * 초기 정렬 상태
+     */
+    initialSort?: ColumnSort;
+    /**
+     * 테이블 스타일 변형
+     * @default 'default'
+     */
+    variant?: TableVariant;
+    /**
+     * 테이블 크기
+     * @default 'medium'
+     */
+    size?: TableSize;
+    /**
+     * 스티키 헤더 여부
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * 테이블 높이 (가상화 시 필수)
+     */
+    height?: string | number;
+    /**
+     * 테이블 최대 높이
+     */
+    maxHeight?: string | number;
+    /**
+     * 테스트 ID (data-testid)
+     */
+    "data-testid"?: string;
+    /**
+     * 추가 클래스명
+     */
+    className?: string;
+    /**
+     * 페이지네이션 모드
+     * - 'none': 페이지네이션 없음
+     * - 'pagination': 페이지네이션 버튼 표시
+     * - 'infinite': 무한스크롤
+     * @default 'none'
+     */
+    paginationMode?: "none" | "pagination" | "infinite";
+    /**
+     * 현재 페이지 (페이지네이션 모드)
+     */
+    currentPage?: number;
+    /**
+     * 전체 페이지 수 (페이지네이션 모드)
+     */
+    totalPages?: number;
+    /**
+     * 페이지 변경 핸들러 (페이지네이션 모드)
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * 다음 페이지 로드 함수 (무한스크롤 모드)
+     */
+    fetchNextPage?: () => void;
+    /**
+     * 다음 페이지 존재 여부 (무한스크롤 모드)
+     */
+    hasNextPage?: boolean;
+    /**
+     * 다음 페이지 로딩 중 여부 (무한스크롤 모드)
+     */
+    isFetchingNextPage?: boolean;
+    /**
+     * 전체 데이터 개수 (무한스크롤 모드)
+     */
+    totalElements?: number;
+    /**
+     * 컬럼 너비 저장 키 (localStorage 키, 저장 기능 활성화).
+     * `columnState`가 주어지면 무시된다.
+     */
+    storageKey?: string;
+    /**
+     * 외부에서 제어하는 컬럼 상태 묶음(순서/숨김/너비 + 변경 핸들러).
+     * 주어지면 Table은 자체 상태를 만들지 않고 이 객체의 값을 사용한다.
+     *
+     * Table은 "프리셋"이라는 개념을 모르고, 컬럼 상태의 소스(useColumnPresets, URL state 등)는
+     * 외부가 관리한다. ColumnPresetSelector를 사용하려면 외부에서 같은 객체를 셀렉터에도 주입한다.
+     */
+    columnState?: TableColumnState;
+    /**
+     * 데이터가 적어 컨테이너가 비어 보일 때 빈 행으로 채워 높이를 유지한다.
+     * 비가상화 분기에서만 적용된다.
+     * @default true
+     */
+    fillEmptyRows?: boolean;
+}
+/**
+ * 레거시 테이블 props — 가상화 / 무한스크롤 / 모바일 카드 분기를 모두 한 컴포넌트에 담은 구버전.
+ * 신규 페이지는 `Table`(단순) 또는 `PaginatedTable`을 사용하고, 이 prop은 기존 사용처가 점진
+ * 마이그레이션 끝나면 제거 예정.
+ */
+export interface LegacyTableProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children">, TableCommonProps<T> {
+}
+/**
+ * Table 코어 props — 페이지네이션 없는 단순 테이블.
+ * PaginatedTable은 이 베이스에 페이지네이션 props를 더한 형태.
+ */
+export interface TableProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children">, Omit<TableCommonProps<T>, "virtualized" | "virtualizedThreshold" | "estimatedRowHeight" | "paginationMode" | "fetchNextPage" | "hasNextPage" | "isFetchingNextPage" | "currentPage" | "totalPages" | "onPageChange"> {
+    /**
+     * 마지막 페이지 등 행이 부족할 때 빈 행으로 채워서 테이블 높이 유지
+     * @default true
+     */
+    fillEmptyRows?: boolean;
+    /**
+     * 총 항목 수 — 본문 아래 우하단에 "총 N건" 자동 표기.
+     * `footerSlot`이 함께 주어지면 footerSlot이 우선되고 이 값은 무시된다.
+     */
+    totalElements?: number;
+    /**
+     * 테이블 본문 아래에 렌더링할 추가 영역. PaginatedTable이 페이지네이션 footer를 주입할 때 사용.
+     * 주어지면 `totalElements` 기반 기본 footer는 그려지지 않는다.
+     */
+    footerSlot?: ReactNode;
+    /**
+     * 컬럼 그룹 메타 — thead 상단에 그룹 헤더(colSpan)를 그리고, 컬럼 프리셋이 그룹 단위로
+     * 순서/숨김을 다루게 한다. 옵션 2 정책: 그룹은 묶음 고정(내부 컬럼 customization 불가).
+     */
+    columnGroups?: TableColumnGroupMeta[];
+}
+/**
+ * PaginatedTable 전용 Props — Table 베이스 + 페이지네이션 영역.
+ *
+ * 무한스크롤/가상화는 지원하지 않고 페이지네이션 전용이에요.
+ * 페이지 사이즈 셀렉터 UI도 함께 제공해요.
+ */
+export interface PaginatedTableProps<T> extends TableProps<T> {
+    /**
+     * 현재 페이지 (1-base)
+     */
+    currentPage: number;
+    /**
+     * 전체 페이지 수
+     */
+    totalPages: number;
+    /**
+     * 페이지 변경 핸들러
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * 현재 페이지 사이즈
+     */
+    pageSize?: number;
+    /**
+     * 선택 가능한 페이지 사이즈 옵션
+     * @default [30, 50, 100]
+     */
+    pageSizeOptions?: number[];
+    /**
+     * 페이지 사이즈 변경 핸들러 (값이 있어야 셀렉터 노출)
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * 총 항목 수 — footer에 "총 N건" 표기.
+     */
+    totalElements?: number;
+    /**
+     * 이전 페이지 존재 여부 (백엔드 메타필드 `hasPrevious`).
+     * 미지정 시 `currentPage > 1`로 자동 판정.
+     */
+    hasPreviousPage?: boolean;
+    /**
+     * 다음 페이지 존재 여부 (백엔드 메타필드 `hasNext`).
+     * 미지정 시 `currentPage < totalPages`로 자동 판정.
+     */
+    hasNextPage?: boolean;
+    /**
+     * Alt(Option) + ←/→로 이전/다음 페이지 네비게이션 활성화
+     * 실수 방지를 위해 modifier 키를 강제하고, 인풋/편집 요소 안에서는 무시해요.
+     * @default true
+     */
+    enableKeyboardPagination?: boolean;
+    /**
+     * footer 좌측 "총 N건" 표시. 대시보드 류 미리보기 카드에서 노이즈를 줄이고 싶을 때 false.
+     * @default true
+     */
+    showTotalCount?: boolean;
+    /**
+     * 페이지 점프 입력(특정 페이지로 바로 이동) + 키보드 가이드 노출.
+     * false면 페이지네이션 바만 남아 가장 가벼운 UI가 됨 (대시보드 류 미리보기에 적합).
+     * @default true
+     */
+    enablePageJump?: boolean;
+}

package/dist/src/components/table/utils.d.ts

@@ -0,0 +1,47 @@
+import { TableVariant, TableSize } from './types';
+/**
+ * Table의 기본 클래스 (공통 스타일)
+ */
+export declare const getTableBaseClasses: () => string;
+/**
+ * Table 스타일 변형에 따른 Tailwind 클래스 매핑
+ */
+export declare const getTableVariantClasses: (variant?: TableVariant) => string;
+/**
+ * Table 크기에 따른 Tailwind 클래스 매핑
+ */
+export declare const getTableSizeClasses: (size?: TableSize) => string;
+/**
+ * 컬럼 정렬에 따른 Tailwind 클래스 매핑
+ */
+export declare const getColumnAlignClasses: (align?: "left" | "center" | "right") => string;
+/**
+ * 테이블 헤더 기본 클래스
+ */
+export declare const getTableHeaderClasses: () => string;
+/**
+ * 테이블 헤더 셀 클래스 (패딩 최소화). 우측 보더로 컬럼 구분선.
+ */
+export declare const getTableHeaderCellClasses: () => string;
+/**
+ * 테이블 셀 기본 클래스
+ */
+export declare const getTableCellClasses: () => string;
+/**
+ * 셀 잘림 없이 표시 — overflow-hidden/text-ellipsis 제거 버전.
+ * MiniTable처럼 가로 스크롤로 컨텐츠 다 보여주는 컨텍스트용.
+ */
+export declare const getTableCellClassesNoTruncate: () => string;
+/**
+ * 스트라이프 행 스타일
+ * 첫 번째(index 0): 회색, 두 번째(index 1): 흰색
+ */
+export declare const getStripedRowClasses: (index: number) => string;
+/**
+ * 선택된 행 스타일
+ */
+export declare const getSelectedRowClasses: () => string;
+/**
+ * 호버 가능한 행 스타일
+ */
+export declare const getHoverableRowClasses: () => string;

package/dist/src/components/table-checkbox/TableCheckbox.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    checked: boolean;
+    /** 일부만 선택된 상태(전체선택 헤더용). true이면 가로선 아이콘 표시. */
+    indeterminate?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    /** 드래그 선택 등 부모가 클릭을 가로챌 때 hit-test를 비활성화한다. */
+    pointerEventsNone?: boolean;
+    ariaLabel?: string;
+}
+/**
+ * 테이블 전용 체크박스. 시각용 box를 label로 감싸 클릭/접근성을 확보하고, 드래그 선택 모드에선
+ * pointerEventsNone로 부모가 마우스를 가로챌 수 있게 한다.
+ */
+export declare const TableCheckbox: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/src/components/table-checkbox/index.d.ts

@@ -0,0 +1 @@
+export { TableCheckbox } from './TableCheckbox';

package/dist/src/components/table-page-layout/TablePageLayout.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+/**
+ * 페이지 헤더/툴바의 액션 버튼 크기 — 모바일은 mini, 그 외 small.
+ * 헤더 자체는 폰트/패딩이 Tailwind 반응형으로 줄어들지만 Button size prop은
+ * 클래스 토글이 아니라서 별도 훅으로 제공.
+ */
+export declare function useHeaderButtonSize(): "mini" | "small";
+interface TablePageLayoutProps {
+    children: ReactNode;
+}
+interface PageHeaderProps {
+    title: ReactNode;
+    /** 우측 액션 영역(버튼 등). 비우면 우측이 비워진 채 헤더만 렌더된다. */
+    children?: ReactNode;
+}
+interface TableCardProps {
+    children: ReactNode;
+}
+export declare function TablePageLayout({ children }: TablePageLayoutProps): import("react").JSX.Element;
+export declare function PageHeader({ title, children }: PageHeaderProps): import("react").JSX.Element;
+export declare function TableCard({ children }: TableCardProps): import("react").JSX.Element;
+export {};

package/dist/src/components/table-page-layout/index.d.ts

@@ -0,0 +1 @@
+export { TablePageLayout, PageHeader, TableCard, useHeaderButtonSize, } from './TablePageLayout';

package/dist/src/components/textarea/Textarea.d.ts

@@ -0,0 +1,10 @@
+import { TextareaProps } from './types';
+/**
+ * Textarea 컴포넌트.
+ *
+ * @example
+ * <Textarea label="메모" placeholder="내용을 입력하세요" rows={4} />
+ * <Textarea hasError help="필수 항목이에요" />
+ * <Textarea maxLength={200} showCount />
+ */
+export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist/src/components/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+export type { TextareaProps, TextareaSize } from './types';

package/dist/src/components/textarea/types.d.ts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+/**
+ * Textarea 사이즈. Button/Input/Select와 정렬된 토큰 — 같은 size에서 동일 rounded/horizontal padding.
+ * height는 가변이라 정렬 대상 아님(rows로 결정).
+ * - mini: 모바일/매우 좁은 영역
+ * - small: 다건 입력/표 형식 기본
+ * - medium: 폼 단독 입력 기본
+ * - large: 메인 페이지의 강조 입력
+ */
+export type TextareaSize = "mini" | "small" | "medium" | "large";
+export interface TextareaProps extends Omit<ComponentPropsWithoutRef<"textarea">, "size"> {
+    /**
+     * 사이즈 — Button/Input/Select와 정렬.
+     * @default 'medium'
+     */
+    textareaSize?: TextareaSize;
+    /** 상단 라벨 */
+    label?: string;
+    /** 하단 도움말 */
+    help?: ReactNode;
+    /** 에러 상태 */
+    hasError?: boolean;
+    /**
+     * 글자 수 카운터 표시 여부.
+     * maxLength prop이 있어야 의미가 있음 (예: `12 / 200`).
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * 사용자가 크기 조절 가능 여부.
+     * 기본은 false — 모달/드로어/고정 레이아웃 안에서 UI 깨짐 방지.
+     * 자유 메모처럼 늘려쓸 필요가 있는 곳에서만 true.
+     * @default false
+     */
+    resize?: boolean;
+    /** 컨테이너 추가 클래스 */
+    containerClassName?: string;
+}

package/dist/src/components/toast/ToastProvider.d.ts

@@ -0,0 +1,26 @@
+export interface ToastProviderProps {
+    children?: React.ReactNode;
+}
+/**
+ * ToastProvider — 토스트 디자인이 적용된 react-hot-toast Toaster 래퍼.
+ *
+ * 앱 루트(또는 Storybook preview)에 한 번 마운트하면, 이후 `toast.success()` / `toast.error()` /
+ * `toast.loading()` / `toast()`(blank=info) 호출이 이 디자인으로 렌더된다.
+ * ActionToast(`showActionToast`)도 같은 Toaster를 공유한다.
+ *
+ * - 데스크탑: bottom-center / 모바일: top-center (safe-area-inset-top 반영)
+ * - 다크 그레이 배경 + lucide 아이콘 + 닫기 버튼
+ *
+ * @example
+ * ```tsx
+ * // 앱 루트
+ * <ToastProvider>
+ *   <App />
+ * </ToastProvider>
+ *
+ * // 어디서든
+ * import toast from "react-hot-toast";
+ * toast.success("저장됐어요");
+ * ```
+ */
+export declare function ToastProvider({ children }: ToastProviderProps): import("react").JSX.Element;

package/dist/src/components/toast/index.d.ts

@@ -0,0 +1,3 @@
+export { ToastProvider } from './ToastProvider';
+export type { ToastProviderProps } from './ToastProvider';
+export { default as toast } from 'react-hot-toast';