@nurihaus/web-design-system 3.8.0 → 3.9.0

package/README.md

@@ -148,7 +148,7 @@ export default function App({ children }) {
 <CTAButton text='리포트 받기' track='report/download' trackProps={{ format: 'csv' }} />
 ```
 
-`track` 을 받는 컴포넌트는 CTAButton · DataTable · Tag · MessageComposer(`click`), Modal · Drawer · MediaViewer(`open` · `close`), MediaThumbnail(`open`), Tabs · DropDown · ChipGroup · Radio · Checkbox · Switch · Pagination · TextField · TextArea(`change`), BottomNav · Breadcrumb · CollapsibleMenu(`navigate`), ListRow(링크 `navigate` · 버튼 `click`), Toast · Tooltip(`show`) 다. `value` 에는 탭 id · 칩 id · 옵션 value 처럼 개발자가 정한 id 만 들어간다. TextField · TextArea 는 포커스가 빠질 때 값이 바뀌었으면 값 없이 `change` 를 한 번 보낸다. `LogProvider` 가 없거나 `track` 을 주지 않으면 아무것도 보내지 않는다.
+`track` 을 받는 컴포넌트는 CTAButton · IconButton · DataTable · Tag · MessageComposer(`click`), Modal · Drawer · MediaViewer(`open` · `close`), MediaThumbnail(`open`), Tabs · DropDown · ChipGroup · Radio · Checkbox · Switch · Pagination · TextField · TextArea(`change`), BottomNav · Breadcrumb · CollapsibleMenu(`navigate`), ListRow(링크 `navigate` · 버튼 `click`), Toast · Tooltip(`show`) 다. `value` 에는 탭 id · 칩 id · 옵션 value 처럼 개발자가 정한 id 만 들어간다. TextField · TextArea 는 포커스가 빠질 때 값이 바뀌었으면 값 없이 `change` 를 한 번 보낸다. `LogProvider` 가 없거나 `track` 을 주지 않으면 아무것도 보내지 않는다.
 
 컴포넌트 밖의 로그는 `useLog` 로 남긴다.
 

package/dist/ai/components.md

@@ -22,7 +22,7 @@ import '@nurihaus/web-design-system/components.css';
 
 **size 는 전역 이름이다.** `xs · s · m · l · xl` 다섯 개뿐이고, 컴포넌트는 그중 지원하는 것만 받는다(props 표 참고). 같은 글자는 한 줄에 나란히 놓이는 컨트롤(CTAButton · DropDown · TextField)에서 같은 높이다. px 는 `tokens.md` 의 `--control-height-*` 같은 변수에 있고, 컴포넌트에 숫자로 높이를 주지 않는다.
 
-**색은 variant 가 정한다.** CTAButton · OptionBadge · IconTextBadge · IconTextOptionBadge 는 `variant` 로 글자·배경·테두리 색이 묶여서 정해진다. 색 prop 은 없다. 색을 받는 컴포넌트는 Text(`color`, 토큰 이름만) 하나다. Spinner · InlineLoading · OverlayLoading 은 CSS `color` 를 따라가므로 `className` 이나 `style` 의 `color` 로 바꾼다.
+**색은 variant 가 정한다.** CTAButton · IconButton · OptionBadge · IconTextBadge · IconTextOptionBadge 는 `variant` 로 글자·배경·테두리 색이 묶여서 정해진다. 색 prop 은 없다. 색을 받는 컴포넌트는 Text(`color`, 토큰 이름만) 하나다. Spinner · InlineLoading · OverlayLoading 은 CSS `color` 를 따라가므로 `className` 이나 `style` 의 `color` 로 바꾼다.
 
 **커스텀은 `className` 과 `style` 로 한다.** 모든 컴포넌트가 둘을 받아 루트 요소에 붙인다(TextField 는 입력 상자, DataTable 은 `<table>`). variant 가 정한 색을 className 으로 덮으려면 `.cta-button.variant-primary` 보다 구체적인 선택자가 필요하다. 색·간격·글자 값은 `tokens.md` 의 변수만 쓴다.
 
@@ -34,7 +34,7 @@ import '@nurihaus/web-design-system/components.css';
 
 | 컴포넌트 | 보내는 때 | action | value |
 | --- | --- | --- | --- |
-| CTAButton | 누를 때 | `click` | 없음 |
+| CTAButton · IconButton | 누를 때 | `click` | 없음 |
 | DataTable | `onClickRow` 가 있는 헤더 칸을 누를 때 | `click` | 그 칸의 `id` |
 | Modal · Drawer | 열고 닫을 때 | `open` · `close` | 없음 |
 | Tabs · DropDown · ChipGroup · Radio | 고를 때 | `change` | 탭 id · 옵션 value · 칩 id · 선택지 id |
@@ -61,6 +61,7 @@ Avatar · OptionBadge · IconTextBadge · IconTextOptionBadge · Skeleton · Tex
 
 - [Avatar](#avatar)
 - [CTAButton](#ctabutton)
+- [IconButton](#iconbutton)
 - [Callout](#callout)
 - [OptionBadge](#optionbadge)
 - [IconTextBadge](#icontextbadge)
@@ -186,6 +187,43 @@ import { CTAButton } from '@nurihaus/web-design-system';             // 루트.
 
 이 밖에 React·HTML 기본 속성 275개를 받는다.
 
+## IconButton
+
+```ts
+import { IconButton } from '@nurihaus/web-design-system/icon-button';   // 이 컴포넌트만 싣는다 (권장)
+import { IconButton } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
+```
+
+**언제 쓴다.** 글자 없이 아이콘 하나로 뜻이 통하는 버튼에 쓴다(뒤로, 알림, 첨부, 떠 있는 추가 버튼). `icon` 은 Icon 이름, `label` 은 버튼의 이름(aria-label)이라 꼭 준다. `variant` 는 `ghost`(기본, 바탕 없이 회색 아이콘, 누르는 동안 회색 원)·`secondary`(연보라)·`primary`(진보라). `size` 는 `s`(36)·`m`(44, 기본)·`l`(56)이고 보이는 크기가 작아도 누르는 자리는 44 이상이다. 다른 화면으로 옮겨 가는 버튼은 `asChild` 를 주고 링크 요소 하나를 children 으로 준다 — 그 링크가 버튼 모양이 되고 아이콘은 링크 안에 들어간다. 떠 있는 버튼의 자리·그림자는 쓰는 쪽이 `className` 으로 준다(`--shadow-floating`). `className`·`style` 은 버튼(또는 링크)에 붙는다.
+
+**쓰지 않는다.** 글자가 있는 버튼은 CTAButton 을 쓴다. 칩의 지우기는 Tag 의 `onRemove`, 대화 보내기는 MessageComposer 를 쓴다.
+
+```tsx
+<>
+  <IconButton icon="caret-left" label="뒤로" onClick={() => {}} />
+  <IconButton asChild icon="plus" label="새로 만들기" variant="primary" size="l">
+    <a href="/new" />
+  </IconButton>
+</>
+```
+
+**모션.** press. 토큰 값과 규칙은 `motion.md`.
+
+### props
+
+| prop | 타입 | 필수 | 기본값 |
+| --- | --- | --- | --- |
+| `asChild` | `boolean` |  |  |
+| `size` | `'s' \| 'm' \| 'l'` |  | `defaultSize` |
+| `label` | `string` | 예 |  |
+| `track` | `string` |  |  |
+| `children` | `ReactNode` |  |  |
+| `variant` | `'primary' \| 'secondary' \| 'ghost'` |  | `'ghost'` |
+| `trackProps` | `Record<string, string \| number \| boolean>` |  |  |
+| `icon` | `'link' \| 'circle' \| 'image' \| 'warning' \| 'x' \| 'house' \| 'megaphone-simple' \| 'chats-circle' \| 'user-circle' \| 'bell' \| 'caret-left' \| 'magnifying-glass' \| 'dots-three' \| 'gear-six' \| 'chat-circle' \| 'paper-plane-tilt' \| 'plus' \| 'camera' \| 'video-camera' \| 'play' \| 'upload-simple' \| 'calendar-blank' \| 'clock' \| 'map-pin' \| 'truck' \| 'ticket' \| 'qr-code' \| 'sparkle' \| 'gift' \| 'wallet' \| 'bank' \| 'credit-card' \| 'check-circle' \| 'check' \| 'info' \| 'question' \| 'lock' \| 'pencil-simple' \| 'trash' \| 'copy' \| 'share-network' \| 'eye' \| 'sliders-horizontal' \| 'heart' \| 'star' \| 'globe' \| 'sign-out' \| 'caret-right' \| 'arrow-right' \| 'instagram-logo' \| 'tiktok-logo' \| 'youtube-logo'` | 예 |  |
+
+이 밖에 React·HTML 기본 속성 275개를 받는다.
+
 ## Callout
 
 ```ts
@@ -1569,7 +1607,7 @@ import { Notice } from '@nurihaus/web-design-system/notice';   // 이 컴포넌
 import { Notice } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
 ```
 
-**언제 쓴다.** 카드·바텀시트·폼 안에 머무르며 상태나 주의를 알릴 때 쓴다(예: "검토 중입니다", "저장하지 못했습니다"). `variant`(`neutral` 기본·`success`·`warning`·`danger`)가 바탕색·글자색과 앞 아이콘(정보·체크·경고·경고)을 정한다. `danger` 는 `role="alert"` 라 화면 낭독기가 바로 읽는다. 다른 variant 에 role 이 필요하면 쓰는 쪽이 `role` 을 준다(그 값이 앞선다). `title` 은 본문 위 굵은 한 줄, `children` 이 본문이다. `action`(`{ label, onClick }`)을 주면 본문 아래 작은 버튼(CTAButton xs·neutral)이 하나 붙는다. 조건에 따라 나타나는 안내만 `motion`(`weak`·`strong`)을 준다 — 나타날 때 흐려졌다 선명해진다. 사라질 때는 움직이지 않는다. `className`·`style` 은 루트(`div`)에 붙는다.
+**언제 쓴다.** 카드·바텀시트·폼 안에 머무르며 상태나 주의를 알릴 때 쓴다(예: "검토 중입니다", "저장하지 못했습니다"). `variant`(`neutral` 기본·`success`·`warning`·`danger`)가 바탕색·글자색과 앞 아이콘(정보·체크·경고·경고)을 정한다. `danger` 는 `role="alert"` 라 화면 낭독기가 바로 읽는다. 다른 variant 에 role 이 필요하면 쓰는 쪽이 `role` 을 준다(그 값이 앞선다). `title` 은 본문 위 굵은 한 줄, `children` 이 본문이다. `action`(`{ label, onClick, loading?, track? }`)을 주면 본문 아래 작은 버튼(CTAButton xs·neutral)이 하나 붙는다. `loading` 이면 버튼이 Spinner 로 바뀌고 처리 중에는 `onClick` 을 다시 부르지 않는다. 조건에 따라 나타나는 안내만 `motion`(`weak`·`strong`)을 준다 — 나타날 때 흐려졌다 선명해진다. 사라질 때는 움직이지 않는다. `className`·`style` 은 루트(`div`)에 붙는다.
 
 **쓰지 않는다.** 행동 결과를 잠깐 알리고 스스로 사라져야 하면 Toast 를 쓴다. 입력칸 하나의 오류는 TextField 의 helper text 를 쓴다. 목록이 비었거나 화면 전체를 채우는 안내는 EmptyState 를 쓴다.
 
@@ -1753,7 +1791,7 @@ import { MessageComposer } from '@nurihaus/web-design-system/message-composer';
 import { MessageComposer } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
 ```
 
-**언제 쓴다.** 대화 화면 아래의 메시지 입력 줄이다. 입력 칸은 글자만큼 늘어나다가(다섯 줄쯤) 그 뒤로는 칸 안에서 스크롤한다. Enter 는 줄바꿈이고 보내기는 오른쪽 버튼으로만 한다. 값은 `value`·`defaultValue`·`onValueChange(value)` 로 다룬다. 보낼 수 있으면 버튼을 눌렀을 때 `onSend(value)` 가 불린다. **값을 스스로 비우지 않는다** — 보내기에 성공하면 쓰는 쪽이 `value` 를 비운다. 보낼 수 있는지는 기본으로 값이 공백만이 아닐 때다. 첨부만 보내는 화면은 `canSend` 를 직접 준다. 보낼 수 없거나 `disabled` 면 버튼이 회색(`aria-disabled`)이고 눌러도 보내지 않고 흔들린다. `loading` 동안은 Spinner 를 돌리고 보내지 않는다. `label`·`sendLabel` 은 입력 칸·보내기 버튼의 이름(aria-label)이다. `leading` 은 입력 칸 왼쪽(첨부 아이콘 버튼), `attachments` 는 입력 줄 위(첨부 썸네일) 자리다. `track` 을 주면 실제로 보낼 때 `click` 을 한 번 보낸다(입력한 글은 싣지 않는다). `className`·`style`·`ref` 는 루트 `<div>` 에 붙는다. 화면 아래에 붙이려면 BottomBar 안에 둔다.
+**언제 쓴다.** 대화 화면 아래의 메시지 입력 줄이다. 입력 칸은 글자만큼 늘어나다가(다섯 줄쯤) 그 뒤로는 칸 안에서 스크롤한다. Enter 는 줄바꿈이고 보내기는 오른쪽 버튼으로만 한다. 값은 `value`·`defaultValue`·`onValueChange(value)` 로 다룬다. 보낼 수 있으면 버튼을 눌렀을 때 `onSend(value)` 가 불린다. **값을 스스로 비우지 않는다** — 보내기에 성공하면 쓰는 쪽이 `value` 를 비운다. 보낼 수 있는지는 기본으로 값이 공백만이 아닐 때다. 첨부만 보내는 화면은 `canSend` 를 직접 준다. 보낼 수 없거나 `disabled` 면 버튼이 회색(`aria-disabled`)이고 눌러도 보내지 않고 흔들린다. `loading` 동안은 Spinner 를 돌리고 보내지 않는다. `label`·`sendLabel` 은 입력 칸·보내기 버튼의 이름(aria-label)이다. `autoFocus` 는 사용자가 방금 입력을 연 화면(예: 다시 문의하기를 고른 뒤)에서만 준다. `maxLength` 는 입력 칸 최대 글자 수다. `leading` 은 입력 칸 왼쪽(첨부 아이콘 버튼), `attachments` 는 입력 줄 위(첨부 썸네일) 자리다. `track` 을 주면 실제로 보낼 때 `click` 을 한 번 보낸다(입력한 글은 싣지 않는다). `className`·`style`·`ref` 는 루트 `<div>` 에 붙는다. 화면 아래에 붙이려면 BottomBar 안에 둔다.
 
 **쓰지 않는다.** 폼의 여러 줄 입력은 TextArea, 한 줄 입력은 TextField 를 쓴다.
 
@@ -1786,6 +1824,8 @@ import { MessageComposer } from '@nurihaus/web-design-system';             //
 | `leading` | `ReactNode` |  |  |
 | `attachments` | `ReactNode` |  |  |
 | `disabled` | `boolean` |  |  |
+| `autoFocus` | `boolean` |  |  |
+| `maxLength` | `number` |  |  |
 | `className` | `string` |  |  |
 | `style` | `CSSProperties` |  |  |
 | `track` | `string` |  |  |

package/dist/ai/motion.md

@@ -337,6 +337,7 @@
 | BottomBar | – | – | – | – | – | – | – | – | – | – | – | – |
 | MediaThumbnail | ✓ | – | – | – | – | – | – | – | – | – | – | ✓ |
 | MediaViewer | – | – | – | ✓ | ✓ | – | – | – | – | – | – | – |
+| IconButton | ✓ | – | – | – | – | – | – | – | – | – | – | – |
 
 ### 판단 근거
 
@@ -389,6 +390,7 @@
 - **BottomBar** 없음. 주 행동·입력을 담는 고정 바라 스크롤로 숨기지 않는다
 - **MediaThumbnail** press: 여는 버튼은 onClick 표면이다 (KAN-9451) · busy: 올리는 중(loading) 에 Spinner 를 덮는다 (KAN-9451)
 - **MediaViewer** enter: 화면 전체 오버레이라 scale 로 들어오고 바탕은 fade 다 (KAN-9451) · exit: enter 와 같은 대상 (KAN-9451)
+- **IconButton** press: onClick·링크가 있는 누르는 표면이다. ghost 는 누르는 동안 회색 원도 보인다 (KAN-9451)
 
 ### 바꿀 옛 모션
 

package/dist/ai/tokens.md

@@ -364,6 +364,9 @@
 | `--media-invalid-border` | `2px` | 사진·영상 썸네일: media-thumbnail. 말풍선 안에서는 쓰는 쪽이 width 로 정하고 이 폭을 넘지 않는다 |
 | `--composer-send-size` | `36px` | 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) |
 | `--composer-max-height` | `132px` | 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) |
+| `--icon-button-size-s` | `36px` | 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) |
+| `--icon-button-size-m` | `44px` | 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) |
+| `--icon-button-size-l` | `56px` | 메시지 입력: message-composer. 보내기 원과 입력 칸 최대 높이(16/22 다섯 줄 + 위아래 안쪽) |
 | `--empty-state-icon-box` | `64px` | 빈 화면: empty-state 아이콘 원 |
 | `--step-bar-height` | `4px` | 진행 단계 바 |
 | `--icon-size-xs` | `16px` | 그 밖의 치수 |

package/dist/chunk-1176.js

@@ -0,0 +1,24 @@
+"use client";
+export const __webpack_esm_id__ = 1176;
+export const __webpack_esm_ids__ = [1176];
+export const __webpack_esm_modules__ = {
+
+/***/ 1176
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   Q: () => (/* binding */ fillLinkChild)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(1041);
+
+/**
+ * asChild 로 받은 요소 하나(`<a>`·라우터 Link)에 컴포넌트의 내용을 채운다.
+ * 요소가 아니면 null — 쓰는 쪽은 null 이면 자기 기본 요소를 그린다.
+ */
+var fillLinkChild = function fillLinkChild(asChild, children, content) {
+  return asChild && /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.isValidElement)(children) ? /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(children, undefined, content) : null;
+};
+
+/***/ }
+
+};

package/dist/chunk-910.js

@@ -13,11 +13,12 @@ export const __webpack_esm_modules__ = {
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(1041);
 /* harmony import */ var _helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(4560);
 /* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(3274);
-/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(7335);
-/* harmony import */ var _callout_callout__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(1163);
-/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(6302);
-/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(8933);
-/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_8__ = __nuri_require__(9976);
+/* harmony import */ var _helpers_utils_fillLinkChild__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(1176);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(7335);
+/* harmony import */ var _callout_callout__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(1163);
+/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(6302);
+/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_8__ = __nuri_require__(8933);
+/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_9__ = __nuri_require__(9976);
 var __assign = undefined && undefined.__assign || function () {
   __assign = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -45,8 +46,9 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
+
 var CTAButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
-  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_4__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_8__/* .ctaButtonProps */ .Lr),
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_9__/* .ctaButtonProps */ .Lr),
     className = _a.className,
     text = _a.text,
     leftIcon = _a.leftIcon,
@@ -64,26 +66,26 @@ var CTAButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(f
     trackProps: trackProps
   });
   var content = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
-    children: [leftIcon, text, rightIcon, callout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_callout_callout__WEBPACK_IMPORTED_MODULE_5__/* ["default"] */ .A, {
+    children: [leftIcon, text, rightIcon, callout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_callout_callout__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {
       className: 'cta-button-callout',
       text: callout
     }) : null]
   });
   // asChild 면 넘겨받은 링크 요소 안에 버튼 글자를 넣고, 그 요소가 버튼 클래스·핸들러를 받는다
-  var linkChild = asChild && /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.isValidElement)(children) ? children : null;
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_button__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, __assign({
+  var link = (0,_helpers_utils_fillLinkChild__WEBPACK_IMPORTED_MODULE_4__/* .fillLinkChild */ .Q)(asChild, children, content);
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_button__WEBPACK_IMPORTED_MODULE_8__/* ["default"] */ .A, __assign({
     ref: ref,
     className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'cta-button', callout ? 'with-callout' : undefined),
-    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {}),
-    asChild: linkChild !== null,
+    loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, {}),
+    asChild: link !== null,
     // 링크는 로딩을 그리지 않는다. 그리면 Spinner 가 링크 자리를 차지한다
-    loading: linkChild ? undefined : loading,
+    loading: link ? undefined : loading,
     onClick: function onClick(event) {
       emit('click');
       _onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
     }
   }, restProps, {
-    children: linkChild ? /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.cloneElement)(linkChild, undefined, content) : content
+    children: link !== null && link !== void 0 ? link : content
   }));
 });
 CTAButton.displayName = 'CTAButton';

package/dist/components/bottom-bar/bottom-bar.stories.d.ts

@@ -6,14 +6,8 @@ declare const meta: {
     }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
         className?: string | undefined | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        id?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
         children?: import("react").ReactNode;
-        slot?: string | undefined | undefined;
-        title?: string | undefined | undefined;
-        key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -27,10 +21,13 @@ declare const meta: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
+        id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
@@ -132,6 +129,7 @@ declare const meta: {
         onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -199,6 +197,7 @@ declare const meta: {
         onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
@@ -272,6 +271,7 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        key?: import("react").Key | null | undefined;
         ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/dist/components/empty-state/empty-state.stories.d.ts

@@ -18,13 +18,7 @@ declare const meta: {
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
         className?: string | undefined | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
-        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        id?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
-        slot?: string | undefined | undefined;
-        title: import("react").ReactNode;
-        key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -38,10 +32,13 @@ declare const meta: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
+        id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
+        title: import("react").ReactNode;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
@@ -143,6 +140,7 @@ declare const meta: {
         onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -210,6 +208,7 @@ declare const meta: {
         onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
@@ -283,10 +282,11 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-        description?: import("react").ReactNode;
+        key?: import("react").Key | null | undefined;
         variant?: (typeof variant)[number] | undefined;
-        action?: import("react").ReactNode;
         icon: import("../..").IconName;
+        description?: import("react").ReactNode;
+        action?: import("react").ReactNode;
         ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };

package/dist/components/icon/icon.stories.d.ts

@@ -7,7 +7,7 @@ declare const meta: {
             control: {
                 type: "select";
             };
-            options: ("link" | "circle" | "image" | "copy" | "x" | "warning" | "play" | "house" | "megaphone-simple" | "chats-circle" | "user-circle" | "bell" | "caret-left" | "magnifying-glass" | "dots-three" | "gear-six" | "chat-circle" | "paper-plane-tilt" | "plus" | "camera" | "video-camera" | "upload-simple" | "calendar-blank" | "clock" | "map-pin" | "truck" | "ticket" | "qr-code" | "sparkle" | "gift" | "wallet" | "bank" | "credit-card" | "check-circle" | "check" | "info" | "question" | "lock" | "pencil-simple" | "trash" | "share-network" | "eye" | "sliders-horizontal" | "heart" | "star" | "globe" | "sign-out" | "caret-right" | "arrow-right" | "instagram-logo" | "tiktok-logo" | "youtube-logo")[];
+            options: ("link" | "circle" | "image" | "x" | "copy" | "house" | "megaphone-simple" | "chats-circle" | "user-circle" | "bell" | "caret-left" | "magnifying-glass" | "dots-three" | "gear-six" | "chat-circle" | "paper-plane-tilt" | "plus" | "camera" | "video-camera" | "play" | "upload-simple" | "calendar-blank" | "clock" | "map-pin" | "truck" | "ticket" | "qr-code" | "sparkle" | "gift" | "wallet" | "bank" | "credit-card" | "check-circle" | "check" | "warning" | "info" | "question" | "lock" | "pencil-simple" | "trash" | "share-network" | "eye" | "sliders-horizontal" | "heart" | "star" | "globe" | "sign-out" | "caret-right" | "arrow-right" | "instagram-logo" | "tiktok-logo" | "youtube-logo")[];
         };
         weight: {
             control: {

package/dist/components/icon-button/base-icon-button.d.ts

@@ -0,0 +1,3 @@
+import { BaseIconButtonProps } from './icon-button-type';
+declare const BaseIconButton: import("react").ForwardRefExoticComponent<Omit<BaseIconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default BaseIconButton;

package/dist/components/icon-button/icon-button-props.d.ts

@@ -0,0 +1,12 @@
+export declare const variant: readonly ["ghost", "secondary", "primary"];
+export declare const sizes: readonly ["s", "m", "l"];
+export declare const defaultSize: (typeof sizes)[number];
+export declare const iconButtonProps: {
+    variant: {
+        type: "className";
+        className: string;
+        values: readonly ["ghost", "secondary", "primary"];
+        default: "ghost";
+    };
+    size: import("../../helpers/types/propsDef").ClassNamePropsType<readonly ["s", "m", "l"]>;
+};

package/dist/components/icon-button/icon-button-type.d.ts

@@ -0,0 +1,16 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { AsChildProps } from '../../helpers/types/common-props';
+import { IconName } from '../icon/icon-type';
+import { TrackProps } from '../logging/logging-type';
+import { sizes, variant } from './icon-button-props';
+export interface BaseIconButtonProps extends ComponentPropsWithRef<'button'>, AsChildProps {
+}
+export interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'>, AsChildProps, TrackProps {
+    icon: IconName;
+    /** 버튼의 이름(aria-label). 아이콘만 있어 꼭 준다 */
+    label: string;
+    variant?: (typeof variant)[number];
+    size?: (typeof sizes)[number];
+    /** asChild 일 때 링크 요소 하나(`<a>`·라우터 Link). 아이콘은 그 안에 들어간다 */
+    children?: ReactNode;
+}

package/dist/components/icon-button/icon-button.d.ts

@@ -0,0 +1,5 @@
+import { IconButtonProps } from './icon-button-type';
+/** 아이콘 하나뿐인 버튼. 누르는 자리는 늘 터치 44 이상이다 */
+declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default IconButton;
+export type { IconButtonProps } from './icon-button-type';

package/dist/components/icon-button/icon-button.stories.d.ts

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("./icon-button-type").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    args: {
+        icon: "caret-left";
+        label: string;
+    };
+    argTypes: {
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["ghost", "secondary", "primary"];
+        };
+        size: {
+            control: {
+                type: "select";
+            };
+            options: readonly ["s", "m", "l"];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+/** 종류 × 크기 */
+export declare const Variants: Story;
+export declare const Disabled: Story;
+/** 다른 화면으로 가는 버튼은 링크를 감싼다 */
+export declare const AsLink: Story;

package/dist/components/list/list-row.stories.d.ts

@@ -6,19 +6,10 @@ declare const meta: {
         label: string;
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
-        label: import("react").ReactNode;
+        asChild?: boolean | undefined;
         className?: string | undefined | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
-        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
-        id?: string | undefined | undefined;
-        track?: string | undefined;
-        trackProps?: Record<string, string | number | boolean> | undefined;
         style?: import("react").CSSProperties | undefined;
         children?: import("react").ReactNode;
-        asChild?: boolean | undefined;
-        slot?: string | undefined | undefined;
-        title?: string | undefined | undefined;
-        key?: import("react").Key | null | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -32,10 +23,13 @@ declare const meta: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
+        id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
@@ -137,6 +131,7 @@ declare const meta: {
         onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
         onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -204,6 +199,7 @@ declare const meta: {
         onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
         onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLElement> | undefined;
         onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
         onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
@@ -277,6 +273,10 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+        label: import("react").ReactNode;
+        track?: string | undefined;
+        key?: import("react").Key | null | undefined;
+        trackProps?: Record<string, string | number | boolean> | undefined;
         description?: import("react").ReactNode;
         chevron?: boolean | undefined;
         leading?: import("react").ReactNode;

package/dist/components/message/message.stories.d.ts

@@ -23,17 +23,8 @@ declare const meta: {
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
         className?: string | undefined | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
-        onChange?: import("react").FormEventHandler<HTMLLIElement> | undefined;
-        id?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
         children?: import("react").ReactNode;
-        slot?: string | undefined | undefined;
-        time?: import("react").ReactNode;
-        title?: string | undefined | undefined;
-        key?: import("react").Key | null | undefined;
-        name?: import("react").ReactNode;
-        value?: string | number | readonly string[] | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -47,10 +38,13 @@ declare const meta: {
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
+        id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
         tabIndex?: number | undefined | undefined;
+        title?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
         radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
@@ -152,6 +146,7 @@ declare const meta: {
         onFocusCapture?: import("react").FocusEventHandler<HTMLLIElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLLIElement> | undefined;
         onBlurCapture?: import("react").FocusEventHandler<HTMLLIElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLLIElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLLIElement> | undefined;
         onBeforeInput?: import("react").InputEventHandler<HTMLLIElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLLIElement> | undefined;
@@ -219,6 +214,7 @@ declare const meta: {
         onWaitingCapture?: import("react").ReactEventHandler<HTMLLIElement> | undefined;
         onAuxClick?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
         onAuxClickCapture?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
         onClickCapture?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
         onContextMenu?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
         onContextMenuCapture?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
@@ -292,9 +288,13 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
+        time?: import("react").ReactNode;
+        key?: import("react").Key | null | undefined;
+        name?: import("react").ReactNode;
+        value?: string | number | readonly string[] | undefined;
         motion?: (typeof motion)[number] | undefined;
-        side?: (typeof side)[number] | undefined;
         media?: import("react").ReactNode;
+        side?: (typeof side)[number] | undefined;
         dateTime?: string | undefined;
         ref?: import("react").LegacyRef<HTMLLIElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/components/message-composer/message-composer-type.d.ts

@@ -24,4 +24,8 @@ export interface MessageComposerProps extends StyleProps, TrackProps {
     /** 입력 줄 위 자리. 첨부한 썸네일 등 */
     attachments?: ReactNode;
     disabled?: boolean;
+    /** 나타나자마자 입력 칸에 포커스한다. 사용자가 방금 입력을 열었을 때만 준다 */
+    autoFocus?: boolean;
+    /** 입력 칸 최대 글자 수(textarea maxLength) */
+    maxLength?: number;
 }

package/dist/components/message-composer/message-composer.stories.d.ts

@@ -21,6 +21,8 @@ declare const meta: {
         leading?: import("react").ReactNode;
         attachments?: import("react").ReactNode;
         disabled?: boolean | undefined;
+        autoFocus?: boolean | undefined;
+        maxLength?: number | undefined;
         className?: string | undefined;
         style?: import("react").CSSProperties | undefined;
         track?: string | undefined;

package/dist/components/notice/notice-type.d.ts

@@ -6,6 +6,8 @@ export type BaseNoticeProps = ComponentPropsWithRef<'div'>;
 export interface NoticeAction extends TrackProps {
     label: string;
     onClick: () => void;
+    /** 처리 중. 버튼이 Spinner 로 바뀌고 누르지 않는다 */
+    loading?: boolean;
 }
 export interface NoticeProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
     variant?: (typeof variant)[number];