@mondrianai/runyourai-design-system 0.0.28 → 0.0.30

package/dist/index.d.mts

@@ -622,6 +622,8 @@ interface ModalButtonProps {
 }
 interface ModalProps {
     id?: string;
+    /** 패널 너비: sm 400px / md 430px / lg 480px (기본: lg) */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * 모달을 여는 트리거 — render prop 패턴.
      * open 함수를 인자로 받아 원하는 요소에 직접 연결.
@@ -635,21 +637,32 @@ interface ModalProps {
     open?: boolean;
     /** controlled 모드에서 열림 상태 변경 콜백 */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * 포커스·배경 상호작용 격리 여부 (기본: true).
+     * 외부 SDK가 별도 포털/iframe을 열면 false로 설정한다. 외부 포커스/클릭으로
+     * 원본 콘텐츠를 닫지 않으며, 딤 클릭은 closeOnOverlayClick을 따른다.
+     * SDK가 초기 포커스를, 소비 앱이 SDK 종료 후 포커스 복구를 담당한다.
+     * false에서는 배경의 키보드 상호작용도 소비 앱이 별도로 차단해야 한다.
+     * 열린 동안 값을 변경하면 콘텐츠가 재마운트되므로 고정해서 사용한다.
+     */
+    modal?: boolean;
     /**
      * footer 버튼 렌더 방식
      * confirm  — 취소 + default(검정) 확인 버튼
      * danger   — 취소 + destructive(빨강) 확인 버튼
-     * dialog   — footer 없음 (children으로 모든 콘텐츠 처리)
+     * dialog   — 기본 버튼 없음 (필요하면 footer로 직접 제공)
      */
     variant?: 'confirm' | 'danger' | 'dialog';
     /** 모달 제목 */
     title: string;
-    /** 제목 아래 부제목 (선택) */
+    /** 본문 첫 항목으로 표시하는 설명 (선택) */
     description?: string;
-    /** 우상단 X 닫기 버튼 표시 여부 (기본: true) */
+    /** 우상단 X 닫기 버튼 표시 여부 (기본: false). 기본 닫기는 footer·ESC·오버레이를 사용한다. */
     showCloseButton?: boolean;
-    /** 모달 본문 */
+    /** 모달 본문. 직접 자식 항목 사이에는 12px 간격이 적용된다. 중첩 그룹도 gap-3을 사용한다. */
     children?: React$1.ReactNode;
+    /** dialog 변형의 하단 버튼. 본문과 16px 간격을 적용한다. */
+    footer?: React$1.ReactNode;
     /** 취소 버튼 커스터마이즈 (label 기본: "취소") */
     cancelButtonProps?: ModalButtonProps;
     /** 확인 버튼 커스터마이즈 (label 기본: "확인") */
@@ -664,10 +677,17 @@ interface ModalProps {
     onCancel?: () => void;
     /** 오버레이 클릭 시 닫기 (기본: true) */
     closeOnOverlayClick?: boolean;
+    /** 모달 오버레이에 추가할 className (예: 외부 포털보다 낮은 stacking level 지정) */
+    overlayClassName?: string;
     /** 모달 패널에 추가할 className */
     className?: string;
 }
-declare function Modal({ id, trigger, open: openProp, onOpenChange, variant, title, description, showCloseButton, children, cancelButtonProps, confirmButtonProps, onConfirm, onCancel, closeOnOverlayClick, className, }: ModalProps): react_jsx_runtime.JSX.Element;
+/**
+ * 앱의 확인/입력 다이얼로그를 렌더링한다. 기본은 모달이며, 외부 SDK 연동 시
+ * modal=false로 모달 격리를 해제하고 SDK를 소유한 원본 콘텐츠를 유지한다.
+ * 외부 포털과 stacking level을 조율할 때는 className과 overlayClassName을 함께 사용한다.
+ */
+declare function Modal({ id, size, trigger, open: openProp, onOpenChange, modal, variant, title, description, showCloseButton, children, footer, cancelButtonProps, confirmButtonProps, onConfirm, onCancel, closeOnOverlayClick, overlayClassName, className, }: ModalProps): react_jsx_runtime.JSX.Element;
 
 declare const Menubar: React$1.ForwardRefExoticComponent<Omit<Menubar$1.MenubarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const MenubarMenu: {

package/dist/index.d.ts

@@ -622,6 +622,8 @@ interface ModalButtonProps {
 }
 interface ModalProps {
     id?: string;
+    /** 패널 너비: sm 400px / md 430px / lg 480px (기본: lg) */
+    size?: 'sm' | 'md' | 'lg';
     /**
      * 모달을 여는 트리거 — render prop 패턴.
      * open 함수를 인자로 받아 원하는 요소에 직접 연결.
@@ -635,21 +637,32 @@ interface ModalProps {
     open?: boolean;
     /** controlled 모드에서 열림 상태 변경 콜백 */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * 포커스·배경 상호작용 격리 여부 (기본: true).
+     * 외부 SDK가 별도 포털/iframe을 열면 false로 설정한다. 외부 포커스/클릭으로
+     * 원본 콘텐츠를 닫지 않으며, 딤 클릭은 closeOnOverlayClick을 따른다.
+     * SDK가 초기 포커스를, 소비 앱이 SDK 종료 후 포커스 복구를 담당한다.
+     * false에서는 배경의 키보드 상호작용도 소비 앱이 별도로 차단해야 한다.
+     * 열린 동안 값을 변경하면 콘텐츠가 재마운트되므로 고정해서 사용한다.
+     */
+    modal?: boolean;
     /**
      * footer 버튼 렌더 방식
      * confirm  — 취소 + default(검정) 확인 버튼
      * danger   — 취소 + destructive(빨강) 확인 버튼
-     * dialog   — footer 없음 (children으로 모든 콘텐츠 처리)
+     * dialog   — 기본 버튼 없음 (필요하면 footer로 직접 제공)
      */
     variant?: 'confirm' | 'danger' | 'dialog';
     /** 모달 제목 */
     title: string;
-    /** 제목 아래 부제목 (선택) */
+    /** 본문 첫 항목으로 표시하는 설명 (선택) */
     description?: string;
-    /** 우상단 X 닫기 버튼 표시 여부 (기본: true) */
+    /** 우상단 X 닫기 버튼 표시 여부 (기본: false). 기본 닫기는 footer·ESC·오버레이를 사용한다. */
     showCloseButton?: boolean;
-    /** 모달 본문 */
+    /** 모달 본문. 직접 자식 항목 사이에는 12px 간격이 적용된다. 중첩 그룹도 gap-3을 사용한다. */
     children?: React$1.ReactNode;
+    /** dialog 변형의 하단 버튼. 본문과 16px 간격을 적용한다. */
+    footer?: React$1.ReactNode;
     /** 취소 버튼 커스터마이즈 (label 기본: "취소") */
     cancelButtonProps?: ModalButtonProps;
     /** 확인 버튼 커스터마이즈 (label 기본: "확인") */
@@ -664,10 +677,17 @@ interface ModalProps {
     onCancel?: () => void;
     /** 오버레이 클릭 시 닫기 (기본: true) */
     closeOnOverlayClick?: boolean;
+    /** 모달 오버레이에 추가할 className (예: 외부 포털보다 낮은 stacking level 지정) */
+    overlayClassName?: string;
     /** 모달 패널에 추가할 className */
     className?: string;
 }
-declare function Modal({ id, trigger, open: openProp, onOpenChange, variant, title, description, showCloseButton, children, cancelButtonProps, confirmButtonProps, onConfirm, onCancel, closeOnOverlayClick, className, }: ModalProps): react_jsx_runtime.JSX.Element;
+/**
+ * 앱의 확인/입력 다이얼로그를 렌더링한다. 기본은 모달이며, 외부 SDK 연동 시
+ * modal=false로 모달 격리를 해제하고 SDK를 소유한 원본 콘텐츠를 유지한다.
+ * 외부 포털과 stacking level을 조율할 때는 className과 overlayClassName을 함께 사용한다.
+ */
+declare function Modal({ id, size, trigger, open: openProp, onOpenChange, modal, variant, title, description, showCloseButton, children, footer, cancelButtonProps, confirmButtonProps, onConfirm, onCancel, closeOnOverlayClick, overlayClassName, className, }: ModalProps): react_jsx_runtime.JSX.Element;
 
 declare const Menubar: React$1.ForwardRefExoticComponent<Omit<Menubar$1.MenubarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const MenubarMenu: {

package/dist/index.js

@@ -4395,19 +4395,23 @@ function withIconSize(icon) {
 }
 function Modal({
   id,
+  size = "lg",
   trigger,
   open: openProp,
   onOpenChange,
+  modal = true,
   variant = "confirm",
   title,
   description,
-  showCloseButton = true,
+  showCloseButton = false,
   children,
+  footer,
   cancelButtonProps,
   confirmButtonProps,
   onConfirm,
   onCancel,
   closeOnOverlayClick = true,
+  overlayClassName,
   className
 }) {
   const {
@@ -4430,6 +4434,7 @@ function Modal({
   const [openState, setOpenState] = React19.useState(false);
   const open = isControlled ? openProp : openState;
   const [loading, setLoading] = React19.useState(false);
+  const Overlay = modal ? import_radix_ui12.Dialog.Overlay : "div";
   const setOpen = React19.useCallback(
     (next) => {
       if (!isControlled) setOpenState(next);
@@ -4472,17 +4477,25 @@ function Modal({
   );
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
     trigger == null ? void 0 : trigger(() => setOpen(true)),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_radix_ui12.Dialog.Root, { open, onOpenChange: handleRootOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_radix_ui12.Dialog.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_radix_ui12.Dialog.Root, { open, onOpenChange: handleRootOpenChange, modal, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_radix_ui12.Dialog.Portal, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-        import_radix_ui12.Dialog.Overlay,
-        {
+        Overlay,
+        __spreadProps(__spreadValues({}, !modal ? {
+          "data-state": open ? "open" : "closed",
+          "aria-hidden": true
+        } : {}), {
+          onClick: !modal ? (event) => {
+            event.stopPropagation();
+            if (open && closeOnOverlayClick) handleClose();
+          } : void 0,
           className: cn(
             "fixed inset-0 z-50 bg-black/[0.32]",
             "data-[state=open]:animate-in data-[state=closed]:animate-out",
             "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
-            "duration-200 data-[state=closed]:duration-150"
+            "duration-200 data-[state=closed]:duration-150",
+            overlayClassName
           )
-        }
+        })
       ),
       /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
         import_radix_ui12.Dialog.Content,
@@ -4493,11 +4506,16 @@ function Modal({
             if (loadingRef.current) e.preventDefault();
           },
           onInteractOutside: (e) => {
+            if (!modal) {
+              e.preventDefault();
+              return;
+            }
             if (!closeOnOverlayClick || loadingRef.current) e.preventDefault();
           },
           className: cn(
             "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
-            "max-h-[calc(100dvh-2rem)] w-120 overflow-y-auto",
+            "max-h-[calc(100dvh-2rem)] max-w-modal-viewport overflow-y-auto",
+            { sm: "w-100", md: "w-107.5", lg: "w-120" }[size],
             "bg-background border border-border rounded-2xl shadow-modal flex flex-col gap-4 p-6",
             "data-[state=open]:animate-in data-[state=closed]:animate-out",
             "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
@@ -4505,32 +4523,23 @@ function Modal({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-              "div",
-              {
-                className: cn(
-                  "flex flex-col w-full",
-                  description ? "gap-1" : "gap-0"
-                ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-start justify-between w-full", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_radix_ui12.Dialog.Title, { className: "flex-1 text-left text-lg font-semibold leading-7 tracking-tight text-foreground", children: title }),
-                    showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: handleClose,
-                        className: "flex size-5 items-center justify-center ml-2 shrink-0 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "x", className: "size-4 text-foreground" })
-                      }
-                    )
-                  ] }),
-                  description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_radix_ui12.Dialog.Description, { className: "text-sm font-normal leading-5 tracking-tight text-muted-foreground", children: description })
-                ]
-              }
-            ),
-            children && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-full text-left", children }),
-            variant !== "dialog" && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex gap-2 items-center justify-end w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { "data-slot": "modal-header", className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex items-start justify-between w-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_radix_ui12.Dialog.Title, { className: "flex-1 text-left text-lg font-semibold leading-7 tracking-tight text-foreground", children: title }),
+              showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleClose,
+                  className: "flex size-5 items-center justify-center ml-2 shrink-0 opacity-70 hover:opacity-100 transition-opacity cursor-pointer",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "x", className: "size-4 text-foreground" })
+                }
+              )
+            ] }) }),
+            (description || children) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { "data-slot": "modal-body", className: "flex w-full flex-col gap-3 text-left", children: [
+              description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_radix_ui12.Dialog.Description, { className: "text-sm font-normal leading-5 tracking-tight text-muted-foreground", children: description }),
+              children
+            ] }),
+            variant === "dialog" ? footer && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { "data-slot": "modal-footer", className: "flex gap-2 items-center justify-end w-full", children: footer }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { "data-slot": "modal-footer", className: "flex gap-2 items-center justify-end w-full", children: [
               /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 Button,
                 {