@lawkit/ui 0.1.0

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

@@ -0,0 +1,52 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        fill: {
+            borderRadius: `var(--${string})`;
+            overflow: "hidden";
+        };
+        outline: {};
+    };
+}>;
+export declare const item: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        fill: {
+            backgroundColor: string;
+            color: string;
+            borderRight: "1px solid rgba(0, 0, 0, 0.12)";
+            selectors: {
+                "&:last-child": {
+                    borderRight: "none";
+                };
+                "&:hover:not([data-active='true'])": {
+                    backgroundColor: string;
+                };
+            };
+        };
+        outline: {
+            backgroundColor: "transparent";
+            color: string;
+            border: `1px solid ${string}`;
+            marginLeft: number;
+            borderRadius: number;
+            selectors: {
+                "&:first-child": {
+                    marginLeft: number;
+                    borderTopLeftRadius: `var(--${string})`;
+                    borderBottomLeftRadius: `var(--${string})`;
+                };
+                "&:last-child": {
+                    borderTopRightRadius: `var(--${string})`;
+                    borderBottomRightRadius: `var(--${string})`;
+                };
+                "&:hover:not([data-active='true'])": {
+                    backgroundColor: "rgba(33, 81, 236, 0.12)";
+                };
+            };
+        };
+    };
+    active: {
+        true: {};
+        false: {};
+    };
+}>;
+export declare const iconSlot: string;

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export type IconButtonGroupVariant = "fill" | "outline";
+export interface IconButtonGroupItem {
+    /** 고유 식별 값 */
+    value: string;
+    /** 아이콘 */
+    icon: ReactNode;
+    /** 접근성 라벨 */
+    "aria-label": string;
+}
+export interface IconButtonGroupProps {
+    /** 아이템 목록 */
+    items: IconButtonGroupItem[];
+    /** 현재 활성화된 값 */
+    value?: string;
+    /** 값 변경 핸들러 */
+    onChange?: (value: string) => void;
+    /** 스타일 변형 */
+    variant?: IconButtonGroupVariant;
+    /** 추가 className */
+    className?: string;
+}
+export declare function IconButtonGroup({ items, value, onChange, variant, className, }: IconButtonGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+export declare const wrapper: string;
+export declare const card: string;
+export declare const header: string;
+export declare const headerText: string;
+export declare const body: string;
+export declare const step: string;
+export declare const stepIcon: string;
+export declare const stepLabel: string;
+export declare const stepArrow: string;

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

@@ -0,0 +1,38 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface InfoPopoverStep {
+    /** 스텝 아이콘 (ReactNode) */
+    icon?: ReactNode;
+    /** 스텝 라벨 */
+    label: string;
+}
+export interface InfoPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 요약 헤더 텍스트 (예: "법무검토 중 외 3개") */
+    title: string;
+    /** 프로세스 스텝 목록 */
+    steps: InfoPopoverStep[];
+    /** 열림 상태 (제어 모드) */
+    open?: boolean;
+    /** 열림/닫힘 핸들러 */
+    onOpenChange?: (open: boolean) => void;
+    /** 트리거 요소 */
+    children: ReactNode;
+}
+/**
+ * **InfoPopover**
+ *
+ * 프로세스 진행 상태를 스텝으로 보여주는 정보 팝오버.
+ * 다크 헤더바에 요약 텍스트, 본문에 아이콘+라벨 스텝이 화살표로 연결됩니다.
+ *
+ * ```tsx
+ * <InfoPopover
+ *   title="법무검토 중 외 3개"
+ *   steps={[
+ *     { label: "법무 검토 중", icon: <SomeIcon /> },
+ *     { label: "요청자 검토 중", icon: <SomeIcon /> },
+ *   ]}
+ * >
+ *   <span>법무검토 중 외 3개</span>
+ * </InfoPopover>
+ * ```
+ */
+export declare function InfoPopover({ title, steps, open: controlledOpen, onOpenChange, children, className, ...rest }: InfoPopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,99 @@
+export declare const field: string;
+export declare const labelRow: string;
+export declare const labelGroup: string;
+export declare const label: string;
+export declare const requiredDot: string;
+export declare const caption: string;
+export declare const inputWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            height: number;
+            padding: `0 var(--${string})`;
+        };
+        medium: {
+            height: number;
+            padding: "0 14px";
+        };
+        large: {
+            height: number;
+            padding: "0 14px";
+        };
+    };
+    state: {
+        default: {
+            selectors: {
+                "&:focus-within": {
+                    borderColor: string;
+                    boxShadow: `var(--${string})`;
+                };
+            };
+        };
+        active: {
+            borderColor: string;
+            boxShadow: `var(--${string})`;
+        };
+        success: {
+            borderColor: "#28c76f";
+        };
+        warning: {
+            borderColor: string;
+        };
+        disabled: {
+            backgroundColor: string;
+            cursor: "not-allowed";
+            pointerEvents: "none";
+        };
+    };
+}>;
+export declare const input: string;
+export declare const iconSlot: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            width: number;
+            height: number;
+        };
+        medium: {
+            width: number;
+            height: number;
+        };
+        large: {
+            width: number;
+            height: number;
+        };
+    };
+}>;
+export declare const suffix: string;
+export declare const suffixDivider: string;
+export declare const helper: import('@vanilla-extract/recipes').RuntimeFn<{
+    state: {
+        default: {
+            color: string;
+        };
+        active: {
+            color: string;
+        };
+        success: {
+            color: "#1bc47d";
+        };
+        warning: {
+            color: "#ea5455";
+        };
+        disabled: {
+            color: string;
+        };
+    };
+}>;
+export declare const multiWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
+    disabled: {
+        true: {
+            backgroundColor: string;
+            cursor: "not-allowed";
+            pointerEvents: "none";
+        };
+        false: {};
+    };
+}>;
+export declare const badge: string;
+export declare const badgeRemove: string;
+export declare const multiInput: string;
+export declare const multiIcon: string;

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

@@ -0,0 +1,86 @@
+import { ReactNode, InputHTMLAttributes, HTMLAttributes } from 'react';
+export type InputSize = "small" | "medium" | "large";
+export type InputState = "default" | "active" | "success" | "warning" | "disabled";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** 사이즈 */
+    inputSize?: InputSize;
+    /** 상태 */
+    state?: InputState;
+    /** 왼쪽 아이콘 */
+    leftIcon?: ReactNode;
+    /** 오른쪽 아이콘 */
+    rightIcon?: ReactNode;
+    /** 오른쪽 접미사 (단위 텍스트, 드롭다운 등) */
+    suffix?: ReactNode;
+    /** wrapper className */
+    wrapperClassName?: string;
+}
+/**
+ * **Input**
+ *
+ * 텍스트 입력 필드.
+ *
+ * - `inputSize`: small(30) / medium(38) / large(46)
+ * - `state`: default / active / success / warning / disabled
+ * - `leftIcon` / `rightIcon`: 아이콘 슬롯
+ * - `suffix`: 오른쪽 접미사 (단위, 드롭다운 버튼 등)
+ */
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export interface InputGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** 라벨 */
+    label?: string;
+    /** 필수 표시 */
+    required?: boolean;
+    /** 캡션 (라벨 오른쪽) */
+    caption?: string;
+    /** 도움말 텍스트 (인풋 아래) */
+    helperText?: string;
+    /** 상태 (도움말 색상에 반영) */
+    state?: InputState;
+    /** 내부 콘텐츠 (Input 등) */
+    children: ReactNode;
+}
+/**
+ * **InputGroup**
+ *
+ * 라벨 + 인풋 + 도움말을 묶는 필드 래퍼.
+ *
+ * ```tsx
+ * <InputGroup label="Email" required helperText="유효한 이메일을 입력하세요" state="warning">
+ *   <Input placeholder="email@example.com" state="warning" />
+ * </InputGroup>
+ * ```
+ */
+export declare function InputGroup({ label, required, caption, helperText, state, children, className, ...rest }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface MultiSelectItem {
+    /** 고유 키 */
+    key: string;
+    /** 표시 라벨 */
+    label: string;
+}
+export interface MultiSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 선택된 항목 목록 */
+    value: MultiSelectItem[];
+    /** 항목 제거 콜백 */
+    onRemove?: (key: string) => void;
+    /** placeholder */
+    placeholder?: string;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 입력 변경 콜백 (검색용) */
+    onInputChange?: (value: string) => void;
+}
+/**
+ * **MultiSelect**
+ *
+ * 여러 항목을 뱃지 태그로 표시하는 멀티 셀렉트 입력.
+ *
+ * ```tsx
+ * <MultiSelect
+ *   value={[{ key: "1", label: "User Name1" }]}
+ *   onRemove={(key) => removeItem(key)}
+ *   placeholder="검색..."
+ * />
+ * ```
+ */
+export declare function MultiSelect({ value, onRemove, placeholder, disabled, onInputChange, className, ...rest }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,47 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {};
+        flush: {};
+    };
+}>;
+export declare const item: import('@vanilla-extract/recipes').RuntimeFn<{
+    active: {
+        true: {
+            backgroundColor: string;
+            color: string;
+        };
+    };
+    danger: {
+        true: {
+            color: string;
+        };
+    };
+    disabled: {
+        true: {
+            opacity: number;
+            pointerEvents: "none";
+        };
+    };
+    clickable: {
+        true: {
+            cursor: "pointer";
+            selectors: {
+                "&:hover": {
+                    backgroundColor: "#f2f4f6";
+                };
+            };
+        };
+    };
+    flush: {
+        true: {
+            minHeight: number;
+            fontSize: `var(--${string})`;
+        };
+    };
+}>;
+export declare const leading: string;
+export declare const content: string;
+export declare const trailing: string;
+export declare const bottomSheet: string;
+export declare const dragHandle: string;
+export declare const dragHandleBar: string;

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

@@ -0,0 +1,30 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type ListGroupVariant = "default" | "flush";
+export interface ListGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** default=bordered, flush=border 없음 (BottomSheet 용) */
+    variant?: ListGroupVariant;
+    /** 간편 API: 문자열 배열로 아이템 생성 */
+    items?: string[];
+    children?: ReactNode;
+}
+export interface ListGroupItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** 선택/활성 상태 (파란 배경 + 흰 텍스트) */
+    active?: boolean;
+    /** 위험 항목 (빨간 텍스트) */
+    danger?: boolean;
+    /** 비활성 */
+    disabled?: boolean;
+    /** 좌측 아이콘/뱃지 영역 */
+    leading?: ReactNode;
+    /** 우측 시간/뱃지 영역 */
+    trailing?: ReactNode;
+    /** 클릭 핸들러 */
+    onClick?: () => void;
+    children: ReactNode;
+}
+export interface BottomSheetProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export declare function ListGroupItem({ active, danger, disabled, leading: leadingNode, trailing: trailingNode, onClick, children, className, ...rest }: ListGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListGroup({ variant, items, children, className, ...rest }: ListGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function BottomSheet({ children, className, ...rest }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+export interface MentionProps extends HTMLAttributes<HTMLSpanElement> {
+    /** 사용자 이름 (@ 자동 추가) */
+    name: string;
+}
+/**
+ * **Mention**
+ *
+ * 인라인 멘션 태그. `@사용자명`을 파란색 뱃지로 표시.
+ *
+ * ```tsx
+ * <p>검토자: <Mention name="나담당" /> 님이 확인 중입니다.</p>
+ * ```
+ */
+export declare function Mention({ name, className, ...rest }: MentionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+export declare const overlay: string;
+export declare const card: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            maxWidth: number;
+        };
+        medium: {
+            maxWidth: number;
+        };
+        large: {
+            maxWidth: number;
+        };
+        xlarge: {
+            maxWidth: number;
+        };
+    };
+}>;
+export declare const header: string;
+export declare const headerTitle: string;
+export declare const headerActions: string;
+export declare const closeButton: string;
+export declare const body: string;
+export declare const footer: string;

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

@@ -0,0 +1,34 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type ModalSize = "small" | "medium" | "large" | "xlarge";
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 모달 표시 여부 */
+    open: boolean;
+    /** 닫기 핸들러 (Escape, backdrop 클릭, close 버튼) */
+    onClose: () => void;
+    /** 모달 너비 프리셋 */
+    size?: ModalSize;
+    /** 헤더 타이틀 (간편 API) */
+    title?: ReactNode;
+    /** 푸터 콘텐츠 (간편 API) */
+    footer?: ReactNode;
+    /** backdrop 클릭 닫기 비활성 */
+    disableBackdropClose?: boolean;
+    /** Escape 키 닫기 비활성 */
+    disableEscapeClose?: boolean;
+    /** 모달 본문 */
+    children?: ReactNode;
+}
+export declare function ModalHeader({ children, actions, className, }: {
+    children: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ModalBody({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ModalFooter({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ open, onClose, size, title, footer, disableBackdropClose, disableEscapeClose, children, className, ...rest }: ModalProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,18 @@
+export declare const root: string;
+export declare const tab: import('@vanilla-extract/recipes').RuntimeFn<{
+    active: {
+        true: {
+            backgroundColor: string;
+            border: `1px solid ${string}`;
+            color: string;
+            selectors: {
+                "&:hover:not(:disabled)": {
+                    color: string;
+                    borderColor: string;
+                };
+            };
+        };
+        false: {};
+    };
+}>;
+export declare const iconSlot: string;

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

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface NavigationTabItem {
+    /** 고유 식별 값 */
+    value: string;
+    /** 탭 텍스트 */
+    label: string;
+    /** 아이콘 */
+    icon?: ReactNode;
+}
+export interface NavigationTabProps {
+    /** 탭 목록 */
+    items: NavigationTabItem[];
+    /** 현재 활성화된 값 */
+    value?: string;
+    /** 값 변경 핸들러 */
+    onChange?: (value: string) => void;
+    /** 추가 className */
+    className?: string;
+}
+export declare function NavigationTab({ items, value, onChange, className, }: NavigationTabProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+export declare const container: string;
+export declare const button: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            width: number;
+            height: number;
+        };
+        medium: {
+            width: number;
+            height: number;
+        };
+        large: {
+            width: number;
+            height: number;
+        };
+    };
+}>;
+export declare const input: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            width: number;
+            height: number;
+            fontSize: `var(--${string})`;
+            fontWeight: `var(--${string})`;
+            lineHeight: "18px";
+            color: "#4c5469";
+        };
+        medium: {
+            width: number;
+            height: number;
+            fontSize: `var(--${string})`;
+            fontWeight: `var(--${string})`;
+            lineHeight: "21px";
+            color: "#4c5469";
+        };
+        large: {
+            width: number;
+            height: number;
+            fontSize: `var(--${string})`;
+            fontWeight: `var(--${string})`;
+            lineHeight: "24px";
+            color: string;
+        };
+    };
+}>;

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

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+export type NumberInputSize = "small" | "medium" | "large";
+export interface NumberInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** 현재 값 */
+    value?: number;
+    /** 값 변경 콜백 */
+    onChange?: (value: number) => void;
+    /** 사이즈 */
+    size?: NumberInputSize;
+    /** 최솟값 */
+    min?: number;
+    /** 최댓값 */
+    max?: number;
+    /** 증감 단위 */
+    step?: number;
+    /** 비활성화 */
+    disabled?: boolean;
+}
+/**
+ * **NumberInput**
+ *
+ * 숫자 입력 스테퍼. −/+ 버튼으로 값 증감.
+ *
+ * - `size`: small / medium / large
+ * - `min` / `max`로 범위 제한
+ * - `step`으로 증감 단위 설정
+ *
+ * ```tsx
+ * <NumberInput value={count} onChange={setCount} min={0} max={100} />
+ * ```
+ */
+export declare function NumberInput({ value, onChange, size, min, max, step, disabled, className, ...rest }: NumberInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+export declare const root: string;
+export declare const arrowButton: string;
+export declare const numbersTrack: string;
+export declare const pageButton: import('@vanilla-extract/recipes').RuntimeFn<{
+    active: {
+        true: {
+            backgroundColor: string;
+            color: string;
+            fontSize: `var(--${string})`;
+            fontWeight: `var(--${string})`;
+            selectors: {
+                "&:hover": {
+                    backgroundColor: string;
+                };
+            };
+        };
+    };
+}>;
+export declare const totalCount: string;
+export declare const totalCountNumber: string;

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+export interface PaginationProps extends HTMLAttributes<HTMLElement> {
+    /** 현재 페이지 (1-based) */
+    page: number;
+    /** 전체 페이지 수 */
+    totalPages: number;
+    /** 페이지 변경 핸들러 */
+    onPageChange: (page: number) => void;
+    /** 표시할 페이지 번호 수 */
+    visiblePages?: number;
+    /** 전체 건수 (설정 시 "총 N건" 표시) */
+    totalCount?: number;
+}
+export declare function PaginationCount({ totalCount, className, }: {
+    totalCount: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Pagination({ page, totalPages, onPageChange, visiblePages, totalCount, className, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element;