sellmate-design-system-react 0.1.10 → 0.2.0

package/dist/components/SConfirmModal/SConfirmModal.d.ts

@@ -16,15 +16,18 @@ export interface SConfirmModalProps {
     /** 제목 위/아래 메시지 목록 */
     topMessage?: string[];
     bottomMessage?: string[];
-    /** 태그 표시 */
+    /** tag 슬롯 기본 태그 레이블 (tagSlot 미지정 시) */
     tagLabel?: string;
     /** 태그 프리셋 (shape/size/color) — sd-confirm-modal tagPreset 대응 */
     tagShape?: STagShape;
     tagSize?: STagSize;
     tagColor?: STagColor;
-    /** 태그 옆 라벨/커스텀 콘텐츠 */
+    /** option 슬롯 기본 텍스트 (optionSlot 미지정 시) */
     slotLabel?: string;
-    children?: ReactNode;
+    /** 콘텐츠 박스 tag 위치 커스텀 콘텐츠 (미지정 시 tagLabel 기반 STag) */
+    tagSlot?: ReactNode;
+    /** 콘텐츠 박스 option 위치 커스텀 콘텐츠 (미지정 시 slotLabel 텍스트) */
+    optionSlot?: ReactNode;
     /** 메인 버튼 */
     mainButtonLabel?: string;
     /** 확인 버튼 프리셋 (없으면 type에 따라 자동 결정) */
@@ -38,4 +41,4 @@ export interface SConfirmModalProps {
     onClose?: () => void;
 }
 /** SConfirmModal — sd-confirm-modal 포팅. 아이콘+제목+메시지+태그+확인/취소 버튼. */
-export declare function SConfirmModal({ open, onOpenChange, persistent, type, modalTitle, titleClass, topMessage, bottomMessage, tagLabel, tagShape, tagSize, tagColor, slotLabel, children, mainButtonLabel, mainButtonName, subButtonLabel, onOk, onCancel, onClose, }: SConfirmModalProps): import("react").JSX.Element;
+export declare function SConfirmModal({ open, onOpenChange, persistent, type, modalTitle, titleClass, topMessage, bottomMessage, tagLabel, tagShape, tagSize, tagColor, slotLabel, tagSlot, optionSlot, mainButtonLabel, mainButtonName, subButtonLabel, onOk, onCancel, onClose, }: SConfirmModalProps): import("react").JSX.Element;

package/dist/components/SConfirmModal/SConfirmModal.js

@@ -17,7 +17,9 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var PortalContainerContext = createContext(null);
+var InsideModalContext = createContext(false);
 var PortalContainerProvider = PortalContainerContext.Provider;
+var InsideModalProvider = InsideModalContext.Provider;
 function usePortalContainer() {
   return useContext(PortalContainerContext) ?? void 0;
 }
@@ -2973,6 +2975,8 @@ function SGhostButton({
   tooltipText,
   disabled = false,
   onClick,
+  anchorClassName,
+  anchorStyle,
   className,
   style
 }) {
@@ -2995,6 +2999,8 @@ function SGhostButton({
   };
   const s = SIZE[size];
   const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const text = (tooltipText ?? "").trim();
+  const hasTooltip = text !== "";
   const btn = /* @__PURE__ */ jsxs(
     "button",
     {
@@ -3035,13 +3041,13 @@ function SGhostButton({
       ]
     }
   );
-  const text = (tooltipText ?? "").trim();
-  if (text === "") return btn;
+  if (!hasTooltip) return btn;
   return /* @__PURE__ */ jsxs(RPopover.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(RPopover.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
       "span",
       {
-        className: "inline-flex",
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
         onMouseEnter: openNow,
         onMouseLeave: startHide,
         onFocus: openNow,
@@ -3125,7 +3131,7 @@ function SModalContainer({
                     className: "absolute right-[16px] top-[16px] z-10"
                   }
                 ),
-                /* @__PURE__ */ jsx(PortalContainerProvider, { value: portalContainer, children })
+                /* @__PURE__ */ jsx(InsideModalProvider, { value: true, children: /* @__PURE__ */ jsx(PortalContainerProvider, { value: portalContainer, children }) })
               ]
             }
           )
@@ -3337,7 +3343,8 @@ function SConfirmModal({
   tagSize = "sm",
   tagColor = "grey",
   slotLabel,
-  children,
+  tagSlot,
+  optionSlot,
   mainButtonLabel = "\uD655\uC778",
   mainButtonName,
   subButtonLabel,
@@ -3347,6 +3354,9 @@ function SConfirmModal({
 }) {
   const iconName = TYPE_ICON[type];
   const mainStyle = MAIN_BUTTON_STYLE[mainButtonName ?? DEFAULT_MAIN_BUTTON[type]];
+  const tagNode = tagSlot ?? (tagLabel ? /* @__PURE__ */ jsx(STag, { shape: tagShape, size: tagSize, color: tagColor, label: tagLabel }) : null);
+  const optionNode = optionSlot ?? (slotLabel ? /* @__PURE__ */ jsx("span", { children: slotLabel }) : null);
+  const hasBody = topMessage.length > 0 || bottomMessage.length > 0 || tagNode != null || optionNode != null;
   return /* @__PURE__ */ jsx(
     SModalContainer,
     {
@@ -3372,15 +3382,12 @@ function SConfirmModal({
               }
             )
           ] }),
-          (topMessage.length > 0 || bottomMessage.length > 0 || tagLabel || slotLabel || children) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[20px] text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-modal-confirm-message-color)]", children: [
+          hasBody && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-[20px] text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-modal-confirm-message-color)] w-full", children: [
             topMessage.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: topMessage.map((m, i) => /* @__PURE__ */ jsx("p", { className: "m-0", children: m }, i)) }),
-            (tagLabel || slotLabel || children) && // content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px]", children: [
-              tagLabel && /* @__PURE__ */ jsx(STag, { shape: tagShape, size: tagSize, color: tagColor, label: tagLabel }),
-              slotLabel && /* @__PURE__ */ jsx("span", { children: slotLabel }),
-              children
-            ] }),
-            bottomMessage.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: bottomMessage.map((m, i) => /* @__PURE__ */ jsx("p", { className: "m-0", children: m }, i)) })
+            tagNode != null && // tag 위치 content-box: 흰 박스 + 1px 테두리 + 패딩 + 14/700 (원본 sd-confirm-modal__content-box)
+            /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-[8px] rounded-[8px] border border-solid border-[color:var(--color-grey-30)] bg-white px-[16px] py-[12px] text-[14px] font-bold leading-[22px] w-full", children: tagNode }),
+            bottomMessage.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[2px]", children: bottomMessage.map((m, i) => /* @__PURE__ */ jsx("p", { className: "m-0", children: m }, i)) }),
+            optionNode != null && optionNode
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex gap-[8px]", children: [