@lawkit/ui 0.1.0

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

@@ -0,0 +1,95 @@
+export declare const avatar: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            width: number;
+            height: number;
+        };
+        md: {
+            width: number;
+            height: number;
+        };
+        lg: {
+            width: number;
+            height: number;
+        };
+    };
+}>;
+export declare const photoCircle: string;
+export declare const systemCircle: string;
+export declare const labelCircle: import('@vanilla-extract/recipes').RuntimeFn<{
+    color: {
+        primary: {
+            backgroundColor: "rgba(33, 81, 236, 0.12)";
+            color: string;
+        };
+        success: {
+            backgroundColor: "rgba(39, 194, 129, 0.12)";
+            color: "#1bc47d";
+        };
+        danger: {
+            backgroundColor: "rgba(234, 59, 59, 0.12)";
+            color: "#ea5455";
+        };
+        warning: {
+            backgroundColor: "rgba(240, 175, 35, 0.12)";
+            color: "#f0af23";
+        };
+        info: {
+            backgroundColor: "rgba(0, 207, 232, 0.12)";
+            color: "#00cfe8";
+        };
+        secondary: {
+            backgroundColor: "rgba(130, 134, 139, 0.12)";
+            color: "#82868b";
+        };
+    };
+    size: {
+        sm: {
+            fontSize: "10px";
+            lineHeight: "24px";
+        };
+        md: {
+            fontSize: `var(--${string})`;
+            lineHeight: "38px";
+        };
+        lg: {
+            fontSize: "20px";
+            lineHeight: "48px";
+        };
+    };
+}>;
+export declare const statusDot: import('@vanilla-extract/recipes').RuntimeFn<{
+    status: {
+        online: {
+            backgroundColor: "#1bc47d";
+        };
+        away: {
+            backgroundColor: "#f0af23";
+        };
+        busy: {
+            backgroundColor: "#ea5455";
+        };
+    };
+    size: {
+        sm: {
+            width: number;
+            height: number;
+            bottom: number;
+            right: number;
+        };
+        md: {
+            width: number;
+            height: number;
+            bottom: number;
+            right: number;
+        };
+        lg: {
+            width: number;
+            height: number;
+            bottom: number;
+            right: number;
+        };
+    };
+}>;
+export declare const group: string;
+export declare const groupItem: string;

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

@@ -0,0 +1,56 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type AvatarSize = "sm" | "md" | "lg";
+export type AvatarStatus = "online" | "away" | "busy";
+export type AvatarColor = "primary" | "success" | "danger" | "warning" | "info" | "secondary";
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /** 이미지 URL (photo 모드) */
+    src?: string;
+    /** 이니셜 텍스트 (label 모드) */
+    initials?: string;
+    /** 시스템 아이콘 모드 */
+    system?: boolean;
+    /** 커스텀 시스템 아이콘 */
+    icon?: ReactNode;
+    /** 사이즈 */
+    size?: AvatarSize;
+    /** 상태 표시 (online/away/busy) */
+    status?: AvatarStatus;
+    /** 이니셜 배경 색상 */
+    color?: AvatarColor;
+    /** alt 텍스트 */
+    alt?: string;
+}
+/**
+ * **Avatar**
+ *
+ * 사용자 프로필 아바타.
+ *
+ * - **Photo**: `src` 제공 시 이미지 표시
+ * - **System**: `system` 플래그로 아이콘 아바타
+ * - **Label**: `initials` 제공 시 이니셜 표시
+ * - `status`: online(초록) / away(노랑) / busy(빨강) 상태 점
+ *
+ * ```tsx
+ * <Avatar src="/photo.jpg" status="online" />
+ * <Avatar system />
+ * <Avatar initials="PI" color="success" status="away" />
+ * ```
+ */
+export declare function Avatar({ src, initials, system, icon, size, status, color, alt, className, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/**
+ * **AvatarGroup**
+ *
+ * 아바타를 겹쳐서 그룹으로 표시.
+ *
+ * ```tsx
+ * <AvatarGroup>
+ *   <Avatar src="/a.jpg" size="sm" />
+ *   <Avatar src="/b.jpg" size="sm" />
+ *   <Avatar initials="AB" size="sm" color="info" />
+ * </AvatarGroup>
+ * ```
+ */
+export declare function AvatarGroup({ children, className, ...rest }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    color: {
+        primary: {};
+        secondary: {};
+        success: {};
+        danger: {};
+        warning: {};
+        info: {};
+        dark: {};
+        neutral: {};
+    };
+    variant: {
+        default: {};
+        outline: {
+            backgroundColor: "transparent";
+        };
+    };
+    shape: {
+        rounded: {
+            borderRadius: `var(--${string})`;
+        };
+        round: {
+            borderRadius: "9999px";
+        };
+    };
+    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})`;
+        };
+    };
+}>;
+export declare const disabled: string;
+export declare const iconSlot: string;

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

@@ -0,0 +1,22 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = "default" | "outline";
+export type ButtonColor = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "neutral";
+export type ButtonShape = "rounded" | "round";
+export type ButtonSize = "small" | "medium" | "large";
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+    /** 버튼 스타일 변형 */
+    variant?: ButtonVariant;
+    /** 색상 테마 */
+    color?: ButtonColor;
+    /** 모양 (rounded: 5px / round: pill) */
+    shape?: ButtonShape;
+    /** 크기 */
+    size?: ButtonSize;
+    /** 좌측 아이콘 */
+    iconLeft?: ReactNode;
+    /** 우측 아이콘 */
+    iconRight?: ReactNode;
+    /** 버튼 텍스트 */
+    children?: ReactNode;
+}
+export declare function Button({ variant, color, shape, size, iconLeft, iconRight, disabled, className, children, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,68 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        fill: {
+            borderRadius: `var(--${string})`;
+            overflow: "hidden";
+        };
+        outline: {};
+    };
+    size: {
+        small: {};
+        medium: {};
+    };
+}>;
+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)";
+                };
+            };
+        };
+    };
+    size: {
+        small: {
+            height: number;
+            padding: `0 var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+        medium: {
+            height: number;
+            padding: `0 var(--${string})`;
+            fontSize: `var(--${string})`;
+        };
+    };
+    active: {
+        true: {};
+        false: {};
+    };
+}>;
+export declare const iconSlot: string;

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export type ButtonGroupVariant = "fill" | "outline";
+export type ButtonGroupSize = "small" | "medium";
+export interface ButtonGroupItem {
+    /** 고유 식별 값 */
+    value: string;
+    /** 버튼 텍스트 */
+    label: string;
+    /** 좌측 아이콘 */
+    icon?: ReactNode;
+}
+export interface ButtonGroupProps {
+    /** 아이템 목록 */
+    items: ButtonGroupItem[];
+    /** 현재 활성화된 값 */
+    value?: string;
+    /** 값 변경 핸들러 */
+    onChange?: (value: string) => void;
+    /** 스타일 변형 */
+    variant?: ButtonGroupVariant;
+    /** 크기 */
+    size?: ButtonGroupSize;
+    /** 추가 className */
+    className?: string;
+}
+export declare function ButtonGroup({ items, value, onChange, variant, size, className, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+export declare const root: string;
+export declare const tab: import('@vanilla-extract/recipes').RuntimeFn<{
+    active: {
+        true: {
+            backgroundColor: string;
+            color: string;
+            selectors: {
+                "&:hover:not(:disabled)": {
+                    backgroundColor: string;
+                };
+            };
+        };
+        false: {};
+    };
+    disabled: {
+        true: {
+            cursor: "not-allowed";
+            opacity: number;
+            pointerEvents: "none";
+        };
+        false: {};
+    };
+}>;

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

@@ -0,0 +1,19 @@
+export interface ButtonTabItem {
+    /** 고유 식별 값 */
+    value: string;
+    /** 탭 텍스트 */
+    label: string;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+}
+export interface ButtonTabProps {
+    /** 탭 목록 */
+    items: ButtonTabItem[];
+    /** 현재 활성화된 값 */
+    value?: string;
+    /** 값 변경 핸들러 */
+    onChange?: (value: string) => void;
+    /** 추가 className */
+    className?: string;
+}
+export declare function ButtonTab({ items, value, onChange, className, }: ButtonTabProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,72 @@
+export declare const wrapper: string;
+export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
+    placement: {
+        right: {
+            left: "100%";
+            top: "50%";
+            transform: "translateY(-50%)";
+            flexDirection: "row-reverse";
+            marginLeft: number;
+        };
+        left: {
+            right: "100%";
+            top: "50%";
+            transform: "translateY(-50%)";
+            flexDirection: "row";
+            marginRight: number;
+        };
+        bottom: {
+            top: "100%";
+            left: "50%";
+            transform: "translateX(-50%)";
+            flexDirection: "column-reverse";
+            marginTop: number;
+        };
+        top: {
+            bottom: "100%";
+            left: "50%";
+            transform: "translateX(-50%)";
+            flexDirection: "column";
+            marginBottom: number;
+        };
+    };
+}>;
+export declare const card: string;
+export declare const arrow: import('@vanilla-extract/recipes').RuntimeFn<{
+    placement: {
+        right: {
+            borderTop: "7px solid transparent";
+            borderBottom: "7px solid transparent";
+            borderRight: "8px solid #eeeff2";
+        };
+        left: {
+            borderTop: "7px solid transparent";
+            borderBottom: "7px solid transparent";
+            borderLeft: "8px solid #eeeff2";
+        };
+        bottom: {
+            borderLeft: "7px solid transparent";
+            borderRight: "7px solid transparent";
+            borderBottom: "8px solid #eeeff2";
+        };
+        top: {
+            borderLeft: "7px solid transparent";
+            borderRight: "7px solid transparent";
+            borderTop: "8px solid #eeeff2";
+        };
+    };
+}>;
+export declare const header: string;
+export declare const headerContent: string;
+export declare const headerBadge: string;
+export declare const headerTitle: string;
+export declare const closeBtn: string;
+export declare const divider: string;
+export declare const badgesRow: string;
+export declare const listGroup: string;
+export declare const listItem: string;
+export declare const listLabel: string;
+export declare const listValue: string;
+export declare const footer: string;
+export declare const primaryBtn: string;
+export declare const outlineBtn: string;

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

@@ -0,0 +1,61 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export type CalendarPopoverPlacement = "top" | "bottom" | "left" | "right";
+export interface CalendarPopoverField {
+    /** 라벨 (예: "관리번호", "요청자") */
+    label: string;
+    /** 값 (텍스트 또는 ReactNode) */
+    value: ReactNode;
+}
+export interface CalendarPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 카테고리 뱃지 (예: "계약검토", "기일") */
+    badge?: string;
+    /** 제목 */
+    title: string;
+    /** 뱃지 행 (ReactNode — Badge 컴포넌트 조합) */
+    badges?: ReactNode;
+    /** 상세 정보 행 (ReactNode — 자유 구성) */
+    details?: ReactNode;
+    /** key-value 필드 목록 */
+    fields?: CalendarPopoverField[];
+    /** 화살표 위치 */
+    placement?: CalendarPopoverPlacement;
+    /** 열림 상태 (제어 모드) */
+    open?: boolean;
+    /** 열림/닫힘 핸들러 */
+    onOpenChange?: (open: boolean) => void;
+    /** 닫기 핸들러 */
+    onClose?: () => void;
+    /** 주요 버튼 텍스트 */
+    primaryText?: string;
+    /** 보조 버튼 텍스트 */
+    secondaryText?: string;
+    /** 주요 버튼 클릭 */
+    onPrimary?: () => void;
+    /** 보조 버튼 클릭 */
+    onSecondary?: () => void;
+    /** 트리거 요소 */
+    children: ReactNode;
+}
+/**
+ * **CalendarPopover**
+ *
+ * 캘린더 일정 상세를 보여주는 카드형 팝오버.
+ * Badge, key-value 필드, 버튼으로 구성됩니다.
+ *
+ * ```tsx
+ * <CalendarPopover
+ *   badge="계약검토"
+ *   title="법무시스템 공급 계약"
+ *   fields={[
+ *     { label: "관리번호", value: "C20221108-0001" },
+ *     { label: "요청자", value: "박영업" },
+ *   ]}
+ *   primaryText="일정 수정"
+ *   secondaryText="사건 바로가기"
+ *   placement="right"
+ * >
+ *   <div>6/19</div>
+ * </CalendarPopover>
+ * ```
+ */
+export declare function CalendarPopover({ badge, title, badges, details, fields, placement, open: controlledOpen, onOpenChange, onClose, primaryText, secondaryText, onPrimary, onSecondary, children, className, ...rest }: CalendarPopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    bordered: {
+        true: {
+            border: `1px solid ${string}`;
+        };
+        false: {};
+    };
+}>;
+export declare const header: string;
+export declare const headerTitle: string;
+export declare const headerActions: string;
+export declare const body: string;
+export declare const title: string;
+export declare const bodyText: string;
+export declare const footer: string;

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

@@ -0,0 +1,29 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 헤더 텍스트 (divider 포함 상단 영역) */
+    header?: ReactNode;
+    /** 헤더 우측 액션 영역 */
+    headerActions?: ReactNode;
+    /** 본문 제목 (body 내부, 18px medium) */
+    title?: ReactNode;
+    /** 푸터 (divider 포함 하단 영역) */
+    footer?: ReactNode;
+    /** 명시적 border 표시 */
+    bordered?: boolean;
+    /** 본문 콘텐츠 */
+    children?: ReactNode;
+}
+export declare function CardHeader({ children, actions, className, }: {
+    children: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CardBody({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CardFooter({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ header, headerActions: headerActionsProp, title, footer, bordered, children, className, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {
+            backgroundColor: string;
+            border: "1px solid #eeeff2";
+        };
+        pie: {
+            backgroundColor: string;
+        };
+    };
+}>;
+export declare const header: string;
+export declare const divider: string;
+export declare const body: string;
+export declare const row: string;
+export declare const dot: string;
+export declare const label: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {
+            color: "#4c5469";
+        };
+        pie: {
+            color: string;
+        };
+    };
+}>;
+export declare const value: import('@vanilla-extract/recipes').RuntimeFn<{
+    variant: {
+        default: {
+            color: "#4c5469";
+        };
+        pie: {
+            color: string;
+        };
+    };
+}>;

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

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from 'react';
+export interface ChartTooltipDataItem {
+    /** 시리즈 라벨 (예: "Label :") */
+    label: string;
+    /** 값 (예: "90") */
+    value: string | number;
+    /** 시리즈 색상 (dot 표시용, default variant) */
+    color?: string;
+}
+export interface ChartTooltipProps extends HTMLAttributes<HTMLDivElement> {
+    /** 스타일 변형 */
+    variant?: "default" | "pie";
+    /** 헤더 텍스트 (카테고리/날짜 등, default variant) */
+    header?: string;
+    /** 데이터 목록 */
+    items: ChartTooltipDataItem[];
+}
+/**
+ * **ChartTooltip**
+ *
+ * 차트 위에 표시되는 데이터 툴팁.
+ *
+ * - `default`: 흰 배경 + 헤더(날짜) + 컬러 dot + label/value
+ * - `pie`: 파란 배경 + label/value (dot 없음)
+ *
+ * 차트 라이브러리의 custom tooltip 렌더러에서 사용합니다.
+ */
+export declare function ChartTooltip({ variant, header, items, className, ...rest }: ChartTooltipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,71 @@
+export declare const wrapper: string;
+export declare const wrapperDisabled: string;
+export declare const hiddenInput: string;
+export declare const box: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            width: number;
+            height: number;
+        };
+        medium: {
+            width: number;
+            height: number;
+        };
+        large: {
+            width: number;
+            height: number;
+        };
+    };
+    checked: {
+        true: {
+            backgroundColor: string;
+            boxShadow: "none";
+        };
+        false: {
+            backgroundColor: string;
+            boxShadow: "inset 0 0 0 1.5px #9ea7b8";
+        };
+    };
+    disabled: {
+        true: {};
+        false: {};
+    };
+}>;
+export declare const checkIcon: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            width: number;
+            height: number;
+        };
+        medium: {
+            width: number;
+            height: number;
+        };
+        large: {
+            width: number;
+            height: number;
+        };
+    };
+}>;
+export declare const label: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            fontSize: `var(--${string})`;
+            lineHeight: "16px";
+        };
+        medium: {
+            fontSize: `var(--${string})`;
+            lineHeight: "18px";
+        };
+        large: {
+            fontSize: `var(--${string})`;
+            lineHeight: "21px";
+        };
+    };
+    disabled: {
+        true: {
+            color: "#d1d1d1";
+        };
+        false: {};
+    };
+}>;