@nurihaus/web-design-system 3.8.0 → 3.9.1

package/dist/styles.css

@@ -302,6 +302,11 @@
   --composer-send-size: 36px;
   --composer-max-height: 132px;
 
+  /* 아이콘 버튼: icon-button. 보이는 원의 지름. 누르는 자리는 --touch-target 이상 */
+  --icon-button-size-s: 36px;
+  --icon-button-size-m: 44px;
+  --icon-button-size-l: 56px;
+
   /* 빈 화면: empty-state 아이콘 원 */
   --empty-state-icon-box: 64px;
 
@@ -1954,6 +1959,11 @@ p {
     justify-content: space-between;
     gap: var(--spacing-10);
   }
+/* popper 는 높이를 정하지 않아 긴 목록(나라 221개)이 화면 밖으로 넘치고 스크롤도 안 된다.
+     화면에 남은 높이까지만 쓰고 Viewport 가 스크롤한다 */
+.base-drop-down.content {
+    max-height: var(--radix-select-content-available-height);
+  }
 /***************************************************************************************************
  *                                                                                                 *
  * drop-down-single                                                                                *
@@ -2554,6 +2564,84 @@ p {
     width: var(--icon-size-xl);
     height: var(--icon-size-xl);
   }
+.base-icon-button {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  cursor: var(--cursor-button);
+
+  /* 보이는 크기가 작아도(s 36) 누르는 자리는 터치 44 */
+}
+.base-icon-button::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: var(--touch-target);
+    height: var(--touch-target);
+    transform: translate(-50%, -50%);
+  }
+.base-icon-button[data-disabled] {
+    cursor: var(--cursor-disabled);
+  }
+/***************************************************************************************************
+ *                                                                                                 *
+ * icon-button                                                                                     *
+ *                                                                                                 *
+ ***************************************************************************************************/
+.icon-button {
+  border-radius: var(--radius-full);
+  transition:
+    transform var(--motion-press-duration) var(--motion-press-ease),
+    background-color var(--motion-press-duration) var(--motion-press-ease);
+}
+.icon-button:active:not([data-disabled]) {
+    transform: scale(var(--motion-press-scale));
+  }
+.icon-button:focus-visible {
+    outline: var(--hairline) solid var(--color-purple-600);
+    outline-offset: var(--spacing-2);
+  }
+.icon-button.size-s {
+    width: var(--icon-button-size-s);
+    height: var(--icon-button-size-s);
+  }
+.icon-button.size-m {
+    width: var(--icon-button-size-m);
+    height: var(--icon-button-size-m);
+  }
+.icon-button.size-l {
+    width: var(--icon-button-size-l);
+    height: var(--icon-button-size-l);
+  }
+/* 바탕 없이 아이콘만. 누르는 동안 회색 원이 보인다 */
+.icon-button.variant-ghost {
+    background-color: transparent;
+    color: var(--color-grey-scale-700);
+  }
+.icon-button.variant-ghost:active:not([data-disabled]) {
+      background-color: var(--color-grey-scale-100);
+    }
+/* CTAButton secondary 와 같은 연보라 */
+.icon-button.variant-secondary {
+    background-color: var(--color-purple-50);
+    color: var(--color-purple-900);
+  }
+.icon-button.variant-primary {
+    background-color: var(--color-purple-900);
+    color: var(--color-white);
+  }
+.icon-button[data-disabled] {
+    color: var(--color-grey-scale-300);
+  }
+.icon-button[data-disabled]:is(.variant-secondary,.variant-primary) {
+      background-color: var(--color-grey-scale-200);
+      color: var(--color-white);
+    }
 .base-list:where(.group) {
     display: flex;
     flex-direction: column;

package/dist/toast.js

@@ -496,21 +496,23 @@ module.exports = x({ ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_ru
 /******/ __nuri_require__.C(__webpack_chunk_6__);
 /******/ import * as __webpack_chunk_7__ from "./chunk-8933.js";
 /******/ __nuri_require__.C(__webpack_chunk_7__);
-/******/ import * as __webpack_chunk_8__ from "./chunk-2496.js";
+/******/ import * as __webpack_chunk_8__ from "./chunk-1176.js";
 /******/ __nuri_require__.C(__webpack_chunk_8__);
-/******/ import * as __webpack_chunk_9__ from "./chunk-5226.js";
+/******/ import * as __webpack_chunk_9__ from "./chunk-2496.js";
 /******/ __nuri_require__.C(__webpack_chunk_9__);
-/******/ import * as __webpack_chunk_10__ from "./chunk-6713.js";
+/******/ import * as __webpack_chunk_10__ from "./chunk-5226.js";
 /******/ __nuri_require__.C(__webpack_chunk_10__);
-/******/ import * as __webpack_chunk_11__ from "./chunk-910.js";
+/******/ import * as __webpack_chunk_11__ from "./chunk-6713.js";
 /******/ __nuri_require__.C(__webpack_chunk_11__);
-/******/ import * as __webpack_chunk_12__ from "./chunk-5077.js";
+/******/ import * as __webpack_chunk_12__ from "./chunk-910.js";
 /******/ __nuri_require__.C(__webpack_chunk_12__);
+/******/ import * as __webpack_chunk_13__ from "./chunk-5077.js";
+/******/ __nuri_require__.C(__webpack_chunk_13__);
 /******/ 
 /******/ // startup
 /******/ // Load entry module and return exports
 /******/ // This entry module depends on other loaded chunks and execution need to be delayed
-/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,7298,2777,6302,8933,2496,5226,6713,910,5077], () => (__nuri_require__(4012)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,7298,2777,6302,8933,1176,2496,5226,6713,910,5077], () => (__nuri_require__(4012)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__ToastProvider = __webpack_exports__.t;
 /******/ const __webpack_exports__default = __webpack_exports__.A;

package/dist/tokens.css

@@ -300,6 +300,11 @@
   --composer-send-size: 36px;
   --composer-max-height: 132px;
 
+  /* 아이콘 버튼: icon-button. 보이는 원의 지름. 누르는 자리는 --touch-target 이상 */
+  --icon-button-size-s: 36px;
+  --icon-button-size-m: 44px;
+  --icon-button-size-l: 56px;
+
   /* 빈 화면: empty-state 아이콘 원 */
   --empty-state-icon-box: 64px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurihaus/web-design-system",
-  "version": "3.8.0",
+  "version": "3.9.1",
   "description": "Nurihaus 디자인 시스템 — 컴포넌트와 디자인 토큰",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -120,6 +120,10 @@
       "types": "./dist/components/button/cta-button.d.ts",
       "default": "./dist/cta-button.js"
     },
+    "./icon-button": {
+      "types": "./dist/components/icon-button/icon-button.d.ts",
+      "default": "./dist/icon-button.js"
+    },
     "./callout": {
       "types": "./dist/components/callout/callout.d.ts",
       "default": "./dist/callout.js"