teachable-design-system 0.3.0 → 0.3.3

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
 interface ButtonProps {
     width?: string;
@@ -27,9 +28,10 @@ interface DropdownProps {
     options: string[];
     label?: string;
     placeholder?: string;
+    width?: string;
 }
 
-declare function Dropdown({ size, options, onSelect, label, placeholder }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ size, options, onSelect, label, placeholder, width }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps {
     id?: string;
@@ -67,6 +69,74 @@ interface TabBarProps {
 }
 declare const TabBar: ({ title, items, defaultSelectedId, onChange }: TabBarProps) => react_jsx_runtime.JSX.Element;
 
+/** 셀 데이터 타입 */
+type DataType = 'text' | 'number' | 'date' | 'boolean' | 'custom';
+/** 정렬 방향 */
+type SortDirection = 'asc' | 'desc' | null;
+/**
+ * 테이블 컬럼 정의
+ * @template T - 행 데이터 타입
+ */
+interface TableColumn<T = Record<string, unknown>> {
+    /** 컬럼 고유 키 */
+    key: keyof T extends string ? keyof T : string;
+    /** 헤더 텍스트 */
+    header: string;
+    /** 컬럼 너비 (예: '100px', '20%') */
+    width?: string;
+    /** 편집 가능 여부 @default true */
+    editable?: boolean;
+    /** 셀 높이 */
+    height?: string;
+    /** 데이터 타입 @default 'text' */
+    dataType?: DataType;
+    /** 정렬 가능 여부 @default false */
+    sortable?: boolean;
+    /** 헤더 스타일 적용 (좌측 열 강조) */
+    isHeaderColumn?: boolean;
+    /** 행 병합 수 */
+    rowSpan?: number;
+    /** 열 병합 수 */
+    colSpan?: number;
+    /** 커스텀 렌더링 */
+    render?: (value: unknown, row: T, rowIndex: number) => ReactNode;
+    /** 커스텀 정렬 함수 */
+    sortFn?: (a: unknown, b: unknown) => number;
+}
+/** 테이블 행 데이터 타입 */
+type TableRow<T = Record<string, unknown>> = T;
+/** 테이블 컴포넌트 Props */
+interface TableProps<T = Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: TableRow<T>[];
+    onCellEdit?: (rowIndex: number, columnKey: string, value: unknown) => void;
+    onSort?: (columnKey: string, direction: SortDirection) => void;
+    onSelectionChange?: (cells: CellPosition[]) => void;
+    onPaste?: (startRow: number, startCol: number, values: string[][]) => void;
+    /** 최대 높이 (스크롤 활성화) */
+    maxHeight?: string;
+    /** 행 높이 (기본값: 30px) */
+    rowHeight?: string;
+    /** 줄무늬 스타일 */
+    striped?: boolean;
+    className?: string;
+    /** 행 선택 활성화 */
+    enableRowSelection?: boolean;
+    /** 선택된 행 인덱스 */
+    selectedRowIndex?: number;
+    /** 행 클릭 콜백 */
+    onRowClick?: (rowIndex: number, row: T) => void;
+    /** 키보드 네비게이션 활성화 (↑↓ 화살표) */
+    enableKeyboardNavigation?: boolean;
+}
+/** 셀 위치 */
+interface CellPosition {
+    row: number;
+    col: number;
+}
+
+declare function Table<T extends Record<string, unknown> = Record<string, unknown>>({ columns, data, onCellEdit, onSort, onSelectionChange, onPaste, maxHeight, rowHeight, className, enableRowSelection, selectedRowIndex, onRowClick, enableKeyboardNavigation, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
 declare const colors: {
     background: {
         white: string;
@@ -722,4 +792,4 @@ declare const typography: {
     };
 };
 
-export { Button, CheckBox, Dropdown, Input, Sidebar, TabBar, TabBarProps, TabItem, colors, typography };
+export { Button, CheckBox, Dropdown, Input, Sidebar, TabBar, TabBarProps, TabItem, Table, colors, typography };