@lawkit/ui 0.1.67 → 0.1.70

package/CLAUDE.md

@@ -41,6 +41,31 @@ import { Alert } from "@lds/ui-v3";
 </Alert>
 ```
 
+## ApprovalLine
+
+```tsx
+import { ApprovalLine } from "@lds/ui-v3";
+
+// 기본 — 수평 결재선
+<ApprovalLine
+  items={[
+    { id: "1", order: 1, name: "박기안", role: "대리", department: "영업팀", status: "approved", date: "9. 8. 14:02" },
+    { id: "2", order: 2, name: "이검토", role: "과장", department: "법무팀", status: "approved", date: "9. 9. 10:31" },
+    { id: "3", order: 3, name: "최법무", role: "팀장", department: "법무팀", status: "current" },
+    { id: "4", order: 4, name: "정대표", role: "대표이사", status: "pending" },
+  ]}
+/>
+
+// 수직 + 코멘트
+<ApprovalLine
+  direction="vertical"
+  items={[
+    { id: "1", name: "박기안", status: "approved" },
+    { id: "2", name: "최법무", status: "rejected", comment: "계약 기간 조항 수정 후 재상신 바랍니다." },
+  ]}
+/>
+```
+
 ## AutoComplete
 
 ```tsx
@@ -104,6 +129,27 @@ import { Badge } from "@lds/ui-v3";
 <Badge iconOnly leadingIcon={<MyIcon />} aria-label="알림" />
 ```
 
+## Box
+
+```tsx
+import { Box } from "@lds/ui-v3";
+
+// 카드형 영역 — 패딩/배경/라운드/테두리를 토큰으로
+<Box p="x4" bg="canvas" radius="md" border>
+  콘텐츠
+</Box>
+
+// 축별 패딩
+<Box px="x5" py="x3" bg="subtle" radius="lg">
+  좌우 20px / 상하 12px
+</Box>
+
+// 페이지 배경 섹션
+<Box p="x6" bg="page">
+  섹션 콘텐츠
+</Box>
+```
+
 ## Breadcrumb
 
 ```tsx
@@ -243,6 +289,27 @@ import { CalendarPopover } from "@lds/ui-v3";
 </CalendarPopover>
 ```
 
+## Callout
+
+```tsx
+import { Callout } from "@lds/ui-v3";
+
+// 기본 (info)
+<Callout>
+  이 계약에는 <b>자동 갱신 조항</b>이 포함되어 있어요. 해지 의사는 만료 30일 전까지 통지해야 해요.
+</Callout>
+
+// 제목 + 경고
+<Callout intent="warning" title="기한 임박">
+  답변서 제출 기한이 5일 남았어요.
+</Callout>
+
+// 아이콘 없이
+<Callout hideIcon intent="danger">
+  반려된 결재는 수정 후 재상신해야 해요.
+</Callout>
+```
+
 ## Card
 
 ```tsx
@@ -415,6 +482,23 @@ const [open, setOpen] = useState(false);
 </CollapseGroup>
 ```
 
+## Container
+
+```tsx
+import { Container } from "@lds/ui-v3";
+
+// 페이지 본문 폭 제한 (기본 lg=1280px)
+<Container size="lg">
+  <h1>사건 목록</h1>
+  {/* 본문 */}
+</Container>
+
+// 읽기용 좁은 폭
+<Container size="sm">
+  <article>약관 본문</article>
+</Container>
+```
+
 ## DataTable
 
 ```tsx
@@ -496,6 +580,40 @@ function MyPage() {
 }
 ```
 
+## DdayBadge
+
+```tsx
+import { DdayBadge } from "@lds/ui-v3";
+
+// 목표 날짜만 넘기면 임박도별 색 자동
+<DdayBadge date="2026-09-15" />
+
+// 기일 리스트에서
+<HStack gap="x3" align="center">
+  <span>1차 변론기일 · 9. 15.(화) 10:00</span>
+  <Spacer />
+  <DdayBadge date="2026-09-15" />
+</HStack>
+```
+
+## Divider
+
+```tsx
+import { Divider } from "@lds/ui-v3";
+
+// 섹션 구분
+<section>위 콘텐츠</section>
+<Divider />
+<section>아래 콘텐츠</section>
+
+// 수직 구분 (flex 부모 안)
+<HStack gap="x3" align="center">
+  <span>진행 중 24</span>
+  <Divider orientation="vertical" />
+  <span>종결 96</span>
+</HStack>
+```
+
 ## Drawer
 
 ```tsx
@@ -578,6 +696,23 @@ const [value, setValue] = useState("1y");
 <Dropdown options={options} value={value} onChange={setValue} />
 ```
 
+## EmptyState
+
+```tsx
+import { EmptyState, Button } from "@lds/ui-v3";
+
+// 기본 — 목록/테이블의 빈 상태
+<EmptyState
+  icon={<FolderIcon />}
+  title="조회된 사건이 없어요"
+  description="필터를 조정하거나 새 사건을 등록하세요."
+  action={<Button>+ 사건 등록</Button>}
+/>
+
+// 제목만 (검색 결과 없음 등)
+<EmptyState title="검색 결과가 없어요" description="다른 키워드로 검색해 보세요." />
+```
+
 ## FileUpload
 
 ```tsx
@@ -700,6 +835,27 @@ function MyPage() {
 }
 ```
 
+## Grid
+
+```tsx
+import { Grid } from "@lds/ui-v3";
+
+// 통계 카드 3열
+<Grid columns={3} gap="x3">
+  <Card>진행 중 사건 24</Card>
+  <Card>이번 주 기일 6</Card>
+  <Card>답변 기한 임박 3</Card>
+</Grid>
+
+// 폼 2단 배치 (행/열 간격 다르게)
+<Grid columns={2} rowGap="x4" columnGap="x6">
+  <Input label="사건번호" />
+  <Input label="사건명" />
+  <Input label="재판부" />
+  <Input label="담당 변호사" />
+</Grid>
+```
+
 ## IconButtonGroup
 
 ```tsx
@@ -935,6 +1091,31 @@ const [count, setCount] = useState(50);
 <NumberInput value={50} disabled />
 ```
 
+## PageLayout
+
+```tsx
+import { PageLayout } from "@lds/ui-v3";
+
+// 기본 — Header + Nav + Content
+<PageLayout>
+  <PageLayout.Header>{/* GNB: 로고·전역 메뉴·프로필 */}</PageLayout.Header>
+  <PageLayout.Nav>{/* LNB: 메뉴 트리 */}</PageLayout.Nav>
+  <PageLayout.Content>
+    <Container size="lg">{/* 페이지 본문 */}</Container>
+  </PageLayout.Content>
+</PageLayout>
+
+// 보조 패널 + LNB 접힘 (상태는 앱이 관리)
+const [collapsed, setCollapsed] = useState(false);
+
+<PageLayout>
+  <PageLayout.Header>{/* GNB */}</PageLayout.Header>
+  <PageLayout.Nav collapsed={collapsed}>{/* LNB */}</PageLayout.Nav>
+  <PageLayout.Content>{/* 본문 */}</PageLayout.Content>
+  <PageLayout.Panel width={360}>{/* 사건 상세 미리보기 */}</PageLayout.Panel>
+</PageLayout>
+```
+
 ## Pagination
 
 ```tsx
@@ -1094,6 +1275,19 @@ const [range, setRange] = useState<[number, number]>([25, 75]);
 <Slider value={50} disabled showTicks showLabels />
 ```
 
+## Spacer
+
+```tsx
+import { HStack, Spacer, Button } from "@lds/ui-v3";
+
+// 제목 왼쪽, 버튼 오른쪽 끝
+<HStack gap="x3" align="center">
+  <h2>사건 목록</h2>
+  <Spacer />
+  <Button>+ 사건 등록</Button>
+</HStack>
+```
+
 ## Spinner
 
 ```tsx
@@ -1332,6 +1526,25 @@ import { Textarea, InputGroup } from "@lds/ui-v3";
 </InputGroup>
 ```
 
+## Timeline
+
+```tsx
+import { Timeline } from "@lds/ui-v3";
+
+<Timeline
+  items={[
+    { id: "1", date: "2026. 6. 12.", title: "소장 접수", status: "done" },
+    { id: "2", date: "2026. 7. 30.", title: "답변서 제출", description: "피고 대리인 김앤장", status: "done" },
+    { id: "3", date: "2026. 9. 15.", title: "1차 변론기일", status: "current" },
+    { id: "4", title: "2차 변론기일", status: "upcoming" },
+  ]}
+/>
+
+// 제목에 커스텀 노드 (DdayBadge 조합)
+{ id: "3", date: "2026. 9. 15.", status: "current",
+  title: <>1차 변론기일 <DdayBadge date="2026-09-15" /></> }
+```
+
 ## Toast
 
 ```tsx