@mondrianai/runyourai-design-system 0.0.27 → 0.0.29

package/dist/index.d.mts

@@ -635,6 +635,15 @@ interface ModalProps {
     open?: boolean;
     /** controlled 모드에서 열림 상태 변경 콜백 */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * 포커스·배경 상호작용 격리 여부 (기본: true).
+     * 외부 SDK가 별도 포털/iframe을 열면 false로 설정한다. 외부 포커스/클릭으로
+     * 원본 콘텐츠를 닫지 않으며, 딤 클릭은 closeOnOverlayClick을 따른다.
+     * SDK가 초기 포커스를, 소비 앱이 SDK 종료 후 포커스 복구를 담당한다.
+     * false에서는 배경의 키보드 상호작용도 소비 앱이 별도로 차단해야 한다.
+     * 열린 동안 값을 변경하면 콘텐츠가 재마운트되므로 고정해서 사용한다.
+     */
+    modal?: boolean;
     /**
      * footer 버튼 렌더 방식
      * confirm  — 취소 + default(검정) 확인 버튼
@@ -664,10 +673,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, trigger, open: openProp, onOpenChange, modal, variant, title, description, showCloseButton, children, 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

@@ -635,6 +635,15 @@ interface ModalProps {
     open?: boolean;
     /** controlled 모드에서 열림 상태 변경 콜백 */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * 포커스·배경 상호작용 격리 여부 (기본: true).
+     * 외부 SDK가 별도 포털/iframe을 열면 false로 설정한다. 외부 포커스/클릭으로
+     * 원본 콘텐츠를 닫지 않으며, 딤 클릭은 closeOnOverlayClick을 따른다.
+     * SDK가 초기 포커스를, 소비 앱이 SDK 종료 후 포커스 복구를 담당한다.
+     * false에서는 배경의 키보드 상호작용도 소비 앱이 별도로 차단해야 한다.
+     * 열린 동안 값을 변경하면 콘텐츠가 재마운트되므로 고정해서 사용한다.
+     */
+    modal?: boolean;
     /**
      * footer 버튼 렌더 방식
      * confirm  — 취소 + default(검정) 확인 버튼
@@ -664,10 +673,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, trigger, open: openProp, onOpenChange, modal, variant, title, description, showCloseButton, children, 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

@@ -1054,7 +1054,7 @@ function AvatarGroup({ avatars, size = "md", className }) {
 
 // src/components/ui/badge.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var TEXT_BADGE_BASE = "inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full px-2.5 py-1 text-sm font-medium leading-5 tracking-tight whitespace-nowrap";
+var TEXT_BADGE_BASE = "inline-flex h-7 w-fit shrink-0 items-center justify-center gap-1 rounded-full px-2.5 py-1 text-sm font-medium leading-5 tracking-tight whitespace-nowrap";
 var BADGE_ICON_BASE = "size-4";
 var BADGE_VARIANT_STYLES = {
   default: "bg-primary text-primary-foreground",
@@ -4398,6 +4398,7 @@ function Modal({
   trigger,
   open: openProp,
   onOpenChange,
+  modal = true,
   variant = "confirm",
   title,
   description,
@@ -4408,6 +4409,7 @@ function Modal({
   onConfirm,
   onCancel,
   closeOnOverlayClick = true,
+  overlayClassName,
   className
 }) {
   const {
@@ -4430,6 +4432,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 +4475,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,6 +4504,10 @@ function Modal({
             if (loadingRef.current) e.preventDefault();
           },
           onInteractOutside: (e) => {
+            if (!modal) {
+              e.preventDefault();
+              return;
+            }
             if (!closeOnOverlayClick || loadingRef.current) e.preventDefault();
           },
           className: cn(
@@ -4742,7 +4757,8 @@ function NumberBadge({
       className: cn(
         NUMBER_BADGE_BASE,
         sizeClass,
-        "tracking-tight",
+        // Figma(665:2024): outline_number 만 tracking-normal, 나머지는 tracking-tight
+        variant === "outline" ? "tracking-normal" : "tracking-tight",
         BADGE_VARIANT_STYLES[variant],
         className
       ),