@nurihaus/web-design-system 3.1.1 → 3.2.0

package/dist/components.css

@@ -411,6 +411,152 @@
     border: var(--hairline) solid var(--color-grey-scale-300);
   }
 
+.base-bottom-nav:where(.root) {
+    position: fixed;
+    left: var(--spacing-16);
+    right: var(--spacing-16);
+    /* 기기 홈 막대만큼 더 띄운다. env() 의 대체값 0 은 단위가 있어야 calc 가 성립한다 */
+    bottom: calc(var(--bottom-nav-offset) + env(safe-area-inset-bottom, 0px)); /* raw-px */
+    z-index: var(--z-sticky);
+    display: grid;
+    grid-template-columns: repeat(var(--bottom-nav-count), minmax(0, 1fr));
+    height: var(--bottom-nav-height);
+    padding: var(--bottom-nav-padding);
+    box-sizing: border-box;
+    border-radius: var(--radius-full);
+    isolation: isolate;
+  }
+
+.base-bottom-nav:where(.indicator) {
+    position: absolute;
+    z-index: var(--z-base);
+    top: var(--bottom-nav-padding);
+    bottom: var(--bottom-nav-padding);
+    left: var(--bottom-nav-padding);
+    width: calc((100% - 2 * var(--bottom-nav-padding)) / var(--bottom-nav-count));
+    border-radius: inherit;
+    transform: translateX(calc(var(--bottom-nav-active) * 100%));
+  }
+
+.base-bottom-nav:where(.item) {
+    position: relative;
+    z-index: var(--z-raised);
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-2);
+    border-radius: inherit;
+    text-decoration: none;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * bottom-nav — 유리 캡슐                                                                          *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.bottom-nav {
+  /* 뒤를 흐리고 채도를 올린 반투명 바탕 + 위쪽 반사광 + 흰 안쪽 테두리 + 그림자 */
+  background:
+    linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--color-grey-scale-50) 55%, transparent),
+      transparent 55%
+    ),
+    color-mix(in srgb, var(--color-grey-scale-50) 62%, transparent);
+  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
+  box-shadow:
+    inset 0 var(--hairline) 0 color-mix(in srgb, var(--color-grey-scale-50) 75%, transparent),
+    inset 0 0 0 var(--hairline) color-mix(in srgb, var(--color-grey-scale-50) 35%, transparent),
+    var(--shadow-floating);
+
+  /* 흐림을 못 하는 브라우저, 투명도 줄이기 설정에서는 거의 불투명하게 */
+}
+
+@supports not ((backdrop-filter: none) or (-webkit-backdrop-filter: none)) {
+
+.bottom-nav {
+    background: color-mix(in srgb, var(--color-grey-scale-50) 96%, transparent);
+}
+  }
+
+@media (prefers-reduced-transparency: reduce) {
+
+.bottom-nav {
+    background: color-mix(in srgb, var(--color-grey-scale-50) 98%, transparent);
+}
+  }
+
+.bottom-nav-indicator {
+  background: color-mix(in srgb, var(--color-purple-900) 10%, transparent);
+  box-shadow: inset 0 var(--hairline) 0
+    color-mix(in srgb, var(--color-grey-scale-50) 50%, transparent);
+  transition: transform var(--motion-slow) var(--motion-spring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+.bottom-nav-indicator {
+    transition: none;
+}
+  }
+
+.bottom-nav-item {
+  color: var(--color-grey-scale-600);
+  font-size: var(--font-size-xsm);
+  font-weight: var(--font-weight-medium);
+  -webkit-tap-highlight-color: transparent;
+  transition: color var(--motion-fast) var(--motion-ease);
+}
+
+.bottom-nav-item[aria-current='page'] {
+    color: var(--color-purple-900);
+    font-weight: var(--font-weight-bold);
+  }
+
+.bottom-nav-item:focus-visible {
+    outline: var(--hairline) solid var(--color-purple-600);
+    outline-offset: calc(-1 * var(--spacing-2));
+  }
+
+.bottom-nav-item:active .bottom-nav-icon {
+    transform: scale(0.88);
+  }
+
+.bottom-nav-icon {
+  position: relative;
+  display: flex;
+  transition: transform var(--motion-fast) var(--motion-spring);
+}
+
+.bottom-nav-badge {
+  position: absolute;
+  top: 0;
+  left: calc(100% - var(--spacing-6));
+  min-width: var(--bottom-nav-badge-dot);
+  height: var(--bottom-nav-badge-dot);
+  box-sizing: border-box;
+  border-radius: var(--radius-full);
+  background: var(--color-accent-red-500);
+  box-shadow: 0 0 0 var(--spacing-2) var(--color-grey-scale-50);
+}
+
+.bottom-nav-badge[data-count] {
+    top: calc(-1 * var(--spacing-4));
+    left: calc(100% - var(--spacing-8));
+    min-width: var(--bottom-nav-badge-count);
+    height: var(--bottom-nav-badge-count);
+    padding: 0 var(--spacing-4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-grey-scale-50);
+    font-size: var(--font-size-xsm);
+    font-weight: var(--font-weight-bold);
+    font-variant-numeric: tabular-nums;
+  }
+
 .base-breadcrumb:where(.list) {
     display: flex;
     flex-wrap: wrap;
@@ -733,6 +879,84 @@
     background-color: var(--color-grey-scale-300);
   }
 
+.base-chip-group:where(.root) {
+    display: flex;
+    gap: var(--spacing-8);
+    overflow-x: auto;
+    /* 칩의 터치 여백이 잘리지 않게 위아래를 비운다 */
+    padding-block: var(--spacing-4);
+    scrollbar-width: none;
+  }
+
+.base-chip-group:where(.root)::-webkit-scrollbar {
+      display: none;
+    }
+
+.base-chip-group:where(.chip) {
+    position: relative;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-6);
+    cursor: pointer;
+
+    /* 36 높이를 터치 44 로 넓힌다 */
+  }
+
+.base-chip-group:where(.chip)::after {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--spacing-4)) 0;
+    }
+
+.base-chip-group[data-disabled]:where(.chip) {
+      cursor: not-allowed;
+    }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * chip-group                                                                                      *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.chip-group-chip {
+  height: var(--control-height-s);
+  padding: 0 var(--spacing-14);
+  border: var(--hairline) solid var(--color-grey-scale-300);
+  border-radius: var(--radius-full);
+  background: var(--color-grey-scale-50);
+  color: var(--color-grey-scale-600);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  transition:
+    background-color var(--motion-fast) var(--motion-ease),
+    color var(--motion-fast) var(--motion-ease),
+    border-color var(--motion-fast) var(--motion-ease);
+}
+
+.chip-group-chip[data-state='on'] {
+    border-color: var(--color-purple-900);
+    background: var(--color-purple-900);
+    color: var(--color-grey-scale-50);
+    font-weight: var(--font-weight-semibold);
+  }
+
+.chip-group-chip[data-disabled] {
+    border-color: var(--color-grey-scale-200);
+    color: var(--color-grey-scale-300);
+  }
+
+.chip-group-chip:focus-visible {
+    outline: var(--hairline) solid var(--color-purple-600);
+    outline-offset: var(--spacing-2);
+  }
+
+.chip-group-count {
+  font-size: var(--font-size-xsm);
+  font-variant-numeric: tabular-nums;
+  opacity: 0.75;
+}
+
 .base-collapsible-menu.trigger {
     display: flex;
     align-items: center;
@@ -1703,6 +1927,26 @@
       color: var(--color-accent-orange-900);
     }
 
+.base-icon {
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+
+.icon.size-s {
+    width: var(--icon-size-s);
+    height: var(--icon-size-s);
+  }
+
+.icon.size-m {
+    width: var(--icon-size-m);
+    height: var(--icon-size-m);
+  }
+
+.icon.size-l {
+    width: var(--icon-size-l);
+    height: var(--icon-size-l);
+  }
+
 .base-inline-loading {
   display: flex;
   width: 100%;
@@ -2229,6 +2473,76 @@
   }
 }
 
+.base-step-progress:where(.root) {
+    display: grid;
+    grid-template-columns: repeat(var(--step-count), minmax(0, 1fr));
+    gap: var(--spacing-4);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+.base-step-progress:where(.step) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-6);
+    min-width: 0;
+  }
+
+/***************************************************************************************************
+ *                                                                                                 *
+ * step-progress                                                                                   *
+ *                                                                                                 *
+ ***************************************************************************************************/
+
+.step-progress-bar {
+  display: block;
+  height: var(--step-bar-height);
+  border-radius: var(--radius-full);
+  background: var(--color-grey-scale-200);
+  transition: background-color var(--motion-base) var(--motion-ease);
+}
+
+.step-progress-name {
+  overflow: hidden;
+  color: var(--color-grey-scale-500);
+  font-size: var(--font-size-xsm);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.step-progress-step[data-state='done'] .step-progress-bar {
+      background: var(--color-purple-900);
+    }
+
+.step-progress-step[data-state='done'] .step-progress-name {
+      color: var(--color-grey-scale-600);
+    }
+
+.step-progress-step[data-state='current'] .step-progress-bar {
+      background: var(--color-purple-600);
+    }
+
+.step-progress-step[data-state='current'] .step-progress-name {
+      color: var(--color-purple-900);
+      font-weight: var(--font-weight-semibold);
+    }
+
+/* 지금 단계 이름만 보인다. 다른 이름은 낭독기에는 남긴다 */
+
+.step-progress.label-visibility-current .step-progress-step:not([data-state='current']) .step-progress-name {
+    position: absolute;
+    width: 1px; /* raw-px */
+    height: 1px; /* raw-px */
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+.step-progress.label-visibility-current .step-progress-step[data-state='current'] .step-progress-name {
+    overflow: visible;
+  }
+
 .base-switch:where(.thumb) {
     display: block;
   }

package/dist/icon.js

@@ -0,0 +1,222 @@
+"use client";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/jsx-runtime";
+/******/ var __webpack_modules__ = ({
+
+/***/ 3547
+(__unused_webpack_module, __webpack_exports__, __nuri_require__) {
+
+/* harmony export */ __nuri_require__.d(__webpack_exports__, {
+/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __nuri_require__(612);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(1041);
+/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(3274);
+/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(7335);
+/* harmony import */ var _base_icon__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(9896);
+/* harmony import */ var _icon_props__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(6722);
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+
+
+
+
+
+var Icon = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_3__/* .getMergedProps */ .p)(props, _icon_props__WEBPACK_IMPORTED_MODULE_5__/* .iconProps */ .u1),
+    className = _a.className,
+    restProps = __rest(_a, ["className"]);
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_icon__WEBPACK_IMPORTED_MODULE_4__/* ["default"] */ .A, __assign({
+    ref: ref,
+    className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_2__/* .classNames */ .x)(className, 'icon')
+  }, restProps));
+});
+Icon.displayName = 'Icon';
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Icon);
+
+/***/ },
+
+/***/ 1041
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef) });
+
+/***/ },
+
+/***/ 612
+(module, __unused_webpack_exports, __nuri_require__) {
+
+var x = (y) => {
+	var x = {}; __nuri_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["jsx"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__.jsx) });
+
+/***/ }
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/ 
+/******/ // The require function
+/******/ function __nuri_require__(moduleId) {
+/******/ 	// Check if module is in cache
+/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 	if (cachedModule !== undefined) {
+/******/ 		return cachedModule.exports;
+/******/ 	}
+/******/ 	// Create a new module (and put it into the cache)
+/******/ 	var module = __webpack_module_cache__[moduleId] = {
+/******/ 		// no module.id needed
+/******/ 		// no module.loaded needed
+/******/ 		exports: {}
+/******/ 	};
+/******/ 
+/******/ 	// Execute the module function
+/******/ 	__webpack_modules__[moduleId](module, module.exports, __nuri_require__);
+/******/ 
+/******/ 	// Return the exports of the module
+/******/ 	return module.exports;
+/******/ }
+/******/ 
+/******/ // expose the modules object (__webpack_modules__)
+/******/ __nuri_require__.m = __webpack_modules__;
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/chunk loaded */
+/******/ (() => {
+/******/ 	var deferred = [];
+/******/ 	__nuri_require__.O = (result, chunkIds, fn, priority) => {
+/******/ 		if(chunkIds) {
+/******/ 			priority = priority || 0;
+/******/ 			for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
+/******/ 			deferred[i] = [chunkIds, fn, priority];
+/******/ 			return;
+/******/ 		}
+/******/ 		var notFulfilled = Infinity;
+/******/ 		for (var i = 0; i < deferred.length; i++) {
+/******/ 			var [chunkIds, fn, priority] = deferred[i];
+/******/ 			var fulfilled = true;
+/******/ 			for (var j = 0; j < chunkIds.length; j++) {
+/******/ 				if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__nuri_require__.O).every((key) => (__nuri_require__.O[key](chunkIds[j])))) {
+/******/ 					chunkIds.splice(j--, 1);
+/******/ 				} else {
+/******/ 					fulfilled = false;
+/******/ 					if(priority < notFulfilled) notFulfilled = priority;
+/******/ 				}
+/******/ 			}
+/******/ 			if(fulfilled) {
+/******/ 				deferred.splice(i--, 1)
+/******/ 				var r = fn();
+/******/ 				if (r !== undefined) result = r;
+/******/ 			}
+/******/ 		}
+/******/ 		return result;
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__nuri_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__nuri_require__.o(definition, key) && !__nuri_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__nuri_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/export webpack runtime */
+/******/ export { __nuri_require__ };
+/******/ 
+/******/ /* webpack/runtime/import chunk loading */
+/******/ (() => {
+/******/ 	// no baseURI
+/******/ 	
+/******/ 	// object to store loaded and loading chunks
+/******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
+/******/ 	// [resolve, Promise] = chunk loading, 0 = chunk loaded
+/******/ 	var installedChunks = {
+/******/ 		480: 0
+/******/ 	};
+/******/ 	
+/******/ 	var installChunk = (data) => {
+/******/ 		var {__webpack_esm_ids__, __webpack_esm_modules__, __webpack_esm_runtime__} = data;
+/******/ 		// add "modules" to the modules object,
+/******/ 		// then flag all "ids" as loaded and fire callback
+/******/ 		var moduleId, chunkId, i = 0;
+/******/ 		for(moduleId in __webpack_esm_modules__) {
+/******/ 			if(__nuri_require__.o(__webpack_esm_modules__, moduleId)) {
+/******/ 				__nuri_require__.m[moduleId] = __webpack_esm_modules__[moduleId];
+/******/ 			}
+/******/ 		}
+/******/ 		if(__webpack_esm_runtime__) __webpack_esm_runtime__(__nuri_require__);
+/******/ 		for(;i < __webpack_esm_ids__.length; i++) {
+/******/ 			chunkId = __webpack_esm_ids__[i];
+/******/ 			if(__nuri_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
+/******/ 				installedChunks[chunkId][0]();
+/******/ 			}
+/******/ 			installedChunks[__webpack_esm_ids__[i]] = 0;
+/******/ 		}
+/******/ 		__nuri_require__.O();
+/******/ 	}
+/******/ 	
+/******/ 	// no chunk on demand loading
+/******/ 	
+/******/ 	// no prefetching
+/******/ 	
+/******/ 	// no preloaded
+/******/ 	
+/******/ 	__nuri_require__.C = installChunk;
+/******/ 	
+/******/ 	__nuri_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
+/******/ 	// no HMR
+/******/ 	
+/******/ 	// no HMR manifest
+/******/ })();
+/******/ 
+/************************************************************************/
+/******/ 
+/******/ import * as __webpack_chunk_1__ from "./chunk-364.js";
+/******/ __nuri_require__.C(__webpack_chunk_1__);
+/******/ import * as __webpack_chunk_2__ from "./chunk-298.js";
+/******/ __nuri_require__.C(__webpack_chunk_2__);
+/******/ import * as __webpack_chunk_3__ from "./chunk-653.js";
+/******/ __nuri_require__.C(__webpack_chunk_3__);
+/******/ 
+/******/ // 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, [364,298,653], () => (__nuri_require__(3547)))
+/******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
+/******/ const __webpack_exports__default = __webpack_exports__.A;
+/******/ export { __webpack_exports__default as default };
+/******/ 

package/dist/index.d.ts

@@ -22,6 +22,10 @@ export { default as Tooltip, TooltipProvider } from './components/tooltip/toolti
 export { default as Tabs } from './components/tabs/tabs';
 export { default as ModalWithDoubleButton } from './components/modal/modal-with-double-button';
 export { Spinner, InlineLoading, OverlayLoading } from './components/loading';
+export { default as Icon } from './components/icon/icon';
+export { default as BottomNav } from './components/bottom-nav/bottom-nav';
+export { default as StepProgress } from './components/step-progress/step-progress';
+export { default as ChipGroup } from './components/chip-group/chip-group';
 export type { AvatarProps } from './components/avatar/avatar-type';
 export type { CTAButtonProps } from './components/button/button-type';
 export type { OptionBadgeProps, IconTextBadgeProps, IconTextOptionBadgeProps, } from './components/badge/badge-type';
@@ -44,6 +48,10 @@ export type { TooltipProps, TooltipProviderProps } from './components/tooltip/to
 export type { TabsProps } from './components/tabs/tabs-type';
 export type { ModalWithDoubleButtonProps } from './components/modal/modal-type';
 export type { SpinnerProps, InlineLoadingProps, OverlayLoadingProps } from './components/loading';
+export type { IconName, IconProps, IconWeight } from './components/icon/icon-type';
+export type { BottomNavProps, BottomNavItem, BottomNavLinkProps, BottomNavBadge, } from './components/bottom-nav/bottom-nav-type';
+export type { StepProgressProps } from './components/step-progress/step-progress-type';
+export type { ChipGroupProps, ChipGroupItem } from './components/chip-group/chip-group-type';
 export type { Size } from './helpers/props/common-props';
 export { colors, primitive, semanticApp, semanticAdmin } from './tokens/generated';
 export type { PrimitiveTokens, SemanticAppTokens, SemanticAdminTokens } from './tokens/generated';