@lawkit/ui 0.1.56 → 0.1.57

package/dist/ui-v3/src/components/Drawer/Drawer.css.d.ts

@@ -0,0 +1,36 @@
+export declare const TRANSITION_MS = 200;
+export declare const overlay: import('@vanilla-extract/recipes').RuntimeFn<{
+    closing: {
+        true: {
+            opacity: number;
+        };
+        false: {};
+    };
+}>;
+export declare const panel: import('@vanilla-extract/recipes').RuntimeFn<{
+    side: {
+        right: {
+            right: number;
+            animation: `${string} 200ms ease`;
+        };
+        left: {
+            left: number;
+            animation: `${string} 200ms ease`;
+        };
+    };
+    size: {
+        small: {
+            width: number;
+        };
+        medium: {
+            width: number;
+        };
+        large: {
+            width: number;
+        };
+    };
+    closing: {
+        true: {};
+        false: {};
+    };
+}>;

package/dist/ui-v3/src/components/Drawer/index.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type DrawerSide = "right" | "left";
+export type DrawerSize = "small" | "medium" | "large";
+export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 표시 여부 */
+    open: boolean;
+    /** 닫기 핸들러 (Escape, backdrop 클릭, close 버튼) */
+    onClose: () => void;
+    /** 슬라이드 인 방향 */
+    side?: DrawerSide;
+    /** 패널 너비 프리셋 — small 360px / medium 480px / large 640px */
+    size?: DrawerSize;
+    /** 헤더 타이틀 (간편 API) */
+    title?: ReactNode;
+    /** 푸터 콘텐츠 (간편 API) */
+    footer?: ReactNode;
+    /** dim 배경 + 클릭 닫기. false면 비차단(페이지 조작 가능) */
+    backdrop?: boolean;
+    /** Escape 키 닫기 */
+    closeOnEscape?: boolean;
+    /** 패널 본문 */
+    children?: ReactNode;
+}
+/**
+ * **Drawer**
+ *
+ * 화면 가장자리에서 슬라이드 인 하는 패널 프리미티브.
+ * 계약 상세, 필터 패널 등 흐름을 떠나지 않는 부가 작업에 사용합니다.
+ *
+ * - `side`: right(기본) / left
+ * - `size`: small 360px / medium 480px / large 640px
+ * - `backdrop`: true(기본)면 dim + 클릭 닫기 + 스크롤락, false면 비차단
+ * - `closeOnEscape`: Escape 닫기 (기본 on)
+ * - Modal과 같은 헤더(타이틀 + 닫기 X) / 스크롤 바디 / 푸터 구조
+ */
+export declare function Drawer({ open, onClose, side, size, title, footer, backdrop, closeOnEscape, children, className, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui-v3/src/components/TableTree/TableTree.css.d.ts

@@ -0,0 +1,23 @@
+export declare const wrapper: string;
+export declare const table: string;
+export declare const thead: string;
+export declare const th: string;
+export declare const thBordered: string;
+export declare const tr: string;
+export declare const trClickable: string;
+export declare const td: string;
+export declare const tdBordered: string;
+export declare const firstCell: string;
+export declare const firstCellContent: string;
+export declare const toggleButton: string;
+export declare const toggleSpacer: string;
+export declare const caret: import('@vanilla-extract/recipes').RuntimeFn<{
+    expanded: {
+        true: {};
+        false: {
+            transform: "rotate(-90deg)";
+        };
+    };
+}>;
+export declare const emptyRow: string;
+export declare const emptyCell: string;

package/dist/ui-v3/src/components/TableTree/index.d.ts

@@ -0,0 +1,59 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface TableTreeColumn {
+    /** 셀 데이터 키 (`row.cells`의 키와 매칭) */
+    key: string;
+    /** 헤더 라벨 */
+    header: ReactNode;
+    /** 컬럼 너비 (px 숫자 또는 CSS 값) */
+    width?: number | string;
+    /** 정렬 */
+    align?: "left" | "center" | "right";
+}
+export interface TableTreeRow {
+    /** 고유 ID */
+    id: string;
+    /** 컬럼 키 → 셀 콘텐츠 */
+    cells: Record<string, ReactNode>;
+    /** 자식 행 (부모 확장 시에만 렌더) */
+    children?: TableTreeRow[];
+}
+export interface TableTreeProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 컬럼 정의 */
+    columns: TableTreeColumn[];
+    /** 계층 행 데이터 */
+    rows: TableTreeRow[];
+    /** 초기 펼침 행 ID 목록 (uncontrolled) */
+    defaultExpandedIds?: string[];
+    /** 펼침 행 ID 목록 (controlled) */
+    expandedIds?: string[];
+    /** 펼침 상태 변경 콜백 */
+    onExpandedChange?: (expandedIds: string[]) => void;
+    /** 행 클릭 콜백 */
+    onRowClick?: (row: TableTreeRow) => void;
+    /** 선택된 행 ID */
+    selectedId?: string;
+    /** 세로 구분선 표시 */
+    bordered?: boolean;
+    /** 깊이당 들여쓰기 px */
+    indentSize?: number;
+    /** 데이터 없을 때 표시 메시지 */
+    emptyText?: ReactNode;
+}
+/**
+ * **TableTree**
+ *
+ * 모계약–하위계약처럼 계층이 있는 데이터를 표 안에서 접었다 펼치는 프리미티브.
+ *
+ * - table/thead/tbody 시맨틱 마크업 + DataTable과 같은 시각 언어
+ * - 자식 행은 부모 확장 시에만 렌더 (자체 재귀 렌더, 외부 의존성 없음)
+ * - 들여쓰기는 첫 번째 컬럼에 적용 (`indentSize` × 깊이)
+ * - `expandedIds`/`onExpandedChange`로 controlled 사용 가능
+ *
+ * ```tsx
+ * <TableTree
+ *   columns={[{ key: "code", header: "관리번호" }, { key: "title", header: "계약명" }]}
+ *   rows={[{ id: "1", cells: { code: "C-001", title: "모계약" }, children: [...] }]}
+ * />
+ * ```
+ */
+export declare function TableTree({ columns, rows, defaultExpandedIds, expandedIds: controlledExpandedIds, onExpandedChange, onRowClick, selectedId, bordered, indentSize, emptyText, className, ...rest }: TableTreeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/index.d.ts

@@ -102,6 +102,10 @@ export { FloatingModal } from './components/FloatingModal';
 export type { FloatingModalProps, FloatingModalPosition, } from './components/FloatingModal';
 export { FullScreenModal } from './components/FullScreenModal';
 export type { FullScreenModalProps } from './components/FullScreenModal';
+export { Drawer } from './components/Drawer';
+export type { DrawerProps, DrawerSide, DrawerSize } from './components/Drawer';
+export { TableTree } from './components/TableTree';
+export type { TableTreeProps, TableTreeColumn, TableTreeRow, } from './components/TableTree';
 export { sprinkles } from './styles/sprinkles.css';
 export { cx } from './lib/cx';
 export { lightThemeClass, themeVars, createLdsThemeVars } from '../../tokens/src';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lawkit/ui",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "type": "module",
   "description": "LDS Design System — React component library with design tokens",
   "main": "./dist/index.js",