@lawkit/ui 0.1.0

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

@@ -0,0 +1,27 @@
+import { InputHTMLAttributes } from 'react';
+export type CheckboxSize = "small" | "medium" | "large";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** 사이즈 */
+    size?: CheckboxSize;
+    /** 체크 상태 */
+    checked?: boolean;
+    /** 라벨 텍스트 */
+    label?: string;
+    /** 변경 핸들러 */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * **Checkbox**
+ *
+ * 체크박스 폼 컨트롤.
+ *
+ * - `size`: small(12px) / medium(14px) / large(18px)
+ * - Checked: 파란 배경 + 흰 체크 아이콘
+ * - Disabled Unchecked: 회색 배경
+ * - Disabled Checked: 파란 배경 opacity 0.65
+ *
+ * ```tsx
+ * <Checkbox label="동의합니다" checked={agreed} onCheckedChange={setAgreed} />
+ * ```
+ */
+export declare function Checkbox({ size, checked, label, disabled, onCheckedChange, onChange, className, ...rest }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+export declare const root: string;
+export declare const divider: string;
+export declare const options: string;
+export declare const chip: import('@vanilla-extract/recipes').RuntimeFn<{
+    active: {
+        true: {
+            backgroundColor: "#343434";
+            color: string;
+            selectors: {
+                "&:hover": {
+                    opacity: number;
+                };
+            };
+        };
+        false: {
+            backgroundColor: "#3434341F";
+            color: string;
+            selectors: {
+                "&:hover": {
+                    backgroundColor: "#34343433";
+                };
+            };
+        };
+    };
+}>;
+export declare const checkIcon: string;

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

@@ -0,0 +1,21 @@
+export interface ChipsNavigationItem {
+    /** 고유 식별 값 */
+    value: string;
+    /** 표시 텍스트 */
+    label: string;
+}
+export interface ChipsNavigationProps {
+    /** 옵션 목록 */
+    items: ChipsNavigationItem[];
+    /** 선택된 값 (단일 선택 시 string, 다중 선택 시 string[]) */
+    value?: string | string[];
+    /** 값 변경 핸들러 */
+    onChange?: (value: string | string[]) => void;
+    /** 다중 선택 모드 */
+    multiple?: boolean;
+    /** "All" 칩 텍스트 */
+    allLabel?: string;
+    /** 추가 className */
+    className?: string;
+}
+export declare function ChipsNavigation({ items, value, onChange, multiple, allLabel, className, }: ChipsNavigationProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,67 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {};
+        shadow: {};
+        border: {};
+        margin: {};
+    };
+    expanded: {
+        true: {};
+        false: {};
+    };
+}>;
+export declare const header: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {
+            borderBottom: `1px solid ${string}`;
+        };
+        shadow: {};
+        border: {};
+        margin: {};
+    };
+}>;
+export declare const chevron: import('@vanilla-extract/recipes').RuntimeFn<{
+    expanded: {
+        true: {
+            transform: "rotate(180deg)";
+        };
+        false: {
+            transform: "rotate(0deg)";
+        };
+    };
+}>;
+export declare const headerText: string;
+export declare const headerAction: string;
+export declare const content: import('@vanilla-extract/recipes').RuntimeFn<{
+    expanded: {
+        true: {
+            gridTemplateRows: "1fr";
+        };
+        false: {
+            gridTemplateRows: "0fr";
+        };
+    };
+}>;
+export declare const contentInner: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {};
+        shadow: {
+            borderTop: `1px solid ${string}`;
+        };
+        border: {
+            borderTop: `1px solid ${string}`;
+        };
+        margin: {};
+    };
+}>;
+export declare const contentBody: string;
+export declare const group: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {};
+        shadow: {};
+        border: {};
+        margin: {
+            gap: `var(--${string})`;
+        };
+    };
+}>;

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export type CollapseVariant = "default" | "shadow" | "border" | "margin";
+export interface CollapseProps {
+    /** 스타일 변형 */
+    variant?: CollapseVariant;
+    /** 헤더 텍스트 */
+    header: ReactNode;
+    /** 우측 액션 아이콘 */
+    action?: ReactNode;
+    /** 펼침 상태 (controlled) */
+    expanded?: boolean;
+    /** 초기 펼침 상태 (uncontrolled) */
+    defaultExpanded?: boolean;
+    /** 토글 핸들러 */
+    onToggle?: (expanded: boolean) => void;
+    /** 콘텐츠 */
+    children?: ReactNode;
+    /** 추가 className */
+    className?: string;
+}
+export declare function Collapse({ variant, header, action, expanded: controlledExpanded, defaultExpanded, onToggle, children, className, }: CollapseProps): import("react/jsx-runtime").JSX.Element;
+export interface CollapseGroupProps {
+    /** 스타일 변형 (자식에게 전파) */
+    variant?: CollapseVariant;
+    /** 단일 패널만 열기 (accordion 모드) */
+    accordion?: boolean;
+    /** children (Collapse 컴포넌트들) */
+    children?: ReactNode;
+    /** 추가 className */
+    className?: string;
+}
+export declare function CollapseGroup({ variant, children, className, }: CollapseGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+export declare const wrapper: string;
+export declare const table: string;
+export declare const thead: string;
+export declare const th: string;
+export declare const thSortable: string;
+export declare const thInner: string;
+export declare const sortIcon: import('@vanilla-extract/recipes').RuntimeFn<{
+    active: {
+        true: {
+            opacity: number;
+            color: string;
+        };
+        false: {};
+    };
+    direction: {
+        asc: {
+            transform: "rotate(180deg)";
+        };
+        desc: {};
+    };
+}>;
+export declare const tbody: string;
+export declare const tr: string;
+export declare const trSelected: string;
+export declare const td: string;
+export declare const tableBordered: string;
+export declare const tdBordered: string;
+export declare const thBordered: string;
+export declare const checkboxCell: string;
+export declare const checkbox: string;
+export declare const emptyRow: string;
+export declare const emptyCell: string;

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

@@ -0,0 +1,47 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { ColumnDef, SortingState, RowSelectionState, OnChangeFn } from '@tanstack/react-table';
+export type { ColumnDef, SortingState, RowSelectionState };
+export interface DataTableProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 테이블 데이터 */
+    data: T[];
+    /** @tanstack/react-table ColumnDef 배열 */
+    columns: ColumnDef<T, any>[];
+    /** 행 선택 체크박스 표시 */
+    selectable?: boolean;
+    /** 세로 구분선 표시 */
+    bordered?: boolean;
+    /** 정렬 상태 (controlled) */
+    sorting?: SortingState;
+    /** 정렬 상태 변경 콜백 */
+    onSortingChange?: OnChangeFn<SortingState>;
+    /** 행 선택 상태 (controlled) */
+    rowSelection?: RowSelectionState;
+    /** 행 선택 상태 변경 콜백 */
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    /** 행 클릭 콜백 */
+    onRowClick?: (row: T) => void;
+    /** 데이터 없을 때 표시 메시지 */
+    emptyText?: ReactNode;
+    /** 행의 고유 ID를 반환하는 함수 */
+    getRowId?: (row: T) => string;
+}
+/**
+ * **DataTable**
+ *
+ * @tanstack/react-table 기반 데이터 테이블 컴포넌트.
+ *
+ * - `selectable`: 행 선택 체크박스 자동 추가
+ * - `bordered`: 세로 구분선 표시
+ * - `sorting` / `onSortingChange`: 정렬 상태 제어
+ * - `rowSelection` / `onRowSelectionChange`: 행 선택 제어
+ *
+ * ```tsx
+ * const columns: ColumnDef<Item>[] = [
+ *   { accessorKey: "name", header: "이름" },
+ *   { accessorKey: "email", header: "이메일" },
+ * ];
+ *
+ * <DataTable data={items} columns={columns} selectable bordered />
+ * ```
+ */
+export declare function DataTable<T>({ data, columns, selectable, bordered, sorting: controlledSorting, onSortingChange, rowSelection: controlledRowSelection, onRowSelectionChange, onRowClick, emptyText, getRowId, className, ...rest }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,88 @@
+export declare const container: string;
+export declare const calendarPanel: string;
+export declare const header: string;
+export declare const headerTitle: string;
+export declare const navButton: string;
+export declare const navPlaceholder: string;
+export declare const weekdays: string;
+export declare const weekdayLabel: string;
+export declare const divider: string;
+export declare const dateGrid: string;
+export declare const dateCell: string;
+export declare const dateButton: import('@vanilla-extract/recipes').RuntimeFn<{
+    state: {
+        default: {
+            color: "#4c5469";
+            ":hover": {
+                backgroundColor: "rgba(158, 167, 184, 0.12)";
+                borderColor: "#cfd5e1";
+            };
+            ":focus-visible": {
+                borderColor: string;
+            };
+        };
+        today: {
+            color: string;
+            fontWeight: `var(--${string})`;
+            ":hover": {
+                backgroundColor: "rgba(158, 167, 184, 0.12)";
+                borderColor: "#cfd5e1";
+            };
+            ":focus-visible": {
+                borderColor: string;
+            };
+        };
+        selected: {
+            backgroundColor: string;
+            color: string;
+            ":hover": {
+                backgroundColor: string;
+            };
+        };
+        disabled: {
+            color: string;
+            cursor: "not-allowed";
+        };
+        outside: {
+            color: "#d1d1d1";
+            cursor: "default";
+        };
+        rangeStart: {
+            backgroundColor: string;
+            color: string;
+        };
+        rangeEnd: {
+            backgroundColor: string;
+            color: string;
+        };
+        inRange: {
+            color: string;
+            ":hover": {
+                backgroundColor: "rgba(158, 167, 184, 0.12)";
+                borderColor: "#cfd5e1";
+            };
+        };
+    };
+}>;
+export declare const rangeBg: import('@vanilla-extract/recipes').RuntimeFn<{
+    position: {
+        start: {
+            left: "50%";
+            backgroundColor: "rgba(33, 81, 236, 0.12)";
+        };
+        middle: {
+            backgroundColor: "rgba(33, 81, 236, 0.12)";
+        };
+        end: {
+            right: "50%";
+            backgroundColor: "rgba(33, 81, 236, 0.12)";
+        };
+        none: {};
+    };
+}>;
+export declare const timeRow: string;
+export declare const timeInput: string;
+export declare const timeSeparator: string;
+export declare const amPmToggle: string;
+export declare const rangeContainer: string;
+export declare const verticalDivider: string;

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

@@ -0,0 +1,57 @@
+import { HTMLAttributes } from 'react';
+export interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 선택된 날짜 */
+    value?: Date | null;
+    /** 날짜 변경 콜백 */
+    onChange?: (date: Date) => void;
+    /** 시간 선택 표시 */
+    showTime?: boolean;
+    /** 최소 선택 가능 날짜 */
+    minDate?: Date;
+    /** 최대 선택 가능 날짜 */
+    maxDate?: Date;
+}
+export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 시작 날짜 */
+    startDate?: Date | null;
+    /** 종료 날짜 */
+    endDate?: Date | null;
+    /** 범위 변경 콜백 */
+    onChange?: (range: {
+        start: Date | null;
+        end: Date | null;
+    }) => void;
+}
+/**
+ * **DatePicker**
+ *
+ * 날짜 선택 캘린더 패널.
+ *
+ * - 단일 날짜 선택
+ * - `showTime`으로 시간 입력 추가 가능
+ * - `minDate` / `maxDate`로 선택 범위 제한
+ *
+ * ```tsx
+ * <DatePicker value={date} onChange={setDate} />
+ * <DatePicker value={date} onChange={setDate} showTime />
+ * ```
+ */
+export declare function DatePicker({ value, onChange, showTime, minDate, maxDate, className, ...rest }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * **DateRangePicker**
+ *
+ * 날짜 범위 선택을 위한 듀얼 캘린더 패널.
+ *
+ * - 좌측: 현재 월, 우측: 다음 월
+ * - 시작일 → 종료일 순서로 클릭하여 범위 선택
+ * - 호버 시 범위 미리보기
+ *
+ * ```tsx
+ * <DateRangePicker
+ *   startDate={start}
+ *   endDate={end}
+ *   onChange={({ start, end }) => { setStart(start); setEnd(end); }}
+ * />
+ * ```
+ */
+export declare function DateRangePicker({ startDate, endDate, onChange, className, ...rest }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,78 @@
+export declare const trigger: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            height: number;
+            padding: `0 var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+        medium: {
+            height: number;
+            padding: `0 var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+        large: {
+            height: number;
+            padding: `0 var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+    };
+    open: {
+        true: {
+            borderColor: string;
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            opacity: number;
+            cursor: "not-allowed";
+            pointerEvents: "none";
+        };
+        false: {};
+    };
+}>;
+export declare const triggerIcon: string;
+export declare const triggerLabel: string;
+export declare const placeholder: string;
+export declare const chevron: import('@vanilla-extract/recipes').RuntimeFn<{
+    open: {
+        true: {
+            transform: "rotate(180deg)";
+        };
+        false: {
+            transform: "rotate(0deg)";
+        };
+    };
+}>;
+export declare const wrapper: string;
+export declare const panel: string;
+export declare const option: import('@vanilla-extract/recipes').RuntimeFn<{
+    selected: {
+        true: {
+            color: string;
+            backgroundColor: "rgba(33, 81, 236, 0.12)";
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            opacity: number;
+            cursor: "not-allowed";
+            pointerEvents: "none";
+        };
+        false: {};
+    };
+}>;
+export declare const optionTextGroup: string;
+export declare const optionDescription: string;
+export declare const checkbox: import('@vanilla-extract/recipes').RuntimeFn<{
+    checked: {
+        true: {
+            backgroundColor: string;
+            borderColor: string;
+            color: string;
+        };
+        false: {};
+    };
+}>;
+export declare const panelHeader: string;

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

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+export type DropdownSize = "small" | "medium" | "large";
+export interface DropdownOption {
+    /** 옵션 값 */
+    value: string;
+    /** 표시 텍스트 */
+    label: string;
+    /** 설명 (Multi Level 모드) */
+    description?: string;
+    /** 비활성화 */
+    disabled?: boolean;
+}
+export interface DropdownProps {
+    /** 크기 */
+    size?: DropdownSize;
+    /** 옵션 목록 */
+    options: DropdownOption[];
+    /** 선택된 값 (controlled) — 다중 선택 시 배열 */
+    value?: string | string[];
+    /** 기본 선택 값 (uncontrolled) */
+    defaultValue?: string | string[];
+    /** 변경 핸들러 */
+    onChange?: (value: string | string[]) => void;
+    /** 플레이스홀더 */
+    placeholder?: string;
+    /** 좌측 아이콘 */
+    icon?: ReactNode;
+    /** 다중 선택 (체크박스 모드) */
+    multiple?: boolean;
+    /** 패널 헤더 텍스트 (Multi Check 모드) */
+    panelHeader?: string;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 추가 className */
+    className?: string;
+}
+export declare function Dropdown({ size, options, value: controlledValue, defaultValue, onChange, placeholder, icon, multiple, panelHeader, disabled, className, }: DropdownProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,49 @@
+/** gradient border 외곽 */
+export declare const uploadAreaOuter: string;
+/** 내부 흰색 영역 */
+export declare const uploadAreaInner: string;
+/** 상단 텍스트 영역 */
+export declare const uploadTextGroup: string;
+export declare const uploadTitle: string;
+export declare const uploadDescription: string;
+/** 버튼 그룹 */
+export declare const uploadButtons: string;
+export declare const attachButton: string;
+export declare const primaryButton: string;
+/** 첨부 파일 목록 (completed 상태) */
+export declare const attachedList: string;
+export declare const thumbnail: import('@vanilla-extract/recipes').RuntimeFn<{
+    layout: {
+        horizontal: {};
+        vertical: {};
+    };
+    size: {
+        large: {};
+        medium: {};
+        small: {};
+    };
+}>;
+export declare const thumbnailImg: string;
+export declare const thumbnailOverlay: string;
+export declare const thumbnailActions: string;
+export declare const thumbnailActionBtn: string;
+export declare const thumbnailFilename: string;
+export declare const fileItem: import('@vanilla-extract/recipes').RuntimeFn<{
+    active: {
+        true: {
+            borderColor: string;
+            backgroundColor: "rgba(33, 81, 236, 0.12)";
+        };
+        false: {};
+    };
+}>;
+export declare const fileItemLeft: string;
+export declare const fileIconBox: string;
+export declare const fileInfo: string;
+export declare const fileName: string;
+export declare const fileMeta: string;
+export declare const fileDeleteBtn: string;
+export declare const badge: string;
+export declare const badgeIcon: string;
+export declare const badgeRemoveBtn: string;
+export declare const selectedPill: string;

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

@@ -0,0 +1,98 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type ThumbnailLayout = "horizontal" | "vertical";
+export type ThumbnailSize = "large" | "medium" | "small";
+export interface FileUploadAreaProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 파일 추가 콜백 */
+    onFilesAdded?: (files: File[]) => void;
+    /** 설명 텍스트 */
+    description?: string;
+    /** accept (input file) */
+    accept?: string;
+    /** 추가 버튼 영역 */
+    extra?: ReactNode;
+    /** 첨부 파일 목록 (children) */
+    children?: ReactNode;
+}
+/**
+ * **FileUploadArea**
+ *
+ * 드래그 앤 드롭 파일 업로드 영역.
+ *
+ * - 그래디언트 보더 (cyan → primary blue)
+ * - AI 아이콘 + 설명 텍스트
+ * - 파일 첨부 버튼
+ * - children으로 첨부된 파일 목록 렌더링
+ *
+ * ```tsx
+ * <FileUploadArea onFilesAdded={handleFiles} description="파일을 드래그하세요">
+ *   {files.map(f => <FileItem key={f.name} filename={f.name} />)}
+ * </FileUploadArea>
+ * ```
+ */
+export declare function FileUploadArea({ onFilesAdded, description, accept, extra, children, className, ...rest }: FileUploadAreaProps): import("react/jsx-runtime").JSX.Element;
+export interface FileThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 이미지 src */
+    src: string;
+    /** 파일명 */
+    filename?: string;
+    /** 레이아웃 */
+    layout?: ThumbnailLayout;
+    /** 사이즈 */
+    size?: ThumbnailSize;
+    /** 다운로드 콜백 */
+    onDownload?: () => void;
+    /** 확대/삭제 콜백 */
+    onExpand?: () => void;
+}
+/**
+ * **FileThumbnail**
+ *
+ * 이미지 썸네일 미리보기 카드.
+ *
+ * - horizontal / vertical 레이아웃
+ * - large / medium / small 사이즈
+ * - 호버 시 오버레이 + 액션 아이콘
+ *
+ * ```tsx
+ * <FileThumbnail src="/img.jpg" filename="photo.jpg" size="large" />
+ * ```
+ */
+export declare function FileThumbnail({ src, filename, layout, size, onDownload, onExpand, className, ...rest }: FileThumbnailProps): import("react/jsx-runtime").JSX.Element;
+export interface FileItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 파일명 */
+    filename: string;
+    /** 파일 크기 / 설명 */
+    fileMeta?: string;
+    /** 선택(active) 상태 */
+    active?: boolean;
+    /** 삭제 콜백 */
+    onDelete?: () => void;
+    /** 커스텀 아이콘 */
+    icon?: ReactNode;
+}
+/**
+ * **FileItem**
+ *
+ * 파일 목록 항목. 아이콘 + 파일명 + 메타 + 삭제 버튼.
+ *
+ * ```tsx
+ * <FileItem filename="document.docx" fileMeta="2.4 MB" onDelete={handleDelete} />
+ * ```
+ */
+export declare function FileItem({ filename, fileMeta, active, onDelete, icon, className, ...rest }: FileItemProps): import("react/jsx-runtime").JSX.Element;
+export interface FileAttachBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** 파일명 */
+    filename: string;
+    /** 제거 콜백 */
+    onRemove?: () => void;
+}
+/**
+ * **FileAttachBadge**
+ *
+ * 첨부 파일 인라인 배지 (📎 파일명 ✕).
+ *
+ * ```tsx
+ * <FileAttachBadge filename="report.pdf" onRemove={() => {}} />
+ * ```
+ */
+export declare function FileAttachBadge({ filename, onRemove, className, ...rest }: FileAttachBadgeProps): import("react/jsx-runtime").JSX.Element;