@lawkit/ui 0.1.0

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

@@ -0,0 +1,26 @@
+import { InputHTMLAttributes } from 'react';
+export type SwitchSize = "small" | "medium";
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** 사이즈 */
+    size?: SwitchSize;
+    /** 체크 상태 */
+    checked?: boolean;
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 변경 핸들러 */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * **Switch**
+ *
+ * 토글 스위치.
+ *
+ * - `size`: small(32x18) / medium(42x24)
+ * - `label`: 왼쪽 라벨 텍스트
+ * - `checked` / `onCheckedChange`: 제어 모드
+ *
+ * ```tsx
+ * <Switch label="Label" checked={on} onCheckedChange={setOn} />
+ * ```
+ */
+export declare function Switch({ size, checked, label, disabled, onCheckedChange, onChange, className, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+export declare const root: string;
+export declare const tabRow: string;
+export declare const tabList: string;
+export declare const tabItem: import('@vanilla-extract/recipes').RuntimeFn<{
+    active: {
+        true: {
+            backgroundColor: string;
+            color: string;
+        };
+        false: {
+            backgroundColor: "#3434341F";
+            color: string;
+            selectors: {
+                "&:hover": {
+                    backgroundColor: "#34343433";
+                };
+            };
+        };
+    };
+    size: {
+        large: {
+            height: number;
+            fontSize: `var(--${string})`;
+        };
+        medium: {
+            height: number;
+            fontSize: `var(--${string})`;
+        };
+    };
+}>;
+export declare const badge: import('@vanilla-extract/recipes').RuntimeFn<{
+    active: {
+        true: {
+            backgroundColor: string;
+            color: string;
+        };
+        false: {
+            backgroundColor: "rgba(0, 0, 0, 0.12)";
+            color: string;
+        };
+    };
+    size: {
+        large: {
+            height: number;
+            fontSize: `var(--${string})`;
+        };
+        medium: {
+            height: number;
+            fontSize: `var(--${string})`;
+        };
+    };
+}>;
+export declare const actionButton: string;
+export declare const actionIcon: string;
+export declare const indicator: string;

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

@@ -0,0 +1,29 @@
+import { ReactNode, MouseEventHandler } from 'react';
+export type TabsSize = "large" | "medium";
+export interface TabItem {
+    /** 고유 식별 값 */
+    value: string;
+    /** 탭 텍스트 */
+    label: string;
+    /** 뱃지 카운트 (Badge 모드) */
+    badge?: number;
+}
+export interface TabsProps {
+    /** 탭 목록 */
+    items: TabItem[];
+    /** 현재 활성화된 값 */
+    value?: string;
+    /** 값 변경 핸들러 */
+    onChange?: (value: string) => void;
+    /** 크기 */
+    size?: TabsSize;
+    /** 액션 버튼 (예: "Add Tab") */
+    action?: {
+        label: string;
+        icon?: ReactNode;
+        onClick?: MouseEventHandler<HTMLButtonElement>;
+    };
+    /** 추가 className */
+    className?: string;
+}
+export declare function Tabs({ items, value, onChange, size, action: actionProp, className, }: TabsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+export declare const root: string;
+export declare const trigger: string;
+export declare const triggerInput: string;
+export declare const triggerIcon: string;
+export declare const tags: string;
+export declare const tag: string;
+export declare const tagRemove: string;
+export declare const panel: string;
+export declare const menu: string;
+export declare const option: string;
+export declare const optionCheck: string;
+export declare const optionCheckSelected: string;

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

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react';
+export interface TagSelectOption {
+    /** 고유 값 */
+    value: string;
+    /** 표시 라벨 */
+    label: string;
+}
+export interface TagSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 옵션 목록 */
+    options: TagSelectOption[];
+    /** 선택된 값 목록 */
+    value: string[];
+    /** 선택 변경 콜백 */
+    onChange: (value: string[]) => void;
+    /** placeholder */
+    placeholder?: string;
+    /** 비활성화 */
+    disabled?: boolean;
+}
+/**
+ * **TagSelect**
+ *
+ * 드롭다운 셀렉트 + 선택된 항목을 아래 태그 뱃지로 표시.
+ *
+ * ```tsx
+ * <TagSelect
+ *   options={[
+ *     { value: "a", label: "Option A" },
+ *     { value: "b", label: "Option B" },
+ *   ]}
+ *   value={["a"]}
+ *   onChange={(v) => setValue(v)}
+ *   placeholder="Placeholder"
+ * />
+ * ```
+ */
+export declare function TagSelect({ options, value, onChange, placeholder, disabled, className, ...rest }: TagSelectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,97 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    exiting: {
+        false: {
+            animation: `${string} 300ms ease`;
+        };
+        true: {
+            animation: `${string} 400ms ease forwards`;
+        };
+    };
+}>;
+export declare const top: string;
+export declare const icon: import('@vanilla-extract/recipes').RuntimeFn<{
+    intent: {
+        info: {
+            backgroundColor: string;
+        };
+        success: {
+            backgroundColor: "#28c76f";
+        };
+        warning: {
+            backgroundColor: "#f0af23";
+        };
+        error: {
+            backgroundColor: "#ea5455";
+        };
+    };
+}>;
+export declare const titleArea: string;
+export declare const heading: string;
+export declare const time: string;
+export declare const closeBtn: string;
+export declare const body: string;
+export declare const progressTrack: string;
+export declare const progressFill: import('@vanilla-extract/recipes').RuntimeFn<{
+    intent: {
+        info: {
+            backgroundColor: string;
+        };
+        success: {
+            backgroundColor: "#28c76f";
+        };
+        warning: {
+            backgroundColor: "#f0af23";
+        };
+        error: {
+            backgroundColor: "#ea5455";
+        };
+    };
+}>;
+export declare const countdownTrack: string;
+export declare const countdownFill: import('@vanilla-extract/recipes').RuntimeFn<{
+    intent: {
+        info: {
+            backgroundColor: string;
+        };
+        success: {
+            backgroundColor: "#28c76f";
+        };
+        warning: {
+            backgroundColor: "#f0af23";
+        };
+        error: {
+            backgroundColor: "#ea5455";
+        };
+    };
+}>;
+export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
+    position: {
+        "top-right": {
+            top: `var(--${string})`;
+            right: `var(--${string})`;
+        };
+        "top-left": {
+            top: `var(--${string})`;
+            left: `var(--${string})`;
+        };
+        "top-center": {
+            top: `var(--${string})`;
+            left: "50%";
+            transform: "translateX(-50%)";
+        };
+        "bottom-right": {
+            bottom: `var(--${string})`;
+            right: `var(--${string})`;
+        };
+        "bottom-left": {
+            bottom: `var(--${string})`;
+            left: `var(--${string})`;
+        };
+        "bottom-center": {
+            bottom: `var(--${string})`;
+            left: "50%";
+            transform: "translateX(-50%)";
+        };
+    };
+}>;
+export declare const toastItem: string;

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

@@ -0,0 +1,57 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type ToastIntent = "info" | "success" | "warning" | "error";
+export type ToastPosition = "top-right" | "top-left" | "top-center" | "bottom-right" | "bottom-left" | "bottom-center";
+export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+    /** 아이콘 색상 의도 */
+    intent?: ToastIntent;
+    /** 커스텀 아이콘 (기본 제공) */
+    icon?: ReactNode;
+    /** 제목 */
+    title: string;
+    /** 시간 텍스트 (예: "11 mins ago") */
+    time?: string;
+    /** 본문 설명 (2-row) */
+    description?: string;
+    /** 프로그레스 바 표시 (수동 제어용) */
+    showProgress?: boolean;
+    /** 프로그레스 퍼센트 (0-100, 수동 제어용) */
+    progress?: number;
+    /** 자동 닫기 시간 (ms, 0이면 비활성) */
+    duration?: number;
+    /** 호버 시 자동 닫기 일시정지 */
+    pauseOnHover?: boolean;
+    /** 닫기 콜백 */
+    onClose?: () => void;
+}
+/**
+ * **Toast**
+ *
+ * 알림 토스트 메시지.
+ *
+ * - `intent`: info / success / warning / error
+ * - `title` + `description`: 1줄 또는 2줄
+ * - `showProgress` + `progress`: 하단 프로그레스 바 (수동 제어)
+ * - `duration`: 자동 닫기 (기본 5000ms, 0이면 비활성)
+ * - `pauseOnHover`: 호버 시 자동 닫기 일시정지 (기본 true)
+ * - 자동 닫기 시 하단에 카운트다운 게이지 바 표시
+ * - 닫힐 때 슬라이드 아웃 애니메이션
+ */
+export declare function Toast({ intent, icon, title, time, description, showProgress, progress, duration, pauseOnHover, onClose, className, ...rest }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export interface ToastContainerProps {
+    /** 화면 위치 */
+    position?: ToastPosition;
+    /** 토스트 목록 */
+    children: ReactNode;
+}
+/**
+ * **ToastContainer**
+ *
+ * 토스트를 화면 고정 위치에 렌더링하는 컨테이너.
+ *
+ * ```tsx
+ * <ToastContainer position="top-right">
+ *   <Toast title="알림" intent="success" onClose={...} />
+ * </ToastContainer>
+ * ```
+ */
+export declare function ToastContainer({ position, children }: ToastContainerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,60 @@
+export declare const wrapper: string;
+export declare const tooltip: import('@vanilla-extract/recipes').RuntimeFn<{
+    placement: {
+        top: {
+            bottom: "100%";
+            left: "50%";
+            transform: "translateX(-50%)";
+            flexDirection: "column";
+            marginBottom: `var(--${string})`;
+        };
+        bottom: {
+            top: "100%";
+            left: "50%";
+            transform: "translateX(-50%)";
+            flexDirection: "column-reverse";
+            marginTop: `var(--${string})`;
+        };
+        left: {
+            right: "100%";
+            top: "50%";
+            transform: "translateY(-50%)";
+            flexDirection: "row";
+            marginRight: `var(--${string})`;
+        };
+        right: {
+            left: "100%";
+            top: "50%";
+            transform: "translateY(-50%)";
+            flexDirection: "row-reverse";
+            marginLeft: `var(--${string})`;
+        };
+    };
+}>;
+export declare const body: string;
+export declare const content: string;
+export declare const title: string;
+export declare const arrow: import('@vanilla-extract/recipes').RuntimeFn<{
+    placement: {
+        top: {
+            borderLeft: "5.5px solid transparent";
+            borderRight: "5.5px solid transparent";
+            borderTop: "5px solid #343434";
+        };
+        bottom: {
+            borderLeft: "5.5px solid transparent";
+            borderRight: "5.5px solid transparent";
+            borderBottom: "5px solid #343434";
+        };
+        left: {
+            borderTop: "4.5px solid transparent";
+            borderBottom: "4.5px solid transparent";
+            borderLeft: "5px solid #343434";
+        };
+        right: {
+            borderTop: "4.5px solid transparent";
+            borderBottom: "4.5px solid transparent";
+            borderRight: "5px solid #343434";
+        };
+    };
+}>;

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

@@ -0,0 +1,26 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "content"> {
+    /** 툴팁에 표시할 텍스트 */
+    content: ReactNode;
+    /** 2-row 변형: 제목 (이름/직책 등) */
+    title?: ReactNode;
+    /** 화살표 방향 */
+    placement?: TooltipPlacement;
+    /** 지연 시간 (ms) */
+    delay?: number;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 트리거 요소 */
+    children: ReactNode;
+}
+/**
+ * **Tooltip**
+ *
+ * 마우스 호버 시 부가 정보를 표시하는 다크 툴팁.
+ *
+ * - `placement`: top / bottom / left / right
+ * - `title` + `content`: 2줄 변형 (이름 + 연락처 등)
+ * - `content`만 사용: 1줄 변형
+ */
+export declare function Tooltip({ content, title, placement, delay, disabled, children, className, ...rest }: TooltipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,103 @@
+export declare const tree: string;
+export declare const row: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        medium: {
+            height: number;
+            fontSize: `var(--${string})`;
+            fontWeight: `var(--${string})`;
+        };
+        small: {
+            height: number;
+            fontSize: "11px";
+            fontWeight: `var(--${string})`;
+        };
+    };
+    selected: {
+        true: {
+            backgroundColor: "rgba(33, 81, 236, 0.12)";
+        };
+        false: {};
+    };
+}>;
+export declare const trailZone: string;
+export declare const trailSegment: import('@vanilla-extract/recipes').RuntimeFn<{
+    hasLine: {
+        true: {
+            "::after": {
+                content: "\"\"";
+                position: "absolute";
+                top: number;
+                bottom: number;
+                left: "50%";
+                width: number;
+                backgroundColor: "#d1d1d1";
+            };
+        };
+        false: {};
+    };
+    isLast: {
+        true: {
+            "::after": {
+                content: "\"\"";
+                position: "absolute";
+                top: number;
+                bottom: "50%";
+                left: "50%";
+                width: number;
+                backgroundColor: "#d1d1d1";
+            };
+        };
+        false: {};
+    };
+}>;
+export declare const caret: import('@vanilla-extract/recipes').RuntimeFn<{
+    expanded: {
+        true: {
+            transform: "rotate(0deg)";
+        };
+        false: {
+            transform: "rotate(-90deg)";
+        };
+    };
+    visible: {
+        true: {};
+        false: {
+            visibility: "hidden";
+        };
+    };
+}>;
+export declare const levelBadge: import('@vanilla-extract/recipes').RuntimeFn<{
+    color: {
+        primary: {
+            backgroundColor: "rgba(33, 81, 236, 0.12)";
+            color: string;
+        };
+        secondary: {
+            backgroundColor: "rgba(130, 134, 139, 0.12)";
+            color: "#626f86";
+        };
+    };
+}>;
+export declare const leading: string;
+export declare const textZone: string;
+export declare const textSegment: import('@vanilla-extract/recipes').RuntimeFn<{
+    type: {
+        code: {
+            color: string;
+            fontWeight: `var(--${string})`;
+        };
+        title: {
+            color: string;
+            fontWeight: `var(--${string})`;
+            flex: number;
+            minWidth: number;
+        };
+        date: {
+            color: "#9ea7b8";
+            fontWeight: `var(--${string})`;
+            flexShrink: number;
+        };
+    };
+}>;
+export declare const separator: string;
+export declare const children: string;

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

@@ -0,0 +1,72 @@
+import { HTMLAttributes } from 'react';
+export interface TreeNode {
+    /** 고유 ID */
+    id: string;
+    /** 레벨 라벨 (예: "상위 마스터", "마스터", "하위") */
+    label?: string;
+    /** 라벨 색상 */
+    labelColor?: "primary" | "secondary";
+    /** 텍스트 컬럼들 (슬래시로 구분되어 표시) */
+    columns: TreeNodeColumn[];
+    /** 자식 노드 */
+    children?: TreeNode[];
+}
+export interface TreeNodeColumn {
+    /** 컬럼 텍스트 */
+    text: string;
+    /** 컬럼 타입 */
+    type?: "code" | "title" | "date";
+}
+export type TreeViewSize = "medium" | "small";
+export interface TreeViewProps extends HTMLAttributes<HTMLDivElement> {
+    /** 트리 데이터 */
+    nodes: TreeNode[];
+    /** 기본 사이즈 (부모 노드: medium, 리프 노드: small 자동 적용) */
+    size?: TreeViewSize;
+    /** 선택된 노드 ID */
+    selectedId?: string;
+    /** 노드 선택 콜백 */
+    onNodeSelect?: (node: TreeNode) => void;
+    /** 초기 펼침 노드 ID 목록 */
+    defaultExpandedIds?: string[];
+    /** 구분자 문자 */
+    separator?: string;
+}
+/**
+ * **TreeView**
+ *
+ * 계층 구조 데이터를 트리 형태로 표시하는 컴포넌트.
+ *
+ * - 기존 Collapse 패턴 참고한 펼침/접힘
+ * - 레벨 뱃지로 노드 유형 표시
+ * - 슬래시 구분 텍스트 컬럼
+ * - 세로 연결선으로 계층 시각화
+ *
+ * ```tsx
+ * const nodes: TreeNode[] = [
+ *   {
+ *     id: "1",
+ *     label: "상위 마스터",
+ *     labelColor: "primary",
+ *     columns: [
+ *       { text: "C20190301", type: "code" },
+ *       { text: "법무관리시스템 구축 계약", type: "title" },
+ *       { text: "2019-01-03", type: "date" },
+ *     ],
+ *     children: [
+ *       {
+ *         id: "1-1",
+ *         label: "마스터",
+ *         columns: [...],
+ *         children: [
+ *           { id: "1-1-1", label: "하위", columns: [...] },
+ *         ],
+ *       },
+ *     ],
+ *   },
+ * ];
+ *
+ * <TreeView nodes={nodes} onNodeSelect={(node) => console.log(node.id)} />
+ * ```
+ */
+export declare function TreeView({ nodes, size, selectedId, onNodeSelect, defaultExpandedIds, separator, className, ...rest }: TreeViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,52 @@
+export declare const widget: string;
+export declare const widgetHeader: string;
+export declare const headerLeft: string;
+export declare const headerTitle: string;
+export declare const headerBadge: string;
+export declare const collapseButton: string;
+export declare const collapseButtonOpen: string;
+export declare const divider: string;
+export declare const widgetBody: string;
+export declare const widgetBodyFlush: string;
+export declare const statCell: import('@vanilla-extract/recipes').RuntimeFn<{
+    active: {
+        true: {
+            backgroundColor: "rgba(33, 81, 236, 0.03)";
+            border: "1px solid rgba(33, 81, 236, 0.12)";
+        };
+        false: {};
+    };
+}>;
+export declare const statLabel: string;
+export declare const statValue: import('@vanilla-extract/recipes').RuntimeFn<{
+    color: {
+        primary: {
+            color: string;
+        };
+        heading: {
+            color: string;
+        };
+        success: {
+            color: "#1bc47d";
+        };
+        danger: {
+            color: "#ea5455";
+        };
+        warning: {
+            color: "#f0af23";
+        };
+    };
+}>;
+export declare const statGrid: string;
+export declare const quickMenu: string;
+export declare const quickMenuIcon: string;
+export declare const quickMenuLabel: string;
+export declare const scheduleItem: string;
+export declare const scheduleTop: string;
+export declare const scheduleDate: string;
+export declare const scheduleTitle: string;
+export declare const scheduleBody: string;
+export declare const tableHeader: string;
+export declare const tableHeaderCell: string;
+export declare const tableRow: string;
+export declare const tableCell: string;