@lawkit/ui 0.1.55 → 0.1.57

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

@@ -0,0 +1,15 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            fontSize: `var(--${string})`;
+        };
+        medium: {
+            fontSize: `var(--${string})`;
+        };
+    };
+}>;
+export declare const list: string;
+export declare const item: string;
+export declare const link: string;
+export declare const current: string;
+export declare const separator: string;

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

@@ -0,0 +1,29 @@
+import { ReactNode, HTMLAttributes, MouseEventHandler } from 'react';
+export type BreadcrumbSize = "small" | "medium";
+export interface BreadcrumbItem {
+    /** 표시 텍스트 */
+    label: string;
+    /** 이동 링크 (마지막 항목에서는 무시) */
+    href?: string;
+    /** 클릭 핸들러 (라우터 연동 시 e.preventDefault() 사용) */
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+}
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    /** 경로 항목 목록 — 마지막 항목이 현재 페이지 */
+    items: BreadcrumbItem[];
+    /** 구분자 (기본 "/") */
+    separator?: ReactNode;
+    /** 사이즈 */
+    size?: BreadcrumbSize;
+}
+/**
+ * **Breadcrumb**
+ *
+ * 현재 페이지까지의 경로를 보여주는 내비게이션.
+ *
+ * - `items`: 경로 항목 목록. 마지막 항목은 현재 페이지로 취급되어
+ *   링크가 아닌 `aria-current="page"` 텍스트로 렌더링됩니다.
+ * - `separator`: 구분자 커스텀 (기본 `/`)
+ * - `size`: small(12px) / medium(14px)
+ */
+export declare function Breadcrumb({ items, separator, size, className, ...rest }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

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/FloatingModal/FloatingModal.css.d.ts

@@ -0,0 +1,10 @@
+export declare const card: import('@vanilla-extract/recipes').RuntimeFn<{
+    position: {
+        "bottom-right": {
+            right: `var(--${string})`;
+        };
+        "bottom-left": {
+            left: `var(--${string})`;
+        };
+    };
+}>;

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

@@ -0,0 +1,31 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type FloatingModalPosition = "bottom-right" | "bottom-left";
+export interface FloatingModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 표시 여부 */
+    open: boolean;
+    /** 닫기 핸들러 (close 버튼) */
+    onClose: () => void;
+    /** 헤더 타이틀 */
+    title?: ReactNode;
+    /** 푸터 콘텐츠 */
+    footer?: ReactNode;
+    /** 고정 위치 */
+    position?: FloatingModalPosition;
+    /** 최소화(접기) 토글 버튼 표시 */
+    collapsible?: boolean;
+    /** Escape 키 닫기 (비차단 특성상 기본 off) */
+    closeOnEscape?: boolean;
+    /** 본문 */
+    children?: ReactNode;
+}
+/**
+ * **FloatingModal**
+ *
+ * 화면 우하단(기본)에 고정으로 떠 있는 비차단 모달.
+ * backdrop이 없어 페이지를 계속 조작할 수 있습니다. (예: 업로드 진행, 미니 플레이어)
+ *
+ * - `position`: bottom-right(기본) / bottom-left
+ * - `collapsible`: 헤더의 접기/펼치기 토글
+ * - `closeOnEscape`: Escape 닫기 (기본 off — 비차단 특성)
+ */
+export declare function FloatingModal({ open, onClose, title, footer, position, collapsible, closeOnEscape, children, className, ...rest }: FloatingModalProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1 @@
+export declare const surface: string;

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

@@ -0,0 +1,23 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface FullScreenModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 모달 표시 여부 */
+    open: boolean;
+    /** 닫기 핸들러 (Escape, close 버튼) */
+    onClose: () => void;
+    /** 헤더 타이틀 */
+    title?: ReactNode;
+    /** 푸터 콘텐츠 */
+    footer?: ReactNode;
+    /** Escape 키 닫기 비활성 */
+    disableEscapeClose?: boolean;
+    /** 모달 본문 */
+    children?: ReactNode;
+}
+/**
+ * **FullScreenModal**
+ *
+ * 뷰포트 전체를 덮는 모달. Modal과 같은 `open`/`onClose` API를 사용하며,
+ * 상단 고정 헤더(타이틀 + 닫기) + 스크롤 바디 + 하단 푸터로 구성됩니다.
+ * backdrop 없이 전체가 표면입니다.
+ */
+export declare function FullScreenModal({ open, onClose, title, footer, disableEscapeClose, children, className, ...rest }: FullScreenModalProps): 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/components/Textarea/Textarea.css.d.ts

@@ -0,0 +1,47 @@
+export declare const wrapper: string;
+export declare const textarea: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            padding: `6px var(--${string})`;
+        };
+        medium: {
+            padding: "8px 14px";
+        };
+        large: {
+            padding: "12px 14px";
+        };
+    };
+    state: {
+        default: {
+            selectors: {
+                "&:focus": {
+                    borderColor: `var(--${string})`;
+                    boxShadow: `var(--${string})`;
+                };
+            };
+        };
+        active: {
+            borderColor: `var(--${string})`;
+            boxShadow: `var(--${string})`;
+        };
+        success: {
+            borderColor: string;
+        };
+        warning: {
+            borderColor: `var(--${string})`;
+        };
+        disabled: {
+            backgroundColor: `var(--${string})`;
+            cursor: "not-allowed";
+        };
+    };
+    resize: {
+        none: {
+            resize: "none";
+        };
+        vertical: {
+            resize: "vertical";
+        };
+    };
+}>;
+export declare const count: string;

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

@@ -0,0 +1,26 @@
+import { TextareaHTMLAttributes } from 'react';
+export type TextareaSize = "small" | "medium" | "large";
+export type TextareaState = "default" | "active" | "success" | "warning" | "disabled";
+export type TextareaResize = "none" | "vertical";
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** 사이즈 */
+    textareaSize?: TextareaSize;
+    /** 상태 */
+    state?: TextareaState;
+    /** 리사이즈 제어 */
+    resize?: TextareaResize;
+    /** 글자수 표시 (maxLength와 함께 사용 시 "n/max" 형식) */
+    showCount?: boolean;
+}
+/**
+ * **Textarea**
+ *
+ * 여러 줄 텍스트 입력 필드. Input과 동일한 시각 언어를 공유합니다.
+ *
+ * - `textareaSize`: small / medium / large (패딩 차이)
+ * - `state`: default / active / success / warning / disabled
+ * - `resize`: none / vertical (기본 vertical)
+ * - `showCount`: 글자수 표시 (`maxLength`와 함께 쓰면 "n/max")
+ * - InputGroup(label/helperText)과 함께 사용할 수 있습니다.
+ */
+export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

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

@@ -94,6 +94,18 @@ export { Chip } from './components/Chip';
 export type { ChipProps } from './components/Chip';
 export { LinkBadge } from './components/LinkBadge';
 export type { LinkBadgeProps } from './components/LinkBadge';
+export { Breadcrumb } from './components/Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem, BreadcrumbSize, } from './components/Breadcrumb';
+export { Textarea } from './components/Textarea';
+export type { TextareaProps, TextareaSize, TextareaState, TextareaResize, } from './components/Textarea';
+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.55",
+  "version": "0.1.57",
   "type": "module",
   "description": "LDS Design System — React component library with design tokens",
   "main": "./dist/index.js",