@lawkit/ui 0.1.67 → 0.1.70

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

@@ -0,0 +1,72 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    direction: {
+        horizontal: {
+            alignItems: "stretch";
+            overflowX: "auto";
+            paddingBottom: `var(--${string})`;
+        };
+        vertical: {
+            flexDirection: "column";
+        };
+    };
+}>;
+export declare const item: import('@vanilla-extract/recipes').RuntimeFn<{
+    direction: {
+        horizontal: {};
+        vertical: {
+            minWidth: number;
+            width: "100%";
+        };
+    };
+    status: {
+        pending: {
+            borderColor: `var(--${string})`;
+        };
+        current: {
+            borderColor: `var(--${string})`;
+            boxShadow: `var(--${string})`;
+        };
+        approved: {
+            borderColor: string;
+        };
+        rejected: {
+            borderColor: `var(--${string})`;
+        };
+    };
+}>;
+export declare const connector: import('@vanilla-extract/recipes').RuntimeFn<{
+    direction: {
+        horizontal: {
+            top: "50%";
+            left: "100%";
+            width: `var(--${string})`;
+            height: "1px";
+            transform: "translateY(-50%)";
+        };
+        vertical: {
+            top: "100%";
+            left: `var(--${string})`;
+            width: "1px";
+            height: `var(--${string})`;
+        };
+    };
+    status: {
+        pending: {};
+        current: {
+            background: `var(--${string})`;
+        };
+        approved: {
+            background: string;
+        };
+        rejected: {
+            background: `var(--${string})`;
+        };
+    };
+}>;
+export declare const header: string;
+export declare const nameBlock: string;
+export declare const name: string;
+export declare const role: string;
+export declare const order: string;
+export declare const meta: string;
+export declare const comment: string;

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export type ApprovalLineStatus = "pending" | "current" | "approved" | "rejected";
+export type ApprovalLineItem = {
+    id: string;
+    order?: number;
+    name: string;
+    role?: string;
+    department?: string;
+    status?: ApprovalLineStatus;
+    date?: string;
+    comment?: ReactNode;
+    metadata?: ReactNode;
+};
+export type ApprovalLineProps = {
+    items: ApprovalLineItem[];
+    direction?: "horizontal" | "vertical";
+    showConnector?: boolean;
+    ariaLabel?: string;
+};
+export declare function ApprovalLine({ ariaLabel, direction, items, showConnector }: ApprovalLineProps): import("react/jsx-runtime").JSX.Element;
+export default ApprovalLine;

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

@@ -0,0 +1,21 @@
+export declare const box: import('@vanilla-extract/recipes').RuntimeFn<{
+    bg: {
+        page: {
+            background: `var(--${string})`;
+        };
+        canvas: {
+            background: `var(--${string})`;
+        };
+        subtle: {
+            background: `var(--${string})`;
+        };
+        raised: {
+            background: `var(--${string})`;
+        };
+    };
+    border: {
+        true: {
+            border: `1px solid var(--${string})`;
+        };
+    };
+}>;

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

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { themeVars } from '../../../../tokens/src';
+export type BoxSpacing = keyof typeof themeVars.spacing;
+export type BoxBackground = "page" | "canvas" | "subtle" | "raised";
+export type BoxRadius = keyof typeof themeVars.radius;
+export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
+    /** 사방 패딩 (디자인 토큰: x1=4px ~ x6=24px) */
+    p?: BoxSpacing;
+    /** 좌우 패딩 — p보다 우선 */
+    px?: BoxSpacing;
+    /** 상하 패딩 — p보다 우선 */
+    py?: BoxSpacing;
+    /** 배경 (surface 역할 토큰) */
+    bg?: BoxBackground;
+    /** 모서리 라운드 (radius 토큰: sm=4px, md=6px, lg=8px) */
+    radius?: BoxRadius;
+    /** 1px border.subtle 테두리 */
+    border?: boolean;
+    children?: ReactNode;
+}
+export declare function Box({ p, px, py, bg, radius, border, className, style, children, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
+    intent: {
+        info: {
+            background: "rgba(33, 81, 236, 0.12)";
+            borderColor: `var(--${string})`;
+        };
+        success: {
+            background: "rgba(39, 194, 129, 0.12)";
+            borderColor: `var(--${string})`;
+        };
+        warning: {
+            background: "rgba(240, 175, 35, 0.12)";
+            borderColor: `var(--${string})`;
+        };
+        danger: {
+            background: "rgba(234, 59, 59, 0.12)";
+            borderColor: `var(--${string})`;
+        };
+    };
+}>;
+export declare const icon: import('@vanilla-extract/recipes').RuntimeFn<{
+    intent: {
+        info: {
+            color: `var(--${string})`;
+        };
+        success: {
+            color: `var(--${string})`;
+        };
+        warning: {
+            color: `var(--${string})`;
+        };
+        danger: {
+            color: `var(--${string})`;
+        };
+    };
+}>;
+export declare const body: string;
+export declare const title: string;

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

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type CalloutIntent = "info" | "success" | "warning" | "danger";
+export interface CalloutProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 의도 색 (기본 info) */
+    intent?: CalloutIntent;
+    /** 굵은 제목 줄 (선택) */
+    title?: ReactNode;
+    /** 아이콘 교체 — 기본은 intent별 글리프 */
+    icon?: ReactNode;
+    /** 아이콘 숨김 */
+    hideIcon?: boolean;
+    /** 본문 */
+    children?: ReactNode;
+}
+export declare function Callout({ intent, title, icon, hideIcon, className, children, ...rest }: CalloutProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+export declare const container: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            maxWidth: "768px";
+        };
+        md: {
+            maxWidth: "1024px";
+        };
+        lg: {
+            maxWidth: "1280px";
+        };
+        full: {
+            maxWidth: "none";
+        };
+    };
+}>;

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

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type ContainerSize = "sm" | "md" | "lg" | "full";
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    /** 최대 폭 — sm=768px, md=1024px, lg=1280px, full=제한 없음 */
+    size?: ContainerSize;
+    children?: ReactNode;
+}
+export declare function Container({ size, className, children, ...rest }: ContainerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+export declare const badge: import('@vanilla-extract/recipes').RuntimeFn<{
+    level: {
+        dday: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+        danger: {
+            background: "rgba(234, 59, 59, 0.12)";
+            border: `1px solid var(--${string})`;
+            color: `var(--${string})`;
+        };
+        warning: {
+            background: "rgba(240, 175, 35, 0.12)";
+            border: `1px solid var(--${string})`;
+            color: `var(--${string})`;
+        };
+        neutral: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+        overdue: {
+            background: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+    };
+}>;

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export type DdayLevel = "dday" | "danger" | "warning" | "neutral" | "overdue";
+export interface DdayBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** 목표 날짜 (달력일 기준으로 D-day 계산) */
+    date: Date | string;
+    /** 기준일 — 기본값은 현재. 테스트/스토리에서 고정할 때 사용 */
+    today?: Date | string;
+}
+export declare function DdayBadge({ date, today, className, ...rest }: DdayBadgeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+export declare const divider: import('@vanilla-extract/recipes').RuntimeFn<{
+    orientation: {
+        horizontal: {
+            width: "100%";
+            height: "1px";
+        };
+        vertical: {
+            width: "1px";
+            alignSelf: "stretch";
+        };
+    };
+}>;

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

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export type DividerOrientation = "horizontal" | "vertical";
+export interface DividerProps extends HTMLAttributes<HTMLElement> {
+    /** 방향 — vertical은 flex 부모 안에서 stretch */
+    orientation?: DividerOrientation;
+}
+export declare function Divider({ orientation, className, ...rest }: DividerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare const root: string;
+export declare const icon: string;
+export declare const title: string;
+export declare const description: string;
+export declare const action: string;

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

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 상단 아이콘 (44px 내외 권장) */
+    icon?: ReactNode;
+    /** 제목 */
+    title: ReactNode;
+    /** 보조 설명 */
+    description?: ReactNode;
+    /** 하단 액션 (Button 등) */
+    action?: ReactNode;
+}
+export declare function EmptyState({ icon, title, description, action, className, ...rest }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { themeVars } from '../../../../tokens/src';
+export type GridGap = keyof typeof themeVars.spacing;
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /** 동일 폭 컬럼 수 — repeat(N, minmax(0, 1fr)) */
+    columns?: number;
+    /** 행/열 공통 간격 토큰 */
+    gap?: GridGap;
+    /** 행 간격 — gap보다 우선 */
+    rowGap?: GridGap;
+    /** 열 간격 — gap보다 우선 */
+    columnGap?: GridGap;
+    children?: ReactNode;
+}
+export declare function Grid({ columns, gap, rowGap, columnGap, className, style, children, ...rest }: GridProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare const root: string;
+export declare const header: string;
+export declare const nav: string;
+export declare const content: string;
+export declare const panel: string;

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

@@ -0,0 +1,33 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface PageLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export interface PageLayoutSlotProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+export interface PageLayoutNavProps extends HTMLAttributes<HTMLElement> {
+    /** LNB 폭 (px) */
+    width?: number;
+    /** 접힘 — collapsedWidth로 축소 */
+    collapsed?: boolean;
+    /** 접혔을 때 폭 (px) */
+    collapsedWidth?: number;
+    children?: ReactNode;
+}
+export interface PageLayoutPanelProps extends HTMLAttributes<HTMLElement> {
+    /** 보조 패널 폭 (px) */
+    width?: number;
+    children?: ReactNode;
+}
+export declare function PageLayoutHeader({ className, children, ...rest }: PageLayoutSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageLayoutNav({ width, collapsed, collapsedWidth, className, style, children, ...rest }: PageLayoutNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageLayoutContent({ className, children, ...rest }: PageLayoutSlotProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageLayoutPanel({ width, className, style, children, ...rest }: PageLayoutPanelProps): import("react/jsx-runtime").JSX.Element;
+declare function PageLayoutRoot({ className, children, ...rest }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare const PageLayout: typeof PageLayoutRoot & {
+    Header: typeof PageLayoutHeader;
+    Nav: typeof PageLayoutNav;
+    Content: typeof PageLayoutContent;
+    Panel: typeof PageLayoutPanel;
+};
+export {};

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

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

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

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export interface SpacerProps extends HTMLAttributes<HTMLDivElement> {
+}
+export declare function Spacer({ className, ...rest }: SpacerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,49 @@
+export declare const root: string;
+export declare const item: string;
+export declare const markerColumn: string;
+export declare const dot: import('@vanilla-extract/recipes').RuntimeFn<{
+    status: {
+        done: {
+            width: "10px";
+            height: "10px";
+            background: `var(--${string})`;
+        };
+        current: {
+            width: "12px";
+            height: "12px";
+            background: `var(--${string})`;
+            border: `3px solid var(--${string})`;
+        };
+        upcoming: {
+            width: "10px";
+            height: "10px";
+            background: `var(--${string})`;
+            border: `2px solid var(--${string})`;
+        };
+    };
+}>;
+export declare const connector: string;
+export declare const content: string;
+export declare const date: import('@vanilla-extract/recipes').RuntimeFn<{
+    status: {
+        done: {};
+        current: {
+            color: `var(--${string})`;
+            fontWeight: `var(--${string})`;
+        };
+        upcoming: {
+            color: `var(--${string})`;
+        };
+    };
+}>;
+export declare const title: import('@vanilla-extract/recipes').RuntimeFn<{
+    status: {
+        done: {};
+        current: {};
+        upcoming: {
+            color: `var(--${string})`;
+            fontWeight: `var(--${string})`;
+        };
+    };
+}>;
+export declare const description: string;

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type TimelineStatus = "done" | "current" | "upcoming";
+export interface TimelineItem {
+    id: string;
+    /** 이벤트 제목 */
+    title: ReactNode;
+    /** 날짜/시각 표기 */
+    date?: ReactNode;
+    /** 보조 설명 */
+    description?: ReactNode;
+    /** 진행 상태 (기본 done) */
+    status?: TimelineStatus;
+}
+export interface TimelineProps extends Omit<HTMLAttributes<HTMLOListElement>, "children"> {
+    items: TimelineItem[];
+}
+export declare function Timeline({ items, className, ...rest }: TimelineProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,5 @@
+export { ApprovalLine } from './components/ApprovalLine';
+export type { ApprovalLineProps, ApprovalLineItem, ApprovalLineStatus, } from './components/ApprovalLine';
 export { AutoComplete } from './components/AutoComplete';
 export type { AutoCompleteProps, AutoCompleteOption, AutoCompleteSize, } from './components/AutoComplete';
 export { Alert } from './components/Alert';
@@ -20,6 +22,24 @@ export { ChipsNavigation } from './components/ChipsNavigation';
 export type { ChipsNavigationProps, ChipsNavigationItem, } from './components/ChipsNavigation';
 export { Card, CardHeader, CardBody, CardFooter } from './components/Card';
 export type { CardProps } from './components/Card';
+export { Box } from './components/Box';
+export type { BoxProps, BoxSpacing, BoxBackground, BoxRadius } from './components/Box';
+export { Container } from './components/Container';
+export type { ContainerProps, ContainerSize } from './components/Container';
+export { DdayBadge } from './components/DdayBadge';
+export type { DdayBadgeProps, DdayLevel } from './components/DdayBadge';
+export { Divider } from './components/Divider';
+export type { DividerProps, DividerOrientation } from './components/Divider';
+export { Spacer } from './components/Spacer';
+export type { SpacerProps } from './components/Spacer';
+export { Grid } from './components/Grid';
+export type { GridProps, GridGap } from './components/Grid';
+export { PageLayout, PageLayoutHeader, PageLayoutNav, PageLayoutContent, PageLayoutPanel, } from './components/PageLayout';
+export type { PageLayoutProps, PageLayoutSlotProps, PageLayoutNavProps, PageLayoutPanelProps, } from './components/PageLayout';
+export { EmptyState } from './components/EmptyState';
+export type { EmptyStateProps } from './components/EmptyState';
+export { Timeline } from './components/Timeline';
+export type { TimelineProps, TimelineItem, TimelineStatus } from './components/Timeline';
 export { HStack, VStack } from './components/Stack';
 export type { HStackProps, VStackProps, StackGap, StackAlign, StackJustify, } from './components/Stack';
 export { Collapse, CollapseGroup } from './components/Collapse';
@@ -44,6 +64,8 @@ export { ChartTooltip } from './components/ChartTooltip';
 export type { ChartTooltipProps, ChartTooltipDataItem, } from './components/ChartTooltip';
 export { InfoPopover } from './components/InfoPopover';
 export type { InfoPopoverProps, InfoPopoverStep, } from './components/InfoPopover';
+export { Callout } from './components/Callout';
+export type { CalloutProps, CalloutIntent } from './components/Callout';
 export { CalendarPopover } from './components/CalendarPopover';
 export type { CalendarPopoverProps, CalendarPopoverPlacement, CalendarPopoverField, } from './components/CalendarPopover';
 export { Toast, ToastContainer } from './components/Toast';

package/dist/ui-v3/src/styles/sprinkles.css.d.ts

@@ -3,27 +3,27 @@ export declare const sprinkles: ((props: {
         mobile?: "flex" | "grid" | "block" | "inline-flex" | "none" | undefined;
         tablet?: "flex" | "grid" | "block" | "inline-flex" | "none" | undefined;
         desktop?: "flex" | "grid" | "block" | "inline-flex" | "none" | undefined;
-    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3, "flex" | "grid" | "block" | "inline-flex" | "none" | null>;
-    alignItems?: ("stretch" | "center" | {
-        mobile?: "stretch" | "center" | undefined;
-        tablet?: "stretch" | "center" | undefined;
-        desktop?: "stretch" | "center" | undefined;
-    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3, "stretch" | "center" | null>;
-    justifyContent?: ("space-between" | "center" | "flex-start" | {
-        mobile?: "space-between" | "center" | "flex-start" | undefined;
-        tablet?: "space-between" | "center" | "flex-start" | undefined;
-        desktop?: "space-between" | "center" | "flex-start" | undefined;
-    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3, "space-between" | "center" | "flex-start" | null>;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "flex" | "grid" | "block" | "inline-flex" | "none" | null>;
+    alignItems?: ("center" | "stretch" | {
+        mobile?: "center" | "stretch" | undefined;
+        tablet?: "center" | "stretch" | undefined;
+        desktop?: "center" | "stretch" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "center" | "stretch" | null>;
+    justifyContent?: ("center" | "flex-start" | "space-between" | {
+        mobile?: "center" | "flex-start" | "space-between" | undefined;
+        tablet?: "center" | "flex-start" | "space-between" | undefined;
+        desktop?: "center" | "flex-start" | "space-between" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "center" | "flex-start" | "space-between" | null>;
     width?: ("100%" | {
         mobile?: "100%" | undefined;
         tablet?: "100%" | undefined;
         desktop?: "100%" | undefined;
-    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3, "100%" | null>;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "100%" | null>;
     gap?: ("x1" | "x2" | "x3" | "x4" | "x5" | "x6" | {
         mobile?: "x1" | "x2" | "x3" | "x4" | "x5" | "x6" | undefined;
         tablet?: "x1" | "x2" | "x3" | "x4" | "x5" | "x6" | undefined;
         desktop?: "x1" | "x2" | "x3" | "x4" | "x5" | "x6" | undefined;
-    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<1 | 2 | 3, "x1" | "x2" | "x3" | "x4" | "x5" | "x6" | null>;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "x1" | "x2" | "x3" | "x4" | "x5" | "x6" | null>;
 }) => string) & {
     properties: Set<"alignItems" | "display" | "justifyContent" | "width" | "gap">;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lawkit/ui",
-  "version": "0.1.67",
+  "version": "0.1.70",
   "type": "module",
   "description": "LDS Design System — React component library with design tokens",
   "main": "./dist/index.js",