@x-plat/design-system 0.6.0 → 0.7.0

package/dist/layout/Header/index.css

@@ -4,8 +4,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px;
-  border-bottom: 1px solid var(--xplat-neutral-200);
-  background-color: var(--xplat-white);
+  border-bottom: 1px solid var(--semantic-border-primary);
+  background-color: var(--semantic-surface-neutral-primary);
   width: 100%;
   box-sizing: border-box;
   gap: 12px;

package/dist/layout/Layout/index.css

@@ -3,7 +3,7 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background-color: var(--xplat-neutral-50);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-layout > .lib-xplat-layout-content-wrapper {
   display: flex;

package/dist/layout/index.css

@@ -266,6 +266,7 @@
   --semantic-interaction-overlay-25: var(--brand-base-overlay-25);
   --semantic-interaction-overlay-50: var(--brand-base-overlay-50);
   --semantic-interaction-overlay-75: var(--brand-base-overlay-75);
+  --semantic-interaction-overlay-85: var(--brand-base-overlay-85);
   --semantic-interaction-focus-ring: var(--brand-primary-700);
 }
 :root {
@@ -511,11 +512,26 @@
   --semantic-typo-caption-1-sb-lh: var(--typo-lh-caption-1);
   --semantic-typo-caption-1-sb-weight: var(--typo-weight-semibold);
   --semantic-typo-caption-1-sb-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-1-m-font: var(--typo-font-family-default);
+  --semantic-typo-caption-1-m-size: var(--typo-size-caption-1);
+  --semantic-typo-caption-1-m-lh: var(--typo-lh-caption-1);
+  --semantic-typo-caption-1-m-weight: var(--typo-weight-medium);
+  --semantic-typo-caption-1-m-ls: var(--typo-ls-wide);
   --semantic-typo-caption-1-r-font: var(--typo-font-family-default);
   --semantic-typo-caption-1-r-size: var(--typo-size-caption-1);
   --semantic-typo-caption-1-r-lh: var(--typo-lh-caption-1);
   --semantic-typo-caption-1-r-weight: var(--typo-weight-regular);
   --semantic-typo-caption-1-r-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-2-sb-font: var(--typo-font-family-default);
+  --semantic-typo-caption-2-sb-size: var(--typo-size-caption-2);
+  --semantic-typo-caption-2-sb-lh: var(--typo-lh-caption-2);
+  --semantic-typo-caption-2-sb-weight: var(--typo-weight-semibold);
+  --semantic-typo-caption-2-sb-ls: var(--typo-ls-wide);
+  --semantic-typo-caption-2-m-font: var(--typo-font-family-default);
+  --semantic-typo-caption-2-m-size: var(--typo-size-caption-2);
+  --semantic-typo-caption-2-m-lh: var(--typo-lh-caption-2);
+  --semantic-typo-caption-2-m-weight: var(--typo-weight-medium);
+  --semantic-typo-caption-2-m-ls: var(--typo-ls-wide);
   --semantic-typo-caption-2-r-font: var(--typo-font-family-default);
   --semantic-typo-caption-2-r-size: var(--typo-size-caption-2);
   --semantic-typo-caption-2-r-lh: var(--typo-lh-caption-2);
@@ -669,6 +685,13 @@
   font-weight: var(--semantic-typo-caption-1-sb-weight);
   letter-spacing: var(--semantic-typo-caption-1-sb-ls);
 }
+.typo-caption-1-m {
+  font-family: var(--semantic-typo-caption-1-m-font);
+  font-size: var(--semantic-typo-caption-1-m-size);
+  line-height: var(--semantic-typo-caption-1-m-lh);
+  font-weight: var(--semantic-typo-caption-1-m-weight);
+  letter-spacing: var(--semantic-typo-caption-1-m-ls);
+}
 .typo-caption-1-r {
   font-family: var(--semantic-typo-caption-1-r-font);
   font-size: var(--semantic-typo-caption-1-r-size);
@@ -676,6 +699,20 @@
   font-weight: var(--semantic-typo-caption-1-r-weight);
   letter-spacing: var(--semantic-typo-caption-1-r-ls);
 }
+.typo-caption-2-sb {
+  font-family: var(--semantic-typo-caption-2-sb-font);
+  font-size: var(--semantic-typo-caption-2-sb-size);
+  line-height: var(--semantic-typo-caption-2-sb-lh);
+  font-weight: var(--semantic-typo-caption-2-sb-weight);
+  letter-spacing: var(--semantic-typo-caption-2-sb-ls);
+}
+.typo-caption-2-m {
+  font-family: var(--semantic-typo-caption-2-m-font);
+  font-size: var(--semantic-typo-caption-2-m-size);
+  line-height: var(--semantic-typo-caption-2-m-lh);
+  font-weight: var(--semantic-typo-caption-2-m-weight);
+  letter-spacing: var(--semantic-typo-caption-2-m-ls);
+}
 .typo-caption-2-r {
   font-family: var(--semantic-typo-caption-2-r-font);
   font-size: var(--semantic-typo-caption-2-r-size);
@@ -869,6 +906,9 @@
 .semantic-interaction-overlay-75 {
   --ds-color: var(--semantic-interaction-overlay-75);
 }
+.semantic-interaction-overlay-85 {
+  --ds-color: var(--semantic-interaction-overlay-85);
+}
 .semantic-interaction-focus-ring {
   --ds-color: var(--semantic-interaction-focus-ring);
 }
@@ -1332,8 +1372,8 @@
   align-items: center;
   justify-content: space-between;
   padding: 16px;
-  border-bottom: 1px solid var(--xplat-neutral-200);
-  background-color: var(--xplat-white);
+  border-bottom: 1px solid var(--semantic-border-primary);
+  background-color: var(--semantic-surface-neutral-primary);
   width: 100%;
   box-sizing: border-box;
   gap: 12px;
@@ -1354,7 +1394,7 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background-color: var(--xplat-neutral-50);
+  background-color: var(--semantic-surface-neutral-secondary);
 }
 .lib-xplat-layout > .lib-xplat-layout-content-wrapper {
   display: flex;

package/guidelines/components/accordion.md

@@ -3,7 +3,7 @@
 접이식 패널을 표시한다. 단일/다중 모드를 지원하며, controlled/uncontrolled 모두 가능하다.
 
 ```tsx
-import { Accordion } from "@xplat/design-system";
+import { Accordion } from "@x-plat/design-system";
 ```
 
 ## Props

package/guidelines/components/avatar.md

@@ -3,7 +3,7 @@
 프로필 이미지 또는 이니셜을 표시한다. `src`가 있으면 이미지를 렌더하고, 없으면 `name` 기반 이니셜을 표시한다. 둘 다 없으면 기본 사람 아이콘을 표시한다.
 
 ```tsx
-import { Avatar } from "@xplat/design-system";
+import { Avatar } from "@x-plat/design-system";
 ```
 
 ## Props

package/guidelines/components/card.md

@@ -3,7 +3,7 @@
 콘텐츠를 카드 형태로 감싸는 컨테이너이다.
 
 ```tsx
-import { Card } from "@xplat/design-system";
+import { Card } from "@x-plat/design-system";
 ```
 
 ## Props

package/guidelines/components/chart.md

@@ -3,7 +3,7 @@
 SVG 기반 차트를 렌더한다. line, bar, pie, doughnut 4가지 타입을 지원한다.
 
 ```tsx
-import { Chart } from "@xplat/design-system";
+import { Chart } from "@x-plat/design-system";
 ```
 
 ## Props

package/guidelines/components/data-display.md

@@ -5,7 +5,7 @@
 구분선을 표시한다.
 
 ```tsx
-import { Divider } from "@xplat/design-system";
+import { Divider } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |
@@ -24,7 +24,7 @@ import { Divider } from "@xplat/design-system";
 빈 상태 안내를 표시한다.
 
 ```tsx
-import { EmptyState } from "@xplat/design-system";
+import { EmptyState } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |
@@ -49,7 +49,7 @@ import { EmptyState } from "@xplat/design-system";
 로딩 플레이스홀더를 표시한다.
 
 ```tsx
-import { Skeleton } from "@xplat/design-system";
+import { Skeleton } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |
@@ -71,7 +71,7 @@ import { Skeleton } from "@xplat/design-system";
 로딩 인디케이터를 표시한다.
 
 ```tsx
-import { Spinner } from "@xplat/design-system";
+import { Spinner } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |

package/guidelines/components/dropdown.md

@@ -3,7 +3,7 @@
 액션 메뉴를 표시한다. `children`이 트리거 역할을 하며, 클릭 시 메뉴가 열린다.
 
 ```tsx
-import { Dropdown } from "@xplat/design-system";
+import { Dropdown } from "@x-plat/design-system";
 ```
 
 ## Props

package/guidelines/components/file-media.md

@@ -5,7 +5,7 @@
 파일 업로드 영역을 표시한다. 드래그 앤 드롭과 클릭 업로드를 모두 지원한다.
 
 ```tsx
-import { FileUpload } from "@xplat/design-system";
+import { FileUpload } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |
@@ -34,7 +34,7 @@ import { FileUpload } from "@xplat/design-system";
 단일 이미지를 선택/미리보기하는 컨트롤이다. controlled 방식으로 동작한다.
 
 ```tsx
-import { ImageSelector } from "@xplat/design-system";
+import { ImageSelector } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |
@@ -56,7 +56,7 @@ const [image, setImage] = useState<File | undefined>();
 비디오 플레이어를 표시한다. `controls={false}`이면 커스텀 재생/일시정지 오버레이를 표시한다. `ref`를 지원한다.
 
 ```tsx
-import { Video } from "@xplat/design-system";
+import { Video } from "@x-plat/design-system";
 ```
 
 | Prop | 타입 | 기본값 | 설명 |

package/guidelines/components/html-typewriter.md

@@ -3,7 +3,7 @@
 HTML 문자열을 한 글자씩 타이핑하는 효과를 표시한다. HTML 태그 구조를 유지하면서 텍스트만 순차적으로 렌더한다.
 
 ```tsx
-import { HtmlTypeWriter } from "@xplat/design-system";
+import { HtmlTypeWriter } from "@x-plat/design-system";
 ```
 
 ## Props

package/guidelines/components/navigation.md

@@ -1,46 +1,120 @@
 # 내비게이션: Tab / CardTab / Breadcrumb / Pagination / Steps
 
+> 각 컴포넌트는 **배리언트가 여러 개다.** 첫 번째 예시만 보고 고르지 말고,
+> 아래 "배리언트" 표를 먼저 확인한 뒤 화면 맥락에 맞는 값을 고를 것.
+
+---
+
 ## Tab
 
-인덱스 기반 탭이다. 탭 영역만 제공한다.
+인덱스 기반 탭이다. 탭 영역만 렌더링하고 패널 콘텐츠는 직접 관리한다.
+
+**children 을 받지 않는다. `tabs` 배열로 전달한다.**
 
 ```tsx
-<Tab activeIndex={activeIndex} onChange={setActiveIndex} type="default">
-  <Tab.Item>탭1</Tab.Item>
-  <Tab.Item>탭2</Tab.Item>
-</Tab>
+const [activeIndex, setActiveIndex] = useState(0);
+
+<Tab
+  type="default"
+  activeIndex={activeIndex}
+  tabs={[
+    { value: "all", title: "전체" },
+    { value: "active", title: "진행중" },
+  ]}
+  onChange={(tab, idx) => setActiveIndex(idx)}
+/>
 ```
 
-| Prop | 설명 |
-|------|------|
-| activeIndex | 활성 탭 인덱스 (controlled) |
-| type | `"default" \| "toggle"` |
+<!-- props:Tab -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| activeIndex * | `number` | - |  |
+| tabs * | `{ value: string \| number; title: string }[]` | - |  |
+| onChange * | `(value: { value: string \| number; title: string }, index: number) => void` | - |  |
+| type * | `"default" \| "toggle"` | - |  |
+| size | `"sm" \| "md" \| "lg"` | `"md"` |  |
+
+`*` = 필수
+<!-- /props:Tab -->
+
+### 배리언트 — type (필수, 기본값 없음)
+
+| 값 | 생김새 | 쓰는 곳 |
+|----|--------|---------|
+| `default` | 밑줄 없는 평면 탭 | 페이지 상단 주 내비게이션 |
+| `toggle` | 활성 탭 아래로 인디케이터가 슬라이드 | 콘텐츠 전환 토글, 세그먼트 컨트롤 |
+
+```tsx
+// toggle — 인디케이터가 따라 움직인다
+<Tab
+  type="toggle"
+  activeIndex={activeIndex}
+  tabs={[{ value: 1, title: "목록" }, { value: 2, title: "지도" }]}
+  onChange={(tab, idx) => setActiveIndex(idx)}
+/>
+```
+
+- `onChange` 에 `setActiveIndex` 를 **그대로 넘기면 안 된다.** 첫 인자가 탭 객체라 상태가 깨진다.
+  반드시 `(tab, idx) => setActiveIndex(idx)` 형태로 감쌀 것.
 
 ---
 
 ## CardTab
 
-값 기반 탭이다. **CardTab.Panel만 children으로 허용한다.**
+값 기반 탭이다. 탭 + 패널 콘텐츠를 함께 제공한다. **`CardTab.Panel` 만 children 으로 허용한다.**
 
 ```tsx
-<CardTab tabs={[{ value: "tab1", title: "탭1" }, { value: "tab2", title: "탭2" }]}>
+<CardTab
+  size="md"
+  tabs={[{ value: "tab1", title: "탭1" }, { value: "tab2", title: "탭2" }]}
+  onChange={(tab) => console.log(tab.value)}
+>
   <CardTab.Panel value="tab1">탭1 내용</CardTab.Panel>
   <CardTab.Panel value="tab2">탭2 내용</CardTab.Panel>
 </CardTab>
 ```
 
+<!-- props:CardTab -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| tabs * | `{ value: string \| number; title: string }[]` | - |  |
+| children * | `ReactElement< CardTabPanelProps, typeof CardTabPanel > \| ReactElement< CardTabPanelProps, typeof CardTabPanel >[]` | - | CardTab.Panel 만 허용 |
+| activeValue | `string \| number` | - | controlled: 외부에서 활성 탭 제어 |
+| onChange | `(tab: { value: string \| number; title: string }) => void` | - | 탭 변경 콜백 |
+| size | `"sm" \| "md" \| "lg"` | `"md"` |  |
+
+`*` = 필수
+<!-- /props:CardTab -->
+
+- `activeValue` 를 **생략하면 컴포넌트가 스스로 상태를 관리한다.** 단순 탭 전환이면 생략하는 쪽이 낫다.
+
 ---
 
 ## Breadcrumb
 
-경로를 표시한다.
+경로를 표시한다. 마지막 항목은 자동으로 현재 위치로 렌더링된다 (`href` 를 줘도 링크가 아니다).
 
 ```tsx
-<Breadcrumb items={[
-  { label: "홈", href: "/" },
-  { label: "설정", href: "/settings" },
-  { label: "프로필" },
-]} />
+<Breadcrumb
+  items={[
+    { label: "홈", href: "/" },
+    { label: "설정", href: "/settings" },
+    { label: "프로필" },
+  ]}
+/>
+```
+
+<!-- props:Breadcrumb -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| items * | `{ label: string; href?: string; onClick?: () => void }[]` | - |  |
+| separator | `ReactNode` | `"/"` |  |
+
+`*` = 필수
+<!-- /props:Breadcrumb -->
+
+```tsx
+<Breadcrumb separator={<ChevronRightIcon />} items={...} />
 ```
 
 ---
@@ -53,6 +127,28 @@
 <Pagination current={page} total={100} onChange={setPage} />
 ```
 
+<!-- props:Pagination -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| current * | `number` | - |  |
+| total * | `number` | - |  |
+| pageSize | `number` | `10` |  |
+| siblingCount | `number` | `1` |  |
+| onChange | `(page: number) => void` | - |  |
+| size | `"sm" \| "md" \| "lg"` | `"md"` |  |
+| type | `"brand" \| "success" \| "error" \| "warning" \| "info"` | `"brand"` |  |
+
+`*` = 필수
+<!-- /props:Pagination -->
+
+### 배리언트 — type (5종)
+
+`brand` 가 기본이다. 나머지는 페이지네이션이 상태를 가진 목록(오류 목록, 경고 목록 등)에 붙을 때 그 맥락 색을 따라간다.
+
+```tsx
+<Pagination current={page} total={240} pageSize={20} type="error" size="sm" onChange={setPage} />
+```
+
 ---
 
 ## Steps
@@ -62,7 +158,7 @@
 ```tsx
 <Steps
   items={[
-    { title: "정보 입력" },
+    { title: "정보 입력", description: "기본 정보를 입력한다" },
     { title: "확인" },
     { title: "완료" },
   ]}
@@ -70,11 +166,39 @@
 />
 ```
 
+<!-- props:Steps -->
+| Prop | 타입 | 기본값 | 설명 |
+|------|------|--------|------|
+| items * | `{ title: string; description?: string }[]` | - |  |
+| current * | `number` | - |  |
+| type | `"brand" \| "success" \| "error" \| "warning" \| "info"` | `"brand"` |  |
+
+`*` = 필수
+<!-- /props:Steps -->
+
+### 배리언트 — type (5종)
+
+| 값 | 쓰는 곳 |
+|----|---------|
+| `brand` | 일반 진행 플로우 (기본) |
+| `success` | 완료된 프로세스 회고 표시 |
+| `error` | 실패 지점이 있는 플로우 |
+| `warning` | 주의가 필요한 단계가 포함된 플로우 |
+| `info` | 안내성 플로우 |
+
+- `current` 보다 앞 = 완료, 같으면 = 진행 중, 뒤 = 대기. 상태를 직접 넘기지 않는다.
+
 ---
 
 ## 의사결정
 
 | 상황 | 사용할 것 |
 |------|----------|
-| 탭 영역만 (콘텐츠는 직접 관리) | Tab |
-| 탭 + 패널 콘텐츠 | CardTab |
+| 탭 영역만 (콘텐츠는 직접 관리) | `Tab` |
+| 탭 + 패널 콘텐츠 | `CardTab` |
+| 탭 상태를 외부에서 제어해야 함 | `Tab` (controlled 전용) 또는 `CardTab` + `activeValue` |
+| 탭 상태를 신경쓰고 싶지 않음 | `CardTab` (`activeValue` 생략) |
+| 세그먼트 컨트롤 느낌 | `Tab` + `type="toggle"` |
+| 현재 위치 경로 | `Breadcrumb` |
+| 페이지 이동 | `Pagination` |
+| 순차 진행 단계 | `Steps` |

package/guidelines/components/swiper.md

@@ -3,8 +3,8 @@
 슬라이더/캐러셀을 표시한다. 드래그, 자동 재생, 루프를 지원하며 controlled/uncontrolled 모두 가능하다.
 
 ```tsx
-import { Swiper } from "@xplat/design-system";
-import type { SwiperHandle } from "@xplat/design-system";
+import { Swiper } from "@x-plat/design-system";
+import type { SwiperHandle } from "@x-plat/design-system";
 ```
 
 ## Props

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",