@idbrnd/design-system 1.7.4 → 1.9.0

package/dist/components/Table/Table.types.d.ts

@@ -0,0 +1,68 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { Row, Table } from "@tanstack/react-table";
+export type TableVariant = "normal" | "content";
+interface BaseTableProps<TData> {
+    /** useReactTable()로 생성한 TanStack Table 인스턴스 */
+    table: Table<TData>;
+    /** 테이블 스타일 변형
+     * @defaultValue `'normal'`
+     */
+    variant?: TableVariant;
+    /** 첫 번째 컬럼에 행 선택 체크박스 표시 여부.
+     * useReactTable에 `enableRowSelection`, `state.rowSelection`, `onRowSelectionChange` 설정 필요
+     * @defaultValue `false`
+     */
+    selectable?: boolean;
+    /** 행 hover/focus/pressed/selected 인터랙션 활성화 여부
+     * @defaultValue `false`
+     */
+    interactive?: boolean;
+    /** 행 클릭 콜백. 제공 시 체크박스 없이도 행에 인터랙션 효과 적용 */
+    onRowClick?: (row: Row<TData>) => void;
+    /** 로딩 상태 */
+    loading?: boolean;
+    /** 로딩 스켈레톤 행 수
+     * @defaultValue `5`
+     */
+    skeletonRowCount?: number;
+    /** 데이터가 없을 때 표시할 내용 (전체 오버라이드) */
+    emptyContent?: ReactNode;
+    /** 빈 상태 제목 */
+    emptyTitle?: string;
+    /** 빈 상태 설명 */
+    emptyDescription?: string;
+    /** 루트 엘리먼트 인라인 스타일 */
+    customStyle?: CSSProperties;
+    /** 추가 클래스명 */
+    className?: string;
+    /** 표시할 최대 행 수. 초과 시 세로 스크롤 발생. 헤더는 항상 고정 */
+    maxRows?: number;
+}
+type AccordionProps<TData> = {
+    accordion?: false;
+    canExpand?: never;
+    renderAccordionContent?: never;
+} | {
+    /** 행마다 아코디언 토글(쉐브론) 컬럼을 활성화할지 여부.
+     * `renderAccordionContent`를 함께 제공해야 동작합니다.
+     */
+    accordion: true;
+    /** 행마다 쉐브론(토글)을 표시할지 결정하는 함수.
+     * 미제공 시 모든 행에 토글 표시.
+     * renderAccordionContent 호출을 펼쳐진 행으로만 제한하므로
+     * 콘텐츠 생성 비용이 클 때 반드시 제공하세요.
+     */
+    canExpand?: (row: Row<TData>) => boolean;
+    /** 확장된 행에 렌더링할 콘텐츠.
+     * 행이 펼쳐질 때 해당 row를 인수로 받아 ReactNode를 반환.
+     *
+     * **주의 — row.id 안정성**: TanStack Table은 기본적으로 배열 인덱스를
+     * row.id로 사용합니다. 정렬·필터 변경 시 같은 id가 다른 데이터를 가리켜
+     * 엉뚱한 행이 열린 상태가 됩니다.
+     * accordion 사용 시 useReactTable에 반드시
+     * `getRowId: (originalRow) => originalRow.id` 를 설정하세요.
+     */
+    renderAccordionContent: (row: Row<TData>) => ReactNode;
+};
+export type TableProps<TData> = BaseTableProps<TData> & AccordionProps<TData>;
+export {};

package/dist/components/Table/TableContainer.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { TableVariant } from "./Table.types";
+export interface TableContainerProps {
+    /** 테이블 스타일 변형 — Table 컴포넌트의 variant와 동일하게 맞춰야 합니다.
+     * - `normal`: 단순 외곽선
+     * - `content`: 외곽선 + border-radius (Pagination도 border 안에 포함)
+     * @defaultValue `'normal'`
+     */
+    variant?: TableVariant;
+    children: ReactNode;
+    customStyle?: CSSProperties;
+    className?: string;
+}
+declare function TableContainer({ variant, children, customStyle, className, }: TableContainerProps): import("react/jsx-runtime").JSX.Element;
+export default TableContainer;

package/dist/index.d.ts

@@ -54,3 +54,9 @@ export type { FilterChipProps } from "./components/Chip/FilterChip/FilterChip";
 export type { FilterBarProps, FilterBarSize, } from "./components/Chip/FilterBar/FilterBar";
 export { default as Tooltip } from "./components/Tooltip/Tooltip";
 export type { TooltipProps, TooltipPosition, TooltipVariant, TooltipTrigger, TooltipContent, } from "./components/Tooltip/Tooltip.types";
+export { default as Table } from "./components/Table/Table";
+export type { TableProps, TableVariant, } from "./components/Table/Table.types";
+export { default as TableContainer } from "./components/Table/TableContainer";
+export type { TableContainerProps } from "./components/Table/TableContainer";
+export { default as Pagination } from "./components/Table/Pagination/Pagination";
+export type { PaginationProps, PaginationVariant, } from "./components/Table/Pagination/Pagination.types";