@mondrianai/runyourai-design-system 0.0.29 → 0.0.31

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 함수를 인자로 받아 원하는 요소에 직접 연결.
@@ -648,17 +650,19 @@ interface ModalProps {
      * 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 기본: "확인") */
@@ -683,7 +687,7 @@ interface ModalProps {
  * modal=false로 모달 격리를 해제하고 SDK를 소유한 원본 콘텐츠를 유지한다.
  * 외부 포털과 stacking level을 조율할 때는 className과 overlayClassName을 함께 사용한다.
  */
-declare function Modal({ id, trigger, open: openProp, onOpenChange, modal, variant, title, description, showCloseButton, children, cancelButtonProps, confirmButtonProps, onConfirm, onCancel, closeOnOverlayClick, overlayClassName, className, }: ModalProps): react_jsx_runtime.JSX.Element;
+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 함수를 인자로 받아 원하는 요소에 직접 연결.
@@ -648,17 +650,19 @@ interface ModalProps {
      * 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 기본: "확인") */
@@ -683,7 +687,7 @@ interface ModalProps {
  * modal=false로 모달 격리를 해제하고 SDK를 소유한 원본 콘텐츠를 유지한다.
  * 외부 포털과 stacking level을 조율할 때는 className과 overlayClassName을 함께 사용한다.
  */
-declare function Modal({ id, trigger, open: openProp, onOpenChange, modal, variant, title, description, showCloseButton, children, cancelButtonProps, confirmButtonProps, onConfirm, onCancel, closeOnOverlayClick, overlayClassName, className, }: ModalProps): react_jsx_runtime.JSX.Element;
+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,6 +4395,7 @@ function withIconSize(icon) {
 }
 function Modal({
   id,
+  size = "lg",
   trigger,
   open: openProp,
   onOpenChange,
@@ -4402,8 +4403,9 @@ function Modal({
   variant = "confirm",
   title,
   description,
-  showCloseButton = true,
+  showCloseButton = false,
   children,
+  footer,
   cancelButtonProps,
   confirmButtonProps,
   onConfirm,
@@ -4512,40 +4514,32 @@ function Modal({
           },
           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",
-            "bg-background border border-border rounded-2xl shadow-modal flex flex-col gap-4 p-6",
+            "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 p-5",
             "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",
             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: "mt-3 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: "mt-4 flex gap-2 items-center justify-end w-full", children: footer }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { "data-slot": "modal-footer", className: "mt-4 flex gap-2 items-center justify-end w-full", children: [
               /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                 Button,
                 {