@nurihaus/web-design-system 3.8.0 → 3.9.0

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

@@ -22,14 +22,8 @@ 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;
         children: import("react").ReactNode;
-        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;
@@ -43,10 +37,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;
@@ -148,6 +145,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;
@@ -215,6 +213,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;
@@ -288,8 +287,9 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-        motion?: (typeof motion)[number] | undefined;
+        key?: import("react").Key | null | undefined;
         variant?: (typeof variant)[number] | undefined;
+        motion?: (typeof motion)[number] | undefined;
         action?: import("./notice-type").NoticeAction | undefined;
         ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

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

@@ -39,14 +39,8 @@ declare const meta: {
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
         className?: string | undefined | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
-        onChange?: import("react").FormEventHandler<HTMLSpanElement> | 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;
@@ -60,10 +54,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;
@@ -165,6 +162,7 @@ declare const meta: {
         onFocusCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
         onBlur?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
         onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
+        onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
         onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
         onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
         onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
@@ -232,6 +230,7 @@ declare const meta: {
         onWaitingCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
         onAuxClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
         onAuxClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
+        onClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
         onClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
         onContextMenu?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
         onContextMenuCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
@@ -305,8 +304,9 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
-        width?: number | string | undefined;
+        key?: import("react").Key | null | undefined;
         height?: number | string | undefined;
+        width?: number | string | undefined;
         shape?: (typeof shapes)[number] | undefined;
         lines?: number | undefined;
         animated?: boolean | undefined;

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

@@ -18,17 +18,7 @@ declare const meta: {
     };
     decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
         className?: string | undefined;
-        onClick?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
-        onChange?: import("react").FormEventHandler<HTMLLIElement> | undefined;
-        id?: string | undefined | undefined;
-        track?: string | undefined;
-        trackProps?: Record<string, string | number | boolean> | undefined;
         style?: import("react").CSSProperties | undefined;
-        open?: boolean | undefined;
-        slot?: string | undefined | undefined;
-        title: import("react").ReactNode;
-        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;
@@ -42,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;
@@ -147,6 +140,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;
@@ -214,6 +208,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;
@@ -287,12 +282,17 @@ declare const meta: {
         onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement> | undefined;
         onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
         onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
-        onResume?: (() => void) | undefined;
+        track?: string | undefined;
+        key?: import("react").Key | null | undefined;
+        value?: string | number | readonly string[] | undefined;
+        variant?: (typeof variants)[number] | undefined;
+        trackProps?: Record<string, string | number | boolean> | undefined;
+        open?: boolean | undefined;
         defaultOpen?: boolean | undefined;
         onOpenChange?: ((open: boolean) => void) | undefined;
+        onResume?: (() => void) | undefined;
         duration?: number | undefined;
         description?: import("react").ReactNode;
-        variant?: (typeof variants)[number] | undefined;
         action?: import("./toast-type").ToastAction | undefined;
         showClose?: boolean | undefined;
         ref?: import("react").LegacyRef<HTMLLIElement> | undefined;

package/dist/components.css

@@ -2418,6 +2418,102 @@
     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/cta-button.js

@@ -13,11 +13,12 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/j
 /* 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';
@@ -258,15 +260,17 @@ 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-5226.js";
+/******/ __nuri_require__.C(__webpack_chunk_10__);
 /******/ 
 /******/ // 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], () => (__nuri_require__(910)))
+/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,7298,2777,6302,8933,1176,2496,5226], () => (__nuri_require__(910)))
 /******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
 /******/ const __webpack_exports__default = __webpack_exports__.A;
 /******/ export { __webpack_exports__default as default };

package/dist/helpers/utils/fillLinkChild.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+/**
+ * asChild 로 받은 요소 하나(`<a>`·라우터 Link)에 컴포넌트의 내용을 채운다.
+ * 요소가 아니면 null — 쓰는 쪽은 null 이면 자기 기본 요소를 그린다.
+ */
+export declare const fillLinkChild: (asChild: boolean | undefined, children: ReactNode, content: ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;