@weing-dev/ui-kit-primitive 0.5.1 → 0.5.2

package/docs/ui-kit-agent-guide.md

@@ -53,6 +53,7 @@
 | 스크롤 위치로 현재 섹션 추적 | `ScrollSpy.useScrollSpy` | `/navigation` |
 | 모달(딤드) | `Modal` (앱에선 `useModal` 경유) | `/feedback` |
 | 팝업(트리거 옆 레이어) | `Popup` + `usePopup` | `/feedback` |
+| 위치계산 팝오버(flip/shift·portal) | `FloatingAnchor` | `/feedback` |
 | 바텀/사이드 시트 | `Sheet` | `/feedback` |
 | 상태/카테고리 라벨 | `Label` | `/display` |
 | 필터/태그 칩 | `Chips` | `/display` |
@@ -62,6 +63,8 @@
 | 구분선 | `Divider` | `/display` |
 | 지연 로딩 이미지 | `LazyImage` | `/display` |
 | QR / 바코드 | `QRCode` / `BarCode` | `/display` |
+| 칸반 / 드래그 보드 | `KanbanBoard` | `/display` |
+| 하루 시간대 타임라인 | `Timeline` | `/display` |
 | 데이터 표 | `Table` (+ `@tanstack/react-table`) | `/table` |
 | 막대/선/원/도넛 차트 | `BarChart` `LineChart` `PieChart` `DoughnutChart` | `/chart` |
 | 날짜 선택(월/주) | `Calendar` | `/calendar` |
@@ -107,7 +110,15 @@ import "@weing-dev/ui-kit-primitive/video-player/style.css";
 
 #### Button — `Root / Text / Icon`
 - `variant: "contained" | "outlined" | "soft" | "text"`, `colorType: "primary" | "inherit" | "red"`, `shapeType: "square" | "round"`, `size: "small" | "medium" | "large"`
-- `isLoading`, `loadingText`, `disabled`, `isFitted`, `radius`(기본 8), `rounded`, `circle`, 표준 `button` 속성
+- `isLoading`, `loadingText`, `disabled`, `isFitted`, `radius`(기본 8), `rounded`, `circle`, `textColor`, 표준 `button` 속성
+- **앱 전용 색/형태는 `!important` 없이 override** — `Root`가 CSS변수를 노출하고 `style`은 후순위 머지된다. bg=`--default-color`, 보더=`--border-color`, 텍스트·아이콘=`--btn-text-color`(또는 `textColor` prop), radius=`radius` prop 또는 `--radius`. `Button.Text`/`Button.Icon`은 `--btn-text-color`를 상속하므로 자손 `& *{color}` 강제 불필요.
+```tsx
+// soft 임의 톤 / 다크 솔리드 — 토큰 밖 색도 한 줄로
+<Button.Root variant="soft" radius={30}
+  style={{ "--default-color": "#D6E8E9", "--btn-text-color": "#13949C" }}>
+  <Button.Text>조회</Button.Text>
+</Button.Root>
+```
 ```tsx
 <Button.Root variant="contained" colorType="primary" size="medium" onClick={onClick}>
   <Button.Text>확인</Button.Text>
@@ -141,7 +152,7 @@ import "@weing-dev/ui-kit-primitive/video-player/style.css";
 
 #### Dropdown — `Root / Trigger / Menu / Item`
 - Root: `value: string | string[]`(배열=다중), `onChange`, `searchable`, `error`, `accentType: "in" | "out" | "all"`
-- Trigger: `variant: "outlined" | "contained" | "text"`, `size`, `leftIcon`, `rightIcon`
+- Trigger: `variant: "outlined" | "contained" | "text"`, `size`, `leftIcon`, `rightIcon`, `accentColor`(도메인 강조 보더 — inactive/selected/focused 보더를 이 색으로 통일, error/disabled는 우선 유지)
 - Menu: `variant: "shadow" | "line"`
 ```tsx
 <Dropdown.Root value={value} onChange={setValue} placeholder="선택">
@@ -297,7 +308,8 @@ const { columns } = Cascader.useCascader({ options });
 ```
 
 #### Pagination — `Root / PageList / PageItem / Prev / Next`
-- Root: `total`(필수), `pageCount`(필수, 노출 버튼 수), `onClick({offset, limit})`(필수), `colorType: "primary" | "standard"`, `variant: "text" | "soft"`, `size: "medium" | "small"`, `limit`(기본 15), `offset`
+- Root: `total`(필수), `pageCount`(필수, 노출 버튼 수), `onClick({offset, limit})`(필수), `colorType: "primary" | "standard"`, `variant: "text" | "soft"`, `size: "medium" | "small"`, `limit`(기본 15), `offset`, `style`
+- **형태 override** — `Root` `style`로 CSS변수를 주면 하위 버튼에 상속된다: `--pagination-gap`(번호 간격), `--pagination-item-size`(버튼 치수), `--pagination-radius`(번호 radius). `Prev`/`Next`는 `data-nav="prev|next"`로 식별(소비처에서 `[data-nav]`로 nav만 타깃). 예: `<Pagination.Root style={{ "--pagination-gap":"2px", "--pagination-item-size":"36px" }}>`
 ```tsx
 <Pagination.Root total={120} pageCount={5} limit={15} offset={offset}
   colorType="primary" variant="soft" size="medium"
@@ -374,6 +386,16 @@ const popup = Popup.usePopup();
 </Sheet.Root>
 ```
 
+#### FloatingAnchor — `Root / Trigger / Content`
+- 트리거 기준으로 Content를 **자동 위치계산**해 portal로 띄움. Popup과 달리 `flip`(반대편 전환)·`shift`(뷰포트 안으로 보정)·`placement` 12종 내장. 스크롤/리사이즈 추적.
+- Root: `placement`, `offset`, `flip`, `shift`, `open`/`defaultOpen`/`onOpenChange`(제어/비제어), `closeOnOutsideClick`, `closeOnEscape`. Trigger children은 **render-prop**.
+```tsx
+<FloatingAnchor.Root placement="bottom-start" flip shift>
+  <FloatingAnchor.Trigger>{(p) => <button {...p}>열기</button>}</FloatingAnchor.Trigger>
+  <FloatingAnchor.Content>레이어 내용</FloatingAnchor.Content>
+</FloatingAnchor.Root>
+```
+
 ### 4.4 Display (`/display`)
 
 #### Label — 단일
@@ -423,6 +445,26 @@ const popup = Popup.usePopup();
 <BarCode value="1234567" type="EAN8" />             // type: "EAN13"(12자리) | "EAN8"(7자리), ref.copy()/download()
 ```
 
+#### KanbanBoard — 단일(제네릭 `<T>`)
+- 컬럼 기반 드래그&드롭 보드(`@dnd-kit`). `setItemColumn`+`onItemsChange`를 **둘 다** 주면 DnD 활성, 없으면 정적 렌더. 카드/헤더는 render-prop으로 호출부가 결정.
+- `columns`, `items`, `getItemId`, `getColumnId`, `renderCard(item, isSelected)`, `renderColumnHeader?`, `selectedId`/`onSelect`, `emptyText`
+```tsx
+<KanbanBoard
+  columns={cols} items={deals}
+  getItemId={(d) => d.id} getColumnId={(d) => d.stage}
+  renderCard={(d) => <DealCard deal={d} />}
+  setItemColumn={(d, stage) => ({ ...d, stage })}
+  onItemsChange={setDeals}
+/>
+```
+
+#### Timeline — 단일
+- 하루(시간대) 세로 타임라인. 겹치는 이벤트는 자동 가로 컬럼 분할, 자정 넘는 이벤트는 두 조각으로 분리.
+- `events: { id?, startHour:"HH:mm", endHour?, label, color? }[]`, `date`, `startHour`(기본 0)/`endHour`(기본 24). `color`는 토큰(`"blue"|"pink"|"green"|"orange"`) 또는 `{background,border}`
+```tsx
+<Timeline date="2026-06-26" events={[{ startHour: "09:00", endHour: "10:30", label: "회의", color: "blue" }]} />
+```
+
 ### 4.5 Data / Heavy
 
 #### Table — `Root / Header / HeaderCell / Body / Row / Cell` (+ `useRowResize`) · `/table`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@weing-dev/ui-kit-primitive",
   "private": false,
-  "version": "0.5.1",
+  "version": "0.5.2",
   "type": "module",
   "sideEffects": [
     "**/*.css"