@nurihaus/web-design-system 3.5.0 → 3.6.0

package/dist/ai/components.md

@@ -164,7 +164,7 @@ import { Callout } from '@nurihaus/web-design-system/callout';   // 이 컴포
 import { Callout } from '@nurihaus/web-design-system';             // 루트. 첫 로드 JS 가 커진다
 ```
 
-**언제 쓴다.** 버튼 같은 대상에 붙어 늘 떠 있는 짧은 라벨 말풍선에 쓴다(예: 로그인 버튼의 "최근 사용"). 꼬리 자리는 `tail`(`bottom-start` 기본·`bottom-end`·`top-start`·`top-end`)로 고른다. 버튼에 붙일 때는 Callout 을 직접 놓지 말고 CTAButton 의 `callout` prop 을 쓴다 — 모서리 자리를 DS 가 잡는다. 그 밖의 대상에 놓을 때는 자리(`position: absolute`·위치)를 쓰는 쪽이 `className` 으로 정한다. `.base-callout` 이 꼬리 기준으로 `position: relative` 를 가지므로 한 단계 구체적인 선택자(`.slot > .x`)로 덮는다.
+**언제 쓴다.** 버튼 같은 대상에 붙어 늘 떠 있는 짧은 라벨 말풍선에 쓴다(예: 로그인 버튼의 "최근 사용"). 꼬리 자리는 `tail`(`bottom-start` 기본·`bottom-end`·`top-start`·`top-end`)로 고른다. 나타날 때 꼬리에서 튀어나온 뒤 세 번 둥실 움직이고 멈춘다(동작 줄이기 설정이면 움직이지 않는다). 모션은 쓰는 쪽이 고르지 않는다. 버튼에 붙일 때는 Callout 을 직접 놓지 말고 CTAButton 의 `callout` prop 을 쓴다 — 모서리 자리를 DS 가 잡는다. 그 밖의 대상에 놓을 때는 자리(`position: absolute`·위치)를 쓰는 쪽이 `className` 으로 정한다. 위치는 `top`·`right` 같은 값으로 잡는다 — `transform` 은 등장 모션이 쓰므로 덮어써진다. `.base-callout` 이 꼬리 기준으로 `position: relative` 를 가지므로 한 단계 구체적인 선택자(`.slot > .x`)로 덮는다.
 
 **쓰지 않는다.** 마우스를 올리거나 포커스했을 때만 설명을 보여 주려면 Tooltip 을 쓴다. 상태값·분류 라벨은 OptionBadge 를 쓴다.
 

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

@@ -22,6 +22,7 @@ declare const meta: {
         title: import("react").ReactNode;
         track?: string | undefined;
         key?: import("react").Key | null | undefined;
+        value?: string | number | readonly string[] | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -285,11 +286,10 @@ declare const meta: {
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
         variant?: (typeof variants)[number] | undefined;
-        defaultOpen?: boolean | undefined;
+        trackProps?: Record<string, string | number | boolean> | undefined;
         open?: boolean | undefined;
+        defaultOpen?: boolean | undefined;
         onOpenChange?: ((open: boolean) => void) | undefined;
-        trackProps?: Record<string, string | number | boolean> | undefined;
-        value?: string | number | readonly string[] | undefined;
         onResume?: (() => void) | undefined;
         duration?: number | undefined;
         description?: import("react").ReactNode;

package/dist/components.css

@@ -848,9 +848,33 @@
   font-weight: var(--font-weight-bold);
   white-space: nowrap;
 
-  /* 꼬리: --spacing-8 정사각형을 45도 돌린다. 한 변의 절반에 테두리 두께만큼 더 밖으로 내어 몸통 테두리를 덮는다 */
+  /* 나타날 때 꼬리에서 튀어나온 뒤 세 번 둥실 움직이고 멈춘다 (ADR 0007). 계속 움직이면 거슬린다.
+     둥실 지연 = 팝 지연 + 팝 시간. 팝 쪽을 바꾸면 둥실 지연도 같이 바꾼다 */
+  --callout-origin: var(--spacing-16) 100%;
+  --callout-enter: translateY(var(--spacing-4));
+
+  transform-origin: var(--callout-origin);
+  animation:
+    callout-pop var(--motion-slow) var(--motion-spring) var(--motion-fast) both,
+    callout-float calc(var(--motion-base) * 8) var(--motion-ease)
+      calc(var(--motion-fast) + var(--motion-slow)) 3;
 }
 
+.base-callout.tail-bottom-end {
+    --callout-origin: calc(100% - var(--spacing-16)) 100%;
+  }
+
+.base-callout:is(.tail-top-start,.tail-top-end) {
+    --callout-origin: var(--spacing-16) 0;
+    --callout-enter: translateY(calc(var(--spacing-4) * -1));
+  }
+
+.base-callout.tail-top-end {
+    --callout-origin: calc(100% - var(--spacing-16)) 0;
+  }
+
+/* 꼬리: --spacing-8 정사각형을 45도 돌린다. 한 변의 절반에 테두리 두께만큼 더 밖으로 내어 몸통 테두리를 덮는다 */
+
 .base-callout::after {
     content: '';
     position: absolute;
@@ -881,6 +905,35 @@
     right: var(--spacing-12);
   }
 
+@keyframes callout-pop {
+  from {
+    opacity: 0;
+    transform: var(--callout-enter) scale(0.6);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes callout-float {
+  0%,
+  100% {
+    transform: none;
+  }
+
+  50% {
+    transform: translateY(calc(var(--spacing-6) / -2));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .base-callout {
+    animation: none;
+  }
+}
+
 .base-check-box.label {
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);

package/dist/styles.css

@@ -1161,8 +1161,28 @@ p {
   font-weight: var(--font-weight-bold);
   white-space: nowrap;
 
-  /* 꼬리: --spacing-8 정사각형을 45도 돌린다. 한 변의 절반에 테두리 두께만큼 더 밖으로 내어 몸통 테두리를 덮는다 */
+  /* 나타날 때 꼬리에서 튀어나온 뒤 세 번 둥실 움직이고 멈춘다 (ADR 0007). 계속 움직이면 거슬린다.
+     둥실 지연 = 팝 지연 + 팝 시간. 팝 쪽을 바꾸면 둥실 지연도 같이 바꾼다 */
+  --callout-origin: var(--spacing-16) 100%;
+  --callout-enter: translateY(var(--spacing-4));
+
+  transform-origin: var(--callout-origin);
+  animation:
+    callout-pop var(--motion-slow) var(--motion-spring) var(--motion-fast) both,
+    callout-float calc(var(--motion-base) * 8) var(--motion-ease)
+      calc(var(--motion-fast) + var(--motion-slow)) 3;
 }
+.base-callout.tail-bottom-end {
+    --callout-origin: calc(100% - var(--spacing-16)) 100%;
+  }
+.base-callout:is(.tail-top-start,.tail-top-end) {
+    --callout-origin: var(--spacing-16) 0;
+    --callout-enter: translateY(calc(var(--spacing-4) * -1));
+  }
+.base-callout.tail-top-end {
+    --callout-origin: calc(100% - var(--spacing-16)) 0;
+  }
+/* 꼬리: --spacing-8 정사각형을 45도 돌린다. 한 변의 절반에 테두리 두께만큼 더 밖으로 내어 몸통 테두리를 덮는다 */
 .base-callout::after {
     content: '';
     position: absolute;
@@ -1188,6 +1208,32 @@ p {
 .base-callout:is(.tail-bottom-end,.tail-top-end)::after {
     right: var(--spacing-12);
   }
+@keyframes callout-pop {
+  from {
+    opacity: 0;
+    transform: var(--callout-enter) scale(0.6);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes callout-float {
+  0%,
+  100% {
+    transform: none;
+  }
+
+  50% {
+    transform: translateY(calc(var(--spacing-6) / -2));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .base-callout {
+    animation: none;
+  }
+}
 .base-check-box.label {
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-medium);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurihaus/web-design-system",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Nurihaus 디자인 시스템 — 컴포넌트와 디자인 토큰",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",