@exem-ui/react 0.3.4-next.20260615013551 → 0.3.4-next.20260622055505

package/dist/index.d.mts

@@ -567,7 +567,7 @@ declare function ScrollBar({ className, orientation, ...props }: React__default.
  */
 declare function ScrollArea({ className, children, onScroll, scrollRef, hideVerticalScrollbar, hideHorizontalScrollbar, disableHorizontalScroll, ...props }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
 
-type ModalSize = 'small' | 'medium' | 'large' | 'xlarge' | 'fullsize';
+type ModalSize = 'default' | 'fullsize';
 type ModalRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
 type ModalTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
 type ModalPortalProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
@@ -575,7 +575,7 @@ type ModalOverlayProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
 type ModalContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     /**
      * 모달 크기
-     * @default 'medium'
+     * @default 'default'
      */
     size?: ModalSize;
 };
@@ -587,10 +587,12 @@ type ModalHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
      */
     line?: boolean;
     /**
-     * 닫기 아이콘 표시 여부
-     * @default true
+     * 헤더 오른쪽 끝 영역에 렌더링할 콘텐츠
+     * - `undefined` (미전달): 기본 닫기(X) 아이콘 렌더링
+     * - `null`: 닫기 버튼 없이 빈 영역 (기존 `showCloseIcon={false}` 대응)
+     * - `ReactNode`: 전달된 콘텐츠로 대체 (닫기 동작이 필요하면 `Modal.Close`를 직접 포함)
      */
-    showCloseIcon?: boolean;
+    rightSlot?: React__default.ReactNode;
 };
 type ModalBodyProps = React__default.HTMLAttributes<HTMLDivElement>;
 type ModalFooterProps = React__default.HTMLAttributes<HTMLDivElement> & {

package/dist/index.d.ts

@@ -567,7 +567,7 @@ declare function ScrollBar({ className, orientation, ...props }: React__default.
  */
 declare function ScrollArea({ className, children, onScroll, scrollRef, hideVerticalScrollbar, hideHorizontalScrollbar, disableHorizontalScroll, ...props }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
 
-type ModalSize = 'small' | 'medium' | 'large' | 'xlarge' | 'fullsize';
+type ModalSize = 'default' | 'fullsize';
 type ModalRootProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
 type ModalTriggerProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
 type ModalPortalProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>;
@@ -575,7 +575,7 @@ type ModalOverlayProps = React__default.ComponentPropsWithoutRef<typeof DialogPr
 type ModalContentProps = React__default.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     /**
      * 모달 크기
-     * @default 'medium'
+     * @default 'default'
      */
     size?: ModalSize;
 };
@@ -587,10 +587,12 @@ type ModalHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
      */
     line?: boolean;
     /**
-     * 닫기 아이콘 표시 여부
-     * @default true
+     * 헤더 오른쪽 끝 영역에 렌더링할 콘텐츠
+     * - `undefined` (미전달): 기본 닫기(X) 아이콘 렌더링
+     * - `null`: 닫기 버튼 없이 빈 영역 (기존 `showCloseIcon={false}` 대응)
+     * - `ReactNode`: 전달된 콘텐츠로 대체 (닫기 동작이 필요하면 `Modal.Close`를 직접 포함)
      */
-    showCloseIcon?: boolean;
+    rightSlot?: React__default.ReactNode;
 };
 type ModalBodyProps = React__default.HTMLAttributes<HTMLDivElement>;
 type ModalFooterProps = React__default.HTMLAttributes<HTMLDivElement> & {

package/dist/index.js

@@ -1682,13 +1682,7 @@ var MODAL_PADDING = {
   body: "px-4 pb-4",
   footer: "px-4 py-3"
 };
-var MODAL_EDGE_GAP = {
-  small: "[--modal-edge-gap:16px]",
-  medium: "[--modal-edge-gap:16px]",
-  large: "[--modal-edge-gap:40px]",
-  xlarge: "[--modal-edge-gap:40px]"
-};
-var ModalContext = React.createContext({ size: "medium" });
+var ModalContext = React.createContext({ size: "default" });
 var ModalRoot = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { ...props });
 var Modal = ModalRoot;
 Modal.Trigger = React.forwardRef(
@@ -1722,14 +1716,8 @@ Modal.Overlay = React.forwardRef(
   )
 );
 Modal.Content = React.forwardRef(
-  ({ className, children, size = "medium", onInteractOutside, onFocusOutside, ...props }, ref) => {
+  ({ className, children, size = "default", onInteractOutside, onFocusOutside, ...props }, ref) => {
     const isFullSize = size === "fullsize";
-    const sizeWidthMap = {
-      small: "max-w-[min(640px,calc(100vw-var(--modal-edge-gap)))]",
-      medium: "max-w-[min(800px,calc(100vw-var(--modal-edge-gap)))]",
-      large: "max-w-[min(960px,calc(100vw-var(--modal-edge-gap)))]",
-      xlarge: "max-w-[min(1120px,calc(100vw-var(--modal-edge-gap)))]"
-    };
     const shouldPreventDismissForSelect = (target) => {
       const isSelectOpen = Boolean(
         document.querySelector('[data-radix-select-content][data-state="open"]')
@@ -1762,12 +1750,7 @@ Modal.Content = React.forwardRef(
             // fullsize일 때
             isFullSize ? "inset-0 m-10" : (
               // 일반 모달일 때
-              utils.cn(
-                "left-[50%] top-[50%] w-full max-h-[90vh] translate-x-[-50%] translate-y-[-50%] shadow-strong data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-                // max-width 계산에서 참조하는 --modal-edge-gap 변수를 같은 요소에 정의
-                MODAL_EDGE_GAP[size],
-                sizeWidthMap[size]
-              )
+              "left-[50%] top-[50%] max-w-[calc(100vw-32px)] max-h-[calc(100vh-80px)] w-[800px] h-[560px] translate-x-[-50%] translate-y-[-50%] shadow-strong data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]"
             ),
             className
           ),
@@ -1780,34 +1763,30 @@ Modal.Content = React.forwardRef(
   }
 );
 Modal.Header = React.forwardRef(
-  ({ className, line = false, showCloseIcon = true, children, ...props }, ref) => {
-    const { size } = React.useContext(ModalContext);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: utils.cn(
-          "flex shrink-0 flex-row items-center gap-2 pl-4 pr-3",
-          line && "border-b border-border-primary",
-          size === "fullsize" ? "h-16" : "h-14",
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children }),
-          showCloseIcon && /* @__PURE__ */ jsxRuntime.jsx(
-            DialogPrimitive__namespace.Close,
-            {
-              className: utils.cn(
-                "flex shrink-0 items-center justify-center size-8 rounded-medium text-icon-secondary transition-colors hover:bg-elevation-elevation-2 focus:outline-none disabled:pointer-events-none"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(chunkTAZFRRWT_js.X, { type: "regular", size: 20 })
-            }
-          )
-        ]
-      }
-    );
-  }
+  ({ className, line = false, rightSlot, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: utils.cn(
+        "flex shrink-0 flex-row items-center gap-2 pl-4 pr-2 min-h-12",
+        line && "border-b border-border-primary",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-row items-center gap-1", children }),
+        rightSlot === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          DialogPrimitive__namespace.Close,
+          {
+            className: utils.cn(
+              "flex shrink-0 items-center justify-center size-8 rounded-medium text-icon-secondary transition-colors hover:bg-elevation-elevation-2 focus:outline-none disabled:pointer-events-none"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(chunkTAZFRRWT_js.X, { type: "regular", size: 20 })
+          }
+        ) : rightSlot
+      ]
+    }
+  )
 );
 Modal.Body = React.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1824,62 +1803,39 @@ Modal.Body = React.forwardRef(
   )
 );
 Modal.Footer = React.forwardRef(
-  ({ className, line = true, ...props }, ref) => {
-    const { size } = React.useContext(ModalContext);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: utils.cn(
-          "flex flex-row items-center justify-between",
-          line && "border-t border-border-primary",
-          size === "fullsize" ? "gap-3" : "h-14 gap-3",
-          MODAL_PADDING.footer,
-          className
-        ),
-        ...props
-      }
-    );
-  }
+  ({ className, line = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: utils.cn(
+        "flex flex-row items-center justify-between min-h-14 gap-3",
+        line && "border-t border-border-primary",
+        MODAL_PADDING.footer,
+        className
+      ),
+      ...props
+    }
+  )
 );
 Modal.FooterDescription = React.forwardRef(
-  ({ className, error = false, icon, children, ...props }, ref) => {
-    const { size } = React.useContext(ModalContext);
-    const isLargeFooter = size === "fullsize";
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: utils.cn(
-          "flex flex-row items-center gap-1",
-          isLargeFooter ? "text-body-2" : "text-body-3",
-          error ? "text-text-critical" : "text-text-tertiary",
-          className
-        ),
-        ...props,
-        children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 size-4 items-center justify-center [&>svg]:size-4", children: icon }),
-          children
-        ]
-      }
-    );
-  }
-);
-Modal.Actions = React.forwardRef(({ className, ...props }, ref) => {
-  const { size } = React.useContext(ModalContext);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  ({ className, error = false, icon, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
       className: utils.cn(
-        "ml-auto flex flex-row items-center",
-        size === "fullsize" ? "gap-3" : "gap-2",
+        "flex flex-row items-center gap-1 text-body-3",
+        error ? "text-text-critical" : "text-text-tertiary",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 size-4 items-center justify-center [&>svg]:size-4", children: icon }),
+        children
+      ]
     }
-  );
-});
+  )
+);
+Modal.Actions = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("ml-auto flex flex-row items-center gap-2", className), ...props }));
 Modal.Action = React.forwardRef(
   ({ color = "primary", size, ...props }, ref) => {
     const { size: modalSize } = React.useContext(ModalContext);