@ncds/ui-admin 1.8.21-alpha.1 → 1.8.21-alpha.11

package/dist/ui-admin/assets/styles/style.scoped.css

@@ -1712,10 +1712,10 @@
 .ncua-input__password-icon {
   color: var(--gray-300);
 }
-.ncua-input__password-lock-icon {
+.ncua-input__slot-icon {
   color: var(--gray-300);
 }
-.ncua-input.has-value .ncua-input__password-lock-icon, .ncua-input:focus-within .ncua-input__password-lock-icon {
+.ncua-input.has-value .ncua-input__slot-icon, .ncua-input:focus-within .ncua-input__slot-icon {
   color: var(--gray-600);
 }
 .ncua-input__left-icon {
@@ -1745,6 +1745,12 @@
 .ncua-input.is-disabled .ncua-input__destructive-icon {
   display: none;
 }
+.ncua-input.is-disabled .ncua-input__password-icon {
+  display: none;
+}
+.ncua-input.is-disabled .ncua-input__slot-icon {
+  color: var(--gray-300);
+}
 .ncua-input.is-disabled .ncua-input__button {
   color: var(--gray-200);
 }
@@ -1807,6 +1813,33 @@
   margin-left: -1px;
 }
 
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text {
+  display: flex;
+  align-items: center;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  padding: 4px 10px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text--xs {
+  line-height: var(--line-heights-xs);
+  padding: 4px 10px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text--sm {
+  line-height: var(--line-heights-sm);
+  padding: 6px 12px;
+}
+.ncua-input__trailing-text-wrap .ncua-input__trailing-text {
+  border-radius: 0 6px 6px 0;
+  border-left-width: 0;
+  color: var(--gray-400);
+  font-size: var(--font-size-sm);
+}
+.ncua-input__trailing-text-wrap .ncua-input__field:has(+ .ncua-input__trailing-text) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: -1px;
+}
+
 .ncua-input__trailing-button .ncua-input__button {
   display: flex;
   align-items: center;
@@ -2205,6 +2238,226 @@
   }
 }
 
+.ncua-modal:has(.ncua-postcode-search-modal) {
+  padding-block-end: 0;
+  height: 640px;
+}
+@media (max-width: 768px) {
+  .ncua-modal:has(.ncua-postcode-search-modal) {
+    height: 480px;
+  }
+  .ncua-modal:has(.ncua-postcode-search-modal) .ncua-postcode-search-modal__item .ncua-radio-input {
+    display: none;
+  }
+  .ncua-modal:has(.ncua-postcode-search-modal) .ncua-modal__content {
+    padding-block-end: 20px;
+  }
+}
+
+.ncua-modal__content:has(.ncua-postcode-search-modal) {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: 32px;
+  padding-inline: 0;
+}
+
+.ncua-postcode-search-modal {
+  --padding-inline: 20px;
+}
+
+.ncua-postcode-search-modal__search-area {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding-inline: var(--padding-inline);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-s);
+  background-color: var(--base-white);
+  padding-block-end: 20px;
+}
+.ncua-postcode-search-modal__search-area.is-fixed {
+  border-block-end: 1px solid var(--gray-200);
+}
+
+.ncua-postcode-search-modal__search {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+}
+
+.ncua-postcode-search-modal__search-area .ncua-postcode-search-modal__result-title {
+  margin: 0 0 2px;
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xs);
+}
+
+.ncua-postcode-search-modal__result-desc {
+  margin: 0;
+  color: var(--gray-400);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  line-height: var(--line-heights-xxs);
+}
+
+.ncua-postcode-search-modal__search-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.ncua-postcode-search-modal__search-button {
+  flex-shrink: 0;
+}
+
+.ncua-postcode-search-modal__count {
+  padding-inline: var(--padding-inline);
+  margin-block-start: 12px;
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-xs);
+}
+.ncua-postcode-search-modal__count b {
+  color: var(--primary-red-450);
+}
+
+.ncua-postcode-search-modal__list {
+  padding-inline: var(--padding-inline);
+  margin-block: var(--spacing-m) 0;
+}
+
+.ncua-postcode-search-modal__item {
+  padding: 12px 16px;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+}
+.ncua-postcode-search-modal__item .ncua-radio-field {
+  align-items: center;
+  width: 100%;
+}
+.ncua-postcode-search-modal__item .ncua-radio-field.has-text {
+  gap: 16px;
+  vertical-align: top;
+}
+.ncua-postcode-search-modal__item .ncua-radio-field__input + span {
+  flex: 1;
+}
+.ncua-postcode-search-modal__item + .ncua-postcode-search-modal__item {
+  margin-block-start: 8px;
+}
+.ncua-postcode-search-modal__item:hover {
+  box-shadow: var(--shadow-xs);
+  background-color: var(--gray-50);
+}
+.ncua-postcode-search-modal__item:has(:checked) {
+  border-color: var(--gray-400);
+}
+
+.ncua-postcode-search-modal__addr-line {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-s);
+  font-size: var(--font-size-xs);
+}
+.ncua-postcode-search-modal__addr-line + .ncua-postcode-search-modal__addr-line {
+  margin-block-start: 8px;
+}
+
+.ncua-postcode-search-modal__badge {
+  padding: 1px 4px;
+  width: 41px;
+  height: 18px;
+  border-radius: 4px;
+  color: var(--gray-600);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+  text-align: center;
+  background-color: var(--gray-100);
+}
+
+.ncua-postcode-search-modal__item-road {
+  flex: 1;
+  word-break: break-all;
+}
+
+.ncua-postcode-search-modal__item-zip {
+  flex-shrink: 0;
+  color: var(--gray-500);
+}
+
+.ncua-postcode-search-modal__item-jibun {
+  flex: 1;
+  word-break: break-all;
+}
+
+.ncua-postcode-search-modal__tip {
+  padding-inline: var(--padding-inline);
+  color: var(--gray-500);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+
+.ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-label {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin-block-end: 12px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+
+.ncua-postcode-search-modal__tip-icon {
+  flex-shrink: 0;
+  color: var(--gray-400);
+}
+
+.ncua-postcode-search-modal__tip .ncua-postcode-search-modal__tip-title {
+  margin: 0 0 4px;
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+
+.ncua-postcode-search-modal__tip-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  margin: 0;
+  list-style: disc;
+  padding-left: 0;
+}
+
+.ncua-postcode-search-modal__tip-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-inline-start: 16px;
+}
+.ncua-postcode-search-modal__tip-item::before {
+  content: "•";
+  position: absolute;
+  left: 0;
+}
+
+.ncua-postcode-search-modal__pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  padding-inline: var(--padding-inline);
+}
+.ncua-postcode-search-modal__pagination .ncua-pagination--mo {
+  flex: 1;
+}
+
+.ncua-postcode-search-modal__empty {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xxl) 0;
+}
+
 /* ------------------------------------------------------------------
  * Floating Notification Host
  *
@@ -2611,11 +2864,11 @@
   align-items: center;
   flex-direction: column;
   width: 100%;
-  padding: 16px 24px;
+  padding: 12px 16px 12px 24px;
 }
 @media (max-width: 768px) {
   .ncua-message-notification__container {
-    padding: 16px;
+    padding: 12px 8px 12px 16px;
   }
 }
 .ncua-message-notification__content {
@@ -2649,20 +2902,21 @@
   min-width: 0;
 }
 .ncua-message-notification__title {
-  font-size: var(--font-size-md);
-  line-height: var(--line-heights-md);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-2);
 }
 .ncua-message-notification__supporting-text {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-heights-sm);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-0);
 }
 .ncua-message-notification__actions-container {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   flex-shrink: 0;
+  flex-wrap: wrap;
 }
 @media (max-width: 768px) {
   .ncua-message-notification__actions-container {
@@ -2686,7 +2940,6 @@
   cursor: pointer;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
-  font-weight: var(--font-weights-commerce-sans-0);
 }
 .ncua-message-notification__close-button {
   display: flex;
@@ -2695,23 +2948,22 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: 6px;
   padding: 8px;
   flex-shrink: 0;
 }
 .ncua-message-notification--neutral {
   color: var(--gray-600);
   background-color: var(--gray-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--gray-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--neutral .ncua-message-notification__title {
   color: var(--gray-600);
 }
 .ncua-message-notification--neutral .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--neutral .ncua-notification__action-button {
   color: var(--gray-500);
@@ -2719,22 +2971,18 @@
 .ncua-message-notification--neutral .ncua-notification__action-button--text, .ncua-message-notification--neutral .ncua-notification__action-button--text-gray {
   color: var(--gray-600);
 }
-.ncua-message-notification--neutral .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--error {
   color: var(--primary-red-600);
   background-color: var(--primary-red-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--primary-red-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--error .ncua-message-notification__title {
   color: var(--primary-red-600);
 }
 .ncua-message-notification--error .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--error .ncua-notification__action-button {
   color: var(--primary-red-500);
@@ -2742,22 +2990,18 @@
 .ncua-message-notification--error .ncua-notification__action-button--text, .ncua-message-notification--error .ncua-notification__action-button--text-gray {
   color: var(--primary-red-600);
 }
-.ncua-message-notification--error .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--warning {
   color: var(--orange-600);
   background-color: var(--orange-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--orange-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--warning .ncua-message-notification__title {
   color: var(--orange-600);
 }
 .ncua-message-notification--warning .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--warning .ncua-notification__action-button {
   color: var(--orange-500);
@@ -2765,22 +3009,18 @@
 .ncua-message-notification--warning .ncua-notification__action-button--text, .ncua-message-notification--warning .ncua-notification__action-button--text-gray {
   color: var(--orange-600);
 }
-.ncua-message-notification--warning .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification--success {
   color: var(--green-600);
   background-color: var(--green-50);
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid var(--green-300);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow-md);
 }
 .ncua-message-notification--success .ncua-message-notification__title {
   color: var(--green-600);
 }
 .ncua-message-notification--success .ncua-message-notification__supporting-text {
   color: var(--gray-500);
-  opacity: 0.8;
 }
 .ncua-message-notification--success .ncua-notification__action-button {
   color: var(--green-500);
@@ -2788,9 +3028,6 @@
 .ncua-message-notification--success .ncua-notification__action-button--text, .ncua-message-notification--success .ncua-notification__action-button--text-gray {
   color: var(--green-600);
 }
-.ncua-message-notification--success .ncua-message-notification__hide-link {
-  color: var(--gray-500);
-}
 .ncua-message-notification .ncua-notification__action-button {
   background: transparent;
   border: none;
@@ -2803,6 +3040,10 @@
 .ncua-message-notification .ncua-notification__action-button--text, .ncua-message-notification .ncua-notification__action-button--text-gray {
   font-weight: var(--font-weights-commerce-sans-1);
 }
+.ncua-message-notification .ncua-message-notification__hide-link.ncua-notification__action-button {
+  color: var(--gray-500);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
 
 .ncua-callout-notification {
   display: flex;
@@ -3846,8 +4087,8 @@
   margin-top: 0;
 }
 .ncua-pagination__page-num {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
   display: inline-flex;
   justify-content: center;
   align-items: center;
@@ -3899,6 +4140,7 @@
   color: var(--gray-400);
 }
 .ncua-pagination--mo .ncua-pagination__current-num {
+  margin-inline-end: 5px;
   font-style: normal;
   color: var(--gray-700);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.21-alpha.1",
+  "version": "1.8.21-alpha.11",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",