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

package/dist/types/src/components/feedback-and-status/badge/Badge.d.ts

@@ -16,4 +16,4 @@ type BadgeProps = {
 };
 declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export { Badge };
-export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };
+export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };

package/dist/types/src/components/overlays/modal/Modal.d.ts

@@ -12,12 +12,14 @@ type ModalProps = {
     children: ReactNode;
     closeOnBackdropClick?: boolean;
     closeOnEsc?: boolean;
+    showHeaderDivider?: boolean;
+    showActionsDivider?: boolean;
     className?: string;
     zIndex?: number;
 };
 declare const Modal: {
-    ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
-    Header({ children, onClose, featuredIcon, title, subtitle, align, showDivider, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, showHeaderDivider, showActionsDivider, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
+    Header({ children, onClose, featuredIcon, title, subtitle, align, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
     Content({ children, className }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
     /**
      * Modal.Actions - The actions area of the modal
@@ -47,7 +49,7 @@ declare const Modal: {
      *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
      * </Modal.Actions>
      */
-    Actions({ children, layout, showDivider, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
+    Actions({ children, layout, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
 };
 type ModalHeaderProps = {
     children?: ReactNode;
@@ -60,7 +62,6 @@ type ModalHeaderProps = {
     align?: ModalHeaderAlign;
     title?: string | ReactNode;
     subtitle?: string | ReactNode;
-    showDivider?: boolean;
     hideCloseButton?: boolean;
 };
 type ModalContentProps = {
@@ -71,7 +72,6 @@ type ModalActionsProps = {
     className?: string;
     children: ReactNode;
     layout?: ModalActionsLayout;
-    showDivider?: boolean;
     align?: ModalActionsAlign;
     checkboxContent?: ReactNode;
 };

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

@@ -67,9 +67,6 @@
   --shadow-xs-focused-3px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #ffeaee;
   --shadow-xs-focused-3px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #f2f4f7;
   --shadow-xs-focused-3px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #fee4e2;
-  --shadow-xs-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
-  --shadow-xs-focused-4px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f2f4f7;
-  --shadow-xs-focused-4px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #fee4e2;
   --shadow-sm: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;
   --shadow-sm-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
   --shadow-sm-focused-4px-gray-100: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f2f4f7;
@@ -126,6 +123,7 @@
      spinner       (200)   — 부분 로딩 표시
      popover       (500)   — dropdown · select-dropdown 등 부유 popover
                              (Portal 미사용, 부모 stacking context 안에서 동작)
+                             단 dropdown__menu 는 운영 영향으로 전역 적용 보류 — 현재 DataGrid ActionBar 한정
      dnd-preview   (600)   — table row DnD 드래그 오버레이 — popover 위, modal 아래
      modal         (1000)  — 작업 차단 다이얼로그. backdrop이 stacking context를 만들고
                              자식인 본체는 자연 stacking으로 따라가므로 단일 토큰으로 충분
@@ -326,7 +324,7 @@ button {
   background-color: var(--primary-red-450);
   border: 1px solid var(--primary-red-500);
   color: var(--base-white);
-  box-shadow: var(--shadow-xs-focused-4px-primary-100);
+  box-shadow: var(--shadow-sm-focused-4px-primary-100);
 }
 .ncua-btn--primary:disabled, .ncua-btn--primary.is-disable {
   background-color: var(--primary-red-100);
@@ -372,7 +370,7 @@ button {
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
   color: var(--gray-700);
-  box-shadow: var(--shadow-xs-focused-4px-gray-100);
+  box-shadow: var(--shadow-sm-focused-4px-gray-100);
 }
 .ncua-btn--secondary-gray:disabled, .ncua-btn--secondary-gray.is-disable {
   background-color: var(--base-white);
@@ -958,7 +956,7 @@ button {
 }
 .ncua-checkbox-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-checkbox-input:hover {
   border-color: var(--gray-600);
@@ -1739,7 +1737,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input.destructive:where(:focus-within) .ncua-input__field {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-input.is-disabled .ncua-input__content > :not(button) {
   background-color: var(--gray-50);
@@ -1929,7 +1927,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input--textarea.destructive textarea:focus {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 
 .ncua-input--textarea--xs textarea {
@@ -2077,6 +2075,20 @@ button {
   }
 }
 
+.ncua-modal--divider-header .ncua-modal__header {
+  border-block-end: 1px solid var(--gray-100);
+}
+.ncua-modal--divider-header .ncua-modal__content {
+  padding-block-start: 16px;
+}
+
+.ncua-modal--divider-actions .ncua-modal__actions-wrapper {
+  border-block-start: 1px solid var(--gray-100);
+}
+.ncua-modal--divider-actions .ncua-modal__content {
+  padding-block-end: 16px;
+}
+
 .ncua-modal__header {
   padding: 0px 20px 16px;
   border-bottom: none;
@@ -2085,12 +2097,6 @@ button {
   flex-direction: column;
   gap: 8px;
 }
-.ncua-modal__header-divider {
-  width: 100%;
-  height: 1px;
-  background-color: var(--gray-100);
-  margin: 0 0 16px;
-}
 .ncua-modal__header:has(.ncua-modal__close-button) {
   padding-right: 48px;
 }
@@ -2183,12 +2189,6 @@ button {
   display: flex;
   gap: 8px;
 }
-.ncua-modal__actions-divider {
-  width: 100%;
-  height: 1px;
-  background-color: var(--gray-100);
-  margin: 16px 0 0;
-}
 .ncua-modal__actions--vertical {
   flex-direction: column;
 }
@@ -2265,8 +2265,8 @@ button {
   }
 }
 
-.ncua-modal:has(.ncua-postcode-search-modal) .ncua-modal__header-divider {
-  margin: 0;
+.ncua-modal--divider-header:has(.ncua-postcode-search-modal) .ncua-modal__content {
+  padding-block-start: 0;
 }
 
 .ncua-modal__content:has(.ncua-postcode-search-modal) {
@@ -3183,7 +3183,7 @@ button {
 }
 .ncua-radio-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 
 .ncua-radio-field {
@@ -3685,7 +3685,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-select.destructive .ncua-select__content:focus-within {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-select--xs .ncua-select__content {
   height: var(--select-height-xs);
@@ -4007,7 +4007,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-selectbox.destructive .ncua-selectbox__content:focus {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-selectbox--xs .ncua-selectbox__content {
   height: var(--select-height-xs);
@@ -5300,15 +5300,16 @@ button {
   justify-content: center;
   color: var(--pink-600);
   background-color: var(--pink-200);
-  border-radius: 5px;
 }
 .ncua-badge--new-badge-sm {
   width: 16px;
   height: 16px;
+  border-radius: 3px;
 }
 .ncua-badge--new-badge-md {
   width: 20px;
   height: 20px;
+  border-radius: 4px;
 }
 
 .ncua-badge-group {
@@ -6570,7 +6571,7 @@ button {
   bottom: 0;
   width: 3px;
   background: var(--base-black);
-  z-index: 1;
+  z-index: var(--z-index-1);
 }
 .ncua-table__row--warning.ncua-table__row--selected:nth-child(n) {
   background: var(--orange-50);
@@ -6715,7 +6716,7 @@ button {
 .ncua-table--fixed-header .ncua-table__header-cell {
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: var(--z-index-sticky);
   padding: 0 var(--spacing-m);
   height: var(--ncua-table-header-height);
 }
@@ -7051,7 +7052,9 @@ button {
   padding: var(--spacing-s) 24px;
   background-color: var(--gray-50);
   position: relative;
-  z-index: var(--z-index-2);
+}
+.ncua-data-grid__action-bar .ncua-dropdown__menu {
+  z-index: var(--z-index-popover);
 }
 .ncua-data-grid__action-bar:empty {
   padding: var(--spacing-xs) 0;

package/package.json

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