@ncds/ui-admin 1.8.21-alpha.12 → 1.8.21-alpha.14

package/dist/types/src/components/overlays/notification/CalloutNotification.d.ts

@@ -1,9 +1,11 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import type { NotificationColor } from './Notification';
+type CalloutNotificationWidth = 'full' | 'fit';
 interface CalloutNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     color?: NotificationColor;
     title?: ReactNode;
+    width?: CalloutNotificationWidth;
 }
 declare const CalloutNotification: import("react").ForwardRefExoticComponent<CalloutNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
-export type { CalloutNotificationProps };
+export type { CalloutNotificationProps, CalloutNotificationWidth };
 export { CalloutNotification };

package/dist/types/src/components/overlays/notification/Notification.d.ts

@@ -2,7 +2,7 @@ import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
 import type { ColorTone } from '../../../../constant/color';
 import type { SlotIconComponent } from '../../../types/side-slot';
 import type { ButtonTheme } from '../../action/button';
-import { type CalloutNotificationProps } from './CalloutNotification';
+import { type CalloutNotificationProps, type CalloutNotificationWidth } from './CalloutNotification';
 type NotificationType = 'floating' | 'full-width' | 'message' | 'callout';
 type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
 type NotificationSize = 'desktop' | 'mobile';
@@ -76,6 +76,16 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
      * 표기가 통일되어 있지 않은 것은 현행 유지이며, 통일은 별도 결정 사항이다.
      */
     hidePermanentlyLabel?: ReactNode;
+    /**
+     * supportingText 에 연결할 링크 URL (선택사항)
+     * full-width 타입에서 사용 가능
+     */
+    supportTextLink?: string;
+    /**
+     * 너비 동작 (선택사항)
+     * callout 타입에서만 사용 가능. 미지정 시 부모 너비를 채운다(100%). 'fit' 은 콘텐츠 너비에 맞춘다
+     */
+    width?: CalloutNotificationWidth;
     /**
      * Portal 마운트 여부. `floating` 타입에서만 동작한다.
      *
@@ -92,5 +102,5 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
 }
 declare const Notification: import("react").ForwardRefExoticComponent<NotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { NotificationType, NotificationColor, NotificationSize, NotificationAction, NotificationProps };
-export type { CalloutNotificationProps };
+export type { CalloutNotificationProps, CalloutNotificationWidth };
 export { Notification };

package/dist/types/src/components/overlays/notification/__tests__/CalloutNotification.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/overlays/notification/__tests__/Notification.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -2333,7 +2333,7 @@ button {
 
 .ncua-postcode-search-modal__list {
   padding-inline: var(--padding-inline);
-  margin-block: var(--spacing-m) 0;
+  margin-block: 8px 0;
 }
 
 .ncua-postcode-search-modal__item {
@@ -2402,6 +2402,7 @@ button {
 }
 
 .ncua-postcode-search-modal__tip {
+  margin-inline-start: 6px;
   padding-inline: var(--padding-inline);
   color: var(--gray-500);
   font-size: var(--font-size-xxs);
@@ -2448,6 +2449,14 @@ button {
   left: 0;
 }
 
+.ncua-postcode-search-modal__tip-combination {
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+
+.ncua-postcode-search-modal__tip-example {
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+
 .ncua-postcode-search-modal__pagination {
   display: flex;
   justify-content: center;
@@ -3065,6 +3074,13 @@ button {
   line-height: var(--line-heights-md);
   font-weight: var(--font-weights-commerce-sans-0);
 }
+.ncua-callout-notification--full {
+  width: 100%;
+}
+.ncua-callout-notification--fit {
+  width: fit-content;
+  max-width: 100%;
+}
 .ncua-callout-notification--info {
   background-color: var(--blue-50);
   border-color: var(--blue-200);

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

@@ -2325,7 +2325,7 @@
 
 .ncua-postcode-search-modal__list {
   padding-inline: var(--padding-inline);
-  margin-block: var(--spacing-m) 0;
+  margin-block: 8px 0;
 }
 
 .ncua-postcode-search-modal__item {
@@ -2394,6 +2394,7 @@
 }
 
 .ncua-postcode-search-modal__tip {
+  margin-inline-start: 6px;
   padding-inline: var(--padding-inline);
   color: var(--gray-500);
   font-size: var(--font-size-xxs);
@@ -2440,6 +2441,14 @@
   left: 0;
 }
 
+.ncua-postcode-search-modal__tip-combination {
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+
+.ncua-postcode-search-modal__tip-example {
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+
 .ncua-postcode-search-modal__pagination {
   display: flex;
   justify-content: center;
@@ -3057,6 +3066,13 @@
   line-height: var(--line-heights-md);
   font-weight: var(--font-weights-commerce-sans-0);
 }
+.ncua-callout-notification--full {
+  width: 100%;
+}
+.ncua-callout-notification--fit {
+  width: fit-content;
+  max-width: 100%;
+}
 .ncua-callout-notification--info {
   background-color: var(--blue-50);
   border-color: var(--blue-200);

package/package.json

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